/* ============================================================
   JOURNEY MAP — styles shared by two blog pages:
     /blog/respondent-experience  (the person's journey)
     /blog/fieldwork-metrics      (the buyer/supplier lens)
   Loaded by those pages only (a plain <link> after styles.css,
   not imported anywhere shared), so nothing here leaks elsewhere.

   Both articles run on the house .article-body reading column
   (white, centered) so they get the standard ToC + share rail
   from main.js, and their sections, notes, boxes, FAQ rows,
   closing notes and CTA are the house article components in
   styles.css. This file covers only the map and what hangs off
   it: the full-width Sankey stage, its side panel and tooltip,
   the metrics table with its four-scenario matrix, the collapsed
   reference blocks the script reads (scenario cards, band notes,
   per-metric cards), and the fixes / roadmap blocks keyed to
   the map's colour families and actors.
   Companion script: /assets/js/journey-map.js.
   ============================================================ */

:root{
  /* flow families — shared by the CSS, the inline legend chips and FAMCOL in
     the page script. Mid-lightness values that hold on the white surface. */
  --flow-continue:#0FA890;   /* still in the study */
  --flow-unqualified:#C97F00;/* did not qualify / no room */
  --flow-partial:#9575E8;    /* started, never finished */
  --flow-quality:#EA5A70;    /* removed by a quality or fraud control */
  --flow-attrition:#6B7488;  /* never engaged — recessive, not a categorical slot */
  --flow-delivered:#12C3A6;  /* the payoff node */

  --rj-hairline:rgba(11,16,32,.10);
}

.rj-article{overflow-x:clip}

/* The fixed ToC / share rail (injected by main.js) sit over the full-width
   stage on most desktop widths. The page script toggles this class while the
   stage is in view; the rails' own opacity transition does the fading. */
body.rj-stage-in-view .page-toc,
body.rj-stage-in-view .article-share{opacity:0;pointer-events:none}

/* ---------- controls ---------- */
.controls{
  margin-top:10px;padding:10px 0 10px;
  border-top:1px solid var(--rj-hairline);border-bottom:1px solid var(--rj-hairline);
}
.controls-inner{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:flex-end}
.ctl{display:flex;flex-direction:column;gap:6px}
.ctl-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500)}
.seg{display:flex;background:var(--cloud-100);border:1px solid var(--rj-hairline);border-radius:8px;padding:3px;gap:2px}
.seg button{font-size:12.5px;font-weight:500;padding:6px 11px;border-radius:6px;color:var(--slate-600);white-space:nowrap;transition:background .15s,color .15s}
.seg button[aria-pressed="true"]{background:var(--teal-050);color:var(--teal-900);box-shadow:inset 0 0 0 1px rgba(0,194,168,.45)}
.seg button:hover:not([aria-pressed="true"]){color:var(--ink)}
.ctl-reset{margin-left:auto}
.ctl-reset button{font-size:12px;color:var(--slate-500);border-bottom:1px dotted var(--slate-400);padding-bottom:1px}
.ctl-reset button:hover{color:var(--ink)}

/* ---------- scenario line ---------- */
.rj-article .scenario{margin:18px 0 6px;font-size:14px;color:var(--slate-600);max-width:88ch}
.rj-article .scenario b{color:var(--ink);font-weight:600}

/* ---------- figure + rail ---------- */
/* wide stage: the one full-width block on the page — diagram + sticky side
   panel, wider than the reading column. */
/* 40px between the last note and the map (the p margin, this margin and .stage's
   own 14px all collapse into one), now that the section above carries no house
   padding. */
/* Stacked above the fixed ToC / share rails (z-index 5 in styles.css): on the
   way down they would otherwise show through the map for a beat before the
   in-view fade hides them. */
.stage-wide{max-width:1900px;margin:40px auto 0;padding:0 28px;position:relative;z-index:6}
@media(max-width:720px){.stage-wide{padding:0 12px}}
.stage{margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:18px;align-items:stretch}
@media(max-width:1120px){.stage{grid-template-columns:1fr}}
/* .canvas-wrap is the figure's flexible middle row (the flex chain is
   figure → canvas-wrap → canvas → svg, each passing definite height down) */
