/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   Light palette lives on :root (the default / "auto" state).
   Dark auto-mode overrides are in the prefers-color-scheme block.
   Named themes (Terminal, LCARS, Linux Man) use [data-theme="…"].
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Typography */
  --font-ui:   system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Courier New', monospace;

  /* Light palette */
  --bg:          #ffffff;
  --text:        #0b0b0b;
  --text-muted:  #777777;
  --border:      rgba(136, 136, 136, 0.27);
  --error:       #d33;
  --link:        #0055cc;

  color-scheme: light dark;
  font-family: var(--font-ui);
}

/* Auto dark (OS-level preference, no explicit theme chosen) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:         #1a1a19;
    --text:       #e8e8e4;
    --text-muted: #898781;
    --border:     rgba(255, 255, 255, 0.20);
    --error:      #f66;
    --link:       #6699ff;
    color-scheme: dark;
  }
}

/* ── Terminal ─────────────────────────────────────────────────── */
:root[data-theme="terminal"] {
  --bg:         #0d0d0d;
  --text:       #00ff41;
  --text-muted: #009926;
  --border:     #00cc33;
  --error:      #ff3333;
  --link:       #00ff41;
  --font-ui:    ui-monospace, 'Cascadia Code', 'Courier New', monospace;
  color-scheme: dark;
}

/* ── Linux Man ────────────────────────────────────────────────── */
:root[data-theme="linux-man"] {
  --bg:         #000000;
  --text:       #d0d0d0;
  --text-muted: #888888;
  --border:     #444444;
  --error:      #ff6666;
  --link:       #aaaaff;
  --font-ui:    ui-monospace, 'Cascadia Code', 'Courier New', monospace;
  color-scheme: dark;
}

/* ── LCARS ────────────────────────────────────────────────────── */
:root[data-theme="lcars"] {
  --bg:         #000000;
  --text:       #ff9900;
  --text-muted: #cc6600;
  --border:     #cc6600;
  --error:      #ff4444;
  --link:       #cc99ff;
  --font-ui:    'Arial Narrow', Arial, 'Helvetica Neue', sans-serif;
  color-scheme: dark;
}


/* ═══════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════ */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.4;
  margin: 0;
}

a {
  color: var(--link);
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem;
}

form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}

fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  /* Prevent the fieldset from overflowing its grid track when monospace
     font makes legend text wider than the column. Grid items default to
     min-width: auto, which resolves to min-content — overriding it to 0
     lets the item shrink to fit its track instead of spilling into the next. */
  min-width: 0;
}

legend {
  /* Allow long legend text ("Pre-tax deductions (per paycheck)") to wrap
     rather than force the fieldset wider than its grid track. */
  overflow-wrap: break-word;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.9rem;
}

label[hidden] {
  display: none;
}

.radio-row {
  display: flex;
  gap: 1rem;
}

.radio-row label {
  flex-direction: row;
  align-items: center;
}

input, select {
  font: inherit;
  padding: 0.35rem;
}

input[aria-invalid="true"] {
  outline: 2px solid var(--error);
}

.error {
  grid-column: 1 / -1;
  color: var(--error);
  margin: 0;
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

#shareStatus {
  color: var(--text-muted);
  font-size: 0.9rem;
}

#shareUrl {
  flex: 1 1 16rem;
}

#shareUrl[hidden] {
  display: none;
}

button {
  font: inherit;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
}

/* Fixed height reserved up front so a loading ad doesn't shift the results. */
.ad-slot {
  min-height: 280px;
  margin: 1.5rem 0;
}

.ad-slot[hidden] {
  display: none;
}

.site-footer {
  max-width: 44rem;
  margin: 2rem auto 1rem;
  padding: 1rem;
  border-top: 1px solid var(--border);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.9rem;
}

/* Article pages (how it works, about, privacy). */
.prose h2 {
  margin-top: 2rem;
}

.prose li {
  margin-bottom: 0.4rem;
}

.hint {
  color: var(--text-muted);
  font-size: 0.85rem;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 0.4rem;
  border-bottom: 1px solid var(--border);
  text-align: right;
}

th:first-child, td:first-child {
  text-align: left;
}

tr.net td {
  font-weight: bold;
  border-top: 2px solid var(--border);
}


/* ═══════════════════════════════════════════════════════════════
   CHART / VIZ
   Slice colors are validated for every adjacent pair in both
   light and dark modes (dataviz validate_palette.js).
   ═══════════════════════════════════════════════════════════════ */

.viz-root {
  --surface-1:      #fcfcfb;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --border:         rgba(11, 11, 11, 0.10);
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --slice-takehome: #2a78d6;
  --slice-federal:  #1baf7a;
  --slice-fica:     #eda100;
  --slice-state:    #e87ba4;
  --slice-pretax:   #008300;
}

