/* ==========================================================================
   Avinox Calc — light "technical paper" theme
   Design tokens, minimal reset, component library.
   No Tailwind, nessun "important". See docs/UI_REFACTOR_PLAN.md §3, §5.
   ========================================================================== */

:root {
    /* superfici */
    --bg: #F2F0E8;            /* pagina */
    --surface: #FFFFFF;       /* card */
    --surface-2: #ECE9DE;     /* card nidificate, thead, input bg alternativo */
    --surface-3: #E0DBCB;     /* track barre, hover */
    --border: #D5CEBB;
    --border-strong: #C2B79F;

    /* testo */
    --ink: #1E252D;           /* titoli, header — antracite del logo */
    --text: #14120F;
    --muted: #5C5041;
    --faint: #857A6A;

    /* brand */
    --brand: #5AF822;         /* SOLO identità: linea header, tab attivo, ring focus, fill chart */
    --accent: #276A0B;        /* bottoni, link, stati attivi (AA su --bg) */
    --accent-hover: #34820F;
    --accent-soft: #E0F0D3;   /* sfondo selezionato / badge */

    /* semantica */
    --ok: #276A0B;
    --warn: #E05E10;  --warn-bg: #FADCC8;  --warn-border: #EDA468;  --warn-text: #7A3609;
    --danger: #DC3E25; --danger-bg: #F8DAD2; --danger-border: #EC9B8A; --danger-text: #7F2415;

    /* modalità (desaturate, usate come stripe/dot, non come colore titolo) */
    --mode-eco: #337E36;
    --mode-auto: #235E9C;
    --mode-trail: #B26800;
    --mode-turbo: #AE3124;
    --mode-custom: #5C4290;   /* BOOST e custom route modes */
    /* Stati che il file registra ma il modello non conosce (boost/walk/off):
       scuro, perche' sulla mappa deve staccarsi dalle strade. */
    --mode-other: #4A4440;

    /* forma */
    --r-sm: 7px;  --r: 10px;  --r-lg: 13px;
    --shadow: 0 2px 9px rgba(58, 48, 34, .09);
    --shadow-lg: 0 18px 50px rgba(58, 48, 34, .22);
    --focus: 0 0 0 3px rgba(39, 106, 11, .18);

    /* tipografia */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --fs-label: 11.5px;  --fs-body: 14px;  --fs-title: 13.5px;  --fs-value: 15.5px;  --fs-h2: 16.5px;  --fs-h1: 20px;

    --header-h: 62px;
}

/* --------------------------------------------------------------------------
   Reset minimo
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.5;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
img { display: block; }
a { color: var(--accent); }

::selection { background: var(--accent-soft); }

/* Scrollbar sottile */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none; }
}

/* Focus visibile ovunque */
:is(button, input, select, a, [tabindex]):focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

/* --------------------------------------------------------------------------
   Shell (§6)
   -------------------------------------------------------------------------- */

#app {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 100vh;
}

/* I due contenitori tab: il Tuner diventa trasparente alla griglia (sidebar +
   workspace come riga 2 della griglia unica). */
#tabCalc { display: contents; }
/* switchTab() aggiunge/toglie .hidden e .block su questi stessi nodi. */
#tabCalc.hidden { display: none; }
/* Il tab Route è un flusso verticale a piena larghezza (no sidebar). */
#tabRoute { display: block; grid-column: 1 / -1; }
#tabRoute.hidden { display: none; }

/* Ride selector in step 1 (visibile solo con registrazioni caricate). */
.ride-picker { flex-direction: row; align-items: center; gap: .6rem; }
.ride-picker-inline {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 1 1 220px;
    min-width: 0;
}
.ride-picker-inline .select { flex: 1; min-width: 120px; max-width: 420px; }
/* Blocchi dell'analisi: si aprono come le schede, ma vivono sulla pagina
   (non dentro una card) e la testata porta il dato chiave, così da chiusi
   dicono comunque qualcosa. */
.analysis-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: .2rem 0;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.analysis-title {
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}
.analysis-head:hover .analysis-title { color: var(--accent); }
/* ▸ che diventa ▾ quando è aperto (le testate delle schede usano ▾) */
.analysis-head[aria-expanded="true"] .step-chevron { transform: rotate(90deg); }
.analysis-state {
    font-size: 11.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.analysis-body:not(.hidden) { display: flex; flex-direction: column; gap: .5rem; }

/* Controlli sovrapposti alla mappa (dentro il blocco sticky, così restano a
   portata di mano anche quando si scorre sui grafici). */
.map-overlay {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .35rem .55rem;
    font-size: 11.5px;
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow);
}
.map-overlay-topright { top: .55rem; right: .55rem; }
.map-overlay-bottomleft { bottom: .55rem; left: .55rem; }
/* Il readout della mappa route è vuoto finché non passi il mouse: una
   scatola vuota sul bordo sarebbe solo rumore. */
.map-overlay:empty { display: none; }
.map-overlay .kv-label { white-space: nowrap; }
.map-overlay .select { max-width: 190px; }

@media (max-width: 767px) {
    /* Sulla mappa stretta l'etichetta mangerebbe metà schermo */
    .map-overlay-topright .kv-label { display: none; }
    .map-overlay-topright .select { max-width: 150px; }
}

/* --------------------------------------------------------------------------
   Sezioni collassabili del tab Route
   Le tre schede hanno una testata sempre visibile che RIASSUME lo stato
   (non un semplice titolo): collassare serve solo se l'header racconta cosa
   c'è dentro. Le azioni restano nella testata, fuori dal toggle.
   -------------------------------------------------------------------------- */
