/* ============================================================================
   WebMCP "AI Visibility Stack" interactive diagram.

   The visual style is ported from the sales-enablement page's "From ICP to
   Booked Call" flow (design/sales-enablement.html), which is the ERA-palette
   version of this component. The interactive flow/content comes from
   design/WebMCP Explained.html, driven by /sf-webmcp.js.

   Everything is scoped under #sf-wrap / .sf-band so nothing leaks into the rest
   of the post. The site already ships a global *{margin:0;padding:0;box-sizing}
   reset (design-system.css), so this file adds none.
   ============================================================================ */

/* Full-bleed dark band, same technique as .fence-band (fences.css). The blog
   body column is narrow (68ch); the diagram needs room, so it breaks out to the
   viewport edges. body{overflow-x:hidden} absorbs the 100vw (no side-scroll). */
.sf-band {
  /* The diagram lives inside .abody (68ch), which is LEFT-aligned within the
     centered .wrap (max-width 1160px, padding 0 4vw). So a naive `50% - 50vw`
     break-out measures from the off-centre column and lands left. Instead measure
     the real gap from the viewport edge to the column: the wrap's centring margin
     plus its 4vw padding. This stays correct across breakpoints. */
  --sf-gap: calc(4vw + max((100vw - 1160px) / 2, 0px));
  position: relative;
  width: 100vw;
  transition: background .3s ease, color .3s ease;
  margin-top: 3.25rem;
  margin-bottom: 3.25rem;
  margin-left: calc(-1 * var(--sf-gap));
  margin-right: calc(-1 * var(--sf-gap));
  padding: clamp(2.5rem, 5vw, 3.75rem) 0;
  background: var(--ink);
  color: var(--paper);
}

#sf-wrap {
  /* component-private palette, mapped to ERA tokens */
  --red: #c7a41f;              /* accent / key path (gold) */
  --dark: #0d0c08;             /* active node bg (ink) + node name text */
  --mid: rgba(13, 12, 8, 0.62);/* sub / detail text on the paper cards */
  --light: rgba(240, 235, 220, 0.6); /* muted text on the ink band */
  --border: rgba(13, 12, 8, 0.28);   /* node hairline on paper cards */
  --bg: transparent;
  --white: #f0ebdc;            /* node card bg (paper) + active-node text */

  max-width: 1160px;
  margin: 0 auto;
  padding: 0 4vw;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Instrument Sans", sans-serif;
  font-size: 15px;
}

/* HEADER */
.sf-header { text-align: center; margin-bottom: 48px; max-width: 580px; width: 100%; }
.sf-kicker {
  font-size: 1em; letter-spacing: .18em; text-transform: uppercase;
  color: var(--white); font-weight: 600; margin-bottom: 12px;
}
.sf-title {
  font-family: "Newsreader", serif; font-weight: 500;
  font-size: clamp(28px, 5vw, 44px); color: var(--red);
  line-height: 1.1; letter-spacing: 0; margin-bottom: 12px;
}
.sf-subtitle { font-size: 11.5px; color: var(--light); letter-spacing: .03em; line-height: 1.7; }

/* FLOW CONTAINER */
#sf-flow { width: 100%; display: flex; flex-direction: column; align-items: center; max-width: 520px; }

