/* ══ 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 Flusso, 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: var(--surface); --ln-bed: var(--surface);
  --ln-off: #7f8bb0; --ln-dim: .78;
  --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"] .hero-num, 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, html[data-stile="linee"] .page-header 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; }
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; }
html[data-stile="linee"] .chip { background: var(--surface-2); color: var(--ink-2); border: 0; font-weight: 600; }
html[data-stile="linee"] .chip.warn { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); color: var(--ink); }
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; }
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; }
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"] .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; }
  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: 11.5px; letter-spacing: 0; gap: 4px; padding: 6px 0 8px; background: none; min-width: 0; overflow: hidden; }
  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: 800; background: none; }
  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; }
}

/* ── Panoramica: la frase in cima e il delta lasciano il posto a targa, palina e schema ── */
html[data-stile="linee"] #pan-morning { display: none; }
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 { opacity: .5; }
.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, .rc-tot, .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, .rc-m, .rm-row .d, .fv-l, .dd-bar i) {
  text-transform: none; letter-spacing: 0; font-stretch: 100%; font-size: max(13px, 1em); font-weight: 700; color: var(--ink-2); }
html[data-stile="linee"] .mcard .mname { font-size: 13.5px; }
html[data-stile="linee"] .tbl th { font-size: 13.5px; }
/* 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; }
/* 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: almeno 13px */
html[data-stile="linee"] :is(.chip, .stat-note, .card-sub, .chips, .kv, .accts, .legend, .note, .hint, .vrow small, .nav-foot) { font-size: max(13px, 1em); }
html[data-stile="linee"] .chip { font-size: 13.5px; }
/* 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; }
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; }
/* Smista / Lista e i menu a tendina: gli stessi segmenti e campi delle altre pagine */
html[data-stile="linee"] .mov-mode { background: transparent; border: 2px solid var(--control); }
html[data-stile="linee"] .mov-mode button { color: var(--ink-2); font-weight: 600; }
html[data-stile="linee"] .mov-mode button[aria-pressed="true"] { background: var(--ln-btn-bg); color: var(--ln-btn-ink); box-shadow: none; font-weight: 800; }
html[data-stile="linee"] .mov-mode button[aria-pressed="true"] .n { color: var(--ln-btn-ink); }
html[data-stile="linee"] .mov-mode .n { font-size: 13px; color: var(--ink-2); }
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"] .seg:has(> button:nth-child(4)):is(#tax-presets, .seg-grid) { border-radius: 18px; }
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"] :is(.h-year-btn:hover, .onb-steps li.done .onb-n) { color: var(--ln-btn-ink); }