/* ═══════════════════════════════════════════════════════════════════
   jobsearch — foglio di stile unico per tutte le pagine.

   La tesi: il sistema setaccia ~16.000 annunci al giorno per farne
   sopravvivere una manciata. L'interfaccia rende visibile quell'imbuto e
   dà spazio ai sopravvissuti, perché sono pochi e ognuno merita uno
   sguardo.

   L'audacia è spesa in un punto solo: l'ARANCIO SEGNALE, il pennarello
   con cui si cerchia un annuncio sul giornale. Tutto il resto tace —
   inchiostro freddo e carta ossea — perché l'arancio possa farsi sentire.

   Tre stati di tema: chiaro, scuro di sistema, scuro scelto.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ground & ink */
  --inchiostro:#12161c;
  --inchiostro-2:#434c59;
  --inchiostro-3:#7d8695;
  --carta:#f2f2ef;
  --carta-alta:#ffffff;
  --carta-bassa:#e7e7e3;
  --filo:#d8d8d3;
  --filo-forte:#bcbcb5;

  /* l'unico colore che alza la voce */
  --segnale:#e8491f;
  --segnale-velo:#fdeee9;
  --su-segnale:#ffffff;

  /* stato della candidatura — semantico, separato dall'accento */
  --vivo:#1c6b4e;      --vivo-velo:#e5f0eb;
  --spento:#7d8695;    --spento-velo:#ebebe8;

  /* scala del giudizio */
  --g3:#1c6b4e; --g2:#67883c; --g1:#b07d28; --g0:#a2432a;
  --g3-velo:#e5f0eb; --g2-velo:#eef1e4; --g1-velo:#f7efdd; --g0-velo:#f8e9e4;

  --errore:#a2432a; --errore-velo:#f8e9e4;

  --ombra:0 1px 2px rgba(18,22,28,.05), 0 6px 22px rgba(18,22,28,.06);
  --ombra-alta:0 2px 6px rgba(18,22,28,.08), 0 18px 48px rgba(18,22,28,.10);
  --raggio:4px;          /* spigoli quasi vivi: è uno strumento, non un giocattolo */
  --raggio-largo:10px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --inchiostro:#eceef1; --inchiostro-2:#9aa4b3; --inchiostro-3:#6b7480;
    --carta:#0e1116; --carta-alta:#171c24; --carta-bassa:#0a0d11;
    --filo:#262d37; --filo-forte:#39424f;
    --segnale:#ff6a3d; --segnale-velo:#2a1610; --su-segnale:#14181e;
    --vivo:#4dbc92;  --vivo-velo:#12251e;
    --spento:#6b7480; --spento-velo:#161b21;
    --g3:#4dbc92; --g2:#9dbf68; --g1:#d6a95c; --g0:#d08064;
    --g3-velo:#12251e; --g2-velo:#1b2416; --g1-velo:#282115; --g0-velo:#281713;
    --errore:#d08064; --errore-velo:#281713;
    --ombra:0 1px 2px rgba(0,0,0,.5), 0 6px 24px rgba(0,0,0,.4);
    --ombra-alta:0 2px 8px rgba(0,0,0,.55), 0 20px 50px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --inchiostro:#eceef1; --inchiostro-2:#9aa4b3; --inchiostro-3:#6b7480;
  --carta:#0e1116; --carta-alta:#171c24; --carta-bassa:#0a0d11;
  --filo:#262d37; --filo-forte:#39424f;
  --segnale:#ff6a3d; --segnale-velo:#2a1610; --su-segnale:#14181e;
  --vivo:#4dbc92;  --vivo-velo:#12251e;
  --spento:#6b7480; --spento-velo:#161b21;
  --g3:#4dbc92; --g2:#9dbf68; --g1:#d6a95c; --g0:#d08064;
  --g3-velo:#12251e; --g2-velo:#1b2416; --g1-velo:#282115; --g0-velo:#281713;
  --errore:#d08064; --errore-velo:#281713;
  --ombra:0 1px 2px rgba(0,0,0,.5), 0 6px 24px rgba(0,0,0,.4);
  --ombra-alta:0 2px 8px rgba(0,0,0,.55), 0 20px 50px rgba(0,0,0,.45);
}

/* ── fondamenta ─────────────────────────────────────────────────── */
*{box-sizing:border-box}

/* Il browser nasconde gli elementi [hidden] con una regola sua, che pero'
   perde contro qualunque `display` d'autore: .finito e .scia hanno
   display:flex e restavano visibili anche marcati hidden. Va dichiarato
   esplicitamente, altrimenti il riquadro "Fatto." compare a zero giudizi. */
