/* G8N•AI Design System v1.1 — bundled from github g8n-ai/design-system (do not hand-edit) */
@layer g8n {

/* ===== tokens/fonts.css ===== */
/* ============================================================
   G8N•AI — FONTS  (v1.1 · 2026-06)
   The type system is an EMAIL-SAFE SYSTEM STACK — Georgia (headlines)
   + Verdana (body / wordmark), with Geneva as the classic-Mac sans
   fallback. These render natively everywhere (web, email, PWA) with no
   network dependency. There are intentionally NO webfont @font-face
   url() rules — v1.0's Roboto Slab / Roboto were retired (CHANGELOG 1.1.0).
   Do NOT reintroduce webfonts into the type tokens (they live in
   tokens/type-and-tint.css).

   The one @font-face below is a LOCAL-ONLY declaration: it tells the
   build that 'Geneva' is a system font that is already present, so there
   is no font file to ship or upload — it is not a missing webfont.
   ============================================================ */

@font-face {
  font-family: "Geneva";
  src: local("Geneva");
}

/* ===== tokens/colors.css ===== */
/* ============================================================
   G8N•AI — COLOR TOKENS
   One accent (orange). Everything else is surface + ink.
   Source of truth: G8N•AI Visual Brand Guidelines (2026-06).
   ============================================================ */

:root {
  /* --- Base palette --- */
  --g8n-cream:        #FDFBF4; /* Light surface (paper) */
  --g8n-rule:         #E8E3D6; /* Faint ruled/grid lines on cream */
  --g8n-navy:         #002642; /* Ink / linework / text on light */
  --g8n-charcoal:     #171717; /* Dark surface (board) */
  --g8n-charcoal-alt: #101a2a; /* Alt dark navy board */
  --g8n-orange:       #d97706; /* THE single signature accent */
  --g8n-white:        #FFFFFF; /* Chalk / text on dark */

  /* Orange tints/shades for states & glows (derived, not new accents) */
  --g8n-orange-hover: #c2690a; /* pressed/darker */
  --g8n-orange-soft:  #f0a64b; /* lighter, for subtle highlight on dark */
  --g8n-orange-glow:  rgba(217, 119, 6, 0.28); /* soft accent glow */
  --g8n-orange-wash:  rgba(217, 119, 6, 0.10); /* faint accent fill */

  /* Neutral ink steps (navy-derived, for hierarchy on light) */
  --g8n-ink-900: #002642;
  --g8n-ink-700: #1c3a52;
  --g8n-ink-500: #4a6173;
  --g8n-ink-300: #8a99a4;
  --g8n-ink-100: #cdd5db;

  /* Neutral chalk steps (for hierarchy on dark) */
  --g8n-chalk-100: #FFFFFF;
  --g8n-chalk-300: #d6d6d6;
  --g8n-chalk-500: #9a9a9a;
  --g8n-chalk-700: #5c5c5c;

  /* --- Archived (DO NOT use in new work) --- */
  --g8n-archive-crimson: #840032;
  --g8n-archive-amber:   #E59500;

  /* ============================================================
     SEMANTIC ALIASES — default (light variant / paper)
     ============================================================ */
  --surface-page:      var(--g8n-cream);
  --surface-card:      var(--g8n-cream);
  --surface-raised:    #ffffff;
  --surface-rule:      var(--g8n-rule);

  --text-strong:       var(--g8n-navy);
  --text-body:         var(--g8n-ink-700);
  --text-muted:        var(--g8n-ink-500);
  --text-faint:        var(--g8n-ink-300);
  /* a11y (WCAG AA): text ON the orange accent is navy ink — navy-on-orange = 4.86:1.
     (White-on-orange was 3.19:1 and failed AA.) Navy is ink, not a second accent. */
  --text-on-accent:    var(--g8n-navy);

  --accent:            var(--g8n-orange);
  --accent-hover:      var(--g8n-orange-hover);
  --accent-glow:       var(--g8n-orange-glow);
  --accent-wash:       var(--g8n-orange-wash);

  --border-ink:        var(--g8n-navy);
  --border-subtle:     var(--g8n-rule);
}

/* ============================================================
   DARK VARIANT (board) — apply on a wrapper:
   <div class="g8n-dark"> … </div>  or  data-theme="dark"
   Same orange, inverted surface + ink.
   ============================================================ */
.g8n-dark,
[data-theme="dark"] {
  --surface-page:    var(--g8n-charcoal);
  --surface-card:    var(--g8n-charcoal);
  --surface-raised:  #1f1f1f;
  --surface-rule:    rgba(255, 255, 255, 0.07);

  --text-strong:     var(--g8n-white);
  --text-body:       var(--g8n-chalk-300);
  --text-muted:      var(--g8n-chalk-500);
  --text-faint:      var(--g8n-chalk-700);
  --text-on-accent:  var(--g8n-navy);   /* navy-on-orange (4.86:1) holds on the dark surface too */

  --accent:          var(--g8n-orange);
  --accent-hover:    var(--g8n-orange-soft);
  --accent-glow:     var(--g8n-orange-glow);
  --accent-wash:     rgba(217, 119, 6, 0.14);

  --border-ink:      var(--g8n-white);
  --border-subtle:   rgba(255, 255, 255, 0.10);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   G8N•AI — TYPOGRAPHY TOKENS  (v1.1 · email-safe system stack)
   Headlines: Georgia. Body & UI: Verdana. Both render natively
   everywhere (web/email/PWA) — no webfonts. The tint ladder and the
   wordmark treatment live in tokens/type-and-tint.css (imported after).
   In-illustration lettering is hand-marker (image only).
   ============================================================ */

:root {
  /* Families — v1.1 system stack (was Roboto Slab / Roboto in v1.0) */
  --font-display: Georgia, "Times New Roman", serif;        /* headlines  */
  --font-body:    Verdana, Geneva, sans-serif;              /* body + UI  */
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Weights */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-black:    900; /* @kind other */ /* Georgia/Verdana have no 900 — clamps to bold */

  /* Type scale (rem, 1rem = 16px) — content-first, generous */
  --fs-hero:    4.5rem;   /* 72px  big stat / quote hero */
  --fs-display: 3rem;     /* 48px  H1 / slide title */
  --fs-h1:      2.25rem;  /* 36px  */
  --fs-h2:      1.75rem;  /* 28px  */
  --fs-h3:      1.375rem; /* 22px  */
  --fs-lg:      1.125rem; /* 18px  lead/body-large */
  --fs-base:    1rem;     /* 16px  body */
  --fs-sm:      0.875rem; /* 14px  secondary */
  --fs-xs:      0.75rem;  /* 12px  eyebrow / meta / caption */

  /* Line heights */
  --lh-tight:   1.05; /* @kind other */
  --lh-snug:    1.15; /* @kind other */
  --lh-normal:  1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* Letter spacing */
  --ls-tight:   -0.02em; /* large Georgia headlines */
  --ls-normal:  0em;
  --ls-eyebrow:  0.14em; /* uppercase eyebrows / wordmark */

  /* Semantic aliases */
  --text-display-family: var(--font-display);
  --text-body-family:    var(--font-body);
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   G8N•AI — SPACING, RADII, SHADOW, MOTION TOKENS
   Calm, generous, builder-notebook feel. Minimal chrome.
   ============================================================ */

:root {
  /* Spacing scale (4px base) */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */

  /* Radii — soft but understated; notebook cards are barely rounded */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Borders */
  --border-width:      1.5px;  /* hand-inked feel: slightly heavier than 1px */
  --border-width-bold: 2.5px;

  /* Shadows — soft, warm, low. No harsh drop shadows. */
  --shadow-sm:  0 1px 2px rgba(0, 38, 66, 0.06);
  --shadow-md:  0 4px 14px rgba(0, 38, 66, 0.08);
  --shadow-lg:  0 12px 32px rgba(0, 38, 66, 0.12);
  /* Accent glow — the signature "soft orange glow" around the focal element */
  --shadow-glow: 0 0 0 1px var(--accent-wash), 0 6px 28px var(--accent-glow);

  /* Motion — calm, no bounce. Confident, settled easing. */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* Layout */
  --measure:        66ch;   /* ideal reading width */
  --container-max:  1120px;
}

/* ===== tokens/base.css ===== */
/* ============================================================
   G8N•AI — BASE ELEMENTS & BRAND MOTIF UTILITIES
   Surface textures (ruled paper / chalkboard grid), wordmark,
   the clean orange underline, eyebrow labels.
   v1.1: wavy squiggle → clean straight rule (+ optional smooth curve);
   the ✦ spark is retired.
   ============================================================ */

.g8n-body {
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--surface-page);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

/* --- Surfaces / textures --- */

/* Light: cream notebook paper with faint warm ruled lines */
.g8n-paper {
  background-color: var(--g8n-cream);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 39px,
    var(--g8n-rule) 39px,
    var(--g8n-rule) 40px
  );
}

/* Dark: charcoal board with a faint darker grid */
.g8n-board {
  background-color: var(--g8n-charcoal);
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* --- Headlines --- */
.g8n-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
  text-wrap: balance;
}

/* --- Eyebrow / kicker (uppercase, ink, tracked) ---
   a11y (WCAG AA): the eyebrow is small (12px), so it is INK, not orange —
   orange-on-cream is only 3.08:1 and must be reserved for ≥24px / focal text. */
.g8n-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-strong);
}

/* --- The signature orange underline (v1.1: two sanctioned forms) ---
   Default = clean straight rule (professional). Modifier = one smooth
   curve (emphasis). Both in the single orange. The wavy squiggle is retired. */
.g8n-underline {
  position: relative;
  white-space: nowrap;
}
.g8n-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.16em;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
/* Emphasis form: a single gentle arc (never wavy) */
.g8n-underline--curve::after {
  height: 0.30em;
  bottom: -0.22em;
  border-radius: 0;
  background: no-repeat center/100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M3 10 Q100 1 197 10' fill='none' stroke='%23d97706' stroke-width='3' stroke-linecap='round'/></svg>");
}

/* Emphasized word inside a headline — the one orange word */
.g8n-accent-word { color: var(--accent); }

/* --- Wordmark (v1.1: Verdana bold, tracked; no spark) --- */
.g8n-wordmark {
  font-family: var(--font-wordmark, var(--font-body));
  font-weight: var(--fw-bold);
  letter-spacing: -0.5px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* --- Big stat numeral --- */
.g8n-stat {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  color: var(--accent);
  letter-spacing: var(--ls-tight);
}

/* ===== tokens/status.css ===== */
/* ============================================================
   G8N•AI — SEMANTIC / STATUS COLOR TOKENS   (added 2026-06 · Move 02)
   System-only. These report state inside product UI and NEVER appear
   in marketing or on a quote card. Orange stays the single brand accent.
   Warning and Danger repurpose the archived amber / crimson with a job.

   Each family ships four roles:
     --status-<x>          base (solid fill, icon, dot, left-rule)
     --status-<x>-tint     faint background behind tinted blocks
     --status-<x>-border   1px border on tinted blocks
     --status-<x>-text     readable text/label on tint or paper
   ============================================================ */

:root {
  /* success — muted pine */
  --status-success:        #1F7A5A;
  --status-success-tint:   #e7f1ec;
  --status-success-border: #c2ddd1;
  --status-success-text:   #155e44;

  /* warning — ex-archive amber */
  --status-warning:        #E59500;
  --status-warning-tint:   #fbeed7;
  --status-warning-border: #f0d5a3;
  --status-warning-text:   #8a5a00;

  /* danger — ex-archive crimson, lifted for legibility */
  --status-danger:         #B0324B;
  --status-danger-tint:    #f6e2e7;
  --status-danger-border:  #e4b6c0;
  --status-danger-text:    #8c2740;

  /* info — drawn from the brand navy */
  --status-info:           #33627D;
  --status-info-tint:      #e5edf2;
  --status-info-border:    #b6cad6;
  --status-info-text:      #28506a;
}

/* Dark variant — bases hold; tint/border/text invert for contrast on board */
.g8n-dark,
[data-theme="dark"] {
  --status-success-tint:   rgba(31, 122, 90, 0.16);
  --status-success-border: rgba(31, 122, 90, 0.40);
  --status-success-text:   #5cbf97;

  --status-warning-tint:   rgba(229, 149, 0, 0.16);
  --status-warning-border: rgba(229, 149, 0, 0.40);
  --status-warning-text:   #f0b357;

  --status-danger-tint:    rgba(176, 50, 75, 0.18);
  --status-danger-border:  rgba(176, 50, 75, 0.42);
  --status-danger-text:    #e07a8f;

  --status-info-tint:      rgba(51, 98, 125, 0.20);
  --status-info-border:    rgba(51, 98, 125, 0.42);
  --status-info-text:      #7fb0cb;
}

/* ===== tokens/layout.css ===== */
/* ============================================================
   G8N•AI — LAYOUT, GRID & ELEVATION TOKENS   (added 2026-06 · Move 03)
   The structural layer: breakpoints, a 12-column grid, the container,
   and a z-index scale so stacking is decided once, not per-screen.
   ============================================================ */

:root {
  /* --- Breakpoints ---
     Reference values. CSS custom properties can't be used inside a
     @media condition, so author media queries with the literals and keep
     these as the single source of truth / for JS. */
  --bp-sm: 640px;   /* large phone        */
  --bp-md: 768px;   /* tablet             */
  --bp-lg: 1024px;  /* laptop             */
  --bp-xl: 1280px;  /* desktop            */

  /* --- Grid --- */
  --grid-columns: 12; /* @kind other */
  --grid-gutter: 1.5rem;          /* 24px — matches --space-5 */
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);
  /* --container-max (1120px) and --measure (66ch) live in spacing.css */

  /* --- Elevation · z-index scale --- */
  --z-base:     0;    /* @kind other */
  --z-raised:   10;   /* @kind other */ /* cards lifted off the page  */
  --z-sticky:   100;  /* @kind other */ /* sticky headers / rails     */
  --z-dropdown: 1000; /* @kind other */ /* menus, popovers, selects   */
  --z-overlay:  2000; /* @kind other */ /* scrim behind a modal       */
  --z-modal:    2100; /* @kind other */ /* dialogs                    */
  --z-toast:    3000; /* @kind other */ /* transient notifications    */
  --z-tooltip:  4000; /* @kind other */ /* always on top              */
}

