/* Structured page CMS and its public page renderer. */
.cms-admin-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
/* The intro paragraph is long enough to squeeze the action beside it into a
   circle with its label wrapped over three lines. It keeps its own width. */
.cms-admin-head > .acct-btn { flex:none; white-space:nowrap; }
.cms-back { display:inline-block; margin-bottom:10px; color:var(--ink-3); font-size:.82rem; text-decoration:none; }
.cms-back:hover { color:var(--accent); }
.cms-review { margin-bottom:20px; border-color:rgba(224,179,74,.45); }
.cms-review-list { display:grid; gap:10px; }
.cms-review-card { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px; border:1px solid var(--glass-line); border-radius:var(--r-ctrl); background:var(--glass); }
.cms-review-card h3 { margin:4px 0 2px; font-size:1rem; }
.cms-review-card p { margin:0; color:var(--ink-3); font-size:.78rem; }
.cms-review-card .cms-review-summary { margin-top:7px; color:var(--ink-2); }
.cms-review-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; }

/* Workspace shell - a viewport-height app region pinned under the sticky site
   header. Only the sidebar list and the content canvas scroll; the tab bar and
   the action bar stay put, so Save/Submit are always reachable. */
.cms-workspace { display:grid; grid-template-columns:250px minmax(0,1fr); padding:0; overflow:hidden; position:sticky; top:79px; height:calc(100vh - 95px); min-height:540px; }
.cms-sidebar { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--glass-line); background:rgba(20,20,45,.025); }
.cms-sidebar-head { flex:none; padding:14px; border-bottom:1px solid var(--glass-line); }
.cms-page-search { display:flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid var(--glass-edge); border-radius:10px; background:var(--glass); }
.cms-page-search .ui-icon { width:14px; height:14px; flex:none; color:var(--ink-3); }
.cms-page-search input { flex:1; min-width:0; border:0; background:transparent; color:var(--ink); font:inherit; font-size:.84rem; outline:none; }
.cms-page-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
/* Which pages need attention, one click away. A state with nothing in it hides
   its own chip rather than offering an empty list. */
