/* Kulip components, one stylesheet. Load after tokens.css.
   Copied from design/pages in kulip-io/kulip: the Components page (comps.py) keeps its own class names;
   every other page's parts are scoped under one root class (.tb, .talkbar, .effort-pop, .kdock, .kpanel,
   .aistate, .edith, .cf, .ml, .spotwrap, .askc, .hbar, .rxs) so nothing collides. Values are the pages' own. */

/* ------------------------------------------------------------------ 0. what tokens.json cannot carry */
:root { --focus-ring: 2px solid var(--focus); }
[data-theme="dark"] {
  color-scheme: dark;
  --voice-edith-bg: linear-gradient(90deg, #00364E 0%, #103155 35%, #2E2954 70%, #39254E 100%);
  --voice-advice-bg: linear-gradient(90deg, #482800 0%, #4F1E25 50%, #501E23 100%);
  --grad-text: linear-gradient(90deg, #56CCFE 0%, #B976FB 100%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  color-scheme: dark;
  --voice-edith-bg: linear-gradient(90deg, #00364E 0%, #103155 35%, #2E2954 70%, #39254E 100%);
  --voice-advice-bg: linear-gradient(90deg, #482800 0%, #4F1E25 50%, #501E23 100%);
  --grad-text: linear-gradient(90deg, #56CCFE 0%, #B976FB 100%);
} }
/* density: compact is the default; Settings > Appearance > Density > Comfortable sets data-density="comfortable" on <html> */
:root[data-density="comfortable"] {
  --h-sm: 30px; --h: 36px; --h-lg: 44px; --h-field: 38px; --h-row: 32px; --h-cmd: 36px; --h-chip: 28px; --h-send: 34px; --h-badge: 22px; --h-panel-head: 34px;
  --pad-btn-sm: 10px; --pad-btn: 14px; --pad-btn-lg: 18px; --pad-field: 12px; --pad-chip: 10px; --pad-seg: 3px;
  --pad-tab: 8px 0 10px; --pad-panel-head: 0 8px 0 14px; --pad-li: 10px 14px; --pad-cell: 10px 12px;
  --r-btn-sm: 8px; --r-btn: 10px; --r-btn-lg: 12px; --r-field: 10px; --fs-lg: 15px;
}

/* JetBrains Mono is caps only (#360, Roderic 27 Sep): every rule that sets --font-mono also sets text-transform: uppercase;
   code names use the system monospace and anything that needs lowercase uses Inter. */
/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; }
svg.lucide { width: 16px; height: 16px; stroke-width: 1.75; flex: none; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* preview scaffolding only */
.k-pad { padding: 12px 14px; }
.k-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.k-col { display: flex; flex-direction: column; gap: 10px; }
.k-lbl { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; width: 100%; margin: 2px 0 -4px; line-height: 1.2; }
.k-spec { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); margin: 0; }
.k-spec b { color: var(--ink-2); font-weight: 600; }
.k-ground { background: var(--ground); }

/* ------------------------------------------------------------------ Button (#609) */
.btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--h); padding: 0 var(--pad-btn); border-radius: var(--r-btn); font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; white-space: nowrap; transition: background .12s, box-shadow .12s, transform .06s; }
.btn:active { transform: translateY(.5px); }
.btn.sm { height: var(--h-sm); padding: 0 var(--pad-btn-sm); font-size: 13px; border-radius: var(--r-btn-sm); }
.btn.lg { height: var(--h-lg); padding: 0 var(--pad-btn-lg); font-size: var(--fs-lg); border-radius: var(--r-btn-lg); }
.btn.pri { background: var(--navy); color: var(--on-navy); }
.btn.pri:hover, .btn.pri.hov { background: var(--navy-hover); }
.btn.sec { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.sec:hover, .btn.sec.hov { background: var(--hover); }
.btn.ghost { color: var(--ink-2); }
.btn.ghost:hover, .btn.ghost.hov { background: var(--hover); color: var(--ink); }
.btn.brand { background: var(--grad-action); color: var(--on-action); }
.btn.brand:hover, .btn.brand.hov { filter: brightness(1.06) saturate(1.1); }
/* delete wears the permanent-delete red, rose stays the error colour (#620, #624; the page's rose is the older #609 reading) */
.btn.danger { background: var(--surface); color: var(--destroy-permanent); box-shadow: inset 0 0 0 1px var(--destroy-permanent); }
.btn.danger:hover, .btn.danger.hov { background: var(--hover); }
.btn.icon { width: var(--h); padding: 0; }
.btn:not(.icon) > svg.lucide:first-child { margin-left: -2px; }
.btn.icon.sm { width: var(--h-sm); }
.btn.fake-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn[disabled], .btn.dis { opacity: .42; cursor: not-allowed; pointer-events: none; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 40%, transparent); border-top-color: currentColor; }
.btn.sec .spin { border-color: var(--line-2); border-top-color: var(--violet); }
@media (prefers-reduced-motion: no-preference) { .spin { animation: k-rot .8s linear infinite; } }
@keyframes k-rot { to { transform: rotate(360deg); } }
.kbd { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; background: var(--surface); line-height: 1.4; }

/* ------------------------------------------------------------------ Field (#609) */
.field { display: flex; flex-direction: column; gap: 6px; width: min(100%, 300px); }
.field label { font-size: 13px; font-weight: 500; }
.field .help { font-size: 12px; color: var(--ink-3); line-height: 1.3; }
.input { display: flex; align-items: center; gap: 8px; height: var(--h-field); padding: 0 var(--pad-field); border-radius: var(--r-field); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); }
.input input { all: unset; flex: 1; min-width: 0; font-size: 14px; color: var(--ink); }
.input input::placeholder { color: var(--ink-4); }
.input:hover { box-shadow: inset 0 0 0 1px var(--ink-4); }
.input:focus-within, .input.fake-focus { box-shadow: inset 0 0 0 1px var(--focus), 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }
.input.bad { box-shadow: inset 0 0 0 1px var(--err); }
.field .help.bad { color: var(--err); }
.input.dis { opacity: .5; }
textarea.ta { all: unset; box-sizing: border-box; display: block; width: min(100%, 300px); min-height: 84px; padding: 10px 12px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; line-height: 1.45; color: var(--ink); }
textarea.ta:focus { box-shadow: inset 0 0 0 1px var(--focus), 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }

.chip { display: inline-flex; align-items: center; gap: 6px; height: var(--h-chip); padding: 0 var(--pad-chip); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--hover); white-space: nowrap; }
.chip.orb-c::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: conic-gradient(from 200deg, var(--sky), var(--azure), var(--violet), var(--lilac), var(--sky)); }
.send { all: unset; width: var(--h-send); height: var(--h-send); border-radius: 50%; background: var(--navy); color: var(--on-navy); display: grid; place-items: center; cursor: pointer; margin-left: auto; }
.send svg { width: 17px; height: 17px; stroke-width: 2.2; }
.attach { display: flex; gap: 8px; flex-wrap: wrap; }
.file { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; border-radius: 10px; background: var(--hover); font-size: 13px; }
.file .ft { width: 26px; height: 26px; border-radius: 6px; background: var(--surface); display: grid; place-items: center; color: var(--ink-2); }
.file small { display: block; color: var(--ink-3); font-size: 11px; line-height: 1.2; }

/* ------------------------------------------------------------------ Toggle (#609) */
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--ink-4); background: var(--surface); display: grid; place-items: center; cursor: pointer; }
.check input:checked { background: var(--navy); box-shadow: none; }
.check input:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--on-navy); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.check input[type=radio] { border-radius: 50%; }
.check input[type=radio]:checked::after { width: 7px; height: 7px; border: 0; border-radius: 50%; background: var(--on-navy); transform: none; }
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; margin: 0; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; transition: background .15s; }
.switch input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--on-action); box-shadow: var(--shadow); transition: left .15s; }
.switch input:checked { background: var(--grad); }
.switch input:checked::after { left: 18px; }
.seg { display: inline-flex; padding: var(--pad-seg); border-radius: var(--r-field); background: var(--hover); gap: 2px; }
.seg button { all: unset; height: var(--h-chip); padding: 0 var(--pad-btn-sm); border-radius: var(--r-btn-sm); font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg button[aria-pressed=true] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ------------------------------------------------------------------ Tabs (#609) */
.tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); width: 100%; }
.tabs button { all: unset; padding: var(--pad-tab); font-size: 14px; font-weight: 500; color: var(--ink-3); cursor: pointer; position: relative; display: inline-flex; gap: 6px; align-items: center; }
.tabs button[aria-selected=true] { color: var(--ink); }
.tabs button[aria-selected=true]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }
.count { font-size: 11px; font-weight: 600; background: var(--hover); color: var(--ink-2); border-radius: 999px; padding: 0 6px; line-height: 18px; }

/* ------------------------------------------------------------------ Menu and command menu (#609) */
.menus { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.menu { width: 240px; background: var(--raised); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-pop); padding: 5px; font-size: 14px; }
:is(.menu, .cmd) .mi { display: flex; align-items: center; gap: 10px; height: var(--h-row); padding: 0 9px; border-radius: 7px; color: var(--ink); cursor: default; }
:is(.menu, .cmd) .mi svg { color: var(--ink-2); }
:is(.menu, .cmd) .mi.on { background: var(--hover); }
:is(.menu, .cmd) .mi .sh { margin-left: auto; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
:is(.menu, .cmd) .mi.red, :is(.menu, .cmd) .mi.red svg { color: var(--destroy-permanent); }
:is(.menu, .cmd) .mi.dis { color: var(--ink-4); }
:is(.menu, .cmd) .mi.dis svg { color: var(--ink-4); }
.menu hr { border: 0; height: 1px; background: var(--line); margin: 5px 4px; }
:is(.menu, .cmd) .mh { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); padding: 6px 9px 4px; font-weight: 500; }
:is(.menu, .cmd) .mi .ai { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.cmd { width: min(100%, 460px); background: var(--raised); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-pop); overflow: hidden; }
.cmd .q { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.cmd .q span { color: var(--ink); }
.cmd .q .kbd { margin-left: auto; }
.cmd .res { padding: 5px; }
.cmd .res .mi { height: var(--h-cmd); }

/* ------------------------------------------------------------------ Tooltip and popover (#609) */
.tipwrap { display: flex; gap: 20px 40px; flex-wrap: wrap; align-items: flex-end; padding: 34px 0 0 2px; }
.tipbox { position: relative; display: inline-flex; flex-direction: column; align-items: center; }
.tipbox .tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--tip); color: var(--surface); font-size: 12px; font-weight: 500; line-height: 1.2; padding: 6px 8px; border-radius: 7px; white-space: nowrap; display: flex; gap: 8px; align-items: center; }
.tipbox .tip .kbd { background: transparent; color: var(--tip-ink); border-color: color-mix(in srgb, var(--tip-ink) 35%, transparent); }
.pop { width: 280px; background: var(--raised); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-pop); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pop h4 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.2; }
.pop p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.4; }

/* ------------------------------------------------------------------ Dialog (#609) */
.dplate { position: relative; border-radius: 12px; overflow: hidden; background: var(--ground); min-height: 300px; display: grid; place-items: center; padding: 24px; }
.dplate::before { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.dialog { position: relative; width: min(100%, 420px); background: var(--raised); border-radius: 16px; box-shadow: var(--shadow-pop); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.dialog h4 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.2; }
.dialog p { margin: 0; color: var(--ink-2); font-size: 14px; }
.dialog .foot { display: flex; justify-content: flex-end; gap: 8px; }
.dialog .x { position: absolute; right: 12px; top: 12px; }

/* ------------------------------------------------------------------ Message: toast and banner (#609) */
.toasts { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.toast { display: flex; align-items: center; gap: 8px; background: var(--raised); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); padding: 8px 12px 8px 9px; font-size: 14px; line-height: 1.2; max-width: min(460px, 100%); min-width: 0; }
.toast .t { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.toast b { font-weight: 600; white-space: nowrap; }
.toast .ok { color: var(--ok); }
.toast .er { color: var(--err); }
.toast .act { all: unset; font-weight: 600; font-size: 13px; color: var(--ink); cursor: pointer; margin-left: 6px; }
.banner { width: 100%; display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 9px 12px; font-size: 14px; line-height: 1.35; }
.banner.info { background: var(--info-bg); }
.banner.ask { background: var(--ask-bg); color: var(--ask); }
.banner.err { background: var(--err-bg); color: var(--err); }
.banner.ok { background: var(--ok-bg); color: var(--ok); }
.banner b { color: var(--ink); display: block; }

/* ------------------------------------------------------------------ Badge and avatar (#609) */
.badge { display: inline-flex; align-items: center; gap: 5px; height: var(--h-badge); padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1; }
.badge.n { background: var(--hover); color: var(--ink-2); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.ask { background: var(--ask-bg); color: var(--ask); }
.badge.err { background: var(--err-bg); color: var(--err); }
.badge.ai { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.badge.ai::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.badge .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--on-action); flex: none; position: relative; }
.av.sm { width: 24px; height: 24px; font-size: 11px; }
.av .pres { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok-dot); box-shadow: 0 0 0 2px var(--surface); }
.stack { display: flex; }
.stack .av { box-shadow: 0 0 0 2px var(--surface); margin-left: -8px; }
.stack .av:first-child { margin-left: 0; }
.av.bot { background: var(--avatar-bot); }

/* ------------------------------------------------------------------ Status marks (Roderic, 28 Sep): never a bare dot; the colour carries a tick, a cross or a sign */
.mark { --m: var(--ok-dot); position: relative; width: 20px; height: 20px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; background: var(--m); color: var(--on-mark); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m) 16%, transparent); }
.mark svg { width: 62%; height: 62%; stroke-width: 3; }
.mark.ok { --m: var(--ok-dot); }
.mark.err { --m: var(--err); }
.mark.ask { --m: var(--ask); }
.mark.lg { width: 26px; height: 26px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--m) 14%, transparent); }
.mark.lg svg { stroke-width: 2.75; width: 58%; height: 58%; }
.mark.sm { width: 14px; height: 14px; box-shadow: none; }
.mark.sm svg { width: 70%; height: 70%; stroke-width: 3.6; }
.badge .mark.sm { width: 13px; height: 13px; margin-left: -2px; }
.toast .mark { margin-right: 1px; }
.aistate .steps .mark svg { width: 70%; height: 70%; color: var(--on-mark); }