/* Centered page container with responsive edge padding */
.g8n-container {
  width: 100%;
  max-width: var(--container-max, 1120px);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* 12-column grid → collapses to 6 on tablet, 2 on phone */
.g8n-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 12), minmax(0, 1fr));
  gap: var(--grid-gutter, 1.5rem);
}
@media (max-width: 768px) {
  .g8n-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .g8n-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== tokens/type-and-tint.css ===== */
/* ============================================================
   G8N•AI — TYPE & TINT REFRESH  (v1.1 · 2026-06)
   Overrides the base type tokens with the email-safe system stack,
   and adds the navy tint ladder + the single orange tint.
   @import this AFTER typography.css and colors.css so it wins.
   ============================================================ */

:root {
  /* --- Type: all web-safe / email-safe, render natively everywhere --- */
  --font-display: Georgia, "Times New Roman", serif;          /* headlines */
  --font-body:    Verdana, Geneva, sans-serif;                /* body + UI */
  --font-wordmark: Verdana, Geneva, sans-serif;               /* the G8N•AI logotype, bold, tracked -0.5px */

  /* --- Tint ladder: navy inks (one accent rule intact) ---
     Unified with the canonical colors.css --g8n-ink-* scale so there is ONE set
     of grey values across the system (the audit found this ladder disagreeing
     with the text aliases). --ink-900 keeps a slightly deeper board-only tone. */
  --ink-900: #001a30;              /* deepest board (decorative)      */
  --ink-800: var(--g8n-navy);      /* #002642 — the base ink          */
  --ink-600: var(--g8n-ink-500);   /* #4a6173 — secondary (unified)   */
  --ink-400: var(--g8n-ink-300);   /* #8a99a4 — tertiary (unified)    */
  --ink-200: var(--g8n-ink-100);   /* #cdd5db — faint / disabled      */

  /* --- The one orange tint: backgrounds & washes ONLY, never as the accent --- */
  --tint-orange:        #f6e4cf;
  --tint-orange-border: #ecd4b6;
}

/* The wordmark lockup treatment */
.g8n-wordmark,
.g8n-wordmark--lockup {
  font-family: var(--font-wordmark);
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* ===== tokens/semantic.css ===== */
/* ============================================================
   G8N•AI — SEMANTIC TOKENS  (v1.1 · primitive → role)
   The ONE role layer. New code (components, gallery, docs) references THESE.

   Consolidated: roles derive from the colors.css text/surface ALIASES so each
   role has a SINGLE definition — no competing ink ladder, no "two different
   muted greys" (the audit found --color-text-muted #33536b disagreeing with
   --text-muted #4a6173; they are now one value: #4a6173). Dark mode flows from
   those aliases (colors.css already remaps them under .g8n-dark), so this layer
   only needs the few roles colors.css doesn't define.
   @import AFTER colors.css, status.css, type-and-tint.css.
   ============================================================ */

:root {
  /* Surfaces */
  --color-surface:          var(--surface-page);     /* page / paper            */
  --color-surface-raised:   var(--surface-raised);   /* cards                   */
  --color-surface-inverse:  var(--g8n-navy);         /* dark blocks on light    */

  /* Text — single-sourced from the colors.css ink aliases */
  --color-text:             var(--text-strong);      /* primary                 */
  --color-text-muted:       var(--text-muted);       /* secondary (#4a6173)     */
  --color-text-faint:       var(--text-faint);       /* tertiary                */
  --color-text-inverse:     var(--g8n-white);        /* on dark / on inverse    */

  /* Focal / accent — the one orange */
  --color-focal:            var(--accent);
  --color-focal-hover:      var(--accent-hover);
  --color-focal-wash:       var(--tint-orange);       /* background only         */

  /* Lines */
  --color-border:           var(--border-subtle);
  --color-border-strong:    var(--border-ink);

  /* Status — alias to the status palette (product UI only) */
  --color-success:          var(--status-success);
  --color-warning:          var(--status-warning);
  --color-danger:           var(--status-danger);
  --color-info:             var(--status-info);

  /* Type roles */
  --type-display:           var(--font-display);      /* Georgia                 */
  --type-body:              var(--font-body);          /* Verdana                 */
  --type-wordmark:          var(--font-wordmark);      /* Verdana bold            */
}

/* Dark: only surface-inverse + text-inverse flip + a stronger border; the rest
   flows from the colors.css .g8n-dark remap of the aliases referenced above. */
.g8n-dark,
[data-theme="dark"] {
  --color-surface-inverse:  var(--g8n-cream);
  --color-text-inverse:     var(--g8n-navy);
  --color-border-strong:    rgba(255, 255, 255, 0.30);
}

/* ===== components/components.css ===== */
/* ============================================================
   G8N•AI — COMPONENT STATE STYLES
   Interaction (hover / active / focus-visible / disabled) for the interactive
   components lives in real CSS — NOT JS mouse handlers — so it works for
   keyboard, touch, and forced-colors users, and so the components stay pure
   (no "use client" needed). Token values still come from the CSS custom
   properties, so theming flows through unchanged.
   Loaded by styles.css inside @layer g8n.
   ============================================================ */

/* ---------- Button ---------- */
.g8n-btn {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* sizes */
.g8n-btn[data-size="sm"] { padding: 8px 14px;  font-size: 14px; border-radius: var(--radius-sm); }
.g8n-btn[data-size="md"] { padding: 11px 20px; font-size: 15px; border-radius: var(--radius-sm); }
.g8n-btn[data-size="lg"] { padding: 15px 28px; font-size: 17px; border-radius: var(--radius-md); }

/* variants */
.g8n-btn[data-variant="primary"] {
  background: var(--accent);
  color: var(--text-on-accent); /* navy-on-orange, AA */
  box-shadow: 0 6px 20px var(--accent-glow);
}
.g8n-btn[data-variant="primary"]:hover { background: var(--accent-hover); }

.g8n-btn[data-variant="secondary"] {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--border-ink);
}
/* hover: accent wash + orange border; text stays ink for AA (orange small text fails) */
.g8n-btn[data-variant="secondary"]:hover {
  background: var(--accent-wash);
  border-color: var(--accent);
}

.g8n-btn[data-variant="ghost"] {
  background: transparent;
  color: var(--text-strong); /* ink, not orange — AA at small sizes */
}
.g8n-btn[data-variant="ghost"]:hover { background: var(--accent-wash); }

.g8n-btn[data-variant="chalk"] {
  background: var(--g8n-white);
  color: var(--g8n-navy);
}
.g8n-btn[data-variant="chalk"]:hover { background: #ece9e0; }

/* press — a settled downward nudge, no bounce */
.g8n-btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px) scale(0.99);
}

/* focus — a real, visible indicator */
.g8n-btn:focus-visible {
  outline: var(--border-width-bold) solid var(--accent);
  outline-offset: 2px;
}

/* disabled */
.g8n-btn:disabled,
.g8n-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Input ---------- */
.g8n-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
}
.g8n-field__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
}
.g8n-field__hint {
  font-size: 12px;
  color: var(--text-muted);
}
.g8n-input {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-strong);
  background: var(--surface-raised);
  padding: 10px 2px;
  border: none;
  border-radius: 0;
  border-bottom: var(--border-width-bold) solid var(--border-subtle);
  outline: none;
}
.g8n-input::placeholder { color: var(--text-faint); }
.g8n-input:hover { border-bottom-color: var(--text-muted); }
.g8n-input:focus { border-bottom-color: var(--accent); }
/* a11y: a real focus indicator beyond the hue shift — a ring + (for
   forced-colors / Windows High Contrast) a transparent outline that the OS
   forces visible. */
