/* Shared design system for the gate, instrument panel, explainer, portfolio and
   package pages. Same tokens and component language as the narrative page at /
   so the whole site reads as one product. */

:root{
  --teal-700:#0F766E; --teal-600:#0D9488; --teal-500:#14B8A6; --teal-400:#2DD4BF;
  --teal-100:#CCFBF1; --teal-50:#F0FDFA;
  --gold:#A16207; --gold-light:#CA8A04; --gold-50:#FEFCE8;
  --alert:#B91C1C; --alert-50:#FEF2F2;
  --green:#15803D;
  --g900:#111827; --g700:#374151; --g500:#6B7280; --g400:#9CA3AF;
  --g200:#E5E7EB; --g100:#F3F4F6; --g50:#F9FAFB;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --data:'JetBrains Mono','SF Mono',Monaco,ui-monospace,monospace;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:#fff;
  color:var(--g700);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--g900);text-wrap:balance}
h1{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
h2{font-size:clamp(20px,2.2vw,27px);font-weight:700;letter-spacing:-.015em;line-height:1.3}
h3{font-size:17px;font-weight:600}
a{color:var(--teal-700)}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem;padding-left:1.25rem}
li{margin-bottom:.4rem}

.mono{font-family:var(--data);font-size:.9em;font-variant-numeric:tabular-nums}
.digest{font-family:var(--data);color:var(--gold);word-break:break-all}

/* ---- chrome ---- */

.site-nav{
  display:flex;
  gap:1.25rem;
  flex-wrap:wrap;
  max-width:1024px;
  margin:0 auto;
  padding:20px 24px;
  border-bottom:1px solid var(--g100);
}
.site-nav a{color:var(--g700);text-decoration:none;font-size:14px}
.site-nav a:hover{color:var(--teal-700)}

.page{max-width:70ch;margin:0 auto;padding:2.5rem 1.5rem 4rem}
.page-nav{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-top:3rem;
  padding-top:1.5rem;
  border-top:1px solid var(--g100);
  font-size:14px;
}

/* ---- gate ---- */

.gate-body{display:flex;min-height:100vh;align-items:center;justify-content:center;background:var(--g50)}
.gate-card{
  max-width:46ch;
  padding:2.5rem;
  border:1px solid var(--g200);
  border-radius:20px;
  background:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.gate-form{display:flex;gap:.75rem;margin-top:1.75rem}
.gate-form input{
  flex:1;
  padding:.65rem .85rem;
  border:1px solid var(--g200);
  border-radius:10px;
  font-family:var(--data);
}
.gate-form input:focus{outline:2px solid var(--teal-400);outline-offset:1px}
.gate-form button{
  padding:.65rem 1.5rem;
  border:none;
  border-radius:999px;
  background:var(--teal-600);
  color:#fff;
  font-family:var(--sans);
  font-weight:600;
  cursor:pointer;
  transition:background 200ms ease,transform 150ms ease;
}
.gate-form button:hover{background:var(--teal-700)}
.gate-form button:active{transform:scale(.97)}
.gate-error{color:var(--alert)}

/* ---- instrument panel ---- */

.demo-page{max-width:1200px;width:100%}

.engine-banner{
  display:inline-block;
  font-family:var(--data);
  font-size:13px;
  font-weight:500;
  padding:.5rem 1rem;
  border:1px solid var(--gold-light);
  border-radius:999px;
  color:var(--gold);
}
.engine-banner[data-state="real"]{color:var(--teal-700);border-color:var(--teal-500);background:var(--teal-50)}

.start-here{
  max-width:70ch;
  padding:1.25rem 1.5rem;
  margin:1.5rem 0 2rem;
  border:1px solid var(--g200);
  border-left:3px solid var(--teal-600);
  border-radius:0 14px 14px 0;
  background:var(--g50);
}
.start-here h2{margin:0 0 .75rem;font-size:19px}
.start-here p{font-size:14.5px;color:var(--g500)}
.start-here p:last-child{margin-bottom:0}
.start-here strong{color:var(--g900)}
.start-links{font-size:13.5px}

.scenario-groups{margin:2rem 0 1rem}
.scenario-group h2{font-size:15px;font-family:var(--data);font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--teal-600);margin:0 0 .85rem}
.chip-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.75rem}

