/*!
 * Keel UI — the unified Keel design system (one stylesheet for the hub and all eight apps).
 * Source of truth: Claude Design project "Keel Program — Unified Ecosystem"
 *   (KeelBar, KeelPage, Keel System 1a–1h, Keel Suite 1a–1f, Keel Public).
 * Modernist structure — Archivo, visible grid, 2px rules, flush-left labels, square containers —
 * re-tuned to the Keel palette: ocean ink on warm ivory. Rounded geometry only for the symbol,
 * avatars, status dots and the app cue.
 *
 * Rules for this file:
 *  - Every class is prefixed "k-". Tokens are "--k-*".
 *  - Production CSP forbids inline styles: dynamic values arrive as custom properties set from
 *    data-k-* attributes by keel-ui.js (see "Dynamic hooks").
 *  - Assets are referenced relatively (fonts/…, img/…) so the kit works under any path prefix.
 */

/* ════════════════════════════════════════════════════════════════════════
   1. Fonts — Archivo 400 / 600 / 800 (OFL, vendored)
   ════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/archivo-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/archivo-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/archivo-latin-800-normal.woff2") format("woff2");
}

/* ════════════════════════════════════════════════════════════════════════
   2. Tokens — light (default)
   ════════════════════════════════════════════════════════════════════════ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Base palette (Keel System 1c) */
  --k-ink: #172340;
  --k-ocean: #0b6b8a;
  --k-shell: #f8f6f1;
  --k-seaglass: #e6f1f4;
  --k-white: #ffffff;
  --k-mark-ground: #fdfaf2;   /* the cream inside the round symbol */
  --k-cta: #ffc845;           /* membership CTA (Keel Public) */
  --k-cta-hover: #ffd772;
  --k-hero: #0a4a63;          /* public hero field */
  --k-hero-hover: #0e5c7a;

  /* Ocean ramp (derived; 500 = Ocean). Raw values — prefer the semantic tokens below. */
  --k-ocean-100: #dcf0f5;
  --k-ocean-200: #b5e0eb;
  --k-ocean-300: #86c9dc;
  --k-ocean-400: #3f97b3;
  --k-ocean-500: #0b6b8a;
  --k-ocean-600: #08566f;
  --k-ocean-700: #064f66;
  --k-ocean-800: #053a4b;
  --k-ocean-900: #032836;

  /* Semantic colour roles */
  --k-bg: #f8f6f1;            /* Shell · canvas */
  --k-surface: #e6f1f4;       /* Sea glass · surface */
  --k-raised: #ffffff;        /* White · raised (cards, inputs, panels) */
  --k-text: #172340;          /* Ink */
  --k-text-2: #343c48;        /* secondary text */
  --k-text-body: #2b3036;     /* long-form paragraphs */
  --k-muted: #4f5866;         /* muted text */
  --k-divider: color-mix(in srgb, #172340 30%, transparent);
  --k-divider-strong: #172340;
  --k-track: #dbe5e9;         /* progress / bar tracks */
  --k-blank: #eef4f5;         /* calendar cells outside the month */
  --k-toggle-off: #a8b4bd;
  --k-hover-wash: color-mix(in srgb, #172340 7%, transparent);
  --k-press-wash: color-mix(in srgb, #172340 14%, transparent);
  --k-row-wash: color-mix(in srgb, #172340 4%, transparent);
  --k-scrim: rgba(23, 35, 64, 0.5);
  --k-scrim-strong: rgba(23, 35, 64, 0.55);

  --k-primary: #0b6b8a;       /* every app's primary action is Ocean */
  --k-primary-hover: #08566f;
  --k-primary-active: #064f66;
  --k-primary-tint: #dcf0f5;  /* selected rows, unread items */
  --k-on-primary: #f8f6f1;
  --k-link: #0b6b8a;
  --k-link-hover: #064f66;
  --k-link-strong: #064f66;   /* ghost buttons, in-panel links */
  --k-focus: #0b6b8a;

  --k-success: #1d7a4c;
  --k-caution: #a35400;
  --k-error: #c62828;
  --k-on-status: #ffffff;

  /* Tones (bg / fg / edge) — KeelPage TONES */
  --k-tone-info-bg: #dcf0f5;    --k-tone-info-fg: #053a4b;    --k-tone-info-edge: #0b6b8a;
  --k-tone-money-bg: #fdf1cc;   --k-tone-money-fg: #5c4100;   --k-tone-money-edge: #c78f00;
  --k-tone-safety-bg: #fde0dc;  --k-tone-safety-fg: #6e1414;  --k-tone-safety-edge: #c62828;
  --k-tone-success-bg: #d8f2e2; --k-tone-success-fg: #14502f; --k-tone-success-edge: #1d7a4c;
  --k-tone-warn-bg: #fde6c4;    --k-tone-warn-fg: #6b3600;    --k-tone-warn-edge: #a35400;
  --k-tone-neutral-bg: #e6f1f4; --k-tone-neutral-fg: #343c48; --k-tone-neutral-edge: #4f5866;
  --k-tone-ink-bg: #172340;     --k-tone-ink-fg: #f8f6f1;     --k-tone-ink-edge: #172340;
  --k-tone-outline-bg: transparent; --k-tone-outline-fg: #172340; --k-tone-outline-edge: #172340;

  /* App palettes: vivid / deep / tint / light (Keel System 1c, KeelBar VIV/DEEP/TINT/LIGHT) */
  --k-nutrition: #4f8a1f;     --k-nutrition-deep: #3c6e15;     --k-nutrition-tint: #eef7e3;     --k-nutrition-light: #bfe09a;
  --k-fitness: #e05a1e;       --k-fitness-deep: #b5400f;       --k-fitness-tint: #fdede4;       --k-fitness-light: #f8b898;
  --k-mind: #7a4fd6;          --k-mind-deep: #6236c0;          --k-mind-tint: #f1ebfd;          --k-mind-light: #cdb8f4;
  --k-sleep: #3558c8;         --k-sleep-deep: #2945a8;         --k-sleep-tint: #e8eefc;         --k-sleep-light: #b3c3f2;
  --k-money: #c78f00;         --k-money-deep: #855f00;         --k-money-tint: #fdf5d9;         --k-money-light: #efd27f;
  --k-relationships: #d6406f; --k-relationships-deep: #b02a57; --k-relationships-tint: #fde9f0; --k-relationships-light: #f4adc4;
  --k-productivity: #1f78e0;  --k-productivity-deep: #1762c0;  --k-productivity-tint: #e5f0fd;  --k-productivity-light: #a9cdf7;
  --k-growth: #119b74;        --k-growth-deep: #0b7656;        --k-growth-tint: #e0f6ee;        --k-growth-light: #96dec4;
  --k-hub: #0b6b8a;           --k-hub-deep: #0b6b8a;           --k-hub-tint: #e0f1f6;           --k-hub-light: #a3d8e8;
  --k-on-app: #ffffff;        /* text on --k-app-deep fills (selected chips, steps, player) */
  --k-on-app-btn-bg: #f8f6f1; /* solid button on an app-deep field (player) */
  --k-on-app-btn-fg: #172340;

  /* Typography */
  --k-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --k-font-mono: ui-monospace, Menlo, Consolas, monospace;
  --k-fs-10-5: 10.5px;
  --k-fs-11: 11px;
  --k-fs-11-5: 11.5px;
  --k-fs-12: 12px;
  --k-fs-12-5: 12.5px;
  --k-fs-13: 13px;
  --k-fs-13-5: 13.5px;
  --k-fs-14: 14px;
  --k-fs-14-5: 14.5px;
  --k-fs-15: 15px;
  --k-fs-17: 17px;
  --k-fs-20: 20px;
  --k-fs-22: 22px;
  --k-fs-24: 24px;
  --k-fs-28: 28px;
  --k-fs-30: 30px;
  --k-fs-36: 36px;
  --k-fs-40: 40px;
  --k-fs-44: 44px;
  --k-fs-display: 56px;
  --k-fs-64: 64px;
  --k-tracking-display: -0.04em;
  --k-tracking-h1: -0.03em;
  --k-tracking-h2: -0.02em;
  --k-tracking-label: 0.1em;

  /* Spacing (4pt) */
  --k-space-1: 4px;
  --k-space-2: 8px;
  --k-space-3: 12px;
  --k-space-4: 16px;
  --k-space-5: 20px;
  --k-space-6: 24px;
  --k-space-7: 28px;
  --k-space-8: 32px;
  --k-space-12: 48px;
  --k-space-16: 64px;

  /* Geometry & elevation */
  --k-radius: 0px;            /* containers are square — always */
  --k-round: 50%;             /* symbol, avatars, status dots, app cue only */
  --k-rule: 2px;              /* section rules */
  --k-hairline: 1px;          /* row rules */
  --k-shadow-sm: 0 1px 2px rgba(23, 35, 64, 0.10);
  --k-shadow-md: 0 4px 12px rgba(23, 35, 64, 0.12);
  --k-shadow-lg: 0 16px 40px rgba(23, 35, 64, 0.18);
  --k-focus-ring: 2px solid var(--k-focus); /* convenience for apps; the kit writes 2px solid var(--k-focus) so a
                                               scope that re-sets --k-focus (filled grounds) re-colours the ring */
  --k-focus-offset: 2px;
  --k-target: 44px;           /* minimum touch target */
  --k-ease: 90ms ease-out;
}

/* ════════════════════════════════════════════════════════════════════════
   3. Tokens — dark (Keel System 1h: same tokens, inverted ground; accents lifted one step)
   Applies to <html data-theme="dark"> or to any subtree with data-theme="dark"; data-theme="system"
   gets the same tokens when the OS prefers dark (copy below).
   ════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;

  --k-bg: #111a30;
  --k-surface: #1b2742;
  --k-raised: #1f2c4a;
  --k-text: #eef2f8;
  --k-text-2: #d6dde7;
  --k-text-body: #dfe5ee;
  --k-muted: #c1cbd8;
  --k-divider: color-mix(in srgb, #eef2f8 26%, transparent);
  --k-divider-strong: #eef2f8;
  --k-track: #2c3a5a;
  --k-blank: #18223b;
  --k-toggle-off: #56647d;
  --k-hover-wash: color-mix(in srgb, #eef2f8 9%, transparent);
  --k-press-wash: color-mix(in srgb, #eef2f8 16%, transparent);
  --k-row-wash: color-mix(in srgb, #eef2f8 5%, transparent);
  --k-scrim: rgba(4, 8, 18, 0.62);
  --k-scrim-strong: rgba(4, 8, 18, 0.7);

  --k-primary: #6fd0ea;
  --k-primary-hover: #a3d0d9;
  --k-primary-active: #c7e8f0;
  --k-primary-tint: color-mix(in srgb, #6fd0ea 16%, #111a30);
  --k-on-primary: #111a30;
  --k-link: #6fd0ea;
  --k-link-hover: #a3d0d9;
  --k-link-strong: #6fd0ea;
  --k-focus: #6fd0ea;

  --k-success: #6fd19c;
  --k-caution: #f4b26b;
  --k-error: #ff9a8f;
  --k-on-status: #111a30;

  --k-tone-info-bg: color-mix(in srgb, #6fd0ea 18%, #111a30);    --k-tone-info-fg: #d3f1f9;    --k-tone-info-edge: #6fd0ea;
  --k-tone-money-bg: color-mix(in srgb, #e8bf4a 18%, #111a30);   --k-tone-money-fg: #f7e4ae;   --k-tone-money-edge: #e8bf4a;
  --k-tone-safety-bg: color-mix(in srgb, #ff9a8f 18%, #111a30);  --k-tone-safety-fg: #ffd9d4;  --k-tone-safety-edge: #ff9a8f;
  --k-tone-success-bg: color-mix(in srgb, #6fd19c 18%, #111a30); --k-tone-success-fg: #cdf1dc; --k-tone-success-edge: #6fd19c;
  --k-tone-warn-bg: color-mix(in srgb, #f4b26b 18%, #111a30);    --k-tone-warn-fg: #fbe0c2;    --k-tone-warn-edge: #f4b26b;
  --k-tone-neutral-bg: #1b2742;  --k-tone-neutral-fg: #d6dde7;  --k-tone-neutral-edge: #c1cbd8;
  --k-tone-ink-bg: #eef2f8;      --k-tone-ink-fg: #111a30;      --k-tone-ink-edge: #eef2f8;
  --k-tone-outline-bg: transparent; --k-tone-outline-fg: #eef2f8; --k-tone-outline-edge: #eef2f8;

  /* Lifted accents keep ≥4.5:1 on #111A30 (Sleep #9FB4F2 and Ocean #6FD0EA from the design). */
  --k-nutrition: #a3d46f;     --k-nutrition-deep: #a3d46f;     --k-nutrition-tint: color-mix(in srgb, #a3d46f 14%, #111a30);     --k-nutrition-light: color-mix(in srgb, #a3d46f 42%, #111a30);
  --k-fitness: #f5a27a;       --k-fitness-deep: #f5a27a;       --k-fitness-tint: color-mix(in srgb, #f5a27a 14%, #111a30);       --k-fitness-light: color-mix(in srgb, #f5a27a 42%, #111a30);
  --k-mind: #bba3f5;          --k-mind-deep: #bba3f5;          --k-mind-tint: color-mix(in srgb, #bba3f5 14%, #111a30);          --k-mind-light: color-mix(in srgb, #bba3f5 42%, #111a30);
  --k-sleep: #9fb4f2;         --k-sleep-deep: #9fb4f2;         --k-sleep-tint: color-mix(in srgb, #9fb4f2 14%, #111a30);         --k-sleep-light: color-mix(in srgb, #9fb4f2 42%, #111a30);
  --k-money: #e8bf4a;         --k-money-deep: #e8bf4a;         --k-money-tint: color-mix(in srgb, #e8bf4a 14%, #111a30);         --k-money-light: color-mix(in srgb, #e8bf4a 42%, #111a30);
  --k-relationships: #f59bb8; --k-relationships-deep: #f59bb8; --k-relationships-tint: color-mix(in srgb, #f59bb8 14%, #111a30); --k-relationships-light: color-mix(in srgb, #f59bb8 42%, #111a30);
  --k-productivity: #8cbcf8;  --k-productivity-deep: #8cbcf8;  --k-productivity-tint: color-mix(in srgb, #8cbcf8 14%, #111a30);  --k-productivity-light: color-mix(in srgb, #8cbcf8 42%, #111a30);
  --k-growth: #6fd4b3;        --k-growth-deep: #6fd4b3;        --k-growth-tint: color-mix(in srgb, #6fd4b3 14%, #111a30);        --k-growth-light: color-mix(in srgb, #6fd4b3 42%, #111a30);
  --k-hub: #6fd0ea;           --k-hub-deep: #6fd0ea;           --k-hub-tint: color-mix(in srgb, #6fd0ea 14%, #111a30);           --k-hub-light: color-mix(in srgb, #6fd0ea 42%, #111a30);
  --k-on-app: #111a30;
  --k-on-app-btn-bg: #111a30;
  --k-on-app-btn-fg: #eef2f8;

  --k-shadow-sm: 0 0 0 1px rgba(238, 242, 248, 0.08), 0 1px 2px rgba(0, 0, 0, 0.4);
  --k-shadow-md: 0 0 0 1px rgba(238, 242, 248, 0.10), 0 6px 16px rgba(0, 0, 0, 0.45);
  --k-shadow-lg: 0 0 0 1px rgba(238, 242, 248, 0.12), 0 18px 44px rgba(0, 0, 0, 0.55);
}

/* data-theme="system" follows the OS with no script (and no flash before keel-ui.js runs).
   This block MUST stay identical to the one above — test/css.test.js checks it. */
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    color-scheme: dark;

    --k-bg: #111a30;
    --k-surface: #1b2742;
    --k-raised: #1f2c4a;
    --k-text: #eef2f8;
    --k-text-2: #d6dde7;
    --k-text-body: #dfe5ee;
    --k-muted: #c1cbd8;
    --k-divider: color-mix(in srgb, #eef2f8 26%, transparent);
    --k-divider-strong: #eef2f8;
    --k-track: #2c3a5a;
    --k-blank: #18223b;
    --k-toggle-off: #56647d;
    --k-hover-wash: color-mix(in srgb, #eef2f8 9%, transparent);
    --k-press-wash: color-mix(in srgb, #eef2f8 16%, transparent);
    --k-row-wash: color-mix(in srgb, #eef2f8 5%, transparent);
    --k-scrim: rgba(4, 8, 18, 0.62);
    --k-scrim-strong: rgba(4, 8, 18, 0.7);

    --k-primary: #6fd0ea;
    --k-primary-hover: #a3d0d9;
    --k-primary-active: #c7e8f0;
    --k-primary-tint: color-mix(in srgb, #6fd0ea 16%, #111a30);
    --k-on-primary: #111a30;
    --k-link: #6fd0ea;
    --k-link-hover: #a3d0d9;
    --k-link-strong: #6fd0ea;
    --k-focus: #6fd0ea;

    --k-success: #6fd19c;
    --k-caution: #f4b26b;
    --k-error: #ff9a8f;
    --k-on-status: #111a30;

    --k-tone-info-bg: color-mix(in srgb, #6fd0ea 18%, #111a30);    --k-tone-info-fg: #d3f1f9;    --k-tone-info-edge: #6fd0ea;
    --k-tone-money-bg: color-mix(in srgb, #e8bf4a 18%, #111a30);   --k-tone-money-fg: #f7e4ae;   --k-tone-money-edge: #e8bf4a;
    --k-tone-safety-bg: color-mix(in srgb, #ff9a8f 18%, #111a30);  --k-tone-safety-fg: #ffd9d4;  --k-tone-safety-edge: #ff9a8f;
    --k-tone-success-bg: color-mix(in srgb, #6fd19c 18%, #111a30); --k-tone-success-fg: #cdf1dc; --k-tone-success-edge: #6fd19c;
    --k-tone-warn-bg: color-mix(in srgb, #f4b26b 18%, #111a30);    --k-tone-warn-fg: #fbe0c2;    --k-tone-warn-edge: #f4b26b;
    --k-tone-neutral-bg: #1b2742;  --k-tone-neutral-fg: #d6dde7;  --k-tone-neutral-edge: #c1cbd8;
    --k-tone-ink-bg: #eef2f8;      --k-tone-ink-fg: #111a30;      --k-tone-ink-edge: #eef2f8;
    --k-tone-outline-bg: transparent; --k-tone-outline-fg: #eef2f8; --k-tone-outline-edge: #eef2f8;

    /* Lifted accents keep ≥4.5:1 on #111A30 (Sleep #9FB4F2 and Ocean #6FD0EA from the design). */
    --k-nutrition: #a3d46f;     --k-nutrition-deep: #a3d46f;     --k-nutrition-tint: color-mix(in srgb, #a3d46f 14%, #111a30);     --k-nutrition-light: color-mix(in srgb, #a3d46f 42%, #111a30);
    --k-fitness: #f5a27a;       --k-fitness-deep: #f5a27a;       --k-fitness-tint: color-mix(in srgb, #f5a27a 14%, #111a30);       --k-fitness-light: color-mix(in srgb, #f5a27a 42%, #111a30);
    --k-mind: #bba3f5;          --k-mind-deep: #bba3f5;          --k-mind-tint: color-mix(in srgb, #bba3f5 14%, #111a30);          --k-mind-light: color-mix(in srgb, #bba3f5 42%, #111a30);
    --k-sleep: #9fb4f2;         --k-sleep-deep: #9fb4f2;         --k-sleep-tint: color-mix(in srgb, #9fb4f2 14%, #111a30);         --k-sleep-light: color-mix(in srgb, #9fb4f2 42%, #111a30);
    --k-money: #e8bf4a;         --k-money-deep: #e8bf4a;         --k-money-tint: color-mix(in srgb, #e8bf4a 14%, #111a30);         --k-money-light: color-mix(in srgb, #e8bf4a 42%, #111a30);
    --k-relationships: #f59bb8; --k-relationships-deep: #f59bb8; --k-relationships-tint: color-mix(in srgb, #f59bb8 14%, #111a30); --k-relationships-light: color-mix(in srgb, #f59bb8 42%, #111a30);
    --k-productivity: #8cbcf8;  --k-productivity-deep: #8cbcf8;  --k-productivity-tint: color-mix(in srgb, #8cbcf8 14%, #111a30);  --k-productivity-light: color-mix(in srgb, #8cbcf8 42%, #111a30);
    --k-growth: #6fd4b3;        --k-growth-deep: #6fd4b3;        --k-growth-tint: color-mix(in srgb, #6fd4b3 14%, #111a30);        --k-growth-light: color-mix(in srgb, #6fd4b3 42%, #111a30);
    --k-hub: #6fd0ea;           --k-hub-deep: #6fd0ea;           --k-hub-tint: color-mix(in srgb, #6fd0ea 14%, #111a30);           --k-hub-light: color-mix(in srgb, #6fd0ea 42%, #111a30);
    --k-on-app: #111a30;
    --k-on-app-btn-bg: #111a30;
    --k-on-app-btn-fg: #eef2f8;

    --k-shadow-sm: 0 0 0 1px rgba(238, 242, 248, 0.08), 0 1px 2px rgba(0, 0, 0, 0.4);
    --k-shadow-md: 0 0 0 1px rgba(238, 242, 248, 0.10), 0 6px 16px rgba(0, 0, 0, 0.45);
    --k-shadow-lg: 0 0 0 1px rgba(238, 242, 248, 0.12), 0 18px 44px rgba(0, 0, 0, 0.55);
  }
}

/* ════════════════════════════════════════════════════════════════════════
   4. App themes — data-app on <html> (or any subtree) picks the accent set.
   The "[data-app] [data-theme]" selectors re-resolve the set inside a nested theme scope.
   hub / evan / settings / today use the Ocean set.
   ════════════════════════════════════════════════════════════════════════ */
:root,
[data-theme],
[data-app="hub"], [data-app="hub"] [data-theme], [data-app="hub"][data-theme][data-theme],
[data-app="evan"], [data-app="evan"] [data-theme], [data-app="evan"][data-theme][data-theme],
[data-app="settings"], [data-app="settings"] [data-theme], [data-app="settings"][data-theme][data-theme],
[data-app="today"], [data-app="today"] [data-theme], [data-app="today"][data-theme][data-theme] {
  --k-app: var(--k-hub); --k-app-deep: var(--k-hub-deep); --k-app-tint: var(--k-hub-tint); --k-app-light: var(--k-hub-light);
}
[data-app="nutrition"], [data-app="nutrition"] [data-theme], [data-app="nutrition"][data-theme][data-theme] {
  --k-app: var(--k-nutrition); --k-app-deep: var(--k-nutrition-deep); --k-app-tint: var(--k-nutrition-tint); --k-app-light: var(--k-nutrition-light);
}
[data-app="fitness"], [data-app="fitness"] [data-theme], [data-app="fitness"][data-theme][data-theme] {
  --k-app: var(--k-fitness); --k-app-deep: var(--k-fitness-deep); --k-app-tint: var(--k-fitness-tint); --k-app-light: var(--k-fitness-light);
}
[data-app="mind"], [data-app="mind"] [data-theme], [data-app="mind"][data-theme][data-theme] {
  --k-app: var(--k-mind); --k-app-deep: var(--k-mind-deep); --k-app-tint: var(--k-mind-tint); --k-app-light: var(--k-mind-light);
}
[data-app="sleep"], [data-app="sleep"] [data-theme], [data-app="sleep"][data-theme][data-theme] {
  --k-app: var(--k-sleep); --k-app-deep: var(--k-sleep-deep); --k-app-tint: var(--k-sleep-tint); --k-app-light: var(--k-sleep-light);
}
[data-app="money"], [data-app="money"] [data-theme], [data-app="money"][data-theme][data-theme] {
  --k-app: var(--k-money); --k-app-deep: var(--k-money-deep); --k-app-tint: var(--k-money-tint); --k-app-light: var(--k-money-light);
}
[data-app="relationships"], [data-app="relationships"] [data-theme], [data-app="relationships"][data-theme][data-theme] {
  --k-app: var(--k-relationships); --k-app-deep: var(--k-relationships-deep); --k-app-tint: var(--k-relationships-tint); --k-app-light: var(--k-relationships-light);
}
[data-app="productivity"], [data-app="productivity"] [data-theme], [data-app="productivity"][data-theme][data-theme] {
  --k-app: var(--k-productivity); --k-app-deep: var(--k-productivity-deep); --k-app-tint: var(--k-productivity-tint); --k-app-light: var(--k-productivity-light);
}
[data-app="growth"], [data-app="growth"] [data-theme], [data-app="growth"][data-theme][data-theme] {
  --k-app: var(--k-growth); --k-app-deep: var(--k-growth-deep); --k-app-tint: var(--k-growth-tint); --k-app-light: var(--k-growth-light);
}

/* Tone scopes: put .k-tone-<name> on any component that reads --k-tone-bg/-fg/-edge. */
.k-tone-info    { --k-tone-bg: var(--k-tone-info-bg);    --k-tone-fg: var(--k-tone-info-fg);    --k-tone-edge: var(--k-tone-info-edge); }
.k-tone-money   { --k-tone-bg: var(--k-tone-money-bg);   --k-tone-fg: var(--k-tone-money-fg);   --k-tone-edge: var(--k-tone-money-edge); }
.k-tone-safety  { --k-tone-bg: var(--k-tone-safety-bg);  --k-tone-fg: var(--k-tone-safety-fg);  --k-tone-edge: var(--k-tone-safety-edge); }
.k-tone-success { --k-tone-bg: var(--k-tone-success-bg); --k-tone-fg: var(--k-tone-success-fg); --k-tone-edge: var(--k-tone-success-edge); }
.k-tone-warn    { --k-tone-bg: var(--k-tone-warn-bg);    --k-tone-fg: var(--k-tone-warn-fg);    --k-tone-edge: var(--k-tone-warn-edge); }
.k-tone-neutral { --k-tone-bg: var(--k-tone-neutral-bg); --k-tone-fg: var(--k-tone-neutral-fg); --k-tone-edge: var(--k-tone-neutral-edge); }
.k-tone-ink     { --k-tone-bg: var(--k-tone-ink-bg);     --k-tone-fg: var(--k-tone-ink-fg);     --k-tone-edge: var(--k-tone-ink-edge); }
.k-tone-outline { --k-tone-bg: var(--k-tone-outline-bg); --k-tone-fg: var(--k-tone-outline-fg); --k-tone-edge: var(--k-tone-outline-edge); }
.k-tone-app     { --k-tone-bg: var(--k-app-tint);        --k-tone-fg: var(--k-text);            --k-tone-edge: var(--k-app); }

/* ════════════════════════════════════════════════════════════════════════
   5. Base
   ════════════════════════════════════════════════════════════════════════ */
/* Every bare-element rule below is wrapped in :where() (specificity 0,0,0) so any class rule in an app's
   own stylesheet wins during migration, e.g. an app's `.btn-primary { color: #fff }` on an <a> keeps its
   label on hover. Only k- component rules carry real specificity. */
*, *::before, *::after { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(body) {
  margin: 0;
  font-family: var(--k-font);
  font-size: var(--k-fs-15);
  line-height: 1.55;
  font-weight: 400;
  color: var(--k-text);
  background: var(--k-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--k-font);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--k-space-2);
  color: inherit;
}
:where(h1) { font-size: var(--k-fs-40); letter-spacing: var(--k-tracking-h1); line-height: 1.1; }
:where(h2) { font-size: var(--k-fs-28); letter-spacing: var(--k-tracking-h2); line-height: 1.15; }
:where(h3) { font-size: var(--k-fs-20); line-height: 1.2; }
:where(h4) { font-size: var(--k-fs-17); line-height: 1.25; }
:where(h5) { font-size: var(--k-fs-15); }
:where(h6) { font-size: var(--k-fs-11); font-weight: 600; letter-spacing: var(--k-tracking-label); text-transform: uppercase; }
:where(p) { margin: 0 0 var(--k-space-3); }
:where(b, strong) { font-weight: 800; }
:where(small) { font-size: var(--k-fs-13); }
:where(a) { color: var(--k-link); text-underline-offset: 3px; }
:where(a:hover) { color: var(--k-link-hover); }
:where(img, svg, video) { max-width: 100%; }
:where(figure) { margin: 0; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(:focus) { outline: none; }
:where(:focus-visible) { outline: 2px solid var(--k-focus); outline-offset: var(--k-focus-offset); }
::selection { background: color-mix(in srgb, var(--k-primary) 30%, transparent); }
:where([hidden]) { display: none !important; }
/* Fade the outermost disabled element only: a <fieldset disabled> fades once, its controls don't compound. */
:where(:disabled, [aria-disabled="true"]):where(:not(:disabled *, [aria-disabled="true"] *)) { opacity: 0.45; cursor: not-allowed; }

/* Utilities */
.k-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.k-skip {
  position: absolute; left: var(--k-space-2); top: -60px; z-index: 2000;
  padding: var(--k-space-2) var(--k-space-3); background: var(--k-text); color: var(--k-bg);
  font-weight: 600; text-decoration: none;
}
.k-skip:focus { top: var(--k-space-2); }
.k-muted { color: var(--k-muted); }
.k-secondary { color: var(--k-text-2); }
.k-small { font-size: var(--k-fs-13); }
.k-label-caps {
  font-size: var(--k-fs-11); font-weight: 600; letter-spacing: var(--k-tracking-label);
  text-transform: uppercase; color: var(--k-muted);
}
.k-display { font-weight: 800; font-size: var(--k-fs-display); line-height: 1; letter-spacing: var(--k-tracking-display); }
.k-grayscale { filter: grayscale(1) contrast(1.08); }
.k-nowrap { white-space: nowrap; }
.k-stack { display: flex; flex-direction: column; gap: var(--k-space-3); }
.k-row-flex { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-space-3); }
.k-lock { overflow: hidden; }

/* ════════════════════════════════════════════════════════════════════════
   6. Identity — symbol, wordmark, lockups (Keel System 1b)
   ════════════════════════════════════════════════════════════════════════ */
.k-mark {
  display: inline-block; flex: none; width: 30px; height: 30px;
  border-radius: var(--k-round); overflow: hidden; background: var(--k-mark-ground);
}
.k-mark img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.42); }
.k-mark--20 { width: 20px; height: 20px; }
.k-mark--26 { width: 26px; height: 26px; }
.k-mark--32 { width: 32px; height: 32px; }
.k-mark--38 { width: 38px; height: 38px; }
.k-mark--56 { width: 56px; height: 56px; }
.k-wordmark { font-weight: 800; font-size: 19px; line-height: 1; letter-spacing: -0.03em; }
.k-lockup { display: inline-flex; align-items: center; gap: var(--k-space-2); color: inherit; text-decoration: none; }
.k-lockup:hover { color: inherit; }
.k-lockup--lg { gap: var(--k-space-3); }
.k-lockup--lg .k-wordmark { font-size: var(--k-fs-44); letter-spacing: -0.04em; }
.k-lockup--md .k-wordmark { font-size: 21px; }
.k-lockup--sm .k-wordmark { font-size: 16px; }
.k-rule-v { width: 2px; height: 20px; background: var(--k-divider); flex: none; }

/* Dots, glyphs, avatars */
.k-dot {
  display: inline-block; flex: none; width: 8px; height: 8px;
  border-radius: var(--k-round); background: var(--k-c, var(--k-app));
}
.k-dot--6 { width: 6px; height: 6px; }
.k-dot--7 { width: 7px; height: 7px; }
.k-dot--10 { width: 10px; height: 10px; }
.k-glyph { display: inline-flex; flex: none; color: var(--k-app-deep); }
.k-glyph svg { display: block; }
.k-glyph .k-dot { margin: 0 3px; background: var(--k-app); }
.k-avatar {
  display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px;
  border-radius: var(--k-round); background: var(--k-c, var(--k-text)); color: var(--k-bg);
  font-size: var(--k-fs-12); font-weight: 600; line-height: 1; text-decoration: none;
}
a.k-avatar:hover { color: var(--k-bg); }
.k-avatar--sm { width: 30px; height: 30px; font-size: var(--k-fs-11); }
.k-avatar--lg { width: 44px; height: 44px; font-size: var(--k-fs-14); }
.k-avatar--app { --k-c: var(--k-app-deep); color: var(--k-on-app); }
.k-kbd {
  display: inline-block; font-family: var(--k-font); font-size: var(--k-fs-11); font-weight: 400;
  line-height: 1.2; border: 1px solid var(--k-divider); padding: 1px 5px; color: inherit;
  background: transparent; white-space: nowrap;
}
.k-hr { height: 2px; border: 0; margin: var(--k-space-4) 0; background: var(--k-divider); }
.k-hr--thin { height: 1px; }

/* ════════════════════════════════════════════════════════════════════════
   7. Buttons — labels flush left; hover/pressed from the ramps
   ════════════════════════════════════════════════════════════════════════ */
.k-btn {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px;
  min-width: 0; cursor: pointer; text-decoration: none; text-align: left;
  font-family: var(--k-font); font-weight: 800; font-size: var(--k-fs-14); line-height: 1.2;
  color: var(--k-text); background: transparent;
  border: 1px solid transparent; border-radius: var(--k-radius);
  padding: var(--k-space-2) 14.4px;
  transition: background-color var(--k-ease), border-color var(--k-ease), color var(--k-ease);
  -webkit-tap-highlight-color: transparent;
}
.k-btn:hover { color: var(--k-text); }
.k-btn svg { display: block; flex: none; }
.k-btn:disabled, .k-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.k-btn .k-btn-trail, .k-btn-trail { margin-left: auto; font-weight: 800; }

.k-btn-primary { background: var(--k-primary); color: var(--k-on-primary); }
.k-btn-primary:hover { background: var(--k-primary-hover); color: var(--k-on-primary); }
.k-btn-primary:active { background: var(--k-primary-active); }

.k-btn-secondary { border-color: var(--k-divider); }
.k-btn-secondary:hover { background: var(--k-hover-wash); }
.k-btn-secondary:active { background: var(--k-press-wash); }

.k-btn-ghost { color: var(--k-link-strong); padding-inline: var(--k-space-1); }
.k-btn-ghost:hover { color: var(--k-link-strong); background: color-mix(in srgb, var(--k-primary) 10%, transparent); }
.k-btn-ghost:active { background: color-mix(in srgb, var(--k-primary) 18%, transparent); }

.k-btn-danger { background: var(--k-error); color: var(--k-on-status); }
.k-btn-danger:hover { background: color-mix(in srgb, var(--k-error) 86%, #000); color: var(--k-on-status); }
.k-btn-danger:active { background: color-mix(in srgb, var(--k-error) 74%, #000); }
.k-btn-danger-quiet { color: var(--k-error); border-color: var(--k-error); }
.k-btn-danger-quiet:hover { color: var(--k-error); background: color-mix(in srgb, var(--k-error) 8%, transparent); }
.k-btn-danger-quiet:active { background: color-mix(in srgb, var(--k-error) 16%, transparent); }
.k-btn-ghost.k-btn-danger-quiet { border-color: transparent; }

/* The yellow membership CTA (Keel Public hero). Ink label on #FFC845. */
.k-btn-cta { background: var(--k-cta); color: #172340; }
.k-btn-cta:hover { background: var(--k-cta-hover); color: #172340; }
.k-btn-cta:active { background: #f2b92c; }

/* On dark/ink/app-deep grounds */
.k-btn-inverse { background: #f8f6f1; color: #172340; }
.k-btn-inverse:hover { background: #ffffff; color: #172340; }
.k-btn-outline-inverse { border-color: rgba(248, 246, 241, 0.4); color: #f8f6f1; }
.k-btn-outline-inverse:hover { background: rgba(248, 246, 241, 0.12); color: #f8f6f1; }
.k-btn-ink { background: var(--k-text); color: var(--k-bg); }
.k-btn-ink:hover { background: color-mix(in srgb, var(--k-text) 88%, var(--k-bg)); color: var(--k-bg); }
.k-btn-current { color: inherit; border-color: currentColor; }
.k-btn-current:hover { color: inherit; background: color-mix(in srgb, currentColor 8%, transparent); }

.k-btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; }
.k-btn-icon.k-btn-lg { width: 44px; min-height: 44px; height: 44px; }
.k-btn-block { display: flex; width: 100%; }
.k-btn-sm { font-size: var(--k-fs-12-5); min-height: 36px; }
.k-btn-md { min-height: 40px; }
.k-btn-lg { min-height: 44px; }
.k-btn-xl { min-height: 48px; }
.k-btn-hero { min-height: 52px; padding: 0 20px; font-size: 16px; white-space: nowrap; }
/* Keel Public 1a hero pair: the yellow CTA keeps its arrow at the right edge; the outline twin is solid white. */
.k-btn-hero.k-btn-cta { min-width: 280px; }
.k-btn-hero.k-btn-outline-inverse { border-color: #ffffff; color: #ffffff; }
.k-btn-hero.k-btn-outline-inverse:hover { background: var(--k-hero-hover); color: #ffffff; }
.k-btn-wide { min-width: 160px; }
.k-btn-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ════════════════════════════════════════════════════════════════════════
   8. Tags & status chips
   ════════════════════════════════════════════════════════════════════════ */
.k-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--k-fs-11); line-height: 1.55; letter-spacing: 0.02em; font-weight: 400;
  padding: 3px 10px; border-radius: var(--k-radius); white-space: nowrap;
  background: var(--k-tone-bg, var(--k-tone-neutral-bg)); color: var(--k-tone-fg, var(--k-tone-neutral-fg));
  border: 0;
}
/* In column stacks (cards, states) a tag hugs its label; in rows (list, table) it centres. */
.k-card .k-tag, .k-state .k-tag, .k-state-inner .k-tag { align-self: flex-start; }
.k-tag.k-tone-outline { border: 1px solid var(--k-tone-edge); padding: 2px 9px; }
.k-tag--app { background: var(--k-app-tint); color: var(--k-text); }
.k-tag.k-tone-outline.k-tag--primary { --k-tone-fg: var(--k-link-strong); --k-tone-edge: var(--k-primary); }
.k-tag--sm { font-size: 10px; padding: 1px 6px; }
.k-tag-dot::before {
  content: ""; width: 6px; height: 6px; flex: none; border-radius: var(--k-round);
  background: var(--k-tone-edge, var(--k-tone-neutral-edge));
}

/* ════════════════════════════════════════════════════════════════════════
   9. Forms
   ════════════════════════════════════════════════════════════════════════ */
.k-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.k-field { min-inline-size: 0; }
.k-label {
  display: block; padding: 0; font-size: var(--k-fs-12-5); font-weight: 600; line-height: 1.55;
  color: var(--k-text-2);
}
legend.k-label { margin: 0; float: left; width: 100%; }
legend.k-label + * { clear: both; }
.k-input, .k-select, .k-textarea {
  display: block; width: 100%; min-height: 44px; margin: 0;
  padding: 6px 10px; font-family: var(--k-font); font-size: var(--k-fs-14); line-height: 1.55;
  color: var(--k-text); caret-color: var(--k-primary);
  background: var(--k-raised); border: 1px solid var(--k-divider); border-radius: var(--k-radius);
  transition: border-color var(--k-ease);
}
.k-input::placeholder, .k-textarea::placeholder { color: var(--k-muted); opacity: 1; }
.k-input:hover, .k-select:hover, .k-textarea:hover { border-color: color-mix(in srgb, var(--k-text) 45%, transparent); }
.k-input:focus-visible, .k-select:focus-visible, .k-textarea:focus-visible { border-color: var(--k-focus); outline-offset: 0; }
.k-input--soft { background: var(--k-surface); }
.k-input--sm { min-height: 36px; }
.k-textarea { min-height: 120px; font-size: var(--k-fs-15); line-height: 1.55; resize: vertical; }
.k-select {
  appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  /* the design's small filled ▾ (KeelPage select), 7×5 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5' viewBox='0 0 7 5'%3E%3Cpath d='M0 0h7L3.5 5z' fill='%23172340'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 7px 5px;
}
[data-theme="dark"] .k-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5' viewBox='0 0 7 5'%3E%3Cpath d='M0 0h7L3.5 5z' fill='%23eef2f8'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .k-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5' viewBox='0 0 7 5'%3E%3Cpath d='M0 0h7L3.5 5z' fill='%23eef2f8'/%3E%3C/svg%3E");
  }
  [data-theme="system"] [data-theme="light"] .k-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5' viewBox='0 0 7 5'%3E%3Cpath d='M0 0h7L3.5 5z' fill='%23172340'/%3E%3C/svg%3E");
  }
}
[data-theme="dark"] [data-theme="light"] .k-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5' viewBox='0 0 7 5'%3E%3Cpath d='M0 0h7L3.5 5z' fill='%23172340'/%3E%3C/svg%3E");
}
.k-help { font-size: var(--k-fs-12); line-height: 1.55; color: var(--k-muted); }
.k-error { font-size: var(--k-fs-12); line-height: 1.55; color: var(--k-error); }
.k-field.k-is-error .k-label, .k-field.k-is-error > label { color: var(--k-error); }
.k-field.k-is-error .k-input, .k-field.k-is-error .k-select, .k-field.k-is-error .k-textarea,
.k-input[aria-invalid="true"], .k-select[aria-invalid="true"], .k-textarea[aria-invalid="true"] {
  border: 2px solid var(--k-error); padding: 5px 9px;
}

/* Segmented control — radio inputs inside labels */
.k-seg {
  display: inline-flex; flex-wrap: wrap; align-self: flex-start; max-width: 100%;
  border: 1px solid var(--k-divider); border-radius: var(--k-radius);
}
.k-seg-opt {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 7px 12px; font-size: var(--k-fs-13); line-height: 1.55;
  cursor: pointer; white-space: nowrap; color: var(--k-text);
  transition: background-color var(--k-ease);
}
.k-seg-opt + .k-seg-opt { border-left: 1px solid var(--k-divider); }
.k-seg-opt input, .k-chip input, .k-switch input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.k-seg-opt:has(input:checked), .k-seg-opt[aria-checked="true"] { background: var(--k-app-deep); color: var(--k-on-app); }
.k-seg-opt:not(:has(input:checked)):not([aria-checked="true"]):hover { background: var(--k-hover-wash); }
.k-seg-opt:has(input:focus-visible) { outline: 2px solid var(--k-focus); outline-offset: -2px; z-index: 1; }
/* The focused option is nearly always the checked one, filled with app-deep (Ocean in the hub) — an inset
   Ocean ring would vanish. Ring it outside in --k-focus and keep a contrasting inner edge. */
.k-seg-opt:has(input:checked:focus-visible) { outline-offset: 2px; box-shadow: inset 0 0 0 2px currentColor; }
.k-seg-opt:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.k-seg--sm .k-seg-opt { min-height: 36px; }
.k-seg--ocean .k-seg-opt:has(input:checked) { background: var(--k-primary); color: var(--k-on-primary); }

/* Switch — checkbox inside a label */
.k-switch {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-height: 36px; font-size: var(--k-fs-14); cursor: pointer; color: var(--k-text);
}
.k-switch-track {
  position: relative; flex: none; width: 40px; height: 22px; background: var(--k-toggle-off);
  transition: background-color var(--k-ease);
}
.k-switch-track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  background: #f8f6f1; transition: left var(--k-ease);
}
.k-switch input:checked + .k-switch-track,
.k-switch[aria-checked="true"] .k-switch-track { background: var(--k-primary); }
.k-switch input:checked + .k-switch-track::after,
.k-switch[aria-checked="true"] .k-switch-track::after { left: 21px; }
.k-switch input:focus-visible + .k-switch-track { outline: 2px solid var(--k-focus); outline-offset: 2px; }
.k-switch:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
button.k-switch { background: transparent; border: 0; padding: 0; text-align: left; }

/* Chips — <button aria-pressed> or a checkbox inside a label */
.k-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.k-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  padding: 8px 14px; font-family: var(--k-font); font-size: var(--k-fs-13-5); font-weight: 400; line-height: 1.55;
  color: var(--k-text); background: transparent; border: 1px solid var(--k-divider);
  border-radius: var(--k-radius); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--k-ease);
}
.k-chip:hover { color: var(--k-text); background: var(--k-hover-wash); }
.k-chip[aria-pressed="true"], .k-chip[aria-current], .k-chip:has(input:checked) {
  background: var(--k-app-deep); border-color: var(--k-app-deep); color: var(--k-on-app);
}
.k-chip:has(input:focus-visible) { outline: 2px solid var(--k-focus); outline-offset: 2px; }
.k-chip--sm { min-height: 36px; padding: 7px 12px; font-size: var(--k-fs-13); }

/* Range — native input; --k-w (0–100) drives the filled part of the track */
.k-range {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 20px;
  margin: 1px 0 0; background: transparent; cursor: pointer; --k-w: 50%;
}
.k-range::-webkit-slider-runnable-track {
  height: 6px; background: linear-gradient(to right, var(--k-primary) 0 var(--k-w), var(--k-track) var(--k-w) 100%);
}
.k-range::-moz-range-track { height: 6px; background: var(--k-track); }
.k-range::-moz-range-progress { height: 6px; background: var(--k-primary); }
.k-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px;
  background: var(--k-text); border: 0; border-radius: 0;
}
.k-range::-moz-range-thumb { width: 20px; height: 20px; background: var(--k-text); border: 0; border-radius: 0; }
.k-range:focus-visible { outline: none; }
.k-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--k-focus); outline-offset: 2px; }
.k-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--k-focus); outline-offset: 2px; }
.k-range-value { font-size: var(--k-fs-13); font-weight: 600; }

/* Check — square 22px check used in list rows */
.k-check {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0;
  border: 2px solid var(--k-muted); background: transparent; color: var(--k-bg);
  font-size: var(--k-fs-13); line-height: 1; cursor: pointer; border-radius: var(--k-radius);
}
.k-check[aria-checked="true"] { border-color: var(--k-success); background: var(--k-success); }
.k-check[aria-checked="true"]::after { content: "✓"; }
span.k-check { cursor: default; }
button.k-check { position: relative; }
button.k-check::before { content: ""; position: absolute; inset: -13px; } /* 18px padding box + 2×13 = 44 */

/* ════════════════════════════════════════════════════════════════════════
   10. Cards, tables, dialogs (Keel System 1f)
   ════════════════════════════════════════════════════════════════════════ */
.k-card {
  display: flex; flex-direction: column; gap: var(--k-space-2); min-width: 0;
  padding: var(--k-space-4); background: var(--k-raised); color: inherit;
  border-top: 2px solid var(--k-divider-strong); border-radius: var(--k-radius); text-decoration: none;
}
.k-card--app { border-top-color: var(--k-app); }
.k-card--flat { border-top: 0; }
a.k-card, button.k-card {
  font: inherit; text-align: left; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer;
  transition: background-color var(--k-ease);
}
a.k-card:hover, button.k-card:hover { color: inherit; background: var(--k-app-tint); }
.k-card.k-is-selected, .k-card[aria-current], .k-card[aria-pressed="true"] { background: var(--k-app-tint); border-top-color: var(--k-app-deep); }
.k-card-kicker {
  display: flex; align-items: center; gap: 6px; font-size: var(--k-fs-11); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--k-muted);
}
.k-card-title { font-weight: 800; font-size: var(--k-fs-17); line-height: 1.25; }
.k-card-body { margin: 0; font-size: var(--k-fs-13-5); line-height: 1.55; color: var(--k-text-2); text-wrap: pretty; }
.k-card-meta { font-size: var(--k-fs-12-5); color: var(--k-muted); margin-top: auto; }
.k-progress { position: relative; display: block; height: 6px; margin-top: 4px; background: var(--k-track); }
.k-progress > span {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--k-w, 0%); background: var(--k-c, var(--k-app));
}
.k-elev-sm { box-shadow: var(--k-shadow-sm); }
.k-elev-md { box-shadow: var(--k-shadow-md); }
.k-elev-lg { box-shadow: var(--k-shadow-lg); }

.k-table-wrap { overflow-x: auto; max-width: 100%; }
.k-table { width: 100%; border-collapse: collapse; font-size: var(--k-fs-13-5); }
.k-table th {
  text-align: left; font-size: var(--k-fs-11); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  /* Deliberate deviation: the design's 60% ink mix is 4.0–4.1:1 on Shell and the app tints; 72% clears 4.5:1. */
  white-space: nowrap; color: color-mix(in srgb, var(--k-text) 72%, transparent);
  padding: var(--k-space-2); border-bottom: 2px solid var(--k-divider); vertical-align: bottom;
}
.k-table td { padding: var(--k-space-2); border-bottom: 1px solid var(--k-divider); vertical-align: middle; color: var(--k-c, inherit); }
.k-table tbody tr:hover { background: var(--k-row-wash); }
.k-table td:first-child, .k-table .k-strong { font-weight: 600; }
.k-table .k-num, .k-table .k-right { text-align: right; }
.k-table .k-tag { vertical-align: middle; }

.k-dialog-backdrop {
  position: fixed; inset: 0; z-index: 900; display: grid; place-items: center;
  padding: var(--k-space-4); background: var(--k-scrim);
}
.k-dialog-backdrop--inline { position: relative; inset: auto; z-index: auto; padding: var(--k-space-6); }
.k-dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--k-space-3);
  margin: auto; padding: var(--k-space-4); border: 0; border-radius: var(--k-radius);
  background: var(--k-raised); color: var(--k-text); box-shadow: var(--k-shadow-lg);
}
dialog.k-dialog { max-height: calc(100vh - 32px); overflow: auto; }
/* Dialogs sit in the top layer, outside any .k-page, so they answer their own width (see the k-dialog query below). */
.k-dialog { container: k-dialog / inline-size; }
.k-dialog-form { display: contents; }
dialog.k-dialog:not([open]) { display: none; }
dialog.k-dialog::backdrop { background: var(--k-scrim); }
.k-dialog--wide { width: min(640px, 100%); }
.k-dialog-backdrop--inline .k-dialog { width: 100%; }
.k-dialog-title { margin: 0; font-weight: 800; font-size: var(--k-fs-20); line-height: 1.2; letter-spacing: -0.015em; }
.k-dialog-body { margin: 0; font-size: var(--k-fs-14); line-height: 1.55; color: color-mix(in srgb, var(--k-text) 85%, transparent); }
.k-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--k-space-2); margin-top: var(--k-space-2); }

/* ════════════════════════════════════════════════════════════════════════
   11. Shell — KeelBar
   ════════════════════════════════════════════════════════════════════════ */
.k-bar {
  container: k-bar / inline-size;
  position: relative; z-index: 50;
  display: block; background: var(--k-bg); color: var(--k-text); font-family: var(--k-font);
  border-top: 4px solid var(--k-app); border-bottom: 2px solid var(--k-divider);
}
.k-bar-row {
  display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 60px; padding: 12px 24px;
}
.k-bar-brand { display: flex; align-items: center; gap: 8px; flex: none; color: inherit; text-decoration: none; }
.k-bar-brand:hover { color: inherit; }
.k-bar-brand .k-mark { width: 30px; height: 30px; }
.k-bar-sep { width: 2px; height: 20px; background: var(--k-divider); flex: none; }
.k-bar-app {
  display: flex; align-items: center; gap: 7px; flex: 0 1 auto; min-width: 0;
  font-size: var(--k-fs-14); font-weight: 600; line-height: 1.2; white-space: nowrap; color: var(--k-text);
}
.k-bar-app-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-bar-spacer { flex: 1; min-width: 0; }
.k-bar-search {
  flex: 0 1 250px; min-width: 44px; flex-shrink: 50; overflow: hidden; white-space: nowrap;
  gap: 12px; color: var(--k-muted); font-weight: 400;
}
.k-bar-search:hover { color: var(--k-muted); }
.k-bar-search-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.k-bar-search .k-kbd { margin-left: auto; }
.k-bar-search-icon { width: 40px; height: 40px; flex: none; display: none; }
.k-bar-avatar { flex: none; }
.k-bar-btn { flex: none; white-space: nowrap; }
.k-bar-unread { width: 7px; height: 7px; border-radius: var(--k-round); background: var(--k-primary); flex: none; }
.k-bar-anchor { position: relative; flex: none; display: flex; }
.k-bar-avatar { position: relative; }
.k-bar-avatar::after { content: ""; position: absolute; inset: -5px; border-radius: var(--k-round); }

.k-tabs {
  display: flex; gap: 22px; padding: 0 24px; overflow-x: auto; scrollbar-width: thin;
  background: var(--k-app-tint); border-top: 1px solid var(--k-divider);
  -webkit-overflow-scrolling: touch;
}
.k-tab {
  flex: none; padding: 11px 0 9px; font-size: var(--k-fs-13-5); line-height: 1.55; color: var(--k-muted);
  text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent;
}
.k-tab:hover { color: var(--k-text); border-bottom-color: var(--k-divider); }
.k-tab[aria-current="page"] { font-weight: 600; color: var(--k-text); border-bottom-color: var(--k-app-deep); }
.k-tab:focus-visible { outline-offset: -2px; }
.k-tab--planned { font-style: normal; }

/* display: contents makes Search/Apps/Alerts/Ask Evan items of .k-bar-row itself, so the search
   button's 250px basis takes effect (a flex wrapper would shrink-wrap it to its label). */
.k-bar-desktop { display: contents; }

/* Mobile bar (Keel Suite 1b, Money 1k): search becomes an icon; Apps/Alerts/Ask Evan move to the
   palette and the hub bottom nav. "auto" follows the bar's own width; --mobile forces it. */
@container k-bar (max-width: 720px) {
  .k-bar-desktop { display: none; }
  .k-bar-search-icon { display: inline-flex; }
}
/* Small phones (360px Android): tighten the gutter so long app names keep the 40px search target;
   below that the app name ellipsizes rather than squeezing the controls. */
@container k-bar (max-width: 380px) {
  .k-bar-row { gap: 8px; padding-inline: 16px; }
  .k-tabs { padding-inline: 16px; }
}
.k-bar--mobile .k-bar-desktop { display: none; }
.k-bar--mobile .k-bar-search-icon { display: inline-flex; }
.k-bar--desktop .k-bar-desktop { display: contents; }
.k-bar--desktop .k-bar-search-icon { display: none; }

/* Public site header & footer (Keel Public 1a / 1b / 1e) */
.k-pubnav {
  container: k-pubnav / inline-size;
  display: block; background: var(--k-bg); border-bottom: 2px solid var(--k-divider);
}
.k-pubnav-row { display: flex; align-items: center; gap: 28px; padding: 16px 48px; }
.k-pubnav .k-lockup .k-mark { width: 32px; height: 32px; }
.k-pubnav .k-lockup .k-wordmark { font-size: 21px; }
.k-pubnav-links { display: flex; gap: 24px; margin-right: auto; font-size: var(--k-fs-14); }
.k-pubnav-links a { color: var(--k-text); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.k-pubnav-links a:hover { border-bottom-color: var(--k-divider); }
.k-pubnav-links a[aria-current="page"] { font-weight: 600; border-bottom-color: var(--k-text); }
.k-pubnav-actions { display: flex; align-items: center; gap: 10px; }
.k-pubnav-menu { display: none; }
@container k-pubnav (max-width: 720px) {
  .k-pubnav-row { gap: 10px; padding: 12px 16px; }
  .k-pubnav-links { display: none; }
  .k-pubnav .k-lockup { margin-right: auto; }
  .k-pubnav .k-lockup .k-mark { width: 30px; height: 30px; }
  .k-pubnav .k-lockup .k-wordmark { font-size: 19px; }
  .k-pubnav-actions .k-btn-primary { display: none; }
  .k-pubnav-actions .k-btn { min-height: 44px; }
  .k-pubnav-menu { display: inline-flex; }
}
.k-footer {
  container: k-footer / inline-size;
  display: block; background: var(--k-bg); color: var(--k-text); font-size: var(--k-fs-13);
}
.k-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; padding: 36px 48px; }
.k-footer-col { display: flex; flex-direction: column; gap: 6px; }
.k-footer-col a { color: var(--k-text); }
.k-footer-brand { display: flex; flex-direction: column; gap: 10px; }
.k-footer-brand .k-wordmark { font-size: 17px; }
.k-footer-note { color: var(--k-muted); max-width: 340px; }
@container k-footer (max-width: 720px) {
  .k-footer-grid { grid-template-columns: 1fr 1fr; padding: 28px 16px; }
  .k-footer-brand { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════════════════════
   12. Overlays — apps popover, notifications panel, command palette
   ════════════════════════════════════════════════════════════════════════ */
.k-popover {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: min(440px, calc(100vw - 32px)); background: var(--k-raised); color: var(--k-text);
  box-shadow: var(--k-shadow-md); border: 1px solid var(--k-divider);
}
.k-popover--static, .k-panel--static { position: relative; top: auto; right: auto; z-index: auto; }
.k-popover-head {
  display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 12px;
  border-bottom: 2px solid var(--k-divider);
}
.k-popover-title { margin: 0; font-size: var(--k-fs-17); font-weight: 800; letter-spacing: -0.015em; }
.k-popover-sub { font-size: var(--k-fs-12); color: var(--k-muted); }
.k-launcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-launcher-tile {
  display: flex; flex-direction: column; gap: 4px; min-height: 64px; padding: 12px 14px;
  background: var(--k-app-tint); border-top: 3px solid var(--k-app);
  border-right: 1px solid var(--k-divider); border-bottom: 1px solid var(--k-divider);
  color: var(--k-text); text-decoration: none;
}
.k-launcher-tile:nth-child(2n) { border-right: 0; }
.k-launcher-tile:hover { background: var(--k-raised); color: var(--k-text); }
.k-launcher-tile:focus-visible { outline-offset: -2px; }
.k-launcher-name { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: var(--k-fs-15); line-height: 1.1; }
.k-launcher-name::after { content: "→"; margin-left: auto; font-weight: 400; }
.k-launcher-sub { font-size: var(--k-fs-12); color: var(--k-muted); }
.k-launcher-tile[aria-current="page"] { background: var(--k-raised); }
.k-launcher-tile[aria-current="page"] .k-launcher-sub::after { content: " · you are here"; }
.k-launcher-hub { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 12px 16px; font-size: var(--k-fs-13-5); }
.k-launcher-hub a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--k-text); text-decoration: none; }
.k-launcher-hub a:hover { text-decoration: underline; }

.k-panel {
  width: min(400px, calc(100vw - 32px)); background: var(--k-raised); color: var(--k-text);
  box-shadow: var(--k-shadow-md);
}
.k-panel--pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; border: 1px solid var(--k-divider); }
.k-panel-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 2px solid var(--k-divider); }
.k-panel-title { margin: 0 auto 0 0; font-size: var(--k-fs-20); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }
.k-panel-head .k-btn-ghost { font-size: var(--k-fs-13); }
.k-panel-list { list-style: none; margin: 0; padding: 0; max-height: min(60vh, 440px); overflow-y: auto; }
.k-notif {
  display: flex; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--k-divider);
  color: var(--k-text); text-decoration: none;
}
a.k-notif:hover { background: var(--k-row-wash); color: var(--k-text); }
.k-notif.k-is-unread { background: var(--k-primary-tint); }
/* Rows sit inside the panel's scroll box, which would clip an outside ring: draw it inset. */
.k-notif:focus-visible, .k-panel-list a:focus-visible { outline-offset: -2px; }
.k-notif .k-dot { margin-top: 6px; }
.k-notif-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.k-notif-title { font-size: var(--k-fs-14); line-height: 1.55; }
.k-notif.k-is-unread .k-notif-title { font-weight: 600; }
.k-notif-meta { font-size: var(--k-fs-12); color: var(--k-muted); }
.k-panel-foot { padding: 12px 20px; font-size: var(--k-fs-13); }
.k-panel-foot a { color: var(--k-link-strong); }
.k-panel-empty { padding: 24px 20px; font-size: var(--k-fs-14); color: var(--k-muted); }

.k-palette-overlay {
  position: fixed; inset: 0; z-index: 1000; overflow-y: auto;
  padding: max(48px, 10vh) 16px 60px; background: var(--k-scrim-strong);
}
.k-palette-overlay--static { position: relative; inset: auto; z-index: auto; padding: 48px 40px 60px; overflow: visible; }
.k-palette {
  width: 100%; max-width: 560px; margin: 0 auto; background: var(--k-raised); color: var(--k-text);
  box-shadow: var(--k-shadow-lg);
}
.k-palette-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 2px solid var(--k-divider); }
.k-palette-search svg { flex: none; }
.k-palette-input {
  flex: 1; min-width: 0; min-height: 36px; padding: 0; border: 0; background: transparent;
  font-family: var(--k-font); font-size: var(--k-fs-17); color: var(--k-text); caret-color: var(--k-primary);
}
.k-palette-input::placeholder { color: var(--k-muted); opacity: 1; }
.k-palette-input:focus-visible { outline: none; }
.k-palette-search:focus-within { box-shadow: inset 0 -2px 0 var(--k-focus); }
.k-palette-esc { cursor: pointer; min-height: 24px; }
.k-palette-list { max-height: min(340px, 52vh); overflow-y: auto; overscroll-behavior: contain; }
.k-palette-group-label {
  padding: 10px 16px 4px; font-size: var(--k-fs-10-5); letter-spacing: var(--k-tracking-label);
  text-transform: uppercase; color: var(--k-muted);
}
.k-palette-opt {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 10px 16px 10px 13px;
  font-size: var(--k-fs-14); line-height: 1.55; cursor: pointer; border-left: 3px solid transparent;
}
.k-palette-opt[aria-selected="true"] { background: var(--k-primary-tint); border-left-color: var(--k-primary); }
.k-palette-opt .k-dot { width: 7px; height: 7px; }
.k-palette-opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-palette-opt-hint { font-size: var(--k-fs-12); color: var(--k-muted); white-space: nowrap; }
.k-palette-opt-planned { font-size: var(--k-fs-11); color: var(--k-muted); border: 1px solid var(--k-divider); padding: 0 4px; }
.k-palette-empty { padding: 24px 16px; font-size: var(--k-fs-14); color: var(--k-muted); }
.k-palette-foot {
  display: flex; flex-wrap: wrap; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--k-divider);
  font-size: var(--k-fs-11-5); color: var(--k-muted);
}