.g8n-input:focus-visible {
  border-bottom-color: var(--accent);
  box-shadow: 0 2px 0 0 var(--accent), 0 0 0 3px var(--accent-wash);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.g8n-input[aria-invalid="true"] {
  border-bottom-color: var(--status-danger);
}
.g8n-input[aria-invalid="true"]:focus-visible {
  box-shadow: 0 2px 0 0 var(--status-danger), 0 0 0 3px var(--status-danger-tint);
}

/* Motion gated on reduced-motion (matches product.css). */
@media (prefers-reduced-motion: no-preference) {
  .g8n-btn {
    transition:
      background var(--dur-base) var(--ease-out),
      color var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out),
      transform var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out);
  }
  .g8n-input {
    transition:
      border-color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out);
  }
}

/* ===== components/product.css ===== */
/* ============================================================
   G8N•AI — PRODUCT-UI COMPONENT STYLES
   Loaded by styles.css inside @layer g8n. Interaction state lives here
   (data-attributes / pseudo-classes), tokens drive every value.
   ============================================================ */


/* ===================== Checkbox ===================== */
/* ---------- Checkbox ---------- */
.g8n-checkbox {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
}
.g8n-checkbox__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* The box: a real native checkbox, restyled (appearance:none) so we control the
   fill (orange) and the checkmark ink (navy-on-orange = AA for the glyph). */
.g8n-checkbox__input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  margin-top: 1px; /* optical align with the first line of the label */
  display: inline-grid;
  place-content: center;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-surface-raised);
  color: var(--text-on-accent); /* drives the checkmark ink via currentColor */
  cursor: pointer;
}

/* The checkmark / dash, drawn from currentColor and clipped to a tick. */
.g8n-checkbox__input::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transform-origin: center;
  background: currentColor;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.g8n-checkbox__input:checked,
.g8n-checkbox__input:indeterminate {
  background: var(--accent);
  border-color: var(--accent);
}
.g8n-checkbox__input:checked::before {
  transform: scale(1);
}
/* mixed state → a centered bar instead of a tick */
.g8n-checkbox__input:indeterminate::before {
  width: 10px;
  height: 2.5px;
  border-radius: 1px;
  clip-path: none;
  transform: scale(1);
}

.g8n-checkbox__input:hover:not(:disabled) {
  border-color: var(--accent);
}

/* a real, visible focus indicator (also covers forced-colors via the outline) */
.g8n-checkbox__input:focus-visible {
  outline: var(--border-width-bold) solid var(--accent);
  outline-offset: 2px;
}

