/* calc-comp.css — the self-check result surface.

   Ported from design/comp-d-merged.html, the design JMac approved on 2026-08-15. The comp
   carried fixture arrays; this carries none — every block here is painted from the live
   /api/site-read payload by assets/calc-comp.js.

   It loads on top of site.css and calc.css rather than re-declaring them, so every .pc-
   class is the real one and the five signal colours come from the same tokens the rest of
   the site uses.

   What it adds, and only what it adds:
     · the scanning trace, kept and extended (it is how the reader knows work is happening)
     · a provenance bar: reference, method version, rule-set id  (version = provenance)
     · THE FOUR PRIME JURISDICTIONS — EU, US, UK, AU — read across the nine Observation
       Points. This is the macro insight every Jurisdictional Review builds on.
     · the gate chain as a flow map, with per-document swim lanes underneath
     · the Data Usage Lifecycle as a flow, with the three lenses drawn as lanes beneath it,
       so which stages each lens reads is visible rather than asserted
     · everything EXPANDS in place. There is no popup on this page.

   Band vocabulary, glyph and word together, exactly as calc-scan-ui.js declares it:
     ▲ Not Published   ◐ Partly   ● Published   ◆ Consistent   ○ Not Determined
   The new layers get their own words against the same five glyphs — never Compliant,
   never Pass. */
/* ─── the three lens identities — JEWEL, selected by JMac 2026-08-15 ─────────
   Red / Amber / Green / Blue / Grey are the five signal colours and they mean a STATE.
   The three business use cases are not states, so they carry their own hues.
   Measured, not eyeballed: each is ≥ 15.0 ΔE (OKLab ×100) from every signal colour and
   from the accent, and no pair is closer than 19.3 ΔE to another, so all three stay
   apart for a colourblind reader on colour alone. 10.1 / 7.1 / 7.0:1 on this surface.
   The colour also runs down into each lens's own sub-headers, so a row that has been
   opened can always be traced back to the panel it belongs to. */
:root{
  --lens-s:#2DD4BF;  /* Sales       — Teal   · 10.1:1 · nearest reserved 21.2 ΔE (Green) */
  --lens-o:#C084FC;  /* Operational — Purple ·  7.1:1 · nearest reserved 17.6 ΔE (Blue)  */
  --lens-r:#FB7185;  /* Regulatory  — Rose   ·  7.0:1 · nearest reserved 15.0 ΔE (Red)   */
}

/* ─── stage + trace, carried from self-check ─────────────────────────────── */
.sc-stage{padding:64px 0 30px;position:relative}
.sc-stage::before{content:"";position:absolute;inset:0;background:
  radial-gradient(760px 320px at 50% -8%,rgba(37,99,235,.16),transparent 70%);pointer-events:none}
.sc-stage.ran{padding:24px 0 16px}
.sc-in{position:relative;max-width:820px;margin-inline:auto;text-align:center}
.sc-in h1{font-size:40px;line-height:1.1;letter-spacing:-.03em;margin:12px 0}
.sc-stage.ran .sc-in{max-width:1180px}
.sc-stage.ran h1,.sc-stage.ran .sc-lede,.sc-stage.ran .sc-eg{display:none}
.sc-lede{color:var(--tx2);font-size:16px;margin:0 auto 24px;max-width:640px}
.sc-form{display:flex;gap:10px;align-items:stretch;max-width:640px;margin-inline:auto}
.sc-form .pc-in{font-size:17px;padding:15px 18px}
.sc-eg{margin-top:14px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;font-size:12px}
.sc-eg span{color:var(--tx3);align-self:center}
.sc-eg button{border:1px solid var(--line2);border-radius:999px;background:transparent;
  color:var(--tx2);padding:5px 12px;font-size:12px;cursor:pointer;font-family:inherit}
.sc-eg button:hover{border-color:var(--acc);color:var(--tx)}

/* ─── WHAT WE DO. Five counts, said once, at the top, before any result exists.
       It is the whole method in one line — how far a machine gets in, what we ask of
       what it found, who is asking, who in your business inherits the answer, and
       across what span of the data's life. Each one jumps to the block that proves it,
       so the strip is a table of contents as well as a claim. ──────────────────── */
.wd{max-width:1180px;margin:26px auto 0;display:grid;
  grid-template-columns:auto repeat(5,minmax(0,1fr));gap:0;align-items:stretch;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--well);overflow:hidden}
.wd-l{display:flex;align-items:center;padding:0 18px;font-size:9.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tx3);
  border-right:1px solid var(--line);background:var(--bg2);white-space:nowrap}
.wd a{display:block;padding:13px 16px;border-right:1px solid var(--line);text-decoration:none;
  color:var(--tx);transition:background .14s ease}
.wd a:last-child{border-right:0}
.wd a:hover{background:rgba(37,99,235,.10)}
.wd b{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1;
  display:block;margin-bottom:5px}
.wd span{font-size:11px;color:var(--tx2);line-height:1.35;display:block}
.wd a:hover span{color:var(--tx)}
@media(max-width:980px){.wd{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wd-l{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line);padding:10px 18px}}

