/* ══ STILE «LINEE D'ACQUA» (predefinito da ottobre 2026; «Delta» resta in Impostazioni › Stile) ══════════════
   Entrate e uscite come linee di navigazione disegnate come uno schema di trasporto, tutte passano per
   l'interscambio «Conti»; la palina dell'imbarcadero dice i prossimi arrivi. Fondo pulito senza bagliori,
   superfici piatte con un filo, segnaletica in Overpass, cifre in Archivo semicondensato. Priorità: respiro,
   leggibilità, accessibilità (testo AAA, mai solo colore, niente filter né lampi).
   Tutto è sotto html[data-stile="linee"] (attributo messo da uno script nell'<head>): con «Delta» questo
   file non cambia niente. Sta dopo styles.css e, in Freeboard, dopo brand.css. */

/* ── Token: la laguna di notte (scuro) e di giorno (chiaro) ── */
:root[data-stile="linee"] {
  color-scheme: dark;
  --font: "Overpass", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Overpass", system-ui, sans-serif;
  --font-num: "Archivo", "Overpass", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --bg: #0b1c4b; --surface: #0e2257; --surface-2: #14286a; --surface-3: #1a3278; --hair: #26407f;
  --control: #8c9ccb; --ink: #f4f0e6; --ink-2: #cbd4ef; --ink-3: #b2bee3;
  --accent: #9db8ff; --accent-ink: #b9ccff; --mint-ink: #8fe9c8; --accent-btn: #f4f0e6; --badge-bg: #f4f0e6;
  --series-1: #6a8bff; --series-2: #2ec4b6; --series-3: #c4c4ff;
  --good-ink: #8fe9c8; --warn-ink: #f2c35b; --crit-ink: #ffb0a8; --warn: #f2c35b;
  --grid: #1a3170; --axis: #3a5395; --border: #26407f;
  --radius: 14px; --card-shadow: none; --card-press: none; --pop-shadow: 0 18px 44px -18px rgba(3, 8, 26, .7);
  --ground: none;
  --focus-ring: #f4f0e6;
  /* segnaletica: pulsante principale, targa, palina */
  --ln-btn-bg: #f4f0e6; --ln-btn-ink: #0b1533;
  --ln-plate-bg: #f4f0e6; --ln-plate-ink: #0b1533; --ln-plate-ink-2: #33405f;
  --ln-gap: var(--surface); --ln-casing: #061131; --ln-bed: var(--surface); /* filo scuro attorno a ogni linea: dove due linee si toccano si vede quale passa sopra (era del colore del fondo e si fondevano) */
  --ln-off: #66749c; --ln-dim: 1; /* tinta piena già attenuata (#7f8bb0 al 78% sul fondo): con l'opacità le linee che si incrociano si vedevano una attraverso l'altra */
  --ln-hub: #f4f0e6; --ln-hub-ring: #0b1533; --ln-hub-out: #f4f0e6;
  --ln-tondo-ring: transparent; --ln-tondo-ink: #0b1533;
  --ln-strip: #0b1c4b; --ln-strip-hover: #12266a;
  /* tinte delle linee: entrate passive (verde acqua, menta), attive (blu, azzurro); uscite calde e viola,
     provate in deuteranopia e protanopia; mai rosso */
  --delta-p1: #2ec4b6; --delta-p2: #9be8c0; --delta-p3: #5fd39a;
  --delta-a1: #6a8bff; --delta-a2: #7fd3ff; --delta-a3: #a9b8ff;
  --delta-c1: #e8892b; --delta-c2: #f5de6e; --delta-c3: #c4c4ff; --delta-c4: #c054ca; --delta-c5: #f2b08f;
  --delta-c6: #ff9fc4; --delta-c7: #cbb089; --delta-c8: #9b7bff;
  --delta-other: #b3bdd9; --delta-keep: #9be8c0; --delta-hub: #f4f0e6;
}
:root[data-stile="linee"][data-theme="light"] {
  color-scheme: light;
  --bg: #edf1f7; --surface: #fbfaf5; --surface-2: #eef0f5; --surface-3: #e2e7f1; --hair: #cdd4e4;
  --control: #5a6690; --ink: #0b1533; --ink-2: #26325a; --ink-3: #3a466f;
  --accent: #1f4fb8; --accent-ink: #1a43a0; --mint-ink: #054f36; --accent-btn: #0e2257; --badge-bg: #0e2257;
  --series-1: #3c5fd6; --series-2: #0d8a80; --series-3: #6b66b4;
  --good-ink: #054f36; --warn-ink: #664000; --crit-ink: #9c1c1c; --warn: #8a5a00;
  --grid: #dfe5ef; --axis: #b8c2d6; --border: #cdd4e4;
  --pop-shadow: 0 18px 44px -20px rgba(11, 21, 51, .28);
  --focus-ring: #0b1533;
  --ln-btn-bg: #0e2257; --ln-btn-ink: #f4f0e6;
  --ln-plate-bg: #0e2257; --ln-plate-ink: #f4f0e6; --ln-plate-ink-2: #cbd4ef;
  --ln-gap: var(--surface); --ln-casing: #0b1533; --ln-bed: var(--surface);
  --ln-off: #737d99; --ln-dim: 1;
  --ln-hub: #ffffff; --ln-hub-ring: #0b1533; --ln-hub-out: #0b1533;
  --ln-tondo-ring: #0b1533;
  --ln-strip: #eef0f5; --ln-strip-hover: #e2e7f1;
  --delta-other: #8a93ad; --delta-hub: #0b1533;
}
@media (prefers-color-scheme: light) {
  :root[data-stile="linee"]:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #edf1f7; --surface: #fbfaf5; --surface-2: #eef0f5; --surface-3: #e2e7f1; --hair: #cdd4e4;
    --control: #5a6690; --ink: #0b1533; --ink-2: #26325a; --ink-3: #3a466f;
    --accent: #1f4fb8; --accent-ink: #1a43a0; --mint-ink: #054f36; --accent-btn: #0e2257; --badge-bg: #0e2257;
    --series-1: #3c5fd6; --series-2: #0d8a80; --series-3: #6b66b4;
    --good-ink: #054f36; --warn-ink: #664000; --crit-ink: #9c1c1c; --warn: #8a5a00;
    --grid: #dfe5ef; --axis: #b8c2d6; --border: #cdd4e4;
    --pop-shadow: 0 18px 44px -20px rgba(11, 21, 51, .28);
    --focus-ring: #0b1533;
    --ln-btn-bg: #0e2257; --ln-btn-ink: #f4f0e6;
    --ln-plate-bg: #0e2257; --ln-plate-ink: #f4f0e6; --ln-plate-ink-2: #cbd4ef;
    --ln-gap: var(--surface); --ln-casing: #0b1533; --ln-bed: var(--surface);
    --ln-off: #737d99; --ln-dim: 1;
    --ln-hub: #ffffff; --ln-hub-ring: #0b1533; --ln-hub-out: #0b1533;
    --ln-tondo-ring: #0b1533;
    --ln-strip: #eef0f5; --ln-strip-hover: #e2e7f1;
    --delta-other: #8a93ad; --delta-hub: #0b1533;
  }
}

