/* ============================================================================
   OptimaOS Design Language — Token File v1.0
   ----------------------------------------------------------------------------
   This is the single source of truth. Every screen in the product is generated
   by applying these tokens through the composition rules. Nothing is hand-drawn.

   Direction: restrained, spacious, quiet. (Linear / Stripe register.)

   HOW ROLES DIFFER: not by redrawing screens, but by changing ONE variable —
   --density — which rescales spacing, control height, and type step together.
   Same components, same tokens, different density. That is the whole idea.
   ============================================================================ */

/* Self-hosted design-language fonts (CSP: style-src/font-src 'self') —
   Outfit, Plus Jakarta Sans, Lora, Space Mono, JetBrains Mono */
@import url('/vendor/fonts.css');

:root {

  /* ---- 1. PRIMITIVE SCALE (never referenced directly in components) -------- */
  /* A single 4px base unit. Every spatial value is a multiple. No magic numbers. */
  --u: 4px;

  --space-0: 0;
  --space-1: calc(var(--u) * 1);   /*  4px */
  --space-2: calc(var(--u) * 2);   /*  8px */
  --space-3: calc(var(--u) * 3);   /* 12px */
  --space-4: calc(var(--u) * 4);   /* 16px */
  --space-5: calc(var(--u) * 5);   /* 20px */
  --space-6: calc(var(--u) * 6);   /* 24px */
  --space-8: calc(var(--u) * 8);   /* 32px */
  --space-10: calc(var(--u) * 10); /* 40px */
  --space-12: calc(var(--u) * 12); /* 48px */
  --space-16: calc(var(--u) * 16); /* 64px */

  /* ---- 2. COLOR — Aether Nav design language ------------------------------ */
  /* Dark-first cosmic canvas. Violet is THE one accent — primary actions,
     active states, focus — with an electric-cyan highlight reserved for
     secondary emphasis. Semantic colors are reserved for status meaning and
     never used decoratively. Enterprise branding (--brand-primary) may
     override the accent per tenant; these are the platform defaults. */
  --c-bg:          hsl(240, 10%, 3.9%);  /* Aether dark canvas */
  --c-surface:     hsla(240, 10%, 10%, 0.45);  /* frosted panel-bg */
  --c-surface-2:   hsl(240, 10%, 10%);  /* solid panel */
  --c-surface-3:   hsla(240, 10%, 15%, 0.5);
  --c-glass-bg:     hsla(240, 10%, 10%, 0.45);
  --c-glass-border: hsla(240, 10%, 80%, 0.08);
  --c-glass-glow:   hsla(267, 100%, 63%, 0.15);

  --c-border:      hsla(240, 10%, 80%, 0.08);
  --c-border-2:    hsla(240, 10%, 80%, 0.12);
  --c-border-3:    hsla(240, 10%, 80%, 0.20);

  --c-text:        hsl(0, 0%, 98%);  /* Aether text-primary */
  --c-text-2:      hsl(240, 5%, 65%);  /* Aether text-secondary */
  --c-text-3:      hsl(240, 5%, 45%);   /* Aether text-muted */
  --c-text-4:      hsl(240, 5%, 35%);

  /* One accent: Violet. Gold highlight: Electric Cyan. */
  --c-accent:      hsl(267, 100%, 63%);
  --c-accent-hover:hsl(267, 90%, 70%);
  --c-accent-weak: hsla(267, 100%, 63%, 0.25);
  --c-accent-text: #FFFFFF;

  /* Runtime brand colour — enterprises override via JS (branding.primary_color). */
  --brand-primary: #9742ff;
  --c-highlight:      hsl(190, 100%, 50%);
  --c-highlight-weak: hsla(190, 100%, 50%, 0.2);

  /* Structural chrome — sidebar, topbar (cosmic blue / deep dark gray) */
  --c-chrome:        hsl(240, 10%, 10%);
  --c-chrome-2:      hsla(240, 10%, 15%, 0.5);
  --c-chrome-border: hsla(240, 10%, 80%, 0.08);
  --c-chrome-text:   hsl(0, 0%, 98%);
  --c-chrome-text-2: hsl(240, 5%, 65%);
  --c-chrome-accent: hsl(267, 100%, 63%);
  --c-chrome-accent-weak: hsla(267, 100%, 63%, 0.25);
  --c-chrome-cyan:   hsl(190, 100%, 50%);
  --c-chrome-cyan-weak: hsla(190, 100%, 50%, 0.2);

  /* Semantics — brand status colors, reserved exclusively for meaning */
  --c-success:     #10b981;  --c-success-weak: rgba(16, 185, 129, 0.1);
  --c-warning:     #f59e0b;  --c-warning-weak: rgba(245, 158, 11, 0.1);
  --c-danger:      #ef4444;  --c-danger-weak:  rgba(239, 68, 68, 0.1);
  --c-info:        #3b82f6;  --c-info-weak:    rgba(59, 130, 246, 0.1);

  /* ---- 3. TYPE — Outfit + JetBrains Mono ----- */
  --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Outfit", var(--font-sans);
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Type ramp — steps are multiplied by --density-type so roles scale as one.
     Raised one step across the board (was 11/12/13/14/16/20/26/32): the prior
     ramp read as cramped in a data-dense app — body text at 13px and table
     values at 14px sat below comfortable reading size. Legibility over density. */
  --type-xs:   13px;   /* floor: no text may render below 13px (CLAUDE.md legibility rule) */
  --type-sm:   13px;
  --type-base: 14px;
  --type-md:   15px;
  --type-lg:   17px;
  --type-xl:   21px;
  --type-2xl:  27px;
  --type-3xl:  33px;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Tracking — tighten large sizes, open up small caps labels */
  --track-tight: -0.01em;
  --track-normal: 0;
  --track-label: 0.02em;   /* uppercase micro-labels only */

  /* ---- 4. SHAPE — Aether Nav radius scale. Soft glass, not pill-everything - */
  --radius-sm: 8px;   /* inputs, chips, small controls */
  --radius-md: 12px;  /* cards, buttons, sheets */
  --radius-lg: 20px;  /* modals, large containers */
  --radius-full: 999px;

  /* Premium spring animation easing curves (Aether Nav) */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-spring-heavy: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --ease-snappy: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-fluid: cubic-bezier(0.25, 1, 0.5, 1);

  /* ---- 5. ELEVATION — near-flat. Depth via border + tiny shadow, never big - */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(26,26,23,.04);
  --elev-2: 0 2px 8px rgba(26,26,23,.06), 0 1px 2px rgba(26,26,23,.04);
  --elev-3: 0 8px 24px rgba(26,26,23,.08), 0 2px 6px rgba(26,26,23,.04);

  /* ---- 6. MOTION — brief, soft. Quiet products don't bounce ---------------- */
  --ease: cubic-bezier(.2,0,0,1);
  --dur-fast: 100ms;
  --dur: 160ms;
  --dur-slow: 240ms;

  /* ==========================================================================
     7. DENSITY — THE ROLE VARIABLE
     --------------------------------------------------------------------------
     This is what makes role interfaces genuinely different rather than recolored.
     Set --density on a role's root element and the ENTIRE interface rescales:
     spacing, control height, and type step move together as one coordinated system.

       [data-density="compact"]   campus manager — war room, maximum on screen
       [data-density="default"]   most operational roles
       [data-density="comfortable"] tenant / occasional users — calm, spacious
       [data-density="touch"]     guard / technician — big targets, gloves, motion

     Components NEVER hardcode height or padding. They read these three vars.
     ========================================================================== */
  --density-space: 1;      /* multiplier on component padding */
  --density-control: 36px; /* base interactive control height */
  --density-type: 1;       /* multiplier on the type ramp */
  --density-gap: var(--space-4); /* base gap between stacked elements */

  /* ---- Aether Nav canonical token names ------------------------------------
     The design guide's own variable vocabulary, aliased onto the platform
     tokens so both names resolve identically in every theme. */
  --bg-color: var(--c-bg);
  --panel-bg: var(--c-surface);
  --panel-solid: var(--c-surface-2);
  --border-color: var(--c-border);
  --border-glow: var(--c-glass-glow);
  --text-primary: var(--c-text);
  --text-secondary: var(--c-text-2);
  --text-muted: var(--c-text-3);
  --accent: var(--c-accent);
  --accent-glow: var(--c-accent-weak);
  --accent-cyan: var(--c-highlight);
  --cyan-glow: var(--c-highlight-weak);
}

