/* CMS editor — what is LEFT of the editor's own CSS once web-components v1 owns the components.
   The kit ships the buttons, fields, inputs, panels, tables, badges, alerts, tabs, dialogs, pagination
   and the shell; this file carries the app's own furniture only. Every colour, radius, shadow, face
   and duration below is a `--kit-*` ROLE read straight from kit.css; tokens.css holds the single
   CMS-private colour (--cms-accent-soft) and nothing else.

   IT MUST STAY UNLAYERED. kit.css puts itself in cascade layers, and an unlayered rule beats every
   layered one for the same property; that is the only thing keeping these overrides on top of the
   kit's. Wrapping this file in @layer would silently invert that. */
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--kit-color-surface); color: var(--kit-color-content); font-family: var(--kit-font-sans); font-size: 15px; line-height: 1.5; }
/* NO bare `a` rule. Ours was `color: var(--kit-color-accent-hover); text-decoration: none`, and because our
   stylesheets are unlayered it beat every kit component that inks its own links — the shell nav came
   out brand-orange instead of muted, and a .kit-button worn by an <a> would have kept an underline
   through its label. Links are the kit's now: --kit-color-content-accent, underlined at rest (1.1). */
code { font-family: var(--kit-font-mono); font-size: .86em; background: var(--kit-color-surface-sunken); padding: 1px 6px; border-radius: var(--kit-radius-100); color: var(--kit-color-content); }

/* The WORDMARK, which is all that is left of our own topbar — the kit ships a nav slot and no brand
   (kit-shell-header / kit-nav / kit-shell-main do the rest, and the site switcher is a .kit-select). */
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--kit-font-display); font-weight: 800;
  letter-spacing: -.02em; color: var(--kit-color-content); }
a.brand:hover { text-decoration: none; }
.brand::before { content: ""; width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(135deg, var(--kit-color-accent), var(--kit-color-accent-hover)); box-shadow: var(--kit-elevation-1); }
.brand .dot { display: none; }

/* The whole-tile click target: a link stretched over a .kit-panel, the real controls floating above it. */
.kit-panel { position: relative; }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.kit-panel .actions { position: relative; z-index: 2; }

/* page shell — headings only; the column, its cap and its gutter are the kit's kit-shell-main. */
h1 { font-family: var(--kit-font-display); font-weight: 700; letter-spacing: -.02em; font-size: 1.7rem; margin: 0 0 4px; }
h3 { font-family: var(--kit-font-display); font-weight: 600; letter-spacing: -.01em; margin: 0 0 6px; }

.frow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; padding: 8px 10px;
  border: 1px solid var(--kit-color-border); border-radius: var(--kit-radius-control); background: var(--kit-color-surface-raised); }
.frow .req { display: flex; align-items: center; gap: 4px; color: var(--kit-color-content-muted); font-size: .8rem; white-space: nowrap; }
.frow :is(.kit-input, .kit-select) { flex: 1 1 110px; min-width: 90px; padding: 7px 9px; }
.frow .kit-input.grow { flex: 2 1 160px; }
.fhelp { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; background: var(--kit-color-surface-sunken); color: var(--kit-color-content-muted); font-size: .72rem; font-weight: 700;
  margin-left: 5px; cursor: help; vertical-align: middle; }

/* block builder */
.block-builder .block-card { border: 1px solid var(--kit-color-border); border-radius: var(--kit-radius-surface); padding: 12px 14px; margin-bottom: 10px; background: var(--kit-color-surface-raised); box-shadow: var(--kit-elevation-1); }
.block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.block-type { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--kit-color-content-accent); }
.block-field { margin-bottom: 8px; } .block-field label { display: block; font-size: .78rem; color: var(--kit-color-content-muted); margin-bottom: 3px; }
.block-field :is(.kit-input, .kit-select) { padding: 7px 10px; } .block-field textarea { width: 100%; min-height: 70px; }
/* Idle-logout countdown (idle.js) — a .kit-dialog now; only the counting number is ours. */
.idle-modal .idle-count { font-weight: 700; color: var(--kit-color-content-accent); }
/* Auth shell (base.html): the brand square + the two spacing rules its card needs. Everything else the
   login page used to carry — its own blue accent scale, its own greys, its own dark mode, its own flash
   colours — is gone; the page links this stylesheet now. The re-login reason banner is a .kit-alert. */
