/* ============================================================
   AGNOSTIX — module page components (extends styles.css)
   ============================================================ */

/* ---------- module hero ---------- */
.m-hero{border-bottom:var(--border);background:var(--paper)}
.m-hero .wrap{padding:46px 0 40px}
.m-kick{display:inline-flex;align-items:center;gap:0;border:var(--border);box-shadow:var(--shadow-sm);width:max-content;margin-bottom:26px}
.m-kick .n{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;letter-spacing:.1em;background:var(--ink);color:var(--paper);padding:8px 12px}
.m-kick .l{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;background:var(--chartreuse);white-space:nowrap}
.m-hero h1{font-family:'Archivo Expanded',sans-serif;font-weight:800;font-size:clamp(40px,7vw,96px);line-height:.9;letter-spacing:-.02em;text-transform:uppercase}
.m-hero h1 .lime{color:var(--ink);background:var(--chartreuse);padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.m-hero h1 .cy{color:var(--ink);background:var(--cyan);padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.m-hero .desc{max-width:34em;margin:30px 0 30px;font-size:18px;line-height:1.55;font-weight:500}
.m-hero .desc strong{font-weight:800}
.m-hero .hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- flowmap (Studio node graph) ---------- */
.flowmap{display:flex;align-items:stretch;gap:0;border:var(--border);box-shadow:var(--shadow);background:var(--paper);overflow-x:auto}
.flowmap .node{flex:1 1 0;min-width:130px;padding:22px 18px;border-right:var(--border);position:relative;display:flex;flex-direction:column;gap:8px}
.flowmap .node:last-child{border-right:none}
.flowmap .node .nn{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;font-weight:700}
.flowmap .node .nh{font-family:'Archivo Expanded',sans-serif;font-weight:800;font-size:18px;text-transform:uppercase;line-height:.95}
.flowmap .node .nd{font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.45;opacity:.7;margin-top:2px}
.flowmap .node.on{background:var(--chartreuse)}
.flowmap .node.dark{background:var(--ink);color:var(--paper)}
.flowmap .node::after{content:'→';position:absolute;right:-11px;top:50%;transform:translateY(-50%);z-index:4;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:16px;background:var(--paper);color:var(--ink);width:22px;height:22px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center}
.flowmap .node:last-child::after{display:none}

/* ---------- in/out big (module IO) ---------- */
.io-cols{display:grid;grid-template-columns:1fr 1fr;gap:0;border-left:var(--border);border-top:var(--border)}
.io-cols .iocol{border-right:var(--border);border-bottom:var(--border);padding:26px 26px;background:var(--paper)}
.io-cols .iocol.out{background:var(--ink);color:var(--paper)}
.io-cols .iocol .ioh{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.io-cols .iocol .ioh::before{content:'';width:9px;height:9px;background:var(--ink)}
.io-cols .iocol.out .ioh::before{background:var(--cyan)}
.io-cols .iolist{list-style:none;display:flex;flex-direction:column;gap:0;border:2px solid currentColor}
.io-cols .iolist li{font-family:'JetBrains Mono',monospace;font-size:13.5px;font-weight:600;padding:12px 14px;border-bottom:2px solid currentColor;display:flex;align-items:center;gap:10px}
.io-cols .iolist li:last-child{border-bottom:none}
.io-cols .iocol:not(.out) .iolist li::before{content:'·';color:var(--ink)}
.io-cols .iocol.out .iolist li::before{content:'→';color:var(--chartreuse);font-weight:700}
@media(max-width:760px){.io-cols{grid-template-columns:1fr}}

/* ---------- lab notes (Building Agnostix) ---------- */
.notes{border-top:var(--border)}
.note-row{display:grid;grid-template-columns:130px 1fr auto;gap:24px;align-items:center;padding:22px 0;border-bottom:var(--border);transition:background .15s,padding-left .15s}
.note-row:hover{background:var(--paper-2);padding-left:14px}
.note-row .nd{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px}
.note-row .nt{font-family:'Archivo Expanded',sans-serif;font-weight:700;font-size:clamp(17px,2vw,26px);text-transform:uppercase;line-height:1}
.note-row .nx{font-family:'JetBrains Mono',monospace;font-size:11.5px;opacity:.6;text-transform:uppercase;letter-spacing:.06em}
@media(max-width:640px){.note-row{grid-template-columns:84px 1fr}.note-row .nx{display:none}}

/* ---------- dataset cards ---------- */
.ds-grid{display:grid;grid-template-columns:repeat(3,1fr);border-left:var(--border);border-top:var(--border)}
.ds{border-right:var(--border);border-bottom:var(--border);padding:24px 22px;background:var(--paper);transition:background .15s}
.ds:hover{background:var(--paper-2)}
.ds .dt{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;font-weight:700;margin-bottom:12px}
.ds h4{font-family:'Archivo Expanded',sans-serif;font-weight:800;font-size:20px;text-transform:uppercase;line-height:.95;margin-bottom:8px}
.ds p{font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.5;opacity:.75}
.ds .dm{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.ds .dm span{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;border:2px solid var(--ink);padding:3px 7px;text-transform:uppercase}
@media(max-width:760px){.ds-grid{grid-template-columns:1fr}}

/* ---------- big metric band ---------- */
.metband{display:grid;grid-template-columns:repeat(4,1fr);border-left:var(--border);border-top:var(--border)}
.metband .mc{border-right:var(--border);border-bottom:var(--border);padding:26px 22px;background:var(--paper)}
.metband .mc .mv{font-family:'Archivo Expanded',sans-serif;font-weight:900;font-size:clamp(34px,4vw,52px);line-height:.85}
.metband .mc .ml{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin-top:12px;line-height:1.4}
.metband .mc.on{background:var(--chartreuse)}
@media(max-width:760px){.metband{grid-template-columns:1fr 1fr}}