/* Stili della scheda titolo.
   Estratti da stock.html il 20 agosto 2026: erano 65,8 KB in linea, cioe' il
   77%% della pagina. Finche' la pagina era una sola non costava niente; con le
   93 pagine per titolo (/azioni/<ticker>) sarebbero diventati 7,9 MB di CSS
   ricopiato 93 volte in git, tutto identico.
   ⚠️ Sorgente unica: la modificano sia stock.html sia le pagine generate da
   tools/genera_pagine_titoli.py. Non ricopiarlo in nessuna delle due. */

:root {
  --bg: #f2f2f0;
  --white: #fff;
  --border: #e4e4e0;
  --text: #181816;
  --muted: #686860;
  --muted2: #9e9e96;
  --green: #1a7a45;
  --green-bg: #edf7f2;
  --green-border: #c4e8d4;
  --red: #b83232;
  --red-bg: #fdf2f2;
  --red-border: #f0c8c8;
  --blue: #1a4d8a;
  --blue-bg: #f0f4fb;
  --blue-border: #c4d4ee;
  --amber: #7a5200;
  --amber-bg: #fdf6e8;
  --amber-border: #f0ddb0;
  --purple: #5b2d8a;
  --purple-bg: #f5f0fb;
  --purple-border: #d8c8f0;
  --radius: 11px;
  --sidebar-w: 184px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* `overflow-x:hidden` sta su `html` e non piu' anche su `body`: su body ne
   faceva un contenitore di scorrimento, e allora la barra in cima
   (`position:sticky`) si agganciava a lui invece che alla finestra —
   scorrendo col dito sul telefono se ne andava su. Il taglio orizzontale
   lo fa lo stesso `html`. */
html{height:100%;max-width:100%;overflow-x:hidden;}
body{height:100%;max-width:100%;}
/* Qui la pagina non scorre mai: il guscio e' a piena altezza con
   overflow:hidden e a scorrere e' il pannello dentro, che ha la barra sua.
   Con `scrollbar-gutter:stable` — che sulle pagine che scorrono serve — si
   riservava lo spazio di una barra di pagina che non arriva mai: restava una
   striscia vuota fra la barra del pannello e il bordo, larga quanto lei. */
html{scrollbar-gutter:auto}
/* Una barra sola per tutto il sito. Non basta stilizzare `html`: settori,
   watchlist e impostazioni sono a piena altezza e la pagina non scorre —
   scorrono i pannelli dentro, che avevano ognuno la sua barra (settori 5px,
   watchlist quella di sistema, larga e grigia). Il selettore universale le
   prende tutte; le regole -webkit- servono a Safari, che ignora
   scrollbar-width, mentre Chrome quando trova scrollbar-width ignora loro. */
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
body{font-family:'Figtree',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;}
.app{display:flex;flex-direction:column;min-height:100dvh;min-width:0;}
.app-body{display:block;flex:1;}
/* ── Top navbar ── */
.top-navbar,.top-nav{height:48px;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;padding:0 20px;flex-shrink:0;position:sticky;top:0;z-index:100;max-width:100%;min-width:0;}
.navbar-brand,
.tn-brand{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none;color:inherit;}
.brand-mark,
.tn-mark{width:25px;height:25px;background:var(--text);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;}
.brand-name,
.tn-name{font-size:13px;font-weight:700;color:var(--text);}
.navbar-sep{display:none;}
.navbar-search,
.tn-search{display:flex;align-items:center;gap:8px;background:var(--bg);border:1.5px solid var(--border);border-radius:9px;padding:7px 12px;transition:border-color 0.15s,box-shadow 0.15s;cursor:text;margin-left:8px;position:relative;flex:0 1 520px;}
.navbar-search:focus-within,
.tn-search:focus-within{border-color:#c0c0ba;box-shadow:0 0 0 3px rgba(24,24,22,0.05);background:var(--white);}
.navbar-search svg,
.tn-search svg{width:14px;height:14px;stroke:var(--muted2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
/* line-height esplicito: senza, l'input eredita l'1.5 del corpo pagina e la
   barra viene 36px invece dei 31px delle altre pagine. */
.navbar-search input,
.tn-search input{flex:1;border:none;outline:none;font-family:'Figtree',sans-serif;font-size:13px;font-weight:500;line-height:normal;color:var(--text);background:transparent;min-width:0;}
.navbar-search input::placeholder,
.tn-search input::placeholder{color:var(--muted2);font-weight:400;}
.tn-links{display:flex;align-items:center;gap:1px;flex-shrink:1;min-width:0;}
.tn-link{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 11px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;transition:background .12s,color .12s;}
.tn-link:hover{background:var(--bg);color:var(--text);}
.tn-link.active{background:var(--bg);color:var(--text);}
.tn-gap{flex:1;min-width:10px;}
.tn-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.tn-btn{width:32px;height:32px;border:1px solid var(--border);background:var(--white);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;transition:all .12s;}
.tn-btn:hover{background:var(--bg);color:var(--text);}
.tn-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
/* `flex-shrink:0`: dove l'avatar e' figlio diretto della barra (watchlist,
   about) la ricerca accanto lo comprimeva a 19px di larghezza per 32 di
   altezza — un cerchio schiacciato in ovale. Dove sta dentro `.tn-actions`
   non si vedeva, ed e' per questo che il difetto era solo su alcune pagine. */
.tn-avatar{width:32px;height:32px;border-radius:50%;background:#dce8ff;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;text-decoration:none;flex-shrink:0}
.kbd{font-size:10px;font-weight:600;color:var(--muted2);background:var(--white);border:1px solid var(--border);border-radius:4px;padding:1px 5px;}
.top-navbar .kbd{display:none;}
/* Suggest */
.suggest-box{position:absolute;top:100%;left:0;right:0;z-index:200;background:var(--white);border:1.5px solid var(--border);border-radius:10px;margin-top:4px;box-shadow:0 8px 30px rgba(0,0,0,0.1);display:none;}
.suggestItem{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;cursor:pointer;}
.suggestItem:hover{background:var(--bg);}
.suggestName{font-size:13px;font-weight:600;color:var(--text);}
.suggestMeta{font-size:11px;color:var(--muted2);}
.suggest-pill{font-size:10px;font-weight:700;color:var(--blue);background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:5px;padding:2px 8px;}
/* ── Sidebar ── */
.sidebar{display:none;}
.nav-section{margin-bottom:16px;}
.nav-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted2);padding:0 6px;margin-bottom:3px;}
.nav{display:flex;flex-direction:column;gap:1px;}
.nav-link{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;font-size:13px;color:var(--muted);cursor:pointer;transition:all 0.1s;text-decoration:none;}
.nav-link:hover{background:var(--bg);color:var(--text);}
.nav-link.active{background:var(--bg);color:var(--text);font-weight:600;}
.nav-link svg{width:14px;height:14px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.sidebar-spacer{flex:1;}
/* La riga dell'account e' un'ancora: senza colore e decorazione esplicite
   usciva col blu di default e diventava viola dopo il clic, come il link
   del disclaimer in fondo. */
.sidebar-user{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;cursor:pointer;color:inherit;text-decoration:none;}
.sidebar-user:visited{color:inherit;}
.sidebar-user:hover{background:var(--bg);}
.user-av{width:25px;height:25px;border-radius:50%;background:#dce8ff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--blue);}
.user-name{font-size:12.5px;font-weight:500;}
/* ── Main ── */
.main{flex:1;padding:22px 30px 60px;min-width:0;max-width:100%;}
.content{max-width:1160px;width:100%;margin:0 auto;min-width:0;}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);}
.gap{height:14px;}
.section-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted2);margin-bottom:10px;}
/* ── Tooltip ── */
.has-tt{position:relative;display:inline-flex;align-items:center;gap:4px;cursor:default;}
.tt-icon{width:13px;height:13px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:var(--muted2);cursor:help;flex-shrink:0;}
/* Si apre verso il basso: in cima alle card l'apertura verso l'alto veniva tagliata */
.tt-box{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:60;background:#181816;color:#f2f2f0;font-size:12px;font-weight:400;line-height:1.55;padding:9px 12px;border-radius:9px;width:max-content;max-width:min(240px,calc(100vw - 60px));box-shadow:0 6px 20px rgba(0,0,0,0.18);pointer-events:none;text-transform:none;letter-spacing:0;white-space:normal;text-align:left;}
.tt-box::after{content:'';position:absolute;bottom:100%;left:14px;border:5px solid transparent;border-bottom-color:#181816;}
.tt-box--wide{max-width:min(300px,calc(100vw - 60px));}
.has-tt:hover .tt-box{display:block;}
/* Termine spiegabile: nessuna icona "?", solo una sottolineatura tratteggiata discreta */
.tt-term{position:relative;cursor:help;text-decoration:underline dotted var(--muted2);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .12s,color .12s;}
.tt-term:hover{text-decoration-color:var(--text);color:var(--text);}
.tt-term:hover .tt-box{display:block;}
/* ════════ HERO ════════ */
.hero-outer{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,340px);gap:14px;margin-bottom:14px;align-items:stretch;min-width:0;}
.hero-left-col{display:flex;flex-direction:column;min-width:0;}
.hero-outer .chart-card{flex:1;}
.hero-outer>*{min-width:0;}
.name-price-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;border-bottom:none;padding:16px 18px 14px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.np-left{display:flex;align-items:flex-start;gap:12px;min-width:0;}
.np-left>div:last-child{min-width:0;}
.stock-logo{width:40px;height:40px;background:#fff;border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--muted2);letter-spacing:-0.3px;flex-shrink:0;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(24,24,22,0.05);}
.stock-logo .logo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:5px;box-sizing:border-box;border-radius:10px;}
.stock-exchange{font-size:11.5px;color:var(--muted2);margin-bottom:2px;}
.stock-name{font-size:24px;font-weight:800;letter-spacing:-0.6px;line-height:1.05;overflow-wrap:anywhere;margin:0;}
.np-right{text-align:right;flex-shrink:0;}
.price-lbl{font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted2);margin-bottom:3px;}
.price-val{font-size:32px;font-weight:800;letter-spacing:-1.2px;line-height:1;margin-bottom:5px;}
.price-badge{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;}
/* A quando e' riferito il prezzo. Sotto la variazione, discreta: e' un dato di
   servizio, non compete con il numero grande. */
.price-asof{font-size:11px;color:var(--muted2);margin-top:7px;letter-spacing:0;}
/* ── Segui questo titolo ──────────────────────────────────────────────────
   Sola icona accanto al nome. Spenta e' un contorno grigio, accesa si riempie
   di ambra: si legge a colpo d'occhio senza leggere nessuna parola. */
.nome-riga{display:flex;align-items:center;gap:9px;min-width:0;}
.wl-wrap{position:relative;flex-shrink:0;}
.wl-seg{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;
  border:1px solid var(--border);background:var(--white);border-radius:7px;cursor:pointer;color:var(--muted2);
  transition:color .12s,border-color .12s,background .12s;}
.wl-seg:hover{color:var(--text);border-color:var(--muted2);}
.wl-seg svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;}
.wl-seg.dentro{color:var(--amber);border-color:var(--amber-border);background:var(--amber-bg);}
.wl-seg.dentro svg{fill:currentColor;}

