/* ================================================================
   Studio 1a — the Adobe-classic workspace shell (design handoff 2026-09-09)
   ================================================================
   Every rule is scoped to html[data-ui="1a"]; the classic layout in styles.css
   is untouched and stays the fallback. The DOM underneath is the SAME DOM:
   ui1a.js moves the existing controls into the chrome built here, so every id,
   handler and law (bilingual EN-left · AR-right, burgundy = money, logical
   properties only) carries over.

   Values are the Studio's own tokens. The design-system names the brief uses
   (--radius-xl, --text-xs, --font-ar-ui, --shadow-dropdown …) are defined below
   once, from the same numbers styles.css already carries, so check-tokens can
   see every token that is read. */

:root {
  /* --surface-page · --surface-panel · --surface-control · --surface-selected
     are styles.css tokens (they were declared-but-dead there until 1a read
     them — tests/unit/live-tokens); 1a adds only what styles.css lacks */
  --text-accent: var(--gold-900);
  --radius-xs: 2px; --radius-sm: 3px; --radius: 4px; --radius-md: 5px;
  --radius-lg: 6px; --radius-xl: 8px; --radius-2xl: 10px; --radius-pill: 999px;
  --text-2xs: .66rem; --text-xs: .72rem; --text-sm: .8rem; --text-base: .9rem;
  --text-md: .95rem; --text-xl: 1.3rem;
  --font-ar-ui: 'Aref Ruqaa', var(--font-display), serif;
  --ctl-h-inline: 34px; --ctl-h-cta: 52px;
  /* money surfaces: burgundy is a CTA ground, not a text colour on night chrome */
  --wash-money: rgba(240, 220, 173, .32);
  --money-text: var(--maroon);
  --shadow-artboard: 0 1px 10px rgba(60, 44, 18, .10);
  --shadow-dropdown: 0 8px 22px rgba(20, 16, 11, .14);
  --ring-selected: inset 0 0 0 1px var(--gold-700);
  --ws-menubar-h: 28px; --ws-header-h: 52px; --ws-ctx-h: 48px; --ws-status-h: 32px;
}

/* ── The classic chrome steps aside ────────────────────────────────────── */
html[data-ui="1a"] .topbar,
html[data-ui="1a"] .layout,
html[data-ui="1a"] .stage-head,
html[data-ui="1a"] .stage__hint--stack,
html[data-ui="1a"] .edge-tab,
html[data-ui="1a"] #letter-dock > summary,
html[data-ui="1a"] #rail-kind-hint { display: none !important; }
/* the classic rail collapse/expand state means nothing here — one rail, always */
html[data-ui="1a"] body { min-height: 100vh; }

/* ── Workspace root: fills the first viewport, the page scrolls below it ── */
html[data-ui="1a"] #ui1a {
  height: 100vh; min-height: 640px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  background: var(--surface-page);
  font-family: var(--font-ui); color: var(--ink-950);
  box-sizing: border-box;
}
html[data-ui="1a"][data-layout="boxed"] #ui1a,
html[data-ui="1a"][data-layout="boxed"] .trust-strip,
html[data-ui="1a"][data-layout="boxed"] .seo-about,
html[data-ui="1a"][data-layout="boxed"] .foot {
  max-width: 1560px; margin-inline: auto;
}
html[data-ui="1a"][data-layout="boxed"] #ui1a { width: 100%; border-inline: 1px solid var(--t-border); }
html[data-theme="night"] { --wash-money: rgba(58, 44, 21, .55); --money-text: #F08AA0; }   /* 7.4:1 on the night panel, 6.5:1 on the wash */
html[data-ui="1a"] #ui1a [lang="ar"] { font-family: var(--font-ar-ui); }
html[data-ui="1a"] #ui1a .ws-btn,
html[data-ui="1a"] #ui1a .ws-chip,
html[data-ui="1a"] #ui1a .ws-tb,
html[data-ui="1a"] #ui1a .ws-menu,
html[data-ui="1a"] #ui1a .ws-badge { font-family: var(--font-ui); }

/* ── Menu bar (28px) ───────────────────────────────────────────────────── */
html[data-ui="1a"] .ws-menubar {
  display: flex; align-items: center; gap: 2px;
  height: var(--ws-menubar-h); padding: 0 10px; flex: none;
  background: var(--surface-panel); border-bottom: 1px solid var(--ivory-300);
  position: relative; z-index: 12;
}
html[data-ui="1a"] .ws-menus { display: flex; align-items: center; gap: 2px; }
html[data-ui="1a"] .ws-menuwrap { position: relative; }
html[data-ui="1a"] .ws-menu,
html[data-ui="1a"] .ws-badge {
  display: inline-flex; align-items: center; gap: .35em;
  height: 24px; padding: 0 10px; margin: 0;
  font-size: var(--text-xs); letter-spacing: .04em; line-height: 1;
  color: var(--text-accent); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-xs);   /* flat: a menubar reads as words, not boxes (merchant 2026-09-09) */
  white-space: nowrap; cursor: pointer;
  direction: ltr; unicode-bidi: isolate;
  transition: background .15s ease;
}
html[data-ui="1a"] .ws-badge { padding: 0 8px; letter-spacing: .08em; }
html[data-ui="1a"] .ws-menu:hover, html[data-ui="1a"] .ws-badge:hover { background: rgba(198, 161, 91, .12); }
html[data-ui="1a"] .ws-menu.is-open, html[data-ui="1a"] .ws-badge.is-open {
  background: var(--surface-selected); color: var(--ink-950);
  box-shadow: inset 0 -2px 0 var(--gold-700);
}
html[data-ui="1a"] .ws-menu { font-weight: 600; letter-spacing: .06em; padding: 0 9px; }
html[data-ui="1a"] .ws-menu [lang="ar"], html[data-ui="1a"] .ws-badge [lang="ar"] { font-size: .95rem; line-height: 1; }
html[data-ui="1a"] .ws-menubar__right { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
html[data-ui="1a"] .ws-sep-v { width: 1px; height: 16px; background: var(--ivory-300); margin: 0 6px; }
html[data-ui="1a"] .ws-storelink { font-size: var(--text-xs); color: var(--gold-900); letter-spacing: .04em; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
html[data-ui="1a"] .ws-storelink a { color: inherit; }
/* the version pill is developer chrome — quiet, next to the store link */
html[data-ui="1a"] #app-version { font-size: .6rem; border: none; padding: 0 4px; }

/* dropdown menus: 330px, rows 30px — glyph · label · shortcut/✓ */
html[data-ui="1a"] .ws-dd {
  position: absolute; top: 28px; inset-inline-start: 0; z-index: 12;
  width: 330px; padding: 6px; box-sizing: border-box;
  background: var(--surface-panel); border: 1px solid var(--t-border-strong);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-dropdown);
  display: flex; flex-direction: column; gap: 1px; direction: inherit;
}
html[data-ui="1a"] .ws-dd[hidden] { display: none; }
html[data-ui="1a"] .ws-dd__item {
  display: flex; align-items: center; gap: 10px;
  height: 30px; padding: 0 10px; width: 100%; box-sizing: border-box;
  background: transparent; border: none; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--ink-950); font-family: var(--font-ui);
  font-size: var(--text-sm); text-align: start; direction: ltr; unicode-bidi: isolate;
  white-space: nowrap; line-height: 1;
}
html[data-ui="1a"] .ws-dd__item:hover, html[data-ui="1a"] .ws-dd__item:focus-visible { background: var(--gold-100); }
html[data-ui="1a"] .ws-dd__item[disabled] { opacity: .45; cursor: default; }
html[data-ui="1a"] .ws-dd__item .g { width: 18px; text-align: center; flex: none; }
html[data-ui="1a"] .ws-dd__item .l { flex: 1; text-align: start; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="1a"] .ws-dd__item .r { font-size: var(--text-2xs); color: var(--gold-900); flex: none; }
html[data-ui="1a"] .ws-dd__item.is-danger { font-weight: 700; }
html[data-ui="1a"] .ws-dd__sep { height: 1px; background: var(--ivory-300); margin: 4px 6px; }

