smoodly 0.0.12 → 0.0.13

package/dist/admin/ui/theme.js

@@ -7,10 +7,114 @@ 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.
 //
-// Values come from design_handoff_smoodly_cms/tokens/*.css and are final:
-// don't round them to a grid. 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_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.
+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;
+
+  --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);
+  --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;
+  /* 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);
+
+  --status-published-fg:var(--green-700); --status-published-bg:var(--green-50);
+  --status-draft-fg:var(--amber-700); --status-draft-bg:var(--amber-50);
+  --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;
+  --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 TOKENS_DARK = `
+  --accent:#6CC4A6; --accent-hover:#82D2B8; --accent-soft:rgba(108,196,166,.18); --accent-line:#6CC4A6; --on-accent:#0B1F18;
+  --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-draft-fg:var(--amber-300); --status-draft-bg:rgba(232,184,90,.14);
+  --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 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 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: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%);
+  --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;
+  --control-h:40px; --control-h-sm:34px; --control-h-lg:48px; --button-h:36px; --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:320px; --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:2px solid var(--selection);
+`;
+/* ── 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;
@@ -46,7 +150,7 @@ const TOKENS_LIGHT = `
      disagree with the colors — both follow the one cascade below. */
   --when-light:inline-flex; --when-dark:none;
 `;
-const TOKENS_DARK = `
+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;
@@ -65,7 +169,7 @@ const TOKENS_DARK = `
   --logo-filter:brightness(0) invert(1);
   --when-light:none; --when-dark:inline-flex;
 `;
-const SCALE = `
+const TECHNICAL_SCALE = `
   --font-sans:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
   --font-mono:ui-monospace,Menlo,Consolas,monospace;
   --text-2xs:9px; --text-xs:10px; --text-sm:11px; --text-md:12px;
@@ -78,17 +182,63 @@ const SCALE = `
   --border:1px solid var(--line);
   --outline-selection:1.5px solid var(--selection);
 `;
-export const ADMIN_CSS = `
-@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap");
-
-.sm-admin{${SCALE}${TOKENS_LIGHT}}
-html[data-theme="dark"] .sm-admin,.sm-admin[data-theme="dark"]{${TOKENS_DARK}}
+/* 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;
+  --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);
+  --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;
+`;
+const TECHNICAL_DARK_EXTRA = `
+  --input-focus-bg:#1B1F28; --text-secondary:#B8BFCF; --text-disabled:#4A5165;
+`;
+/** 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
+ *  choice from the theme toggle wins over a dark <html> and over the OS.
+ *  Each look's root carries one more attribute than the default's, so a
+ *  look's rules beat the default's at every step of the same cascade. */
+function cascade(root, scale, light, dark) {
+    return `
+${root}{${scale}${light}}
+html[data-theme="dark"] ${root},${root}[data-theme="dark"]{${dark}}
 @media (prefers-color-scheme:dark){
-  html:not([data-theme="light"]) .sm-admin:not([data-theme="light"]){${TOKENS_DARK}}
+  html:not([data-theme="light"]) ${root}:not([data-theme="light"]){${dark}}
 }
-/* Last, and the same specificity as the host-attribute rule: an explicit
-   choice from the theme toggle wins over a dark <html> and over the OS. */
-.sm-admin[data-theme="light"]{${TOKENS_LIGHT}}
+${root}[data-theme="light"]{${light}}`;
+}
+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)}
 
 /* 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. */
@@ -96,7 +246,7 @@ body:has(.sm-admin){margin:0}
 .sm-admin,.sm-admin *,.sm-admin *::before,.sm-admin *::after{box-sizing:border-box}
 .sm-admin{
   font-family:var(--font-sans);font-size:var(--text-md);line-height:1.4;
-  color:var(--text);background:var(--surface);
+  color:var(--text);background:var(--bg);
   -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
 }
 .sm-admin h1,.sm-admin h2,.sm-admin h3,.sm-admin p,.sm-admin ul{margin:0}
@@ -104,40 +254,47 @@ body:has(.sm-admin){margin:0}
    component class on it (.sm-nav-item, .sm-btn, .sm-back) decides its own
    colour. Without this the element selector silently beat every one of them. */
 :where(.sm-admin a){color:var(--accent);text-decoration:none}
-:where(.sm-admin a:hover){color:var(--brand-500)}
+:where(.sm-admin a:hover){color:var(--accent-hover)}
 .sm-admin button,.sm-admin input,.sm-admin select,.sm-admin textarea{font-family:inherit}
 .sm-admin ::placeholder{color:var(--text-subtle)}
 .sm-admin ::selection{background:var(--accent-soft);color:var(--text)}
 .sm-mono{font-family:var(--font-mono)}
 
 /* ── shell ─────────────────────────────────────────────────────────── */
-.sm-shell{display:grid;grid-template-columns:var(--nav-w) 1fr;height:100vh;height:100dvh;overflow:hidden}
+/* 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. */
+.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);
+}
 .sm-shell>.sm-main{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
-.sm-wordmark{height:18px;width:auto;filter:var(--logo-filter);flex:none}
-/* The design system's IconRail (components/navigation/IconRail.html),
-   ported as-is: a 72px rail, 18px Lucide icons over a 10px label, a
-   40×32 active tile, the app icon on top and the avatar at the bottom. */
+.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. */
 .sm-rail{
-  width:var(--nav-w);height:100%;display:flex;flex-direction:column;align-items:center;gap:14px;
-  padding:14px 6px 12px;background:var(--surface);border-right:var(--border);color:var(--text);
+  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);
   font:500 10px/1 var(--font-sans);position:relative;
 }