/* Il menu. Ancorato alla stella e allineato a sinistra: nella colonna di
   sinistra c'e' spazio, e aperto a destra uscirebbe dalla card sui nomi corti. */
.wl-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:250px;background:var(--white);
  border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 26px rgba(24,24,22,.13);
  overflow:hidden;text-align:left;}
.wl-menu-tit{font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted2);padding:9px 11px 5px;}
/* Scorre invece di allungarsi: con venti liste il menu usciva dallo schermo. */
.wl-liste{max-height:172px;overflow-y:auto;padding:4px;}
.wl-voce{display:flex;align-items:center;gap:8px;width:100%;font:inherit;font-size:12.5px;color:var(--text);
  background:none;border:0;border-radius:6px;padding:7px 9px;cursor:pointer;text-align:left;}
.wl-voce:hover{background:var(--bg);}
.wl-voce .segno{width:13px;flex-shrink:0;color:var(--green);font-weight:800;font-size:12px;}
.wl-voce .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wl-voce .quanti{margin-left:auto;font-size:10.5px;color:var(--muted2);flex-shrink:0;}
/* Creare una lista senza uscire dalla pagina: il campo prende il posto del
   bottone, e il titolo finisce dentro la lista appena creata. */
.wl-nuova{display:flex;align-items:center;gap:8px;width:100%;font:inherit;font-size:12.5px;font-weight:650;
  color:var(--blue);background:none;border:0;border-top:1px solid var(--border);padding:9px 13px;
  cursor:pointer;text-align:left;}
.wl-nuova:hover{background:var(--blue-bg);}
.wl-nuova svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;}
.wl-nuova-riga{display:flex;gap:6px;padding:8px 9px;border-top:1px solid var(--border);}
.wl-nuova-riga input{flex:1;min-width:0;font:inherit;font-size:12px;padding:6px 9px;border:1px solid var(--border);
  border-radius:6px;background:var(--bg);color:var(--text);outline:none;}
.wl-nuova-riga input:focus{border-color:var(--muted2);background:var(--white);}
.wl-nuova-riga button{font:inherit;font-size:12px;font-weight:700;color:#fff;background:var(--text);border:0;
  border-radius:6px;padding:6px 12px;cursor:pointer;}
.up{background:var(--green-bg);color:var(--green);}
.down{background:var(--red-bg);color:var(--red);}
/* Chart card */
.chart-card{background:var(--white);border:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);overflow:hidden;display:flex;flex-direction:column;}
.chart-topbar{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;}
.chart-tabs{display:flex;gap:3px;}
.ctab{font-size:11px;font-weight:600;padding:3px 8px;border-radius:5px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font-family:'Figtree',sans-serif;transition:all 0.1s;}
.ctab.active{background:var(--text);color:#fff;}
.ctab:hover:not(.active){background:var(--border);color:var(--text);}
.compare-btn{font-size:11px;font-weight:600;padding:3px 10px;border-radius:5px;border:1px solid var(--blue-border);background:var(--blue-bg);color:var(--blue);cursor:pointer;font-family:'Figtree',sans-serif;display:flex;align-items:center;gap:4px;}
.compare-btn svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}
.chart-tools{display:flex;align-items:center;gap:8px;min-width:0;}
.range-label{font-size:10.5px;color:var(--muted2);white-space:nowrap;text-align:right;min-width:0;}
.chart-wrap{position:relative;flex:1;min-height:0;padding:0;min-width:0;overflow:hidden;}
.chart-wrap canvas{position:absolute;inset:0;display:block;width:100% !important;height:100% !important;}
.chart-tip{position:absolute;pointer-events:none;z-index:30;background:rgba(18,18,16,0.94);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:7px 10px;opacity:0;transition:opacity .12s;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,0.2);}
.chart-tip .ct-date{font-size:10.5px;color:#a0a09a;margin-bottom:3px;}
.chart-tip .ct-row{display:flex;align-items:baseline;gap:8px;}
.chart-tip .ct-val{font-size:13px;font-weight:700;color:#f0f0e8;}
.chart-tip .ct-pct{font-size:12.5px;font-weight:800;}
.chart-tip .ct-pct.pos{color:#7ec4a0;}
.chart-tip .ct-pct.neg{color:#e8a0a0;}
.chart-unavailable{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 18px;font-size:12px;color:var(--muted2);line-height:1.5;}
.chart-timeline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px 10px;font-size:10px;font-weight:600;color:var(--muted2);font-variant-numeric:tabular-nums;}
.chart-timeline span{min-width:0;white-space:nowrap;}
/* Right panel */
.right-panel{display:flex;flex-direction:column;gap:0;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;min-width:0;}
.right-panel>.analyst-card,.right-panel>.data-card,.right-panel>.stock-perf-card{border:none;border-radius:0;margin:0;}
.right-panel>.analyst-card,.right-panel>.data-card{border-bottom:1px solid var(--border);}
/* Company profile — una sola card con divisori interni, come nel mock */
.company-wrap{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;min-width:0;}
.cp-top-row{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;min-width:0;}
.cp-top-row>*{min-width:0;}
.cp-who{padding:14px 16px;border-right:1px solid var(--border);}
.cp-section-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted2);margin-bottom:8px;}
.cp-icon-lbl{display:flex;align-items:center;gap:6px;}
.cp-icon-lbl svg{stroke:var(--muted2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.cp-desc{font-size:12.5px;line-height:1.65;color:var(--muted);margin:0 0 12px;}
.cp-desc strong{color:var(--text);font-weight:600;}
.cp-desc:last-child{margin-bottom:0;}
.cp-meta-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--border);margin-top:4px;padding-top:11px;gap:0;}
.cp-meta-item{padding-right:12px;border-right:1px solid var(--border);}
.cp-meta-item:nth-child(2){padding-left:12px;}
.cp-meta-item:last-child{border-right:none;padding-right:0;padding-left:12px;}
.cp-meta-lbl{font-size:10.5px;color:var(--muted2);margin-bottom:2px;}
.cp-meta-val{font-size:14px;font-weight:800;color:var(--text);letter-spacing:-0.3px;}
.cp-meta-sub{font-size:10px;color:var(--muted2);margin-top:1px;}
.cf-section{padding:11px 14px;border-bottom:1px solid var(--border);}
.cf-section:last-child{border-bottom:none;}
.cp-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;}
.cp-chip{font-size:11px;font-weight:600;color:var(--blue);background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:4px;padding:2px 8px;white-space:normal;overflow-wrap:anywhere;}
.cp-supplier-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:2px;}
.cp-supplier-table td{padding:3px 0;color:var(--muted);vertical-align:top;overflow-wrap:anywhere;font-size:11.5px;line-height:1.5;}
.cp-supplier-table td:first-child{font-weight:600;color:var(--text);font-size:12px;padding-right:10px;white-space:normal;width:34%;}
.cp-supplier-table td.cp-empty-note{font-weight:400;width:auto;color:var(--muted);font-size:11.5px;line-height:1.55;}
/* Moat: card espandibile */
.moat-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.moat-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;cursor:pointer;user-select:none;transition:background .12s;}
.moat-header:hover{background:#fafaf8;}
.moat-header-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;}
.moat-header-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted2);white-space:nowrap;}
.moat-preview{display:flex;gap:5px;flex-wrap:wrap;}
.moat-pill{font-size:11px;font-weight:500;padding:2px 9px;border-radius:99px;background:var(--bg);border:1px solid var(--border);color:var(--muted);}
.moat-toggle{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--muted);flex-shrink:0;}
.moat-toggle svg{width:14px;height:14px;stroke:var(--muted2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s ease;}
.moat-card.open .moat-toggle svg{transform:rotate(180deg);}
.moat-toggle-open{display:none;}
.moat-card.open .moat-toggle-open{display:block;}
.moat-card.open .moat-toggle-closed{display:none;}
.moat-body{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.moat-card.open .moat-body{max-height:900px;}
.moat-body-inner{border-top:1px solid var(--border);padding:14px 16px 16px;}
.moat-intro{font-size:12.5px;color:var(--muted);line-height:1.65;margin-bottom:12px;}
.moat-intro strong{color:var(--text);font-weight:600;}
.moat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.moat-item{border:1px solid var(--border);border-radius:9px;padding:12px 14px;background:var(--bg);transition:background .12s;}
.moat-item:hover{background:#ededeb;}
.moat-headline{font-size:13px;font-weight:700;color:var(--text);letter-spacing:-0.1px;line-height:1.3;}
.moat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:5px;}
.impact-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:2px 7px;border-radius:4px;white-space:nowrap;flex-shrink:0;}
.impact-tag.difensivo{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);}
.impact-tag.margini{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border);}
.impact-tag.crescita{background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-border);}
/* "Da monitorare" segnala un fatto da tenere d'occhio, non un allarme: ambra
   neutra, come chiesto dalle istruzioni editoriali (non era nel mock). */
.impact-tag.monitorare{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border);}
.moat-desc{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:7px;}
.moat-desc strong{color:var(--text);font-weight:600;}
.moat-data{display:flex;align-items:center;gap:5px;}
.moat-data-dot{width:3px;height:3px;background:var(--muted2);border-radius:50%;flex-shrink:0;}
.moat-data-text{font-size:10.5px;color:var(--muted2);font-style:italic;}
.moat-data-text strong{color:var(--muted);font-weight:700;}
/* Performance grid */
.stock-perf-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:12px;}
.perf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.perf-col{text-align:center;padding:12px 4px;}
.perf-col+.perf-col{border-left:1px solid var(--border);}
.perf-period{font-size:10px;color:var(--muted2);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:4px;}
.perf-val{font-size:16px;font-weight:800;letter-spacing:-0.5px;line-height:1;}
.perf-val.pos{color:var(--green);}
.perf-val.neg{color:var(--red);}
.perf-val.neu{color:var(--text);}
.perf-bar-wrap{height:3px;background:var(--border);border-radius:2px;margin-top:6px;overflow:hidden;}
.perf-bar{height:100%;border-radius:2px;}
.perf-bar.pos{background:var(--green);}
.perf-bar.neg{background:var(--red);}
/* Data chiave */
.data-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.data-card-header{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted2);padding:11px 14px;border-bottom:1px solid var(--border);}
.data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:4px 0;}
.data-item{padding:10px 14px;border-bottom:1px solid var(--border);}
.data-item:nth-last-child(-n+2){border-bottom:none;}
.data-item .det-apri{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-align:left;display:block;width:100%;}
.d-lbl{font-size:10px;color:var(--muted2);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:3px;}
.data-item .det-apri:hover .d-lbl,.data-item .det-apri:focus-visible .d-lbl{color:var(--blue);}
.d-val{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-0.3px;margin-bottom:2px;white-space:nowrap;}
.d-val.pos{color:var(--green);}
.d-val.neg{color:var(--red);}
.d-sub{font-size:10.5px;color:var(--muted2);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.d-sub b{color:var(--muted);font-weight:700;}
.ctx-pos{color:var(--green);font-weight:600;}
.ctx-neu{color:var(--amber);font-weight:600;}
/* Analyst card */
.analyst-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:14px;}
.analyst-card-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted2);margin-bottom:3px;}
.analyst-rating{font-size:20px;font-weight:800;letter-spacing:-0.5px;color:var(--green);margin-bottom:2px;line-height:1;}
.analyst-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;}
.analyst-count{font-size:10.5px;color:var(--muted2);margin-top:2px;}
.target-box{text-align:right;background:var(--green-bg);border:1px solid var(--green-border);border-radius:8px;padding:8px 12px;flex-shrink:0;}
.target-box.neg{background:var(--red-bg);border-color:var(--red-border);}
.target-lbl{font-size:10px;color:var(--green);font-weight:600;text-transform:uppercase;letter-spacing:0.07em;margin-bottom:2px;}
.target-val{font-size:20px;font-weight:800;color:var(--green);letter-spacing:-0.5px;line-height:1;}
.target-upside{font-size:10.5px;color:var(--green);margin-top:2px;font-weight:600;}
.target-box.neg .target-lbl,.target-box.neg .target-val,.target-box.neg .target-upside{color:var(--red);}
.bar-rows{display:flex;flex-direction:column;gap:6px;}
.bar-row{display:flex;align-items:center;gap:7px;}
.bar-k{font-size:11px;min-width:58px;color:var(--muted);}
.bar-track{flex:1;height:4px;background:var(--bg);border-radius:99px;overflow:hidden;border:1px solid var(--border);}
.bar-fill{height:100%;border-radius:99px;transition:width 0.4s;}
.bar-n{font-size:10.5px;min-width:14px;text-align:right;color:var(--muted2);}
/* News section */
.news-section{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:14px;}
.news-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.news-header-left{display:flex;align-items:center;gap:10px;}
.news-title{font-size:14px;font-weight:700;}
.read-news-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:6px 12px;cursor:pointer;font-family:'Figtree',sans-serif;transition:all 0.1s;}
.read-news-btn:hover{background:var(--border);}
.read-news-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;}
.summary-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,260px);gap:0;border-bottom:1px solid var(--border);min-width:0;}
.summary-row>*{min-width:0;}
.summary-left{padding:16px 18px;border-right:1px solid var(--border);}
.sent-strip{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.sent-bar-wrap{display:flex;flex-direction:column;gap:5px;margin-bottom:8px;}
.sent-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted2);}
.sent-track{display:flex;height:5px;border-radius:99px;overflow:hidden;gap:1px;}
.sb-n{background:var(--red);height:100%;border-radius:99px 0 0 99px;transition:width 0.4s;}
.sb-u{background:#c8c8c4;height:100%;transition:width 0.4s;}
.sb-p{background:var(--green);height:100%;border-radius:0 99px 99px 0;transition:width 0.4s;}
.sent-right{display:flex;flex-direction:column;gap:2px;}
.sent-word{font-size:14px;font-weight:800;letter-spacing:-0.3px;}
.sent-sub{font-size:11px;color:var(--muted2);}
.summary-body{font-size:12.5px;color:var(--muted);line-height:1.72;margin-bottom:10px;}
.summary-body strong{color:var(--text);font-weight:600;}
.summary-meta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
/* ── Fonti di un contenuto (condiviso home/scheda titolo) ──────────────────
   Da dove viene quello che l'AI ha riassunto. Le pastiglie sono per **testata**
   e non per articolo: cinque pezzi Reuters facevano cinque "RE" identici in
   fila, che non e' un'informazione. Si sovrappongono, e al passaggio del mouse
   si aprono a ventaglio per far leggere le iniziali. */
.fonti-blocco{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:2px 0;margin:0;cursor:pointer;font:inherit;color:var(--muted2);text-align:left;}
.fonti-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted2);}
.fonti-av{display:inline-flex;}
/* La PRIMA pastiglia sta sopra le altre. Con l'ordine naturale ogni pastiglia
   copre la precedente, e di "WS" si leggeva solo la W: in una pila di avatar si
   sovrappone all'indietro proprio perche' le iniziali restino leggibili. */