/* ── Fondo pulito, carattere della segnaletica, cifre tabellari ── */
html[data-stile="linee"] body { background: var(--bg); font-family: var(--font); font-size: 15px; line-height: 1.5; word-spacing: .03em; -webkit-font-smoothing: antialiased; }
html[data-stile="linee"] ::selection { background: var(--ink); color: var(--bg); }
html[data-stile="linee"] { accent-color: var(--ink); caret-color: var(--ink); scrollbar-color: var(--control) var(--bg); }
html[data-stile="linee"] :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
html[data-stile="linee"] .hero, html[data-stile="linee"] .kpi-value,
html[data-stile="linee"] .num, html[data-stile="linee"] td.num, html[data-stile="linee"] .amt { font-family: var(--font-num); font-stretch: 88%; font-variant-numeric: tabular-nums lining-nums; }
html[data-stile="linee"] .hero { font-weight: 700; font-size: 44px; letter-spacing: -.02em; line-height: 1; }
html[data-stile="linee"] h1, html[data-stile="linee"] h2, html[data-stile="linee"] h3 { font-family: var(--font-display); }
html[data-stile="linee"] .page-head h1 { font-size: 30px; font-weight: 800; font-stretch: 100%; letter-spacing: -.01em; }
html[data-stile="linee"] .card-h { font-size: 17px; font-weight: 800; font-stretch: 100%; letter-spacing: 0; text-transform: none; color: var(--ink); }
html[data-stile="linee"] .card-h .ico { color: var(--ink-2); }
html[data-stile="linee"] .card-h small, html[data-stile="linee"] .card-h .card-sub { font-size: 14px; font-weight: 600; color: var(--ink-2); }
html[data-stile="linee"] .stat-note, html[data-stile="linee"] .muted, html[data-stile="linee"] small { color: var(--ink-2); }
html[data-stile="linee"] .ico { stroke-width: 1.8; }
@media (max-width: 560px) { html[data-stile="linee"] body { font-size: 16px; } html[data-stile="linee"] .hero { font-size: 38px; } html[data-stile="linee"] .page-head h1 { font-size: 26px; } }

/* ── Superfici piatte con un filo (niente doppia cornice) ── */
html[data-stile="linee"] .card { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; box-shadow: none; }
html[data-stile="linee"] .tile { transition: background-color .2s var(--ease), border-color .2s var(--ease); }
html[data-stile="linee"] .tile:hover { border-color: var(--control); }
html[data-stile="linee"] .tile:active { transform: none; background: var(--surface-2); }

/* ── Pulsanti, chip, segmenti, campi: pillole con il bordo, la scelta in smalto pieno ── */
html[data-stile="linee"] .btn { border: 2px solid var(--control); background: transparent; color: var(--ink); border-radius: 999px; padding: 7px 16px; font-weight: 700; font-size: 14px; box-shadow: none; }
html[data-stile="linee"] .btn:hover { border-color: var(--ink); background: var(--surface-2); }
html[data-stile="linee"] .btn:active { transform: scale(.98); }
html[data-stile="linee"] .btn-primary, html[data-stile="linee"] .btn.btn-primary { background: var(--ln-btn-bg); color: var(--ln-btn-ink); border-color: var(--ln-btn-bg); box-shadow: none; }
html[data-stile="linee"] .btn-primary:hover { filter: none; background: var(--ln-btn-bg); border-color: var(--ink); }
html[data-stile="linee"] .btn-ghost { border-color: transparent; }
html[data-stile="linee"] .btn-sm { padding: 5px 13px; font-size: 13.5px; }
/* Secondari: contorno da 2px anche qui. La regola tonale di styles.css (.btn:not(.btn-primary):not(.btn-ghost))
   batteva quella sopra; con :where() questa ha la sua stessa forza e vince perché viene dopo */
