/* ============================================================================
   CBSR — shared stylesheet
   One file for every page. The design system is unchanged from the single-page
   original: paper ground, serif headings, mono for anything the build computed.
   Everything below the "new components" rule was added when the site was split
   into function pages.
   ========================================================================= */

:root{
  --paper:#EDEFEB; --surface:#FBFBF9; --surface-2:#F5F6F2;
  --ink:#191B17; --ink-2:#565A50; --muted:#8B8E84;
  --line:#DBDDD4; --line-strong:#C6C8BF;
  --accent:#1E3A5F; --accent-hover:#2C517F; --accent-soft:#E6EBF1;
  --clear:#2E7D46; --gate:#B26B12; --block:#B23B36; --transition:#8B8E84;
  --serif:'Source Serif 4',Georgia,'Songti SC','Noto Serif CJK SC',Cambria,'Times New Roman',serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --wrap:1000px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.kick{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;color:var(--ink-2);
  text-transform:uppercase;margin:0 0 22px;padding-bottom:9px;border-bottom:1px solid var(--line);
  display:block}
html[lang^="zh"] .kick{letter-spacing:0.08em}
.kick:has(+ .h-sec){border-bottom:0;padding-bottom:0;margin-bottom:14px}
.rule{height:1px;background:var(--line);border:0;margin:0}
section{padding:64px 0}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-0.005em;margin:0}
.h-sec{font-size:clamp(21px,2.6vw,27px);line-height:1.25;margin:0 0 14px;
  padding-top:16px;border-top:2px solid var(--ink)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- header */
.top{position:sticky;top:0;z-index:20;background:rgba(237,239,235,0.90);
  backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:20px}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.brand a{color:inherit}
.brand b{font-family:var(--mono);font-weight:500;font-size:16px;letter-spacing:0.02em;color:var(--ink)}
.brand span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;align-items:center;gap:20px}
.nav a{font-size:14.5px;color:var(--ink-2);white-space:nowrap}
.nav a:hover{color:var(--accent)}
.nav a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.nav .ver{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.langtog{display:inline-flex;border:1px solid var(--line-strong);border-radius:2px;overflow:hidden;flex:none}
.langtog button{font-family:var(--mono);font-size:12px;padding:4px 9px;border:0;background:var(--surface);
  color:var(--ink-2);cursor:pointer;line-height:1.2}
.langtog button+button{border-left:1px solid var(--line-strong)}
.langtog button.on{background:var(--accent);color:#fff}
@media(max-width:1040px){.brand span{display:none}.nav{gap:15px}.nav a{font-size:13.5px}}
@media(max-width:860px){
  .top .wrap{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:10px}
  .nav{order:3;width:100%;flex-wrap:wrap;gap:14px;border-top:1px solid var(--line);padding-top:9px}
  .nav .ver{margin-left:auto}
}

/* ------------------------------------------------------------------ hero */
.hero{padding-top:66px;padding-bottom:40px}
.hero h1{font-size:clamp(28px,4.6vw,46px);line-height:1.10;letter-spacing:-0.02em;max-width:19ch}
.hero .lede{font-size:clamp(17px,2.3vw,19.5px);color:var(--ink-2);max-width:62ch;margin:22px 0 0;line-height:1.55}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 20px}
.btn{font-family:var(--sans);font-size:15px;font-weight:500;padding:11px 20px;border-radius:2px;
  cursor:pointer;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  transition:background .15s,border-color .15s;display:inline-block}
.btn:hover{background:var(--surface-2);border-color:var(--ink-2);color:var(--ink)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.pri:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.meta{font-family:var(--mono);font-size:12.5px;color:var(--muted);line-height:1.9}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px;align-items:start}
.hero-main .kick{border-bottom:0;padding-bottom:0;margin-bottom:20px}
@media(max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:38px}}

.hero-panel{border-top:2px solid var(--ink);padding:14px 0 0;margin-top:6px}
.hp-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px}
.hp-title{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2)}
html[lang^="zh"] .hp-title{letter-spacing:0.06em}
.hp-ver{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.hp-stats{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.hp-stats > div{background:var(--paper);padding:12px 2px 13px}
.hp-stats dt{font-family:var(--mono);font-size:10.5px;letter-spacing:0.05em;color:var(--muted);
  text-transform:uppercase;margin:0 0 4px}
html[lang^="zh"] .hp-stats dt{letter-spacing:0.02em;text-transform:none;font-size:11.5px}
.hp-stats dd{font-family:var(--serif);font-size:29px;font-weight:600;line-height:1;color:var(--ink);margin:0}
.hp-bar{display:flex;height:7px;margin:20px 0 12px;gap:1px}
.hpb{display:block}
.hp-key{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:5px 14px;font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.hp-key li{display:flex;align-items:center;gap:6px}
.hp-key i{width:9px;height:9px;flex:none;display:inline-block}
[data-k="I"]{background:var(--clear)} [data-k="II"]{background:var(--gate)}
[data-k="III"]{background:#6B7A8F}   [data-k="T"]{background:var(--transition)}
[data-k="X"]{background:var(--block)} [data-k="P"]{background:#C6C8BF}
.hp-foot{font-size:12.5px;line-height:1.55;color:var(--muted);margin:16px 0 0;
  padding-top:12px;border-top:1px solid var(--line)}

/* -------------------------------------------------------- corridor graph */
.graph{margin-top:8px;background:var(--surface);border:1px solid var(--line);border-radius:2px;
  padding:22px 20px 16px}
.graph svg{display:block;width:100%;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:6px;padding:0 4px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.swatch{width:16px;height:3px;border-radius:2px;display:inline-block}
.swatch.dash{height:0;border-top:2px dashed var(--transition);width:16px}
.gcap{font-size:14.5px;color:var(--ink-2);margin:16px 4px 0;line-height:1.55;max-width:72ch}
.gcap b{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------- picker */
.picker-wrap{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:640px){.picker-wrap{grid-template-columns:1fr}}
.selrow{display:flex;flex-direction:column;gap:14px}
.field label{font-family:var(--mono);font-size:12px;color:var(--muted);display:block;margin:0 0 6px}
select{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:2px;padding:11px 12px;appearance:none;cursor:pointer}
select:hover{border-color:var(--ink-2)}
.verdict{background:var(--ink);color:#EDEFEB;border-radius:2px;padding:20px 22px;font-family:var(--mono);
  min-height:150px}
.verdict .flow{font-size:19px;font-weight:500;letter-spacing:0.02em;display:flex;align-items:center;gap:10px}
.verdict .arrow{color:var(--muted)}
.verdict .line{height:1px;background:rgba(255,255,255,0.16);margin:15px 0}
.verdict .cls{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.verdict .note{font-size:13px;color:#B9BCB2;line-height:1.55;margin-top:10px;font-family:var(--sans)}
.clear{color:#7FD79A}.gate{color:#E7B667}.block{color:#E88A85}.transition{color:#B9BCB2}
.bg-clear{background:#2E7D46}.bg-gate{background:#B26B12}.bg-block{background:#B23B36}.bg-transition{background:#8B8E84}
.subcap{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:14px}

/* ----------------------------------------------------------- proof block */
.proof{margin-top:24px}
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pcard{background:var(--ink);color:#EDEFEB;border-radius:2px;padding:20px 22px;font-family:var(--mono)}
.pcard .flow{font-size:19px;font-weight:500;letter-spacing:0.02em;display:flex;align-items:center;gap:10px}
.pcard .arrow{color:var(--muted)}
.pcard .line{height:1px;background:rgba(255,255,255,0.16);margin:15px 0}
.pcard .cls{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.pcard .note{font-size:13px;color:#B9BCB2;line-height:1.55;margin:10px 0 0;font-family:var(--sans);min-height:60px}
.pcard .stamp{font-size:11.5px;letter-spacing:0.02em;margin:14px 0 0;padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.12);min-height:17px;color:#8B8E84}
.pcard .stamp.fired{color:#E7B667}
.scrub{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:16px 20px 14px}
.scrub-lab{display:block;font-family:var(--mono);font-size:12px;letter-spacing:0.04em;color:var(--muted)}
#asof{width:100%;margin:14px 0 0;accent-color:var(--accent);cursor:pointer;height:20px}
#asof:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.stops{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px}
.stops div{font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--muted)}
.stops div:nth-child(2){text-align:center}
.stops div:nth-child(3){text-align:right}
.stops b{display:block;font-weight:500;font-size:12.5px;color:var(--ink-2)}
.stops div.on b{color:var(--accent)}
.pcount{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.pcount b{font-weight:500;color:var(--accent)}
@media(max-width:640px){.pcards{grid-template-columns:1fr}.pcard .note{min-height:0}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:0.01ms !important;animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;scroll-behavior:auto !important;}
}

/* ---------------------------------------------------------------- thesis */
.thesis{border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:2px;
  background:var(--surface);padding:26px 30px}
.thesis .big{font-size:clamp(19px,2.6vw,25px);line-height:1.42;font-weight:500;color:var(--ink);letter-spacing:-0.01em;margin:0}
.thesis .sub{font-size:16px;line-height:1.62;color:var(--ink-2);margin:16px 0 0;max-width:72ch}
.thesis .sub b{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------- use cases */
.uses{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px 30px;margin-top:30px}
.use{background:none;border:0;border-top:2px solid var(--ink);padding:14px 0 0}
.ut{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 5px}
.ud{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0}

/* ------------------------------------------------------------------ embed */
.embed{border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--surface);margin-top:8px}
.embed-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.embed-label{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.embed-open{font-family:var(--mono);font-size:12.5px}
#mapframe{display:block;width:100%;height:min(78vh,760px);min-height:560px;border:0}
.embed-cap{font-family:var(--mono);font-size:12px;color:var(--muted);margin:12px 4px 0}
@media(max-width:640px){#mapframe{min-height:460px;height:70vh}}

/* ------------------------------------------------------- prose + figures */
.lead{font-family:var(--serif);font-size:19.5px;line-height:1.62;color:var(--ink-2);max-width:66ch;margin:0 0 18px}
.body{font-size:17px;line-height:1.65;color:var(--ink-2);max-width:66ch;margin:0}
.body b,.lead b{color:var(--ink);font-weight:600}
.body + .body{margin-top:16px}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:2px;overflow:hidden;margin-top:34px}
.fig{background:var(--surface);padding:20px 18px}
.fig .n{font-family:var(--mono);font-size:26px;font-weight:500;color:var(--ink);letter-spacing:-0.01em}
.fig .l{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.4}

/* ------------------------------------------------------------------ layers */
.layers{margin-top:8px;border-top:1px solid var(--line)}
.layer{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.layer .ix{font-family:var(--mono);font-size:13px;color:var(--accent);padding-top:3px}
.layer h3{font-size:17px;font-weight:600;margin:0 0 4px}
.layer p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.55;max-width:64ch}
.layer code,.gk,code.tok{font-family:var(--mono);font-size:13.5px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--accent)}

.formula{background:var(--surface);border:1px solid var(--line-strong);border-radius:2px;
  padding:18px 20px;margin:24px 0;font-family:var(--mono);font-size:14px;line-height:1.9;
  color:var(--ink);overflow-x:auto}
.formula .op{color:var(--muted)}.formula .val{color:var(--accent)}
.formula .res{color:var(--clear);font-weight:500}

/* -------------------------------------------------------- analysis index */
.idx{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line-strong)}
.idx-item{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:10px 26px;
  align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.idx-date{font-family:var(--mono);font-size:12px;letter-spacing:0.02em;color:var(--muted);
  white-space:nowrap;padding-top:3px}
.idx-t{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.32;margin:0;letter-spacing:0}
.idx-t a{color:var(--ink);text-decoration:none;
  background-image:linear-gradient(var(--line-strong),var(--line-strong));
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  padding-bottom:1px;transition:color .15s,background-image .15s}
.idx-t a:hover{color:var(--accent);background-image:linear-gradient(var(--accent),var(--accent))}
.idx-d{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:7px 0 0;max-width:64ch}
.idx-meta{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap;padding-top:4px}
@media(max-width:720px){
  .idx-item{grid-template-columns:minmax(0,1fr);gap:4px;padding:18px 0}
  .idx-date{padding-top:0}
  .idx-meta{padding-top:6px}
}
.idx-filter{display:flex;align-items:center;gap:16px;margin:22px 0 0}
.idx-filter input{flex:1 1 auto;min-width:0;font-family:var(--sans);font-size:15px;color:var(--ink);
  background:none;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;
  padding:9px 2px;outline:none}
.idx-filter input::placeholder{color:var(--muted)}
.idx-filter input:focus{border-bottom-color:var(--ink)}
.idx-count{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.idx-item[hidden]{display:none}
.idx-empty{font-family:var(--mono);font-size:13px;color:var(--muted);padding:22px 0;
  border-bottom:1px solid var(--line);list-style:none}

/* ----------------------------------------------------------------- papers */
.papers{margin-top:8px}
.paper,.rec{display:grid;grid-template-columns:1fr auto;gap:14px 20px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--line)}
.paper:last-child,.rec:last-child{border-bottom:1px solid var(--line)}
.paper .t,.rec .t{font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.34;color:var(--ink)}
.paper .d,.rec .d{font-size:14.5px;color:var(--ink-2);margin-top:3px;max-width:62ch}
.paper .v,.rec .v{font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap}
a.paper,a.rec{color:inherit;text-decoration:none}
a.paper:hover .t,a.rec:hover .t{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
a.paper:hover .v,a.rec:hover .v{color:var(--accent)}

.status{background:none;border:0;border-left:2px solid var(--ink);padding:2px 0 2px 26px}
.status .body{color:var(--ink-2);max-width:70ch}

.about{display:grid;grid-template-columns:1fr;gap:18px;max-width:70ch}
.about .who{font-size:17px;color:var(--ink-2);line-height:1.6}
.about .who b{color:var(--ink);font-weight:600}
.idlinks{font-family:var(--mono);font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:16px}

footer{border-top:1px solid var(--line);padding:34px 0 46px;background:var(--surface-2)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;
  font-family:var(--mono);font-size:12.5px;color:var(--muted)}
footer a{color:var(--ink-2)}
.footnav{display:flex;flex-wrap:wrap;gap:18px;width:100%;padding-bottom:20px;margin-bottom:4px;
  border-bottom:1px solid var(--line)}

/* ==========================================================================
   NEW COMPONENTS — added when the site was split into function pages
   ======================================================================== */

/* page masthead for sub-pages: tighter than the home hero, same voice */
.masthead{padding:52px 0 34px}
.masthead h1{font-size:clamp(26px,3.9vw,38px);line-height:1.14;letter-spacing:-0.018em;max-width:20ch}
.masthead .lede{font-size:clamp(16.5px,2vw,18.5px);color:var(--ink-2);max-width:64ch;margin:20px 0 0;line-height:1.58}
.masthead .kick{border-bottom:0;padding-bottom:0;margin-bottom:18px}
.mast-meta{font-family:var(--mono);font-size:12px;color:var(--muted);margin:22px 0 0;
  padding-top:14px;border-top:1px solid var(--line);line-height:1.85}

/* the gap: two answers to the same question, side by side */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.ans{border:1px solid var(--line-strong);border-radius:2px;background:var(--surface);
  display:flex;flex-direction:column}
.ans.good{border-color:var(--ink);background:var(--ink)}
.ans-h{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);padding:12px 20px;border-bottom:1px solid var(--line)}
html[lang^="zh"] .ans-h{letter-spacing:0.05em;text-transform:none;font-size:12px}
.ans.good .ans-h{color:#9DA396;border-bottom-color:rgba(255,255,255,0.14)}
.ans-b{padding:20px 22px 22px;flex:1}
.ans-q{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:0 0 14px;line-height:1.6}
.ans.good .ans-q{color:#8B9186}
.ans-t{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0}
.ans.good .ans-t{color:#D6D9D0}
.ans-flags{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.ans.good .ans-flags{border-top-color:rgba(255,255,255,0.14);color:#A9AEA2}
.ans-flags li{display:grid;grid-template-columns:16px 1fr;gap:9px;margin:0 0 9px}
.ans-flags li:last-child{margin-bottom:0}
.ans-flags .m{font-family:var(--mono);font-size:12px;line-height:1.5;padding-top:1px;color:var(--block)}
.ans.good .ans-flags .m{color:#7FD79A}

/* the answer envelope: a JSON-shaped block on the dark ground */
.env{background:var(--ink);color:#D6D9D0;border-radius:2px;padding:20px 22px;overflow-x:auto;
  font-family:var(--mono);font-size:13px;line-height:1.75;margin:0}
.env .k{color:#8B9186}
.env .s{color:#9DBFD6}
.env .n{color:#E7B667}
.env .g{color:#7FD79A}
.env .r{color:#E88A85}
.env .c{color:#6E7469}
.envcap{font-family:var(--mono);font-size:12px;color:var(--muted);margin:12px 2px 0;line-height:1.7;max-width:76ch}

/* numbered pillar cards that route to the function pages */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:2px;overflow:hidden;margin-top:8px}
@media(max-width:760px){.pillars{grid-template-columns:1fr}}
.pil{background:var(--surface);padding:24px 26px 22px;display:block;color:inherit}
.pil:hover{background:var(--surface-2)}
.pil .ix{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:0.06em}
.pil h3{font-size:19px;margin:9px 0 7px;color:var(--ink)}
.pil:hover h3{color:var(--accent)}
.pil p{margin:0;font-size:14.5px;line-height:1.58;color:var(--ink-2)}
.pil .go{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:14px;display:block}
.pil:hover .go{color:var(--accent)}

/* recruitment band */
.band{border:1px solid var(--ink);border-radius:2px;background:var(--surface);padding:32px 34px}
.band h2{font-size:clamp(21px,2.8vw,28px);line-height:1.22;letter-spacing:-0.015em;margin:0 0 14px}
.band .body{max-width:68ch}
.band .cta{margin:24px 0 0}

/* official data table */
.tbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:15px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:13px 16px 13px 0;border-bottom:1px solid var(--line)}
.tbl thead th{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--muted);font-weight:400;border-bottom:1px solid var(--line-strong);padding-bottom:9px}
html[lang^="zh"] .tbl thead th{letter-spacing:0.03em;text-transform:none;font-size:12px}
.tbl td{color:var(--ink-2);line-height:1.55}
.tbl td:first-child{color:var(--ink)}
.tbl .mono{font-family:var(--mono);font-size:13px;white-space:nowrap;color:var(--ink)}
.tbl-scroll{overflow-x:auto;margin-top:8px}
@media(max-width:640px){.tbl{font-size:14px}.tbl th,.tbl td{padding-right:12px}}

/* SDG mapping rows: typographic labels, no marks, no emblem */
.sdg{border-top:1px solid var(--line-strong);margin-top:10px}
.sdgrow{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px 28px;
  padding:22px 0;border-bottom:1px solid var(--line)}
@media(max-width:720px){.sdgrow{grid-template-columns:1fr;gap:8px}}
.sdgtag{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:0.04em;padding-top:2px}
.sdgtag span{display:block;font-size:11px;color:var(--muted);letter-spacing:0.02em;margin-top:5px;line-height:1.5}
.sdgrow h3{font-size:16.5px;margin:0 0 6px}
.sdgrow p{margin:0;font-size:15px;line-height:1.58;color:var(--ink-2);max-width:62ch}
.sdgrow p + p{margin-top:9px}

/* callout / caveat */
.note-box{border:1px solid var(--line-strong);border-left:3px solid var(--muted);border-radius:2px;
  background:var(--surface-2);padding:20px 24px;margin-top:28px}
.note-box p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:74ch}
.note-box p + p{margin-top:11px}
.note-box .nh{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
html[lang^="zh"] .note-box .nh{letter-spacing:0.05em;text-transform:none;font-size:12px}

/* ------------------------------------------------------------------ form */
.form{margin-top:10px}
.fs{border:0;padding:0;margin:0 0 38px}
.fs legend{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-2);padding:0;margin:0 0 4px;border-bottom:1px solid var(--line);
  width:100%;padding-bottom:9px}
html[lang^="zh"] .fs legend{letter-spacing:0.05em;text-transform:none;font-size:12.5px}
.fs .fsnote{font-size:14px;color:var(--muted);line-height:1.55;margin:12px 0 20px;max-width:66ch}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:680px){.frow{grid-template-columns:1fr}}
.f{margin:0 0 20px}
.f label,.f .flab{display:block;font-size:14px;font-weight:500;color:var(--ink);margin:0 0 6px}
.f .hint{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 8px}
.f .req{color:var(--block);font-family:var(--mono);font-size:12px;margin-left:5px}
.f input[type=text],.f input[type=email],.f input[type=url],.f select,.f textarea{
  width:100%;font-family:var(--sans);font-size:15.5px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:2px;padding:11px 12px;line-height:1.5}
.f textarea{min-height:112px;resize:vertical}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--ink-2)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 2px var(--accent-soft)}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px 20px;
  border:1px solid var(--line);border-radius:2px;background:var(--surface);padding:16px 18px}
.chk{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;
  font-size:14.5px;color:var(--ink-2);line-height:1.5;cursor:pointer;margin:0}
.chk input{margin:3px 0 0;accent-color:var(--accent);width:16px;height:16px}
.chk.wide{grid-column:1/-1;align-items:start}
.declare{border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:2px;
  background:var(--surface);padding:20px 24px;margin:0 0 26px}
.declare .chk{font-size:14.5px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fsubmit{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding-top:8px}
.fsubmit .btn{padding:13px 26px;font-size:15.5px}
.fsubmit .alt{font-size:13.5px;color:var(--muted);line-height:1.55;max-width:44ch}

/* thanks page */
.thanks{max-width:60ch;padding:78px 0 40px}
.thanks h1{font-size:clamp(26px,3.6vw,36px);line-height:1.18;letter-spacing:-0.018em}
.thanks p{font-size:17px;line-height:1.65;color:var(--ink-2);margin:20px 0 0}

/* small utility */
.tight{padding-top:0}
.nopad-b{padding-bottom:26px}
.kv{font-family:var(--mono);font-size:13px;color:var(--ink-2);line-height:2;margin:16px 0 0}
.kv b{color:var(--ink);font-weight:500}

/* ==========================================================================
   REPOSITIONING COMPONENTS — added when the site stopped describing itself as
   a register and started describing itself as the layer underneath an agent.
   ======================================================================== */

/* the pipeline: primary law at one end, an agent's action at the other */
.pipe{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:2px;overflow:hidden;margin-top:10px}
.pstep{background:var(--surface);padding:18px 14px 16px;display:flex;flex-direction:column;gap:6px}
.pstep:first-child{background:var(--surface-2)}
.pstep:last-child{background:var(--ink)}
.pstep:last-child .pl{color:#EDEFEB}
.pstep:last-child .pg{color:#9DA396}
.pstep:last-child .pi{color:#7FD79A}
.pi{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;color:var(--accent)}
.pl{font-family:var(--serif);font-size:15.5px;font-weight:600;line-height:1.25;color:var(--ink)}
.pg{font-size:12.5px;line-height:1.45;color:var(--ink-2);margin:0}
@media(max-width:900px){.pipe{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.pipe{grid-template-columns:minmax(0,1fr)}}
.pipecap{font-family:var(--mono);font-size:12px;color:var(--muted);margin:14px 2px 0;line-height:1.7;max-width:78ch}

/* numbered thesis blocks: the argument, stated as three problems */
.props{margin-top:8px;border-top:2px solid var(--ink)}
.prop{display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;padding:28px 0;
  border-bottom:1px solid var(--line)}
@media(max-width:640px){.prop{grid-template-columns:minmax(0,1fr);gap:10px}}
.prop .pn{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;color:var(--accent);padding-top:6px}
.prop h3{font-size:clamp(18px,2.2vw,22px);line-height:1.3;margin:0 0 10px;letter-spacing:-0.01em}
.prop p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:66ch}
.prop p + p{margin-top:10px}
.prop ul{margin:12px 0 0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 22px;
  font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.prop ul li::before{content:"— ";color:var(--muted)}

/* three-up pillar grid, for the six surfaces */
.pillars.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.pillars.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.pillars.three{grid-template-columns:minmax(0,1fr)}}

/* scope statement: what is covered, and what is method rather than coverage */
.scope{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:2px;overflow:hidden;margin-top:26px}
@media(max-width:760px){.scope{grid-template-columns:minmax(0,1fr)}}
.scope > div{background:var(--surface);padding:24px 26px}
.scope h3{font-size:16px;margin:0 0 8px}
.scope p{margin:0;font-size:14.5px;line-height:1.58;color:var(--ink-2)}
.scope ul{margin:12px 0 0;padding:0;list-style:none;font-family:var(--mono);font-size:12.5px;
  line-height:1.9;color:var(--ink-2)}
.scope ul li::before{content:"· ";color:var(--muted)}
.scope .now{border-left:3px solid var(--clear)}
.scope .next{border-left:3px solid var(--line-strong)}
.scope .next li{color:var(--muted)}

/* assurance levels, for KYA */
.lvls{margin-top:10px;border-top:1px solid var(--line-strong)}
.lvl{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px 26px;padding:22px 0;
  border-bottom:1px solid var(--line)}
@media(max-width:640px){.lvl{grid-template-columns:minmax(0,1fr);gap:6px}}
.lvl .lt{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:0.04em;padding-top:2px}
.lvl h3{font-size:16.5px;margin:0 0 6px}
.lvl p{margin:0;font-size:15px;line-height:1.58;color:var(--ink-2);max-width:64ch}
.lvl p + p{margin-top:8px}
.lvl .no{font-size:13.5px;color:var(--muted)}

/* a masthead headline built from three parallel clauses needs a wider measure than
   the default 20ch, which otherwise stacks it into a column four lines deep */
.masthead h1.wide{max-width:30ch}


/* ==== appended by the v0.11.0 pass — see cbsr-additions.css ==== */
/* ============================================================================
   cbsr-additions.css — append to assets/cbsr.css.

   Design direction, stated so later edits can be judged against it:

     The page is a document, not a landing page. Serif carries argument, mono
     carries anything the build computed, sans carries interface controls, and
     none of the three does another's job. Colour is functional only: the one
     accent is spent on evidence state, never on decoration. There is no hero
     image, no gradient, and no transition — a register's authority comes from
     being dated and still, and motion would read as a product.

     The signature element is the fraction. Every figure the site publishes is
     shown with its denominators, because the defect this redesign exists to
     remove was a single number published without one.

   Every value below reuses the tokens already declared in cbsr.css.
   ========================================================================= */

/* ------------------------------------------------------------- masthead -- */
.masthead{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  margin:0 0 26px;padding-bottom:10px;
  border-bottom:2px solid var(--ink);
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ink-2);
}
.mh-name{color:var(--ink)}
.mh-sep{color:var(--line-strong)}
.mh-item{font-variant-numeric:tabular-nums}
.mh-doi{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--line-strong)}
.mh-doi:hover{color:var(--accent);text-decoration-color:var(--accent)}
html[lang^="zh"] .masthead{letter-spacing:0}

/* ---------------------------------------------------------- hero rework -- */
.hero h1{
  font-size:clamp(28px,4.4vw,46px);line-height:1.14;letter-spacing:-0.015em;
  margin:0 0 18px;max-width:19ch;
}
html[lang^="zh"] .hero h1{max-width:24ch;line-height:1.28;letter-spacing:0}
.hero .lede{max-width:60ch;font-family:var(--serif);font-size:17px;line-height:1.66}

/* --------------------------------------------------------- the fraction --
   The signature. Tabular numerals, hairline frame, no rounding: the figure is
   read off an instrument, not presented on a card. */
.ledger{border:1px solid var(--line-strong);background:var(--surface);padding:18px 20px 16px}
.lg-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.lg-title{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2)}
.lg-stamp{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-align:right}
.lg-stamp[data-live-state="offline"]{color:var(--gate)}

.lg-fraction{display:flex;align-items:baseline;gap:10px;margin:18px 0 2px;
  font-family:var(--mono);font-variant-numeric:tabular-nums;line-height:1}
.lg-num{font-size:clamp(44px,7.2vw,66px);font-weight:500;color:var(--gate)}
.lg-slash{font-size:26px;color:var(--line-strong)}
.lg-den{font-size:26px;color:var(--ink-2)}
.lg-den.lg-total{color:var(--muted)}

.lg-legend{display:grid;gap:12px;margin:16px 0 0;padding:0}
.lg-legend div{margin:0;display:grid;grid-template-columns:minmax(0,140px) 1fr;gap:10px;
  padding-top:9px;border-top:1px solid var(--line)}
.lg-legend dt{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink)}
.lg-legend dd{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.lg-why{margin:16px 0 0;padding-top:12px;border-top:2px solid var(--ink);
  font-size:12.5px;line-height:1.62;color:var(--ink-2)}
.lg-why b{font-family:var(--mono);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
@media(max-width:520px){.lg-legend div{grid-template-columns:1fr;gap:2px}}

/* ------------------------------------------------------------- a record --
   The artifact panel. Deliberately dense and squared off; this should read
   like a docket entry, which is what it is. */
.rec{border:1px solid var(--line-strong);background:var(--surface);padding:0;margin:26px 0 0}
.rec-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:11px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.rec-id{font-family:var(--mono);font-size:12px;color:var(--ink)}
.rec-jur{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

.rec-claim{margin:0;padding:20px 16px 16px;font-family:var(--serif);
  font-size:clamp(18px,2.4vw,23px);line-height:1.42;color:var(--ink);max-width:52ch}

.rec-src{display:grid;gap:0;margin:0;padding:0 16px 16px}
.rec-src div{display:grid;grid-template-columns:minmax(0,120px) 1fr;gap:12px;margin:0;
  padding:7px 0;border-top:1px solid var(--line)}
.rec-src dt{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.rec-src dd{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2);word-break:break-word}
@media(max-width:520px){.rec-src div{grid-template-columns:1fr;gap:2px}}

/* Six axes as one strip. The strip is the point: the axes are orthogonal, so
   they are shown side by side and equally weighted rather than as a score. */
.axes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ax{background:var(--surface);padding:10px 10px 9px;min-width:0}
.ax-k{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.ax-v{display:block;font-family:var(--mono);font-size:11px;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.ax.ok .ax-v{color:var(--clear)}
.ax.no .ax-v{color:var(--ink-2)}
.ax.binding{box-shadow:inset 0 -3px 0 var(--gate)}
.ax.binding .ax-v{color:var(--gate)}
html[lang^="zh"] .ax-k{letter-spacing:.02em}
@media(max-width:760px){.axes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:420px){.axes{grid-template-columns:repeat(2,minmax(0,1fr))}}

.rec-verdict{margin:0;padding:16px;font-size:13.5px;line-height:1.62;color:var(--ink-2);
  max-width:70ch}
.rec-verdict b{font-family:var(--mono);font-weight:500;color:var(--gate)}
.rec-foot{margin:16px 0 0;max-width:70ch;font-size:13px;line-height:1.6;color:var(--muted)}

/* ------------------------------------------------------------ stillness --
   No transitions anywhere in the new components, and reduced motion honoured
   for anything inherited from the older stylesheet. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}


/* --------------------------------------------------- accessibility ------
   A skip link is the cheapest real accessibility win on a page with a nine-item
   nav: without it a keyboard user tabs the whole masthead on every page. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;
  padding:10px 16px;font-family:var(--mono);font-size:13px}
.skip:focus{left:0;color:#fff}

/* The OpenSSF badge is an image of record, not decoration: it must stay legible
   and must not be stretched by the footer's flex layout. */
.badge-ossf{display:inline-flex;align-items:center;line-height:0;flex:none}
.badge-ossf img{display:block;height:20px;width:auto}

/* ----------------------------------------------------- the worklist -----
   Rendered from the register at run time. Each row is one bounded task a new
   contributor can finish alone — which is what OpenSSF `small_tasks` asks for
   and, more importantly, what the reviewer programme actually needs. */
.wl{border:1px solid var(--line-strong);background:var(--surface);margin:20px 0 0}
.wl-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:11px 16px;border-bottom:1px solid var(--line);background:var(--surface-2);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2)}
.wl-count{letter-spacing:0;text-transform:none;color:var(--muted)}
.wl-list{list-style:none;margin:0;padding:0;max-height:420px;overflow:auto}
.wl-list li{display:grid;grid-template-columns:minmax(0,90px) 1fr minmax(0,150px);gap:14px;
  padding:9px 16px;border-top:1px solid var(--line);align-items:baseline}
.wl-list li:first-child{border-top:0}
.wl-cell{font-family:var(--mono);font-size:11px;color:var(--ink)}
.wl-what{font-size:13px;line-height:1.5;color:var(--ink-2);min-width:0}
.wl-need{font-family:var(--mono);font-size:10.5px;color:var(--gate);text-align:right}
.wl-state{padding:14px 16px;margin:0;font-size:13px;color:var(--muted)}
@media(max-width:640px){.wl-list li{grid-template-columns:1fr;gap:3px}
  .wl-need{text-align:left}}