.fonti-av .src-av{position:relative;width:17px;height:17px;border-radius:50%;border:1.5px solid var(--white);font-size:6.5px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;justify-content:center;margin-left:-5px;flex-shrink:0;transition:margin-left .14s ease;}
.fonti-av .src-av:nth-child(1){z-index:4;}
.fonti-av .src-av:nth-child(2){z-index:3;}
.fonti-av .src-av:nth-child(3){z-index:2;}
.fonti-av .src-av:nth-child(4){z-index:1;}
.fonti-av .src-av:first-child{margin-left:0;}
.fonti-blocco:hover .fonti-av .src-av{margin-left:-1px;}
.fonti-nomi{font-size:10px;color:var(--muted2);transition:color .12s;}
.fonti-n{font-size:9.5px;color:var(--muted2);border:1px solid var(--border);border-radius:9px;padding:0 5px;line-height:14px;transition:color .12s,border-color .12s;}
.fonti-blocco:hover .fonti-nomi{color:var(--text);}
.fonti-blocco:hover .fonti-n{color:var(--text);border-color:var(--muted2);}
.src-av.c1{background:#b83232;color:#fdf2f2;}
.src-av.c2{background:#1a4d8a;color:#e8f0fb;}
.src-av.c3{background:#181816;color:#f2f2f0;}
.src-av.c4{background:#0052a3;color:#e6f1fb;}
.src-av.c5{background:#2f6f4e;color:#eaf5ef;}
.src-av.c6{background:#6b4b8a;color:#f2ecf8;}
.src-av.c7{background:#8a5a2b;color:#f8f0e8;}
.src-av.c8{background:#1f6f7a;color:#e8f5f7;}
/* L'etichetta che dice cosa e' il testo sotto. Noi sapevamo che quel paragrafo
   era la panoramica del giorno; il lettore no — non c'era scritto da nessuna
   parte, ne' in home ne' sulla scheda titolo. */
.blocco-label{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);margin-bottom:3px;}
.meta-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted2);}
.meta-chip svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;}
.meta-sep{width:1px;height:10px;background:var(--border);}
.stale-banner{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber-border);border-radius:7px;padding:7px 10px;margin-top:8px;}
.stale-banner svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}
.stale-banner.hidden{display:none;}
.summary-right{padding:16px 18px;}
.block-label{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted2);margin-bottom:10px;}
.block-label svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;}
.watch-list{display:flex;flex-direction:column;gap:8px;}
.watch-item{display:flex;align-items:flex-start;gap:9px;}
.watch-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.watch-dot.earnings{background:var(--blue);}
.watch-dot.monitor{background:var(--green);}
.watch-dot.event{background:var(--amber);}
.watch-text{font-size:12px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere;}
.watch-text strong{color:var(--text);font-weight:600;}
.watch-date{font-size:10.5px;color:var(--muted2);}
.inner-sep{height:1px;background:var(--border);margin:12px 0;}
/* Trend bars */
.trend-bars{display:flex;align-items:flex-end;gap:8px;height:60px;margin-bottom:8px;}
.trend-col{display:flex;flex-direction:column;align-items:center;flex:1;}
.trend-bar-wrap{flex:1;display:flex;align-items:flex-end;width:100%;position:relative;}
.trend-bar{width:100%;border-radius:3px 3px 0 0;min-height:4px;position:relative;cursor:default;}
.trend-bar.pos{background:#7ec4a0;}
.trend-bar.neg{background:#e8a0a0;}
.trend-bar.neu{background:#d4d4ce;}
.trend-bar.current{opacity:1;box-shadow:0 0 0 2px var(--text);}
.trend-week{font-size:9px;color:var(--muted2);margin-top:3px;white-space:nowrap;}
.trend-week.current{color:var(--text);font-weight:700;}
.trend-legend{display:flex;gap:10px;flex-wrap:wrap;}
.tl-item{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--muted2);}
.tl-dot{width:8px;height:8px;border-radius:2px;}
/* Themes */
.themes-header{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted2);padding:12px 18px;border-top:1px solid var(--border);}
.themes-count{font-weight:400;text-transform:none;letter-spacing:0;}
.themes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 18px 16px;}
.theme-card{border:1px solid var(--border);border-radius:9px;padding:13px 14px;display:flex;flex-direction:column;gap:8px;min-width:0;}
.theme-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;flex-wrap:wrap;}
.theme-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:2px 7px;border-radius:4px;}
.theme-tag.product{background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-border);}
.theme-tag.geopolitica{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border);}
.theme-tag.legale{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border);}
.theme-tag.macro{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);}
.theme-sentiment{display:flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;}
.theme-sentiment svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.theme-sentiment.pos{color:var(--green);}
.theme-sentiment.neg{color:var(--red);}
.theme-sentiment.misto{color:var(--amber);}
.theme-title{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.35;overflow-wrap:anywhere;}
.theme-summary{font-size:11.5px;color:var(--muted);line-height:1.55;overflow-wrap:anywhere;}
.theme-summary strong{color:var(--text);font-weight:600;}
.theme-footer{display:flex;align-items:center;justify-content:space-between;}
.theme-horizon{font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px;}
.theme-horizon.breve{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border);}
.theme-horizon.medio{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border);}
.theme-horizon.lungo{background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-border);}
.theme-source{font-size:10.5px;color:var(--muted2);}
.theme-news-btn{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--blue);background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:5px;padding:2px 8px;cursor:pointer;font-family:'Figtree',sans-serif;transition:all 0.1s;}
.theme-news-btn:hover{background:var(--blue);color:#fff;}
.theme-news-btn svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;}
/* Financial section */
.bottom-row{display:grid;grid-template-columns:1fr;gap:14px;align-items:start;margin-bottom:14px;min-width:0;}
.bottom-row>*{min-width:0;}
.fin-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);min-width:0;}
.fin-header{padding:13px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.fin-title{font-size:13px;font-weight:700;}
.fin-updated{font-size:11px;color:var(--muted2);text-align:right;line-height:1.35;white-space:nowrap;}
/* Lettura fondamentale: la sintesi del provider, messa in evidenza invece che in grigio nell'header */
.fin-readout{display:flex;align-items:flex-start;gap:11px;padding:12px 18px;background:var(--blue-bg);border-bottom:1px solid var(--border);}
.fin-readout-lbl{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--blue);white-space:nowrap;flex-shrink:0;padding-top:1px;}
.fin-readout-lbl svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.fin-readout-text{font-size:12.5px;color:var(--text);line-height:1.55;font-weight:500;}
.fin-questions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--border);}
.fin-q-na{color:var(--muted2);font-weight:500;font-style:italic;}
.fin-q{padding:12px 16px;border-right:1px solid var(--border);}
.fin-q:last-child{border-right:none;}
.fin-q-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted2);margin-bottom:5px;display:flex;align-items:center;gap:5px;}
.fin-q-label svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}
.fin-q-answer{font-size:13px;font-weight:500;color:var(--text);line-height:1.45;overflow-wrap:anywhere;}
.fin-q-answer .hi{color:var(--green);font-weight:700;}
.fin-grid-wrap{padding:14px 18px 16px;}
.fin-grid-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted2);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.fin-grid-label::after{content:'';flex:1;height:1px;background:var(--border);}
.fin-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.fin-item{padding:10px 12px 9px 0;border-bottom:1px solid var(--border);transition:background .12s;}
.fin-item-last-row{border-bottom:none;}
.fin-item:hover{background:#fafaf8;}
.fin-lbl{font-size:10.5px;color:var(--muted2);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:3px;display:flex;align-items:center;gap:4px;}
.fin-val{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-0.3px;margin-bottom:2px;overflow-wrap:anywhere;}
.fin-val.pos{color:var(--green);}
.fin-val.neg{color:var(--red);}
.fin-val.missing{color:var(--muted2);font-size:12px;font-weight:500;}
.fin-sub{font-size:10.5px;color:var(--muted2);line-height:1.3;}
.fin-sub .ctx{color:var(--green);font-weight:600;}
.fin-sub .ctx-neu{color:var(--amber);font-weight:600;}
/* Numeri per nerd (card con scala e marker) */
.fin-nerd{margin-top:14px;padding-top:13px;border-top:1px solid var(--border);}
.nerd-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted2);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.nerd-label::after{content:'';flex:1;height:1px;background:var(--border);}
.nerd-label span{font-size:9px;font-weight:500;color:var(--muted2);letter-spacing:0;text-transform:none;background:var(--bg);border:1px solid var(--border);padding:1px 7px;border-radius:99px;}
.nerd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
/* Le card che non si applicano al titolo non vengono disegnate (vedi
   `non_applicabili` nel payload): la griglia prende il numero di colonne
   delle card rimaste, altrimenti tre riquadri su quattro colonne
   lascerebbero un buco a destra che sembra una card mancante. */