.auth-brand { margin-bottom: 4px; }
.auth-brand h1 { margin: 0; font-size: 1.25rem; }
.auth-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--kit-radius-surface);
  background: linear-gradient(135deg, var(--kit-color-accent), var(--kit-color-accent-hover)); color: var(--kit-color-on-accent);
  font-family: var(--kit-font-display); font-weight: 800; }
.auth-sub { margin: 2px 0 20px; }
/* Columns block editor — each column is a nested mini block-list */
.block-col-editor { border: 1px dashed var(--kit-color-border-interactive); border-radius: var(--kit-radius-control); padding: 10px 12px; margin: 8px 0; background: var(--kit-color-surface); }
.block-col-editor > .kit-caption { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; margin-bottom: 6px; }
.blocks-list.nested .block-card { background: var(--kit-color-surface); }
.blocks-list.nested:empty::before { content: "Empty column — add a block below."; color: var(--kit-color-content-muted); font-size: .8rem; }
/* Drag-and-drop reorder */
.block-grip { cursor: grab; margin-right: 7px; color: var(--kit-color-content-muted); font-size: 1.05rem; letter-spacing: -2px; user-select: none; }
.block-card.draggable { cursor: default; }
.block-card.dragging { opacity: .45; outline: 2px dashed var(--kit-color-accent); }
.lock-order:checked ~ span { color: var(--kit-color-content-accent); }
/* Markdown cheatsheet — a .kit-dialog with a .kit-table; only the code cells need anything of ours. */
.md-cheat-table code { background: var(--kit-color-surface-sunken); padding: 1px 5px; border-radius: var(--kit-radius-100); font-size: .85em; }

