/* ==========================================================================
   Hindsight — "Signal" design system
   Dark-first, terminal-credible fintech shell + a bold "Payoff" result moment.
   No web fonts / CDNs: self-contained system stacks only.
   ========================================================================== */

:root {
  /* DARK is the committed identity, so it lives on the bare :root. The light
     palette is layered on as an override for prefers-color-scheme: light and
     for an explicit [data-theme="light"] choice. Native controls follow. */
  color-scheme: dark;

  /* Grounds & surfaces — cool blue-black, never neutral gray */
  --bg: #080b11;
  --bg-grid: rgba(120, 150, 190, 0.05);
  --surface: #10151d;
  --surface-2: #161d28;
  --surface-3: #1c2531;

  /* Text */
  --text: #e9eef5;
  --muted: #8b98ac;
  --faint: #5c6a7e;

  /* Lines */
  --border: #1e2836;
  --border-strong: #2b3849;

  /* Accent = the chart's own primary line (#34d399), so UI + chart cohere */
  --accent: #34d399;
  --accent-bright: #5ee7ad;
  --accent-dim: #1f8f68;
  --accent-ink: #032015; /* text sitting on a solid accent fill */
  --accent-soft: rgba(52, 211, 153, 0.12);
  --accent-glow: rgba(52, 211, 153, 0.28);

  /* "Payoff" pop — acid lime from direction C. The loud, viral half of the
     palette, spent only on the two hero moments (Calculate CTA, the gain
     number) plus small brand marks. Emerald above stays the calm data layer.
     Used as a fill with dark ink, or as text only on a dark ground. */
  --pop: #eafe4b;
  --pop-bright: #f3ff6b;
  --pop-dim: #c3d62a;
  --pop-ink: #12180a; /* near-black, faint green bias — text on a lime fill */
  --pop-glow: rgba(234, 254, 75, 0.34);
  --headline-gain: var(--pop); /* the win number screams lime on the dark shell */

  /* Semantic gain / loss (gain intentionally == accent; loss is its own hue) */
  --gain: #34d399;
  --gain-soft: rgba(52, 211, 153, 0.12);
  --loss: #ff6b6b;
  --loss-soft: rgba(255, 107, 107, 0.12);

  /* Danger / error */
  --danger-bg: rgba(255, 107, 107, 0.1);
  --danger-text: #ffb0b0;
  --danger-border: rgba(255, 107, 107, 0.32);

  /* Focus ring */
  --focus: rgba(52, 211, 153, 0.45);

  /* Typography — mono for data/labels (Signal credibility),
     system sans for prose and the big Payoff number. No serif. */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
    "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Shadows — real offset + soft blur, tuned for a dark ground */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 20px 44px -22px rgba(0, 0, 0, 0.8);
  --shadow-pop: 0 30px 70px -34px rgba(0, 0, 0, 0.9);

  /* Layout */
  --container: 680px;
}

/* ---- LIGHT override (system prefers light, and no explicit dark choice) ---- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --bg: #eef1f5;
    --bg-grid: rgba(20, 40, 70, 0.045);
    --surface: #ffffff;
    --surface-2: #f4f6f9;
    --surface-3: #eaeef3;

    --text: #0d1520;
    --muted: #55637a;
    --faint: #8391a5;

    --border: #e0e5ec;
    --border-strong: #ccd4de;

    --accent: #0e9e6a;
    --accent-bright: #12b87c;
    --accent-dim: #0b8659;
    --accent-ink: #ffffff;
    --accent-soft: rgba(14, 158, 106, 0.1);
    --accent-glow: rgba(14, 158, 106, 0.22);

    --pop: #dff23a; /* a touch deeper so the lime fill has presence on white */
    --pop-bright: #eafe4b;
    --pop-dim: #b4c422;
    --pop-ink: #12180a;
    --pop-glow: rgba(198, 220, 20, 0.4);
    --headline-gain: var(--gain); /* lime text is illegible on white — emerald instead */

    --gain: #0e9e6a;
    --gain-soft: rgba(14, 158, 106, 0.1);
    --loss: #d64242;
    --loss-soft: rgba(214, 66, 66, 0.1);

    --danger-bg: rgba(214, 66, 66, 0.08);
    --danger-text: #8f2020;
    --danger-border: rgba(214, 66, 66, 0.28);

    --focus: rgba(14, 158, 106, 0.4);

    --shadow-1: 0 1px 2px rgba(20, 30, 45, 0.06);
    --shadow-2: 0 1px 2px rgba(20, 30, 45, 0.05), 0 18px 40px -22px rgba(20, 30, 45, 0.28);
    --shadow-pop: 0 26px 60px -30px rgba(20, 30, 45, 0.4);
  }
}