.nerd-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.nerd-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.nerd-grid-1{grid-template-columns:minmax(0,1fr);}
.nerd-item{background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:11px 12px;min-width:0;transition:border-color .12s,background .12s;}
.nerd-item:hover{border-color:#c8c8c4;background:#eeeee8;}
.nerd-item-lbl{font-size:10.5px;color:var(--muted2);margin-bottom:5px;}
.nerd-item-val{font-size:17px;font-weight:800;color:var(--text);letter-spacing:-0.4px;margin-bottom:6px;}
.nerd-item-val.pos{color:var(--green);}
.nerd-item-val.neu{color:var(--amber);}
.nerd-bar-wrap{margin-bottom:5px;}
.nerd-bar-labels{display:flex;justify-content:space-between;font-size:9.5px;color:var(--muted2);margin-bottom:3px;}
.nerd-bar-banda{font-size:9px;letter-spacing:0.04em;text-transform:uppercase;opacity:0.75;}
.nerd-bar-track{height:4px;background:#e4e4e0;border-radius:99px;position:relative;}
.nerd-bar-fill{height:100%;border-radius:99px;}
.nerd-bar-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;border:2px solid var(--white);box-shadow:0 0 0 1px rgba(0,0,0,0.15);}
.nerd-bar-ref{position:absolute;top:-2px;bottom:-2px;width:1px;background:#c8c8c4;}
.nerd-sub{font-size:10px;color:var(--muted2);line-height:1.4;}
.nerd-sub .hi{color:var(--green);font-weight:600;}
.nerd-sub .ok{color:var(--amber);font-weight:600;}
/* Market context cards */
.market-context-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start;min-width:0;}
.market-context-row>*{min-width:0;}
.mkt-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);min-width:0;}
.mkt-header{padding:13px 16px;border-bottom:1px solid var(--border);font-size:13px;font-weight:700;}

/* Elenco pulito: la card del rischio non ripete la griglia di tessere dei
   "numeri per nerd" che sta venti pixel piu' sopra. */
.mkt-list{padding:2px 16px 12px;display:flex;flex-direction:column;}
.rk-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--border);}
.rk-row:last-child{border-bottom:none;}
.rk-left{min-width:0;}
.rk-row .det-apri{background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer;text-align:left;}
.rk-lbl{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;}
.rk-row .det-apri:hover .rk-lbl,.rk-row .det-apri:focus-visible .rk-lbl{color:var(--blue);}
.rk-sub{font-size:9.5px;color:var(--muted2);line-height:1.4;margin-top:3px;}
.rk-sub .hi{color:var(--green);font-weight:600;}
/* 16px, non 19: erano i numeri piu' grandi della pagina, sopra i 17 dei
   "numeri per nerd", i 15 dei dati chiave e i 13 della performance relativa
   che sta dentro questa stessa card. */
.rk-val{font-size:15px;font-weight:800;letter-spacing:-0.3px;flex-shrink:0;}
.rk-val.neg{color:var(--red);}
/* Stessi valori di .d-lbl e .fin-sub: la pagina ha un solo modo di scrivere
   il nome di un campo e la riga di contesto sotto al numero. */

