/* ── LIVE CONTENT EDITOR — case study pages ──────────────────
   Opt-in via ?edit=1 in the URL (see js/case-study-editor.js).
   With that param, a toolbar appears letting every copy block and
   image placeholder be edited in place, then saved straight back
   to disk via the File System Access API. */

.cs-editor-toolbar {
  display: none;
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(12, 12, 12, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow: var(--shadow-md);
}

.cs-editor-toolbar.is-available { display: flex; }

/* about.html has an in-flow section tab bar that can sit at the bottom
   of the viewport during scroll; the fixed toolbar would otherwise land
   right on top of it and hide the "My Passions" tab. Case study pages
   have nothing at the bottom edge, so they keep the default offset —
   this is scoped to the about page only via its body class. */
body.about-page .cs-editor-toolbar {
  bottom: calc(var(--space-6) + var(--space-16));
}

.cs-editor-status {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-snug);
  padding-inline: var(--space-2);
  white-space: nowrap;
}

.cs-editor-status.is-error { color: #FF6B6B; }

.cs-editor-toolbar button {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.cs-editor-toolbar button:hover { background: rgba(255, 255, 255, 0.12); }

.cs-editor-toolbar button.is-primary,
.cs-editor-toolbar button.is-active {
  background: var(--color-accent);
  color: #0A0A0A;
  border-color: var(--color-accent);
}

.cs-editor-toolbar button.is-primary:hover { opacity: 0.85; }

.cs-editor-toolbar button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Editable text blocks ─────────────────────────────────── */
body.cs-edit-mode [data-editable="text"],
body.cs-edit-mode [data-editable="stat-number"],
body.cs-edit-mode [data-editable="caption"] {
  position: relative;
  cursor: text;
  border-radius: 4px;
  outline: 1px dashed rgba(77, 255, 192, 0.3);
  outline-offset: 4px;
  transition: outline var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

body.cs-edit-mode [data-editable="text"]:hover,
body.cs-edit-mode [data-editable="stat-number"]:hover,
body.cs-edit-mode [data-editable="caption"]:hover {
  outline: 1px dashed rgba(77, 255, 192, 0.6);
  background: rgba(77, 255, 192, 0.05);
}

body.cs-edit-mode [data-editable="text"]:focus,
body.cs-edit-mode [data-editable="stat-number"]:focus,
body.cs-edit-mode [data-editable="caption"]:focus {
  outline: 2px solid var(--color-accent);
  background: rgba(77, 255, 192, 0.08);
}

body.cs-edit-mode [data-editable="text"]:hover::after,
body.cs-edit-mode [data-editable="stat-number"]:hover::after,
body.cs-edit-mode [data-editable="caption"]:hover::after {
  content: "✎";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #0A0A0A;
  background: var(--color-accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
}

/* ── Editable media blocks (image or video) ──────────────────── */
body.cs-edit-mode [data-editable="media"] {
  position: relative;
  cursor: pointer;
}

body.cs-edit-mode [data-editable="media"]:hover {
  outline: 2px dashed var(--color-accent);
  outline-offset: -2px;
}

/* Carousel slides are the img/video itself (no wrapper). Generated
   content doesn't render on replaced elements, so the "Replace Media"
   label below is skipped here — the dashed hover outline is enough. */
body.cs-edit-mode [data-editable="media"]:is(img, video)::after {
  content: none;
}

body.cs-edit-mode [data-editable="media"]::after {
  content: "⤒ Replace Media";
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(10, 10, 10, 0.75);
  color: var(--color-text-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid rgba(77, 255, 192, 0.4);
  border-radius: var(--radius-full);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out);
  z-index: 5;
}

body.cs-edit-mode [data-editable="media"]:hover::after {
  opacity: 1;
}

/* ── Carousel slide delete control (about.html "My Story" chapters) ──
   Soft-delete only: the node stays in the DOM (flagged, hidden) so the
   Save path's [data-editable] index-pairing against the source file
   still holds — see js/case-study-editor.js. Top-left placement keeps
   clear of the top-right "Replace Media" affordance and the vertically
   centered prev/next arrows. Created dynamically in JS, so it only
   ever exists on carousels — never added to the HTML source itself. */
.cs-slide-delete {
  display: none; /* only ever shown while actively editing */
}
body.cs-edit-mode .cs-slide-delete {
  display: flex;
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 107, 107, 0.4);
  background: rgba(10, 10, 10, 0.75);
  color: #FF6B6B;
  font-size: var(--text-xs);
  line-height: 1;
  cursor: pointer;
  z-index: 6;
  transition: background var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
body.cs-edit-mode .cs-slide-delete:hover {
  background: rgba(255, 107, 107, 0.2);
}
/* Disabled once only one non-deleted slide remains — a carousel must
   always keep at least one image. */
body.cs-edit-mode .cs-slide-delete:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Soft-deleted slide/pagination-dot pair: stays in the DOM for index
   pairing on Save, but fully hidden from view and interaction. */
.cs-slide-hidden {
  display: none;
}