/* Le testate e i corpi seguono la convenzione delle card dell'app
   (.card-header: .8rem 1rem + bordo di separazione; .card-body: 1rem):
   le schede devono avere le stesse dimensioni delle altre card. */
.step-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .8rem 1rem;
}
/* Il separatore solo quando il corpo è visibile: su una scheda collassata
   sarebbe un bordo in più appeso al nulla. */
.step-head:not(.is-collapsed) { border-bottom: 1px solid var(--border); }
.step-toggle {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
}
.step-toggle:hover .card-title { color: var(--accent); }
.step-chevron {
    display: inline-block;
    width: 14px;
    color: var(--muted);
    transition: transform .15s ease;
}
.step-head.is-collapsed .step-chevron { transform: rotate(-90deg); }
.step-state {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.step-actions {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
}
/* :not(.hidden) on purpose: un selettore con id batterebbe la utility
   .hidden e terrebbe in pagina un corpo "collassato". */
.step-body { padding: 1rem; }
.step-body:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

/* Il gruppo grafici è una colonna: senza gap l'etichetta finiva incollata
   al primo grafico (0 px misurati). */
#rideGraphsWrap:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

/* Evidenzia i campi appena riempiti dai valori del giro, dopo il salto al
   Tuner: senza, l'utente atterra senza sapere cosa è cambiato. */
@keyframes field-flash {
    0%, 100% { border-color: var(--border); box-shadow: 0 0 0 0 rgba(90, 248, 34, 0); }
    30%, 70% { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
}
.field-flash { animation: field-flash 1.1s ease-in-out 2; }

.graph-toggle {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    margin-top: .6rem;
    padding: .5rem .7rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    text-align: left;
}
.graph-toggle:hover { border-color: var(--accent); }
.graph-toggle-chevron { color: var(--muted); }
#graphsToggle[aria-expanded="true"] .graph-toggle-chevron { transform: rotate(90deg); }

/* Avviso di pagina (sezioni richiuse dopo un caricamento) */
.page-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .55rem .85rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--r);
    font-size: 12.5px;
    color: var(--ink);
}
.page-notice-actions { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }

/* Il loader messo in evidenza quando si arriva dal Tuner */
@keyframes prompt-pulse {
    0%, 100% { border-color: var(--accent); background: var(--accent-soft); }
    50% { border-color: var(--accent-hover); background: var(--surface); }
}
.dropzone.is-prompted { animation: prompt-pulse 1.1s ease-in-out 3; border-color: var(--accent); }

/* Suggerimento di calibrazione nel Tuner */
.calibration-cta { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .5rem; }

.rides-flow { width: 100%; }
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    margin-right: .45rem;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 750;
}

.app-header {
    grid-column: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--header-h);
    padding: 0 1rem 0 .85rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.app-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 3px;
    background: var(--brand);
}

/* Logo nudo, più grande; un drop-shadow antracite gli dà definizione
   sul fondo carta senza contenitori intorno. */
.brand {
    display: flex;
    align-items: center;
    align-self: center;
    text-decoration: none;
}
.brand-logo {
    height: 48px;
    width: auto;
    filter: drop-shadow(0 1px 1.5px rgba(40, 48, 56, .5)) drop-shadow(0 0 1px rgba(40, 48, 56, .35));
}
.brand-mark {
    display: none;
    height: 38px;
    width: auto;
    filter: drop-shadow(0 1px 1.5px rgba(40, 48, 56, .5)) drop-shadow(0 0 1px rgba(40, 48, 56, .35));
}

.tabs {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    scrollbar-width: none;
    align-self: stretch;
    align-items: stretch;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 .9rem;
    border: none;
    background: none;
    color: var(--muted);
    font-size: var(--fs-title);
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); font-weight: 750; }
.tab.is-active::after {
    content: "";
    position: absolute;
    left: .55rem; right: .55rem; bottom: 0;
    height: 2px;
    background: var(--brand);
}

.theme-toggle { white-space: nowrap; }

.sidebar {
    position: sticky;
    top: var(--header-h);
    max-height: calc(100vh - var(--header-h));
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-gutter: stable;
    border-right: 1px solid var(--border);
    background: var(--bg);
}

.sidebar-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem .85rem;
}

.workspace { min-width: 0; }

.workspace-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem 2rem;
}

/* --------------------------------------------------------------------------
   Tipografia di sezione e form
   -------------------------------------------------------------------------- */

.section-title {
    font-size: var(--fs-label);
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.field > label {
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}

.hint {
    font-size: 12px;
    color: var(--faint);
}

.input, .select {
    width: 100%;
    min-height: 36px;
    padding: .45rem .6rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--text);
    font-size: var(--fs-body);
    font-variant-numeric: tabular-nums;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.select { appearance: auto; }
.input:hover, .select:hover { border-color: var(--faint); }
.input:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }

.range {
    width: 100%;
    accent-color: var(--accent);
    min-height: 36px;
    cursor: pointer;
}

.check { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; }

/* --------------------------------------------------------------------------
   Bottoni
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 38px;
    padding: .5rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--r);
    font-size: var(--fs-title);
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    text-align: center;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: var(--shadow);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--muted);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--faint); background: var(--surface-2); }

.btn-sm { min-height: 30px; padding: .3rem .65rem; font-size: 12px; border-radius: var(--r-sm); }
/* Links styled as buttons: no underline, like the <button>s next to them. */
a.btn { text-decoration: none; }

/* First-visit invitation to the tour (Tuner, above the results). */
.welcome-card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
    padding: .7rem .9rem .7rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.welcome-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--brand);
}
.welcome-text { color: var(--muted); }
.welcome-text strong { color: var(--ink); }
.welcome-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Quiet links at the foot of the Tuner sidebar. */
.sidebar-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: .4rem;
    padding: .2rem 0 .4rem;
    font-size: 12px;
    color: var(--faint);
}
.sidebar-links a { color: var(--muted); }
.link-btn {
    padding: 0;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.link-btn:hover, .sidebar-links a:hover { color: var(--accent); }
/* A disabled button must not look pressable (the report's optional actions are
   disabled until the rides carry the data they need). */
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; border-color: var(--border-strong); color: var(--muted); }

/* Toggle Manual / Route file */
.segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 2px;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--r);
}
.segmented > button {
    min-height: 32px;
    padding: .35rem .6rem;
    border: none;
    border-radius: calc(var(--r) - 2px);
    background: transparent;
    color: var(--muted);
    font-size: var(--fs-title);
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.segmented > button:hover { color: var(--ink); }
.segmented > button.is-active {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
}

/* Preset riding style */
.preset {
    display: block;
    width: 100%;
    padding: .6rem .7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.preset:hover { border-color: var(--accent); background: var(--accent-soft); }
/* Profilo attivo: stesso linguaggio dell'hover, ma persistente, con il segno
   che lo rende riconoscibile anche a colpo d'occhio. */
.preset.is-active {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.preset.is-active .preset-title::after {
    content: ' ✓';
    color: var(--accent);
    font-weight: 700;
}
.preset-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: var(--fs-title);
    font-weight: 750;
    color: var(--ink);
}
.preset-desc {
    display: block;
    margin-top: .15rem;
    font-size: 12px;
    color: var(--muted);
}
.preset-dot {
    flex: 0 0 auto;
    width: 9px; height: 9px;
    border-radius: 50%;
}
.preset-dot[data-mode="eco"] { background: var(--mode-eco); }
.preset-dot[data-mode="auto"] { background: var(--mode-auto); }
.preset-dot[data-mode="trail"] { background: var(--mode-trail); }
.preset-dot[data-mode="turbo"] { background: var(--mode-turbo); }

/* --------------------------------------------------------------------------
   Card e contenitori
   -------------------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--border);
}
.card-title { font-size: var(--fs-h2); font-weight: 750; color: var(--ink); }
.card-subtitle { font-size: 12px; color: var(--faint); margin-top: .1rem; }
.card-body { padding: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.card-footer {
    padding: .6rem 1rem;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
}

/* Riga d'azione sotto il body di una card (CTA primari) */
.card-actions {
    padding: .75rem 1rem;
    border-top: 1px solid var(--border);
}

/* Riga KPI in alto nel workspace */
.summary-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .7rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
}
.summary-bar-side {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.summary-bar-side .hint { margin: 0; }
.summary-item {
    flex: 0 0 auto;
    font-size: var(--fs-value);
    font-weight: 750;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Card modalità (ECO/AUTO/TRAIL/TURBO/custom) */
.mode-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: .85rem .9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    font-size: var(--fs-body);
    overflow: hidden;
}
.mode-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--stripe, var(--border-strong));
}
.mode-card[data-mode="eco"] { --stripe: var(--mode-eco); }
.mode-card[data-mode="auto"] { --stripe: var(--mode-auto); }
.mode-card[data-mode="trail"] { --stripe: var(--mode-trail); }
.mode-card[data-mode="turbo"] { --stripe: var(--mode-turbo); }
.mode-card[data-mode="custom"] { --stripe: var(--mode-custom); }

.mode-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: .55rem;
}
.mode-title { font-size: var(--fs-value); font-weight: 750; color: var(--ink); letter-spacing: .01em; }
.mode-badges { display: flex; align-items: center; gap: .3rem; }

