/*!
 * Kyma Health — Design System (global stylesheet)
 *
 * Source of truth for all reusable tokens and component classes. Companion
 * files under patients/static/patients/:
 *   css/kyma-biomarker-graphs.css   — biomarker trend + history charts
 *   js/kyma-tokens.js               — Tailwind Play CDN config (mirrors tokens)
 *   js/kyma.js                      — UI runtime (theme, modal, toast, tooltip, forms)
 *   js/kyma-biomarker-graphs.js     — biomarker chart renderers
 *
 * Load order in a base template:
 *   1. This stylesheet (style.css)
 *   2. css/kyma-biomarker-graphs.css
 *   3. js/kyma-tokens.js   (must run BEFORE the Tailwind CDN)
 *   4. Tailwind Play CDN
 *   5. js/kyma.js, js/kyma-biomarker-graphs.js
 */

/* ═══════════════════════════════════════════════════════════
   LOCAL FONTS — Clash Display (self-hosted brand typeface)
   Google Fonts (Manrope, Fraunces, DM Mono) are loaded via a
   <link> in the base template, not re-declared here.
   ═══════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Clash Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ClashDisplay-Regular.woff2') format('woff2'),
       url('fonts/ClashDisplay-Regular.woff')  format('woff'),
       url('fonts/ClashDisplay-Regular.ttf')   format('truetype');
}

/* ═══════════════════════════════════════════════════════════
   1 · DESIGN TOKENS — light theme (default)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Color ramps ─────────────────────────────────────────── */
  --stone-50:#FAF8F4; --stone-100:#F2EEE8; --stone-200:#E6E0D7; --stone-300:#D5CDC2;
  --stone-400:#BAB0A3;--stone-500:#978D80; --stone-600:#716960; --stone-700:#4E4843;
  --stone-800:#302C28;--stone-900:#1B1917;

  --teal-50:#E6F5F8; --teal-100:#C0E4EB; --teal-200:#8CCDD8; --teal-300:#58B5C5;
  --teal-400:#30A0B3;--teal-500:#147D8E; --teal-600:#106A79; --teal-700:#0C5663;
  --teal-800:#08424E;--teal-900:#052E38;

  --sage-50:#EDF4F0; --sage-100:#D2E5D9; --sage-200:#A8CCB7; --sage-300:#7EB395;
  --sage-400:#5A9B76;--sage-500:#3F845C; --sage-600:#346D4C; --sage-700:#29573D;
  --sage-800:#1E412E;--sage-900:#132B1E;

  --navy-50:#E9EEF2; --navy-100:#C7D2DD; --navy-200:#91A5B8; --navy-300:#5B7892;
  --navy-400:#3A5872;--navy-500:#233D55; --navy-600:#1B3047; --navy-700:#142439;
  --navy-800:#0E192B;--navy-900:#080F1C;

  --emerald-50:#E8F7EE; --emerald-100:#C5EBD4; --emerald-200:#8FD8AC; --emerald-300:#59C584;
  --emerald-400:#2DB262;--emerald-500:#1B9A4A; --emerald-600:#15803D; --emerald-700:#106632;
  --emerald-800:#0B4D26;--emerald-900:#07331A;

  --amber-50:#FFF8E6; --amber-100:#FDEFC0; --amber-200:#FADF8A; --amber-300:#F5CC54;
  --amber-400:#DEB130;--amber-500:#B8921A; --amber-600:#937514; --amber-700:#6E580F;
  --amber-800:#4A3B0A;--amber-900:#261E05;

  --terra-50:#FEF2ED; --terra-100:#FCDDD0; --terra-200:#F8BAA3; --terra-300:#F29676;
  --terra-400:#E87550;--terra-500:#D45A32; --terra-600:#B04828; --terra-700:#8C381F;
  --terra-800:#682916;--terra-900:#451A0E;

  --indigo-50:#ECEDF8; --indigo-100:#CDCFED; --indigo-200:#A2A6DC; --indigo-300:#777DCA;
  --indigo-400:#555CB8;--indigo-500:#3D45A0; --indigo-600:#323983; --indigo-700:#272D66;
  --indigo-800:#1C214A;--indigo-900:#12152E;

  --red-50:#FEF0EF; --red-100:#FCD5D3; --red-200:#F8A9A5; --red-300:#F27E77;
  --red-400:#E85A52;--red-500:#D63E35; --red-600:#B3322A; --red-700:#8F2720;
  --red-800:#6B1C17;--red-900:#47120F;

  --white:#FFFFFF; --black:#000000;

  /* ── Typography ──────────────────────────────────────────── */
  --font-brand:   'Clash Display', 'Manrope', sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Manrope', -apple-system, system-ui, sans-serif;
  --font-mono:    'DM Mono', 'SF Mono', ui-monospace, monospace;

  /* Type scale (px) */
  --text-display-xl: 72px;
  --text-display-l:  56px;
  --text-h1:         42px;
  --text-h2:         32px;
  --text-h3:         24px;
  --text-h4:         20px;
  --text-body-l:     18px;
  --text-body-m:     15px;
  --text-body-s:     13px;
  --text-caption:    11px;
  --text-label:      11px;
  --text-mono:       13px;
  --text-data-hero:  72px;
  --text-data-value: 28px;
  --text-data-unit:  14px;

  /* Weights */
  --w-light:300; --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700;

  /* Line heights */
  --lh-tight:1.1; --lh-snug:1.25; --lh-normal:1.4; --lh-relaxed:1.6; --lh-loose:1.75;

  /* Letter spacing */
  --ls-tight:-0.02em; --ls-normal:0; --ls-wide:0.04em; --ls-wider:0.08em; --ls-widest:0.12em;

  /* ── Spacing (4px base) ──────────────────────────────────── */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-7:28px; --sp-8:32px; --sp-9:36px; --sp-10:40px; --sp-12:48px; --sp-14:56px;
  --sp-16:64px;--sp-20:80px;--sp-24:96px; --sp-32:128px;

  /* ── Border radius ───────────────────────────────────────── */
  --r-none:0; --r-xs:2px; --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px;
  --r-2xl:20px; --r-3xl:24px; --r-pill:9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(27,25,23,0.04);
  --shadow-sm:   0 1px 3px rgba(27,25,23,0.06), 0 1px 2px rgba(27,25,23,0.04);
  --shadow-md:   0 4px 8px rgba(27,25,23,0.06), 0 2px 4px rgba(27,25,23,0.04);
  --shadow-lg:   0 10px 20px rgba(27,25,23,0.08), 0 4px 8px rgba(27,25,23,0.04);
  --shadow-xl:   0 20px 40px rgba(27,25,23,0.10), 0 8px 16px rgba(27,25,23,0.05);
  --shadow-2xl:  0 32px 64px rgba(27,25,23,0.14);
  --shadow-focus:0 0 0 3px rgba(48,160,179,0.12);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-default: cubic-bezier(0.25,0.1,0.25,1);
  --ease-out:     cubic-bezier(0.2,0,0,1);
  --ease-in:      cubic-bezier(0.4,0,1,1);
  --ease-spring:  cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:120ms; --dur-base:220ms; --dur-normal:200ms; --dur-slow:350ms; --dur-slower:500ms;

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-base:0; --z-raised:1; --z-dropdown:10; --z-sticky:20;
  --z-overlay:30; --z-modal:40; --z-toast:50; --z-tooltip:60;

  /* ── Component sizing ────────────────────────────────────── */
  --btn-height-lg:48px; --btn-height-md:40px; --btn-height-sm:32px; --btn-height-xs:24px;
  --input-height:40px;  --input-height-sm:32px;
  --ring-size-sm:80px;  --ring-size-md:120px; --ring-size-lg:180px;
  --nav-height:56px;    --sidebar-w:264px;
  --icon-size-sm:16px;  --icon-size-md:20px; --icon-size-lg:24px; --icon-size-xl:32px;

  /* ── Semantic — light ────────────────────────────────────── */
  --bg-page:     var(--stone-50);
  --bg-surface:  var(--white);
  --bg-elevated: var(--white);
  --bg-subtle:   var(--stone-100);
  --bg-overlay:  rgba(27,25,23,0.5);
  --bg-nav:      var(--teal-600);

  --text-primary:   var(--stone-900);
  --text-secondary: var(--stone-600);
  --text-muted:     var(--stone-500);
  --text-disabled:  var(--stone-400);
  --text-inverse:   var(--white);
  --text-link:      var(--teal-500);
  --text-brand:     var(--teal-600);

  --border-default: var(--stone-200);
  --border-strong:  var(--stone-300);
  --border-focus:   var(--teal-400);
  --border-subtle:  var(--stone-100);

  --action-primary-bg:     var(--teal-500);
  --action-primary-text:   var(--white);
  --action-primary-hover:  var(--teal-600);
  --action-primary-active: var(--teal-700);
  --action-secondary-bg:     var(--white);
  --action-secondary-text:   var(--teal-600);
  --action-secondary-border: var(--teal-300);
  --action-secondary-hover:  var(--teal-50);
  --action-ghost-bg:    transparent;
  --action-ghost-text:  var(--stone-600);
  --action-ghost-hover: var(--stone-100);
  --action-destructive-bg:     var(--red-500);
  --action-destructive-text:   var(--white);
  --action-destructive-hover:  var(--red-600);
  --action-destructive-active: var(--red-700);

  --status-optimal-bg:     var(--emerald-50);
  --status-optimal-text:   var(--emerald-600);
  --status-optimal-border: var(--emerald-100);
  --status-inrange-bg:     var(--amber-50);
  --status-inrange-text:   var(--amber-600);
  --status-inrange-border: var(--amber-100);
  --status-out-bg:         var(--terra-50);
  --status-out-text:       var(--terra-600);
  --status-out-border:     var(--terra-100);
  --status-monitor-bg:     var(--indigo-50);
  --status-monitor-text:   var(--indigo-500);
  --status-monitor-border: var(--indigo-100);
  --status-critical-bg:    var(--red-50);
  --status-critical-text:  var(--red-600);
  --status-critical-border:var(--red-100);

  --sidebar-bg:     var(--white);
  --sidebar-text:   var(--stone-600);
  --sidebar-active: var(--teal-500);
  --sidebar-border: var(--stone-200);
}

