/* XMM Proposal Agent — 并行传送带架构说明页
   Design tokens inherited from dashboard/proposal-agent/styles.css so this page
   reads as part of the same family. Dark-only, matching the house design language.
   CSP note: _headers sets style-src 'self' — every rule lives here, and the page
   uses NO inline style attributes and NO script. Diagrams are static inline SVG. */

:root {
  --void: #071017;
  --night: #0b1721;
  --panel: #102331;
  --panel-raised: #142d3e;
  --line: rgba(186, 222, 232, 0.18);
  --line-strong: rgba(186, 222, 232, 0.36);
  --ink: #f2f8f7;
  --muted: #b1c3c8;
  --dim: #7f989f;
  --signal: #a9e85a;
  --signal-ink: #102310;
  --cyan: #5ed9e8;
  --amber: #ffc76a;
  --danger: #ff8c93;
  --violet: #b4a4ff;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans CJK SC", "Microsoft YaHei", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --radius: 1.25rem;
}

* { box-sizing: border-box; }
html { background: var(--void); scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  padding: 0 0 6rem;
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 4%, rgba(94, 217, 232, 0.12), transparent 26rem),
    radial-gradient(circle at 2% 34%, rgba(169, 232, 90, 0.075), transparent 30rem),
    linear-gradient(180deg, #09141d 0%, var(--void) 58rem);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
}
::selection { color: var(--signal-ink); background: var(--signal); }
a { color: var(--cyan); text-underline-offset: 0.18em; }
a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }

.shell { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.prose { max-width: 42rem; }

.skip-link {
  position: fixed; z-index: 30; top: 12px; left: 12px; padding: 0.65rem 0.85rem;
  color: var(--signal-ink); background: var(--signal); border-radius: 0.5rem;
  text-decoration: none; transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- masthead ---------- */
.mast { padding: clamp(3.5rem, 8vw, 6rem) 0 2.25rem; border-bottom: 1px solid var(--line); }
.eyebrow {
  margin: 0 0 1.1rem;
  color: var(--cyan); font-family: var(--mono); font-size: 0.71rem;
  font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
}
h1 {
  max-width: 34ch; margin: 0 0 1.1rem;
  font-size: clamp(2rem, 4.6vw, 3.35rem); font-weight: 750;
  line-height: 1.06; letter-spacing: -0.04em; text-wrap: balance;
}
.standfirst { max-width: 48ch; margin: 0; color: var(--muted); font-size: 1.08rem; }
.mast-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.9rem; margin-top: 2rem;
  color: var(--dim); font-family: var(--mono); font-size: 0.78rem;
}

/* ---------- sections ---------- */
section { padding-top: clamp(3rem, 6vw, 4.75rem); }
.kicker {
  margin: 0 0 0.6rem;
  color: var(--signal); font-family: var(--mono); font-size: 0.71rem;
  font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
}
h2 {
  max-width: 30ch; margin: 0 0 0.55rem;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem); font-weight: 720;
  line-height: 1.2; letter-spacing: -0.028em; text-wrap: balance;
}
h3 {
  max-width: 34ch; margin: 2.4rem 0 0.5rem;
  font-size: 1.04rem; font-weight: 700; letter-spacing: -0.012em;
}
.dek { max-width: 52ch; margin: 0 0 1.6rem; color: var(--muted); }
p { max-width: 42rem; margin: 0 0 1.05rem; }
ul, ol { max-width: 42rem; margin: 0 0 1.05rem; padding-left: 1.3rem; }
li { margin-bottom: 0.5rem; }
li::marker { color: var(--dim); }
strong { font-weight: 700; }

code {
  padding: 0.1em 0.36em; border-radius: 4px;
  background: rgba(94, 217, 232, 0.12); color: #d8f4f8;
  font-family: var(--mono); font-size: 0.855em; white-space: nowrap;
}

/* ---------- figures ---------- */
figure { margin: 2.1rem 0 2.4rem; }
.plate {
  padding: 1.4rem 1.15rem; overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(20, 45, 62, 0.7), rgba(11, 23, 33, 0.9));
}
.plate svg { display: block; width: 100%; height: auto; min-width: 640px; }
figcaption {
  max-width: 64ch; margin-top: 0.8rem;
  color: var(--dim); font-family: var(--mono); font-size: 0.755rem; line-height: 1.62;
}
figcaption b { color: var(--muted); font-weight: 700; }