.perf-strip{margin:0 14px 12px;padding:10px 13px;background:var(--bg);border-radius:8px;}
.perf-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted2);margin-bottom:8px;}
.perf-rows{display:flex;flex-direction:column;gap:6px;}
.perf-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;}
.perf-name{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.perf-dot{width:8px;height:3px;border-radius:99px;flex-shrink:0;}
.perf-val{font-size:13px;font-weight:800;letter-spacing:-0.2px;}
.perf-val.pos{color:var(--green);}
.perf-val.neg{color:var(--red);}
.delta-note{font-size:11px;color:var(--muted2);padding-top:8px;margin-top:6px;border-top:1px solid var(--border);line-height:1.5;}
.delta-note strong{color:var(--text);font-weight:600;}
.corr-strip{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);min-width:0;padding:13px 16px;display:none;}
.corr-strip.show{display:block;}
.corr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:-13px -16px 12px;padding:13px 16px;border-bottom:1px solid var(--border);}
.corr-lbl{font-size:13px;font-weight:700;color:var(--text);}
.corr-date{font-size:10px;color:var(--muted2);}
.corr-desc{font-size:11.5px;color:var(--muted);line-height:1.55;margin:-3px 0 11px;}
.corr-desc strong{color:var(--text);font-weight:600;}
.corr-window-tabs{display:flex;gap:3px;flex-shrink:0;}
.corr-window-tabs button{border:1px solid var(--border);background:var(--white);color:var(--muted);border-radius:6px;padding:2px 8px;font-family:'Figtree',sans-serif;font-size:10.5px;font-weight:700;cursor:pointer;}
.corr-window-tabs button.active{background:var(--text);border-color:var(--text);color:#fff;}
.corr-rows{display:flex;flex-direction:column;gap:8px;}
.corr-row{display:grid;grid-template-columns:minmax(82px,105px) minmax(0,1fr) 42px 52px;align-items:center;gap:8px;min-width:0;}
.corr-factor{display:flex;align-items:center;gap:7px;min-width:0;}
.corr-arrow{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;}
.corr-arrow.up{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);}
.corr-arrow.down{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);}
.corr-name{font-size:12px;color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.corr-proxy{font-size:10px;color:var(--muted2);font-weight:600;margin-top:1px;}
.corr-axis{position:relative;height:18px;background:var(--white);border:1px solid var(--border);border-radius:99px;overflow:hidden;}
.corr-axis::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--border);}
.corr-fill{position:absolute;top:3px;height:10px;border-radius:99px;background:var(--green);min-width:3px;}
.corr-fill.neg{background:var(--red);}
.corr-score{font-size:11px;font-weight:800;color:var(--text);text-align:right;font-variant-numeric:tabular-nums;}
.corr-int{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:2px 7px;border-radius:4px;white-space:nowrap;}
.corr-int.alta{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border);}
.corr-int.media{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border);}
.corr-int.bassa{background:var(--bg);color:var(--muted);border:1px solid var(--border);}
.corr-note{font-size:10.5px;color:var(--muted2);line-height:1.4;margin-top:8px;}
/* Avvertenza correlazioni: chiara ma discreta, in coda alla card */
.corr-warning{display:flex;align-items:flex-start;gap:7px;margin-top:11px;padding-top:9px;border-top:1px solid var(--border);font-size:10.5px;line-height:1.5;color:var(--muted2);}
.corr-warning strong{color:var(--muted);font-weight:600;}
.corr-warning svg{width:12px;height:12px;flex-shrink:0;margin-top:2px;stroke:var(--muted2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.corr-reading{margin-top:10px;padding:9px 10px;background:var(--white);border:1px solid var(--border);border-radius:8px;}
.corr-reading-title{font-size:11.5px;font-weight:800;color:var(--text);margin-bottom:3px;}
.corr-reading-text{font-size:11.5px;color:var(--muted);line-height:1.5;}
/* Popup */
/* z-index sopra la barra di navigazione mobile (200): stava sotto, e su
   telefono gli ultimi 56px del pannello finivano dietro la barra — misurato,
   la lista dei pari si tagliava a meta' riga. Stesso valore di sectors.html. */
.popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:300;display:none;align-items:flex-start;justify-content:flex-end;padding:20px;}
.popup-overlay.open{display:flex;}
.popup{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);width:420px;max-height:calc(100dvh - 40px);display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,0.12);}
.popup-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.popup-title{font-size:14px;font-weight:700;color:var(--text);}
/* Dettaglio di un numero: stessa idea delle righe del quadro di mercato in home
   — il valore si apre e mostra da dove viene e con cosa si confronta. */
.det-body{padding:16px 18px 20px;overflow-y:auto;}
.det-val{display:flex;align-items:baseline;gap:9px;margin-bottom:4px;}
.det-val b{font-size:29px;letter-spacing:-.02em;}
.det-val span{font-size:12px;color:var(--muted);}
.det-spieg{font-size:12.5px;line-height:1.55;color:var(--muted);margin:9px 0 4px;}
.det-sez{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2);margin:18px 0 10px;padding-top:15px;border-top:1px solid var(--border);}
.det-righe{display:flex;flex-direction:column;gap:7px;}
.det-riga{display:flex;align-items:center;gap:10px;font-size:12px;}
.det-riga em{font-style:normal;color:var(--muted2);width:42px;font-size:11px;flex-shrink:0;}
.det-riga .tr{flex:1;height:9px;background:#f0f0ec;border-radius:5px;overflow:hidden;}
.det-riga .sp{flex:1;}
/* Le schede brevi hanno etichette a parole ("Precedente", "Questo titolo"),
   non anni o ticker: nei 42px di default sbordavano sopra la barra. */
.det-righe.larghe em{width:78px;}
/* Riga singola e senza barra: il valore per esteso non sta nei 58px della
   colonna dei numeri e andava a capo. Qui non c'e' niente da allineare. */
.det-righe.cifre b{width:auto;white-space:nowrap;}
/* Riga di conto: etichetta a sinistra, valore a destra, il totale staccato
   da una linea. Serve dove i numeri si sommano invece di confrontarsi. */
.det-conto{display:flex;flex-direction:column;gap:8px;}
.det-conto .cr{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12.5px;}
.det-conto .cr em{font-style:normal;color:var(--muted);}
.det-conto .cr b{font-weight:700;font-variant-numeric:tabular-nums;}
.det-conto .cr.tot{border-top:1px solid var(--border);padding-top:9px;margin-top:1px;}
.det-conto .cr.tot em,.det-conto .cr.tot b{color:var(--blue);}
/* Il percorso di una seduta: tre prezzi in ordine di tempo e, rientrati di
   un filo, i due passaggi che portano dall'uno all'altro. */
.percorso{display:flex;flex-direction:column;}
.percorso .tappa{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12.5px;}
.percorso .tappa em{font-style:normal;color:var(--muted);}
.percorso .tappa b{font-weight:700;font-variant-numeric:tabular-nums;}
.percorso .passo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:5px 0 5px 3px;padding:5px 0 5px 13px;border-left:2px solid var(--border);
  font-size:11.5px;color:var(--muted2);}
.percorso .passo b{font-weight:700;font-variant-numeric:tabular-nums;}
.percorso .passo b.su{color:var(--green);}
.percorso .passo b.giu{color:var(--red);}
/* L'escursione della giornata. Sotto la barra i due estremi, fissi ai capi:
   minimo a sinistra, massimo a destra. Sopra, su una riga sola, apertura e
   chiusura nell'ordine in cui cadono dentro l'intervallo — due etichette
   separate, ognuna sopra il suo segno, in un terzo dei titoli cadrebbero cosi'
   vicine da sovrapporsi.
   A dire quale prezzo e' quale non e' piu' la posizione ma il colore: apertura
   in ambra, chiusura nel blu della pagina, gli stessi due colori dei segni
   sulla barra. I due segni sono identici per forma e spessore: a distinguerli
   c'e' solo il colore, e nessuno dei due deve sembrare il principale. */
