/**
 * Keystone — Style Framework
 * ============================================================
 * Design tokens + component classes. Single self-contained file.
 *
 *   <link rel="stylesheet" href="keystone.css">
 *
 * Works standalone. Does NOT require keystone-icons.css or keystone.js.
 * All custom properties are namespaced --ks-*; all classes are .ks-*.
 *
 * Sections:
 *   1. Tokens (primitives + semantic)
 *   2. Reset / base
 *   3. Layout helpers
 *   4. Components
 */

/* ============================================================
   1. TOKENS
   ============================================================ */

:root {

  /* ---- Color primitives ---- */

  /* Primary — Steel blue (muted; no navy, no cyan) */
  --ks-blue-50:  #F1F4F8;
  --ks-blue-100: #E3E9F0;
  --ks-blue-200: #C9D4E1;
  --ks-blue-300: #A7B7CC;
  --ks-blue-400: #8198B5;
  --ks-blue-500: #627CA0;
  --ks-blue-600: #466A99;  /* signature steel blue */
  --ks-blue-700: #3D5A82;
  --ks-blue-800: #34496A;
  --ks-blue-900: #2B3A53;
  --ks-blue-950: #20293A;

  /* Secondary ramp — warm grey (replaces cyan; no cyan anywhere) */
  --ks-cyan-50:  #F2F2F3;
  --ks-cyan-100: #E5E6E7;
  --ks-cyan-200: #D2D3D5;
  --ks-cyan-300: #B5B7BA;
  --ks-cyan-400: #909397;
  --ks-cyan-500: #74777B;
  --ks-cyan-600: #595D61;  /* warm grey */
  --ks-cyan-700: #4A4D51;
  --ks-cyan-800: #3C3F42;
  --ks-cyan-900: #303234;

  /* Accent — Teal */
  --ks-teal-50:  #ECFDF5;
  --ks-teal-100: #D1FAE5;
  --ks-teal-200: #A7F3D0;
  --ks-teal-300: #6EE7B7;
  --ks-teal-400: #34D399;
  --ks-teal-500: #10B981;
  --ks-teal-600: #059669;
  --ks-teal-700: #047857;
  --ks-teal-800: #065F46;
  --ks-teal-900: #064E3B;

  /* Neutral — Grey (true neutral, no blue cast) */
  --ks-slate-0:   #FFFFFF;
  --ks-slate-50:  #F6F6F7;
  --ks-slate-100: #ECECEE;
  --ks-slate-200: #DEDEE1;
  --ks-slate-300: #C6C6CB;
  --ks-slate-400: #95959C;
  --ks-slate-500: #6A6A72;
  --ks-slate-600: #515158;
  --ks-slate-700: #3D3D43;
  --ks-slate-800: #27272B;
  --ks-slate-900: #191A1E;
  --ks-slate-950: #0E0F12;

  /* ---- Semantic surface ----
     canvas = the recessed page; default = a raised surface that catches light.
     The tonal gap (canvas vs default) + shadow is what separates them. */
  --ks-canvas:           #E9E9EC;
  --ks-surface-default:  var(--ks-slate-0);
  --ks-surface-subtle:   var(--ks-slate-50);
  --ks-surface-muted:    var(--ks-slate-100);
  --ks-surface-emphasis: var(--ks-slate-200);
  --ks-surface-inverse:  var(--ks-slate-900);
  --ks-surface-overlay:  rgba(14, 15, 18, 0.5);
  /* Flat: no sheen gradient (kept as a token so component rules stay simple) */
  --ks-surface-sheen: none;
  /* Neutral page wash — a faint light pool at the top, no colour cast */
  --ks-canvas-wash: radial-gradient(110% 75% at 50% 0%, rgb(255 255 255 / 0.55), transparent 62%);

  /* ---- Semantic text ---- */
  --ks-text-default:    var(--ks-slate-900);
  --ks-text-muted:      var(--ks-slate-500);
  --ks-text-subtle:     var(--ks-slate-400);
  --ks-text-disabled:   var(--ks-slate-300);
  --ks-text-inverse:    var(--ks-slate-0);
  --ks-text-link:       var(--ks-blue-800);
  --ks-text-link-hover: var(--ks-blue-900);
  --ks-text-on-brand:   var(--ks-slate-0);

  /* ---- Semantic border ---- */
  --ks-border-default:  var(--ks-slate-200);
  --ks-border-muted:    var(--ks-slate-100);
  --ks-border-emphasis: var(--ks-slate-300);
  --ks-border-focus:    var(--ks-blue-700);
  --ks-border-brand:    var(--ks-blue-700);

  /* ---- Brand ---- */
  --ks-brand-primary:        var(--ks-blue-700);
  --ks-brand-primary-hover:  var(--ks-blue-800);
  --ks-brand-primary-active: var(--ks-blue-900);
  --ks-brand-primary-subtle: var(--ks-blue-50);
  --ks-brand-primary-muted:  var(--ks-blue-100);

  /* Secondary = warm grey (pairs with the steel-blue primary) */
  --ks-brand-secondary:        #595D61;
  --ks-brand-secondary-hover:  #4A4D51;
  --ks-brand-secondary-active: #3C3F42;
  --ks-brand-secondary-subtle: #ECECEE;
  --ks-brand-secondary-muted:  #D8D9DB;

  --ks-brand-accent:        var(--ks-teal-600);
  --ks-brand-accent-hover:  var(--ks-teal-700);
  --ks-brand-accent-active: var(--ks-teal-800);
  --ks-brand-accent-subtle: var(--ks-teal-50);
  --ks-brand-accent-muted:  var(--ks-teal-100);

  /* ---- State ---- */
  --ks-success-default: #10B981;
  --ks-success-hover:   #059669;
  --ks-success-surface: #ECFDF5;
  --ks-success-text:    #065F46;
  --ks-success-border:  #6EE7B7;

  --ks-warning-default: #F59E0B;
  --ks-warning-hover:   #D97706;
  --ks-warning-surface: #FFFBEB;
  --ks-warning-text:    #92400E;
  --ks-warning-border:  #FCD34D;

  --ks-error-default: #EF4444;
  --ks-error-hover:   #DC2626;
  --ks-error-surface: #FEF2F2;
  --ks-error-text:    #7F1D1D;
  --ks-error-border:  #FECACA;

  --ks-info-default: #3B82F6;
  --ks-info-hover:   #2563EB;
  --ks-info-surface: #EFF6FF;
  --ks-info-text:    #1E3A8A;
  --ks-info-border:  #BFDBFE;

  /* ---- Typography ---- */
  --ks-font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --ks-font-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Cascadia Mono', 'Cascadia Code', 'Segoe UI Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --ks-text-xs:   0.75rem;
  --ks-text-sm:   0.875rem;
  --ks-text-base: 1rem;
  --ks-text-lg:   1.125rem;
  --ks-text-xl:   1.25rem;
  --ks-text-2xl:  1.5rem;
  --ks-text-3xl:  1.875rem;
  --ks-text-4xl:  2.25rem;
  --ks-text-5xl:  3rem;
  --ks-text-6xl:  3.75rem;
  --ks-text-7xl:  4.5rem;

  --ks-weight-regular:   400;
  --ks-weight-medium:    500;
  --ks-weight-semibold:  600;
  --ks-weight-bold:      700;
  --ks-weight-extrabold: 800;

  --ks-leading-none:    1;
  --ks-leading-tight:   1.25;
  --ks-leading-snug:    1.375;
  --ks-leading-normal:  1.5;
  --ks-leading-relaxed: 1.625;
  --ks-leading-loose:   2;

  --ks-tracking-tighter: -0.05em;
  --ks-tracking-tight:   -0.025em;
  --ks-tracking-normal:  0;
  --ks-tracking-wide:    0.025em;
  --ks-tracking-wider:   0.05em;
  --ks-tracking-widest:  0.1em;

  /* Type roles */
  --ks-type-display-xl-size:     var(--ks-text-7xl);
  --ks-type-display-xl-weight:   var(--ks-weight-extrabold);
  --ks-type-display-xl-leading:  var(--ks-leading-none);
  --ks-type-display-xl-tracking: var(--ks-tracking-tight);

  --ks-type-display-size:     var(--ks-text-5xl);
  --ks-type-display-weight:   var(--ks-weight-bold);
  --ks-type-display-leading:  var(--ks-leading-tight);
  --ks-type-display-tracking: var(--ks-tracking-tight);

  --ks-type-h1-size: var(--ks-text-4xl);  --ks-type-h1-weight: var(--ks-weight-bold);     --ks-type-h1-leading: var(--ks-leading-tight);
  --ks-type-h2-size: var(--ks-text-3xl);  --ks-type-h2-weight: var(--ks-weight-semibold); --ks-type-h2-leading: var(--ks-leading-snug);
  --ks-type-h3-size: var(--ks-text-2xl);  --ks-type-h3-weight: var(--ks-weight-semibold); --ks-type-h3-leading: var(--ks-leading-snug);
  --ks-type-h4-size: var(--ks-text-xl);   --ks-type-h4-weight: var(--ks-weight-semibold); --ks-type-h4-leading: var(--ks-leading-normal);
  --ks-type-h5-size: var(--ks-text-lg);   --ks-type-h5-weight: var(--ks-weight-semibold); --ks-type-h5-leading: var(--ks-leading-normal);
  --ks-type-h6-size: var(--ks-text-base); --ks-type-h6-weight: var(--ks-weight-semibold); --ks-type-h6-leading: var(--ks-leading-normal);

  --ks-type-body-lg-size:  var(--ks-text-lg);   --ks-type-body-lg-leading: var(--ks-leading-relaxed);
  --ks-type-body-size:     var(--ks-text-base); --ks-type-body-leading:    var(--ks-leading-normal);
  --ks-type-body-sm-size:  var(--ks-text-sm);   --ks-type-body-sm-leading: var(--ks-leading-normal);

  --ks-type-label-size:     var(--ks-text-sm);
  --ks-type-label-weight:   var(--ks-weight-medium);
  --ks-type-label-tracking: var(--ks-tracking-wide);

  --ks-type-caption-size:    var(--ks-text-xs);
  --ks-type-caption-leading: var(--ks-leading-normal);

  --ks-type-code-size: var(--ks-text-sm);

  /* ---- Spacing ---- */
  --ks-space-0:    0;
  --ks-space-px:   1px;
  --ks-space-0\.5: 0.125rem;
  --ks-space-1:    0.25rem;
  --ks-space-1\.5: 0.375rem;
  --ks-space-2:    0.5rem;
  --ks-space-2\.5: 0.625rem;
  --ks-space-3:    0.75rem;
  --ks-space-3\.5: 0.875rem;
  --ks-space-4:    1rem;
  --ks-space-5:    1.25rem;
  --ks-space-6:    1.5rem;
  --ks-space-7:    1.75rem;
  --ks-space-8:    2rem;
  --ks-space-10:   2.5rem;
  --ks-space-12:   3rem;
  --ks-space-14:   3.5rem;
  --ks-space-16:   4rem;
  --ks-space-20:   5rem;
  --ks-space-24:   6rem;
  --ks-space-32:   8rem;

  --ks-gap-xs:  var(--ks-space-1);
  --ks-gap-sm:  var(--ks-space-2);
  --ks-gap-md:  var(--ks-space-4);
  --ks-gap-lg:  var(--ks-space-6);
  --ks-gap-xl:  var(--ks-space-8);
  --ks-gap-2xl: var(--ks-space-12);

  --ks-pad-xs:  var(--ks-space-2);
  --ks-pad-sm:  var(--ks-space-3);
  --ks-pad-md:  var(--ks-space-4);
  --ks-pad-lg:  var(--ks-space-6);
  --ks-pad-xl:  var(--ks-space-8);

  /* ---- Radius ---- */
  /* Edgy, low-radius geometry — sharp but never fully square */
  --ks-radius-none: 0;
  --ks-radius-sm:   2px;
  --ks-radius-md:   3px;
  --ks-radius-lg:   4px;
  --ks-radius-xl:   5px;
  --ks-radius-2xl:  6px;
  --ks-radius-3xl:  8px;
  --ks-radius-full: 9999px;

  --ks-radius-button:  var(--ks-radius-md);
  --ks-radius-input:   var(--ks-radius-md);
  --ks-radius-card:    var(--ks-radius-xl);
  --ks-radius-badge:   var(--ks-radius-sm);
  --ks-radius-chip:    var(--ks-radius-md);
  --ks-radius-tooltip: var(--ks-radius-sm);
  --ks-radius-modal:   var(--ks-radius-2xl);

  /* ---- Depth & texture ----
     Surfaces are told apart by light, shade and elevation — not borders.
     Shadows are cool-tinted (slate, not pure black) and layered
     (a tight contact shadow + a soft ambient one) for realistic depth. */
  --ks-shadow-color: 24 24 28;   /* neutral dark, the shade source (no blue) */

  --ks-shadow-none:  none;
  --ks-shadow-xs:    0 1px 1px rgb(var(--ks-shadow-color) / 0.05);
  --ks-shadow-sm:    0 1px 2px rgb(var(--ks-shadow-color) / 0.05),
                     0 2px 6px -1px rgb(var(--ks-shadow-color) / 0.07);
  --ks-shadow-md:    0 1px 2px rgb(var(--ks-shadow-color) / 0.06),
                     0 6px 16px -2px rgb(var(--ks-shadow-color) / 0.10);
  --ks-shadow-lg:    0 2px 4px rgb(var(--ks-shadow-color) / 0.06),
                     0 12px 30px -4px rgb(var(--ks-shadow-color) / 0.14);
  --ks-shadow-xl:    0 4px 8px rgb(var(--ks-shadow-color) / 0.07),
                     0 24px 50px -8px rgb(var(--ks-shadow-color) / 0.20);
  --ks-shadow-2xl:   0 8px 16px rgb(var(--ks-shadow-color) / 0.10),
                     0 40px 80px -12px rgb(var(--ks-shadow-color) / 0.28);
  --ks-shadow-inner: inset 0 2px 4px rgb(var(--ks-shadow-color) / 0.07);
  --ks-shadow-brand: 0 6px 20px -4px rgb(38 119 171 / 0.45);

  /* Flat surfaces — no glossy top highlight (kept as no-op shadows so they
     stay valid inside box-shadow lists). */
  --ks-light-top:   inset 0 0 0 0 transparent;
  --ks-light-faint: inset 0 0 0 0 transparent;
  /* Crisp hairline edge used to define flat surfaces instead of gloss */
  --ks-edge:      inset 0 0 0 1px rgb(var(--ks-shadow-color) / 0.14);
  --ks-edge-soft: inset 0 0 0 1px rgb(var(--ks-shadow-color) / 0.10);
  /* Recessed well — flat inset for inputs/tracks */
  --ks-well: inset 0 0 0 1px rgb(var(--ks-shadow-color) / 0.16);
  /* Focus ring — hard and solid (no soft glow): a crisp brand ring with a gap */
  --ks-glow-focus: 0 0 0 2px var(--ks-surface-default), 0 0 0 4px var(--ks-blue-600);

  /* Film-grain noise — self-contained inline SVG turbulence, no assets.
     Used as an alpha MASK over an ink layer so it reads on any surface:
     dark speckle on light, light speckle on dark (see --ks-grain-ink). */
  --ks-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  --ks-grain-ink: 24 24 28;   /* dark grains on light surfaces (neutral) */
  --ks-grain-opacity: 0.11;

  /* ---- Border width ---- */
  --ks-border-width:   1px;
  --ks-border-width-2: 2px;
  --ks-border-width-4: 4px;

  /* ---- Z-index ---- */
  --ks-z-below:    -1;
  --ks-z-base:      0;
  --ks-z-raised:    1;
  --ks-z-dropdown:  1000;
  --ks-z-sticky:    1020;
  --ks-z-overlay:   1030;
  --ks-z-modal:     1040;
  --ks-z-popover:   1050;
  --ks-z-tooltip:   1060;

  /* ---- Transitions ---- */
  --ks-duration-instant: 50ms;
  --ks-duration-fast:    100ms;
  --ks-duration-normal:  200ms;
  --ks-duration-slow:    350ms;

  --ks-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ks-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ks-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ks-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --ks-transition-colors:    color var(--ks-duration-fast) var(--ks-ease-default),
                             background-color var(--ks-duration-fast) var(--ks-ease-default),
                             border-color var(--ks-duration-fast) var(--ks-ease-default);
  --ks-transition-shadow:    box-shadow var(--ks-duration-normal) var(--ks-ease-default);
  --ks-transition-transform: transform var(--ks-duration-normal) var(--ks-ease-default);
  --ks-transition-all:       all var(--ks-duration-normal) var(--ks-ease-default);

  /* ---- Sizing ---- */
  --ks-icon-xs:   12px;
  --ks-icon-sm:   16px;
  --ks-icon-md:   20px;
  --ks-icon-base: 24px;
  --ks-icon-lg:   32px;
  --ks-icon-xl:   48px;

  --ks-control-height-xs: 24px;
  --ks-control-height-sm: 32px;
  --ks-control-height-md: 40px;
  --ks-control-height-lg: 48px;
  --ks-control-height-xl: 56px;

  --ks-sidebar-width:     260px;
  --ks-topbar-height:     60px;
  --ks-content-max-width: 900px;
  --ks-prose-max-width:   65ch;
}

