/* Kai design system — the one canonical stylesheet. Version: see VERSION.
   Tokens, fonts, element base and shared components for every Kai-family app.
   Vendored into apps by kai-design-system/scripts/sync.mjs; do not edit a vendored copy.
   Specificity: element base uses :where() (zero), components are single classes. App
   stylesheets must remove their conflicting rules at the source instead of overriding these. */

@font-face{font-family:'Kai Display';src:url('./fonts/Manrope-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Kai Geist';src:url('./fonts/Geist.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* .kai-on-light / .kai-on-dark pin a subtree to one theme (e.g. a stage that is always dark). */
:root,.kai-on-light,.kai-on-dark{
  /* structure, type and motion: identical in both themes, so every scope gets them */
  --kai-radius-sheet:20px;--kai-radius-card:16px;--kai-radius-menu:12px;--kai-radius-control:10px;--kai-radius-item:8px;--kai-radius-pill:999px;
  --kai-display:'Kai Display','Kai Geist','Nirmala UI','Kohinoor Devanagari','Noto Sans Devanagari',sans-serif;
  --kai-body:'Kai Geist','Nirmala UI','Kohinoor Devanagari','Noto Sans Devanagari',system-ui,sans-serif;
  --kai-control-h:36px;--kai-field-h:38px;--kai-pill-h:44px;--kai-segment-h:30px;--kai-field-font:14px;
  --kai-ease:cubic-bezier(.2,.7,.2,1);--kai-fast:.16s;--kai-theme-fade:.45s;
  --kai-sp-1:8px;--kai-sp-2:14px;--kai-sp-3:22px;--kai-sp-4:34px;--kai-sp-5:52px;--kai-sp-6:80px;
  --kai-z-popover:1000;--kai-z-dialog:1100;
}
:root,.kai-on-light{
  /* surfaces: a neutral paper (Open decision 10, 4 Nov 2026) */
  --kai-paper:#fafafa;--kai-surface:#ffffff;--kai-wash:#f1f1f1;
  /* ink: one slate ink at three lightnesses */
  --kai-ink:#272e33;--kai-secondary:#49535b;--kai-muted:#626b72;
  /* edges */
  --kai-line:#e2e2e2;--kai-line-soft:#ececec;--kai-control:#869196;--kai-control-strong:#7b868b;--kai-focus:#426e8a;
  --kai-action:#344f60;--kai-action-ink:#ffffff;--kai-select:#eaf0f1;
  /* the one accent: live state and "new" only, never chrome */
  --kai-accent:#d98c7f;--kai-accent-ink:#a94e41;--kai-accent-wash:#f8e8e3;
  /* states: the word on a tint of its own colour, never a solid badge */
  --kai-good:oklch(.43 .12 145);--kai-critical:oklch(.46 .17 25);--kai-warn:oklch(.5 .11 70);
  /* job hues: one hue per job (a desk, a source, a format) on its icon, dot or pill; never chrome (Open decision 5) */
  --kai-hue-red:#d23f31;--kai-hue-blue:#3f6fb8;--kai-hue-teal:#23877f;--kai-hue-green:#3b8a4c;--kai-hue-violet:#6d5fc0;--kai-hue-amber:#b7791f;
  /* shadows: popovers and dialogs only */
  --kai-shadow-pop:0 12px 32px #17242e26;--kai-shadow-dialog:0 24px 60px #17242e2e;
  --kai-backdrop:#18232c66;
  --kai-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23626b72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:light;
}

/* Dark is a neutral near-black (Open decision 1, 4 Nov 2026), not a blue slate. */
:root[data-theme=dark],.kai-on-dark{
  --kai-paper:#0e0e0f;--kai-surface:#161617;--kai-wash:#212123;
  --kai-ink:#f0f0f1;--kai-secondary:#c4c4c7;--kai-muted:#acacb0;
  --kai-line:#2a2a2d;--kai-line-soft:#202022;--kai-control:#6c6c70;--kai-control-strong:#7a7a7e;--kai-focus:#d6d6d9;
  --kai-action:#ececed;--kai-action-ink:#0e0e0f;--kai-select:#262628;
  --kai-accent:#e29a8c;--kai-accent-ink:#f0b3a6;--kai-accent-wash:#3b2c29;
  --kai-good:oklch(.76 .12 145);--kai-critical:oklch(.75 .13 25);--kai-warn:oklch(.8 .1 75);
  --kai-hue-red:#f27d6e;--kai-hue-blue:#8fb3ea;--kai-hue-teal:#7fcdb3;--kai-hue-green:#8fd19c;--kai-hue-violet:#c3b9f0;--kai-hue-amber:#e9b766;
  --kai-shadow-pop:0 12px 32px #0000008c;--kai-shadow-dialog:0 24px 60px #000000a6;
  --kai-backdrop:#000000a0;
  --kai-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23acacb0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:dark;
}
:root[data-theme=dark] .kai-on-light{
  /* surfaces: a neutral paper (Open decision 10, 4 Nov 2026) */
  --kai-paper:#fafafa;--kai-surface:#ffffff;--kai-wash:#f1f1f1;
  /* ink: one slate ink at three lightnesses */
  --kai-ink:#272e33;--kai-secondary:#49535b;--kai-muted:#626b72;
  /* edges */
  --kai-line:#e2e2e2;--kai-line-soft:#ececec;--kai-control:#869196;--kai-control-strong:#7b868b;--kai-focus:#426e8a;
  --kai-action:#344f60;--kai-action-ink:#ffffff;--kai-select:#eaf0f1;
  /* the one accent: live state and "new" only, never chrome */
  --kai-accent:#d98c7f;--kai-accent-ink:#a94e41;--kai-accent-wash:#f8e8e3;
  /* states: the word on a tint of its own colour, never a solid badge */
  --kai-good:oklch(.43 .12 145);--kai-critical:oklch(.46 .17 25);--kai-warn:oklch(.5 .11 70);
  /* job hues: one hue per job (a desk, a source, a format) on its icon, dot or pill; never chrome (Open decision 5) */
  --kai-hue-red:#d23f31;--kai-hue-blue:#3f6fb8;--kai-hue-teal:#23877f;--kai-hue-green:#3b8a4c;--kai-hue-violet:#6d5fc0;--kai-hue-amber:#b7791f;
  /* radii */
  /* type */
  /* control geometry: 36px dense on desktop, 44px on touch and phones */
  /* motion */
  /* spacing rhythm */
  /* shadows: popovers and dialogs only */
  --kai-shadow-pop:0 12px 32px #17242e26;--kai-shadow-dialog:0 24px 60px #17242e2e;
  --kai-backdrop:#18232c66;
  --kai-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23626b72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:light;
}

@media (max-width:800px),(pointer:coarse){
  :root,.kai-on-light,.kai-on-dark{--kai-control-h:44px;--kai-field-h:44px;--kai-segment-h:44px}
}
/* Phones: 16px field text so iOS does not zoom on focus. */
@media (max-width:600px),(pointer:coarse){:root,.kai-on-light,.kai-on-dark{--kai-field-font:16px}}

/* ---------- Element base (zero specificity) ---------- */
:where(html){background:var(--kai-paper);color:var(--kai-ink);font:14px/1.5 var(--kai-body);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
:where(body){margin:0;background:var(--kai-paper);color:var(--kai-ink);font-family:var(--kai-body)}
:where(*,*::before,*::after){box-sizing:border-box}
:where(button,input,select,textarea){font:inherit;color:inherit;letter-spacing:inherit}
:where(h1,h2,h3,h4,h5,h6){font-synthesis:none;text-wrap:balance}
:where(h1){font-family:var(--kai-body);font-weight:500;letter-spacing:-.025em;line-height:1.15}
:where(a){color:inherit}
:where(:focus-visible){outline:2px solid var(--kai-focus);outline-offset:3px}
::selection{background:var(--kai-ink);color:var(--kai-paper)}
:where([hidden]:not([hidden=until-found])){display:none!important}

/* ---------- Typography helpers ---------- */
.kai-display{font-family:var(--kai-display);font-weight:300;font-synthesis:none;letter-spacing:-.03em}
.kai-title{font-family:var(--kai-body);font-weight:500;font-synthesis:none;font-size:32px;line-height:1.15;letter-spacing:-.025em;margin:0;text-wrap:balance}
/* Generated stop: only on headings that end in a letter. Add data-no-stop to opt out. */
.kai-title.has-stop:not([data-no-stop])::after{content:".";color:var(--kai-muted)}
.kai-eyebrow{display:block;font-size:12px;letter-spacing:.04em;font-weight:500;color:var(--kai-muted);text-transform:uppercase}
.kai-muted{color:var(--kai-muted)}
.kai-small{font-size:12px}
.kai-num{font-variant-numeric:tabular-nums}
.kai-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:800px){.kai-title{font-size:28px}}

/* ---------- Buttons ----------
   One geometry for every state. The label is centred in the control on both axes; icon+label
   centre as a group; .has-edge reserves the same inline space on both sides so the label stays
   centred when an icon sits at one edge. Loading keeps the label in the flow (invisible) so the
   width never changes, and the spinner is laid over the centre. */
.kai-button{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--kai-control-h);min-width:var(--kai-control-h);padding:0 14px;margin:0;
  border:1px solid transparent;border-radius:var(--kai-radius-control);
  background:var(--kai-wash);color:var(--kai-secondary);
  font:500 14px/1.2 var(--kai-body);letter-spacing:normal;text-align:center;text-decoration:none;text-transform:none;
  white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--kai-fast) var(--kai-ease),color var(--kai-fast) var(--kai-ease),border-color var(--kai-fast) var(--kai-ease),opacity var(--kai-fast) var(--kai-ease);
}
.kai-button:hover{background:color-mix(in oklab,var(--kai-wash),var(--kai-ink) 7%);color:var(--kai-ink)}
.kai-button:active{background:color-mix(in oklab,var(--kai-wash),var(--kai-ink) 12%)}
.kai-button:focus-visible{outline:2px solid var(--kai-focus);outline-offset:2px}
.kai-button.is-primary{background:var(--kai-ink);color:var(--kai-paper)}
.kai-button.is-primary:hover{background:var(--kai-ink);color:var(--kai-paper);opacity:.88}
.kai-button.is-primary:active{opacity:.8}
.kai-button.is-action{background:var(--kai-action);color:var(--kai-action-ink)}
.kai-button.is-action:hover{background:var(--kai-action);color:var(--kai-action-ink);opacity:.9}
.kai-button.is-danger{color:var(--kai-critical)}
.kai-button.is-danger:hover{color:var(--kai-critical)}
.kai-button.is-ghost{background:transparent;border-color:var(--kai-line);color:var(--kai-ink)}
.kai-button.is-ghost:hover{background:var(--kai-wash);border-color:var(--kai-control)}
.kai-button.is-quiet{background:transparent;color:var(--kai-secondary)}
.kai-button.is-quiet:hover{background:var(--kai-wash);color:var(--kai-ink)}
@media (min-width:801px) and (pointer:fine){.kai-button.is-small{min-height:32px;min-width:32px;padding:0 12px;font-size:13px}}
.kai-button.is-block{display:flex;width:100%}
.kai-button.is-pill{border-radius:var(--kai-radius-pill);min-height:var(--kai-pill-h);padding:0 20px;font-size:14px}
/* Controls never get squeezed by a flex row; only a button with a truncating .kai-label may shrink. */
.kai-button,.kai-pill{flex-shrink:0}
.kai-button:has(> .kai-label){flex-shrink:1;min-width:0}
.kai-pill.is-round{flex:none}
.kai-button > svg,.kai-icon-button > svg,.kai-pill > svg{flex:none;width:18px;height:18px}
.kai-button > .kai-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Edge icon: symmetric reserve so the label stays centred. */
.kai-button.has-edge{padding-inline:calc(14px + 18px + 8px)}
.kai-button.has-edge > .kai-edge{position:absolute;top:50%;translate:0 -50%;width:18px;height:18px;display:grid;place-items:center}
.kai-button.has-edge > .kai-edge:first-child{left:14px}
.kai-button.has-edge > .kai-edge:last-child{right:14px}
.kai-button:disabled,.kai-button[aria-disabled=true],.kai-icon-button:disabled,.kai-icon-button[aria-disabled=true]{cursor:not-allowed;pointer-events:none;color:var(--kai-muted);background:transparent;border-color:var(--kai-line);border-style:dashed;box-shadow:none}
.kai-button[aria-busy=true],.kai-icon-button[aria-busy=true]{cursor:progress;pointer-events:none}
.kai-button[aria-busy=true] > *:not(.kai-spinner),.kai-icon-button[aria-busy=true] > *:not(.kai-spinner){visibility:hidden}
.kai-button[aria-busy=true]{color:transparent}
.kai-button[aria-busy=true] > .kai-spinner,.kai-icon-button[aria-busy=true] > .kai-spinner{position:absolute;inset:0;margin:auto;visibility:visible;color:var(--kai-secondary)}
.kai-button.is-primary[aria-busy=true] > .kai-spinner{color:var(--kai-paper)}
.kai-button:not([aria-busy=true]) > .kai-spinner,.kai-icon-button:not([aria-busy=true]) > .kai-spinner{display:none}
.kai-spinner{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:kai-spin .8s linear infinite}
@keyframes kai-spin{to{transform:rotate(360deg)}}

.kai-icon-button{
  position:relative;display:inline-grid;place-items:center;flex:none;
  width:var(--kai-control-h);height:var(--kai-control-h);padding:0;margin:0;border:0;
  border-radius:var(--kai-radius-control);background:transparent;color:var(--kai-secondary);
  font:400 18px/1 var(--kai-body);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--kai-fast) var(--kai-ease),color var(--kai-fast) var(--kai-ease);
}
.kai-icon-button:hover,.kai-icon-button[aria-expanded=true],.kai-icon-button[aria-pressed=true]{background:var(--kai-wash);color:var(--kai-ink)}
.kai-icon-button:focus-visible{outline:2px solid var(--kai-focus);outline-offset:2px}