/* Righe chiave-valore */
.kv { display: flex; flex-direction: column; }
.kv-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    padding: .16rem 0;
    font-variant-numeric: tabular-nums;
}
.kv-label { color: var(--muted); font-weight: 650; }
.kv-value { color: var(--text); font-weight: 700; text-align: right; }
.kv-hint { color: var(--faint); font-weight: 400; font-size: 12px; }

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .18rem .55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.badge-soft { background: var(--surface-2); color: var(--muted); }
.badge-ok { background: var(--accent-soft); border-color: #BCD9A6; color: var(--ok); }
.badge-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.badge-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.badge-mode-eco { background: var(--accent-soft); border-color: #BCD9A6; color: var(--mode-eco); }
.badge-mode-auto { background: #DCE7F5; border-color: #AEC7E4; color: var(--mode-auto); }
.badge-mode-trail { background: #F8E6CE; border-color: #E8C48F; color: var(--mode-trail); }
.badge-mode-turbo { background: #F5DAD4; border-color: #E5A696; color: var(--mode-turbo); }

/* Blocchi statistica Boost */
.stat { display: flex; flex-direction: column; gap: .1rem; }

/* Callout / avvisi */
.callout {
    padding: .55rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--r);
    font-size: var(--fs-body);
}
.callout-info { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.callout-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.callout-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }

/* Stato import file (#fileStatus) */
.file-status { font-size: 12px; }
.status-info { color: var(--muted); }
.status-ok { color: var(--ok); }
.status-error { color: var(--danger-text); }

/* Knowledge Base come dialog modale */
.kb-dialog {
    width: min(1100px, 94vw);
    max-height: 88vh;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
.kb-dialog::backdrop { background: rgba(28, 26, 24, .45); }
.kb-dialog-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--border);
}
/* La X (e il titolo) restano raggiungibili: l'intestazione non scorre via con
   il contenuto, che altrimenti obbliga a risalire tutta la modale per chiuderla. */
.kb-dialog-head,
.chart-modal-head {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg);
}
.kb-dialog .workspace-body { padding: 1rem; }

.kb-open { flex: 0 0 auto; font-weight: 750; }
.header-actions { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }

/* Guida "Where are the files?": step numerati con path/comandi in evidenza */
.file-help-steps {
    counter-reset: file-step;
    list-style: none;
    margin: 0;
    padding: .8rem .8rem .8rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.file-help-steps > li {
    position: relative;
    padding-left: 1.9rem;
    font-size: 12px;
    color: var(--text);
}
.file-help-steps > li::before {
    counter-increment: file-step;
    content: counter(file-step);
    position: absolute;
    left: 0;
    top: .05rem;
    width: 19px;
    height: 19px;
    line-height: 19px;
    text-align: center;
    background: var(--accent-soft);
    border: 1px solid #BCD9A6;
    border-radius: 50%;
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 750;
}
.code-block {
    display: block;
    padding: .45rem .55rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    color: var(--ink);
    overflow-x: auto;
    white-space: pre;
    user-select: all;
}
.code-row {
    display: flex;
    align-items: stretch;
    gap: .4rem;
    margin-top: .35rem;
}
.code-row .code-block { flex: 1 1 auto; }
.code-row .mini-btn {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0 .6rem;
    display: flex;
    align-items: center;
}
.code-inline {
    padding: .05rem .3rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink);
}

/* Popup "Rides analyzed": cosa è cambiato dopo il caricamento dei giri */
.ride-summary-dialog {
    width: min(620px, 94vw);
    max-height: 90vh;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
.ride-summary-dialog::backdrop { background: rgba(28, 26, 24, .45); }
.ride-summary-body {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1rem;
    overflow-y: auto;
}
.ride-summary-lead { font-size: var(--fs-body); color: var(--text); }
.ride-summary-body .kv { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: .6rem .8rem; }
.ride-summary-table { width: 100%; }
.ride-summary-table td:nth-child(2) { color: var(--faint); }
.ride-summary-table td:nth-child(3) { color: var(--ok); font-weight: 700; }
.ride-summary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
    padding: .8rem 1rem;
    border-top: 1px solid var(--border);
}

/* PWA install button (mobile only) and its iOS instructions banner */
.install-btn { white-space: nowrap; }

/* Export/import nell'header: icona + etichetta, e sotto i 768px resta
   l'icona (title e aria-label continuano a dire cosa fa). */
.data-btn { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.data-icon { font-size: 14px; line-height: 1; }
/* "Clear all data" per esteso su desktop, "Clear" quando lo spazio è poco */
.reset-short { display: none; }

/* Avviso flottante per le azioni dell'header (export/import) */
.toast {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 60;
    max-width: min(92vw, 520px);
    padding: .6rem 1rem;
    background: var(--ink);
    color: var(--surface);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    font-size: 12.5px;
    text-align: center;
}
.install-hint {
    position: fixed;
    top: calc(var(--header-h) + .5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    max-width: min(92vw, 420px);
    padding: .6rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-lg);
    font-size: 12px;
    color: var(--text);
    text-align: center;
}

/* Empty state (tab Rides senza giri) */
.empty-state {
    padding: 3rem 2rem;
    text-align: center;
    background: var(--surface);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--r-lg);
    color: var(--muted);
}
.empty-state .card-title { font-size: var(--fs-h2); margin-bottom: .4rem; }
.empty-state .hint { margin-top: .5rem; }

/* Simulator: empty state vs results. #missionResults must repeat the
   workspace stacking (the gap lives on .workspace-body, and these blocks
   are one level deeper). */
#missionResults {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#missionResults.hidden { display: none; }

/* Mappa del percorso (MapLibre) */
.ride-map-card {
    position: sticky;
    top: calc(var(--header-h) + .5rem);
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-bottom: .5rem;
    background: var(--surface);
}
.ride-map-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.ride-map-head .select { min-width: 180px; }
.map-legend {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.legend-swatch {
    display: inline-block;
    width: 70px;
    height: 9px;
    border-radius: 5px;
    border: 1px solid var(--border);
}
.ride-map {
    height: 380px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--surface-2);
}
.ride-map .maplibregl-ctrl-attrib { font-size: 10px; }

/* Route Map (planned GPX/KML track, coloured by gradient) */
.route-map-card { display: flex; flex-direction: column; gap: .5rem; }
/* Contenitore posizionato attorno alla sola mappa: gli overlay (legenda e
   readout) si ancorano alla mappa, non alla card che include anche la nota. */
.map-frame { position: relative; }
.route-map-readout {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    min-height: 1.2em;
}
.route-map {
    height: 380px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--surface-2);
}
.route-map .maplibregl-ctrl-attrib { font-size: 10px; }
.band-swatch {
    display: inline-block;
    width: 12px;
    height: 9px;
    border-radius: 2px;
    border: 1px solid var(--border);
    margin-right: .15rem;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .ride-map { height: 260px; }
    .route-map { height: 260px; }
}

/* Tab Rides: insights a piena larghezza */
#rideGraphs { display: flex; flex-direction: column; gap: .8rem; }
#rideInsights .card-header { align-items: center; }
#rideInsights .select { max-width: 340px; }
.ride-graph-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .3rem;
}
.ride-graph-head .chart-title { text-align: left; }
.ride-graph-actions { display: flex; gap: .3rem; }
.ride-graph-area { height: 150px; }
.cursor-overlay {
    position: absolute;
    pointer-events: none;
    z-index: 5;
}

/* Grafico richiamato dal selettore della mappa */
.ride-graph.graph-focus {
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 3px rgba(39, 106, 11, .16), var(--shadow-lg);
}

/* Pinned graphs: fixed in a dedicated layer below the header (not
   sticky in-flow, which the footer would push around). The placeholder
   keeps the flow height. */
.ride-graph.pinned {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: min(100% - 1.5rem, 1900px);
    z-index: 40;
    background: var(--surface);
    border: 2px solid var(--accent);
    box-shadow: var(--shadow-lg), 0 0 0 3px rgba(39, 106, 11, .14);
}
.ride-graph.pinned .pin-btn {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* Modale grafico ingrandito — piena larghezza, altezza proporzionale
   ai grafici della pagina Rides (area 220px + head + padding). */
.chart-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    padding: 0;
    border: none;
    border-radius: 0;
    background: var(--bg);
    color: var(--text);
}
.chart-modal::backdrop { background: rgba(28, 26, 24, .45); }
.chart-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--border);
}
.chart-modal-body {
    padding: 1rem;
    height: 300px;
}

/* Stato calibrazione nel Tuner */
.calibration-status-card .kv-row { padding: 0; }

/* Badge privacy (parsing locale) */
.privacy-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .55rem;
    background: var(--accent-soft);
    border: 1px solid #BCD9A6;
    border-radius: var(--r-sm);
    font-size: 11px;
    font-weight: 650;
    color: var(--ok);
}

/* Card calibrazione da giro reale */
.calibration-body {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .7rem .8rem .7rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}
.calibration-body .kv-compact { background: var(--surface); }

/* I percorsi lunghi nei <code> non devono tagliarsi fuori dal card */
code {
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* Card Calibration (tab Rides): respiro tra gli elementi */
#calibrationBadge { margin-bottom: .3rem; }
#calibrationReport .card { margin-bottom: .6rem; }
#calibrationReport .btn { margin-top: .7rem; }
#useRideAverages { margin-top: .2rem; }

/* Calibration shown on its own (factor stored, rides not loaded): the step
   number is meaningless without step 2, so it is hidden. */
#ridesCalibration.standalone .step-num { display: none; }

/* Chip informativo (dipendenza Route Simulator ← Engine Tuner) */.setup-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .6rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 12px;
    color: var(--muted);
}
.setup-chip::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--brand);
}

/* Dropzone import GPX/KML */
.dropzone {
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    background: var(--surface-2);
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--r);
    color: var(--muted);
    transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover { border-color: var(--accent); color: var(--text); }
.dropzone strong { color: var(--ink); font-weight: 700; }

/* Righe del geometry picker */
.track-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 12px;
    cursor: pointer;
}
.track-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.track-item span { flex: 1 1 auto; color: var(--text); }
.track-item .track-km { flex: 0 0 auto; color: var(--faint); font-variant-numeric: tabular-nums; }

.mini-btn {
    min-height: 24px;
    padding: .15rem .5rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.mini-btn:hover { color: var(--ink); border-color: var(--faint); background: var(--surface-2); }

/* Grade bars */
.bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 12px;
    margin-bottom: .25rem;
    font-variant-numeric: tabular-nums;
}
.bar-label { flex: 0 0 64px; color: var(--muted); font-weight: 700; }
.bar-track {
    flex: 1 1 auto;
    height: 10px;
    background: var(--surface-3);
    border-radius: 5px;
    overflow: hidden;
}
.bar-fill { height: 100%; border-radius: 5px; }
.bar-value { flex: 0 0 34px; text-align: right; color: var(--text); font-weight: 700; }

/* Chart */
.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 1rem;
}
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.chart-box { display: flex; flex-direction: column; height: 340px; }
.chart-title {
    font-size: var(--fs-label);
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    margin-bottom: .5rem;
}
.chart-area { flex: 1 1 auto; position: relative; min-height: 0; }
.chart-box canvas { position: absolute; inset: 0; }
.chart-caption {
    margin: 0 0 .35rem;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}
.chart-hint { margin-top: .5rem; text-align: center; }
.chart-legend { justify-content: center; margin: 0 0 .6rem; }

.legend { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: .28rem; }
/* Le barre del calcolatore hanno un colore per modo: la legenda lo mostra. */
.legend-dot-modes {
    background: linear-gradient(90deg, var(--mode-eco) 0 25%, var(--mode-auto) 25% 50%,
        var(--mode-trail) 50% 75%, var(--mode-turbo) 75% 100%);
}
.legend-dot-stock { background: var(--faint); }

/* --------------------------------------------------------------------------
   Griglie risultati
   -------------------------------------------------------------------------- */

.result-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.cols-1 { grid-template-columns: 1fr; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   Knowledge Base
   -------------------------------------------------------------------------- */

.kb-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.kb-nav a {
    display: block;
    padding: .4rem .55rem;
    border-radius: var(--r-sm);
    color: var(--muted);
    font-size: var(--fs-title);
    font-weight: 650;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.kb-nav a:hover, .kb-nav a:focus-visible { background: var(--accent-soft); color: var(--accent); }

.kb-section { scroll-margin-top: calc(var(--header-h) + 12px); }
/* Titoli di sezione KB: ben più grandi delle card normali e delle tile */
.kb-section h2 {
    font-size: var(--fs-h1);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ink);
}
.kb-subtitle { font-size: 12px; color: var(--faint); margin-top: .15rem; }
.kb-section p { color: var(--text); }

.kb-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}
.kb-tile {
    padding: .8rem .9rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
}
/* Titoli delle tile: etichette piccole uppercase, ben distinte dai titoli di sezione */
.kb-tile h3, .kb-tile h4 {
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}
.kb-tile p { margin-top: .3rem; color: var(--text); }
.kb-num { color: var(--accent); font-weight: 800; font-size: 14px; }

.kb-table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
}
.kb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-body);
    border: none;
}
.kb-table th, .kb-table td { padding: .45rem .6rem; text-align: left; border: 1px solid var(--border); }
.kb-table thead th { background: var(--surface-2); color: var(--muted); font-size: var(--fs-label); letter-spacing: .05em; text-transform: uppercase; }
.kb-table tbody tr:nth-child(even) { background: var(--surface-2); }
.kb-mode-name { display: inline-flex; align-items: center; gap: .4rem; font-weight: 750; color: var(--ink); }

.kb-formula {
    padding: .8rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink);
    text-align: center;
    max-width: 560px;
    margin: .5rem auto;
}

/* Passi numerati dentro la Knowledge Base */
.kb-steps {
    counter-reset: kb-step;
    list-style: none;
    margin: 0 0 .6rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.kb-steps > li {
    position: relative;
    padding-left: 1.9rem;
    font-size: var(--fs-body);
    color: var(--text);
}
.kb-steps > li::before {
    counter-increment: kb-step;
    content: counter(kb-step);
    position: absolute;
    left: 0;
    top: .05rem;
    width: 19px;
    height: 19px;
    line-height: 19px;
    text-align: center;
    background: var(--accent-soft);
    border: 1px solid #BCD9A6;
    border-radius: 50%;
    color: var(--accent);
    font-size: 10.5px;
    font-weight: 750;
}

/* Footer con crediti e donazioni */
.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1.25rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
}
.footer-credits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    font-size: 11.5px;
    color: var(--muted);
}
.footer-copy { color: var(--ink); font-weight: 650; }
.footer-link { color: var(--accent); text-decoration: none; font-weight: 650; }
.footer-link:hover { text-decoration: underline; }
.donate-btn {
    padding: .45rem .9rem;
    background: #FFC439;
    color: #1C1A18;
    border-radius: var(--r);
    font-size: var(--fs-title);
    font-weight: 750;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: background .15s ease;
}
.donate-btn:hover { background: #FFD34D; }

/* --------------------------------------------------------------------------
   Compat con il JS esistente (§4.3)
   -------------------------------------------------------------------------- */

.hidden { display: none; }
.block { display: block; }

#routeDropZone.border-green-500 { border-color: var(--accent); background: var(--accent-soft); }

/* --------------------------------------------------------------------------
   Componenti di layout dedicati al markup
   -------------------------------------------------------------------------- */

/* Stack verticale di form */
.form-stack:not(.hidden) { display: flex; flex-direction: column; gap: .8rem; }
.form-stack > .field-row { gap: .6rem; }

.btn-block { width: 100%; }
.stack-btn { margin-top: 8px; }

.preset-stack { display: flex; flex-direction: column; gap: .5rem; }

/* Toggle drawer slider avanzati */
.advanced-toggle { align-self: flex-start; }
.advanced-panel:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding: .8rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
}

/* Riga numero + slider */
.slider-row { display: flex; align-items: center; gap: .6rem; }
.slider-value { flex: 0 0 68px; text-align: center; }

/* Geometry picker */
.track-list:not(.hidden) { display: flex; flex-direction: column; gap: .3rem; }
.picker-actions { display: flex; gap: .3rem; flex: 0 0 auto; margin-bottom: .4rem; }

/* Pannello collassabile (segmenti GPX): chiuso di default */
.collapsible {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.collapsible > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
}
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible .collapsible-title { flex: 1 1 auto; }
.collapsible .collapsible-chevron { color: var(--muted); transition: transform .15s ease; }
.collapsible[open] .collapsible-chevron { transform: rotate(90deg); }
.collapsible > .track-list { padding: .5rem .6rem; border-top: 1px solid var(--border); }

/* Il lettore OSM è l'azione del pannello: a tutta larghezza e pieno (btn-primary,
   come Analyze), con un po' d'aria sopra la Composition. */
#surfaceMixPanel { margin-top: .4rem; }
#surfaceOsmBtn { width: 100%; }

/* Nella riga di testa della scheda "Load a route" i due bottoni affiancano la
   select della Ride: si stendono alla sua altezza (37px qui, 40px nel
   breakpoint mobile), così i tre controlli restano allineati. */
.step-actions .btn { align-self: stretch; }

/* Card compatta del riepilogo file */
.kv-compact { gap: .05rem; padding: .7rem .8rem; }
.summary-stack:not(.hidden) { display: flex; flex-direction: column; gap: .5rem; }

