/* ============================================================================
   Websonance · ws.css — the design system, in the product.
   ----------------------------------------------------------------------------
   Frozen from the settled combined direction (Docs/design/round6-2026-09-18/
   combined2/src/): 20-tokens.css · 30-components.css · 40-shell.css ·
   79-mobile.css. The contrast table in Docs/design/BRIEF-COMBINED.md §1 is law;
   /system measures every ratio on this page live.

   Include (in this order):
     <link rel="stylesheet" href="/shared/lens.css">   the Lens logo + Figtree
     <link rel="stylesheet" href="/shared/ws.css">
     <script src="/shared/ws.js"></script>
   Inter comes from the Google Fonts link each page already carries. There is no
   monospace anywhere: code is Inter with tabular figures (.code).

   Sections: 1 tokens · 2 base + type · 3 components · 4 shell · 5 responsive.
   How to use it from a page: Docs/DESIGN_SYSTEM.md
   ========================================================================= */

/* ==========================================================================
   1 · TOKENS — exact values from BRIEF-COMBINED §1
   ========================================================================== */
:root{
  color-scheme:dark;

  /* ---- ground & surfaces (solid tones; no alpha lines) */
  --bg:#0A0B10;            /* page ground */
  --surface:#12141B;       /* panels, bars, rows */
  --surface-2:#191C25;     /* raised: menus, inputs, cards */
  --surface-3:#21252F;     /* hover / selected */
  --line:#2C303C;          /* 1px separators */
  --line-strong:#3A3F4D;   /* input borders, focusable outlines */
  --line-hover:#4A4F5E;    /* a boundary under the pointer */

  /* ---- text (never put --text-4 on anything meant to be read) */
  --text:#F1F2F7;          /* 17.6 on bg · 13.7 on surface-3 */
  --text-2:#C5C9D7;        /* 11.9 / 9.3 */
  --text-3:#A0A5B9;        /*  8.0 / 6.3 */
  --text-4:#7F849A;        /*  5.3 / 5.0 — placeholders & disabled only */

  /* ---- accent: violet stays rare (selection, focus, Publish, the logo) */
  --violet:#A597F2;        /* 7.8 on bg */
  --violet-soft:#C9C0FA;
  --violet-deep:#7A6BDB;   /* graphics & large text on light grounds only */
  --violet-hover:#B4A8F5;
  --violet-press:#9588EC;
  --on-violet:#14112B;     /* 7.3 on violet */
  --violet-a10:rgba(165,151,242,.10);
  --violet-a16:rgba(165,151,242,.16);
  --violet-a28:rgba(165,151,242,.28);

  /* ---- signals (always dot + word, never color alone) */
  --live:#6FD3B0;          /* 10.9 */
  --live-a14:rgba(111,211,176,.14);
  --pending:#E6D38F;       /* 13.2 — unpublished changes (soft banana) */
  --pending-a14:rgba(230,211,143,.14);
  --danger:#E57A83;        /* 7.0 — destructive text & icons */
  --danger-fill:#B8424E;   /* destructive fill · white text 5.3 */
  --danger-fill-hover:#C24C58;
  --danger-fill-press:#A83B46;
  --danger-a12:rgba(229,122,131,.12);
  --danger-line:#6E3A42;

  /* ---- brand fixed (logo kit) */
  --abyss:#090A0F;         /* deepest wells, stage floor, code */
  --frost:#ECEEF6;         /* primary neutral button */
  --frost-hover:#FFFFFF;
  --frost-press:#D9DCE7;
  --on-frost:#0A0B10;
  --ink:#1D2130; --porcelain:#EDEFF5;

  /* ---- feature tones. Frames + every builder = violet. The other two are
          RESERVED: they appear on /system only, never in product UI */
  --tone-frames:#A597F2; --tone-frames-soft:#C9C0FA; --tone-frames-deep:#7A6BDB;
  --tone-landings:#EB8190; --tone-landings-soft:#F9B4BB; --tone-landings-deep:#D14763;
  --tone-transpose:#72C6E6; --tone-transpose-soft:#AADBF0; --tone-transpose-deep:#008DB6;

  /* ---- focus */
  --focus:var(--violet);
  --focus-ring:0 0 0 2px var(--bg),0 0 0 4px var(--violet);

  /* ---- type: Figtree for display & labels, Inter for everything you read and type */
  --font-d:"Figtree WS",Inter,ui-sans-serif,system-ui,sans-serif;
  --font-u:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* scale: size / line-height / weight / tracking */
  --t-display:600 64px/1.02 var(--font-d);   --tr-display:-.034em;
  --t-h1:600 40px/1.08 var(--font-d);        --tr-h1:-.028em;
  --t-h2:600 28px/1.18 var(--font-d);        --tr-h2:-.02em;
  --t-h3:600 20px/1.3 var(--font-d);         --tr-h3:-.012em;
  --t-h4:600 16px/1.35 var(--font-d);        --tr-h4:-.004em;
  --t-label:600 13px/1.3 var(--font-d);      --tr-label:.005em;
  --t-lead:400 18px/1.6 var(--font-u);
  --t-read:400 16px/1.6 var(--font-u);       /* reading text */
  --t-ui:400 14px/1.5 var(--font-u);         /* UI body */
  --t-ui-strong:500 14px/1.45 var(--font-u);
  --t-meta:400 13px/1.45 var(--font-u);      /* the floor: nothing smaller */

  /* ---- space (4px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;

  /* ---- radii */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-2xl:28px; --r-pill:999px;

  /* ---- elevation (solid surfaces: a line + a shadow, no glow) */
  --e-0:none;
  --e-1:0 1px 0 rgba(0,0,0,.35);
  --e-2:0 1px 2px rgba(0,0,0,.40),0 10px 28px -14px rgba(0,0,0,.70);
  --e-3:0 2px 6px rgba(0,0,0,.45),0 28px 64px -22px rgba(0,0,0,.85);

  /* ---- glass: ONLY the logo (its own recipe in lens.css), the app switcher,
          the ⌘K palette and dialogs. The tint is dark enough that --text-3
          still holds ≥ 7:1 through it */
  --glass-tint:rgba(14,15,22,.84);
  --glass-sheen:linear-gradient(155deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.02) 38%,rgba(255,255,255,0) 64%,rgba(255,255,255,.035) 100%);
  --glass-filter:blur(28px) saturate(145%);
  --glass-rim:inset 0 0 0 1px rgba(214,218,240,.13),inset 0 1px 0 rgba(255,255,255,.10);
  --glass-shadow:0 2px 8px rgba(0,0,0,.45),0 36px 80px -24px rgba(0,0,0,.9);

  /* ---- motion */
  --ease:cubic-bezier(.2,.8,.25,1);       /* UI default */
  --ease-out:cubic-bezier(.16,1,.3,1);    /* things arriving */
  --ease-io:cubic-bezier(.45,0,.2,1);     /* things moving across */
  --ease-ring:cubic-bezier(.15,.55,.3,1); /* Ring-out, the publish ring */
  --d-1:120ms;  /* hover, press */
  --d-2:180ms;  /* menus, toggles */
  --d-3:260ms;  /* popovers, accordions */
  --d-4:420ms;  /* dialogs, page-level */
  --d-ring:1820ms;

  /* ---- layout. The product has no prototype bar, so --top is just the bar. */
  --bar-h:56px;
  --top:var(--bar-h);
  --app-h:100dvh;
  --gutter:24px;
}
@media (max-width:720px){:root{--gutter:16px}}

