/* Linee di combo — foglio di stile.
   Fondo scuro perche' le scansioni delle carte ci stanno sopra senza
   sbiadire, e perche' il diagramma vive di contrasto fra la spina dorsale
   accesa e tutto il resto spento. */

:root {
  --sfondo:      #12141a;
  --pannello:    #191c25;
  --alzato:      #212633;
  --bordo:       #2c3242;
  --bordo-forte: #3d465c;
  --testo:       #e7e9f0;
  --spento:      #868ea3;
  --blu:         #5f9fd8;
  --rosso:       #d97a5f;
  --oro:         #d7b25a;
  --verde:       #6fbf8b;
  --r: 7px;
}

* { box-sizing: border-box; }

/* `hidden` deve battere le regole di layout, sempre. Il `[hidden] {display:none}`
   arriva dal browser, e qualunque `display` scritto qui lo vince — stessa
   specificita', ma l'autore passa davanti allo user-agent. Cosi' `.modo` e `nav`
   restavano a schermo anche con la proprieta' `hidden` a true: il selettore
   Line/Phases compariva sui mazzi senza fasi (tutti quelli a imbuto: Inalla,
   Godo, Sisay, Zirda...) e le schede delle rotte restavano visibili nella vista
   a fasi, dove le colonne sono gia' l'indice. Segnalato da Kevin il 2026-09-08.
   Sta qui in cima e non su un selettore preciso perche' e' la classe intera:
   ogni elemento con un `display` esplicito ha lo stesso difetto. */
[hidden] { display: none !important; }

/* Le barre di scorrimento, tutte con la stessa faccia. Sta qui in cima e senza
   un selettore davanti perche' vale per ogni area che scorre — l'indice delle
   linee, il pannello degli step, il grafo nei due versi — invece che per le due
   che mi vengono in mente adesso: quelle di sistema sono chiare e larghe, e su
   un fondo scuro sono la cosa piu' vistosa della pagina.
   Il bordo trasparente con `background-clip: padding-box` fa da margine senza
   sapere che colore c'e' dietro: il grafo sta su `--sfondo`, il pannello e
   l'indice su `--pannello`, e un bordo tinto sarebbe giusto solo su uno dei
   due. */
/* **I colori qui sono letterali e non `var()`**: le pseudo-classi
   `::-webkit-scrollbar` non ereditano le proprieta' custom, e `background:
   var(--bordo-forte)` viene scartato in silenzio — il browser accetta la regola
   e la lascia senza colore, cioe' la barra resta quella di sistema. Si vede
   solo chiedendo a `document.styleSheets` cosa ha capito: nel `cssText` il
   `background-color` era vuoto. Se questi colori cambiano vanno cambiati anche
   `--bordo-forte` e il suo hover, che sono gli stessi. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: #3d465c;          /* --bordo-forte */
  background-clip: padding-box;
  border: 3px solid transparent;      /* margine, non colore: vedi sopra */
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background-color: #5b6580; }
::-webkit-scrollbar-corner { background: transparent; }
/* Firefox non conosce quelle pseudo-classi e resterebbe con le barre di
   sistema; le sue proprieta' standard pero' spengono le regole qui sopra su
   Chrome, quindi vanno date solo a chi non ha le altre. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--bordo-forte) transparent; }
}

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------------------------------------------------------- intestazione */

header {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 10px 18px;
  background: var(--pannello);
  border-bottom: 1px solid var(--bordo);
  flex: 0 0 auto;
}

h1 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: .2px; }
h1 em { color: var(--spento); font-style: normal; font-weight: 400; }

/* L'indice delle linee: verticale, dentro la colonna di sinistra.
   In orizzontale non ci stava — Tayam ha diciannove combo, l'intestazione ne
   mostrava otto in 92 px su 299 di contenuto, e le altre undici erano dietro
   uno scorrimento interno senza barra ne' sfumatura: non sembrava «ce n'e'
   dell'altro», sembrava rotto. Segnalato da Kevin il 2026-09-08.
   `max-height` e non `flex: 1`: l'indice non deve mangiarsi il pannello degli
   step, che e' quello che si legge davvero. */