.g8n-checkbox__input[aria-invalid="true"] {
  border-color: var(--status-danger);
}
.g8n-checkbox__input[aria-invalid="true"]:focus-visible {
  outline-color: var(--status-danger);
}

.g8n-checkbox__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.g8n-checkbox__label {
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text);
  cursor: pointer;
}
.g8n-checkbox__input:disabled + .g8n-checkbox__label {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.g8n-checkbox__hint,
.g8n-checkbox__error {
  font-size: 12px;
  line-height: 1.45;
  padding-left: 28px; /* box (18) + row gap (10) → aligns under the label */
}
.g8n-checkbox__hint {
  color: var(--color-text-muted);
}
.g8n-checkbox__error {
  color: var(--status-danger-text);
}

@media (prefers-reduced-motion: no-preference) {
  .g8n-checkbox__input {
    transition:
      background var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out);
  }
  .g8n-checkbox__input::before {
    transition: transform var(--dur-fast) var(--ease-out);
  }
}

/* Windows High Contrast / forced-colors: appearance:none would otherwise hide
   the box — restore it with system colors. */
@media (forced-colors: active) {
  .g8n-checkbox__input {
    border-color: CanvasText;
    background: Canvas;
  }
  .g8n-checkbox__input:checked,
  .g8n-checkbox__input:indeterminate {
    background: Highlight;
    border-color: Highlight;
  }
  .g8n-checkbox__input::before {
    background: HighlightText;
  }
  .g8n-checkbox__input:focus-visible {
    outline-color: CanvasText;
  }
}


/* ===================== RadioGroup ===================== */
/* ---------- RadioGroup ---------- */
.g8n-radio-group {
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0; /* reset the implicit fieldset min-width */
}
.g8n-radio-group__legend {
  padding: 0;
  margin-block-end: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}
.g8n-radio-group__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.g8n-radio-group__option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .g8n-radio-group__option {
    transition: background var(--dur-fast) var(--ease-out);
  }
}
.g8n-radio-group__option:hover {
  background: var(--accent-wash);
}
.g8n-radio-group__option[data-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}
.g8n-radio-group__option[data-disabled="true"]:hover {
  background: transparent;
}

.g8n-radio-group__input {
  flex: none;
  inline-size: 1.15em;
  block-size: 1.15em;
  margin: 0;
  margin-block-start: 0.1em; /* optically align with the first line of the label */
  accent-color: var(--accent);
  cursor: inherit;
}
/* a real, visible focus indicator beyond the native dot */
.g8n-radio-group__input:focus-visible {
  outline: var(--border-width-bold) solid var(--accent);
  outline-offset: 2px;
}

.g8n-radio-group__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g8n-radio-group__label {
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--color-text); /* ink, not orange — AA at body size */
}
.g8n-radio-group__option-hint {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--color-text-muted);
}
.g8n-radio-group__hint {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--color-text-muted);
}

/* invalid — danger family, state is conveyed by text + ring, not colour alone */
.g8n-radio-group[data-invalid="true"] .g8n-radio-group__input {
  accent-color: var(--status-danger);
}
.g8n-radio-group[data-invalid="true"] .g8n-radio-group__input:focus-visible {
  outline-color: var(--status-danger);
}
.g8n-radio-group[data-invalid="true"] .g8n-radio-group__hint {
  font-weight: 600;
  color: var(--status-danger-text);
}

/* group-wide disable via the native fieldset[disabled] */
.g8n-radio-group:disabled .g8n-radio-group__option {
  cursor: not-allowed;
  opacity: 0.55;
}
.g8n-radio-group:disabled .g8n-radio-group__option:hover {
  background: transparent;
}

/* forced-colors / Windows High Contrast: keep the focus ring visible */
@media (forced-colors: active) {
  .g8n-radio-group__input:focus-visible {
    outline-color: Highlight;
  }
}


/* ===================== Switch ===================== */
/* ---------- Switch ---------- */
.g8n-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  color: var(--color-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.g8n-switch[data-label-position="start"] {
  flex-direction: row-reverse;
}

/* the real, accessible control — visually hidden but kept in the layout flow */
.g8n-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.g8n-switch__track {
  --switch-w: 44px;
  --switch-h: 24px;
  --switch-pad: 3px;
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  inline-size: var(--switch-w);
  block-size: var(--switch-h);
  background: var(--color-text-muted);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
}
.g8n-switch[data-size="sm"] .g8n-switch__track {
  --switch-w: 36px;
  --switch-h: 20px;
  --switch-pad: 2.5px;
}

.g8n-switch__thumb {
  position: absolute;
  top: var(--switch-pad);
  left: var(--switch-pad);
  inline-size: calc(var(--switch-h) - 2 * var(--switch-pad));
  block-size: calc(var(--switch-h) - 2 * var(--switch-pad));
  background: var(--color-surface-raised);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
@media (prefers-reduced-motion: no-preference) {
  .g8n-switch__track {
    transition: background var(--dur-base) var(--ease-out);
  }
  .g8n-switch__thumb {
    transition: transform var(--dur-base) var(--ease-out);
  }
}

/* checked: accent fill + thumb slides to the far end (position carries state) */
.g8n-switch__input:checked ~ .g8n-switch__track {
  background: var(--accent);
}
.g8n-switch__input:checked ~ .g8n-switch__track .g8n-switch__thumb {
  transform: translateX(calc(var(--switch-w) - var(--switch-h)));
}

.g8n-switch__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

/* focus — a real, visible ring on the track (+ transparent outline so Windows
   High Contrast / forced-colors still shows it) */
.g8n-switch__input:focus-visible ~ .g8n-switch__track {
  outline: var(--border-width-bold) solid var(--accent);
  outline-offset: 2px;
}

/* disabled */
.g8n-switch:has(.g8n-switch__input:disabled) {
  cursor: not-allowed;
}
.g8n-switch__input:disabled ~ .g8n-switch__track,
.g8n-switch__input:disabled ~ .g8n-switch__label {
  opacity: 0.5;
}

/* forced colors: track fill is dropped by the OS, so lean on the thumb's position
   plus system-coloured borders to keep on/off legible */
@media (forced-colors: active) {
  .g8n-switch__track {
    border-color: ButtonBorder;
  }
  .g8n-switch__thumb {
    background: ButtonText;
  }
  .g8n-switch__input:checked ~ .g8n-switch__track .g8n-switch__thumb {
    background: Highlight;
  }
  .g8n-switch__input:focus-visible ~ .g8n-switch__track {
    outline: var(--border-width-bold) solid Highlight;
  }
}


/* ===================== Textarea ===================== */
/* ---------- Textarea ---------- */
/* Mirrors .g8n-input (components.css), reusing .g8n-field/.g8n-field__label/
   .g8n-field__hint, but sized for multiline prose. */
.g8n-textarea {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-surface-raised);
  padding: 10px 2px;
  border: none;
  border-radius: 0;
  border-bottom: var(--border-width-bold) solid var(--border-subtle);
  outline: none;
  resize: vertical;
  min-height: calc(1.5em * 2 + 20px);
}
@media (prefers-reduced-motion: no-preference) {
  .g8n-textarea {
    transition:
      border-color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out);
  }
}
.g8n-textarea::placeholder { color: var(--text-faint); }
.g8n-textarea:hover { border-bottom-color: var(--color-text-muted); }
.g8n-textarea:focus { border-bottom-color: var(--accent); }
/* a11y: a real focus indicator beyond the hue shift — a ring + (for
   forced-colors / Windows High Contrast) a transparent outline that the OS
   forces visible. */
