/* ── 1. CUSTOM PROPERTIES — palette dark del prototipo v0 ── */
:root {
  /* Layout */
  --sidebar-w:      256px;
  --topbar-h:       52px;
  --editor-panel-w: 500px;
  --ctrl-h:         2rem;
  --sm-gap:         14px;
  --badge-size:     18px;
  --badge-radius:   9px;
  --fs-badge:       0.6rem;
  --fs-micro:       0.65rem;
  --fs-label:       0.72rem;
  --fs-sm:          0.85rem;
  --fs-md:          0.9rem;
  --fs-lg:          0.96rem;
  --fs-xl:          1rem;
  --fs-2xl:         1.2rem;

  /* ── Palette light ── */
  --background:             oklch(0.99 0.003 258);    /* bianco caldo */
  --foreground:             oklch(0.18 0.015 258);    /* testo scuro */
  --card:                   oklch(1 0 0);             /* bianco puro per card */
  --card-foreground:        oklch(0.18 0.015 258);
  --popover:                oklch(1 0 0);
  --popover-foreground:     oklch(0.18 0.015 258);
  --primary:                oklch(0.45 0.13 262);     /* indigo */
  --primary-foreground:     oklch(0.99 0.01 90);
  --secondary:              oklch(0.965 0.005 258);   /* grigio chiarissimo */
  --secondary-foreground:   oklch(0.22 0.015 258);
  --muted:                  oklch(0.965 0.005 258);
  --muted-foreground:       oklch(0.52 0.012 258);    /* grigio medio */

  --accent-foreground:      oklch(0.22 0.015 258);
  --destructive:            oklch(0.55 0.2 25);
  --destructive-foreground: oklch(0.99 0.01 90);
  --border:                 oklch(0.18 0.015 258 / 12%);  /* scuro semitrasparente */
  --input:                  oklch(0.18 0.015 258 / 8%);
  --ring:                   oklch(0.45 0.13 262);
  --radius:                 6px;

  /* ── Sidebar — grigio chiaro ── */
  --sb-bg:          oklch(0.97 0.006 262);
  --sb-logo-border: oklch(0 0 0 / 8%);
  --sb-text:        oklch(0.47 0.012 258);
  --sb-text-hover:  oklch(0.18 0.015 258);
  --sb-text-active: oklch(0.18 0.015 258);
  --sb-accent:      oklch(0.45 0.13 262);     /* indigo */
  --sb-accent-border: oklch(0.45 0.13 262 / 30%);
  --sb-hover:       oklch(0 0 0 / 5%);
  --sb-active-bg:   oklch(0.45 0.13 262 / 10%);
  --sb-border:      oklch(0 0 0 / 8%);

  /* ── Topbar — bianco con backdrop-blur ── */
  --topbar-bg:     oklch(0.99 0.003 258 / 0.92);
  --topbar-border: oklch(0 0 0 / 10%);

  /* Tipografia */
  --font-ui:    'GentiumW', 'Georgia', serif;
  --fw-body:    400;
  --fw-medium:  500;
  --fw-label:   600;
  --fw-heading: 700;
  --fw-display: 800;

  /* Ombre — sottili su chiaro */
  --shadow-card:   0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-raise:  0 4px 12px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-modal:  0 8px 32px rgba(0,0,0,0.18);
  --shadow-editor: -4px 0 24px rgba(0,0,0,0.10);
  --shadow-menu:   0 8px 24px rgba(0,0,0,0.12);

  /* Teal — accento secondario per stati interattivi/dati */
  --teal:      oklch(0.42 0.08 195);
  --teal-soft: oklch(0.93 0.04 195);

  /* Badge status — versione light */
  --status-active-bg:    oklch(0.92 0.10 155);
  --status-active-text:  oklch(0.20 0.12 155);
  --status-partial-bg:   oklch(0.93 0.08 75);
  --status-partial-text: oklch(0.40 0.14 75);
  --warn-bg:             oklch(0.97 0.04 85);
  --warn-border:         oklch(0.65 0.12 72);
  --warn-border-strong:  oklch(0.55 0.14 68);
  --warn-text:           oklch(0.32 0.08 68);
  --backdrop:            rgba(0,0,0,0.45);
  --placeholder-muted:   oklch(0.72 0.008 258);

  /* ── Alias di compatibilità ── */
  --bg:              var(--background);
  --surface:         var(--card);
  --bg-warm:         oklch(0.975 0.004 258); /* bianco neutro per intestazioni tabelle */
  --text:            var(--foreground);
  --text-muted:      var(--muted-foreground);
  --border-light:    var(--border);
  --accent:          oklch(0.45 0.13 262);   /* indigo */
  --accent-dark:     oklch(0.38 0.14 262);
  --accent-mid:      oklch(0.45 0.13 262);
  --accent-light:    oklch(0.93 0.04 262);   /* indigo tenue */
  --accent-xlight:   oklch(0.97 0.03 262);   /* indigo leggerissimo */
  --danger:          var(--destructive);
  --danger-light:    color-mix(in oklch, var(--destructive) 20%, transparent);
  --success:         oklch(0.42 0.18 145);   /* verde più scuro su chiaro */
  --map-matched:     var(--destructive);
  --map-unmatched:   var(--muted-foreground);
  --map-bg:          #eeece6;   /* sfondo SVG mappa isoglosse */
  --map-land:        #e8e4da;   /* riempimento terre */
  --map-border:      #aaa;      /* bordi paese */
  --map-hull:        var(--map-matched); /* contorno area isoglossa */

  --vec-line:        #888;   /* linea relazione, niente pinning, senza contesto */
  --vec-line-ctx:    #bbb;   /* linea con contesto / linea dimmed senza contesto */
  --vec-line-hi:     #444;   /* linea evidenziata, senza contesto */
  --vec-line-hi-ctx: #999;   /* linea evidenziata, con contesto */
  --vec-line-dim-ctx:#ccc;   /* linea dimmed con contesto */
  --vec-zero-stroke: #e8a0a0; /* bordo nodo zero */
  --vec-zero-fill:   #fde8e8; /* sfondo nodo zero */
  --vec-zero-text:   #c05050; /* testo nodo zero */
  --vec-node-sel:    #dde5f4; /* sfondo nodo outcome selezionato */
  --vec-att-default: #aaa;    /* nodo att di default */

  --on-accent:    oklch(1 0 0);             /* testo bianco su sfondo accent */
  --fs-logo:      1.3rem;                   /* icona logo sidebar */
  --sb-btn-glass: oklch(1 0 0 / 6%);       /* hover glass su btn logged-in */
  --backdrop-nav: rgba(15, 23, 42, 0.50);  /* overlay mobile nav */

  --radius-sm:       4px;
  --radius-chip:     4px;
}

/* ── 2. ACCESSIBILITY UTILITIES ──────────────── */

/* Visually hidden but accessible to screen readers */
.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;
}

/* Skip link — visible only on keyboard focus */
.skip-link {
  position:        absolute;
  top:             -100%;
  left:            0.5rem;
  z-index:         10000;
  padding:         0.5rem 1rem;
  background:      var(--primary);
  color:           var(--primary-foreground);
  font-family:     var(--font-ui);
  font-size:       var(--fs-md);
  font-weight:     var(--fw-medium);
  border-radius:   var(--radius);
  text-decoration: none;
  transition:      top 0.1s;
}
.skip-link:focus {
  top: 0.5rem;
}

/* ── 3. RESET & BASE ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea, fieldset, legend { font-family: inherit; }
html {
  font-size: 120%;
}
html, body {
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  font-family: var(--font-ui);
  background:  var(--bg);
  color:       var(--text);
  font-size:   18px;
  line-height: 1.6;
}

/* ── 3. UTILITY ──────────────────────────────── */
.hidden-init { display: none !important; }
.hidden      { display: none !important; }
.meta-label {
  font-size:      var(--fs-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--text-muted);
}
.detail-placeholder,
.ep-empty,
.vector-hint,
.table-empty,
.modal-hint,
.map-hint,
.settings-note {
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
  line-height: 1.8;
  font-style:  italic;
}
.detail-placeholder,
.ep-empty    { margin-top: 2rem; text-align: center; }
.modal-hint,
.map-hint    { font-size: var(--fs-label); margin-bottom: 0.6rem; }
.map-hint    { margin-top: 0.2rem; margin-bottom: 0; }
.vector-hint { margin-bottom: 0.6rem; min-height: 1.4em; }
.settings-note { font-size: var(--fs-label); }