/* ═══════════════════════════════════════════════════════════
   2 · DARK THEME (opt-in via [data-theme="dark"])
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg-page:     var(--navy-900);
  --bg-surface:  var(--navy-800);
  --bg-elevated: var(--navy-700);
  --bg-subtle:   var(--navy-800);
  --bg-overlay:  rgba(8,15,28,0.7);

  --text-primary:   #E8ECF0;
  --text-secondary: #91A5B8;
  --text-muted:     #5B7892;
  --text-disabled:  #3A5872;
  --text-inverse:   var(--navy-900);
  --text-link:      var(--teal-300);
  --text-brand:     var(--teal-300);

  --border-default: var(--navy-600);
  --border-strong:  var(--navy-500);
  --border-focus:   var(--teal-400);
  --border-subtle:  var(--navy-700);

  --action-primary-bg:     var(--teal-400);
  --action-primary-text:   var(--navy-900);
  --action-primary-hover:  var(--teal-300);
  --action-primary-active: var(--teal-200);
  --action-secondary-bg:     var(--navy-700);
  --action-secondary-text:   var(--teal-300);
  --action-secondary-border: var(--navy-500);
  --action-secondary-hover:  var(--navy-600);
  --action-ghost-text:  var(--navy-200);
  --action-ghost-hover: var(--navy-700);
  --action-destructive-bg:     var(--red-400);
  --action-destructive-hover:  var(--red-500);
  --action-destructive-active: var(--red-600);

  --status-optimal-bg:     rgba(27,154,74,0.12);
  --status-optimal-text:   var(--emerald-300);
  --status-optimal-border: rgba(27,154,74,0.2);
  --status-inrange-bg:     rgba(184,146,26,0.12);
  --status-inrange-text:   var(--amber-300);
  --status-inrange-border: rgba(184,146,26,0.2);
  --status-out-bg:         rgba(212,90,50,0.12);
  --status-out-text:       var(--terra-300);
  --status-out-border:     rgba(212,90,50,0.2);
  --status-monitor-bg:     rgba(61,69,160,0.12);
  --status-monitor-text:   var(--indigo-300);
  --status-monitor-border: rgba(61,69,160,0.2);
  --status-critical-bg:    rgba(214,62,53,0.12);
  --status-critical-text:  var(--red-300);
  --status-critical-border:rgba(214,62,53,0.2);

  --sidebar-bg:     var(--navy-800);
  --sidebar-text:   var(--navy-200);
  --sidebar-active: var(--teal-300);
  --sidebar-border: var(--navy-600);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.35), 0 4px 8px rgba(0,0,0,0.2);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.4), 0 8px 16px rgba(0,0,0,0.25);
  --shadow-2xl:0 32px 64px rgba(0,0,0,0.5);
}

/* ═══════════════════════════════════════════════════════════
   3 · RESET & BASE
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: 15px;
  line-height: var(--lh-relaxed);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--dur-slow), color var(--dur-slow);
}
::selection { background: rgba(20,125,142,0.2); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
a.k-no-underline, a.k-no-underline:hover { text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; padding: 0; font-family: inherit; color: inherit; }
input, textarea, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════
   4 · TYPOGRAPHY HELPERS
   ═══════════════════════════════════════════════════════════ */