/* ── Header (52px): wordmark · project · save · projects | Export ▾ · Order ── */
html[data-ui="1a"] .ws-header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px;
  height: var(--ws-header-h); padding: 0 16px; flex: none;
  background: var(--surface-panel); border-bottom: 1px solid var(--t-border);
  position: relative; z-index: 11;
}
html[data-ui="1a"] .ws-header .wordmark { display: flex; gap: 14px; align-items: center; margin: 0; flex: none; direction: ltr; justify-self: center; }
html[data-ui="1a"] .ws-header .wordmark__logo { width: 30px; height: auto; background: transparent; border-radius: 0; padding: 0; }
html[data-ui="1a"] .ws-header .wordmark__en { font-size: var(--text-sm); }
html[data-ui="1a"] .ws-header .wordmark__ar { font-size: var(--text-xl); line-height: 1.3; }
html[data-ui="1a"] .ws-header__proj { display: flex; align-items: center; gap: 6px; direction: ltr; justify-self: start; }
html[data-ui="1a"] .ws-header__proj #proj-new { font-size: 1.1rem; }
html[data-ui="1a"] .ws-header__proj #proj-name {
  width: 170px; height: var(--ctl-h-inline); padding: 0 10px; margin: 0;
  font-size: var(--text-base); border-radius: var(--radius);
  background: var(--surface-control); border: 1px solid var(--border-control);
}
html[data-ui="1a"] .ws-header__proj #proj-name:focus { border-color: var(--gold-500); }
html[data-ui="1a"] .ws-header__right { display: flex; align-items: center; gap: 6px; justify-self: end; }
/* 7. the pass is a quiet green badge beside the account (merchant 2026-09-09) */
html[data-ui="1a"] .ws-badge--pass { color: #1F6B3A; background: rgba(31, 107, 58, .10); border-color: transparent; font-weight: 700; cursor: default; }
html[data-ui="1a"] .ws-badge--pass:hover { background: rgba(31, 107, 58, .14); }
html[data-theme="night"][data-ui="1a"] .ws-badge--pass { color: #7FD69C; background: rgba(127, 214, 156, .14); }
html[data-ui="1a"] .ws-btnwrap { position: relative; display: flex; }
html[data-ui="1a"] .ws-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--ctl-h-inline); padding: 0 14px; margin: 0;
  font-size: var(--text-sm); font-weight: 600; letter-spacing: .04em; line-height: 1;
  background: var(--surface-panel); color: var(--ink-950);
  border: 1px solid var(--gold-700); border-radius: var(--radius);
  cursor: pointer; white-space: nowrap; direction: ltr; unicode-bidi: isolate;
  transition: background .15s ease;
}
html[data-ui="1a"] .ws-btn:hover { background: var(--gold-100); }
html[data-ui="1a"] .ws-btn [lang="ar"] { font-weight: 400; font-size: 1rem; line-height: 1; }
html[data-ui="1a"] .ws-btn.is-open { background: var(--surface-selected); border-color: var(--gold-700); box-shadow: var(--ring-selected); }
/* the one burgundy: money. It steps back to default while its own flyout
   carries the CTA, so a single burgundy is on screen at a time. */
html[data-ui="1a"] .ws-btn--primary { background: var(--action-primary); color: var(--action-primary-text); border-color: var(--action-primary); }
html[data-ui="1a"] .ws-btn--primary:hover { background: var(--action-primary-hover); }
html[data-ui="1a"] .ws-btn--primary.is-open { background: var(--surface-selected); color: var(--ink-950); border-color: var(--gold-700); box-shadow: var(--ring-selected); }
html[data-ui="1a"] .ws-tag {
  position: absolute; top: -8px; inset-inline-end: -6px; height: 16px; padding: 0 6px;
  border-radius: var(--radius-xs); background: var(--gold-700); color: var(--surface-page);   /* 5.2:1 day · 10.3:1 night */
  font-size: .6rem; font-weight: 700; letter-spacing: .04em;
  display: inline-flex; align-items: center; white-space: nowrap; pointer-events: none; direction: ltr;
}
/* the existing projects <details> dropdown, re-dressed as a header chip */
html[data-ui="1a"] .ws-header .proj-dd { position: relative; }
html[data-ui="1a"] .ws-header .proj-dd > summary.chip { height: var(--ctl-h-inline) !important; }
html[data-ui="1a"] .ws-header .proj-list--dd {
  inset-inline-start: 0; inset-inline-end: auto; top: calc(100% + 6px); width: 290px;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-dropdown); padding: 8px;
}
html[data-ui="1a"] .ws-header .proj-list--dd .ws-projfoot { display: flex; gap: 6px; border-top: 1px solid var(--ivory-300); margin-top: 6px; padding-top: 8px; }

/* chips — 34px in the header/rail, 36px in the context bar */
html[data-ui="1a"] #ui1a .chip,
html[data-ui="1a"] #ui1a .ws-chip {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: .35em;
  height: var(--ctl-h-inline); min-height: var(--ctl-h-inline); padding: 0 12px; margin: 0;
  border-radius: var(--radius); font-family: var(--font-ui); font-size: var(--text-base); line-height: 1;
  background: var(--surface-control); color: var(--ink-950);
  border: 1px solid var(--border-control); cursor: pointer; box-sizing: border-box;
  direction: ltr; unicode-bidi: isolate; white-space: nowrap;
  transition: background .15s ease;
}
html[data-ui="1a"] #ui1a .chip:hover, html[data-ui="1a"] #ui1a .ws-chip:hover { background: var(--gold-100); }
html[data-ui="1a"] #ui1a .chip.is-on, html[data-ui="1a"] #ui1a .chip--toggle.is-on,
html[data-ui="1a"] #ui1a .ws-chip.is-on, html[data-ui="1a"] #ui1a .ws-chip.is-open,
html[data-ui="1a"] #ui1a .chip[aria-pressed="true"] {
  background: var(--surface-selected); border-color: var(--gold-700); box-shadow: var(--ring-selected);
}
/* Arabic sample phrases are the ONE pill in the system */
html[data-ui="1a"] #ui1a .chip[data-text] { border-radius: var(--radius-pill); border-color: var(--gold-500); color: var(--gold-900); background: transparent; font-family: var(--font-ar-ui); font-size: 1.05rem; }
html[data-ui="1a"] #ui1a .chip[data-text]:hover { background: var(--gold-100); }
html[data-ui="1a"] #ui1a .chip [lang="ar"], html[data-ui="1a"] #ui1a .ws-chip [lang="ar"] { font-size: 1.05em; line-height: 1; }
html[data-ui="1a"] #ui1a .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; align-items: center; }
html[data-ui="1a"] #ui1a .chips > *, html[data-ui="1a"] #ui1a .proj-bar > * { height: var(--ctl-h-inline) !important; min-height: var(--ctl-h-inline); margin: 0 !important; }
html[data-ui="1a"] #ui1a .proj-bar { display: flex; gap: 6px; align-items: center; margin: 0; }
html[data-ui="1a"] #ui1a .proj-name { height: var(--ctl-h-inline); padding: 0 10px; border-radius: var(--radius); background: var(--surface-control); border: 1px solid var(--border-control); font-size: var(--text-base); }
html[data-ui="1a"] #ui1a input[type="range"] { width: 100%; accent-color: var(--gold-700); }

