/* Logging in (/login), /me with no card in this browser, /account, founding an organisation (/o/new) and the page a
   sign-in comes back to: app screens of the card pages' family (app.css for the shell, the panels and the chips; flow.css
   for the fields, the confirmations and the wait for the witnesses; design/DESIGN.md "Il sistema"). Same no-sidebar
   shell and 1152px column, the same 6-column grid: on /login the way in (the lead, 4 columns) beside what this browser
   becomes (2); on /account a label column (2) beside each row's panel (4). The accent stays on verified data only, the
   danger tone on the confirmations of what cannot be undone. */

.page-head { margin-top: var(--s5); }
.page-head h1 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -0.015em; }
.page-sub { margin-top: var(--s1); color: var(--muted); max-width: 72ch; }
.label { font-weight: 500; }
.fp-h { margin: var(--s5) 0 var(--s3); }
.flow .fp.words li { white-space: nowrap; }
.flow .fp.words { margin-bottom: var(--s3); }

/* a status line with its dot (the code waiting for its device) */
.status-line { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); 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.bad { color: var(--pill-negative-ink); }
.status-line.bad .dot { background: var(--negative); }

/* the file input: a button and the file's name; the input itself stays for the keyboard and screen readers */
.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); overflow-wrap: anywhere; }

/* pairing: the code and the key, large, to read on one screen and compare on the other */
.pair-show { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: var(--s4) 0 var(--s1); max-width: 760px; }
.pair-show > div { min-width: 0; padding: var(--s4); border-radius: var(--radius-nested); background: var(--raised); }
.pair-k { color: var(--muted); font-size: var(--fs-small); }
.pair-code { margin-top: var(--s1); font-family: var(--mono); font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 600; letter-spacing: 0.08em; } /* taste-skill-ignore: a code to type is code */
.pair-key.mono { margin-top: var(--s2); font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.pair-dev { margin-top: var(--s2); font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; overflow-wrap: anywhere; }
.pair-sub { margin-top: var(--s2); color: var(--muted); font-size: var(--fs-small); }
.pair-sub.bad { color: var(--pill-negative-ink); }
ol.pair-steps { display: grid; gap: var(--s2); margin: var(--s4) 0 0; padding-left: var(--s5); list-style: decimal; max-width: 66ch; }
ol.pair-steps li::marker { color: var(--muted); }

/* ---------- /login: the tabs, then the way in beside what this browser becomes ---------- */
.login-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; }
.login-grid > .preview { padding-top: var(--pad-lead); }
.login-grid > .lead { align-self: stretch; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--gap); margin-top: var(--s4); max-width: 760px; }
.flow .field-pair .field + .field { margin-top: 0; }
.pv-what { margin: var(--s3) 0 0; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
#pairStart .pair-steps { margin-top: var(--s5); color: var(--muted); }
.login-grid > .flow { grid-column: span 4; }
.login-grid > .preview { grid-column: span 2; }
.pv-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s3); padding: var(--s3) 0; }
.pv-rows li + li { 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-wrap: anywhere; }
.pv-foot { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); color: var(--muted); }
.login-grid .actions-row.end { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); }

/* ---------- /me ---------- */
/* no card in this browser: the three ways to one, as a register of three ruled rows (28 October 2026): the way, what it
   takes, and its button at the row's end; then what the card's page lets you do, as ruled rows in two columns */
