/* 2do kit: the shapes every 2do screen is built from.
   Tokens first, then one block per shape. kit.js builds the markup;
   /kit shows every shape and state. Everything here is scoped to .ui-*
   so it can sit next to style.css / v2.css while screens move over. */

/* only the Medium cut ships: declared as what it is (500), so bold (700) is
   drawn bolder by the browser. A real SalmaproBold file would replace that. */
@font-face {
    font-family: 'Salma';
    src: url('../fonts/SalmaproMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

:root {
    /* surfaces: deep green at the top, almost black at the bottom */
    --k-bg: #0a150c;            /* deep green at the top ... */
    --k-bg-end: #0f0910;        /* ... to a purple black at the bottom */
    --k-rail: #080d09;
    /* the app screen (measured from the mockup): a top band, the page, the rail */
    --k-app-bar: #0f0a10;
    --k-app-bg: #090e0a;
    --k-app-bg-end: #0d0b0e;
    --k-outline: #48424e;       /* the thin border of see-through pills */
    --k-raise: rgb(var(--k-hi) / 0.035);
    --k-glass: rgb(var(--k-hi) / 0.05);
    --k-glass-hover: rgb(var(--k-hi) / 0.09);
    --k-line: rgb(var(--k-hi) / 0.08);
    --k-scrim: rgba(4, 8, 5, 0.66);
    --k-blur: blur(20px) saturate(1.3);
    /* drop shadows: black on the dark page; light mode makes them a faint warm grey
       (each shadow keeps its own strength, times --k-shadow-k) */
    --k-shadow-rgb: 0 0 0;
    --k-shadow-k: 1;
    /* text */
    --k-text: #dfe8dc;
    --k-muted: #93a391;
    --k-faint: #5d6d5b;
    /* the accent: lime, pale for fills, strong for the part you press */
    --k-lime: #acd575;          /* the mockup's lime pair: pale for what is picked, */
    --k-lime-strong: #8eb161;   /* deeper for what it sits on */
    --k-lime-line: #55743a;
    --k-on-lime: #16230e;
    --k-lime-soft: rgba(160, 210, 110, 0.14);
    --k-teal: #50a9d9;          /* blue, deep tier: Share and All, as an outline */
    --k-teal-ink: #8ac7ea;      /* blue, ink tier: the text inside that outline */
    --k-on-teal: #0e0910;
    /* the composer's neutral greys: panel, its raised line, solid boxes */
    --k-panel: #141215;
    --k-panel-raised: #19171a;
    --k-solid: #232323;
    --k-solid-hover: #2c2b2d;
    --k-solid-soft: #1c1b1d;
    --k-solid-ink: #dfe1dc; /* never pure white */
    --k-solid-faint: #98989a;
    /* the large panel (item editor, settings): its page, its section column, raised tiles */
    --k-sheet: #1c1a1d;
    --k-sheet-nav: #19171a;
    --k-sheet-raised: #242226;
    --k-danger: #e8705a;
    --k-danger-soft: rgba(232, 112, 90, 0.14);
    /* item colors as soft tints (chip fill) and their readable text */
    --k-blue: rgba(140, 152, 185, 0.16);      --k-blue-text: #b7c0d8;
    --k-red: rgba(232, 110, 85, 0.16);        --k-red-text: #f3a593;
    --k-green: rgba(110, 175, 115, 0.18);     --k-green-text: #9fd39a;
    --k-yellow: rgba(245, 165, 70, 0.16);     --k-yellow-text: #f6c57f;
    --k-purple: rgba(160, 125, 195, 0.17);    --k-purple-text: #ccb4e4;
    --k-black: rgba(160, 165, 160, 0.12);     --k-black-text: #c3c7c3;
    --k-turquoise: rgba(80, 185, 192, 0.16);  --k-turquoise-text: #8fd6db;
    --k-pink: rgba(215, 135, 160, 0.16);      --k-pink-text: #efb6c7;
    /* shape: every button's corners are this share of its height (between a
       capsule and a box), so all sizes have the same shape */
    --k-round: .36;
    --k-r-pill: 999px;
    --k-r-box: 16px;
    --k-r-dialog: 22px;
    /* three heights: sm = top bar and filters, md = row chips, lg = composer and login */
    --k-h-sm: 28px;
    --k-h-md: 34px;
    --k-h-lg: 44px;
    /* the stacked state switch: one color per state, yellow -> green -> turquoise.
       Off: see-through (the surface behind) with a border of the color; on: solid. */
    --k-seg-ink: #121014;
    --k-seg-off-ink: #59575b;
    --k-seg-surface: var(--k-bg); /* what "see-through" shows: set it to the switch's background */
    /* the deep tier of the palette (OKLCH lightness .70, intensity .11; only the
       hue turns): yellow, lime, mint, aqua. The pastel tier's lime is --k-lime. */
    --k-seg-grey: #8a878d;      /* not done: quiet, nothing happened yet */
    --k-seg-yellow: #c9a24a;    /* in progress: amber, something is moving */
    --k-seg-green: #8aab5f;
    --k-seg-teal: #5db384;      /* done: mint */
    --k-seg-turquoise: #50a9d9; /* blue (All) */
    /* spacing */
    --k-s1: 4px;
    --k-s2: 8px;
    --k-s3: 12px;
    --k-s4: 16px;
    --k-s5: 24px;
    --k-s6: 40px;
    /* type */
    --k-font: 'Salma', system-ui, sans-serif;
    --k-t-sm: 12.5px;
    --k-t-md: 14px;
    --k-t-lg: 17px;
    --k-t-display: clamp(34px, 10.5vw, 118px); /* "conversations" still fits a 360px phone */
    --k-ease: cubic-bezier(.2, .7, .2, 1);
    --k-spring: cubic-bezier(.34, 1.45, .55, 1); /* a small overshoot, for things that move into place */
}
/* ---------------------------------------------------------------- neutral levels
   Every grey of the kit is one of these, named by its OKLCH lightness (%).
   Dark: the greys as designed. Light (.k-light): each level mirrored, so a
   dark surface turns light and pale text turns to dark ink. --k-hi is the
   color of see-through overlays: white on dark, near black on light. */
:root {
    --k-hi: 255 255 255;
    /* the page's own color, for see-through veils laid over moving art (the
       login plate): near black on dark, near white on light. The opposite of
       --k-hi, which is the color of overlays laid over the page. */
    --k-lo: 8 16 10;
    --k-n15: #0e0910;
    --k-n18: #1a0f0f;
    --k-n20: #0f1a12;
    --k-n21: #111a12;
    --k-n21b: #19171a;
    --k-n25: #222124;
    --k-n27: #282629;
    --k-n27b: #1b2a2c;
    --k-n28: #2c2919;
    --k-n28b: #2b292d;
    --k-n29: #2c292e;
    --k-n33: #253a3d;
    --k-n34: #3a363d;
    --k-n35: #3b3840;
    --k-n35b: #3a3d36;
    --k-n36: #403c43;
    --k-n37: #3c4232;
    --k-n38: #434343;
    --k-n38b: #45414a;
    --k-n40: #4a464e;
    --k-n41: #4a4a4c;
    --k-n42: #4f4a55;
    --k-n42b: #4d4d4e;
    --k-n44: #55515a;
    --k-n44b: #4c5546;
    --k-n45: #525361;
    --k-n45b: #46595c;
    --k-n45c: #57535b;
    --k-n47: #5e5a61;
    --k-n48: #5d614e;
    --k-n49: #625e64;
    --k-n52: #6a666d;
    --k-n53: #6f6a72;
    --k-n56: #757278;
    --k-n58: #7d767f;
    --k-n63: #8a868c;
    --k-n63b: #878a87;
    --k-n64: #8f8b92;
    --k-n64b: #8d8a90;
    --k-n68: #9a96a0;
    --k-n71: #a3a0a6;
    --k-n72: #a0a5a0;
    --k-n72b: #a8a4ab;
    --k-n73: #a9a5ad;
    --k-n74: #aba9ac;
    --k-n76: #afb0af;
    --k-n79: #b9bbb8;
    --k-n83: #c9c5cc;
    --k-n84: #c9cbc6;
    --k-n86: #c9d3c6;
    --k-n91: #dfe1dc;
}
.k-light {
    --k-hi: 30 26 34;
    --k-lo: 243 246 241;
    --k-n15: #fdfbff;
    --k-n18: #fef3f2;
    --k-n20: #ecf4ee;
    --k-n21: #ecf4ed;
    --k-n21b: #f3f0f4;
    --k-n25: #eae9ed;
    --k-n27: #e7e4e8;
    --k-n27b: #dde8e9;
    --k-n28: #e6e4dc;
    --k-n28b: #e5e2e7;
    --k-n29: #e5e1e8;
    --k-n33: #d2dddf;
    --k-n34: #dcd7df;
    --k-n35: #d9d6df;
    --k-n35b: #d4d8d0;
    --k-n36: #d8d3db;
    --k-n37: #d2d6cd;
    --k-n38: #d1d1d1;
    --k-n38b: #d3d0d8;
    --k-n40: #a09ca4;
    --k-n41: #9b9b9e;
    --k-n42: #9b98a0;
    --k-n42b: #99999a;
    --k-n44: #959299;
    --k-n44b: #92968f;
    --k-n45: #91929a;
    --k-n45b: #8a9495;
    --k-n45c: #949097;
    --k-n47: #8e8991;
    --k-n48: #888a82;
    --k-n49: #8a868c;
    --k-n52: #837f86;
    --k-n53: #7f7b82;
    --k-n56: #78757b;
    --k-n58: #757076;
    --k-n63: #68646a;
    --k-n63b: #636563;
    --k-n64: #646066;
    --k-n64b: #646167;
    --k-n68: #5a575e;
    --k-n71: #535056;
    --k-n72: #4d514d;
    --k-n72b: #504d53;
    --k-n73: #4f4c53;
    --k-n74: #4c4a4d;
    --k-n76: #464746;
    --k-n79: #3e403d;
    --k-n83: #39353b;
    --k-n84: #343531;
    --k-n86: #2e332d;
    --k-n91: #252723;
}
/* ---------------------------------------------------------------- light mode
   The same kit on a light page (a space's Mode: Light). Surfaces near white, the
   page a touch deeper than the panels; ink dark; the accent a step deeper so it
   still reads as text on white; item colors' text darkened to stay readable. */
.k-light {
    --k-bg: #f3f6f1;
    --k-bg-end: #f4f1f5;
    --k-rail: #eef1ec;
    --k-app-bar: #efecf1;
    --k-app-bg: #f5f7f3;
    --k-app-bg-end: #f3f1f5;
    --k-outline: #c9c4cd;
    --k-scrim: rgba(40, 36, 44, 0.32);
    --k-shadow-rgb: 40 36 44;
    --k-shadow-k: .22;
    --k-text: #242a22;
    --k-muted: #5b6659;
    --k-faint: #8b9489;
    --k-lime: #9ccc62;
    --k-lime-strong: #7aa646;
    --k-lime-line: #5a8a33;
    --k-on-lime: #15230b;
    --k-lime-soft: rgba(110, 160, 60, 0.16);
    --k-teal: #2f8fc4;
    --k-teal-ink: #1f6f9c;
    --k-on-teal: #f7fbfd;
    --k-panel: #fbfafc;
    --k-panel-raised: #f2f0f4;
    --k-solid: #e8e6eb;
    --k-solid-hover: #dcd9e0;
    --k-solid-soft: #efedf2;
    --k-solid-ink: #252427;
    --k-solid-faint: #77757a;
    --k-sheet: #fbfafc;
    --k-sheet-nav: #f3f1f5;
    --k-sheet-raised: #eeecf1;
    --k-danger: #c8462e;
    --k-danger-soft: rgba(200, 70, 46, 0.12);
    --k-blue-text: #4a5a85;
    --k-red-text: #b44a33;
    --k-green-text: #3f7f3a;
    --k-yellow-text: #94650f;
    --k-purple-text: #7254a0;
    --k-black-text: #4d524d;
    --k-turquoise-text: #227f86;
    --k-pink-text: #a8476a;
    --k-seg-off-ink: #8a878d;
}



/* ---------------------------------------------------------------- icons */
.ui-icon {
    width: 1.1em;
    height: 1.1em;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------------------------------------------------------- pill */
.ui-pill {
    --h: var(--k-h-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--k-s2);
    height: var(--h);
    padding: 0 calc(var(--h) * 0.42);
    border: 1px solid var(--k-line);
    border-radius: calc(var(--h) * var(--k-round));
    background: var(--k-glass);
    color: var(--k-muted);
    font: 700 var(--k-t-sm)/1 var(--k-font);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .18s var(--k-spring);
}
.ui-pill:hover { background: var(--k-glass-hover); color: var(--k-text); }
.ui-pill:hover { transform: translateY(-1px); }
.ui-pill:active { transform: translateY(0) scale(.97); }
.ui-pill:focus-visible { outline: 2px solid var(--k-lime); outline-offset: 2px; }
.ui-pill[disabled], .ui-pill.is-disabled { opacity: .4; pointer-events: none; }
.ui-pill.ui-accent { background: var(--k-lime); border-color: transparent; color: var(--k-on-lime); }
.ui-pill.ui-accent:hover { background: color-mix(in oklab, var(--k-lime), #fff 16%); }
.ui-pill.ui-teal { background: none; border: 1.5px solid var(--k-teal); color: var(--k-teal-ink); }
.ui-pill.ui-teal:hover { background: rgba(80, 169, 217, .12); color: #a6d6f0; }
/* blue: filled, for the button that sends (Save a comment) */
.ui-pill.ui-blue { background: var(--k-teal); border-color: transparent; color: var(--k-on-teal); }
.ui-pill.ui-blue:hover { background: #66b6e0; color: var(--k-on-teal); }
.ui-pill.ui-ghost { background: transparent; border-color: transparent; }
.ui-pill.ui-outline { background: none; border: 1.5px solid var(--k-outline); color: var(--k-n45); }
.ui-pill.ui-outline:hover { background: var(--k-glass); border-color: var(--k-n47); color: var(--k-n64); }
.ui-pill.ui-danger { background: var(--k-danger-soft); border-color: transparent; color: var(--k-danger); }
.ui-pill.ui-icon-only { width: var(--h); padding: 0; justify-content: center; }
/* solid: a filled grey box, no outline, bold off-white text (the composer) */
.ui-solid.ui-pill, .ui-solid.ui-field {
    border-color: transparent;
    background: var(--k-solid);
    color: var(--k-solid-ink);
    font-weight: 700;
}
.ui-solid.ui-pill:hover { background: var(--k-solid-hover); color: var(--k-solid-ink); }
.ui-solid.ui-pill:not(.ui-md):not(.ui-lg) { background: var(--k-solid-soft); }
.ui-solid.ui-pill:not(.ui-md):not(.ui-lg):hover { background: var(--k-solid); }
/* box: any pill, select or field as a rounded box instead of a capsule */
.ui-box.ui-pill, .ui-box.ui-field, .ui-box.ui-chip { border-radius: calc(var(--h) * var(--k-round)); }

/* ---------------------------------------------------------------- toggle */
/* pills joined in one capsule; the highlight slides under the chosen one */
.ui-toggle {
    --h: var(--k-h-sm);
    position: relative;
    display: inline-flex;
    height: var(--h);
    padding: 2px;
    border: 1px solid var(--k-line);
    border-radius: calc(var(--h) * var(--k-round));
    background: var(--k-glass);
    font: 700 var(--k-t-sm)/1 var(--k-font);
}
.ui-toggle.ui-accent { background: var(--k-lime-strong); border-color: transparent; }
/* accent: a rounded box, the picked half fills edge to edge and tucks over the other */
.ui-toggle.ui-accent { --r: calc(var(--h) * var(--k-round)); padding: 0; border: 0; border-radius: var(--r); }
.ui-toggle.ui-accent .ui-slide { top: 0; bottom: 0; border-radius: var(--r); box-shadow: none; }
.ui-toggle.ui-accent .ui-seg { gap: .55em; padding: 0 calc(var(--h) * 0.46); }
.ui-toggle.ui-accent .ui-icon { width: 1.45em; height: 1.45em; stroke-width: 2.1; }
.ui-toggle.ui-accent .ui-icon.i-at { width: 1.15em; height: 1.15em; stroke-width: 2.2; } /* the @ reads as a letter */
.ui-toggle.ui-accent::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(40, 60, 20, .45);
    pointer-events: none;
}
.ui-toggle .ui-seg {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--k-s2);
    padding: 0 calc(var(--h) * 0.38);
    border: 0;
    border-radius: calc(var(--h) * var(--k-round));
    background: none;
    color: var(--k-muted);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s ease;
}
.ui-toggle .ui-seg:hover { color: var(--k-text); }
.ui-toggle .ui-seg.is-on { color: var(--k-on-lime); }
.ui-toggle.ui-accent .ui-seg { color: var(--k-on-lime); }
.ui-toggle .ui-seg:focus-visible { outline: 2px solid var(--k-lime); outline-offset: -2px; }
.ui-toggle .ui-seg .ui-count { opacity: .6; }
.ui-toggle .ui-slide {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 0;
    border-radius: calc((var(--h) - 4px) * var(--k-round));
    background: var(--k-lime);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    transition: transform .42s var(--k-spring), width .42s var(--k-spring);
}

/* stack: the state switch. Each state is a rounded block in its own color,
   tucked under the one before it. Off: near black, grey text. On: the state's
   color, dark text. The olive-gold ring marks the block under the pointer or
   keyboard. With multi, several can be on. */
.ui-toggle.ui-stack {
    --r: calc(var(--h) * var(--k-round));
    padding: 0;
    border: 0;
    border-radius: var(--r);
    background: none;
    font-weight: 600;
}
.ui-stack .ui-slide { display: none; }
/* off: see-through with a border in the state's color, grey text.
   on: solid in that color, dark text. Each block slides well under the one
   before it, so the joins are clean (no notch at the rounded corners); "off"
   paints the surface behind so the block underneath doesn't show through. */
.ui-stack .ui-seg {
    --on: var(--k-seg-green);
    --off: var(--k-seg-surface);
    --off-ink: var(--k-seg-off-ink);
    --edge: var(--on);
    gap: .3em;
    margin-left: calc(var(--r) * -2);
    padding: 0 calc(var(--h) * 0.42) 0 calc(var(--h) * 0.42 + var(--r) * 2);
    border-radius: var(--r);
    background: var(--off);
    box-shadow: inset 0 0 0 1.5px var(--edge);
    color: var(--off-ink);
    font-weight: 700;
    transition: background .3s var(--k-ease), color .3s var(--k-ease), box-shadow .3s var(--k-ease);
}
.ui-stack .ui-seg:first-of-type { margin-left: 0; padding-left: calc(var(--h) * 0.42); }
.ui-stack .ui-seg:hover { color: var(--k-n64b); }
.ui-stack .ui-seg.is-on, .ui-stack .ui-seg.is-on:hover { background: var(--on); box-shadow: none; color: var(--k-seg-ink); }
/* calm: on is the state's color sunk into the dark behind it, with light text
   (the same order of colors, without a bright block pulling the eye) */
.ui-stack.ui-calm .ui-seg.is-on, .ui-stack.ui-calm .ui-seg.is-on:hover {
    background: color-mix(in srgb, var(--on) 64%, var(--k-seg-surface));
    color: color-mix(in srgb, var(--on) 22%, var(--k-seg-ink));   /* dark text, a touch of the state's hue */
}
.ui-stack.ui-calm .ui-seg { --edge: color-mix(in srgb, var(--on) 45%, var(--k-seg-surface)); }
.ui-stack .ui-seg:focus-visible { outline: 2px solid var(--k-lime); outline-offset: 2px; }
/* All on: only All lights up; the states show as off (picking one shows just it) */
.ui-stack.is-all .ui-seg.is-on:not([data-all]),
.ui-stack.is-all .ui-seg.is-on:not([data-all]):hover {
    background: var(--off);
    box-shadow: inset 0 0 0 1.5px var(--edge);
    color: var(--off-ink);
}
.ui-stack.ui-calm.is-all .ui-seg.is-on:not([data-all]) { background: var(--k-seg-surface); color: var(--k-seg-off-ink); }
.ui-stack .ui-seg .ui-count { opacity: 1; }
.ui-stack .ui-seg.s-grey { --on: var(--k-seg-grey); }
.ui-stack .ui-seg.s-yellow { --on: var(--k-seg-yellow); }
.ui-stack .ui-seg.s-green { --on: var(--k-seg-green); }
.ui-stack .ui-seg.s-teal { --on: var(--k-seg-teal); }
.ui-stack .ui-seg.s-turquoise { --on: var(--k-seg-turquoise); }
/* "All" when off looks like any state that is off (see-through, its color as the
   outline, dim text): a filled block would read as on */
.ui-stack .ui-seg[data-all] { --on: var(--k-teal); }
/* All lights up like every other state (its color: --k-seg-turquoise, the blue) */

/* ---------------------------------------------------------------- chip */
/* a value with a grip: list tabs, row values, filters. Two parts: the label
   block in the chip's tint, tucked over the grip block, a shade deeper. */
.ui-chip {
    --h: var(--k-h-sm);
    --r: calc(var(--h) * var(--k-round));
    --tint: var(--k-glass-hover);
    --ink: var(--k-text);
    --grip-ink: var(--ink);
    display: inline-flex;
    align-items: stretch;
    height: var(--h);
    border-radius: var(--r);
    background: linear-gradient(rgba(0, 0, 0, .17), rgba(0, 0, 0, .17)), var(--tint);
    color: var(--ink);
    font: 700 var(--k-t-sm)/1 var(--k-font);
    white-space: nowrap;
    transition: background .15s ease, box-shadow .15s ease;
}
.ui-chip > * { display: inline-flex; align-items: center; border: 0; color: inherit; font: inherit; cursor: pointer; }
.ui-chip .ui-chip-label {
    position: relative;
    z-index: 1;
    gap: var(--k-s2);
    padding: 0 calc(var(--h) * 0.45);
    border-radius: var(--r);
    background: var(--tint);
}
.ui-chip .ui-grip {
    margin-left: calc(var(--r) * -1);
    padding: 0 calc(var(--h) * 0.3) 0 calc(var(--h) * 0.24 + var(--r));
    border-radius: 0 var(--r) var(--r) 0;
    background: none;
    color: var(--grip-ink);
    opacity: .75;
}
.ui-chip .ui-grip .ui-icon { stroke-width: 2.4; }
.ui-chip .ui-grip:hover { opacity: 1; }
/* outline: see-through with a thin border, dim text (the lists not shown) */
.ui-chip.ui-outline {
    --ink: var(--k-n49);
    --grip-ink: var(--k-n63);
    background: none;
    box-shadow: inset 0 0 0 1.5px var(--k-n27);
}
.ui-chip.ui-outline .ui-chip-label { background: none; }
.ui-chip.ui-outline:hover { --ink: var(--k-muted); box-shadow: inset 0 0 0 1.5px var(--k-n34); }
/* on: the chosen one, lime (wins over outline) */
.ui-chip.is-on, .ui-chip.ui-outline.is-on {
    --tint: var(--k-lime);
    --ink: var(--k-on-lime);
    --grip-ink: color-mix(in oklab, var(--k-on-lime) 70%, var(--k-lime-strong));
    background: var(--k-lime-strong);
    box-shadow: none;
}
.ui-chip.is-on .ui-chip-label { background: var(--tint); }
.ui-chip.c-blue { --tint: var(--k-blue); --ink: var(--k-blue-text); }
.ui-chip.c-red { --tint: var(--k-red); --ink: var(--k-red-text); }
.ui-chip.c-green { --tint: var(--k-green); --ink: var(--k-green-text); }
.ui-chip.c-yellow { --tint: var(--k-yellow); --ink: var(--k-yellow-text); }
.ui-chip.c-purple { --tint: var(--k-purple); --ink: var(--k-purple-text); }
.ui-chip.c-black { --tint: var(--k-black); --ink: var(--k-black-text); }
.ui-chip.c-turquoise { --tint: var(--k-turquoise); --ink: var(--k-turquoise-text); }
.ui-chip.c-pink { --tint: var(--k-pink); --ink: var(--k-pink-text); }
/* a run of chips side by side, like the list tabs */
.ui-track {
    display: inline-flex;
    flex-wrap: wrap;
    gap: calc(var(--k-h-sm) * 0.3);
}

/* ---------------------------------------------------------------- select */
.ui-select { justify-content: space-between; }
.ui-select .ui-select-label { overflow: hidden; text-overflow: ellipsis; }
.ui-select .ui-select-label.is-empty { color: var(--k-faint); }
.ui-select .ui-caret { opacity: .6; transition: transform .2s ease; }
.ui-select[aria-expanded="true"] .ui-caret { transform: rotate(180deg); }
.ui-select.ui-solid .ui-select-label.is-empty { color: var(--k-solid-ink); }
.ui-select.ui-wide { min-width: 13em; }
/* the one dropdown every select shares */
.ui-menu {
    position: fixed;
    z-index: 1000;
    min-width: 160px;
    max-height: 320px;
    overflow: auto;
    padding: var(--k-s1);
    border: 1px solid var(--k-line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--k-sheet) 94%, transparent);   /* the panels' color (it follows themes and light mode) */
    backdrop-filter: var(--k-blur);
    -webkit-backdrop-filter: var(--k-blur);
    box-shadow: 0 16px 40px rgb(var(--k-shadow-rgb) / calc(.45 * var(--k-shadow-k)));
    font: 500 var(--k-t-md)/1.2 var(--k-font);
    animation: ui-pop .14s var(--k-ease);
}
.ui-menu .ui-option {
    display: flex;
    align-items: center;
    gap: var(--k-s2);
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--k-muted);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ui-menu .ui-option:hover, .ui-menu .ui-option.is-focus { background: var(--k-glass-hover); color: var(--k-text); }
.ui-menu .ui-option.is-on { color: var(--k-lime); }
.ui-menu .ui-option .ui-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink, var(--k-faint)); }
.ui-menu .ui-option .ui-icon { width: 1.05em; height: 1.05em; }
/* ui.menu with multi: a tick on the options that are on */
.ui-menu .ui-option .ui-tick { display: inline-flex; margin-left: auto; padding-left: var(--k-s3); opacity: 0; color: var(--k-lime); }
.ui-menu .ui-option.is-on .ui-tick { opacity: 1; }
.ui-menu.ui-multi .ui-option.is-on { color: var(--k-text); }
/* the page blurred behind a menu or a pop (blur: true) */
.ui-pop-scrim { position: fixed; inset: 0; z-index: 999; background: color-mix(in srgb, var(--k-scrim) 58%, transparent);-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: ui-fade .16s ease; }
/* ui.pop: a bubble with shapes in it, not options */
.ui-menu.ui-pop { padding: 10px; }
.ui-menu.ui-pop .ui-toggle { --k-seg-surface: var(--k-n21); }
/* phones: a dialog sits near the top (the keyboard covers the lower half, and iOS does
   not shrink the viewport for it); with the keyboard up (body.k-keyboard, kit.js) it
   moves right under the status bar and keeps to the room left */
@media (max-width: 760px) {
    .ui-scrim { align-items: flex-start; padding-top: calc(10vh + env(safe-area-inset-top, 0px)); }
    body.k-keyboard .ui-scrim { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
    .ui-dialog { max-height: 80vh; }
    body.k-keyboard .ui-dialog { max-height: calc(var(--k-vvh, 60vh) - 24px); }
    /* a panel on a phone: the sections become a row on top, the side column goes under */
    .ui-dialog.ui-panel { flex-direction: column; }
    .ui-dialog.ui-panel.ui-sheet { height: auto; max-height: 86vh; }
    .ui-panel .ui-panel-nav { flex-direction: row; width: auto; padding: 10px 12px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--k-line); }
    .ui-nav-item { flex: none; height: 30px; font-size: var(--k-t-sm); }
    .ui-panel .ui-panel-head { padding: 16px 14px 10px 18px; }
    .ui-panel .ui-panel-body { padding: 4px 18px 18px; }
    .ui-panel .ui-panel-tab.has-side { grid-template-columns: 1fr; }
    .ui-panel .ui-panel-side { margin: 0; padding: 0; border-left: 0; }
}

/* ---------------------------------------------------------------- field */
/* an input in a pill, with an optional icon and a round go button */
.ui-field {
    --h: var(--k-h-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--k-s2);
    height: var(--h);
    padding: 0 3px 0 calc(var(--h) * 0.36);
    border: 1px solid var(--k-line);
    border-radius: calc(var(--h) * var(--k-round));
    background: var(--k-glass);
    color: var(--k-muted);
    font: 500 var(--k-t-sm)/1 var(--k-font);
    transition: border-color .15s ease, background .15s ease;
}
.ui-field:focus-within { border-color: var(--k-lime-line); }
.ui-field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: none;
    color: var(--k-text);
    font: inherit;
}
.ui-field input::placeholder { color: var(--k-faint); }
.ui-field .ui-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: calc(var(--h) - 8px);
    height: calc(var(--h) - 8px);
    border: 0;
    border-radius: calc((var(--h) - 8px) * var(--k-round));
    background: var(--k-glass-hover);
    color: var(--k-text);
    cursor: pointer;
    transition: transform .1s ease;
}
.ui-field .ui-go:active { transform: scale(.94); }
.ui-field.ui-accent { background: var(--k-lime); border-color: transparent; color: var(--k-on-lime); }
.ui-field.ui-accent input { color: var(--k-on-lime); }
.ui-field.ui-accent input::placeholder { color: rgba(22, 35, 14, .55); font-style: italic; }
.ui-field.ui-accent .ui-go { background: var(--k-lime-strong); color: var(--k-on-lime); }
/* the accent field's go is a full-height block at its end, like the mockup's email field */
.ui-field.ui-accent { padding-right: 0; }
.ui-field.ui-accent .ui-go { width: calc(var(--h) * 1.05); height: 100%; border-radius: calc(var(--h) * var(--k-round)); }
.ui-field.ui-plain { background: none; border-color: transparent; }
.ui-field.ui-plain input::placeholder { color: var(--k-solid-faint); font-style: italic; }
/* a value the browser filled in (the login's saved email): it paints its own light box
   and dark text in the field. The box never arrives (its fade lasts a week), the text
   keeps the field's ink; on the solid lime, the lime is painted over the box too */
