/* ============================================================================
   inline-edit.css — styles for the constrained inline-edit module.
   Pairs with inline-edit.js. Uses base.css design tokens (--sm-*, --space-*);
   brand blue (--sm-blue) marks active states. No hardcoded hex where a token
   exists. Affordances appear ONLY in edit mode (body.editing).
   ========================================================================== */

/* ── Toolbar (injected into .tabs, right side) ─────────────────────────────
   margin-left:auto pushes the group to the right so it coexists with the tabs
   already in the bar (append, not replace). */
.ie-tools {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
  align-items: center;
}
.ie-btn {
  appearance: none;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--sm-border);
  border-radius: 8px;
  background: #fff;
  color: var(--sm-text);
  cursor: pointer;
}
.ie-btn:hover { border-color: var(--sm-grey-4); }

/* Rich-text format toolbar (bold / italic / bullets) — popover above the focused field */
.ie-fmt {
  position: absolute; z-index: 130; display: none; gap: 2px; padding: 4px;
  border-radius: 8px; background: #0d1622; box-shadow: 0 6px 20px rgba(0, 49, 102, 0.25);
}
.ie-fmt.show { display: inline-flex; }
.ie-fmt button {
  border: 0; background: none; color: #fff; cursor: pointer;
  font: 600 13px/1 'Roboto', sans-serif; padding: 6px 9px; border-radius: 6px; min-width: 30px;
}
.ie-fmt button:hover { background: rgba(255, 255, 255, 0.16); }
body.present .ie-fmt { display: none !important; }
.ie-pdf { font-weight: 600; }
/* Present toggle is clustered into the right-side group — drop its auto-margin */
.ie-tools .present-toggle { margin-left: 0; align-self: center; }

/* Export to PDF = browser print: strip all chrome, print the active deck */
@media print {
  .site-header, .tabbar, .ie-tools, .deck-rail, .deck-nav, .deck-pageno,
  .site-footer, .add-comp-gap, .ie-hide-toggle { display: none !important; }
  .tab-panel[hidden] { display: none !important; }
  body { background: #fff; }
}
/* Active "editing" state — brand blue. */
.ie-edit-toggle.is-active {
  background: var(--sm-blue);
  border-color: var(--sm-blue);
  color: #fff;
}

/* ── Editable text affordance (edit mode only) ─────────────────────────────
   Subtle outline on hover/focus so reps see what's editable without clutter. */
.ie-editable { border-radius: 6px; transition: box-shadow .12s ease, background .12s ease; }
body.editing .ie-editable {
  cursor: text;
  outline: none;
}
body.editing .ie-editable:hover {
  box-shadow: 0 0 0 1px var(--sm-blue-light) inset;
}
body.editing .ie-editable:focus {
  box-shadow: 0 0 0 2px var(--sm-blue) inset;
  background: var(--sm-blue-light);
}

/* ── Editable customer logo (edit mode only) ───────────────────────────────
   A clickable ring + a "Replace" hint badge so the swap target is obvious. */
body.editing .ie-logo {
  cursor: pointer;
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--sm-blue);
  position: relative;
}
body.editing .ie-logo:hover {
  box-shadow: 0 0 0 3px var(--sm-blue);
}

/* ── Hide / Show section toggle ────────────────────────────────────────────
   Hidden by default; only visible in edit mode (#demo sections are
   position:relative in the host page, so absolute positioning anchors here). */
.ie-hide-toggle {
  display: none;
  position: absolute;
  top: var(--space-2);
  left: var(--space-3);
  z-index: 5;
  appearance: none;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  padding: 6px 10px;
  border: 1px solid var(--sm-border);
  border-radius: 8px;
  background: #fff;
  color: var(--sm-text-body);
  cursor: pointer;
}
.ie-hide-toggle:hover { border-color: var(--sm-grey-4); color: var(--sm-text); }
/* When the section IS hidden, the toggle reads "Show" and gets the active tint. */
.ie-hide-toggle.is-hidden {
  background: var(--sm-blue);
  border-color: var(--sm-blue);
  color: #fff;
}
body.editing .ie-hide-toggle { display: inline-flex; }

/* ── Hidden-section behaviour ───────────────────────────────────────────────
   In edit mode a hidden section stays visible but dimmed (so it can be shown
   again). When NOT editing it is fully removed from the page. */
body.editing #demo > section[data-hidden="true"] {
  opacity: 0.4;
  filter: grayscale(0.5);
}
#demo > section[data-hidden="true"] { display: none; }
/* ...but keep it rendered (so the toggle is reachable) while editing. */
body.editing #demo > section[data-hidden="true"] { display: block; }

/* ── Edit pencil — faint, top-right corner; toggles edit mode at any time.
   In presentation mode it shifts to sit just left of the ✕ (.deck-exit). ── */
.ie-pencil {
  position: fixed; top: 14px; right: 16px; z-index: 57;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--sm-border); background: #fff; color: var(--sm-blue);
  font-size: 16px; line-height: 1; cursor: pointer; opacity: 0.4;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--soft-shadow); transition: opacity 0.15s ease;
}
.ie-pencil:hover, .ie-pencil:focus { opacity: 1; }
.ie-pencil.is-active { opacity: 1; background: var(--sm-blue); color: #fff; border-color: var(--sm-blue); }
/* During a presentation, sit beside the ✕ (which is at right:16px). */
body.present .ie-pencil { right: 54px; }
@media print { .ie-pencil { display: none !important; } }