/* ==========================================================================
   spoiler-tokens.css — Boardroom Green token foundation
   ----------------------------------------------------------------------------
   Loaded AFTER spoiler.css so it overrides the legacy palette globally.
   - Introduces the Boardroom Green design tokens (pkg `spoiler-design-system`).
   - Aliases the legacy var names (--bg-dark, --blue, --orange, etc.) onto the
     new tokens so existing rules cascade through without per-rule rewrites.
   - Keeps Exo 2 — does NOT redefine `--font-body` away from the legacy font.
   - `[data-theme="light"]` flips honor pkg 1's light-mode spec.
   ========================================================================== */

:root {
  /* Surfaces — deep racing green (canonical dark) */
  --bg:         #15251E;
  --surface:    #1B2E26;
  --surface-2:  #223A30;
  --surface-3:  #2A4538;

  /* Ink — ivory, never pure white */
  --text:       #E8E2D2;
  --text-dim:   #B5B0A0;
  --text-mute:  #7E7A6E;

  /* Rules */
  --line:         rgba(232, 226, 210, 0.10);
  --line-strong:  rgba(232, 226, 210, 0.18);

  /* Accents — brick is the redline */
  --accent:       #9E4B3E;
  --accent-soft:  rgba(158, 75, 62, 0.12);
  --accent-hover: #B35848;

  /* Sage — secondary accent / info */
  --cool:         #7BA88C;
  --cool-soft:    rgba(123, 168, 140, 0.12);

  /* Semantic */
  --ok:           #7BA88C;
  --warn:         #C4A35B;
  --bad:          #C66B5E;

  --on-accent:    #F2ECDA;

  /* Shadows */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.40);

  /* Radii */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-pill:  999px;

  /* Spacing — 4px grid */
  --space-1:  4px;  --space-2:  8px;  --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10: 40px; --space-12: 48px;

  /* Type — Exo 2 retained per brand decision */
  --font-body:    'Exo 2', system-ui, sans-serif;
  --font-display: 'Exo 2', system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;
  --fs-4xl:  3rem;
  --fs-display: clamp(4rem, 10vw, 12rem);

  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.7;

  --ease-ui:  cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 0.12s;
  --dur-base: 0.20s;
  --dur-slow: 0.40s;

  /* Site chrome */
  --site-header-h: 84px;

  /* ----- Legacy alias overrides (dark) -----
     Existing rules in spoiler.css still reference these var names.
     Re-pointing them here means the entire app inherits the new palette
     without rewriting every selector. Refine on a per-surface basis. */
  --bg-dark:    var(--bg);
  --bg-mid:     var(--surface);
  --bg-light:   var(--surface-2);

  --blue:        var(--cool);          /* legacy "primary blue" → sage info */
  --blue-light:  var(--cool-soft);
  --orange:      var(--accent);        /* legacy "signal orange" → brick CTA */

  --border:     var(--line-strong);
  --muted:      var(--text-mute);
  --text-muted: var(--text-mute);

  /* Racing-themed legacy tokens — let them carry the sage / ivory family */
  --steel:        var(--text-dim);
  --steel-light:  var(--text-mute);
  --steel-dark:   var(--text);
  --charcoal:     var(--surface-3);
  --silver:       var(--text-dim);

  /* Credit chip colors — keep distinct semantic hues */
  --credit-green:  var(--ok);
  --credit-yellow: var(--warn);
  --credit-orange: var(--accent);
  --credit-red:    var(--bad);

  /* Bootstrap shim */
  --bs-body-bg:   var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--line);
}

/* ==========================================================================
   Light mode — cream canvas + deep racing green ink
   Accent inverts: deep racing green is the primary CTA, brick demotes to secondary.
   Contrast strengthened over pkg 1's spec: cream surfaces tend to wash out
   pastel category fills used by the explorer tree, so we deepen lines and
   bump the alpha applied to the tree-bar fills below.
   ========================================================================== */
