anentrypoint-design 0.0.379 → 0.0.381

package/src/kits/os/theme.css

@@ -56,10 +56,10 @@ html, body {
     -webkit-backdrop-filter: blur(10px);
     border: none;
     color: var(--os-fg);
-    font: 13px var(--os-font);
+    font: var(--fs-tiny) var(--os-font);
     height: var(--os-bar-h);
-    padding: 0 12px;
-    gap: 6px;
+    padding: 0 var(--space-2-75);
+    gap: var(--space-1-75);
     box-shadow: none;
     display: flex;
     align-items: center;
@@ -80,11 +80,11 @@ html, body {
     font-family: var(--os-display);
     font-weight: 700;
     letter-spacing: -0.01em;
-    font-size: 15px;
+    font-size: var(--fs-sm);
     margin-right: 14px;
     display: inline-flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2);
     text-transform: lowercase;
 }
 .os-brand::before {
@@ -103,12 +103,12 @@ html, body {
     cursor: pointer;
     font: inherit;
     font-family: var(--os-font);
-    font-size: 13px;
+    font-size: var(--fs-tiny);
     border-radius: var(--r-pill, 999px);
     transition: background 80ms ease, color 80ms ease;
     display: inline-flex;
     align-items: center;
-    gap: 6px;
+    gap: var(--space-1-75);
     outline: none;
     text-transform: lowercase;
 }
@@ -127,10 +127,10 @@ html, body {
     min-width: 220px;
     top: calc(var(--os-bar-h) + var(--space-1, 4px));
     left: var(--space-2, 8px);
-    z-index: 9500;
+    z-index: var(--z-dropdown);
     display: none;
     flex-direction: column;
-    gap: 2px;
+    gap: var(--space-hair);
     pointer-events: auto;
     /* Long app registries must scroll, not extend past the viewport. */
     max-height: calc(100vh - var(--os-bar-h) - 16px);
@@ -143,7 +143,7 @@ html, body {
     width: 100%;
     text-align: left;
     border-radius: var(--os-radius-sm);
-    padding: 8px 10px;
+    padding: var(--space-2) var(--space-2-5);
     color: var(--os-fg);
     justify-content: flex-start;
 }
@@ -153,8 +153,8 @@ html, body {
  * builds the group structurally and toggles only the list's display; the static
  * layout (column flow + indent + arrow alignment) lives here so no visual rule
  * leaks back into thebird JS (zero-design-CSS contract). */
-.os-menu-group { display: flex; flex-direction: column; gap: 2px; }
-.os-menu-system-toggle { display: flex; align-items: center; gap: 6px; }
+.os-menu-group { display: flex; flex-direction: column; gap: var(--space-hair); }
+.os-menu-system-toggle { display: flex; align-items: center; gap: var(--space-1-75); }
 .os-menu-system-arrow { display: inline-flex; align-items: center; transition: transform 120ms ease; }
 .os-menu-system-arrow .ds-icon { width: 14px; height: 14px; }
 .os-menu-system-list { display: none; flex-direction: column; padding-left: 14px; }
@@ -165,8 +165,8 @@ html, body {
     color: var(--os-fg-2);
     font-variant-numeric: tabular-nums;
     font-family: var(--os-mono);
-    padding: 0 10px;
-    font-size: 12px;
+    padding: 0 var(--space-2-5);
+    font-size: var(--fs-micro);
 }
 
 .os-task {
@@ -174,8 +174,8 @@ html, body {
     background: var(--os-bg-1);
     color: var(--os-fg-2);
     border-radius: var(--r-pill, 999px);
-    padding: 6px 14px;
-    font-size: 12px;
+    padding: var(--space-1-75) 14px;
+    font-size: var(--fs-micro);
     font-family: var(--os-font);
     transition: background 80ms ease, color 80ms ease, box-shadow 80ms ease;
     max-width: 200px;
@@ -189,7 +189,7 @@ html, body {
 .os-task { min-height: 28px; }
 .os-task:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
 /* Empty taskbar reads as an intentional strip, not a stray blurred bar. */
-.os-task-empty { font-size: 11px; color: var(--os-fg-3); padding: 0 10px; font-family: var(--os-font); }
+.os-task-empty { font-size: var(--fs-nano); color: var(--os-fg-3); padding: 0 var(--space-2-5); font-family: var(--os-font); }
 .os-task.focused {
     background: var(--panel-select, var(--os-accent-soft));
     color: var(--os-fg);
@@ -197,55 +197,63 @@ html, body {
     box-shadow: inset 4px 0 0 var(--os-accent);
 }
 
-.wm-win {
-    background: var(--os-bg-1) !important;
-    border: none !important;
-    border-radius: var(--r-3, 18px) !important;
-    box-shadow: none !important;
+/* Window-chrome overrides of wm.css.
+ *
+ * wm.css is loaded by the consumer as a SEPARATE raw sheet (it is not part of
+ * the dist bundle), so its load order relative to this file is not guaranteed.
+ * These rules therefore carry the `.ds-247420` scope class: at (0,2,0) they
+ * beat wm.css's bare (0,1,0) `.wm-*` rules on SPECIFICITY, which is order-
+ * independent — replacing the `!important` wall that previously did the same
+ * job by force. Do not un-scope these; the scope IS the override mechanism. */
+.ds-247420 .wm-win {
+    background: var(--os-bg-1);
+    border: none;
+    border-radius: var(--r-3);
+    box-shadow: none;
     overflow: hidden;
 }
-.wm-win.wm-focused {
-    border: none !important;
-    box-shadow: inset 4px 0 0 var(--os-accent) !important;
+.ds-247420 .wm-win.wm-focused {
+    border: none;
+    box-shadow: inset var(--space-1) 0 0 var(--os-accent);
 }
 
-.wm-bar {
-    background: var(--os-bg-2) !important;
-    border: none !important;
-    padding: 8px 12px !important;
-    gap: 10px !important;
+.ds-247420 .wm-bar {
+    background: var(--os-bg-2);
+    border: none;
+    padding: var(--space-2) var(--space-2-75);
+    gap: var(--space-2-5);
 }
-.wm-title {
-    font: 13px var(--os-font) !important;
-    color: var(--os-fg-2) !important;
+.ds-247420 .wm-title {
+    font: var(--fs-tiny) var(--os-font);
+    color: var(--os-fg-2);
     letter-spacing: 0.005em;
     text-align: center;
     font-weight: 600;
     text-transform: lowercase;
 }
-.wm-btns { gap: 6px !important; order: -1; }
-.wm-btn {
-    width: 22px !important;
-    height: 22px !important;
-    border-radius: var(--r-1, 6px) !important;
-    border: none !important;
-    background: var(--os-bg-3) !important;
-    color: var(--os-fg-2) !important;
-    padding: 0 !important;
+.ds-247420 .wm-btns { gap: var(--space-1-75); order: -1; }
+.ds-247420 .wm-btn {
+    width: 22px;
+    height: 22px;
+    border-radius: var(--r-1);
+    border: none;
+    background: var(--os-bg-3);
+    color: var(--os-fg-2);
+    padding: 0;
     cursor: pointer;
-    font: 600 12px var(--os-mono) !important;
-    line-height: 1 !important;
-    display: inline-flex !important;
+    font: 600 var(--fs-micro) var(--os-mono);
+    line-height: 1;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: background 100ms ease, color 100ms ease;
 }
-.wm-btn:hover { background: var(--panel-hover, var(--os-bg-2)) !important; color: var(--os-fg) !important; }
+.ds-247420 .wm-btn:hover { background: var(--panel-hover, var(--os-bg-2)); color: var(--os-fg); }
 
-.wm-resize {
-    background: transparent !important;
-    width: 14px !important;
-    height: 14px !important;
+.ds-247420 .wm-resize {
+    background: transparent;
+    width: 14px;
+    height: 14px;
     color: var(--os-fg-3);
     opacity: 0.4;
 }
@@ -261,7 +269,7 @@ html, body {
         linear-gradient(135deg, transparent 0 45%, currentColor 45% 55%, transparent 55% 100%),
         linear-gradient(135deg, transparent 0 70%, currentColor 70% 80%, transparent 80% 100%);
 }
-.wm-body { background: var(--os-bg-1) !important; }
+.ds-247420 .wm-body { background: var(--os-bg-1); }
 
 .os-side-rail {
     position: fixed;
@@ -275,7 +283,7 @@ html, body {
     align-items: center;
     padding: var(--space-2, 8px) 0;
     gap: var(--space-1, 4px);
-    z-index: 9100;
+    z-index: var(--z-dock);
     pointer-events: auto;
 }
 .os-rail-btn {
@@ -299,7 +307,7 @@ html, body {
     position: fixed;
     inset: 0;
     background: var(--os-bg-0);
-    z-index: 9700;
+    z-index: var(--z-modal);
     pointer-events: auto;
     display: none;
     flex-direction: column;
@@ -318,7 +326,7 @@ html, body {
     box-sizing: border-box;
     background: var(--os-bg-2);
 }
-.os-drawer-title { color: var(--os-fg); font-family: var(--os-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; text-transform: lowercase; }
+.os-drawer-title { color: var(--os-fg); font-family: var(--os-display); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; text-transform: lowercase; }
 .os-drawer-close {
     width: 44px; height: 44px;
     border: none; background: transparent;
@@ -349,7 +357,7 @@ html, body {
     background: var(--os-bg-1);
     border: none;
     color: var(--os-fg);
-    font: 13px var(--os-font);
+    font: var(--fs-tiny) var(--os-font);
     min-height: 100px;
     cursor: pointer;
     transition: background 80ms ease;
@@ -364,34 +372,38 @@ html, body {
 .os-drawer-tile .lbl { color: var(--os-fg); font-weight: 600; }
 
 .os-spacer { flex: 1 1 auto; }
-.os-tray { display: flex; align-items: center; gap: 6px; }
-.os-instances { display: flex; gap: 4px; margin-left: 8px; flex: 0 1 40vw; max-width: 40vw; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 0 4px; -webkit-mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent); mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent); }
+.os-tray { display: flex; align-items: center; gap: var(--space-1-75); }
+.os-instances { display: flex; gap: var(--space-1); margin-left: var(--space-2); flex: 0 1 40vw; max-width: 40vw; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 0 var(--space-1); -webkit-mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent); mask-image: linear-gradient(to right, transparent, black 12px, black calc(100% - 12px), transparent); }
 .os-instances::-webkit-scrollbar { height: 4px; }
-.os-instances .os-btn { flex: 0 0 auto; min-width: 36px; padding: 2px 8px; font-family: var(--os-mono); font-size: 11px; }
+.os-instances .os-btn { flex: 0 0 auto; min-width: 36px; padding: var(--space-hair) var(--space-2); font-family: var(--os-mono); font-size: var(--fs-nano); }
 .os-instances .os-btn.active { background: var(--panel-select, var(--os-accent-soft)); color: var(--os-fg); border-color: var(--panel-accent, var(--os-accent)); box-shadow: inset 0 0 0 1px var(--panel-accent, var(--os-accent)); }
 .os-menubar [data-role="home"] { display: none; }
-.os-root { position: fixed; inset: 0; display: flex; flex-direction: column; pointer-events: none; z-index: 9300; }
+.os-root { position: fixed; inset: 0; display: flex; flex-direction: column; pointer-events: none; z-index: calc(var(--z-dock) + 2); }
 .os-menubar, .os-taskbar { pointer-events: auto; flex: 0 0 auto; }
 .os-taskbar { margin-top: auto; }
-.wm-root { top: var(--os-bar-h) !important; bottom: var(--os-bar-h) !important; inset: var(--os-bar-h) 0 var(--os-bar-h) 0 !important; }
+/* Desktop default: the window layer sits BETWEEN the menubar and taskbar.
+ * Scoped (0,2,0) to beat wm.css's bare `.wm-root{inset:0}` by specificity
+ * rather than `!important`. The brand "bars overlay" block further below
+ * re-asserts inset:0 for .ds-247420 at equal specificity + later source order. */
+.ds-247420 .wm-root { inset: var(--os-bar-h) 0 var(--os-bar-h) 0; }
 
 .app-pane { padding: var(--space-3, 16px); font: var(--fs-sm, 14px) var(--os-font); color: var(--os-fg); line-height: var(--lh-base, 1.55); overflow: auto; height: 100%; box-sizing: border-box; background: var(--os-bg-1); }
 .app-pane h2 { margin: 0 0 var(--space-2, 8px) 0; color: var(--os-fg); font-family: var(--os-display); font-size: var(--fs-xl, 21px); font-weight: 700; letter-spacing: -0.01em; line-height: var(--lh-snug, 1.2); }
 .app-pane p { margin: 0 0 var(--space-2, 8px) 0; color: var(--os-fg-2); }
 .app-pane ul { padding-left: var(--space-3, 16px); margin: var(--space-1, 4px) 0 var(--space-3, 16px); color: var(--os-fg-2); }
 .app-pane li { padding: var(--space-1, 4px) 0; }
-.app-pane code { font: var(--fs-tiny, 12px) var(--os-mono); background: var(--os-bg-2); padding: 1px 6px; border-radius: var(--r-1, 6px); color: var(--os-fg); }
+.app-pane code { font: var(--fs-tiny, 12px) var(--os-mono); background: var(--os-bg-2); padding: 1px var(--space-1-75); border-radius: var(--r-1, 6px); color: var(--os-fg); }
 .app-pane a { color: var(--os-accent); text-decoration: none; }
 .app-pane a:hover { text-decoration: underline; text-underline-offset: 2px; }
 .app-pane .meta { color: var(--os-fg-3); font-size: var(--fs-tiny, 12px); }
 .app-pane.mono { font: var(--fs-tiny, 12px) var(--os-mono); padding: var(--space-2, 8px); background: var(--os-bg-1); }
 .app-pane.mono[data-component="monitor-app"] { white-space: pre-wrap; line-height: 1.7; }
-.app-pane.mono .row { padding: 4px 8px; cursor: pointer; border-radius: var(--r-1, 6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.app-pane.mono .row { padding: var(--space-1) var(--space-2); cursor: pointer; border-radius: var(--r-1, 6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .app-pane.mono .row:hover { background: var(--panel-hover, var(--os-bg-2)); }
 .app-pane.mono .row.selected { background: var(--panel-select, var(--os-accent-soft)); box-shadow: inset 4px 0 0 var(--os-accent); }
-.app-pane.mono .head { color: var(--os-accent); margin-bottom: 8px; padding-bottom: 8px; font-weight: 600; letter-spacing: 0.02em; border-bottom: 1px solid var(--os-bg-3); }
-.app-pane.mono pre { background: var(--os-bg-2); padding: 10px 12px; margin: 8px 0 0 0; max-height: 220px; overflow: auto; white-space: pre-wrap; font: 11.5px var(--os-mono); border-radius: var(--r-1, 6px); color: var(--os-fg); border: none; }
-.app-shell-pane { margin: 0; padding: 8px; font: 12px var(--os-mono); color: var(--os-fg); background: var(--os-bg-0); height: 100%; overflow: auto; white-space: pre-wrap; box-sizing: border-box; }
+.app-pane.mono .head { color: var(--os-accent); margin-bottom: var(--space-2); padding-bottom: var(--space-2); font-weight: 600; letter-spacing: 0.02em; border-bottom: 1px solid var(--os-bg-3); }
+.app-pane.mono pre { background: var(--os-bg-2); padding: var(--space-2-5) var(--space-2-75); margin: var(--space-2) 0 0 0; max-height: 220px; overflow: auto; white-space: pre-wrap; font: var(--fs-nano) var(--os-mono); border-radius: var(--r-1, 6px); color: var(--os-fg); border: none; }
+.app-shell-pane { margin: 0; padding: var(--space-2); font: var(--fs-micro) var(--os-mono); color: var(--os-fg); background: var(--os-bg-0); height: 100%; overflow: auto; white-space: pre-wrap; box-sizing: border-box; }
 .app-canvas { width: 100%; height: 100%; background: var(--os-bg-0); display: block; cursor: default; }
 .app-canvas.x-display { background: #0b0d10; } /* intentional: fake CRT/terminal black screen, not a theme surface */
 .app-frame { width: 100%; height: 100%; border: 0; background: var(--os-bg-0); }
@@ -405,7 +417,7 @@ html, body {
 }
 @media (max-width: 1023px) and (min-width: 768px) {
     .os-side-rail { display: flex; }
-    .wm-root { left: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px)) !important; }
+    .ds-247420 .wm-root { left: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px)); }
     .os-menubar { padding-left: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px) + var(--space-2, 8px)); }
     .os-taskbar { padding-left: calc(var(--os-rail-w) + env(safe-area-inset-left, 0px) + var(--space-2, 8px)); }
     .os-menubar .os-instances { display: flex; }
@@ -415,17 +427,17 @@ html, body {
 @media (max-width: 767px) {
     :root { --os-bar-h: var(--os-bar-h-mobile); }
     body { overscroll-behavior: none; }
-    .os-menubar [data-role="home"] { display: inline-flex; min-width: var(--os-tap); min-height: var(--os-tap); padding: 0 12px; }
+    .os-menubar [data-role="home"] { display: inline-flex; min-width: var(--os-tap); min-height: var(--os-tap); padding: 0 var(--space-2-75); }
     .os-menubar [data-role="home"] .ic svg { width: 22px; height: 22px; }
-    .os-menubar { font-size: 14px; padding: env(safe-area-inset-top, 0) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); height: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)); }
+    .os-menubar { font-size: var(--fs-xs); padding: env(safe-area-inset-top, 0) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); height: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)); }
     .os-menubar [data-role="apps"] { display: none; }
-    .os-menubar .os-brand { font-size: 13px; margin-right: 6px; }
+    .os-menubar .os-brand { font-size: var(--fs-tiny); margin-right: var(--space-1-75); }
     .os-menubar [data-role="add"] { display: none; }
     .os-menubar .os-instances { display: none; }
     .os-clock { display: none; }
     .os-taskbar {
         padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0)) max(8px, env(safe-area-inset-left, 0px));
-        gap: 6px;
+        gap: var(--space-1-75);
         overflow-x: auto;
         overflow-y: hidden;
         flex-wrap: nowrap;
@@ -439,39 +451,46 @@ html, body {
         min-width: 120px;
         min-height: 44px;
         max-width: none;
-        padding: 10px 14px;
+        padding: var(--space-2-5) 14px;
         scroll-snap-align: start;
-        font-size: 13px;
+        font-size: var(--fs-tiny);
     }
-    .os-task.focused { background: var(--panel-select, var(--os-accent-soft)); box-shadow: inset 4px 0 0 var(--os-accent); }
-    .os-side-rail { display: none !important; }
-    .os-menu { left: 8px; right: 8px; min-width: 0; top: calc(var(--os-bar-h) + env(safe-area-inset-top, 0) + 4px); }
-    .wm-root {
-        top: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)) !important;
-        bottom: calc(var(--os-bar-h) + env(safe-area-inset-bottom, 0)) !important;
-        inset: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)) 0 calc(var(--os-bar-h) + env(safe-area-inset-bottom, 0)) 0 !important;
+    .os-task.focused { background: var(--panel-select, var(--os-accent-soft)); box-shadow: inset var(--space-1) 0 0 var(--os-accent); }
+    .os-side-rail { display: none; }
+    .os-menu { left: var(--space-2); right: var(--space-2); min-width: 0; top: calc(var(--os-bar-h) + env(safe-area-inset-top, 0) + var(--space-1)); }
+    .ds-247420 .wm-root {
+        inset: calc(var(--os-bar-h) + env(safe-area-inset-top, 0)) 0 calc(var(--os-bar-h) + env(safe-area-inset-bottom, 0)) 0;
     }
-    .wm-win {
-        position: absolute !important;
-        left: 0 !important; top: 0 !important;
-        width: 100% !important; height: 100% !important;
-        border: none !important;
-        border-radius: 0 !important;
-        box-shadow: none !important;
+    /* LOAD-BEARING !important: wm.css's own mobile block declares
+     * `.wm-win{left/top/width/height: ... !important}` (wm.css:157-165). An
+     * !important declaration can only be beaten by another !important one, so
+     * scoping alone cannot win here — these five must keep the flag. The
+     * non-!important properties in this rule do not, and were dropped. */
+    .ds-247420 .wm-win {
+        position: absolute;
+        left: 0 !important;
+        top: 0 !important;
+        width: 100% !important;
+        height: 100% !important;
+        border: none;
+        /* bare 0, not --r-0 (4px): a full-screen window has square corners.
+         * The radius lint intentionally does not flag unitless zero. */
+        border-radius: 0;
+        box-shadow: none;
     }
-    .wm-bar {
-        padding: 6px 10px !important;
-        height: 36px !important;
-        gap: 6px !important;
-        cursor: default !important;
-        touch-action: pan-y !important;
+    .ds-247420 .wm-bar {
+        padding: var(--space-1-75) var(--space-2-5);
+        height: 36px;
+        gap: var(--space-1-75);
+        cursor: default;
+        touch-action: pan-y;
         pointer-events: none;
     }
-    .wm-bar .wm-title { pointer-events: auto; font-size: 13px !important; }
-    .wm-bar .wm-btns { pointer-events: auto; }
-    .wm-btns .wm-btn:nth-child(1), .wm-btns .wm-btn:nth-child(2) { display: none !important; }
-    .wm-btns .wm-btn:nth-child(3) { width: 44px !important; height: 44px !important; border-radius: var(--r-1, 6px) !important; background: var(--os-bg-3) !important; color: var(--os-fg) !important; }
-    .wm-resize, .wm-edge { display: none !important; }
+    .ds-247420 .wm-bar .wm-title { pointer-events: auto; font-size: var(--fs-tiny); }
+    .ds-247420 .wm-bar .wm-btns { pointer-events: auto; }
+    .ds-247420 .wm-btns .wm-btn:nth-child(1), .ds-247420 .wm-btns .wm-btn:nth-child(2) { display: none; }
+    .ds-247420 .wm-btns .wm-btn:nth-child(3) { width: 44px; height: 44px; border-radius: var(--r-1); background: var(--os-bg-3); color: var(--os-fg); }
+    .ds-247420 .wm-resize, .ds-247420 .wm-edge { display: none; }
 }
 
 /* ---- data-attr theme/accent: deferred to the canonical theme ----
@@ -506,7 +525,12 @@ html, body {
  * ============================================================ */
 .ds-247420 {
     --ff-ui: var(--ff-body);
-    /* uniform bar height: 22px button + 6px+6px padding = 34px */
+    /* uniform bar height: 22px button + 6px+6px padding = 34px.
+     * LOAD-BEARING !important: `:root[data-density="compact"|"comfortable"|
+     * "spacious"]` (this file, "data-attr theme/accent" block above) redefines
+     * --os-bar-h at (0,2,0) — HIGHER than this rule's (0,1,0) — on the same
+     * <html> element. Without the flag the density presets silently override
+     * the brand's uniform 34px bar geometry. */
     --os-bar-h: 34px !important;
     --os-bar-h-mobile: 34px !important;
     --os-dock-h: 34px !important;
@@ -517,30 +541,47 @@ html, body {
      * #F5F0E4 variant. Re-assert both here rather than forcing the consumer to
      * opt into [data-theme="thebird"], which the OS boots past with
      * data-theme="auto". --accent-bright is pinned too so the ink-mode
-     * --accent: var(--accent-bright, ...) chain still resolves to brand green. */
+     * --accent: var(--accent-bright, ...) chain still resolves to brand green.
+     * LOAD-BEARING !important: colors_and_type.css defines --accent on
+     * `[data-accent="acid"|"green"|...]` and `[data-theme="ink"]` — attribute
+     * selectors at (0,1,0), the SAME specificity as this `.ds-247420` class
+     * rule, on the same <html> element. colors_and_type.css is always loaded
+     * first, but equal specificity + later source order would still let a
+     * [data-accent] preset win. The flag is the only thing pinning brand green. */
     --accent: var(--green) !important;
     --accent-bright: var(--green) !important;
     --paper: #F5F0E4;
 }
 /* Window titlebar matches the 34px bar height; clamp so menubar/taskbar/titlebar
  * heights are uniform. */
-.ds-247420 .wm-bar { height: 34px !important; min-height: 34px !important; box-sizing: border-box !important; padding-top: 4px !important; padding-bottom: 4px !important; }
+.ds-247420 .wm-bar { height: 34px; min-height: 34px; box-sizing: border-box; padding-top: var(--space-1); padding-bottom: var(--space-1); }
 /* Bars overlay windows: .wm-root fills full viewport, menubar/taskbar paint on top.
- * Tilde key hides them via .bars-hidden on <html>. */
-.ds-247420 .wm-root { top: 0 !important; bottom: 0 !important; inset: 0 !important; }
+ * Tilde key hides them via .bars-hidden on <html>.
+ * Wins over the desktop `.ds-247420 .wm-root{inset:var(--os-bar-h)...}` above by
+ * equal specificity + later source order (both are now (0,2,0)) — no flag needed. */
+.ds-247420 .wm-root { inset: 0; }
 /* With bars overlaying the wm-root, a maximized window's 34px titlebar would
  * sit exactly under the 34px menubar (untappable) and its body under the
  * taskbar; keep maximized windows between the bars on desktop/tablet. The
  * mobile band re-asserts its own contract in the responsive layer below. */
 @media (min-width: 768px) {
+  /* LOAD-BEARING !important: wm.css declares `.wm-win.wm-max{top:0!important;
+   * height:100%!important}` (wm.css:137-143). Only another !important can beat
+   * an !important, regardless of specificity. */
   .ds-247420 .wm-win.wm-max {
     top: var(--os-bar-h) !important;
     height: calc(100% - (var(--os-bar-h) * 2)) !important;
   }
 }
-/* Instance filtering hides off-instance windows via class, not inline style. */
+/* Instance filtering hides off-instance windows via class, not inline style.
+ * LOAD-BEARING !important: must beat wm.css's `.wm-win.wm-max{...!important}`
+ * geometry and any display set by the window's own state classes — a hidden
+ * window must stay hidden no matter which layout rule matched it. */
 .ds-247420 .wm-win.wm-inst-hidden,
 .wm-win.wm-inst-hidden { display: none !important; }
+/* LOAD-BEARING !important: `.os-menubar`/`.os-taskbar` carry `display:flex`
+ * from rules at equal-or-higher specificity in this sheet and in the responsive
+ * bands below; the tilde-key hide must beat all of them unconditionally. */
 html.bars-hidden .os-menubar,
 html.bars-hidden .os-taskbar { display: none !important; }
 .ds-247420 .os-task { border-radius: var(--r-pill, 999px); }
@@ -553,12 +594,12 @@ html.bars-hidden .os-taskbar { display: none !important; }
 
 /* OS-shell z-index layering: .os-root above .wm-root so its .os-menu dropdowns
  * paint above windows. */
-.ds-247420 .os-root { z-index: 9300 !important; }
-.ds-247420 .os-menubar { z-index: 9200 !important; position: relative; }
-.ds-247420 .os-taskbar { z-index: 9200 !important; position: relative; }
-.ds-247420 .os-menu { z-index: 9500 !important; }
-.ds-247420 .wm-root { z-index: 9000; }
-.ds-247420 .launcher-dock { z-index: 9100; }
+.ds-247420 .os-root { z-index: calc(var(--z-dock) + 2); }
+.ds-247420 .os-menubar { z-index: calc(var(--z-dock) + 1); position: relative; }
+.ds-247420 .os-taskbar { z-index: calc(var(--z-dock) + 1); position: relative; }
+.ds-247420 .os-menu { z-index: var(--z-dropdown); }
+.ds-247420 .wm-root { z-index: var(--z-window); }
+.ds-247420 .launcher-dock { z-index: var(--z-dock); }
 
 /* Touch/gesture hardening. */
 html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
@@ -572,7 +613,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   position: fixed;
   pointer-events: none;
   display: none;
-  z-index: 9050;
+  z-index: calc(var(--z-window) + 1);
   background: color-mix(in oklab, var(--os-accent) 20%, transparent);
   border: 2px solid var(--os-accent);
   border-radius: var(--r-0);
@@ -590,22 +631,22 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  padding: 16px 20px;
+  padding: var(--space-3) var(--space-3-5);
   background: var(--os-bg-2);
   border: 1px solid var(--os-accent);
   border-radius: var(--r-0);
-  z-index: 9600;
+  z-index: var(--z-modal);
   font-family: var(--ff-ui);
   color: var(--os-fg);
   min-width: 280px;
   box-shadow: var(--shadow-overlay);
 }
 .ds-247420 .wm-switcher-item {
-  padding: 8px 12px;
+  padding: var(--space-2) var(--space-2-75);
   border-radius: var(--r-0);
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--space-2-5);
 }
 .ds-247420 .wm-switcher-item.active {
   background: var(--os-accent);
@@ -637,16 +678,16 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 }
 
 /* ---- Session-UX surfaces: chips + modals + empty state ---- */
-.ds-247420 .os-instances { display: flex; gap: 6px; align-items: center; flex: 0 1 auto; min-width: 0; height: var(--os-bar-h, 34px); overflow-x: auto; overflow-y: hidden; padding: 0 4px; scrollbar-width: none; }
+.ds-247420 .os-instances { display: flex; gap: var(--space-1-75); align-items: center; flex: 0 1 auto; min-width: 0; height: var(--os-bar-h, 34px); overflow-x: auto; overflow-y: hidden; padding: 0 var(--space-1); scrollbar-width: none; }
 .ds-247420 .os-instances::-webkit-scrollbar { display: none; }
 
 .ds-247420 .tb-sess-chip {
-  display: inline-flex; align-items: center; gap: 6px;
-  height: 22px; padding: 0 6px 0 8px;
+  display: inline-flex; align-items: center; gap: var(--space-1-75);
+  height: 22px; padding: 0 var(--space-1-75) 0 var(--space-2);
   border-radius: var(--r-pill, 999px);
   background: color-mix(in oklab, var(--fg) 6%, transparent);
   color: var(--fg);
-  font-family: var(--ff-ui); font-size: 11px; font-weight: 500;
+  font-family: var(--ff-ui); font-size: var(--fs-nano); font-weight: 500;
   cursor: pointer;
   border: 1px solid transparent;
   transition: background 120ms ease, border-color 120ms ease;
@@ -663,43 +704,43 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .tb-sess-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ds-247420 .tb-sess-badge {
   display: inline-flex; align-items: center; justify-content: center;
-  min-width: 16px; height: 14px; padding: 0 4px;
+  min-width: 16px; height: 14px; padding: 0 var(--space-1);
   border-radius: var(--r-0);
   background: color-mix(in oklab, var(--fg) 14%, transparent);
-  font-size: 9px; font-weight: 600; line-height: 1;
+  font-size: var(--fs-pico); font-weight: 600; line-height: 1;
 }
 .ds-247420 .tb-sess-chip.active .tb-sess-badge { background: color-mix(in oklab, var(--os-accent) 30%, transparent); }
 .ds-247420 .tb-sess-x {
   width: 16px; height: 16px; line-height: 14px; text-align: center;
   border: 0; padding: 0; background: transparent;
   border-radius: 50%; cursor: pointer; color: inherit;
-  font-size: 14px; font-weight: 600;
+  font-size: var(--fs-xs); font-weight: 600;
   opacity: 0.55; transition: opacity 120ms ease, background 120ms ease;
 }
 .ds-247420 .tb-sess-chip:hover .tb-sess-x { opacity: 1; }
 .ds-247420 .tb-sess-x:hover { background: color-mix(in oklab, var(--danger) 30%, transparent); color: var(--on-color); }
 
 .ds-247420 .tb-sess-add {
-  display: inline-flex; align-items: center; gap: 4px;
-  height: 22px; padding: 0 10px;
+  display: inline-flex; align-items: center; gap: var(--space-1);
+  height: 22px; padding: 0 var(--space-2-5);
   border: 1px dashed color-mix(in oklab, var(--fg) 30%, transparent);
   background: transparent;
   border-radius: var(--r-pill, 999px);
-  font-family: var(--ff-ui); font-size: 11px; font-weight: 500;
+  font-family: var(--ff-ui); font-size: var(--fs-nano); font-weight: 500;
   color: var(--fg);
   cursor: pointer;
-  margin-left: 6px;
+  margin-left: var(--space-1-75);
   transition: border-color 120ms ease, background 120ms ease;
 }
 .ds-247420 .tb-sess-add:hover {
   border-color: var(--os-accent);
   background: color-mix(in oklab, var(--os-accent) 8%, transparent);
 }
-.ds-247420 .tb-sess-add-plus { font-size: 13px; line-height: 1; }
+.ds-247420 .tb-sess-add-plus { font-size: var(--fs-tiny); line-height: 1; }
 .ds-247420 .tb-sess-add-lbl { line-height: 1; }
 
 .tb-sess-overlay {
-  position: fixed; inset: 0; z-index: 9800;
+  position: fixed; inset: 0; z-index: var(--z-modal);
   background: var(--scrim);
   display: flex; align-items: center; justify-content: center;
   animation: tb-sess-fade 120ms ease;
@@ -715,29 +756,29 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   overflow: hidden;
   font-family: var(--ff-ui);
 }
-.tb-sess-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
-.tb-sess-modal-title { font-weight: 600; font-size: 14px; }
-.tb-sess-modal-x { background: transparent; border: 0; font-size: 20px; line-height: 1; cursor: pointer; color: inherit; padding: 0 4px; }
-.tb-sess-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
-.tb-sess-modal-lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
+.tb-sess-modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2-75) var(--space-3); border-bottom: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
+.tb-sess-modal-title { font-weight: 600; font-size: var(--fs-xs); }
+.tb-sess-modal-x { background: transparent; border: 0; font-size: var(--fs-xl); line-height: 1; cursor: pointer; color: inherit; padding: 0 var(--space-1); }
+.tb-sess-modal-body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
+.tb-sess-modal-lbl { font-size: var(--fs-nano); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
 .tb-sess-modal-input {
   width: 100%; box-sizing: border-box;
-  height: 32px; padding: 0 10px;
+  height: 32px; padding: 0 var(--space-2-5);
   border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent);
   border-radius: var(--r-0);
   background: color-mix(in oklab, var(--fg) 6%, var(--bg));
   color: inherit;
-  font-family: inherit; font-size: 13px;
+  font-family: inherit; font-size: var(--fs-tiny);
 }
 .tb-sess-modal-input:focus { outline: none; border-color: var(--os-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--os-accent) 20%, transparent); }
-.tb-sess-modal-hint { font-size: 11px; opacity: 0.7; }
-.tb-sess-modal-msg { font-size: 13px; }
-.tb-sess-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
+.tb-sess-modal-hint { font-size: var(--fs-nano); opacity: 0.7; }
+.tb-sess-modal-msg { font-size: var(--fs-tiny); }
+.tb-sess-modal-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-2-75) var(--space-3); border-top: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
 .tb-sess-modal-btn {
   height: 28px; padding: 0 14px;
   border-radius: var(--r-0); border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent);
   background: transparent; color: inherit;
-  font-family: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
+  font-family: inherit; font-size: var(--fs-micro); font-weight: 500; cursor: pointer;
   transition: background 120ms ease, border-color 120ms ease;
 }
 .tb-sess-modal-btn:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
@@ -747,7 +788,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .tb-sess-modal-btn.danger:hover { background: color-mix(in oklab, var(--danger) 80%, var(--ink)); }
 
 .tb-sess-empty {
-  position: fixed; inset: 0; z-index: 8900;
+  position: fixed; inset: 0; z-index: var(--z-window);
   display: flex; align-items: center; justify-content: center;
   pointer-events: none;
 }
@@ -758,17 +799,17 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
   border-radius: var(--r-2);
   box-shadow: var(--shadow-3);
-  padding: 32px 40px; text-align: center;
+  padding: var(--space-5) 40px; text-align: center;
   font-family: var(--ff-ui);
   max-width: 420px;
 }
-.tb-sess-empty-title { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
-.tb-sess-empty-sub { font-size: 13px; opacity: 0.7; margin-bottom: 20px; }
+.tb-sess-empty-title { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--space-1-75); }
+.tb-sess-empty-sub { font-size: var(--fs-tiny); opacity: 0.7; margin-bottom: var(--space-3-5); }
 .tb-sess-empty-cta {
-  height: 40px; padding: 0 24px;
+  height: 40px; padding: 0 var(--space-4);
   background: var(--os-accent); color: var(--on-color);
   border: 0; border-radius: var(--r-pill, 999px);
-  font-family: inherit; font-size: 14px; font-weight: 600;
+  font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
   cursor: pointer;
   transition: transform 120ms ease, box-shadow 120ms ease;
 }
@@ -776,30 +817,30 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 
 /* ---- Workspaces app — full-window session manager card grid ---- */
 .ds-247420 .tb-sessions-app { display: flex; flex-direction: column; height: 100%; font-family: var(--ff-ui); color: var(--fg); background: var(--bg); }
-.ds-247420 .tb-sessions-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, transparent); }
-.ds-247420 .tb-sessions-title { font-weight: 600; font-size: 14px; }
-.ds-247420 .tb-sessions-count { font-size: 12px; opacity: 0.6; margin-left: 4px; }
+.ds-247420 .tb-sessions-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2-5) 14px; border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, transparent); }
+.ds-247420 .tb-sessions-title { font-weight: 600; font-size: var(--fs-xs); }
+.ds-247420 .tb-sessions-count { font-size: var(--fs-micro); opacity: 0.6; margin-left: var(--space-1); }
 .ds-247420 .tb-sessions-spacer { flex: 1; }
