/* ============================================================================
   08 · Erbario — quaderno botanico.

   Verde salvia, corsivi, filetti sottilissimi, numeri romani. Gli enigmi sono
   esemplari da catalogare: cerchietti in fila su una tavola, non pulsanti.
   Tutto è delicato e lento.  Mockup: blocco #08.
   ========================================================================= */

html[data-theme="erbario"] {
  --bg: #eceee4;
  --ink: #26301f;
  --ink-2: #5c6b4f;
  --ink-3: #7d8a70;
  --line: #d3d9c8;
  --surface: #f4f6ee;
  --surface-ink: #26301f;

  --accent: #b08a3e;
  --accent-ink: #fff;
  --ok: #26301f;
  --ok-ink: #eceee4;
  --warn: transparent;
  --warn-ink: #26301f;
  --locked: transparent;
  --locked-ink: #a4ad92;
  --hint-locked: transparent;

  --lvl-bg: #f5f6ef;
  --lvl-ink: #26301f;
  --right-bg: #eceee4;
  --right-ink: #26301f;
  --wrong-bg: #eceee4;
  --wrong-ink: #26301f;
  --ask-bg: #eceee4;
  --ask-ink: #26301f;
  --full-bg: #eceee4;
  --full-ink: #26301f;

  --conf-1: #b08a3e;
  --conf-2: #26301f;
  --conf-3: #7d8a70;
  --conf-4: #c4cbb6;

  --font: 'Cormorant Garamond', Georgia, serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-mono: 'Cormorant Garamond', Georgia, serif;
  --tt-display: none;
  --tt-label: uppercase;
  --ls-display: 0;
  --ls-label: .28em;
  --w-display: 300;
  --w-label: 400;

  --fs-huge: 52px;
  --fs-title: 34px;
  --fs-lead: 25px;
  --fs-body: 18px;
  --fs-small: 17px;
  --fs-label: 12px;

  --r: 4px;
  --r-lg: 8px;
  --r-pill: 999px;
  --bd: 1px;
  --bd-color: #d3d9c8;
  --shadow: none;

  --pad: 26px;
  --head-top: 26px;
  --gap: 12px;
  --gap-block: 22px;
  --block-pad: 18px 20px;
  --btn-pad: 15px;

  /* 22px e 17px invece di 20px e 15px */
  --riddle-lungo: 0.65;
  --riddle-enorme: 0.5;
}

/* --- guscio --- */

html[data-theme="erbario"] .app.has-tabs .tabbar {
  border: 0;
  padding: 22px 30px max(26px, var(--safe-tab));
  justify-content: space-between;
}