/* Hub bottom nav (Keel Suite 1b) — shown on phones only unless --static */
.k-bottomnav {
  position: sticky; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--k-bg); border-top: 2px solid var(--k-divider);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.k-bottomnav a {
  display: flex; align-items: flex-start; min-height: 56px; padding: 12px; font-size: var(--k-fs-12);
  color: var(--k-muted); text-decoration: none; border-top: 3px solid transparent; margin-top: -2px;
}
.k-bottomnav a:hover { color: var(--k-text); }
.k-bottomnav a[aria-current="page"] { font-weight: 600; color: var(--k-text); border-top-color: var(--k-text); }
.k-bottomnav a:focus-visible { outline-offset: -2px; }
@media (min-width: 721px) { .k-bottomnav:not(.k-bottomnav--static) { display: none; } }
.k-bottomnav--static { position: relative; }

/* ════════════════════════════════════════════════════════════════════════
   13. Page — banner, header, 12-column block grid (KeelPage)
   ════════════════════════════════════════════════════════════════════════ */
.k-page {
  container: k-page / inline-size;
  display: block; background: var(--k-bg); color: var(--k-text); font-family: var(--k-font);
  overflow-x: clip; /* the grid's -1px right edge hides the last column rule */
}
.k-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 32px;
  background: var(--k-tone-bg, var(--k-tone-neutral-bg)); color: var(--k-tone-fg, var(--k-tone-neutral-fg));
  border-bottom: 2px solid var(--k-divider); font-size: var(--k-fs-13-5); line-height: 1.55;
}
.k-banner-title { font-weight: 800; }
.k-banner.k-tone-ink, .k-on-dark { --k-focus: #f8f6f1; }
[data-theme="dark"] .k-banner.k-tone-ink { --k-focus: var(--k-ocean-500); }
@media (prefers-color-scheme: dark) { [data-theme="system"] .k-banner.k-tone-ink { --k-focus: var(--k-ocean-500); } }
.k-banner-action {
  margin-left: auto; min-height: 40px; white-space: nowrap;
  background: var(--k-tone-ink-bg); color: var(--k-tone-ink-fg);
}
.k-banner-action:hover { background: color-mix(in srgb, var(--k-tone-ink-bg) 86%, var(--k-tone-ink-fg)); color: var(--k-tone-ink-fg); }
.k-banner.k-tone-ink .k-banner-action { background: var(--k-tone-ink-fg); color: var(--k-tone-ink-bg); }
.k-banner.k-tone-ink .k-banner-action:hover { background: color-mix(in srgb, var(--k-tone-ink-fg) 88%, var(--k-tone-ink-bg)); color: var(--k-tone-ink-bg); }

.k-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 28px 32px;
  background: var(--k-app-tint); border-bottom: 2px solid var(--k-divider);
}
.k-head--plain { background: transparent; }
.k-head-main { display: flex; flex-direction: column; gap: 6px; flex: 1 1 300px; min-width: 0; }
.k-kicker { margin: 0; font-size: var(--k-fs-12-5); line-height: 1.55; color: var(--k-muted); }
.k-head h1, .k-head-title {
  margin: 0; font-size: var(--k-fs, var(--k-fs-36)); font-weight: 800; letter-spacing: var(--k-tracking-h1);
  line-height: 1.05; text-wrap: balance;
}
.k-sub { margin: 0; font-size: var(--k-fs-15); line-height: 1.55; color: var(--k-text-2); max-width: 660px; text-wrap: pretty; }
.k-head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.k-head-actions .k-btn { min-height: 44px; white-space: nowrap; }

