/* WBW auth — footer sign-in pill + Google iframe wrapper.
   Extracted from old theme; --leaf aliased so it works against
   wbw.css which uses --green. Patch this when the new visual
   design for the editor pill is decided. */

:root {
  --leaf: var(--green, #3a8a50);
}

/* Auth pill (footer) — let the Google iframe popup escape */
.site-footer { overflow:visible; }
.site-footer .footer-bar { overflow:visible; }

#auth-pill {
  display:flex; align-items:center; gap:10px;
  margin-left:auto; margin-right:18px;
  font-family:'Outfit',sans-serif;
  font-size:11px;
}
#auth-pill .auth-name {
  color:var(--leaf); font-weight:700;
  letter-spacing:0.06em;
}
#auth-pill .auth-history,
#auth-pill .auth-signout {
  font-family:'Outfit',sans-serif;
  font-size:11px; font-weight:700;
  letter-spacing:0.10em; text-transform:uppercase;
  color:var(--leaf);
  background:rgba(58,138,80,0.08);
  border:1px solid rgba(58,138,80,0.18);
  border-radius:14px;
  padding:4px 12px;
  cursor:pointer;
  transition:background 0.2s, border-color 0.2s;
}
#auth-pill .auth-history:hover,
#auth-pill .auth-signout:hover {
  background:rgba(58,138,80,0.16);
  border-color:rgba(58,138,80,0.32);
}

/* Sign-in: real Google iframe button is invisible underneath, our visible
   "Edit" pill overlays it. Clicks pass through to the iframe. The wrapper
   sizes itself to the Google button (~32px tall). */
#auth-pill:has(#g-signin-host) { position:relative; }
#g-signin-host                 { opacity:0; }
#auth-pill .auth-signin {
  position:absolute;
  inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;            /* clicks pass through to iframe below */
  font-family:'Outfit',sans-serif;
  font-size:11px; font-weight:700;
  letter-spacing:0.10em; text-transform:uppercase;
  color:var(--leaf);
  background:rgba(58,138,80,0.08);
  border:1px solid rgba(58,138,80,0.18);
  border-radius:14px;
  user-select:none;
}
#auth-pill .auth-signin.disabled { opacity:0.5; }

/* ── Inline edit (only active when body.is-editor) ── */
body.is-editor [data-field]:not([contenteditable="true"]) {
  outline:1px dashed transparent;
  outline-offset:3px;
  border-radius:3px;
  cursor:text;
  transition:outline-color 0.15s, background 0.15s;
}
body.is-editor [data-field]:not([contenteditable="true"]):hover {
  outline-color:rgba(58,138,80,0.45);
  background:rgba(58,138,80,0.05);
}
body.is-editor [data-field][contenteditable="true"],
body.is-editor [data-field][contenteditable="plaintext-only"] {
  outline:2px solid var(--leaf);
  outline-offset:3px;
  background:rgba(58,138,80,0.08);
  border-radius:3px;
}

/* Pause moving elements the moment the editor signs in. The pfw + metrics
   tracks get animation:none so JS can drive them via inline transform; the
   product track keeps animation-play-state:paused (its own up/down chevrons
   navigate it via translateY). */
body.is-editor .pfw-carousel,
body.is-editor .p4-metrics-track {
  animation:none !important;
}
body.is-editor .carousel-track {
  animation-play-state:paused !important;
}

/* Framework carousel chevrons — sit OUTSIDE the wrap, flex-laid-out next
   to the carousel. Visible only in editor mode. */
.pfw-carousel-outer {
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  margin-top:24px;
}
.pfw-carousel-outer .pfw-carousel-wrap {
  flex:1;
  margin-top:0;   /* outer takes the margin */
}
.pfw-chev {
  flex-shrink:0;
  width:32px; height:32px;
  border-radius:50%;
  background:rgba(58,138,80,0.92);
  color:#fff;
  border:1px solid rgba(58,138,80,0.6);
  font-size:13px; line-height:1;
  display:none; align-items:center; justify-content:center;
  cursor:pointer;
  padding:0;
  box-shadow:0 2px 6px rgba(0,0,0,0.4);
  transition:background 0.15s, transform 0.15s;
}
.pfw-chev:hover { background:var(--leaf); transform:scale(1.08); }
body.is-editor .pfw-chev { display:flex; }

/* Hover pencil — small floating ✎ that follows the hovered [data-field].
   Click it to enter edit mode without firing any parent card's onclick.
   z-index 600 keeps it above modals (which are 500) for editing in modals. */
#edit-pencil {
  position:fixed;
  width:24px; height:24px;
  border-radius:50%;
  border:1px solid rgba(58,138,80,0.45);
  background:rgba(58,138,80,0.92);
  color:#fff;
  font-size:13px; line-height:1;
  display:none;
  align-items:center; justify-content:center;
  cursor:pointer;
  z-index:600;
  padding:0;
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
  transition:transform 0.12s, background 0.12s;
  user-select:none;
}
#edit-pencil.visible { display:flex; }
#edit-pencil:hover {
  background:var(--leaf);
  transform:scale(1.08);
}