.sc-trace{display:none;max-width:1180px;margin:22px auto 0;background:var(--well);
  border:1px solid var(--line);border-radius:var(--r-md);padding:16px 20px;text-align:left}
.sc-trace.on{display:block}
.sc-trace ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sc-trace li{display:flex;gap:14px;align-items:baseline;opacity:0;transform:translateY(3px)}
.sc-trace li.in{opacity:1;transform:none;transition:opacity .22s ease,transform .22s ease}
.sc-trace b{flex:none;min-width:190px;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx3)}
.sc-trace i{font-style:normal;color:var(--tx);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.sc-trace li.done i{color:var(--tx2)}
/* the working indicator — the reader must see that something is happening */
.sc-trace li.work i:after{content:"";display:inline-block;width:7px;height:7px;margin-left:9px;
  border-radius:50%;background:var(--acc);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.sc-bar{height:2px;background:var(--line);border-radius:2px;margin-top:14px;overflow:hidden}
.sc-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--focus));
  transition:width .45s ease}
/* ── the trace folds too. Both top elements collapse when the check finishes, so the
      top of the page is the result and not the machinery that produced it. Either one
      opens again on click — the eleven lines are never destroyed, only folded. ────── */
.sc-line{display:none;width:100%;background:none;border:0;color:var(--tx);font:inherit;
  text-align:left;padding:0;cursor:pointer;align-items:center;gap:14px;flex-wrap:wrap}
.sc-line b{flex:none;font-size:9.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx3)}
.sc-line span{font-size:12.5px;color:var(--tx2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.sc-line em{margin-left:auto;font-style:normal;font-size:11px;color:var(--tx3)}
.sc-line:hover span,.sc-line:hover em{color:var(--tx)}
/* the matching control. A fold that only opens is half a control — once either element
   has been folded once, it carries a Collapse button in its open state for the rest of
   the session, so the reader can put it away again as easily as they took it out. */
.fold{display:none;background:none;border:1px solid var(--line2);border-radius:8px;
  color:var(--tx3);font:inherit;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 11px;cursor:pointer}
.fold:hover{border-color:var(--acc);color:var(--tx)}
.sc-trace.done .fold{display:inline-block;margin-top:13px}
.pv.done .fold{display:inline-block;margin:0 18px 12px}
.sc-trace.tight .fold,.pv.tight .fold{display:none}
.sc-trace.tight{padding:11px 20px}
.sc-trace.tight ol,.sc-trace.tight .sc-bar{display:none}
.sc-trace.tight .sc-line{display:flex}

.sc-out{display:none;margin-top:22px} .sc-out.on{display:block}
#stage .pc-main{padding-bottom:0} #out{padding-top:0}

/* fast view of the result, before any of the deep blocks.
   The band gained a legend this round, so the right column now carries three things where
   it carried two. Every one of them gets its own air — a headline that has to be squinted
   at is not a fast view. */
.fast{display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:start;
  margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
@media(max-width:820px){.fast{grid-template-columns:1fr;gap:20px}}
.fast-n{display:flex;align-items:baseline;gap:12px;padding-top:2px}
.fast-n b{font-size:46px;font-weight:700;letter-spacing:-.03em;line-height:1}
.fast-n .pc-g{font-size:22px;align-self:center;margin-left:-2px}
.fast-n span{font-size:12.5px;color:var(--tx2);max-width:168px;line-height:1.4}
.fast-s{font-size:14.5px;line-height:1.7;color:var(--tx2);margin:16px 0 0}
.fast-s b{color:var(--tx);font-weight:600}

/* THE SPLIT, ON THE SURFACE. The band is the shape; this is the same shape in figures,
   in the same order, so the two are read against each other. Tabular numerals because a
   column of counts that shifts under its own digits is harder to compare than it looks. */
.fast-key{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:12px 0 0;padding:0}
.fast-key li{
  display:flex;align-items:center;gap:7px;padding:5px 10px 5px 8px;
  border:1px solid var(--line);border-radius:999px;background:var(--well);
  font-size:12px;color:var(--tx2);line-height:1
}
.fast-key .pc-g{font-size:12px}
.fast-key b{color:var(--tx);font-weight:700;font-size:13px}
.fast-key-pc{font-style:normal;color:var(--tx3);font-size:11px;font-variant-numeric:tabular-nums}

/* One read produces six measures. These are the five that were only ever stated further
   down the page — each one a count, a share, and a way into the block that derives it. */
.fast-tiles{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line)
}
@media(max-width:1080px){.fast-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.fast-tiles{grid-template-columns:1fr}}
.fst{
  display:block;padding:13px 14px 12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--well);text-decoration:none;color:inherit;
  transition:border-color .15s ease,background .15s ease
}
.fst:hover,.fst:focus-visible{border-color:var(--line2);background:var(--bg1)}
.fst-l{
  display:block;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tx3)
}
.fst-v{display:flex;align-items:baseline;gap:7px;margin-top:7px}
.fst-v b{font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--tx)}
.fst-v i{font-style:normal;font-size:11.5px;color:var(--tx3);font-variant-numeric:tabular-nums}
.fst-v .pc-g{font-size:13px;margin-left:auto;align-self:center}
/* the share the count is a share OF — thin, and absent rather than invented where there
   is no whole to be a part of */