-.sm-rail__logo{width:28px;height:28px;display:block;flex:none}
-.sm-rail__list{display:flex;flex-direction:column;gap:6px;width:100%;margin:0;padding:0;list-style:none}
+.sm-rail__logo{width:28px;height:28px;display:var(--rail-logo);flex:none}
+.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{
   appearance:none;background:none;border:0;margin:0;padding:2px 0;width:100%;display:flex;flex-direction:column;
-  align-items:center;gap:5px;color:inherit;font:inherit;cursor:pointer;border-radius:var(--radius-md);text-decoration:none;
+  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:40px;height:32px;border-radius:var(--radius-md);display:grid;place-items:center;transition:background .12s}
-.sm-rail__btn:hover .sm-rail__tile{background:var(--surface-inset)}
+.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__tile svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
-.sm-rail__chev{position:absolute;right:3px;bottom:2px;width:8px;height:8px}
+.sm-rail__chev{position:absolute;right:4px;bottom:3px;width:8px;height:8px}
 .sm-rail__chev svg{width:8px;height:8px;stroke-width:3}
 .sm-rail__label{letter-spacing:.01em;white-space:nowrap}
 /* Not greyed: the reference renders every inactive item at --text and marks
@@ -146,22 +303,22 @@ body:has(.sm-admin){margin:0}
 .sm-rail__btn[aria-disabled="true"]:hover .sm-rail__tile{background:transparent}
 .sm-rail__foot{margin-top:auto;display:flex;flex-direction:column;align-items:center}
 .sm-rail__user{
-  width:26px;height:26px;border-radius:var(--radius-round);background:var(--accent-soft);color:var(--accent);
-  display:grid;place-items:center;font-size:var(--text-sm);font-weight:600;border:0;cursor:pointer;padding: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__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(--border);border-radius:var(--radius-md);box-shadow:0 4px 20px rgba(0,0,0,.14);
+  background:var(--surface);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}
 .sm-rail__menu--up{top:auto;bottom:0}
-.sm-rail__menu-title{font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);padding:6px 8px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sm-rail__menu-title{font-size:9px;font-weight:600;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);padding:6px 8px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sm-rail__menu-item{
   appearance:none;background:none;border:0;width:100%;display:flex;align-items:center;justify-content:space-between;
-  padding:6px 8px;border-radius:var(--radius-sm);color:inherit;font:inherit;cursor:pointer;text-align:left;text-decoration:none;
+  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[aria-current="page"],.sm-rail__menu-item[aria-current="page"]:hover{background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600}
@@ -169,7 +326,7 @@ body:has(.sm-admin){margin:0}
 .sm-when-dark{display:var(--when-dark);align-items:center;gap:8px}
 /* .sm-nav-item survives as the inspector's link style (EditorView). */
 .sm-nav-item{
-  display:block;padding:6px 10px;border-radius:var(--radius-md);line-height:1.3;
+  display:block;padding:8px 12px;border-radius:var(--radius-sm);line-height:1.3;
   color:var(--text);font-weight:500;text-decoration:none;cursor:pointer;
   background:transparent;border:0;width:100%;text-align:left;font-size:var(--text-md);
   overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
@@ -179,35 +336,43 @@ body:has(.sm-admin){margin:0}
 /* ── top bar ───────────────────────────────────────────────────────── */
 .sm-topbar{
   height:var(--topbar-h);flex:none;display:flex;align-items:center;justify-content:space-between;
-  gap:16px;padding:0 16px;border-bottom:var(--border);background:var(--surface);
+  gap:16px;padding:var(--topbar-pad);border-bottom:var(--bar-border);background:var(--bar-bg);
 }
 .sm-topbar__left{display:flex;align-items:center;gap:10px;min-width:0}
-.sm-topbar__right{display:flex;align-items:center;gap:8px;flex:none}
-.sm-crumbs{display:flex;align-items:center;gap:8px;color:var(--text-muted);min-width:0}
+.sm-topbar__right{display:flex;align-items:center;gap:10px;flex:none}
+.sm-crumbs{display:flex;align-items:center;gap:10px;color:var(--text-muted);min-width:0}
 .sm-crumbs__sep{opacity:.5}
-.sm-crumbs__here{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.sm-back{border:0;background:transparent;padding:0;color:var(--text);font:inherit;cursor:pointer;line-height:1}
+.sm-crumbs__here{color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sm-back{
+  width:var(--back-size);height:var(--back-size);flex:none;display:grid;place-items:center;
+  border:0;border-radius:var(--radius-round);background:var(--back-bg);padding:0;
+  color:var(--text);font:inherit;cursor:pointer;line-height:1;
+}
 .sm-back:hover{color:var(--accent)}
-.sm-title{font-size:var(--text-xl);font-weight:600}
-.sm-count{color:var(--text-muted)}
+/* The view title (Pages, Articles…): Public Sans 18px (2026-09-09; the
+   serif stays for the document title and richtext headings). Inside a
+   card head or a modal it is a smaller sans heading. */
+.sm-title{font:var(--title-weight) var(--title-size)/1.2 var(--title-font);letter-spacing:var(--title-tracking)}
+.sm-inspector__head .sm-title,.sm-modal__head .sm-title{font:600 var(--text-lg)/1.3 var(--font-sans);letter-spacing:0}
+.sm-count{color:var(--text-muted);font-size:var(--text-md)}
 
 /* ── buttons ───────────────────────────────────────────────────────── */
 .sm-btn{
   display:inline-flex;align-items:center;justify-content:center;gap:6px;
-  height:var(--control-h);padding:0 12px;border-radius:var(--radius-md);border:0;
+  height:var(--button-h);padding:0 16px;border-radius:var(--radius-btn);border:0;
   font-size:var(--text-md);font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;
   text-decoration:none;
 }
-.sm-btn--lg{height:var(--control-h-lg);padding:0 16px}
-.sm-btn--primary{background:var(--accent);color:var(--on-accent);font-weight:600;padding:0 14px}
-.sm-btn--primary:hover{background:var(--brand-500);color:var(--on-accent)}
-.sm-btn--secondary{background:var(--surface-inset);color:var(--text)}
-.sm-btn--secondary:hover{background:var(--control-hover);color:var(--text)}
-.sm-btn--ghost{background:transparent;color:var(--accent);font-weight:600;padding:0 8px}
+.sm-btn--lg{height:var(--control-h-lg);padding:0 20px}
+.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)}
+.sm-btn--secondary{background:var(--btn-secondary-bg);color:var(--text)}
+.sm-btn--secondary:hover{background:var(--btn-secondary-hover);color:var(--text)}
+.sm-btn--ghost{background:transparent;color:var(--accent);font-weight:600;padding:0 10px}
 .sm-btn--ghost:hover{background:var(--accent-soft);color:var(--accent)}
-.sm-btn--danger{background:var(--surface-inset);color:var(--danger)}
+.sm-btn--danger{background:var(--btn-secondary-bg);color:var(--danger)}
 .sm-btn--danger:hover{background:var(--danger-soft);color:var(--danger)}
-.sm-btn--ok{background:var(--status-published-bg);color:var(--status-published-fg);font-weight:600;padding:0 14px}
+.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,
 .sm-tab:focus-visible,.sm-seg__opt:focus-visible,.sm-row:focus-visible{
@@ -220,227 +385,389 @@ body:has(.sm-admin){margin:0}
   font-size:12px;line-height:1;cursor:pointer;
 }
 .sm-iconbtn:hover{background:var(--hover);color:var(--text)}
-.sm-iconbtn--inverse{color:#EEF0F5}
+.sm-iconbtn--inverse{color:var(--toolbar-fg)}
 .sm-iconbtn--inverse:hover{background:rgba(255,255,255,.14);color:#fff}
 .sm-iconbtn:disabled{opacity:.3;cursor:default}
 .sm-iconbtn:disabled:hover{background:transparent}
 
 /* ── fields ────────────────────────────────────────────────────────── */
-.sm-field{display:flex;flex-direction:column;gap:6px;min-width:0}
+.sm-field{display:flex;flex-direction:column;gap:8px;min-width:0}
 .sm-field__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
 .sm-label{
-  font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-label);
-  text-transform:uppercase;color:var(--text-muted);
-}
-.sm-counter,.sm-hint{font-size:var(--text-sm);color:var(--text-muted)}
+  display:inline-flex;align-items:center;gap:5px;
+  font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-tracking);
+  text-transform:var(--label-transform);color:var(--text-muted);
+}
+/* The "same in every language" mark beside a field name that is not
+   .localized() (a Lucide globe-off), instead of grouping fields by locale. */
+.sm-label__mark{display:inline-flex;color:var(--text-subtle);cursor:help}
+.sm-label__mark svg{width:13px;height:13px}
+.sm-counter{font-size:var(--text-sm);color:var(--text-subtle)}
+.sm-hint{font-size:var(--text-sm);color:var(--text-muted)}
 .sm-input,.sm-textarea,.sm-select{
-  width:100%;min-width:0;border:1.5px solid transparent;border-radius:var(--radius-md);
-  background:var(--surface-inset);color:var(--text);font-size:var(--text-md);
+  width:100%;min-width:0;border:1px solid var(--input-border);border-radius:var(--radius-md);
+  background:var(--input-bg);color:var(--text);font-size:var(--text-md);
   outline:0;box-shadow:none;
 }