nav#tab {
  display: block;
  /* `0 0 auto` e non `0 1 auto`: potendo restringersi, l'indice si faceva
     comprimere dal pannello degli step — 320 px invece dei 383 che il tetto
     concede, cioe' tre linee in meno a schermo per niente. */
  flex: 0 0 auto;
  max-height: 50%;
  overflow-y: auto;
  margin: 0 -8px 12px;
  padding: 0 8px 10px;
  border-bottom: 1px solid var(--bordo);
}
/* La sfumatura in fondo si accende solo quando l'indice davvero straborda —
   e' l'unico segno che dice «ce n'e' dell'altro». Senza, l'ultima voce
   visibile e' tagliata a meta' e sembra un difetto, che e' esattamente
   l'impressione che dava la vecchia barra in cima. */
/* Due strati di maschera, non uno: la sfumatura in fondo, piu' una striscia
   opaca a destra larga quanto la barra di scorrimento. La maschera si applica
   al riquadro intero, barra compresa, e con un solo strato avrebbe spento
   proprio il segno che dice «continua» — insieme al testo che sfuma. */
nav#tab.sfuma {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent),
                      linear-gradient(to left, #000 11px, transparent 11px);
  mask-image: linear-gradient(#000 calc(100% - 22px), transparent),
              linear-gradient(to left, #000 11px, transparent 11px);
}
nav button, .modo button, #piega {
  background: var(--alzato);
  color: var(--spento);
  border: 1px solid var(--bordo);
  border-radius: var(--r);
  padding: 5px 11px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: .12s;
}
nav button:hover, .modo button:hover, #piega:hover { color: var(--testo); border-color: #47506a; }
#piega.on { background: #24406030; border-color: var(--blu); color: var(--testo); }
nav button.on {
  background: #24406030;
  border-color: var(--blu);
  color: var(--testo);
}

/* Una voce dell'indice: sigla, nome, quanti step. Sta dopo il blocco condiviso
   perche' lo corregge — a parita' di specificita' vince l'ultima, e con queste
   regole prima le voci restavano bottoni squadrati con il bordo acceso. */
/* Righe strette: con diciannove combo (Tayam) ogni pixel di riga costa una
   voce che non si vede. A 31 px se ne vedevano otto su diciannove, cioe' lo
   stesso numero della barra in cima che questa sostituisce; a 23 se ne vedono
   sedici, e per tredici mazzi su diciassette l'indice ci sta tutto. */
nav button {
  display: flex; align-items: baseline; gap: 9px;
  width: 100%; text-align: left;
  margin-bottom: 0; padding: 3px 8px;
  font-size: 12.5px; line-height: 1.4;
  background: none; border-color: transparent;
}
nav button:hover { background: var(--alzato); border-color: var(--bordo); }
/* La sigla e' quella che il primer scrive — «4a)» — dove c'e'; il «#3» del sito
   accanto a un nome che comincia per «3)» diceva due volte la stessa cosa. */
nav button b {
  flex: 0 0 28px; text-align: right;
  color: var(--blu); font-weight: 600;
}
nav button.on b { color: var(--oro); }
/* Il nome va a capo, non si taglia. Su Tayam due linee si chiamano «Marvin,
   Murderous Mimic (instant) — With Multi-Mana Creature» e «— With Haste
   Enabler»: i puntini cadevano esattamente dove sta la differenza, e l'indice
   mostrava due voci identiche. Una riga in piu' costa meno di una voce
   indistinguibile. Segnalato da Kevin il 2026-09-08. */
nav button > span { flex: 1; min-width: 0; }
nav button i { flex: none; font-style: normal; font-size: 11px; color: var(--spento); }

.indice-cap, .indice-gruppo {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  line-height: 1.35;
}
.indice-cap { color: var(--spento); margin: 0 0 6px; }
.indice-gruppo { color: var(--blu); margin: 9px 0 3px; }
.indice-gruppo:first-of-type { margin-top: 0; }

/* Testo/Carte in fondo all'intestazione, spinto a destra. Prima galleggiava in
   basso a sinistra sulla colonna del grafo, per restare a portata «a meta' di
   tremila pixel» — ma l'intestazione non scorre mai via (a scorrere e' solo
   `#grafo`), quindi non c'era niente da guadagnare, e in cambio il riquadro si
   posava sopra i nodi: sull'imbuto di Inalla copriva l'apertura del ciclo, su
   Tayam il fondo della prima colonna di pastiglie. */
#barra { margin-left: auto; }
#barra button { padding: 5px 12px; }

.modo { display: flex; gap: 0; }
.modo button { border-radius: 0; }
.modo button:first-child { border-radius: var(--r) 0 0 var(--r); }
.modo button:last-child  { border-radius: 0 var(--r) var(--r) 0; border-left: 0; }
.modo button.on { background: #24406030; border-color: var(--blu); color: var(--testo); }

/* ---------------------------------------------------------------- corpo */

main { flex: 1; display: flex; min-height: 0; }

/* niente padding in cima: il posto della prima riga ce l'ha la striscia, che
   dev'essere attaccata al bordo per potercisi appoggiare scorrendo */
#grafo { flex: 1; overflow: auto; padding: 0 18px 24px; min-width: 0; }
.diagramma { position: relative; }
#archi { position: absolute; inset: 0; pointer-events: none; overflow: visible; }

/* Le intestazioni di corsia restano in cima mentre il grafo scorre. Prima
   erano tre nodi del diagramma come gli altri e sparivano al primo colpo di
   rotella: su Inalla il diagramma e' alto 2199 px, e a meta' pagina non si
   sapeva piu' quale colonna fosse quale. In flusso e non assoluta, cosi' i
   nodi cominciano *sotto* di lei (`TESTA`) invece che dietro un velo. */
.striscia {
  position: sticky; top: 0; z-index: 6;
  height: 44px; padding-top: 20px;
  background: var(--sfondo);
  box-shadow: 0 8px 10px -8px #0b0d12;
}
.striscia .corsia {
  position: absolute; bottom: 0;
  padding: 0 4px;
  font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--spento);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.striscia .hi { color: var(--verde); }
.striscia .hs { color: var(--blu); }
.striscia .hd { color: var(--rosso); }

/* ---------------------------------------------------------------- nodi */

.nodo {
  position: absolute;
  background: var(--alzato);
  border: 1px solid var(--bordo);
  border-radius: var(--r);
  padding: 6px 9px;
  cursor: pointer;
  transition: border-color .12s, background .12s, opacity .12s;
  overflow: hidden;
}
.nodo:hover { border-color: #566083; }

.nodo .cap {
  font-size: 11.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--spento);
  margin-bottom: 2px;
}
/* Cinque righe e non tre: a tre, lo step 8 di un'apertura di Inalla finiva in
   «...then join the repeating cycl…», cioe' il taglio cadeva sull'informazione.
   Il tetto serve ancora — un nodo alto quanto vuole sfonda la corsia — ma a
   cinque righe nessuno degli step scritti finora ci arriva.
   Il numero qui e quello di `righe()` in app.js devono restare uguali: la
   prima decide quanto si vede, la seconda quanto e' alta la scatola, e se
   divergono il testo viene tagliato a meta' riga invece che coi puntini. */
.nodo .txt {
  font-size: 14px;
  line-height: 1.36;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* La mappa a fasi resta compatta: li' le pastiglie sono diciannove e servono a
   scegliere, non a leggere — il testo intero sta un clic piu' in la'. */
.nodo.pastiglia .txt { -webkit-line-clamp: 3; }

/* la spina dorsale: il numero e' l'ancora di tutto il resto del primer */
.nodo.passo { border-color: #35405c; background: #1d2331; }
/* Combinatore figlio, non discendente: cosi' la regola del badge non puo'
   raggiungere niente dentro il testo dello step, qualunque classe usi. */
.nodo.passo > .n {
  position: absolute;
  left: 8px; top: 6px;
  width: 19px; height: 19px;
  border-radius: 5px;
  background: #2c3a56;
  color: var(--blu);
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}
.nodo.passo .txt, .nodo.passo .carte { margin-left: 28px; }

/* Le teste di rotta sono condizioni, non passi: «se Culling the Weak non
   c'e'» non e' qualcosa che si fa, e' il caso in cui si finisce. Forma a
   pastiglia — angolo sinistro molto tondo — perche' non si confondano coi box
   squadrati della sequenza. */
.nodo.ingresso, .nodo.deviazione {
  border-radius: 22px 8px 8px 22px;
  padding-left: 15px;
}
.nodo.ingresso { border-color: #3a4a3c; background: #1b2320; }
.nodo.ingresso .cap { color: var(--verde); }

.nodo.deviazione {
  border-color: #4a3c34; background: #241d19;
  border-style: dashed;
}
.nodo.deviazione .cap { color: var(--rosso); }

.cap .se {
  display: inline-block;
  background: #ffffff14;
  border-radius: 4px;
  padding: 0 5px;
  margin-right: 6px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}
.cap .se.avvio {
  background: #2e4a34; color: #a8dcb6; font-style: normal; font-weight: 600;
}

/* Il titolo di un gruppo nella vista a fasi. Le intestazioni di corsia
   dell'imbuto non stanno piu' qui: sono passate nella striscia fissa. */
.nodo.intestazione {
  border: 0; background: none; padding: 0 4px;
  display: flex; align-items: flex-end;
  font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--spento); cursor: default;
}
.nodo.intestazione:hover { border: 0; }
/* Il titolo di un gruppo e' lungo quanto il pannello del primer: va a capo, e
   quindi si allinea in alto e si legge dalla prima riga. */
.nodo.intestazione.gruppo {
  align-items: flex-start; line-height: 1.35; color: var(--blu);
  border-bottom: 1px solid var(--bordo); padding-bottom: 4px;
}

/* Gli step presi in prestito da un'altra win con: presenti a tutti gli
   effetti, ma si vede che vengono da un'altra pagina del primer. */
.nodo.passo.prestato {
  border-color: #35405c; background: #191d28; border-style: dashed;
}
.nodo.passo.prestato > .n { background: #263049; color: #7e8db0; }

/* Gli step che stanno dentro una catena laterale: rientrati dalla loro testa e
   tinti come la corsia, cosi' non si confondono con la spina dorsale. */
.nodo.sub-ingresso { border-color: #32432f; background: #182018; }
.nodo.sub-deviazione { border-color: #46372e; background: #201a16; }
.nodo.sub > .n { background: #333b2e; color: #9fc08c; }
.nodo.sub-deviazione > .n { background: #40332a; color: #d3a184; }

.nodo.ciclo {
  border: 2px double var(--oro);
  background: #241f14;
  text-align: center;
}
.nodo.ciclo .cap { color: var(--oro); letter-spacing: 1.4px; }

/* I passi del ciclo: stessa forma di quelli della spina, ma in oro e
   rientrati, perche' si veda che appartengono al giro e non alla salita. */
.nodo.passo.ciclico { border-color: #4d4123; background: #201c11; }
.nodo.passo.ciclico > .n { background: #4a3d1c; color: var(--oro); }

.nodo.ripete {
  border: 1px dashed var(--oro);
  background: #1d190f;
  text-align: center;
  color: var(--oro);
  display: grid; place-items: center;
}
.nodo.ripete .txt { font-size: 12px; letter-spacing: .3px; }

.nodo.fine { border-color: var(--verde); background: #16241c; text-align: center; }
.nodo.fine .cap { color: var(--verde); }

.nodo.prefisso {
  border-style: dotted; border-color: #4a4a5c; background: #1a1a22;
  color: var(--spento);
}

/* selezione: quello che non e' sulla rotta si spegne, non sparisce —
   serve ancora come mappa */
.diagramma.scelta .nodo { opacity: .26; }
.diagramma.scelta .nodo.viva { opacity: 1; }
/* Le rotte richiuse sono l'eccezione: non sono contorno, sono il menu di cosa
   altro potresti scegliere, e a 0.26 il loro «6 steps, click to open» non si
   leggeva. */
.diagramma.scelta .nodo.richiusa { opacity: .58; }
.nodo.richiusa .chiusa { color: var(--blu); }
.nodo.viva { border-color: var(--oro); box-shadow: 0 0 0 1px #d7b25a55; }
.nodo.corrente { background: #3a3016; border-color: var(--oro); opacity: 1; }

/* ------------------------------------------------------------- miniature */

/* Le carte stanno intere e ad aspetto giusto (745x1040, quello vero): sono un
   di piu' sopra al testo dello step, non un suo sostituto — servono a
   ricordare l'ordine a memoria visiva, e una carta schiacciata o ritagliata a
   caso non si riconosce. */
/* Lo stacco orizzontale sta fra un'azione e l'altra, non fra due carte: dentro
   `.azione` le carte restano vicine perche' sono la stessa mossa, e quello che
   si vede a colpo d'occhio e' dove finisce una mossa e comincia la successiva.
   Riga stretta e colonna larga: le carte che vanno a capo non devono
   allontanarsi anche in verticale. */
.carte { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 5px; align-items: flex-start; }
.azione { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }
.carta-box { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.costo-carta { display: flex; gap: 2px; }
.costo-carta .sym, .costo-carta .pip { width: 13px; height: 13px; vertical-align: 0; }
.carte img {
  width: 58px; aspect-ratio: 745 / 1040;
  object-fit: cover;
  border-radius: 3px; display: block; background: #0d0f14;
}
.carte .manca {
  width: 58px; aspect-ratio: 745 / 1040; border-radius: 3px;
  border: 1px dashed var(--bordo); display: grid; place-items: center;
  font-size: 8.5px; color: var(--spento); text-align: center; line-height: 1.15;
  padding: 3px; overflow: hidden;
}

/* La carta che questa rotta non ha. Resta al suo posto — gli step sotto sono
   quelli della linea principale e la nominano — ma spenta e sbarrata, perche'
   la fila di immagini si legge come «ecco cosa cercare» e questa e' l'unica
   che non si deve cercare. */
.carta-box.sparita { position: relative; }
.carta-box.sparita img, .carta-box.sparita .manca { filter: grayscale(1); opacity: .3; }
.carta-box.sparita::after {
  content: "✕";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 26px; font-weight: 700; color: #e2707077;
  pointer-events: none;
}
a.carta.sparita { text-decoration: line-through; opacity: .7; }

/* La carta letta al posto di quella che non c'e': si vede che quella riga e'
   stata riscritta, cosi' nessuno la cerca nel primer com'e' scritta qui. */
a.carta.sostituita { border-bottom: 1px dashed var(--verde); color: #a6d8b6; }
/* La rotta chiusa perche' un'altra e' accesa: dice che gli step ci sono e come
   riaprirli, cosi' la piegatura non sembra una rotta senza linea. */
.nodo .chiusa {
  display: block; margin-top: 4px;
  font-size: 9.5px; letter-spacing: .03em; color: var(--spento);
}

/* L'etichetta sta **sotto il costo**, come terza riga della colonna, non
   sovrapposta alla carta: da sovrapposta copriva esattamente i simboli di mana,
   cioe' il dato che serve per giocarla. Segnalato da Kevin il 2026-09-07. */
.carta-box.sostituita::after {
  content: 'instead';
  font-size: 8.5px; letter-spacing: .04em; line-height: 1.35;
  color: #d7ecdd; background: #2e4a34d9; padding: 0 5px; border-radius: 3px;
}

/* ---------------------------------------------------------------- archi */

#archi path { fill: none; stroke: #3a4258; stroke-width: 1.4; }
#archi path.arco { stroke: #414a63; }
#archi path.viva { stroke: var(--oro); stroke-width: 2; }
#archi path.tratteggio { stroke-dasharray: 4 3; }
#archi .punta { fill: #414a63; }
#archi .punta.viva { fill: var(--oro); }

/* --------------------------------------------------------------- costi */

/* Il simbolo vero della carta. Vettoriale, quindi la stessa sorgente serve
   i 15px del diagramma e i 17px del pannello senza sgranare. */
.sym {
  width: 15px; height: 15px;
  vertical-align: -3px;
  display: inline-block;
  flex: 0 0 auto;
}
aside .passo .t .sym, aside .nota .sym { width: 17px; height: 17px; vertical-align: -4px; }

/* Il costo di ogni lancio, in modalita' solo testo: la carta e cosa paga. */
.costi {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-top: 5px; font-size: 12px;
}
.costi span { display: inline-flex; align-items: center; gap: 4px; }
.costi i { color: var(--spento); font-style: normal; }
/* Un costo di abilita' e non di lancio — il `pay` dell'Eminence, un'attivazione.
   Non ha una carta a cui appartenere, quindi porta il verbo al posto del nome. */
.costi .attiva i { color: #8f7fb0; text-transform: uppercase; font-size: 10px;
  letter-spacing: .06em; }

/* La figura di fine step dentro un nodo del diagramma: in fondo e a destra,
   dove il conto si chiude. **Nel flusso e non in assoluto**: in assoluto si
   posava sopra la riga dei costi appena quella si allungava, e due numeri di
   mana sovrapposti sono il difetto peggiore che questa riga possa avere. */
.nodo .pool {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 2px; margin-top: 3px;
}
.nodo .pool .sym, .nodo .pool .pip { width: 13px; height: 13px; vertical-align: 0; }
/* «7×» invece di sette cerchietti: oltre i quattro i pip non si contano piu' a
   colpo d'occhio, e la fila diventa piu' lunga del testo che sta sopra. */
.molte { font-size: 11px; font-weight: 700; color: var(--spento); margin-right: 1px; }
/* Quello che mana non e' — «8 Treasures», «empty»: meta' della Win Con #2
   conta in Treasure, e buttare via quella meta' della figura era peggio che
   non mostrarla. */
.risorsa { font-size: 11px; color: var(--spento); font-style: italic; }
/* Lo step che non muove mana eredita la figura di prima: si dice, o sembra che
   il primer l'abbia scritta due volte. */
.fermo {
  font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  color: #6b7387; margin-left: 5px;
}
.pool.riportato { opacity: .62; }
.costi .sym, .costi .pip { width: 14px; height: 14px; vertical-align: 0; }
.nodo.passo .costi { margin-left: 28px; }

.costo { display: flex; gap: 3px; align-items: center; margin-top: 4px; }
.pip {
  width: 15px; height: 15px; border-radius: 50%;
  font-size: 9.5px; font-weight: 700;
  display: inline-grid; place-items: center;
  color: #1a1410;
  flex: 0 0 auto;
  vertical-align: -3px;
}
.pip.b { background: #cbc2bf; }
.pip.u { background: #b3d5ea; }
.pip.r { background: #ec9a80; }
.pip.g { background: #a3d0a8; }
.pip.w { background: #f7f3e0; }
.pip.gen { background: #b9b3b0; }
.vita { font-size: 11px; color: var(--spento); margin-left: 5px; }

/* ------------------------------------------------------------- pannello */

/* L'elenco sta a sinistra, dove cade l'occhio per primo, e si piega via
   quando serve tutto lo spazio al diagramma. Due regioni impilate con lo
   scorrimento separato: l'indice delle linee in alto (con un tetto, cosi' non
   si mangia il resto) e il pannello della linea accesa sotto. */
aside {
  flex: 0 0 430px;
  /* `min-width: 0` non e' pignoleria: il minimo automatico di un flex item e'
     la sua larghezza minima di contenuto, e un titolo di gruppo lungo e non
     spezzabile — «CARRION FEEDER (OR BARTOLOMÉ DEL PRESIDIO) + UNDYING + TAYAM
     LINES» — sfondava i 430 px portando la colonna a 560. */
  min-width: 0;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--pannello);
  border-right: 1px solid var(--bordo);
  padding: 14px 18px 0;
  transition: flex-basis .16s ease, padding .16s ease;
}
aside.piegato {
  flex-basis: 0;
  padding-left: 0; padding-right: 0;
  overflow: hidden;
  border-right-color: transparent;
}
#rotta { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 60px; }

#piega { flex: 0 0 auto; }
aside h2 { font-size: 15px; margin: 0 0 4px; line-height: 1.3; }
aside .sotto { color: var(--spento); font-size: 12px; margin-bottom: 12px; }

aside .fase {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--oro); margin: 18px 0 7px;
  padding-bottom: 4px; border-bottom: 1px solid var(--bordo);
}
aside .fase:first-of-type { margin-top: 12px; }

/* Attenzione: `.passo` e' anche la classe dei nodi della spina dorsale sul
   diagramma. Tutte le regole del pannello vanno tenute sotto `aside`, o le
   carte da 86px e il flex-wrap finiscono dentro il grafo e lo sfondano. */
aside .passo {
  display: flex; gap: 9px; padding: 7px 0;
  border-bottom: 1px solid #22273300;
  cursor: pointer;
}
aside .passo:hover { background: #ffffff06; }
aside .passo.corrente { background: #d7b25a14; box-shadow: inset 2px 0 0 var(--oro); }
aside .passo > .n {
  flex: 0 0 20px; height: 20px; border-radius: 5px;
  background: #2c3a56; color: var(--blu);
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}
aside .passo .c { flex: 1; min-width: 0; }
aside .passo .t { font-size: 14.5px; line-height: 1.5; }
aside .passo .pool {
  display: flex; gap: 3px; align-items: center;
  margin-top: 5px; font-size: 10.5px; color: var(--spento);
}
/* Nel pannello le carte sono grandi 86px invece di 58, e lo stacco fra le
   azioni cresce con loro: a 20px, accanto a carte di quella misura, non si
   vedrebbe piu' */
aside .passo .carte { flex-wrap: wrap; gap: 5px 28px; margin-top: 7px; }
aside .passo .carte .azione { gap: 5px; }
/* `:not(.sym)`: sotto una carta puo' esserci il costo che quel lancio paga, e
   i suoi simboli sono <img> come la carta. Senza l'esclusione un [[symbol:2]]
   veniva disegnato grande quanto una carta. */
aside .passo .carte img:not(.sym) {
  width: 86px; height: auto; object-fit: contain; object-position: center;
}
aside .passo .carte .manca { width: 86px; height: 120px; font-size: 10px; }

.nota {
  font-size: 14px; color: #b9c0d2; line-height: 1.55;
  background: #ffffff06; border-left: 2px solid var(--bordo);
  padding: 8px 11px; border-radius: 0 var(--r) var(--r) 0; margin: 8px 0;
}
/* L'avviso che la carta di questa rotta non c'e': si distingue dalle altre
   note perche' e' l'unica che corregge quello che si sta per leggere */
.nota.sparito { border-left-color: #b4595c; background: #b4595c14; }

/* Dentro l'avviso, la correzione che il primer scrive: «qui cambia», «prezzo»
   e le carte che quelle celle nominano. Sta qui e non solo in cima perche' e'
   qui che serve — accanto agli step che corregge. */
.nota.sparito .invece { margin-top: 8px; display: grid; gap: 7px; }
.nota.sparito .invece > div { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.nota.sparito .invece .et {
  flex: none; min-width: 96px; padding-top: 2px;
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--spento);
}
.nota.sparito .invece .carte { flex-wrap: wrap; gap: 5px 18px; }
.nota.sparito .invece .carte img:not(.sym) { width: 62px; height: auto; }
.nota.sparito .invece .carte .manca { width: 62px; height: 86px; font-size: 9px; }

/* La figura che chiude uno step e' il pool della linea principale: dove quello
   step spende la carta che questa rotta non ha, il numero non e' suo. */
aside .passo .pool.altrui { color: #b4595c; }
aside .passo .pool.altrui > :not(.chiosa) { opacity: .5; }
aside .passo .pool.altrui .chiosa { font-style: italic; opacity: .9; margin-left: 3px; }

/* Un primer da cui il parser non ricava nessuna linea apriva una pagina nera e
   basta — sette mazzi su diciassette — e a doppio clic su `avvia.cmd` non si
   distingueva da uno strumento rotto. Adesso dice cosa cercava. */
.vuoto {
  max-width: 620px; margin: 90px auto 0;
  color: var(--spento); font-size: 14px; line-height: 1.65;
}
.vuoto h2 { color: var(--testo); font-size: 17px; margin: 0 0 10px; }
.vuoto code {
  background: var(--alzato); border-radius: 4px; padding: 0 4px;
  font-size: 12px; color: #c7d0e4;
}
.vuoto ul { margin: 8px 0 0; padding-left: 18px; }
.vuoto li { margin-bottom: 5px; }

/* ------------------------------------------------------- vista a fasi */

/* Una pastiglia e' una rotta intera in tre righe: quanti step ha e cosa
   lascia, come si chiama, cosa chiede. Sta a sinistra come le aperture perche'
   e' la stessa cosa — un punto da cui si parte — solo senza una spina a cui
   agganciarsi. */
.nodo.pastiglia {
  border-left: 3px solid var(--verde);
  padding: 8px 11px;
  cursor: pointer;
}
.nodo.pastiglia:hover { border-color: var(--bordo-forte); border-left-color: var(--verde); }
.nodo.pastiglia .cap {
  color: var(--verde); display: flex; gap: 6px; align-items: baseline;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* l'esito e' una frase del primer, non un'etichetta: in maiuscoletto si legge
   come un titolo e ruba l'attenzione al nome della rotta */
.nodo.pastiglia .cap .esito {
  text-transform: none; letter-spacing: 0; font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis;
}
.nodo.pastiglia .txt { font-weight: 600; }
.nodo.pastiglia .serve {
  margin-top: 4px; font-size: 12px; color: var(--spento); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.nodo.pastiglia.viva { border-color: var(--oro); border-left-color: var(--oro); }

#vista { position: static; margin-left: 4px; box-shadow: none; }
#vista button { padding: 5px 11px; font-size: 12px; }

/* Il salto all'altra linea, per le rotte che finiscono dentro una win con
   diversa invece che rientrare in questa. */
.nota button.vai {
  display: block; margin-top: 8px;
  background: var(--alzato); color: var(--testo);
  border: 1px solid var(--bordo-forte); border-radius: var(--r);
  padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.nota button.vai:hover { border-color: var(--blu); }

aside a.carta { color: var(--blu); text-decoration: none; border-bottom: 1px dotted #5f9fd855; }

/* Il connettore fra due carte: la freccia di chi prende chi, la barra
   dell'alternativa. */
.coppia { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

.lega {
  align-self: center;
  font-size: 14px; line-height: 1;
  color: var(--spento);
  width: 13px; text-align: center;
  flex: 0 0 auto;
}
.lega.scelta { color: var(--oro); font-weight: 700; }

/* La carta grande al passaggio del mouse, sopra l'immagine come sopra il nome
   scritto: e' la stessa domanda — «questa cos'e'?» */
#anteprima {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  border-radius: 10px;
  box-shadow: 0 12px 34px #000000b0;
  line-height: 0;
}
#anteprima img { width: 300px; border-radius: 10px; display: block; }

a.carta { cursor: help; }

/* Al tocco l'anteprima non puo' seguire il dito: il dito ce l'hai sopra. Sta
   al centro dello schermo, grande quanto ci sta, e si chiude al tocco dopo. */
#anteprima.al-centro {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
#anteprima.al-centro img {
  width: min(78vw, 340px);
  max-height: 84vh; height: auto;
  object-fit: contain;
}

#errore {
  position: fixed; inset: auto 16px 16px auto;
  background: #3a1f1f; border: 1px solid var(--rosso);
  color: #ffd9d0; padding: 10px 14px; border-radius: var(--r);
  font-size: 13px; max-width: 520px; white-space: pre-wrap;
}

/* ------------------------------------------------------------- il closing */

/* Come si vince davvero, in fondo alla linea. Ha un segno suo — il verde di
   «qui si arriva» — perche' e' l'ultima cosa che si legge e non un'altra nota
   fra le altre. */
aside .nota.chiusura {
  border-left: 3px solid var(--verde);
  padding-left: 10px;
}
aside .nota.chiusura > b { color: var(--testo); }
/* Un modo di chiudere si rende con la stessa scatola di uno step — testo,
   carte, badge del numero — perche' e' la stessa cosa: una mossa da fare. Non
   si clicca pero', non c'e' nessuno step da accendere sul diagramma. */
aside .nota.chiusura .passo.modo { cursor: default; padding: 6px 0 2px; }
aside .nota.chiusura .passo.modo:hover { background: none; }
aside .nota.chiusura .passo.modo:first-of-type { padding-top: 4px; }
/* Numerati, perche' sono **alternative**: senza numero le due righe della
   Scholar loop si leggevano come i due passi di una procedura sola, che e' il
   contrario di quello che sono. */
aside .nota.chiusura .passo.modo .n { background: #2a3448; color: var(--verde); }

/* --------------------------------------------------------- schermi stretti */

/* Le due colonne stanno affiancate finche' c'e' spazio per tutte e due, e
   sotto i 900 px non ce n'e': a 820 la colonna si prende i suoi 430 e al grafo
   ne restano 390, cioe' meno delle tre corsie che deve disegnare — il testo dei
   nodi si tronca a meta' e la corsia di destra esce dallo schermo. A 390, la
   larghezza di un telefono, va peggio: la sola colonna e' piu' larga della
   finestra (466 px di pagina su 390 di schermo) e il diagramma sta **fuori
   pagina a destra**, raggiungibile solo scorrendo di lato tutto il documento.
   Sotto la soglia le due viste si alternano invece di affiancarsi, e il
   pulsante dell'intestazione porta all'altra.
   Il diagramma resta a scorrimento orizzontale dentro `#grafo`, e non si
   comprime: sotto `MINCORSIA` un nodo non si legge, e un diagramma da scorrere
   e' meglio di uno illeggibile. */
@media (max-width: 900px) {
  header { flex-wrap: wrap; gap: 9px 14px; padding: 8px 12px; }
  /* il titolo si prende la sua riga: sotto restano i comandi, che sono quelli
     che le dita cercano */
  h1 { flex: 1 1 100%; }

  aside {
    flex: 1 1 auto;
    padding: 12px 14px 0;
    border-right: 0;
    /* niente animazione: qui la colonna non si restringe, sparisce e lascia il
       posto al grafo — animare una larghezza che non cambia piu' fa solo
       ritardare di 160 ms una vista che e' gia' pronta */
    transition: none;
  }
  aside.piegato { display: none; }
  /* `display: none` e non larghezza zero: `disegna()` misura `clientWidth`, e
     un grafo largo ma invisibile darebbe una geometria calcolata su uno spazio
     che a schermo non c'e' */
  aside:not(.piegato) + #grafo { display: none; }
  #grafo { padding: 0 12px 24px; }

  /* meta' di uno schermo alto e stretto sono troppe: l'indice sta sopra il
     pannello degli step, ed e' il pannello quello che si legge */
  nav#tab { max-height: 38vh; }
}