/* ---- Density presets ------------------------------------------------------ */
[data-density="compact"] {
  --density-space: 0.72;
  --density-control: 30px;
  --density-type: 0.94;
  --density-gap: var(--space-2);
}
[data-density="default"] {
  --density-space: 1;
  --density-control: 36px;
  --density-type: 1;
  --density-gap: var(--space-4);
}
[data-density="comfortable"] {
  --density-space: 1.35;
  --density-control: 44px;
  --density-type: 1.08;
  --density-gap: var(--space-6);
}
[data-density="touch"] {
  --density-space: 1.5;
  --density-control: 56px;
  --density-type: 1.15;
  --density-gap: var(--space-5);
}

/* ---- Dark surface (guard/technician field mode) --------------------------- */
/* Same tokens, inverted base. Accent and semantics keep their meaning. */
[data-theme="field"] {
  --c-bg:          hsl(240, 10%, 4%);
  --c-surface:     hsla(240, 10%, 15%, 0.45);
  --c-surface-2:   hsla(240, 10%, 10%, 0.6);
  --c-surface-3:   rgba(255, 255, 255, 0.04);
  --c-glass-bg:     hsla(240, 10%, 10%, 0.45);
  --c-glass-border: rgba(255, 255, 255, 0.08);
  --c-glass-glow:   hsla(267, 100%, 63%, 0.12);
  --c-border:      rgba(255, 255, 255, 0.08);
  --c-border-2:    rgba(255, 255, 255, 0.15);
  --c-border-3:    rgba(255, 255, 255, 0.25);
  --c-text:        hsl(0, 0%, 98%);
  --c-text-2:      hsl(240, 5%, 78%);
  --c-text-3:      hsl(240, 5%, 65%);
  --c-text-4:      hsl(240, 5%, 45%);
  --c-accent:      hsl(267, 100%, 63%);
  --c-accent-hover:hsl(267, 90%, 70%);
  --c-accent-weak: hsla(267, 100%, 63%, 0.25);
  --c-success:     #10b981; --c-success-weak: rgba(16, 185, 129, 0.1);
  --c-warning:     #f59e0b; --c-warning-weak: rgba(245, 158, 11, 0.1);
  --c-danger:      #ef4444; --c-danger-weak:  rgba(239, 68, 68, 0.1);
  --c-info:        #3b82f6; --c-info-weak:    rgba(59, 130, 246, 0.1);
}

/* ---- Light surface overrides ----------------------------------------------- */
[data-theme="light"] {
  --c-bg:          hsl(240, 20%, 98%);
  --c-surface:     hsla(240, 20%, 94%, 0.5);
  --c-surface-2:   hsl(240, 20%, 95%);
  --c-surface-3:   hsla(240, 20%, 90%, 0.5);
  --c-glass-bg:     hsla(240, 20%, 94%, 0.5);
  --c-glass-border: hsla(240, 10%, 10%, 0.06);
  --c-glass-glow:   hsla(267, 100%, 63%, 0.1);

  --c-border:      hsla(240, 10%, 10%, 0.06);
  --c-border-2:    hsla(240, 10%, 10%, 0.12);
  --c-border-3:    hsla(240, 10%, 10%, 0.20);

  --c-text:        hsl(240, 10%, 10%);
  --c-text-2:      hsl(240, 5%, 35%);
  --c-text-3:      hsl(240, 5%, 55%);
  --c-text-4:      hsl(240, 5%, 65%);

  --c-accent:      hsl(267, 90%, 55%);
  --c-accent-hover:hsl(267, 90%, 45%);
  --c-accent-weak: hsla(267, 100%, 63%, 0.15);
  --c-highlight:   hsl(190, 95%, 40%);
  --c-highlight-weak: hsla(190, 100%, 50%, 0.12);

  --c-chrome:        hsl(240, 20%, 95%);
  --c-chrome-2:      hsla(240, 20%, 90%, 0.5);
  --c-chrome-border: hsla(240, 10%, 10%, 0.06);
  --c-chrome-text:   hsl(240, 10%, 10%);
  --c-chrome-text-2: hsl(240, 5%, 35%);
  --c-chrome-accent: hsl(267, 90%, 55%);
  --c-chrome-accent-weak: hsla(267, 100%, 63%, 0.15);
  --c-chrome-cyan:   hsl(190, 95%, 40%);
  --c-chrome-cyan-weak: hsla(190, 100%, 50%, 0.12);
}

/* ---- Permanent Dark Widget Context (Aether Nav rule 4) --------------------
   Interactive sandboxes, camera/scanner surfaces, and code blocks stay dark
   regardless of theme so content never renders black-on-black in light mode.
   Scope with .always-dark or .sandbox-playground. */
.always-dark,
.sandbox-playground {
  --c-bg:          hsl(240, 10%, 3.9%);
  --c-surface:     hsla(240, 10%, 10%, 0.45);
  --c-surface-2:   hsl(240, 10%, 10%);
  --c-surface-3:   hsla(240, 10%, 15%, 0.5);
  --c-glass-bg:     hsla(240, 10%, 10%, 0.45);
  --c-glass-border: hsla(240, 10%, 80%, 0.08);
  --c-glass-glow:   hsla(267, 100%, 63%, 0.15);
  --c-border:      hsla(240, 10%, 80%, 0.08);
  --c-border-2:    hsla(240, 10%, 80%, 0.12);
  --c-border-3:    hsla(240, 10%, 80%, 0.20);
  --c-text:        hsl(0, 0%, 98%);
  --c-text-2:      hsl(240, 5%, 65%);
  --c-text-3:      hsl(240, 5%, 45%);
  --c-text-4:      hsl(240, 5%, 35%);
  --c-accent:      hsl(267, 100%, 63%);
  --c-accent-hover:hsl(267, 90%, 70%);
  --c-accent-weak: hsla(267, 100%, 63%, 0.25);
  --c-highlight:      hsl(190, 100%, 50%);
  --c-highlight-weak: hsla(190, 100%, 50%, 0.2);
  color: var(--c-text);
}

