/* Visual language ported from the frozen prototype (docs/RGBMAP/原型).
   The prototype is a reference for colour, type, grid and card language only;
   what the pages contain follows 站点与服务.md and the protocol. */

:root{
  --ground:#E9EEEC; --sheet:#F6F8F7; --ink:#14201B; --muted:#5B6A64; --faint:#8A9892;
  --line:#CBD5D0; --grid:rgba(20,32,27,.055); --hover:#E1E8E4;
  --r:#C8412B; --g:#13875A; --b:#2D56C8;
  --r-soft:rgba(200,65,43,.10); --g-soft:rgba(19,135,90,.10); --b-soft:rgba(45,86,200,.10);
  --ok:#13875A; --bad:#C8412B;
  --display:"Archivo","Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --body:"IBM Plex Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0C1311; --sheet:#121B18; --ink:#DDE7E2; --muted:#8A9892; --faint:#5F6E68;
    --line:#26342F; --grid:rgba(221,231,226,.045); --hover:#18231F;
    --r:#EE6E57; --g:#39C288; --b:#7898F2;
    --r-soft:rgba(238,110,87,.14); --g-soft:rgba(57,194,136,.13); --b-soft:rgba(120,152,242,.15);
    --ok:#39C288; --bad:#EE6E57;
  }
}
:root[data-theme="dark"]{
  --ground:#0C1311; --sheet:#121B18; --ink:#DDE7E2; --muted:#8A9892; --faint:#5F6E68;
  --line:#26342F; --grid:rgba(221,231,226,.045); --hover:#18231F;
  --r:#EE6E57; --g:#39C288; --b:#7898F2;
  --r-soft:rgba(238,110,87,.14); --g-soft:rgba(57,194,136,.13); --b-soft:rgba(120,152,242,.15);
  --ok:#39C288; --bad:#EE6E57;
}
*{box-sizing:border-box}
body{
  background-color:var(--ground);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px;
  color:var(--ink); font-family:var(--body); font-size:15px; line-height:1.55;
  padding-inline:20px; padding-block:0 48px;
}
a{color:inherit}
.wrap{max-width:1180px; margin:0 auto}
.mono{font-family:var(--mono); font-size:.86em; letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--b); outline-offset:2px; border-radius:3px}