.escursione{margin-top:2px;}
.escursione .fila{position:relative;height:15px;}
.escursione .eti{position:absolute;bottom:0;font-size:10.5px;font-weight:700;white-space:nowrap;}
.escursione .eti b{font-weight:700;}
.escursione .eti .apr{color:var(--amber);}
.escursione .eti .chi{color:var(--blue);}
.escursione .eti i{font-style:normal;font-weight:600;color:var(--muted2);margin:0 5px;}
.escursione .bar{position:relative;height:16px;margin-top:3px;background:#f0f0ec;border-radius:8px;}
.escursione .bar .tratto{position:absolute;top:0;bottom:0;background:#dcdcd2;border-radius:8px;}
.escursione .bar .segno{position:absolute;transform:translateX(-50%);border-radius:2px;
  top:-4px;bottom:-4px;width:3px;}
.escursione .bar .segno.apr{background:var(--amber);}
.escursione .bar .segno.chi{background:var(--blue);}
.escursione .estremi{display:flex;justify-content:space-between;font-size:11px;
  color:var(--muted2);margin-top:8px;}
.escursione .estremi b{color:var(--text);font-weight:700;}
.det-riga .tr i{display:block;height:100%;background:#c4d4ee;border-radius:5px;}
.det-riga b{width:58px;text-align:right;font-size:12px;font-weight:700;flex-shrink:0;}
.det-riga.ora .tr i{background:var(--blue);}
.det-riga.ora em,.det-riga.ora b{color:var(--blue);}
.det-lettura{font-size:12.5px;line-height:1.55;margin:12px 0 0;padding:10px 13px;background:var(--blue-bg);border-left:3px solid var(--blue);border-radius:0 6px 6px 0;}
.det-lettura b{color:var(--blue);}
.det-nota{font-size:11px;color:var(--muted2);line-height:1.55;margin-top:16px;padding-top:12px;border-top:1px solid var(--border);}
.det-nota b{color:var(--muted);font-weight:600;}
/* L'etichetta apre il dettaglio: e' un vero button, navigabile da tastiera. */
.det-apri{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;}
.det-apri:hover .fin-lbl,.det-apri:focus-visible .fin-lbl{color:var(--blue);}

/* L'elenco delle notizie e' un pannello laterale: accompagna la lettura della
   pagina. Il dettaglio di un numero invece si legge e si chiude, quindi sta al
   centro — come il dettaglio del quadro di mercato in home, che e' lo stesso
   tipo di contenuto. */
.popup-overlay.centrato{align-items:center;justify-content:center;}
/* Il dettaglio di un numero e' una finestrella, non una colonna a tutta
   altezza: con quattordici pari il contenuto e' lungo e senza un tetto il
   pannello arrivava al 96% dello schermo (misurato a 900x900: 860px con 20
   sopra). Il corpo scorre gia' da solo. Il tetto vale solo qui: il popup
   delle news e' una lista da leggere e piu' e' alto meglio e'. */
.popup-overlay.centrato .popup{width:460px;max-width:calc(100vw - 40px);max-height:min(640px, calc(100dvh - 80px));}
.popup-close{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted);transition:all 0.1s;}
.popup-close:hover{background:var(--border);color:var(--text);}
.popup-list{flex:1;overflow-y:auto;padding:4px 0;}
.site-footer{background:var(--white);border-top:1px solid var(--border);padding:32px 40px 22px;margin:32px -30px -60px;}
.footer-inner{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:22px;}
.footer-brand{display:flex;align-items:center;gap:11px;flex-shrink:0;max-width:400px;}
.footer-brand-mark{width:30px;height:30px;background:var(--text);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0;}
.footer-brand-name{font-size:13.5px;font-weight:700;line-height:1.2;}
.footer-brand-tag{font-size:11.5px;color:var(--muted);line-height:1.35;margin-top:2px;}
.footer-nav{display:flex;gap:44px;flex-wrap:wrap;}
.footer-col{display:flex;flex-direction:column;gap:5px;}
.footer-col-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted2);margin-bottom:5px;}
.footer-col a{font-size:12.5px;color:var(--muted);text-decoration:none;}
.footer-bottom{border-top:1px solid var(--border);padding-top:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--muted2);}
.footer-disclaimer-mini{font-style:italic;}
/* Il link del disclaimer prende il grigio del piè di pagina e non i colori
   di default del browser: senza, restava blu e dopo il clic diventava viola.
   `:visited` e' dichiarato apposta, cosi' la regola vale anche a pagina gia'
   visitata. */