/* NODE — shared */
.sf-node-wrap {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  position: relative; opacity: 0; transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
}
.sf-node-wrap.visible { opacity: 1; transform: none; }
.sf-node {
  width: 100%; background: var(--white); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 14px 16px 14px 20px;
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.sf-node:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.10); }
.sf-node.active { background: var(--dark); border-color: var(--red); box-shadow: 0 0 0 3px rgba(199, 164, 31,.15); }
.sf-node.hl { background: var(--red); border-color: transparent; box-shadow: 0 4px 20px rgba(199, 164, 31,.28); }
.sf-node.hl.active { box-shadow: 0 0 0 3px rgba(199, 164, 31,.3), 0 4px 20px rgba(199, 164, 31,.28); }
.sf-accent-bar {
  position: absolute; left:0; top:0; bottom:0; width:3px; background: var(--red);
  opacity:.28; transition: opacity .18s; border-radius: 3px 0 0 3px;
}
.sf-node.active .sf-accent-bar, .sf-node:hover .sf-accent-bar { opacity: 1; }
.sf-node.hl .sf-accent-bar { background: rgba(255,255,255,.3); opacity: 1; }
.sf-badge-col { min-width: 76px; text-align: right; flex-shrink: 0; }
.sf-layer {
  font-size: 8px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500; color: rgba(13,12,8,.45); margin-bottom: 4px; white-space: nowrap;
}
.sf-node.active .sf-layer, .sf-node.hl .sf-layer { color: rgba(255,255,255,.5); }
.sf-icon { font-size: 18px; color: var(--border); line-height: 1; }
.sf-node.active .sf-icon { color: rgba(255,255,255,.15); }
.sf-node.hl     .sf-icon { color: rgba(255,255,255,.2); }
.sf-sep { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; }
.sf-node.active .sf-sep { background: rgba(255,255,255,.15); }
.sf-node.hl     .sf-sep { background: rgba(255,255,255,.2); }
.sf-content { flex: 1; min-width: 0; }
.sf-name {
  font-size: 1.2em; font-weight: 800; color: var(--dark);
  letter-spacing: -.01em; margin-bottom: 2px; line-height: 1.3;
}
.sf-node.active .sf-name, .sf-node.hl .sf-name { color: var(--white); }
.sf-sub { font-size: 10px; color: var(--mid); letter-spacing: .02em; line-height: 1.4; }
.sf-node.active .sf-sub { color: rgba(255,255,255,.55); }
.sf-node.hl     .sf-sub { color: rgba(255,255,255,.65); }
.sf-plus {
  font-size: 16px; color: rgba(13,12,8,.3); line-height: 1; flex-shrink: 0;
  transition: transform .2s, color .2s; font-weight: 300; width: 18px; text-align: center;
}
.sf-node.active .sf-plus { transform: rotate(45deg); color: var(--red); }
.sf-node.hl     .sf-plus { color: rgba(255,255,255,.4); }
.sf-node.hl.active .sf-plus { color: rgba(255,255,255,.9); }

/* DETAIL PANEL */
.sf-detail {
  width: calc(100% - 28px); background: var(--white);
  border: 1.5px solid var(--red); border-top: none;
  border-radius: 0 0 8px 8px; padding: 12px 16px; margin-top: -2px;
  animation: sfDetailIn .2s ease both; display: none;
}
@keyframes sfDetailIn {
  from { opacity:0; transform: translateY(-4px); }
  to   { opacity:1; transform: none; }
}
.sf-detail-item {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 5px; font-size: 10.5px; color: var(--mid); line-height: 1.6;
}
.sf-detail-item:last-child { margin-bottom: 0; }
.sf-dash { color: var(--red); flex-shrink: 0; font-size: 12px; line-height: 1; }

/* MOBILE CONNECTORS */
.sf-conn { display: flex; flex-direction: column; align-items: center; padding: 5px 0; width: 100%; }
.sf-conn-line { width: 1.5px; height: 10px; background: rgba(240,235,220,.28); }
.sf-conn-line.hot { background: var(--red); }
.sf-conn-label {
  font-size: 8px; color: rgba(240,235,220,.5); letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 10px; background: var(--bg); z-index: 1; white-space: nowrap;
}
.sf-conn-arrow { width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid rgba(240,235,220,.28); }
.sf-conn-arrow.hot { border-top-color: var(--red); }
.sf-branch { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 5px 0; }
.sf-branch-top { width: 1.5px; height: 10px; background: rgba(240,235,220,.28); }
.sf-branch-row { display: flex; width: 78%; justify-content: space-between; align-items: flex-start; position: relative; }
.sf-branch-hline { position: absolute; top:0; left:16%; right:16%; height:1.5px; background: rgba(240,235,220,.28); }
.sf-branch-col { display: flex; flex-direction: column; align-items: center; width: 40%; }
.sf-branch-vl { width: 1.5px; height: 10px; background: rgba(240,235,220,.28); }
.sf-branch-vl.hot { background: var(--red); }
.sf-branch-lbl { font-size: 8px; color: rgba(240,235,220,.5); letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 2px 0; line-height: 1.4; }
.sf-branch-lbl.hot { color: var(--red); font-weight: 500; }
.sf-branch-arr { width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid rgba(240,235,220,.28); }
.sf-branch-arr.hot { border-top-color: var(--red); }

/* DESKTOP LAYOUT */
@media (min-width: 768px) {
  #sf-flow { max-width: 1100px; align-items: flex-start; }
  .sf-conn, .sf-branch { display: none; }
  .sf-desk-container { position: relative; width: 100%; }
  .sf-desk-row, .sf-desk-branch-pair, .sf-desk-outcome { display: flex; flex-direction: row; gap: 10px; position: relative; }
  .sf-desk-row { width: 100%; }
  .sf-desk-row .sf-node-wrap,
  .sf-desk-branch-pair .sf-node-wrap,
  .sf-desk-outcome .sf-node-wrap { flex: 1; width: auto; align-items: stretch; }
  .sf-desk-row .sf-node,
  .sf-desk-branch-pair .sf-node,
  .sf-desk-outcome .sf-node {
    flex-direction: column; align-items: flex-start;
    padding: 14px 12px 14px 16px; gap: 6px; min-height: 110px; height: 100%;
  }
  .sf-desk-row .sf-badge-col,
  .sf-desk-branch-pair .sf-badge-col,
  .sf-desk-outcome .sf-badge-col { min-width: auto; text-align: left; display: flex; align-items: center; gap: 6px; }
  .sf-desk-row .sf-sep,
  .sf-desk-branch-pair .sf-sep,
  .sf-desk-outcome .sf-sep { display: none; }
  .sf-desk-row .sf-content,
  .sf-desk-branch-pair .sf-content,
  .sf-desk-outcome .sf-content { width: 100%; }
  .sf-desk-row .sf-name,
  .sf-desk-branch-pair .sf-name,
  .sf-desk-outcome .sf-name { font-size: 14px; }
  .sf-desk-row .sf-sub,
  .sf-desk-branch-pair .sf-sub,
  .sf-desk-outcome .sf-sub { font-size: 9px; }
  .sf-desk-row .sf-layer,
  .sf-desk-branch-pair .sf-layer,
  .sf-desk-outcome .sf-layer { font-size: 7px; margin-bottom: 0; }
  .sf-desk-row .sf-icon,
  .sf-desk-branch-pair .sf-icon,
  .sf-desk-outcome .sf-icon { font-size: 13px; }
  .sf-desk-row .sf-plus,
  .sf-desk-branch-pair .sf-plus,
  .sf-desk-outcome .sf-plus { display: none; }
  .sf-desk-row .sf-detail,
  .sf-desk-branch-pair .sf-detail,
  .sf-desk-outcome .sf-detail {
    position: absolute; top: calc(100% + 4px); left: 0; width: 220px;
    margin-top: 0; border-top: 1.5px solid var(--red); border-radius: 8px;
    z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,.24);
  }
  .sf-desk-spacer { height: 64px; width: 100%; position: relative; }
  /* connection badges */
  .sf-conn-badge { position: absolute; display: inline-block; transform: translate(-50%, -50%); z-index: 10; pointer-events: none; }
  .sf-conn-badge-inner {
    background: #f0ebdc; border: 1.5px solid rgba(13,12,8,.35); border-radius: 5px;
    padding: 4px 9px; font-size: 9px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(13,12,8,.7); line-height: 1.5;
    text-align: center; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.10);
  }
  .sf-conn-badge-inner.hot { background: #c7a41f; border-color: #c7a41f; color: #0d0c08; }
  #sf-svg { position: absolute; top:0; left:0; width:100%; height:100%; pointer-events: none; overflow: visible; z-index: 0; }
}