/* top bar */
.bar{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; padding-block:18px 14px; border-bottom:1.5px solid var(--ink)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.logo{width:30px; height:30px; display:block}
.reg i{width:9px; height:9px; border-radius:50%; display:block; mix-blend-mode:multiply}
.reg i:nth-child(1){background:var(--r)} .reg i:nth-child(2){background:var(--g); margin-left:-6px} .reg i:nth-child(3){background:var(--b); margin-left:-6px}
.word{font-family:var(--display); font-weight:850; font-stretch:125%; font-size:22px; letter-spacing:-.01em}
.net{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em; border:1px solid var(--ink); padding:2px 7px; border-radius:2px}
.nav{display:flex; gap:18px; flex-wrap:wrap}
.nav a{text-decoration:none; font-size:14px; color:var(--muted); padding-block:2px; border-bottom:1.5px solid transparent}
.nav a:hover{color:var(--ink)} .nav a.on{color:var(--ink); border-color:var(--ink)}
.search{margin-left:auto; flex:1 1 260px; max-width:420px; display:flex}
.search input{flex:1; min-width:0; font:inherit; font-size:13.5px; background:var(--sheet); color:var(--ink); border:1px solid var(--line); border-right:0; padding:8px 11px; border-radius:3px 0 0 3px}
.search button{background:var(--ink); color:var(--sheet); border:0; padding:0 14px; border-radius:0 3px 3px 0; cursor:pointer; font-size:13px}
.note{font-size:12.5px; color:var(--muted); padding-block:8px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.note b{font-weight:600; color:var(--ink)}

/* headings */
.eyebrow{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted)}
h1,h2,h3{font-family:var(--display); text-wrap:balance; margin:0}
h1{font-weight:800; font-stretch:112%; font-size:clamp(26px,3.4vw,38px); line-height:1.1; letter-spacing:-.015em}
h2{font-weight:750; font-stretch:108%; font-size:20px; letter-spacing:-.005em}
h3{font-weight:700; font-size:15px}

/* map */
.hero{padding-block:26px 8px; display:grid; gap:6px}
.head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px}
.head h1{font-stretch:125%; font-size:clamp(30px,4.2vw,46px); letter-spacing:-.02em}
.head h1 .k{color:var(--g)}
.headhash{font-size:13px; color:var(--muted); overflow-wrap:anywhere; min-width:0}
.spec{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.spec>*{font-family:var(--mono); font-size:11.5px; padding:3px 8px; border:1px solid var(--line); background:var(--sheet); border-radius:2px; color:var(--muted); text-decoration:none}
.spec a{border-color:var(--b); color:var(--b)}
.spec a:hover{background:var(--b-soft)}
.mapbox{margin-top:14px; background:var(--sheet); border:1.5px solid var(--ink); position:relative}
.mapscroll{overflow-x:auto}
.mapscroll svg{display:block; min-width:760px; width:100%; height:auto}
.maplegend{display:flex; flex-wrap:wrap; gap:6px 18px; padding:10px 14px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted)}
.maplegend span{display:inline-flex; align-items:center; gap:6px}
.sw{width:10px; height:10px; border-radius:50%; display:inline-block}
.pin{cursor:pointer}
.pin:hover .pinline,.pin:focus .pinline{stroke-width:2.6}
.pin:focus{outline:none}
.pin:focus .bm{stroke-width:2.4}
.dot{cursor:pointer}
.dot:hover{r:6}
@media (prefers-reduced-motion:no-preference){
  .pinline{stroke-dasharray:400; stroke-dashoffset:400; animation:drive .9s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes drive{to{stroke-dashoffset:0}}
}
@media (prefers-reduced-motion:reduce){ .pinline{stroke-dasharray:none} }

/* stats */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); border:1.5px solid var(--ink); border-top:0; background:var(--sheet)}
.stat{padding:12px 14px; border-right:1px solid var(--line); display:grid; gap:2px}
.stat:last-child{border-right:0}
.stat .v{font-family:var(--display); font-weight:750; font-stretch:100%; font-size:22px; font-variant-numeric:tabular-nums}
.stat .k{font-size:12px; color:var(--muted)}

/* columns */
.cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:28px; margin-top:34px}
@media (max-width:860px){ .cols{grid-template-columns:1fr} }
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1.5px solid var(--ink); margin-bottom:4px}
.sec-head a{font-size:13px; color:var(--muted)}
.row{display:grid; gap:4px 14px; padding:10px 4px; border-bottom:1px solid var(--line); text-decoration:none; align-items:center}
.row:hover{background:var(--hover)}
.row.anchor{grid-template-columns:auto 1fr auto}
.row.entry{grid-template-columns:52px minmax(0,1fr) 104px 132px 56px 84px}
.row.entry .t{text-align:right}
.row.entry .hash{font-size:12.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row.entry .opc{font-size:12px; color:var(--g)}
.row.entry .meta{font-size:11.5px; color:var(--muted); white-space:nowrap}
@media (max-width:640px){ .row.entry{grid-template-columns:44px minmax(0,1fr) 90px} .row.entry .meta,.row.entry .t{display:none} }
.bmtag{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12.5px; font-weight:500}
.op{font-size:12.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px}
.sum{font-size:13.5px; overflow-wrap:anywhere}
.t{font-size:12px; color:var(--muted); white-space:nowrap}
.seqn{font-family:var(--mono); font-size:12.5px; color:var(--muted)}

/* verify */
.verify{margin-top:40px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; border:1.5px solid var(--ink); background:var(--sheet)}
@media (max-width:860px){ .verify{grid-template-columns:1fr} }
.verify .l{padding:22px; border-right:1px solid var(--line); display:grid; gap:12px; align-content:start}
@media (max-width:860px){ .verify .l{border-right:0; border-bottom:1px solid var(--line)} }
.verify .l p{margin:0; color:var(--muted); max-width:52ch}
.verify .r{padding:14px 22px 20px}
.btn{display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:var(--sheet); border:0; padding:11px 18px; border-radius:3px; cursor:pointer; font-weight:600; font-size:14px; justify-self:start}
.btn:disabled{opacity:.55; cursor:default}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--ink); padding:7px 12px; font-weight:500; font-size:13px}
.step{display:grid; grid-template-columns:26px 1fr auto; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); align-items:start}
.step:last-child{border-bottom:0}
.step .ic{width:20px; height:20px; border-radius:50%; border:1.5px solid var(--faint); display:grid; place-items:center; font-size:12px; margin-top:1px}
.step.ok .ic{background:var(--ok); border-color:var(--ok); color:var(--sheet)}
.step.bad .ic{background:var(--bad); border-color:var(--bad); color:var(--sheet)}
.step.run .ic{border-color:var(--b); border-top-color:transparent; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .step.run .ic{animation:none} }
.step .d{font-size:11.5px; color:var(--muted); font-family:var(--mono); overflow-wrap:anywhere}
.step .c{font-family:var(--mono); font-size:12.5px; white-space:nowrap}
.verdict{margin-top:12px; padding:12px 14px; border:1.5px solid var(--ok); color:var(--ink); background:var(--g-soft); font-size:14px}
.verdict.bad{border-color:var(--bad); background:var(--r-soft)}