/* Chrome pill: masthead links, theme toggle, marketing calls to action. A hover fades at control speed
   (--kai-fast on --kai-ease). A theme change is the one slow fade: the pill sits on the paper and
   cross-fades with it over --kai-theme-fade, for as long as kai.js marks the root (Kai.theme.set/toggle). */
.kai-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--kai-pill-h);padding:0 20px;
  border:1px solid var(--kai-line);border-radius:var(--kai-radius-pill);background:var(--kai-paper);color:var(--kai-ink);
  font:400 13px/1.2 var(--kai-body);white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color var(--kai-fast) var(--kai-ease),border-color var(--kai-fast) var(--kai-ease),color var(--kai-fast) var(--kai-ease)}
:root[data-kai-theme-fading] .kai-pill{transition-duration:var(--kai-theme-fade);transition-timing-function:ease}
.kai-pill:hover{background:var(--kai-wash);border-color:var(--kai-control)}
.kai-pill.is-solid{background:var(--kai-ink);color:var(--kai-paper);border-color:var(--kai-ink)}
.kai-pill.is-solid:hover{background:var(--kai-secondary);border-color:var(--kai-secondary)}
.kai-pill.is-round{width:var(--kai-pill-h);padding:0;font-size:18px}
/* Matched dialog/confirm pair: same height, same min width, same type. */
.kai-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:stretch}
.kai-actions > .kai-button,.kai-actions > .kai-pill{min-width:min(168px,100%);min-height:44px;font-size:14px}
.kai-actions.is-end{justify-content:flex-end}
@media (max-width:480px){.kai-actions > .kai-button,.kai-actions > .kai-pill{flex:1 1 0}}