@media (prefers-reduced-motion:reduce){
  :root{--d-1:1ms;--d-2:1ms;--d-3:1ms;--d-4:1ms;--d-ring:1ms}
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:1ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   2 · BASE AND TYPE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:var(--t-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11","ss01";overflow-x:hidden;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote{margin:0}
ul[role],ol[role]{padding:0;list-style:none}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
a{color:inherit}
img,svg{display:block}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
svg.i-sm{width:16px;height:16px}
svg.i-xs{width:14px;height:14px;stroke-width:2}
svg.i-lg{width:22px;height:22px;stroke-width:1.6}
/* the builder icons (WS.appIcon): filled glyphs, sized by their wrapper */
.app-svg{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;line-height:0;color:inherit}
.app-svg svg{width:100%;height:100%;display:block;overflow:visible}
::selection{background:rgba(165,151,242,.38);color:#fff}
:focus{outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.sr-focus:focus-visible{position:fixed!important;left:12px;top:8px;z-index:3000;width:auto;height:auto;clip:auto;clip-path:none;margin:0;padding:10px 14px;border-radius:10px;background:var(--frost);color:var(--on-frost);font:600 14px/1 var(--font-u);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ---------------------------------------------------------------- type classes */
.t-display{font:var(--t-display);letter-spacing:var(--tr-display)}
.t-h1{font:var(--t-h1);letter-spacing:var(--tr-h1)}
.t-h2{font:var(--t-h2);letter-spacing:var(--tr-h2)}
.t-h3{font:var(--t-h3);letter-spacing:var(--tr-h3)}
.t-h4{font:var(--t-h4);letter-spacing:var(--tr-h4)}
.t-label{font:var(--t-label);letter-spacing:var(--tr-label);color:var(--text-2)}
.t-eyebrow{font:600 13px/1.2 var(--font-d);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.t-lead{font:var(--t-lead);color:var(--text-2)}
.t-read{font:var(--t-read);color:var(--text-2)}
.t-ui{font:var(--t-ui)}
.t-meta{font:var(--t-meta);color:var(--text-3)}
.c-1{color:var(--text)} .c-2{color:var(--text-2)} .c-3{color:var(--text-3)}
@media (max-width:720px){
  :root{--t-display:600 42px/1.04 var(--font-d);--t-h1:600 32px/1.1 var(--font-d);--t-h2:600 24px/1.2 var(--font-d)}
}

/* ==========================================================================
   3 · COMPONENTS
   Every interactive control has a visible boundary or fill at rest. The state
   classes .is-hover/.is-active/.is-focus mirror the real pseudo-classes so
   /system can show every state side by side.
   ========================================================================== */

/* ---------------------------------------------------------------- buttons */
.btn{--btn-h:36px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--btn-h);padding:0 14px;border:0;border-radius:var(--r-md);background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong);font:500 14px/1 var(--font-u);letter-spacing:-.003em;white-space:nowrap;text-decoration:none;user-select:none;-webkit-user-select:none;transition:background-color var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease),color var(--d-1) var(--ease),transform var(--d-1) var(--ease)}
.btn svg.i{width:16px;height:16px}
.btn:focus-visible,.btn.is-focus{outline:2px solid var(--focus);outline-offset:2px}
.btn:active:not(:disabled),.btn.is-active{transform:translateY(.5px)}
.btn-sm{--btn-h:30px;padding:0 10px;gap:6px;font-size:13px;border-radius:var(--r-sm)}
.btn-sm svg.i{width:15px;height:15px}
.btn-lg{--btn-h:44px;padding:0 18px;font-size:15px;border-radius:12px}
.btn-icon{padding:0;width:var(--btn-h)}
.btn-block{width:100%}

/* secondary — the default */
.btn-secondary{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn-secondary:hover,.btn-secondary.is-hover{background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line-hover)}
.btn-secondary:active:not(:disabled),.btn-secondary.is-active{background:#1C1F28;box-shadow:inset 0 0 0 1px var(--line-strong)}
/* primary — Frost, the neutral call to action */
.btn-primary{background:var(--frost);color:var(--on-frost);box-shadow:inset 0 -1px 0 rgba(0,0,0,.12),0 1px 0 rgba(0,0,0,.4)}
.btn-primary:hover,.btn-primary.is-hover{background:var(--frost-hover)}
.btn-primary:active:not(:disabled),.btn-primary.is-active{background:var(--frost-press)}
/* publish — violet, the one that makes things live */
.btn-publish{background:var(--violet);color:var(--on-violet);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 0 rgba(0,0,0,.4)}
.btn-publish:hover,.btn-publish.is-hover{background:var(--violet-hover)}
.btn-publish:active:not(:disabled),.btn-publish.is-active{background:var(--violet-press)}
/* quiet — transparent with a hairline boundary */
.btn-quiet{background:transparent;color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line)}
.btn-quiet:hover,.btn-quiet.is-hover{background:var(--surface-3);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn-quiet:active:not(:disabled),.btn-quiet.is-active{background:var(--surface-2)}
/* danger — the fill appears only on a final confirm */
.btn-danger{background:var(--danger-fill);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 0 rgba(0,0,0,.4)}
.btn-danger:hover,.btn-danger.is-hover{background:var(--danger-fill-hover)}
.btn-danger:active:not(:disabled),.btn-danger.is-active{background:var(--danger-fill-press)}
/* danger-quiet — "Delete" before the confirm */
.btn-danger-quiet{background:transparent;color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger-line)}
.btn-danger-quiet:hover,.btn-danger-quiet.is-hover{background:var(--danger-a12);box-shadow:inset 0 0 0 1px #8A4A53}
/* text button — an underline is its boundary */
.btn-text{--btn-h:auto;height:auto;padding:2px 0;background:none;box-shadow:none;border-radius:4px;color:var(--text-2);text-decoration:underline;text-decoration-color:var(--line-hover);text-underline-offset:4px;text-decoration-thickness:1px}
.btn-text:hover,.btn-text.is-hover{color:var(--text);text-decoration-color:var(--text-3)}
.btn-text.is-danger{color:var(--danger);text-decoration-color:var(--danger-line)}
/* disabled — one look for every variant */
.btn:disabled,.btn[aria-disabled=true]{background:var(--surface);color:var(--text-4);box-shadow:inset 0 0 0 1px var(--line);cursor:not-allowed;transform:none}
.btn-text:disabled{background:none;box-shadow:none}
/* busy — keeps its width, shows the word */
.btn[aria-busy=true]{cursor:progress}
.btn.is-copied{color:var(--live)}
.btn.is-copied svg.i{color:var(--live)}

/* ---------------------------------------------------------------- fields */
.field{display:grid;gap:7px;align-content:start;min-width:0}
.label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:500 13px/1.3 var(--font-u);color:var(--text-2)}
.label .opt{font-weight:400;color:var(--text-3)}
.help{display:flex;align-items:flex-start;gap:6px;font:var(--t-meta);color:var(--text-3)}
.help svg.i{width:15px;height:15px;margin-top:1px}
.help.is-error{color:var(--danger)}
.help.is-ok{color:var(--live)}

.input,.textarea,.select{width:100%;min-width:0;height:38px;padding:0 12px;border:0;border-radius:var(--r-md);background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong);font:400 14px/1.4 var(--font-u);transition:box-shadow var(--d-1) var(--ease),background-color var(--d-1) var(--ease)}
.textarea{height:auto;min-height:96px;padding:10px 12px;line-height:1.55;resize:vertical;display:block}
.input::placeholder,.textarea::placeholder{color:var(--text-4);opacity:1}
.input:hover,.textarea:hover,.select:hover,.input.is-hover{box-shadow:inset 0 0 0 1px var(--line-hover)}
.input:focus,.textarea:focus,.select:focus,.input.is-focus{outline:none;box-shadow:inset 0 0 0 1px var(--violet),0 0 0 3px var(--violet-a28)}
.input[aria-invalid=true],.textarea[aria-invalid=true],.input.is-error{box-shadow:inset 0 0 0 1px var(--danger),0 0 0 3px var(--danger-a12)}
.input:disabled,.textarea:disabled,.select:disabled{background:var(--surface);color:var(--text-4);box-shadow:inset 0 0 0 1px var(--line);cursor:not-allowed}
.input[readonly]{background:var(--surface);color:var(--text-2)}
.select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A0A5B9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
.select option{background:var(--surface-2);color:var(--text)}
.input-group{display:flex;gap:8px;align-items:center}
.input-group>.input{flex:1}

/* ---------------------------------------------------------------- toggle (switch) */
.switch{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:38px;height:22px;margin:0;border-radius:var(--r-pill);background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line-hover);cursor:pointer;transition:background-color var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--text-3);transition:transform var(--d-2) var(--ease-out),background-color var(--d-2) var(--ease)}
.switch:hover,.switch.is-hover{box-shadow:inset 0 0 0 1px #5B6172}
.switch:hover::after,.switch.is-hover::after{background:var(--text-2)}
.switch:checked{background:var(--violet);box-shadow:none}
.switch:checked::after{transform:translateX(16px);background:var(--on-violet)}
.switch:checked:hover,.switch:checked.is-hover{background:var(--violet-hover)}
.switch:focus-visible,.switch.is-focus{outline:2px solid var(--focus);outline-offset:2px}
.switch:disabled{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);cursor:not-allowed}
.switch:disabled::after{background:var(--line-hover)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;cursor:pointer}
.toggle-row+.toggle-row{border-top:1px solid var(--line)}
.toggle-row .tr-text{display:grid;gap:2px;min-width:0}
.toggle-row .tr-label{font:500 14px/1.35 var(--font-u);color:var(--text)}
.toggle-row .tr-hint{font:var(--t-meta);color:var(--text-3)}
.toggle-row.is-disabled{cursor:not-allowed}
.toggle-row.is-disabled .tr-label{color:var(--text-4)}

