/* ==========================================================================
   E11EVEN 2026 GENIUS-TIER ARCHITECTURE LAYER (genius-2026.css)
   Covers 2026 Master Checklist Categories C08-C18, C25-C26, C30, C39-C40,
   C49, C57-C58, C64-C65.
   Zero Emoji · APCA Lc >= 90 Daylight Contrast · 0px Overflow Across 360-1920px
   ========================================================================== */

@layer tokens, base, layout, components, interop2026, accessibility, utilities;

/* --------------------------------------------------------------------------
   1. Self-Hosted Subsetted Variable WOFF2 Fonts + Zero-CLS Metric Overrides
      (Category 10.S17-S20, Category 38.S04-S05, Category 40.S02, Category 58.S09)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans Fallback';
  src: local('Arial'), local('Helvetica Neue');
  ascent-override: 98.88%;
  descent-override: 21.15%;
  line-gap-override: 0.00%;
  size-adjust: 104.98%;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212;
}

@font-face {
  font-family: 'JetBrains Mono Fallback';
  src: local('SFMono-Regular'), local('Menlo'), local('Consolas');
  ascent-override: 102.00%;
  descent-override: 30.00%;
  line-gap-override: 0.00%;
  size-adjust: 100.00%;
}

/* --------------------------------------------------------------------------
   2. Perceptual oklch() Wide-Gamut Display-P3 Tokens & color-mix() Surfaces
      (Category 11.S16-S20, Category 58.S01-S05)
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    color-scheme: light;
    --font-sans: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', 'SFMono-Regular', Menlo, Consolas, monospace;

    /* Fluid mathematical spacing tokens (Category 58.S08) */
    --space-2xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
    --space-xs: clamp(0.5rem, 0.42rem + 0.35vw, 0.75rem);
    --space-sm: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
    --space-md: clamp(1rem, 0.85rem + 0.75vw, 1.5rem);
    --space-lg: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
    --space-xl: clamp(2.5rem, 1.9rem + 2.8vw, 4.5rem);
    --header-clearance: 92px;
  }

  @supports (color: oklch(0.97 0.006 92)) {
    :root {
      --bg-canvas: oklch(0.968 0.007 92);
      --bg-surface: oklch(1 0 0);
      --bg-subtle: oklch(0.938 0.011 90);
      --bg-dark: oklch(0.192 0.052 262);
      --bg-dark-elevated: oklch(0.246 0.068 262);

      --ink-primary: oklch(0.224 0.064 261);
      --ink-secondary: oklch(0.322 0.039 260);
      --ink-muted: oklch(0.452 0.034 259);
      --ink-on-dark: oklch(0.968 0.007 92);
      --ink-on-dark-muted: oklch(0.816 0.028 258);

      --accent-crimson: oklch(0.492 0.178 25);
      --accent-crimson-hover: oklch(0.428 0.165 25);
      --accent-navy: oklch(0.224 0.064 261);
      --accent-navy-hover: oklch(0.295 0.088 262);
      --accent-emerald: oklch(0.468 0.106 164);
      --accent-emerald-bg: color-mix(in oklch, var(--accent-emerald) 12%, white);
      --accent-amber-bg: oklch(0.964 0.032 84);
      --accent-amber-ink: oklch(0.435 0.098 68);
      --border-hairline: color-mix(in oklch, var(--ink-primary) 16%, var(--bg-canvas));
      --surface-glass: color-mix(in oklch, var(--bg-canvas) 92%, transparent);
    }
  }

  /* Progressive light-dark() & contrast-color() readiness (Category 58.S04-S05) */
  @supports (color: light-dark(white, black)) {
    :root {
      --adaptive-chip-bg: light-dark(var(--bg-subtle), var(--bg-dark-elevated));
    }
  }
  @supports (color: contrast-color(oklch(0.492 0.178 25))) {
    .btn-crimson {
      color: contrast-color(var(--accent-crimson));
    }
  }
}

/* --------------------------------------------------------------------------
   3. Base Typography, Skip Links, Target-Text & Scroll Clearance
      (Category 10.S19, Category 14.S09, Category 14.S15, Category 43.S22, Category 65.S05)
   -------------------------------------------------------------------------- */
