/* =============================================================================
   Inline case-study editor
   ----------------------------------------------------------------------------
   Loaded only when an authenticated CMS admin opens a case study with ?edit=1.
   Adds a top toolbar, makes editable elements visually obvious on hover, and
   provides keyboard / focus affordances.
   ============================================================================= */

/* ---- Edit-mode body adjustments ---- */
body.cs-edit-mode {
  /* Push everything down so the top toolbar doesn't cover content. */
  padding-top: 56px !important;
  box-sizing: border-box;
}
body.cs-edit-mode #global-nav,
body.cs-edit-mode .nav-container { display: none !important; }

/* The .cs-page padding-top is sized to clear the fixed global nav. We hide
   that nav in edit mode, so collapse the padding back to a thin gap. */
body.cs-edit-mode .cs-page {
  padding-top: 24px !important;
}
@media (max-width: 720px) {
  body.cs-edit-mode .cs-page { padding-top: 12px !important; }
}

/* Disable any in-page interactivity that fights the editor (lightbox, etc.). */
body.cs-edit-mode .cs-zoomable { pointer-events: none; }
body.cs-edit-mode .cs-zoomable-badge { display: none !important; }

/* ---- Top toolbar ---- */
.cms



-toolbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  z-index: 12000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  background: #0f1620;
  color: #fdfcfa;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.18);
  white-space: nowrap;
}
.cms-toolbar .cms-tb-brand {
  display: flex; align-items: center; gap: 8px;
  color: rgba(253,252,250,0.65);
}
.cms-toolbar .cms-tb-brand strong { color: #fdfcfa; font-weight: 500; letter-spacing: 0.06em; }
.cms-toolbar .cms-tb-spacer { flex: 1; }
.cms-toolbar .cms-tb-status {
  font-size: 11px;
  color: rgba(253,252,250,0.55);
  letter-spacing: 0.05em;
}
.cms-toolbar .cms-tb-status[data-state="dirty"] { color: #f0c453; }
.cms-toolbar .cms-tb-status[data-state="saving"] { color: rgba(253,252,250,0.55); }
.cms-toolbar .cms-tb-status[data-state="saved"] { color: #82d597; }
.cms-toolbar .cms-tb-status[data-state="error"] { color: #f48a8a; }

.cms-toolbar button,
.cms-toolbar a.cms-tb-btn {
  appearance: none;
  border: 1px solid rgba(253,252,250,0.18);
  background: transparent;
  color: #fdfcfa !important; /* override global a { color: #1b1b1b !important } */
  padding: 8px 12px;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  font-size: 11px;
}
.cms-toolbar button:hover,
.cms-toolbar a.cms-tb-btn:hover {
  background: rgba(253,252,250,0.08);
  border-color: rgba(253,252,250,0.35);
  color: #fdfcfa !important;
}
.cms-toolbar button[data-primary] {
  background: #fdfcfa;
  color: #0f1620 !important;
  border-color: #fdfcfa;
}
.cms-toolbar button[data-primary]:hover {
  background: #fff;
  border-color: #fff;
  color: #0f1620 !important;
}
.cms-toolbar button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.cms-toolbar [data-cms-portfolio][data-state="hidden"] {
  border-color: rgba(244, 138, 138, 0.65);
  color: #ffd3d3 !important;
}
.cms-toolbar [data-cms-portfolio][data-state="visible"] {
  border-color: rgba(130, 213, 151, 0.65);
  color: #d6f0dd !important;
}

/* ---- Editable element affordances ---- */
.cms-editable {
  outline: 1px dashed rgba(42,58,92,0); /* invisible until hover */
  outline-offset: 4px;
  border-radius: 2px;
  transition: outline-color 0.12s, background-color 0.12s;
  cursor: text;
}
.cms-editable:hover {
  outline-color: rgba(42,58,92,0.45);
  background-color: rgba(255, 235, 158, 0.16);
}
.cms-editable:focus {
  outline: 2px solid #2a3a5c !important;
  background-color: rgba(255, 235, 158, 0.28);
}
/* Inverse-section variant (so the dashed line is visible on dark navy). */
.cs-section--inverse .cms-editable:hover {
  outline-color: rgba(253,252,250,0.55);
  background-color: rgba(255, 235, 158, 0.10);
}
.cs-section--inverse .cms-editable:focus {
  outline-color: #fdfcfa !important;
}

/* While the user is composing, kill any text selection background that might
   confuse the affordance. */
body.cs-edit-mode ::selection { background: rgba(42,58,92,0.22); }

/* ---- Save banner overlay (used during save / error reporting) ---- */
.cms-flash {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  z-index: 12001;
  background: #0f1620;
  color: #fdfcfa;
  padding: 12px 20px;
  border-radius: 4px;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 12px 36px rgba(0,0,0,0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
}
.cms-flash[data-visible="1"] { opacity: 1; pointer-events: auto; }
.cms-flash[data-tone="error"] { background: #5a1f1f; color: #ffd3d3; }
.cms-flash[data-tone="success"] { background: #1f4a2c; color: #d6f0dd; }
.cms-flash[data-tone="info"] { background: #0f1620; color: #fdfcfa; }

/* Flash variant with an Undo action button. */
.cms-flash--action {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-right: 8px;
}
.cms-flash--action .cms-flash-msg { display: inline-block; }
.cms-flash--action .cms-flash-undo {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(253,252,250,0.3);
  color: #fdfcfa !important;
  padding: 6px 12px;
  font: inherit;
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  transition: background-color 0.12s, border-color 0.12s;
}
.cms-flash--action .cms-flash-undo:hover {
  background: rgba(253,252,250,0.14);
  border-color: rgba(253,252,250,0.55);
}

/* =============================================================================
   Slice 2 — floating format toolbar, section variant badge, image swap modal
   ============================================================================= */

/* ---- Floating selection toolbar ---------------------------------------- */
.cms-formatbar {
  position: absolute;
  z-index: 12010;
  display: flex;
  gap: 0;
  background: #0f1620;
  border-radius: 4px;
  padding: 4px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.32);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.cms-formatbar[data-visible="1"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cms-formatbar button {
  appearance: none;
  background: transparent;
  border: none;
  color: #fdfcfa !important;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 14px;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
}
.cms-formatbar button:hover {
  background: rgba(253,252,250,0.12);
  color: #fdfcfa !important;
}
.cms-formatbar button.is-active {
  background: rgba(253,252,250,0.22);
  color: #fdfcfa !important;
}
.cms-formatbar button b { font-weight: 700; }
.cms-formatbar button i { font-style: italic; }

/* ---- Section variant badge (per-section bg picker) -------------------- */
.cs-section { position: relative; }

.cms-section-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 11900;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.cs-section:hover > .cms-section-badge,
.cms-section-badge.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* When the badge itself is hovered (or its menu is open), outline the
   parent section so the user can see the scope of the variant change.

   Two offset modes: filled variants (soft/inverse) have ~80px of internal
   vertical padding, so we inset the outline 10px inside the colored band
   to trace the visible bg edge. Canvas variants have zero vertical
   padding, so an inset would cut into the content — instead we sit the
   outline a few px outside the box edge, in the section's margin space. */
.cs-section.cms-section-targeting {
  outline: 2px dashed rgba(42, 58, 92, 0.65);
  outline-offset: 8px;
  border-radius: 4px;
}
.cs-section--filled.cms-section-targeting {
  outline-offset: -10px;
}
.cs-section--inverse.cms-section-targeting {
  outline-color: rgba(253, 252, 250, 0.7);
}
/* Suppress the in-section editable / image hover affordances while the
   user is targeting a section variant — otherwise the cursor passing
   over an editable on its way to the badge lights up nested elements
   and drowns out the section-level outline. */
.cs-section.cms-section-targeting .cms-editable:hover,
.cs-section.cms-section-targeting .cms-editable:focus {
  outline-color: transparent !important;
  background-color: transparent !important;
}
.cs-section.cms-section-targeting .cms-image-swappable:hover {
  outline-color: transparent !important;
  box-shadow: none !important;
}
.cms-section-badge-pill {
  appearance: none;
  background: #0f1620;
  color: #fdfcfa !important;
  border: 1px solid rgba(253,252,250,0.2);
  padding: 6px 10px;
  border-radius: 3px;
  font: inherit;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: inherit;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.cms-section-badge-pill:hover {
  background: #1c2940;
  color: #fdfcfa !important;
}
.cms-section-badge-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #0f1620;
  border: 1px solid rgba(253,252,250,0.16);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.34);
  min-width: 140px;
  padding: 4px;
}
.cms-section-badge.is-open .cms-section-badge-menu { display: block; }
.cms-section-badge-opt {
  display: block;
  width: 100%;
  appearance: none;
  background: transparent;
  border: none;
  color: #fdfcfa !important;
  text-align: left;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: inherit;
}
.cms-section-badge-opt:hover {
  background: rgba(253,252,250,0.1);
  color: #fdfcfa !important;
}
.cms-section-badge-opt.is-active {
  background: rgba(255, 235, 158, 0.16);
  color: #f0c453 !important;
}

/* ---- Image swap affordance + modal ------------------------------------ */
body.cs-edit-mode .cms-image-swappable {
  cursor: pointer;
  outline: 1px dashed rgba(42,58,92,0);
  outline-offset: 4px;
  border-radius: 2px;
  transition: outline-color 0.12s, box-shadow 0.12s;
}
body.cs-edit-mode .cms-image-swappable:hover {
  outline-color: rgba(42,58,92,0.55);
  box-shadow: 0 0 0 4px rgba(255, 235, 158, 0.22);
}
.cs-section--inverse .cms-image-swappable:hover {
  outline-color: rgba(253,252,250,0.55);
}
/* Make sure the click goes to the image, not anything wrapping it. */
body.cs-edit-mode .cs-zoomable {
  pointer-events: none !important;
}
body.cs-edit-mode .cms-image-swappable {
  pointer-events: auto;
}

.cms-image-modal {
  position: fixed;
  inset: 0;
  z-index: 12100;
  background: rgba(15, 22, 32, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.cms-image-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.cms-image-modal-card {
  background: #fdfcfa;
  color: #0f1620;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.42);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
.cms-image-modal-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(20,20,20,0.1);
}
.cms-image-modal-card header h2 {
  margin: 0;
  font-family: 'Instrument Serif', 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: #0f1620;
}
.cms-image-modal-close {
  appearance: none;
  background: transparent;
  border: none;
  color: #6a7585;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 3px;
}
.cms-image-modal-close:hover { background: rgba(20,20,20,0.06); color: #0f1620; }
.cms-image-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 22px;
  padding: 22px;
  overflow: auto;
}
.cms-image-modal-preview {
  background: #f4f1ec;
  border: 1px solid rgba(20,20,20,0.08);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  overflow: hidden;
}
.cms-image-modal-preview img {
  max-width: 100%;
  max-height: 240px;
  display: block;
}
.cms-image-modal-fields { display: flex; flex-direction: column; }
.cms-image-modal-fields .cms-field-label {
  display: block;
  margin: 0 0 6px;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6a7585;
}
.cms-image-modal-fields .cms-field-label + .cms-field-label { margin-top: 16px; }
.cms-image-modal-fields input[type="file"],
.cms-image-modal-fields input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  font: 14px/1.4 'Inter', ui-sans-serif, system-ui, sans-serif;
  border: 1px solid rgba(20,20,20,0.18);
  border-radius: 3px;
  background: #fff;
  color: #0f1620;
  box-sizing: border-box;
}
.cms-image-modal-fields input[type="file"] { padding: 8px; }
.cms-image-modal-fields input[type="text"]:focus { outline: 2px solid #2a3a5c; outline-offset: 0; }
.cms-image-modal-hint {
  margin: 6px 0 12px;
  font-size: 12px;
  color: #6a7585;
}
.cms-image-modal-progress {
  margin-top: 8px;
  font-size: 12px;
  color: #2a3a5c;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
.cms-image-modal-error {
  margin: 8px 0 0;
  font-size: 12px;
  color: #b3261e;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
.cms-image-modal-card footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(20,20,20,0.08);
}
.cms-image-modal-card footer button {
  appearance: none;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid rgba(20,20,20,0.2);
  background: #fff;
  color: #0f1620 !important;
  border-radius: 3px;
  cursor: pointer;
}
.cms-image-modal-card footer button:hover { background: rgba(20,20,20,0.05); color: #0f1620 !important; }
.cms-image-modal-card footer button[data-primary] {
  background: #0f1620;
  color: #fdfcfa !important;
  border-color: #0f1620;
}
.cms-image-modal-card footer button[data-primary]:hover { background: #1c2940; color: #fdfcfa !important; }
.cms-image-modal-card footer button[disabled] { opacity: 0.5; cursor: not-allowed; }

body.cms-modal-open { overflow: hidden; }

/* =============================================================================
   Slice 3 additions — section toolbar, drag-and-drop, insert affordances,
   block-type pill, image library, link form, preview mode.
   ============================================================================= */

/* ---- Per-section toolbar (replaces the simple BG badge) ----------------
   Pull-quote and author-note are direct article children too, so they need
   `position: relative` so the absolutely-positioned toolbar sits above them. */
body.cs-edit-mode .cs-pullquote,
body.cs-edit-mode .cs-author-note { position: relative; }

.cms-section-toolbar {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 11900;
  display: flex;
  gap: 4px;
  background: #0f1620;
  border-radius: 4px;
  padding: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.cs-section:hover > .cms-section-toolbar,
.cs-pullquote:hover > .cms-section-toolbar,
.cs-author-note:hover > .cms-section-toolbar,
.cms-section-toolbar.is-bg-open,
.cs-section.cms-section-targeting > .cms-section-toolbar {
  opacity: 1;
  pointer-events: auto;
}
.cms-st-btn {
  appearance: none;
  background: transparent;
  border: none;
  color: #fdfcfa !important;
  padding: 6px 10px;
  font: inherit;
  cursor: pointer;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: inherit;
}
.cms-st-btn:hover { background: rgba(253,252,250,0.12); color: #fdfcfa !important; }
.cms-st-drag { cursor: grab; }
.cms-st-drag:active { cursor: grabbing; }
.cms-st-del:hover { background: rgba(244, 138, 138, 0.22); color: #ffd8d8 !important; }

.cms-section-bg-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #0f1620;
  border: 1px solid rgba(253,252,250,0.16);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.34);
  min-width: 140px;
  padding: 4px;
}
.cms-section-toolbar.is-bg-open .cms-section-bg-menu { display: block; }
.cms-section-bg-opt {
  display: block;
  width: 100%;
  appearance: none;
  background: transparent;
  border: none;
  color: #fdfcfa !important;
  text-align: left;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: inherit;
}
.cms-section-bg-opt:hover { background: rgba(253,252,250,0.1); color: #fdfcfa !important; }
.cms-section-bg-opt.is-active { background: rgba(255,235,158,0.16); color: #f0c453 !important; }

/* Drag state + drop indicators */
.cs-section.cms-section-dragging { opacity: 0.4; }
.cs-section.cms-drop-before { box-shadow: 0 -4px 0 #2a3a5c; }
.cs-section.cms-drop-after  { box-shadow: 0  4px 0 #2a3a5c; }

/* ---- Insert-section affordance ----------------------------------------
   Zero layout impact: the slot is height:0, the button is absolutely
   positioned at the slot's centerline, and a wide pseudo-element creates
   a 32px hover band in the gap between sections. */
.cms-insert-slot {
  position: relative;
  height: 0;
  margin: 0;
  z-index: 100;
}
.cms-insert-slot::before {
  content: '';
  position: absolute;
  top: -16px; left: 0; right: 0; bottom: -16px;
  pointer-events: auto;
}
.cms-insert-btn {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  appearance: none;
  background: #fdfcfa;
  border: 1px dashed rgba(42,58,92,0.45);
  color: rgba(42,58,92,0.78) !important;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s;
}
.cms-insert-btn span { font-weight: 600; margin-right: 4px; }
.cms-insert-slot:hover .cms-insert-btn,
.cs-section:hover + .cms-insert-slot .cms-insert-btn,
.cs-pullquote:hover + .cms-insert-slot .cms-insert-btn,
.cs-author-note:hover + .cms-insert-slot .cms-insert-btn {
  opacity: 1;
  pointer-events: auto;
}
.cms-insert-btn:hover {
  background: #0f1620;
  border-color: #0f1620;
  color: #fdfcfa !important;
}

/* ---- Insert-section catalog modal ------------------------------------- */
.cms-insert-modal {
  position: fixed; inset: 0;
  z-index: 12100;
  background: rgba(15, 22, 32, 0.62);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
}
.cms-insert-modal.is-open { opacity: 1; pointer-events: auto; }
.cms-insert-modal-card {
  background: #fdfcfa;
  color: #0f1620;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  border-radius: 6px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.42);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  overflow: hidden;
}
.cms-insert-modal-card header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(20,20,20,0.1);
}
.cms-insert-modal-card header h2 {
  margin: 0;
  font-family: 'Instrument Serif', 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: #0f1620;
}
.cms-insert-modal-close {
  appearance: none; background: transparent; border: none;
  color: #6a7585; font-size: 26px; line-height: 1; cursor: pointer;
  padding: 4px 10px; border-radius: 3px;
}
.cms-insert-modal-close:hover { background: rgba(20,20,20,0.06); color: #0f1620; }
.cms-insert-list {
  list-style: none; padding: 8px; margin: 0;
  overflow: auto;
}
.cms-insert-list li { margin: 0; }
.cms-insert-list button {
  display: block; width: 100%; text-align: left;
  appearance: none; background: transparent; border: none;
  padding: 14px 16px; border-radius: 4px;
  font: inherit; color: #0f1620 !important;
  cursor: pointer;
  transition: background-color 0.12s;
}
.cms-insert-list button:hover { background: rgba(42,58,92,0.06); color: #0f1620 !important; }
.cms-insert-name {
  display: block;
  font-family: 'Instrument Serif', 'Newsreader', Georgia, serif;
  font-size: 18px;
  margin-bottom: 2px;
}
.cms-insert-desc {
  display: block;
  font-size: 13px;
  color: #6a7585;
  line-height: 1.4;
}

/* ---- Block-type pill (H2 / H3 / P) ------------------------------------ */
.cms-block-type-pill {
  position: absolute;
  z-index: 12010;
  display: none;
  gap: 0;
  background: #0f1620;
  border-radius: 4px;
  padding: 3px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.24);
}
.cms-block-type-pill[data-visible="1"] { display: flex; }
.cms-block-type-pill button {
  appearance: none; background: transparent; border: none;
  color: #fdfcfa !important;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 2px; cursor: pointer;
}
.cms-block-type-pill button:hover { background: rgba(253,252,250,0.12); color: #fdfcfa !important; }
.cms-block-type-pill button.is-active { background: rgba(255,235,158,0.18); color: #f0c453 !important; }

/* ---- Add / remove child affordances ----------------------------------- */
.cms-add-child {
  appearance: none;
  background: transparent;
  border: 1px dashed rgba(42,58,92,0.3);
  color: rgba(42,58,92,0.7) !important;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  cursor: pointer; margin: 12px 0 0;
  opacity: 0.55; transition: opacity 0.15s, background-color 0.15s, color 0.15s, border-color 0.15s;
  display: inline-block;
}
.cms-add-child:hover {
  opacity: 1;
  background: #0f1620; border-color: #0f1620;
  color: #fdfcfa !important;
}
.cs-section--inverse .cms-add-child {
  border-color: rgba(253,252,250,0.4);
  color: rgba(253,252,250,0.8) !important;
}
.cs-section--inverse .cms-add-child:hover {
  background: rgba(253,252,250,0.95);
  color: #0f1620 !important;
  border-color: rgba(253,252,250,0.95);
}

/* The remove × on each child block. Positioned absolutely inside its parent. */
.cs-section-body > p,
.cs-section-body > figure,
.cs-bullet-list > li,
.cs-role-cell,
.cs-outcome,
.cs-meta-strip > .cs-meta-cell { position: relative; }

.cms-remove-child {
  position: absolute;
  top: 0; right: -28px;
  width: 22px; height: 22px;
  appearance: none; border: none;
  background: rgba(15, 22, 32, 0.06);
  color: rgba(15, 22, 32, 0.55) !important;
  font: 700 14px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, background-color 0.12s, color 0.12s;
}
.cs-section-body > p:hover > .cms-remove-child,
.cs-section-body > figure:hover > .cms-remove-child,
.cs-bullet-list > li:hover > .cms-remove-child,
.cs-role-cell:hover > .cms-remove-child,
.cs-outcome:hover > .cms-remove-child,
.cs-meta-strip > .cs-meta-cell:hover > .cms-remove-child { opacity: 1; }

/* Meta-cell remove-× sits inside the cell padding (cells are tightly packed). */
.cs-meta-strip > .cs-meta-cell > .cms-remove-child {
  top: 6px; right: 6px;
}
.cms-remove-child:hover {
  background: rgba(244, 138, 138, 0.92);
  color: #fff !important;
}
.cs-section--inverse .cms-remove-child {
  background: rgba(253,252,250,0.12);
  color: rgba(253,252,250,0.7) !important;
}

/* ---- Link form inside the format toolbar ------------------------------ */
.cms-link-form {
  display: flex; align-items: center; gap: 4px;
  margin-left: 4px; padding: 0 4px;
  border-left: 1px solid rgba(253,252,250,0.16);
}
.cms-link-form input {
  appearance: none;
  background: rgba(253,252,250,0.08);
  color: #fdfcfa;
  border: 1px solid rgba(253,252,250,0.18);
  border-radius: 2px;
  padding: 5px 8px;
  font: 12px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  width: 200px;
}
.cms-link-form input::placeholder { color: rgba(253,252,250,0.4); }
.cms-link-form button {
  appearance: none; background: transparent;
  border: 1px solid rgba(253,252,250,0.18);
  color: #fdfcfa !important;
  font: 11px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 2px; cursor: pointer;
  width: auto; min-width: 0;
}
.cms-link-form button[data-primary] { background: #fdfcfa; color: #0f1620 !important; border-color: #fdfcfa; }
.cms-link-form button:hover { background: rgba(253,252,250,0.12); color: #fdfcfa !important; }
.cms-link-form button[data-primary]:hover { background: #fff; color: #0f1620 !important; }

/* ---- Image modal: tabs + library grid --------------------------------- */
.cms-image-modal-tabs {
  display: flex; gap: 4px;
  padding: 8px 22px 0;
  border-bottom: 1px solid rgba(20,20,20,0.08);
  margin-bottom: 0;
}
.cms-image-modal-tabs button {
  appearance: none; background: transparent; border: none;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 14px; cursor: pointer;
  color: #6a7585 !important;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.cms-image-modal-tabs button:hover { color: #0f1620 !important; }
.cms-image-modal-tabs button.is-active {
  color: #0f1620 !important;
  border-bottom-color: #0f1620;
}
.cms-image-modal-pane { display: block; }
.cms-image-modal-pane[hidden] { display: none; }

.cms-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 12px;
  max-height: 320px;
  overflow: auto;
  padding: 4px;
  border: 1px solid rgba(20,20,20,0.08);
  border-radius: 4px;
}
.cms-library-tile {
  appearance: none; background: #fff;
  border: 1px solid rgba(20,20,20,0.1);
  border-radius: 3px;
  padding: 4px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  font: 10px/1.3 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  color: #6a7585 !important;
  text-align: left;
  overflow: hidden;
}
.cms-library-tile img {
  width: 100%; height: 80px; object-fit: cover; display: block;
  background: #f4f1ec; border-radius: 2px;
}
.cms-library-tile span {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cms-library-tile:hover { border-color: rgba(42,58,92,0.4); color: #0f1620 !important; }
.cms-library-tile.is-selected { border-color: #2a3a5c; box-shadow: 0 0 0 2px rgba(42,58,92,0.18); }

/* ---- Preview mode ------------------------------------------------------ */
body.cs-edit-mode.cs-preview-mode { padding-top: 0 !important; }
body.cs-edit-mode.cs-preview-mode #global-nav,
body.cs-edit-mode.cs-preview-mode .nav-container { display: revert !important; }
body.cs-edit-mode.cs-preview-mode .cs-page { padding-top: 128px !important; }
body.cs-preview-mode .cms-toolbar,
body.cs-preview-mode .cms-formatbar,
body.cs-preview-mode .cms-block-type-pill,
body.cs-preview-mode .cms-section-toolbar,
body.cs-preview-mode .cms-insert-slot,
body.cs-preview-mode .cms-add-child,
body.cs-preview-mode .cms-remove-child {
  display: none !important;
}
body.cs-preview-mode .cms-editable,
body.cs-preview-mode .cms-image-swappable {
  outline: none !important;
  background-color: transparent !important;
  cursor: auto !important;
  box-shadow: none !important;
}
body.cs-preview-mode .cms-editable:hover,
body.cs-preview-mode .cms-editable:focus,
body.cs-preview-mode .cms-image-swappable:hover {
  outline: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
body.cs-preview-mode::after {
  content: 'Preview mode \2014 press Esc to resume editing';
  position: fixed;
  bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 12500;
  background: rgba(15, 22, 32, 0.92);
  color: #fdfcfa;
  padding: 8px 16px;
  border-radius: 999px;
  font: 500 11px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0,0,0,0.32);
  pointer-events: none;
}

/* ---- Confirm modal (replaces window.confirm) -------------------------- */
.cms-confirm-modal {
  position: fixed; inset: 0;
  z-index: 12300;
  background: rgba(15, 22, 32, 0.62);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.cms-confirm-modal.is-open { opacity: 1; pointer-events: auto; }
.cms-confirm-modal-card {
  background: #fdfcfa;
  color: #0f1620;
  width: 100%;
  max-width: 460px;
  border-radius: 6px;
  padding: 26px 28px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
.cms-confirm-modal-card h2 {
  margin: 0 0 10px;
  font-family: 'Instrument Serif', 'Newsreader', Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
}
.cms-confirm-modal-card p {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.55;
  color: #2b2f37;
}
.cms-confirm-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
}
.cms-confirm-modal-actions button {
  appearance: none;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid rgba(20,20,20,0.18);
  background: #fff;
  color: #0f1620 !important;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
.cms-confirm-modal-actions button:hover { background: rgba(20,20,20,0.05); }
.cms-confirm-modal-actions button[data-primary] {
  background: #0f1620; color: #fdfcfa !important; border-color: #0f1620;
}
.cms-confirm-modal-actions button[data-primary]:hover { background: #1c2940; color: #fdfcfa !important; }
.cms-confirm-modal-actions button[data-danger] {
  background: transparent; color: #b3261e !important; border-color: rgba(179,38,30,0.4);
}
.cms-confirm-modal-actions button[data-danger]:hover {
  background: rgba(179,38,30,0.08);
  border-color: rgba(179,38,30,0.7);
  color: #7a1813 !important;
}

/* =============================================================================
   Home page (index.html) — edit mode adjustments
   -----------------------------------------------------------------------------
   The home page sits inside <a class="case-study-card"> wrappers whose default
   cursor and hover treatment fight the editor. We disable navigation in JS;
   here we make the affordances match.
   ============================================================================= */

/* The case-study-card title is auto-synced from the case study's <h1>, and
   the card thumbnail is auto-synced from the case study's <figure class="cs-hero">.
   Both are intentionally NOT editable from the home page. The dotted outline,
   lock cursor, and hover label signal that, and the `title` attribute (set in
   JS) explains exactly where to make the change. */
body.cs-edit-mode main .cms-auto-synced {
  cursor: not-allowed;
  position: relative;
}
body.cs-edit-mode main .cms-auto-synced::after {
  content: '\1F517 auto-synced from case study H1';
  position: absolute;
  top: -10px;
  left: 0;
  transform: translateY(-100%);
  background: #0f1620;
  color: #fdfcfa;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 10;
}
body.cs-edit-mode main .cms-auto-synced:hover {
  background-color: rgba(255, 235, 158, 0.12);
  outline: 1px dashed rgba(42,58,92,0.35);
  outline-offset: 4px;
  border-radius: 2px;
}
body.cs-edit-mode main .cms-auto-synced:hover::after {
  opacity: 1;
}
/* Image variant: different label, and the hover outline replaces the
   text-style background tint (which wouldn't show through an opaque image). */
body.cs-edit-mode main img.cms-auto-synced::after {
  content: '\1F517 auto-synced from case study hero image';
}
body.cs-edit-mode main img.cms-auto-synced:hover {
  background-color: transparent;
  outline: 2px dashed rgba(42,58,92,0.45);
  outline-offset: 4px;
}

/* Suppress the "click to navigate" cursor on case study card links in edit
   mode — the JS preventDefaults the click, so the cursor needs to match. */
body.cs-edit-mode main a.case-study-card {
  cursor: default;
}
/* But editable text inside the card should still get the text caret. */
body.cs-edit-mode main a.case-study-card .cms-editable {
  cursor: text;
}
/* And the swappable thumbnail keeps the pointer cursor it gets from
   .cms-image-swappable. */

/* The card itself has hover lift / shadow on the live page; in edit mode the
   transform makes the absolutely-positioned remove buttons jump. Disable. */
body.cs-edit-mode main a.case-study-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* The home page hero H1 has very large negative letter-spacing; make sure
   the editable outline doesn't get clipped by the heading's own padding. */
body.cs-edit-mode #headingcontainer h1.cms-editable,
body.cs-edit-mode #headingcontainer h2.cms-editable {
  outline-offset: 8px;
}

/* The "Skip to main content" link is fixed-position when focused; hide in
   edit mode so it can't accidentally cover the editor toolbar. */
body.cs-edit-mode .skip-link { display: none; }

/* =============================================================================
   Version history modal (editor toolbar → "Version history")
   ============================================================================= */
.cms-vh-modal {
  position: fixed; inset: 0; z-index: 12300;
  background: rgba(15, 22, 32, 0.62);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
}
.cms-vh-modal.is-open { opacity: 1; pointer-events: auto; }
.cms-vh-modal-card {
  background: #fdfcfa;
  color: #0f1620;
  border-radius: 6px;
  box-shadow: 0 24px 56px rgba(0,0,0,0.36);
  width: 100%;
  max-width: 540px;
  max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}
.cms-vh-modal-card header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(20,20,20,0.08);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.cms-vh-modal-card header h2 {
  margin: 0; font-family: 'Newsreader', serif; font-weight: 400;
  font-size: 22px; letter-spacing: -0.01em; color: #0f1620;
}
.cms-vh-file {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 13px; color: #6a7585;
  letter-spacing: 0;
}
.cms-vh-close {
  appearance: none; background: transparent; border: 0; color: #6a7585;
  font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.cms-vh-close:hover { color: #0f1620; }
.cms-vh-live {
  margin: 0;
  padding: 12px 22px 8px;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #6a7585;
}
.cms-vh-list {
  list-style: none; margin: 0; padding: 8px 12px 12px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.cms-vh-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 10px;
  border-radius: 4px;
}
.cms-vh-list li + li { border-top: 1px solid rgba(20,20,20,0.06); }
.cms-vh-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cms-vh-label {
  font-size: 14px; line-height: 1.35; color: #0f1620;
}
.cms-vh-meta {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #6a7585;
}
.cms-vh-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cms-vh-preview {
  appearance: none;
  background: transparent;
  color: #6a7585 !important;
  border: 1px solid rgba(20,20,20,0.18);
  border-radius: 3px;
  padding: 6px 12px;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.cms-vh-preview:hover {
  color: #0f1620 !important;
  border-color: rgba(20,20,20,0.4);
  text-decoration: none;
}
.cms-vh-restore {
  appearance: none;
  background: transparent;
  color: #2a3a5c !important;
  border: 1px solid rgba(42,58,92,0.3);
  border-radius: 3px;
  padding: 6px 12px;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
.cms-vh-restore:hover {
  background: rgba(42,58,92,0.06);
  border-color: rgba(42,58,92,0.55);
}
.cms-vh-restore[disabled] { opacity: 0.4; cursor: not-allowed; }
.cms-vh-empty {
  margin: 0;
  padding: 20px 22px 24px;
  color: #6a7585; font-size: 13px; line-height: 1.55;
}
.cms-vh-modal-card footer {
  padding: 12px 22px 18px;
  display: flex; justify-content: flex-end; gap: 8px;
  border-top: 1px solid rgba(20,20,20,0.08);
}
.cms-vh-cancel {
  appearance: none; background: transparent; color: #6a7585 !important;
  border: 1px solid rgba(20,20,20,0.12);
  border-radius: 3px; padding: 8px 14px;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
}
.cms-vh-cancel:hover {
  color: #0f1620 !important; border-color: rgba(20,20,20,0.32);
  background: rgba(20,20,20,0.04);
}

/* ---- Mobile fallback: editor is desktop-only for now. ---- */
@media (max-width: 720px) {
  body.cs-edit-mode::before {
    content: 'CMS editor is desktop-only for now. Reopen on a wider screen to edit.';
    display: block;
    background: #f0c453;
    color: #0f1620;
    padding: 12px 16px;
    font: 500 13px/1.5 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    text-align: center;
  }
  .cms-toolbar { display: none; }
  .cms-editable { outline: none; cursor: auto; pointer-events: none; }
  .cms-formatbar { display: none; }
  .cms-section-badge,
  .cms-section-toolbar,
  .cms-block-type-pill,
  .cms-insert-slot,
  .cms-add-child,
  .cms-remove-child { display: none; }
  .cms-image-modal-body { grid-template-columns: 1fr; }
}