/* ============================================================================
   8. COMPOSITION RULES — how primitives become components.
   These are the GRAMMAR. Every component derives from tokens + density vars.
   A developer builds new screens by composing these, never by inventing values.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: calc(var(--type-base) * var(--density-type));
  line-height: var(--leading-normal);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

/* --- Rule: every interactive control is one density-unit tall -------------- */
.fos-control {
  height: var(--density-control);
  padding: 0 calc(var(--space-3) * var(--density-space));
  border-radius: var(--radius-sm);
  font-size: calc(var(--type-md) * var(--density-type));
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* --- Rule: buttons ---------------------------------------------------------- */
.fos-btn {
  height: var(--density-control);
  padding: 0 calc(var(--space-4) * var(--density-space));
  border-radius: var(--radius-md);
  font-size: calc(var(--type-md) * var(--density-type));
  font-weight: var(--weight-medium);
  font-family: inherit;
  border: 1px solid var(--c-border-2);
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fos-btn:hover { background: var(--c-surface-2); }
.fos-btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-text);
}
.fos-btn--primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.fos-btn--danger {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: #fff;
}
.fos-btn--ghost { background: transparent; border-color: transparent; color: var(--c-text-2); }
.fos-btn--ghost:hover { background: var(--c-surface-2); }

/* --- Rule: inputs — recessed well, hairline, focus lifts to accent --------- */
.fos-input {
  height: var(--density-control);
  width: 100%;
  padding: 0 calc(var(--space-3) * var(--density-space));
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border-2);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: calc(var(--type-md) * var(--density-type));
  font-family: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fos-input::placeholder { color: var(--c-text-3); }
.fos-input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-weak);
}

/* --- Rule: the micro-label — the ONLY place uppercase tracking is used ------ */
.fos-label {
  font-size: calc(var(--type-xs) * var(--density-type));
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-text-3);
}

/* --- Rule: card — surface + hairline + tiny elevation. No heavy shadows ---- */
.fos-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
}
.fos-card__header {
  padding: calc(var(--space-3) * var(--density-space)) calc(var(--space-4) * var(--density-space));
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fos-card__body {
  padding: calc(var(--space-4) * var(--density-space));
}

/* --- Rule: title — tight tracking, semibold, scales with density ----------- */
.fos-title {
  font-size: calc(var(--type-lg) * var(--density-type));
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-tight);
  color: var(--c-text);
}
.fos-title--display {
  font-size: calc(var(--type-2xl) * var(--density-type));
  letter-spacing: var(--track-tight);
  line-height: var(--leading-tight);
}

/* --- Rule: status dot + text (never a loud filled pill by default) --------- */
.fos-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: calc(var(--type-sm) * var(--density-type));
  color: var(--c-text-2);
}
.fos-status__dot { width: 6px; height: 6px; border-radius: var(--radius-full); flex: none; }
.fos-status--active  .fos-status__dot { background: var(--c-success); }
.fos-status--warn    .fos-status__dot { background: var(--c-warning); }
.fos-status--danger  .fos-status__dot { background: var(--c-danger); }
.fos-status--idle    .fos-status__dot { background: var(--c-text-4); }

/* --- Rule: the stack — vertical rhythm comes from ONE gap token ------------ */
.fos-stack { display: flex; flex-direction: column; gap: var(--density-gap); }
.fos-stack--tight { gap: calc(var(--space-2) * var(--density-space)); }
.fos-row { display: flex; align-items: center; gap: calc(var(--space-3) * var(--density-space)); }

/* --- Rule: data table — hairlines only, generous row height at density ----- */
.fos-table { width: 100%; border-collapse: collapse; }
.fos-table th {
  text-align: left;
  padding: calc(var(--space-2) * var(--density-space)) calc(var(--space-3) * var(--density-space));
  font-size: calc(var(--type-xs) * var(--density-type));
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-text-3);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2);
}
.fos-table td {
  padding: calc(var(--space-4) * var(--density-space)) calc(var(--space-3) * var(--density-space));
  font-size: calc(var(--type-md) * var(--density-type));
  line-height: 1.5;
  color: var(--c-text-2);
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;          /* single-line rows; long values scroll in .table-wrap, never wrap to 4 lines */
}
.fos-table th { white-space: nowrap; }
/* Truncate an over-long primary cell gracefully instead of forcing wide horizontal scroll. */
.fos-table td { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; }
.fos-table tr:last-child td { border-bottom: none; }

/* --- Accessibility floor: focus is always visible, motion respected -------- */
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ============================================================================
   OptimaOS Alternative Design Languages Overrides
   ============================================================================ */

/* 1. CHRONOS ALABASTER (Warm Minimalist Editorial Mode) */
/* Light Mode (Default) */
html[data-theme-style="chronos"] {
  --c-bg:           hsl(40, 20%, 98%);
  --c-surface:      hsla(40, 20%, 98%, 0.85);
  --c-surface-2:    hsl(40, 15%, 96%);
  --c-surface-3:    hsl(40, 10%, 93%);
  --c-glass-bg:     hsla(40, 20%, 98%, 0.85);
  --c-glass-border: hsla(40, 10%, 15%, 0.08);
  --c-glass-glow:   hsla(14, 75%, 48%, 0.08);

  --c-border:       hsla(40, 10%, 15%, 0.08);
  --c-border-2:     hsla(40, 10%, 15%, 0.12);
  --c-border-3:     hsla(40, 10%, 15%, 0.20);

  --c-text:         hsl(220, 20%, 15%);
  --c-text-2:       hsl(40, 10%, 45%);
  --c-text-3:       hsl(40, 5%, 60%);
  --c-text-4:       hsl(40, 5%, 70%);

  --c-accent:       hsl(14, 75%, 48%);
  --c-accent-hover: hsl(14, 65%, 43%);
  --c-accent-weak:  hsla(14, 75%, 48%, 0.15);
  --c-accent-text:  #FFFFFF;

  --c-highlight:    hsl(160, 45%, 35%);
  --c-highlight-weak: hsla(160, 45%, 35%, 0.15);

  --font-sans:      "Lora", Georgia, -apple-system, serif;
  --font-display:   "Lora", serif;
  --font-mono:      "JetBrains Mono", monospace;

  --radius-sm:      4px;
  --radius-md:      6px;
  --radius-lg:      10px;

  --c-page:         hsl(40, 20%, 98%);
  --c-chrome:        hsl(40, 20%, 98%);
  --c-chrome-2:      hsla(40, 20%, 98%, 0.85);
  --c-chrome-border: hsla(40, 10%, 15%, 0.08);
  --c-chrome-text:   hsl(220, 20%, 15%);
  --c-chrome-text-2: hsl(40, 10%, 45%);
}