.fst-m{
  display:block;height:5px;border-radius:999px;overflow:hidden;margin:9px 0 8px;
  background:rgba(245,247,250,.07)
}
.fst-m.off{background:transparent}
.fst-m i{display:block;height:100%;border-radius:999px}
.fst-s{display:block;font-size:11.5px;line-height:1.5;color:var(--tx2)}
/* four jurisdictions, four meters — the point is how differently the same nine questions
   land in four places, which four digits in a row do not show */
.fst-pm{display:grid;gap:4px}
.fst-pm i{display:grid;grid-template-columns:20px minmax(0,1fr) 14px;gap:6px;align-items:center}
.fst-pm b{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:var(--tx3)}
.fst-pm u{display:block;height:4px;border-radius:999px;background:rgba(245,247,250,.07);
  overflow:hidden;text-decoration:none}
.fst-pm s{display:block;height:100%;border-radius:999px;text-decoration:none}
.fst-pm em{font-style:normal;font-size:10.5px;color:var(--tx2);text-align:right;
  font-variant-numeric:tabular-nums}

/* THE RAIL — the headline, held in place once it has scrolled away. Fixed rather than
   sticky on purpose: a sticky element appearing mid-scroll reflows everything under it
   and the page jumps under the reader's eye at the exact moment they are reading it. */
.pc-rail{
  position:fixed;top:64px;left:0;right:0;z-index:59;cursor:pointer;
  background:#000;border-bottom:1px solid var(--line);
  transform:translateY(-101%);opacity:0;pointer-events:none;
  transition:transform .18s ease,opacity .18s ease
}
.pc-rail.on{transform:none;opacity:1;pointer-events:auto}
.pc-rail-in{
  max-width:1320px;margin-inline:auto;padding:0 28px;height:46px;
  display:flex;align-items:center;gap:18px
}
.pc-rail-id{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.pc-rail-id b{font-size:13px;font-weight:700;color:var(--tx);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-rail-id i{font-style:normal;font-size:10px;color:var(--tx3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-rail-n,.pc-rail-g{display:flex;align-items:baseline;gap:6px;flex:none;
  border-left:1px solid var(--line2);padding-left:18px}
.pc-rail-n b,.pc-rail-g b{font-size:19px;font-weight:700;line-height:1;letter-spacing:-.02em}
.pc-rail-g b{color:var(--tx)}
.pc-rail-n i,.pc-rail-g i{font-style:normal;font-size:10.5px;color:var(--tx3);
  font-variant-numeric:tabular-nums}
.pc-rail-n u,.pc-rail-g u{text-decoration:none;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx3)}
.pc-rail-n .pc-g{font-size:12px;align-self:center}
.pc-rail-b{flex:1;min-width:90px;max-width:260px}
.pc-rail-b .pc-band{height:7px}
.pc-rail-k{display:flex;align-items:center;gap:11px;flex:none}
.pc-rail-k i{display:flex;align-items:center;gap:4px;font-style:normal}
.pc-rail-k .pc-g{font-size:11px}
.pc-rail-k b{font-size:12.5px;font-weight:700;color:var(--tx)}
.pc-rail-up{margin-left:auto;flex:none;display:flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx3)}
.pc-rail-up u{text-decoration:none}
.pc-rail:hover .pc-rail-up{color:var(--acc)}
/* THE RAIL SHEDS RATHER THAN SCROLLS. Read sideways it is worse than absent, so as the
   screen narrows the pieces the page states again two screens down go first, in order of
   least loss. The domain and the headline count never go — they are the whole point. */
@media(max-width:1080px){.pc-rail-k{display:none}.pc-rail-in{gap:14px}}
@media(max-width:860px){.pc-rail-g{display:none}.pc-rail-up u{display:none}}
@media(max-width:620px){.pc-rail-b{display:none}}

/* a section reached from a stat tile must not land under the two sticky bars above it */
.pc-card[id^="sec"]{scroll-margin-top:130px}
/* a count and the glyph for the state it counts, always together — the colour never
   travels on its own, which is the rule the whole page is built on */
.cnt{display:flex;align-items:center;gap:9px}
.cnt .pc-g{font-size:15px}

/* ─── provenance: version is provenance, so it is always present — but it collapses
       to one line once the review has run, so the result owns the fold. ────────── */
.pv{border:1px solid var(--line);border-radius:var(--r-md);background:var(--well);
  overflow:hidden;margin-bottom:14px}
.pv-full{display:flex;flex-wrap:wrap;gap:0}
.pv-full div{padding:11px 18px;border-right:1px solid var(--line);flex:1 1 auto;min-width:150px}
.pv-full div:last-child{border-right:0}
.pv .k{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--tx3)}
.pv .v{font-size:13px;margin-top:3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--tx)}
.pv-line{display:none;width:100%;background:none;border:0;color:var(--tx);font:inherit;
  text-align:left;padding:9px 18px;cursor:pointer;align-items:center;gap:14px;flex-wrap:wrap}
