/* progetti.tielogic.xyz — palette e font del marchio Tielogic
   (AI-OS context/azienda/brand.md; font Jost come il sito tielogic.xyz).
   ⚠️ Il teal pieno #1FA898 NON si usa per testo o bordi su chiaro (contrasto
   2,95): su chiaro l'accento è #178074, su scuro #7FD6CB. Il teal pieno resta
   il punto del simbolo, e basta. */

@font-face { font-family: "Jost"; font-weight: 400; font-display: swap; src: url("jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-display: swap; src: url("jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 600; font-display: swap; src: url("jost-latin-600-normal.woff2") format("woff2"); }

:root {
  --petrolio: #14505C;
  --inchiostro: #262B2E;
  --accento: #178074;
  --punto: #1FA898;
  --fondo: #F7F8F8;
  --bordo-campo: #7D8B8F;
  --carta: #FFFFFF;
  --linea: #CFD9DA;
  --tenue: #56636A;
  --attesa: #8A5A00;
  --errore: #A8261B;
  --errore-fondo: #FBEDEB;
  --barra: #14505C;
  --barra-testo: #FFFFFF;
  --barra-tenue: #B9D6D9;
  --giunto: #FFFFFF;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --petrolio: #9CCBD2;
    --inchiostro: #E3EBEC;
    --accento: #7FD6CB;
    --fondo: #0F1B1E;
    --bordo-campo: #7A9194;
    --carta: #152429;
    --linea: #29403F;
    --tenue: #9DB0B3;
    --attesa: #E2B04F;
    --errore: #F08A7E;
    --errore-fondo: #3A1F1C;
    --barra: #0B3C45;
    --barra-testo: #EAF4F4;
    --barra-tenue: #8FB9BE;
    --giunto: #0B3C45;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--inchiostro);
  font: 400 15px/1.5 "Jost", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accento); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; border-radius: 3px; }