/* Dark Mode Override */
html[data-theme-style="chronos"][data-theme="dark"] {
    --c-bg:           hsl(220, 20%, 12%);
    --c-surface:      hsla(220, 20%, 15%, 0.85);
    --c-surface-2:    hsl(220, 15%, 15%);
    --c-surface-3:    hsl(220, 10%, 18%);
    --c-glass-bg:     hsla(220, 20%, 15%, 0.85);
    --c-glass-border: hsla(40, 10%, 80%, 0.08);
    --c-glass-glow:   hsla(14, 75%, 48%, 0.15);

    --c-border:       hsla(40, 10%, 80%, 0.08);
    --c-border-2:     hsla(40, 10%, 80%, 0.12);
    --c-border-3:     hsla(40, 10%, 80%, 0.20);

    --c-text:         hsl(40, 20%, 95%);
    --c-text-2:       hsl(40, 10%, 75%);
    --c-text-3:       hsl(40, 5%, 55%);
    --c-text-4:       hsl(40, 5%, 45%);

    --c-page:         hsl(220, 20%, 12%);
    --c-chrome:        hsl(220, 20%, 12%);
    --c-chrome-2:      hsla(220, 20%, 15%, 0.85);
    --c-chrome-border: hsla(40, 10%, 80%, 0.08);
    --c-chrome-text:   hsl(40, 20%, 95%);
    --c-chrome-text-2: hsl(40, 10%, 75%);
}
@media (prefers-color-scheme: dark) {
  html[data-theme-style="chronos"]:not([data-theme="light"]) {
    --c-bg:           hsl(220, 20%, 12%);
    --c-surface:      hsla(220, 20%, 15%, 0.85);
    --c-surface-2:    hsl(220, 15%, 15%);
    --c-surface-3:    hsl(220, 10%, 18%);
    --c-glass-bg:     hsla(220, 20%, 15%, 0.85);
    --c-glass-border: hsla(40, 10%, 80%, 0.08);
    --c-glass-glow:   hsla(14, 75%, 48%, 0.15);

    --c-border:       hsla(40, 10%, 80%, 0.08);
    --c-border-2:     hsla(40, 10%, 80%, 0.12);
    --c-border-3:     hsla(40, 10%, 80%, 0.20);

    --c-text:         hsl(40, 20%, 95%);
    --c-text-2:       hsl(40, 10%, 75%);
    --c-text-3:       hsl(40, 5%, 55%);
    --c-text-4:       hsl(40, 5%, 45%);

    --c-page:         hsl(220, 20%, 12%);
    --c-chrome:        hsl(220, 20%, 12%);
    --c-chrome-2:      hsla(220, 20%, 15%, 0.85);
    --c-chrome-border: hsla(40, 10%, 80%, 0.08);
    --c-chrome-text:   hsl(40, 20%, 95%);
    --c-chrome-text-2: hsl(40, 10%, 75%);
  }
}

/* 2. HELIOS NOVA (Solar Cyberpunk HUD Mode) */
/* Dark Mode (Default) */
html[data-theme-style="helios"] {
  --c-bg:           hsl(24, 12%, 5%);
  --c-surface:      hsla(24, 10%, 10%, 0.75);
  --c-surface-2:    hsl(24, 10%, 12%);
  --c-surface-3:    hsla(24, 10%, 15%, 0.8);
  --c-glass-bg:     hsla(24, 10%, 10%, 0.75);
  --c-glass-border: hsla(35, 100%, 55%, 0.12);
  --c-glass-glow:   hsla(35, 100%, 55%, 0.15);

  --c-border:       hsla(35, 100%, 55%, 0.12);
  --c-border-2:     hsla(35, 100%, 55%, 0.20);
  --c-border-3:     hsla(35, 100%, 55%, 0.35);

  --c-text:         hsl(40, 20%, 90%);
  --c-text-2:       hsl(30, 15%, 65%);
  --c-text-3:       hsl(30, 10%, 45%);
  --c-text-4:       hsl(30, 10%, 35%);

  --c-accent:       hsl(35, 100%, 55%);
  --c-accent-hover: hsl(35, 90%, 65%);
  --c-accent-weak:  hsla(35, 100%, 55%, 0.2);
  --c-accent-text:  #000000;

  --c-highlight:    hsl(0, 100%, 60%);
  --c-highlight-weak: hsla(0, 100%, 60%, 0.2);

  --font-sans:      "Space Mono", "JetBrains Mono", monospace;
  --font-display:   "Space Mono", monospace;
  --font-mono:      "Space Mono", monospace;

  --radius-sm:      2px;
  --radius-md:      4px;
  --radius-lg:      6px;

  --c-page:         hsl(24, 12%, 5%);
  --c-chrome:        hsl(24, 12%, 5%);
  --c-chrome-2:      hsla(24, 12%, 5%, 0.75);
  --c-chrome-border: hsla(35, 100%, 55%, 0.12);
  --c-chrome-text:   hsl(40, 20%, 90%);
  --c-chrome-text-2: hsl(30, 15%, 65%);
}

/* Light Mode Override */
html[data-theme-style="helios"][data-theme="light"] {
    --c-bg:           hsl(40, 10%, 94%);
    --c-surface:      hsla(40, 10%, 98%, 0.85);
    --c-surface-2:    hsl(40, 10%, 96%);
    --c-surface-3:    hsl(40, 10%, 92%);
    --c-glass-bg:     hsla(40, 10%, 98%, 0.85);
    --c-glass-border: hsla(24, 100%, 40%, 0.15);
    --c-glass-glow:   hsla(24, 100%, 40%, 0.15);

    --c-border:       hsla(24, 100%, 40%, 0.15);
    --c-border-2:     hsla(24, 100%, 40%, 0.25);
    --c-border-3:     hsla(24, 100%, 40%, 0.40);

    --c-text:         hsl(24, 20%, 10%);
    --c-text-2:       hsl(24, 15%, 35%);
    --c-text-3:       hsl(24, 10%, 55%);
    --c-text-4:       hsl(24, 10%, 65%);

    --c-accent:       hsl(24, 100%, 40%);
    --c-accent-hover: hsl(24, 90%, 35%);
    --c-accent-weak:  hsla(24, 100%, 40%, 0.15);
    --c-accent-text:  #FFFFFF;

    --c-page:         hsl(40, 10%, 94%);
    --c-chrome:        hsl(40, 10%, 94%);
    --c-chrome-2:      hsla(40, 10%, 98%, 0.85);
    --c-chrome-border: hsla(24, 100%, 40%, 0.15);
    --c-chrome-text:   hsl(24, 20%, 10%);
    --c-chrome-text-2: hsl(24, 15%, 35%);
}
@media (prefers-color-scheme: light) {
  html[data-theme-style="helios"]:not([data-theme="dark"]) {
    --c-bg:           hsl(40, 10%, 94%);
    --c-surface:      hsla(40, 10%, 98%, 0.85);
    --c-surface-2:    hsl(40, 10%, 96%);
    --c-surface-3:    hsl(40, 10%, 92%);
    --c-glass-bg:     hsla(40, 10%, 98%, 0.85);
    --c-glass-border: hsla(24, 100%, 40%, 0.15);
    --c-glass-glow:   hsla(24, 100%, 40%, 0.15);

    --c-border:       hsla(24, 100%, 40%, 0.15);
    --c-border-2:     hsla(24, 100%, 40%, 0.25);
    --c-border-3:     hsla(24, 100%, 40%, 0.40);

    --c-text:         hsl(24, 20%, 10%);
    --c-text-2:       hsl(24, 15%, 35%);
    --c-text-3:       hsl(24, 10%, 55%);
    --c-text-4:       hsl(24, 10%, 65%);

    --c-accent:       hsl(24, 100%, 40%);
    --c-accent-hover: hsl(24, 90%, 35%);
    --c-accent-weak:  hsla(24, 100%, 40%, 0.15);
    --c-accent-text:  #FFFFFF;

    --c-page:         hsl(40, 10%, 94%);
    --c-chrome:        hsl(40, 10%, 94%);
    --c-chrome-2:      hsla(40, 10%, 98%, 0.85);
    --c-chrome-border: hsla(24, 100%, 40%, 0.15);
    --c-chrome-text:   hsl(24, 20%, 10%);
    --c-chrome-text-2: hsl(24, 15%, 35%);
  }
}

/* 3. NEPHRITE ZEN (Calm Organic Moss Mode) */
/* Dark Mode (Default) */
html[data-theme-style="nephrite"] {
  --c-bg:           hsl(150, 25%, 6%);
  --c-surface:      hsla(150, 20%, 12%, 0.55);
  --c-surface-2:    hsl(150, 20%, 12%);
  --c-surface-3:    hsla(150, 15%, 16%, 0.6);
  --c-glass-bg:     hsla(150, 20%, 12%, 0.55);
  --c-glass-border: hsla(150, 30%, 80%, 0.08);
  --c-glass-glow:   hsla(150, 80%, 40%, 0.15);

  --c-border:       hsla(150, 30%, 80%, 0.08);
  --c-border-2:     hsla(150, 30%, 80%, 0.15);
  --c-border-3:     hsla(150, 30%, 80%, 0.25);

  --c-text:         hsl(150, 15%, 95%);
  --c-text-2:       hsl(150, 10%, 75%);
  --c-text-3:       hsl(150, 5%, 55%);
  --c-text-4:       hsl(150, 5%, 40%);

  --c-accent:       hsl(150, 80%, 40%);
  --c-accent-hover: hsl(150, 70%, 50%);
  --c-accent-weak:  hsla(150, 80%, 40%, 0.2);
  --c-accent-text:  #FFFFFF;

  --c-highlight:    hsl(35, 30%, 88%);
  --c-highlight-weak: hsla(35, 30%, 88%, 0.2);

  --font-sans:      "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display:   "Plus Jakarta Sans", sans-serif;
  --font-mono:      "JetBrains Mono", monospace;

  --radius-sm:      12px;
  --radius-md:      18px;
  --radius-lg:      26px;

  --c-page:         hsl(150, 25%, 6%);
  --c-chrome:        hsl(150, 25%, 6%);
  --c-chrome-2:      hsla(150, 25%, 6%, 0.55);
  --c-chrome-border: hsla(150, 30%, 80%, 0.08);
  --c-chrome-text:   hsl(150, 15%, 95%);
  --c-chrome-text-2: hsl(150, 15%, 35%);
}

/* Light Mode Override */
html[data-theme-style="nephrite"][data-theme="light"] {
    --c-bg:           hsl(150, 20%, 95%);
    --c-surface:      hsla(150, 20%, 98%, 0.75);
    --c-surface-2:    hsl(150, 15%, 92%);
    --c-surface-3:    hsl(150, 10%, 88%);
    --c-glass-bg:     hsla(150, 20%, 98%, 0.75);
    --c-glass-border: hsla(150, 30%, 20%, 0.12);
    --c-glass-glow:   hsla(150, 60%, 30%, 0.15);

    --c-border:       hsla(150, 30%, 20%, 0.12);
    --c-border-2:     hsla(150, 30%, 20%, 0.20);
    --c-border-3:     hsla(150, 30%, 20%, 0.30);

    --c-text:         hsl(150, 30%, 12%);
    --c-text-2:       hsl(150, 15%, 35%);
    --c-text-3:       hsl(150, 10%, 55%);
    --c-text-4:       hsl(150, 10%, 65%);

    --c-accent:       hsl(150, 60%, 30%);
    --c-accent-hover: hsl(150, 50%, 25%);
    --c-accent-weak:  hsla(150, 60%, 30%, 0.15);
    --c-accent-text:  #FFFFFF;

    --c-page:         hsl(150, 20%, 95%);
    --c-chrome:        hsl(150, 20%, 95%);
    --c-chrome-2:      hsla(150, 20%, 98%, 0.75);
    --c-chrome-border: hsla(150, 30%, 20%, 0.12);
    --c-chrome-text:   hsl(150, 30%, 12%);
    --c-chrome-text-2: hsl(150, 15%, 35%);
}
@media (prefers-color-scheme: light) {
  html[data-theme-style="nephrite"]:not([data-theme="dark"]) {
    --c-bg:           hsl(150, 20%, 95%);
    --c-surface:      hsla(150, 20%, 98%, 0.75);
    --c-surface-2:    hsl(150, 15%, 92%);
    --c-surface-3:    hsl(150, 10%, 88%);
    --c-glass-bg:     hsla(150, 20%, 98%, 0.75);
    --c-glass-border: hsla(150, 30%, 20%, 0.12);
    --c-glass-glow:   hsla(150, 60%, 30%, 0.15);

    --c-border:       hsla(150, 30%, 20%, 0.12);
    --c-border-2:     hsla(150, 30%, 20%, 0.20);
    --c-border-3:     hsla(150, 30%, 20%, 0.30);

    --c-text:         hsl(150, 30%, 12%);
    --c-text-2:       hsl(150, 15%, 35%);
    --c-text-3:       hsl(150, 10%, 55%);
    --c-text-4:       hsl(150, 10%, 65%);

    --c-accent:       hsl(150, 60%, 30%);
    --c-accent-hover: hsl(150, 50%, 25%);
    --c-accent-weak:  hsla(150, 60%, 30%, 0.15);
    --c-accent-text:  #FFFFFF;

    --c-page:         hsl(150, 20%, 95%);
    --c-chrome:        hsl(150, 20%, 95%);
    --c-chrome-2:      hsla(150, 20%, 98%, 0.75);
    --c-chrome-border: hsla(150, 30%, 20%, 0.12);
    --c-chrome-text:   hsl(150, 30%, 12%);
    --c-chrome-text-2: hsl(150, 15%, 35%);
  }
}