.k-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-right: -1px; }
.k-block {
  --k-ground: var(--k-bg);
  grid-column: span 12; display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 22px 28px; border-right: 1px solid var(--k-divider); border-bottom: 2px solid var(--k-divider);
}
.k-block--paper { --k-ground: var(--k-raised); background: var(--k-raised); }
.k-block--tint { --k-ground: var(--k-app-tint); background: var(--k-app-tint); }
.k-span-1 { grid-column: span 1; }   .k-span-2 { grid-column: span 2; }   .k-span-3 { grid-column: span 3; }
.k-span-4 { grid-column: span 4; }   .k-span-5 { grid-column: span 5; }   .k-span-6 { grid-column: span 6; }
.k-span-7 { grid-column: span 7; }   .k-span-8 { grid-column: span 8; }   .k-span-9 { grid-column: span 9; }
.k-span-10 { grid-column: span 10; } .k-span-11 { grid-column: span 11; } .k-span-12 { grid-column: span 12; }
.k-block-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.k-block-title {
  margin: 0; font-size: var(--k-fs-11-5); font-weight: 600; line-height: 1.3; letter-spacing: var(--k-tracking-label);
  text-transform: uppercase; color: var(--k-muted);
}
.k-block-meta { margin-left: auto; font-size: var(--k-fs-12-5); color: var(--k-muted); }
.k-caption { margin: 0; font-size: var(--k-fs-12-5); line-height: 1.55; color: var(--k-muted); }