/* ---------------------------------------------------------------- checkbox & radio */
.check{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:0;border-radius:5px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-hover);display:inline-grid;place-items:center;cursor:pointer;transition:background-color var(--d-1),box-shadow var(--d-1)}
.check[type=radio]{border-radius:50%}
.check::after{content:"";width:10px;height:10px;opacity:0;background:var(--on-violet);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%)}
.check[type=radio]::after{width:8px;height:8px;border-radius:50%;clip-path:none}
.check:checked{background:var(--violet);box-shadow:none}
.check:checked::after{opacity:1}
.check:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------------------------------------------------------------- segmented control */
.seg{justify-self:start;display:inline-flex;align-items:stretch;gap:2px;padding:3px;border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-strong);max-width:100%}
.seg-opt{position:relative;display:flex;flex:1 1 auto;min-width:0}
.seg-opt input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.seg-opt span{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:30px;padding:0 12px;border-radius:9px;font:500 13px/1 var(--font-u);color:var(--text-2);white-space:nowrap;transition:background-color var(--d-1),color var(--d-1),box-shadow var(--d-1)}
.seg-opt span svg.i{width:15px;height:15px}
.seg-opt:hover span,.seg-opt.is-hover span{color:var(--text);background:var(--surface-2)}
.seg-opt input:checked+span{color:var(--text);background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line-hover),0 1px 2px rgba(0,0,0,.35)}
.seg-opt input:focus-visible+span,.seg-opt.is-focus span{outline:2px solid var(--focus);outline-offset:1px}
.seg-opt input:disabled+span{color:var(--text-4);cursor:not-allowed}
.seg-sm .seg-opt span{height:26px;padding:0 10px}
.seg-block{display:flex;width:100%;justify-self:stretch}