/* ============================================================================
   9. HIERARCHICAL NAVIGATION TOKENS & COMPONENTS
   ----------------------------------------------------------------------------
   Structural tokens and component classes for the recursive sidebar, accordion
   tree, breadcrumb trail, and main content pane zones.

   These are the canonical definitions. All other files MUST reference these
   values — never redefine them locally.

   Component classes follow the fos-nav-* and fos-breadcrumb-* namespaces.
   Compose these classes. Do not invent bespoke nav styles in component files.
   ============================================================================ */

:root {

  /* ---- Navigation structural primitives ------------------------------------ */
  /* Per-depth indentation increment for recursive tree nodes.                 */
  /* 8px could not express depth: root-to-leaf was 24px total across 4 levels, so the
     tree read as one flat list and the eye had no hierarchy to filter with. */
  --nav-indent-step:    14px;

  /* Width of the vertical ancestor guide line (track) alongside children.     */
  --nav-track-width:    1px;

  /* Width of the glowing accent bar pinned to the left of the active leaf.    */
  --nav-active-bar:     3px;

  /* Duration for accordion open/close transitions. Use with --ease-fluid.     */
  --nav-transition-dur: 220ms;

}

/* ---- Navigation node base ------------------------------------------------- */
/* One class for all tree nodes regardless of depth or type.                   */
.fos-nav-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(var(--density-control) * 0.85);
  padding-right: calc(var(--space-3) * var(--density-space));
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  transition:
    background var(--dur) var(--ease),
    color     var(--dur) var(--ease);
}
.fos-nav-node:hover {
  background: var(--c-surface-3);
}

/* ---- Node type variants --------------------------------------------------- */
.fos-nav-node--folder .fos-nav-node__label {
  font-weight: var(--weight-semibold); /* overridden per-depth by renderNavNode */
}
.fos-nav-node--leaf .fos-nav-node__label {
  font-weight: var(--weight-normal);
}

/* ---- Active leaf state ---------------------------------------------------- */
.fos-nav-node--active {
  background: var(--c-accent-weak);
  color: var(--c-text);
}
.fos-nav-node--active .fos-nav-node__label {
  font-weight: var(--weight-semibold);
  color: var(--c-accent);
}

/* The glowing vertical accent bar — positioned absolute to the left edge.     */
.fos-nav-active-bar {
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: var(--nav-active-bar);
  background: var(--c-accent);
  box-shadow: 0 0 8px var(--c-accent-weak);
  border-radius: var(--radius-full);
  pointer-events: none;
}

/* ---- Expanded folder state ------------------------------------------------ */
/* JS toggles this class on the node element, not the children wrapper.        */
.fos-nav-node--expanded > .fos-nav-chevron {
  transform: rotate(90deg);
  color: var(--c-accent);
}

/* ---- Chevron icon --------------------------------------------------------- */
.fos-nav-chevron {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  font-size: calc(var(--type-sm) * var(--density-type));
  color: var(--c-text-3);
  transition: transform var(--nav-transition-dur) var(--ease);
  /* var(--ease) is the system easing; guide-specific overrides use --ease-fluid */
}

/* ---- Node icon ------------------------------------------------------------ */
.fos-nav-node__icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--type-md) * var(--density-type));
  color: var(--c-text-2);
}
.fos-nav-node--active .fos-nav-node__icon { color: var(--c-accent); }

/* ---- Node label ----------------------------------------------------------- */
.fos-nav-node__label {
  flex: 1;
  min-width: 0;
  font-size: calc(var(--type-sm) * var(--density-type));
  color: var(--c-text-2);
  /* Legibility: never cut a nav label. Wrap to as many lines as needed and let
     the row grow (§7 nav must be legible before it is compact). Paired with the
     wider --sidebar-w, most labels still sit on one line. No overflow:hidden —
     nothing is ever clipped mid-word. */
  white-space: normal;
  /* Break at spaces first (whole words); only hyphenate a single word if it alone
     doesn't fit the now-wider column. Prevents both mid-word breaks AND clipping. */
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.3;
  transition: color var(--dur) var(--ease);
}
.fos-nav-node:hover .fos-nav-node__label { color: var(--c-text); }

/* ---- Children wrapper — progressive disclosure via max-height ------------- */
/* NEVER use display:none / display:block. Accordion must be CSS-driven.       */
/* Three properties animate together for a smooth, organic glide:              */
/*   max-height — opens the space | opacity — fades in | scaleY — squish feel */
.fos-nav-children {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: scaleY(0.95);             /* subtle vertical squish at close      */
  transform-origin: top center;
  transition:
    max-height var(--nav-transition-dur) var(--ease),
    opacity    var(--nav-transition-dur) var(--ease),
    transform  var(--nav-transition-dur) var(--ease);
}
.fos-nav-children--open {
  /* Large enough ceiling for any subtree — avoids measuring DOM heights.      */
  max-height: 2000px;
  opacity: 1;
  transform: scaleY(1);                /* full height — glides open            */
}

/* ---- Vertical ancestor track line ---------------------------------------- */
/* Rendered by JS as a style on the children wrapper, but this class can       */
/* be applied directly when the track is a sibling element.                    */
.fos-nav-track {
  border-left: var(--nav-track-width) solid var(--c-border);
  margin-left: calc(var(--space-1) * var(--density-space));  /* reduced: per-level margin compounded, starving deep labels */
  padding-left: var(--space-2);
}

/* ============================================================================
   9b. BREADCRUMB COMPONENT
   ============================================================================ */

/* Base wrapper — theme guides apply their own background/blur overrides.     */
.fos-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: calc(var(--space-2) * var(--density-space)) calc(var(--space-4) * var(--density-space));
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}

/* Ordered list of crumbs */
.fos-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Individual crumb */
.fos-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Clickable ancestor link */
.fos-breadcrumb__link {
  font-size: calc(var(--type-sm) * var(--density-type));
  color: var(--c-text-3);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.fos-breadcrumb__link:hover { color: var(--c-accent); }

/* Non-clickable current page */
.fos-breadcrumb__item--current .fos-breadcrumb__link,
.fos-breadcrumb__item--current span {
  font-size: calc(var(--type-sm) * var(--density-type));
  font-weight: var(--weight-medium);
  color: var(--c-text);
  cursor: default;
  pointer-events: none;
}

/* Separator between crumbs */
.fos-breadcrumb__separator {
  font-size: calc(var(--type-xs) * var(--density-type));
  color: var(--c-text-4);
  pointer-events: none;
  aria-hidden: true;
}

/* ============================================================================
   9c. MAIN CONTENT PANE ZONE CLASSES
   ============================================================================ */

/* Zone 1 — breadcrumb + title + action toolbar container */
.fos-content-header {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-3) * var(--density-space));
}

.fos-content-header__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space-3) * var(--density-space));
}