-.sm-input,.sm-select{height:var(--control-h);padding:0 10px}
-.sm-textarea{padding:8px 10px;line-height:1.5;resize:vertical;min-height:60px}
-.sm-input--lg{height:var(--control-h-lg);font-size:var(--text-2xl);font-weight:600}
+.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). */
+.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)}
-.sm-input:hover,.sm-textarea:hover,.sm-select:hover{background:var(--control-hover)}
+.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{
-  background:var(--input-bg);border-color:var(--selection);box-shadow:var(--focus-ring);
+  background:var(--input-focus-bg);border-color:var(--selection);box-shadow:var(--focus-ring);
 }
 .sm-input:disabled,.sm-textarea:disabled,.sm-select:disabled{opacity:.6;cursor:default}
 .sm-select{
-  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;font-weight:500;
+  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:30px;font-weight:500;
   background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),
     linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
-  background-position:calc(100% - 14px) 12px,calc(100% - 10px) 12px;
+  background-position:calc(100% - 16px) calc(50% - 1px),calc(100% - 12px) calc(50% - 1px);
   background-size:4px 4px,4px 4px;background-repeat:no-repeat;
 }
 .sm-inputwrap{
-  display:flex;align-items:center;gap:0;height:var(--control-h);padding:0 10px;
-  border:1.5px solid transparent;border-radius:var(--radius-md);background:var(--surface-inset);
+  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}
 .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)}
 /* ── richtext ──────────────────────────────────────────────────────── */