/* ── Context bar (48px): swaps with the selection ──────────────────────── */
html[data-ui="1a"] .ws-ctx {
  display: flex; align-items: center; gap: 6px;
  height: var(--ws-ctx-h); padding: 0 12px; flex: none;
  background: var(--surface-page); border-bottom: 1px solid var(--t-border);
  position: relative; z-index: 10; overflow: visible; white-space: nowrap;
}
html[data-ui="1a"] .ws-ctx__g { display: none; align-items: center; gap: 6px; min-width: 0; flex: none; }
html[data-ui="1a"] .ws-ctx[data-state="doc"] .ws-ctx__g[data-ctx~="doc"],
html[data-ui="1a"] .ws-ctx[data-state="text"] .ws-ctx__g[data-ctx~="text"],
html[data-ui="1a"] .ws-ctx[data-state="shape"] .ws-ctx__g[data-ctx~="shape"],
html[data-ui="1a"] .ws-ctx[data-state="multi"] .ws-ctx__g[data-ctx~="multi"],
html[data-ui="1a"] .ws-ctx[data-state="letter"] .ws-ctx__g[data-ctx~="letter"] { display: flex; }
html[data-ui="1a"] .ws-ctx__main { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; overflow: visible; }   /* 0: the right cluster follows the groups, no gap (merchant 2026-09-09) */
html[data-ui="1a"] .ws-ctx__right { display: flex; align-items: center; gap: 4px; flex: none; position: relative; z-index: 1; background: var(--surface-page); padding-inline-start: 6px; }
/* a crowded bar drops the word labels before it drops a control */
@media (max-width: 1440px) {
  html[data-ui="1a"] .ws-field .lbl, html[data-ui="1a"] .ws-field .u .px { display: none; }
  html[data-ui="1a"] .ws-field input { width: 56px; }
  html[data-ui="1a"] .ws-ctx, html[data-ui="1a"] .ws-ctx__main, html[data-ui="1a"] .ws-ctx__g { gap: 4px; }
  html[data-ui="1a"] .ws-ctx__sep { margin: 0 1px; }
  html[data-ui="1a"] .ws-sw { gap: 4px; }
  html[data-ui="1a"] .ws-ctx__right { gap: 3px; padding-inline-start: 0; }
  html[data-ui="1a"] .ws-ctx { padding: 0 8px; }
  /* 1:1 and true-size keep their View-menu homes (and keys 1 / ⊡) */
  html[data-ui="1a"] .ws-ctx__right #zoom-100,
  html[data-ui="1a"] .ws-ctx__right #zoom-true { display: none !important; }
}
html[data-ui="1a"] .ws-ctx__lbl {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .03em; color: var(--gold-900);
  white-space: nowrap; direction: ltr; unicode-bidi: isolate; display: inline-flex; align-items: center; gap: .3em;
}
html[data-ui="1a"] .ws-ctx__lbl [lang="ar"] { font-size: .95rem; font-weight: 400; }
html[data-ui="1a"] .ws-ctx__lbl b { color: var(--ink-950); font-weight: 600; }
html[data-ui="1a"] .ws-ctx__sep { width: 1px; height: 20px; background: var(--ivory-300); margin: 0 4px; flex: none; }
html[data-ui="1a"] .ws-ctx .ws-chip { height: 36px; min-height: 36px; }
/* the moved stage-toolbar buttons, and every new toolbar button, wear one coat */
html[data-ui="1a"] .ws-tb, html[data-ui="1a"] #ui1a .ztool {
  min-width: 30px; height: 36px; padding: 0 8px; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 400; line-height: 1;
  color: var(--ink-950); background: var(--surface-control);
  border: 1px solid var(--border-control); border-radius: var(--radius-md);
  cursor: pointer; white-space: nowrap; flex: none; direction: ltr; unicode-bidi: isolate;
  transition: background .15s ease, border-color .15s ease;
}
html[data-ui="1a"] .ws-tb:hover, html[data-ui="1a"] #ui1a .ztool:hover { border-color: var(--t-border-strong); background: var(--surface-control); }
html[data-ui="1a"] .ws-tb.is-on, html[data-ui="1a"] #ui1a .ztool.is-on, html[data-ui="1a"] #ui1a .ztool[aria-pressed="true"],
html[data-ui="1a"] .ws-tb[aria-pressed="true"] { background: var(--surface-selected); border-color: var(--t-border-strong); box-shadow: none; }
html[data-ui="1a"] .ws-tb:disabled, html[data-ui="1a"] #ui1a .ztool:disabled { opacity: .35; cursor: default; }
html[data-ui="1a"] .ws-tb--danger, html[data-ui="1a"] #ui1a .ztool--danger { font-weight: 700; color: var(--action-destructive); width: auto; }
html[data-ui="1a"] .ws-tb--danger:hover, html[data-ui="1a"] #ui1a .ztool--danger:hover { background: var(--action-destructive); color: var(--ivory-50); border-color: var(--action-destructive); }
html[data-ui="1a"] #ui1a .ztool--label, html[data-ui="1a"] .ws-tb--label { min-width: 44px; cursor: default; background: var(--surface-control) !important; border: 1px solid var(--border-control) !important; }
html[data-ui="1a"] #ui1a .zicon { width: 15px; height: 15px; }
/* the align/distribute/group keys become toolbar buttons here */
html[data-ui="1a"] .ws-ctx .tk-key { min-width: 30px; height: 36px !important; padding: 0 8px; font-family: var(--font-ui); font-size: 1rem; color: var(--ink-950); background: var(--surface-control); border: 1px solid var(--border-control); border-radius: var(--radius-md); margin: 0; }
html[data-ui="1a"] .ws-ctx .tk-key:hover { background: var(--gold-100); border-color: var(--gold-500); }
html[data-ui="1a"] .ws-field {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); color: var(--gold-900); font-weight: 600; white-space: nowrap; direction: ltr;
}
html[data-ui="1a"] .ws-field input { width: 64px; height: 36px; padding: 0 8px; text-align: center; font-size: var(--text-base); font-family: var(--font-ui); color: var(--ink-950); background: var(--surface-control); border: 1px solid var(--border-control); border-radius: var(--radius); box-sizing: border-box; }
html[data-ui="1a"] .ws-field .u { font-weight: 400; color: var(--ink-950); }
/* small swatch mirrors in the bar */
html[data-ui="1a"] .ws-sw { display: inline-flex; align-items: center; gap: 10px; flex: none; }
html[data-ui="1a"] .ws-sw button { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .25); background: var(--c); cursor: pointer; padding: 0; margin: 0; }
html[data-ui="1a"] .ws-sw button[aria-checked="true"]::after { content: ''; position: absolute; inset: -5px; border: 2px solid var(--gold-700); border-radius: 50%; }
/* popovers under a context chip host the REAL pickers while open */
html[data-ui="1a"] .ws-popwrap { position: relative; display: inline-flex; }
html[data-ui="1a"] .ws-pop {
  position: absolute; top: 42px; inset-inline-start: 0; z-index: 12;
  width: 330px; padding: 8px; box-sizing: border-box;
  background: var(--surface-panel); border: 1px solid var(--t-border-strong);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-dropdown); direction: inherit;
  white-space: normal;
}
html[data-ui="1a"] .ws-pop[hidden] { display: none; }
html[data-ui="1a"] .ws-pop--wide { width: 400px; }
html[data-ui="1a"] .ws-pop .script-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; min-height: 0; margin: 0; }
html[data-ui="1a"] .ws-pop .style-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; min-height: 0; margin: 0; }
html[data-ui="1a"] .ws-pop .mode-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; }
/* the letter editor's own toolbar lives in the bar while a letter is selected */
html[data-ui="1a"] .ws-ctx #letter-panel { border: none; background: transparent; padding: 0; gap: 6px 8px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: 100%; }
html[data-ui="1a"] .ws-ctx #letter-panel .lp-row { flex-wrap: nowrap; }
html[data-ui="1a"] .ws-ctx #letter-panel .lp-head { padding-bottom: 0; width: auto; display: inline-flex; gap: 8px; }
html[data-ui="1a"] .ws-ctx #letter-panel .lp-head .lp-char { width: 36px; height: 36px; font-size: 1.3rem; }
html[data-ui="1a"] .ws-ctx #letter-panel .lp-prop { display: inline-flex !important; width: auto; border-top: none; padding: 0; gap: 6px; }
html[data-ui="1a"] .ws-ctx #letter-panel .lp-align { display: inline-flex; width: auto; }
html[data-ui="1a"] .ws-ctx #letter-panel .chip { height: 30px; min-height: 30px; padding: 0 8px; font-size: var(--text-xs); }

