/* Long Tail Generator: solo layout (spec docs/superpowers/specs/2026-10-25-longtail-phase2-design.md §5).
   Colori, font e componenti sono in signal.css (.sg-probes, .sg-pipe, .sg-feed, .sg-timer, .sg-runstate…).

   Spostamento zero (§5.5): sulla pagina del form non c'è spazio riservato. Generate (page.js) scambia il
   form con la riga ① e la sezione del run nello stesso handler dell'input, con le misure finali: quello che
   si sposta allora cade nella finestra dell'input, che il CLS esclude. Da lì riga ①, sezione del run e
   righe del run nella testata hanno altezze fisse e cambiano solo i testi. */

.lt-stage{--lt-act-h:72px;--lt-run-h:760px;display:flex;flex-direction:column}
.lt-formmsg{margin:0}
.lt-adsnote{margin:0}

/* riga ①: altezza fissa, un gruppo di contenuti per stato (data-state) */
.lt-actions{display:flex;align-items:center;height:var(--lt-act-h);padding:0 var(--cell-pad);border-bottom:1px solid var(--line);overflow:hidden}
.lt-actions > [data-for]{display:none;flex-wrap:wrap;align-items:center;gap:10px 16px;width:100%;min-width:0}
.lt-actions[data-state="running"] > [data-for="running"],
.lt-actions[data-state="saving"] > [data-for="saving"],
.lt-actions[data-state="results"] > [data-for="results"],
.lt-actions[data-state="error"] > [data-for="error"]{display:flex}