.k-brand-logo {
  font-family: var(--font-brand); font-weight: var(--w-medium);
  font-size: 22px; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-primary); line-height: 1;
}
.k-display-xl { font-family: var(--font-display); font-weight: var(--w-light);
  font-size: var(--text-display-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.k-display-l  { font-family: var(--font-display); font-weight: var(--w-light);
  font-size: var(--text-display-l);  line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.k-h1 { font-family: var(--font-display); font-weight: var(--w-light);
  font-size: var(--text-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.k-h2 { font-family: var(--font-display); font-weight: var(--w-regular);
  font-size: var(--text-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.k-h3 { font-family: var(--font-body); font-weight: var(--w-semibold);
  font-size: var(--text-h3); line-height: var(--lh-snug); }
.k-h4 { font-family: var(--font-body); font-weight: var(--w-semibold);
  font-size: var(--text-h4); line-height: var(--lh-snug); }
.k-body-l { font-size: var(--text-body-l); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.k-body   { font-size: var(--text-body-m); line-height: var(--lh-relaxed); color: var(--text-primary); }
.k-body-s { font-size: var(--text-body-s); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.k-caption{ font-size: var(--text-caption); color: var(--text-muted); line-height: var(--lh-normal); }
.k-mono   { font-family: var(--font-mono); font-size: var(--text-mono); letter-spacing: var(--ls-normal); }
.k-eyebrow{ font-family: var(--font-mono); font-size: 10px; font-weight: var(--w-medium);
  letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--text-muted); }
.k-eyebrow-brand { color: var(--text-brand); }
.k-num-tabular { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════
   5 · LAYOUT
   ═══════════════════════════════════════════════════════════ */
.k-container   { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-6); }
.k-container-wide { max-width: 1350px; margin: 0 auto; padding: 0 var(--sp-6); }
.k-container-narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--sp-6); }

.k-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-5); }
.k-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-5); }
.k-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-4); }
.k-grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--sp-3); }
.k-stack  { display: flex; flex-direction: column; gap: var(--sp-4); }
.k-row    { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

@media (max-width: 840px) {
  .k-grid-2, .k-grid-3, .k-grid-4, .k-grid-6 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   6 · BUTTONS — .k-btn[.k-btn-{primary|secondary|ghost|destructive}][.k-btn-{lg|md|sm|xs|icon}]
   ═══════════════════════════════════════════════════════════ */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-body); font-weight: var(--w-semibold);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  border-radius: var(--r-pill); position: relative; overflow: hidden;
  transition: background var(--dur-normal) var(--ease-default),
              border-color var(--dur-normal) var(--ease-default),
              color var(--dur-normal) var(--ease-default),
              box-shadow var(--dur-normal) var(--ease-default),
              transform var(--dur-normal) var(--ease-default);
  text-decoration: none;
}
.k-btn:hover { text-decoration: none; }
.k-btn:disabled, .k-btn.is-disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.k-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* Sizes */
.k-btn-lg { height: var(--btn-height-lg); padding: 0 var(--sp-7); font-size: var(--text-body-m); }
.k-btn-md { height: var(--btn-height-md); padding: 0 var(--sp-5); font-size: 14px; }
.k-btn-sm { height: var(--btn-height-sm); padding: 0 var(--sp-4); font-size: var(--text-body-s); }
.k-btn-xs { height: var(--btn-height-xs); padding: 0 var(--sp-3); font-size: var(--text-caption); border-radius: var(--r-md); }
.k-btn-icon { padding: 0; width: var(--btn-height-md); aspect-ratio: 1; }
.k-btn-icon.k-btn-lg { width: var(--btn-height-lg); }
.k-btn-icon.k-btn-sm { width: var(--btn-height-sm); }
.k-btn-block { width: 100%; }