.canvas-wrap{position:relative;flex:1 1 auto;min-height:0}
.canvas-wrap:before,.canvas-wrap:after{content:"";position:absolute;top:0;bottom:0;width:44px;pointer-events:none;z-index:2;opacity:0;transition:opacity .2s}
.canvas-wrap:before{left:0;background:linear-gradient(90deg,var(--white),transparent)}
.canvas-wrap:after{right:0;background:linear-gradient(270deg,var(--white),transparent)}
.canvas-wrap.can-l:before{opacity:1}
.canvas-wrap.can-r:after{opacity:1}
.jump{display:flex;gap:6px;margin-left:auto;align-items:center}
.jump button{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-600);
  border:1px solid var(--rj-hairline);border-radius:6px;padding:5px 10px;background:var(--cloud-100)}
.jump button:hover{color:var(--ink);border-color:rgba(0,194,168,.45)}
.canvas{cursor:grab;scrollbar-color:rgba(11,16,32,.25) transparent;scrollbar-width:thin}
.canvas::-webkit-scrollbar{height:10px}
.canvas::-webkit-scrollbar-track{background:rgba(11,16,32,.04)}
.canvas::-webkit-scrollbar-thumb{background:rgba(11,16,32,.22);border-radius:8px}
.canvas::-webkit-scrollbar-thumb:hover{background:rgba(0,194,168,.55)}
.canvas.dragging{cursor:grabbing}

/* The figure (and, via the grid's stretch, the rail beside it) fills the
   viewport minus the nav: legend and caption keep their natural heights and
   the canvas is the flexible middle row. The settle-focus in the page script
   aligns the stage 8px under the nav, so the 16px here leaves 8px below. */
.figure{background:var(--white);border:1px solid var(--slate-200);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;min-height:560px;
  height:calc(100vh - var(--nav-h) - 16px);height:calc(100dvh - var(--nav-h) - 16px)}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;padding:13px 16px;border-bottom:1px solid var(--rj-hairline);font-size:12px;color:var(--slate-600)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.legend i.hatch{background-color:#EDEFF3;background-image:repeating-linear-gradient(45deg,rgba(11,16,32,.35) 0 1.5px,transparent 1.5px 4px)}
.legend i.cav{width:11px;height:11px;border-radius:50%;border:1.4px solid var(--teal);background:none}
.canvas{overflow-x:auto;overflow-y:hidden;height:100%}
@media(max-width:720px){
  .canvas{-webkit-overflow-scrolling:touch}
  .legend{font-size:11.5px;gap:5px 12px}
}
/* The SVG fills the canvas — the flexible middle row of the viewport-sized
   figure. The viewBox is deliberately compact (1720×575) relative to the
   font sizes, which is what makes the rendered text large; width follows
   the aspect ratio and overflows into the horizontal scroll. */
.canvas svg{display:block;height:100%;width:auto;aspect-ratio:1720/575;max-width:none}

.rj-article .figcap{padding:12px 16px 14px;border-top:1px solid var(--rj-hairline);font-size:12.5px;color:var(--slate-500);line-height:1.5;margin-bottom:0}

/* svg bits */
.nd{cursor:pointer}
.nd rect{transition:opacity .18s}
.nd:hover rect{opacity:.86}
.nd.sel rect{stroke:var(--ink);stroke-width:1.4}
.nd.hov rect{opacity:.86}                 /* set from the flow that feeds the band */
.lk{transition:opacity .18s;cursor:pointer}
.canvas.dragging .lk{cursor:grabbing}
.lbl{font-family:'Inter',sans-serif;font-size:12.5px;fill:var(--ink);pointer-events:none}
/* branch labels of an expanded band: one short line each, secondary weight */
.lbl.branch{font-size:11px;fill:var(--slate-600)}
.num{font-family:var(--mono);font-size:12px;fill:var(--slate-600);pointer-events:none}
.num.big{font-size:13.5px;fill:var(--ink)}
.panel-name{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;fill:var(--slate-500);pointer-events:none}
.panel-name.hid{font-size:9.5px;fill:#C97F00;letter-spacing:.09em}

/* ---------- rail ---------- */
/* The clamp stretches to the figure's grid-row height while the rail,
   absolutely positioned inside it, scrolls internally — so the panel's top
   and bottom always align with the diagram box, whatever the viewport. */
.rail-clamp{position:relative;min-height:0}
.rail{background:var(--cloud-100);border:1px solid var(--slate-200);border-radius:14px;padding:20px 22px;
  position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain}
@media(max-width:1120px){.rail-clamp{position:static}.rail{position:static;inset:auto;margin-top:16px;overflow:visible;max-height:none}}
/* the simplification marker, drawn like the ◦ on the diagram (a stroked teal circle), for use in prose */
.cavmark{display:inline-block;width:10px;height:10px;border-radius:50%;border:1.4px solid var(--teal);vertical-align:-1px;margin:0 3px 0 1px;background:none}
.rail > .c{min-width:0}
.rail > .c + .c{margin-top:16px;padding-top:16px;border-top:1px solid var(--rj-hairline)}
.rail .c > h4:first-child{margin-top:0;padding-top:0;border-top:none}
.rail::-webkit-scrollbar{width:8px}
.rail::-webkit-scrollbar-thumb{background:rgba(11,16,32,.15);border-radius:8px}
.rail-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-600);margin-bottom:9px;display:flex;align-items:center;gap:8px}
.rail-kicker i{width:9px;height:9px;border-radius:2px;flex:none}
.rail h3{font-size:19px;margin:0 0 4px;color:var(--ink)}
.rail .rail-count{font-family:var(--mono);font-size:12.5px;color:var(--teal-900);margin-bottom:13px}
.rail-count em{font-style:normal;color:var(--slate-500)}
.rail p{font-size:13.5px;color:var(--slate-600);line-height:1.6;margin-bottom:12px}
.rail p strong{color:var(--ink);font-weight:600}
.rail h4{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-600);font-weight:500;margin:16px 0 7px;padding-top:13px;border-top:1px solid var(--rj-hairline)}
.rail h4.first{margin-top:0;padding-top:0;border-top:none}
.rail ul{list-style:none;font-size:13px;color:var(--slate-600);margin:0;padding:0}
/* font-size repeated on the li: the house `.article-body li` (17px) outranks
   inheritance from .rail ul */
