/* ============================================================================
   05 · Dossier — schede da archivio.

   Monospaziato, righe di tabella, filetti sottili e nient'altro. La raccolta non
   è una griglia ma un elenco di fascicoli: numero a tre cifre, titolo troncato,
   stato a destra. Quello che non hai ancora aperto resta oscurato.
   Mockup: blocco #05.
   ========================================================================= */

html[data-theme="dossier"] {
  --bg: #1c1e1b;
  --ink: #e6e8e2;
  --ink-2: #9aa093;
  --ink-3: #6b7266;
  --line: #34382f;
  --surface: transparent;
  --surface-ink: #e6e8e2;

  --accent: #7fd18a;
  --accent-ink: #12200f;
  --ok: transparent;
  --ok-ink: #7fd18a;
  --warn: transparent;
  --warn-ink: #c8a24a;
  --locked: transparent;
  --locked-ink: #6b7266;
  --hint-locked: transparent;

  --lvl-bg: #1c1e1b;
  --lvl-ink: #e6e8e2;
  --right-bg: #1c1e1b;
  --right-ink: #e6e8e2;
  --wrong-bg: #1c1e1b;
  --wrong-ink: #e6e8e2;
  --ask-bg: #1c1e1b;
  --ask-ink: #e6e8e2;
  --full-bg: #1c1e1b;
  --full-ink: #e6e8e2;

  --conf-1: #7fd18a;
  --conf-2: #c8a24a;
  --conf-3: #4a5344;
  --conf-4: #e6e8e2;

  --font: 'Space Mono', ui-monospace, monospace;
  --font-display: 'Space Mono', ui-monospace, monospace;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  --tt-display: uppercase;
  --tt-label: uppercase;
  --ls-display: .02em;
  --ls-label: .14em;
  --w-display: 400;
  --w-label: 400;

  --fs-huge: 33px;
  --fs-title: 27px;
  --fs-lead: 20px;
  --fs-body: 15px;
  --fs-small: 15px;
  --fs-label: 12px;

  --r: 0px;
  --r-lg: 0px;
  --r-pill: 0px;
  --bd: 1px;
  --bd-color: #34382f;
  --shadow: none;

  --pad: 22px;
  --head-top: 26px;
  --gap: 10px;
  --gap-block: 22px;
  --block-pad: 16px;
  --btn-pad: 15px;
  color-scheme: dark;

  /* 20px e 16px invece di 16px e 12px */
  --riddle-lungo: 0.74;
  --riddle-enorme: 0.59;
}

/* --- guscio: filetti, mai riquadri pieni --- */

html[data-theme="dossier"] .head {
  border-bottom: 1px solid #34382f;
  padding-bottom: 18px;
  font-size: 13px;
  letter-spacing: .08em;
}