-.sm-richtext{display:flex;flex-direction:column;gap:6px;min-width:0}
+.sm-richtext{display:flex;flex-direction:column;gap:8px;min-width:0}
 .sm-richtext__bar{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
 .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}
 .sm-richtext__content{
-  min-height:110px;padding:8px 10px;border:1.5px solid transparent;border-radius:var(--radius-md);
-  background:var(--surface-inset);color:var(--text);font-size:var(--text-md);line-height:1.5;outline:0;
-}
-.sm-richtext__content:hover{background:var(--control-hover)}
-.sm-richtext__content:focus{background:var(--input-bg);border-color:var(--selection);box-shadow:var(--focus-ring)}
-.sm-richtext__content>*+*{margin-top:.5em}
-.sm-richtext__content p,.sm-richtext__content h1,.sm-richtext__content h2,.sm-richtext__content h3,
-.sm-richtext__content h4,.sm-richtext__content h5,.sm-richtext__content h6,
-.sm-richtext__content ul,.sm-richtext__content ol,.sm-richtext__content blockquote{margin:0}
+  min-height:140px;padding:12px 14px;border:1px solid var(--input-border);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)}
+/* 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
+   touching). Paragraphs get .9em, a heading 1.5em above. */
+.sm-richtext__content :where(p,h1,h2,h3,h4,h5,h6,ul,ol,blockquote){margin:0}
+.sm-admin .sm-richtext__content>*+*{margin-top:.9em}
+.sm-admin .sm-richtext__content>*+:is(h1,h2,h3,h4,h5,h6){margin-top:1.5em}
+/* Block-node cards (TipTap wraps each node view in .react-renderer) get
+   room above and below; the document's first and last keep the edges. */
+.sm-richtext__content>.react-renderer{margin:18px 0}
+.sm-richtext__content>.react-renderer:first-child{margin-top:0}
+.sm-richtext__content>.react-renderer:last-child{margin-bottom:0}
+/* Headings inside content are editorial: serif in the warm look. */
 .sm-richtext__content h1,.sm-richtext__content h2,.sm-richtext__content h3,
-.sm-richtext__content h4,.sm-richtext__content h5,.sm-richtext__content h6{font-weight:600;line-height:1.25}
+.sm-richtext__content h4,.sm-richtext__content h5,.sm-richtext__content h6{
+  font-family:var(--font-serif);font-weight:600;line-height:1.3;letter-spacing:var(--title-tracking);
+}
 .sm-richtext__content h1{font-size:var(--text-3xl)}
 .sm-richtext__content h2{font-size:var(--text-2xl)}
 .sm-richtext__content h3{font-size:var(--text-xl)}
 .sm-richtext__content h4,.sm-richtext__content h5,.sm-richtext__content h6{font-size:var(--text-lg)}
-.sm-richtext__content ul,.sm-richtext__content ol{padding-left:18px}
+.sm-richtext__content ul,.sm-richtext__content ol{padding-left:20px}
 .sm-richtext__content li+li{margin-top:.25em}
-.sm-richtext__content blockquote{padding-left:10px;border-left:2px solid var(--line);color:var(--text-muted)}
-.sm-richtext__content a{color:var(--accent);text-decoration:underline}
+.sm-richtext__body{position:relative}
+/* The "+" menu floats under the toolbar's right end (the "+" is its last
+   button) instead of pushing the content down; the picker inside drops
+   its own chrome. The slash menu floats under the caret the same way. */
+.sm-richtext__head{position:relative}
+.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);
+}
+.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}
+.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}
+.sm-rtcard__title{flex:1;min-width:0;font-weight:600;font-size:var(--text-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sm-rtcard__body{display:flex;flex-direction:column;gap:10px;padding:10px 12px 12px;border-top:1px solid var(--line)}
+.sm-rtcard__thumb{display:block;width:100%;max-height:160px;object-fit:cover;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-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)}
+
+/* Inline editing in the canvas (spec 2026-09-10). The outlines are drawn in
+   the overlay from the bridge's field rects; the toolbar floats above the
+   selection. */
+.sm-fieldhover{outline:1px solid color-mix(in srgb,var(--selection) 55%,transparent);outline-offset:2px;border-radius:2px;pointer-events:none}
+.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;
+}
+.sm-floatbar .sm-richtext__link{padding:0 4px 4px}
+.sm-floatbar .sm-richtext__menu{position:static;width:300px}
+/* The canvas editor root: ProseMirror's base rules (TipTap injects its
+   stylesheet into the admin document, never the iframe) and nothing of the
+   widget's typography — the site's CSS styles the content. */
+.sm-inline-richtext{position:relative;outline:none;word-wrap:break-word;white-space:pre-wrap;white-space:break-spaces;-webkit-font-variant-ligatures:none;font-variant-ligatures:none;font-feature-settings:"liga" 0}
+.sm-inline-richtext:focus{outline:none}
+.sm-inline-richtext [contenteditable="false"]{white-space:normal}
+.sm-inline-richtext [contenteditable="false"] [contenteditable="true"]{white-space:pre-wrap}
+.sm-inline-richtext .ProseMirror-selectednode .sm-rtcard,.sm-inline-richtext .sm-rtcard.ProseMirror-selectednode{outline:2px solid var(--accent);outline-offset:1px}
+/* The inspector while a richtext field is edited in the canvas. */
+.sm-inline-note{
+  display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--control-h);padding:0 6px 0 14px;
+  border-radius:var(--radius-md);background:var(--surface-inset);color:var(--text-muted);font-size:var(--text-sm);
+}
+/* A field revealed from a canvas click: one pulse of the accent, then nothing. */
+.sm-field--reveal{animation:sm-reveal .9s ease-out;border-radius:var(--radius-sm)}
+@keyframes sm-reveal{0%{outline:2px solid var(--selection);outline-offset:4px}100%{outline:2px solid transparent;outline-offset:4px}}
 
