/* SkillHub — stile applicazione (tema chiaro) */

/* `hidden` deve vincere sempre: senza questa riga un elemento con
   `display: grid` o `flex` dichiarato in un foglio di stile resta visibile
   anche quando lo si nasconde da JavaScript (è la regola dell'autore che
   batte quella del browser). */
[hidden] { display: none !important; }

:root {
  color-scheme: light;
  /* Ink & chrome (palette dataviz di riferimento) */
  --bg: #f9f9f7;
  --surface: #fcfcfb;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  /* #898781 faceva 3,4:1 sul fondo: sotto il 4,5:1 AA proprio sui testi più
     piccoli (hint, small, meta), che sono quelli che ne hanno più bisogno */
  --ink-3: #6f6d68;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  /* Accent (= slot categorico 1) */
  --accent: #2a78d6;
  --accent-strong: #1c5cab;
  --accent-soft: #e5eefb;
  /* Serie categoriche */
  /* --s1…--s5 e --baseline sono ricopiati in DONUT_COLORS (app/webutils.py):
     il donut è un SVG generato dal server e non legge queste variabili. */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;
  /* Rampa sequenziale blu (ordinale, livelli 1..5) */
  --lv1: #86b6ef; --lv2: #5598e7; --lv3: #2a78d6; --lv4: #1c5cab; --lv5: #104281;
  /* Stato */
  --ok-bg: #e7f5e7; --ok-tx: #006300;
  --warn-bg: #fdf3d9; --warn-tx: #8a5a00;
  --bad-bg: #fdeaea; --bad-tx: #b32424;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 24px; font-weight: 650; margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 650; margin: 0 0 12px; }
h3 { font-size: 14px; font-weight: 650; margin: 0 0 8px; color: var(--ink-2); }

/* ---------------------------------------------------------------- topbar */
.topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--grid);
  position: sticky; top: 0; z-index: 50;
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 22px; height: 56px;
}
.brand { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.2px; }
.brand:hover { text-decoration: none; }
.brand span { color: var(--accent); }
.brand small { font-weight: 500; color: var(--ink-3); font-size: 12px; margin-left: 8px; }
.nav { display: flex; gap: 4px; flex: 1; min-width: 0; }
.nav a { white-space: nowrap; }
@media (max-width: 820px) {
  /* su schermo stretto la barra scorre invece di allargare la pagina */
  .topbar-inner { gap: 12px; padding: 0 12px; }
  .nav { overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
}
.nav a {
  padding: 6px 12px; border-radius: 8px; color: var(--ink-2); font-weight: 500;
}
.nav a:hover { background: var(--bg); text-decoration: none; color: var(--ink); }
.nav a.active { background: var(--accent-soft); color: var(--accent-strong); }
.topbar-right { display: flex; align-items: center; gap: 8px; }

/* menu utente (identità Google) */
.usermenu { position: relative; }
.usermenu > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 4px 10px 4px 4px; border-radius: 999px; list-style: none;
  border: 1px solid transparent;
}
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary::marker { content: ""; }
.usermenu > summary:hover { background: var(--bg); border-color: var(--grid); }
.usermenu[open] > summary { background: var(--bg); border-color: var(--grid); }
.usermenu[open] .caret { transform: rotate(180deg); }
.usermenu .avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
}
.usermenu .avatar.is-admin { background: var(--accent); color: #fff; }
.usermenu .who { display: flex; flex-direction: column; line-height: 1.15; }
.usermenu .who b { font-size: 13px; font-weight: 600; }
.usermenu .who small { font-size: 11px; color: var(--ink-3); }
.usermenu .caret { color: var(--ink-3); font-size: 11px; transition: transform 0.15s ease; }
.usermenu .menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 258px; background: #fff; border: 1px solid var(--grid);
  border-radius: 12px; box-shadow: 0 16px 38px rgba(11, 11, 11, 0.16);
  padding: 6px; display: flex; flex-direction: column;
}
.usermenu .menu-mail {
  font-size: 12px; color: var(--ink-3); padding: 8px 10px 10px;
  border-bottom: 1px solid var(--bg); margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usermenu .menu a, .usermenu .menu button {
  display: block; text-align: left; padding: 8px 10px; border-radius: 8px;
  color: var(--ink); background: none; border: none; cursor: pointer;
  font: inherit; font-size: 13.5px; line-height: 1.3; width: 100%;
}
.usermenu .menu a:hover, .usermenu .menu button:hover { background: var(--bg); text-decoration: none; }
.usermenu .menu form { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--bg); }
.usermenu .menu button { color: var(--bad-tx); font-weight: 550; }
.usermenu .menu button:hover { background: var(--bad-bg); }
@media (max-width: 900px) { .usermenu .who { display: none; } }