.scenario-chip{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.4rem;
  max-width:24ch;
  padding:.85rem 1rem;
  border:1px solid var(--g200);
  border-radius:14px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  font-family:var(--sans);
  text-align:left;
  cursor:pointer;
  transition:border-color 200ms ease,box-shadow 200ms ease,transform 150ms ease;
}
.scenario-chip:hover{border-color:var(--teal-500);box-shadow:0 4px 10px rgba(0,0,0,.07)}
.scenario-chip:active{transform:scale(.99)}
.scenario-chip.selected{
  border-color:var(--teal-600);
  border-width:2px;
  background:var(--teal-50);
  box-shadow:0 4px 12px rgba(13,148,136,.18);
}
.chip-title{font-weight:600;color:var(--g900);font-size:14.5px}
.chip-blurb{font-size:12.5px;color:var(--g500);line-height:1.45}
.chip-claims{display:flex;flex-wrap:wrap;gap:.25rem}
.claim-badge{
  font-family:var(--data);
  font-size:10px;
  padding:.15rem .45rem;
  border:1px solid var(--teal-100);
  border-radius:999px;
  background:var(--teal-50);
  color:var(--teal-700);
}

.run-controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;font-size:13.5px;color:var(--g500)}
.dropped-banner{color:var(--alert);font-weight:600}

/* ---- run view: story layer then evidence panels ---- */

.run-view{display:block}
.story-layer{margin-bottom:1.75rem}

.story-card{
  max-width:70ch;
  padding:1.25rem 1.5rem;
  margin:0 0 1.25rem;
  border:1px solid var(--g200);
  border-radius:16px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transform:translateY(6px);
  opacity:0;
  animation:card-in 400ms cubic-bezier(.25,1,.5,1) forwards;
}
.setup-card{border-left:3px solid var(--g900)}
.payoff-card{border-left:3px solid var(--green);background:var(--teal-50)}
.story-card h3{margin:0 0 .5rem;font-size:18px}
.story-card p{margin:0;font-size:14.5px;color:var(--g500);line-height:1.6}
@keyframes card-in{to{transform:translateY(0);opacity:1}}

.timeline-wrap h3{
  margin:0 0 .5rem;
  font-family:var(--data);
  font-size:12px;
  font-weight:500;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--teal-600);
}
.timeline{
  display:flex;
  align-items:flex-start;
  gap:1.15rem;
  min-height:4.2rem;
  padding:.9rem 1rem;
  border:1px solid var(--g200);
  border-radius:14px;
  background:var(--g50);
  overflow-x:auto;
  background-image:linear-gradient(var(--g200),var(--g200));
  background-size:100% 1px;
  background-position:0 1.6rem;
  background-repeat:no-repeat;
}
.tl-entry{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  flex:0 0 auto;
  opacity:0;
  transform:translateY(6px);
  animation:card-in 300ms cubic-bezier(.25,1,.5,1) forwards;
}
.tl-dot{
  width:11px;height:11px;border-radius:999px;
  background:var(--gold-light);
  border:2px solid #fff;
  box-shadow:0 0 0 1px var(--gold-light);
}
.tl-entry[data-kind="boundary_attestation"] .tl-dot,
.tl-entry[data-kind="acquisition"] .tl-dot,
.tl-entry[data-kind="claimed_effect_measurement"] .tl-dot{background:var(--g900);box-shadow:0 0 0 1px var(--g900)}
.tl-seq{font-family:var(--data);font-size:10px;color:var(--g500)}
.tl-label{font-family:var(--data);font-size:10px;color:var(--gold)}
.tl-evidence .tl-dot{background:var(--green);box-shadow:0 0 0 2px var(--green)}
.tl-evidence::after{content:"evidence";font-family:var(--data);font-size:10px;color:var(--green)}
.tl-migrated .tl-dot{background:var(--alert);box-shadow:0 0 0 2px var(--alert)}
.tl-migrated::after{content:"asserted later";font-family:var(--data);font-size:10px;color:var(--alert)}

.run-caption{
  min-height:2.4rem;
  margin:1rem 0 .5rem;
  font-size:17px;
  font-weight:500;
  color:var(--g900);
}
.caption-in{animation:caption-in 250ms cubic-bezier(.25,1,.5,1)}
@keyframes caption-in{from{transform:translateY(4px);opacity:.25}to{transform:translateY(0);opacity:1}}

