/* ============================================================================
   Podesta Design System — Korda port + prediction-market primitives
   ============================================================================
   Token tiers:
     1. Primitives  — raw values (--stone-100, --ink-900, etc.)
     2. Semantic    — purpose-bound (--bg, --fg, --accent, --border, --h1, --p)
     3. Component   — overrides set inside specific component selectors
   Source of truth for product UI. Light mode is canonical; dark mode anchors
   are documented and applied via [data-theme="dark"] on a parent element.
   Ported verbatim from podesta-ai/src/css/globals.css (Tailwind-specific bits
   excluded: @import "tailwindcss" and the @theme block).
   Prediction-specific m-* primitives appended at the bottom.
   ============================================================================ */

/* --- Fonts ----------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ============================================================================
   1.  PRIMITIVES
   ============================================================================ */

:root {
  /* Stone — the base surface ramp (warm neutrals, OKLCH-derived) */
  --stone-50:   #FAF9F5;   /* near-parchment; rarely used (Anthropic territory) */
  --stone-100:  #F1F0EC;   /* CANONICAL BASE — every Podesta screen sits on this */
  --stone-200:  #E8E6E0;   /* slightly recessed surfaces, hairlines */
  --stone-300:  #D5D2C9;   /* divider, subtle border */
  --stone-400:  #B6B2A6;   /* placeholder text, disabled foreground */
  --stone-500:  #8C887D;   /* secondary text on stone */
  --stone-600:  #5F5C53;   /* tertiary headline, captions */
  --stone-700:  #3F3D37;   /* near-fg neutral */
  --stone-800:  #2A2925;   /* body fg fallback */
  --stone-900:  #161513;   /* deep text on stone */

  /* Ink — the signature color, library blue-black */
  --ink-50:     #E5E8EE;
  --ink-100:    #C4CAD5;
  --ink-200:    #95A0B3;
  --ink-300:    #5F6E89;
  --ink-400:    #36465F;
  --ink-500:    #1A2540;   /* CANONICAL INK — primary type, primary CTA */
  --ink-600:    #141C32;
  --ink-700:    #0F1521;   /* dark-mode base */
  --ink-800:    #0A0E18;
  --ink-900:    #06080F;

  /* Oxblood — single-use accent */
  --oxblood-300: #B66572;
  --oxblood-500: #6B2330;  /* CANONICAL ACCENT — links, editorial marks */
  --oxblood-600: #561A26;
  --oxblood-700: #3F121C;

  /* Semantic palette (derived; tuned for AA contrast on stone-100) */
  --success-500: #2F6F4E;
  --warning-500: #7A5A18;
  --danger-500:  #9C2A2A;   /* NOT the oxblood; oxblood is brand, danger is signal */
  --info-500:    #2B4F8F;

  /* --- Type primitives --- */
  --font-serif: "Source Serif 4", "Tiempos Headline", "Tiempos Text", "Iowan Old Style", Georgia, serif;
  --font-sans:  "Inter", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "JetBrains Mono", "SF Mono", "Söhne Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Type scale — modular, ~1.2 ratio for body, looser for display */
  --fs-12: 0.75rem;     /* 12 — eyebrow, micro caps */
  --fs-13: 0.8125rem;   /* 13 — table cell, caption */
  --fs-14: 0.875rem;    /* 14 — secondary UI */
  --fs-15: 0.9375rem;   /* 15 — UI body */
  --fs-16: 1rem;        /* 16 — body */
  --fs-18: 1.125rem;    /* 18 — lead body */
  --fs-20: 1.25rem;     /* 20 — h5 / lede */
  --fs-24: 1.5rem;      /* 24 — h4 */
  --fs-30: 1.875rem;    /* 30 — h3 */
  --fs-38: 2.375rem;    /* 38 — h2 */
  --fs-48: 3rem;        /* 48 — h1 (UI) */
  --fs-64: 4rem;        /* 64 — display */
  --fs-80: 5rem;        /* 80 — editorial display */

  /* Line-heights — generous on body, tight on display */
  --lh-display: 1.08;
  --lh-headline: 1.18;
  --lh-body: 1.55;
  --lh-loose: 1.65;
  --lh-tight: 1.25;

  /* Letter-spacing — subtractive on display, additive on small caps */
  --tracking-display: -0.02em;
  --tracking-headline: -0.01em;
  --tracking-body: 0;
  --tracking-caps: 0.08em;

  /* --- Spacing — 4px base grid --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  192px;

  /* --- Radii — bumped per "more rounded corners" directive (May 2026) --- */
  --radius-0: 0;
  --radius-1: 4px;
  --radius-2: 8px;     /* inputs, chips */
  --radius-3: 14px;    /* cards, list items, buttons */
  --radius-4: 20px;    /* panels, modals */
  --radius-5: 28px;    /* hero / large floating surfaces */
  /* Pills are forbidden — no `--radius-full`. */

  /* --- Air — every surface floats. Use these gaps between siblings. --- */
  --air-1: 8px;        /* between tightly-grouped floating items (list rows) */
  --air-2: 12px;       /* between section cards */
  --air-3: 20px;       /* between major page panels */
  --air-4: 32px;       /* between page sections */

  /* --- Borders — used VERY sparingly; floats use shadow, not border --- */
  --border-width: 1px;
  --border-color: var(--stone-300);
  --border-color-strong: var(--stone-500);
  --border-color-ink: var(--ink-500);

  /* --- Elevation — softer & rounder per the float directive --- */
  --shadow-1: 0 1px 2px 0 rgba(22, 28, 50, 0.04), 0 4px 12px -4px rgba(22, 28, 50, 0.06);
  --shadow-2: 0 2px 4px 0 rgba(22, 28, 50, 0.05), 0 10px 24px -6px rgba(22, 28, 50, 0.08);
  --shadow-3: 0 4px 8px 0 rgba(22, 28, 50, 0.06), 0 20px 48px -12px rgba(22, 28, 50, 0.14);
  --shadow-float: 0 1px 2px 0 rgba(22, 28, 50, 0.04), 0 8px 20px -8px rgba(22, 28, 50, 0.10);
  --shadow-cta:   0 4px 8px 0 rgba(22, 28, 50, 0.10), 0 24px 60px -12px rgba(22, 28, 50, 0.30);
  /* Podesta uses a hairline + tiny y-offset rather than diffuse drop shadows. */

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 280ms;

  /* --- Layout --- */
  --measure-prose: 38rem;        /* ~640px max measure for editorial text */
  --measure-page: 78rem;         /* 1248px max page width for product UI */
  --measure-nav: 78rem;
  --gutter: 80px;
}

