/* ============================================================
   Informed Simplicity — diagrams.css
   Clean, editable concept diagrams (no raster art).
   ============================================================ */

/* The Value Gap ------------------------------------------ */
.gap-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  margin: 0 auto;
  max-width: 860px;
}
.gap-side {
  background: var(--canvas);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gap-side .gap-tag {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.gap-side .gap-big { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.gap-side .gap-sub { font-size: 14px; color: var(--body); }
.gap-side.sell { border-top: 3px solid var(--ink); }
.gap-side.buy { border-top: 3px solid var(--accent); }

.gap-divide {
  position: relative;
  width: clamp(56px, 9vw, 120px);
  display: flex; align-items: center; justify-content: center;
}
.gap-divide::before {
  content: "";
  position: absolute; top: 14%; bottom: 14%; left: 50%;
  border-left: 2px dashed var(--accent);
  opacity: .5;
}
.gap-divide .gap-label {
  position: relative;
  background: var(--accent);
  color: var(--on-dark);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transform: rotate(0deg);
  box-shadow: 0 8px 20px -10px var(--accent);
}
@media (max-width: 640px) {
  .gap-diagram { grid-template-columns: 1fr; gap: 0; }
  .gap-divide { width: 100%; height: 56px; flex-direction: column; }
  .gap-divide::before { top: 50%; bottom: auto; left: 14%; right: 14%; width: auto; border-left: 0; border-top: 2px dashed var(--accent); }
}

/* Signal-decay across handoffs --------------------------- */
.decay { position: relative; }
.decay-legend { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 22px; }
.decay-legend span { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--body); }
.decay-legend i { width: 26px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.decay-legend i.kept { background: var(--ink); }
.decay-legend i.lost { background: repeating-linear-gradient(45deg, color-mix(in oklab, var(--signal) 55%, transparent) 0 1.5px, transparent 1.5px 7px); border: 1px solid color-mix(in oklab, var(--signal) 35%, transparent); }
.decay-track {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  height: 240px; align-items: stretch; position: relative;
}
/* dashed reference line at the 100% level */
.decay-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  border-top: 1px dashed color-mix(in oklab, var(--signal) 60%, transparent);
  z-index: 3;
}
.decay-track .ref-tag {
  position: absolute; top: -22px; right: 0; z-index: 3;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--signal);
}
.decay-col {
  position: relative; height: 100%; border-radius: var(--r-md) var(--r-md) 0 0;
  /* the empty space above the bar = signal lost */
  background: repeating-linear-gradient(45deg, color-mix(in oklab, var(--signal) 14%, transparent) 0 1.5px, transparent 1.5px 7px);
  overflow: hidden;
}
.decay-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--ink);
  border-radius: var(--r-md) var(--r-md) 0 0;
  display: flex; align-items: flex-start; justify-content: flex-start;
  transition: height .9s cubic-bezier(.2,.7,.2,1);
}
.decay-pct {
  position: absolute; top: 10px; left: 14px;
  font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--on-dark);
}
.decay-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 14px; }
.decay-meta > div { border-top: 2px solid var(--ink); padding-top: 12px; }
.decay-meta .dm-step { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.decay-meta strong { display: block; font-size: 15px; font-weight: 640; color: var(--ink); letter-spacing: -.01em; margin: 4px 0; }
.decay-meta p { font-size: 13px; color: var(--body); }
@media (max-width: 640px) {
  .decay-track { grid-template-columns: 1fr; grid-auto-rows: 1fr; height: auto; gap: 8px; }
  .decay-track::before, .decay-track .ref-tag { display: none; }
  .decay-col { height: 54px; border-radius: var(--r-md); }
  .decay-bar { top: 0; bottom: 0; height: auto !important; border-radius: var(--r-md); width: var(--w, 100%); right: auto; }
  .decay-meta { grid-template-columns: 1fr; gap: 0; }
  .decay-meta > div { border-top: 1px solid var(--hairline); padding: 14px 0; }
}

/* Business-case state strip (clear/thin/assumed/missing) -- */
.states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.state {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  padding: 18px 16px;
  background: var(--canvas);
  display: flex; flex-direction: column; gap: 10px;
}
.state .bars { display: flex; gap: 4px; align-items: flex-end; height: 30px; }
.state .bars i { flex: 1; background: var(--hairline); border-radius: 2px; height: 100%; }
.state .st-name { font-size: 15px; font-weight: 640; color: var(--ink); letter-spacing: -.01em; }
.state .st-sub { font-size: 12.5px; color: var(--body); }
.state.s-clear .bars i { background: var(--teal); }
.state.s-thin .bars i:nth-child(n+3) { background: var(--hairline); }
.state.s-thin .bars i:nth-child(-n+2) { background: color-mix(in oklab, var(--bronze) 70%, var(--canvas)); }
.state.s-assumed .bars i { background: repeating-linear-gradient(45deg, var(--muted-soft), var(--muted-soft) 3px, transparent 3px, transparent 6px); }
.state.s-missing .bars i { background: var(--canvas); border: 1px dashed var(--signal); }
.state.s-clear { border-color: color-mix(in oklab, var(--teal) 40%, var(--hairline)); }
.state.s-missing { border-color: color-mix(in oklab, var(--signal) 35%, var(--hairline)); }
@media (max-width: 640px) { .states { grid-template-columns: 1fr 1fr; } }

/* Maturity bell curve (the iS curve) --------------------- */
.bell-fig { position: relative; width: 100%; }
.bell-canvas { display: flex; align-items: stretch; gap: 10px; }
.bell-yaxis { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center; white-space: nowrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-bottom: 28px; }
.bell-plot { flex: 1; min-width: 0; }
.bell-xaxis { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bell-xaxis .x-mid { color: var(--muted-soft); }
.bell-svg { width: 100%; height: auto; display: block; overflow: visible; }
.bell-svg .bell-stroke { fill: none; stroke: var(--bronze); stroke-width: 3; }
.bell-svg .bell-fill { fill: color-mix(in oklab, var(--bronze) 9%, transparent); }
.bell-svg .bell-base { stroke: var(--hairline-strong); stroke-width: 2; }
.bell-svg .bell-axis { stroke: var(--hairline-strong); stroke-width: 1.5; }
.bell-svg .bell-axis-fill { fill: var(--hairline-strong); }
.bell-svg .bell-dot { fill: var(--bronze); }
.bell-svg .bell-dot-ring { fill: var(--canvas); }
.bell-svg .bell-num { fill: var(--ink); font-family: var(--font-mono); font-weight: 700; font-size: 26px; }
.bell-svg .bell-drop { stroke: var(--bronze); stroke-width: 1.5; stroke-dasharray: 2 6; opacity: .5; }

.bell-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.bell-stage { padding: 14px 4px 0; border-top: 2px solid var(--ink); }
.bell-stage .bs-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--bronze); }
.bell-stage .bs-name { display: block; font-size: 15px; font-weight: 640; color: var(--ink); letter-spacing: -.01em; margin-top: 3px; }
.bell-stage .bs-sub { font-size: 12.5px; color: var(--body); margin-top: 4px; }
@media (max-width: 640px) {
  .bell-yaxis { display: none; }
  .bell-stages { grid-template-columns: 1fr; gap: 0; }
  .bell-stage { border-top: 0; border-left: 3px solid var(--bronze); padding: 6px 0 6px 16px; margin-top: 10px; }
}

/* "Travels without you" room diagram --------------------- */
.room {
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
  border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 28px;
  background: var(--paper);
}
.room-stage { display: flex; align-items: center; gap: 10px; }
.room-figure { width: 38px; height: 38px; border-radius: 50%; background: var(--muted-soft); flex-shrink: 0; }
.room-figure.champion { background: var(--accent); }
.room-doc {
  width: 30px; height: 40px; border-radius: 3px; background: var(--canvas);
  border: 1px solid var(--ink); position: relative; flex-shrink: 0;
}
.room-doc::before, .room-doc::after { content: ""; position: absolute; left: 5px; right: 5px; height: 2px; background: var(--muted-soft); top: 9px; }
.room-doc::after { top: 15px; right: 12px; }