@media (prefers-color-scheme: dark) {
  .viz-root {
    --surface-1:      #1a1a19;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --border:         rgba(255, 255, 255, 0.10);
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --slice-takehome: #3987e5;
    --slice-federal:  #199e70;
    --slice-fica:     #c98500;
    --slice-state:    #d55181;
    --slice-pretax:   #008300;
  }
}

/* Terminal chart */
[data-theme="terminal"] .viz-root {
  --surface-1:      #0a1a0a;
  --text-primary:   #00ff41;
  --text-secondary: #00cc33;
  --border:         rgba(0, 204, 51, 0.30);
  --text-muted:     #009926;
  --gridline:       #0d2210;
  --slice-takehome: #00ff41;
  --slice-federal:  #33ccff;
  --slice-fica:     #ffcc00;
  --slice-state:    #ff66aa;
  --slice-pretax:   #aa44ff;
}

/* Linux Man chart */
[data-theme="linux-man"] .viz-root {
  --surface-1:      #111111;
  --text-primary:   #e0e0e0;
  --text-secondary: #aaaaaa;
  --border:         rgba(255, 255, 255, 0.15);
  --text-muted:     #888888;
  --gridline:       #2a2a2a;
  --slice-takehome: #5599ff;
  --slice-federal:  #44cc88;
  --slice-fica:     #ffaa33;
  --slice-state:    #ff6699;
  --slice-pretax:   #aa77ff;
}

/* LCARS chart.
   Adjacent-pair hue spread (pie/doughnut order):
   orange → hot-pink → cyan → gold → mint → back to orange.
   Every neighbour pair is a large hue jump so slices read clearly
   against the dark #05050f surface. */
[data-theme="lcars"] .viz-root {
  --surface-1:      #05050f;
  --text-primary:   #ff9900;
  --text-secondary: #cc99ff;
  --border:         rgba(255, 153, 0, 0.30);
  --text-muted:     #cc6600;
  --gridline:       #111128;
  --slice-takehome: #ff9900;   /* orange */
  --slice-federal:  #ff3366;   /* hot-pink  — was lavender, now clearly distinct */
  --slice-fica:     #33ccff;   /* bright cyan — was pale blue, now clearly distinct */
  --slice-state:    #ffcc33;   /* gold — moved off red to avoid clash with federal */
  --slice-pretax:   #66ffaa;   /* mint green */
}

#chart {
  position: relative;
  margin: 1rem 0 0;
  padding: 1rem;
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
}

#chart figcaption {
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.chart-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

.chart-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.chart-header figcaption {
  margin-bottom: 0;
}

.chart-type {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
}

.canvas-wrap {
  position: relative;
  width: 18rem;
  height: 16rem;
  max-width: 100%;
  flex: none;
}

/* Horizontal bars need width for category labels; legend wraps below. */
#chart[data-type="bar"] .canvas-wrap {
  width: 100%;
  height: 14rem;
}

#chart[data-type="stacked"] .canvas-wrap {
  width: 100%;
  height: 6rem;
}

.legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.4rem 0.75rem;
  align-items: center;
  font-size: 0.9rem;
}

.legend li {
  display: contents;
}

.legend .swatch {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 2px;
}

.legend .value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.legend .share {
  text-align: right;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════
   THEME SWITCHER BUTTON
   Fixed top-right, styled per theme.
   ═══════════════════════════════════════════════════════════════ */

#theme-switcher {
  position: fixed;
  top: 0.75rem;
  right: 1rem;
  z-index: 100;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font: 0.78rem / 1 var(--font-ui);
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.12s, border-color 0.12s;
}

#theme-switcher:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

#theme-switcher:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Terminal: shell-prompt prefix */
[data-theme="terminal"] #theme-switcher {
  border-color: #009926;
  color: #009926;
  letter-spacing: 0.03em;
}

[data-theme="terminal"] #theme-switcher::before {
  content: '$ ';
  opacity: 0.6;
}

[data-theme="terminal"] #theme-switcher:hover {
  border-color: #00cc33;
  color: #00ff41;
}

/* Linux Man: man-header style */
[data-theme="linux-man"] #theme-switcher {
  border-color: #444;
  color: #888;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

[data-theme="linux-man"] #theme-switcher:hover {
  color: #e0e0e0;
  border-color: #888;
}

/* LCARS: orange pill */
[data-theme="lcars"] #theme-switcher {
  background: #ff9900;
  color: #000000;
  border: none;
  border-radius: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  padding: 0.35rem 1rem;
}

[data-theme="lcars"] #theme-switcher:hover {
  background: #ffb300;
  color: #000000;
}