/* ---- Explicit LIGHT choice must win even on a dark OS ---- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #eef1f5;
  --bg-grid: rgba(20, 40, 70, 0.045);
  --surface: #ffffff;
  --surface-2: #f4f6f9;
  --surface-3: #eaeef3;

  --text: #0d1520;
  --muted: #55637a;
  --faint: #8391a5;

  --border: #e0e5ec;
  --border-strong: #ccd4de;

  --accent: #0e9e6a;
  --accent-bright: #12b87c;
  --accent-dim: #0b8659;
  --accent-ink: #ffffff;
  --accent-soft: rgba(14, 158, 106, 0.1);
  --accent-glow: rgba(14, 158, 106, 0.22);

  --pop: #dff23a;
  --pop-bright: #eafe4b;
  --pop-dim: #b4c422;
  --pop-ink: #12180a;
  --pop-glow: rgba(198, 220, 20, 0.4);
  --headline-gain: var(--gain);

  --gain: #0e9e6a;
  --gain-soft: rgba(14, 158, 106, 0.1);
  --loss: #d64242;
  --loss-soft: rgba(214, 66, 66, 0.1);

  --danger-bg: rgba(214, 66, 66, 0.08);
  --danger-text: #8f2020;
  --danger-border: rgba(214, 66, 66, 0.28);

  --focus: rgba(14, 158, 106, 0.4);

  --shadow-1: 0 1px 2px rgba(20, 30, 45, 0.06);
  --shadow-2: 0 1px 2px rgba(20, 30, 45, 0.05), 0 18px 40px -22px rgba(20, 30, 45, 0.28);
  --shadow-pop: 0 26px 60px -30px rgba(20, 30, 45, 0.4);
}

/* ---- Explicit DARK choice must win even on a light OS. Tokens already come
   from the bare :root (dark), so only the native scheme needs asserting. ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
}

/* Deliberate light<->dark cross-fade (JS adds .theme-transition briefly). */
:root.theme-transition,
:root.theme-transition *,
:root.theme-transition *::before,
:root.theme-transition *::after {
  transition: background-color 320ms ease, border-color 320ms ease,
    color 320ms ease, fill 320ms ease, box-shadow 320ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  :root.theme-transition,
  :root.theme-transition *,
  :root.theme-transition *::before,
  :root.theme-transition *::after {
    transition: none !important;
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--bg);
  /* A soft accent aura anchored top-center gives the ground depth and pulls the
     eye toward the headline. Token-driven so it re-themes with light/dark. */
  background-image:
    radial-gradient(130% 90% at 50% -10%, var(--accent-soft) 0%, transparent 58%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
p,
dl,
dd {
  margin: 0;
}

button {
  font-family: inherit;
}

input,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden {
  display: none !important;
}

/* ==========================================================================
   Theme toggle — floating control
   ========================================================================== */

.theme-toggle {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  color: var(--muted);
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.theme-toggle:active {
  transform: scale(0.94);
}

.theme-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Show only the icon matching the current resolved theme. */
.theme-toggle .icon {
  display: none;
}
:root:not([data-theme]) .theme-toggle .icon-system { display: block; }
:root[data-theme="light"] .theme-toggle .icon-light { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-dark { display: block; }

/* ==========================================================================
   Layout
   ========================================================================== */

.page {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.1rem, 5vw, 2rem) 4rem;
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  margin-bottom: var(--space-6);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pop);
  box-shadow: 0 0 0 0 var(--pop-glow);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--pop-glow); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow::before { animation: none; }
}

.site-title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--text);
  max-width: 16ch;
}

.site-title em {
  font-style: normal;
  color: var(--accent);
}

.site-subtitle {
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  max-width: 46ch;
}

/* ==========================================================================
   Presets
   ========================================================================== */