/* sezione del run: griglia 5 + dati 3 (ottavi del reticolo), altezza fissa */
.lt-run{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr);height:var(--lt-run-h);border-bottom:1px solid var(--line)}
.lt-viz,.lt-data{display:flex;flex-direction:column;min-width:0;min-height:0}
.lt-viz{border-right:1px solid var(--line)}
.lt-viz > .sg-probes-box{flex:1;min-height:0;padding:18px var(--cell-pad)}
.lt-data > .sg-feed{flex:1;min-height:0}
.lt-bar-title{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* il conteggio "312 / 676 requests" ha sempre 18 caratteri (page.js lo allinea con gli spazi) */
.lt-bar-count{flex:none;width:calc(18 * (1ch + .16em));overflow:hidden;white-space:pre;text-align:right}
.lt-hint{margin-left:auto;white-space:nowrap}

/* testata: ogni riga a tutta larghezza, così nessuna scatola si sposta quando cambia il testo; le righe
   del run compaiono allo scambio (is-live), con le altezze finali */
.lt-aside{align-self:stretch;display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0}
.lt-aside > *{min-width:0}
.lt-aside > .sg-tags{flex-wrap:nowrap;overflow:hidden}
.lt-aside > .lt-runtags{height:42px;flex-wrap:wrap;align-content:flex-end}
.lt-runtags .sg-tag{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.lt-aside > .sg-timer{text-align:right}
.lt-aside > .sg-runstate{justify-content:flex-end}
.lt-aside:not(.is-live) > .lt-live{display:none}

.lt-mobile{display:none}

/* riga ① dei risultati: Copy ha larghezza fissa (il testo cambia: "Copy all keywords", "Copied 1,234
   keywords"), New run a destra */
.lt-actions .lt-sp{flex:1 1 0;min-width:0}
.lt-copy > span{display:inline-block;width:calc(22 * (1ch + .05em));overflow:hidden;white-space:pre;text-overflow:ellipsis;text-align:center}

/* risultati ②③ nella sezione del run, con la stessa altezza (§8): impronta 5 + riepilogo 3. Nel markup
   ③ viene prima e la nota prima dell'impronta (ordine di mobile): su desktop le posizioni sono esplicite,
   così niente si sposta mentre la pagina arriva a pezzi */
.lt-run > .lt-res{display:none}
.lt-run.is-results{overflow:hidden}
.lt-run.is-results > .lt-viz,.lt-run.is-results > .lt-data{display:none}
.lt-run.is-results > .lt-res{min-width:0;min-height:0}
.lt-run.is-results > .lt-sum{display:flex;flex-direction:column;grid-column:2;grid-row:1}
.lt-run.is-results > .lt-fpwrap{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-column:1;grid-row:1;border-right:1px solid var(--line)}
.lt-fpwrap > .lt-fpbar{grid-row:1}
.lt-fpwrap > .sg-fp{grid-row:2;min-height:0;overflow:hidden;padding:22px var(--cell-pad);align-content:flex-start}
.lt-fpwrap > .lt-fpnote{grid-row:3}
/* testo della cella scelta: una riga, troncato; sotto i 1200px va su una riga sua (altezza costante) */
.lt-fptitle,.lt-treetitle{flex:none;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lt-fpsel,.lt-treesel{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right}
.lt-respipe{min-height:calc(var(--lt-loops,1) * 30px + 13px)}

/* desktop (ruling R13): niente fasce vuote nella sezione da 760px.
   ② le righe di griglie scelte da results.js stanno al centro del riquadro, che è un container: la cella
   (--fp-cs, unità del container) è la più grande che ci sta, al massimo 56px.
   ③ blocchi più ariosi e le schede dei loop (sg-pipe.is-cards) si dividono tutta l'altezza rimasta: il loro
   riquadro ha misura finale dalla CSS, anche prima che results.js aggiunga le schede */
@media (min-width:901px){
  .lt-fpwrap > .sg-fp{container-type:size;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;align-content:normal}
  .lt-fpwrap .sg-fp-grid{--fp-cell:var(--fp-cs,7px);gap:2px}
  .lt-run.is-results > .lt-sum > .sg-bigcount{padding-block:32px 28px}
  .lt-run.is-results > .lt-sum > .sg-facts.is-3 > div{padding-block:20px}
  .lt-run.is-results > .lt-sum > .lt-volfacts > div{padding-block:16px}
  .lt-run.is-results > .lt-sum > .lt-respipe{flex:1 1 0;min-height:0}
}

/* barra dei volumi (volumes.js), in cima a #lt-results: altezza fissa per larghezza, uguale in ogni stato (in attesa,
   link, select, attesa della risposta, riga di stato, errore), così niente sotto si sposta quando cambia stato o
   arrivano i volumi. volumes.js sostituisce i controlli (nodi nuovi) e il contenuto del messaggio, che resta in un
   posto fisso: da 1200px una riga (titolo | messaggio, due righe al massimo | controlli a destra); 901-1199px titolo e
   controlli, sotto il messaggio; 561-900px titolo, messaggio, controlli; fino a 560px i controlli vanno su due righe
   (account / paese e bottone) */
.lt-volbar{--lt-vol-h:58px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);grid-template-areas:"h msg ctl";align-items:center;column-gap:20px;height:var(--lt-vol-h);padding:0 var(--cell-pad);overflow:hidden}
.lt-volbar > .sg-volbar-h{grid-area:h}
.lt-volbar > .sg-volbar-ctl{grid-area:ctl;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.lt-volbar > .sg-volbar-msg{grid-area:msg;max-height:32px}
.lt-volbar .form-select{height:30px;padding-block:0}
.lt-volbar .lt-vol-acct{width:300px}
.lt-volbar .lt-vol-geo{width:160px}
.lt-volbar .btn{flex:none;height:30px;max-width:100%}
/* "Get search volumes" e "Getting volumes…": stessa larghezza, il bottone non cambia misura */
.lt-volbar .lt-vol-go > span{display:inline-block;width:calc(18 * (1ch + .05em));overflow:hidden;white-space:pre;text-align:left}
@media (max-width:1199px){
  .lt-volbar{--lt-vol-h:94px;grid-template-columns:auto minmax(0,1fr);grid-template-rows:30px 32px;grid-template-areas:"h ctl" "msg msg";align-content:center;row-gap:8px}
  .lt-volbar .lt-vol-acct{width:240px}
}
@media (max-width:900px){
  .lt-volbar{--lt-vol-h:120px;grid-template-columns:minmax(0,1fr);grid-template-rows:18px 32px 30px;grid-template-areas:"h" "msg" "ctl"}
  .lt-volbar > .sg-volbar-ctl{justify-content:flex-start}
  .lt-volbar .lt-vol-acct{flex:1 1 0;width:auto;min-width:0}
}
@media (max-width:560px){
  .lt-volbar{--lt-vol-h:158px;grid-template-rows:18px 32px 68px}
  .lt-volbar > .sg-volbar-ctl{align-content:flex-start;align-self:stretch}
  .lt-volbar .lt-vol-acct{flex:1 1 100%}
  .lt-volbar .lt-vol-geo{flex:1 1 0;width:auto;min-width:0}
  /* link e bottoni lunghi ("Connect Google Ads to get search volumes") vanno a capo invece di uscire */
  .lt-volbar .btn{height:auto;min-height:30px;white-space:normal;text-align:left}
}

/* ④⑤ sotto la sezione del run: albero 6 + lunghezza e modificatori 2 (ottavi del reticolo). Su desktop le misure
   vengono dalla CSS (riquadro dell'albero alto 600px, istogramma 190px, righe da 26px) e la colonna destra resta
   più bassa della sinistra: l'altezza della sezione non dipende dai dati e results-words.js riempie solo
   l'interno. Il testo della selezione sta su una riga (troncato), come quello dell'impronta.
   Ruling R16: gli stessi riquadri ci sono già durante il run, in attesa (.is-wait, riga .lt-wait al centro), e
   a fine run si riempiono senza cambiare altezza. Sotto i 900px la lista dell'albero ha un'altezza riservata,
   --lt-list-h: 2 titoli (12 + 36 + 6 px) + 18 righe chiuse da 34px (12 posti dopo e 6 prima, l'ultimo può essere
   "+N more"; results-words.js) + 4 + 14 px di margine = 738px. Un ramo aperto o "+N more" la fanno crescere solo
   a un tocco */
.lt-words{--lt-list-h:738px;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,2fr);border-bottom:1px solid var(--line)}
.lt-words > *{min-width:0}
.lt-tree{display:flex;flex-direction:column;border-right:1px solid var(--line)}
.lt-treebox{flex:none;position:relative;height:600px}
.lt-treebox > .sg-tree{height:100%}
.lt-tree > .is-foot{margin-top:auto}
/* da 1200px il piede di ④ sta su una riga (troncato, il testo intero nel title): "Weight: keywords · volume" cambia il
   testo, non l'altezza */
@media (min-width:1200px){
  .lt-tree > .is-foot > span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}
.lt-treebar > .lt-weight{flex:none}
.lt-len > .lt-modsbar{border-top:1px solid var(--line)}
.lt-len > .sg-bars{display:flex;flex-direction:column;min-height:calc(12 * 26px + 24px)} /* 12 modificatori */
.lt-treebox > .lt-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 var(--cell-pad)}
.lt-len > .sg-hist > .lt-wait,.lt-len > .sg-bars > .lt-wait{margin:auto}
.lt-words:not(.is-wait) .lt-wait{display:none}
.lt-words.is-wait .lt-treesel{visibility:hidden} /* "click a branch…" solo quando l'albero c'è */
@media (min-width:901px){
  .lt-treebox > .sg-tree-list{display:none}
}
@media (min-width:901px) and (max-width:1199px){
  /* colonna destra stretta: titoli senza la nota a destra, barre più vicine */
  .lt-len > .sg-bar-h > b{display:none}
  .lt-len > .sg-hist{gap:6px}
  .lt-len .sg-hist-bar > span > small{display:none} /* "2" … "7+": le parole sono nel titolo */
}

/* ⑥ tabella delle keyword, sotto ④⑤ a tutta larghezza (results-table.js, DataTables). Misure fisse (ruling R16):
   barra dei chip (--lt-tbar-h), riquadro della tabella (intestazione + 25 righe da --lt-row, ognuna su una riga,
   testo troncato) e pager hanno altezze dalla CSS: la sezione è alta uguale in attesa, a fine run, con meno di 25
   righe e a ogni pagina, filtro o ordinamento. Su desktop il riquadro ha quell'altezza; sotto i 900px è un minimo,
   perché una riga figlia di Responsive (aperta solo da un tocco) lo allunga, e si richiude al ridisegno.
   Colonne a larghezza fissa (table-layout:fixed) per breakpoint, la Keyword prende il resto: niente scroll
   orizzontale. Barra: da 1200px una riga (loop | filtri | ricerca); 561-1199px loop / filtri + ricerca; fino a
   560px ricerca / loop su due righe / filtri. I chip dei filtri stanno su una riga: si stringono e il testo si
   tronca, la x resta. In attesa si vede solo "Available when the run ends." al centro */
.lt-kw{--lt-row:37px;--lt-head:41px;--lt-tbar-h:58px;--lt-pager-h:44px;border-bottom:1px solid var(--line)}
/* contatore "N of M": 16 caratteri (results-table.js lo allinea con gli spazi), scatola larga quanto loro */
.lt-kwbar > b{flex:none;width:calc(16 * (1ch + .16em));overflow:hidden;white-space:pre;text-align:right}
.lt-kwbody{position:relative}
.lt-tbar{display:grid;grid-template-columns:auto minmax(0,1fr) 240px;grid-template-rows:30px;grid-template-areas:"loops facets q";align-content:center;align-items:center;gap:8px 16px;height:var(--lt-tbar-h);padding:0 var(--cell-pad);border-bottom:1px solid var(--line)}
.lt-loopchips{grid-area:loops;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px 8px;min-width:0}
.lt-facets{grid-area:facets;display:flex;align-items:center;gap:8px;min-width:0}
.lt-facets > .sg-chip{flex:0 1 auto;min-width:0}
.lt-tbar > .lt-q{grid-area:q;min-width:0;height:30px;padding-block:0}
.lt-tablebox{height:calc(var(--lt-head) + 25 * var(--lt-row))}
/* .mt-2 di DataTables (!important di Bootstrap) e il gutter verticale che DataTables mette sotto i 768px */
.lt-tablebox > .dt-container > .row{--bs-gutter-y:0;margin:0 !important}
#lt-table{table-layout:fixed;width:100%;margin:0}
#lt-table > :is(thead,tbody) > tr > :is(th,td){padding:8px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lt-table > thead > tr > th{padding-block:10px}
#lt-table > :is(thead,tbody) > tr > :nth-child(1 of :not(.dtr-hidden)){padding-left:var(--cell-pad)} /* prima colonna visibile */
#lt-table > :is(thead,tbody) > tr > :nth-last-child(1 of :not(.dtr-hidden)){padding-right:var(--cell-pad)}
#lt-table .dt-column-title{min-width:0;overflow:hidden;text-overflow:ellipsis}
#lt-table :focus-visible{outline-offset:-2px}
#lt-table > tbody > tr.child > td{white-space:normal}
#lt-table .dtr-details{display:block}
#lt-table .dtr-data{overflow-wrap:anywhere}
#lt-table .lt-c-i{width:72px}
#lt-table.collapsed .lt-c-i{width:84px} /* con colonne nascoste la prima cella ha anche il segno della riga figlia */
#lt-table .lt-c-loop{width:110px}
#lt-table .lt-c-q{width:170px}
#lt-table :is(.lt-c-w,.lt-c-ch){width:80px}
#lt-table .lt-c-jac{width:140px}
#lt-table .lt-c-cos{width:152px}
/* colonne dei volumi (table.is-vol: Jaccard e Cosine nascosti, la Keyword resta larga) */
#lt-table .lt-c-vol{width:96px}
#lt-table .lt-c-trend{width:100px}
#lt-table .lt-c-comp{width:128px}
#lt-table .lt-c-bid{width:160px}
#lt-table.is-vol .lt-c-i{width:64px}
#lt-table.is-vol.collapsed .lt-c-i{width:84px}
#lt-table.is-vol .lt-c-loop{width:96px}
#lt-table.is-vol .lt-c-q{width:140px}
#lt-table.is-vol .lt-c-ch{width:92px} /* ultima colonna visibile da 1200px: col margine della cella */
.lt-pager{height:var(--lt-pager-h);padding:0 var(--cell-pad);border-top:1px solid var(--line)}
.lt-pager > .lt-sp{flex:1 1 0}
.lt-kwbody > .lt-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 var(--cell-pad)}
.lt-kw:not(.is-wait) .lt-wait{display:none}
.lt-kw.is-wait .lt-kwbody > :not(.lt-wait){visibility:hidden}