html[data-theme="dossier"] .app.has-tabs .tabbar { border-top: 1px solid #34382f; padding-bottom: max(4px, var(--safe-tab)); }
html[data-theme="dossier"] .tabbar__item { color: #9aa093; }
html[data-theme="dossier"] .tabbar__item.is-on { background: none; color: #7fd18a; border-top: 2px solid #7fd18a; margin-top: -1px; }

html[data-theme="dossier"] .head__title { font-size: 19px; letter-spacing: .02em; }
html[data-theme="dossier"] .brand__name { font-size: 13px; letter-spacing: .08em; }
html[data-theme="dossier"] .brand__name::after { content: ' / RACCOLTE'; }
html[data-theme="dossier"] .mark i { background: #e6e8e2; }
html[data-theme="dossier"] .mark i:nth-child(2) { background: #7fd18a; }

html[data-theme="dossier"] .head__back { font-size: 13px; letter-spacing: .08em; color: #e6e8e2; }
html[data-theme="dossier"] .head__back[data-racc] span { display: none; }
html[data-theme="dossier"] .head__back[data-racc]::after { content: 'R' attr(data-rn) '/' attr(data-nnn); }

html[data-theme="dossier"] .coins {
  background: none;
  color: #7fd18a;
  padding: 0;
  font-size: 13px;
  letter-spacing: .08em;
}

html[data-theme="dossier"] .coins::before { content: 'CREDITI '; }
html[data-theme="dossier"] .ico--fav[aria-pressed="true"] { color: #c8a24a; }

/* --- home: barra a segmenti e tabella delle raccolte --- */

/* «STATO ......... 38/142 · 27%»: una riga di intestazione, come su una scheda */
html[data-theme="dossier"] .tally {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  row-gap: 14px;
  padding-top: 22px;
}

html[data-theme="dossier"] .tally::before {
  content: 'STATO';
  grid-area: 1 / 1;
  font-size: 12px;
  letter-spacing: .1em;
  color: #9aa093;
}

html[data-theme="dossier"] .tally__n {
  grid-area: 1 / 2;
  justify-self: end;
  font-size: 12px;
  letter-spacing: .1em;
  color: #9aa093;
  line-height: 1.4;
}

html[data-theme="dossier"] .tally__n::after { content: '/' attr(data-tot) ' · ' attr(data-pct) '%'; }
html[data-theme="dossier"] .tally__label { display: none; }
html[data-theme="dossier"] .tally__bar { grid-area: 2 / 1 / 3 / 3; }

/* dieci caselle: il progresso si legge a colpo d'occhio, come una scheda
   perforata. I tagli fra una casella e l'altra sono dipinti sopra, con il colore
   del fondo: così valgono sia sul pieno sia sul vuoto, qualunque sia la quota. */
html[data-theme="dossier"] .tally__bar {
  display: block;
  position: relative;
  height: 26px;
  margin: 0;
  border-radius: 0;
  background: #2a2e27;
}

html[data-theme="dossier"] .tally__bar i { height: 26px; border-radius: 0; background: #7fd18a; }

html[data-theme="dossier"] .tally__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to right, transparent 0 calc(10% - 3px), #1c1e1b calc(10% - 3px) 10%);
}

html[data-theme="dossier"] .resume {
  border: 1px solid #7fd18a;
  border-radius: 0;
  background: none;
  color: #e6e8e2;
  padding: 16px;
  gap: 10px;
}

html[data-theme="dossier"] .resume__where { font-size: 12px; letter-spacing: .14em; color: #7fd18a; }
html[data-theme="dossier"] .resume__where::before { content: 'FASCICOLO APERTO — '; }
html[data-theme="dossier"] .resume__text { font-family: 'Epilogue', sans-serif; font-size: 20px; line-height: 1.4; letter-spacing: 0; text-transform: none; }

html[data-theme="dossier"] .resume__cta {
  background: none;
  color: #e6e8e2;
  border: 1px solid #e6e8e2;
  padding: 10px 18px;
  font-size: 13px;
  letter-spacing: .1em;
}

html[data-theme="dossier"] .colls { grid-template-columns: 1fr; gap: 0; }

html[data-theme="dossier"] .colls::before {
  content: 'RACCOLTA';
  font-size: 12px;
  letter-spacing: .1em;
  color: #9aa093;
  padding-bottom: 10px;
  border-bottom: 1px solid #34382f;
}

html[data-theme="dossier"] .coll {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid #2a2e27;
  border-radius: 0;
  background: none;
  color: #e6e8e2;
  font-size: 15px;
}

html[data-theme="dossier"] .coll:nth-child(5) { grid-column: auto; }
html[data-theme="dossier"] .coll[data-state="locked"] { color: #6b7266; }
html[data-theme="dossier"] .coll__meta { display: contents; }
html[data-theme="dossier"] .coll__name { order: 1; flex: 1; font-size: 15px; letter-spacing: .02em; }
html[data-theme="dossier"] .coll__name::after { content: none; }
html[data-theme="dossier"] .coll__count { order: 2; font-size: 15px; color: #7fd18a; letter-spacing: .02em; }
html[data-theme="dossier"] .coll[data-state="locked"] .coll__count { display: none; }
html[data-theme="dossier"] .coll__state { order: 3; display: none; font-size: 15px; letter-spacing: .02em; }
html[data-theme="dossier"] .coll[data-state="locked"] .coll__state { display: block; }

/* --- raccolta: l'elenco dei fascicoli --- */

html[data-theme="dossier"] .scr__title { display: none; }
html[data-theme="dossier"] .scr__sub { font-size: 12px; letter-spacing: .14em; color: #9aa093; }
html[data-theme="dossier"] .cells { display: flex; flex-direction: column; gap: 0; }

html[data-theme="dossier"] .cell {
  aspect-ratio: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid #2a2e27;
  border-radius: 0;
  background: none;
  color: #e6e8e2;
  font-size: 14px;
  text-align: left;
}

/* il numero a tre cifre: 007, non 7 */
html[data-theme="dossier"] .cell__n { width: 34px; flex: 0 0 auto; font-size: 0; color: #7fd18a; }
html[data-theme="dossier"] .cell__n::after { content: attr(data-nnn); font-size: 14px; }
html[data-theme="dossier"] .cell__title {
  display: block;
  flex: 1;
  min-width: 0;
  font-family: 'Epilogue', sans-serif;
  font-size: 15px;
  color: #c9cec3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* numero, titolo, stato: in quest'ordine anche quando il titolo è oscurato */
html[data-theme="dossier"] .cell__n { order: 0; }
html[data-theme="dossier"] .cell__title { order: 1; }
html[data-theme="dossier"] .cell__fav { order: 2; }
html[data-theme="dossier"] .cell::after { order: 3; font-size: 12px; flex: 0 0 auto; }
html[data-theme="dossier"] .cell[data-state="locked"]::before { order: 1; }
html[data-theme="dossier"] .cell[data-state="solved"]::after { content: 'FATTO'; color: #7fd18a; }
html[data-theme="dossier"] .cell[data-state="skipped"]::after { content: 'SALTATO'; color: #c8a24a; }
html[data-theme="dossier"] .cell[data-state="skipped"] .cell__n { color: #c8a24a; }
html[data-theme="dossier"] .cell[data-state="open"]::after { content: 'DA FARE'; color: #9aa093; }

html[data-theme="dossier"] .cell[data-state="current"] {
  grid-column: auto;
  background: rgba(127, 209, 138, .07);
  border-bottom: 1px solid #7fd18a;
  margin: 0 -22px;
  padding-left: 22px;
  padding-right: 22px;
  font-size: 14px;
}

html[data-theme="dossier"] .cell[data-state="current"]::after { content: '▸ ORA'; color: #7fd18a; }
html[data-theme="dossier"] .cell[data-state="current"] .cell__title { color: #e6e8e2; }

/* di un fascicolo ancora chiuso non si legge il titolo */
html[data-theme="dossier"] .cell[data-state="locked"] { opacity: .38; }
html[data-theme="dossier"] .cell[data-state="locked"]::before {
  content: '▒▒▒▒▒ ▒▒▒▒▒▒▒';
  flex: 1;
  font-family: 'Epilogue', sans-serif;
  font-size: 15px;
}

html[data-theme="dossier"] .cell[data-state="locked"]::after { content: 'BLOCCATO'; }
html[data-theme="dossier"] .cell[data-state="locked"] .cell__n { color: #e6e8e2; }
html[data-theme="dossier"] .cell__fav { position: static; }
html[data-theme="dossier"] .cell__fav::before { content: '★'; color: #c8a24a; }

/* --- enigma --- */

html[data-theme="dossier"] .riddle__meta { font-size: 12px; letter-spacing: .12em; color: #9aa093; }
html[data-theme="dossier"] .riddle__text { font-family: 'Epilogue', sans-serif; font-weight: 500; line-height: 1.35; letter-spacing: 0; text-transform: none; }

html[data-theme="dossier"] .hints { gap: 0; }

html[data-theme="dossier"] .hint {
  background: none;
  color: #e6e8e2;
  border: 0;
  border-bottom: 1px solid #2a2e27;
  border-radius: 0;
  padding: 14px 0;
  gap: 6px;
}

html[data-theme="dossier"] .hint__label { font-size: 12px; color: #7fd18a; letter-spacing: .1em; }
html[data-theme="dossier"] .hint[data-state="locked"] .hint__label { color: #9aa093; }
html[data-theme="dossier"] .hint[data-state="locked"] .hint__label::after { content: ' · ▒▒▒▒▒▒▒▒▒▒'; }
html[data-theme="dossier"] .hint__text { font-family: 'Epilogue', sans-serif; font-size: 15px; line-height: 1.5; color: #c9cec3; }
html[data-theme="dossier"] .hint__cost { border: 1px solid #4a5344; padding: 6px 11px; font-size: 12px; }
html[data-theme="dossier"] .option { background: none; border: 1px solid #4a5344; font-family: 'Epilogue', sans-serif; }

html[data-theme="dossier"] .app[data-scr="livello"] .scr__foot {
  border-top: 1px solid #34382f;
  padding: 16px 22px max(24px, var(--safe-b));
  gap: 10px;
}

html[data-theme="dossier"] .answer { border: 0; gap: 10px; }

html[data-theme="dossier"] .answer__input {
  background: none;
  border: 1px solid #4a5344;
  padding: 15px;
  font-size: 15px;
  color: #e6e8e2;
}

html[data-theme="dossier"] .answer__input::placeholder { color: #9aa093; }
html[data-theme="dossier"] .answer__send { width: 58px; background: #7fd18a; color: #12200f; font-size: 18px; font-weight: 700; }
html[data-theme="dossier"] .answer__send::before { content: '⏎'; }
html[data-theme="dossier"] .skip { background: none; color: #e6e8e2; font-size: 12px; letter-spacing: .12em; padding: 0; }

/* --- esiti e schede: solo cornici --- */

html[data-theme="dossier"] .verdict { gap: 10px; padding-top: 22px; }
html[data-theme="dossier"] .verdict__word { font-size: 33px; letter-spacing: .02em; line-height: 1.12; color: #e6e8e2; }
html[data-theme="dossier"] .verdict__word::before { content: 'ESITO: '; }
html[data-theme="dossier"] .verdict__line { order: -1; font-size: 12px; letter-spacing: .14em; color: #9aa093; }

html[data-theme="dossier"] .reward,
html[data-theme="dossier"] .solution { border: 1px solid #7fd18a; background: none; color: #e6e8e2; padding: 16px; border-radius: 0; }

html[data-theme="dossier"] .why,
html[data-theme="dossier"] .unlocked,
html[data-theme="dossier"] .app[data-scr="sbagliato"] .reward,
html[data-theme="dossier"] .app[data-scr="salto"] .reward { border: 1px solid #34382f; background: none; color: #e6e8e2; padding: 16px; border-radius: 0; }

html[data-theme="dossier"] .reward__label,
html[data-theme="dossier"] .why__label,
html[data-theme="dossier"] .solution__label,
html[data-theme="dossier"] .unlocked__label,
html[data-theme="dossier"] .themerow__label,
html[data-theme="dossier"] .fav__where,
html[data-theme="dossier"] .stat__label { font-size: 12px; letter-spacing: .14em; color: #9aa093; opacity: 1; }

html[data-theme="dossier"] .reward__value,
html[data-theme="dossier"] .solution__value,
html[data-theme="dossier"] .unlocked__value,
html[data-theme="dossier"] .stat__value,
html[data-theme="dossier"] .themerow__name { font-size: 23px; letter-spacing: .02em; line-height: 1.12; }

html[data-theme="dossier"] .why__text,
html[data-theme="dossier"] .reward__note,
html[data-theme="dossier"] .ask__text { font-family: 'Epilogue', sans-serif; font-size: 15px; line-height: 1.55; color: #c9cec3; opacity: 1; }

html[data-theme="dossier"] .more { background: #22251f; border: 1px solid #2a2e27; border-radius: 0; padding: 16px; color: #9aa093; font-size: 12px; letter-spacing: .14em; }

html[data-theme="dossier"] .app[data-scr="fatto"] .hint,
html[data-theme="dossier"] .app[data-scr="giusto"] .hint { border: 1px solid #2a2e27; background: #22251f; padding: 16px; }

html[data-theme="dossier"] .ask__title,
html[data-theme="dossier"] .done__title {
  flex-direction: row;
  flex-wrap: wrap;
  gap: .28em;
  font-size: 30px;
  letter-spacing: .02em;
  line-height: 1.12;
}

html[data-theme="dossier"] .done__sub { font-size: 12px; letter-spacing: .14em; color: #9aa093; }

/* --- preferiti, profilo, negozio --- */

html[data-theme="dossier"] .fav,
html[data-theme="dossier"] .stat,
html[data-theme="dossier"] .account,
html[data-theme="dossier"] .empty { border: 1px solid #34382f; background: none; border-radius: 0; padding: 16px; color: #e6e8e2; }
html[data-theme="dossier"] .account { background: var(--accent); color: var(--accent-ink); }

html[data-theme="dossier"] .fav[data-state="skipped"] { border-color: #7fd18a; }
html[data-theme="dossier"] .fav__title { font-size: 18px; line-height: 1.25; letter-spacing: .02em; }
html[data-theme="dossier"] .stat[data-tone="accent"] { border-color: #7fd18a; background: none; color: #e6e8e2; }
html[data-theme="dossier"] .stat__value { display: block; padding-bottom: 8px; }
html[data-theme="dossier"] .themerow { border: 1px solid #2a2e27; background: #22251f; border-radius: 0; padding: 16px; }
html[data-theme="dossier"] .themerow__name { font-size: 16px; }
html[data-theme="dossier"] .themerow__cta { background: none; border: 1px solid #4a5344; border-radius: 0; padding: 14px; color: #9aa093; font-size: 12px; letter-spacing: .12em; }
html[data-theme="dossier"] .account__name { font-size: 15px; letter-spacing: .02em; }
html[data-theme="dossier"] .shop { gap: 6px; }
html[data-theme="dossier"] .scr__eyebrow { font-size: 12px; letter-spacing: .14em; color: #9aa093; }
html[data-theme="dossier"] .tdesc { font-family: 'Epilogue', sans-serif; font-size: 15px; line-height: 1.55; color: #c9cec3; }
html[data-theme="dossier"] .credits { font-family: 'Epilogue', sans-serif; font-size: 12px; color: #6b7266; }

html[data-theme="dossier"] .btn { border-radius: 0; font-size: 13px; letter-spacing: .12em; }
html[data-theme="dossier"] .btn--primary,
html[data-theme="dossier"] .btn--go { background: #7fd18a; color: #12200f; border-color: #7fd18a; }
html[data-theme="dossier"] .btn--ghost,
html[data-theme="dossier"] .btn--inert { border: 1px solid #4a5344; color: #9aa093; font-size: 12px; }
html[data-theme="dossier"] .btn--off { border: 1px solid #2a2e27; color: #4a5344; }
html[data-theme="dossier"] .btn[data-arrow="avanti"]::after { content: ' →'; }
html[data-theme="dossier"] .btn[data-arrow="indietro"]::before { content: '◂ '; }

/* ============================================================================
   Anteprima nel negozio — fuori dallo scope del tema: è la vetrina.
   ========================================================================= */

.tpv--dossier {
  background: #1c1e1b;
  border: 1px solid #4a5344;
  border-radius: 0;
  color: #e6e8e2;
  font-family: 'Space Mono', monospace;
}

.tpv--dossier .tpv__num { font-size: 11px; letter-spacing: .14em; color: #9aa093; }
.tpv--dossier .tpv__name { font-size: 17px; color: #e6e8e2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpv--dossier .tpv__name::before { content: '[ '; }
.tpv--dossier .tpv__name::after { content: ' ]'; }
.tpv--dossier .tpv__tag { border: 1px solid #7fd18a; color: #7fd18a; padding: 5px 10px; font-size: 11px; letter-spacing: .1em; white-space: nowrap; }

.tpv--dossier.tpv--card { padding: 18px 20px; }
.tpv--dossier.tpv--card .tpv__num { font-size: 12px; letter-spacing: .14em; }
.tpv--dossier.tpv--card .tpv__num::before { content: 'TEMA '; }
.tpv--dossier.tpv--card .tpv__name { font-size: 26px; letter-spacing: -.02em; white-space: normal; }
.tpv--dossier.tpv--card .tpv__tag { font-size: 12px; padding: 7px 13px; }