/* The sign-up (/start): an app screen of the card pages' family (app.css, design/DESIGN.md "Il sistema"), on the same
   no-sidebar shell and 1152px column. The steps run along an underline rule like the card's tabs; under them the
   current step (the lead, 4 columns) beside the card it is making (a secondary panel, 2 columns), so what each step
   produces is in view while it is done. One filled action per step; the accent stays on verified data only. The fields,
   the backup file's choice, the confirmations and the wait for the witnesses are in flow.css. */

.start-head { margin-top: var(--s5); }
.start-head h1 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -0.015em; }
.start-sub { margin-top: var(--s1); color: var(--muted); font-size: var(--fs-body); }

/* ---------- the steps: the ledger line of the sign-up (28 October 2026) ----------
   The six steps are stations on one 2px rule, as the card's chain of proofs: each name above the rule, a tick where it
   starts. The steps done and the current one rule in ink, the ones to come in the quiet tone; the current name in ink. */
.stepper { position: relative; margin-top: var(--s5); overflow-x: auto; scrollbar-width: none; }
.stepper::-webkit-scrollbar { display: none; }
/* one column per step shown: six, or seven with "Other keys" on a format 2 log */
.stepper ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-width: 640px; padding-bottom: 6px; }
.stepper ol:has(> li[data-step="4.5"]:not([hidden])) { min-width: 720px; }
.stepper li { position: relative; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s4) var(--s2) 0; border-bottom: 2px solid var(--line, var(--active)); color: var(--faint); font-weight: 500; white-space: nowrap; --line: var(--active); }
.stepper li::before { content: ""; position: absolute; left: 0; bottom: -7px; width: 2px; height: 12px; background: var(--line); }
.stepper li svg { display: none; }
.stepper li.done { color: var(--muted); --line: var(--text); }
.stepper li[aria-current="step"] { color: var(--text); font-weight: 600; --line: var(--text); }
/* the ledger line of the sign-up (29 October 2026), the card's chain as a device: each station's name above the rule in
   the small size, and once it is done what it made on the rule, in ink (the name, the key, the card's number, the file) */
.stepper li { display: grid; align-content: end; row-gap: 2px; font-size: var(--fs-small); line-height: var(--lh-small); }
.stepper li .sv { min-height: var(--lh-body); color: var(--text); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the step in course has nothing made yet: its name stands on the rule, in ink, where the others show what they made */
.stepper li[aria-current="step"] > span { font-size: var(--fs-body); line-height: var(--lh-body); }
.stepper li[aria-current="step"] > .sv:empty { display: none; }

/* ---------- the step beside the card it makes: 4 + 2 columns of the 6-column grid ---------- */
.start-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sec-gap) var(--col-gap); margin-top: var(--s5); align-items: start; }
/* the card being made sits on the page beside the step: its heading on the step's heading line */
.start-grid > .lead + .preview, .start-grid > .lead ~ .preview { padding-top: var(--pad-lead); }
.start-grid .flow { grid-column: span 4; }
.start-grid .preview { grid-column: span 2; }
/* the card that now exists */
.card-url { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 500; }
.status-line { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); color: var(--muted); font-size: var(--fs-small); }
.status-line .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; }
.status-line.ok .dot { background: var(--positive); }
.fp-h { margin: var(--s5) 0 var(--s3); }
.flow .fp.words { margin-bottom: var(--s3); }
.flow .fp.words li, .preview .fp.words li { white-space: nowrap; }

/* what comes next: rows of words, no icons */
.next { margin-top: var(--s5); display: grid; }
.next-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.next-row .t { font-weight: 500; display: flex; align-items: center; gap: var(--s2); }
.next-row .s { margin-top: 2px; color: var(--muted); }
/* "Link accounts", the step after the sign-up: a link to the card's links once the card exists */
.stepper .step-link { color: inherit; }
.stepper .step-link[href] { color: var(--muted); text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 4px; }
.stepper .step-link[href]:hover { color: var(--text); }