/* — kpis — */
.k-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; }
.k-kpi { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 3px solid var(--k-app-deep); min-width: 0; }
.k-kpi-label { font-size: var(--k-fs-12-5); color: var(--k-muted); }
.k-kpi-value { font-size: var(--k-fs-28); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--k-c, var(--k-text)); overflow-wrap: anywhere; }
.k-kpi-delta { font-size: var(--k-fs-12); color: var(--k-muted); }

/* — big — */
.k-big-value { font-size: var(--k-fs-64); font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: var(--k-c, var(--k-text)); }
.k-big-desc { font-size: var(--k-fs-14); color: var(--k-text-2); }
.k-big-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.k-big-actions .k-btn { min-height: 48px; min-width: 120px; }

/* — list — */
.k-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--k-divider); }
.k-list-row {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 0;
  border-bottom: 1px solid var(--k-divider);
}
.k-list-row .k-avatar { width: 30px; height: 30px; font-size: var(--k-fs-11); color: var(--k-bg); }
.k-list-lead { flex: none; width: 64px; font-size: var(--k-fs-12-5); font-weight: 800; }
.k-list-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.k-list-title { font-size: var(--k-fs-14-5); font-weight: 600; color: var(--k-text); }
.k-list-title.k-is-done { text-decoration: line-through; color: var(--k-muted); }
.k-list-meta { font-size: var(--k-fs-12-5); color: var(--k-muted); }
.k-list-value { font-size: var(--k-fs-14); font-weight: 600; white-space: nowrap; text-align: right; }
.k-list-row .k-btn { font-size: var(--k-fs-12-5); min-height: 36px; white-space: nowrap; }
a.k-list-row { color: inherit; text-decoration: none; }
a.k-list-row:hover { background: var(--k-row-wash); color: inherit; }