.rail ul li{font-size:13px;padding-left:14px;position:relative;margin-bottom:6px;line-height:1.55}
.rail ul li:before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--slate-400)}
/* branches of the selected band: names only, second level indented with ↳ */
.rail ul.branches li{margin-bottom:5px}
.rail ul.branches li>ul{margin:4px 0 2px;padding-left:4px}
.rail ul.branches li>ul li{font-size:12px;color:var(--slate-500);margin-bottom:2px;padding-left:16px}
.rail ul.branches li>ul li:before{content:"↳";width:auto;height:auto;top:0;border-radius:0;background:none;color:var(--slate-400);font-size:11px;line-height:1.55}
.mrow{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:12.5px;padding:5px 0;border-bottom:1px dotted rgba(11,16,32,.10)}
.mrow span:first-child{color:var(--slate-600)}
.mrow b{font-family:var(--mono);font-weight:600;color:var(--teal-900);white-space:nowrap}
.mrow b.na{color:var(--slate-400)}
.mrow b.outcome::before{content:"\25D0 ";color:#9A6200;font-weight:400}
/* the computation behind a value sits in its title: a dotted underline says so */
.mrow b[data-calc]{cursor:help;border-bottom:1px dotted rgba(0,61,55,.45)}
.mrow b.na[data-calc]{border-bottom-color:rgba(11,16,32,.25)}
.mrow b[data-calc]:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:2px}
/* the computation, toggled inline under a value by tap or keyboard */
.mcalc{font-family:var(--mono);font-size:11px;color:var(--teal-900);padding:3px 0 6px;border-bottom:1px dotted rgba(11,16,32,.10)}
.rail .bands{font-size:12.5px;color:var(--slate-600);line-height:1.65;margin-bottom:6px}
.rail .bands.hid{color:var(--slate-500)}
.mform{font-family:var(--mono);font-size:10.5px;color:var(--slate-500);margin-top:-2px;padding-bottom:6px;border-bottom:1px dotted rgba(11,16,32,.10)}
.mform .op{color:var(--teal-900);font-weight:600;font-size:12px}
.caveat{background:var(--teal-050);border:1px solid rgba(0,194,168,.30);border-radius:9px;padding:11px 13px;
  font-size:12.5px;color:var(--ink-80);margin-bottom:6px;line-height:1.55}
.caveat b{color:var(--teal-900);font-weight:600}
.watch{background:rgba(201,127,0,.07);border:1px solid rgba(201,127,0,.30);border-radius:9px;padding:11px 13px;font-size:12.5px;color:#5C4A1E;margin-top:14px;line-height:1.55}
.watch b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#9A6200;margin-bottom:5px}

/* ---------- the metrics table ----------
   Metric and formula, then four static who-can-compute-it cells. It
   overrides the house .article-body table look (whose last-child cell is a
   right-aligned bold figure). Wide by design: it scrolls inside .tbl-wrap
   within the reading column, per the house .table-scroll pattern. */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  border:1px solid var(--slate-200);border-radius:12px;background:var(--white)}
.rj-article .tbl-wrap table{border-collapse:collapse;width:100%;min-width:560px;font-size:13px;margin:0}
.rj-article .tbl-wrap thead th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-500);background:var(--cloud-100);font-weight:500;padding:12px 14px;border-bottom:1px solid var(--slate-200);white-space:nowrap}
.rj-article .tbl-wrap td{padding:11px 14px;border-bottom:1px solid rgba(11,16,32,.06);color:var(--slate-600);vertical-align:top;line-height:1.55}
.rj-article .tbl-wrap tbody td:last-child{font-weight:400;color:var(--slate-600);text-align:left;white-space:normal}
.rj-article .tbl-wrap tr:last-child td{border-bottom:none}
.rj-article .tbl-wrap td.m-name{color:var(--ink);font-weight:500;white-space:normal;width:auto;min-width:260px;padding-top:13px;padding-bottom:13px}
/* the formula, one inline line under the metric name (the stacked fraction is
   in the definitions below the table) */
.rj-article .tbl-wrap .m-form{display:block;font-family:var(--mono);font-size:11.5px;color:var(--slate-500);font-weight:400;margin-top:5px;line-height:1.55}
.rj-article .tbl-wrap .m-form .op{color:var(--teal-900);font-weight:600;font-size:13px}
.rj-article .tbl-wrap tbody tr:hover td{background:rgba(11,16,32,.02)}
/* group rows */
.rj-article .tbl-wrap tr.grp td{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-500);background:var(--cloud-100);padding:8px 14px;border-bottom:1px solid var(--slate-200);border-top:1px solid var(--slate-200)}
/* the four-scenario matrix: one glyph per seat x host. Static in the HTML;
   the script only highlights the selected scenario's column. */
.rj-article .tbl-wrap th.rj-who{text-align:center;white-space:normal;line-height:1.3;width:62px;padding-left:6px;padding-right:6px}
.rj-article .tbl-wrap th.rj-who small{display:block;font-size:8.5px;letter-spacing:.06em;text-transform:none;color:var(--slate-400);margin-top:2px}
.rj-article .tbl-wrap td.rj-who{text-align:center;font-family:var(--mono);font-size:21px;line-height:1;font-weight:600;padding-left:6px;padding-right:6px;width:62px}
/* the house .article-body table right-aligns and recolors every row's last cell;
   these outrank it so the last scenario column centers and colors like the others */
.rj-article .tbl-wrap tbody td.rj-who:last-child{text-align:center;white-space:nowrap}
.rj-article .tbl-wrap td.rj-who[data-st="measured"]{color:var(--teal-900)}
.rj-article .tbl-wrap td.rj-who[data-st="outcome"]{color:#9A6200}
.rj-article .tbl-wrap td.rj-who[data-st="blind"]{color:#EA5A70}
.rj-article .tbl-wrap td.rj-who[data-st="na"]{color:var(--slate-400);font-weight:400}
.rj-article .tbl-wrap .is-now{background:var(--teal-050)}
.rj-article .tbl-wrap thead th.is-now{color:var(--teal-900);box-shadow:inset 0 -2px 0 var(--teal)}
.rj-article .tbl-wrap tbody tr:hover td.is-now{background:rgba(0,194,168,.16)}
.rj-who-k{font-family:var(--mono);font-weight:600;font-size:1.25em;line-height:1}
.rj-who-k[data-st="measured"]{color:var(--teal-900)}
.rj-who-k[data-st="outcome"]{color:#9A6200}
.rj-who-k[data-st="blind"]{color:#EA5A70}
.rj-article .tbl-legend{font-size:12.5px;color:var(--slate-500);margin:10px 2px 0;line-height:1.6}

/* ---------- fixes section ---------- */
.fx{margin-top:32px;padding-top:24px;border-top:1px solid var(--rj-hairline)}
.fx h3{display:flex;align-items:baseline;gap:11px;margin-top:0;font-size:20px} /* same size as .tier h3 / .msec h3 */
.fx h3 i{width:12px;height:12px;border-radius:3px;flex:none;position:relative;top:1px}
.fx p{margin-top:12px;margin-bottom:0}
.fx .fx-k{color:var(--teal-900);font-weight:600}

/* ---------- band-by-band reference (#bands) ----------
   The crawlable text twin of the diagram: one <details> per band. The page
   script reads the panel content from these blocks, so their inner classes
   (band-what, band-branches, caveat, watch, exp) are load-bearing. */
.band{border-top:1px solid var(--rj-hairline)}
.band:last-of-type{border-bottom:1px solid var(--rj-hairline)}
.band>summary{display:flex;align-items:baseline;gap:11px;padding:13px 2px;cursor:pointer;list-style:none}
.band>summary::-webkit-details-marker{display:none}
.band>summary::after{content:"+";font-family:var(--mono);font-size:14px;color:var(--slate-400);margin-left:12px;flex:none}
.band[open]>summary::after{content:"−"}
.band>summary:hover .band-t{color:var(--teal-900)}
.band>summary i{width:11px;height:11px;border-radius:3px;flex:none;position:relative;top:1px}
.rj-article .band-t{font-family:'Inter',sans-serif;font-size:15px;font-weight:500;color:var(--ink);margin:0;padding:0;border:none;line-height:1.4}
.band-n{font-family:var(--mono);font-size:12.5px;color:var(--slate-500);margin-left:auto;white-space:nowrap}
.band-body{padding:2px 2px 22px;max-width:76ch}
.rj-article .band-body p{font-size:14px;color:var(--slate-600);line-height:1.65;margin-bottom:12px}
.rj-article .band-count{font-family:var(--mono);font-size:12px;color:var(--teal-900);margin-bottom:12px}
.rj-article .band-h{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-500);font-weight:500;margin:18px 0 8px;padding:0;border:none}
.rj-article .band-body ul.band-branches{list-style:none;margin:0 0 10px;padding:0;max-width:520px}
.rj-article .band-branches li{font-size:13px;color:var(--slate-600);padding:5px 0 4px;border-bottom:1px dotted rgba(11,16,32,.10);line-height:1.5}
.rj-article .band-branches li>b{float:right;font-family:var(--mono);font-weight:600;color:var(--teal-900);margin-left:12px}
.rj-article .band-branches li>ul{list-style:none;margin:4px 0 1px;padding-left:18px}
.rj-article .band-branches li>ul li{font-size:12px;color:var(--slate-500);border-bottom:none;padding:1px 0}
.rj-article .band-branches li>ul li:before{content:"↳ ";color:var(--slate-400)}
.rj-article .band-branches li>ul li>b{color:var(--slate-600);font-weight:500}

/* Tooltip stays dark — it floats above the page and reads best in reverse. */
.tip{position:fixed;pointer-events:none;z-index:80;background:var(--ink);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:9px 11px;font-size:12px;max-width:250px;opacity:0;transition:opacity .12s;box-shadow:0 10px 30px rgba(11,16,32,.35)}
.tip b{display:block;font-size:12.5px;margin-bottom:3px;color:#F2F4F8}
.tip span{font-family:var(--mono);font-size:11px;color:var(--teal-300)}
.tip em{display:block;font-style:normal;font-size:11px;color:#A8AEBD;margin-top:4px}

/* ============================================================
   Added for the two-page split (2026-09-01)
   ============================================================ */

/* ---------- respondent lens: "what the person experiences" ---------- */
.exp{background:var(--cloud-100);border:1px solid var(--rj-hairline);border-left:2px solid var(--teal);border-radius:0 9px 9px 0;padding:11px 13px;font-size:12.5px;color:var(--slate-600);margin-top:14px;line-height:1.55}
.exp b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-900);margin-bottom:5px}
.band-body .exp{margin-top:16px;font-size:13px}
.rail .rail-ref{font-size:12.5px;margin:14px 0 0}
.rail .mrow span a{color:var(--slate-600);border-bottom:1px dotted var(--slate-400)}
.rail .mrow span a:hover{color:var(--teal-900)}

/* ---------- fixes: who can fix it ---------- */
.own{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:20px;margin:0 2px 0 6px;vertical-align:middle;border:1px solid;position:relative;top:-1px}
.own-buyer{color:var(--teal-900);border-color:rgba(0,194,168,.5);background:var(--teal-050)}
.own-supplier{color:#9A6200;border-color:rgba(201,127,0,.4);background:rgba(201,127,0,.07)}
.own-structure{color:var(--ink);border-color:rgba(11,16,32,.25);background:var(--cloud-100)}
.fx .fx-k.owner{color:var(--ink)}

/* ---------- roadmap tiers ---------- */
.tier{margin-top:28px;padding:22px 26px 20px;border:1px solid var(--rj-hairline);border-radius:12px;background:var(--white)}
.tier-k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-500);margin-bottom:6px;display:flex;align-items:center;gap:10px}
.tier h3{margin:0 0 10px;font-size:20px}
.rj-article .tier p{font-size:15.5px;margin-bottom:12px}
.rj-article .tier ul{margin:0 0 6px;padding-left:20px}
.rj-article .tier li{font-size:15px;line-height:1.55;margin-bottom:7px;color:var(--slate-600)}
.rj-article .tier li b{color:var(--ink);font-weight:600}
.tier .unlock{margin-top:14px;padding-top:12px;border-top:1px dashed var(--rj-hairline);font-size:14.5px;color:var(--slate-600)}
.tier .unlock b{color:var(--teal-900);font-weight:600}
.tier.tier-3{border-color:rgba(0,194,168,.35);background:linear-gradient(180deg,var(--teal-050),rgba(230,250,247,.25))}

/* ---------- metrics page: collapsed reference blocks ----------
   .rj-ref is a house .article-notes <details>; inside it sit the four scenario
   cards (.sc), the per-metric cards (.msec) and the band notes (.bnote).
   The script reads .sc and .bnote to build the side panel. */
.rj-article .article-notes.rj-ref{margin-top:22px}
.rj-article .rj-ref h3{font-family:'Inter',sans-serif;font-size:16px;font-weight:600;color:var(--ink);margin:0 0 6px;padding:0;border:none;line-height:1.4}
.sc{margin-top:22px;padding-top:16px;border-top:1px solid var(--rj-hairline)}
.rj-article .rj-ref .sc p{font-size:14px;color:var(--slate-600);line-height:1.65;margin:0 0 10px}
.rj-article .rj-ref .sc p.sc-m b{color:var(--ink);font-weight:600}
.rj-article .rj-ref .sc p.sc-ask{padding-left:12px;border-left:2px solid rgba(201,127,0,.45)}
.rj-article .rj-ref .sc p.sc-ask::before{content:"What to ask for: ";font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#9A6200}
/* Each metric is a card: numbered header + group tag, the formula on its own
   plaque, then the three notes with their labels in a left gutter. The card is
   a link target from the matrix above, hence :target and scroll-margin. */
.rj-article .defs{margin-top:30px}
.rj-article .defs .defs-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-500);font-weight:500;margin:0 0 4px;padding:0;border:none}
.msec{margin-top:16px;padding:19px 22px 18px;border:1px solid var(--rj-hairline);border-radius:12px;background:var(--white);scroll-margin-top:90px;transition:border-color .18s ease,box-shadow .18s ease}
.msec:target{border-color:rgba(0,194,168,.45);box-shadow:0 0 0 3px rgba(0,194,168,.10)}

/* header: 01 · name · group */
.msec .mtop{display:flex;align-items:baseline;gap:10px;margin:0 0 13px}
.msec .mnum{flex:none;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--teal-900);background:var(--teal-050);border-radius:5px;padding:3px 6px;position:relative;top:-1px}
.msec h3{margin:0}
.rj-article .defs .msec h3{font-size:18px;line-height:1.3}
.msec .mtag{flex:none;margin-left:auto;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-500);white-space:nowrap}

