/* ==========================================================================
   Ledger Consortium — Design System UI v3 (unico artefatto, 4 consumatori)
   Token fissati dal PIANO-RILAVORAZIONE-UI.md (12/10/2026).
   Regole: 1 primaria/schermata · colore SOLO nei badge di stato · hash mono
   mai a capo, sempre copiabili · nessun CSS colore/tipografia nelle superfici.
   ========================================================================== */

/* --- Font self-hosted (woff2, subset latin) ------------------------------ */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- Token --------------------------------------------------------------- */
:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --border: #e5e5e7;
  --border-strong: #d2d2d7;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #86868b;
  --ink: #1d1d1f;
  --ink-hover: #000000;
  --focus-ring: 0 0 0 3px rgba(0, 0, 0, .18);
  /* Badge di stato — UNICO punto di colore del sistema (variante A) */
  --ok-text: #1d7a3a;   --ok-bg: #e9f4ec;
  --wait-text: #8a5a00; --wait-bg: #fbf3e2;
  --err-text: #b3261e;  --err-bg: #fbebea;
  /* Tipografia */
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* Raggi: 8 / 12 / 18 / 999 */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-full: 999px;
  /* Spaziatura base 4 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  /* Layout */
  --content-w: 980px;
  --admin-w: 1200px;
  --navbar-h: 56px;
  /* Motion */
  --dur-1: 150ms; --dur-2: 250ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* --- Reset + base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--text); text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--text); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
::selection { background: var(--ink); color: #fff; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Scala tipografica 12–56 (gerarchia dal peso, non dal colore) -------- */
.display { font: 600 56px/1.05 var(--font-display); letter-spacing: -.02em; color: var(--text); }
.h1 { font: 600 40px/1.1 var(--font-display); letter-spacing: -.018em; }
.h2 { font: 600 28px/1.2 var(--font-display); letter-spacing: -.014em; }
.h3 { font: 600 20px/1.3 var(--font-display); letter-spacing: -.01em; }
.lead { font-size: 18px; line-height: 1.55; color: var(--text-2); }
.small { font-size: 14px; }
.micro { font-size: 12px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .92em; }
.text-2 { color: var(--text-2); }
.text-3 { color: var(--text-3); }
.eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-2);
}

/* --- Layout --------------------------------------------------------------- */
.container { max-width: var(--content-w); margin: 0 auto; padding: 0 var(--sp-5); }
.container-wide { max-width: var(--admin-w); margin: 0 auto; padding: 0 var(--sp-5); }
.page { padding: var(--sp-12) 0 var(--sp-16); }
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-8); }

/* --- 1 · Navbar 56px ------------------------------------------------------ */
.navbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--navbar-h);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.navbar-inner {
  height: var(--navbar-h);
  display: flex; align-items: center; gap: var(--sp-6);
  max-width: var(--content-w); margin: 0 auto; padding: 0 var(--sp-5);
}
.navbar-inner-wide { max-width: var(--admin-w); }
.navbar-brand { display: inline-flex; align-items: center; flex: none; }
.navbar-brand img { height: 26px; width: auto; display: block; }
.navbar-links { display: flex; gap: var(--sp-1); margin-left: auto; align-items: center; }
.navbar-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--sp-3); border-radius: var(--r-full);
  color: var(--text-2); text-decoration: none; font-size: 15px; font-weight: 500;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.navbar-links a:hover { color: var(--text); background: var(--bg); }
.navbar-links a[aria-current="page"] { color: var(--text); }
.lang-toggle {
  display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-full);
  overflow: hidden; flex: none;
}
.lang-toggle button {
  min-height: 44px; min-width: 44px; padding: 0 var(--sp-3);
  background: var(--surface); border: 0; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--text-2);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.lang-toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* --- 2 · Pulsanti (una sola primaria per schermata: nera) ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 10px 22px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  font-weight: 500; font-size: 15px; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:hover { border-color: var(--text); }
.btn:active { transform: scale(.98); }
.btn-primary {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.btn-primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: #fff; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--bg); border-color: transparent; }
.btn-sm { min-height: 44px; padding: 8px 16px; font-size: 14px; }
.btn-lg { min-height: 52px; padding: 14px 30px; font-size: 16px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.disabled { opacity: .38; pointer-events: none; }
.btn-loading { pointer-events: none; opacity: .75; }
.btn-loading::before {
  content: ""; width: 15px; height: 15px; flex: none;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- 3 · Input ------------------------------------------------------------ */
.field { display: block; }
.field-label { display: block; font-weight: 500; font-size: 14px; margin-bottom: var(--sp-2); }
.field-hint { display: block; font-size: 13px; color: var(--text-2); margin-top: var(--sp-2); }
.field-error {
  display: block; font-size: 13px; font-weight: 500; margin-top: var(--sp-2);
}
.field-error::before { content: "— "; }
.input, .textarea, .select {
  display: block; width: 100%; min-height: 44px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font-size: 16px; line-height: 1.4;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--text); box-shadow: var(--focus-ring); outline: none;
}
.textarea { min-height: 96px; resize: vertical; }
.select { appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.field-invalid .input, .field-invalid .textarea, .field-invalid .select {
  border: 2px solid var(--text);
}
.input-search { border-radius: var(--r-full); padding-left: 18px; padding-right: 18px; background: var(--surface-2); }
.input-search:focus { background: var(--surface); }
.form-row { display: grid; gap: var(--sp-4); }
@media (min-width: 700px) { .form-row-2 { grid-template-columns: 1fr 1fr; } }

/* --- 4 · Drop zone --------------------------------------------------------- */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); text-align: center;
  min-height: 168px; padding: var(--sp-8) var(--sp-5);
  background: var(--surface-2);
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.dropzone:hover { border-color: var(--text-2); }
.dropzone.is-dragover { border-color: var(--text); background: var(--surface); border-style: solid; }
.dropzone-title { font-weight: 500; font-size: 16px; }
.dropzone-sub { font-size: 14px; color: var(--text-2); }
.dropzone-file {
  display: none; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  font-size: 14px;
}
.dropzone-file.is-on { display: flex; }
.dropzone-file .file-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- 5 · Card (senza ombra) ----------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.card-flat { background: var(--surface-2); }
.card-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 700px) { .card-grid-3 { grid-template-columns: repeat(3, 1fr); } .card-grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* --- 6 · Section header ----------------------------------------------------- */
.section-header { margin-bottom: var(--sp-6); }
.section-header .eyebrow { display: block; margin-bottom: var(--sp-2); }
.section-header .lead { margin-top: var(--sp-2); max-width: 62ch; }

/* --- 7 · Status pill (UNICO punto di colore — variante A: tinte) ----------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 26px; padding: 3px 11px;
  border-radius: var(--r-full);
  font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pill-ok   { color: var(--ok-text);   background: var(--ok-bg); }
.pill-wait { color: var(--wait-text); background: var(--wait-bg); }
.pill-err  { color: var(--err-text);  background: var(--err-bg); }
/* Variante B: monocromo totale (forma + testo, nessun colore) */
.pill-mono { border: 1px solid var(--text); color: var(--text); background: var(--surface); }
.pill-mono.is-ok   { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill-mono.is-ok::before { background: #fff; }
.pill-mono.is-wait { border-style: dashed; }
.pill-mono.is-wait::before { background: transparent; border: 1.5px solid var(--text); width: 5px; height: 5px; }
.pill-mono.is-err  { border-width: 2px; }
.pill-mono.is-err::before { content: "×"; width: auto; height: auto; font-size: 14px; line-height: 1; background: none; border-radius: 0; }

/* --- 8 · Hash display (mono, MAI a capo, sempre copiabile) ------------------ */
.hash {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  max-width: 100%;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 13.5px; white-space: nowrap;
}
.hash-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hash-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -10px -8px -10px 0; flex: none;
  background: none; border: 0; border-radius: var(--r-full); cursor: pointer; color: var(--text-2);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.hash-copy:hover { color: var(--text); background: var(--bg); }
.hash-copy svg { width: 16px; height: 16px; }

/* --- 9 · Key–value ------------------------------------------------------------ */
.kv { display: grid; grid-template-columns: 180px 1fr; gap: var(--sp-2) var(--sp-6); margin: 0; }
.kv dt { color: var(--text-2); font-size: 14px; padding: 3px 0; }
.kv dd { margin: 0; font-size: 15px; padding: 3px 0; overflow-wrap: anywhere; }
.kv dd.no-wrap { overflow-wrap: normal; }
@media (max-width: 640px) { .kv { grid-template-columns: 1fr; gap: 0; } .kv dt { padding-bottom: 0; } .kv dd { padding-top: 0; margin-bottom: var(--sp-3); } }

/* --- 10 · Stepper (3 passi) ------------------------------------------------- */
.stepper {
  display: flex; gap: var(--sp-2); list-style: none; margin: 0 0 var(--sp-8); padding: 0;
  counter-reset: step;
}
.stepper li {
  flex: 1; display: flex; align-items: center; gap: var(--sp-3);
  padding-top: var(--sp-3); border-top: 2px solid var(--border);
  color: var(--text-3); font-size: 14px; font-weight: 500;
}
.stepper .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--border-strong); font-size: 13px; background: var(--surface);
}
.stepper li.is-current { border-top-color: var(--text); color: var(--text); }
.stepper li.is-current .step-num { background: var(--ink); border-color: var(--ink); color: #fff; }
.stepper li.is-done { border-top-color: var(--text); color: var(--text-2); }
.stepper li.is-done .step-num { border-color: var(--text); color: var(--text); }
.stepper li.is-done .step-num::after { content: "✓"; font-size: 13px; }
.stepper li.is-done .step-num span { display: none; }
@media (max-width: 640px) { .stepper li { font-size: 13px; } .stepper .step-label { display: none; } .stepper li.is-current .step-label { display: inline; } }

/* --- 11 · Verdict card (esito verifica: peso tipografico massimo) ----------- */
.verdict {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-8);
  text-align: left;
}
.verdict-head { display: flex; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
.verdict-title { font: 600 34px/1.15 var(--font-display); letter-spacing: -.016em; }
.verdict-sub { margin-top: var(--sp-2); font-size: 17px; color: var(--text-2); max-width: 58ch; }
.verdict .kv { margin-top: var(--sp-6); }

/* --- 12 · Timeline ------------------------------------------------------------ */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px;
  width: 1.5px; background: var(--border);
}
.timeline-item { position: relative; padding: 0 0 var(--sp-6) var(--sp-8); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: 0; top: 5px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--text-3);
}
.timeline-item.is-current .timeline-dot { background: var(--ink); border-color: var(--ink); }
.timeline-title { font-weight: 500; font-size: 15px; }
.timeline-meta { font-size: 13.5px; color: var(--text-2); margin-top: 2px; }

/* --- 13 · Tabella (solo admin) -------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th {
  text-align: left; font-size: 12px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-2);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--dur-1) var(--ease); }
.table tbody tr:hover { background: var(--surface-2); }

/* --- 14 · Disclosure «Dettagli tecnici» (chiusa di default) ---------------------- */
.disclosure { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.disclosure > summary {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: var(--sp-3) var(--sp-5);
  font-weight: 500; font-size: 14.5px; cursor: pointer; list-style: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 8px; height: 8px; border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2);
  transform: rotate(45deg); transition: transform var(--dur-1) var(--ease);
}
.disclosure[open ] > summary::after { transform: rotate(225deg); }
.disclosure-body { padding: 0 var(--sp-5) var(--sp-5); border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.disclosure-body .mono-block {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65;
  overflow-wrap: anywhere; white-space: pre-wrap;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-4); margin: 0;
}

/* --- 15 · Stato vuoto -------------------------------------------------------------- */
.empty {
  text-align: center; padding: var(--sp-12) var(--sp-6);
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
  background: var(--surface);
}
.empty-title { font: 600 20px/1.3 var(--font-display); }
.empty-text { color: var(--text-2); margin: var(--sp-2) auto var(--sp-5); max-width: 44ch; font-size: 15px; }

/* --- 16 · Skeleton ------------------------------------------------------------------- */
.skeleton { pointer-events: none; }
.sk {
  display: block; border-radius: var(--r-sm);
  background: linear-gradient(100deg, var(--border) 40%, var(--surface-2) 50%, var(--border) 60%);
  background-size: 200% 100%; animation: sk-wave 1.4s ease infinite;
}
.sk-line { height: 14px; margin-bottom: var(--sp-3); }
.sk-line-lg { height: 26px; }
.sk-block { height: 120px; border-radius: var(--r-lg); }
@keyframes sk-wave { to { background-position: -200% 0; } }

/* --- 17 · Toast ------------------------------------------------------------------------- */
.toast-region {
  position: fixed; bottom: var(--sp-5); left: 50%; transform: translateX(-50%);
  z-index: 100; display: flex; flex-direction: column; gap: var(--sp-2); align-items: center;
  width: max-content; max-width: calc(100vw - 32px);
}
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--ink); color: #fff;
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-full);
  font-size: 14.5px; font-weight: 500;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.toast.is-in { opacity: 1; transform: none; }