-.sm-group{display:flex;flex-direction:column;gap:10px;padding:2px 0 0 10px;border-left:2px solid var(--line)}
-.sm-list{display:flex;flex-direction:column;gap:6px;align-items:stretch}
-.sm-listrow{border:1px solid var(--line);border-radius:var(--radius-md);min-width:0}
-.sm-listrow__head{display:flex;align-items:center;gap:2px;height:var(--control-h);padding:0 4px 0 4px}
+.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__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 4px;
+  flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:100%;padding:0 6px;
   border:0;background:transparent;color:var(--text);font:inherit;font-size:var(--text-md);font-weight:500;
   text-align:left;cursor:pointer;
 }
 .sm-listrow__toggle:hover{color:var(--accent)}
 .sm-listrow__summary{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
-.sm-listrow__body{display:flex;flex-direction:column;gap:10px;padding:8px 10px 10px;border-top:1px solid var(--line)}
+.sm-listrow__body{display:flex;flex-direction:column;gap:10px;padding:10px 12px 12px;border-top:1px solid var(--line)}
 
 /* ── data ──────────────────────────────────────────────────────────── */
-.sm-table{display:flex;flex-direction:column;padding:0 16px 16px}
+/* 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)}
+/* 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:34px;border-bottom:var(--border);font-family:var(--font-mono);
-  font-size:var(--text-2xs);letter-spacing:var(--tracking-tag);color:var(--text-muted);
-  text-transform:uppercase;position:sticky;top:0;background:var(--surface);z-index:1;
+  height:40px;border-bottom:1px solid var(--line);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;
 }
-.sm-table__body{display:flex;flex-direction:column;padding-top:4px}
+/* 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. */
+.sm-table__body{display:flex;flex-direction:column}
 .sm-row{
-  height:var(--row-h);border-radius:var(--radius-md);background:transparent;
-  border:0;font:inherit;color:inherit;text-align:left;width:100%;
+  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%;
 }
 .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}
-.sm-cell--muted{color:var(--text-muted)}
+.sm-cell--muted{color:var(--text-muted);font-size:var(--meta-size)}
 .sm-cell--mono{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted)}
 .sm-cell--title{font-weight:500}
+.sm-cell--grip{overflow:visible;display:flex;align-items:center;margin-left:-4px}
 .sm-empty{padding:28px 8px;color:var(--text-muted)}
+/* ── drag and drop (spec 2026-09-09 §7) ─────────────────────────────── */
+/* The grip is faint until its row is hovered or it has focus. */
+.sm-grip{
+  display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;
+  border:0;background:transparent;color:var(--text-muted);border-radius:var(--radius-xs);
+  cursor:grab;touch-action:none;opacity:0;transition:opacity 120ms ease;padding:0;
+}
+.sm-row:hover .sm-grip,.sm-listrow__head:hover .sm-grip,.sm-outline-row:hover .sm-grip,.sm-grip:focus-visible{opacity:1}
+.sm-grip:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
+/* The lifted row follows the pointer; siblings slide (transition set inline by the hook). */
+.sm-drag--lifted{position:relative;z-index:2;box-shadow:var(--shadow-pop);background:var(--surface);cursor:grabbing}
+.sm-drag--lifted .sm-grip{opacity:1;cursor:grabbing}
+.sm-drag--invalid{opacity:.5}
 .sm-chevron{
   width:12px;flex:none;border:0;background:none;padding:0;font:inherit;font-size:10px;
   color:var(--text-muted);cursor:pointer;line-height:1;
 }
 .sm-chevron:hover{color:var(--text)}
-.sm-cell--tree{display:flex;align-items:center;gap:6px;font-weight:500}
+.sm-cell--tree{display:flex;align-items:center;gap:8px;font-weight:500}
 .sm-cell--tree.sm-cell--parent{font-weight:600}
 .sm-rowmenu{
   border:0;background:none;padding:0 6px;font:inherit;color:var(--text-muted);cursor:pointer;
-  border-radius:var(--radius-md);line-height:1;height:24px;
+  border-radius:var(--radius-sm);line-height:1;height:24px;
 }
 .sm-rowmenu:hover{background:var(--surface-inset);color:var(--text)}
 
+/* Status pill: a dot before the word in the warm look (none in the technical). */
 .sm-badge{
-  display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--radius-md);
-  font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;white-space:nowrap;
+  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;
 }