/* ---------- Fields ---------- */
.kai-field{display:grid;align-content:start;gap:8px;min-width:0}
.kai-field > label,.kai-field-label,:where(.kai-field) > legend{font-size:12px;font-weight:500;line-height:1.4;color:var(--kai-secondary)}
.kai-field-hint{font-size:12px;line-height:1.45;color:var(--kai-muted)}
.kai-field-error{font-size:13px;line-height:1.45;color:var(--kai-critical)}
.kai-field-error:empty{display:none}
.kai-required{color:var(--kai-muted);font-weight:400}
/* A field's edge at rest is --kai-control, 3:1 against the page and the sheet in both themes (WCAG 1.4.11);
   the hairline separates content; it does not show where a control is. Hover and an open select strengthen it to --kai-muted. */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden],[type=submit],[type=button],[type=reset],[type=image]),select,textarea),.kai-input{
  display:block;width:100%;min-width:0;min-height:var(--kai-field-h);margin:0;padding:8px 12px;
  background:var(--kai-surface);color:var(--kai-ink);border:1px solid var(--kai-control);border-radius:var(--kai-radius-control);
  font:400 var(--kai-field-font)/1.4 var(--kai-body);
  transition:border-color var(--kai-fast) var(--kai-ease),background-color var(--kai-fast) var(--kai-ease);
}
:where(textarea){resize:vertical;line-height:1.55;min-height:88px}
:where(input,textarea)::placeholder{color:var(--kai-muted);opacity:1}
:where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]),select,textarea):hover:not(:disabled){border-color:var(--kai-muted)}
:where(input,select,textarea):focus-visible{outline:2px solid var(--kai-focus);outline-offset:2px}
:where(input,select,textarea):disabled{cursor:not-allowed;color:var(--kai-muted);background:var(--kai-wash);border-style:dashed}
:where(input,select,textarea)[aria-invalid=true]{border-color:var(--kai-critical)}
:where(input[type=checkbox],input[type=radio]){width:16px;height:16px;margin:0;accent-color:var(--kai-ink);flex:none}
.kai-check{display:inline-flex;align-items:center;gap:10px;min-height:var(--kai-control-h);font-size:14px;color:var(--kai-ink);cursor:pointer}
:where(fieldset){border:0;margin:0;padding:0;min-width:0}
.kai-search{position:relative;display:block}
/* A search field is filled with the wash, where --kai-control is 2.85:1 (light) and 2.91:1 (dark). It rests on
   --kai-control-strong, 3:1 against the wash and against the page or sheet it sits on in both themes (WCAG 1.4.11).
   Hover strengthens it to --kai-muted and focus shows the ring, as on every other field. */