/* sotto-navigazione (catalogo) */
.subnav { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--grid); }
.subnav a {
  padding: 8px 14px; color: var(--ink-2); font-weight: 550; font-size: 14px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subnav a:hover { color: var(--ink); text-decoration: none; }
.subnav a.active { color: var(--accent-strong); border-bottom-color: var(--accent); }
.subnav a span {
  font-size: 11.5px; color: var(--ink-3); background: var(--bg);
  border-radius: 999px; padding: 1px 7px; margin-left: 4px; font-weight: 600;
}

/* ------------------------------------------------- richiamo sulla freschezza */
.nudge {
  background: var(--warn-bg); color: var(--warn-tx);
  border-bottom: 1px solid rgba(138, 90, 0, 0.18);
}
.nudge-inner {
  max-width: 1180px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.nudge-ic { font-size: 16px; }
.nudge-txt { flex: 1; min-width: 240px; font-size: 13.5px; }
.nudge-txt b { font-weight: 650; }
.nudge .btn { background: var(--warn-tx); border-color: var(--warn-tx); }
.nudge .btn:hover { background: #6d4700; border-color: #6d4700; }
.nudge .btn-secondary {
  background: #fff; color: var(--warn-tx); border-color: rgba(138, 90, 0, 0.35);
}
.nudge .btn-secondary:hover { background: #fffaf0; border-color: var(--warn-tx); }
.nudge-close { color: var(--warn-tx); }
.nudge-close:hover { background: rgba(138, 90, 0, 0.14); color: var(--warn-tx); }

/* ---------------------------------------------------------------- layout */
.container { max-width: 1180px; margin: 0 auto; padding: 24px 20px 60px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head p { margin: 0; color: var(--ink-2); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.footer {
  border-top: 1px solid var(--grid); color: var(--ink-3); font-size: 13px;
  padding: 16px 20px; text-align: center; background: var(--bg);
}
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.grid-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.grid-charts .card.wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* Titolo che separa due letture diverse nella stessa pagina */
h2.sezione {
  margin: 26px 0 14px; font-size: 17px; display: flex; align-items: baseline;
  gap: 10px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--grid);
}
h2.sezione small { font-weight: 400; font-size: 13px; color: var(--ink-3); }

/* ---------------------------------------------------------------- card */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px;
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.04);
}
/* Distanza sopra una scheda impilata. Due proprietà volute:
   1. vale SOLO nel flusso della pagina — la scheda dev'essere figlia diretta
      di un contenitore semantico, mai di un `<div>` di layout. Dentro griglie
      e colonne flex la distanza la dà `gap`, e questo margine sposterebbe in
      basso tutte le schede tranne la prima: la riga si allunga e la prima
      risulta più alta delle altre. Scritto così il difetto non può tornare in
      una griglia nuova — è già successo tre volte con un elenco di eccezioni
      al posto di questa regola;
   2. non guarda *cosa* c'è sopra: `.card + .card` lasciava attaccata una
      scheda preceduta da un form o da un titolo. Con i margini adiacenti che
      collassano, il risultato è la distanza maggiore fra le due, mai la somma. */
:is(main, form, section, aside, details) > .card:not(:first-child) { margin-top: 14px; }
.card h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card h2 small { font-weight: 500; color: var(--ink-3); font-size: 12px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 550;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); text-decoration: none; }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--baseline); }
.btn-secondary:hover { background: var(--bg); border-color: var(--ink-3); }
.btn-danger { background: #fff; color: var(--bad-tx); border-color: var(--bad-tx); }
.btn-danger:hover { background: var(--bad-bg); border-color: var(--bad-tx); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-ghost { background: none; border: none; color: var(--ink-3); cursor: pointer; font-size: 16px; padding: 4px 8px; border-radius: 6px; }
.btn-ghost:hover { background: var(--bad-bg); color: var(--bad-tx); }

/* ---------------------------------------------------------------- forms */
form { margin: 0; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field label { font-size: 13px; font-weight: 550; color: var(--ink-2); }
.field input, .field select, .field textarea, .row-item input, .row-item select, .row-item textarea {
  padding: 8px 10px; border: 1px solid var(--baseline); border-radius: 8px;
  font: inherit; font-size: 14px; background: #fff; color: var(--ink); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus,
.row-item input:focus, .row-item select:focus, .row-item textarea:focus {
  outline: 2px solid var(--accent-soft); border-color: var(--accent);
}
.field textarea { min-height: 90px; resize: vertical; }
.field-row { display: grid; gap: 12px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 700px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }
.hint { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
/* Una casella dentro un .field: `.field input { width: 100% }` la stirerebbe per
   tutta la riga spingendo il testo sotto. `.opt` la riporta a 15px — qui si
   toglie il nowrap, che serve alle barre strumenti e non a una impostazione. */
.field .opt { white-space: normal; align-items: flex-start; }
.field .opt input { flex: none; margin-top: 1px; }

/* righe dinamiche */
.row-list { display: flex; flex-direction: column; gap: 8px; }
.row-item {
  display: grid; gap: 8px; align-items: start;
  padding: 8px; border: 1px solid var(--grid); border-radius: 10px; background: #fff;
}
.row-skill { grid-template-columns: 2fr 130px 90px 36px; }
.row-lang, .row-cert { grid-template-columns: 2fr 150px 36px; }
/* Un'esperienza è la riga più densa del profilo — dieci campi — e va letta
   come una scheda, non come una fila di caselle: due file di campi corti, poi
   i due testi lunghi a tutta larghezza. Le etichette costano una riga a campo
   e la restituiscono tutta: un segnaposto sparisce appena si scrive, e in
   rilettura restavano dieci riquadri pieni di testo e senza nome. */
.row-exp { grid-template-columns: 1fr 36px; padding: 12px; }
.row-exp > .btn-ghost { margin-top: 19px; }   /* in linea con il primo campo, non con la sua etichetta */
.row-exp .exp-corpo { display: grid; gap: 10px; }
.row-exp .exp-fila { display: grid; gap: 10px; align-items: end; }
.row-exp .exp-fila-1 { grid-template-columns: 170px 1fr 1fr 1fr; }
/* l'ultima colonna è vuota di proposito: date e impegno restano della loro
   misura invece di stirarsi per tutta la riga */
.row-exp .exp-fila-2 { grid-template-columns: 100px 110px 170px 130px 1fr; }
.row-item .campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.row-item .campo > span { font-size: 12px; font-weight: 550; color: var(--ink-2); }
.row-item .campo > span i { font-style: normal; font-weight: 400; color: var(--ink-3); }
.row-item textarea { resize: vertical; line-height: 1.45; }
.row-tri { grid-template-columns: 2fr 1fr 90px 36px; }
@media (max-width: 800px) {
  .row-skill, .row-lang, .row-cert, .row-tri { grid-template-columns: 1fr 1fr; }
  .row-exp .exp-fila-1, .row-exp .exp-fila-2 { grid-template-columns: 1fr 1fr; }
}
.add-row { margin-top: 10px; }

/* ---------------------------------------------------------------- filtri */
.layout-search { display: grid; grid-template-columns: 270px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .layout-search { grid-template-columns: 1fr; } }
.filters .field { margin-bottom: 10px; }
.filters select[multiple] { min-height: 150px; }

/* ---------------------------------------------------------------- skill picker */
.skillpicker {
  border: 1px solid var(--baseline); border-radius: 10px; background: #fff;
  display: flex; flex-direction: column; overflow: hidden;
}
.sp-head { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--grid); align-items: center; }
.sp-search {
  flex: 1; min-width: 0; border: 1px solid var(--grid); border-radius: 7px;
  padding: 6px 9px; font: inherit; font-size: 13px;
}
.sp-search:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.sp-expand, .sp-close, .sp-chip button {
  border: none; background: none; cursor: pointer; color: var(--ink-3);
  border-radius: 6px; padding: 4px 7px; font-size: 14px; line-height: 1;
}
.sp-expand:hover, .sp-close:hover { background: var(--bg); color: var(--ink); }
.sp-close, .sp-footer { display: none; }
.sp-selected {
  display: none; flex-wrap: wrap; gap: 5px; padding: 8px;
  border-bottom: 1px dashed var(--grid);
}
.sp-selected.has-items { display: flex; }
.sp-chip {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--accent-soft); color: var(--accent-strong);
  border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12.5px; font-weight: 550;
}
.sp-chip button { color: var(--accent-strong); font-size: 12px; padding: 2px 6px; border-radius: 999px; }
.sp-chip button:hover { background: rgba(28, 92, 171, 0.15); }
.sp-list { max-height: 230px; overflow-y: auto; padding: 4px 8px 8px; }
.sp-group { break-inside: avoid; }
.sp-cat {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--ink-3); font-weight: 650; margin: 9px 0 3px;
}
.sp-item {
  display: flex; gap: 8px; align-items: center; font-size: 13.5px;
  padding: 3px 5px; border-radius: 6px; cursor: pointer; user-select: none;
}
.sp-item:hover { background: var(--bg); }
.sp-item input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; flex: none; }
.sp-noresults { color: var(--ink-3); font-size: 13px; padding: 10px 4px; }
/* vista espansa (finestra sopra la pagina, stesso form: nessuna perdita di stato) */
.sp-backdrop { position: fixed; inset: 0; background: rgba(11, 11, 11, 0.45); z-index: 90; }
.skillpicker.sp-expanded {
  position: fixed; z-index: 100; top: 7vh; left: 50%; transform: translateX(-50%);
  width: min(920px, 94vw); max-height: 84vh;
  box-shadow: 0 18px 50px rgba(11, 11, 11, 0.28); border-radius: 14px;
}
.skillpicker.sp-expanded .sp-close { display: inline-flex; }
.skillpicker.sp-expanded .sp-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-top: 1px solid var(--grid); background: var(--bg);
}
.sp-count { font-size: 13px; color: var(--ink-2); }
.skillpicker.sp-expanded .sp-list {
  max-height: none; flex: 1; column-width: 240px; column-gap: 22px; padding: 6px 16px 14px;
}
.skillpicker.sp-expanded .sp-head { padding: 12px 14px; }
.skillpicker.sp-expanded .sp-search { font-size: 14px; padding: 8px 11px; }

