@staix/agent-console 0.0.0-stage → 0.1.0

package/shell/shell.css

@@ -0,0 +1,534 @@
+/* Public tokens: all --acon-* declarations below. Public classes are listed in README's
+   Public styling contract. All other selectors, including shell layout/state classes,
+   are PRIVATE and may change. Panels must not depend on them. */
+:root {
+  color-scheme: light;
+  --acon-bg: #F5F6F8;
+  --acon-surface: #FFFFFF;
+  --acon-surface-2: #EEF0F3;
+  --acon-line: #E2E5EA;
+  --acon-line-2: #D5D9E0;
+  --acon-text: #14181F;
+  --acon-text-2: #5B6472;
+  --acon-accent: #2B50C8;
+  --acon-accent-soft: #E7ECFA;
+  --acon-accent-text: #1E3A96;
+  --acon-on-accent: #FFFFFF;
+  --acon-ok: #17663F;
+  --acon-ok-soft: #E6F4EC;
+  --acon-warn: #8A4500;
+  --acon-warn-soft: #FFF1E0;
+  --acon-err: #A3261F;
+  --acon-err-soft: #FDECEC;
+  --acon-focus: #2B50C8;
+  --acon-shadow: 0 12px 32px rgb(20 24 31 / 0.14);
+  --acon-space-1: 4px;
+  --acon-space-2: 8px;
+  --acon-space-3: 12px;
+  --acon-space-4: 16px;
+  --acon-space-5: 24px;
+  --acon-space-6: 32px;
+  --acon-radius-1: 6px;
+  --acon-radius-2: 8px;
+  --acon-radius-3: 12px;
+  --acon-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
+  --acon-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --acon-text-2xs: 0.6875rem;
+  --acon-text-xs: 0.75rem;
+  --acon-text-sm: 0.8125rem;
+  --acon-text-md: 0.875rem;
+  --acon-text-base: 0.9375rem;
+  --acon-text-lg: 1rem;
+  --acon-text-xl: 1.0625rem;
+  --acon-text-2xl: 1.375rem;
+  --acon-ease: 160ms cubic-bezier(0.2, 0, 0, 1);
+}
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --acon-bg: #0E1116;
+  --acon-surface: #161A21;
+  --acon-surface-2: #1E232C;
+  --acon-line: #262C36;
+  --acon-line-2: #364050;
+  --acon-text: #E8EBF0;
+  --acon-text-2: #A9B1BE;
+  --acon-accent: #7EA2FF;
+  --acon-accent-soft: #1C2A4F;
+  --acon-accent-text: #A8C0FF;
+  --acon-on-accent: #0E1116;
+  --acon-ok: #7FD3A2;
+  --acon-ok-soft: #10291C;
+  --acon-warn: #F2B66B;
+  --acon-warn-soft: #33240F;
+  --acon-err: #F29A93;
+  --acon-err-soft: #3A1715;
+  --acon-focus: #7EA2FF;
+  --acon-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --acon-bg: #0E1116;
+    --acon-surface: #161A21;
+    --acon-surface-2: #1E232C;
+    --acon-line: #262C36;
+    --acon-line-2: #364050;
+    --acon-text: #E8EBF0;
+    --acon-text-2: #A9B1BE;
+    --acon-accent: #7EA2FF;
+    --acon-accent-soft: #1C2A4F;
+    --acon-accent-text: #A8C0FF;
+    --acon-on-accent: #0E1116;
+    --acon-ok: #7FD3A2;
+    --acon-ok-soft: #10291C;
+    --acon-warn: #F2B66B;
+    --acon-warn-soft: #33240F;
+    --acon-err: #F29A93;
+    --acon-err-soft: #3A1715;
+    --acon-focus: #7EA2FF;
+    --acon-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
+  }
+}
+
+* { box-sizing: border-box; }
+html { -webkit-text-size-adjust: 100%; }
+body {
+  margin: 0;
+  background: var(--acon-bg);
+  color: var(--acon-text);
+  font: var(--acon-text-md)/1.5 var(--acon-font-ui);
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+a { color: var(--acon-accent-text); }
+button, input { font: inherit; color: inherit; }
+kbd, code, .mono { font-family: var(--acon-font-mono); font-size: var(--acon-text-xs); }
+kbd { padding: 0 5px; border: 1px solid var(--acon-line-2); border-radius: 4px; background: var(--acon-surface); color: var(--acon-text-2); }
+:focus-visible { outline: 3px solid var(--acon-focus); outline-offset: 2px; }
+[hidden] { display: none !important; }
+.skip { position: absolute; left: 8px; top: 8px; transform: translateY(calc(-100% - 16px)); padding: 8px 12px; background: var(--acon-surface); border-radius: var(--acon-radius-2); z-index: 10; }
+.skip:focus { transform: none; }
+.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+
+/* Layout */
+.app { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
+.rail { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: var(--acon-space-1); padding: var(--acon-space-3) var(--acon-space-2); background: var(--acon-surface); border-right: 1px solid var(--acon-line); }
+.brand .ic { width: 22px; height: 22px; color: var(--acon-accent); }
+.brand { display: flex; align-items: center; gap: var(--acon-space-2); padding: 6px 10px 14px; color: var(--acon-text); font-weight: 650; font-size: var(--acon-text-base); text-decoration: none; }
+.areas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
+.areas a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: var(--acon-radius-2); color: var(--acon-text-2); text-decoration: none; }
+.areas a:hover { background: var(--acon-surface-2); color: var(--acon-text); }
+.areas a[aria-current="page"] { background: var(--acon-accent-soft); color: var(--acon-accent-text); font-weight: 600; }
+.areas .label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.badge { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--acon-surface-2); color: var(--acon-text); font-size: var(--acon-text-xs); font-weight: 600; text-align: center; }
+.badge.warn { background: var(--acon-warn-soft); color: var(--acon-warn); }
+.column { min-width: 0; display: flex; flex-direction: column; }
+.top { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: var(--acon-space-3); min-height: 56px; padding: 0 var(--acon-space-5); background: var(--acon-surface); border-bottom: 1px solid var(--acon-line); }
+.crumbs { display: flex; align-items: center; gap: var(--acon-space-2); min-width: 0; font-weight: 600; }
+.crumbs > :first-child, .crumbs .sep { flex-shrink: 0; }
+.crumbs .sep { color: var(--acon-text-2); font-weight: 400; }
+.crumbs .sub { color: var(--acon-text-2); font-weight: 400; }
+.search-open { display: flex; align-items: center; gap: var(--acon-space-2); flex: 0 1 360px; min-width: 0; margin-left: auto; min-height: 34px; padding: 0 10px; border: 1px solid var(--acon-line-2); border-radius: var(--acon-radius-2); background: var(--acon-bg); color: var(--acon-text-2); cursor: pointer; text-align: left; }
+.search-open .search-label { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
+.live { display: flex; align-items: center; gap: 6px; color: var(--acon-text-2); font-size: var(--acon-text-sm); white-space: nowrap; }
+.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acon-ok); }
+.live.stale .dot { background: var(--acon-warn); border-radius: 2px; }
+.live.offline .dot { background: var(--acon-err); border-radius: 0; transform: rotate(45deg); }
+.tabs { display: flex; flex-shrink: 0; gap: 4px; padding: 0 var(--acon-space-5); background: var(--acon-surface); border-bottom: 1px solid var(--acon-line); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
+.tabs::before, .tabs::after { content: ""; position: sticky; z-index: 1; flex: 0 0 20px; pointer-events: none; opacity: 0; }
+.tabs::before { left: 0; margin-right: -24px; background: linear-gradient(to right, var(--acon-surface), transparent); }
+.tabs::after { right: 0; margin-left: -24px; background: linear-gradient(to left, var(--acon-surface), transparent); }
+.tabs.more-before::before, .tabs.more-after::after { opacity: 1; }
+.tab { flex: 0 0 auto; max-width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--acon-text-2); cursor: pointer; white-space: normal; overflow-wrap: anywhere; scroll-snap-align: start; }
+.tab[aria-selected="true"] { border-bottom-color: var(--acon-accent); color: var(--acon-accent-text); font-weight: 600; }
+main { flex: 1; min-width: 0; padding: var(--acon-space-5); }
+#main:focus { outline: none; }
+.view { max-width: 1040px; }
+.panel-mount { min-width: 0; }
+@media (min-width: 1240px) { .app.peeking .column { padding-right: 420px; } }
+
+/* Text */
+h1.lead { margin: 0; font-size: var(--acon-text-2xl); font-weight: 650; line-height: 1.3; }
+p.sub { margin: var(--acon-space-1) 0 0; color: var(--acon-text-2); }
+.notice { display: flex; align-items: center; gap: var(--acon-space-2); margin: var(--acon-space-3) 0; padding: var(--acon-space-2) var(--acon-space-3); border-radius: var(--acon-radius-2); background: var(--acon-warn-soft); color: var(--acon-warn); font-size: var(--acon-text-sm); }
+.notice a, .notice button.link { color: inherit; }
+button.link { padding: 0; border: 0; background: none; text-decoration: underline; cursor: pointer; }
+
+/* Buttons and chips */
+.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; max-width: 100%; padding: 0 12px; border: 1px solid var(--acon-line-2); border-radius: var(--acon-radius-2); background: var(--acon-surface); color: var(--acon-text); cursor: pointer; white-space: normal; overflow-wrap: anywhere; transition: background-color var(--acon-ease), border-color var(--acon-ease); }
+.btn:hover { background: var(--acon-surface-2); }
+.btn.primary { border-color: var(--acon-accent); background: var(--acon-accent); color: var(--acon-on-accent); font-weight: 600; }
+.btn.primary:hover { filter: brightness(1.08); }
+.btn.danger { border-color: var(--acon-err); color: var(--acon-err); }
+.btn.danger.primary { background: var(--acon-err); color: var(--acon-on-accent); }
+.btn:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
+.btn kbd { border: 0; background: transparent; color: inherit; opacity: 0.8; padding: 0; }
+.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: var(--acon-radius-2); background: transparent; color: var(--acon-text-2); cursor: pointer; }
+.icon-btn:hover { background: var(--acon-surface-2); color: var(--acon-text); }
+.chip { display: inline-block; max-width: 100%; padding: 1px 8px; border-radius: var(--acon-radius-1); background: var(--acon-surface-2); color: var(--acon-text-2); font-size: var(--acon-text-xs); font-weight: 600; overflow-wrap: anywhere; }
+.chip.ok { background: var(--acon-ok-soft); color: var(--acon-ok); }
+.chip.warn { background: var(--acon-warn-soft); color: var(--acon-warn); }
+.chip.err { background: var(--acon-err-soft); color: var(--acon-err); }
+.chip.accent { background: var(--acon-accent-soft); color: var(--acon-accent-text); }
+
+/* Inbox */
+.group { margin-top: var(--acon-space-5); }
+.group h2 { display: flex; align-items: center; gap: var(--acon-space-2); margin: 0 0 var(--acon-space-2); font-size: var(--acon-text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--acon-text-2); }
+.rows { list-style: none; margin: 0; padding: 0; background: var(--acon-surface); border: 1px solid var(--acon-line); border-radius: var(--acon-radius-3); overflow: hidden; }
+.row { display: flex; align-items: center; gap: var(--acon-space-3); min-height: 52px; padding: 6px var(--acon-space-3) 6px var(--acon-space-2); border-top: 1px solid var(--acon-line); }
+.row:first-child { border-top: 0; }
+.row.selected { background: var(--acon-surface-2); }
+.row-main { display: flex; align-items: center; gap: var(--acon-space-3); flex: 1; min-width: 0; min-height: 40px; padding: 4px 6px; border: 0; border-radius: var(--acon-radius-2); background: transparent; text-align: left; cursor: pointer; }
+.whose { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--acon-surface-2); color: var(--acon-text-2); }
+.whose.you { background: var(--acon-warn-soft); color: var(--acon-warn); }
+.whose.alert { background: var(--acon-err-soft); color: var(--acon-err); }
+.row-text { min-width: 0; display: flex; flex-direction: column; }
+.row-title { font-weight: 600; }
+.row-sub { color: var(--acon-text-2); font-size: var(--acon-text-sm); white-space: normal; }
+.row-verbs { display: flex; flex-wrap: wrap; gap: var(--acon-space-2); flex: none; max-width: 100%; }
+.row:not(.selected) .btn.primary:not(.danger) { border-color: var(--acon-line-2); background: var(--acon-surface); color: var(--acon-accent-text); }
+.empty { margin-top: var(--acon-space-5); padding: var(--acon-space-5); border: 1px dashed var(--acon-line-2); border-radius: var(--acon-radius-3); color: var(--acon-text-2); }
+.empty strong { display: block; color: var(--acon-text); margin-bottom: var(--acon-space-1); }
+
+/* PUBLIC panel kit detail/form classes; shared public rows/buttons/chips are above. */
+.ui-rows .row-main { min-height: 44px; }
+.ui-rows .row-main:focus-visible { outline-offset: -3px; }
+.ui-rows .row-sub { white-space: normal; }
+.ui-notice { background: var(--acon-surface-2); color: var(--acon-text-2); }
+.ui-notice.ok { background: var(--acon-ok-soft); color: var(--acon-ok); }
+.ui-notice.warn { background: var(--acon-warn-soft); color: var(--acon-warn); }
+.ui-notice.err { background: var(--acon-err-soft); color: var(--acon-err); }
+.ui-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--acon-line); border-radius: var(--acon-radius-2); }
+.ui-table-wrap:focus-visible { outline: 2px solid var(--acon-accent); outline-offset: 2px; }
+.ui-table { width: 100%; border-collapse: collapse; font-size: var(--acon-text-sm); font-variant-numeric: tabular-nums; }
+.ui-table caption { padding: var(--acon-space-2) var(--acon-space-3); caption-side: top; text-align: start; font-weight: 600; }
+.ui-table th, .ui-table td { padding: var(--acon-space-2) var(--acon-space-3); border-top: 1px solid var(--acon-line); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
+.ui-table thead th { background: var(--acon-surface-2); color: var(--acon-text-2); font-weight: 600; white-space: nowrap; }
+.ui-table tbody th { font-weight: 500; }
+.ui-table .end { text-align: end; }
+.ui-sort { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
+.ui-sort:focus-visible { outline: 2px solid var(--acon-accent); outline-offset: 2px; }
+.ui-chart { margin: var(--acon-space-3) 0; min-width: 0; }
+.ui-chart figcaption { display: flex; flex-wrap: wrap; gap: var(--acon-space-2); justify-content: space-between; margin-bottom: var(--acon-space-2); font-weight: 600; }
+.ui-bars { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(4rem, 1fr) max-content; gap: var(--acon-space-2) var(--acon-space-3); align-items: center; margin: 0; padding: 0; list-style: none; font-size: var(--acon-text-sm); }
+.ui-bar { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
+.ui-bar-label { overflow-wrap: anywhere; }
+.ui-bar-value { color: var(--acon-text-2); font-variant-numeric: tabular-nums; text-align: end; }
+.ui-bar-svg { display: block; width: 100%; height: 12px; }
+.ui-bar-track { fill: var(--acon-surface-2); }
+.ui-bar-fill { fill: var(--acon-accent); }
+.ui-bar-target { stroke: var(--acon-text); stroke-width: 2px; }
+.ui-spark-summary { color: var(--acon-text-2); font-size: var(--acon-text-sm); font-weight: 400; }
+.ui-spark-svg { display: block; width: 100%; height: 40px; }
+.ui-spark-line { fill: none; stroke: var(--acon-accent); stroke-width: 2px; stroke-linejoin: round; }
+.ui-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+@media (max-width: 600px) {
+  .ui-bars { grid-template-columns: 1fr max-content; }
+  .ui-bar-svg { grid-column: 1 / -1; }
+}
+.ui-img { display: block; max-width: 100%; height: auto; border-radius: var(--acon-radius-2); }
+.ui-frame { display: block; width: 100%; height: min(80vh, 900px); border: 1px solid var(--acon-line); border-radius: var(--acon-radius-2); background: var(--acon-surface); }
+.ui-link { color: var(--acon-accent-text); text-decoration: underline; text-underline-offset: 2px; }
+.ui-link:focus-visible { outline: 2px solid var(--acon-accent); outline-offset: 2px; }
+.ui-review { display: flex; flex-direction: column; gap: var(--acon-space-3); min-width: 0; }
+.ui-review-doc { border: 1px solid var(--acon-line); border-radius: var(--acon-radius-2); background: var(--acon-surface); overflow-x: auto; }
+.ui-review-unit { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: start; border-left: 3px solid transparent; }
+.ui-review-gutter, .ui-review-gutter-pad { min-height: 24px; padding: 2px var(--acon-space-2); border: 0; background: var(--acon-surface-2); color: var(--acon-text-2); font: inherit; font-family: var(--acon-font-mono); font-size: var(--acon-text-xs); text-align: end; cursor: pointer; align-self: stretch; }
+.ui-review-gutter:focus-visible { outline: 2px solid var(--acon-accent); outline-offset: -2px; }
+.ui-review-text { padding: 2px var(--acon-space-3); min-width: 0; }
+.ui-review-src { display: block; min-height: 1.4em; white-space: pre; font-family: var(--acon-font-mono); font-size: var(--acon-text-sm); }
+.ui-review-prose .ui-review-unit { padding: var(--acon-space-2) 0; }
+.ui-review-prose .ui-review-src { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: var(--acon-text-md, 1rem); line-height: 1.6; }
+.ui-review-add { background: var(--acon-ok-soft); }
+.ui-review-del { background: var(--acon-err-soft); }
+.ui-review-hunk, .ui-review-meta { color: var(--acon-text-2); background: var(--acon-surface-2); }
+.ui-review-has-thread { border-left-color: var(--acon-warn); }
+.ui-review-selected { border-left-color: var(--acon-accent); background: var(--acon-accent-soft); }
+.ui-review-mark { margin: 2px var(--acon-space-2); min-height: 24px; padding: 0 var(--acon-space-2); border: 1px solid var(--acon-line-2); border-radius: var(--acon-radius-2); background: var(--acon-warn-soft); color: var(--acon-warn); font: inherit; font-size: var(--acon-text-xs); cursor: pointer; }
+.ui-review-mark:focus-visible { outline: 2px solid var(--acon-accent); outline-offset: 2px; }
+.ui-review-strip { padding: var(--acon-space-3); border: 1px solid var(--acon-line); border-radius: var(--acon-radius-2); background: var(--acon-warn-soft); }
+.ui-review-strip h3 { margin: 0 0 var(--acon-space-2); font-size: var(--acon-text-sm); }
+.ui-review-strip ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--acon-space-2); }
+.ui-review-quote { margin: var(--acon-space-1) 0; padding-left: var(--acon-space-2); border-left: 3px solid var(--acon-line-2); white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--acon-font-mono); font-size: var(--acon-text-xs); }
+.ui-review-thread-body { margin: var(--acon-space-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+.ui-review-thread { padding: var(--acon-space-3) 0; border-top: 1px solid var(--acon-line); }
+.ui-review-status { margin: 0; min-height: 1.4em; color: var(--acon-text-2); font-size: var(--acon-text-sm); }
+.ui-review-box { display: flex; flex-direction: column; gap: var(--acon-space-2); padding: var(--acon-space-3); border: 1px solid var(--acon-line-2); border-radius: var(--acon-radius-2); background: var(--acon-surface); }
+.ui-review-box[hidden] { display: none; }
+.ui-review-target { margin: 0; font-weight: 600; }
+.ui-review-input { width: 100%; min-height: 88px; padding: 6px 10px; border: 1px solid var(--acon-line-2); border-radius: var(--acon-radius-2); background: var(--acon-bg); color: var(--acon-text); font: inherit; resize: vertical; }
+.ui-review-box-actions { display: flex; gap: var(--acon-space-2); }
+.ui-review-box-actions .btn { min-height: 44px; }
+@media (max-width: 600px) { .ui-review-unit { grid-template-columns: 3rem minmax(0, 1fr); } .ui-review-mark { grid-column: 2; justify-self: start; } }
+.ui-visual { margin: var(--acon-space-3) 0; min-width: 0; }
+.ui-visual > figcaption { margin-bottom: var(--acon-space-2); font-weight: 600; }
+.ui-visual-frame { display: block; width: 100%; border: 1px solid var(--acon-line); border-radius: var(--acon-radius-2); background: var(--acon-surface); color-scheme: normal; }
+.ui-visual-loading { visibility: hidden; height: 0; }
+.ui-visual-status { margin: 0; color: var(--acon-text-2); font-size: var(--acon-text-sm); }
+.ui-visual-source, .ui-visual-text { margin: 0; padding: var(--acon-space-3); border: 1px solid var(--acon-line); border-radius: var(--acon-radius-2); background: var(--acon-surface-2); white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--acon-font-mono); font-size: var(--acon-text-sm); }
+.ui-visual-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--acon-space-3); margin: 0; padding: 0; list-style: none; }
+.ui-visual-option { display: flex; flex-direction: column; gap: var(--acon-space-2); padding: var(--acon-space-3); border: 1px solid var(--acon-line); border-radius: var(--acon-radius-3); background: var(--acon-surface); }
+.ui-visual-option.recommended { border: 2px solid var(--acon-ok); border-style: double; border-width: 3px; }
+.ui-visual-option-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--acon-space-2); }
+.ui-visual-option h3 { margin: 0; flex: 1 1 auto; font-size: var(--acon-text-lg, 1.125rem); }
+.ui-visual-option p { margin: 0; }
+.ui-visual-points ul { margin: var(--acon-space-1) 0 0; padding-left: 1.25rem; }
+.ui-visual-points.pros strong { color: var(--acon-ok); }
+.ui-visual-points.cons strong { color: var(--acon-err); }
+.ui-visual-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--acon-space-3); }
+.ui-visual-side { min-width: 0; }
+.ui-visual-side h3 { margin: 0 0 var(--acon-space-2); font-size: var(--acon-text-sm); color: var(--acon-text-2); }
+@media (max-width: 767px) { .ui-visual-pair { grid-template-columns: 1fr; } }
+.ui-form { display: flex; flex-direction: column; align-items: stretch; gap: var(--acon-space-3); }
+.ui-form .btn { align-self: flex-start; min-height: 44px; }
+.ui-field { display: flex; flex-direction: column; gap: var(--acon-space-1); min-width: 0; }
+.ui-field input { width: 100%; min-width: 0; min-height: 44px; padding: 6px 10px; border: 1px solid var(--acon-line-2); border-radius: var(--acon-radius-2); background: var(--acon-bg); }
+.ui-detail { display: flex; flex-direction: column; gap: var(--acon-space-4); min-width: 0; }
+.ui-detail-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--acon-space-2); }
+.ui-detail-head h2 { flex: 1 0 100%; margin: 0; font-size: var(--acon-text-2xl); font-weight: 650; line-height: 1.3; text-wrap: balance; }
+.ui-detail-kind { color: var(--acon-text-2); font-size: var(--acon-text-xs); font-weight: 600; }
+.ui-detail-move { color: var(--acon-text-2); font-size: var(--acon-text-sm); }
+.ui-detail-actions { display: flex; flex-wrap: wrap; gap: var(--acon-space-2); }
+.ui-detail-actions .btn { min-height: 44px; white-space: normal; }
+.ui-detail-summary { margin: 0; white-space: pre-wrap; }
+.ui-provenance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--acon-space-2); margin: 0; padding: var(--acon-space-3); border: 1px solid var(--acon-line); border-radius: var(--acon-radius-2); background: var(--acon-surface-2); font-size: var(--acon-text-sm); }
+.ui-provenance dt { color: var(--acon-text-2); }
+.ui-provenance dd { min-width: 0; margin: 0; }
+.ui-provenance time { display: block; color: var(--acon-text-2); font-variant-numeric: tabular-nums; }
+.ui-detail-section { border-top: 1px solid var(--acon-line); }
+.ui-detail-section > summary { display: list-item; min-height: 44px; padding: var(--acon-space-3) 0; cursor: pointer; font-weight: 600; }
+.ui-detail-body { padding-bottom: var(--acon-space-3); white-space: pre-wrap; }
+.ui-detail-footer { padding-top: var(--acon-space-3); border-top: 1px solid var(--acon-line); color: var(--acon-text-2); overflow-wrap: anywhere; }
+/* PRIVATE shell surfaces resume. Public .card remains available to panel authors. */
+
+/* Cards (System) */
+.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--acon-space-4); margin-top: var(--acon-space-5); }
+.card { min-width: 0; padding: var(--acon-space-4); background: var(--acon-surface); border: 1px solid var(--acon-line); border-radius: var(--acon-radius-3); }
+.card h2 { margin: 0 0 var(--acon-space-3); font-size: var(--acon-text-base); }
+.card.wide { grid-column: 1 / -1; }
+.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--acon-space-4); margin: 0; font-size: var(--acon-text-sm); }
+.kv dt { color: var(--acon-text-2); }
+.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--acon-space-2); font-size: var(--acon-text-sm); }
+.list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--acon-space-2); padding-bottom: var(--acon-space-2); border-bottom: 1px solid var(--acon-line); }
+.list li:last-child { border-bottom: 0; padding-bottom: 0; }
+.list .meta { color: var(--acon-text-2); }
+.segmented { display: inline-flex; border: 1px solid var(--acon-line-2); border-radius: var(--acon-radius-2); overflow: hidden; }
+.segmented button { min-height: 32px; padding: 0 12px; border: 0; border-left: 1px solid var(--acon-line-2); background: var(--acon-surface); cursor: pointer; }
+.segmented button:first-child { border-left: 0; }
+.segmented button[aria-pressed="true"] { background: var(--acon-accent-soft); color: var(--acon-accent-text); font-weight: 600; }
+
+/* Sheet (peek) */
+.sheet { position: fixed; z-index: 20; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); display: flex; flex-direction: column; background: var(--acon-surface); border-left: 1px solid var(--acon-line); box-shadow: var(--acon-shadow); }
+.sheet-head { display: flex; align-items: center; gap: var(--acon-space-2); min-height: 56px; padding: 0 var(--acon-space-2) 0 var(--acon-space-4); border-bottom: 1px solid var(--acon-line); }
+.sheet-head h2 { flex: 1; min-width: 0; margin: 0; padding: 8px 0; font-size: var(--acon-text-xl); font-weight: 650; }
+.sheet-body { flex: 1; overflow-y: auto; padding: var(--acon-space-4); display: flex; flex-direction: column; gap: var(--acon-space-4); }
+.sheet-body .detail { margin: 0; white-space: pre-wrap; }
+/* Inbox answers and results (#27) */
+.answer-form { display: flex; flex-direction: column; gap: var(--acon-space-3); }
+.answer-q { margin: 0; padding: var(--acon-space-3); border: 1px solid var(--acon-line); border-radius: var(--acon-radius-2); min-width: 0; }
+.answer-q legend { display: flex; flex-direction: column; gap: var(--acon-space-1); float: left; width: 100%; margin-bottom: var(--acon-space-2); padding: 0; }
+.answer-q legend + * { clear: both; }
+.answer-q legend small, .answer-label small { color: var(--acon-text-2); font-size: var(--acon-text-sm); }
+.answer-opt { display: flex; align-items: flex-start; gap: var(--acon-space-2); min-height: 44px; padding: var(--acon-space-1) 0; cursor: pointer; }
+.answer-opt input[type="radio"], .answer-opt input[type="checkbox"] { flex: none; width: 1.1rem; height: 1.1rem; margin: 0.15rem 0 0; accent-color: var(--acon-accent); }
+.answer-opt input:focus-visible { outline: 2px solid var(--acon-focus); outline-offset: 2px; }
+.answer-label { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
+.answer-other { flex-direction: column; align-items: stretch; cursor: default; }
+.answer-other-text { min-height: 44px; padding: 0 var(--acon-space-2); border: 1px solid var(--acon-line-2); border-radius: var(--acon-radius-2); background: var(--acon-surface); color: var(--acon-text); font: inherit; }
+.answer-error { margin: 0; color: var(--acon-err); }
+.answer-error:empty { display: none; }
+.answer-review h3 { margin: 0; font-size: var(--acon-text-md); }
+.group h2 .group-command { margin-inline-start: auto; min-height: 32px; font-size: var(--acon-text-sm); font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--acon-text); }
+.seen-end { display: block; height: 1px; }
+.sheet-verbs { display: flex; flex-wrap: wrap; gap: var(--acon-space-2); }
+.reason-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--acon-space-2); flex: 1 0 100%; }
+.row:has(> .reason-row) { flex-wrap: wrap; }
+.row > .reason-row { padding: 0 0 4px 46px; }
+.reason-row input { flex: 1 1 200px; min-width: 0; min-height: 36px; padding: 0 10px; border: 1px solid var(--acon-line-2); border-radius: var(--acon-radius-2); background: var(--acon-bg); }
+.reason-row input[aria-invalid="true"] { border-color: var(--acon-err); }
+.reason-error { flex: 1 0 100%; color: var(--acon-err); font-size: var(--acon-text-sm); }
+.reason-error:empty { display: none; }
+
+/* Dialogs */
+dialog { padding: 0; border: 1px solid var(--acon-line); border-radius: var(--acon-radius-3); background: var(--acon-surface); color: var(--acon-text); box-shadow: var(--acon-shadow); width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
+dialog::backdrop { background: rgb(14 17 22 / 0.4); }
+.dialog-body { padding: var(--acon-space-5); display: flex; flex-direction: column; gap: var(--acon-space-3); overflow-y: auto; }
+.dialog-body h2 { margin: 0; font-size: var(--acon-text-xl); }
+.dialog-body h3 { margin: var(--acon-space-2) 0 0; font-size: var(--acon-text-sm); color: var(--acon-text-2); font-weight: 600; }
+.dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--acon-space-2); padding: var(--acon-space-3) var(--acon-space-5); border-top: 1px solid var(--acon-line); }
+.changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.changes li { display: flex; align-items: baseline; gap: var(--acon-space-2); min-width: 0; }
+.changes .sub { color: var(--acon-text-2); font-size: var(--acon-text-sm); }
+.changes .target { font-family: var(--acon-font-mono); font-size: var(--acon-text-xs); overflow-wrap: anywhere; }
+.warnings { margin: 0; padding: var(--acon-space-2) var(--acon-space-3) var(--acon-space-2) 28px; border-radius: var(--acon-radius-2); background: var(--acon-warn-soft); color: var(--acon-warn); font-size: var(--acon-text-sm); }
+details.preview summary { cursor: pointer; color: var(--acon-text-2); font-size: var(--acon-text-sm); }
+details.preview pre { max-height: 240px; overflow: auto; margin: var(--acon-space-2) 0 0; padding: var(--acon-space-3); border-radius: var(--acon-radius-2); background: var(--acon-bg); font-family: var(--acon-font-mono); font-size: var(--acon-text-xs); white-space: pre-wrap; }
+.validity { margin: 0; color: var(--acon-text-2); font-size: var(--acon-text-sm); }
+.validity.expired { color: var(--acon-err); }
+.typed input { width: 100%; min-height: 36px; margin-top: 6px; padding: 0 10px; border: 1px solid var(--acon-line-2); border-radius: var(--acon-radius-2); background: var(--acon-bg); }
+.palette { margin-top: 12vh; width: min(640px, calc(100vw - 32px)); }
+.palette-field { padding: var(--acon-space-3); border-bottom: 1px solid var(--acon-line); }
+.palette-field input { width: 100%; min-height: 40px; padding: 0 var(--acon-space-3); border: 0; background: transparent; font-size: var(--acon-text-lg); outline: none; }
+#palette-list { list-style: none; margin: 0; padding: var(--acon-space-2); max-height: 52vh; overflow-y: auto; }
+#palette-list .heading { padding: var(--acon-space-2) var(--acon-space-2) 4px; font-size: var(--acon-text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--acon-text-2); }
+#palette-list [role="option"] { display: flex; align-items: center; gap: var(--acon-space-3); min-height: 40px; padding: 4px var(--acon-space-2); border-radius: var(--acon-radius-2); cursor: pointer; }
+#palette-list [role="option"][aria-selected="true"] { background: var(--acon-accent-soft); color: var(--acon-accent-text); }
+#palette-list .opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+#palette-list .opt-title { white-space: normal; }
+#palette-list .opt-sub { font-size: var(--acon-text-xs); color: var(--acon-text-2); white-space: normal; }
+#palette-list .none { padding: var(--acon-space-3); color: var(--acon-text-2); }
+.palette-hint { margin: 0; padding: var(--acon-space-2) var(--acon-space-4); border-top: 1px solid var(--acon-line); color: var(--acon-text-2); font-size: var(--acon-text-xs); }
+.keys table { width: 100%; border-collapse: collapse; font-size: var(--acon-text-sm); }
+.keys td { padding: 6px 0; border-bottom: 1px solid var(--acon-line); }
+.keys td:first-child { width: 40%; }
+
+/* Toasts */
+.toasts { position: fixed; z-index: 40; left: 50%; bottom: var(--acon-space-5); transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--acon-space-2); width: min(480px, calc(100vw - 32px)); pointer-events: none; }
+.toast { display: flex; align-items: center; gap: var(--acon-space-3); padding: 10px var(--acon-space-3) 10px var(--acon-space-4); border-radius: var(--acon-radius-2); background: var(--acon-text); color: var(--acon-bg); box-shadow: var(--acon-shadow); pointer-events: auto; }
+.toast span { flex: 1; }
+.toast.err { background: var(--acon-err-soft); color: var(--acon-err); border: 1px solid var(--acon-err); }
+.toast .btn { min-height: 28px; border-color: currentColor; background: transparent; color: inherit; }
+
+.ended { max-width: 520px; margin: 12vh auto 0; text-align: center; }
+
+/* Phone: bottom tabs, bottom sheet, 44 px targets */
+/* Pet and Mini. Sheets are Codex v2: 8x11 cells of 192x208; rows 0 idle, 5 failed, 6 waiting, 8 review. */
+.pet { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 4px; border: 0; border-radius: var(--acon-radius-2); background: transparent; color: var(--acon-text); cursor: pointer; }
+.pet:hover { background: var(--acon-surface-2); }
+.pet-sprite { --cell-w: 36px; --cell-h: 39px; --row: 0; flex: none; width: var(--cell-w); height: var(--cell-h); background-image: var(--pet-sheet); background-repeat: no-repeat; background-size: calc(var(--cell-w) * 8) calc(var(--cell-h) * 11); background-position: 0 calc(var(--cell-h) * var(--row) * -1); }
+.pet-sprite.large { --cell-w: 96px; --cell-h: 104px; }
+.pet-sprite[data-pose="failed"] { --row: 5; animation: pet-8 1.2s steps(8) infinite; }
+.pet-sprite[data-pose="waiting"] { --row: 6; animation: pet-6 0.9s steps(6) infinite; }
+.pet-sprite[data-pose="review"] { --row: 8; animation: pet-6 0.9s steps(6) infinite; }
+@keyframes pet-6 { to { background-position-x: calc(var(--cell-w) * -6); } }
+@keyframes pet-8 { to { background-position-x: calc(var(--cell-w) * -8); } }
+.card-sub { margin: var(--acon-space-4) 0 var(--acon-space-2); font-size: var(--acon-text-sm); font-weight: 600; }
+.segmented { flex-wrap: wrap; max-width: 100%; }
+.app.mini-mode { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
+.app.mini-mode .rail, .app.mini-mode .top, .app.mini-mode .tabs { display: none; }
+.app.mini-mode main, body.pip { padding: var(--acon-space-4); }
+body.pip { margin: 0; overflow-y: auto; }
+.mini { max-width: 480px; }
+.mini-head { display: flex; align-items: center; gap: var(--acon-space-3); }
+.mini-head h1.lead { font-size: var(--acon-text-xl); }
+.mini-list { display: flex; flex-direction: column; gap: var(--acon-space-2); margin: var(--acon-space-4) 0 0; padding: 0; list-style: none; }
+.mini-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--acon-space-2); padding: var(--acon-space-2) var(--acon-space-3); border: 1px solid var(--acon-line); border-radius: var(--acon-radius-2); background: var(--acon-surface); }
+.mini-item .row-text { display: flex; flex-direction: column; flex: 1 1 14ch; min-width: 0; }
+.mini-item .row-title { overflow-wrap: anywhere; }
+.mini-item .row-sub { color: var(--acon-text-2); font-size: var(--acon-text-sm); }
+.mini-verbs { display: flex; flex-wrap: wrap; gap: var(--acon-space-2); }
+.mini-foot { display: flex; flex-wrap: wrap; gap: var(--acon-space-2); margin-top: var(--acon-space-4); }
+.mini .btn { min-height: 40px; }
+
+/* PRIVATE Space scene. Public facts only; the roster remains the text equivalent. */
+.space-content { display: flex; flex-direction: column; gap: var(--acon-space-4); margin-top: var(--acon-space-4); min-width: 0; }
+.space-scroll { overflow: auto; max-width: 100%; max-height: 70vh; border: 1px solid var(--acon-line); border-radius: var(--acon-radius-3); background: var(--acon-bg); }
+.space-plane { position: relative; width: 100%; min-width: 1000px; min-height: 240px; background-color: var(--acon-bg); background-image: var(--space-floor, none), linear-gradient(135deg, var(--acon-line) 1px, transparent 1px); background-size: 64px 32px; }
+.space-wall { position: absolute; inset: 0 0 auto; height: 20px; background-color: var(--acon-surface-2); background-image: var(--space-wall, none); background-size: contain; }
+.space-actor { position: absolute; left: 0; top: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--acon-space-1); width: 180px; min-height: 44px; padding: var(--acon-space-2); font: inherit; color: var(--acon-text); background: var(--acon-surface); border: 1px solid var(--acon-line-2); border-radius: var(--acon-radius-2); cursor: pointer; overflow-wrap: anywhere; }
+.space-actor strong { max-width: 100%; font-weight: 600; }
+.space-actor .row-sub { width: 100%; }
+.space-actor[data-state="waiting"] { border-color: var(--acon-warn); }
+.space-actor[data-state="blocked"] { border-color: var(--acon-err); }
+.space-actor[data-state="away"], .space-actor[data-stale="true"] { border-style: dashed; }
+.space-actor:focus-visible, .space-card:focus-visible { outline-offset: -3px; }
+.space-visual { display: flex; flex-direction: column; align-items: center; width: 112px; min-height: 176px; padding: var(--acon-space-2); border: 1px solid var(--acon-line); border-radius: var(--acon-radius-2); background: var(--acon-surface-2); }
+.space-visual .pet-sprite { --cell-w: 72px; --cell-h: 78px; }
+/* Artwork remains legible on a light tile when the surrounding UI is dark. */
+:root[data-theme="dark"] .space-visual { background: var(--acon-text); }
+@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .space-visual { background: var(--acon-text); } }
+.space-desk { display: block; width: 64px; height: 82px; background-image: var(--space-desk, none); background-position: center bottom; background-size: contain; background-repeat: no-repeat; border-bottom: 2px solid var(--acon-line-2); }
+.space-plane[data-pack="fallback"] .space-desk { background-color: var(--acon-surface-2); border: 1px solid var(--acon-line-2); }
+.space-token { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 78px; border: 1px solid var(--acon-line-2); border-radius: var(--acon-radius-2); color: var(--acon-accent-text); background: var(--acon-accent-soft); font-weight: 600; }
+.space-marks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--acon-space-1); max-width: 100%; }
+.space-zone { position: absolute; left: 0; top: 0; width: 234px; border: 1px solid var(--acon-line-2); border-radius: var(--acon-radius-2); background-color: var(--acon-surface-2); background-image: var(--space-furniture, none); background-position: right 8px top 8px; background-size: 36px 36px; background-repeat: no-repeat; }
+.space-zone h2 { margin: 0; padding: var(--acon-space-2) 48px var(--acon-space-2) var(--acon-space-2); font-size: var(--acon-text-sm); overflow-wrap: anywhere; }
+.space-card { position: absolute; left: 0; top: 0; z-index: 2; width: 214px; min-height: 44px; padding: var(--acon-space-2); border: 1px solid var(--acon-line-2); border-radius: var(--acon-radius-1); background: var(--acon-surface); color: var(--acon-text); font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; transition: transform 0.8s ease; }
+.space-card[data-tone="warn"] { border-color: var(--acon-warn); }
+.space-card[data-tone="err"] { border-color: var(--acon-err); }
+.space-plane[data-settle="true"] .space-card { transition: none; }
+.space-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items: start; gap: var(--acon-space-2); min-width: 0; }
+.space-roster-actor.btn { min-height: 44px; justify-content: flex-start; text-align: left; }
+.space-roster-zone { margin: 0; font-size: var(--acon-text-sm); color: var(--acon-text-2); }
+.space-link { position: absolute; left: 0; top: 0; z-index: 1; border-top: 2px dashed var(--acon-accent); transform-origin: left center; pointer-events: none; }
+/* The full relationship label is in the roster, never obscured behind scene actors. */
+.space-link-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+.space-roster-link { grid-column: 1 / -1; margin: 0; font-size: var(--acon-text-sm); color: var(--acon-text-2); overflow-wrap: anywhere; }
+.space-roster-link[data-kind="message"] { animation: space-message 10s linear both; }
+.space-link[data-kind="conflict"] { border-color: var(--acon-err); }
+.space-link[data-kind="message"] { opacity: 0; animation: space-message 10s linear both; }
+.pet-sprite[data-pose="working"] { --row: 7; animation: pet-6 0.9s steps(6) infinite; }
+@keyframes space-message { 0%, 85% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
+
+/* Tablet: icon rail */
+@media (min-width: 721px) and (max-width: 1023px) {
+  .app { grid-template-columns: 64px minmax(0, 1fr); }
+  .brand { justify-content: center; padding: 6px 0 14px; }
+  .brand span, .areas .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  .areas a { justify-content: center; min-height: 44px; padding: 0; position: relative; }
+  .areas .badge { position: absolute; top: 2px; right: 2px; min-width: 18px; padding: 0 4px; font-size: var(--acon-text-2xs); }
+  .top, .tabs { padding-left: var(--acon-space-4); padding-right: var(--acon-space-4); }
+  main { padding: var(--acon-space-4); }
+}
+@media (max-width: 720px) {
+  .space-roster { order: -1; grid-template-columns: minmax(0, 1fr); }
+  body { font-size: var(--acon-text-lg); }
+  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; height: 100dvh; }
+  .column { grid-row: 1; min-height: 0; overflow-y: auto; }
+  .rail { position: static; grid-row: 2; z-index: 15; height: auto; flex-direction: row; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--acon-line); }
+  .brand { display: none; }
+  .areas { flex-direction: row; flex: 1; gap: 0; overflow-x: auto; }
+  .areas li { flex: 1 0 64px; }
+  .areas a { flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 2px 4px; font-size: var(--acon-text-2xs); position: relative; }
+  .areas .label { flex: none; max-width: 100%; }
+  .areas .badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; padding: 0 4px; font-size: var(--acon-text-2xs); }
+  .top { padding: 6px var(--acon-space-4); padding-top: calc(6px + env(safe-area-inset-top)); gap: var(--acon-space-2); }
+  .search-open { flex: 0 0 44px; width: 44px; min-height: 44px; justify-content: center; padding: 0; }
+  .search-open .search-label, .search-open kbd { display: none; }
+  #mini-open { width: 44px; height: 44px; }
+  .pet { min-height: 44px; }
+  .tabs { padding: 0 var(--acon-space-2); }
+  .tab { min-height: 44px; }
+  main { padding: var(--acon-space-4); }
+  .row { flex-wrap: wrap; padding: var(--acon-space-2) var(--acon-space-3); }
+  .row-main { flex: 1 0 100%; flex-wrap: wrap; min-height: 44px; }
+  .row-main > .row-text { flex: 1 1 calc(100% - 52px); }
+  .row-main > .chip { flex: none; margin-left: 40px; }
+  .row-verbs { width: 100%; padding-left: 46px; }
+  .row:not(:has(.row-verbs button)) > .row-main { flex: 1; }
+  .row-verbs:not(:has(button)) { width: auto; padding-left: 0; }
+  .row-verbs .btn, .sheet-verbs .btn, .dialog-foot .btn { flex: 1 1 8ch; min-height: 44px; }
+  .reason-row input { min-height: 44px; }
+  .btn kbd { display: none; }
+  .sheet { top: auto; left: 0; width: 100%; max-height: 85dvh; border-left: 0; border-top: 1px solid var(--acon-line); border-radius: var(--acon-radius-3) var(--acon-radius-3) 0 0; padding-bottom: env(safe-area-inset-bottom); }
+  .toasts { bottom: calc(80px + env(safe-area-inset-bottom)); }
+  .palette { margin-top: 8px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
+}
+
+/* Private shell Space cameras. Room uses a real transform hierarchy, without WebGL. */
+.space-view-bar, .space-view-choices, .space-camera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--acon-space-2); }
+.space-view-bar { gap: var(--acon-space-4); margin-top: var(--acon-space-3); }
+.space-view-choices .btn[aria-pressed="true"] { color: var(--acon-accent-text); background: var(--acon-accent-soft); border-color: var(--acon-accent); }
+.space-stage { position: relative; min-width: 100%; }
+[data-space-view="room"] .space-scroll { perspective: 4000px; perspective-origin: center 240px; }
+[data-space-view="room"] .space-stage, [data-space-view="room"] .space-plane { transform-style: preserve-3d; }
+[data-space-view="room"] .space-plane { position: absolute; top: 0; left: 0; transform-origin: 0 0; transition: transform .3s ease; }
+[data-space-view="room"] .space-wall { height: 80px; transform: rotateX(-90deg); transform-origin: top; backface-visibility: visible; }
+[data-space-view="room"] .space-plane::after { content: ""; position: absolute; left: 0; top: 0; width: 80px; height: 100%; background: var(--acon-surface-2); border: 1px solid var(--acon-line); transform: rotateY(90deg); transform-origin: left; }
+[data-space-view="room"] .space-actor, [data-space-view="room"] .space-card { z-index: auto; transform-origin: 0 0; transition: none; backface-visibility: visible; }
+[data-space-view="room"] .space-desk { box-shadow: 4px 4px 0 var(--acon-line-2); }
+.space-webgl { position: absolute; inset: 0; }
+.space-webgl canvas { display: block; width: 100%; height: 100%; touch-action: none; }
+[data-space-view="3d"] .space-plane { background: transparent; min-height: 0; pointer-events: none; }
+[data-space-view="3d"] .space-scroll { overflow: hidden; perspective: none; }
+[data-space-view="3d"]:not([data-space-measuring]) .space-wall, [data-space-view="3d"]:not([data-space-measuring]) .space-zone, [data-space-view="3d"]:not([data-space-measuring]) .space-link { display: none; }
+[data-space-view="3d"]:not([data-space-measuring]) .space-actor, [data-space-view="3d"]:not([data-space-measuring]) .space-card { pointer-events: auto; transition: none; width: 44px; height: 44px; min-height: 44px; padding: 0; color: transparent; background: transparent; border: 1px dashed var(--acon-line-2); opacity: 1; }
+[data-space-view="3d"]:not([data-space-measuring]) .space-actor > * { visibility: hidden; }
+.space-selection { overflow-wrap: anywhere; }
+[data-space-view="3d"]:not([data-space-measuring]) .space-card-label { visibility: hidden; }
+@media (prefers-reduced-motion: reduce) { [data-space-view="room"] .space-plane { transition: none; } }