/*
 * ═══════════════════════════════════════════════════════════════════════════
 * DESIGN SYSTEM — COLOR TOKEN ROLES
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Each token has ONE zone. Using a token outside its zone is a design error.
 *
 * DARK ZONE (#0b0e12)  — navbar, tabs, hero ONLY. Never in content area.
 * SURFACE-0 (#fafaf9)  — page background (warm near-white, 1-step warm offset).
 * SURFACE-1 (#f0efed)  — card backgrounds, slightly lifted off surface.
 * SURFACE-2 (#e0ddd9)  — borders, table headers, more elevated neutral areas.
 * ACCENT    (#e8952b)  — ONE chromatic color: amber-gold. CTA fill on dark,
 *                        icon/border/stat accent everywhere. Never body text on light.
 * ACCENT-DEEP (#8b5e0a) — text-safe amber on light backgrounds (≥4.5:1).
 * TEXT-HIGH  (#1c1b18) — headings, primary labels.
 * TEXT-MID   (rgba(0,0,0,0.72)) — body, secondary labels.
 * TEXT-LOW   (rgba(0,0,0,0.45)) — muted, captions.
 *
 * DARK MODE equivalents:
 * SURFACE-0  (#0b0e12), SURFACE-1 (#141516), ACCENT (#e8952b on dark, #f5bc6a for links)
 *
 * Rubrics applied:
 * 1. Navbar-hero cohesion — header and hero share the DARK ZONE (#0b0e12).
 *    Generic indigo header = template tell.
 * 2. Hero full-bleed — 100vw negative margin, no border-radius.
 *    Card-hero = document; full-bleed = product.
 * 3. Content area lift — cards use SURFACE-1, table headers use SURFACE-2.
 *    DARK ZONE never appears in the content area.
 * 4. One accent, neutral everything else — amber-gold resolves through CSS custom
 *    properties so Material's own components inherit it.
 * 5. Surface ladder (dark mode) — 3+ elevation steps, not flat dark gray.
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ── Accent token — single source of truth ──────────────────────────────── */
/*
 * mkdocs.yml uses palette.primary/accent: custom, so Material emits no default
 * color tokens. All token values are defined explicitly here; nothing leaks from
 * a named palette. --md-accent-fg-color drives links, focus rings, and the
 * active-nav marker (Rubric 4). --md-primary-fg-color drives the mobile nav
 * drawer header and other primary-keyed components.
 */

:root,
[data-md-color-scheme="default"] {
  --md-accent-fg-color:              #e8952b;
  --md-accent-fg-color--transparent: rgba(232, 149, 43, 0.10);
  --md-typeset-a-color:              #8b5e0a;  /* text-safe amber on light — 6:1 contrast */
  --md-default-bg-color:             #fafaf9;  /* warm near-white surface (--prim-neutral-50) */
  --md-default-bg-color--light:      #fafaf9;
  /* Required when mkdocs.yml uses palette.primary: custom — Material emits no
   * primary tokens for custom; these prevent mobile nav drawer / active-nav
   * from rendering with transparent/invalid values. */
  --md-primary-fg-color:             #0b0e12;  /* dark zone — brand primary */
  --md-primary-fg-color--light:      rgba(11, 14, 18, 0.54);
  --md-primary-fg-color--dark:       rgba(11, 14, 18, 0.87);
  --md-primary-bg-color:             #f8fafc;  /* text on dark primary */
  --md-primary-bg-color--light:      rgba(248, 250, 252, 0.70);
}

/* ── Dark mode surface ladder ───────────────────────────────────────────── */

[data-md-color-scheme="slate"] {
  --md-default-bg-color:            #0b0e12;  /* --ds-hero-bg */
  --md-code-bg-color:               #141516;
  --md-default-fg-color--lightest:  rgba(255, 255, 255, 0.07);
  --md-default-fg-color--lighter:   rgba(255, 255, 255, 0.16);
  --md-accent-fg-color:              #e8952b;
  --md-accent-fg-color--transparent: rgba(232, 149, 43, 0.12);
  --md-typeset-a-color:              #f5bc6a;  /* amber-300 — readable on dark surface */
}

