:root {
  --paper: #f5f2ea;
  --ink: #2b2824;
  --ink-soft: #6f6a61;
  --ink-faint: #b9b2a5;
  --ink-mute: #736d63;
  --leaf: #5d7a5a;
  --shadow: #a08c7a;
  --line: #ddd6c8;
  --panel: #fbf9f4;
  --bark: #3b342c;
  --leaf-young: #a3b565;
  --bloom: #b0643e;
  --shu: #b7472a;
  color-scheme: light;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}
/* La carta chiara è il default; la notte si sceglie dall'interruttore in fondo. */
:root[data-theme="dark"] {
  --paper: #171614;
  --ink: #e8e3d8;
  --ink-soft: #a39d91;
  --ink-faint: #56514a;
  --ink-mute: #938d82;
  --leaf: #8fb08a;
  --shadow: #8a7766;
  --line: #34312c;
  --panel: #1e1d1a;
  --bark: #d8cfbf;
  --leaf-young: #c2d68f;
  --bloom: #e0a07a;
  --shu: #cf6a4d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background-color: var(--paper);
  /* grana di carta, appena percettibile */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--serif);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
}

.head { text-align: center; margin-top: 3.2rem; }
.head h1 { font-weight: 400; font-size: 2.4rem; letter-spacing: 0.35em; margin: 0 0 0 0.35em; }
.motto { margin: 0; color: var(--ink-soft); font-style: italic; font-size: 1.15rem; letter-spacing: 0.02em; }

.seed { display: flex; gap: 0.75rem; margin-top: 2.5rem; width: min(30rem, 100%); }
.seed input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1.2rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-faint);
  padding: 0.4rem 0.1rem;
  outline: none;
  transition: border-color 0.4s;
}
.seed input:focus { border-color: var(--ink); }
.seed button, .link {
  font: inherit;
  font-style: italic;
  color: var(--ink-soft);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.4rem 0.2rem;
}
.seed button:hover, .link:hover { color: var(--ink); }
.seed button:disabled { opacity: 0.4; cursor: default; }

/* Motori di ricerca: come gli altri selettori (etichetta, riquadro, nota sotto). Con cinque
   motori il riquadro va a capo nella colonna stretta, per questo gli angoli sono più morbidi. */
.engines { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; margin-top: 0.9rem; }
.engines[hidden] { display: none; }
.engines .segmented { flex-wrap: wrap; border-radius: 1.1rem; }
.engines .segmented button[aria-checked="true"] { background: var(--ink-soft); color: var(--paper); }
.engines-hint { font-size: 0.82rem; font-style: italic; color: var(--ink-mute); }
.engines-hint:empty { display: none; }
.choices { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin-top: 0.4rem; font-style: italic; }
.choices[hidden] { display: none; }
.choices button { font: inherit; background: none; border: 0; padding: 0.1rem 0.2rem; color: var(--ink); cursor: pointer; border-bottom: 1px solid transparent; text-align: center; }
.choices button:hover, .choices button:focus-visible { border-color: var(--ink-soft); outline: none; }
.choices .desc { color: var(--ink-soft); }
.choices .free { color: var(--ink-soft); margin-top: 0.3rem; }
.others[hidden] { display: none; }
.head { position: relative; }
.to-forest, .forest-head button { font: inherit; font-style: italic; background: none; border: 0; padding: 0 0.15rem; color: var(--ink-soft); cursor: pointer; border-bottom: 1px solid transparent; }
.to-forest:hover, .forest-head button:hover, .to-forest:focus-visible { color: var(--ink); border-color: var(--ink-soft); outline: none; }
.to-forest { margin-top: 0.4rem; }
/* Modo prova: sempre visibile, perché i dati finti non si confondano con quelli veri. */
.mode { margin: 0.5rem auto 0; width: fit-content; padding: 0.15rem 0.7rem; font-style: italic; font-size: 0.9rem; color: var(--bloom); border-bottom: 1px dashed var(--bloom); }
.mode[hidden] { display: none; }
.plant[hidden], .forest[hidden] { display: none; }
.forest { width: 100%; max-width: 1100px; margin: 1.2rem auto 0; padding: 0 16px; box-sizing: border-box; }
.forest-head { text-align: center; font-style: italic; color: var(--ink-soft); }
.forest-view { position: relative; margin-top: 1rem; }
.forest-search { display: none; width: 100%; box-sizing: border-box; margin: 1rem 0; }
.side[data-search-mode="forest"] .forest-search { display: block; }
.side[data-search-mode="forest"] .seed, .side[data-search-mode="forest"] .engines, .side[data-search-mode="forest"] .global-search-help { display: none; }
.search-modes { margin-top: 2.6rem; }
.global-search-help { color: var(--ink-mute); font-size: 0.85rem; line-height: 1.5; margin: 0.7rem 0 0; }
.side .status:empty { display: none; }
.forest-search label { display: block; font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 0.4rem; }
.forest-search-field { display: flex; align-items: center; gap: 0.8rem; border-bottom: 1px solid var(--ink-mute); }
.forest-search-field:focus-within { border-color: var(--shu); }
.forest-search input { min-width: 0; flex: 1; width: 100%; border: 0; outline: none; background: none; color: var(--ink); font: inherit; font-size: 1.15rem; padding: 0.5rem 0; }
.forest-search input::placeholder { color: var(--ink-mute); opacity: 1; }
.forest-search button, .forest-results button { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.forest-search button { flex-shrink: 0; color: var(--ink); font-size: 0.85rem; border-bottom: 1px solid var(--ink-faint); }
.forest-search p, .forest-search-status { color: var(--ink-mute); font-size: 0.85rem; }
.forest-search p { margin: 0.5rem 0 0; }
.forest-filters.segmented button { display: inline-flex; align-items: baseline; gap: 0.3rem; font-style: italic; }
.filter-count { font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.forest-search .forest-search-scope { padding-left: 0.65rem; border-left: 2px solid var(--shu); line-height: 1.5; }
.forest-search-scope[hidden] { display: none; }
.forest-search-scope button { text-decoration: underline; text-underline-offset: 3px; }
.forest-search-status:empty { display: none; }
.forest-results { max-width: 54rem; margin-top: 1.2rem; }
.forest-results[hidden], .forest-view[hidden], .forest-layout[hidden] { display: none; }
.forest-result { padding: 1.1rem 0; border-top: 1px solid var(--ink-faint); }
.forest-result h3 { margin: 0; font-size: 1.2rem; font-weight: normal; }
.forest-result p { margin: 0.3rem 0 0.8rem; font-size: 0.9rem; color: var(--ink-mute); }
.forest-result ul { list-style: none; margin: 0; padding: 0; }
.forest-result li { margin: 0.7rem 0; }
.forest-result li button { display: block; width: 100%; padding: 0.3rem 0; }
.forest-result button:hover { color: var(--shu); }
.forest-result button:focus-visible, .forest-search button:focus-visible { outline: 1px solid var(--shu); outline-offset: 4px; }
.forest-result small { display: block; font-size: 0.82rem; color: var(--ink-mute); }
.forest-result strong { display: block; font-weight: normal; overflow-wrap: anywhere; }
.forest-result .search-more { color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.4rem; }
.forest-grid { outline: none; }
/* Tutti: griglia che va a capo. */
/* In griglia: colonne uguali e centrate, fino a 4 per riga, larghe secondo quanti sono. */
.forest-grid.tutti { display: grid; grid-template-columns: repeat(auto-fill, var(--gw)); justify-content: center; gap: 1.2rem 1rem; --gw: clamp(170px, calc(100cqi / min(var(--n), 4) - 1rem), 400px); }
/* Larghezza secondo quanti sono (--n): lo spazio diviso fra gli alberi, fra 190 px
   (sotto non si legge) e 400 px (uno o due, grandi senza esagerare). */
/* Il contenitore delle unità cqi è .forest-view: un elemento non misura se stesso. */
.forest-view { container-type: inline-size; }
.forest-grid { --n: 3; --w: clamp(190px, calc(100cqi / var(--n) - 1.4rem), 400px); }
.forest-grid.tutti .sapling { width: 100%; }
/* In fila: una sola linea di terra, scorrevole in orizzontale con aggancio. */
.forest-grid.fila {
  display: flex; gap: 0.6rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-inline: 12%;
  padding: 0.5rem 12% 1.2rem; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.forest-grid.fila::-webkit-scrollbar { display: none; }
/* Pochi alberi: al centro. Tanti: la fila scorre dal primo, senza tagliarlo. */
.forest-grid.fila > :first-child { margin-left: auto; }
.forest-grid.fila > :last-child { margin-right: auto; }
#leave-wrap[hidden] { display: none; }
.forest-grid.fila .sapling { flex: 0 0 var(--w); scroll-snap-align: center; }
/* L'altezza segue la larghezza: l'alberello non si schiaccia né si allunga. */
.forest-grid .sapling svg { height: auto; aspect-ratio: 1 / 1; }
.forest-grid.pochi .sapling figcaption strong { font-size: 1.15rem; }
.forest-grid.pochi .sapling figcaption span { font-size: 0.85rem; }
.forest-nav { position: absolute; top: 38%; z-index: 1; font: inherit; font-size: 2rem; line-height: 1; background: none; border: 0; color: var(--ink-soft); cursor: pointer; padding: 0.4rem 0.6rem; transition: color 0.3s, opacity 0.3s; }
.forest-nav:hover, .forest-nav:focus-visible { color: var(--ink); outline: none; }
.forest-nav.prev { left: 0; }
.forest-nav.next { right: 0; }
.forest-nav[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .forest-grid.fila { scroll-behavior: auto; } }
@media (max-width: 600px) {
  .forest-grid.fila { padding-inline: 18%; scroll-padding-inline: 18%; }
  .forest-nav { display: none !important; }
}
.sapling { margin: 0; cursor: pointer; text-align: center; border-radius: 6px; padding: 0.3rem; }
.sapling { transition: background 0.3s, transform 0.4s ease; }
.sapling:hover, .sapling:focus-visible { background: color-mix(in srgb, var(--ink) 5%, transparent); outline: none; }
.forest-grid.fila .sapling:hover, .forest-grid.fila .sapling:focus-visible { background: none; transform: translateY(-4px); }
.sapling svg { transition: filter 0.4s; }
.forest-grid.fila .sapling:hover svg { filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--ink) 12%, transparent)); }
.sapling svg { width: 100%; height: 170px; display: block; }
.sapling .label, .sapling .name, .sapling .fallen, .sapling .root-label { display: none; }
.sapling figcaption { font-style: italic; }
.sapling figcaption strong { display: block; font-weight: normal; color: var(--ink); font-variant: small-caps; letter-spacing: 0.04em; }
.sapling figcaption span { display: block; color: var(--ink-mute); font-size: 0.8rem; }
.view-title { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 0 0 0.3rem; font-weight: 400; font-size: 1.5rem; letter-spacing: 0.2em; font-style: normal; }
.forest-empty { text-align: center; font-style: italic; color: var(--ink-mute); margin-top: 2rem; }

