/* Clay Org. An architectural-model look for a tool managers use every day: restrained greys,
   stone and desaturated sage; one muted accent for every ordinary state; orange only for an
   incident. Inter for type, small and data-first. The softness lives in the 3D lighting, not in
   the controls, which aim for a dense but calm pro tool.

   The chrome follows the theme through the tokens below; the 3D palette for the same theme is
   in js/themes.js. */

:root {
  --bg: #e6e8eb;
  --ink: #1e2a3d;
  --ink-2: #4a5568;
  --ink-3: #7b8594;
  --card: #ffffff;
  --card-2: #f4f5f7;
  --line: #dde1e6;
  --line-2: #c9ced6;
  --accent: #5b7db1;
  --accent-soft: #e7edf6;
  --accent-ink: #3d5a8f;
  --dot: #8fa3c2;
  --orange-1: #ffc58c;
  --orange: #f2a563;
  --orange-2: #e58f48;
  --orange-soft: #fdf1e5;
  --danger: #b4483f;
  --ok: #5f9a78;
  --focus: #3d6fd6;
  --shadow: 0 1px 2px rgba(30, 42, 61, 0.06), 0 8px 24px rgba(30, 42, 61, 0.08);
  --shadow-sm: 0 1px 2px rgba(30, 42, 61, 0.08);
  --r: 8px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 1, 'cv11' 1;
  color-scheme: light;
}
:root[data-theme='slate'] { --bg: #e2e6ec; --accent: #4f74a8; --accent-soft: #e4ebf5; --card-2: #f2f4f7; --line: #d9dee6; --line-2: #c4cbd6; }
:root[data-theme='sand'] { --bg: #e9e6e1; --accent: #5c7aa6; --accent-soft: #e8ecf3; --card-2: #f5f3ef; --line: #e2ded7; --line-2: #cec8bf; --ink-2: #4f4c47; --ink-3: #85807a; }
:root[data-theme='night'] {
  --bg: #151a22; --ink: #e4e9f1; --ink-2: #b6c0cf; --ink-3: #8592a6; --card: #1d232d; --card-2: #252c37; --line: #2e3643; --line-2: #3b4452;
  --accent: #7a9cd0; --accent-soft: #24324a; --accent-ink: #a9c1e8; --orange-soft: #3a2a1d; --danger: #e08a82;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); overscroll-behavior: none; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
strong { font-weight: 600; }
kbd { font: 500 11px/1 'Inter', system-ui, sans-serif; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 2px 5px; color: var(--ink-2); background: var(--card); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.empty { padding: 6px 0; }

/* ------------------------------------------------------------------ layers */

#backdrop { position: fixed; inset: 0; background: var(--bg); }
#stars { position: fixed; inset: 0; opacity: 0; pointer-events: none; background-size: 512px 512px; }
#map { position: fixed; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; --pins: 0; }
#map.live { pointer-events: auto; }
#map.picking .maplibregl-canvas { cursor: crosshair; }
/* !important because MapLibre writes its own inline opacity on markers. */
#map .maplibregl-marker { opacity: var(--pins) !important; }
#map.map-missing { background: #eef0ee; display: grid; place-items: center; }
.map-dim { position: absolute; inset: 0; background: #0e1424; opacity: 0; pointer-events: none; transition: opacity 600ms var(--ease); z-index: 1; }
.map-note { background: var(--card); padding: 10px 14px; border-radius: var(--r); box-shadow: var(--shadow-sm); }
#stage { position: fixed; inset: 0; touch-action: none; }
#stage.passthrough { pointer-events: none; }
#stage.passthrough .lbl { pointer-events: none; }
.world-canvas { display: block; position: absolute; inset: 0; }
body.panning .world-canvas { cursor: grabbing !important; }
.label-layer { position: absolute !important; inset: 0; pointer-events: none; }
#veil { position: fixed; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 180ms ease; z-index: 30; }
#veil.on { opacity: 1; }
body.dark #veil { background: #0e1320; }

.boot { position: fixed; inset: 0; display: grid; place-content: center; grid-auto-flow: column; gap: 10px; align-items: center; background: var(--bg); color: var(--ink-2); z-index: 80; transition: opacity 350ms var(--ease); font-size: 13px; }
.boot.gone { opacity: 0; pointer-events: none; }
.spinner { width: 14px; height: 14px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#drag-line { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; display: none; }
#drag-line.on { display: block; }
#drag-line line { stroke: var(--dot); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 8; }
#drag-line.ok line { stroke: #a9cdb6; }

/* ------------------------------------------------------------------ labels in the 3D view */

.lbl {
  pointer-events: auto;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 96%, transparent);
  color: var(--ink);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  display: flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
  line-height: 16px;
  box-shadow: var(--shadow-sm);
}
.lbl .name { font-weight: 600; }
.lbl .meta { color: var(--ink-3); font-weight: 400; }
.lbl:hover { border-color: var(--accent); }
.lbl.pending { border-style: dashed; border-color: var(--accent); }
.lbl.incident { border-color: var(--orange); }
.lbl.hi { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.lbl.small { font-size: 10px; padding: 1px 5px; }
.lbl.small .meta { display: none; }
.lbl .badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; padding: 0 5px; border-radius: 3px; background: var(--card-2); color: var(--ink-2); font-weight: 500; }
.lbl .badge.plan { background: var(--accent-soft); color: var(--accent-ink); }
.lbl .badge.hold { background: var(--orange); color: #fff; }
.lbl.plaza { cursor: default; background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--ink-2); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: none; }
.lbl.plaza.over, [data-drop="general"].over { border-color: var(--accent); background: var(--card); }
.lbl.expand { background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--accent); border: 1px dashed var(--accent); font-weight: 600; box-shadow: none; }
.lbl.expand:hover { background: var(--card); }
.lbl.hub { cursor: default; background: transparent; border: 0; box-shadow: none; color: #a9bbd8; letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; }
.lbl.agent .counts { display: none; }
.lbl.agent.expanded .counts { display: inline; }
.lbl svg { flex: none; color: var(--ink-2); }
.status { width: 7px; height: 7px; border-radius: 1px; background: #aeb4be; display: inline-block; flex: none; }
.status.busy { background: #6e93c9; }
.status.waiting { background: var(--orange); }

.label-layer.dark .lbl { background: rgba(16, 22, 36, 0.88); color: #e4e9f1; border-color: rgba(169, 187, 216, 0.28); box-shadow: none; }
.label-layer.dark .lbl .meta { color: #94a3ba; }
.label-layer.dark .lbl svg { color: #b6c2d6; }
.label-layer.dark .lbl:hover { border-color: #a9bbd8; }
.label-layer.dark .lbl.incident { border-color: var(--orange); }
.label-layer.dark .lbl .badge { background: rgba(255, 255, 255, 0.08); color: #c3cee0; }
.label-layer.dark .lbl .badge.hold { background: var(--orange); color: #1e2a3d; }
.label-layer.dark .lbl.hub { background: transparent; border: 0; }
body.building.dark .lbl.channel, body.building.dark .lbl.agent { cursor: grab; }

/* Activity bubbles: a short note that rises and fades above a building. */
.bubble { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--card); color: var(--ink-2); border: 1px solid var(--line); box-shadow: var(--shadow-sm); pointer-events: none; animation: bubble 2.6s var(--ease) forwards; }
.bubble.call { border-color: var(--accent); color: var(--accent-ink); }
.bubble.hold { border-color: var(--orange); background: var(--orange-soft); color: #9a561d; }
@keyframes bubble { 0% { opacity: 0; translate: 0 8px; } 12% { opacity: 1; translate: 0 0; } 75% { opacity: 1; } 100% { opacity: 0; translate: 0 -14px; } }

/* ------------------------------------------------------------------ buttons */

.btn {
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink);
  border-radius: 6px;
  padding: 5px 11px;
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}
.btn:hover { background: var(--card-2); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--card); }
.btn.primary:hover { filter: brightness(1.15); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.btn.small { padding: 3px 8px; font-size: 12px; }
.btn.danger, .danger { color: var(--danger); }
.btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--card); }
.btn.icon-only { width: 30px; height: 30px; padding: 0; justify-content: center; font-weight: 600; }
.icon-btn { border: 1px solid var(--line); background: var(--card); width: 26px; height: 26px; border-radius: 6px; font-size: 16px; line-height: 1; cursor: pointer; flex: none; color: var(--ink-2); }
.icon-btn:hover { background: var(--card-2); }

.segmented { display: flex; background: var(--card-2); padding: 2px; border-radius: 7px; border: 1px solid var(--line); }
.segmented button { border: 0; background: transparent; color: var(--ink-2); padding: 4px 10px; border-radius: 5px; font-weight: 500; font-size: 12px; cursor: pointer; transition: background 140ms var(--ease), color 140ms var(--ease); }
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.segmented button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ------------------------------------------------------------------ top bar */

/* A light top bar: no slab across the page, just two quiet clusters at the corners (round 7: the
   search island between them is gone; the dock searches). Above the drawer and panels, so its
   menus drop over them. */
.topbar { position: fixed; top: 10px; left: 10px; right: 10px; height: 42px; display: flex; justify-content: space-between; align-items: center; gap: 8px; z-index: 28; pointer-events: none; }
.bar-group { display: flex; align-items: center; gap: 4px; min-width: 0; pointer-events: auto; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--card) 72%, transparent); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.org-btn { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.org-btn:hover { background: var(--card-2); }
.caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--ink-3); }
.logo { width: 18px; height: 18px; border-radius: 3px; background: linear-gradient(135deg, #f3f2ef 0 50%, #c7cfc3 50%); box-shadow: inset 0 0 0 1px var(--line-2); }
.exp-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); border: 1px solid var(--line); padding: 1px 6px; border-radius: 3px; }
.views { margin-left: 6px; }
.search-btn { color: var(--ink-3); min-width: 170px; justify-content: flex-start; background: var(--card-2); border-color: var(--line); }
.search-btn kbd { margin-left: auto; }
.search-ico { width: 11px; height: 11px; border: 1.6px solid currentColor; border-radius: 50%; position: relative; }
.search-ico::after { content: ''; position: absolute; width: 5px; height: 1.6px; background: currentColor; right: -4px; bottom: -2px; transform: rotate(45deg); }
.clock-group { display: flex; gap: 2px; background: var(--card-2); border: 1px solid var(--line); border-radius: 7px; padding: 2px; }
.clock-btn { border: 0; background: transparent; padding: 3px 8px; border-radius: 5px; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.clock-btn:hover { background: var(--card); }
.clock-time { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.clock-speed { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.sun-ico { width: 10px; height: 10px; border-radius: 50%; background: #e7c977; box-shadow: 0 0 0 2px color-mix(in srgb, #e7c977 30%, transparent); }
:root[data-light='night'] .sun-ico { background: #b9c6e0; box-shadow: inset -3px -1px 0 #6d7a94; }
:root[data-light='sunset'] .sun-ico, :root[data-light='sunrise'] .sun-ico { background: #e8b8a0; }
.swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; background: linear-gradient(135deg, #f3f2ef 0 50%, #c7cfc3 50%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.swatch.slate { background: linear-gradient(135deg, #f1f3f6 0 50%, #b6bfcb 50%); }
.swatch.sand { background: linear-gradient(135deg, #f4f2ee 0 50%, #c3c0b4 50%); }
.swatch.night { background: linear-gradient(135deg, #a7aeb9 0 50%, #2c3440 50%); }
:root[data-theme='slate'] #btn-theme .swatch { background: linear-gradient(135deg, #f1f3f6 0 50%, #b6bfcb 50%); }
:root[data-theme='sand'] #btn-theme .swatch { background: linear-gradient(135deg, #f4f2ee 0 50%, #c3c0b4 50%); }
:root[data-theme='night'] #btn-theme .swatch { background: linear-gradient(135deg, #a7aeb9 0 50%, #2c3440 50%); }
.undo-seg button { font-size: 15px; padding: 1px 8px; }

.menu-wrap { position: relative; }
.menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 200px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; z-index: 50; display: flex; flex-direction: column; animation: pop 140ms var(--ease); }
.bar-group:last-child .menu { left: auto; right: 0; }
.menu-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); padding: 6px 8px 4px; font-weight: 600; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }
.menu [role^=menuitem] { border: 0; background: transparent; text-align: left; padding: 6px 8px; border-radius: 5px; cursor: pointer; display: flex; gap: 8px; align-items: center; font-size: 13px; }
.menu [role^=menuitem]:hover, .menu [role^=menuitem]:focus-visible { background: var(--card-2); outline: none; }
.menu [role^=menuitem] small { color: var(--ink-3); font-size: 11px; margin-left: auto; }
.menu [role=menuitemradio][aria-checked="true"]::after { content: '✓'; margin-left: auto; color: var(--accent); font-weight: 600; }
.menu [role=menuitemradio][aria-checked="true"] small { margin-left: 8px; }
.popover { padding: 8px; gap: 8px; min-width: 240px; }
.popover .menu-label { padding: 0; }
.scrub { margin: 0; }
.scrub input { width: 100%; accent-color: var(--accent); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }

/* ------------------------------------------------------------------ side controls */

.depthnav { position: fixed; left: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; background: var(--card); padding: 4px; border-radius: var(--r); border: 1px solid var(--line); z-index: 20; }
.depthnav button { border: 0; background: transparent; padding: 6px 10px 6px 8px; border-radius: 5px; font-weight: 500; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.depthnav button:hover { background: var(--card-2); }
.depthnav button[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.depthnav .tick { width: 6px; height: 6px; border: 1.5px solid currentColor; }
.depthnav button[aria-pressed="true"] .tick { background: currentColor; }

.camctl { position: fixed; right: 12px; bottom: 14px; display: flex; align-items: center; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 3px; z-index: 20; box-shadow: var(--shadow-sm); }
.camctl button { width: 28px; height: 28px; border: 0; background: transparent; border-radius: 5px; cursor: pointer; font-size: 15px; color: var(--ink-2); }
.camctl button:hover { background: var(--card-2); color: var(--ink); }
.camctl .sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
.compass { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); }
.compass i { font-style: normal; font-size: 9px; font-weight: 700; color: var(--accent); display: block; transition: transform 300ms var(--ease); }


.crumbs { position: fixed; top: 62px; left: 12px; display: flex; gap: 6px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px 3px 4px; z-index: 19; font-size: 12px; color: var(--ink-3); }
.crumbs button { border: 0; background: transparent; color: var(--accent); cursor: pointer; padding: 2px 6px; border-radius: 4px; font-weight: 500; }
.crumbs button:hover { background: var(--accent-soft); }
.crumbs #crumb-here { color: var(--ink); font-weight: 600; }

.floating { position: fixed; top: 62px; left: 50%; transform: translateX(-50%); z-index: 20; }
.map-status { position: fixed; top: 100px; left: 50%; transform: translateX(-50%); z-index: 20; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; font-size: 12px; color: var(--ink-2); box-shadow: var(--shadow-sm); }
.map-status[data-state='error'] { border-color: var(--danger); color: var(--danger); }
.sky-seg { position: fixed; top: 62px; left: 50%; transform: translateX(-50%); background: rgba(16, 22, 36, 0.88); z-index: 20; border-color: rgba(169, 187, 216, 0.25); }
.sky-seg button { color: #c3cee0; }
.sky-seg button[aria-pressed="true"] { background: #e4e9f1; color: #1e2a3d; }

/* ------------------------------------------------------------------ tooltip and context menu */

.tooltip { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; background: var(--ink); color: var(--card); border-radius: 6px; padding: 6px 9px; font-size: 12px; display: flex; flex-direction: column; gap: 1px; max-width: 300px; box-shadow: var(--shadow); }
.tooltip span { opacity: 0.8; }
.ctxmenu { position: fixed; top: 0; left: 0; min-width: 190px; z-index: 75; }
.ctxmenu .danger { color: var(--danger); }

/* ------------------------------------------------------------------ panels */

.panel { position: fixed; top: 62px; right: 12px; bottom: 72px; width: min(340px, calc(100vw - 24px)); background: var(--card); border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 14px; overflow: auto; z-index: 22; display: flex; flex-direction: column; gap: 14px; animation: slide-in 200ms var(--ease); }
@keyframes slide-in { from { opacity: 0; transform: translateX(10px); } }
.panel h2 { font-size: 15px; font-weight: 600; }
.panel h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 6px; font-weight: 600; }
.panel section + section { border-top: 1px solid var(--line); padding-top: 12px; }
.panel section > .btn { margin-top: 8px; }
.panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.panel-head h2:focus { outline: none; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -4px; }
.eyebrow { font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; border-bottom: 1px solid var(--card-2); }
.row:last-child { border-bottom: 0; }
.row .grow { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.row strong { font-weight: 500; }
.row small, .chip small { color: var(--ink-3); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convs .row strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; font-weight: 600; font-size: 11px; flex: none; color: #1e2a3d; box-shadow: inset 0 0 0 1px rgba(30, 42, 61, 0.08); }
.thing { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; background: var(--card-2); color: var(--ink-2); flex: none; }
.chip-tag { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: var(--card-2); color: var(--ink-2); flex: none; font-weight: 500; }
.chip-tag.ok { background: color-mix(in srgb, var(--ok) 18%, var(--card)); color: color-mix(in srgb, var(--ok) 70%, var(--ink)); }
.chip-tag.plan { background: var(--accent-soft); color: var(--accent-ink); }
.activity { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.activity li { display: flex; gap: 8px; align-items: center; }
.activity time { color: var(--ink-3); font-variant-numeric: tabular-nums; width: 36px; flex: none; }
.activity .thing { width: 18px; height: 18px; border-radius: 3px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
.stats div { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.stats dt { font-size: 11px; color: var(--ink-3); }
.stats dd { margin: 0; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 12px; }
.actions.wrap { flex-wrap: wrap; justify-content: flex-start; margin-top: 8px; }

.incident-box { background: var(--orange-soft); border-radius: 6px; padding: 10px; border: 1px solid var(--orange-1); }
.incident-box .eyebrow { color: #9a561d; }
:root[data-theme='night'] .incident-box .eyebrow { color: var(--orange-1); }
.incident-box .actions { justify-content: flex-start; margin-top: 8px; }

.side-list { background: rgba(14, 19, 32, 0.92); color: #e4e9f1; border-color: rgba(169, 187, 216, 0.2); z-index: 21; }
.side-list h2 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3ba; font-weight: 600; }
.side-list .row { border-bottom-color: rgba(169, 187, 216, 0.1); }
.side-list .row small, .side-list .muted { color: #94a3ba; }
.side-list .thing { background: rgba(255, 255, 255, 0.06); color: #c3cee0; }
.list-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.list-table th, .list-table td { text-align: left; padding: 6px 4px; border-bottom: 1px solid rgba(169, 187, 216, 0.12); vertical-align: middle; }
.list-table thead th { font-size: 10px; color: #94a3ba; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.list-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.list-table td .status { margin-right: 6px; }
.list-table th small { display: block; color: #94a3ba; font-weight: 400; font-size: 11px; }
.link { border: 0; background: none; padding: 0; color: inherit; font-weight: 500; cursor: pointer; text-align: left; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ build drawer */

.drawer { position: fixed; left: 12px; top: 62px; bottom: 72px; width: min(310px, calc(100vw - 24px)); background: var(--card); border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow); z-index: 21; display: flex; flex-direction: column; overflow: hidden; animation: slide-in-l 200ms var(--ease); }
@keyframes slide-in-l { from { opacity: 0; transform: translateX(-10px); } }
.drawer-head { padding: 8px 8px 0; }
[role="tablist"] { display: flex; gap: 2px; background: var(--card-2); padding: 3px; border-radius: 6px; }
[role="tab"] { flex: 1; border: 0; background: transparent; padding: 5px 4px; border-radius: 4px; font-weight: 500; font-size: 12px; cursor: pointer; color: var(--ink-2); }
[role="tab"][aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.pane { padding: 10px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.pane h4 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 4px; font-weight: 600; }
.pane-hint { font-size: 11px; color: var(--ink-3); margin: 0 0 4px; line-height: 1.45; }
.pane-top { display: flex; justify-content: flex-end; margin-bottom: -4px; }
.chips { display: flex; flex-direction: column; gap: 2px; }
.chip { display: flex; align-items: center; gap: 8px; text-align: left; border: 1px solid transparent; background: transparent; padding: 4px 6px; border-radius: 5px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.chip strong { font-weight: 500; }
.chip .grow { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.chip:hover { background: var(--card-2); }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--card); }
.chip.pending { border-color: var(--accent); border-style: dashed; }
.chip-new { cursor: grab; touch-action: none; }
.dropzone { border: 1px dashed var(--line-2); border-radius: 6px; padding: 8px; }
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.pane-actions { position: sticky; bottom: -10px; background: linear-gradient(to bottom, transparent, var(--card) 30%); padding: 12px 0 2px; display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.part { border-radius: 6px; padding: 8px; border: 1px solid var(--line); }
.part.current { border-color: var(--accent); }
.land-grid { display: flex; flex-direction: column; gap: 4px; }
.land-item { display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--line); background: var(--card); padding: 6px 8px; border-radius: 6px; cursor: grab; touch-action: none; user-select: none; }
.land-item:hover { border-color: var(--accent); }
.land-item .grow { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.land-item strong { font-weight: 500; }
.land-item small { color: var(--ink-3); font-size: 11px; }
.land-item svg rect { fill: var(--line-2); }
.land-swatch { width: 22px; height: 22px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.land-swatch.park, .land-swatch.garden { background: linear-gradient(#bfcdb5 0 100%); }
.land-swatch.forest { background: repeating-linear-gradient(45deg, #93a88d 0 4px, #a3b59a 4px 8px); }
.land-swatch.beach { background: linear-gradient(90deg, #ddd3c0 60%, #9fb3c4 60%); }
.land-swatch.water, .land-swatch.river { background: #9fb3c4; }
.land-swatch.plaza { background: repeating-linear-gradient(0deg, #d9d6cf 0 5px, #ecebe7 5px 6px); }
.land-swatch.parking, .land-swatch.road { background: repeating-linear-gradient(90deg, #a9acb1 0 6px, #ecebe7 6px 7px); }
body.dragging, body.dragging * { cursor: grabbing !important; }
body.dragging { user-select: none; }

.drag-ghost { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; display: flex; align-items: center; gap: 8px; background: var(--card); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line-2); box-shadow: var(--shadow); max-width: 240px; font-size: 12px; }
.drag-ghost .grow { display: flex; flex-direction: column; }
.drag-ghost small { color: var(--ink-3); font-size: 11px; }
.drag-ghost .chip-tag { display: none; }
.drag-ghost.ok { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }

/* ------------------------------------------------------------------ plan bar, hint, ticker */

.planbar { position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; background: var(--card); padding: 6px 6px 6px 12px; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow); z-index: 25; animation: rise 200ms var(--ease); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }
.plan-count { font-weight: 600; margin-right: 6px; display: flex; align-items: center; gap: 8px; }
.plan-count::before { content: ''; width: 7px; height: 7px; background: var(--accent); }
.hint { position: fixed; bottom: 74px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--ink-2); background: color-mix(in srgb, var(--card) 85%, transparent); padding: 5px 12px; border-radius: 6px; border: 1px solid var(--line); z-index: 19; white-space: nowrap; display: flex; gap: 8px; align-items: center; max-width: calc(100vw - 420px); overflow: hidden; text-overflow: ellipsis; }
.hint.active { background: var(--card); color: var(--ink); z-index: 26; border-color: var(--accent); }
body:has(#planbar:not([hidden])) .hint { bottom: 122px; }
body.dark .hint { background: rgba(16, 22, 36, 0.8); color: #c3cee0; border-color: rgba(169, 187, 216, 0.2); }
.ticker { position: fixed; left: 12px; bottom: 12px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 4px; z-index: 18; width: min(300px, 30vw); }
.ticker li { display: flex; gap: 8px; align-items: center; background: color-mix(in srgb, var(--card) 92%, transparent); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); font-size: 12px; animation: tick-in 300ms ease both; }
.ticker li span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticker .thing { width: 20px; height: 20px; }
.ticker strong { font-weight: 600; }
body.dark .ticker li { background: rgba(16, 22, 36, 0.86); color: #e4e9f1; border-color: rgba(169, 187, 216, 0.15); }
body.dark .ticker .thing { background: rgba(255, 255, 255, 0.06); color: #c3cee0; }
body:has(#onboard:not([hidden])) .ticker { display: none; }
@keyframes tick-in { from { opacity: 0; transform: translateY(6px); } }

.incident-card { position: fixed; left: 0; top: 0; width: 270px; background: #fff; color: #1e2a3d; border-radius: var(--r); padding: 12px; border: 1px solid var(--orange); box-shadow: 0 0 0 3px rgba(242, 165, 99, 0.25), 0 12px 32px rgba(0, 0, 0, 0.35); z-index: 23; }
.incident-card .eyebrow { color: #9a561d; }
.incident-card #incident-q { font-size: 14px; margin-top: 4px; line-height: 1.4; }
.incident-card .actions { justify-content: flex-start; margin-top: 10px; }
.incident-card .btn { background: #fff; color: #1e2a3d; border-color: #c9ced6; }
.incident-card .btn.primary { background: #1e2a3d; color: #fff; }

.toast { position: fixed; top: 62px; left: 50%; transform: translate(-50%, -6px); background: var(--ink); color: var(--card); padding: 8px 14px; border-radius: 6px; font-size: 13px; z-index: 60; opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 200ms var(--ease); max-width: min(520px, calc(100vw - 24px)); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
body:has(#btn-back:not([hidden])) .toast, body:has(#sky-mode:not([hidden])) .toast { top: 100px; }

/* ------------------------------------------------------------------ onboarding */

.onboard { position: fixed; left: 12px; bottom: 14px; width: 320px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 14px; z-index: 24; display: flex; flex-direction: column; gap: 10px; animation: rise-l 260ms var(--ease); }
@keyframes rise-l { from { opacity: 0; transform: translateY(10px); } }
.onboard header { display: flex; justify-content: space-between; align-items: center; }
.onboard h2 { font-size: 14px; font-weight: 600; }
.ob-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ob-steps li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-3); }
.ob-steps li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.ob-steps small { color: var(--ink-2); font-size: 12px; line-height: 1.4; }
.ob-steps .n { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: none; }
.ob-steps li.now { color: var(--ink); }
.ob-steps li.now .n { border-color: var(--accent); color: var(--accent); }
.ob-steps li.done .n { background: var(--accent); border-color: var(--accent); color: #fff; }
.ob-form .field { margin-bottom: 8px; }
body.building .onboard { left: 334px; }

/* ------------------------------------------------------------------ map pins */

.pin { width: 0; height: 0; position: relative; --dx: 0px; --dy: -26px; --len: 26px; --ang: -1.5708rad; }
.pin-anchor { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; background: var(--ink); box-shadow: 0 0 0 2px var(--card); }
.pin-stem { position: absolute; left: 0; top: 0; width: var(--len); height: 0; border-top: 2px dotted var(--dot); transform-origin: 0 0; transform: rotate(var(--ang)); }
.pin-body { position: absolute; left: 0; top: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))); display: flex; align-items: center; gap: 6px; }
.pin-site .pin-body { border: 1px solid var(--line-2); background: var(--card); color: var(--ink); padding: 3px 8px 3px 4px; border-radius: 5px; box-shadow: 0 2px 6px rgba(30, 42, 61, 0.14); cursor: pointer; font-weight: 600; font-size: 11px; white-space: nowrap; }
.pin-site .pin-body:hover, .pin-site.hover .pin-body { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), 0 2px 6px rgba(30, 42, 61, 0.14); }
/* The pin's glyph is the building in plan: a pale square with its type's band along the top. */
.pin-house { width: 18px; height: 18px; border-radius: 2px; background: #f3f2ef; box-shadow: inset 0 0 0 1px var(--line-2); position: relative; display: block; border-top: 4px solid var(--stripe, #b3a694); }
.pin-house i { display: none; }
.pin-site.incident .pin-body { border-color: var(--orange); background: var(--orange-soft); animation: pin-pulse 1.6s ease-in-out infinite; }
.pin-site.incident .pin-house { background: var(--orange-1); border-top-color: var(--orange-2); }
.pin.pending .pin-body { border-style: dashed; border-color: var(--accent); }
.pin-site.draggable .pin-body { cursor: grab; }
@keyframes pin-pulse { 50% { box-shadow: 0 0 0 5px rgba(242, 165, 99, 0.25), 0 2px 6px rgba(30, 42, 61, 0.14); } }
.pin-thing { --dy: 0px; --len: 0px; }
.pin-thing .pin-anchor { display: none; }
.pin-thing .pin-body { width: 24px; height: 24px; border-radius: 4px; background: var(--card); border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--ink-2); box-shadow: 0 2px 6px rgba(30, 42, 61, 0.14); }
.pin-moving .pin-body { width: auto; height: auto; padding: 3px 8px; display: flex; gap: 5px; white-space: nowrap; border-color: var(--accent); font-size: 11px; }

.maplibregl-ctrl-attrib { font-family: inherit; font-size: 11px; }
.maplibregl-ctrl-bottom-right { margin-bottom: 60px; }

/* ------------------------------------------------------------------ dialogs */

dialog { border: 1px solid var(--line); border-radius: 10px; padding: 18px; width: min(420px, calc(100vw - 24px)); box-shadow: 0 20px 50px rgba(30, 42, 61, 0.2); color: var(--ink); background: var(--card); max-height: calc(100vh - 40px); }
dialog.wide { width: min(640px, calc(100vw - 24px)); }
dialog[open] { animation: dlg-in 180ms var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(6px) scale(0.99); } }
dialog::backdrop { background: rgba(20, 26, 36, 0.35); }
dialog h2 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
dialog p.muted { margin-bottom: 14px; font-size: 13px; line-height: 1.45; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); margin-bottom: 12px; flex: 1; font-weight: 500; }
.field input:not([type=range]), .field select { border: 1px solid var(--line-2); background: var(--card); border-radius: 6px; padding: 6px 9px; font-size: 13px; color: var(--ink); font-weight: 400; }
.field input:disabled { opacity: 0.5; }
.row2 { display: flex; gap: 10px; }
fieldset { border: 0; padding: 0; margin: 0 0 12px; }
legend { font-size: 12px; color: var(--ink-2); margin-bottom: 4px; padding: 0; font-weight: 500; }
.days { display: flex; flex-wrap: wrap; gap: 4px; }
.day { position: relative; }
.day input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.day span { display: block; padding: 4px 8px; border-radius: 5px; border: 1px solid var(--line-2); font-weight: 500; font-size: 12px; min-width: 40px; text-align: center; }
.day input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--card); }
.day input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.types { display: flex; flex-wrap: wrap; gap: 4px; }
.types legend { width: 100%; }
.types label { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 5px; font-weight: 500; cursor: pointer; border: 1px solid var(--line-2); font-size: 12px; }
.types label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.types label.off { opacity: 0.4; cursor: not-allowed; }
.type-list { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: -6px 0 12px; display: flex; flex-direction: column; gap: 10px; }
.type-group h4 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; margin-bottom: 4px; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px; }
.type-opt { position: relative; display: block; cursor: pointer; }
.type-opt input { position: absolute; opacity: 0; }
.type-opt span { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); }
.type-opt small { color: var(--ink-3); font-size: 11px; }
.type-opt:hover span { border-color: var(--line-2); background: var(--card-2); }
.type-opt input:checked + span { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.type-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.hours .inline { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.options { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; margin: 8px 0 0; }
.option { display: flex; align-items: center; gap: 10px; text-align: left; border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 6px 8px; cursor: pointer; color: var(--ink); }
.option span { display: flex; flex-direction: column; }
.option strong { font-weight: 500; }
.option small { color: var(--ink-3); font-size: 11px; }
.option:hover { background: var(--card-2); border-color: var(--line); }
.option.disabled { opacity: 0.5; }
.review-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.review-list li { display: flex; gap: 10px; align-items: center; padding: 7px 10px; font-size: 13px; border-bottom: 1px solid var(--line); }
.review-list li:last-child { border-bottom: 0; }
.review-list .n { width: 18px; color: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; flex: none; }
.review-list .what { flex: 1; line-height: 1.4; }

.palette { padding: 0; width: min(560px, calc(100vw - 24px)); margin-top: 12vh; }
.palette input { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 14px 16px; font-size: 15px; background: transparent; color: var(--ink); outline: none; }
.results { list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow: auto; }
.results li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.results li[aria-selected="true"] { background: var(--accent-soft); }
.results li small { color: var(--ink-3); margin-left: auto; font-size: 11px; }
.results .kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); width: 46px; flex: none; }
.palette-foot { padding: 8px 14px; border-top: 1px solid var(--line); font-size: 11px; display: flex; gap: 4px; align-items: center; margin: 0 !important; }

.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin-top: 10px; }
.help-grid h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; margin-bottom: 6px; }
.help-grid dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 12px; }
.help-grid dt { color: var(--ink); font-weight: 500; white-space: nowrap; }
.help-grid dd { margin: 0; color: var(--ink-2); }

/* ------------------------------------------------------------------ smaller screens */

@media (max-width: 1440px) {
  .exp-tag { display: none; }
}
@media (max-width: 1300px) {
  .focus-btn .focus-ico { display: none; }
}
@media (max-width: 1180px) {
  .depthnav { display: none; }
  .clock-speed { display: none; }
  .hint { display: none; }
}
@media (max-width: 860px) {
  .views { margin-left: 0; }
  #light-label, .undo-seg { display: none; }
  .dock-kbd, .dock-context { display: none; }
  .ticker { display: none; }
  .panel, .drawer { top: auto; height: 55vh; bottom: 64px; }
  .help-grid { grid-template-columns: 1fr; }
  .onboard, body.building .onboard { left: 12px; right: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  #veil { transition-duration: 180ms !important; }
  .map-dim { transition-duration: 400ms !important; }
}


.focus-btn { gap: 6px; }
.focus-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.focus-ico { width: 12px; height: 12px; border: 1.6px solid currentColor; border-radius: 3px; position: relative; }
.focus-ico::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; }

/* ------------------------------------------------------------------ the assistant dock */

.dock { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(640px, calc(100vw - 24px)); z-index: 27; display: flex; flex-direction: column; gap: 8px; }
.dock-bar { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 6px 0 6px; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 10px 30px rgba(30, 42, 61, 0.16); }
.dock.open .dock-bar, .dock-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 12px 34px rgba(30, 42, 61, 0.18); }
.dock-agent { display: flex; align-items: center; gap: 6px; border: 0; background: var(--card-2); border-radius: 9px; padding: 6px 9px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--ink); }
.dock-agent:hover { background: var(--accent-soft); }
.hex-ico { width: 13px; height: 13px; background: var(--accent); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.dock-context { font-size: 11px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 6px; padding: 3px 7px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.dock-bar input { flex: 1; border: 0; background: transparent; font-size: 14px; color: var(--ink); outline: none; min-width: 0; }
.dock-mic, .dock-send { width: 32px; height: 32px; border-radius: 9px; border: 0; cursor: pointer; display: grid; place-items: center; flex: none; }
.dock-mic { background: transparent; color: var(--ink-2); }
.dock-mic:hover { background: var(--card-2); }
.mic-ico { width: 8px; height: 13px; border: 1.8px solid currentColor; border-radius: 5px; position: relative; display: block; }
.mic-ico::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 6px; border: 1.8px solid currentColor; border-top: 0; border-radius: 0 0 7px 7px; transform: translateX(-50%); }
.dock.listening .dock-mic { color: var(--accent); background: var(--accent-soft); animation: listen 1s ease-in-out infinite; }
@keyframes listen { 50% { box-shadow: 0 0 0 5px var(--accent-soft); } }
.dock-send { background: var(--ink); color: var(--card); font-weight: 700; font-size: 15px; }
.dock-sheet { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); max-height: min(56vh, 520px); display: flex; flex-direction: column; overflow: hidden; animation: rise-l 200ms var(--ease); }
.dock-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 600; }
.dock-head .icon-btn { margin-left: auto; }
.dock-log { list-style: none; margin: 0; padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; gap: 8px; align-items: flex-start; }
.msg.me { justify-content: flex-end; }
.msg.me .bubble-text { background: var(--ink); color: var(--card); border-radius: 12px 12px 3px 12px; }
.msg.agent .bubble-text { background: var(--card-2); border-radius: 12px 12px 12px 3px; }
.msg .who { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.bubble-text { padding: 8px 11px; max-width: 86%; line-height: 1.45; font-size: 13px; display: flex; flex-direction: column; gap: 8px; }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.typing { display: inline-flex; gap: 3px; padding: 4px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes blink { 50% { opacity: 0.25; } }
.action-card { background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.ac-head { display: flex; align-items: center; gap: 6px; }
.ac-head svg { color: var(--accent); }
.ac-state { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 4px; background: var(--card-2); color: var(--ink-3); font-weight: 600; }
.ac-state.done { background: var(--accent-soft); color: var(--accent-ink); }
.action-card p { font-size: 12px; color: var(--ink-2); }
.ac-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ac-build { display: flex; gap: 10px; align-items: center; }
.ac-build .app-thumb { width: 96px; height: 60px; flex: none; }
.build-prog { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.bp-bar { height: 5px; background: var(--card-2); border-radius: 3px; overflow: hidden; }
.bp-bar i { display: block; height: 100%; background: var(--accent); transition: width 400ms var(--ease); }
.build-prog ol { list-style: none; margin: 0; padding: 0; font-size: 11px; color: var(--ink-3); display: flex; flex-direction: column; gap: 2px; }
.build-prog li.ok { color: var(--ink-2); }
.build-prog li.ok::before { content: '✓ '; color: var(--accent); }
.build-prog li.now { color: var(--ink); font-weight: 600; }
.build-prog li.now::before { content: '→ '; color: var(--accent); }
.who-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.who-list li { display: flex; gap: 6px; align-items: center; }
.mini-av { width: 18px; height: 18px; border-radius: 4px; display: inline-grid; place-items: center; font-size: 10px; font-weight: 600; color: #1e2a3d; box-shadow: inset 0 0 0 1px rgba(30, 42, 61, 0.1); }
.mini-av.me { background: var(--ink); color: var(--card); }
.fchip { border: 1px solid var(--line-2); background: var(--card); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; }
.fchip:hover { border-color: var(--accent); color: var(--ink); }
.fchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--card); }
.fchip span { font-variant-numeric: tabular-nums; opacity: 0.7; }

/* ------------------------------------------------------------------ Focus */

#stage, #map, #backdrop + #stars { transition: filter 360ms var(--ease), opacity 360ms var(--ease); }
body.focus-mode #stage, body.focus-mode #map { filter: blur(10px) saturate(0.85); opacity: 0.45; pointer-events: none; }
body.focus-mode :is(.panel, .drawer, #ticker, .camctl, .depthnav, .hint, #planbar, #sky-mode, #sky-list, #incident-card, #crumbs, #btn-back, #onboard, #map-status, #tooltip) { display: none !important; }
.focus { position: fixed; top: 62px; bottom: 72px; left: 50%; transform: translateX(-50%); width: min(1320px, calc(100vw - 24px)); z-index: 24; background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; animation: focus-in 260ms var(--ease); }
@keyframes focus-in { from { opacity: 0; transform: translate(-50%, 10px) scale(0.99); } }
.f-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.f-head .btn { margin-left: auto; }
.f-head kbd { margin-left: 4px; }
.f-tabs { display: flex; gap: 2px; background: var(--card-2); border-radius: 8px; padding: 3px; }
.f-tabs [role=tab] { flex: none; display: flex; gap: 6px; align-items: center; padding: 6px 12px; font-size: 13px; }
.f-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.f-toolbar { display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.f-toolbar .menu-wrap { margin-left: auto; }
.f-toolbar .count { font-size: 10px; background: var(--accent-soft); color: var(--accent-ink); border-radius: 8px; padding: 0 5px; margin-left: 3px; }
.sel-field select { border: 1px solid var(--line-2); background: var(--card); border-radius: 7px; padding: 4px 8px; font-size: 12px; color: var(--ink); }
.f-split, .f-docs { flex: 1; display: grid; grid-template-columns: 1fr; min-height: 0; }
.f-split.with-detail { grid-template-columns: 1fr 340px; }
.f-docs { grid-template-columns: 220px 1fr; }
.f-docs.with-detail { grid-template-columns: 220px 1fr 320px; }
.f-scroll { overflow: auto; padding: 8px 16px 20px; min-height: 0; }
.t-sec h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; margin: 14px 0 4px; display: flex; gap: 6px; }
.t-sec h3 span { color: var(--ink-3); font-weight: 400; }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 150px 110px 110px auto; align-items: center; gap: 12px; padding: 8px 6px; border-bottom: 1px solid var(--line); border-radius: 6px; cursor: pointer; transition: background 120ms var(--ease); }
.todo-row:hover { background: var(--card-2); }
.todo-row.sel { background: var(--accent-soft); }
.todo-row.done .t-main strong { text-decoration: line-through; color: var(--ink-3); }
.t-main { display: flex; flex-direction: column; min-width: 0; }
.t-main strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-main small { color: var(--ink-3); font-size: 11px; display: flex; gap: 3px; align-items: center; white-space: nowrap; overflow: hidden; }
.t-who { display: flex; gap: 3px; align-items: center; min-width: 0; }
.t-who .grp { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 4px; }
.t-when { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-actions { display: flex; gap: 4px; justify-content: flex-end; opacity: 0.55; transition: opacity 120ms var(--ease); }
.todo-row:hover .t-actions, .todo-row:focus-within .t-actions, .todo-row.sel .t-actions { opacity: 1; }
.qa { border: 1px solid var(--line-2); background: var(--card); border-radius: 6px; padding: 3px 8px; font-size: 12px; cursor: pointer; color: var(--ink); white-space: nowrap; }
.qa:hover { border-color: var(--accent); }
.qa.primary { background: var(--ink); border-color: var(--ink); color: var(--card); }
.check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-2); background: var(--card); cursor: pointer; padding: 0; position: relative; flex: none; }
.check:hover { border-color: var(--accent); }
.check.on { background: var(--accent); border-color: var(--accent); }
.check.on::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.kind-ico { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--card-2); color: var(--ink-2); }
.kind-ico.review { background: var(--accent-soft); color: var(--accent-ink); }
.kind-ico.post { color: var(--accent); }
.st { font-size: 11px; padding: 2px 7px; border-radius: 4px; background: var(--card-2); color: var(--ink-2); white-space: nowrap; text-transform: capitalize; }
.st.done { color: var(--ink-3); }
.st.prog, .st.wait { background: var(--accent-soft); color: var(--accent-ink); }
.st.late { background: color-mix(in srgb, var(--danger) 14%, var(--card)); color: var(--danger); }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 0 6px; }
.f-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 60px 20px; color: var(--ink-3); }
.f-empty svg { color: var(--accent); }
.f-empty h3 { color: var(--ink); font-size: 15px; font-weight: 600; }
.f-empty p { max-width: 380px; line-height: 1.5; }
.f-detail { border-left: 1px solid var(--line); padding: 14px 16px; overflow: auto; display: flex; flex-direction: column; gap: 10px; animation: slide-in 200ms var(--ease); }
.f-detail header { display: flex; justify-content: space-between; align-items: center; }
.f-detail h2 { font-size: 16px; font-weight: 600; line-height: 1.35; }
.f-detail h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; }
.f-meta { display: grid; grid-template-columns: 70px 1fr; gap: 6px 10px; margin: 0; font-size: 12px; }
.f-meta dt { color: var(--ink-3); }
.f-meta dd { margin: 0; }
.legs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.legs li { display: flex; gap: 8px; align-items: center; }

/* The calendar week */
.cal-head { display: flex; align-items: center; gap: 6px; padding: 8px 0; }
.cal-head strong { margin-left: 8px; }
.cal-legend { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--ink-3); }
.cal-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: -6px; }
.cal-legend i.event, .cal-block.event { background: color-mix(in srgb, var(--ink) 9%, var(--card)); }
.cal-legend i.post, .cal-block.post { background: var(--card); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-legend i.task, .cal-block.task { background: var(--card-2); box-shadow: inset 2px 0 0 var(--ink-3); }
.cal-legend i.review, .cal-block.review { background: var(--accent-soft); }
.cal { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cal-days { display: grid; grid-template-columns: 52px repeat(7, 1fr); background: var(--card-2); border-bottom: 1px solid var(--line); }
.cal-days span { padding: 6px 8px; font-size: 11px; color: var(--ink-3); }
.cal-days span b { color: var(--ink); font-weight: 600; margin-left: 2px; }
.cal-days span.today b { color: #fff; background: var(--accent); border-radius: 5px; padding: 0 5px; }
.cal-body { position: relative; display: grid; grid-template-columns: 52px repeat(7, 1fr); background-image: repeating-linear-gradient(to bottom, transparent 0 37px, var(--line) 37px 38px); }
.cal-hours { position: relative; }
.cal-hours span { position: absolute; right: 8px; font-size: 10px; color: var(--ink-3); transform: translateY(-1px); }
.cal-col { position: relative; border-left: 1px solid var(--line); }
.cal-col.today { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.cal-block { position: absolute; left: 3px; right: 3px; border: 0; border-radius: 5px; padding: 3px 5px; font-size: 11px; text-align: left; display: flex; gap: 4px; align-items: flex-start; overflow: hidden; cursor: pointer; color: var(--ink); }
.cal-block span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-block.done { opacity: 0.5; text-decoration: line-through; }
.cal-block:hover { filter: brightness(0.97); outline: 1px solid var(--accent); }
.cal-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); }
.cal-now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* Documents */
.folders { border-right: 1px solid var(--line); padding: 10px 8px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.folders h4 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; margin: 12px 8px 4px; }
.folder { display: flex; align-items: center; gap: 8px; border: 1px solid transparent; background: transparent; padding: 6px 8px; border-radius: 7px; cursor: pointer; text-align: left; color: var(--ink-2); }
.folder span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folder b { font-weight: 400; font-size: 11px; color: var(--ink-3); }
.folder:hover { background: var(--card-2); }
.folder.on { background: var(--accent-soft); color: var(--ink); }
.folder.drop { border-color: var(--accent); background: var(--accent-soft); }
.doc-grid { list-style: none; margin: 0; padding: 8px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.doc-card { width: 100%; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 8px; cursor: pointer; text-align: left; touch-action: none; user-select: none; transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease); }
.doc-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.doc-card.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.doc-card.fresh { animation: fresh 1.6s var(--ease) 2; }
@keyframes fresh { 50% { box-shadow: 0 0 0 4px var(--accent-soft); } }
.doc-meta { display: flex; flex-direction: column; min-width: 0; }
.doc-meta strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta small { color: var(--ink-3); font-size: 11px; }
.thumb { width: 100%; height: auto; aspect-ratio: 16 / 10; background: var(--card-2); border-radius: 6px; display: block; }
.thumb .t-frame { fill: var(--card); stroke: var(--line-2); stroke-width: 1; }
.thumb .t-bar { fill: var(--line); }
.thumb .t-ink { fill: var(--ink-2); opacity: 0.55; }
.thumb .t-soft { fill: var(--line); }
.thumb .t-img { fill: color-mix(in srgb, var(--accent) 22%, var(--card)); }
.thumb .t-accent { fill: var(--accent); opacity: 0.8; }
.thumb .t-ext { fill: #fff; font: 600 9px 'Inter', sans-serif; }
.thumb.big { border: 1px solid var(--line); }
.doc-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.doc-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; padding: 6px; border-bottom: 1px solid var(--line); }
.doc-table td { padding: 6px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.doc-table tr.sel td { background: var(--accent-soft); }
.doc-row { border: 0; background: transparent; display: flex; gap: 8px; align-items: center; cursor: pointer; font-weight: 500; color: var(--ink); padding: 0; touch-action: none; }
.new-menu { left: auto; right: 0; min-width: 160px; }
.menu.resched { position: fixed; top: 0; left: 0; z-index: 80; }

@media (max-width: 1100px) {
  .todo-row { grid-template-columns: 24px minmax(0, 1fr) 100px auto; }
  .t-who, .t-status { display: none; }
  .f-split.with-detail { grid-template-columns: 1fr 300px; }
  .f-docs, .f-docs.with-detail { grid-template-columns: 180px 1fr; }
  .f-docs .doc-preview { display: none; }
}

/* ================================================================== round 4: people and glass */

/* ------------------------------------------------------------------ glass

   Interface glass, done as a material rather than a flat blur: the world behind is blurred and
   its colour saturated through a tinted body; a fine grain etches the surface; a 1px highlight
   catches the top and left edges and a faint darker line gives the bottom and right a thickness;
   a soft specular sheen lies across the top third; a contact shadow sits under it. The tint
   follows the theme and the time of day (warm at sunrise and sunset, cool at night). Subtle and
   Off are the Glass setting's other two positions, and Off is also the fallback without
   backdrop-filter or under prefers-reduced-transparency. */

:root {
  --glass-tint: 249 249 247;
  --glass-alpha: 0.56;
  --glass-blur: 24px;
  --glass-sat: 1.65;
  --glass-hi: rgba(255, 255, 255, 0.78);
  --glass-lo: rgba(30, 42, 61, 0.12);
  --glass-rim: rgba(255, 255, 255, 0.5);
  --glass-spec: linear-gradient(176deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.16) 16%, rgba(255, 255, 255, 0) 34%);
  --glass-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  --glass-shadow: 0 1px 1px rgba(20, 28, 40, 0.06), 0 2px 6px -2px rgba(20, 28, 40, 0.1), 0 18px 40px -14px rgba(20, 28, 40, 0.3);
}
:root[data-theme='slate'] { --glass-tint: 245 248 252; }
:root[data-theme='sand'] { --glass-tint: 251 248 243; }
:root[data-light='sunrise'], :root[data-light='sunset'] { --glass-tint: 252 243 236; --glass-rim: rgba(255, 236, 222, 0.6); }
:root[data-light='night'] { --glass-tint: 236 241 251; --glass-alpha: 0.62; }
:root[data-theme='night'] {
  --glass-tint: 30 36 47; --glass-alpha: 0.58; --glass-hi: rgba(255, 255, 255, 0.14); --glass-lo: rgba(0, 0, 0, 0.45); --glass-rim: rgba(255, 255, 255, 0.1);
  --glass-spec: linear-gradient(176deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 18%, rgba(255, 255, 255, 0) 34%);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 18px 40px -14px rgba(0, 0, 0, 0.6);
}
:root[data-theme='night'][data-light='sunset'], :root[data-theme='night'][data-light='sunrise'] { --glass-tint: 44 36 38; }
:root[data-theme='night'][data-light='night'] { --glass-tint: 24 31 46; }
:root[data-glass='subtle'] { --glass-alpha: 0.8; --glass-blur: 10px; --glass-sat: 1.15; --glass-grain: none; --glass-spec: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 30%); }
:root[data-theme='night'][data-glass='subtle'] { --glass-spec: none; }

:root[data-glass] .glass {
  background-color: rgb(var(--glass-tint) / var(--glass-alpha));
  background-image: var(--glass-spec), var(--glass-grain);
  background-size: 100% 100%, 180px 180px;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-color: var(--glass-rim);
  box-shadow: inset 1px 1px 0 var(--glass-hi), inset -1px -1px 0 var(--glass-lo), var(--glass-shadow);
}
/* Off, no support, or a viewer who asked for less transparency: solid surfaces. */
:root[data-glass='off'] .glass { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--line); box-shadow: var(--shadow); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root .glass { background: var(--card) !important; border-color: var(--line) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root .glass { background: var(--card) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-color: var(--line) !important; }
}
/* Glass keeps the focus states of the surfaces it dresses. */
.dock.open .dock-bar.glass, .dock-bar.glass:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 80%, transparent), inset 1px 1px 0 var(--glass-hi), var(--glass-shadow);
}
:root[data-glass] .focus.glass { border-radius: 16px; }

/* ------------------------------------------------------------------ the ambient agent */

/* Its mark: a tiny four-pointed light, never a name. */
.ai-glyph {
  display: inline-block; width: 9px; height: 9px; flex: none; vertical-align: -1px;
  background: conic-gradient(from 20deg, #7fd0e4, #a99cf0, #f0b2d2, #9fe0c4, #7fd0e4);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
/* Its hairline: an iridescent edge on whatever surface it acts in. Still at rest, flowing while
   it thinks. */
.ai-line {
  position: absolute; left: 14px; right: 14px; top: -1px; height: 1.5px; border-radius: 2px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent 0%, #84d3e6 14%, #ab9df2 32%, #f1b4d4 50%, #a3e3c6 68%, #84d3e6 84%, transparent 100%);
  background-size: 220% 100%; opacity: 0.5; transition: opacity 300ms var(--ease), box-shadow 300ms var(--ease);
}
.thinking > .ai-line, body.ai-thinking .dock-bar > .ai-line { opacity: 1; box-shadow: 0 0 10px rgba(171, 157, 242, 0.55); animation: ai-flow 1.8s linear infinite; }
@keyframes ai-flow { from { background-position: 0 0; } to { background-position: -220% 0; } }
/* Its light sweep over a building or person it is working on. */
.ai-sweep {
  position: absolute; left: 0; top: 0; pointer-events: none; border-radius: 18px; mix-blend-mode: screen;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent);
  background:
    linear-gradient(112deg, transparent 32%, rgba(214, 232, 255, 0.0) 38%, rgba(214, 232, 255, 0.55) 46%, rgba(255, 236, 248, 0.5) 51%, rgba(210, 255, 236, 0.3) 55%, transparent 63%),
    repeating-radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 9px);
  background-size: 280% 100%, 100% 100%;
  animation: ai-sweep var(--dur, 1.9s) ease-in-out forwards;
}
@keyframes ai-sweep { 0% { background-position: 135% 0, 0 0; opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { background-position: -45% 0, 10px -8px; opacity: 0; } }
.ai-note { color: var(--ink-2) !important; font-size: 11px; gap: 5px !important; white-space: normal !important; }
.ai-note .ai-glyph { margin-right: 1px; }

/* ------------------------------------------------------------------ faces */

.face {
  --s: 28px; width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center; flex: none; position: relative;
  font-size: calc(var(--s) * 0.36); font-weight: 600; letter-spacing: 0.02em; color: #26303f; line-height: 1;
}
.face.team { background: var(--c); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.07), 0 0 0 1.5px var(--card); }
.face.cust { background: var(--card); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--ink-3), 0 0 0 1.5px var(--card); }
.face.cust.st-waiting_us { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 1.5px var(--card); color: var(--accent-ink); }
.face.cust.st-waiting_them, .face.cust.st-done { opacity: 0.7; }
.face .face-ch { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: var(--card); display: grid; place-items: center; color: var(--ink-2); box-shadow: 0 0 0 1px var(--line); }
.face .face-ch svg { width: 8px; height: 8px; }
/* An agent: a small frosted hexagon with light inside. */
.face.agent { border-radius: 0; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(196, 210, 234, 0.85)); }
.face.agent i { width: 42%; height: 42%; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, #bcd3ff 55%, rgba(188, 211, 255, 0) 72%); }
:root[data-theme='night'] .face.agent { background: linear-gradient(160deg, rgba(120, 140, 170, 0.9), rgba(60, 72, 92, 0.9)); }
.face.typing, .breathe .face { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(91, 125, 177, 0)); } 50% { transform: scale(1.07); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 55%, transparent)); } }

/* ------------------------------------------------------------------ the presence layer */

.presence-layer { position: fixed; inset: 0; pointer-events: none; z-index: 6; }
.presence-layer > div, .p-hits > *, .piles > *, .p-flash, .ai-sweep { position: absolute; left: 0; top: 0; }
body.focus-mode .presence-layer, body.focus-mode .rail { display: none !important; }
[data-presence] { touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.p-hit { pointer-events: auto; background: transparent; border: 0; padding: 0; border-radius: 45%; cursor: pointer; }
.p-hit:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.p-tag { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--ink); color: var(--card); white-space: nowrap; opacity: 0; transition: opacity 120ms; pointer-events: none; }
.p-hit:hover .p-tag, .p-hit:focus-visible .p-tag { opacity: 1; }
.p-flash { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 8px; background: var(--card); color: var(--ink); border: 1px solid var(--accent); box-shadow: var(--shadow-sm); white-space: nowrap; max-width: 240px; animation: flash-up 2.6s var(--ease) forwards; }
.p-flash svg { color: var(--accent); }
@keyframes flash-up { 0% { opacity: 0; translate: 0 8px; } 12% { opacity: 1; translate: 0 0; } 78% { opacity: 1; } 100% { opacity: 0; translate: 0 -12px; } }

/* Rail */
.r-face { position: relative; width: 42px; height: 42px; flex: none; border: 0; background: transparent; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.r-face:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.r-face.off .face { opacity: 0.5; filter: saturate(0.6); }
.r-arc { position: absolute; inset: -1px; width: 44px; height: 44px; transform: rotate(-90deg); pointer-events: none; }
.r-arc circle { fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; }

/* ------------------------------------------------------------------ the ghost suggestion */

.ghost-field { position: relative; flex: 1; min-width: 0; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--card) 72%, transparent); border: 1px solid var(--line-2); overflow: hidden; }
.ghost-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 85%, transparent); }
.ghost-field input { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; background: transparent; padding: 0 10px; font-size: 13px; color: var(--ink); outline: none; }
.gh { position: absolute; inset: 0; padding: 0 10px; display: flex; align-items: center; white-space: pre; font-size: 13px; pointer-events: none; overflow: hidden; }
.gh-mirror { visibility: hidden; }
.gh-rest { background: linear-gradient(90deg, #6aa7bd, #8a7fd2 45%, #b9809f); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.85; }
:root[data-theme='night'] .gh-rest { background: linear-gradient(90deg, #9cd6e8, #b9afff 45%, #f0b6d4); -webkit-background-clip: text; background-clip: text; }

/* ------------------------------------------------------------------ conversations (the chat pane) */

.chat h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; margin-bottom: 6px; }
.pc-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; font-size: 12px; }
.pc-facts li { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pc-facts span { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.pc-facts b { font-weight: 500; display: flex; gap: 4px; align-items: center; }
.st-chip.st-waiting_us { color: var(--accent-ink); }
.st-chip.st-live { color: var(--ok); }
.convo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cm { display: flex; flex-direction: column; align-items: flex-start; max-width: 88%; }
.cm.me { align-self: flex-end; align-items: flex-end; }
.cm-b { padding: 6px 10px; border-radius: 12px 12px 12px 4px; background: color-mix(in srgb, var(--card) 78%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); font-size: 12.5px; line-height: 1.42; display: flex; flex-direction: column; gap: 4px; }
.cm.me .cm-b { background: var(--ink); color: var(--card); border-color: var(--ink); border-radius: 12px 12px 4px 12px; }
.cm.agent .cm-b, .cm.team .cm-b { background: color-mix(in srgb, var(--accent-soft) 85%, transparent); }
.cm small { font-size: 10px; color: var(--ink-3); margin-top: 2px; display: flex; gap: 3px; align-items: center; }
.vnote { display: flex; align-items: center; gap: 7px; }
.vplay { width: 24px; height: 24px; border-radius: 50%; border: 0; background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; display: grid; place-items: center; cursor: pointer; flex: none; }
.vbars { display: flex; align-items: center; gap: 2px; height: 22px; }
.vbars i { width: 2.5px; height: calc(var(--h) * 20px); min-height: 2px; background: currentColor; opacity: 0.4; border-radius: 2px; transition: opacity 80ms; }
.vbars i.on { opacity: 1; }
.vdur { font-size: 10.5px; opacity: 0.8; font-variant-numeric: tabular-nums; }
.vtr { font-size: 11.5px; opacity: 0.85; display: flex; gap: 5px; align-items: baseline; }
.pc-todos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.pc-todos li { display: flex; gap: 7px; align-items: center; }
.pc-todos .kind-ico { width: 18px; height: 18px; }
.pc-todo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.pc-todos small { color: var(--ink-3); font-size: 10.5px; white-space: nowrap; }
.pc-mic { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line-2); background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); flex: none; }
.pc-mic:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------------ voice */

.voice { position: fixed; inset: 0; pointer-events: none; z-index: 63; --v-ink: #3d5a8f; --v-cancel: #b4483f; }
:root[data-theme='night'] .voice { --v-ink: #a9c1e8; --v-cancel: #e08a82; }
.v-ring { position: absolute; left: 0; top: 0; overflow: visible; }
.v-track { fill: none; stroke: color-mix(in srgb, var(--ink) 14%, transparent); stroke-width: 3; }
.v-fill { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 50% 50%; }
.voice.recording .v-ring { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); animation: v-pulse 1.4s ease-in-out infinite; }
.voice.cancel .v-fill { stroke: var(--danger); }
@keyframes v-pulse { 50% { opacity: 0.75; } }
.v-pill { position: absolute; left: 0; top: 0; display: none; align-items: center; gap: 9px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; background: var(--card); }
.voice.recording .v-pill, .voice.done .v-pill { display: flex; }
.v-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: blink 1s infinite; }
.voice.cancel .v-dot { background: var(--danger); }
.v-time { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 30px; }
.v-wave { width: 168px; height: 32px; }
.v-hint { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.voice.cancel .v-hint { color: var(--danger); font-weight: 600; }
.voice.done { opacity: 0; transition: opacity 250ms; }

/* ------------------------------------------------------------------ presence switcher */

.people-ico { display: inline-flex; align-items: center; }
.people-ico i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 1.5px var(--card); }
.people-ico i + i { margin-left: -3px; opacity: 0.7; }
.people-ico i:last-child { opacity: 0.45; }
.pm-text { display: flex; flex-direction: column; gap: 1px; }
.pm-text b { font-weight: 600; }
.pm-text small { margin-left: 0 !important; white-space: normal; font-size: 11px; color: var(--ink-3); }
.menu-foot { padding: 7px 8px 4px; border-top: 1px solid var(--line); margin-top: 4px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------ dock, focus */

.dock-bar { position: relative; }
.dock-agent .hex-ico { display: none; }
.dock:not(.ambient) .dock-agent .hex-ico { display: block; }
.dock:not(.ambient) .dock-agent .ai-glyph { display: none; }
.dock.ambient .dock-agent { background: transparent; padding: 6px 7px 6px 9px; }
.dock.ambient .dock-agent:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.dock.ambient .dock-agent .ai-glyph { width: 14px; height: 14px; }
.dock-agents { position: absolute; top: auto; bottom: 60px; left: 6px; }
.msg .who.ambient { background: transparent; }
.msg .who.ambient .ai-glyph { width: 13px; height: 13px; }
.dock-results .r-answer { position: relative; display: flex; gap: 9px; align-items: flex-start; padding: 10px 11px; margin: 2px 0 6px; border-radius: 9px; background: color-mix(in srgb, var(--accent-soft) 55%, transparent); color: var(--ink); font-size: 12.5px; line-height: 1.45; }
.r-answer > .ai-glyph { margin-top: 4px; }
.r-answer .ai-line { top: 0; left: 12px; right: 12px; opacity: 0.8; }
.p-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 70px auto; align-items: center; gap: 12px; padding: 7px 6px; border-bottom: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.p-row:hover { background: color-mix(in srgb, var(--card-2) 80%, transparent); }
.p-row:hover .t-actions, .p-row:focus-within .t-actions { opacity: 1; }
.p-face { border: 0; background: transparent; padding: 2px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.p-row .p-last { color: var(--ink-2); }
.p-row.typing .face { animation: breathe 2.4s ease-in-out infinite; }
.unread-arc { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.6px solid color-mix(in srgb, var(--accent) 22%, transparent); border-top-color: var(--accent); border-right-color: var(--accent); transform: rotate(-45deg); vertical-align: 0; margin-left: 3px; }

@media (max-width: 860px) {
}
@media (prefers-reduced-motion: reduce) {
  .ai-line { animation: none !important; }
  .ai-sweep { animation: none !important; opacity: 0.6; background-position: 50% 0, 0 0; }
}
@media (max-width: 1560px) {
}

/* ================================================================== round 5: two rails and the gap */

/* The frame. layout.js keeps four numbers on <html>: --rail-l / --rail-r are the rails' inner
   edges, --gap-l / --gap-r the canvas gap's (wider when the build drawer or the sky list is
   open). Everything that lives in the gap is centred or anchored on them. These defaults are the
   open rails, for the instant before the script runs. */
:root { --rail-l: 246px; --rail-r: 350px; --gap-l: 246px; --gap-r: 350px; --gap-cx: calc((var(--gap-l) + 100vw - var(--gap-r)) / 2); --gap-w: calc(100vw - var(--gap-l) - var(--gap-r)); --rail-cx: calc((var(--rail-l) + 100vw - var(--rail-r)) / 2); --rail-w: calc(100vw - var(--rail-l) - var(--rail-r)); }
.dock, .planbar, .hint, .toast, .floating, .map-status, .sky-seg { left: var(--gap-cx); }
.dock { width: min(640px, calc(var(--gap-w) - 24px)); }
.hint { max-width: calc(var(--gap-w) - 40px); }
.toast { max-width: min(520px, calc(var(--gap-w) - 24px)); }
.depthnav { left: calc(var(--gap-l) + 10px); }
.crumbs { left: calc(var(--gap-l) + 10px); }
.drawer { left: calc(var(--rail-l) + 10px); z-index: 22; }
#sky-list { right: calc(var(--rail-r) + 10px); }
.onboard, body.building .onboard { left: calc(var(--gap-l) + 10px); top: 62px; bottom: auto; }
/* The live ticker reads from the top right of the gap, newest first, out of the dock's way. */
.ticker { left: auto; right: calc(var(--gap-r) + 64px); top: 62px; bottom: auto; flex-direction: column; width: min(290px, calc(var(--gap-w) * 0.34)); }
.ticker li { background: rgb(var(--glass-tint) / 0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: var(--glass-rim); }
:root[data-glass='off'] .ticker li { background: var(--card); backdrop-filter: none; border-color: var(--line); }
@keyframes tick-in { from { opacity: 0; transform: translateY(-6px); } }
.drawer, .dock, .camctl, .depthnav, .crumbs, .ticker { transition-property: left, right, width, filter, opacity; transition-duration: 220ms; transition-timing-function: var(--ease); }
body.focus-mode :is(.rail, .side) { display: none !important; }

/* ------------------------------------------------------------------ the camera toolbar */

/* A vertical column against the inner edge of the side panel, vertically centred in the gap,
   so the dock, the plan bar and toasts never reach it. 36px targets. */
.camctl { right: calc(var(--gap-r) + 10px); left: auto; bottom: auto; top: 50%; transform: translateY(-50%); flex-direction: column; gap: 2px; padding: 4px; border-radius: 14px; z-index: 20; }
.camctl button { width: 36px; height: 36px; font-size: 17px; border-radius: 10px; display: grid; place-items: center; line-height: 1; }
.camctl button:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.camctl button:active { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.camctl .sep { width: 20px; height: 1px; margin: 4px 0; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.camctl .compass { width: 30px; height: 30px; margin: 3px; border-color: color-mix(in srgb, var(--ink) 16%, transparent); }
.camctl .compass i { font-size: 10px; }

/* ------------------------------------------------------------------ the people rail */

.rail { position: fixed; left: 10px; top: 62px; bottom: 12px; width: 56px; z-index: 21; border: 1px solid var(--line); border-radius: 18px; padding: 6px 0 8px; display: flex; flex-direction: column; overflow: hidden; background: var(--card); transition: width 220ms var(--ease), box-shadow 220ms var(--ease); }
.rail.open { width: 236px; }
.r-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 6px; scrollbar-width: none; padding: 0 0 4px; }
.r-scroll::-webkit-scrollbar { display: none; }
.rail section { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.rail section + section { border-top: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); padding-top: 6px; }
.rail h4 { font-size: 7.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin: 2px 0 1px; }
.rail.open section { align-items: stretch; gap: 1px; padding-left: 6px; padding-right: 6px; }
.rail.open h4 { font-size: 10px; letter-spacing: 0.08em; margin: 4px 6px 3px; display: flex; gap: 6px; }
.rail.open h4 span { font-weight: 400; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.r-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 8px 12px; }
.r-head strong { font-size: 12px; font-weight: 600; }
.r-head .icon-btn, .sd-collapse { display: grid; place-items: center; background: transparent; border-color: transparent; width: 28px; height: 28px; border-radius: 8px; }
.r-head .icon-btn:hover, .sd-collapse:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.r-toggle { width: 40px; height: 28px; margin: 0 auto 6px; flex: none; border: 0; border-radius: 8px; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); }
.r-toggle:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.r-row { position: relative; display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent; padding: 5px 6px; border-radius: 10px; cursor: pointer; text-align: left; color: var(--ink); min-height: 44px; }
.r-row:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.r-row:focus-visible { outline-offset: -2px; }
.r-av { position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex: none; }
.r-av .r-arc { inset: -2px; width: 38px; height: 38px; }
.r-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.r-text b { font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-text small { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.r-text small .typing { padding: 3px 0; }
.r-text small .typing i { width: 4px; height: 4px; }
.r-row.unread .r-text b { font-weight: 600; }
.r-row.off .face { opacity: 0.5; filter: saturate(0.6); }
.r-row.off .r-text b { color: var(--ink-2); }
.r-badge { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; flex: none; }
.r-st { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--ink-3); }
.r-st.st-waiting_us { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.r-st.st-live { background: var(--ok); }
.r-st.st-waiting_them { background: transparent; box-shadow: inset 0 0 0 1.2px var(--ink-3); }
.r-empty { font-size: 11.5px; color: var(--ink-3); padding: 8px 14px; line-height: 1.45; }
.breathe .r-av .face { animation: breathe 2.4s ease-in-out infinite; }

/* ------------------------------------------------------------------ the side panel */

.side { position: fixed; right: 10px; top: 62px; bottom: 12px; width: 340px; z-index: 22; border: 1px solid var(--line); border-radius: 18px; background: var(--card); display: flex; flex-direction: column; overflow: hidden; transition: width 220ms var(--ease), box-shadow 220ms var(--ease); }
.side.collapsed { width: 52px; }
.side-main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.side-head { padding: 10px 10px 8px 14px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.sh-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.sh-row h2 { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.sh-count { font-size: 11px; font-weight: 600; background: var(--accent); color: #fff; border-radius: 9px; padding: 1px 7px; }
.sh-filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sh-filters .segmented { background: color-mix(in srgb, var(--ink) 6%, transparent); border-color: transparent; }
.sh-filters .segmented button { padding: 4px 9px; }
.sh-filters .sel-field { flex: 1; min-width: 110px; }
.sh-filters select { width: 100%; background: color-mix(in srgb, var(--card) 70%, transparent); }
.sh-back { display: flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 4px 8px 4px 4px; margin-left: -6px; border-radius: 8px; cursor: pointer; font-weight: 500; color: var(--ink); min-height: 32px; max-width: 250px; }
.sh-back span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-back:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.side-body { flex: 1; min-height: 0; overflow: auto; padding: 4px 12px 16px 14px; display: flex; flex-direction: column; gap: 4px; }
.side-body[data-view='site'], .side-body[data-view='task'], .side-body[data-view='asset'] { padding-top: 12px; gap: 8px; }
.side-body h2 { font-size: 16px; font-weight: 600; line-height: 1.3; }
.side-body h2:focus { outline: none; }
.side-body h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; margin: 12px 0 4px; display: flex; gap: 6px; }
.side-body h3 span { font-weight: 400; }
.side-body .panel-actions { margin-top: 2px; }
.side-body .incident-box .actions { margin-top: 6px; }
.sd-sec + .sd-sec { border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.side-body[data-view='site'] .sd-sec { padding-bottom: 6px; }
.side-body[data-view='site'] .sd-sec > .btn { margin-top: 6px; }
.sd-sec.needs h3 { color: var(--accent-ink); }
.sd-sec.overdue h3 { color: var(--danger); }
.sd-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; margin: 10px 0 2px; }
.sd-status { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chip-tag.hold { background: var(--orange-soft); color: #9a561d; }
:root[data-theme='night'] .chip-tag.hold { color: var(--orange-1); }
.sd-amb { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.sd-people, .sd-assets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.sd-person, .sd-asset { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 5px 6px; margin: 0 -6px; width: calc(100% + 12px); border-radius: 10px; cursor: pointer; text-align: left; color: var(--ink); min-height: 42px; }
.sd-person:hover, .sd-asset:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.sd-person.muted-row .face { opacity: 0.55; filter: saturate(0.6); }
.sd-person.muted-row b { color: var(--ink-2); font-weight: 400; }
.sd-person.breathe .face { animation: breathe 2.4s ease-in-out infinite; }
.sd-p-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.sd-p-text b { font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-p-text small { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 4px; align-items: center; }
.sd-p-text small svg { flex: none; }
.sd-unread { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; }
.sd-asset .thing { width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.sd-me { display: flex; gap: 10px; align-items: center; padding: 5px 0; font-size: 12.5px; }
.sd-me .mini-av { width: 30px; height: 30px; border-radius: 50%; font-size: 11px; }
.sd-hint { font-size: 11px; color: var(--ink-3); margin-bottom: 4px; }
.sd-empty { display: flex; gap: 10px; align-items: flex-start; padding: 18px 4px 10px; color: var(--ink-3); line-height: 1.5; font-size: 12px; }
.sd-empty svg { color: var(--accent); flex: none; margin-top: 2px; }
.sd-empty b { color: var(--ink); font-weight: 600; }
.sh-tools { display: flex; align-items: center; gap: 2px; }
.sh-link { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--accent-ink); font-size: 12px; font-weight: 500; padding: 5px 8px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.sh-link:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* The rails carry dense small type, so their glass is a little denser than the floating
   controls'; still frosted, the world still shows through. */
:root:not([data-glass='off']) :is(.rail, .side).glass { background-color: rgb(var(--glass-tint) / calc(var(--glass-alpha) + 0.2)); }
/* Over the dark sky the rails keep a lighter, denser glass so their small type stays legible. */
:root:not([data-glass='off']) body.dark :is(.rail, .side, .dock-bar, .dock-find).glass { background-color: rgb(var(--glass-tint) / 0.86); }
.side-body .f-meta { grid-template-columns: 64px 1fr; }
.side-body .legs { margin-top: 2px; }
.side-body .ai-note { display: flex; gap: 6px; align-items: baseline; }

/* #panel (agents, connections, landscape) inside the side panel: no frame of its own, and its
   own close button gives way to the side panel's back arrow. */
.side .panel.side-panel { position: static; inset: auto; width: auto; height: auto; flex: 1; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; animation: none; padding: 12px 12px 16px 14px; z-index: auto; }
.side .panel.side-panel .panel-head [data-act='close'] { display: none; }
.side .panel.side-panel section + section { border-top-color: color-mix(in srgb, var(--ink) 8%, transparent); }

/* Collapsed: a strip of counts. */
.side-strip { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; }
.ss-btn { width: 40px; min-height: 40px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-2); padding: 4px 0; }
.ss-btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.ss-btn b { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ss-btn.needs { color: var(--accent-ink); }
.ss-btn.late { color: var(--danger); }
.ss-open { min-height: 28px; margin-bottom: 4px; }

/* The compact todo row, shared with Focus's wide one (todos.js). */
.todo-row.compact { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; padding: 7px 4px; margin: 0 -4px; border-bottom: 0; border-radius: 10px; align-items: start; }
.todo-row.compact + .todo-row.compact { box-shadow: 0 -1px 0 color-mix(in srgb, var(--ink) 7%, transparent); }
.todo-row.compact:hover, .todo-row.compact:focus-visible { background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: none; }
.todo-row.compact:hover + .todo-row.compact { box-shadow: none; }
.todo-row.compact .check, .todo-row.compact .kind-ico { margin-top: 1px; }
.todo-row.compact .kind-ico { width: 20px; height: 20px; }
.todo-row.compact .t-main strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; line-height: 1.35; }
.todo-row.compact .t-main small { margin-top: 2px; gap: 4px; }
.todo-row.compact .t-time { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.todo-row.compact .t-time.late { color: var(--danger); }
.todo-row.compact .t-who { margin-left: 4px; display: inline-flex; gap: 2px; }
.todo-row.compact .t-who .mini-av { width: 15px; height: 15px; font-size: 8.5px; }
.todo-row.compact .t-decide { display: flex; gap: 4px; margin-top: 6px; }
.todo-row.compact .t-actions { opacity: 0; align-self: center; }
.todo-row.compact:hover .t-actions, .todo-row.compact:focus-within .t-actions { opacity: 1; }
.qa.ghosted { border-color: transparent; background: transparent; padding: 4px 6px; color: var(--ink-2); display: grid; place-items: center; }
.qa.ghosted:hover { border-color: var(--line-2); }
.todo-row.compact .ai-note { margin-top: 3px; }

/* ------------------------------------------------------------------ face piles */

/* Always on, under every building's label: up to four faces, then +N; past ten one count.
   Hover spreads them a little and says who; the pile (not a face) opens the building. */
.pile { pointer-events: auto; display: flex; align-items: center; padding: 2px; border-radius: 16px; border: 1px solid transparent; transition: background 160ms var(--ease), padding 160ms var(--ease), transform 160ms var(--ease); }
.pf { border: 0; background: transparent; padding: 0; margin-left: -7px; cursor: pointer; position: relative; border-radius: 50%; transition: margin 180ms var(--ease); }
.pf:first-child { margin-left: 0; }
.pf .face { box-shadow: 0 0 0 1.5px var(--card), 0 2px 5px -2px rgba(20, 28, 40, 0.35); }
.pf.unread .face { box-shadow: 0 0 0 1.5px var(--accent), 0 2px 5px -2px rgba(20, 28, 40, 0.35); }
.pf:hover, .pf:focus-visible { z-index: 2; }
.pf-more { margin-left: -4px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; border: 0; cursor: pointer; font-size: 10.5px; font-weight: 600; color: var(--ink); background: rgb(var(--glass-tint) / 0.88); box-shadow: 0 0 0 1.5px var(--card), 0 2px 5px -2px rgba(20, 28, 40, 0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-variant-numeric: tabular-nums; }
.pf-more:hover { background: var(--accent); color: #fff; }
.pf-go { width: 8px; height: 22px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.pf-count { display: flex; align-items: center; gap: 6px; white-space: nowrap; height: 26px; padding: 0 9px 0 4px; border-radius: 13px; border: 1px solid var(--glass-rim); cursor: pointer; font-size: 11px; font-weight: 600; color: var(--ink); background: rgb(var(--glass-tint) / 0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--glass-shadow); }
.pf-count:hover { border-color: var(--accent); }
.pf-dots { display: flex; }
.pf-dots .face { margin-left: -5px; box-shadow: 0 0 0 1.2px var(--card); }
.pf-dots .face:first-child { margin-left: 0; }
.pf-dots .face .face-ch { display: none; }
.pf-sum { display: none; }
.pile:hover, .pile:focus-within { padding: 3px 5px; background: rgb(var(--glass-tint) / 0.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: var(--glass-rim); box-shadow: var(--glass-shadow); z-index: 3; transform: scale(1.06); }
.pile:hover .pf, .pile:focus-within .pf { margin-left: 2px; }
.pile:hover .pf:first-child, .pile:focus-within .pf:first-child { margin-left: 0; }
.pile:hover .pf-more, .pile:focus-within .pf-more { margin-left: 4px; }
.pile:hover .pf-sum, .pile:focus-within .pf-sum { display: inline; font-size: 10.5px; color: var(--ink-2); margin: 0 4px 0 7px; white-space: nowrap; }
.pile.many:hover, .pile.many:focus-within { padding: 0; background: transparent; border-color: transparent; box-shadow: none; }
:root[data-glass='off'] :is(.pile:hover, .pile:focus-within, .pf-more, .pf-count) { background-color: var(--card); backdrop-filter: none; }

/* ------------------------------------------------------------------ narrow windows */

/* Below 1000 px both rails start as strips and open as overlays over the canvas. */
body.narrow .rail.open, body.narrow .side:not(.collapsed) { z-index: 31; box-shadow: 0 24px 60px -12px rgba(20, 28, 40, 0.45), inset 1px 1px 0 var(--glass-hi); }
body.narrow .side:not(.collapsed) { width: min(340px, calc(100vw - 84px)); }
body.narrow .rail.open { width: min(260px, calc(100vw - 84px)); }
@media (max-width: 1280px) {
  .side { width: 316px; }
}
@media (max-width: 860px) {
  .drawer { left: calc(var(--rail-l) + 10px); right: calc(var(--rail-r) + 10px); width: auto; }
  .ticker { display: none; }
  .camctl button { width: 36px; height: 36px; }
}