/* ---- Dark theme: apply [data-theme="dark"] to <html> or <body> ----
   In the dark, raised surfaces get LIGHTER (catching light) while the canvas
   sinks. Highlights and grain soften; shadows deepen. */
[data-theme="dark"] {
  --ks-canvas:           #0B0C0F;
  --ks-surface-default:  #191A1E;
  --ks-surface-subtle:   #16171C;
  --ks-surface-muted:    #212227;
  --ks-surface-emphasis: #2B2C32;
  --ks-surface-inverse:  var(--ks-slate-0);
  --ks-surface-overlay:  rgba(0, 0, 0, 0.6);
  --ks-shadow-color: 0 0 0;
  --ks-light-top:    inset 0 0 0 0 transparent;
  --ks-light-faint:  inset 0 0 0 0 transparent;
  --ks-surface-sheen: none;
  --ks-edge:      inset 0 0 0 1px rgb(255 255 255 / 0.10);
  --ks-edge-soft: inset 0 0 0 1px rgb(255 255 255 / 0.06);
  --ks-well: inset 0 0 0 1px rgb(255 255 255 / 0.10);
  --ks-grain-ink: 255 255 255;  /* light grains on dark surfaces */
  --ks-grain-opacity: 0.08;
  --ks-canvas-wash: radial-gradient(110% 75% at 50% 0%, rgb(255 255 255 / 0.04), transparent 62%);

  --ks-text-default:    var(--ks-slate-50);
  --ks-text-muted:      var(--ks-slate-400);
  --ks-text-subtle:     var(--ks-slate-500);
  --ks-text-disabled:   var(--ks-slate-600);
  --ks-text-inverse:    var(--ks-slate-900);
  --ks-text-link:       var(--ks-blue-400);
  --ks-text-link-hover: var(--ks-blue-300);

  --ks-border-default:  var(--ks-slate-700);
  --ks-border-muted:    var(--ks-slate-800);
  --ks-border-emphasis: var(--ks-slate-600);

  --ks-brand-primary-subtle: rgba(70, 106, 153, 0.22);
  --ks-brand-primary-muted:  rgba(70, 106, 153, 0.32);

  --ks-success-surface: rgba(16, 185, 129, 0.10);
  --ks-success-text:    var(--ks-teal-400);
  --ks-warning-surface: rgba(245, 158, 11, 0.10);
  --ks-warning-text:    #FCD34D;
  --ks-error-surface:   rgba(239, 68, 68, 0.10);
  --ks-error-text:      #F87171;
  --ks-info-surface:    rgba(59, 130, 246, 0.10);
  --ks-info-text:       var(--ks-blue-400);
}