-.ds-247420 .tb-sessions-btn { height: 28px; padding: 0 12px; border-radius: var(--r-0); border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent); background: transparent; color: inherit; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; }
+.ds-247420 .tb-sessions-btn { height: 28px; padding: 0 var(--space-2-75); border-radius: var(--r-0); border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent); background: transparent; color: inherit; font-size: var(--fs-micro); font-weight: 500; cursor: pointer; font-family: inherit; }
 .ds-247420 .tb-sessions-btn:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
 .ds-247420 .tb-sessions-btn.primary { background: var(--os-accent); color: var(--on-color); border-color: var(--os-accent); }
 .ds-247420 .tb-sessions-btn.danger { background: var(--danger); color: var(--on-color); border-color: var(--danger); }
 .ds-247420 .tb-sessions-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-.ds-247420 .tb-sessions-grid { flex: 1; overflow: auto; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; align-content: start; }
-.ds-247420 .tb-sessions-card { padding: 12px; border-radius: var(--r-1, 10px); border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent); background: color-mix(in oklab, var(--fg) 3%, transparent); display: flex; flex-direction: column; gap: 8px; transition: border-color 120ms ease, transform 120ms ease; }
+.ds-247420 .tb-sessions-grid { flex: 1; overflow: auto; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-2-75); align-content: start; }
+.ds-247420 .tb-sessions-card { padding: var(--space-2-75); border-radius: var(--r-1, 10px); border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent); background: color-mix(in oklab, var(--fg) 3%, transparent); display: flex; flex-direction: column; gap: var(--space-2); transition: border-color 120ms ease, transform 120ms ease; }
 .ds-247420 .tb-sessions-card:hover { border-color: var(--os-accent); }
 .ds-247420 .tb-sessions-card.active { border-color: var(--os-accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--os-accent) 30%, transparent); }