.ways { margin-top: var(--sec-gap); row-gap: 0; }
.way { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(176px, auto); align-items: baseline; column-gap: var(--col-gap); padding: var(--s4) 0; border-top: 1px solid var(--rule); }
.way:has(+ .way.quiet), .way:has(+ .panel.quiet) { border-bottom: 1px solid var(--rule); }
.way h2 { margin: 0; }
.way .note { margin: 0; max-width: 60ch; }
.way .btn { margin: 0; justify-self: end; align-self: center; }
.ways > .panel.quiet { margin-top: var(--sec-gap); }
#state h1.answer { font-size: var(--fs-stamp); line-height: var(--lh-stamp); }
#state { max-width: none; }
.what-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
.what-list li { display: grid; grid-template-columns: minmax(150px, 2fr) minmax(0, 3fr); column-gap: var(--s4); align-items: baseline; padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.what-list li > div { display: contents; }
.what-list .t { font-weight: 500; }
.what-list .s { color: var(--muted); }
/* the page a platform's sign-in comes back to (link-return.html): what happened, beside how a link is finished */
.ret-grid { margin-top: var(--s6); }
.ret-grid > .ret { align-self: stretch; }
.ret .actions-row { margin-top: auto; padding-top: var(--s4); }
.ret-error { margin-top: 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-small); overflow-wrap: anywhere; max-width: 640px; }
.ret-error[hidden] { display: none; }
/* what to do next: plain lines under the error, not a second box inside the panel (29 October 2026) */
ul.ret-next { display: grid; gap: var(--s2); margin-top: var(--s4); padding-left: var(--s5); list-style: disc; max-width: 640px; }
.ret-next li::marker { color: var(--faint); }
.answer.done svg { color: var(--positive); }
.what-list.one { grid-template-columns: minmax(0, 1fr); }
.what-list.one li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
.what-list.got { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .what-list.got { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .what-list.got { grid-template-columns: minmax(0, 1fr); } }

/* ---------- /account (since 24 October 2026): the three things that are not the card's content ---------- */
/* the settings pattern: each row a label column (2 of the 6 columns: the title and what it is about) beside its panel
   (4), rows split by a rule; the header is the page's title with the card it is about, and the way to the card */
.acct-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.acct-title { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.acct-title .avatar { width: 40px; height: 40px; font-size: var(--fs-body); }
.acct-title .page-sub { margin-top: 2px; }
.acct-head + #notices:not(:empty) { margin-top: var(--s1); }
.acct-grid { display: grid; margin-top: var(--s5); }
.acct-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap) var(--col-gap); padding: var(--s5) 0; }
.acct-row + .acct-row { border-top: 1px solid var(--rule); }
.acct-row:first-child { padding-top: var(--s2); }
.acct-label { grid-column: span 2; min-width: 0; padding-top: var(--s2); }
.acct-label h2 { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; }
.acct-label p { margin-top: var(--s2); color: var(--muted); max-width: 46ch; }
.acct-panel { grid-column: span 4; }
.acct-kv { margin-bottom: 0; background: none; padding: 0; gap: var(--s3); }
.acct-kv > div { grid-template-columns: 150px minmax(0, 1fr); }
.acct-kv .kfp { display: inline-flex; }
.acct-more { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--fs-small); }
.acct-staff { font-weight: 500; }
.erase-when { display: flex; align-items: center; gap: var(--s3); color: var(--pill-negative-ink); font-weight: 600; }
.erase-when svg { width: 18px; height: 18px; color: var(--negative); }
.erase-pending .muted { margin-top: var(--s1); }
/* the two ways to log out, side by side, each with its consequence and a confirmation that names it; the buttons line up */
.dz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); }
.dz-item { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.dz-item + .dz-item { padding-left: var(--s6); border-left: 1px solid var(--rule); }
.dz-item .muted { margin: var(--s1) 0 var(--s3); font-size: var(--fs-small); line-height: var(--lh-small); }
/* each way's button under its own words (28 October 2026): pinned to the foot it left a hole above the shorter one */
.dz-item > .btn { margin-top: var(--s1); }
.dz-item > .confirm, .dz-item > .verdict, .dz-item > .wait-slot { align-self: stretch; }
.dz-note { 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-small); }
.dz .confirm { max-width: none; }
.dz .verdict { margin-top: var(--s3); }
.dz-item[hidden] + .dz-item, .dz:has(> .dz-item[hidden]) > .dz-item { padding-left: 0; border-left: 0; }
.dz:has(> .dz-item[hidden]) { grid-template-columns: minmax(0, 1fr); }

