/* The session in the top bar (session.js), on every page: the card pages, the sign-up, the device page,
   logging in and the landing page. Logged out: "Create" as a link of the bar and "Log in" as a quiet
   outlined pill. Logged in: the card's initials in a 28px circle (the person tint of the cards' avatars),
   the name beside it on wide screens, and a menu that floats (the one place with a shadow). The tokens are
   the ones app.css and landing.css both define. */
.session { display: flex; align-items: center; gap: var(--s3); flex: none; }
.session:empty { display: none; }
.ses-link { font-size: var(--fs-body); font-weight: 500; color: var(--muted); transition: color var(--t-fast) var(--ease-out); }
.ses-link:hover, .ses-link[aria-current="page"] { color: var(--text); }
.ses-login {
  display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s3); border: 1px solid var(--control); border-radius: var(--round);
  color: var(--text); font-size: var(--fs-body); font-weight: 500; white-space: nowrap; transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.ses-login:hover { background: var(--raised); border-color: var(--control-hover); }
/* where you are (29 October 2026): the page's own entry in the bar and in the menu, in ink on a quiet fill */
.ses-login[aria-current="page"] { background: var(--active); border-color: var(--active); }
.ses-items [role="menuitem"][aria-current="page"] { background: var(--raised); font-weight: 600; }

.ses { position: relative; }
.ses-btn {
  display: inline-flex; align-items: center; gap: var(--s2); height: 32px; padding: 0 var(--s2) 0 2px; border: 0; border-radius: var(--round);
  background: transparent; color: var(--text); font: 500 var(--fs-body)/var(--lh-body) var(--font); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out);
}
.ses-btn:hover, .ses-btn[aria-expanded="true"] { background: var(--raised); }
.ses-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--person-bg); color: var(--person-ink); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.01em; }
.ses-btn.bad .ses-av { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
/* the card's profile picture, when it has one: round, filling the circle */
.ses-av { overflow: hidden; }
.ses-av img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ses-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ses-chev { width: 12px; height: 12px; color: var(--muted); }

.ses-menu {
  position: absolute; z-index: 20; top: calc(100% + var(--s2)); right: 0; width: 288px; max-width: calc(100vw - 32px);
  padding: var(--s2); border-radius: var(--radius-card, 14px); background: var(--surface); box-shadow: var(--shadow-float); /* taste-skill-ignore: the menu floats over the page */
  font-size: var(--fs-body); line-height: var(--lh-body); text-align: left;
}
.ses-head { padding: var(--s2) var(--s2) var(--s3); }
.ses-h-name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-weight: 600; overflow-wrap: anywhere; }
.ses-h-text { min-width: 0; }
/* the card's organisations beside its name, as on the card: 24px rounded squares, the logo or the initials */
.ses-orgs { display: inline-flex; gap: var(--s2); }
.ses-org { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-small); overflow: hidden; background: var(--active); color: var(--text); font-size: var(--fs-small); font-weight: 600; }
.ses-org img { display: block; width: 24px; height: 24px; object-fit: contain; }
.ses-h-sub { margin-top: 2px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); overflow-wrap: anywhere; }
.ses-h-sub.bad { color: var(--pill-negative-ink); }
.ses-items [role="menuitem"] {
  display: flex; align-items: center; width: 100%; min-height: 36px; padding: 0 var(--s2); border: 0; border-radius: var(--radius-small);
  background: none; color: var(--text); font: 500 var(--fs-body)/var(--lh-body) var(--font); text-align: left; cursor: pointer;
}
.ses-items [role="menuitem"]:hover, .ses-items [role="menuitem"]:focus-visible { background: var(--active); outline: none; }
.ses-items [role="menuitem"]:focus-visible { box-shadow: inset 0 0 0 1px var(--control-hover); } /* taste-skill-ignore: the keyboard's place in the menu, beside the hover fill */
.ses-items [data-ses-logout] { color: var(--text); }
.ses-sep { height: 1px; margin: var(--s2) var(--s1); background: var(--rule); }
.ses-confirm { margin-top: var(--s1); padding: var(--s3); border-radius: var(--radius-nested); background: var(--pill-negative-bg); }
.ses-confirm p { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text); }
.ses-confirm b { display: block; margin-bottom: var(--s1); color: var(--pill-negative-ink); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }
.ses-actions { display: flex; gap: var(--s2); margin-top: var(--s3); }
.ses-act {
  display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 var(--s3); border: 1px solid var(--control); border-radius: var(--round);
  background: transparent; color: var(--text); font: 500 var(--fs-body)/var(--lh-body) var(--font); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out);
}
.ses-act:hover { background: var(--active); }
.ses-act.danger { border-color: var(--negative-border); color: var(--pill-negative-ink); }
.ses-act.danger:hover { background: var(--pill-negative-bg); border-color: var(--negative); }
.ses-instead { display: inline-block; margin-top: var(--s3); font-size: var(--fs-small); color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--control); }
.ses-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the name goes first when the bar runs short; once the bar has its menu button (900px and less) "Create" is one of the
   menu sheet's links ("Create a card"), so the search keeps room for its whole hint on a tablet (30 October 2026) */