.kai-search > input{border-radius:var(--kai-radius-pill);padding-left:38px;background:var(--kai-wash);border-color:var(--kai-control-strong)}
.kai-search > input:hover:not(:disabled){border-color:var(--kai-muted)}
.kai-search > input:focus-visible{background:var(--kai-surface)}
.kai-search > input[aria-invalid=true]{border-color:var(--kai-critical)}
.kai-search > svg{position:absolute;left:13px;top:calc(var(--kai-field-h) / 2);translate:0 -50%;width:16px;height:16px;color:var(--kai-muted);pointer-events:none}

/* ---------- Select (closed state, every browser) ----------
   The native <select> stays the focusable, labelled form control. kai.js replaces the OS popup
   with an in-page listbox of exactly the trigger's width in every engine. (appearance:base-select
   was evaluated and rejected: its internal label cannot truncate inside the trigger, so long
   selected values ran under the chevron in Chromium 151 and WebKit 26.4.) */
:where(select:not([multiple],[size])){
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:36px;background-image:var(--kai-chevron);background-repeat:no-repeat;background-position:right 12px center;background-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;
}
/* In-page listbox (kai.js): the open state of every select, and of custom comboboxes. */
.kai-listbox{
  position:fixed;z-index:var(--kai-z-popover);box-sizing:border-box;margin:0;padding:5px;
  overflow:auto;overscroll-behavior:contain;list-style:none;
  background:var(--kai-surface);color:var(--kai-ink);border:1px solid var(--kai-line);border-radius:var(--kai-radius-menu);box-shadow:var(--kai-shadow-pop);
  font:400 14px/1.4 var(--kai-body);inset:auto;
}
.kai-listbox:popover-open{display:block}
.kai-listbox [role=option]{display:flex;align-items:center;gap:10px;min-height:40px;padding:9px 12px;border-radius:var(--kai-radius-item);white-space:normal;overflow-wrap:anywhere;cursor:pointer}
.kai-listbox [role=option][aria-selected=true]{font-weight:500;background:var(--kai-wash)}
.kai-listbox [role=option][aria-selected=true]::after{content:"";flex:none;margin-left:auto;width:9px;height:5px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(-45deg)}
.kai-listbox:focus,.kai-listbox:focus-visible{outline:none}
.kai-listbox [role=option].is-active{background:var(--kai-wash)}
.kai-listbox.is-kbd [role=option].is-active{outline:2px solid var(--kai-focus);outline-offset:-2px}
.kai-listbox [role=option][aria-disabled=true]{color:var(--kai-muted);cursor:not-allowed}
.kai-listbox [role=group] > [role=presentation]{display:block;padding:10px 12px 4px;font-size:12px;letter-spacing:.14em;font-weight:600;text-transform:uppercase;color:var(--kai-muted)}
.kai-listbox .kai-listbox-empty{padding:10px 12px;color:var(--kai-muted)}
select[aria-expanded=true]{border-color:var(--kai-muted)}