/* ---------------------------------------------------------------- tabs */
.tabs{display:flex;gap:4px;box-shadow:inset 0 -1px 0 var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;flex:none;height:40px;padding:0 12px;border:0;background:none;color:var(--text-2);font:500 14px/1 var(--font-u);border-radius:8px 8px 0 0;white-space:nowrap;transition:color var(--d-1),box-shadow var(--d-1)}
.tab:hover,.tab.is-hover{color:var(--text);box-shadow:inset 0 -2px 0 var(--line-hover)}
.tab[aria-selected=true]{color:var(--text);box-shadow:inset 0 -2px 0 var(--violet)}
.tab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* ---------------------------------------------------------------- chips */
.chip{display:inline-flex;align-items:center;gap:4px;height:30px;max-width:100%;padding:0 4px 0 11px;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong);font:500 13px/1 var(--font-u);color:var(--text)}
.chip>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-x{display:grid;place-items:center;flex:none;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text-3);transition:background-color var(--d-1),color var(--d-1)}
.chip-x:hover{background:var(--surface-3);color:var(--text)}
.chip-x:focus-visible{outline:2px solid var(--focus);outline-offset:0}
.chip-x svg.i{width:13px;height:13px;stroke-width:2.2}
.chip.is-static{padding:0 11px}
.chip.is-new{animation:chip-in var(--d-3) var(--ease-out) both}
@keyframes chip-in{from{opacity:0;transform:scale(.92)}}
.ce{display:grid;gap:10px}
.ce-list{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ce-any{display:flex;align-items:center;gap:8px;min-height:30px;margin:0;font:var(--t-ui);color:var(--text-2)}
.ce-any svg.i{color:var(--text-3);width:16px;height:16px}
.ce-add{display:flex;gap:8px}
.ce-add .input{flex:1}

/* ---------------------------------------------------------------- status (dot + word, never color alone) */
.status{display:inline-flex;align-items:center;gap:8px;font:500 13px/1.2 var(--font-u);color:var(--text-2);white-space:nowrap}
.status .sep{color:var(--text-3);font-weight:400}
.status .chg{display:inline-flex;align-items:center;gap:7px;color:var(--text-2)}
.status .chg-s{display:none}
.dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--text-3)}
.dot.live{background:var(--live);box-shadow:0 0 0 3px var(--live-a14)}
.dot.off{background:transparent;box-shadow:inset 0 0 0 2px var(--text-3)}
.dot.draft{background:transparent;box-shadow:inset 0 0 0 1.5px var(--text-3);border-radius:2px;transform:rotate(45deg) scale(.85)}
.dot.pending{background:var(--pending);box-shadow:0 0 0 3px var(--pending-a14)}
.dot.saving{background:var(--violet);box-shadow:0 0 0 3px var(--violet-a16)}
.dot.danger{background:var(--danger)}
@media (prefers-reduced-motion:no-preference){.dot.saving{animation:dot-pulse 1.2s var(--ease-io) infinite}}
@keyframes dot-pulse{50%{box-shadow:0 0 0 5px rgba(165,151,242,.05)}}
.pill{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 11px 0 10px;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);font:500 13px/1 var(--font-u);color:var(--text-2);white-space:nowrap}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line-strong);font:500 13px/1 var(--font-u);color:var(--text-3);white-space:nowrap}
.count{font-variant-numeric:tabular-nums;color:var(--text-3)}

/* ---------------------------------------------------------------- keycaps (Figtree, no mono) */
.kbd{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:22px;height:22px;padding:0 6px;border-radius:6px;background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line-strong),inset 0 -1px 0 var(--line-strong);font:600 13px/1 var(--font-d);color:var(--text-2);letter-spacing:0;white-space:nowrap}
.kbds{display:inline-flex;gap:3px;align-items:center}