@media (forced-colors: active) {
  :root {
    --ks-brand-primary: ButtonText;
    --ks-border-focus:  Highlight;
  }
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */

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

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

html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body.ks-body {
  margin: 0;
  font-family: var(--ks-font-sans);
  font-size: var(--ks-type-body-size);
  line-height: var(--ks-type-body-leading);
  color: var(--ks-text-default);
  background-color: var(--ks-canvas);
  background-image: var(--ks-canvas-wash);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* App-like feel: chrome text isn't selectable. Form fields, editable regions,
   code, and anything tagged .ks-selectable opt back in. */
body.ks-body { -webkit-user-select: none; -ms-user-select: none; user-select: none; }
body.ks-body input,
body.ks-body textarea,
body.ks-body [contenteditable]:not([contenteditable="false"]),
body.ks-body pre,
body.ks-body code,
body.ks-body .ks-code,
body.ks-body .ks-selectable {
  -webkit-user-select: text; -ms-user-select: text; user-select: text;
}

/* Film grain — a fixed, uniform texture over the whole UI to set tone.
   pointer-events:none so it never blocks; blended softly so it reads as
   tactile noise rather than a gray veil. */
body.ks-body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  background-color: rgb(var(--ks-grain-ink));
  -webkit-mask-image: var(--ks-grain);
  mask-image: var(--ks-grain);
  -webkit-mask-size: 160px 160px;
  mask-size: 160px 160px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  opacity: var(--ks-grain-opacity);
}
.ks-no-grain::after { display: none; }
/* Opt-in stronger grain for a section/surface */
.ks-grain { position: relative; isolation: isolate; }
.ks-grain::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  border-radius: inherit;
  background-color: rgb(var(--ks-grain-ink));
  -webkit-mask-image: var(--ks-grain);
  mask-image: var(--ks-grain);
  -webkit-mask-size: 160px 160px;
  mask-size: 160px 160px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  opacity: calc(var(--ks-grain-opacity) * 1.8);
}
.ks-grain > * { position: relative; z-index: 1; }

.ks-h1, .ks-h2, .ks-h3, .ks-h4, .ks-h5, .ks-h6 {
  margin: 0 0 var(--ks-space-3);
  font-family: var(--ks-font-sans);
  color: var(--ks-text-default);
}
.ks-h1 { font-size: var(--ks-type-h1-size); font-weight: var(--ks-type-h1-weight); line-height: var(--ks-type-h1-leading); }
.ks-h2 { font-size: var(--ks-type-h2-size); font-weight: var(--ks-type-h2-weight); line-height: var(--ks-type-h2-leading); }
.ks-h3 { font-size: var(--ks-type-h3-size); font-weight: var(--ks-type-h3-weight); line-height: var(--ks-type-h3-leading); }
.ks-h4 { font-size: var(--ks-type-h4-size); font-weight: var(--ks-type-h4-weight); line-height: var(--ks-type-h4-leading); }
.ks-h5 { font-size: var(--ks-type-h5-size); font-weight: var(--ks-type-h5-weight); line-height: var(--ks-type-h5-leading); }
.ks-h6 { font-size: var(--ks-type-h6-size); font-weight: var(--ks-type-h6-weight); line-height: var(--ks-type-h6-leading); }

.ks-display    { font-size: var(--ks-type-display-size);    font-weight: var(--ks-type-display-weight);    line-height: var(--ks-type-display-leading);    letter-spacing: var(--ks-type-display-tracking); }
.ks-display-xl { font-size: var(--ks-type-display-xl-size); font-weight: var(--ks-type-display-xl-weight); line-height: var(--ks-type-display-xl-leading); letter-spacing: var(--ks-type-display-xl-tracking); }

.ks-text-muted   { color: var(--ks-text-muted); }
.ks-text-subtle  { color: var(--ks-text-subtle); }
.ks-text-sm      { font-size: var(--ks-type-body-sm-size); line-height: var(--ks-type-body-sm-leading); }
.ks-text-lg      { font-size: var(--ks-type-body-lg-size); line-height: var(--ks-type-body-lg-leading); }
.ks-caption      { font-size: var(--ks-type-caption-size); line-height: var(--ks-type-caption-leading); color: var(--ks-text-muted); }
.ks-label {
  font-size: var(--ks-type-label-size);
  font-weight: var(--ks-type-label-weight);
  letter-spacing: var(--ks-type-label-tracking);
  color: var(--ks-text-default);
}

.ks-link {
  color: var(--ks-text-link);
  text-decoration: none;
  transition: var(--ks-transition-colors);
}
.ks-link:hover { color: var(--ks-text-link-hover); text-decoration: underline; }

.ks-code, .ks-kbd {
  font-family: var(--ks-font-mono);
  font-size: var(--ks-type-code-size);
}
.ks-code {
  padding: 0.1em 0.35em;
  background: var(--ks-surface-muted);
  border-radius: var(--ks-radius-sm);
}

.ks-hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--ks-shadow-color) / 0.14), transparent);
  margin: var(--ks-space-6) 0;
}

/* Shared focus treatment — a soft brand glow (depth), plus a thin ring for
   forced-colors / high-contrast users. */
.ks-focus-ring:focus-visible,
.ks-btn:focus-visible,
.ks-input:focus-visible,
.ks-select:focus-visible,
.ks-textarea:focus-visible,
.ks-tabs-tab:focus-visible,
.ks-switch input:focus-visible + .ks-switch-track {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--ks-glow-focus);
}