.cms-page-filters { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.cms-filter { display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border:1px solid var(--glass-edge); border-radius:999px; background:transparent; color:var(--ink-3); font:inherit; font-size:.72rem; font-weight:650; cursor:pointer; }
.cms-filter:hover { border-color:var(--accent); color:var(--accent); }
.cms-filter.is-active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-deep); }
/* Accent on the tinted active chip measures 2.3:1 on the dark theme. */
:root[data-theme="dark"] .cms-filter.is-active { color:#ff9ba5; }
.cms-filter[hidden] { display:none; }
.cms-filter span { opacity:.7; font-weight:500; }
.cms-page-list { display:flex; flex-direction:column; flex:1; padding:10px 8px 14px; gap:5px; min-height:0; overflow-y:auto; }
.cms-group-label { flex:none; margin:16px 8px 6px; color:var(--ink-3); font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.cms-group-label:first-child { margin-top:2px; }
/* flex:none - the list is a fixed-height scroller, so without it the rows
   shrink to fit and the whole list collapses into an unreadable stack. */
.cms-page-row { flex:none; position:relative; display:grid; grid-template-columns:1fr auto; gap:4px 10px; width:100%; padding:11px 11px 11px 15px; border:0; border-radius:10px; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.cms-page-row:hover { background:var(--accent-soft); }
.cms-page-row.is-active { background:var(--accent-soft); }
.cms-page-row.is-active::before { content:""; position:absolute; left:4px; top:10px; bottom:10px; width:3px; border-radius:3px; background:var(--accent); }
.cms-page-row-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.85rem; font-weight:650; line-height:1.35; }
.cms-page-row small { grid-column:1; color:var(--ink-3); font-size:.72rem; line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cms-page-row em { grid-column:2; grid-row:1 / span 2; align-self:center; }
.cms-empty { flex:none; padding:6px 10px 12px; color:var(--ink-3); font-size:.78rem; }

/* Editor column */
.cms-editor { position:relative; min-width:0; min-height:0; padding:20px 24px 0; display:flex; flex-direction:column; overflow:hidden; }
.cms-editor-empty { display:grid; place-content:center; min-height:100%; color:var(--ink-3); text-align:center; }
.cms-editor-empty strong { color:var(--ink-2); font-size:1.05rem; }
.cms-editor-empty p { margin-top:5px; font-size:.84rem; }
#cmsForm { display:flex; flex-direction:column; flex:1; min-height:0; }
.cms-editor-titlebar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.cms-editor-title-main { display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:wrap; }
.cms-editor-title-main h2 { font-size:1.35rem; letter-spacing:-.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.cms-editor-path { color:var(--ink-3); font-size:.8rem; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.cms-editor-title-side { flex:none; }

/* Tabs */
.cms-tabs { display:flex; flex-wrap:wrap; gap:2px; margin-bottom:18px; border-bottom:1px solid var(--glass-line); }
.cms-tab { position:relative; padding:9px 14px 11px; border:0; background:transparent; color:var(--ink-3); font:inherit; font-size:.86rem; font-weight:650; cursor:pointer; border-radius:8px 8px 0 0; }
.cms-tab:hover { color:var(--ink); background:var(--accent-soft); }
.cms-tab.is-active { color:var(--ink); }
.cms-tab.is-active::after { content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:2px; border-radius:2px; background:var(--accent); }
.cms-tab-count { color:var(--ink-3); font-weight:500; font-size:.76rem; }
.cms-tabpanel { display:none; }
.cms-tabpanel.is-active { display:block; flex:1; min-height:0; overflow-y:auto; padding-bottom:16px; }
.cms-tabpanel[data-tabpanel="content"].is-active { display:flex; flex-direction:column; overflow:hidden; padding-bottom:0; }

/* Content toolbar + canvas */
.cms-content-toolbar { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.cms-add-btn { font-weight:700; }
.cms-toolbar-side { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; }
.cms-history-tools { display:flex; gap:4px; }
.cms-canvas { position:relative; display:flex; flex-direction:column; gap:0; flex:1; min-height:0; padding:36px 14px 22px; border:1px dashed var(--glass-edge); border-radius:14px; background:rgba(255,255,255,.16); overflow-y:auto; }
.cms-canvas-empty { margin:auto; padding:14px 22px; border:1px dashed var(--glass-edge); border-radius:12px; background:transparent; color:var(--ink-3); font:inherit; font-size:.88rem; cursor:pointer; }
.cms-canvas-empty:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }

/* The page as HTML: a compact code editor, the same size as the canvas it
   stands in for. The textarea owns selection and scrolling; the layer behind
   it supplies syntax colour without changing the markup being edited. */
.cms-html-mode { display:flex; flex-direction:column; gap:10px; flex:1; min-height:0; }
.cms-html-note { margin:0; color:var(--ink-2); font-size:.82rem; }
.cms-html-status { margin-left:8px; color:var(--accent-ink); font-weight:650; }
.cms-code-editor { display:flex; flex-direction:column; flex:1; min-height:280px; overflow:hidden; border:1px solid var(--glass-edge); border-radius:12px; background:#fbfaf8; box-shadow:inset 0 1px rgba(255,255,255,.75); }
.cms-code-editor:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.cms-code-toolbar { display:flex; align-items:center; min-height:38px; padding:0 8px 0 14px; gap:12px; border-bottom:1px solid rgba(77,61,51,.14); background:#f3f0ec; color:#655e58; font-size:.72rem; }
.cms-code-language { display:inline-flex; align-items:center; gap:7px; font-weight:800; letter-spacing:.055em; }
.cms-code-language span { color:#a24f31; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.78rem; letter-spacing:-.08em; }
.cms-code-position { margin-left:auto; color:#817872; font-variant-numeric:tabular-nums; }
.cms-code-format { padding:5px 9px; border:1px solid rgba(77,61,51,.18); border-radius:7px; background:#fff; color:#554d47; font:inherit; font-weight:700; cursor:pointer; }
.cms-code-format:hover { border-color:#b27055; color:#8d4027; background:#fffaf7; }
.cms-code-format:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.cms-code-body { position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); flex:1; min-height:0; overflow:hidden; }
.cms-code-body::before { content:""; position:absolute; inset:0 auto 0 0; width:47px; border-right:1px solid rgba(77,61,51,.11); background:#f6f3ef; pointer-events:none; }
.cms-code-lines { z-index:1; grid-column:1; min-height:100%; margin:0; padding:14px 10px; overflow:hidden; color:#aaa19a; text-align:right; user-select:none; }
.cms-code-stage { grid-column:2; position:relative; min-width:0; min-height:0; overflow:hidden; background:#fffdfb; }
.cms-code-highlight,
#cmsHtmlSource,
.cms-code-lines { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.82rem; line-height:1.65; tab-size:2; }
.cms-code-highlight,
#cmsHtmlSource { position:absolute; inset:0; box-sizing:border-box; min-width:100%; min-height:100%; margin:0; padding:14px 16px; border:0; white-space:pre; word-wrap:normal; }
.cms-code-highlight { width:max-content; pointer-events:none; overflow:visible; color:#423d39; background:transparent; }
#cmsHtmlSource { z-index:1; resize:none; overflow:auto; outline:none; background:transparent; color:transparent; caret-color:#25211e; -webkit-text-fill-color:transparent; }
#cmsHtmlSource::selection { background:rgba(169,89,56,.22); }
.cms-syntax-comment { color:#75836b; font-style:italic; }
.cms-syntax-punctuation { color:#8a817b; }
.cms-syntax-tag { color:#9b3f5f; font-weight:650; }
.cms-syntax-attribute { color:#9a5e19; }
.cms-syntax-operator { color:#8a817b; }
.cms-syntax-string { color:#276b67; }
.cms-syntax-entity { color:#6c55a3; }
:root[data-theme="dark"] .cms-code-editor { border-color:var(--glass-edge); background:#171820; box-shadow:none; }
:root[data-theme="dark"] .cms-code-toolbar { border-color:rgba(255,255,255,.1); background:#20212b; color:#d7d1ca; }
:root[data-theme="dark"] .cms-code-language span { color:#f09b77; }
:root[data-theme="dark"] .cms-code-position { color:#9d9690; }
:root[data-theme="dark"] .cms-code-format { border-color:rgba(255,255,255,.15); background:#292a35; color:#ddd7d0; }
:root[data-theme="dark"] .cms-code-format:hover { border-color:#db8f70; color:#ffc1a7; background:#30272a; }
:root[data-theme="dark"] .cms-code-body::before { border-color:rgba(255,255,255,.08); background:#1d1e27; }
:root[data-theme="dark"] .cms-code-lines { color:#706d72; }
:root[data-theme="dark"] .cms-code-stage { background:#181921; }
:root[data-theme="dark"] .cms-code-highlight { color:#d9d4ce; }
:root[data-theme="dark"] #cmsHtmlSource { caret-color:#fff; }
:root[data-theme="dark"] #cmsHtmlSource::selection { background:rgba(230,143,105,.3); }
:root[data-theme="dark"] .cms-syntax-comment { color:#7f9977; }
:root[data-theme="dark"] .cms-syntax-punctuation { color:#99939a; }
:root[data-theme="dark"] .cms-syntax-tag { color:#f08bab; }
:root[data-theme="dark"] .cms-syntax-attribute { color:#e9bd70; }
:root[data-theme="dark"] .cms-syntax-operator { color:#aaa3a9; }
:root[data-theme="dark"] .cms-syntax-string { color:#79c7bd; }
:root[data-theme="dark"] .cms-syntax-entity { color:#b6a1ee; }
@media (max-width:560px) {
  .cms-code-position { display:none; }
  .cms-code-format { margin-left:auto; }
}
.cms-html-actions { display:flex; align-items:center; gap:8px; }
#cmsHtmlMode.is-active { border-color:var(--accent); color:var(--accent); }

/* Block cards */
.cms-block { position:relative; border:1px solid var(--glass-line); border-radius:12px; background:var(--glass-strong); box-shadow:var(--e-1); transition:border-color .12s ease, box-shadow .12s ease; }
.cms-block:hover { border-color:var(--glass-edge); }
.cms-block:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.cms-block.is-dragging { opacity:.4; }
/* A block that is not finished says so where it sits. */
.cms-block-flag { display:flex; align-items:center; gap:7px; margin-bottom:6px; padding:6px 10px; border:1px dashed rgba(224,179,74,.55); border-radius:9px; background:rgba(224,179,74,.1); color:#8a6208; font-size:.75rem; }
.cms-block-flag[hidden] { display:none; }
.cms-block-flag::before { content:"!"; display:grid; place-items:center; width:15px; height:15px; flex:none; border-radius:50%; background:rgba(224,179,74,.5); color:#4a3400; font-size:.65rem; font-weight:800; }
:root[data-theme="dark"] .cms-block-flag { color:#e8b866; }
/* The block a warning is about, pointed at rather than described. */
.cms-block.is-flagged { box-shadow:0 0 0 2px var(--danger), 0 0 0 6px rgba(229,72,77,.16) !important; border-radius:8px; }
/* Where the block will land, drawn instead of moving the page under the cursor. */
.cms-block.is-drop-before, .cms-block.is-drop-after { position:relative; }
.cms-block.is-drop-before::before, .cms-block.is-drop-after::after { content:""; position:absolute; left:-4px; right:-4px; height:3px; border-radius:3px; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); z-index:6; }
.cms-block.is-drop-before::before { top:-6px; }
.cms-block.is-drop-after::after { bottom:-6px; }
/* Dropping into an empty container. */
.is-drop-inside { box-shadow:0 0 0 2px var(--accent), 0 0 0 6px var(--accent-soft); border-radius:10px; }
/* An embedded page would otherwise swallow the pointer while a drag crosses it. */
.cms-canvas.is-reordering .cms-native-frame, .cms-canvas.is-reordering iframe { pointer-events:none; }
.cms-canvas.is-reordering .cms-block-preview { pointer-events:none; }
.cms-block-head { display:flex; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid var(--glass-line); }
.cms-block.is-collapsed .cms-block-head { border-bottom:0; }
.cms-block-handle { display:inline-flex; border:0; background:transparent; color:var(--ink-3); cursor:grab; padding:4px 2px; }
.cms-block-handle:active { cursor:grabbing; }
.cms-block-handle .ui-icon { width:14px; height:14px; }
.cms-block-icon { display:inline-flex; width:16px; height:16px; color:var(--ink-3); flex:none; }
.cms-block-icon svg { width:16px; height:16px; }
.cms-block-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); font-size:.74rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.cms-block-tools { display:flex; align-items:center; gap:2px; opacity:0; transition:opacity .12s ease; }
/* The block being pointed at, not every block inside it: hovering a Panel
   would otherwise light up the tools and + of all its contents at once. */
.cms-block:hover > .cms-block-head > .cms-block-tools,
.cms-block:focus-within > .cms-block-head > .cms-block-tools { opacity:1; }
.cms-tool { display:inline-flex; align-items:center; justify-content:center; min-width:26px; min-height:26px; border:0; border-radius:7px; background:transparent; color:var(--ink-3); font-size:.85rem; cursor:pointer; }
.cms-tool:hover:not(:disabled) { background:var(--accent-soft); color:var(--accent); }
.cms-tool:disabled { opacity:.32; cursor:not-allowed; }
.cms-tool:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.cms-tool--danger:hover { background:rgba(229,72,77,.12); color:var(--danger); }
/* The one control whose job isn't obvious from a glyph says what it does. */
.cms-tool--settings { gap:4px; padding:0 8px; font-size:.72rem; font-weight:700; }
.cms-block.is-settings-open .cms-tool--settings { background:var(--accent-soft); color:var(--accent); }
/* The canvas is the page: no cards, no chrome in the flow. A block shows the
   page's own markup, its tools float over it on hover, and its settings - the
   things a page cannot show - open underneath only when asked for. Forms are
   the exception: a form is built from its fields, so its editor stays open. */
.cms-block { border:0; background:transparent; box-shadow:none; border-radius:6px; }
.cms-block:hover { border:0; box-shadow:0 0 0 1px var(--glass-edge); }
.cms-block:focus-within { border:0; box-shadow:0 0 0 1px var(--accent); }
.cms-canvas--guide { display:block; padding:18px 18px 26px; border-style:solid; border-color:var(--glass-line); background:var(--bg); }
.cms-canvas--guide .cms-block { min-width:0; }
.cms-canvas--guide .partner-toc { max-height:none; }
/* Each block keeps a strip at its top for its own tools. They used to hang at
   -13px, which put 19px of toolbar - Settings and the ✕ among them - over the
   first line of the block's text: clicking into a heading either did nothing or
   removed the block. Reserving the strip in the flow (rather than floating the
   tools above the block) also keeps them on screen when the block is scrolled
   flush to the top of the canvas. The spacing the blocks already had between
   them is given back below, so the page reads at the same rhythm. */
/* No strip, no padding, no negative margins: a block's box is exactly what it
   draws, so hovering the lower half of a paragraph hovers that paragraph and
   not the one below it - which is what a reserved strip did, because the next
   block's transparent padding sat on top of this one's text and took its
   clicks. The tools float in the gap above the block instead. Hovering them
   still counts as hovering the block (they are inside it), so they stay
   reachable, and the page keeps exactly the spacing it has live. */
.cms-block-head { position:absolute; bottom:100%; margin-bottom:2px; right:4px; z-index:4; gap:6px; padding:2px 6px; border:1px solid var(--glass-edge); border-radius:8px; background:var(--glass-strong); box-shadow:var(--e-1); opacity:0; pointer-events:none; }
.cms-block-head .cms-tool { min-width:22px; min-height:22px; }
.cms-block:hover > .cms-block-head, .cms-block:focus-within > .cms-block-head { opacity:1; pointer-events:auto; }
.cms-block-head .cms-block-name { font-size:.66rem; max-width:130px; }
/* Controls for whatever is being edited inside the block right now - the rows
   and columns of the table the caret is in, say. */
.cms-block-context { display:flex; align-items:center; gap:2px; padding:0 4px; border-left:1px solid var(--glass-line); border-right:1px solid var(--glass-line); }
.cms-block-context[hidden] { display:none; }
.cms-context-label { margin-right:3px; color:var(--ink-3); font-size:.62rem; font-weight:750; letter-spacing:.05em; text-transform:uppercase; }
.cms-tool--ctx { min-width:24px; min-height:22px; font-size:.72rem; font-weight:700; }
.cms-block-body { display:none; padding:12px; margin-top:8px; border:1px solid var(--glass-line); border-radius:10px; background:var(--glass-strong); }
.cms-block.is-settings-open .cms-block-body { display:block; }
.cms-block-preview { padding:0; }
.cms-block-preview [contenteditable] { border-radius:4px; }
.cms-block-preview [contenteditable]:hover { box-shadow:0 0 0 1px var(--glass-edge); }
.cms-block-preview [contenteditable]:focus { outline:none; box-shadow:0 0 0 2px var(--accent); }
.cms-block-preview [contenteditable]:empty::after { content:'Write here…'; color:var(--ink-3); }
/* The standalone page's own header, written where it is read. */
.cms-canvas [data-page-field] { border-radius:6px; }
.cms-canvas [data-page-field]:hover { box-shadow:0 0 0 1px var(--glass-edge); }
.cms-canvas [data-page-field]:focus { outline:none; box-shadow:0 0 0 2px var(--accent); }
.cms-canvas [data-page-field]:empty::after { content:attr(data-placeholder); color:var(--ink-3); font-weight:400; }
.cms-canvas .cms-public { margin:0; }
/* The page's own elements carry the spacing, exactly as they do live. */
.cms-canvas .cms-public-body > .cms-block + .cms-block { margin-top:0; }
/* Nothing in the copy is clickable except the text: no navigation, no toggling
   a section shut while you are writing in it. */
.cms-block-preview a { cursor:text; }
.cms-block-preview summary { cursor:text; }
.cms-block-preview details { pointer-events:auto; }
.cms-block-preview button:not([data-edit]) { pointer-events:none; }
/* ...but a Panel draws the blocks inside it in its own preview, so those blocks'
   toolbars, their insert buttons and the panel's own "add a block inside" live
   in there too. Those are the editor, not the page: they must answer a click.
   Without this every control on every block of a document page - the accessibility
   notice, the legal pages - was dead, including the grip, so nothing could be
   moved either. Page buttons drawn inside a nested block stay inert. */
.cms-block-preview .cms-block > .cms-block-head button,
.cms-block-preview .cms-block > .cms-block-body button,
.cms-block-preview .cms-block > .cms-insert-below,
.cms-block-preview .cms-panel-add-block { pointer-events:auto; }
.cms-block-preview .partner-toc { position:static; }
.cms-block-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; min-width:0; }
.cms-block-fields .wide { grid-column:1 / -1; }
.cms-block-fields input,.cms-block-fields textarea,.cms-block-fields select { width:100%; padding:9px 10px; border:1px solid var(--glass-edge); border-radius:8px; background-color:var(--glass); color:var(--ink); font:inherit; font-size:.84rem; box-sizing:border-box; }
/* Room for the site-wide chevron drawn by style.css (its `padding-right`
   longhand loses to the `padding` shorthand above). */
.cms-block-fields select { padding-right:30px; }
.cms-block-fields textarea { resize:vertical; min-height:66px; }
.cms-block-fields input:focus,.cms-block-fields textarea:focus,.cms-block-fields select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.cms-divider-hint { color:var(--ink-3); font-size:.8rem; }
/* Blocks that show nothing on the live page still need a body here, or they
   collapse to a sliver nobody can grab. */
.cms-block-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:1px dashed var(--glass-edge); border-radius:999px; background:var(--glass); color:var(--ink-3); font-size:.75rem; }
.cms-image-empty { padding:30px 22px; border:1px dashed var(--glass-edge); border-radius:14px; background:var(--glass); color:var(--ink-3); font-size:.85rem; text-align:center; }
.cms-insert-below { position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); z-index:2; width:24px; height:24px; border:1px solid var(--glass-edge); border-radius:999px; background:var(--glass-strong); color:var(--ink-3); font-size:.95rem; line-height:1; cursor:pointer; opacity:0; transition:opacity .12s ease; box-shadow:var(--e-1); }
.cms-block:hover > .cms-insert-below, .cms-insert-below:focus-visible { opacity:1; }
.cms-insert-below:hover { color:#fff; background:var(--accent); border-color:var(--accent); }

/* Field extras */
.cms-image-upload { display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px dashed var(--glass-edge); border-radius:8px; background:rgba(255,255,255,.16); }
.cms-image-upload input { width:auto; padding:0; border:0; background:transparent; }
.cms-image-upload span { color:var(--ink-3); font-size:.76rem; }
.cms-video-check { min-height:1em; color:var(--ink-3); font-size:.76rem; }
.cms-video-check.is-ok { color:#1f7d40; }
.cms-video-check.is-error { color:var(--danger); }
.cms-faq-rows { display:grid; gap:8px; }
.cms-faq-row { display:grid; grid-template-columns:minmax(0,1fr) 30px; gap:6px 8px; padding:10px; border:1px solid var(--glass-line); border-radius:10px; background:var(--glass); }
.cms-faq-row input, .cms-faq-row textarea { background:var(--glass-strong) !important; }
.cms-faq-row textarea { grid-column:1; }
.cms-faq-remove { grid-column:2; grid-row:1; border:0; border-radius:7px; background:transparent; color:var(--ink-3); cursor:pointer; }
.cms-faq-remove:hover { background:rgba(229,72,77,.12); color:var(--danger); }
.cms-faq-add { justify-self:start; }
/* Feature-section card rows (feature_group block) */
.cms-fcards { display:grid; gap:8px; }
.cms-fcard-row { display:grid; gap:6px; padding:10px; border:1px solid var(--glass-line); border-radius:10px; background:var(--glass); }
.cms-fcard-row input, .cms-fcard-row textarea { background:var(--glass-strong) !important; }
.cms-fcard-head { display:grid; grid-template-columns:minmax(190px,.8fr) minmax(0,1.2fr) 30px; gap:8px; align-items:center; }
.cms-fcard-meta { display:grid; grid-template-columns:minmax(190px,.7fr) minmax(0,1.3fr); gap:8px; }
.cms-fcard-link { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:8px; }
.cms-fcard-remove { border:0; border-radius:7px; background:transparent; color:var(--ink-3); cursor:pointer; }
.cms-fcard-remove:hover { background:rgba(229,72,77,.12); color:var(--danger); }
.cms-fcard-add { justify-self:start; }
.cms-icon-field { min-width:0; }
.cms-icon-select { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:8px; width:100%; min-height:38px; padding:4px 9px 4px 5px; border:1px solid var(--glass-edge); border-radius:8px; background:var(--glass-strong); color:var(--ink); font:inherit; cursor:pointer; text-align:left; }
.cms-icon-select:hover { border-color:var(--accent); }
.cms-icon-select:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.cms-icon-swatch { display:grid; place-items:center; width:28px; height:28px; border-radius:7px; background:var(--accent-soft); color:var(--accent); }
.cms-icon-swatch .ui-icon { width:17px; height:17px; }
.cms-icon-swatch.is-empty { border:1px dashed var(--glass-edge); background:var(--glass); color:var(--ink-3); }
.cms-icon-swatch.is-empty::before { content:'+'; font-size:1rem; line-height:1; }
.cms-icon-select-label { min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--ink-2); font-size:.8rem; white-space:nowrap; }
.cms-icon-select-arrow { color:var(--ink-3); font-size:.85rem; }
@media (max-width:560px) {
  .cms-fcard-head { grid-template-columns:minmax(0,1fr) 30px; }
  .cms-fcard-head .cms-icon-field { grid-column:1; }
  .cms-fcard-meta, .cms-fcard-link { grid-template-columns:1fr; }
}
/* Timeline entries, Compare panels and Facts chips reuse the FAQ / feature-card
   row shells above; only the pieces that differ are styled here. */
.cms-tl-row input[data-tl="lead"] { grid-column:1; grid-row:1; }
.cms-cmp-row select { justify-self:start; min-width:200px; }
.cms-fact-rows { display:grid; gap:8px; }
.cms-fact-row { display:grid; grid-template-columns:minmax(160px,.7fr) minmax(0,1fr) 30px; gap:8px; align-items:center; padding:8px 10px; border:1px solid var(--glass-line); border-radius:10px; background:var(--glass); }
.cms-fact-row input { background:var(--glass-strong) !important; }
.cms-fact-add { justify-self:start; }
@media (max-width:560px) {
  .cms-fact-row { grid-template-columns:minmax(0,1fr) 30px; }
  .cms-fact-row .cms-icon-field { grid-column:1; }
}
/* Form-builder field rows */
.cms-ff-rows { display:grid; gap:6px; }
.cms-ff-row { display:grid; grid-template-columns:auto minmax(0,1fr) 132px auto auto; gap:6px 8px; align-items:center; padding:8px 10px; border:1px solid var(--glass-line); border-radius:10px; background:var(--glass); }
.cms-ff-row.is-dragging { opacity:.45; }
.cms-ff-row input,.cms-ff-row select,.cms-ff-row textarea { background-color:var(--glass-strong) !important; }
.cms-ff-drag { border:0; background:transparent; color:var(--ink-3); cursor:grab; font-size:.7rem; letter-spacing:-2px; padding:2px 0; }
.cms-ff-drag:active { cursor:grabbing; }
.cms-ff-req { display:flex; align-items:center; gap:5px; color:var(--ink-3); font-size:.73rem; white-space:nowrap; }
.cms-ff-req input { width:15px !important; height:15px; }
.cms-ff-remove { border:0; border-radius:7px; background:transparent; color:var(--ink-3); cursor:pointer; }
.cms-ff-remove:hover { background:rgba(229,72,77,.12); color:var(--danger); }
.cms-ff-extra { grid-column:2 / -1; }
.cms-ff-extra[hidden] { display:none; }
.cms-ff-add { justify-self:start; }

/* Site-form block: locked fields the handlers read, plus staff-added extras.
   A locked row shows its frozen key and type, and edits only the strings. */
.cms-nf-pick { display:grid; gap:5px; color:var(--ink-2); font-size:.78rem; }
.cms-nf-rows { display:grid; gap:8px; }
.cms-nf-row { display:grid; gap:7px; padding:10px 12px; border:1px solid var(--glass-line); border-radius:11px; background:var(--glass); }
.cms-nf-row.is-dragging { opacity:.45; }
.cms-nf-row input,.cms-nf-row textarea { background:var(--glass-strong) !important; }
.cms-nf-head { display:flex; align-items:center; gap:9px; }
.cms-nf-drag { border:0; background:transparent; color:var(--ink-3); cursor:grab; font-size:.7rem; letter-spacing:-2px; padding:2px 0; }
.cms-nf-drag:active { cursor:grabbing; }
.cms-nf-key { display:inline-flex; align-items:center; gap:5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.74rem; color:var(--ink-2); background:var(--glass-strong); border-radius:6px; padding:2px 7px; }
.cms-nf-key .ui-icon { width:12px; height:12px; opacity:.7; }
.cms-nf-type { margin-left:auto; color:var(--ink-3); font-size:.71rem; text-transform:lowercase; }
.cms-nf-line { display:grid; gap:4px; color:var(--ink-3); font-size:.73rem; }
.cms-nf-choices { display:grid; gap:5px; padding-top:2px; }
.cms-nf-choice { display:grid; grid-template-columns:118px minmax(0,1fr); gap:8px; align-items:center; }
.cms-nf-choice small { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.7rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; }
.cms-nf-note { margin:0; color:var(--ink-3); font-size:.71rem; }
.cms-nf-extra { display:grid; gap:7px; padding-top:8px; border-top:1px dashed var(--glass-line); justify-items:start; }
.cms-nf-extra[hidden] { display:none; }
.cms-nf-extra-title { margin:0; color:var(--ink-3); font-size:.73rem; }
/* Field groups: what a field is for, and how firmly it is wired in. */
.cms-nf-badge { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:2px 9px; font-size:.68rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; background:var(--glass-strong); color:var(--ink-2); }
.cms-nf-badge .ui-icon { width:11px; height:11px; opacity:.75; }
.cms-nf-badge--tracking { background:rgba(58,134,255,.14); color:#4c8dff; }
.cms-nf-badge--security { background:rgba(229,72,77,.13); color:var(--danger); }
.cms-nf-badge--signin { background:rgba(155,109,255,.15); color:#9b6dff; }
.cms-nf-badge--extra { background:rgba(46,182,125,.14); color:#2eb67d; }
.cms-nf-row--security,.cms-nf-row--signin { border-style:dashed; }
.cms-nf-insert { margin-left:6px; border:1px solid var(--glass-line); border-radius:8px; background:transparent; color:var(--ink-3); cursor:pointer; font-size:.78rem; line-height:1; padding:3px 6px; }
.cms-nf-insert:hover { color:var(--ink); background:var(--glass-strong); }
/* A staff question sitting in the field order, not in a trailing list. */
.cms-nf-extra-row { grid-template-columns:auto minmax(0,1fr) 132px auto auto auto; }
.cms-nf-extra-row > .cms-nf-badge { grid-column:1 / -1; justify-self:start; }
.cms-nf-extra-row .cms-nf-insert { margin-left:0; }

/* Submissions tab */
.cms-subs-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cms-sub-card { margin-bottom:8px; padding:12px 14px; border:1px solid var(--glass-line); border-radius:11px; background:var(--glass); }
.cms-sub-card header { display:flex; align-items:center; gap:10px; margin-bottom:8px; color:var(--ink-3); font-size:.74rem; }
.cms-sub-form { padding:2px 7px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-weight:750; }
.cms-sub-row { display:grid; grid-template-columns:150px minmax(0,1fr); gap:10px; padding:4px 0; border-top:1px solid var(--glass-line); font-size:.82rem; }
.cms-sub-row span { color:var(--ink-3); }
.cms-sub-row strong { color:var(--ink); font-weight:600; overflow-wrap:anywhere; }
/* Collection / layout block editors */
.cms-block-fields > label { display:grid; gap:4px; min-width:0; color:var(--ink-3); font-size:.76rem; }
.cms-coll-note:empty { display:none; }
.cms-coll-note { margin:0; color:var(--ink-3); font-size:.75rem; overflow-wrap:anywhere; }
.cms-cols { display:grid; gap:10px; }
@media (min-width:900px) { .cms-cols { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.cms-col { display:grid; gap:5px; min-width:0; padding:9px; border:1px solid var(--glass-line); border-radius:10px; }
.cms-col-label { color:var(--ink-3); font-size:.72rem; font-weight:650; text-transform:uppercase; letter-spacing:.04em; }
.cms-panels { display:grid; gap:10px; }
.cms-panel { display:grid; gap:7px; padding:10px; border:1px solid var(--glass-line); border-radius:10px; }
.cms-panel-head { display:flex; align-items:center; gap:7px; }
.cms-panel-head input { flex:1; }
.cms-acc-multi { display:flex !important; align-items:center; gap:8px; color:var(--ink-2); font-size:.82rem; }
.cms-acc-multi input { width:auto !important; }
.cms-html-src { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.8rem !important; }
.cms-spacer-field { display:flex !important; flex-direction:row !important; align-items:center; gap:10px; color:var(--ink-2); font-size:.8rem; }
.cms-spacer-field input[type="range"] { flex:1; padding:0; border:0; background:transparent; }
.cms-spacer-field output { color:var(--ink-3); font-size:.76rem; min-width:40px; text-align:right; }
/* A Panel in the canvas: the box renders exactly as it will live, and the
   blocks inside it are ordinary block cards with their own tools. The dashed
   inner edge only shows while editing, so it is clear what the box holds. */
.cms-panel-canvas { display:flex; flex-direction:column; gap:0; min-height:34px; }
.cms-block[data-type="panel"] > .cms-block-preview { padding:0; }
.cms-block[data-type="panel"] .cms-box { position:relative; }
.cms-block[data-type="panel"] .cms-panel-canvas:empty::after { content:'Empty panel - add a block inside it.'; display:block; padding:14px; border:1px dashed var(--glass-edge); border-radius:10px; color:var(--ink-3); font-size:.82rem; text-align:center; }
.cms-panel-add-block { margin-top:12px; opacity:0; transition:opacity .12s ease; }
.cms-block[data-type="panel"]:hover .cms-panel-add-block,
.cms-block[data-type="panel"]:focus-within .cms-panel-add-block { opacity:1; }
.cms-panel-canvas:empty + .cms-panel-add-block { opacity:1; }
/* A block sitting inside a panel keeps a little room for its floating toolbar. */

@media (max-width:860px) { .cms-panel-add-block { opacity:1; } }

/* A locked block: part of the page, in the order, movable - but its content
   belongs to the page's own design, so the lock says so plainly. */
.cms-block-lock { width:13px; height:13px; flex:none; color:#4c8dff; }
.cms-block[data-locked] > .cms-block-head { border-color:rgba(72,116,210,.45); }
.cms-block-legacy { margin-bottom:10px; padding:7px 10px; border:1px dashed rgba(224,179,74,.5); border-radius:9px; background:rgba(224,179,74,.09); color:#8a6208; font-size:.75rem; }
:root[data-theme="dark"] .cms-block-legacy { color:#e8b866; }
/* The native block is the page itself now, so it only needs a quiet edge to say
   "this section is built by the template", not a box shouting about it. */
.cms-block--widget { border-radius:10px; box-shadow:0 0 0 1px rgba(72,116,210,.22); }
.cms-block--widget:hover { box-shadow:0 0 0 1px rgba(72,116,210,.45); }
.cms-widget-card strong { color:var(--ink); }
.cms-widget-card p { margin-top:4px; color:var(--ink-3); font-size:.78rem; }
/* Sticks to the top of the scrolling canvas so the formatting buttons stay
   reachable while editing a long rich-text block. */
.cms-rich { min-width:0; }
/* Opaque backdrop (card tint over the page colour) so the editor text can't
   show through the bar once it detaches and floats over the content. */
/* -14px = the canvas's own top padding, which content scrolls through - park
   the bar over it so nothing peeks out above the buttons. */
.cms-rich-bar { position:sticky; top:-14px; z-index:4; background:linear-gradient(var(--glass-strong),var(--glass-strong)),var(--bg); border-radius:8px 8px 0 0; }
.cms-rich-toolbar { display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:5px; border:1px solid var(--glass-edge); border-radius:8px 8px 0 0; background:rgba(20,20,45,.05); }
.cms-rich-toolbar button { min-width:30px; min-height:28px; border:0; border-radius:6px; background:transparent; color:var(--ink-2); cursor:pointer; }
.cms-rich-toolbar button:hover { background:var(--accent-soft); color:var(--accent); }
.cms-rich-editor { min-height:170px; padding:14px; border:1px solid var(--glass-edge); border-top:0; border-radius:0 0 8px 8px; background:var(--glass); color:var(--ink); line-height:1.65; outline:none; }
.cms-rich-editor:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.cms-rich-editor h2,.cms-rich-editor h3 { margin:14px 0 6px; }
.cms-rich-editor p { margin:8px 0; }
/* Lists keep their marker inside the editor rather than hanging off the edge. */
.cms-rich-editor ul,.cms-rich-editor ol { margin:8px 0; padding-left:26px; list-style-position:outside; }
.cms-rich-editor ul { list-style-type:disc; }
.cms-rich-editor ol { list-style-type:decimal; }
.cms-rich-editor ul ul,.cms-rich-editor ol ol,.cms-rich-editor ul ol,.cms-rich-editor ol ul { margin:4px 0; }
.cms-rich-editor li { margin:3px 0; }
.cms-rich-editor blockquote { margin:10px 0; padding-left:14px; border-left:3px solid var(--accent); color:var(--ink-2); }
.cms-rich-editor a { color:var(--accent); text-decoration:underline; cursor:pointer; }
.cms-rich-editor table { width:100%; margin:10px 0; border-collapse:collapse; font-size:.86rem; }
.cms-rich-editor th,.cms-rich-editor td { padding:7px 9px; border:1px solid var(--glass-edge); text-align:left; vertical-align:top; }
.cms-rich-editor th { background:rgba(20,20,45,.05); font-weight:700; }
.cms-rich-tabletools { display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:5px 7px; border:1px solid var(--glass-edge); border-top:0; background:rgba(72,116,210,.12); }
.cms-rich-tabletools[hidden] { display:none; }
.cms-rich-tabletools > span { margin-right:4px; color:var(--ink-3); font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.cms-rich-tabletools button { min-height:26px; padding:0 8px; border:1px solid var(--glass-edge); border-radius:6px; background:var(--glass); color:var(--ink-2); font:inherit; font-size:.74rem; cursor:pointer; }
.cms-rich-tabletools button:hover { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }

/* Table block editor */
.cms-table-block { display:grid; gap:8px; }
.cms-table-scroll { max-width:100%; overflow-x:auto; }
table.cms-table-editor { border-collapse:separate; border-spacing:0 0; font-size:.82rem; }
table.cms-table-editor th,table.cms-table-editor td { padding:2px; }
table.cms-table-editor input { min-width:130px; }
.cms-table-colhead { display:flex; align-items:center; justify-content:center; gap:2px; }
.cms-table-collabel { color:var(--ink-3); font-size:.68rem; font-weight:700; }
.cms-table-rowhead { display:flex; align-items:center; gap:2px; padding-right:4px !important; }
.cms-table-rowlabel { min-width:14px; color:var(--ink-3); font-size:.68rem; font-weight:700; text-align:center; }
.cms-table-editor .cms-table-corner { width:1%; }
.cms-table-editor .cms-table-pad { width:100%; }
.cms-table-editor button { min-width:20px; min-height:20px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--ink-3); font-size:.72rem; line-height:1; cursor:pointer; }
.cms-table-editor button:hover:not(:disabled) { background:var(--accent-soft); color:var(--accent); }
.cms-table-editor button[data-col-remove]:hover:not(:disabled),.cms-table-editor button[data-row-remove]:hover:not(:disabled) { background:rgba(229,72,77,.12); color:var(--danger); }
.cms-table-editor button:disabled { opacity:.3; cursor:not-allowed; }
.cms-table-editor tr.is-header-row input { font-weight:700; background:rgba(20,20,45,.05) !important; }
.cms-table-addrow { justify-self:start; }

/* Link editor popover */
.cms-link-pop { position:fixed; z-index:120; display:grid; gap:9px; width:min(340px, calc(100vw - 24px)); padding:13px; border:1px solid var(--glass-edge); border-radius:12px; background:var(--glass-strong); box-shadow:0 18px 50px rgba(0,0,0,.3); backdrop-filter:blur(14px); }
.cms-link-pop label { display:flex; flex-direction:column; gap:5px; color:var(--ink-2); font-size:.76rem; font-weight:650; }
.cms-link-pop input { padding:8px 10px; border:1px solid var(--glass-edge); border-radius:8px; background:var(--glass); color:var(--ink); font:inherit; font-size:.82rem; outline:none; }
.cms-link-pop input:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.cms-link-pop-hint { margin:0; color:var(--ink-3); font-size:.72rem; }
.cms-link-pop-hint code { font-size:.72rem; }
.cms-link-pop-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.cms-link-pop-spacer { flex:1; }
.cms-link-pop-actions a[hidden] { display:none; }
.cms-link-pop .mini-btn--primary { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:750; }

/* Block inserter popover */
.cms-inserter { position:fixed; z-index:80; width:min(400px, calc(100vw - 24px)); max-height:min(430px, 70vh); overflow:auto; padding:12px; border:1px solid var(--glass-edge); border-radius:14px; background:var(--glass-strong); box-shadow:0 18px 50px rgba(0,0,0,.28); backdrop-filter:blur(14px); }
.cms-inserter-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.cms-inserter-head strong { flex:none; font-size:.84rem; }
.cms-inserter-head input { flex:1; min-width:0; padding:7px 10px; border:1px solid var(--glass-edge); border-radius:8px; background:var(--glass); color:var(--ink); font:inherit; font-size:.8rem; outline:none; }
.cms-inserter-head input:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.cms-inserter-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:6px; }
.cms-inserter-group { grid-column:1 / -1; margin:8px 2px 0; color:var(--ink-3); font-size:.66rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.cms-inserter-group:first-child { margin-top:0; }
.cms-inserter-group[hidden] { display:none; }
.cms-inserter-empty { margin-bottom:8px; color:var(--ink-3); font-size:.8rem; }
.cms-inserter-grid button { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:10px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.cms-inserter-grid button:hover, .cms-inserter-grid button:focus-visible { border-color:var(--accent); background:var(--accent-soft); outline:none; }
.cms-inserter-grid svg { width:18px; height:18px; color:var(--accent); }
.cms-inserter-grid span { font-size:.82rem; font-weight:700; }
.cms-inserter-grid small { color:var(--ink-3); font-size:.7rem; line-height:1.35; }

/* Recovery banner */
.cms-recovery { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; padding:10px 14px; border:1px solid rgba(224,179,74,.5); border-radius:11px; background:rgba(224,179,74,.12); color:var(--ink-2); font-size:.82rem; }
.cms-recovery-actions { display:flex; gap:6px; }

/* Pinned action bar - kept in view by the flex shell (not sticky, which the
   overflow:hidden workspace would clip). Message line sits just above it. */
.cms-actionbar { flex:none; order:3; z-index:5; display:flex; align-items:center; gap:12px; margin:0 -24px; padding:12px 24px; border-top:1px solid var(--glass-line); background:var(--glass-strong); }
.cms-actionbar-state { display:flex; flex-direction:column; gap:1px; flex:none; min-width:130px; }
.cms-save-state { color:var(--ink-3); font-size:.76rem; font-weight:650; }
.cms-save-state.is-dirty { color:#8a6208; }
.cms-save-state.is-dirty::before { content:"●"; margin-right:5px; font-size:.6rem; vertical-align:1px; }
.cms-save-state.is-saved { color:#1f7d40; }
.cms-word-count { color:var(--ink-3); font-size:.7rem; }
.cms-summary-input { flex:1; min-width:0; font-size:.82rem !important; }
.cms-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex:none; }
.cms-message { flex:none; order:2; min-height:0; margin:0; padding:6px 0 0; color:var(--ink-3); font-size:.8rem; text-align:right; }
.cms-message:empty { display:none; }
.cms-message.is-error { color:var(--danger); }

/* Settings + history tabs */
.cms-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cms-fields label,.cms-dialog label { display:flex; flex-direction:column; gap:6px; color:var(--ink-2); font-size:.8rem; font-weight:650; }
.cms-fields label small { color:var(--ink-3); font-weight:400; }
.cms-field-wide { grid-column:1 / -1; }
.cms-footer-toggle { flex-direction:row !important; align-items:center; padding-top:27px; }
.cms-footer-toggle input { width:18px; height:18px; }
.cms-slug-field { display:flex; align-items:center; border:1px solid var(--glass-edge); border-radius:var(--r-ctrl); background:var(--glass); overflow:hidden; }
.cms-slug-field > span { padding-left:12px; color:var(--ink-3); }
.cms-slug-field input { border:0 !important; border-radius:0 !important; padding-left:3px !important; box-shadow:none !important; }
.cms-settings-tools { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; padding:14px 16px; border:1px solid var(--glass-line); border-radius:12px; background:var(--glass); }
.cms-settings-tools strong { font-size:.88rem; }
.cms-settings-tools p { margin-top:2px; color:var(--ink-3); font-size:.78rem; }
/* Page settings, in named groups: what the page is, how it looks in search,
   and what can be done to it. Anything most people never touch sits behind a
   disclosure rather than in the middle of the form. */
.cms-settings-group { padding:16px 18px; border:1px solid var(--glass-line); border-radius:12px; background:var(--glass); }
.cms-settings-group + .cms-settings-group { margin-top:16px; }
.cms-settings-head { margin-bottom:14px; }
.cms-settings-head h3 { font-size:.95rem; }
.cms-settings-head p { margin-top:2px; color:var(--ink-3); font-size:.78rem; }
.cms-settings-group .cms-settings-tools { margin-top:0; }
.cms-settings-group .cms-settings-tools + .cms-settings-tools { margin-top:10px; }
.cms-settings-tools--danger { border-color:rgba(229,72,77,.3); }
.cms-advanced { margin-top:14px; padding-top:12px; border-top:1px solid var(--glass-line); }
.cms-advanced > summary { color:var(--ink-2); font-size:.8rem; font-weight:650; cursor:pointer; }
.cms-advanced > summary:hover { color:var(--accent); }
.cms-advanced[open] > summary { margin-bottom:12px; }
.cms-seo-head { margin-bottom:14px; }
.cms-seo-head h3 { font-size:.95rem; }
.cms-seo-head p { margin-top:2px; color:var(--ink-3); font-size:.78rem; }
.cms-seo-count { color:var(--ink-3); font-size:.72rem; font-weight:400; }
.cms-seo-count.is-over { color:#b02a2f; font-weight:650; }
.cms-seo-preview { display:flex; flex-direction:column; gap:2px; margin-top:16px; padding:12px 14px; border:1px solid var(--glass-line); border-radius:10px; background:var(--glass-2, var(--glass)); }
.cms-seo-preview-label { margin-bottom:4px; color:var(--ink-3); font-size:.68rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.cms-seo-preview-url { color:var(--ink-3); font-size:.74rem; overflow-wrap:anywhere; }
.cms-seo-preview-title { color:#1a0dab; font-size:1rem; font-weight:600; overflow-wrap:anywhere; }
[data-theme="dark"] .cms-seo-preview-title { color:#8ab4f8; }
.cms-seo-preview-desc { color:var(--ink-2); font-size:.8rem; }
.cms-seo-preview-desc.is-empty { color:var(--ink-3); font-style:italic; }
.cms-share-preview { margin:14px 0 8px; }
.cms-share-preview img { max-width:min(100%, 460px); height:auto; border:1px solid var(--glass-line); border-radius:10px; }


.cms-history-hint { margin-bottom:10px; color:var(--ink-3); font-size:.8rem; }
.cms-history-row { display:flex; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid var(--glass-line); color:var(--ink-3); font-size:.78rem; }
.cms-history-row button { margin-left:auto; }
.cms-history-note { display:block; margin-top:2px; color:var(--ink-2); }

/* Status pills */
.cms-status { display:inline-flex; width:max-content; padding:3px 7px; border-radius:999px; background:rgba(120,120,140,.14); color:var(--ink-2); font-size:.65rem; font-style:normal; font-weight:750; text-transform:capitalize; }
/* The document surface: inside it a rich-text block is prose on the page, not a
   card of its own, so a legal page reads as one continuous document in the
   canvas exactly as it does live. */
.cms-box--document .cms-rich-text { padding:0; border:0; background:none; box-shadow:none; }
.cms-canvas .cms-box--document { padding:26px 28px; }
/* The "last updated" line of a document: a Text block set to small print, which
   is what that line has always been. Matches .legal-updated. */
.cms-box--document .cms-note { font-size:.8rem; color:var(--ink-3); margin-bottom:12px; }
/* Which regional versions a block belongs to. */
.cms-regions { margin:2px 0 0; padding:9px 11px; border:1px solid var(--glass-line); border-radius:10px; }
.cms-regions legend { padding:0 4px; color:var(--ink-3); font-size:.72rem; font-weight:750; text-transform:uppercase; letter-spacing:.04em; }
.cms-region-all { display:flex; align-items:center; gap:7px; font-size:.82rem; }
.cms-region-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:4px 12px; margin:6px 0 0 20px; }
.cms-region-list[hidden] { display:none; }
.cms-region-pick { display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--ink-2); }
/* Said on the block itself, so a page with two versions of one paragraph does
   not read as though it contradicts itself. */
.cms-block-regions { flex:none; padding:1px 6px; border-radius:999px; background:rgba(72,116,210,.14); font-size:.7rem; letter-spacing:.02em; }
.cms-block-regions[hidden] { display:none; }
.cms-block.is-region-scoped > .cms-block-head { border-color:rgba(72,116,210,.45); }
/* "Published, but only staff can read it" - said beside the state, not instead
   of it, because the page really is live for the people who can see it. */
.cms-audience { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border:1px dashed rgba(72,116,210,.5); border-radius:999px; color:#3f6bb8; font-size:.65rem; font-weight:750; }
.cms-audience[hidden] { display:none; }
:root[data-theme="dark"] .cms-audience { color:#8fb2ef; }
.cms-status--published { background:rgba(41,140,72,.16); color:#1f7d40; }
.cms-status--pending { background:rgba(224,179,74,.2); color:#8a6208; }
.cms-status--rejected { background:rgba(229,72,77,.14); color:#b02a2f; }
.cms-status--changed { background:rgba(72,116,210,.16); color:#3a63b8; }
.cms-status--scheduled { background:rgba(155,109,255,.18); color:#6b46c1; }
:root[data-theme="dark"] .cms-status--scheduled { color:#c4a6ff; }
/* Booked to publish itself: said once under the action bar, with the way out. */
.cms-scheduled-note { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex:none; order:4; margin:0; padding:8px 0 0; color:#6b46c1; font-size:.8rem; }
.cms-scheduled-note[hidden] { display:none; }
:root[data-theme="dark"] .cms-scheduled-note { color:#c4a6ff; }
:root[data-theme="dark"] .cms-status--changed { color:#8fb2ff; }

/* Dialogs */
/* the global `* { margin:0 }` reset kills the UA's `dialog:modal { margin:auto }`,
   which is what centers an open dialog - restore it here. */
.cms-dialog { margin:auto; width:min(520px,calc(100vw - 28px)); padding:24px; border:1px solid var(--glass-edge); border-radius:18px; background:var(--glass-strong); color:var(--ink); box-shadow:0 25px 70px rgba(0,0,0,.35); }
.cms-dialog::backdrop { background:rgba(15,10,18,.58); backdrop-filter:blur(4px); }
.cms-dialog h2 { margin-bottom:5px; }
.cms-dialog > form > p { margin-bottom:18px; color:var(--ink-3); font-size:.84rem; }
.cms-dialog label + label { margin-top:12px; }
.cms-dialog .cms-actions { margin-top:14px; }
.cms-dialog-close { float:right; border:0; background:transparent; color:var(--ink-3); font-size:1.5rem; cursor:pointer; }
.cms-icon-dialog { width:min(680px,calc(100vw - 28px)); }
.cms-icon-dialog h2 { margin:0 42px 14px 0; }
.cms-icon-search { display:flex !important; align-items:center; gap:8px; margin:0 0 14px !important; padding:8px 11px; border:1px solid var(--glass-edge); border-radius:10px; background:var(--glass); }
.cms-icon-search .ui-icon { width:17px; height:17px; flex:none; color:var(--ink-3); }
.cms-icon-search input { width:100%; padding:0; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; }
.cms-icon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; max-height:min(52vh,440px); overflow:auto; padding:2px; }
.cms-icon-choice { display:flex; min-width:0; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:78px; padding:10px 7px; border:1px solid var(--glass-line); border-radius:10px; background:var(--glass); color:var(--ink-2); font:inherit; cursor:pointer; }
.cms-icon-choice:hover { border-color:var(--accent); background:var(--accent-soft); color:var(--ink); }
.cms-icon-choice:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.cms-icon-choice.is-selected { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.cms-icon-choice .ui-icon { width:24px; height:24px; }
.cms-icon-choice > span:last-child { width:100%; overflow:hidden; text-overflow:ellipsis; font-size:.7rem; text-align:center; white-space:nowrap; }
.cms-icon-empty { margin:20px 0; color:var(--ink-3); font-size:.82rem; text-align:center; }
.cms-icon-actions { display:flex; justify-content:space-between; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--glass-line); }
.cms-preview-dialog { width:min(820px,calc(100vw - 28px)); max-height:88vh; overflow:auto; }
.cms-device-switch { display:flex; justify-content:center; gap:5px; margin:0 36px 14px; }
.cms-device-switch .is-active { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
#cmsPreviewStage { width:100%; margin:0 auto; transition:width .18s ease; }
#cmsPreviewStage[data-size="tablet"] { width:min(720px,100%); }
#cmsPreviewStage[data-size="mobile"] { width:min(390px,100%); }
#cmsPreviewStage[data-size="mobile"] .cms-public { padding:22px 16px; }
/* The page's own template, embedded in its block. The frame carries the real
   page's CSS, so what the block shows is what a visitor sees; the note under it
   says where the content comes from and that the text is editable. */
.cms-native-shell { position:relative; }
.cms-native-shell.is-clipped { max-height:820px; overflow:hidden; }
.cms-native-shell.is-clipped::after { content:""; position:absolute; left:0; right:0; bottom:0; height:110px; background:linear-gradient(to bottom, transparent, var(--bg)); pointer-events:none; }
.cms-native-frame { display:block; width:100%; min-height:80px; border:0; background:transparent; }
.cms-native-note { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:6px; padding:6px 10px; border:1px dashed var(--glass-edge); border-radius:9px; color:var(--ink-3); font-size:.73rem; }
.cms-native-note .ui-icon { width:13px; height:13px; flex:none; }
.cms-native-changes { display:inline-flex; align-items:center; gap:8px; padding-left:8px; border-left:1px solid var(--glass-edge); color:#8a6208; font-weight:650; }
.cms-native-changes[hidden] { display:none; }
:root[data-theme="dark"] .cms-native-changes { color:#e8b866; }
.cms-native-ask { display:grid; justify-items:start; gap:8px; padding:18px 20px; border:1px dashed var(--glass-edge); border-radius:12px; background:var(--glass); }
.cms-native-ask p { margin:0; color:var(--ink-3); font-size:.82rem; }
.cms-native-ask strong { color:var(--ink); font-size:.92rem; }

/* Action feedback. Toasts confirm what happened and, for a removal, carry the
   way back rather than interrupting with a confirmation first. */
.cms-toasts { position:fixed; z-index:200; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.cms-toast { display:flex; align-items:center; gap:10px; max-width:min(420px,calc(100vw - 36px)); padding:10px 12px 10px 14px; border:1px solid var(--glass-edge); border-radius:11px; background:var(--glass-strong); backdrop-filter:blur(14px); box-shadow:0 14px 40px rgba(0,0,0,.24); color:var(--ink); font-size:.84rem; pointer-events:auto; animation:cms-toast-in .18s ease; }
.cms-toast--error { border-color:rgba(229,72,77,.5); color:var(--danger); }
.cms-toast--success::before { content:"✓"; color:#1f7d40; font-weight:800; }
.cms-toast.is-leaving { opacity:0; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease; }
.cms-toast-action { flex:none; margin-left:auto; padding:4px 10px; border:1px solid var(--accent); border-radius:8px; background:var(--accent-soft); color:var(--accent); font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; }
.cms-toast-close { flex:none; border:0; background:transparent; color:var(--ink-3); font-size:.8rem; line-height:1; cursor:pointer; }
.cms-toast-close:hover { color:var(--ink); }
@keyframes cms-toast-in { from { opacity:0; transform:translateY(8px); } }
@media (prefers-reduced-motion:reduce) { .cms-toast { animation:none; } }

/* Public CMS page */
.cms-public { max-width:820px; margin:0 auto; padding:clamp(24px,5vw,54px); }
.cms-public-head { padding-bottom:25px; border-bottom:1px solid var(--glass-line); }
.cms-public-kicker { display:block; margin-bottom:9px; color:var(--accent); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.cms-public-head h1 { font-size:clamp(2rem,5vw,3.25rem); line-height:1.05; letter-spacing:-.035em; }
.cms-public-head p { max-width:680px; margin-top:14px; color:var(--ink-2); font-size:1.05rem; line-height:1.65; }
.cms-public-body { padding-top:28px; color:var(--ink-2); font-size:1rem; line-height:1.75; }
.cms-managed-region { margin:20px 0; }
.cms-public-body > * + * { margin-top:20px; }
.cms-public-body h2,.cms-public-body h3 { color:var(--ink); line-height:1.25; }
.cms-public-body h2 { margin-top:34px; font-size:1.55rem; }
.cms-public-body h3 { margin-top:28px; font-size:1.2rem; }
.cms-copy,.cms-quote blockquote,.cms-callout p { white-space:pre-line; }
.cms-public-body ul,.cms-public-body ol { padding-left:24px; }
.cms-public-body li + li { margin-top:7px; }
.cms-quote { padding:18px 20px; border-left:4px solid var(--accent); background:var(--accent-soft); border-radius:0 12px 12px 0; }
.cms-quote blockquote { color:var(--ink); font-size:1.08rem; }
.cms-quote figcaption,.cms-image figcaption,.cms-video figcaption { margin-top:8px; color:var(--ink-3); font-size:.78rem; }
.cms-callout { padding:18px 20px; border:1px solid rgba(72,116,210,.28); border-radius:12px; background:rgba(72,116,210,.09); }
.cms-callout--success { border-color:rgba(41,140,72,.28); background:rgba(41,140,72,.09); }
.cms-callout--warning { border-color:rgba(224,179,74,.38); background:rgba(224,179,74,.11); }
.cms-callout--danger { border-color:rgba(198,63,63,.34); background:rgba(198,63,63,.10); }
.cms-callout strong { display:block; margin-bottom:4px; color:var(--ink); }
.cms-image img { display:block; width:100%; max-height:620px; object-fit:cover; border-radius:14px; background:var(--glass); }
.cms-video-frame { position:relative; width:100%; aspect-ratio:16 / 9; border-radius:14px; overflow:hidden; background:#000; }
.cms-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.cms-video-missing { padding:26px; border:1px dashed var(--glass-edge); border-radius:14px; color:var(--ink-3); font-size:.85rem; text-align:center; }
/* Collection block */
.cms-coll-head { margin-bottom:14px; }
.cms-coll-head h2 { margin:0; font-size:1.35rem; }
.cms-coll-head p { margin:6px 0 0; color:var(--ink-3); font-size:.88rem; }
.cms-coll-items { display:grid; gap:12px; }
.cms-coll--grid .cms-coll-items { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
.cms-coll--carousel .cms-coll-items { grid-auto-flow:column; grid-auto-columns:minmax(200px,1fr); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; }
.cms-coll--carousel .cms-coll-card { scroll-snap-align:start; }
.cms-coll-card { position:relative; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; color:inherit; text-decoration:none; transition:transform .15s ease, border-color .15s ease; }
.cms-coll--grid .cms-coll-card,.cms-coll--carousel .cms-coll-card { flex-direction:column; align-items:flex-start; text-align:left; }
.cms-coll-card:hover { transform:translateY(-2px); border-color:var(--accent); }
.cms-coll-card img,.cms-coll-ph { flex:none; width:56px; height:56px; border-radius:10px; object-fit:contain; background:var(--glass-strong); }
.cms-coll--grid .cms-coll-card img,.cms-coll--grid .cms-coll-ph,.cms-coll--carousel .cms-coll-card img,.cms-coll--carousel .cms-coll-ph { width:100%; height:120px; }
.cms-coll--card-detailed .cms-coll-card img,.cms-coll--card-detailed .cms-coll-ph { height:170px; }
.cms-coll-ph { display:grid; place-items:center; color:var(--ink-3); font-size:1.1rem; font-weight:700; }
.cms-coll-text { display:grid; gap:2px; min-width:0; }
.cms-coll-text strong { color:var(--ink); font-size:.95rem; overflow-wrap:anywhere; }
.cms-coll-sub,.cms-coll-meta { color:var(--ink-3); font-size:.76rem; }
.cms-coll-badge { position:absolute; top:10px; right:10px; padding:3px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:.7rem; font-weight:650; }
.cms-coll-more { margin-top:14px; }
.cms-coll-state { padding:16px 18px; border:1px dashed var(--glass-edge); border-radius:12px; color:var(--ink-3); font-size:.82rem; }
.cms-coll-state.is-empty { border-color:rgba(224,179,74,.45); background:rgba(224,179,74,.09); color:#8a6208; }
:root[data-theme="dark"] .cms-coll-state.is-empty { color:#e8b866; }

/* Columns block */
.cms-columns { display:grid; gap:20px; }
.cms-columns--middle { align-items:center; }
.cms-column > :first-child { margin-top:0; }
@media (min-width:760px) {
  .cms-columns--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cms-columns--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cms-columns--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* Accordion / tabs / badges / contents */
.cms-accordion { display:grid; gap:8px; }
.cms-accordion-item { padding:14px 16px; border:1px solid var(--glass-line); border-radius:12px; background:var(--glass); }
.cms-accordion-item summary { color:var(--ink); font-weight:650; cursor:pointer; }
.cms-accordion-body { margin-top:10px; color:var(--ink-2); }
.cms-tabsblock-strip { display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--glass-line); }
.cms-tabsblock-tab { padding:9px 14px; border:0; border-bottom:2px solid transparent; background:none; color:var(--ink-3); font:inherit; font-size:.88rem; font-weight:600; cursor:pointer; white-space:nowrap; }
.cms-tabsblock-tab.is-active { border-bottom-color:var(--accent); color:var(--ink); }
.cms-tabsblock-panel { padding-top:16px; }
.cms-badges { display:flex; flex-wrap:wrap; gap:7px; }
.cms-badge { padding:4px 11px; border:1px solid var(--glass-edge); border-radius:999px; background:var(--glass); color:var(--ink-2); font-size:.78rem; font-weight:600; }
.cms-badges--accent .cms-badge { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.cms-badges--success .cms-badge { border-color:rgba(41,140,72,.34); background:rgba(41,140,72,.10); }
.cms-badges--warning .cms-badge { border-color:rgba(224,179,74,.40); background:rgba(224,179,74,.12); }
.cms-anchor { display:block; height:0; scroll-margin-top:calc(var(--sticky-header-h, 70px) + 16px); }
.cms-public-body h2[id],.cms-public-body h3[id] { scroll-margin-top:calc(var(--sticky-header-h, 70px) + 16px); }
.cms-toc { padding:16px 20px; }
.cms-toc strong { display:block; margin-bottom:8px; color:var(--ink); font-size:.9rem; }
.cms-toc ul { margin:0; padding-left:18px; }
.cms-toc li + li { margin-top:5px; }
.cms-toc-l3 { margin-left:14px; }
.cms-toc a { color:var(--ink-2); font-size:.86rem; text-decoration:none; }
.cms-toc a:hover { color:var(--accent); text-decoration:underline; }

/* Public form block */
.cms-form { display:grid; gap:14px; padding:22px 24px; border:1px solid var(--glass-line); border-radius:14px; background:var(--glass); }
.cms-form-title { margin:0; color:var(--ink); font-size:1.2rem; }
.cms-form-owner { margin:0; padding:7px 10px; border-radius:9px; background:var(--accent-soft); color:var(--ink-2); font-size:.76rem; }
.cms-form-owner.is-warning { background:rgba(224,179,74,.16); color:#8a6208; }
:root[data-theme="dark"] .cms-form-owner.is-warning { color:#e8b866; }
.cms-form-intro { margin:-6px 0 0; color:var(--ink-3); font-size:.88rem; }
.cms-form-field { display:grid; gap:6px; }
.cms-form-field > label { color:var(--ink-2); font-size:.84rem; font-weight:650; }
.cms-form-field input,.cms-form-field textarea,.cms-form-field select { width:100%; padding:10px 12px; border:1px solid var(--glass-edge); border-radius:9px; background-color:var(--glass-strong); color:var(--ink); font:inherit; font-size:.9rem; box-sizing:border-box; }
.cms-form-field textarea { resize:vertical; min-height:96px; }
.cms-form-field input:focus,.cms-form-field textarea:focus,.cms-form-field select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.cms-form-field select { padding-right:32px; }
.cms-form-field input:disabled,.cms-form-field textarea:disabled,.cms-form-field select:disabled { opacity:.7; }
.cms-form-check { display:flex; align-items:center; gap:9px; color:var(--ink-2); font-size:.88rem; }
.cms-form-check input { width:17px !important; height:17px; flex:none; }
.cms-req { color:var(--danger); font-style:normal; }
.cms-form-hp { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0; }
.cms-form-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cms-form-status { margin:0; color:var(--ink-3); font-size:.82rem; }
.cms-form-status.is-error { color:var(--danger); }
.cms-form-done { padding:18px 20px; border:1px solid rgba(41,140,72,.3); border-radius:12px; background:rgba(41,140,72,.09); color:var(--ink); font-size:.92rem; }
.cms-faq { display:grid; gap:10px; }
.cms-faq-item { border:1px solid var(--glass-line); border-radius:12px; background:var(--glass); overflow:hidden; }
.cms-faq-item summary { padding:14px 18px; color:var(--ink); font-weight:650; cursor:pointer; list-style:none; position:relative; padding-right:40px; }
.cms-faq-item summary::-webkit-details-marker { display:none; }
.cms-faq-item summary::after { content:"＋"; position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-size:1rem; transition:transform .15s ease; }
.cms-faq-item[open] summary::after { content:"−"; }
.cms-faq-item > p { padding:0 18px 15px; white-space:pre-line; }
.cms-action { padding-top:4px; }
.cms-divider { border:0; border-top:1px solid var(--glass-line); }
/* The live page spaces a few blocks by where they sit in its flow
   (`.features-page > .cms-divider`), and a block in the canvas sits one wrapper
   deeper than that, so the rule missed it and the divider lost the 26px either
   side of it. Mirrored here, matched to what the live page collapses to. */
.cms-canvas.features-page .cms-divider { margin:26px 4px; }
.cms-rich-text { color:var(--ink-2); line-height:1.75; }
.cms-rich-text > * + * { margin-top:16px; }
.cms-rich-text h2,.cms-rich-text h3,.cms-rich-text h4 { color:var(--ink); line-height:1.25; }
.cms-rich-text ul,.cms-rich-text ol { padding-left:24px; }
.cms-table .cms-table-scroll { max-width:100%; overflow-x:auto; border:1px solid var(--glass-line); border-radius:12px; background:var(--glass); }
.cms-table table { width:100%; border-collapse:collapse; font-size:.92rem; }
.cms-table th,.cms-table td { padding:11px 14px; border-bottom:1px solid var(--glass-line); text-align:left; vertical-align:top; }
.cms-table tbody tr:last-child th,.cms-table tbody tr:last-child td { border-bottom:0; }
.cms-table th { color:var(--ink); font-weight:700; background:rgba(20,20,45,.05); }
.cms-table figcaption { margin-top:8px; color:var(--ink-3); font-size:.78rem; }
.cms-rich-text table { width:100%; border-collapse:collapse; font-size:.9rem; }
.cms-rich-text th,.cms-rich-text td { padding:10px; border:1px solid var(--glass-line); text-align:left; vertical-align:top; }
.cms-rich-text th { color:var(--ink); background:rgba(20,20,45,.05); }
.cms-preview-widget { border:2px dashed rgba(72,116,210,.45); text-align:center; }
.cms-preview-widget p { color:var(--ink-3); font-size:.82rem; }

/* Wide screens keep the list in view permanently; the toggle is a phone thing. */
.cms-pages-toggle { display:none; }
@media (max-width:860px) {
  .cms-admin-head,.cms-review-card { align-items:stretch; flex-direction:column; }
  /* The list stacks above the editor here, so it folds away once a page is
     open - otherwise every visit starts with a screenful of page names. */
  .cms-pages-toggle { display:flex; align-items:center; gap:8px; width:100%; padding:10px 12px; border:1px solid var(--glass-edge); border-radius:10px; background:var(--glass); color:var(--ink); font:inherit; font-size:.86rem; font-weight:650; text-align:left; cursor:pointer; }
  .cms-pages-toggle .ui-icon { width:15px; height:15px; flex:none; color:var(--ink-3); }
  .cms-pages-toggle::after { content:"⌄"; margin-left:auto; color:var(--ink-3); }
  .cms-sidebar.is-open .cms-pages-toggle::after { content:"⌃"; }
  .cms-page-search, .cms-page-filters, .cms-page-list { display:none; }
  .cms-sidebar.is-open .cms-page-search { display:flex; margin-top:9px; }
  .cms-sidebar.is-open .cms-page-filters { display:flex; }
  .cms-sidebar.is-open .cms-page-list { display:grid; }
  /* Below the two-column threshold, drop the fixed-height app shell and let the
     page scroll naturally - a pinned viewport region is cramped on phones. */
  .cms-workspace { grid-template-columns:1fr; position:static; height:auto; min-height:0; overflow:visible; }
  .cms-sidebar { border-right:0; border-bottom:1px solid var(--glass-line); }
  .cms-sidebar.is-open .cms-page-list { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); flex:none; overflow:visible; }
  .cms-group-label { grid-column:1 / -1; }
  .cms-editor { overflow:visible; }
  .cms-tabpanel.is-active { overflow:visible; }
  .cms-tabpanel[data-tabpanel="content"].is-active { overflow:visible; }
  .cms-canvas { overflow:visible; }
  .cms-fields,.cms-block-fields { grid-template-columns:1fr; }
  .cms-field-wide,.cms-block-fields .wide { grid-column:auto; }
  .cms-footer-toggle { padding-top:0; }
  .cms-editor { padding:16px 16px 0; }
  /* Without the app shell the bar sits after the whole canvas - some five
     thousand pixels down a real page - so it rides the bottom of the screen
     instead. Opaque, or the page text shows through the buttons. */
  .cms-actionbar { position:sticky; bottom:0; z-index:6; flex-wrap:wrap; margin:14px -16px 0; padding:10px 16px; background:linear-gradient(var(--glass-strong),var(--glass-strong)),var(--bg); }
  .cms-actionbar-state { flex-direction:row; align-items:center; gap:10px; width:100%; }
  .cms-summary-input { order:3; width:100%; }
  /* Four buttons do not fit one phone-width row, and the group is `flex:none`
     on wide screens - so it kept its content width and pushed Publish off the
     right edge of a bar that cannot be scrolled sideways. Here it takes the
     line and wraps inside it. */
  .cms-actions { order:2; margin-left:auto; flex:1 1 auto; flex-wrap:wrap; justify-content:flex-end; }
  .cms-content-toolbar { flex-wrap:wrap; }
  /* No hover on a touch screen, so the block's toolbar is simply always there,
     as a bar above the block rather than floating over its neighbour - and in
     the flow like that it needs no strip reserved for it. */
  .cms-block > .cms-block-head { position:static; opacity:1; pointer-events:auto; margin-bottom:6px; }
  .cms-block-tools { opacity:1; }
  .cms-insert-below { opacity:1; }
  .cms-canvas { padding:12px 10px 22px; }
  .cms-inserter { left:12px !important; right:12px; width:auto; }
}
:root[data-theme="dark"] .cms-status--published { color:#5cd897; }
:root[data-theme="dark"] .cms-status--pending { color:#e8b866; }
:root[data-theme="dark"] .cms-status--rejected { color:#ff9ba1; }
:root[data-theme="dark"] .cms-save-state.is-dirty { color:#e8b866; }
:root[data-theme="dark"] .cms-save-state.is-saved { color:#5cd897; }
:root[data-theme="dark"] .cms-video-check.is-ok { color:#5cd897; }
:root[data-theme="dark"] .cms-canvas { background:rgba(255,255,255,.04); }
/* The page-shaped canvas keeps the site's own backdrop in both themes, so what
   is behind the page in the editor is what is behind it live. */
.cms-canvas--guide, :root[data-theme="dark"] .cms-canvas--guide { background:var(--bg); }
:root[data-theme="dark"] .cms-image-upload { background:rgba(255,255,255,.04); }