/* ============================================================================
   2.  SEMANTIC TOKENS
   ============================================================================ */

:root {
  /* Surfaces */
  --bg:                 var(--stone-100);
  --bg-recessed:        var(--stone-200);
  --bg-elevated:        var(--stone-50);
  --bg-inverse:         var(--ink-500);

  /* Foregrounds */
  --fg:                 var(--ink-500);
  --fg-secondary:       var(--stone-700);
  --fg-tertiary:        var(--stone-600);
  --fg-muted:           var(--stone-500);
  --fg-on-inverse:      var(--stone-100);

  /* Borders */
  --border:             var(--stone-300);
  --border-strong:      var(--stone-500);
  --border-focus:       var(--ink-500);

  /* Brand / accent */
  --brand:              var(--ink-500);
  --brand-hover:        var(--ink-600);
  --brand-press:        var(--ink-700);
  --accent:             var(--oxblood-500);
  --accent-hover:       var(--oxblood-600);

  /* Signals */
  --success:            var(--success-500);
  --warning:            var(--warning-500);
  --danger:             var(--danger-500);
  --info:               var(--info-500);

  /* Links */
  --link:               var(--ink-500);
  --link-hover:         var(--oxblood-500);
  --link-underline:     var(--oxblood-500);

  /* Focus ring — used universally */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink-500);

  /* Semantic type tokens — paragraph-level, used directly by elements below */
  --h1-size:    var(--fs-64);
  --h1-weight:  600;
  --h1-lh:      var(--lh-display);
  --h1-tracking: var(--tracking-display);
  --h1-family:  var(--font-serif);

  --h2-size:    var(--fs-48);
  --h2-weight:  500;
  --h2-lh:      var(--lh-headline);
  --h2-tracking: var(--tracking-display);
  --h2-family:  var(--font-serif);

  --h3-size:    var(--fs-30);
  --h3-weight:  500;
  --h3-lh:      var(--lh-headline);
  --h3-tracking: var(--tracking-headline);
  --h3-family:  var(--font-serif);

  --h4-size:    var(--fs-24);
  --h4-weight:  600;
  --h4-lh:      var(--lh-headline);
  --h4-tracking: var(--tracking-headline);
  --h4-family:  var(--font-sans);

  --h5-size:    var(--fs-18);
  --h5-weight:  600;
  --h5-lh:      var(--lh-tight);
  --h5-tracking: var(--tracking-body);
  --h5-family:  var(--font-sans);

  --p-size:     var(--fs-18);
  --p-weight:   400;
  --p-lh:       var(--lh-loose);
  --p-tracking: var(--tracking-body);
  --p-family:   var(--font-serif);   /* editorial body uses the serif on marketing */

  --p-ui-size:    var(--fs-15);
  --p-ui-weight:  400;
  --p-ui-lh:      var(--lh-body);
  --p-ui-family:  var(--font-sans);  /* product UI body uses the sans */

  --eyebrow-size:  var(--fs-12);
  --eyebrow-weight: 600;
  --eyebrow-lh:    1.2;
  --eyebrow-tracking: var(--tracking-caps);
  --eyebrow-family: var(--font-sans);
  --eyebrow-transform: uppercase;

  --code-size:   0.875em;
  --code-family: var(--font-mono);
}

/* ============================================================================
   3.  ELEMENT DEFAULTS
   ============================================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--h1-weight) var(--h1-size)/var(--h1-lh) var(--h1-family); letter-spacing: var(--h1-tracking); margin: 0; color: var(--fg); }
h2 { font: var(--h2-weight) var(--h2-size)/var(--h2-lh) var(--h2-family); letter-spacing: var(--h2-tracking); margin: 0; color: var(--fg); }
h3 { font: var(--h3-weight) var(--h3-size)/var(--h3-lh) var(--h3-family); letter-spacing: var(--h3-tracking); margin: 0; color: var(--fg); }
h4 { font: var(--h4-weight) var(--h4-size)/var(--h4-lh) var(--h4-family); letter-spacing: var(--h4-tracking); margin: 0; color: var(--fg); }
h5 { font: var(--h5-weight) var(--h5-size)/var(--h5-lh) var(--h5-family); letter-spacing: var(--h5-tracking); margin: 0; color: var(--fg); }

p {
  font: var(--p-weight) var(--p-size)/var(--p-lh) var(--p-family);
  letter-spacing: var(--p-tracking);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
a:hover { opacity: 0.7; }

code, pre, kbd, samp {
  font-family: var(--code-family);
  font-size: var(--code-size);
}

/* Focus state */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-2);
}

/* Selection */
::selection {
  background: var(--ink-500);
  color: var(--stone-100);
}

/* x-cloak — hide elements before JS hydrates (carried over from Korda) */
[x-cloak] { display: none !important; }

/* ============================================================================
   4.  KORDA UTILITY CLASSES
   ============================================================================ */

/* k-eyebrow — small-caps tracked editorial label.
   Sits above headlines; two background variants below. */
.k-eyebrow {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;          /* Korda exception: micro chip */
  background: var(--stone-50);
  box-shadow: var(--shadow-float);
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone-600);
}
.k-eyebrow.on-ink {
  background: rgba(241, 240, 236, 0.10);
  box-shadow: none;
  color: var(--ink-200);
}
.k-eyebrow.flat {
  background: transparent;
  box-shadow: none;
  padding-left: 0; padding-right: 0;
}

