/* ════════════════════════════════════════════════════════════════════
   FG-CMS — editor chrome.
   Admin bar, login overlay, inline-edit affordances, toast.
   ════════════════════════════════════════════════════════════════════ */

/* Push the page content below the admin bar when authed */
body.cms-edit.cms-authed { padding-top: 46px; }
body.cms-edit.cms-authed nav.site-nav { top: 46px; }

/* ── Admin bar ─────────────────────────────────────────────────────── */
.cms-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  height: 46px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  background: #0f172a;
  color: rgba(255,255,255,0.8);
  font-family: var(--font-eyebrow, 'Barlow Condensed', sans-serif);
  font-size: 12px; letter-spacing: 0.08em;
}
.cms-bar-left, .cms-bar-right { display: flex; align-items: center; gap: 14px; }
.cms-badge {
  background: rgba(255,255,255,0.1); color: #fff;
  padding: 4px 10px; border-radius: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.cms-page { color: rgba(255,255,255,0.55); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }

/* ── Page picker dropdown (Phase 5) ────────────────────────────────── */
.cms-page-wrap { position: relative; display: inline-block; }
.cms-page-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cms-page-btn:hover { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.25); }
.cms-page-btn[aria-expanded="true"] { background: rgba(255,255,255,0.16); color: #fff; }
.cms-page-btn svg { transition: transform 0.15s; }
.cms-page-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── Slug rename pill (next to the page picker) ──────────────────── */
.cms-slug-btn {
  display: inline-flex; align-items: center;
  margin-left: 6px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cms-slug-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}
.cms-slug-btn-value {
  font-family: monospace;
  font-size: 11px;
  letter-spacing: normal;
  text-transform: none;
  margin-left: 4px;
  color: #a5b4fc;
}
.cms-slug-btn:hover .cms-slug-btn-value { color: #c7d2fe; }

/* "See live" link next to the slug pill — same chrome as the slug button
   but rendered as an <a> so it opens the live page in a new tab. */
.cms-slug-live-link {
  display: inline-flex; align-items: center;
  margin-left: 6px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2px;
  text-decoration: none;
  font-family: inherit;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cms-slug-live-link:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}

.cms-page-menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 220px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #1e293b;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 9999;
  display: flex; flex-direction: column;
  font-family: var(--font-eyebrow, sans-serif);
  /* Slim dark scrollbar to match the menu chrome */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.cms-page-menu::-webkit-scrollbar { width: 8px; }
.cms-page-menu::-webkit-scrollbar-track { background: transparent; }
.cms-page-menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
}
.cms-page-menu::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }
.cms-page-menu[hidden] { display: none; }

