/* The pieces of a flow, shared by the screens where this browser acts for a card: the sign-up (/start), logging in
   (/login), /me without a card, /account, /o/new, the staff panel and the sign-in return page. An app screen of the
   card pages' family (app.css, design/DESIGN.md "Il sistema"): fields with the label above, a row of actions, the key's
   facts, the danger line of the backup file, the passphrase choice (backup-file.js), confirmations that name their cost
   (the only place for the danger tone on an action), and the staged wait for the witnesses (publish-wait.js). */

.soon-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--s2); border-radius: var(--round); background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); font-size: var(--fs-small); font-weight: 500; }
.flow h2, .preview h2 { margin-bottom: var(--gap-in); }
.flow h3 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }
.lead-line { font-size: var(--fs-section); line-height: var(--lh-section); max-width: 62ch; }
.muted { color: var(--muted); max-width: 66ch; }
.lead-line + .muted, .muted + .muted { margin-top: var(--s2); }

/* fields: the label above, a 36px input, one line of help under it */
.flow .field { margin-top: 0; gap: var(--s2); }
.flow .field + .field { margin-top: var(--s4); }
.flow .field label { font-weight: 500; }
.flow input[type="text"], .flow input[type="password"] {
  width: 100%; max-width: 480px; height: var(--control-height); padding: 0 var(--s3); border: 1px solid var(--control); border-radius: var(--radius-nested);
  background: var(--field); color: var(--text);
}
.flow input[type="text"]:focus-visible, .flow input[type="password"]:focus-visible { outline-offset: 0; }
.flow input[aria-invalid="true"] { border-color: var(--negative); }
.hint { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); max-width: 62ch; }
.err { color: var(--pill-negative-ink); font-size: var(--fs-small); line-height: var(--lh-small); }
.promise { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s5); font-weight: 500; }
.promise svg { width: 16px; height: 16px; color: var(--muted); }

.actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); margin-top: var(--s5); }
.actions-row.tight { margin-top: var(--s3); gap: var(--s2) var(--s4); }
.actions-row.end { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); }

/* the key: the public half shown, the private half named for where it lives */
.kv { display: grid; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--raised); margin-bottom: var(--s4); }
.kv > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s3); align-items: baseline; }
.kv dt { color: var(--muted); }
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.kv code { font-size: var(--fs-small); }
.flow .verdict { margin-top: var(--s4); max-width: 640px; }
.flow .verdict.ok svg { color: var(--positive); }
.flow .verdict span { display: block; margin-top: 2px; }

/* the stakes of the backup file: the step's heading and this one line in the danger tone (the accent
   stays on verified data); the same line on step 0 when the card has no backup yet */
.stakes { display: flex; gap: var(--s3); align-items: flex-start; margin: 0 0 var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--pill-negative-bg); color: var(--pill-negative-ink); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; max-width: 720px; }
.stakes svg { width: 18px; height: 18px; margin-top: 1px; color: var(--negative); }
.stakes b { font-weight: 600; color: var(--text); }
.lead-line + .stakes { margin-top: var(--s4); }

/* the backup file */
.choice { margin: var(--s4) 0 0; padding: 0; border: 0; min-width: 0; }
.choice legend { padding: 0; margin-bottom: var(--s2); font-weight: 600; }
.opt { display: flex; align-items: center; gap: var(--s3); min-height: 32px; cursor: pointer; font-weight: 500; }
.opt input, .check-line input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); flex: none; }
.suggested, .own { margin: var(--s2) 0 var(--s3) 28px; max-width: 560px; }
.suggested { padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--raised); }
.words-line { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 500; overflow-wrap: anywhere; }
.suggested .hint { margin-top: var(--s2); }
.own .hint { margin-top: var(--s2); }
.own .pf { display: grid; gap: var(--s2); }
.own .pf + .pf { margin-top: var(--s4); }
.own .pf label { font-weight: 500; }
.own .pf .hint { margin-top: 0; }
.own .hint.weak { color: var(--pill-negative-ink); }
.own .hint.good { color: var(--pill-positive-ink); }
.file-name { color: var(--muted); }
.file-name code { color: var(--text); }
.card-url + .fp.words { margin-top: var(--s4); }
.check-line { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); cursor: pointer; }
.check-line:has(input:disabled) { color: var(--faint); cursor: default; }
.flow .notice { margin-top: var(--s4); }
.flow .notice .actions-row { margin-top: var(--s3); }
.notice p span { display: block; margin-top: 2px; }
.notice.gap { margin: 0 0 var(--s4); }
.notice.gap .btn { color: var(--text); border-color: var(--negative-border); }
/* skipping: a small text action under the primary one, and a confirmation that names the cost */
.skip-line { margin-top: var(--s3); }
.skip-line .text-btn { font-size: var(--fs-small); line-height: var(--lh-small); }
.skip-line .text-btn:disabled { cursor: default; opacity: 0.6; text-decoration: none; }
.confirm.danger { background: var(--pill-negative-bg); }
.confirm.danger b { color: var(--pill-negative-ink); }
.confirm.danger span { color: var(--text); }
.confirm .check-line { margin-top: var(--s3); font-weight: 500; }