/* ---------------------------------------------------------------- match */
.match-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 12px;
}
.match-bar .sel-count { font-size: 12.5px; color: var(--ink-3); flex: 1; min-width: 180px; }
/* Quanto è costata la ricerca. Una rosa di cinque nomi non dice da quanti
   profili è stata tirata fuori, e senza quel numero sembra il risultato di una
   ricerca per parola chiave: sta sotto i risultati, discreta ma leggibile. */
.riga-lavoro {
  font-size: 13px; color: var(--ink-2); line-height: 1.6;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; margin: 14px 0 0;
}
.riga-lavoro b { color: var(--ink); font-weight: 650; }
.opt, .opt-anon {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--ink-2); cursor: pointer; user-select: none; white-space: nowrap;
}
.opt input, .opt-anon input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
/* Scheda candidato: chiusa risponde a «chi è, quanto copre, è libero?»,
   aperta mostra requisito per requisito. È un <details>: si apre con un clic
   o da tastiera, senza una riga di JavaScript. */
.match-card { padding: 0; overflow: hidden; }
.match-card > summary {
  list-style: none; cursor: pointer; padding: 13px 15px;
  display: flex; gap: 10px; align-items: flex-start; position: relative;
}
.match-card > summary::-webkit-details-marker { display: none; }
.match-card > summary::after {
  content: "▾"; position: absolute; right: 12px; bottom: 10px;
  color: var(--ink-3); font-size: 11px; transition: transform .15s;
}
.match-card[open] > summary::after { transform: rotate(180deg); }
.match-card > summary:hover { background: var(--bg); }
.match-card > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.match-card:has(input[name="sel"]:checked) {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
.m-pick { display: flex; align-items: flex-start; padding-top: 2px; cursor: pointer; }
.m-pick input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.m-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.m-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.m-name {
  font-size: 15.5px; font-weight: 650; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-score { font-weight: 650; font-size: 14px; color: var(--ink-2); flex: none; }
.m-role {
  color: var(--ink-2); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Striscia di copertura: un quadretto per requisito. È il segnale che si
   legge senza fermarsi a contare — verde coperto, ambra sotto livello,
   contorno rosso mancante. */
.m-cover { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.pallini { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.pallini i { width: 9px; height: 9px; border-radius: 3px; display: block; }
.pallini i.ok { background: var(--ok-tx); }
.pallini i.pt { background: var(--warn-tx); }
.pallini i.no { background: transparent; border: 1px dashed var(--bad-tx); }
.pallini i.af { background: var(--accent-soft); border: 1px solid var(--accent); }
/* requisito che il profilo non dichiara ma che i progetti provano */
.pallini i.pr { background: var(--ok-bg); border: 1px solid var(--ok-tx); }
.m-cover-n { color: var(--ink-3); white-space: nowrap; }
.m-occ { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; }
.m-free { color: var(--ink-2); }
.m-free.none { color: var(--ink-3); font-style: italic; }
.m-detail { padding: 12px 15px 14px; border-top: 1px dashed var(--grid); }
.m-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }
.chip.m-ok { background: var(--ok-bg); color: var(--ok-tx); border-color: transparent; }
.chip.m-ok b { color: var(--ok-tx); }
.chip.m-partial { background: var(--warn-bg); color: var(--warn-tx); border-color: transparent; }
.chip.m-partial b { color: var(--warn-tx); }
.chip.m-miss { background: #fff; color: var(--bad-tx); border: 1px dashed var(--bad-tx); }
/* requisito coperto solo da una competenza affine (es. Angular per React) */
.chip.m-related { background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; }
.chip.m-related b { color: var(--accent-strong); }
/* requisito non dichiarato nel profilo ma provato dai progetti */
.chip.m-prova { background: #fff; color: var(--ok-tx); border: 1px solid var(--ok-tx); }
.chip.m-prova b { color: var(--ok-tx); }
/* requisito non dichiarato ma SCRITTO nel profilo (progetti, CV): copre come
   una competenza dichiarata — stesso verde — ma con il bordo tratteggiato, che
   dice da dove viene e che quel profilo andrebbe sistemato */
/* «Avevi cercato…»: l'offerta di riprendere l'ultima ricerca */
.ripresa {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 9px 12px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-strong); font-size: 13px;
}
/* Perché una persona è finita nei risultati della ricerca libera */
.person-card .perche {
  margin: 8px 0 0; padding: 7px 9px; border-radius: 8px;
  background: var(--accent-soft); font-size: 12px; line-height: 1.45;
}
.perche-dove { color: var(--accent-strong); font-weight: 600; }
.perche-testo { display: block; margin-top: 3px; color: var(--ink-2); }
/* Schede oltre il tetto delle prime venti: già nella pagina, nascoste finché
   non le si chiede. Nessun ricalcolo per vedere la ventunesima persona. */
.oltre-tetto { display: none; }
.oltre-tetto.visibile { display: block; }
.mostra-oltre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip.m-testo { background: var(--ok-bg); color: var(--ok-tx);
                border: 1px dashed var(--ok-tx); }
.chip.m-testo b { color: var(--ok-tx); font-weight: 600; }
/* Scheda di segnalazione nella colonna del profilo: non è un errore, è una
   cosa da guardare — il giallo dell'avviso, non il rosso. */
.card-avviso { border-color: var(--warn-tx); }
/* Le righe proposte nel form del profilo, spiegate prima dell'elenco */
.avviso-proposte {
  background: var(--warn-bg); color: var(--warn-tx); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; font-size: 13px;
}
.avviso-proposte ul { margin: 8px 0 0; padding-left: 18px; }
.avviso-proposte li { margin: 2px 0; }
/* elenco delle prove nella scheda aperta: ognuna cita la propria fonte */
.prove-lista { margin-top: 10px; border-top: 1px dashed var(--grid); padding-top: 10px; }
.prove-lista h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-2); }
.prove-lista .prova { font-size: 12.5px; color: var(--ink-2); padding: 3px 0; }
.prove-lista .prova b { color: var(--ink); }
.prove-lista .fonte { color: var(--ink-3); }
.prove-sintesi { margin-top: 8px; font-size: 13px; color: var(--ink-2); font-style: italic; }
/* I sinonimi che il modello ha trovato per un requisito. Sono la parte che
   distingue questa ricerca da un Ctrl+F, e si vedono: verde come le coperture
   piene, perché è quello che valgono. */
.affini-hint .grafie-hint { color: var(--ok-tx); }
.affini-hint .grafie-hint b { font-weight: 600; }
/* affinità proposte sotto la riga del requisito, nell'editor del match */
.row-skill .affini-hint, .row-cert .affini-hint {
  grid-column: 1 / -1; font-size: 12px; color: var(--ink-3);
  margin: -2px 0 2px 2px;
}

/* documento con più posizioni richieste: si sceglie quale guardare */
.scelta-ruolo { border-left: 3px solid var(--accent); margin-bottom: 16px; }
.scelta-ruolo .field { margin: 0; max-width: 520px; }
.ruoli-riepilogo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ruolo-chip {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--grid); color: var(--ink-2);
  padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-family: inherit;
}
.ruolo-chip:hover { border-color: var(--accent); }
.ruolo-chip.attivo { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.ruolo-titolo { margin-top: 0; }

/* fasce: il taglio fra «proponibile» e «ripiego» deve vedersi a colpo d'occhio */
.fascia { margin-bottom: 18px; }
.fascia > h3 {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 14px; font-weight: 650;
}
.fascia > h3 small { font-weight: 400; color: var(--ink-3); font-size: 12.5px; }
/* `align-items: start` è quel che permette a una scheda di espandersi senza
   allungare le vicine della stessa riga. */
.fascia-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px; align-items: start;
}
.fascia.ideale .match-card { border-left: 3px solid var(--ok-tx); }
.fascia.adatto .match-card { border-left: 3px solid var(--accent); }
.fascia.minimo .match-card { border-left: 3px solid var(--warn-tx); }

/* occupazione: quanto, su cosa, fino a quando */
.occ {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--grid);
  font-size: 12.5px; color: var(--ink-2);
}
.occ-imp { color: var(--ink-2); }
.occ-imp::before { content: "▸ "; color: var(--ink-3); }
.occ-free { color: var(--ink); }
.occ-free.none { color: var(--ink-3); font-style: italic; }

/* nessun profilo ideale: cosa manca, e quindi cosa si cerca fuori */
.outsourcing { border-left: 3px solid var(--warn-tx); margin-bottom: 14px; }
.outsourcing > p { color: var(--ink-2); margin: 0 0 12px; }
.tab-copertura { width: 100%; border-collapse: collapse; font-size: 13px; }
.tab-copertura th {
  text-align: left; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-3); font-weight: 600;
  padding: 0 10px 6px 0; border-bottom: 1px solid var(--grid);
}
.tab-copertura td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--grid); }
.tab-copertura tr.scoperto td { background: var(--bad-bg); }
.tab-copertura tr.scoperto b { color: var(--bad-tx); }
/* una tabella non deve poter allargare la pagina: scorre dentro il suo riquadro */
.table-scroll { overflow-x: auto; }
/* Stato del motore AI: chi lavora (prima) e chi ha lavorato (dopo) */
.ai-stato {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
}
.ai-stato.ok { background: var(--accent-soft); color: var(--accent-strong); }
.ai-stato.off { background: var(--bg); color: var(--ink-2); border: 1px solid var(--grid); }
.ai-stato.bad { background: var(--bad-bg); color: var(--bad-tx); }
.ai-stato b { font-weight: 650; }