[hidden]{display:none !important}
html{color-scheme:light dark}
body{
  margin:0; background:var(--carta); color:var(--inchiostro);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.guscio{max-width:880px; margin:0 auto; padding:0 20px 96px; display:flex; flex-direction:column; gap:30px}
.guscio.stretto{max-width:400px; padding-top:0}
.colonna{display:flex; flex-direction:column; gap:14px}
.riga{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.spinge{margin-left:auto}

/* ── testata di marca ───────────────────────────────────────────── */
.marca{
  display:flex; align-items:center; gap:10px;
  padding:22px 0 20px; border-bottom:1px solid var(--filo);
  margin-bottom:4px;
}
.marca .bollo{
  width:11px; height:11px; background:var(--segnale); flex:none;
  /* il pennarello: un segno, non un logo */
}
.marca .nome{
  font-family:Archivo,sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase;
}
.marca .nome em{font-style:normal; color:var(--inchiostro-3)}
.marca nav{margin-left:auto; display:flex; gap:18px; align-items:center}
.marca nav a, .marca nav button{
  font:inherit; font-size:13px; font-weight:500; color:var(--inchiostro-2);
  background:none; border:none; padding:0; cursor:pointer; text-decoration:none;
  border-bottom:1.5px solid transparent; padding-bottom:2px;
}
.marca nav a:hover, .marca nav button:hover{color:var(--inchiostro)}
.marca nav a[aria-current="page"]{color:var(--inchiostro); border-bottom-color:var(--segnale)}

/* ── titoli ─────────────────────────────────────────────────────── */
h1{
  font-family:Archivo,sans-serif; font-weight:700;
  font-size:clamp(30px,4.4vw,44px); line-height:1.04;
  letter-spacing:-.025em; margin:0; text-wrap:balance;
  font-stretch:expanded;
}
h2{font-family:Archivo,sans-serif; font-weight:600; font-size:19px; letter-spacing:-.01em; margin:0}
.occhiello{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--segnale);
}
.occhiello.muto{color:var(--inchiostro-3)}
.chiosa{margin:0; color:var(--inchiostro-2); max-width:64ch}

/* ── L'IMBUTO: la dichiarazione tipografica di apertura ─────────── */
.imbuto{
  display:grid; grid-template-columns:repeat(3,auto); gap:8px 34px;
  align-items:end; padding:6px 0 2px;
}
@media (max-width:560px){.imbuto{grid-template-columns:repeat(3,1fr); gap:6px 14px}}
.imbuto .cifra{
  font-family:Archivo,sans-serif; font-weight:700; font-stretch:expanded;
  font-size:clamp(34px,7vw,64px); line-height:.92; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums; color:var(--inchiostro-3);
}
.imbuto .passo:last-child .cifra{color:var(--segnale)}
.imbuto .voce{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; color:var(--inchiostro-3); margin-top:6px;
}
.imbuto .passo{position:relative}
.imbuto .passo + .passo::before{
  content:""; position:absolute; left:-20px; top:38%;
  width:9px; height:1.5px; background:var(--filo-forte);
}
@media (max-width:560px){.imbuto .passo + .passo::before{display:none}}

/* ── annunci ────────────────────────────────────────────────────── */
.elenco{display:flex; flex-direction:column}
.annuncio{
  display:flex; gap:16px; align-items:flex-start;
  padding:18px 18px 18px 16px; border-top:1px solid var(--filo);
  background:var(--carta-alta);
  border-left:3px solid transparent;
}
.elenco .annuncio:last-child{border-bottom:1px solid var(--filo)}
.annuncio.nuovo{border-left-color:var(--segnale)}
.annuncio .corpo{min-width:0; flex:1; display:flex; flex-direction:column; gap:4px}
.annuncio .titolo{
  font-family:Newsreader,Georgia,serif; font-weight:600;
  font-size:19px; line-height:1.25; letter-spacing:-.005em;
  text-decoration:none; text-wrap:balance;
}
.annuncio .titolo:hover{text-decoration:underline; text-decoration-color:var(--segnale); text-underline-offset:3px}
.annuncio .meta{
  display:flex; gap:9px; flex-wrap:wrap; align-items:center;
  font-size:12.5px; color:var(--inchiostro-2);
}
.annuncio .meta .sep{color:var(--filo-forte)}
.annuncio .azioni{display:flex; gap:6px; flex:none; padding-top:2px}
@media (max-width:640px){
  .annuncio{flex-direction:column; gap:10px}
  .annuncio .azioni{padding-top:0}
}

.marchio{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:2px 7px; border-radius:2px; background:var(--segnale); color:var(--su-segnale);
}
.canale{
  font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--inchiostro-3);
}

