/* PI v9. One decision at a time; the project and history have their own views. */
html.startup-document { scroll-behavior: auto; --game-strip-height: 7rem; --game-layer-state: 2; }
.startup-page { font-size: 1rem; }
.startup-page [hidden] { display: none !important; }
.game-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 24px; min-height: 72px; border-bottom: 1px solid var(--line); }
.game-header nav { display: flex; flex-wrap: wrap; gap: 24px; }
.game-header nav a { display: inline-flex; align-items: center; min-height: 48px; font-size: 1rem; color: var(--ink-soft); text-decoration: none; }
.game-shell { max-width: 1040px; padding-block: 24px 64px; }
.game-title h1 { font-size: 1.25rem; font-weight: 600; }
.game-intro { max-width: 66ch; margin-top: 8px; color: var(--ink-soft); line-height: 1.7; }
.game-notice { padding-block: 12px; color: var(--signal-text); font-size: .875rem; line-height: 1.7; }
.game-notice:empty, #share-status:empty { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.party-menu { margin-block: 8px 20px; }
.party-menu > summary { width: fit-content; margin-left: auto; color: var(--ink-soft); }
.party-menu[open] { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.party-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-block: 12px; }
.party-menu .text-button { border: 0; padding-inline: 0; }
.party-menu details { margin-top: 16px; }
.party-menu p + p { margin-top: 12px; }
#party-version { overflow-wrap: anywhere; }
.share-panel label { display: block; margin-block: 12px; }
.share-panel textarea { display: block; width: 100%; max-width: 100%; min-height: 5rem; max-height: 10rem; overflow: auto; resize: vertical; padding: 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-mono); font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.company-file, .game-stage, .game-stage > *, .company-heading, .company-name-with-pet { min-width: 0; }
.company-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.company-name-with-pet { display: flex; align-items: center; gap: 12px; }
.pixel-pet { image-rendering: pixelated; }
.company-pet { flex: none; width: 44px; height: 49px; }
.company-name { font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 600; line-height: 1.25; letter-spacing: -.025em; overflow-wrap: anywhere; }
.company-stage { font-size: .875rem; color: var(--ink-soft); }
.file-topline { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; color: var(--ink-soft); font-size: .8125rem; line-height: 1.6; }
.company-product { display: none; }
.game-strip { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--game-layer-state); margin-block: 16px; padding: 16px 20px; border-block: 1px solid var(--line); background: var(--paper); }
.game-strip.is-unpinned { position: static; }
.game-strip dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin: 0; }
.game-strip dt { color: var(--ink-soft); font-size: .8125rem; line-height: 1.6; }
.game-strip dd { margin: 5px 0 0; font-family: var(--font-mono); font-size: 1.125rem; overflow-wrap: anywhere; }
.game-strip dd span { font-size: .8125rem; color: var(--ink-soft); }
.annual-board { margin-bottom: 12px; }
.annual-board-head p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: .875rem; line-height: 1.7; }
.annual-board-head span { color: var(--ink-soft); }
.quarter-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 8px 0 0; padding: 0; }
.quarter-track li { padding-block: 6px; border-bottom: 2px solid var(--line); color: var(--ink-soft); font-size: .8125rem; }
.quarter-track li[aria-current="step"] { color: var(--signal-text); border-color: var(--signal); font-weight: 600; }
.quarter-track .quarter-done { color: var(--ink); border-color: var(--ink-soft); }
.game-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-block: 16px 32px; }
.game-nav button { min-width: 0; min-height: 48px; padding: 10px 8px; border: 0; border-bottom: 2px solid var(--line); color: var(--ink-soft); background: transparent; font: inherit; font-size: 1rem; cursor: pointer; overflow-wrap: anywhere; }
.game-nav button[aria-pressed="true"] { color: var(--signal-text); border-color: var(--signal); font-weight: 600; }
.game-nav button:hover { background: var(--muted); }
.story-pane, #extra-pane, #dialogue-pane, #review-pane, #history-pane { max-width: 760px; margin-inline: auto; }
.step-label { margin-bottom: 8px; font-size: .875rem; color: var(--signal-text); }
.scene-title { max-width: 30ch; font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.25; letter-spacing: -.025em; font-weight: 600; overflow-wrap: anywhere; }
.scene-copy, .outcome p, .dialogue-line { max-width: 68ch; margin-top: 20px; font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.85; overflow-wrap: anywhere; }
.scene-note { margin-top: 12px; font-size: .875rem; color: var(--ink-soft); line-height: 1.7; }
.first-turn-note, .cost-explainer { margin-top: 20px; padding: 16px 20px; background: var(--muted); border-left: 3px solid var(--signal); font-size: 1rem; line-height: 1.7; }
.npc-note { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; margin-block: 24px; }
.npc-note img { width: 64px; height: 72px; }
.npc-note blockquote { margin: 6px 0 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.7; }
.speaker-name { font-weight: 600; font-size: 1rem; }
.npc-note .text-button { margin-top: 4px; padding-inline: 0; }
.preparation-entry { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-block: 24px; padding-block: 16px; border-block: 1px solid var(--line); }
.preparation-entry p { max-width: 46ch; font-size: .875rem; color: var(--ink-soft); line-height: 1.7; }
.decision-heading { margin-block: 24px 16px; font-size: 1.25rem; font-weight: 600; }
.choice-list, .side-tasks { display: grid; gap: 12px; }
.choice, .side-task { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--card); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.choice-title, .plan-choice strong { display: block; font-size: 1.125rem; font-weight: 600; line-height: 1.5; }
.choice-note, .plan-choice > span { display: block; margin-top: 8px; color: var(--ink-soft); font-size: 1rem; line-height: 1.7; }
.choice:hover:not([aria-disabled="true"]), .side-task:hover:not([aria-disabled="true"]) { border-color: var(--signal); }
.choice[aria-pressed="true"] { border-color: var(--signal); box-shadow: inset 3px 0 var(--signal); }
.choice-selected, .plan-choice small { display: block; margin-top: 12px; color: var(--signal-text); font-size: .875rem; }
.blocked-reason { display: block; margin-top: 12px; color: var(--ink-soft); font-size: .875rem; line-height: 1.7; }
.choice[aria-disabled="true"], .side-task[aria-disabled="true"] { background: var(--paper); border-style: dashed; cursor: default; }
.choice[aria-disabled="true"] strong, .side-task[aria-disabled="true"] strong { color: var(--ink-soft); }
.decision-review { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.decision-review h3 { font-size: 1.25rem; line-height: 1.5; font-weight: 600; }
.decision-review > p { max-width: 68ch; margin-top: 12px; line-height: 1.8; }
.review-terms, .choice-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-block: 20px; }
.review-terms > div, .choice-term { min-width: 0; }
.review-terms dt, .choice-term > span { display: block; font-size: .8125rem; line-height: 1.6; color: var(--ink-soft); }
.review-terms dd, .choice-term strong { display: block; margin: 6px 0 0; font-family: var(--font-mono); font-size: 1rem; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.game-button, .text-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; max-width: 100%; padding: 12px 20px; border: 1px solid transparent; border-radius: var(--radius); font-family: var(--font-ui); font-size: 1rem; line-height: 1.5; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; overflow-wrap: anywhere; }
.game-button { color: var(--action-foreground); background: var(--signal); border-color: var(--signal); font-weight: 600; }
.game-button:hover, .game-button:focus-visible { box-shadow: inset 0 0 0 2px var(--action-foreground); }
.text-button { color: var(--signal-text); background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.text-button:hover { background: var(--muted); }
.game-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.annual-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.opening { margin-top: 24px; }
.opening-lead, .ending-lead { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 24px; align-items: center; }
.opening-lead > div { min-width: 0; }
.opening-lead p { margin-top: 12px; font-size: 1rem; line-height: 1.8; }
.idea-brief { display: grid; gap: 16px; margin-top: 24px; }
.idea-brief dt { color: var(--ink-soft); font-size: .875rem; }
.idea-brief dd { margin: 6px 0 0; font-size: 1.125rem; font-weight: 500; line-height: 1.7; }
.how-to-play { margin-top: 24px; padding-left: 24px; }
.how-to-play li { padding-left: 8px; margin-top: 16px; }
.how-to-play strong, .how-to-play span { display: block; line-height: 1.7; }
.how-to-play span { margin-top: 4px; color: var(--ink-soft); }
.quarter-results { margin-top: 24px; }
.quarter-results > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.quarter-results dt { font-size: 1rem; line-height: 1.7; }
.quarter-results dd { display: grid; gap: 6px; margin: 0; font-family: var(--font-mono); overflow-wrap: anywhere; }
.quarter-results dd strong { font-size: 1.25rem; font-weight: 500; }
.quarter-results small { font-size: .8125rem; color: var(--ink-soft); }
.outcome { margin-top: 24px; }
.outcome h3, .callbacks h3, .year-review h3, .ending-causes h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.5; }
.callbacks, .year-review, .ending-causes { margin-top: 28px; }
.callback { padding-left: 16px; margin-top: 16px; border-left: 3px solid var(--signal); }
.callback p, .year-review p { font-family: var(--font-serif); font-size: 1rem; line-height: 1.8; }
.callback a { display: inline-flex; align-items: center; min-height: 48px; color: var(--signal-text); text-underline-offset: 4px; }
.ending-causes h4 { margin-top: 20px; font-size: 1rem; font-weight: 600; }
.ending-payout { margin-top: 24px; }
.ending-payout dt { color: var(--ink-soft); }
.ending-payout dd { margin: 8px 0 0; font-family: var(--font-mono); font-size: clamp(2rem, 4vw, 3rem); overflow-wrap: anywhere; }
.ending-warning { margin-top: 20px; font-size: 1rem; font-weight: 600; line-height: 1.8; }
.prep-route, .project-focus { padding-block: 20px; margin-top: 20px; border-top: 1px solid var(--line); }
.prep-route h3, .project-focus h3 { font-size: 1.25rem; line-height: 1.5; font-weight: 600; }
.prep-route > p, .project-focus p { margin-top: 12px; font-size: 1rem; line-height: 1.8; }
.prep-route .side-tasks { margin-top: 16px; }
.person-heading { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 24px; }
.person-heading img { width: 96px; height: auto; }
.person-heading p { margin-top: 8px; color: var(--ink-soft); font-size: .875rem; line-height: 1.6; }
.dialogue-layout { display: grid; gap: 24px; }
.dialogue-line { margin: 24px 0 0; }
.dialogue-answers h3 { font-size: 1.25rem; margin-block: 12px; }
.crew-list { display: grid; gap: 12px; margin-top: 24px; }
.crew-person { display: flex; align-items: center; gap: 20px; min-height: 100px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--card); text-align: left; }
button.crew-person { cursor: pointer; }
.crew-person > span { display: grid; gap: 6px; min-width: 0; }
.crew-person strong { font-size: 1.125rem; }
.crew-person span span, .crew-person small { color: var(--ink-soft); font-size: .875rem; line-height: 1.6; }
.development-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.development-branches > details { min-width: 0; }
.development-branches ol { display: grid; gap: 16px; list-style: none; padding: 0; margin: 12px 0 0; }
.development-branches summary { font-weight: 600; }
.changes dl { display: grid; gap: 12px; margin-top: 16px; }
.changes dl > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.changes dd { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; font-family: var(--font-mono); }
.changes small { color: var(--ink-soft); }
.facts-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.facts-groups h3 { font-size: 1.125rem; font-weight: 600; }
.facts-groups dt, details[data-detail="ending-money"] dt { margin-top: 16px; color: var(--ink-soft); font-size: .875rem; }
.facts-groups dd, details[data-detail="ending-money"] dd { margin: 6px 0 0; font-family: var(--font-mono); font-size: 1rem; overflow-wrap: anywhere; }
.startup-page summary { min-height: 48px; padding-block: 12px; font-size: 1rem; line-height: 1.6; cursor: pointer; }
.startup-page summary:hover { color: var(--signal-text); }
.game-stage details { margin-top: 24px; }
.game-stage details p, .game-rules p { max-width: 70ch; margin-block: 12px; font-size: 1rem; line-height: 1.8; }
.ledger-list { list-style: none; padding: 0; margin-top: 24px; }
.ledger-list li { padding-block: 20px; border-top: 1px solid var(--line); }
.ledger-meta { color: var(--signal-text); font-family: var(--font-mono); font-size: .8125rem; line-height: 1.7; }
.ledger-list h3 { margin-block: 8px; font-size: 1.125rem; line-height: 1.5; font-weight: 600; }
.ledger-list li > p:last-child { font-family: var(--font-serif); font-size: 1rem; line-height: 1.8; }
.archive-list { list-style: none; padding: 0; }
.archive-list button { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; width: 100%; min-height: 48px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 1rem; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.archive-list span { color: var(--ink-soft); font-size: .875rem; }
.confirmation { padding: 20px; background: var(--muted); margin-top: 20px; }
.confirmation h3 { font-size: 1.25rem; }
.confirmation p { margin-block: 12px; line-height: 1.8; }
.startup-page [tabindex="-1"], .startup-page button, .startup-page summary, .startup-page input, .startup-page textarea { scroll-margin-block: calc(var(--game-strip-height) + env(safe-area-inset-top, 0px) + 20px) 24px; }
.startup-page [tabindex="-1"]:focus, .startup-page button:focus-visible, .startup-page summary:focus-visible, .startup-page input:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.startup-page .site-footer__links a { min-height: 48px; font-size: .8125rem; }
@media (max-width: 960px) {
  .development-branches { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .game-header .brand { font-size: .875rem; min-height: 48px; }
  .game-header nav { gap: 20px; }
  .game-shell { padding-top: 16px; }
  .company-stage { display: none; }
  .file-topline { gap: 4px 12px; }
  .game-strip { padding: 12px 0; }
  .game-strip dl { gap: 8px; }
  .game-strip dd { font-size: 1rem; }
  .game-nav { margin-bottom: 24px; }
  .game-nav button { font-size: .875rem; padding-inline: 4px; }
  .opening-lead { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; }
  .opening-lead > img { width: 64px; height: 72px; }
  .scene-copy, .outcome p, .dialogue-line { font-size: 1rem; line-height: 1.8; }
  .first-turn-note, .cost-explainer { padding: 12px 16px; }
  .annual-options { grid-template-columns: minmax(0, 1fr); }
  .choice, .side-task { padding: 16px; }
  .review-terms, .choice-terms { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .review-terms > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .review-terms dd { margin: 0; }
  .game-actions { align-items: stretch; }
  .game-actions .game-button { width: 100%; }
  .npc-note { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .npc-note img { width: 48px; height: 54px; }
  .facts-groups { grid-template-columns: minmax(0, 1fr); }
  .person-heading { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
  .person-heading img { width: 64px; }
  .ending-lead { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
  .ending-lead img { width: 64px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) { html.startup-document { scroll-behavior: auto; } .startup-page *, .startup-page *::before, .startup-page *::after { animation: none !important; transition: none !important; } }
/* v7: a living pixel workshop, followed by inspectable party history. */
#game-world, #game-trends, .world-layout > *, .pulse-metrics > div { min-width: 0; }
.workshop { margin-block: 12px 20px; border-block: 1px solid var(--line); }
.workshop > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; font-weight: 600; }
.workshop > summary::before { content: '+'; font-family: var(--font-mono); color: var(--signal-text); }
.workshop[open] > summary::before { content: '−'; }
.workshop-stage { margin-left: auto; color: var(--ink-soft); font-size: .8125rem; font-weight: 400; }
.world-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; padding-block: 12px; }
.world-floor { position: relative; padding: 24px 20px 16px; background: var(--muted); border-radius: var(--radius); isolation: isolate; }
.world-window { position: absolute; top: 20px; left: 20px; display: grid; grid-template-columns: 1fr 1fr; width: 64px; height: 64px; gap: 4px; padding: 4px; border: 4px solid var(--line); background: var(--paper); z-index: -1; }
.world-window span { background: var(--card); }
.world-pet { position: relative; display: grid; justify-items: center; min-height: 150px; }
.world-pet > button { display: grid; place-items: center; padding: 0 24px; min-width: 100px; min-height: 112px; border: 0; border-radius: var(--radius); background: transparent; cursor: pointer; }
.world-pet button:hover, .world-pet button:focus-visible { background: var(--card); }
.world-pet img { display: block; width: 100px; height: 112px; transform-origin: 50% 100%; }
.world-pet p { margin-top: 8px; font-weight: 600; font-size: .875rem; line-height: 1.5; text-align: center; }
.world-bench { height: 12px; margin: 8px 12% 0; border-bottom: 4px solid var(--signal); background: var(--line); }
.world-receipt { margin-top: 12px; color: var(--signal-text); font-family: var(--font-mono); font-size: .8125rem; line-height: 1.7; text-align: center; overflow-wrap: anywhere; }
.world-cast { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.25rem), 1fr)); align-items: start; gap: 4px; margin-top: 16px; }
.world-person { display: grid; justify-items: center; gap: 5px; min-width: 0; min-height: 104px; margin: 0; padding: 8px 2px; border: 1px solid transparent; border-radius: var(--radius); color: var(--ink); background: transparent; text-align: center; }
button.world-person { cursor: pointer; }
.world-person img { display: block; width: 44px; height: 49px; }
.world-person > span { overflow-wrap: anywhere; font-size: .875rem; font-weight: 600; line-height: 1.4; }
.world-person small { overflow-wrap: anywhere; color: var(--ink-soft); font-size: .8125rem; line-height: 1.5; }
button.world-person:hover, button.world-person:focus-visible { border-color: var(--signal); background: var(--card); }
.world-hint { margin-top: 10px; color: var(--ink-soft); font-size: .8125rem; line-height: 1.6; }
.inspector-controls, .trend-controls { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
.inspector-controls button, .trend-controls button { min-height: 48px; max-width: 100%; padding: 10px 12px; border: 0; border-bottom: 2px solid var(--line); color: var(--ink-soft); background: transparent; font: inherit; font-size: .875rem; line-height: 1.5; cursor: pointer; overflow-wrap: anywhere; }
.inspector-controls button[aria-pressed="true"], .trend-controls button[aria-pressed="true"] { color: var(--signal-text); border-color: var(--signal); font-weight: 600; }
.inspector-controls button:hover, .trend-controls button:hover { background: var(--muted); }
#world-readout > h3 { font-size: 1.125rem; font-weight: 600; }
.pulse-metrics { display: grid; gap: 16px; margin: 16px 0 0; }
.pulse-metrics dt { font-size: .875rem; line-height: 1.6; color: var(--ink-soft); }
.pulse-metrics dd { margin: 4px 0 0; }
.pulse-metrics dd > strong { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 500; overflow-wrap: anywhere; }
.pulse-metrics meter { display: block; width: 100%; height: 12px; margin-top: 8px; border: 0; border-radius: 0; background: var(--line); accent-color: var(--signal); }
.pulse-metrics meter::-webkit-meter-bar { height: 8px; border: 0; border-radius: 0; background: var(--line); }
.pulse-metrics meter::-webkit-meter-optimum-value { background: var(--signal); border-radius: 0; }
.pulse-metrics meter::-moz-meter-bar { background: var(--signal); }
.metric-explanation > details { margin: 0; }
.metric-explanation summary { display: inline-flex; align-items: center; min-height: 48px; padding-block: 4px; color: var(--signal-text); font-size: .8125rem; }
.metric-explanation p { max-width: 48ch; padding-bottom: 8px; color: var(--ink-soft); font-size: .875rem; line-height: 1.7; }
.world-to-story { margin-block: 4px 16px; }
.ownership { margin-top: 20px; }
.ownership p { font-size: .875rem; line-height: 1.7; }
.ownership svg { display: block; width: 100%; height: 16px; margin-top: 12px; }
.share-0 { fill: var(--signal); } .share-1 { fill: var(--ink-soft); } .share-2 { fill: var(--line); }
.company-trends { margin-block: 0 24px; }
.company-trends > summary { display: flex; gap: 12px; flex-wrap: wrap; font-weight: 600; }
.company-trends > summary::before { content: '+'; color: var(--signal-text); }
.company-trends[open] > summary::before { content: '−'; }
.company-trends > summary span { color: var(--ink-soft); font-size: .875rem; font-weight: 400; }
.trend-controls { margin-top: 12px; }
.history-chart { margin: 0; }
.history-chart h3 { font-size: 1.125rem; font-weight: 600; }
.history-chart figcaption p { margin-top: 8px; color: var(--ink-soft); font-size: .875rem; line-height: 1.6; }
.history-chart svg { display: block; width: 100%; height: auto; max-height: 280px; overflow: visible; }
.chart-extents, .chart-time { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; color: var(--ink-soft); font-family: var(--font-mono); font-size: .8125rem; line-height: 1.6; }
.chart-extents { margin-top: 16px; }
.chart-time { margin-top: -8px; }
.chart-axis { stroke: var(--line); stroke-width: 1; }
.chart-cursor { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 2 4; }
.chart-series { fill: none; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-point { stroke-width: 2; fill: var(--paper); vector-effect: non-scaling-stroke; }
.series-0 { stroke: var(--signal); } .series-1 { stroke: var(--ink); stroke-dasharray: 6 4; }
.chart-point.series-1 { stroke-dasharray: none; }
.trend-selected { padding: 16px 0; }
.trend-selected > p { font-size: 1rem; line-height: 1.7; }
.trend-selected dl { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 16px 0 0; }
.trend-selected dl > div { min-width: 0; }
.trend-selected dt { font-size: .875rem; line-height: 1.6; color: var(--ink-soft); }
.trend-selected dd { margin: 6px 0 0; font-family: var(--font-mono); font-size: 1.125rem; overflow-wrap: anywhere; }
.trend-selected dt::before { content: ''; display: inline-block; width: 20px; margin-right: 8px; vertical-align: middle; border-top: 3px solid var(--signal); }
.trend-selected .legend-1 dt::before { border-color: var(--ink); border-top-style: dashed; }
.trend-selected a { display: inline-flex; align-items: center; min-height: 48px; margin-top: 8px; color: var(--signal-text); text-underline-offset: 4px; }
.trend-scrubber { padding-block: 12px; border-block: 1px solid var(--line); }
.trend-scrubber label { display: block; font-size: .875rem; }
.trend-scrubber input { display: block; width: 100%; min-width: 0; min-height: 48px; margin: 0; accent-color: var(--signal); cursor: pointer; }
.trend-scrubber > div { display: flex; gap: 12px; justify-content: space-between; }
.startup-page button:disabled { color: var(--ink-soft); cursor: default; border-color: var(--line); background: transparent; }
.trend-table-wrap { max-width: 100%; overflow-x: auto; margin-block: 12px; }
.trend-table-wrap table { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.6; }
.trend-table-wrap th, .trend-table-wrap td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.trend-table-wrap td { font-family: var(--font-mono); }
.trend-table-wrap caption { margin-bottom: 12px; text-align: left; color: var(--ink-soft); }
.branch-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-block: 12px 24px; }
.branch-map > button { display: grid; gap: 12px; min-width: 0; padding: 16px; border: 0; border-bottom: 2px solid var(--line); color: var(--ink); background: var(--muted); text-align: left; cursor: pointer; }
.branch-map strong { font-size: 1rem; font-weight: 600; }
.branch-map small { font-size: .8125rem; color: var(--ink-soft); line-height: 1.5; }
.branch-map > button:hover, .branch-map > button:focus-visible { border-color: var(--signal); }
.branch-path { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.branch-path::before { content: ''; position: absolute; inset: 50% 0 auto; height: 2px; background: var(--line); }
.branch-node { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--ink-soft); color: var(--ink-soft); background: var(--card); font-family: var(--font-mono); font-size: .875rem; }
.node-done { color: var(--action-foreground); background: var(--signal); border-color: var(--signal); }
.known-effects { display: block; margin-top: 12px; font-size: .8125rem; line-height: 1.7; color: var(--ink-soft); }
.world-changed .world-pet img { animation: pet-response 650ms steps(3, end) 2; }
@keyframes pet-response { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 960px) {
  .world-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .branch-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .world-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .world-floor { padding: 16px 12px; }
  .world-pet { min-height: 116px; }
  .world-pet img { width: 80px; height: 90px; }
  .world-pet > button { min-height: 90px; }
  .world-window { width: 48px; height: 48px; top: 16px; left: 16px; }
  .world-cast { margin-top: 12px; }
  .world-person img { width: 36px; height: 40px; }
  .world-person > span { font-size: .8125rem; }
  .pulse-metrics { gap: 12px; }
  .workshop-stage { margin-left: 0; }
  .branch-map > button { padding: 12px; }
  .world-inspector { padding-bottom: 8px; }
  .history-chart svg { min-height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .world-changed .world-pet img { animation: none; }
}

.game-stage .world-receipt { margin-block: 12px 0; font-size: .8125rem; line-height: 1.7; }
.game-stage .world-hint { margin-block: 10px 0; font-size: .8125rem; line-height: 1.6; }
.game-stage .world-pet p { margin-block: 8px 0; font-size: .875rem; line-height: 1.5; }
.game-stage .metric-explanation p { margin-block: 0 8px; font-size: .875rem; line-height: 1.7; }
.trend-table-wrap:focus-visible, .trend-scrubber input:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }