/*
 * kit.css -- shared look + responsive layout for every Workstation web app.
 * Served by each app's server at /kit/kit.css (single source: D:\Workstation\WebApps\kit\ui\).
 * Edit it HERE and every app picks it up on next reload. Companion: kit.js.
 *
 * Design contract (see D:\AgentGuide\webapp-protocol.md):
 *  - Mobile and desktop are the SAME design: one layout that reflows, never a separate mobile site.
 *  - Desktop (fine pointer): tight and compact. Touch (coarse pointer): every target >= 44px.
 *  - Width < 820px: nav becomes a bottom tab bar, split panes become one pane + back button.
 *  - Light/dark follow the OS; apps set only --accent (theme colour) in their own style.css.
 */
:root {
  --accent: #3b5fd9;
  --accent-ink: #fff;
  --bg: #eef0f4; --surface: #fff; --surface-2: #f4f5f8; --line: #d9dce4;
  --ink: #1b1e27; --ink-2: #5b6272; --danger: #c93a3a; --ok: #2c9a5b; --warn: #c58a12;
  --gap: 8px; --pad: 10px; --radius: 8px; --ctl-h: 30px; --font: 14px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --nav-w: 168px; --bar-h: 46px; --tab-h: 56px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14161c; --surface: #1d2028; --surface-2: #252932; --line: #333845;
    --ink: #e8eaf0; --ink-2: #99a0b0;
  }
}
:root[data-theme="dark"] {
  --bg: #14161c; --surface: #1d2028; --surface-2: #252932; --line: #333845; --ink: #e8eaf0; --ink-2: #99a0b0;
}
@media (pointer: coarse) { :root { --ctl-h: 44px; --gap: 10px; --pad: 12px; --font: 16px; --bar-h: 52px; } }

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--font)/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h2 { font-size: 1.1em; } h3 { font-size: 1em; color: var(--ink-2); }
a { color: var(--accent); }
[hidden] { display: none !important; }
.muted { color: var(--ink-2); } .grow { flex: 1 1 0; min-width: 0; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; } .row.nowrap { flex-wrap: nowrap; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }

/* ---- App shell: header + nav + main ---------------------------------------------------- */
.app { display: grid; height: 100vh; height: 100dvh; grid-template-columns: var(--nav-w) 1fr; grid-template-rows: auto 1fr; grid-template-areas: "bar bar" "nav main"; }
.app-bar { grid-area: bar; display: flex; align-items: center; gap: var(--gap); padding: var(--safe-t) var(--pad) 0; min-height: var(--bar-h);
  background: var(--accent); color: var(--accent-ink); }
.app-bar img { width: 24px; height: 24px; border-radius: 6px; }
.app-bar h1 { font-size: 1.05em; }
.app-bar .btn { background: rgba(255,255,255,.16); border-color: transparent; color: inherit; }
.app-nav { grid-area: nav; display: flex; flex-direction: column; gap: 2px; padding: var(--pad) 6px; background: var(--surface); border-right: 1px solid var(--line); overflow: auto; }
.app-nav a { display: flex; align-items: center; gap: 8px; padding: 0 10px; min-height: var(--ctl-h); border-radius: 6px; color: var(--ink); text-decoration: none; }
.app-nav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.app-nav .ico { width: 1.3em; text-align: center; }
.app-main { grid-area: main; overflow: auto; padding: var(--pad); min-width: 0; -webkit-overflow-scrolling: touch; }
@media (max-width: 819px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "bar" "main" "nav"; }
  .app-nav { flex-direction: row; justify-content: space-around; border-right: 0; border-top: 1px solid var(--line); padding: 4px 4px calc(4px + var(--safe-b)); overflow: hidden; }
  .app-nav a { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 0; min-height: var(--tab-h); font-size: .78em; padding: 0 2px; min-width: 0; }
  .app-nav a span.lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-nav .ico { font-size: 1.5em; }
}

/* ---- Master / detail: two panes on desktop, one at a time on a phone ------------------- */
.split { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: var(--gap); height: 100%; min-height: 0; }
.split > .pane { min-width: 0; min-height: 0; overflow: auto; }
.split .back { display: none; }
@media (max-width: 819px) {
  .split { grid-template-columns: 1fr; }
  .split > .pane-detail { display: none; } .split[data-open="detail"] > .pane-list { display: none; } .split[data-open="detail"] > .pane-detail { display: block; }
  .split .back { display: inline-flex; }
}