@media (max-width: 1100px) { .ses-name { display: none; } .ses-btn { padding-right: 6px; } }
@media (max-width: 900px) { .session .ses-link { display: none; } }
/* the bar's search fits its whole hint in either language: the Italian one ("Email, dominio, chiave o numero della
   scheda", 322px at 14px) was cut at every width in a 320px field; where the bar is short of room the field gives way
   first (flex) */
html[lang="it"] .bar-right .search { width: 392px; }
/* ...and the English one is as wide (follow-ups of the stability pass, 30 October 2026): the field no longer changes width
   with the language, so the switch and the session beside it stay where they are */
.bar-right .search { width: 392px; }
/* Where the bar is short of room (901-1100px: the four links are back and the menu button is gone) the gaps close to 16px
   and the search is what gives way, down to 160px, so the bar never runs off the side: at 901px it was 31px wider than
   the screen in English and 61px in Italian. */
.bar-right { min-width: 0; }
.bar-right .search { flex: 0 1 auto; min-width: 160px; }
@media (min-width: 901px) and (max-width: 1100px) {
  .bar-inner { gap: var(--s4); } .bar-links { gap: var(--s4); }
  /* where the field gives way, it gives way by the screen's width alone, the same in both languages: what the Italian bar
     needs beside it (the links, the switch, the session logged out) is 616 px */
  .bar-right .search { flex: none; width: clamp(160px, calc(100vw - 616px), 392px); }
}
/* links only for a browser that holds no card (the menu sheet's "Create a card" on a phone) */
html[data-logged-in] [data-when-out] { display: none; }
/* the landing page's top row is half the screen wide: the card's initials alone */
[data-session="compact"] .ses-name { display: none; }
[data-session="compact"] .ses-btn { padding-right: 6px; }
@media (min-width: 1080px) { .toprow:has(.session) { gap: var(--s5); } }

/* Text people wrote (names, device names, handles, notes, reports, reasons) never reorders the text around it
   (docs/sicurezza.md, S9): every inline run is its own bidirectional isolate, like <bdi>, on every page that loads
   this sheet (all of them). For text written in one direction nothing changes; the scripts also put the names
   inside sentences in <bdi>. */
a, span, bdi, td, th, dd, li, option, label { unicode-bidi: isolate; }

/* The warrant canary's line in the footer (canary.js, 29 October 2026). This sheet is the one every page with a footer
   loads, the landing page too. A canary more than 35 days old, or none at all, is a warning: the warning tone, not the
   danger one. */
:is(.foot, .foot-u) a[data-canary][data-canary-state="stale"], :is(.foot, .foot-u) a[data-canary][data-canary-state="none"] { color: var(--pill-warning-ink); }

/* ---------- wayfinding (29 October 2026, docs/ux/chrome.md) ---------- */