:where(html[data-stile="linee"]) .btn:not(.btn-primary):not(.btn-ghost) { background: transparent; border: 2px solid var(--control); color: var(--ink); font-weight: 700; }
:where(html[data-stile="linee"]) .btn:not(.btn-primary):not(.btn-ghost):hover { background: var(--surface-2); border-color: var(--ink); color: var(--ink); }
:where(html[data-stile="linee"]) .btn:not(.btn-primary):not(.btn-ghost)[aria-pressed="true"] { background: var(--ln-btn-bg); border-color: var(--ln-btn-bg); color: var(--ln-btn-ink); }
/* Azioni che tolgono o sostituiscono dati: contorno nel colore del pericolo, mai pieno */
html[data-stile="linee"] .btn.btn-danger { background: transparent; border: 2px solid var(--crit-ink); color: var(--crit-ink); }
html[data-stile="linee"] .btn.btn-danger:hover { background: color-mix(in srgb, var(--crit-ink) 12%, transparent); border-color: var(--crit-ink); color: var(--crit-ink); }
html[data-stile="linee"] .icon-btn { border: 2px solid var(--control); background: transparent; border-radius: 999px; width: 40px; height: 40px; color: var(--ink); }
html[data-stile="linee"] .icon-btn:hover:not(:disabled) { border-color: var(--ink); }
html[data-stile="linee"] .icon-btn:disabled { opacity: .5; }
:where(html[data-stile="linee"]) .chip { background: var(--surface-2); color: var(--ink-2); border: 0; font-weight: 600; } /* :where: le varianti (.crit, .chip-btn, .more…) devono vincere */
html[data-stile="linee"] .chip.warn { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); color: var(--ink); }
html[data-stile="linee"] .chip.crit { background: color-mix(in srgb, var(--crit-ink) 18%, var(--surface)); color: var(--ink); }
html[data-stile="linee"] .chip.good { background: color-mix(in srgb, var(--good-ink) 18%, var(--surface)); color: var(--ink); }
html[data-stile="linee"] .chip.auto { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--ink); }
/* Chip che si accendono e spengono (Pensione, ETF…): come i segmenti, contorno da spenti e pieno da accesi */
html[data-stile="linee"] .chip.chip-btn { border: 2px solid var(--control); background: transparent; color: var(--ink); }
html[data-stile="linee"] .chip.chip-btn:hover { border-color: var(--ink); }
html[data-stile="linee"] .chip.chip-btn[aria-pressed="true"] { background: var(--ln-btn-bg); border-color: var(--ln-btn-bg); color: var(--ln-btn-ink); }
html[data-stile="linee"] .chip.chip-btn[aria-pressed="true"] :is(b, .ico) { color: inherit; }
html[data-stile="linee"] .seg { background: transparent; border: 2px solid var(--control); border-radius: 999px; padding: 3px; }
html[data-stile="linee"] .seg button { border-radius: 999px; color: var(--ink-2); font-weight: 600; padding: 6px 14px; }
html[data-stile="linee"] .seg button:hover { color: var(--ink); background: var(--surface-2); }
html[data-stile="linee"] .seg button[aria-pressed="true"] { background: var(--ln-btn-bg); color: var(--ln-btn-ink); box-shadow: none; font-weight: 800; }
html[data-stile="linee"] .seg button[aria-pressed="true"] .ico { color: currentColor; }
/* Interruttori: contorno da 2px come i segmenti, pieni da accesi */
html[data-stile="linee"] .switch-slider { border: 2px solid var(--control); background: transparent; }
html[data-stile="linee"] .switch-slider::after { top: 1px; left: 1px; background: var(--ink-2); }
html[data-stile="linee"] .switch-label input:checked ~ .switch-slider { background: var(--ln-btn-bg); border-color: var(--ln-btn-bg); }
html[data-stile="linee"] .switch-label input:checked ~ .switch-slider::after { background: var(--ln-btn-ink); }
html[data-stile="linee"] .inp, html[data-stile="linee"] input.inp, html[data-stile="linee"] select.inp, html[data-stile="linee"] textarea.inp,
html[data-stile="linee"] .fld .inp-wrap { border: 2px solid var(--control); background: var(--surface); border-radius: 10px; color: var(--ink); }
html[data-stile="linee"] .inp:focus-visible, html[data-stile="linee"] .fld .inp-wrap:focus-within { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* Gli altri campi (Business, Pagamenti e tasse, Fiverr, ricerca dei movimenti) con lo stesso bordo da 2px.
   Solo spessore, raggio e fondo: il colore resta quello degli stati (tratteggio in sola lettura, rosso se non valido) */
html[data-stile="linee"] .input-wrap, html[data-stile="linee"] .toolbar input.search { border-width: 2px; border-radius: 10px; background: var(--surface); }
html[data-stile="linee"] .toolbar input.search { border-style: solid; border-color: var(--control); }
html[data-stile="linee"] .toolbar input.search:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* Righe di Traguardi e del risparmio «A mano»: nome e data come gli altri campi (bordo da 2px), frecce e
   date da 36px (44 al tocco); freccia che non può andare oltre spenta con la tinta delle linee spente */
html[data-stile="linee"] .row-ctl { display: flex; align-items: center; gap: 6px; }
html[data-stile="linee"] :is(.row-name, .row-date) { border: 2px solid var(--control); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; min-height: 36px; padding: 4px 10px; }
html[data-stile="linee"] .row-name { width: 100%; min-width: 0; }
html[data-stile="linee"] .row-date { width: calc(7ch + 14px); padding-inline: 4px; text-align: center; font-variant-numeric: tabular-nums; }
html[data-stile="linee"] .proi-val-inp { width: 88px; }
html[data-stile="linee"] :is(.row-move, .budget-date-btn) { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 36px; min-height: 36px; padding: 0; border: 2px solid var(--control); border-radius: 10px; background: none; color: var(--ink-2); cursor: pointer; }
html[data-stile="linee"] .budget-date-btn.has-range { background: var(--ln-btn-bg); border-color: var(--ln-btn-bg); color: var(--ln-btn-ink); }
html[data-stile="linee"] .row-move:disabled { border-color: var(--hair); color: var(--ln-off); cursor: default; }
html.touch[data-stile="linee"] :is(.row-move, .budget-date-btn) { min-width: 44px; min-height: 44px; }
html.touch[data-stile="linee"] :is(.row-name, .row-date) { min-height: 44px; }
/* Telefono: data stretta, così data, importo e frecce dei Traguardi stanno su una riga (con 16px al tocco) */
@media (max-width: 600px) { html[data-stile="linee"] .row-date { width: 74px; padding-inline: 2px; } }
html[data-stile="linee"] .nav-badge, html[data-stile="linee"] .badge { background: var(--ln-btn-bg); color: var(--ln-btn-ink); font-family: var(--font-num); font-weight: 800; }

/* ── Navigazione: le sezioni come fermate di una linea ── */
html[data-stile="linee"] .sidebar { background: var(--surface); border-right: 1px solid var(--hair); padding: 18px 14px; gap: 2px; }
html[data-stile="linee"] .sidebar .nav-item { position: relative; border-radius: 999px; padding: 6px 12px 6px 6px; min-height: 48px; color: var(--ink-2); font-weight: 600; font-size: 15px; box-shadow: none; background: none; }
html[data-stile="linee"] .sidebar .nav-item .nav-ico { width: 36px; height: 36px; padding: 7px; border-radius: 50%; border: 3px solid var(--control); background: var(--surface); color: var(--ink); flex: none; position: relative; z-index: 1; }
html[data-stile="linee"] .sidebar .nav-item:not(:last-of-type)::after { content: ""; position: absolute; left: 22px; top: 50%; height: calc(100% + 2px); width: 4px; margin-left: -2px; background: var(--hair); z-index: 0; }
html[data-stile="linee"] .sidebar .nav-item:has(+ .nav-sep)::after,
html[data-stile="linee"] .sidebar .nav-item:has(+ [hidden] + .nav-sep)::after { display: none; }
html[data-stile="linee"] .shell.rail .sidebar .nav-item { padding: 0; justify-content: center; } /* ridotta a icone: tondi e linea sullo stesso asse */
html[data-stile="linee"] .sidebar .nav-item:hover { color: var(--ink); background: none; }
html[data-stile="linee"] .sidebar .nav-item:hover .nav-ico { border-color: var(--ink); }
html[data-stile="linee"] .sidebar .nav-item.active, html[data-stile="linee"] .sidebar .nav-item[aria-current="page"] { background: none; box-shadow: none; color: var(--ink); font-weight: 800; }
html[data-stile="linee"] .sidebar .nav-item.active .nav-ico, html[data-stile="linee"] .sidebar .nav-item[aria-current="page"] .nav-ico { background: var(--ln-btn-bg); border-color: var(--ln-btn-bg); color: var(--ln-btn-ink); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ln-btn-bg); }
html[data-stile="linee"] .nav-sep { border-color: var(--hair); margin: 10px 0; }
html[data-stile="linee"] .topbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--hair); }
html[data-stile="linee"] .bottom-nav { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--hair); }
@media (max-width: 900px) {
  html[data-stile="linee"] .bottom-nav { position: fixed; padding-inline: max(4px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-right)); }
  html[data-stile="linee"] .bottom-nav::before { content: ""; position: absolute; left: 10%; right: 10%; top: 26px; height: 4px; background: var(--hair); border-radius: 2px; }
  html[data-stile="linee"] .bottom-nav .nav-item { color: var(--ink-2); font-weight: 600; font-size: clamp(10px, 2.8vw, 11.5px); letter-spacing: 0; gap: 4px; padding: 6px 1px 8px; background: none; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* a 320px «Cash Flow» andava a capo e alzava la barra */
  html[data-stile="linee"] .bottom-nav .nav-item .nav-ico { width: 36px; height: 36px; padding: 7px; border-radius: 50%; border: 3px solid var(--control); background: var(--surface); color: var(--ink); position: relative; z-index: 1; }
  html[data-stile="linee"] .bottom-nav .nav-item.active, html[data-stile="linee"] .bottom-nav .nav-item[aria-current="page"] { color: var(--ink); font-weight: 700; background: none; } /* 700: con 800 la voce attiva si allargava */
  html[data-stile="linee"] .bottom-nav .nav-item.active .nav-ico, html[data-stile="linee"] .bottom-nav .nav-item[aria-current="page"] .nav-ico { background: var(--ln-btn-bg); border-color: var(--ln-btn-bg); color: var(--ln-btn-ink); }
  html[data-stile="linee"] .bottom-nav .nav-item::after { display: none; }
}
@media (max-width: 340px) { html[data-stile="linee"] .bottom-nav .nav-item { padding-inline: 0; letter-spacing: -.02em; } } /* «Panoramica» intera anche a 320px */