/* k-display — full editorial display, periodic full-stop convention */
.k-display {
  font: 500 var(--fs-80)/1.05 var(--font-serif);
  letter-spacing: -0.025em;
  color: var(--fg);
}
@media (max-width: 1023px) { .k-display { font-size: var(--fs-64); } }
@media (max-width: 719px)  { .k-display { font-size: 44px; line-height: 1.05; } }

/* k-h2 — section-title editorial */
.k-h2 {
  font: 500 var(--fs-48)/1.1 var(--font-serif);
  letter-spacing: -0.02em;
  color: var(--fg);
}
@media (max-width: 1023px) { .k-h2 { font-size: var(--fs-38); } }
@media (max-width: 719px)  { .k-h2 { font-size: 32px; line-height: 1.12; } }

/* k-h3 — card title */
.k-h3 {
  font: 500 28px/1.2 var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* k-lead — the editorial hero subhead */
.k-lead {
  font: 400 20px/1.6 var(--font-serif);
  color: var(--stone-700);
  max-width: 640px;
  text-wrap: pretty;
}
@media (max-width: 719px) { .k-lead { font-size: 17px; line-height: 1.55; } }

/* k-prose — body within an editorial card */
.k-prose {
  font: 400 17px/1.65 var(--font-serif);
  color: var(--stone-700);
  text-wrap: pretty;
}
.k-prose-sm {
  font: 400 16px/1.6 var(--font-serif);
  color: var(--ink-100);
}

/* k-card — the canonical floating editorial panel */
.k-card {
  background: var(--stone-50);
  border-radius: var(--radius-5);
  box-shadow: var(--shadow-2);
}
.k-card-ink {
  background: var(--ink-500);
  color: var(--stone-100);
  border-radius: var(--radius-5);
  box-shadow: var(--shadow-cta);
}
.k-card-inset {
  /* a recessed card sat inside another card (the engagement steps) */
  background: var(--ink-600);
  color: var(--stone-100);
  border-radius: var(--radius-4);
}

/* ============================================================================
   Scroll-driven full-bleed expansion — Korda's signature interaction
   ============================================================================
   The dark `.k-card-ink` panels morph from a centred 1248px-max panel with
   rounded corners (28px) into a near-full-bleed panel with flat corners as
   the user scrolls past them. Driven by JS that sets three custom props on
   the section: --bleed-side-pad, --bleed-radius, --bleed-extra-height.
   Mobile (<900px) and prefers-reduced-motion: jumps to expanded state. */

.k-bleed-expand {
  /* Side padding is interpolated by JS; default keeps the panel inset before
     scroll listener attaches, so SSR / no-JS still looks right. */
  padding-left: var(--bleed-side-pad, 24px);
  padding-right: var(--bleed-side-pad, 24px);
}
.k-bleed-expand > .k-card-ink {
  border-radius: var(--bleed-radius, 28px);
  /* Grow to fill the viewport as the user scrolls past — at progress=1 the
     panel is at least 100dvh tall on larger screens, so a 4K monitor or TV
     gets a panel that actually fills the screen instead of capping at the
     560/520px min-height the original spec used. */
  min-height: max(
    calc(var(--bleed-min-height, 0px) + var(--bleed-extra-height, 0px)),
    calc(100dvh * var(--bleed-progress, 0))
  );
}
/* On phones the 100dvh floor would push content well below the fold and
   feel oversized, so we keep the original calc on narrow widths. */
@media (max-width: 799px) {
  .k-bleed-expand > .k-card-ink {
    min-height: calc(var(--bleed-min-height, 0px) + var(--bleed-extra-height, 0px));
  }
}
/* Reduced motion still wins — accessibility floor, not a viewport-size gate. */
@media (prefers-reduced-motion: reduce) {
  .k-bleed-expand { padding-left: 20px; padding-right: 20px; }
  .k-bleed-expand > .k-card-ink { border-radius: var(--radius-5); min-height: 0; }
}

/* k-btn — base button, always a pill (Korda nav/CTA pill exception) */
.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 500 15px var(--font-sans);
  padding: 15px 26px;
  border-radius: 999px;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
  white-space: nowrap;
}
.k-btn-primary {
  background: var(--ink-500);
  color: var(--stone-100);
  box-shadow: 0 2px 4px 0 rgba(22, 28, 50, 0.06), 0 12px 28px -8px rgba(22, 28, 50, 0.18);
}
.k-btn-primary:hover { background: var(--ink-600); }
.k-btn-secondary {
  background: var(--stone-50);
  color: var(--ink-500);
  box-shadow: 0 1px 2px 0 rgba(22, 28, 50, 0.04), 0 6px 14px -6px rgba(22, 28, 50, 0.08);
}
.k-btn-secondary:hover { opacity: 0.9; }
.k-btn-on-ink {
  background: var(--stone-100);
  color: var(--ink-500);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.20), 0 12px 24px -8px rgba(0, 0, 0, 0.30);
}
.k-btn-sm {
  padding: 9px 18px;
  font-size: 14px;
}

/* k-link — inline editorial link, oxblood underline */
.k-link {
  color: var(--ink-500);
  text-decoration: underline;
  text-decoration-color: var(--oxblood-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--duration-base) var(--ease-out);
}
.k-link:hover { opacity: 0.7; }

/* k-arrow — typographic arrow in CTAs ("Read the spec →") */
.k-arrow::after { content: " →"; }

