/* Factory pages (/factory/, /factory/<project>/): the registry read by
   pipeline stage, in the manner of a Machine Age works: ivory enamel,
   green enamel and brass, geometric display capitals over a readable
   serif; the works' skyline under a rising sun, stages as nameplated
   machines on a line shaft, gears and rivets. Ornament stays at the
   edges; the reading stays plain. */

/* Colours, type and ornament shapes come from /machine-age.css. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.factory { margin: 0; background: var(--ground); color: var(--ink); font: 17px/1.55 var(--serif); }
.factory a { color: var(--green); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.factory a:hover { text-decoration-color: currentColor; }
.factory code, .factory .mono { font-family: var(--mono); font-size: 0.82em; overflow-wrap: anywhere; }
.factory h1, .factory h2, .factory h3 { font-family: var(--display); font-weight: 600; letter-spacing: 0.02em; margin: 0; }
.factory .wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.factory :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* small letterspaced capitals: labels, counts, states */
.eyebrow, .caption, .stage .n, .stage .state, .mini .n, .mini .state, .facts dt, .handoff h3, .subhead, .pill,
.results th, .legend, .panel .when, .trust, .report-nav a, .hero-facts > div {
  font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
}

/* header: a band of green enamel, edged in a double brass line */

.eyebrow { font-size: 11.5px; color: var(--brass-ink); }
.eyebrow.quiet { color: var(--muted); font-size: 11px; margin-top: 20px; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

/* hero: the works' name in thin capitals, its figures on a brass-ruled plate */
.hero { position: relative; isolation: isolate; padding: 52px 0 78px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 1fr); gap: 44px; align-items: end; }
/* the works' frontage along the hero's foot, and a sun rising behind it */
.hero::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 48px; background: var(--silhouette); -webkit-mask: var(--mask-skyline) left bottom / 240px 48px repeat-x; mask: var(--mask-skyline) left bottom / 240px 48px repeat-x; }
.hero::before { content: ""; position: absolute; z-index: -2; right: 2%; bottom: 0; width: min(560px, 90%); height: 280px; opacity: 0.3;
  background: repeating-conic-gradient(from -90deg at 50% 100%, var(--brass) 0 2.5deg, transparent 2.5deg 9deg);
  -webkit-mask: radial-gradient(circle at 50% 100%, #000 18%, transparent 70%); mask: radial-gradient(circle at 50% 100%, #000 18%, transparent 70%); }
.hero h1 { font-weight: 300; text-transform: uppercase; letter-spacing: 0.05em; font-size: clamp(30px, 3.9vw, 50px); line-height: 1.1; margin: 12px 0 0; }
.hero h1::after { content: ""; display: block; height: 9px; margin-top: 20px; background: var(--stepped); }
.hero p { margin: 14px 0 0; color: var(--muted); font-size: 18px; max-width: 38em; }
.hero-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--brass); border: 1px solid var(--brass); outline: 1px solid var(--brass); outline-offset: 3px; font-size: 10.5px; color: var(--muted); }
.hero-facts > div { background: radial-gradient(circle, var(--brass) 1.6px, transparent 2.2px) 6px 6px / 8px 8px no-repeat, radial-gradient(circle, var(--brass) 1.6px, transparent 2.2px) calc(100% - 6px) 6px / 8px 8px no-repeat, var(--panel); padding: 14px 16px 12px; letter-spacing: 0.12em; line-height: 1.45; }
.hero-facts b { display: block; font: 300 26px/1.1 var(--display); letter-spacing: 0.02em; text-transform: none; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; margin-bottom: 6px; overflow-wrap: anywhere; }

/* the stage strip: five bays under one brass rule */
.caption { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 30px 0 12px; font-size: 11px; color: var(--muted); }
.caption a { text-decoration: none; color: var(--brass-ink); }
.caption a:hover { text-decoration: underline; }
.process { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px; padding-top: 26px; border-top: 3px double var(--brass);
  /* the line shaft the stages hang from */
  background: linear-gradient(var(--brass), var(--brass)) 0 calc(50% + 10px) / 100% 1px no-repeat,
    linear-gradient(var(--brass), var(--brass)) 0 calc(50% + 16px) / 100% 1px no-repeat; }
.stage { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 14px 16px; text-decoration: none; color: inherit; min-height: 172px; background: var(--panel); border: 1px solid var(--rule); box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px var(--rule); transition: border-color 0.15s, box-shadow 0.15s; }
.stage::before { content: ""; position: absolute; top: -10px; left: 50%; width: 48px; height: 10px; margin-left: -24px; background: var(--brass); -webkit-mask: var(--mask-cornice) center / 100% 100% no-repeat; mask: var(--mask-cornice) center / 100% 100% no-repeat; }
.factory .stage:hover, .stage.current, .stage[aria-current] { border-color: var(--brass); box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px var(--brass); }
.stage .n { font-size: 11px; color: var(--brass-ink); display: inline-flex; align-items: center; gap: 8px; }
.stage .n::before, .stage .n::after { content: ""; width: 14px; height: 1px; background: var(--brass); }
.stage h2 { font-size: 17px; text-transform: uppercase; letter-spacing: 0.14em; margin: 14px 0 8px; }
.stage .count { font-size: 14px; color: var(--muted); line-height: 1.4; margin-bottom: 12px; }
.stage .state { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 10px; color: var(--muted); }
.dot { width: 7px; height: 7px; transform: rotate(45deg); background: var(--green); display: inline-block; flex: 0 0 auto; }
.dot.gap { background: transparent; box-shadow: inset 0 0 0 1px var(--rust); }
.dot.partial { background: var(--brass); }
.dot.live { background: var(--green); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--green); }
/* a gear on the shaft between stages, where the arrow was */
.stage .arrow { position: absolute; z-index: 1; right: -23px; top: 50%; width: 16px; height: 16px; margin-top: -8px; font-size: 0; color: transparent; background: var(--brass); -webkit-mask: var(--mask-gear) center / contain no-repeat; mask: var(--mask-gear) center / contain no-repeat; }
.stage.gap { background: var(--ground); border-style: dashed; box-shadow: none; }
.stage.gap::before { opacity: 0.45; }
.stage.gap h2 { color: var(--muted); }
.frontier { margin: 10px 0 0; display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--muted); }
.frontier .arrow { color: var(--rust); }