/* --- 18 · Modal ---------------------------------------------------------------------------- */
dialog.modal {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text);
  padding: 0; width: min(480px, calc(100vw - 32px));
}
dialog.modal::backdrop { background: rgba(29, 29, 31, .42); }
.modal-box { padding: var(--sp-6); }
.modal-actions { display: flex; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-6); flex-wrap: wrap; }

/* --- 19 · QR block ---------------------------------------------------------------------------- */
.qr { display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin: 0; }
.qr img, .qr .qr-img {
  width: 148px; height: 148px; display: block;
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px; background: #fff;
}
.qr figcaption { font-size: 12.5px; color: var(--text-2); text-align: center; max-width: 180px; }

/* --- 20 · Footer minimo -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border);
  margin-top: var(--sp-16); padding: var(--sp-8) 0 var(--sp-10);
  background: var(--surface);
}
.footer-inner {
  display: flex; gap: var(--sp-6); align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  max-width: var(--content-w); margin: 0 auto; padding: 0 var(--sp-5);
}
.footer img { height: 24px; width: auto; display: block; }
.footer nav { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.footer nav a { color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 500; }
.footer nav a:hover { color: var(--text); }
.footer-legal { font-size: 12.5px; color: var(--text-3); max-width: var(--content-w); margin: var(--sp-5) auto 0; padding: 0 var(--sp-5); }

/* --- Hero (ingresso «Registra e verifica») ---------------------------------------------------------- */
.hero { padding: var(--sp-16) 0 var(--sp-12); text-align: left; }
.hero .lead { margin-top: var(--sp-4); max-width: 56ch; }
.hero-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-8); flex-wrap: wrap; }