/* Prevent 100vw hero from producing a horizontal scrollbar on Windows/Linux
 * (scrollbar width is included in 100vw, causing body-level overflow).
 * Must target html, not just body — setting it on body alone makes html the
 * scroll container, which on iOS allows the page to scroll horizontally. */
html {
  overflow-x: hidden;
}

/* ── Header: dark unified zone matching the hero ────────────────────────── */
/*
 * Rubric: the navbar is the first thing the eye hits. Generic Material blue
 * announces "template." Dark header (#0b0e12) creates navbar-hero cohesion —
 * the dark zone extends from top of page to end of hero.
 */

.md-header {
  background-color: #0b0e12 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.md-header .md-header__title {
  color: #f8fafc;
}

.md-header .md-header__button,
.md-header .md-header-nav__button {
  color: rgba(248, 250, 252, 0.85);
}

.md-header .md-header__button:hover {
  color: #f8fafc;
}

/* Search input in dark header */
.md-header .md-search__input {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(248, 250, 252, 0.9);
  border-radius: 6px;
}

.md-header .md-search__input::placeholder {
  color: rgba(248, 250, 252, 0.45);
}

/* Nav tabs — same dark zone as the header */
.md-tabs {
  background-color: #0b0e12 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.md-tabs .md-tabs__item {
  color: rgba(248, 250, 252, 0.65);
}

.md-tabs .md-tabs__item--active,
.md-tabs .md-tabs__link--active {
  color: #f8fafc;
}

.md-tabs .md-tabs__link:hover {
  color: #f8fafc;
  opacity: 1;
}

/* ── Hero section — full-bleed dark panel ───────────────────────────────── */
/*
 * Rubric: full-bleed (100vw negative margin) signals "product site hero."
 * A card floating on white signals "section in a document." No border-radius.
 * Grid texture (28px, 4% opacity lines) + radial glow from accent: the
 * "one non-neutral move" that separates leading from traditional.
 */

.hero-section {
  /* Full-bleed: break out of the 900px content container */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;

  /* Horizontally center the inner content column */
  padding-top: 2.5rem;
  padding-bottom: 2.25rem;
  padding-left: max(2rem, calc(50vw - 450px));
  padding-right: max(2rem, calc(50vw - 450px));

  /* Visual treatment */
  background-color: #0b0e12;
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(232, 149, 43, 0.15) 0%, transparent 65%),
    linear-gradient(rgba(255, 255, 255, 0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.038) 1px, transparent 1px);
  background-size: 100% 100%, 28px 28px, 28px 28px;
  border-radius: 0;
  margin-bottom: 2.5rem;
  color: #f8fafc;
}

.hero-section h1 {
  color: #f8fafc;
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  max-width: 800px;
}

.hero-section p {
  color: rgba(248, 250, 252, 0.65);
  font-size: 0.975rem;
  line-height: 1.55;
  margin-bottom: 0;
  max-width: 620px;
}

/* ── Hero CTA buttons — inverted for dark context ───────────────────────── */