.ui-field input:-webkit-autofill, .ui-field input:-webkit-autofill:hover, .ui-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--k-text);
    caret-color: var(--k-text);
    transition: background-color 600000s 0s, color 600000s 0s;
}
.ui-field.ui-accent input:-webkit-autofill, .ui-field.ui-accent input:-webkit-autofill:hover, .ui-field.ui-accent input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--k-on-lime);
    caret-color: var(--k-on-lime);
    box-shadow: 0 0 0 100px var(--k-lime) inset;
}

/* ---------------------------------------------------------------- code */
/* one real input (paste, autofill, the server's typing check) drawn as boxes */
.ui-code { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: var(--k-s4); }
.ui-code .ui-boxes { display: flex; gap: clamp(8px, 1.6vw, 18px); }
.ui-code .ui-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(40px, 6vw, 78px);
    aspect-ratio: 78 / 132;
    border: 2px solid var(--k-lime-line);
    border-radius: clamp(10px, 1.4vw, 18px);
    color: var(--k-text);
    font: 500 clamp(24px, 3.6vw, 46px)/1 var(--k-font);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ui-code .ui-box.is-next { border-color: var(--k-lime); box-shadow: 0 0 0 4px var(--k-lime-soft); }
.ui-code.is-error .ui-box { border-color: var(--k-danger); animation: ui-shake .3s; }
.ui-code.is-busy .ui-box { opacity: .5; }
.ui-code input {
    position: absolute;
    inset: 0 0 auto 0;
    height: 100%;
    opacity: 0;
    border: 0;
    font-size: 16px; /* no zoom on phones */
    caret-color: transparent;
}
.ui-code .ui-hint { color: var(--k-lime-line); font: italic 500 var(--k-t-lg)/1 var(--k-font); }
.ui-code.is-error .ui-hint { color: var(--k-danger); }