/* ── stato candidatura ──────────────────────────────────────────── */
.stato{
  font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  padding:5px 11px; border-radius:2px; white-space:nowrap;
  border:1px solid var(--filo-forte); background:var(--carta-alta); color:var(--inchiostro-2);
}
.stato:hover{border-color:var(--inchiostro-3); color:var(--inchiostro)}
.stato:focus-visible{outline:2px solid var(--segnale); outline-offset:2px}
.stato[aria-pressed="true"].candidato{background:var(--vivo-velo); border-color:var(--vivo); color:var(--vivo)}
.stato[aria-pressed="true"].archiviato{background:var(--spento-velo); border-color:var(--spento); color:var(--spento)}
.annuncio.archiviato{opacity:.52}
.annuncio.archiviato .titolo{text-decoration:line-through; text-decoration-color:var(--filo-forte)}

/* ── filtri ─────────────────────────────────────────────────────── */
.filtri{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.filtro{
  font:inherit; font-size:13px; font-weight:500; cursor:pointer;
  padding:6px 13px; border-radius:2px; border:1px solid var(--filo);
  background:var(--carta-alta); color:var(--inchiostro-2);
}
.filtro[aria-pressed="true"]{background:var(--inchiostro); border-color:var(--inchiostro); color:var(--carta)}
.filtro .conta{font-variant-numeric:tabular-nums; opacity:.65; margin-left:6px}

/* ── moduli ─────────────────────────────────────────────────────── */
form.modulo{display:flex; flex-direction:column; gap:15px}
.campo{display:flex; flex-direction:column; gap:6px}
.campo label{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--inchiostro-3)}
input[type=text],input[type=password],textarea{
  font:inherit; padding:11px 13px; border-radius:var(--raggio);
  border:1px solid var(--filo-forte); background:var(--carta-alta); color:var(--inchiostro);
}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--segnale); outline-offset:-1px; border-color:var(--segnale)}
button.principale{
  font:inherit; font-weight:700; font-size:14px; letter-spacing:.03em; cursor:pointer;
  padding:12px 18px; border:none; border-radius:var(--raggio);
  background:var(--segnale); color:var(--su-segnale);
}
button.principale:hover{filter:brightness(1.07)}
button.principale:focus-visible{outline:2px solid var(--inchiostro); outline-offset:2px}
button.discreto{
  font:inherit; font-size:13px; cursor:pointer; background:none; border:none;
  color:var(--inchiostro-2); text-decoration:underline; text-underline-offset:2px; padding:2px 3px;
}
button.discreto:hover{color:var(--segnale)}

/* ── avvisi ─────────────────────────────────────────────────────── */
.errore{background:var(--errore-velo); border-left:3px solid var(--errore);
  color:var(--inchiostro); padding:12px 15px; font-size:13.5px; border-radius:0 var(--raggio) var(--raggio) 0}
.nota{background:var(--carta-bassa); border-left:3px solid var(--filo-forte);
  padding:12px 15px; font-size:13.5px; color:var(--inchiostro-2); border-radius:0 var(--raggio) var(--raggio) 0}
.aiuto{font-size:12.5px; color:var(--inchiostro-3); margin:0}
.aiuto kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  background:var(--carta-bassa); border:1px solid var(--filo); border-radius:3px; padding:1px 5px}
.vuoto{
  padding:46px 24px; text-align:center; color:var(--inchiostro-3);
  border:1px dashed var(--filo-forte); border-radius:var(--raggio-largo);
}
.vuoto strong{display:block; font-family:Newsreader,Georgia,serif; font-size:20px;
  color:var(--inchiostro-2); font-weight:600; margin-bottom:5px}

/* ── pagina di giudizio ─────────────────────────────────────────── */
.avanzamento{display:flex; flex-direction:column; gap:8px}
.avanzamento .righe{display:flex; justify-content:space-between; align-items:baseline;
  font-size:12.5px; color:var(--inchiostro-2)}
.avanzamento b{font-variant-numeric:tabular-nums; color:var(--inchiostro); font-weight:700}
.traccia{height:3px; background:var(--carta-bassa); overflow:hidden}
.riempimento{height:100%; background:var(--segnale); transition:width .3s ease}

.spec{background:var(--carta-alta); border:1px solid var(--filo);
  border-left:3px solid var(--segnale); padding:15px 18px; border-radius:0 var(--raggio) var(--raggio) 0}
.spec .testo{font-family:Newsreader,Georgia,serif; font-size:17.5px; line-height:1.4; margin-top:5px}

.scheda{
  background:var(--carta-alta); border:1px solid var(--filo);
  box-shadow:var(--ombra-alta); border-radius:var(--raggio-largo);
  padding:34px 30px; display:flex; flex-direction:column; gap:11px;
  min-height:180px; justify-content:center;
}
.numero{font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--inchiostro-3); font-weight:700; font-variant-numeric:tabular-nums}
.titolo-annuncio{font-family:Newsreader,Georgia,serif; font-weight:600; font-size:27px;
  line-height:1.22; margin:0; text-wrap:balance}