/* The skip link: the first thing the keyboard reaches on every page, out of sight until then. */
.skip {
  position: absolute; z-index: 40; top: var(--s2); left: var(--s4); padding: var(--s2) var(--s3); border-radius: var(--round);
  background: var(--primary); color: var(--primary-ink); font: 500 var(--fs-body)/var(--lh-body) var(--font);
  transform: translateY(calc(-100% - var(--s4))); transition: transform var(--t-fast) var(--ease-out);
}
.skip:focus, .skip:focus-visible { transform: none; outline: 2px solid var(--text); outline-offset: 2px; }

/* "/" inside the bar's search field: the key that puts the cursor there. Gone while the field is in use. */
.search-key {
  position: absolute; top: 7px; right: 8px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  border: 1px solid var(--control); border-radius: var(--radius-small); color: var(--faint); font: 500 var(--fs-small)/1 var(--font); pointer-events: none;
}
.search:focus-within .search-key, .search:has(input:not(:placeholder-shown)) .search-key { display: none; }
.bar-right .search input { padding-right: 32px; }

/* the settings' button for a browser with no card: a 32px circle, as quiet as the bar's links */
.ses-pref {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; flex: none;
  background: transparent; color: var(--muted); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.ses-pref svg { width: 16px; height: 16px; }
.ses-pref:hover, .ses-pref[aria-expanded="true"] { background: var(--raised); color: var(--text); }
.ses-out .ses-menu { width: 272px; }

/* the settings in the menu: a label and its two choices on one line; the choice made in ink on the raised fill */
.ses-set { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 40px; padding: 0 var(--s1) 0 var(--s2); }
.ses-set-k { color: var(--muted); }
.ses-seg { display: inline-flex; flex: none; padding: 2px; border-radius: var(--round); background: var(--active); }
.ses-seg [role="menuitemradio"] {
  height: 28px; padding: 0 var(--s3); border: 0; border-radius: var(--round); background: transparent; color: var(--muted);
  font: 500 var(--fs-small)/var(--lh-small) var(--font); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.ses-seg [role="menuitemradio"]:hover { color: var(--text); }
.ses-seg [role="menuitemradio"][aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--control); } /* taste-skill-ignore: the chosen half of a segmented control */
.ses-seg [role="menuitemradio"]:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
/* the keys of the keyboard: three short rows, the key in a small outlined box */
.ses-keys { padding: var(--s2) var(--s2) var(--s1); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.ses-keys-h { margin-bottom: var(--s1); color: var(--text); font-weight: 600; }
.ses-keys p:not(.ses-keys-h) { display: flex; align-items: center; gap: var(--s2); padding: 2px 0; }
.ses-keys kbd { min-width: 44px; }
.ses-keys kbd, .ta-enter {
  display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 var(--s1); flex: none;
  border: 1px solid var(--control); border-radius: var(--radius-small); color: var(--text); font: 500 var(--fs-small)/1 var(--font);
}

/* ---------- the search as one types: the card under the field ---------- */
form.has-ta { position: relative; }
.ta {
  position: absolute; z-index: 25; top: calc(100% + var(--s2)); left: 0; right: 0; min-width: 300px; padding: var(--s2);
  border-radius: var(--radius-card, 14px); background: var(--surface); box-shadow: var(--shadow-float); /* taste-skill-ignore: the list floats over the page */
  text-align: left; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text);
}
.bar-right .ta { left: auto; width: 360px; }
.ta-list[hidden], .ta-note[hidden] { display: none; }
.ta-opt { display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: var(--s2); border-radius: var(--radius-small); color: var(--text); }
.ta-opt[aria-selected="true"], .ta-opt:hover { background: var(--active); }
.ta-av { display: grid; place-items: center; width: 28px; height: 28px; flex: none; overflow: hidden; border-radius: 50%; background: var(--person-bg); color: var(--person-ink); font-size: var(--fs-small); font-weight: 600; }
.ta-av.org { border-radius: var(--radius-small); background: var(--active); color: var(--text); }
.ta-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ta-av.org img { object-fit: contain; }
.ta-txt { display: grid; min-width: 0; flex: 1; }
.ta-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ta-addr { color: var(--muted); font-weight: 400; }
/* an alert in force on the account found (30 October 2026): the owner's words, in the warning ink, before opening the card */
.ta-alert { margin-top: 2px; color: var(--pill-warning-ink); font-size: var(--fs-small); line-height: var(--lh-small); white-space: normal; }
.ta-sub { display: flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.ta-links { display: inline-flex; gap: var(--s1); }
.ta-links svg { width: 14px; height: 14px; color: var(--muted); }
/* the field's own search icon is placed absolutely (app.css: .search svg); the list's icons sit in their line */
form .ta svg { position: static; top: auto; left: auto; }
.ta-enter { visibility: hidden; color: var(--muted); }
.ta-opt[aria-selected="true"] .ta-enter { visibility: visible; }
.ta-make { min-height: 36px; font-weight: 500; }
.ta-note { padding: var(--s2); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.ta[hidden] { display: none !important; }

/* ---------- "Back to the card": above the page's title on /account, /developers and the owner's /canary ---------- */
.crumb { margin-top: var(--s5); }
.crumb a { display: inline-flex; align-items: center; gap: var(--s1); color: var(--muted); font-weight: 500; transition: color var(--t-fast) var(--ease-out); }
.crumb a:hover { color: var(--text); }
.crumb svg { width: 12px; height: 12px; }
.crumb + .state, .crumb + noscript + .state { margin-top: var(--s4); }
.crumb[hidden] { display: none; }

/* ---------- nothing to show: the search and "Make yours" (a card nobody has, the error page) ---------- */
.lost { max-width: 752px; margin-top: var(--s6); }
.lost[hidden] { display: none; }
.lost-h { margin-bottom: var(--s3); font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; }
.lost .search { width: 100%; }
.lost .search input { height: 44px; padding-left: 40px; font-size: var(--fs-section); background: var(--field, var(--surface)); border: 1px solid var(--control); }
.lost .search > svg { top: 15px; left: 15px; }
.lost-make { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s4); color: var(--muted); }
.lost-make .btn { height: 32px; }
@media (max-width: 760px) { .lost .search input { font-size: 16px; } .ta { min-width: 0; } .bar-right .ta { width: auto; } }

/* a touch screen without a keyboard: no keys to learn */
@media (hover: none) and (pointer: coarse) { .ses-keys, .search-key, .ta-enter { display: none; } }

/* The theme lives in the settings of the top bar (29 October 2026): the footers' old button stays out of sight. */
.foot [data-theme-switch] { display: none; }

@media (prefers-reduced-motion: reduce) { .ses-btn, .ses-login, .ses-act, .ses-pref, .ses-seg [role="menuitemradio"], .crumb a, .skip { transition: none; } }

/* the error page (error.html): the stamp, the line that says what happened, the search inside the lead, then where to go */
.err-state { margin-top: var(--s6); }
.err-state .lost { margin-top: var(--s5); }
.err-state .lost .search input { background: var(--ground); }
.err-where { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); margin-top: var(--s5); color: var(--muted); }
.err-where a.inline { color: var(--text); }
body[data-page="error"] .foot { padding-bottom: var(--s6); }

/* ---------- motion and answers (30 October 2026, design/DESIGN.md "Movimento e risposte") ---------- */
/* The theme switch (theme.js) holds every transition for the frame in which the colours change: the page takes the new
   theme at once, and no button or rule fades from the old one on its own clock. */
html[data-theme-switching] *, html[data-theme-switching] *::before, html[data-theme-switching] *::after { transition: none !important; }
/* The phone's menu sheet floats over the page under the bar instead of pushing the page down (the page used to drop by the
   sheet's height and come back on closing). It is what floats, so it has the float's shadow, and it scrolls on a short
   screen. */
.topbar .menu-sheet.open {
  position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100svh - 56px); overflow-y: auto; overscroll-behavior: contain;
  box-shadow: var(--shadow-float); /* taste-skill-ignore: the sheet floats over the page */
}
/* What floats arrives: the session's menu, the settings, the search's list and the phone's sheet come in over --t-fast,
   4px down from their anchor and from transparent, and leave at once (Esc, a click outside, a choice). Never on reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .ses-menu, .ta, .topbar .menu-sheet { transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
  @starting-style {
    .ses-menu:not([hidden]), .ta:not([hidden]), .topbar .menu-sheet.open { opacity: 0; transform: translateY(-4px); }
  }
}
/* A relative time that ages while the page is open (VeilChrome.ago in session.js): tabular figures in a slot that only
   grows, so the words around it never move when "9 min ago" becomes "10 min ago". */