-.ds-247420 .tb-sessions-card-head { display: flex; align-items: center; gap: 8px; }
+.ds-247420 .tb-sessions-card-head { display: flex; align-items: center; gap: var(--space-2); }
 .ds-247420 .tb-sessions-card-check { width: 14px; height: 14px; cursor: pointer; flex: 0 0 14px; }
-.ds-247420 .tb-sessions-card-name { font-weight: 600; font-size: 13px; flex: 1; outline: none; padding: 2px 4px; border-radius: var(--r-0); }
+.ds-247420 .tb-sessions-card-name { font-weight: 600; font-size: var(--fs-tiny); flex: 1; outline: none; padding: var(--space-hair) var(--space-1); border-radius: var(--r-0); }
 .ds-247420 .tb-sessions-card-name[contenteditable="true"] { background: color-mix(in oklab, var(--fg) 8%, transparent); }
-.ds-247420 .tb-sessions-card-id { font-family: var(--os-mono, monospace); font-size: 10px; opacity: 0.5; }
-.ds-247420 .tb-sessions-card-stats { font-size: 11px; opacity: 0.7; display: flex; gap: 12px; }
-.ds-247420 .tb-sessions-card-actions { display: flex; gap: 6px; margin-top: 4px; }
-.ds-247420 .tb-sessions-card-actions button { flex: 1; height: 24px; font-size: 11px; padding: 0 8px; border-radius: var(--r-0); border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent); background: transparent; color: inherit; cursor: pointer; font-family: inherit; }
+.ds-247420 .tb-sessions-card-id { font-family: var(--os-mono, monospace); font-size: var(--fs-pico); opacity: 0.5; }
+.ds-247420 .tb-sessions-card-stats { font-size: var(--fs-nano); opacity: 0.7; display: flex; gap: var(--space-2-75); }
+.ds-247420 .tb-sessions-card-actions { display: flex; gap: var(--space-1-75); margin-top: var(--space-1); }
+.ds-247420 .tb-sessions-card-actions button { flex: 1; height: 24px; font-size: var(--fs-nano); padding: 0 var(--space-2); border-radius: var(--r-0); border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent); background: transparent; color: inherit; cursor: pointer; font-family: inherit; }
 .ds-247420 .tb-sessions-card-actions button:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
 .ds-247420 .tb-sessions-card-actions button.danger:hover { background: var(--danger); color: var(--on-color); border-color: var(--danger); }