/* — bars (horizontal) — */
.k-hbars { display: flex; flex-direction: column; gap: 12px; }
.k-hbar {
  display: grid; grid-template-columns: minmax(80px, 150px) minmax(0, 1fr) auto; gap: 12px;
  align-items: center; font-size: var(--k-fs-13-5);
}
.k-hbar-label { font-weight: 800; min-width: 0; overflow-wrap: anywhere; }
.k-hbar-track { position: relative; height: 10px; background: var(--k-track); }
.k-hbar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--k-w, 0%); background: var(--k-c, var(--k-app)); }
.k-hbar-value { color: var(--k-text-2); white-space: nowrap; }

/* — cols (column chart) — */
.k-cols {
  position: relative; display: flex; align-items: flex-end; gap: 5px; height: var(--k-size, 200px);
  border-bottom: 2px solid var(--k-divider);
}
.k-col { flex: 1; min-width: 0; height: var(--k-h, 2%); background: var(--k-c, var(--k-app)); }
.k-col--lo { background: var(--k-c, var(--k-app-light)); }
.k-cols-goal { position: absolute; left: 0; right: 0; bottom: var(--k-goal, 0%); border-top: 2px dashed var(--k-muted); pointer-events: none; }
.k-cols-goal-label {
  position: absolute; right: 0; bottom: var(--k-goal, 0%); margin-bottom: 3px; padding: 0 4px;
  font-size: var(--k-fs-11); line-height: 1.55; color: var(--k-text-2); background: var(--k-ground, var(--k-bg));
}
.k-cols-labels { display: flex; gap: 5px; }
.k-cols-labels span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-size: var(--k-fs-11); color: var(--k-muted); }
.k-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: var(--k-fs-12); color: var(--k-text-2); }
.k-legend span { display: inline-flex; align-items: center; gap: 6px; }
.k-swatch { display: inline-block; width: 10px; height: 10px; flex: none; background: var(--k-c, var(--k-app)); }
.k-swatch--lo { background: var(--k-c, var(--k-app-light)); }