/* ---------------------------------------------------------------- avatar */
.avatar{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:linear-gradient(150deg,#D5CEFA,#9C8FE8);color:var(--on-violet);font:650 13px/1 var(--font-d);letter-spacing:.02em}
.avatar.lg{width:44px;height:44px;font-size:16px}

/* ---------------------------------------------------------------- code block (Inter, tabular — no monospace anywhere) */
.code{position:relative;margin:0;padding:14px 16px;border-radius:12px;background:var(--abyss);box-shadow:inset 0 0 0 1px var(--line);font:450 13.5px/1.7 var(--font-u);font-variant-numeric:tabular-nums;letter-spacing:.004em;color:var(--text-2);white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}
.code .tk-t{color:#B9C9F2}
.code .tk-a{color:#CFC7FA}
.code .tk-s{color:#9FDCC6}
.code .tk-p{color:var(--text-3)}
.codeblock{display:grid;gap:10px}
.codeblock-head{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* ---------------------------------------------------------------- menu */
.menu{position:fixed;z-index:1400;min-width:220px;max-width:min(320px,calc(100vw - 24px));padding:6px;border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong),var(--e-3);transform-origin:var(--mo,top right)}
.menu.is-static{position:relative;z-index:auto}
@media (prefers-reduced-motion:no-preference){.menu.is-in{animation:menu-in var(--d-2) var(--ease-out) both}}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.menu-head{display:grid;gap:2px;padding:10px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.menu-head b{font:600 14px/1.3 var(--font-u);color:var(--text)}
.menu-head span{font:var(--t-meta);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-label{padding:8px 10px 4px;font:var(--t-label);color:var(--text-3)}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--text-2);font:400 14px/1.3 var(--font-u);text-align:left;text-decoration:none}
.menu-item svg.i{width:16px;height:16px;color:var(--text-3)}
.menu-item .mi-label{flex:1;min-width:0}
.menu-item .mi-hint{font:var(--t-meta);color:var(--text-3)}
.menu-item:hover,.menu-item:focus-visible,.menu-item.is-hover{background:var(--surface-3);color:var(--text);outline:none}
.menu-item:hover svg.i,.menu-item:focus-visible svg.i{color:var(--text-2)}
.menu-item.is-danger,.menu-item.is-danger svg.i{color:var(--danger)}
.menu-item[aria-checked=true]::after{content:"";width:12px;height:12px;background:var(--violet);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%)}
.menu-item:disabled{color:var(--text-4);cursor:not-allowed;background:none}
.menu-item:disabled svg.i{color:var(--text-4)}
.menu-sep{height:1px;margin:5px 4px;background:var(--line);border:0}

/* ---------------------------------------------------------------- tooltip */
.tip{position:fixed;z-index:1500;max-width:260px;padding:6px 9px;border-radius:8px;background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--line-hover),var(--e-2);font:500 13px/1.35 var(--font-u);color:var(--text);pointer-events:none;display:flex;align-items:center;gap:8px}
.tip.is-static{position:relative;z-index:auto;display:inline-flex}
@media (prefers-reduced-motion:no-preference){.tip.is-in{animation:tip-in var(--d-2) var(--ease-out) both}}
@keyframes tip-in{from{opacity:0;transform:translateY(-2px)}}

/* ---------------------------------------------------------------- dialog (glass allowed) */
.glass{position:relative;background:var(--glass-sheen),var(--glass-tint);-webkit-backdrop-filter:var(--glass-filter);backdrop-filter:var(--glass-filter);box-shadow:var(--glass-rim),var(--glass-shadow)}
.dlg-scrim{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:24px 16px;overflow-y:auto;background:rgba(5,6,10,.64)}
/* fill-mode backwards only: a finished opacity animation must not keep the scrim a backdrop root (it would kill the glass blur) */
@media (prefers-reduced-motion:no-preference){
  .dlg-scrim.is-in{animation:scrim-in var(--d-3) var(--ease) backwards}
  .dlg-scrim.is-in .dlg{animation:dlg-in var(--d-4) var(--ease-out) backwards}
  .dlg-scrim.is-out{animation:scrim-out var(--d-2) var(--ease) forwards}
}
@keyframes scrim-in{from{opacity:0}}
@keyframes scrim-out{to{opacity:0}}
@keyframes dlg-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
.dlg{position:relative;width:min(520px,100%);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;border-radius:var(--r-xl);color:var(--text);outline:none}
.dlg:not(.glass){background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong),var(--e-3)}
.dlg.dlg-sm{width:min(420px,100%)}
.dlg.dlg-lg{width:min(680px,100%)}
.dlg.dlg-xl{width:min(880px,100%)}
.dlg-head{display:flex;align-items:flex-start;gap:14px;padding:22px 22px 0 24px}
.dlg-head-text{flex:1;min-width:0;display:grid;gap:6px;padding-top:4px}
.dlg-title{font:var(--t-h3);letter-spacing:var(--tr-h3);color:var(--text)}
.dlg-sub{font:var(--t-ui);color:var(--text-2)}
.dlg-x{margin:-2px -4px 0 0}
.dlg-body{padding:16px 24px 4px;overflow-y:auto;min-height:0;font:var(--t-ui);color:var(--text-2)}
.dlg-body>p{margin:0 0 12px}
.dlg-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:18px 24px 22px}
.dlg-actions .spacer{flex:1}
.dlg.is-static{width:100%;max-height:none}

/* ---------------------------------------------------------------- toast (solid, never glass) */
.toasts{position:fixed;left:50%;bottom:24px;z-index:1300;display:grid;gap:8px;justify-items:center;width:max-content;max-width:calc(100vw - 32px);transform:translateX(-50%);pointer-events:none}
.toast{display:flex;align-items:center;gap:12px;min-height:48px;max-width:100%;padding:7px 8px 7px 14px;border-radius:14px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong),var(--e-3);font:500 14px/1.4 var(--font-u);color:var(--text);pointer-events:auto}
.toast.is-static{pointer-events:auto}
.toast-ic{display:grid;place-items:center;flex:none;color:var(--text-2)}
.toast-ic svg.i{width:18px;height:18px}
.toast[data-kind=ok] .toast-ic{color:var(--live)}
.toast[data-kind=warn] .toast-ic{color:var(--pending)}
.toast[data-kind=error] .toast-ic{color:var(--danger)}
.toast[data-kind=publish] .toast-ic .ws-lens{font-size:22px}
.toast-msg{flex:1;min-width:0;padding:4px 0}
.toast-msg small{display:block;font:var(--t-meta);color:var(--text-3)}
.toast-acts{display:flex;align-items:center;gap:6px;flex:none}
@media (prefers-reduced-motion:no-preference){
  .toast.is-in{animation:toast-in var(--d-3) var(--ease-out) both}
  .toast.is-out{animation:toast-out var(--d-2) var(--ease) both}
}
@keyframes toast-in{from{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes toast-out{to{opacity:0;transform:translateY(4px)}}
@media (max-width:560px){.toasts{bottom:16px;width:calc(100vw - 24px)}.toast{width:100%}}

/* ---------------------------------------------------------------- theme picker (radios that look like swatches) */
.themes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0;min-width:0}
.theme-opt{position:relative;display:grid;gap:7px;cursor:pointer}
.theme-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.theme-sw{position:relative;display:grid;align-content:end;gap:4px;height:46px;padding:7px;border-radius:9px;background:var(--sw-bg);box-shadow:inset 0 0 0 1px var(--line-strong);overflow:hidden;transition:box-shadow var(--d-1)}
.theme-sw i{display:block;height:6px;border-radius:3px;background:var(--sw-surface)}
.theme-sw i:first-child{width:70%;background:var(--sw-text);opacity:.9}
.theme-sw b{position:absolute;right:7px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--sw-accent)}
.theme-name{font:500 13px/1.2 var(--font-u);color:var(--text-2);text-align:center;white-space:nowrap}
.theme-opt:hover .theme-sw{box-shadow:inset 0 0 0 1px var(--line-hover)}
.theme-opt input:checked~.theme-sw{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--violet)}
.theme-opt input:checked~.theme-name{color:var(--text)}
.theme-opt input:focus-visible~.theme-sw{outline:2px solid var(--focus);outline-offset:5px}

/* ---------------------------------------------------------------- misc */
.divider{height:1px;background:var(--line);border:0;margin:0}
.panel{background:var(--surface);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line)}
.well{background:var(--abyss);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line)}
.empty{display:grid;justify-items:center;gap:10px;padding:40px 24px;text-align:center;color:var(--text-2)}
.empty h3{font:var(--t-h3);letter-spacing:var(--tr-h3);color:var(--text)}
.spinner{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line-strong);border-top:2px solid var(--violet);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------ search mark
   What a search matched, inside a name. Violet wash, never a yellow box. */
mark.hl{background:var(--violet-a28);color:var(--text);border-radius:3px;padding:0 1px;margin:0 -1px}

/* ----------------------------------------------------------- frame preview
   WS.preview(): the frame's own template, rendered wide and scaled into a
   fixed box, under a labelled placeholder that shows until (or instead of)
   the real thing. Inert — it is a picture, not a control. */
.fp{--fp-s:1;container:fp/size;position:relative;display:block;width:100%;aspect-ratio:1/var(--fp-ar,.625);overflow:hidden;border-radius:8px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.4),0 8px 18px -12px rgba(0,0,0,.8);
  pointer-events:none;user-select:none;-webkit-user-select:none}
.fp-ph{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:6px;padding:6px;text-align:center;transition:opacity var(--d-2) var(--ease)}
.fp-ic{display:grid;place-items:center;width:22px;height:22px;color:var(--text-3);opacity:.9}
.fp-ic .app-svg{width:22px;height:22px}
/* the label is read, so it keeps the 13px floor — the icon steps aside when
   the box is too short for both */