.stage-strip{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0 0 1.25rem}
.stage-strip li{
  padding:.25rem .8rem;
  border:1px solid var(--g200);
  border-radius:999px;
  background:#fff;
  font-family:var(--data);
  font-size:11px;
  color:var(--g500);
  margin:0;
  transition:border-color 200ms ease,background 200ms ease,color 200ms ease;
}
.stage-strip li[data-status="start"]{border-color:var(--gold-light);background:var(--gold-50);color:var(--gold)}
.stage-strip li[data-status="done"]{border-color:var(--teal-500);background:var(--teal-50);color:var(--teal-700)}

.run-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.25rem}
.run-column{
  border:1px solid var(--g200);
  border-radius:16px;
  padding:1.25rem;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  min-height:12rem;
}
.run-column h3{
  margin:0 0 .75rem;
  font-family:var(--data);
  font-size:11px;
  font-weight:500;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--g400);
}

.narrator-strip,.step-list,.ledger-rail{list-style:none;margin:0 0 1rem;padding:0;max-height:22rem;overflow-y:auto}
.narrator-strip li{padding:.45rem 0;border-bottom:1px solid var(--g100);font-size:14px;color:var(--g700);margin:0}
.step-list li{padding:.2rem 0;font-family:var(--data);font-size:12px;color:var(--g500);margin:0}
.ledger-anchor{
  border-left:3px solid var(--gold-light);
  padding:.35rem .6rem;
  margin:0 0 .3rem;
  font-size:12.5px;
  background:var(--g50);
  border-radius:0 8px 8px 0;
}
.anchor-seq{font-weight:600;color:var(--g900)}
.anchor-kind{color:var(--g500)}
.anchor-digest{font-family:var(--data);color:var(--gold)}

.artifact-cards{display:flex;flex-direction:column;gap:1rem}
.artifact-card{border:1px solid var(--g200);border-radius:12px;overflow:hidden}
.artifact-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
  padding:.6rem .8rem;
  background:var(--g50);
  border-bottom:1px solid var(--g200);
}
.artifact-name{font-family:var(--data);font-size:12.5px;color:var(--g900)}
.artifact-note{padding:.6rem .8rem;margin:0;font-size:13px;color:var(--g500)}
.artifact-json{
  margin:0;
  padding:.8rem;
  max-height:16rem;
  overflow:auto;
  font-family:var(--data);
  font-size:11.5px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
  background:#fff;
}
.status-pill{font-family:var(--data);font-size:10.5px;padding:.2rem .55rem;border-radius:999px;color:#fff;white-space:nowrap}
.pill-green{background:var(--green)}
.pill-red{background:var(--alert)}
.pill-gold{background:var(--gold)}
.pill-neutral{background:var(--g200);color:var(--g700)}

/* The hidden attribute's UA display:none loses to any author display rule
   (this bit the download button, which showed before a run completed). */
[hidden]{display:none !important}

.download-bundle{
  display:inline-block;
  margin-top:1rem;
  padding:.6rem 1.4rem;
  border-radius:999px;
  background:var(--g900);
  color:#fff;
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  transition:background 200ms ease;
}
.download-bundle:hover{background:var(--teal-700)}

/* ---- explainer, portfolio, package ---- */

.explainer section,.arc{margin-bottom:2.75rem}
.explainer figure{
  margin:1.5rem 0;
  padding:1rem;
  border:1px solid var(--g200);
  border-radius:16px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.explainer img{max-width:100%;display:block}
.explainer figcaption{margin-top:.75rem;font-family:var(--data);font-size:11.5px;color:var(--g400)}

table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:14px}
th,td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--g100);vertical-align:top}
th{font-size:11px;font-family:var(--data);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--g400)}
.claim-map-table td:first-child,.package-table td:first-child{font-weight:600;color:var(--g900)}

