smoodly 0.0.24 → 0.0.26

package/dist/admin/ui/theme.js

@@ -7,70 +7,91 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 // is scoped under `.sm-admin` — never `:root` — so the host's own custom
 // properties and class names can't collide with ours.
 //
-// The values come from design_handoff_smoodly_warm/tokens/*.css (the warm
-// look: Spruce accent, cream ground, cards instead of hairlines, pills).
-// Every rule below reads its colours, radii, sizes and letter case from
-// tokens, so the previous look survives as a token block alone — see the
-// TEMPORARY `technical` block further down. Hover/focus/disabled live here
-// rather than in inline styles, which is the whole reason for the stylesheet.
+// The values come from design_handoff_smoodly_neutral/tokens/*.css (the
+// neutral look, 2026-09-25: a navy frame around a white sheet, soft grey
+// tiles instead of white cards, white fields on the tiles, Spruce accent,
+// sans only). Every rule below reads its colours, radii, sizes and letter
+// case from tokens, so a look is a token block: the previous warm look
+// survives as the `warm` block further down, on `data-look="warm"`.
+// Hover/focus/disabled live here rather than in inline styles, which is
+// the whole reason for the stylesheet.
 import { INSPECTOR_W_KEY, MIN_INSPECTOR_W } from "./resize.js";
 const TOKENS_LIGHT = `
   --accent:#1C6E5B; --accent-hover:#175C4C; --accent-soft:#DDEBE4; --accent-line:#9CC9B8; --on-accent:#FFFFFF;
   --green-700:#1F7A46; --green-50:#E3F3EA; --green-300:#6FD39A; --green-500:#2E9E5B;
   --amber-700:#8A5A00; --amber-50:#FBF1DC; --amber-300:#E8B85A;
-  --red-700:#B42318; --red-50:#FDECEC; --red-300:#F5A5A0;
+  --red-700:#C4372E; --red-50:#FBE9E7; --red-300:#F5A5A0;
 
-  --bg:#F4F1EB; --canvas:#ECE8DF; --surface:#FFFFFF; --surface-form:#FDFCFA; --surface-inset:#F4F1EB;
-  --input-bg:#FFFFFF; --input-hover-bg:#FFFFFF; --input-focus-bg:#FFFFFF; --input-border:var(--line);
-  --line:#E8E3DA; --line-dashed:#D8D1C4; --line-soft:#EFEBE3;
-  --text:#1F1D1A; --text-secondary:#4E4942; --text-muted:#7A746A; --text-subtle:#A39C90; --text-disabled:#C4BDB1;
+  /* The shell: navy frame, white sheet, grey tiles on the sheet, white fields on the tiles. */
+  --frame:#151727; --sheet:#FFFFFF;
+  --bg:var(--sheet); --canvas:#ECEDF1; --surface:#F6F6F6; --surface-form:#F6F6F6; --surface-inset:#FFFFFF;
+  --menu-bg:#FFFFFF;
+  --input-bg:#FFFFFF; --input-hover-bg:#FFFFFF; --input-focus-bg:#FFFFFF; --input-border:transparent;
+  --line:#E4E5EA; --line-dashed:#CFD1D9; --line-soft:#ECEDF1;
+  --text:#151727; --text-secondary:#454A5C; --text-muted:#6B6F80; --text-subtle:#9A9EAB; --text-disabled:#C5C8D2;
   --selection:var(--accent); --nav-active-bg:var(--accent-soft); --nav-active-fg:var(--accent);
   --selection-global:#C4620C;
-  --hover:rgba(31,29,26,.05); --press:rgba(31,29,26,.09); --control-hover:#F8F6F1;
-  --btn-secondary-bg:var(--surface); --btn-secondary-hover:#F8F6F1; --tile-hover:var(--surface);
+  --hover:rgba(21,23,39,.05); --press:rgba(21,23,39,.09); --control-hover:#ECEDF1; --canvas-ground:#EDEDED;
+  --btn-secondary-bg:var(--surface); --btn-secondary-hover:#ECEDF1;
+  /* The rail sits on the frame: its own greys, the active tile a white tint. */
+  --rail-fg:#B9BDCE; --rail-active-fg:#FFFFFF; --rail-active-bg:rgba(255,255,255,.14); --rail-hover-bg:rgba(255,255,255,.08);
   --bar-bg:transparent; --bar-border:0; --menu-border:0; --card-divider:0;
   --card-title-size:var(--text-md); --card-title-color:var(--text);
-  --tabs-bg:var(--surface-inset); --tab-active-bg:var(--surface); --tab-active-fg:var(--text); --tab-active-shadow:var(--shadow-seg);
-  --seg-bg:var(--canvas);
-  --toolbar-bg:#1F1D1A; --toolbar-fg:#F4F1EB;
+  /* In-card segmented (tabs, the span bar): white track, the chosen option in the tile grey. */
+  --tabs-bg:var(--surface-inset); --tab-active-bg:var(--surface); --tab-active-fg:var(--text); --tab-active-shadow:none;
+  --spanbar-bg:var(--surface-inset); --spanbar-col:var(--surface); --switch-bg:var(--line-dashed);
+  /* On the sheet (the locale switch): grey track, the chosen option white. */
+  --seg-bg:var(--surface); --seg-active-bg:var(--surface-inset);
+  /* Rows keep a light rule (asked for 2026-09-25); the header has none, as the handoff. */
+  --table-rule:1px solid transparent; --row-rule:1px solid var(--line);
+  --outline-row-bg:var(--surface-inset); --outline-row-border:1px solid transparent;
+  --toolbar-bg:#151727; --toolbar-fg:#FFFFFF;
   /* The "+" rides the canvas page, which stays light in both themes — so
      literals, opaque, not the theme's accent-soft (a translucent tint in
      dark mode that washed out over the white page, 2026-09-10). */
   --plus-bg:#DDEBE4; --plus-hover:#D0E3D9; --plus-fg:#1C6E5B;
   --plus-icon-bg:#1C6E5B; --plus-icon-fg:#FFFFFF; --plus-shadow:none;
-  --logo-color:var(--accent);
+  --logo-color:var(--accent); --logo-outer:#FFFFFF; --logo-inner:var(--frame);
 
   --status-published-fg:var(--green-700); --status-published-bg:var(--green-50);
   --status-changes-fg:var(--amber-700); --status-changes-bg:var(--amber-50);
-  --status-draft-fg:var(--text-muted); --status-draft-bg:var(--surface-inset);
+  --status-draft-fg:var(--text-muted); --status-draft-bg:var(--control-hover);
   --status-scheduled-fg:var(--accent); --status-scheduled-bg:var(--accent-soft);
   --status-saved-dot:var(--green-500);
   --warn:var(--amber-700); --warn-soft:var(--amber-50);
   --danger:var(--red-700); --danger-soft:var(--red-50);
 
   /* The edited page inside the canvas stays light in both themes. */
-  --page-bg:#FFFFFF; --page-text:#1F1D1A;
+  --page-bg:#FFFFFF; --page-text:#151727;
   --shadow-page:0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.1);
   --shadow-float:0 2px 8px rgba(0,0,0,.2);
-  --shadow-seg:0 1px 2px rgba(40,30,10,.08);
+  --shadow-seg:0 1px 2px rgba(21,23,39,.08);
   --focus-ring:0 0 0 .5px var(--accent);
-  --shadow-pop:0 4px 20px rgba(0,0,0,.14);
+  --shadow-pop:0 4px 20px rgba(21,23,39,.14);
+  --scrim:rgba(21,23,39,.4); --shadow-modal:0 24px 64px rgba(21,23,39,.28);
   --logo-filter:none;
 
   /* Which half of the theme toggle is visible. A token, so the icon can never
      disagree with the colors — both follow the one cascade below. */
   --when-light:inline-flex; --when-dark:none;
 `;
+/* The handoff's dark proposal (VisualEditor.md, 8c right board): the frame
+   and sheet a step darker, tiles a step lighter, fields in the sheet tone;
+   the rail and the logo unchanged. */
 const TOKENS_DARK = `
-  --accent:#6CC4A6; --accent-hover:#82D2B8; --accent-soft:rgba(108,196,166,.18); --accent-line:#6CC4A6; --on-accent:#0B1F18;
+  --accent:#6CC4A6; --accent-hover:#82D2B8; --accent-soft:rgba(108,196,166,.18); --accent-line:#6CC4A6; --on-accent:#151727;
   --selection-global:#F09A5C;
-  --bg:#1C1A17; --canvas:#141210; --surface:#27241F; --surface-form:#27241F; --surface-inset:#1C1A17;
-  --input-bg:#211E1A; --input-hover-bg:#211E1A; --input-focus-bg:#211E1A;
-  --line:#3A3630; --line-dashed:#4A453D; --line-soft:#3A3630;
-  --text:#F1EDE6; --text-secondary:#C9C2B7; --text-muted:#9A9388; --text-subtle:#7C7568; --text-disabled:#5A5449;
-  --hover:rgba(241,237,230,.05); --press:rgba(241,237,230,.09); --control-hover:#2E2A25;
-  --btn-secondary-bg:var(--surface); --btn-secondary-hover:#2E2A25;
-  --toolbar-bg:#0F0E0C; --toolbar-fg:#F1EDE6;
+  --frame:#0F1120; --sheet:#1B1E30;
+  --canvas:#131526; --surface:#242840; --surface-form:#242840; --surface-inset:#1B1E30;
+  --menu-bg:#242840;
+  --input-bg:#1B1E30; --input-hover-bg:#1B1E30; --input-focus-bg:#1B1E30;
+  --line:#33384F; --line-dashed:#444A63; --line-soft:#33384F;
+  --text:#EEF0F5; --text-secondary:#C5C8D2; --text-muted:#9A9FB3; --text-subtle:#7C819A; --text-disabled:#4F5570;
+  --hover:rgba(238,240,245,.05); --press:rgba(238,240,245,.09); --control-hover:#2C3049; --canvas-ground:var(--control-hover);
+  --btn-secondary-bg:var(--surface); --btn-secondary-hover:#2C3049;
+  --switch-bg:var(--line-dashed);
+  --toolbar-bg:#0F1120; --toolbar-fg:#EEF0F5;
+  --logo-inner:#151727;
 
   --status-published-fg:var(--green-300); --status-published-bg:rgba(111,211,154,.14);
   --status-changes-fg:var(--amber-300); --status-changes-bg:rgba(232,184,90,.14);
@@ -80,62 +101,78 @@ const TOKENS_DARK = `
 
   --shadow-page:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
   --shadow-pop:0 4px 20px rgba(0,0,0,.5);