/* Variants */
.k-btn-primary {
  background: var(--action-primary-bg); color: var(--action-primary-text);
  box-shadow: var(--shadow-xs);
}
.k-btn-primary:hover   { background: var(--action-primary-hover); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.k-btn-primary:active  { background: var(--action-primary-active); transform: translateY(0); box-shadow: none; }

.k-btn-secondary {
  background: var(--action-secondary-bg); color: var(--action-secondary-text);
  border-color: var(--action-secondary-border);
}
.k-btn-secondary:hover  { background: var(--action-secondary-hover); border-color: var(--action-secondary-text); }
.k-btn-secondary:active { background: var(--teal-100); }

.k-btn-ghost {
  background: var(--action-ghost-bg); color: var(--action-ghost-text);
  border-color: var(--border-default);
}
.k-btn-ghost:hover  { background: var(--action-ghost-hover); border-color: var(--border-strong); }
.k-btn-ghost:active { background: var(--stone-200); }

.k-btn-destructive { background: var(--action-destructive-bg); color: var(--action-destructive-text); }
.k-btn-destructive:hover  { background: var(--action-destructive-hover); transform: translateY(-1px); }
.k-btn-destructive:active { background: var(--action-destructive-active); transform: translateY(0); }

.k-btn-warning { background: var(--amber-400); color: var(--stone-900); }
.k-btn-warning:hover  { background: var(--amber-500); transform: translateY(-1px); }
.k-btn-warning:active { background: var(--amber-600); transform: translateY(0); }

.k-btn-link {
  height: auto; padding: 0; background: transparent; border: none;
  color: var(--text-link); border-radius: 0; text-underline-offset: 3px;
}
.k-btn-link:hover { text-decoration: underline; }

.k-btn .k-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3); border-top-color: currentColor;
  animation: k-spin 0.6s linear infinite;
}

/* ═══════════════════════════════════════════════════════════
   7 · FORM CONTROLS
   ═══════════════════════════════════════════════════════════ */
.k-field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-5); }
.k-label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.k-label {
  font-size: var(--text-body-s); font-weight: var(--w-semibold);
  color: var(--text-primary); line-height: var(--lh-normal);
}
.k-label-link {
  font-size: 12px; font-weight: var(--w-semibold);
  color: var(--text-brand); text-decoration: none;
}
.k-helper { font-size: var(--text-caption); color: var(--text-muted); line-height: var(--lh-normal); }
.k-helper-error {
  display: none; align-items: center; gap: 6px;
  font-size: var(--text-caption); color: var(--terra-600);
}
.k-field.has-error .k-helper-error { display: flex; }