/* the formula plaque — a real display fraction, rule spanning the plaque.
   .op carries the "÷" for text extraction (crawlers, LLMs, screen readers);
   the stacked layout is what a reader sees. The label names the metric
   ("Incidence rate formula", not "How to compute it") so the formula is
   self-contained in whatever chunk a search or answer engine retrieves; it
   stays a quiet eyebrow because the h3 above it is the real title. Class is
   .mhow, not .how: styles.css owns .how (a homepage section) and its white
   background leaked onto the plaque. */
.msec .mhead{margin:0 0 16px;padding:11px 16px 13px;background:var(--cloud-100);border:1px solid var(--rj-hairline);border-radius:10px;text-align:center}
.msec .mhead .mhow{display:block;text-align:left;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-500);margin:0 0 8px}
.rj-article .frac{display:inline-block;text-align:center;min-width:210px;max-width:100%;font-family:var(--mono);font-size:13px;line-height:1.45;font-weight:400;color:var(--slate-600)}
.rj-article .frac .num{display:block;color:var(--ink);padding:0 16px 7px;border-bottom:1.5px solid rgba(0,194,168,.55)}
.rj-article .frac .den{display:block;color:var(--slate-600);padding:7px 16px 0}
.rj-article .frac .op{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the three notes: label in the gutter, prose in the column */
.rj-article .defs .msec p{display:grid;grid-template-columns:118px minmax(0,1fr);gap:0 18px;font-size:15px;line-height:1.7;color:var(--ink-80);margin:0 0 13px}
.rj-article .defs .msec p:last-child{margin-bottom:0}
.rj-article .defs .msec p .mk{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--slate-500);line-height:1.5;padding-top:6px}
.rj-article .defs .msec p:last-child .mtxt{color:var(--slate-600)}

@media (max-width:720px){
  .msec{padding:16px 16px 15px}
  /* narrow: 01 + group read as one eyebrow row, the name on its own line */
  .msec .mtop{flex-wrap:wrap;gap:7px 10px}
  .msec .mnum{order:1}
  .msec .mtag{order:2;margin-left:0}
  .rj-article .defs .msec h3{order:3;width:100%;font-size:17.5px}
  .rj-article .frac{font-size:12px}
  .rj-article .defs .msec p{grid-template-columns:minmax(0,1fr);gap:3px;font-size:14.5px}
  .rj-article .defs .msec p .mk{padding-top:0}
}
.rj-article .tbl-wrap td.m-name a{color:var(--ink);border-bottom:1px dotted var(--slate-400)}
.rj-article .tbl-wrap td.m-name a:hover{color:var(--teal-900)}

/* ---------- metrics page: band notes (the panel's text twin) ---------- */
.bnote{margin-top:20px;padding-top:14px;border-top:1px solid var(--rj-hairline)}
.bnote h3{display:flex;align-items:baseline;gap:11px}
.bnote h3 i{width:11px;height:11px;border-radius:3px;flex:none;position:relative;top:1px}
.bnote h3 .band-n{margin-left:auto}
.rj-article .rj-ref .bnote .band-what p{font-size:14px;color:var(--slate-600);line-height:1.65;margin:0 0 10px}
.bnote .watch{margin-top:10px}