.fp-note{max-width:100%;font:500 13px/1.25 var(--font-u);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@container fp (max-height:52px){.fp-ic{display:none}}
.fp-if{position:absolute;left:0;top:0;border:0;background:transparent;transform:scale(var(--fp-s));transform-origin:0 0;opacity:0;transition:opacity var(--d-3) var(--ease-out)}
.fp[data-state=ready] .fp-if{opacity:1}
.fp[data-state=ready] .fp-ph{opacity:0}
.fp[data-state=loading]{background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface-3) 50%,var(--surface-2) 70%) 0 0/300% 100%}
@media (prefers-reduced-motion:no-preference){.fp[data-state=loading]{animation:fp-shim 1.6s linear infinite}}
@keyframes fp-shim{to{background-position:-300% 0}}
.fp[data-state=blocked],.fp[data-state=blank],.fp[data-state=na]{background:var(--surface)}

/* ------------------------------------------------------- selection bar
   The bar that appears when rows are selected: solid, never glass, and it
   only offers what applies to the selection. */
.bulkbar{position:fixed;left:50%;bottom:24px;z-index:1200;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  max-width:calc(100vw - 32px);padding:7px 8px 7px 18px;border-radius:var(--r-lg);background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--line-strong),var(--e-3)}
.bulkbar[hidden]{display:none}
.bulk-n{font:var(--t-ui);color:var(--text-2);white-space:nowrap}
.bulk-n b{font-weight:600;color:var(--text)}
.bulk-x{color:var(--text-3)}
.bulk-rule{flex:none;width:1px;height:20px;background:var(--line-strong)}
.bulk-a{display:flex;align-items:center;gap:6px;min-width:0}
.bulk-a .btn{flex:none;white-space:nowrap}
.bulk-c{margin-left:2px;padding:1px 6px;border-radius:var(--r-pill);background:rgba(10,11,16,.28);font:600 12px/1.3 var(--font-u)}
.btn-secondary .bulk-c{background:var(--surface-3);color:var(--text-2)}
body:has(.bulkbar:not([hidden])) .toasts{bottom:88px}
@media (max-width:720px){
  .bulkbar{left:12px;right:12px;bottom:12px;transform:none;max-width:none;flex-wrap:wrap;gap:8px 10px;padding:10px 10px 10px 14px}
  .bulk-rule{display:none}
  .bulk-x{margin-left:auto}
  .bulk-a{flex:1 1 100%;overflow-x:auto;scrollbar-width:none;margin:0 -10px 0 -14px;padding:0 10px 0 14px}
  .bulk-a::-webkit-scrollbar{display:none}
  body:has(.bulkbar:not([hidden])) .toasts{bottom:124px}
}

/* ==========================================================================
   4 · SHELL — the labeled top bar (app + editor variants), the nine-square
   app switcher (glass), the ⌘K palette (glass) and the sandbox banner.
   ========================================================================== */

/* ---------------------------------------------------------------- top bar
   Mount it in a .ws-mount host (display:contents) or straight in <body>: a
   sticky element only sticks inside its own parent's box, so a plain wrapper
   div would let the bar scroll away with it. */