.k-input-wrap { position: relative; }
.k-input {
  width: 100%; height: var(--input-height); padding: 0 var(--sp-3);
  font-family: var(--font-body); font-size: 14px; color: var(--text-primary);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-md); outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-slow);
}
.k-input:hover  { border-color: var(--border-strong); }
.k-input:focus  { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.k-input::placeholder { color: var(--text-disabled); }
.k-input:disabled { background: var(--bg-subtle); color: var(--text-disabled); cursor: not-allowed; }
.k-input.is-error   { border-color: var(--red-400); }
.k-input.is-error:focus   { box-shadow: 0 0 0 3px rgba(214,62,53,0.12); }
.k-input.is-success { border-color: var(--emerald-400); }

.k-input-icon-btn {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); border-radius: var(--r-md);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.k-input-icon-btn:hover { background: var(--bg-subtle); color: var(--text-primary); }
.k-input-icon-btn svg   { width: 18px; height: 18px; }

.k-textarea {
  height: auto; min-height: 96px; padding: var(--sp-3);
  resize: vertical; line-height: var(--lh-relaxed);
}
.k-select {
  appearance: none; padding-right: var(--sp-10);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23978D80' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; cursor: pointer;
}

/* Checkbox / radio */
.k-checkbox, .k-radio {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  cursor: pointer; font-size: 14px; color: var(--text-primary);
}
.k-checkbox-control, .k-radio-control {
  position: relative;
  width: 18px; height: 18px; flex-shrink: 0;
}
/* Input overlays the visible box exactly, instead of sitting off in a
   corner, so the browser's native focus ring lands on the box itself
   rather than momentarily reflowing the layout at its true (tiny) size. */
.k-checkbox-control input, .k-radio-control input {
  position: absolute; inset: 0;
  width: 18px; height: 18px; margin: 0;
  opacity: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.k-checkbox-box, .k-radio-dot {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1.5px solid var(--border-strong); background: var(--bg-surface);
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: top;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.k-checkbox-box { border-radius: var(--r-sm); }
.k-radio-dot    { border-radius: 50%; }
.k-checkbox-box.is-checked,
input[type="checkbox"]:checked + .k-checkbox-box {
  background: var(--action-primary-bg); border-color: var(--action-primary-bg);
}
.k-checkbox-box.is-checked::after,
input[type="checkbox"]:checked + .k-checkbox-box::after {
  content: ''; width: 10px; height: 7px;
  border-left: 2px solid var(--white); border-bottom: 2px solid var(--white);
  transform: rotate(-45deg) translateY(-1px);
}
.k-radio-dot.is-checked,
input[type="radio"]:checked + .k-radio-dot { border-color: var(--action-primary-bg); }
.k-radio-dot.is-checked::after,
input[type="radio"]:checked + .k-radio-dot::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--action-primary-bg);
}
input[type="checkbox"]:focus-visible + .k-checkbox-box,
input[type="radio"]:focus-visible + .k-radio-dot {
  outline: 2px solid var(--border-focus); outline-offset: 2px;
}

/* Toggle */
.k-toggle {
  width: 44px; height: 24px; border-radius: var(--r-pill);
  background: var(--stone-300); position: relative;
  transition: background var(--dur-normal);
}
.k-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--white); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-normal) var(--ease-spring);
}
.k-toggle.is-on { background: var(--action-primary-bg); }
.k-toggle.is-on::after { transform: translateX(20px); }

/* ═══════════════════════════════════════════════════════════
   8 · BADGES, TAGS, PILLS
   ═══════════════════════════════════════════════════════════ */
.k-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  border-radius: var(--r-pill); font-weight: var(--w-semibold);
  border: 1px solid transparent;
  transition: background var(--dur-slow), color var(--dur-slow), border-color var(--dur-slow);
}
.k-badge-lg { padding: 6px 14px; font-size: 13px; }
.k-badge-md { padding: 4px 10px; font-size: 12px; }
.k-badge-sm { padding: 2px 8px;  font-size: 10px; }
.k-badge .k-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Status-coloured badges (shared across biomarker row, detail panel, charts) */
.k-badge-optimal  { background: var(--status-optimal-bg);  color: var(--status-optimal-text);  border-color: var(--status-optimal-border); }
.k-badge-inrange  { background: var(--status-inrange-bg);  color: var(--status-inrange-text);  border-color: var(--status-inrange-border); }
.k-badge-out      { background: var(--status-out-bg);      color: var(--status-out-text);      border-color: var(--status-out-border); }
.k-badge-monitor  { background: var(--status-monitor-bg);  color: var(--status-monitor-text);  border-color: var(--status-monitor-border); }
.k-badge-critical { background: var(--status-critical-bg); color: var(--status-critical-text); border-color: var(--status-critical-border); }
.k-badge-optimal  .k-dot { background: var(--emerald-500); }
.k-badge-inrange  .k-dot { background: var(--amber-500); }
.k-badge-out      .k-dot { background: var(--terra-500); }
.k-badge-monitor  .k-dot { background: var(--indigo-500); }
.k-badge-critical .k-dot { background: var(--red-500); }

/* Shorthand status modifiers — same palette, lighter usage (status dot + text) */
.s-opt  { color: var(--emerald-500); }
.s-opt  .k-dot, .s-opt .dot { background: var(--emerald-500); }
.s-warn { color: var(--amber-600); }
.s-warn .k-dot, .s-warn .dot { background: var(--amber-500); }
.s-out  { color: var(--terra-500); }
.s-out  .k-dot, .s-out .dot { background: var(--terra-500); }