[data-theme="light"] {
  --bg:         #EFEBDF;          /* canvas — slightly darker cream so cards pop */
  --surface:    #F7F4EA;          /* cards / panels */
  --surface-2:  #E5E0CF;          /* hover fill */
  --surface-3:  #D8D2BE;          /* active / selected */

  --text:       #14241E;
  --text-dim:   #3A4842;
  --text-mute:  #6E7068;

  --line:         #C5BFA8;        /* visible hairline on cream */
  --line-strong:  #A8A089;        /* card borders, stronger rules */

  --accent:       #8A3C30;
  --accent-soft:  rgba(138, 60, 48, 0.10);
  --accent-hover: #9E4B3E;

  --cool:         #A34231;
  --cool-soft:    rgba(163, 66, 49, 0.08);

  --ok:           #2F7A55;
  --warn:         #9A7B1E;
  --bad:          #A34231;

  --on-accent:    #FFFFFF;

  --shadow-sm:    0 1px 2px rgba(20, 36, 30, 0.06);
  --shadow-md:    0 4px 12px rgba(20, 36, 30, 0.08);
  --shadow-lg:    0 12px 32px rgba(20, 36, 30, 0.10);

  /* ----- Legacy alias overrides (light) ----- */
  --bg-dark:    var(--bg);
  --bg-mid:     var(--surface);
  --bg-light:   var(--surface-2);

  --blue:        var(--cool);          /* light: brick takes the secondary slot */
  --blue-light:  var(--cool-soft);
  --orange:      var(--accent);        /* light: deep green primary CTA */

  --border:     var(--line-strong);
  --muted:      var(--text-mute);
  --text-muted: var(--text-mute);

  --steel:        var(--text-dim);
  --steel-light:  var(--text-mute);
  --steel-dark:   var(--text);
  --charcoal:     var(--surface-3);
  --silver:       var(--text-dim);

  --credit-green:  var(--ok);
  --credit-yellow: var(--warn);
  --credit-orange: var(--accent);
  --credit-red:    var(--bad);
}

/* ==========================================================================
   Body — page-level background + ink only.
   Font is intentionally left to spoiler.css (Exo 2) per brand decision.
   ========================================================================== */
html, body {
  background: var(--bg);
  color: var(--text);
}

/* Smooth theme transitions across surfaces — no flicker on toggle */
html, body, .site-header, .container, .card, .panel, .modal-content,
.tab-rail, .work-hdr, .commit-bar, .stale-banner, .inspector, .tray,
.cf-rail, .tree-col, .tree-row, .running-card, .done-hdr, .failed-card {
  transition: background-color var(--dur-base) var(--ease-ui),
              border-color var(--dur-base) var(--ease-ui),
              color var(--dur-base) var(--ease-ui);
}

/* Honor user's reduce-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Wordmark signature treatment — Exo 2 + brick rule.
   Used on the site logo only. (See header.html.) */
.ds-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-block;
  transform: skewX(-10deg);
  position: relative;
  line-height: 1;
  padding: 0 2px;
  color: var(--text);
}
.ds-wordmark::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px; bottom: -3px;
  height: 2px;
  background: var(--accent);
  transform: skewX(10deg);
}

/* Focus ring — uniform across the app */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Site chrome — collapse legacy 110px two-row header to 64px single bar.
   Surface inspectors / atlas tray / page padding reference --site-header-h.

   Specificity note: many legacy rules use `.site-header .X` or chained
   class selectors. Mirroring those + `!important` + cascade order
   (this file loads after spoiler.css) should win in every case.
   ========================================================================== */
.site-header,
header.site-header,
header.site-header.site-header {                /* ↑ specificity bump */
  height: var(--site-header-h) !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
  overflow: visible !important;
}

.site-header .site-header__inner,
.site-header__inner,
.container.site-header__inner,
.site-header .container.site-header__inner,
.site-header > .container {
  max-width: none !important;
  padding: 0 24px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

main {
  min-height: calc(100vh - var(--site-header-h));
  background: var(--bg);
}

/* ==========================================================================
   Logo — single-line: image at 36px + skewed wordmark + tiny inline subtitle
   ========================================================================== */
.site-header .site-logo-title,
.site-header a.site-logo-link,
a.site-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 100% !important;
  text-decoration: none !important;
}

.site-header .site-logo__img,
.site-logo__img {
  height: 60px !important;
  width: auto !important;
  max-height: 60px !important;
  object-fit: contain !important;
}