.save-status     { font-size: var(--fs-micro); font-style: italic; color: var(--text-muted); align-self: center; }
.save-status.ok  { color: var(--success); }
.save-status.err { color: var(--danger); }

/* ── 4. APP SHELL & SIDEBAR ───────────────────── */
.app-shell {
  display:               grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows:    100vh;
  height:                100vh;
  overflow:              hidden;
}
.sidebar {
  background:     var(--sb-bg);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  min-height:     0;
  z-index:        100;
}
.sb-logo {
  padding:       1.4rem 1.25rem 1.1rem;
  border-bottom: 1px solid var(--sb-logo-border);
  flex-shrink:   0;
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
}
/* Badge quadrato con monogramma IEI — su sidebar scura */
.sb-logo::before {
  content: 'IEI';
  display:         grid;           /* grid invece di flex per centratura più precisa */
  place-items:     center;         /* shorthand per align-items + justify-items */
  width:           2.4rem;
  height:          2.4rem;
  background:      var(--sb-accent);
  color:           oklch(0.99 0.01 90);
  font-size:       var(--fs-logo);
  font-weight:     var(--fw-display);
  letter-spacing:  0.02em;         /* minimo */
  border-radius:   0.6rem;
  flex-shrink:     0;
  text-align:      center;
  line-height:     1;
  padding:         0;              /* assicura nessun padding interno */
}.sb-logo-abbr {
  display:        none;    /* nascosto: ora è nel ::before */
}
.sb-logo-full {
  display:      block;
  font-size:    var(--fs-sm);
  color:        var(--sb-text);
  line-height:  1.3;
  font-style:   italic;
  white-space:  normal;
  font-weight:  var(--fw-display);
}
.sb-footer {
  border-top:     1px solid var(--sb-logo-border);
  padding:        0.85rem 0.75rem;
  flex-shrink:    0;
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}
.sb-footer-notice {
  font-size:     var(--fs-micro);
  line-height:   1.5;
  color:         var(--sb-text);
  opacity:       0.7;
  background:    oklch(0.93 0.005 258 / 5%);
  border-radius: 0.5rem;
  padding:       0.55rem 0.65rem;
  margin-bottom: 0.15rem;
}
.sb-btn {
  font-family:    var(--font-ui);
  font-size:      var(--fs-micro);
  font-weight:    var(--fw-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:        0.28rem 0.7rem;
  border:         1px solid var(--sb-border);
  background:     transparent;
  color:          var(--sb-text);
  cursor:         pointer;
  border-radius:  var(--radius-sm);
  transition:     all 0.15s;
  text-align:     center;
}
.sb-btn:hover { background: var(--sb-hover); color: var(--sb-text-hover); }
.sb-btn.active { background: var(--accent-mid); color: var(--on-accent); border-color: var(--accent-mid); }
.sb-btn.logged-in { color: var(--sb-accent); border-color: var(--sb-accent-border); }
.sb-btn.logged-in:hover { background: var(--sb-btn-glass); }

/* ── 5. NAV (sidebar) ────────────────────────── */
nav {
  flex:        1;
  overflow-y:  auto;
  padding:     0.5rem 0.6rem;
  background:  transparent;
  border:      none;
  display:     flex;
  flex-direction: column;
  gap:         2px;
  position:    relative;
}
#navInkBar { display: none; }
nav button {
  display:       flex;
  align-items:   center;
  gap:           0.65rem;
  width:         100%;
  padding:       0.55rem 0.75rem;
  background:    none;
  border:        none;
  border-left:   none;     /* rimosso border-left, usiamo bg arrotondato come prototipo */
  color:         var(--sb-text);
  font-family:   var(--font-ui);
  font-size:     var(--fs-sm);
  font-weight:   var(--fw-body);
  cursor:        pointer;
  text-align:    left;
  transition:    background 0.15s, color 0.15s;
  white-space:   normal;
  line-height:   1.35;
  border-radius: 0.5rem;   /* nav item arrotondato come prototipo */
}
nav button:hover {
  background: var(--sb-hover);
  color:      var(--sb-text-hover);
}
nav button.active {
  background: var(--sb-active-bg);
  color:      var(--sb-text-active);
  font-weight: var(--fw-medium);
}
.nav-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           2rem;
  height:          2rem;
  border-radius:   0.4rem;
  flex-shrink:     0;
  background:      transparent;
  transition:      background 0.15s, color 0.15s;
  color:           var(--sb-text);
  opacity:         0.65;
}
nav button:hover .nav-icon { opacity: 1; }
nav button.active .nav-icon {
  background: var(--accent-light);
  color:      var(--sb-accent);
  opacity:    1;
}
.nav-icon svg {
  display: block;
  width:   1rem;
  height:  1rem;
  fill:    none;
  stroke:  currentColor;
  stroke-width: 2px;
}
/* Label a due righe — come prototipo: titolo + blurb */
.nav-label {
  flex:          1;
  display:       flex;
  flex-direction: column;
  gap:           0.05rem;
  min-width:     0;
}
/* Il testo del nav label (riga 1) è lo span che contiene il titolo.
   Il data-blurb è iniettato via CSS content dal data-attribute. */