/* ── Body: tool palette | canvas column | rail ─────────────────────────── */
html[data-ui="1a"] .ws-body { flex: 1; min-height: 0; display: flex; position: relative; }
html[data-ui="1a"] .ws-tools {
  width: 48px; flex: none; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 0 10px; background: var(--surface-panel); border-inline-end: 1px solid var(--t-border);
}
html[data-ui="1a"] .ws-tools .ws-tb, html[data-ui="1a"] .ws-tools .ztool, html[data-ui="1a"] .ws-tools .chip {
  width: 36px; min-width: 36px; height: 36px; padding: 0; font-size: 1rem; margin: 0;
  border-radius: var(--radius-md); background: var(--surface-control); border: 1px solid var(--border-control);
}
html[data-ui="1a"] .ws-tools .ws-tb--type { font-family: var(--font-display); font-size: 1.25rem; }
html[data-ui="1a"] .ws-tools__sep { width: 24px; height: 1px; background: var(--ivory-300); margin: 4px 0; flex: none; }
html[data-ui="1a"] .ws-tools__ink { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
html[data-ui="1a"] .ws-inkdot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .25); display: block; }
html[data-ui="1a"] .ws-tools__ink span { font-size: .56rem; letter-spacing: .04em; color: var(--gold-900); }
/* the eyedropper chip is a tool: hide its text label, show the drop */
html[data-ui="1a"] .ws-tools #eyedrop { font-size: 1rem; }

/* canvas column: the classic <section class="stage"> re-purposed */
html[data-ui="1a"] #ui1a .stage {
  flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  position: relative; height: auto; padding: 0; gap: 0; top: auto; align-self: stretch;
}
html[data-ui="1a"] #ui1a .stage__canvas {
  flex: 1; min-height: 0; border: none; border-radius: 0;
  /* no background here on purpose: the engine paints the sheet (watermark,
     grid, and the night-mode "canvas = paper" rule) — 1a must not out-rank it */
}
html[data-ui="1a"] #stage-canvas svg { margin: auto; }
/* watermark + grid ride the container in the engine; the sheet keeps its
   border + shadow when pinned (unchanged engine behaviour) */

/* status bar (32px) */
html[data-ui="1a"] .ws-status {
  height: var(--ws-status-h); flex: none; display: flex; align-items: center; gap: 14px;
  padding: 0 12px; background: var(--surface-panel); border-top: 1px solid var(--t-border);
  font-size: var(--text-xs); color: var(--gold-900); white-space: nowrap; overflow: hidden; direction: ltr;
}
html[data-ui="1a"] .ws-status__l { color: var(--ink-950); flex: none; font-variant-numeric: tabular-nums; }
html[data-ui="1a"] .ws-status__hint { margin-inline: auto; overflow: hidden; text-overflow: ellipsis; min-width: 0; direction: ltr; unicode-bidi: isolate; }
html[data-ui="1a"] .ws-status__hint [lang="ar"] { font-size: .95rem; }
html[data-ui="1a"] .ws-status__dl { flex: none; direction: ltr; unicode-bidi: isolate; }
html[data-ui="1a"] .ws-status__legal { flex: none; font-size: .66rem; letter-spacing: .02em; color: var(--ink-950); opacity: .8; }
html[data-ui="1a"] .ws-status .ws-badge { height: 24px; }
html[data-ui="1a"] .ws-status .ws-badge[hidden] { display: none; }
/* the stage status / mode badge / dims badge keep their engine positions */