[data-ago-on] { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Stability (polish pass, 30 October 2026): nothing pushes the page around when it changes.
   The monospaced face's stand-ins while JetBrains Mono downloads: a system mono resized to its advance (0.6 em) and given
   its line metrics (ascent 1.02, descent 0.30, no gap), so a fingerprint, a key or a hash keeps its width and its line when
   the real face lands. Three families because the system monos come in three widths; a family whose local face is missing
   is skipped, and --mono (app.css, landing.css) lists them after JetBrains Mono. */
@font-face { font-family: "Veil Mono Fallback A"; src: local("Menlo Regular"), local("Menlo-Regular"), local("DejaVu Sans Mono"), local("DejaVuSansMono"); size-adjust: 99.66%; ascent-override: 102.35%; descent-override: 30.1%; line-gap-override: 0%; } /* taste-skill-ignore: metrics of the mono's fallback, no new face */
@font-face { font-family: "Veil Mono Fallback B"; src: local("Consolas"); size-adjust: 109.13%; ascent-override: 93.47%; descent-override: 27.49%; line-gap-override: 0%; } /* taste-skill-ignore: metrics of the mono's fallback, no new face */
@font-face { font-family: "Veil Mono Fallback C"; src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("LiberationMono"), local("Droid Sans Mono"), local("DroidSansMono"); size-adjust: 99.98%; ascent-override: 102.02%; descent-override: 30.01%; line-gap-override: 0%; } /* taste-skill-ignore: metrics of the mono's fallback, no new face */

/* What a copy says, over its control: "Copied" (or "Not copied") is drawn in the control's own box for a moment, its own
   words gone see-through underneath, so the control keeps its size and nothing beside it moves. The page's script sets
   data-said with the words in the page's language and takes it off again; the page's announcer says them aloud. */
[data-said] { position: relative; color: transparent !important; }
[data-said]::after { content: attr(data-said); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--positive); font-weight: 500; white-space: nowrap; pointer-events: none; }
.text-btn[data-said]::after { justify-content: flex-start; }
[data-said][data-said-bad]::after { color: var(--pill-negative-ink); }