/* ═══════════════════════════════════════════════════════════════
   TERMINAL THEME OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

[data-theme="terminal"] fieldset {
  border-color: #00cc33;
}

[data-theme="terminal"] legend {
  color: #00ff41;
}

[data-theme="terminal"] input,
[data-theme="terminal"] select {
  background: #051005;
  color: #00ff41;
  border: 1px solid #00cc33;
  border-radius: 2px;
}

[data-theme="terminal"] button {
  background: transparent;
  border: 1px solid #00cc33;
  color: #00ff41;
  border-radius: 2px;
}

[data-theme="terminal"] button:hover {
  background: #00cc33;
  color: #000000;
}

[data-theme="terminal"] input[aria-invalid="true"] {
  outline-color: var(--error);
  border-color: var(--error);
}


/* ═══════════════════════════════════════════════════════════════
   LINUX MAN THEME OVERRIDES
   Mimics man(1) output in a terminal pager.
   ═══════════════════════════════════════════════════════════════ */

[data-theme="linux-man"] main {
  max-width: 80ch;
}

[data-theme="linux-man"] h1,
[data-theme="linux-man"] h2 {
  text-transform: uppercase;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.04em;
}

[data-theme="linux-man"] h1 {
  font-size: 1rem;
}

[data-theme="linux-man"] h2 {
  font-size: 0.95rem;
}

[data-theme="linux-man"] legend {
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

[data-theme="linux-man"] strong {
  color: #ffffff;
}

[data-theme="linux-man"] input,
[data-theme="linux-man"] select {
  background: #0a0a0a;
  color: #d0d0d0;
  border: 1px solid #444;
}

[data-theme="linux-man"] button {
  background: #1a1a1a;
  border: 1px solid #555;
  color: #d0d0d0;
}

[data-theme="linux-man"] button:hover {
  background: #2a2a2a;
  border-color: #888;
}


/* ═══════════════════════════════════════════════════════════════
   LCARS THEME OVERRIDES
   Star Trek: TNG computer interface aesthetic.
   ═══════════════════════════════════════════════════════════════ */

/* Decorative left-edge panel (LCARS side column) */
[data-theme="lcars"] body::before {
  content: '';
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.55rem;
  background: linear-gradient(
    to bottom,
    #ff9900  0%,   #ff9900  45%,
    #cc99ff  45%,  #cc99ff  65%,
    #9966cc  65%,  #9966cc  82%,
    #ff6600  82%,  #ff6600 100%
  );
  pointer-events: none;
  z-index: 200;
}

[data-theme="lcars"] main,
[data-theme="lcars"] .site-footer {
  padding-left: 1.5rem;
}

[data-theme="lcars"] h1 {
  color: #cc99ff;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 1.6rem;
  font-weight: 700;
}

[data-theme="lcars"] h2 {
  color: #cc99ff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

[data-theme="lcars"] fieldset {
  border: 2px solid #ff9900;
  border-radius: 0 0.75rem 0.75rem 0.75rem;
  background: #05050f;
  gap: 0.7rem;
}

[data-theme="lcars"] legend {
  background: #ff9900;
  color: #000000;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  padding: 0.2rem 0.75rem;
  border-radius: 0.3rem;
  line-height: 1.4;
}

[data-theme="lcars"] input,
[data-theme="lcars"] select {
  background: #0a0520;
  color: #ff9900;
  border: 1px solid #cc6600;
  border-radius: 0;
  caret-color: #ff9900;
}

[data-theme="lcars"] input:focus,
[data-theme="lcars"] select:focus {
  outline-color: #ff9900;
}

[data-theme="lcars"] input[aria-invalid="true"] {
  border-color: var(--error);
  outline-color: var(--error);
}

[data-theme="lcars"] button {
  background: #ff9900;
  color: #000000;
  border: none;
  border-radius: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  padding: 0.4rem 1.2rem;
}

[data-theme="lcars"] button:hover {
  background: #ffb300;
}

/* "Copy share link" uses the LCARS purple accent instead of orange. */
[data-theme="lcars"] #share {
  background: #cc99ff;
  color: #000000;
}

[data-theme="lcars"] #share:hover {
  background: #d9b3ff;
}

[data-theme="lcars"] th {
  color: #cc99ff;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.07em;
}

[data-theme="lcars"] tr.net td {
  color: #ff9900;
  border-top-color: #ff6600;
}

[data-theme="lcars"] .site-footer {
  border-top-color: #cc6600;
}

[data-theme="lcars"] .site-footer nav a {
  color: #cc99ff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

[data-theme="lcars"] .site-footer nav a:hover {
  color: #ffffff;
}