.pv-line:hover{background:rgba(245,247,250,.03)}
.pv-line b{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tx3)}
.pv-line span{font-size:12.5px;color:var(--tx2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.pv-line em{margin-left:auto;font-style:normal;font-size:11px;color:var(--tx3)}
.pv.tight .pv-full{display:none} .pv.tight .pv-line{display:flex}

.sc-idhead{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.sc-idhead .pc-mono{width:46px;height:46px;border-radius:12px;font-size:16px}
.sc-idname{font-size:22px;font-weight:700;letter-spacing:-.02em}

/* ─── the always-visible limit ───────────────────────────────────────────── */
.dis{border-left:3px solid var(--acc);background:rgba(37,99,235,.07);border-radius:0 var(--r-md) var(--r-md) 0;
  padding:14px 18px;margin:14px 0;font-size:13px;color:var(--tx2)}
.dis b{color:var(--tx)}

/* ─── A CLOSED ROUTE, SAID BEFORE THE COUNT ──────────────────────────────────
   Deliberately heavier than .dis and deliberately above the big number. A
   Condition is the finding a count cannot carry — two gaps that together leave
   a reader with no way in — so it must not read as a footnote to the number it
   qualifies. It sits full width, in the red rail, ahead of the headline. */
.cnd{border:1px solid var(--sr);border-left:4px solid var(--sr);
  background:rgba(220,38,38,.06);border-radius:var(--r-md);
  padding:14px 18px;margin:0 0 16px}
.cnd-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cnd-h b{font-size:14.5px;color:var(--sr);letter-spacing:-.01em}
.cnd-a{font-size:11.5px;color:var(--tx3);margin:2px 0 0}
.cnd-l{font-size:13.5px;line-height:1.65;color:var(--tx2);margin:9px 0 0}
.cnd-p{display:grid;gap:7px;margin-top:12px}
.cnd-r{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;font-size:12px;
  background:var(--bg2);border-radius:var(--r-sm);padding:8px 11px;cursor:default}
.cnd-r b{font-weight:600;color:var(--tx)}
.cnd-r span.cnd-t{color:var(--tx3);flex:1;min-width:180px}
.jc-cnd{margin:8px 0 0;font-size:11px;font-weight:600;line-height:1.35;color:var(--sr);
  border:1px solid var(--sr);background:rgba(220,38,38,.08);
  border-radius:var(--r-sm);padding:6px 9px;text-align:left}
.cnd-go{display:inline-block;margin-top:11px;font-size:12px;color:var(--acc);
  text-decoration:none;border-bottom:1px solid transparent}
.cnd-go:hover{border-bottom-color:var(--acc)}

/* ─── WHERE THE DOCUMENTS ARE PUBLISHED ──────────────────────────────────────
   Same weight and same position as a Condition, because it is the same kind of
   thing: a finding the count cannot carry, printed ahead of the number rather
   than under it. A different rail colour on purpose — a Condition is a route
   that is closed, this is a route that leads somewhere else. Amber where a core
   document is published by a different company, because that is something the
   reader has to act on; neutral where it is the same name at another address or
   a supporting page, because that is an architecture note, not an exposure.
   No band glyph appears in here at all: the documents answered. */
.org{border:1px solid var(--sa);border-left:4px solid var(--sa);
  background:rgba(217,119,6,.06);border-radius:var(--r-md);
  padding:14px 18px;margin:0 0 16px}
.org.mild{border-color:var(--line);border-left-color:var(--tx3);background:var(--bg2)}
.org-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.org-h b{font-size:14.5px;color:var(--sa);letter-spacing:-.01em}
.org.mild .org-h b{color:var(--tx)}
.org-a{font-size:11.5px;color:var(--tx3);margin:2px 0 0}
.org-l{font-size:13.5px;line-height:1.65;color:var(--tx2);margin:9px 0 0}
.org-p{display:grid;gap:7px;margin-top:12px}
.org-r{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;font-size:12px;
  background:var(--bg1);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:8px 11px;cursor:default}
.org.mild .org-r{background:var(--bg1)}
.org-r b{font-weight:600;color:var(--tx)}
.org-k{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--tx3);border:1px solid var(--line2);border-radius:var(--r-sm);
  padding:1px 6px}
.org-r span.org-t{color:var(--tx3);flex:1;min-width:180px;word-break:break-all}

/* ─── THE FOUR PRIME JURISDICTIONS — the macro block ─────────────────────── */
.jz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:4px}
@media(max-width:1080px){.jz{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.jz{grid-template-columns:1fr}}
.jc{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 17px;
  cursor:pointer;transition:.15s;text-align:left;width:100%;color:var(--tx);font:inherit}
.jc:hover{border-color:var(--line2);background:#16233d}
.jc.open{border-color:var(--acc);background:linear-gradient(180deg,rgba(37,99,235,.10),transparent 70%),var(--bg2)}
.jc-t{display:flex;align-items:center;gap:9px}
.jc-f{font-size:19px;line-height:1;filter:saturate(.9)}
.jc-n{font-size:14px;font-weight:700;letter-spacing:-.01em}
.jc-r{margin-left:auto;font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums}
.jc-h{display:flex;align-items:baseline;gap:8px;margin:13px 0 9px}
.jc-h b{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1}
.jc-h span{font-size:12px;color:var(--tx2)}
.jc-w{font-size:11.5px;color:var(--tx3);margin-top:9px;line-height:1.45}
.jz-body{display:none;margin-top:12px;background:var(--well);border:1px solid var(--line);
  border-radius:var(--r-md);padding:16px 18px}
.jz-body.on{display:block}

/* ─── THE GATE FLOW MAP ──────────────────────────────────────────────────── */
/* THE SURFACE UNDER THE MAP IS FLAT, AND THAT IS A REQUIREMENT, NOT A PREFERENCE. Each
   step sits in a ring of this colour so the hatched band stops clear of it, and a ring can
   only be invisible against a flat surface — the radial gradient that used to be here is
   what made the band's own label look pasted on, because no fixed colour matches it.
   The padding is what the band and its labels stand off into: 46px above holds two lines
   (PATH STOPS HERE and the band's title) plus the 14px the band clears the badges by, and
   26px below holds the 14px it clears the state words by. */
.fm{position:relative;margin:26px 0 2px;padding:46px 16px 26px;
  background:var(--well);border-radius:var(--r-md)}
.fm-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;position:relative}
/* the connective tissue: one track behind the nodes, coloured up to the stop */
.fm-track{position:absolute;left:7%;right:7%;top:27px;height:3px;background:var(--line);border-radius:2px}
.fm-track i{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--sg),var(--sa) 62%,var(--sr));
  box-shadow:0 0 14px rgba(208,34,47,.45)}