/* ── Save status indicator (sits in the footer bar next to the auth pill) ── */
#save-status {
  font-family:'Outfit',sans-serif;
  font-size:11px; font-weight:700;
  letter-spacing:0.10em; text-transform:uppercase;
  padding:4px 10px;
  border-radius:14px;
  display:none;
  margin-right:10px;
  border:1px solid transparent;
}
body.is-editor #save-status[data-state]:not([data-state="idle"]) { display:inline-block; }
#save-status[data-state="dirty"]  { color:#b89438; background:rgba(184,148,56,0.10); border-color:rgba(184,148,56,0.25); }
#save-status[data-state="saving"] { color:rgba(255,255,255,0.6); background:rgba(0,0,0,0.10); border-color:rgba(255,255,255,0.10); }
#save-status[data-state="saved"]  { color:var(--leaf); background:rgba(58,138,80,0.10); border-color:rgba(58,138,80,0.25); }
#save-status[data-state="error"]  { color:#c0392b; background:rgba(192,57,43,0.10); border-color:rgba(192,57,43,0.25); }

/* ── System-wide history modal ── */
#history-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(8,16,24,0.72);
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
#history-overlay.open { display:flex; }
#history-box {
  background:#0c1e2e;
  color:rgba(255,255,255,0.92);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  width:min(720px, 100%);
  max-height:80vh;
  display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  font-family:'DM Sans',sans-serif;
}
#history-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:18px 22px 14px; border-bottom:1px solid rgba(255,255,255,0.06);
}
.history-eyebrow {
  font-family:'Outfit',sans-serif;
  font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--leaf); margin-bottom:4px;
}
#history-title {
  font-family:'DM Serif Display',serif; font-size:1.15rem; color:#fff;
}
#history-close {
  background:transparent; border:none; color:rgba(255,255,255,0.55);
  font-size:1.4rem; line-height:1; cursor:pointer; padding:4px 8px;
}
#history-close:hover { color:#fff; }
#history-body {
  padding:0 22px 18px; overflow-y:auto;
}
.history-intro {
  padding:14px 0; font-size:0.85rem; color:rgba(255,255,255,0.55); line-height:1.5;
  border-bottom:1px solid rgba(255,255,255,0.04); margin-bottom:6px;
}
.history-loading, .history-empty, .history-error {
  padding:24px 0; text-align:center; color:rgba(255,255,255,0.55);
}
.history-error { color:#c0392b; }
.history-list { list-style:none; padding:0; margin:0; }
.history-item {
  display:grid; grid-template-columns:1fr auto; gap:8px 14px;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.05);
  align-items:start;
}
.history-meta { display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:11px; }
.history-when { color:rgba(255,255,255,0.7); font-weight:600; }
.history-who  { color:rgba(255,255,255,0.45); }
.history-key  { color:var(--leaf); font-family:'Space Mono',monospace; font-size:10px; }
.history-snippet {
  grid-column:1 / -1;
  font-size:0.82rem; color:rgba(255,255,255,0.65); line-height:1.4;
  word-break:break-word;
}
.history-restore {
  font-family:'Outfit',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:0.10em; text-transform:uppercase;
  color:var(--leaf); background:rgba(58,138,80,0.10);
  border:1px solid rgba(58,138,80,0.25);
  border-radius:14px; padding:5px 12px; cursor:pointer;
  align-self:start;
  transition:background 0.2s, border-color 0.2s;
}
.history-restore:hover { background:rgba(58,138,80,0.20); border-color:rgba(58,138,80,0.40); }

/* ── Right-click element history popover ── */
#field-history-menu {
  position:fixed; z-index:310;
  background:#0c1e2e; color:rgba(255,255,255,0.92);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:10px;
  width:340px; max-height:60vh;
  display:flex; flex-direction:column;
  box-shadow:0 12px 36px rgba(0,0,0,0.5);
  font-family:'DM Sans',sans-serif;
  font-size:0.82rem;
}
.fhm-header {
  padding:10px 14px 8px; border-bottom:1px solid rgba(255,255,255,0.06);
}
.fhm-eyebrow {
  font-family:'Outfit',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--leaf);
  margin-bottom:2px;
}
.fhm-key { font-family:'Space Mono',monospace; font-size:11px; color:rgba(255,255,255,0.7); word-break:break-all; }
.fhm-body { overflow-y:auto; padding:0 14px 10px; }
.fhm-loading, .fhm-empty, .fhm-error {
  padding:14px 0; text-align:center; color:rgba(255,255,255,0.55); font-size:0.78rem;
}
.fhm-error { color:#c0392b; }
.fhm-list { list-style:none; padding:0; margin:0; }
.fhm-item {
  display:grid; grid-template-columns:1fr auto; gap:6px 10px;
  padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.05);
  align-items:start;
}
.fhm-meta { display:flex; gap:8px; flex-wrap:wrap; font-size:10px; }
.fhm-when { color:rgba(255,255,255,0.75); font-weight:600; }
.fhm-who  { color:rgba(255,255,255,0.45); }
.fhm-snippet {
  grid-column:1 / -1;
  font-size:0.76rem; color:rgba(255,255,255,0.7); line-height:1.4;
  word-break:break-word;
}
.fhm-restore {
  font-family:'Outfit',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.10em; text-transform:uppercase;
  color:var(--leaf); background:rgba(58,138,80,0.10);
  border:1px solid rgba(58,138,80,0.25);
  border-radius:12px; padding:4px 10px; cursor:pointer;
  align-self:start;
  transition:background 0.2s, border-color 0.2s;
}
.fhm-restore:hover { background:rgba(58,138,80,0.20); border-color:rgba(58,138,80,0.40); }