.ks-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   3. LAYOUT HELPERS
   ============================================================ */

.ks-container {
  width: 100%;
  max-width: var(--ks-content-max-width);
  margin-inline: auto;
  padding-inline: var(--ks-pad-md);
}
.ks-container-wide  { max-width: 1200px; }
.ks-container-prose { max-width: var(--ks-prose-max-width); }

.ks-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ks-gap-md);
}
.ks-col { flex: 1 1 0; min-width: 0; }

.ks-stack { display: flex; flex-direction: column; gap: var(--ks-gap-md); }
.ks-stack-sm { gap: var(--ks-gap-sm); }
.ks-stack-lg { gap: var(--ks-gap-lg); }

.ks-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ks-gap-sm);
}

.ks-grid {
  display: grid;
  gap: var(--ks-gap-md);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* Fixed-track variants: cards stretch to fill the row instead of leaving
   empty trailing tracks (auto-fit/fill bunch a short card count to one side). */
.ks-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ks-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .ks-grid--3, .ks-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ks-grid--2, .ks-grid--3, .ks-grid--4 { grid-template-columns: 1fr; }
}

.ks-center { display: flex; align-items: center; justify-content: center; }
.ks-between { display: flex; align-items: center; justify-content: space-between; }
.ks-spacer { flex: 1 1 auto; }

/* ============================================================
   4. COMPONENTS
   ============================================================ */

/* ---- Buttons ----
   Raised keys: a sheen of light over the surface, a soft drop shadow, and a
   top-edge highlight. They lift on hover and press in on click. */
.ks-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ks-gap-sm);
  height: var(--ks-control-height-md);
  padding: 0 var(--ks-space-4);
  font-family: inherit;
  font-size: var(--ks-text-sm);
  font-weight: var(--ks-weight-medium);
  line-height: 1;
  color: var(--ks-text-default);
  background-color: var(--ks-surface-default);
  border: 0;
  border-radius: var(--ks-radius-button);
  box-shadow: var(--ks-edge);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--ks-duration-fast) var(--ks-ease-default),
              background-image var(--ks-duration-fast) var(--ks-ease-default),
              filter var(--ks-duration-fast) var(--ks-ease-default),
              color var(--ks-duration-fast) var(--ks-ease-default);
}
/* Hover/active change tone only — never size, shape, position or elevation. */
.ks-btn:hover { background-color: var(--ks-surface-subtle); }
.ks-btn:active { background-color: var(--ks-surface-muted); }
.ks-btn:disabled, .ks-btn.is-disabled { opacity: 0.5; cursor: not-allowed; }
.ks-btn svg, .ks-btn .ks-i { width: 1.1em; height: 1.1em; display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 1; }

/* Solid, flat color fills — no gradients, no glow. Hover shifts tone. */
.ks-btn--primary   { color: #fff; background-color: var(--ks-blue-700); box-shadow: none; }
.ks-btn--primary:hover  { background-color: var(--ks-blue-800); filter: none; }
.ks-btn--primary:active { background-color: var(--ks-blue-900); filter: none; }

.ks-btn--secondary { color: #fff; background-color: var(--ks-brand-secondary); box-shadow: none; }
.ks-btn--secondary:hover  { background-color: var(--ks-brand-secondary-hover); filter: none; }
.ks-btn--secondary:active { background-color: var(--ks-brand-secondary-active); filter: none; }

.ks-btn--accent    { color: #fff; background-color: var(--ks-teal-600); box-shadow: none; }
.ks-btn--accent:hover  { background-color: var(--ks-teal-700); filter: none; }
.ks-btn--accent:active { background-color: var(--ks-teal-800); filter: none; }

.ks-btn--danger    { color: #fff; background-color: var(--ks-error-default); box-shadow: none; }
.ks-btn--danger:hover  { background-color: var(--ks-error-hover); filter: none; }
.ks-btn--danger:active { background-color: #B91C1C; filter: none; }

.ks-btn--ghost { background-color: transparent; background-image: none; box-shadow: none; }
.ks-btn--ghost:hover { background-color: rgb(var(--ks-shadow-color) / 0.06); }
.ks-btn--ghost:active { background-color: rgb(var(--ks-shadow-color) / 0.10); }

.ks-btn--sm { height: var(--ks-control-height-sm); padding: 0 var(--ks-space-3); font-size: var(--ks-text-xs); }
.ks-btn--lg { height: var(--ks-control-height-lg); padding: 0 var(--ks-space-6); font-size: var(--ks-text-base); }
.ks-btn--icon { width: var(--ks-control-height-md); padding: 0; }
.ks-btn--icon.ks-btn--sm { width: var(--ks-control-height-sm); }
.ks-btn--block { display: flex; width: 100%; }

.ks-btn-group { display: inline-flex; border-radius: var(--ks-radius-button); box-shadow: var(--ks-edge); }
.ks-btn-group .ks-btn { border-radius: 0; box-shadow: none; }
.ks-btn-group .ks-btn:hover { transform: none; }
.ks-btn-group .ks-btn:not(:last-child) { box-shadow: inset -1px 0 0 rgb(var(--ks-shadow-color) / 0.10); }
.ks-btn-group .ks-btn:first-child { border-radius: var(--ks-radius-button) 0 0 var(--ks-radius-button); }
.ks-btn-group .ks-btn:last-child  { border-radius: 0 var(--ks-radius-button) var(--ks-radius-button) 0; }

/* ---- Forms ----
   Inputs read as carved-in wells: a tonal recess with an inner shadow,
   no outline. Focus pools brand light into the well. */
.ks-field { display: flex; flex-direction: column; gap: var(--ks-space-1\.5); margin-bottom: var(--ks-space-4); }
.ks-field > .ks-label { margin-bottom: var(--ks-space-0\.5); }

.ks-input, .ks-select, .ks-textarea {
  width: 100%;
  height: var(--ks-control-height-md);
  padding: 0 var(--ks-space-3);
  font-family: inherit;
  font-size: var(--ks-text-sm);
  color: var(--ks-text-default);
  background: var(--ks-surface-subtle);
  border: 0;
  border-radius: var(--ks-radius-input);
  box-shadow: var(--ks-well);
  transition: box-shadow var(--ks-duration-normal) var(--ks-ease-default), background-color var(--ks-duration-fast) var(--ks-ease-default);
}
.ks-textarea { height: auto; min-height: calc(var(--ks-control-height-md) * 2); padding: var(--ks-space-2) var(--ks-space-3); resize: vertical; }
.ks-input::placeholder, .ks-textarea::placeholder { color: var(--ks-text-subtle); }
.ks-input:focus, .ks-select:focus, .ks-textarea:focus {
  outline: 0;
  background: var(--ks-surface-default);
  box-shadow: var(--ks-well), var(--ks-glow-focus);
}
.ks-input:disabled, .ks-select:disabled, .ks-textarea:disabled { color: var(--ks-text-disabled); cursor: not-allowed; box-shadow: var(--ks-well); opacity: 0.7; }

.ks-field.is-invalid .ks-input,
.ks-field.is-invalid .ks-select,
.ks-field.is-invalid .ks-textarea { box-shadow: var(--ks-well), 0 0 0 2px var(--ks-surface-default), 0 0 0 4px var(--ks-error-default); }

/* Native select — flat, with our own caret */
.ks-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: var(--ks-space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6A72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ks-space-3) center;
  background-size: 16px 16px;
}
.ks-field-error { font-size: var(--ks-text-xs); color: var(--ks-error-text); }

.ks-checkbox, .ks-radio { display: inline-flex; align-items: center; gap: var(--ks-space-2\.5); cursor: pointer; font-size: var(--ks-text-sm); }
.ks-checkbox input, .ks-radio input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  flex: none; position: relative; margin: 0; cursor: pointer;
  width: 1.2rem; height: 1.2rem;
  background: var(--ks-surface-subtle);
  box-shadow: var(--ks-well);
  transition: background-color var(--ks-duration-fast) var(--ks-ease-default), box-shadow var(--ks-duration-fast) var(--ks-ease-default);
}
.ks-checkbox input { border-radius: var(--ks-radius-sm); }
.ks-radio input { border-radius: var(--ks-radius-full); }
/* Checkbox — fills solid steel with a crisp white check. */
.ks-checkbox input:checked {
  background-color: var(--ks-blue-700);
  box-shadow: none;
}
.ks-checkbox input:checked::after {
  content: ""; position: absolute; left: 50%; top: 46%;
  width: 0.32rem; height: 0.6rem;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
/* Radio — a steel "donut": ring + steel core on the recessed surface, so it
   reads distinctly from the solid-filled checkbox. */
.ks-radio input:checked {
  background: var(--ks-surface-default);
  box-shadow: inset 0 0 0 2px var(--ks-blue-700);
}
.ks-radio input:checked::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0.55rem; height: 0.55rem; border-radius: var(--ks-radius-full);
  background: var(--ks-blue-700);
}
.ks-checkbox input:focus-visible, .ks-radio input:focus-visible { outline: 0; box-shadow: var(--ks-well), var(--ks-glow-focus); }
.ks-checkbox input:disabled, .ks-radio input:disabled { opacity: 0.5; cursor: not-allowed; }
.ks-radio-group { display: flex; flex-direction: column; gap: var(--ks-space-2\.5); }
.ks-radio-group--row { flex-direction: row; flex-wrap: wrap; gap: var(--ks-space-4); }

/* Segmented option buttons — one edgy control split into choices. Wrap radios
   in labels for accessible single-select; the chosen segment becomes a raised
   steel key seated in the recessed track. */
.ks-segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--ks-surface-subtle); box-shadow: var(--ks-well);
  border-radius: var(--ks-radius-md);
}
.ks-segmented > label, .ks-segmented > button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--ks-space-1\.5);
  padding: var(--ks-space-1\.5) var(--ks-space-3);
  font-size: var(--ks-text-sm); font-weight: var(--ks-weight-medium);
  color: var(--ks-text-muted); cursor: pointer; white-space: nowrap;
  border: 0; background: transparent; border-radius: var(--ks-radius-sm);
  transition: color var(--ks-duration-fast) var(--ks-ease-default),
              background-color var(--ks-duration-fast) var(--ks-ease-default),
              box-shadow var(--ks-duration-fast) var(--ks-ease-default);
}
.ks-segmented > label input { position: absolute; opacity: 0; pointer-events: none; }
.ks-segmented > label:hover, .ks-segmented > button:hover { color: var(--ks-text-default); }
.ks-segmented > label:has(input:checked),
.ks-segmented > button.is-active {
  background: var(--ks-blue-700); color: #fff; box-shadow: var(--ks-shadow-sm);
}
.ks-segmented > label:has(input:focus-visible) { box-shadow: var(--ks-glow-focus); }

