/* Layout for the two additional oscillator examples; typography comes from aba.css. */
* { box-sizing: border-box; }
h3 { margin: 20px 0 8px; font-size: 1.05rem; }
section { margin-bottom: 36px; }
.example-home { margin-left: 0; margin-right: 0; }
header .example-home { border: 0; }
.small, .trace-line { color: #526f79; font-size: .88rem; }
.species-grid, .chart-grid, .state-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.species-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.species-grid img { width: 100%; height: 140px; object-fit: contain; }
.macrocycle-molecule { text-align: center; }
.macrocycle-molecule img { max-height: 280px; }
.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 30px; }
.control-group { min-width: 0; }
.hierarchy-control { grid-column: 1 / -1; }
.control-group label { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
.control-group input[type=range] { grid-column: 1 / -1; width: 100%; }
output { color: #076f79; font-variant-numeric: tabular-nums; }
.initial-composition { font-size: .85rem; }
.compare-control { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
button { font: inherit; color: inherit; padding: 6px 12px; border: 1px solid #cbdce1; border-radius: 4px; background: #fff; cursor: pointer; }
button[aria-pressed=true] { background: #eaf5f4; border-color: #087e82; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid #087e82; outline-offset: 2px; }
.regime-line { display: flex; flex-wrap: wrap; gap: 12px; font-size: .88rem; color: #526f79; }
.regime-badge { font-weight: 600; }
.chart-grid { margin: 18px 0; }
.chart-grid figure { min-width: 0; }
.chart-grid h3 { margin: 0 0 8px; }
canvas { display: block; width: 100%; height: 245px; background: #fff; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { display: inline-block; width: 18px; border-top: 2px solid #236a9d; }
.legend .y i { border-color: #bd5a35; }
.legend .q0 i { border-color: #2f6fa3; }
.legend .q1 i { border-color: #d66c2e; }
.legend .q2 i { border-color: #75559b; }
.legend .comparison i { border-color: #738993; border-top-style: dashed; }
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.metric span, .metric strong { display: block; font-size: .88rem; }
.equation-block { margin: 16px 0; padding: 12px; background: #eef5f6; font: .88rem/1.6 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.notice { padding: 12px; background: #eef5f6; }
.notice.warn { border-left: 3px solid #bd5a35; }
.discovery-toolbar, .space-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px; margin: 16px 0; background: #eef5f6; }
.discovery-toolbar label, .space-controls label { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.discovery-toolbar input[type=range], .space-controls input[type=range] { width: 240px; }
.space-controls p { margin: 0; }
.observable-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; padding: 16px 0; border-bottom: 1px solid #dae4e7; }
.observable-row > * { min-width: 0; overflow-wrap: anywhere; }
.observable-row h3 { margin: 0 0 6px; }
.observable-row p { margin: 8px 0; }
.observable-witness img { width: 100%; height: 160px; object-fit: contain; }
.observable-row details img { display: block; max-height: 300px; margin: 12px 0; }
.observable-row details { margin: 10px 0; }
.pattern-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pattern-component { display: flex; align-items: center; gap: 6px; }
.pattern-component img { width: 72px; height: 72px; object-fit: contain; }
.pattern-empty { font-size: 2rem; }
.js-ready .fallback-only { display: none; }
.kind { font-size: .85rem; color: #526f79; }
.space-network { overflow: auto; max-height: 520px; background: #fff; border: 1px solid #cbdce1; }
.space-network svg { max-width: none; }
.state-grid article { min-width: 0; }
.state-grid img { width: 100%; height: 140px; object-fit: contain; }
.state-source { max-width: 540px; margin: 0 auto; }
.state-successor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.state-edge { padding: 16px 0; text-align: center; font-size: .85rem; }
.state-edge > span, .state-edge b, .state-edge small { display: block; }
.state-edge > span { color: #076f79; font-size: 1.5rem; }
.state-card { min-width: 0; padding: 12px; background: #fff; border: 1px solid #cbdce1; }
.state-card h3 { margin: 0; }
.coordinate-line { font-size: .88rem; }
.state-inventory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.state-molecule { min-width: 0; position: relative; }
.state-molecule img { width: 100%; height: 65px; object-fit: contain; }
.state-molecule b { position: absolute; top: 0; right: 0; color: #076f79; font-size: .85rem; }
.state-molecule small { display: block; font-size: .7rem; text-align: center; }
.state-molecule.zero { opacity: .4; }
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; }
.table-wrap code { white-space: normal; }
.figure-full img { width: 100%; }
@media (min-width: 900px) {
  main section[id], main [id] { scroll-margin-top: 110px; }
}
@media (max-width: 650px) {
  .controls, .chart-grid, .state-grid, .state-successor-grid { grid-template-columns: 1fr; }
  .species-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .observable-row { grid-template-columns: 1fr; }
  .observable-witness img { max-width: 280px; }
}
@media print {
  .example-sections, .controls, .preset-row, .discovery-toolbar, .space-controls { display: none !important; }
  figure, .observable-row { break-inside: avoid; }
}