/* Drop the legacy <br> inside .site-logo__text — collapse to single line */
.site-header .site-logo__text br,
.site-logo__text br { display: none !important; }

.site-header .site-logo__text,
.site-logo__text {
  font-family: 'Exo 2', sans-serif !important;
  font-weight: 700 !important;
  font-size: 3rem !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  position: relative !important;
  transform: skewX(-12deg) !important;
  text-shadow: 2px 2px 0 #000, 3px 3px 0 var(--accent) !important;
  -webkit-font-smoothing: auto !important;
  -moz-osx-font-smoothing: auto !important;
}
html[data-theme="light"] .site-header .site-logo__text,
html[data-theme="light"] .site-logo__text {
  color: #004225 !important;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.85), 3px 3px 0 #DC2626 !important;
}
.site-header .site-logo__text > *:not(.tiny-text):not(br),
.site-header .site-logo__text {
  /* skew applies to the whole element; wordmark visual feel */
}
.site-header .site-logo__text::after,
.site-logo__text::after {
  content: none;          /* underline rendered on a separate inner span below */
}

/* Hide tiny-text on narrow header on mobile, show inline as a small sub-label */
.site-header .site-logo__text .tiny-text,
.site-logo__text .tiny-text {
  font-family: 'Exo 2', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  color: var(--text-mute) !important;
  text-transform: uppercase !important;
  border-left: 1px solid var(--line-strong) !important;
  padding-left: 14px !important;
  margin-left: 6px !important;
}
.site-header .site-logo__text .tiny-text .outsized-link,
.site-logo__text .tiny-text .outsized-link {
  color: var(--text-dim) !important;
}

@media (max-width: 720px) {
  .site-header .site-logo__text .tiny-text { display: none !important; }
}

/* ==========================================================================
   Right cluster — flatten the legacy column-stack to a single row.
   Order in DOM: <nav>(home, logout, theme-toggle)</nav> + credit-widget

   Specificity-bumped selectors below aim to outrank the legacy column rule
   in spoiler.css (which applies !important on .site-header .header-right-section).
   We mirror the same selector and chain html/body for higher specificity.
   ========================================================================== */
html body .site-header .header-right-section,
html body .site-header .container .header-right-section,
html body header.site-header .header-right-section,
html body .site-header__inner .header-right-section {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  width: auto !important;
}

html body .site-header .frameless-site-nav,
html body header.site-header .frameless-site-nav,
.site-header .frameless-site-nav,
.frameless-site-nav {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  max-height: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Nav buttons — flatten outline, brick on active */
html body .site-header .frameless-site-nav__btn,
.site-header .frameless-site-nav__btn,
.frameless-site-nav__btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-dim) !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 10px !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  transition: background-color .12s var(--ease-ui), color .12s var(--ease-ui), border-color .12s var(--ease-ui) !important;
}
.site-header .frameless-site-nav__btn i,
.frameless-site-nav__btn i {
  font-size: 15px !important;
  line-height: 1 !important;
  color: inherit !important;
  text-shadow: none !important;
  /* legacy spoiler.css absolute-centers the icon — undo so it sits naturally */
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}
.site-header .frameless-site-nav__btn:hover,
.frameless-site-nav__btn:hover {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  transform: none !important;
}
.site-header .frameless-site-nav__btn.active,
.frameless-site-nav__btn.active {
  color: var(--accent) !important;
  border-color: transparent !important;
  background: transparent !important;
}
.site-header .frameless-site-nav__btn.active:hover,
.frameless-site-nav__btn.active:hover {
  background: var(--surface-2) !important;
  border-color: var(--line) !important;
  color: var(--accent) !important;
}
.site-header .frameless-site-nav__btn.active i,
.frameless-site-nav__btn.active i {
  filter: none !important;          /* legacy drop-shadow on .active i */
  transform: none !important;
}
.site-header .frameless-site-nav__btn--text,
.site-header .frameless-site-nav__btn--primary,
.frameless-site-nav__btn--text,
.frameless-site-nav__btn--primary {
  width: auto !important;
  min-width: 0 !important;
  padding: 0 14px !important;
  gap: 7px !important;
}
.site-header .frameless-site-nav__btn--primary,
.frameless-site-nav__btn--primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
}
.site-header .frameless-site-nav__btn--primary:hover,
.frameless-site-nav__btn--primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