/* Switch — a squared, low-radius toggle (not a generic pill). The thumb is a
   recessed key that shifts tone off→on; the track flips to solid steel. */
.ks-switch { position: relative; display: inline-flex; align-items: center; gap: var(--ks-space-2); cursor: pointer; }
.ks-switch input { position: absolute; opacity: 0; }
.ks-switch-track {
  width: 44px; height: 22px; border-radius: var(--ks-radius-sm);
  background: var(--ks-surface-subtle); box-shadow: var(--ks-well);
  transition: var(--ks-transition-colors); position: relative; flex: none;
}
.ks-switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 2px;
  background: var(--ks-text-muted);
  box-shadow: var(--ks-shadow-sm);
  transition: transform var(--ks-duration-normal) var(--ks-ease-spring),
              background-color var(--ks-duration-fast) var(--ks-ease-default);
}
.ks-switch input:checked + .ks-switch-track {
  background-color: var(--ks-blue-700); box-shadow: none;
}
.ks-switch input:checked + .ks-switch-track::after { transform: translateX(22px); background: #fff; }

/* ---- Card ---- */
.ks-card {
  background-color: var(--ks-surface-default);
  border-radius: var(--ks-radius-card);
  box-shadow: var(--ks-shadow-sm), var(--ks-edge-soft);
  overflow: hidden;
}
.ks-card-header { padding: var(--ks-pad-md); font-weight: var(--ks-weight-semibold); box-shadow: inset 0 -1px 0 rgb(var(--ks-shadow-color) / 0.06); }
.ks-card-body { padding: var(--ks-pad-md); }
.ks-card-footer { padding: var(--ks-pad-md); background: rgb(var(--ks-shadow-color) / 0.02); box-shadow: inset 0 1px 0 rgb(var(--ks-shadow-color) / 0.05); }
.ks-card--interactive { transition: box-shadow var(--ks-duration-normal) var(--ks-ease-default), background-color var(--ks-duration-fast) var(--ks-ease-default); cursor: pointer; }
.ks-card--interactive:hover { box-shadow: var(--ks-shadow-lg), var(--ks-light-top); }

/* ---- Badge & chip ---- */
.ks-badge {
  display: inline-flex; align-items: center; gap: var(--ks-space-1);
  padding: 0.2em 0.65em; font-size: var(--ks-text-xs); font-weight: var(--ks-weight-semibold);
  line-height: 1.4; border-radius: var(--ks-radius-badge);
  background: var(--ks-surface-muted); color: var(--ks-text-default);
}
.ks-badge--primary { background: var(--ks-brand-primary-subtle); color: var(--ks-brand-primary); }
.ks-badge--success { background: var(--ks-success-surface); color: var(--ks-success-text); }
.ks-badge--warning { background: var(--ks-warning-surface); color: var(--ks-warning-text); }
.ks-badge--error   { background: var(--ks-error-surface); color: var(--ks-error-text); }
.ks-badge--info    { background: var(--ks-info-surface); color: var(--ks-info-text); }

.ks-chip {
  display: inline-flex; align-items: center; gap: var(--ks-space-1\.5);
  height: var(--ks-control-height-sm); padding: 0 var(--ks-space-2\.5);
  font-size: var(--ks-text-sm); font-weight: var(--ks-weight-medium); line-height: 1;
  border-radius: var(--ks-radius-chip);
  background-color: var(--ks-surface-emphasis);
  color: var(--ks-text-default); box-shadow: var(--ks-edge);
}
.ks-chip .ks-i { font-size: 0.95em; color: var(--ks-text-muted); }
/* Interactive chips (a/button or marked clickable) shift tone on hover. */
a.ks-chip, button.ks-chip, .ks-chip--clickable {
  cursor: pointer; text-decoration: none;
  transition: background-color var(--ks-duration-fast) var(--ks-ease-default);
}
a.ks-chip:hover, button.ks-chip:hover, .ks-chip--clickable:hover { background-color: var(--ks-surface-muted); }
.ks-chip--primary { background-color: var(--ks-brand-primary-subtle); color: var(--ks-blue-800); box-shadow: inset 0 0 0 1px rgb(var(--ks-blue-600-rgb, 70 106 153) / 0.25); }
.ks-chip--primary .ks-i { color: var(--ks-blue-700); }
.ks-chip.is-selected { background-color: var(--ks-blue-700); color: #fff; box-shadow: none; }
.ks-chip.is-selected .ks-i { color: rgb(255 255 255 / 0.85); }
/* Removable chip: trailing × */
.ks-chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: calc(var(--ks-space-1) * -1); margin-left: var(--ks-space-0\.5);
  width: 1.05rem; height: 1.05rem; border: 0; padding: 0;
  border-radius: var(--ks-radius-sm); background: transparent; color: inherit;
  cursor: pointer; opacity: 0.6;
  transition: opacity var(--ks-duration-fast) var(--ks-ease-default), background-color var(--ks-duration-fast) var(--ks-ease-default);
}
.ks-chip-remove:hover { opacity: 1; background: rgb(var(--ks-shadow-color) / 0.12); }

/* ---- Alert ----
   Tinted surface with a soft colored glow pooling from the leading edge —
   light and shade rather than a hard accent bar. */
.ks-alert {
  display: flex; align-items: flex-start; gap: var(--ks-space-3);
  padding: var(--ks-pad-sm) var(--ks-pad-md);
  border-radius: var(--ks-radius-lg);
  background: var(--ks-surface-subtle);
  box-shadow: var(--ks-shadow-sm), var(--ks-light-top);
}
.ks-alert-body { flex: 1; }
.ks-alert-title { font-weight: var(--ks-weight-semibold); margin-bottom: var(--ks-space-0\.5); }
.ks-alert--success { background: var(--ks-success-surface); color: var(--ks-success-text); box-shadow: var(--ks-shadow-sm), inset 3px 0 0 var(--ks-success-default); }
.ks-alert--warning { background: var(--ks-warning-surface); color: var(--ks-warning-text); box-shadow: var(--ks-shadow-sm), inset 3px 0 0 var(--ks-warning-default); }
.ks-alert--error   { background: var(--ks-error-surface); color: var(--ks-error-text); box-shadow: var(--ks-shadow-sm), inset 3px 0 0 var(--ks-error-default); }
.ks-alert--info    { background: var(--ks-info-surface); color: var(--ks-info-text); box-shadow: var(--ks-shadow-sm), inset 3px 0 0 var(--ks-info-default); }
[data-ks-alert-dismiss] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; padding: 0; margin-left: auto;
  background: transparent; border: 0; border-radius: var(--ks-radius-sm);
  color: inherit; cursor: pointer; opacity: 0.7;
}
[data-ks-alert-dismiss]:hover { opacity: 1; background: rgb(var(--ks-shadow-color) / 0.08); }

/* ---- Table ----
   Rows are separated by alternating tone, not rules. The header floats
   above the body on a faint crease of shade. */
.ks-table { width: 100%; border-collapse: collapse; font-size: var(--ks-text-sm); }
.ks-table th, .ks-table td { padding: var(--ks-space-3) var(--ks-space-3\.5); text-align: left; vertical-align: middle; }
.ks-table th { font-weight: var(--ks-weight-semibold); color: var(--ks-text-muted); background: var(--ks-surface-subtle); box-shadow: inset 0 -1px 0 rgb(var(--ks-shadow-color) / 0.06); }
.ks-table th:first-child { border-top-left-radius: var(--ks-radius-md); }
.ks-table th:last-child  { border-top-right-radius: var(--ks-radius-md); }
.ks-table tbody tr:nth-child(even) { background: rgb(var(--ks-shadow-color) / 0.025); }
.ks-table tfoot td { font-weight: var(--ks-weight-semibold); background: var(--ks-surface-subtle); box-shadow: inset 0 1px 0 rgb(var(--ks-shadow-color) / 0.06); }

/* Numeric columns: right-align and line up digits. */
.ks-table th.ks-num, .ks-table td.ks-num,
.ks-table th[data-align="end"], .ks-table td[data-align="end"] { text-align: right; font-variant-numeric: tabular-nums; }
.ks-table th.ks-center, .ks-table td.ks-center { text-align: center; }

/* Variants */
.ks-table--striped tbody tr:nth-child(even) { background: rgb(var(--ks-shadow-color) / 0.04); }
.ks-table--hover tbody tr:hover { background: var(--ks-brand-primary-subtle); }
.ks-table--hover tbody tr { transition: background var(--ks-duration-fast) var(--ks-ease-default); }

/* Bordered: hairline grid via inset shadows (no literal borders). */
.ks-table--bordered { box-shadow: var(--ks-edge); border-radius: var(--ks-radius-md); overflow: hidden; }
.ks-table--bordered th, .ks-table--bordered td { box-shadow: inset 0 -1px 0 rgb(var(--ks-shadow-color) / 0.08), inset -1px 0 0 rgb(var(--ks-shadow-color) / 0.06); }
.ks-table--bordered th:last-child, .ks-table--bordered td:last-child { box-shadow: inset 0 -1px 0 rgb(var(--ks-shadow-color) / 0.08); }

/* Compact / comfortable density */
.ks-table--compact th, .ks-table--compact td { padding: var(--ks-space-1\.5) var(--ks-space-2\.5); }
.ks-table--comfortable th, .ks-table--comfortable td { padding: var(--ks-space-4) var(--ks-space-4); }

/* Sticky header — pair with a max-height scroll wrapper (.ks-table-wrap). */
.ks-table--sticky thead th { position: sticky; top: 0; z-index: 1; }

/* Selected / active row */
.ks-table tbody tr.is-selected { background: var(--ks-brand-primary-subtle); box-shadow: inset 2px 0 0 var(--ks-brand-primary); }

/* ---- Navbar ---- */
.ks-navbar {
  display: flex; align-items: center; gap: var(--ks-gap-md);
  height: var(--ks-topbar-height); padding: 0 var(--ks-pad-md);
  background: var(--ks-surface-default);
  box-shadow: var(--ks-shadow-sm), var(--ks-light-top);
}
.ks-navbar-brand { font-weight: var(--ks-weight-bold); font-size: var(--ks-text-lg); }
.ks-navbar-nav { display: flex; gap: var(--ks-space-2); align-items: center; }
.ks-navbar-link { padding: var(--ks-space-2) var(--ks-space-3); border-radius: var(--ks-radius-md); color: var(--ks-text-muted); text-decoration: none; transition: var(--ks-transition-colors), box-shadow var(--ks-duration-fast) var(--ks-ease-default); }
.ks-navbar-link:hover { color: var(--ks-text-default); background: rgb(var(--ks-shadow-color) / 0.05); }
.ks-navbar-link.is-active { color: var(--ks-text-default); background-color: var(--ks-surface-default); background-image: var(--ks-surface-sheen); box-shadow: var(--ks-shadow-xs), var(--ks-light-top); }

/* ---- Tabs ---- (a recessed track; the active tab rises out of it) */
.ks-tabs-list {
  display: inline-flex; gap: var(--ks-space-1);
  padding: var(--ks-space-1); border-radius: var(--ks-radius-lg);
  background: var(--ks-surface-subtle); box-shadow: var(--ks-well);
}
.ks-tabs-tab {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  padding: var(--ks-space-2) var(--ks-space-4); font: inherit; font-size: var(--ks-text-sm);
  color: var(--ks-text-muted); border-radius: var(--ks-radius-md);
  transition: var(--ks-transition-colors), box-shadow var(--ks-duration-fast) var(--ks-ease-default), transform var(--ks-duration-fast) var(--ks-ease-spring);
}
.ks-tabs-tab:hover { color: var(--ks-text-default); }
.ks-tabs-tab.is-active {
  color: var(--ks-text-default); font-weight: var(--ks-weight-medium);
  background-color: var(--ks-surface-default);
  box-shadow: var(--ks-edge);
}
.ks-tabs-panel { padding: var(--ks-pad-md) 0; }

/* ---- Breadcrumb ---- */
.ks-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ks-space-2); font-size: var(--ks-text-sm); list-style: none; padding: 0; margin: 0; }
.ks-breadcrumb li { display: flex; align-items: center; gap: var(--ks-space-2); color: var(--ks-text-muted); }
.ks-breadcrumb li:not(:last-child)::after { content: "/"; color: var(--ks-text-subtle); }
.ks-breadcrumb a { color: var(--ks-text-link); text-decoration: none; }

/* ---- Pagination ---- */
.ks-pagination { display: inline-flex; gap: var(--ks-space-1\.5); list-style: none; padding: 0; margin: 0; }
.ks-pagination a, .ks-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--ks-control-height-sm); height: var(--ks-control-height-sm); padding: 0 var(--ks-space-2);
  border-radius: var(--ks-radius-md);
  background-color: var(--ks-surface-default);
  box-shadow: var(--ks-edge);
  color: var(--ks-text-default); text-decoration: none; font-size: var(--ks-text-sm);
  transition: background-color var(--ks-duration-fast) var(--ks-ease-default), color var(--ks-duration-fast) var(--ks-ease-default);
}
.ks-pagination a:hover { background-color: var(--ks-surface-subtle); }
.ks-pagination .is-active span, .ks-pagination a.is-active {
  color: #fff; background-color: var(--ks-blue-700);
  box-shadow: none;
}

/* ---- Overlays: modal + drawer ---- */
[data-ks-modal] {
  position: fixed; inset: 0; z-index: var(--ks-z-modal);
  display: none; align-items: center; justify-content: center;
  padding: var(--ks-space-4);
  background: var(--ks-surface-overlay);
  backdrop-filter: blur(4px) saturate(1.1);
}
[data-ks-modal].is-open { display: flex; }
.ks-modal-dialog {
  width: 100%; max-width: 480px; max-height: 90vh; overflow: auto;
  background-color: var(--ks-surface-default); background-image: var(--ks-surface-sheen);
  color: var(--ks-text-default);
  border-radius: var(--ks-radius-modal); box-shadow: var(--ks-shadow-2xl), var(--ks-light-top);
}
.ks-modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ks-space-3); padding: var(--ks-pad-md); box-shadow: inset 0 -1px 0 rgb(var(--ks-shadow-color) / 0.06); }
.ks-modal-title { font-size: var(--ks-type-h4-size); font-weight: var(--ks-weight-semibold); margin: 0; }
.ks-modal-body { padding: var(--ks-pad-md); }
.ks-modal-footer { display: flex; justify-content: flex-end; gap: var(--ks-space-2); padding: var(--ks-pad-md); background: rgb(var(--ks-shadow-color) / 0.02); box-shadow: inset 0 1px 0 rgb(var(--ks-shadow-color) / 0.05); }
.ks-modal-close, .ks-drawer-close, .ks-toast-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; flex: none;
  background: transparent; border: 0; border-radius: var(--ks-radius-md);
  color: var(--ks-text-muted); cursor: pointer; transition: var(--ks-transition-colors);
}
.ks-modal-close:hover, .ks-drawer-close:hover, .ks-toast-close:hover { background: rgb(var(--ks-shadow-color) / 0.08); color: var(--ks-text-default); }