+  --scrim:rgba(0,0,0,.55); --shadow-modal:0 24px 64px rgba(0,0,0,.5);
   --when-light:none; --when-dark:inline-flex;
 `;
+/* Sizes are the app's (14px base, 18px titles, 30px document title, 64px
+   top bar, 360px inspector), not the handoff's 13/20/22/56/296: the restyle
+   changes tokens of colour and shape only (decided 2026-09-25). */
 const SCALE = `
   --font-sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
-  --font-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
+  --font-serif:var(--font-sans);
   --font-mono:ui-monospace,Menlo,Consolas,monospace;
   --text-2xs:10px; --text-xs:11px; --text-sm:12px; --text-md:14px;
   --text-lg:15px; --text-xl:16px; --text-2xl:20px; --text-3xl:22px; --text-4xl:30px;
   --tracking-tight:-0.02em; --tracking-label:0.1em; --tracking-tag:0.08em;
-  /* Sentence case everywhere; the technical look flips these to caps. */
   --caps-transform:none; --caps-tracking:0;
   --label-size:12px; --label-weight:500; --label-transform:none; --label-tracking:0;
   --meta-font:var(--font-sans); --meta-size:13px;
   --title-font:var(--font-sans); --title-size:18px; --title-weight:600; --title-tracking:-0.01em;
   --doc-title-size:30px;
   --blocktag-font:var(--font-sans); --blocktag-size:11px; --blocktag-transform:none; --blocktag-tracking:0;
-  --blocktag-radius:var(--radius-round); --blocktag-shift:translate(16px,-50%); --blocktag-shift-inside:translate(16px,8px);
+  --blocktag-radius:4px; --blocktag-shift:translate(16px,-50%); --blocktag-shift-inside:translate(16px,8px);
   --badge-h:24px; --badge-dot:inline-block;
 
-  --radius-xs:2px; --radius-sm:8px; --radius-md:10px; --radius-lg:12px;
-  --radius-card:14px; --radius-card-lg:16px; --radius-btn:999px; --radius-round:999px;
-  --page-radius:4px 4px 0 0; --selection-radius:4px;
+  --radius-xs:2px; --radius-sm:6px; --radius-md:8px; --radius-lg:10px;
+  --radius-card:16px; --radius-card-lg:16px; --radius-modal:20px; --radius-btn:999px; --radius-round:999px;
+  --page-radius:8px 8px 0 0; --selection-radius:2px; /* the canvas hover/selection ring: 2px (asked for 2026-09-26; 8px before) */
+  --outline-row-radius:6px; --tabs-radius:10px; --tab-radius:6px; --row-radius:2px; --tag-radius:999px; /* list row hover fill: 2px (same day; 10px before) */
+  --plus-radius:8px; --toolbar-radius:8px;
+  --rtcard-bg:var(--surface); --rtcard-border:var(--line);
   --control-h:40px; --control-h-sm:34px; --control-h-lg:48px; --button-h:36px; --button-h-sm:28px; --row-h:48px; --topbar-h:64px;
   --outline-row-h:36px; --seg-pad-y:7px; --tabs-pad:3px;
   --plus-h:32px; --plus-pad:0 14px 0 6px; --plus-label:inline;
-  --nav-w:72px; --inspector-w:360px; --gutter:20px; --frame-pad:24px;
-  --rail-pad:22px 6px 16px; --rail-logo:none; --topbar-pad:0; --back-size:32px; --back-bg:var(--surface);
-  --table-pad:8px 12px; --table-top:80px; --canvas-pad:24px 40px 0; --card-pad:16px 18px; --card-gap:12px; --form-pad:32px 40px;
+  --nav-w:72px; --inspector-w:360px; --gutter:20px;
+  /* The frame is 6px above, right of and below the sheet; the rail fills the left edge. */
+  --frame-pad:6px; --frame-pad-top:6px; --shell-gap:0px; --sheet-radius:20px; --sheet-pad:0 24px 24px;
+  --rail-pad:18px 6px 16px; --rail-logo:block; --rail-logo-opacity:.8; --rail-tile-w:44px; --rail-tile-h:40px; --rail-tile-radius:12px;
+  --topbar-pad:0; --back-size:32px; --back-bg:var(--surface);
+  --table-pad:8px 12px; --table-top:80px; --canvas-pad:28px 40px 0; --card-pad:16px 18px; --card-gap:12px; --form-pad:32px 40px;
   --border:1px solid var(--line);
   --outline-selection:2px solid var(--selection);
   --outline-selection-global:2px solid var(--selection-global);
 `;
-/* ── TEMPORARY: the original look, kept for side-by-side comparison while
-   the warm restyle lands. Frozen copies of the three strings above as they
-   were at tag `look-technical`; applied under `.sm-admin[data-look="technical"]`.
-   Switch from the console: localStorage.setItem("smoodly-look","technical")
-   and reload; removeItem to go back. Delete this block, the TECHNICAL_SHAPE /
-   _EXTRA strings after it, `cascade`'s second call and the boot script's look
-   branch once the look is decided. */
-const TECHNICAL_LIGHT = `
-  --brand-600:#0038B1; --brand-500:#2554D6; --brand-300:#6E96FF;
-  --brand-200:#A9C0FF; --brand-100:#DCE4F9; --brand-50:#E3EAFA;
-  --gray-0:#FFFFFF; --gray-50:#F1F2F6; --gray-100:#E1E4EC; --gray-300:#C9D0E2;
-  --gray-500:#8B93A7; --gray-600:#6B7386; --gray-700:#4A5165; --gray-900:#0F1420;
+/* ── The warm look (design_handoff_smoodly_warm/, the default from
+   2026-09-08 to 2026-09-25), kept as a token block for comparison: frozen
+   copies of the three strings as they were, plus WARM_EXTRA giving the
+   tokens the neutral restyle added their warm values. Applied under
+   `.sm-admin[data-look="warm"]`; switch from the console with
+   localStorage.setItem("smoodly-look","warm") and reload, removeItem to go
+   back. A token snapshot, not a pixel restore: shared class rules move
+   with the default look. The earlier technical look is at tag
+   `look-technical`. */
+const WARM_LIGHT = `
+  --accent:#1C6E5B; --accent-hover:#175C4C; --accent-soft:#DDEBE4; --accent-line:#9CC9B8; --on-accent:#FFFFFF;
   --green-700:#1F7A46; --green-50:#E3F3EA; --green-300:#6FD39A; --green-500:#2E9E5B;
   --amber-700:#8A5A00; --amber-50:#FBF1DC; --amber-300:#E8B85A;
   --red-700:#B42318; --red-50:#FDECEC; --red-300:#F5A5A0;
 
-  --bg:var(--gray-50); --surface:var(--gray-0); --surface-inset:var(--gray-50);
-  --input-bg:var(--gray-0); --line:var(--gray-100); --line-dashed:var(--gray-300);
-  --text:var(--gray-900); --text-muted:var(--gray-600); --text-subtle:var(--gray-500);
-  --accent:var(--brand-600); --on-accent:#FFFFFF; --accent-soft:var(--brand-50);
-  --selection:var(--brand-600); --nav-active-bg:var(--brand-100); --nav-active-fg:var(--brand-600);
-  --selection-global:#D2610A;
-  --hover:rgba(15,20,32,.045); --press:rgba(15,20,32,.08);
-  --control-hover:var(--gray-100);
+  --bg:#F4F1EB; --canvas:#ECE8DF; --surface:#FFFFFF; --surface-form:#FDFCFA; --surface-inset:#F4F1EB;
+  --input-bg:#FFFFFF; --input-hover-bg:#FFFFFF; --input-focus-bg:#FFFFFF; --input-border:var(--line);
+  --line:#E8E3DA; --line-dashed:#D8D1C4; --line-soft:#EFEBE3;
+  --text:#1F1D1A; --text-secondary:#4E4942; --text-muted:#7A746A; --text-subtle:#A39C90; --text-disabled:#C4BDB1;
+  --selection:var(--accent); --nav-active-bg:var(--accent-soft); --nav-active-fg:var(--accent);
+  --selection-global:#C4620C;
+  --hover:rgba(31,29,26,.05); --press:rgba(31,29,26,.09); --control-hover:#F8F6F1;
+  --btn-secondary-bg:var(--surface); --btn-secondary-hover:#F8F6F1; --tile-hover:var(--surface);
+  --bar-bg:transparent; --bar-border:0; --menu-border:0; --card-divider:0;
+  --card-title-size:var(--text-md); --card-title-color:var(--text);
+  --tabs-bg:var(--surface-inset); --tab-active-bg:var(--surface); --tab-active-fg:var(--text); --tab-active-shadow:var(--shadow-seg);
+  --seg-bg:var(--canvas);
+  --toolbar-bg:#1F1D1A; --toolbar-fg:#F4F1EB;
+  --plus-bg:#DDEBE4; --plus-hover:#D0E3D9; --plus-fg:#1C6E5B;
+  --plus-icon-bg:#1C6E5B; --plus-icon-fg:#FFFFFF; --plus-shadow:none;
+  --logo-color:var(--accent);
 
   --status-published-fg:var(--green-700); --status-published-bg:var(--green-50);
   --status-changes-fg:var(--amber-700); --status-changes-bg:var(--amber-50);
@@ -145,27 +182,25 @@ const TECHNICAL_LIGHT = `
   --warn:var(--amber-700); --warn-soft:var(--amber-50);
   --danger:var(--red-700); --danger-soft:var(--red-50);
 
-  --page-bg:#FFFFFF; --page-text:var(--gray-900);
-  --shadow-page:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
-  --shadow-float:0 2px 8px rgba(0,0,0,.25);
-  --shadow-seg:0 1px 2px rgba(0,0,0,.08);
-  --focus-ring:0 0 0 3px var(--accent-soft);
-  --shadow-pop:0 8px 32px rgba(0,0,0,.18);
+  --page-bg:#FFFFFF; --page-text:#1F1D1A;
+  --shadow-page:0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.1);
+  --shadow-float:0 2px 8px rgba(0,0,0,.2);
+  --shadow-seg:0 1px 2px rgba(40,30,10,.08);
+  --focus-ring:0 0 0 .5px var(--accent);
+  --shadow-pop:0 4px 20px rgba(0,0,0,.14);
   --logo-filter:none;
-
-  /* Which half of the theme toggle is visible. A token, so the icon can never
-     disagree with the colors — both follow the one cascade below. */
   --when-light:inline-flex; --when-dark:none;
 `;
-const TECHNICAL_DARK = `
-  --bg:#0D0F14; --surface:#15181F; --surface-inset:#0D0F14; --input-bg:#1B1F28;
-  --line:#2A2F3B; --line-dashed:#2A2F3B;
-  --text:#EEF0F5; --text-muted:#8C94A8; --text-subtle:#6B7386;
-  --accent:var(--brand-300); --on-accent:#06122F; --accent-soft:rgba(110,150,255,.16);
-  --selection-global:#F2A35F;
-  --nav-active-bg:rgba(110,150,255,.14); --nav-active-fg:var(--brand-200);
-  --hover:rgba(238,240,245,.05); --press:rgba(238,240,245,.09);
-  --control-hover:var(--input-bg);
+const WARM_DARK = `
+  --accent:#6CC4A6; --accent-hover:#82D2B8; --accent-soft:rgba(108,196,166,.18); --accent-line:#6CC4A6; --on-accent:#0B1F18;
+  --selection-global:#F09A5C;
+  --bg:#1C1A17; --canvas:#141210; --surface:#27241F; --surface-form:#27241F; --surface-inset:#1C1A17;
+  --input-bg:#211E1A; --input-hover-bg:#211E1A; --input-focus-bg:#211E1A;
+  --line:#3A3630; --line-dashed:#4A453D; --line-soft:#3A3630;
+  --text:#F1EDE6; --text-secondary:#C9C2B7; --text-muted:#9A9388; --text-subtle:#7C7568; --text-disabled:#5A5449;
+  --hover:rgba(241,237,230,.05); --press:rgba(241,237,230,.09); --control-hover:#2E2A25;
+  --btn-secondary-bg:var(--surface); --btn-secondary-hover:#2E2A25;
+  --toolbar-bg:#0F0E0C; --toolbar-fg:#F1EDE6;
 
   --status-published-fg:var(--green-300); --status-published-bg:rgba(111,211,154,.14);
   --status-changes-fg:var(--amber-300); --status-changes-bg:rgba(232,184,90,.14);
@@ -173,62 +208,57 @@ const TECHNICAL_DARK = `
   --warn:var(--amber-300); --warn-soft:rgba(232,184,90,.14);
   --danger:var(--red-300); --danger-soft:rgba(244,102,92,.14);
 
-  --shadow-page:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
-  --shadow-pop:0 8px 32px rgba(0,0,0,.5);
-  --logo-filter:brightness(0) invert(1);
+  --shadow-page:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
+  --shadow-pop:0 4px 20px rgba(0,0,0,.5);
   --when-light:none; --when-dark:inline-flex;
 `;
-const TECHNICAL_SCALE = `
+const WARM_SCALE = `
   --font-sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
+  --font-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
   --font-mono:ui-monospace,Menlo,Consolas,monospace;
-  --text-2xs:9px; --text-xs:10px; --text-sm:11px; --text-md:12px;
-  --text-lg:13px; --text-xl:14px; --text-2xl:15px; --text-3xl:20px; --text-4xl:30px;
+  --text-2xs:10px; --text-xs:11px; --text-sm:12px; --text-md:14px;
+  --text-lg:15px; --text-xl:16px; --text-2xl:20px; --text-3xl:22px; --text-4xl:30px;
   --tracking-tight:-0.02em; --tracking-label:0.1em; --tracking-tag:0.08em;
+  --caps-transform:none; --caps-tracking:0;
+  --label-size:12px; --label-weight:500; --label-transform:none; --label-tracking:0;
+  --meta-font:var(--font-sans); --meta-size:13px;
+  --title-font:var(--font-sans); --title-size:18px; --title-weight:600; --title-tracking:-0.01em;
+  --doc-title-size:30px;
+  --blocktag-font:var(--font-sans); --blocktag-size:11px; --blocktag-transform:none; --blocktag-tracking:0;
+  --blocktag-radius:var(--radius-round); --blocktag-shift:translate(16px,-50%); --blocktag-shift-inside:translate(16px,8px);
+  --badge-h:24px; --badge-dot:inline-block;
 
-  --radius-xs:1px; --radius-sm:3px; --radius-md:4px; --radius-round:999px;
-  --control-h:28px; --control-h-lg:36px; --row-h:38px; --topbar-h:48px;
-  --nav-w:72px; --inspector-w:380px;
+  --radius-xs:2px; --radius-sm:8px; --radius-md:10px; --radius-lg:12px;
+  --radius-card:14px; --radius-card-lg:16px; --radius-btn:999px; --radius-round:999px;
+  --page-radius:4px 4px 0 0; --selection-radius:4px;
+  --control-h:40px; --control-h-sm:34px; --control-h-lg:48px; --button-h:36px; --button-h-sm:28px; --row-h:48px; --topbar-h:64px;
+  --outline-row-h:36px; --seg-pad-y:7px; --tabs-pad:3px;
+  --plus-h:32px; --plus-pad:0 14px 0 6px; --plus-label:inline;
+  --nav-w:72px; --inspector-w:360px; --gutter:20px; --frame-pad:24px;
+  --rail-pad:22px 6px 16px; --rail-logo:none; --topbar-pad:0; --back-size:32px; --back-bg:var(--surface);
+  --table-pad:8px 12px; --table-top:80px; --canvas-pad:24px 40px 0; --card-pad:16px 18px; --card-gap:12px; --form-pad:32px 40px;
   --border:1px solid var(--line);
-  --outline-selection:1.5px solid var(--selection);
-  --outline-selection-global:1.5px solid var(--selection-global);
-`;
-/* The tokens the warm restyle added, with the values the technical look
-   implied, so the frozen block above renders the old shapes too. */
-const TECHNICAL_SHAPE = `
-  --font-serif:var(--font-sans);
-  --caps-transform:uppercase; --caps-tracking:.06em;
-  --label-size:var(--text-2xs); --label-weight:600; --label-transform:uppercase; --label-tracking:var(--tracking-label);
-  --meta-font:var(--font-mono); --meta-size:var(--text-2xs);
-  --title-font:var(--font-sans); --title-size:var(--text-xl); --title-weight:600; --title-tracking:0;
-  --doc-title-size:var(--text-2xl);
-  --blocktag-font:var(--font-mono); --blocktag-size:var(--text-2xs); --blocktag-transform:uppercase; --blocktag-tracking:var(--tracking-tag);
-  --blocktag-radius:var(--radius-sm) 0 var(--radius-sm) 0; --blocktag-shift:none; --blocktag-shift-inside:none;
-  --badge-h:20px; --badge-dot:none;
-  --radius-lg:var(--radius-md); --radius-card:var(--radius-md); --radius-card-lg:var(--radius-md); --radius-btn:var(--radius-md);
-  --page-radius:var(--radius-md); --selection-radius:var(--radius-sm);
-  --control-h-sm:24px; --button-h:var(--control-h); --button-h-sm:24px;
-  --outline-row-h:var(--control-h); --seg-pad-y:3px; --tabs-pad:0 14px;
-  --plus-h:24px; --plus-pad:0; --plus-label:none;
-  --gutter:0px; --frame-pad:0px;
-  --rail-pad:14px 6px 12px; --rail-logo:block; --topbar-pad:0 16px; --back-size:auto; --back-bg:transparent;
-  --table-pad:0 16px 16px; --table-top:0px; --canvas-pad:0 20px 20px; --card-pad:14px; --card-gap:0px; --form-pad:24px 32px;
-`;
-const TECHNICAL_LIGHT_EXTRA = `
-  --accent-hover:var(--brand-500); --accent-line:var(--brand-200); --canvas:var(--bg); --surface-form:var(--surface);
-  --input-bg:var(--surface-inset); --input-hover-bg:var(--control-hover); --input-focus-bg:var(--gray-0); --input-border:transparent;
-  --line-soft:var(--line); --text-secondary:var(--gray-700); --text-disabled:var(--gray-300);
-  --btn-secondary-bg:var(--surface-inset); --btn-secondary-hover:var(--control-hover); --tile-hover:var(--surface-inset);
-  --bar-bg:var(--surface); --bar-border:var(--border); --menu-border:var(--border); --card-divider:var(--border);
-  --card-title-size:var(--label-size); --card-title-color:var(--text-muted);
-  --tabs-bg:transparent; --tab-active-bg:transparent; --tab-active-fg:var(--accent); --tab-active-shadow:inset 0 -2px 0 var(--accent);
-  --seg-bg:var(--surface-inset);
-  --toolbar-bg:#15181F; --toolbar-fg:#EEF0F5;
-  --plus-bg:var(--selection); --plus-hover:var(--brand-500); --plus-fg:#fff;
-  --plus-icon-bg:transparent; --plus-icon-fg:#fff; --plus-shadow:0 2px 6px rgba(0,56,177,.35);
-  --logo-color:#0038B1;
+  --outline-selection:2px solid var(--selection);
+  --outline-selection-global:2px solid var(--selection-global);
 `;
-const TECHNICAL_DARK_EXTRA = `
-  --input-focus-bg:#1B1F28; --text-secondary:#B8BFCF; --text-disabled:#4A5165;
+/* The tokens the neutral restyle added, with the values the warm look
+   implied: no frame or sheet (the ground is the shell's background and the
+   main column sits on it), the rail on the ground in the text colour,
+   menus and modals on the card surface, ruled table rows, hairlined
+   outline rows, pill tabs and tags. */
+const WARM_EXTRA = `
+  --frame:var(--bg); --sheet:transparent; --menu-bg:var(--surface);
+  --rail-fg:var(--text); --rail-active-fg:var(--nav-active-fg); --rail-active-bg:var(--nav-active-bg); --rail-hover-bg:var(--tile-hover);
+  --spanbar-bg:var(--seg-bg); --spanbar-col:var(--surface); --switch-bg:var(--seg-bg); --seg-active-bg:var(--surface);
+  --table-rule:1px solid var(--line); --row-rule:1px solid var(--line-soft);
+  --outline-row-bg:transparent; --outline-row-border:1px solid var(--line);
+  --logo-outer:var(--accent); --logo-inner:#FFFFFF;
+  --scrim:rgba(0,0,0,.45); --shadow-modal:var(--shadow-pop);
+  --radius-modal:var(--radius-card); --outline-row-radius:var(--radius-md); --tabs-radius:var(--radius-btn); --tab-radius:var(--radius-btn);
+  --row-radius:0; --tag-radius:var(--radius-sm); --plus-radius:var(--radius-round); --toolbar-radius:var(--radius-btn);
+  --rtcard-bg:var(--input-bg); --rtcard-border:var(--input-border); --canvas-ground:var(--control-hover);
+  --frame-pad-top:0px; --shell-gap:var(--gutter); --sheet-radius:0; --sheet-pad:0;
+  --rail-logo-opacity:1; --rail-tile-w:42px; --rail-tile-h:34px; --rail-tile-radius:var(--radius-md);
 `;
 /** The light/dark cascade for one root selector. Order matters: the last
  *  rule has the same specificity as the host-attribute rule, so an explicit
@@ -248,7 +278,7 @@ export const ADMIN_CSS = `
 @import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&display=swap");
 
 ${cascade(".sm-admin", SCALE, TOKENS_LIGHT, TOKENS_DARK)}
-${cascade('.sm-admin[data-look="technical"]', TECHNICAL_SCALE + TECHNICAL_SHAPE, TECHNICAL_LIGHT + TECHNICAL_LIGHT_EXTRA, TECHNICAL_DARK + TECHNICAL_DARK_EXTRA)}
+${cascade('.sm-admin[data-look="warm"]', WARM_SCALE + WARM_EXTRA, WARM_LIGHT, WARM_DARK)}
 
 /* The admin owns the viewport; a host <body> margin would push it into a
    page scrollbar. Scoped by :has, so only a page holding the admin is touched. */
@@ -269,27 +299,37 @@ body:has(.sm-admin){margin:0}
 .sm-admin ::placeholder{color:var(--text-subtle)}
 .sm-admin ::selection{background:var(--accent-soft);color:var(--text)}
 .sm-mono{font-family:var(--font-mono)}
+.sm-code{background:var(--surface);border-radius:8px;padding:10px 12px;margin:0;font:13px/1.5 var(--font-mono);overflow:auto}
 
 /* ── shell ─────────────────────────────────────────────────────────── */
-/* Rail | main, with the warm look's gutter and frame padding (both 0 in
-   the technical look, whose columns touch). The main column stacks the
-   top bar over one card-shaped region: list, form or editor. */
+/* Rail | main. The shell is the frame (design_handoff_smoodly_neutral/
+   components/AppShell.html): navy, 6px above, right of and below the main
+   column, which is the white sheet with a 20px radius and its own inner
+   padding; the rail fills the frame's left edge. In the warm look the frame
+   is the ground, the sheet transparent, and a gutter separates the columns.
+   The main column stacks the top bar over one tile-shaped region: list,
+   form or editor. */
 .sm-shell{
-  display:grid;grid-template-columns:var(--nav-w) 1fr;column-gap:var(--gutter);
-  padding:0 var(--frame-pad) var(--frame-pad) 0;height:100vh;height:100dvh;overflow:hidden;background:var(--bg);
+  display:grid;grid-template-columns:var(--nav-w) 1fr;column-gap:var(--shell-gap);
+  padding:var(--frame-pad-top) var(--frame-pad) var(--frame-pad) 0;height:100vh;height:100dvh;overflow:hidden;background:var(--frame);
+}
+.sm-shell>.sm-main{
+  min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;
+  background:var(--sheet);border-radius:var(--sheet-radius);padding:var(--sheet-pad);
 }
-.sm-shell>.sm-main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 .sm-wordmark{height:18px;width:auto;color:var(--logo-color);filter:var(--logo-filter);flex:none}
-/* The IconRail (design_handoff_smoodly_warm/components/IconRail.html): a
-   72px rail with 18px Lucide icons over a 10px label and a 42×34 active
-   tile, sitting directly on the ground. The technical look gives it a
-   surface, a hairline and the app icon on top — all tokens. */
+/* The IconRail (design_handoff_smoodly_neutral/components/IconRail.html):
+   a 72px rail on the frame with the app icon on top, 18px Lucide icons
+   over a 10px label and a 44×40 active tile in a white tint — the rail's
+   own colour tokens, since the frame is navy in both themes. */
 .sm-rail{
   width:var(--nav-w);height:100%;display:flex;flex-direction:column;align-items:center;gap:18px;
-  padding:var(--rail-pad);background:var(--bar-bg);border-right:var(--bar-border);color:var(--text);
+  padding:var(--rail-pad);background:var(--bar-bg);border-right:var(--bar-border);color:var(--rail-fg);
   font:500 10px/1 var(--font-sans);position:relative;
 }
-.sm-rail__logo{width:28px;height:28px;display:var(--rail-logo);flex:none}
+/* The logo: white outer / navy inner on the frame, at a little under full
+   opacity so it does not glare (2026-09-25). */
+.sm-rail__logo{width:20px;height:auto;display:var(--rail-logo);flex:none;margin-bottom:6px;opacity:var(--rail-logo-opacity)} /* 20px wide (asked for 2026-09-26; 28px before) */
 .sm-rail__list{display:flex;flex-direction:column;gap:8px;width:100%;margin:0;padding:0;list-style:none}
 .sm-rail__item{position:relative}
 .sm-rail__btn{
@@ -297,12 +337,12 @@ body:has(.sm-admin){margin:0}
   align-items:center;gap:6px;color:inherit;font:inherit;cursor:pointer;border-radius:var(--radius-md);text-decoration:none;
 }
 .sm-rail__btn:hover{color:inherit}
-.sm-rail__btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;box-shadow:none}
-.sm-rail__tile{position:relative;width:42px;height:34px;border-radius:var(--radius-md);display:grid;place-items:center;transition:background .12s}
-.sm-rail__btn:hover .sm-rail__tile{background:var(--tile-hover)}
-.sm-rail__btn[aria-current="page"],.sm-rail__btn[aria-expanded="true"]{color:var(--nav-active-fg);font-weight:600}
-.sm-rail__btn[aria-current="page"]:hover,.sm-rail__btn[aria-expanded="true"]:hover{color:var(--nav-active-fg)}
-.sm-rail__btn[aria-current="page"] .sm-rail__tile,.sm-rail__btn[aria-expanded="true"] .sm-rail__tile{background:var(--nav-active-bg)}
+.sm-rail__btn:focus-visible{outline:2px solid var(--rail-active-fg);outline-offset:-2px;box-shadow:none}
+.sm-rail__tile{position:relative;width:var(--rail-tile-w);height:var(--rail-tile-h);border-radius:var(--rail-tile-radius);display:grid;place-items:center;transition:background .12s}
+.sm-rail__btn:hover .sm-rail__tile{background:var(--rail-hover-bg)}
+.sm-rail__btn[aria-current="page"],.sm-rail__btn[aria-expanded="true"]{color:var(--rail-active-fg);font-weight:600}
+.sm-rail__btn[aria-current="page"]:hover,.sm-rail__btn[aria-expanded="true"]:hover{color:var(--rail-active-fg)}
+.sm-rail__btn[aria-current="page"] .sm-rail__tile,.sm-rail__btn[aria-expanded="true"] .sm-rail__tile{background:var(--rail-active-bg)}
 .sm-rail__tile svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 .sm-rail__label{letter-spacing:.01em;white-space:nowrap}
 /* Not greyed: the reference renders every inactive item at --text and marks
@@ -314,11 +354,12 @@ body:has(.sm-admin){margin:0}
   width:28px;height:28px;border-radius:var(--radius-round);background:var(--accent-soft);color:var(--accent);
   display:grid;place-items:center;font-size:var(--text-xs);font-weight:600;border:0;cursor:pointer;padding:0;
 }
-.sm-rail__user:focus-visible{outline:2px solid var(--accent);outline-offset:1px;box-shadow:none}
-/* Flyout: 6px right of the rail, aligned with its item (the user menu aligns to the bottom). */
+.sm-rail__user:focus-visible{outline:2px solid var(--rail-active-fg);outline-offset:1px;box-shadow:none}
+/* Flyout: 6px right of the rail, aligned with its item (the user menu aligns to the bottom).
+   Menus float on --menu-bg (the sheet white in the neutral look, so they read over the frame). */
 .sm-rail__menu{
   position:absolute;left:calc(100% + 6px);top:0;z-index:20;width:168px;padding:6px;margin:0;list-style:none;
-  background:var(--surface);border:var(--menu-border);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);
+  background:var(--menu-bg);border:var(--menu-border);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);
   display:none;flex-direction:column;gap:1px;font-size:var(--text-md);font-weight:500;color:var(--text);
 }
 .sm-rail__menu[data-open="true"]{display:flex}
@@ -333,7 +374,7 @@ body:has(.sm-admin){margin:0}
   appearance:none;background:none;border:0;width:100%;display:flex;align-items:center;justify-content:space-between;
   padding:7px 10px;border-radius:var(--radius-sm);color:inherit;font:inherit;cursor:pointer;text-align:left;text-decoration:none;
 }