/* render box — the "make it real" nudge, bottom-right of the canvas */
html[data-ui="1a"] .ws-rb {
  position: absolute; inset-inline-end: 16px; bottom: calc(var(--ws-status-h) + 16px); z-index: 3;
  width: 252px; padding: 8px; box-sizing: border-box;
  background: var(--surface-panel); border: 1px solid var(--t-border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-artboard);
  display: flex; flex-direction: column; gap: 6px; direction: inherit;
}
html[data-ui="1a"] .ws-rb[hidden] { display: none; }
html[data-ui="1a"] .ws-rb__h { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .03em; color: var(--gold-900); min-width: 0; }
html[data-ui="1a"] .ws-rb__h .n { font-weight: 400; color: var(--ink-950); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html[data-ui="1a"] .ws-rb__h [lang="ar"] { margin-inline-start: auto; font-size: 1rem; line-height: 1; flex: none; }
html[data-ui="1a"] .ws-rb__stage {
  position: relative; height: 150px; display: grid; place-items: center; overflow: hidden; cursor: zoom-in;
  background: radial-gradient(ellipse at 50% 30%, #FFFDF6 0%, #EFE6D2 70%, #E4D6BA 100%);
  border: 1px solid var(--ivory-300); border-radius: var(--radius); padding: 0;
}
html[data-ui="1a"] .ws-rb__card {
  position: relative; width: 200px; height: 120px; display: grid; place-items: center; overflow: hidden; flex: none;
  background: rgba(246, 238, 218, .78); border: 1px solid rgba(140, 106, 47, .55); border-radius: 6px;
  box-shadow: inset 0 0 24px rgba(255, 255, 255, .35), 0 18px 30px rgba(60, 44, 18, .18);
  transform: perspective(950px) rotateX(14deg) rotateY(-18deg);
  transition: transform .5s ease;
}
html[data-ui="1a"] .ws-rb__card--clear { background: rgba(255, 255, 255, .38); }
html[data-ui="1a"] .ws-rb__card--black { background: rgba(20, 16, 11, .92); }
html[data-ui="1a"] .ws-rb__card--gold { background: rgba(198, 161, 91, .62); }
html[data-ui="1a"] .ws-rb__card img, html[data-ui="1a"] .ws-rb__card canvas { max-width: 78%; max-height: 72%; display: block; pointer-events: none; }
html[data-ui="1a"] .ws-rb__card--black img { filter: invert(1) sepia(1) saturate(.6) brightness(1.1); }
html[data-ui="1a"] .ws-rb__stage > canvas.ws-rb__real { position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-ui="1a"] .ws-rb__f { display: flex; align-items: center; gap: 2px; }
html[data-ui="1a"] .ws-rb__price { margin-inline-start: auto; font-size: var(--text-xs); color: var(--money-text); font-weight: 700; white-space: nowrap; }
html[data-ui="1a"] .ws-lb {
  width: 26px; height: 26px; display: grid; place-items: center; padding: 0; margin: 0;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--gold-900); font-size: .85rem; cursor: pointer; font-family: var(--font-ui);
}
html[data-ui="1a"] .ws-lb:hover { background: var(--gold-100); }

/* ── Rail (320px): one accordion ───────────────────────────────────────── */
html[data-ui="1a"] #ui1a .rail {
  width: 320px; flex: none; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: block; padding: 0; gap: 0; margin: 0;
  background: var(--surface-panel); border: none; border-inline-start: 1px solid var(--t-border);
  border-radius: 0; align-self: stretch; position: static; max-height: none; direction: inherit;
}
html[data-ui="1a"] .rail.ws-rail--end { border-inline-start: 1px solid var(--t-border); }
html[data-ui="1a"] .ws-acc { display: block; margin: 0; border-top: 1px solid var(--ivory-300); }
html[data-ui="1a"] .ws-acc:first-child { border-top: none; }
html[data-ui="1a"] .ws-acc__h {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 10px;
  cursor: pointer; list-style: none; user-select: none; direction: ltr; unicode-bidi: isolate; box-sizing: border-box;
}
html[data-ui="1a"] .ws-acc__h::-webkit-details-marker { display: none; }
html[data-ui="1a"] .ws-acc__h:hover { background: rgba(198, 161, 91, .08); }
html[data-ui="1a"] .ws-acc__caret { width: 18px; font-size: 1.05rem; line-height: 1; color: var(--gold-900); flex: none; }
html[data-ui="1a"] .ws-acc__en { font-size: var(--text-sm); font-weight: 600; letter-spacing: .03em; color: var(--gold-900); white-space: nowrap; }
html[data-ui="1a"] .ws-acc__sum { margin-inline-start: auto; font-size: var(--text-xs); color: var(--ink-950); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; display: inline-flex; align-items: center; gap: 6px; text-align: end; }
html[data-ui="1a"] .ws-acc__sum[lang="ar"] { font-family: var(--font-display); direction: rtl; }
html[data-ui="1a"] .ws-acc__sum:empty { display: none; }
html[data-ui="1a"] .ws-acc__sum .ws-inkdot { width: 10px; height: 10px; border: none; }
html[data-ui="1a"] .ws-acc__ar { font-family: var(--font-ar-ui); font-size: 1.05rem; line-height: 1; color: var(--gold-900); flex: none; }
html[data-ui="1a"] .ws-acc__b { padding: 2px 14px 16px; display: flex; flex-direction: column; gap: 10px; direction: ltr; }
html[data-ui="1a"] .ws-acc[open] > .ws-acc__h .ws-acc__sum { display: none; }
html[data-ui="1a"] .ws-acc--money > .ws-acc__h { border-top: 2px solid var(--gold-500); background: var(--wash-money); }
html[data-ui="1a"] .ws-acc--money > .ws-acc__b { background: var(--wash-money); }
html[data-ui="1a"] .ws-acc--money .ws-acc__sum { color: var(--money-text); font-weight: 700; }
/* inside a section: the classic control rhythm, tightened to the rail */
html[data-ui="1a"] .ws-acc__b .control { margin: 0; padding: 0; border: none; display: flex; flex-direction: column; gap: 10px; }
html[data-ui="1a"] .ws-acc__b .control__label { margin: 0; font-size: var(--text-md); }
html[data-ui="1a"] .ws-acc__b .control__label [lang="ar"] { font-size: 1.25rem; }
html[data-ui="1a"] .ws-acc__b .control__hint { margin: 0; font-size: var(--text-xs); }
html[data-ui="1a"] .ws-acc__b .subcontrol { margin: 0; }
html[data-ui="1a"] .ws-acc__b * + .chips, html[data-ui="1a"] .ws-acc__b * + .proj-bar, html[data-ui="1a"] .ws-acc__b * + .bg-picker,
html[data-ui="1a"] .ws-acc__b * + .tk-palette, html[data-ui="1a"] .ws-acc__b * + .subcontrol, html[data-ui="1a"] .ws-acc__b * + .mode-picker,
html[data-ui="1a"] .ws-acc__b * + .style-list, html[data-ui="1a"] .ws-acc__b * + .swatches, html[data-ui="1a"] .ws-acc__b * + .layers-list { margin-top: 0; }
html[data-ui="1a"] .ws-acc__b .script-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; min-height: 0; margin: 0; }
html[data-ui="1a"] .ws-acc__b .script-tab { min-height: 94px; }
html[data-ui="1a"] .ws-acc__b .style-list { grid-template-columns: repeat(3, 1fr); min-height: 0; }
html[data-ui="1a"] .ws-acc__b .tk-palette { margin: 0; gap: 6px; }
html[data-ui="1a"] .ws-acc__b .tk-palette--shapes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
html[data-ui="1a"] .ws-acc__b .tk-palette--shapes > * { min-width: 0; padding: 0; }
html[data-ui="1a"] .ws-acc__b .mode-picker { margin: 0; }
html[data-ui="1a"] .ws-acc__b #text-input { font-size: 1.45rem; min-height: 72px; }
html[data-ui="1a"] .ws-acc__b .tazheeb { gap: 8px 4px; }
html[data-ui="1a"] .ws-acc__b .tazheeb .tazheeb-key { width: 88px; }
html[data-ui="1a"] .ws-acc__b .orn-details summary { direction: ltr; unicode-bidi: isolate; display: flex; align-items: center; gap: 8px; }
html[data-ui="1a"] .ws-acc__b .orn-details summary > [lang="ar"] { margin-inline-start: auto; }
html[data-ui="1a"] .ws-acc__b .decor-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: transparent; border: none; padding: 0; position: static; max-height: none; overflow: visible; }
html[data-ui="1a"] .ws-acc__b .decor-rail__head { grid-column: 1 / -1; }
html[data-ui="1a"] .ws-acc__b .decor-key { height: 46px; }
html[data-ui="1a"] .ws-acc__b .xform-bar { display: flex; gap: 8px; margin: 0; }
html[data-ui="1a"] .ws-acc__b .mir-grid { grid-template-columns: repeat(3, 1fr); }
html[data-ui="1a"] .ws-acc__b .btn { width: 100%; }
html[data-ui="1a"] .ws-acc__b .ws-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
html[data-ui="1a"] .ws-acc__b .ws-lbl { font-size: var(--text-xs); color: var(--gold-900); font-weight: 600; letter-spacing: .03em; direction: ltr; unicode-bidi: isolate; }
html[data-ui="1a"] .ws-acc__b .ws-lbl [lang="ar"] { font-size: .95rem; font-weight: 400; }
/* the classic rail hid text-only sections by data-kind; keep that law */
html[data-ui="1a"] .rail[data-kind="shape"] .sec-text, html[data-ui="1a"] .rail[data-kind="glyph"] .sec-text { display: none; }