.g8n-textarea:focus-visible {
  border-bottom-color: var(--accent);
  box-shadow: 0 2px 0 0 var(--accent), 0 0 0 3px var(--accent-wash);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.g8n-textarea[aria-invalid="true"] {
  border-bottom-color: var(--status-danger);
}
.g8n-textarea[aria-invalid="true"]:focus-visible {
  box-shadow: 0 2px 0 0 var(--status-danger), 0 0 0 3px var(--status-danger-tint);
}


/* ===================== Select ===================== */
/* ---------- Select ---------- */
/* Reuses .g8n-field / .g8n-field__label / .g8n-field__hint from the Input field. */
.g8n-select {
  position: relative;
  display: flex;
  align-items: center;
}
.g8n-select__control {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-surface-raised);
  /* room on the right for the chevron */
  padding: var(--space-2) calc(var(--space-5) + var(--space-1)) var(--space-2) var(--space-1);
  border: none;
  border-radius: 0;
  border-bottom: var(--border-width-bold) solid var(--border-subtle);
  outline: none;
  cursor: pointer;
}
.g8n-select__control:hover {
  border-bottom-color: var(--color-text-muted);
}
.g8n-select__control:focus {
  border-bottom-color: var(--accent);
}
/* a11y: a real focus indicator beyond the hue shift — a ring + (for
   forced-colors / Windows High Contrast) a transparent outline the OS forces
   visible. */
.g8n-select__control:focus-visible {
  border-bottom-color: var(--accent);
  box-shadow: 0 2px 0 0 var(--accent), 0 0 0 3px var(--accent-wash);
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.g8n-select__control[aria-invalid="true"] {
  border-bottom-color: var(--status-danger);
}
.g8n-select__control[aria-invalid="true"]:focus-visible {
  box-shadow: 0 2px 0 0 var(--status-danger), 0 0 0 3px var(--status-danger-tint);
}
.g8n-select__control:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* chevron — decorative; clicks fall through to the native control */
.g8n-select__chevron {
  position: absolute;
  right: var(--space-1);
  display: block;
  flex: 0 0 auto;
  pointer-events: none;
  color: var(--color-text-muted);
}
.g8n-select__control:hover ~ .g8n-select__chevron,
.g8n-select__control:focus-visible ~ .g8n-select__chevron {
  color: var(--accent);
}
.g8n-select__control:disabled ~ .g8n-select__chevron {
  opacity: 0.5;
}

@media (prefers-reduced-motion: no-preference) {
  .g8n-select__control {
    transition:
      border-color var(--dur-base) var(--ease-out),
      box-shadow var(--dur-base) var(--ease-out);
  }
  .g8n-select__chevron {
    transition: color var(--dur-base) var(--ease-out);
  }
}


/* ===================== Alert ===================== */
/* ---------- Alert ---------- */
.g8n-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--status-info-tint);
  border: var(--border-width) solid var(--status-info-border);
  border-inline-start: var(--border-width-bold) solid var(--status-info);
  border-radius: var(--radius-md);
}
.g8n-alert[data-variant="success"] {
  background: var(--status-success-tint);
  border-color: var(--status-success-border);
  border-inline-start-color: var(--status-success);
}
.g8n-alert[data-variant="warning"] {
  background: var(--status-warning-tint);
  border-color: var(--status-warning-border);
  border-inline-start-color: var(--status-warning);
}
.g8n-alert[data-variant="danger"] {
  background: var(--status-danger-tint);
  border-color: var(--status-danger-border);
  border-inline-start-color: var(--status-danger);
}

/* icon — inherits the status hue via currentColor on the inner SVG */
.g8n-alert__icon {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 1px;
  color: var(--status-info);
}
.g8n-alert[data-variant="success"] .g8n-alert__icon { color: var(--status-success); }
.g8n-alert[data-variant="warning"] .g8n-alert__icon { color: var(--status-warning); }
.g8n-alert[data-variant="danger"] .g8n-alert__icon { color: var(--status-danger); }

/* body */
.g8n-alert__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.g8n-alert__title {
  margin: 0;
  font-weight: 700;
  font-size: var(--fs-sm);
  /* status-*-text tokens are darkened for legibility on the tint (AA by design) */
  color: var(--status-info-text);
}
.g8n-alert[data-variant="success"] .g8n-alert__title { color: var(--status-success-text); }
.g8n-alert[data-variant="warning"] .g8n-alert__title { color: var(--status-warning-text); }
.g8n-alert[data-variant="danger"] .g8n-alert__title { color: var(--status-danger-text); }
.g8n-alert__content {
  color: var(--color-text);
}