/* ---------------------------------------------------------------- dialogs */
.ui-scrim {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--k-s4);
    background: var(--k-scrim);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: ui-fade .15s ease;
}
.ui-dialog {
    display: flex;
    flex-direction: column;
    gap: var(--k-s4);
    width: min(420px, 100%);
    max-height: calc(100vh - 2 * var(--k-s4));
    padding: var(--k-s5);
    border: 1px solid rgb(var(--k-hi) / .07);
    border-radius: var(--k-r-dialog);
    background: var(--k-panel);         /* the composer's dark: the same family */
    box-shadow: 0 24px 60px rgb(var(--k-shadow-rgb) / calc(.5 * var(--k-shadow-k)));
    color: var(--k-text);
    font: 500 var(--k-t-md)/1.45 var(--k-font);
    animation: ui-pop .18s var(--k-ease);
}
.ui-dialog.ui-panel { width: min(760px, 100%); padding: 0; gap: 0; }
.ui-dialog h2 { margin: 0; font: 700 var(--k-t-lg)/1.2 var(--k-font); letter-spacing: -.01em; }
.ui-dialog, .ui-dialog * { box-sizing: border-box; }
/* the brand mark before the title: the lime of Login and the open tab */
.ui-dialog:not(.ui-panel) h2::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-radius: 3px;
    background: var(--k-lime);
    vertical-align: 1px;
}
.ui-dialog .ui-enter-hint { margin-right: auto; align-self: center; color: var(--k-faint); font-size: var(--k-t-sm); }
.ui-dialog p { margin: 0; color: var(--k-muted); }
.ui-dialog .ui-field { width: 100%; }
.ui-dialog .ui-actions { display: flex; justify-content: flex-end; gap: var(--k-s2); }
/* the large dialog: [sections | page]. The page: eyebrow + italic title, tools at
   the top right, then the open section, with a side column when it has one */