.hero-section .hero-actions {
  margin-top: 1.5rem;
  margin-bottom: 0;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.hero-section .md-button--primary {
  background-color: #e8952b !important;
  color: #0b0e12 !important;
  border-color: #e8952b !important;
  font-weight: 600;
}

.hero-section .md-button--primary:hover {
  background-color: #f5bc6a !important;
  border-color: #f5bc6a !important;
}

.hero-section .md-button:not(.md-button--primary) {
  background-color: transparent !important;
  border-color: rgba(248, 250, 252, 0.25) !important;
  color: rgba(248, 250, 252, 0.8) !important;
}

.hero-section .md-button:not(.md-button--primary):hover {
  background-color: rgba(248, 250, 252, 0.08) !important;
  border-color: rgba(248, 250, 252, 0.45) !important;
  color: #f8fafc !important;
}

.hero-section .md-button:focus-visible {
  outline: 3px solid rgba(248, 250, 252, 0.7);
  outline-offset: 3px;
}

/* ── Standalone hero-actions (outside hero-section) ─────────────────────── */

.hero-actions {
  margin: 1.75rem 0 2.5rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.md-button--large {
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
}

/* ── Page content width ─────────────────────────────────────────────────── */
/*
 * Center the article in the grid column (margin: auto) instead of Material's
 * default left-aligned margin: 0 .8rem. This is required for the hero's
 * full-bleed math to work: the negative-margin trick assumes the article is
 * symmetrically centered in the viewport; left-aligned layout breaks it.
 * Without centering, the hero undershoots the right edge by ~.8rem.
 */

.md-content__inner {
  max-width: 900px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Remove ALL top spacing when the page starts with a full-bleed hero,
 * so the dark zone is continuous from navbar bottom to hero bottom.
 * Three layers to cancel: md-main__inner padding, md-content__inner padding,
 * and any residual via a negative margin on the hero itself. */

/* Layer 1 — .md-main__inner has padding-top: 1.2rem by default */
.md-main:has(.hero-section) > .md-main__inner {
  padding-top: 0;
}

/* Layer 2 — .md-content__inner (the article) also has padding-top */
article.md-content__inner:has(> .hero-section) {
  padding-top: 0;
}

/* Layer 3 — belt-and-suspenders negative margin in case :has() misses */
.md-content__inner > .hero-section {
  margin-top: -1.5rem;
}

/* ── Mobile — hero scale ────────────────────────────────────────────────── */

@media (max-width: 600px) {
  /* Match the hero's resolved left/right padding (max(2rem, calc(50vw - 450px))
     = 2rem on mobile) so content aligns with the hero text above it. */
  .md-content__inner {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  .hero-section {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .hero-section h1 {
    font-size: clamp(1.3rem, 5.5vw, 1.75rem);
    letter-spacing: -0.016em;
    line-height: 1.2;
    margin-bottom: 0.6rem;
  }

  .hero-section p {
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .hero-section .hero-actions {
    margin-top: 1.1rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .md-button--large {
    padding: 0.65rem 1.4rem;
    font-size: 0.95rem;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

/* Code blocks in the handoff diagram — prevent horizontal overflow on mobile */
.md-typeset pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Section rhythm ─────────────────────────────────────────────────────── */
/*
 * Material 9.x applies a bottom-border separator on h2 using
 * --md-default-fg-color--lightest. On a white background this is acceptable,
 * but the aesthetic direction (Vercel/Linear) uses whitespace — not rules —
 * as section separators. Remove the border; the 3rem top-margin provides rhythm.
 */

.md-typeset h2 {
  margin-top: 3rem;
  letter-spacing: -0.015em;
}

/* Scope h2 border-bottom removal to hero pages only — not all content pages.
 * Fallback class .hero-h2-style for browsers without :has() support. */
.md-content__inner:has(.hero-section) .md-typeset h2,
.md-typeset h2.hero-h2-style {
  border-bottom: none;
  padding-bottom: 0;
}

/* ── Cards — lifted tint + border reveal on hover ───────────────────────── */
/*
 * Rubric: cards on pure white have no visual weight (same plane as background).
 * SURFACE-1 (#f0efed) lifts the card off the page background. Border (not shadow)
 * names the card edge precisely. On hover: border brightens to the accent color
 * (#e8952b). Shadow reserved for elevated overlays (modals, dropdowns), never cards.
 */

.grid.cards > ul > li,
.grid.cards > ol > li {
  background: #f0efed;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  box-shadow: none;
  transition: border-color 150ms ease, transform 100ms ease;
}

.grid.cards > ul > li:hover,
.grid.cards > ol > li:hover {
  border-color: #e8952b;
  transform: translateY(-2px);
}

[data-md-color-scheme="slate"] .grid.cards > ul > li,
[data-md-color-scheme="slate"] .grid.cards > ol > li {
  background: #141516;
  border-color: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}

[data-md-color-scheme="slate"] .grid.cards > ul > li:hover,
[data-md-color-scheme="slate"] .grid.cards > ol > li:hover {
  border-color: rgba(232, 149, 43, 0.5);
}

/* ── Code blocks ───────────────────────────────────────────────────────── */

.md-typeset code {
  border-radius: 4px;
}

.md-typeset pre > code {
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ── Inline code inside cards — accent-tinted chip ──────────────────────── */
/*
 * Design system rule: inline code in cards (scope tags like `user`/`repo`,
 * skill names like `work-loop`) uses a subtle ACCENT fill so these chips
 * read as an intentional design element, not the default gray code style.
 * Keeps the one-accent rule: same amber-gold family, subtle opacity fill.
 */

.grid.cards > ul > li code,
.grid.cards > ol > li code {
  background: rgba(232, 149, 43, 0.10);
  color: #8b5e0a;  /* accent-deep — text-safe on light (6:1 contrast) */
  font-size: 0.78rem;
  border-radius: 4px;
}

[data-md-color-scheme="slate"] .grid.cards > ul > li code,
[data-md-color-scheme="slate"] .grid.cards > ol > li code {
  background: rgba(232, 149, 43, 0.12);
  color: #f5bc6a;  /* amber-300 — readable on dark surface */
}

/* ── Global primary CTA — amber-gold ────────────────────────────────────── */
/*
 * mkdocs.yml uses palette.primary: custom so Material does not emit any CTA
 * color. This rule sets the amber-gold fill for .md-button--primary everywhere;
 * the more-specific .hero-section .md-button--primary rule still takes
 * precedence inside the hero (higher specificity + !important), so no conflict.
 */

.md-button--primary {
  background-color: #e8952b !important;
  color: #0b0e12 !important;
  border-color: #e8952b !important;
  font-weight: 600;
}

.md-button--primary:hover {
  background-color: #f5bc6a !important;
  border-color: #f5bc6a !important;
  color: #0b0e12 !important;
}

.md-button--primary:focus-visible {
  outline: 3px solid rgba(232, 149, 43, 0.7);
  outline-offset: 3px;
}

/* ── Navigation ────────────────────────────────────────────────────────── */

.md-nav__title {
  font-weight: 700;
}

/* ── Tables ────────────────────────────────────────────────────────────── */
/*
 * Table headers use a light neutral tint (#f0efed). Dark canvas (#0b0e12)
 * belongs only in the navbar/hero zone, not the content area.
 */

.md-typeset table:not([class]) {
  font-size: 0.875rem;
}

.md-typeset table:not([class]) th {
  background-color: #f0efed;
  color: #1a202c;
  font-weight: 600;
  border-bottom: 2px solid #e2e8f0;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: #141516;
  color: rgba(248, 250, 252, 0.87);
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
}

/* ── Announcement bar ────────────────────────────────────────────────────── */

.md-banner {
  background-color: #0b0e12;  /* dark zone — cohesion with header (Rubric 1) */
  font-size: 0.875rem;
}

/* ── Platform back-link — cross-surface nav to marketing site ────────────── */

.platform-back-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  color: #e8952b;
  text-decoration: none;
  letter-spacing: 0.08em;
}

.platform-back-link:hover {
  color: #f5bc6a;
  text-decoration: none;
}

.platform-back-link:focus-visible {
  color: #f5bc6a;
  outline: 2px solid rgba(232, 149, 43, 0.7);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Reduce-motion: honour system preference ────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .grid.cards > ul > li,
  .grid.cards > ol > li {
    transition: none;
  }
  .grid.cards > ul > li:hover,
  .grid.cards > ol > li:hover,
  [data-md-color-scheme="slate"] .grid.cards > ul > li:hover,
  [data-md-color-scheme="slate"] .grid.cards > ol > li:hover {
    transform: none;
    box-shadow: none;
    border-color: #e8952b;
  }
}