/* ------------------------------------------------------------------ List and table (#609) */
.list { width: 100%; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.li { display: flex; align-items: center; gap: 12px; padding: var(--pad-li); border-top: 1px solid var(--line); line-height: 1.2; }
.li:first-child { border-top: 0; }
.li:hover, .li.on { background: var(--hover); }
.li .main { flex: 1; min-width: 0; }
.li .main b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .main span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .when { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.li.sel { background: var(--info-bg); box-shadow: none; }
.tablewrap { overflow-x: auto; width: 100%; }
.tablewrap table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 560px; }
.tablewrap th, .tablewrap td { text-align: left; padding: var(--pad-cell); border-bottom: 1px solid var(--line); line-height: 1.2; }
.tablewrap th { font-size: 12px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.tablewrap th svg { width: 12px; height: 12px; vertical-align: -1px; }
.tablewrap td.num, .tablewrap th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tablewrap tbody tr:hover { background: var(--hover); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; width: 100%; }
.grid2 > * { min-width: 0; }
.grid2 table { min-width: 0; }

/* ------------------------------------------------------------------ Loading and empty (#609) */
.prog { width: 260px; height: 6px; border-radius: 999px; background: var(--hover); overflow: hidden; }
.prog i { display: block; height: 100%; width: 58%; border-radius: 999px; background: var(--grad); }
.ring { width: 28px; height: 28px; border-radius: 50%; background: conic-gradient(var(--violet) 0 64%, var(--hover) 0); display: grid; place-items: center; }
.ring::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); }
.sk { border-radius: 8px; background: linear-gradient(90deg, var(--hover), var(--press), var(--hover)); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .sk { animation: k-shim 1.4s var(--ease) 3; } }
@keyframes k-shim { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.empty { width: 100%; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); padding: 32px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.empty .ei { width: 44px; height: 44px; border-radius: 12px; background: var(--hover); display: grid; place-items: center; color: var(--ink-2); }
.empty .ei svg { width: 22px; height: 22px; }
.empty .ei img { width: 48px; height: 48px; }
.empty h4 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.2; }
.empty p { margin: 0; color: var(--ink-3); font-size: 13px; max-width: 36ch; line-height: 1.4; }