/* Category tags (reference data origin) */
.k-tag {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 3px 10px; border-radius: var(--r-sm);
  font-size: 11px; font-weight: var(--w-semibold);
}
.k-tag-blood      { background: rgba(20,125,142,0.1);  color: var(--teal-600); }
.k-tag-wearable   { background: rgba(63,132,92,0.1);   color: var(--sage-600); }
.k-tag-lifestyle  { background: rgba(61,69,160,0.1);   color: var(--indigo-500); }
.k-tag-supplement { background: rgba(212,90,50,0.1);   color: var(--terra-600); }
.k-tag-nutrition  { background: rgba(184,146,26,0.1);  color: var(--amber-600); }

/* Count / new / science pills */
.k-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--red-500); color: var(--white);
  font-size: 10px; font-weight: var(--w-bold);
}
.k-new {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: var(--r-pill); background: var(--teal-500); color: var(--white);
  font-size: 9px; font-weight: var(--w-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   9 · CARDS
   ═══════════════════════════════════════════════════════════ */
.k-card {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-xl); padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-slow), border-color var(--dur-slow);
}
.k-card-flat  { box-shadow: none; }
.k-card-soft  { background: var(--bg-subtle); border: none; box-shadow: none; }
.k-card-dark  { background: var(--stone-900); color: var(--white); border-color: transparent; }
.k-card-hoverable       { cursor: pointer; }
.k-card-hoverable:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-1px); }
.k-card-sm { padding: var(--sp-4); border-radius: var(--r-lg); }
.k-card-lg { padding: var(--sp-8); border-radius: var(--r-2xl); }

.k-card-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--w-bold);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--sp-2);
}
.k-card-title {
  font-family: var(--font-body); font-weight: var(--w-semibold);
  font-size: 18px; line-height: var(--lh-snug); color: var(--text-primary);
  letter-spacing: -0.005em;
}

/* Reveal-on-scroll utility — parent adds .in-view via IntersectionObserver in kyma.js */
.k-reveal { opacity: 0; transform: translateY(12px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.k-reveal.in-view { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════
   10 · NAVIGATION
   ═══════════════════════════════════════════════════════════ */

/* Top nav */
.k-topnav {
  display: flex; align-items: center; gap: var(--sp-8);
  height: var(--nav-height); padding: 0 var(--sp-8);
  background: var(--bg-surface); border-bottom: 1px solid var(--border-default);
  box-shadow: var(--shadow-xs);
}
.k-topnav-logo {
  font-family: var(--font-brand); font-weight: var(--w-medium);
  font-size: 22px; letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-primary);
}
.k-topnav-links   { display: flex; gap: var(--sp-6); flex: 1; }
.k-topnav-link    {
  font-size: 14px; font-weight: var(--w-medium); color: var(--text-secondary);
  padding: var(--sp-2) 0; border-bottom: 2px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.k-topnav-link:hover        { color: var(--text-primary); }
.k-topnav-link.is-active    { color: var(--text-brand); border-bottom-color: var(--text-brand); }
.k-topnav-actions { display: flex; align-items: center; gap: var(--sp-3); }

/* Floating pill nav (home mockup) — 3-zone: brand · dark pill · utilities */
.k-navpill-shell {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(250,250,248,0.45);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  border-bottom-left-radius: var(--r-2xl);
  border-bottom-right-radius: var(--r-2xl);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 0 rgba(28,25,23,0.04);
}
.k-navpill {
  display: inline-flex; align-items: center;
  background: var(--stone-900); border-radius: var(--r-pill);
  padding: 4px; box-shadow: var(--shadow-lg);
}
.k-navpill-link {
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 20px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-size: 13px; font-weight: var(--w-medium);
  color: var(--stone-400); letter-spacing: 0.01em; white-space: nowrap;
  transition: color var(--dur-base), background var(--dur-base);
}
.k-navpill-link:hover { color: rgba(255,255,255,0.9); }
.k-navpill-link.is-active { background: var(--teal-500); color: var(--white); }

/* Sidebar */
.k-sidebar {
  position: fixed; top: 0; left: 0;
  width: var(--sidebar-w); height: 100vh;
  background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border);
  display: flex; flex-direction: column;
  z-index: var(--z-sticky); overflow-y: auto;
}
.k-sidebar-header { padding: var(--sp-6) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--sidebar-border); }
.k-sidebar-nav    { flex: 1; padding: var(--sp-4) 0; }
.k-sidebar-footer { padding: var(--sp-5); border-top: 1px solid var(--sidebar-border);
  font-size: var(--text-caption); color: var(--text-muted); }
.k-sidebar-group  { margin-bottom: var(--sp-1); }
.k-sidebar-group-label {
  padding: var(--sp-3) var(--sp-5) var(--sp-1);
  font-size: 10px; font-weight: var(--w-bold);
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--text-disabled);
}
.k-sidebar-link {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px var(--sp-5);
  font-size: 13px; font-weight: var(--w-medium);
  color: var(--sidebar-text);
  border-left: 2px solid transparent;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.k-sidebar-link:hover     { color: var(--text-primary); background: var(--bg-subtle); text-decoration: none; }
.k-sidebar-link.is-active {
  color: var(--sidebar-active); border-left-color: var(--sidebar-active);
  background: rgba(20,125,142,0.06);
}

/* Breadcrumbs, tabs, pills */
.k-breadcrumb { display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-body-s); color: var(--text-muted); }
.k-breadcrumb a { color: var(--text-secondary); }
.k-breadcrumb .k-breadcrumb-sep     { color: var(--text-disabled); }
.k-breadcrumb .k-breadcrumb-current { color: var(--text-primary); font-weight: var(--w-medium); }