.status { min-height: 1.5em; margin: 1.2rem 0 0; color: var(--ink-soft); font-style: italic; text-align: center; transition: opacity 0.6s; }
.status.error { color: #a04a3c; font-style: normal; }

.stage { width: min(1000px, 100%); flex: 1; position: relative; }
/* Come «vedi tutto l'albero» della demo (pubblico.css, .pub-all). */
.tree-all { position: absolute; top: .4rem; left: 2.7rem; z-index: 2; font: inherit; font-size: .88rem; font-style: italic; color: var(--ink); background: var(--paper); border: 0; border-bottom: 1px solid var(--ink-faint); padding: 0 0 .05rem; cursor: pointer; }
.tree-all[hidden] { display: none; }
/* Segue o resta fermo: un'icona sola, tenue, a sinistra (a destra c'è il pannello); lo zoom
   c'è solo da computer, quindi anche lei. «vedi tutto l'albero» le sta accanto. */
.tree-follow { position: absolute; top: 0; left: 0; z-index: 2; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; color: var(--ink-mute); background: none; border: 1px solid transparent; border-radius: 999px; cursor: pointer; transition: color .3s, border-color .3s; }
.tree-follow:hover, .tree-follow:focus-visible { color: var(--ink); border-color: var(--line); outline: none; }
.tree-follow .icon { width: 1.05rem; height: 1.05rem; }
@media (max-width: 820px) { .tree-follow { display: none; } }
#tree { width: 100%; height: auto; max-height: calc(100vh - 290px); min-height: 320px; display: block; overflow: visible; }
/* Ingrandito, l'albero resta nel suo riquadro, con i bordi appena sfumati. */
#tree.zoomed {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent, #000 6%, #000 94%, transparent), linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}

/* Gli alberelli mostrano subito lo stato finale, senza ripetere la crescita. */
svg.quiet * { animation-duration: 0s !important; animation-delay: 0s !important; }
/* Negli alberelli della foresta nessuna animazione, nemmeno a durata zero: il browser le
   crea comunque, una per elemento, e costano più del disegno. Lo stato finale è scritto qui
   (gli stessi valori dei keyframe, che finora vincevano su ogni altra regola). */
.sapling svg * { animation: none !important; }
.sapling svg :is(.wood path, .flare path, .label, .period, .name, .root-label, .fruit) { opacity: 1 !important; }
.sapling svg .leaf { opacity: var(--o, 0.85) !important; }
.sapling svg .vein { opacity: 0.45 !important; }
.sapling svg .rootwood path { opacity: 0.62 !important; }

/* albero */
#tree { color: var(--ink); }
.wood path { fill: none; stroke: var(--bark); stroke-linecap: round; opacity: 0; animation: appear 0.12s linear forwards; }
.branch { cursor: pointer; transition: opacity 0.5s, filter 0.5s; }
.branch.unsure .wood path { stroke-dasharray: 5 4; }
/* Ramo aperto nel pannello: gli altri si attenuano piano, senza sparire. */
.crown:has(.branch.focused) .branch:not(.focused) { opacity: 0.3 !important; transition: opacity 1.2s ease; }
.crown:has(.branch:hover) .branch:not(:hover),
.crown:has(.branch:focus-visible) .branch:not(:focus-visible) { opacity: 0.22 !important; }
.branch:focus { outline: none; }

.leaf { fill: var(--leaf); stroke: none; opacity: 0; transform-box: fill-box; transform-origin: 0% 50%; animation: unfold 1.1s cubic-bezier(.2,.8,.3,1.2) forwards; }
.leaf.young { fill: var(--leaf-young); }
.leaf.unsure { fill: none; stroke: var(--leaf); stroke-width: 1; }
.vein { fill: none; stroke: var(--paper); stroke-width: 0.8; stroke-linecap: round; opacity: 0; animation: vein 1.1s ease forwards; }
.leafholder { cursor: pointer; }
.leafholder:hover .leaf { fill: var(--bloom); }

.label { font-family: var(--serif); font-style: italic; font-size: 19px; fill: var(--ink-soft); opacity: 0; animation: appear 1.2s ease forwards; }
.hit { fill: transparent; pointer-events: all; }
/* Aree di tocco invisibili: una fascia lungo il ramo e un cerchio per foglia. In unità
   dell'SVG; su schermo stretto l'albero è ridotto a circa metà, quindi raddoppiano. */
.hit-branch { fill: none; stroke: transparent; stroke-width: 22; stroke-linecap: round; pointer-events: stroke; }
.hit-leaf { fill: transparent; pointer-events: all; }
.narrow .hit-branch { stroke-width: 60; }
@media (pointer: coarse) { .hit-branch { stroke-width: 44; } .narrow .hit-branch { stroke-width: 80; } }
.leafholder, .branch { -webkit-tap-highlight-color: transparent; }
.label .count { font-style: normal; font-size: 11px; fill: var(--ink-mute); }
/* Gli anni di ogni biforcazione della bibliografia. */
.period { font-size: 13px; font-variant-numeric: tabular-nums; fill: var(--ink-mute); opacity: 0; animation: appear 1.2s ease forwards; pointer-events: none; }
.narrow .period { font-size: 24px; }
.sapling .period, .share-preview .period { display: none; }
/* La bibliografia che si sta raccogliendo: un germoglio che respira. */
.branch.loading > .wood { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .branch.loading > .wood { animation: none; } }
.branch:hover .label { fill: var(--ink); }
.narrow .label { font-size: 34px; }
/* Un alone di carta intorno ai nomi dei rami e agli anni: sopra le foglie restano leggibili
   (come i nomi delle radici e dell'autore). */
.label, .period { paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.narrow .label { stroke-width: 8px; }
.narrow .label .count { font-size: 20px; }
.narrow .name { font-size: 36px; }

.ground { fill: none; stroke: var(--ink-faint); stroke-width: 1; }
.flare path { fill: var(--bark); opacity: 0; animation: appear 0.6s ease forwards; }
.name { font-family: var(--serif); font-size: 22px; fill: var(--ink); text-anchor: middle; letter-spacing: 0.14em; font-variant: small-caps; paint-order: stroke; stroke: var(--paper); stroke-width: 7px; stroke-linejoin: round; opacity: 0; animation: appear 1.6s ease 0.2s forwards; }

/* Radici: le influenze dell'autore, sotto terra, con il nome in punta. */
.rootwood path { fill: none; stroke: var(--bark); stroke-linecap: round; opacity: 0; animation: appear-root 0.12s linear forwards; }
.radice { cursor: pointer; transition: opacity 0.5s; }
.radice:focus { outline: none; }
.radice:hover .rootwood path, .radice:focus-visible .rootwood path { stroke: var(--bloom); }
.root-label { font-family: var(--serif); font-style: italic; font-size: 15px; fill: var(--ink-soft); opacity: 0; animation: appear 1.2s ease forwards; paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.radice:hover .root-label, .radice:focus-visible .root-label { fill: var(--ink); }
.narrow .root-label { font-size: 26px; }
.radici:has(.radice.focused) .radice:not(.focused), .radici.dimmed .radice { opacity: 0.35; }
@keyframes appear-root { to { opacity: 0.62; } }
/* Foglie a terra: le risorse scartate, visibili con l'interruttore. */
.fallen { display: none; }
.show-fallen .fallen { display: inline; }
.fallen .leaf { fill: var(--shadow); }
.fallen .leaf.unsure { fill: none; stroke: var(--shadow); }
.fallen .leafholder:hover .leaf { fill: var(--bloom); }


.card {
  position: absolute;
  z-index: 5;
  width: 280px;
  transform: translateY(-100%) translateY(6px);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
}
.card.on { opacity: 1; transform: translateY(-100%); }
.card strong { display: block; font-weight: 400; line-height: 1.3; }
.card span { display: block; color: var(--ink-soft); font-style: italic; font-size: 0.8rem; margin-top: 0.2rem; }

@keyframes appear { to { opacity: 1; } }
@keyframes appear-faint { to { opacity: 0.5; } }
@keyframes unfold { 0% { opacity: 0; transform: scale(0.05) rotate(-40deg); } 100% { opacity: var(--o, 0.85); transform: scale(1) rotate(0); } }
@keyframes vein { 0%, 50% { opacity: 0; } 100% { opacity: 0.45; } }
@keyframes seed { to { opacity: 0.7; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

.theme, .order { display: inline-flex; gap: 0.35rem; font-style: italic; }

/* pannello */
.panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(28rem, 100%);
  height: 100vh;
  overflow-y: auto;
  background: var(--panel);
  border-left: 1px solid var(--line);
  padding: 2.5rem 1.75rem;
  animation: slide 0.5s cubic-bezier(.3,.6,.2,1);
}
.panel h2 { font-weight: 400; font-style: italic; font-size: 1.6rem; margin: 0; }
.desc { color: var(--ink-soft); margin: 0.4rem 0 1.5rem; }
.close { position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2; }
.list { list-style: none; padding: 0; margin: 0; counter-reset: r; }
.list li { counter-increment: r; padding: 1rem 0 1rem 2rem; border-top: 1px solid var(--line); position: relative; }
.list li::before { content: counter(r); position: absolute; left: 0; top: 1rem; color: var(--ink-mute); font-size: 0.9rem; }
.list li.focus { background: linear-gradient(90deg, color-mix(in srgb, var(--leaf) 12%, transparent), transparent); }
.list a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink-faint); }
.list a:hover { border-color: var(--ink); }
.src { color: var(--ink-soft); font-size: 0.85rem; margin: 0.2rem 0; }
.snip { font-size: 0.92rem; margin: 0.4rem 0; color: var(--ink-soft); }
.why { color: color-mix(in srgb, var(--shadow) 55%, var(--ink)); font-style: italic; font-size: 0.85rem; }
.bars { display: grid; grid-template-columns: auto 1fr auto; gap: 0.2rem 0.6rem; font-size: 0.82rem; color: var(--ink-mute); margin-top: 0.5rem; align-items: center; }
.bar { height: 2px; background: var(--line); position: relative; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--leaf); }

/* I rami in cima al pannello: fermi mentre la lista scorre, a capo da computer, su una riga
   che scorre su telefono. Il ramo aperto è segnato dal vermiglio, come nel disegno. */
.panel-top {
  position: sticky; top: -2.5rem; z-index: 2; margin: -2.5rem -1.75rem 1.2rem; min-height: 2.5rem;
  padding: 1rem 3.2rem 0.8rem 1.75rem; background: var(--panel);
}
.panel-top:has(.panel-branches:not(:empty)) { border-bottom: 1px solid var(--line); }
.panel-top .close { top: 0.6rem; right: 0.9rem; }
.panel-branches { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.panel-branches:empty { display: none; }
.panel-branches button {
  font: inherit; font-size: 0.86rem; font-style: italic; color: var(--ink-soft); background: transparent;
  border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.7rem; cursor: pointer; white-space: nowrap;
}
.panel-branches button small { font-style: normal; color: var(--ink-mute); font-size: 0.78em; margin-left: 0.25rem; }
.panel-branches button:hover, .panel-branches button:focus-visible { border-color: var(--ink-faint); color: var(--ink); outline: none; }
.panel-branches button[aria-expanded="true"] { border-color: var(--shu); color: var(--shu); }
.panel-branches .shadows { color: color-mix(in srgb, var(--shadow) 55%, var(--ink)); }

@keyframes slide { from { transform: translateX(30px); opacity: 0; } }

@media (max-width: 640px) {
  .head { margin-top: 2rem; }
  .head h1 { font-size: 1.8rem; }
  .panel { top: auto; bottom: 0; height: 70vh; border-left: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; }
  .panel-branches { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .panel-branches button { min-height: 36px; }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ——— Sistema minimale: icone Lucide a tratto sottile, sigillo, schede ——— */
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; stroke: currentColor; }
.icon-button {
  display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: none; border: 0; color: var(--ink-soft); cursor: pointer; transition: color 0.3s, background 0.3s;
}
.icon-button:hover, .icon-button:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); outline: none; }
.icon-button .icon { width: 1.25rem; height: 1.25rem; }


/* Campo di ricerca con la lente dentro. */
.seed { position: relative; align-items: center; }
.seed-icon { position: absolute; left: 0.1rem; color: var(--ink-faint); pointer-events: none; }
.seed input { padding-left: 1.8rem; }
.seed button { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Strumenti dell'albero, in basso: icona e parola. */
.forest-nav .icon { width: 1.6rem; height: 1.6rem; }

/* Menu a fogli: escono dalla colonna verso destra, uno accanto all'altro, come carte
   posate sul tavolo. Il velo copre la pagina ma non la colonna, che resta cliccabile. */
:root { --rail-w: 5.4rem; --sheet-w: 21rem; --sheet-step: 0.9rem; }
.veil { position: fixed; inset: 0 0 0 var(--rail-w); z-index: 9; background: color-mix(in srgb, var(--ink) 16%, transparent); animation: fade 0.4s ease; }
.veil[hidden], .sheet[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
@keyframes sheet-in { from { opacity: 0; transform: translateX(-1.2rem); } }
.sheet {
  position: fixed; top: 0; bottom: 0; z-index: calc(10 + var(--i));
  left: calc(var(--rail-w) + var(--i) * var(--sheet-w)); width: var(--sheet-w);
  display: flex; flex-direction: column; padding: 1.4rem 1.6rem 1.4rem; overflow-y: auto;
  background: var(--panel); border-right: 1px solid var(--line);
  box-shadow: 10px 0 28px -22px color-mix(in srgb, var(--ink) 55%, transparent);
  animation: sheet-in 0.45s cubic-bezier(.3,.6,.2,1);
  transition: opacity 0.3s;
}
/* Il foglio sotto resta pieno (niente trasparenze sulla pagina), appena più scuro. */
.sheet.behind { background: color-mix(in srgb, var(--panel) 97%, var(--ink)); }
.sheet-head { display: flex; align-items: center; gap: 0.3rem; margin: 0 -0.6rem 1.2rem 0; }
.sheet-head .back { margin-left: -0.7rem; }
.sheet-title { flex: 1; min-width: 0; margin: 0; font-weight: 400; font-size: 0.75rem; letter-spacing: 0.16em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; color: var(--ink-mute); }
.sheet-intro { margin: 0 0 1.4rem; color: var(--ink-soft); font-style: italic; font-size: 0.9rem; line-height: 1.5; }
.who { display: flex; align-items: flex-start; gap: 0.9rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.avatar { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-soft); }
.who-text { display: flex; flex-direction: column; gap: 0.8rem; padding-top: 0.2rem; min-width: 0; }
.who p { margin: 0; display: flex; flex-direction: column; }
.who strong { font-weight: 400; font-size: 1.1rem; letter-spacing: 0.04em; }
.who span { color: var(--ink-mute); font-style: italic; font-size: 0.85rem; }
.menu-links { display: flex; flex-direction: column; margin-top: 0.6rem; }
.menu-group { margin: 1.4rem 0 0.3rem; color: var(--ink-mute); font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; }
.menu-links a, .sheet-link {
  display: flex; align-items: center; gap: 0.85rem; padding: 0.65rem 0.1rem; width: 100%;
  font: inherit; text-align: left; background: none; border: 0; cursor: pointer;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  transition: color 0.3s, padding 0.3s;
}
.menu-links .icon { color: var(--ink-soft); }
.menu-links a:hover, .menu-links a:focus-visible, .sheet-link:hover, .sheet-link:focus-visible { padding-left: 0.4rem; outline: none; }
.menu-links a[hidden] { display: none; }
.menu-links a[data-soon] { color: var(--ink-soft); }
/* Le voci che vede solo chi amministra: un segno piccolo, con il puntino vermiglio dei titoli. */
.menu-links .admin-only { white-space: nowrap; font-style: italic; }
.menu-links .admin-only::before { content: ""; display: inline-block; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--shu); margin-right: 0.35rem; vertical-align: 0.1em; }
.sheet-link .admin-only { margin-left: auto; }
.sheet-link .admin-only + .chevron { margin-left: 0.4rem; }
.menu-links em { margin-left: auto; font-size: 0.75rem; color: var(--ink-mute); }
.menu-links a.said em { color: var(--shu); }
.menu-links a.out { margin-top: 1.2rem; }
/* La voce che apre un foglio: sottotitolo, freccia e, se il foglio è aperto, il punto vermiglio. */
.sheet-link { position: relative; padding-block: 0.8rem; }
.sheet-link > span, .menu-links a > span { display: flex; flex-direction: column; }
.sheet-link small, .menu-links a small { color: var(--ink-mute); font-style: italic; font-size: 0.8rem; }
.sheet-link .chevron { margin-left: auto; color: var(--ink-mute); transition: transform 0.3s, color 0.3s; }
.sheet-link[aria-expanded="true"] { color: var(--ink); }
.sheet-link[aria-expanded="true"] .chevron { color: var(--shu); transform: translateX(0.2rem); }
.sheet-link[aria-expanded="true"]::before { content: ""; position: absolute; left: -1rem; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--shu); }
.menu-foot { margin-top: auto; padding-top: 1.5rem; display: flex; align-items: center; gap: 0.6rem; color: var(--ink-mute); font-style: italic; font-size: 0.85rem; }

/* Account nel foglio IA. */
.engine-list { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.engine-list li { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.engine-list strong { font-weight: normal; }
.engine-list span { color: var(--ink-soft); font-style: italic; font-size: .9rem; }
.engine-list small { grid-column: 1 / -1; color: var(--ink-mute); font-size: .82rem; }
.account { padding: 1.1rem 0 1.2rem; border-top: 1px solid var(--line); }
.account h3 { font-size: 1.05rem; font-weight: 400; letter-spacing: 0.04em; margin: 0 0 0.4rem; }
.account p { margin: 0.3rem 0; font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.account-actions { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.8rem 0 0.6rem; }
.account-actions button, .account-actions a, .account-code button { font: inherit; font-size: 0.9rem; font-style: italic; color: var(--ink); border: 0; border-bottom: 1px solid var(--ink-faint); background: none; padding: 0; cursor: pointer; text-decoration: none; }
.account-actions button:hover, .account-actions a:hover, .account-code button:hover { border-color: currentColor; }
.account-actions button:disabled, .account-code button:disabled { opacity: .5; cursor: default; border-color: transparent; }
.account-actions [hidden], .account-code[hidden] { display: none; }
.account-code { margin: 0.8rem 0 0.2rem; }
.account-code label { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 0.3rem; }
.account-code-row { display: flex; gap: 0.8rem; align-items: baseline; }
.account-code input { flex: 1; min-width: 0; font: inherit; font-size: 0.9rem; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--ink-faint); padding: 0.3rem 0; outline: none; }
.account-code input:focus { border-color: var(--ink); }
.account .account-note { color: var(--ink-mute); font-size: 0.82rem; }

/* «scrivici»: suggerimenti e segnalazioni. */
.write-form .segmented { flex-wrap: wrap; border-radius: 1.1rem; }
.write-form .segmented button[aria-checked="true"] { background: var(--ink-soft); color: var(--paper); }
.write-label { display: block; margin: 1.2rem 0 .3rem; font-size: .85rem; color: var(--ink-soft); }
.write-form textarea {
  display: block; width: 100%; box-sizing: border-box; min-height: 10rem; resize: vertical; padding: .6rem .7rem;
  font: inherit; font-size: .92rem; line-height: 1.5; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 4px;
}
.write-form textarea:focus { outline: none; border-color: var(--ink-faint); }
.write-context { display: flex; gap: .55rem; align-items: baseline; margin-top: .9rem; font-size: .88rem; color: var(--ink-soft); cursor: pointer; }
.write-context input { accent-color: var(--ink-soft); }
.write-context small { display: block; color: var(--ink-mute); font-size: .82rem; }
.write-form .account-note { min-height: 1.2rem; font-size: .85rem; color: var(--ink-soft); font-style: italic; }

/* Schermi medi: non c'è posto per due fogli affiancati, quindi si impilano con un
   piccolo scarto, e del foglio sotto resta visibile il bordo. */
@media (max-width: 1000px) {
  .sheet { left: calc(var(--rail-w) + var(--i) * var(--sheet-step)); width: min(24rem, calc(100vw - var(--rail-w) - var(--i) * var(--sheet-step))); }
}
@media (prefers-reduced-motion: reduce) { .sheet, .veil { animation: none; } }


/* ——— Impaginazione: colonna a sinistra, parole a sinistra, albero a destra ———
   Asimmetria e spazio vuoto al posto della pila centrata. */
body { display: block; padding: 0; }
.brand { display: inline-flex; color: var(--ink); text-decoration: none; }
.badge { font-style: normal; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.badge[hidden] { display: none; }
.rail {
  position: fixed; inset: 0 auto 0 0; z-index: 6; width: 5.4rem;
  display: flex; flex-direction: column; align-items: center; padding: 1.5rem 0 1.2rem;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-right: 1px solid var(--line);
}
.rail .brand { margin-bottom: 2.4rem; flex-direction: column; align-items: center; gap: 0.45rem; }
.brand-name { font-size: 0.72rem; letter-spacing: 0.28em; margin-right: -0.28em; color: var(--ink-soft); }
/* Logo: l'albero trasparente direttamente sulla carta. Di notte tronco e foglie scure non si
   leggerebbero sul fondo scuro: un piccolo riquadro color carta. */
.logo { display: block; width: 3rem; height: 3rem; }
:root[data-theme="dark"] .logo { background: #f5f2ea; border-radius: 10px; padding: 0.2rem; }
.tabs { display: flex; flex-direction: column; gap: 1.7rem; }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.3rem 0.4rem; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-soft); text-decoration: none; font-style: italic; transition: color 0.3s; }
.tab .icon { width: 1.4rem; height: 1.4rem; }
/* Un'etichetta di due parole («grande foresta») va a capo centrata, stretta. */
.tab > span:not(.badge) { text-align: center; line-height: 1.15; }
.tab:hover, .tab:focus-visible { color: var(--ink); outline: none; }
.tab[aria-current="page"] { color: var(--ink); }
/* Vista attiva: un punto vermiglio sul bordo della colonna, come un piccolo timbro. */
.tab[aria-current="page"]::after {
  content: ""; position: absolute; left: -0.95rem; top: 0.85rem; width: 5px; height: 5px; margin: 0;
  border-radius: 50%; background: var(--shu);
}
.tab .badge { position: absolute; top: -0.25rem; right: calc(-0.15rem + 3px); font-size: 0.68rem; }
.rail-tools { margin-top: auto; display: flex; flex-direction: column; gap: 0.3rem; }

.page {
  margin-left: 5.4rem; min-height: 100vh;
  display: grid; grid-template-columns: minmax(17rem, 25rem) minmax(0, 1fr); align-items: start;
  gap: clamp(1.5rem, 4vw, 4.5rem); padding: clamp(2rem, 7vh, 4.5rem) clamp(1.5rem, 4vw, 4rem) 2rem;
}
.side { position: sticky; top: clamp(2rem, 7vh, 4.5rem); display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.head { text-align: left; margin: 0; }
/* Il nome dell'autore, come sotto l'albero: maiuscoletto, spaziatura leggera. */
.head .word { font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.15; letter-spacing: 0.06em; font-variant: small-caps; text-wrap: balance; margin: 0 0 0.5rem; }
.head .word[hidden], .subtitle[hidden], .motto[hidden] { display: none; }
.subtitle { margin: 0; font-size: 1rem; line-height: 1.5; font-style: italic; color: var(--ink-soft); max-width: 24rem; text-wrap: balance; }
.subtitle a { font-style: normal; font-size: 0.9rem; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--ink-faint); }
.subtitle a:hover { color: var(--ink); border-color: var(--ink); }
.motto { font-size: 1.05rem; line-height: 1.5; max-width: 19rem; text-wrap: balance; }
.mode { margin: 0.8rem 0 0; }
.seed { margin-top: 1rem; width: 100%; }
.engines { margin-top: 0.8rem; }
.status { text-align: left; margin-top: 1.4rem; }
.choices { align-items: flex-start; }
.choices button { text-align: left; padding-left: 0; }
/* L'albero al centro della sua zona, anche in altezza. */
.stage { width: auto; min-width: 0; min-height: calc(100vh - 2 * clamp(2rem, 7vh, 4.5rem) - 2rem); display: flex; flex-direction: column; justify-content: center; align-items: stretch; }
.stage[hidden] { display: none; }
#tree { max-height: calc(100vh - 6rem); min-height: 420px; }
.panel { z-index: 8; }

/* Foresta: occupa la zona dell'albero; a sinistra restano parole e ricerca. */
.in-forest .foot { display: none; }
.page .forest { grid-column: 2; margin: 0; max-width: none; padding: 0; min-width: 0; }
.page .forest .view-title, .page .forest .forest-head { justify-content: flex-start; text-align: left; }
.page .forest .view-title { margin-top: 0.2rem; }

/* Telefono: la colonna diventa una barra in basso, la pagina una colonna sola. */
@media (max-width: 760px) {
  .rail {
    inset: auto 0 0 0; width: auto; height: 3.9rem; flex-direction: row; justify-content: space-around;
    padding: 0 0.8rem; border-right: 0; border-top: 1px solid var(--line);
  }
  .rail .brand { margin: 0; }
  .brand-name { display: none; }
  .logo { width: 2.4rem; height: 2.4rem; }
  .tabs { flex-direction: row; gap: 2rem; }
  .tab > span:not(.badge) { white-space: nowrap; }
  .tab[aria-current="page"]::after { left: 50%; top: auto; bottom: -0.3rem; margin-left: -2.5px; }
  .rail-tools { margin: 0; flex-direction: row; }
  .page { margin-left: 0; grid-template-columns: 1fr; padding: 2rem 16px 5.5rem; gap: 0; }
  /* Su telefono: prima ricerca e autore, poi l'albero, in fondo gli strumenti. */
  .side { display: contents; }
  .stage, .page .forest { order: 1; margin-top: 1.2rem; }
  .foot { order: 2; }
  .stage { min-height: 0; }
  .page .forest { grid-column: 1; }
  #tree { min-height: 320px; max-height: 70vh; }
  .stage { flex-direction: column; align-items: stretch; }
  /* Fogli sopra la barra in basso, a tutta larghezza, impilati. */
  .veil { inset: 0 0 3.9rem 0; }
  .sheet { top: 0; bottom: 3.9rem; left: calc(var(--i) * var(--sheet-step)); width: calc(100vw - var(--i) * var(--sheet-step)); padding-inline: 16px; }
}

/* Sotto l'albero, solo su schermo stretto: i rami come parole grandi da toccare,
   la stessa strada del disegno verso il pannello. */
.branch-list { display: none; }
@media (max-width: 760px) {
  .branch-list:not([hidden]) { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 0.2rem; margin: 0.6rem 0 0; font-style: italic; color: var(--ink-mute); }
  .branch-list button {
    font: inherit; font-size: 1.05rem; color: var(--ink-soft); background: none; border: 0; cursor: pointer;
    min-height: 44px; padding: 0 0.55rem; border-bottom: 1px solid transparent; -webkit-tap-highlight-color: transparent;
  }
  .branch-list button small { font-style: normal; font-size: 0.75rem; color: var(--ink-mute); margin-left: 0.2rem; }
  .branch-list button[aria-expanded="true"] { color: var(--ink); border-color: var(--shu); }
  .branch-list .shadows { color: color-mix(in srgb, var(--shadow) 55%, var(--ink)); }
}

/* Durante la ricerca: tempo trascorso, tempo tipico del motore, annulla. */
.waiting { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; margin: 0.3rem 0 0; font-size: 0.85rem; font-style: italic; color: var(--ink-mute); }
.waiting[hidden] { display: none; }
#elapsed { font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
#typical:empty { display: none; }
#cancel { font: inherit; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--ink-faint); }
#cancel:hover, #cancel:focus-visible { border-color: currentColor; outline: none; }

/* ——— Strumenti dell'albero: azioni e viste in due gruppi con titolo ———
   Un'azione sembra un pulsante, un interruttore sembra un interruttore; il testo
   secondario non scende sotto il contrasto leggibile (--ink-mute). */
.foot[hidden] { display: none; }
.foot {
  width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 1.4rem;
  margin-top: 1.8rem; padding: 1.4rem 0 1rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.95rem;
}
.tool-group { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.tool-title { margin: 0; font-weight: 400; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); }
.foot small { display: block; font-size: 0.82rem; font-style: italic; color: var(--ink-mute); }

/* Azioni: pulsanti veri, il principale con il bordo vermiglio. */
.plant[hidden], .action[hidden] { display: none; }
.plant { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.action {
  display: inline-flex; align-items: center; gap: 0.6rem; text-align: left;
  font: inherit; font-size: 0.95rem; color: var(--ink); background: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 1rem 0.45rem 0.8rem;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.action .icon { color: var(--ink-soft); }
.action small { margin-top: 0.05rem; }
.action:hover, .action:focus-visible { border-color: var(--ink-soft); background: color-mix(in srgb, var(--ink) 4%, transparent); outline: none; }
/* Pulsanti a inchiostro (27 settembre): il vermiglio resta per stati e piccoli accenti. */
.action.primary { border-color: var(--ink); color: var(--ink); }
.action.primary .icon { color: var(--ink); }
.action.primary:hover, .action.primary:focus-visible { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.action.quiet { border-color: transparent; color: var(--ink-soft); padding-left: 0; }
.action:disabled { opacity: 0.55; cursor: default; }

/* Interruttore delle radici: traccia e pallino, il testo spiega che cosa mostra. */
.switch { display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer; color: var(--ink); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { position: relative; flex: none; width: 2.1rem; height: 1.2rem; margin-top: 0.1rem; border-radius: 999px; background: var(--line); transition: background 0.3s; }
.switch .track::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 30%, transparent); transition: transform 0.3s; }
.switch input:checked + .track { background: var(--shadow); }
.switch input:checked + .track::after { transform: translateX(0.9rem); }
.switch input:focus-visible + .track { outline: 2px solid var(--ink-soft); outline-offset: 2px; }
.foot .count { font-variant-numeric: tabular-nums; color: var(--ink-mute); }

/* Ordine delle foglie: due posizioni, quella scelta piena. */
.order { display: flex; flex-direction: column; gap: 0.35rem; }
.order-label { font-size: 0.82rem; font-style: italic; color: var(--ink-mute); }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem; }
/* La lingua dell'interfaccia, nel menu e nel profilo. */
.ui-language { margin: 0.2rem 0 1rem; }
/* Nel menu: sotto nome ed email, stretto quanto le due parole. */
.sheet .ui-language { align-self: flex-start; margin: 0; }
.sheet .ui-language button { font-size: 0.82rem; padding: 0.22rem 0.75rem; }
.segmented button { font: inherit; font-size: 0.88rem; color: var(--ink-soft); background: none; border: 0; border-radius: 999px; padding: 0.3rem 0.8rem; cursor: pointer; transition: background 0.3s, color 0.3s; }
.segmented button:hover, .segmented button:focus-visible { color: var(--ink); outline: none; }
.segmented button[aria-pressed="true"] { background: var(--ink-soft); color: var(--paper); }

/* Legenda e riepilogo: richiudibili, con lo stesso titolo piccolo. */
.legend, .meta-box { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); padding-top: 0.8rem; }
.legend summary, .meta-box summary { cursor: pointer; font-size: 0.9rem; font-style: italic; color: var(--ink-soft); list-style: none; }
.legend summary::-webkit-details-marker, .meta-box summary::-webkit-details-marker { display: none; }
.legend summary::before, .meta-box summary::before { content: "›"; display: inline-block; width: 1rem; color: var(--ink-mute); transition: transform 0.3s; }
.legend[open] summary::before, .meta-box[open] summary::before { transform: rotate(90deg); }
.legend dl { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.55rem 0.6rem; margin: 0.8rem 0 0; align-items: center; }
.legend dt { margin: 0; }
.legend dd { margin: 0; font-size: 0.85rem; line-height: 1.4; color: var(--ink-soft); }
.swatch { width: 2.2rem; height: 1.3rem; display: block; overflow: visible; }
.swatch .leaf { opacity: 0.85; animation: none; }
.swatch .bough { fill: none; stroke: var(--bark); stroke-width: 2.4; stroke-linecap: round; }
.swatch .rootline { fill: none; stroke: var(--bark); stroke-width: 2; stroke-linecap: round; opacity: 0.62; }
.swatch .fallenleaf { fill: var(--shadow); }
.meta { margin: 0.6rem 0 0; font-size: 0.85rem; line-height: 1.6; color: var(--ink-soft); }

/* Di chi è l'albero, e le altre voci per lo stesso nome. */
.others[hidden] { display: none; }
.others { margin: 1rem 0 0; }
.others p { margin: 0; }
.who-is { font-size: 1rem; color: var(--ink); line-height: 1.5; }
.who-is span { color: var(--ink-soft); font-style: italic; }
.who-is a { font-size: 0.85rem; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--ink-faint); }
.who-is a:hover { color: var(--ink); border-color: var(--ink); }
.not-him, .from-work { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem; margin-top: 0.3rem !important; font-size: 0.88rem; color: var(--ink-mute); font-style: italic; }
.not-him button, .from-work button { font: inherit; font-style: normal; color: var(--ink-soft); background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px solid var(--ink-faint); }
.not-him button:hover, .not-him button:focus-visible, .from-work button:hover, .from-work button:focus-visible { color: var(--ink); border-color: var(--ink); outline: none; }
.not-him .free { font-style: italic; }
.book-cited, .about-book { font-size: 0.86rem; color: var(--ink-mute); }
.book-cited a { color: var(--ink-soft); }
.about-book button { font: inherit; color: var(--ink-soft); background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px solid var(--ink-faint); }
.about-book button:hover, .about-book button:focus-visible { color: var(--ink); border-color: var(--ink); outline: none; }
.list li.work-elsewhere, .list li.main-works { counter-increment: none; padding: 0.8rem 0 1rem; border-top: 0; border-bottom: 1px solid var(--ink-faint); }
.list li.work-elsewhere li, .list li.main-works li { counter-increment: none; padding: 0; border-top: 0; }
.list li.work-elsewhere::before, .list li.work-elsewhere li::before, .list li.main-works::before, .list li.main-works li::before { content: none; }
.main-works ol { margin: 0.4rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.main-works button { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; border-bottom: 1px solid var(--ink-faint); }
.main-works button:hover, .main-works button:focus-visible { border-color: var(--shu); outline: none; }
.main-works small { color: var(--ink-mute); font-size: 0.82rem; }
.work-elsewhere ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.work-elsewhere button { font: inherit; color: var(--ink-soft); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; border-bottom: 1px solid var(--ink-faint); }
.work-elsewhere button:hover, .work-elsewhere button:focus-visible { color: var(--ink); border-color: var(--ink); outline: none; }
.work-elsewhere .elsewhere-tree { font-size: 1rem; }
.work-elsewhere small { color: var(--ink-mute); font-size: 0.82rem; }

/* Senza albero il motto fa da intestazione. */
.head:has(#page-title[hidden]) .motto { font-size: 1.35rem; color: var(--ink); max-width: 22rem; }

/* Disposizione della foresta: due posizioni con l'icona della direzione di scorrimento. */
.forest-layout.segmented button { display: inline-flex; align-items: center; gap: 0.35rem; font-style: italic; }
.forest-layout.segmented button .icon { width: 1rem; height: 1rem; }
.forest-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
/* Telefono: in griglia due colonne da scorrere in verticale; in fila una alla volta, in orizzontale. */
@media (max-width: 600px) {
  .forest-grid.tutti { --gw: calc(50cqi - 0.5rem); gap: 1rem; }
  .forest-grid.tutti .sapling figcaption span { font-size: 0.78rem; }
}

/* Le foreste: «tutti gli alberi» e le raccolte con un nome, come linguette; quella aperta piena. */
.forest-list { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.9rem 0 0.7rem; }
.forest-list a, .forest-list button {
  display: inline-flex; align-items: baseline; gap: 0.35rem; font: inherit; font-size: 0.92rem; color: var(--ink-soft);
  text-decoration: none; background: none; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.85rem;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.forest-list a:hover, .forest-list a:focus-visible, .forest-list button:hover, .forest-list button:focus-visible { color: var(--ink); border-color: var(--ink-soft); outline: none; }
.forest-list a[aria-current="page"] { background: var(--ink-soft); border-color: var(--ink-soft); color: var(--paper); }
.forest-list a[aria-current="page"] .count { color: color-mix(in srgb, var(--paper) 80%, transparent); }
.forest-list .count { font-size: 0.8rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.forest-list button { font-style: italic; border-style: dashed; }
.forest-form[hidden], .forest-actions[hidden], .groves[hidden], .grove-form[hidden] { display: none; }
.forest-form, .grove-form { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem; margin: 0.2rem 0 0.8rem; }
.forest-form input, .grove-form input { font: inherit; font-size: 0.95rem; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--ink-soft); padding: 0.25rem 0; min-width: 12rem; outline: none; }
.forest-form input:focus, .grove-form input:focus { border-color: var(--ink); }
.forest-form button, .grove-form button, .forest-actions button { font: inherit; font-size: 0.9rem; font-style: italic; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--ink-faint); padding: 0; cursor: pointer; }
.forest-form button[data-act="cancel"] { color: var(--ink-soft); }
.forest-form button:hover, .grove-form button:hover, .forest-actions button:hover { border-color: currentColor; }
.forest-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; margin: 0 0 0.6rem; }
.forest-actions button[data-act="rename"] { color: var(--ink-soft); }
.forest-actions small { font-size: 0.82rem; font-style: italic; color: var(--ink-mute); }

/* Sotto l'albero piantato: le foreste in cui sta, da accendere e spegnere. */
.groves { display: flex; flex-direction: column; gap: 0.4rem; }
.grove-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.grove-chips button { font: inherit; font-size: 0.88rem; color: var(--ink-soft); background: none; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: 0.22rem 0.75rem; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.grove-chips button:hover, .grove-chips button:focus-visible { border-color: var(--ink-soft); color: var(--ink); outline: none; }
.grove-chips button[aria-pressed="true"] { background: color-mix(in srgb, var(--leaf) 18%, transparent); border-color: var(--leaf); color: var(--ink); }
.grove-chips button[aria-pressed="true"]::before { content: "✓ "; color: var(--leaf); }
.grove-chips .new { font-style: italic; border-style: dashed; }
/* Le categorie suggerite (dalla redazione o da Jev): tratteggiate, finché non si accettano. */
.grove-chips button.suggested[aria-pressed="false"] { border-style: dashed; border-color: var(--ink-soft); }
.grove-suggest { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.grove-suggest small { color: var(--ink-mute); font-style: italic; margin-right: 0.2rem; }
.grove-suggest button { font: inherit; font-size: 0.88rem; color: var(--ink-soft); background: none; cursor: pointer; border: 1px dashed var(--ink-faint); border-radius: 999px; padding: 0.22rem 0.75rem; transition: color 0.3s, border-color 0.3s; }
.grove-suggest button:hover, .grove-suggest button:focus-visible { border-color: var(--ink-soft); color: var(--ink); outline: none; }

/* Lingua delle risorse: stesso selettore dell'ordine; «originale» spento se la lingua non è nota. */
.segmented button:disabled { opacity: 0.45; cursor: default; }
#lang-note:empty { display: none; }

/* ——— Condividere: dialogo con link, QR e file ——— */
.share {
  width: min(40rem, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  border: 1px solid var(--line); border-radius: 10px; padding: 1.4rem 1.6rem 1.2rem;
  background: var(--panel); color: var(--ink); font-family: var(--serif);
}
.share::backdrop { background: color-mix(in srgb, var(--paper) 55%, transparent); backdrop-filter: blur(2px); }
.share[open] { animation: slide 0.4s cubic-bezier(.3,.6,.2,1); }
.share-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.share-head h2 { margin: 0; font-weight: 400; font-style: italic; font-size: 1.3rem; }
.share-intro { color: var(--ink-mute); font-style: italic; font-size: 0.92rem; margin: 0.4rem 0 1.1rem; }
.share-link { display: flex; gap: 0.5rem; }
.share-link input {
  flex: 1; min-width: 0; font: inherit; font-size: 0.85rem; color: var(--ink-soft);
  background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 0.35rem 0; outline: none;
}
.share-link button, .share .link-button {
  font: inherit; font-style: italic; background: none; border: 0; border-bottom: 1px solid var(--ink-faint);
  color: var(--ink-soft); cursor: pointer; padding: 0.1rem 0.15rem;
}
.share-link button:hover, .share .link-button:hover { color: var(--ink); border-color: var(--ink); }
.share-link button[hidden], .share .link-button[hidden], #share-links[hidden] { display: none; }
.share-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; margin-bottom: 1.1rem; }
.share-card:has(.share-qr[hidden]) { grid-template-columns: 1fr; }
.share-preview { color: var(--ink); min-width: 0; }
.share-preview figure { margin: 0; text-align: center; }
.share-preview svg { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; }
.share-preview .label, .share-preview .name, .share-preview .fallen, .share-preview .root-label { display: none; }
.share-preview figcaption { font-variant: small-caps; letter-spacing: 0.08em; }
.share-preview.many { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 10rem)); justify-content: center; gap: 0.6rem; }
.share-preview.many figcaption { font-size: 0.85rem; font-variant: normal; letter-spacing: 0; font-style: italic; }
.share-preview .more { grid-column: 1 / -1; text-align: center; color: var(--ink-mute); font-style: italic; margin: 0; }
.share-qr[hidden] { display: none; }
.share .action span { display: flex; flex-direction: column; align-items: flex-start; }
@media (max-width: 560px) { .share-card { grid-template-columns: 1fr; } }
.share-qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
/* Il QR resta nero su bianco anche di notte: i lettori non leggono i colori invertiti. */
#share-qr { width: min(15rem, 100%); background: #fff; border-radius: 6px; line-height: 0; }
#share-qr:empty { display: none; }
#share-qr svg { width: 100%; height: auto; }
.share-qr figcaption, .share-note { color: var(--ink-mute); font-style: italic; font-size: 0.85rem; }
.share-note { margin: 0.6rem 0 0; }
.share-note:empty { display: none; }
.share-note.warn { color: var(--bloom); }
.share-note code { font-size: 0.8rem; }
.share-file { margin: 1.3rem 0 0; }
.share-forest { display: inline-flex; align-items: center; gap: 0.3rem; font: inherit; font-style: italic; background: none; border: 0; color: var(--ink-soft); cursor: pointer; border-bottom: 1px solid transparent; margin-right: 0.6rem; }
.share-forest:hover, .share-forest:focus-visible { color: var(--ink); border-color: var(--ink-soft); outline: none; }
.share-forest[hidden] { display: none; }
.list .root-name { font-weight: 400; color: var(--ink); font-size: 1.05rem; }

/* Bibliografia: ogni riga e ogni foglia rappresentano un libro, senza giudizi sulle fonti. */
.panel.bibliography-panel { width: min(42rem, 100%); }
.list li.book { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.8rem; padding: 1rem 0; }
.list li.book::before, .list li.book-sources::before { content: none; }
.book-year { color: var(--ink-mute); font-variant-numeric: tabular-nums; padding-top: 0.15rem; }
.book-title { font-weight: 400; font-size: 1.12rem; line-height: 1.4; overflow-wrap: anywhere; }
.book-links { margin: 0.5rem 0 0; font-size: 0.85rem; line-height: 1.7; }
/* Un libro che il catalogo attribuisce in modo dubbio (src/bibliography.mjs, catalogProblem): si tiene, e si dice. */
.book-doubt { color: var(--shu); font-style: italic; }
.book-more { margin: 0.1rem 0 0; font-size: 0.85rem; }
.book-more summary { cursor: pointer; color: var(--ink-mute); font-style: italic; width: max-content; }
.book-more summary:hover { color: var(--ink); }
.book-more .book-links { margin-top: 0.3rem; }
.list li.book-sources { padding-left: 0; }
.book-sources summary { cursor: pointer; color: var(--ink-mute); }
.book-sources ul { list-style: none; padding: 0; }
.book-sources li { padding-left: 0; font-size: 0.9rem; }
.book-sources li::before { content: none; }
#bibliography-actions { margin-bottom: 0.75rem; }

.book-owned { margin-top: .35rem; padding: .3rem .7rem; border: 1px solid var(--ink-mute); border-radius: 2rem; font: inherit; font-size: .85rem; color: var(--ink); background: transparent; cursor: pointer; }
.book-owned[aria-pressed="true"] { color: var(--shu); border-color: var(--shu); }
.book-owned:disabled { opacity: .55; cursor: wait; }
.fruit.wanted { fill: var(--paper); stroke: var(--shu); stroke-width: 1.4; }
.book-owned-status { margin-left: .65rem; font-size: .82rem; color: var(--ink-mute); }
.book-vote { margin: .35rem 0 0; font-size: .85rem; }
.book-vote .book-owned { margin: .2rem .3rem 0 0; }
.book-vote-count { display: block; margin-top: .25rem; font-size: .82rem; color: var(--ink-mute); }
.fruit { fill: var(--shu); stroke: var(--shu); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; animation: fruit-appear .5s ease-out forwards; }
@keyframes fruit-appear { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
/* Filtri, ridimensionamenti e bibliografia tardiva aggiornano un albero già cresciuto. */
/* Già cresciuto: tutto subito, tranne il ramo appena arrivato (`.growing`) e il germoglio che respira. */
svg.grown :not(.growing, .growing *, .loading > .wood) { animation-duration: 0s !important; animation-delay: 0s !important; }
svg.grown .crown .fruit { animation-duration: .5s !important; }
@media (prefers-reduced-motion: reduce) { svg.grown .crown .fruit { animation-duration: 0s !important; } }

/* Il tuo giudizio su una risorsa, nel pannello: come «lo possiedo», leggero. */
.votes { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .5rem; }
.votes button { padding: .25rem .7rem; border: 1px solid var(--line); border-radius: 2rem; font: inherit; font-size: .82rem; font-style: italic; color: var(--ink-mute); background: transparent; cursor: pointer; }
.votes button:hover { color: var(--ink); border-color: var(--ink-faint); }
.votes button[aria-pressed="true"] { color: var(--shu); border-color: var(--shu); font-style: normal; }
.votes button:disabled { opacity: .55; cursor: wait; }
.vote-status { font-size: .82rem; color: var(--ink-mute); }

/* Foresta a blocchi: il pulsante per gli alberi successivi, in fondo alla fila o alla griglia. */
.forest-more { display: flex; align-items: center; justify-content: center; }
.forest-grid.fila .forest-more { flex: 0 0 auto; padding: 0 1.4rem; scroll-snap-align: center; }
.forest-grid.tutti .forest-more { grid-column: 1 / -1; padding: .6rem 0; }
.sapling.opening { cursor: progress; opacity: .6; transition: opacity .2s; }

/* «Arricchisci»: i rami poveri come chip da accendere, e il riconoscimento del bosco. */
.enrich { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.enrich[hidden] { display: none; }
.enrich .grove-chips:empty { display: none; }
.enrich .grove-chips button:disabled { opacity: 0.45; cursor: default; }
.enrich-note { font-size: 0.82rem; font-style: italic; color: var(--ink-mute); }
.enrich-note:empty { display: none; }

/* Rete sotterranea: dalla radice al suo albero, e di chi questo autore è radice. */
.root-link { margin: 0.4rem 0 0; font-size: 0.88rem; }
.root-link button { font: inherit; font-style: italic; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--ink-faint); padding: 0; cursor: pointer; }
.root-link button:hover, .root-link button:focus-visible { border-color: currentColor; outline: none; }
.root-link small { color: var(--ink-mute); font-size: 0.82rem; }
.root-of[hidden] { display: none; }
.root-of { margin: 0.35rem 0 0; }

/* CookieYes: banner e pulsante del consenso in basso a destra, lontani dalla colonna del menu
   (a sinistra); su telefono sopra la barra in basso (3,9rem). Le stesse posizioni vanno scelte
   anche nelle impostazioni di CookieYes: queste regole valgono se lì restano a sinistra. */
.cky-consent-container.cky-box-bottom-left { left: auto !important; right: 40px !important; }
.cky-btn-revisit-wrapper { left: auto !important; right: 16px !important; }
@media (max-width: 760px) {
  .cky-consent-container { bottom: calc(3.9rem + 12px) !important; }
  .cky-btn-revisit-wrapper { bottom: calc(3.9rem + 12px) !important; }
}

/* «altre N» / «meno»: oltre 20 categorie, nella foresta e sotto l'albero. */
.forest-list button.more, .grove-chips button.more { font-style: normal; border-style: solid; color: var(--ink-mute); }
.forest-list button.more::after, .grove-chips button.more::after { content: " ▾"; font-size: 0.75em; }
.forest-list button.more[aria-expanded="true"]::after, .grove-chips button.more[aria-expanded="true"]::after { content: " ▴"; }

/* Le note del lettore: un pulsante discreto che mostra l'inizio della nota, un'area di testo
   che si salva da sola; sulle foglie annotate un punto d'inchiostro. */
.note { margin-top: .5rem; width: 100%; }
.note-toggle {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem; max-width: 100%; text-align: left;
  font: inherit; font-size: .82rem; font-style: italic; color: var(--ink-mute); background: transparent;
  border: 0; border-bottom: 1px dashed var(--line); padding: .1rem 0; cursor: pointer;
}
.note-toggle:hover, .note-toggle:focus-visible { color: var(--ink); border-bottom-color: var(--ink-faint); outline: none; }
.note-toggle small { flex-basis: 100%; font-style: normal; color: var(--ink-soft); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-mark { display: inline-block; width: .38rem; height: .38rem; border-radius: 50%; background: var(--ink); align-self: center; }
.note-edit { margin-top: .4rem; }
.note-edit textarea {
  display: block; width: 100%; box-sizing: border-box; min-height: 6rem; resize: vertical; padding: .6rem .7rem;
  font: inherit; font-size: .92rem; line-height: 1.5; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 4px;
}
.note-edit textarea:focus { outline: none; border-color: var(--ink-faint); }
.note-status { display: block; min-height: 1.1rem; margin-top: .2rem; font-size: .8rem; font-style: italic; color: var(--ink-mute); }
/* Sotto albero e radici, al centro della zona del disegno, allineata a sinistra come il testo. */
.tree-notes[hidden] { display: none; }
/* Riepilogo dei rami, sotto le note: chiuso, come «come si legge l'albero». */
.tree-summary[hidden] { display: none; }
.tree-summary { width: min(100%, 36rem); margin: 1.2rem auto 0; padding-top: 0.8rem; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-sizing: border-box; }
.tree-summary summary { cursor: pointer; font-size: 0.9rem; font-style: italic; color: var(--ink-soft); list-style: none; }
.tree-summary summary::-webkit-details-marker { display: none; }
.tree-summary summary::before { content: "›"; display: inline-block; width: 1rem; color: var(--ink-mute); transition: transform 0.3s; }
.tree-summary[open] summary::before { transform: rotate(90deg); }
.tree-summary ul { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.tree-summary li small { color: var(--ink-mute); font-size: 0.82rem; }
.tree-summary li p { margin: 0.15rem 0 0; font-size: 0.88rem; line-height: 1.45; color: var(--ink-soft); }
.tree-summary button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-align: left; }
.summary-branch { color: var(--ink) !important; border-bottom: 1px solid var(--ink-faint) !important; }
.summary-item:hover, .summary-branch:hover { color: var(--ink) !important; border-bottom: 1px solid var(--shu) !important; }
.tree-notes { width: min(100%, 36rem); margin: 1.4rem auto 0; padding-top: 1.1rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.7rem; color: var(--ink-soft); font-size: 0.95rem; }
.tree-note { width: 100%; }
.tree-note .note { margin-top: 0; }
.tree-note .note-toggle { font-size: .92rem; }
.tree-note textarea { min-height: 9rem; }
.note-dot { fill: var(--ink); opacity: .85; }
/* I titoli delle opere principali sulla freccia della bibliografia. */
.main-title { font-family: var(--serif); font-style: italic; font-size: 12px; fill: var(--ink-soft); opacity: 0; animation: appear 1.2s ease forwards; pointer-events: none; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.sapling .main-title, .share-preview .main-title { display: none; }

/* La guida del primo accesso (tour.js): un riquadro sopra l'app, che resta visibile dietro.
   Dissolvenze lente, niente rimbalzi; su telefono sopra la barra in basso. */
.tour { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem;
  background: color-mix(in srgb, var(--paper) 55%, transparent); animation: tour-fade 0.9s ease both; }
.tour-card { width: min(30rem, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.4rem 1.6rem 1.2rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--ink) 60%, transparent); }
.tour-card.tour-in > :not(.tour-head) { animation: tour-fade 0.8s ease both; }
.tour-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 0.9rem; color: var(--ink-mute); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; }
.tour-head .link { text-transform: none; letter-spacing: 0; font-size: 0.85rem; }
.tour h2 { margin: 0 0 0.8rem; font-weight: 400; font-size: 1.35rem; letter-spacing: 0.02em; }
.tour h2:focus { outline: none; }
.tour-image { display: block; width: 100%; height: auto; margin: 0 0 0.9rem; border: 1px solid var(--line); border-radius: 4px; }
.tour-text { margin: 0 0 0.8rem; line-height: 1.6; color: var(--ink-soft); }
.tour-authors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0.4rem 0 0.6rem; }
.tour-author { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.6rem 0.75rem; cursor: pointer;
  font: inherit; text-align: left; color: var(--ink); background: none; border: 1px solid var(--line); border-radius: 4px; }
.tour-author:hover, .tour-author:focus-visible { border-color: var(--ink-soft); }
.tour-author small { color: var(--ink-mute); font-size: 0.82rem; }
.tour-link { color: var(--ink); }
.tour-nav { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0 0; }
.tour-next { font: inherit; padding: 0.45rem 1.2rem; cursor: pointer; color: var(--paper); background: var(--ink); border: 1px solid var(--ink); border-radius: 4px; }
.tour-next:focus-visible, .tour-author:focus-visible { outline: 2px solid var(--shu); outline-offset: 2px; }
@keyframes tour-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) {
  .tour { place-items: end center; padding: 0.6rem 0.6rem calc(4.2rem + env(safe-area-inset-bottom)); }
  .tour-card { max-height: calc(100vh - 6rem); padding: 1.1rem 1.1rem 1rem; }
  .tour-authors { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .tour, .tour-card.tour-in > * { animation: none; } }