/* ---------- step 1: the profile picture, optional (the file picker and the checks of an organisation's logo) ---------- */
.flow .field .label { font-weight: 500; }
/* step 4.5: the form of keys from elsewhere stands apart from the table of types above it */
#keysForm { margin-top: var(--s6); }
.pic-pick { display: flex; align-items: center; gap: var(--s4); }
.pic-big { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; background: var(--person-bg); }
.pic-big img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pic-pick .hint { margin-top: var(--s2); }
.file-pick { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.file-pick input[type="file"] { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-pick input[type="file"]:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-shown { min-width: 0; color: var(--muted); font-size: var(--fs-small); overflow-wrap: anywhere; }
.flow .checks { display: grid; gap: var(--s2); margin-top: var(--s3); }
.flow .checks li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s2); align-items: start; font-size: var(--fs-small); line-height: var(--lh-small); }
.flow .checks svg { width: 16px; height: 16px; color: var(--faint); }
.flow .checks .ok svg { color: var(--positive); }
.flow .checks .bad svg { color: var(--negative); }
.flow .checks .bad { color: var(--pill-negative-ink); }

/* ---------- the card being made ---------- */
.pv-head { display: flex; align-items: center; gap: var(--s3); }
.pv-head .avatar { width: 40px; height: 40px; background: var(--p1-bg); color: var(--p1-ink); font-size: var(--fs-body); overflow: hidden; }
.pv-head .avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pv-head .avatar.made { background: var(--person-bg); color: var(--person-ink); }
.pv-head .avatar:empty { background: var(--active); }
.pv-name { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; overflow-wrap: anywhere; }
.pv-name.empty { color: var(--faint); font-weight: 500; }
.pv-url { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.pv-rows { margin-top: var(--s4); }
.pv-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.pv-rows .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-rows .s { margin-top: 2px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-fp-h { padding-top: var(--s3); border-top: 1px solid var(--rule); font-weight: 500; }
#pvFp { margin-top: var(--s1); }
.preview .fp.words { margin-top: var(--s2); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1) var(--s3); font-size: var(--fs-body); line-height: var(--lh-body); }

/* ---------- tablet and phone ---------- */
/* the step and its card side by side down to 961px, as the card pages (a 1024 screen keeps both) */
@media (max-width: 960px) {
  .start-grid .flow, .start-grid .preview { grid-column: 1 / -1; }
  .start-grid > .lead ~ .preview { padding-top: 0; }
}
/* a tablet (761-960px, 30 October 2026): under the step, the card being made uses the width in two columns, the name and
   the twelve words on the left, its rows on the right, instead of one list whose states sat 700px from their names */
@media (min-width: 761px) and (max-width: 960px) {
  .start-grid .preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: var(--col-gap); align-items: start; }
  .start-grid .preview > h2 { grid-column: 1 / -1; }
  .start-grid .preview > .pv-head { grid-column: 1; grid-row: 2; }
  .start-grid .preview > .pv-fp-h { grid-column: 1; grid-row: 3; margin-top: var(--s4); }
  .start-grid .preview > #pvFp { grid-column: 1; grid-row: 4; }
  .start-grid .preview > .pv-rows { grid-column: 2; grid-row: 2 / span 3; margin-top: 0; }
  .start-grid .preview > .pv-rows li:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 760px) {
  /* on a phone the steps wrap onto two lines rather than run off the screen's edge: three and three, or four and three */
  .stepper { overflow: visible; }
  .stepper ol { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; row-gap: var(--s4); }
  .stepper ol:has(> li[data-step="4.5"]:not([hidden])) { grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; }
  .stepper li { white-space: normal; }
  .start-grid { margin-top: var(--s3); }
}

/* ---------- third pass (29 October 2026): one strong thing per step, the backup file without the alarm ---------- */
/* the step's heading is the screen's stamp, the one large thing: what is true now ("Your card is live") or what to do */
.start-grid .flow > h2 { font-size: var(--fs-stamp); line-height: var(--lh-stamp); letter-spacing: -0.025em; margin-bottom: var(--s4); }
/* the heading takes the focus when a step opens, for screen readers; it is not a control, so it shows no ring */
.start-grid .flow > h2:focus { outline: none; }
/* the backup file: why it matters, said once, in ink at reading size. No red box: the danger tone stays for the skip's
   confirmation, the one place where the cost is real. The six words, the download and "I saved it" follow in order. */