.k-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-default); }
.k-tab  {
  padding: var(--sp-3) var(--sp-5);
  font-size: 14px; font-weight: var(--w-medium); color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.k-tab:hover        { color: var(--text-primary); }
.k-tab.is-active    { color: var(--text-brand); border-bottom-color: var(--text-brand); }

.k-pills { display: inline-flex; gap: var(--sp-1); padding: var(--sp-1);
  background: var(--bg-subtle); border-radius: var(--r-pill); }
.k-pill  {
  padding: var(--sp-2) var(--sp-4);
  font-size: 13px; font-weight: var(--w-medium); color: var(--text-muted);
  border-radius: var(--r-pill);
  transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.k-pill.is-active { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }

/* ═══════════════════════════════════════════════════════════
   11 · OVERLAYS — modal, backdrop, tooltip, toast
   ═══════════════════════════════════════════════════════════ */
.k-backdrop {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--bg-overlay); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out);
}
.k-backdrop.is-open { opacity: 1; visibility: visible; }

.k-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(0.98);
  z-index: var(--z-modal); width: calc(100% - var(--sp-10)); max-width: 480px;
  background: var(--bg-elevated); border-radius: var(--r-2xl);
  padding: var(--sp-8); box-shadow: var(--shadow-xl);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              transform  var(--dur-base) var(--ease-out),
              visibility var(--dur-base) var(--ease-out);
}
.k-modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.k-modal-lg { max-width: 640px; }
.k-modal-title { font-family: var(--font-display); font-size: var(--text-h3);
  font-weight: var(--w-regular); color: var(--text-primary); margin-bottom: var(--sp-3); }
.k-modal-body  { font-size: var(--text-body-m); color: var(--text-secondary);
  line-height: var(--lh-relaxed); margin-bottom: var(--sp-6); }
.k-modal-footer { display: flex; gap: var(--sp-3); justify-content: flex-end; }
.k-modal-close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 32px; height: 32px; border-radius: var(--r-md);
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast);
}
.k-modal-close:hover { background: var(--bg-subtle); color: var(--text-primary); }

.k-tooltip {
  position: absolute; z-index: var(--z-tooltip);
  background: var(--stone-900); color: var(--white);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  font-size: 12px; white-space: nowrap;
  box-shadow: var(--shadow-lg); pointer-events: none;
  opacity: 0; transform: translateY(-2px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.k-tooltip.is-visible { opacity: 1; transform: translateY(0); }

.k-toast-container {
  position: fixed; top: var(--sp-5); right: var(--sp-5); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--sp-3); pointer-events: none;
}
.k-toast {
  display: flex; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg); border: 1px solid transparent;
  background: var(--bg-elevated); box-shadow: var(--shadow-lg);
  max-width: 380px; pointer-events: auto;
  animation: k-rise 250ms var(--ease-out) both;
}
.k-toast-title { font-size: 14px; font-weight: var(--w-bold); margin-bottom: 2px; }
.k-toast-body  { font-size: var(--text-body-s); line-height: var(--lh-relaxed); }
.k-toast-success { background: var(--status-optimal-bg);  border-color: var(--status-optimal-border);  color: var(--status-optimal-text); }
.k-toast-warning { background: var(--status-inrange-bg);  border-color: var(--status-inrange-border);  color: var(--status-inrange-text); }
.k-toast-error   { background: var(--status-out-bg);      border-color: var(--status-out-border);      color: var(--status-out-text); }
.k-toast-info    { background: var(--status-monitor-bg);  border-color: var(--status-monitor-border);  color: var(--status-monitor-text); }
.k-toast-close   { background: none; color: inherit; opacity: 0.7; margin-left: auto; }
.k-toast-close:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   12 · FEEDBACK — alerts, skeleton, progress
   ═══════════════════════════════════════════════════════════ */
.k-alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
  border-radius: var(--r-lg); border: 1px solid transparent;
  font-size: var(--text-body-s); line-height: var(--lh-relaxed);
}
.k-alert:last-child { margin-bottom: 0; }
.k-alert-success { background: var(--status-optimal-bg);  border-color: var(--status-optimal-border);  color: var(--status-optimal-text); }
.k-alert-warning { background: var(--status-inrange-bg);  border-color: var(--status-inrange-border);  color: var(--status-inrange-text); }
.k-alert-error   { background: var(--status-out-bg);      border-color: var(--status-out-border);      color: var(--status-out-text); }
.k-alert-info    { background: var(--status-monitor-bg);  border-color: var(--status-monitor-border);  color: var(--status-monitor-text); }

