.s1d {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px;
  padding: 12px; max-width: 1600px; margin: 0 auto; align-items: start;
}
.plots { display: flex; flex-direction: column; gap: 8px; min-width: 0; position: sticky; top: 56px; }
.plot-wrap { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.plot-wrap canvas { width: 100%; height: 100%; }
/* (22px shorter than before the hint under it, so that the three pictures still fit the window) */
.main-wrap { height: max(300px, calc(55vh - 62px)); }
.s1d .hint { margin: -2px 0 -2px 4px; }
.mom-wrap { height: max(120px, 17vh); }
.carpet-wrap { height: max(110px, 18vh); }
.readouts {
  display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-2); min-height: 1.5em;
  padding: 2px 4px;
}
/* Each quantity in a slot of its own, its value right-aligned in a fixed width (set from app.js):
   nothing moves as the numbers change. */
.readouts .ro { white-space: nowrap; }
.readouts b { display: inline-block; text-align: right; color: var(--ink); font-weight: 600; }

/* The name of each plot, with a key to its marks, in the corner of its frame. */
.plot-key {
  position: absolute; left: 56px; top: 15px; max-width: calc(100% - 140px); pointer-events: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 1px 6px;
  font-size: 12px; color: var(--ink-2); border-radius: 4px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}
.mom-wrap .plot-key { top: 10px; }
.carpet-wrap .plot-key { top: 6px; }
.plot-key b { color: var(--ink); font-weight: 600; }
.plot-key span { white-space: nowrap; }
.plot-key i, .plot-key .mark { display: inline-block; vertical-align: middle; margin: -2px 4px 0 0; }
.plot-key sub { line-height: 0; }
.plot-key .mark { width: 22px; height: 11px; }
.plot-key .mark path { fill: var(--ink); }
.plot-key .mark path:first-child { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.plot-key .dash { width: 16px; border-top: 2px dashed var(--accent); }
.plot-key .level { width: 14px; border-top: 1px solid var(--ink-3); }
.plot-key .cn { width: 10px; height: 4px; background: var(--accent); }
.plot-key .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); }
.plot-key .jr, .plot-key .jl { width: 12px; height: 8px; background: var(--accent); }
.plot-key .jl { background: var(--warn); }
.plot-key.dark { background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.7); }
.plot-key.dark b { color: #fff; }

.controls { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.controls .panel { display: flex; flex-direction: column; gap: 6px; }
.controls .spacer { flex: 1; }
.button-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.button-grid button { padding: 3px 4px; font-size: 13px; }
/* The initial states: a row per kind, the kind's own button first, then its named states. */
.starts { display: grid; gap: 4px; }
.start-row { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 4px; align-items: start; }
.start-row .names { display: flex; flex-wrap: wrap; gap: 4px; }
.starts button { font-size: 13px; padding: 3px 8px; }
.starts button.kind { background: var(--panel-2); color: var(--ink-2); text-align: left; }
.starts button.kind[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); }
.state-box { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
.s1d .expr input[readonly] { background: var(--panel-2); color: var(--ink-2); }
#shows button { font-size: 13px; padding: 3px 8px; }
details.panel summary { cursor: pointer; }
details.panel[open] summary { margin-bottom: 6px; }
.note { font-size: 12px; color: var(--ink-3); }
.err { font-size: 12px; color: var(--warn); }
.note.warn { color: var(--warn); }

.wheel-figure { display: flex; gap: 12px; align-items: center; }
.wheel-figure canvas { width: 100px; height: 100px; border-radius: 50%; flex: 0 0 auto; }

@media (max-width: 960px) {
  .s1d { grid-template-columns: minmax(0, 1fr); }
  .plots { position: static; }
  .main-wrap { height: 52vh; }
}