[data-section] .nav-label-title {
  font-size:   var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color:       inherit;
}
[data-section] .nav-label-blurb {
  font-size:   var(--fs-micro);
  line-height: 1.2;
  color:       var(--sb-text);
  opacity:     0.6;
  font-style:  italic;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
nav button.active [data-section] .nav-label-blurb,
nav button.active .nav-label-blurb { opacity: 0.75; }

[data-section="pie"] .nav-icon svg .rb-ring {
  fill: none; stroke: currentColor; stroke-width: 1.2px;
}
[data-section="pie"] .nav-icon svg .rb-dot  { fill: currentColor; stroke: none; }
[data-section="pie"] .nav-icon svg .rb-line {
  fill: none; stroke: currentColor; stroke-width: 1px;
}
[data-section="credits"] .nav-icon svg circle { stroke-width: 1.5px; }
[data-section="credits"] .nav-icon svg path   { stroke-width: 2px; }

/* ── 6. TOPBAR ───────────────────────────────── */
.topbar {
  height:          var(--topbar-h);
  flex-shrink:     0;
  background:      var(--topbar-bg);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom:   1px solid var(--topbar-border);
  display:         flex;
  align-items:     center;
  padding:         0 1.5rem;
  gap:             1rem;
  overflow:        hidden;
  transition:      max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.topbar-title {
  font-size:      var(--fs-lg);
  font-weight:    var(--fw-heading);
  letter-spacing: 0.06em;
  text-transform: none;    /* rimosso uppercase: come prototipo usa titolo normale */
  color:          var(--foreground);
  font-style:     normal;
}
body.editor-open .topbar {
  max-width:  calc(100vw - var(--sidebar-w) - var(--editor-panel-w));
  box-sizing: border-box;
}
/* Hamburger button — visible only on mobile */
.mobile-menu-btn {
  display: none;
}
/* Mobile nav backdrop — overlay behind the drawer */
.mobile-nav-backdrop {
  display:    none;
  position:   fixed;
  inset:      0;
  background: var(--backdrop-nav);
  z-index:    1000;
  cursor:     pointer;
}

/* ================================================================
   ── 7. CONTROLS BAR  ──
   ================================================================ */
.controls {
  padding:       0.5rem 1.5rem;
  background:    var(--card);
  border-bottom: 1px solid var(--border);
  display:       flex;
  flex-wrap:     wrap;
  gap:           1rem;
  align-items:   center;
  overflow:      hidden;
  max-height:    200px;
  transition:    max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}
.controls.hidden {
  display:             flex !important;
  max-height:          0;
  opacity:             0;
  padding:             0 1.5rem;
  border-bottom-width: 0;
}
.control-group {
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
  overflow:       hidden;
  max-width:      400px;
  opacity:        1;
  transition:     max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                  opacity   0.22s ease,
                  padding   0.28s cubic-bezier(0.4, 0, 0.2, 1),
                  margin    0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
/* I control-group nascosti collassano orizzontalmente invece di display:none */
.control-group.hidden-init,
.control-group.hidden {
  display:    flex !important;   /* override della regola globale .hidden-init/.hidden */
  max-width:  0 !important;
  opacity:    0 !important;
  padding:    0 !important;
  margin:     0 !important;
}
/* I figli con min-width esplicita devono cedere alla compressione */
.control-group > * {
  min-width: 0;
}
.control-group > label:first-child {
  display:        block;
  font-size:      var(--fs-micro);
  font-weight:    var(--fw-heading);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  0;
  white-space:    nowrap;
}
/* Allineamento verticale per gruppi senza label sopra */
.controls .radio-group,
.controls .checkbox-group {
  align-items: center;
}
body.editor-open .controls {
  max-width:  calc(100vw - var(--sidebar-w) - var(--editor-panel-w));
  box-sizing: border-box;
}

/* ── 8. PAGE LAYOUT ───────────────────────────── */
.main-area {
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  min-width:      0;
  min-height:     0;
}
.page-body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  overflow:       hidden;
  min-height:     0;
}
main {
  flex:       1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding:    0;
}
.main-scroll {
  padding:    2rem 2.5rem;
  overflow-x: auto;
  overflow-y: visible;
  width:      100%;
  transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.editor-open .main-scroll {
  max-width: calc(100vw - var(--sidebar-w) - var(--editor-panel-w));
}
body.editor-resizing,
body.editor-resizing * { user-select: none !important; }
body.editor-resizing .main-scroll,
body.editor-resizing .controls,
body.editor-resizing .topbar { transition: none !important; }
.section        { display: none; }
.section.active { display: block; }
h2 {
  font-size:      var(--fs-label);
  font-weight:    var(--fw-heading);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--accent);
  border-bottom:  1px solid var(--border-light);
  padding-bottom: 0.3rem;
  margin-bottom:  0.65rem;
  margin-top:     1.1rem;
}
h2:first-child { margin-top: 0; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; }
.phonology-layout { grid-template-columns: max-content 1fr; }

/* ── 9. BUTTONS ───────────────────────────────── */
.btn {
  font-family:    var(--font-ui);
  font-size:      var(--fs-label);
  font-weight:    var(--fw-label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding:        0.3rem 0.8rem;
  border:         1px solid var(--border);
  background:     var(--surface);
  color:          var(--text);
  cursor:         pointer;
  transition:     background 0.1s;
  white-space:    nowrap;
  border-radius:  var(--radius-sm);
}
.btn:hover    { background: var(--bg-warm); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.active   { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.primary  { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-dark); }
.btn.danger   { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-light); }
.btn.small    { padding: 0.18rem 0.5rem; font-size: var(--fs-micro); }
.ep-close, .modal-close {
  background: none; border: none; font-size: var(--fs-2xl); cursor: pointer;
  color: var(--text-muted); line-height: 1;
}
.ep-close:hover, .modal-close:hover { color: var(--text); }

/* ── 10. FORM ELEMENTS — stile prototipo v0 ──── */

/* ── Select ── */
select,
.qb-preset-select {
  font-family:        var(--font-ui);
  font-size:          var(--fs-sm);
  font-weight:        var(--fw-body);
  line-height:        1;
  border:             1px solid var(--border);
  background:         var(--secondary);
  padding:            0 2rem 0 0.7rem;
  height:             2rem;
  color:              var(--text);
  min-width:          150px;
  box-sizing:         border-box;
  border-radius:      var(--radius-sm);
  transition:         border-color 0.15s, background 0.15s;
  cursor:             pointer;
  -webkit-appearance: none;
  appearance:         none;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888888'/%3E%3C/svg%3E");
  background-repeat:  no-repeat;
  background-position: right 0.6rem center;
  background-size:    10px 6px;
}
select:hover, .qb-preset-select:hover {
  border-color: var(--accent);
  background-color: var(--muted);
}
select:focus, .qb-preset-select:focus {
  border-color:     var(--accent);
  background-color: var(--muted);
  outline:          none;
}

/* ── Input text / number / date / email / password ── */
input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="password"],
.qb-save-name {
  font-family:   var(--font-ui);
  font-size:     var(--fs-sm);
  font-weight:   var(--fw-body);
  line-height:   1;
  border:        1px solid var(--border);
  background:    var(--secondary);
  padding:       0 0.7rem;
  height:        2rem;
  color:         var(--text);
  min-width:     150px;
  box-sizing:    border-box;
  border-radius: var(--radius-sm);
  transition:    border-color 0.15s, background 0.15s;
}
input[type="text"]:hover,
input[type="date"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
.qb-save-name:hover {
  border-color: oklch(0 0 0 / 20%);
}
input[type="text"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
.qb-save-name:focus {
  border-color:     var(--accent);
  background-color: var(--muted);
  outline:          none;
}

textarea {
  font-family:   var(--font-ui);
  font-size:     var(--fs-sm);
  border:        1px solid var(--border);
  background:    var(--secondary);
  padding:       0.4rem 0.7rem;
  color:         var(--text);
  border-radius: var(--radius-sm);
  transition:    border-color 0.15s;
  resize:        vertical;
}
textarea:focus { border-color: var(--accent); outline: none; }

/* ── Radio button → pill segmentate (stile Segmented del prototipo) ──
   Struttura HTML: <label><input type="radio"> Testo</label>
   L'input nativo è nascosto; le <label> diventano pill cliccabili.    */
.radio-group {
  display:       inline-flex;
  gap:           0;
  border:        1px solid var(--border);
  border-radius: 6px;
  background:    var(--secondary);
  padding:       3px;
  flex-wrap:     nowrap;
  align-items:   center;
  height:        var(--ctrl-h);
  box-sizing:    border-box;
}
.radio-group label {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0 0.75rem;
  align-self:      stretch;
  font-size:       var(--fs-sm);
  font-weight:     var(--fw-medium);
  color:           var(--muted-foreground);
  cursor:          pointer;
  border-radius:   3px;
  transition:      background 0.15s, color 0.15s;
  white-space:     nowrap;
  text-transform:  none;
  letter-spacing:  0;
  line-height:     1;
  user-select:     none;
}
.radio-group label:hover { color: var(--text); }
/* Input radio nativo nascosto — visivamente rimosso ma accessibile */
.radio-group input[type="radio"] {
  position:       absolute;
  opacity:        0;
  width:          0;
  height:         0;
  pointer-events: none;
}
/* Pill attiva — :has() copre input dentro la label */
.radio-group label:has(input[type="radio"]:checked) {
  background:  var(--accent);
  color:       oklch(0.99 0.01 90);
  font-weight: var(--fw-label);
}

/* ── Checkbox → toggle switch pill ── */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance:         none;
  width:              2.4rem;
  height:             1.3rem;
  border-radius:      9999px;
  background:         var(--muted);
  border:             1.5px solid var(--border);
  cursor:             pointer;
  flex-shrink:        0;
  position:           relative;
  vertical-align:     middle;
  transition:         background 0.2s, border-color 0.2s;
}
input[type="checkbox"]::before {
  content:       '';
  position:      absolute;
  top:           50%;
  left:          0.18rem;
  transform:     translateY(-50%);
  width:         0.85rem;
  height:        0.85rem;
  border-radius: 50%;
  background:    var(--muted-foreground);
  transition:    left 0.2s, background 0.2s;
}
input[type="checkbox"]:checked {
  background:   var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::before {
  left:       calc(100% - 1.03rem);
  background: white;
}
input[type="checkbox"]:hover   { border-color: var(--accent); }
input[type="checkbox"]:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
}
/* Nel form editor (field-row) il toggle rimane ma più compatto */
.field-row input[type="checkbox"] {
  width:      2.2rem;
  height:     1.2rem;
  margin-top: 0.3rem;
  min-width:  0;
}

.checkbox-group {
  display:     flex;
  gap:         0.65rem;
  flex-wrap:   wrap;
  align-items: center;
  height:      var(--ctrl-h);
}
.checkbox-group label {
  display:        flex;
  align-items:    center;
  gap:            0.45rem;
  font-size:      var(--fs-sm);
  font-weight:    var(--fw-body);
  color:          var(--foreground);
  cursor:         pointer;
  text-transform: none;
  letter-spacing: 0;
  line-height:    1.5;
  user-select:    none;
}

/* ── Range slider — track visibile, thumb gold ── */
input[type="range"] {
  -webkit-appearance: none;
  appearance:         none;
  height:             var(--ctrl-h);
  padding:            0;
  background:         transparent;
  cursor:             pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height:        5px;
  border-radius: 9999px;
  background:    oklch(0 0 0 / 15%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width:         16px;
  height:        16px;
  border-radius: 50%;
  background:    var(--accent);
  border:        2.5px solid white;
  box-shadow:    0 0 0 1.5px var(--accent), 0 1px 3px rgba(0,0,0,0.15);
  margin-top:    -5.5px;
  transition:    box-shadow 0.15s, transform 0.1s;
}
input[type="range"]:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px oklch(0.45 0.13 262 / 20%), 0 1px 3px rgba(0,0,0,0.15);
  transform:  scale(1.08);
}
input[type="range"]::-moz-range-track {
  height:        5px;
  border-radius: 9999px;
  background:    oklch(0 0 0 / 15%);
}
input[type="range"]::-moz-range-thumb {
  width:         16px;
  height:        16px;
  border-radius: 50%;
  background:    var(--accent);
  border:        2.5px solid white;
  box-shadow:    0 0 0 1.5px var(--accent), 0 1px 3px rgba(0,0,0,0.15);
}

/* ── Focus globale ── */
:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }
select:focus-visible,
input:focus-visible,
.qb-save-name:focus-visible,
.qb-preset-select:focus-visible {
  outline:      none;
  border-color: var(--accent);
  box-shadow:   0 0 0 3px color-mix(in oklch, var(--accent) 55%, transparent);
}
#epResizeHandle:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 0;
}

/* ── 11. MODALS ───────────────────────────────── */
.modal-backdrop {
  display: none; position: fixed; inset: 0; background: var(--backdrop);
  z-index: 300; align-items: center; justify-content: center;
}
.modal-backdrop.modal-open { display: flex; }
.modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  width: 480px; max-width: 95vw; max-height: 80vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-modal);
}
.modal-header {
  padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-sm); font-weight: var(--fw-heading); color: var(--accent);
  background: var(--bg-warm); border-radius: 4px 4px 0 0;
  flex-shrink: 0;
}
.modal-body { padding: 1.1rem; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 0.75rem 1.1rem; border-top: 1px solid var(--border); background: var(--bg);
  display: flex; gap: 0.5rem; justify-content: flex-end; flex-shrink: 0;
  border-radius: 0 0 4px 4px;
}
.outcome-current {
  display: flex; gap: 4px; align-items: center; min-height: 30px;
  padding: 0.35rem 0.55rem; border: 1px solid var(--border); background: var(--bg-warm);
  margin-bottom: 0.65rem; flex-wrap: wrap; border-radius: var(--radius-sm);
}
.outcome-token {
  display: inline-flex; align-items: center; gap: 3px; background: var(--accent-light);
  color: var(--accent-dark); padding: 1px 6px; font-size: var(--fs-sm); cursor: pointer;
  border-radius: var(--radius-chip);
}
.outcome-token:hover { background: var(--border); color: var(--text); }
.outcome-zero { font-style: italic; cursor: default; }
.outcome-zero:hover { background: var(--accent-light); color: var(--accent-dark); }
.outcome-empty { color: var(--placeholder-muted); font-size: var(--fs-sm); }
.outcome-aid   { opacity: 0.6; }
.modal-phoneme-grid { display: flex; flex-wrap: wrap; gap: 5px; }