/* ⚠️ l'accento sul petrolio fa 1,88: sulla barra e all'ingresso il focus è chiaro */
.barra :focus-visible, .pagina-entra :focus-visible { outline-color: var(--barra-testo); }
code { font-family: ui-monospace, "DejaVu Sans Mono", monospace; font-size: .86em; overflow-wrap: anywhere; }
.tenue { color: var(--tenue); }
.nascosto-vista { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[hidden] { display: none !important; }

/* ---------- barra ---------- */
.barra { background: var(--barra); color: var(--barra-testo); }
.barra-riga, .schede, main { max-width: 1080px; margin: 0 auto; }
.barra-riga { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 4px; }
.marchio { display: inline-flex; align-items: center; gap: 10px; color: var(--barra-testo); text-decoration: none; font-size: 22px; font-weight: 500; letter-spacing: .01em; }
.simbolo { width: 30px; height: 30px; color: var(--barra-testo); }
.simbolo .giunto, .simbolo-grande .giunto { fill: var(--giunto); }
.simbolo .punto, .simbolo-grande .punto { fill: var(--punto); }
.schede { display: flex; flex-wrap: wrap; column-gap: 20px; padding: 0 16px; }
.schede a { color: var(--barra-tenue); text-decoration: none; padding: 10px 0 9px; white-space: nowrap; border-bottom: 3px solid transparent; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.schede a:hover { color: var(--barra-testo); }
.schede a[aria-current] { color: var(--barra-testo); border-bottom-color: var(--punto); }
.esci { margin: 0; }
.barra .bottone-quieto { color: var(--barra-testo); border-color: var(--barra-tenue); }

/* ---------- bottoni e campi ---------- */
.bottone, .bottone-quieto {
  font: inherit; font-weight: 500; border-radius: 6px; padding: 7px 14px; cursor: pointer;
  border: 1.5px solid var(--accento); min-height: 44px;
}
.bottone { background: var(--accento); color: var(--carta); }
.bottone-quieto { background: transparent; color: var(--accento); }
.bottone:hover { filter: brightness(1.08); }
input[type=search], input[type=text], select, textarea {
  font: inherit; color: var(--inchiostro); background: var(--carta);
  border: 1.5px solid var(--bordo-campo); border-radius: 6px; padding: 7px 10px; min-height: 44px;
}
textarea { width: 100%; resize: vertical; }

main { padding: 8px 16px 64px; }
.avviso { margin: 12px 0; padding: 8px 16px; border-left: 4px solid var(--attesa); color: var(--inchiostro); background: var(--carta); }
.avviso-errore { border-left-color: var(--errore); background: var(--errore-fondo); }
.vuoto { color: var(--tenue); padding: 12px 0; }
.esito { margin: 16px 0; padding: 8px 14px; border-left: 4px solid var(--accento); background: var(--carta); }

/* ---------- elenco ---------- */
.filtri { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 16px 0 4px; }
.cerca { flex: 1 1 280px; }
.cerca input { width: 100%; }
.stati { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; min-height: 44px; border: 1.5px solid var(--bordo-campo); border-radius: 999px; cursor: pointer; background: var(--carta); user-select: none; }
.chip:has(input:checked) { border-color: var(--accento); }
.chip input { accent-color: var(--accento); margin: 0; }

.gruppo h2 { font-size: 19px; font-weight: 600; color: var(--petrolio); margin: 26px 0 8px; }
.gruppo h2 a { color: inherit; text-decoration: none; }
.gruppo h2 a:hover { text-decoration: underline; }
.conta { font-size: 13px; font-weight: 500; color: var(--tenue); margin-left: 4px; }

.registro { list-style: none; margin: 0; padding: 0; background: var(--carta); border: 1px solid var(--linea); border-radius: 8px; }
.voce {
  position: relative;
  display: grid; grid-template-columns: 64px 1fr auto auto; gap: 4px 18px; align-items: baseline;
  padding: 12px 16px; border-top: 1px solid var(--linea);
}
.voce:first-child { border-top: 0; }
.sigla { font-weight: 600; color: var(--petrolio); text-decoration: none; font-size: 15px; letter-spacing: .02em; }
.nome { font-weight: 500; color: var(--inchiostro); text-decoration: none; font-size: 16px; }
.nome:hover, .sigla:hover { text-decoration: underline; }
/* tutta la riga porta al progetto: su telefono i due link da soli erano alti 22px */
.nome::after { content: ""; position: absolute; inset: 0; }
.voce:hover { background: var(--fondo); }
.descrizione { margin: 2px 0 0; color: var(--tenue); max-width: 72ch; }
.soggetto { margin: 2px 0 0; font-size: 13px; color: var(--tenue); }
.stato { font-size: 13px; font-weight: 500; white-space: nowrap; }
.stato-attivo .stato { color: var(--accento); }
.stato-in_attesa .stato { color: var(--attesa); }
.stato-sospeso .stato, .stato-chiuso .stato, .stato-nd .stato { color: var(--tenue); }
.stato-chiuso .nome { color: var(--tenue); }
.issue-conta { font-size: 14px; white-space: nowrap; text-align: right; min-width: 86px; }
.issue-conta strong { font-weight: 600; color: var(--inchiostro); }

/* ---------- progetto ---------- */
.testata-progetto { display: flex; gap: 18px; align-items: flex-start; padding: 26px 0 10px; }
.sigla-grande {
  margin: 0; font-size: 44px; line-height: 1; font-weight: 600; color: var(--petrolio);
  letter-spacing: .01em; padding-right: 18px; border-right: 3px solid var(--accento);
}
.testata-progetto h1 { font-size: 26px; line-height: 1.2; font-weight: 500; margin: 2px 0 4px; }
/* niente righe fra le celle: con celle in numero dispari una riga per cella restava a metà */
.dati { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 12px 0 0; background: var(--carta); border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; }
.dati { padding: 6px 0; }
.dati div { padding: 6px 14px; }
.dati .stato { font-size: inherit; }
.dati dt { font-size: 12.5px; color: var(--tenue); }
.dati dd { margin: 2px 0 0; }

.blocco { margin-top: 30px; }
.titolo-blocco { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; border-bottom: 2px solid var(--petrolio); padding-bottom: 6px; margin-bottom: 4px; }
.titolo-blocco h2, .titolo-blocco h1 { margin: 0; font-size: 20px; font-weight: 600; color: var(--petrolio); }
.filtro-issue { display: flex; gap: 4px; }
.filtro-issue a { text-decoration: none; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; color: var(--inchiostro); }
.filtro-issue a[aria-current] { background: var(--petrolio); color: var(--carta); }
.filtro-issue a[aria-current] .conta { color: inherit; opacity: .8; }

.issue { list-style: none; margin: 0; padding: 0; }
.issue > li { border-bottom: 1px solid var(--linea); padding: 10px 0; }
.riga-issue { display: grid; grid-template-columns: 56px 1fr; gap: 12px; }
.numero { color: var(--tenue); font-weight: 500; text-align: right; }
.titolo-issue { font-weight: 500; color: var(--inchiostro); text-decoration: none; }
.titolo-issue:hover { text-decoration: underline; }
.chiusa .titolo-issue { color: var(--tenue); }
.segno-chiusa { font-size: 12px; font-weight: 500; color: var(--tenue); border: 1px solid var(--bordo-campo); border-radius: 4px; padding: 0 6px; margin-right: 6px; }
.meta { margin: 2px 0 0; font-size: 13px; color: var(--tenue); display: flex; flex-wrap: wrap; gap: 2px 14px; }
.in-mano { color: var(--attesa); font-weight: 500; }
.in-coda { color: var(--accento); font-weight: 500; }
.etichette { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.etichette span { font-size: 12px; padding: 0 7px; border: 1px solid var(--linea); border-radius: 4px; color: var(--tenue); }
.azioni { margin: 6px 0 0 68px; }
.azioni summary { cursor: pointer; color: var(--accento); font-size: 14px; font-weight: 500; width: max-content; min-height: 44px; display: flex; align-items: center; }
.azioni[open] { background: var(--carta); border: 1px solid var(--linea); border-radius: 8px; padding: 8px 14px 12px; }
.azione-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 0; }
.azione-nota { display: grid; gap: 6px; margin: 14px 0 0; max-width: 640px; }
.azione-nota button { justify-self: start; }
.azioni label { font-size: 14px; }

.disco summary, .sezione-scheda summary, .notte > summary { cursor: pointer; padding: 10px 0; min-height: 44px; font-weight: 500; }
.disco table { width: 100%; border-collapse: collapse; background: var(--carta); font-size: 14px; }
.disco th { text-align: left; font-weight: 500; color: var(--tenue); padding: 6px 10px; border-bottom: 1px solid var(--linea); }
.disco td { padding: 5px 10px; border-bottom: 1px solid var(--linea); overflow-wrap: anywhere; }
.disco .num { text-align: right; white-space: nowrap; }
.disco .data { white-space: nowrap; color: var(--tenue); }

.scheda h3 { font-size: 17px; font-weight: 600; color: var(--petrolio); margin: 22px 0 4px; }
.md { max-width: 78ch; overflow-x: auto; }
.md table { border-collapse: collapse; margin: 10px 0; }
.md th, .md td { border: 1px solid var(--linea); padding: 4px 8px; text-align: left; vertical-align: top; }
.md th { background: var(--carta); font-weight: 500; }
.md pre { overflow-x: auto; background: var(--carta); padding: 10px; border-radius: 6px; }
.md blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--linea); color: var(--tenue); }

