/* ==========================================================================
   INTERACTIVES.CSS — styles for the embeddable case-study interactives
   (publishing-graph .dsg-, funnel-explorer .fnx-, kahoona-trend .ktr-).
   Extracted from main.css so BOTH sites can load them: the desktop links
   it after main.css; the serious site links desktop/css/interactives.css.
   ========================================================================== */

/* ---------- INTERACTIVE: publishing-graph (Design Ops) ---------- */

.dsg {
  margin: 20px 0;
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-card);
  background: var(--win-surface);
  overflow: hidden;
}

.dsg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  background: var(--win-surface-2);
  border-bottom: 1px solid var(--primary-100);
}

.dsg-toggle {
  display: inline-flex;
  border: 1px solid var(--primary-200);
  border-radius: 9px;
  overflow: hidden;
}

.dsg-toggle button {
  border: 0;
  background: none;
  padding: 7px 12px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
}

.dsg-toggle button.on {
  background: var(--primary-600);
  color: #fff;
}

.dsg-counters {
  display: flex;
  gap: 14px;
}

.dsg-count {
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

.dsg-count b {
  font-size: var(--fs-lg);
  font-family: var(--font-display);
  color: var(--primary-600);
  margin-right: 4px;
}

.dsg-stage {
  padding: 6px;
}

.dsg-svg {
  width: 100%;
  height: auto;
  display: block;
}

.dsg-edge {
  fill: none;
  stroke: color-mix(in oklab, var(--espresso) 16%, transparent);
  stroke-width: 1.2;
  transition: stroke 200ms, stroke-width 200ms;
}

.dsg-edge.lit {
  stroke: var(--warning);
  stroke-width: 2;
}

.dsg-pulse {
  fill: var(--warning);
}

.dsg-node rect {
  fill: var(--win-surface);
  stroke: var(--primary-200);
  stroke-width: 1.2;
  transition: fill 250ms, stroke 250ms;
}

.dsg-node.lib {
  cursor: pointer;
}

.dsg-node.lib:hover rect {
  stroke: var(--primary-600);
}

.dsg-node.wf rect {
  fill: var(--win-surface-2);
  stroke: color-mix(in oklab, var(--espresso) 24%, transparent);
  stroke-dasharray: 4 3;
}

.dsg-node text {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  fill: var(--text-soft);
  text-anchor: middle;
  pointer-events: none;
}

.dsg-node.lit rect {
  fill: color-mix(in oklab, var(--warning) 22%, white);
  stroke: var(--warning);
}

.dsg-node.hot rect {
  fill: color-mix(in oklab, var(--warning) 45%, white);
}

.dsg-node.lit text {
  fill: var(--ink);
}

.dsg-hint {
  margin: 0;
  padding: 10px 14px 0;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.dsg-caption {
  margin: 0;
  padding: 2px 14px 12px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-style: italic;
}

/* ---------- INTERACTIVE: funnel-explorer (The What-If) ---------- */

.fnx {
  margin: 20px 0;
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-card);
  background: var(--win-surface);
  overflow: hidden;
}

.fnx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  background: var(--win-surface-2);
  border-bottom: 1px solid var(--primary-100);
}

.fnx-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary-800);
}

/* counters live in the canvas, next to what they count (proximity) */
.fnx-scores {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 16px;
}

.fnx-score {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-soft);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--win-surface);
  border: 1px solid var(--primary-100);
  border-radius: 11px;
  box-shadow: 0 2px 6px rgba(46, 36, 28, .08);
}

.fnx-score b {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1;
}

.fnx-score.fam b { color: var(--danger); }

.fnx-score.ind b { color: var(--accent-strong); }

.fnx-run {
  border: 1px solid var(--primary-200);
  background: var(--win-surface);
  border-radius: 8px;
  padding: 6px 12px;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
}

.fnx-run:hover { border-color: var(--primary-400); color: var(--primary-600); }

.fnx-stage {
  position: relative;
  height: 380px;
  margin: 12px 12px 0;
}

.fnx-stepline {
  position: absolute;
  top: 70px;
  bottom: 92px;
  width: 1px;
  background: var(--primary-100);
}

.fnx-stepline span {
  position: absolute;
  bottom: -22px;
  left: 50%;
  translate: -50% 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  white-space: nowrap;
}

.fnx-lane {
  position: absolute;
  left: 2%;
  right: 2%;
  height: 52px;
  border-radius: 10px;
  background: var(--primary-050);
  border: 1px dashed var(--primary-100);
}

.fnx-lane.fam { top: 100px; }

.fnx-lane.ind { top: 216px; }