/* publisher */
.pub{margin-top:40px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px}
@media (max-width:860px){ .pub{grid-template-columns:1fr} }
.kv{display:grid; grid-template-columns:minmax(110px,auto) 1fr; border-top:1px solid var(--line)}
.kv>div{padding:9px 4px; border-bottom:1px solid var(--line); min-width:0}
.kv>div:nth-child(odd){color:var(--muted); font-size:13px}
.kv>div:nth-child(even){overflow-wrap:anywhere}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid currentColor; font-weight:600; white-space:nowrap}
.chip.custody{color:var(--r)}
.chip.ok{color:var(--ok)}
.chip.b{color:var(--b)}
.scope{width:100%; border-collapse:collapse; font-size:13.5px}
.scope th{text-align:left; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:500; padding:8px 4px; border-bottom:1.5px solid var(--ink)}
.scope td{padding:9px 4px; border-bottom:1px solid var(--line); vertical-align:top; width:50%}
.scope td:first-child{padding-right:14px}
.disclaim{font-size:13px; color:var(--muted); margin:12px 0 0; max-width:70ch}

/* detail views */
.crumb{font-size:13px; color:var(--muted); padding-block:22px 6px}
.crumb a{color:var(--muted)}
.dhead{display:flex; flex-wrap:wrap; align-items:end; gap:10px 18px; padding-bottom:16px; border-bottom:1.5px solid var(--ink)}
.dgrid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:30px; margin-top:22px}
@media (max-width:860px){ .dgrid{grid-template-columns:1fr} }
.tbl{overflow-x:auto}
.tbl table{width:100%; border-collapse:collapse; font-size:13.5px}
.tbl th{text-align:left; font-weight:500; color:var(--muted); font-size:12px; padding:7px 6px; border-bottom:1.5px solid var(--ink); white-space:nowrap}
.tbl td{padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl td.amt{text-align:right; font-family:var(--mono); font-size:12.5px; white-space:nowrap}
.pos{color:var(--g)} .neg{color:var(--r)}
pre.raw{background:var(--sheet); border:1px solid var(--line); padding:12px; overflow-x:auto; font-family:var(--mono); font-size:12px; line-height:1.5; margin:0; white-space:pre}
details summary{cursor:pointer; font-size:13px; color:var(--muted); padding-block:6px; font-family:var(--mono)}
.pubseg{border-top:1px solid var(--line); padding-top:6px}
.segtabs{display:flex; gap:0; margin:6px 0 0}
.segtabs button{font-family:var(--mono); font-size:11.5px; background:transparent; border:1px solid var(--line); border-bottom:0; padding:5px 12px; cursor:pointer; color:var(--muted)}
.segtabs button+button{border-left:0}
.segtabs button[aria-selected="true"]{background:var(--sheet); color:var(--ink); border-color:var(--ink)}
pre.json{margin:0; background:var(--sheet); border:1px solid var(--ink); padding:14px 16px; font-family:var(--mono); font-size:12.5px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; tab-size:2; max-height:520px; overflow:auto}
pre.json.rawline{white-space:pre-wrap; word-break:break-all; color:var(--muted)}
.jk{color:var(--b)} .js{color:var(--ink)} .jn{color:var(--g)} .jp{color:var(--faint)}
.card{background:var(--sheet); border:1.5px solid var(--ink); padding:16px 18px; display:grid; gap:10px; align-content:start}
.hashlink{text-decoration:none; border-bottom:1px dotted var(--faint)}
.hashlink:hover{border-bottom-color:var(--ink)}
.out{font-size:12px; color:var(--muted); text-decoration:none; white-space:nowrap}
.out:hover{color:var(--b)}
.inline-ok{color:var(--ok); font-weight:600; font-size:13px}
.inline-bad{color:var(--bad); font-weight:600; font-size:13px}
.empty{padding:18px 4px; color:var(--muted); font-size:14px}
/* join */
.joins{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:22px}
.joincard{display:grid; gap:12px; align-content:start; padding:22px; background:var(--sheet); border:1.5px solid var(--ink); text-decoration:none; position:relative}
.joincard:hover{background:var(--hover)}
.joincard h2{font-size:24px; font-stretch:118%}
.joincard .go{font-size:13px; font-weight:600; color:var(--muted)}
.joincard:hover .go{color:var(--ink)}
.jc-ic .sw{width:14px; height:14px}
.wiz{display:grid; gap:18px}
.wiz fieldset{border:0; border-top:1.5px solid var(--ink); padding:12px 0 0; margin:0; display:grid; gap:12px; min-width:0}
.wiz legend{font-family:var(--display); font-weight:750; font-size:16px; padding:0 10px 0 0; display:flex; align-items:center; gap:9px}
.wiz legend .n{font-family:var(--mono); font-size:11px; width:20px; height:20px; border:1.5px solid var(--ink); border-radius:50%; display:grid; place-items:center; font-weight:500}
.wiz label{display:grid; gap:5px; font-size:12.5px; color:var(--muted); min-width:0}
.wiz input:not([type=radio]):not([type=file]),.wiz select{font:inherit; font-size:14px; color:var(--ink); background:var(--sheet); border:1px solid var(--line); border-radius:3px; padding:8px 10px; min-width:0; width:100%}
.wiz input:focus,.wiz select:focus{outline:none; border-color:var(--b); box-shadow:0 0 0 3px var(--b-soft)}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.f3{display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px}
@media (max-width:520px){ .f2,.f3{grid-template-columns:1fr} }
.inrow{display:flex; gap:8px}
.inrow input{flex:1}
.inrow .btn{white-space:nowrap}
.logo-row{display:flex; align-items:center; gap:14px}
.drop{cursor:pointer}
.drop input{position:absolute; width:1px; height:1px; opacity:0}
.lp{width:72px; height:72px; border:1.5px dashed var(--faint); display:grid; place-items:center; font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--faint); background:var(--sheet); overflow:hidden}
.lp img{width:100%; height:100%; object-fit:contain}
.drop:focus-within .lp{border-color:var(--b)}
.radios{display:grid; gap:8px}
.radios label{display:flex; flex-direction:row; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--line); background:var(--sheet); border-radius:3px; cursor:pointer; color:var(--ink); font-size:14px}
.radios label:has(input:checked){border-color:var(--ink)}
.radios label>span{display:grid; gap:2px}
.radios .mono{font-size:11.5px}
.radios input{margin-top:4px; accent-color:var(--ink)}
.fmsg{font-size:12.5px; color:var(--muted); min-height:1em}
.fmsg.ok{color:var(--ok)} .fmsg.bad{color:var(--bad)}
.side{display:grid; gap:16px; align-content:start}
@media (min-width:861px){ .side{position:sticky; top:16px} }
.acts{display:flex; flex-wrap:wrap; gap:10px}
.btn.ghost:disabled{opacity:.45}
footer.foot{margin-top:56px; border-top:1.5px solid var(--ink); display:grid; gap:0; font-size:13px; color:var(--muted)}
.fstat{padding-block:12px; border-bottom:1px solid var(--line)}
.fstat .live{border-color:var(--g); color:var(--g)}
.fcols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding-block:22px 26px; border-bottom:1px solid var(--line)}
@media (max-width:720px){ .fcols{grid-template-columns:repeat(2,minmax(0,1fr))} }
.fcols>div{display:grid; gap:7px; align-content:start; min-width:0}
.fcols h4{margin:0 0 4px; font-family:var(--mono); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--ink)}
.fcols a{text-decoration:none; color:var(--ink); width:fit-content; border-bottom:1px solid transparent}
.fcols a:hover{border-bottom-color:var(--ink)}
.fcols span{color:var(--faint)}
.fcols span{overflow-wrap:anywhere}
.fcols .mono{font-size:12px}
.fbase{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding-block:16px}
.fbrand{display:inline-flex; align-items:center; gap:8px; color:var(--ink)}
.fbase .mono{font-size:12px}

