/* F. BINSABBAR - Website Editor: LAYOUT ONLY.
 * All chrome (buttons, fields, selects, tags, modals, toasts, segmented nav,
 * brand icons) comes from ../guidelines/fb-ui.css via its real classes, so any
 * kit change auto-reflects. Nothing here re-declares tokens or re-skins kit
 * components - only the app shell (top bar, contextual toolbar), the 3-container
 * screens (Pages / Collections / Products) and their bespoke sub-widgets.
 * var(--token, fallback): the fallback only applies if the kit is absent
 * (the local sandbox demo); when the kit is linked, the kit token wins. */

#ed { position: fixed; inset: 0; display: flex; flex-direction: column;
  background: var(--canvas-bg, #f4eedf); color: var(--text, #0e0e0e); font-size: 14px; overflow: hidden; }
#ed .btn[hidden] { display: none !important; }
.ed-banner { background: var(--accent-soft, rgba(247,72,39,.14)); color: var(--accent, #f74827); text-align: center;
  padding: 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.ed-banner .icon { --icon-size: 13px; vertical-align: -2px; }

/* ---------- primary nav chrome (identity bar) ---------- */
.ed-top { flex: none; display: flex; align-items: center; gap: var(--s-4, 16px); padding: 12px 18px 8px; }
.ed-top-seg { display: flex; align-items: center; gap: var(--s-3, 12px); min-width: 0; }
.ed-top-l { flex: 1; }
/* the editor title (the wordmark is intentionally NOT shown in the editor header per owner review) */
.ed-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; color: var(--text, #0e0e0e); }
/* back-to-hub pill: the kit .back component (matches every other brand-hub tool), sized for the top bar */
.ed-top .back { height: var(--control-h, 44px); padding: 0 16px 0 12px; font-size: 12px; letter-spacing: .04em; }
.ed-top .back .icon { --icon-size: 16px; }
.ed-eyebrow { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint, #5a5a5a); white-space: nowrap; }
/* primary workspace tabs + sub-tab: centered segmented pills (kit .fb-nav is full-width).
   One uniform control height (44px, the house rule) across every button/segment in the chrome. */
.ed-tabs { flex: 0 0 auto; width: auto; height: var(--control-h, 44px); align-self: center; }
.ed-tabs label { flex: 0 0 auto; padding: 0 22px; }
/* Navigation Menu|Footer toggle (W4b-1): merged INTO the toolbar's left zone (Zone A), inline with the
   device toggle - it replaces the old separate slim sub-tab row (W4-8) and the redundant Menu context
   label. Styled as a toolbar segment (.ed-seg); syncNavChrome() toggles [hidden] so it shows only on a
   Navigation surface. fb-nav sets display:flex, so the [hidden] collapse needs an explicit rule. */
.ed-navseg[hidden] { display: none; }
/* the six real screen radios live hidden; the visible chrome above drives them */
.ed-screens[hidden] { display: none; }
.ed-top .btn { white-space: nowrap; }

/* right action cluster: two menus, a hairline divider, then the two site-level actions.
   min-width:max-content OVERRIDES the `.ed-top-seg{min-width:0}` above so the cluster can
   never shrink below its content: with the old min-width:0 it collapsed under the flex:1
   basis and its right-aligned (justify-content:flex-end) nowrap buttons overflowed LEFTWARD,
   painting the Store button over the Navigation tab and stealing its clicks (~900-1130px).
   Content-sized, it stays right of the centred tabs at every width; when there is free room
   both flex:1 sides still balance so the tabs stay viewport-centred. */
.ed-cluster { flex: 1; min-width: max-content; justify-content: flex-end; gap: var(--s-2, 8px); }
.ed-divider { flex: none; width: 1px; height: 22px; background: var(--control-border, rgba(0,0,0,.10)); margin: 0 var(--s-2, 8px); }
/* Store / Tools popover trigger (kit .btn.outline) + rotating caret */
.ed-more { height: var(--control-h, 44px); font-size: 12px; padding: 0 14px; gap: 7px; }
.ed-more .icon { --icon-size: 15px; }
.ed-more-caret { transition: transform .18s ease; }
.ed-more[aria-expanded="true"] .ed-more-caret { transform: rotate(180deg); }
/* Store-surface active state: mirror the selected-tab on-state so a Store screen reads as the
   active surface while the tab group intentionally shows no selection (D-LOCK-4). */
.ed-more.active { background: #fff; color: var(--text, #0e0e0e); font-weight: 500; box-shadow: inset 0 0 0 1px var(--control-border, rgba(0,0,0,.10)); }
.ed-more.active:hover { background: #fff; color: var(--text, #0e0e0e); box-shadow: inset 0 0 0 1px var(--control-border, rgba(0,0,0,.10)); }
/* popover group caption + the opens-new-tab affordance on Tools items */
.ed-menu-cap { margin: 4px 12px; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint, #5a5a5a); }
.ed-ext { margin-inline-start: auto; flex: none; color: var(--text-faint, #5a5a5a); --icon-size: 13px; }
.popover-item:hover .ed-ext { color: var(--on-danger, #fee5a5); }
@media (prefers-reduced-motion: reduce) { .ed-more-caret { transition: none; } }

/* ---------- contextual toolbar ---------- */
.ed-bar { flex: none; display: flex; align-items: center; gap: var(--s-3, 12px); padding: 4px 18px 12px; }
.ed-bar[hidden] { display: none; }
/* left = primary tools, right = primary actions: both sized to content so they never overflow
   into the centre; the centre (page name + status + toggles) flexes to absorb the slack and
   centres, truncating the page name first. This removes the old flex:1 / min-width:0 overlap. */
.ed-bar-l, .ed-bar-c, .ed-bar-r { display: flex; align-items: center; gap: var(--s-2, 8px); }
.ed-bar-l { flex: 0 0 auto; }
.ed-bar-c { flex: 1 1 auto; justify-content: center; min-width: 0; }
.ed-bar-r { flex: 0 0 auto; justify-content: flex-end; }
.ed-pagename, .ed-ctxname { font-weight: 500; letter-spacing: .04em; font-size: 13px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Zone A/B groups: both content-sized on the left; the centre absorbs the slack */
.ed-ctx, .ed-edit { flex: 0 0 auto; }
.ed-ctxbtn .icon { --icon-size: 15px; }
/* unified save-state chip (Zone A): monochrome - accent = needs action, faint = done. A leading
   dot echoes the state; the label crossfades. min-width reserves room so it never jumps the row. */
.ed-dirty { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent, #f74827); opacity: 0; transition: opacity .12s; min-width: 12px; }
.ed-dirty::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; opacity: 0; transition: opacity .12s; }
.ed-dirty.on, .ed-dirty.saved { opacity: 1; }
.ed-dirty.on::before, .ed-dirty.saved::before { opacity: 1; }
.ed-dirty.saved { color: var(--text-faint, #5a5a5a); }
/* More overflow popover (Zone B): kit .iconbtn trigger + kit .popover panel. One uniform 44px height
   across every toolbar icon button (More, undo, redo, the House Writer pen) so the row reads level. */
.ed-morebtn, .ed-histbtn, .ed-aibtn { width: var(--control-h, 44px); height: var(--control-h, 44px); }
.ed-morebtn .icon { --icon-size: 18px; }
.ed-histbtn .icon { --icon-size: 17px; }
.ed-aibtn .icon { --icon-size: 18px; }
.ed-morewrap .popover-item .ico .icon { --icon-size: 16px; }
.ed-hint { font-size: 11px; color: var(--text-faint, #5a5a5a); }
/* undo / redo icon buttons share the same visual weight as their neighbours; disabled reads quiet */
.ed-histbtn[disabled] { opacity: .4; cursor: not-allowed; }
/* The House Writer (W4-4 / W4b-3): a ROUND button carrying the house motif star, but a VISUAL PEER of
   the neighbouring toolbar icon buttons (undo / redo) - it inherits the kit .iconbtn colour + hover
   verbatim and drops every bespoke accent tint/fill. Only the circle shape is asserted (the kit
   .iconbtn is already round; kept explicit per contract). 44px height comes from the shared rule above. */
.ed-aibtn { border-radius: 50%; border: 1px solid var(--control-border, rgba(0,0,0,.16)); background: var(--glass-bg, rgba(255,255,255,.55)); }
.ed-aibtn:hover { border-color: var(--accent, #f74827); }

/* buttons in bars: kit .btn / .btn.outline at the house 44px control height */
.ed-bar .btn, .ed-top .btn { height: var(--control-h, 44px); font-size: 12px; padding: 0 15px; }
.ed-bar .btn .icon, .ed-top .btn .icon { --icon-size: 15px; }
.ed-mini { height: var(--control-h, 44px) !important; font-size: 11px !important; padding: 0 12px !important; }
/* toolbar segmented controls: content-width (not full-width), one uniform 44px height */
.ed-seg { flex: 0 0 auto; width: auto; height: var(--control-h, 44px); }
.ed-seg label { flex: 0 0 auto; padding: 0 16px; }
/* device segment (W4-3): icon-only labels (Desktop / Tablet / Mobile); the words live on each
   radio's aria-label + label title. A hair wider tap target than a text label, icon centred. */
.ed-devseg label { padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; }
.ed-devseg label .icon { --icon-size: 18px; }
/* Templates: PLP | PDP side toggle lives in the rail - full width, tight labels */
.ed-tplside { width: 100%; height: var(--control-h, 44px); margin-top: 8px; }
.ed-tplside label { flex: 1; padding: 0 8px; font-size: 11px; }
/* Templates middle pane = block outline + settings stacked in one scroll body */
.ed-tplbuild .ed-subhead { font-size: 10px; }

/* ---------- per-screen 3-container body ---------- */
.ed-wrap { flex: 1; min-height: 0; display: grid; gap: var(--s-3, 12px); padding: 0 18px 18px; }
.ed-wrap[hidden] { display: none; }
.ed-wrap[data-screen="pages"] { grid-template-columns: 300px minmax(0, 1fr) 360px; }
.ed-wrap[data-screen="collections"] { grid-template-columns: 280px minmax(320px, 460px) minmax(0, 1fr); }
.ed-wrap[data-screen="products"] { grid-template-columns: 280px minmax(0, 1fr) 340px; }
.ed-wrap[data-screen="menu"] { grid-template-columns: 300px minmax(320px, 520px) minmax(0, 1fr); }
.ed-wrap[data-screen="footer"] { grid-template-columns: 300px minmax(320px, 520px) minmax(0, 1fr); }
.ed-wrap[data-screen="templates"] { grid-template-columns: 280px minmax(320px, 460px) minmax(0, 1fr); }
/* full-screen preview: drop both side panels, canvas takes the full width */
.ed-wrap.fullscreen { grid-template-columns: 1fr !important; }
.ed-wrap.fullscreen .ed-rail, .ed-wrap.fullscreen .ed-drawer { display: none; }
.ed-fs.active { background: var(--accent, #f74827); color: var(--on-danger, #fee5a5); }
.ed-fs.active:hover { background: var(--accent, #f74827); }

.ed-pane { background: rgba(255,255,255,.66); border: 1px solid var(--control-border, rgba(0,0,0,.10));
  border-radius: var(--radius-card, 16px); display: flex; flex-direction: column; overflow: hidden; min-width: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.ed-pane-h { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2, 8px);
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.06)); min-height: 48px; }
.ed-pane-b { flex: 1; overflow-y: auto; padding: 14px; }
.ed-count { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint, #5a5a5a); }
.ed-link { display: inline-flex; align-items: center; min-height: var(--control-h, 44px); color: var(--accent, #f74827); text-decoration: none; cursor: pointer; }
.ed-link[hidden] { display: none; }
/* list-empty states consume the kit .search-empty (centered muted block); no bespoke .ed-empty. */
/* W6-3: a modal search input is a direct child of the kit .modal-body, which is a COLUMN flexbox. With
   the default flex-shrink:1 the input collapsed from its 44px control height to its 17px min-content
   whenever the list below overflowed (the Pages modal squash the owner flagged). Pin flex:none so the
   kit .text-input keeps its control height; harmless (no-op) in the block-flow rails. */
.ed-search { margin-bottom: 12px; flex: none; }

/* ---------- canvas (live website preview) ---------- */
.ed-canvas { background: rgba(255,255,255,.4); }
.ed-canvas-note { color: var(--accent, #f74827); }
.ed-canvas-stage { flex: 1; min-height: 0; display: flex; align-items: stretch; justify-content: center;
  padding: 14px; overflow: hidden; background: var(--sand, #e6e1d8); }
.ed-canvas-scroll { overflow: auto; align-items: flex-start; }
.ed-frame { background: #fff; box-shadow: 0 12px 40px rgba(0,0,0,.16); width: 100%; max-width: none;
  border-radius: 8px; overflow: hidden; align-self: stretch; display: block; position: relative; }
/* Every preview is the real storefront iframe at a governed device width. JavaScript scales the
   iframe to fit this stage without changing its internal layout viewport. */
.ed-frame iframe { width: 1280px; height: 100%; border: 0; display: block; background: #fff; transform-origin: top left; }

/* ---------- block outline (Pages / Layouts) ---------- */
/* the outline is a flex column so every row is separated by the ONE list-gap token (no per-row margin);
   #ed-tpl-outline mirrors it on the Layouts builder pane. */
#ed-outline, #ed-tpl-outline { display: flex; flex-direction: column; gap: var(--ed-list-gap, 8px); }
.ed-blk { display: flex; align-items: center; gap: 8px; padding: 0 10px; min-height: var(--ed-row-min, 44px); cursor: grab;
  border: 1px solid var(--line-soft, rgba(0,0,0,.07)); border-radius: var(--radius-md, 12px); background: var(--glass-bg, rgba(255,255,255,.55));
  transition: border-color .15s, background .15s; }
/* Selection follows the kit .mat.selected / Markets .mr-mkt.is-sel convention: the hairline turns
   accent (no soft fill), so a selected row reads like every other BOH list. */
.ed-blk.sel { border-color: var(--accent, #f74827); }
.ed-blk.has-error { border-color: var(--accent, #f74827); background: var(--accent-soft, rgba(247,72,39,.12)); }
.ed-blk-req { flex: none; }
.ed-blk.hover:not(.sel) { border-color: var(--accent, #f74827); }
.ed-blk.hidden { opacity: .6; }
.ed-blk.hidden .nm { text-decoration: line-through; text-decoration-color: var(--text-faint, #5a5a5a); color: var(--text-faint, #5a5a5a); }
.ed-blk.drag { opacity: .4; }
.ed-blk .grip { color: var(--text-faint, #5a5a5a); display: inline-flex; flex: none; }
.ed-blk .grip .icon { --icon-size: 15px; }
/* W5-0: the name + its Required pill share a flex-wrap group that TAKES the row's free space and pushes
   the actions to the edge. The name keeps its content width (flex 0 1 auto); the pill wraps to a second
   line when the two cannot sit together, so a required row's name is never crushed to a single letter.
   Ellipsis (+ the title tooltip) is the last resort only when the name alone overflows the row. */
.ed-blk-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; }
.ed-blk .nm { flex: 0 1 auto; min-width: 0; font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-blk .acts { display: flex; gap: 2px; flex: none; }
.ed-blk .acts .iconbtn { width: var(--control-h, 44px); min-width: var(--control-h, 44px); height: var(--control-h, 44px); }
.ed-blk .acts .iconbtn .icon { --icon-size: 15px; }
/* compact count pill (owner: smaller pill on tiles) - stays a kit .tag.accent (accent-soft fill,
   accent text), just tighter and count-only; the x glyph is dropped in the render sites. */
.ed-error-tag { flex: none; height: 18px; min-width: 18px; padding: 0 5px; justify-content: center; font-size: 10px; letter-spacing: .02em; }
/* per-row overflow (W4-5): grip + name + eye stay inline; duplicate / up / down / delete move into
   this one shared kit .popover, opened next to the row's "..." button and positioned in JS (position
   is fixed so it never clips against the rail's scroll box). Visibility + focus-ring come from the kit
   + the P0 popover rules; this only pins it and gives it a sensible min-width. */
.ed-rowpop { position: fixed; top: 0; left: 0; min-width: 172px; z-index: 9200; }
.ed-rowpop .popover-item .ico .icon { --icon-size: 15px; }
/* press-and-hold reorder (W4-5): after ~300ms the whole list arms and the rows wiggle iOS-style
   (a tiny rotation, alternating phase per row); the row being dragged holds still. Drop / release /
   Esc disarms (JS drops .ed-reorder). Reduced motion gets a static lift + shadow instead. */
@keyframes ed-wiggle   { 0%, 100% { transform: rotate(-0.6deg); } 50% { transform: rotate(0.6deg); } }
@keyframes ed-wiggle-2 { 0%, 100% { transform: rotate(0.6deg); }  50% { transform: rotate(-0.6deg); } }
.ed-reorder .ed-blk { animation: ed-wiggle 0.26s ease-in-out infinite; }
.ed-reorder .ed-blk:nth-child(2n) { animation-name: ed-wiggle-2; }
.ed-reorder .ed-blk.drag { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ed-reorder .ed-blk { animation: none; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.16); }
}
.ed-add { width: 100%; height: var(--control-h, 44px); margin-top: 6px; border: 1px dashed var(--control-border, rgba(0,0,0,.2));
  border-radius: var(--radius-sm, 8px); color: var(--text-muted, #3a3a3a); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 8px; background: none; cursor: pointer; }
.ed-add .icon { --icon-size: 14px; }
.ed-add:hover { border-color: var(--accent, #f74827); color: var(--text, #0e0e0e); }
/* keyboard focus ring on the block outline (accessible tree) */
.ed-blk:focus-visible { outline: 2px solid var(--accent, #f74827); outline-offset: 1px; }
/* required-block affordance: a real kit .tag (rendered by renderOutline), not a hand-rolled pill. */
/* undo/redo button group in the toolbar */
.ed-histgrp { display: inline-flex; gap: 4px; }
#ed-paletteSearch { margin-bottom: 14px; }

/* ---------- grouped Blocks palette (titled groups + auto-fill chip) ---------- */
.ed-palgroups { display: flex; flex-direction: column; gap: 20px; }
.ed-palgroup-h { display: block; margin-bottom: 10px; }
.ed-palcard-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* the palette "Fills automatically" chip is a real kit .tag (see palCard); no bespoke pill here. */

/* ---------- generic list rows (Pages modal / Collections / Products / Menu) ---------- */
/* every row list shares ONE vertical gap token. The Menu items list renders bare .ed-lrow rows into a
   non-.ed-list host with no per-row margin, so it is made a flex column with the same gap - this is the
   "missing list gaps" the owner saw on the Navigation screen. The .ed-rep / .ed-linkgrp card lists carry
   their spacing as a margin (below), tokenised to the SAME value so every list reads on one rhythm. */
.ed-list, #ed-menuList { display: flex; flex-direction: column; gap: var(--ed-list-gap, 8px); }
/* Selectable list row = the kit / Markets .mr-mkt idiom: a soft rounded card that lifts on hover and
   whose border turns accent when selected (no soft fill), so it reads as a BOH sibling. */
.ed-lrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: var(--ed-row-min-th, 56px);
  border: 1px solid var(--line-soft, rgba(0,0,0,.07)); border-radius: var(--radius-card, 16px); background: var(--glass-bg, rgba(255,255,255,.55));
  cursor: pointer; transition: border-color .15s, transform .15s; text-align: start; }
.ed-lrow:hover { border-color: var(--control-border, rgba(0,0,0,.18)); transform: translateY(-1px); }
.ed-lrow.on { border-color: var(--accent, #f74827); }
.ed-lrow .th { width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm, 8px); background: var(--sand, #e6e1d8) center/cover; overflow: hidden; }
.ed-lrow .tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.ed-lrow .tx b { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-lrow .tx span { font-size: 11px; color: var(--text-faint, #5a5a5a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* inline row actions (Menu items list) */
.ed-lrow .acts { display: flex; gap: 2px; margin-inline-start: auto; flex: none; }
.ed-lrow .acts .iconbtn { width: var(--control-h, 44px); height: var(--control-h, 44px); }
.ed-lrow .acts .iconbtn .icon { --icon-size: 14px; }
/* link-picker results carry a small kind tag */
.ed-linklist .tag { margin-inline-start: auto; flex: none; }

/* subheads inside a pane body (Menu / Footer) */
.ed-subhead { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint, #5a5a5a);
  margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--line-soft, rgba(0,0,0,.06)); }
.ed-pane-b > .ed-subhead:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* link field: input + a "pick" button that opens the destination picker */
.ed-linkrow { display: flex; gap: 8px; align-items: center; }
.ed-linkrow .text-input { flex: 1; min-width: 0; }
.ed-linkbtn { flex: none; width: 44px; height: 44px; padding: 0; }
.ed-linkbtn .icon { --icon-size: 16px; }
/* a link group = label + route + remove (Menu / Footer link lists) */
/* Nested link sub-card = the kit .glass-card (bg / shadow / radius come from the kit surface token, not
   a hardcoded fill). The nested backdrop-filter is dropped because its parent .ed-rep is itself a
   .glass-card - this keeps the kit look but avoids a double-frost (the Safari nested-backdrop-filter
   gotcha). Layout only below. */
.ed-linkgrp { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; margin-bottom: var(--ed-list-gap, 8px);
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.ed-linkgrp-h { display: flex; align-items: center; justify-content: space-between; }
.ed-linkgrp-h .t { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint, #5a5a5a); }
.ed-linkgrp-h .iconbtn { width: var(--control-h, 44px); height: var(--control-h, 44px); }
.ed-linkgrp-h .iconbtn .icon { --icon-size: 13px; }

/* ---------- page rows in the Pages modal ---------- */
.ed-prow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px;
  border: 1px solid var(--line-soft, rgba(0,0,0,.07)); border-radius: var(--radius-md, 12px); background: #fff; cursor: pointer; margin-bottom: 6px; }
.ed-prow.on { border-color: var(--accent, #f74827); }
.ed-prow .pt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ed-prow .pt b { font-size: 13px; font-weight: 500; }
.ed-prow .pt span { font-size: 11px; color: var(--text-faint, #5a5a5a); }
/* redesigned Pages modal rows (kit .ed-lrow + page icon + status) */
.ed-prow2 { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px 12px; cursor: default; }
.ed-prow2.has-error { border-color: var(--accent, #f74827); background: var(--accent-soft, rgba(247,72,39,.12)); }
.ed-prow2.has-error .ed-prow2-ic { border-color: var(--accent, #f74827); color: var(--accent, #f74827); }
.ed-prow2-ic { width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm, 8px); background: var(--sand, #e6e1d8); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted, #3a3a3a); cursor: pointer; }
.ed-prow2-ic .icon { --icon-size: 18px; }
.ed-prow2-ic:hover, .ed-prow2-ic[aria-expanded="true"] { border-color: var(--accent, #f74827); color: var(--text, #0e0e0e); }
.ed-page-open { min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.ed-page-open:focus-visible, .ed-prow2-ic:focus-visible, .ed-page-iconchoice:focus-visible { outline: 2px solid var(--accent, #f74827); outline-offset: 2px; }
.ed-prow2 .tag { flex: none; margin-inline-start: auto; }
/* Your-pages row right cluster: BUILT-IN chip + status tag grouped at the trailing edge */
.ed-prow2-r { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex: none; }
.ed-prow2-r .tag { margin-inline-start: 0; }
.ed-page-error-count { min-width: 20px; justify-content: center; margin-inline-start: 2px; }
.ed-page-error-count[hidden] { display: none; }
#ed-pageSearch { margin-bottom: 12px; }

/* ---------- Pages: two-group index (Normal / Built-in) ---------- */
.ed-pgroup { margin-bottom: 14px; }
.ed-pgroup:last-child { margin-bottom: 0; }
.ed-pgroup-h { width: 100%; min-height: var(--control-h, 44px); display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 0 8px; border: 0; border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.08)); background: transparent; font: inherit; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; text-align: start; color: var(--text-faint, #5a5a5a); font-weight: 500; cursor: pointer; }
.ed-pgroup-h .ed-count { margin-inline-start: auto; }
.ed-pgroup-h > .icon { --icon-size: 14px; transition: transform .16s ease; }
.ed-pgroup-h[aria-expanded="true"] > .icon { transform: rotate(180deg); }
.ed-pgroup-body[hidden] { display: none; }
.ed-pgroup-sub { text-transform: none; letter-spacing: .02em; font-size: 11px; color: var(--text-faint, #5a5a5a); }
.ed-page-iconpanel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 6px; padding: 10px; border-top: 1px solid var(--line-soft, rgba(0,0,0,.08)); background: var(--control-bg-2, rgba(0,0,0,.03)); border-radius: var(--radius-sm, 8px); }
.ed-page-iconpanel[hidden] { display: none; }
.ed-page-iconchoice { min-width: 44px; width: 100%; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--control-border, rgba(0,0,0,.12)); border-radius: var(--radius-sm, 8px); background: var(--control-bg, #fff); color: var(--text-muted, #3a3a3a); cursor: pointer; }
.ed-page-iconchoice:hover, .ed-page-iconchoice.on { border-color: var(--accent, #f74827); color: var(--text, #0e0e0e); }
.ed-page-iconchoice .icon { --icon-size: 18px; }

.ed-chip-custom {
  border-color: var(--line-soft, rgba(0,0,0,.10));
  background: var(--control-bg-2, rgba(0,0,0,.03));
}

.ed-custom-section-link {
  width: 100%;
  min-height: var(--s-9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 0 12px;
  border: 1px solid var(--line-soft, rgba(0,0,0,.10));
  border-radius: var(--radius-sm, 8px);
  background: var(--control-bg, #fff);
  color: var(--text, #0e0e0e);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.ed-custom-section-link:hover,
.ed-custom-section-link:focus-visible {
  border-color: var(--accent, #f74827);
}

.ed-custom-section-link .icon { --icon-size: 14px; }
.ed-custom-intro { margin: 0 0 18px; }
.ed-custom-section { scroll-margin-top: 12px; }
.ed-custom-section + .ed-custom-section { margin-top: 26px; }

.ed-custom-question,
.ed-custom-option {
  margin-top: 10px;
  border: 1px solid var(--line-soft, rgba(0,0,0,.10));
  border-radius: var(--radius-sm, 8px);
  background: var(--control-bg-2, rgba(0,0,0,.03));
}

.ed-custom-question > summary,
.ed-custom-option > summary {
  min-height: var(--s-9);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  cursor: pointer;
  font-weight: 500;
}

.ed-custom-question > summary .tag,
.ed-custom-option > summary .tag { margin-inline-start: auto; }
.ed-custom-question[open] > summary,
.ed-custom-option[open] > summary { border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.10)); }
.ed-custom-question > .field,
.ed-custom-question > .ed-subhead,
.ed-custom-question > .ed-custom-option { margin-inline: 12px; }
.ed-custom-question > .field:first-of-type { margin-top: 14px; }
.ed-custom-question > .ed-custom-option:last-child { margin-bottom: 12px; }
.ed-custom-option > .field,
.ed-custom-option > .ed-custom-weight { margin-inline: 12px; }
.ed-custom-option > .field:first-of-type { margin-top: 14px; }
.ed-custom-option > .ed-custom-weight:last-child { margin-bottom: 12px; }
.ed-custom-weight { padding-top: 10px; border-top: 1px solid var(--line-soft, rgba(0,0,0,.08)); }
.ed-custom-weight > strong { display: block; margin-bottom: 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ed-custom-profile { padding: 12px; border: 1px solid var(--line-soft, rgba(0,0,0,.10)); border-radius: var(--radius-sm, 8px); background: var(--control-bg-2, rgba(0,0,0,.03)); }
.ed-custom-profile + .ed-custom-profile { margin-top: 8px; }
/* BUILT-IN chip is a real kit .tag (see renderPageList); this only sizes its small lock glyph + gap so
   a machinery page reads as carrying live store machinery. No bespoke pill styling. */
.ed-chip-sys { display: inline-flex; align-items: center; gap: 4px; }
.ed-chip-sys .icon { --icon-size: 11px; }
/* Legal row reuses .ed-sysrow (not a page): transparent, hairline-ruled, muted - it can never be
   mistaken for a page. */
.ed-sysrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: var(--ed-row-min-th, 56px); border-top: 1px solid var(--line-soft, rgba(0,0,0,.06)); background: transparent; }
.ed-sysrow:last-child { border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.06)); }
.ed-sysrow .ed-prow2-ic { background: transparent; box-shadow: inset 0 0 0 1px var(--line-soft, rgba(0,0,0,.10)); }
.ed-sysrow .tx { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.ed-sysrow .tx b { font-size: 13px; font-weight: 500; color: var(--text-muted, #3a3a3a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-sysrow .tx span { font-size: 11px; color: var(--text-faint, #5a5a5a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-sysrow-r { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; flex: none; }
.ed-sysrow-r .btn .icon { --icon-size: 13px; }

/* built-in wrapper read-only value in Page settings */
.ed-sysval { padding: 9px 12px; border: 1px solid var(--line-soft, rgba(0,0,0,.10)); border-radius: var(--radius-sm, 8px);
  background: rgba(0,0,0,.03); font-size: 13px; color: var(--text-muted, #3a3a3a); }
/* filter + sort row on the Collections / Products rails */
.ed-filterbar { display: flex; gap: var(--ed-list-gap, 8px); margin-bottom: 12px; }
.ed-mini-sel { flex: 1; min-width: 0; height: var(--control-h, 44px); font-size: 12px; padding: 0 10px; }

/* ---------- settings form fields (shared) ---------- */
.field { margin-bottom: 14px; }
.field > label { display: block; margin-bottom: 6px; }
/* inline checkbox row (e.g. Menu item "Direct link" toggle): the bare checkbox is relit by the kit
   into its canonical pill toggle (fb-ui.css :root input[type=checkbox]), so it reads like every other
   BOH switch. The old width:16px override was dead (kit :root wins on specificity) - removed. */
.field > label.ed-check { display: flex; align-items: center; gap: 8px; min-height: var(--control-h, 44px); margin-bottom: 0; cursor: pointer; font-size: 13px; text-transform: none; letter-spacing: 0; }
/* "insert variable" affordance on token-capable fields + the picker rows */
.ed-varbtn { float: right; min-height: var(--control-h, 44px); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent, #f74827);
  background: var(--accent-soft, rgba(247,72,39,.12)); border-radius: var(--radius-pill, 999px); padding: 2px 9px; cursor: pointer; line-height: 1.7; }
.ed-varbtn:hover { background: var(--accent, #f74827); color: var(--on-danger, #fee5a5); }
/* helper line under a control (schema field `info`) */
.ed-fieldinfo { font-size: 11px; line-height: 1.5; color: var(--text-faint, #5a5a5a); margin-top: 6px; }
.field > .ed-fieldinfo:first-child { margin-top: 0; }
.field.has-error > label { color: var(--accent, #f74827); }
.field.has-error > .text-input,
.field.has-error > .fb-select,
.field.has-error > .v-input,
.field.has-error > .ed-linkrow .text-input,
.field.has-error > .ed-med .text-input { border-color: var(--accent, #f74827); box-shadow: 0 0 0 1px var(--accent, #f74827); background: var(--accent-soft, rgba(247,72,39,.12)); }
.field.has-error > [data-list] { border-inline-start: 2px solid var(--accent, #f74827); padding-inline-start: 8px; }
.ed-field-error { display: flex; align-items: flex-start; gap: 5px; margin-top: 6px; color: var(--accent, #f74827); font-size: 11px; line-height: 1.45; }
.ed-field-error .icon { --icon-size: 11px; flex: none; margin-top: 2px; }
/* richtext (markdown) formatting toolbar */
.ed-rt-tb { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ed-rt-b { width: var(--control-h, 44px); height: var(--control-h, 44px); padding: 0; border: 1px solid var(--control-border, rgba(0,0,0,.14)); border-radius: var(--radius-sm, 8px);
  background: #fff; color: var(--text, #0e0e0e); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ed-rt-b:hover { border-color: var(--accent, #f74827); color: var(--text, #0e0e0e); }
.ed-rt-b .icon { --icon-size: 14px; }
/* skeleton loaders for async panels: the shimmering bars consume the kit .skel / .skel-text
   primitives (one shared 100deg shimmer, already reduced-motion + dark-theme aware). The ed-skel-*
   classes are size-only layout modifiers on top - no bespoke shimmer. */
.ed-skel { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.ed-skel-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--line-soft, rgba(0,0,0,.06)); border-radius: var(--radius-md, 12px); }
.ed-skel-th { width: 40px; height: 40px; flex: none; }
.ed-skel-tx { flex: 1; }
@keyframes ed-shimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }
#ed-mediaSearch { margin: 10px 0; }
/* pre-publish validation issues = the kit .note callout (accent = the one attention hue for both must-fix
   and warnings, staying monochrome). .ed-vissue is layout-only: it aligns the leading icon beside the
   wrapping text; the surface (bg / border / radius / colour) is the kit .note. */
.ed-vissue { display: flex; gap: 8px; align-items: flex-start; }
.ed-vissue .icon { --icon-size: 14px; flex: none; margin-top: 2px; }
/* Translation preflight notices are INFORMATIONAL - publishing never blocks on translations, so they
   must not read as the accent-red must-fix .note. .is-info repaints the same layout in the amber
   --warning hue: a calm heads-up, not an error. (Scoped here in editor.css; shared fb-ui.css untouched.) */
.note.is-info { background: var(--warning-soft); border-left-color: var(--warning); }
.ed-vissue.is-info .icon { color: var(--warning); }
.ed-validate-intro { margin: 0 0 12px; }
/* Actionable publish-validation cards (W3). Neutral card surface; severity is carried by the
   label + icon AND a small edge (never colour alone). Long copy wraps; nothing scrolls sideways. */
.ed-vgroup { display: flex; flex-direction: column; gap: 8px; }
.ed-vgroup + .ed-vgroup { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--control-border, rgba(0,0,0,.1)); }
.ed-vgroup-h { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted, rgba(0,0,0,.6)); }
.ed-vcard { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  background: var(--glass-bg, rgba(255,255,255,.55));
  border: 1px solid var(--control-border, rgba(0,0,0,.12));
  border-inline-start-width: 3px; border-radius: var(--radius-sm, 8px); min-width: 0; }
.ed-vcard.is-error { border-inline-start-color: var(--accent); }
.ed-vcard .ed-vcard-ic { --icon-size: 12px; flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--control-border, rgba(0,0,0,.18)); margin-top: 1px; }
.ed-vcard.is-error .ed-vcard-ic { border-color: var(--accent); color: var(--accent); }
.ed-vcard-main { flex: 1; min-width: 0; }
.ed-vcard-title { margin: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.ed-vcard-loc { margin: 3px 0 0; font-size: 11px; color: var(--text-muted, rgba(0,0,0,.55)); overflow-wrap: anywhere; }
/* Side column reads as one inline row (severity tag + action), vertically centred on the card,
   so cards keep a single visual line on desktop instead of a narrow stacked column. */
.ed-vcard-side { display: flex; flex-direction: row; align-items: center; align-self: center; gap: 10px; flex: none; }
/* Mobile: the wide validation modal becomes a near-full-height sheet with 16px safe spacing;
   header and actions stay pinned, only the body scrolls (same kit scroll model). */
@media (max-width: 720px) {
  #ed-validateModal { width: calc(100vw - 32px); max-height: calc(100dvh - 32px); height: calc(100dvh - 32px); }
  .ed-vcard { flex-wrap: wrap; }
  .ed-vcard-side { flex-direction: row; align-items: center; width: 100%; justify-content: flex-end; }
}
/* the .ed-lrow list row reads a kit surface token (--glass-bg), matching the Markets .mr-mkt sibling
   row - no hardcoded #fff, so it stays token-accurate and theme-safe. */
button.ed-lrow { width: 100%; text-align: start; background: var(--glass-bg, rgba(255,255,255,.55)); font: inherit; }
.ed-med { display: flex; gap: 8px; align-items: center; }
.ed-medthumb { width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--control-border, rgba(0,0,0,.12)); background: var(--sand, #e6e1d8); overflow: hidden; }
.ed-medthumb img, .ed-focal > img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
/* focal-point picker */
.ed-focalwrap { margin-top: 10px; }
.ed-focal { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--control-border, rgba(0,0,0,.12)); background: var(--sand, #e6e1d8) center/cover; cursor: crosshair; overflow: hidden;
  display: block; padding: 0; color: inherit; font: inherit; }
.ed-focal-dot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid #fff; background: var(--accent, rgba(247,72,39,.92)); box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.4); pointer-events: none; }
.ed-focal-hint { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--text-faint, #5a5a5a); }
.ed-focal-hint .icon { --icon-size: 14px; }
.ed-focal-reset { min-height: var(--control-h, 44px); background: none; border: 0; color: var(--accent, #f74827); cursor: pointer; font: inherit; text-decoration: underline; padding: 0 8px; }
/* Repeater card (column / tile / social / featured card) = the kit .glass-card: its bg / shadow / radius
   all come from the kit surface token, not a hardcoded fill. Layout only below (padding + the list-gap). */
.ed-rep { padding: 14px; margin-bottom: var(--ed-list-gap, 8px); }
.ed-rep:last-child { margin-bottom: 0; }
.ed-rep .rh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ed-rep .rh .t { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint, #5a5a5a); }
.ed-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- media picker ---------- */
.ed-drop { border: 1.5px dashed var(--control-border, rgba(0,0,0,.22)); border-radius: var(--radius-md, 12px);
  text-align: center; transition: border-color .15s, background .15s; }
.ed-drop label { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 22px; }
.ed-drop-ic { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sand, #e6e1d8); color: var(--text-muted, #3a3a3a); }
.ed-drop-ic .icon { --icon-size: 20px; }
.ed-drop-t { font-size: 13px; color: var(--text, #0e0e0e); }
.ed-drop-t u { text-underline-offset: 2px; }
.ed-drop-s { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint, #5a5a5a); }
/* the file input stays keyboard-reachable (visually hidden, not display:none) so a keyboard
   user can open the picker with Enter/Space; the drop zone shows the focus ring via :focus-within */
.ed-drop input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; }
.ed-drop.drag { border-color: var(--accent, #f74827); background: var(--accent-soft, rgba(247,72,39,.08)); }
.ed-medhead { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; margin-bottom: 4px; }
.ed-urlrow { display: flex; gap: 8px; margin-top: 12px; }
.ed-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 16px; max-height: 44vh; overflow: auto; }
.ed-mgrid-modal { max-height: none; }
.ed-mtile { aspect-ratio: 1; border: 1px solid var(--control-border, rgba(0,0,0,.12)); border-radius: var(--radius-sm, 8px);
  overflow: hidden; background: var(--sand, #e6e1d8); padding: 0; cursor: pointer; }
.ed-mtile:hover { border-color: var(--accent, #f74827); }
.ed-mtile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* media tile = the select button wrapped so a hover-reveal Remove control can sit over its corner
   (a button never nests inside another button). */
.ed-mtile-wrap { position: relative; display: block; }
.ed-mtile-wrap > .ed-mtile { width: 100%; }
.ed-mtile-rm { position: absolute; top: 6px; inset-inline-end: 6px; width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; }
.ed-mtile-rm .icon { --icon-size: 13px; }
.ed-mtile-rm:hover { background: rgba(0,0,0,.74); }
.ed-mtile-wrap:hover .ed-mtile-rm, .ed-mtile-rm:focus-visible { opacity: 1; }
/* upload in-flight: the drop zone shows a spinner and blocks re-entry until the upload settles. */
.ed-drop.is-uploading { pointer-events: none; position: relative; }
.ed-drop.is-uploading > label { opacity: .35; }
.ed-drop.is-uploading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px;
  margin: -12px 0 0 -12px; border-radius: 50%; border: 2px solid var(--control-border, rgba(0,0,0,.2));
  border-top-color: var(--accent, #f74827); animation: ed-spin .8s linear infinite; }
@keyframes ed-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ed-drop.is-uploading::after { animation: none; } }

/* ---------- Collections: featured cards ---------- */
.ed-featgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; }
.ed-featcard { position: relative; border-radius: var(--radius-md, 12px); overflow: hidden; background: var(--sand, #e6e1d8) center/cover;
  min-height: 150px; display: flex; align-items: flex-end; color: #fff; grid-column: span 2; grid-row: span 2; }
.ed-featcard.span-2x1 { grid-row: span 1; min-height: 120px; }
.ed-featcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 60%); }
.ed-featcard .fc-cap { position: relative; z-index: 2; padding: 16px; }
.ed-featcard .fc-ey { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; display: block; margin-bottom: 4px; }
.ed-featcard .fc-t { font-size: 16px; font-family: var(--fdisp, inherit); }
.ed-featcard .fc-empty { color: var(--text-faint, #5a5a5a); }
.ed-featcard.empty { background: rgba(0,0,0,.04); color: var(--text-faint, #5a5a5a); align-items: center; justify-content: center; }
.ed-featcard.empty::after { display: none; }

/* ---------- Products: similar picker + preview ---------- */
.ed-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
/* chosen-piece chip = the kit .mat pill: a leading .swatch avatar (the product image), the name, and a
   kit .iconbtn remove. The pill chrome (border / hover / radius / height) is the kit .mat; .ed-chip only
   relaxes the uppercase to natural case (product names) and sizes the remove control down. */
.ed-chip.mat { text-transform: none; letter-spacing: normal; padding-inline-end: var(--s-2, 8px); }
.ed-chip img.swatch { object-fit: cover; background: var(--sand, #e6e1d8); }
.ed-chip .iconbtn { width: var(--control-h, 44px); height: var(--control-h, 44px); margin-inline-start: 4px; }
.ed-chip .iconbtn .icon { --icon-size: 13px; }
.ed-simgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; }
/* systematic-related preview = the kit .card container (bg / shadow / radius from the kit); .ed-simcard
   only zeroes the card padding so the .pv product image stays a full-bleed ed-* thumbnail. */
.ed-simcard { padding: 0; overflow: hidden; }
.ed-simcard .pv { aspect-ratio: 3/4; background: var(--sand, #e6e1d8) center/cover; }
.ed-simcard .nm { padding: 8px 10px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-candidate.on { border-color: var(--accent, #f74827); }
.ed-candidate .chk { margin-inline-start: auto; color: var(--accent, #f74827); display: none; }
.ed-candidate.on .chk { display: inline-flex; }
.ed-candidate .chk .icon { --icon-size: 16px; }

/* ---------- Layouts: bundle cards (a Collection-page + Product-page design in one card) ---------- */
.ed-bundles { display: flex; flex-direction: column; gap: 12px; }
/* Layout card = the kit .card: bg / shadow / radius / padding all come from the kit (no hardcoded fill).
   .ed-bundle only adds the hairline that turns accent on the kit .selected convention (like Markets
   .mr-mkt.is-sel) plus the hover lift. */
.ed-bundle { border: 1px solid transparent; transition: border-color .15s, transform .15s; }
.ed-bundle:hover { transform: translateY(-1px); }
.ed-bundle.selected { border-color: var(--accent, #f74827); }
.ed-bundle-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.ed-bundle-name { font-size: 13px; font-weight: 500; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-bundle-applies { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint, #5a5a5a); }
.ed-bundle-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-bundle-tiles.single { grid-template-columns: 1fr; }
/* one side of a layout = a selectable kit .mat tile: the pill's border / hover / .selected accent chrome,
   relaxed to a vertical card that stacks a mini page mock + caption. The doubled .ed-bundle-tile.mat
   selector beats :root .mat on the layout props; the currently-edited side gets .mat.selected (accent
   border). Focus ring is the shared #ed :is(...) rule below. */
.ed-bundle-tile.mat { display: flex; flex-direction: column; align-items: stretch; gap: 6px; height: auto;
  padding: 10px; border-radius: var(--radius-md, 12px); text-transform: none; letter-spacing: normal; text-align: start; }
.ed-bundle-mini { display: flex; flex-direction: column; gap: 4px; padding: 8px; min-height: 46px; border-radius: var(--radius-sm, 6px);
  background: #fff; box-shadow: inset 0 0 0 1px var(--line-soft, rgba(0,0,0,.06)); }
.ed-bundle-mini i { display: block; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--text, #111) 16%, transparent); }
.ed-bundle-tile-cap { font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.ed-bundle-tile-sub { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint, #5a5a5a); }
/* persistent Policy honesty note (monochrome; a stronger hairline carries the weight, no warn colour) */
.ed-bundle-note { font-size: 11px; line-height: 1.4; color: var(--text-muted, #3a3a3a); margin-top: 10px; padding: 7px 10px;
  border-radius: var(--radius-sm, 8px); background: rgba(0,0,0,.05); border: 1px solid color-mix(in srgb, var(--text, #111) 20%, transparent); }
.ed-bundle-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.ed-bundle-assign { flex: 1 1 100%; }
.ed-bundle-del { width: var(--control-h, 44px); height: var(--control-h, 44px); margin-inline-start: auto; flex: none; }
.ed-bundle-del .icon { --icon-size: 15px; }
/* Collection page / Product page tabs, relocated to the top of the builder pane */
.ed-tplbuild-tabs { margin-bottom: 12px; }
.ed-tplbuild-tabs .ed-tplside { margin-top: 0; }
/* Collections: read-only layout mirror (one assignment door - it lives in Layouts) */
.ed-tplmirror { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 9px 12px;
  border: 1px solid var(--line-soft, rgba(0,0,0,.10)); border-radius: var(--radius-sm, 8px); background: rgba(0,0,0,.03); }
.ed-tplmirror-v { font-size: 13px; color: var(--text, #141414); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ed-tplmirror-go { display: inline-flex; align-items: center; gap: 4px; min-height: var(--control-h, 44px); padding: 0 8px; background: none; border: 0; font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
.ed-tplmirror-go .icon { --icon-size: 14px; }

/* ---------- modals ---------- */
.ed-split-foot { display: flex; justify-content: space-between; gap: 12px; }
/* leave-guard confirm: danger Discard pushed to the far edge, Keep editing + Save and leave at the end */
.ed-confirm-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.ed-confirm-foot .ed-danger { margin-inline-end: auto; }
.ed-danger { color: var(--accent, #f74827) !important; box-shadow: inset 0 0 0 1px var(--accent, #f74827) !important; }
.ed-danger-txt { color: var(--accent, #f74827); }
.ed-dest-warn { display: flex; align-items: flex-start; gap: 6px; margin: 7px 0 0; font-size: 11px;
  line-height: 1.45; color: var(--accent, #f74827); }
.ed-dest-warn[hidden] { display: none; }
.ed-dest-warn .icon { --icon-size: 14px; flex: none; margin-top: 1px; }
.modal-footer .btn .icon { --icon-size: 15px; }

/* bespoke ed-pick option cards (New-layout type picker) */
.ed-pickopt { display: flex; align-items: flex-start; gap: 10px; padding: 14px; margin-bottom: 10px; cursor: pointer;
  border: 1px solid var(--line-soft, rgba(0,0,0,.10)); border-radius: var(--radius-card, 16px); background: #fff; transition: border-color .15s, transform .15s; }
.ed-pickopt:hover { border-color: var(--control-border, rgba(0,0,0,.2)); transform: translateY(-1px); }
/* the radio is relit into a kit toggle by fb-ui :root; hide it and let the card itself be the control
   - its border turns accent when chosen (the kit .mat.selected idiom with a visually-hidden input). */
.ed-pickopt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ed-pickopt:has(input:checked) { border-color: var(--accent, #f74827); }
.ed-pickopt-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ed-pickopt-t { font-size: 13px; font-weight: 500; }
.ed-pickopt-d { font-size: 12px; line-height: 1.45; color: var(--text-faint, #5a5a5a); }
.ed-pickopt-d .tag { margin-inline-start: 4px; }

/* New-page create sheet: web-address preview row (a read-only /page/ prefix + editable slug) */
.ed-np-slugrow { display: flex; align-items: stretch; gap: 0; }
.ed-np-slugpre { display: inline-flex; align-items: center; padding: 0 10px; font-size: 13px; color: var(--text-faint, #5a5a5a);
  background: var(--control-fill, rgba(0,0,0,.03)); border: 1px solid var(--control-border, rgba(0,0,0,.12));
  border-inline-end: 0; border-radius: 12px 0 0 12px; white-space: nowrap; }
.ed-np-slugrow .text-input { border-radius: 0 12px 12px 0; min-width: 0; }
#ed-np-translationNote { margin: -4px 0 14px; }

/* the single assignment surface (modal list of collections / policies + conflict badges) */
.ed-assign-head { margin-top: 4px; padding-top: 0; border-top: 0; }
.ed-assignlist { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 1px; }
.ed-assignrow { display: flex; align-items: center; gap: 8px; min-height: var(--control-h, 44px); padding: 7px 4px; margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; cursor: pointer; }
.ed-assignrow.off { opacity: .55; cursor: default; }
.ed-assignrow-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-assignrow-c { margin: 0; flex: none; }

/* deny */
.ed-deny { max-width: 520px; margin: 80px auto; text-align: center; padding: 0 24px; }

/* `.ed-hide-sm` marks labels that fold away as the chrome narrows (it was referenced across the
   markup but never defined, so nothing collapsed and the top bar's centered screens nav overlapped
   the right-hand utility buttons at laptop widths). The TOP bar folds first: below 1400 its eyebrow
   and the UI Kit / Policies / Translations button labels collapse to icon-only (each keeps its
   title/aria-label), which shrinks the right zone and clears the screens nav. The contextual
   toolbars keep their labels until the panes collapse (their zones are content-sized and never
   overlap); at <=1120 every remaining .ed-hide-sm label folds for a clean compact chrome. */
@media (max-width: 1400px) { .ed-top .ed-hide-sm { display: none; } }
.ed-hide-sm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Medium widths: drop the toolbar's page name + status tag (both are already shown in the
   left panel header) so the centre's width and pane toggles keep their room
   and never collide with the tools on the left or the actions on the right. */
@media (max-width: 1360px) {
  /* the actual elements are .ed-ctxname (context/page name) + .ed-statustag (the status chip);
     the earlier selectors (.ed-pagename / .tag) matched nothing, so neither ever folded. */
  .ed-bar .ed-ctxname, .ed-bar .ed-statustag { display: none; }
}
/* tighter still: the Desktop/Tablet/Mobile preview toggle steps aside next so the centre never
   collides before the whole centre collapses at 1120. When it folds,
   the same three device choices re-home into the More popover (.ed-more-devgrp, driven by JS). */
@media (max-width: 1220px) {
  .ed-bar #ed-widthSeg { display: none; }
}

/* ---------- responsive: pane switcher (no stranded rail/drawer) ----------
   Replaces the old "hide every pane but the canvas" (which stranded the outline / add /
   settings on Pages and left Collections/Products/Layouts blank until a row was picked in
   the now-hidden rail). A List | Edit | Preview switcher (#ed-paneseg) in the toolbar picks
   the visible pane; every pane carries a data-pane-role so the mapping is per-screen semantic
   (Pages: list=outline, edit=settings, preview=canvas; Store screens: list=rail, edit=editor,
   preview=canvas). Two tiers: a real 2-pane tablet tier
   (901-1120) that keeps the list beside one of edit/preview, then a single-pane phone tier. */
.ed-paneseg { display: none; }
@media (max-width: 1120px) {
  .ed-bar-c { display: flex; }
  .ed-bar #ed-widthSeg { display: none; }  /* the preview-width toggle folds below the 2-pane tier */
  .ed-paneseg { display: inline-flex; }
  .ed-hide-sm { display: none; }
  .ed-top-l { overflow: hidden; }
  .ed-top-l .back { flex: 0 1 auto; min-width: var(--control-h, 44px); overflow: hidden; }
}
/* 2-pane tablet tier: the list rail stays, the second column is edit or preview */
@media (max-width: 1120px) and (min-width: 901px) {
  .ed-wrap[data-screen] { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
  .ed-wrap .ed-pane[data-pane-role="list"] { display: flex; }
  .ed-wrap .ed-pane[data-pane-role="edit"], .ed-wrap .ed-pane[data-pane-role="preview"] { display: none; }
  #ed[data-pane="edit"] .ed-wrap .ed-pane[data-pane-role="edit"] { display: flex; }
  #ed:not([data-pane="edit"]) .ed-wrap .ed-pane[data-pane-role="preview"] { display: flex; }
}
/* single-pane phone tier: exactly the chosen role */
@media (max-width: 900px) {
  .ed-wrap[data-screen] { grid-template-columns: 1fr; }
  .ed-wrap .ed-pane { display: none; }
  #ed[data-pane="list"] .ed-wrap .ed-pane[data-pane-role="list"] { display: flex; }
  #ed[data-pane="edit"] .ed-wrap .ed-pane[data-pane-role="edit"] { display: flex; }
  #ed[data-pane="preview"] .ed-wrap .ed-pane[data-pane-role="preview"] { display: flex; }
  .ed-top .ed-brand { display: none; }     /* fold the wordmark so Save/Publish stay pinned */
}

/* keep an inline wordmark unbreakable inside editor-chrome copy (e.g. the AI subtitle) */
.ed-nowrap { white-space: nowrap; }

/* ============================================================
   THE HOUSE WRITER - an English, block-aware chat writer that
   reads like a modern assistant: a target + assurance bar, a
   scrolling thread of option cards, a kept-alternatives strip and a
   pinned composer. Layout only; every colour/space reads a kit token
   (declares none). Monochrome; accent is chrome only (send fill,
   focus ring, links, kept). Brand icons only. No em/en dashes.
============================================================ */
.ed-hw-modal { width: min(780px, calc(100vw - var(--s-7, 32px)));
  height: min(820px, calc(100vh - var(--s-7, 32px))); max-height: calc(100vh - var(--s-7, 32px)); }
.ed-hw-modal .modal-header { padding: var(--s-5, 20px) var(--s-6, 24px) var(--s-4, 16px); }
.ed-hw-context { flex: none; display: grid; gap: 8px; padding: 12px var(--s-5, 20px);
  border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.08)); background: var(--control-bg-2, rgba(0,0,0,.025)); }
.ed-hw-body { position: relative; min-height: 0; padding: 0; overflow: hidden; display: flex; }
.ed-hw-footer { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 12px var(--s-5, 20px) 14px;
  background: rgba(253,252,250,.72); }
/* The chat shell follows the editor's fixed left-to-right direction. */

/* ---- target + assurance bar ---- */
.ed-hw-target { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: none;
  padding: 10px 12px; border: 1px solid var(--line-soft, rgba(0,0,0,.08)); box-shadow: none; }
.ed-hw-target-what { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--text, #141414); }
.ed-hw-target-what .icon { --icon-size: 15px; color: var(--text-muted, #4a443c); flex: none; }
.ed-hw-target-what b { font-weight: 600; }
.ed-hw-target.general .ed-hw-target-what { color: var(--text-faint, #726a5f); }
.ed-hw-change { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; min-height: var(--control-h, 44px); font-size: 12px; padding: 0 13px; }
.ed-hw-change:hover { border-color: var(--accent, #f74827); }
.ed-hw-change .icon { --icon-size: 13px; }
/* target-kind picker = the kit .fb-nav segmented control (radios); .fb-nav supplies the pill track +
   accent-active label. This layout modifier only puts it on its own row and hugs content (like .ed-seg). */
.ed-hw-kinds { flex-basis: 100%; margin-top: 4px; width: fit-content; }
.ed-hw-kinds label { flex: 0 0 auto; padding-inline: var(--s-4, 16px); }
.ed-hw-kinds[hidden] { display: none; }
.ed-hw-voice { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; flex: none; margin: 0;
  padding: 8px 11px; font-size: 12px; color: var(--text-faint, #726a5f); }
.ed-hw-voice .icon { --icon-size: 14px; }
/* calm empty state (the starter grid is folded into the composer placeholder) */
.ed-hw-intro { margin: auto; max-width: 48ch; text-align: center; padding: 24px; border: 1px solid var(--line-soft, rgba(0,0,0,.08)); border-radius: var(--radius-card, 16px); background: var(--glass-bg, rgba(255,255,255,.52)); }
.ed-hw-intro-icon { --icon-size: 28px; display: inline-flex; margin-bottom: 12px; color: var(--text, #141414); }
.ed-hw-intro p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-muted, #4a443c); }
.ed-hw-voice-more { display: inline-flex; align-items: center; min-height: var(--control-h, 44px); background: none; border: 0; font: inherit; font-size: 12px; color: var(--accent, #f74827); cursor: pointer;
  padding: 0 8px; text-decoration: underline; text-underline-offset: 2px; }
.ed-hw-voice-disc { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; line-height: 1.55; color: var(--text-muted, #4a443c);
  background: var(--control-bg-2, rgba(0,0,0,.04)); border: 1px solid var(--line-soft, rgba(0,0,0,.08));
  border-radius: var(--radius-sm, 8px); padding: 10px 12px; }
.ed-hw-voice-disc[hidden] { display: none; }

/* ---- the thread (the only scroll region) ---- */
.ed-hw-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px;
  padding: var(--s-5, 20px); scroll-behavior: smooth; }
.ed-hw-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- starters (empty state) ---- */
.ed-hw-starts { display: flex; flex-direction: column; gap: 12px; }
.ed-hw-starts p { margin: 0; font-size: 13px; color: var(--text-muted, #4a443c); }
.ed-hw-start-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-hw-start { display: inline-flex; align-items: center; gap: 8px; min-height: var(--control-h, 44px); padding: 10px 14px; border-radius: var(--radius-pill, 999px);
  background: var(--control-bg, #fff); border: 1px solid var(--control-border, rgba(0,0,0,.14)); color: var(--text, #141414);
  font: inherit; font-size: 13px; cursor: pointer; transition: border-color .15s, color .15s; }
.ed-hw-start .icon { --icon-size: 14px; color: var(--text-muted, #4a443c); }
.ed-hw-start:hover { border-color: var(--accent, #f74827); color: var(--text, #141414); }
.ed-hw-start:hover .icon { color: var(--text-muted, #4a443c); }

/* ---- user prompt bubble ---- */
.ed-hw-msg { display: flex; justify-content: flex-end; }
.ed-hw-bubble { max-width: 78%; background: var(--accent-soft, rgba(247,72,39,.12)); border: 1px solid var(--accent-ring, rgba(247,72,39,.28));
  color: var(--text, #141414); padding: 9px 14px; border-radius: 14px; border-bottom-right-radius: 5px; font-size: 13.5px; line-height: 1.5; }
.ed-hw-bubble .ed-hw-ref { color: var(--accent, #f74827); font-weight: 600; }

/* ---- assistant reply + option cards ---- */
.ed-hw-reply { display: flex; flex-direction: column; gap: 11px; }
.ed-hw-reply-head { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .04em; color: var(--text-muted, #4a443c); }
.ed-hw-reply-head .icon { --icon-size: 15px; }
/* "sample" chip is a kit .tag; this only pushes it to the trailing edge and keeps its icon gap. */
.ed-hw-sample { margin-inline-start: auto; gap: 5px; }
.ed-hw-sample .icon { --icon-size: 12px; }
/* generated-copy card = the kit card idiom (card radius + kit glass shadow); border reserved for
   hover / pulse (transparent at rest). */
.ed-hw-opt { background: var(--control-bg, #fff); border: 1px solid transparent;
  border-radius: var(--radius-card, 16px); padding: 13px 14px 11px; box-shadow: var(--glass-shadow, 0 2px 8px rgba(0,0,0,.06));
  transition: border-color .15s, box-shadow .15s; }
.ed-hw-opt:hover { border-color: var(--control-border, rgba(0,0,0,.16)); }
.ed-hw-opt.pulse { animation: ed-hw-pulse .5s ease; }
@keyframes ed-hw-pulse { 0% { box-shadow: 0 0 0 0 var(--accent-ring, rgba(247,72,39,.28)); }
  60% { box-shadow: 0 0 0 4px var(--accent-soft, rgba(247,72,39,.12)); } 100% { box-shadow: 0 0 0 0 transparent; } }
.ed-hw-opt-n { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint, #726a5f); }
.ed-hw-opt-lang { display: flex; gap: 10px; padding: 6px 0; }
.ed-hw-opt-text { flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.55; color: var(--text, #141414); white-space: pre-line; }
.ed-hw-caret::after { content: ""; display: inline-block; width: 2px; height: 1.05em; background: var(--accent, #f74827);
  vertical-align: -0.16em; margin-inline-start: 2px; animation: ed-hw-blink 1s steps(1) infinite; }
@keyframes ed-hw-blink { 50% { opacity: 0; } }
/* composing shimmer is the kit .skel-text; this only keeps its vertical rhythm inside the card. */
.ed-hw-skel { margin: 6px 0; }
.ed-hw-opt-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.ed-hw-opt-acts[hidden] { display: none; }
.ed-hw-opt-acts .btn { white-space: nowrap; }
.ed-hw-keep.is-kept { color: var(--accent, #f74827); border-color: var(--accent, #f74827); background: var(--accent-soft, rgba(247,72,39,.12)); }

/* ---- refine chips ---- */
.ed-hw-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding-top: 3px; }
.ed-hw-quick .ed-hw-qlbl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint, #726a5f); margin-inline-end: 2px; }
/* refine chips are kit .mat pills (see hwFinishReply) so they match every other BOH pill; no bespoke chip. */

/* ---- notes (error / sign-in / empty) + offline banner ---- */
/* the House Writer note = the kit .note callout; .ed-hw-note only lays it out as a centered icon + text
   (+ optional action) column inside the chat thread. Surface (bg / border / radius / colour) is .note. */
.ed-hw-note { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 22px 18px; }
.ed-hw-note .icon { --icon-size: 26px; color: var(--text-muted, #4a443c); }
.ed-hw-note p { margin: 0; max-width: 44ch; font-size: 13.5px; line-height: 1.55; color: var(--text-muted, #4a443c); }
.ed-hw-note.ed-hw-err .icon { color: var(--text, #141414); }
.ed-hw-banner { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: var(--radius-md, 12px);
  background: var(--control-bg-2, rgba(0,0,0,.03)); border: 1px solid var(--line-soft, rgba(0,0,0,.08));
  font-size: 12.5px; line-height: 1.45; color: var(--text-muted, #4a443c); }
.ed-hw-banner .icon { --icon-size: 18px; flex: none; color: var(--text-muted, #4a443c); }

/* ---- kept-alternatives strip ---- */
.ed-hw-pins { flex: none; border-top: 1px solid var(--line-soft, rgba(0,0,0,.08)); padding: 10px var(--s-5, 20px); background: var(--control-bg-2, rgba(0,0,0,.03)); }
.ed-hw-pins[hidden] { display: none; }
.ed-hw-pins-lbl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint, #726a5f); margin-bottom: 7px; }
.ed-hw-pins-row { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 3px; }
.ed-hw-pin { flex: none; max-width: 260px; display: flex; align-items: center; gap: 8px; padding: 8px 9px 8px 11px;
  background: var(--control-bg, #fff); border: 1px solid var(--control-border, rgba(0,0,0,.14)); border-radius: var(--radius-sm, 8px); }
.ed-hw-pin .ed-hw-pt { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text, #141414); }
.ed-hw-pin-ins { min-height: var(--control-h, 44px); font: inherit; font-size: 11px; color: var(--text-muted, #4a443c); background: none;
  border: 1px solid var(--control-border, rgba(0,0,0,.14)); border-radius: var(--radius-pill, 999px); padding: 4px 9px; cursor: pointer; }
.ed-hw-pin-ins:hover:not([disabled]) { color: var(--text, #141414); border-color: var(--text-muted, #4a443c); }
.ed-hw-pin-ins[disabled] { opacity: .45; cursor: not-allowed; }
.ed-hw-pin-x { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h, 44px); height: var(--control-h, 44px); background: none; border: 0; color: var(--text-faint, #726a5f); cursor: pointer; padding: 2px; }
.ed-hw-pin-x .icon { --icon-size: 13px; }
.ed-hw-pin-x:hover { color: var(--text, #141414); }

/* ---- composer ---- */
.ed-hw-composer { flex: none; width: 100%; margin: 0; padding: 0; border: 1px solid var(--control-border, rgba(0,0,0,.14));
  border-radius: var(--radius-card, 16px); background: var(--glass-bg-strong, rgba(255,255,255,.82)); box-shadow: none; transition: border-color .15s; }
.ed-hw-composer:focus-within { border-color: var(--accent, #f74827); box-shadow: none; }
.ed-hw-composer.is-disabled { opacity: .55; pointer-events: none; }
.ed-hw-input { display: block; width: 100%; height: auto; border: 0; background: none; resize: none; min-height: 66px; max-height: 130px;
  padding: 14px 14px 6px; font: inherit; font-size: 14px; line-height: 1.5; color: var(--text, #141414); outline: none; box-shadow: none; }
.ed-hw-input:hover, .ed-hw-input:focus, .ed-hw-input:focus-visible { border: 0 !important; outline: 0 !important; outline-width: 0 !important; outline-style: none !important; box-shadow: none !important; background: transparent; }
.ed-hw-input::placeholder { color: var(--text-faint, #726a5f); }
.ed-hw-composer-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 8px 8px 11px; }
.ed-hw-mention-wrap { position: relative; display: inline-flex; }
.ed-hw-mention { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-h, 44px); font-size: 12px; padding-inline: var(--s-4, 16px); }
.ed-hw-mention .icon { --icon-size: 13px; }
.ed-hw-spring { flex: 1; }
.ed-hw-send { display: grid; place-items: center; width: var(--control-h, 44px); height: var(--control-h, 44px); border: 0; border-radius: var(--radius-pill, 999px);
  background: var(--accent, #f74827); color: var(--on-danger, #fee5a5); cursor: pointer; transition: transform .12s; }
.ed-hw-send .icon { --icon-size: 17px; }
.ed-hw-send:hover { transform: translateY(-1px); }
.ed-hw-send[disabled] { background: var(--control-border, rgba(0,0,0,.16)); color: var(--text-faint, #726a5f); cursor: not-allowed; transform: none; }
.ed-hw-send.is-stop { background: var(--text, #141414); color: var(--text-inverse, #fff); }
.ed-hw-hint { flex: none; align-self: flex-end; margin: 0; padding: 0 2px; font-size: 11px; color: var(--text-faint, #726a5f); }
.ed-hw-hint kbd { font: inherit; font-size: 11px; border: 1px solid var(--control-border, rgba(0,0,0,.14)); border-radius: 5px;
  padding: 1px 5px; background: var(--control-bg-2, rgba(0,0,0,.04)); color: var(--text-muted, #4a443c); }

/* ---- reference picker ---- */
.ed-hw-mentionmenu { position: absolute; bottom: calc(100% + 10px); inset-inline-start: 0; width: min(380px, calc(100vw - 48px));
  z-index: 20; display: flex; flex-direction: column; overflow: hidden; color: var(--text, #141414);
  background: var(--canvas-bg, #f4eedf); border: 1px solid var(--control-border, rgba(0,0,0,.16)); border-radius: var(--radius-card, 16px);
  box-shadow: var(--glass-shadow, 0 18px 40px rgba(0,0,0,.16)); padding: 10px; }
.ed-hw-mentionmenu[hidden] { display: none; }
.ed-hw-mentionhead { display: flex; align-items: flex-start; gap: 12px; padding: 4px 4px 10px; }
.ed-hw-mentionhead > span { min-width: 0; display: grid; gap: 3px; }
.ed-hw-mentionhead b { font-size: 13px; font-weight: 500; color: var(--text, #141414); }
.ed-hw-mentionhead small { font-size: 11.5px; line-height: 1.4; color: var(--text-faint, #5a5a5a); }
.ed-hw-mentionclose { flex: none; margin-inline-start: auto; width: var(--control-h, 44px); height: var(--control-h, 44px); }
.ed-hw-mentionclose .icon { --icon-size: 14px; }
.ed-hw-mentionsearch { position: relative; display: flex; align-items: center; margin-bottom: 8px; }
.ed-hw-mentionsearch > .icon { position: absolute; inset-inline-start: 14px; z-index: 1; --icon-size: 15px; color: var(--text-faint, #5a5a5a); pointer-events: none; }
.ed-hw-mentionsearch .text-input { height: var(--control-h, 44px); padding-inline: 40px 14px; background: var(--control-bg-hover, rgba(255,255,255,.85)); color: var(--text, #141414); }
#ed-hw-mentionmenu #ed-hw-mentionSearch:hover, #ed-hw-mentionmenu #ed-hw-mentionSearch:focus, #ed-hw-mentionmenu #ed-hw-mentionSearch:focus-visible {
  border: 1px solid var(--accent, #f74827) !important; outline: 0 !important; outline-width: 0 !important; outline-style: none !important; box-shadow: none !important; }
.ed-hw-mentionresults { max-height: min(320px, 42vh); overflow-y: auto; display: grid; gap: 2px; padding: 2px; }
.ed-hw-mentiongrp { padding: 8px 10px 4px; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint, #5a5a5a); }
.ed-hw-mentionitem { width: 100%; min-height: var(--control-h, 44px); display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-md, 12px); background: transparent; color: var(--text, #141414); cursor: pointer; text-align: start; }
.ed-hw-mentionitem .icon { --icon-size: 15px; color: var(--text-muted, #3a3a3a); }
.ed-hw-mentionitem b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 400; }
.ed-hw-mentionitem small { font-size: 10px; color: var(--text-faint, #5a5a5a); text-transform: uppercase; letter-spacing: .08em; }
.ed-hw-mentionitem:hover, .ed-hw-mentionitem:focus-visible, .ed-hw-mentionitem[aria-selected="true"] { background: var(--control-bg-hover, rgba(255,255,255,.85)); }
.ed-hw-mentionempty { min-height: 92px; display: grid; place-items: center; padding: 18px; text-align: center; font-size: 12px; color: var(--text-faint, #5a5a5a); }

/* ---- jump to latest ---- */
.ed-hw-jump { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 8; display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-h, 44px);
  font-size: 12px; padding: 0 13px; box-shadow: var(--glass-shadow, 0 12px 28px rgba(0,0,0,.16)); }
.ed-hw-jump[hidden] { display: none; }
.ed-hw-jump .icon { --icon-size: 13px; color: var(--accent, #f74827); }

/* ---- the per-field compose affordance in the settings drawer (matches .ed-varbtn sizing) ---- */
.ed-hw-field-btn { float: right; display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h, 44px); margin-inline-start: 6px;
  color: var(--accent, #f74827); background: var(--accent-soft, rgba(247,72,39,.12)); border: 0; border-radius: var(--radius-pill, 999px);
  padding: 2px 7px; cursor: pointer; line-height: 1.7; }
.ed-hw-field-btn .icon { --icon-size: 12px; }
.ed-hw-field-btn:hover { background: var(--accent, #f74827); color: var(--on-danger, #fee5a5); }

@media (prefers-reduced-motion: reduce) {
  .ed-hw-thread { scroll-behavior: auto; }
  .ed-hw-caret::after { animation: none; opacity: 1; }
  .ed-hw-opt.pulse { animation: none; }
  .ed-hw-skel { animation: none; background: rgba(0,0,0,.06); }
  .ed-hw-send { transition: none; }
}

/* ---- A5: list sub-field label (select / richtext / textarea sub-controls) ---- */
.ed-sublbl { display: block; font-size: 11px; letter-spacing: .02em; color: var(--text-faint, #5a5a5a); margin: 2px 0 4px; }

/* ---- A5: Collections featured card (C3 cover) ---- */
.ed-cover { margin-bottom: 6px; }
.ed-cover .ed-focalwrap { margin-top: 12px; }

/* ---- A5: Products systematic related (C2) ---- */
.ed-matchby { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ed-matchby .ed-check { display: flex; align-items: center; gap: 8px; min-height: var(--control-h, 44px); margin-bottom: 0; cursor: pointer;
  font-size: 13px; padding: 8px 10px; border: 1px solid var(--line-soft, rgba(0,0,0,.08));
  border-radius: var(--radius-md, 12px); background: rgba(255,255,255,.5); text-transform: none; letter-spacing: 0; }
/* the checkbox is relit into a kit toggle by fb-ui :root; hide it - the numbered card is the control
   and its border turns accent when ticked (kit .mat.selected idiom, visually-hidden input). */
.ed-matchby .ed-check input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ed-matchby .ed-check:has(input:checked) { border-color: var(--accent, #f74827); }
.ed-matchby-n { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 11px; color: var(--text-faint, #5a5a5a); background: rgba(0,0,0,.06); }
.ed-pinmode { width: 100%; height: var(--control-h, 44px); margin-bottom: 12px; }
.ed-pinmode label { flex: 1; padding: 0 8px; }
/* "pinned" chip is a kit .tag; sized down a touch to sit on the product-card name line (like .role-tag). */
.ed-simtag { height: 18px; padding: 0 7px; font-size: 9px; letter-spacing: .08em; margin-inline-start: 4px; }

/* ---- A5: shared piece / collection picker ---- */
.ed-pick-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft, rgba(0,0,0,.08)); }
.ed-pick-chosenlbl { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint, #5a5a5a); width: 100%; }
.ed-pick-list { max-height: 46vh; overflow-y: auto; }
/* chosen piece / collection summary = the kit .mat-row surface, relaxed to a two-line summary row (title
   + sub on the left, a .ed-link Change on the right). Doubled .ed-pickrow.mat-row beats :root .mat-row on
   the layout props; it is a display row (not selectable) so the cursor stays default. */
.ed-pickrow.mat-row { height: auto; justify-content: space-between; gap: 10px; padding: 9px 12px;
  border-radius: var(--radius-md, 12px); text-transform: none; letter-spacing: normal; cursor: default; }
.ed-pickrow-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ed-pickrow-tx b { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-pickrow-tx span { font-size: 11px; color: var(--text-faint, #5a5a5a); }

/* ============================================================
   A7 - STATES, MOTION + A11Y (the finishing layer)
   Motion is one ease family, three durations; nothing loops but the
   skeleton/boot shimmer. Monochrome only: the chrome accent is the ONE
   attention hue (unsaved / error / draft), "done" reads as faint neutral
   ink (no green / amber). Brand icons only; no em/en dashes.
============================================================ */
/* new ed-* motion tokens (never a kit token name; read via var() elsewhere) */
:root {
  --ed-dur-1: 120ms;   /* micro: chip swap, hover tint, checkbox */
  --ed-dur-2: 180ms;   /* standard: popover/drawer open, selection */
  --ed-dur-3: 240ms;   /* deliberate: modal open, boot fade-out */
  --ed-ease: cubic-bezier(.4, 0, .2, 1);
  --ed-shimmer-dur: 1.15s;
  /* ---- density rhythm: ONE vertical gap between rows in every list; single-line rows share a
     minimum height so a list never reads as uneven (density sweep, owner review) ---- */
  --ed-list-gap: 8px;
  --ed-row-min: 44px;   /* text-only rows (block outline) */
  --ed-row-min-th: 56px; /* rows carrying a leading 40px thumbnail (collections / products / pages) */
}

/* ---- keyboard-reachable segmented controls (the kit hides the radios display:none,
   which drops the screen / EN-AR / device / tabs / pin-mode switchers out of the tab
   order and the a11y tree - a11y P0). Make them visually hidden but FOCUSABLE, and ring
   the chosen label on keyboard focus. Clicks still fall through to the label.
   display:inline-block is REQUIRED: the kit's `.fb-nav input{display:none}` (fb-ui.css)
   otherwise wins the `display` property (this higher-specificity rule set position/size/
   opacity but omitted display), so the radios computed display:none and left the whole
   primary nav out of the tab order + a11y tree. A native radio group gives Left/Right
   arrow cycling + roving focus for free once the inputs are focusable. ---- */
#ed .fb-nav input { display: inline-block; position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
#ed .fb-nav input:focus-visible + label { outline: 2px solid var(--accent, #f74827); outline-offset: -2px; }

/* ---- A11Y: a CLOSED popover (Store / Tools / More) must leave the tab order + a11y tree.
   The kit hides it via opacity + pointer-events only, so its items stayed focusable and
   Enter fired hidden actions. Add visibility, delayed to the end of the fade so the open/
   close animation is preserved, and snap it visible instantly on open. ---- */
#ed .popover { visibility: hidden; transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s; }
#ed .popover.show { visibility: visible; transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0s; }

/* ---- visible keyboard focus ring across editor interactives (the kit sets
   :focus-visible { outline: none } with no replacement for buttons / rows / tiles). ---- */
#ed :is(.btn, .iconbtn, .ed-add, .ed-lrow, .ed-palcard, .popover-item, .ed-mtile, .ed-bundle-tile,
  .ed-hw-chip, .ed-hw-mention, .ed-hw-send, .ed-hw-ins, .ed-hw-copy, .ed-histbtn, .ed-aibtn,
  .ed-hw-change, .ed-hw-voice-more, .ed-hw-pin-ins, .ed-hw-pin-x, .ed-tplmirror-go, .ed-link,
  .ed-varbtn, .ed-hw-field-btn, .close, .ed-more, .ed-ctxbtn, .back, .ed-focal-reset,
  .ed-focal, [data-mi], [data-tpl], .ed-mtile, .ed-candidate):focus-visible,
#ed .ed-dirty.is-tap:focus-visible,
#ed .ed-drop:focus-within {
  outline: 2px solid var(--accent, #f74827); outline-offset: 2px;
}
/* the sr-only chip/status live-regions never take a ring */
#ed .ed-hw-status:focus-visible { outline: none; }

/* ---- closed dialogs out of the tab order + a11y tree (a11y P0): every .modal starts
   [inert]; openM/closeM toggle it. A tiny CSS backstop so an inert modal never paints. ---- */
.modal[inert] { pointer-events: none; }

/* ---- publish-status is carried on the kit .tag: plain neutral = published + clean, .tag.accent =
   needs a publish (Draft, or Published-but-edited). The banned kit .tag.success (green) / .tag.warning
   (amber) are intentionally never used; accent stays the one attention hue. `ed-statustag` is now just
   a semantic marker on the .tag (no styling of its own). ---- */

/* ---- unified save-chip: error is a real button (re-fires the save); offline waits to
   reconnect. min-width already reserved; the label crossfades (a11y P1-6). ---- */
.ed-dirty.is-tap { min-height: var(--control-h, 44px); cursor: pointer; }
.ed-dirty.err { color: var(--accent, #f74827); }
.ed-dirty.offline { color: var(--text-faint, #5a5a5a); }
.ed-dirty .ed-chip-ic { --icon-size: 12px; display: inline-flex; }
.ed-dirty.err::before, .ed-dirty.offline::before { display: none; }   /* the glyph replaces the dot */

/* ---- the offline banner (pinned under the toolbar; role=status) ---- */
.ed-offline { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 18px 8px; padding: 7px 12px; border-radius: var(--radius-sm, 8px);
  background: rgba(0,0,0,.05); border: 1px solid color-mix(in srgb, var(--text, #111) 18%, transparent);
  color: var(--text-muted, #3a3a3a); font-size: 12px; }
.ed-offline .icon { --icon-size: 15px; flex: none; }
.ed-offline[hidden] { display: none; }

/* Compact preview status. It remains visible without becoming a full-width panel. */
.ed-preview-safety { flex: none; align-self: flex-end; display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  min-height: 24px; margin: -2px 18px 4px; padding: 0 2px; border: 0; background: transparent;
  color: var(--text-faint, #5a5a5a); font-size: 10px; line-height: 1.3; text-align: end; }
.ed-preview-safety .icon { --icon-size: 12px; flex: none; }
/* Preview status = the kit .pill (muted when fine, warn when the staged Markets overlay is off) instead
   of a hand-rolled box. The label is a full sentence, so this context opts out of the pill's uppercase
   tracking. Retry is a 44px kit .iconbtn (i-refresh) toned amber - never the kit's signature-red hover. */
.ed-preview-pill { max-width: 100%; min-width: 0; text-transform: none; letter-spacing: normal; }
.ed-preview-pill #ed-previewSafetyTxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-preview-retry { color: #8a6a00; }
.ed-preview-safety .ed-preview-retry .icon { --icon-size: 15px; }
.ed-preview-safety .ed-preview-retry:hover,
.ed-preview-safety .ed-preview-retry:active { background: var(--warning-soft, rgba(237,184,69,.22)); color: #8a6a00; }
.ed-write-locked [data-pane-role="edit"] { opacity: .62; }
.ed-write-locked .ed-add, .ed-write-locked .ed-blk .acts, .ed-write-locked .ed-lrow .acts { opacity: .45; }

/* ---- the pane switcher shown below 1120 (styled by .ed-seg) - nothing extra needed ---- */

/* ---- generic state panels: empty / load-fail (rail + drawer + boot share this) ---- */
.ed-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 12px; padding: 44px 22px; color: var(--text-muted, #3a3a3a); }
.ed-state .icon { --icon-size: 30px; color: var(--text-faint, #5a5a5a); }
.ed-state p { margin: 0; max-width: 42ch; font-size: 13px; line-height: 1.6; color: var(--text-muted, #3a3a3a); }
.ed-state--err .icon { color: var(--text, #141414); }
.ed-state .btn { margin-top: 2px; }

/* ---- boot lockup: the house motif and current phase, faded out only after
   both the authenticated workspace and the storefront preview are ready. ---- */
.ed-boot { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px;
  background: var(--canvas-bg, #f4eedf); color: var(--text, #0e0e0e);
  transition: opacity var(--ed-dur-3, 240ms) var(--ed-ease); }
.ed-boot.is-out { opacity: 0; pointer-events: none; }
.ed-boot-motif { --icon-size: 40px; color: var(--text, #111); animation: ed-boot-pulse 1.6s ease-in-out infinite; }
@keyframes ed-boot-pulse { 50% { transform: scale(1.12); } }
.ed-boot-strap { font-family: "Tajawal", var(--ui-ar, inherit); font-size: 15px; color: var(--text-muted, #3a3a3a); }
.ed-validate-action-status { margin: 0; padding: 10px 24px; border-top: 1px solid var(--line, rgba(18,18,18,.12)); color: var(--text-muted, #3a3a3a); font-size: 13px; line-height: 1.5; }
.ed-validate-action-status.is-error { color: var(--danger, #9f2f1f); }
.ed-boot-status { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint, #5a5a5a); }
.ed-boot-still { font-size: 11px; color: var(--text-faint, #5a5a5a); }
.ed-boot-fail { display: none; flex-direction: column; align-items: center; gap: 12px; }
.ed-boot.is-fail .ed-boot-motif, .ed-boot.is-fail .ed-boot-status, .ed-boot.is-fail .ed-boot-still { display: none; }
.ed-boot.is-fail .ed-boot-fail { display: flex; }
@media (prefers-reduced-motion: reduce) {
  .ed-boot-motif { animation: none; }
  .ed-boot { transition: none; }
}

/* ---- restricted / signed-out / verify-failed card (replaces the dead-end deny screen):
   an icon, a title, plain owner copy and a real action row (Back / Sign out / Retry). ---- */
.ed-deny { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--canvas-bg, #f4eedf); color: var(--text, #0e0e0e); }
/* restricted / signed-out / verify-failed = the kit .notice splash (eyebrow scale, large title, glass
   surface). .ed-deny-card only stacks the icon + title + body + action row as a centered column; the
   surface (max-width / padding / bg / radius / shadow) and the h1 type come from the kit .notice. The
   inherited notice margins are zeroed so the single flex gap owns the vertical rhythm. */
.ed-deny-card { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ed-deny-card .ed-deny-ic { --icon-size: 34px; color: var(--text-muted, #3a3a3a); }
.ed-deny-card h1, .ed-deny-card p { margin: 0; }
.ed-deny-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 4px; }
.ed-deny :is(.btn, a.back):focus-visible, #ed-boot :is(.btn):focus-visible {
  outline: 2px solid var(--accent, #f74827); outline-offset: 2px; }

/* ---- preview watchdog fallback (a storefront that never signals ready must not leave a
   silent blank canvas): an in-frame notice + Reload that re-sets the iframe src. ---- */
.ed-pv-fallback { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 22px;
  background: var(--canvas-bg, #f4eedf); color: var(--text-muted, #3a3a3a); }
.ed-pv-fallback .icon { --icon-size: 26px; color: var(--text-faint, #5a5a5a); }
.ed-pv-fallback p { margin: 0; font-size: 12.5px; max-width: 34ch; line-height: 1.5; }
.ed-frame { position: relative; }

/* ---- a one-time hint band atop the Pages workspace (first-run) ---- */
.ed-hint-band { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 9px 12px;
  border-radius: var(--radius-sm, 8px); background: rgba(0,0,0,.04);
  border: 1px solid var(--line-soft, rgba(0,0,0,.08)); font-size: 12px; color: var(--text-muted, #3a3a3a); }

/* ---- reduced-motion: crossfades collapse to instant (per the motion table) ---- */
@media (prefers-reduced-motion: reduce) {
  .ed-dirty, .ed-dirty::before, .ed-more-caret, .ed-boot, .ed-pane, .ed-blk, .ed-lrow, .ed-bundle,
  .ed-bundle-tile, .ed-frame { transition: none !important; }
}

/* ---- top-bar: keep Save/Publish pinned as the chrome narrows (P1 responsive) ---- */
@media (max-width: 1000px) {
  .ed-top { gap: 10px; padding-inline: 12px; }
  .ed-top .ed-eyebrow { display: none; }
}

/* Phone and small-tablet chrome. The identity bar becomes three explicit rows, then the contextual
   bar becomes two rows. No zone has a content-sized minimum, so 320px and 375px never clip actions. */
@media (max-width: 900px) {
  .ed-top { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "identity" "tabs" "actions";
    gap: 6px; padding: max(8px, env(safe-area-inset-top)) 12px 8px; width: 100%; }
  .ed-top-l { grid-area: identity; width: 100%; justify-content: center; }
  .ed-tabs { grid-area: tabs; width: 100%; min-width: 0; }
  .ed-tabs label { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 11px; }
  .ed-cluster { grid-area: actions; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%; min-width: 0; gap: 6px; }
  .ed-cluster .popover-host { min-width: 0; }
  .ed-cluster .btn { width: 100%; min-width: 0; padding: 0 4px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
  .ed-cluster .ed-more { padding: 0 3px; gap: 3px; }
  .ed-cluster .ed-divider { display: none; }
  .ed-cluster .popover { width: min(280px, calc(100vw - 24px)); }
  .ed-cluster .popover-host:first-child .popover { inset-inline-start: 0; inset-inline-end: auto; }
  .ed-cluster .popover-host:nth-child(2) .popover { inset-inline-start: auto; inset-inline-end: 0; }
  .ed-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "context pages save" "switch switch switch"; gap: 6px 8px; padding: 4px 12px 8px; width: 100%; }
  .ed-bar .ed-ctx { grid-area: context; min-width: 0; overflow: hidden; }
  .ed-bar .ed-edit { grid-area: pages; display: flex; }
  .ed-bar-c { grid-area: switch; width: 100%; min-width: 0; justify-content: center; }
  .ed-bar-r { grid-area: save; min-width: 0; gap: 5px; }
  .ed-bar-c .ed-seg { min-width: 0; }
  .ed-paneseg { flex: 1 1 auto; }
  .ed-paneseg label { flex: 1 1 0; min-width: 0; padding: 0 5px; font-size: 10.5px; }
  .ed-navseg label { padding: 0 10px; }
  .ed-wrap { padding: 0 12px 12px; gap: 8px; min-width: 0; }
  .ed-preview-safety, .ed-offline { margin-inline: 12px; }
  .modal { width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
  .modal-header, .modal-body { padding-inline: 16px; }
  .modal-footer { padding: 12px 16px; flex-wrap: wrap; }
  .ed-hw-modal { width: min(780px, calc(100vw - 24px)); height: min(820px, calc(100dvh - 24px)); }
  .ed-hw-body { padding: 0; }
  .ed-hw-footer { padding: 12px 16px 14px; flex-wrap: nowrap; }
}

@media (max-width: 600px) {
  .ed-top-l { justify-content: space-between; }
  .ed-title { font-size: 13px; }
  .ed-bar { grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "context pages" "switch switch" "actions actions"; }
  .ed-bar-r { grid-area: actions; width: 100%; justify-content: flex-end; }
  .ed-bar-r #ed-saveBtn { padding-inline: 9px; font-size: 10.5px; }
  .ed-preview-safety { justify-content: flex-start; flex-wrap: wrap; text-align: start; }
  .ed-preview-safety .ed-preview-pill { flex: 1 1 auto; }
  .ed-row2 { grid-template-columns: 1fr; }
  .ed-urlrow, .ed-med { flex-wrap: wrap; }
  .ed-urlrow .text-input, .ed-med .text-input { flex: 1 1 180px; min-width: 0; }
  .ed-split-foot .btn, .ed-confirm-foot .btn { flex: 1 1 120px; }
  .ed-hw-modal { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
  .ed-hw-modal .modal-header { padding: 16px 18px 13px; }
  .ed-hw-modal .modal-header h3 { font-size: 19px; }
  .ed-hw-context { padding: 8px 12px; }
  .ed-hw-target { padding: 8px; }
  .ed-hw-target-what { flex: 1 1 180px; }
  .ed-hw-kinds { width: 100%; overflow-x: auto; }
  .ed-hw-thread { padding: 12px; }
  .ed-hw-intro { padding: 18px; }
  .ed-hw-footer { padding: 10px 12px 12px; }
  .ed-hw-kinds label { padding-inline: var(--s-3, 12px); }
}

@media (max-width: 360px) {
  .ed-top, .ed-bar { padding-inline: 8px; }
  .ed-cluster { gap: 4px; }
  .ed-cluster .btn { font-size: 9.5px; padding-inline: 2px; }
  .ed-tabs label { font-size: 10px; padding-inline: 3px; }
  .ed-bar { gap: 5px; }
  .ed-paneseg label { padding-inline: 2px; font-size: 9.5px; }
  .ed-wrap { padding-inline: 8px; }
  .ed-preview-safety, .ed-offline { margin-inline: 8px; }
}

/* Publish review: route-aware inventory with a deliberate acknowledgement only for high-impact
   releases. These are layout rules; tags, notes, controls and danger treatment remain kit-owned. */
.ed-publish-intro { margin: 0 0 10px; }
.ed-publish-risk { margin-bottom: 10px; }
.ed-publish-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.ed-publish-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; min-height: 40px; padding: 4px 0; }
.ed-publish-copy { min-width: 0; display: grid; gap: 2px; }
.ed-publish-copy b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 500; }
.ed-publish-copy small { min-width: 0; overflow-wrap: anywhere; color: var(--text-faint, #5a5a5a); font-size: 10.5px; }
.ed-publish-ack { min-height: var(--control-h, 44px); display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 0; font-size: 12px; cursor: pointer; }
.ed-publish-ack input { flex: none; width: 20px; height: 20px; margin: 0; }

/* Rich confirm content must use the full modal body width. The shared subtitle width is intended
   for short prose, while publish review contains lists and callouts. */
.ed-ask-body { width: 100%; max-width: none; }