/* ===========================================================================
   CMS — the builder, the media library, and the pages they produce.
   Loaded only on CMS screens and on a built page, so it costs nothing anywhere
   else. The rendered blocks lean on the site's own classes (eyebrow,
   font-display, station-card…) and only add what those do not cover.
   =========================================================================== */

/* Every surface below points at --surface and every colour at a token, because
   dark mode (html[data-theme="dark"], see dark.css) works by flipping those
   tokens. A hardcoded #fff stays white while the text around it turns light,
   which is how this stylesheet first shipped and why it was unreadable. */

/* ---- Tabs ---------------------------------------------------------------- */
.cms-tabs { display: flex; gap: .4rem; margin: 0 0 1.2rem; border-bottom: 1px solid var(--color-rule, #ded5c2); }
.cms-tab { padding: .55rem 1.1rem; border-radius: 8px 8px 0 0; font-weight: 600; text-decoration: none;
           color: var(--color-mute, #6b6452); border: 1px solid transparent; border-bottom: 0; }
.cms-tab:hover { color: var(--color-accent, #9E1B1B); }
.cms-tab.is-on { background: var(--surface, #fff); border-color: var(--color-rule, #ded5c2); color: var(--color-ink, #16223d); }

/* ---- Page list ----------------------------------------------------------- */
.cms-new-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .8rem; align-items: end; }
.cms-list td { vertical-align: top; }
.cms-actions { white-space: nowrap; display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.cms-chip { display: inline-block; padding: .08rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.cms-chip.is-live  { background: #e6f2e6; color: #1f6b2f; }
.cms-chip.is-pub   { background: #e7f0f7; color: #1e6091; }
.cms-chip.is-draft { background: #eee; color: #5a5347; }
.cms-chip.is-edit  { background: #fdf3e0; color: #8a5a12; margin-left: .3rem; }
.cms-chip.is-conv  { background: #f1edf7; color: #5b4a86; margin-left: .4rem; font-weight: 600; }
.cms-danger { border-color: #7d1414 !important; color: #7d1414 !important; }

/* ---- The builder --------------------------------------------------------- */
.cms-wrap { display: grid; grid-template-columns: 19rem 1fr; gap: 1.2rem; align-items: start; }
.cms-edit-head { margin-bottom: .8rem; }

/* The sidebar is three stacked parts: search at the top, the blocks scrolling
   in the middle, the toolbar pinned at the foot. Its height is set by the
   editor script to "what is left of the window", so the toolbar is on screen
   from the first moment rather than below the fold until you scroll. */
.cms-side { position: sticky; top: 1rem; background: var(--surface, #fff); border: 1px solid var(--color-rule, #ded5c2);
            border-radius: 12px; display: flex; flex-direction: column; overflow: hidden;
            height: calc(100vh - 2rem); min-height: 22rem; }
.cms-side-top { flex: none; padding: .7rem .7rem .4rem; }
.cms-find { display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem; border-radius: 9px;
            border: 1px solid var(--color-rule, #ded5c2); background: var(--color-cream, #fbf7ee); color: var(--color-mute, #6b6452); }
.cms-find:focus-within { border-color: var(--color-accent, #9E1B1B); }
.cms-find input { border: 0; background: transparent; font: inherit; font-size: .85rem; width: 100%; outline: none;
                  color: var(--color-ink, #16223d); padding: 0; }
html[data-theme="dark"] .cms-find input { background: transparent; }
.cms-side-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 .7rem .8rem; }
.cms-side h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
               color: var(--color-mute, #6b6452); margin: .8rem 0 .4rem; }
.cms-palette-group[hidden] { display: none; }
.cms-find-none { font-size: .82rem; color: var(--color-mute, #6b6452); text-align: center; margin: 1.5rem 0; }

/* Every tile the same size, whatever its name: icon over label, two lines at
   most, the same box every time. */
.cms-palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.cms-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
            height: 5.4rem; padding: .5rem .4rem; cursor: grab; text-align: center; font: inherit;
            border: 1px solid var(--color-rule, #ded5c2); border-radius: 10px; background: var(--surface, #fff);
            color: var(--color-ink, #16223d); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease; }
.cms-tile[hidden] { display: none; }
.cms-tile:hover, .cms-tile:focus-visible { border-color: var(--color-accent, #9E1B1B); color: var(--color-accent, #9E1B1B);
            box-shadow: 0 6px 16px -10px rgba(0,0,0,.35); transform: translateY(-1px); outline: none; }
.cms-tile:active { cursor: grabbing; transform: none; }
.cms-tile-i { font-size: 1.45rem; line-height: 1; height: 1.6rem; display: grid; place-items: center; opacity: .8; }
.cms-tile-l { font-size: .76rem; font-weight: 600; line-height: 1.2; overflow: hidden;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* The hover card. Fixed to the window and placed by the script, beside the
   sidebar where there is room. The drawing inside brings its own light page,
   because it is a picture of the public site. */
.cms-tip { position: fixed; z-index: 70; width: 17.5rem; pointer-events: none;
           background: var(--surface, #fff); color: var(--color-ink, #16223d);
           border: 1px solid var(--color-rule, #ded5c2); border-radius: 12px; padding: .8rem .85rem .85rem;
           box-shadow: 0 22px 48px -24px rgba(0,0,0,.55); }
.cms-tip[hidden] { display: none; }
.cms-tip strong { display: block; font-size: .95rem; }
.cms-tip p { margin: .25rem 0 .6rem; font-size: .8rem; line-height: 1.45; color: var(--color-ink-soft, #34405c); }
.cms-tip-demo svg { display: block; width: 100%; height: auto; border-radius: 8px;
                    box-shadow: 0 0 0 1px var(--color-rule, #ded5c2); }

/* The toolbar at the foot of the sidebar. */
.cms-side-bar { flex: none; border-top: 1px solid var(--color-rule, #ded5c2); padding: .5rem .6rem .6rem;
                background: var(--color-cream, #fbf7ee); }
.cms-side-status { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; min-height: 1.1rem; }
.cms-side-status .cms-save { font-size: .74rem; }
.cms-pubstate { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
                padding: .08rem .45rem; border-radius: 999px; background: var(--color-rule, #ded5c2); color: var(--color-ink-soft, #34405c); }
/* Wraps rather than clips: when the sidebar is at its narrow width, Publish
   drops to a full-width row of its own instead of being cut off at the edge. */
.cms-side-tools { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.cms-tool { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; flex: none; cursor: pointer;
            border: 1px solid var(--color-rule, #ded5c2); border-radius: 8px; background: var(--surface, #fff);
            color: var(--color-ink-soft, #34405c); text-decoration: none; }
.cms-tool:hover, .cms-tool:focus-visible { color: var(--color-accent, #9E1B1B); border-color: var(--color-accent, #9E1B1B); outline: none; }
.cms-tool-group { display: inline-flex; }
.cms-tool-group .cms-tool { border-radius: 0; margin-left: -1px; }
.cms-tool-group .cms-tool:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.cms-tool-group .cms-tool:last-child { border-radius: 0 8px 8px 0; }
.cms-tool.is-on { background: var(--color-accent, #9E1B1B); border-color: var(--color-accent, #9E1B1B); color: #fff; position: relative; }
.cms-publish-btn { flex: 1 0 5.5rem; height: 2.1rem; padding: 0 .9rem; border: 0; border-radius: 8px; cursor: pointer;
                   background: var(--color-accent, #9E1B1B); color: #fff; font: inherit; font-weight: 700; font-size: .85rem; }
.cms-publish-btn:hover { filter: brightness(1.08); }
/* On dark the accent is lifted to read as text, so the words on it go dark —
   the same answer dark.css gives the primary button. */
html[data-theme="dark"] .cms-tool.is-on,
html[data-theme="dark"] .cms-publish-btn { color: #16223d; }

.cms-canvas { min-height: 18rem; display: flex; flex-direction: column; gap: .7rem; }
.cms-empty { padding: 2.5rem 1rem; text-align: center; color: var(--color-mute, #6b6452);
             border: 2px dashed var(--color-rule, #ded5c2); border-radius: 12px; }
.cms-block { position: relative; background: var(--surface, #fff); border: 1px solid var(--color-rule, #ded5c2); border-radius: 10px; }
.cms-block.is-dragging { opacity: .4; }
.cms-block-head { cursor: grab; }
.cms-block-head:active { cursor: grabbing; }
/* Where a drop will land: a line in the gap above or below a card, or a glow
   on an empty slot or an empty page. */
.cms-block.is-drop-before::before, .cms-block.is-drop-after::after {
  content: ""; position: absolute; left: -2px; right: -2px; height: 3px; border-radius: 3px;
  background: var(--color-accent, #9E1B1B); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #9E1B1B) 22%, transparent);
  pointer-events: none; z-index: 2;
}
.cms-block.is-drop-before::before { top: -7px; }
.cms-block.is-drop-after::after { bottom: -7px; }
.is-drop-into { outline: 2px dashed var(--color-accent, #9E1B1B); outline-offset: 2px;
                background: color-mix(in srgb, var(--color-accent, #9E1B1B) 7%, transparent); border-radius: 10px; }
.is-drop-no { outline: 2px dashed var(--color-mute, #6b6452); outline-offset: 2px; opacity: .7; }
.cms-block.is-new { animation: cms-new 1.2s ease; }
@keyframes cms-new { 0% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent, #9E1B1B) 35%, transparent); }
                     100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .cms-block.is-new { animation: none; } }
.cms-block-head { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem;
                  border-bottom: 1px solid var(--color-rule, #ded5c2); background: var(--color-cream, #fbf7ee); border-radius: 10px 10px 0 0; }
.cms-grip { cursor: grab; opacity: .5; }
.cms-block-name { font-weight: 700; font-size: .84rem; color: var(--color-ink, #16223d); }
.cms-block-go { margin-left: auto; display: flex; gap: .2rem; }
.cms-block-go button { border: 1px solid var(--color-rule, #ded5c2); background: var(--surface, #fff); border-radius: 6px;
                       width: 1.6rem; height: 1.6rem; cursor: pointer; line-height: 1; }
.cms-block-fields { padding: .7rem; display: grid; gap: .6rem; }
.cms-f { display: block; font-size: .82rem; }
.cms-f > span { display: block; font-weight: 600; margin-bottom: .18rem; color: var(--color-ink, #16223d); }
.cms-f input[type=text], .cms-f textarea, .cms-f select { width: 100%; padding: .4rem .55rem;
  border: 1px solid var(--color-rule, #ded5c2); border-radius: 7px; font: inherit; background: var(--surface, #fff); }
.cms-f-help { display: block; margin-top: .2rem; font-style: normal; font-size: .76rem; color: var(--color-mute, #6b6452); }
.cms-rich { min-height: 5rem; padding: .5rem .6rem; border: 1px solid var(--color-rule, #ded5c2);
            border-radius: 7px; background: var(--surface, #fff); line-height: 1.55; }
.cms-rich:focus-visible { outline: 2px solid var(--color-accent, #9E1B1B); outline-offset: 2px; }

.cms-slots { display: grid; gap: .5rem; padding: .7rem; }
.cms-slots.cols-1 { grid-template-columns: 1fr; }
.cms-slots.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cms-slots.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Four and up are real editing targets, not thumbnails: keep each slot wide
   enough to drop a block into and let the row wrap. */
.cms-slots.cols-4, .cms-slots.cols-5, .cms-slots.cols-6 {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.cms-slots.is-down { grid-template-columns: 1fr; }
.cms-slot { display: flex; flex-direction: column; gap: .4rem; padding: .4rem;
            border: 1px dashed var(--color-rule, #ded5c2); border-radius: 8px; min-height: 4rem; }
.cms-slot-add { border: 0; background: transparent; color: var(--color-mute, #6b6452); cursor: pointer;
                font-size: .76rem; padding: .3rem; }
.cms-slot-add:hover { color: var(--color-accent, #9E1B1B); }

.cms-save { font-size: .8rem; font-weight: 600; color: var(--color-mute, #6b6452); }
.cms-save.is-ok { color: #1f6b2f; }
.cms-save.is-bad { color: #9E1B1B; }

/* ---- Repeaters, and a block you can fold away --------------------------- */
.cms-rep > span { display: block; font-weight: 600; margin-bottom: .18rem; color: var(--color-ink, #16223d); font-size: .82rem; }
.cms-rep-rows { display: grid; gap: .4rem; }
.cms-rep-none { margin: .2rem 0; font-size: .78rem; color: var(--color-mute, #6b6452); }
.cms-rep-row { display: grid; grid-template-columns: 1.1rem 1fr 1.4rem; gap: .4rem; align-items: start;
               padding: .45rem; border: 1px solid var(--color-rule, #ded5c2); border-radius: 8px;
               background: var(--color-cream, #fbf7ee); }
.cms-rep-row.is-over { border-color: var(--color-accent, #9E1B1B); }
.cms-rep-grip { cursor: grab; opacity: .5; text-align: center; line-height: 1.6; }
.cms-rep-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .35rem; min-width: 0; }
.cms-repcell { display: block; font-size: .76rem; min-width: 0; }
.cms-repcell > span { display: block; color: var(--color-mute, #6b6452); margin-bottom: .1rem; }
.cms-repcell input, .cms-repcell textarea, .cms-repcell select { width: 100%; padding: .3rem .4rem; font: inherit;
  font-size: .78rem; border: 1px solid var(--color-rule, #ded5c2); border-radius: 6px; background: var(--surface, #fff); }
.cms-rep-x { border: 0; background: transparent; cursor: pointer; color: var(--color-mute, #6b6452); font-size: 1rem; line-height: 1; }
.cms-rep-x:hover { color: var(--color-accent, #9E1B1B); }
.cms-rep-add { margin-top: .4rem; border: 1px dashed var(--color-rule, #ded5c2); background: transparent;
               border-radius: 7px; padding: .3rem .6rem; cursor: pointer; font-size: .78rem;
               color: var(--color-mute, #6b6452); }
.cms-rep-add:hover { border-color: var(--color-accent, #9E1B1B); color: var(--color-accent, #9E1B1B); }
.cms-block.is-folded .cms-block-fields, .cms-block.is-folded .cms-slots { display: none; }
.cms-block.is-folded .cms-block-head { border-bottom: 0; }

/* ---- The live view ------------------------------------------------------
   Three layouts off one attribute on the wrapper, so nothing has to be torn
   down and rebuilt when somebody switches between them. */
.cms-live { display: flex; flex-direction: column; min-width: 0; position: sticky; top: 1rem;
            height: calc(100vh - 2rem); border: 1px solid var(--color-rule, #ded5c2);
            border-radius: 12px; overflow: hidden; background: var(--surface, #fff); }
.cms-live-head { display: flex; align-items: center; gap: .5rem; padding: .4rem .7rem; font-size: .8rem;
                 border-bottom: 1px solid var(--color-rule, #ded5c2); background: var(--color-cream, #fbf7ee);
                 color: var(--color-ink, #16223d); font-weight: 700; }
.cms-live-note { font-weight: 400; color: var(--color-mute, #6b6452); }
.cms-live-w { margin-left: auto; display: inline-flex; gap: .15rem; }
.cms-live-w button { border: 1px solid var(--color-rule, #ded5c2); background: var(--surface, #fff);
                     border-radius: 6px; width: 1.7rem; height: 1.6rem; cursor: pointer; line-height: 1; }
.cms-live-w button.is-on { border-color: var(--color-accent, #9E1B1B); color: var(--color-accent, #9E1B1B); }
.cms-live-stage { flex: 1; min-height: 0; background: #e9e4d8; display: grid; place-items: start center; overflow: auto; }
.cms-live-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.cms-live-stage[data-w="tablet"] iframe { width: 768px; max-width: 100%; height: 100%; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.cms-live-stage[data-w="phone"] iframe  { width: 390px; max-width: 100%; height: 100%; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }

/* Edit · Side by side · Live */
.cms-wrap[data-view="edit"]  { grid-template-columns: 19rem 1fr; }
.cms-wrap[data-view="edit"]  .cms-live { display: none; }
.cms-wrap[data-view="split"] { grid-template-columns: 17rem minmax(0, 1fr) minmax(0, 1.1fr); }
.cms-wrap[data-view="live"]  { grid-template-columns: 17rem minmax(0, 1fr); }
/* The sidebar stays in Live view: the toolbar that switches views lives in it,
   and clicking a block still adds it — you just watch it arrive on the page. */
.cms-wrap[data-view="live"]  .cms-canvas { display: none; }
.cms-wrap[data-view="live"]  .cms-live { height: calc(100vh - 8rem); }

/* ---- Media --------------------------------------------------------------- */
.cms-media-pick { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.cms-media-thumbs { display: flex; gap: .25rem; flex-wrap: wrap; }
.cms-media-thumbs img { width: 2.6rem; height: 2.6rem; object-fit: cover; border-radius: 5px;
                        border: 1px solid var(--color-rule, #ded5c2); }
.cms-media-none, .cms-media-gone { font-size: .76rem; color: var(--color-mute, #6b6452); }
.cms-media-gone { color: #9E1B1B; }
.cms-media-doc { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 5px;
                 background: var(--color-cream, #fbf7ee); font-size: .62rem; font-weight: 700; color: var(--color-mute, #6b6452); }

.cms-drop { display: grid; gap: .2rem; place-items: center; padding: 1.6rem; cursor: pointer; text-align: center;
            border: 2px dashed var(--color-rule, #ded5c2); border-radius: 12px; }
.cms-drop.is-over { border-color: var(--color-accent, #9E1B1B); background: #fdf6f6; }
.cms-drop span { font-size: .82rem; color: var(--color-mute, #6b6452); }
.cms-up-go { display: flex; gap: .8rem; align-items: end; margin-top: .8rem; }
.cms-filter { display: flex; gap: .5rem; margin: 0 0 1rem; }
.cms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .8rem; }
.cms-item { margin: 0; border: 1px solid var(--color-rule, #ded5c2); border-radius: 10px; overflow: hidden; background: var(--surface, #fff); }
.cms-item-pic { display: grid; place-items: center; aspect-ratio: 4/3; background: var(--color-cream, #fbf7ee); overflow: hidden; }
.cms-item-pic img { width: 100%; height: 100%; object-fit: cover; }
.cms-item-doc { font-weight: 700; color: var(--color-mute, #6b6452); }
.cms-item figcaption { padding: .4rem .5rem; display: flex; gap: .3rem; align-items: center; font-size: .76rem; }
.cms-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-item-warn { color: #8a5a12; font-weight: 700; font-size: .68rem; }
.cms-item-del { border: 0; background: transparent; color: #9E1B1B; cursor: pointer; font-size: 1rem; line-height: 1; }
.cms-edit { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; }
.cms-edit-pic { width: 100%; border-radius: 8px; border: 1px solid var(--color-rule, #ded5c2); }
.cms-edit-fields { display: grid; gap: .6rem; }
.cms-edit-go { display: flex; gap: .5rem; }
.cms-inuse { padding: .5rem .7rem; border-radius: 8px; background: #fdf3e0; color: #8a5a12; font-size: .82rem; }

/* ---- Publish dialog -----------------------------------------------------
   Where the page is on its way to the public, as three steps, then the actions
   that move it along. */
.cms-pub-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; counter-reset: step; }
.cms-pub-steps li { position: relative; padding: .55rem .7rem .55rem 2.4rem; border-radius: 10px;
                    border: 1px solid var(--color-rule, #ded5c2); counter-increment: step; }
.cms-pub-steps li::before { content: counter(step); position: absolute; left: .7rem; top: .6rem; width: 1.2rem; height: 1.2rem;
                            border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700;
                            background: var(--color-rule, #ded5c2); color: var(--color-ink, #16223d); }
.cms-pub-steps li strong { display: block; font-size: .88rem; }
.cms-pub-steps li span { font-size: .78rem; color: var(--color-mute, #6b6452); }
.cms-pub-steps li.is-now { border-color: var(--color-accent, #9E1B1B); }
.cms-pub-steps li.is-now::before { background: var(--color-accent, #9E1B1B); color: #fff; }
.cms-pub-steps li.is-done::before { content: "✓"; background: #1f6b2f; color: #fff; }
html[data-theme="dark"] .cms-pub-steps li.is-now::before { color: #16223d; }
.cms-pub-acts { display: grid; gap: .7rem; margin-top: .3rem; }
.cms-pub-acts form { display: grid; gap: .25rem; justify-items: start; }

/* ---- Page settings ------------------------------------------------------
   One dialog for everything about the page itself, instead of a stack of
   fields under the block palette. Below the picker in z-order, because the
   picker opens on top of it. Tokens only, so dark mode comes for free. */
.cms-modal { position: fixed; inset: 0; background: rgba(22,34,61,.55); display: grid; place-items: center;
             z-index: 55; padding: 1rem; }
.cms-modal-box { background: var(--surface, #fff); color: var(--color-ink, #16223d); border-radius: 14px;
                 width: min(40rem, 100%); max-height: 88vh; display: flex; flex-direction: column;
                 gap: .7rem; padding: 1.1rem; box-shadow: 0 30px 70px -40px rgba(0,0,0,.6); }
.cms-modal-box header { display: flex; align-items: center; font-size: 1.05rem; }
.cms-modal-body { overflow: auto; display: flex; flex-direction: column; gap: .9rem; padding-right: .2rem; }
.cms-modal-box footer { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; }
.cms-modal-box footer .cms-save { margin-right: auto; }
.cms-set-widths { border: 1px solid var(--color-rule, #ded5c2); border-radius: 10px; padding: .7rem .8rem;
                  display: flex; flex-direction: column; gap: .45rem; }
.cms-set-widths legend { padding: 0 .3rem; }
.cms-set-w { display: flex; gap: .55rem; align-items: flex-start; cursor: pointer; }
.cms-set-w span { display: flex; flex-direction: column; line-height: 1.3; }
.cms-set-w em { font-style: normal; font-size: .8rem; color: var(--color-mute, #6b6452); }
.cms-set-check { display: flex; gap: .55rem; align-items: center; cursor: pointer; }
.cms-set-og .cms-media-thumb img { width: 4.5rem; height: 3.2rem; object-fit: cover; border-radius: 6px;
                                   border: 1px solid var(--color-rule, #ded5c2); }

.cms-picker { position: fixed; inset: 0; background: rgba(22,34,61,.55); display: grid; place-items: center; z-index: 60; padding: 1rem; }
.cms-picker-box { background: var(--surface, #fff); border-radius: 14px; width: min(52rem, 100%); max-height: 85vh;
                  display: flex; flex-direction: column; gap: .6rem; padding: 1rem; }
.cms-picker-box header { display: flex; align-items: center; }
.cms-picker-x { margin-left: auto; border: 0; background: transparent; font-size: 1.3rem; cursor: pointer; line-height: 1; }
.cms-picker-grid { overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .6rem; }
.cms-pick { border: 1px solid var(--color-rule, #ded5c2); border-radius: 8px; background: var(--surface, #fff); cursor: pointer;
            padding: 0; overflow: hidden; display: grid; }
.cms-pick img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.cms-pick span { padding: .3rem; font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-pick.is-on { border-color: var(--color-accent, #9E1B1B); box-shadow: 0 0 0 2px rgba(158,27,27,.2); }
.cms-picker-box footer { display: flex; gap: .5rem; justify-content: space-between; }

/* ---- Dark mode ----------------------------------------------------------
   Everything above reads from the tokens, which dark.css flips, so the broad
   strokes need nothing here. These are the exceptions: the status chips carry
   deliberate pastel backgrounds of their own, so their text is pinned rather
   than following a token; and a red that reads on white is too dark to read on
   navy. Same switch the rest of the site uses — html[data-theme="dark"]. */
html[data-theme="dark"] .cms-tab.is-on { background: var(--surface); }
html[data-theme="dark"] .cms-chipbtn:hover { color: var(--color-accent); border-color: var(--color-accent); }
html[data-theme="dark"] .cms-block-head { background: #1b2540; }
html[data-theme="dark"] .cms-slot { border-color: #33415f; }
html[data-theme="dark"] .cms-drop.is-over { background: #241b23; }
html[data-theme="dark"] .cms-item-pic { background: #111a2d; }
html[data-theme="dark"] .cms-media-doc { background: #1b2540; color: var(--color-mute); }
html[data-theme="dark"] .cms-danger { border-color: #ef6b62 !important; color: #ef6b62 !important; }
html[data-theme="dark"] .cms-item-del { color: #ef6b62; }
html[data-theme="dark"] .cms-picker-box { background: var(--surface); }
html[data-theme="dark"] .cms-inuse { background: #3a2f12; color: #f0d79a; }
html[data-theme="dark"] .cms-chip.is-live  { background: #15301d; color: #86d99b; }
html[data-theme="dark"] .cms-chip.is-pub   { background: #12283c; color: #8ec6ef; }
html[data-theme="dark"] .cms-chip.is-draft { background: #232c42; color: #b3bed6; }
html[data-theme="dark"] .cms-chip.is-edit  { background: #3a2f12; color: #f0d79a; }
html[data-theme="dark"] .cms-chip.is-conv  { background: #2b2440; color: #c3b2ec; }
html[data-theme="dark"] .cms-empty { border-color: #33415f; }

/* ---- A built page -------------------------------------------------------- */
.cms-page { max-width: 68rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
/* Page width, chosen in Page settings. 'normal' is the reading column built
   pages have always had, so it needs nothing; 'wide' is the 80rem container
   the hand-built pages use (max-w-6xl); 'full' hands width to the blocks. */
.cms-page.is-wide { max-width: 80rem; }
.cms-page.is-full { max-width: none; }
/* A band's background goes edge to edge; the words inside it keep the page's
   own column, so the two agree. */
.cms-page.is-wide :is(.cms-band-in, .cms-values-in, .cms-callout-in, .cms-stats-in, .cms-ctaband-in) {
  max-width: 80rem;
}
.cms-page.is-full :is(.cms-band-in, .cms-values-in, .cms-callout-in, .cms-stats-in, .cms-ctaband-in) {
  max-width: none;
}
.cms-b { margin: 0 0 1.5rem; }
.cms-head .eyebrow { margin-bottom: .25rem; font-size: calc(var(--cms-hs, 1.875rem) * .5); }
/* The small line is half the heading's own size, whichever size that is. --cms-hs
   mirrors the heading's text-* classes, including its step up on wider screens. */
.cms-head-l2 { --cms-hs: 1.875rem; }
.cms-head-l3 { --cms-hs: 1.5rem; }
.cms-head-l4 { --cms-hs: 1.25rem; }
@media (min-width: 48rem) { .cms-head-l2 { --cms-hs: 2.25rem; } }
.cms-head-sub { font-size: .95rem; max-width: 46rem; }

/* The small line to the LEFT of the heading: one row, split by a thin rule. */
.cms-head-row { display: flex; align-items: center; gap: 1rem; }
.cms-head[style*="center"] .cms-head-row { justify-content: center; }
/* Never wrapping: in a narrow column the heading used to drop beneath the small
   line, leaving it alone above with a rule beside nothing. The small line
   takes up to a third and wraps inside it instead. */
.cms-head-row .eyebrow { flex: 0 1 auto; max-width: 33%; margin: 0; padding-right: 1rem; line-height: 1.5;
                         border-right: 2px solid var(--color-rule, #ded5c2); align-self: stretch;
                         display: flex; align-items: center; }
.cms-head-row > :is(h2, h3, h4) { flex: 1 1 0; min-width: 0; margin: 0; }
.cms-head[style*="center"] .cms-head-row > :is(h2, h3, h4) { flex: 0 1 auto; }
/* To the right: right after the heading's words, not at the far edge, with the
   rule on the small line's left. A phone still puts it on top. */
.is-eye-right .cms-head-row > :is(h2, h3, h4) { flex: 0 1 auto; }
.is-eye-right .cms-head-row .eyebrow { padding-right: 0; padding-left: 1rem; border-right: 0;
                                       border-left: 2px solid var(--color-rule, #ded5c2); }
@media (max-width: 640px) {
  .cms-head-row { display: flex; flex-direction: column-reverse; align-items: stretch; }
  .is-eye-left .cms-head-row { flex-direction: column; }
  .cms-head[style*="center"] .cms-head-row { align-items: center; }
  .cms-head-row .eyebrow,
  .is-eye-right .cms-head-row .eyebrow { padding: 0; border: 0; margin-bottom: .6rem; max-width: none; }
}

/* Text colours for the heading's small lines. */
.cms-tc-red      { color: var(--color-accent, #9e1b1b); }
.cms-tc-grey     { color: var(--color-mute, #6b6452); }
.cms-tc-darkgold { color: #7d6220; }
.cms-tc-gold     { color: #c2a14d; }
.cms-tc-navy     { color: #1d3557; }
.cms-tc-ink      { color: var(--color-ink, #16223d); }
html[data-theme="dark"] .cms-tc-darkgold { color: #d8b864; }
html[data-theme="dark"] .cms-tc-gold     { color: #e2c372; }
html[data-theme="dark"] .cms-tc-navy     { color: #9fb6d9; }
.cms-head[style*="center"] .cms-head-sub { margin-inline: auto; }
.cms-prose { line-height: 1.7; }
.cms-prose p { margin: 0 0 .9rem; }
.cms-prose ul, .cms-prose ol { margin: 0 0 .9rem 1.2rem; }
.cms-quote { margin: 1.6rem 0; padding: .4rem 0 .4rem 1.1rem; border-left: 4px solid var(--color-accent, #9E1B1B); }
.cms-quote p { font-size: 1.15rem; font-style: italic; margin: 0; }
.cms-quote cite { display: block; margin-top: .4rem; font-size: .85rem; font-style: normal; opacity: .75; }
.cms-rule { border: 0; border-top: 2px solid #C2A14D; margin: 2rem 0; }
.cms-space.is-sm { height: 1rem; } .cms-space.is-md { height: 2.5rem; } .cms-space.is-lg { height: 5rem; }
.cms-img img { width: 100%; height: auto; border-radius: 10px; display: block; }
.cms-img.is-wide { max-width: none; } .cms-img.is-full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
.cms-img.is-full img { border-radius: 0; }
.cms-img figcaption, .cms-video figcaption { margin-top: .4rem; font-size: .84rem; color: var(--color-ink-soft, #6B6452); }
.cms-imgtext { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-items: center; }
.cms-imgtext.is-right .cms-imgtext-pic { order: 2; }
.cms-imgtext-pic img { width: 100%; height: auto; border-radius: 10px; display: block; }
.cms-gallery { display: grid; gap: .6rem; }
.cms-gallery.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cms-gallery.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-gallery.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cms-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; display: block; }
.cms-video-frame { position: relative; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: #000; }
.cms-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cms-file a { display: inline-flex; gap: .4rem; align-items: center; font-weight: 600; }
.cms-file span { font-weight: 400; opacity: .7; font-size: .85rem; }
.cms-cols { display: grid; gap: 1.6rem; align-items: start; }
.cms-cols.is-middle { align-items: center; }
/* Same height: the column stretches, and whatever single box is in it fills
   the column — so two cards with different amounts of words still line up. */
.cms-cols.is-match { align-items: stretch; }
.cms-cols.is-match > .cms-col { display: flex; flex-direction: column; }
.cms-cols.is-match > .cms-col > * { flex: 1 1 auto; margin-bottom: 0; }
.cms-cols.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cms-cols.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-cols.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cms-cols.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cms-cols.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Five and six across stop being columns on a laptop long before they stop
   being columns on a phone, so they step down rather than squeeze. */
@media (max-width: 1100px) {
  .cms-cols.cols-5, .cms-cols.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .cms-cols.cols-4, .cms-cols.cols-5, .cms-cols.cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Stacked. Deliberately after the step-downs above: at every width this is the
   last word, so "down" means down and not "down until the screen is wide". */
.cms-cols.is-down { grid-template-columns: 1fr; align-items: stretch; }
.cms-cols.is-down > .cms-col > :last-child { margin-bottom: 0; }
.cms-band { margin: 0 0 1.5rem; padding: 3rem 0; }
.cms-band.is-cream { background: #F7F1E6; }
/* Navy is the numbers band's own backdrop, gradient and all, so a band with
   Stat blocks dropped into it is the band from the home page. */
.cms-band.is-navy {
  background: radial-gradient(100% 160% at 10% 0%, #233660 0%, transparent 60%), var(--color-paper-warm, #16223d);
  color: #fff;
}
.cms-band.is-ink   { background: #34405C; color: #eef1f7; }

/* One stat on its own. The .stat classes come from the site, so it looks the
   same whether it sits in a band of four or by itself in a column. */
.cms-stat { margin: 0; }
.cms-stat .stat-value { font-size: clamp(2rem, 4vw, 3rem); }
.cms-stat .stat-label { color: var(--color-ink-soft, #34405c); }
.cms-band.is-navy .cms-stat .stat-label,
.cms-band.is-ink .cms-stat .stat-label,
.cms-stats .cms-stat .stat-label { color: color-mix(in srgb, #fff 75%, var(--color-paper-warm, #16223d)); }
.cms-band-in { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
.cms-classes { display: grid; gap: .5rem; }
.cms-class { display: grid; grid-template-columns: 11rem 1fr auto; gap: .8rem; padding: .7rem .9rem;
             border: 1px solid var(--color-rule, #ded5c2); border-radius: 10px; text-decoration: none; background: #fff; }
.cms-class:hover { border-color: var(--color-accent, #9E1B1B); }
.cms-class-name { font-weight: 700; }
.cms-class-when, .cms-class-where { color: var(--color-ink-soft, #6B6452); font-size: .88rem; }

.cms-preview-bar { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; padding: .6rem 1.25rem;
                   background: #16223D; color: #fff; font-size: .85rem; }
.cms-preview-bar a { color: #C2A14D; font-weight: 600; }
.cms-preview-bar span { opacity: .8; }

@media (max-width: 70rem) {
  /* No room for two things at once: side-by-side folds to the editor, with the
     Live view button still there for a full-width look. */
  .cms-wrap[data-view="split"] { grid-template-columns: 17rem minmax(0, 1fr); }
  .cms-wrap[data-view="split"] .cms-live { display: none; }
}
@media (max-width: 60rem) {
  .cms-wrap, .cms-wrap[data-view="edit"], .cms-wrap[data-view="split"] { grid-template-columns: 1fr; }
  .cms-side { position: static; height: auto !important; min-height: 0; }
  .cms-side-scroll { max-height: 22rem; }
  .cms-new-row, .cms-edit, .cms-imgtext { grid-template-columns: 1fr; }
  .cms-gallery.cols-3, .cms-gallery.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Every count spelled out: a bare .cms-slots is weaker than .cms-slots.cols-2
     and loses whatever order it comes in — which is why these never stacked. */
  .cms-slots.cols-2, .cms-slots.cols-3, .cms-slots.cols-4, .cms-slots.cols-5, .cms-slots.cols-6 { grid-template-columns: 1fr; }
  .cms-class { grid-template-columns: 1fr; }
}

/* ---- The page shapes ----------------------------------------------------
   These lean on the site's own card classes (service-card, cta-card, stat,
   value-icon…) and only add the arrangement around them, so a built page and
   a hand-built one are the same components in the same colours. */
/* The Hero block renders the site's own .hero markup (see cms_render_hero),
   so its looks live in app.css with the hand-built one. Nothing to style here —
   which is the point: there is one hero on this site, not two. */

.cms-values { margin: 0 0 1.5rem; }
/* The items are the site's .value-item, which carry their own padding and the
   rule between them; this only decides how many sit in a row. */
.cms-values-in { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; display: grid;
                 grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: 0; }
.cms-value { display: flex; gap: .6rem; align-items: center; justify-content: center; }

/* ---- Corners -------------------------------------------------------------
   One setting, one pair of classes, every box that offers it. Overflow is
   hidden so a background or an image cannot square the corner off again. */
.cms-b.is-soft, .cms-band.is-soft, .cms-callout.is-soft, section.is-soft { border-radius: 14px; overflow: hidden; }
.cms-b.is-round, .cms-band.is-round, .cms-callout.is-round, section.is-round { border-radius: 26px; overflow: hidden; }
/* A grid of cards rounds its cards, not the grid. */
.cms-cards.is-soft { border-radius: 0; overflow: visible; }
.cms-cards.is-round { border-radius: 0; overflow: visible; }
.cms-cards.is-soft .cms-card { border-radius: 14px; }
.cms-cards.is-round .cms-card { border-radius: 26px; }

/* A callout drawn as a card: the site's own .cta-card does the work, this only
   sizes it for a column. */
.cms-cta-card { display: flex; flex-direction: column; height: 100%; margin: 0; }
.cms-cta-card .eyebrow { margin: .2rem 0 -.3rem; }
.cms-cta-card h3 { color: #fff; }

.cms-callout { margin: 0 0 1.5rem; padding: 2.5rem 0; }
.cms-callout.is-blue  { background: #1e6091; color: #eaf3fa; }
.cms-callout.is-cream { background: var(--color-cream, #fbf7ee); }
.cms-callout.is-navy  { background: #16223D; color: #e8eef7; }
.cms-callout-in { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; display: flex; gap: 1.4rem;
                  align-items: center; flex-wrap: wrap; }
.cms-callout-icon { flex: 0 0 auto; opacity: .9; }
.cms-callout-words { flex: 1 1 22rem; min-width: 0; }
.cms-callout-body { margin-top: .5rem; line-height: 1.6; max-width: 46rem; opacity: .9; }
.cms-callout.is-blue .eyebrow, .cms-callout.is-navy .eyebrow { color: #C2A14D; }
.cms-callout-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700;
                   padding: .8rem 1.4rem; border-radius: 8px; background: #fff; color: #16223D; text-decoration: none; }
.cms-callout.is-cream .cms-callout-cta { background: #9E1B1B; color: #fff; }
.cms-callout-cta:hover { opacity: .9; }

.cms-cards { display: grid; gap: 1rem; }
.cms-cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cms-cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-cards.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
a.cms-card { text-decoration: none; color: inherit; display: block; }

.cms-stats { background: #16223D; color: #e8eef7; margin: 0 0 1.5rem; padding: 2.4rem 0; }
.cms-stats-in { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; display: grid;
                grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.6rem; text-align: center; }
.cms-stats .stat-value { font-size: 2.4rem; line-height: 1; color: #C2A14D; }
.cms-stats .stat-label { margin-top: .35rem; font-size: .9rem; opacity: .85; }

/* Cream, with a rule above it — .cta-band on the live site. The navy belongs
   to the cards, not to what they sit on. */
.cms-ctaband { background: var(--color-cream, #fbf7ee); border-top: 1px solid var(--color-rule, #ded5c2);
               margin: 0 0 1.5rem; padding: 3rem 0; }
.cms-ctaband-in { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; display: grid;
                  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.4rem; }
.cms-ctaband .cta-card h3 { color: #fff; }

@media (max-width: 60rem) {
  .cms-cards.cols-3, .cms-cards.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .cms-cards.cols-2, .cms-cards.cols-3, .cms-cards.cols-4 { grid-template-columns: 1fr; }
}

/* ---- Full-width bands on a built page -----------------------------------
   The home hero and the burn banner are edge-to-edge on the hand-built page
   they come from, so inside the CMS page's 68rem column they would read as
   cards. Same trick the full-width image uses. The hero also loses the page's
   top padding when it is first, because on index.php it starts under the
   header with nothing above it. */
.cms-page > .hero,
.cms-page > .cms-band,
.cms-page > .cms-values,
.cms-page > .cms-callout,
.cms-page > .cms-stats,
.cms-page > .cms-ctaband,
.cms-page > .signs-band,
.cms-page > .burn-banner {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}

/* ---- A section inside something else -------------------------------------
   Dropped into a column or a band, these stop being bands: no background of
   their own, no padding, no column width. Otherwise a Call-to-action cards
   block in a column paints a square backdrop behind its own rounded card.
   Every selector here carries .is-nested — the rule above it is a different
   rule, and running the two together is what briefly stripped the hero's
   background on every built page. */
.cms-band.is-nested, .cms-values.is-nested, .cms-callout.is-nested,
.cms-stats.is-nested, .cms-ctaband.is-nested, .cms-signs.is-nested {
  background: none; border: 0; padding: 0; margin: 0; border-radius: 0; height: 100%;
}
.cms-signs.is-nested > div,
.is-nested > :is(.cms-band-in, .cms-values-in, .cms-callout-in, .cms-stats-in, .cms-ctaband-in) {
  max-width: none; padding: 0; height: 100%;
}
/* One card in a nested CTA block should fill the column it was put in, so two
   of them beside each other line up with "All the same height" on. */
.cms-ctaband.is-nested .cms-ctaband-in { gap: 1rem; }
.cms-ctaband.is-nested .cta-card { height: 100%; }
.cms-page > .hero:first-child,
.cms-page > .burn-banner:first-child { margin-top: -2.5rem; }
.cms-page > .hero { margin-bottom: 0; }
.cms-page > .hero + .cms-b { margin-top: 2rem; }

/* ---- Feature cards, down the page -----------------------------------------
   At the very end on purpose: after every step-down above, so "down" is the
   last word at every width. Each card lies on its side — icon on the left,
   words beside it — which is what a list of features wants to look like. */
.cms-cards.is-down { grid-template-columns: 1fr; }
.cms-cards.is-down .cms-card { display: grid; grid-template-columns: auto 1fr; gap: 0 1.1rem; align-items: start; }
.cms-cards.is-down .cms-card-words h3 { margin-top: 0; }

/* ---- On a phone ----------------------------------------------------------
   The last word, at the very end of the file, with selectors as specific as
   the ones they override. Columns used to carry a "stack on a phone" rule that
   could never win (.cms-cols is weaker than .cms-cols.cols-2), so a row of two
   cards stayed two across at 390px wide and ran off the side of the screen.

   What happens is the Columns block's own choice — stack, two across, or keep
   — because a pair of cards and a row of four numbers want different things.
   640px is the site's own "sm" breakpoint, where its hand-built rows stack. */
.cms-col { min-width: 0; }
@media (max-width: 640px) {
  .cms-cols.ph-stack { grid-template-columns: minmax(0, 1fr); }
  .cms-cols.ph-two:not(.is-down) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-cols.ph-keep.cols-2:not(.is-down) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-cols.ph-keep.cols-3:not(.is-down) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cms-cols.ph-keep.cols-4:not(.is-down) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cms-cols.ph-keep.cols-5:not(.is-down) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cms-cols.ph-keep.cols-6:not(.is-down) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* Stacked columns are spaced like stacked sections, not like cells. */
  .cms-cols.ph-stack { gap: 1.25rem; }
}
.signs-inner.is-soft { border-radius: 14px; }
.signs-inner.is-round { border-radius: 26px; }

/* ---- The builder, full screen -------------------------------------------
   The editor page asks the portal for its bare mode (no top bar, no footer,
   no padding) and then owns the window: the panels run the full height, each
   scrolls on its own, and they meet at a hairline rather than floating as
   cards. The page itself never scrolls. Below 60rem it falls back to the
   stacked layout, where scrolling the page is the only sane thing to do. */
.cms-side-head { display: flex; align-items: flex-start; gap: .35rem; }
.cms-side-head .bsbl-btn { width: 2.1rem; height: 2.1rem; margin-top: -.15rem; color: var(--color-ink, #16223d); }
.cms-side-title { padding: .1rem .15rem .55rem; min-width: 0; flex: 1; }
.cms-side-title strong { display: block; font-size: 1rem; color: var(--color-ink, #16223d);
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-side-title span { display: block; font-size: .74rem; color: var(--color-mute, #6b6452); }
.cms-side-title b { color: #1f6b2f; }
html[data-theme="dark"] .cms-side-title b { color: #86d99b; }

@media (min-width: 60.01rem) {
  body.epx-bare { height: 100vh; overflow: hidden; }
  .epx-bare .cms-wrap { height: 100vh; gap: 0; align-items: stretch; }
  .epx-bare .cms-wrap > * { min-height: 0; }
  .epx-bare .cms-side { position: static; height: 100vh !important; border: 0; border-radius: 0;
                        border-right: 1px solid var(--color-rule, #ded5c2); }
  .epx-bare .cms-canvas { height: 100vh; overflow: auto; padding: 1rem 1.1rem 5rem; }
  .epx-bare .cms-live { position: static; height: 100vh; border: 0; border-radius: 0;
                        border-left: 1px solid var(--color-rule, #ded5c2); }
  .epx-bare .cms-wrap[data-view="live"] .cms-live { height: 100vh; }
}