.presets {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.presets-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.presets-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.preset-chip {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.42rem 0.85rem;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease,
    background-color 140ms ease, transform 140ms ease;
}

.preset-chip:hover {
  border-color: var(--accent-dim);
  color: var(--accent-bright);
  background: var(--accent-soft);
}

.preset-chip:active {
  transform: translateY(1px);
}

/* ==========================================================================
   Card + form
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.3rem, 4vw, 1.9rem);
  box-shadow: var(--shadow-2);
}

#calculator-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.field label,
.compare-block-label,
.checkbox-field > span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 9rem;
  gap: var(--space-4);
}

.field-currency {
  min-width: 0;
}

input[type="text"],
input[type="number"],
input[type="date"],
select {
  width: 100%;
  padding: 0.72rem 0.85rem;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

input::placeholder {
  color: var(--faint);
}

/* Numeric/data inputs read as data — mono, tabular */
#amount-input,
#ticker-input,
input[type="date"],
.compare-row-input {
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
  cursor: pointer;
}

input:hover:not(:focus-visible),
select:hover:not(:focus-visible) {
  border-color: var(--muted);
}

input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary {
  appearance: none;
  border: none;
  border-radius: var(--r-sm);
  background: var(--pop);
  color: var(--pop-ink);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.9rem 1.2rem;
  cursor: pointer;
  box-shadow: 0 8px 26px -10px var(--pop-glow);
  transition: background-color 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.btn-primary:hover {
  background: var(--pop-bright);
  box-shadow: 0 12px 32px -10px var(--pop-glow);
}

.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 6px 18px -10px var(--pop-glow);
}

.btn-secondary {
  appearance: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 0.62rem 1rem;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease,
    background-color 140ms ease, transform 120ms ease;
}

.btn-secondary:hover {
  border-color: var(--accent-dim);
  color: var(--accent-bright);
}

.btn-secondary:active {
  transform: translateY(1px);
}

/* ==========================================================================
   Combobox + suggestions
   ========================================================================== */

.combobox {
  position: relative;
}

.suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  max-height: 16rem;
  overflow-y: auto;
}

.suggestions li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.suggestions li:last-child {
  border-bottom: none;
}

.suggestions li:hover,
.suggestions li[aria-selected="true"] {
  background: var(--accent-soft);
}

.suggestions .suggestion-symbol {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  letter-spacing: 0.02em;
}

.suggestions .suggestion-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

/* ==========================================================================
   Compare block
   ========================================================================== */

.compare-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-2) 60%, transparent);
}

.compare-block-label {
  margin-bottom: 0.1rem;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.checkbox-field > span {
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: 0.95rem;
}

.checkbox-field input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.compare-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.compare-list:empty {
  display: none;
}

.compare-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.compare-row .combobox {
  flex: 1;
}

.compare-row-remove {
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}

.compare-row-remove:hover {
  color: var(--loss);
  border-color: var(--loss);
}

.btn-add-compare {
  align-self: flex-start;
}

.compare-cap-hint {
  font-family: var(--font-mono);
  font-size: 0.72rem !important;
  color: var(--faint) !important;
}

/* ==========================================================================
   Loading skeleton
   ========================================================================== */

.loading {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(1.3rem, 4vw, 1.9rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--r-sm);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}

.skeleton-headline { height: 3rem; width: 62%; }
.skeleton-line { height: 1rem; width: 100%; }
.skeleton-line-short { width: 45%; }
.skeleton-chart { height: 10rem; margin-top: var(--space-3); }

/* ==========================================================================
   Notices & errors
   ========================================================================== */

.notice,
.error {
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  font-size: 0.9rem;
  border: 1px solid transparent;
}

.notice {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
}

.error {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

/* ==========================================================================
   Result — the "Payoff" moment
   ========================================================================== */

.result {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(1.5rem, 5vw, 2.4rem);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--accent-soft) 0%, transparent 60%),
    var(--surface);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

/* A thin accent seam across the very top of the payoff panel. */
.result::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--pop), transparent);
}

.result.is-loss::before {
  background: linear-gradient(90deg, transparent, var(--loss), transparent);
}

.result:not(.hidden) {
  animation: result-in 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes result-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .result:not(.hidden) { animation: none; }
}

.result-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The hero number. Bright by default; tinted by gain/loss when JS marks the
   result. Tabular so a live count-up doesn't jitter the width. */
.headline {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.9rem, 12vw, 5.25rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin-top: 0.35rem;
  word-break: break-word;
}

.result.is-gain .headline { color: var(--headline-gain); }
.result.is-loss .headline { color: var(--loss); }

.breakdown {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Stat readout — a single terminal-style row, not three equal cards. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  overflow: hidden;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  border-left: 1px solid var(--border);
}