-.sm-rail__menu-item:hover,.sm-rail__menu-item:focus-visible{background:var(--surface-inset);color:inherit;outline:0;box-shadow:none}
+.sm-rail__menu-item:hover,.sm-rail__menu-item:focus-visible{background:var(--hover);color:inherit;outline:0;box-shadow:none}
 .sm-rail__menu-item[aria-current="page"],.sm-rail__menu-item[aria-current="page"]:hover{background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600}
 .sm-when-light{display:var(--when-light);align-items:center;gap:8px}
 .sm-when-dark{display:var(--when-dark);align-items:center;gap:8px}
@@ -377,6 +418,8 @@ body:has(.sm-admin){margin:0}
   text-decoration:none;
 }
 .sm-btn--lg{height:var(--control-h-lg);padding:0 20px}
+/* An icon-only pill: the top bar's View live eye (2026-09-26). */
+.sm-btn--icon{width:var(--button-h);padding:0;border-radius:50%;color:var(--text-muted)}
 .sm-btn--sm,.sm-btn--sm.sm-btn--primary,.sm-btn--sm.sm-btn--ok{height:var(--button-h-sm);padding:0 12px;font-size:var(--text-sm)}
 .sm-btn--primary{background:var(--accent);color:var(--on-accent);font-weight:600;padding:0 18px}
 .sm-btn--primary:hover{background:var(--accent-hover);color:var(--on-accent)}
@@ -386,6 +429,9 @@ body:has(.sm-admin){margin:0}
 .sm-btn--ghost:hover{background:var(--accent-soft);color:var(--accent)}
 .sm-btn--danger{background:var(--btn-secondary-bg);color:var(--danger)}
 .sm-btn--danger:hover{background:var(--danger-soft);color:var(--danger)}
+/* The confirm dialog's destructive primary: filled red (ConfirmModal.html). */
+.sm-btn--destructive{background:var(--danger);color:#fff;font-weight:600;padding:0 18px}
+.sm-btn--destructive:hover{filter:brightness(.94);color:#fff}
 .sm-btn--ok{background:var(--status-published-bg);color:var(--status-published-fg);font-weight:600;padding:0 18px}
 .sm-btn:disabled,.sm-btn[aria-disabled="true"]{opacity:.5;cursor:default;pointer-events:none}
 .sm-btn:focus-visible,.sm-iconbtn:focus-visible,.sm-nav-item:focus-visible,
@@ -421,6 +467,10 @@ body:has(.sm-admin){margin:0}
 /* A head's text action (a list's Collapse all / Expand all): a small accent link. */
 .sm-field__action{background:none;border:0;padding:0;font:inherit;font-size:var(--text-sm);font-weight:600;color:var(--accent);cursor:pointer}
 .sm-field__action:hover{color:var(--accent-hover)}
+/* A row of them: a media field's Edit / Replace / Remove in the head, and
+   the same three on a richtext image card's head (2026-09-25). */
+.sm-field__actions{display:flex;align-items:baseline;gap:12px;flex:none}
+.sm-rtcard__head .sm-field__actions{margin-left:auto;padding-right:4px}
 .sm-hint{font-size:var(--text-sm);color:var(--text-muted)}
 .sm-input,.sm-textarea,.sm-select{
   width:100%;min-width:0;border:1px solid var(--input-border);border-radius:var(--radius-md);
@@ -429,11 +479,12 @@ body:has(.sm-admin){margin:0}
 }
 .sm-input,.sm-select{height:var(--control-h);padding:0 14px}
 .sm-textarea{padding:11px 14px;line-height:1.55;resize:vertical;min-height:72px}
-/* The document title: serif at the doc-title size (sans and small in the technical look). */
+/* The document title at the doc-title size (serif in the warm look, sans in the neutral). */
 .sm-input--lg{
   height:var(--control-h-lg);font:600 var(--doc-title-size)/1.2 var(--font-serif);letter-spacing:var(--title-tracking);
 }
-.sm-input--mono{font-family:var(--font-mono);font-size:var(--text-sm)}
+/* Scoped, so it outranks the .sm-admin input {font-family:inherit} reset above. */
+.sm-admin .sm-input--mono{font-family:var(--font-mono);font-size:var(--text-sm)}
 .sm-input:hover,.sm-textarea:hover,.sm-select:hover{background:var(--input-hover-bg)}
 .sm-input:focus,.sm-textarea:focus,.sm-select:focus,
 .sm-inputwrap:focus-within{
@@ -451,7 +502,9 @@ body:has(.sm-admin){margin:0}
   display:flex;align-items:center;gap:0;height:var(--control-h);padding:0 14px;
   border:1px solid var(--input-border);border-radius:var(--radius-md);background:var(--input-bg);
 }
-.sm-inputwrap>.sm-input{height:auto;padding:0;background:transparent;border:0;box-shadow:none}
+/* The inner input keeps a 22px line box: with the 12px mono font alone its
+   caret was a 14px sliver flush against the prefix, a blinking glyph (2026-09-25). */
+.sm-inputwrap>.sm-input{height:auto;line-height:22px;padding:0;background:transparent;border:0;box-shadow:none}
 .sm-inputwrap>.sm-input:hover,.sm-inputwrap>.sm-input:focus{background:transparent;box-shadow:none}
 .sm-prefix{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-sm);flex:none}
 .sm-error{color:var(--danger);font-size:var(--text-sm)}
@@ -461,12 +514,17 @@ body:has(.sm-admin){margin:0}
 .sm-richtext__sep{width:1px;height:16px;margin:0 4px;background:var(--line)}
 .sm-richtext__bar .sm-iconbtn[aria-pressed="true"]{background:var(--press);color:var(--text)}
 .sm-richtext__link{display:flex;align-items:center;gap:6px}
+/* A hairline, not the (transparent in the neutral look) input border: a
+   rich text box is a canvas, and its edge must read without a hover (asked for 2026-09-25). */
 .sm-richtext__content{
-  min-height:140px;padding:12px 14px;border:1px solid var(--input-border);border-radius:var(--radius-md);
+  min-height:140px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-md);
   background:var(--input-bg);color:var(--text);font-size:var(--text-lg);line-height:1.6;outline:0;
 }
 .sm-richtext__content:hover{background:var(--input-hover-bg)}
-.sm-richtext__content:focus{background:var(--input-focus-bg);border-color:var(--selection);box-shadow:var(--focus-ring)}
+/* The field's focus ring steps back while a block node is selected: the
+   selected card carries the accent outline, and two green frames read as
+   one confusing one (2026-09-25). */
+.sm-richtext__content:focus:not(:has(.ProseMirror-selectednode)){background:var(--input-focus-bg);border-color:var(--selection);box-shadow:var(--focus-ring)}
 /* Block spacing: the sibling rules carry the .sm-admin prefix so they
    outrank the admin-wide .sm-admin p{margin:0} reset (a bare
    .sm-richtext__content>*+* lost to it and left the paragraphs
@@ -498,15 +556,18 @@ body:has(.sm-admin){margin:0}
 .sm-richtext__menu{
   position:absolute;top:calc(100% + 6px);right:0;z-index:65;width:300px;max-width:100%;
   display:flex;flex-direction:column;gap:6px;padding:6px;
-  background:var(--surface);border:var(--menu-border);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);
+  background:var(--menu-bg);border:var(--menu-border);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);
 }
 .sm-richtext__menu .sm-picker{width:100%;padding:0;border:0;box-shadow:none;background:transparent}
 .sm-richtext__slash .sm-picker{width:100%;max-width:300px}
 .sm-richtext__slash{position:absolute;left:0;z-index:65}
 .sm-richtext__insert-empty{padding:8px;color:var(--text-muted);font-size:var(--text-sm)}
 .sm-picker__item--active,.sm-picker__item[aria-selected="true"]{background:var(--nav-active-bg)}
-/* block-node cards */
-.sm-rtcard{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);min-width:0}
+/* block-node cards (elements, images) inside a richtext field: the tile
+   tone with a hairline in the neutral look, so a card stands off the white
+   field it sits in (2026-09-25); white and hairlined in the warm one. The
+   selected card takes the accent outline below. */
+.sm-rtcard{border:1px solid var(--rtcard-border);border-radius:var(--radius-md);background:var(--rtcard-bg);min-width:0}
 .sm-richtext__content .ProseMirror-selectednode .sm-rtcard,.sm-richtext__content .sm-rtcard.ProseMirror-selectednode{outline:2px solid var(--accent);outline-offset:1px}
 .sm-rtcard__head{display:flex;align-items:center;gap:6px;height:var(--control-h-sm);padding:0 6px 0 10px;cursor:grab;user-select:none}
 .sm-rtcard__icon{width:18px;height:18px;flex:none;border-radius:var(--radius-xs);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:11px}
@@ -514,7 +575,7 @@ body:has(.sm-admin){margin:0}
 .sm-rtcard__body{display:flex;flex-direction:column;gap:10px;padding:10px 12px 12px;border-top:1px solid var(--line)}
 /* The whole image, letterboxed on the inset tone, never cropped: the card is a preview, not a crop. */
 .sm-rtcard__thumb{display:block;width:100%;height:160px;object-fit:contain;border-radius:var(--radius-sm);background:var(--surface-inset)}
-.sm-rtcard__file{font-size:var(--text-sm);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sm-rtcard__caption{font-size:var(--text-sm);font-style:italic;color:var(--text-muted);text-align:center}
 .sm-richtext__content blockquote{padding-left:12px;border-left:2px solid var(--line);color:var(--text-muted)}
 .sm-richtext__content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-line)}
 
@@ -525,7 +586,7 @@ body:has(.sm-admin){margin:0}
 .sm-fieldedit{outline:1.5px solid var(--selection);outline-offset:3px;border-radius:2px;pointer-events:none}
 .sm-floatbar{
   position:absolute;z-index:60;display:flex;flex-direction:column;gap:6px;padding:4px;
-  background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);pointer-events:auto;
+  background:var(--menu-bg);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);pointer-events:auto;
 }
 .sm-floatbar .sm-richtext__link{padding:0 4px 4px}
 .sm-floatbar .sm-richtext__menu{position:static;width:300px}