/* ---------- Menus (action menus, account menus) ---------- */
.kai-menu{position:fixed;z-index:var(--kai-z-popover);display:grid;gap:2px;box-sizing:border-box;margin:0;padding:6px;inset:auto;
  background:var(--kai-surface);color:var(--kai-ink);border:1px solid var(--kai-line);border-radius:var(--kai-radius-menu);box-shadow:var(--kai-shadow-pop);
  max-height:min(360px,60dvh);overflow:auto;overscroll-behavior:contain}
.kai-menu:not(:popover-open):not(.is-static)[popover]{display:none}
.kai-menu.is-static{position:absolute}
.kai-menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:8px 10px;margin:0;border:0;border-radius:var(--kai-radius-item);
  background:transparent;color:var(--kai-ink);font:400 14px/1.4 var(--kai-body);text-align:left;text-decoration:none;cursor:pointer;white-space:normal;overflow-wrap:anywhere}
.kai-menu-item:hover,.kai-menu-item:focus-visible{background:var(--kai-wash);outline:none}.kai-menu-item:focus-visible{outline:2px solid var(--kai-focus);outline-offset:-2px}
.kai-menu-item.is-danger{color:var(--kai-critical)}
.kai-menu-item:disabled,.kai-menu-item[aria-disabled=true]{color:var(--kai-muted);cursor:not-allowed;background:transparent}
.kai-menu-item > svg{flex:none;width:18px;height:18px}
.kai-menu-sep{height:1px;margin:4px 6px;background:var(--kai-line)}
@media (max-width:800px),(pointer:coarse){.kai-menu-item{min-height:44px}}