/* the wait for the witnesses (publish-wait.js): four stages, the third one live with the witnesses'
   faces; done stages take the positive tick, as the verdicts do */
.wait-slot:empty { display: none; }
.wait-box { margin-top: var(--s4); padding: var(--s1) var(--s4); border-radius: var(--radius-nested); background: var(--raised); max-width: 640px; }
.wait-steps { display: grid; }
.ws { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: var(--s3); padding: var(--s3) 0; }
.ws + .ws { border-top: 1px solid var(--rule); }
.ws > svg { width: 18px; height: 18px; margin-top: 1px; color: var(--faint); }
.ws.done > svg { color: var(--positive); }
.ws.bad > svg { color: var(--negative); }
.ws.wait { color: var(--muted); }
.ws .t { display: flex; justify-content: space-between; gap: var(--s3); font-weight: 500; }
.ws.active .t { font-weight: 600; }
.ws .secs { flex: none; white-space: nowrap; color: var(--muted); font-weight: 400; font-size: var(--fs-small); }
.ws .s { margin-top: 2px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.ws .wait-count { color: var(--text); font-size: var(--fs-body); }
.wait-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 16px; margin: var(--s2) 0 var(--s1); }
.wait-faces .roll { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wait-faces .wn { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wait-faces .face.off + .wn { opacity: .6; }
.wait-faces .face { transition: opacity var(--t-slow) var(--ease-out); }

/* already here, and forgetting it */
.sep-block { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.sep-block .muted { margin: var(--s1) 0 var(--s3); }
.confirm { margin-top: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--radius-nested); background: var(--raised); max-width: 640px; }
.confirm b { font-weight: 600; }
.confirm span { color: var(--muted); }
.confirm .actions-row { margin-top: var(--s3); }

@media (max-width: 760px) {
  .kv > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .suggested, .own { margin-left: 0; }
  .flow .actions-row .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .wait-faces .face { transition: none; } }

/* ---------- UX pass (29 October 2026): what happens next, inline errors, QR codes ---------- */
/* after each action, one quiet line says what happens next; it sits under the action it is about */
.next-line { margin-top: var(--s3); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); max-width: 62ch; }
.next-line b { color: var(--text); font-weight: 500; }
/* an error under its own field, with the fix: the field keeps what was typed */
.flow .field .err:not([hidden]), .flow .pf .err:not([hidden]) { display: block; }
/* a QR code: dark modules on a light tile with its quiet zone, in both themes (a light-on-dark code is one many camera
   apps can't read). The tile is the page's ink in the dark theme and the surface in the light one, never a new colour */
.qr-tile { width: 176px; aspect-ratio: 1; flex: none; }
.qr-tile .qr { display: block; width: 100%; height: 100%; }
.qr .qb { fill: var(--text); }
.qr .qm { fill: var(--primary-ink); }
:root[data-theme="light"] .qr .qb { fill: var(--surface); }
:root[data-theme="light"] .qr .qm { fill: var(--text); }
.qr-tile.expired { opacity: 0.25; }
.qr-tile.failed { display: grid; place-items: center; padding: var(--s3); border-radius: var(--radius-nested); background: var(--raised); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); text-align: center; }
.qr-tile:empty { border-radius: var(--radius-nested); background: var(--raised); }
@media (prefers-reduced-motion: no-preference) { .qr-tile { transition: opacity var(--t-slow) var(--ease-out); } }