/* Statistiche BOOST */

/* Copia modalità proposta */
.copy-btn { width: 100%; margin-top: .5rem; }

/* Note elenco */
.route-notes {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    font-size: 12px;
    color: var(--muted);
}


/* --------------------------------------------------------------------------
   Energy card: quattro blocchi (uso stimato, batteria, fisica, distribuzione)
   invece di una lista stirata su tutta la larghezza.
   -------------------------------------------------------------------------- */
.energy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.4rem 1.8rem;
    align-items: start;
}
.energy-block { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.energy-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 22px;
}
.energy-title {
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.energy-figure {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    flex-wrap: wrap;
    margin: 0;
}
.energy-value {
    font-size: 30px;
    font-weight: 750;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.energy-unit { font-size: 13px; font-weight: 700; color: var(--muted); }
.energy-side {
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}
.energy-note { margin: 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.energy-rows { display: flex; flex-direction: column; gap: .3rem; }
.energy-rows .kv-row { padding: .1rem 0; font-size: 12.5px; }
.energy-ok { color: var(--accent); font-weight: 700; }
.energy-warn { color: var(--mode-trail); font-weight: 700; }
.status-warn { color: var(--mode-trail); font-weight: 700; }

/* Barra impilata della distribuzione + chip per livello */
.mode-bar {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--surface-3);
    border: 1px solid var(--border);
}
.mode-bar span { display: block; height: 100%; }
.mode-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.mode-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    padding: .35rem .2rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-top-width: 3px;
    border-radius: var(--r);
    font-size: 10.5px;
    letter-spacing: .04em;
    color: var(--muted);
    text-transform: uppercase;
}
.mode-chip strong { font-size: 14px; font-weight: 750; color: var(--ink); }
.mode-chip[data-mode="eco"] { border-top-color: var(--mode-eco); }
.mode-chip[data-mode="auto"] { border-top-color: var(--mode-auto); }
.mode-chip[data-mode="trail"] { border-top-color: var(--mode-trail); }
.mode-chip[data-mode="turbo"] { border-top-color: var(--mode-turbo); }

@media (max-width: 767px) {
    .energy-value { font-size: 26px; }
}

/* Sezioni del workspace. Stessa scatola della .chart-card del profilo
   altimetrico: i blocchi dell'analisi sono card come tutte le altre, non
   testo appoggiato sulla pagina. */
.workspace-section:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 1rem;
}

/* Quick Start come stepper: i passi sono una SEQUENZA, non opzioni
   parallele; il cerchio numerato e la linea li legano nell'ordine giusto. */
.kb-stepper { display: flex; flex-direction: column; }
.kb-step { display: flex; gap: .9rem; }
.kb-step-rail { display: flex; flex-direction: column; align-items: center; gap: .35rem; flex: 0 0 auto; }
.kb-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    flex: 0 0 auto;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.kb-step-line { flex: 1 1 auto; width: 2px; background: var(--border); }
.kb-step-body { flex: 1 1 auto; min-width: 0; padding-bottom: 1.5rem; }
.kb-step:last-child .kb-step-line { display: none; }
.kb-step:last-child .kb-step-body { padding-bottom: 0; }
.kb-step-title { margin: 0; font-size: 17px; font-weight: 750; color: var(--ink); line-height: 1.2; }
.kb-step-sub { margin: .15rem 0 .5rem; font-size: 12px; color: var(--muted); }
.kb-step-body p { margin: 0 0 .5rem; }
.kb-step-link { font-size: 12px; color: var(--muted); }
.kb-fields {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
}
.kb-fields li {
    padding: .25rem .5rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    font-size: 11.5px;
    color: var(--muted);
}
.kb-preview {
    margin-top: .5rem;
    padding: .6rem .7rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    max-width: 340px;
}
.kb-preview-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; }
.kb-preview-mode {
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .05em;
    padding: .15rem .4rem;
    border-radius: var(--r);
    border: 1px solid var(--border);
    border-left-width: 3px;
}
.kb-preview-mode[data-mode="eco"] { border-left-color: var(--mode-eco); }
.kb-preview-mode[data-mode="auto"] { border-left-color: var(--mode-auto); }
.kb-preview-mode[data-mode="trail"] { border-left-color: var(--mode-trail); }
.kb-preview-mode[data-mode="turbo"] { border-left-color: var(--mode-turbo); }
.kb-preview-note { font-size: 11px; color: var(--muted); }
.kb-preview-rows {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .3rem;
    font-size: 11.5px;
    color: var(--muted);
}
.kb-preview-rows span { padding: .3rem .35rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); text-align: center; }

@media (max-width: 767px) {
    .kb-step-num { width: 26px; height: 26px; font-size: 11px; }
    .kb-step { gap: .6rem; }
    .kb-preview-rows { grid-template-columns: 1fr; }
}

/* Knowledge Base */
.kb-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kb-tag {
    display: block;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--accent);
}
.kb-table-wrap { overflow-x: auto; }