/* Login modal */
.login-modal { max-width: 400px; width: 92vw; }
.login-error { color: var(--danger); font-size: var(--fs-sm); font-style: italic; margin-top: 0.6rem; min-height: 1.2em; }
.login-role {
  font-size: var(--fs-micro); font-weight: var(--fw-label); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-light);
  background: var(--accent-xlight); padding: 1px 6px; vertical-align: middle;
  border-radius: var(--radius-chip);
}
.profile-header {
  display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem;
}
.profile-avatar {
  width: 2.4rem; height: 2.4rem; background: var(--accent-light); color: var(--accent-dark);
  font-size: var(--fs-xl); font-weight: var(--fw-heading); display: flex; align-items: center;
  justify-content: center; border-radius: 50%;
}
.profile-headline { display: flex; flex-direction: column; gap: 0.2rem; }
.profile-headline strong { font-size: var(--fs-xl); font-weight: var(--fw-label); }
.profile-section-title {
  font-size: var(--fs-micro); font-weight: var(--fw-heading); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin: 0.9rem 0 0.5rem;
  border-bottom: 1px solid var(--border-light); padding-bottom: 0.3rem;
}
.profile-pwd-details { margin-top: 0.5rem; }
.profile-pwd-details summary { cursor: pointer; list-style: none; margin: 0; }
.profile-pwd-details summary::-webkit-details-marker { display: none; }
.profile-section-toggle::after { content: ' ▸'; font-size: var(--fs-micro); color: var(--text-muted); }
.profile-pwd-details[open] .profile-section-toggle::after { content: ' ▾'; }
.profile-pwd-fields { margin-top: 0.5rem; }
.profile-success { color: var(--success); font-size: var(--fs-sm); font-style: italic; margin-top: 0.6rem; min-height: 1.2em; }

/* ── 12. EDITOR PANEL ─────────────────────────── */
#editorPanel {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--editor-panel-w);
  background: var(--bg); border-left: 1px solid var(--border); display: flex;
  flex-direction: column; z-index: 200; transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden;
}
#editorPanel.open { transform: translateX(0); box-shadow: var(--shadow-editor); }
#editorPanel.resizing, #editorPanel.resizing * { user-select: none; cursor: ew-resize !important; }
body.editor-resizing #editorPanel { transition: none !important; }
.ep-resize-handle {
  position: absolute; top: 0; bottom: 0; left: 0; width: 6px; cursor: ew-resize;
  background: transparent; z-index: 10; transition: background 0.15s; pointer-events: none;
}
#editorPanel.open .ep-resize-handle { pointer-events: auto; }
.ep-resize-handle:hover, #editorPanel.resizing .ep-resize-handle {
  background: var(--accent); opacity: 0.35;
}
.ep-header { padding: 0; border-bottom: 1px solid var(--border); background: var(--bg-warm); flex-shrink: 0; }
.ep-close { float: right; padding: 0.55rem 0.75rem 0 0.5rem; }
.ep-tabs { display: flex; padding: 0 0.25rem; }
.ep-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 0.55rem 0.9rem; font-size: var(--fs-label); font-weight: var(--fw-label);
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted);
  cursor: pointer; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s;
}
.ep-tab:hover { color: var(--text); }
.ep-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: var(--fw-heading); }
.ep-body { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; }