@media (max-width:1199px){
  .lt-fpbar,.lt-treebar{flex-wrap:wrap;row-gap:4px}
  .lt-fptitle,.lt-treetitle{flex:1 1 100%}
  .lt-fpsel,.lt-treesel{flex-basis:100%;text-align:left}
  /* ④: titolo e interruttore del peso sulla prima riga, la selezione sotto */
  .lt-treebar > .lt-treetitle{flex:1 1 0}
  .lt-treebar > .lt-weight{order:2}
  .lt-treebar > .lt-treesel{order:3}
  /* ⑥: barra su due righe (14 + 30 + 8 + 30 + 14), colonne e barrette più strette */
  .lt-kw{--lt-tbar-h:96px}
  .lt-tbar{grid-template-columns:minmax(0,1fr) 240px;grid-template-rows:30px 30px;grid-template-areas:"loops loops" "facets q"}
  #lt-table .lt-c-loop{width:100px}
  #lt-table .lt-c-q{width:150px}
  #lt-table :is(.lt-c-w,.lt-c-ch){width:76px}
  #lt-table .lt-c-jac{width:96px}
  #lt-table .lt-c-cos{width:108px}
  #lt-table .sg-sim{width:32px;margin-right:6px}
  #lt-table .lt-c-vol{width:88px}
}

