/* ── Barmio auth screens ─────────────────────────────────────────────────────
   Loaded after style.css on /login, /register, /forgot-password,
   /reset-password and /change-password. These five pages are the step between
   the flyer (or the landing) and the app, so they wear the flyer's clothes:
   cream paper, navy ink, one green, amber only for "zdarma".

   **Light only, and that is the decision, not an oversight.** The flyer has one
   palette and so does the landing; an auth screen that flipped to dark would be
   the single step of that walk that does not match. The app keeps both themes —
   the switch happens at the door, not before it. The templates therefore no
   longer set `data-theme`, and style.css's dark block is gated on
   `:root[data-theme="system"]`, so with no attribute neither dark rule fires.
   **If you ever put the theme script back, this sheet stops being enough.**

   Almost everything below is a token re-point scoped to `body.login-page`;
   custom properties inherit, so one block re-skins every rule style.css already
   wrote for the login family. Only what a token cannot carry — the paper, the
   type, the wizard dots, the amber chip — is spelled out. */

body.login-page {
  /* Flyer palette, sampled from Main@2x.png (see landing.css for the same set). */
  --paper:         #fbf9f5;
  --amber:         #f5a524;
  --amber-ink:     #6f4a00;   /* 8.0:1 on white — amber itself is not text */

  --surface:       #ffffff;
  --surface-2:     #faf9f4;
  --surface-3:     #f4f2ea;
  --input-bg:      #ffffff;
  --text:          #131a31;
  --text-strong:   #131a31;
  --text-muted:    #4d5670;   /* 6.9:1 on white */
  --text-faint:    #646c86;   /* 4.8:1 on white */
  --border:        #e2dfd4;
  --border-strong: #d3cfc1;
  --success-bg:    #e9f3ed;
  --success-text:  #167a48;   /* 4.7:1 on the mint above, 5.4:1 on white */
  /* Links inside the card. style.css points these at --info-text, a *status*
     blue; here the only accent is the brand green, same as on the landing. */
  --info-text:     #167a48;
  /* --action is already #167a48 in style.css's light theme — the flyer green
     and the app's action green are the same value, which is why the two
     surfaces agreed on colour before they agreed on anything else. */

  background: var(--paper);
  font-family: Mulish, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text-muted);
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.login-page .login-card {
  border: 1px solid #e7e8ec;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(19, 26, 49, .04), 0 18px 44px rgba(19, 26, 49, .08);
  padding: 40px 34px 30px;
}

.login-page .login-brand { margin-bottom: 26px; }
.login-page .login-logo { width: 52px; height: 52px; }
.login-page .login-title {
  font-family: Figtree, Mulish, -apple-system, sans-serif;
  font-weight: 900;
  font-size: 1.75rem;
  letter-spacing: -.03em;
  line-height: 1.05;
}
/* The green letterspaced caps above the headline — the flyer's eyebrow,
   the same one the landing hero uses. */
.login-page .login-sub {
  margin-top: 8px;
  color: var(--action);
  font-weight: 800;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  line-height: 1.5;
}
.login-page .login-sub-text { color: var(--text-muted); font-size: .95rem; }

/* The one fact worth an amber chip, on the flyer and here. Amber is the ink of
   "zdarma" and of nothing else; the border carries the colour and a dark amber
   carries the text, because #f5a524 as text on white is 2.0:1. */