.footer-disclaimer-mini a,
.footer-disclaimer-mini a:visited{color:inherit;text-decoration:none}
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:56px;background:var(--white);border-top:1px solid var(--border);z-index:200;justify-content:space-around;align-items:stretch;}
.bn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:1;font-size:10px;font-weight:500;color:var(--muted2);text-decoration:none;background:transparent;border:none;cursor:pointer;padding:6px 0 8px;font-family:'Figtree',sans-serif;}
.bn-item svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.bn-item.active{color:var(--text);font-weight:600;}
.mobile-search-overlay{display:none;position:fixed;inset:0;background:var(--white);z-index:300;flex-direction:column;}
.mobile-search-overlay.open{display:flex;}
.mso-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);}
.mso-back{width:36px;height:36px;border:none;background:var(--bg);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.mso-back svg{width:18px;height:18px;stroke:var(--text);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.mso-input{flex:1;border:1.5px solid var(--border);border-radius:9px;padding:9px 12px;font-family:'Figtree',sans-serif;font-size:14px;font-weight:500;color:var(--text);background:var(--bg);outline:none;}
.mso-input:focus{border-color:#c0c0ba;background:var(--white);}
.mso-hint{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted2);padding:14px 14px 6px;}
.mso-suggestions{display:flex;flex-direction:column;}
.mso-sug{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border);text-decoration:none;color:inherit;transition:background 0.1s;}
.mso-sug:hover,.mso-sug:active{background:var(--bg);}
.mso-sug-logo{width:34px;height:34px;background:var(--bg);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:var(--muted2);letter-spacing:-0.3px;flex-shrink:0;}
.mso-sug-info{flex:1;min-width:0;}
.mso-sug-ticker{font-size:13px;font-weight:700;color:var(--text);}
.mso-sug-name{font-size:11px;color:var(--muted2);margin-top:1px;}
.mso-sug-arrow{flex-shrink:0;}
.mso-sug-arrow svg{width:14px;height:14px;stroke:var(--muted2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
/* ─── TABLET (≤1024px) — come il mock: hero impilato, pannello analisti a 2 colonne ─── */
@media (max-width: 1024px) {
  .main{padding:18px 20px 50px;}
  .hero-outer{grid-template-columns:1fr;gap:12px;}
  .right-panel{display:grid;grid-template-columns:1fr 1fr;}
  .right-panel>.analyst-card{border-right:1px solid var(--border);border-bottom:none;}
  .chart-wrap{flex:none;height:240px;}
  .bottom-row{grid-template-columns:1fr;}
}

/* ─── (≤900px) — contesto di mercato e dipendenze macro si impilano ─── */
@media (max-width: 900px) {
  .market-context-row{grid-template-columns:1fr;}
}

/* ─── MOBILE (≤768px) ─── */
@media (max-width: 768px) {
  body{font-size:13px;}
  /* Nav + impaginato */
  .tn-gap{display:none;}
  .top-navbar,.top-nav{height:42px;min-height:42px;padding:0 10px;gap:8px;flex-wrap:nowrap;}
  .brand-name,.navbar-sep,.kbd,.tn-links{display:none;}
  .navbar-search,.tn-search{height:32px;max-width:none;min-width:0;margin-left:0;padding:0 10px;border-radius:8px;overflow:hidden;}
  .navbar-search input,.tn-search input{display:none;}
  .navbar-search::after,.tn-search::after{content:'Cerca ticker o azienda...';font-size:12px;font-weight:400;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .sidebar{display:none;}
  .bottom-nav{display:flex;}
  .app-body{display:block;}
  .main{padding:14px 14px 90px;}

  /* HERO: nome a sinistra, prezzo a destra sulla stessa riga */
  .hero-outer{grid-template-columns:1fr;gap:12px;}
  .name-price-card{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 14px 12px;}
  .np-left{gap:10px;min-width:0;flex:1;}
  .np-right{text-align:right;flex-shrink:0;min-width:0;}
  .stock-logo{width:34px;height:34px;font-size:8px;}
  .stock-name{font-size:17px;letter-spacing:-0.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .stock-exchange{font-size:10.5px;}
  .price-lbl{font-size:9.5px;margin-bottom:2px;}
  .price-val{font-size:22px;letter-spacing:-0.7px;}
  .price-badge{font-size:11px;padding:2px 8px;}
  .price-asof{font-size:10px;margin-top:5px;}
  /* Su 390px la colonna di destra e' stretta: il bottone perde l'etichetta
     lunga e tiene il segno piu' l'essenziale. */
  /* Su 390px il nome ha gia' i puntini di sospensione: la stella non deve
     restringerlo ancora, quindi resta della sua misura e il nome le cede lo
     spazio (`min-width:0` sul contenitore flex). */
  .nome-riga{gap:7px;}
  .wl-seg{width:24px;height:24px;}
  .wl-seg svg{width:13px;height:13px;}
  /* La larghezza si adatta allo schermo; **da che lato si apre lo decide una
     misura**, non questa regola: vedi `riallinea()` in page_stock.js. */
  .wl-menu{width:min(250px, calc(100vw - 28px));}

  /* GRAFICO */
  .chart-topbar{padding:9px 10px;gap:8px;overflow:visible;flex-wrap:wrap;align-items:flex-start;}
  .chart-tabs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;width:100%;flex:1 1 100%;min-width:0;}
  .ctab{padding:4px 0;text-align:center;font-size:11px;}
  /* Fuori dal mobile i due periodi che il backend non copre ancora: sarebbero due
     pulsanti che dicono solo "non disponibile" e rubano spazio */
  .ctab[data-range="1D"],.ctab[data-range="5Y"]{display:none;}
  .compare-btn{flex-shrink:0;}
  .chart-tools{width:100%;justify-content:space-between;gap:8px;}
  .range-label{flex:1;font-size:11px;white-space:normal;overflow:visible;text-overflow:clip;text-align:left;line-height:1.25;}
  .chart-wrap{flex:none;height:190px;padding:10px 6px 8px 6px;}
  .chart-timeline{padding:0 8px 10px;font-size:9.5px;gap:6px;}
  .chart-tick-extra{display:none;}

  /* PANNELLO ANALISTI + DATI CHIAVE: torna a una colonna */
  .right-panel{display:flex;grid-template-columns:none;}
  .right-panel>.analyst-card{border-right:none;border-bottom:1px solid var(--border);}
  .analyst-header{gap:12px;}
  .analyst-rating{font-size:20px;}
  .target-val{font-size:18px;}

  /* PANORAMICA AZIENDA: la card unica si impila mantenendo i divisori */
  .cp-top-row{grid-template-columns:1fr;}
  .cp-who{border-right:none;border-bottom:1px solid var(--border);padding:14px;}
  .cf-section{padding:12px 14px;}
  .cp-chip{white-space:normal;overflow-wrap:anywhere;}
  .cp-meta-item{padding-right:8px;}
  .cp-meta-item:nth-child(2),.cp-meta-item:last-child{padding-left:8px;}
  .moat-header{padding:12px 14px;}
  .moat-preview{display:none;}
  .moat-body-inner{padding:12px 14px 14px;}
  .moat-grid{grid-template-columns:1fr;}

  /* NEWS */
  .news-header{flex-wrap:wrap;gap:8px;padding:12px 14px;}
  .news-header-left{gap:8px;min-width:0;}
  .read-news-btn{margin-left:auto;padding:5px 10px;font-size:11px;flex-shrink:0;}
  .summary-row{grid-template-columns:1fr;}
  .summary-left{padding:14px;border-right:none;border-bottom:1px solid var(--border);}
  .summary-right{padding:14px;}
  .summary-body{font-size:12.5px;line-height:1.7;}
  .sent-strip{padding:9px 11px;gap:12px;}
  .themes-header{padding:10px 14px;}
  .themes-grid{grid-template-columns:1fr;padding:0 14px 14px;}

  /* DATI FINANZIARI */
  .bottom-row{grid-template-columns:1fr;gap:12px;}
  .fin-header{padding:11px 14px;flex-wrap:wrap;gap:6px;}
  .fin-readout{flex-direction:column;gap:6px;padding:11px 14px;}
  .fin-questions{grid-template-columns:1fr 1fr;}
  .fin-q{border-right:none;border-bottom:1px solid var(--border);padding:10px 14px;}
  .fin-q:last-child{border-bottom:none;}
  .fin-grid-wrap{padding:12px 14px 14px;}
  .fin-grid{grid-template-columns:1fr 1fr;}
  .fin-item,.fin-item-last-row{border-bottom:1px solid var(--border);}
  .fin-item:nth-last-child(-n+2){border-bottom:none;}
  .fin-val{font-size:14px;}
  .d-val{font-size:14px;}
  .rk-val{font-size:14px;}
  .fin-nerd{padding:0 0 2px;}
  .nerd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .nerd-item{padding:10px 11px;}
  .nerd-item-val{font-size:16px;}

  /* CONTESTO DI MERCATO + DIPENDENZE MACRO */
  .market-context-row{grid-template-columns:1fr;gap:12px;}
  .perf-strip{margin:0 12px 12px;}
  .corr-row{grid-template-columns:minmax(68px,84px) minmax(40px,1fr) 34px 44px;gap:6px;}
  .corr-int{font-size:8.5px;padding:2px 5px;min-width:0;}
  .corr-window-tabs{flex-wrap:wrap;justify-content:flex-end;}

  /* Tooltip: nelle griglie a due colonne si ancora alla cella, non alla parola,
     altrimenti per la colonna di destra il riquadro finisce fuori schermo a sinistra */
  .tt-box{max-width:calc(100vw - 56px);}
  .fin-item,.nerd-item{position:relative;}
  .fin-item .tt-term,.nerd-item .tt-term{position:static;}
  .fin-item .tt-box,.nerd-item .tt-box{left:0;right:auto;}
  .fin-item:nth-child(even) .tt-box,.nerd-item:nth-child(even) .tt-box{left:auto;right:0;}
  .fin-item:nth-child(even) .tt-box::after,.nerd-item:nth-child(even) .tt-box::after{left:auto;right:14px;}

  /* POPUP centrati a ogni larghezza. Erano due difetti sovrapposti: l'overlay
     stava sotto la barra di navigazione (z-index 100 contro 200) e gli ultimi
     56px del pannello finivano dietro; e la media query trattava il dettaglio
     di un numero come il popup delle news a tutto schermo, mentre .centrato lo
     teneva al centro — ne usciva una colonna alta 100dvh e larga 350px, senza
     bordo. Il pannello che sale dal basso, provato prima, era una scelta presa
     da sectors.html e non richiesta: qui si sta al centro. */
  .popup-overlay{padding:12px 12px max(12px, env(safe-area-inset-bottom));
    align-items:center;justify-content:center;}
  .popup{width:min(100%, 560px);height:auto;max-height:min(82dvh, calc(100dvh - 24px));
    border-radius:var(--radius);border:1px solid var(--border);}
  /* A 768px il pannello veniva 748px, cioe' una lastra: si tiene stretto. */
  .popup-overlay.centrato .popup{width:min(100%, 520px);max-width:none;
    max-height:min(78dvh, calc(100dvh - 24px));}
  .popup-header{padding:12px 14px;}
  .popup-close{width:36px;height:36px;font-size:18px;}
  /* FOOTER: solo disclaimer */
  .site-footer{padding:14px 14px 16px;margin:16px -14px -90px;font-size:13px;}
  .footer-inner{display:none;}
  .footer-bottom{border-top:none;padding-top:0;flex-direction:column;gap:4px;align-items:flex-start;font-size:12px;color:var(--muted);padding-bottom:90px;}
  .footer-disclaimer-mini{color:var(--muted);}
}

/* ─── MOBILE SMALL (≤420px) ─── */
@media (max-width: 420px) {
  .main{padding:12px 12px 90px;}
  .stock-name{font-size:15.5px;}
  .price-val{font-size:20px;}
  /* Fondazione / Dipendenti / Settore restano affiancati anche qui: occupano meno spazio */
  .cp-meta-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-top:12px;}
  .cp-meta-item,.cp-meta-item:first-child{padding:0 6px 0 0;}
  .cp-meta-lbl{font-size:9.5px;}
  .cp-meta-val{font-size:14px;}
  .cp-meta-sub{font-size:9.5px;line-height:1.35;}
  .chart-tabs{gap:1px;}
  .ctab{padding:3px 4px;}
  .site-footer{margin-left:-12px;margin-right:-12px;}
}
}