/* RIVET — science × art diagram kit (light) */

/* ---- Diagram frame: a "lab card" with mono caption + corner ticks ---- */
.diagram {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(18px, 2.2vw, 28px);
  box-shadow: var(--card-shadow);
}
.diagram__cap { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.diagram__cap .label { color: var(--fg-mute); }
.diagram__tag { font-family:var(--font-mono); font-size:0.7rem; color:var(--violet); padding:3px 8px; border:1px solid color-mix(in oklab, var(--violet) 30%, transparent); border-radius:var(--r-pill); }
/* engineering corner ticks */
.diagram::before, .diagram::after {
  content:""; position:absolute; width:10px; height:10px; pointer-events:none; opacity:0.5;
}
.diagram::before { top:10px; left:10px; border-top:1.5px solid var(--line-strong); border-left:1.5px solid var(--line-strong); }
.diagram::after { bottom:10px; right:10px; border-bottom:1.5px solid var(--line-strong); border-right:1.5px solid var(--line-strong); }

/* ---- Formula block ---- */
.formula {
  font-family: var(--font-mono); display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size: clamp(1rem, 0.9rem + 0.7vw, 1.5rem); color: var(--ink); letter-spacing:-0.01em;
}
.formula .op { color: var(--fg-mute); }
.formula .tok { padding:5px 11px; border-radius:8px; background:var(--paper-2); border:1px solid var(--line); }
.formula .tok--accent { background: color-mix(in oklab, var(--magenta) 9%, #fff); border-color: color-mix(in oklab, var(--magenta) 35%, transparent); color: var(--magenta); }
.formula .tok--v { background: color-mix(in oklab, var(--violet) 9%, #fff); border-color: color-mix(in oklab, var(--violet) 30%, transparent); color: var(--violet); }
.formula__note { font-family:var(--font-mono); font-size:0.76rem; color:var(--fg-mute); margin-top:12px; }
.formula__legend { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:14px; }
.formula__legend span { font-family:var(--font-mono); font-size:0.74rem; color:var(--fg-soft); display:flex; gap:7px; align-items:center; }
.formula__legend b { color:var(--ink); }

/* AI-SCORE letter strip */
.acronym { display:flex; flex-wrap:wrap; gap:8px; }
.acronym__item { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; min-width:84px; flex:1 1 84px; }
.acronym__l { font-family:var(--font-mono); font-weight:600; font-size:1.05rem; color:var(--violet); }
.acronym__w { font-size:0.8rem; color:var(--fg-soft); line-height:1.3; }

/* ---- Compounding chart ---- */
.chart { width:100%; }
.chart svg { width:100%; height:auto; display:block; overflow:visible; }
.chart .axis { stroke: var(--line); stroke-width:1; }
.chart .gridline { stroke: var(--grid-line); stroke-width:1; }
.chart .area { fill: url(#rivetGrad); opacity:0.5; }
.chart .curve { fill:none; stroke: var(--magenta); stroke-width:2.5; stroke-linecap:round; }
.chart .flat { fill:none; stroke: var(--fg-mute); stroke-width:1.6; stroke-dasharray:4 4; }
.chart .pt { fill: var(--magenta); }
.chart .tick { font-family:var(--font-mono); font-size:9px; fill: var(--fg-mute); }
.chart .annot { font-family:var(--font-mono); font-size:10px; fill: var(--ink); font-weight:500; }
.chart-legend { display:flex; gap:18px; margin-top:14px; flex-wrap:wrap; }
.chart-legend span { font-family:var(--font-mono); font-size:0.74rem; color:var(--fg-soft); display:flex; align-items:center; gap:7px; }
.chart-legend i { width:14px; height:3px; border-radius:2px; display:inline-block; }

/* ---- Bowtie / funnel diagram ---- */
.bowtie { display:flex; align-items:stretch; gap:0; width:100%; }
.bowtie__stage { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 4px; text-align:center; }
.bowtie__bar { width:100%; border-radius:6px; position:relative; }
.bowtie__node { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-mono); font-weight:600; color:#fff; font-size:0.85rem; }
.bowtie__lbl { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.04em; color:var(--fg-soft); text-transform:uppercase; }
.bowtie__val { font-size:0.86rem; color:var(--ink); font-weight:600; }
.bowtie__center { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 6px; }
.bowtie__knot { width:30px; height:30px; transform:rotate(45deg); background:var(--ink); border-radius:6px; }

/* ---- Workflow / motion diagram ---- */
.workflow { display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.flow-node {
  display:flex; flex-direction:column; gap:6px; padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--r-md); background:#fff; min-width:120px; box-shadow:var(--card-shadow);
}
.flow-node .label { color:var(--violet); }
.flow-node b { font-size:0.92rem; color:var(--ink); font-weight:600; }
.flow-node small { color:var(--fg-mute); font-size:0.78rem; }
.flow-arrow { flex:1; min-width:24px; height:1.5px; background:var(--line-strong); position:relative; margin:0 -1px; }
.flow-arrow::after { content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%); border-left:6px solid var(--line-strong); border-top:4px solid transparent; border-bottom:4px solid transparent; }

/* ---- Spec / data list (science feel) ---- */
.spec { display:grid; gap:0; }
.spec__row { display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.spec__row:last-child { border-bottom:0; }
.spec__k { font-family:var(--font-mono); font-size:0.8rem; color:var(--fg-soft); letter-spacing:0.02em; }
.spec__v { font-size:0.92rem; color:var(--ink); font-weight:600; text-align:right; }

/* ---- Stat tile (minimal) ---- */
.stat-tile { display:flex; flex-direction:column; gap:5px; padding:18px 0; }
.stat-tile strong { font-size:var(--step-3); font-weight:600; letter-spacing:-0.03em; line-height:1; color:var(--ink); }
.stat-tile span { color:var(--fg-soft); font-size:0.9rem; }
.stat-tile .label { margin-bottom:2px; }

@media (max-width: 560px){
  .bowtie { flex-wrap:wrap; gap:10px; }
  .bowtie__stage { flex:1 1 40%; }
  .bowtie__center { flex:1 1 100%; }
  .workflow { gap:8px; }
  .flow-arrow { display:none; }
  .flow-node { flex:1 1 100%; }
}