/* the project index: one strip per project */
.project-list { margin-top: 8px; }
.project-row { display: grid; grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 2fr); gap: 30px; padding: 30px 0; border-top: 1px solid var(--rule); }
.project-row:first-child { border-top: 3px double var(--brass); }
.project-row h2 { font-size: 22px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.08em; }
.project-row h2 a { color: inherit; text-decoration: none; }
.project-row h2 a:hover { color: var(--green); }
.project-row .slug { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 10px; }
.project-row .blurb { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.world-link { margin: 8px 0 0; font: 600 11px/1.5 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.world-link a { color: var(--brass-ink); text-decoration: none; }
.world-link a:hover { text-decoration: underline; }
/* the front page's lists: Research Worlds, world models, decision models */
.project-group { margin-top: 34px; }
.project-group .group-title { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-ink); margin: 0 0 6px; }
.mini { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-self: start; padding-top: 8px; }
.mini a::before { content: ""; position: absolute; top: -7px; left: 50%; width: 32px; height: 7px; margin-left: -16px; background: var(--brass); -webkit-mask: var(--mask-cornice) center / 100% 100% no-repeat; mask: var(--mask-cornice) center / 100% 100% no-repeat; }
.mini a { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 12px 8px 10px; background: var(--panel); border: 1px solid var(--rule); text-decoration: none; color: inherit; font-size: 13px; min-height: 108px; transition: border-color 0.15s; }
.factory .mini a:hover { border-color: var(--brass); }
.mini .n { font-size: 10px; color: var(--brass-ink); }
.mini b { font: 600 13px/1.15 var(--display); text-transform: uppercase; letter-spacing: 0.12em; }
.mini .count { color: var(--muted); line-height: 1.3; }
.mini .state { margin-top: auto; font-size: 9.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.mini .state::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--green); flex: 0 0 auto; }
.mini .state.gap-text { color: var(--rust); }
.mini .state.gap-text::before { background: transparent; box-shadow: inset 0 0 0 1px var(--rust); }

/* stage sections, each under a double brass rule */
section.block { padding: 44px 0 12px; margin-top: 44px; border-top: 3px double var(--brass); scroll-margin-top: 24px; }
section.block:target { border-top-color: var(--green); }
.block-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.5fr); gap: 32px; margin-bottom: 22px; }
.block-head h2 { font-size: 32px; font-weight: 300; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.08em; margin: 10px 0 12px; }
.block-head .eyebrow::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 9px; vertical-align: -2px; background: var(--brass); -webkit-mask: var(--mask-gear) center / contain no-repeat; mask: var(--mask-gear) center / contain no-repeat; }
.block-head p { margin: 0; color: var(--muted); max-width: 40em; }
.block-head p + p { margin-top: 8px; }
.handoff { font-size: 14px; color: var(--muted); border-left: 1px solid var(--brass); padding-left: 20px; align-self: end; }
.handoff h3 { font-size: 10.5px; color: var(--brass-ink); margin-bottom: 6px; }
.subhead { font-size: 11px; color: var(--muted); margin: 30px 0 0; }

/* an artifact row */
.row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(11rem, 0.6fr); gap: 26px; padding: 22px 0; border-top: 1px solid var(--rule); scroll-margin-top: 24px; }
.row.first { border-top-color: var(--brass); }
.row:target { background: linear-gradient(90deg, var(--strip), transparent 70%); }
.row h3 { font: 600 20px/1.25 var(--serif); letter-spacing: 0; }
.row h3 small { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--muted); display: block; margin-top: 6px; overflow-wrap: anywhere; }
.row p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.facts { margin: 0; font-size: 14.5px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; align-content: start; }
.facts dt { font-size: 10px; line-height: 2.1; color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.side { font-size: 14px; color: var(--muted); }
.side .big { font: 300 26px/1.1 var(--display); font-variant-numeric: lining-nums; color: var(--ink); display: block; margin-bottom: 4px; }
.side .links { margin-top: 10px; display: grid; gap: 4px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 2px; border: 1px solid var(--rule); font-size: 9.5px; color: var(--muted); white-space: nowrap; }
.pill.ok { border-color: var(--green); color: var(--green); }
.pill.warn { border-color: var(--brass); color: var(--brass-ink); }
.pill.live { border-color: var(--rust); color: var(--rust); }
.pill.quiet { opacity: 0.8; }
.factory details { margin-top: 10px; font-size: 15px; }
.factory summary { cursor: pointer; color: var(--green); }
.factory details pre { background: var(--panel); border: 1px solid var(--rule); padding: 12px 14px; overflow: auto; font-size: 12px; line-height: 1.45; margin: 8px 0 0; max-height: 28rem; }
.files { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13.5px; }
.files li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dotted var(--rule); }
.files li.group { font-weight: 600; border-bottom-color: var(--brass); margin-top: 8px; }
.files li span:last-child { color: var(--muted); white-space: nowrap; }
.files li .digest { color: var(--faint); font-family: var(--mono); font-size: 11px; margin-left: 8px; }

/* recipe as a small specification */
.spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 22px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.spec div { font: 600 10px/1.6 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.spec b { display: block; font: 400 17px/1.25 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); margin-top: 2px; }

/* empty stage */
.empty { border-top: 1px solid var(--brass); padding: 24px 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
.empty h3 { font-size: 18px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.empty p { color: var(--muted); font-size: 15px; margin: 8px 0 0; }
.empty > div:only-child { grid-column: 1 / -1; }

/* Keep wide registry tables inside the page, with keyboard and touch scrolling. */
.results-scroll { max-width: 100%; overflow-x: auto; }

/* results */
.results { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.results th, .results td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); }
.results th { font-size: 10px; color: var(--muted); border-bottom: 1px solid var(--brass); }

/* serving: a panel of green enamel, framed in brass, for asking a model */
.ask { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 4px;
  background: radial-gradient(circle, var(--brass) 1.8px, transparent 2.4px) 12px 12px / 8px 8px no-repeat,
    radial-gradient(circle, var(--brass) 1.8px, transparent 2.4px) calc(100% - 12px) 12px / 8px 8px no-repeat,
    radial-gradient(circle, var(--brass) 1.8px, transparent 2.4px) 12px calc(100% - 12px) / 8px 8px no-repeat,
    radial-gradient(circle, var(--brass) 1.8px, transparent 2.4px) calc(100% - 12px) calc(100% - 12px) / 8px 8px no-repeat,
    var(--enamel); color: var(--on-enamel); border: 1px solid var(--brass); outline: 1px solid var(--brass); outline-offset: -7px;
  --ink: var(--on-enamel); --muted: var(--on-enamel-muted); --rule: color-mix(in srgb, var(--brass) 45%, transparent); --strip: color-mix(in srgb, #000 18%, var(--enamel)); --panel: color-mix(in srgb, #000 12%, var(--enamel)); --ground: var(--enamel); --green: var(--on-enamel); --brass-ink: #d8bd85; }
.ask > * { padding: 26px 28px; min-width: 0; }
.ask a { color: var(--on-enamel); }
.run-pick { display: block; margin-top: 12px; font-size: 14px; color: var(--muted); }
.run-pick select { font: inherit; max-width: 100%; margin-left: 6px; padding: 4px 8px; border: 1px solid var(--brass); background: var(--ground); color: var(--ink); }
.questions { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 4px 12px; }
.questions li { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 12px; padding: 9px 12px; border: 1px solid transparent; cursor: pointer; font-size: 15px; }
.questions li:hover { border-color: var(--rule); }
.questions li[aria-selected="true"] { background: var(--strip); border-color: var(--brass); }
.questions li code { color: var(--muted); font-size: 11.5px; }
.questions li.loading { color: var(--muted); cursor: default; }
.answer { background: var(--panel); border-top: 1px solid var(--rule); }
/* the question, its fields in a grid (each named above its box), then Ask */
.answer .q-text { margin: 0 0 18px; font: 600 19px/1.35 var(--serif); }
.answer .q-args { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 16px 18px; margin-bottom: 20px; }
.answer .q-args:empty { display: none; }
.answer .arg { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.answer .arg > span { font: 600 10.5px/1.2 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.answer .arg.flag { flex-direction: row; align-items: center; gap: 9px; align-self: end; min-height: 40px; }
.answer .arg.flag > span { font: 14px/1.3 var(--serif); letter-spacing: normal; text-transform: none; color: inherit; }
.answer .arg.flag input { width: 16px; height: 16px; margin: 0; accent-color: var(--brass); }
.answer .arg :is(input[type="text"], input[type="number"], select) { box-sizing: border-box; width: 100%; min-height: 40px; font: 15px var(--serif); padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--brass) 60%, transparent); border-radius: 2px; background: #fbf8f0; color: #1d211f; transition: border-color 0.15s, box-shadow 0.15s; }
.answer .arg :is(input, select):focus-visible { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 30%, transparent); }
.answer .arg input::placeholder { color: #8b8778; }
.answer .q-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.answer button { font: 600 12px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; padding: 12px 22px 11px; border: 1px solid var(--brass); background: var(--brass); color: #1b1f1d; cursor: pointer; }
.answer button:hover { background: #c8a560; }
.answer button[disabled] { opacity: 0.45; cursor: default; }
.answer button.q-again { background: transparent; color: inherit; }
.answer button.q-again:hover { background: var(--strip); }
.answer .status { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.answer .out { margin-top: 14px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 14.5px; }
.answer .out dt { color: var(--muted); }
.answer .out dd { margin: 0; overflow-wrap: anywhere; }
.answer .out dd dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; }
/* a table (or a record holding one) takes the row below its name, and scrolls sideways when wider */
.answer .out dd.rows { grid-column: 1 / -1; overflow-x: auto; overflow-wrap: normal; }
.answer .out dd.num { font: 300 30px/1 var(--display); font-variant-numeric: lining-nums tabular-nums; }
.answer .out dd table { border-collapse: collapse; font-size: 13.5px; width: 100%; }
.answer .out dd th, .answer .out dd td { text-align: left; padding: 3px 8px 3px 0; border-bottom: 1px dotted var(--rule); vertical-align: top; }
.answer .out dd th { color: var(--muted); font-weight: 600; }
.answer .out th:has(> button.info) { white-space: nowrap; }
.answer .out th button.info { width: 15px; height: 15px; margin-left: 5px; padding: 0; border: 1px solid var(--brass); border-radius: 50%; background: none; color: var(--brass); font: italic 600 10px/13px var(--serif); letter-spacing: 0; text-transform: none; vertical-align: 1px; cursor: pointer; }
.answer .out th button.info:hover { background: var(--brass); color: #1b1f1d; }
.field-help { max-width: min(36ch, calc(100vw - 32px)); padding: 14px 16px; border: 1px solid var(--brass); background: var(--ground); color: var(--ink); font: 400 14px/1.5 var(--serif); text-align: left;
  /* it sits inside a header that does not wrap: it wraps, and grows to its text */
  white-space: normal; letter-spacing: normal; text-transform: none; width: max-content; height: fit-content; overflow: visible; }
.answer .out td button.opens { font: inherit; letter-spacing: normal; text-transform: none; padding: 0; border: 0; background: none; color: var(--brass); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.answer .out dd[data-windows] ul { margin: 0; padding-left: 1.1em; }
.answer .out dd[data-windows] .note { margin: 4px 0 0; color: var(--muted); }
.answer .caveat { margin-top: 12px; padding-top: 10px; border-top: 1px dotted var(--rule); font-size: 13.5px; color: var(--muted); }
.answer .caveat summary { cursor: pointer; }
.answer .caveat ul { margin: 6px 0 0; padding-left: 1.2em; }
.cli { margin-top: 10px; font-size: 13px; color: var(--muted); }
.cli code { font-size: 11.5px; }

footer.factory-foot { margin-top: 56px; padding: 22px 0 48px; border-top: 3px double var(--brass); font-size: 13.5px; color: var(--muted); }
footer.factory-foot details { margin-top: 8px; }
/* the page closes on a stepped ornament, mirrored about the centre */
.factory .wrap::after { content: ""; display: block; height: 9px; margin: 72px auto 48px; width: 192px;
  background: linear-gradient(var(--brass), var(--brass)) center 0 / 192px 1px no-repeat,
    linear-gradient(var(--brass), var(--brass)) center 4px / 128px 1px no-repeat,
    linear-gradient(var(--brass), var(--brass)) center 8px / 64px 1px no-repeat; }

@media (max-width: 860px) {
  .hero, .block-head, .row, .empty, .project-row { grid-template-columns: 1fr; }
  .handoff { border-left: 0; padding-left: 0; }
  .process { grid-template-columns: repeat(2, 1fr); }
  .stage { min-height: 0; }
  .stage .arrow { display: none; }
  .process { background: none; row-gap: 22px; }
  .hero::before { right: 0; width: 100%; }
  .spec { grid-template-columns: repeat(2, 1fr); }
  .mini { grid-template-columns: repeat(2, 1fr); }
  .mini a { min-height: 0; }
}
@media (max-width: 480px) {
  .process, .mini { grid-template-columns: 1fr; }
  .hero-facts b { font-size: 22px; }
}

/* a stage's llm_report: an agent's prose handoff, folded under its artifact */
details.report { margin: 10px 0 4px; font-size: 15px; }
details.report > summary { font: 600 11px/1.6 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
details.report[open] { padding: 0 18px 12px; border-left: 1px solid var(--brass); background: var(--panel); }
details.report[open] > summary { padding-top: 10px; }
.report h3, .report h4, .report h5, .report h6 { font: 600 17px/1.3 var(--serif); margin: 12px 0 4px; }
.report p { margin: 6px 0; color: var(--ink); }
.report ul, .report ol { margin: 6px 0 6px 18px; padding: 0; }
.report li { margin: 2px 0; }
.report pre { background: var(--ground); border: 1px solid var(--rule); padding: 8px 10px; font-size: 12px; overflow: auto; margin: 6px 0; }

/* evaluation: one chart per prediction, every method on the same axis.
   Marks wear the chart tokens; text stays in ink. */
.eval-config { padding: 6px 0 4px; }
.eval-config + .eval-config { border-top: 1px solid var(--rule); margin-top: 28px; padding-top: 22px; }
.eval-config > h3 { font-size: 20px; text-transform: uppercase; letter-spacing: 0.08em; margin: 18px 0 6px; }
.metric-note { color: var(--muted); margin: 6px 0 0; font-size: 15px; max-width: 52em; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 8px; font-size: 10px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { display: inline-block; }
.legend i.wm, .legend i.base { width: 9px; height: 9px; border-radius: 50%; background: var(--wm); }
.legend i.base { background: var(--base); }
.legend i.chance-key { width: 0; height: 12px; border-left: 1px dashed var(--rust); }

.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 18px 28px; margin-top: 16px; }
.panel { margin: 0; padding: 12px 0 6px; border-top: 1px solid var(--brass); min-width: 0; --arm-w: 9.5rem; --v-w: 3rem; }
.panel figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.panel h4 { font: 600 15.5px/1.3 var(--serif); margin: 0; }
.panel .when { font-size: 9.5px; color: var(--brass-ink); white-space: nowrap; }
.dots { position: relative; }
.dot-row, .dot-axis { display: grid; grid-template-columns: var(--arm-w) minmax(0, 1fr) var(--v-w); gap: 0; align-items: center; }
.dot-row { min-height: 26px; font-size: 13.5px; }
.dot-row .arm { color: var(--muted); padding-right: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot-row.wm .arm { color: var(--ink); }
.dot-row .v { text-align: right; font-variant-numeric: tabular-nums lining-nums; color: var(--muted); }
.dot-row.wm .v { color: var(--ink); font-weight: 600; }
.track { position: relative; height: 26px; }
.dot-row .track { background: linear-gradient(var(--track), var(--track)) center / 100% 1px no-repeat; }
.track .ci { position: absolute; top: 11px; height: 4px; border-radius: 2px; background: var(--base); opacity: 0.55; }
.dot-row.wm .track .ci { background: var(--wm); opacity: 0.3; }
.track .pt { position: absolute; top: 8px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--base); box-shadow: 0 0 0 2px var(--ground); }
.dot-row.wm .track .pt { background: var(--wm); }
.chance { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--rust); opacity: 0.7; z-index: 0; }
.dot-axis { margin-top: 2px; }
.dot-axis .track { height: 18px; border-top: 1px solid var(--muted); }
.dot-axis .track span { position: absolute; top: 4px; transform: translateX(-50%); font: 11px/1.2 var(--serif); font-variant-numeric: lining-nums; color: var(--faint); }
.dot-axis .track span::before { content: ""; position: absolute; left: 50%; top: -4px; width: 1px; height: 3px; background: var(--muted); }
.compare { margin-top: 18px; }
.compare > summary { font-size: 15px; }
.compare td.top { font-weight: 600; }
.compare td small { color: var(--muted); font-weight: 400; }
.all-cells, .configs { margin-top: 22px; }
.all-cells > summary, .configs > summary { font-size: 15px; }

@media (max-width: 860px) {
  .panel { --arm-w: 7.5rem; }
}

/* serving: a published report, read instead of a live query */
.serving-report { border-top: 1px solid var(--brass); padding-top: 18px; }
.reading { margin: 10px 0 14px; padding: 14px 18px; background: var(--panel); border-left: 1px solid var(--brass); font-size: 16px; }
.reading p { margin: 4px 0; }
.reading.inline { margin: 0; font-size: 14.5px; }
.report-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.report-nav a { font-size: 10px; text-decoration: none; padding: 5px 11px 4px; border: 1px solid var(--rule); color: var(--muted); }
.report-nav a:hover { color: var(--ink); border-color: var(--brass); }
.report-section { padding: 22px 0 8px; border-top: 1px solid var(--rule); margin-top: 18px; scroll-margin-top: 24px; }
.report-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.report-section-head h3 { font-size: 20px; text-transform: uppercase; letter-spacing: 0.08em; }
.section-lede { color: var(--muted); margin: 6px 0 0; max-width: 46em; font-size: 15px; }
.trust { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; color: var(--muted); }
.trust i { width: 7px; height: 7px; transform: rotate(45deg); display: inline-block; box-shadow: inset 0 0 0 1px var(--faint); }
.trust[data-trust="strong"] i { background: var(--green); box-shadow: none; }
.trust[data-trust="fair"] i { background: linear-gradient(90deg, var(--brass) 50%, transparent 50%); box-shadow: inset 0 0 0 1px var(--brass); }
.trust[data-trust="weak"] i { box-shadow: inset 0 0 0 1px var(--rust); }
.trust small { color: var(--faint); text-transform: none; letter-spacing: 0; font-weight: 400; }
.caveat-fold p { color: var(--muted); margin: 6px 0 0; max-width: 52em; }
.criteria { font-size: 13px; color: var(--muted); margin: 4px 0 8px; }

.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 20px; margin-top: 14px; }
.board-col { border-top: 3px double var(--brass); padding-top: 10px; min-width: 0; }
.board-col h4 { font: 600 13px/1.4 var(--display); text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 8px; display: flex; justify-content: space-between; gap: 8px; }
.board-col h4 span { color: var(--muted); }
.board-col[data-column^="abnormal"] { border-top-color: var(--rust); }
.board-col ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.board-col li { padding: 10px 12px; background: var(--panel); border: 1px solid var(--rule); font-size: 14px; }
.item-head a { font-family: var(--mono); font-size: 12.5px; }
.item-head span { color: var(--ink); }
.item-facts { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.item-facts b { color: var(--ink); font-weight: 600; }
.board-col li p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.more { font-size: 13px; color: var(--muted); margin: 6px 0 0; }

.anomalies { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.anomaly { border-top: 1px solid var(--rule); padding-top: 12px; }
.anomaly-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.anomaly-head a { font-family: var(--mono); font-size: 13px; }
.anomaly-title { font: 600 17px/1.3 var(--serif); }
.anomaly-body { display: grid; grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1.4fr); gap: 18px; margin-top: 8px; align-items: start; }
.spark-wrap { margin: 0; }
.spark-wrap figcaption { font-size: 12px; color: var(--faint); margin-top: 2px; }
.spark { width: 100%; height: 56px; display: block; }
.spark line { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark polyline { fill: none; stroke: var(--base); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark circle { fill: var(--lag); stroke: var(--ground); stroke-width: 2; vector-effect: non-scaling-stroke; }
.events { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13.5px; }
.events li { padding: 3px 0; border-bottom: 1px dotted var(--rule); }
.events span { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-right: 6px; }

.trend { margin: 14px 0 0; }
.trend svg { width: 100%; height: auto; display: block; }
.trend .base, .trend .grid { stroke: var(--rule); stroke-width: 1; }
.trend .grid { opacity: 0.6; }
.trend .wash { fill: var(--wm); opacity: 0.1; }
.trend polyline { fill: none; stroke: var(--wm); stroke-width: 2; stroke-linejoin: round; }
.trend circle { fill: var(--wm); stroke: var(--ground); stroke-width: 2; }
.trend .hit { fill: transparent; }
.trend .hit:hover { fill: var(--track); opacity: 0.5; }
.trend text { font: 11px var(--serif); fill: var(--faint); }
.trend figcaption { font-size: 14px; color: var(--muted); }
.trend figcaption b { color: var(--ink); }

.shares { margin-top: 12px; display: grid; gap: 7px; max-width: 40rem; }
.share { display: grid; grid-template-columns: 10rem minmax(0, 1fr) 3.5rem; gap: 10px; align-items: center; font-size: 14px; }
.share-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-bar { height: 8px; background: var(--track); position: relative; }
.share-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--wm); min-width: 2px; }
.share-val { text-align: right; font-variant-numeric: tabular-nums lining-nums; }

.report-subject { margin-bottom: 4px; }
.live-ask { margin-top: 30px; border-top: 1px solid var(--rule); padding-top: 14px; }
.live-ask > summary { font-size: 15px; }
.live-ask .ask { margin-top: 12px; }

@media (max-width: 860px) {
  .anomaly-body { grid-template-columns: 1fr; }
  .share { grid-template-columns: 7rem minmax(0, 1fr) 3rem; }
}

/* training, condensed: a recipe per line; recipes and runs folded */
.stage-fold { border-top: 1px solid var(--brass); padding-top: 12px; margin-top: 16px; }
.stage-fold > summary { list-style: none; display: flex; align-items: center; gap: 10px; font: 600 12px/1.6 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.stage-fold > summary::-webkit-details-marker { display: none; }
.stage-fold > summary::before { content: ""; width: 7px; height: 7px; border-right: 1px solid var(--brass-ink); border-bottom: 1px solid var(--brass-ink); transform: rotate(-45deg); transition: transform 0.15s; }
.stage-fold[open] > summary::before { transform: rotate(45deg); }
.stage-fold > summary + .row { border-top-color: transparent; }
.stage-fold > summary:hover { color: var(--green); }
.recipes { list-style: none; margin: 10px 0 0; padding: 0; }
.recipes li { padding: 9px 0; border-top: 1px solid var(--rule); font-size: 15px; scroll-margin-top: 24px; }
.recipes li:first-child { border-top: 0; }
.recipes li b { font: 600 16px/1.35 var(--serif); margin-right: 6px; }
.recipes li > span { color: var(--muted); }
.recipes .recipe-runs { margin-left: 4px; white-space: nowrap; }
.recipes li:target { background: linear-gradient(90deg, var(--strip), transparent 60%); }
.recipes details { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .stage, .mini a, .stage-fold > summary::before { transition: none; }
}

/* drops: the signed-in person's form and list on /factory/ */
.drop-form { display: grid; gap: 10px; max-width: 44rem; }
.drop-form label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.drop-form input, .drop-form textarea, .drop-form select { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--rule); background: transparent; color: inherit; width: 100%; box-sizing: border-box; }
.drop-form select { width: auto; min-width: 14rem; justify-self: start; }
.drop-form textarea[name="urls"] { font-family: var(--mono); font-size: 12px; }
.drop-form button { justify-self: start; font: inherit; padding: 6px 16px; cursor: pointer; }
.drop-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; font-size: 14px; overflow-wrap: anywhere; }
.eval-caveats { margin-top: 18px; font-size: 13px; }

/* a drop's card: the dataset carried along the line shaft past five
   stations, each a brass-bezelled dial; the shaft fills in green enamel as
   stations finish, the station at work turns its gear */
.drop-cards { display: grid; gap: 22px; margin-top: 18px; }
.drop-card { position: relative; padding: 20px 22px 18px; background: radial-gradient(circle, var(--brass) 1.6px, transparent 2.2px) 7px 7px / 8px 8px no-repeat, radial-gradient(circle, var(--brass) 1.6px, transparent 2.2px) calc(100% - 7px) 7px / 8px 8px no-repeat, radial-gradient(circle, var(--brass) 1.6px, transparent 2.2px) 7px calc(100% - 7px) / 8px 8px no-repeat, radial-gradient(circle, var(--brass) 1.6px, transparent 2.2px) calc(100% - 7px) calc(100% - 7px) / 8px 8px no-repeat, var(--panel); border: 1px solid var(--brass); outline: 1px solid var(--brass); outline-offset: 3px; }
.drop-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.drop-head h3 { margin: 0; font: 600 17px/1.3 var(--display); text-transform: uppercase; letter-spacing: 0.12em; }
.drop-head h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--brass); }
.drop-head .cli { margin-top: 4px; overflow-wrap: anywhere; }
.drop-status { flex: 0 0 auto; font: 600 10.5px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; padding: 7px 10px 6px; border: 1px solid var(--brass); color: var(--brass-ink); }
.drop-status[data-drop-status-badge="started"] { background: var(--enamel); color: var(--on-enamel); }
.drop-status[data-drop-status-badge="failed"] { border-color: var(--rust); color: var(--rust); }
.conveyor { --reached: 0; list-style: none; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 26px 0 8px; padding: 0; }
.conveyor::before, .conveyor::after { content: ""; position: absolute; left: 10%; top: 25px; height: 6px; }
.conveyor::before { right: 10%; background: linear-gradient(var(--brass), var(--brass)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--brass), var(--brass)) 0 100% / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--rule) 0 6px, transparent 6px 12px); }
.conveyor::after { width: calc(80% * min(var(--reached), 4) / 4); background: var(--green); transition: width 0.6s ease-out; }
.station { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.station .dial { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--panel); border: 2px solid var(--rule); box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px var(--rule); font: 600 20px/1 var(--display); color: var(--faint); margin-bottom: 6px; }
.station b { font: 600 12px/1.2 var(--display); letter-spacing: 0.14em; text-transform: uppercase; }
.station small { font-size: 12.5px; color: var(--muted); line-height: 1.3; min-height: 1.3em; }
.station[data-station-state="done"] .dial { background: var(--enamel); border-color: var(--brass); color: var(--on-enamel); box-shadow: inset 0 0 0 4px var(--enamel), inset 0 0 0 5px var(--brass); }
.station[data-station-state="work"] .dial { border-color: var(--brass); box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px var(--brass), 0 0 0 4px var(--strip); font-size: 0; }
.station[data-station-state="work"] .dial::after { content: ""; width: 28px; height: 28px; background: var(--brass); -webkit-mask: var(--mask-gear) center / contain no-repeat; mask: var(--mask-gear) center / contain no-repeat; animation: drop-gear 6s linear infinite; }
.station[data-station-state="work"] small { color: var(--brass-ink); }
.station[data-station-state="wait"] .dial { border-style: dashed; }
.station[data-station-state="failed"] .dial { border-color: var(--rust); color: var(--rust); box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px var(--rust); }
.station[data-station-state="skipped"] { opacity: 0.55; }
@keyframes drop-gear { to { transform: rotate(360deg); } }
.drop-gauges { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 18px; background: var(--brass); border: 1px solid var(--brass); }
.gauge { background: var(--panel); padding: 12px 14px; min-width: 0; }
.gauge .eyebrow { display: block; font: 600 10.5px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 6px; }
.gauge b { font: 600 22px/1.1 var(--display); }
.gauge small { font-size: 12.5px; color: var(--muted); }
.gauge p { margin: 0 0 4px; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.drop-task { margin: 12px 0 0; }
.drop-card details { margin-top: 12px; }
@media (max-width: 640px) {
  .drop-card { padding: 16px 14px 14px; }
  .station .dial { width: 40px; height: 40px; font-size: 15px; }
  .conveyor::before, .conveyor::after { top: 17px; }
  .station b { font-size: 8.5px; letter-spacing: 0.02em; }
  .station { padding: 0 1px; }
  .station small { font-size: 11px; }
  .drop-gauges { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .station[data-station-state="work"] .dial::after { animation: none; }
  .conveyor::after { transition: none; }
}
.drop-form label small { font-size: 12.5px; color: var(--faint); line-height: 1.35; }
.drop-form [data-drop-slug] { font-family: var(--mono); font-size: 12px; color: var(--muted); min-height: 1em; }

/* folds: the form, and drops that have ended; nothing wider than the page */
.drop-new > summary { cursor: pointer; font: 600 12px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass-ink); padding: 10px 0; }
.drop-new[open] > summary { margin-bottom: 10px; }
.drop-cards { grid-template-columns: minmax(0, 1fr); }
.drop-card { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.drop-card pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.table-scroll { max-width: 100%; overflow-x: auto; margin: 10px 0; }
.table-scroll table { border-collapse: collapse; font-size: 13px; overflow-wrap: normal; }
.table-scroll th, .table-scroll td { text-align: left; padding: 5px 10px 5px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table-scroll th { font: 600 11px/1.3 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-ink); }
details.drop-card > summary { list-style: none; cursor: pointer; }
details.drop-card > summary::-webkit-details-marker { display: none; }
details.drop-card > summary h3::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--brass-ink); }
details.drop-card[open] > summary h3::before { content: "▾"; }
details.drop-card:not([open]) { padding-bottom: 14px; }

/* the works' floor (/factory-world.js): a green enamel console, edged in brass
   like the header, set over the stage strips */
.factory-world { margin: 36px 0 8px; background: var(--enamel); color: var(--on-enamel); border: 1px solid var(--brass); outline: 1px solid var(--brass); outline-offset: 3px; }
.factory-world [hidden] { display: none !important; }
.world-toolbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--brass); }
.world-heading { margin-right: auto; font: 600 13px var(--display); text-transform: uppercase; letter-spacing: 0.16em; }
.world-heading small { display: block; margin-top: 4px; font: 400 12px/1.4 var(--serif); letter-spacing: 0; text-transform: none; color: var(--on-enamel-muted); }
.world-project-picker { display: flex; gap: 8px; align-items: center; max-width: 100%; font: 600 10.5px var(--display); text-transform: uppercase; letter-spacing: 0.14em; color: var(--on-enamel-muted); }
.world-project-picker select { font: 14px var(--serif); padding: 6px 10px; background: transparent; color: var(--on-enamel); border: 1px solid var(--brass); max-width: 300px; min-width: 0; }
.world-project-picker option { color: var(--ink); background: var(--panel); }
.world-controls { display: flex; flex-wrap: wrap; gap: 5px; }
.world-controls button { min-width: 34px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--brass); background: transparent; color: var(--on-enamel); font: 600 10.5px var(--display); text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; }
.world-controls button:hover, .world-controls button[aria-pressed="true"] { background: var(--brass); color: var(--enamel); }
.world-viewport { height: clamp(380px, 60svh, 720px); overflow: hidden; position: relative; }
.world-svg { display: block; width: 100%; height: 100%; user-select: none; touch-action: none; cursor: grab; }
.world-svg:active { cursor: grabbing; }
.world-svg [data-serve][href] { cursor: pointer; outline: none; }
.world-selection { fill: #d9b46a; fill-opacity: 0; stroke: #d9b46a; stroke-width: 2; stroke-opacity: 0; transition: stroke-opacity 0.2s, fill-opacity 0.2s; }
[data-serve][href]:hover .world-selection { stroke-opacity: 0.85; fill-opacity: 0.05; }
.world-svg [data-serve][href]:focus-visible .world-selection { stroke: #f4dfa6; stroke-width: 3; stroke-dasharray: 5 5; stroke-opacity: 1; }
[data-building][data-activity="blocked"] .world-selection { stroke: #e08a6c; stroke-opacity: 0.85; }
[data-building][data-activity="running"] .world-selection { stroke: #8fd3bc; stroke-opacity: 0.7; }
.world-equipment { filter: drop-shadow(7px 10px 2px #04120e90); transition: opacity 0.3s; }
[data-building][data-state="gap"]:not([data-activity="running"]) .world-equipment { opacity: 0.35; filter: grayscale(1); }
.world-zone-name { font: 600 16px var(--display); text-transform: uppercase; letter-spacing: 0.16em; text-anchor: middle; fill: #f1e9d6; paint-order: stroke; stroke: #123029; stroke-width: 6px; }
.world-zone-count { font: 11px var(--mono); text-anchor: middle; fill: #c9d2c2; paint-order: stroke; stroke: #123029; stroke-width: 5px; }
.world-floor-stamp { font: 600 12px var(--display); letter-spacing: 0.3em; fill: #c9a862; opacity: 0.55; }
.world-belt { fill: none; stroke-linejoin: round; stroke-linecap: butt; }
.world-route-gap { opacity: 0.25; }
.world-stock-count { fill: #f1e9d6; font: 10px var(--mono); paint-order: stroke; stroke: #123029; stroke-width: 4px; }
.world-inspector { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--brass); }
.world-inspector-info { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; flex: 1; min-width: 0; }
.world-inspector-info strong { font: 600 14px var(--display); text-transform: uppercase; letter-spacing: 0.14em; color: var(--on-enamel); }
.world-inspector-info > span { font-size: 14px; color: var(--on-enamel-muted); }
.world-record-state { font: 600 10px/1.4 var(--display); text-transform: uppercase; letter-spacing: 0.14em; color: var(--on-enamel-muted); }
.world-record-state[data-activity="blocked"] { color: #e8a589; }
.world-record-state[data-activity="running"] { color: #8fd3bc; }
.world-legend { padding: 9px 18px; border-top: 1px solid color-mix(in srgb, var(--brass) 50%, transparent); font-size: 12.5px; color: var(--on-enamel-muted); }
/* motion: the core, steam and beacon move only while their stage runs */
.world-steam { fill: #cfe0d6; opacity: 0.2; animation: world-exhaust 3s ease-in-out infinite; }
.world-core { animation: world-charge 2s ease-in-out infinite; }
.world-beacon { animation: world-charge 1.5s ease-in-out infinite; }
.world-core, .world-steam, .world-beacon { animation-play-state: paused; }
[data-building][data-activity="running"] :is(.world-core, .world-steam, .world-beacon) { animation-play-state: running; }
.world-paused *, .world-svg [data-state="gap"]:not([data-activity="running"]) * { animation-play-state: paused !important; }
@keyframes world-exhaust { 50% { transform: translateY(-15px); opacity: 0.05; } }
@keyframes world-charge { 50% { opacity: 0.55; } }
@media (max-width: 700px) {
  .world-toolbar { gap: 12px; padding: 12px; }
  .world-heading { flex: 1 0 100%; }
  .world-project-picker { flex: 1; }
  .world-project-picker select { width: 100%; max-width: 100%; min-height: 44px; }
  .world-controls { width: 100%; }
  .world-controls button { min-width: 44px; min-height: 44px; }
  .world-viewport { height: 400px; }
  .world-inspector { padding: 12px; flex-wrap: wrap; gap: 10px; }
  .world-inspector-info { flex-basis: calc(100% - 80px); }
  .world-legend { padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .world-selection, .world-equipment { transition: none; }
}

/* stage tabs (/factory-tabs.js): one stage section shows at a time */
.stage-panels > [hidden] { display: none !important; }