/* ---------- asset status area (站点与服务 §6.1.1) ---------- */
/* Two groups, visibly apart. No aggregate badge, score or pass count anywhere. */
.statusgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1.5px solid var(--ink); background:var(--sheet); margin-top:18px}
@media (max-width:900px){ .statusgrid{grid-template-columns:1fr} }
.statusgroup{padding:16px 18px; border-right:1px solid var(--line); min-width:0}
.statusgroup:last-of-type{border-right:0}
@media (max-width:900px){ .statusgroup{border-right:0; border-bottom:1px solid var(--line)} .statusgroup:last-of-type{border-bottom:0} }
.statusgroup h3{font-family:var(--mono); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin-bottom:4px}
.statusitem{border-top:1px solid var(--line); padding:10px 0}
.statusitem:first-of-type{border-top:0}
.statusitem summary{font-family:var(--body); color:var(--ink); padding-block:0; display:grid; grid-template-columns:16px minmax(0,1fr) auto; column-gap:9px; row-gap:2px; align-items:baseline; cursor:pointer; list-style:none}
.statusitem summary::-webkit-details-marker{display:none}
.statusitem .mark{font-size:12px}
.statusitem .label{font-size:14px; overflow-wrap:anywhere}
.statusitem .val{font-family:var(--mono); font-size:11.5px; white-space:nowrap}
.statusitem .note{font-family:var(--body); grid-column:2/-1; font-size:12px; color:var(--muted); overflow-wrap:anywhere}
.statusitem[data-ev] .note::after{content:' · evidence'; color:var(--faint)}
.statusitem[data-ev][open] .note::after{content:''}
.statusitem[open]{padding-bottom:4px}
.statusitem .why{padding:2px 0 6px 25px}
.statusitem .why .kv{border-top:0}
.statusitem .why .kv>div{padding:4px 0; font-size:12px; border-bottom:0}
.statusitem .why .kv>div:nth-child(odd){font-size:11.5px}
.plain summary{cursor:default}
.dgrid>.card{align-self:start}
.s-yes .mark,.s-yes .val{color:var(--ok)}
.s-no .mark,.s-no .val{color:var(--muted)}
.s-unknown .mark,.s-unknown .val{color:var(--faint)}
.statusnote{font-size:12.5px; color:var(--muted); padding:10px 18px; border-top:1px solid var(--line); grid-column:1/-1}

/* warnings sit above the status area, each on its own, with its trigger named */
.warn{display:grid; gap:6px; padding:12px 16px; border:1.5px solid var(--bad); background:var(--r-soft); margin-top:18px}
.warn.dispute{border-color:var(--b); background:var(--b-soft)}
.warn h3{font-size:14px; font-family:var(--display)}
.warn .trigger{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}
.warn p{margin:0; font-size:13.5px; max-width:74ch}
.warn ul{margin:2px 0 0; padding-left:18px; font-size:13px; display:grid; gap:3px}
/* both sides of a dispute get the same width and the same position */
.sides{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:4px}
@media (max-width:640px){ .sides{grid-template-columns:1fr} }
.side-box{background:var(--sheet); border:1px solid var(--line); padding:10px 12px; font-size:13px}
.side-box h4{margin:0 0 4px; font-family:var(--mono); font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.12em; color:var(--muted)}

/* shell bits the prototype did not need */
.netpick{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em; background:var(--sheet); color:var(--ink); border:1px solid var(--ink); padding:3px 6px; border-radius:2px}
.loading{padding:40px 4px; color:var(--muted); font-size:14px}
.soon{color:var(--faint)}