/* ── 13. EDITOR FORMS ─────────────────────────── */
.form-rid { font-size: var(--fs-micro); font-style: italic; color: var(--text-muted); word-break: break-all; margin-bottom: 0.7rem; }
.form-section { margin-bottom: 1rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--border-light); }
.form-section:last-child { border-bottom: none; }
.section-label {
  font-size: var(--fs-micro); font-weight: var(--fw-heading); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem;
}
.field-row {
  display: flex; align-items: flex-start; gap: 0.45rem; margin-bottom: 0.38rem;
}
.field-row label {
  width: 90px; flex-shrink: 0; font-size: var(--fs-micro); font-weight: var(--fw-heading);
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted);
  padding-top: 0.32rem;
}
.field-row input, .field-row select, .field-row textarea {
  flex: 1; font-size: var(--fs-sm); padding: 0.22rem 0.45rem; min-width: 0;
}
.field-row textarea { resize: vertical; }
.field-row input[type="checkbox"] { margin-top: 0.35rem; width: auto; min-width: 0; }
.checkbox-label { font-size: var(--fs-sm); color: var(--text); padding-top: 0.2rem; }
.field-value { flex: 1; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); padding-top: 0.2rem; }
.ctx-aids { flex: 1; display: flex; flex-wrap: wrap; gap: 3px; min-height: 22px; }
.ctx-special-row { display: flex; gap: 5px; width: 100%; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.ctx-class-btn { font-weight: var(--fw-heading); min-width: 32px; }
.ctx-tag-ep { background: var(--accent-light); color: var(--accent-dark); padding: 1px 6px; font-size: var(--fs-label); border-radius: var(--radius-chip); }
.item-row, .item-header {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 20px; gap: 3px;
  margin-bottom: 4px; align-items: center;
}
.item-row input { font-size: var(--fs-label); padding: 2px 4px; }
.item-header span {
  font-size: var(--fs-micro); font-weight: var(--fw-heading); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
}
.tag-list { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tag {
  display: inline-flex; align-items: center; gap: 3px; background: var(--accent-xlight);
  border: 1px solid var(--accent-light); color: var(--accent-dark); padding: 1px 6px;
  font-size: var(--fs-label); border-radius: var(--radius-chip);
}
.tag button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: var(--fs-sm); line-height: 1; padding: 0; }
.tag button:hover { color: var(--danger); }
.form-actions { display: flex; gap: 0.5rem; padding-top: 0.4rem; flex-wrap: wrap; }
.form-actions .btn { flex: 1 1 auto; }

/* ── 14. PHONEME TABLES ───────────────────────── */
.phoneme-table-wrapper { overflow-x: auto; margin-bottom: 0.7rem; }
table.phoneme-grid {
  border-collapse: collapse; font-size: var(--fs-xl); min-width: 260px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 3px;
}
table.phoneme-grid th, table.phoneme-grid td {
  border: 1px solid var(--border); padding: 0.15rem 0.4rem; height: 28px;
  line-height: 1; overflow: hidden;
}
table.phoneme-grid th {
  background: var(--bg-warm); color: var(--accent); font-weight: var(--fw-heading);
  font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase;
  text-align: center; white-space: nowrap;
}
table.phoneme-grid td {
  padding: 0.15rem 0.35rem; vertical-align: middle; text-align: center; min-width: 44px;
}
table.phoneme-grid td.row-header {
  text-align: left; font-weight: var(--fw-heading); font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.06em; background: var(--bg-warm);
  color: var(--accent); white-space: nowrap; padding-left: 0.65rem;
}
table.phoneme-grid td.row-subheader {
  text-align: left; font-weight: var(--fw-heading); font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: 0; background: var(--bg-warm);
  color: var(--accent); white-space: nowrap; padding: 0.25rem 0.5rem;
  min-width: 0; border-left: none;
}
table.phoneme-grid th.col-subheader {
  font-size: var(--fs-micro); font-weight: var(--fw-heading); text-transform: uppercase;
  letter-spacing: 0; color: var(--accent); padding: 0.2rem 0.4rem; height: auto;
}
table.phoneme-grid th.col-corner { background: var(--surface); }
.cell-tokens {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 20px;
}
.phoneme-token {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 4px; cursor: pointer; transition: background 0.1s; font-size: var(--fs-xl);
  font-weight: var(--fw-body); min-width: 24px; min-height: 22px; border-radius: var(--radius-chip);
}
.phoneme-token:hover { background: var(--accent-xlight); }
.phoneme-token.selected { background: var(--accent-light); outline: 2px solid var(--accent-mid); }
body.editor-phonemes .phoneme-token.ph-editing { background: var(--accent-light); outline: 2px solid var(--accent); }

/* Numbering mode */
#numberingToolbar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; padding: 0.5rem 0; margin-bottom: 1rem; border-bottom: 1px solid var(--border-light); }
#numberingStatus { font-size: var(--fs-micro); color: var(--accent); font-style: italic; }
#btnResetNumbers, #btnSaveNumbers, #btnExitNumbering { display: none; }
.numbering-mode-active #btnResetNumbers, .numbering-mode-active #btnSaveNumbers, .numbering-mode-active #btnExitNumbering { display: inline-flex; }
.numbering-mode-active #btnNumberingMode { display: none; }
.numbering-mode-active .phoneme-token { cursor: pointer !important; position: relative; }
.numbering-mode-active .phoneme-token:hover { background: var(--accent-mid) !important; color: white !important; }
.numbering-badge {
  position: absolute; top: -4px; right: -4px; background: var(--accent); color: white;
  font-size: var(--fs-badge); font-weight: var(--fw-heading); min-width: var(--badge-size);
  height: var(--badge-size); border-radius: var(--badge-radius); display: flex;
  align-items: center; justify-content: center; padding: 0 4px; pointer-events: none;
  z-index: 100; font-family: monospace; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.numbering-order-hint {
  position: absolute; bottom: -3px; right: -1px; font-size: var(--fs-badge); color: var(--text-muted);
  font-family: monospace; line-height: 1; pointer-events: none; opacity: 0.65;
}
body.editor-phonemes table.phoneme-grid td.empty-cell { cursor: pointer; position: relative; transition: background 0.1s; }
body.editor-phonemes table.phoneme-grid td.empty-cell:hover { background: var(--accent-xlight); }
body.editor-phonemes table.phoneme-grid td.empty-cell:hover::after {
  content: '+'; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: var(--fs-2xl); color: var(--accent); opacity: 0.5;
}
.ph-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px;
  padding: 3px 7px; font-size: var(--fs-md); border: 1px solid var(--border); background: var(--bg);
  color: var(--text); cursor: pointer; transition: background 0.1s, border-color 0.1s;
  border-radius: var(--radius-sm);
}
.ph-btn:hover { background: var(--accent-xlight); border-color: var(--accent-light); }
.ph-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.zero-ph-btn { font-style: italic; border-style: dashed; }
.zero-ph-btn.active { background: var(--text-muted); border-color: var(--text-muted); font-style: italic; }
.outcome-grid-sep { width: 100%; height: 0; border-top: 1px solid var(--border); margin: 4px 0; }
.zero-inline-btn {
  display: inline; padding: 1px 6px; font-size: inherit; font-style: italic;
  border: 1px dashed var(--text-muted); background: transparent; color: var(--text);
  cursor: pointer; border-radius: var(--radius-chip);
}
.zero-inline-btn:hover { background: var(--accent-xlight); border-color: var(--accent); color: var(--accent); }
.extras-group { margin-bottom: 0.55rem; }
.extras-section { margin-bottom: 0.9rem; }
.extras-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 0.35rem; }
.extras-label { display: inline-block; font-weight: var(--fw-label); margin-right: 0.3rem; margin-bottom: 0.35rem; }
.btn-add-phoneme { margin-top: 0.3rem; }
.subcol-unmark { background: transparent; }
.ctx-str { font-size: var(--fs-sm); color: var(--text-muted); }

/* ── 15. PASSPORT SECTION ─────────────────────── */
.detail-row { display: flex; gap: 0.7rem; margin-top: 0.8rem; align-items: flex-start; }
.detail-panel {
  flex: 1; min-width: 0;
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent-light);
  border-radius: 3px;
  padding: 0.85rem 1rem;
  background: var(--surface);
  font-size: var(--fs-sm);
  line-height: 1.55;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s;
}
.detail-panel:focus-within { border-color: oklch(0.45 0.13 262 / 45%); border-top-color: var(--accent); }
.detail-symbol { font-size: 1.9rem; font-weight: var(--fw-body); line-height: 1; margin-bottom: 0.55rem; color: var(--accent); }
.feature-table { border-collapse: collapse; width: 100%; }
.feature-table tr + tr td { border-top: 1px solid var(--border-light); }
.feat-label {
  padding: 0.22rem 0.5rem 0.22rem 0; white-space: nowrap; width: 42%;
  font-size: var(--fs-label); font-weight: var(--fw-heading); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}
