/* pages.css — layout for the four prose pages (modules, architecture,
   roadmap, lore). styles.css carries the shared tokens, header, nav, footer
   and terminal chrome; this file only styles page bodies. */

/* ---------- terminal page extras ---------- */
.st-live{color:#04140a;background:var(--green);border-color:var(--green);font-weight:700}
.term-note .ok{color:var(--green);font-weight:500}
/* The collapsed lead uses the same real/simulated colour coding as the expanded
   text, so the two states read as one continuous statement. */
.note-sum{font-size:11.5px;line-height:1.6;color:var(--dim);margin:10px 2px 0}
.note-lead strong{color:var(--amber);font-weight:500}
.note-lead .ok{color:var(--green);font-weight:500}
.note-wrap .term-note{margin-top:8px;max-width:80ch}
.term-more{font-size:12px;color:var(--dim);margin:8px 2px 0}
.term-more a{color:var(--mut);text-decoration:none;border-bottom:1px solid #22302a}
.term-more a:hover{color:var(--green);border-bottom-color:var(--green)}

/* ---------- page head ---------- */
.page{padding-bottom:20px}
.page-head{padding:44px 20px 8px;max-width:820px;margin-left:auto;margin-right:auto}
.kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin:0 0 10px}
.page-head h1{font-family:var(--ui);font-size:clamp(30px,5.6vw,46px);line-height:1.04;margin:0;letter-spacing:-.015em}
.standfirst{margin:14px 0 0;color:var(--mut);font-size:clamp(14px,2.4vw,16.5px);line-height:1.7;max-width:64ch}

.page .sec{padding:34px 20px 6px}
.page .wrap{max-width:900px}
.page .sec-h{margin-top:8px}
.lead-p{color:var(--mut);font-size:14px;line-height:1.8;max-width:70ch}
.page p{max-width:72ch}

.tag{
  display:inline-block;font-size:9.5px;letter-spacing:.12em;font-weight:700;
  padding:2px 6px;border-radius:3px;vertical-align:1px;white-space:nowrap;
}
.tag.ok{background:var(--green);color:#04140a}
.tag.sim{background:#3a2c08;color:var(--amber)}

.next{padding:34px 20px 10px;max-width:900px;margin:0 auto}
.nextlink{
  display:inline-block;font-size:13.5px;color:var(--green);text-decoration:none;
  border:1px solid #1f3327;background:#0b1a10;border-radius:8px;padding:11px 15px;
}
.nextlink:hover{background:#102618;border-color:#2c4a36}

/* ---------- modules ---------- */
.mrows{padding:20px 20px 0;max-width:900px}
.mrow{
  display:grid;grid-template-columns:64px 1fr;gap:18px;
  border-top:1px solid var(--line);padding:26px 0;
}
.mrow:first-child{border-top:0}
.mrow-n span{
  font-family:var(--ui);font-size:13px;letter-spacing:.12em;color:var(--green);
  border:1px solid #1f3327;background:#0b1a10;border-radius:6px;
  display:inline-block;padding:5px 9px;
}
.mrow-body{min-width:0}
.mrow-body h2{font-family:var(--ui);font-size:clamp(18px,3vw,23px);margin:0 0 10px;letter-spacing:-.01em}
.mrow-cmd{font-size:12px;color:var(--dim);margin:0 0 14px}
.mrow-cmd code{
  font-size:12.5px;color:var(--green);border:1px solid #1f3327;background:#0b1a10;
  padding:4px 9px;border-radius:5px;margin-left:4px;
}
.mrow-body p{font-size:13.5px;color:var(--mut);line-height:1.78;margin:0 0 12px}
.mrow-body p b{color:var(--ink);font-weight:500}
.mrow-body p em{color:var(--ink);font-style:italic}

/* ---------- architecture ---------- */
.big-callout{font-size:15px;line-height:1.7;margin:0 0 20px}
.steps{list-style:none;padding:0;margin:0;counter-reset:step}
.steps li{border-left:2px solid var(--line);padding:0 0 22px 20px;margin:0}
.steps li:last-child{border-left-color:transparent;padding-bottom:4px}
.steps h3{font-family:var(--ui);font-size:16px;margin:0 0 8px;display:flex;align-items:center;gap:10px}
.step-n{
  font-size:11px;color:#04140a;background:var(--green);border-radius:50%;
  width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  flex:none;font-weight:700;margin-left:-31px;
}
.steps p{font-size:13.5px;color:var(--mut);line-height:1.78;margin:0}
.steps code{color:var(--green);font-size:.94em}

.numlist{padding-left:20px;margin:0 0 22px}
.numlist li{font-size:13px;color:var(--mut);line-height:1.7;margin-bottom:7px}
.numlist code{color:var(--green)}
.codelist{list-style:none;padding:0;margin:0}
.codelist li{font-size:13px;color:var(--mut);margin-bottom:6px}
.codelist code{color:var(--amber);margin-right:8px}

.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.dtable{border-collapse:collapse;width:100%;min-width:640px;font-size:12.5px}
.dtable th,.dtable td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.dtable thead th{
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  background:var(--surface-2);border-bottom-color:#243029;font-weight:500;
}
.dtable tbody th{color:var(--ink);font-weight:500;white-space:nowrap}
.dtable td{color:var(--mut);line-height:1.62}
.dtable tbody tr:last-child th,.dtable tbody tr:last-child td{border-bottom:0}

/* ---------- roadmap ---------- */
.rmbig{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.rmbig li{
  display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:start;
  border:1px solid var(--line);border-radius:9px;padding:18px;background:var(--surface);
}
.rmbig-p{
  font-family:var(--ui);font-size:14px;letter-spacing:.12em;color:var(--green);font-weight:700;
}
.rmbig-p.amber{color:var(--amber)}
.rmbig-b h2{font-family:var(--ui);font-size:16px;margin:0 0 8px}
.rmbig-b p{font-size:13.5px;color:var(--mut);line-height:1.78;margin:0}
.rmbig-b code{color:var(--amber);font-size:.92em}
.rmbig-launch{border-color:#1f3d26;background:#0a1a10}
.notlist.big li{font-size:12.5px;padding:6px 12px}

/* ---------- lore ---------- */
.lore-layout{display:grid;grid-template-columns:1fr 280px;gap:34px;align-items:start}
.lore-layout>*{min-width:0}
.beat{border-left:2px solid var(--line);padding:0 0 26px 20px}
.beat-when{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);
  margin:0 0 6px;
}
.beat h2{font-family:var(--ui);font-size:17px;margin:0 0 10px}
.beat p{font-size:13.5px;color:var(--mut);line-height:1.8;margin:0 0 10px}
.beat p b{color:var(--ink);font-weight:500}
.ca-inline{font-size:11.5px;color:var(--ink);word-break:break-all}
.src{font-size:11.5px;margin:0}
.src a{color:#5fb0aa;text-decoration:underline;text-underline-offset:2px}
.src a:hover{color:var(--cyan)}
.lore-close{font-family:var(--ui);color:var(--green);font-size:18px;margin:6px 0 0;padding-left:22px}
.page .mascot{width:100%;max-width:280px;justify-self:center;filter:drop-shadow(0 18px 40px rgba(0,200,5,.12))}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .lore-layout{grid-template-columns:1fr}
  .page .mascot{max-width:200px;order:-1}
}
@media (max-width:640px){
  .page-head{padding:30px 12px 4px}
  .page .sec,.mrows,.next{padding-left:12px;padding-right:12px}
  .mrow{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .rmbig li{grid-template-columns:1fr;gap:8px;padding:15px}
  .steps li{padding-left:16px}
  .step-n{margin-left:-27px}
  .lore-close{padding-left:0}
}