.arc-note{color:var(--g500);max-width:70ch;font-size:15px}
.family-chain{display:flex;flex-wrap:wrap;gap:.85rem;list-style:none;padding:0}
.family-chain>li{
  position:relative;
  flex:1 1 210px;
  max-width:32ch;
  margin:0;
  padding:1rem 1.1rem;
  border:1px solid var(--g200);
  border-radius:14px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  font-size:13.5px;
  color:var(--g500);
  line-height:1.55;
}
.family-chain>li+li::before{
  content:"\2192";
  position:absolute;left:-.85rem;top:50%;
  transform:translateY(-50%);
  color:var(--teal-500);
}
.family-chain .family-date{display:block;font-family:var(--data);font-size:11px;color:var(--g400);margin-bottom:.35rem}
.family-chain .family-name{display:block;font-weight:600;color:var(--g900);font-size:14.5px;margin-bottom:.3rem}
.family-chain li.family-here{border-color:var(--teal-600);border-width:2px;background:var(--teal-50)}
.family-chain li.family-future{border-style:dashed;background:var(--g50)}

@media(prefers-reduced-motion:reduce){
  .story-card,.tl-entry{animation:none;transform:none;opacity:1}
  .caption-in{animation:none}
  .stage-strip li,.scenario-chip,.gate-form button,.download-bundle{transition:none}
  html{scroll-behavior:auto}
}

/* ---- brand and legal ---- */

.brand{display:block;line-height:0}
.brand img{height:26px;width:auto;display:block}
.gate-logo{height:26px;width:auto;display:block;margin-bottom:1.5rem}

.site-footer{
  max-width:1024px;
  margin:0 auto;
  padding:2rem 1.5rem 3rem;
  border-top:1px solid var(--g100);
}
.legal{
  max-width:78ch;
  margin:0 0 .6rem;
  font-size:11.5px;
  line-height:1.6;
  color:var(--g400);
}
.legal-mark{font-family:var(--data);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}

.addendum-note{
  padding:1.25rem 1.5rem;
  margin:1.5rem 0 2.5rem;
  border:1px solid var(--g200);
  border-left:3px solid var(--gold-light);
  border-radius:0 14px 14px 0;
  background:var(--gold-50);
}
.addendum-note h2{margin:0 0 .75rem;font-size:18px}
.addendum-note p{font-size:14px;color:var(--g700)}
.addendum-note p:last-child{margin-bottom:0}

/* ---- glass box ---- */