/* ---------- inline SVG type ---------- */
.s-box { fill: rgba(16, 35, 49, 0.92); stroke: var(--line-strong); stroke-width: 1; }
.s-box-alt { fill: rgba(20, 45, 62, 0.95); stroke: var(--line-strong); stroke-width: 1; }
.s-box-sig { fill: rgba(169, 232, 90, 0.14); stroke: rgba(169, 232, 90, 0.55); stroke-width: 1; }
.s-box-cyan { fill: rgba(94, 217, 232, 0.13); stroke: rgba(94, 217, 232, 0.5); stroke-width: 1; }
.s-box-danger { fill: rgba(255, 140, 147, 0.14); stroke: rgba(255, 140, 147, 0.55); stroke-width: 1; }
.s-box-amber { fill: rgba(255, 199, 106, 0.14); stroke: rgba(255, 199, 106, 0.5); stroke-width: 1; }
.s-group { fill: rgba(255, 255, 255, 0.022); stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.s-t { fill: var(--ink); font-family: var(--sans); font-size: 12.5px; }
.s-t-b { fill: var(--ink); font-family: var(--sans); font-size: 12.5px; font-weight: 700; }
.s-t-s { fill: var(--muted); font-family: var(--sans); font-size: 11px; }
.s-m { fill: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.s-m-sig { fill: var(--signal); font-family: var(--mono); font-size: 10.5px; }
.s-m-cyan { fill: var(--cyan); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; }
.s-m-danger { fill: var(--danger); font-family: var(--mono); font-size: 10.5px; }
.s-m-amber { fill: var(--amber); font-family: var(--mono); font-size: 10.5px; }
.s-arrow { fill: none; stroke: var(--line-strong); stroke-width: 1.4; }
.s-arrow-sig { fill: none; stroke: rgba(169, 232, 90, 0.6); stroke-width: 1.4; }
.s-rule { stroke: var(--line); stroke-width: 1; }
.s-barrier { stroke: var(--danger); stroke-width: 1.4; stroke-dasharray: 4 4; }
.s-bar-cyan { fill: rgba(94, 217, 232, 0.55); }
.s-bar-sig { fill: rgba(169, 232, 90, 0.55); }
.s-bar-danger { fill: rgba(255, 140, 147, 0.5); }
.s-bar-amber { fill: rgba(255, 199, 106, 0.5); }
.s-bar-idle { fill: rgba(186, 222, 232, 0.09); }

/* ---------- matrix table ---------- */
.mtx { border-collapse: collapse; font-family: var(--mono); font-size: 0.76rem; }
.mtx th, .mtx td {
  padding: 0.42rem 0.6rem; border: 1px solid var(--line); text-align: center; white-space: nowrap;
}
.mtx th { color: var(--muted); font-weight: 700; letter-spacing: 0.05em; }
.mtx th.rowh { color: var(--ink); text-align: left; }
.mtx td.done { background: rgba(94, 217, 232, 0.2); color: var(--cyan); }
.mtx td.batch { background: rgba(169, 232, 90, 0.24); color: var(--signal); font-weight: 700; }
.mtx td.void { color: rgba(127, 152, 159, 0.55); }
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; margin-top: 0.9rem; color: var(--dim); font-family: var(--mono); font-size: 0.73rem; }
.legend span { display: inline-flex; gap: 0.45rem; align-items: center; }
.sw { display: inline-block; width: 11px; height: 11px; border: 1px solid var(--line-strong); }
.sw-done { background: rgba(94, 217, 232, 0.2); }
.sw-batch { background: rgba(169, 232, 90, 0.24); }

/* ---------- stat row ---------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px; margin: 2rem 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--line); overflow: hidden;
}
.stat { padding: 1rem 1.1rem; background: rgba(16, 35, 49, 0.88); }
.stat .k { display: block; margin-bottom: 0.35rem; color: var(--dim); font-family: var(--mono); font-size: 0.67rem; letter-spacing: 0.1em; text-transform: uppercase; }
.stat .v { font-size: 1.55rem; font-weight: 720; line-height: 1.12; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat .v.warn { color: var(--amber); }
.stat .u { font-size: 0.62em; font-weight: 600; }
.stat .n { display: block; margin-top: 0.2rem; color: var(--dim); font-size: 0.78rem; }

/* ---------- bar meters ---------- */
.bars { display: grid; gap: 0.55rem; max-width: 32rem; margin: 0.4rem 0; }
.bar-row { display: grid; grid-template-columns: 7.5rem 1fr 2.6rem; gap: 0.75rem; align-items: center; }
.bar-row .lab { color: var(--muted); font-family: var(--mono); font-size: 0.77rem; text-align: right; white-space: nowrap; }
.bar-row .track { height: 14px; border-radius: 2px; background: rgba(186, 222, 232, 0.09); }
.bar-row .fill { height: 14px; border-radius: 0 4px 4px 0; background: var(--cyan); }
.bar-row .val { color: var(--muted); font-family: var(--mono); font-size: 0.79rem; font-variant-numeric: tabular-nums; }
.bar-row.emph .lab, .bar-row.emph .val { color: var(--amber); font-weight: 700; }
.bar-row.emph .fill { background: var(--amber); }
.w38 { width: 100%; }
.w5 { width: 13.2%; }
.w2 { width: 5.3%; }
.w1 { width: 2.6%; }
.w0 { width: 0; border-radius: 0; border-left: 2px solid var(--dim); background: none; }

/* ---------- callout ---------- */
.callout {
  max-width: 42rem; margin: 2rem 0; padding: 1.2rem 1.3rem;
  border: 1px solid rgba(255, 199, 106, 0.42); border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255, 199, 106, 0.09), rgba(16, 35, 49, 0.85));
}
.callout .h { margin: 0 0 0.55rem; color: var(--amber); font-family: var(--mono); font-size: 0.71rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.callout p:last-child { margin-bottom: 0; }

/* ---------- verdict list ---------- */
.verdicts { display: grid; gap: 1px; margin: 1.9rem 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); overflow: hidden; }
.verdict { display: grid; grid-template-columns: 6rem 1fr; gap: 1.1rem; padding: 1.05rem 1.2rem; background: rgba(16, 35, 49, 0.88); }
.verdict .tag { padding-top: 0.22rem; font-family: var(--mono); font-size: 0.69rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.verdict.ok .tag { color: var(--signal); }
.verdict.no .tag { color: var(--danger); }
.verdict.mid .tag { color: var(--amber); }
.verdict p { max-width: 58ch; margin: 0; font-size: 0.96rem; }
.verdict p + p { margin-top: 0.55rem; }

/* ---------- two-column compare ---------- */
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.1rem; margin: 1.8rem 0; }
.cmp { padding: 1.15rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(11, 23, 33, 0.8); }
.cmp.next { border-color: rgba(169, 232, 90, 0.42); background: linear-gradient(150deg, rgba(169, 232, 90, 0.08), rgba(11, 23, 33, 0.88)); }
.cmp h4 { margin: 0 0 0.85rem; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.cmp.now h4 { color: var(--dim); }
.cmp.next h4 { color: var(--signal); }
.slots { display: grid; gap: 0.4rem; margin: 0 0 0.9rem; padding: 0; list-style: none; }
.slots li { padding: 0.42rem 0.6rem; border: 1px solid var(--line); border-radius: 0.5rem; background: rgba(16, 35, 49, 0.7); font-family: var(--mono); font-size: 0.76rem; }
.cmp .outcome { margin: 0; color: var(--muted); font-size: 0.9rem; }
.cmp.next .outcome { color: var(--ink); }

/* ---------- footer ---------- */
.foot { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--line); color: var(--dim); font-size: 0.88rem; }
.foot p { max-width: 62ch; }
.foot .boundary { color: var(--muted); }

@media (max-width: 680px) {
  .verdict { grid-template-columns: 1fr; gap: 0.3rem; }
  .bar-row { grid-template-columns: 5.6rem 1fr 2.4rem; }
}