/* LEGEND (sits on the ink band, so light-on-dark) */
.sf-legend { margin-top: 52px; width: 100%; max-width: 860px; border-top: 1px solid rgba(240,235,220,.14); padding-top: 32px; }
.sf-legend-title { text-align: center; font-size: 9px; color: rgba(240,235,220,.45); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 24px; }
.sf-legend-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.sf-legend-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(240,235,220,.06); border: 1px solid rgba(240,235,220,.12);
  border-radius: 8px; padding: 12px 16px; min-width: 200px; flex: 1; max-width: 260px;
}
.sf-legend-swatch-col { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 3px; }
.sf-legend-swatch { width: 24px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.sf-legend-label { font-size: 10px; font-weight: 700; color: var(--paper); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.sf-em { color: rgba(240, 235, 220, .85); font-weight: 700; }
.sf-legend-desc { font-size: 10px; color: rgba(240,235,220,.55); line-height: 1.6; letter-spacing: .01em; }
.sf-footer { margin-top: 28px; font-size: 9px; color: rgba(240,235,220,.4); letter-spacing: .14em; text-transform: uppercase; text-align: center; }

@media (max-width: 600px) { .sf-legend-item { min-width: 100%; max-width: 100%; } }
@media (max-width: 480px) {
  #sf-wrap { padding: 0 14px; }
  .sf-badge-col { min-width: 64px; }
  .sf-name { font-size: 12px; }
  .sf-sub  { font-size: 9.5px; }
  .sf-node { padding: 13px 14px 13px 18px; gap: 10px; }
  .sf-detail { padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-node-wrap { transition: none; }
  .sf-detail { animation: none; }
}

/* ============================================================================
   Mouse-tracking glass-glare BORDER on the cards. A masked ::before gradient ring
   whose bright point rotates to face the cursor — every card glares toward one
   shared light source (the telmacgroup.com effect). The JS writes the live
   gradient into --sf-glare each frame; the fallback keeps a static ring.
   ============================================================================ */
.sf-node { border: none; }               /* the gradient ring below is the edge now */
.sf-node > * { position: relative; z-index: 1; } /* content sits above the ring */
.sf-node::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  padding: 3px; border-radius: inherit;
  background: var(--sf-glare, linear-gradient(135deg, rgba(199, 164, 31, .6), rgba(199, 164, 31, .08)));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* ============================================================================
   Light / dark view toggle — a sun/moon switch; the knob rests on the CURRENT
   mode. Themes ONLY this container (data-sf-theme on .sf-band), never the page.
   ============================================================================ */
.sf-theme-toggle {
  position: absolute; top: clamp(1rem, 3vw, 1.6rem); right: clamp(1rem, 4vw, 2.4rem);
  z-index: 6; width: 56px; height: 26px; padding: 0; border-radius: 999px;
  background: rgba(240, 235, 220, .08); border: 1px solid rgba(240, 235, 220, .22);
  color: var(--paper); cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.sf-theme-toggle:hover { border-color: var(--gold); }
.sf-tt-ico {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; opacity: .38; color: currentColor;
  transition: opacity .25s, color .25s;
}
.sf-tt-ico.sf-tt-sun { left: 6px; }
.sf-tt-ico.sf-tt-moon { right: 7px; }
.sf-tt-knob {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(199, 164, 31, .2); border: 1px solid var(--gold);
  transition: transform .28s cubic-bezier(.3, .7, .2, 1);
}
/* dark (default): knob rests over the moon */
.sf-band[data-sf-theme="dark"] .sf-tt-knob { transform: translateX(28px); }
.sf-band[data-sf-theme="dark"] .sf-tt-moon { opacity: 1; color: var(--gold); }
/* light: knob rests over the sun */
.sf-band[data-sf-theme="light"] .sf-tt-knob { transform: translateX(0); }
.sf-band[data-sf-theme="light"] .sf-tt-sun { opacity: 1; color: var(--gold-deep); }

.sf-band[data-sf-theme="light"] { background: #e7e0cd; color: var(--ink); }
.sf-band[data-sf-theme="light"] #sf-wrap { --white: #fbf9f2; --light: rgba(13, 12, 8, .55); }
.sf-band[data-sf-theme="light"] .sf-kicker { color: rgba(13, 12, 8, .72); }
.sf-band[data-sf-theme="light"] .sf-subtitle { color: rgba(13, 12, 8, .55); }
.sf-band[data-sf-theme="light"] .sf-legend { border-top-color: rgba(13, 12, 8, .14); }
.sf-band[data-sf-theme="light"] .sf-legend-title { color: rgba(13, 12, 8, .45); }
.sf-band[data-sf-theme="light"] .sf-legend-item { background: rgba(13, 12, 8, .04); border-color: rgba(13, 12, 8, .12); }
.sf-band[data-sf-theme="light"] .sf-legend-label { color: var(--ink); }
.sf-band[data-sf-theme="light"] .sf-legend-desc { color: rgba(13, 12, 8, .6); }
.sf-band[data-sf-theme="light"] .sf-em { color: var(--ink); }
.sf-band[data-sf-theme="light"] .sf-footer { color: rgba(13, 12, 8, .4); }
/* mobile connectors need dark strokes on the light band */
.sf-band[data-sf-theme="light"] .sf-conn-line,
.sf-band[data-sf-theme="light"] .sf-branch-top,
.sf-band[data-sf-theme="light"] .sf-branch-hline,
.sf-band[data-sf-theme="light"] .sf-branch-vl { background: rgba(13, 12, 8, .28); }
.sf-band[data-sf-theme="light"] .sf-conn-arrow,
.sf-band[data-sf-theme="light"] .sf-branch-arr { border-top-color: rgba(13, 12, 8, .28); }
.sf-band[data-sf-theme="light"] .sf-conn-label,
.sf-band[data-sf-theme="light"] .sf-branch-lbl { color: rgba(13, 12, 8, .5); }
/* toggle chrome inverted for the light band */
.sf-band[data-sf-theme="light"] .sf-theme-toggle { background: rgba(13, 12, 8, .05); border-color: rgba(13, 12, 8, .2); color: var(--ink); }