/* Dynamical Systems brand: Instrument Serif wordmark, Source Sans 3 text, JetBrains Mono labels,
   warm off-white ground, slate-blue accent with copper, olive and plum for data. */
:root {
  --bg: #fafaf8;
  --panel: #ffffff;
  --panel-2: #f5f5f1;
  --line: #e5e5e3;
  --line-2: #d9d9d4;
  --ink: #1a1a1a;
  --text: #3a3a3a;
  --muted: #6b6b66;
  --faint: #a8a8a2;
  --blue: #3d5a80;
  --blue-soft: #e9eef4;
  --blue-mid: #c7d3e2;
  --copper: #b87333;
  --olive: #6b7f5e;
  --plum: #7b7088;
  --brown: #8a5c3c;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
*, *::before, *::after { font-weight: 400 !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1152px; margin: 0 auto; padding: 0 32px; } /* same container as the site header */
@media (max-width: 1023px) { .wrap { padding: 0 24px; } }
button { font: 400 14px var(--sans); color: var(--ink); background: var(--panel); border: 1px solid var(--line-2); border-radius: 0; padding: 7px 16px; cursor: pointer; }
button:hover { border-color: var(--faint); }
button.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
button[disabled] { opacity: 0.4; cursor: default; }
a { color: var(--blue); }
.eyebrow { font: 400 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 0; }

/* header: matches the dynamicalsystems.ai site nav (1152px container, 64px bar, same wordmark and links) */
.site { background: rgba(250, 250, 248, 0.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
.bar { display: flex; align-items: center; max-width: 1152px; height: 64px; margin: 0 auto; padding: 0 32px; }
.wordmark { font: italic 400 30px/1.2 var(--serif); color: var(--ink); letter-spacing: 0.025em; text-decoration: none; white-space: nowrap; }
.sitenav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.sitenav a { font: 400 14px/1.4 var(--sans); color: #5a5a5a; text-decoration: none; transition: color 0.15s; }
.sitenav a:hover { color: var(--blue); }
.live { display: inline-flex; align-items: center; gap: 7px; font: 400 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 3px 0 0 24px; white-space: nowrap; }
.live[hidden] { display: none; }
@media (max-width: 1023px) { .bar { padding: 0 24px; } }
@media (max-width: 767px) {
  .bar { flex-wrap: wrap; height: auto; }
  .wordmark, .sitenav { height: 64px; }
  .wordmark { display: flex; align-items: center; font-size: 24px; }
  .sitenav { gap: 24px; }
  .live { order: 3; flex-basis: 100%; margin: -6px 0 12px; }
}
@media (max-width: 639px) {
  .wordmark { font-size: 20px; }
  .sitenav { gap: 16px; }
  .sitenav a { font-size: 12px; }
}
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--olive); }
.live button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.toggles { margin-left: auto; display: flex; gap: 18px; font-size: 13px; color: var(--muted); }
.toggles label { display: flex; gap: 6px; align-items: center; cursor: pointer; }

/* opening: title, setup and the models' objective, with the campaign log beside them */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px 56px; align-items: start; padding: 32px 0 26px; border-bottom: 1px solid var(--line); }
.hero h1 { font: 400 26px/1.25 var(--sans); color: var(--ink); margin: 0 0 12px; letter-spacing: -0.01em; }
.hero .tag { font: 400 11px/1 var(--mono); letter-spacing: 0.04em; color: var(--ink); border: 1px solid var(--line-2); background: var(--panel-2); padding: 3px 7px; margin-left: 12px; vertical-align: 5px; white-space: nowrap; }
.hero .tag:empty { display: none; }
.hero .dek { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0 0 10px; max-width: 620px; text-wrap: pretty; }
.hero .plan { font-size: 15px; line-height: 1.6; color: var(--text); margin: 0; max-width: 620px; text-wrap: pretty; }
.hero .obj-k { font: 400 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px; }
.hero .obj { font-size: 15.5px; line-height: 1.55; color: var(--ink); margin: 0; padding-left: 12px; border-left: 2px solid var(--line-2); max-width: 620px; text-wrap: pretty; }
.log { margin-top: 6px; }
.log .eyebrow { margin-bottom: 8px; }
.log ol { list-style: none; margin: 0; padding: 0; }
.log li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--ink); }
.log time { font: 400 12px/1.7 var(--mono); color: var(--muted); }
.log li.next { color: var(--text); }
.log li.next time { color: var(--copper); }
.log li.all { padding-bottom: 0; }
.log li.all .inl { font-size: 13px; justify-self: start; }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); padding-top: 24px; } .hero h1 { font-size: 23px; } }
.pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.views { display: inline-flex; border: 1px solid var(--line-2); border-radius: 0; padding: 3px; background: var(--panel); }
.views button { border: 0; padding: 6px 14px; font: 400 11.5px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: transparent; }
.views button.on { background: var(--blue); color: #fff; }
.inv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inv button { display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; font-size: 13.5px; }
.inv button svg { width: 15px; height: 15px; }
.inv button small { font: 400 12px var(--sans); color: var(--muted); }
.inv button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.inv button.on small { color: #c9c9c2; }
.inv .grp { font: 400 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum); margin: 0 2px 0 10px; }
.inv .grp:first-child { margin-left: 0; }

/* transport */
.transport { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.scrub { -webkit-appearance: none; appearance: none; flex: 1; height: 4px; border-radius: 4px; outline: none; margin: 0 8px;
  background: linear-gradient(to right, var(--blue) 0%, var(--blue) var(--p, 0%), var(--line-2) var(--p, 0%)); }
.scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--blue); cursor: pointer; }
.scrub::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; cursor: pointer; }
.clock { font: 400 12px var(--mono); color: var(--muted); white-space: nowrap; }

