/* Skins: alternative looks selected from the footer (assets/skin.js sets
   html[data-skin]). The default look ("AI Slop") is styles.css itself. Each
   skin redefines the tokens, then restyles the few components tokens can't. */

@font-face { font-family: 'Source Sans 3'; src: url('fonts/source-sans-3-latin.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('fonts/nunito-sans-latin.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Audiowide'; src: url('fonts/audiowide-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'VT323'; src: url('fonts/vt323-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------------- Skin picker, top right (all skins) ---------------- */

.skin-picker { display: inline-flex; align-items: center; flex: none; }
.skin-picker select { min-height: 2.75rem; padding: 0 var(--s-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--input); color: var(--text); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.skin-picker select:hover { border-color: var(--line-3); }
.skin-picker select:focus-visible { outline: none; box-shadow: var(--focus); }
@media (max-width: 40rem) {
  .skin-picker { margin-left: auto; }
  .header-link:not([hidden]) + .skin-picker { margin-left: 0; }
}

/* =====================================================================
   Tufte: warm paper, ink, two data colours (red = the value, slate = the
   good range), one humanist sans, no radius, no shadow, rules not boxes.
   ===================================================================== */

:root[data-skin="tufte"] {
  color-scheme: light;
  --bg: #fbfaf6; --bg-deep: #fbfaf6;
  --surface: #fbfaf6; --surface-2: #f1eee5; --surface-3: #f6f4ee;
  --input: #fbfaf6; --input-focus: #fffefb;
  --line: #d8d2c2; --line-2: #cbc3af; --line-3: #8a8274;
  --text: #1b1b1a; --text-2: #34322e; --muted: #5c5550; --muted-2: #6c655d;
  --accent: #3e4a5c; --accent-2: #3e4a5c; --lime: #a6300e;
  --teal: #2f5a4c; --gold: #7d5300; --danger: #a6300e; --on-accent: #fbfaf6;
  --teal-bg: transparent; --teal-line: #b7c4bd; --gold-bg: transparent; --gold-line: #d9c48f; --danger-bg: transparent; --danger-line: #dfb3a5;
  --header-bg: #fbfaf6; --rule: #d8d2c2; --accent-wash: rgba(166, 48, 14, .06);
  --wash: transparent; --overlay: rgba(251, 250, 246, .97); --row-hover: #f1eee5;
  --gauge-1: #e3ded1; --gauge-2: #cbc3af;
  --globe-sea: #f6f4ee; --globe-land: #e3ded1; --globe-grat: rgba(27, 27, 26, .12); --globe-reach: #3e4a5c; --globe-dot: #3e4a5c; --globe-far: #d8d2c2; --globe-hot: #a6300e; --globe-ink: #1b1b1a;
  --gold-text: #5f4100; --danger-text: #7a2208; --pulse: rgba(166, 48, 14, .3); --pulse-0: rgba(166, 48, 14, 0);
  --grad-action: #1b1b1a; --grad-result: transparent; --grad-bad: transparent;
  --glow-1: none; --glow-2: none;
  --font: 'Source Sans 3', 'Gill Sans', 'Segoe UI', sans-serif;
  --r-sm: 0; --r-md: 0; --r-lg: 0; --r-pill: 0;
  --focus: 0 0 0 2px #1b1b1a;
  --shadow: none;
}

[data-skin="tufte"] .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: var(--text); }
[data-skin="tufte"] .wordmark { font-weight: 600; letter-spacing: .01em; }
[data-skin="tufte"] .wordmark__dot { display: none; }
[data-skin="tufte"] .tabs { padding: 0; border: 0; background: none; gap: var(--s-4); }
[data-skin="tufte"] .tab { padding: 0 var(--s-1); font-weight: 600; color: var(--muted); }
[data-skin="tufte"] .tab[aria-selected="true"] { background: none; color: var(--text); box-shadow: inset 0 -1px 0 var(--text); }

[data-skin="tufte"] .intro__title { font-weight: 600; letter-spacing: -.01em; }
[data-skin="tufte"] .intro__title .accent { color: var(--text); font-weight: 400; }


[data-skin="tufte"] .input { border-width: 0 0 1px; background: transparent; font-weight: 400; padding-left: 0; }
[data-skin="tufte"] .input:focus { box-shadow: none; border-color: var(--text); }
[data-skin="tufte"] .field__control--suffix .input { padding-right: 3rem; }
[data-skin="tufte"] .field__suffix { right: 0; }
[data-skin="tufte"] .segmented__options { background: none; border-color: var(--line-2); }
[data-skin="tufte"] .segmented__option input:checked + span { background: var(--text); color: var(--bg); box-shadow: none; }

/* boxes become rules */
[data-skin="tufte"] :is(.verdict, .breakdown, .handoff, .threshold, .notice, .more, .alternatives, .sources, .cmp-filter, .table-wrap, .cmp-table-wrap, .wallet) {
  border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none;
}
[data-skin="tufte"] :is(.verdict, .breakdown, .handoff, .threshold, .notice) { padding-inline: 0; }
[data-skin="tufte"] .verdict { border-top-color: var(--text); }
[data-skin="tufte"] .empty { border: 0; border-left: 1px solid var(--line-2); border-radius: 0; background: none; }
[data-skin="tufte"] .verdict__headline { font-weight: 400; letter-spacing: 0; font-size: var(--fs-xl); }
[data-skin="tufte"] .verdict__headline strong { font-weight: 600; }
[data-skin="tufte"] .big-number__value { font-weight: 400; letter-spacing: 0; font-variant-numeric: lining-nums; color: var(--lime); }
[data-skin="tufte"] .verdict__badge { padding: 0; background: none !important; box-shadow: none !important; font-weight: 600; }
[data-skin="tufte"] .verdict__badge--excellent { color: var(--lime); }
[data-skin="tufte"] .pill { padding: 0; border: 0; background: none; }
[data-skin="tufte"] .pill--gain { color: var(--lime); background: none; }
[data-skin="tufte"] .breakdown__row dd, [data-skin="tufte"] .cmp-table__num strong { font-weight: 600; }

/* gauge: a thin graduated rule, the reading as a red dot */
[data-skin="tufte"] .gauge__track { height: 3px; gap: 0; }
[data-skin="tufte"] .gauge__seg { border-radius: 0 !important; background: var(--line) !important; }
[data-skin="tufte"] .gauge__seg:nth-child(3), [data-skin="tufte"] .gauge__seg:nth-child(4) { background: var(--accent) !important; }
[data-skin="tufte"] .gauge__marker { width: .75rem; height: .75rem; border: 0; background: var(--lime); box-shadow: 0 0 0 3px var(--bg); }

[data-skin="tufte"] .btn--primary:hover { transform: none; filter: none; background: #000; }
[data-skin="tufte"] .btn--ghost { border-color: var(--text); color: var(--text); }
[data-skin="tufte"] .source-chip { background: none; }
[data-skin="tufte"] .source-chip[aria-checked="true"] { background: none; border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
[data-skin="tufte"] .chip[aria-checked="true"], [data-skin="tufte"] .chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
[data-skin="tufte"] .route-path__node { background: none; border-color: var(--line-2); }
[data-skin="tufte"] .route-path__node--end { border-color: var(--lime); }
[data-skin="tufte"] .alogo { box-shadow: inset 0 0 0 1px var(--line); }
[data-skin="tufte"] .alogo--code { background: var(--bg); }
[data-skin="tufte"] .combobox__list { box-shadow: 0 0 0 1px var(--text); }
[data-skin="tufte"] .verdict-bar__button { background: var(--text); color: var(--bg); }
[data-skin="tufte"] .dates-today strong { color: var(--text); font-weight: 600; }
[data-skin="tufte"] .dates-table__date { font-weight: 600; }
[data-skin="tufte"] .dates-list { background: none; }

/* =====================================================================
   Y2K night: navy void, cyan / pink orbs, chrome headings, LCD readout,
   jelly cyan buttons, acid green for the live value and the current tab.
   ===================================================================== */

:root[data-skin="y2k"] {
  --bg: #050a22; --bg-deep: #03061a;
  --surface: #0b1640; --surface-2: #102054; --surface-3: #0a1438;
  --input: #0a1a4f; --input-focus: #0c1f5c;
  --line: #1f2b5c; --line-2: #2a3a78; --line-3: #4a5ca8;
  --text: #e9eef8; --text-2: #c3cde3; --muted: #9eabcb; --muted-2: #8b98ba;
  --accent: #5fc9f8; --accent-2: #8fdcff; --lime: #b8ff3c;
  --teal: #5fc9f8; --gold: #ffd34d; --danger: #ff6b98; --on-accent: #062a5c;
  --teal-bg: #0b2552; --teal-line: #2a6fa8; --gold-bg: #2a2410; --gold-line: #6b5a1f; --danger-bg: #2b0f24; --danger-line: #8a2a5a;
  --header-bg: rgba(5, 10, 34, .86); --rule: #1f2b5c; --accent-wash: rgba(95, 201, 248, .12);
  --wash: rgba(10, 20, 56, .6); --overlay: rgba(5, 10, 34, .94); --row-hover: #102054;
  --gauge-1: #1d2a5e; --gauge-2: #7a63e8;
  --globe-sea: #0a1a4f; --globe-land: #1d3277; --globe-grat: rgba(169, 194, 220, .1); --globe-reach: #5fc9f8; --globe-dot: #b8ff3c; --globe-far: rgba(169, 194, 220, .18); --globe-hot: #ff3fa4; --globe-ink: #e9eef8;
  --gold-text: #ffe9a6; --danger-text: #ffd0e0; --pulse: rgba(184, 255, 60, .7); --pulse-0: rgba(184, 255, 60, 0);
  --grad-action: linear-gradient(180deg, #b4ebff 0%, #5fc9f8 52%, #2aa6e0 100%);
  --grad-result: linear-gradient(180deg, #0d2163, #0a1a4f);
  --grad-bad: linear-gradient(180deg, #2b0f3a, #0a1a4f);
  --glow-1: radial-gradient(circle at 6% 32%, rgba(42, 166, 224, .42), transparent 22%);
  --glow-2: radial-gradient(circle at 96% 78%, rgba(224, 53, 159, .40), transparent 24%);
  --font: 'Nunito Sans', 'Avenir Next', 'Trebuchet MS', sans-serif;
  --font-tech: 'Audiowide', 'Eurostile', 'Arial Black', sans-serif;
  --font-lcd: 'VT323', 'Courier New', monospace;
  --pink: #ff3fa4;
  --r-sm: .75rem; --r-md: 1rem; --r-lg: 1.5rem;
  --focus: 0 0 0 3px rgba(95, 201, 248, .6);
  --shadow: 0 18px 40px rgba(95, 201, 248, .14);
}

[data-skin="y2k"] :is(.wordmark, .tab, .intro__title, .verdict__headline, .dest-summary__count, .breakdown__title, .handoff__text strong, .method__summary, .dates-today strong) { font-family: var(--font-tech); font-weight: 400; letter-spacing: .01em; }
[data-skin="y2k"] .wordmark { font-size: var(--fs-md); }
[data-skin="y2k"] .wordmark__dot { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
[data-skin="y2k"] .tab { font-size: var(--fs-xs); }
[data-skin="y2k"] .tab[aria-selected="true"] { background: var(--grad-action); color: var(--on-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 14px rgba(95, 201, 248, .45); }

/* chrome headings */
[data-skin="y2k"] .intro__title { color: #bcd0e4; text-shadow: 0 1px 0 #eaf3fb, 0 -1px 0 #5f7690, 0 2px 0 #4c6079, 0 0 22px rgba(95, 201, 248, .35); }
[data-skin="y2k"] .intro__title .accent { color: var(--pink); text-shadow: 0 0 18px rgba(255, 63, 164, .55); }

[data-skin="y2k"] .input { border-radius: var(--r-pill); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45); }
[data-skin="y2k"] .input:focus { border-color: var(--accent); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), var(--focus); }
[data-skin="y2k"] .segmented__options { border-radius: var(--r-pill); }
[data-skin="y2k"] .segmented__option span { border-radius: var(--r-pill); }
[data-skin="y2k"] .segmented__option input:checked + span { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent), 0 0 12px rgba(95, 201, 248, .25); }

/* the verdict is an LCD screen */
[data-skin="y2k"] .verdict { border-color: var(--line-2); box-shadow: inset 0 2px 12px rgba(0, 0, 0, .55), var(--shadow); }
[data-skin="y2k"] .verdict__headline strong { color: var(--pink); text-shadow: 0 0 14px rgba(255, 63, 164, .45); }
[data-skin="y2k"] .big-number__value { font-family: var(--font-lcd); font-weight: 400; font-size: calc(var(--fs-2xl) * 1.35); letter-spacing: .02em; color: var(--lime); text-shadow: 0 0 10px rgba(184, 255, 60, .55); }
[data-skin="y2k"] .big-number__unit { font-family: var(--font-lcd); font-size: var(--fs-lg); color: var(--accent); font-weight: 400; }
[data-skin="y2k"] .verdict__badge--excellent { background: radial-gradient(circle at 35% 30%, #eaffb0, var(--lime) 55%, #6fd41a); box-shadow: 0 0 14px rgba(184, 255, 60, .5); }
[data-skin="y2k"] .gauge__seg:nth-child(3) { background: linear-gradient(90deg, #7a63e8, var(--pink)); }
[data-skin="y2k"] .gauge__seg:nth-child(4) { background: linear-gradient(90deg, var(--pink), var(--lime)); }
[data-skin="y2k"] .gauge__marker { background: radial-gradient(circle at 35% 30%, #fff, #dfe6ef 45%, #9aa6b6); border-color: var(--bg); box-shadow: 0 0 0 2px #c5ccd6, 0 2px 8px rgba(0, 0, 0, .5); }
[data-skin="y2k"] .gauge__labels { font-family: var(--font-lcd); font-size: var(--fs-sm); }

[data-skin="y2k"] .btn { border-radius: var(--r-pill); font-family: var(--font-tech); font-weight: 400; font-size: var(--fs-xs); letter-spacing: .02em; }
[data-skin="y2k"] .btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 0 16px rgba(95, 201, 248, .4); }
[data-skin="y2k"] .btn--ghost { border-color: #3a4a86; color: var(--text); }
[data-skin="y2k"] .pill--gain { background: var(--grad-action); }

/* chrome objects: program chips and route stations */
[data-skin="y2k"] :is(.source-chip, .route-path__node) { background: linear-gradient(180deg, #eef2f7, #c5ccd6); border-color: #8e98a8; box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(0, 0, 0, .35); }
[data-skin="y2k"] :is(.source-chip__name, .route-path__name) { color: #1b2440; }
[data-skin="y2k"] :is(.source-chip__kind, .route-path__amount) { color: #4a5672; }
[data-skin="y2k"] .source-chip[aria-checked="true"] { border-color: var(--lime); box-shadow: inset 0 1px 0 #fff, 0 0 0 2px var(--lime), 0 0 16px rgba(184, 255, 60, .45); }
[data-skin="y2k"] .route-path__node--end { border-color: var(--pink); box-shadow: inset 0 1px 0 #fff, 0 0 0 2px var(--pink), 0 0 16px rgba(255, 63, 164, .4); }
[data-skin="y2k"] .route-path__node--end .route-path__amount { color: #a3126a; }
[data-skin="y2k"] .route-path__link { color: var(--lime); font-family: var(--font-lcd); font-size: var(--fs-md); }

[data-skin="y2k"] .verdict-bar__button { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 18px rgba(95, 201, 248, .45); }
[data-skin="y2k"] .verdict-bar__value { font-family: var(--font-lcd); font-weight: 400; font-size: var(--fs-lg); }
[data-skin="y2k"] .dates-table__date { font-family: var(--font-lcd); font-weight: 400; font-size: var(--fs-md); color: var(--lime); }
[data-skin="y2k"] .dates-today strong { color: var(--lime); }

@media (max-width: 40rem) {
  [data-skin="y2k"] .tab { padding: 0 var(--s-1); font-size: .6875rem; letter-spacing: 0; }
}

[data-skin="tufte"] #globe { box-shadow: inset 0 0 0 1px var(--line-2); }
[data-skin="y2k"] #globe { box-shadow: 0 0 60px rgba(95, 201, 248, .25), inset 0 0 0 1px #2a3a78; }
[data-skin="y2k"] .explore-budget, [data-skin="y2k"] .explore-card__price { font-family: var(--font-lcd); font-weight: 400; color: var(--lime); text-shadow: 0 0 10px rgba(184, 255, 60, .5); font-size: calc(var(--fs-2xl) * 1.3); }
[data-skin="y2k"] .explore-card__title { font-family: var(--font-tech); font-weight: 400; }