+.sm-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;display:var(--badge-dot);flex:none}
 .sm-savestate{
-  display:inline-flex;align-items:center;gap:6px;padding:0 6px;
-  font-size:var(--text-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
+  display:inline-flex;align-items:center;gap:7px;padding:0 8px;
+  font-size:var(--text-sm);font-weight:500;letter-spacing:var(--caps-tracking);text-transform:var(--caps-transform);
 }
-.sm-dot{width:5px;height:5px;border-radius:var(--radius-round);flex:none}
+.sm-dot{width:6px;height:6px;border-radius:var(--radius-round);flex:none}
 
 /* ── navigation bits ───────────────────────────────────────────────── */
-.sm-tabs{display:flex;gap:18px;padding:0 14px;height:36px;align-items:stretch;border-bottom:var(--border);flex:none}
+/* 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). */
+.sm-tabs{
+  display:flex;gap:2px;padding:var(--tabs-pad);background:var(--tabs-bg);border-radius:var(--radius-btn);
+  border-bottom:var(--card-divider);flex:none;
+}
 .sm-tab{
-  display:flex;align-items:center;border:0;background:transparent;padding:0;font:inherit;
-  cursor:pointer;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;
+  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;
+  cursor:pointer;color:var(--text-muted);white-space:nowrap;
 }
 .sm-tab:hover{color:var(--text)}
-.sm-tab[aria-selected="true"]{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}
-.sm-seg{display:flex;gap:2px;padding:2px;background:var(--surface-inset);border-radius:var(--radius-md)}
+.sm-tab[aria-selected="true"]{background:var(--tab-active-bg);color:var(--tab-active-fg);font-weight:600;box-shadow:var(--tab-active-shadow)}
+/* The segmented control's track is --seg-bg (the canvas tone), one step
+   below the inset so it reads on the cream ground of the top bar and the
+   canvas meta row as well as on a white card. */
+.sm-seg{display:flex;gap:2px;padding:3px;background:var(--seg-bg);border-radius:var(--radius-btn)}
+/* A locale switch: each option wide enough to read as a tab, not a chip. */
+.sm-seg--locale .sm-seg__opt{min-width:64px}
 .sm-seg--stretch{width:100%}
 .sm-seg--disabled{opacity:.6}
 .sm-seg__opt:disabled{cursor:default}
 .sm-seg__opt{
-  flex:1;padding:3px 10px;border:0;border-radius:var(--radius-sm);background:transparent;
-  color:var(--text-muted);font:inherit;cursor:pointer;white-space:nowrap;
+  flex:1;padding:var(--seg-pad-y) 10px;border:0;border-radius:var(--radius-btn);background:transparent;
+  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)}
+/* 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)}
 .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);
 }
 .sm-banner{
-  display:flex;gap:14px;align-items:flex-start;padding:10px 14px;border-radius:var(--radius-md);
+  display:flex;gap:14px;align-items:flex-start;padding:12px 16px;border-radius:var(--radius-md);
   font-size:var(--text-md);
 }
 .sm-banner--error{background:var(--danger-soft);color:var(--danger)}
 .sm-banner--ok{background:var(--status-published-bg);color:var(--status-published-fg)}
 .sm-banner--warn{background:var(--warn-soft);color:var(--warn)}
 
+/* ── cards ─────────────────────────────────────────────────────────── */
+/* The inspector column (editor, entry and shared forms) is a stack of
+   cards; the technical look draws them flush with a hairline between. */
+.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);
+}
+.sm-card{
+  display:flex;flex-direction:column;gap:12px;padding:var(--card-pad);flex:none;
+  background:var(--surface);border-radius:var(--radius-card);
+}
+.sm-card+.sm-card{border-top:var(--card-divider)}
+/* A card's first section label is its title. */
+.sm-card>.sm-sectionlabel:first-child>.sm-label,.sm-card>.sm-inspector__head>.sm-label{
+  font-size:var(--card-title-size);font-weight:600;color:var(--card-title-color);
+}
+.sm-inspector__head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none}
+.sm-inspector__body{display:flex;flex-direction:column;gap:14px}
+/* The form card: the main column of the entry and shared forms. Every
+   field (and the banner) is a centred 680px column — a reading width —
+   while the card itself still fills the main area. */
+.sm-form{
+  display:flex;flex-direction:column;gap:18px;padding:var(--form-pad);min-width:0;overflow:auto;
+  background:var(--surface-form);border-radius:var(--radius-card-lg);
+}
+.sm-form>*{width:100%;max-width:680px;align-self:center}
+
 /* ── editor ────────────────────────────────────────────────────────── */
-.sm-editor{flex:1;min-height:0;display:grid;grid-template-columns:1fr var(--inspector-w)}
-.sm-canvas{display:flex;flex-direction:column;background:var(--bg);min-width:0;min-height:0;overflow:hidden}
-.sm-canvas__meta{
-  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;flex:none;
-  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;color:var(--text-muted);
-}
-.sm-canvas__scroll{flex:1;min-height:0;overflow:auto;padding:0 20px 20px}
+/* 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
+   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%)}
+/* 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);
+   keyboard focus alone gets the accent, a focus ring must be seen. */
+.sm-resize{position:relative;cursor:col-resize;touch-action:none;outline:none;align-self:stretch}
+.sm-resize::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;border-radius:1px;background:transparent;transition:background .12s}
+.sm-resize:hover::after,.sm-admin--resizing .sm-resize::after{background:var(--line-dashed)}
+.sm-resize:focus-visible::after{background:var(--accent)}
+/* While a drag is live: the resize cursor everywhere, no text selection, and
+   the canvas iframe must not swallow the pointer when it crosses it. */
+.sm-admin--resizing,.sm-admin--resizing *{cursor:col-resize!important;user-select:none}
+.sm-admin--resizing iframe{pointer-events:none}
+.sm-canvas{
+  display:flex;flex-direction:column;background:var(--canvas);border-radius:var(--radius-card-lg);
+  min-width:0;min-height:0;overflow:hidden;
+}
+.sm-canvas__scroll{flex:1;min-height:0;overflow:auto;padding:var(--canvas-pad)}
 .sm-page{
-  position:relative;background:var(--page-bg);border-radius:var(--radius-md);
+  position:relative;background:var(--page-bg);border-radius:var(--page-radius);
   box-shadow:var(--shadow-page);min-height:100%;
 }