/* Configurazione del motore AI */
.ai-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--grid); }
/* «Cosa esce da qui»: il testo inviato al modello accanto ai dati trattenuti.
   Le due colonne stanno affiancate perché il confronto è tutto il punto — a
   sinistra quello che parte, a destra quello che resta — e devono partire
   dalla stessa riga anche quando una è molto più alta dell'altra. */
.anteprima-invio { margin-top: 14px; }
.anteprima-invio > summary { font-weight: 650; font-size: 13.5px; }
.due-colonne {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px; align-items: start;
}
.due-colonne h4 {
  margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ink-3);
}
pre.payload {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  background: var(--bg); border: 1px solid var(--grid); border-radius: 10px;
  padding: 12px; font-size: 12px; line-height: 1.55; color: var(--ink-2);
  max-height: 420px; overflow: auto;
}
.ai-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.ai-griglia + .ai-griglia { margin-top: 14px; }
.ai-griglia .field { margin: 0; }
.ai-griglia label .badge { margin-left: 6px; vertical-align: 1px; }
/* un riquadro per provider: chiave e modello stanno insieme */
.ai-provider {
  border: 1px solid var(--grid); border-radius: 10px; padding: 4px 12px 12px; margin: 0;
}
.ai-provider legend {
  padding: 0 6px; font-size: 12.5px; font-weight: 650; color: var(--ink-2);
}
.ai-provider .field { margin: 0; }
.ai-provider .field + .field { margin-top: 12px; }
/* l'interruttore che cambia cosa esce dal server: sta attaccato alla nota */
.ai-prove {
  border: 1px solid var(--grid); border-left: 3px solid var(--accent-strong);
  border-radius: 10px; padding: 12px 14px; margin: 0 0 14px;
}
.ai-prove h3 { margin: 0 0 6px; }
.ai-prove p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-2); }
.ai-prove .actions { margin-top: 4px; }
.ai-vertex { margin-top: 14px; }
.ai-vertex > summary { cursor: pointer; font-size: 13.5px; color: var(--ink-2); }
.ai-form input:disabled, .ai-form select:disabled {
  background: var(--bg); color: var(--ink-3); cursor: not-allowed;
}
/* Il confine dei dati verso il modello: si legge PRIMA di incollare una chiave */
.nota-dati {
  border: 1px solid var(--border); border-left: 3px solid var(--ink-3);
  border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; background: var(--bg);
  font-size: 13.5px; color: var(--ink-2);
}
.nota-dati ul { margin: 6px 0 0; padding-left: 18px; }
.nota-dati li + li { margin-top: 4px; }

/* Attesa dichiarata durante le operazioni lente */
.attesa {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 60;
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 999px;
  font-size: 13.5px; box-shadow: 0 6px 20px rgba(11, 11, 11, .25);
  max-width: min(560px, 92vw);
}
.attesa .spin {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: gira .7s linear infinite;
}
/* La ✕: un download non cambia pagina e nessun evento dice «finito» — chi ha
   già il file deve poter togliere l'annuncio senza aspettare che scada. */