/* — form — */
.k-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.k-form--1 { grid-template-columns: minmax(0, 1fr); }
.k-form--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-form--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-form .k-full { grid-column: 1 / -1; }
.k-form-wrap { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.k-form-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.k-form-actions .k-btn { min-height: 44px; }
.k-form-actions .k-btn-primary { min-width: 160px; }

/* — cards — */
.k-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.k-cards--1 { grid-template-columns: minmax(0, 1fr); }
.k-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.k-cards--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.k-cards .k-card { border-top-color: var(--k-app); }
.k-cards .k-card.k-is-selected { border-top-color: var(--k-app-deep); }

/* — note — */
.k-note {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; font-size: var(--k-fs-14); line-height: 1.55;
  border-left: 4px solid var(--k-tone-edge, var(--k-tone-info-edge));
  background: var(--k-tone-bg, var(--k-tone-info-bg)); color: var(--k-tone-fg, var(--k-tone-info-fg));
}
.k-note-title { font-weight: 800; }
.k-note .k-btn { align-self: flex-start; min-height: 40px; margin-top: 4px; color: inherit; border-color: currentColor; }
.k-note .k-btn:hover { color: inherit; background: color-mix(in srgb, currentColor 8%, transparent); }
.k-note a:not(.k-btn) { color: inherit; }

/* — text — */
.k-text-head { margin: 0; font-size: var(--k-fs-24); font-weight: 800; letter-spacing: var(--k-tracking-h2); line-height: 1.2; }
.k-text-p { margin: 0; max-width: 720px; font-size: var(--k-fs-15); line-height: 1.6; color: var(--k-text-body); text-wrap: pretty; }
.k-text-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: var(--k-fs-14-5); line-height: 1.5; }