/* ADB asset field + picker */
.asset-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.asset-thumb { position: relative; width: 84px; height: 60px; border-radius: var(--kit-radius-control); overflow: hidden; border: 1px solid var(--kit-color-border); }
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-thumb .asset-uuid { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-family: var(--kit-font-mono); font-size: .7rem; color: var(--kit-color-content-muted); background: var(--kit-color-surface-sunken); }
.asset-thumb .asset-rm { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: 0; border-radius: 50%;
  background: rgba(20,24,31,.75); color: #fff; cursor: pointer; font-size: .8rem; line-height: 1; }
/* The asset picker is a .kit-dialog now — its box, backdrop and scroll are the kit's. */
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); gap: 10px; }
.asset-pick { border: 1px solid var(--kit-color-border); border-radius: var(--kit-radius-surface); background: var(--kit-color-surface); cursor: pointer; padding: 0; overflow: hidden; text-align: left; }
.asset-pick:hover { border-color: var(--kit-color-accent); box-shadow: var(--kit-elevation-1); }
.asset-pick img { width: 100%; height: 90px; object-fit: cover; display: block; }
.asset-pick .asset-typeph { display: flex; align-items: center; justify-content: center; width: 100%; height: 90px;
  background: var(--kit-color-surface-sunken); color: var(--kit-color-content-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.asset-pick span { display: block; padding: 6px 8px; font-size: .78rem; color: var(--kit-color-content-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.navbtn-row :is(.kit-input, .kit-select) { min-width: 0; }

/* --- header/footer live preview (Configuration) --------------------------------------------------- */
.hdr-preview { border: 1px solid var(--kit-color-border); border-radius: var(--kit-radius-surface); overflow: hidden; background: var(--kit-color-surface); --hp-h: 16px; }
/* .hp-top = the logo band (.hp-head) + the nav row (.hp-navrow); column (nav below) or row (nav right) */
.hp-top { display: flex; flex-direction: column; }
.hdr-preview.nav-right .hp-top { flex-direction: row; align-items: stretch; }
.hp-head { display: flex; align-items: center; padding: 12px 18px; background: var(--kit-color-surface-raised); min-height: calc(var(--hp-h) + 14px); }
.hdr-preview.nav-below .hp-head { justify-content: center; }
.hdr-preview.nav-below.logo-left .hp-head { justify-content: flex-start; }
.hdr-preview.nav-right .hp-head { flex: 0 0 auto; }
.hp-brand { font-family: var(--kit-font-display); font-weight: 800; font-size: 15px; color: var(--kit-color-content); line-height: 1; }
.hp-brand-logo img { height: var(--hp-h); width: auto; max-width: 160px; display: block; }
.hp-navrow { display: flex; align-items: center; padding: 9px 18px; background: var(--kit-color-surface-raised); }
.hdr-preview.nav-right .hp-navrow { flex: 1 1 auto; }
.hp-nav { display: flex; gap: 13px; font-size: 11px; color: var(--kit-color-content-muted); flex-wrap: wrap; }
.hdr-preview.align-center .hp-navrow { justify-content: center; }
.hdr-preview.align-right  .hp-navrow { justify-content: flex-end; }
.hdr-preview.align-left   .hp-navrow { justify-content: flex-start; }
.hdr-preview.has-sep .hp-head { border-bottom: 2px solid var(--kit-color-accent); }
/* image + gradient on the LOGO BAND (hp-head) only — the nav row stays on the normal background */
.hdr-preview.has-bg .hp-head { background: var(--hp-grad, none), var(--hp-bg, none) center / cover no-repeat, var(--kit-color-surface-raised); }
.hdr-preview.has-bg .hp-brand { position: relative; }
.hp-page { padding: 16px 18px; display: flex; flex-direction: column; gap: 7px; min-height: 58px; }
.hp-bar { height: 8px; border-radius: 4px; background: var(--kit-color-surface-sunken); }
.hp-bar.w80 { width: 80%; } .hp-bar.w60 { width: 60%; } .hp-bar.w40 { width: 40%; }
.hp-foot { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--kit-color-surface-raised); border-top: 1px solid var(--kit-color-border); font-size: 11px; color: var(--kit-color-content-muted); }
.hp-flogo { display: none; width: 46px; height: 16px; background: var(--kit-color-content-muted); border-radius: 3px; opacity: .55; }
.hdr-preview.foot-logo .hp-flogo { display: block; }

/* --- content-card preview (Configuration) — mirrors the public card via the same --card-* vars ------ */
.cardpv { display: block; width: 230px; text-decoration: none; border-radius: var(--kit-radius-surface-lg); overflow: hidden;
  background: var(--card-bg, var(--kit-color-surface-raised)); border: var(--card-border, 1px solid var(--kit-color-border));
  box-shadow: var(--card-shadow, var(--kit-elevation-1)); transition: box-shadow .2s var(--kit-easing-standard), transform .2s var(--kit-easing-standard); }
.cardpv:hover { box-shadow: var(--card-hover-shadow, var(--kit-elevation-2)); transform: var(--card-hover-transform, translateY(-2px)); }
.cardpv-img { display: block; width: 100%; height: 108px; object-fit: var(--card-img-fit, cover);
  background: linear-gradient(135deg, var(--cms-accent-soft), var(--kit-color-surface-sunken)); }
.cardpv-body { display: block; padding: 0 16px 16px; }
.cardpv-pill { display: inline-block; margin: 14px 0 0; background: var(--cms-accent-soft); color: var(--kit-color-content-accent);
  font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--kit-radius-100); }
.cardpv-title { display: block; margin: 8px 0 4px; font-family: var(--kit-font-display); font-weight: 600; font-size: 1.02rem; color: var(--kit-color-content); }
.cardpv-sum { display: block; color: var(--kit-color-content-muted); font-size: .88rem; line-height: 1.4; }
/* Live card preview (type builder + content_grid block). An IFRAME, because the cards inside are rendered
   by the PUBLIC macro + public.css — the only way the preview can't drift from the real site. */
.card-preview-frame { display: block; width: 100%; min-height: 300px; border: 1px solid var(--kit-color-border);
  border-radius: var(--kit-radius-control); background: var(--kit-color-surface-sunken); color-scheme: normal; }
.block-grid-preview { margin-top: 10px; }
.block-grid-preview .card-preview-frame { min-height: 260px; }
/* All-content finder: the filters ARE the interface, so they sit in one wrapping bar */
.find-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.find-bar :is(.kit-input, .kit-select) { min-width: 0; }
/* Analytics page: stat tiles, a CSS-only daily bar chart, and a 2-up card grid */
.stat-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0; }
.stat { flex: 1 1 160px; padding: 14px 16px; border: 1px solid var(--kit-color-border); border-radius: var(--kit-radius-surface);
  background: var(--kit-color-surface-raised); display: flex; flex-direction: column; gap: 2px; }
.stat-n { font-family: var(--kit-font-display); font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.stat-l { color: var(--kit-color-content-muted); font-size: .85rem; }
.daybars { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding-top: 8px; }
.daybar { flex: 1 1 0; min-height: 2px; background: var(--kit-color-accent); border-radius: 2px 2px 0 0; opacity: .85; }
.daybar:hover { opacity: 1; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; margin-top: 16px; }
/* Per-blocks-field params (heading font · body font · spacing) */
.blocks-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px;
  padding: 8px 12px; border: 1px dashed var(--kit-color-border); border-radius: var(--kit-radius-control); background: var(--kit-color-surface-sunken); }
.blocks-opts label { display: flex; align-items: center; gap: .4em; margin: 0; }
.blocks-opts :is(.kit-input, .kit-select) { width: auto; padding: 3px 6px; font-size: .85rem; }
/* "Also publish on" — the cross-site share picker on the item form */
.share-sites { display: flex; flex-wrap: wrap; gap: 8px 18px; }
/* The public URL map on the type builder — makes the /<base>/all archive discoverable (no item backs it) */
.url-map { margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--kit-color-border); border-radius: var(--kit-radius-control);
  background: var(--kit-color-surface-sunken); font-size: .85rem; }