/* ── Panoramica: la frase in cima e il delta lasciano il posto a targa, palina e schema ── */
html:not([data-stile="linee"]) #pan-linee { display: none !important; }
html[data-stile="linee"] #p-panoramica > #pan-linee { order: 1; }
.pl { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 0; margin: 4px 0 24px; border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; background: var(--surface); }
.pl-side { padding: 28px 28px 32px; border-right: 1px solid var(--hair); background: var(--bg); display: flex; flex-direction: column; gap: 0; min-width: 0; }
.pl-plate { align-self: flex-start; display: inline-flex; align-items: baseline; gap: 14px; margin: 0 0 24px; padding: 10px 18px; border-radius: 8px; background: var(--ln-plate-bg); color: var(--ln-plate-ink); box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.pl-plate b { font: 800 26px/1.1 var(--font-display); letter-spacing: -.01em; }
.pl-plate span { font-weight: 700; font-size: 14px; color: var(--ln-plate-ink-2); }
.pl-spend-h { font: 800 19px/1.3 var(--font-display); color: var(--ink-2); margin: 0; }
.pl-spend { font: 800 84px/1 var(--font-num); font-stretch: 88%; letter-spacing: -.03em; color: var(--ink); margin: 6px 0 14px; font-variant-numeric: tabular-nums; }
.pl-spend small { font-size: .42em; font-weight: 700; margin-left: .12em; color: var(--ink-2); }
.pl-spend.neg { color: var(--ink); }
.pl-why { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0 0 18px; max-width: 34ch; }
.pl-proof { margin: 0 0 30px; display: grid; gap: 6px; }
.pl-pr { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--ink-2); }
.pl-pr dt { display: flex; gap: 10px; }
.pl-pr dd { margin: 0; font: 700 16px/1.4 var(--font-num); font-stretch: 88%; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-pr .op { width: 1ch; text-align: center; font-weight: 800; color: var(--ink); }
.pl-pr[data-op="0"] dt { padding-left: calc(1ch + 10px); }
.pl-pr.tot { border-top: 1px solid var(--hair); padding-top: 6px; color: var(--ink); font-weight: 800; }
.pl-sub-h { font: 800 17px/1.3 var(--font-display); margin: 0 0 10px; }
.pl-arrivi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-row { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border: 2px solid transparent; border-radius: 10px; background: var(--ln-strip); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.pl-row:hover { background: var(--ln-strip-hover); }
.pl-row.on { border-color: var(--ink); }
.pl-row .when { font-weight: 800; color: var(--ink); }
.pl-row .who { display: flex; flex-direction: column; min-width: 0; }
.pl-row .who b { font-size: 15.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-row .who small { font-size: 14px; color: var(--ink-2); }
.pl-row .amt { font: 800 17px/1 var(--font-num); font-stretch: 88%; white-space: nowrap; }
.pl-none { color: var(--ink-2); font-size: 15px; }
.ln-tondo { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: var(--ln-ink); color: var(--ln-tondo-ink, #0b1533); font: 800 14px/1 var(--font-display); padding-top: 2px; box-shadow: inset 0 0 0 1.5px var(--ln-tondo-ring); }
.ln-tondo.hollow { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); }

.pl-map { padding: 24px 28px 22px; min-width: 0; display: flex; flex-direction: column; }
.pl-map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.pl-map-head h2 { font: 800 22px/1.25 var(--font-display); margin: 0; }
.pl-nav { display: flex; align-items: center; gap: 10px; }
.pl-month { font-weight: 800; font-size: 17px; min-width: 9em; text-align: center; }
.pl-month small { display: block; font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.pl-times { min-height: 132px; margin: 16px 0 4px; display: flex; flex-direction: column; justify-content: flex-start; }
.pl-t-hint { color: var(--ink-2); font-size: 15px; margin: 0 0 14px; }
.pl-t-idle .pl-legend { gap: 10px 26px; }
.pl-t-head { margin: 0 0 8px; display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; font-size: 15px; color: var(--ink-2); }
.pl-t-head b { color: var(--ink); font-size: 17px; }
.pl-t-months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 680px; position: relative; }
.pl-t-months li { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; text-align: center; }
.pl-t-months li::before { content: ""; position: absolute; left: -2px; right: -2px; top: 13px; height: 8px; background: var(--ln-ink); z-index: 0; box-shadow: 0 0 0 1.5px var(--ln-casing); }
.pl-t-months.k-incerta li::before { background: repeating-linear-gradient(90deg, var(--ln-ink) 0 12px, transparent 12px 20px); }
.pl-t-months.k-meta li::before { background: linear-gradient(var(--ln-ink) 0 50%, transparent 50%), repeating-linear-gradient(90deg, var(--ln-ink) 0 9px, transparent 9px 15px); }
.pl-t-months.k-straord li::before { background: transparent; box-shadow: inset 0 0 0 2.5px var(--ln-ink); }
.pl-t-months .dot { position: relative; z-index: 1; margin: calc(17px - var(--r)) 0; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; background: var(--ln-hub); box-shadow: 0 0 0 2.5px var(--ln-hub-ring); }
.pl-t-months .m { font-weight: 700; font-size: 14px; color: var(--ink-2); }
.pl-t-months .v { font: 700 15px/1.1 var(--font-num); font-stretch: 88%; white-space: nowrap; }
.pl-t-months li[aria-current] .m { color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.pl-svgwrap { flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: center; margin-top: 4px; }
.pl-svg { width: 100%; height: auto; max-height: calc(100vh - 330px); min-height: 420px; display: block; overflow: visible; }
.pl-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-top: 14px; }
.pl-legend { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: 14px; color: var(--ink-2); }
.pl-legend li { display: flex; align-items: center; gap: 8px; }
.pl-legend svg { width: 40px; height: 16px; overflow: visible; }
.ln-legend { --ln-ink: var(--ink-2); }

/* schema: nastri, capolinea, interscambio */
.pl-svg text { font-family: var(--font-display); }
.ln { cursor: pointer; outline: none; }
.ln-hit { stroke: transparent; fill: none; pointer-events: stroke; }
.ln-focus { stroke: var(--focus-ring); fill: none; opacity: 0; }
.ln:focus-visible .ln-focus { opacity: 1; }
.ln-gap { stroke: var(--ln-gap); fill: none; }
.ln-casing { stroke: var(--ln-casing); fill: none; }
.ln-bed { stroke: var(--ln-bed); fill: none; }
.ln-ink { stroke: var(--ln-ink); fill: none; }
.ln-cap { stroke: var(--ln-ink); }
.ln-tc { fill: var(--ln-ink); stroke: var(--ln-tondo-ring); stroke-width: 1.5; }
.ln-tc.hollow { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.ln-tn { font-weight: 800; font-size: 15px; fill: var(--ln-tondo-ink, #0b1533); }
.ln-tc.hollow + .ln-tn { fill: var(--ink); }
.ln-name { font-weight: 800; font-size: 18px; fill: var(--ink); }
.ln-sub { font-weight: 600; font-size: 15.5px; fill: var(--ink-2); }
.ln-rib, .ln-cap, .ln-tc { transition: opacity .2s var(--ease); }
.pl-svg.has-active .ln:not(.on) .ln-rib { --ln-ink: var(--ln-off); opacity: var(--ln-dim); }
.pl-svg.has-active .ln:not(.on) .ln-cap { --ln-ink: var(--ln-off); } /* piena nella tinta attenuata, non trasparente */
.ln-hub-out { fill: var(--ln-hub); stroke: var(--ln-hub-out); stroke-width: 11; }
.ln-hub-in { fill: var(--ln-hub); stroke: var(--ln-hub-ring); stroke-width: 6; }
.ln-hk { font-weight: 600; font-size: 15px; fill: var(--ink-2); }
.ln-hn { font-weight: 800; font-size: 26px; fill: var(--ink); }
.ln-hv { font: 700 27px var(--font-num); font-stretch: 88%; fill: var(--ink); }
.ln-hs { font: 700 20px var(--font-num); font-stretch: 88%; fill: var(--ink); }

/* elenco: alternativa allo schema (predefinita sul telefono) */
.pl-list { list-style: none; margin: 8px 0 0; padding: 0; display: none; }
.pl.as-list .pl-list { display: block; }
.pl.as-list .pl-svgwrap, .pl.as-list .pl-times { display: none; }
.pl-lg { font: 800 16px/1.3 var(--font-display); color: var(--ink); padding: 18px 0 8px; }
.pl-li { border-bottom: 1px solid var(--hair); }
.pl-lb { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 8px 4px; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; border-radius: 8px; }
.pl-lb:hover { background: var(--ln-strip-hover); }
.pl-lb .who { display: flex; flex-direction: column; min-width: 0; }
.pl-lb .who b { font-size: 16px; font-weight: 800; }
.pl-lb .who small { font-size: 14.5px; color: var(--ink-2); }
.pl-lb .amt { font: 800 17px/1 var(--font-num); font-stretch: 88%; }
.pl-li.open .pl-lb { font-weight: 800; }
.pl-ld { padding: 6px 4px 16px 46px; }
.pl-lhub { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 12px 16px; border-radius: 999px; background: var(--ln-hub); color: var(--ln-hub-ring); box-shadow: inset 0 0 0 3px var(--ln-hub-ring); }
.pl-lhub b { font: 800 18px/1 var(--font-display); }
.pl-lhub span { font: 700 16px/1 var(--font-num); font-stretch: 88%; }

@media (max-width: 1180px) {
  .pl { grid-template-columns: minmax(0, 1fr); }
  .pl-side { border-right: 0; border-bottom: 1px solid var(--hair); }
  .pl-svg { max-height: none; min-height: 0; }
}
@media (max-width: 819px) {
  .pl-svgwrap, .pl-times, #pl-view { display: none; }
  .pl-list { display: block; }
  .pl { border-radius: 14px; margin-top: 0; }
  .pl-side { padding: 22px 18px 26px; }
  .pl-map { padding: 18px 18px 18px; }
  .pl-spend { font-size: 72px; }
  .pl-why { max-width: none; }
  .pl-t-months { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .ln-rib, .ln-cap, .ln-tc { transition: none; } }

/* ── Le altre sezioni: via le cornici doppie e le cifre sottili del Delta, etichette leggibili ── */
:root[data-stile="linee"] { --bz-top: transparent; --bz-hi: transparent; --bz-shell: transparent; --bz-shell-line: transparent; --bz-drop: 0 0 0 transparent; }
html[data-stile="linee"] :is(.delta-sum b, .dd-meta b, .river-sum b, .vsec .list-h .num, .goal-card .goal-amt, .sale-flow b, .sale-lane h2 span, .si-price b, .sort-fig b, .sc-amt, .basin .b-v, .ren-fig b, .bus-prev-card .sfld .val, .hero-num, .kpi-value) {
  font-family: var(--font-num); font-weight: 700; font-stretch: 88%; letter-spacing: -.01em; }
/* Etichette in maiuscolo spaziato del Delta: in questo stile minuscole, normali, almeno 13px */
html[data-stile="linee"] :is(.kpi-label, .chart-card h3, .table-card h3, .cf-kpi-title, .form-card h3, .h-hero-label, .h-hero-stat-label, .section-title, .tbl th, .acc-row.stat-note, .pgrid .grp th, .fld-group > h2, .fld-group > h3, .sec-t, .mcard .mname, .river-sum, .renew .d, .sale-flow i, .si-stamp, .sort-sub .k, .sort-recent > .k, .ren-fig .k, .rm-h .k, .rm-row .d, .fv-l, .dd-bar i) {
  text-transform: none; letter-spacing: 0; font-stretch: 100%; font-size: 13px; font-weight: 700; color: var(--ink-2); }
html[data-stile="linee"] :is(.mcard .mname, .tbl th, .pgrid .grp th) { font-size: 13.5px; } /* stessa forza della regola sopra (per .pgrid .grp th), che prima le batteva */
/* Entrate e Uscite del mese: niente fondi verdi e rossi, il segno lo dicono il titolo e le cifre */
html[data-stile="linee"] .vsec, html[data-stile="linee"] .vsec-out { background: var(--surface); border: 1px solid var(--hair); }
html[data-stile="linee"] .vsec > .list-h, html[data-stile="linee"] .vsec-out > .list-h { background: var(--surface); border-bottom: 1px solid var(--hair); }
html[data-stile="linee"] .vsec-in .list-h .num, html[data-stile="linee"] .vsec-out .list-h .num { color: var(--ink); }
html[data-stile="linee"] .vsec .lh-t { font-size: 16px; font-weight: 800; }
html[data-stile="linee"] .vsec .lh-t .ico { color: var(--ink-2); }
/* Mesi del Cash Flow e schede: un filo, la scelta con l'anello pieno */
html[data-stile="linee"] .mcard { background: var(--surface); border: 1px solid var(--hair); box-shadow: none; border-radius: 12px; }
html[data-stile="linee"] .mcard[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
html[data-stile="linee"] .goal-card[aria-current="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
html[data-stile="linee"] :is(.sale-item, .sort-card) { box-shadow: none; }
/* Raggi del Delta (22, 16) rimasti in Vendite, Smista e nel riquadro Conti: 14 i riquadri, 12 quelli dentro */
html[data-stile="linee"] :is(.sale-lane, .sort-done) { border-radius: 14px; }
html[data-stile="linee"] .sale-item { border-radius: 12px; }
html[data-stile="linee"] .sale-lane:not(.drop-on) { background: var(--surface); } /* .drop-on resta: è il segno del rilascio */
@media (min-width: 761px) { html[data-stile="linee"] .mov-pop-body { border-radius: 12px; } } /* sul telefono è un foglio dal basso */
/* Mese mostrato in alto: la stessa pillola dei segmenti */
html[data-stile="linee"] .month-switch { background: transparent; border: 2px solid var(--control); border-radius: 999px; padding: 2px; }
html[data-stile="linee"] .month-switch button { border-radius: 999px; color: var(--ink); min-width: 36px; min-height: 36px; }
html[data-stile="linee"] .month-switch strong { font-size: 15px; font-weight: 800; }
/* Testi piccoli frequenti: 13px (con max(13px, 1em) diventavano grandi quanto il testo normale: 1em è il genitore) */
html[data-stile="linee"] :is(.stat-note, .card-sub, .chips, .kv, .accts, .legend, .note, .hint, .vrow small, .nav-foot) { font-size: 13px; }
html[data-stile="linee"] .chip { font-size: 13.5px; }
/* Testi secondari che in styles.css restavano a 11–12,5px */
html[data-stile="linee"] :is(.kpi-sub, .legend-note, .goal-type, .goal-eta, .fld, .result span, .status, .form-card .form-row label,
  .rm-st, .rm-row .who small, .ra-net, .ren-fig small, .mcard small, .card h2 .aside,
  .day-head, .tx-meta, .bullet-val small, .tx-amt small, .acc-bal small, .basin .b-of, .river-cap, .bank-err, .inactive-tag, .versamenti-badge,
  .pens-note-txt, .pens-bonus-hint, .cf-date-popup-title, .cf-date-popup-hint, .cf-date-popup-clear, .cf-date-popup-cancel,
  .si-sub, .si-agel, .si-price s, .sale-hint, .sale-flow small, .sale-thumb-n, .sheet-note) { font-size: 13px; }
html.touch[data-stile="linee"] #bank-tx-list .tx-voce { font-size: 13px; }
html[data-stile="linee"] .si-name { font-size: 14px; } /* resta sopra il sottotitolo, ora a 13 */
html[data-stile="linee"] .si-agel { flex-wrap: wrap; }
/* Intestazioni delle tabelle dei simulatori e assi del Cumulato: niente maiuscolo spaziato */
html[data-stile="linee"] .data-table th { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; color: var(--ink-2); }
html[data-stile="linee"] :is(.rcm-m, .rcm-y, .rcm-nowt) { font-size: 13px; letter-spacing: 0; }
/* Titoli dei riquadri di Movimenti («Per voce», «Regole»): erano a 13px come etichette, ora come i .card-h */
html[data-stile="linee"] #p-movimenti .card > h2:not(.card-h) { font-size: 17px; font-weight: 800; color: var(--ink); }
html[data-stile="linee"] .fld-group > h2 { justify-content: flex-start; } /* la «i» accanto al titolo del gruppo, non in fondo alla riga */
/* Errori dei campi in rosso: la regola su small (0,1,2) li faceva grigi */
html[data-stile="linee"] .num-err { color: var(--crit-ink); font-size: 13px; }
/* Cifra delle schede dei mesi del Cash Flow in Archivo come le altre (era l'Overpass sottile del Delta) */
html[data-stile="linee"] .mcard .mnet { font-family: var(--font-num); font-weight: 700; font-stretch: 88%; letter-spacing: -.01em; }
/* Stato dei rinnovi: testo nell'inchiostro (le tinte chiare delle linee non reggono come testo sul chiaro) */
html[data-stile="linee"] .rm-st { color: var(--ink); }
/* «i» delle spiegazioni: bersaglio di almeno 24px */
html[data-stile="linee"] .info { min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; vertical-align: middle; }
/* Conteggio sulla voce di navigazione: sopra il tondo, non dietro */
html[data-stile="linee"] .nav-badge { position: relative; z-index: 2; color: var(--ln-btn-ink); box-shadow: 0 0 0 2px var(--surface); }
@media (max-width: 900px) { html[data-stile="linee"] .bottom-nav .nav-badge { position: absolute; top: 0; left: calc(50% + 8px); } }

/* ── Movimenti: il mese come linea del tempo, una fermata per giorno ── */
.rv-stop { display: none; }
html[data-stile="linee"] .rv-stop { display: inline; fill: var(--surface); stroke: var(--ink-2); stroke-width: 2; }
html[data-stile="linee"] .rv-stop[data-n="1"] { fill: var(--ink); stroke: var(--ink); }
html[data-stile="linee"] .rv-stop.today { fill: var(--surface); stroke: var(--ink); stroke-width: 3.5; }
html[data-stile="linee"] .rv-axis { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
html[data-stile="linee"] .rv-today { display: none; }
html[data-stile="linee"] .rv-day.on .rv-stop { stroke-width: 4; r: 7px; }
html[data-stile="linee"] .rv-d { font-family: var(--font-display); font-weight: 700; font-size: 13px; fill: var(--ink-2); }
html[data-stile="linee"] .rv-d.today { fill: var(--ink); font-weight: 800; }

/* ── Obiettivi: ogni obiettivo è una linea in costruzione (tratto pieno = già da parte, binari tratteggiati
   fino al capolinea), al posto dell'acqua che sale ── */
html[data-stile="linee"] .goal-card { padding-bottom: 40px; }
html[data-stile="linee"] .goal-card::before { inset: auto 18px 18px 18px; height: 8px; z-index: 0; border-radius: 4px; animation: none; transform: none;
  background: linear-gradient(90deg, var(--gc) 0 var(--pct), transparent var(--pct)) 0 0 / 100% 100% no-repeat,
              repeating-linear-gradient(90deg, var(--ink-2) 0 10px, transparent 10px 18px) 0 50% / 100% 3px no-repeat;
  box-shadow: none; opacity: 1; }
html[data-stile="linee"] .goal-card::after { left: auto; right: 16px; bottom: 12px; width: 4px; height: 20px; border-radius: 2px; background: var(--ink); animation: none !important; opacity: 1; z-index: 0; }
html[data-stile="linee"] .goal-card.dry::before { display: block; background: repeating-linear-gradient(90deg, var(--ink-2) 0 10px, transparent 10px 18px) 0 50% / 100% 3px no-repeat; }
html[data-stile="linee"] .goal-card.dry::after { display: block; }
html[data-stile="linee"] .goal-card:hover::after { animation: none; }
/* Il tratto pieno senza la maschera sfumata dei bacini (su 8px lo rendeva quasi invisibile); in chiaro
   la tinta più scura, sopra 3:1 sul fondo per ogni colore */
html[data-stile="linee"] .goal-card::before { -webkit-mask-image: none; mask-image: none; }
:root[data-stile="linee"][data-theme="light"] .goal-card:not(.dry)::before { background: linear-gradient(90deg, color-mix(in srgb, var(--gc) 55%, var(--ink)) 0 var(--pct), transparent var(--pct)) 0 0 / 100% 100% no-repeat,
  repeating-linear-gradient(90deg, var(--ink-2) 0 10px, transparent 10px 18px) 0 50% / 100% 3px no-repeat; }
@media (prefers-color-scheme: light) {
  :root[data-stile="linee"]:not([data-theme="dark"]) .goal-card:not(.dry)::before { background: linear-gradient(90deg, color-mix(in srgb, var(--gc) 55%, var(--ink)) 0 var(--pct), transparent var(--pct)) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(90deg, var(--ink-2) 0 10px, transparent 10px 18px) 0 50% / 100% 3px no-repeat; }
}
html[data-stile="linee"] .goal-card > * { position: relative; z-index: 1; }
html[data-stile="linee"] .goal-card::before { background: linear-gradient(90deg, color-mix(in srgb, var(--gc) 70%, var(--ink)) 0 var(--pct), transparent var(--pct)) 0 0 / 100% 100% no-repeat,
  repeating-linear-gradient(90deg, var(--ink-2) 0 10px, transparent 10px 18px) 0 50% / 100% 3px no-repeat; }
/* I menu a tendina: gli stessi campi delle altre pagine */
/* Importi di movimenti, conti e riepilogo per voce: le cifre in Archivo come il resto di Movimenti (fiume,
   Smista); le etichette piccole dentro restano nel carattere del testo */
html[data-stile="linee"] :is(.tx-amt, .acc-bal, #p-movimenti .bullet-val, #p-movimenti .goal-row strong) { font-family: var(--font-num); font-weight: 700; font-stretch: 88%; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; }
html[data-stile="linee"] :is(.tx-amt, .acc-bal, #p-movimenti .bullet-val) small { font-family: var(--font); font-stretch: 100%; font-weight: 400; letter-spacing: 0; }
html[data-stile="linee"] .sel, html[data-stile="linee"] select { border: 2px solid var(--control); background: var(--surface); color: var(--ink); border-radius: 10px; }

/* ── Panoramica: i tre riquadri (liquidità, autonomia, fine periodo) e i loro dettagli sopra targa e linee ── */
html[data-stile="linee"] #p-panoramica > .r3:not(#delta-card), html[data-stile="linee"] #p-panoramica > .drawer { order: 0; } /* :not(#…) per battere la regola del Delta, che ha due id */
html[data-stile="linee"] #p-panoramica > .r3 { margin-bottom: 16px; }

/* ── Segmenti: dentro l'opzione scelta tutto il testo prende il colore della scelta (prima il «small» restava
   chiaro sul fondo chiaro: «Nessuna · niente» illeggibile); quelli che vanno a capo hanno angoli, non un ovale ── */
html[data-stile="linee"] .seg button[aria-pressed="true"] :is(small, span, b, i) { color: inherit; }
html[data-stile="linee"] #tax-presets { border-radius: 18px; }
html[data-stile="linee"] #tax-presets button { border-radius: 14px; }
html[data-stile="linee"] .tax-presets small { font-size: 13px; }
/* «=» della barra dei calcoli e conteggi su pallino: testo della segnaletica, non bianco fisso (sul porcellana era 1,1:1) */
html[data-stile="linee"] .calc-bar button[data-op="="] { background: var(--ln-btn-bg); color: var(--ln-btn-ink); }
html[data-stile="linee"] .onb-steps li.done .onb-n { color: var(--ln-btn-ink); }
/* Stato dei rinnovi: oltre alla tinta, bordo e pallino nel colore dello stato (la sola tinta al 15% su
   blu notte si confondeva col fondo e «incassato» e «non pagato» si leggevano uguali) */
html[data-stile="linee"] .rm-st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 2px 8px; font-weight: 700;
  background: color-mix(in srgb, var(--vc) 24%, var(--surface)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--vc) 75%, var(--surface)); }
html[data-stile="linee"] .rm-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vc); flex: none; }