/* k-input — used inside the dark CTA form */
.k-input {
  font: 400 15px var(--font-sans);
  padding: 14px 18px;
  background: var(--ink-700);
  color: var(--stone-100);
  border: 0;
  border-radius: var(--radius-3);
  width: 100%;
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.k-input::placeholder { color: var(--ink-200); }
.k-input:focus {
  outline: none;
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 0 0 2px var(--ink-500), 0 0 0 4px var(--stone-100);
}
.k-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.k-label > span {
  font: 500 13px var(--font-sans);
  color: var(--ink-100);
  padding-left: 4px;
}

/* k-page — outer max-width container that sets the page rhythm */
.k-page { max-width: 1248px; margin-inline: auto; box-sizing: border-box; }

/* Reveal animation — fade only, 220ms, no transform staggers per Korda motion */
@media (prefers-reduced-motion: no-preference) {
  .k-reveal { animation: k-reveal var(--duration-slow) var(--ease-out) both; }
  .k-reveal-1 { animation-delay: 60ms; }
  .k-reveal-2 { animation-delay: 120ms; }
  .k-reveal-3 { animation-delay: 200ms; }
  .k-reveal-4 { animation-delay: 280ms; }
}
@keyframes k-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   5.  FLOATING PILL NAV — Korda Nav.jsx, ported to vanilla CSS + tiny IO
   ============================================================================ */

.k-nav-shell {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 20px 24px 0;
  transition: padding var(--duration-slow) var(--ease-out);
}
.k-nav-shell.is-scrolled { padding: 10px 16px 0; }

.k-nav-pill {
  max-width: 1248px;
  margin: 0 auto;
  background: rgba(241, 240, 236, 0.78);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
          backdrop-filter: saturate(140%) blur(14px);
  border-radius: 999px;                       /* Korda nav-pill exception */
  box-shadow: 0 1px 2px 0 rgba(22,28,50,0.03), 0 6px 16px -8px rgba(22,28,50,0.08);
  /* No `overflow: hidden` here — it would clip the avatar dropdown popover
     which extends below the pill. Border-radius still clips the pill's own
     background; descendants positioned absolute escape it as expected. */
  transition: max-width var(--duration-slow) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.k-nav-shell.is-scrolled .k-nav-pill {
  max-width: 920px;
  background: rgba(241, 240, 236, 0.86);
  box-shadow: 0 2px 4px 0 rgba(22,28,50,0.05), 0 18px 40px -14px rgba(22,28,50,0.18);
}
@media (max-width: 1023px) {
  .k-nav-pill { max-width: 920px; border-radius: 28px; }
  .k-nav-shell { padding: 14px 16px 0; }
}

.k-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 12px 28px;
  transition: padding var(--duration-slow) var(--ease-out);
}
.k-nav-shell.is-scrolled .k-nav-bar { padding: 10px 12px 10px 22px; }
@media (max-width: 1023px) { .k-nav-bar { padding: 10px 10px 10px 20px; } }

.k-wordmark {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  font: 500 22px/1 var(--font-serif);
  letter-spacing: -0.02em;
  color: var(--ink-500);
}
.k-wordmark .dot { color: var(--oxblood-500); }
.k-wordmark.lg { font-size: 24px; }

.k-nav-links {
  display: flex;
  gap: 4px;
}
.k-nav-link {
  font: 500 14px var(--font-sans);
  color: var(--ink-500);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background var(--duration-base) var(--ease-out);
}
.k-nav-link:hover { background: rgba(22, 28, 50, 0.06); }
@media (max-width: 1023px) { .k-nav-links { display: none; } }

.k-nav-cta {
  font: 500 14px var(--font-sans);
  padding: 11px 20px;
  background: var(--ink-500);
  color: var(--stone-100);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px 0 rgba(22,28,50,0.06), 0 6px 14px -6px rgba(22,28,50,0.18);
  transition: padding var(--duration-slow) var(--ease-out);
}
.k-nav-shell.is-scrolled .k-nav-cta { padding: 9px 16px; }
@media (max-width: 1023px) { .k-nav-cta { padding: 9px 16px; } }

.k-nav-burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 0;
  background: rgba(22, 28, 50, 0.06);
  color: var(--ink-500);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out);
}
.k-nav-burger.is-open { background: var(--ink-500); color: var(--stone-100); }
.k-nav-burger .b-line {
  transition: transform var(--duration-base) var(--ease-out);
  transform-origin: 9px 9px;
  transform-box: view-box;
}
.k-nav-burger .b-top    { transform: translateY(-3px); }
.k-nav-burger .b-bottom { transform: translateY(3px); }
.k-nav-burger.is-open .b-top    { transform: translateY(0) rotate(45deg); }
.k-nav-burger.is-open .b-bottom { transform: translateY(0) rotate(-45deg); }
@media (max-width: 1023px) { .k-nav-burger { display: inline-flex; } }

/* Mobile drawer — max-height pattern so the closed state truly collapses */
.k-nav-drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 360ms var(--ease-out);
}
.k-nav-drawer.is-open { max-height: 480px; }
.k-nav-drawer-inner {
  padding: 4px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.k-nav-drawer-link {
  font: 500 17px/1 var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--ink-500);
  text-decoration: none;
  padding: 14px;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 220ms var(--ease-out),
              transform 280ms var(--ease-out);
}
.k-nav-drawer.is-open .k-nav-drawer-link { opacity: 1; transform: translateY(0); }
/* Staggered fade-in per item on open — closing fades all together (no delay) */
.k-nav-drawer.is-open .k-nav-drawer-link:nth-child(1) { transition-delay: 120ms; }
.k-nav-drawer.is-open .k-nav-drawer-link:nth-child(2) { transition-delay: 150ms; }
.k-nav-drawer.is-open .k-nav-drawer-link:nth-child(3) { transition-delay: 180ms; }
.k-nav-drawer.is-open .k-nav-drawer-link:nth-child(4) { transition-delay: 210ms; }
.k-nav-drawer.is-open .k-nav-drawer-link:nth-child(5) { transition-delay: 240ms; }
.k-nav-drawer-link.cta {
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 12px 14px;
  margin-top: 8px;
  border-top: 1px solid rgba(22, 28, 50, 0.08);
}

/* ============================================================================
   6.  FAQ ACCORDION — Korda card stack with morphing + → × toggle
   ============================================================================ */

.k-faq {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.k-faq-item {
  background: var(--stone-50);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--duration-base) var(--ease-out);
  overflow: hidden;
}
.k-faq-item:hover { box-shadow: var(--shadow-2); }
.k-faq-item[open] { box-shadow: var(--shadow-2); }

.k-faq-summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
}
.k-faq-summary::-webkit-details-marker { display: none; }   /* Safari */
.k-faq-summary::marker { display: none; }                    /* Firefox */