.ui-dialog.ui-panel { flex-direction: row; overflow: hidden; background: var(--k-sheet); }
.ui-dialog.ui-panel.ui-sheet { width: min(1060px, 100%); height: min(720px, 100%); }
.ui-panel .ui-panel-page { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ui-panel .ui-panel-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: none;
    min-width: 148px;
    padding: 22px 10px 12px;
    border-right: 1px solid var(--k-line);
    background: var(--k-sheet-nav);
}
.ui-nav-item {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 12px;
    border: 1.5px solid transparent;
    border-radius: calc(34px * var(--k-round));
    background: none;
    color: var(--k-n56);
    font: 700 var(--k-t-md)/1 var(--k-font);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease, border-color .2s ease, background .15s ease;
}
.ui-nav-item .ui-icon { width: 1em; height: 1em; opacity: .7; }
.ui-nav-item:hover { color: var(--k-n73); }
.ui-nav-item.is-on { border-color: var(--k-n42); color: var(--k-solid-ink); }
.ui-nav-item:focus-visible { outline: 2px solid var(--k-lime); outline-offset: 2px; }
.ui-panel .ui-panel-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--k-s3);
    padding: 26px 22px 14px 32px;
}
.ui-panel .ui-panel-titles { flex: 1; min-width: 0; }
.ui-panel .ui-panel-head h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-panel.ui-sheet .ui-panel-head h2 {
    margin-top: 6px;
    white-space: normal;
    color: var(--k-solid-ink);
    font: italic 700 21px/1.25 var(--k-font);
    letter-spacing: -.01em;
}
.ui-eyebrow { display: flex; align-items: center; gap: 7px; color: var(--k-n63); font: 700 13px/1 var(--k-font); }
.ui-eyebrow i { color: var(--k-n47); font-style: normal; font-weight: 600; }
.ui-panel .ui-panel-tools { display: flex; gap: 6px; flex: none; }
.ui-panel .ui-panel-tools .ui-pill { --h: 26px; }
.ui-edit-link {
    position: absolute;
    right: 22px;
    bottom: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: #4b8fb3;
    font: italic 700 var(--k-t-sm)/1 var(--k-font);
    cursor: pointer;
}
.ui-edit-link:hover { color: var(--k-teal-ink); }
.ui-panel .ui-panel-top { flex: none; padding: 0 32px 12px; border-bottom: 1px solid var(--k-line); }
.ui-panel .ui-panel-body { flex: 1; overflow: auto; padding: 4px 32px 26px; }
.ui-panel .ui-panel-tab[hidden] { display: none; }
.ui-panel .ui-panel-tab.has-side { display: grid; grid-template-columns: minmax(0, 1fr) 196px; gap: 18px; min-height: 100%; }
/* (a hidden section stays hidden, side column or not: the grid above is as strong as [hidden]) */
.ui-panel .ui-panel-tab.has-side[hidden] { display: none; }
.ui-panel .ui-panel-side { margin: -4px -32px -26px 0; padding: 4px 18px 26px; border-left: 1px solid var(--k-line); }
.ui-panel .ui-actions { padding: var(--k-s3) var(--k-s4); border-top: 1px solid var(--k-line); }