/* ---------- tablet and phone ---------- */
@media (max-width: 1100px) and (min-width: 961px) { .what-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .login-grid > .flow, .login-grid > .preview { grid-column: 1 / -1; }
  .login-grid > .preview { padding-top: 0; }
  .way { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s1); }
  .way .note { grid-column: 1; grid-row: 2; }
  .way .btn { grid-column: 2; grid-row: 1 / span 2; }
  .what-list { grid-template-columns: minmax(0, 1fr); }
  .field-pair { grid-template-columns: minmax(0, 1fr); }
  .dz { grid-template-columns: minmax(0, 1fr); }
  .dz-item + .dz-item { margin-top: var(--s4); padding: var(--s4) 0 0; border-left: 0; border-top: 1px solid var(--rule); }
  .dz-item > .btn { margin-top: 0; }
}
/* a tablet (761-960px, 30 October 2026): /account keeps its settings rows, the label beside its panel (2 + 4 of the six
   columns, as on a computer), down to the phone; stacked, every row left the right of a 700px screen empty. What a way in
   or a founding makes (the preview under the form on /login and /o/new) takes the width in two columns: its rows on the
   right, what it is and what it says on the left, instead of one list whose states sat 700px from their names. */
@media (min-width: 761px) and (max-width: 960px) {
  .login-grid > .preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; align-content: start; }
  .login-grid > .preview > * { grid-column: 1; }
  .login-grid > .preview > h2 { grid-column: 1 / -1; }
  .login-grid > .preview > .pv-rows { grid-column: 2; grid-row: 2 / span 3; }
  .login-grid > .preview > .pv-rows li:first-child { padding-top: 0; }
  .login-grid > .preview > .pv-what { margin-top: 0; }
  /* the label a little wider than its two sixths, so its sentence keeps a reading measure beside a 400px panel */
  .acct-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .acct-label, .acct-panel { grid-column: auto; }
}
@media (max-width: 760px) {
  .acct-label, .acct-panel { grid-column: 1 / -1; }
  .acct-label p { max-width: 72ch; }
  .acct-row { gap: var(--s3); }
  .way { grid-template-columns: minmax(0, 1fr); }
  .way .btn { grid-column: 1; grid-row: 3; justify-self: start; margin-top: var(--s2); }
  .what-list li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .pair-show { grid-template-columns: minmax(0, 1fr); }
  .pair-code { font-size: var(--fs-title); line-height: var(--lh-title); }
  .acct-kv > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* a lead paragraph and the form under it */
.flow p.muted + form, .flow p.muted + .field { margin-top: var(--s4); }
/* a row whose panel is only an action (closing the card, the staff's panel): no box, the action on the label's line */
.acct-panel.quiet { padding-top: var(--s2); align-items: flex-start; }
.acct-panel.quiet .actions-row:first-child, .acct-panel.quiet #eraseOpen > .actions-row:first-child { margin-top: 0; }

/* ---------- third pass (29 October 2026) ---------- */
/* /login: the way in being shown is the screen's stamp, as each step of /start; the heading takes the focus when it opens
   (for screen readers) and shows no ring, since it is not a control */
.login-grid .flow > h2 { font-size: var(--fs-stamp); line-height: var(--lh-stamp); letter-spacing: -0.025em; margin-bottom: var(--s4); }
.login-grid .flow > h2:focus { outline: none; }
/* the code to type on the other device is the largest thing on the screen while it waits: the way's heading steps down */
#way-pair:has(#pairShow:not([hidden])) > h2 { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: -0.015em; }
.pair-code { font-size: var(--fs-stamp); line-height: var(--lh-stamp); }
@media (max-width: 760px) { .pair-code { font-size: var(--fs-stamp); line-height: var(--lh-stamp); } }
/* /login: the ways in as a register (29 October 2026), not tabs. Each way on a ruled row: its name, what it needs, its
   own button, which opens the way below (the open one's button keeps a quiet fill). The third row, for someone who has
   neither, is quieter and smaller. The register goes once this browser is on a card (login.js hides #ways). */
.ways-in { margin-top: var(--s6); border-top: 1px solid var(--rule); }
.way-in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(150px, auto); column-gap: var(--col-gap); align-items: center; padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.way-in .wt { font-weight: 600; }
.way-in .wp { color: var(--muted); max-width: 60ch; }
.way-in > .btn, .way-in > a { justify-self: end; }
.way-in.on > .btn { background: var(--active); border-color: var(--active); }
.way-in.quiet { padding: var(--s3) 0; font-size: var(--fs-small); line-height: var(--lh-small); }
.way-in.quiet .wt { font-weight: 500; }
.ways-in + .login-grid { margin-top: var(--s6); }
@media (max-width: 760px) {
  .way-in { grid-template-columns: minmax(0, 1fr); row-gap: var(--s1); }
  .way-in > .btn, .way-in > a { justify-self: start; margin-top: var(--s2); }
}
/* "No card yet?" goes once this browser is on a card */
.login-grid:has(#done:not([hidden]), #already:not([hidden])) .pv-foot { display: none; }

/* ---------- UX pass (29 October 2026): pairing with a QR code ---------- */
/* the QR code of the pairing link beside the code and the key: the camera of the device that holds the card opens its
   card at "Add a device" with the code filled in; the code stays the largest text, the key under it to compare */
.pair-show.with-qr { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.pair-show.with-qr > .pair-qr, .pair-show.with-qr > .pair-facts { padding: 0; background: none; }
.pair-qr { display: grid; justify-items: start; gap: var(--s2); margin: 0; }
.pair-qr figcaption { max-width: 176px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.pair-facts { display: grid; gap: var(--gap); min-width: 0; }
.pair-facts > div { min-width: 0; padding: var(--s4); border-radius: var(--radius-nested); background: var(--raised); }
.pair-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin-top: var(--s3); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.pair-link code { color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .pair-show.with-qr { grid-template-columns: minmax(0, 1fr); }
  /* on a phone the code to type comes first; the QR code is for a camera, which a phone screen rarely faces */
  .pair-show.with-qr > .pair-qr { order: 2; }
}

/* ---------- UX pass (29 October 2026): /account in sections, each with its one action ---------- */
/* the sections to jump to: text links on one line under the header, wrapping on a phone */
.acct-index { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin-top: var(--s4); }
.acct-index a { font-size: var(--fs-small); line-height: var(--lh-small); }
.acct-index a[hidden] { display: none; }
@media (max-width: 760px) { .acct-index { gap: 0 var(--s4); } .acct-index a { display: inline-flex; align-items: center; min-height: 32px; } .acct-index a[hidden] { display: none; } }
.acct-row { scroll-margin-top: 72px; }
/* the card's address: its QR code beside the address and the copy control */
.addr { display: flex; align-items: flex-start; gap: var(--s5); }
.addr .qr-tile { width: 152px; }
.addr-url { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 500; overflow-wrap: anywhere; }
.addr .muted { margin-top: var(--s1); font-size: var(--fs-small); line-height: var(--lh-small); }
.acct-sum { font-weight: 500; }
/* the closing, in three moments: what happens now, after 24 hours, and what the public log keeps for ever */
.erase-steps { display: grid; margin: var(--s3) 0 0; }
.erase-steps > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--s3); padding: var(--s2) 0; }
.erase-steps > div + div { border-top: 1px solid var(--negative-border); }
.erase-steps dt { font-weight: 600; color: var(--pill-negative-ink); }
.erase-steps dd { color: var(--text); }
@media (max-width: 760px) {
  .addr { flex-direction: column; gap: var(--s3); }
  .erase-steps > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* The email notices on /account (30 October 2026): the state in one line, a grey note, the proofs that stopped confirming
   in the warning tone, then the one command. */
.notices-note { margin-top: var(--s1); font-size: var(--fs-small); line-height: var(--lh-small); }
.notices-failing { display: grid; gap: var(--s1); margin-top: var(--s3); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--pill-warning-ink); overflow-wrap: anywhere; }
.notices-failing .nf-h { font-weight: 500; }
.notices-failing[hidden] { display: none; }
#email .verdict { margin-top: var(--s3); }

/* ---------- motion (30 October 2026, design/DESIGN.md "Movimento e risposte") ---------- */
/* What opens in place on /login, /account and /o/new (a way in, a confirmation, a receipt, the step after) arrives over
   --t-slow from 4px above and from transparent, once the page is drawn (html[data-motion], theme.js). The page around it
   takes its new height at once: no height is animated, and closing is immediate. Never on reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html[data-motion] :is(.login-grid, .acct-grid) :is(.flow, .confirm, .verdict, .erase-pending) {
    transition: opacity var(--t-slow) var(--ease-out), translate var(--t-slow) var(--ease-out);
  }
  @starting-style {
    html[data-motion] :is(.login-grid, .acct-grid) :is(.flow, .confirm, .verdict, .erase-pending):not([hidden]) { opacity: 0; translate: 0 -4px; }
  }
}