.fm-n{position:relative;text-align:center;padding:0 4px;cursor:pointer;background:none;border:0;
  color:var(--tx);font:inherit}
/* THE SHADING IS THE SPACE BETWEEN THE STEPS, NEVER THE STEPS THEMSELVES. Two things kept
   it running into them: every badge fill is translucent, so the hatch showed through the
   block itself, and the band ran flush to the badge with nothing between. So each state
   lays its colour over the surface rather than letting the surface through, and the badge
   carries a 7px ring of that surface — the gap the band stops at. */
.fm-d{width:56px;height:56px;margin:0 auto;border-radius:16px;background:var(--bg2);
  border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--tx2);position:relative;
  transition:.16s;z-index:2;box-shadow:0 0 0 7px var(--well)}
.fm-n:hover .fm-d{border-color:var(--focus);transform:translateY(-2px)}
.fm-n.pass .fm-d{background:linear-gradient(rgba(12,163,12,.12),rgba(12,163,12,.12)),var(--well);
  border-color:rgba(12,163,12,.55);color:var(--sg)}
.fm-n.part .fm-d{background:linear-gradient(rgba(250,178,25,.12),rgba(250,178,25,.12)),var(--well);
  border-color:rgba(250,178,25,.55);color:var(--sa)}
.fm-n.stop .fm-d{background:linear-gradient(rgba(208,34,47,.16),rgba(208,34,47,.16)),var(--well);
  border-color:var(--sr);color:var(--sr);
  box-shadow:0 0 0 7px var(--well),0 0 0 12px rgba(208,34,47,.14),0 10px 30px rgba(208,34,47,.30)}
.fm-n.dead .fm-d{background:var(--well);border-style:dashed;border-color:var(--line);color:var(--tx3)}
.fm-t{font-size:12.5px;font-weight:600;margin-top:10px}
.fm-s{font-size:11px;margin-top:4px;display:flex;align-items:center;gap:5px;justify-content:center}
.fm-n.dead .fm-t,.fm-n.dead .fm-s{opacity:.5}
/* on the same line as the band's title, so the two labels above the row read as a pair —
   both sit clear above the band's dashed top edge, neither touches it */
.fm-flag{position:absolute;left:50%;transform:translateX(-50%);top:-34px;font-size:9.5px;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sr);white-space:nowrap}
/* Everything past the stop is untested, and the page says so in the gap itself.
   The LEFT EDGE IS SET INLINE by compGates from the gate the chain actually stopped on —
   it used to be pinned at 42.857% (after G3) whatever the read found, so a site that
   stopped at G1 got a band drawn through the middle of G4. It encloses the whole column,
   badge and name and state word together, rather than cutting the badges in half. */
/* It stands OFF the row it encloses — 14px clear above the badges and 14px below the state
   words — so the dashed edge never runs up against the content it is describing. */
.fm-after{position:absolute;top:-14px;bottom:-14px;right:4px;
  border:1px dashed rgba(208,34,47,.32);border-radius:14px;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(135deg,rgba(208,34,47,.05) 0 6px,transparent 6px 13px)}
/* THE LABEL SITS ABOVE THE BAND, NOT ON ITS BORDER. It used to straddle the top edge and
   mask the dashed line with var(--bg1) — but this block sits on the card surface under a
   radial gradient, so no flat colour matches it and the border drew through the words.
   Above the box there is nothing to mask: the row's own top padding is the space for it. */