/* dismiss — a quiet ink control; reveals a raised chip on hover */
.g8n-alert__dismiss {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -4px -4px -4px 0;
  padding: 4px;
  color: var(--color-text-muted);
  background: transparent;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.g8n-alert__dismiss:hover {
  color: var(--color-text);
  background: var(--color-surface-raised);
}
/* a11y: a real, visible focus indicator (outline survives forced-colors) */
.g8n-alert__dismiss:focus-visible {
  outline: var(--border-width-bold) solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .g8n-alert__dismiss {
    transition:
      background var(--dur-base) var(--ease-out),
      color var(--dur-base) var(--ease-out);
  }
}


/* ===================== Spinner ===================== */
/* ---------- Visually-hidden utility (clip-rect; for icon-only / status labels) ---------- */
.g8n-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Spinner ---------- */
.g8n-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.g8n-spinner__ring {
  display: block;
  transform-origin: center;
}

/* sizes */
.g8n-spinner[data-size="sm"] .g8n-spinner__ring { width: 16px; height: 16px; }
.g8n-spinner[data-size="md"] .g8n-spinner__ring { width: 24px; height: 24px; }
.g8n-spinner[data-size="lg"] .g8n-spinner__ring { width: 36px; height: 36px; }

.g8n-spinner__track {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 2.5;
}

/* the moving arc — orange as a focal graphic, not small text */
.g8n-spinner__arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  /* ~18 of the ~56.5 circumference visible → a clean quarter-ish arc */
  stroke-dasharray: 18 60;
}

/* motion only when the user hasn't asked to reduce it */
@media (prefers-reduced-motion: no-preference) {
  .g8n-spinner__ring {
    animation: g8n-spinner-rotate 0.8s linear infinite;
  }
}

@keyframes g8n-spinner-rotate {
  to { transform: rotate(360deg); }
}

/* forced-colors / Windows High Contrast: keep both ring parts visible */
@media (forced-colors: active) {
  .g8n-spinner__track { stroke: GrayText; }
  .g8n-spinner__arc { stroke: CanvasText; }
}


/* ===================== Avatar ===================== */
/* ---------- Avatar ---------- */
.g8n-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  color: var(--color-text); /* ink initials — small orange text fails AA */
  border: var(--border-width) solid var(--border-subtle);
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  user-select: none;
  -webkit-user-select: none;
}

/* sizes */
.g8n-avatar[data-size="sm"] { width: 28px; height: 28px; font-size: 11px; }
.g8n-avatar[data-size="md"] { width: 40px; height: 40px; font-size: 14px; }
.g8n-avatar[data-size="lg"] { width: 56px; height: 56px; font-size: 19px; }
.g8n-avatar[data-size="xl"] { width: 80px; height: 80px; font-size: 28px; }

.g8n-avatar__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.g8n-avatar__initials {
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* the brand-mark fallback fills the circle edge-to-edge */
.g8n-avatar__mark { display: block; }

/* optional accent ring — a surface gap, then the orange */
.g8n-avatar[data-ring="true"] {
  box-shadow:
    0 0 0 2px var(--color-surface),
    0 0 0 calc(2px + var(--border-width-bold)) var(--accent);
}

/* a11y: if the avatar is made focusable (own tabindex / interactive wrapper),
   show a real, visible focus indicator. */
.g8n-avatar:focus-visible {
  outline: var(--border-width-bold) solid var(--accent);
  outline-offset: 2px;
}

/* forced-colors / Windows High Contrast: box-shadow rings are dropped, so keep
   the ring and focus indicator perceivable with system colors. */
@media (forced-colors: active) {
  .g8n-avatar[data-ring="true"] {
    box-shadow: none;
    outline: 2px solid CanvasText;
    outline-offset: 2px;
  }
  .g8n-avatar:focus-visible {
    outline: 2px solid Highlight;
  }
}


/* ===================== Tabs ===================== */
/* ---------- Tabs ---------- */
.g8n-tabs {
  font-family: var(--font-body);
  color: var(--color-text);
}

.g8n-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.g8n-tabs__tab {
  appearance: none;
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.2;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: var(--border-width-bold) solid transparent;
  /* overlap the list's bottom rule so the active underline sits on it */
  margin-bottom: calc(-1 * var(--border-width));
  padding: var(--space-3) var(--space-4);
  white-space: nowrap;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .g8n-tabs__tab {
    transition:
      color var(--dur-base) var(--ease-out),
      background var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out);
  }
}

.g8n-tabs__tab:hover {
  color: var(--color-text);
  background: var(--accent-wash);
}

/* selected — ink label + orange underline (orange as focal rule, not small text) */
.g8n-tabs__tab[data-selected] {
  color: var(--color-text);
  border-bottom-color: var(--accent);
}

/* a real, visible focus indicator (also forced-colors safe — a true outline is
   preserved by the OS in Windows High Contrast) */
.g8n-tabs__tab:focus-visible {
  outline: var(--border-width-bold) solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.g8n-tabs__panel {
  padding: var(--space-5) var(--space-1);
  color: var(--color-text);
}

/* the panel is focusable (tabIndex=0) so keyboard users can reach its content */
.g8n-tabs__panel:focus-visible {
  outline: var(--border-width-bold) solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}


/* ===================== Accordion ===================== */
/* ---------- Accordion ---------- */
.g8n-accordion {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  border-top: var(--border-width) solid var(--border-subtle);
}
.g8n-accordion__item {
  border-bottom: var(--border-width) solid var(--border-subtle);
}

/* summary = the native disclosure button */
.g8n-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  list-style: none; /* strip the default disclosure triangle */
}
.g8n-accordion__summary::-webkit-details-marker { display: none; }
.g8n-accordion__summary::marker { content: ""; }

.g8n-accordion__summary:hover {
  background: var(--accent-wash);
}

/* a real, visible focus indicator (also survives forced-colors) */
.g8n-accordion__summary:focus-visible {
  outline: var(--border-width-bold) solid var(--accent);
  outline-offset: -2px;
}

.g8n-accordion__label {
  flex: 1 1 auto;
}

/* chevron — orange focal marker; navy/ink at rest, warms on interaction */
.g8n-accordion__icon {
  flex: 0 0 auto;
  color: var(--color-text-muted);
}
.g8n-accordion__summary:hover .g8n-accordion__icon,
.g8n-accordion__summary:focus-visible .g8n-accordion__icon {
  color: var(--accent);
}
.g8n-accordion__item[open] > .g8n-accordion__summary .g8n-accordion__icon {
  color: var(--accent);
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: no-preference) {
  .g8n-accordion__icon {
    transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  }
}