.k-faq-q {
  font: 500 17px/1.35 var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--ink-500);
  text-wrap: pretty;
}
.k-faq-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--stone-100);
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-base) var(--ease-out),
              color      var(--duration-base) var(--ease-out),
              transform  var(--duration-base) var(--ease-out);
}
.k-faq-item[open] .k-faq-toggle {
  background: var(--ink-500);
  color: var(--stone-100);
  transform: rotate(45deg);
}
.k-faq-line {
  transform-origin: 9px 9px;
  transform-box: view-box;
}

.k-faq-body {
  padding: 0 28px 24px 28px;
}
.k-faq-body p {
  font: 400 15px/1.65 var(--font-serif);
  color: var(--stone-700);
  text-wrap: pretty;
  max-width: 640px;
}
@media (max-width: 539px) {
  .k-faq-summary  { padding: 18px 20px; gap: 12px; }
  .k-faq-q        { font-size: 16px; }
  .k-faq-body     { padding: 0 20px 20px 20px; }
}

/* ============================================================================
   7.  FORM STATUS — used after the contact form submits
   ============================================================================ */

.k-form-status {
  font: 500 15px var(--font-sans);
  color: var(--stone-100);
  padding: 16px 20px;
  background: rgba(241, 240, 236, 0.08);
  border-radius: var(--radius-3);
}
.k-form-status.error { color: var(--oxblood-300); background: rgba(155, 42, 42, 0.10); }

/* ============================================================================
   8.  DARK MODE ANCHOR
   ============================================================================ */

[data-theme="dark"] {
  /* Backgrounds */
  --bg:                 var(--ink-700);
  --bg-recessed:        var(--ink-800);
  --bg-elevated:        var(--ink-600);
  --bg-inverse:         var(--stone-100);

  /* Foregrounds */
  --fg:                 var(--stone-100);
  --fg-secondary:       var(--ink-100);
  --fg-tertiary:        var(--ink-200);
  --fg-muted:           var(--ink-300);
  --fg-on-inverse:      var(--ink-500);

  /* Borders */
  --border:             #1F2A45;
  --border-strong:      #2A3656;
  --border-focus:       var(--ink-100);

  /* Brand / accent */
  --brand:              var(--stone-100);
  --brand-hover:        var(--stone-50);
  --brand-press:        var(--stone-200);
  --accent:             var(--oxblood-300);

  /* Links */
  --link:               var(--stone-100);
  --link-hover:         var(--oxblood-300);
  --link-underline:     var(--oxblood-300);

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink-100);

  /* Shadows — ink-heavy versions for dark surfaces */
  --shadow-1:     0 1px 0 0 rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.5);
  --shadow-2:     0 1px 0 0 rgba(0,0,0,0.5), 0 6px 12px -2px rgba(0,0,0,0.6);
  --shadow-3:     0 2px 0 0 rgba(0,0,0,0.6), 0 12px 28px -8px rgba(0,0,0,0.7);
  --shadow-float: 0 1px 0 0 rgba(0,0,0,0.4), 0 8px 20px -8px rgba(0,0,0,0.6);
  --shadow-cta:   0 4px 8px 0 rgba(0,0,0,0.5), 0 24px 60px -12px rgba(0,0,0,0.7);
}
[data-theme="dark"] .k-nav-pill {
  background: rgba(15, 21, 33, 0.86);
}

/* ============================================================================
   9.  THEME TOGGLE
   ============================================================================
   The toggle is a 36px pill in the nav. It uses two SVG glyphs (sun + moon)
   stacked in the same span; CSS swaps which one is visible based on the
   `data-theme` attribute on `<html>`. The handler script lives in the
   ThemeToggle component — this stylesheet just controls visual state.
   ============================================================================ */

.theme-toggle:hover {
  background: var(--bg-recessed);
}

.theme-toggle .theme-toggle-sun { display: inline-block; }
.theme-toggle .theme-toggle-moon { display: none; }

[data-theme="dark"] .theme-toggle .theme-toggle-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-toggle-moon { display: inline-block; }

/* ============================================================================
   10.  RESPONSIVE — small viewports
   ============================================================================ */

@media (max-width: 720px) {
  /* Page container: tighten gutters. */
  .page-nav { padding: 12px 12px 0; }
  .page-nav-inner { padding: 10px 14px; }

  /* Stat-tile rows: 4-up becomes 2-up. */
  .page-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Two-column chart grids stack. */
  .page-charts {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Page headers shrink display type. */
  .page-header h1, .page-header h2 {
    font-size: var(--fs-38);
  }

  /* Stat tiles: trim padding and value size on phones. The value gets a
     dedicated class so this rule doesn't accidentally also blow up the
     caption font (which was the previous bug). */
  .stat-tile {
    padding: 18px;
  }
  .stat-tile-value {
    font-size: var(--fs-30) !important;
  }

  /* Charts: shrink to fit container width. */
  .chart-line, .chart-bar {
    width: 100%;
    height: auto;
  }

  /* Form rows on phones: stack to one column. */
  .page-form-row,
  .page-form-row-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Profile, leaderboard rows: trim font sizes slightly. */
  body { font-size: var(--fs-15); }
}

@media (max-width: 480px) {
  /* Even tighter on small phones. */
  .page-stats {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .page-header h1 { font-size: var(--fs-30); }
  .page-header h2 { font-size: var(--fs-24); }
}

/* ============================================================================
   Prediction-specific primitives — built on top of Korda
   ============================================================================ */

/* k-input-light — light-surface input variant (Korda's k-input is dark) */
.k-input-light {
  font: 400 15px var(--font-sans);
  padding: 12px 16px;
  background: var(--bg-elevated);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  width: 100%;
  box-sizing: border-box;
}
.k-input-light::placeholder { color: var(--fg-muted); }
.k-input-light:focus {
  outline: none;
  border-color: var(--ink-500);
  box-shadow: 0 0 0 3px rgba(22, 28, 50, 0.10);
}

/* ============================================================================
   Create Market page — cm-* primitives
   ============================================================================
   Two-column layout ≥1100px: form left (~60%), sticky preview card right (~340px).
   Kind-switching via class toggles on the form root (.kind-binary / .kind-multi
   / .kind-continuous). No dynamic-render framework.
   ============================================================================ */

/* Two-column wrapper */
.cm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--air-3);
  align-items: start;
}
@media (min-width: 1100px) {
  .cm-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
  }
}

