/* model.css — data-model page: hero, chapter rows and the five scene stages. Tokens from tessara.css. */
.md-hero{padding:96px 0 40px;background:radial-gradient(1000px 480px at 78% -10%,#1c1c1a 0,var(--ground) 60%)}
.md-hero .eyebrow,.cap-copy .eyebrow{font:500 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.md-hero h1{font:800 clamp(2.1rem,4.8vw,3.4rem)/1.06 var(--sans);letter-spacing:-.04em;margin:16px 0 18px;max-width:20ch;text-wrap:balance}
.md-hero p{color:var(--muted);max-width:44rem;font-size:1.02rem}

.caps{padding:20px 0 40px}
.cap-row{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;padding:64px 0;border-top:1px solid var(--line)}
.cap-row.rev .scene{order:-1}
.cap-copy .eyebrow{color:var(--dim)}
.cap-copy h2{font:800 clamp(1.5rem,2.8vw,2.1rem)/1.14 var(--sans);letter-spacing:-.03em;margin:14px 0 16px}
.cap-copy p{color:var(--muted)}
.ticks{margin-top:22px;display:grid;gap:12px}
.tick{display:flex;gap:14px;align-items:flex-start;color:var(--muted);font-size:.92rem}
.tick i{flex:none;width:9px;height:9px;border-radius:1px;background:var(--accent);margin-top:8px}

.scene{container-type:inline-size;position:relative;border:1px solid var(--line);border-radius:3px;background:radial-gradient(700px 360px at 70% -10%,#1a1a18 0,var(--card) 60%);padding:18px;font:12px/1.45 var(--mono);color:var(--ink);min-width:0}
.scene-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.scene button,.scene label{font:inherit;color:inherit}
.chip{appearance:none;cursor:pointer;background:#141414;border:1px solid var(--line-2);border-radius:2px;color:var(--muted);font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 9px}
.chip:hover,.chip:focus-visible,.chip[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);outline:none}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px}
.kv dt{color:var(--dim);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding-top:2px}
.kv dd{margin:0}

/* 01 · ingest */
.ing{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ing-src{display:grid;gap:8px}
.ing-card{border:1px solid var(--line-2);background:#141414;border-radius:2px;padding:8px 10px;overflow:hidden}
.ing-card h5{font:500 9.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 6px}
.ing-card table{border-collapse:collapse;width:100%;font-size:10.5px}
.ing-card th{color:var(--dim);font-weight:400;text-align:left;padding-right:8px}
.ing-card td{padding-right:8px;white-space:nowrap}
.ing-card td.mapped{color:var(--accent)}
.ing-obj{display:grid;gap:8px;align-content:start}
.ing-obj .ing-card b{display:block;color:var(--accent);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.ing.run .ing-src .ing-card{animation:ing-in .5s var(--ease) both;animation-delay:calc(var(--i)*.25s)}
.ing.run td.mapped{animation:ing-flash .6s ease both;animation-delay:calc(.9s + var(--i)*.25s)}
.ing.run .ing-obj .ing-card{animation:ing-in .5s var(--ease) both;animation-delay:calc(1.6s + var(--i)*.2s)}
@keyframes ing-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ing-flash{0%{color:var(--ink);background:transparent}50%{background:rgba(168,255,100,.15)}100%{color:var(--accent);background:transparent}}

/* 02 · graph */
.gr{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
.gr-canvas{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:2px}
.gr-canvas svg{position:absolute;inset:0;width:100%;height:100%}
.gr-canvas line{stroke:#3a3a3a;stroke-width:.5}
.gr-canvas line.on{stroke:var(--accent)}
.gr-node{position:absolute;transform:translate(-50%,-50%);appearance:none;cursor:pointer;background:#141414;border:1px solid var(--line-2);border-radius:2px;padding:5px 7px;text-align:left;white-space:nowrap}
.gr-node small{display:block;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.gr-node[aria-pressed="true"]{border-color:var(--accent)}
.gr-node[aria-pressed="true"] small{color:var(--accent)}
.gr-node:focus-visible{outline:1px solid var(--accent)}
.gr-panel h4{font:500 13px var(--mono);margin:0 0 2px}
.gr-panel .type{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.gr-panel ul{list-style:none;padding:0;margin:10px 0 0;border-top:1px solid var(--line);padding-top:8px;color:var(--muted)}

/* 03 · provenance */
.pv{display:grid;grid-template-columns:1fr 1.2fr;gap:14px}
.pv-props{display:grid;gap:6px;align-content:start}
.pv-props button{appearance:none;cursor:pointer;display:flex;justify-content:space-between;gap:10px;background:#141414;border:1px solid var(--line-2);border-radius:2px;padding:7px 9px;text-align:left}
.pv-props button span{color:var(--dim);text-transform:uppercase;font-size:10px;letter-spacing:.12em}
.pv-props button[aria-pressed="true"]{border-color:var(--accent)}
.pv-chain{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pv-chain li{position:relative;padding:0 0 14px 20px;border-left:1px solid var(--line-2);margin-left:5px}
.pv-chain li:last-child{border-left-color:transparent}
.pv-chain li::before{content:"";position:absolute;left:-5px;top:3px;width:9px;height:9px;border-radius:1px;background:var(--line-2)}
.pv-chain li:last-child::before{background:var(--accent)}
.pv-chain b{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:500}

/* 04 · timeline */
.tl-map{position:relative;aspect-ratio:2/1;border:1px solid var(--line);border-radius:2px;margin-bottom:12px}
.tl-map svg{position:absolute;inset:0;width:100%;height:100%}
.tl-map .route{fill:none;stroke:var(--line-2);stroke-width:.6;stroke-dasharray:1.5 2}
.tl-map .berth{fill:none;stroke:#3a3a3a;stroke-width:.6}
.tl-map .ship{fill:var(--accent);transition:cx .4s var(--ease),cy .4s var(--ease)}
.tl-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tl-row input{flex:1;accent-color:var(--accent)}
.tl-row output{min-width:7ch;text-align:right;color:var(--accent)}

/* 05 · what-if */
.wi-toggles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.wi-table{width:100%;border-collapse:collapse}
.wi-table th{font-weight:400;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.wi-table td{padding:8px;border-bottom:1px solid #1f1f1f;vertical-align:top}
.wi-table td.changed{color:#ff8c82}
.wi-table td.changed::before{content:"▲ ";font-size:9px}

.md-cta{padding:40px 0 96px}
.md-cta .paper-cta{max-width:720px;margin:0 auto}

@media(max-width:900px){.cap-row{grid-template-columns:1fr;gap:28px}.cap-row.rev .scene{order:0}}
@container (max-width:620px){.ing,.gr,.pv{grid-template-columns:1fr}.gr-canvas{aspect-ratio:4/3}}
@container (max-width:420px){.gr-canvas{aspect-ratio:1/1}.gr-node{font-size:10.5px;padding:4px 5px}.ing-card td,.ing-card th{white-space:normal;word-break:break-all}}
@media(max-width:560px){.scene{padding:14px}}
@media(prefers-reduced-motion:reduce){.ing.run *{animation:none!important}.tl-map .ship{transition:none}}
.cap-copy p.plain{color:var(--ink);font-size:1.05rem;margin:-4px 0 14px}