-.ds-247420 .tb-sessions-empty-mid { padding: 40px; text-align: center; opacity: 0.6; font-size: 13px; }
+.ds-247420 .tb-sessions-empty-mid { padding: 40px; text-align: center; opacity: 0.6; font-size: var(--fs-tiny); }
 
 /* ---- prefers-contrast: more — strengthen borders + focus so the translucent
    chrome stays legible under forced/high-contrast user settings. ---- */
@@ -816,11 +857,18 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 
 /* ---- print: a web-OS desktop has no meaningful print form. Suppress the
    live chrome so a Ctrl+P does not waste pages on translucent panels. ---- */
+/* LOAD-BEARING !important throughout this block. Print must defeat two things
+ * no selector can outrank: (1) wm.css's `.wm-win.wm-max{left/top/width/height
+ * !important}` and its mobile `.wm-win{...!important}` band, and (2) the
+ * INLINE styles createWM()/renderWindow() write directly onto .wm-win/.wm-canvas
+ * for drag, resize and pan (element style attribute beats every stylesheet
+ * rule). Flattening the desktop to static flow for print is only possible by
+ * force. Do not remove. */
 @media print {
   .os-menubar, .os-taskbar, .wm-snap-preview,
   .tb-sess-overlay, .tb-switching, .wm-switcher { display: none !important; }
   .wm-root, .wm-canvas { position: static !important; transform: none !important; overflow: visible !important; }
-  .wm-win { position: static !important; box-shadow: none !important; border: 1px solid var(--fg) !important; page-break-inside: avoid; margin: 0 0 12px; width: auto !important; height: auto !important; }
+  .wm-win { position: static !important; box-shadow: none !important; border: 1px solid var(--fg) !important; page-break-inside: avoid; margin: 0 0 var(--space-2-75); width: auto !important; height: auto !important; }
   .wm-win.wm-min { display: none !important; }
 }
 