/* ── Flyouts: Export ▾ (420) · Order ▾ (470) · Rafiq (360) ─────────────── */
html[data-ui="1a"] .ws-fly {
  position: absolute; top: 84px; inset-inline-end: 16px; z-index: 14;
  width: 470px; max-height: calc(100vh - 100px); overflow-y: auto; padding: 16px; box-sizing: border-box;
  background: var(--surface-panel); border: 1px solid var(--t-border-strong);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-dropdown);
  display: flex; flex-direction: column; gap: 10px; direction: inherit;
}
html[data-ui="1a"] .ws-fly[hidden] { display: none; }
html[data-ui="1a"] .ws-fly--export { width: 420px; inset-inline-end: 214px; }
html[data-ui="1a"] .ws-fly--rafiq { width: 360px; }
html[data-ui="1a"] .ws-fly__t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; direction: ltr; unicode-bidi: isolate; font-size: var(--text-md); font-weight: 600; letter-spacing: .03em; color: var(--gold-900); }
html[data-ui="1a"] .ws-fly__t output, html[data-ui="1a"] .ws-fly__t .v { order: 50; margin-inline-start: auto; color: var(--ink-950); font-weight: 500; letter-spacing: 0; font-size: var(--text-sm); }
html[data-ui="1a"] .ws-fly__t [lang="ar"] { order: 99; font-size: 1.25rem; margin-inline-start: 8px; }
html[data-ui="1a"] .ws-fly__t:not(:has(.v)) [lang="ar"] { margin-inline-start: auto; }
html[data-ui="1a"] .ws-fly p, html[data-ui="1a"] .ws-hint { margin: 0; font-size: var(--text-xs); line-height: 1.55; color: var(--gold-900); direction: ltr; unicode-bidi: isolate; }
html[data-ui="1a"] .ws-hint--center { text-align: center; }
html[data-ui="1a"] .ws-hint strong, html[data-ui="1a"] .ws-fly p strong { color: var(--money-text); }
html[data-ui="1a"] .ws-fly__pane { display: flex; flex-direction: column; gap: 10px; }
html[data-ui="1a"] .ws-fly__pane[hidden] { display: none; }
html[data-ui="1a"] .ws-seg { display: flex; gap: 8px; }
html[data-ui="1a"] .ws-seg > button {
  flex: 1; height: var(--ctl-h-inline); display: inline-flex; align-items: center; justify-content: center; gap: .3em;
  padding: 0 8px; margin: 0; font-family: var(--font-ui); font-size: var(--text-sm); letter-spacing: .06em; line-height: 1;
  color: var(--ink-950); background: var(--surface-control); border: 1px solid var(--border-control);
  border-radius: var(--radius); cursor: pointer; direction: ltr; unicode-bidi: isolate; white-space: nowrap;
}
html[data-ui="1a"] .ws-seg > button[aria-checked="true"] { background: var(--surface-selected); border-color: var(--gold-700); box-shadow: var(--ring-selected); }
html[data-ui="1a"] .ws-seg > button [lang="ar"] { font-size: 1.05em; }
html[data-ui="1a"] .ws-seg > button [lang="ar"]::before { content: '·'; color: var(--gold-700); margin: 0 .3em; }
/* the Download button IS the engine's export button for the chosen format */
html[data-ui="1a"] .ws-fly .btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 12px 16px; margin: 0;
  font-size: var(--text-base); font-weight: 600; letter-spacing: .04em; line-height: 1.2;
  background: var(--surface-panel); color: var(--ink-950); border: 1px solid var(--gold-700); border-radius: var(--radius);
  min-height: 58px; height: auto !important; direction: ltr; unicode-bidi: isolate;
}
html[data-ui="1a"] .ws-fly .btn:hover:not(:disabled) { background: var(--gold-100); }
html[data-ui="1a"] .ws-fly .btn small { font-weight: 400; font-size: var(--text-xs); opacity: .7; }
html[data-ui="1a"] .ws-fly .btn--ghost { background: transparent; border-color: var(--ivory-300); }
html[data-ui="1a"] .ws-fly .btn--primary { background: var(--surface-panel); color: var(--ink-950); border-color: var(--gold-700); }
html[data-ui="1a"] .ws-fly .btn--primary small { opacity: .7; }
html[data-ui="1a"] .ws-fly .btn:disabled { opacity: .45; cursor: not-allowed; }
html[data-ui="1a"] .ws-fly .chip.btn-like { min-height: 58px; height: auto !important; flex-direction: column; gap: 2px; width: 100%; border-color: var(--gold-700); background: var(--surface-panel); font-weight: 600; letter-spacing: .04em; }
html[data-ui="1a"] .ws-fly .chip.btn-like small { font-weight: 400; font-size: var(--text-xs); opacity: .7; white-space: normal; }
html[data-ui="1a"] .ws-fly .ws-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
html[data-ui="1a"] .ws-fly #export-hist { margin: 0; }
html[data-ui="1a"] .ws-fly #export-hist[hidden] { display: none; }
html[data-ui="1a"] .ws-fly select.proj-name { height: var(--ctl-h-inline); }
html[data-ui="1a"] .ws-fly .mir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
html[data-ui="1a"] .ws-fly .mir-card { border-radius: var(--radius-xl); background: var(--surface-control); }
html[data-ui="1a"] .ws-fly .mir-card:hover { border-color: var(--t-border-strong); }
html[data-ui="1a"] .ws-fly #mir-status:empty { display: none; }
html[data-ui="1a"] .ws-fly .cta-sub { margin: 0; }
/* the one big CTA — 52px burgundy — in the Order flyout and the preview rail */
html[data-ui="1a"] #mir-custom, html[data-ui="1a"] #mockup-order {
  display: flex; width: 100%; height: var(--ctl-h-cta); min-height: var(--ctl-h-cta);
  align-items: center; justify-content: center; margin: 0;
  background: var(--action-primary); color: var(--action-primary-text);
  border: 1px solid var(--action-primary); border-radius: var(--radius-lg);
  font-size: 1.02rem; font-weight: 700; letter-spacing: .01em; cursor: pointer; direction: ltr; unicode-bidi: isolate;
}
html[data-ui="1a"] #mir-custom:hover, html[data-ui="1a"] #mockup-order:hover { background: var(--maroon-press); }
html[data-ui="1a"] #mockup-set { width: 100%; height: 44px !important; margin: 0 !important; background: transparent; border-color: var(--ivory-300); font-weight: 600; }
html[data-ui="1a"] .ws-fly .pay-note, html[data-ui="1a"] .mockup-side .pay-note { margin: 0; }
html[data-ui="1a"] .ws-fly--rafiq .copilot-tabs { padding: 0; }
html[data-ui="1a"] .ws-fly--rafiq .copilot-list { padding: 0; max-height: 50vh; }
html[data-ui="1a"] .ws-fly--rafiq .copilot-person { padding: 8px 0 0; }

/* ── Piece preview mode: the configurator IN the workspace ─────────────── */
html[data-ui="1a"] #mockup-overlay {
  position: absolute; inset: calc(var(--ws-menubar-h) + var(--ws-header-h)) 0 var(--ws-status-h) 0;
  background: transparent; display: block; z-index: 11; padding: 0; /* above the context bar (10) */
}
html[data-ui="1a"] #mockup-overlay[hidden] { display: none; }
html[data-ui="1a"] .mockup-card {
  width: 100%; height: 100%; max-width: none !important; max-height: none !important;
  padding: 0; border: none; border-radius: 0; background: var(--surface-page);
  display: flex; flex-direction: column; overflow: hidden;
}
html[data-ui="1a"] .mockup-card > #mockup-close { display: none; }
html[data-ui="1a"] .mockup-card > #mockup-title { display: none; }
html[data-ui="1a"] .ws-pv__ctx { display: flex; align-items: center; gap: 6px; height: var(--ws-ctx-h); padding: 0 12px; flex: none; background: var(--surface-page); border-bottom: 1px solid var(--t-border); white-space: nowrap; overflow: hidden; direction: ltr; }
html[data-ui="1a"] .ws-pv__ctx .m3d-pricebox { margin: 0; gap: 6px; }
html[data-ui="1a"] .ws-pv__ctx .m3d-price { font-size: 1.05rem; }
html[data-ui="1a"] .ws-pv__ctx .ws-ctx__lbl { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html[data-ui="1a"] .mockup-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0; align-items: stretch; }
html[data-ui="1a"] .mockup-main { position: relative; order: 0; min-width: 0; min-height: 0; height: 100%; align-self: stretch; display: flex; flex-direction: column; top: auto; }
html[data-ui="1a"] .mockup-main .m3d-stage { height: auto !important; min-height: 0; flex: 1; border: none; border-radius: 0; }
html[data-ui="1a"] .mockup-main .mockup-canvas { max-height: none !important; height: 100%; border: none; border-radius: 0; object-fit: contain; }
html[data-ui="1a"] .mockup-side {
  order: 1; max-height: none !important; overflow-y: auto !important; padding: 0; min-height: 0;
  background: var(--surface-panel); border-inline-start: 1px solid var(--t-border); direction: inherit;
  --ctl-h: 34px;
}
html[data-ui="1a"] .mockup-side .mockup-text { height: var(--ctl-h-inline) !important; margin: 0; }
html[data-ui="1a"] .mockup-side .m3d-tools { margin: 0; }
html[data-ui="1a"] .mockup-side .m3d-sec { border: none; border-radius: 0; background: transparent; margin: 0; padding: 0; }
html[data-ui="1a"] .mockup-side .m3d-sec > summary { display: none; }
html[data-ui="1a"] .mockup-side .m3d-sec[open] > .ws-acc__b { display: flex; }
html[data-ui="1a"] .mockup-side .chip, html[data-ui="1a"] .mockup-side .bg-opt, html[data-ui="1a"] .mockup-side select, html[data-ui="1a"] .mockup-side input { font-size: var(--text-sm); }
html[data-ui="1a"] .mockup-side .chips, html[data-ui="1a"] .mockup-side .proj-bar, html[data-ui="1a"] .mockup-side .m3d-dims, html[data-ui="1a"] .mockup-side .mockup-sliders { gap: 6px; row-gap: 6px !important; margin: 0; }
html[data-ui="1a"] .mockup-side .m3d-dims { grid-template-columns: 1fr 1fr 1fr 90px; }
html[data-ui="1a"] .mockup-side .m3d-actions { grid-template-columns: 1fr 1fr; margin: 0; }
html[data-ui="1a"] .mockup-side #m3d-modes { display: flex; flex-wrap: wrap; }
html[data-ui="1a"] .mockup-side .m3d-pricebox { display: none; }
/* environment chips top-left, cameras top-right, over the stage */
html[data-ui="1a"] .ws-pv__env { position: absolute; top: 10px; inset-inline-start: 12px; display: flex; flex-wrap: wrap; gap: 4px; max-width: 60%; z-index: 2; }
html[data-ui="1a"] .ws-pv__cam { position: absolute; top: 10px; inset-inline-end: 12px; display: flex; gap: 4px; z-index: 2; }
html[data-ui="1a"] .ws-pv__env .chip, html[data-ui="1a"] .ws-pv__cam .chip { height: var(--ctl-h-inline) !important; }
html[data-ui="1a"] .ws-pv__env .chips, html[data-ui="1a"] .ws-pv__cam .chips { display: contents; }
html[data-ui="1a"] .mockup-main .m3d-hint { bottom: 8px; }
/* the order block (gift · deliver · copies · CTA · SET · notes) as the gold section */
html[data-ui="1a"] .ws-pv__order { padding: 2px 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--wash-money); }
html[data-ui="1a"] .ws-pv__order .chips { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0; }
html[data-ui="1a"] .ws-pv__order .chips > * { height: auto !important; min-height: 0; }
html[data-ui="1a"] .ws-pv__order .chips > label.control__hint { display: flex; gap: 8px; align-items: center; margin: 0; }
html[data-ui="1a"] .ws-pv__order .cta-sub { margin: 0; }
html[data-ui="1a"] .ws-pv__order > .control__hint { text-align: center; margin: 0; }