html[data-theme="erbario"] .tabbar__item { flex: 0 0 auto; padding: 0 0 4px; color: #7d8a70; }
html[data-theme="erbario"] .tabbar__item.is-on { background: none; color: #26301f; border-bottom: 1px solid #26301f; }

html[data-theme="erbario"] .head__title { font-size: 30px; font-weight: 300; letter-spacing: 0; }
html[data-theme="erbario"] .brand__name { font-size: 14px; letter-spacing: .32em; text-transform: uppercase; color: #5c6b4f; font-weight: 400; }
html[data-theme="erbario"] .mark i { background: #26301f; }
html[data-theme="erbario"] .mark i:nth-child(2) { background: #b08a3e; }

html[data-theme="erbario"] .head__back { font-size: 14px; letter-spacing: .16em; text-transform: none; color: #5c6b4f; }
html[data-theme="erbario"] .head__back::before { content: '← '; }
html[data-theme="erbario"] .head__back[data-racc] span { display: none; }
html[data-theme="erbario"] .head__back[data-racc]::after { content: 'tavola ' attr(data-liv); }

html[data-theme="erbario"] .coins {
  background: none;
  color: #5c6b4f;
  padding: 0;
  font-size: 15px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .06em;
}

html[data-theme="erbario"] .coins::after { content: ' monete'; }
html[data-theme="erbario"] .ico--fav[aria-pressed="true"] { color: #b08a3e; }

/* --- home --- */

html[data-theme="erbario"] .tally {
  position: relative;
  padding: 12px 92px 18px 0;
  border-bottom: 1px solid #c4cbb6;
}

/* A destra del conteggio lo spazio restava vuoto. Un rametto: un filo che sale
   e tre cerchietti di misura calante, che sono il segno di questa direzione —
   li usa già la griglia della raccolta. Tutto in due pseudo-elementi, così
   app.js continua a costruire lo stesso scheletro per tutti e dieci i temi. */
html[data-theme="erbario"] .tally::before {
  content: '';
  position: absolute;
  right: 46px;
  top: 16px;
  width: 1px;
  height: 56px;
  background: #b08a3e;
  opacity: .55;
}

html[data-theme="erbario"] .tally::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 10px;
  width: 70px;
  height: 70px;
  background:
    radial-gradient(circle at 76% 20%, #b08a3e 0 6px, transparent 6px),
    radial-gradient(circle at 49% 52%, transparent 0 10px, #b08a3e 10px 11px, transparent 11px),
    radial-gradient(circle at 24% 82%, #7d8a70 0 4px, transparent 4px);
}
html[data-theme="erbario"] .tally__n { font-size: 52px; font-weight: 300; line-height: 1; letter-spacing: 0; }
html[data-theme="erbario"] .tally__label { font-size: 19px; font-style: italic; color: #5c6b4f; letter-spacing: 0; text-transform: none; font-weight: 400; padding-top: 2px; }

html[data-theme="erbario"] .resume { background: none; color: inherit; border-radius: 0; padding: 0; gap: 8px; }
html[data-theme="erbario"] .resume__where { font-size: 12px; letter-spacing: .28em; color: #7d8a70; }
html[data-theme="erbario"] .resume__text { font-size: 25px; font-style: italic; line-height: 1.3; letter-spacing: 0; text-transform: none; font-weight: 400; }
html[data-theme="erbario"] .resume__text::before { content: '«'; }
html[data-theme="erbario"] .resume__text::after { content: '»'; }

html[data-theme="erbario"] .resume__cta {
  background: none;
  color: #26301f;
  border: 1px solid #26301f;
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 6px;
}

html[data-theme="erbario"] .resume__cta::after { content: none; }

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

html[data-theme="erbario"] .colls::before {
  content: 'Le cinque raccolte';
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #7d8a70;
  padding-bottom: 12px;
}

html[data-theme="erbario"] .coll {
  flex-direction: row;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border: 0;
  border-top: 1px solid #d3d9c8;
  border-radius: 0;
  background: none;
  color: #26301f;
}

html[data-theme="erbario"] .coll:nth-child(5) { grid-column: auto; border-bottom: 1px solid #d3d9c8; }
html[data-theme="erbario"] .coll[data-state="locked"] { color: #9aa48d; }

/* il numero romano: qui è la segnatura della tavola */
html[data-theme="erbario"] .coll::before {
  content: attr(data-roman);
  width: 34px;
  flex: 0 0 auto;
  font-size: 15px;
  color: #7d8a70;
}

html[data-theme="erbario"] .coll[data-state="locked"]::before { color: inherit; }
html[data-theme="erbario"] .coll__meta { display: contents; }
/* «Prima», «Seconda»…: il nome della raccolta è il suo ordinale */
html[data-theme="erbario"] .coll__name { order: 1; flex: 1; font-size: 21px; letter-spacing: 0; text-transform: none; font-weight: 400; }
html[data-theme="erbario"] .coll__name::after { content: none; }
html[data-theme="erbario"] .coll[data-ord] .coll__name { font-size: 0; }
html[data-theme="erbario"] .coll[data-ord] .coll__name::before { content: attr(data-ord); font-size: 21px; text-transform: capitalize; }
html[data-theme="erbario"] .coll__count { order: 2; font-size: 15px; font-style: italic; color: #5c6b4f; letter-spacing: 0; }
html[data-theme="erbario"] .coll__count i::before { content: ' di '; }
html[data-theme="erbario"] .coll[data-state="locked"] .coll__count { display: none; }
html[data-theme="erbario"] .coll__state { order: 3; display: none; font-size: 15px; font-style: italic; letter-spacing: 0; text-transform: none; }
html[data-theme="erbario"] .coll[data-state="locked"] .coll__state { display: block; }

/* --- raccolta: la tavola degli esemplari --- */

/* «Raccolta seconda», con l'ordinale in corsivo: qui si conta a lettere */
html[data-theme="erbario"] .scr__title {
  flex-direction: row;
  flex-wrap: wrap;
  gap: .25em;
  font-size: 44px;
  font-weight: 300;
  line-height: 1.05;
}

html[data-theme="erbario"] .scr__title[data-ord] .scr__title-a,
html[data-theme="erbario"] .scr__title[data-ord] .scr__title-b { display: none; }
html[data-theme="erbario"] .scr__title[data-ord]::before { content: 'Raccolta'; }
html[data-theme="erbario"] .scr__title[data-ord]::after { content: attr(data-ord); font-style: italic; }
html[data-theme="erbario"] .scr__sub { font-size: 17px; font-style: italic; letter-spacing: 0; text-transform: none; color: #5c6b4f; }

html[data-theme="erbario"] .cells { grid-template-columns: repeat(5, 1fr); gap: 14px 10px; }

html[data-theme="erbario"] .cell {
  aspect-ratio: auto;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

html[data-theme="erbario"] .cell__n {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px dashed #b9c1a9;
  color: #a4ad92;
  font-size: 14px;
}

html[data-theme="erbario"] .cell[data-state="solved"] .cell__n { background: #26301f; border: 0; color: #eceee4; font-size: 15px; }
html[data-theme="erbario"] .cell[data-state="skipped"] .cell__n { border: 1px solid #26301f; color: #26301f; font-size: 15px; }
html[data-theme="erbario"] .cell[data-state="open"] .cell__n { border: 1px solid #7d8a70; color: #26301f; }

html[data-theme="erbario"] .cell[data-state="current"] { grid-column: auto; aspect-ratio: auto; font-size: inherit; background: none; }
html[data-theme="erbario"] .cell[data-state="current"] .cell__n { background: #b08a3e; border: 0; color: #fff; font-size: 15px; }
html[data-theme="erbario"] .cell__fav { top: -2px; right: 2px; }
html[data-theme="erbario"] .cell__fav::before { content: '✦'; color: #b08a3e; }

/* --- enigma --- */

html[data-theme="erbario"] .riddle__meta { font-size: 12px; letter-spacing: .3em; color: #7d8a70; }
html[data-theme="erbario"] .riddle__text { font-weight: 300; line-height: 1.32; letter-spacing: 0; border-bottom: 1px solid #d3d9c8; padding-bottom: 16px; }

html[data-theme="erbario"] .hints { gap: 16px; }
html[data-theme="erbario"] .hint { background: none; color: inherit; border: 0; border-radius: 0; padding: 0; gap: 4px; }
html[data-theme="erbario"] .hint__label { font-size: 12px; letter-spacing: .28em; color: #b08a3e; }
html[data-theme="erbario"] .hint__text { font-size: 21px; font-style: italic; line-height: 1.4; }

html[data-theme="erbario"] .hint[data-state="locked"] {
  border: 1px solid #c4cbb6;
  border-radius: 999px;
  padding: 11px;
  justify-content: center;
  gap: 6px;
  color: #5c6b4f;
}

html[data-theme="erbario"] .hint[data-state="locked"] .hint__label { color: #5c6b4f; font-size: 15px; letter-spacing: 0; text-transform: lowercase; }
html[data-theme="erbario"] .hint[data-state="locked"] .hint__label::after { content: ' ·'; }
html[data-theme="erbario"] .hint__cost { font-size: 15px; font-weight: 400; }
html[data-theme="erbario"] .option { background: #f4f6ee; border: 1px solid #d3d9c8; border-radius: 4px; }

html[data-theme="erbario"] .app[data-scr="livello"] .scr__foot {
  border-top: 1px solid #d3d9c8;
  padding: 20px 24px max(26px, var(--safe-b));
  gap: 12px;
}

/* la risposta si scrive su una riga, come su un quaderno */
html[data-theme="erbario"] .answer { border: 0; gap: 12px; align-items: flex-end; }

html[data-theme="erbario"] .answer__input {
  background: none;
  border: 0;
  border-bottom: 1px solid #26301f;
  border-radius: 0;
  padding: 10px 2px;
  font-size: 19px;
  font-style: italic;
  color: #26301f;
}

html[data-theme="erbario"] .answer__input::placeholder { color: #a4ad92; }

html[data-theme="erbario"] .answer__send {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #26301f;
  color: #f5f6ef;
  font-size: 18px;
}

html[data-theme="erbario"] .answer__send::before { content: '→'; }
html[data-theme="erbario"] .skip { background: none; color: #5c6b4f; font-size: 16px; font-style: italic; letter-spacing: 0; text-transform: none; padding: 0; }

/* --- esiti --- */

html[data-theme="erbario"] .verdict { gap: 10px; padding-top: 22px; }
html[data-theme="erbario"] .verdict__word { font-size: 46px; font-weight: 300; line-height: 1.05; letter-spacing: 0; color: #26301f; }
html[data-theme="erbario"] .verdict__line { order: -1; font-size: 12px; letter-spacing: .28em; color: #7d8a70; }

html[data-theme="erbario"] .reward,
html[data-theme="erbario"] .solution { background: #26301f; color: #eceee4; border-radius: 4px; padding: 18px 20px; border: 0; }
html[data-theme="erbario"] .reward .reward__label,
html[data-theme="erbario"] .solution .solution__label { color: #b3bda6; }

html[data-theme="erbario"] .why,
html[data-theme="erbario"] .unlocked,
html[data-theme="erbario"] .app[data-scr="sbagliato"] .reward,
html[data-theme="erbario"] .app[data-scr="salto"] .reward {
  background: #f4f6ee;
  border: 1px solid #d3d9c8;
  border-radius: 4px;
  padding: 18px 20px;
  color: #26301f;
}

html[data-theme="erbario"] .app[data-scr="sbagliato"] .reward .reward__label,
html[data-theme="erbario"] .app[data-scr="salto"] .reward .reward__label { color: #7d8a70; }

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

html[data-theme="erbario"] .reward__value,
html[data-theme="erbario"] .solution__value,
html[data-theme="erbario"] .unlocked__value,
html[data-theme="erbario"] .stat__value,
html[data-theme="erbario"] .themerow__name { font-size: 30px; font-weight: 300; line-height: 1.05; letter-spacing: 0; }

html[data-theme="erbario"] .why__text,
html[data-theme="erbario"] .reward__note,
html[data-theme="erbario"] .ask__text { font-size: 18px; font-style: italic; line-height: 1.5; color: #4d5a42; opacity: 1; }
html[data-theme="erbario"] .reward .reward__note { color: #cbd3bf; }

html[data-theme="erbario"] .more { background: #e4e8da; border: 1px solid #d3d9c8; border-radius: 4px; padding: 18px 20px; color: #7d8a70; font-size: 12px; letter-spacing: .28em; }
html[data-theme="erbario"] .app[data-scr="fatto"] .hint,
html[data-theme="erbario"] .app[data-scr="giusto"] .hint { background: #e4e8da; border: 1px solid #d3d9c8; border-radius: 4px; padding: 18px 20px; }
html[data-theme="erbario"] .app[data-scr="fatto"] .hint__label,
html[data-theme="erbario"] .app[data-scr="giusto"] .hint__label { color: #7d8a70; }
html[data-theme="erbario"] .app[data-scr="fatto"] .hint__text,
html[data-theme="erbario"] .app[data-scr="giusto"] .hint__text { font-size: 18px; }

html[data-theme="erbario"] .ask__title,
html[data-theme="erbario"] .done__title { flex-direction: row; flex-wrap: wrap; gap: .28em; font-size: 42px; font-weight: 300; line-height: 1.05; letter-spacing: 0; }
html[data-theme="erbario"] .done__sub { font-size: 17px; font-style: italic; letter-spacing: 0; text-transform: none; color: #5c6b4f; }

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

html[data-theme="erbario"] .fav,
html[data-theme="erbario"] .stat,
html[data-theme="erbario"] .account,
html[data-theme="erbario"] .empty { background: #f4f6ee; border: 1px solid #d3d9c8; border-radius: 4px; padding: 18px 20px; color: #26301f; }
html[data-theme="erbario"] .account { background: var(--accent); color: var(--accent-ink); }
html[data-theme="erbario"] .fav[data-state="skipped"] { background: #26301f; color: #eceee4; }
html[data-theme="erbario"] .fav[data-state="skipped"] .fav__where { color: #b3bda6; }
html[data-theme="erbario"] .fav__title { font-size: 21px; font-weight: 400; line-height: 1.3; letter-spacing: 0; text-transform: none; }
html[data-theme="erbario"] .stat[data-tone="accent"] { background: #26301f; color: #eceee4; }
html[data-theme="erbario"] .stat[data-tone="accent"] .stat__label { color: #b3bda6; }
html[data-theme="erbario"] .stat__value { display: block; padding-bottom: 6px; font-size: 32px; }
html[data-theme="erbario"] .themerow { background: #e4e8da; border: 1px solid #d3d9c8; border-radius: 4px; padding: 18px 20px; }
html[data-theme="erbario"] .themerow__name { font-size: 24px; }

html[data-theme="erbario"] .themerow__cta {
  background: none;
  border: 1px solid #26301f;
  border-radius: 999px;
  padding: 11px 18px;
  color: #26301f;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html[data-theme="erbario"] .account__name { font-size: 18px; font-weight: 400; letter-spacing: 0; }
html[data-theme="erbario"] .shop { gap: 8px; }
html[data-theme="erbario"] .scr__eyebrow { font-size: 12px; letter-spacing: .28em; color: #7d8a70; }
html[data-theme="erbario"] .tdesc { font-size: 18px; font-style: italic; line-height: 1.5; color: #4d5a42; }
html[data-theme="erbario"] .credits { font-size: 14px; color: #9aa48d; }

html[data-theme="erbario"] .btn { border-radius: 999px; font-size: 15px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; }
html[data-theme="erbario"] .btn--primary,
html[data-theme="erbario"] .btn--go { background: #26301f; color: #eceee4; border-color: #26301f; }
html[data-theme="erbario"] .btn--ghost,
html[data-theme="erbario"] .btn--inert { border: 1px solid #26301f; color: #26301f; }
html[data-theme="erbario"] .btn--off { border: 1px solid #c4cbb6; color: #a4ad92; }
html[data-theme="erbario"] .btn[data-arrow="avanti"]::after { content: ' →'; }
html[data-theme="erbario"] .btn[data-arrow="indietro"]::before { content: '← '; }

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

.tpv--erbario {
  background: #eceee4;
  border: 1px solid #c4cbb6;
  border-radius: 0;
  color: #26301f;
  font-family: 'Cormorant Garamond', serif;
}

.tpv--erbario .tpv__num { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #7d8a70; }
.tpv--erbario .tpv__name { font-size: 23px; font-weight: 300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tpv--erbario .tpv__tag {
  border: 1px solid #26301f;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tpv--erbario.tpv--card { border-radius: 8px; padding: 20px 24px; }
.tpv--erbario.tpv--card .tpv__num { font-size: 13px; letter-spacing: .3em; }
.tpv--erbario.tpv--card .tpv__num::before { content: 'Tavola '; }
.tpv--erbario.tpv--card .tpv__name { font-size: 36px; white-space: normal; }
.tpv--erbario.tpv--card .tpv__tag { font-size: 15px; padding: 8px 20px; }