@@ -835,7 +883,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .wm-body:has(> .freddie-chat-wrap) { display: flex; flex-direction: column; padding: 0; }
 .ds-247420 .freddie-chat-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
 .ds-247420 .freddie-chat-wrap > freddie-chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
-.ds-247420 .cc-strip { flex: 0 0 auto; font-size: 12px; border-bottom: 1px solid color-mix(in oklab, var(--fg) 16%, transparent); }
+.ds-247420 .cc-strip { flex: 0 0 auto; font-size: var(--fs-micro); border-bottom: 1px solid color-mix(in oklab, var(--fg) 16%, transparent); }
 .ds-247420 .cc-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .4em; padding: .35em .7em; color: var(--fg, inherit); opacity: .75; }
 .ds-247420 .cc-toggle:hover { opacity: 1; }
 .ds-247420 .cc-toggle.cc-open { opacity: 1; font-weight: 600; }
@@ -844,12 +892,12 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .cc-row { display: flex; gap: .6em; flex-wrap: wrap; }
 .ds-247420 .cc-row > .cc-field { flex: 1 1 140px; min-width: 0; }
 .ds-247420 .cc-field { display: flex; flex-direction: column; gap: .2em; }
-.ds-247420 .cc-field-label { font-size: 11px; opacity: .65; text-transform: lowercase; }
+.ds-247420 .cc-field-label { font-size: var(--fs-nano); opacity: .65; text-transform: lowercase; }
 .ds-247420 .cc-strip select,
-.ds-247420 .cc-strip input { font: inherit; font-size: 12px; padding: .3em .4em; width: 100%; box-sizing: border-box; background: var(--panel-1, transparent); color: var(--fg, inherit); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-0); }
+.ds-247420 .cc-strip input { font: inherit; font-size: var(--fs-micro); padding: .3em .4em; width: 100%; box-sizing: border-box; background: var(--panel-1, transparent); color: var(--fg, inherit); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-0); }
 .ds-247420 .cc-acp-mode-wrap { display: flex; align-items: center; gap: .4em; }
 .ds-247420 .cc-acp-mode-wrap select { flex: 1; }
