@3sln/trove 0.0.2

package/packages/web/src/styles.css

@@ -0,0 +1,1382 @@
+/* Trove workbench theme. Three palettes via [data-theme]; everything else keys
+   off the CSS custom properties so components never hardcode a color. Tuned for
+   a calm, dense, professional feel — a real tool, not a toy. */
+
+:root {
+  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, Consolas, monospace;
+  --radius: 8px;
+  --radius-sm: 5px;
+  --activity-w: 52px;
+  --sidebar-w: 280px;
+  --statusbar-h: 24px;
+  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+  /* Focus is one colour and one halo everywhere, so a keyboard user learns a single
+     cue rather than a different one per component. */
+  --focus: var(--accent);
+  --focus-halo: color-mix(in srgb, var(--accent) 32%, transparent);
+}
+
+:root, :root[data-theme='dark'] {
+  --bg: #181a1f;
+  --bg-elevated: #1f2228;
+  --bg-sidebar: #1b1d23;
+  --bg-activity: #16181d;
+  --bg-input: #12141a;
+  --bg-hover: #ffffff0d;
+  --bg-active: #ffffff14;
+  --bg-selected: #2d6fd128;
+  --border: #ffffff14;
+  --border-strong: #ffffff26;
+  --text: #d7dce5;
+  --text-dim: #9aa4b2;
+  --text-faint: #6b7280;
+  --accent: #6ea8fe;
+  --accent-2: #a679f0;
+  --accent-text: #0b1020;
+  --danger: #f2607a;
+  --warn: #e5b567;
+  --success: #6cc48a;
+  --shadow: 0 12px 40px -8px #000000a8, 0 2px 8px -2px #0008;
+  --scrollbar: #ffffff22;
+}
+
+:root[data-theme='midnight'] {
+  --bg: #0c0e14;
+  --bg-elevated: #12151e;
+  --bg-sidebar: #0e111a;
+  --bg-activity: #090b11;
+  --bg-input: #080a10;
+  --bg-hover: #ffffff0a;
+  --bg-active: #ffffff12;
+  --bg-selected: #4b7bff22;
+  --border: #ffffff10;
+  --border-strong: #ffffff1f;
+  --text: #cdd6f4;
+  --text-dim: #8b95b0;
+  --text-faint: #5a6482;
+  --accent: #89b4fa;
+  --accent-2: #cba6f7;
+  --danger: #f38ba8;
+  --warn: #f9e2af;
+  --success: #a6e3a1;
+  --shadow: 0 16px 50px -10px #000000cc, 0 2px 10px -2px #000a;
+  --scrollbar: #ffffff1a;
+}
+
+:root[data-theme='light'] {
+  --bg: #f6f7f9;
+  --bg-elevated: #ffffff;
+  --bg-sidebar: #eef0f3;
+  --bg-activity: #e6e9ee;
+  --bg-input: #ffffff;
+  --bg-hover: #0000000a;
+  --bg-active: #00000012;
+  --bg-selected: #2d6fd11f;
+  --border: #00000014;
+  --border-strong: #00000024;
+  --text: #1c2430;
+  --text-dim: #55606f;
+  --text-faint: #8a95a4;
+  --accent: #2d6fd1;
+  --accent-2: #7c50c8;
+  --accent-text: #ffffff;
+  --danger: #d63b5b;
+  --warn: #b3801f;
+  --success: #2f9e57;
+  --shadow: 0 12px 40px -10px #0000002e, 0 2px 8px -3px #0000001f;
+  --scrollbar: #00000026;
+}
+
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; }
+/* No grey flash on tap. Mobile WebKit and Chrome paint a translucent block over any
+   element it considers clickable the moment a finger lands on it — a rectangle that
+   ignores border-radius, so a round icon button flashes square, and a row flashes
+   before its own :active styling has a chance to say anything. Every control here
+   already answers a press with its own hover/active vocabulary, so the browser's
+   version is a second, uglier one. Set on the elements themselves rather than just
+   the root: the property inherits, but a UA stylesheet rule on buttons and links
+   overrides an inherited value. */
+* , *::before, *::after { -webkit-tap-highlight-color: transparent; }
+body {
+  font-family: var(--font-ui);
+  font-size: 13px;
+  color: var(--text);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  overflow: hidden;
+}
+/* A full reset, not a partial one. Inheriting only font/colour left every button that
+   didn't name its own background wearing the UA's `ButtonFace` — a light-grey 3D box
+   with `var(--text)` on it, i.e. light-on-light in the dark theme. It stayed invisible
+   for as long as every button in the app happened to be styled, and surfaced the moment
+   one wasn't: turning context-menu rows into real <button>s made every menu in the app
+   unreadable. `.btn` and friends set their own background and border below. */
+button {
+  font: inherit; color: inherit; cursor: pointer;
+  background: none; border: 0; text-align: inherit;
+}
+input, select, textarea { font: inherit; color: inherit; }
+::selection { background: var(--accent); color: var(--accent-text); }
+
+/* ---- Keyboard focus -------------------------------------------------------
+   Keyboard only, never on a mouse click. Two rules govern everything below.
+
+   A focus style may not change an element's SHAPE. The old base rule set
+   `border-radius: 3px`, which snapped every pill button and rounded row to near-square
+   the moment it was focused — a jolt that reads as breakage rather than as a cursor.
+
+   And a ring is the FALLBACK, not the goal. Where an element can show focus in its own
+   vocabulary — a field that lights up, a row that gets the same accent bar as the
+   selected one — that reads better and is never removed without a replacement. Anything
+   not named below still gets the ring, which is the point of keeping it. */
+:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+  /* deliberately no border-radius: outline already follows the element's own */
+}
+:focus:not(:focus-visible) { outline: none; }
+
+/* Buttons: the border becomes the indicator, with a soft halo around it. Hugs whatever
+   radius the button already has, because a box-shadow ring always does. */
+.btn:focus-visible {
+  outline: none;
+  border-color: var(--focus);
+  box-shadow: 0 0 0 3px var(--focus-halo);
+}
+.btn.primary:focus-visible { box-shadow: 0 0 0 3px var(--focus-halo); }
+
+/* Icon-only buttons have no border to light up, so the halo does the work. */
+.iconbtn:focus-visible, .act-action:focus-visible, .launch-clear:focus-visible,
+.pb-status:focus-visible, .pb-brand:focus-visible, .vn-back:focus-visible,
+.c-link:focus-visible, .react:focus-visible {
+  outline: none;
+  color: var(--text);
+  background: var(--bg-active);
+  box-shadow: 0 0 0 2px var(--focus-halo);
+}
+
+/* The search field. The input itself is borderless — the BOX around it is the control,
+   so that is what lights up. Without this, tabbing into the drive's primary input
+   showed nothing at all: the input suppressed its own outline and nothing replaced it. */
+.launch-box:focus-within {
+  border-color: var(--focus);
+  box-shadow: var(--shadow), 0 0 0 3px var(--focus-halo);
+}
+.launch-input:focus-visible { outline: none; }
+
+/* A file row. It already has a vocabulary for "this one" — the selected background —
+   so focus uses it plus an accent edge, which distinguishes keyboard focus from the
+   launcher's own highlighted index without adding a second visual language. */
+.launch-item:focus-visible, .sheet-row:focus-visible, .inbox-item:focus-visible {
+  outline: none;
+  background: var(--bg-selected);
+  box-shadow: inset 3px 0 0 0 var(--focus), 0 0 0 1px var(--focus-halo);
+}
+
+/* Rail items already draw an accent bar when active; focus borrows it. */
+.activitybar .item:focus-visible {
+  outline: none;
+  color: var(--text);
+  background: var(--bg-active);
+  /* The halo is what makes focus legible on the item that is ALREADY active — without
+     it, focusing the current destination changed nothing at all. */
+  box-shadow: 0 0 0 2px var(--focus-halo);
+}
+.activitybar .item:focus-visible::before {
+  content: ''; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 3px;
+  border-radius: 0 3px 3px 0; background: linear-gradient(var(--accent), var(--accent-2));
+}
+.activitybar .brand-mark:focus-visible { outline: none; background: var(--bg-active); box-shadow: 0 0 0 2px var(--focus-halo); }
+
+/* Phone tabs: a bar above the icon, matching where the eye already looks for "current". */
+.pb-tab:focus-visible {
+  outline: none;
+  color: var(--accent);
+  box-shadow: inset 0 3px 0 0 var(--focus);
+}
+
+/* Status-bar segments are short and inline; a filled background reads better than a
+   ring squeezed between neighbours. */
+.statusbar .seg:focus-visible {
+  outline: none;
+  background: var(--bg-active);
+  color: var(--text);
+  box-shadow: inset 0 -2px 0 0 var(--focus);
+}
+
+/* Text inside prose keeps a ring — there is no box to light up — but offset so it
+   clears the descenders instead of cutting through them. */
+.md a:focus-visible, .link:focus-visible, .launch-up:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 3px;
+  border-radius: 3px;
+}
+.lh-example:focus-visible {
+  outline: none;
+  border-color: var(--focus);
+  box-shadow: 0 0 0 3px var(--focus-halo);
+}
+
+::-webkit-scrollbar { width: 11px; height: 11px; }
+::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
+::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; }
+
+.workbench { height: 100%; }
+
+/* ---- Shell layout -------------------------------------------------------- */
+.shell {
+  display: grid;
+  grid-template-rows: 1fr var(--statusbar-h);
+  height: 100vh;
+  height: 100dvh;
+}
+.body {
+  display: grid;
+  grid-template-columns: var(--activity-w) 1fr;
+  min-height: 0;
+  overflow: hidden;
+}
+
+kbd {
+  font-family: var(--font-ui); font-size: 10.5px; color: var(--text-dim);
+  background: var(--bg-hover); border: 1px solid var(--border);
+  border-radius: 4px; padding: 1px 5px; min-width: 16px; text-align: center;
+}
+
+/* A shortcut you can click to change. It looks like the label it replaces until you
+   reach it, then says plainly that it is waiting for keys. */
+.kbd-edit {
+  display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px;
+  border: 1px solid transparent; border-radius: 6px; background: none;
+  color: var(--text-dim); font: inherit; cursor: pointer;
+}
+.kbd-edit:hover { border-color: var(--border); background: var(--bg-hover); }
+.kbd-edit:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-halo); }
+.kbd-clash { display: inline-flex; align-items: center; color: var(--warn); margin-right: 4px; }
+.kbd-edit.clash kbd { border-color: color-mix(in srgb, var(--warn) 50%, transparent); color: var(--warn); }
+.kbd-edit.listening {
+  border-color: var(--accent); background: var(--bg-active); color: var(--accent);
+  font-size: 11px; padding: 3px 8px;
+}
+
+/* ---- Activity bar (the left rail) --------------------------------------- */
+.activitybar {
+  display: flex; flex-direction: column; align-items: center; gap: 4px;
+  padding: 8px 0 10px; background: var(--bg-activity); border-right: 1px solid var(--border);
+}
+.activitybar .brand-mark {
+  width: 40px; height: 40px; border: 0; background: transparent; border-radius: 10px;
+  display: grid; place-items: center; margin-bottom: 6px; cursor: pointer;
+  transition: background .12s var(--ease), transform .12s var(--ease);
+}
+.activitybar .brand-mark img { width: 24px; height: 24px; }
+.activitybar .brand-mark:hover { background: var(--bg-hover); }
+.activitybar .brand-mark:active { transform: translateY(1px); }
+.activitybar .item {
+  position: relative; width: 40px; height: 40px; border: 0; background: transparent;
+  color: var(--text-faint); border-radius: 9px; display: grid; place-items: center;
+  transition: color .12s var(--ease), background .12s var(--ease);
+}
+.activitybar .item:hover { color: var(--text); background: var(--bg-hover); }
+.activitybar .item.active { color: var(--text); background: var(--bg-active); }
+.activitybar .item.active::before {
+  content: ''; position: absolute; left: -6px; top: 8px; bottom: 8px; width: 3px;
+  border-radius: 0 3px 3px 0; background: linear-gradient(var(--accent), var(--accent-2));
+}
+.activitybar .item .badge {
+  position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px; padding: 0 3px;
+  background: var(--accent); color: var(--accent-text); border-radius: 8px;
+  font-size: 9.5px; font-weight: 700; display: grid; place-items: center;
+}
+.activitybar .spacer { flex: 1; }
+/* Bottom-cluster controls (notifications, principal) styled to match nav items. */
+.activitybar .bell-wrap { display: grid; place-items: center; }
+.activitybar .iconbtn { width: 40px; height: 40px; border-radius: 9px; color: var(--text-faint); }
+.activitybar .iconbtn:hover { color: var(--text); background: var(--bg-hover); }
+.activitybar .principal { margin: 4px 0 0; cursor: default; }
+
+/* ---- Sidebar ------------------------------------------------------------- */
+.sidebar {
+  width: var(--sidebar-w); min-width: 0; background: var(--bg-sidebar);
+  border-right: 1px solid var(--border); display: flex; flex-direction: column;
+  overflow: hidden;
+}
+.sidebar .head {
+  display: flex; align-items: center; gap: 6px; padding: 10px 12px 8px;
+  text-transform: uppercase; font-size: 11px; letter-spacing: .6px; color: var(--text-dim); font-weight: 600;
+}
+.sidebar .head .actions { margin-left: auto; display: flex; gap: 2px; }
+.sidebar .scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }
+
+.iconbtn {
+  width: 26px; height: 26px; border: 0; background: transparent; color: var(--text-dim);
+  border-radius: 6px; display: grid; place-items: center; transition: all .12s var(--ease);
+}
+.iconbtn:hover { background: var(--bg-hover); color: var(--text); }
+.iconbtn:active { transform: translateY(1px); }
+.iconbtn.danger:hover { color: var(--danger); }
+
+/* ---- Collection switcher ------------------------------------------------- */
+.collection-switch {
+  display: flex; align-items: center; gap: 8px; width: calc(100% - 16px); margin: 4px 8px 0;
+  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border);
+  background: var(--bg-elevated); color: var(--text); transition: border-color .12s var(--ease);
+}
+.collection-switch:hover { border-color: var(--accent); }
+.collection-switch .cs-name { flex: 1; text-align: left; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.collection-switch svg:last-child { color: var(--text-faint); }
+
+/* ---- Breadcrumb ---------------------------------------------------------- */
+.breadcrumb {
+  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
+  padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-dim);
+}
+.breadcrumb .crumb { padding: 2px 6px; border-radius: 5px; border: 0; background: transparent; color: inherit; }
+.breadcrumb .crumb:hover { background: var(--bg-hover); color: var(--text); }
+.breadcrumb .sep { opacity: .4; }
+.breadcrumb .crumb.current { color: var(--text); font-weight: 500; }
+
+/* ---- File list ----------------------------------------------------------- */
+.filelist { padding: 4px; }
+.row {
+  display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px;
+  border-radius: 6px; cursor: default; user-select: none; color: var(--text);
+  transition: background .08s var(--ease);
+}
+.compact .row { height: 26px; }
+.row:hover { background: var(--bg-hover); }
+.row.selected { background: var(--bg-selected); box-shadow: inset 0 0 0 1px var(--accent); }
+.row.drop-target { box-shadow: inset 0 0 0 2px var(--accent); background: var(--bg-selected); }
+.row .ico { color: var(--text-dim); flex: none; display: grid; place-items: center; }
+.row .ico.folder { color: var(--accent); }
+.row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.row .meta { color: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
+.row .pin-dot { color: var(--success); display: grid; place-items: center; flex: none; }
+.statusbar .offline-badge { color: var(--warn); }
+.statusbar .offline-badge span { color: var(--warn); }
+.row .rename-input {
+  flex: 1; background: var(--bg-input); border: 1px solid var(--accent); border-radius: 4px;
+  padding: 2px 6px; outline: none; color: var(--text);
+}
+
+.empty {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 10px; height: 100%; color: var(--text-faint); text-align: center; padding: 32px;
+}
+.empty .big { font-size: 34px; opacity: .5; }
+.empty .cta {
+  margin-top: 4px; padding: 7px 14px; border-radius: 8px; border: 1px dashed var(--border-strong);
+  background: transparent; color: var(--text-dim);
+}
+.empty .cta:hover { border-color: var(--accent); color: var(--text); }
+
+/* ---- Editor area --------------------------------------------------------- */
+.editor { display: flex; flex-direction: column; min-width: 0; background: var(--bg); overflow: hidden; }
+.tabs { display: flex; align-items: stretch; height: 36px; background: var(--bg-activity); border-bottom: 1px solid var(--border); overflow-x: auto; }
+.tab {
+  display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; max-width: 220px;
+  border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--text-dim);
+  position: relative; white-space: nowrap;
+}
+.tab.active { background: var(--bg); color: var(--text); }
+.tab.active::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
+.tab .label { overflow: hidden; text-overflow: ellipsis; }
+.tab .close { width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; opacity: .5; }
+.tab .close:hover { background: var(--bg-hover); opacity: 1; }
+.editor .stage { flex: 1; min-height: 0; overflow: auto; position: relative; }
+
+.welcome { display: grid; place-items: center; height: 100%; }
+.welcome .card { text-align: center; max-width: 460px; padding: 40px; }
+.welcome h1 { font-size: 26px; margin: 12px 0 6px; font-weight: 650; }
+.welcome .logo { font-size: 46px; }
+.welcome p { color: var(--text-dim); line-height: 1.6; }
+.welcome .hints { margin-top: 22px; display: grid; gap: 8px; text-align: left; }
+.welcome .hint { display: flex; align-items: center; gap: 10px; color: var(--text-dim); }
+
+/* ---- Status bar ---------------------------------------------------------- */
+.statusbar {
+  display: flex; align-items: center; gap: 2px; padding: 0 8px;
+  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, var(--bg-activity)), var(--bg-activity));
+  border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-dim);
+}
+.statusbar .seg { display: flex; align-items: center; gap: 5px; padding: 0 8px; height: 100%; border: 0; background: transparent; color: inherit; }
+.statusbar .seg:hover { background: var(--bg-hover); color: var(--text); }
+.statusbar .spacer { flex: 1; }
+
+/* ---- Buttons / forms ----------------------------------------------------- */
+.btn {
+  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 7px;
+  border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text);
+  transition: all .12s var(--ease);
+}
+.btn:hover { border-color: var(--accent); }
+.btn.primary { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 82%, black)); color: var(--accent-text); border: 0; font-weight: 600; }
+/* Two modifiers eight call sites already used and no rule had ever defined, so a
+   "small ghost" button came out full-size and solid — two of them wrapped onto two
+   lines each in the 380px Activity panel. */
+.btn.small { padding: 4px 9px; font-size: 12px; gap: 5px; border-radius: 6px; }
+.btn.ghost { background: none; border-color: transparent; color: var(--text-dim); }
+.btn.ghost:hover { background: var(--bg-hover); border-color: var(--border); color: var(--text); }
+/* The pinned/"available offline" state of the info panel's toggle. */
+.btn.on { border-color: var(--accent); color: var(--accent); background: var(--bg-active); }
+.btn.primary:hover { filter: brightness(1.08); }
+.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
+.btn.danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }
+.btn:disabled { opacity: .45; pointer-events: none; }
+
+.field { display: flex; flex-direction: column; gap: 6px; }
+.field label { font-size: 12px; color: var(--text-dim); }
+.input, select.input {
+  width: 100%; padding: 8px 11px; background: var(--bg-input); color: var(--text);
+  border: 1px solid var(--border-strong); border-radius: 7px; outline: none;
+  transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
+}
+.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
+
+.switch { position: relative; width: 38px; height: 22px; flex: none; }
+/* Invisible but REAL: it covers the whole track rather than collapsing to 0×0. A
+   zero-sized control is skipped by the TV shell's spatial navigation (which measures
+   rectangles), which made every boolean setting unreachable by remote; it is also what
+   the pointer should be hitting, and the cursor confirms the control is live. */
+.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
+.switch .track { position: absolute; inset: 0; background: var(--border-strong); border-radius: 22px; transition: background .15s var(--ease); }
+.switch .track::before { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .16s var(--ease); }
+/* The real checkbox is visually hidden, so focusing it showed nothing whatsoever — a
+   keyboard user tabbing through Settings could not tell which toggle they were on. The
+   track is the visible control, so the track carries the focus. */
+.switch input:focus-visible + .track {
+  box-shadow: 0 0 0 3px var(--focus-halo);
+  outline: 1px solid var(--focus);
+}
+.switch input:checked + .track { background: var(--accent); }
+.switch input:checked + .track::before { transform: translateX(16px); }
+
+/* ---- Overlays: palette, dialog, menu, panel ------------------------------ */
+.scrim { position: fixed; inset: 0; background: #0006; backdrop-filter: blur(1.5px); z-index: 40; }
+
+.palette {
+  position: fixed; top: 12vh; left: 50%; transform: translateX(-50%);
+  width: min(640px, 92vw); background: var(--bg-elevated); border: 1px solid var(--border-strong);
+  border-radius: 12px; box-shadow: var(--shadow); z-index: 50; overflow: hidden;
+  animation: pop .13s var(--ease);
+}
+@keyframes pop { from { opacity: 0; transform: translate(-50%, -6px) scale(.98); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
+.palette .search { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
+.palette .search input { flex: 1; background: transparent; border: 0; outline: none; font-size: 15px; color: var(--text); }
+.palette .results { max-height: 52vh; overflow-y: auto; padding: 6px; }
+.palette .opt {
+  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; cursor: default;
+}
+.palette .opt.active { background: var(--bg-active); }
+.palette .opt .ico { color: var(--text-dim); }
+.palette .opt .title { flex: 1; }
+.palette .opt .cat { color: var(--text-faint); font-size: 11px; }
+.palette .opt .kbd { margin-left: auto; }
+.palette .opt .sub { color: var(--text-faint); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.palette .opt.unavailable { opacity: .5; }
+.palette .opt.unavailable .title { text-decoration: line-through; text-decoration-color: var(--text-faint); }
+.offline-tag { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: 5px; padding: 1px 5px; }
+
+/* plugin live-capability report */
+.plugin-features { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
+.pf-head { display: flex; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); margin-bottom: 8px; }
+.pf-list { display: flex; flex-direction: column; gap: 4px; }
+.pf-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: 12.5px; }
+.pf-row.off { opacity: .55; }
+.pf-row .pf-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pf-row .pf-kind { font-size: 10px; color: var(--text-faint); }
+.pf-badge {
+  font-size: 9.5px; color: var(--text-faint); border: 1px solid var(--border);
+  border-radius: 5px; padding: 1px 5px; margin-left: auto; white-space: nowrap;
+}
+.pf-badge.offline-ok { font-size: 9.5px; color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); border-radius: 5px; padding: 1px 5px; }
+.pf-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
+.pf-dot.on { background: var(--success); }
+.pf-dot.no { background: var(--text-faint); }
+.palette .none { padding: 22px; text-align: center; color: var(--text-faint); display: flex; align-items: center; justify-content: center; gap: 8px; }
+.palette .none.error { color: var(--danger, #e5534b); }
+.palette .none .spinner { width: 13px; height: 13px; }
+
+.dialog {
+  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
+  width: min(440px, 92vw); background: var(--bg-elevated); border: 1px solid var(--border-strong);
+  border-radius: 12px; box-shadow: var(--shadow); z-index: 50; padding: 20px; animation: pop .13s var(--ease);
+}
+.dialog h3 { margin: 0 0 12px; font-size: 16px; }
+/* `display: block` because `.body` is ALSO the shell's rail+main grid (see above),
+   and that rule matches in here too. A dialog's prose was landing in a column sized
+   to the activity rail — 52px — so every confirmation rendered one word per line.
+   The text was right, which is why nothing that reads innerText ever noticed. */
+.dialog .body { display: block; color: var(--text-dim); line-height: 1.5; margin-bottom: 16px; }
+.dialog .row-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
+
+/* Opener chooser */
+.opener-chooser .opener-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
+.opener-opt { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; }
+.opener-opt:hover { background: var(--bg-hover); }
+.opener-opt.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
+.opener-opt input { accent-color: var(--accent); }
+.opener-opt .oo-main { display: flex; flex-direction: column; gap: 1px; }
+.opener-opt .oo-title { font-size: 13px; font-weight: 500; }
+.opener-opt .oo-src { font-size: 11px; color: var(--text-dim); }
+.opener-remember { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; }
+.opener-remember input { accent-color: var(--accent); }
+
+.menu {
+  /* A menu can be long — the offline-files list runs to 24 entries — and it had no
+     height bound and no scrolling, so anything past the viewport was simply
+     unreachable. Unpinning has no other route in the UI, so a clipped row is a lost
+     action. */
+  max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain;
+  position: fixed; z-index: 60; min-width: 200px; background: var(--bg-elevated);
+  border: 1px solid var(--border-strong); border-radius: 9px; box-shadow: var(--shadow); padding: 5px;
+  animation: pop .1s var(--ease);
+}
+.menu .mi { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 6px; cursor: default; }
+.menu .mi:hover { background: var(--bg-active); }
+.menu .mi.danger:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
+.menu .mi .kbd { margin-left: auto; color: var(--text-faint); }
+.menu .sep { height: 1px; background: var(--border); margin: 5px 2px; }
+
+/* ---- Toasts / transfer tray --------------------------------------------- */
+.toasts { position: fixed; bottom: calc(var(--statusbar-h) + 12px); right: 14px; z-index: 70; display: flex; flex-direction: column; gap: 8px; width: 340px; }
+.toast {
+  display: flex; gap: 10px; padding: 11px 13px; border-radius: 10px; background: var(--bg-elevated);
+  border: 1px solid var(--border-strong); box-shadow: var(--shadow); animation: slidein .16s var(--ease);
+}
+@keyframes slidein { from { opacity: 0; transform: translateX(12px); } }
+.toast .bar { width: 3px; border-radius: 3px; flex: none; }
+.toast.info .bar { background: var(--accent); }
+.toast.success .bar { background: var(--success); }
+.toast.warn .bar { background: var(--warn); }
+.toast.error .bar { background: var(--danger); }
+.toast .msg { flex: 1; line-height: 1.4; }
+.toast .x { color: var(--text-faint); align-self: flex-start; }
+
+.tray { position: fixed; bottom: calc(var(--statusbar-h) + 12px); left: calc(var(--activity-w) + 12px); z-index: 65; width: 320px; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
+.tray .head { display: flex; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 12px; }
+.tray .head .actions { margin-left: auto; }
+.tray .items { max-height: 300px; overflow-y: auto; }
+.xfer { padding: 9px 12px; border-bottom: 1px solid var(--border); }
+.xfer:last-child { border-bottom: 0; }
+.xfer .top { display: flex; align-items: center; gap: 8px; }
+.xfer .top .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
+.xfer .pct { color: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
+.progress { height: 4px; background: var(--bg-hover); border-radius: 3px; overflow: hidden; margin-top: 7px; }
+.progress > div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .2s var(--ease); }
+.xfer.error .progress > div { background: var(--danger); }
+.xfer.cancelled { opacity: .55; }
+
+/* ---- Search view --------------------------------------------------------- */
+.searchview { padding: 10px; display: flex; flex-direction: column; gap: 10px; height: 100%; }
+.searchview .box { display: flex; gap: 6px; }
+.searchview .modes { display: flex; gap: 4px; }
+.chip { padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); font-size: 11.5px; }
+.chip.active { background: var(--bg-selected); border-color: var(--accent); color: var(--text); }
+.results { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
+.result { padding: 10px 11px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-elevated); cursor: default; }
+.result:hover { border-color: var(--border-strong); }
+.result .top { display: flex; align-items: center; gap: 8px; }
+.result .top .name { font-weight: 550; }
+.result .top .score { margin-left: auto; font-size: 10.5px; color: var(--text-faint); }
+.result .path { color: var(--text-faint); font-size: 11px; margin: 2px 0 0 24px; }
+.result .snippet { color: var(--text-dim); font-size: 12px; margin: 6px 0 0 24px; line-height: 1.5; }
+.result .snippet mark { background: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--text); border-radius: 3px; padding: 0 2px; }
+.result .badge { font-size: 10px; padding: 1px 6px; border-radius: 5px; background: var(--bg-hover); color: var(--text-dim); }
+
+/* ---- Settings view ------------------------------------------------------- */
+.settings { max-width: 720px; margin: 0 auto; padding: 26px 24px 60px; }
+.settings h2 { font-size: 20px; margin: 0 0 4px; }
+.settings .sub { color: var(--text-dim); margin-bottom: 22px; }
+.settings .group { margin-bottom: 28px; }
+.settings .group h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); margin: 0 0 10px; }
+.setting { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
+.setting .info { flex: 1; }
+.setting .info .t { font-weight: 550; }
+.setting .info .d { color: var(--text-faint); font-size: 12px; margin-top: 2px; line-height: 1.4; }
+.setting .control { width: 200px; flex: none; display: flex; justify-content: flex-end; }
+
+/* ---- Plugins view -------------------------------------------------------- */
+.plugins { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
+.plugin-card { border: 1px solid var(--border); border-radius: 11px; background: var(--bg-elevated); padding: 14px; }
+.plugin-card .top { display: flex; align-items: center; gap: 10px; }
+.plugin-card .avatar { width: 38px; height: 38px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: var(--accent-text); font-weight: 700; }
+.plugin-card .name { font-weight: 600; }
+.plugin-card .status { margin-left: auto; font-size: 11px; padding: 2px 8px; border-radius: 12px; }
+.plugin-card .status.active { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
+.plugin-card .status.error { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }
+.plugin-card .status.loading { background: var(--bg-hover); color: var(--text-dim); }
+.plugin-card .caps { display: flex; gap: 5px; flex-wrap: wrap; margin: 10px 0 0; }
+.plugin-card .cap { font-size: 10.5px; padding: 2px 7px; border-radius: 6px; background: var(--bg-hover); color: var(--text-dim); }
+.plugin-card .desc { color: var(--text-dim); font-size: 12px; margin-top: 8px; line-height: 1.5; }
+.plugin-card .actions { display: flex; gap: 8px; margin-top: 12px; }
+
+.plugin-panel {
+  position: fixed; top: 12px; right: 12px; z-index: 55;
+  background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 12px;
+  box-shadow: var(--shadow); overflow: hidden; animation: pop .13s var(--ease);
+}
+.plugin-panel .head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; }
+.plugin-panel .head .x { margin-left: auto; }
+.plugin-panel .host { display: block; }
+
+/* ---- Plugin install + trust --------------------------------------------- */
+.plugin-install { display: flex; gap: 8px; margin-top: 10px; }
+.trust { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; padding: 2px 7px; border-radius: 12px; border: 1px solid var(--border); white-space: nowrap; }
+.trust.verified { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 12%, transparent); }
+.trust.signed { color: var(--text-dim); }
+.trust.unverified { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
+.trust.invalid { color: var(--danger, #e5484d); border-color: color-mix(in srgb, var(--danger, #e5484d) 55%, transparent); background: color-mix(in srgb, var(--danger, #e5484d) 14%, transparent); font-weight: 600; }
+
+.dialog.review { padding: 0; overflow: hidden; }
+.review-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
+.review-head .avatar { width: 44px; height: 44px; border-radius: 11px; }
+.review-head .rh-main { flex: 1; }
+.review-head .rh-name { font-size: 16px; font-weight: 650; display: flex; align-items: baseline; gap: 8px; }
+.review-head .rh-ver { font-size: 11px; color: var(--text-faint); font-weight: 400; }
+.review-head .rh-author { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
+.review-body { max-height: 60vh; overflow-y: auto; padding: 14px 18px; }
+.review-desc { color: var(--text-dim); line-height: 1.55; margin: 0 0 14px; }
+.review-section { margin-bottom: 16px; }
+.review-section .rs-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); margin-bottom: 8px; }
+.cap-list { display: flex; flex-direction: column; gap: 8px; }
+.cap-row { display: flex; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; align-items: flex-start; }
+.cap-row:hover { border-color: var(--border-strong); }
+/* Blocked means the plugin asked for something it will not get. It has to look
+   different from something it will — `.contrib-row.blocked` was styled nowhere, so a
+   refused command and an available one were identical. */
+.cap-row.blocked, .contrib-row.blocked { opacity: .6; cursor: not-allowed; }
+.contrib-row.blocked .pf-title { text-decoration: line-through; }
+.cap-row input { margin-top: 2px; accent-color: var(--accent); }
+.cap-row .cap-name { font-weight: 600; font-size: 13px; }
+.cap-row .cap-desc { color: var(--text-dim); font-size: 12px; margin-top: 2px; line-height: 1.4; }
+.contrib-list { display: flex; flex-direction: column; gap: 3px; }
+.contrib-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 4px; }
+.contrib-row .cr-title { color: var(--text); }
+.contrib-row .cr-detail { color: var(--text-faint); font-size: 11px; }
+.contrib-row .pf-kind { margin-left: auto; font-size: 10px; color: var(--text-faint); }
+.review-meta { color: var(--text-faint); font-size: 11px; margin-top: 6px; }
+.dialog.review .row-actions { padding: 14px 18px; border-top: 1px solid var(--border); margin: 0; }
+
+/* ---- Media / audiobook opener ------------------------------------------- */
+.viewer { height: 100%; display: flex; flex-direction: column; }
+.viewer.text pre { margin: 0; padding: 18px 20px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; color: var(--text); }
+.viewer.image { display: grid; place-items: center; background: repeating-conic-gradient(var(--bg-elevated) 0% 25%, var(--bg) 0% 50%) 50% / 22px 22px; }
+.viewer.image img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: var(--shadow); }
+.viewer .loading, .viewer .fallback { margin: auto; color: var(--text-faint); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px; text-align: center; }
+/* A plugin opener's iframe is a host-owned, position:fixed overlay (managed in
+   pluginHost.js) — never a child of this box, because moving an <iframe> in the DOM
+   reloads it. .pv-host is just the tracking target the overlay is sized/positioned to. */
+.viewer.plugin-viewer { display: block; position: relative; }
+.viewer.plugin-viewer .pv-host { width: 100%; height: 100%; }
+/* Loading/error overlay shown until the plugin opens the file (see pluginOpenerView). */
+.viewer.plugin-viewer .pv-status { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: var(--bg); }
+.viewer.plugin-viewer .pv-status .loading, .viewer.plugin-viewer .pv-status .fallback { color: var(--text-faint); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 40px; }
+
+/* Docked viewer — the plugin's iframe floats over .vd-body as a small frame kept
+   alive after you navigate away. Its background is transparent, so a video/audio
+   player shows through over the app. */
+.viewer-dock { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: none; flex-direction: column; background: transparent; border-radius: 12px; box-shadow: var(--shadow); }
+.viewer-dock .vd-bar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 10px; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-bottom: 0; border-radius: 12px 12px 0 0; }
+.viewer-dock .vd-title { flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.viewer-dock .vd-bar button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--text-dim); font-size: 12px; cursor: pointer; display: grid; place-items: center; }
+.viewer-dock .vd-bar button:hover { background: var(--bg-hover); color: var(--text); }
+.viewer-dock .vd-body { flex: 1; min-height: 0; background: transparent; border: 1px solid var(--border-strong); border-top: 0; border-radius: 0 0 12px 12px; }
+
+.audiobook-host { height: 100%; min-height: 0; }
+.audiobook { display: grid; grid-template-columns: 300px 1fr; height: 100%; min-height: 0; }
+.audiobook .cover-pane { background: var(--bg-elevated); border-right: 1px solid var(--border); padding: 26px; display: flex; flex-direction: column; align-items: center; gap: 18px; overflow-y: auto; }
+.audiobook .cover { width: 220px; height: 220px; border-radius: 14px; box-shadow: var(--shadow); object-fit: cover; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #fff; font-size: 60px; }
+.audiobook .meta { text-align: center; }
+.audiobook .meta .title { font-size: 17px; font-weight: 650; }
+.audiobook .meta .author { color: var(--text-dim); margin-top: 3px; }
+.audiobook .meta .narrator { color: var(--text-faint); font-size: 12px; margin-top: 2px; }
+.audiobook .transport { width: 100%; display: flex; flex-direction: column; gap: 12px; }
+.audiobook .scrub { display: flex; align-items: center; gap: 10px; }
+.audiobook .scrub input[type=range] { flex: 1; accent-color: var(--accent); }
+.audiobook .time { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--text-faint); min-width: 42px; }
+.audiobook .buttons { display: flex; align-items: center; justify-content: center; gap: 14px; }
+.audiobook .buttons .play { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: var(--accent-text); border: 0; display: grid; place-items: center; box-shadow: var(--shadow); }
+.audiobook .buttons .play:hover { filter: brightness(1.08); }
+.audiobook .buttons .skip { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-hover); border: 0; color: var(--text); display: grid; place-items: center; }
+.audiobook .buttons .rate { min-width: 46px; padding: 6px 8px; border-radius: 8px; background: var(--bg-hover); border: 0; color: var(--text-dim); font-variant-numeric: tabular-nums; }
+.audiobook .chapters { overflow-y: auto; padding: 10px; }
+.audiobook .chapters .ch-head { padding: 8px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); display: flex; }
+.audiobook .chapters .ch-head .count { margin-left: auto; color: var(--text-faint); }
+.audiobook .chapter { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; cursor: default; }
+.audiobook .chapter:hover { background: var(--bg-hover); }
+.audiobook .chapter.current { background: var(--bg-selected); }
+.audiobook .chapter .n { width: 22px; text-align: right; color: var(--text-faint); font-variant-numeric: tabular-nums; font-size: 12px; }
+.audiobook .chapter .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.audiobook .chapter .d { color: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
+.audiobook .chapter.current .n { color: var(--accent); }
+
+.spinner { width: 20px; height: 20px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.dragging-file .editor::after, .dragging-file .sidebar::after {
+  content: 'Drop to upload'; position: absolute; inset: 8px; border: 2px dashed var(--accent);
+  border-radius: 12px; display: grid; place-items: center; color: var(--accent); font-weight: 600;
+  background: color-mix(in srgb, var(--accent) 8%, transparent); pointer-events: none; z-index: 30;
+}
+.editor, .sidebar { position: relative; }
+
+/* ---- Notifications + principal (bottom of the rail) --------------------- */
+.principal { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 700; font-size: 12px; }
+.principal .avatar-img { width: 100%; height: 100%; object-fit: cover; }
+
+.bell-wrap { position: relative; }
+.bell-badge { position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px; padding: 0 3px; background: var(--danger); color: #fff; border-radius: 8px; font-size: 9.5px; font-weight: 700; display: grid; place-items: center; }
+/* Opens up-and-to-the-right of the rail, anchored to the bottom cluster. */
+.inbox { position: fixed; left: calc(var(--activity-w) + 8px); bottom: 8px; width: 340px; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow); z-index: 55; overflow: hidden; animation: pop .12s var(--ease); }
+.inbox-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 12px; }
+.inbox-head .link, .link { background: none; border: 0; color: var(--accent); font-size: 12px; }
+.inbox-head .muted, .muted { color: var(--text-faint); }
+.inbox-items { max-height: 380px; overflow-y: auto; }
+.inbox-item { padding: 10px 13px; border-bottom: 1px solid var(--border); cursor: default; }
+.inbox-item:hover { background: var(--bg-hover); }
+.inbox-item.unread { border-left: 2px solid var(--accent); }
+.inbox-item .ii-title { font-size: 12.5px; font-weight: 550; }
+.inbox-item .ii-excerpt { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
+.inbox-item .ii-time { color: var(--text-faint); font-size: 10.5px; margin-top: 3px; }
+.inbox-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px; color: var(--text-faint); }
+
+/* ---- Info panel: tags + conversation ------------------------------------ */
+.editor-split { display: grid; grid-template-columns: 1fr 340px; min-width: 0; overflow: hidden; }
+/* `min-width: 0` matters as much as min-height here. A grid/flex item defaults to
+   `min-width: auto` — "never shrink below your content" — so on a phone, where the panel
+   is the whole 1fr column, one long filename in the trove: link pushed it wider than the
+   screen and took its own Close button and the Comment button off the right edge.
+   `body { overflow: hidden }` then hid the evidence: it just looked cropped. */
+.infopanel { border-left: 1px solid var(--border); background: var(--bg-sidebar); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
+.infopanel > * { min-width: 0; }
+.ip-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 12px; }
+.ip-head .iconbtn { margin-left: auto; }
+.ip-body { flex: 1; overflow-y: auto; }
+.ip-empty { padding: 30px; color: var(--text-faint); text-align: center; }
+.ip-file { padding: 12px; border-bottom: 1px solid var(--border); }
+.ip-file .ip-name { font-weight: 600; }
+.ip-file .ip-path { color: var(--text-faint); font-size: 11px; margin-top: 2px; }
+.ip-section { padding: 12px; border-bottom: 1px solid var(--border); }
+/* A divider separates two sections. The last one has nothing under it but the panel's
+   empty tail, so its rule was a line drawn across open space. */
+.ip-body > :last-child { border-bottom: 0; }
+.ip-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); margin-bottom: 9px; }
+.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 9px; border-radius: 14px; background: var(--bg-selected); border: 1px solid var(--border); font-size: 12px; }
+.tag-x { width: 16px; height: 16px; border: 0; background: transparent; color: var(--text-faint); border-radius: 50%; display: grid; place-items: center; }
+.tag-x:hover { background: var(--bg-active); color: var(--danger); }
+.tag-input { background: var(--bg-input); border: 1px solid var(--border); border-radius: 14px; padding: 4px 10px; outline: none; color: var(--text); width: 84px; font-size: 12px; }
+.tag-input:focus { border-color: var(--accent); width: 120px; }
+
+.conv .thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
+.conv-empty { color: var(--text-faint); font-size: 12px; line-height: 1.5; margin-bottom: 12px; }
+.conv-signin { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; color: var(--text-faint); font-size: 12px; padding: 8px 0; }
+.comment { font-size: 13px; }
+.c-head { display: flex; align-items: center; gap: 7px; }
+.c-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex: none; }
+.c-author { font-weight: 600; font-size: 12.5px; }
+.c-time { color: var(--text-faint); font-size: 11px; }
+.c-body { margin: 4px 0 4px 29px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
+.c-body.deleted { color: var(--text-faint); font-style: italic; }
+.c-body .mention { color: var(--accent); font-weight: 600; background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 4px; padding: 0 3px; }
+.c-actions { display: flex; align-items: center; gap: 4px; margin-left: 29px; flex-wrap: wrap; }
+.react { border: 0; background: transparent; border-radius: 12px; padding: 2px 6px; font-size: 12px; display: inline-flex; align-items: center; gap: 3px; }
+.react:hover { background: var(--bg-hover); }
+.react.on { background: var(--bg-selected); }
+.react .rc { font-size: 10px; color: var(--text-dim); }
+.c-link { border: 0; background: transparent; color: var(--text-faint); font-size: 11.5px; padding: 2px 5px; border-radius: 5px; }
+.c-link:hover { color: var(--text); background: var(--bg-hover); }
+.c-link.danger:hover { color: var(--danger); }
+.replies { margin-top: 10px; border-left: 2px solid var(--border); }
+.composer { display: flex; flex-direction: column; gap: 6px; }
+.composer .replying { font-size: 11px; color: var(--text-dim); display: flex; gap: 8px; align-items: center; }
+.composer-input { background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 9px; padding: 8px 10px; resize: vertical; outline: none; color: var(--text); font-family: inherit; }
+.composer-input:focus { border-color: var(--accent); }
+.composer-actions { display: flex; align-items: center; justify-content: space-between; }
+.composer-actions .btn { padding: 5px 12px; }
+
+@media (max-width: 720px) {
+  :root { --sidebar-w: 220px; }
+  .audiobook { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
+  .audiobook .cover-pane { border-right: 0; border-bottom: 1px solid var(--border); }
+  .editor-split { grid-template-columns: 1fr; }
+  /* Only when it is a SPLIT does the details rail have to go — there is no room for
+     both. The phone shell gives it the whole panel instead, and hiding it there would
+     make "Details & conversation" a menu entry that silently does nothing. */
+  .editor-split .infopanel { display: none; }
+}
+
+/* --- Launcher (search-first main panel; replaces the explorer sidebar) ------ */
+.launcher { display: flex; flex-direction: column; height: 100%; max-width: 820px; margin: 0 auto; width: 100%; padding: 0 20px; }
+.launch-box { display: flex; align-items: center; gap: 10px; margin: min(12vh, 90px) 0 4px; padding: 12px 16px; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow); }
+/* The LEADING icon only. As `.launch-box svg` this also captured the icons inside the
+   clear and microphone buttons, pinning them to one colour — so the clear button's
+   hover never lit its glyph, and the microphone's listening state was a blue block with
+   an invisible grey mic in it. A button owns the colour of its own icon. */
+.launch-box > svg { color: var(--text-dim); flex: none; }
+.launch-box button > svg { flex: none; }
+/* Honest "what was actually searched" bar (search transformer output). */
+.launch-resolved { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 8px 4px 0; font-size: 12px; color: var(--text-dim); }
+.launch-resolved .rq-label { text-transform: uppercase; font-size: 10px; letter-spacing: .05em; color: var(--text-faint); font-weight: 600; }
+.launch-resolved .rq-text { color: var(--text); }
+.launch-resolved .rq-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-dim); }
+.launch-input { flex: 1; background: none; border: 0; outline: none; color: var(--text); font: 500 17px/1.3 var(--font-ui); }
+.launch-input::placeholder { color: var(--text-faint); font-weight: 400; }
+.launch-clear { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--text-faint); cursor: pointer; }
+.launch-clear:hover { background: var(--bg-hover); color: var(--text); }
+/* The microphone, shown only where the browser can transcribe on-device. `on` is the
+   listening state: it pulses so there is no doubt the room is being heard, because a
+   microphone whose state you have to guess at is worse than none. */
+.launch-mic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 7px; background: none; color: var(--text-faint); cursor: pointer; flex: none; }
+.launch-mic:hover { background: var(--bg-hover); color: var(--text); }
+.launch-mic.on { color: var(--accent-text); background: var(--accent); animation: mic-pulse 1.4s var(--ease) infinite; }
+@keyframes mic-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 var(--focus-halo); }
+  50% { box-shadow: 0 0 0 5px transparent; }
+}
+/* Someone who asked for no animation gets a steady fill instead of none of the signal. */
+@media (prefers-reduced-motion: reduce) { .launch-mic.on { animation: none; } }
+.launch-body { flex: 1; overflow-y: auto; padding: 8px 0 40px; }
+.launch-group { margin-top: 14px; }
+.launch-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
+.launch-list { display: flex; flex-direction: column; }
+.launch-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--text); }
+.launch-item svg { color: var(--text-dim); flex: none; }
+/* The NAME is what you are looking for; the content type is a footnote. Capping the
+   name at 60% of the row reserved the other 40% for "application/pdf" and truncated
+   the filename to do it. So: the name takes what it needs, and the type gives way. */
+.launch-item .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.launch-item:hover { background: var(--bg-hover); }
+/* The keyboard selection — the row Enter will open. It used to be `bg-hover` plus a
+   1px border, which is what a MOUSE HOVER looks like, so arrowing down produced a
+   highlight indistinguishable from wherever the pointer happened to be resting. It gets
+   the same accent edge focus uses elsewhere, so "the app is pointing at this" reads the
+   same way everywhere. */
+.launch-item.active {
+  background: var(--bg-selected);
+  box-shadow: inset 3px 0 0 0 var(--focus);
+}
+.launch-detail { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-faint); font-size: 12.5px; }
+/* The row's overflow menu. Hidden until the row is hovered, selected or the button
+   itself has focus — a column of ⋯ down every row is noise, but it must never be
+   keyboard-only-invisible. */
+.launch-more {
+  flex: none; display: inline-flex; align-items: center; justify-content: center;
+  width: 26px; height: 26px; margin: -4px -4px -4px 0; border: 0; border-radius: 7px;
+  background: none; color: var(--text-faint); cursor: pointer; opacity: 0;
+  transition: opacity .1s var(--ease), background .1s var(--ease);
+}
+.launch-item:hover .launch-more, .launch-item.active .launch-more, .launch-more:focus-visible { opacity: 1; }
+.launch-more:hover { background: var(--bg-active); color: var(--text); }
+.launch-more:focus-visible { outline: none; color: var(--text); background: var(--bg-active); box-shadow: 0 0 0 2px var(--focus-halo); }
+/* On a touch screen there is no hover to reveal it, so it is simply always there. */
+@media (hover: none) { .launch-more { opacity: 1; } }
+.launch-kind { flex: none; color: var(--text-faint); font-size: 11px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 5px; }
+.launch-up { display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; color: var(--text-dim); font-size: 12px; cursor: pointer; padding: 2px 4px; border-radius: 5px; }
+.launch-up:hover { background: var(--bg-hover); color: var(--text); }
+.launch-empty { padding: 8px 12px; color: var(--text-faint); font-size: 13px; }
+
+/* --- Views: how the results are drawn -------------------------------------- */
+/* The switcher lives in the search box, on the right of the microphone: it belongs to
+   the results, and the box is the one thing on this surface that never scrolls away.
+   It is only rendered at all when more than one view is registered. */
+.view-switch { flex: none; display: inline-flex; align-items: center; gap: 2px; padding-left: 4px; margin-left: 2px; border-left: 1px solid var(--border); }
+.vs-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 7px; background: none; color: var(--text-faint); cursor: pointer; }
+.vs-btn:hover { background: var(--bg-hover); color: var(--text); }
+.vs-btn.on { background: var(--bg-active); color: var(--text); }
+.vs-btn:focus-visible { outline: none; color: var(--text); box-shadow: 0 0 0 2px var(--focus-halo); }
+/* A view that threw. The list is drawn underneath it, so the drive is still usable —
+   this says why it doesn't look the way it was asked to. */
+.view-error { display: flex; align-items: center; gap: 6px; margin: 8px 10px 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-hover); color: var(--text-dim); font-size: 12.5px; }
+.view-error svg { flex: none; color: var(--warn); }
+
+/* The grid. `auto-fill` rather than a fixed column count: the same view has to work in
+   a 1100px main panel, a 380px phone and a television. */
+.grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; padding: 4px 10px; }
+.grid-tile { display: flex; flex-direction: column; gap: 6px; border-radius: 10px; padding: 6px; cursor: pointer; color: var(--text); }
+.grid-tile:hover { background: var(--bg-hover); }
+.grid-tile.active { background: var(--bg-selected); box-shadow: inset 0 0 0 2px var(--focus); }
+/* Square, so a wall of tiles lines up whatever shape the pictures are. */
+.gt-media { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; background: var(--bg-hover); overflow: hidden; }
+.gt-media > svg { color: var(--text-faint); }
+/* The image sits over the icon and covers it. When it fails to load the view hides it,
+   uncovering the icon — which is exactly what the list would have shown. */
+.gt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.gt-badge { position: absolute; left: 5px; bottom: 5px; padding: 1px 6px; border-radius: 5px; background: rgba(0,0,0,.6); color: #fff; font-size: 10.5px; }
+.gt-media .launch-more { position: absolute; top: 3px; right: 3px; margin: 0; background: var(--bg-elevated); }
+.grid-tile:hover .launch-more, .grid-tile.active .launch-more { opacity: 1; }
+/* Two lines of filename, then an ellipsis. One line truncates "IMG_20240817_113244.jpg"
+   into uselessness; three turns the grid into a wall of text. */
+.gt-name { font-size: 12.5px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
+
+
+/* --- Viewer stack: nav bar (Back + breadcrumb trail) ----------------------- */
+.viewer-nav { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px; background: var(--bg-activity); border-bottom: 1px solid var(--border); }
+.vn-back { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-elevated); color: var(--text-dim); }
+.vn-back:hover { color: var(--text); background: var(--bg-hover); }
+.vn-trail { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow-x: auto; }
+.vn-crumb { display: inline-flex; align-items: center; gap: 5px; max-width: 240px; padding: 4px 8px; border: 0; background: none; color: var(--text-dim); border-radius: 6px; white-space: nowrap; }
+.vn-crumb .label { overflow: hidden; text-overflow: ellipsis; }
+.vn-crumb:hover { background: var(--bg-hover); color: var(--text); }
+.vn-crumb.active { color: var(--text); font-weight: 550; }
+.vn-crumb:not(:last-child)::after { content: '›'; margin-left: 6px; color: var(--text-faint); }
+.vn-actions { display: flex; gap: 2px; }
+
+/* --- Double-shift modal search --------------------------------------------- */
+.search-modal { position: fixed; inset: 0; z-index: 60; }
+.search-modal .scrim { position: absolute; inset: 0; z-index: 0; background: rgba(0,0,0,.45); }
+.search-modal-panel { z-index: 1; position: absolute; left: 50%; top: 12vh; transform: translateX(-50%); width: min(680px, 94vw); max-height: 72vh; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; display: flex; }
+.search-modal-panel .launcher { max-width: none; padding: 0 12px; height: 100%; }
+.search-modal-panel .launch-box { margin: 12px 0 4px; }
+.search-modal-panel .launch-body { max-height: 56vh; }
+
+/* Info panel: the item's own trove: link, and the documents that link to it —
+   what replaces "which folder is this in?" now that there are no folders. */
+.ip-uri {
+  display: flex; align-items: center; gap: 6px; width: 100%;
+  padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border);
+  background: var(--bg-elevated); color: var(--text-dim);
+  font: 11px/1.4 var(--font-mono, ui-monospace, monospace); text-align: left; cursor: pointer;
+  min-width: 0; overflow: hidden;
+}
+/* The ellipsis has to live on the TEXT, not on the flex container — `text-overflow` does
+   nothing to a flex box, and a flex item defaults to `min-width: auto`, meaning "never
+   shrink below your content". So a long name pushed the panel wider than the phone,
+   putting Close and Comment off-screen (`body { overflow: hidden }` hid the evidence),
+   and on desktop hard-clipped the link with no `…` at all — presenting half a URI as
+   though it were the whole one. */
+.ip-uri > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ip-uri:hover { color: var(--text); border-color: var(--accent); }
+.ip-backlinks { display: flex; flex-direction: column; gap: 4px; }
+.ip-backlink {
+  display: flex; align-items: center; gap: 6px; width: 100%;
+  padding: 5px 8px; border-radius: 6px; border: 1px solid transparent;
+  background: none; color: var(--text-dim); font-size: 12px; text-align: left; cursor: pointer;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.ip-backlink:hover { background: var(--bg-elevated); color: var(--text); }
+.ip-muted { color: var(--text-faint); font-size: 12px; padding: 2px 0; }
+.ip-muted.error { color: var(--danger, #e5534b); }
+
+/* Rendered markdown. Documents are the organising structure now that folders are
+   gone, so they get real typography rather than a <pre> block. */
+.viewer.markdown { overflow: auto; padding: 32px 40px; }
+.md { max-width: 760px; margin: 0 auto; color: var(--text); line-height: 1.65; font-size: 14px; }
+.md-h { font-weight: 650; line-height: 1.3; margin: 1.6em 0 .6em; }
+.md-h:first-child { margin-top: 0; }
+.md-h1 { font-size: 1.7em; } .md-h2 { font-size: 1.35em; } .md-h3 { font-size: 1.12em; }
+/* Levels past 3 render as an <h3> element, whose UA font-size is 1.17em — bigger than
+   our own .md-h3. Without these the outline inverted at #### and then flattened. */
+.md-h4 { font-size: 1em; } .md-h5 { font-size: .92em; color: var(--text-dim); }
+.md-h6 { font-size: .88em; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
+.md-p { margin: 0 0 1em; }
+.md-list { margin: 0 0 1em; padding-left: 1.4em; }
+.md-li { margin: .25em 0; }
+.md-quote {
+  margin: 0 0 1em; padding: .1em 0 .1em 1em;
+  border-left: 3px solid var(--border); color: var(--text-dim);
+}
+.md-hr { border: none; border-top: 1px solid var(--border); margin: 1.8em 0; }
+.md-code {
+  margin: 0 0 1em; padding: 12px 14px; border-radius: 8px; overflow-x: auto;
+  background: var(--bg-elevated); border: 1px solid var(--border);
+  font: 12px/1.55 var(--font-mono, ui-monospace, monospace);
+}
+.md-inline-code {
+  padding: .12em .35em; border-radius: 4px; background: var(--bg-elevated);
+  font: .9em var(--font-mono, ui-monospace, monospace);
+}
+.md-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
+.md-link:hover { border-bottom-color: currentColor; }
+/* An in-drive link reads differently from one that leaves the app. */
+.md-trove { border-bottom: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
+.md-deadlink { color: var(--text-faint); text-decoration: line-through; cursor: not-allowed; }
+.md-truncated {
+  margin: 1.5em 0 0; padding: 10px 12px; border-radius: 8px;
+  border: 1px dashed var(--border); color: var(--text-faint); font-size: 12.5px;
+}
+
+/* --- Activity: running work, and problems that outlived it ------------------- */
+/* Anchored above the status bar rather than centred: it reports on work that keeps
+   going while you use the app, so it must not sit in front of the app. */
+.activity-panel {
+  position: fixed; right: 12px; bottom: calc(var(--statusbar-h) + 10px); z-index: 60;
+  width: 380px; max-height: 62vh; overflow-y: auto;
+  background: var(--bg-elevated); border: 1px solid var(--border-strong);
+  border-radius: var(--radius); box-shadow: var(--shadow);
+  display: flex; flex-direction: column;
+}
+.act-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); }
+.act-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
+.act-section { padding: 10px 12px; border-bottom: 1px solid var(--border); }
+.act-section:last-of-type { border-bottom: none; }
+.act-section-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 8px; }
+.act-empty { margin: 0; color: var(--text-faint); font-size: 12.5px; }
+.act-row { display: flex; align-items: flex-start; gap: 8px; }
+.act-body { flex: 1; min-width: 0; }
+.act-title { font-size: 12.5px; overflow-wrap: anywhere; }
+.act-detail, .act-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; overflow-wrap: anywhere; }
+.act-meta { color: var(--text-faint); }
+.act-error { font-size: 11.5px; color: var(--danger); margin-top: 2px; overflow-wrap: anywhere; }
+.act-amount { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
+.act-action { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 2px; border-radius: 4px; }
+.act-action:hover { background: var(--bg-hover); color: var(--text); }
+.act-task, .act-issue { padding: 7px 0; }
+.act-task + .act-task, .act-issue + .act-issue { border-top: 1px solid var(--border); }
+.act-actions { display: flex; gap: 6px; margin: 6px 0 0 21px; }
+.act-done .act-title, .act-cancelled .act-title { color: var(--text-dim); }
+.act-failed .act-title { color: var(--danger); }
+.act-sev-warning .act-title { color: var(--warn); }
+.act-offline { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 11.5px; color: var(--warn); background: var(--bg-hover); }
+.act-foot { padding: 10px 12px; }
+
+.act-bar { height: 3px; margin: 6px 0 0 21px; background: var(--bg-input); border-radius: 2px; overflow: hidden; }
+.act-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .25s var(--ease); }
+/* Indeterminate: it slides, it does not claim a position. A task that doesn't know its
+   total must not render a percentage — a progress bar that lies is worse than a spinner. */
+.act-bar.indeterminate .act-fill { width: 35%; animation: act-slide 1.1s var(--ease) infinite; }
+@keyframes act-slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
+
+.sb-attention { color: var(--warn); }
+.sb-attention:hover { color: var(--warn); }
+
+/* --- Storage usage: shown only when the backend can actually answer ---------- */
+.sb-usage { gap: 6px; }
+.usage-bar { width: 42px; height: 4px; background: var(--bg-input); border-radius: 2px; overflow: hidden; }
+.usage-fill { height: 100%; background: var(--text-dim); border-radius: 2px; transition: width .3s var(--ease); }
+.sb-usage.low .usage-fill { background: var(--warn); }
+.sb-usage.low { color: var(--warn); }
+.sb-usage.critical .usage-fill { background: var(--danger); }
+.sb-usage.critical { color: var(--danger); }
+
+/* --- Phone shell ------------------------------------------------------------
+   A thin top bar (title + one status icon), the panel, and a bottom tab bar. Both
+   bars respect the safe-area insets so the tab row clears the home indicator and the
+   title clears the notch — without that the primary navigation sits under the OS. */
+:root {
+  --phonebar-h: 46px;
+  --phonetabs-h: 56px;
+}
+.shell.phone {
+  grid-template-rows: calc(var(--phonebar-h) + env(safe-area-inset-top)) 1fr
+                      calc(var(--phonetabs-h) + env(safe-area-inset-bottom));
+}
+.shell.phone .body { grid-template-columns: 1fr; }
+
+.phonebar {
+  display: flex; align-items: center; background: var(--bg-activity);
+  color: var(--text-dim);
+}
+.phonebar.top {
+  gap: 8px; padding: env(safe-area-inset-top) 6px 0;
+  border-bottom: 1px solid var(--border);
+}
+.pb-brand {
+  width: 34px; height: 34px; flex: none; border: 0; background: transparent;
+  border-radius: 9px; display: grid; place-items: center;
+}
+.pb-brand img { width: 21px; height: 21px; }
+.pb-title {
+  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-size: 15px; font-weight: 600; color: var(--text);
+}
+.pb-status {
+  position: relative; width: 38px; height: 38px; flex: none; border: 0; background: transparent;
+  border-radius: 10px; display: grid; place-items: center; color: var(--text-dim);
+}
+.pb-status:active { background: var(--bg-hover); }
+.pb-status.warn { color: var(--warn); }
+.pb-status.danger { color: var(--danger); }
+.pb-badge {
+  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px;
+  background: var(--danger); color: #fff; border-radius: 8px;
+  font-size: 9.5px; font-weight: 700; display: grid; place-items: center;
+}
+
+.phonebar.bottom {
+  justify-content: space-around; padding: 0 4px env(safe-area-inset-bottom);
+  border-top: 1px solid var(--border);
+  background: color-mix(in srgb, var(--accent) 6%, var(--bg-activity));
+}
+.pb-tab {
+  position: relative; flex: 1; height: var(--phonetabs-h); border: 0; background: transparent;
+  color: var(--text-faint); display: flex; flex-direction: column; align-items: center;
+  justify-content: center; gap: 3px; border-radius: 10px;
+}
+.pb-tab .pb-label { font-size: 10.5px; font-weight: 550; }
+.pb-tab.active { color: var(--accent); }
+.pb-tab:active { background: var(--bg-hover); }
+.pb-tab .pb-badge { top: 6px; right: 22%; background: var(--accent); color: var(--accent-text); }
+
+/* --- Bottom sheet (status + overflow) --------------------------------------- */
+.sheet-wrap { position: fixed; inset: 0; z-index: 58; }
+/* The shared .scrim carries z-index 40, so the sheet has to clear it explicitly —
+   otherwise the backdrop sits ON TOP of the sheet and swallows every tap. */
+.sheet-wrap .scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); z-index: 0; }
+.sheet {
+  position: absolute; left: 0; right: 0; bottom: 0; z-index: 41;
+  max-height: 82vh; overflow-y: auto;
+  background: var(--bg-elevated); border-top: 1px solid var(--border-strong);
+  border-radius: 16px 16px 0 0; box-shadow: var(--shadow);
+  padding-bottom: calc(12px + env(safe-area-inset-bottom));
+  animation: sheet-up .18s var(--ease);
+}
+@keyframes sheet-up { from { transform: translateY(18px); opacity: .4; } to { transform: none; opacity: 1; } }
+.sheet-grip {
+  height: 22px; display: grid; place-items: center; border: 0; background: transparent; width: 100%;
+}
+.sheet-grip::before { content: ''; width: 38px; height: 4px; border-radius: 2px; background: var(--border-strong); }
+.sheet-body { padding: 2px 10px 6px; display: flex; flex-direction: column; }
+.sheet-title {
+  padding: 4px 8px 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em;
+  text-transform: uppercase; color: var(--text-faint);
+}
+.sheet-row {
+  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 8px;
+  border: 0; background: transparent; color: var(--text); font-size: 14.5px; text-align: left;
+  border-radius: 10px;
+}
+.sheet-row:active { background: var(--bg-hover); }
+.sheet-row.static { color: var(--text-dim); }
+.sheet-row.danger { color: var(--danger); }
+.sheet-row svg { flex: none; color: var(--text-dim); }
+.sheet-row.danger svg { color: var(--danger); }
+.sheet-row .sr-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sheet-row .sr-value { color: var(--text-dim); font-size: 13px; }
+.sheet-row .sr-go { color: var(--text-faint); }
+.sheet-row .sb-usage { padding: 0; }
+.sheet-actions { display: flex; gap: 8px; padding: 12px 8px 4px; border-top: 1px solid var(--border); margin-top: 8px; }
+.sheet-actions .btn { flex: 1; justify-content: center; }
+.sheet-me { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
+.sheet-me .avatar-img, .sheet-me .avatar-txt {
+  width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center;
+  background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #fff; font-weight: 700;
+}
+.sheet-me .sm-name { font-size: 14.5px; font-weight: 600; color: var(--text); }
+.sheet-me .sm-sub { font-size: 12px; color: var(--text-faint); }
+
+/* Panels that assume a wide window need to give it up on a phone. */
+.shell.phone .editor-split { grid-template-columns: 1fr; }
+.shell.phone .infopanel { border-left: 0; }
+.shell.phone .launcher { padding: 0 12px; }
+.shell.phone .launch-box { margin-top: 14px; padding: 10px 12px; }
+/* 16px or larger, or iOS zooms the page on focus and the layout is never the same again. */
+.shell.phone .launch-input { font-size: 16px; }
+.shell.phone .search-modal-panel { top: 0; width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
+/* Both of these are anchored to desktop chrome that isn't here: the activity panel sits
+   above a 24px status bar, the inbox beside a left rail. Re-anchor them to the tab bar. */
+.shell.phone .activity-panel {
+  left: 8px; right: 8px; width: auto;
+  bottom: calc(var(--phonetabs-h) + env(safe-area-inset-bottom) + 8px);
+  max-height: 68vh;
+}
+.shell.phone .inbox,
+.shell.phone .toasts,
+.shell.phone .tray {
+  left: 8px; right: 8px; width: auto;
+  bottom: calc(var(--phonetabs-h) + env(safe-area-inset-bottom) + 8px);
+}
+/* The docked plugin mini-player was missed when the rest were re-anchored: pinned to
+   the viewport bottom at up to 480px wide, it covered the Files/Upload/Plugins/More row
+   and hung off the left edge of a 390px screen. `!important` because the width is an
+   inline style — the dock sizes itself from the plugin's declared minimum, which is a
+   desktop number that a phone simply cannot honour. */
+.shell.phone .viewer-dock {
+  left: 8px; right: 8px; width: auto !important;
+  bottom: calc(var(--phonetabs-h) + env(safe-area-inset-bottom) + 8px);
+}
+
+/* --- TV shell ----------------------------------------------------------------
+   A television is a screen you read from three metres away with a four-button remote.
+   Two things follow. Everything is bigger — not "zoomed", but sized so a filename is
+   legible at that distance. And the focus ring is not a subtle affordance: it is the
+   only cursor there is, so it has to be findable at a glance from across a room. */
+.shell.tv {
+  font-size: 17px;
+  /* Overscan. Plenty of sets still crop the outer few percent of the signal, which is
+     exactly where a rail and a status bar live — without this the first column of
+     navigation is off the edge of the picture on the TV and nowhere else. */
+  padding: 2.2% 2.6%;
+  --activity-w: 84px;
+  --statusbar-h: 34px;
+}
+.shell.tv .activitybar { gap: 10px; padding: 16px 0 18px; }
+.shell.tv .activitybar .item,
+.shell.tv .activitybar .iconbtn,
+.shell.tv .activitybar .brand-mark { width: 64px; height: 64px; border-radius: 14px; }
+.shell.tv .statusbar { font-size: 15px; }
+.shell.tv .launcher { max-width: 1100px; }
+.shell.tv .launch-input { font-size: 24px; }
+.shell.tv .launch-box { padding: 16px 22px; border-radius: 16px; }
+.shell.tv .launch-mic { width: 40px; height: 40px; border-radius: 11px; }
+.shell.tv .launch-item { padding: 14px 16px; font-size: 18px; border-radius: 12px; }
+.shell.tv .launch-item .name { max-width: none; }
+.shell.tv .launch-h { font-size: 14px; }
+.shell.tv .btn { padding: 11px 20px; font-size: 16px; }
+/* And the content, which is the point of opening the file. A 12.5px monospace line on
+   a 1080p panel viewed from three metres is roughly what 4px looks like on a laptop —
+   scaling the chrome without scaling the document would be scaling the wrong half. */
+.shell.tv .viewer.text pre { font-size: 19px; line-height: 1.7; padding: 28px 34px; }
+.shell.tv .md { font-size: 21px; max-width: 1000px; }
+.shell.tv .viewer.markdown { padding: 40px 52px; }
+.shell.tv .viewer-nav { height: 54px; padding: 0 14px; }
+.shell.tv .vn-crumb { font-size: 17px; max-width: 420px; padding: 8px 12px; }
+.shell.tv .vn-back { width: 44px; height: 40px; }
+.shell.tv .settings { max-width: 1000px; font-size: 17px; }
+.shell.tv .settings .setting .info .d { font-size: 15px; }
+.shell.tv .infopanel { font-size: 16px; }
+
+/* The overlays. `.shell.tv` reserves an overscan-safe area with padding, but a fixed
+   overlay is positioned against the VIEWPORT and so sits outside it — on a set that
+   crops the outer few percent, the toast, the activity panel and the plugin panel are
+   partly or wholly off the picture. The phone shell re-anchors all of these; the TV
+   shell has to as well. */
+.shell.tv .toasts { right: 2.6%; bottom: calc(var(--statusbar-h) + 2.2%); }
+.shell.tv .activity-panel { right: 2.6%; bottom: calc(var(--statusbar-h) + 2.2%); }
+.shell.tv .plugin-panel { top: 2.2%; right: 2.6%; }
+.shell.tv .tray { left: calc(var(--activity-w) + 2.6%); bottom: calc(var(--statusbar-h) + 2.2%); }
+.shell.tv .inbox { left: calc(var(--activity-w) + 2.6%); bottom: 2.2%; }
+.shell.tv .viewer-dock { right: 2.6%; bottom: calc(var(--statusbar-h) + 2.2%); }
+
+/* The remote's cursor. Both :focus and :focus-visible — a d-pad move is a programmatic
+   focus() and browsers disagree about whether that counts as "visible".
+
+   No `border-radius` here. It out-specifies `.btn` (7px), `.tag-x` (50%) and `.iconbtn`
+   (6px), so focusing one of those squared it off mid-interaction — the exact shape-jolt
+   the base focus rule was rewritten to remove. The outline already follows whatever
+   radius the element has. */
+.shell.tv :focus,
+.shell.tv :focus-visible {
+  outline: 3px solid var(--accent);
+  outline-offset: 3px;
+}
+
+/* ONE indicator, not two. The rule above is a blanket over every focusable element, and
+   the base stylesheet spent its whole focus section REPLACING rings with each control's
+   own vocabulary — a field whose box lights up, a row that gets an accent edge. Stacked,
+   both drew: the search box showed its lit border AND a hard rectangle around the input
+   sitting inside it, and the selected row showed its accent edge AND a ring.
+
+   On a TV the ring wins — it is what carries three metres — so the bespoke indicators
+   stand down here rather than the other way round. Each control gets exactly one. */
+.shell.tv .launch-item:focus-visible,
+.shell.tv .sheet-row:focus-visible,
+.shell.tv .inbox-item:focus-visible,
+.shell.tv .activitybar .item:focus-visible,
+.shell.tv .activitybar .brand-mark:focus-visible,
+.shell.tv .statusbar .seg:focus-visible,
+.shell.tv .pb-tab:focus-visible,
+.shell.tv .btn:focus-visible,
+.shell.tv .iconbtn:focus-visible,
+.shell.tv .act-action:focus-visible,
+.shell.tv .launch-clear:focus-visible,
+.shell.tv .vn-back:focus-visible,
+.shell.tv .c-link:focus-visible,
+.shell.tv .react:focus-visible,
+.shell.tv .lh-example:focus-visible,
+.shell.tv .kbd-edit:focus-visible { box-shadow: none; }
+/* The rail's accent bar is the "active" mark; letting focus draw one too put a second
+   bar beside the ring. */
+.shell.tv .activitybar .item:focus-visible::before { content: none; }
+
+/* The search box is the control; the input inside it is not. The base rule already says
+   so (`.launch-input:focus-visible { outline: none }`) and the blanket above out-specified
+   it, which is where the inner rectangle came from. Ring the box, and drop its halo so
+   the ring is not doubled by a glow 3px underneath it. */
+.shell.tv .launch-input:focus,
+.shell.tv .launch-input:focus-visible { outline: none; }
+.shell.tv .launch-box:focus-within {
+  outline: 3px solid var(--accent);
+  outline-offset: 3px;
+  /* The base rule lights the border AND lays a halo under it, which next to the ring
+     reads as three concentric lines. On a TV the ring alone is the indicator, so the
+     border stays the colour it always was. */
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow);
+}
+
+.shell.tv .launch-item:focus,
+.shell.tv .sheet-row:focus { background: var(--bg-selected); }
+/* The launcher keeps its OWN selection while focus stays in the search box — up/down
+   walk the results without focus ever leaving the field, which is the right behaviour
+   for typing and picking in one motion. But then the browser's focus ring is on the
+   search box while the thing that will actually open is four rows below it, and at
+   three metres the default 1px highlight on that row is invisible. So the launcher's
+   selection gets the same ring the remote's focus does. */
+.shell.tv .launch-item.active {
+  outline: 3px solid var(--accent);
+  outline-offset: 3px;
+  background: var(--bg-selected);
+  /* The base row draws an inset accent edge for "selected". Here the ring says it, and
+     an edge tucked inside a ring is the same message twice. */
+  box-shadow: none;
+}
+/* …but only while the search box still holds focus. Once the remote has moved INTO the
+   list, the focused row IS the cursor, and the standing selection drawing an identical
+   ring somewhere else means two rows look equally chosen while only one will open. */
+.shell.tv .launch-body:focus-within .launch-item.active:not(:focus) {
+  outline: none;
+  background: var(--bg-hover);
+}
+/* A focus ring clipped by an ancestor's overflow is a selection that vanishes mid-list.
+   `overflow-x: visible` cannot express that — CSS computes it back to `auto` whenever
+   the other axis scrolls — so the room for the ring has to be real space instead. */
+.shell.tv .launch-body { padding-left: 8px; padding-right: 8px; }
+
+/* --- "How does this search box work" — only after a search found nothing ------ */
+.launch-help { margin: 6px 10px 0; padding: 12px 0 0; border-top: 1px solid var(--border); }
+.lh-hint { display: flex; align-items: flex-start; gap: 8px; color: var(--text-dim); font-size: 12.5px; line-height: 1.55; }
+.lh-hint svg { flex: none; margin-top: 2px; color: var(--text-faint); }
+.lh-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+.lh-example {
+  display: inline-flex; align-items: baseline; gap: 7px; padding: 5px 10px; border-radius: 8px;
+  border: 1px solid var(--border); background: var(--bg-hover); color: var(--text); font-size: 12.5px;
+}
+.lh-example:hover { border-color: var(--accent); }
+.lh-example .lh-q { font-family: var(--font-mono); font-size: 12px; }
+.lh-example .lh-label { color: var(--text-faint); font-size: 11.5px; }
+
+/* --- MCP settings ------------------------------------------------------------ */
+.mcp-url { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.mcp-url .mono {
+  font-family: var(--font-mono); font-size: 12.5px; color: var(--text);
+  background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px;
+  padding: 5px 9px; overflow-x: auto; white-space: nowrap; max-width: 100%;
+}
+.mcp-url .mono.small { font-size: 11.5px; color: var(--text-dim); }
+.settings .control .mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); }
+.mcp-warn {
+  display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 10px; padding: 10px 12px;
+  border-radius: 9px; font-size: 12.5px; line-height: 1.55;
+  color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
+}
+.mcp-warn svg { flex: none; margin-top: 1px; }
+
+/* A two-column setting row assumes a window. At 390px the fixed 200px control leaves
+   the description in a gutter, and a text field in a gutter is not usable — so the row
+   stacks and the control takes the full width. */
+.shell.phone .settings { padding: 18px 14px 40px; }
+.shell.phone .setting { flex-direction: column; align-items: stretch; gap: 8px; }
+.shell.phone .setting .control { width: 100%; justify-content: stretch; }
+.shell.phone .setting .control > * { flex: 1; }
+/* Not everything wants the full width. A toggle stretched across the screen reads as a
+   button; a copy icon stretched across it reads as broken. */
+.shell.phone .setting .control .switch,
+.shell.phone .setting .control .iconbtn,
+.shell.phone .mcp-url .btn { flex: none; }
+.shell.phone .setting .control .switch { align-self: flex-start; }
+.shell.phone .mcp-url .mono { flex: 1; min-width: 0; }
+/* A row whose only control is an icon button has nothing to stack — keep it on one
+   line, with the button where the thumb expects it. */
+.shell.phone .setting:has(.control > .iconbtn:only-child) { flex-direction: row; align-items: center; }
+.shell.phone .setting:has(.control > .iconbtn:only-child) .control { width: auto; justify-content: flex-end; }
+/* The part of a group header that is the user's own text — case preserved, because
+   `#draft` uppercased to `#DRAFT` names a tag they did not type. */
+.launch-h .lh-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+.launch-h .lh-actions { display: flex; align-items: center; gap: 2px; flex: none; }
+.launch-h .lh-verbatim { text-transform: none; font-weight: 500; color: var(--text-dim); letter-spacing: 0; }