.attesa-chiudi {
  flex: none; border: 0; background: none; color: rgba(255, 255, 255, .75);
  font: inherit; font-size: 13px; padding: 2px 4px; margin-left: 2px;
  cursor: pointer; border-radius: 6px;
}
.attesa-chiudi:hover { color: #fff; background: rgba(255, 255, 255, .18); }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .attesa .spin { animation-duration: 2.4s; } }

.avviso { border-left: 3px solid var(--ink-3); }
.avviso.bad { border-left-color: var(--bad-tx); }
.jd-file input[type=file] { font-size: 13px; color: var(--ink-2); }

/* ---------------------------------------------------------------- persone */
.person-card { display: flex; flex-direction: column; gap: 8px; }
.person-card .head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.person-card .name { font-size: 16px; font-weight: 650; }
.person-card .role { color: var(--ink-2); font-size: 13.5px; }
.person-card .meta { color: var(--ink-3); font-size: 12.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1px solid var(--grid);
  padding: 3px 9px; border-radius: 999px; font-size: 12.5px; color: var(--ink-2);
}
.chip b { color: var(--ink); font-weight: 550; }
.dots { display: inline-flex; gap: 2px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--grid); }
.dots i.on { background: var(--accent); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.badge.ok { background: var(--ok-bg); color: var(--ok-tx); }
.badge.warn { background: var(--warn-bg); color: var(--warn-tx); }
.badge.bad { background: var(--bad-bg); color: var(--bad-tx); }
.badge.neutral { background: var(--bg); color: var(--ink-2); border: 1px solid var(--grid); }
.badge.info { background: var(--accent-soft); color: var(--accent-strong); }
a.badge.info:hover { background: #d5e4f8; text-decoration: none; }

.avail { font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.avail .track { flex: 0 0 70px; height: 6px; border-radius: 4px; background: var(--grid); overflow: hidden; }
.avail .fill { height: 100%; background: var(--s3); border-radius: 4px; }

/* ---------------------------------------------------------------- profilo */
.profile-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.profile-head .sub { color: var(--ink-2); margin: 2px 0 8px; }
.profile-head .badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13.5px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; color: var(--ink); }
.skill-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--bg); font-size: 13.5px; }
.skill-line:last-child { border-bottom: none; }
.skill-line .years { color: var(--ink-3); font-size: 12px; }
.exp-item { padding: 10px 0; border-bottom: 1px solid var(--grid); }
.exp-item:last-child { border-bottom: none; }
.exp-item .title { font-weight: 600; }
.exp-item .org { color: var(--ink-2); }
.exp-item .period { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.exp-item .tech { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
/* `pre-line` e non `normal`: da quando la descrizione si scrive in un'area di
   testo, gli a capo che una persona ha messo sono una scelta, e collassarli in
   un paragrafo unico è disfare il suo lavoro. */
.exp-item p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); white-space: pre-line; }
.meter { height: 8px; background: var(--grid); border-radius: 5px; overflow: hidden; }
.meter .fill { height: 100%; background: var(--accent); border-radius: 5px; }
.hints { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.hints li { margin-bottom: 3px; }

.banner {
  padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 14px;
}
.banner.ok { background: var(--ok-bg); color: var(--ok-tx); }
.banner.info { background: var(--accent-soft); color: var(--accent-strong); }
.banner.warn { background: var(--warn-bg); color: var(--warn-tx); }
.banner.bad { background: var(--bad-bg); color: var(--bad-tx); }

/* ---------------------------------------------------------------- analisi */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.kpi .value { font-size: 28px; font-weight: 650; letter-spacing: -0.5px; }
.kpi .label { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.kpi.kpi-warn { border-color: var(--warn-tx); background: var(--warn-bg); }
.kpi.kpi-warn .value, .kpi.kpi-warn .label { color: var(--warn-tx); }

.barlist { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; font-size: 13px; }
.bar-row .lbl { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .track { background: none; height: 16px; display: flex; align-items: center; }
.bar-row .fill { height: 14px; border-radius: 0 4px 4px 0; background: var(--s1); min-width: 2px; }
.bar-row .val { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-row .val small { color: var(--ink-3); }

.donut-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.legend { display: flex; flex-direction: column; gap: 6px; font-size: 13px; flex: 1; min-width: 180px; }
.legend .item { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; }
.legend .swatch { width: 11px; height: 11px; border-radius: 3px; }
.legend .val { color: var(--ink-2); font-variant-numeric: tabular-nums; }

.risk-item { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--bg); font-size: 13.5px; align-items: baseline; }
.risk-item:last-child { border-bottom: none; }
.risk-item .who { color: var(--ink-3); font-size: 12.5px; text-align: right; }
.list-plain { display: flex; flex-direction: column; }
.list-plain .item { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--bg); font-size: 13.5px; align-items: center; }
.list-plain .item:last-child { border-bottom: none; }

/* ---------------------------------------------------------------- matrice */
.table-wrap { overflow-x: auto; border: 1px solid var(--grid); border-radius: 12px; background: var(--surface); }
table.matrix { border-collapse: collapse; width: 100%; font-size: 13px; }
.matrix th, .matrix td { padding: 7px 9px; border-bottom: 1px solid var(--grid); text-align: center; }
.matrix thead th {
  background: var(--bg); color: var(--ink-2); font-weight: 600; font-size: 12px;
  white-space: nowrap; position: sticky; top: 0;
}
.matrix td.who, .matrix th.who {
  text-align: left; white-space: nowrap; position: sticky; left: 0;
  background: var(--surface); font-weight: 550; z-index: 1;
}
.matrix .cell { display: inline-block; width: 26px; height: 20px; border-radius: 5px; line-height: 20px; font-size: 11.5px; font-weight: 650; }
.cell.lv1 { background: var(--lv1); color: #0b0b0b; }
.cell.lv2 { background: var(--lv2); color: #0b0b0b; }
.cell.lv3 { background: var(--lv3); color: #fff; }
.cell.lv4 { background: var(--lv4); color: #fff; }
.cell.lv5 { background: var(--lv5); color: #fff; }
.cell.empty { background: none; color: var(--baseline); font-weight: 400; }
.matrix-legend { display: flex; gap: 14px; align-items: center; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.matrix-legend .cell { width: 22px; }

/* ---------------------------------------------------------------- catalogo
   Il catalogo non è un elenco da leggere dall'inizio alla fine: è una
   tassonomia da manutenere, e le domande vere sono «dov'è questa voce», «quali
   non le usa nessuno», «cosa è arrivato dalle richieste». La pagina è quindi
   una scrivania — barra che cerca e filtra, indice dei gruppi a lato, voci in
   una griglia compatta che si apre solo dove si interviene. Duecento voci
   stanno in una schermata invece che in dieci. */
.subnav-nota { margin: -6px 0 14px; }

.cat-barra {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 14px;
  position: sticky; top: 56px; z-index: 20;
}
.cat-barra input[type=search] {
  flex: 1 1 220px; min-width: 160px; padding: 7px 11px;
  border: 1px solid var(--baseline); border-radius: 8px; font: inherit; font-size: 13.5px;
  background: #fff;
}
.cat-barra input[type=search]:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.cat-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--grid); color: var(--ink-2);
  padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 550;
}
.cat-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.cat-chip .conta {
  font-size: 11.5px; font-weight: 650; color: var(--ink-3);
  background: #fff; border-radius: 999px; padding: 0 6px;
}
.cat-chip.attivo { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.cat-chip.attivo .conta { color: var(--accent-strong); }
.cat-chip:disabled { opacity: 0.45; cursor: default; }
.cat-chip:disabled:hover { border-color: var(--grid); color: var(--ink-2); }
.cat-ordine { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.cat-ordine select {
  padding: 6px 8px; border: 1px solid var(--baseline); border-radius: 8px;
  font: inherit; font-size: 13px; background: #fff; color: var(--ink);
}
.cat-conta { font-size: 12.5px; color: var(--ink-3); margin-left: auto; white-space: nowrap; }

.cat-lavoro { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: start; }
.cat-rail {
  display: flex; flex-direction: column; gap: 1px;
  position: sticky; top: 118px; max-height: calc(100vh - 140px); overflow-y: auto;
}
.cat-rail button {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  background: none; border: none; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink-2); text-align: left;
  padding: 6px 10px; width: 100%;
}
.cat-rail button:hover { background: var(--surface); color: var(--ink); }
.cat-rail button .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-rail button .conta { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
.cat-rail button.attivo { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.cat-rail button.attivo .conta { color: var(--accent-strong); }
.cat-rail button.vuoto { opacity: 0.4; }
.cat-rail .cat-rail-tutte { border-bottom: 1px solid var(--grid); border-radius: 8px 8px 0 0; margin-bottom: 5px; padding-bottom: 8px; }
@media (max-width: 900px) {
  .cat-lavoro { grid-template-columns: 1fr; }
  .cat-rail { position: static; max-height: 168px; }
  .cat-barra { position: static; }
}

.cat-gruppo + .cat-gruppo { margin-top: 18px; }
.cat-gruppo > h3 {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3);
}
.cat-gruppo > h3 span { font-weight: 600; color: var(--baseline); letter-spacing: 0; }
.cat-griglia {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px; align-items: start;
}

/* Una voce: chiusa dice nome e quante persone la portano, aperta è il suo
   editor. Aprirne una non allunga le vicine — è `align-items: start` sulla
   griglia a garantirlo. */
.voce {
  border: 1px solid var(--grid); border-radius: 9px; background: var(--surface);
}
.voce > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: 8px;
}
.voce > summary::-webkit-details-marker { display: none; }
.voce > summary:hover { background: var(--bg); }
.voce > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.voce[open] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); background: #fff; }
.voce-nome {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 550; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.voce-uso {
  flex: none; font-size: 11.5px; font-weight: 650; color: var(--accent-strong);
  background: var(--accent-soft); border-radius: 999px; padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.voce-uso.zero { color: var(--ink-3); background: var(--bg); font-weight: 500; }
.voce-tag { flex: none; font-size: 12px; line-height: 1; }
.voce.spenta .voce-nome { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--baseline); }
.voce-corpo { padding: 2px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.voce-corpo label { display: block; font-size: 11.5px; color: var(--ink-3); margin-bottom: 8px; }
.voce-corpo input, .voce-corpo select {
  display: block; width: 100%; margin-top: 2px; padding: 6px 8px;
  border: 1px solid var(--baseline); border-radius: 7px; font: inherit; font-size: 13px;
  background: #fff; color: var(--ink);
}
.voce-corpo .switch {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--ink-2); cursor: pointer; margin-bottom: 8px;
}
.voce-corpo .switch input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); display: inline-block; }
.voce-piede {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border-top: 1px dashed var(--grid); padding-top: 8px; font-size: 12.5px;
}
.voce-piede .usage { color: var(--ink-3); }
.voce-piede form { margin-left: auto; }
.voce-piede .badge { font-size: 11px; }

.cat-vuoto { padding: 26px 4px; color: var(--ink-3); font-size: 13.5px; }

/* ---------------------------------------------------------------- import */
.upload-box { border: 2px dashed var(--baseline); border-radius: 12px; padding: 24px; text-align: center; color: var(--ink-2); background: #fff; }
.upload-box input[type=file] { margin-top: 10px; }
details.preview { margin-top: 14px; }
details.preview pre {
  white-space: pre-wrap; background: var(--bg); border: 1px solid var(--grid);
  border-radius: 10px; padding: 12px; font-size: 12px; color: var(--ink-2);
  max-height: 300px; overflow: auto;
}
.ai-note { font-size: 13px; }

/* coda dei CV caricati e non ancora assegnati */
.banner.coda-link { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
h1 .conta {
  font-size: 14px; font-weight: 600; vertical-align: middle; margin-left: 6px;
  background: var(--accent-soft); color: var(--accent-strong);
  border-radius: 999px; padding: 2px 10px;
}
.coda-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) auto auto;
  gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bg);
}
.coda-row:last-child { border-bottom: none; }
.coda-row b, .coda-row span { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coda-row small { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.coda-chi .vuoto { color: var(--ink-3); font-style: italic; }
.coda-azioni { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.coda-azioni form { display: inline; }
@media (max-width: 800px) {
  .coda-row { grid-template-columns: 1fr; }
  .coda-azioni { justify-content: flex-start; }
}

/* scelta della destinazione nella revisione di un CV */
.target-card .target-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.target-card .field { margin-bottom: 0; }
.target-card .hint { margin-top: 8px; }
@media (max-width: 700px) { .target-card .target-form { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- amministrazione */
.admin-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px;
  align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bg);
}
.admin-row small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.admin-azione { min-width: 120px; text-align: right; }
.nomina { display: grid; grid-template-columns: 1fr 200px auto; gap: 10px; align-items: end; margin-top: 16px; }
.ruoli-legenda { border-collapse: collapse; font-size: 13px; margin: 0 0 14px; }
.ruoli-legenda th {
  text-align: left; white-space: nowrap; padding: 3px 12px 3px 0;
  font-weight: 600; color: var(--ink); vertical-align: baseline;
}
.ruoli-legenda td { color: var(--ink-2); padding: 3px 0; }
.nomina .field { margin-bottom: 0; }
.stato-griglia {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 14px;
  font-size: 14px; align-items: baseline;
}
.stato-griglia span { color: var(--ink-2); }
.stato-griglia b { text-align: right; font-variant-numeric: tabular-nums; }
.stato-griglia.conteggi {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bg);
}
/* riquadro apribile: l'elenco dei profili è lungo, sta chiuso finché non serve */
.card.apribile { padding-top: 14px; }
.apribile > summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  list-style: none; user-select: none;
}
.apribile > summary::-webkit-details-marker { display: none; }
.apribile > summary h2 { margin: 0; }
.apribile > summary .apri-chiudi {
  margin-left: auto; color: var(--ink-3); font-size: 15px;
  transition: transform 0.15s ease;
}
.apribile[open] > summary { margin-bottom: 12px; }
.apribile[open] > summary .apri-chiudi { transform: rotate(180deg); }
.apribile > summary:hover .apri-chiudi { color: var(--ink); }
.apribile > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.cerca-profili { max-width: 340px; margin: 4px 0 10px; }
.profilo-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px;
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--bg);
}
.profilo-row:last-child { border-bottom: none; }
.profilo-row.is-off { opacity: 0.6; }
.profilo-row small { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.profilo-row .badge { margin-left: 6px; vertical-align: 1px; }
.profilo-cosa { color: var(--ink-3); white-space: nowrap; }
.profilo-azioni { display: flex; gap: 6px; align-items: center; justify-content: flex-end; min-width: 150px; }
.btn-ghost.elimina:hover { color: var(--bad-tx); background: var(--bad-bg); }
@media (max-width: 800px) {
  .profilo-row { grid-template-columns: 1fr; }
  .profilo-azioni { justify-content: flex-start; min-width: 0; }
  .profilo-cosa { white-space: normal; }
}
@media (max-width: 700px) {
  .admin-row { grid-template-columns: 1fr; }
  .admin-azione { text-align: left; }
  .nomina { grid-template-columns: 1fr; }
}

.empty-state { text-align: center; color: var(--ink-3); padding: 40px 20px; }
.empty-state .big { font-size: 34px; margin-bottom: 8px; }

/* form di inserimento rapido (catalogo, clienti) */
.add-form { display: grid; grid-template-columns: 1fr 200px 200px auto; gap: 10px; align-items: end; }
.add-form .field { margin-bottom: 0; }
@media (max-width: 800px) { .add-form { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- login */
.login-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 34px 20px;
  background:
    radial-gradient(1000px 620px at 14% -8%, rgba(42, 120, 214, 0.11), rgba(42, 120, 214, 0) 62%),
    radial-gradient(820px 620px at 96% 108%, rgba(27, 175, 122, 0.09), rgba(27, 175, 122, 0) 58%),
    var(--bg);
}
.login-shell {
  width: min(980px, 100%); display: grid; grid-template-columns: 1fr 396px;
  gap: 60px; align-items: center;
}
.login-logo {
  display: flex; align-items: center; gap: 11px;
  font-size: 23px; font-weight: 600; letter-spacing: -0.4px;
}
.login-logo b { color: var(--accent); font-weight: 750; }
.login-logo.compact { display: none; margin-bottom: 22px; }

.login-pitch h1 {
  font-size: 33px; line-height: 1.22; font-weight: 620; letter-spacing: -0.9px;
  margin: 24px 0 28px;
}
.login-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.login-points li { display: grid; grid-template-columns: 36px 1fr; gap: 13px; align-items: start; }
.login-points .ic {
  width: 36px; height: 36px; border-radius: 10px; background: #fff;
  border: 1px solid var(--grid); display: flex; align-items: center;
  justify-content: center; font-size: 16px;
}
.login-points b { display: block; font-size: 14px; font-weight: 620; margin-bottom: 2px; color: var(--ink); }
.login-points div { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }

.login-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 30px 28px 24px;
  box-shadow: 0 20px 46px rgba(11, 11, 11, 0.10), 0 2px 6px rgba(11, 11, 11, 0.04);
}
.login-card h2 { font-size: 20px; display: block; margin-bottom: 3px; }
.login-sub { color: var(--ink-2); font-size: 13.5px; margin: 0 0 20px; }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px; border: 1px solid var(--baseline);
  border-radius: 9px; background: #fff; color: var(--ink);
  font-size: 15px; font-weight: 550; cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 11, 11, 0.05);
}
.btn-google:hover { background: var(--bg); border-color: var(--ink-3); text-decoration: none; }
.btn-google:active { transform: translateY(1px); }
.btn-block { width: 100%; justify-content: center; padding: 11px 16px; font-size: 14.5px; }
.login-or {
  display: flex; align-items: center; gap: 12px; margin: 22px 0 18px;
  color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px;
}
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--grid); }
.dev-box { background: var(--bg); border: 1px solid var(--grid); border-radius: 12px; padding: 14px; }
.dev-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-2); margin-bottom: 12px;
}
.dev-box .field { margin-bottom: 10px; }
.dev-box .login-note { margin-bottom: 0; }
.login-note { font-size: 12.5px; color: var(--ink-3); margin: 12px 0 0; line-height: 1.45; }
.login-note code, .banner code {
  background: rgba(11, 11, 11, 0.06); padding: 1px 5px; border-radius: 5px;
  font-size: 11.5px;
}
.login-foot {
  text-align: center; color: var(--ink-3); font-size: 11.5px; line-height: 1.45;
  margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--bg);
}
@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; max-width: 420px; gap: 0; }
  .login-pitch { display: none; }
  .login-logo.compact { display: flex; }
}