.ws-mount{display:contents}
.sh-bar{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:12px;height:var(--bar-h);padding:0 16px 0 18px;background:var(--surface);box-shadow:inset 0 -1px 0 var(--line);min-width:0}
/* a screen that owns its own scrolling (the editors) parks the bar in flow */
.sh-bar.is-static{position:relative;top:0;flex:none}
.sh-brand{display:flex;align-items:center;gap:9px;height:40px;padding:0 8px 0 4px;margin-left:-4px;border-radius:10px;text-decoration:none;color:var(--text);flex:none}
.sh-brand:hover{background:var(--surface-2)}
.sh-brand .ws-word{margin-top:-1px}
.sh-div{flex:none;width:1px;height:22px;background:var(--line)}
.sh-ws{display:flex;align-items:center;gap:8px;flex:none;font:500 14px/1.2 var(--font-u);color:var(--text-2);white-space:nowrap}
.sh-ws .tag{flex:none}
.sh-tabs{display:flex;align-items:center;gap:2px;margin-left:6px}
.sh-tab{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;border:0;border-radius:9px;background:transparent;color:var(--text-2);font:500 14px/1 var(--font-u);text-decoration:none;white-space:nowrap;transition:background-color var(--d-1),color var(--d-1),box-shadow var(--d-1)}
.sh-tab svg.i{width:16px;height:16px;color:var(--text-3)}
.sh-tab:hover{background:var(--surface-2);color:var(--text)}
.sh-tab[aria-current=page]{background:var(--surface-3);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong)}
.sh-tab[aria-expanded=true]{background:var(--surface-3);color:var(--text)}
.sh-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.sh-search{display:flex;align-items:center;gap:9px;width:272px;height:36px;padding:0 6px 0 11px;border:0;border-radius:10px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text-3);font:400 14px/1 var(--font-u);text-align:left;transition:box-shadow var(--d-1),background-color var(--d-1)}
.sh-search svg.i{width:16px;height:16px}
.sh-search .sh-search-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-search:hover{box-shadow:inset 0 0 0 1px var(--line-hover);color:var(--text-2)}
.sh-nine{--btn-h:36px}
.sh-nine .nine{display:grid;grid-template-columns:repeat(3,4px);gap:3px}
.sh-nine .nine i{width:4px;height:4px;border-radius:1.2px;background:currentColor}
.sh-nine[aria-expanded=true]{background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--violet)}
.sh-avatar{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.sh-avatar .avatar{width:28px;height:28px;font-size:12.5px}
.sh-avatar:hover,.sh-avatar[aria-expanded=true]{box-shadow:inset 0 0 0 1px var(--line-hover);background:var(--surface-2)}

/* editor variant */
.sh-bar.is-editor{gap:10px;container-type:inline-size}
.sh-status{flex:none}
.sh-views{flex:0 1 auto;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.sh-views::-webkit-scrollbar{display:none}
@container (max-width:1180px){.sh-save{display:none}}
@container (max-width:1060px){.sh-bar.is-editor .sh-brand{display:none}.sh-status .chg-l{display:none}.sh-status .chg-s{display:inline}.sh-code span{display:none}.sh-code{width:36px;padding:0}}
@container (max-width:900px){.sh-back .sh-back-t{display:none}.sh-back{width:36px;padding:0}.sh-pub-n{display:none}}
.sh-bar.is-editor .sh-brand{padding:0 6px;margin-right:-2px}
.sh-back{flex:none}
.sh-name{field-sizing:content;min-width:80px;max-width:300px;height:34px;padding:0 10px;border:0;border-radius:8px;background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--text);font:600 15px/1 var(--font-u);letter-spacing:-.006em;text-overflow:ellipsis;transition:box-shadow var(--d-1),background-color var(--d-1)}
.sh-name:hover{box-shadow:inset 0 0 0 1px var(--line-strong)}
.sh-name:focus{outline:none;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--violet),0 0 0 3px var(--violet-a28)}
.sh-sub{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.sh-status{display:flex;align-items:center;gap:10px;min-width:0}
.sh-save{font:var(--t-meta);color:var(--text-3);white-space:nowrap}
.sh-save.is-saving{color:var(--text-2)}
.sh-views{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0}
.sh-views>*{flex:none}
.sh-views:empty{display:none}
.sh-actions{display:flex;align-items:center;gap:8px;flex:none}
.sh-code{flex:none}
.sh-publish{flex:none;min-width:112px}
.sh-bar.is-editor .sh-views+.sh-code{margin-left:0}
.sh-bar.is-editor .sh-views:empty+.sh-code{margin-left:auto}

@media (max-width:1180px){
  .sh-search{width:220px}
  .sh-bar:not(.is-editor) .sh-brand .ws-word{display:none}
}
@media (max-width:900px){
  .sh-search{width:40px;padding:0;justify-content:center}
  .sh-search .sh-search-t,.sh-search .kbds{display:none}
}
@media (max-width:720px){
  .sh-bar{padding:0 10px 0 12px;gap:8px}
  .sh-ws{display:none}
  .sh-bar:not(.is-editor) .sh-div{display:none}
  .sh-bar.is-editor{flex-wrap:wrap;height:auto;padding-block:8px;row-gap:8px}
  .sh-bar.is-editor .sh-brand{display:none}
  .sh-bar.is-editor .sh-div{display:none}
  .sh-back .sh-back-t{display:none}
  .sh-back{width:36px;padding:0}
  .sh-name{flex:1;max-width:none;min-width:0}
  .sh-sub{order:5;flex:1 0 100%;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
  .sh-sub>*{flex:none}
  .sh-views{margin-left:0}
  .sh-sub::-webkit-scrollbar{display:none}
  .sh-publish{min-width:0}
}
@media (max-width:560px){
  .sh-tabs .sh-tab-t{display:none}
  .sh-tab{padding:0 9px}
  .sh-tabs{margin-left:0}
}

/* ---------------------------------------------------------------- app switcher (glass) */
.sw{position:fixed;z-index:1100;width:380px;max-width:calc(100vw - 24px);padding:10px;border-radius:var(--r-2xl);color:var(--text);transform-origin:var(--sw-origin,top right)}
@media (prefers-reduced-motion:no-preference){
  .sw.is-in{animation:sw-in var(--d-3) var(--ease-out) both}
  .sw.is-out{animation:sw-out var(--d-2) var(--ease) both}
}
@keyframes sw-in{from{opacity:0;transform:translateY(-6px) scale(.965)}}
@keyframes sw-out{to{opacity:0;transform:translateY(-4px) scale(.98)}}
.sw-top{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:2px 2px 10px}
.sw-go{display:flex;align-items:center;gap:9px;height:40px;padding:0 12px;border:0;border-radius:12px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(214,218,240,.12);color:var(--text);font:500 14px/1 var(--font-u);text-align:left;text-decoration:none}
.sw-go svg.i{width:17px;height:17px;color:var(--text-2)}
.sw-go .count{margin-left:auto;font-size:13px}
.sw-go:hover,.sw-go:focus-visible{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(214,218,240,.2)}
.sw-go:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.sw-go[aria-current=page]{box-shadow:inset 0 0 0 1px rgba(165,151,242,.5)}
.sw-label{display:flex;align-items:baseline;justify-content:space-between;padding:8px 10px 8px;font:var(--t-label);color:var(--text-2)}
.sw-label span{font:var(--t-meta);color:var(--text-3)}
.sw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.sw-tile{position:relative;display:grid;justify-items:center;align-content:start;gap:8px;min-height:104px;padding:12px 4px 10px;border:0;border-radius:16px;background:transparent;color:var(--text);font:500 13.5px/1.2 var(--font-u);text-align:center;text-decoration:none;transition:background-color var(--d-1)}
.sw-ic{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;color:var(--text-2);background:linear-gradient(160deg,#252838,#181A25);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(214,218,240,.12),0 8px 18px -10px rgba(0,0,0,.8);transition:transform var(--d-2) var(--ease-out),box-shadow var(--d-2)}
.sw-ic .app-svg{width:26px;height:26px}
.sw-name{display:block}
.sw-beta{display:block;margin-top:-4px;font:400 13px/1.1 var(--font-u);color:var(--text-3)}
.sw-num{position:absolute;top:7px;left:9px;font:600 13px/1 var(--font-d);color:var(--text-3);opacity:0;transition:opacity var(--d-1)}
.sw.is-keys .sw-num{opacity:1}
.sw-tile:hover,.sw-tile.is-cur{background:rgba(255,255,255,.065)}
.sw-tile:hover .sw-ic,.sw-tile.is-cur .sw-ic{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(201,192,250,.4),0 10px 22px -10px rgba(0,0,0,.85)}
.sw-tile:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--violet)}
/* "All frames" is a destination, not a builder — the frames tone (violet) is
   its accent, and it is the only violet in the grid. */
.sw-tile.is-all{background:var(--violet-a10);box-shadow:inset 0 0 0 1px var(--violet-a28)}
.sw-tile.is-all:hover,.sw-tile.is-all.is-cur{background:var(--violet-a16)}
.sw-tile.is-all .sw-ic{color:var(--violet-soft);background:linear-gradient(160deg,#2E2A4A,#1B182A);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px var(--violet-a28),0 8px 18px -10px rgba(0,0,0,.8)}
.sw-tile.is-all:hover .sw-ic,.sw-tile.is-all.is-cur .sw-ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(201,192,250,.55),0 10px 22px -10px rgba(0,0,0,.85)}
.sw-tile.is-all:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--violet)}
/* the ninth square when Transpose is on: a tool, not a builder — the only non-violet tile, in the
   Transpose tone with a hairline ring (TRANSPOSE_PLAN §4.1, round 9 "the way in") */
.sw-tile.is-tx{box-shadow:inset 0 0 0 1px rgba(114,198,230,.26)}
.sw-tile.is-tx:hover,.sw-tile.is-tx.is-cur{background:rgba(114,198,230,.08);box-shadow:inset 0 0 0 1px rgba(114,198,230,.5)}
.sw-tile.is-tx .sw-ic{color:var(--tone-transpose);background:linear-gradient(160deg,#1F3340,#152029);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(114,198,230,.3),0 8px 18px -10px rgba(0,0,0,.8)}
.sw-tile.is-tx .sw-ic svg.i{width:26px;height:26px;stroke-width:1.6}
.sw-tile.is-tx:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--tone-transpose)}
.sw-foot{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 4px 2px 8px;border-top:1px solid rgba(214,218,240,.12)}
.sw-who{flex:1;min-width:0;display:grid;gap:2px}
.sw-who b{font:500 14px/1.25 var(--font-u);color:var(--text)}
.sw-who span{font:var(--t-meta);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:480px){
  .sw{left:12px!important;right:12px;width:auto}
  .sw-tile{min-height:96px}
}

/* ---------------------------------------------------------------- ⌘K palette (glass, slim) */
.pal-scrim{position:fixed;inset:0;z-index:1150;display:flex;justify-content:center;align-items:flex-start;padding:max(12vh,72px) 16px 16px;background:rgba(5,6,10,.56)}
@media (prefers-reduced-motion:no-preference){.pal-scrim.is-in{animation:scrim-in var(--d-2) var(--ease) backwards}.pal-scrim.is-in .pal{animation:dlg-in var(--d-3) var(--ease-out) backwards}}
.pal{width:min(620px,100%);border-radius:18px;overflow:hidden;color:var(--text)}
.pal-in{display:flex;align-items:center;gap:10px;height:54px;padding:0 14px 0 16px;border-bottom:1px solid rgba(214,218,240,.12)}
.pal-in svg.i{width:18px;height:18px;color:var(--text-3)}
.pal-in input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--text);font:400 16px/1 var(--font-u);outline:none}
.pal-in input::placeholder{color:var(--text-4)}
.pal-list{max-height:min(460px,58vh);overflow-y:auto;padding:6px;overscroll-behavior:contain;scroll-padding:32px 0 6px}
.pal-g{padding:10px 10px 6px;font:var(--t-label);color:var(--text-3)}
.pal-o{display:flex;align-items:center;gap:11px;min-height:40px;padding:0 10px;border-radius:10px;color:var(--text-2);cursor:pointer}
.pal-o .pal-i{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;color:var(--text-3);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(214,218,240,.1)}
.pal-o .pal-i svg.i,.pal-o .pal-i .app-svg{width:16px;height:16px}
.pal-o .pal-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 14px/1.3 var(--font-u)}
.pal-o .pal-l mark{background:none;color:var(--text);font-weight:600}
.pal-o .pal-s{flex:none;max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--t-meta);color:var(--text-3)}
.pal-o[aria-selected=true]{background:rgba(165,151,242,.14);color:var(--text);box-shadow:inset 0 0 0 1px rgba(165,151,242,.28)}
.pal-o[aria-selected=true] .pal-i{color:var(--violet-soft)}
.pal-empty{padding:28px 16px;text-align:center;font:var(--t-ui);color:var(--text-2)}
.pal-empty small{display:block;margin-top:4px;font:var(--t-meta);color:var(--text-3)}
.pal-f{display:flex;align-items:center;gap:16px;height:42px;padding:0 14px;border-top:1px solid rgba(214,218,240,.12);font:var(--t-meta);color:var(--text-3)}
.pal-f>span{display:inline-flex;align-items:center;gap:6px}
.pal-f .ws-lens{margin-left:auto}
@media (max-width:560px){.pal-scrim{padding-top:64px}.pal-f>span:nth-child(3){display:none}}