.glassbox{
  margin:0 0 1.75rem;
  border:1px solid var(--g200);
  border-radius:18px;
  background:var(--g50);
  padding:1.25rem;
}
.gb-head{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}
.gb-label{
  font-family:var(--data);
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--teal-700);
  padding:.2rem .6rem;
  border:1px solid var(--teal-100);
  border-radius:999px;
  background:var(--teal-50);
}
.gb-sub{font-size:13px;color:var(--g500)}
.gb-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:820px){
  .gb-grid{grid-template-columns:repeat(2,1fr)}
  /* the code viewer needs the full width: at a third of the row the source text
     was ellipsised to "verdict = is..." and told the reader nothing */
  .gb-code{grid-column:1 / -1}
}
.gb-card{border:1px solid var(--g200);border-radius:14px;background:#fff;padding:1rem}
.gb-card h4{margin:0 0 .35rem;font-size:14px}
.gb-note{margin:0 0 .75rem;font-size:12px;color:var(--g500);line-height:1.5}

/* specimen grid */
.specimen{display:flex;flex-direction:column;gap:5px;max-height:19rem;overflow-y:auto}
.spec-row{display:flex;align-items:center;gap:6px}
.spec-rowlabel{font-family:var(--data);font-size:9.5px;color:var(--g400);width:96px;flex:0 0 auto}
.spec-cells{display:flex;flex-wrap:wrap;gap:3px}
.spec-cell{
  width:12px;height:12px;
  border-radius:3px;
  background:var(--g100);
  box-shadow:inset 0 0 0 1px var(--g200);
  transition:background 260ms cubic-bezier(.25,1,.5,1),box-shadow 260ms ease;
}
.spec-cell.on-ok{background:var(--g900);box-shadow:inset 0 0 0 1px var(--g900)}
.spec-cell.on-bad{background:var(--alert);box-shadow:inset 0 0 0 1px var(--alert)}
.spec-cell.on-canary{box-shadow:0 0 0 2px var(--gold-light)}
.spec-cell.landing{animation:cell-land 420ms cubic-bezier(.25,1,.5,1)}
@keyframes cell-land{0%{transform:scale(.4);opacity:.3}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
.gb-legend{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.75rem;font-size:11px;color:var(--g500);align-items:center}
.gb-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.sw-ok{background:var(--g900)}
.sw-bad{background:var(--alert)}
.sw-canary{background:#fff;box-shadow:0 0 0 2px var(--gold-light)}

/* algorithm board */
.algo-board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;max-height:19rem;overflow-y:auto}
.algo-board li{
  display:flex;align-items:baseline;gap:.5rem;
  margin:0;padding:.35rem .5rem;
  border:1px solid var(--g200);
  border-radius:8px;
  font-size:12px;
  color:var(--g500);
  background:var(--g50);
  transition:border-color 220ms ease,background 220ms ease,color 220ms ease;
}
.algo-board li .aid{font-family:var(--data);font-size:10.5px;color:var(--g400);flex:0 0 auto}
.algo-board li.active{
  border-color:var(--gold-light);
  background:var(--gold-50);
  color:var(--g900);
  animation:algo-pulse 1.1s ease-in-out infinite;
}
.algo-board li.active .aid{color:var(--gold)}
.algo-board li.done{border-color:var(--teal-500);background:var(--teal-50);color:var(--teal-700)}
.algo-board li.done .aid{color:var(--teal-700)}
@keyframes algo-pulse{0%,100%{box-shadow:0 0 0 0 rgba(202,138,4,.28)}50%{box-shadow:0 0 0 4px rgba(202,138,4,0)}}

/* chain */
.chain-live{display:flex;flex-direction:column;gap:4px;max-height:19rem;overflow-y:auto}
.chain-link{
  border-left:3px solid var(--gold-light);
  padding:.3rem .5rem;
  background:var(--g50);
  border-radius:0 8px 8px 0;
  font-family:var(--data);
  font-size:10.5px;
  color:var(--g500);
  opacity:0;
  transform:translateX(-6px);
  animation:link-in 320ms cubic-bezier(.25,1,.5,1) forwards;
}
@keyframes link-in{to{opacity:1;transform:none}}
.chain-link b{color:var(--g900);font-weight:600}
.chain-link .cd{color:var(--gold);word-break:break-all}
.chain-link .fold{color:var(--g400)}

@media(prefers-reduced-motion:reduce){
  .spec-cell,.algo-board li{transition:none}
  .spec-cell.landing,.algo-board li.active,.chain-link{animation:none;opacity:1;transform:none}
}

/* ---- live measurement meter ---- */

.meter{margin:0 0 .85rem}
.meter-track{
  height:6px;
  border-radius:999px;
  background:var(--g100);
  overflow:hidden;
}
.meter-fill{
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--teal-600),var(--teal-400));
  transition:width 320ms cubic-bezier(.25,1,.5,1);
}
.meter-text{margin:.35rem 0 0;font-size:11.5px;color:var(--g500)}
@media(prefers-reduced-motion:reduce){.meter-fill{transition:none}}

/* ---- live code viewer ---- */

.codetrace{
  height:16rem;
  overflow-y:auto;
  padding:.6rem .7rem;
  border:1px solid var(--g200);
  border-radius:10px;
  background:var(--g900);
  font-family:var(--data);
  font-size:11px;
  line-height:1.6;
}
.tr-line{display:flex;gap:.5rem;white-space:pre;opacity:0;animation:tr-in 200ms ease forwards}
@keyframes tr-in{to{opacity:1}}
.tr-loc{color:var(--teal-400);flex:0 0 auto}
.tr-src{color:#E5E7EB;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}
.tr-line.pkg-ama .tr-loc{color:#FDE68A}
.tr-line.pkg-adc .tr-loc{color:#A7F3D0}
.tr-line.pkg-common .tr-loc{color:#BFDBFE}
.tr-line.pkg-harness .tr-loc{color:#FBCFE8}
.gb-count{margin:.5rem 0 0;font-size:10.5px;color:var(--g400)}

/* compact strip inside a narrative scene */
.scene-code{
  margin:0 0 .85rem;
  padding:.45rem .7rem;
  border-radius:8px;
  background:var(--g900);
  font-family:var(--data);
  font-size:10.5px;
  color:#E5E7EB;
  white-space:pre;
  overflow:hidden;
  text-overflow:ellipsis;
}
.scene-code code{color:#E5E7EB}
.scene-code .loc{color:var(--teal-400)}
@media(prefers-reduced-motion:reduce){.tr-line{animation:none;opacity:1}}