/* ------------------------------------------------------------------ Floating toolbar (#598). Page-local colours: see Gaps */
.tb { display: inline-flex; align-items: center; gap: 2px; background: #26272B; color: #F2F3F5; border-radius: 14px; padding: 5px; box-shadow: 0 8px 24px rgba(0,0,0,.18); max-width: 100%; overflow-x: auto; }
.tb button { all: unset; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; color: #F2F3F5; }
.tb button:hover { background: #34353A; }
.tb button[aria-pressed="true"] { background: #3E3F45; }
.tb .sep { width: 1px; height: 20px; background: #3A3B40; margin: 0 4px; flex: none; }
.tb .grip { color: #8C8E96; width: 22px; }
.tb .dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.tb .dim { color: #8C8E96; }
.tb svg.lucide { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ Pills: talk bar and viewer chips (#598) */
.pill { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; box-shadow: var(--shadow); }
.pill button { all: unset; display: inline-flex; align-items: center; gap: 6px; height: 34px; min-width: 34px; justify-content: center; padding: 0 10px; border-radius: 999px; color: var(--ink); cursor: pointer; font-size: 14px; font-weight: 500; }
.pill button.icon { padding: 0; }
.pill button:hover { background: var(--hover); }
.pill .sep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
.pill .muted { color: var(--ink-3); }
.pill svg.lucide { width: 18px; height: 18px; }
.talkbar { display: flex; flex-direction: column; align-items: center; }
.talkbar .char { width: 88px; height: auto; display: block; margin: 0 auto 10px; }
.talkbar .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.orb { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 42%), conic-gradient(from 200deg, #56CCFE, #2E95FE, #7D62FB, #B976FB, #56CCFE); box-shadow: 0 0 0 1px rgba(125,98,251,.25), 0 4px 14px rgba(125,98,251,.35); }
.talkbar .toast { background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); padding: 10px 14px; gap: 8px; max-width: 420px; margin-top: 12px; }
.talkbar .toast .ok { color: var(--ok); flex: none; }

/* ------------------------------------------------------------------ Effort popover (#598); the page's .pop, renamed so it keeps its own look */
.effort-pop { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 12px 14px 14px; width: min(100%, 300px); }
.effort-pop .ttl { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; margin-bottom: 10px; }
.effort-pop .ttl .g { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }
.effort-pop .track { position: relative; height: 30px; border-radius: 999px; background: var(--grad); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.effort-pop .thumb { position: absolute; right: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(2,15,70,.3); }
.effort-pop svg.lucide { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ Rail and vertical slider (#598) */
.vwrap { display: flex; gap: 18px; align-items: flex-start; justify-content: center; }
.rail { display: flex; flex-direction: column; gap: 6px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.rail button { all: unset; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--ink-2); cursor: pointer; }
.rail button[aria-current="page"] { background: var(--hover); color: var(--ink); }
.rail button:hover { background: var(--hover); }
.rail svg.lucide { width: 18px; height: 18px; }
.vs { width: 44px; height: 170px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; }
.vs::before { content: ""; position: absolute; left: 50%; top: 16px; bottom: 16px; width: 2px; transform: translateX(-50%); background: var(--line); border-radius: 2px; }
.vs .k { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(2,15,70,.25); }

/* ------------------------------------------------------------------ Slide to confirm (#598, #624)
   The SlideToConfirm card runs Cowork's own slider (controls v5, 25 Sep) inside its own shadow root, with its own CSS and script,
   so nothing for it lives here (Roderic, 28 Sep: "get them the exact code from what we did with Cowork"). */

/* ------------------------------------------------------------------ Panel with header D (#7) and the folded rail */
.kfield { display: flex; gap: 8px; padding: 10px; border-radius: 14px; background: linear-gradient(135deg, var(--ground), var(--hover)); border: 1px solid var(--line); overflow: hidden; }
.kpanel { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.kpanel .hd { display: flex; align-items: center; gap: 4px; height: var(--h-panel-head); padding: var(--pad-panel-head); flex: none; background: linear-gradient(90deg, var(--kp) 0%, var(--kp) var(--head-fade-stop), var(--surface) 100%); }
.kpanel .hd .dots { display: flex; gap: 3px; margin-right: 8px; }
.kpanel .hd .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ki); opacity: .25; display: block; }
.kpanel .hd .dots i:first-child { opacity: .85; }
.kpanel .hd h4 { margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); font-size: var(--fs-panel-title); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ki); }
.kpanel .hd button { all: unset; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; cursor: pointer; color: var(--ki); }
.kpanel .hd button:hover { background: var(--hover); }
.kpanel .hd svg { width: 14px; height: 14px; }
.kpanel .bd { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }
.kpanel .bd .intro { font-size: 13.5px; color: var(--ink-2); }
.kpanel .tbl { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.kpanel .tr { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); align-items: baseline; }
.kpanel .tr:first-child { border-top: 0; }
.kpanel .tr .s { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.kpanel .tr b { display: block; font-weight: 500; font-size: 13.5px; line-height: 1.25; }
.kpanel .tr small { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.3; }
.kpanel .tr .t { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.prail { flex: 0 0 26px; border-radius: 10px; border: 1px solid var(--line); display: flex; justify-content: center; padding: 12px 0; background: linear-gradient(180deg, var(--kp) 0%, var(--kp) 30%, var(--surface) 100%); }
.prail span { writing-mode: vertical-rl; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); white-space: nowrap; }

/* ------------------------------------------------------------------ AI states (#607), scoped */
.aistate { columns: 2 260px; column-gap: 14px; }
.aistate .st { break-inside: avoid; margin-bottom: 14px; }
.aistate .st h3 { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin: 0 0 2px; }
.aistate .st p.w { margin: 0 0 6px; font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
.aistate .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.aistate .pbody { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.aistate svg.lucide { width: 18px; height: 18px; }
.aistate .line { display: flex; align-items: center; gap: 10px; min-width: 0; line-height: 1.15; }
.aistate .orb { width: 26px; height: 26px; flex: none; box-shadow: 0 0 0 1px rgba(125,98,251,.25), 0 3px 10px rgba(125,98,251,.3); }
.aistate .orb.idle { filter: saturate(.7); opacity: .85; }
.aistate .orb.ask { background: radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 42%), conic-gradient(from 200deg, #FDBA74, #FB923C, #F59E0B, #FDBA74); box-shadow: 0 0 0 1px rgba(251,146,60,.3); }
.aistate .orb.done { background: var(--ok); display: grid; place-items: center; color: var(--on-mark); box-shadow: none; }
.aistate .orb.err { background: var(--err); display: grid; place-items: center; color: var(--on-mark); box-shadow: none; }
.aistate .orb.done svg, .aistate .orb.err svg { width: 15px; height: 15px; stroke-width: 2.4; }
.aistate .label { font-size: 14px; font-weight: 600; line-height: 1.15; white-space: nowrap; flex: none; }
.aistate .label.shim { background: linear-gradient(100deg, var(--ink-2) 0%, var(--ink-2) 40%, var(--ink) 50%, var(--ink-2) 60%, var(--ink-2) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.aistate .meta { font-size: 12px; line-height: 1.15; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.aistate .grow { flex: 1; }
.aistate .stop { all: unset; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; cursor: pointer; background: var(--surface); }
.aistate .stop svg { width: 13px; height: 13px; }
.aistate .stop .sq { width: 9px; height: 9px; border-radius: 2px; background: currentColor; }
.aistate .steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; line-height: 1.2; font-size: 13px; color: var(--ink-3); }
.aistate .steps li { display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aistate .steps .ic { width: 26px; flex: none; display: flex; justify-content: center; align-items: center; }
.aistate .steps li svg { width: 14px; height: 14px; }
.aistate .steps li.ok { color: var(--ink-2); }
.aistate .steps li.ok svg { color: var(--ok); }
.aistate .steps li.now { color: var(--ink); font-weight: 500; }
.aistate .steps li.now .sp { display: block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: #7D62FB; }
.aistate .steps li.todo .dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--line); margin: 0; }
.aistate .ans { font-size: 14px; color: var(--ink); margin: 0; padding-left: 36px; }
.aistate .caret { display: inline-block; width: 8px; height: 15px; border-radius: 2px; background: var(--grad); vertical-align: -2px; margin-left: 2px; }
.aistate .load { padding-left: 36px; display: flex; flex-direction: column; gap: 6px; }
.aistate .track { height: 8px; border-radius: 999px; background: var(--hover); overflow: hidden; }
.aistate .track i { display: block; height: 100%; width: 62%; background: var(--grad); border-radius: 999px; }
.aistate .ask:not(.orb) { background: linear-gradient(180deg, var(--ask-bg), #FFEDD5); border: 1px solid var(--ask-line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
[data-theme="dark"] .aistate .ask:not(.orb) { background: linear-gradient(180deg, var(--ask-bg), #4A2E14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aistate .ask:not(.orb) { background: linear-gradient(180deg, var(--ask-bg), #4A2E14); } }
.aistate .ask .t { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ask); }
.aistate .ask .t b { display: block; color: var(--ink); }
.aistate .goslide { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--ask); text-decoration: none; }
.aistate .goslide svg { width: 15px; height: 15px; stroke-width: 2; }
.aistate .done-card { background: var(--ok-bg); border-radius: 12px; padding: 10px 12px; font-size: 14px; display: flex; gap: 10px; align-items: center; }
.aistate .done-card b { color: var(--ok); }
.aistate .err-card { background: var(--err-bg); border-radius: 12px; padding: 10px 12px; font-size: 14px; display: flex; flex-direction: column; gap: 10px; }
.aistate .err-card b { color: var(--err); }
.aistate .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.aistate .ai-btn { all: unset; cursor: pointer; font-size: 13px; font-weight: 500; border-radius: 999px; padding: 6px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.aistate .ai-btn.pri { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.aistate .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--ink-2); background: var(--hover); border-radius: 999px; padding: 3px 9px; white-space: nowrap; height: auto; }
.aistate .chip svg { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ Kulip Dock (#162, #219), scoped */
.kdock { position: relative; display: flex; justify-content: center; padding: 70px 12px 3px; background: linear-gradient(135deg, var(--ground), var(--hover)); border-radius: 14px; border: 1px solid var(--line); }
.kdock .dock { display: flex; align-items: flex-start; gap: 0; height: 58px; padding: 3px 8px 0; border-radius: 15px; background: color-mix(in srgb, var(--surface) 46%, transparent); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface) 72%, transparent), 0 0 0 1px var(--line), var(--shadow-pop); }
.kdock .tile { position: relative; width: 48px; height: 55px; display: flex; justify-content: center; flex-shrink: 0; }
.kdock .tile .art { width: 52px; height: 52px; display: block; transform-origin: 50% 100%; position: relative; transition: transform .12s var(--ease); }
.kdock .tile .art img { width: 100%; height: 100%; display: block; pointer-events: none; }
.kdock .tile.char .art img { width: 80.5%; height: 80.5%; margin: 9.75%; image-rendering: pixelated; }
.kdock .tile .dot { position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ink); opacity: 0; }
.kdock .tile.on .dot { opacity: .75; }
.kdock .sep { width: 1px; height: 44px; margin: 5px 7px 0; background: var(--line-2); flex-shrink: 0; }
.kdock .ins { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); min-width: 170px; max-width: 240px; background: var(--raised); border-radius: 11px; box-shadow: 0 0 0 1px var(--line), var(--shadow-pop); padding: 8px 11px; text-align: left; z-index: 4; }
.kdock .ins b { display: block; font-size: 13px; font-weight: 600; line-height: 1.15; color: var(--ink); white-space: nowrap; }
.kdock .ins span { display: block; font-size: 12px; line-height: 1.15; color: var(--ink-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kdock .ins span.k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.kdock .tile.hot .art { transform: rotate(-5deg); }

/* ------------------------------------------------------------------ Edith (#558), scoped under .kpet (the page's .pet; .edith is the voice) */
.kpet { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 320px; }
.kpet .veil { position: absolute; left: -230px; right: -230px; top: -170px; bottom: -100px; z-index: -1; pointer-events: none; background: transparent; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); transition: opacity .3s var(--ease); }
.kpet .threads { position: relative; width: 100%; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.kpet .th { position: relative; display: grid; grid-template-columns: 16px 1fr; column-gap: 7px; align-items: center; background: var(--surface); border-radius: 20px; padding: 5.5px 14px 6px 12px; box-shadow: 0 0 0 .5px var(--line), var(--shadow-pop); cursor: pointer; }
.kpet .th .st { width: 15px; height: 15px; display: grid; place-items: center; align-self: center; }
.kpet .th .ok { color: var(--on-mark); background: var(--ok-dot); border-radius: 50%; width: 15px; height: 15px; display: grid; place-items: center; }
.kpet .th .ok svg { width: 10px; height: 10px; stroke-width: 3.2; }
.kpet .th .ask { color: var(--voice-ask-mark-ink); background: var(--voice-ask-mark); border-radius: 50%; width: 15px; height: 15px; display: grid; place-items: center; }
.kpet .th .ask svg { width: 9px; height: 9px; stroke-width: 3; }
.kpet .th .bad { color: var(--on-mark); background: var(--err); border-radius: 50%; width: 15px; height: 15px; display: grid; place-items: center; }
.kpet .th .bad svg { width: 9px; height: 9px; stroke-width: 3.2; }
.kpet .th .spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--violet) 25%, transparent); border-top-color: var(--violet); }
.kpet .th .t { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kpet .th .t .k { display: inline-flex; vertical-align: -2px; margin-right: 4px; }
.kpet .th .t .k svg { width: 14px; height: 14px; color: var(--ki); }
.kpet .th .s { grid-column: 1 / 3; font-size: 12.5px; line-height: 1.2; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; min-width: 0; }
.kpet .fig { width: 150px; height: 150px; display: block; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); }
.kpet .tools { display: flex; align-items: center; background: var(--surface); border-radius: 999px; box-shadow: 0 0 0 .5px var(--line), var(--shadow-pop); padding: 4px; }
.kpet .tools button { all: unset; width: 36px; height: 30px; display: grid; place-items: center; color: var(--ink); border-radius: 999px; cursor: pointer; }
.kpet .tools button:hover { background: var(--hover); }
.kpet .tools svg { width: 16px; height: 16px; stroke-width: 1.75; }
.kpet .tools .sep { width: 1px; height: 18px; background: var(--line); }

/* ------------------------------------------------------------------ Chat field (#220, #517, #616), scoped under .cf and .under */
.cf { position: relative; background: var(--surface); border-radius: var(--r-chat); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); padding: 10px 10px 10px 16px; transition: box-shadow .2s var(--ease); }
.cf:focus-within { box-shadow: inset 0 0 0 1px var(--ink-4), var(--shadow); }
.cf.drag { box-shadow: inset 0 0 0 2px var(--azure), var(--shadow); }
.cf .row1 { display: flex; align-items: flex-end; gap: 8px; }
.cf textarea { all: unset; flex: 1; min-height: 22px; max-height: 180px; font-size: 15px; line-height: 1.45; color: var(--ink); white-space: pre-wrap; overflow-y: auto; padding: 4px 0; }
.cf textarea::placeholder { color: var(--ink-4); }
.cf .txt { flex: 1; font-size: 15px; line-height: 1.45; color: var(--ink); padding: 4px 0; min-height: 22px; word-break: break-word; }
.cf .txt.ph { color: var(--ink-3); }
.cf .txt .lv { color: var(--ink-3); }
.cf.inc { box-shadow: inset 0 0 0 1.5px var(--ink-4); background: repeating-linear-gradient(135deg, var(--surface) 0 10px, var(--ground) 10px 20px); }
.cf.off { opacity: .6; }
.cf.edit { box-shadow: inset 0 0 0 1.5px var(--azure), var(--shadow); }
.cf .go { all: unset; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: background .2s var(--ease), color .2s, transform .2s var(--ease); }
.cf .go svg { width: 16px; height: 16px; stroke-width: 2.2; }
.cf .go.idle { color: var(--ink-4); background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.cf .go.ready { background: var(--navy); color: var(--on-navy); }
.cf .go.run { color: var(--live); box-shadow: inset 0 0 0 2px var(--live); }
.cf .go .sq { display: none; width: 9px; height: 9px; border-radius: 2px; background: currentColor; }
.cf .go.run .sq { display: block; }
.cf .go .dotc { display: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.cf .go.idle .dotc { display: block; }
.cf .atts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.cf .att { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 10px 11px 4px; border-radius: 12px; background: var(--hover); font-size: 12.5px; max-width: 230px; overflow: hidden; }
.cf .att .th { width: 36px; height: 36px; border-radius: 8px; background: var(--surface) center / cover no-repeat; display: grid; place-items: center; color: var(--ink-2); flex: none; }
.cf .att .th svg { width: 17px; height: 17px; }
.cf .att b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; line-height: 1.2; }
.cf .att small { display: block; color: var(--ink-3); font-size: 11px; line-height: 1.2; }
.cf .att .upbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line); }
.cf .att .upbar i { display: block; height: 100%; width: 60%; background: var(--grad); border-radius: 0 2px 2px 0; }
.cf .att.fail { background: var(--err-bg); }
.cf .att.fail small, .cf .att.fail .th { color: var(--err); }
.cf .quote { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 5px 10px 5px 6px; border-radius: 10px; background: var(--head-bots); font-size: 12.5px; color: var(--ink-2); }
.cf .quote .qa { width: 18px; height: 18px; border-radius: 50%; background: var(--avatar-1); color: var(--on-action); font-size: 10px; font-weight: 700; display: grid; place-items: center; flex: none; }
.cf .quote b { color: var(--ink); font-weight: 600; }
.cf .queue { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12.5px; color: var(--ink-2); }
.cf .queue .qb { background: var(--hover); border-radius: 999px; padding: 3px 10px; }
.cf .chipIn { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 7px; font-size: 12.5px; font-weight: 500; margin-right: 4px; vertical-align: 1px; }
.cf .chipIn.plan { background: var(--head-bots); color: var(--ink-bots); }
.cf .chipIn.src { background: var(--head-notes); color: var(--ink-notes); }
.cf .chipIn svg { width: 13px; height: 13px; }
.cf .mention { background: var(--head-bots); color: var(--ink-bots); border-radius: 5px; padding: 0 4px; }
.cf .cnt { margin-left: auto; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.retry { font-size: 12.5px; color: var(--err); display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.retry svg { width: 14px; height: 14px; }
.retry a { color: var(--err); font-weight: 600; text-decoration: underline; cursor: pointer; }
.under { display: flex; align-items: center; gap: 2px; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.under .ib { all: unset; height: 26px; min-width: 26px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 7px; cursor: pointer; color: var(--ink-2); }
.under .ib:hover { background: var(--hover); color: var(--ink); }
.under .ib svg { width: 16px; height: 16px; }
.under .ib.chev svg { width: 14px; height: 14px; }
.under .ib.pill { padding: 0 8px; font-weight: 500; }
.under .ib.pill:hover { background: var(--press); }
.under .ib.warnp, .under .ib.warnp svg { color: var(--ask); }
.under .sp { flex: 1; }
.under .model, .under .eff { padding: 0 6px; color: var(--ink-2); }
.under .rring { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-2); margin: 0 6px; }
.under .rring.on { box-shadow: none; background: conic-gradient(var(--live) var(--p, 0%), var(--line) 0); -webkit-mask: radial-gradient(circle, transparent 4.5px, #000 5px); mask: radial-gradient(circle, transparent 4.5px, #000 5px); }
/* notice strip above the field */
.nt { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-2); padding: 7px 12px; font-size: 14px; line-height: var(--lh-notice); color: var(--ink); margin: 0 0 -4px; }
.nt svg { width: 16px; height: 16px; flex: none; color: var(--ink-2); }
.nt a { white-space: nowrap; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.nt.edith { background: var(--voice-edith-bg); box-shadow: inset 0 0 0 1px var(--voice-edith-line); }
.nt.edith img { width: 22px; height: 22px; image-rendering: pixelated; flex: none; }
.nt.adv { background: var(--voice-advice-bg); box-shadow: inset 0 0 0 1px var(--voice-advice-line); }
.nt.adv .av2 { width: 22px; height: 22px; border-radius: 50%; background: var(--voice-advice-mark); color: var(--voice-advice-mark-ink); font-size: 10px; font-weight: 700; display: grid; place-items: center; flex: none; }
.nt.k { background: var(--kpb); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--kpl) 45%, var(--kpb)); }
.nt.k svg, .nt.k a { color: var(--kin); }
.nt .who { font: 600 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--kin, var(--ink-3)); }

/* ------------------------------------------------------------------ Main line (#517, #616) */
.mlwrap { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--ground); }
.mlwrap .topbar { height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: color-mix(in srgb, var(--surface) 85%, transparent); border-bottom: 1px solid var(--line); font: 600 13px/1 var(--font-display); color: var(--ink); }
.mlwrap .topbar .k { width: 18px; height: 18px; border-radius: 5px; background: var(--grad); }
.mlwrap .topbar .sp { flex: 1; }
.mlwrap .topbar span.s { font: 500 12px/1 var(--font-sans); color: var(--ink-3); }
.ml { display: flex; align-items: center; gap: 10px; height: 36px; line-height: var(--lh-notice); padding: 0 10px 0 12px; font-size: 13.5px; color: var(--ink); border-bottom: 1px solid var(--line); overflow: hidden; }
.ml .mk { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 10px; font-weight: 700; color: var(--on-action); }
.ml .mk img { width: 22px; height: 22px; image-rendering: pixelated; }
.ml .mk svg { width: 14px; height: 14px; }
.ml .src { font: 600 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--voice-src); }
.ml .tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--voice-text); }
.ml .bt { all: unset; font-size: 12.5px; font-weight: 500; padding: 3px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line-2); }
.ml .bt.p { background: var(--navy); color: var(--on-navy); box-shadow: none; }
.ml .x { color: var(--ink-3); width: 16px; height: 16px; flex: none; }
.ml.edith { background: var(--voice-edith-bg); }
.ml.kpet .mk { background: var(--voice-edith-mark); color: var(--voice-edith-mark-ink); }
.ml.boss { background: var(--voice-advice-bg); }
.ml.boss .mk { background: var(--voice-advice-mark); color: var(--voice-advice-mark-ink); }
.ml.offer { background: var(--voice-offer-bg); }
.ml.offer .mk { background: var(--voice-offer-mark); color: var(--voice-offer-mark-ink); }
.ml.kind { background: var(--kpb); }
.ml.kind .mk { background: var(--kin); color: var(--surface); }
.ml.kind .src { color: var(--kin); }
.ml.sys { background: var(--voice-system-bg); }
.ml.sys .mk { background: var(--voice-system-mark); color: var(--voice-system-mark-ink); }
.ml.tip { background: var(--voice-tip-bg); }
.ml.tip .mk { background: var(--voice-tip-mark); color: var(--voice-tip-mark-ink); }
.ml.tip .src, .ml.tip .tx { color: var(--ink-3); }
.ml.tip .bt { background: transparent; box-shadow: none; color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; padding: 3px 4px; }
.ml.ask { background: var(--voice-ask-bg); }
.ml.ask .mk { background: var(--voice-ask-mark); color: var(--voice-ask-mark-ink); }
.mlbody { height: 44px; display: grid; place-items: center; color: var(--ink-3); font-size: 13px; }

/* ------------------------------------------------------------------ Spot and Spot Doc (#43 §4, §16) */
.spotwrap { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.spotwrap .ph2 { height: 30px; display: flex; align-items: center; padding: 0 12px; background: linear-gradient(90deg, var(--head-notes) 0%, var(--head-notes) 35%, var(--surface) 100%); font: 600 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-notes); }
.spotwrap .bd { height: 120px; padding: 10px 14px; font-size: 13px; color: var(--ink-3); }
.spotfoot { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); }
.sugg { display: flex; gap: 6px; flex-wrap: wrap; }
.sugg span { font-size: 12px; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 9px; background: var(--surface); }
.spot { height: 36px; display: flex; align-items: center; gap: 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); padding: 0 5px 0 6px; background: var(--surface); }
.spot .ib { all: unset; height: 26px; min-width: 26px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; cursor: pointer; color: var(--ink-2); }
.spot .ib svg { width: 16px; height: 16px; }
.spot .t { flex: 1; font-size: 13.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot .t.v { color: var(--ink); }
.spot .auto { font-size: 12px; font-weight: 500; color: var(--ink-2); padding: 0 8px; height: 24px; display: flex; align-items: center; border-radius: 7px; background: var(--hover); }
.spot .hint { font: 11px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.spotdoc { margin: 0 0 4px; padding: 4px 4px 10px; border-bottom: 1.5px dashed var(--line-2); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.spotdoc .hd2 { display: flex; align-items: center; gap: 8px; font: 600 10.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-notes); margin-bottom: 6px; }
.spotdoc .hd2 span { margin-left: auto; color: var(--ink-3); font-weight: 500; }
.spotdoc .acts2 { display: flex; gap: 6px; margin-top: 8px; }
.spotdoc .acts2 span { font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--hover); color: var(--ink); }
.spotdoc .acts2 span.go2 { background: var(--navy); color: var(--on-navy); }

/* ------------------------------------------------------------------ Reactions: hover bar, chips, fan-out (#615, #624) */
.ke { display: inline-block; vertical-align: middle; flex: none; overflow: visible; }
.bub { max-width: 420px; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; color: var(--ink); background: var(--hover); }
.bub.ai { background: transparent; color: var(--ink-2); padding-left: 0; }
.hbar { display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 4px; border-radius: 10px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-pop); }
.hbar .r { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; }
.hbar .r:hover { background: var(--hover); }
.hbar .sep { width: 1px; height: 16px; background: var(--line-2); margin: 0 4px; }
.hbar .ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; color: var(--ink-2); }
.hbar .ic svg { width: 15px; height: 15px; }
.rxs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.rx { display: inline-flex; align-items: center; gap: 4px; height: var(--h-chip); min-width: var(--h-chip); padding: 0 8px 0 4px; border-radius: 999px; background: var(--hover); font: 500 12px/1 var(--font-sans); color: var(--ink-2); }
.rx.one { width: var(--h-chip); padding: 0; justify-content: center; }
.rx.mine { box-shadow: inset 0 0 0 1px var(--focus); }
.rx.bot { background: var(--head-bots); padding: 0 4px; }
.rx.bot img { width: 12px; height: 12px; image-rendering: pixelated; }
.cell32 { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--hover); }

/* ------------------------------------------------------------------ Ask card (#615 §3 §6, #624 §11, #623) */
/* the Ask card as redrawn 27 Sep (kulip PR #634, #624): who asks is a band in the asker's voice colour, JetBrains Mono caps; no numbers; two verticals, 14 and 42 px */
.askc{--ask-band:var(--voice-edith-bg);--ask-edge:var(--voice-edith-line);background:var(--surface);border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--line),var(--shadow);max-width:460px;overflow:hidden}
/* who asks: a band in the asker's voice colour (Edith: her Main line gradient), JetBrains Mono caps; two verticals, 14 and 42 */
.askc .hd3{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;background:var(--ask-band);box-shadow:inset 0 -1px 0 var(--ask-edge);font:600 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.askc .hd3 img{width:20px;height:20px;flex:none;image-rendering:pixelated}.askc .hd3 b{color:var(--ink);font-weight:600}
.askc h4{margin:12px 14px 10px;font:600 15px/1.35 var(--font-sans);color:var(--ink)}
.askc .opts{border-top:1px solid var(--line)}
.askc label.op{display:flex;align-items:flex-start;gap:10px;min-height:var(--h-row);padding:var(--pad-li);padding-left:14px;padding-right:14px;border-top:1px solid var(--line);cursor:pointer}
.askc label.op.ownr{align-items:center}
.askc label.op:first-child{border-top:0}
.askc label.op:hover{background:var(--hover)}
.askc label.op input{flex:none}
.askc .op input[type=radio]{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:calc((var(--h-badge) - 18px) / 2) 0 0;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-4);background:var(--surface);display:grid;place-items:center;cursor:pointer}
.askc .op input[type=radio]:checked{background:var(--navy);box-shadow:none}
.askc .op input[type=radio]:checked::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--on-navy)}
.askc .op input[type=radio]:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.askc .op input[type=radio]:disabled{cursor:not-allowed}
.askc .ot{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.askc .ot b{font-weight:500;font-size:14px;line-height:var(--h-badge);min-height:var(--h-badge);color:var(--ink);display:flex;align-items:center;column-gap:8px;flex-wrap:wrap}
.askc .ot>span{font-size:12.5px;color:var(--ink-3);line-height:17px}
.askc label.op.ownr input{margin-top:0}
.askc .own{flex:1;display:flex;align-items:center;height:28px;padding:0 10px;border-radius:var(--r-field);box-shadow:inset 0 0 0 1px var(--line-2);font-size:13.5px;color:var(--ink-4)}
.askc .own input{all:unset;flex:1;min-width:0;color:var(--ink)}.askc .own input::placeholder{color:var(--ink-3)}
.askc .ft3{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line);background:var(--ground)}
.askc .ft3 .wt{flex:1;font-size:12px;line-height:1.35;color:var(--ink-3)}
.ask1 .ft3{background:transparent;border-top:0;padding-top:0}
.ask1 .bt3{all:unset;font-size:12.5px;font-weight:500;padding:4px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink)}
.ask1 .bt3.p{background:var(--navy);color:var(--on-navy);box-shadow:none}
.ask1 .bt3:hover{background:var(--hover)}.ask1 .bt3.p:hover{background:var(--navy-hover)}
.askg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:22px 18px;align-items:start}
.stl{font:600 10.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.askc .hd3 .ak{color:var(--ink-2);font-weight:500}
.askc.answered>:not(.ansl){display:none}.askc .ansl{display:none}.askc.answered .ansl{display:flex}
.ansl{align-items:center;gap:8px;min-height:40px;padding:6px 8px 6px 14px;font-size:13.5px;color:var(--ink-2)}
.ansl img{width:20px;height:20px;image-rendering:pixelated;flex:none}
.ansl .q3{min-width:0;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ansl b{flex:none;max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-weight:500}
.ansl .lk{all:unset;flex:none;font-size:13px;font-weight:500;color:var(--navy);text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:2px 4px;border-radius:5px}
.ansl .lk:disabled{cursor:default}.ansl .lk:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.askc.old h4,.askc.old .opts,.askc.old .hd3{opacity:.55}
.askc.old .op{cursor:not-allowed}.askc.old .op:hover{background:transparent}
.stale{display:flex;align-items:flex-start;gap:8px;padding:8px 10px 8px 14px;background:var(--hover);border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2)}
/* icon, first line and button share one centre line (half of --h-sm), even when the text wraps */
.stale svg{width:16px;height:16px;margin:calc((var(--h-sm) - 16px) / 2) 2px 0;flex:none;color:var(--ink-3)}.stale span{flex:1;min-width:0;padding-top:calc((var(--h-sm) - 18px) / 2);line-height:18px}.stale b{color:var(--ink);font-weight:600}
.askc:not(.old) .stale{display:none}
.rate{padding:0 14px 12px}
.r5{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.r5 button{all:unset;box-sizing:border-box;height:var(--h-lg);display:grid;place-items:center;border-radius:var(--r-btn);box-shadow:inset 0 0 0 1px var(--line-2);font:600 15px/1 var(--font-sans);color:var(--ink);cursor:pointer;transition:background var(--dur-fast) var(--ease)}
.r5 button:hover{background:var(--hover)}.r5 button[aria-checked=true]{background:var(--navy);color:var(--on-navy);box-shadow:none}
.r5 button:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.r5l{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:var(--ink-3)}
.why4{margin-top:12px;display:flex;flex-direction:column;gap:6px}.why4[hidden]{display:none}
.why4 label{font-size:13.5px;font-weight:500;color:var(--ink)}.why4 label span{font-weight:400;color:var(--ink-3);margin-left:4px}
.askc.old .ft3{display:none}
.askc .op input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:calc((var(--h-badge) - 18px) / 2) 0 0;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--ink-4);background:var(--surface);display:grid;place-items:center;cursor:pointer}
.askc .op input[type=checkbox]:checked{background:var(--navy);box-shadow:none}
.askc .op input[type=checkbox]:checked::after{content:"";width:9px;height:5px;border:2px solid var(--on-navy);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.askc .op input[type=checkbox]:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.askc .qb+.qb{border-top:1px solid var(--line)}
.askc .qb h5{margin:12px 14px 8px;font:600 14px/1.35 var(--font-sans);color:var(--ink)}
.askc .nobasis{margin:-4px 14px 10px;font-size:12.5px;color:var(--ink-3);line-height:1.4}
.askc .rnd{display:flex;align-items:center;gap:6px;margin:12px 14px 0;min-height:18px;font:600 10.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.askc .rnd span{margin-right:4px}.askc .rnd i{width:18px;height:4px;border-radius:2px;background:var(--line-2)}.askc .rnd i.on{background:var(--voice-edith-mark)}
.askc .sum{margin:0;padding:4px 14px 10px;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--ink)}
.askc .sum li{display:flex;align-items:baseline;gap:8px}.askc .sum li span{flex:1;min-width:0}
.askc .sum .who3{flex:none;font:600 10.5px/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.askc .sum .who3.you{color:var(--ink)}
.askc .assume{margin:0 14px 12px;padding:8px 10px;border-radius:8px;background:var(--hover);font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.askc .ft3.wrap4{flex-wrap:wrap;justify-content:flex-end}.askc .ft3.wrap4 .wt{flex-basis:100%}
.askc.voice .hd3 .mic{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.askc.voice .mic .mb{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--live);color:var(--ink)}
.askc.voice .mic .mb svg{width:14px;height:14px}
.askc .pics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px 12px}
.askc label.pic{display:flex;flex-direction:column;gap:6px;cursor:pointer;border-radius:10px;padding:6px;box-shadow:inset 0 0 0 1px var(--line)}
.askc label.pic:hover{background:var(--hover)}
.askc label.pic:has(input:checked){box-shadow:inset 0 0 0 2px var(--navy)}
.askc label.pic input{position:absolute;opacity:0;pointer-events:none}
.askc label.pic:focus-within{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.askc label.pic small{font-size:12px;color:var(--ink-2);text-align:center}
.thumb{aspect-ratio:4/5;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;gap:4px;padding:6px;box-sizing:border-box}
.thumb i{display:block;border-radius:3px}
.askc .pin{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--navy);color:var(--on-navy);font:600 10.5px/1 var(--font-sans);flex:none;margin-left:4px;vertical-align:middle}

/* ------------------------------------------------------------------ Kind colours, header D on every kind (#620) */
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.kp { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.kp .kh { display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 6px 0 12px; background: linear-gradient(90deg, var(--kp) 0%, var(--kp) var(--head-fade-stop), var(--surface) 100%); }
.kp .kh h3 { margin: 0; flex: 1; font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ki); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp .kh svg { width: 14px; height: 14px; color: var(--ki); }
.kp .km { padding: 6px 12px 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.ksec { display: grid; grid-template-columns: 170px 1fr; gap: 6px 18px; padding: 12px 0; border-top: 1px solid var(--line); }
.ksec:first-child { border-top: 0; }
.ksec h3 { margin: 0; font: 600 14px/1.25 var(--font-sans); color: var(--ink); }
.ksec p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.ksec .ks { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.kc { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 7px; font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.ribbon { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: 0 0 16px; }
.ribbon i { flex: 1; }

/* ------------------------------------------------------------------ Ask card, design pass (Roderic, 28 Sep: "awkward designs like for the ask and polls") */
/* button answers: the question, one line of why, then the answers in a row under it, left-aligned like the Main line's offers */
.askc .sub3 { margin: -4px 14px 10px; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.ask1 .btns { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px; }
.ask1 .bt3 { box-sizing: border-box; height: var(--h-sm); display: inline-flex; align-items: center; padding: 0 12px; font-size: 13px; }
/* 1 to 5: one segmented scale, a hairline between the steps; the pick is navy; picking it answers */
.r5 { gap: 0; border-radius: var(--r-btn); box-shadow: inset 0 0 0 1px var(--line-2); overflow: hidden; }
.r5 button { height: var(--h); border-radius: 0; box-shadow: inset 1px 0 0 var(--line-2); font: 600 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.r5 button:first-child { box-shadow: none; }
.r5 button[aria-checked=true] { box-shadow: none; }
.r5 button:focus-visible { outline-offset: -2px; }
.r5l { margin-top: 5px; }
.askg { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 12px 14px; }
.askg .askc { max-width: none; }
.askcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ------------------------------------------------------------------ Gradients: every Kulip gradient with where it is used (Roderic, 28 Sep: "Why can't we see examples") */
.kgrad { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.kgrad .gt { display: flex; flex-direction: column; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; background: var(--surface); min-width: 0; }
.kgrad .gs { position: relative; height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 12px; }
.kgrad .gm { padding: 8px 10px 9px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); }
.kgrad .gm b { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.kgrad .gm .tk { font-size: 12px; line-height: 1.3; color: var(--ink-2); font-weight: 500; }
.kgrad .gm span:not(.tk) { font-size: 12px; line-height: 1.35; color: var(--ink-3); }
.kgrad .gs.plain { background: var(--ground); }
.kgrad .gw { font: 600 19px/1.1 var(--font-display); letter-spacing: -.01em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kgrad .gbar { width: 100%; height: 6px; border-radius: 999px; background: var(--grad); }
.kgrad .gprog { width: 70%; height: 6px; border-radius: 999px; background: var(--hover); overflow: hidden; }
.kgrad .gprog i { display: block; width: 64%; height: 100%; background: var(--grad); border-radius: 999px; }
.kgrad .gsw { position: relative; width: 36px; height: 22px; border-radius: 999px; background: var(--grad); flex: none; }
.kgrad .gsw::after { content: ""; position: absolute; right: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(2,15,70,.25); }
.kgrad .gtrack { position: relative; width: 150px; height: 34px; border-radius: 999px; background: var(--grad-action); display: grid; place-items: center; padding-left: 22px; color: var(--on-action); font-size: 13px; font-weight: 600; }
.kgrad .gtrack::before { content: ""; position: absolute; left: 3px; top: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; }
.kgrad .gorb { width: 30px; height: 30px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 42%), conic-gradient(from 200deg, #56CCFE, #2E95FE, #7D62FB, #B976FB, #56CCFE); box-shadow: 0 0 0 1px rgba(125,98,251,.25), 0 3px 10px rgba(125,98,251,.3); }
.kgrad .gorb.ask { background: radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 42%), conic-gradient(from 200deg, #FDBA74, #FB923C, #F59E0B, #FDBA74); box-shadow: 0 0 0 1px rgba(251,146,60,.3); }
.kgrad .grim { position: relative; width: 44px; height: 44px; border-radius: 11px; background: var(--head-notes); display: grid; place-items: center; color: var(--ink-notes); flex: none; }
.kgrad .grim::before { content: ""; position: absolute; inset: -3px; border-radius: 14px; padding: 2px; background: conic-gradient(from 20deg, transparent 0deg, transparent 200deg, #56CCFE 260deg, #7D62FB 320deg, #B976FB 358deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.kgrad .grim svg { width: 20px; height: 20px; }
.kgrad .gav { width: 30px; height: 30px; border-radius: 50%; background: var(--avatar-bot); color: var(--on-action); display: grid; place-items: center; flex: none; }
.kgrad .gav svg { width: 16px; height: 16px; }
.kgrad .gnt { width: 100%; display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 6px 10px; font-size: 12.5px; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; }
.kgrad .gnt .fc { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.kgrad .gnt span { overflow: hidden; text-overflow: ellipsis; }
.kgrad .gnt.edith { background: var(--voice-edith-bg); box-shadow: inset 0 0 0 1px var(--voice-edith-line); }
.kgrad .gnt.edith img.fc { image-rendering: pixelated; border-radius: 0; }
.kgrad .gnt.adv { background: var(--voice-advice-bg); box-shadow: inset 0 0 0 1px var(--voice-advice-line); }
.kgrad .gnt.adv .fc { background: var(--voice-advice-mark); color: #020F46; }
.kgrad .gheads { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
.kgrad .gh { display: block; height: 22px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line); background: linear-gradient(90deg, var(--kp) 0%, var(--kp) 35%, var(--surface) 100%); }
.kgrad .gt.wide { grid-column: 1 / -1; }
.kgrad .gt.wide .gs { height: 44px; }

/* ------------------------------------------------------------------ Emoji, version 2 (Roderic, 28 Sep) */
.ke { color: var(--cd); display: inline-block; vertical-align: middle; flex: none; overflow: visible; }
[data-theme="dark"] .ke { color: var(--c); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ke { color: var(--c); } }
.kegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kec { display: flex; flex-direction: column; gap: 3px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); padding: 10px 11px; min-width: 0; }
.kec .kes { display: flex; align-items: flex-end; gap: 10px; height: 34px; margin-bottom: 4px; }
.kec b { font-size: 13.5px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.kec span { font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.kec small { font-size: 11.5px; line-height: 1.3; color: var(--ink-3); }

/* A status mark's glyph is always on-mark (white in light), whatever container it sits in: a toast's .ok colour made the Sent tick dark green (Roderic, 28 Sep). */
.mark, .mark.ok, .mark.err, .mark.ask, .toast .mark, .talkbar .toast .mark, .toast .mark.ok, .talkbar .toast .mark.ok { color: var(--on-mark); }

/* A banner's icon sits 1 px below its title's first line: optically centred, not by the box (Roderic, 28 Sep). */
.banner > svg { position: relative; top: 1px; }