.g8n-accordion__panel {
  padding: var(--space-1) var(--space-3) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  line-height: 1.6;
}


/* ===================== Dialog ===================== */
/* ---------- Dialog ---------- */
.g8n-dialog {
  width: min(92vw, 32rem);
  max-width: 92vw;
  max-height: min(86dvh, 44rem);
  margin: auto; /* center within the top layer */
  padding: 0;
  overflow: hidden;
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
}
.g8n-dialog[data-size="sm"] { width: min(92vw, 24rem); }
.g8n-dialog[data-size="lg"] { width: min(92vw, 44rem); }

/* Scrim — derived from the navy ink token, never a hardcoded hex. */
.g8n-dialog::backdrop {
  background: color-mix(in srgb, var(--g8n-navy) 55%, transparent);
}

.g8n-dialog__panel {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  font-family: var(--font-body);
}

.g8n-dialog__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-4);
}

.g8n-dialog__heading {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}
.g8n-dialog[data-destructive] .g8n-dialog__heading { color: var(--status-danger-text); }

.g8n-dialog__close {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--color-text-muted);
  background: transparent;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .g8n-dialog__close {
    transition:
      color var(--dur-base) var(--ease-out),
      background var(--dur-base) var(--ease-out);
  }
}
.g8n-dialog__close:hover {
  color: var(--color-text);
  background: var(--accent-wash);
}
.g8n-dialog[data-destructive] .g8n-dialog__close:hover {
  color: var(--status-danger-text);
  background: var(--status-danger-tint);
}
.g8n-dialog__close:focus-visible {
  outline: var(--border-width-bold) solid var(--accent);
  outline-offset: 2px;
}

.g8n-dialog__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  line-height: 1.55;
}
.g8n-dialog__description { margin: 0; }

/* No header? Keep the body's top breathing room. */
.g8n-dialog__panel > .g8n-dialog__body:first-child { padding-top: var(--space-6); }

.g8n-dialog__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6) var(--space-6);
}

/* Entry animation — gated on reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .g8n-dialog[open] {
    animation: g8n-dialog-in var(--dur-base) var(--ease-out) both;
  }
  .g8n-dialog[open]::backdrop {
    animation: g8n-dialog-backdrop-in var(--dur-base) var(--ease-out) both;
  }
}
@keyframes g8n-dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes g8n-dialog-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Forced colors / Windows High Contrast: keep a visible boundary + focus ring.
   `transparent` is NOT forced to a system colour, so use Highlight explicitly. */
@media (forced-colors: active) {
  .g8n-dialog { border-color: CanvasText; }
  .g8n-dialog__close:focus-visible { outline: 2px solid Highlight; }
}


/* ===================== Tooltip ===================== */
/* ---------- Tooltip ---------- */
.g8n-tooltip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.g8n-tooltip__bubble {
  position: absolute;
  z-index: var(--z-tooltip);
  width: max-content;
  max-width: 18rem;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  color: var(--color-text-inverse);
  background: var(--color-surface-inverse);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  /* pointer-events stay enabled so the bubble itself is hoverable (WCAG 1.4.13) */
}

/* The little diamond pointing at the trigger. */
.g8n-tooltip__arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--color-surface-inverse);
  transform: rotate(45deg);
}

/* A transparent bridge across the gap so the pointer can travel from the trigger
   onto the bubble without crossing dead space (keeps it hoverable). It is a DOM
   descendant of the wrapper, so being over it does not fire the wrapper's
   mouseleave. */
.g8n-tooltip__bubble::before {
  content: "";
  position: absolute;
}

/* ---- side: top (default) ---- */
.g8n-tooltip[data-side="top"] .g8n-tooltip__bubble {
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
}
.g8n-tooltip[data-side="top"] .g8n-tooltip__bubble::before {
  top: 100%;
  left: 0;
  right: 0;
  height: var(--space-2);
}
.g8n-tooltip[data-side="top"] .g8n-tooltip__arrow {
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
}

/* ---- side: bottom ---- */
.g8n-tooltip[data-side="bottom"] .g8n-tooltip__bubble {
  top: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
}
.g8n-tooltip[data-side="bottom"] .g8n-tooltip__bubble::before {
  bottom: 100%;
  left: 0;
  right: 0;
  height: var(--space-2);
}
.g8n-tooltip[data-side="bottom"] .g8n-tooltip__arrow {
  top: -4px;
  left: 50%;
  margin-left: -4px;
}

/* ---- side: left ---- */
.g8n-tooltip[data-side="left"] .g8n-tooltip__bubble {
  right: calc(100% + var(--space-2));
  top: 50%;
  transform: translateY(-50%);
}
.g8n-tooltip[data-side="left"] .g8n-tooltip__bubble::before {
  left: 100%;
  top: 0;
  bottom: 0;
  width: var(--space-2);
}
.g8n-tooltip[data-side="left"] .g8n-tooltip__arrow {
  right: -4px;
  top: 50%;
  margin-top: -4px;
}

/* ---- side: right ---- */
.g8n-tooltip[data-side="right"] .g8n-tooltip__bubble {
  left: calc(100% + var(--space-2));
  top: 50%;
  transform: translateY(-50%);
}
.g8n-tooltip[data-side="right"] .g8n-tooltip__bubble::before {
  right: 100%;
  top: 0;
  bottom: 0;
  width: var(--space-2);
}
.g8n-tooltip[data-side="right"] .g8n-tooltip__arrow {
  left: -4px;
  top: 50%;
  margin-top: -4px;
}

/* A gentle fade-in only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .g8n-tooltip__bubble:not([hidden]) {
    animation: g8n-tooltip-in var(--dur-fast) var(--ease-out);
  }
  @keyframes g8n-tooltip-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* Forced-colors / Windows High Contrast: the surface fill is dropped, so give the
   bubble (and its arrow) a real, OS-forced border. */
@media (forced-colors: active) {
  .g8n-tooltip__bubble {
    border-color: CanvasText;
  }
  .g8n-tooltip__arrow {
    display: none;
  }
}
}