[data-ks-drawer] {
  position: fixed; inset: 0; z-index: var(--ks-z-modal);
  display: none; background: var(--ks-surface-overlay); backdrop-filter: blur(4px) saturate(1.1);
}
[data-ks-drawer].is-open { display: block; }
.ks-drawer-panel {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: min(360px, 90vw); padding: var(--ks-pad-md);
  background-color: var(--ks-surface-default); background-image: var(--ks-surface-sheen);
  box-shadow: var(--ks-shadow-2xl); overflow: auto;
}
[data-ks-drawer][data-ks-drawer-side="left"] .ks-drawer-panel { right: auto; left: 0; }

/* ---- Dropdown ---- */
[data-ks-dropdown] { position: relative; display: inline-block; }
.ks-dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--ks-z-dropdown);
  display: none; min-width: 184px; padding: var(--ks-space-1\.5);
  background-color: var(--ks-surface-default); background-image: var(--ks-surface-sheen);
  border-radius: var(--ks-radius-lg); box-shadow: var(--ks-shadow-lg), var(--ks-light-top);
}
[data-ks-dropdown].is-open .ks-dropdown-menu { display: block; animation: ks-pop var(--ks-duration-fast) var(--ks-ease-spring); }
.ks-dropdown-item {
  display: flex; align-items: center; gap: var(--ks-space-2);
  width: 100%; padding: var(--ks-space-2) var(--ks-space-3);
  font-size: var(--ks-text-sm); color: var(--ks-text-default); text-align: left;
  background: transparent; border: 0; border-radius: var(--ks-radius-md); cursor: pointer; text-decoration: none;
}
.ks-dropdown-item:hover { background: var(--ks-brand-primary-subtle); color: var(--ks-brand-primary); }
.ks-dropdown-divider { height: 1px; margin: var(--ks-space-1\.5) 0; background: rgb(var(--ks-shadow-color) / 0.08); }

@keyframes ks-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---- Popover ---- */
.ks-popover {
  position: absolute; z-index: var(--ks-z-popover);
  min-width: 200px; padding: var(--ks-pad-sm);
  background-color: var(--ks-surface-default); background-image: var(--ks-surface-sheen);
  border-radius: var(--ks-radius-lg); box-shadow: var(--ks-shadow-lg), var(--ks-light-top);
}
.ks-popover.is-open { animation: ks-pop var(--ks-duration-fast) var(--ks-ease-spring); }

/* ---- Tooltip ---- */
.ks-tooltip {
  z-index: var(--ks-z-tooltip);
  max-width: 240px; padding: var(--ks-space-1\.5) var(--ks-space-2\.5);
  font-size: var(--ks-text-xs); line-height: var(--ks-leading-snug);
  color: var(--ks-slate-0); background: var(--ks-slate-900);
  border-radius: var(--ks-radius-tooltip); box-shadow: var(--ks-shadow-lg);
  opacity: 0; transform: translateY(2px);
  transition: opacity var(--ks-duration-fast) var(--ks-ease-default), transform var(--ks-duration-fast) var(--ks-ease-default); pointer-events: none;
}
/* Dark theme: a tooltip should stay a dark, elevated chip — not flip to white. */
[data-theme="dark"] .ks-tooltip { background: var(--ks-surface-emphasis); color: var(--ks-text-default); box-shadow: var(--ks-shadow-lg), var(--ks-edge); }
.ks-tooltip.is-visible { opacity: 1; transform: none; }

/* ---- Context menu ---- (custom right-click menu, built by the JS) */
.ks-context-menu {
  position: fixed; z-index: var(--ks-z-popover);
  min-width: 168px; padding: var(--ks-space-1);
  background-color: var(--ks-surface-default); background-image: var(--ks-surface-sheen);
  border-radius: var(--ks-radius-md); box-shadow: var(--ks-shadow-lg), var(--ks-edge);
  animation: ks-pop var(--ks-duration-fast) var(--ks-ease-spring);
  user-select: none;
}
.ks-context-menu-item {
  display: flex; align-items: center; gap: var(--ks-space-2\.5);
  width: 100%; padding: var(--ks-space-2) var(--ks-space-2\.5);
  font-size: var(--ks-text-sm); color: var(--ks-text-default); text-align: left;
  background: transparent; border: 0; border-radius: var(--ks-radius-sm); cursor: pointer;
}
.ks-context-menu-item .ks-i { color: var(--ks-text-muted); font-size: 1em; }
.ks-context-menu-item:hover, .ks-context-menu-item:focus-visible {
  background: var(--ks-brand-primary-subtle); color: var(--ks-brand-primary); outline: 0;
}
.ks-context-menu-item:hover .ks-i, .ks-context-menu-item:focus-visible .ks-i { color: var(--ks-brand-primary); }
.ks-context-menu-divider { height: 1px; margin: var(--ks-space-1) 0; background: rgb(var(--ks-shadow-color) / 0.08); }

/* ---- Accordion ---- (items parted by a soft crease of shade) */
.ks-accordion-item { box-shadow: inset 0 -1px 0 rgb(var(--ks-shadow-color) / 0.06); }
.ks-accordion-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ks-space-3);
  width: 100%; padding: var(--ks-space-3\.5) var(--ks-space-2);
  font: inherit; font-weight: var(--ks-weight-medium); text-align: left;
  background: transparent; border: 0; cursor: pointer; color: var(--ks-text-default);
  border-radius: var(--ks-radius-md);
  transition: background-color var(--ks-duration-fast) var(--ks-ease-default);
}
.ks-accordion-trigger:hover { background: rgb(var(--ks-shadow-color) / 0.03); }
.ks-accordion-caret { transition: transform var(--ks-duration-normal) var(--ks-ease-spring); flex: none; }
.ks-accordion-item.is-open .ks-accordion-caret { transform: rotate(180deg); }
.ks-accordion-content { padding: 0 var(--ks-space-2) var(--ks-space-3\.5); color: var(--ks-text-muted); }

/* ---- Toast ---- (floats up on a deep soft shadow; colored glow per variant) */
.ks-toast-region {
  position: fixed; bottom: var(--ks-space-4); right: var(--ks-space-4); z-index: var(--ks-z-tooltip);
  display: flex; flex-direction: column; gap: var(--ks-space-2\.5); width: min(360px, calc(100vw - 2rem));
}
.ks-toast {
  display: flex; align-items: flex-start; gap: var(--ks-space-2\.5);
  padding: var(--ks-pad-sm) var(--ks-pad-md);
  background-color: var(--ks-surface-default); background-image: var(--ks-surface-sheen);
  color: var(--ks-text-default);
  border-radius: var(--ks-radius-lg);
  box-shadow: var(--ks-shadow-xl), var(--ks-light-top);
  opacity: 0; transform: translateY(10px) scale(0.98);
  transition: opacity var(--ks-duration-normal) var(--ks-ease-default), transform var(--ks-duration-normal) var(--ks-ease-spring);
}
.ks-toast.is-visible { opacity: 1; transform: none; }
.ks-toast.is-leaving { opacity: 0; transform: translateY(10px); }
.ks-toast-icon { flex: none; margin-top: 0.1em; }
.ks-toast-body { flex: 1; min-width: 0; }
.ks-toast-title { font-weight: var(--ks-weight-semibold); font-size: var(--ks-text-sm); }
.ks-toast-message { font-size: var(--ks-text-sm); color: var(--ks-text-muted); }
.ks-toast--success { box-shadow: var(--ks-shadow-xl), var(--ks-light-top), inset 14px 0 18px -14px var(--ks-success-default); }
.ks-toast--success .ks-toast-icon { color: var(--ks-success-default); }
.ks-toast--warning { box-shadow: var(--ks-shadow-xl), var(--ks-light-top), inset 14px 0 18px -14px var(--ks-warning-default); }
.ks-toast--warning .ks-toast-icon { color: var(--ks-warning-default); }
.ks-toast--error { box-shadow: var(--ks-shadow-xl), var(--ks-light-top), inset 14px 0 18px -14px var(--ks-error-default); }
.ks-toast--error .ks-toast-icon { color: var(--ks-error-default); }
.ks-toast--info { box-shadow: var(--ks-shadow-xl), var(--ks-light-top), inset 14px 0 18px -14px var(--ks-info-default); }
.ks-toast--info .ks-toast-icon { color: var(--ks-info-default); }