.azienda{color:var(--inchiostro-2); font-size:14.5px}
.azienda:empty::before{content:"azienda non indicata"; color:var(--inchiostro-3); font-style:italic}

.giudizi{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
@media (max-width:620px){.giudizi{grid-template-columns:repeat(2,1fr)}}
.giudizio{
  font:inherit; cursor:pointer; text-align:left;
  border:1px solid var(--filo-forte); border-radius:var(--raggio);
  background:var(--carta-alta); color:var(--inchiostro);
  padding:13px 14px; display:flex; flex-direction:column; gap:4px;
  transition:transform .08s ease, border-color .12s ease;
}
.giudizio:hover{border-color:var(--tinta)}
.giudizio:active{transform:translateY(1px)}
.giudizio:focus-visible{outline:2px solid var(--segnale); outline-offset:2px}
.giudizio .tasto{font-size:10.5px; font-weight:700; letter-spacing:.1em; color:var(--tinta)}
.giudizio .nome{font-weight:600; font-size:14.5px; color:var(--tinta)}
.g-3{--tinta:var(--g3)} .g-2{--tinta:var(--g2)} .g-1{--tinta:var(--g1)} .g-0{--tinta:var(--g0)}

.scia{display:flex; flex-direction:column; gap:5px}
.riga-scia{display:flex; align-items:center; gap:11px; font-size:13px;
  padding:8px 12px; background:var(--carta-bassa); border-radius:var(--raggio)}
.pastiglia{flex:none; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  padding:3px 8px; border-radius:2px; background:var(--velo); color:var(--tinta); white-space:nowrap}
.riga-scia .t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--inchiostro-2)}
.p-3{--tinta:var(--g3); --velo:var(--g3-velo)}
.p-2{--tinta:var(--g2); --velo:var(--g2-velo)}
.p-1{--tinta:var(--g1); --velo:var(--g1-velo)}
.p-0{--tinta:var(--g0); --velo:var(--g0-velo)}

.finito{background:var(--carta-alta); border:1px solid var(--filo); border-left:3px solid var(--g3);
  padding:24px 26px; display:flex; flex-direction:column; gap:6px; border-radius:0 var(--raggio) var(--raggio) 0}
.finito strong{font-family:Newsreader,Georgia,serif; font-size:21px; font-weight:600; color:var(--g3)}

@media (prefers-reduced-motion:reduce){
  .riempimento,.giudizio{transition:none}
}

/* ── LE CORSIE: le due cose che si possono fare qui ──────────────────
   La home non è solo un cruscotto: deve dire da dove si comincia. Due
   corsie, ciascuna col proprio stato reale, e quella che chiede attenzione
   porta il segno arancio. */
.corsie{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:680px){.corsie{grid-template-columns:1fr}}
.corsia{
  display:flex; flex-direction:column; gap:7px;
  padding:22px 22px 20px; text-decoration:none;
  background:var(--carta-alta); border:1px solid var(--filo);
  border-top:3px solid var(--filo-forte);
  border-radius:0 0 var(--raggio) var(--raggio);
  transition:border-color .14s ease, transform .1s ease;
}
.corsia:hover{border-color:var(--filo-forte); transform:translateY(-1px)}
.corsia:focus-visible{outline:2px solid var(--segnale); outline-offset:2px}
.corsia.chiama{border-top-color:var(--segnale)}
.corsia .conto{
  font-family:Archivo,sans-serif; font-weight:700; font-stretch:expanded;
  font-size:38px; line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; color:var(--inchiostro);
}
.corsia.chiama .conto{color:var(--segnale)}
.corsia .conto small{font-size:17px; font-weight:600; color:var(--inchiostro-3); letter-spacing:0}
.corsia .che{font-weight:600; font-size:15.5px}
.corsia .perche{font-size:13px; color:var(--inchiostro-2); line-height:1.45}
.corsia .vai{
  margin-top:4px; font-size:12.5px; font-weight:600; color:var(--segnale);
  display:flex; align-items:center; gap:5px;
}
.corsia .vai::after{content:"→"}
.corsia.fatta .vai{color:var(--inchiostro-3)}

/* ── barra di sezione ── */
.sezione{display:flex; align-items:baseline; gap:12px; border-bottom:1px solid var(--filo); padding-bottom:9px}
.sezione .spinge{font-size:12.5px; color:var(--inchiostro-2)}
.sezione .spinge a{color:var(--segnale); font-weight:600; text-decoration:none}
.sezione .spinge a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.corsia{transition:none}}