.stat:first-child {
  border-left: none;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.stat-value {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 3.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.is-gain { color: var(--gain); }
.is-loss { color: var(--loss); }

.summary {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ==========================================================================
   Chart
   ========================================================================== */

.chart {
  position: relative;
  width: 100%;
  padding: var(--space-4) var(--space-3) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background:
    linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 100% 25% ,
    var(--surface-2);
  background-repeat: repeat-y;
}

.chart svg {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

.chart-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 8px var(--accent-glow));
}

.chart-baseline {
  stroke: var(--border-strong);
  stroke-width: 1;
}

.chart-guide {
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.chart-dot {
  stroke: var(--surface);
  stroke-width: 2;
}

.chart-overlay {
  fill: transparent;
  cursor: crosshair;
}

.chart-tooltip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-pop);
  padding: 0.5rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text);
  white-space: nowrap;
}

.chart-tooltip-date {
  font-size: 0.68rem;
  color: var(--faint);
  margin-bottom: 0.35rem;
}

.chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.chart-tooltip-row + .chart-tooltip-row {
  margin-top: 0.2rem;
}

.chart-tooltip-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

.chart-tooltip-label {
  color: var(--muted);
  margin-right: auto;
}

.chart-tooltip-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.chart-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.chart-legend-label {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Verdict + regret
   ========================================================================== */

.verdict {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  letter-spacing: -0.01em;
  color: var(--text);
}

.verdict.is-gain { color: var(--gain); }
.verdict.is-loss { color: var(--loss); }

.regret {
  display: flex;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
}

.regret::before {
  content: "◆";
  color: var(--accent);
  flex-shrink: 0;
}

/* ==========================================================================
   Ranked results table
   ========================================================================== */

.ranked-results:empty {
  display: none;
}

.ranked-results {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.ranked-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.ranked-table th,
.ranked-table td {
  padding: 0.7rem 0.85rem;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--border);
}

.ranked-table th:first-child,
.ranked-table td:first-child,
.ranked-table th:nth-child(2),
.ranked-table td:nth-child(2) {
  text-align: left;
}

.ranked-table th {
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
  background: var(--surface-2);
}

.ranked-table tbody td {
  color: var(--muted);
}

.ranked-table tbody td:nth-child(2) {
  color: var(--text);
  font-weight: 600;
}

.ranked-table tr:last-child td {
  border-bottom: none;
}

.ranked-table tr.rank-1 td {
  background: var(--accent-soft);
  color: var(--text);
}

.ranked-table tr.rank-1 td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ==========================================================================
   Share bar
   ========================================================================== */

.share-bar {
  display: flex;
  gap: var(--space-3);
}

.share-bar .btn-secondary {
  flex: 1;
  text-align: center;
  padding: 0.8rem 1rem;
  font-size: 0.85rem;
}

/* ==========================================================================
   Toast
   ========================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 100;
  background: var(--pop);
  color: var(--pop-ink);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-pop);
}

.toast:not(.hidden) {
  animation: toast-in 200ms ease-out;
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .toast:not(.hidden) { animation: none; }
}

/* ==========================================================================
   Disclaimer
   ========================================================================== */

.disclaimer {
  margin-top: var(--space-6);
  text-align: center;
  color: var(--faint);
  font-size: 0.8rem;
  line-height: 1.6;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.disclaimer strong {
  color: var(--muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 480px) {
  .field-row {
    grid-template-columns: 1fr;
  }

  .field-currency {
    min-width: 0;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .stat {
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .stat:first-child {
    border-top: none;
  }

  .share-bar {
    flex-direction: column;
  }

  .ranked-table {
    font-size: 0.78rem;
  }

  .ranked-table th,
  .ranked-table td {
    padding: 0.55rem 0.6rem;
  }
}

/* ==========================================================================
   Accessibility — transparency & contrast preferences
   ========================================================================== */

@media (prefers-reduced-transparency: reduce) {
  .theme-toggle,
  .suggestions {
    background: var(--surface-3);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .theme-toggle,
  .suggestions {
    background: var(--surface-3);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .card,
  .result,
  .compare-block,
  .compare-row,
  .notice,
  .error,
  .theme-toggle,
  input[type="text"],
  input[type="number"],
  input[type="date"],
  select {
    border-color: var(--text);
  }

  input:focus-visible,
  select:focus-visible,
  button:focus-visible {
    box-shadow: 0 0 0 3px var(--accent);
  }
}