/* ------------------------------------------------- ultimo uso e aspirazioni */
.uso {
  display: inline-block; font-size: 11px; color: var(--warn-tx);
  background: var(--warn-bg); border-radius: 999px; padding: 1px 7px;
  vertical-align: 1px; white-space: nowrap;
}
.chip .uso { margin-left: 2px; }
.chip i.asp { font-style: normal; font-size: 11px; }
.chip.m-asp { background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; }
.chip.m-asp a { color: inherit; }
.m-prefs { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }

/* ------------------------------------------------- avvisi gialli */
.avviso.warn { border-left-color: var(--warn-tx); }

/* ------------------------------------------------- pipeline richieste */
.ruolo-stato { display: flex; gap: 8px; align-items: center; }
.ruolo-stato select { width: auto; }
.ruolo-proposti { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chip.proposto { background: var(--ok-bg); border-color: transparent; }
.chip.proposto a { color: var(--ok-tx); font-weight: 600; }
.chip.proposto small { color: var(--ink-3); }
.chip.proposto form { display: inline; }
.chip.proposto .btn-ghost { padding: 0 2px; font-size: 12px; }
.chip.proposto.doppio { outline: 1.5px dashed var(--warn-tx); }
.doppio-avviso { color: var(--warn-tx); }
.proponi { display: flex; gap: 8px; align-items: center; }
.proponi select { width: auto; max-width: 320px; }

/* ------------------------------------------------- piano formazione
   Ogni gap è una scheda apribile: chiusa dichiara quanto pesa e quante persone
   sono formabili, aperta apre le tre vie con i nomi. La prima parte aperta,
   perché è quella su cui si decide per prima. */
.gap-item > summary { list-style: none; cursor: pointer; border-radius: 8px; margin: -4px; padding: 4px; }
.gap-item > summary::-webkit-details-marker { display: none; }
.gap-item > summary:hover { background: var(--bg); }
.gap-item > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gap-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.gap-head h2 { margin: 0; }
.gap-head .badge { flex: none; }
.gap-vie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gap-vie h3 { margin: 0 0 8px; }
.gap-vie h3 small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11.5px; }
@media (max-width: 900px) { .gap-vie { grid-template-columns: 1fr; } }