.fm-after span{position:absolute;bottom:100%;margin-bottom:8px;left:50%;
  transform:translateX(-50%);white-space:nowrap;
  font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3)}
/* the nodes sit above the band, never inside its hatching */
.fm-row .fm-n{z-index:1}

/* per-document swim lanes, on the same seven columns */
.lane{margin-top:26px;border-top:1px solid var(--line);padding-top:16px}
.lane-r{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer}
.lane-r:last-child{border-bottom:0}
.lane-r:hover{background:rgba(245,247,250,.03)}
.lane-l b{font-size:12.5px;font-weight:600;display:block}
.lane-l span{font-size:11px;color:var(--tx3)}
.lane-t{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;align-items:center}
.lane-c{height:9px;border-radius:3px;background:rgba(245,247,250,.06)}
.lane-c.on{background:var(--sg)} .lane-c.part{background:var(--sa)}
.lane-c.end{background:var(--sr);box-shadow:0 0 10px rgba(208,34,47,.5)}
.lane-c.na{background:transparent;border:1px dashed var(--line)}
.lane-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:11.5px;color:var(--tx2)}
.lane-key i{display:inline-block;width:20px;height:8px;border-radius:3px;margin-right:6px;
  vertical-align:middle}
/* the count of documents that never finished the chain, beside the map's own title — the
   map draws it as a red cell somewhere in a grid of thirty-five, which is a finding a
   reader has to hunt for rather than one the block states */
.lane-gap{margin-left:10px;font-size:10px;font-weight:700;letter-spacing:.04em;
  white-space:nowrap;padding:2px 7px;border-radius:999px;border:1px solid currentColor;
  text-transform:none}
.lane-gap.red{color:var(--sr);background:rgba(208,34,47,.14)}
.lane-h{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px;padding-bottom:8px}
/* The headings carry gate NAMES now, not two-character codes, so the tracking that made
   "G3" read as a label has to come off or "Qualification" overflows its seventh of the row.
   Wrapping to two lines is fine; a heading clipped mid-word is not. */
.lane-h .lane-t span{font-size:9.5px;font-weight:700;letter-spacing:.02em;line-height:1.2;
  color:var(--tx3);text-align:center;overflow-wrap:anywhere}

/* ─── THE LIFECYCLE FLOW, WITH THE THREE LENSES AS LANES ─────────────────── */
.lf{margin-top:18px}
/* one 232px label gutter shared by the stage row and every lens lane, so they line up.
   232, not 150, because the three lens names now say what each reader is actually
   looking for and a name that wraps to three lines stops being a label. */
.lf-row{display:grid;grid-template-columns:232px repeat(12,minmax(0,1fr));gap:4px;
  position:relative;align-items:stretch}
.lf-lead{display:flex;flex-direction:column;justify-content:center;padding-right:12px;cursor:help}
.lf-lead b{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx3);display:block}
.lf-lead span{font-size:11px;color:var(--tx3);margin-top:4px}
/* the connective tissue between stages, drawn in the 4px gutter */
.lf-s+.lf-s:before{content:"";position:absolute;left:-6px;top:50%;width:8px;height:1px;
  background:var(--line2)}
.lf-s{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:9px 5px 8px;
  text-align:center;cursor:pointer;transition:.14s;position:relative;color:var(--tx);font:inherit}
.lf-s:hover{border-color:var(--focus);transform:translateY(-2px)}
.lf-s.red{border-color:rgba(208,34,47,.5);background:rgba(208,34,47,.10)}
.lf-s.amber{border-color:rgba(250,178,25,.4);background:rgba(250,178,25,.07)}
.lf-s.green{border-color:rgba(12,163,12,.35)}
.lf-k{font-size:9.5px;font-weight:700;color:var(--tx3)}
.lf-l{font-size:9.5px;color:var(--tx2);margin-top:5px;line-height:1.25;min-height:23px}
.lf-g{margin-top:7px;padding-top:7px;border-top:1px solid var(--line)}
/* THE STATE, SAID AS A MARK AND NOT ONLY AS A COLOUR. A tinted block reads as decoration
   at this size, so each stage closes with its band glyph in a filled chip under a hairline
   — the glyph is the five-word vocabulary (never a tick or a cross, which would say Pass
   and Fail, the two words the method does not use). */
.lf-g .pc-g{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;
  font-size:10px;line-height:1;border:1px solid currentColor}
.lf-g .pc-g.red{background:rgba(208,34,47,.16)}
.lf-g .pc-g.amber{background:rgba(250,178,25,.16)}
.lf-g .pc-g.green{background:rgba(12,163,12,.14)}
.lf-g .pc-g.blue{background:rgba(45,120,245,.14)}
.lf-g .pc-g.grey{background:rgba(245,247,250,.07)}
/* the lens lanes: which stages each lens actually reads */
.lf-lane{display:grid;grid-template-columns:232px repeat(12,minmax(0,1fr));gap:4px;
  align-items:center;margin-top:10px}
.lf-lane-n{font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:7px;
  flex-wrap:wrap;padding-right:12px;line-height:1.3;cursor:help}