/* ---------- Dialogs ---------- */
.kai-dialog{
  box-sizing:border-box;width:calc(100% - 32px);max-width:440px;max-height:calc(var(--kai-vvh,100dvh) - 32px);
  margin:auto;padding:32px 28px 28px;overflow:auto;overscroll-behavior:contain;
  background:var(--kai-surface);color:var(--kai-ink);border:1px solid var(--kai-line);border-radius:var(--kai-radius-card);box-shadow:var(--kai-shadow-dialog);
}
.kai-dialog.is-wide{max-width:640px}
.kai-dialog::backdrop{background:var(--kai-backdrop);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.kai-dialog[open]{display:grid;gap:14px;align-content:start}
.kai-dialog-title{font-family:var(--kai-body);font-weight:500;font-synthesis:none;font-size:24px;letter-spacing:-.02em;line-height:1.2;margin:0;padding-right:28px}
.kai-dialog-body{font-size:14px;line-height:1.6;color:var(--kai-secondary);margin:0}
.kai-dialog-close{position:absolute;right:10px;top:10px}
.kai-dialog > .kai-actions{margin-top:8px}
/* Phone: a bottom sheet that rides above the on-screen keyboard (kai.js sets --kai-vvh/--kai-vvb). */
@media (max-width:600px){
  .kai-dialog.is-sheet{width:100%;max-width:none;margin:auto 0 var(--kai-vvb,0px);border-radius:var(--kai-radius-card) var(--kai-radius-card) 0 0;border-bottom:0;
    padding:24px 20px calc(20px + env(safe-area-inset-bottom));max-height:calc(var(--kai-vvh,100dvh) - 24px)}
  .kai-dialog{padding:24px 20px 20px}
}

/* ---------- Tables and workspaces ---------- */
.kai-workspace{display:flex;flex-direction:column;min-height:0;height:100%}
.kai-workspace > .kai-workspace-head{flex:none}
.kai-table-wrap{position:relative;min-height:0;max-width:100%;overflow:auto;overscroll-behavior:contain;border:1px solid var(--kai-line);border-radius:var(--kai-radius-card);background:var(--kai-surface);scrollbar-width:thin}
.kai-workspace > .kai-table-wrap{flex:1}
.kai-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.kai-table th{position:sticky;top:0;z-index:1;background:var(--kai-surface);text-align:left;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--kai-muted);padding:12px 14px;border-bottom:1px solid var(--kai-ink);white-space:nowrap}
.kai-table td{padding:12px 14px;border-bottom:1px solid var(--kai-line);vertical-align:top;overflow-wrap:break-word}
.kai-table td:first-child{min-width:7.5rem}
.kai-table tr:last-child td{border-bottom:0}
.kai-table tbody tr:hover td{background:var(--kai-wash)}
.kai-table .is-num,.kai-table [data-num]{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.kai-table th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.kai-table th button:focus-visible{outline:2px solid var(--kai-focus);outline-offset:2px;border-radius:4px}

/* ---------- Navigation ---------- */
.kai-nav{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;align-content:start}
.kai-nav a,.kai-nav-item{display:flex;align-items:center;gap:10px;min-height:var(--kai-control-h);padding:0 12px;border-radius:var(--kai-radius-control);font-size:14px;color:var(--kai-secondary);text-decoration:none;transition:background-color var(--kai-fast) var(--kai-ease),color var(--kai-fast) var(--kai-ease)}
button.kai-nav-item{width:100%;margin:0;border:0;background:transparent;font:inherit;font-size:14px;text-align:left;justify-content:flex-start;cursor:pointer}
.kai-nav a:hover,.kai-nav-item:hover{background:var(--kai-wash);color:var(--kai-ink)}
.kai-nav a[aria-current],.kai-nav-item[aria-current]{background:var(--kai-wash);color:var(--kai-ink);font-weight:500}
.kai-nav svg{flex:none;width:18px;height:18px}
/* Sideways only: overflow-x:auto alone computes overflow-y to auto, so a strip whose tabs overhung its line
   could be dragged up and down on touch. The line is drawn inside (inset shadow) so tabs need no -1px overhang;
   focus rings are inset because the strip clips. */
.kai-tabs{display:flex;gap:2px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;box-shadow:inset 0 -1px var(--kai-line)}
.kai-tabs > a,.kai-tabs > button,.kai-tab{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:var(--kai-control-h);min-width:var(--kai-control-h);padding:0 12px;margin:0;border:0;border-bottom:2px solid transparent;background:none;color:var(--kai-secondary);font:400 14px/1.2 var(--kai-body);text-decoration:none;cursor:pointer}
.kai-tabs > a:hover,.kai-tabs > button:hover,.kai-tab:hover{color:var(--kai-ink)}
.kai-tabs > [aria-selected=true],.kai-tabs > [aria-current],.kai-tab[aria-selected=true]{color:var(--kai-ink);font-weight:500;border-bottom-color:var(--kai-ink)}
.kai-tabs :focus-visible{outline-offset:-3px}
.kai-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--kai-surface);border-top:1px solid var(--kai-line)}
.kai-tabbar a,.kai-tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;padding:6px 2px;border:0;border-radius:var(--kai-radius-control);background:none;font:400 12px/1.2 var(--kai-body);color:var(--kai-muted);text-decoration:none;cursor:pointer}
.kai-tabbar svg{width:20px;height:20px}
.kai-tabbar [aria-current],.kai-tabbar [aria-selected=true]{color:var(--kai-ink);font-weight:500;background:var(--kai-wash)}