/* ---------- idee ---------- */
.nota-notte { max-width: 78ch; }
.gamba { font-size: 12px; font-weight: 500; color: var(--tenue); border: 1px solid var(--bordo-campo); border-radius: 4px; padding: 0 6px; display: inline-block; margin-bottom: 4px; }
.idea { background: var(--carta); border: 1px solid var(--linea); border-left: 4px solid var(--linea); border-radius: 8px; padding: 12px 16px; margin: 10px 0; }
.idea.esito-tiene { border-left-color: var(--accento); }
.idea.esito-non-tiene { border-left-color: var(--attesa); }
.idea h3 { margin: 0; font-size: 17px; font-weight: 500; }
.esito-idea { margin: 2px 0 6px; font-size: 13px; font-weight: 500; color: var(--tenue); }
.esito-tiene .esito-idea { color: var(--accento); }
.esito-non-tiene .esito-idea { color: var(--attesa); }
.campi { display: grid; grid-template-columns: 130px 1fr; gap: 4px 14px; margin: 6px 0; }
.campi dt { color: var(--tenue); font-size: 14px; }
.campi dd { margin: 0; max-width: 72ch; }
.idea details summary { cursor: pointer; color: var(--accento); font-weight: 500; padding: 10px 0; }

/* ---------- ingresso ---------- */
.pagina-entra { min-height: 100vh; display: grid; place-items: center; background: var(--barra); color: var(--barra-testo); }
.entra { width: min(360px, 100% - 32px); padding: 0; }
.simbolo-grande { width: 56px; height: 56px; color: var(--barra-testo); }
.entra h1 { font-size: 26px; font-weight: 500; margin: 14px 0 22px; }
.entra form { display: grid; gap: 10px; }
.entra label { color: var(--barra-tenue); }
.entra input {
  font-size: 30px; letter-spacing: .18em; text-align: center; padding: 10px; width: 100%;
  border: 2px solid var(--barra-tenue); background: var(--carta); color: var(--inchiostro);
}
.entra .bottone { background: var(--punto); border-color: var(--punto); color: #0B2A30; font-size: 17px; min-height: 46px; }
.messaggio { margin: 0; padding: 8px 12px; background: var(--errore-fondo); color: var(--errore); border-radius: 6px; }
.nota-entra { margin-top: 18px; font-size: 13.5px; color: var(--barra-tenue); }

/* ---------- telefono ---------- */
@media (max-width: 640px) {
  .voce { grid-template-columns: 52px 1fr; }
  .voce .stato, .voce .issue-conta { grid-column: 2; text-align: left; min-width: 0; }
  .voce .stato { margin-top: 4px; }
  .testata-progetto { flex-direction: column; gap: 6px; }
  .sigla-grande { font-size: 34px; border-right: 0; border-bottom: 3px solid var(--accento); padding: 0 0 6px; }
  .riga-issue { grid-template-columns: 40px 1fr; gap: 8px; }
  .azioni { margin-left: 0; }
  .campi { grid-template-columns: 1fr; gap: 0; }
  .campi dd { margin-bottom: 6px; }
  .disco .data { display: none; }
  .voce .descrizione { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .voce .stato { display: inline; margin-right: 12px; }
  .voce .issue-conta { display: inline; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }