/* ============================================================================
   ui.css — cohesive design refresh (loaded on every page after theme.css).

   A modern, trustworthy "fintech" polish for a tax calculator: refined color
   tokens, crisper typography, cleaner cards/buttons/inputs, better focus
   states, zebra tables, and a consistent nav. Works in BOTH light and dark
   (the dark tokens still come from theme.css and win via :root[data-theme=dark]).
   ============================================================================ */

/* ---- Refined light tokens (dark tokens remain from theme.css) ---- */
:root {
    --primary: #1d4ed8;
    --primary-light: #3b82f6;
    --primary-dark: #12275e;
    --bg: #f4f6fb;
    --card-bg: #ffffff;
    --text: #0f172a;
    --text-secondary: #5b6577;
    --border: #e4e9f2;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.05);
    --shadow-lg: 0 6px 16px rgba(15,23,42,.06), 0 24px 56px rgba(15,23,42,.10);
}

/* ---- Typography ---- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { letter-spacing: -0.02em; }
.page-intro h1, .article-head h1 { letter-spacing: -0.025em; }
p { color: inherit; }

/* ---- Nav ---- */
.apple-nav { box-shadow: 0 1px 0 rgba(15,23,42,.04); }
.an-link, .an-details summary { border-radius: 9px; font-weight: 500; }
.an-menu, .mega-menu { border-radius: 14px; }
.an-menu a, .an-menu button.dropdown-tab-btn { border-radius: 9px; }

/* ---- Cards ---- */
.card, .guide-section, .sp-form, .more-box, .result-card {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card { transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, border-color .18s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ---- Buttons ---- */
.btn {
    border-radius: 12px;
    font-weight: 650;
    letter-spacing: 0;
    box-shadow: 0 1px 2px rgba(15,23,42,.10);
}
.btn:focus-visible, .btn-primary:focus-visible, .btn-outline:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.btn-primary {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    box-shadow: 0 8px 18px rgba(29,78,216,.28);
}
.btn-primary:hover { box-shadow: 0 12px 26px rgba(29,78,216,.34); }

/* ---- Inputs & selects ---- */
input, select, textarea { font-family: inherit; }
.form-input, .form-select, .sp-form input, .sp-form select,
.sp-form .form-input, .sp-form .form-select {
    border-radius: 10px;
    border: 1.5px solid var(--border);
    transition: border-color .15s, box-shadow .15s;
}
.form-input:focus, .form-select:focus, .sp-form input:focus, .sp-form select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(29,78,216,.14);
    outline: none;
}
.input-prefix { border-radius: 10px; }

/* ---- Tables ---- */
.bracket-table th { letter-spacing: .02em; text-transform: uppercase; font-size: .78rem; }
.bracket-table tbody tr:nth-child(even) td { background: rgba(15,23,42,.02); }
[data-theme="dark"] .bracket-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.03); }
.bracket-table tr.active td { font-weight: 700; }

/* ---- Chips / badges / pills ---- */
.chip, .badge, .state-badge { border-radius: 999px; }
.chip { transition: border-color .15s, color .15s, transform .15s; }
.chip:hover { transform: translateY(-1px); }

/* ---- Result cards ---- */
.result-card { border: 1px solid var(--border); }
.result-card.highlight { box-shadow: 0 10px 26px rgba(29,78,216,.28); }
.result-value { letter-spacing: -0.01em; }

/* ---- Info boxes ---- */
.tip-box, .take-home-box, .warning-box, .danger-box, .success-box { border-radius: 12px; }

/* ---- State map shell (subtle refinement) ---- */
.map-shell { border-radius: var(--radius); }
.state-legend-item { font-weight: 500; }

/* ---- Footer ---- */
.site-footer { font-size: .84rem; }

/* ---- Focus accessibility (global) ---- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}