/* Theme toggle button — match nav-btn frame (transparent border, hover fill) */
html body .site-header .spoiler-theme-toggle,
.site-header .spoiler-theme-toggle,
.spoiler-theme-toggle {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-dim) !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: var(--radius-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.site-header .spoiler-theme-toggle i,
.spoiler-theme-toggle i {
  font-size: 15px !important;
  line-height: 1 !important;
}
.site-header .spoiler-theme-toggle:hover,
.spoiler-theme-toggle:hover {
  color: var(--text) !important;
  background: var(--surface-2) !important;
}

/* ==========================================================================
   Credit balance widget — restyle as inline credit chip
   ========================================================================== */
html body .site-header .credit-balance-widget,
.site-header .credit-balance-widget,
.credit-balance-widget {
  width: auto !important;
  min-width: 0 !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  background: var(--bg) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
  transform: none !important;
  transition: background-color .12s var(--ease-ui), border-color .12s var(--ease-ui) !important;
}
.site-header .credit-balance-widget:hover,
.credit-balance-widget:hover {
  background: var(--surface-2) !important;
  border-color: var(--line-strong) !important;
  transform: none !important;
}
.credit-balance-display {
  gap: 7px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}
.credit-balance-display i { color: var(--cool) !important; font-size: 13px !important; }
.credit-balance-display.credit-balance-low { color: var(--warn) !important; }
.credit-balance-display.credit-balance-low i { color: var(--warn) !important; }
.credit-amount {
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--text) !important;
}

/* Footer — let it inherit surface tones */
footer, .site-footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--text-dim) !important;
}

/* ==========================================================================
   Auth controls in the site-header — match the landing chrome (.hdr)
   The unauthenticated header (login/signup/password-reset) shares the same
   site-header chrome as internal pages, but its Log in / Sign up / theme
   toggle should look identical to the landing's .hdr. Overrides below.
   ========================================================================== */

/* Theme toggle: bordered 36×36 button (was 50×50 chunky chrome from spoiler.css) */
html body .site-header .spoiler-theme-toggle {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 6px !important;
  border: 1px solid var(--line-strong) !important;
  background: transparent !important;
  color: var(--text-dim) !important;
  font-size: 14px !important;
  padding: 0 !important;
  margin-left: 6px !important;
  transition: background .15s, border-color .15s, color .15s !important;
}
html body .site-header .spoiler-theme-toggle:hover {
  background: var(--surface-2) !important;
  border-color: var(--text-mute) !important;
  color: var(--text) !important;
  transform: none !important;
}
html body .site-header .spoiler-theme-toggle .theme-icon {
  font-size: 16px !important;
}

/* Auth nav labels: sentence case, inherit font from parent button */
html body .site-header .frameless-site-nav__btn--text .nav-btn-label,
html body .site-header .frameless-site-nav__btn--primary .nav-btn-label {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  color: inherit !important;
  margin: 0 !important;
}

/* Log in: matches landing's .hdr nav a.login property-by-property */
html body .site-header .frameless-site-nav__btn--text {
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  color: var(--text-dim) !important;
  padding: 8px 12px !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 0 !important;
  transition: color .15s !important;
}
html body .site-header .frameless-site-nav__btn--text:hover {
  color: var(--text) !important;
  background: transparent !important;
  border-color: transparent !important;
  transform: none !important;
}

/* Sign up pill: matches landing's .btn-p property-by-property */
html body .site-header .frameless-site-nav__btn--primary {
  font-weight: 500 !important;
  font-size: 13px !important;
  font-family: inherit !important;
  padding: 9px 16px !important;
  border-radius: 6px !important;
  border: 1px solid var(--accent) !important;
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background .15s, border-color .15s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
}
html body .site-header .frameless-site-nav__btn--primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: var(--on-accent) !important;
  transform: none !important;
  box-shadow: none !important;
}
html body .site-header .frameless-site-nav__btn--primary svg {
  display: block;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
}