/* Form column: sections separated by --air-2 */
.cm-form {
  display: flex;
  flex-direction: column;
  gap: var(--air-2);
}

/* Section card — k-card with inner padding */
.cm-section.k-card,
.cm-details.k-card {
  /* k-card already provides background + shadow */
}
.cm-section-inner {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cm-section-header {
  margin-bottom: 2px;
}

/* Field block */
.cm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Label */
.cm-label {
  font: 500 13px var(--font-sans);
  color: var(--fg);
  padding-left: 2px;
}

/* Hint / helper text */
.cm-hint {
  font: 400 12px var(--font-sans);
  color: var(--fg-muted);
  padding-left: 2px;
}

/* Large title input variant */
.cm-input-title {
  font-size: 17px !important;
  padding: 14px 18px !important;
}

/* Inline error banner */
.cm-error-banner {
  background: rgba(156, 42, 42, 0.08);
  border-left: 3px solid var(--danger-500, #9C2A2A);
  border-radius: var(--radius-2);
  padding: 12px 16px;
  font: 500 14px var(--font-sans);
  color: var(--danger-500, #9C2A2A);
  margin-bottom: var(--air-2);
}

/* ---- Segmented kind control ---- */
.cm-kind-control {
  display: flex;
  gap: 0;
  background: var(--bg-recessed, var(--stone-200));
  border-radius: var(--radius-3);
  padding: 4px;
  flex-wrap: wrap;
}
.cm-kind-option {
  flex: 1 1 auto;
  cursor: pointer;
}
.cm-kind-radio {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.cm-kind-label {
  display: block;
  text-align: center;
  padding: 9px 16px;
  border-radius: calc(var(--radius-3) - 4px);
  font: 500 14px var(--font-sans);
  color: var(--fg-muted);
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.cm-kind-radio:checked + .cm-kind-label {
  background: var(--bg-elevated);
  color: var(--fg);
  box-shadow: var(--shadow-float);
}
.cm-kind-option:hover .cm-kind-radio:not(:checked) + .cm-kind-label {
  color: var(--fg);
}

/* ---- Kind hint line ---- */
.cm-kind-desc {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--fg-muted);
  min-height: 1.5em;
}
/* Default: show binary hint, hide others. */
.cm-kind-desc .cm-kind-hint-binary     { display: inline; }
.cm-kind-desc .cm-kind-hint-multi      { display: none; }
.cm-kind-desc .cm-kind-hint-continuous { display: none; }

.cm-form.kind-multi .cm-kind-desc .cm-kind-hint-binary      { display: none; }
.cm-form.kind-multi .cm-kind-desc .cm-kind-hint-multi       { display: inline; }
.cm-form.kind-continuous .cm-kind-desc .cm-kind-hint-binary     { display: none; }
.cm-form.kind-continuous .cm-kind-desc .cm-kind-hint-continuous { display: inline; }

/* ---- Conditional sections (shown/hidden by kind) ---- */
.cm-conditional { display: none; }

/* multi-kind fields */
.cm-form.kind-multi .cm-show-multi { display: block; }
/* continuous-kind fields */
.cm-form.kind-continuous .cm-show-continuous { display: block; }

/* Range row: three columns */
.cm-range-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 480px) {
  .cm-range-row { grid-template-columns: 1fr; }
}

/* ---- Advanced disclosure ---- */
.cm-details {
  /* inherits k-card padding via .cm-section-inner inside; summary has its own */
}
.cm-details-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
}
.cm-details-summary::-webkit-details-marker { display: none; }
.cm-details-summary::marker { display: none; }
.cm-details-chevron {
  transition: transform var(--duration-base) var(--ease-out);
  color: var(--fg-muted);
}
.cm-details[open] .cm-details-chevron { transform: rotate(180deg); }

/* ---- Tag wrapper ---- */
.cm-tag-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-3);
  background: var(--bg-elevated);
  min-height: 44px;
  cursor: text;
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.cm-tag-wrapper:focus-within {
  border-color: var(--ink-500);
  box-shadow: 0 0 0 3px rgba(26, 37, 64, 0.10);
}

/* m-tile-yes / m-tile-no — large outcome tiles for the trade rail */
.m-tile-yes, .m-tile-no {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 12px;
  border-radius: var(--radius-3);
  border: 1px solid transparent;
  background: var(--bg-elevated);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
  font-family: var(--font-sans);
}
.m-tile-yes { color: #225B3E; background: rgba(47, 111, 78, 0.08); border-color: rgba(47, 111, 78, 0.20); }
.m-tile-no  { color: #7A2222; background: rgba(156, 42, 42, 0.06); border-color: rgba(156, 42, 42, 0.16); }
.m-tile-yes.is-active { background: #225B3E; color: var(--stone-100); border-color: #225B3E; }
.m-tile-no.is-active  { background: #7A2222; color: var(--stone-100); border-color: #7A2222; }
.m-tile-yes .m-tile-label, .m-tile-no .m-tile-label { font-size: 13px; font-weight: 500; }
.m-tile-yes .m-tile-price, .m-tile-no .m-tile-price { font: 600 18px var(--font-mono); font-variant-numeric: tabular-nums; }

/* m-rail — sticky trade-rail container */
.m-rail {
  position: sticky;
  top: 16px;
  align-self: start;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 1099px) {
  .m-rail { position: static; }
}

/* m-amount — big mono numeric input */
.m-amount {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: var(--radius-3);
  border: 1px solid var(--border);
}
.m-amount .m-amount-prefix {
  font: 500 16px var(--font-sans);
  color: var(--fg-muted);
  margin-right: 8px;
}
.m-amount input {
  flex: 1;
  min-width: 0;
  font: 500 28px var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
}

/* m-quick — quick-add chips below the amount */
.m-quick { display: flex; gap: 6px; }
.m-quick .m-quick-chip {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-tertiary);
  font: 500 12px var(--font-sans);
  cursor: pointer;
}
.m-quick .m-quick-chip:hover { background: var(--bg-elevated); color: var(--fg); }

/* m-preview — inverted ink mini card showing live preview */
.m-preview {
  background: var(--ink-500);
  color: var(--stone-100);
  border-radius: var(--radius-3);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.m-preview .m-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.m-preview .m-preview-label { font: 500 12px var(--font-sans); color: var(--ink-100); }
.m-preview .m-preview-value { font: 500 16px var(--font-mono); font-variant-numeric: tabular-nums; }
.m-preview .m-preview-payout { font-size: 22px; color: #6FCF97; }

/* m-feed-item — trade activity row */
.m-feed-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border-radius: var(--radius-3);
}
.m-feed-item .m-feed-time { font: 400 12px var(--font-mono); color: var(--fg-muted); }
.m-feed-item .m-feed-body { font: 400 14px var(--font-sans); color: var(--fg); }
.m-feed-item .m-feed-amount { font: 500 14px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg); }
@media (max-width: 720px) {
  .m-feed-item { grid-template-columns: 1fr auto; gap: 6px; }
  .m-feed-item .m-feed-time { grid-column: 1 / -1; }
}

/* m-position-row — position list row with avatar */
.m-position-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
}
.m-position-row .m-position-handle { font: 500 14px var(--font-sans); color: var(--fg); }
.m-position-row .m-position-shares { font: 500 14px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg); }
.m-position-row .m-position-avg { font: 400 12px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg-muted); }

/* m-bottom-cta — mobile sticky-bottom action bar */
.m-bottom-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 50;
}
@media (max-width: 720px) {
  .m-bottom-cta { display: flex; }
}
.m-bottom-cta .m-bottom-cta-price { font: 600 16px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg); }
.m-bottom-cta .m-bottom-cta-button { padding: 12px 20px; }