/* the panel's tools: prev / next joined in one solid piece, the close beside it */
.ui-panel .ui-panel-tools { align-items: center; gap: 8px; }
/* (!important: .ui-solid's small size paints its own background, with more classes) */
.ui-panel .ui-panel-tools .ui-pill { --h: 28px; background: var(--k-n29) !important; color: var(--k-solid-ink) !important; }
.ui-panel .ui-panel-tools .ui-pill:hover { background: var(--k-n35) !important; color: var(--k-solid-ink) !important; }
.ui-panel .ui-panel-tools .ui-icon { stroke-width: 2.6; }
.ui-panel-steps { display: inline-flex; padding: 2px; gap: 2px; border-radius: calc(32px * var(--k-round)); background: var(--k-n29); }
.ui-panel-steps .ui-pill { --h: 26px !important; background: none !important; }
.ui-panel-steps .ui-pill:hover { background: var(--k-n35) !important; }
.ui-panel .ui-panel-tools .js-close { background: var(--k-solid-ink) !important; color: var(--k-sheet) !important; }
.ui-panel .ui-panel-tools .js-close:hover { background: var(--k-danger-soft) !important; color: var(--k-danger) !important; }

/* viewer: one file over everything, its name and Download on top, arrows on the sides */
.ui-dialog.ui-viewer {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: none;
    padding: 0;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.ui-scrim:has(.ui-viewer) { padding: 14px; background: rgba(6, 5, 7, .9); }
.ui-viewer-bar { display: flex; align-items: center; gap: 8px; flex: none; }
.ui-viewer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--k-n73); font: 700 var(--k-t-sm)/1 var(--k-font); }
.ui-viewer-bar .ui-pill.ui-outline { border-color: var(--k-n42); color: var(--k-n83); text-decoration: none; }
.ui-viewer-stage { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; }
.ui-viewer-stage img, .ui-viewer-stage video { max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; animation: ui-pop .2s var(--k-ease); }
.ui-viewer-stage iframe { width: min(1000px, 100%); height: 100%; border: 0; border-radius: 12px; background: #fff; }
.ui-viewer-stage audio { width: min(520px, 100%); }
.ui-viewer-doc { width: min(860px, 100%); max-height: 100%; overflow: auto; padding: 22px 26px; border-radius: 14px; background: var(--k-sheet-raised); border: 1px solid var(--k-n35b); color: var(--k-solid-ink); }
.ui-viewer-doc pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: 500 13.5px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.ui-viewer .ui-viewer-prev, .ui-viewer .ui-viewer-next { position: absolute; top: 50%; margin-top: -22px; background: rgba(20, 18, 22, .7); border-color: var(--k-n42); color: var(--k-n83); }
.ui-viewer .ui-viewer-prev { left: 4px; }
.ui-viewer .ui-viewer-prev .ui-icon { transform: rotate(180deg); }
.ui-viewer .ui-viewer-next { right: 4px; }

/* art: small drawings for the top of a panel (ui.art), drawn with the kit's colors:
   flat shapes, thin lines, one calm motion (lights along the links, the listening dot) */
.ui-art { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; overflow: visible; color: var(--k-n63); }
.ui-art-links path { fill: none; stroke: url(#ui-art-fade); stroke-width: 1.5; color: var(--k-n63); }
.ui-art-setup .ui-art-links path { stroke: url(#ui-art-fade2); }
.ui-art-flap { fill: none; stroke: var(--k-n63); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ui-art-badge-dot { fill: var(--k-lime); stroke: var(--k-sheet); stroke-width: 2.5; }
/* "remind": the clock, the reminder card with its lime edge, the 2do's ping */
.ui-art-clock-face { fill: var(--k-sheet-raised); stroke: var(--k-n47); stroke-width: 2; }
.ui-art-clock-mark { stroke: var(--k-n53); stroke-width: 2; stroke-linecap: round; }
.ui-art-clock-hand { stroke: var(--k-lime); stroke-width: 2.6; stroke-linecap: round; }
.ui-art-clock-hand.is-short { stroke: var(--k-n63); stroke-width: 2.6; }
.ui-art-clock-pin { fill: var(--k-lime); }
.ui-art-note-edge { fill: var(--k-lime); }
.ui-art-note-title { fill: var(--k-lime); opacity: .75; }
.ui-art-remind-ping { fill: none; stroke: var(--k-seg-yellow); stroke-width: 2; }
.ui-art-spark { fill: var(--k-lime); }
.ui-art-spark.is-agent { fill: var(--k-teal); }
.ui-art-row { fill: var(--k-sheet-raised); stroke: var(--k-line); stroke-width: 1; }
.ui-art-row.is-back { opacity: .45; }
.ui-art-dot { fill: var(--k-seg-yellow); }
.ui-art-bar { fill: var(--k-n63); }
.ui-art-bar.is-soft { fill: var(--k-n47); }
.ui-art-chip { fill: var(--k-n34); }
.ui-art-chip.is-state { fill: color-mix(in srgb, var(--k-seg-yellow) 35%, transparent); }
.ui-art-face circle { stroke: var(--k-sheet); stroke-width: 3; }
.ui-art-face.is-a circle { fill: color-mix(in srgb, var(--k-pink-text) 70%, var(--k-sheet)); }
.ui-art-face.is-b circle { fill: color-mix(in srgb, var(--k-turquoise-text) 70%, var(--k-sheet)); }
.ui-art-face text { fill: var(--k-sheet); font: 800 13px/1 var(--k-font); text-anchor: middle; }
.ui-art-tile { fill: var(--k-solid); stroke: var(--k-line); stroke-width: 1; }
.ui-art-sparkle { fill: var(--k-lime); }
.ui-art-live { fill: var(--k-lime); stroke: var(--k-sheet); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: ui-art-live 2.4s ease-in-out infinite; }
@keyframes ui-art-live { 50% { opacity: .55; transform: scale(.8); } }
/* "setup": you, your space, your agent; a check pops onto each in turn (6s, then again) */
.ui-art-face.is-you circle { fill: color-mix(in srgb, var(--k-lime) 70%, var(--k-sheet)); stroke: var(--k-sheet); stroke-width: 3; }
.ui-art-face.is-you text { font-size: 16px; }
.ui-art-band { fill: var(--k-lime); opacity: .85; }
.ui-art-badge circle { fill: var(--k-lime); stroke: var(--k-sheet); stroke-width: 2.5; }
.ui-art-badge path { fill: none; stroke: var(--k-on-lime); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ui-art-badge { transform: scale(0); animation: ui-art-badge 6s var(--k-spring) infinite; }
.ui-art-badge.is-2 { animation-name: ui-art-badge-2; }
.ui-art-badge.is-3 { animation-name: ui-art-badge-3; }
@keyframes ui-art-badge   { 0%, 8%  { transform: scale(0); } 12% { transform: scale(1.2); } 15%, 90% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes ui-art-badge-2 { 0%, 24% { transform: scale(0); } 28% { transform: scale(1.2); } 31%, 90% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes ui-art-badge-3 { 0%, 44% { transform: scale(0); } 48% { transform: scale(1.2); } 51%, 90% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) { .ui-art * { animation: none !important; } .ui-art-spark { display: none; } .ui-art-badge { transform: none; } }

/* agent marks (ui.agent_mark): lime on the agent's tile, a calm motion each */
.ui-agent-mark { width: 1em; height: 1em; overflow: visible; }
.ui-agent-mark .am-dot { fill: var(--k-lime); }
.ui-agent-mark .am-arc, .ui-agent-mark .am-line { fill: none; stroke: var(--k-lime); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ui-agent-mark .am-arc.is-out { opacity: .45; animation: am-out 2.4s ease-in-out infinite; }
.ui-agent-mark .am-cursor { animation: am-blink 1.1s steps(1) infinite; }
.ui-agent-mark .am-live { transform-box: fill-box; transform-origin: center; animation: ui-art-live 2.4s ease-in-out infinite; }
.ui-agent-mark .am-px { fill: var(--k-lime); }
.ui-agent-mark .am-px.is-tip { animation: am-flicker 1.8s steps(2) infinite; }
.ui-agent-mark .am-px.is-tip:nth-of-type(odd) { animation-delay: .9s; }
.ui-agent-mark .am-eyes { transform-box: fill-box; transform-origin: center; animation: am-eyes 4.5s ease-in-out infinite; }
.ui-agent-mark .am-star { fill: var(--k-lime); }
.ui-agent-mark .am-small { transform-box: fill-box; transform-origin: center; animation: am-twinkle 2.2s ease-in-out infinite; }
.ui-agent-mark .am-line.is-bold { stroke-width: 3; }
.ui-agent-mark .am-block { animation: am-blink 1.1s steps(1) infinite; }
.ui-agent-mark .am-type { opacity: 0; animation: am-type 2.6s steps(1) infinite; }
.ui-agent-mark .am-type.is-2 { animation-name: am-type-2; }
.ui-agent-mark .am-type.is-3 { animation-name: am-type-3; }
.ui-agent-mark .am-glow { fill: var(--k-lime); opacity: .12; transform-box: fill-box; transform-origin: center; animation: am-glow 2.8s ease-in-out infinite; }
@keyframes am-type   { 0%, 15% { opacity: 0; } 15.1%, 85% { opacity: 1; } 85.1%, 100% { opacity: 0; } }
@keyframes am-type-2 { 0%, 35% { opacity: 0; } 35.1%, 85% { opacity: 1; } 85.1%, 100% { opacity: 0; } }
@keyframes am-type-3 { 0%, 55% { opacity: 0; } 55.1%, 85% { opacity: 1; } 85.1%, 100% { opacity: 0; } }
@keyframes am-glow { 50% { opacity: .26; transform: scale(1.12); } }
/* glitter: bits in three shades that light up and fade where they are (they never move) */
.ui-agent-mark .am-glit { opacity: 0; transform-box: fill-box; transform-origin: center; animation: am-glit 2.8s ease-in-out infinite; }
.ui-agent-mark .am-glit.is-a { fill: color-mix(in oklab, var(--k-lime), #fff 35%); }
.ui-agent-mark .am-glit.is-b { fill: color-mix(in oklab, var(--k-lime) 75%, var(--k-seg-teal)); }
.ui-agent-mark .am-glit.is-c { fill: var(--k-lime); }
@keyframes am-glit { 0%, 100% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1); } 55% { opacity: .15; transform: scale(.7); } }
/* the wave orb: long waves drifting sideways, each its own pace and way; paler at the
   top. It fills its tile; on a light page the accent's deeper shade, to be seen */
.ui-agent-mark.am-waves { --k-wave: var(--k-lime); width: 1.6em; height: 1.6em; }
.k-light .ui-agent-mark.am-waves { --k-wave: var(--k-lime-line); }
.ui-agent-mark .am-wave { fill: none; stroke: var(--k-wave); stroke-linecap: round; animation: am-flow 6s linear infinite; }
.ui-agent-mark .am-wave.is-0 { opacity: .4; animation-duration: 7s; }
.ui-agent-mark .am-wave.is-1 { opacity: .58; animation-duration: 5.4s; animation-direction: reverse; }
.ui-agent-mark .am-wave.is-2 { opacity: .74; animation-duration: 6.4s; }
.ui-agent-mark .am-wave.is-3 { opacity: .88; animation-duration: 4.8s; animation-direction: reverse; }
.ui-agent-mark .am-wave.is-4 { animation-duration: 5.8s; }
@keyframes am-flow { from { transform: translateX(0); } to { transform: translateX(-16px); } }
/* the misty orb: three waves at their own pace (each shifts by its own length) */
.ui-agent-mark .am-mist-wave { fill: none; stroke: var(--k-wave); stroke-linecap: round; animation: am-mist-flow 9s linear infinite; }
.ui-agent-mark .am-mist-wave.is-0 { animation-duration: 11s; }
.ui-agent-mark .am-mist-wave.is-1 { animation-duration: 6.5s; animation-direction: reverse; }
.ui-agent-mark .am-mist-wave.is-2 { animation-duration: 8.5s; }
.ui-agent-mark .am-mist-wave.is-3 { animation-duration: 7.4s; animation-direction: reverse; }
.ui-agent-mark .am-mist-wave.is-4 { animation-duration: 9.6s; }
/* randomness: each wave's group breathes (height), drifts (up and down) and dims, each with
   unrelated durations and starting points, so the orb keeps changing */
.ui-agent-mark .am-mist-g { transform-box: fill-box; transform-origin: center;
    animation: am-breath var(--b, 9s) ease-in-out infinite alternate, am-drift var(--d, 11s) ease-in-out infinite alternate, am-dim var(--o, 7s) ease-in-out infinite alternate; }
.ui-agent-mark .am-mist-g.is-0 { --b: 7.9s; --d: 13.7s; --o: 5.3s; animation-delay: -3.1s, -8.2s, -1.4s; }
.ui-agent-mark .am-mist-g.is-1 { --b: 11.3s; --d: 8.9s; --o: 6.7s; animation-delay: -6.4s, -2.7s, -4.9s; }
.ui-agent-mark .am-mist-g.is-2 { --b: 9.1s; --d: 12.1s; --o: 4.7s; animation-delay: -1.8s, -10.3s, -3.3s; }
.ui-agent-mark .am-mist-g.is-3 { --b: 13.9s; --d: 7.3s; --o: 8.1s; animation-delay: -9.5s, -4.4s, -6.2s; }
.ui-agent-mark .am-mist-g.is-4 { --b: 10.7s; --d: 14.9s; --o: 5.9s; animation-delay: -4.6s, -12.8s, -2.2s; }
@keyframes am-breath { from { transform: scaleY(.55); } to { transform: scaleY(1.35); } }
@keyframes am-drift { from { translate: 0 -.9px; } to { translate: 0 .9px; } }
@keyframes am-dim { from { opacity: .55; } to { opacity: 1; } }
/* the magic: the shimmer's colors (the wave's own, a paler band) and the rising sparks */
.ui-agent-mark .am-shim-a { stop-color: var(--k-wave); }
.ui-agent-mark .am-shim-b { stop-color: color-mix(in oklab, var(--k-wave), #fff 60%); }
.ui-agent-mark .am-rise { fill: color-mix(in oklab, var(--k-wave), #fff 55%); }
/* the waves filling their tile: the mark is the tile (as wide and tall, its corners) */
.ui-agent-mark.am-mist3 { width: 2em; height: 2em; }
@keyframes am-mist-flow { from { transform: translateX(0); } to { transform: translateX(calc(var(--L) * -1)); } }
.ui-agent-mark .am-mer { fill: none; stroke: var(--k-wave); }
/* (W4: the waves under the meridians, quieter) */
.ui-agent-mark .am-orb.is-under { opacity: .55; }
.ui-agent-mark.am-globe2 .am-globe circle { stroke-opacity: .25; }
/* the orb: it breathes, the light inside swirls round, specks twinkle */
.ui-agent-mark .am-orb { transform-box: fill-box; transform-origin: center; animation: am-breathe 4s ease-in-out infinite; }
.ui-agent-mark .am-swirl { transform-origin: 12px 12px; animation: am-swirl 5s linear infinite; }
.ui-agent-mark .am-speck { opacity: 0; animation: am-speck 2.6s ease-in-out infinite; }
.ui-agent-mark .am-speck.is-2 { animation-delay: -.9s; }
.ui-agent-mark .am-speck.is-3 { animation-delay: -1.7s; }
/* ---------------------------------------------------------------- the blob
   The gradient bean: fields of colour drifting inside an organic shape, under
   grain. The reference runs teal - dark band - magenta - amber; this runs the
   kit's own hues over the same structure. Size it from the outside. */
.ui-blob { display: block; width: 212px; height: 257px; overflow: visible; }
.ui-blob .b-base { fill: var(--blob-base, #123a4e); }
/* the fields are paint, not light: they lay over each other in order, so the
   dark ones can actually darken (screen blending washed the whole thing out) */
.ui-blob ellipse { transform-box: fill-box; transform-origin: center; }
.ui-blob .b-aqua { fill: var(--blob-aqua, #2fd6d6); }
.ui-blob .b-lime { fill: var(--blob-lime, #e3dc5c); }
.ui-blob .b-mint { fill: var(--blob-mint, #4fc488); }
.ui-blob .b-blue { fill: var(--blob-blue, #1d4f92); }
.ui-blob .b-dark { fill: var(--blob-dark, #0c0714); opacity: .97; }
.ui-blob .b-dark.is-low { fill: var(--blob-dark2, #2a1038); }
.ui-blob .b-violet { fill: var(--blob-violet, #6b3fa8); opacity: .8; }
/* the grain: the reference is covered in it, and it is what keeps a gradient
   this smooth from reading as plastic */
.ui-blob .b-grain { opacity: .55; mix-blend-mode: overlay; }
/* the pulse: the brightness that travels the shape */
.ui-blob .b-pulse { fill: var(--blob-pulse, #eaffd9); }
@media (prefers-reduced-motion: reduce) { .ui-blob *, .ui-blob .b-fields { animation: none !important; } .ui-blob animate { display: none; } }

/* ---------------------------------------------------------------- the glow
   A sphere lit from below: near black at the top, blue through the middle,
   white at the foot, with a red-orange corona hugging the rim where the light
   reaches it. Measured off the reference. */
.ui-glow { display: block; width: 240px; height: 240px; overflow: visible; }
/* fields of light, laid over each other. No stroke, no rim, no edge: the mask
   is what ends it, and it ends by dissolving. */
.ui-glow .l-base { fill: #000; }
/* light, not paint: the fields add where they overlap, so the blue stays blue
   and the overlaps go white instead of everything settling into grey */
.ui-glow ellipse { transform-box: fill-box; transform-origin: center; mix-blend-mode: screen; }
.ui-glow .l-dark { fill: var(--glow-dark, #0a0820); mix-blend-mode: multiply; opacity: 1; }
.ui-glow .l-deep { fill: var(--glow-deep, #1b1fa8); }
.ui-glow .l-blue { fill: var(--glow-blue, #3f3cff); }
.ui-glow .l-pale { fill: var(--glow-pale, #7fa8f2); }
.ui-glow .l-white { fill: var(--glow-white, #f2f8fb); }
.ui-glow .l-hot { fill: var(--glow-hot, #ff3a12); }
.ui-glow .l-hot.is-low { fill: var(--glow-hot2, #ff7a2f); opacity: .7; }
.ui-glow .l-grain { opacity: .42; mix-blend-mode: overlay; }
@media (prefers-reduced-motion: reduce) { .ui-glow animate { display: none; } }

/* ---------------------------------------------------------------- the orb
   The light loop, from the references: a white-hot filament that wobbles, a
   narrow chromatic fringe outside it (hot over one arc, cool elsewhere), the
   bloom gone by 1.5R, near black inside. Colors are its own, not the theme's:
   this is a brand object, and the references are white + spectrum. Size it
   from the outside (width/height); everything inside scales with the box. */
.ui-orb { display: block; width: 240px; height: 240px; overflow: visible; }
.ui-orb .o-in-0 { stop-color: #000; stop-opacity: 1; }
.ui-orb .o-in-1 { stop-color: var(--orb-in, #241f4a); stop-opacity: .10; }
.ui-orb .o-in-2 { stop-color: var(--orb-in, #241f4a); stop-opacity: .34; }
/* the ambient bloom: cool violet-blue, the whole loop, low */
.ui-orb .o-bloom { stroke: var(--orb-bloom, #8a5fd8); stroke-width: 11; stroke-opacity: .42; }
/* the two colour arcs, outside the core, each going round at its own pace */
.ui-orb .o-warm { stroke: var(--orb-warm, #ff5a26); stroke-width: 4.6; stroke-opacity: .95; stroke-linecap: round; }
.ui-orb .o-cool { stroke: var(--orb-cool, #4f63f2); stroke-width: 5; stroke-opacity: .9; stroke-linecap: round; }
/* the filament: three widths over the same loop, white, blown out */
.ui-orb .o-core { stroke: var(--orb-core, #fff); stroke-linecap: round; }
.ui-orb .o-core.is-thin { stroke-width: 2.2; }
.ui-orb .o-core.is-mid { stroke-width: 3.2; }
.ui-orb .o-core.is-wide { stroke-width: 4.5; stroke-opacity: .9; }
/* the head: a hot length of the filament running round it, and the embers it
   throws off. This is what makes the loop read as something happening rather
   than a shape that happens to glow. */
.ui-orb .o-head { stroke: var(--orb-head, #bfe4ff); stroke-width: 7; stroke-opacity: .55; stroke-linecap: round; }
.ui-orb .o-head.is-hot { stroke: var(--orb-core, #fff); stroke-width: 3.4; stroke-opacity: 1; }
.ui-orb .o-bloom { animation: orb-breathe var(--bloom-beat, 5.5s) ease-in-out infinite; }
@keyframes orb-breathe { 50% { stroke-opacity: .72; stroke-width: 15; } }
@keyframes orb-turn { to { transform: rotate(360deg); } }
/* on a light page the loop would vanish: it keeps its own dark field behind it */
/* it is a light: on a light page it carries its own night, as a clean dark
   plate rather than a fade (a soft gradient there reads as a smudge) */
.k-light .ui-orb .o-in-0 { stop-color: #0a0912; stop-opacity: 1; }
.k-light .ui-orb .o-in-1 { stop-color: #0a0912; stop-opacity: 1; }
.k-light .ui-orb .o-in-2 { stop-color: #0a0912; stop-opacity: .9; }
@media (prefers-reduced-motion: reduce) { .ui-orb * { animation: none !important; } .ui-orb animate { display: none; } }

@keyframes am-breathe { 50% { transform: scale(1.04); } }
@keyframes am-swirl { to { transform: rotate(360deg); } }
@keyframes am-speck { 0%, 100% { opacity: 0; } 40% { opacity: .95; } 60% { opacity: .2; } }
@keyframes am-flicker { 50% { opacity: .25; } }
@keyframes am-eyes { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.12); } }
@keyframes am-twinkle { 50% { transform: scale(.55); opacity: .5; } }
@keyframes am-out { 50% { opacity: .1; } }
@keyframes am-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ui-agent-mark * { animation: none !important; } }

/* a section's name inside a panel */
.ui-label { margin: 22px 0 10px; color: var(--k-n53); font: italic 700 var(--k-t-sm)/1 var(--k-font); }
.ui-panel-body .ui-label:first-child, .ui-panel-main > .ui-label:first-child, .ui-panel-side > .ui-label:first-child { margin-top: 14px; }

/* stat: a number tile; outline draws the number as a line, for the quieter one */
.ui-stat {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 92px;
    height: 72px;
    padding: 0 14px;
    border-radius: 14px;
    background: var(--k-sheet-raised);
    color: var(--k-solid-ink);
}
.ui-stat b { font: italic 800 28px/1 var(--k-font); letter-spacing: -.02em; }
.ui-stat span { color: var(--k-n71); font: italic 700 11.5px/1 var(--k-font); }
.ui-stat.ui-outline b { color: transparent; -webkit-text-stroke: 1.2px var(--k-n71); font-weight: 500; }
.ui-stats { display: flex; flex-wrap: wrap; gap: 14px; }

/* drop: a dashed box that takes files (dropped, or picked with a click) */
.ui-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 84px;
    padding: 14px;
    border: 2px dashed var(--k-n40);
    border-radius: 14px;
    color: var(--k-n71);
    font: 700 var(--k-t-sm)/1.3 var(--k-font);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ui-drop .ui-drop-input { display: none !important; }
.ui-drop .ui-icon { width: 26px; height: 26px; stroke-width: 3; color: var(--k-n83); }
.ui-drop:hover { border-color: var(--k-n49); color: var(--k-solid-ink); }
.ui-drop.is-over { border-color: var(--k-teal); background: rgba(80, 169, 217, .08); color: var(--k-teal-ink); }

/* ---------------------------------------------------------------- toast */
.ui-toasts {
    position: fixed;
    right: var(--k-s4);
    bottom: var(--k-s4);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--k-s2);
    pointer-events: none;
}
.ui-toast {
    display: flex;
    align-items: baseline;
    gap: var(--k-s2);
    max-width: min(380px, calc(100vw - 2 * var(--k-s4)));
    padding: 11px 16px;
    border: 1px solid var(--k-line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--k-sheet) 96%, transparent);
    box-shadow: 0 10px 30px rgb(var(--k-shadow-rgb) / calc(.4 * var(--k-shadow-k)));
    color: var(--k-muted);
    font: 500 var(--k-t-sm)/1.35 var(--k-font);
    pointer-events: auto;
    animation: ui-rise .22s var(--k-ease);
}
.ui-toast b { color: var(--k-text); font-weight: 700; }
.ui-toast.ui-good b { color: var(--k-lime); }
.ui-toast.ui-bad b { color: var(--k-danger); }
.ui-toast.is-out { opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
.ui-toast.is-link { cursor: pointer; }
.ui-toast.is-link:hover { border-color: rgb(var(--k-hi) / .16); }
.ui-toast-x { display: inline-flex; margin-left: 4px; padding: 0; border: 0; background: none; color: var(--k-faint); cursor: pointer; align-self: center; }
.ui-toast-x:hover { color: var(--k-text); }
.ui-toast-label { font-style: normal; color: var(--k-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; align-self: center; }
/* wait: something is on hold until a person answers; it stays, with a lime edge */
.ui-toast.ui-wait { border-color: var(--k-lime-line); box-shadow: 0 10px 30px rgb(var(--k-shadow-rgb) / calc(.4 * var(--k-shadow-k))), inset 3px 0 0 var(--k-lime); }
.ui-toast.ui-wait b { color: var(--k-lime); }

/* ---------------------------------------------------------------- motion */
/* small and quick: things lift under the pointer, press in, pop into place */
.ui-chip { transition: background .15s ease, box-shadow .15s ease, transform .18s var(--k-spring); }
.ui-chip:hover { transform: translateY(-1px); }
.ui-chip:active { transform: scale(.97); }
.ui-toggle .ui-seg:active { transform: scale(.96); }
.ui-toggle .ui-seg { transition: color .2s ease, background .18s ease, box-shadow .18s ease, transform .18s var(--k-spring); }
.ui-stack .ui-seg.is-on { animation: ui-seg-on .32s var(--k-spring); }
.ui-code .ui-box.is-filled { animation: ui-digit .22s var(--k-spring); }
.ui-field.ui-accent .ui-go { transition: transform .18s var(--k-spring), background .15s ease; }
.ui-field.ui-accent .ui-go:hover { transform: translateX(2px); }
@keyframes ui-seg-on { 40% { filter: brightness(1.15); } }
@keyframes ui-digit { from { transform: scale(.82); } }

/* ---------------------------------------------------------------- sizes */
/* after every shape on purpose: each shape sets the small size as its default,
   and a size class must win over that (same weight, later in the file) */
.ui-pill.ui-md, .ui-toggle.ui-md, .ui-chip.ui-md, .ui-field.ui-md { --h: var(--k-h-md); font-size: var(--k-t-md); }
.ui-pill.ui-lg, .ui-toggle.ui-lg, .ui-chip.ui-lg, .ui-field.ui-lg { --h: var(--k-h-lg); font-size: var(--k-t-lg); }
.ui-lg .ui-icon { width: 1.3em; height: 1.3em; stroke-width: 1.8; }

/* ---------------------------------------------------------------- display type */
.ui-display {
    margin: 0;
    color: var(--k-n86);
    font: 800 var(--k-t-display)/.95 var(--k-font);
    letter-spacing: -.03em;
}
.ui-display i { font-style: italic; }
.ui-display .ui-outline-text {
    display: block;
    color: transparent;
    font-weight: 400;
    letter-spacing: -.01em;
    -webkit-text-stroke: 1.5px var(--k-lime-strong);
}

@keyframes ui-pop { from { opacity: 0; transform: translateY(4px) scale(.98); } }
@keyframes ui-fade { from { opacity: 0; } }
@keyframes ui-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes ui-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

@media (prefers-reduced-motion: reduce) {
    [class*="ui-"], [class*="ui-"] * { transition: none !important; animation: none !important; }
    .ui-pill:hover, .ui-chip:hover { transform: none; }
}