/* ---- Controls ---------------------------------------------------------------------------- */
.btn, .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--ctl-h); padding: 0 12px; font: inherit; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; touch-action: manipulation; user-select: none; white-space: nowrap; }
.btn:hover, .icon-btn:hover { border-color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { color: var(--danger); } .btn.danger.armed { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.icon-btn { width: var(--ctl-h); padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.field > label, .lbl-s { font-size: .82em; color: var(--ink-2); }
input[type=text], input[type=search], input[type=number], input[type=url], input[type=password], textarea, select {
  min-height: var(--ctl-h); padding: 4px 8px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; width: 100%; min-width: 0; }
textarea { min-height: calc(var(--ctl-h) * 2); resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
@media (pointer: coarse) { input, textarea, select { font-size: 16px; } } /* stops iOS zooming into a field */

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; max-width: 100%; }
.seg button { min-height: calc(var(--ctl-h) - 2px); padding: 0 12px; font: inherit; color: var(--ink); background: var(--surface-2); border: 0; border-left: 1px solid var(--line); cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.seg.wrap { flex-wrap: wrap; border: 0; gap: 4px; } .seg.wrap button { border: 1px solid var(--line); border-radius: 6px; }

.switch { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ctl-h); cursor: pointer; background: none; border: 0; font: inherit; color: var(--ink); padding: 0; }
.switch .track { width: 38px; height: 22px; border-radius: 11px; background: var(--line); position: relative; transition: background .12s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .12s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch[aria-checked="true"] .track { background: var(--accent); } .switch[aria-checked="true"] .track::after { transform: translateX(16px); }
/* a latching button (UI.latch): a boolean drawn as a button that stays filled while on; text or an icon */
.btn.latch[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.latch svg { display: block; }
.compact .btn.latch[aria-pressed="false"] { border-color: color-mix(in srgb, var(--line) 80%, transparent); }   /* an off latch keeps a faint outline in the compact style, so it reads as a control, not a label */

.slider { display: flex; align-items: center; gap: var(--gap); min-height: var(--ctl-h); }
.slider input[type=range] { flex: 1 1 120px; min-width: 80px; accent-color: var(--accent); height: var(--ctl-h); }
.slider input[type=number] { width: 74px; flex: none; }

/* a slider with a default (UI.slider o.def): a tick at the default under the track, the number in the accent colour while off it */
.slider .rng { position: relative; display: flex; align-items: center; flex: 1 1 120px; min-width: 80px; }
.slider .rng input[type=range] { flex: 1 1 auto; width: 100%; min-width: 0; }
.slider .def-tick { position: absolute; bottom: 2px; width: 2px; height: 7px; margin-left: -1px; border-radius: 1px; background: var(--ink-2); opacity: .75; pointer-events: none; }
.slider.changed input[type=number] { color: var(--accent); font-weight: 600; }

/* one labelled parameter row (UI.param): label column + control; a dot before the label while the value is off its default */
.param-row { display: grid; grid-template-columns: var(--param-label-w, 92px) minmax(0, 1fr); align-items: center; gap: 6px; min-height: 30px; }
.param-row > label { font-size: .85em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }
.param-row.changed > label::before, .param-row:has(> .slider.changed) > label::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.param-row.wide { grid-column: 1 / -1; }

/* colour gradient (UI.gradient): bar with stops, the sampled colours below it beside the Steps slider */
.grad { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.grad-bar { position: relative; height: 22px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); cursor: copy; touch-action: none; }
.grad-fill { position: absolute; left: 6px; right: 6px; top: 3px; bottom: 3px; border-radius: 2px; pointer-events: none; }
.grad-stop { position: absolute; top: -2px; width: 12px; height: 24px; margin-left: -6px; padding: 0; border: 2px solid #fff; border-radius: 3px; outline: 1px solid rgba(0,0,0,.55); background: transparent; cursor: ew-resize; touch-action: none; -webkit-appearance: none; appearance: none; }
.grad-stop::-webkit-color-swatch-wrapper { padding: 0; } .grad-stop::-webkit-color-swatch { border: 0; border-radius: 1px; } .grad-stop::-moz-color-swatch { border: 0; }
.grad-stop.locked { cursor: not-allowed; opacity: .8; outline-style: dashed; }
.grad-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.grad-sw { display: flex; flex: 1 1 auto; min-width: 0; height: 14px; border-radius: 3px; overflow: hidden; border: 1px solid var(--line); }
.grad-sw i { flex: 1 1 0; min-width: 0; }
.grad-row .slider { flex: 0 0 auto; } .grad-row .slider .rng { flex: 0 0 64px; min-width: 48px; } .grad-row .slider input[type=number] { width: 44px; }
.grad-mi { display: inline-flex; align-items: center; gap: 8px; } .grad-mi i { display: inline-block; width: 56px; height: 12px; border-radius: 2px; border: 1px solid var(--line); }
@media (pointer: coarse) { .grad-bar { height: 30px; } .grad-stop { height: 32px; width: 18px; margin-left: -9px; } }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: .85em; }
.chip.ok { color: var(--ok); } .chip.bad { color: var(--danger); } .chip.warn { color: var(--warn); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); }
.card > header { display: flex; align-items: center; gap: var(--gap); flex-wrap: nowrap; margin-bottom: 6px; } /* header never wraps (ui-rules s3) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--gap); }

.list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.list > .item { display: flex; align-items: center; gap: var(--gap); min-height: calc(var(--ctl-h) + 6px); padding: 4px var(--pad); border-top: 1px solid var(--line); cursor: pointer; }
.list > .item:first-child { border-top: 0; } .list > .item:hover { background: var(--surface-2); }
.list > .item[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.list .grip { cursor: grab; touch-action: none; color: var(--ink-2); padding: 0 4px; }

.empty { text-align: center; color: var(--ink-2); padding: 28px 12px; }
.progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .progress > i { display: block; height: 100%; background: var(--accent); }

/* ---- Overlays: sheet (bottom sheet on phone, centred dialog on desktop), menu, toast ------ */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 50; display: flex; align-items: center; justify-content: center; }
.sheet { background: var(--surface); border-radius: 12px; width: min(560px, 94vw); max-height: 88dvh; overflow: auto; padding: var(--pad); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
@media (max-width: 819px) { .scrim { align-items: flex-end; } .sheet { width: 100%; border-radius: 14px 14px 0 0; padding-bottom: calc(var(--pad) + var(--safe-b)); } }
.popover { position: fixed; z-index: 65; width: max-content; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; padding: var(--pad); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.28); }
.popover.compact { padding: 8px; border-radius: 6px; }
.menu { position: fixed; z-index: 60; min-width: 180px; max-width: 92vw; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0,0,0,.3); padding: 4px; }
.menu .mi { display: flex; align-items: center; gap: 8px; min-height: var(--ctl-h); padding: 0 10px; border-radius: 5px; cursor: pointer; }
.menu .mi:hover { background: var(--surface-2); } .menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.toasts { position: fixed; z-index: 70; left: 0; right: 0; bottom: calc(var(--tab-h) + 12px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
@media (min-width: 820px) { .toasts { bottom: 16px; } }
.toast { background: #222733; color: #fff; padding: 8px 14px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.35); max-width: 92vw; pointer-events: auto; }
.toast.bad { background: var(--danger); }

table.t { width: 100%; border-collapse: collapse; } table.t th, table.t td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); }
@media (max-width: 819px) { /* a wide table becomes stacked cards: each cell shows its column name from data-k */
  table.t thead { display: none; } table.t tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--line); }
  table.t td { display: flex; gap: 8px; border: 0; padding: 2px 8px; } table.t td::before { content: attr(data-k); color: var(--ink-2); min-width: 84px; }
}

/* ---- Collapsible section (UI.fold) ---- */
details.fold { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0 var(--pad) var(--pad); }
details.fold > summary { cursor: pointer; font-weight: 600; min-height: var(--ctl-h); display: flex; align-items: center; list-style: none; }
details.fold > summary::before { content: "▸"; margin-right: 6px; transition: transform .1s; } details.fold[open] > summary::before { transform: rotate(90deg); }

/* ---- Number with a drag-scrub label (UI.number) and 2D pad (UI.pad2d) ---- */
.numfield { display: inline-flex; align-items: center; gap: 3px; }
.numfield .scrub { cursor: ew-resize; user-select: none; touch-action: none; font-size: .82em; color: var(--ink-2); padding: 0 2px; }
.numfield input.num { min-width: 0; padding: 2px 4px; }
.pad2d { position: relative; flex: none; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); cursor: crosshair; touch-action: none; }
.pad2d b { position: absolute; background: var(--line); } .pad2d b.h { left: 0; right: 0; top: 50%; height: 1px; } .pad2d b.v { top: 0; bottom: 0; left: 50%; width: 1px; }
.pad2d i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }

/* ---- Colour (UI.color) and palette / ramp (UI.palette) ---- */
input.color { width: 34px; height: var(--ctl-h); padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; }
.palette { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.compact input.color { height: 26px; width: 28px; }

/* ---- compact mode ----
 * Add class "compact" to any toolbar / strip / panel region (a tool UI, a full-screen bar, a phone toolbar) to get the dense style: borderless small buttons (28 px, 32 px on
 * touch), flat segmented choosers with only the selected one filled, small switches and sliders, icon buttons that grey out when disabled. Use it wherever the preview or the
 * work area should get the space. Pair it with tabs (one group of controls visible at a time) and UI.icon for undo / redo / delete. */
.compact .btn, .compact .icon-btn { min-height: 28px; padding: 0 7px; border-color: transparent; background: transparent; font-size: 13px; gap: 3px; }
.compact .icon-btn { width: 28px; padding: 0; }
.compact .btn:hover, .compact .icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.compact .btn.primary { background: var(--accent); color: var(--accent-ink); }
.compact .btn[disabled], .compact .icon-btn[disabled] { opacity: .35; pointer-events: none; }
.compact .seg { border: 0; background: transparent; gap: 1px; }
.compact .seg button { min-height: 28px; padding: 0 8px; border: 0; border-radius: 5px; background: transparent; font-size: 13px; }
.compact .seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.compact .switch { min-height: 28px; gap: 4px; font-size: 13px; }
.compact .switch .track { width: 28px; height: 16px; } .compact .switch .track::after { top: 2px; left: 2px; width: 12px; height: 12px; } .compact .switch[aria-checked="true"] .track::after { transform: translateX(12px); }
.compact input[type=range] { width: 84px; min-width: 52px; }
.compact .numfield input.num { min-height: 26px; }
@media (pointer: coarse) { .compact .btn, .compact .icon-btn, .compact .seg button, .compact .switch { min-height: 32px; } .compact .icon-btn { width: 32px; } }