.auth-chip {
  display: inline-block;
  margin: 14px auto 0;
  border: 1.5px solid var(--amber);
  border-radius: 8px;
  padding: 7px 16px;
  font-weight: 800;
  font-size: .9rem;
  color: var(--amber-ink);
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
/* `.form-group label` in style.css uppercases every field label in the app;
   that stays — these forms should feel like the app's forms. Only the weight
   and colour are tuned, so a 14px navy caps label stops competing with the
   green eyebrow above it. */
.login-page .login-form label {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .07em;
}
.login-page .login-form .form-input {
  border-color: var(--border-strong);
  border-radius: 10px;
  background: #fff;
}
/* style.css focuses fields in a hardcoded #3498db, which is the one blue left
   on a page that otherwise has a single accent. */
.login-page .login-form .form-input:focus {
  border-color: var(--action);
  box-shadow: 0 0 0 3px rgba(22, 122, 72, .16);
}
.login-page .login-form .form-input::placeholder { color: #9aa0b3; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.login-page .btn-apply {
  font-weight: 800;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(22, 122, 72, .22);
  transition: background .15s ease, box-shadow .15s ease;
}
.login-page .btn-apply:hover:not(:disabled) { box-shadow: 0 10px 24px rgba(22, 122, 72, .28); }
/* Outlined, like the landing's secondary CTA — on cream a filled grey button
   is nearly the page it sits on. */
.login-page .btn-secondary {
  background: #fff;
  border: 1.5px solid rgba(19, 26, 49, .24);
  border-radius: 10px;
  color: var(--text-strong);
  font-weight: 700;
}
.login-page .btn-secondary:hover { background: var(--surface-3); border-color: rgba(19, 26, 49, .45); }

.login-page .register-link { color: var(--text-faint); }
.login-page .register-link a { font-weight: 700; }

/* ── Registration wizard ────────────────────────────────────────────────── */
.login-page .reg-step-dot i { border-width: 2px; font-weight: 800; }
.login-page .reg-step-dot.active i { border-color: var(--action); color: var(--action); }
.login-page .reg-step-dot.active em { color: var(--text-strong); font-weight: 700; }
.login-page .reg-summary { background: var(--surface-3); border-color: var(--border); border-radius: 12px; }
.login-page .reg-sum-row strong { color: var(--text-strong); }
.login-page .reg-consent { border-radius: 10px; border-color: var(--border-strong); }
.login-page .reg-consent-row a { color: var(--action); }

/* Same chip as .auth-chip, but it is a full-width note inside step 4 rather
   than a badge under the logo. */
.login-page .trial-note {
  background: transparent;
  border: 1.5px solid var(--amber);
  color: var(--amber-ink);
  font-weight: 700;
}

.login-page .reg-done-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: var(--success-bg);
  color: var(--action);
}
.login-page .reg-done-icon .icon { width: 30px; height: 30px; }
.login-page .reg-done-title {
  font-family: Figtree, Mulish, sans-serif;
  font-weight: 900;
  letter-spacing: -.02em;
}

/* ── Subscription-expired page ──────────────────────────────────────────────
   Sixth member of the family: subscription.html is `body.login-page` too, so
   it moves with the others or it is the only navy card left. The clock is now
   the sprite's, not an emoji, which is why it needs a size and a chip. */
.login-page .sub-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 4px auto 16px;
  border-radius: 17px;
  background: var(--surface-3);
  color: var(--text-strong);
}
.login-page .sub-icon .icon { width: 32px; height: 32px; }
.login-page .sub-title {
  font-family: Figtree, Mulish, sans-serif;
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: -.02em;
}
/* --info-bg is a cold blue tint, which is the one cold surface on a warm page,
   and --info-text now resolves to the brand green — green body copy inside a
   box reads as a status, not as a sentence. Both are re-pointed here. */
.login-page .sub-owner-msg {
  background: var(--surface-3);
  border-color: var(--border);
  border-radius: 12px;
}
.login-page .sub-owner-msg p { color: var(--text-muted); }
.login-page .sub-cta { display: inline-flex; align-items: center; gap: 8px; }
.login-page .sub-signout { color: var(--text-faint); font-weight: 600; }
.login-page .sub-signout:hover { color: var(--text-strong); }

/* ── Footer line under the card ─────────────────────────────────────────── */
.auth-foot {
  text-align: center;
  margin-top: 18px;
  font-size: .84rem;
  color: var(--text-faint);
}
.auth-foot a { color: var(--text-muted); font-weight: 700; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .login-page .login-card { padding: 32px 22px 26px; border-radius: 16px; }
  .login-page .login-title { font-size: 1.55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .login-page * { transition: none !important; }
}