@@ -544,7 +605,7 @@ body:has(.sm-admin){margin:0}
 }
 /* The custom section's row cards and the width bar (spec 2026-09-14 §6). */
 .sm-rowcards{display:flex;flex-direction:column;gap:12px;align-items:stretch}
-.sm-rowcard{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);min-width:0}
+.sm-rowcard{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--input-border);border-radius:var(--radius-md);background:var(--input-bg);min-width:0}
 .sm-rowcard__head{display:flex;align-items:center;gap:4px}
 .sm-rowcard__title{flex:1;font-weight:600}
 .sm-rowcard__presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
@@ -553,8 +614,10 @@ body:has(.sm-admin){margin:0}
 .sm-rowcards > .sm-btn{align-self:flex-start;border:1px solid var(--line)}
 .sm-stepper{display:flex;align-items:center;gap:8px}
 .sm-stepper__value{min-width:20px;text-align:center;font-weight:600}
-.sm-spanbar{display:flex;gap:2px;height:32px;background:var(--seg-bg);border-radius:var(--radius-md);padding:3px;user-select:none}
-.sm-spanbar__col{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;background:var(--surface);border-radius:6px;font-size:var(--text-sm);color:var(--text-muted)}
+/* The − and + read as buttons, not glyphs: a hairline in both themes (asked for 2026-09-25). */
+.sm-stepper .sm-iconbtn{border:1px solid var(--line)}
+.sm-spanbar{display:flex;gap:2px;height:32px;background:var(--spanbar-bg);border-radius:var(--radius-md);padding:3px;user-select:none}
+.sm-spanbar__col{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;background:var(--spanbar-col);border-radius:6px;font-size:var(--text-sm);color:var(--text-muted)}
 .sm-spanbar__handle{position:absolute;right:-6px;top:0;bottom:0;width:10px;padding:0;border:0;background:transparent;cursor:col-resize;touch-action:none;z-index:1}
 .sm-spanbar__handle::after{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:2px;border-radius:1px;background:var(--text-muted)}
 .sm-spanbar__handle:focus-visible{outline:none}
@@ -565,7 +628,7 @@ body:has(.sm-admin){margin:0}
 
 .sm-group{display:flex;flex-direction:column;gap:10px;padding:2px 0 0 12px;border-left:2px solid var(--line)}
 .sm-list{display:flex;flex-direction:column;gap:8px;align-items:stretch}
-.sm-listrow{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);min-width:0}
+.sm-listrow{border:1px solid var(--input-border);border-radius:var(--radius-md);background:var(--input-bg);min-width:0}
 .sm-listrow__head{display:flex;align-items:center;gap:2px;height:var(--control-h-sm);padding:0 6px 0 6px}
 .sm-listrow__toggle{
   flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:100%;padding:0 6px;
@@ -579,22 +642,27 @@ body:has(.sm-admin){margin:0}
 /* ── data ──────────────────────────────────────────────────────────── */
 /* The list card: the scrolling region under the top bar (ListView). */
 .sm-listwrap{flex:1;min-height:0;overflow:auto;background:var(--surface-form);border-radius:var(--radius-card-lg)}
+.sm-listnotice{display:flex;flex-direction:column;gap:var(--card-gap);margin-bottom:var(--card-gap);flex:none}
+.sm-listnotice:empty{display:none}
 /* The rows sit in a centred column of at most 1200px inside the card,
    under --table-top of air reserved for the coming search and filters. */
 .sm-table{display:flex;flex-direction:column;padding:var(--table-pad);padding-top:var(--table-top);max-width:1200px;margin:0 auto}
 .sm-table__head,.sm-row{display:grid;gap:12px;align-items:center;padding:0 8px}
 .sm-table__head{
-  height:40px;border-bottom:1px solid var(--line);font-family:var(--meta-font);font-weight:500;
+  height:40px;border-bottom:var(--table-rule);font-family:var(--meta-font);font-weight:500;
   font-size:var(--meta-size);letter-spacing:var(--caps-tracking);color:var(--text-muted);
   text-transform:var(--caps-transform);position:sticky;top:0;background:var(--surface-form);z-index:1;
 }
-/* Rows are ruled: a hairline under the header and under every row
-   (2026-09-09); the hover fill is square so it meets the rules. */
+/* Rows: a hairline under every row in both looks (the header's too in the
+   warm look, 2026-09-09; none in the neutral, 2026-09-25). The rule is a
+   pseudo-element, not a border: a border would follow the rounded corners
+   the neutral hover fill has, and the line must stay straight. */
 .sm-table__body{display:flex;flex-direction:column}
 .sm-row{
-  height:var(--row-h);border-radius:0;background:transparent;
-  border:0;border-bottom:1px solid var(--line-soft);font:inherit;color:inherit;text-align:left;width:100%;
+  position:relative;height:var(--row-h);border-radius:var(--row-radius);background:transparent;
+  border:0;font:inherit;color:inherit;text-align:left;width:100%;
 }
+.sm-row::after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:var(--row-rule);pointer-events:none}
 .sm-row--clickable{cursor:pointer}
 .sm-row--clickable:hover{background:var(--surface-inset)}
 .sm-cell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@@ -637,9 +705,10 @@ body:has(.sm-admin){margin:0}
 .sm-dotmenu:disabled{opacity:.4;cursor:default}
 .sm-dotmenu:disabled:hover{background:var(--btn-secondary-bg);color:var(--text-muted)}
 .sm-dotmenu--sm{width:var(--button-h-sm);height:var(--button-h-sm);font-size:var(--text-sm)}
-.sm-picker--menu{position:absolute;top:calc(100% + 6px);right:0;width:220px;z-index:60}
+/* Fixed, placed by ActionMenu from the button's rect (2026-09-26): a table cell clips absolute children. */
+.sm-picker--menu{position:fixed;width:220px;z-index:60}
 
-/* Status pill: a dot before the word in the warm look (none in the technical). */
+/* Status pill: a dot before the word. */
 .sm-badge{
   display:inline-flex;align-items:center;gap:6px;height:var(--badge-h);padding:0 10px;border-radius:var(--radius-btn);
   font-size:var(--text-sm);font-weight:600;letter-spacing:var(--caps-tracking);white-space:nowrap;
@@ -652,16 +721,16 @@ body:has(.sm-admin){margin:0}
 .sm-dot{width:6px;height:6px;border-radius:var(--radius-round);flex:none}
 
 /* ── navigation bits ───────────────────────────────────────────────── */
-/* Tabs read as a segmented pill in the warm look and as underlined tabs in
-   the technical one; the difference is the track background and the
-   active option's shadow (an inset 2px line draws the underline). */
+/* Tabs read as an in-card segmented control: a white track with the chosen
+   option in the tile grey and 10/6px corners in the neutral look, a pill
+   track with a white shadowed option in the warm one — all tokens. */
 .sm-tabs{
-  display:flex;gap:2px;padding:var(--tabs-pad);background:var(--tabs-bg);border-radius:var(--radius-btn);
+  display:flex;gap:2px;padding:var(--tabs-pad);background:var(--tabs-bg);border-radius:var(--tabs-radius);
   border-bottom:var(--card-divider);flex:none;
 }
 .sm-tab{
   flex:1;display:flex;align-items:center;justify-content:center;border:0;background:transparent;
-  padding:var(--seg-pad-y) 10px;border-radius:var(--radius-btn);font:inherit;font-weight:500;
+  padding:var(--seg-pad-y) 10px;border-radius:var(--tab-radius);font:inherit;font-weight:500;
   cursor:pointer;color:var(--text-muted);white-space:nowrap;
 }
 .sm-tab:hover{color:var(--text)}
@@ -680,7 +749,7 @@ body:has(.sm-admin){margin:0}
   color:var(--text-muted);font:inherit;font-weight:500;cursor:pointer;white-space:nowrap;
 }
 .sm-seg__opt:hover{color:var(--text)}
-.sm-seg__opt[aria-pressed="true"]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--shadow-seg)}
+.sm-seg__opt[aria-pressed="true"]{background:var(--seg-active-bg);color:var(--text);font-weight:600;box-shadow:var(--shadow-seg)}
 /* A locale the record does not have yet: subtle, still a button (it opens the add pane). */
 .sm-seg__opt--absent{color:var(--text-subtle)}
 /* f.radio as a pill row (spec 2026-09-14 §5): small chips a step below the tabs and the
@@ -693,10 +762,12 @@ body:has(.sm-admin){margin:0}
 }
 .sm-pill:hover{color:var(--text);background:var(--surface-inset)}
 .sm-pill[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
+.sm-pills--disabled{opacity:.6}
+.sm-pill:disabled{cursor:default}
 /* The custom-CSS box: code, no wrapping, no spellcheck. */
 .sm-css{font-family:var(--font-mono);font-size:12px;line-height:1.5;white-space:pre;overflow-x:auto}
 /* Switch (f.boolean, the SEO noindex toggle): a pill track, knob slides right when on. */