@media (max-width:900px){
  /* 1320px: col riepilogo dei risultati (con le due cifre dei volumi) tutti i loop stanno nella sezione; durante il
     run i 120px in più (rispetto ai 1200 del lotto A) vanno al riquadro delle sonde, non sotto il flusso */
  .lt-stage{--lt-act-h:124px;--lt-run-h:1320px}
  .lt-run{grid-template-columns:minmax(0,1fr);grid-template-rows:580px minmax(0,1fr)}
  .lt-viz{border-right:0;border-bottom:1px solid var(--line)}
  .sg-probes.is-wide{--lw:64px}
  .lt-hint{display:none}
  .lt-mobile{display:inline}
  .lt-aside > .sg-tags{justify-content:flex-start}
  .lt-aside > .sg-timer{text-align:left}
  .lt-aside > .sg-runstate{justify-content:flex-start}
  /* risultati nell'ordine del markup: riepilogo (misure fisse dal markup), barra, nota, impronta, che è
     l'ultima cosa della sezione: quando il JS la riempie non sposta niente. Altezza fissa, o quella del
     contenuto se il bordo inferiore resta sotto la piega (is-auto, results.js) */
  .lt-run.is-results{grid-template-rows:none;align-content:start}
  .lt-run.is-results.is-auto{height:auto}
  .lt-run.is-results > .lt-sum,.lt-run.is-results > .lt-fpwrap{grid-column:auto;grid-row:auto}
  .lt-run.is-results > .lt-fpwrap{grid-template-rows:none;border-right:0}
  .lt-fpwrap > .lt-fpbar,.lt-fpwrap > .lt-fpnote,.lt-fpwrap > .sg-fp{grid-row:auto}
  /* con tutti i loop a 390px: riepilogo 506 (con le cifre dei volumi) + barre 127 + impronta 667 = 1300, dentro i 1320 */
  .lt-fpwrap > .sg-fp{gap:14px;padding:14px var(--cell-pad)}
  .lt-fpwrap > .sg-fp > .sg-fp-row{display:contents} /* le righe del desktop non contano: i blocchi vanno a capo */
  .lt-fpwrap > .sg-fp > .sg-fp-col{gap:14px}
  .lt-fpwrap > .lt-fpnote{border-top:0;border-bottom:1px solid var(--line)}
  /* ④⑤ in colonna; l'albero è la lista (niente SVG) */
  .lt-words{grid-template-columns:minmax(0,1fr)}
  .lt-tree{border-right:0;border-bottom:1px solid var(--line)}
  .lt-treebox{height:auto;min-height:var(--lt-list-h)}
  .lt-treebox > .sg-tree{display:none}
  .lt-treetitle{white-space:normal} /* testo fisso: può andare a capo, la selezione resta su una riga */
  /* ⑥: Responsive nasconde From request (results-table.js) e una riga figlia può allungare il riquadro */
  .lt-tablebox{height:auto;min-height:calc(var(--lt-head) + 25 * var(--lt-row))}
}
@media (max-width:700px){
  /* ④: il titolo su tutta la riga, l'interruttore del peso sotto (accanto al titolo andrebbe a capo parola per parola) */
  .lt-treebar > .lt-treetitle{flex-basis:100%}
  /* ⑥: celle più strette (come vendor-theme.css) */
  #lt-table > :is(thead,tbody) > tr > :is(th,td){padding-inline:6px}
  #lt-table.collapsed .lt-c-i{width:70px}
  #lt-table .lt-c-loop{width:82px}
  #lt-table :is(.lt-c-w,.lt-c-ch){width:64px}
  #lt-table .lt-c-jac{width:82px}
  #lt-table .lt-c-cos{width:92px}
  #lt-table .lt-c-vol{width:80px}
  #lt-table.is-vol.collapsed .lt-c-i{width:70px}
  #lt-table.is-vol .lt-c-loop{width:82px}
}
@media (max-width:560px){
  /* ⑥: ricerca, chip dei loop (una o due righe), filtri: altezza per il caso più alto (14 + 30 + 8 + 66 + 8 + 30
     + 14), righe dall'alto, così lo spazio che avanza resta in fondo e i filtri compaiono subito sotto i loop */
  .lt-kw{--lt-tbar-h:170px}
  .lt-tbar{grid-template-columns:minmax(0,1fr);grid-template-rows:30px auto auto;grid-template-areas:"q" "loops" "facets";align-content:start;padding-top:14px}
  .lt-pper{display:none}
}
@media (max-width:480px){
  /* ⑥: resta Words con Keyword (# e Loop sono nascosti già fino a 600px, ruling R17; qui va via anche Cosine) */
  #lt-table .lt-c-w{width:74px} /* ultima colonna visibile: col margine della cella */
  #lt-table.is-vol .lt-c-vol{width:92px} /* con i volumi l'ultima visibile è Volume (Words nella riga figlia) */
}

/* sotto i 360px la riga ① sta in tre righe di bottoni (Download / Export / Copy + New run) nei suoi 124px */
@media (max-width:359px){
  .lt-actions > [data-for]{column-gap:8px}
  .lt-copy > span{width:calc(20 * (1ch + .05em))}
}