/* m-sheet — mobile bottom-sheet drawer */
.m-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--ink-500);
  color: var(--stone-100);
  border-radius: var(--radius-5) var(--radius-5) 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0));
  z-index: 60;
  transform: translateY(100%);
  transition: transform 280ms var(--ease-out);
}
.m-sheet.is-open { transform: translateY(0); }
.m-sheet .m-sheet-handle {
  width: 36px; height: 4px;
  background: var(--ink-300);
  border-radius: 999px;
  margin: 0 auto 14px;
}

/* k-nav-avatar — popover toggle styles (added by A3) */
.k-nav-avatar-pop.is-open { display: flex !important; }
.k-nav-avatar-btn:hover { background: rgba(22, 28, 50, 0.06); }

/* On small screens the wordmark + balance chip + @handle + avatar + burger
   row overflows the pill. Drop the @handle text (avatar circle is the
   handle) and tighten the balance chip — burger stays clickable. */
@media (max-width: 720px) {
  .k-nav-handle { display: none; }
  .k-nav-avatar-btn { padding: 4px 4px 4px 4px; }
  .k-nav-balance { padding: 6px 10px; font-size: 12px; }
  .k-nav-bar { padding: 8px 8px 8px 16px; gap: 6px; }
}

/* uPlot legend overrides — keep the per-series readout compact under our
   chart cards (one line per series, monospace value column). uPlot ships
   a workable default; this just aligns it with the design system. */
.u-legend { font: 400 12px var(--font-mono) !important; color: var(--fg-secondary) !important; }
.u-legend .u-series { padding: 2px 8px !important; white-space: nowrap; }
.u-legend .u-marker { width: 10px !important; height: 10px !important; border-radius: 2px !important; }
.u-legend .u-value { font-variant-numeric: tabular-nums; }

/* k-foot-shell / k-foot-pill — mirror of .k-nav-shell / .k-nav-pill at the
   bottom. Translucent floating pill on the page bg-warm. Marketing-band
   look (full-width ink) is intentionally avoided. */
.k-foot-shell {
  padding: 28px 24px 40px;
  margin-top: 64px;
}
.k-foot-pill {
  max-width: 1248px;
  margin: 0 auto;
  background: rgba(241, 240, 236, 0.78);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
          backdrop-filter: saturate(140%) blur(14px);
  border-radius: 999px;
  box-shadow: 0 1px 2px 0 rgba(22,28,50,0.03), 0 6px 16px -8px rgba(22,28,50,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  flex-wrap: wrap;
}
.k-foot-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.k-foot-links a {
  font: 500 13px var(--font-sans);
  color: var(--fg-secondary);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}
.k-foot-links a:hover { color: var(--fg); }
@media (max-width: 1023px) {
  .k-foot-pill { max-width: 920px; border-radius: 28px; padding: 16px 20px; }
  .k-foot-shell { padding: 20px 16px 32px; }
}

/* k-pill-group — segmented control container. Apply this on the wrapper so
   the chip group has a clearly recessed surface against bg-warm, instead of
   the near-invisible bg-elevated that earlier markup used. */
.k-pill-group {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-recessed);
  border-radius: 999px;
}

/* k-pill — segmented filter pill (markets list, leaderboard period selector) */
.k-pill {
  padding: 8px 16px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--fg-tertiary);
  font: 500 13px var(--font-sans);
  cursor: pointer;
  /* Multi-word labels like "Open positions" / "All trades" must stay on one
     line — pill height matters more than horizontal compactness. */
  white-space: nowrap;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.k-pill:hover { color: var(--fg); background: rgba(22, 28, 50, 0.06); }
.k-pill.is-active {
  background: var(--ink-500);
  color: var(--stone-100);
  box-shadow: 0 1px 2px rgba(22, 28, 50, 0.10);
}
.k-pill.is-active:hover { background: var(--ink-600); color: var(--stone-100); }
.k-pill.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.k-pill.is-disabled:hover { background: transparent; color: var(--fg-tertiary); }

/* m-card-market — hover lift for market list cards */
.m-card-market .k-card { box-shadow: var(--shadow-1); }
.m-card-market:hover .k-card { box-shadow: var(--shadow-2); }