-.ds-247420 .cc-acp-status { opacity: .5; font-size: 13px; }
+.ds-247420 .cc-acp-status { opacity: .5; font-size: var(--fs-tiny); }
 .ds-247420 .cc-acp-status.cc-reachable { opacity: 1; color: var(--os-accent, #247420); }
 .ds-247420 .cc-details > summary { cursor: pointer; opacity: .7; padding: .2em 0; }
 .ds-247420 .cc-skills,
@@ -859,7 +907,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .cc-empty { opacity: .5; font-style: italic; }
 
 /* ---- fsbrowse files app (was: docs/fsbrowse-app.js ensureStyles) ---- */
-.ds-247420 .fsb-root { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; font-size: 13px; color: var(--fg, inherit); }
+.ds-247420 .fsb-root { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; font-size: var(--fs-tiny); color: var(--fg, inherit); }
 .ds-247420 .fsb-bar { flex: 0 0 auto; display: flex; align-items: center; gap: .4em; padding: .45em .6em; border-bottom: 1px solid color-mix(in oklab, var(--fg) 16%, transparent); flex-wrap: wrap; }
 .ds-247420 .fsb-crumbs { flex: 1; display: flex; align-items: center; gap: .2em; min-width: 0; overflow: auto; white-space: nowrap; }
 .ds-247420 .fsb-crumb { cursor: pointer; opacity: .75; text-decoration: none; color: inherit; }
@@ -873,17 +921,17 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .fsb-row:focus-visible { outline: 2px solid var(--os-accent); outline-offset: -2px; background: color-mix(in oklab, var(--fg) 6%, transparent); }
 .ds-247420 .fsb-icon { width: 1.3em; text-align: center; flex: 0 0 auto; }
 .ds-247420 .fsb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ds-247420 .fsb-size { opacity: .55; font-size: 11px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
+.ds-247420 .fsb-size { opacity: .55; font-size: var(--fs-nano); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
 .ds-247420 .fsb-actions { display: flex; gap: .3em; flex: 0 0 auto; opacity: 0; }
 /* Reveal row actions on hover OR keyboard focus-within OR coarse-pointer (touch),
  * so they aren't hover-only dead controls for keyboard/touch users. */
 .ds-247420 .fsb-row:hover .fsb-actions,
 .ds-247420 .fsb-row:focus-within .fsb-actions { opacity: 1; }
 @media (hover: none) { .ds-247420 .fsb-actions { opacity: 1; } }
-.ds-247420 .fsb-act { all: unset; cursor: pointer; padding: .1em .35em; border-radius: var(--r-0); opacity: .7; font-size: 12px; }
+.ds-247420 .fsb-act { all: unset; cursor: pointer; padding: .1em .35em; border-radius: var(--r-0); opacity: .7; font-size: var(--fs-micro); }
 .ds-247420 .fsb-act:hover { opacity: 1; background: color-mix(in oklab, var(--fg) 12%, transparent); }
 .ds-247420 .fsb-empty { opacity: .5; padding: 1.5em; text-align: center; font-style: italic; }
-.ds-247420 .fsb-view { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: .7em; white-space: pre-wrap; word-break: break-word; font: 12px/1.5 var(--os-mono, ui-monospace, monospace); background: var(--panel-1, transparent); }
+.ds-247420 .fsb-view { flex: 1; min-height: 0; overflow: auto; margin: 0; padding: .7em; white-space: pre-wrap; word-break: break-word; font: var(--fs-micro)/1.5 var(--os-mono, ui-monospace, monospace); background: var(--panel-1, transparent); }
 .ds-247420 .fsb-dropping { outline: 2px dashed var(--os-accent, #247420); outline-offset: -6px; }
 
 /* ---- wm canvas (infinite zoom/pan surface — was: docs/desktop-camera.js canvas.style.cssText) ----
@@ -893,33 +941,37 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .wm-canvas { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
 
 /* ---- wm context menu (was: docs/wm.js showWindowMenu cssText) ---- */
-.ds-247420 .wm-context-menu { position: fixed; background: var(--panel-2, #1a1a1a); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-0); z-index: 9700; font-family: var(--ff-ui); color: var(--fg, #fff); min-width: 140px; box-shadow: 0 8px 32px rgba(0, 0, 0, .35); padding: 4px; }
-.ds-247420 .wm-context-menu-item { display: block; width: 100%; padding: 7px 10px; border: none; border-radius: var(--r-0); background: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer; font-size: 13px; }
+/* No var() fallbacks here: colors_and_type.css is guaranteed loaded first for
+ * every .ds-247420 consumer (see the file header), and the old `#1a1a1a` /
+ * `#fff` fallbacks were baked DARK values that would have rendered white text
+ * on a near-white panel in paper mode had they ever fired. */
+.ds-247420 .wm-context-menu { position: fixed; background: var(--panel-2); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-0); z-index: var(--z-dropdown); font-family: var(--ff-ui); color: var(--fg); min-width: 140px; box-shadow: 0 var(--space-2) var(--space-5) rgba(0, 0, 0, .35); padding: var(--space-1); }
+.ds-247420 .wm-context-menu-item { display: block; width: 100%; padding: 7px var(--space-2-5); border: none; border-radius: var(--r-0); background: none; color: inherit; font-family: inherit; text-align: left; cursor: pointer; font-size: var(--fs-tiny); }
 .ds-247420 .wm-context-menu-item:hover { background: color-mix(in oklab, var(--fg) 8%, transparent); }
 
 /* ---- todo app (was: docs/apps.js todo-app cssText) ---- */
-.ds-247420 .tb-todo-bar { display: flex; gap: 6px; margin-bottom: 8px; }
-.ds-247420 .tb-todo-input { flex: 1; padding: 5px 8px; border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-0); font: inherit; background: var(--panel-1, transparent); color: var(--fg, inherit); }
-.ds-247420 .tb-todo-list { list-style: none; padding: 0; margin: 6px 0; }
-.ds-247420 .tb-todo-footer { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 11px; }
-.ds-247420 .tb-todo-status { margin-top: 10px; font-size: 11px; color: color-mix(in oklab, var(--fg) 55%, transparent); padding: 6px 8px; background: var(--panel-1, transparent); border-radius: var(--r-0); min-height: 14px; }
-.ds-247420 .tb-todo-item { display: flex; gap: 8px; align-items: center; padding: 5px 6px; border-bottom: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
+.ds-247420 .tb-todo-bar { display: flex; gap: var(--space-1-75); margin-bottom: var(--space-2); }
+.ds-247420 .tb-todo-input { flex: 1; padding: var(--space-1-5) var(--space-2); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-0); font: inherit; background: var(--panel-1, transparent); color: var(--fg, inherit); }
+.ds-247420 .tb-todo-list { list-style: none; padding: 0; margin: var(--space-1-75) 0; }
+.ds-247420 .tb-todo-footer { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-1-75); font-size: var(--fs-nano); }
+.ds-247420 .tb-todo-status { margin-top: var(--space-2-5); font-size: var(--fs-nano); color: color-mix(in oklab, var(--fg) 55%, transparent); padding: var(--space-1-75) var(--space-2); background: var(--panel-1, transparent); border-radius: var(--r-0); min-height: 14px; }
+.ds-247420 .tb-todo-item { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-1-5) var(--space-1-75); border-bottom: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
 .ds-247420 .tb-todo-text { flex: 1; }
 .ds-247420 .tb-todo-text.is-done { text-decoration: line-through; color: color-mix(in oklab, var(--fg) 45%, transparent); }
-.ds-247420 .tb-todo-del { padding: 2px 8px; }
+.ds-247420 .tb-todo-del { padding: var(--space-hair) var(--space-2); }
 
 /* ---- freddie keys panel (was: docs/freddie-keys.js cssText) ---- */
-.ds-247420 .fk-root { padding: 12px; overflow: auto; height: 100%; font-family: var(--os-mono, monospace); font-size: 12px; }
-.ds-247420 .fk-status { margin-top: 8px; color: color-mix(in oklab, var(--fg) 60%, transparent); min-height: 1.2em; }
-.ds-247420 .fk-row { display: grid; grid-template-columns: 140px 1fr auto auto; gap: 6px; align-items: center; margin: 2px 0; }
-.ds-247420 .fk-input { font-family: var(--os-mono, monospace); font-size: 11px; padding: 2px 4px; }
-.ds-247420 .fk-title { font-weight: 600; margin-bottom: 8px; }
-.ds-247420 .fk-nim-wrap { display: flex; gap: 6px; align-items: center; margin: 4px 0 10px 0; }
-.ds-247420 .fk-nim-in { font-family: var(--os-mono, monospace); font-size: 11px; padding: 2px 4px; flex: 1; }
-.ds-247420 .fk-badge { font-size: 10px; padding: 2px 6px; border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-hair); color: var(--os-accent, #247420); }
+.ds-247420 .fk-root { padding: var(--space-2-75); overflow: auto; height: 100%; font-family: var(--os-mono, monospace); font-size: var(--fs-micro); }
+.ds-247420 .fk-status { margin-top: var(--space-2); color: color-mix(in oklab, var(--fg) 60%, transparent); min-height: 1.2em; }
+.ds-247420 .fk-row { display: grid; grid-template-columns: 140px 1fr auto auto; gap: var(--space-1-75); align-items: center; margin: var(--space-hair) 0; }
+.ds-247420 .fk-input { font-family: var(--os-mono, monospace); font-size: var(--fs-nano); padding: var(--space-hair) var(--space-1); }
+.ds-247420 .fk-title { font-weight: 600; margin-bottom: var(--space-2); }
+.ds-247420 .fk-nim-wrap { display: flex; gap: var(--space-1-75); align-items: center; margin: var(--space-1) 0 var(--space-2-5) 0; }
+.ds-247420 .fk-nim-in { font-family: var(--os-mono, monospace); font-size: var(--fs-nano); padding: var(--space-hair) var(--space-1); flex: 1; }
+.ds-247420 .fk-badge { font-size: var(--fs-pico); padding: var(--space-hair) var(--space-1-75); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-hair); color: var(--os-accent, #247420); }
 .ds-247420 .fk-agent-title,
-.ds-247420 .fk-host-title { margin-top: 14px; font-size: 11px; color: color-mix(in oklab, var(--fg) 60%, transparent); }
-.ds-247420 .fk-summary { font-size: 10px; color: color-mix(in oklab, var(--fg) 60%, transparent); margin: 6px 0; }
+.ds-247420 .fk-host-title { margin-top: 14px; font-size: var(--fs-nano); color: color-mix(in oklab, var(--fg) 60%, transparent); }
+.ds-247420 .fk-summary { font-size: var(--fs-pico); color: color-mix(in oklab, var(--fg) 60%, transparent); margin: var(--space-1-75) 0; }
 
 /* ============================================================================
  *  Freddie chat redesign (2026-05-30) — extends ds-chat / freddie-chat with
@@ -930,34 +982,34 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
  * ============================================================================ */
 
 /* Centered chrome for system/tool/thinking — full row, no avatar column. */
-.ds-247420 .chat-msg.centered { grid-template-columns: 1fr; padding: 4px 12%; }
+.ds-247420 .chat-msg.centered { grid-template-columns: 1fr; padding: var(--space-1) 12%; }
 .ds-247420 .chat-msg.centered .chat-stack { align-items: center; }
-.ds-247420 .chat-msg.system .chat-bubble { background: transparent; border: 0; font-style: italic; opacity: 0.65; font-size: 12px; padding: 4px 8px; text-align: center; max-width: 100%; }
+.ds-247420 .chat-msg.system .chat-bubble { background: transparent; border: 0; font-style: italic; opacity: 0.65; font-size: var(--fs-micro); padding: var(--space-1) var(--space-2); text-align: center; max-width: 100%; }
 
 /* Tool-call card — collapsible details with status icon + name + label. */
-.ds-247420 .chat-tool { display: block; background: var(--panel-1, color-mix(in oklab, var(--fg) 4%, transparent)); border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent); border-radius: var(--r-0); padding: 0; max-width: min(640px, 92%); overflow: hidden; font-size: 12px; }
+.ds-247420 .chat-tool { display: block; background: var(--panel-1, color-mix(in oklab, var(--fg) 4%, transparent)); border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent); border-radius: var(--r-0); padding: 0; max-width: min(640px, 92%); overflow: hidden; font-size: var(--fs-micro); }
 .ds-247420 .chat-tool[open] { background: var(--panel-1, color-mix(in oklab, var(--fg) 6%, transparent)); }
 .ds-247420 .chat-tool.tool-error { border-color: color-mix(in oklab, var(--danger, #c0392b) 60%, transparent); }
 .ds-247420 .chat-tool.tool-done { border-color: color-mix(in oklab, var(--os-accent, #247420) 35%, transparent); }
-.ds-247420 .chat-tool-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; list-style: none; user-select: none; }
+.ds-247420 .chat-tool-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1-75) var(--space-2-5); cursor: pointer; list-style: none; user-select: none; }
 .ds-247420 .chat-tool-head::-webkit-details-marker { display: none; }
-.ds-247420 .chat-tool-icon { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; font-family: var(--os-mono, monospace); font-size: 12px; opacity: 0.7; }
+.ds-247420 .chat-tool-icon { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; font-family: var(--os-mono, monospace); font-size: var(--fs-micro); opacity: 0.7; }
 .ds-247420 .chat-tool.tool-error .chat-tool-icon { color: var(--danger, #c0392b); opacity: 1; }
 .ds-247420 .chat-tool.tool-done .chat-tool-icon { color: var(--os-accent, #247420); opacity: 1; }
 .ds-247420 .chat-tool.tool-running .chat-tool-icon { animation: chat-spin 1.4s linear infinite; }
 @keyframes chat-spin { to { transform: rotate(360deg); } }
-.ds-247420 .chat-tool-name { font-family: var(--os-mono, monospace); font-weight: 600; font-size: 12px; }
-.ds-247420 .chat-tool-label { opacity: 0.7; font-size: 11px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ds-247420 .chat-tool-status { font-size: 10px; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.05em; margin-left: auto; }
-.ds-247420 .chat-tool-body { padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
-.ds-247420 .chat-tool-section { display: flex; flex-direction: column; gap: 3px; }
-.ds-247420 .chat-tool-section-label { font-size: 10px; opacity: 0.5; text-transform: lowercase; letter-spacing: 0.05em; }
-.ds-247420 .chat-tool-pre { margin: 0; padding: 6px 8px; background: color-mix(in oklab, var(--fg) 4%, transparent); border-radius: var(--r-0); max-height: 200px; overflow: auto; font: 11px/1.45 var(--os-mono, ui-monospace, monospace); white-space: pre-wrap; word-break: break-word; }
+.ds-247420 .chat-tool-name { font-family: var(--os-mono, monospace); font-weight: 600; font-size: var(--fs-micro); }
+.ds-247420 .chat-tool-label { opacity: 0.7; font-size: var(--fs-nano); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ds-247420 .chat-tool-status { font-size: var(--fs-pico); opacity: 0.55; text-transform: uppercase; letter-spacing: 0.05em; margin-left: auto; }
+.ds-247420 .chat-tool-body { padding: var(--space-1) var(--space-2-5) var(--space-2-5); display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
+.ds-247420 .chat-tool-section { display: flex; flex-direction: column; gap: var(--space-half); }
+.ds-247420 .chat-tool-section-label { font-size: var(--fs-pico); opacity: 0.5; text-transform: lowercase; letter-spacing: 0.05em; }
+.ds-247420 .chat-tool-pre { margin: 0; padding: var(--space-1-75) var(--space-2); background: color-mix(in oklab, var(--fg) 4%, transparent); border-radius: var(--r-0); max-height: 200px; overflow: auto; font: var(--fs-nano)/1.45 var(--os-mono, ui-monospace, monospace); white-space: pre-wrap; word-break: break-word; }
 .ds-247420 .chat-tool-pre.is-error { color: var(--danger, #c0392b); }
 
 /* Thinking indicator — typing dots + label, transient (assistant-side). */
-.ds-247420 .chat-thinking { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; padding: 4px 8px; opacity: 0.7; font-size: 12px; }
-.ds-247420 .chat-thinking-dots { display: inline-flex; gap: 3px; }
+.ds-247420 .chat-thinking { display: inline-flex; align-items: center; gap: var(--space-2); background: transparent; border: 0; padding: var(--space-1) var(--space-2); opacity: 0.7; font-size: var(--fs-micro); }
+.ds-247420 .chat-thinking-dots { display: inline-flex; gap: var(--space-half); }
 .ds-247420 .chat-thinking-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--fg); opacity: 0.4; animation: chat-thinking-bounce 1.2s infinite ease-in-out; }
 .ds-247420 .chat-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
 .ds-247420 .chat-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
@@ -968,13 +1020,13 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 }
 
 /* Empty-state suggestion chips — clickable prompts. */
-.ds-247420 .chat-empty-suggestions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; max-width: 480px; }
-.ds-247420 .chat-empty-suggestion { all: unset; cursor: pointer; font-size: 12px; padding: 6px 10px; border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-pill, 999px); background: var(--panel-1, transparent); transition: background 120ms ease, border-color 120ms ease; }
+.ds-247420 .chat-empty-suggestions { display: flex; flex-wrap: wrap; gap: var(--space-1-75); justify-content: center; margin-top: var(--space-2-75); max-width: 480px; }
+.ds-247420 .chat-empty-suggestion { all: unset; cursor: pointer; font-size: var(--fs-micro); padding: var(--space-1-75) var(--space-2-5); border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); border-radius: var(--r-pill, 999px); background: var(--panel-1, transparent); transition: background 120ms ease, border-color 120ms ease; }
 .ds-247420 .chat-empty-suggestion:hover { background: color-mix(in oklab, var(--os-accent, #247420) 10%, transparent); border-color: var(--os-accent, #247420); }
 .ds-247420 .chat-empty-suggestion:focus-visible { outline: 2px solid var(--os-accent, #247420); outline-offset: 2px; }
 
 /* Cancel-while-generating button replaces send. */
-.ds-247420 .chat-composer .send.cancel { background: var(--danger, #c0392b); color: var(--on-color, #fff); }
+.ds-247420 .chat-composer .send.cancel { background: var(--danger); color: var(--on-color); }
 .ds-247420 .chat-composer .send.cancel:hover { background: color-mix(in oklab, var(--danger, #c0392b) 80%, black); }
 
 /* ============================================================================
@@ -1025,16 +1077,18 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   min-height: 0;
   height: 100%;
   overflow: hidden;
-  /* zero legacy .ds-247420 .chat + .chat (app-shell) token leak — host
-     carries `.chat` class so the legacy full-page chat-card rule
-     (margin:12px 0; max-width:820; min-height:480; padding-bottom:50)
-     applies. Bump specificity with the doubled-class selector. */
-  margin: 0 !important;
-  padding: 0 !important;
-  gap: 0 !important;
-  max-width: none !important;
-  background: transparent !important;
-  border-radius: 0 !important;
+  /* zero the legacy `.chat` card treatment (app-shell.css chat-polish.css,
+     which the bundle scopes to `.ds-247420 .chat` = (0,2,0)) leaking onto the
+     host element, which also carries the `.chat` class. The
+     `freddie-chat.chat` / `ds-chat.chat` compound selectors here are (0,2,1) —
+     strictly higher — so these win on SPECIFICITY alone, independent of which
+     sheet loads first. That is why no !important is needed. */
+  margin: 0;
+  padding: 0;
+  gap: 0;
+  max-width: none;
+  background: transparent;
+  border-radius: 0;
 }
 .ds-247420 freddie-chat > .chat,
 .ds-247420 ds-chat > .chat {
@@ -1051,8 +1105,8 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .chat-head {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-2-75);
   border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
   min-height: 38px;
   flex: 0 0 auto;
@@ -1066,7 +1120,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   flex-shrink: 0;
 }
 .ds-247420 .chat-head .ds-chat-title {
-  font-size: 13px;
+  font-size: var(--fs-tiny);
   font-weight: 600;
   margin: 0;
   white-space: nowrap;
@@ -1075,7 +1129,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   flex-shrink: 0;
 }
 .ds-247420 .chat-head .sub {
-  font-size: 12px;
+  font-size: var(--fs-micro);
   opacity: 0.7;
   white-space: nowrap;
   overflow: hidden;
@@ -1090,10 +1144,10 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: 12px;
+  padding: var(--space-2-75);
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--space-1-75);
   scrollbar-width: thin;
   scrollbar-color: color-mix(in oklab, var(--fg) 22%, transparent) transparent;
   scroll-behavior: smooth;
@@ -1115,7 +1169,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .chat-msg {
   display: grid;
   grid-template-columns: 28px 1fr;
-  gap: 8px;
+  gap: var(--space-2);
   align-items: start;
 }
 .ds-247420 .chat-msg.you {
@@ -1126,7 +1180,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .chat-msg.centered {
   grid-template-columns: 1fr;
   justify-items: center;
-  padding: 2px 12%;
+  padding: var(--space-hair) 12%;
 }
 
 .ds-247420 .chat-avatar {
@@ -1138,7 +1192,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: var(--fs-micro);
   font-weight: 600;
   text-transform: lowercase;
   flex-shrink: 0;
@@ -1146,13 +1200,13 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 }
 .ds-247420 .chat-msg.you .chat-avatar {
   background: var(--os-accent, #247420);
-  color: var(--on-color, #fff);
+  color: var(--on-color);
 }
 
 .ds-247420 .chat-stack {
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: var(--space-half);
   min-width: 0;
   align-items: flex-start;
 }
@@ -1162,8 +1216,8 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   color: var(--fg);
   border: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
   border-radius: var(--r-1);
-  padding: 8px 12px;
-  font-size: 14px;
+  padding: var(--space-2) var(--space-2-75);
+  font-size: var(--fs-xs);
   line-height: 1.5;
   max-width: min(720px, 86%);
   overflow-wrap: anywhere;
@@ -1171,19 +1225,19 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 }
 .ds-247420 .chat-msg.you .chat-bubble {
   background: var(--os-accent, #247420);
-  color: var(--on-color, #fff);
+  color: var(--on-color);
   border-color: color-mix(in oklab, var(--os-accent, #247420) 60%, black);
   border-bottom-right-radius: 4px;
 }
 .ds-247420 .chat-msg.them .chat-bubble {
   border-bottom-left-radius: 4px;
 }
-.ds-247420 .chat-bubble + .chat-bubble { margin-top: 4px; }
+.ds-247420 .chat-bubble + .chat-bubble { margin-top: var(--space-1); }
 .ds-247420 .chat-bubble pre,
-.ds-247420 .chat-bubble code { font-family: var(--os-mono, ui-monospace, monospace); font-size: 12.5px; }
+.ds-247420 .chat-bubble code { font-family: var(--os-mono, ui-monospace, monospace); font-size: var(--fs-micro); }
 .ds-247420 .chat-bubble pre {
-  margin: 6px 0 0;
-  padding: 8px 10px;
+  margin: var(--space-1-75) 0 0;
+  padding: var(--space-2) var(--space-2-5);
   background: color-mix(in oklab, var(--fg) 6%, transparent);
   border-radius: var(--r-0);
   max-height: 320px;
@@ -1193,7 +1247,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 }
 .ds-247420 .chat-msg.you .chat-bubble pre {
   background: color-mix(in oklab, black 25%, transparent);
-  color: var(--on-color, #fff);
+  color: var(--on-color);
 }
 .ds-247420 .chat-bubble a {
   color: inherit;
@@ -1204,12 +1258,12 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 }
 
 .ds-247420 .chat-meta {
-  font-size: 11px;
+  font-size: var(--fs-nano);
   opacity: 0.55;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 0 4px;
+  gap: var(--space-1-75);
+  padding: 0 var(--space-1);
 }
 .ds-247420 .chat-msg.you .chat-meta { flex-direction: row-reverse; }
 
@@ -1220,18 +1274,18 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   align-items: center;
   justify-content: center;
   text-align: center;
-  padding: 32px 24px;
+  padding: var(--space-5) var(--space-4);
   color: var(--fg);
-  gap: 4px;
+  gap: var(--space-1);
 }
 .ds-247420 .chat-empty-title {
-  font-size: 18px;
+  font-size: var(--fs-lg);
   font-weight: 600;
   margin: 0;
   letter-spacing: -0.01em;
 }
 .ds-247420 .chat-empty-sub {
-  font-size: 13px;
+  font-size: var(--fs-tiny);
   opacity: 0.65;
   margin: 0;
   max-width: 420px;
@@ -1241,19 +1295,19 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .chat-composer {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  padding: 8px 10px;
+  gap: var(--space-1-75);
+  padding: var(--space-2) var(--space-2-5);
   border-top: 1px solid color-mix(in oklab, var(--fg) 10%, transparent);
   background: var(--panel-0, transparent);
   flex: 0 0 auto;
 }
 .ds-247420 .chat-composer textarea {
-  font: 14px/1.45 var(--os-ui, system-ui), sans-serif;
+  font: var(--fs-xs)/1.45 var(--os-ui, system-ui), sans-serif;
   background: var(--panel-1, color-mix(in oklab, var(--fg) 5%, transparent));
   color: var(--fg);
   border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
   border-radius: var(--r-0);
-  padding: 8px 10px;
+  padding: var(--space-2) var(--space-2-5);
   resize: none;
   outline: none;
   width: 100%;
@@ -1273,7 +1327,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .chat-composer-toolbar {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--space-1);
 }
 .ds-247420 .composer-btn {
   all: unset;
@@ -1305,7 +1359,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   height: 32px;
   border-radius: var(--r-0);
   background: var(--os-accent, #247420);
-  color: var(--on-color, #fff);
+  color: var(--on-color);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1334,7 +1388,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 
 .ds-247420 .aicat-face {
   font-family: var(--os-mono, ui-monospace, monospace);
-  font-size: 11px;
+  font-size: var(--fs-nano);
   line-height: 1.2;
   margin: 0;
 }
@@ -1344,13 +1398,13 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .gm-recall-hits {
   display: flex;
   flex-direction: column;
-  gap: 6px;
-  margin: 8px 0;
+  gap: var(--space-1-75);
+  margin: var(--space-2) 0;
 }
 .ds-247420 .gm-recall-hit {
   border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
   border-radius: var(--r-0);
-  padding: 8px 10px;
+  padding: var(--space-2) var(--space-2-5);
   background: color-mix(in oklab, var(--bg) 92%, var(--fg) 2%);
 }
 .ds-247420 .gm-recall-hit.is-pruned {
@@ -1359,12 +1413,12 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 }
 .ds-247420 .gm-recall-meta {
   font-family: var(--os-mono, ui-monospace, monospace);
-  font-size: 11px;
+  font-size: var(--fs-nano);
   color: color-mix(in oklab, var(--fg) 60%, transparent);
-  margin-bottom: 4px;
+  margin-bottom: var(--space-1);
 }
 .ds-247420 .gm-recall-text {
-  font-size: 13px;
+  font-size: var(--fs-tiny);
   line-height: 1.4;
   white-space: pre-wrap;
   word-break: break-word;
@@ -1372,21 +1426,26 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .gm-recall-acts {
   display: flex;
   justify-content: flex-end;
-  margin-top: 6px;
+  margin-top: var(--space-1-75);
 }
 .ds-247420 .gm-recall-forget {
-  font-size: 11px;
-  padding: 2px 8px;
+  font-size: var(--fs-nano);
+  padding: var(--space-hair) var(--space-2);
 }
 
 /* ============================================================
  * thebird RESPONSIVE PERFECTION layer (desk / tablet / mobile).
- * Appended LAST so .ds-247420-scoped rules here win source order over the
- * earlier brand overrides (.ds-247420 .wm-root{inset:0!important} at the
- * "bars overlay" block, .ds-247420 .wm-bar{height:34px!important}, the
- * unconditional .ds-247420 .os-instances{display:flex}) that were silently
- * defeating the @media(max-width:767px)/(768-1023px) contracts. Every rule
- * below is a measured fix for a confirmed responsive-audit finding.
+ * Appended LAST so the .ds-247420-scoped rules here win by SOURCE ORDER at
+ * equal (0,2,0) specificity over the earlier brand overrides
+ * (.ds-247420 .wm-root{inset:0} at the "bars overlay" block,
+ * .ds-247420 .wm-bar{height:34px}, the unconditional
+ * .ds-247420 .os-instances{display:flex}) that were silently defeating the
+ * @media(max-width:767px)/(768-1023px) contracts. Every rule below is a
+ * measured fix for a confirmed responsive-audit finding.
+ *
+ * Because every competing rule is now equally scoped, source order alone
+ * decides — so this layer needs no !important except where it must beat
+ * wm.css's own !important declarations or wm.js's inline styles.
  *
  * View classes: desktop >1023px (free-float windows, full menubar);
  * tablet 768..1023px (side-rail, wm-root left-offset); mobile <=767px AND
@@ -1399,6 +1458,9 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
  * layer pinned --os-bar-h-mobile to 34px which left no room for 44px tap
  * targets in the bar. Restore 52px on mobile/touch. --- */
 @media (max-width: 767px), (max-height: 500px) and (orientation: landscape) {
+  /* LOAD-BEARING !important: same reason as the brand block's --os-bar-h —
+   * `:root[data-density="…"]` redefines --os-bar-h at (0,2,0), higher than
+   * this (0,1,0) class rule on the same <html> element. */
   .ds-247420 { --os-bar-h-mobile: 52px !important; --os-bar-h: 52px !important; }
 }
 
@@ -1409,55 +1471,68 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
  * specificity so windows sit BETWEEN the bars. --- */
 @media (max-width: 767px), (max-height: 500px) and (orientation: landscape) {
   .ds-247420 .wm-root {
-    top: calc(var(--os-bar-h) + env(safe-area-inset-top, 0px)) !important;
-    bottom: calc(var(--os-bar-h) + env(safe-area-inset-bottom, 0px)) !important;
     inset: calc(var(--os-bar-h) + env(safe-area-inset-top, 0px)) 0
-           calc(var(--os-bar-h) + env(safe-area-inset-bottom, 0px)) 0 !important;
+           calc(var(--os-bar-h) + env(safe-area-inset-bottom, 0px)) 0;
   }
+  /* LOAD-BEARING !important on the geometry four: wm.css's mobile band
+   * (wm.css:157-165) declares left/top/width/height with !important, and
+   * wm.js writes left/top/width/height as INLINE styles during drag/resize.
+   * Neither can be beaten by specificity — only by !important. The remaining
+   * properties here need no flag. */
   .ds-247420 .wm-win {
-    position: absolute !important;
+    position: absolute;
     left: 0 !important; top: 0 !important;
     width: 100% !important; height: 100% !important;
-    border: none !important; border-radius: 0 !important; box-shadow: none !important;
+    border: none;
+    /* bare 0: full-screen window has square corners (not --r-0's 4px) */
+    border-radius: 0;
+    box-shadow: none;
   }
-  /* titlebar must host a 44px close button -> 44px bar (beats the 34px brand clamp) */
+  /* titlebar must host a 44px close button -> 44px bar (beats the 34px brand
+   * clamp by later source order at equal specificity) */
   .ds-247420 .wm-bar {
-    height: 44px !important; min-height: 44px !important;
-    padding: 0 10px !important; align-items: center !important;
+    height: 44px; min-height: 44px;
+    padding: 0 var(--space-2-5); align-items: center;
     pointer-events: none;
   }
   .ds-247420 .wm-bar .wm-title { pointer-events: auto; }
   .ds-247420 .wm-bar .wm-btns { pointer-events: auto; }
   /* hide min+max on mobile full-screen; keep close at 44x44 fully inside the bar */
   .ds-247420 .wm-btns .wm-btn:nth-child(1),
-  .ds-247420 .wm-btns .wm-btn:nth-child(2) { display: none !important; }
+  .ds-247420 .wm-btns .wm-btn:nth-child(2) { display: none; }
+  /* LOAD-BEARING !important on width/height: wm.css's `@media (pointer:coarse)`
+   * sets `.wm-btn{min-width:44px;min-height:44px}` and this must also beat the
+   * (0,3,0) `.ds-247420 .wm-btns .wm-btn` coarse-pointer rule below, which is
+   * later in source order. Colors/radius need no flag. */
   .ds-247420 .wm-btns .wm-btn:nth-child(3) {
     width: 44px !important; height: 44px !important;
-    border-radius: var(--r-1, 6px) !important;
-    background: var(--os-bg-3) !important; color: var(--os-fg) !important;
+    border-radius: var(--r-1);
+    background: var(--os-bg-3); color: var(--os-fg);
   }
-  .ds-247420 .wm-resize, .ds-247420 .wm-edge { display: none !important; }
-  /* collapse the menubar workspace cluster on mobile (the unconditional
-   * .ds-247420 .os-instances{display:flex} otherwise leaves it visible) */
+  .ds-247420 .wm-resize, .ds-247420 .wm-edge { display: none; }
+  /* collapse the menubar workspace cluster on mobile. `.os-menubar
+   * .os-instances` is (0,3,0) here, beating the unconditional (0,2,0)
+   * `.ds-247420 .os-instances{display:flex}` on specificity. */
   .ds-247420 .os-menubar .os-instances,
-  .ds-247420 .os-instances { display: none !important; }
+  .ds-247420 .os-instances { display: none; }
   .ds-247420 .os-menubar [data-role="add"],
-  .ds-247420 .tb-sess-add { display: none !important; }
+  .ds-247420 .tb-sess-add { display: none; }
 }
 
 /* --- landscape-phone (short + wide + touch): also hide the side-rail that the
  * 768-1023 tablet band would otherwise show, and force the mobile menubar. --- */
 @media (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
-  .ds-247420 .os-side-rail { display: none !important; }
+  .ds-247420 .os-side-rail { display: none; }
 }
 
 /* --- tablet (768..1023): the side-rail offset for .wm-root was defeated by
- * the scoped inset:0; re-assert it at scoped specificity using the inset
- * shorthand so it actually wins. --- */
+ * the scoped inset:0; re-asserted here at equal (0,2,0) specificity but later
+ * source order, which is enough now that the earlier rule is also scoped.
+ * `inset` alone carries the left offset — the separate `left` declaration it
+ * used to be paired with was redundant with this shorthand. --- */
 @media (min-width: 768px) and (max-width: 1023px) {
   .ds-247420 .wm-root {
-    left: var(--os-rail-w) !important;
-    inset: 0 0 0 var(--os-rail-w) !important;
+    inset: 0 0 0 var(--os-rail-w);
   }
 }
 
@@ -1471,7 +1546,7 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
   /* taskbar tasks (also widen and snap on the whole touch band, not mobile-only) */
   .ds-247420 .os-task {
     min-height: var(--os-tap, 44px); min-width: 120px;
-    padding: 10px 14px; scroll-snap-align: start;
+    padding: var(--space-2-5) 14px; scroll-snap-align: start;
   }
   .ds-247420 .os-taskbar { scroll-snap-type: x proximity; }
   /* menubar workspace controls (when shown on tablet) */
@@ -1513,4 +1588,5 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 
 /* --- browser-pane: the generic .app-pane 16px prose padding stranded the
  * iframe 16px on every side; the browser pane is full-bleed. --- */
-.ds-247420 .app-pane.browser-app { padding: 0 !important; }
+/* (0,3,0) beats the generic `.app-pane` (0,1,0) prose padding on specificity. */
+.ds-247420 .app-pane.browser-app { padding: 0; }