/* ---------------------------------------------------------------------------
   La palette e' quella del KDP Command Center, valori letti dal vivo l'11/09/2026
   (chiaro e scuro). ADmanager e il Command Center sono due finestre sullo stesso
   lavoro: usare due grigi diversi li fa sembrare due strumenti diversi.

   Sotto, i nomi vecchi restano come alias: le regole gia' scritte continuano a
   valere e nessuna sfumatura cambia per sbaglio.
   --------------------------------------------------------------------------- */
:root{
  --bg:#f4f6f9; --bg-elev:#ffffff; --panel:#ffffff; --panel-2:#f0f3f7;
  --line:#d6dde6; --line-soft:#e4e9ef;
  --txt:#16202b; --txt-dim:#5a6878; --txt-faint:#8b98a8;
  --accent:#1d6ae5; --accent-dim:#a9c6f7;
  --st-ok:#14803c;      --st-ok-bg:rgba(53,196,106,.16);
  --st-low:#7a5400;     --st-low-bg:rgba(240,180,41,.22);
  --st-broken:#c02b22;  --st-broken-bg:rgba(255,95,86,.16);
  --st-info:#1d6ae5;    --st-info-bg:rgba(76,141,255,.12);
  --st-unknown:#566371; --st-unknown-bg:rgba(107,120,136,.10);
  --radius:10px; --radius-sm:6px;
  --shadow:0 6px 20px rgba(20,30,45,.12);
  --mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono",Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* alias verso i nomi usati nel resto del foglio */
  --ground:var(--bg); --surface:var(--panel); --surface-2:var(--panel-2);
  --ink:var(--txt); --ink-2:var(--txt-dim); --muted:var(--txt-faint);
  --hair:var(--line); --hair-soft:var(--line-soft);
  --accent-soft:var(--st-info-bg);
  --verde:var(--st-ok); --verde-bg:var(--st-ok-bg);
  --arancione:var(--st-low); --arancione-bg:var(--st-low-bg);
  --azzurro:var(--st-info); --azzurro-bg:var(--st-info-bg);
  --grigio:var(--st-unknown); --grigio-bg:var(--st-unknown-bg);
  --bianco-bd:var(--line); --bianco-bg:var(--panel);
  --critico:var(--st-broken); --critico-bg:var(--st-broken-bg);
  --su-accent:#ffffff;
  --ombra:var(--shadow);
}

/* Lo scuro si ridefinisce **solo sui token**: le regole sotto non lo sanno, e
   cosi' non esiste un colore che vive in un tema solo. Il guardiano
   `:not([data-theme="light"])` fa vincere la scelta esplicita sul sistema. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e1116; --bg-elev:#151a21; --panel:#171d26; --panel-2:#1c2430;
    --line:#27303d; --line-soft:#202834;
    --txt:#e6edf3; --txt-dim:#9aa7b8; --txt-faint:#6b7888;
    --accent:#4c8dff; --accent-dim:#2a4d8f;
    --st-ok:#35c46a;      --st-ok-bg:rgba(53,196,106,.12);
    --st-low:#f0b429;     --st-low-bg:rgba(240,180,41,.14);
    --st-broken:#ff5f56;  --st-broken-bg:rgba(255,95,86,.16);
    --st-info:#4c8dff;    --st-info-bg:rgba(76,141,255,.12);
    --st-unknown:#6b7888; --st-unknown-bg:rgba(107,120,136,.10);
    --shadow:0 6px 24px rgba(0,0,0,.35);
    --su-accent:#ffffff;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1116; --bg-elev:#151a21; --panel:#171d26; --panel-2:#1c2430;
  --line:#27303d; --line-soft:#202834;
  --txt:#e6edf3; --txt-dim:#9aa7b8; --txt-faint:#6b7888;
  --accent:#4c8dff; --accent-dim:#2a4d8f;
  --st-ok:#35c46a;      --st-ok-bg:rgba(53,196,106,.12);
  --st-low:#f0b429;     --st-low-bg:rgba(240,180,41,.14);
  --st-broken:#ff5f56;  --st-broken-bg:rgba(255,95,86,.16);
  --st-info:#4c8dff;    --st-info-bg:rgba(76,141,255,.12);
  --st-unknown:#6b7888; --st-unknown-bg:rgba(107,120,136,.10);
  --shadow:0 6px 24px rgba(0,0,0,.35);
  --su-accent:#ffffff;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
h1,h2,h3{text-wrap:balance; margin:0}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- struttura ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:0 22px 64px}
.top{border-bottom:1px solid var(--hair); background:var(--surface); position:sticky; top:0; z-index:5}
.top-in{max-width:1180px; margin:0 auto; padding:14px 22px; display:flex; align-items:baseline; gap:18px; flex-wrap:wrap}
.marchio{font-weight:700; font-size:17px; letter-spacing:-.01em}
.marchio span{color:var(--muted); font-weight:500}
.data{margin-left:auto; color:var(--muted); font-size:13px}

.tabs{display:flex; gap:2px; margin:22px 0 0}
.tab{
  background:transparent; border:1px solid transparent; border-bottom:2px solid transparent;
  padding:8px 14px; font-weight:600; font-size:14px; color:var(--muted);
}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}

/* ---------- numeri in cima ---------- */
.cifre{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px;
  background:var(--hair); border:1px solid var(--hair); margin:18px 0 26px}