/* --- Tab (Verifica: 2 tab) ----------------------------------------------------------------------------- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-6); }
.tabs [role="tab"] {
  min-height: 44px; padding: 10px var(--sp-4);
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-weight: 500; font-size: 15px; color: var(--text-2); cursor: pointer;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.tabs [role="tab"]:hover { color: var(--text); }
.tabs [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }

/* --- Admin: sidebar + contenuto --------------------------------------------------------------------------- */
.admin-layout { display: grid; grid-template-columns: 232px 1fr; gap: var(--sp-8); align-items: start; }
.admin-layout > * { min-width: 0; }
.sidebar { position: sticky; top: calc(var(--navbar-h) + var(--sp-5)); display: flex; flex-direction: column; gap: 2px; }
.sidebar a {
  display: flex; align-items: center; min-height: 44px; padding: 8px var(--sp-3);
  border-radius: var(--r-md); color: var(--text-2); text-decoration: none; font-weight: 500; font-size: 14.5px;
}
.sidebar a:hover { background: var(--surface); color: var(--text); }
.sidebar a[aria-current="page"] { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
@media (max-width: 860px) {
  .admin-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* --- Responsive navbar ---------------------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .display { font-size: 40px; }
  .h1 { font-size: 32px; }
  .verdict { padding: var(--sp-6); }
  .verdict-title { font-size: 27px; }
  .navbar-links a { padding: 0 var(--sp-2); font-size: 14px; }
  .navbar-brand img { height: 22px; }
}

/* --- Motion: rispetto di prefers-reduced-motion ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms; animation-iteration-count: 1;
    transition-duration: .01ms; scroll-behavior: auto;
  }
}