/* The three lenses are three READERS, not three verdicts. They wear one identity hue that
   is not in the signal set, and they are told apart by their letter tag and their name —
   never by a traffic-light colour, which on this page always means a state. */
.lf-lane-n i{width:18px;height:18px;border-radius:6px;flex:none;display:grid;
  place-items:center;font-size:10px;font-weight:800;font-style:normal;
  background:currentColor;color:inherit;box-shadow:0 0 0 1px currentColor}
.lf-lane-n i::after{content:attr(data-t);color:#05070D}
/* A LANE MARK CARRIES THE STAGE'S STATE. It used to be filled in the READER'S identity hue
   with the state reduced to a 9.5px glyph inside it, so a lane of stages nobody has written
   down read as a full bar of solid teal — the reader's interest painted as though it were a
   result. Identity and state never swap places on this page: the reader is the letter chip
   and the name at the left of the lane, and the block is the stage's own band. Where a
   reader does not read a stage the cell stays blank, because an empty cell is a fact about
   the reader and not about the company. */
.lf-m{height:17px;border-radius:4px;background:rgba(245,247,250,.05);cursor:help;
  display:grid;place-items:center;font-size:9.5px;line-height:1}
.lf-m:hover{outline:1px solid var(--focus);outline-offset:2px}
.lf-m.on{opacity:.95}
.lf-m.on.red{background:var(--sr)} .lf-m.on.amber{background:var(--sa)}
.lf-m.on.green{background:var(--sg)} .lf-m.on.blue{background:var(--sb)}
.lf-m.on.grey{background:var(--sy)}
.lf-m .lf-mg{font-weight:700}
.lf-m.on .lf-mg{color:#05070D}
/* the lane's own band, on its own line under the reader it belongs to — beside the name it
   competed for the 232px label column and forced the longer reader names to wrap four deep */
.lf-lane-b{flex-basis:100%;margin-left:25px;width:fit-content;font-size:10px;font-weight:700;
  letter-spacing:.04em;white-space:nowrap;padding:2px 7px;border-radius:999px;
  border:1px solid currentColor}
.lf-lane-b.red{color:var(--sr);background:rgba(208,34,47,.14)}
.lf-lane-b.amber{color:var(--sa);background:rgba(250,178,25,.14)}
.lf-lane-b.green{color:var(--sg);background:rgba(12,163,12,.13)}
.lf-lane-b.blue{color:var(--sb);background:rgba(45,120,245,.13)}
.lf-lane-b.grey{color:var(--sy);background:rgba(245,247,250,.07)}
.lf-lane-c{font-size:11px;color:var(--tx3);grid-column:2/-1;margin-top:5px;padding-left:1px}

/* the lens panel header — the three business areas have to carry weight, so the tag is
   large and solid rather than a hairline rule */
.lens-h{display:flex;align-items:flex-start;gap:14px;padding:14px 16px 14px 14px;
  border-radius:var(--r-md);border:1px solid currentColor;
  background:linear-gradient(90deg,color-mix(in srgb,currentColor 13%,transparent),
    color-mix(in srgb,currentColor 3%,transparent));margin-bottom:4px}
.lens-h h3{font-size:16px;margin:0;color:var(--tx);letter-spacing:-.01em}
.lens-t{width:34px;height:34px;flex:none;border-radius:9px;background:currentColor;
  display:grid;place-items:center;font-size:16px;font-weight:800;margin-top:1px}
.lens-t::after{content:attr(data-t);color:#05070D}
/* THE BAND THIS READER INHERITS, on the panel that names them. The three panels used to be
   titles with no verdict at all, so four mixed rows underneath were the only summary a
   reader got and the section read kinder than the headline it came from. The chip wears the
   band colour, never the reader's identity hue — the identity is the letter tag beside it. */
.lens-b{margin-left:auto;flex:none;display:flex;flex-direction:column;align-items:flex-end;
  gap:2px;text-align:right;padding-left:14px}
.lens-b .pc-g{font-size:15px;line-height:1}
.lens-b b{font-size:13px;letter-spacing:-.01em;white-space:nowrap}
.lens-b span:last-child{font-size:10.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tx3);white-space:nowrap}
.lens-b.red{color:var(--sr)} .lens-b.amber{color:var(--sa)}
.lens-b.green{color:var(--sg)} .lens-b.blue{color:var(--sb)}
.lens-b.grey{color:var(--sy)}

/* ─── expandable rows. NO POPUPS ANYWHERE ON THIS PAGE. ──────────────────── */
.ex{border-bottom:1px solid var(--line)}
.ex:last-child{border-bottom:0}
.ex-h{display:grid;grid-template-columns:30px minmax(0,1fr) auto 22px;gap:14px;align-items:center;
  padding:13px 4px;cursor:pointer;width:100%;background:none;border:0;color:var(--tx);
  font:inherit;text-align:left}
.ex-h:hover{background:rgba(245,247,250,.035)}
.ex-n{width:26px;height:22px;border-radius:6px;background:var(--bg2);border:1px solid var(--line2);
  font-size:10px;font-weight:700;color:var(--tx3);display:flex;align-items:center;justify-content:center}
.ex-l{font-size:13.5px;font-weight:600}
.ex-g{font-size:11px;color:var(--tx3);margin-top:2px}
.ex-x{color:var(--tx3);font-size:13px;transition:transform .18s ease}
.ex.on .ex-x{transform:rotate(90deg)}
.ex-b{display:none;padding:2px 4px 20px 48px}
.ex.on .ex-b{display:block}
.why{border-left:2px solid var(--acc);padding:3px 0 3px 14px;margin-bottom:14px;
  font-size:13px;color:var(--tx2)}
.why b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:5px;color:var(--tx3)}
.kv{display:grid;gap:0}
.kv div{display:grid;grid-template-columns:190px minmax(0,1fr);gap:14px;padding:7px 0;
  border-bottom:1px solid var(--line);font-size:12.5px}
.kv div:last-child{border-bottom:0}
.kv span:first-child{color:var(--tx3)}

/* the narrative paragraph — the thing self-check does that nothing else does */
.narr{font-size:14px;line-height:1.65;color:var(--tx2);margin:14px 0 0}
.narr b{color:var(--tx);font-weight:600}

.wow-n{display:flex;align-items:baseline;gap:14px;margin:14px 0 12px;flex-wrap:wrap}
.wow-n b{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1}
.wow-n span{font-size:15px;color:var(--tx2);font-weight:600}

/* the peer block's own finding, stated above the five rows instead of left to be counted
   off them. Tinted panel rather than a chip, because it is a sentence and not a label. */
.peer-lead{display:flex;align-items:center;gap:9px;margin:0 0 4px;padding:9px 12px;
  border-radius:var(--r-sm);font-size:12.5px;font-weight:600;line-height:1.35}
.peer-lead .pc-g{font-size:14px;line-height:1}
.peer-lead.red{color:var(--sr);background:rgba(208,34,47,.10);
  border:1px solid rgba(208,34,47,.30)}
.peer-lead.amber{color:var(--sa);background:rgba(250,178,25,.10);
  border:1px solid rgba(250,178,25,.30)}
.peer-lead.green{color:var(--sg);background:rgba(12,163,12,.09);
  border:1px solid rgba(12,163,12,.28)}
.peer-r{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line)}
.peer-r:last-child{border-bottom:0}
.pips{display:flex;gap:4px}
.pip{width:26px;height:9px;border-radius:3px;background:rgba(245,247,250,.08)}
.pip.on{background:var(--sg)} .pip.off{background:rgba(245,247,250,.10)}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:6px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
.step{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-md);padding:15px}
.step.now{border-color:var(--acc);background:linear-gradient(180deg,rgba(37,99,235,.10),transparent 70%),var(--bg2)}
.step{position:relative}
.step b{font-size:12.5px;display:inline-block;margin-bottom:5px;padding-right:22px}
.step>.pc-i{position:absolute;top:12px;right:12px}
.step p{margin:0;font-size:11.5px;color:var(--tx3);line-height:1.45}
.step .sn{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--tx3);display:block;margin-bottom:7px}