/* — week planner — */
.k-scroll-x { overflow-x: auto; max-width: 100%; }
.k-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--k-divider); }
.k-week-day {
  display: flex; flex-direction: column; gap: 6px; min-height: var(--k-size, 240px); min-width: 0; padding-bottom: 8px;
  border-right: 1px solid var(--k-divider);
}
.k-week-day.k-is-today { background: var(--k-app-tint); }
.k-week-head {
  display: flex; justify-content: space-between; gap: 4px; padding: 8px 8px 6px;
  border-bottom: 2px solid var(--k-divider); font-size: var(--k-fs-12);
}
.k-week-head b { font-weight: 800; }
.k-week-head span { color: var(--k-muted); }
.k-week-item {
  display: flex; flex-direction: column; gap: 2px; margin: 0 6px; padding: 7px 8px;
  background: var(--k-raised); border-top: 2px solid var(--k-c, var(--k-app)); font-size: var(--k-fs-12);
  color: var(--k-text); text-decoration: none; min-width: 0;
}
a.k-week-item:hover, button.k-week-item:hover { color: var(--k-text); box-shadow: var(--k-shadow-sm); }
button.k-week-item { font: inherit; font-size: var(--k-fs-12); text-align: left; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
.k-week-item-meta { font-size: var(--k-fs-10-5); color: var(--k-muted); }
.k-week-item-title { font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }

/* — month calendar — */
.k-month {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-left: 1px solid var(--k-divider); border-top: 1px solid var(--k-divider);
}
.k-month-wd {
  padding: 6px 8px; font-size: var(--k-fs-11); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--k-muted); border-right: 1px solid var(--k-divider); border-bottom: 2px solid var(--k-divider);
}
.k-month-cell {
  display: flex; flex-direction: column; gap: 4px; min-height: var(--k-size, 72px); min-width: 0; padding: 6px 8px;
  border-right: 1px solid var(--k-divider); border-bottom: 1px solid var(--k-divider); color: var(--k-text);
}
.k-month-cell.k-is-blank { background: var(--k-blank); color: var(--k-muted); }
.k-month-cell.k-is-today { background: var(--k-app-tint); }
.k-month-n { font-size: var(--k-fs-12); }
.k-month-cell.k-is-today .k-month-n { font-weight: 800; }
.k-month-ev {
  padding: 2px 4px; font-size: var(--k-fs-10-5); line-height: 1.25; background: var(--k-raised); color: var(--k-text);
  border-left: 3px solid var(--k-c, var(--k-app)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* — steps — */
.k-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.k-step { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--k-divider); }
.k-step-n {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--k-round);
  border: 2px solid var(--k-text); color: var(--k-text); background: transparent; font-size: var(--k-fs-12); font-weight: 600;
}
.k-step.k-is-done .k-step-n { background: var(--k-success); border-color: var(--k-success); color: var(--k-on-status); }
.k-step.k-is-now .k-step-n { background: var(--k-app-deep); border-color: var(--k-app-deep); color: var(--k-on-app); }
.k-step-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.k-step-title { font-size: var(--k-fs-14-5); font-weight: 800; }
.k-step-desc { font-size: var(--k-fs-13); color: var(--k-muted); }
.k-step-right { font-size: var(--k-fs-12-5); color: var(--k-muted); white-space: nowrap; }