@media (min-width: 1024px) {
    .kb-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Responsive (§6)
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) {
    #resultsGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
    #app { grid-template-columns: 320px minmax(0, 1fr); }
    .result-grid.cols-4, #resultsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    #app { grid-template-columns: minmax(0, 1fr); }

    .brand-logo { display: none; }
    .brand-mark { display: block; }
    .app-header { flex-wrap: wrap; gap: .2rem; padding: .45rem .75rem 0; }
    .brand { margin-right: auto; }
    .theme-toggle { order: 2; margin: 0; align-self: center; }
    .tabs { order: 3; width: 100%; }
    .tabs { order: 3; width: 100%; overflow-x: visible; flex-wrap: wrap; }
    .tab {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
        white-space: normal;
        padding: .55rem .35rem;
        font-size: 13px;
    }

    /* Dialog KB su mobile: head compatto */
    .kb-dialog:not([open]) { display: none; }
    .kb-dialog[open] { display: flex; flex-direction: column; }
    /* Le azioni dell'header restano a destra anche quando vanno a capo:
       align-self agisce in verticale, non sulla riga wrappata, quindi serve
       il margine automatico. */
    .header-actions { align-self: flex-end; margin-left: auto; }
    /* Etichette corte: con "Clear all data" per esteso i bottoni andavano a
       capo sotto il logo. */
    .reset-long { display: none; }
    .reset-short { display: inline; }

    .sidebar {
        position: static;
        max-height: none;
        order: 1;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .workspace { order: 2; }
    .workspace-body { padding: .85rem .75rem 1.5rem; }

    .result-grid, .cols-2, .cols-3, .cols-4, #resultsGrid { grid-template-columns: 1fr; }
    .summary-bar { flex-wrap: wrap; gap: .5rem; }
    .chart-box { height: 260px; }
    .kb-grid, .kb-grid-4 { grid-template-columns: 1fr; }

    /* Touch target ≥ 40px e niente zoom automatico iOS sugli input */
    .input, .select { min-height: 40px; font-size: 16px; }
    .btn, .segmented > button { min-height: 40px; }
    .preset { min-height: 40px; }

    .kb-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
    .kb-nav a { text-align: center; white-space: nowrap; padding: .4rem .3rem; font-size: 11.5px; }
    /* Header actions: uniform height on mobile */
    .header-actions .btn { min-height: 34px; padding: .3rem .6rem; }
    /* Header stretto: Export/Import restano icone (title + aria-label) */
    .data-btn .data-label { display: none; }
    .data-btn { min-width: 34px; justify-content: center; }
    .theme-toggle .tt-label { display: none; }
    .theme-toggle { min-width: 34px; justify-content: center; }
    .kb-open { min-width: 34px; }
}

@media (max-width: 639px) {
    body { overflow: auto; }
}

/* Riduzione del movimento: ultima regola del file così vince in cascata senza forzature (§G3). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after,
    .btn, .tab, .card, .preset, .input, .select, .dropzone, .mini-btn, .mode-card { transition: none; }
}

/* ==========================================================================
   Variante dark (§9 del piano) — attivata da html[data-theme="dark"],
   scelta dal toggle nell'header, persistita in localStorage.
   ========================================================================== */

html[data-theme="dark"] {
    /* superfici */
    --bg: #1A1E23;
    --surface: #232A31;
    --surface-2: #2B333B;
    --surface-3: #353F49;
    --border: #3A434D;
    --border-strong: #4C5763;

    /* testo */
    --ink: #E9EBEE;
    --text: #E2E6E9;
    --muted: #A3ACB6;
    --faint: #7E8792;

    /* brand */
    --brand: #5AF822;
    --accent: #8BDB3E;
    --accent-hover: #9FE65A;
    --accent-soft: #2C3A21;

    /* semantica */
    --ok: #8BDB3E;
    --warn: #F08033;  --warn-bg: #3A2A1C;  --warn-border: #7E5028;  --warn-text: #F5BB90;
    --danger: #E8654C; --danger-bg: #3C231E; --danger-border: #803E30; --danger-text: #F5AA98;

    /* modalità */
    --mode-eco: #6FBF72;
    --mode-auto: #6BA3DC;
    --mode-trail: #E09A3E;
    --mode-turbo: #E06050;
    --mode-custom: #A98BD6;

    /* forma */
    --shadow: 0 2px 9px rgba(0, 0, 0, .35);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, .5);
    --focus: 0 0 0 3px rgba(139, 219, 62, .22);
}

::selection { background: var(--accent-soft); }
html[data-theme="dark"] ::selection { background: #35452A; }

/* Su accent chiaro il testo del bottone primario va scuro */
html[data-theme="dark"] .btn-primary { color: #14120F; }

/* I badge di modalità usano tinte trasparenti al posto dei pastelli chiari */
html[data-theme="dark"] .badge-ok,
html[data-theme="dark"] .badge-mode-eco { background: rgba(111, 191, 114, .16); border-color: rgba(111, 191, 114, .45); }
html[data-theme="dark"] .badge-mode-auto { background: rgba(107, 163, 220, .16); border-color: rgba(107, 163, 220, .45); }
html[data-theme="dark"] .badge-mode-trail { background: rgba(224, 154, 62, .16); border-color: rgba(224, 154, 62, .45); }
html[data-theme="dark"] .badge-mode-turbo { background: rgba(224, 96, 80, .16); border-color: rgba(224, 96, 80, .45); }
html[data-theme="dark"] .badge-danger { background: rgba(232, 101, 76, .16); border-color: rgba(232, 101, 76, .5); }
html[data-theme="dark"] .badge-warn { background: rgba(240, 128, 51, .16); border-color: rgba(240, 128, 51, .5); }

/* Logo: sul fondo scuro il drop-shadow antracite non serve più */
html[data-theme="dark"] .brand-logo,
html[data-theme="dark"] .brand-mark { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); }