.feat-val { padding: 0.22rem 0; font-weight: var(--fw-medium); color: var(--text); }
.ancestor-row { padding: 0.3rem 0; border-bottom: 1px solid var(--border-light); line-height: 1.5; }
.ancestor-row:last-child { border-bottom: none; }
.ancestor-row--base .pie-symbol { font-size: var(--fs-xl); }
.pie-symbol { font-family: var(--font-ui), serif; font-style: italic; color: var(--accent); font-size: var(--fs-xl); }
.anc-cond-header {
  display: block; font-size: var(--fs-micro); font-weight: var(--fw-heading);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
  padding: 0.55rem 0 0.15rem; border-top: 1px solid var(--border-light); margin-top: 0.15rem;
}
.anc-group { display: block; }
.anc-group + .anc-group { margin-top: 0.6rem; }
.anc-group-header {
  display: block; font-size: var(--fs-label); font-weight: var(--fw-heading);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text);
  padding: 0.15rem 0 0.25rem;
}
.anc-group--cluster .anc-group-header { color: var(--accent); }
.anc-arrow { margin: 0 0.35em; color: var(--text-muted); font-weight: var(--fw-heading); }
.tgt-symbol { color: var(--text); }
.tgt-symbol + .tgt-symbol { margin-left: 0.1em; }
.tgt-symbol--selected {
  font-weight: var(--fw-heading); color: var(--accent); background: var(--border-light);
  padding: 0 0.3em; border-radius: var(--radius-chip);
}
.anc-sep { color: var(--text-muted); margin: 0 0.05em; }

/* ── 16. VECTORS SECTION ──────────────────────── */
#vectorSpacing { width: 130px; vertical-align: middle; }
#vectorMap { width: 100%; overflow-x: auto; overflow-y: visible; }
.vectors-container { justify-content: flex-start; }
body.editor-relationships svg.language-map text { cursor: pointer; }

/* ================================================================
   ── 17. PIE SECTION ──
   ================================================================ */
.pie-layout {
  display: block;
}
.pie-settings-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
  background: transparent;
  border: none;
}
.sg-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  box-shadow:    var(--shadow-card);
  padding:       0.75rem 1rem;
  flex:          0 1 auto;
  transition:    border-color 0.15s;
}
.sg-disabled {
  opacity:        0.42;
  pointer-events: none;
}
.sg-label {
  font-size:      var(--fs-micro);
  font-weight:    var(--fw-heading);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  0.5rem;
  line-height:    1.3;
}
.sg-card .radio-group {
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
}
.sg-card .radio-group label {
  display:     flex;
  align-items: baseline;
  gap:         0.4rem;
  font-size:   var(--fs-sm);
  font-weight: var(--fw-body);
  color:       var(--foreground);
  cursor:      pointer;
  line-height: 1.5;
  flex-wrap:   wrap;
}
.sg-card .radio-group label strong { 
  font-weight: var(--fw-label); 
  color: var(--accent); 
}
.settings-note { margin-top: 0.35rem; }

.pie-blurb {
  margin-bottom: 1.1rem;
  padding: 0.55rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
}
.pie-blurb[hidden] { display: none; }
.pie-blurb-model {
  color: var(--accent-dark);
}
.pie-phonology-panel {
  min-width:  0;
  overflow-x: auto;
}
.pie-phonology-panel .phonology-layout { gap: 1.25rem; }
.pie-phonology-panel .extras-group {
  display:     flex;
  flex-wrap:   wrap;
  align-items: baseline;
  gap:         0.5rem;
  margin-top:  1.25rem;
}

/* ── 18. ISOGLOSS SECTION ─────────────────────── */
.iso-builder {
  display: grid; grid-template-columns: 1fr 1fr; gap: .65rem;
  margin-top: .4rem; align-items: flex-start;
}
.iso-builder-left, .iso-builder-right { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
#isoglossMapContainer {
  width: 100%; height: clamp(300px, 76vh, 520px); background: var(--bg-warm);
  border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
  position: relative; box-shadow: var(--shadow-card);
}
#isoglossMapContainer svg { width: 100%; height: 100%; display: block; }
.isogloss-label { font-size: 13px; font-weight: var(--fw-heading); dominant-baseline: middle; text-anchor: middle; transition: fill 0.6s ease; }
.isogloss-label.matched { fill: var(--map-matched); }
.isogloss-label.unmatched { fill: var(--map-unmatched); }
/* Colour crossfades when matched/unmatched flips; radius is tweened in JS (D3) */
.isogloss-circle { fill-opacity: 0.2; transition: fill 0.6s ease; }
.isogloss-circle.matched { fill: var(--map-matched); }
.isogloss-circle.unmatched { fill: var(--map-unmatched); }

@media (prefers-reduced-motion: reduce) {
  .isogloss-circle, .isogloss-label { transition: none; }
}
.iso-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem; box-shadow: var(--shadow-card);
  transition: border-color 0.15s;
}
.iso-panel-title {
  font-size: var(--fs-micro); font-weight: var(--fw-heading); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 0.28rem 0;
}
/* Accessible data table below the isogloss map */
.iso-map-table {
  margin-top:  0.6rem;
  font-size:   var(--fs-sm);
  color:       var(--text-muted);
}
.iso-map-table summary {
  cursor:      pointer;
  font-size:   var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:       var(--muted-foreground);
  padding:     0.2rem 0;
  user-select: none;
}
.iso-map-table summary:hover { color: var(--text); }
.iso-map-table table {
  margin-top:      0.4rem;
  border-collapse: collapse;
  width:           100%;
  font-size:       var(--fs-sm);
}
.iso-map-table th,
.iso-map-table td {
  padding:       0.18rem 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align:    left;
}
.iso-map-table thead th {
  font-weight:  var(--fw-label);
  font-size:    var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:        var(--muted-foreground);
}
.iso-map-table caption { display: none; }