/* — player — */
.k-player {
  --k-focus: var(--k-on-app); /* the ring must show on the app-deep ground */
  display: flex; flex-direction: column; gap: 12px; padding: 24px;
  background: var(--k-app-deep); color: var(--k-on-app);
}
.k-player-kicker { font-size: var(--k-fs-11-5); letter-spacing: var(--k-tracking-label); text-transform: uppercase; color: color-mix(in srgb, var(--k-on-app) 92%, var(--k-app-deep)); }
.k-player-title { font-size: var(--k-fs-30); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.k-player-desc { font-size: var(--k-fs-14); color: color-mix(in srgb, var(--k-on-app) 92%, var(--k-app-deep)); }
.k-player-progress { position: relative; display: block; height: 6px; margin-top: 8px; background: color-mix(in srgb, var(--k-on-app) 25%, transparent); }
.k-player-progress > span { position: absolute; left: 0; top: 0; bottom: 0; width: var(--k-w, 0%); background: var(--k-on-app); }
.k-player-times { display: flex; justify-content: space-between; font-size: var(--k-fs-12); color: color-mix(in srgb, var(--k-on-app) 92%, var(--k-app-deep)); }
.k-player-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.k-player-controls .k-btn { min-height: 48px; }
.k-player-skip { border-color: color-mix(in srgb, var(--k-on-app) 40%, transparent); color: var(--k-on-app); }
.k-player-skip:hover { color: var(--k-on-app); background: color-mix(in srgb, var(--k-on-app) 12%, transparent); }
.k-player-play { min-width: 140px; background: var(--k-on-app-btn-bg); color: var(--k-on-app-btn-fg); }
.k-player-play:hover { background: color-mix(in srgb, var(--k-on-app-btn-bg) 90%, var(--k-app-deep)); color: var(--k-on-app-btn-fg); }

/* — chat — */
.k-chat { display: flex; flex-direction: column; gap: 10px; }
.k-chat-row { display: flex; justify-content: flex-start; }
.k-chat-row.k-is-me { justify-content: flex-end; }
.k-chat-bubble {
  max-width: 80%; padding: 10px 12px; font-size: var(--k-fs-14); line-height: 1.45;
  background: var(--k-raised); color: var(--k-text); border-left: 3px solid var(--k-c, var(--k-primary));
  overflow-wrap: anywhere;
}
.k-chat-row.k-is-me .k-chat-bubble { background: var(--k-text); color: var(--k-bg); border-left: 0; }
.k-chat-who { display: block; margin-bottom: 2px; font-size: var(--k-fs-11); font-weight: 600; opacity: 0.8; }

/* — state (block + KeelUI.state panels) — */
.k-state-kicker {
  font-size: var(--k-fs-11-5); font-weight: 600; letter-spacing: var(--k-tracking-label); text-transform: uppercase;
  color: var(--k-tone-edge, var(--k-tone-neutral-edge));
}
.k-state-inner { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.k-state-title { margin: 0; font-size: var(--k-fs-22); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.k-state-body { margin: 0; max-width: 520px; font-size: var(--k-fs-14); line-height: 1.55; color: var(--k-muted); }
.k-block .k-state-action { align-self: flex-start; min-height: 44px; }
.k-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; min-width: 0;
}
.k-state .k-state-kicker { font-size: var(--k-fs-11); }
.k-state--empty .k-state-kicker, .k-state--loading .k-state-kicker { font-weight: 400; }
.k-state .k-state-title { font-size: 18px; }
.k-state .k-state-body { font-size: var(--k-fs-13); }
.k-state--loading { align-items: stretch; gap: 10px; }
.k-state--error { border-left: 4px solid var(--k-error); }
.k-state--card { background: var(--k-bg); box-shadow: 0 1px 3px rgba(23, 35, 64, 0.08); border: 1px solid color-mix(in srgb, var(--k-text) 15%, transparent); padding: 28px 24px; gap: 10px; }
.k-state--card .k-state-title { font-size: var(--k-fs-20); }
.k-state--card .k-state-body { font-size: var(--k-fs-13-5); }
.k-state--card.k-state--error { border-left: 1px solid color-mix(in srgb, var(--k-text) 15%, transparent); border-top: 4px solid var(--k-error); }
.k-skel { display: block; width: var(--k-w, 100%); height: 12px; background: var(--k-surface); }
.k-skel--title { height: 18px; }
.k-skel--btn { height: 44px; width: var(--k-w, 50%); }
@media (prefers-reduced-motion: no-preference) {
  .k-skel { animation: k-pulse 1.4s ease-in-out infinite; }
}
@keyframes k-pulse { 50% { opacity: 0.55; } }
.k-states { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-states > .k-state { border-bottom: 2px solid var(--k-divider); }
.k-states > .k-state:nth-child(odd) { border-right: 2px solid var(--k-divider); }

/* — image placeholder (and real images) — */
.k-ph {
  display: flex; align-items: flex-end; height: var(--k-size, 220px); padding: 10px 12px;
  background: repeating-linear-gradient(135deg, var(--k-track) 0 10px, var(--k-surface) 10px 20px);
  font-family: var(--k-font-mono); font-size: var(--k-fs-12); color: var(--k-muted);
  filter: grayscale(1) contrast(1.08);
}
.k-ph--sm {
  height: var(--k-size, 110px); padding: 6px 8px; font-size: var(--k-fs-11);
  background: repeating-linear-gradient(135deg, var(--k-track) 0 8px, var(--k-surface) 8px 16px);
}
.k-img { display: block; width: 100%; height: var(--k-size, 220px); object-fit: cover; filter: grayscale(1) contrast(1.08); }
.k-img--sm { height: var(--k-size, 110px); }

/* ════════════════════════════════════════════════════════════════════════
   14. Today launcher tiles (Keel Suite 1a) — usable on the hub Today page
   ════════════════════════════════════════════════════════════════════════ */
.k-apps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--k-divider); }
.k-app-tile {
  display: flex; flex-direction: column; gap: 6px; min-height: 116px; padding: 20px 24px;
  background: var(--k-app-tint); border-top: 4px solid var(--k-app);
  border-right: 1px solid var(--k-divider); border-bottom: 1px solid var(--k-divider);
  color: var(--k-text); text-decoration: none;
}
.k-app-tile:hover { background: var(--k-raised); color: var(--k-text); }
.k-app-tile:focus-visible { outline-offset: -2px; }
.k-app-tile-name { display: flex; align-items: center; gap: 8px; font-size: var(--k-fs-17); font-weight: 800; line-height: 1.1; }
.k-app-tile-name::after { content: "→"; margin-left: auto; font-weight: 400; }
.k-app-tile-stat { font-size: var(--k-fs-22); font-weight: 800; letter-spacing: -0.02em; line-height: 1.55; }
.k-app-tile-sub { font-size: var(--k-fs-12); color: var(--k-muted); }

/* ════════════════════════════════════════════════════════════════════════
   15. Responsive — phone layout (the design's 390px artboards). The page and bar follow
   their own width (container queries), so a page inside a narrow column also collapses.
   ════════════════════════════════════════════════════════════════════════ */
/* Forms in a phone-width dialog collapse to one column like forms in a page do. */
@container k-dialog (max-width: 520px) {
  .k-form, .k-form--3, .k-form--4 { grid-template-columns: minmax(0, 1fr); }
  .k-form > * { grid-column: 1 / -1; }
}
@container k-page (max-width: 720px) {
  .k-banner { padding: 10px 16px; }
  .k-head { padding: 20px 16px; }
  .k-head h1, .k-head-title { font-size: var(--k-fs, var(--k-fs-28)); }
  .k-grid { grid-template-columns: minmax(0, 1fr); }
  .k-grid > .k-block { grid-column: 1 / -1; padding: 18px 16px; }
  .k-form, .k-form--3, .k-form--4 { grid-template-columns: minmax(0, 1fr); }
  .k-cards, .k-cards--2, .k-cards--4, .k-cards--5, .k-cards--6 { grid-template-columns: minmax(0, 1fr); }
  .k-week { min-width: 640px; }
  .k-month { min-width: 560px; }
  .k-big-value { font-size: 52px; }
  .k-hbar { grid-template-columns: minmax(72px, 110px) minmax(0, 1fr) auto; }
  .k-states { grid-template-columns: minmax(0, 1fr); }
  .k-states > .k-state:nth-child(odd) { border-right: 0; }
}
@media (max-width: 720px) {
  /* Suite 1b: the phone launcher is a compact 4-up grid — dot above name, no tint, stripe, stat or sub. */
  .k-apps-grid--auto { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 0; }
  .k-apps-grid--auto .k-app-tile { min-height: 64px; gap: 0; padding: 14px 4px 14px 12px; background: transparent; border-top: 0; }
  .k-apps-grid--auto .k-app-tile:hover { background: var(--k-app-tint); }
  .k-apps-grid--auto .k-app-tile-name {
    flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0;
    font-size: var(--k-fs-11-5); font-weight: 400; line-height: 1.55; letter-spacing: 0;
  }
  .k-apps-grid--auto .k-app-tile-name::after,
  .k-apps-grid--auto .k-app-tile-stat,
  .k-apps-grid--auto .k-app-tile-sub { display: none; }
  .k-dialog-actions { justify-content: flex-start; }
  .k-palette-overlay { padding: 16px 12px 40px; }
  .k-palette-list { max-height: 60vh; }
}

/* ════════════════════════════════════════════════════════════════════════
   15b. Touch targets & forced colours
   ════════════════════════════════════════════════════════════════════════ */
/* Touch: every control is at least 44×44 to a finger. The design's visual sizes stay; compact controls
   get an invisible hit area centred on them (the same technique as .k-check and the bar avatar). The
   position: relative is zero-specificity so an app that positions a .k-btn itself still wins. */
@media (pointer: coarse) {
  :where(.k-btn, .k-palette-esc, .k-tab, .k-bar-brand, a.k-lockup, .k-panel-foot a, .k-launcher-hub a) { position: relative; }
  .k-btn::before, .k-chip::before, .k-seg-opt::before, .k-palette-esc::before,
  .k-tab::before, .k-bar-brand::before, a.k-lockup::before, .k-panel-foot a::before, .k-launcher-hub a::before {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  .k-palette-opt, .k-launcher-hub a, .k-switch { min-height: 44px; }
  /* Stacked footer links are 6px apart, so an overlapping hit area would be ambiguous: grow the rows. */
  .k-footer-col { gap: 0; }
  .k-footer-col a { display: flex; align-items: center; min-height: 44px; }
  /* 44px-tall slider box, same track position (negative margins keep the layout). */
  .k-range { height: 44px; margin: -11px 0 -12px; }
}

/* Windows High Contrast / forced colours: states drawn only with background colour would vanish (the
   browser replaces backgrounds with Canvas), so redraw them with system colours. */
@media (forced-colors: active) {
  .k-btn { border-color: ButtonText; }
  .k-switch-track { forced-color-adjust: none; background: Canvas; border: 1px solid CanvasText; }
  .k-switch-track::after { background: CanvasText; top: 2px; left: 2px; }
  .k-switch input:checked + .k-switch-track,
  .k-switch[aria-checked="true"] .k-switch-track { background: Highlight; border-color: Highlight; }
  .k-switch input:checked + .k-switch-track::after,
  .k-switch[aria-checked="true"] .k-switch-track::after { background: HighlightText; left: 20px; }
  .k-seg-opt:has(input:checked), .k-seg-opt[aria-checked="true"],
  .k-chip[aria-pressed="true"], .k-chip[aria-current], .k-chip:has(input:checked),
  .k-palette-opt[aria-selected="true"] {
    forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight;
  }
  .k-palette-opt[aria-selected="true"] * { color: HighlightText; }
  .k-range { -webkit-appearance: auto; appearance: auto; forced-color-adjust: auto; }
  .k-progress, .k-hbar-track, .k-player-progress { forced-color-adjust: none; background: Canvas; outline: 1px solid CanvasText; }
  .k-progress > span, .k-hbar-fill, .k-player-progress > span, .k-col { forced-color-adjust: none; background: Highlight; }
  .k-col--lo { background: GrayText; }
  .k-dot, .k-bar-unread, .k-tag-dot::before { forced-color-adjust: none; background: CanvasText; }
  .k-check[aria-checked="true"], .k-step.k-is-done .k-step-n, .k-step.k-is-now .k-step-n {
    forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText;
  }
  .k-week-day.k-is-today, .k-month-cell.k-is-today, .k-card.k-is-selected, .k-card[aria-current], .k-card[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .k-tab[aria-current="page"], .k-bottomnav a[aria-current="page"] { border-color: Highlight; }
}

/* ════════════════════════════════════════════════════════════════════════
   16. Motion & print
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}
@media print {
  .k-bar, .k-bottomnav, .k-palette-overlay, .k-popover, .k-panel--pop, .k-skip,
  .k-head-actions, .k-banner-action, .k-form-actions, .k-player-controls { display: none !important; }
  body, .k-page { background: #ffffff; color: #000000; }
  .k-head, .k-block--tint { background: transparent; }
  .k-block { break-inside: avoid; }
  :where(a) { color: inherit; }
}