-.sm-switch{width:36px;height:20px;padding:2px;border:0;border-radius:var(--radius-round);background:var(--seg-bg);cursor:pointer;display:inline-flex;align-items:center;flex:none}
+.sm-switch{width:36px;height:20px;padding:2px;border:0;border-radius:var(--radius-round);background:var(--switch-bg);cursor:pointer;display:inline-flex;align-items:center;flex:none}
 .sm-switch[aria-checked="true"]{background:var(--accent)}
 .sm-switch__knob{width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
 .sm-switch[aria-checked="true"] .sm-switch__knob{transform:translateX(16px)}
@@ -706,15 +777,26 @@ body:has(.sm-admin){margin:0}
 .sm-choices{display:flex;flex-direction:column;gap:8px;padding:4px 0}
 .sm-choice{display:flex;align-items:center;gap:8px;font-size:var(--text-md);cursor:pointer}
 .sm-choice input{accent-color:var(--accent);width:16px;height:16px;margin:0;flex:none}
+/* A choice with a description line (the invite modal's roles): input on the first line, text stacked. */
+.sm-choice--desc{align-items:flex-start}
+.sm-choice--desc input{margin-top:2px}
+.sm-choice__label{display:block;font-weight:500}
+.sm-choice__desc{display:block;margin-top:2px;font-size:var(--text-sm);color:var(--text-muted)}
 /* A soft counter past its limit (SEO title and description). */
 .sm-counter--over{color:var(--warn)}
 /* The page glyph beside the page title in the empty-selection inspector head. */
 .sm-pageglyph{width:10px;height:13px;border:1.5px solid var(--text-muted);border-radius:var(--radius-xs);flex:none}
 .sm-divider{height:1px;background:var(--line);flex:none}
 .sm-sectionlabel{display:flex;align-items:center;justify-content:space-between;gap:8px}
-.sm-sectionlabel--mono>.sm-label{
-  font-family:var(--font-mono);font-weight:400;letter-spacing:var(--tracking-tag);
-}
+/* The overline: a small uppercase tracked heading for a group — the
+   inspector's Spacing & layout / Advanced, the picker's Add to <zone> and
+   Site, the outline's zones, the Settings nav (2026-09-26; a mono face before). */
+.sm-overline,.sm-sectionlabel--caps>.sm-label{
+  font-family:var(--font-sans);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-tag);text-transform:uppercase;color:var(--text-muted);
+}
+.sm-stale{padding:8px 20px 0}
+.sm-lock{display:inline-flex;align-items:center;margin-left:6px;color:var(--text-muted);vertical-align:middle}
+.sm-presence{margin:0;padding:6px 20px 0;font-size:13px;color:var(--text-muted)}
 .sm-banner{
   display:flex;gap:14px;align-items:flex-start;padding:12px 16px;border-radius:var(--radius-md);
   font-size:var(--text-md);
@@ -727,7 +809,7 @@ body:has(.sm-admin){margin:0}
 
 /* ── cards ─────────────────────────────────────────────────────────── */
 /* The inspector column (editor, entry and global forms) is a stack of
-   cards; the technical look draws them flush with a hairline between. */
+   cards (grey tiles in the neutral look, white cards in the warm). */
 .sm-inspector{
   display:flex;flex-direction:column;gap:var(--card-gap);min-height:0;overflow:auto;
   background:var(--bar-bg);border-left:var(--bar-border);
@@ -757,10 +839,12 @@ body:has(.sm-admin){margin:0}
 
 /* ── editor ────────────────────────────────────────────────────────── */
 /* canvas · handle · inspector. The handle column is the gutter (8px in the
-   technical look, whose gutter is 0). The 50% is the half-row maximum the
-   drag maths (ui/resize.ts) also applies, so a window that shrinks after a
+   warm look; 8px in the neutral, whose gutter is 0). The calc() is the
+   maximum the drag maths (ui/resize.ts) also applies — the row less the
+   handle and the canvas's 440px minimum — so a window that shrinks after a
    drag never leaves the canvas squeezed. */
-.sm-editor{flex:1;min-height:0;display:grid;grid-template-columns:1fr max(var(--gutter),8px) min(var(--inspector-w),50%)}
+.sm-editor{flex:1;min-height:0;display:grid;grid-template-columns:1fr max(var(--gutter),8px) min(var(--inspector-w),calc(100% - max(var(--gutter),8px) - 440px))}
+.sm-editor[inert],.sm-form[inert]{opacity:.6}
 /* The drag-to-resize handle (spec 2026-09-10 §3): fills its column, draws a
    2px line down its centre on hover and while dragging — a shade off the
    ground, since the col-resize cursor already says it drags (2026-09-10);
@@ -788,7 +872,7 @@ body:has(.sm-admin){margin:0}
 }
 .sm-blockglyph{width:14px;height:10px;border:1.5px solid var(--text-muted);border-radius:var(--radius-xs);flex:none}
 /* The selected block's label: a pill riding the outline in the warm look,
-   a mono tag tucked in the corner in the technical one. */
+   a 4px-cornered chip in the neutral one. */
 .sm-blocktag{
   position:absolute;top:0;left:0;transform:var(--blocktag-shift);background:var(--selection);color:var(--on-accent);
   font-family:var(--blocktag-font);font-size:var(--blocktag-size);font-weight:600;line-height:1.3;
@@ -798,15 +882,15 @@ body:has(.sm-admin){margin:0}
 .sm-blocktag--global{background:var(--selection-global)}
 .sm-blocktag--inside{transform:var(--blocktag-shift-inside)}
 .sm-blocktoolbar{
-  display:flex;gap:2px;padding:3px;background:var(--toolbar-bg);border-radius:var(--radius-btn);
+  display:flex;gap:2px;padding:3px;background:var(--toolbar-bg);border-radius:var(--toolbar-radius);
   box-shadow:var(--shadow-float);
 }
 .sm-blocktoolbar__note{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--toolbar-fg);opacity:.7;padding:4px 8px}
 /* The insert affordance between sections: a labelled pill (the label is
-   hidden in the technical look, leaving the 24px circle). */
+   8px-cornered in the neutral look, a pill in the warm). */
 .sm-plus{
   display:inline-flex;align-items:center;gap:8px;height:var(--plus-h);min-width:var(--plus-h);padding:var(--plus-pad);
-  border-radius:var(--radius-round);border:0;background:var(--plus-bg);color:var(--plus-fg);
+  border-radius:var(--plus-radius);border:0;background:var(--plus-bg);color:var(--plus-fg);
   font:500 var(--text-lg)/1 var(--font-sans);cursor:pointer;box-shadow:var(--plus-shadow);white-space:nowrap;
   transition:background .12s,transform .12s;
 }
@@ -819,14 +903,15 @@ body:has(.sm-admin){margin:0}
 }
 .sm-plus__label{display:var(--plus-label);font-size:var(--text-sm)}
 .sm-guide{height:1px;background:color-mix(in srgb,var(--selection) 35%,transparent)}
+/* Outline rows: white boxes on the tile in the neutral look, hairlined in the warm one. */
 .sm-outline-row{
   display:flex;align-items:center;justify-content:space-between;gap:4px;
-  height:var(--outline-row-h);border-radius:var(--radius-md);padding:0 6px 0 12px;
-  color:var(--text);font-weight:500;background:transparent;
-  border:1px solid var(--line);
+  height:var(--outline-row-h);border-radius:var(--outline-row-radius);padding:0 6px 0 12px;
+  color:var(--text);font-weight:500;background:var(--outline-row-bg);
+  border:var(--outline-row-border);
 }
 .sm-outline-row--clickable{cursor:pointer}
-.sm-outline-row--clickable:hover{background:var(--surface-inset)}
+.sm-outline-row--clickable:hover{background:var(--control-hover)}
 /* Selected and locked rows are read by their fill, so they drop the hairline —
    border-color, not border, so every row keeps the same box. */
 .sm-outline-row--selected,.sm-outline-row--selected:hover{
@@ -842,7 +927,7 @@ body:has(.sm-admin){margin:0}
 .sm-outline-row--grip .sm-outline-row__label{flex:1}
 
 .sm-picker{
-  width:300px;background:var(--surface);border:var(--menu-border);border-radius:var(--radius-md);
+  width:300px;background:var(--menu-bg);border:var(--menu-border);border-radius:var(--radius-md);
   padding:6px;box-shadow:var(--shadow-pop);
 }
 .sm-picker__item{
@@ -871,7 +956,7 @@ body:has(.sm-admin){margin:0}
 .sm-refpicker__title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sm-refrow{
   display:flex;align-items:center;gap:6px;height:var(--control-h-sm);padding:0 6px 0 10px;
-  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);min-width:0;
+  border:1px solid var(--input-border);border-radius:var(--radius-md);background:var(--input-bg);min-width:0;
 }
 .sm-refrow:has(.sm-grip){padding-left:6px}
 .sm-refrow:hover .sm-grip{opacity:1}
@@ -882,7 +967,7 @@ body:has(.sm-admin){margin:0}
 .sm-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
 .sm-tag{
   display:inline-flex;align-items:center;gap:6px;height:var(--control-h-sm);padding:0 10px;border:0;
-  border-radius:var(--radius-sm);background:var(--surface-inset);color:var(--text);font:inherit;font-size:var(--text-sm);white-space:nowrap;
+  border-radius:var(--tag-radius);background:var(--surface-inset);color:var(--text);font:inherit;font-size:var(--text-sm);white-space:nowrap;
   transition:background .2s;
 }
 .sm-tag--flash{background:var(--accent-soft)}
@@ -894,6 +979,46 @@ body:has(.sm-admin){margin:0}
 .sm-combo--tag .sm-input{height:var(--control-h-sm);padding-right:10px}
 .sm-combo--tag .sm-combo__chevron{display:none}
 .sm-combo--tag .sm-combo__list{right:auto;width:240px}
+/* ── date and datetime pickers (spec 2026-09-25) ──────────────────────
+   The text box with a calendar button as its suffix; for datetime an hour
+   and a minute select beside it; the popover a month grid on the menu
+   surface, 7 × 32px cells in 252px, flipping upward when the room below
+   is short (opensUp, as the combobox). */
+.sm-date{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0}
+.sm-date__row{display:flex;align-items:center;gap:8px;min-width:0}
+.sm-inputwrap.sm-date__wrap{flex:1;min-width:0;padding-right:6px}
+.sm-date__btn{
+  width:28px;height:28px;flex:none;display:grid;place-items:center;padding:0;
+  border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;
+}
+.sm-date__btn:hover,.sm-date__btn[aria-expanded="true"]{background:var(--hover);color:var(--text)}
+.sm-date__time{width:auto;flex:none;padding-right:30px}
+.sm-date__colon{color:var(--text-muted);margin:0 -4px}
+/* left is inline: the popover's right edge under the calendar button (2026-09-26; flush left before). */
+.sm-cal{
+  position:absolute;top:calc(var(--control-h) + 4px);left:0;z-index:60;width:252px;padding:8px;
+  background:var(--menu-bg);border:var(--menu-border);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);
+}
+.sm-cal--up{top:auto;bottom:calc(100% + 4px)}
+.sm-cal__head{display:flex;align-items:center;gap:4px;height:28px;margin-bottom:4px}
+.sm-cal__month{flex:1;text-align:center;font-weight:600;font-size:var(--text-sm)}
+.sm-cal__nav{
+  width:24px;height:24px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--radius-sm);
+  background:transparent;color:var(--text-muted);cursor:pointer;
+}
+.sm-cal__nav:hover{background:var(--hover);color:var(--text)}
+.sm-cal__grid{display:grid;grid-template-columns:repeat(7,32px);gap:2px}
+.sm-cal__wd{height:24px;display:grid;place-items:center;font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
+.sm-cal__day{
+  height:32px;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text);
+  font:inherit;font-size:var(--text-sm);cursor:pointer;
+}
+.sm-cal__day:hover{background:var(--nav-active-bg)}
+.sm-cal__day--out{color:var(--text-subtle)}
+.sm-cal__day--today{box-shadow:inset 0 0 0 1px var(--accent-line)}
+.sm-cal__day--focus{box-shadow:inset 0 0 0 2px var(--accent)}
+.sm-cal__day[aria-pressed="true"],.sm-cal__day[aria-pressed="true"]:hover{background:var(--accent);color:var(--on-accent)}
+.sm-cal__foot{display:flex;justify-content:flex-end;padding:6px 4px 0}
 .sm-dashed{
   border:1px dashed var(--line-dashed);border-radius:var(--radius-lg);
   display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-subtle);