/* ---------- Chips, segmented, status ---------- */
.kai-chips{display:flex;flex-wrap:wrap;gap:8px}
.kai-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--kai-control-h);padding:0 14px;margin:0;
  border:1px solid var(--kai-line);border-radius:var(--kai-radius-pill);background:var(--kai-surface);color:var(--kai-secondary);
  font:500 13px/1.2 var(--kai-body);white-space:nowrap;cursor:pointer;transition:background-color var(--kai-fast) var(--kai-ease),color var(--kai-fast) var(--kai-ease),border-color var(--kai-fast) var(--kai-ease)}
.kai-chip:hover{background:var(--kai-wash)}
.kai-chip[aria-pressed=true],.kai-chip[aria-selected=true],.kai-chip:has(input:checked){background:var(--kai-ink);color:var(--kai-paper);border-color:var(--kai-ink)}
.kai-chip:disabled,.kai-chip[aria-disabled=true]{border-style:dashed;color:var(--kai-muted);background:transparent;cursor:not-allowed}
.kai-chip > input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.kai-chip:has(input:focus-visible){outline:2px solid var(--kai-focus);outline-offset:2px}
.kai-segmented{display:inline-flex;padding:3px;gap:2px;border-radius:var(--kai-radius-control);background:var(--kai-wash)}
.kai-segmented > button,.kai-segmented > label{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:var(--kai-segment-h);min-width:var(--kai-segment-h);padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--kai-secondary);font:400 13px/1.2 var(--kai-body);cursor:pointer}
.kai-segmented > [aria-pressed=true],.kai-segmented > [aria-selected=true],.kai-segmented > label:has(input:checked){background:var(--kai-surface);color:var(--kai-ink);font-weight:500;box-shadow:0 0 0 1px var(--kai-control-strong)}
.kai-segmented > label > input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.kai-status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--kai-radius-pill);background:var(--kai-wash);color:var(--kai-secondary);font:400 12px/1.5 var(--kai-body);white-space:nowrap}
.kai-status.is-good{color:var(--kai-good);background:color-mix(in oklab,var(--kai-good) 13%,var(--kai-surface))}
.kai-status.is-critical{color:var(--kai-critical);background:color-mix(in oklab,var(--kai-critical) 12%,var(--kai-surface))}
.kai-status.is-warn{color:var(--kai-warn);background:color-mix(in oklab,var(--kai-warn) 16%,var(--kai-surface))}
.kai-status.is-live{color:var(--kai-accent-ink);background:var(--kai-accent-wash)}
.kai-status.is-hued{color:color-mix(in oklab,var(--hue) 68%,var(--kai-ink));background:color-mix(in oklab,var(--hue) 14%,var(--kai-surface))}
.kai-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--kai-accent);animation:kai-breathe 1.8s ease-out infinite}
@keyframes kai-breathe{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--kai-accent),transparent 30%)}100%{box-shadow:0 0 0 10px transparent}}