.cms-page-item, .cms-page-action {
  display: block;
  padding: 8px 14px;
  background: none; border: none; text-align: left; width: 100%;
  font-family: inherit;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.cms-page-item:hover, .cms-page-action:hover {
  background: rgba(255,255,255,0.08); color: #fff;
}
.cms-page-item.is-active {
  background: #6366f1; color: #fff;
}
.cms-page-item.is-active:hover { background: #4f46e5; }

.cms-page-sep {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 4px 0;
}
.cms-page-new   { color: #a5b4fc; }
.cms-page-new:hover { color: #c7d2fe; background: rgba(99,102,241,0.18); }
.cms-page-delete { color: #f87171; }
.cms-page-delete:hover { color: #fff; background: #b91c1c; }

/* ── Language tabs in the admin bar (Phase 4) ──────────────────────── */
.cms-lang-tabs {
  display: inline-flex;
  margin-left: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
  overflow: hidden;
}
.cms-lang-tab {
  padding: 5px 12px;
  font-family: inherit;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  background: transparent;
  border-right: 1px solid rgba(255,255,255,0.08);
  transition: background 0.15s, color 0.15s;
}
.cms-lang-tab:last-child { border-right: none; }
.cms-lang-tab:hover { background: rgba(255,255,255,0.08); color: #fff; }
.cms-lang-tab.is-active {
  background: #6366f1; color: #fff;
}
.cms-status {
  font-size: 11px; color: rgba(255,255,255,0.45);
  display: inline-flex; align-items: center; gap: 6px;
}
.cms-status::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e;
}
.cms-status.dirty::before { background: #f59e0b; }
.cms-btn {
  font-family: inherit;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 16px; border: none; cursor: pointer;
  background: rgba(255,255,255,0.1); color: #fff; border-radius: 2px;
}
.cms-btn:hover { background: rgba(255,255,255,0.18); }
.cms-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cms-btn-save { background: #16a34a; color: #fff; }
.cms-btn-save:hover:not(:disabled) { background: #15803d; }
.cms-btn-logout {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.1);
}
.cms-btn-logout:hover {
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
}

/* Phase 7a — draft / publish UI ----------------------------------- */

/* Pill that announces "this page has unpublished changes". Sits
   between the status indicator and the action buttons. */
.cms-draft-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 9px; border-radius: 2px;
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.45);
}
.cms-draft-badge[hidden] { display: none; }

/* Publish — primary action, the only blue thing in the bar. */
.cms-btn-publish {
  background: #2563eb; color: #fff;
}
.cms-btn-publish:hover:not(:disabled) { background: #1d4ed8; }
.cms-btn-publish[hidden] { display: none; }

/* Discard — destructive but small. Dim by default; flushes red on
   hover the same way Logout does, to mirror the "this destroys
   work" semantics. */
.cms-btn-discard {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.1);
}
.cms-btn-discard:hover {
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
}
.cms-btn-discard[hidden] { display: none; }

/* Tombstone banner — sticky strip below the admin bar shown while a
   page deletion is queued but not yet published. Bright enough to be
   obvious; not so loud it competes with the page content. */
.cms-tombstone-banner {
  position: sticky;
  top: 48px;                      /* admin bar height */
  z-index: 999;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px;
  background: #fef3c7;            /* warm warning background */
  color: #78350f;
  border-bottom: 1px solid #f59e0b;
  font-family: var(--font-body, sans-serif);
  font-size: 13px;
  line-height: 1.45;
}
.cms-tombstone-banner[hidden] { display: none; }
.cms-tombstone-icon {
  font-size: 18px; line-height: 1;
  flex: 0 0 auto;
}
.cms-tombstone-text strong { color: #b45309; }

/* Phase 7b — Versions modal ----------------------------------------- */

/* Versions button — neutral, sits among the action buttons. */
.cms-btn-versions {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.1);
}
.cms-btn-versions:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* Modal scaffold — fixed full-viewport, centered panel. */
.cms-versions-modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
}
.cms-versions-modal[hidden] { display: none; }
.cms-versions-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
}
.cms-versions-panel {
  position: relative;
  width: min(560px, 92vw);
  max-height: 80vh;
  background: #fff;
  color: #1a1a1a;
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
  font-family: var(--font-body, sans-serif);
}

/* Head: title + close button. */
.cms-versions-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #ebebeb;
}
.cms-versions-title {
  margin: 0; font-size: 15px; font-weight: 600;
  letter-spacing: 0;
}
.cms-versions-slug {
  font-family: ui-monospace, SF Mono, Menlo, monospace;
  font-size: 13px; color: #666;
  background: #f3f3f3; padding: 2px 6px; border-radius: 3px;
}
.cms-versions-close {
  background: none; border: none; cursor: pointer;
  font-size: 24px; line-height: 1;
  color: #888; padding: 0 6px;
}
.cms-versions-close:hover { color: #1a1a1a; }

/* Body: scrollable list area. */
.cms-versions-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 20px;
}
.cms-versions-empty {
  color: #888; text-align: center;
  padding: 32px 0; font-size: 13px;
  margin: 0;
}
.cms-versions-error { color: #b91c1c; }

.cms-versions-list {
  list-style: none; margin: 0; padding: 0;
}
.cms-versions-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
.cms-versions-item:last-child { border-bottom: none; }
.cms-versions-meta {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.cms-versions-when {
  font-size: 13px; color: #1a1a1a; font-weight: 500;
}
.cms-versions-stats {
  font-size: 11px; color: #888;
}

.cms-versions-restore {
  font-family: inherit;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid #d0d0d0; cursor: pointer;
  background: #fff; color: #1a1a1a; border-radius: 2px;
}
.cms-versions-restore:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

/* Foot: usage hint. */
.cms-versions-foot {
  border-top: 1px solid #ebebeb;
  padding: 12px 20px;
}
.cms-versions-hint {
  margin: 0; font-size: 12px; color: #666; line-height: 1.5;
}

/* Lock background scroll while modal is open. */
body.cms-modal-open { overflow: hidden; }

/* ── Toast ─────────────────────────────────────────────────────────── */
.cms-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #0f172a; color: #fff;
  padding: 10px 18px; border-radius: 2px;
  font-family: var(--font-eyebrow, 'Barlow Condensed', sans-serif);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0; pointer-events: none; transition: opacity 0.22s, transform 0.22s;
  z-index: 9999;
}
.cms-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cms-toast.error { background: #b91c1c; }

/* ── Inline editing affordances ────────────────────────────────────── */
body.cms-edit.cms-authed [data-field] {
  outline: 1px dashed transparent;
  outline-offset: 2px;
  transition: outline-color 0.15s, background 0.15s;
  cursor: text;
}
body.cms-edit.cms-authed [data-field]:hover {
  outline-color: rgba(99,102,241,0.45);
}
body.cms-edit.cms-authed [data-field]:focus {
  outline-color: #6366f1;
  background: rgba(99,102,241,0.06);
}

/* Image fields: show "click to replace" affordance.
   Scoped so we don't override the block CSS's positioning on <img>
   elements (e.g. absolutely-positioned images inside aspect-ratio
   placeholders in programme/exhibitions cards). */
body.cms-edit.cms-authed [data-field-image] { cursor: pointer; }

/* Div-based image fields can host a pseudo-element overlay. */
body.cms-edit.cms-authed div[data-field-image] {
  position: relative;
}
body.cms-edit.cms-authed div[data-field-image]::after {
  content: 'Click to replace image';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5);
  color: #fff; font-family: var(--font-eyebrow);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0; transition: opacity 0.15s;
  pointer-events: none;
  z-index: 3;
}
body.cms-edit.cms-authed div[data-field-image]:hover::after { opacity: 1; }

/* Fresh upload preview: when the upload handler has just dropped a
   `background-image: url(...)` inline style onto a placeholder DIV,
   render it edge-to-edge — matching how the server will re-render
   the field as <img object-fit:cover> on next page load. Also hides
   any empty-state marker (e.g. the team "+" sign in
   `.tg-photo-empty::before`) so the photo doesn't show through it. */
body.cms-edit.cms-authed div[data-field-image][style*="background-image"] {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
body.cms-edit.cms-authed div[data-field-image][style*="background-image"]::before {
  display: none !important;
}

/* For <img> hot-spots, give a subtle ring on hover so the user
   sees that the photo itself is clickable. */
body.cms-edit.cms-authed img[data-field-image] {
  transition: outline-color 0.15s;
  outline: 2px solid transparent;
  outline-offset: -2px;
}
body.cms-edit.cms-authed img[data-field-image]:hover {
  outline-color: #6366f1;
}

/* ── Per-block chrome (Phase 3b) ──────────────────────────────────────
   Each editable block gets a position:relative wrapper + a small
   toolbar in the top-right (drag, delete). Visible on block hover. */
body.cms-edit.cms-authed .cms-block-host { position: relative; }
body.cms-edit.cms-authed .cms-block-host::before {
  content: '';
  position: absolute; inset: 0;
  outline: 2px dashed transparent;
  outline-offset: -2px;
  pointer-events: none;
  transition: outline-color 0.18s;
  z-index: 9;
}
body.cms-edit.cms-authed .cms-block-host:hover::before {
  outline-color: rgba(99,102,241,0.4);
}
.cms-block-tools {
  position: absolute;
  /* ~2cm down from the top of the section. This guarantees the toolbar
     on the first block sits below the fixed public nav (which spans
     ~46–119px from the page top) instead of in the same vertical band,
     and keeps the offset consistent across every other block on the
     page so the chrome looks uniform. */
  top: 80px;
  right: 8px;
  /* Must sit above the public site nav (z-index 100) so the edit / move /
     delete buttons on the first block aren't covered by the fixed nav. The
     admin bar itself is at 9999 so 110 doesn't interfere with that. */
  z-index: 110;
  display: flex; gap: 4px;
  opacity: 0;
  /* Fade in fast on block hover; hold for 2 s after cursor leaves so the
     toolbar stays reachable on short blocks (key-dates, truth) where its
     y=80 offset lands near or past the section's bottom edge. */
  transition: opacity 0.18s 2s;
  pointer-events: none;
}
body.cms-edit.cms-authed .cms-block-host:hover .cms-block-tools,
.cms-block-tools:hover {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}
.cms-block-btn {
  width: 30px; height: 30px;
  background: #0f172a; color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
  line-height: 1;
}
.cms-block-btn:hover:not(:disabled) { background: #1e293b; }
.cms-block-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.cms-block-delete:hover:not(:disabled) { background: #b91c1c; }
.cms-block-up, .cms-block-down { font-size: 15px; line-height: 1; }
/* Hide block-tools on the public view */
body:not(.cms-edit) .cms-block-tools { display: none; }

/* ── Block info (label + colour-picker chip) ──
   Bottom-left of every editable block. Contains the block-name label
   and a 🎨 chip that opens the section-colour picker. Uses the same
   indigo (#6366f1) as the rest of the editor chrome. Hidden on the
   public site. */
.cms-block-info {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 60;
  display: flex;
  gap: 6px;
  align-items: center;
}
body:not(.cms-edit) .cms-block-info,
body:not(.cms-edit) .cms-block-name { display: none; }

.cms-block-name {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  background: #6366f1;
  color: #fff;
  border-radius: 2px;
  pointer-events: none;
  user-select: none;
}

.cms-block-bg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: #fff;
  color: #6366f1;
  border: 1px solid #6366f1;
  border-radius: 2px;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.cms-block-bg-btn:hover { background: #6366f1; color: #fff; }

/* ── Section colour picker popover ── */
.cms-bg-picker {
  position: fixed;
  z-index: 10000;
  width: 280px;
  background: #fff;
  border: 1px solid #6366f1;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
  padding: 14px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
}
.cms-bg-picker-section { margin-bottom: 14px; }
.cms-bg-picker-section:last-of-type { margin-bottom: 10px; }
.cms-bg-picker-label {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3f3c35;
  font-size: 10px;
  margin-bottom: 8px;
}
.cms-bg-swatches {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.cms-bg-swatch {
  width: 100%; aspect-ratio: 1;
  padding: 0;
  border: 1px solid #e5e0dc;
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.1s;
}
.cms-bg-swatch:hover { transform: scale(1.08); }
.cms-bg-swatch.is-active {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
}
.cms-bg-picker-input {
  display: flex;
  align-items: center;
}
.cms-bg-hex {
  flex: 1;
  font-family: 'Helvetica Neue', monospace;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid #e5e0dc;
  border-radius: 2px;
  color: #1a1714;
  background: #f9f6f3;
}
.cms-bg-hex:focus {
  outline: none;
  border-color: #6366f1;
  background: #fff;
}
.cms-bg-auto {
  padding: 3px 8px;
  font-family: inherit;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #fff;
  color: #6366f1;
  border: 1px solid #6366f1;
  border-radius: 2px;
  cursor: pointer;
}
.cms-bg-auto.is-active,
.cms-bg-auto:hover { background: #6366f1; color: #fff; }
.cms-bg-picker-actions {
  display: flex; justify-content: space-between;
  border-top: 1px solid #e5e0dc;
  padding-top: 10px;
  margin-top: 4px;
}
.cms-bg-picker-actions button {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: transparent;
  color: #3f3c35;
  border: 1px solid #e5e0dc;
  border-radius: 2px;
  cursor: pointer;
}
.cms-bg-reset { color: #b91c1c; border-color: #b91c1c33; }
.cms-bg-reset:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.cms-bg-close:hover { background: #6366f1; color: #fff; border-color: #6366f1; }

.cms-bg-picker-hint {
  font-size: 11px;
  line-height: 1.4;
  color: #6b7280;
  margin-top: 8px;
}

/* ── Per-element colour chip ──
   Floating button that follows whichever editable text/button element
   the user is hovering. Click opens the same palette popover (scoped to
   that element). Hidden on the public site. */
.cms-field-color-chip {
  position: fixed;
  z-index: 9000;          /* above content (~110) and reveal layer, below admin bar (9999) and popover (10000) */
  width: 22px;
  height: 22px;
  padding: 0;
  background: #fff;
  border: 1px solid #6366f1;
  border-radius: 2px;
  color: #6366f1;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: background 0.12s, transform 0.12s;
}
.cms-field-color-chip:hover {
  background: #6366f1;
  transform: scale(1.06);
}
body:not(.cms-edit) .cms-field-color-chip { display: none; }

/* ── Stale-write banner ──
   Shown at the top of the viewport when the server rejects a save as
   stale (another tab/editor wrote after we loaded). Fixed above the
   admin bar. Editor.js injects it on demand and never removes it. */
.cms-stale-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10002;                   /* above admin bar (9999) + pickers */
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  background: #b91c1c;
  color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.cms-stale-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.cms-stale-text {
  flex: 1;
}
.cms-stale-reload {
  flex-shrink: 0;
  padding: 7px 14px;
  background: #fff;
  color: #b91c1c;
  border: none;
  border-radius: 2px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.cms-stale-reload:hover {
  background: #1a1714;
  color: #fff;
}

/* ── Per-card toolbar ──
   Three small buttons in the top-right of every card / row that lives
   in a list: ▲ move-up, ▼ move-down, × remove. Block render.php emits
   data-list-item="<path>.<i>" on the card wrapper to opt in. Hidden by
   default; fade in on hover of the card or any button. Hidden entirely
   on the public site. Moves are indigo (same accent as +Add); remove
   is red. */
body.cms-edit [data-list-item] { position: relative; }
body:not(.cms-edit) .cms-list-item-remove,
body:not(.cms-edit) .cms-list-item-move { display: none; }

.cms-list-item-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 55;            /* above card chrome, below the section toolbar (110) */
  width: 22px;
  height: 22px;
  padding: 0;
  background: rgba(255, 255, 255, 0.94);
  color: #b91c1c;
  border: 1px solid rgba(185, 28, 28, 0.35);
  border-radius: 2px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  /* Fade in fast on hover; hold for 2 s after cursor leaves so short
     items (e.g. the key-dates strip) stay reachable. See :hover rules
     below — they override transition-delay back to 0 while active. */
  transition: opacity 0.15s 2s, background 0.15s, color 0.15s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
[data-list-item]:hover .cms-list-item-remove,
.cms-list-item-remove:hover {
  opacity: 1;
  transition-delay: 0s;
}
.cms-list-item-remove:hover {
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
}

.cms-list-item-move {
  position: absolute;
  top: 6px;
  z-index: 55;
  width: 22px;
  height: 22px;
  padding: 0;
  background: rgba(255, 255, 255, 0.94);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 2px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s 2s, background 0.15s, color 0.15s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.cms-list-item-move-up   { right: 58px; }
.cms-list-item-move-down { right: 32px; }
[data-list-item]:hover .cms-list-item-move,
.cms-list-item-move:hover {
  opacity: 1;
  transition-delay: 0s;
}
.cms-list-item-move:not([disabled]):hover {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}
.cms-list-item-move[disabled] {
  cursor: not-allowed;
  opacity: 0.35;
}
[data-list-item]:hover .cms-list-item-move[disabled] {
  opacity: 0.35;     /* keep disabled buttons dim even when the card is hovered */
}

/* ── Per-list "+ Add" button ──
   Dashed empty cell that lives at the end of a list's grid. Click adds
   a new card by cloning the last item's shape + placeholder content.
   Always visible in edit mode (no hover); hidden on the public site. */
body:not(.cms-edit) .cms-list-item-add { display: none; }

.cms-list-item-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 80px;
  padding: 24px 16px;
  background: transparent;
  border: 1px dashed rgba(99, 102, 241, 0.45);
  border-radius: 2px;
  color: #6366f1;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.cms-list-item-add::before {
  content: '+';
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
.cms-list-item-add:hover {
  background: rgba(99, 102, 241, 0.06);
  border-color: #6366f1;
  border-style: solid;
}

/* ── Reveal animations are public-only ──
   shared/site.js sets up a scroll-reveal observer on page load. New
   blocks inserted via the editor wouldn't be observed and would stay at
   opacity:0 until refresh. Force everything visible in edit mode so
   inserts appear immediately — and to remove a distraction while
   editing. The animation still runs on the public site. */
body.cms-edit .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ── Insertion zones + picker (Phase 3d) ─────────────────────────────
   A thin horizontal strip between blocks. The actual button is
   small and unobtrusive but its full strip is a click target so it's
   easy to find. Hide on the public site. */
.cms-insert-zone {
  position: relative;
  height: 36px;
  display: flex; align-items: center; justify-content: center;
  /* Same reason as .cms-block-tools — the "+" insert button between blocks
     sits in the same vertical band as the fixed public nav for the first
     gap on the page, so it must paint above it. */
  z-index: 110;
}
body:not(.cms-edit) .cms-insert-zone { display: none; }
.cms-insert-zone::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 0; height: 1px; background: #6366f1;
  transform: translate(-50%, -50%);
  transition: width 0.18s;
}
.cms-insert-zone:hover::before { width: 64%; }
.cms-insert-btn {
  position: relative; z-index: 1;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid #6366f1;
  background: #fff; color: #6366f1;
  font-size: 18px; line-height: 0;
  cursor: pointer;
  opacity: 0.65; transition: opacity 0.15s, transform 0.15s, background 0.15s, color 0.15s;
}
.cms-insert-zone:hover .cms-insert-btn,
.cms-insert-btn:focus {
  opacity: 1; transform: scale(1.06);
  background: #6366f1; color: #fff;
}

/* ── Source-language ghost preview (Phase 4b) ─────────────────────────
   Read-only preview of the default-lang value, rendered below each
   editable field while the user is translating. Light variant by
   default; dark variant scoped to dark sections + the global footer.
   The ::before injects the source-lang badge ("EN" by default) so we
   never need to bake the language code into JS markup. */
body.cms-edit.cms-authed .cms-source-ghost {
  display: block;
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 0.78em;
  font-style: italic;
  font-weight: 300;
  font-family: var(--font-body);
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.55);
  background: rgba(99, 102, 241, 0.05);
  border-left: 2px solid rgba(99, 102, 241, 0.4);
  text-transform: none;
  letter-spacing: normal;
  cursor: default;
  user-select: text;
  pointer-events: auto;
  /* Mirror the source field's whitespace handling so multi-line text
     (e.g. calendar details) shows the same line breaks in the ghost
     preview as in the editable area. */
  white-space: pre-line;
}
body.cms-edit.cms-authed .cms-source-ghost::before {
  content: attr(data-ghost-lang) ' \00b7 ';
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.12em;
  color: rgba(99, 102, 241, 0.85);
  margin-right: 4px;
  font-size: 0.95em;
}
/* Dark variant for sections with dark backgrounds. */
body.cms-edit.cms-authed .section--dark .cms-source-ghost,
body.cms-edit.cms-authed .block-footer .cms-source-ghost,
body.cms-edit.cms-authed [data-cms-global="footer"] .cms-source-ghost {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border-left-color: rgba(165, 180, 252, 0.6);
}
body.cms-edit.cms-authed .section--dark .cms-source-ghost::before,
body.cms-edit.cms-authed .block-footer .cms-source-ghost::before,
body.cms-edit.cms-authed [data-cms-global="footer"] .cms-source-ghost::before {
  color: rgba(165, 180, 252, 0.95);
}
/* Defensive: the ghost should never appear on the public site, even
   if a stale class is left over somewhere. */
body:not(.cms-edit) .cms-source-ghost { display: none; }
/* Toggle: when the user has hidden the source preview, every ghost
   collapses (works across pages because the pref is in localStorage).
   Specificity matches the body.cms-edit.cms-authed .cms-source-ghost
   rule above by chaining .cms-ghosts-hidden onto the body selector
   so this `display: none` actually wins. */
body.cms-edit.cms-authed.cms-ghosts-hidden .cms-source-ghost {
  display: none;
}

/* Toggle button in the admin bar — sits next to the lang tabs. */
.cms-ghost-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 6px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.cms-ghost-toggle:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.cms-ghost-toggle.is-off {
  opacity: 0.45;
  text-decoration: line-through;
}
.cms-ghost-toggle.is-off:hover { opacity: 0.85; }
.cms-ghost-toggle-eye { font-size: 13px; line-height: 1; }
.cms-ghost-toggle-label { font-size: 10px; letter-spacing: 0.18em; }

/* ── Hide / show footer toggle (Phase 5c) ─────────────────────────── */
/* "Hide" button injected onto the rendered global footer in edit mode. */
.cms-hide-footer-btn {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 50;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 6px 12px;
  font-family: var(--font-eyebrow);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cms-hide-footer-btn:hover {
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
}
body:not(.cms-edit) .cms-hide-footer-btn { display: none; }
[data-cms-global="footer"] { position: relative; }

/* Placeholder shown in edit mode when hide_footer is true on the page. */
.cms-footer-hidden {
  margin: 48px 32px;
  padding: 28px 32px;
  border: 2px dashed rgba(0,0,0,0.15);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-muted);
  font-family: var(--font-eyebrow);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
}
.cms-show-footer-btn {
  background: #6366f1; color: #fff; border: none;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.cms-show-footer-btn:hover { background: #4f46e5; }

/* Empty-page state: when the current page has zero blocks, the tail
   "+" zone becomes a big centered card so the user can actually find
   it — the regular thin strip is hidden behind the fixed nav and
   easy to miss when main has no other content. */
.cms-insert-zone.cms-insert-empty {
  height: auto;
  margin: 96px 32px;
}
.cms-insert-zone.cms-insert-empty::before { display: none; }
.cms-insert-zone.cms-insert-empty .cms-insert-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  width: 100%;
  height: 220px;
  border-radius: 4px;
  border: 2px dashed #6366f1;
  background: rgba(99,102,241,0.04);
  color: #4338ca;
  font-family: var(--font-eyebrow);
  font-size: 13px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 1;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
}
.cms-insert-zone.cms-insert-empty .cms-insert-btn:hover {
  background: #6366f1; color: #fff;
  border-color: #6366f1; border-style: solid;
  transform: none;
}
.cms-insert-empty-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #6366f1; color: #fff;
  font-size: 28px;
  letter-spacing: 0;
  border: 2px solid #6366f1;
  transition: background 0.18s, color 0.18s;
}
.cms-insert-zone.cms-insert-empty .cms-insert-btn:hover .cms-insert-empty-plus {
  background: #fff; color: #6366f1;
}

.cms-picker {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 220px;
  display: flex; flex-direction: column;
  z-index: 9998;
}
.cms-picker-item {
  text-align: left;
  padding: 12px 16px;
  background: none; border: none;
  font-family: var(--font-eyebrow);
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-fg);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.cms-picker-item:hover { background: var(--color-surface); color: #1A1A1A; }
.cms-picker-item .cms-picker-eada {
  color: #D93A5A;      /* EADA red */
  font-weight: 700;
  letter-spacing: 0.14em;
}
.cms-picker-item .cms-picker-rest {
  color: #1A1A1A;      /* EADA ink */
}
.cms-picker-item:hover .cms-picker-rest { color: #1A1A1A; }
.cms-picker > .cms-picker-head {
  padding: 10px 16px 6px;
  font-family: var(--font-eyebrow);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #AAAAAA;
  background: #F7F5F2;
  border-top: 1px solid var(--color-border);
}
.cms-picker > .cms-picker-head:first-child { border-top: 0; }
.cms-picker-empty {
  padding: 12px 16px; color: var(--color-muted);
  font-size: 13px; font-style: italic;
}


/* ── URL editor pill (Phase 3a) ───────────────────────────────────────
   Appears next to every link with data-field-href. Click opens
   prompt() to edit the href. */
.cms-href-btn {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: #6366f1; color: #fff;
  border: none; cursor: pointer;
  font-family: var(--font-eyebrow);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.4;
  opacity: 0.55;
  transition: opacity 0.15s;
  /* The link picker is appended to this button as an absolutely-
     positioned child. Without position:relative, it would float
     against the nearest positioned ancestor — fine in the nav
     (position: fixed) but invisible in the footer (no positioned
     ancestor → falls back to viewport, top:100% → off-screen). */
  position: relative;
}
.cms-href-btn:hover { opacity: 1; }
/* Hide on the public site (defensive — they won't be wired up there) */
body:not(.cms-edit) .cms-href-btn { display: none; }

/* In the nav, every link gets a URL pill — keep them ghosted by default
   so the bar stays readable, full opacity on hover. */
body.cms-edit.cms-authed nav.site-nav .cms-href-btn { opacity: 0.25; }
body.cms-edit.cms-authed nav.site-nav [data-field-href]:hover + .cms-href-btn,
body.cms-edit.cms-authed nav.site-nav .cms-href-btn:hover { opacity: 1; }

/* ── Nav per-link toolbar (Phase 3g) ─────────────────────────────────
   Inline ↑ ↓ ✕ next to every nav link in edit mode. */
.cms-link-tools {
  display: none;
  align-items: center; gap: 2px;
  margin-left: 6px;
  vertical-align: middle;
}
body.cms-edit.cms-authed .cms-link-tools { display: inline-flex; }
.cms-link-btn {
  width: 22px; height: 22px; padding: 0;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.12);
  cursor: pointer;
  font-family: inherit; font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: #333;
  border-radius: 2px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cms-link-btn:hover { background: rgba(99,102,241,0.18); border-color: #6366f1; }
.cms-link-del:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }

/* Dead-link warning + visible style */
.cms-link-warn {
  display: inline-block;
  margin-right: 4px;
  color: #b45309;
  cursor: help;
}
body:not(.cms-edit) .cms-link-warn { display: none; }
body.cms-edit.cms-authed nav.site-nav li.cms-link-dead a {
  color: #b45309 !important;
  text-decoration: line-through;
}

/* + Add link trigger and its picker */
.cms-add-link { position: relative; display: inline-flex; }
body:not(.cms-edit) .cms-add-link { display: none; }
.cms-add-link-btn {
  background: rgba(99,102,241,0.12);
  color: #4338ca;
  border: 1px dashed #6366f1;
  padding: 6px 10px;
  font-family: var(--font-eyebrow);
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cms-add-link-btn:hover { background: #6366f1; color: #fff; }
.cms-link-picker .cms-picker-head {
  padding: 8px 16px 4px;
  font-family: var(--font-eyebrow);
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-muted);
  background: var(--color-surface);
}
.cms-link-picker {
  /* Anchor below the + button rather than relative-centered */
  left: auto; right: 0; transform: none;
  min-width: 260px;
  max-height: 380px;
  overflow-y: auto;
}

/* Edit-mode picker shows a small header with the link's current URL
   so the user knows which link they're modifying. */
.cms-link-picker-edit .cms-picker-current {
  padding: 10px 16px;
  background: rgba(99, 102, 241, 0.08);
  border-bottom: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: 4px;
}
.cms-link-picker-edit .cms-picker-current-label {
  font-family: var(--font-eyebrow);
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-muted);
}
.cms-link-picker-edit .cms-picker-current-url {
  font-family: monospace;
  font-size: 12px;
  color: var(--color-fg);
  word-break: break-all;
}

/* The hero-bg is a div with a background-image — give it the affordance too */
body.cms-edit.cms-authed .block-hero .hero-bg {
  cursor: pointer;
}

/* ── Login overlay ─────────────────────────────────────────────────── */
.cms-login {
  position: fixed; inset: 0; z-index: 99999;
  background: #0f172a; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-eyebrow, 'Barlow Condensed', sans-serif);
}
.cms-login-box {
  background: #1e293b; padding: 40px 36px; min-width: 320px;
  display: flex; flex-direction: column; gap: 14px;
}
.cms-login-box h2 {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-weight: 300; font-size: 28px; letter-spacing: 0.04em;
  color: #fff;
}
.cms-login-box p {
  font-size: 12px; color: rgba(255,255,255,0.55);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.cms-login-box input {
  background: #0f172a; color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 12px 14px; font-size: 15px; font-family: inherit;
  letter-spacing: 0.1em;
}
.cms-login-box input:focus { outline: none; border-color: #6366f1; }
.cms-login-box button {
  background: #6366f1; color: #fff; border: none;
  padding: 12px 14px; cursor: pointer;
  font-family: inherit;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
}
.cms-login-box button:hover { background: #4f46e5; }
.cms-login-error { color: #f87171; font-size: 12px; min-height: 16px; }