.url-map dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.url-map dt { white-space: nowrap; }
.url-map dd { margin: 0; color: var(--kit-color-content-muted); }

/* color field: swatch + hex.
   The input[type=color] rule styles the NO-JS fallback — the kit picker (kit-color.js) switches the
   type to text in place once it enhances, so this only ever applies before/without the module. */
.colorwrap { display: inline-flex; gap: 8px; align-items: center; }
.colorwrap input[type=color] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--kit-color-border-interactive);
  border-radius: var(--kit-radius-control); background: var(--kit-color-surface-raised); cursor: pointer; }

/* WORKAROUND — web-components v1.1.0 defect in kit.css.
   `:where(.kit-color-panel) { display: grid }` is unconditional, and an AUTHOR `display` beats the UA's
   `[popover]:not(:popover-open) { display: none }`. So every CLOSED picker panel stays a 256x318
   position:absolute, opacity:0 box that swallows clicks on whatever is under it — on the palettes form
   (11 colour fields) that is the NEXT field's input, which then cannot be focused at all. Measured, and
   measured again with tokens.css/editor.css disabled: the winning declaration is kit.css's own, not a
   collision with ours. The kit already does exactly this for `.kit-notif-panel` (kit.css:8760); this is
   the same rule for the one it missed. Remove it when the kit ships the fix. */
.kit-color-panel:not(:popover-open) { display: none; }

/* palette editor: live canvas (left) + fields (right) */
.palette-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 820px) { .palette-editor { grid-template-columns: 1fr; } }
.palette-canvas-wrap { position: sticky; top: 72px; }
.palette-canvas { border: 1px solid var(--kit-color-border); border-radius: var(--kit-radius-surface-lg); padding: 22px;
  background: var(--kit-color-surface); color: var(--kit-color-content); box-shadow: var(--kit-elevation-1); }