/* ---------- Surfaces and states ---------- */
.kai-sheet{background:var(--kai-surface);border:1px solid var(--kai-line);border-radius:var(--kai-radius-sheet)}
.kai-card{background:var(--kai-surface);border:1px solid var(--kai-line);border-radius:var(--kai-radius-card)}
.kai-notice{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:var(--kai-radius-card);background:var(--kai-wash);color:var(--kai-ink);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.kai-notice{max-width:72ch}
.kai-prose{max-width:66ch}
.kai-notice.is-critical{color:var(--kai-critical)}
.kai-notice.is-good{color:var(--kai-good)}
.kai-empty{padding:32px 16px;margin:0 auto;max-width:40ch;text-align:center;color:var(--kai-muted);font-size:14px;line-height:1.6}
.kai-error{color:var(--kai-critical);font-size:13px;line-height:1.45;max-width:66ch}
.kai-skeleton{border-radius:var(--kai-radius-item);background:var(--kai-wash);animation:kai-pulse 1.6s ease-in-out infinite}
@keyframes kai-pulse{50%{opacity:.55}}
.kai-hairline{border:0;border-top:1px solid var(--kai-line);margin:0}
.kai-link{color:var(--kai-ink);text-decoration:underline;text-decoration-color:var(--kai-control);text-underline-offset:4px}
.kai-link:hover{text-decoration-color:var(--kai-ink)}
.kai-skip{position:fixed;left:16px;top:-100px;z-index:2000;padding:12px;border-radius:8px;background:var(--kai-ink);color:var(--kai-paper)}
.kai-skip:focus{top:12px}

/* Theme cross-fade on the chrome that shows it. */
.kai-theme-fade,.kai-theme-fade body{transition:background-color var(--kai-theme-fade) ease,color var(--kai-theme-fade) ease}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .kai-spinner{animation-duration:1.6s!important;animation-iteration-count:infinite!important}
}
/* Devanagari is never letter-spaced or set in capitals (kai.js marks a select's group labels; an app sets lang or data-kai-script on its own) */
:is(.kai-eyebrow,.kai-table th,.kai-listbox [role=group] > [role=presentation]):is(:lang(hi),:lang(mr),:lang(kok),:lang(ne),:lang(sa),[data-kai-script=deva]){letter-spacing:0;text-transform:none}
/* touch: a select's options and a sortable header's button at 44px (after their base rules, which they must outrank) */
@media (max-width:800px),(pointer:coarse){.kai-listbox [role=option]{min-height:44px}.kai-table th:has(> button){padding-block:0}.kai-table th > button{display:flex;width:100%;min-height:44px}}