.k-skeleton {
  background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--border-default) 50%, var(--bg-subtle) 75%);
  background-size: 200% 100%;
  animation: k-shimmer 1.4s infinite;
  border-radius: var(--r-md);
}

.k-progress     { height: 6px; border-radius: var(--r-pill); background: var(--border-default); overflow: hidden; }
.k-progress-bar { height: 100%; border-radius: var(--r-pill); background: var(--action-primary-bg);
  transition: width 500ms var(--ease-out); }
.k-progress-indeterminate .k-progress-bar { width: 30%; animation: k-indeterminate 1.5s infinite var(--ease-default); }

/* ═══════════════════════════════════════════════════════════
   13 · RANGE BAR, FILE UPLOAD, AI FEED
   ═══════════════════════════════════════════════════════════ */
.k-range {
  position: relative; height: 8px; border-radius: var(--r-pill);
  display: flex; gap: 2px; overflow: visible;
}
.k-range-seg { height: 100%; border-radius: var(--r-pill); flex: 1; }
.k-range-seg.s-opt  { background: var(--emerald-400); }
.k-range-seg.s-warn { background: var(--amber-400); }
.k-range-seg.s-out  { background: var(--terra-400); }
.k-range-dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--bg-surface); box-shadow: var(--shadow-sm);
}

.k-upload {
  border: 2px dashed var(--border-default); border-radius: var(--r-xl);
  padding: var(--sp-10); text-align: center; cursor: pointer;
  transition: border-color var(--dur-normal), background var(--dur-normal);
}
.k-upload:hover          { border-color: var(--border-focus); background: rgba(48,160,179,0.04); }
.k-upload.is-dragging,
.k-upload.is-active      { border-color: var(--action-primary-bg); border-style: solid; background: var(--teal-50); }
.k-upload-icon { color: var(--text-muted); margin-bottom: var(--sp-3); }

.k-ai-item {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-xl); padding: var(--sp-5);
  border-left: 3px solid var(--teal-400);
  transition: box-shadow var(--dur-slow);
}
.k-ai-item:hover { box-shadow: var(--shadow-md); }

/* ═══════════════════════════════════════════════════════════
   14 · HEALTH-SCORE RING (generic circular progress)
   Use .k-ring with inline SVG. Biomarker trend / history
   charts live in css/kyma-biomarker-graphs.css.
   ═══════════════════════════════════════════════════════════ */
.k-ring {
  position: relative; display: inline-flex;
  align-items: center; justify-content: center;
}
.k-ring svg { transform: rotate(-90deg); }
.k-ring-track { stroke: var(--border-default); stroke-width: 6; fill: none; stroke-linecap: round; }
.k-ring-fill  { stroke-width: 6; fill: none; stroke-linecap: round;
  transition: stroke-dashoffset 1.2s var(--ease-out); }
.k-ring-fill.s-opt  { stroke: var(--emerald-500); }
.k-ring-fill.s-warn { stroke: var(--amber-500); }
.k-ring-fill.s-out  { stroke: var(--terra-500); }
.k-ring-value {
  position: absolute; display: flex; flex-direction: column; align-items: center;
}
.k-ring-num {
  font-family: var(--font-display); font-weight: var(--w-light);
  line-height: 1; letter-spacing: var(--ls-tight); color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.k-ring-sm .k-ring-num { font-size: 26px; }
.k-ring-md .k-ring-num { font-size: 40px; }
.k-ring-lg .k-ring-num { font-size: 56px; }
.k-ring-label {
  font-size: var(--text-caption); font-weight: var(--w-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--text-muted); margin-top: var(--sp-1);
}

/* ═══════════════════════════════════════════════════════════
   15 · ANIMATIONS & REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */
@keyframes k-spin    { to { transform: rotate(360deg); } }
@keyframes k-shimmer { to { background-position: -200% 0; } }
@keyframes k-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }
@keyframes k-rise    { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes k-pulse   {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(20,125,142,0.45); }
  70%  { transform: scale(1); box-shadow: 0 0 0 8px rgba(20,125,142,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(20,125,142,0); }
}
@keyframes k-dot-glow { 0%,100% { filter: drop-shadow(0 0 4px currentColor); }
                        50%     { filter: drop-shadow(0 0 12px currentColor); } }
@keyframes k-dot-ping { 0%       { transform: scale(0.8); opacity: 0.9; }
                        80%,100% { transform: scale(3.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .k-reveal { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   16 · BOOTSTRAP × TAILWIND CONFLICT RESOLUTIONS
   Tailwind CDN defines .collapse { visibility: collapse } which
   overrides Bootstrap's collapse behaviour. Force visibility back
   to visible on any element that Bootstrap has expanded.
   ═══════════════════════════════════════════════════════════ */
.collapse.show,
.collapsing { visibility: visible !important; }

/* ═══════════════════════════════════════════════════════════
   17 · PRINT
   ═══════════════════════════════════════════════════════════ */
@media print {
  .k-sidebar, .k-topnav, .k-navpill-shell, .k-toast-container { display: none; }
  body { background: var(--white); color: var(--black); }
}