/* caption and the investigator's words */
.caption { margin: 18px 0 0; }
.caption .kicker { font: 400 12px var(--mono); color: var(--muted); margin: 0 0 6px; letter-spacing: 0.02em; }
.caption h2 { font: 400 21px/1.25 var(--sans); color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em; text-wrap: balance; }
.caption .calls { font: 400 12px/1 var(--mono); color: var(--ink); margin: 2px 0 6px; }
.inl { font: inherit; color: var(--blue); background: none; border: 0; padding: 0; border-radius: 0; text-decoration: underline; text-decoration-color: var(--blue-mid); text-underline-offset: 3px; }
.bubble { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-left: 1px solid var(--blue); border-radius: 0; padding: 10px 14px 10px 12px; }
.bubble .face { flex: none; width: 34px; height: 34px; border-radius: 0; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; }
.bubble .face:empty { display: none; }
.bubble .face svg { width: 18px; height: 18px; color: var(--ink); }
.bubble .words { min-width: 0; flex: 1; }
.bubble .clip.folded { max-height: 300px; overflow: hidden; }
.bubble .clip.folded { -webkit-mask-image: linear-gradient(#000 calc(100% - 64px), transparent); mask-image: linear-gradient(#000 calc(100% - 64px), transparent); }
.bubble .words > .more:not([hidden]) { display: block; margin: 8px 0 2px; padding: 0; font-size: 13px; }
.bubble .qt { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.bubble q { quotes: "“" "”"; }
.bubble .qt .more { padding: 0; margin-left: 6px; }
.bubble .who { font: 400 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 3px 0 6px; }
.bubble .who .note { text-transform: none; letter-spacing: 0; color: var(--faint); font: 400 12px var(--sans); margin-left: 8px; }
.bubble.open .who { margin-top: 14px; }
.bubble.open .who:first-child { margin-top: 3px; }
.bubble .said { font-size: 15px; }
.said { color: var(--ink); font-size: 16px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: pretty; }
.more { background: none; border: 0; padding: 4px 0 0; color: var(--blue); font-size: 13px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/1.55 var(--mono); color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 0; padding: 10px 12px; margin: 0; max-height: 260px; overflow: auto; }
/* state tiles */
.tiles { margin: 10px 0 0; }
.tiles .grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-top: 1px solid var(--line-2); border-radius: 0; padding: 8px 12px 9px; min-width: 0; min-height: 92px; }
.tile .s .tok { white-space: nowrap; }
.tile .k { font: 400 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.tile .v { font: 400 16px/1.3 var(--sans); color: var(--ink); margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile .v.num { font: 400 15px/1.35 var(--mono); }
.tile .s { font: 400 12px/1.4 var(--sans); color: var(--muted); margin: 3px 0 0; overflow-wrap: anywhere; }
.tile.fc { border-top-color: var(--blue); }
.tile.sim { border-top-color: var(--plum); }
.tile.phys { border-top-color: var(--copper); }
.tiles .assume { margin: 7px 0 0; font-size: 14px; color: var(--text); }
.tiles .assume q { quotes: "“" "”"; color: var(--ink); }
.annot { margin-top: 16px; padding: 10px 14px; border: 1px dashed #d6b48e; background: #fbf5ee; border-radius: 0; font-size: 14px; color: #5b4430; }
.annot b { color: var(--copper); font-weight: 400; }

.step { margin-top: 14px; padding: 16px 20px 18px; }
.step .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px 36px; align-items: start; }
.step pre.out + .reply, .step pre.out + dl { margin-top: 12px; }
.step .cols > div > .lbl:first-child { margin-top: 0; }
.step .lbl { font: 400 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; }
.step .lbl.back { color: var(--olive); }
.step .lbl.fc { color: var(--blue); }
.step .lbl.sr { color: var(--plum); }
.step .said { font-size: 15px; }
.step .meta { font: 400 12px/1.45 var(--mono); color: var(--muted); margin: -2px 0 8px; }
.step pre { max-height: min(70vh, 640px); font-size: 12px; }
.step .raw.code[open] > pre { max-height: none; } /* the model's own code, in full */
.step .raw { margin-top: 10px; }
.step .raw.code { margin-top: 0; }
.step .raw.code > summary { list-style: none; display: block; }
.step .raw.code > summary::-webkit-details-marker { display: none; }
.step .raw.code > summary span { font-size: 13px; color: var(--blue); display: block; margin-top: 6px; }
.step .raw.code[open] > summary { display: none; }
.plain { margin: 0; padding-left: 18px; font-size: 14px; }
.plain li { margin: 2px 0; }
.vals { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.vals th { text-align: left; font: 400 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); padding: 0 6px 4px 0; }
.vals td { padding: 4px 6px 4px 0; border-top: 1px solid var(--line); vertical-align: top; }
.vals td.v { font: 400 13.5px var(--mono); color: var(--ink); white-space: nowrap; }
.vals td.v small { color: var(--muted); font-weight: 400; }
.vals td.f { color: var(--blue); }
.vals td small { color: var(--muted); }
.drawer > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary .eyebrow { margin: 0; }
.drawer > summary .eyebrow::after { content: "▸"; color: var(--faint); margin-left: 4px; }
.drawer[open] > summary .eyebrow::after { content: "▾"; }
.drawer .inputs { list-style: none; margin: 10px 0 0; padding: 0; }
.drawer .when { font: 400 11.5px var(--mono); color: var(--muted); }
.inputs li { display: grid; grid-template-columns: 18px 1fr auto; align-items: baseline; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.inputs ul { list-style: none; margin: 0; padding: 0; }
.inputs li:last-child { border-bottom: 0; }
.inputs .ic { font: 400 12px var(--mono); color: var(--blue); }
.inputs li.off { color: var(--faint); }
.inputs li.off .ic { color: var(--faint); }
.inputs .when { font: 400 11.5px var(--mono); color: var(--muted); }
.inputs li.off .when { color: var(--faint); }
.inputs .new { font: 400 9.5px var(--mono); letter-spacing: 0.1em; color: var(--copper); margin-left: 6px; }
.muted { color: var(--muted); }

/* chart */
.plot { margin-top: 10px; padding: 12px 18px 6px; }
.plot-head { display: flex; justify-content: space-between; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 2px; }
.plot-head .eyebrow { margin: 0; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--text); }
.legend li { display: flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 11px; height: 11px; }
.lg-phys { border-radius: 50%; background: var(--ink); }
.lg-unread { border-radius: 50%; border: 1.8px dashed var(--ink); background: #fff; }
.lg-cur { border-radius: 50%; border: 2px solid var(--blue); background: #fff; }
.lg-prev { border-radius: 50%; border: 1.5px dashed var(--faint); background: #fff; }
.lg-sim { transform: rotate(45deg) scale(0.8); border: 2px solid var(--plum); background: #fff; }
.lg-der { border: 1.5px solid var(--muted); background: #fff; }
.lg-hist { width: 18px !important; height: 1.4px !important; background: repeating-linear-gradient(90deg, #bfbfb8 0 5px, transparent 5px 9px); }
.lg-gap { width: 7px !important; border: 1.5px solid var(--copper); border-left: 0; }
.lg-simret { transform: rotate(45deg) scale(0.8); background: var(--plum); }
.lg-simunread { transform: rotate(45deg) scale(0.8); border: 1.8px dashed var(--plum); background: #fff; }
.lg-base { width: 9px !important; height: 9px !important; background: #8f8f88; }
.lg-limit { height: 0 !important; border-top: 1.5px dashed var(--copper); }
.lg-post { border-radius: 50%; border: 1.6px dashed var(--blue); background: #fff; }
#chart { width: 100%; height: auto; display: block; }
.eyebrow .unit { text-transform: none; letter-spacing: 0.04em; }
#inputs { scroll-margin-top: 76px; }
#chart text { font: 12.5px var(--sans); fill: var(--muted); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
#chart .v { fill: var(--ink); font-family: var(--mono); font-size: 12px; }
#chart .m { font-family: var(--mono); font-size: 11.5px; }
#chart .sm { font-size: 11.5px; }

/* assessment drawer */
.assess { margin-top: 18px; padding: 16px 20px; border-color: #ddd8e3; }
.assess > summary { list-style: none; display: flex; align-items: center; gap: 14px; cursor: pointer; }
.assess > summary::-webkit-details-marker { display: none; }
.assess > summary .eyebrow { margin: 0; color: var(--plum); }
.assess > summary .eyebrow::before { background: var(--plum); }
.assess > summary .eyebrow::after { content: "▸"; margin-left: 2px; }
.assess[open] > summary .eyebrow::after { content: "▾"; }
.assess > summary .sub { font: 400 12px var(--mono); color: var(--muted); }
.assess.locked > summary { cursor: default; }
.assess.locked > summary .eyebrow { color: var(--faint); }
.assess.locked > summary .eyebrow::before { background: var(--faint); }
.assess.locked > summary .eyebrow::after { content: ""; }
.as-head { display: grid; gap: 4px; margin: 14px 0 6px; font-size: 14px; color: var(--ink); }
.as-head p { margin: 0; }
.as-head .k { display: inline-block; width: 86px; font: 400 10.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.as-lbl { font: 400 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.as-lbl.ok, .as-lbl .ok { color: var(--olive); } .as-lbl.no, .as-lbl .no { color: var(--copper); }
.as-note { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.scroll { overflow-x: auto; }
.as-checks td, .as-checks th { white-space: nowrap; }
.as-checks td:first-child, .as-checks td:nth-child(3) { white-space: normal; min-width: 200px; }
.stepbtn { font: 400 11px var(--mono); padding: 1px 7px; margin-left: 4px; color: var(--blue); border-color: var(--blue-mid); }
.stepbtn.later { color: var(--faint); border-color: var(--line-2); border-style: dashed; }
.as-matrix { border-collapse: collapse; font-size: 14px; min-width: 560px; }
.as-matrix th { padding: 0 10px 8px 0; text-align: left; }
.as-matrix td { padding: 5px 10px 5px 0; border-top: 1px solid var(--line); }
.as-matrix td.topic { color: var(--ink); padding-right: 22px; }
.jhead { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border-radius: 0; padding: 6px 12px; font: 400 13px var(--mono); }
.jhead span { font: 400 12px var(--sans); }
.jhead.ok span { color: var(--olive); } .jhead.no span { color: var(--copper); } .jhead.on { border-color: var(--ink); }
.cell { width: 30px; height: 26px; padding: 0; margin-right: 4px; border-radius: 0; font: 400 14px var(--sans); }
.cell.ok { color: var(--olive); border-color: #cfd8c8; background: #f3f6f0; }
.cell.no { color: var(--copper); border-color: #e6cdb6; background: #fbf4ec; }
.cell.na { color: var(--muted); }
.cell.on { outline: 1px solid var(--ink); outline-offset: 1px; }
.none { color: var(--faint); font: 400 11px var(--mono); }
.as-matrix tr.differs td { background: #faf7fb; }
.dif { font: 400 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--plum); margin-left: 8px; }
.basis { font: 400 11px var(--mono); color: var(--muted); white-space: nowrap; padding-right: 14px; }
.basis.b-simulated { color: var(--plum); } .basis.b-physical { color: var(--copper); } .basis.b-model { color: var(--blue); }
.jhead .an { font: 400 10px var(--mono); font-style: normal; color: #fff; background: var(--plum); border-radius: 0; padding: 0 5px; margin-left: 6px; position: relative; top: -1px; }
.as-lbl.au { color: var(--plum); }
.as-detail { margin-top: 14px; padding: 12px 14px; background: var(--panel-2); border-radius: 0; }
.as-detail .as-lbl:first-child { margin-top: 0; }
.as-detail .said { font-size: 15px; }
.as-detail .ok { color: var(--olive); } .as-detail .no { color: var(--copper); }
.cites { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.cites li { padding: 5px 0; border-top: 1px solid var(--line); }
.cites .stepbtn { margin: 0 6px 0 0; }
.cites .file { font: 400 12px var(--mono); color: var(--ink); }
.cites .loc { font: 400 12px var(--mono); color: var(--muted); }
.audit { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.audit li { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); color: var(--ink); }
.audit .kind { font: 400 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--plum); padding-top: 2px; }
.audit .who { font: 400 12px var(--mono); color: var(--muted); white-space: nowrap; }

/* pinned timeline */
.dock { position: sticky; bottom: 0; z-index: 6; background: rgba(250, 250, 248, 0.96); border-top: 1px solid var(--line); backdrop-filter: blur(4px);
  padding: 8px 0 calc(6px + env(safe-area-inset-bottom, 0px)); margin-top: 8px; }
/* on phones the timeline stays out of view until the step-through section is on screen (app.js toggles .away) */
@media (max-width: 640px) {
  .dock { transition: transform 0.25s ease, visibility 0s; }
  .dock.away { transform: translateY(110%); visibility: hidden; transition: transform 0.25s ease, visibility 0s 0.25s; }
}
.dock .transport { margin: 0 0 2px; }
.dock .transport button { padding: 5px 14px; }
.dock .tools .tb { height: 12px; }
.dock .tools .marks { position: relative; height: 24px; margin: 0 0 2px; }
.dock .tools .cells { gap: 1px; }
.dock .tools .tb { height: 14px; border-radius: 0; }
.tools .tb.rep { opacity: 0.45; }
.k-message { background: repeating-linear-gradient(135deg, #a9a9a3 0 2px, #e4e4df 2px 4px); } .k-note { background: #d9d9d4; }
.dock-legend .legend i.rep { opacity: 0.45; }
.rid { font: 400 11px var(--mono); letter-spacing: 0; text-transform: none; color: var(--faint); margin-left: 6px; }
.tools .tb.future { opacity: 1; }
.dock-legend { display: flex; justify-content: space-between; align-items: center; gap: 4px 16px; flex-wrap: wrap; margin-top: 5px; }
.dock-legend .mklegend { margin: 0; }
.dock-legend .legend { font-size: 11.5px; gap: 10px; }
.dock-legend .legend i { width: 10px; height: 10px; }
.mk { display: inline-block; width: 10px; height: 10px; border-radius: 50%; padding: 0; border: 0; }
.tools .marks button.mk { position: absolute; transform: translateX(-50%); cursor: pointer; padding: 0; }
.tools .marks button.mk.ln-st { top: 1px; }
.tools .marks button.mk.ln-ev { top: 14px; }
.tools .marks button.mk.sim { transform: translateX(-50%) rotate(45deg) scale(0.85); }
.mk.commit { background: #fff; border: 2px solid var(--blue); }
.mk.sim { background: var(--plum); border-radius: 1px; transform: translateX(-50%) rotate(45deg) scale(0.85); }
.mklegend .mk.sim { transform: rotate(45deg) scale(0.8); }
.mk.release { background: #fff; border: 2px solid var(--copper); }
.mk.opened { background: var(--copper); }
.mk.request { background: var(--olive); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mk.model { background: var(--blue); border-radius: 2px; }
.mk.decision { background: var(--ink); border-radius: 0; }
.mklegend { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.mklegend li { display: flex; align-items: center; gap: 6px; }

/* actions strip */
.actions { margin-top: 26px; }
.actions .head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.actions .head .eyebrow { margin: 0; }
.tools .cells { display: grid; gap: 3px; }
.tools .tb { height: 24px; border-radius: 0; cursor: pointer; }
.tools .tb.future { background: var(--line) !important; }
.tools .tb.cur { outline: 1px solid var(--ink); outline-offset: 2px; }
.tools .count { font: 400 12px var(--mono); color: var(--muted); margin-top: 6px; }
.k-read { background: #8ea2bd; } .k-compute { background: #c9a86a; } .k-model { background: var(--blue); } .k-experiment { background: var(--olive); }
.lab { margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.lab ol { list-style: none; margin: 8px 0 0; padding: 0; columns: 2 380px; column-gap: 40px; font-size: 13px; color: var(--text); }
.lab li { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); break-inside: avoid; line-height: 1.45; }
.lab em { font: normal 400 12px/1.6 var(--mono); color: var(--ink); }
.lab li.later, .lab li.later em { color: var(--faint); }
.lab li.undated em { color: var(--muted); }
.lab li.now { color: var(--blue); font: 400 12px/1.6 var(--mono); box-shadow: inset 2px 0 0 var(--blue); padding-left: 8px; }
.lab li.now em { color: var(--blue); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; }

/* inspector */
.inspector { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 14px; }
.inspector > summary { cursor: pointer; font: 400 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.inspector[open] > summary { margin-bottom: 18px; }
.inspector #action pre { max-height: none; } /* the model's own notes and actions, in full */
.inspector #return pre, .inspector .trow pre { max-height: min(70vh, 640px); }
.ins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
.inspector h3 { font: 400 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.inspector h3 span { text-transform: none; letter-spacing: 0; }
.inspector .lbl { font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
.inspector .sub { margin-top: 12px; }
.inspector .sub summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.inspector .trow { border-bottom: 1px solid var(--line); padding: 3px 0; font-size: 13px; }
#links { font-size: 13px; }
.foot { color: var(--muted); font-size: 13px; margin: 26px 0 48px; }

@media (max-width: 1080px) {
  .tiles .grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles .grid > .tile:last-child:nth-child(odd) { grid-column: span 2; } /* three tiles: the decision takes the full row */
  .toggles label { white-space: nowrap; }
}
@media (max-width: 640px) {
  .caption h2 { font-size: 19px; }
  .step .cols { grid-template-columns: 1fr; }
  #inputs, #reason, #inv { scroll-margin-top: 100px; }
  .assess > summary { flex-wrap: wrap; }
  .assess > summary .sub { flex-basis: 100%; }
  .toggles { gap: 10px; font-size: 12px; margin-left: 0; }
  .ins-grid { grid-template-columns: 1fr; }
  .transport { flex-wrap: wrap; }
  .dock-legend { display: none; }
  .dock .tools .marks { height: 20px; }
  .tools .marks button.mk { width: 7px; height: 7px; }
  .tools .marks button.mk.ln-ev { top: 11px; }
  .vals { font-size: 12.5px; }
  .vals td.v { white-space: normal; }
  .plot .legend { font-size: 12px; gap: 4px 12px; }
  .step .reply { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
@media (max-height: 820px) and (min-width: 641px) { .dock-legend { margin-top: 3px; } .dock-legend .legend, .mklegend { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.reply { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.reply dt { font: 400 12px/1.6 var(--mono); color: var(--muted); }
.reply dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.raw { margin-top: 10px; }
.raw summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.raw pre { margin-top: 6px; }

.said .mdt { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 13px; }
.said .mdt th, .said .mdt td { white-space: nowrap; padding: 3px 12px 3px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }

#chart.compact text { font-size: 30px; stroke-width: 9px; }
#chart.compact .m, #chart.compact .sm { font-size: 27px; }
#chart.compact .v { font-size: 29px; }

/* Across models: expectation before each lab result, and expectations now */
.ledger-card { margin: 18px 0 0; padding: 16px 18px 10px; }
.ledger-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; }
.ledger-head .eyebrow { margin: 0; }
.ledger-head .asof { margin: 0; font: 400 11.5px var(--mono); color: var(--muted); }
.ledger-card > .sub { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 10px 0 12px; max-width: 920px; text-wrap: pretty; }
.ledger-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.ledger { border-collapse: collapse; width: 100%; min-width: 620px; table-layout: fixed; font: 400 14px var(--sans); }
.ledger col.c-name { width: 15%; }
.ledger col.c-dec { width: 11%; }
.ledger col.c-s { width: 9.5%; }
.ledger col.c-d { width: 7%; }
.ledger col.c-now { width: 11.5%; }
.ledger td small { white-space: normal; }
.ledger th, .ledger td { padding: 7px 12px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; vertical-align: baseline; }
.ledger td.lab { position: relative; }
.ledger td.lab .fn { position: absolute; margin-left: 1px; }
.ledger thead th { font: 400 10.5px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-2); padding-top: 4px; }
.ledger tbody th { text-align: left; font-weight: 400; padding-left: 10px; }
.ledger tbody tr:last-child th, .ledger tbody tr:last-child td { border-bottom: 0; }
.ledger tbody th button { display: inline-flex; align-items: center; gap: 8px; border: 0; padding: 0; background: none; font: 400 13.5px var(--sans); color: var(--ink); }
.ledger tbody th button svg { width: 15px; height: 15px; }
.ledger td button { border: 0; background: none; padding: 0; font: 400 14px var(--mono); color: var(--ink); display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer; }
.ledger td button small { font: 400 11px var(--mono); color: var(--copper); }
.ledger td button:hover, .ledger th button:hover span { color: var(--blue); }
.ledger .labrow th { font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.ledger .labrow th, .ledger .labrow td { background: var(--panel-2); }
.ledger td.lab { font: 400 14px var(--mono); color: var(--ink); }
.ledger td.lab small { display: block; margin-top: 3px; font: 400 11px var(--mono); color: var(--muted); }
.ledger .gap { border-left: 1px solid var(--line-2); }
.ledger .pend, .ledger td.none { color: var(--muted); font: 400 12.5px var(--sans); }
.ledger td.none[colspan] { text-align: left; padding-left: 24px; }
.ledger tr.on th { box-shadow: inset 2px 0 0 var(--blue); }
.ledger tr.on th button span { color: var(--blue); }
main > .inv { margin: 22px 0 0; }
@media (max-width: 640px) {
  .ledger-card { padding: 14px 12px 8px; }
  .ledger th, .ledger td { padding: 7px 9px; }
}

/* model actions: decisions as their own kind; replies explained */
.k-decision { background: var(--ink); }
.dock-legend .legend li.hint { color: var(--muted); }
/* experiment requests shown in full: what was asked, then what came back */
.reply.req { margin: 2px 0 8px; }
.reply.req dd { font-size: 13.5px; color: var(--text); }
.plain.errs { font-size: 13px; color: var(--text); margin: 6px 0 4px; }
.plain.errs li { margin: 3px 0; }
/* model selector */
.inv .inv-k { font: 400 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
@media (max-width: 640px) { .inv .inv-k { width: 100%; margin: 0 0 4px; } }

/* final pass: tooltip, step columns, overview footnote */
.charttip { position: fixed; z-index: 30; max-width: 340px; background: var(--ink); color: #fff; font: 400 12.5px/1.45 var(--sans); padding: 7px 10px; pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
#reason, #inv { scroll-margin-top: 76px; }
.said code { font: 400 0.84em/1 var(--mono); color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); padding: 1px 4px; overflow-wrap: anywhere; }
.step .col { min-width: 0; }
.step .colh { font: 400 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.step .col > .colh + .lbl { margin-top: 0; }
.fn { font: 400 10px var(--mono); color: var(--copper); margin-left: 2px; }
.ledger-card .fnote { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 10px 0 2px; max-width: 900px; }
.ledger td.words { color: var(--muted); font: 400 13px var(--sans); text-align: left; padding-left: 24px; white-space: normal; }
.ledger td.words button { font: 400 13px var(--sans); color: var(--blue); display: inline; margin-left: 4px; }

.ledger tr.grp th { font: 400 10px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-align: left; border-bottom: 1px solid var(--line); padding-bottom: 7px; }
.ledger tr.grp th.gap { text-align: right; }
.ledger th.d, .ledger td.d { text-align: left; padding-left: 8px; font: 400 12px var(--mono); color: var(--muted); }
.ledger thead th.d { font: 400 10.5px/1.2 var(--mono); }
.ledger td.d:empty::after { content: ""; }
.ledger .rangerow th, .ledger .rangerow td { border-top: 1px solid var(--line-2); border-bottom: 0; font: 400 12.5px var(--mono); color: var(--muted); padding-top: 9px; }
.ledger .rangerow th { font: 400 13px var(--sans); color: var(--text); }
.ledger tbody tr:not(.labrow):not(.rangerow):hover th, .ledger tbody tr:not(.labrow):not(.rangerow):hover td { background: var(--panel-2); }
@media (max-width: 640px) {
  .ledger tr.grp { display: none; }
  .ledger th.d, .ledger td.d { display: none; }
  .ledger col.c-d { width: 0; }
  table.ledger { min-width: 520px; }
  .ledger col.c-name { width: 28%; }
  .ledger-head .asof { flex-basis: 100%; }
}
/* phones: every column fits at 390 px, so nothing hides off to the side */
table.ledger.slim { min-width: 0; }
.ledger.slim col.c-name { width: 30%; }
.ledger.slim col.c-s, .ledger.slim col.c-now { width: 14%; }
.ledger.slim tr.grp { display: table-row; }
.ledger.slim tr.grp th { padding: 2px 4px 6px; text-align: right; letter-spacing: 0.06em; }
.ledger.slim th, .ledger.slim td { padding: 8px 4px; }
.ledger.slim thead th { letter-spacing: 0.04em; }
.ledger.slim tbody th { padding-left: 8px; white-space: normal; }
.ledger.slim tbody th button { gap: 6px; font-size: 12.5px; text-align: left; }
.ledger.slim td button, .ledger.slim td.lab { font-size: 13px; }
.ledger.slim .labrow th { letter-spacing: 0.06em; }
.ledger.slim td.words { padding-left: 8px; font-size: 12.5px; }
.ledger.slim .rangerow td { font-size: 11.5px; line-height: 1.35; }
.step .meta.call { overflow-wrap: anywhere; margin-top: 2px; }
.reply dd.mono { font: 400 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.reply dd.said { font-size: 14px; }
/* code reads as written: no wrapping inside tokens, no ligatures (== stays two characters) */
pre, code { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
pre.code { white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.step .raw.code > summary pre.code { overflow: hidden; }
/* latest decision: plain text, the step it links to; an ended investigation reads in ink */
.ledger th.dec, .ledger td.dec { text-align: left; }
.ledger thead th.dec { vertical-align: bottom; }
.ledger td.dec button { font: 400 13px var(--sans); color: var(--muted); }
.ledger td.dec.end button { color: var(--ink); }
.ledger tbody th small.dec { display: block; font: 400 11px/1.3 var(--mono); color: var(--muted); margin: 2px 0 0 21px; white-space: nowrap; }
.ledger tbody th small.dec.end { color: var(--ink); }