.fnx-lane-label {
  position: absolute;
  top: -26px;
  left: 4px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-soft);
}

.fnx-wall {
  position: absolute;
  top: 94px;
  height: 64px;
  width: 5px;
  border-radius: 3px;
  background: var(--danger);
  opacity: .25;
  transition: opacity 250ms;
}

.fnx-wall-tip {
  position: absolute;
  top: -24px;
  right: -8px;
  white-space: nowrap;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--danger);
  opacity: 0;
  transition: opacity 250ms;
}

.walled .fnx-wall { opacity: 1; animation: fnx-shake .4s; }

.walled .fnx-wall-tip { opacity: 1; }

@keyframes fnx-shake {
  0%, 100% { translate: 0 0; }
  25% { translate: -2px 0; }
  75% { translate: 2px 0; }
}

.fnx-dot {
  position: absolute;
  font-size: 24px;
  line-height: 1;
  top: 114px;
  margin-top: var(--jitter, 0px);
  transition: left 2000ms cubic-bezier(.4,.1,.6,.9), top 600ms var(--ease-out),
              filter 300ms, opacity 300ms;
  filter: drop-shadow(0 2px 3px rgba(46, 36, 28, .25));
  z-index: 3;
  user-select: none;
}

.fnx-dot.blocked {
  filter: drop-shadow(0 0 6px var(--danger));
  animation: fnx-bounce .5s;
}

@keyframes fnx-bounce {
  0% { translate: 0 0; }
  40% { translate: -12px -8px; }
  100% { translate: 0 0; }
}

.fnx-dot.as-ind {
  top: 230px;
  margin-top: 0;
  transition: left 1700ms cubic-bezier(.4,.1,.6,.9), top 600ms var(--ease-out),
              filter 300ms;
}

.fnx-dot.converted {
  filter: drop-shadow(0 0 7px var(--accent));
}

.fnx-verdict {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  text-align: center;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--primary-800);
  opacity: 0;
  translate: 0 6px;
  transition: opacity 400ms, translate 400ms var(--ease-out);
}

.done .fnx-verdict { opacity: 1; translate: 0 0; }

.fnx-caption {
  margin: 0;
  padding: 12px 14px 12px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-style: italic;
}

/* ---------- INTERACTIVE: kahoona-trend ---------- */

.ktr {
  position: relative;
  margin: 20px 0;
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-card);
  background: var(--win-surface);
  overflow: hidden;
}

.ktr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  background: var(--win-surface-2);
  border-bottom: 1px solid var(--primary-100);
}

.ktr-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--primary-800);
}

.ktr-legend { display: flex; gap: 12px; }

.ktr-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-soft);
}

.ktr-key .swab { width: 14px; height: 10px; border-radius: 3px; }

.ktr-key.kahoona .swab { background: var(--primary-600); }

.ktr-key.agency .swab { background: var(--warning); }

.ktr-key.broker .swab { background: var(--olive); }

.ktr-stage { position: relative; padding: 8px 6px 0; }

.ktr-svg { width: 100%; height: auto; display: block; }

.ktr-xlabel {
  font-family: var(--font-body);
  font-size: 10.5px;
  fill: var(--text-faint);
  text-anchor: middle;
}

.ktr-bar {
  transform: scaleY(0);
  transition: transform 700ms var(--ease-out);
  cursor: help;
}

.ktr-bar.grown { transform: scaleY(1); }

.ktr-seg.kahoona { fill: var(--primary-600); }

.ktr-seg.agency { fill: var(--warning); }

.ktr-seg.broker { fill: var(--olive); }

.ktr-bar:hover .ktr-seg.kahoona { fill: var(--primary-500); }

.ktr-pct {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  fill: var(--primary-600);
  text-anchor: middle;
}

.ktr-rollout { cursor: help; }

.ktr-rollline {
  stroke: color-mix(in oklab, var(--accent) 55%, transparent);
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
}

.ktr-rolldot {
  fill: var(--accent-soft);
  stroke: var(--accent-strong);
  stroke-width: 2;
}

.ktr-rollout:hover .ktr-rolldot { fill: var(--accent); }

.ktr-tip {
  position: absolute;
  top: 60px;
  padding: 6px 12px;
  background: var(--os-chrome);
  backdrop-filter: blur(12px);
  border: 1px solid var(--os-chrome-edge);
  border-radius: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--os-text);
  box-shadow: var(--shadow-menu);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms;
  z-index: 5;
}

.ktr-tip.show { opacity: 1; }

.ktr-caption {
  margin: 0;
  padding: 10px 14px 12px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-style: italic;
}