/* ── Gate, licence, shortcuts modals: the classic cards, DS radii ──────── */
html[data-ui="1a"] .shortcuts-card { border-radius: var(--radius-2xl); }

/* ── Zen · viewer · embed: the chrome folds away ───────────────────────── */
html[data-ui="1a"].is-zen .ws-menubar, html[data-ui="1a"].is-zen .ws-header, html[data-ui="1a"].is-zen .ws-ctx,
html[data-ui="1a"].is-zen .ws-tools, html[data-ui="1a"].is-zen .rail, html[data-ui="1a"].is-zen .ws-status,
html[data-ui="1a"].is-zen .ws-rb, html[data-ui="1a"].is-zen .trust-strip, html[data-ui="1a"].is-zen .seo-about, html[data-ui="1a"].is-zen .foot,
html[data-ui="1a"].is-viewer .ws-menubar, html[data-ui="1a"].is-viewer .ws-header, html[data-ui="1a"].is-viewer .ws-ctx,
html[data-ui="1a"].is-viewer .ws-tools, html[data-ui="1a"].is-viewer .rail, html[data-ui="1a"].is-viewer .ws-rb,
html[data-ui="1a"][data-embed="1"] .ws-menubar, html[data-ui="1a"][data-embed="1"] .ws-header, html[data-ui="1a"][data-embed="1"] .ws-ctx,
html[data-ui="1a"][data-embed="1"] .ws-tools, html[data-ui="1a"][data-embed="1"] .rail, html[data-ui="1a"][data-embed="1"] .ws-status,
html[data-ui="1a"][data-embed="1"] .ws-rb { display: none !important; }
html[data-ui="1a"][data-rail="collapsed"] .rail { display: none; }

/* ── Small screens: stack, canvas first, controls below (the 900px law) ─── */
@media (max-width: 900px) {
  html[data-ui="1a"] #ui1a { height: auto; min-height: 0; overflow: visible; }
  html[data-ui="1a"] .ws-menubar { flex-wrap: wrap; height: auto; min-height: var(--ws-menubar-h); }
  html[data-ui="1a"] .ws-header { display: flex; flex-wrap: wrap; height: auto; padding: 8px 10px; row-gap: 6px; }
  html[data-ui="1a"] .ws-header__proj { margin-inline-start: 0; }
  html[data-ui="1a"] .ws-ctx { flex-wrap: wrap; height: auto; min-height: var(--ws-ctx-h); row-gap: 4px; padding-block: 4px; }
  html[data-ui="1a"] .ws-body { flex-direction: column; }
  html[data-ui="1a"] .ws-tools { width: 100%; flex-direction: row; padding: 6px 8px; overflow-x: auto; border-inline-end: none; border-bottom: 1px solid var(--t-border); }
  html[data-ui="1a"] .ws-tools__sep { width: 1px; height: 24px; margin: 0 4px; }
  html[data-ui="1a"] .ws-tools__ink { margin-top: 0; margin-inline-start: auto; flex-direction: row; }
  html[data-ui="1a"] .stage { height: 44vh; min-height: 300px; position: sticky; top: 0; z-index: 20; background: var(--surface-page); }
  html[data-ui="1a"] .rail { width: 100%; border-inline-start: none; border-top: 1px solid var(--t-border); }
  html[data-ui="1a"] .ws-rb { display: none; }
  html[data-ui="1a"] .ws-fly, html[data-ui="1a"] .ws-fly--export { inset-inline: 8px; width: auto; top: 96px; }
  html[data-ui="1a"] #mockup-overlay { position: fixed; inset: 0; }
  html[data-ui="1a"] .mockup-body { grid-template-columns: 1fr; grid-template-rows: 46vh minmax(0, 1fr); }
}

/* ── Additions the shell script relies on ───────────────────────────────── */
/* the letter editor floats under the bar: the canvas never shifts (v2.20.1 law) */
html[data-ui="1a"] .ws-letterpop {
  position: absolute; top: 100%; inset-inline: 0; z-index: 9;
  padding: 6px 12px 8px; background: var(--surface-panel); border-bottom: 1px solid var(--t-border);
  box-shadow: var(--shadow-artboard); direction: ltr;
}
html[data-ui="1a"] .ws-letterpop[hidden] { display: none; }
html[data-ui="1a"] .ws-letterpop #letter-panel { border: none; background: transparent; padding: 0; justify-content: flex-start; }
html[data-ui="1a"] .ws-letterpop #letter-dock { display: block; }
/* menubar badges that carry a glyph only */
html[data-ui="1a"] .ws-badge--glyph .chip-label { display: none; }
/* the Companion drawer becomes a flyout under its badge */
html[data-ui="1a"] #copilot-drawer {
  position: absolute; top: 84px; inset-inline-end: 16px; inset-inline-start: auto; z-index: 14;
  width: 360px; max-width: calc(100vw - 32px); height: auto; max-height: calc(100vh - 100px);
  border: 1px solid var(--t-border-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-dropdown);
}
html[data-ui="1a"] body.copilot-open { padding-inline-end: 0; }
html[data-ui="1a"] .ws[data-preview] .ws-rb { display: none; }
html[data-ui="1a"] .ws-tools .ws-tb.is-on, html[data-ui="1a"] .ws-tools .ws-tb[aria-pressed="true"] { background: var(--surface-selected); border-color: var(--gold-700); box-shadow: var(--ring-selected); }
html[data-ui="1a"] .ws-tools #pen-tool.is-on, html[data-ui="1a"] .ws-tools #pen-tool[aria-pressed="true"] { background: var(--surface-selected); border-color: var(--gold-700); box-shadow: var(--ring-selected); }
html[data-ui="1a"] #stage-canvas[data-ws-tool="hand"] { cursor: grab; }
html[data-ui="1a"] #stage-canvas[data-ws-tool="zoom"] { cursor: zoom-in; }
html[data-ui="1a"] .ws-dlhost > [hidden] { display: none; }
html[data-ui="1a"] .ws-ctx .ws-chip.is-open { background: var(--surface-selected); border-color: var(--gold-700); box-shadow: var(--ring-selected); }
html[data-ui="1a"] .ws-acc__b .decor-rail .letter-dock { display: none; }
/* ── Fit at 1280: the document bar's two segmented controls size to their
   labels (330/250 in the brief at 1400+), the bar scrolls sideways rather than
   hiding a control, and one burgundy stays on screen (Sign in is a badge here) ── */
