/* Login by e-mail (form, code, link pages), Môj účet and the account bar. Tokens only (base.css, DESIGN.md). */

/* ── auth pages: one sheet on the paper ─────────────────────────────── */
.auth { min-height: calc(100vh - 80px); display: grid; align-content: start; justify-items: center; gap: var(--s-5);
  padding: var(--s-7) var(--s-4) var(--s-6); }
.auth-mark { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); text-decoration: none;
  font-weight: 650; font-size: var(--f-17); }
.auth-mark .mark { width: 32px; height: 32px; margin: 0; color: var(--stamp); }
.auth-sheet { width: 100%; max-width: 440px; }
.auth-sheet h1 { margin-bottom: var(--s-2); }
.auth-lead { color: var(--ink-2); margin-bottom: var(--s-4); }
.auth-form { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.auth-form .hint, .auth-form .error-text, .firm-form .hint, .firm-form .error-text { margin: calc(-1 * var(--s-2)) 0 0; }
.auth-submit { width: 100%; margin-top: var(--s-2); min-height: 44px; }
.auth-links { margin: var(--s-3) 0 0; font-size: var(--f-15); }
.auth-alt { margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--rule); color: var(--ink-2); font-size: var(--f-15); }
.auth-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 0; }
.auth-inline { margin: var(--s-2) 0 var(--s-3); }

.auth-check { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-2); align-items: start; font-size: var(--f-15); line-height: 22px; }
.auth-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--stamp); }
.auth-code input { font-variant-numeric: tabular-nums; letter-spacing: .3em; font-size: var(--f-21); max-width: 12ch; }
.auth-facts { display: grid; gap: var(--s-2); margin: var(--s-4) 0; padding: var(--s-3) 0; border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); }
.auth-facts div { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-3); }
.auth-facts dt { color: var(--ink-2); font-size: var(--f-13); line-height: 22px; }
.auth-facts dd { margin: 0; overflow-wrap: anywhere; }

.auth-errors, .auth-note { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-2); padding: var(--s-3);
  border-radius: var(--r-ctl); font-size: var(--f-15); line-height: 22px; margin-top: var(--s-3); }
.auth-errors { background: var(--bad-wash); color: var(--ink); }
.auth-errors svg { color: var(--bad); width: 18px; height: 18px; margin-top: 2px; }
.auth-errors p { margin: 0; font-weight: 550; }
.auth-errors ul { margin: var(--s-1) 0 0; padding-left: 18px; }
.auth-errors a { color: var(--ink); }
.auth-note p { margin: 0; }
.auth-note svg { width: 18px; height: 18px; margin-top: 2px; }
.auth-note-ok { background: var(--ok-wash); } .auth-note-ok svg { color: var(--ok); }
.auth-note-warn { background: var(--warn-wash); } .auth-note-warn svg { color: var(--warn); }
.auth-note-info { background: var(--stamp-wash); } .auth-note-info svg { color: var(--stamp); }

@media (max-width: 767px) {
  .auth { padding: var(--s-5) var(--s-4); }
  .auth-sheet { padding: var(--s-5) var(--s-4); }
}

/* ── Môj účet ────────────────────────────────────────────────────────── */
.account { max-width: 760px; }
.account .panel h2 { margin-bottom: var(--s-3); }
.plan-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-2); }
.plan-list li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-2); }
.plan-list svg { width: 18px; height: 18px; margin-top: 3px; color: var(--ok); }
.plan-paid { color: var(--ink-2); }

.meter { margin: 0 0 var(--s-4); }
.meter-head { display: flex; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-1); }
.meter-bar { height: 8px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.meter-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.meter-warn .meter-bar span { background: var(--warn); }
.meter-bad .meter-bar span { background: var(--bad); }
.meter-bad .meter-head b { color: var(--bad); }

.firm-list { list-style: none; margin: 0; padding: 0; }
.firm-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule); }
.firm-list li:last-child { border-bottom: 0; }
.firm-form { display: grid; gap: var(--s-3); max-width: 560px; }
.firm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); }
.firm-form .btn { justify-self: start; }
.acct-form { margin-bottom: var(--s-5); }
.account h3 { font-size: var(--f-15); margin: var(--s-4) 0 var(--s-1); }
.session-list { margin-bottom: var(--s-3); }

/* ── account bar on app pages ────────────────────────────────────────── */
.acct-bar { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-2) var(--s-6);
  border-bottom: 1px solid var(--rule); background: var(--sheet); font-size: var(--f-13); line-height: 20px; }
.acct-firm { font-weight: 600; color: var(--ink); }
.acct-warn { display: inline-flex; gap: 6px; align-items: flex-start; color: var(--ink); }
.acct-warn svg { width: 16px; height: 16px; color: var(--warn); flex: none; margin-top: 2px; }
.acct-links { margin-left: auto; display: inline-flex; gap: var(--s-4); align-items: center; }
.acct-links form { margin: 0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--stamp); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 767px) {
  .acct-bar { padding: var(--s-2) var(--s-4); gap: var(--s-2) var(--s-3); }
  .acct-links { margin-left: 0; }
}