/* ---------------------------------------------------------------- sandbox banner (/try) */
.sb-banner{position:relative;background:var(--surface-2);box-shadow:inset 0 -1px 0 var(--line-strong)}
.sb-banner-in{max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 48px}
.sb-clock{position:relative;flex:none;display:grid;place-items:center;width:38px;height:38px}
.sb-clock svg{position:absolute;inset:0;width:38px;height:38px;transform:rotate(-90deg)}
.sb-clock b{position:relative;font:650 13px/1 var(--font-d);color:var(--text)}
.sb-c-track{fill:none;stroke:var(--line-strong);stroke-width:2.5}
.sb-c-left{fill:none;stroke:var(--text-2);stroke-width:2.5;stroke-linecap:round}
.sb-b-txt{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font:var(--t-ui);color:var(--text-2)}
.sb-b-txt b{font:600 14px/1.4 var(--font-u);color:var(--text)}
.sb-b-sep{color:var(--text-3)}
.sb-claim{flex:none}
@media (max-width:1180px){.sb-banner-in{padding-inline:32px}}
@media (max-width:720px){
  .sb-banner-in{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px 12px;padding:12px var(--gutter)}
  .sb-b-sep{display:none}
  .sb-b-txt{display:grid;gap:2px}
  .sb-claim{grid-column:1/-1;width:100%;--btn-h:40px}
}

/* ==========================================================================
   5 · RESPONSIVE — the cross-cutting rules every screen gets for free.
   Breakpoints: ≤1180 compact desktop · ≤900 tablet · ≤720 narrow ·
   ≤560 phone. Component- and shell-specific breakpoints live with them.
   ========================================================================== */
.only-narrow{display:none!important}
@media (max-width:720px){
  .hide-narrow{display:none!important}
  .only-narrow{display:revert!important}
}
@media (max-width:560px){
  .hide-phone{display:none!important}
  /* dialogs become bottom-anchored sheets with stacked, full-width actions */
  .dlg-scrim{align-items:end;padding:12px 10px calc(10px + env(safe-area-inset-bottom))}
  .dlg{max-height:calc(100dvh - 24px);border-radius:20px}
  .dlg-head{padding:18px 16px 0 18px}
  .dlg-body{padding:12px 18px 4px}
  .dlg-actions{flex-direction:column-reverse;align-items:stretch;padding:14px 18px 18px}
  .dlg-actions .btn{width:100%}
  .dlg-actions .spacer{display:none}
  .menu{min-width:min(260px,calc(100vw - 24px))}
  .input,.textarea,.select{font-size:16px} /* no iOS zoom-on-focus */
  .themes{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .theme-sw{height:40px}
  .tabs{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
}
/* touch: bigger hit targets, no hover-only affordances */
@media (pointer:coarse){
  .btn{--btn-h:40px}
  .btn-sm{--btn-h:36px}
  .btn-lg{--btn-h:48px}
  .menu-item{min-height:44px}
  .chip{height:34px}
  .chip-x{width:28px;height:28px}
  .switch{width:44px;height:26px}
  .switch::after{width:20px;height:20px}
  .switch:checked::after{transform:translateX(18px)}
  .sh-nine,.sh-avatar{--btn-h:40px;width:40px;height:40px}
}