.isogloss-info { font-size: var(--fs-sm); max-height: 380px; overflow-y: auto; }
.isogloss-info h3 { font-size: var(--fs-sm); font-weight: var(--fw-heading); margin-bottom: 0.35rem; color: var(--accent); }
.isogloss-info p { margin-bottom: 0.22rem; color: var(--text-muted); }
.isogloss-info strong { color: var(--text); }
.iso-actions { display: flex; flex-direction: column; gap: var(--sm-gap); }
.iso-actions .btn-row { display: flex; gap: 0.45rem; }
.iso-actions .btn-row .btn { flex: 1; }
.iso-save-row { display: flex; gap: 0.45rem; }
.iso-save-row .qb-save-name { flex: 1; }
#sbSentence {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem;
  padding: 0.55rem; min-height: 2.4rem; background: var(--bg-warm);
  border: 1px solid var(--border); border-radius: var(--radius-sm); line-height: 1.6;
}
.sb-token {
  display: inline-flex; align-items: center; padding: 0.12rem 0.4rem;
  font-size: var(--fs-md); font-family: var(--font-ui); white-space: nowrap; cursor: default;
  user-select: none; line-height: 1.4; border: 1px solid transparent; border-radius: var(--radius-chip);
}
.sb-token-inert { color: var(--text-muted); padding: 0; }
.sb-token-verb {
  background: var(--accent-light); color: var(--accent-dark); border-color: var(--accent-light);
  cursor: pointer; font-weight: var(--fw-label);
}
.sb-token-verb:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.sb-token-class {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent); cursor: pointer;
  font-weight: var(--fw-label);
}
.sb-token-class:hover { background: var(--accent-dark); }
.sb-token-feature, .sb-token-pie {
  background: var(--bg-warm); color: var(--text); border-color: var(--border); cursor: pointer;
}
.sb-token-feature:hover, .sb-token-pie:hover { background: var(--border); }
.sb-token-plus {
  background: transparent; color: var(--text-muted); border: 1.5px dashed var(--border);
  cursor: pointer; padding: 0.08rem 0.35rem;
}
.sb-token-plus:hover { color: var(--accent); border-color: var(--accent); }
.sb-hint { font-size: var(--fs-label); color: var(--text-muted); font-style: italic; margin-left: 0.2rem; }
.sb-menu {
  position: absolute; z-index: 9999; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-menu); min-width: 155px;
  max-height: 260px; overflow-y: auto; padding: 0.2rem 0;
}
.sb-menu-phonemes { max-height: 300px; min-width: 175px; }
.sb-menu-header {
  padding: 0.3rem 0.75rem 0.2rem; font-size: var(--fs-micro); font-weight: var(--fw-heading);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
  border-top: 1px solid var(--border-light); margin-top: 0.2rem;
}
.sb-menu-header:first-of-type { border-top: none; margin-top: 0; }
.sb-menu-item {
  padding: 0.3rem 0.75rem 0.3rem 1.1rem; font-size: var(--fs-sm); font-family: var(--font-ui);
  cursor: pointer; white-space: nowrap; color: var(--text);
}
.sb-menu-item:hover { background: var(--accent-xlight); }
.sb-menu-item.sb-menu-remove { color: var(--danger); }
.json-panel { position: relative; }
.query-json-preview {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.55rem; font-size: var(--fs-label); line-height: 1.4; color: var(--text);
  overflow-x: auto; white-space: pre-wrap; word-break: break-all; max-height: 110px;
}
.language-editor-container { display: none; flex-direction: column; height: 100%; }
.lang-editor-layout { display: flex; gap: 1.25rem; height: 100%; min-height: 380px; }
.lang-list-panel { flex: 3; border-right: 1px solid var(--border); padding-right: 0.9rem; overflow-y: auto; }
.lang-form-panel { flex: 4; overflow-y: auto; }
.lang-list-header {
  display: grid; grid-template-columns: 50px 1fr; gap: 0.4rem; padding: 0.4rem 0;
  border-bottom: 1px solid var(--border); font-size: var(--fs-micro); font-weight: var(--fw-heading);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}
.lang-list-row {
  display: grid; grid-template-columns: 50px 1fr; gap: 0.4rem; padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-light); cursor: pointer; align-items: center;
}
.lang-list-row:hover { background: var(--accent-xlight); }
.lang-list-row.selected { background: var(--accent-light); }
.lang-short { font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--accent); }
.lang-list-footer { margin-top: 0.9rem; padding-top: 0.4rem; }
.lang-list-row .current-language { font-weight: var(--fw-label); color: var(--accent); }
.lang-list-row .current-language::before { content: "▶ "; font-size: var(--fs-label); }
.lang-form-panel .form-actions { flex-wrap: wrap; }
.lang-form-panel .form-actions .btn { flex: 1 1 auto; }
.lang-unpublished {
  font-size: var(--fs-micro); font-weight: var(--fw-label); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border);
  padding: 0 0.3em; margin-left: 0.3em; vertical-align: middle; border-radius: var(--radius-chip);
}

/* ── 19. ABOUT & CREDITS ─────────────────────── */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 2rem;
  max-width: 1050px;
}
.about-main p.about-lead { font-size: 1.05rem; line-height: 1.75; color: var(--foreground); margin-bottom: 0.85rem; }
.about-lead b { color: var(--text); font-weight: var(--fw-label); }
.about-warning {
  border: 1px solid var(--warn-border);
  border-left: 4px solid var(--warn-border-strong);
  background: var(--warn-bg);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  margin-bottom: 1rem;
}
.about-main .about-warning p { font-size: var(--fs-sm); line-height: 1.6; color: var(--warn-text); }
.about-warning strong { font-weight: var(--fw-label); }
.about-main p { font-size: var(--fs-md); line-height: 1.72; color: var(--text-muted); margin-bottom: 0.65rem; }
.about-main p b { color: var(--text); font-weight: var(--fw-label); }
.about-main a { color: var(--accent-mid); }
.about-timeline {
  list-style: none; position: relative; padding-left: 1.3rem; margin-top: 0.25rem;
}
.about-timeline::before {
  content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px;
  width: 2px; background: var(--border);
}
.about-timeline li {
  position: relative; padding-bottom: 0.75rem; font-size: var(--fs-sm);
  line-height: 1.6; color: var(--text-muted);
}
.about-timeline li::before {
  content: ''; position: absolute; left: -1.3rem; top: 5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--sb-accent); border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
}
.about-timeline strong { color: var(--text); font-weight: var(--fw-label); }
.about-timeline a { color: var(--accent-mid); }
.about-sidebar { display: flex; flex-direction: column; gap: 0.65rem; }
.about-status-label {
  font-size: var(--fs-micro); font-weight: var(--fw-heading); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.1rem;
}
.status-item {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       0.75rem 0.9rem;
  box-shadow:    var(--shadow-card);
  transition:    border-color 0.15s;
}
.status-item:hover { border-color: oklch(0.45 0.13 262 / 30%); }
.status-badge {
  display: inline-block; font-size: var(--fs-micro); font-weight: var(--fw-heading);
  letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 7px;
  border-radius: 99px;        /* pill come prototipo */ margin-bottom: 0.25rem;
}
.status-active { background: var(--status-active-bg); color: var(--status-active-text); }
.status-partial { background: var(--status-partial-bg); color: var(--status-partial-text); }
.status-name {
  font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: 0.04em;
  color: var(--foreground); margin-bottom: 0.05rem;
}
.status-stat {
  font-size: var(--fs-label); font-weight: var(--fw-label); color: var(--accent-mid);
  letter-spacing: 0.01em; margin-bottom: 0.12rem;
}
.status-desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
.credits-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 1.5rem 1.75rem; max-width: 720px;
}
.credits-card h2 { margin-top: 0; }
.credits-table { border-collapse: collapse; width: 100%; font-size: var(--fs-md); line-height: 1.72; }
.credits-table tr + tr td { border-top: 1px solid var(--border-light); }
.credits-table td { padding: 0.65rem 0.5rem; vertical-align: baseline; }
.credits-label {
  font-size: var(--fs-micro); font-weight: var(--fw-heading); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); white-space: nowrap;
  width: 130px; padding-right: 1.25rem; vertical-align: baseline; text-align: left;
}
.credits-affil { font-size: var(--fs-sm); color: var(--text-muted); }
.credits-note { font-size: var(--fs-sm); color: var(--text-muted); font-style: italic; }
.credits-name, .credits-mail { color: var(--accent-mid); text-decoration: none; }
.credits-name { font-weight: var(--fw-label); }
.credits-mail { font-size: var(--fs-sm); }
.credits-name:hover, .credits-mail:hover { text-decoration: underline; }
.credits-table a { color: var(--accent-mid); }

/* ── 20. RESPONSIVE ───────────────────────────── */
@media (max-width: 960px) {
  :root { --sidebar-w: 0px; }
  .app-shell { grid-template-columns: 1fr; }

  /* Sidebar becomes a slide-in drawer */
  .sidebar {
    position:   fixed;
    top:        0;
    left:       0;
    height:     100vh;
    width:      256px;
    z-index:    1001;
    transform:  translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
  }
  .sidebar.mobile-open {
    transform:  translateX(0);
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.28);
  }

  /* Show backdrop when nav is open */
  .mobile-nav-backdrop.active { display: block; }

  /* Show hamburger button */
  .mobile-menu-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           36px;
    height:          36px;
    padding:         0;
    background:      transparent;
    border:          none;
    color:           var(--foreground);
    cursor:          pointer;
    border-radius:   var(--radius);
    transition:      background 0.15s;
  }
  .mobile-menu-btn:hover { background: var(--secondary); }
  .main-scroll { padding: 1.25rem 1.1rem; }
  .about-layout { grid-template-columns: 1fr; }
  .about-sidebar { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
  .status-item { flex: 1 1 160px; }
  .two-col, .phonology-layout { grid-template-columns: 1fr; }
  .iso-builder { grid-template-columns: 1fr; }
  .iso-actions { flex-direction: row; flex-wrap: wrap; }
  .iso-actions .btn, .iso-actions .qb-save-name { width: auto; flex: 1; }
  #editorPanel.open { width: 100vw; }
  body.editor-open .main-scroll { max-width: 0; }
  .pie-settings-panel { gap: 0.4rem; }
  .pie-phonology-panel { min-width: auto; }
}

