/* ==========================================================================
   exp34 . v2-sections.css
   Styles for the top story partials (partials2/):
     01-requirement.html  .rq-  the living requirement card
     02-intent-graph.html .ig-  code graph vs proof graph ink figures
     03-blast-radius.html .br-  interactive blast radius stage + tally
   Tokens, layout, type, stage and the reveal mechanism all come from
   site.css. No tokens are redefined here. Semantic colors are read
   through the --sem-* / --struct-inactive custom properties that
   v2-top.css defines at :root (and themes.css re-keys per theme);
   each use carries a fallback so these sections never render
   unstyled if v2-top.css is not linked.
   ========================================================================== */

/* ---------- 01 . requirement card ---------- */
.rq-hold{max-width:680px;margin:2.8rem auto 0;}
.rq-card{
  margin:0;
  background:var(--card);border:1px solid var(--hair);border-radius:10px;overflow:hidden;
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.03),0 14px 40px rgba(var(--ink-rgb),.06);
}
.rq-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.5rem;border-bottom:1px solid var(--hair);background:var(--paper);
}
.rq-id{font-family:var(--mono);font-size:.86rem;font-weight:600;letter-spacing:.06em;color:var(--ink);}
.rq-chip{
  display:inline-flex;align-items:center;gap:.35rem;flex:0 0 auto;
  padding:.3rem .65rem;border:1px solid var(--sem-verified,var(--pass));border-radius:999px;
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sem-verified,var(--pass));
}
.rq-body{padding:1.75rem 1.5rem 1.5rem;}
.rq-prose{
  margin:0;
  font-size:clamp(1.25rem,2.2vw,1.55rem);line-height:1.35;letter-spacing:-.015em;font-weight:600;
  text-wrap:balance;
}
.rq-approve{margin:1.05rem 0 0;font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:var(--muted);}
.rq-approve-k{text-transform:uppercase;letter-spacing:.1em;margin-right:.4rem;}
.rq-rows{margin:0;border-top:1px solid var(--hair);}
.rq-row{
  display:grid;grid-template-columns:11rem minmax(0,1fr);gap:.4rem 1.5rem;align-items:baseline;
  padding:.72rem 1.5rem;border-top:1px solid var(--hair);
  transition:background .15s ease;
}
.rq-row:first-child{border-top:0;}
.rq-row:hover{background:rgba(var(--ink-rgb),.04);}
.rq-row dt{
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.rq-row dd{
  margin:0;min-width:0;
  font-family:var(--mono);font-size:.82rem;line-height:1.5;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.rq-row dd code{font-size:.82rem;}
.rq-row dd .num{font-weight:600;}
.rq-cap{margin-top:1.05rem;}

/* ---------- 02 . intent graph figures ---------- */
.ig-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem 2.8rem;align-items:start;}
.ig-tag{
  margin:0 0 .9rem;
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.ig-tag-proof{color:var(--ink);}
.ig-fig{margin:0;}
.ig-fig .fig-scroll svg{min-width:420px;}
/* semantic strokes + fills (see THEME-VERIFIED.md; fallbacks keep the
   paper theme correct if v2-top.css is absent) */
.ig-fig .ig-struct{stroke:var(--struct-inactive,rgba(21,20,15,.32));}
.ig-fig .ig-ver{stroke:var(--sem-verified,var(--pass));}
.ig-fig .ig-haz{stroke:var(--sem-stale,var(--fail));}
.ig-fig .ig-t-ver{fill:var(--sem-verified,var(--pass));}
.ig-fig .ig-t-haz{fill:var(--sem-stale,var(--fail));}
.ig-fig .ig-code{font-size:12px;fill:var(--ink-60);}
.ig-sign{
  margin:2.6rem 0 0;
  font-size:clamp(1.18rem,2vw,1.42rem);line-height:1.4;
  font-weight:600;letter-spacing:-.018em;color:var(--ink);
  max-width:56ch;text-wrap:balance;
}

/* ---------- 03 . blast radius ---------- */
.br-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:1.2rem;align-items:stretch;
}
.br-stage{min-width:0;}
/* unlit structure reads as inactive; the selected subgraph reads as verified */
.br-svg .edge{stroke:var(--struct-inactive,rgba(21,20,15,.32));}
.br-svg .edge.br-lit{stroke:var(--sem-verified,var(--pass));stroke-width:2;}
.br-svg .n{stroke:var(--struct-inactive,rgba(21,20,15,.32));}
.br-svg [data-node].br-lit .n{stroke:var(--sem-verified,var(--pass));stroke-width:2;}
.br-svg [data-node].br-dim{opacity:.4;}
.br-svg [data-node]{cursor:pointer;}
.br-svg [data-node]:focus{outline:none;}
.br-svg [data-node]:focus-visible .n{stroke:var(--signal);stroke-width:2.4;}
.br-svg .edge{transition:stroke .25s ease,stroke-width .25s ease;}
.br-svg .n{transition:stroke .25s ease,stroke-width .25s ease;}
.br-svg [data-node]{transition:opacity .25s ease;}
html.reduced .br-svg .edge,html.reduced .br-svg .n,html.reduced .br-svg [data-node],
html.qa .br-svg .edge,html.qa .br-svg .n,html.qa .br-svg [data-node]{transition:none !important;}
@media (prefers-reduced-motion:reduce){
  .br-svg .edge,.br-svg .n,.br-svg [data-node]{transition:none !important;}
}
/* the tally panel */
.br-panel{
  display:flex;flex-direction:column;min-width:0;
  background:var(--card);border:1px solid var(--hair);border-radius:10px;
  padding:1.3rem 1.3rem 1.2rem;
}
.br-ph{
  margin:0;font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.br-pid{
  margin:.4rem 0 0;font-family:var(--mono);font-size:1.05rem;font-weight:600;
  letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--ink);
}
.br-tally{margin:1.05rem 0 0;padding:.15rem 0 0;border-top:1px solid var(--hair-strong);}
.br-tr{display:flex;align-items:baseline;gap:.9rem;padding:.5rem 0;}
.br-tr + .br-tr{border-top:1px solid var(--hair);}
.br-tr dd{
  margin:0;min-width:2ch;
  font-family:var(--mono);font-size:.95rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.br-tr.is-zero dd{color:var(--muted);}
.br-tr dt{font-family:var(--mono);font-size:.78rem;letter-spacing:.03em;color:var(--muted);}
.br-pnote{
  margin:1rem 0 0;padding-top:.9rem;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.72rem;line-height:1.65;color:var(--muted);
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .br-grid{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .ig-grid{grid-template-columns:1fr;gap:2.2rem;}
  .rq-hold{margin-top:2rem;}
}
@media (max-width:640px){
  .rq-card .rq-head{padding:.85rem 1.05rem;}
  .rq-body{padding:1.3rem 1.05rem 1.2rem;}
  .rq-row{grid-template-columns:1fr;gap:.15rem;padding:.65rem 1.05rem;}
  .ig-sign{font-size:1.12rem;}
  .br-panel{padding:1.05rem 1rem 1rem;}
}