@@ -903,13 +1028,15 @@ body:has(.sm-admin){margin:0}
 /* ── media ─────────────────────────────────────────────────────────── */
 /* The single track is minmax(0,1fr), not auto: an auto track grows to the panel's own width, so the
    panel's max-width:100% would cap at nothing and a 1200px History panel ran past a laptop viewport. */
-.sm-modal{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;padding:24px}
+.sm-modal{position:fixed;inset:0;z-index:70;background:var(--scrim);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;padding:24px}
 .sm-modal__panel{
-  max-width:100%;max-height:100%;display:flex;flex-direction:column;background:var(--surface);
-  border:var(--menu-border);border-radius:var(--radius-card);box-shadow:var(--shadow-pop);overflow:hidden;
+  max-width:100%;max-height:100%;display:flex;flex-direction:column;background:var(--menu-bg);
+  border:var(--menu-border);border-radius:var(--radius-modal);box-shadow:var(--shadow-modal);overflow:hidden;
 }
 .sm-modal__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:var(--card-divider)}
 .sm-modal__body{padding:12px 16px;overflow:auto;display:flex;flex-direction:column;gap:10px;min-height:0}
+/* Fields on the white modal panel take the tile tone, like the dialog's (2026-09-25). */
+.sm-modal__panel .sm-input,.sm-modal__panel .sm-textarea,.sm-modal__panel .sm-select{background:var(--surface)}
 .sm-modal__foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px 14px;border-top:var(--card-divider)}
 .sm-modal__body--flush{padding:0;gap:0;flex:1}
 /* ── history (spec 2026-09-13) ─────────────────────────────────── */
@@ -928,7 +1055,8 @@ body:has(.sm-admin){margin:0}
   border:1px dashed var(--line-dashed);border-radius:var(--radius-lg);background:var(--input-bg);color:var(--text-muted);
   display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px;text-align:center;
 }
-.sm-dropzone--bar{padding:10px;font-size:var(--text-sm)}
+/* The picker's drop bar: tall enough to aim a drag at (2026-09-25). */
+.sm-dropzone--bar{padding:28px 10px;font-size:var(--text-sm)}
 .sm-mediagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
 .sm-mediacard{
   display:flex;flex-direction:column;gap:4px;padding:6px;background:transparent;border:1.5px solid transparent;
@@ -942,12 +1070,14 @@ body:has(.sm-admin){margin:0}
 .sm-mediacard__name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sm-mediacard__meta{font-size:var(--text-sm);color:var(--text-muted)}
 .sm-media{display:flex;flex-direction:column;gap:6px}
-/* The filled image field: a canvas (inset ground, up to 300px tall) with
-   the cropped frame contained inside it — the frame keeps its aspect and
-   is sized by the widget as min(300px tall, full width). */
+/* The filled image field: a canvas (a shade off its ground — a neutral
+   grey in light mode, lighter in dark — up to 300px tall) with the cropped frame
+   contained inside it; the frame keeps its aspect and is sized by the
+   widget as min(300px tall, full width). The inset tone alone read as an
+   empty field (2026-09-25). */
 .sm-media__canvas{
   display:flex;align-items:center;justify-content:center;max-height:300px;overflow:hidden;
-  border-radius:var(--radius-md);background:var(--surface-inset);
+  border-radius:var(--radius-md);background:var(--canvas-ground);
 }
 .sm-media__thumb{position:relative;overflow:hidden;max-width:100%;max-height:300px;background:var(--surface-inset)}
 .sm-media__thumb>img,.sm-media__thumb>video{position:absolute;max-width:none;display:block}
@@ -978,8 +1108,11 @@ body:has(.sm-admin){margin:0}
 /* The Settings area (spec 2026-09-25 §5): a 200px nav card beside the
    page, both under the main column; the page keeps its own top bar. */
 .sm-settings{display:grid;grid-template-columns:200px 1fr;column-gap:var(--gutter);flex:1;min-height:0}
+/* The nav card starts under the page's top bar, so its top meets the page's
+   grey card across the gutter; no heading (asked for 2026-09-26; an 18px
+   title, then an overline, lived above the links earlier that day). */
 .sm-settings__nav{
-  display:flex;flex-direction:column;gap:2px;padding:var(--table-pad);overflow:auto;
+  display:flex;flex-direction:column;gap:2px;padding:var(--table-pad);overflow:auto;margin-top:var(--topbar-h);
   background:var(--surface-form);border-radius:var(--radius-card-lg);
 }
 .sm-settings__link{
@@ -988,10 +1121,46 @@ body:has(.sm-admin){margin:0}
 .sm-settings__link:hover{background:var(--surface-inset)}
 .sm-settings__link[aria-current="page"],.sm-settings__link[aria-current="page"]:hover{background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600}
 .sm-settings__page{display:flex;flex-direction:column;min-width:0;min-height:0}
+
+/* ── dialog card (design_handoff_smoodly_neutral/components/ConfirmModal.html) ── */
+/* The scrim covers the whole admin, frame included, above every modal
+   (a History restore asks from inside one). The card: 440px, the modal
+   radius, 28/28/24 padding, sections 20px apart. The confirm question and
+   the page form dialogs share it (ui/Dialog.tsx). */
+.sm-scrim{position:fixed;inset:0;z-index:80;background:var(--scrim);display:grid;place-items:center;padding:24px}
+.sm-dialog{
+  width:440px;max-width:100%;display:flex;flex-direction:column;gap:20px;padding:28px 28px 24px;
+  background:var(--menu-bg);border:var(--menu-border);border-radius:var(--radius-modal);box-shadow:var(--shadow-modal);
+  color:var(--text);
+}
+.sm-dialog__head{display:flex;flex-direction:column;gap:8px}
+.sm-dialog__titlerow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
+.sm-dialog__title{font:var(--title-weight) var(--title-size)/1.3 var(--title-font);letter-spacing:var(--title-tracking);margin:0}
+.sm-dialog__close{
+  width:28px;height:28px;flex:none;margin:-4px -6px 0 0;display:grid;place-items:center;
+  border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);font-size:14px;line-height:1;cursor:pointer;
+}
+.sm-dialog__close:hover{background:var(--hover);color:var(--text)}
+.sm-dialog__close:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
+/* The confirm's consequence sits right under the title, closer than the sections. */
+.sm-confirm .sm-dialog__body{margin:-12px 0 0}
+.sm-dialog__body{margin:0;color:var(--text-secondary);line-height:1.55}
+/* The context chip: the subject's name (truncates) and its path (never does). */
+.sm-dialog__context{
+  display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;
+  background:var(--surface);border-radius:var(--radius-lg);color:var(--text-muted);font-size:var(--text-sm);white-space:nowrap;
+}
+.sm-dialog__context strong{font-weight:500;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--text-md)}
+.sm-dialog__context code{font-family:var(--font-mono);flex:none}
+/* A form dialog's fields: white fields on the white card get the tile tone instead. */
+.sm-dialog__form{display:flex;flex-direction:column;gap:14px}
+.sm-dialog__form .sm-input,.sm-dialog__form .sm-select,.sm-dialog__form .sm-inputwrap{background:var(--surface)}
+.sm-dialog__form .sm-inputwrap>.sm-input{background:transparent}
+.sm-dialog__actions{display:flex;justify-content:flex-end;gap:10px}
 `;
 /** Where the theme toggle's choice is remembered, browser-side only. */
 export const THEME_KEY = "smoodly-theme";
-/** TEMPORARY, see the technical block: which look the developer is comparing. */
+/** Which look the developer is comparing (see the warm block): "warm" applies it, anything else is the default. */
 export const LOOK_KEY = "smoodly-look";
 /** Applies a remembered choice before first paint, so a dark-mode editor never
  *  gets a white flash, and the inspector never jumps to a dragged width. It
@@ -1004,7 +1173,7 @@ const THEME_BOOT = `(function(){try{var e=document.currentScript.parentElement,`
     `l=localStorage.getItem(${JSON.stringify(LOOK_KEY)}),` +
     `w=localStorage.getItem(${JSON.stringify(INSPECTOR_W_KEY)});` +
     `if(t==="dark"||t==="light")e.setAttribute("data-theme",t);` +
-    `if(l==="technical")e.setAttribute("data-look",l);` +
+    `if(l==="warm")e.setAttribute("data-look",l);` +
     `if(w&&/^\\d+$/.test(w)&&+w>=${MIN_INSPECTOR_W})e.style.setProperty("--inspector-w",w+"px")}catch(e){}})()`;
 /** One <style> element and the theme boot, rendered once by AdminLayout. */
 export function AdminStyles() {