/* no overflow on the main area: it hosts the script/style/mode popovers */
html[data-ui="1a"] .ws-ctx__main { min-width: 0; }
html[data-ui="1a"] .ws-seg--ab, html[data-ui="1a"] .ws-seg--bg { gap: 4px; flex: none; }
html[data-ui="1a"] .ws-seg--ab > button, html[data-ui="1a"] .ws-seg--bg > button { flex: none; padding: 0 9px; letter-spacing: .04em; height: 34px; }
html[data-ui="1a"] .ws-ctx__g[data-ctx~="doc"] .ws-tb { min-width: 30px; padding: 0 6px; }
html[data-ui="1a"] .ws-ctx__g[data-ctx~="doc"] { gap: 4px; }
html[data-ui="1a"] #auth-chip.ws-badge { background: transparent; color: var(--text-accent); border-color: transparent; }
html[data-ui="1a"] .ws-authslot #auth-user { border: none; background: transparent; }
html[data-ui="1a"] #auth-chip.ws-badge:hover { background: rgba(198, 161, 91, .12); }
html[data-ui="1a"] .ws-fly .ws-row > .ws-row { flex: 1 1 100%; min-width: 0; }
html[data-ui="1a"] .ws-fly { overflow-x: hidden; }
html[data-ui="1a"] .ws-seg > button { min-width: 0; padding: 0 6px; }
/* the engine pins its ruler strips to the window at z-index 40, which is above
   the menus (12) and flyouts (14) — under 1a they sit just above the canvas */
html[data-ui="1a"] .ruler-strip { z-index: 8; }
/* body is height:100% + flex column (styles.css): without this the workspace
   SHRINKS to make room for the trust strip and footer instead of the page
   scrolling — the Object menu and the Order CTA were clipped at 640px */
html[data-ui="1a"] #ui1a { flex: 0 0 auto; }

/* ── v3.32.1 (merchant 2026-09-09) ─────────────────────────────────────── */
/* 9. the Text section's boxes line up: a two-column grid, every chip full width */
html[data-ui="1a"] [data-acc="text"] > .ws-acc__b > .ws-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
html[data-ui="1a"] [data-acc="text"] > .ws-acc__b > .ws-row > .chip { width: 100%; margin: 0; justify-content: center; box-sizing: border-box; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="1a"] [data-acc="text"] > .ws-acc__b > .ws-row > .chip[data-text] { grid-column: span 1; }
html[data-ui="1a"] [data-acc="text"] > .ws-acc__b > #text-input { width: 100%; box-sizing: border-box; }
html[data-ui="1a"] [data-acc="text"] > .ws-acc__b > .subcontrol { width: 100%; box-sizing: border-box; }
/* 11. paper sizes */
html[data-ui="1a"] .ws-chip__sub { font-weight: 400; opacity: .7; font-size: var(--text-xs); margin-inline-start: 2px; }
html[data-ui="1a"] .ws-pop--paper { width: 372px; max-height: calc(100vh - 170px); overflow-y: auto; }
html[data-ui="1a"] .ws-pop__row { display: flex; align-items: center; gap: 6px; }
html[data-ui="1a"] .ws-pop__h { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; color: var(--gold-900); margin: 10px 0 4px; }
html[data-ui="1a"] .ws-paper-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
html[data-ui="1a"] .ws-paper {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 42px; padding: 4px 6px; margin: 0; min-width: 0;
  font-family: var(--font-ui); font-size: var(--text-xs); color: var(--ink-950);
  background: var(--surface-control); border: 1px solid var(--border-control); border-radius: var(--radius); cursor: pointer; direction: ltr;
}
html[data-ui="1a"] .ws-paper b { font-size: var(--text-sm); }
html[data-ui="1a"] .ws-paper span { opacity: .75; }
html[data-ui="1a"] .ws-paper:hover { background: var(--gold-100); border-color: var(--gold-500); }
html[data-ui="1a"] .ws-paper.is-on { background: var(--surface-selected); border-color: var(--gold-700); box-shadow: var(--ring-selected); }
html[data-ui="1a"] .ws-paper--wide { flex: 1 1 auto; flex-direction: row; gap: 8px; min-height: 34px; white-space: nowrap; }
html[data-ui="1a"] .ws-seg--orient { flex: 1 1 auto; margin-top: 6px; }
html[data-ui="1a"] .ws-seg--orient > button { flex: 1 1 auto; }
html[data-ui="1a"] .ws-pop__custom { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ivory-300); }
html[data-ui="1a"] .ws-pop__custom input { width: 64px; height: 30px; padding: 0 6px; text-align: center; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--ink-950); background: var(--surface-control); border: 1px solid var(--border-control); border-radius: var(--radius); box-sizing: border-box; }
html[data-ui="1a"] .ws-pop__lbl { font-size: var(--text-xs); font-weight: 600; color: var(--gold-900); margin-inline-end: auto; }
html[data-ui="1a"] .ws-pop__x { color: var(--gold-900); }
html[data-ui="1a"] .ws-lbl { font-size: var(--text-xs); font-weight: 600; letter-spacing: .03em; color: var(--gold-900); white-space: nowrap; }
/* audit 2026-09-09: the shell's toasts carry EN · AR runs — isolate them (bilingual law); a long
   two-run chip wraps per run (<bdi>) instead of clipping its Arabic */
html[data-ui="1a"] #toast { direction: ltr; unicode-bidi: isolate; }
html[data-ui="1a"] #toast [lang="ar"] { unicode-bidi: isolate; }
html[data-ui="1a"] .ws-fly .chip.chip--wrap { white-space: normal; height: auto; min-height: var(--ctl-h-inline); padding-block: 6px; line-height: 1.3; text-align: start; }

/* ── audit 2026-09-09 (design laws) ─────────────────────────────────────── */
/* logical insets resolve against the element's OWN direction: a floating box
   that forced `direction:ltr` stayed on the LTR side under html[dir=rtl] (the
   AR badge). The box inherits the shell direction; its content is isolated. */
html[data-ui="1a"] #copilot-drawer { direction: inherit; }
html[data-ui="1a"] .ws-dd > *, html[data-ui="1a"] .ws-pop > *, html[data-ui="1a"] .ws-fly > *,
html[data-ui="1a"] .ws-rb > *, html[data-ui="1a"] .rail > *, html[data-ui="1a"] .mockup-side > *,
html[data-ui="1a"] #copilot-drawer > * { direction: ltr; unicode-bidi: isolate; }
/* canvas badges only need to beat the sheet — not the menus and popovers above the canvas */
html[data-ui="1a"] .stage-dims, html[data-ui="1a"] .mode-badge, html[data-ui="1a"] .canvas-grip { z-index: 5; }
/* the current-ink ring must read on the night panel too */
html[data-ui="1a"] .ws-inkdot { border-color: var(--t-border-strong); box-shadow: 0 0 0 1px var(--surface-panel); }
html[data-ui="1a"] .ws-sw .ws-sw__b, html[data-ui="1a"] .ws-tools__ink .ws-inkdot { border-color: var(--t-border-strong); }
/* between 1024 and 1279 the text bar loses its unit label before it loses a control */
@media (max-width: 1279px) {
  html[data-ui="1a"] .ws-field .u { display: none; }
}

/* the classic layout's forward switch has no place in 1a (View › Classic layout is the reverse) */
html[data-ui="1a"] #ui-switch-chip { display: none !important; }