/* m-status-panel — shown on resolved/cancelled markets above the outcomes/rail row */
.m-status-panel {
  background: var(--bg-elevated);
  border-left: 3px solid var(--info-500);
  border-radius: var(--radius-3);
  padding: 18px 20px;
  margin-bottom: var(--air-3);
}
.m-status-panel.is-cancelled { border-left-color: var(--danger-500); }
.m-status-panel .m-status-headline { font: 500 16px var(--font-sans); color: var(--fg); }
.m-status-panel .m-status-note { font: 400 14px/1.6 var(--font-serif); color: var(--fg-secondary); margin-top: 6px; max-width: var(--measure-prose); }
.m-status-panel .m-status-attribution { font: 400 12px var(--font-mono); color: var(--fg-muted); margin-top: 8px; font-variant-numeric: tabular-nums; }

/* m-resolve-panel — creator-only resolve form */
.m-resolve-panel { padding: 22px; margin-bottom: var(--air-3); }
.m-resolve-panel h3 { font: 500 18px/1.2 var(--font-serif); color: var(--stone-100); margin: 0 0 12px; letter-spacing: -0.01em; }
.m-resolve-panel select, .m-resolve-panel textarea { font: 400 15px var(--font-sans); padding: 12px 14px; background: var(--ink-700); color: var(--stone-100); border: 0; border-radius: var(--radius-3); width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.m-resolve-panel textarea { min-height: 80px; resize: vertical; }

/* m-outcome-row — clickable row in the outcomes column */
.m-outcome-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: var(--bg-elevated);
  border: 1px solid transparent;
  border-radius: var(--radius-3);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out);
}
.m-outcome-row:hover { border-color: var(--ink-300); }
.m-outcome-row.is-selected { border-color: var(--ink-500); background: var(--bg); }
.m-outcome-row .m-outcome-label { font: 500 16px var(--font-sans); color: var(--fg); }
.m-outcome-row .m-outcome-price { font: 600 18px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg); }
.m-outcome-row .m-outcome-bar { width: 80px; height: 6px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.m-outcome-row .m-outcome-bar-fill { height: 100%; background: var(--ink-500); }
.m-outcome-row .m-outcome-hold { grid-column: 1 / -1; font: 400 12px var(--font-mono); color: var(--fg-muted); margin-top: 2px; }

/* m-detail-grid — two-column layout on desktop, stacked on tablet/mobile */
.m-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--air-3); }
@media (min-width: 1100px) {
  .m-detail-grid { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* m-chart — SVG chart card wrapper with range tabs */
.m-chart {}
.m-range-tab { padding: 6px 12px; border-radius: 999px; background: var(--bg-elevated); font: 500 11px var(--font-mono); color: var(--fg-muted); border: none; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.m-range-tab.is-active { background: var(--bg); color: var(--fg); }
.m-range-tab:hover:not(.is-active) { background: var(--bg); color: var(--fg-secondary); }

/* m-position-avatar — initial-circle avatar for position rows */
.m-position-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--fg);
  font: 600 12px var(--font-sans);
  flex-shrink: 0;
  text-transform: uppercase;
}

/* Validation hint — only visible for context */
.cm-validation-hint {
  font-style: italic;
}

/* ---- Submit row ---- */
.cm-submit-row {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  align-items: center;
  padding-top: var(--air-1);
}

/* ---- Preview aside ---- */
.cm-preview-aside {
  /* On mobile: full-width below the form; on desktop: sticky. */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 1100px) {
  .cm-preview-aside {
    position: sticky;
    top: 88px; /* below the floating nav pill */
    align-self: start;
  }
}
/* Hide the preview aside entirely on phones to keep the form clean. */
@media (max-width: 719px) {
  .cm-preview-aside { display: none; }
}

.cm-preview-label {
  /* eyebrow label above the preview card */
}
.cm-preview-card {
  min-height: 180px;
  transition: box-shadow var(--duration-base) var(--ease-out);
}
.cm-preview-footer {
  font: 400 12px var(--font-sans);
  color: var(--fg-muted);
  text-align: center;
}

/* ============================================================================
   11.  SECONDARY PAGE PRIMITIVES — dashboard, portfolio, leaderboard, etc.
   ============================================================================ */

/* m-podium — leaderboard top-3 cards. Mobile stacks vertically. */
.m-podium {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--air-2);
}
@media (max-width: 720px) {
  .m-podium {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* page-portfolio-header — column labels for open positions table.
   Hidden on mobile (card layout takes over). */
.page-portfolio-header {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  padding: 0 18px;
  font: 600 11px/1 var(--font-sans);
  color: var(--fg-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .page-portfolio-header { display: none; }
  /* Portfolio rows collapse to card layout on mobile */
  .page-portfolio-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* k-welcome — first-login toast pinned bottom-right. Single-use; cookie hides it after dismiss. */
.k-welcome {
  position: fixed;
  right: 16px;
  bottom: 80px; /* sit above the footer pill */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  font: 400 14px var(--font-sans);
  color: var(--fg);
  max-width: calc(100vw - 32px);
  z-index: 100;
}
.k-welcome-body strong { font-weight: 600; }
.k-welcome .k-mono { font-family: var(--font-mono); }
.k-welcome-dismiss {
  border: 0;
  background: var(--fg);
  color: var(--bg-elevated);
  font: 500 13px var(--font-sans);
  padding: 6px 12px;
  border-radius: var(--radius-2);
  cursor: pointer;
}
.k-welcome-dismiss:hover { opacity: 0.85; }
@media (max-width: 480px) {
  .k-welcome { right: 8px; left: 8px; bottom: 96px; }
}


/* cm-tag-suggest — autocomplete dropdown for the tag input on /markets/new. */
.cm-tag-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
}
.cm-tag-suggest[hidden] { display: none; }
.cm-tag-suggest-item {
  padding: 8px 12px;
  font: 500 13px var(--font-sans);
  color: var(--fg);
  cursor: pointer;
}
.cm-tag-suggest-item:hover,
.cm-tag-suggest-item.is-active {
  background: var(--bg-recessed);
  color: var(--fg);
}