#step-4 .stakes { display: block; margin: 0 0 var(--s3); padding: 0; background: none; color: var(--text); font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 500; max-width: 60ch; }
#step-4 .stakes svg { display: none; }
#step-4 .stakes b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--control); }
#step-4 > .muted { max-width: 60ch; }
/* the one strong moment of the one step that matters: the file exists, said in the ok tone */
#h-4.made { color: var(--pill-positive-ink); }
/* a finished wait is a receipt: the witnesses and the entry, not the four stages again */
.start-grid .wait-box:not(:has(.ws.active, .ws.wait, .ws.late, .ws.bad)) .ws:nth-child(-n+2) { display: none; }
/* the twelve words show once: in the step that explains them, and the card beside it keeps its rows */
.start-grid:has(#step-3:not([hidden]), #step-5:not([hidden])) :is(.pv-fp-h, #pvFp) { display: none; }
#step-5 .card-url, #step-3 .card-url { font-size: var(--fs-section); }
@media (max-width: 860px) {
  /* on a phone and a narrow tablet the steps are one rule in segments, with the current step's name above it at the
     left: seven names in two rows read as a menu, and in one row they ran off the side. The others keep their names
     for screen readers. */
  .stepper { overflow: visible; }
  .stepper ol, .stepper ol:has(> li[data-step="4.5"]:not([hidden])) { min-width: 0; position: relative; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); column-gap: 4px; row-gap: 0; padding: 30px 0 0; }
  .stepper li { position: static; padding: 0; }
  .stepper li::before { content: none; }
  .stepper li .sv { display: none; }
  .stepper li > span, .stepper li > a { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stepper li[aria-current="step"] > span { left: 0; top: 0; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* ---------- UX pass (29 October 2026): coming back, and what happens next ---------- */
/* one line under the steps says where an unfinished sign-up picked up, with "Start over" while nothing is published */
.resume-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); margin-top: var(--s4); color: var(--muted); max-width: 90ch; }
.resume-line .text-btn[hidden] { display: none; }
.resume-line + .start-grid { margin-top: var(--s4); }
/* the line under an action sits close to it; on the last step the rows of where to go follow their heading */
.start-grid .next-line { margin-top: var(--s3); }
#step-5 .fp-h + .next { margin-top: 0; }
/* the account a lookup found no card for (30 October 2026): offered first on the last step, its value already in the field */
.funnel-form { display: grid; gap: var(--s3); margin-top: var(--s3); max-width: 480px; }
.funnel-field { display: grid; gap: var(--s1); }
.funnel-label { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.funnel-field input { width: 100%; }
.funnel-who { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.funnel-form .actions-row { margin: 0; }
.funnel-form .err { margin: 0; }

/* ---------- motion (30 October 2026, design/DESIGN.md "Movimento e risposte") ---------- */
/* The next step, the skip's confirmation and a receipt arrive over --t-slow from 4px above and from transparent, once the
   page is drawn (html[data-motion], theme.js); the step a returning visitor lands on is simply there. Nothing else moves:
   the page takes its new height at once, and the step left behind goes at once. Never on reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion] .start-grid :is(.flow, .confirm, .verdict) { transition: opacity var(--t-slow) var(--ease-out), translate var(--t-slow) var(--ease-out); }
  @starting-style {
    html[data-motion] .start-grid :is(.flow, .confirm, .verdict):not([hidden]) { opacity: 0; translate: 0 -4px; }
  }
}

/* Stability (polish pass, 30 October 2026): the page is drawn before start.js says which step is open. Until it does, the
   first step holds its place out of sight and is marked on the steps' line as the one in course, and the lines of the card
   being made keep their height while they are still empty, so nothing moves when the script fills them in. */
.start-grid:not(:has(> .flow:not([hidden]))) > #step-1[hidden] { display: block !important; visibility: hidden; }
.stepper ol:not(:has(> li[aria-current])) > li[data-step="1"] { color: var(--text); font-weight: 600; --line: var(--text); }
.stepper ol:not(:has(> li[aria-current])) > li[data-step="1"] > span { font-size: var(--fs-body); line-height: var(--lh-body); }
.stepper ol:not(:has(> li[aria-current])) > li[data-step="1"] > .sv:empty { display: none; }
.pv-name:empty { min-height: var(--lh-section); }
.pv-url:empty { min-height: var(--lh-small); }
.pv-rows .t:empty { min-height: var(--lh-body); }
.pv-rows .s:empty { min-height: var(--lh-small); }
#pvFp:empty { min-height: var(--lh-body); }