-.sm-inspector{
-  display:flex;flex-direction:column;min-height:0;overflow:hidden;
-  border-left:var(--border);background:var(--surface);
+.sm-canvas__loading{
+  height:240px;display:grid;place-items:center;color:var(--text-subtle);font-family:var(--meta-font);
+  font-size:var(--meta-size);letter-spacing:var(--caps-tracking);text-transform:var(--caps-transform);
 }
-.sm-inspector__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px 10px;flex:none}
-.sm-inspector__body{display:flex;flex-direction:column;gap:14px;padding:14px;overflow:auto}
 .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. */
 .sm-blocktag{
-  position:absolute;top:0;left:0;background:var(--selection);color:#fff;
-  font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;
-  letter-spacing:var(--tracking-tag);text-transform:uppercase;padding:3px 7px;
-  border-radius:var(--radius-sm) 0 var(--radius-sm) 0;white-space:nowrap;
+  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;
+  letter-spacing:var(--blocktag-tracking);text-transform:var(--blocktag-transform);padding:3px 10px;
+  border-radius:var(--blocktag-radius);white-space:nowrap;
 }
 .sm-blocktoolbar{
-  display:flex;gap:2px;padding:2px;background:#15181F;border-radius:var(--radius-md);
+  display:flex;gap:2px;padding:3px;background:var(--toolbar-bg);border-radius:var(--radius-btn);
   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 blocks: a labelled pill (the label is
+   hidden in the technical look, leaving the 24px circle). */
 .sm-plus{
-  width:24px;height:24px;border-radius:var(--radius-round);border:0;background:var(--selection);
-  color:#fff;display:grid;place-items:center;font-size:15px;line-height:1;cursor:pointer;
-  box-shadow:0 2px 6px rgba(0,56,177,.35);padding:0;
-}
-.sm-plus:hover{background:var(--brand-500)}
+  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);
+  font:500 var(--text-lg)/1 var(--font-sans);cursor:pointer;box-shadow:var(--plus-shadow);white-space:nowrap;
+  transition:background .12s,transform .12s;
+}
+/* Hover is a tiny scale-up, nothing that moves the pill (the tooltip that
+   used to appear under it grew the wrapper and shifted it, 2026-09-10). */
+.sm-plus:hover{background:var(--plus-hover);transform:scale(1.05)}
+.sm-plus__icon{
+  width:20px;height:20px;flex:none;border-radius:50%;background:var(--plus-icon-bg);color:var(--plus-icon-fg);
+  display:grid;place-items:center;font-size:15px;line-height:1;
+}
+.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)}
-.sm-tooltip{
-  background:#15181F;color:#EEF0F5;font-size:var(--text-sm);padding:4px 8px;
-  border-radius:var(--radius-sm);white-space:nowrap;
-}
 .sm-outline-row{
   display:flex;align-items:center;justify-content:space-between;gap:4px;
-  height:var(--control-h);border-radius:var(--radius-md);padding:0 4px 0 10px;
+  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);
 }
 .sm-outline-row--clickable{cursor:pointer}
 .sm-outline-row--clickable:hover{background:var(--surface-inset)}
 /* Selected and locked rows are read by their fill, so they drop the hairline —
-   border-color, not border, so every row keeps the same 28px box. */
+   border-color, not border, so every row keeps the same box. */
 .sm-outline-row--selected,.sm-outline-row--selected:hover{
   background:var(--nav-active-bg);color:var(--nav-active-fg);font-weight:600;border-color:transparent;
 }
-.sm-outline-row--empty{border:1px dashed var(--line-dashed);color:var(--text-muted);padding:0 10px}
-.sm-outline-row--locked{background:var(--surface-inset);color:var(--text-muted);padding:0 10px;border-color:transparent}
+.sm-outline-row--empty{border:1px dashed var(--line-dashed);color:var(--text-muted);padding:0 12px}
+.sm-outline-row--locked{background:var(--surface-inset);color:var(--text-muted);padding:0 12px;border-color:transparent}
 .sm-outline-row__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+.sm-outline-row__note{font-size:var(--text-sm);font-weight:500;flex:none;letter-spacing:var(--caps-tracking);text-transform:var(--caps-transform)}
+.sm-outline-row__add{color:var(--accent);font-weight:500;flex:none}
+/* A row with a grip: the grip takes the left padding's place and the label follows it. */
+.sm-outline-row--grip{padding-left:2px}
+.sm-outline-row--grip .sm-outline-row__label{flex:1}
 
 .sm-picker{
-  width:300px;background:var(--surface);border:var(--border);border-radius:var(--radius-md);
+  width:300px;background:var(--surface);border:var(--menu-border);border-radius:var(--radius-md);
   padding:6px;box-shadow:var(--shadow-pop);
 }
 .sm-picker__item{
   display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:transparent;
-  border:0;border-radius:var(--radius-md);padding:8px 8px;cursor:pointer;color:var(--text);font:inherit;
+  border:0;border-radius:var(--radius-sm);padding:8px 10px;cursor:pointer;color:var(--text);font:inherit;
 }
 .sm-picker__item:hover{background:var(--nav-active-bg)}
 .sm-picker__icon{
@@ -448,26 +775,27 @@ body:has(.sm-admin){margin:0}
   color:var(--accent);display:grid;place-items:center;font-size:13px;
 }
 .sm-dashed{
-  border:1px dashed var(--line-dashed);border-radius:var(--radius-md);
-  display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);
+  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);
+  font-family:var(--meta-font);font-size:var(--text-sm);letter-spacing:var(--caps-tracking);text-transform:var(--caps-transform);
 }
 
 /* ── media ─────────────────────────────────────────────────────────── */
 .sm-modal{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:24px}
 .sm-modal__panel{
   max-width:100%;max-height:100%;display:flex;flex-direction:column;background:var(--surface);
-  border:var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);overflow:hidden;
+  border:var(--menu-border);border-radius:var(--radius-card);box-shadow:var(--shadow-pop);overflow:hidden;
 }