.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media(max-width:960px){.grid-2{grid-template-columns:minmax(0,1fr)}
  .fm-row{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:22px}.fm-track,.fm-after{display:none}
  .lane-r,.lane-h{grid-template-columns:1fr}.lf-row{grid-template-columns:repeat(6,minmax(0,1fr))}
  .lf-lane,.lf-lane-t,.lf-arrows{grid-template-columns:1fr}.lf-lane-t{display:none}}

/* countries, origins and weights — flags read faster than words, so the flag sits
   beside the name and never replaces it */
.cty{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.cty .pc-chip{white-space:nowrap}
.cty .pc-chip.dest{border-color:rgba(251,113,133,.42)}
.cty .pc-chip.ops{border-color:rgba(192,132,252,.42)}
.cty .pc-chip.named{border-style:dashed;color:var(--tx3)}
.cty-h{display:flex;align-items:baseline;gap:8px;font-size:12px;font-weight:600;flex-wrap:wrap}
.cty-h em{font-style:normal;font-weight:400;color:var(--tx3)}
.cty-h b{margin-left:auto;font-variant-numeric:tabular-nums}

/* the weight of a point, per lens — authored severity, hashed into the rule set id */
.wt{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;
  border:1px solid var(--line2);color:var(--tx2);cursor:help}
.wt i{width:7px;height:7px;border-radius:2px;display:block;font-style:normal}
.wt.s i{background:var(--lens-s)} .wt.o i{background:var(--lens-o)} .wt.r i{background:var(--lens-r)}
.wt.critical{color:var(--sr);border-color:rgba(248,113,113,.42)}
.wt.high{color:var(--sa);border-color:rgba(251,191,36,.38)}
.wt.moderate{color:var(--tx2)} .wt.low{color:var(--tx3)}
.wts{display:inline-flex;gap:5px;flex-wrap:wrap;align-items:center}
.wt-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.rate{margin-left:2px;font-size:11px;color:var(--tx3);font-variant-numeric:tabular-nums;cursor:help}
.rate b{color:var(--tx2);font-weight:600}