.palette-canvas h2 { font-family: var(--kit-font-display); margin: 0 0 6px; color: var(--kit-color-content); }
.palette-canvas a { color: var(--kit-color-content-accent); } .pc-muted { color: var(--kit-color-content-muted); }
.palette-canvas .pc-btn { padding: 8px 14px; border-radius: var(--kit-radius-surface); border: 1px solid var(--kit-color-accent-hover);
  background: var(--kit-color-accent); color: #fff; font-weight: 600; cursor: pointer; }
.palette-canvas .pc-sec { background: var(--kit-color-surface-raised); color: var(--kit-color-content); border-color: var(--kit-color-border-interactive); }
.palette-canvas .pc-card { margin: 14px 0; padding: 14px; border: 1px solid var(--kit-color-border); border-radius: var(--kit-radius-surface);
  background: var(--kit-color-surface-raised); }
.palette-canvas .pc-chip { display: inline-block; padding: 2px 9px; border-radius: var(--kit-radius-full);
  background: var(--cms-accent-soft); color: var(--kit-color-content-accent); font-size: .78rem; font-weight: 700; }
.palette-canvas .pc-input { width: 100%; margin-top: 10px; padding: 9px 11px; border-radius: var(--kit-radius-surface);
  border: 1px solid var(--kit-color-border-interactive); background: var(--kit-color-surface-raised); color: var(--kit-color-content); }
.palette-canvas .pc-sunken { margin-top: 12px; padding: 10px; border-radius: var(--kit-radius-control); background: var(--kit-color-surface-sunken);
  color: var(--kit-color-content-muted); font-size: .85rem; }

/* --- navbar builder (Configuration) -------------------------------------------------------------- */
.navbuilder, .navrow-wrap { display: flex; flex-direction: column; gap: 6px; }
.navrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.navrow > .kit-select { flex: 0 0 210px; min-width: 0; }
.navrow > .kit-input { flex: 1 1 150px; min-width: 0; }
.navrow--child { margin-left: 26px; border-left: 2px solid var(--kit-color-border); padding-left: 12px; }

/* --- live markdown preview (item editor) --------------------------------------------------------- */
.md-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 5px; }
.md-preview { margin-top: 10px; padding: 14px 18px; border: 1px solid var(--kit-color-border); border-radius: var(--kit-radius-control); background: var(--kit-color-surface-raised); line-height: 1.6; }
.md-preview.is-loading { opacity: .55; }
.md-preview > *:first-child { margin-top: 0; }
.md-preview > *:last-child { margin-bottom: 0; }
.md-preview h1, .md-preview h2, .md-preview h3, .md-preview h4 { font-family: var(--kit-font-display); line-height: 1.25; margin: 1.1em 0 .4em; }
.md-preview p, .md-preview ul, .md-preview ol, .md-preview blockquote { margin: .6em 0; }
.md-preview a { color: var(--kit-color-content-accent); }
.md-preview code { font-family: var(--kit-font-mono); background: var(--kit-color-surface-sunken); padding: 1px 6px; border-radius: var(--kit-radius-100); font-size: .9em; }
.md-preview pre { background: var(--kit-color-surface-sunken); padding: 12px 14px; border-radius: var(--kit-radius-control); overflow-x: auto; }
.md-preview pre code { background: none; padding: 0; }
.md-preview blockquote { border-left: 3px solid var(--kit-color-accent); padding-left: 14px; color: var(--kit-color-content-muted); }
/* The `.md-preview .btn*` rules are DELETED with the public ones they mirrored. This pane exists to
   show what the public page will show, so leaving them would have made the preview lie about the very
   change that broke them: an editor would style a button here and find a plain link in production. */
.md-preview .table-wrap { overflow-x: auto; margin: 1em 0; border: 1px solid var(--kit-color-border); border-radius: var(--kit-radius-control); }
.md-preview table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.md-preview th, .md-preview td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--kit-color-border); }
.md-preview thead th { background: var(--kit-color-surface-sunken); font-weight: 700; }
.md-preview tbody tr:nth-child(even) { background: color-mix(in srgb, var(--kit-color-surface-sunken) 40%, transparent); }

/* Background editor (Configuration → Design + the pages form). A live preview beside a stack of controls
   built by bg-editor.js; .bg-preview-after is the pattern/overlay layer (mirrors public .site-bg::after). */
.bg-editor-grid { display: grid; grid-template-columns: 230px 1fr; gap: 18px; align-items: start; }
.bg-preview { position: relative; overflow: hidden; height: 160px; border-radius: var(--kit-radius-surface);
  border: 1px solid var(--kit-color-border); background: var(--kit-color-surface-raised); background-size: cover; background-position: center; }
.bg-preview-after { position: absolute; inset: 0; pointer-events: none; }
.bg-controls .bg-field { margin: 0 0 10px; }
.bg-colorfield { display: flex; flex-direction: column; gap: 6px; }
.bg-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
.bg-swatch { width: 24px; height: 24px; padding: 0; border: 1px solid var(--kit-color-border-interactive);
  border-radius: var(--kit-radius-100); cursor: pointer; }
.bg-swatch.is-active { outline: 2px solid var(--kit-color-accent); outline-offset: 1px; }
.bg-colorrow { gap: 6px; align-items: center; flex-wrap: nowrap; }
.bg-colorpick { width: 40px; height: 34px; padding: 0; border: 1px solid var(--kit-color-border-interactive);
  border-radius: var(--kit-radius-100); background: none; cursor: pointer; flex: 0 0 auto; }
.bg-hex { width: 120px; font-family: var(--kit-font-mono); }
.bg-stops .bg-stop { gap: 6px; align-items: center; margin-bottom: 6px; }
.bg-stops .bg-stop input[type=number] { width: 80px; }
.bg-darktoggle { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: .9rem; }
.bg-panel--dark { margin-top: 10px; padding: 12px; border: 1px dashed var(--kit-color-border-interactive);
  border-radius: var(--kit-radius-control); background: var(--kit-color-surface-sunken); }
@media (max-width: 640px) { .bg-editor-grid { grid-template-columns: 1fr; } }