/* ---------- the session's place in the bar, before the record is read (follow-ups of the stability pass, 30 October 2026) ----------
   session.js fills the slot once it has read this browser's record (IndexedDB, a few frames after the first paint): the
   slot used to be empty until then and its arrival pushed the switch and the search 164-179 px to the left. Now it has its
   width from the first frame. "Create" and "Log in" keep one width in both languages (the wider word's: "Create", "Accedi"),
   so the slot logged out is one size; logged in it is the button with the card's initials and, on a wide screen, the name,
   whose width theme.js gives as --ses-name from the hint session.js left last time (html[data-ses]). The hint is never a
   proof of anything: a wrong one costs one shift, as before. */
.session .ses-link { display: inline-flex; justify-content: flex-end; min-width: 44px; }
.ses-login { justify-content: center; min-width: 73px; }
.session:empty { display: flex; width: 173px; }
[data-session="compact"]:empty { width: 117px; }
html:is([data-ses="ok"], [data-ses="bad"]) .session:empty { width: calc(66px + var(--ses-name, 0px)); }
html:is([data-ses="ok"], [data-ses="bad"]) [data-session="compact"]:empty { width: 56px; }
@media (max-width: 1100px) { html:is([data-ses="ok"], [data-ses="bad"]) .session:empty { width: 56px; } }
@media (max-width: 900px) { .session:empty { width: 117px; } }

/* "Back to the card" on /account and /developers: the line is in the page from the start (backCard, hidden), and a browser
   that held a card last time keeps it, empty and unseen, until session.js writes it, so the title does not drop 29-45 px */
.crumb[data-reserve] { min-height: var(--lh-body); }
html[data-ses="ok"] .crumb[data-reserve][hidden] { display: block !important; visibility: hidden; }