/* Direction: Funnelmath — graph-paper cream, ink-black bands, electric cobalt, mono numerals */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f5f2ea;
  --surface: #fffefa;
  --surface-2: #ece8dc;
  --border: #d6d1c2;
  --border-strong: #adacad;
  --ink: #14161a;
  --muted: #5b5f68;
  --accent: #2a3de0;
  --accent-hover: #2434be;
  --accent-ink: #ffffff;
  --accent-text: #2332c4;
  --accent-strong: #2a3de0;
  --accent-soft: #d9d9e9;
  --accent-border: #9aa1e6;
  --success: #12794a;
  --success-ink: #ffffff;
  --success-soft: #dae3d7;
  --success-strong: #116f44;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #eddfcf;
  --warning-strong: #994607;
  --danger: #b4281f;
  --danger-ink: #ffffff;
  --danger-soft: #eddad2;
  --danger-strong: #b4281f;
  --chart-1: #2a3de0;
  --chart-2: #ba1eb9;
  --chart-3: #90130f;
  --chart-4: #886b12;
  --chart-5: #0b5d26;
  --chart-6: #1a808e;

  --x-band: #12141a;
  --x-on-photo: #f5f2ea;
  --x-lime: #c8f169;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --display-weight: 700;
  --display-tracking: -0.03em;
  --radius-card: 6px;
  --radius-btn: 6px;
  --radius-input: 6px;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #030510;
  --surface: #1c1e28;
  --surface-2: #10121c;
  --border: #262831;
  --border-strong: #4f5058;
  --ink: #f5f2ea;
  --muted: #949393;
  --accent: #2a3de0;
  --accent-hover: #4a5ae5;
  --accent-ink: #ffffff;
  --accent-text: #727fea;
  --accent-strong: #727fea;
  --accent-soft: #0c113e;
  --accent-border: #151e6e;
  --success: #12794a;
  --success-ink: #ffffff;
  --success-soft: #061f1d;
  --success-strong: #469771;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2a160e;
  --warning-strong: #c06e2f;
  --danger: #b4281f;
  --danger-ink: #ffffff;
  --danger-soft: #2a0d13;
  --danger-strong: #ca655e;
  --chart-1: #3b5afc;
  --chart-2: #d541d4;
  --chart-3: #ee0e13;
  --chart-4: #a5810e;
  --chart-5: #219945;
  --chart-6: #169bab;
}

.grid-paper {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
}
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: 1rem 1.1rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.stat:hover { transform: translateY(-2px); border-color: var(--accent); }
.stat .k { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.stat.hero-stat { border-color: var(--accent); border-width: 2px; }
.band .stat {
  background: color-mix(in srgb, var(--x-on-photo) 7%, transparent);
  border-color: color-mix(in srgb, var(--x-on-photo) 20%, transparent);
  color: var(--x-on-photo);
}
.band .stat:hover { border-color: var(--x-lime); }
.band .stat .k { color: color-mix(in srgb, var(--x-on-photo) 72%, transparent); }
.band .stat.hero-stat { border-color: var(--x-lime); }
.verdict { border-left: 4px solid var(--accent); padding: 0.75rem 1rem; background: var(--surface-2); border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.verdict[data-tone="good"] { border-color: var(--success); }
.verdict[data-tone="bad"] { border-color: var(--danger); }
.band .verdict { background: color-mix(in srgb, var(--x-on-photo) 10%, transparent); color: var(--x-on-photo); border-color: var(--x-lime); }
.band .verdict[data-tone="bad"] { border-color: var(--danger); }
.cur-addon, .suf-addon { position: absolute; top: 50%; transform: translateY(-50%); color: var(--muted); font-family: var(--font-mono); pointer-events: none; }
.cur-addon { left: 0.75rem; }
.suf-addon { right: 0.75rem; font-size: 0.85rem; }
.has-cur .input { padding-left: 3rem; }
.has-suf .input { padding-right: 2.6rem; }
.band .label { color: var(--x-on-photo); }
.flash { animation: flash 0.4s ease; }
@keyframes flash { from { transform: translateY(4px); } to { transform: none; } }
html.reduced-motion .flash { animation: none; }
html.reduced-motion .stat { transition: none; }