/* Zone 2 — KPI metric card grid (3–4 cards max) */
.fos-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: calc(var(--space-4) * var(--density-space));
}
/* Module KPI strip: pin to the exact card count (set inline as --kpi-cols) so
   the cards stretch edge-to-edge instead of leaving a trailing empty track. */
.fos-metric-grid.fos-kpi-strip {
  display: grid;
  grid-template-columns: repeat(var(--kpi-cols, 4), minmax(0, 1fr));
}
@media (max-width: 900px) {
  .fos-metric-grid.fos-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Individual KPI card */
.fos-metric-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
  padding: calc(var(--space-4) * var(--density-space));
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Large primary figure */
.fos-metric-card__value {
  font-size: calc(var(--type-2xl) * var(--density-type));
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-tight);
  color: var(--c-text);
  line-height: var(--leading-tight);
}

/* Small muted descriptive label */
.fos-metric-card__label {
  font-size: calc(var(--type-xs) * var(--density-type));
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-text-3);
}

/* Zone 3 — primary data display area */
.fos-content-matrix {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-4) * var(--density-space));
}

/* Hover-reveal tertiary actions pattern */
/* Apply to table rows or card items. Actions start invisible. */
.fos-row-actions {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  pointer-events: none;
}
tr:hover .fos-row-actions,
.fos-card:hover .fos-row-actions {
  opacity: 1;
  pointer-events: auto;
}

/* Skeleton loader — shown immediately on route change before data arrives */
.fos-skeleton {
  background: linear-gradient(
    90deg,
    var(--c-surface-2) 25%,
    var(--c-surface-3) 50%,
    var(--c-surface-2) 75%
  );
  background-size: 200% 100%;
  animation: fos-skeleton-sweep 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes fos-skeleton-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fos-skeleton { animation: none; background: var(--c-surface-2); }
}

/* ============================================================================
   9d. STATUS BADGE COMPONENT
   ----------------------------------------------------------------------------
   Use .fos-status-badge when the user needs to read the status word at a
   glance (e.g. in a detail header or modal). Use .fos-status__dot for compact
   row-level indicators in lists and tables.

   Variants: success | warning | danger | info | neutral | pending
   Usage:    <span class="fos-status-badge fos-status-badge--success">Completed</span>
   ============================================================================ */

.fos-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: calc(var(--space-1) * var(--density-space)) calc(var(--space-2) * var(--density-space));
  font-size: calc(var(--type-xs) * var(--density-type));
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-label);
  border-radius: var(--radius-full);   /* pill shape */
  white-space: nowrap;
  line-height: 1;
}

/* Success — soft green — "Completed", "Active", "Verified" */
.fos-status-badge--success {
  background: hsl(142 40% 15% / 0.7);
  color: hsl(142 70% 60%);
  border: 1px solid hsl(142 50% 30% / 0.4);
}

/* Warning — soft amber — "In Progress", "Pending Review", "Expiring Soon" */
.fos-status-badge--warning {
  background: hsl(38 60% 15% / 0.7);
  color: hsl(38 90% 65%);
  border: 1px solid hsl(38 60% 35% / 0.4);
}

/* Danger — soft red — "Overdue", "Rejected", "Critical" */
.fos-status-badge--danger {
  background: hsl(0 50% 15% / 0.7);
  color: hsl(0 80% 65%);
  border: 1px solid hsl(0 50% 30% / 0.4);
}

/* Info — soft blue — "Scheduled", "Under Review", "Submitted" */
.fos-status-badge--info {
  background: hsl(210 50% 15% / 0.7);
  color: hsl(210 80% 65%);
  border: 1px solid hsl(210 50% 30% / 0.4);
}

/* Neutral — muted — "Draft", "Archived", "Inactive" */
.fos-status-badge--neutral {
  background: var(--c-surface-3);
  color: var(--c-text-3);
  border: 1px solid var(--c-border);
}

/* Pending — soft violet (accent-aligned) — "Awaiting Approval", "Queued" */
.fos-status-badge--pending {
  background: hsl(260 50% 15% / 0.7);
  color: hsl(260 80% 75%);
  border: 1px solid hsl(260 50% 35% / 0.4);
}

/* Optional dot indicator inside badge (prepend before text label) */
.fos-status-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

/* ============================================================================
   9e. FOLDER OVERVIEW LAYOUT
   ----------------------------------------------------------------------------
   Rendered in the main content pane when the user clicks a FOLDER node.
   (Contrast with the full three-zone Detail View for leaf-node clicks.)

   Layout: a responsive card grid showing each immediate child of the folder.
   No KPI metric zone. No breadcrumb zone (breadcrumb is still rendered above
   this by fos-content-header, but fos-metric-grid is omitted).
   ============================================================================ */

/* Wrapper for the folder overview card grid */
.fos-folder-overview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: calc(var(--space-4) * var(--density-space));
}

/* Individual child card inside folder overview */
.fos-folder-child-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
  padding: calc(var(--space-4) * var(--density-space));
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-2) * var(--density-space));
  cursor: pointer;
  transition:
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.fos-folder-child-card:hover {
  box-shadow: var(--elev-2);
  border-color: var(--c-accent);
  transform: translateY(-2px);
}

/* Icon at the top of the child card */
.fos-folder-child-card__icon {
  font-size: calc(var(--type-2xl) * var(--density-type));
  line-height: 1;
}

/* Child name — semibold, primary color */
.fos-folder-child-card__name {
  font-size: calc(var(--type-md) * var(--density-type));
  font-weight: var(--weight-semibold);
  color: var(--c-text);
}

/* Item count / metadata — small, muted */
.fos-folder-child-card__meta {
  font-size: calc(var(--type-xs) * var(--density-type));
  color: var(--c-text-3);
}

/* Quick-launch button at the bottom of each child card */
.fos-folder-child-card__action {
  margin-top: auto;
  align-self: flex-start;
  font-size: calc(var(--type-xs) * var(--density-type));
  font-weight: var(--weight-medium);
  color: var(--c-accent);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease);
}
.fos-folder-child-card__action:hover { opacity: 0.75; }

/* ============================================================================
   10. FORMS, FEEDBACK & OVERLAYS
   ----------------------------------------------------------------------------
   The configuration layer. Canonical rules: DESIGN_LANGUAGE.md §8.
   Everything here composes the earlier primitives — no new raw values except
   the overlay scrim + z-scale tokens defined immediately below.
   ============================================================================ */
:root {
  --scrim: rgba(10, 10, 9, 0.55);   /* modal/drawer backdrop */
  --z-dropdown: 100;
  --z-drawer:   200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ---- 10.1 Field anatomy ---------------------------------------------------
   label ABOVE input, hint below input, error replaces hint. One wrapper class
   per field — never hand-assemble label/input spacing. */
.fos-field {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-1) * var(--density-space));
}
.fos-field__hint {
  font-size: calc(var(--type-xs) * var(--density-type));
  color: var(--c-text-3);
  line-height: var(--leading-normal);
}
.fos-field__error {
  font-size: calc(var(--type-xs) * var(--density-type));
  color: var(--c-danger);
  line-height: var(--leading-normal);
}
.fos-input[aria-invalid="true"],
.fos-select[aria-invalid="true"] {
  border-color: var(--c-danger);
  box-shadow: 0 0 0 3px var(--c-danger-weak);
}