-.sm-modal__head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:var(--border)}
-.sm-modal__body{padding:12px;overflow:auto;display:flex;flex-direction:column;gap:10px;min-height:0}
-.sm-modal__foot{display:flex;justify-content:flex-end;gap:8px;padding:10px 12px;border-top:var(--border)}
+.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}
+.sm-modal__foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px 14px;border-top:var(--card-divider)}
 .sm-picker-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
 .sm-dropzone{
-  border:1px dashed var(--line-dashed);border-radius:var(--radius-md);color:var(--text-muted);
-  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;
+  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:8px;font-size:var(--text-sm)}
-.sm-mediagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
+.sm-dropzone--bar{padding: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;
   border-radius:var(--radius-md);cursor:pointer;text-align:left;color:var(--text);font:inherit;min-width:0;
@@ -480,11 +808,19 @@ 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}
-.sm-media__thumb{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-inset)}
+/* 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). */
+.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);
+}
+.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}
 .sm-media__alt{font-size:var(--text-sm);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sm-media>.sm-media__alt{text-align:center}
 .sm-media__actions{display:flex;gap:6px}
-.sm-media__chip{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--surface-inset);border-radius:var(--radius-md)}
+.sm-media__chip{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--surface-inset);border-radius:var(--radius-btn)}
 .sm-crop{display:grid;grid-template-columns:1fr 240px;gap:14px;min-height:0}
 .sm-crop__stage{position:relative;user-select:none;touch-action:none;background:var(--surface-inset);border-radius:var(--radius-md);overflow:hidden}
 .sm-crop__stage>img{display:block;width:100%;height:auto;pointer-events:none}
@@ -493,25 +829,36 @@ body:has(.sm-admin){margin:0}
 .sm-crop__handle{position:absolute;width:12px;height:12px;background:#fff;border:1px solid rgba(0,0,0,.4);border-radius:2px}
 .sm-crop__handle--nw{left:-6px;top:-6px;cursor:nwse-resize}.sm-crop__handle--ne{right:-6px;top:-6px;cursor:nesw-resize}
 .sm-crop__handle--sw{left:-6px;bottom:-6px;cursor:nesw-resize}.sm-crop__handle--se{right:-6px;bottom:-6px;cursor:nwse-resize}
-.sm-crop__hotspot{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid #fff;background:rgba(0,56,177,.55);cursor:grab;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
+.sm-crop__hotspot{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:2px solid #fff;background:color-mix(in srgb,var(--accent) 55%,transparent);cursor:grab;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
 .sm-crop__side{display:flex;flex-direction:column;gap:10px}
 .sm-crop__preview{position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-inset)}
 .sm-crop__preview>img{position:absolute;max-width:none;display:block}
-.sm-mediascreen{display:grid;grid-template-columns:1fr 300px;flex:1;min-height:0}
-.sm-mediascreen__grid{padding:12px;overflow:auto}
-.sm-mediascreen__inspector{border-left:var(--border);padding:14px;overflow:auto;display:flex;flex-direction:column;gap:10px}
+.sm-mediascreen{display:grid;grid-template-columns:1fr 300px;column-gap:var(--gutter);flex:1;min-height:0}
+.sm-mediascreen__grid{padding:var(--table-pad);overflow:auto;background:var(--surface-form);border-radius:var(--radius-card-lg)}
+.sm-mediascreen__inspector{
+  border-left:var(--bar-border);padding:var(--card-pad);overflow:auto;display:flex;flex-direction:column;gap:10px;
+  background:var(--surface);border-radius:var(--radius-card);
+}
 .sm-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:var(--text-sm);color:var(--text-muted)}
 .sm-usage{display:flex;flex-direction:column;gap:4px}
 `;
 /** 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. */
+export const LOOK_KEY = "smoodly-look";
 /** Applies a remembered choice before first paint, so a dark-mode editor never
- *  gets a white flash. It runs INSIDE the admin wrapper, so
- *  `currentScript.parentElement` is that element — no id lookup, and the host
- *  document's <html> is left alone. */
+ *  gets a white flash, and the inspector never jumps to a dragged width. It
+ *  runs INSIDE the admin wrapper, so `currentScript.parentElement` is that
+ *  element — no id lookup, and the host document's <html> is left alone. The
+ *  width test repeats parseStoredWidth (ui/resize.ts) inline: an integer
+ *  string at or above the minimum, else ignored. */
 const THEME_BOOT = `(function(){try{var e=document.currentScript.parentElement,` +
-    `t=localStorage.getItem(${JSON.stringify(THEME_KEY)});` +
-    `if(t==="dark"||t==="light")e.setAttribute("data-theme",t)}catch(e){}})()`;
+    `t=localStorage.getItem(${JSON.stringify(THEME_KEY)}),` +
+    `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(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() {
     return (_jsxs(_Fragment, { children: [_jsx("style", { "data-smoodly-admin-styles": true, dangerouslySetInnerHTML: { __html: ADMIN_CSS } }), _jsx("script", { dangerouslySetInnerHTML: { __html: THEME_BOOT } })] }));