/* Dark by default (as jterm); light only when <html data-theme="light"> is set explicitly.
   commandagi — brutal chrome (after jterm) with calm region discipline (after commandagi AppLayout).
   Hairlines separate, colour marks state only, one accent, radius 0–2px, no shadows except overlays. */
:root {
  color-scheme: dark;
  --bg-0: 0 0% 0%; --bg-1: 0 0% 2%; --bg-2: 0 0% 4%; --bg-3: 0 0% 6%;
  --border-1: 0 0% 10%; --border-2: 0 0% 16%;
  --text-1: 0 0% 93%; --text-2: 0 0% 66%; --text-3: 0 0% 42%; --text-4: 0 0% 25%;
  --brand: 45 86% 69%; --brand-fg: 44 100% 5%;
  --warn: 38 63% 58%; --danger: 0 100% 68%; --ok: 104 36% 61%;
  /* One bar height for every region's top row: the tab strip, the left and right docks' strips, the bottom pane's
     strip and each pane's header. They sit side by side, so they share one token and line up. Never a second line. */
  --bar-h: 32px; --head-h: var(--bar-h); --pane-head-h: var(--bar-h); --row-h: 28px;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
}
:root[data-theme=light] {
  color-scheme: light;
  --bg-0: 0 0% 100%; --bg-1: 240 5% 97%; --bg-2: 240 6% 93%; --bg-3: 240 5% 90%;
  --border-1: 240 5% 90%; --border-2: 240 5% 84%;
  --text-1: 240 6% 10%; --text-2: 240 5% 26%; --text-3: 240 4% 46%; --text-4: 240 5% 65%;
  --brand: 42 89% 40%; --brand-fg: 0 0% 100%; --warn: 32 81% 37%; --danger: 0 72% 51%; --ok: 112 39% 34%;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* The page never scrolls sideways; every region scrolls inside itself. */
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: hsl(var(--bg-0)); color: hsl(var(--text-1)); font: 12.5px/1.45 var(--font-sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
/* Selection rule. commandagi is an instrument: its chrome (strip, docks, nav, lists, pane headers, buttons, toolbars,
   scene overlays) is not text, so nothing is selectable by default. Text a person may want to copy opts in:
   form fields and contenteditable, file/text viewers (source, markdown preview + editor, sheet cells and values),
   the details' value fields, tables in a pane body, notices/errors/toasts and the events log.
   New content that should be copyable takes the `.selectable` class rather than another selector here. */
body { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable]:not([contenteditable=false]), .selectable,
.source-code, .md, .ed-text, .ed-val, .ed-fx, .ed-ref, .ed-sheet td, .preview-svg,
.detail-body td, .detail-body p, .detail-body li, .detail-meta, .project, .kv span,
.variant-card .field span, .details .muted, .details strong,
.notice, .toast, .event, .boot { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
.detail-body button, .detail-body .toolbar { user-select: none; -webkit-user-select: none; }
/* a pane header is a drag handle, never text: nothing in it selects (its meta is copyable from the … menu) */
.detail-head, .detail-head * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 1px solid hsl(var(--brand)); outline-offset: -1px; }
::selection { background: hsl(var(--brand) / .28); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--border-2)); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 13px; font-weight: 500; }
h2 { font-size: 12.5px; font-weight: 500; }
h3, .eyebrow, .nav-label, th, .pane-title { font: 500 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--text-4)); }
a { color: hsl(var(--text-1)); text-decoration: underline; text-decoration-color: hsl(var(--border-2)); text-underline-offset: 2px; }
a:hover { text-decoration-color: hsl(var(--brand)); }
small, .muted { color: hsl(var(--text-3)); }
code, .mono { font-family: var(--font-mono); }

/* buttons */
button { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 2px 8px; font-size: 11px; border: 1px solid transparent; background: transparent; color: hsl(var(--text-2)); border-radius: 2px; cursor: pointer; white-space: nowrap; }
/* naked (docs/wave-j.md §2, after IBM-2's sidebar combo box): no border and no box at rest; hover lifts a soft plate */
button:hover { background: hsl(var(--bg-2)); color: hsl(var(--text-1)); }
button:disabled { opacity: .4; pointer-events: none; }
button.primary { background: hsl(var(--brand)); color: hsl(var(--brand-fg)); border-color: transparent; font-weight: 500; }
button.primary:hover { opacity: .9; background: hsl(var(--brand)); color: hsl(var(--brand-fg)); }
button.quiet { border-color: transparent; color: hsl(var(--text-4)); padding: 4px; }
button.quiet:hover { color: hsl(var(--text-1)); background: hsl(var(--bg-2)); }
button.danger { color: hsl(var(--danger)); }
button.danger:hover { background: hsl(var(--danger) / .1); }
button[aria-pressed=true] { background: transparent; color: hsl(var(--text-1)); border-color: transparent; box-shadow: inset 0 -2px 0 hsl(var(--brand)); }

/* inputs */
input, select, textarea { background: transparent; border: 0; border-bottom: 1px solid hsl(var(--border-1)); color: hsl(var(--text-1)); padding: 4px 8px; font: 11px var(--font-mono); border-radius: 0; max-width: 100%; height: 24px; }
textarea { width: 100%; min-height: 80px; resize: vertical; height: auto; border: 1px solid hsl(var(--border-1)); }
select { appearance: none; -webkit-appearance: none; border-bottom-color: transparent; padding-right: 20px; cursor: pointer; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 4px center / 12px 12px; }
select:hover { color: hsl(var(--text-1)); }
select option { background: hsl(var(--bg-2)); color: hsl(var(--text-1)); }
input:focus, select:focus, textarea:focus { border-color: hsl(var(--border-2)); outline: none; }
input:focus-visible { border-bottom-color: hsl(var(--brand)); }
select:focus-visible { box-shadow: inset 0 -1px 0 hsl(var(--brand)); }
input::placeholder { color: hsl(var(--text-4)); }
input[type=number] { text-align: right; }

/* chips + dots */
.badge { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; font: 10px var(--font-mono); border: 0; color: hsl(var(--text-3)); border-radius: 3px; white-space: nowrap; text-transform: lowercase; background: hsl(var(--bg-2)); }
.badge.warn { color: hsl(var(--warn)); background: hsl(var(--warn) / .12); }
.badge.ok { color: hsl(var(--ok)); background: hsl(var(--ok) / .12); }
.badge.neutral { color: hsl(var(--text-3)); }
.dot { display: inline-block; width: 6px; height: 6px; background: hsl(var(--text-4)); margin-right: 6px; }
.dot.online { background: hsl(var(--ok)); } .dot.busy { background: hsl(var(--warn)); }

/* shell (after jterm): full-height docks either side of a centre column; the centre's strip (tabs · + · spacer ·
   chrome) lines up with the docks' strips; the time bar under them when a time-aware pane is open */