/* ---- Progress & spinner ---- */
.ks-progress { width: 100%; height: 10px; background: var(--ks-surface-emphasis); border-radius: var(--ks-radius-sm); box-shadow: var(--ks-well); overflow: hidden; }
.ks-progress-bar { height: 100%; background-color: var(--ks-blue-700); border-radius: inherit; transition: width var(--ks-duration-normal) var(--ks-ease-default); }
.ks-spinner {
  display: inline-block; width: 1.25em; height: 1.25em;
  border: 2px solid rgb(var(--ks-shadow-color) / 0.12); border-top-color: var(--ks-brand-primary);
  border-radius: var(--ks-radius-full); animation: ks-spin 0.7s linear infinite; vertical-align: middle;
}
@keyframes ks-spin { to { transform: rotate(360deg); } }

/* ---- Avatar ---- */
.ks-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ks-icon-xl); height: var(--ks-icon-xl); flex: none;
  border-radius: var(--ks-radius-full); overflow: hidden;
  background-color: var(--ks-surface-emphasis);
  color: var(--ks-text-muted); box-shadow: var(--ks-edge-soft);
  font-weight: var(--ks-weight-semibold); font-size: var(--ks-text-sm);
}
.ks-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ks-avatar--sm { width: var(--ks-icon-lg); height: var(--ks-icon-lg); }

/* ---- List ---- */
.ks-list {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  border-radius: var(--ks-radius-lg);
  background-color: var(--ks-surface-default); background-image: var(--ks-surface-sheen);
  box-shadow: var(--ks-shadow-md), var(--ks-light-top);
}
.ks-list-item { display: flex; align-items: center; gap: var(--ks-space-3); padding: var(--ks-space-3) var(--ks-pad-md); }
.ks-list-item:nth-child(even) { background: rgb(var(--ks-shadow-color) / 0.025); }

/* ---- Motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .ks-btn:hover, .ks-card--interactive:hover, .ks-pagination a:hover { transform: none; }
}

/* ============================================================
   5. NAVIGATION & MOTION
   View Transitions, scroll behaviour, scroll-driven reveals.
   ============================================================ */

/* Cross-document (multi-page) view transitions. Every Keystone page loads
   this stylesheet, so navigating between same-origin pages cross-fades
   smoothly with zero JavaScript. (Chromium today; a graceful no-op elsewhere.) */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: var(--ks-ease-default);
}
@keyframes ks-vt-out { to   { opacity: 0; transform: translateY(-8px); } }
@keyframes ks-vt-in  { from { opacity: 0; transform: translateY(12px); } }
::view-transition-old(root) { animation-name: ks-vt-out; }
::view-transition-new(root) { animation-name: ks-vt-in; }

/* Give the SAME logical element this class on each page and it persists /
   morphs across navigations instead of fading with the page body. */
.ks-vt-header { view-transition-name: ks-header; }
.ks-vt-brand  { view-transition-name: ks-brand; }

/* Scroll polish: keep anchored targets clear of the sticky header,
   and give the page a refined, unobtrusive scrollbar. */
html { scroll-padding-top: 84px; }
* { scrollbar-width: thin; scrollbar-color: rgb(var(--ks-shadow-color) / 0.30) transparent; }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-thumb {
  background: rgb(var(--ks-shadow-color) / 0.22);
  border-radius: 99px; border: 3px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgb(var(--ks-shadow-color) / 0.36); background-clip: padding-box; }

/* Scroll-driven reveal — content rises and fades in as it enters the viewport.
   Progressive enhancement: only where supported and motion is welcome. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ks-reveal {
      animation: ks-reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
    @keyframes ks-reveal-in {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ============================================================
   6. TEXTURE UTILITY, CUSTOM SELECT, RIPPLE, RESPONSIVE
   ============================================================ */

/* ---- Texture: apply grain to any element surface ---- */
.ks-textured { position: relative; isolation: isolate; }
.ks-textured::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background-color: rgb(var(--ks-grain-ink));
  -webkit-mask-image: var(--ks-grain); mask-image: var(--ks-grain);
  -webkit-mask-size: 160px 160px; mask-size: 160px 160px;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  opacity: calc(var(--ks-grain-opacity) * 1.6);
}
.ks-textured > * { position: relative; z-index: 1; }

/* ---- Click ripple — a contained tonal pulse, no movement, no glow ---- */
.ks-btn, [data-ks-ripple] { position: relative; overflow: hidden; }
.ks-ripple {
  position: absolute; border-radius: var(--ks-radius-full); pointer-events: none;
  background: currentColor; opacity: 0.22; transform: scale(0);
  animation: ks-ripple var(--ks-duration-slow) var(--ks-ease-out) forwards;
}
@keyframes ks-ripple { to { transform: scale(2.5); opacity: 0; } }

/* ---- Custom select (JS enhances a native <select data-ks-select>) ---- */
.ks-select-ui { position: relative; }
.ks-select-ui-button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ks-space-2);
  width: 100%; height: var(--ks-control-height-md); padding: 0 var(--ks-space-3);
  font: inherit; font-size: var(--ks-text-sm); color: var(--ks-text-default); text-align: left;
  background: var(--ks-surface-subtle); border: 0; border-radius: var(--ks-radius-input);
  box-shadow: var(--ks-well); cursor: pointer;
  transition: box-shadow var(--ks-duration-fast) var(--ks-ease-default);
}
.ks-select-ui-button:focus-visible { outline: 0; box-shadow: var(--ks-well), var(--ks-glow-focus); }
.ks-select-ui-value.is-placeholder { color: var(--ks-text-subtle); }
.ks-select-ui-caret { flex: none; color: var(--ks-text-muted); transition: transform var(--ks-duration-fast) var(--ks-ease-default); }
.ks-select-ui.is-open .ks-select-ui-caret { transform: rotate(180deg); }
.ks-select-ui-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: var(--ks-z-dropdown);
  max-height: 264px; overflow-y: auto; padding: var(--ks-space-1); margin: 0; list-style: none;
  background: var(--ks-surface-default); border-radius: var(--ks-radius-lg);
  box-shadow: var(--ks-shadow-lg), var(--ks-edge); display: none;
}
.ks-select-ui.is-open .ks-select-ui-list { display: block; animation: ks-pop var(--ks-duration-fast) var(--ks-ease-default); }
.ks-select-ui-option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ks-space-2);
  padding: var(--ks-space-2) var(--ks-space-3); font-size: var(--ks-text-sm);
  color: var(--ks-text-default); border-radius: var(--ks-radius-sm); cursor: pointer;
}
.ks-select-ui-option.is-active { background: var(--ks-brand-primary-subtle); color: var(--ks-brand-primary); }
.ks-select-ui-option[aria-selected="true"] { font-weight: var(--ks-weight-semibold); }
.ks-select-ui-option .ks-i { opacity: 0; font-size: 1rem; }
.ks-select-ui-option[aria-selected="true"] .ks-i { opacity: 1; }

/* ---- Responsive refinement ---- */
.ks-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 768px) {
  .ks-container, .ks-container-wide, .ks-container-prose { padding-inline: var(--ks-space-4); }
  .ks-tabs-list { max-width: 100%; overflow-x: auto; }
}

@media (max-width: 560px) {
  .ks-h1 { font-size: var(--ks-text-3xl); }
  .ks-h2 { font-size: var(--ks-text-2xl); }
  .ks-display { font-size: var(--ks-text-4xl); }
  .ks-navbar { gap: var(--ks-space-2); padding-inline: var(--ks-space-3); }
  .ks-modal { padding: 0; align-items: flex-end; }
  .ks-modal-dialog { max-width: 100%; max-height: 92vh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .ks-drawer-panel { width: 100%; }
  .ks-toast-region { left: var(--ks-space-3); right: var(--ks-space-3); width: auto; bottom: var(--ks-space-3); }
  .ks-row { gap: var(--ks-space-3); }
}