/* ── BLOG ─────────────────────────────────────────────────────────── */
/* Harmonised with the site's academic language: small uppercase gold labels,
   muted serif reading copy (cf. .about-main), site chips (cf. .ctx-tag-ep). */
.blog-wrap { max-width: 720px; }

.blog-intro { margin-bottom: 1.4rem; }
.blog-intro h2 { margin: 0 0 0.35rem 0; }
.blog-intro-text { margin: 0; font-size: var(--fs-lg); line-height: 1.78; color: var(--text-muted); }
.blog-intro-text a { color: var(--accent-mid); }
.blog-intro-tag { font-weight: var(--fw-label); color: var(--accent-dark); }

.blog-status {
  color: var(--text-muted); font-style: italic; font-size: var(--fs-sm);
  padding: 1.8rem 0; text-align: center;
}

/* Post card — content-card pattern con accent rail aggiornato */
.blog-post {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 1.5rem 1.75rem; margin-bottom: 1.4rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.blog-post:hover {
  border-color: oklch(0.45 0.13 262 / 30%);
  box-shadow: var(--shadow-raise);
}

/* Title — the site's heading label DNA, sized up to read as a post title */
.blog-post-title {
  font-size: 1.15rem; font-weight: var(--fw-heading); letter-spacing: -0.01em;
  text-transform: none; color: var(--foreground); line-height: 1.25;
  border-bottom: 1px solid var(--border-light); padding-bottom: 0.3rem;
  margin: 0 0 0.4rem 0;
}
.blog-post-title a { color: inherit; text-decoration: none; }
.blog-post-title a:hover { color: var(--accent-dark); }
.blog-post-meta {
  margin: 0 0 0.45rem 0; font-size: var(--fs-micro); font-weight: var(--fw-heading);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dark);
}

/* Body — matches the site's reading copy (cf. .about-main p) */
.blog-post-body { font-size: var(--fs-md); line-height: 1.72; color: var(--text-muted); }
.blog-post-body > *:first-child { margin-top: 0; }
.blog-post-body > *:last-child { margin-bottom: 0; }
.blog-post-body p { margin: 0 0 0.85rem 0; }
.blog-post-body strong, .blog-post-body b { color: var(--text); font-weight: var(--fw-label); }
.blog-post-body a { color: var(--accent-mid); }
.blog-post-body ul, .blog-post-body ol { margin: 0 0 0.85rem 1.4rem; padding: 0; }
.blog-post-body li { margin: 0.18rem 0; }

/* In-article subheadings — small gold labels, like the rest of the site */
.blog-post-body h3, .blog-post-body h4 {
  font-size: var(--fs-micro); font-weight: var(--fw-heading); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin: 1.3rem 0 0.5rem;
}

.blog-quote {
  margin: 1rem 0; padding: 0.1rem 0 0.1rem 0.9rem;
  border-left: 2px solid var(--accent-light);
  font-size: var(--fs-lg); font-style: italic; color: var(--text);
}
.blog-indented {
  margin: 0.85rem 0; padding: 0.1rem 0 0.1rem 0.9rem;
  border-left: 2px solid var(--border);
  color: var(--text-muted); font-style: italic;
}
.blog-chat { font-family: var(--font-ui); }

.blog-figure { margin: 1.1rem 0; text-align: center; }
.blog-figure img {
  max-width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}

.blog-post-foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.6rem;
  margin-top: 1.1rem; padding-top: 0.8rem; border-top: 1px solid var(--border-light);
}
/* Tags — the site chip (cf. .ctx-tag-ep) */
.blog-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.blog-tag {
  font-size: var(--fs-label); padding: 1px 6px; border-radius: var(--radius-chip);
  background: var(--accent-light); color: var(--accent-dark);
}
.blog-permalink {
  font-size: var(--fs-label); font-weight: var(--fw-heading);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}

/* ── PIE model: pannello outcomes (click su un fonema PIE) ─────────────── */
.pie-outcomes { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.pie-outcomes[hidden] { display: none; }
.pie-outcomes-head { color: var(--accent-dark); margin-bottom: 0.6rem; }
.pie-outcomes-sym { font-style: italic; }
.pie-outcomes-tag {
  font-weight: 400; font-size: 0.78em; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius-chip);
  padding: 0 0.3em; margin-left: 0.45em; vertical-align: middle;
}
.pie-outcomes-grid {
  display: inline-grid; grid-template-columns: repeat(2, max-content);
  gap: 0.2rem 0.9rem;
}
.pie-outcome-row {
  display: contents;
}
.pie-outcome-lang { padding: 0.18rem 0.25rem 0.18rem 0; border-bottom: 1px dotted var(--border-light, var(--border)); }
.pie-outcome-vals { padding: 0.18rem 0 0.18rem 0.25rem;  border-bottom: 1px dotted var(--border-light, var(--border)); }
.pie-outcome-lang { color: var(--text-muted); }
.pie-outcome-vals { color: var(--accent); text-align: right; }
.pie-outcomes-empty { color: var(--text-muted); font-style: italic; }

/* ── CORRESPONDENCE MATRIX ─────────────────────────────────────────── */
#matrix { padding: 0; }
.matrix-wrap {
  overflow: auto;
  max-height: calc(100vh - var(--topbar-h) - 5.5rem);
}
.corr-matrix {
  border-collapse: collapse;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.matrix-corner {
  position: sticky; left: 0; top: 0; z-index: 3;
  background: var(--card);
  border-bottom: 2px solid var(--border);
  border-right:  2px solid var(--border);
  min-width: 5rem;
}
.matrix-lang-head {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-warm);
  padding: 0.35rem 0.55rem;
  text-align: center;
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
  border-right: 1px solid var(--border);
  min-width: 3.4rem;
}
.matrix-pie-head {
  position: sticky; left: 0; z-index: 1;
  background: var(--bg-warm);
  padding: 0.22rem 0.65rem 0.22rem 0.5rem;
  font-weight: var(--fw-label);
  font-size: var(--fs-sm);
  text-align: left;
  border-right: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.matrix-group-row { background: var(--background); }
.matrix-group-label {
  padding: 0.3rem 0.5rem;
  font-size: var(--fs-micro);
  font-weight: var(--fw-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.matrix-cell {
  padding: 0.2rem 0.4rem;
  text-align: center;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  cursor: default;
}
.matrix-cell[tabindex="0"] { cursor: pointer; }
.matrix-cell[tabindex="0"]:hover,
.matrix-cell[tabindex="0"]:focus { background: var(--accent-xlight); outline: none; }
.matrix-cell.has    { background: var(--card); }
.matrix-cell.minor  { background: oklch(0.965 0.003 262); color: oklch(0.45 0.13 262 / 65%); }
.matrix-cell.empty  { background: transparent; }
.matrix-table tbody tr:nth-child(even) .matrix-cell:not(.matrix-th) { background: oklch(0.985 0.002 262); }
.matrix-table tbody tr:nth-child(even) .matrix-cell.minor { background: oklch(0.960 0.004 262); }
.matrix-outcome       { font-size: var(--fs-md); }
.matrix-minor         { font-size: var(--fs-micro); color: var(--text-muted); font-style: italic; }
.matrix-badge {
  position: absolute; top: 2px; right: 3px;
  font-size: 0.52rem; line-height: 1;
  color: var(--text-muted);
}
.blog-permalink:hover { color: var(--accent-dark); }