/* ── Stili condivisi tra le pagine app (i token sono in partials/design-tokens.css) ── */

/* Page hero */
.page-hero { padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.page-title { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; letter-spacing: -.04em; margin: 0 0 .25rem; text-wrap: balance; }
.page-sub { color: var(--muted); font-size: .9rem; margin: 0; }
.section-h { font-size: 1.05rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: .5rem; }

/* Chip categoria */
.cat-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .15rem .5rem; border-radius: var(--r-xs);
    font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.chip-ETF            { background: var(--blue-bg);   color: var(--blue); }
.chip-EQUITY         { background: var(--green-bg);  color: var(--green); }
.chip-INDEX          { background: var(--slate-bg);  color: var(--slate); }
.chip-MUTUALFUND     { background: var(--amber-bg);  color: var(--amber); }
.chip-FUTURE         { background: var(--rose-bg);   color: var(--rose); }
.chip-OPTION         { background: var(--indigo-bg); color: var(--indigo); }
.chip-CRYPTOCURRENCY { background: var(--amber-bg);  color: var(--amber); }
.chip-CURRENCY       { background: var(--surface-2); color: var(--muted); }
.chip-MONEYMARKET    { background: var(--green-bg);  color: var(--green); }
.chip-OTHER          { background: var(--surface-2); color: var(--muted); }

/* Badge score con etichetta azione (colori .score-* nei token) */
.score-badge {
    display: inline-flex; align-items: baseline; gap: .35rem;
    padding: .25rem .65rem; border-radius: 999px;
    font-family: var(--font-mono); font-size: .8rem; font-weight: 700;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.score-badge small { font-family: var(--font); font-size: .68rem; font-weight: 600; letter-spacing: .02em; }

/* Variazione prezzo */
.price-delta { font-family: var(--font-mono); font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.price-delta.up { color: var(--green-text, var(--green)); }
.price-delta.down { color: var(--red-text, var(--red)); }
.price-delta small { font-family: var(--font); font-weight: 500; color: var(--muted); font-size: .72rem; }

/* Sparkline */
.spark { width: 100%; max-width: 120px; height: 32px; display: block; }
.spark.up { color: var(--green); }
.spark.down { color: var(--red); }

/* Toast */
.toast-wrap {
    position: fixed;
    bottom: max(1.25rem, calc(1.25rem + env(safe-area-inset-bottom)));
    right: max(1.25rem, calc(1.25rem + env(safe-area-inset-right)));
    z-index: var(--z-toast); display: flex; flex-direction: column; gap: .4rem; pointer-events: none;
}
.t-toast {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
    padding: .7rem 1rem; font-size: .83rem; font-weight: 500; box-shadow: var(--sh-lg);
    pointer-events: auto; display: flex; align-items: center; gap: .5rem;
    opacity: 0; transform: translateY(6px);
}
.t-toast.show { opacity: 1; transform: none; }
.t-toast.ok  { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); }
.t-toast.err { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); }
@media (prefers-reduced-motion: no-preference) {
    .t-toast { transition: opacity .2s, transform .2s; }
}

/* Modal e form */
.modal-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); color: var(--text); overscroll-behavior: contain; }
.modal-header { border-bottom: 1px solid var(--border); padding: 1.15rem 1.4rem; }
.modal-title { font-size: 1rem; font-weight: 600; margin: 0; }
.modal-body { padding: 1.4rem; overscroll-behavior: contain; }
.modal-footer { border-top: 1px solid var(--border); padding: .9rem 1.4rem; }
.form-label { font-size: .83rem; font-weight: 500; color: var(--text); margin-bottom: .35rem; display: block; }
.req { color: var(--red); margin-left: .15rem; }
.form-control, .form-select {
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
    border-radius: var(--r-sm); font-size: .875rem; font-family: var(--font);
}
.form-control::placeholder { color: var(--subtle); }
.form-control:focus, .form-select:focus {
    border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent);
    background: var(--surface); color: var(--text); outline: none;
}

/* Dropdown azioni */
.dropdown-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--sh-lg); font-size: .85rem; }
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--text); }

/* Focus visibile uniforme per controlli custom */
.range-btn:focus-visible, .legend-toggle:focus-visible, .action-btn:focus-visible, .sim-mode-btn:focus-visible, .info-icon:focus-visible {
    outline: 2px solid var(--blue); outline-offset: 2px;
}

/* Mobile */
@media (max-width: 576px) {
    .lp-nav { padding: .75rem 1rem; }
    .page-title { font-size: 1.4rem; }
    /* Evita auto-zoom iOS al focus: input ≥16px su mobile */
    .form-control, .form-select { font-size: 16px; }
}