/* ------------------------------------------------- bench */
.bench-card { padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; }
.bench-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.testo-warn { color: var(--warn-tx); }
.row-asp { grid-template-columns: 1fr 36px; }
/* Il bench sono spesso decine di persone: incolonnate a tutta larghezza sono
   dieci schermate, in griglia sono due.

   Nessun `align-items: start` qui: le schede non si aprono, quindi devono
   riempire la riga e risultare tutte della stessa altezza. Perché ci riescano
   senza sbilanciarsi bastano due accorgimenti — l'elenco degli impegni si
   ferma a due righe (il resto sta nel `title`, e c'è chi ne ha sei), e le
   posizioni aperte vanno in fondo con `margin-top: auto`, così si allineano
   fra schede vicine invece di galleggiare a mezz'aria. */
.bench-griglia {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
}
.bench-impegni {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin: 0;
}
.bench-card .chips { margin-top: auto; padding-top: 6px; }

/* ------------------------------------------------- elenchi che non finiscono
   Un riquadro alto quanto l'elenco che contiene non è una lettura: è un muro.
   La regola qui è sempre la stessa — prima la distribuzione (che è
   l'informazione), poi i primi nomi (che sono l'azione), e il resto dietro un
   «vedi tutti» con un'altezza massima e la sua barra di scorrimento. */
.altro { margin-top: 10px; }
.altro > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  gap: 6px; font-size: 12.5px; color: var(--accent-strong); font-weight: 550;
}
.altro > summary::-webkit-details-marker { display: none; }
.altro > summary::before { content: "▸"; font-size: 10px; }
.altro[open] > summary::before { content: "▾"; }
.altro > summary:hover { text-decoration: underline; }
.altro > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 5px; }
/* Aperto mostra *tutto* il resto, ma dentro un'altezza sua: «vedere tutti i
   profili» e «non avere riquadri infiniti» sono due richieste che convivono
   solo così. */