@layer base {
  p, li, dd, blockquote, .prose-copy, .lead-copy, .section-subtitle {
    text-wrap: pretty;
  }

  [id] {
    scroll-margin-top: var(--header-clearance);
  }

  ::selection {
    background-color: #091B40;
    color: #FFFFFF;
  }

  ::target-text {
    background-color: #FFF2A6;
    color: #091B40;
  }

  mark.e11-hl {
    background-color: #FFF099;
    color: #091B40;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 700;
  }
}

@layer accessibility {
  .skip-link {
    position: fixed;
    top: -120px;
    left: 1rem;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    min-width: 46px;
    padding: 0.65rem 1.25rem;
    background: var(--ink-primary);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.9rem;
    border: 2px solid #5CE1A6;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-elevated);
    transition: top 0.18s ease;
  }

  .skip-link:focus,
  .skip-link:focus-visible {
    top: 0.75rem;
    outline: 3px solid #1E6FD9;
    outline-offset: 2px;
  }

  /* Neurodivergent Low-Arousal Calm UI Mode (Category 26.S30, Category 61.S06) */
  html.apex-calm *,
  html.apex-calm *::before,
  html.apex-calm *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.08s !important;
  }
  html.apex-calm .apex-spot,
  html.apex-calm .apex-watermark {
    opacity: 0.02 !important;
  }
}

/* --------------------------------------------------------------------------
   4. CSS Subgrid, Container Queries & Offscreen Content-Visibility
      (Category 08.S17-S20, Category 39.S18, Category 58.S06-S07)
   -------------------------------------------------------------------------- */
@layer layout {
  .lineup-grid,
  .parts-grid,
  .pdp-grid,
  .buy-box-card {
    container-type: inline-size;
  }

  /* 8-Row CSS Subgrid across all 4 Flagship Bike Cards */
  @supports (grid-template-rows: subgrid) {
    @media (min-width: 720px) {
      .lineup-grid {
        grid-auto-rows: auto;
      }
      .lineup-grid > .bike-card {
        display: grid;
        grid-row: span 8;
        grid-template-rows: subgrid;
        row-gap: 0.5rem;
        align-items: start;
      }
      .lineup-grid > .bike-card > p {
        min-height: 0 !important;
        margin-bottom: 0 !important;
      }
      .lineup-grid > .bike-card > .foveal-price-cluster,
      .lineup-grid > .bike-card > .bike-card-spec-grid {
        margin: 0;
        align-self: stretch;
      }
      .lineup-grid > .bike-card > .bike-card-actions {
        margin-top: 0;
        align-self: end;
      }
    }
  }

  /* Container query adapting card action buttons inside narrow slots */
  @container (max-width: 520px) {
    .bike-card-actions {
      grid-template-columns: 1fr;
    }
  }

  /* Offscreen DOM paint skipping for dense catalogs & warranty matrices */
  .parts-grid > .part-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 390px;
  }

  #appendix-a .data-table tbody tr {
    content-visibility: auto;
    contain-intrinsic-size: auto 52px;
  }

  /* Foldable Dual-Screen Hinge Adaptation (Category 25.S18, Category 64.S04) */
  @media (horizontal-viewport-segments: 2) {
    .pdp-grid,
    .hero-grid {
      grid-template-columns: env(viewport-segment-width 0 0, 1fr) env(viewport-segment-width 1 0, 1fr);
      column-gap: calc(env(viewport-segment-left 1 0, 2rem) - env(viewport-segment-right 0 0, 0px) + 2rem);
    }
  }

  /* Spatial XR Indirect Gaze + Pinch Ergonomics (Category 64.S01-S02) */
  @media (pointer: coarse) and (hover: hover) {
    .btn, .nav-link, .filter-pill, .hotspot-pin {
      min-height: 48px;
      min-width: 48px;
    }
  }
}

/* --------------------------------------------------------------------------
   5. Interop 2026 Zero-JS Native Browser Primitives & Discrete Animations
      (Category 13.S29-S33, Category 30.S24-S25, Category 57.S01-S11)
   -------------------------------------------------------------------------- */