/* ---- 10.2 Form layout ------------------------------------------------------
   Single column by default. Two columns ONLY for short, related fields
   (city/postcode). Never three. */
.fos-form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-5) * var(--density-space));
  max-width: 560px;               /* readable line-length for forms */
}
.fos-form__row {                  /* opt-in 2-col for short related fields */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--space-4) * var(--density-space));
}
.fos-fieldset {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: calc(var(--space-5) * var(--density-space));
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-4) * var(--density-space));
}
.fos-fieldset__legend {
  font-size: calc(var(--type-sm) * var(--density-type));
  font-weight: var(--weight-semibold);
  color: var(--c-text);
  padding: 0 var(--space-2);
}

/* ---- 10.3 Select / checkbox / radio / toggle ------------------------------ */
.fos-select {
  height: var(--density-control);
  padding: 0 calc(var(--space-3) * var(--density-space));
  font-size: calc(var(--type-base) * var(--density-type));
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border-2);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fos-select:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-weak);
}
.fos-check {                       /* shared row layout: checkbox + radio */
  display: flex;
  align-items: center;
  gap: calc(var(--space-2) * var(--density-space));
  min-height: var(--density-control);
  cursor: pointer;
  font-size: calc(var(--type-base) * var(--density-type));
  color: var(--c-text);
}
.fos-check input[type="checkbox"],
.fos-check input[type="radio"] {
  width: 1.15em; height: 1.15em;
  accent-color: var(--c-accent);
}
.fos-toggle {                      /* switch — for instant-effect settings only */
  position: relative;
  width: 2.6em; height: 1.4em;
  border-radius: var(--radius-full);
  background: var(--c-border-2);
  border: none; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.fos-toggle[aria-checked="true"] { background: var(--c-accent); }
.fos-toggle::after {
  content: "";
  position: absolute;
  top: 0.15em; left: 0.15em;
  width: 1.1em; height: 1.1em;
  border-radius: var(--radius-full);
  background: var(--c-surface);
  box-shadow: var(--elev-1);
  transition: transform var(--dur) var(--ease);
}
.fos-toggle[aria-checked="true"]::after { transform: translateX(1.2em); }

/* ---- 10.4 Empty / error states --------------------------------------------
   Any zone that can be empty MUST render one of these — never a blank void. */
.fos-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(var(--space-3) * var(--density-space));
  padding: calc(var(--space-12) * var(--density-space)) var(--space-6);
  color: var(--c-text-3);
}
.fos-empty__icon { font-size: calc(var(--type-3xl) * var(--density-type)); opacity: .5; }
.fos-empty__title {
  font-size: calc(var(--type-md) * var(--density-type));
  font-weight: var(--weight-medium);
  color: var(--c-text-2);
}
.fos-empty__hint { font-size: calc(var(--type-sm) * var(--density-type)); max-width: 36em; }

/* ---- 10.5 Toast ------------------------------------------------------------
   Async outcome feedback (saved / failed). Bottom-right stack, auto-dismiss
   ~4s, role="status" (or role="alert" for danger). Never for field errors. */
.fos-toast-region {
  position: fixed;
  bottom: var(--space-6); right: var(--space-6);
  display: flex; flex-direction: column;
  gap: var(--space-3);
  z-index: var(--z-toast);
}
.fos-toast {
  display: flex; align-items: center;
  gap: calc(var(--space-3) * var(--density-space));
  padding: calc(var(--space-3) * var(--density-space)) calc(var(--space-4) * var(--density-space));
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-3);
  font-size: calc(var(--type-sm) * var(--density-type));
  color: var(--c-text);
}
.fos-toast--success { border-left-color: var(--c-success); }
.fos-toast--warning { border-left-color: var(--c-warning); }
.fos-toast--danger  { border-left-color: var(--c-danger); }

/* ---- 10.6 Modal & drawer ---------------------------------------------------
   Modal: focused decision. Drawer: contextual detail/edit beside a list.
   Focus MUST be trapped while open; Esc closes; focus returns to the trigger. */
.fos-scrim {
  position: fixed; inset: 0;
  background: var(--scrim);
  z-index: var(--z-modal);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.fos-scrim--open { opacity: 1; }
.fos-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(.98);
  width: min(92vw, 560px);
  max-height: 85vh; overflow: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-3);
  padding: calc(var(--space-6) * var(--density-space));
  z-index: var(--z-modal);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fos-modal--open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fos-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(92vw, 420px);
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
  box-shadow: var(--elev-3);
  padding: calc(var(--space-6) * var(--density-space));
  z-index: var(--z-drawer);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
  overflow: auto;
}
.fos-drawer--open { transform: translateX(0); }

/* ---- 10.7 Skeleton loader ---------------------------------------------------
   Token-built placeholder mirroring the three-zone layout. No spinners. */
@keyframes fos-skeleton-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.fos-skeleton {
  background: var(--c-surface-3);
  border-radius: var(--radius-sm);
  animation: fos-skeleton-pulse calc(var(--dur-slow) * 4) var(--ease) infinite;
}
.fos-skeleton--text  { height: 1em; }
.fos-skeleton--card  { height: calc(var(--density-control) * 2.2); }
.fos-skeleton--row   { height: var(--density-control); }

/* ---- 10.8 Table interactions ------------------------------------------------
   Sorting is a real <button> inside <th> with aria-sort on the th.
   Paginate past 50 rows — never infinite-scroll an operational table. */
.fos-table__sort {
  display: inline-flex; align-items: center;
  gap: var(--space-1);
  background: none; border: none; cursor: pointer;
  font: inherit; color: inherit;
  padding: 0;
}
.fos-table th[aria-sort="ascending"] .fos-table__sort::after  { content: "\25B2"; font-size: .7em; }
.fos-table th[aria-sort="descending"] .fos-table__sort::after { content: "\25BC"; font-size: .7em; }
.fos-pagination {
  display: flex; align-items: center; justify-content: flex-end;
  gap: calc(var(--space-2) * var(--density-space));
  padding: calc(var(--space-3) * var(--density-space)) 0;
  font-size: calc(var(--type-sm) * var(--density-type));
  color: var(--c-text-2);
}

/* ---- 10.9 Responsive shell ---------------------------------------------------
   Below 900px the persistent sidebar becomes an overlay drawer and the dock
   hides. Same components, same state — only the container behaviour changes. */
@media (max-width: 900px) {
  .fos-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: var(--z-drawer);
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease);
  }
  .fos-sidebar--open { transform: translateX(0); }
  /* !important: the aether theme forces the wrapper visible with !important */
  .aether-dock, .fos-dock, .aether-dock-wrapper { display: none !important; }
  .fos-form__row { grid-template-columns: 1fr; }  /* forms collapse to 1 col */
}