.altro-corpo { max-height: 300px; overflow-y: auto; margin-top: 8px; padding-right: 6px; }
.elenco-fitto {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 0 18px;
}
.elenco-fitto .riga {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--bg);
}
.elenco-fitto .riga > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elenco-fitto .riga small { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.elenco-fitto .riga .badge { flex: none; font-size: 11px; }
/* distribuzione compatta (fasce di anzianità, quote): la forma prima dei nomi */
.fasce { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.fascia-riga { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.fascia-riga .lbl { color: var(--ink-2); white-space: nowrap; }
.fascia-riga .track { height: 14px; display: flex; align-items: center; }
.fascia-riga .fill { height: 13px; border-radius: 0 4px 4px 0; min-width: 2px; background: var(--s4); }
.fascia-riga.grave .fill { background: var(--s8); }
.fascia-riga .val { color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 600; }
.sotto-titolo { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin: 0 0 6px; }

/* ------------------------------------------------- posizioni, forma compatta
   Una posizione chiusa dice tutto quel che serve per scorrerla; aperta è il
   banco di lavoro (stato, proposte, chi proporre). Le aperte partono aperte:
   sono quelle su cui si agisce. */
.pos { border-top: 1px solid var(--grid); }
.pos > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 9px; flex-wrap: wrap; padding: 10px 4px; border-radius: 8px;
}
.pos > summary::-webkit-details-marker { display: none; }
.pos > summary:hover { background: var(--bg); }
.pos > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pos-nome { font-weight: 650; font-size: 14px; }
.pos-conta { margin-left: auto; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.pos-corpo {
  display: flex; gap: 10px 20px; flex-wrap: wrap; align-items: flex-start;
  padding: 2px 4px 14px; border-left: 2px solid var(--accent-soft); margin-left: 4px;
  padding-left: 12px;
}
.pos-corpo .ruolo-stato { flex: none; }
.pos-corpo .ruolo-proposti { flex: 1 1 320px; }
.richiesta-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.richiesta-head .hint { margin-top: 2px; }

/* ------------------------------------------------- revisione AI del profilo
   Prima e dopo affiancati: è l'unico modo di far vedere che cosa cambierebbe
   senza costringere a ricordarsi com'era. La colonna di sinistra è di sola
   lettura e sta su fondo grigio; quella di destra è un campo vero, perché
   correggere una parola prima di accettare è il caso normale. */
.rev-card { padding-top: 12px; }
.rev-scelta {
  display: flex; gap: 9px; align-items: baseline; cursor: pointer;
  padding: 0 0 10px;
}
.rev-scelta input {
  width: 16px; height: 16px; accent-color: var(--accent); margin: 0; flex: none;
}
.rev-scelta .badge { margin-left: 6px; }
.rev-col2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .rev-col2 { grid-template-columns: 1fr; } }
.rev-et {
  font-size: 11.5px; font-weight: 650; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 5px;
}
.rev-et-ai { color: var(--accent-strong); }
.rev-prima {
  background: var(--bg); border: 1px solid var(--grid); border-radius: 8px;
  padding: 9px 11px; font-size: 13.5px; color: var(--ink-2);
}
.rev-prima .tech { font-size: 12px; color: var(--ink-3); }
.rev-col2 input, .rev-col2 textarea {
  padding: 8px 10px; border: 1px solid var(--baseline); border-radius: 8px;
  font: inherit; font-size: 14px; background: #fff; color: var(--ink);
  width: 100%; margin-bottom: 8px;
}
.rev-col2 textarea { resize: vertical; min-height: 86px; }
.rev-col2 input:focus, .rev-col2 textarea:focus {
  outline: 2px solid var(--accent-soft); border-color: var(--accent);
}
/* La barra delle azioni resta a portata di clic anche a metà di una pagina
   lunga: senza, con dodici esperienze si scorre fino in fondo per applicare. */
.rev-azioni {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  position: sticky; bottom: 14px; box-shadow: 0 6px 20px rgba(11, 11, 11, 0.10);
}
.guida-stile {
  white-space: pre-wrap; font: inherit; font-size: 12.5px; color: var(--ink-2);
  background: var(--bg); border-radius: 8px; padding: 10px 12px; margin: 8px 0 0;
}

/* ------------------------------------------------------- protezione dati */
.reg-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.reg-tab th {
  text-align: left; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--ink-3); padding: 6px 8px;
  border-bottom: 1px solid var(--grid);
}
.reg-tab td { padding: 7px 8px; border-bottom: 1px solid var(--grid); vertical-align: top; }
.reg-tab tr:last-child td { border-bottom: none; }
.reg-quando { color: var(--ink-3); white-space: nowrap; }
.reg-anonimo { color: var(--ink-3); font-style: italic; }
/* Filtri rapidi a pastiglia: lo stesso elenco visto da angolazioni diverse.
   Sono link e non un form, così ogni filtro è un indirizzo che si può mandare
   a un collega o tenere fra i preferiti. */
.filtri-rapidi { display: flex; flex-wrap: wrap; gap: 6px; }
.filtri-rapidi .chip { text-decoration: none; }
.filtri-rapidi .chip:hover { background: #fff; border-color: var(--baseline); }
.chip.on {
  background: var(--accent-soft); border-color: transparent;
  color: var(--accent-strong); font-weight: 600;
}

/* ------------------------------------------------------------- trasparenza AI
   I segni dentro il testo uscito verso il modello: verde dove un dato personale
   è stato tolto, azzurro dove al posto dell'identità c'è l'identificativo
   interno, rosso dove la sentinella ha un riscontro da far giudicare. Sono
   <mark> perché sono davvero evidenziazioni, e il colore da solo non basta:
   il bordo distingue l'allarme anche a chi i colori non li separa. */
mark.seg {
  padding: 0 4px; border-radius: 6px; font-weight: 600; font-style: normal;
  background: var(--bg); color: inherit;
}
mark.seg-rimosso { background: var(--ok-bg); color: var(--ok-tx); }
mark.seg-pseudo { background: var(--accent-soft); color: var(--accent-strong); }
mark.seg-allarme {
  background: var(--bad-bg); color: var(--bad-tx);
  outline: 1px solid var(--bad-tx);
}
.seg-legenda { font-size: 12.5px; color: var(--ink-3); margin: 0 0 10px; }
/* nel dettaglio il testo È la pagina: niente riquadro che scorre a parte */
pre.payload.payload-intera { max-height: none; }

/* ---------------------------------------------------------------- lavori
   Il riquadro dei lavori lunghi, in basso a destra su ogni pagina. Un match
   con l'AI dura decine di secondi: senza, chi cambia pagina non sa più né a
   che punto sia né quando finisce. Vuoto non occupa spazio e non intercetta
   il puntatore, così non copre mai un pulsante per niente. */
.lavori {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(360px, calc(100vw - 36px)); pointer-events: none;
}
.lavori:empty { display: none; }
.lavoro {
  pointer-events: auto; background: var(--surface); border-radius: 12px;
  border: 1px solid var(--grid); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
  padding: 11px 13px; font-size: 13px; animation: lavoro-entra 0.18s ease-out;
}
@keyframes lavoro-entra { from { opacity: 0; transform: translateY(8px); } }
.lavoro-testa { display: flex; align-items: baseline; gap: 8px; }
.lavoro-titolo {
  font-weight: 600; color: var(--ink); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lavoro-chiudi {
  border: 0; background: none; cursor: pointer; color: var(--ink-3);
  font-size: 15px; line-height: 1; padding: 0 2px;
}
.lavoro-chiudi:hover { color: var(--ink); }
.lavoro-stato { color: var(--ink-2); margin-top: 3px; }
.lavoro-azioni { display: flex; gap: 10px; margin-top: 8px; align-items: center; }
.lavoro-azioni a { font-weight: 600; }
.lavoro-annulla {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--ink-3); font-size: 12.5px; text-decoration: underline;
}
.lavoro-annulla:hover { color: var(--bad-tx); }
/* La barra è indeterminata finché non si sa quante letture saranno: meglio un
   movimento onesto che una percentuale inventata. */
.lavoro-barra {
  height: 4px; border-radius: 99px; background: var(--grid);
  margin-top: 8px; overflow: hidden;
}
.lavoro-barra i { display: block; height: 100%; background: var(--accent-strong); }
.lavoro-barra.indeterminata i { width: 35%; animation: lavoro-scorre 1.1s ease-in-out infinite; }
@keyframes lavoro-scorre {
  from { transform: translateX(-100%); } to { transform: translateX(300%); }
}
/* La riga di una ricerca ancora in corso, nell'elenco delle proprie */
.reg-tab tr.riga-in-corso td { background: var(--accent-soft); }
/* La scheda appena diventata «pronta» si fa notare una volta sola: chi torna
   dopo dieci minuti la trova ferma, non lampeggiante. */
.lavoro.pronto { animation: lavoro-pronto 1.4s ease-out 2; }
@keyframes lavoro-pronto {
  0%, 100% { box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14); }
  50% { box-shadow: 0 0 0 4px var(--ok-bg), 0 8px 26px rgba(0, 0, 0, 0.14); }
}
/* La vista grande dello stesso lavoro, sulla pagina del match */
.lavoro-attesa .lavoro-fase { color: var(--ink-2); margin: 6px 0 0; }
.lavoro-attesa .lavoro-barra { margin-top: 10px; }
.lavoro-attesa .actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lavoro-attesa .actions form { margin: 0; }
.lavoro-attesa.fallito, .lavoro-attesa.interrotto { border-color: var(--bad-tx); }
.lavoro.pronto { border-color: var(--ok-tx); }
.lavoro.fallito, .lavoro.interrotto { border-color: var(--bad-tx); }