/* Safe Perimeter - BB2G brand-kit tokens (ivory / gold / navy).
   House rules that are load-bearing here:
   - On ivory, gold is a RULE and a MARK, never a word. Gold text uses --goldink.
   - The gray ramp stays NEUTRAL. A gold-tinted ramp makes every page read brown.
   - Red is urgent only. Nothing decorative is red.
   - No inline style attributes anywhere: production CSP strips them. */
:root{
  --cream:#f7f1e3; --cream2:#efe6d1; --card:#fffdf8; --panel:#faf5ea;
  --line:#e6d9bc; --line2:#d8c79f;
  --ink:#1c2333; --sub:#4d576b; --muted:#6b7789;
  --navy:#16294a; --navy2:#1f3a68; --blue:#3a5da9;
  --gold:#b8860b; --gold2:#caa12e; --gold3:#e4cd84; --goldsoft:#f3e8c6; --goldink:#7a5c12;
  --red:#b22234; --redsoft:#f7dfe2; --good:#2e8b60; --warn:#c08a1e; --hot:#c96a1f;
  --serif:Georgia,"Palatino Linotype","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --wrap:76rem; --narrow:46rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1.0625rem/1.65 var(--sans)}
img,video{max-width:100%;display:block}
a{color:var(--navy2);text-decoration-color:var(--line2);text-underline-offset:.18em}
a:hover{text-decoration-color:var(--gold)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}
.narrow{max-width:var(--narrow)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--navy);line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.6vw,3.1rem);letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,2.8vw,2.05rem);margin-top:2.4rem}
h3{font-size:1.2rem;margin-top:1.8rem}
p{margin:0 0 1.1rem}
.lede{font-size:1.19rem;color:var(--sub)}
.kicker{font:700 .74rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin:0 0 .9rem;display:flex;align-items:center;gap:.7rem}
.kicker::after{content:"";flex:0 0 2.5rem;height:2px;background:var(--gold)}
/* ---- header ---- */
.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.top .wrap{display:flex;align-items:center;gap:1rem;min-height:3.9rem;flex-wrap:wrap}
.brand{font-family:var(--serif);font-size:1.14rem;color:var(--navy);text-decoration:none;font-weight:700;white-space:nowrap}
.brand span{display:block;font:700 .6rem/1 var(--sans);letter-spacing:.24em;color:var(--muted);text-transform:uppercase;margin-top:.28rem}
.nav{display:flex;gap:.15rem;flex-wrap:wrap;margin-left:auto}
.nav a{font:600 .82rem/1 var(--sans);color:var(--sub);text-decoration:none;padding:.5rem .58rem;border-radius:2px;white-space:nowrap}
.nav a:hover{background:var(--panel);color:var(--navy)}
.nav a[aria-current="page"]{color:var(--navy);box-shadow:inset 0 -2px 0 var(--gold)}
/* ---- full-bleed loop band ---- */
.bleed{position:relative;min-height:clamp(20rem,46vh,30rem);display:flex;align-items:flex-end;overflow:hidden;background:var(--navy)}
.bleed.tall{min-height:clamp(26rem,66vh,40rem)}
.bleed video,.bleed img.plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.bleed .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,14,28,.30) 0%,rgba(8,14,28,.52) 42%,rgba(8,14,28,.86) 100%)}
.bleed .inner{position:relative;z-index:2;width:100%;padding:3rem 0 2.3rem}
.bleed h1,.bleed h2,.bleed p{color:#fff}
.bleed h1,.bleed h2{text-shadow:0 2px 18px rgba(0,0,0,.55)}
.bleed p{color:#eef1f7;max-width:42rem;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.bleed .kicker{color:#e4cd84}
.bleed .kicker::after{background:var(--gold3)}
.bleed .credit{position:absolute;right:.85rem;bottom:.5rem;z-index:3;font:400 .68rem/1.4 var(--sans);color:rgba(255,255,255,.72);text-align:right;max-width:22rem}
.bleed .credit a{color:rgba(255,255,255,.85)}
/* ---- blocks ---- */
main{padding-bottom:4rem}
section.pad{padding:3rem 0}
.card{background:var(--card);border:1px solid var(--line);padding:1.5rem}
.panel{background:var(--panel);border:1px solid var(--line);padding:1.5rem}
.grid{display:grid;gap:1.1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.rule{height:1px;background:var(--line);border:0;margin:2.6rem 0}
.note{border-left:3px solid var(--gold);background:var(--panel);padding:1rem 1.2rem;margin:1.4rem 0}
.note.finding{border-left-color:var(--red);background:var(--redsoft)}
.note.finding strong{color:var(--red)}
.note h4{margin:0 0 .4rem;font-size:1.02rem}
.tag{display:inline-block;font:700 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:.38rem .55rem;border:1px solid var(--line2);color:var(--sub);background:var(--card)}
.tag.t1{border-color:#b9c6d8;color:var(--navy2)}
.tag.t2{border-color:var(--gold2);color:var(--goldink)}
.tag.t3{border-color:var(--hot);color:var(--hot)}
.tag.t4{border-color:var(--red);color:var(--red)}
.tag.ok{border-color:var(--good);color:var(--good)}
table{width:100%;border-collapse:collapse;font-size:.94rem;margin:1.2rem 0}
th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font:700 .72rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--line2)}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
code,kbd{font-family:var(--mono);font-size:.9em;background:var(--panel);padding:.12em .35em;border:1px solid var(--line)}
pre{font-family:var(--mono);font-size:.84rem;line-height:1.55;background:#12203a;color:#dfe6f2;padding:1rem 1.1rem;overflow-x:auto;border:1px solid var(--navy)}
pre code{background:none;border:0;color:inherit;padding:0}
.src{font-size:.83rem;color:var(--muted);margin-top:.35rem}
.src a{color:var(--sub)}
ul.clean{list-style:none;padding:0;margin:0 0 1.1rem}
ul.clean li{padding-left:1.3rem;position:relative;margin-bottom:.55rem}
ul.clean li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:1px;background:var(--gold)}
/* ---- instruments ---- */
.tool{border:1px solid var(--line2);background:var(--card);margin:1.8rem 0}
.tool > header{background:var(--navy);color:#fff;padding:.85rem 1.2rem;display:flex;gap:.8rem;align-items:baseline;flex-wrap:wrap}
.tool > header h3{color:#fff;margin:0;font-size:1.06rem}
.tool > header .what{font:400 .84rem/1.4 var(--sans);color:#c3cfe4}
.tool .body{padding:1.3rem}
.ctl{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin-bottom:1.2rem;align-items:end}
.ctl label{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;font:700 .72rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.ctl label .val{flex:0 0 auto}
.ctl input[type=range]{width:100%;accent-color:var(--navy2)}
.ctl select,.ctl input[type=number]{width:100%;font:400 .95rem var(--sans);padding:.45rem .5rem;border:1px solid var(--line2);background:var(--card);color:var(--ink)}
.ctl .val{font:700 1.05rem/1.2 var(--mono);color:var(--navy)}
.out{background:var(--panel);border:1px solid var(--line);padding:1.1rem}
.big{font:700 2rem/1.1 var(--serif);color:var(--navy);margin:0}
.big.warnc{color:var(--hot)} .big.badc{color:var(--red)} .big.okc{color:var(--good)}
.why{font-size:.9rem;color:var(--sub);margin:.6rem 0 0}
.why li{margin-bottom:.3rem}
.readout{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
.readout .k{font:700 .68rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.readout .v{font:700 1.3rem/1.15 var(--mono);color:var(--navy)}
/* ---- check page ---- */
.checks{font-size:.93rem}
.checks .row{display:flex;gap:.8rem;padding:.55rem .2rem;border-bottom:1px solid var(--line);align-items:flex-start}
.checks .st{flex:0 0 4.1rem;font:700 .7rem/1.5 var(--sans);letter-spacing:.1em}
.checks .pass .st{color:var(--good)} .checks .fail .st{color:var(--red)}
.checks .fail{background:var(--redsoft)}
/* ---- footer ---- */
footer.site{background:var(--navy);color:#c8d3e6;padding:2.6rem 0 2rem;font-size:.9rem}
footer.site a{color:#e4cd84}
footer.site .fgrid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
footer.site h4{color:#fff;font-size:.94rem;margin:0 0 .6rem}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:.35rem}
footer.site .base{border-top:1px solid rgba(255,255,255,.16);margin-top:1.8rem;padding-top:1.2rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;color:#93a3bd;font-size:.82rem}
.tagline{font:700 .7rem/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:#e4cd84}
/* ---- misc ---- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:.5rem;top:.5rem;position:fixed;z-index:99;background:var(--card);padding:.6rem .9rem;border:2px solid var(--navy)}
.crumbs{font-size:.82rem;color:var(--muted);padding:1rem 0 0}
.crumbs a{color:var(--sub)}
.pagenav{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.4rem;margin-top:2.6rem}
.pagenav a{font:600 .95rem var(--sans);text-decoration:none;color:var(--navy2)}
.pagenav a:hover{text-decoration:underline}
h2[id],h3[id],section[id]{scroll-margin-top:5rem}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{
  .top,.nav,footer.site,.bleed video,.pagenav,.skip{display:none!important}
  body{background:#fff;font-size:11pt}
  .bleed{min-height:auto;background:none}
  .bleed .scrim{display:none} .bleed h1,.bleed h2,.bleed p{color:#000;text-shadow:none}
  .bleed .inner{padding:0}
  a{color:#000}
  pre{background:#f4f4f4;color:#000;border:1px solid #ccc}
}
@media (max-width:640px){
  .top .wrap{min-height:auto;padding-top:.6rem;padding-bottom:.5rem}
  .nav{margin-left:0;width:100%}
  .nav a{padding:.42rem .45rem;font-size:.78rem}
  .bleed .credit{position:static;text-align:left;padding:.5rem 1.25rem .8rem;max-width:none;color:rgba(255,255,255,.66)}
  .bleed{align-items:stretch;flex-direction:column;justify-content:flex-end}
}
/* ---- drawn diagram ---- */
.diagram{width:100%;height:auto;border:1px solid var(--line);background:var(--card);margin:1.2rem 0}
.readout .v.mono{font-size:.86rem;word-break:break-all;line-height:1.4}
.ctl input[type=text]{width:100%;font:400 .86rem var(--mono);padding:.45rem .5rem;border:1px solid var(--line2);background:var(--card);color:var(--ink)}
/* ---- specification tables ---- */
.specsec{margin-top:2.6rem}
table.reqs td:first-child{white-space:nowrap;width:1%}
table.reqs td:nth-child(2){white-space:nowrap;width:1%}
table.reqs code{background:none;border:0;padding:0;color:var(--navy2);font-weight:700}
table.reqs tr:target{background:var(--goldsoft)}
@media print{ .specsec{break-inside:auto} table.reqs tr{break-inside:avoid} .note{border-left:3px solid #999} }
/* ---- a sourced figure and its citation ---- */
.figure{display:inline}
.figure strong{color:var(--navy);font-weight:700}
/* ---- the film, and its transcript ---- */
.filmwrap{background:var(--navy);border:1px solid var(--line2);line-height:0;margin:0 0 .6rem}
.filmvid{width:100%;height:auto;display:block;background:#000}
.filmvid::cue{font-family:var(--sans);font-size:.9em;background:rgba(22,41,74,.88);color:#f7f1e3}
.transcript{list-style:none;padding:0;margin:1.4rem 0 1.1rem;border-top:1px solid var(--line)}
.tline{display:flex;gap:1.1rem;padding:.85rem .2rem;border-bottom:1px solid var(--line);align-items:baseline}
.tstamp{flex:0 0 3rem;font:700 .8rem/1.6 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.ttext{flex:1 1 auto}
.tcue{display:block;font:700 .66rem/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--goldink);margin-bottom:.4rem}
@media print{ .filmwrap{display:none} .tline{break-inside:avoid} }

/* ===== Operation Angels network lockup ===== */
:root{--ap-teal:#0B5A55;--ap-teal2:#5AA6A0;--ap-cream:#F6F2EA}
.aplock{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  padding:.34rem .6rem .34rem .38rem;border:1px solid var(--line2);border-radius:999px;
  background:var(--ap-cream);transition:border-color .18s,background .18s}
.aplock:hover{border-color:var(--ap-teal2);background:#fff}
.aplock img{display:block;border-radius:5px;flex:0 0 auto}
.aplock span{display:block;font:400 .66rem/1.25 var(--sans);color:var(--muted)}
.aplock span b{display:block;font:700 .74rem/1.2 var(--sans);letter-spacing:.02em;color:var(--ap-teal)}
.apfoot{display:flex;align-items:flex-start;gap:.7rem;text-decoration:none;margin-top:1.1rem;
  padding-top:1rem;border-top:1px solid rgba(255,255,255,.16)}
.apfoot img{display:block;border-radius:6px;flex:0 0 auto}
.apfoot span{display:block;font:400 .8rem/1.5 var(--sans);color:#c8d3e6}
.apfoot span b{display:block;font-weight:700;color:#fff;margin-bottom:.2rem}
.apfoot:hover span b{color:#94D0CA}
@media (max-width:900px){.aplock span{display:none}.aplock{padding:.3rem;border-radius:9px}}

/* ===== full-bleed moving images ===== */
.bleed{min-height:clamp(24rem,62vh,36rem)}
.bleed.tall{min-height:clamp(32rem,86vh,54rem)}
.bleed video,.bleed img.plate{transform:scale(1.06);transform-origin:52% 46%;
  animation:apdrift 34s ease-in-out infinite alternate}
@keyframes apdrift{from{transform:scale(1.045) translate3d(0,0,0)}
  to{transform:scale(1.115) translate3d(-1.1%,-1.4%,0)}}
.bleed.tall .inner{padding:4.4rem 0 3rem}
.bleed .scrim{background:
  radial-gradient(120% 88% at 18% 82%,rgba(8,14,28,.80) 0%,rgba(8,14,28,.34) 58%,rgba(8,14,28,.12) 100%),
  linear-gradient(180deg,rgba(8,14,28,.30) 0%,rgba(8,14,28,.46) 40%,rgba(8,14,28,.88) 100%)}
.bleed.tall h1{font-size:clamp(2.3rem,5.4vw,4.3rem);line-height:1.03;letter-spacing:-.015em}
@media (prefers-reduced-motion:reduce){
  .bleed video,.bleed img.plate{animation:none;transform:none}}
@media (max-width:640px){
  .bleed{min-height:clamp(22rem,58vh,30rem)}
  .bleed.tall{min-height:clamp(28rem,74vh,40rem)}
  .bleed.tall .inner{padding:2.6rem 0 1.9rem}}

/* ===== Operation Angels leads ===== */
.oarail{background:var(--ap-teal);color:var(--ap-cream);position:relative;z-index:41}
.oarail .wrap{display:flex;align-items:center;gap:1rem;min-height:3.05rem;flex-wrap:wrap}
.oabrand{display:inline-flex;align-items:center;gap:.62rem;text-decoration:none}
.oabrand img{display:block;border-radius:6px;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(246,242,234,.34)}
.oabrand span{display:block;font:600 .61rem/1 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(246,242,234,.68)}
.oabrand span b{display:block;font:700 1.06rem/1.1 var(--serif);letter-spacing:.005em;
  text-transform:none;color:var(--ap-cream);margin-bottom:.24rem}
.oabrand:hover span b{color:#fff}
.oaway{display:flex;align-items:center;gap:.52rem;margin:0 0 0 auto;
  font:600 .68rem/1 var(--sans);letter-spacing:.17em;text-transform:uppercase}
.oaway span{color:rgba(246,242,234,.58);white-space:nowrap}
.oaway span+span::before{content:"\00B7";margin-right:.52rem;color:rgba(246,242,234,.34)}
.oaway span.on{color:#fff}
.oaway span.on b{font-weight:600;padding-bottom:.17rem;box-shadow:inset 0 -2px 0 var(--gold3)}
.top{top:0}
.brand span{color:var(--ap-teal);letter-spacing:.19em}
.apfoot.lead{margin-top:0;padding-top:0;border-top:0;margin-bottom:1.15rem;align-items:center}
.apfoot.lead span b{font:700 1.12rem/1.15 var(--serif);margin-bottom:.16rem}
.apfoot.lead span{font-size:.78rem}
@media (max-width:640px){
  .oarail .wrap{min-height:2.7rem;gap:.55rem;padding-top:.45rem;padding-bottom:.45rem}
  .oabrand span b{font-size:.98rem}
  .oaway{margin-left:0;width:100%;font-size:.6rem;letter-spacing:.14em}
}

/* ===== part-additions.css ===== */
/* Safe Perimeter - Anchored Zone Assessment Part C.
   Owned by /additions/ and /evaluation/. Concatenated into site.css by
   build.mjs. Every selector here is prefixed ad- so that nothing in this file
   can collide with a class another partial owns; the classes gate fails the
   build if two files declare the same bare rule, and it has caught that before.
   No inline style attributes exist on either page: the production CSP strips
   them, so everything those pages need is here. */

/* ---- a recommendation this site has already implemented, marked as such ---- */
.ad-done{border:2px solid var(--good);background:var(--card);padding:1.2rem 1.4rem;margin:1.6rem 0}
.ad-done h4{margin:0 0 .5rem;color:var(--good);font-size:1.05rem}
.ad-done p{margin:0 0 .7rem}
.ad-done p:last-child{margin-bottom:0}
.ad-done .ad-where{font:700 .7rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.ad-done .ad-where a{color:var(--navy2);font-weight:700}

/* ---- the priority table: the ordinal is a mark, not a word ---- */
table.ad-prio td:first-child,table.ad-prio th:first-child{width:1%;white-space:nowrap;text-align:center}
table.ad-prio td:first-child{font:700 1.25rem/1 var(--mono);color:var(--gold);vertical-align:middle}
table.ad-prio td:nth-child(2){font-weight:700;color:var(--navy);width:32%}
table.ad-prio td:nth-child(3){color:var(--sub)}
table.ad-prio tr.ad-here td:nth-child(2){box-shadow:inset 3px 0 0 var(--gold)}
table.ad-prio tr.ad-here td:nth-child(2) a{color:var(--navy);font-weight:700}

/* ---- the assumption ledger: provenance is the first thing in the row ---- */
table.ad-assume td:nth-child(2),table.ad-assume td:nth-child(3){white-space:nowrap;width:1%;font-family:var(--mono);font-size:.86rem}
table.ad-assume td:nth-child(1){font-weight:700;color:var(--navy)}
table.ad-assume td:last-child{color:var(--sub);font-size:.9rem}

/* ---- operational additions: each one hangs the Part B problem it closes ---- */
ul.ad-ops{list-style:none;padding:0;margin:1.2rem 0}
ul.ad-ops li{border-left:3px solid var(--line2);padding:.15rem 0 .15rem 1.1rem;margin-bottom:1.1rem}
ul.ad-ops li strong{color:var(--navy)}
ul.ad-ops li .ad-closes{display:block;font:700 .68rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--goldink);margin-bottom:.35rem}
ul.ad-ops li p{margin:.4rem 0 0;font-size:.94rem;color:var(--sub)}

/* ---- falsification criteria: a claim, then the observation that would kill it ---- */
.ad-fail{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--red);padding:1.1rem 1.3rem;margin:1.1rem 0}
.ad-fail h4{margin:0 0 .3rem;font-size:1rem;color:var(--navy)}
.ad-fail p{margin:0 0 .5rem;font-size:.95rem}
.ad-fail p:last-child{margin-bottom:0}
.ad-fail .ad-kill{color:var(--red);font-weight:700}

/* ---- the pre-registration timeline, which is only meaningful in order ---- */
ol.ad-steps{counter-reset:adx;list-style:none;padding:0;margin:1.2rem 0}
ol.ad-steps li{counter-increment:adx;position:relative;padding-left:2.9rem;margin-bottom:1rem}
ol.ad-steps li::before{content:counter(adx);position:absolute;left:0;top:-.1rem;width:1.9rem;height:1.9rem;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line2);background:var(--panel);
  font:700 .9rem/1 var(--mono);color:var(--navy)}
ol.ad-steps li strong{color:var(--navy)}

@media print{
  .ad-done{break-inside:avoid}
  .ad-fail{break-inside:avoid}
  table.ad-prio tr{break-inside:avoid}
}
@media (max-width:640px){
  table.ad-prio td:nth-child(2){width:auto}
  ol.ad-steps li{padding-left:2.4rem}
}

/* ===== part-anchorsec.css ===== */
/* Safe Perimeter - anchor security and accessibility.
   Owned by /anchor-security/ and /accessibility/. Concatenated into site.css by
   build.mjs. Every class here is prefixed `as-` so that two parallel authors
   editing two partials cannot silently redefine one another's rules, which is
   the one failure this split file arrangement exists to prevent. No inline
   style attribute exists on either page: the production CSP strips them. */

/* ---- a numbered requirement, argued rather than listed ---- */
.as-req{border:1px solid var(--line);border-left:4px solid var(--navy);background:var(--card);padding:1.2rem 1.35rem;margin:1.3rem 0}
.as-req > h3{margin:0 0 .55rem;font-size:1.1rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem}
.as-req p{margin:0 0 .7rem;font-size:.97rem}
.as-req p:last-child{margin-bottom:0}
.as-req.hard{border-left-color:var(--red)}
.as-req.soft{border-left-color:var(--gold)}

/* ---- the consequence line: the reason the requirement is a requirement ---- */
.as-why{border-top:1px solid var(--line);padding-top:.6rem;font-size:.92rem;color:var(--sub)}
.as-why strong{color:var(--navy);font-weight:700}
.as-req.hard .as-why strong{color:var(--red)}

/* ---- the spine of a page, set as a statement rather than as prose ---- */
.as-spine{border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);background:var(--panel);padding:1.5rem 1.6rem;margin:1.9rem 0}
.as-spine p{margin:0;font:400 1.22rem/1.45 var(--serif);color:var(--navy)}
.as-spine p + p{margin-top:.75rem;font:400 .95rem/1.6 var(--sans);color:var(--sub)}

/* ---- the blast-radius statement, which is deliberately the loudest thing ---- */
.as-blast{border:2px solid var(--red);background:var(--redsoft);padding:1.3rem 1.5rem;margin:1.7rem 0}
.as-blast h4{margin:0 0 .5rem;color:var(--red);font-size:1.06rem}
.as-blast p{margin:0 0 .6rem;font-size:.97rem}
.as-blast p:last-child{margin-bottom:0}
.as-blast ul{margin:.2rem 0 .8rem;padding-left:1.1rem;font-size:.95rem}
.as-blast li{margin-bottom:.35rem}

/* ---- the anchor threat table ---- */
table.as-threat td:first-child{white-space:nowrap;width:1%;font-weight:700;color:var(--navy)}
table.as-threat td{font-size:.89rem;vertical-align:top}
table.as-threat td:last-child{color:var(--goldink)}
table.as-threat tr.as-open td:last-child{color:var(--red);font-weight:700}

/* ---- the alert-channel table: who a channel excludes, and the equivalent ---- */
table.as-chan td{font-size:.89rem;vertical-align:top}
table.as-chan td:first-child{white-space:normal;width:16%;font-weight:700;color:var(--navy)}
table.as-chan td.as-excl{color:var(--red)}
table.as-chan td.as-eq{color:var(--goldink)}

/* ---- a short list of things that must be true, used as an acceptance test ---- */
ol.as-test{counter-reset:at;list-style:none;padding:0;margin:1.2rem 0}
ol.as-test li{counter-increment:at;position:relative;padding-left:2.7rem;margin-bottom:.8rem;font-size:.96rem}
ol.as-test li::before{content:counter(at);position:absolute;left:0;top:0;width:1.75rem;text-align:center;
  font:700 .85rem/1.7 var(--mono);color:#fff;background:var(--navy)}
ol.as-test li strong{color:var(--navy)}

/* ---- a pair of short columns for "already settled" against "still open" ---- */
.as-two{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--good);padding:1.25rem}
.as-two.open{border-top-color:var(--hot)}
.as-two h3{margin-top:0;font-size:1.05rem}
.as-two ul{margin:0;padding-left:1.1rem;font-size:.94rem;color:var(--sub)}
.as-two li{margin-bottom:.45rem}

@media print{
  .as-req{break-inside:avoid}
  .as-spine{break-inside:avoid}
  .as-blast{break-inside:avoid;border:2px solid #999}
  .as-two{break-inside:avoid}
  table.as-threat tr{break-inside:avoid}
  table.as-chan tr{break-inside:avoid}
}
@media (max-width:640px){
  .as-spine p{font-size:1.06rem}
  .as-req{padding:1rem 1.05rem}
  table.as-chan td:first-child{width:auto}
}

/* ===== part-assessment.css ===== */
/* Anchored Zone Assessment - Part A (/what-it-solves/) and Part B (/unsolved/).
   Every selector here is prefixed `as-` so that no other partial can own the
   same bare class name and silently win the cascade. Nothing in this file is
   declared anywhere else, which is what the `classes` gate checks. */

/* ---- a quoted line that carries a number ----------------------------------
   Set as a <pre> deliberately. The figure inside it is an illustrative
   hypothetical from the source assessment rather than a measured statistic,
   and it has no entry in the facts table; keeping it inside a preformatted
   block keeps it out of prose, where an unsourced number does not belong. */
pre.as-quote{
  white-space:pre-wrap;
  font:italic 400 1.12rem/1.6 var(--serif);
  color:var(--navy);
  background:var(--panel);
  border-left:3px solid var(--gold);
  padding:1rem 1.2rem;
  margin:1.3rem 0;
  overflow-x:auto;
}

/* ---- a quoted sentence from a cited source -------------------------------
   Scoped to a class rather than to the bare element: no other partial owns
   blockquote, and this file should not start owning it for the whole site. */
blockquote.as-quoted{
  margin:1.3rem 0;
  padding:.2rem 0 .2rem 1.2rem;
  border-left:3px solid var(--line2);
  font:italic 400 1.06rem/1.6 var(--serif);
  color:var(--navy);
}
blockquote.as-quoted p:last-child{margin-bottom:0}

/* ---- Table A.6 ---------------------------------------------------------- */
table.as-claims td:first-child{width:auto}
table.as-claims td.as-v{white-space:nowrap;width:1%;font:700 .78rem/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;vertical-align:top}
.as-v-yes{color:var(--good)}
.as-v-maybe{color:var(--warn)}
.as-v-none{color:var(--hot)}
.as-v-no{color:var(--red)}
table.as-claims tr.as-r-yes td:first-child{box-shadow:inset 3px 0 0 var(--good)}
table.as-claims tr.as-r-maybe td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
table.as-claims tr.as-r-none td:first-child{box-shadow:inset 3px 0 0 var(--hot)}
table.as-claims tr.as-r-no td:first-child{box-shadow:inset 3px 0 0 var(--red)}
table.as-claims td:first-child{padding-left:1rem}
.as-legend{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:.2rem 0 1.2rem;font:600 .74rem/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.as-legend span::before{content:"";display:inline-block;width:.7rem;height:.7rem;margin-right:.42rem;vertical-align:-.02em;background:currentColor}

/* ---- the merits, A-1 to A-5 --------------------------------------------- */
.as-merit{border-left:3px solid var(--line2);background:var(--card);padding:1rem 1.2rem;margin:1.1rem 0;scroll-margin-top:6rem}
.as-merit h3{margin:0 0 .35rem;font-size:1.08rem}
.as-merit p:last-child{margin-bottom:0}
.as-mtag{display:block;font:700 .68rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--goldink);margin-bottom:.45rem}

/* ---- the section this document is least willing to lose ------------------ */
.as-key{border:1px solid var(--line2);border-left:4px solid var(--gold);background:var(--panel);padding:1.4rem 1.5rem;margin:1.4rem 0}
.as-key h3{margin-top:0}
.as-key p:last-child{margin-bottom:0}

/* ---- commercial and legal points ---------------------------------------- */
.as-points{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));margin:1.3rem 0}
.as-point{background:var(--card);border:1px solid var(--line);padding:1.1rem 1.2rem}
.as-point h4{margin:0 0 .4rem;font-size:1rem}
.as-point p:last-child{margin-bottom:0}

/* ---- Part B: the nineteen ------------------------------------------------
   A problem is not a card in a backlog, so it is not laid out as one: no
   status column, no tick, nothing that could be read as a step towards done. */
.as-tier{margin-top:2.6rem}
.as-tierhead{border-top:2px solid var(--line2);padding-top:1.1rem}
.as-tierhead h2{margin-top:0}
.as-tiernote{color:var(--sub);font-size:.98rem;max-width:52rem}
.as-probs{display:grid;gap:1.1rem;margin:1.4rem 0}
.as-prob{display:grid;grid-template-columns:4.4rem 1fr;gap:0 1.1rem;border-left:3px solid var(--line2);background:var(--card);padding:1rem 1.2rem;scroll-margin-top:6rem}
.as-prob:target{background:var(--goldsoft);border-left-color:var(--gold)}
.as-pnum{font:700 .82rem/1.7 var(--mono);color:var(--goldink);letter-spacing:.04em}
.as-pbody h3{margin:0 0 .4rem;font-size:1.06rem}
.as-pbody p:last-child{margin-bottom:0}
.as-where{font-size:.9rem;color:var(--sub);border-top:1px solid var(--line);padding-top:.55rem;margin-top:.75rem}
.as-nowhere{font-size:.9rem;color:var(--muted);border-top:1px solid var(--line);padding-top:.55rem;margin-top:.75rem;font-style:italic}
.as-prob.as-hole{border-left-color:var(--hot)}
.as-prob.as-fixed{border-left-color:var(--red)}
.as-prob.as-fixed .as-pnum{color:var(--red)}
@media (max-width:640px){
  .as-prob{grid-template-columns:1fr;gap:.35rem}
  .as-pnum{line-height:1.2}
}
@media print{
  .as-probs{display:block}
  .as-prob{page-break-inside:avoid;break-inside:avoid}
  .as-points{display:block}
  .as-key{border-left:4px solid #999}
}

/* ===== part-bracelet.css ===== */
/* The warning state machine (/warning/) and the attestation bracelet (/bracelet/).
   Both instruments render a list of timestamped rows and a set of opaque hashes,
   so they share one row primitive rather than growing two. Nothing here uses an
   inline style: production CSP strips those and the layout dies live. */

/* ---- numbered argument, used where the order of the steps is the point ---- */
ol.ord{margin:0 0 1.1rem;padding-left:1.35rem}
ol.ord li{margin-bottom:.6rem}
ol.ord li::marker{color:var(--goldink);font-weight:700}

/* ---- a timestamped row: warning transcript, day of events, proof path ---- */
.wlog{list-style:none;padding:0;margin:.6rem 0 1.2rem;border-top:1px solid var(--line)}
.wev{display:flex;gap:.9rem;padding:.6rem .2rem;border-bottom:1px solid var(--line);align-items:flex-start;font-size:.9rem}
.wev .wt{flex:0 0 5.2rem;font:700 .74rem/1.6 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.wev .wb{flex:1 1 auto;min-width:0;color:var(--sub)}
.wev .wb strong{color:var(--navy);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}
.wev.picked{background:var(--goldsoft)}
.wev.picked .wb{color:var(--ink)}
.wev-warning{box-shadow:inset 3px 0 0 var(--gold)}
.wev-reminder{box-shadow:inset 3px 0 0 var(--gold2)}
.wev-cleared{box-shadow:inset 3px 0 0 var(--good)}
.wev-escalation{box-shadow:inset 3px 0 0 var(--red);background:var(--redsoft)}
.wev-exit,.wev-re-entry,.wev-exit-after-escalation{box-shadow:inset 3px 0 0 var(--line2)}

/* ---- a small factual label: a delivery channel, a disclosure state ---- */
.pill{display:inline-block;font:700 .64rem/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  padding:.1rem .42rem;border:1px solid var(--line2);background:var(--panel);color:var(--goldink);white-space:nowrap}
.pill.quiet{color:var(--muted);background:var(--card)}

/* ---- an opaque hash. It must wrap, and it must never widen the page. ---- */
.hash{font-family:var(--mono);font-size:.74rem;line-height:1.45;background:none;border:0;padding:0;
  color:var(--navy2);word-break:break-all;display:block}

/* ---- the fixed warning text, shown exactly as the subject receives it ---- */
pre.wfixed{white-space:pre-wrap;word-break:break-word;font-size:.88rem;margin:.4rem 0 1.2rem}

/* ---- a checkbox control sits differently from a slider ---- */
.ctl .chk{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.ctl .chk label{margin-bottom:0}
.ctl input[type=checkbox]{width:1.15rem;height:1.15rem;accent-color:var(--navy2);margin:0}
.ctl .chk .why{margin:0;font-size:.78rem;line-height:1.4}

/* ---- the one button on either page ---- */
.act{font:700 .74rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  padding:.62rem .9rem;border:1px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer}
.act:hover{background:var(--navy2);border-color:var(--navy2)}

/* ---- both instruments print a JSON record; keep it inside its own box ---- */
.out pre{margin:.4rem 0 1rem;font-size:.78rem}
.out h4{margin:1.2rem 0 .3rem;font-size:.96rem}

@media (max-width:640px){
  .wev{flex-direction:column;gap:.25rem}
  .wev .wt{flex:0 0 auto}
}
@media print{
  .act{display:none}
  .wev{break-inside:avoid}
}

/* ===== part-console.css ===== */
/* ==========================================================================
   The geofencing console. Everything here is prefixed cn- so that nothing in
   this file can collide with a component family in site.css - a generated or
   convenient short class name that happens to match a real one is a fault this
   project has shipped before.

   No inline style attribute is written anywhere by console-ui.js, because the
   production CSP strips them: every visual state below is a class.
   ========================================================================== */

.cn-console{margin:1.6rem 0 0}
.cn-panel{border:1px solid var(--line2);background:var(--card);margin:0 0 1.6rem}
.cn-panel .cn-hd{background:var(--navy);color:#fff;padding:.8rem 1.1rem;display:flex;gap:.9rem;
  align-items:baseline;flex-wrap:wrap}
.cn-panel .cn-hd h3{color:#fff;margin:0;font-size:1.06rem}
.cn-what{font:400 .84rem/1.4 var(--sans);color:#c3cfe4}
.cn-what code{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#e4cd84}
.cn-body{padding:1.1rem}
.cn-foot{font-size:.85rem;color:var(--sub);margin:.9rem 0 0;max-width:62rem}
.cn-sub{display:block;font-size:.76rem;color:var(--muted)}
.cn-out{margin-top:1rem}

/* ---- controls -------------------------------------------------------- */
.cn-acts{margin-left:auto;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.cn-acts2{margin-left:0;margin-top:.9rem}
.cn-btn{font:700 .74rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  padding:.55rem .8rem;border:1px solid var(--line2);background:var(--card);color:var(--navy);
  cursor:pointer;border-radius:2px}
.cn-btn:hover{background:var(--goldsoft);border-color:var(--gold2)}
.cn-btn-on{background:var(--goldsoft);border-color:var(--gold2);color:var(--goldink)}
.cn-btn-go{background:var(--navy2);border-color:var(--navy2);color:#fff}
.cn-btn-go:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.cn-btn-warn{background:#fff;border-color:var(--red);color:var(--red)}
.cn-btn-warn:hover{background:var(--redsoft);border-color:var(--red);color:var(--red)}
.cn-mini{padding:.3rem .5rem;font-size:.66rem;letter-spacing:.06em}
.cn-check{font:700 .72rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#c3cfe4;
  display:flex;gap:.35rem;align-items:center;cursor:pointer}
.cn-check input{accent-color:var(--gold2)}
.cn-fields{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.cn-field{display:flex;flex-direction:column}
.cn-lbl{font:700 .68rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin:0 0 .35rem;display:block}
.cn-lbl2{margin-top:1rem}
.cn-input,.cn-sel{width:100%;font:400 .92rem var(--sans);padding:.5rem .55rem;border:1px solid var(--line2);
  background:var(--card);color:var(--ink)}
.cn-input.cn-mono{font-family:var(--mono);font-size:.8rem}
.cn-sql{width:100%;font:400 .84rem/1.55 var(--mono);padding:.7rem .8rem;border:1px solid var(--line2);
  background:#12203a;color:#dfe6f2;resize:vertical;min-height:4.4rem}
.cn-sql:focus-visible{outline:3px solid var(--gold2);outline-offset:1px}

/* ---- the status strip ------------------------------------------------ */
.cn-strip{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  background:var(--panel);border:1px solid var(--line);padding:.85rem;margin-bottom:1rem}
.cn-stat .cn-k{font:700 .62rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.25rem}
.cn-stat .cn-v{font:700 1.06rem/1.15 var(--mono);color:var(--navy);font-variant-numeric:tabular-nums}

/* ---- anchor tiles ---------------------------------------------------- */
.cn-anchors{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));margin-bottom:1rem}
.cn-anchor{border:1px solid var(--line);background:var(--card);padding:.6rem .7rem;position:relative}
.cn-anchor.cn-a{border-left:3px solid var(--gold)}
.cn-anchor.cn-b{border-left:3px solid var(--line2)}
.cn-anchor.cn-down{background:var(--redsoft);border-color:#e2b6bd}
.cn-dot{position:absolute;right:.6rem;top:.7rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--good)}
.cn-down .cn-dot{background:var(--red)}
.cn-aname{display:block;font:700 .8rem/1.2 var(--mono);color:var(--navy)}
.cn-akind{display:block;font-size:.8rem;color:var(--sub);margin-top:.15rem}
.cn-acls{display:inline-block;font:700 .6rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--goldink);margin-top:.4rem;margin-right:.5rem}
.cn-b .cn-acls{color:var(--muted)}
.cn-aobs{font-size:.74rem;color:var(--muted)}

/* ---- tables ---------------------------------------------------------- */
.cn-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line)}
.cn-board,.cn-res{width:100%;border-collapse:collapse;font-size:.86rem;margin:0;background:var(--card)}
.cn-board th,.cn-res th{font:700 .64rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--panel);border-bottom:2px solid var(--line2);padding:.5rem .6rem;
  text-align:left;white-space:nowrap}
.cn-board td,.cn-res td{padding:.42rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
.cn-board tbody tr:hover,.cn-res tbody tr:hover{background:var(--panel)}
.cn-mono{font-family:var(--mono);font-size:.78rem;color:var(--navy2);white-space:nowrap}
.cn-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.cn-empty{padding:1rem;color:var(--muted);font-size:.9rem;text-align:center}
.cn-rhead{font-size:.8rem;color:var(--muted);margin:0 0 .5rem}

/* ---- badges ---------------------------------------------------------- */
.cn-tier{display:inline-block;font:700 .66rem/1 var(--sans);letter-spacing:.08em;padding:.3rem .42rem;
  border:1px solid var(--line2);color:var(--sub);background:var(--card);white-space:nowrap}
.cn-t0{border-color:#c6cedb;color:var(--muted)}
.cn-t1{border-color:var(--navy2);color:var(--navy2)}
.cn-t2{border-color:var(--gold2);color:var(--goldink);background:var(--goldsoft)}
.cn-t3{border-color:var(--red);color:#fff;background:var(--red)}
.cn-cls{display:inline-block;font:700 .68rem/1 var(--sans);width:1.35rem;height:1.35rem;line-height:1.35rem;
  text-align:center;border:1px solid var(--line2);color:var(--muted)}
.cn-clsA{border-color:var(--gold2);color:var(--goldink);background:var(--goldsoft)}
.cn-clsB{border-color:var(--line2);color:var(--muted)}
.cn-mod{display:inline-block;font:700 .6rem/1 var(--sans);letter-spacing:.06em;padding:.26rem .34rem;
  border:1px solid var(--line);color:#b9c0cb;background:var(--card);margin-right:.22rem}
.cn-modon{border-color:var(--navy2);color:var(--navy2);background:var(--panel)}
.cn-modctx{border-style:dashed}
.cn-modctx.cn-modon{border-color:var(--line2);color:var(--muted);background:var(--card)}
.cn-adjd{font:700 .66rem/1 var(--sans);letter-spacing:.06em;color:var(--red);text-transform:uppercase}
.cn-never{font:700 .6rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--good)}
.cn-good{color:var(--good);font-weight:700}
.cn-bad{color:var(--red);font-weight:700}

/* ---- example queries ------------------------------------------------- */
.cn-examples{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.cn-exbtn{font:600 .78rem/1.2 var(--sans);text-align:left;padding:.45rem .6rem;border:1px solid var(--line2);
  background:var(--card);color:var(--navy2);cursor:pointer;border-radius:2px}
.cn-exbtn:hover{background:var(--panel);border-color:var(--navy2)}
.cn-exref{border-color:#e2b6bd;color:var(--red);background:#fff}
.cn-exref:hover{background:var(--redsoft);border-color:var(--red)}
.cn-x{font-weight:700}

/* ---- refusals -------------------------------------------------------- */
.cn-refusal{border:1px solid #e2b6bd;background:var(--redsoft);padding:1rem 1.1rem}
.cn-refusal.cn-boundary{border-left:5px solid var(--red)}
.cn-refusal p{margin:0 0 .55rem;font-size:.92rem}
.cn-rcode{font:700 .72rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--red);
  margin-bottom:.5rem}
.cn-rterm{font-size:.86rem;color:var(--sub)}
.cn-rfoot{font-size:.82rem;color:var(--sub);margin-bottom:0}
.cn-agg{display:flex;align-items:baseline;gap:.8rem;background:var(--panel);border:1px solid var(--line);padding:1rem}
.cn-aggn{font:700 2.3rem/1 var(--serif);color:var(--navy);font-variant-numeric:tabular-nums}
.cn-aggl{font-size:.88rem;color:var(--sub)}

/* ---- the authorization boundary -------------------------------------- */
.cn-steps{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.cn-step{border:1px solid var(--line);background:var(--panel);padding:.65rem .75rem}
.cn-stepdone{background:var(--card);border-color:var(--gold2);border-left:3px solid var(--gold)}
.cn-stepn{display:inline-block;font:700 .66rem/1.35rem var(--mono);width:1.35rem;height:1.35rem;text-align:center;
  border:1px solid var(--line2);color:var(--muted);margin-right:.4rem}
.cn-stepdone .cn-stepn{border-color:var(--gold2);color:var(--goldink);background:var(--goldsoft)}
.cn-steplab{font:700 .78rem/1.2 var(--sans);color:var(--navy)}
.cn-stepdet{display:block;font-size:.76rem;color:var(--muted);margin-top:.35rem;word-break:break-word}
.cn-handle{border:1px solid var(--gold2);background:var(--goldsoft);padding:1rem 1.1rem;margin-top:.9rem}
.cn-handle .cn-k{font:700 .64rem/1.2 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--goldink)}
.cn-hv{font:700 1.5rem/1.2 var(--mono);color:var(--navy);margin:.3rem 0 .6rem;word-break:break-all}
.cn-handle p{margin:0;font-size:.86rem;color:var(--sub)}
.cn-msg{font-size:.88rem;color:var(--sub);margin:.9rem 0 0;border-left:3px solid var(--gold);padding-left:.7rem}
.cn-msgerr{border-left-color:var(--red);color:var(--red)}

/* ---- the exigency clock ---------------------------------------------- */
.cn-clockrow{display:flex;gap:.8rem;align-items:baseline;padding:.35rem 0;border-bottom:1px solid var(--line);
  flex-wrap:wrap}
.cn-clockrow .cn-k{flex:0 0 11rem;font:700 .66rem/1.4 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted)}
.cn-clockrow .cn-v{font:700 .92rem/1.4 var(--mono);color:var(--navy)}
.cn-field2{margin-top:1rem;max-width:32rem}
.cn-range{width:100%;accent-color:var(--gold2)}
.cn-aheadv{color:var(--navy);letter-spacing:0;text-transform:none;font-weight:700}
.cn-bar{height:.5rem;background:var(--panel);border:1px solid var(--line);margin:.8rem 0 .5rem;overflow:hidden}
.cn-fill{display:block;height:100%;background:var(--gold2)}
.cn-p0{width:0}    .cn-p1{width:5%}   .cn-p2{width:10%}  .cn-p3{width:15%}
.cn-p4{width:20%}  .cn-p5{width:25%}  .cn-p6{width:30%}  .cn-p7{width:35%}
.cn-p8{width:40%}  .cn-p9{width:45%}  .cn-p10{width:50%} .cn-p11{width:55%}
.cn-p12{width:60%} .cn-p13{width:65%} .cn-p14{width:70%} .cn-p15{width:75%}
.cn-p16{width:80%} .cn-p17{width:85%} .cn-p18{width:90%} .cn-p19{width:95%}
.cn-p20{width:100%;background:var(--red)}

/* ---- tamper / liveness ----------------------------------------------- */
.cn-list{list-style:none;padding:0;margin:0 0 1rem;font-size:.9rem;color:var(--sub)}
.cn-list li{padding-left:1.3rem;position:relative;margin-bottom:.45rem}
.cn-list li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:1px;background:var(--gold)}

/* ---- the audit log --------------------------------------------------- */
.cn-chain{font-size:.84rem;color:var(--sub);margin:0 0 .7rem}
.cn-logbox{max-height:26rem;overflow-y:auto}
.cn-log td{font-size:.8rem}
.cn-kind{font:700 .62rem/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap}
.cn-det{min-width:20rem;color:var(--sub)}
.cn-hash{color:var(--muted);font-size:.72rem}
.cn-lg-board td{background:var(--panel)}
.cn-lg-query td{background:var(--card)}
.cn-lg-refusal td{background:var(--redsoft)}
.cn-lg-refusal .cn-kind{color:var(--red)}
.cn-lg-approval td{background:var(--card)}
.cn-lg-approval .cn-kind{color:var(--navy2)}
.cn-lg-exigency td{background:#fdf1e4}
.cn-lg-exigency .cn-kind{color:var(--hot)}
.cn-lg-resolution td{background:var(--goldsoft)}
.cn-lg-resolution .cn-kind{color:var(--goldink)}
.cn-lg-adjudication td{background:var(--card)}
.cn-lg-adjudication .cn-kind{color:var(--goldink)}

@media (max-width:760px){
  .cn-panel .cn-hd{flex-direction:column;align-items:flex-start}
  .cn-acts{margin-left:0}
  .cn-clockrow .cn-k{flex:1 1 100%}
  .cn-det{min-width:14rem}
}
@media print{
  .cn-acts,.cn-examples,.cn-sql,.cn-btn{display:none!important}
  .cn-logbox{max-height:none;overflow:visible}
  .cn-panel{break-inside:avoid}
}

/* ===== part-film.css ===== */
/* ---- the film transcript ----------------------------------------------
   The transcript is a TABLE rather than a list, and deliberately so. It quotes
   the narration verbatim, which means it prints "94.1%" and "63,000" as spoken
   words rather than as claims the page is making; the sourced-figures gate
   strips <table> and <pre> for exactly that reason. Every one of these figures
   is argued, sourced and cited on the page it comes from - here it is a
   recording of what was said, and it must match the audio byte for byte. */
.fscript{margin:1.3rem 0 1.1rem;font-size:1rem}
.fscript th{white-space:nowrap}
.fscript td{padding:.9rem .9rem .9rem 0;vertical-align:baseline}
.fscript tbody tr:last-child td{border-bottom:0}
.fsT{width:1%;white-space:nowrap;font:700 .8rem/1.7 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.fsX{line-height:1.6}
.fsC{display:block;font:700 .66rem/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--goldink);margin-bottom:.45rem}
.fsrc{font-size:.83rem;color:var(--muted)}
@media print{ .fscript tr{break-inside:avoid} }

/* ===== part-nav.css ===== */
/* Grouped navigation: parts in the header bar, the current part's pages beneath. */
.subnav{background:var(--panel);border-bottom:1px solid var(--line)}
.subnav nav{display:flex;gap:.1rem;flex-wrap:wrap;padding:.4rem 0}
.subnav a{font:600 .8rem/1 var(--sans);color:var(--sub);text-decoration:none;padding:.42rem .6rem;white-space:nowrap}
.subnav a:hover{color:var(--navy);background:var(--card)}
.subnav a[aria-current="page"]{color:var(--navy);background:var(--card);box-shadow:inset 0 -2px 0 var(--gold)}
.nav a[aria-current="true"]{color:var(--navy);box-shadow:inset 0 -2px 0 var(--gold)}
.cite{font-size:.78em;vertical-align:super;line-height:0}
.cite a{color:var(--goldink);text-decoration:none;padding:0 .08em;font-weight:700}
.cite a:hover{text-decoration:underline}
@media (max-width:640px){ .subnav a{font-size:.75rem;padding:.36rem .45rem} }
@media print{ .subnav{display:none} }
/* ---- per-page "How this works" explainer ---- */
.howto{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.howto-player{border:1px solid var(--line2);background:#0d1729;line-height:0}
.howto-player video{width:100%;height:auto;display:block}
.howto-tx{margin-top:1rem;border:1px solid var(--line);background:var(--card)}
.howto-tx summary{cursor:pointer;padding:.7rem 1rem;font:700 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.howto-tx summary:hover{color:var(--navy)}
.howto-tx table{margin:0}
.howto-tx td:first-child,.howto-tx td:nth-child(2){white-space:nowrap;width:1%;color:var(--muted)}
.howto-tx th,.howto-tx td{padding:.5rem .9rem}
@media print{ .howto-player{display:none} .howto-tx[open] summary{color:#000} }

/* ===== part-sensing.css ===== */
/* Anchored zones and the sensing layer. Selectors are written with the modifier
   first (.decision.note rather than .note.decision) so the class-collision gate
   still sees exactly one top-level .note family declaration in site.css. */

/* ---- callouts: a design decision, and a thing that must never be specified ---- */
.decision.note{border-left:3px solid var(--navy);background:var(--card)}
.decision.note h4{color:var(--navy)}
.decision.note p:last-child{margin-bottom:0}
.forbid.note{border-left:3px solid var(--red);background:var(--redsoft)}
.forbid.note h4{color:var(--red)}
.forbid.note p:last-child{margin-bottom:0}
.dtag{display:inline-block;font:700 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  background:var(--navy);color:#fff;padding:.34rem .55rem;margin-bottom:.6rem}
.dtag.stop{background:var(--red)}

/* ---- the "meets requirement" column, which is the point of Table 0.2 ---- */
td.mets-y{color:var(--good);font-weight:700;white-space:nowrap}
td.mets-n{color:var(--red);font-weight:700}
td.mets-m{color:var(--hot);font-weight:700}
table.candidates td:first-child{font-weight:700;color:var(--navy)}

/* ---- zone classes ---- */
.za.tag{border-color:var(--red);color:var(--red)}
.zb.tag{border-color:var(--navy2);color:var(--navy2)}
.zonecard{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--line2);padding:1.4rem}
.za.zonecard{border-top-color:var(--red)}
.zb.zonecard{border-top-color:var(--navy2)}
.zonecard h3{margin-top:.4rem}
.zonecard p:last-child,.zonecard ul:last-child{margin-bottom:0}

/* ---- the modality-agreement instrument ---- */
.mgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-bottom:1.1rem}
.mgroup{background:var(--panel);border:1px solid var(--line);padding:.9rem 1rem}
.mgroup .ctl{margin-bottom:0;grid-template-columns:1fr;gap:.8rem}
.mhead{font:700 .72rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--navy);
  margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid var(--line2)}
.mhead em{display:block;font:400 .74rem/1.35 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted);margin-top:.3rem}
.barred{border:1px dashed var(--red);background:var(--redsoft);padding:.7rem .9rem;margin:0 0 1.1rem;
  font-size:.85rem;color:var(--red)}
.barred strong{color:var(--red)}

@media print{ .mgroup{break-inside:avoid} .zonecard{break-inside:avoid} }

/* ===== part-sources.css ===== */
/* Reference list and open questions. Owned by the sources/open pages only -
   every selector here is a standalone class that no other partial declares, so
   the cross-file collision branch of the `classes` gate stays quiet. */

/* A citation lands on a table ROW, so the row is what has to clear the sticky
   header. site.css only gives scroll-margin to h2[id]/h3[id]/section[id], and
   without this every [17] in the document scrolls the reader to a source that
   is hidden behind the masthead. */
tr[id]{scroll-margin-top:6rem}
tr[id]:target{background:var(--goldsoft);box-shadow:inset 3px 0 0 var(--gold)}
tr[id]:target td{font-weight:500}

.snum{font:600 .86rem/1.5 var(--mono);color:var(--goldink);white-space:nowrap;vertical-align:top}
.snum a{color:var(--goldink);text-decoration:none}
.snum a:hover{text-decoration:underline}
.skind{color:var(--sub);font-size:.9rem}
.vend{margin-left:.35rem;vertical-align:.05em}
.uncited{color:var(--muted);font-style:italic;font-size:.92rem}

/* Open questions. An unresolved question is not a roadmap item, and it should
   not be able to read like one, so each is set as a standing block with the
   question in the margin rather than as a checklist. */
.qs{display:grid;gap:1.1rem;margin:1.4rem 0}
.q{border-left:3px solid var(--line2);background:var(--card);padding:1rem 1.2rem}
.q h3{margin:0 0 .35rem;font-size:1.08rem}
.q p:last-child{margin-bottom:0}
.q.largest{border-left-color:var(--gold)}
.qwhy{color:var(--sub);font-size:.95rem}
.owed{border-left:3px solid var(--navy2);background:var(--panel);padding:1rem 1.2rem;margin:1.4rem 0}
.owed h4{margin:0 0 .4rem;font-size:1.02rem}

@media print{ .qs{display:block} .q{page-break-inside:avoid} }

/* ===== part-trust.css ===== */
/* Safe Perimeter - trust-domain isolation and identity resolution.
   Owned by /isolation/ and /identity/. Concatenated into site.css by build.mjs.
   No inline style attributes exist on either page: the production CSP strips
   them, so everything those two pages need is here. */

/* ---- the load-bearing statement of a page, set apart from the argument ---- */
.tclaim{border:2px solid var(--navy);background:var(--card);padding:1.3rem 1.5rem;margin:1.8rem 0}
.tclaim p{margin:0;font:400 1.16rem/1.5 var(--serif);color:var(--navy)}
.tclaim p strong{font-weight:700}
.tclaim p + p{margin-top:.7rem;font:400 .95rem/1.6 var(--sans);color:var(--sub)}
.tclaim.hard{border-color:var(--red)}
.tclaim.hard p{color:var(--red)}
.tclaim.hard p + p{color:var(--sub)}

/* ---- the domain table: first column is the domain name and never wraps ---- */
table.doms td:first-child{white-space:nowrap;width:1%;font-weight:700;color:var(--navy)}
table.doms td{font-size:.9rem}
table.doms td:last-child{color:var(--goldink)}

/* ---- the co-location matrix ---- */
table.tmx td:first-child{white-space:nowrap;width:1%;font-weight:700;color:var(--navy)}
table.tmx td{font-size:.9rem}
table.tmx td.tv{white-space:nowrap;width:1%;font:700 .68rem/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase}
table.tmx td.tv.tmx-bad{color:var(--red);background:var(--redsoft)}
table.tmx td.tv.tmx-weak{color:var(--hot)}
table.tmx td.tv.tmx-ok{color:var(--good)}
table.tmx tr.tmx-row-bad td{background:var(--redsoft)}
.tlegend{display:flex;flex-wrap:wrap;gap:1.4rem;font:600 .76rem/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:.2rem 0 1.4rem}
.tlegend .tmx-bad{color:var(--red)}
.tlegend .tmx-weak{color:var(--hot)}
.tlegend .tmx-ok{color:var(--good)}

/* ---- the allowed-flow table; a cryptographically enforced row is marked ---- */
table.tflow td{font-size:.9rem}
table.tflow td:nth-child(1),table.tflow td:nth-child(2){white-space:nowrap;width:1%;font-weight:700;color:var(--navy)}
table.tflow td.tcrypto{color:var(--goldink);font-weight:700}
table.tflow tr.tdeny td{color:var(--red)}
table.tflow tr.tdeny td:nth-child(1),table.tflow tr.tdeny td:nth-child(2){color:var(--red)}

/* ---- a named file from deploy/, shown above the excerpt it came from ---- */
.tfile{font:700 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:1.6rem 0 .4rem;display:flex;align-items:center;gap:.6rem}
.tfile code{background:var(--panel);border:1px solid var(--line);color:var(--navy);font-size:.82rem;letter-spacing:0;text-transform:none;padding:.2em .45em}
.tfile::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}

/* ---- the exigency clause, printed as a clause ---- */
ol.tclause{counter-reset:tc;list-style:none;padding:0;margin:1.2rem 0}
ol.tclause li{counter-increment:tc;position:relative;padding-left:2.6rem;margin-bottom:.85rem}
ol.tclause li::before{content:"(" counter(tc,lower-alpha) ")";position:absolute;left:0;top:0;font:700 .95rem/1.6 var(--mono);color:var(--goldink)}
ol.tclause li strong{color:var(--navy)}

/* ---- the two halves of split custody, side by side ---- */
.thalf{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--navy);padding:1.3rem}
.thalf h3{margin-top:0}
.thalf.custody{border-top-color:var(--gold)}
.thalf ul{margin:0;padding-left:1.1rem;font-size:.94rem;color:var(--sub)}
.thalf li{margin-bottom:.4rem}

@media print{
  .tclaim{break-inside:avoid}
  .thalf{break-inside:avoid}
  table.tmx tr{break-inside:avoid}
}
@media (max-width:640px){
  .tclaim p{font-size:1.04rem}
  .tlegend{gap:.8rem}
}