.cifra{background:var(--surface); padding:14px 16px}
.cifra .n{font-family:"IBM Plex Mono",monospace; font-size:26px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.cifra .e{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-top:2px}
.cifra .sotto{font-size:12px; color:var(--ink-2); margin-top:6px}
.n.buono{color:var(--verde)} .n.critico{color:var(--critico)}

/* ---------- corpo ---------- */
/* La colonna stretta era la spalla dei «target salvati», tolta su richiesta.
   La griglia pero' continuava a tenerle 268px: il contenuto girava su 842px
   dentro una pagina da 1136, e a schermo si vedeva una fascia vuota a destra.
   Ora la seconda colonna esiste solo se c'e' davvero qualcosa da metterci. */
.corpo{display:grid; grid-template-columns:minmax(0,1fr); gap:26px; align-items:start}
.corpo:has(> * + *){grid-template-columns:minmax(0,1fr) 268px}
@media(max-width:900px){.corpo{grid-template-columns:1fr}}

.sez{margin-bottom:30px}
.sez-t{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.sez-t h2{font-size:13px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:600}
.sez-t .conta{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted);
  border:1px solid var(--hair); padding:1px 6px}

/* ---------- scheda libro ---------- */
.scheda{background:var(--surface); border:1px solid var(--hair); box-shadow:var(--ombra);
  display:grid; grid-template-columns:4px minmax(0,1fr); margin-bottom:10px}
.striscia{background:var(--grigio)}
.scheda.bianco .striscia{background:var(--bianco-bd)}
.scheda.verde .striscia{background:var(--verde)}
.scheda.arancione .striscia{background:var(--arancione)}
.scheda.azzurro .striscia{background:var(--azzurro)}
.scheda.critico .striscia{background:var(--critico)}
.dentro{padding:14px 16px}

.riga1{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.titolo{font-weight:600; font-size:15.5px; letter-spacing:-.01em}
.conto{font-size:12.5px; color:var(--muted)}
.mkt{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600; letter-spacing:.04em;
  border:1px solid var(--hair); padding:1px 5px; color:var(--ink-2)}

.pill{font-size:11px; font-weight:600; letter-spacing:.03em; padding:2px 7px; border:1px solid transparent}
.pill.bianco{background:var(--bianco-bg); border-color:var(--bianco-bd); color:var(--ink-2)}
.pill.verde{background:var(--verde-bg); color:var(--verde)}
.pill.arancione{background:var(--arancione-bg); color:var(--arancione)}
.pill.azzurro{background:var(--azzurro-bg); color:var(--azzurro)}
.pill.grigio{background:var(--grigio-bg); color:var(--grigio)}
.pill.critico{background:var(--critico-bg); color:var(--critico)}

.perche{font-size:13.5px; color:var(--ink-2); margin:8px 0 0; max-width:66ch}
.perche b{color:var(--ink); font-weight:600}

.dati{display:flex; gap:0; margin:12px 0 0; border:1px solid var(--hair-soft); flex-wrap:wrap}
.dato{padding:7px 12px; border-right:1px solid var(--hair-soft); min-width:96px}
.dato:last-child{border-right:0}
.dato .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.dato .v{font-family:"IBM Plex Mono",monospace; font-size:14px; font-weight:500; margin-top:1px}
.v.pos{color:var(--verde)} .v.neg{color:var(--critico)}

.piano{margin:11px 0 0; border-top:1px dashed var(--hair); padding-top:10px}
.piano li{display:flex; gap:10px; align-items:baseline; font-size:13px; padding:2px 0; list-style:none}
.piano ul{margin:0; padding:0}
.piano .ruolo{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600;
  width:74px; flex:none; color:var(--ink-2)}
.piano .det{color:var(--muted)}
.piano .bid{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:12.5px}

.azioni{display:flex; gap:8px; margin-top:13px; align-items:center; flex-wrap:wrap}
.b{border:1px solid var(--hair); background:var(--surface-2); padding:6px 13px; font-size:13px; font-weight:600}
.b.primo{background:var(--accent); border-color:var(--accent); color:var(--su-accent)}
.b.primo:disabled{opacity:.6; cursor:default}
.b:hover{border-color:var(--accent)}
.esito{font-size:12.5px; color:var(--verde); font-weight:600; display:none}
.scheda.ok .esito{display:inline} .scheda.ok .azioni .b{display:none}
.scheda.ok{opacity:.62}
.nota{font-size:12px; color:var(--muted); margin-left:auto}

/* ---------- rail ---------- */
.rail{position:sticky; top:74px; display:flex; flex-direction:column; gap:18px}
.box{background:var(--surface); border:1px solid var(--hair); padding:13px 15px}
.box h3{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:9px}
.stato{display:flex; align-items:center; gap:8px; padding:3px 0; font-size:13px}
.stato .q{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-weight:600}
.punto{width:7px; height:7px; flex:none}
.p-acc{background:var(--bianco-bd)} .p-ero{background:var(--verde)} .p-mis{background:var(--azzurro)}
.p-non{background:var(--arancione)} .p-pre{background:var(--critico)} .p-fuo{background:var(--grigio)}

.fatto{font-size:13px; padding:5px 0; border-bottom:1px solid var(--hair-soft); display:flex; gap:8px}
.fatto:last-child{border-bottom:0}
.fatto .sp{margin-left:auto; font-family:"IBM Plex Mono",monospace; color:var(--muted); font-size:12px}
.check{color:var(--verde); font-weight:700}

.fonte{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  letter-spacing:.03em; color:var(--muted); border:1px solid var(--hair); padding:1px 6px}

footer{margin-top:34px; padding-top:16px; border-top:1px solid var(--hair); color:var(--muted); font-size:12.5px}
.pannello[hidden]{display:none}

/* ---------- scartato ---------- */
.scartato{font-size:12.5px; color:var(--muted); font-weight:600; display:none; align-items:center; gap:8px}
.scheda.no .scartato{display:inline-flex}
.scheda.no .azioni .b,.scheda.no .esito{display:none}
.scheda.no{opacity:.5}
.scheda.no .titolo{text-decoration:line-through; text-decoration-thickness:1px}
.annulla{background:none; border:0; border-bottom:1px solid currentColor; padding:0;
  font-size:12px; font-weight:600; color:var(--accent)}


/* ---------- ASIN in blocco ---------- */
.incolla{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:14px}
@media(max-width:820px){.incolla{grid-template-columns:1fr}}
.incolla textarea{width:100%; min-height:104px; padding:10px 11px; border:1px solid var(--hair);
  background:var(--surface); color:var(--ink); font:13px/1.5 "IBM Plex Mono",ui-monospace,Menlo,monospace; resize:vertical}
.incolla textarea:focus{outline:2px solid var(--accent); outline-offset:-2px}
.spiega{font-size:12.5px; color:var(--ink-2); line-height:1.55}
.spiega b{color:var(--ink)}
.vaglio{margin-top:13px; border-top:1px solid var(--hair); padding-top:11px}
.vaglio[hidden]{display:none}
.riga-asin{display:grid; grid-template-columns:104px minmax(0,1fr) auto; gap:10px;
  padding:7px 0; border-bottom:1px solid var(--hair); align-items:baseline; font-size:12.5px}
.riga-asin:last-child{border-bottom:0}
.riga-asin .cod{font:12px "IBM Plex Mono",ui-monospace,monospace; color:var(--ink-2)}
.riga-asin .mot{color:var(--muted); font-size:11.5px; display:block; margin-top:2px}
.tag{font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:2px 7px; white-space:nowrap}
.tag.si{background:var(--verde-bg); color:var(--verde)}
.tag.no{background:var(--critico-bg); color:var(--critico)}
.tag.forse{background:var(--accent-soft); color:var(--accent)}
.pronto{margin-top:11px; padding:9px 11px; background:var(--accent-soft);
  font:12.5px "IBM Plex Mono",ui-monospace,monospace; color:var(--ink); word-break:break-all}



/* ---------- entity mancanti ---------- */
.buchi{display:flex; flex-direction:column; gap:1px; margin:12px 0}
.buco{display:grid; grid-template-columns:150px minmax(0,1fr) 240px; gap:12px;
  align-items:center; padding:8px 0; border-bottom:1px solid var(--hair)}
@media(max-width:820px){.buco{grid-template-columns:1fr}}
.buco:last-child{border-bottom:0}
.buco .chi{display:flex; align-items:center; gap:8px; font-size:13px}
.buco .dove{display:flex; flex-direction:column; gap:2px; min-width:0}
.buco .dove .mot{font-size:12px; color:var(--ink-2)}
.buco .link{font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.esitobuco{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.verdetto{font-size:11.5px; font-weight:600}
.verdetto.ok{color:var(--verde)}
.verdetto.no{color:var(--critico)}

/* ---------- difetti del video ---------- */
.difetti{margin-top:13px; border:1px solid var(--hair); background:var(--surface-2); padding:12px 14px}
.difetti[hidden]{display:none}
.chips{display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:8px; margin:10px 0}
.difetto{text-align:left; padding:8px 10px; border:1px solid var(--hair); background:var(--surface);
  display:flex; flex-direction:column; gap:3px; line-height:1.35}
.difetto b{font-size:12.5px; font-weight:600}
.difetto .come{font-size:11px; color:var(--muted)}
.difetto.scelto{border-color:var(--accent); background:var(--accent-soft)}
.difetto.scelto b{color:var(--accent)}
.difetti .altro{width:100%; min-height:56px; padding:8px 10px; border:1px solid var(--hair);
  background:var(--surface); color:var(--ink); font:13px/1.5 system-ui,sans-serif; resize:vertical}
.difetti .altro:focus,.difetto:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}

/* ---------- anteprima video ---------- */
.anteprima{margin-top:13px; border:1px solid var(--hair); background:var(--surface-2);
  display:grid; grid-template-columns:250px minmax(0,1fr)}
@media(max-width:720px){.anteprima{grid-template-columns:1fr}}
.schermo{padding:12px; border-right:1px solid var(--hair)}
@media(max-width:720px){.schermo{border-right:0; border-bottom:1px solid var(--hair)}}
.film{width:100%; aspect-ratio:16/9; background:#0b1219; display:block}
.tempi{display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:4px}
.scene{padding:12px 14px; display:flex; flex-direction:column; gap:5px}
.scena{display:flex; gap:10px; align-items:baseline; font-size:12.5px; padding:2px 4px}
.scena .t{color:var(--muted); width:34px; flex:none; font-size:11px}
.scena .s{width:82px; flex:none; font-weight:600; font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--accent)}
.scena .d{color:var(--ink-2)}
.scena.viva{background:var(--accent-soft)}
.verifiche{grid-column:1/-1; border-top:1px solid var(--hair); padding:9px 14px;
  display:flex; gap:16px; flex-wrap:wrap}
.verifiche .ok{font-size:11.5px; color:var(--verde); font-weight:600}

/* ---------- un libro, i suoi mercati ---------- */
.mercati{display:flex; flex-direction:column; gap:1px; margin:11px 0 4px}
.riga-mercato{display:grid; grid-template-columns:44px 84px minmax(0,1fr) 190px; gap:10px;
  align-items:center; padding:7px 0; border-bottom:1px solid var(--hair-soft); font-size:12.5px}
@media(max-width:760px){
  .riga-mercato{grid-template-columns:44px 84px 1fr}
  .riga-mercato .che-fare{grid-column:2/-1}
}
.riga-mercato:last-child{border-bottom:0}
.paese{font:12px "IBM Plex Mono",ui-monospace,monospace; font-weight:600; color:var(--ink-2)}
.stato-m{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.stato-m.ok{color:var(--verde)}
.stato-m.meta{color:var(--arancione)}
.stato-m.zero{color:var(--critico)}
.caselle{display:flex; gap:4px; flex-wrap:wrap}
.casella{font:10.5px "IBM Plex Mono",ui-monospace,monospace; padding:2px 6px;
  border:1px solid var(--hair)}
.c-ha{background:var(--verde-bg); color:var(--verde); border-color:transparent}
.c-manca{background:var(--critico-bg); color:var(--critico); border-color:transparent}
.c-pausa{background:var(--arancione-bg); color:var(--arancione); border-color:transparent}
.che-fare{font-size:12px; color:var(--ink-2)}

/* ---------- keyword proposte ---------- */
.parole{margin-top:11px; border-top:1px solid var(--hair); padding-top:10px}
.parole[hidden]{display:none}
.gruppo-kw{margin:8px 0}
.gruppo-kw h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  margin:0 0 5px; font-weight:700}
.gruppo-kw.si h4{color:var(--verde)}
.gruppo-kw.no h4{color:var(--critico)}
/* L'ultima colonna era fissa a 56px: ci stava il bid, non il bid **piu' i due
   bottoni**, che finivano a capo uno sotto l'altro e raddoppiavano l'altezza di
   ogni riga. Con centinaia di keyword la lista diventava il doppio piu' lunga. */
.kw{display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr) auto; gap:10px;
  align-items:baseline;
  padding:4px 0; font-size:12px; border-bottom:1px solid var(--hair-soft)}
.kw:last-child{border-bottom:0}
.kw b{font-weight:600}
.kw .perche-kw{color:var(--muted); font-size:11.5px}
.kw .bid-kw{font:11.5px "IBM Plex Mono",ui-monospace,monospace;
  display:inline-flex; align-items:center; justify-content:flex-end; gap:5px;
  white-space:nowrap; font-variant-numeric:tabular-nums}
@media(max-width:700px){.kw{grid-template-columns:1fr}}


/* il pacchetto video: il filmato si guarda qui dentro, non si scarica */
.filmato{margin:12px 0;display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.filmato video{width:340px;max-width:100%;border-radius:8px;background:#000;
  border:1px solid var(--hair)}
.sotto-film{display:flex;flex-direction:column;gap:5px;flex:1;min-width:200px}
.copione{margin:8px 0 2px}
.copione summary{cursor:pointer;font-size:12px;color:var(--muted);
  letter-spacing:.02em;text-transform:uppercase}
.copione pre{margin:8px 0 0;padding:10px 12px;background:var(--surface-2);
  border-radius:6px;border:1px solid var(--hair);white-space:pre-wrap;
  font-size:12.5px;line-height:1.55;color:var(--ink-2)}


/* le quattro fasi del lavoro: segnate -> approvate -> in lavorazione -> finite */
.fasi{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:12px}
.fase{background:var(--panel);padding:12px 14px}
.fase-n{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.fase-e{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--txt-dim);
  margin-top:2px}
.fase-s{font-size:12px;color:var(--txt-faint);margin-top:5px;line-height:1.45}
@media(max-width:700px){.fasi{grid-template-columns:repeat(2,1fr)}}


/* i bottoni per correggere una keyword o un ASIN: piccoli, accanto al bid */
.mini{border:1px solid var(--line);background:var(--panel-2);color:var(--txt-dim);
  border-radius:var(--radius-sm);padding:1px 7px;margin-left:4px;font-size:12px;
  line-height:1.5;cursor:pointer}
.mini:hover{border-color:var(--accent);color:var(--accent)}
.kw.scelto-togli{opacity:.45;text-decoration:line-through}
.kw.scelto-negativa{box-shadow:inset 3px 0 0 var(--st-broken)}
.kw.scelto-prendi{box-shadow:inset 3px 0 0 var(--st-ok)}


/* A che punto siamo: la prima riga della pagina, prima di ogni numero */
.adesso{margin:18px 0 22px}
.adesso-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.adesso-blocco{background:var(--panel);padding:12px 14px}
.adesso-e{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-faint)}
.adesso-n{font-size:22px;font-weight:700;line-height:1.2;margin-top:3px;
  font-variant-numeric:tabular-nums}
.adesso-n.lavoro{font-size:17px;color:var(--st-info)}
.adesso-n.buono{color:var(--st-ok)}
.adesso-n.critico{color:var(--st-broken)}
.adesso-s{font-size:12px;color:var(--txt-dim);margin-top:5px;line-height:1.45}
.adesso-vecchie{margin-top:10px;padding:9px 13px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--st-low-bg);color:var(--txt-dim);
  font-size:12.5px}
@media(max-width:800px){.adesso-in{grid-template-columns:repeat(2,1fr)}}


/* L'intestazione di un'area: dice cosa vuol dire trovarci qualcosa */
.scheda.intro{border-left-color:var(--accent);background:var(--panel-2)}
.scheda.intro .dentro{padding:12px 16px}
.scheda.intro .perche{margin:0}


/* Il titolo di un gruppo dentro un'area: divide per **tipo di gesto**, non per
   argomento. Sbloccare, approvare, decidere sono tre tempi diversi. */
.gruppo-t{display:flex;align-items:baseline;gap:12px;margin:32px 0 4px;
  padding-bottom:7px;border-bottom:2px solid var(--accent)}
.gruppo-t span{font-size:16px;font-weight:700;letter-spacing:-.01em}
.gruppo-t i{font-style:normal;font-size:12.5px;color:var(--txt-faint)}


/* Secondo livello: dentro un'area, un gruppo alla volta.
   Le pillole si distinguono dalle schede principali (sottolineate) perche' sono
   una scelta di natura diversa: quelle dicono **di chi** e' il lavoro, queste
   **quale gesto**. */
.sotto-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 2px}
.sotto-tab{border:1px solid var(--line);background:var(--panel);color:var(--txt-dim);
  border-radius:999px;padding:7px 15px;font-size:13.5px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px}
.sotto-tab em{font-style:normal;font-size:11.5px;font-weight:600;
  background:var(--panel-2);color:var(--txt-faint);border-radius:999px;padding:1px 7px;
  font-variant-numeric:tabular-nums}
.sotto-tab:hover{border-color:var(--accent);color:var(--txt)}
.sotto-tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);
  color:var(--su-accent);font-weight:600}
.sotto-tab[aria-selected="true"] em{background:rgba(255,255,255,.22);color:var(--su-accent)}
.sotto-pannello[hidden]{display:none}


/* Un gruppo senza niente dentro resta visibile ma spento: sapere che una cosa
   oggi non serve vale quanto vederla. */
.sotto-tab.vuoto{opacity:.5}
.sotto-tab.vuoto em{background:transparent}