.shell { height: 100dvh; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.strip { display: flex; align-items: stretch; height: var(--head-h); background: hsl(var(--bg-1)); border-bottom: 1px solid hsl(var(--border-1)); user-select: none; min-width: 0; }
.brand-mark { width: 12px; height: 12px; background: hsl(var(--brand)); }
/* the CommandAGI mark (old commandagi's looped ⌘ square, a mask painted in the text colour; no plate) at the window's top right */
.brand-logo {
  flex: none; align-self: center; width: 16px; height: 16px; margin: 0 12px 0 6px; background: hsl(var(--text-2));
  /* @brand-mask:start — generated by packages/appkit/brand (pnpm brand:build); do not hand-edit. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.635 8.265A3.63 3.63 0 1 1 8.265 4.635L8.265 19.365A3.63 3.63 0 1 1 4.635 15.735L19.365 15.735A3.63 3.63 0 1 1 15.735 19.365L15.735 4.635A3.63 3.63 0 1 1 19.365 8.265L4.635 8.265Z' fill='none' stroke='%23fff' stroke-width='3.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.635 8.265A3.63 3.63 0 1 1 8.265 4.635L8.265 19.365A3.63 3.63 0 1 1 4.635 15.735L19.365 15.735A3.63 3.63 0 1 1 15.735 19.365L15.735 4.635A3.63 3.63 0 1 1 19.365 8.265L4.635 8.265Z' fill='none' stroke='%23fff' stroke-width='3.05' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  /* @brand-mask:end */
}
.dock-strip > .brand-logo { margin-left: auto; }
/* while the details are open the mark is theirs (the window's top right); the centre strip's steps aside */
.shell:not(.phone):not(.maximized) .main:has(> .rdock:not([hidden])) .strip > .brand-logo { display: none; }
.tabs { display: flex; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; width: 200px; min-width: 112px; padding: 2px 4px 0 10px; border-right: 1px solid hsl(var(--border-1)); background: hsl(var(--bg-1)); color: hsl(var(--text-3)); font-size: 11px; cursor: default; }
.tab:hover { background: hsl(var(--bg-2)); }
.tab.active { background: hsl(var(--bg-0)); color: hsl(var(--text-1)); box-shadow: inset 0 -2px 0 hsl(var(--brand)); }
.tab-glyph { width: 12px; flex: none; text-align: center; color: hsl(var(--text-4)); font-size: 11px; }
.tab.active .tab-glyph { color: hsl(var(--text-2)); }
.tab-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-close { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 2px; color: hsl(var(--text-4)); opacity: 0; cursor: pointer; }
.tab-close:hover { background: hsl(var(--bg-3)); }
.tab.active .tab-close, .tab:hover .tab-close { opacity: 1; }
.tab-close:hover { color: hsl(var(--text-1)); }
.tab-new { flex: none; width: var(--bar-h); height: 100%; border: 0; border-radius: 0; justify-content: center; font-size: 14px; color: hsl(var(--text-4)); background: transparent; padding: 0; }
.tab-new:hover { background: hsl(var(--bg-2)); color: hsl(var(--text-1)); }
.strip-spacer { flex: 1 1 0; }
.strip-cluster { display: flex; align-items: center; gap: 2px; padding: 0 4px; flex: none; }
/* naked chrome buttons (jterm's ChromeButton): no border or fill until hover; a pressed toggle turns the accent */
.chrome-button { width: 28px; height: 28px; padding: 0; justify-content: center; border-color: transparent; color: hsl(var(--text-3)); }
.chrome-button:hover { background: hsl(var(--bg-2)); color: hsl(var(--text-1)); }
.icon { display: block; flex: none; }
.menu { position: fixed; z-index: 50; min-width: 180px; padding: 4px 0; background: hsl(var(--bg-2)); border: 1px solid hsl(var(--border-2)); box-shadow: 0 8px 24px #0006; }
.menu-item { display: flex; width: 100%; height: auto; border: 0; border-radius: 0; padding: 6px 12px; font-size: 11px; color: hsl(var(--text-2)); background: transparent; gap: 10px; }
.menu-item:hover { background: hsl(var(--bg-3)); color: hsl(var(--text-1)); }
.menu-item .nav-glyph { color: hsl(var(--text-4)); }
.menu-head { padding: 6px 12px 4px; }
.menu-label { flex: 1; text-align: left; }
.menu-item kbd, .keys kbd { font: 10px var(--font-mono); color: hsl(var(--text-4)); }
.menu-item kbd { margin-left: 16px; }
.menu-sep { height: 1px; margin: 4px 0; background: hsl(var(--border-1)); }
.menu-sub { display: inline-flex; margin-left: 12px; color: hsl(var(--text-4)); }
.menu-item.open { background: hsl(var(--bg-3)); color: hsl(var(--text-1)); }
.menu.submenu { z-index: 51; max-height: calc(100dvh - 8px); overflow: auto; }

/* clip: a focused control near the foot never scrolls the shell (a hidden overflow can still be scrolled) */
.main { display: grid; grid-template-columns: 280px 1px minmax(300px, 1fr); overflow: hidden; overflow: clip; min-height: 0; }
.splitter { position: relative; background: hsl(var(--border-1)); cursor: col-resize; }
.splitter::after { content: ''; position: absolute; inset: 0 -4px; z-index: 5; }
.splitter:hover, .splitter.dragging { background: hsl(var(--brand)); }

/* left dock: one strip of region tabs + collapse; bodies below */
.dock { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: hsl(var(--bg-1)); }
.dock-strip { display: flex; align-items: stretch; height: var(--bar-h); border-bottom: 1px solid hsl(var(--border-1)); flex: none; }
.dock-tabs { display: flex; align-items: stretch; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dock-tabs::-webkit-scrollbar { display: none; }
.dock-tab { height: 100%; border: 0; border-radius: 0; padding: 0 10px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 11px; color: hsl(var(--text-3)); background: transparent; min-width: 0; }
.dock-tab:hover { background: transparent; color: hsl(var(--text-1)); }
.dock-tab.active { color: hsl(var(--text-1)); border-bottom-color: hsl(var(--brand)); }
.dock-tab .nav-glyph { color: hsl(var(--text-4)); font-size: 12px; min-width: 0; }
/* a label standing in a strip (details, events) centres like the tabs beside it */
span.dock-tab { display: flex; align-items: center; padding: 0 12px; }
.dock-tab-label { overflow: hidden; text-overflow: ellipsis; }
.dock-toggle { margin-left: auto; height: 100%; border-radius: 0; }
.dock-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.nav, .master, .detail { min-width: 0; min-height: 0; overflow: auto; }
.dock-body > .nav, .dock-body > .master { flex: 1; }
/* the dock's foot (app.js footMenu): the hosted site's guest notice + Create account / Log in above the project and account menu */
.dock-account { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-top: 1px solid hsl(var(--border-1)); font-size: 12px; }
.dock-account p { margin: 0; color: hsl(var(--text-2)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-account a.button { display: flex; justify-content: center; align-items: center; height: 26px; border: 1px solid hsl(var(--border-1)); border-radius: 2px; color: hsl(var(--text-2)); text-decoration: none; font-size: 11px; }
.dock-account a./* naked (docs/wave-j.md §2, after IBM-2's sidebar combo box): no border and no box at rest; hover lifts a soft plate */
button:hover { background: hsl(var(--bg-2)); color: hsl(var(--text-1)); }
.dock-account a.button.primary { background: hsl(var(--brand)); color: hsl(var(--brand-fg)); border-color: transparent; font-weight: 500; }
.dock-account button { justify-content: center; }
.dock-foot { flex: none; display: flex; flex-direction: column; border-top: 1px solid hsl(var(--border-1)); }
.dock-foot .dock-account { border-top: 0; border-bottom: 1px solid hsl(var(--border-1)); }
.foot-block { display: flex; flex-direction: column; min-width: 0; transition: background .16s ease; }
.foot-block.open { background: hsl(var(--bg-2)); }
.foot-rows { max-height: 0; overflow: hidden; transition: max-height .18s ease, padding .18s ease; }
.foot-block.open .foot-rows { max-height: min(70dvh, 560px); overflow-y: auto; scrollbar-width: thin; padding: 6px 0 2px; }
.foot-rows .menu-item { align-items: center; gap: 12px; padding: 8px 14px; font-size: 12px; }
.foot-rows .menu-item .nav-glyph { width: 20px; min-width: 20px; color: hsl(var(--text-3)); }
.foot-rows .menu-item:hover { background: hsl(var(--bg-3)); }
.foot-rows .menu-item:hover .nav-glyph { color: hsl(var(--text-1)); }
.foot-rows .menu-head { padding: 10px 14px 4px; }
.foot-rows .menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.foot-menu { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 10px 0 12px; border: 0; border-radius: 0; background: transparent; color: hsl(var(--text-1)); text-align: left; }
.foot-menu:hover { background: hsl(var(--bg-2)); }
.foot-block.open .foot-menu:hover { background: hsl(var(--bg-3)); }
.foot-block.open .foot-caret { transform: none; }
@media (prefers-reduced-motion: reduce) { .foot-block, .foot-rows { transition: none; } }
.foot-menu .brand-mark { flex: none; }
.foot-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.1; }
.foot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.foot-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 10px var(--font-mono); color: hsl(var(--text-4)); }
.foot-caret { flex: none; color: hsl(var(--text-4)); transform: rotate(180deg); display: inline-flex; }
.dock.collapsed .foot-menu { height: var(--bar-h); padding: 0; justify-content: center; }
.nav { padding: 6px 0; }
.nav-label { padding: 6px 12px 6px; display: flex; align-items: center; justify-content: space-between; }
.nav-label button { height: 18px; padding: 0 4px; letter-spacing: 0; text-transform: none; font-family: var(--font-sans); }
.nav-item { display: flex; align-items: center; width: 100%; height: 24px; gap: 8px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: hsl(var(--text-2)); font-size: 12px; text-align: left; }
.nav-item:hover { background: transparent; color: hsl(var(--text-1)); }
.nav-item.selected { color: hsl(var(--text-1)); box-shadow: inset 2px 0 hsl(var(--brand)); }
.nav-glyph { width: 14px; min-width: 14px; text-align: center; font-size: 12px; color: hsl(var(--text-4)); }
.dock.collapsed .dock-strip { flex-direction: column; height: auto; align-items: stretch; }
.dock.collapsed .dock-tabs { flex-direction: column; align-items: center; padding: 4px 0; gap: 2px; overflow: visible; }
.dock.collapsed .dock-tab { width: 28px; height: 28px; padding: 0; justify-content: center; border-bottom: 0; margin: 0; }
.dock.collapsed .dock-tab.active .nav-glyph { color: hsl(var(--text-1)); }
.dock.collapsed .dock-tab .dock-tab-label { display: none; }
.dock.collapsed .dock-toggle { margin: 0; width: 28px; height: 28px; justify-content: center; }
.dock.collapsed .nav { padding: 4px 0; }
.dock.collapsed .nav-label { display: none; }
.dock.collapsed .nav-item { justify-content: center; padding: 0; height: 28px; font-size: 0; gap: 0; }
.dock.collapsed .nav-item .nav-glyph { font-size: 13px; }

/* list region */
.master-header { height: var(--row-h); display: flex; align-items: center; border-bottom: 1px solid hsl(var(--border-1)); flex: none; }
.search { width: 100%; height: 100%; border: 0; background: transparent; padding: 0 12px; font-size: 11px; }
.search:focus { border: 0; background: hsl(var(--bg-2)); }
.item { display: block; width: 100%; height: auto; text-align: left; border: 0; border-radius: 0; background: transparent; padding: 5px 12px; color: hsl(var(--text-2)); }
.item:hover { background: hsl(var(--bg-2)); color: hsl(var(--text-1)); }
.item.active { background: hsl(var(--bg-2)); color: hsl(var(--text-1)); box-shadow: inset 2px 0 hsl(var(--brand)); }
.item-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.item small { display: block; font: 10px var(--font-mono); color: hsl(var(--text-4)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* detail: one header row, optional mono meta line, body */
.detail { position: relative; background: hsl(var(--bg-0)); display: flex; flex-direction: column; overflow: hidden; }
.detail-meta { font: 10px var(--font-mono); color: hsl(var(--text-3)); }
/* pane header (after jterm): one fixed row — kind · title · meta · actions · "…". Title and meta truncate; actions
   that do not fit move into the "…" menu (fitHeader in app.js). Nothing here may add height at any width. */
.detail-head { flex: none; height: var(--pane-head-h); min-height: var(--pane-head-h); max-height: var(--pane-head-h); overflow: hidden; border-bottom: 1px solid hsl(var(--border-1)); background: hsl(var(--bg-1)); }
.detail-row { height: 100%; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 0 4px 0 10px; overflow: hidden; white-space: nowrap; cursor: grab; touch-action: none; -webkit-touch-callout: none; }
.detail-row > * { flex: none; }
.detail-row h1 { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 11px/1 var(--font-mono); letter-spacing: 0; text-transform: none; color: hsl(var(--text-2)); }
.detail-row .detail-meta { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 10px/1 var(--font-mono); color: hsl(var(--text-4)); }
.detail-row .toolbar { margin-left: auto; flex-wrap: nowrap; gap: 4px; }
.detail-row .detail-meta ~ .toolbar, .detail-row .detail-meta ~ .pane-switch { margin-left: 0; }
.detail-row button { height: 24px; min-height: 0; min-width: 0; padding: 0 6px; font: 10.5px/1 var(--font-sans); cursor: pointer; }
.detail-row .badge { height: 16px; }
.detail-row button.quiet { min-width: 24px; padding: 0 3px; font-size: 14px; justify-content: center; }
.detail-row .toolbar button.quiet { font-size: 10.5px; }
.detail-row .overflowed { display: none !important; }
.detail-row .head-more { width: 24px; padding: 0; justify-content: center; border-color: transparent; letter-spacing: 0; color: hsl(var(--text-3)); }
.detail-row .head-more:hover, .detail-row .head-more[aria-expanded=true] { color: hsl(var(--text-1)); }
.detail-row h1.untitled { flex: 1 1 0; }
/* A mounted page's own header row takes the room the empty title would (the marketplace keeps its search on a phone). */
.detail-row:has(> .page-head-slot) > h1.untitled { display: none; }
.menu-note { max-width: min(360px, calc(100vw - 16px)); padding: 6px 12px 8px; font: 10px/1.5 var(--font-mono); color: hsl(var(--text-3)); white-space: normal; overflow-wrap: anywhere; border-bottom: 1px solid hsl(var(--border-1)); }
.detail-body { padding: 12px 16px; overflow: auto; flex: 1; min-height: 0; }
.toolbar, .top-actions, .row { display: flex; align-items: center; gap: 4px; }
.stack { display: grid; gap: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.card { padding: 12px 0; border-top: 1px solid hsl(var(--border-1)); background: transparent; }
.card h3 { margin-bottom: 8px; }
.kpi { font: 400 18px var(--font-mono); color: hsl(var(--text-1)); }
.kpi-label { color: hsl(var(--text-3)); font-size: 11px; }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border-bottom: 1px solid hsl(var(--border-1)); font-size: 11px; }
.kv:last-child { border: 0; }
.kv span:first-child { color: hsl(var(--text-3)); }
.notice { padding: 6px 10px; margin: 8px 0; background: hsl(var(--bg-1)); border-left: 2px solid hsl(var(--border-2)); color: hsl(var(--text-2)); font-size: 11px; }
.notice.error { border-left-color: hsl(var(--danger)); }
.notice.warn { border-left-color: hsl(var(--warn)); }
.notice.success { border-left-color: hsl(var(--ok)); }
.empty { max-width: 60ch; margin: 24px 16px; color: hsl(var(--text-3)); font-size: 11px; }
.empty h2 { color: hsl(var(--text-1)); font-size: 12px; margin-bottom: 4px; }
.no-list button { display: block; margin: 4px 0 0; padding: 2px 0; color: hsl(var(--text-1)); }
.boot { padding: 24px; }

/* 3d viewport + details */
.viewport-wrap { position: relative; flex: 1; min-height: 220px; }
.scene { width: 100%; height: 100%; display: block; touch-action: none; }
.scene-caption { position: absolute; left: 8px; top: 8px; pointer-events: none; font: 10px var(--font-mono); color: hsl(var(--text-2)); background: hsl(var(--bg-1) / .7); padding: 2px 6px; border-radius: 3px; }
/* The scene's foot: the hint over the tools, stacked, so neither covers the other (a long hint wraps). */
.scene-foot { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; pointer-events: none; }
.scene-foot > * { pointer-events: auto; }
.scene-tools { display: flex; gap: 2px; padding: 2px; border-radius: 6px; background: hsl(var(--bg-1) / .8); }
.scene-tools > button { background: transparent; border-radius: 4px; }
.scene-tools > button:hover { background: hsl(var(--bg-3)); }
.scene-tools > button[aria-pressed=true] { background: hsl(var(--bg-3)); box-shadow: none; }
.scene-hint { align-self: flex-end; max-width: 100%; font: 10px var(--font-mono); color: hsl(var(--text-3)); background: hsl(var(--bg-1) / .85); padding: 2px 6px; }
.scene-hint:empty { display: none; }
.details { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; border-top: 1px solid hsl(var(--border-1)); padding: 8px 12px; background: hsl(var(--bg-1)); max-height: 42%; overflow: auto; }
.details input { width: 76px; }
.details select { max-width: 360px; }
.field label { display: block; font: 10px var(--font-mono); color: hsl(var(--text-4)); margin-bottom: 2px; }
.variant-card { display: flex; flex-wrap: wrap; gap: 4px 16px; width: 100%; padding-top: 8px; border-top: 1px solid hsl(var(--border-1)); font-size: 11px; }
.variant-card .field span { color: hsl(var(--text-2)); font-family: var(--font-mono); font-size: 10.5px; }
.variant-card p { width: 100%; font: 10px/1.5 var(--font-mono); color: hsl(var(--text-3)); }

/* viewers, tables, processes, plate */
.source-code { font: 11px/1.6 var(--font-mono); color: hsl(var(--text-2)); white-space: pre; overflow: auto; tab-size: 2; margin: 0; padding: 12px; background: hsl(var(--bg-1)); border: 1px solid hsl(var(--border-1)); max-height: 60vh; }
.viewer-media { display: block; width: 100%; height: 100%; max-height: 65vh; object-fit: contain; background: hsl(var(--bg-1)); }
.preview-svg { width: 100%; height: 430px; background: hsl(var(--bg-1)); border: 1px solid hsl(var(--border-1)); }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th { text-align: left; padding: 8px; border-bottom: 1px solid hsl(var(--border-2)); white-space: nowrap; }
td { padding: 4px 8px; border-bottom: 1px solid hsl(var(--border-1)); vertical-align: top; }
td input { width: 64px; height: 20px; padding: 2px 4px; }
td small { font-size: 10px; }
.process { display: grid; gap: 0; margin-top: 12px; border-top: 1px solid hsl(var(--border-1)); }
.step { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-bottom: 1px solid hsl(var(--border-1)); border-left: 2px solid transparent; }
.step-index { display: grid; place-items: center; width: 20px; height: 20px; font: 10px var(--font-mono); border: 1px solid hsl(var(--border-2)); color: hsl(var(--text-3)); }
.step.running { border-left-color: hsl(var(--brand)); }
.step.simulated { border-left-color: hsl(var(--ok)); }
.step.blocked, .step.failed { border-left-color: hsl(var(--danger)); }
.step-label { flex: 1; font-size: 12px; }
.step-state { font: 10px var(--font-mono); color: hsl(var(--text-3)); text-transform: lowercase; }
.progress-track { height: 2px; background: hsl(var(--border-1)); overflow: hidden; }
.progress-track > div { background: hsl(var(--brand)); height: 100%; transition: width .2s; }
.plate { display: grid; grid-template-columns: 20px repeat(12, minmax(16px, 1fr)); gap: 4px; max-width: 620px; margin: 16px 0; }
.well { aspect-ratio: 1; min-width: 12px; height: auto; padding: 0; justify-content: center; border-radius: 0; border: 1px solid hsl(var(--border-2)); background: hsl(var(--bg-1)); font: 8px var(--font-mono); color: hsl(var(--text-3)); }
.well:hover { border-color: hsl(var(--brand)); color: hsl(var(--text-1)); }
.plate-label { display: flex; align-items: center; justify-content: center; font: 10px var(--font-mono); color: hsl(var(--text-4)); }

/* overlays */
.toast { position: fixed; bottom: 12px; right: 12px; max-width: 340px; padding: 8px 12px; background: hsl(var(--bg-2)); color: hsl(var(--text-1)); border: 1px solid hsl(var(--border-2)); font-size: 11px; z-index: 40; }
.toast.error { border-left: 2px solid hsl(var(--danger)); }
dialog { background: hsl(var(--bg-1)); color: hsl(var(--text-1)); border: 1px solid hsl(var(--border-2)); border-radius: 0; max-width: 540px; padding: 16px; }
dialog::backdrop { background: #000a; }
/* welcome (app.js openWelcome, docs/wave-j.md §13): a modal card over the dimmed shell; on a phone it is the screen */
dialog.welcome-modal { width: min(600px, calc(100vw - 32px)); height: min(780px, calc(100dvh - 48px)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 16px; background: hsl(var(--bg-1)); overflow: hidden; box-shadow: 0 24px 80px #0009; }
dialog.welcome-modal::backdrop { background: #0009; }
.welcome-modal .welcome-body { width: 100%; height: 100%; display: flex; }
/* the wizard's page draws a card of its own inside a full-screen root: here the modal is the card */
.welcome-modal [class~="sm:rounded-2xl"] { border: 0 !important; border-radius: 0 !important; }
.welcome-modal [class~="sm:py-8"] { padding: 0 !important; height: 100% !important; align-items: stretch !important; }
@media (max-width: 640px) { dialog.welcome-modal { width: 100vw; height: 100dvh; border-radius: 0; } }
details { margin-top: 12px; }
summary { cursor: pointer; font: 10px var(--font-mono); color: hsl(var(--text-3)); }
video { width: 100%; max-height: 62vh; background: #000; }
.bignumber { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .main { grid-template-columns: 220px 1px minmax(300px, 1fr); } .two { grid-template-columns: 1fr; } }

/* split panes inside a tab (after jterm): absolute boxes from core/panes.js, 1px dividers over the seams */
.detail.pane-area { position: relative; display: block; overflow: hidden; }
.pane { position: absolute; min-width: 0; min-height: 0; }
.pane.focused .detail-row { box-shadow: inset 0 2px 0 hsl(var(--brand)); }
.pane-area:has(.pane.focused) .pane:not(.focused) .detail-row h1 { color: hsl(var(--text-4)); }
/* dragging a pane by its header (or a tab from the strip) onto another pane: the source dims, the target half lights */
.pane.drag-source { opacity: .4; }
.drop-preview { position: absolute; z-index: 24; pointer-events: none; border: 2px solid hsl(var(--brand)); background: hsl(var(--brand) / .1); }
body.pane-dragging, body.pane-dragging * { cursor: grabbing !important; }
.pane-divider { position: absolute; z-index: 6; background: hsl(var(--border-2)); }
.pane-divider.x { width: 1px; margin-left: -.5px; cursor: col-resize; }
.pane-divider.y { height: 1px; margin-top: -.5px; cursor: row-resize; }
.pane-divider::after { content: ''; position: absolute; inset: -4px 0; }
.pane-divider.x::after { inset: 0 -4px; }
.pane-divider:hover, .pane-divider.dragging { background: hsl(var(--brand)); }
.pane-switch { display: flex; align-items: center; flex: none; gap: 2px; font: 10px/1 var(--font-mono); color: hsl(var(--text-3)); }
.detail-row .pane-switch button { width: 20px; padding: 0; justify-content: center; border-color: transparent; }
.model-wrap { height: calc(100% - 64px); min-height: 200px; }

/* right dock, bottom pane, explorer tree; the project and account menu is the left dock's foot (.dock-foot below) */
.main { grid-template-columns: 280px 1px minmax(300px, 1fr) 1px 320px; }
.centre { display: grid; min-width: 0; min-height: 0; grid-template-rows: var(--bar-h) minmax(0, 1fr) 0 0; }
.centre > .detail { min-height: 0; }
.splitter.horizontal { cursor: row-resize; }
.splitter.horizontal::after { inset: -4px 0; }
.rdock { border-left: 0; }
.rdock-body { flex: 1; min-height: 0; overflow: auto; }
.rdock .details { flex-direction: column; flex-wrap: nowrap; align-items: stretch; max-height: none; border: 0; background: transparent; padding: 8px 12px; gap: 8px; }
.rdock .details > .field { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rdock .details > .field label { margin: 0; }
.rdock .details select { max-width: 100%; width: 100%; }
.rdock .variant-card { flex-direction: column; gap: 4px; }
.rdock .variant-card .field { display: flex; justify-content: space-between; gap: 12px; }
.rdock .variant-card .field span { text-align: right; overflow-wrap: anywhere; }
.rdock .empty { margin: 16px 12px; }
.bottom { display: flex; flex-direction: column; min-height: 0; background: hsl(var(--bg-1)); }
.events { flex: 1; overflow: auto; font: 11px/1.5 var(--font-mono); padding: 4px 0; }
.event { padding: 1px 12px; color: hsl(var(--text-2)); }
.event.error { color: hsl(var(--danger)); }
.event-time { color: hsl(var(--text-4)); margin-right: 12px; }
.event-detail { margin: 2px 0 4px 64px; white-space: pre-wrap; color: hsl(var(--text-4)); font: inherit; max-height: 12em; overflow: auto; }
.strip-cluster button[aria-pressed=true], .strip > .chrome-button[aria-pressed=true] { background: transparent; color: hsl(var(--brand)); }
.tree { padding: 2px 0 8px; }
.tree-row { display: flex; align-items: center; gap: 4px; width: 100%; height: 22px; border: 0; border-radius: 0; background: transparent; color: hsl(var(--text-2)); font-size: 12px; padding-right: 8px; text-align: left; }
.tree-row:hover { background: hsl(var(--bg-2)); color: hsl(var(--text-1)); }
.tree-row.selected { background: hsl(var(--bg-2)); color: hsl(var(--text-1)); box-shadow: inset 2px 0 hsl(var(--brand)); }
.tree-row.dir { color: hsl(var(--text-1)); }
.tree-caret { width: 10px; flex: none; color: hsl(var(--text-4)); font-size: 9px; }
.dock-tabs .dock-tab-label { display: none; }
.dock-tabs .dock-tab { padding: 0 8px; }
/* project view */
.project { max-width: 1100px; display: grid; gap: 12px; font-size: 12px; }
.project > p { color: hsl(var(--text-2)); }
.project-status { display: flex; align-items: center; gap: 12px; font: 11px var(--font-mono); color: hsl(var(--text-2)); }
.project h3 { margin-top: 8px; }
.project td.attention { color: hsl(var(--warn)); }
.project ul { margin: 0; padding-left: 16px; font-size: 11px; color: hsl(var(--text-2)); }

/* empty pane (new tab / new split): calm, one pointer to the explorer, recent files, the keymap */
.blank { max-width: 44ch; margin: 12vh auto 0; display: grid; gap: 12px; color: hsl(var(--text-3)); font-size: 11.5px; }
.blank h2 { color: hsl(var(--text-1)); font-size: 13px; font-weight: 500; }
.blank .toolbar { flex-wrap: wrap; }
.recent { display: grid; margin-top: 8px; border-top: 1px solid hsl(var(--border-1)); padding-top: 8px; }
.recent h3 { margin-bottom: 4px; }
.recent-row { display: flex; width: 100%; border: 0; border-radius: 0; background: transparent; padding: 0 4px; gap: 8px; color: hsl(var(--text-2)); text-align: left; }
.recent-row:hover { background: hsl(var(--bg-2)); color: hsl(var(--text-1)); }
.recent-name { flex: none; }
.recent-row small { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 10px var(--font-mono); color: hsl(var(--text-4)); }
/* the new tab: suggested actions (rounded icon tiles, wrapped), recent files (a plain list), drives (newtab.js).
   The action tiles are the one rounded thing in the shell: the owner's call (docs/wave-i.md §3). */
.start { max-width: 920px; margin: 0 auto; padding: 8px 0 24px; display: grid; gap: 22px; align-content: start; }
/* a group is a grid item: without min-width 0 its automatic minimum (the widest tile's nowrap hint) widens the track past a narrow pane */
.start > * { min-width: 0; }
.start-group h3 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.start-note { font: 10px var(--font-mono); letter-spacing: 0; text-transform: none; color: hsl(var(--text-4)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.start-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 2px; }
.start-tile { display: flex; align-items: flex-start; gap: 10px; height: auto; min-height: 52px; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: hsl(var(--text-2)); text-align: left; white-space: normal; min-width: 0; }
.start-tile:hover { background: hsl(var(--bg-2)); color: hsl(var(--text-1)); }
.start-tile.here { background: hsl(var(--bg-2)); color: hsl(var(--text-1)); }
.start-tile.off { color: hsl(var(--text-4)); }
.start-glyph { flex: none; margin-top: 1px; color: hsl(var(--text-4)); display: grid; place-items: center; }
.start-tile:hover .start-glyph { color: hsl(var(--brand)); }
.start-text { display: grid; gap: 3px; min-width: 0; }
.start-title { font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.start-text small { font: 10px/1.35 var(--font-mono); overflow-wrap: anywhere; }
.action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.action-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; height: auto; min-height: 118px; padding: 12px; border: 0; border-radius: 14px; background: hsl(var(--bg-1)); color: hsl(var(--text-1)); text-align: left; white-space: normal; min-width: 0; transition: background-color .12s, border-color .12s; }
.action-tile:hover, .action-tile:focus-visible { background: hsl(var(--bg-2)); border-color: hsl(var(--brand) / .6); }
.action-glyph { flex: none; width: 34px; height: 34px; margin-bottom: 2px; display: grid; place-items: center; border-radius: 10px; background: hsl(var(--bg-3)); color: hsl(var(--text-2)); }
.action-tile:hover .action-glyph, .action-tile:focus-visible .action-glyph { background: hsl(var(--brand) / .16); color: hsl(var(--brand)); }
.action-tile[data-group="ask"] .action-glyph { color: hsl(var(--brand)); }
.action-title { font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.action-hint { margin-top: auto; max-width: 100%; font: 10px/1.35 var(--font-mono); color: hsl(var(--text-4)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-tile.wait { cursor: progress; border-style: dashed; background: transparent; }
/* "more" / "less": the last slot of the folded suggested actions (newtab.js foldTiles), quieter than an action */
.action-tile.action-more { background: transparent; color: hsl(var(--text-2)); justify-content: center; align-items: center; text-align: center; }
.action-tile.action-more .action-glyph { background: transparent; }
.start-recent { display: grid; margin: 0; padding: 0; list-style: none; }
.start-recent .recent-row { height: 26px; align-items: center; padding: 0 8px; gap: 12px; }
.start-recent .recent-name { font-size: 12px; color: hsl(var(--text-1)); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-recent .recent-row small { flex: 1; text-align: left; white-space: nowrap; }
.recent-when { flex: none; font: 10px var(--font-mono); color: hsl(var(--text-4)); }
.start-none, .start-fail { margin: 0; font: 11px var(--font-mono); color: hsl(var(--text-4)); }
.start-fail { color: hsl(var(--text-2)); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid hsl(var(--border-1)); font-size: 11px; }
.keys dt, .keys dd { margin: 0; }
.keys dd { color: hsl(var(--text-3)); }
.scrim { display: none; }

/* safe areas (notch, home indicator, rounded corners) apply at every width */
.shell { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); width: 100%; overflow: hidden; }
.toast { bottom: calc(12px + env(safe-area-inset-bottom)); max-width: min(340px, calc(100vw - 24px)); }

/* touch (iPad, phones): no hover-only affordances, targets >= 36px, hover dimming off, no keymap to show */
@media (hover: none) {
  .nav-section:hover .nav-item:not(:hover):not(.selected) { color: hsl(var(--text-2)); }
  .keys { display: none; }
}
@media (pointer: coarse) {
  :root { --bar-h: 40px; --row-h: 36px; --tap: 36px; }
  button { height: auto; min-height: var(--tap); padding: 4px 10px; }
  button.quiet { min-width: var(--tap); justify-content: center; }
  input, select { height: var(--tap); font-size: 16px; }
  textarea, .search { font-size: 16px; }
  .nav-item, .tree-row, .menu-item, .recent-row { min-height: var(--tap); }
  .item { min-height: var(--tap); padding: 8px 12px; }
  .tab { min-width: 120px; }
  .tab-close { width: 32px; height: 32px; }
  .chrome-button { width: var(--tap); height: var(--tap); min-height: var(--tap); padding: 0; }
  .detail-row button { height: 32px; min-height: 32px; }
  .detail-row button.quiet, .detail-row .head-more { min-width: 32px; }
  .dock-tab { min-height: 0; }
  .dock.collapsed .dock-tab, .dock.collapsed .nav-item { width: var(--tap); height: var(--tap); }
  .nav-label button { min-height: 28px; height: 28px; }
  .splitter::after { inset: 0 -10px; }
  .splitter.horizontal::after { inset: -10px 0; }
  .pane-divider::after { inset: -10px 0; }
  .pane-divider.x::after { inset: 0 -10px; }
  td input { height: 28px; min-height: 28px; font-size: 14px; }
  .details input { width: 104px; }
}

/* a narrow pane (split, iPad portrait, phone) drops the kind label from its header; the row never wraps */
.pane { container-type: inline-size; }
@container (max-width: 560px) {
    .scene-hint { display: none; }
  .scene-tools { flex-wrap: wrap; }
}

/* phone: one column; docks are drawers over the panes; events is a bottom sheet; one pane at a time */
@media (max-width: 640px) {
  :root { --bar-h: 40px; --row-h: 40px; --tap: 40px; }
  button { height: auto; min-height: var(--tap); }
  .nav-item, .tree-row, .menu-item, .recent-row, .item { min-height: var(--tap); }
  .shell { grid-template-rows: minmax(0, 1fr) auto auto; padding-bottom: 0; }
  .strip > .chrome-button:first-child { width: var(--bar-h); height: 100%; border-radius: 0; border-right: 1px solid hsl(var(--border-1)); }
  .strip-cluster .chrome-button { width: 36px; min-width: 36px; height: 100%; min-height: 0; }
  .wide-only { display: none; }
  .tabs { flex: 1 1 auto; overflow-x: auto; scroll-snap-type: x proximity; }
  .tab { flex: none; width: auto; min-width: 0; max-width: 46vw; padding: 0 4px 0 12px; scroll-snap-align: start; }
  .tab-close { width: 36px; height: 36px; }
  .tab:not(.active) .tab-close { display: none; }
  .tab-new { width: var(--bar-h); border-left: 1px solid hsl(var(--border-1)); }
  .strip-spacer { display: none; }
  .strip-cluster { padding: 0 2px; gap: 0; border-left: 1px solid hsl(var(--border-1)); }
  .main { grid-template-columns: minmax(0, 1fr) !important; }
  .splitter { display: none !important; }
  .centre { grid-template-rows: var(--bar-h) minmax(0, 1fr) !important; }
  .dock { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: min(86vw, 360px); padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left); border-right: 1px solid hsl(var(--border-2)); box-shadow: 0 0 40px #000c; }
  .dock.rdock { left: auto; right: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) 0; border-right: 0; border-left: 1px solid hsl(var(--border-2)); }
  .dock-tabs .dock-tab { padding: 0 10px; }
  .dock-toggle { min-width: var(--bar-h); justify-content: center; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 29; background: #000a; }
  .bottom { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; height: min(50dvh, 420px); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid hsl(var(--border-2)); box-shadow: 0 -12px 40px #000a; }
  /* the sheet stops above the time bar: the window clock stays in reach while a sheet is open */
  .shell:has(.timebar:not([hidden])) .bottom { bottom: calc(30px + env(safe-area-inset-bottom)); padding-bottom: 0; }
  .detail-body { padding: 12px; }
  .two { grid-template-columns: 1fr; }
  .scene-caption { right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .scene-tools { flex-wrap: wrap; }
  .scene-hint { display: none; }
  .menu { min-width: 220px; max-width: calc(100vw - 8px); }
  .blank { margin-top: 6vh; }
  .source-code { max-height: none; }
}

/* the git sidebar tab */
.side-panel { display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: 0 0 12px; }
.side-panel .master-header { gap: 2px; padding-right: 4px; }
.side-panel .master-header .search { flex: 1; }
.search-line { flex: none; min-width: 28px; text-align: right; font: 10px var(--font-mono); color: hsl(var(--text-4)); }
.git-row { display: flex; align-items: center; }
.git-row .tree-row { flex: 1; min-width: 0; gap: 8px; padding-left: 12px; }
.git-flag { flex: none; width: 14px; font: 11px var(--font-mono); color: hsl(var(--warn)); }
.git-commit { display: flex; flex-direction: column; gap: 4px; padding: 4px 12px 8px; }
.git-message { min-height: 44px; font: 11px var(--font-mono); }
.git-diff { margin: 4px 8px; max-height: 40vh; font-size: 10.5px; }
.git-log { padding: 2px 12px; font-size: 11px; color: hsl(var(--text-2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* icons: bigger glyphs, less padding around them */
.nav-glyph { width: 18px; min-width: 18px; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.tab-glyph { display: inline-flex; align-items: center; justify-content: center; }
.tab-glyph { width: 16px; font-size: 14px; }
.dock-tab .nav-glyph { font-size: 16px; }
.dock-toggle { font-size: 16px; }
.tree-caret { width: 14px; font-size: 12px; }
button.quiet { font-size: 14px; padding: 2px 5px; }
.menu-item .nav-glyph { font-size: 15px; }
.dock.collapsed .nav-item .nav-glyph, .dock.collapsed .dock-tab .nav-glyph { font-size: 18px; }

/* world kind: "real" is hardware and gets the accent; "sim" stays quiet */
.nav-item .world-kind { flex: none; margin-left: 6px; font: 500 9px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 2px 4px; border: 1px solid hsl(var(--border-2)); color: hsl(var(--text-4)); }
.nav-item .world-kind.physical { color: hsl(var(--brand)); border-color: hsl(var(--brand)); }
.dock.collapsed .nav-item .world-kind { display: none; }

/* regions (docs/regions.md): contributed panel tabs, put-away docks, maximized bottom, cinema, region errors */
.panel-tabs { display: flex; align-items: stretch; flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.panel-tabs::-webkit-scrollbar { display: none; }
.panel-tabs button.dock-tab { max-width: 240px; }
.dock-toggle.after { margin-left: 0; }
.bottom-body, .panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rdock-body { display: flex; flex-direction: column; }
.rdock-body > .panel-body { overflow: auto; }
/* a splitter whose dock is put away stays as a grab edge: invisible until hovered or dragged */
.splitter.put-away { background: transparent; }
.splitter.put-away:hover, .splitter.put-away.dragging { background: hsl(var(--brand)); }
.tail-head { flex: none; display: flex; align-items: center; gap: 12px; height: var(--row-h); padding: 0 12px; border-bottom: 1px solid hsl(var(--border-1)); font: 10px var(--font-mono); color: hsl(var(--text-4)); white-space: nowrap; }
.tail-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: hsl(var(--text-3)); }
.tail-status { margin-left: auto; flex: none; }
.tail { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 4px 12px; font: 11px/1.5 var(--font-mono); color: hsl(var(--text-2)); white-space: pre; tab-size: 4; }
.region-error { display: flex; align-items: center; gap: 8px; margin: 6px 8px; padding: 2px 4px 2px 10px; border-left: 2px solid hsl(var(--danger)); background: hsl(var(--bg-2)); font: 11px var(--font-mono); color: hsl(var(--text-2)); }
.region-error-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: text; -webkit-user-select: text; }
.region-error .region-retry { flex: none; font: 11px var(--font-sans); border-color: hsl(var(--border-2)); color: hsl(var(--text-1)); }
/* maximized (a pane's ⋯ → maximize, Mod+Enter): the pane fills the window; the docks and the bottom pane step aside */
.shell.maximized .main { grid-template-columns: minmax(0, 1fr) !important; }
.shell.maximized .centre { grid-template-rows: var(--bar-h) minmax(0, 1fr) !important; }
.shell.maximized .dock, .shell.maximized .splitter, .shell.maximized .bottom { display: none !important; }
/* cinema: the focused pane alone (its header stays: it carries the world's physical/simulation scope) */
.shell.cinema { grid-template-rows: minmax(0, 1fr); }
.shell.cinema .main { grid-template-columns: minmax(0, 1fr) !important; }
.shell.cinema .centre { grid-template-rows: minmax(0, 1fr) !important; }
.shell.cinema .dock, .shell.cinema .splitter, .shell.cinema .strip, .shell.cinema .bottom, .shell.cinema .timebar, .shell.cinema .scrim { display: none !important; }
.cinema-exit { position: fixed; z-index: 45; top: calc(var(--bar-h) + 8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); background: hsl(var(--bg-1) / .88); border-color: hsl(var(--border-2)); color: hsl(var(--text-1)); }
.cinema-exit:hover { background: hsl(var(--bg-3)); }
.splitter.inert { pointer-events: none; }
.bottom .dock-toggle[aria-pressed=true] { background: transparent; color: hsl(var(--brand)); }

/* the window's time bar (timeline.js, clock.js): one slim row at the foot of the window, hairline above, one accent */
.timebar { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 8px; background: hsl(var(--bg-1)); border-top: 1px solid hsl(var(--border-1)); font: 10px var(--font-mono); color: hsl(var(--text-3)); min-width: 0; }
.timebar[hidden] { display: none; }
.timebar .tb-play { width: 24px; height: 22px; min-height: 0; flex: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.timebar .tb-track { position: relative; flex: 1; min-width: 60px; height: 22px; cursor: pointer; touch-action: none; }
.timebar .tb-track::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: hsl(var(--border-2)); }
.timebar .tb-fill { position: absolute; left: 0; top: 10px; height: 2px; background: hsl(var(--brand)); }
.timebar .tb-handle { position: absolute; top: 5px; width: 10px; height: 12px; margin-left: -5px; background: hsl(var(--brand)); border: 2px solid hsl(var(--bg-1)); }
.timebar .tb-lane { position: absolute; height: 1px; background: hsl(var(--text-4)); opacity: .55; }
.timebar .tb-lane.open { background: hsl(var(--brand)); opacity: .8; }
.timebar .tb-track:focus-visible { outline: 1px solid hsl(var(--brand)); }
.timebar .tb-times { flex: none; color: hsl(var(--text-2)); font-variant-numeric: tabular-nums; }
.timebar .tb-note { flex: none; min-width: 42px; color: hsl(var(--text-4)); text-transform: uppercase; letter-spacing: .08em; }
.timebar[data-mode=paused] .tb-note { color: hsl(var(--warn, var(--brand))); }
.timebar[data-mode=live] .tb-note { color: hsl(var(--danger)); }
.timebar .tb-live { height: 20px; min-height: 0; padding: 0 8px; font: 500 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.timebar .tb-live.on { color: hsl(var(--danger)); border-color: hsl(var(--danger)); }
.timebar .tb-rate { height: 20px; min-height: 0; padding: 0 2px; font: 10px var(--font-mono); background: hsl(var(--bg-1)); color: hsl(var(--text-3)); border: 1px solid hsl(var(--border-2)); }
@media (max-width: 640px) { .timebar { height: 36px; gap: 8px; padding: 0 8px; } .timebar .tb-note, .timebar .tb-rate { display: none; } .timebar .tb-play { width: 32px; height: 28px; } .timebar .tb-live { min-height: 28px; } .timebar .tb-track { height: 28px; } .timebar .tb-track::before, .timebar .tb-fill { top: 13px; } .timebar .tb-handle { top: 8px; } }
/* the pane's own scrubber, linked to it (editors/stream.js) */
.sv-scrub .sv-link { height: 22px; min-height: 0; padding: 0 8px; font: 10px var(--font-mono); }
.sv-scrub .sv-link[aria-pressed=true] { background: transparent; color: hsl(var(--brand)); border: 1px solid hsl(var(--brand)); }
.sv-scrub { flex-wrap: wrap; }
.sv-outside { font: 10px var(--font-mono); color: hsl(var(--text-4)); }
/* the world's runs panel (bottom pane; timeline.js) */
.timeline { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.timeline .tl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.timeline .tl-row { display: flex; align-items: baseline; gap: 10px; font: 11px var(--font-mono); color: hsl(var(--text-3)); }
.timeline .tl-run { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: hsl(var(--text-2)); }
.timeline .tl-note { font: 10px var(--font-mono); color: hsl(var(--text-4)); }
.timeline .tl-runs { max-width: 42%; height: 20px; padding: 0 4px; font: 10px var(--font-mono); background: hsl(var(--bg-1)); color: hsl(var(--text-2)); border: 1px solid hsl(var(--border-2)); }
/* The run panel (runpanel.js): members at the playhead and the run's conversation. */
.runpanel { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; font: 11px var(--font-mono); min-height: 0; }
.runpanel .rp-empty { display: flex; align-items: center; gap: 12px; }
.runpanel .rp-head, .runpanel .rp-members { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.runpanel .rp-input { flex: 1; min-width: 0; height: 44px; min-height: 32px; resize: vertical; font: 12px var(--font-mono); }
.rp-convo { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 64px; max-height: 240px; overflow: auto; }
.rp-msg { border-left: 2px solid hsl(var(--border-2)); padding: 2px 8px; }
.rp-msg.agent { border-left-color: hsl(var(--brand)); }
.rp-msg.future { opacity: .35; }
.rp-msg .rp-from { color: hsl(var(--text-2)); margin-right: 8px; }
.rp-msg .rp-text { white-space: pre-wrap; color: hsl(var(--text-2)); }

/* the devices app (devices-app.js) and the network tab (network.js): a compact rail of live tiles, chips, the work band, a theater. */
.detail-body.devices { align-content: start; }
.devices-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; }
.devices-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { height: 20px; padding: 0 8px; font: 10px var(--font-mono); text-transform: lowercase; }
.chip.selected { color: hsl(var(--text-1)); border-color: hsl(var(--border-2)); background: hsl(var(--bg-2)); }
.devices-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 6px; }
.devices-tile { display: flex; flex-direction: column; align-items: stretch; gap: 2px; height: auto; padding: 0 0 6px; text-align: left; white-space: normal; overflow: hidden; }
.devices-tile.selected { border-color: hsl(var(--brand)); }
.devices-face { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 16 / 10; background: hsl(var(--bg-1)); border-bottom: 1px solid hsl(var(--border-1)); color: hsl(var(--text-4)); overflow: hidden; }
.devices-face video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.devices-cat { font: 10px var(--font-mono); text-transform: lowercase; }
.devices-state { position: absolute; left: 4px; bottom: 4px; background: hsl(var(--bg-1) / .85); }
.devices-name { padding: 0 6px; font-size: 11px; color: hsl(var(--text-1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.devices-tile small { padding: 0 6px; font: 10px var(--font-mono); color: hsl(var(--text-4)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.devices-runs td { font-size: 11px; vertical-align: top; }
.devices-streams { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.devices-streams figure { margin: 0; }
.devices-channels { list-style: none; padding: 0; margin: 0; font: 11px var(--font-mono); }
.devices-channels li { padding: 2px 0; }
.devices-qr { display: block; width: 200px; height: 200px; margin: 8px 0; image-rendering: pixelated; }
.devices-terminal { min-height: 160px; max-height: 360px; overflow: auto; white-space: pre-wrap; }
/* A shell channel's terminal (terminal.js: xterm.js, or the plain reader); the bottom pane's terminal tab fills its pane. */
.terminal-view { height: 340px; min-height: 120px; background: #0a0a09; padding: 6px; border: 1px solid hsl(var(--border-2)); overflow: hidden; }
.terminal-tab { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; gap: 6px; padding: 6px; }
/* A terminal that was wider elsewhere (a card, another pane) must not widen the grid it moves into: fit reads this width. */
.terminal-tab .terminal-view { min-width: 0; }
.terminal-tab .terminal-view { flex: 1; height: auto; }
.terminal-tab .toolbar { flex-wrap: wrap; }
/* keyboard shortcuts app (keybindings.js) */
.kb-table td { vertical-align: top; }
.kb-table kbd { display: inline-block; font: 10px var(--font-mono); padding: 1px 4px; margin: 0 2px 2px 0; border: 1px solid hsl(var(--border-1)); border-radius: 2px; color: hsl(var(--text-1)); }
.kb-table .kb-actions .toolbar { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 6px; margin-top: 2px; }
.kb-table .kb-actions .toolbar button { height: auto; min-height: 0; padding: 0; font-size: 11px; }
.kb-table tr.kb-user td:first-child { box-shadow: inset 2px 0 hsl(var(--brand)); }

/* the navigation sidebar (navbar.js): old commandagi's nav — Home, the anchors with pins between them, organizations,
   activity. Rows as it drew them: an 18px glyph 12px from its label, 7px above and below; hover and focus darken the
   text (never a plate behind it); the row the focused pane shows is in the strongest text. */
.navbar { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.nav-sections { flex: 1; min-height: 0; overflow: auto; padding: 4px 8px 16px; }
.navbar .nav-item { height: auto; min-height: 32px; gap: 12px; padding: 7px 8px; font-size: 13px; font-weight: 500; color: hsl(var(--text-3)); }
.navbar .nav-item:hover, .navbar .nav-item:focus-visible { color: hsl(var(--text-1)); background: transparent; outline: 0; }
.navbar .nav-item.selected { color: hsl(var(--text-1)); box-shadow: none; }
.navbar .nav-item .nav-glyph { width: 18px; min-width: 18px; color: inherit; }
.navbar .nav-item .dock-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbar .nav-section { padding: 0; }
.navbar .nav-label { margin: 16px 0 4px; padding: 0 8px; }
.nav-pin { position: relative; display: flex; align-items: center; }
.nav-pin .nav-item { padding-right: 32px; }
.nav-remove { position: absolute; right: 4px; width: 24px; min-width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: hsl(var(--text-4)); opacity: 0; transition: opacity .1s; }
.nav-pin:hover .nav-remove, .nav-remove:focus-visible { opacity: 1; }
.nav-remove:hover { color: hsl(var(--text-1)); background: transparent; }
.nav-trail { margin-left: auto; display: inline-flex; color: hsl(var(--text-4)); }
.org-mark { width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; background: hsl(var(--bg-3)); color: hsl(var(--text-1)); font: 600 10px/1 var(--font-sans); }
.navbar .nav-item.nav-more { color: hsl(var(--text-4)); font-weight: 400; padding-left: 38px; }
.navbar .nav-item.nav-more:hover { color: hsl(var(--text-2)); }
.dock.collapsed .navbar { overflow: auto; }
.dock.collapsed .nav-sections { padding: 4px 0; }
.dock.collapsed .nav-activity, .dock.collapsed .nav-orgs, .dock.collapsed .nav-remove { display: none; }
.dock.collapsed .navbar .nav-item { justify-content: center; padding: 0; min-height: 36px; font-size: 0; gap: 0; }
.dock.collapsed .nav-pin .nav-item { padding-right: 0; }
.dock-tab .brand-mark { width: 10px; height: 10px; }
.dock.collapsed .nav-section:not(:has(.nav-item)) { display: none; }
.dock.collapsed .nav-section + .nav-section { border-top: 0; }
@media (max-width: 640px) { .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .action-tile { min-height: 108px; } }
@media (pointer: coarse) { .nav-remove { opacity: 1; } }
/* the dock foot's account menu: old commandagi's menu, its items with their icons at full size */
.menu-current { display: inline-flex; margin-left: 12px; color: hsl(var(--brand)); }
/* Apps (the sidebar's Apps anchor): every app as a rounded icon tile */
/* The sidebar's sheets (sheet.js; docs/regions.md § sheets): a modal on a desktop, a bottom sheet on a phone. One
   hairline frame, square corners, naked content: the head row is words (the active tab underlined in the accent), the
   field has no box, rows are plain until hovered or marked. Below the menus, the palette and toasts; above the docks. */
/* An old page's own header row in its pane head (app.js renderMountedApp, react/pages.jsx HeaderBridge). */
.detail-row > .page-head-slot { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.sheet-scrim { position: fixed; inset: 0; z-index: 35; display: flex; justify-content: center; align-items: flex-start; padding: calc(var(--bar-h) + 7vh) 16px 16px; background: hsl(var(--bg-0) / .5); }
.sheet:focus { outline: none; }
.sheet { display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(600px, 100%); background: hsl(var(--bg-1)); border: 1px solid hsl(var(--border-2)); box-shadow: 0 16px 48px #000a; animation: sheet-in .12s ease-out; }
.sheet-wide { width: min(800px, 100%); height: min(620px, 100%); max-height: none; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes sheet-up { from { transform: translateY(40%); opacity: .4; } }
.sheet-grab { display: none; }
.sheet-head { flex: none; display: flex; align-items: center; gap: 12px; height: var(--bar-h); padding: 0 4px 0 16px; border-bottom: 1px solid hsl(var(--border-1)); }
.sheet-title { flex: 1; min-width: 0; font: 500 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--text-3)); }
.sheet-tabs { flex: 1; min-width: 0; display: flex; gap: 18px; height: 100%; }
.sheet-tab { height: 100%; padding: 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; color: hsl(var(--text-3)); font-size: 12.5px; }
.sheet-tab:hover { background: none; color: hsl(var(--text-1)); }
.sheet-tab.active { color: hsl(var(--text-1)); border-bottom-color: hsl(var(--brand)); }
.sheet-close { flex: none; width: 28px; height: 28px; padding: 0; justify-content: center; border: 0; background: none; color: hsl(var(--text-3)); }
.sheet-close:hover { background: none; color: hsl(var(--text-1)); }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0 14px; }
.sheet-body-page { padding: 0; overflow: hidden; }
.sheet-surface { height: 100%; }
.sheet-search { display: flex; align-items: center; gap: 10px; padding: 6px 16px 8px; color: hsl(var(--text-3)); cursor: text; }
.sheet-search-field { flex: 1; min-width: 0; height: 30px; padding: 0; border: 0; background: none; font: 15px var(--font-sans); color: hsl(var(--text-1)); }
.sheet-search-field:focus { border: 0; }
.sheet-search-field::placeholder { color: hsl(var(--text-4)); }
.sheet-label { padding: 12px 16px 4px; font: 500 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--text-4)); }
.sheet-intro { padding: 10px 16px 4px; color: hsl(var(--text-3)); line-height: 1.5; user-select: text; -webkit-user-select: text; }
.sheet-list { display: flex; flex-direction: column; }
.sheet-row { display: flex; align-items: center; gap: 12px; width: 100%; height: auto; min-height: 32px; padding: 4px 16px; border: 0; border-left: 2px solid transparent; border-radius: 0; background: none; color: hsl(var(--text-2)); font-size: 12.5px; text-align: left; white-space: nowrap; }
.sheet-row:hover { background: none; color: hsl(var(--text-1)); }
.sheet-row.active { background: hsl(var(--bg-3)); color: hsl(var(--text-1)); border-left-color: hsl(var(--brand)); }
.sheet-row-glyph { flex: none; display: grid; place-items: center; color: hsl(var(--text-3)); }
.sheet-row-title { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.sheet-row-title b { font-weight: 600; color: hsl(var(--brand)); }
.sheet-row-sub { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 11px var(--font-mono); color: hsl(var(--text-4)); }
.sheet-row-hint { flex: none; margin-left: auto; font: 10.5px var(--font-mono); color: hsl(var(--text-4)); }
.sheet-row-static { cursor: default; }
.sheet-row-open { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 12px; height: auto; min-height: 0; padding: 0; border: 0; background: none; color: inherit; font-size: 12.5px; text-align: left; }
.sheet-row-open:hover { background: none; color: hsl(var(--text-1)); }
.sheet-row-open:disabled { opacity: 1; }
.sheet-row-open .sheet-row-title { max-width: 50%; }
.sheet-empty { padding: 8px 16px; color: hsl(var(--text-3)); }
.sheet-empty.error { color: hsl(var(--danger)); }
.sheet-actions { display: flex; gap: 8px; padding: 10px 16px; }
.sheet-inline-action { height: auto; min-height: 0; padding: 0; border: 0; background: none; color: hsl(var(--brand)); font-size: inherit; vertical-align: baseline; }
.sheet-inline-action:hover { background: none; text-decoration: underline; }
.sheet-tiles { max-width: none; padding: 10px 16px 4px; }
/* A switch (Customize › Skills "every thread"): a naked track and knob, the accent when on. */
.switch { flex: none; width: 26px; height: 14px; min-height: 0; padding: 0; border: 1px solid hsl(var(--border-2)); border-radius: 7px; background: none; position: relative; }
.switch:hover { background: none; border-color: hsl(var(--text-4)); }
.switch::before { content: ''; position: absolute; inset: -12px -8px; } /* a finger's hit area around the small track */
.switch-knob { position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--text-3)); transition: left .1s; }
.switch.on { border-color: hsl(var(--brand)); }
.switch.on .switch-knob { left: 14px; background: hsl(var(--brand)); }
@media (max-width: 640px) {
  .sheet-scrim { align-items: flex-end; padding: 0; }
  .sheet, .sheet-wide { width: 100%; height: 84dvh; max-height: none; border: 0; border-top: 1px solid hsl(var(--border-2)); border-radius: 12px 12px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: sheet-up .18s ease-out; transition: transform .2s ease-out; }
  .sheet-grab { display: flex; justify-content: center; padding: 8px 0 4px; touch-action: none; cursor: grab; }
  .sheet-grab span { width: 36px; height: 4px; border-radius: 2px; background: hsl(var(--border-2)); }
  .sheet-row { min-height: var(--tap, 40px); }
  .sheet-search-field { font-size: 16px; }
  .sheet-row-title { max-width: 70%; }
  .sheet-row-open { flex-direction: column; gap: 0; }
  .sheet-row-open .sheet-row-title { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-wide { animation: none; transition: none; } }
.app-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 18px 10px; max-width: 900px; }
.app-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; height: auto; min-width: 0; padding: 6px 2px; border: 0; background: transparent; }
.app-tile:hover { background: transparent; }
.app-tile-icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: hsl(var(--bg-2)); color: hsl(var(--text-1)); transition: background .1s; }
.app-tile:hover .app-tile-icon, .app-tile:focus-visible .app-tile-icon { background: hsl(var(--bg-3)); }
.app-tile-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: hsl(var(--text-2)); }