/* central.css — prototype-only additions on top of admin.css.
   Everything here is HQ/catalogue-specific chrome the single-site admin
   doesn't need. Uses the same tokens as admin.css so it stays coherent. */

/* ---- Sidebar scroll: pin badge + footer, scroll only the nav list ------
   admin.css already makes .sidebar a flex column, but the nav has no
   overflow rule, so a tall menu pushes the footer (and last items) off
   screen. min-height:0 lets the flex child shrink; overflow-y scrolls it.
   The context badge and footer stay put. */
.sidebar { height: 100vh; height: 100dvh; }
.sidebar .ctx-switch, .sidebar .brand, .sidebar .footer { flex: 0 0 auto; }
.sidebar nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
    position: relative;
}
.sidebar nav::-webkit-scrollbar { width: 9px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
.sidebar nav:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28); background-clip: padding-box; }

/* Scroll-edge fades — pinned to the top/bottom of the scroll viewport via
   sticky + negative margin (so they take no layout space). JS toggles the
   has-overflow-* classes; fade only shows when content is hidden that way. */
.nav-fade { position: sticky; left: 0; right: 0; height: 22px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .15s ease; }
.nav-fade-top    { top: 0;    margin-bottom: -22px; background: linear-gradient(to bottom, #1f2433 35%, rgba(31,36,51,0)); }
.nav-fade-bottom { bottom: 0; margin-top: -22px;    background: linear-gradient(to top,    #1f2433 35%, rgba(31,36,51,0)); }
.sidebar nav.has-overflow-top    .nav-fade-top    { opacity: 1; }
.sidebar nav.has-overflow-bottom .nav-fade-bottom { opacity: 1; }

/* ---- Context switcher (top of sidebar — sits on the DARK sidebar) ------- */
.ctx-switch { position: relative; margin: -1.1rem 0 0.7rem; padding: 0.95rem 1.1rem 0.9rem; background: linear-gradient(180deg, color-mix(in srgb, var(--sb) 22%, #2a3142) 0%, color-mix(in srgb, var(--sb) 9%, #1c2230) 100%); border-bottom: 1px solid rgba(255,255,255,0.09); }
.ctx-switch::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--sb) 0%, color-mix(in srgb, var(--sb) 35%, transparent) 65%, transparent 100%); }
a.ctx-hq { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; margin: 0 -0.5rem; padding: 0.45rem 0.5rem; border-radius: 10px; transition: background .12s; }
a.ctx-hq:hover { background: rgba(255,255,255,0.06); }
a.ctx-hq.is-active { background: rgba(255,255,255,0.08); }
a.ctx-hq:hover .ctx-hq-name, a.ctx-hq.is-active .ctx-hq-name { color: #fff; }
.ctx-hq-mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-primary); color: #fff; flex: 0 0 auto; }
.ctx-hq-mark svg { width: 18px; height: 18px; }
.ctx-hq-meta { display: flex; flex-direction: column; line-height: 1.15; }
.ctx-hq-name { font-weight: 700; font-size: 0.92rem; color: #f1f5f9; }
.ctx-hq-sub { font-size: 0.72rem; color: #94a3b8; }

/* Site context header: a bold, brand-COLOURED block so it's unmistakable
   you've drilled into one specific site (vs the neutral slate HQ header).
   The top of the sidebar literally takes on the site's colour. */
.ctx-exit { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(255,255,255,0.5); text-decoration: none; margin-bottom: 0.7rem; }
.ctx-exit svg { width: 13px; height: 13px; }
.ctx-exit:hover { color: #fff; }
.ctx-site-head { display: flex; align-items: center; gap: 0.65rem; }
.ctx-site-avatar { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.1rem; flex: 0 0 auto; background: var(--sb); box-shadow: 0 3px 10px color-mix(in srgb, var(--sb) 45%, transparent), inset 0 0 0 1px rgba(255,255,255,0.22); }
a.ctx-site-main { display: flex; flex-direction: column; gap: 0.12rem; flex: 1 1 auto; min-width: 0; text-decoration: none; }
.ctx-site-eyebrow { font-size: 0.55rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.ctx-site-name { font-weight: 700; font-size: 1rem; line-height: 1.1; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.ctx-site-main:hover .ctx-site-name, a.ctx-site-main.is-active .ctx-site-name { opacity: 0.85; }
.ctx-view { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: rgba(255,255,255,0.6); text-decoration: none; flex: 0 0 auto; transition: background .12s ease, color .12s ease; }
.ctx-view svg { width: 15px; height: 15px; }
.ctx-view:hover { color: #fff; background: rgba(255,255,255,0.1); }
.ctx-site-sub { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-top: 0.7rem; }
.ctx-site-domain { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.66rem; color: rgba(255,255,255,0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-variant-numeric: tabular-nums; }
.ctx-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 2px rgba(52,211,153,0.25); flex: 0 0 auto; }
/* Reachability dot - HTTP check of the public URL, resolved async. Its own
   axis, separate from the Dev/Live launch pill. */
.ctx-reach { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; background: #64748b; }
.ctx-reach.is-checking { background: #64748b; animation: ctx-reach-pulse 1.2s ease-in-out infinite; }
.ctx-reach.is-up   { background: #34d399; box-shadow: 0 0 0 2px rgba(52,211,153,0.25); }
.ctx-reach.is-down { background: #f87171; box-shadow: 0 0 0 2px rgba(248,113,113,0.25); }
@keyframes ctx-reach-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ctx-reach.is-checking { animation: none; } }
.ctx-site-sub .ctx-chip { margin-top: 0; flex: 0 0 auto; }
.ctx-chip { display: inline-block; margin-top: 0.5rem; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.5rem; border-radius: 999px; }
.ctx-chip-ok   { background: #dcfce7; color: #15803d; }
.ctx-chip-info { background: #dbeafe; color: #1d4ed8; }
.ctx-chip-warn { background: #fef3c7; color: #b45309; }
.ctx-chip-muted{ background: #f1f5f9; color: #64748b; }
/* The bad chip. Used on the expired pill on a sent quote and on the error
   count in Quality benchmarks, and defined nowhere until now, so both rendered
   as a plain neutral chip: "expired" and "12 errors" read as ordinary status.
   Red 700 on red 100, following the same 700-on-100 pattern as its siblings.
   MEASURED at 5.30:1, not eyeballed. The chip is 0.66rem bold, which is small
   text however bold it is, so AA wants 4.5:1. The obvious red 600 (#dc2626)
   comes out at 3.95:1 and fails. */
.ctx-chip-bad  { background: #fee2e2; color: #b91c1c; }

/* ---- Context accent on the active-nav marker --------------------------
   admin.css hardcodes a green left-border on the active item. Re-point it
   at --brand-primary so the marker follows context: slate at HQ, the site's
   own colour inside a site. Buttons stay green (shared brand). */
.sidebar nav a.active { border-left-color: var(--brand-primary); }
.sidebar nav a.active svg { color: color-mix(in srgb, var(--brand-primary) 70%, #fff); }

/* ---- Inline "+" secondary action on a nav item ------------------------
   The item becomes a row: main link (flex) + a compact "+" link on the
   right. Subtle by default, brightens on row/own hover. */
.nav-item-row { display: flex; align-items: stretch; }
.nav-item-row > a:first-child { flex: 1 1 auto; min-width: 0; padding-right: 0.4rem; }
.sidebar nav a.nav-add {
    flex: 0 0 auto; width: 40px; padding: 0; justify-content: center;
    color: rgba(255,255,255,0.5); border-left: none; border-radius: 7px; margin: 3px 6px 3px 0;
}
.sidebar nav a.nav-add svg { width: 16px; height: 16px; stroke-width: 2; }
.nav-item-row:hover .nav-add { color: rgba(255,255,255,0.7); }
.sidebar nav a.nav-add:hover { color: #fff; background: rgba(255,255,255,0.12); }

/* ---- Nav badges + staff group ----------------------------------------- */
.nav-badge { margin-left: auto; font-style: normal; font-size: 0.7rem; font-weight: 700; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 0.05rem 0.45rem; }
.sidebar nav a.active .nav-badge { color: var(--brand-primary); background: #fff; }
/* Whole-site section map (staff "Sections & order"). */
.smap-group { margin: 0 0 1.1rem; border: 1px solid #e7e3da; border-radius: 12px; overflow: hidden; background: #fff; }
.smap-group-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.7rem 1rem; background: #faf8f4; border-bottom: 1px solid #ece8df; }
.smap-group-title { font-weight: 700; font-size: 0.95rem; color: #1f2937; text-decoration: none; display: flex; align-items: baseline; gap: 0.5rem; }
a.smap-group-title:hover { color: var(--brand-primary); }
.smap-group-title-static { color: #1f2937; }
.smap-group-slug { font-weight: 500; font-size: 0.78rem; color: #9ca3af; }
.smap-group-meta { display: flex; align-items: center; gap: 0.5rem; }
.smap-count { font-size: 0.75rem; color: #9ca3af; }
.smap-list { display: flex; flex-direction: column; }
.smap-empty { padding: 0.85rem 1rem; margin: 0; color: #9ca3af; font-size: 0.85rem; }
.smap-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; text-decoration: none;
    color: #1f2937; border-top: 1px solid #f1efe9; transition: background-color 120ms ease; }
.smap-row:first-child { border-top: none; }
.smap-row:hover { background: #f6f4ef; }
.smap-row.is-hidden { opacity: 0.55; }
.smap-name { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 0.45rem; flex: 1; min-width: 0; }
.smap-meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.smap-tag { font-size: 0.68rem; font-weight: 600; border-radius: 5px; padding: 0.1rem 0.4rem; white-space: nowrap; }
.smap-tag-variant { color: #3730a3; background: #eef2ff; border: 1px solid #e0e7ff; }
.smap-tag-posts { color: #155e63; background: #ecfeff; border: 1px solid #cffafe; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.smap-tag-attn { color: #92400e; background: #fef3c7; border: 1px solid #fde68a; }
.smap-tag-hidden { color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.6rem; }
.smap-arrow { width: 16px; height: 16px; color: #cbd5e1; flex: none; }
.smap-row:hover .smap-arrow { color: #64748b; }

/* Unused-post-type banner on the posts list — offer to clear + remove. */
.pt-unused-banner { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
    margin: 0 0 1.25rem; padding: 0.85rem 1rem; border: 1px solid #fcd9b6; border-radius: 10px;
    background: linear-gradient(135deg, #fff8f0 0%, #fdf0e3 100%); }
.pt-unused-lead { display: flex; flex-direction: column; gap: 0.15rem; min-width: 16rem; flex: 1; }
.pt-unused-lead strong { color: #9a3412; font-size: 0.92rem; }
.pt-unused-lead span { color: #7c5b43; font-size: 0.82rem; line-height: 1.4; }
.pt-unused-banner .btn-danger { flex: none; }

/* Post type registered on the site but not displayed by any section yet —
   kept (data is retained) but greyed so staff can curate/clear it. */
.sidebar nav a.nav-item-muted { opacity: 0.5; }
.sidebar nav a.nav-item-muted:hover { opacity: 0.85; }
.nav-unused-tag { margin-left: auto; font-style: normal; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; border: 1px solid rgba(148,163,184,0.4); border-radius: 4px; padding: 0.05rem 0.3rem; }
.sidebar nav a.nav-item-muted .nav-badge { opacity: 0.7; }
.nav-group-staff { display: flex; align-items: center; gap: 0.4rem; }
.nav-staff-tag { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 12%, #fff); border-radius: 4px; padding: 0.05rem 0.3rem; }
/* First group label sits right under the fade — trim its top gap. */
.sidebar nav .nav-fade-top + .nav-group-label { margin-top: 0.35rem; }

/* ---- Small print and de-emphasised text --------------------------------
   Both of these were written into views and defined nowhere, so HQ was full
   of markup asking for something no rule delivered: 71 elements carrying
   .muted and thirteen carrying .small, all rendering as ordinary body text.
   Confirmed by computed style on a live page, where a p.muted.small came back
   as rgb(31, 41, 55) at 15px, identical to body.

   .small is 0.875rem, 14px against the 16px root, which is the size the
   surrounding detail text on those screens already uses. Size only, because
   one of the four views puts it on a span inside a sentence where a colour
   change would be wrong, and because .muted is what carries the colour.

   #5b6879 rather than the #64748b that admin.css calls the house muted grey.
   Measured, not eyeballed: #64748b is 4.76:1 on a white card but only 4.44:1
   on the #f7f7f8 page background, and most of this text sits on the page
   rather than in a card, so it fails AA exactly where it is used. #5b6879 is
   the nearest value that clears AA on both, at 5.67:1 and 5.30:1.

   admin.css keeps its own .icon-field .muted at #64748b, and being the more
   specific selector it still wins inside an icon field. Left alone: that text
   sits on a white card, where the lighter grey passes. */
.muted { color: #5b6879; }
.small { font-size: 0.875rem; }

/* ---- Page intro (lead paragraph under a header) ------------------------ */
.page-intro { color: #64748b; font-size: 0.92rem; max-width: 46rem; margin: 0 0 1.5rem; line-height: 1.5; }
.section-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #64748b; margin: 2rem 0 0.85rem; }
.section-label:first-of-type { margin-top: 0; }

/* ---- Stat-card grid (catalogue/design registries, dashboard) ----------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.9rem; }
.stat-card { display: flex; flex-direction: column; gap: 0.35rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1rem 1.05rem; text-decoration: none; transition: border-color .12s, box-shadow .12s, transform .12s; }
.stat-card:hover { border-color: color-mix(in srgb, var(--brand-primary) 45%, #e5e7eb); box-shadow: 0 4px 14px rgba(15,23,42,0.06); transform: translateY(-1px); }
.stat-head { display: flex; align-items: center; gap: 0.5rem; color: #64748b; }
.stat-head svg { width: 17px; height: 17px; }
.stat-head span { font-size: 0.82rem; font-weight: 600; }
.stat-count { font-size: 1.9rem; font-weight: 800; color: #0f172a; line-height: 1; }
.stat-sub { font-size: 0.76rem; color: #64748b; }
.stat-card.is-muted { opacity: 0.62; }
.stat-card.is-muted:hover { opacity: 0.92; }

/* Dashboard "needs attention" roll-up banner. */
.home-attn { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; margin: 0 0 1.5rem;
    padding: 0.9rem 1.05rem; border-radius: 12px; border: 1px solid #fcd9b6;
    background: linear-gradient(135deg, #fff8f0 0%, #fdf0e3 100%); transition: box-shadow .12s, transform .12s; }
.home-attn:hover { box-shadow: 0 4px 14px rgba(180,83,9,0.12); transform: translateY(-1px); }
.home-attn-badge { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: #f59e0b; color: #fff; font-weight: 800; font-size: 0.9rem; }
.home-attn-text { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.home-attn-text strong { color: #9a3412; font-size: 0.92rem; }
.home-attn-text span { color: #7c5b43; font-size: 0.82rem; }
.home-attn-go { flex: none; display: inline-flex; align-items: center; gap: 0.2rem; color: #b45309; font-weight: 700; font-size: 0.82rem; }
.home-attn-go svg { width: 15px; height: 15px; }

/* Navigational quick cards (Style guide / options / build / users). */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem; }
.quick-card { display: flex; align-items: center; gap: 0.75rem; background: #fff; border: 1px solid #e5e7eb;
    border-radius: 12px; padding: 0.85rem 1rem; text-decoration: none; transition: border-color .12s, box-shadow .12s, transform .12s; }
.quick-card:hover { border-color: color-mix(in srgb, var(--brand-primary) 45%, #e5e7eb); box-shadow: 0 4px 14px rgba(15,23,42,0.06); transform: translateY(-1px); }
.quick-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--brand-primary) 10%, #f8fafc); color: var(--brand-primary); }
.quick-ico svg { width: 18px; height: 18px; }
.quick-text { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.quick-label { font-weight: 700; font-size: 0.88rem; color: #1f2937; }
.quick-sub { font-size: 0.76rem; color: #64748b; }
.quick-go { flex: none; color: #cbd5e1; }
.quick-go svg { width: 16px; height: 16px; }
.quick-card:hover .quick-go { color: var(--brand-primary); }

/* ---- List toolbar: search + status filter ----------------------------- */
.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.list-search { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 260px; min-width: 220px; background: #fff; border: 1px solid var(--field-border); border-radius: 10px; padding: 0 0.7rem; height: 40px; }
.list-search:focus-within { border-color: var(--field-border-focus); box-shadow: var(--field-focus-ring); }
.list-search svg { width: 16px; height: 16px; color: #64748b; flex: 0 0 auto; }
.list-search input { border: none; outline: none; background: transparent; flex: 1; font-size: 0.9rem; color: var(--field-text); padding: 0; min-width: 0; }
.list-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter-pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 999px; padding: 0.35rem 0.8rem; cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.filter-pill:hover { border-color: #cbd5e1; }
.filter-pill em { font-style: normal; color: #64748b; font-weight: 700; }
.filter-pill.is-active { background: #0f172a; border-color: #0f172a; color: #fff; }
.filter-pill.is-active em { color: rgba(255,255,255,0.65); }
.filter-dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-ok { background: #16a34a; } .dot-info { background: #2563eb; } .dot-warn { background: #d97706; } .dot-muted { background: #94a3b8; }
.list-count { font-size: 0.78rem; color: #64748b; margin-bottom: 0.6rem; }

/* ---- Sites list: single-column rows + per-row actions ----------------- */
/* The rows sit flush and read as one card. Only the outer corners round, and
   which rows those are is decided by the filter JS in sites.php: it tags the
   first and last row still SHOWING, because a filtered list would otherwise
   leave the radius on a display:none row and look square-cornered.
   The -1px pulls each row onto its neighbour's border so the seam stays one
   line rather than two, and the hovered row is raised so its border colour is
   not painted over by the row below. */
.site-rows { display: flex; flex-direction: column; gap: 0; }
.site-row { display: flex; align-items: stretch; background: #fff; border: 1px solid #e5e7eb; border-radius: 0; overflow: hidden; transition: border-color .12s, box-shadow .12s, background-color .12s; position: relative; margin-top: -1px; }
.site-row.is-first { margin-top: 0; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.site-row.is-last { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
/* Flush rows lost the gap the shadow used to fall into, so the row it lands on
   is what marks the hover. The tint is deliberately barely there: it only has
   to separate one row from its neighbours, and the controls inside keep their
   own stronger hover on top of it. */
.site-row:hover { background: #f1f5f942; border-color: #cbd5e1; box-shadow: 0 3px 10px rgba(15,23,42,0.05); z-index: 1; }
.site-row-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding: 0.5rem 0.85rem; text-decoration: none; color: inherit; }
/* admin.css underlines every a:hover, and a:hover outranks .site-row-main, so
   the whole row underlined on hover. A row is a card, not a link in prose. */
.site-row-main:hover { text-decoration: none; }
.site-row-info { min-width: 0; }
.site-row-title { display: flex; align-items: center; gap: 0.5rem; }
.site-name { font-weight: 700; font-size: 0.92rem; color: #0f172a; }
.site-domain { font-size: 0.74rem; color: #64748b; margin-top: 0.05rem; }
.site-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.pill { font-size: 0.68rem; font-weight: 600; color: #475569; background: #f1f5f9; border-radius: 999px; padding: 0.12rem 0.5rem; }
.site-row-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0.15rem; padding: 0.5rem 0.6rem; text-align: right; flex: 0 0 auto; }
.site-updated { font-size: 0.7rem; color: #64748b; }
.health { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.health svg { width: 13px; height: 13px; }
.health-ok { color: #15803d; } .health-bad { color: #b91c1c; }
.site-row-actions { display: flex; align-items: center; gap: 0.1rem; padding: 0 0.4rem; flex: 0 0 auto; }
.row-act { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; color: #64748b; text-decoration: none; transition: background .12s, color .12s; }
.row-act svg { width: 17px; height: 17px; }
.row-act:hover { background: #f1f5f9; color: #0f172a; }
.row-act-primary:hover { background: color-mix(in srgb, var(--brand-primary) 14%, #fff); color: var(--brand-primary); }
.list-empty { display: grid; place-items: center; gap: 0.5rem; text-align: center; color: #64748b; padding: 2.5rem; border: 2px dashed #e2e8f0; border-radius: 14px; }
.list-empty[hidden] { display: none; }
.list-empty svg { width: 26px; height: 26px; color: #cbd5e1; }
.list-empty p { margin: 0; }
@media (max-width: 880px) {
    .site-row-side { display: none; }
}

/* ---- Element-variant grid (Design Platform) ---------------------------- */
.elem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.85rem; }
.elem-card { display: flex; flex-direction: column; gap: 0.55rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 0.9rem; text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s, transform .12s; }
.elem-card:hover { border-color: color-mix(in srgb, var(--brand-primary) 40%, #e5e7eb); box-shadow: 0 4px 14px rgba(15,23,42,0.06); transform: translateY(-1px); }
.elem-thumb { aspect-ratio: 16/10; border-radius: 8px; background: linear-gradient(135deg, #f1f5f9, #e2e8f0); display: grid; place-items: center; color: #cbd5e1; }
.elem-thumb svg { width: 28px; height: 28px; }
.elem-name { font-weight: 700; font-size: 0.9rem; color: #0f172a; }
.elem-stat { font-size: 0.74rem; color: #64748b; display: flex; gap: 0.5rem; }
.elem-stat b { color: #475569; }

/* ---- Simple table ------------------------------------------------------ */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.tbl { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.tbl-wrap .tbl { min-width: 460px; }
.tbl th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; padding: 0.7rem 0.9rem; background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.tbl td { padding: 0.75rem 0.9rem; border-bottom: 1px solid #f1f5f9; font-size: 0.86rem; color: #334155; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr.row-link { cursor: pointer; }
.tbl tr.row-link:hover td { background: #f8fafc; }

/* ---- Coherence callout (prototype self-documentation) ------------------ */
.coherence-note { display: flex; gap: 0.7rem; background: color-mix(in srgb, var(--brand-primary) 6%, #fff); border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, #fff); border-radius: 12px; padding: 0.85rem 1rem; margin-bottom: 1.5rem; font-size: 0.84rem; color: #475569; line-height: 1.5; }
.coherence-note b { color: var(--brand-primary); }
.coherence-note svg { width: 18px; height: 18px; color: var(--brand-primary); flex: 0 0 auto; margin-top: 1px; }

/* ---- Empty/placeholder panel for not-yet-built screens ------------------ */
.proto-stub { display: grid; place-items: center; text-align: center; min-height: 40vh; color: #64748b; gap: 0.6rem; border: 2px dashed #e2e8f0; border-radius: 14px; padding: 2rem; }
.proto-stub svg { width: 30px; height: 30px; color: #cbd5e1; }
.proto-stub h3 { color: #475569; margin: 0; font-size: 1.05rem; }
.proto-stub p { margin: 0; max-width: 30rem; font-size: 0.86rem; line-height: 1.5; }

/* Slightly wider main for catalogue density. */
body.ctx-mode-platform .main { max-width: 78rem; }

/* ============================================================
   Page editor — canvas of tinted section bands + docked panel
   ============================================================ */
.main:has([data-pe]) { max-width: none; padding: 1.25rem 1.5rem; }
.pe { display: flex; gap: 1rem; align-items: stretch; height: calc(100vh - 124px); min-height: 480px; }

/* ---- Canvas ---- */
.pe-canvas { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: #eef1f5; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.pe-viewport-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; background: #fff; border-bottom: 1px solid #e7ebf0; flex: 0 0 auto; }
.pe-vp { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; color: #64748b; background: transparent; border: none; border-radius: 7px; padding: 0.3rem 0.6rem; cursor: pointer; }
.pe-vp svg { width: 15px; height: 15px; }
.pe-vp.is-active { background: #f1f5f9; color: #0f172a; }
.pe-vp-spacer { flex: 1; }
.pe-hint { font-size: 0.74rem; color: #64748b; }
.pe-scroll { flex: 1 1 auto; overflow-y: auto; padding: 1.1rem; }
/* Real preview iframe (replaces the old section-band sketches) */
.pe-frame-wrap { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; justify-content: center; background: #eef1f5; }
.pe-frame { width: 100%; height: 100%; border: 0; background: #fff; display: block; transition: max-width .2s ease; }
.pe-frame-wrap[data-vp="tablet"] .pe-frame { max-width: 768px; box-shadow: 0 0 0 1px #e2e8f0; }
.pe-frame-wrap[data-vp="mobile"] .pe-frame { max-width: 390px; box-shadow: 0 0 0 1px #e2e8f0; }
.pe-stack { margin: 0 auto; max-width: 760px; transition: max-width .22s ease; }
.pe-stack[data-vp="tablet"] { max-width: 600px; }
.pe-stack[data-vp="mobile"] { max-width: 380px; }

/* Add-section rail */
.pe-addbar { display: grid; place-items: center; width: 100%; height: 14px; border: none; background: transparent; cursor: pointer; padding: 0; position: relative; }
.pe-addbar span { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 700; color: var(--brand-primary); background: #fff; border: 1px solid color-mix(in srgb, var(--brand-primary) 35%, #fff); border-radius: 999px; padding: 0.15rem 0.6rem; opacity: 0; transition: opacity .12s; white-space: nowrap; }
.pe-addbar span svg { width: 13px; height: 13px; }
.pe-addbar:hover span { opacity: 1; }
.pe-addbar-end { height: 42px; margin-top: 0.3rem; }
.pe-addbar-end span { opacity: 1; }

/* Section band */
.pe-band { display: flex; align-items: stretch; background: #fff; border: 1.5px solid #e5e7eb; border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.pe-band:hover { border-color: #cbd5e1; }
.pe-band.is-selected { border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent); }
.pe-band-rail { flex: 0 0 auto; display: flex; align-items: center; padding: 0 0.3rem; color: #cbd5e1; }
.pe-handle { display: grid; place-items: center; cursor: grab; }
.pe-handle svg { width: 16px; height: 16px; }
.pe-band-body { flex: 1 1 auto; min-width: 0; padding: 0.65rem 0.5rem 0.8rem; }
.pe-band-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.pe-band-el { font-weight: 700; font-size: 0.85rem; color: #0f172a; }
.pe-band-variant { font-size: 0.74rem; color: #64748b; }
.pe-band-mode, .pe-band-bg { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.4rem; border-radius: 4px; }
.pe-band-mode { background: #ede9fe; color: #6d28d9; }
.pe-band-lock { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.66rem; font-weight: 700; color: #64748b; }
.pe-band-lock svg { width: 12px; height: 12px; }
.pe-band-sketch { display: flex; flex-direction: column; gap: 5px; margin-top: 0.55rem; color: #0f172a; }
.sk { height: 7px; border-radius: 4px; background: currentColor; opacity: 0.12; }
.sk-1 { width: 55%; } .sk-2 { width: 80%; } .sk-3 { width: 40%; }
.pe-band-actions { flex: 0 0 auto; display: flex; align-items: flex-start; padding: 0.35rem; }
.pe-band-act { width: 26px; height: 26px; display: grid; place-items: center; border: none; background: transparent; color: #cbd5e1; border-radius: 6px; cursor: pointer; }
.pe-band-act:hover { background: #fef2f2; color: #b91c1c; }

/* Background tints (the rhythm preview) */
.pe-band.bg-page { background: #fff; }
.pe-band.bg-alt { background: #f5f6f8; }
.pe-band.bg-emphasis { background: #eef2fb; }
.pe-band.bg-inverse { background: #1f2433; }
.pe-band.bg-inverse .pe-band-el { color: #fff; }
.pe-band.bg-inverse .pe-band-variant, .pe-band.bg-inverse .pe-band-lock { color: #64748b; }
.pe-band.bg-inverse .pe-band-sketch { color: #fff; }
.pe-band.bg-inverse .sk { opacity: 0.22; }

/* Small bg label chips */
.pe-bg-page { background: #f1f5f9; color: #64748b; }
.pe-bg-alt { background: #e7eaef; color: #475569; }
.pe-bg-emphasis { background: #e0e7ff; color: #4338ca; }
.pe-bg-inverse { background: #334155; color: #e2e8f0; }

/* ---- Docked panel ---- */
.pe-panel { flex: 0 0 384px; width: 384px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.pe-card { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.pe-card[hidden] { display: none; }
.pe-card-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; border-bottom: 1px solid #eef2f6; flex: 0 0 auto; }
.pe-card-close { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #e2e8f0; background: #fff; border-radius: 8px; cursor: pointer; color: #64748b; flex: 0 0 auto; }
.pe-card-close svg { width: 16px; height: 16px; }
.pe-card-close:hover { border-color: #cbd5e1; color: #0f172a; }
.pe-card-eyebrow { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; margin: 0; }
.pe-card-title { font-size: 1.02rem; font-weight: 700; color: #0f172a; margin: 0.1rem 0 0; }
.pe-card .settings-tabs { padding: 0 1rem; border-bottom: 1px solid #eef2f6; flex: 0 0 auto; margin: 0; }
.pe-card-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: var(--field-gap); }
.pe-card-foot { flex: 0 0 auto; padding: 0.7rem 1rem; border-top: 1px solid #eef2f6; }
.pe-tabpanel { display: flex; flex-direction: column; gap: var(--field-gap); }
.pe-tabpanel[hidden] { display: none; }
.pe-tip, .pe-locked-note { display: flex; gap: 0.4rem; font-size: 0.8rem; color: #64748b; margin: 0.2rem 0 0; line-height: 1.45; }
.pe-tip svg, .pe-locked-note svg { width: 15px; height: 15px; flex: 0 0 auto; color: #64748b; margin-top: 1px; }

/* Background segmented control */
.pe-bgseg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.pe-bgopt { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.45rem 0.55rem; cursor: pointer; }
.pe-bgopt:hover { border-color: #cbd5e1; }
.pe-bgopt.is-active { border-color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); color: #0f172a; }
.pe-bgswatch { width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,0.08); }
.pe-bgopt.pe-bg-page .pe-bgswatch { background: #fff; }
.pe-bgopt.pe-bg-alt .pe-bgswatch { background: #e7eaef; }
.pe-bgopt.pe-bg-emphasis .pe-bgswatch { background: #c7d2fe; }
.pe-bgopt.pe-bg-inverse .pe-bgswatch { background: #1f2433; }

/* Field-widget placeholders (image / gallery / repeater / link) */
.proto-picker { display: flex; align-items: center; gap: 0.5rem; justify-content: center; padding: 0.85rem; border: 1.5px dashed #cbd5e1; border-radius: 10px; color: #64748b; font-size: 0.84rem; cursor: pointer; background: #fafbfc; }
.proto-picker:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.proto-picker svg { width: 17px; height: 17px; }
.proto-picker-link { justify-content: flex-start; }
.proto-gallery { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.proto-gallery > span { width: 46px; height: 46px; border-radius: 7px; background: #eef1f5; }
.proto-picker-add { width: 46px; height: 46px; padding: 0; }
.proto-repeat { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.proto-repeat-row { width: 100%; padding: 0.55rem 0.75rem; background: var(--field-panel-bg); border: 1px solid var(--field-panel-border); border-radius: 9px; font-size: 0.82rem; color: #475569; }

@media (max-width: 980px) {
    .pe { flex-direction: column; height: auto; }
    .pe-panel { width: auto; flex: 0 0 auto; }
    .pe-canvas { min-height: 50vh; }
}

/* ============================================================
   Site-context views (posts / media / style guide / settings /
   config / build / health) — first-pass components
   ============================================================ */

/* ---- Post editor ---- */
.post-editor { display: grid; grid-template-columns: 1fr 260px; gap: 1.25rem; align-items: start; }
.post-editor-main { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 1.4rem; display: flex; flex-direction: column; gap: var(--field-gap); }
.post-editor-side { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 1.1rem; display: flex; flex-direction: column; gap: var(--field-gap); position: sticky; top: 70px; }
.row-title-link { font-weight: 600; color: #0f172a; text-decoration: none; }
.row-title-link:hover { color: var(--brand-primary); }
@media (max-width: 820px) { .post-editor { grid-template-columns: 1fr; } .post-editor-side { position: static; } }

/* ---- Media library ---- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 0.85rem; }
.media-tile { margin: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; transition: border-color .12s, box-shadow .12s, transform .12s; }
.media-tile:hover { border-color: #cbd5e1; box-shadow: 0 4px 14px rgba(15,23,42,0.07); transform: translateY(-1px); }
.media-thumb { position: relative; aspect-ratio: 4/3; display: grid; place-items: center; }
.media-thumb.is-svg { background: #f1f5f9; color: #cbd5e1; }
.media-thumb.is-svg svg { width: 30px; height: 30px; }
.media-acts { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.media-tile:hover .media-acts { opacity: 1; }
.media-act { width: 28px; height: 28px; display: grid; place-items: center; border: none; border-radius: 7px; background: rgba(255,255,255,0.92); color: #475569; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.media-act svg { width: 15px; height: 15px; }
.media-act:hover { color: #0f172a; }
.media-cap { padding: 0.5rem 0.6rem 0.6rem; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.media-name { font-size: 0.78rem; font-weight: 600; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-meta { font-size: 0.7rem; color: #64748b; }

/* ---- Style guide ---- */
.sg-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; align-items: start; }
.sg-controls { min-width: 0; }
.sg-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.sg-row { display: flex; align-items: center; gap: 0.8rem; }
.sg-swatch { width: 34px; height: 34px; border-radius: 8px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,0.1); box-shadow: inset 0 0 0 2px #fff; }
.sg-row-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sg-row-label { font-size: 0.85rem; font-weight: 600; color: #1f2937; }
.sg-row-hint { font-size: 0.74rem; color: #64748b; }
.sg-hex { width: 7.5rem; flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }
.sg-range-val { font-size: 0.8rem; color: var(--brand-primary); font-weight: 700; }

/* Custom range slider — brand fill + tick marks, no browser blue. Wrap each
   range in .sg-slider so the ticks sit behind the track. */
.sg-slider { position: relative; padding: 0.5rem 0 0.65rem; }
/* Step ticks — a flex row inset by the thumb radius so each mark lines up with
   a value position. Only rendered where the step count is small enough. */
.sg-slider-ticks { position: absolute; left: 9px; right: 9px; bottom: 0.15rem; display: flex; justify-content: space-between; pointer-events: none; }
.sg-slider-ticks span { width: 1.5px; height: 6px; background: #cbd5e1; border-radius: 1px; }
.sg-editor input[type="range"] { position: relative; -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; margin: 0; }
.sg-editor input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--brand-primary) 0 var(--fill, 0%), #e6e9ef var(--fill, 0%) 100%); }
.sg-editor input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: #fff; border: 2.5px solid var(--brand-primary); box-shadow: 0 1px 4px rgba(15,23,42,0.25); }
.sg-editor input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: #e6e9ef; }
.sg-editor input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--brand-primary); }
.sg-editor input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2.5px solid var(--brand-primary); box-shadow: 0 1px 4px rgba(15,23,42,0.25); }
.sg-editor input[type="range"]:focus { outline: none; }
.sg-editor input[type="range"]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 18%, transparent), 0 1px 4px rgba(15,23,42,0.25); }
.sg-editor input[type="range"]:focus::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 18%, transparent); }

/* Custom select (scale ratio + any select in the editor). */
.sg-editor select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; box-sizing: border-box;
    padding: 0.55rem 2.2rem 0.55rem 0.8rem; border: 1px solid #d1d5db; border-radius: 9px; background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.7rem center; font: inherit; font-size: 0.88rem; color: #1f2937; cursor: pointer; line-height: 1.3; }
.sg-editor select:hover { border-color: color-mix(in srgb, var(--brand-primary) 45%, #d1d5db); }
.sg-editor select:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent); }

.sg-preview { position: sticky; top: 70px; }
.sg-preview-card { border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; }
.sgp-band { padding: 1.1rem 1.2rem; }
.sgp-h { margin: 0 0 0.35rem; font-size: 1.25rem; color: #1f2937; }
.sgp-b { margin: 0 0 0.85rem; font-size: 0.84rem; color: #475569; line-height: 1.5; }
.sgp-btn { display: inline-block; color: #fff; font-size: 0.8rem; font-weight: 700; padding: 0.45rem 0.9rem; }
.sgp-btn-ghost { background: transparent !important; border: 1.5px solid rgba(255,255,255,0.7); color: #fff; }
.sgp-chip { display: inline-block; margin-left: 0.5rem; color: #1f2937; font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.55rem; border-radius: 999px; }
.sgp-emp { color: #fff; }
.sgp-tag { display: inline-block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; margin-bottom: 0.5rem; }
.sgp-emp .sgp-tag { color: rgba(255,255,255,0.85); }
.sgp-line { height: 8px; border-radius: 4px; background: currentColor; opacity: 0.14; margin-top: 6px; }
.sg-preview-note { font-size: 0.74rem; color: #64748b; margin: 0.6rem 0 0; line-height: 1.4; }
/* Native colour picker styled as a swatch (replaces the old read-only swatch). */
.sg-picker { width: 36px; height: 36px; flex: 0 0 auto; padding: 0; border: 1px solid rgba(0,0,0,0.12); border-radius: 9px; cursor: pointer; background: none; box-shadow: inset 0 0 0 2px #fff; transition: transform .1s ease, box-shadow .1s ease; }
.sg-picker:hover { transform: scale(1.05); }
.sg-picker::-webkit-color-swatch-wrapper { padding: 2px; }
.sg-picker::-webkit-color-swatch { border: none; border-radius: 6px; }
.sg-picker::-moz-color-swatch { border: none; border-radius: 6px; }

/* Brand-card header with the generate buttons. */
.sg-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.sg-gen { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.sg-card-note { font-size: 0.78rem; color: #64748b; margin: 0; line-height: 1.45; }
.btn.is-armed { background: #b45309; border-color: #b45309; color: #fff; }

/* Contrast audit. */
.sg-audit { gap: 0; padding: 0.4rem 0.6rem; }
.sg-audit-hint { font-weight: 600; font-size: 0.62rem; color: #16a34a; border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 5px; padding: 0.05rem 0.35rem; margin-left: 0.45rem; text-transform: none; letter-spacing: 0; }
.sg-audit-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.4rem; border-top: 1px solid #f1f5f9; }
.sg-audit-row:first-child { border-top: none; }
.sg-audit-chip { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 6px; display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; }
.sg-audit-chip.is-pass { background: #dcfce7; color: #15803d; }
.sg-audit-chip.is-fail { background: #fee2e2; color: #b91c1c; }
.sg-audit-label { flex: 1; font-size: 0.84rem; color: #334155; }
.sg-audit-ratio { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; color: #64748b; }
.sg-audit-empty { font-size: 0.82rem; color: #64748b; margin: 0.4rem; }

/* Font picker select. */
.sg-font { width: 100%; }

/* Ghost button (Remove / secondary generate). */
.btn-ghost { background: transparent; color: #64748b; border-color: transparent; }
.btn-ghost:hover { background: #f1f5f9; color: #1f2937; text-decoration: none; }

/* Per-background palette cards. */
.sg-bg-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; margin-bottom: 0.75rem; overflow: hidden; }
.sg-bg-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.85rem; }
.sg-bg-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.sg-bg-label { font-weight: 700; font-size: 0.92rem; color: #1f2937; }
.sg-bg-hex { width: 7rem; }
.sg-bg-gen { flex: 0 0 auto; white-space: nowrap; }
.sg-bg-collapse { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border: none; background: none; color: #64748b; cursor: pointer; border-radius: 6px; }
.sg-bg-collapse svg { width: 16px; height: 16px; transition: transform .15s ease; }
.sg-bg-collapse:hover { background: #f1f5f9; color: #475569; }
.sg-bg-card[data-open] .sg-bg-collapse svg { transform: rotate(180deg); }
.sg-bg-body { display: none; padding: 0.25rem 0.85rem 0.7rem; border-top: 1px solid #f1f5f9; }
.sg-bg-card[data-open] .sg-bg-body { display: block; }
.sg-rolerow { display: flex; align-items: center; gap: 0.65rem; padding: 0.4rem 0; }
.sg-picker-sm { width: 28px; height: 28px; border-radius: 7px; }
.sg-role-label { flex: 1; min-width: 0; font-size: 0.84rem; color: #334155; }
.sg-rolerow .sg-hex { width: 7rem; }
.sg-ratio { flex: 0 0 auto; width: 4rem; text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; }
.sg-ratio.is-pass { color: #15803d; }
.sg-ratio.is-fail { color: #b91c1c; font-weight: 700; }

/* Read-only hex value shown on the card (the picker is the control). Click to
   select-all for easy copy. */
.sg-hexval { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.76rem; color: #64748b; flex: 0 0 auto; text-align: right; -webkit-user-select: all; user-select: all; cursor: text; letter-spacing: 0.01em; }
.sg-row .sg-hexval { width: 6.5rem; }
.sg-bg-hexval { width: 6rem; }
.sg-rolerow .sg-hexval { width: 5rem; }
.sg-bg-card[data-open] .sg-bg-head .sg-bg-hexval { color: #64748b; }

/* Style-guide tabs. */
.sg-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid #e5e7eb; margin-bottom: 1.25rem; overflow-x: auto; }
.sg-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0.6rem 0.9rem; font-size: 0.86rem; font-weight: 600; color: #6b7280; cursor: pointer; white-space: nowrap; transition: color .12s, border-color .12s; }
.sg-tab:hover { color: #1f2937; }
.sg-tab.is-active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.sg-tab-panel[hidden] { display: none; }

/* Tab row + overflow menu. Utils and History are occasional, so they sit
   behind the kebab rather than competing with the four daily tabs. The bottom
   border moves to the row so it runs the full width past the kebab. */
.sg-tabbar { display: flex; align-items: stretch; gap: 0.5rem; border-bottom: 1px solid #e5e7eb; margin-bottom: 1.25rem; }
.sg-tabbar .sg-tabs { border-bottom: 0; margin-bottom: 0; flex: 1 1 auto; }
.sg-tabmore { position: relative; display: flex; align-items: center; margin-left: auto; flex: 0 0 auto; }
.sg-tabmore-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: none; border: 0; border-radius: 8px; color: #6b7280; cursor: pointer; transition: background .12s, color .12s; }
.sg-tabmore-btn svg { width: 18px; height: 18px; }
.sg-tabmore-btn:hover { background: #f1f5f9; color: #1f2937; }
.sg-tabmore-btn.is-active { color: var(--brand-primary); background: #f1f5f9; }
.sg-tabmore-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 150px; padding: 0.3rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.28); }
.sg-tabmore-menu[hidden] { display: none; }
.sg-tabmore-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 7px; padding: 0.45rem 0.6rem; font-size: 0.85rem; font-weight: 600; color: #475569; cursor: pointer; }
.sg-tabmore-item:hover { background: #f1f5f9; color: #1f2937; }
.sg-tabmore-item.is-active { color: var(--brand-primary); background: #f1f5f9; }

/* Buttons and links tab. */
.sg-swatch-dot { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(15, 23, 42, 0.12); }
.sg-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; font-weight: 600; color: #334155; cursor: pointer; }
.sg-check input { width: 16px; height: 16px; accent-color: var(--brand-primary); cursor: pointer; }
.sg-btn-radius .sg-card-note { margin-top: 0.35rem; }
.sg-btnpreview-card { padding: 0; overflow: hidden; }
/* The frame is the deliverable here, so let it be tall enough to show all four
   bands without its own scrollbar fighting the panel's. */
.sg-btnpreview { display: block; width: 100%; height: 720px; border: 0; background: #fff; }
.sg-btnpreview-card .sg-card-note { padding: 0.7rem 0.9rem; margin: 0; border-top: 1px solid #e5e7eb; }

/* Segmented control (transition speed / type scale). */
.sg-seg { display: inline-flex; border: 1px solid #e5e7eb; border-radius: 9px; overflow: hidden; background: #f8fafc; }
.sg-seg button { background: none; border: 0; border-right: 1px solid #e5e7eb; padding: 0.45rem 0.85rem; font-size: 0.82rem; font-weight: 600; color: #64748b; cursor: pointer; transition: background .12s, color .12s; }
.sg-seg button:last-child { border-right: 0; }
.sg-seg button:hover { color: #1f2937; }
.sg-seg button.is-active { background: var(--brand-primary); color: #fff; }

/* Searchable font picker (trigger + shared dropdown; names render in their own font). */
.sg-fontpick { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: #fff; border: 1px solid #d1d5db; border-radius: 9px; padding: 0.55rem 0.75rem; cursor: pointer; text-align: left; }
.sg-fontpick:hover { border-color: color-mix(in srgb, var(--brand-primary) 45%, #d1d5db); }
.sg-fontpick-val { font-size: 1rem; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-fontpick-caret { width: 16px; height: 16px; color: #64748b; flex: 0 0 auto; }
.sg-fontmenu { position: absolute; z-index: 200; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 16px 40px rgba(15,23,42,0.18); padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; max-height: 62vh; }
.sg-fontmenu-search { width: 100%; box-sizing: border-box; }
.sg-fontmenu-list { overflow-y: auto; }
.sg-fontopt { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0.5rem 0.75rem; border-radius: 7px; font-size: 1.4rem; line-height: 1.7; color: #1f2937; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-fontopt:hover { background: #f1f5f9; }
.sg-fontopt[hidden] { display: none; }

/* Suggested pairings (subtle button + popup). */
.sg-pairs-btn { background: none; border: 0; color: var(--brand-primary); font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 0.2rem 0.45rem; border-radius: 6px; }
.sg-pairs-btn:hover { background: color-mix(in srgb, var(--brand-primary) 9%, #f8fafc); }
.sg-pairsmenu { padding: 0.5rem; overflow-y: auto; }
.sg-pairopt { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; text-align: left; background: none; border: 0; padding: 0.55rem 0.6rem; border-radius: 8px; cursor: pointer; width: 100%; }
.sg-pairopt + .sg-pairopt { border-top: 1px solid #f5f5f3; }
.sg-pairopt:hover { background: #f1f5f9; }
.sg-pairopt-h { font-size: 1.3rem; line-height: 1.25; color: #1f2937; }
.sg-pairopt-b { font-size: 0.82rem; color: #64748b; }

/* Utils tab rows. */
.sg-util-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sg-util-text { flex: 1; min-width: 14rem; display: flex; flex-direction: column; gap: 0.15rem; }
.sg-util-title { font-weight: 700; font-size: 0.9rem; color: #1f2937; display: flex; align-items: center; gap: 0.4rem; }
.sg-util-hint { font-size: 0.8rem; color: #64748b; line-height: 1.4; }
.sg-util-row .btn { flex: 0 0 auto; }
.sg-wip { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #b45309; background: #fef3c7; border: 1px solid #fde68a; border-radius: 5px; padding: 0.05rem 0.3rem; }
.sg-util-status { font-size: 0.82rem; color: #475569; margin: 0.25rem 0 0; }
.sg-util-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.sg-util-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.sg-util-cell .sg-util-title { font-weight: 700; font-size: 0.88rem; color: #1f2937; }
.sg-util-cell .sg-util-hint { font-size: 0.78rem; color: #64748b; line-height: 1.4; }
.sg-util-cell .btn { margin-top: 0.3rem; }
@media (max-width: 560px) { .sg-util-2col { grid-template-columns: 1fr; } }

/* Toggle switch (replaces the raw checkbox). */
.sg-switches { gap: 1.15rem; }
.sg-switch { display: flex; align-items: flex-start; gap: 0.8rem; cursor: pointer; }
.sg-select-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; }
.sg-select-row .sg-switch-text { flex: 1 1 auto; min-width: 0; }
.sg-select-row .sg-select-inline { flex: 0 0 auto; width: auto; min-width: 104px; margin-top: 0.1rem; }
.sg-switch > input { position: absolute; opacity: 0; width: 0; height: 0; }
.sg-switch-track { flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .15s ease; margin-top: 0.1rem; }
.sg-switch-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform .15s ease; }
.sg-switch > input:checked + .sg-switch-track { background: var(--brand-primary); }
.sg-switch > input:checked + .sg-switch-track .sg-switch-knob { transform: translateX(16px); }
.sg-switch > input:disabled + .sg-switch-track { opacity: 0.5; cursor: not-allowed; }
.sg-switch-text { display: flex; flex-direction: column; gap: 0.12rem; }
.sg-switch-title { font-size: 0.9rem; font-weight: 600; color: #1e293b; display: flex; align-items: center; gap: 0.4rem; }
.sg-switch-hint { font-size: 0.8rem; color: #64748b; line-height: 1.4; }
.sg-switch-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: #f1f5f9; padding: 0 0.25rem; border-radius: 3px; }
.sg-switch-link { color: var(--brand-primary); font-weight: 600; text-decoration: none; margin-left: 0.35rem; white-space: nowrap; }
.sg-switch-link:hover { text-decoration: underline; }
.sg-switch-link[hidden] { display: none; }
.sg-saved { margin-left: 0.5rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; opacity: 0; transition: opacity .15s ease; }
.sg-saved[data-state] { opacity: 1; }
.sg-saved[data-state="ok"] { color: #16a34a; }
.sg-saved[data-state="err"] { color: #dc2626; }
.sg-switch-note { margin: 0.25rem 0 0; padding-top: 0.85rem; border-top: 1px solid #eef2f6; font-size: 0.78rem; color: #64748b; line-height: 1.5; }
.sg-switch-group { margin: 0.35rem 0 0.1rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #64748b; }
.sg-switch-group:first-child { margin-top: 0; }
.sg-switches .sg-switch + .sg-switch-group { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid #eef2f6; }

/* Draft-from-brand (Utils) card + its modal. */
.sg-draft-card { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
    background: linear-gradient(135deg, #fbfaff 0%, #f3f0fb 100%); border-color: #e6e0f5; }
.sg-draft-lead { display: flex; gap: 0.85rem; align-items: flex-start; }
.sg-draft-spark { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.sg-draft-lead .sg-util-title { display: block; }
.sg-draft-lead .sg-util-hint { display: block; margin-top: 0.2rem; }

.sg-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.sg-modal[hidden] { display: none; }
.sg-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px); }
.sg-modal-card { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 2.5rem); overflow: auto;
    background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3); display: flex; flex-direction: column; }
.sg-modal-head { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 1.35rem 0.75rem; }
.sg-modal-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #1e293b; }
.sg-modal-sub { margin: 0.3rem 0 0; font-size: 0.82rem; color: #64748b; line-height: 1.45; }
.sg-modal-x { flex: 0 0 auto; margin-left: auto; width: 30px; height: 30px; border: none; background: #f1f5f9; border-radius: 8px;
    font-size: 1.2rem; line-height: 1; color: #64748b; cursor: pointer; transition: background .12s ease; }
.sg-modal-x:hover { background: #e2e8f0; }
.sg-modal-body { padding: 0.5rem 1.35rem 0.5rem; display: flex; flex-direction: column; gap: 1.05rem; }
.sg-modal-opt { font-weight: 500; font-size: 0.72rem; color: #a8b0bd; text-transform: uppercase; letter-spacing: 0.04em; }
.sg-input { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid #d8dee8; border-radius: 9px; font-size: 0.88rem; color: #1e293b; background: #fff;
    transition: border-color .12s ease, box-shadow .12s ease; }
.sg-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent); }
.sg-textarea { resize: vertical; min-height: 64px; font-family: inherit; line-height: 1.5; }
.sg-draft-drop { border: 1.5px dashed #cbd5e1; border-radius: 11px; padding: 0.95rem 1rem; background: #fafbfc;
    display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.84rem; color: #64748b; transition: border-color .12s ease, background .12s ease; }
.sg-draft-drop.is-over { border-color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 6%, #fff); }
.sg-draft-filelist { font-size: 0.78rem; color: var(--brand-primary); font-weight: 500; }
.sg-draft-filelist:empty { display: none; }
.sg-linklike { border: none; background: none; padding: 0; color: var(--brand-primary); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.sg-modal-foot { display: flex; align-items: center; gap: 1rem; justify-content: space-between; flex-wrap: wrap;
    padding: 0.9rem 1.35rem 1.2rem; border-top: 1px solid #eef2f6; margin-top: 0.3rem; }
.sg-modal-foot-note { font-size: 0.76rem; color: #64748b; }
.sg-modal-actions { display: flex; gap: 0.5rem; margin-left: auto; }
.sg-modal-actions .btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.sg-modal-actions .btn[hidden] { display: none; }
.sg-modal .field-label { display: block; font-size: 0.82rem; font-weight: 700; color: #334155; margin-bottom: 0.35rem; }
.sg-modal .field-hint { display: block; margin-top: 0.4rem; font-size: 0.78rem; color: #64748b; line-height: 1.5; }
.sg-modal .field-hint a { color: var(--brand-primary); text-decoration: none; }
.sg-modal .field-hint a:hover { text-decoration: underline; }

/* Phone sizing for every modal. Three things were wrong on a phone: the close
   button and the foot buttons were well under the 44px thumb target, and iOS
   zooms the whole page when it focuses an input under 16px, which leaves the
   card scrolled sideways. Anchoring the card to the bottom is the same choice
   the editor drawer already makes: it keeps the fields above the keyboard
   instead of behind it. */
@media (max-width: 560px) {
    .sg-modal { padding: 0.75rem; align-items: flex-end; }
    .sg-modal-card { max-height: calc(100vh - 1.5rem); }
    .sg-modal-x { width: 44px; height: 44px; font-size: 1.45rem; }
    .sg-modal .sg-input { min-height: 44px; font-size: 16px; }
    .sg-modal-actions { width: 100%; }
    .sg-modal-actions .btn { flex: 1; min-height: 44px; justify-content: center; }
}

/* Draft popup — working + result stages. */
.sg-draft-working { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; padding: 1.75rem 0.5rem 1.25rem; }
.sg-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #e6e0f5; border-top-color: var(--brand-primary); animation: sg-spin 0.8s linear infinite; }
@keyframes sg-spin { to { transform: rotate(360deg); } }
.sg-draft-working-title { margin: 0.3rem 0 0; font-size: 0.95rem; font-weight: 600; color: #1e293b; }
.sg-draft-working-sub { margin: 0; font-size: 0.82rem; color: #64748b; line-height: 1.45; max-width: 360px; }
.sg-draft-swrow { display: flex; gap: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.sg-draft-sw { flex: 1; height: 46px; }
.sg-draft-fonts { margin: 0.9rem 0 0; font-size: 0.9rem; color: #334155; }
.sg-draft-rationale { margin: 0.6rem 0 0; font-size: 0.86rem; color: #475569; line-height: 1.55; }
.sg-draft-srcnote { margin: 0.7rem 0 0; font-size: 0.74rem; color: #a8b0bd; }
.sg-draft-srcnote code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: #f1f5f9; padding: 0 0.25rem; border-radius: 3px; }
.sg-draft-error { margin: 0.5rem 0 0; font-size: 0.88rem; color: #dc2626; line-height: 1.5; }

/* Self-host fonts live status pill. */
.sg-selfhost-state { margin: 0.1rem 0 0; font-size: 0.78rem; color: #64748b; line-height: 1.5; }
.sg-pill { display: inline-block; font-weight: 600; font-size: 0.74rem; padding: 0.08rem 0.5rem; border-radius: 999px; margin-right: 0.35rem; }
.sg-pill-on { color: #15803d; background: #dcfce7; }
.sg-pill-off { color: #64748b; background: #f1f5f9; }

/* Save history — snapshot list + restore. */
.sg-tab-intro { margin: 0 0 1rem; font-size: 0.84rem; color: #64748b; line-height: 1.55; max-width: 640px; }
.sg-history { display: flex; flex-direction: column; gap: 0.6rem; }
.sg-history-empty { margin: 0; padding: 1.5rem; text-align: center; color: #64748b; font-size: 0.86rem; background: #fafbfc; border: 1px solid #eef2f6; border-radius: 12px; }
.sg-hist-row { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0.9rem; background: #fff; border: 1px solid #e8ebf0; border-radius: 12px; }
.sg-hist-main { display: flex; align-items: center; gap: 0.9rem; flex: 1; min-width: 0; }
.sg-hist-swrow { display: flex; gap: 0; border-radius: 7px; overflow: hidden; flex: 0 0 auto; box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.sg-hist-sw { width: 22px; height: 34px; }
.sg-hist-meta { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.sg-hist-when { font-size: 0.86rem; font-weight: 600; color: #1e293b; display: flex; align-items: center; gap: 0.4rem; }
.sg-hist-latest { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 12%, #fff); padding: 0.05rem 0.4rem; border-radius: 999px; }
.sg-hist-note { font-size: 0.76rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-hist-fonts { font-size: 0.76rem; color: #64748b; }
.sg-hist-row .btn { flex: 0 0 auto; }

/* Type-scale (base + ratio + per-heading table) — one cohesive card. */
.sg-ratio-select { width: 100%; }
.sg-type-card { gap: 0.9rem; }
.sg-derived-eg { color: #9ca3af; }
.sg-type-sub { display: flex; flex-direction: column; gap: 0.2rem; padding-top: 0.85rem; border-top: 1px solid #eef2f6; }
.sg-type-sub-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }
.sg-type-sub-hint { font-size: 0.76rem; color: #64748b; line-height: 1.45; }
.sg-type-grid { display: grid; grid-template-columns: 1.9rem minmax(0,1fr) 3.7rem 3.2rem 1.7rem; align-items: center; gap: 0.4rem; }
.sg-type-headrow { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: #b0b7c3; padding-bottom: 0.15rem; }
.sg-type-headrow span:nth-child(3), .sg-type-headrow span:nth-child(4) { text-align: center; }
.sg-type-row { padding: 0.4rem 0; border-top: 1px solid #f5f4f1; }
.sg-type-lvl { font-weight: 700; font-size: 0.78rem; color: #64748b; }
.sg-type-prev { color: #1f2937; white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
.sg-type-size, .sg-type-lh { width: 100%; box-sizing: border-box; font-size: 0.82rem; padding: 0.4rem 0.3rem; text-align: center; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; -moz-appearance: textfield; appearance: textfield; }
.sg-type-size::-webkit-outer-spin-button, .sg-type-size::-webkit-inner-spin-button, .sg-type-lh::-webkit-outer-spin-button, .sg-type-lh::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sg-type-size.is-derived, .sg-type-lh.is-derived { color: #a3a3a3; background: #fafafa; border-color: #eef2f6; }
.sg-type-size:not(.is-derived), .sg-type-lh:not(.is-derived) { color: #1f2937; font-weight: 700; border-color: color-mix(in srgb, var(--brand-primary) 40%, #d1d5db); }
.sg-type-size:focus, .sg-type-lh:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 14%, transparent); }
.sg-type-reset { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: none; color: #cbd5e1; cursor: pointer; border-radius: 6px; }
.sg-type-reset svg { width: 14px; height: 14px; }
.sg-type-reset:hover { background: #f1f5f9; color: #64748b; }

@media (max-width: 900px) { .sg-layout { grid-template-columns: 1fr; } .sg-preview { position: static; } }

/* ---- Settings ---- */
.set-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 1.4rem; display: flex; flex-direction: column; gap: var(--field-gap); max-width: 640px; }
.hours-list { display: flex; flex-direction: column; gap: 0.5rem; }
.hours-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; }
.hours-day { width: 6.5rem; font-weight: 600; font-size: 0.86rem; color: #1f2937; flex: 0 0 auto; }
.hours-time { width: 6.5rem; flex: 0 0 auto; }
.hours-dash { font-size: 0.78rem; color: #64748b; }
.hours-closed { color: #64748b; font-size: 0.85rem; font-style: italic; flex: 1; }
.hours-toggle { margin-left: auto; }
.hours-row.is-closed .hours-day { color: #64748b; }

/* ---- Section Library (/sections): grid of live previews ---- */
.sl-count { font-size: 0.82rem; color: #64748b; font-weight: 600; }
.sl-toolbar { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.sl-search { flex: 1 1 280px; max-width: 420px; padding: 0.55rem 0.8rem; border: 1px solid #d8dee8; border-radius: 10px; font-size: 0.9rem; }
.sl-search:focus, .sl-cat:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 16%, transparent); }
.sl-cat { flex: 0 0 auto; padding: 0.55rem 2rem 0.55rem 0.8rem; border: 1px solid #d8dee8; border-radius: 10px; font-size: 0.9rem; background: #fff;
    appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; }
.sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.sl-card { border: 1px solid #e8ebf0; border-radius: 12px; overflow: hidden; background: #fff; transition: box-shadow .15s ease, border-color .15s ease; }
.sl-card:hover { box-shadow: 0 6px 20px rgba(15,23,42,.10); border-color: #cbd5e1; }
/* thumb keeps the section's 1280:760 aspect; the iframe is scaled (via --sl-scale,
   set in JS to card-width / 1280) to fill it exactly — no gaps. */
.sl-thumb { position: relative; aspect-ratio: 1280 / 760; overflow: hidden; background: #f8fafc; border-bottom: 1px solid #eef2f6; }
.sl-frame { position: absolute; top: 0; left: 0; width: 1280px; height: 760px; border: 0;
    transform: scale(var(--sl-scale, 0.203)); transform-origin: top left; pointer-events: none; background: #fff; }
.sl-meta { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.8rem; }
.sl-name { font-size: 0.88rem; font-weight: 600; color: #1e293b; }
.sl-slug { font-size: 0.72rem; color: #a8b0bd; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sl-empty { color: #64748b; font-size: 0.9rem; padding: 1.5rem 0; }

/* ---- Blueprint catalogue (page + site blueprints) ---- */
.bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.bp-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem; border: 1px solid #e8ebf0; border-radius: 12px; background: #fff; transition: box-shadow .15s ease, border-color .15s ease; }
.bp-card:hover { box-shadow: 0 6px 20px rgba(15,23,42,.10); border-color: #cbd5e1; }
.bp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.bp-card-name { font-size: 0.98rem; font-weight: 700; color: #1e293b; }
.bp-card-cat { font-size: 0.7rem; font-weight: 600; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 0.1rem 0.5rem; }
.bp-card-strip { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.bp-chip { font-size: 0.72rem; color: #475569; background: #f6f7f9; border: 1px solid #eceef2; border-radius: 6px; padding: 0.12rem 0.4rem; }
.bp-chip-more { color: #64748b; }
.bp-chip-orphan { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
.bp-canvas .bp-meta-bar { display: flex; align-items: flex-end; gap: 1rem; padding: 0.7rem 1rem; background: #fff; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; }
.bp-meta-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.72rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
.bp-meta-field .sg-input { width: 260px; max-width: 60vw; }
.bp-meta-field.bp-meta-cat .sg-input { width: 180px; }
.bp-meta-hint { margin-left: auto; align-self: center; font-size: 0.78rem; color: #64748b; max-width: 320px; line-height: 1.4; }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn { white-space: nowrap; }
.btn > svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.bp-card-foot { font-size: 0.76rem; color: #64748b; margin-top: auto; }

.bp-edit-meta { display: grid; grid-template-columns: 1fr 240px; gap: 1rem; max-width: 720px; margin-bottom: 1.5rem; }
@media (max-width: 560px) { .bp-edit-meta { grid-template-columns: 1fr; } }
.bp-count { font-weight: 600; color: #64748b; font-size: 0.8rem; }
.bp-sections { display: flex; flex-direction: column; gap: 0.6rem; max-width: 720px; }
.bp-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 0.8rem; background: #fff; border: 1px solid #e8ebf0; border-radius: 10px; }
.bp-row-num { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #f1f5f9; color: #64748b; font-size: 0.74rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bp-row-thumb { position: relative; flex: 0 0 200px; height: 119px; overflow: hidden; border-radius: 7px; background: #f8fafc; border: 1px solid #eef2f6; }
.bp-row-frame { position: absolute; top: 0; left: 0; width: 1280px; height: 760px; border: 0; transform: scale(var(--bp-scale, 0.156)); transform-origin: top left; pointer-events: none; background: #fff; }
.bp-row-name { flex: 1; font-size: 0.9rem; font-weight: 600; color: #1e293b; }
.bp-row-acts { flex: 0 0 auto; display: flex; gap: 0.2rem; }
.bp-iact { width: 28px; height: 28px; border: 1px solid #e2e8f0; background: #fff; border-radius: 6px; cursor: pointer; color: #64748b; font-size: 0.8rem; line-height: 1; }
.bp-iact:hover { background: #f1f5f9; color: #1e293b; }
.bp-iact-del:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.bp-addbtn { margin-top: 1rem; }
.bp-empty { color: #64748b; font-size: 0.9rem; max-width: 720px; padding: 1.25rem; text-align: center; background: #fafbfc; border: 1px dashed #e2e8f0; border-radius: 10px; }
.sg-meta-opt { font-weight: 500; font-size: 0.72rem; color: #a8b0bd; }
/* site-blueprint page rows */
.sb-row-body { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.sb-row-sub { font-size: 0.74rem; color: #64748b; }
.sb-row-title { flex: 0 0 200px; padding: 0.4rem 0.6rem; border: 1px solid #d8dee8; border-radius: 7px; font-size: 0.84rem; }
.sb-addrow { display: flex; gap: 0.6rem; max-width: 720px; margin-top: 1rem; }
.sb-addrow .sg-input { flex: 1; }
@media (max-width: 560px) { .sb-row-title { flex-basis: 120px; } }

/* ---- New site form ---- */
.newsite-form { display: flex; flex-direction: column; gap: 1rem; max-width: 620px; }
.newsite-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .newsite-2col { grid-template-columns: 1fr; } }
.newsite-form .field-hint { font-size: 0.78rem; color: #64748b; line-height: 1.5; }
.newsite-form .field-hint code, .newsite-note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: #f1f5f9; padding: 0 0.25rem; border-radius: 3px; }
.newsite-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.5rem; }
.newsite-actions .btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.newsite-note { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.78rem; color: #64748b; line-height: 1.5; margin: 0.25rem 0 0; }
.newsite-note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 0.1rem; }

/* ---- Launch & health: live-status cards + note ---- */
.stat-count-sm { font-size: 1.2rem; font-weight: 700; }
.build-note { font-size: 0.86rem; color: #334155; margin-top: 1.25rem; }

/* ---- Health & checks ---- */
.health-banner { display: flex; align-items: center; gap: 0.8rem; border-radius: 12px; padding: 0.95rem 1.15rem; margin-bottom: 0.5rem; }
.health-banner svg { width: 26px; height: 26px; flex: 0 0 auto; }
.health-banner strong { display: block; font-size: 1rem; }
.health-banner span { font-size: 0.8rem; color: #64748b; }
.health-banner.is-ready { background: #f0fdf4; border: 1px solid #bbf7d0; }
.health-banner.is-ready svg { color: #15803d; }
.health-banner.is-ready strong { color: #15803d; }
.health-banner.is-warn { background: #fffbeb; border: 1px solid #fde68a; }
.health-banner.is-warn svg, .health-banner.is-warn strong { color: #b45309; }
.health-banner.is-blocked { background: #fef2f2; border: 1px solid #fecaca; }
.health-banner.is-blocked svg, .health-banner.is-blocked strong { color: #b91c1c; }
.check-list { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.check-row { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 1rem; border-bottom: 1px solid #f1f5f9; }
.check-row:last-child { border-bottom: none; }
.check-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; }
.check-ico svg { width: 14px; height: 14px; }
.check-pass .check-ico { background: #dcfce7; color: #15803d; }
.check-warn .check-ico { background: #fef3c7; color: #b45309; }
.check-fail .check-ico { background: #fee2e2; color: #b91c1c; }
.check-code { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; flex: 0 0 auto; }
.check-msg { font-size: 0.86rem; color: #334155; flex: 1; }
a.check-row { text-decoration: none; transition: background-color .12s ease; }
a.check-row:hover { background: #f8fafc; }
.check-go { flex: 0 0 auto; color: #cbd5e1; }
.check-go svg { width: 16px; height: 16px; }
a.check-row:hover .check-go { color: #64748b; }

/* ---- Users & access flash ---- */
.users-flash { display: flex; align-items: center; gap: 0.5rem; border-radius: 10px; padding: 0.7rem 0.95rem; margin-bottom: 1rem; font-size: 0.86rem; }
.users-flash svg { width: 16px; height: 16px; flex: 0 0 auto; }
.users-flash-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.users-flash-err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.users-conn { color: #64748b; }
.user-cell { display: flex; align-items: center; gap: 0.6rem; }
.user-avatar { width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; background: color-mix(in srgb, var(--brand-primary) 14%, #eef2f6); color: var(--brand-primary); }
.user-id { display: flex; flex-direction: column; line-height: 1.25; }
.user-email { color: #64748b; font-size: 0.8rem; }
.tbl td.user-meta { color: #64748b; }
.tbl td.user-actions { text-align: right; white-space: nowrap; }
.user-del-form { display: inline; }
.tbl td.users-empty { color: #64748b; padding: 1.2rem; }
/* The header button is the only way to reach Add a user, so it carries the
   44px thumb target on a phone even though .btn-sm is shorter than that. */
@media (max-width: 560px) { .users-add-btn { min-height: 44px; } }

/* ---- Section-editor drawer tabs (Content/Design/Data) — attached to the
   drawer's dark topbar: a sticky row flush under the head, underline-active
   like the rest of the admin's tabs. ---- */
/* Drop the body's top padding when tabs are present so they sit flush to
   the dark head; the tabs span the body's side padding. */
.editor-drawer-body:has(.pe-drawer-tabs) { padding-top: 0; }
.editor-drawer-body .pe-drawer-tabs {
    position: sticky; top: 0; z-index: 4;
    display: flex; gap: 0;
    margin: 0 -1.25rem 1.1rem;             /* span the 1.25rem body side padding, flush to head */
    padding: 0 1.25rem;
    background: #13161f;                    /* darker — matches the rail */
    box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
.pe-drawer-tabs .settings-tab {
    position: relative;
    appearance: none; border: 0; background: none; cursor: pointer;
    padding: 0.7rem 0.85rem 0.64rem; font: 600 0.82rem/1 inherit; color: rgba(255,255,255,0.55);
}
.pe-drawer-tabs .settings-tab:hover { color: #fff; }
.pe-drawer-tabs .settings-tab.is-active { color: #fff; }
.pe-drawer-tabs .settings-tab.is-active::after {
    content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0; height: 2px;
    background: linear-gradient(90deg, #2b87da, #35c4a9);   /* motif blue → teal */
    border-radius: 2px;
}

/* ---- Save-conflict resolution (field-level optimistic concurrency) ---- */
.pe-conflict { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 0.85rem 0.95rem; margin-bottom: 1rem; }
.pe-conflict-head { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; color: #92400e; font-size: 0.9rem; margin-bottom: 0.2rem; }
.pe-conflict-head svg { width: 16px; height: 16px; }
.pe-conflict-sub { font-size: 0.8rem; color: #78716c; margin: 0 0 0.7rem; line-height: 1.45; }
.pe-conflict-field { border-top: 1px solid #fde68a; padding: 0.6rem 0; }
.pe-conflict-field-name { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #92400e; margin-bottom: 0.35rem; }
.pe-conflict-opt { display: block; width: 100%; text-align: left; border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; padding: 0.5rem 0.65rem; margin-bottom: 0.4rem; cursor: pointer; font-size: 0.82rem; color: #334155; }
.pe-conflict-opt:hover { border-color: #cbd5e1; }
.pe-conflict-opt.is-chosen { border-color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); }
.pe-conflict-opt b { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 0.15rem; font-weight: 700; }
.pe-conflict-val { color: #0f172a; word-break: break-word; }

/* ============================================================
   3-column shell — fixed icon rail + context menu + main
   ============================================================ */
.shell.shell-3col { grid-template-columns: 56px 248px 1fr; }
.shell.shell-2col { grid-template-columns: 56px 1fr; }
/* Desktop sidebar collapse (default open; state in the hq_nav_collapsed cookie).
   Collapsing hides the context menu and lets the 3-col shell fall back to the
   rail + main layout. Scoped to desktop so the mobile drawer (<=860px) is
   unaffected. */
@media (min-width: 861px) {
    body.nav-collapsed .shell.shell-3col { grid-template-columns: 56px 1fr; }
    body.nav-collapsed .shell.shell-3col .ctxmenu { display: none; }
    body.nav-collapsed .shell.shell-3col .main { max-width: 88rem; }
}
.rail-collapse { border: 0; background: transparent; cursor: pointer; }
.rail-collapse svg { transition: transform 150ms ease; }
body.nav-collapsed .rail-collapse svg { transform: rotate(180deg); }
@media (max-width: 860px) { .rail-collapse { display: none; } }
/* Page editor needs a full-bleed flex-column main so .page-editor (flex:1)
   fills the height and the off-canvas .editor-drawer positions correctly. */
.main:has(.page-editor) { padding: 0 !important; max-width: none !important; display: flex; flex-direction: column; min-height: 100vh; overflow: visible; }
/* Full-width views (no context menu) get a touch more breathing room + a cap. */
.shell.shell-2col .main { max-width: 88rem; }

.railbar { background: #13161f; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.6rem 0; position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: 40; }
.rail-logo { width: 38px; height: 38px; border-radius: 10px; background: #fff; display: grid; place-items: center; text-decoration: none; margin-bottom: 0.3rem; flex: 0 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.rail-logo svg { display: block; }
.rail-add { width: 38px; height: 38px; border-radius: 10px; border: 1px dashed rgba(255,255,255,0.25); background: transparent; color: rgba(255,255,255,0.7); display: grid; place-items: center; cursor: pointer; margin-bottom: 0.5rem; flex: 0 0 auto; }
.rail-add svg { width: 18px; height: 18px; }
.rail-add:hover { color: #fff; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); }
.rail-add-menu { position: absolute; left: 60px; top: 56px; z-index: 60; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 8px 24px rgba(15,23,42,0.18); padding: 0.3rem; min-width: 158px; display: flex; flex-direction: column; }
.rail-add-menu[hidden] { display: none; }
.rail-add-menu a { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border-radius: 7px; color: #334155; text-decoration: none; font-size: 0.86rem; font-weight: 600; }
.rail-add-menu a svg { width: 16px; height: 16px; color: #64748b; }
.rail-add-menu a:hover { background: #f1f5f9; color: #0f172a; }
.rail-item { position: relative; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; color: rgba(255,255,255,0.55); text-decoration: none; flex: 0 0 auto; }
.rail-item svg { width: 21px; height: 21px; }
.rail-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.rail-item.active { background: color-mix(in srgb, var(--brand-primary) 34%, #1f2433); color: #fff; }
.rail-item.active::before { content: ""; position: absolute; left: -6px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-primary); }
.rail-spacer { flex: 1 1 auto; }
.rail-account { width: 36px; height: 36px; border-radius: 50%; background: #3a4150; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; text-decoration: none; flex: 0 0 auto; }
.rail-account:hover { background: #49515f; }

/* Context-menu plain header (non-site areas) */
.sidebar.ctxmenu { padding-top: 1.1rem; }
.sidebar .ctx-head { flex: 0 0 auto; padding: 0 1.25rem 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 0.5rem; }
.ctx-head-eyebrow { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin: 0; }
.ctx-head-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0.15rem 0 0; }

@media (max-width: 860px) {
    .shell.shell-3col { grid-template-columns: 52px 1fr; }
    .ctxmenu { position: fixed; left: 52px; top: 0; bottom: 0; width: 248px; transform: translateX(-115%); transition: transform .2s ease; z-index: 56; box-shadow: 0 0 40px rgba(0,0,0,0.3); }
    body.mobile-sidebar-open .ctxmenu { transform: none; }
}

/* ── Live-editing UI (style guide save status, toggles, add-page, add-section) ── */
.save-status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: #64748b; }
.save-status .save-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.save-status[data-state="dirty"] { color: #b45309; } .save-status[data-state="dirty"] .save-dot { background: #f59e0b; }
.save-status[data-state="saving"] { color: #475569; } .save-status[data-state="saving"] .save-dot { background: #475569; animation: save-pulse 0.8s ease-in-out infinite; }
.save-status[data-state="saved"] { color: #15803d; } .save-status[data-state="saved"] .save-dot { background: #16a34a; }
.save-status[data-state="error"] { color: #b91c1c; } .save-status[data-state="error"] .save-dot { background: #dc2626; }
@keyframes save-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.sg-toggle { display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer; }
.sg-toggle input { margin-top: 0.2rem; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; accent-color: #0f172a; cursor: pointer; }
.sg-toggle-text { display: flex; flex-direction: column; gap: 0.15rem; }
.sg-toggle-title { font-size: 0.9rem; font-weight: 600; color: #1e293b; }
.sg-toggle-hint { font-size: 0.8rem; color: #64748b; line-height: 1.4; }

.newpage-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1rem; padding: 0.9rem 1rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
.newpage-form input { font-size: 0.85rem; padding: 0.45rem 0.65rem; border: 1px solid #cbd5e1; border-radius: 7px; min-width: 12rem; }
.newpage-err { color: #b91c1c; font-size: 0.82rem; }

.es-addbar { display: flex; align-items: center; gap: 0.5rem; }
.es-addbar select { font-size: 0.82rem; padding: 0.4rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 7px; max-width: 16rem; }

/* The HTML hidden attribute must beat the display rules above (JS toggles it). */
[hidden] { display: none !important; }

/* Media library — unused badge + delete action */
.media-tile .media-thumb { position: relative; }
.media-unused-badge { position: absolute; top: 0.5rem; left: 0.5rem; background: rgba(180,83,9,0.92); color: #fff; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.15rem 0.45rem; border-radius: 4px; pointer-events: none; }
.media-act-del:hover { color: #dc2626; }

/* Contextual "Add a section" picker (opened from a section chip in the editor) */
.es-picker-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.35); z-index: 60; }
.es-picker { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(900px, 94vw); height: min(620px, 86vh); background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 20px 60px rgba(15,23,42,0.25); z-index: 61; display: flex; flex-direction: column; overflow: hidden; }
.es-picker-head { display: flex; gap: 0.5rem; padding: 0.8rem; border-bottom: 1px solid #eef2f6; }
.es-picker-head input { flex: 1; padding: 0.5rem 0.7rem; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 0.9rem; }
.es-picker-close { background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: #64748b; }
/* browse-group facets row under the search */
.es-picker-facets { display: flex; gap: 0.4rem; padding: 0.55rem 0.8rem; border-bottom: 1px solid #eef2f6; flex-wrap: wrap; }
.es-picker-facets select { flex: 1; min-width: 8rem; padding: 0.35rem 0.5rem; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 0.82rem; background: #fff; color: #334155; }
/* master/detail body: name list (left) + preview pane (right) */
.es-picker-body { display: grid; grid-template-columns: 240px 1fr; min-height: 0; flex: 1; }
/* block (not flex) so a long, scrolling list never compresses the names into
   each other — they keep their padding regardless of count */
.es-pick-names { overflow-y: auto; padding: 0.4rem; border-right: 1px solid #eef2f6; }
.es-picker-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0.5rem 0.65rem; border-radius: 7px; font-size: 0.86rem; color: #334155; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-picker-item + .es-picker-item { margin-top: 1px; }
.es-picker-item:hover { background: #f1f5f9; }
.es-picker-item.is-active { background: color-mix(in srgb, var(--brand-primary) 12%, #fff); color: var(--brand-primary); font-weight: 600; }
.es-pick-detail { display: flex; flex-direction: column; min-height: 0; }
.es-pick-detail-empty { margin: auto; padding: 2rem; color: #64748b; font-size: 0.9rem; text-align: center; }
.es-pick-detail-view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
/* render the section at DESKTOP width (1280) scaled to fit the pane, like the cards */
.es-pick-detail-thumb { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #f8fafc; }
.es-pick-detail-frame { position: absolute; top: 0; left: 0; width: 1280px; height: 2000px; border: 0; transform: scale(var(--es-scale, 0.46)); transform-origin: top left; background: #fff; }
.es-pick-detail-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-top: 1px solid #eef2f6; }
.es-pick-detail-name { font-size: 0.92rem; font-weight: 600; color: #1e293b; }

/* Design tab — spacing (top/bottom presets) + variant */
.pe-space-hint { font-size: 0.8rem; color: #64748b; margin: 0 0 0.6rem; line-height: 1.4; }
/* Section anchor name. Monospace because it is an identifier, not prose: the
   difference between an l and a 1 matters when somebody is matching it against
   a link they typed elsewhere. */
.pe-anchor-input {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font: 500 0.82rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: #0f172a;
    background: #fff;
}
.pe-anchor-input:focus { outline: 2px solid #0f766e; outline-offset: 1px; border-color: #0f766e; }
.pe-anchor-input::placeholder { color: #94a3b8; }
.pe-anchor-note { font-size: 0.75rem; color: #b45309; margin: 0.4rem 0 0; line-height: 1.4; }

/* Quiet link through to the quote bin. Deliberately not a filter pill: the bin
   is a different view of the table, not another status alongside draft and
   sent, and putting it in that row would suggest otherwise. */
.quotes-binlink { margin: 0 0 1rem; font-size: 0.85rem; }
.quotes-binlink a { color: #64748b; text-decoration: none; border-bottom: 1px solid #cbd5e1; }
.quotes-binlink a:hover { color: #0f172a; border-bottom-color: #94a3b8; }
.pe-space-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.pe-space-side { flex: 0 0 3rem; font-size: 0.78rem; font-weight: 600; color: #64748b; }
.pe-spaceseg { display: flex; flex: 1; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.pe-spaceopt { flex: 1; font-size: 0.72rem; font-weight: 600; color: #475569; background: #fff; border: 0; border-right: 1px solid #e2e8f0; padding: 0.42rem 0.2rem; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.pe-spaceopt:last-child { border-right: 0; }
.pe-spaceopt:hover { background: #f1f5f9; }
.pe-spaceopt.is-active { background: var(--brand-primary); color: #fff; }
.pe-variant-select { width: 100%; font-size: 0.85rem; padding: 0.5rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #1e293b; }

/* Pages list — attention indicator + status toggle + delete */
.pages-tbl td { vertical-align: middle; }
.page-attn { margin-left: 0.6rem; font-size: 0.7rem; font-weight: 700; color: #b45309; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 999px; padding: 0.15rem 0.55rem; cursor: pointer; vertical-align: middle; }
.page-attn:hover, .page-attn.is-open { background: #fde68a; }
.status-pill { display: inline-block; font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 0.22rem 0.7rem; border: 1px solid transparent; cursor: pointer; }
.status-pill.status-published { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.status-pill.status-draft { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.status-pill.is-locked { cursor: default; opacity: 0.9; }
.page-row-actions { text-align: right; white-space: nowrap; }
.row-act-del { color: #64748b; }
.row-act-del:hover { color: #dc2626; }
.attn-detail > td { background: #fffbeb; padding: 0.3rem 1rem 0.6rem; }
.attn-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.attn-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 7px; color: #1e293b; font-size: 0.85rem; text-decoration: none; }
.attn-link:hover { background: #fde68a; }
.attn-missing { color: #b45309; font-size: 0.8rem; }
.attn-arrow { margin-left: auto; color: #b45309; font-weight: 700; }


/* ---- Shell chrome ignores per-site colours (2026-07-22) ----------------
   The rail + sidebar stay platform-coloured; a site's own colours live in
   the dashboard hero only. shell.php scopes the site accent to .main; these
   pin the ctx band (tinted via the inline --sb) to neutral. The small site
   avatar keeps --sb as an identity chip. */
.ctx-switch {
    background: linear-gradient(180deg, #2a3142 0%, #1c2230 100%);
}
.ctx-switch::before {
    background: linear-gradient(90deg, #4a5578 0%, color-mix(in srgb, #4a5578 35%, transparent) 65%, transparent 100%);
}

/* The "it is working" bar. Editing a site from HQ is a bridge call to that
   site's own database, which takes a few seconds since the move off SQLite.
   Fixed to the top so it is visible wherever you are on the page and never
   pushes layout around. Indeterminate on purpose: we cannot know how long a
   bridge call takes, and a bar that invents its own progress is a worse lie
   than no bar. See public/busy.js. */
.hq-busy {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    display: flex; align-items: center; gap: 0.6rem;
    pointer-events: none;
}
.hq-busy[hidden] { display: none; }
.hq-busy-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: rgba(148, 163, 184, 0.25); overflow: hidden;
}
.hq-busy-bar::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
    background: var(--brand-primary, #2a4a3a);
    animation: hq-busy-sweep 1.15s ease-in-out infinite;
}
@keyframes hq-busy-sweep {
    0%   { left: -38%; }
    100% { left: 100%; }
}
.hq-busy-label {
    margin: 0.55rem auto 0; padding: 0.3rem 0.75rem;
    background: #0f172a; color: #fff; border-radius: 999px;
    font-size: 0.76rem; font-weight: 600; letter-spacing: 0.01em;
    box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.5);
}
/* A sweeping stripe is motion. Under reduced-motion keep the bar, lose the
   travel: a steady tinted band still says "working". */
@media (prefers-reduced-motion: reduce) {
    .hq-busy-bar::after { animation: none; left: 0; width: 100%; opacity: 0.55; }
}

/* Niche Questionnaire (derived, read-only). */
.nq-counts { margin: 0 0 1rem; font-size: 0.86rem; color: #475569; }
.nq-tbl .nq-kind { font-family: ui-monospace, monospace; font-size: 0.78rem; color: #64748b; }
.nq-flag { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 0.72rem; font-weight: 600; margin-right: 0.3rem; }
.nq-flag-claim { background: #fef3c7; color: #92400e; }
.nq-foot { margin-top: 1.5rem; padding-top: 0.9rem; border-top: 1px solid #e5e7eb; font-size: 0.82rem; }