@layer interop2026 {
  /* Native field-sizing: content auto-growing textareas (Category 17.S20) */
  @supports (field-sizing: content) {
    textarea.form-input {
      field-sizing: content;
      min-height: 76px;
      max-height: 260px;
    }
  }

  /* Progressive Customizable Native Select (appearance: base-select) (Category 57.S01) */
  @supports (appearance: base-select) {
    select.form-select {
      appearance: base-select;
    }
    select.form-select::picker(select) {
      appearance: base-select;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-md);
      background: var(--bg-surface);
      box-shadow: var(--shadow-elevated);
      padding: 0.35rem;
    }
  }

  /* Native Top-Layer Popover + CSS Anchor Positioning (Category 57.S03-S05) */
  .e11-anchor-trigger {
    anchor-name: --e11-info-trigger;
  }

  .e11-popover {
    max-width: min(360px, calc(100vw - 2rem));
    margin: auto;
    padding: 1rem 1.15rem;
    background: var(--bg-surface);
    color: var(--ink-primary);
    border: 1.5px solid var(--ink-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
    font-size: 0.84rem;
    line-height: 1.5;
  }

  .e11-popover::backdrop {
    background: rgba(7, 19, 44, 0.25);
  }

  @supports (position-anchor: --e11-info-trigger) {
    .e11-popover[data-anchored] {
      margin: 0;
      position: fixed;
      position-anchor: --e11-info-trigger;
      position-area: block-end span-inline-end;
      position-try-fallbacks: flip-block, flip-inline;
      margin-top: 0.4rem;
    }
  }

  /* Discrete @starting-style Entry & Exit Transitions (Category 30.S24-S25) */
  @supports (transition-behavior: allow-discrete) {
    dialog.e11-dialog,
    .e11-popover {
      opacity: 0;
      transform: translateY(8px) scale(0.985);
      transition:
        opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        overlay 0.24s allow-discrete,
        display 0.24s allow-discrete;
    }
    dialog.e11-dialog[open],
    .e11-popover:popover-open {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    @starting-style {
      dialog.e11-dialog[open],
      .e11-popover:popover-open {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
      }
    }
  }

  /* CSS sibling-index() progressive stagger when supported (Category 57.S09) */
  @supports (animation-delay: calc(sibling-index() * 35ms)) {
    .lineup-grid > .bike-card {
      transition-delay: calc((sibling-index() - 1) * 30ms);
    }
  }

  /* Native CSS Media State Styling :playing / :paused (Category 12.S21) */
  .bike-card-stage picture,
  .apex-lineup-card picture {
    display: contents;
  }
  .kinematic-loop-stage video:playing + .kinematic-video-toggle .js-vid-state::after {
    content: "Pause Loop";
  }
  .kinematic-loop-stage video:paused + .kinematic-video-toggle .js-vid-state::after {
    content: "Play Loop";
  }

  /* Pure CSS Scroll-Marker & Scroll-State Progressive Enhancement (Category 57.S07-S08) */
  @supports selector(::scroll-button(right)) {
    .apex-lineup-strip {
      scroll-marker-group: after;
    }
  }
  @supports (container-type: scroll-state) {
    .site-header {
      container-type: scroll-state;
    }
  }

  /* Native :target-current Scroll-Spy TOC Highlighting (Category 14.S17) */
  .e11-inpage-toc a:target-current {
    background: var(--ink-primary);
    color: #FFFFFF;
  }
}

/* --------------------------------------------------------------------------
   6. Global Command Palette (Cmd+K / Ctrl+K), Agent Gate, Mobile PDP Bar,
      Saved-Fit Personalization Strip & Answer-First GEO Summary
      (Categories C05, C07, C13, C18, C19, C22, C23, C36, C37, C54, C56)
   -------------------------------------------------------------------------- */
@layer components {
  /* Scoped component isolation via @scope (Category 49.S19) */
  @scope (.geo-answer-card) {
    :scope {
      background: var(--bg-surface);
      border: 1px solid var(--border-hairline);
      border-left: 4px solid var(--accent-emerald);
      border-radius: var(--radius-md);
      padding: 1rem 1.25rem;
      margin: 1.25rem 0;
    }
    .geo-answer-kicker {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--accent-emerald);
      margin-bottom: 0.35rem;
    }
  }

  /* Header Cmd+K Trigger & 360px Zero-Overflow Responsive Fit */
  .cmdk-trigger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.55rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-sm);
    color: var(--ink-secondary);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
  }
  .cmdk-trigger-btn:hover {
    border-color: var(--ink-primary);
    color: var(--ink-primary);
  }
  .cmdk-label {
    display: none;
  }
  @media (min-width: 520px) {
    .cmdk-label { display: inline; }
  }
  @media (max-width: 420px) {
    .header-actions { gap: 0.35rem; }
    .header-actions .btn-sm { padding: 0.45rem 0.6rem; font-size: 0.78rem; }
    .mobile-menu-btn { padding: 0 0.55rem; font-size: 0.78rem; }
    .brand-logo { gap: 0.45rem; font-size: 1.12rem; }
    .brand-sub { font-size: 0.55rem; letter-spacing: 0.07em; }
  }
  .cmdk-kbd {
    display: none;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    padding: 0.12rem 0.38rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-hairline);
    border-radius: 4px;
    color: var(--ink-primary);
  }
  @media (min-width: 680px) {
    .cmdk-kbd { display: inline-block; }
  }

  /* Top-Layer Command Palette Dialog */
  dialog.e11-dialog {
    width: min(680px, calc(100vw - 1.5rem));
    max-height: min(82dvh, 660px);
    padding: 0;
    border: 1.5px solid var(--ink-primary);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    color: var(--ink-primary);
    box-shadow: 0 24px 64px rgba(7, 19, 44, 0.34);
    overflow: hidden;
  }

  dialog.e11-dialog::backdrop {
    background: rgba(7, 19, 44, 0.56);
    backdrop-filter: blur(4px);
  }

  .cmdk-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-hairline);
    background: var(--bg-canvas);
  }

  .cmdk-input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.8rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--ink-primary);
    background: var(--bg-surface);
  }

  .cmdk-list {
    max-height: min(56dvh, 430px);
    overflow-y: auto;
    padding: 0.6rem;
    display: grid;
    gap: 0.35rem;
  }

  .cmdk-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0.55rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--bg-surface);
    color: var(--ink-primary);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-sans);
  }

  .cmdk-item:hover,
  .cmdk-item[aria-selected="true"] {
    background: var(--bg-canvas);
    border-color: var(--ink-primary);
  }

  .cmdk-item-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent-emerald);
    font-weight: 700;
    flex-shrink: 0;
  }

  .cmdk-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--border-hairline);
    background: var(--bg-canvas);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-muted);
  }

  /* Mobile Above-the-Fold PDP Price & Jump Strip (Category 07, Category 25) */
  .pdp-mobile-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.75rem 0.95rem;
    margin-bottom: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-hairline);
    border-left: 4px solid var(--accent-crimson);
    border-radius: var(--radius-sm);
  }
  @media (min-width: 1024px) {
    .pdp-mobile-summary {
      display: none;
    }
  }

  /* Scroll-Aware Sticky PDP Conversion Bar (Category 22.S04, Category 26.S09) */
  .pdp-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 140;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    border-top: 1.5px solid var(--ink-primary);
    box-shadow: 0 -8px 26px rgba(9, 27, 64, 0.12);
    padding: 0.6rem 0 calc(0.6rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  .pdp-sticky-bar.is-visible {
    transform: translateY(0);
    pointer-events: auto;
  }
  .pdp-sticky-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
  }

  /* Personalization Continuity Banner (Category 36.S01-S14) */
  .e11-fit-continuity {
    display: none;
    background: var(--accent-emerald-bg);
    color: var(--ink-primary);
    border-bottom: 1px solid rgba(11, 107, 77, 0.25);
    padding: 0.4rem 0;
    font-size: 0.8rem;
  }
  .e11-fit-continuity.is-active {
    display: block;
  }
  .e11-fit-continuity-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  /* Kinematic Loop Accessible Controls Overlay (WCAG 2.2.2) */
  .kinematic-loop-stage {
    position: relative;
  }
  .kinematic-video-toggle {
    position: absolute;
    right: 0.75rem;
    bottom: 2.5rem;
    z-index: 5;
    min-height: 44px;
    min-width: 44px;
    padding: 0.35rem 0.75rem;
    background: rgba(7, 19, 44, 0.86);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
  }

  /* On-Device AI / Deterministic Rider Digest Box (Category 27.S20, Category 55.S01) */
  .e11-ai-digest {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    background: var(--bg-canvas);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
  }

  /* Dynamic viewport height for slide-over drawer (Category 25.S20) */
  @supports (height: 100dvh) {
    .cart-drawer {
      height: 100dvh;
    }
  }
}