/* /intraday page styles — tokens only, both themes via tokens.css.
   The ember token block (and the origin chrome) live in assets/energy.css.
   No DSL editor: a single stacked column, but (Route B, 2026-07-17) at the
   panel's true measured width — full 1760px band, not the old 1020px pin. */
/* the ember token block lives once, in assets/energy.css (linked before this) */

.wrap{max-width:var(--w-band);margin:0 auto;display:flex;flex-direction:column;gap:20px;padding:0 24px}
.card{background:var(--card);border:1px solid var(--border);border-radius:0;box-shadow:var(--shadow);padding:20px}
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 18px;margin-top:12px}
/* min-width:0 overrides the flex/grid automatic-minimum-size default (content
   intrinsic width) — without it a longer label ("Storage fleet") + wider output
   ("0.0") refuses to shrink and visually bleeds into the next grid cell */
.controls label{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);min-width:0}
.controls input[type=range]{flex:1;min-width:0;min-height:44px}
/* ember accent on every slider (thumb + filled track) — intraday alone shipped
   browser-default blue thumbs on the ember origin. accent-color only, not the
   frequency/merit-order appearance:none custom-thumb block: that pattern draws
   a 6px-tall input box, which would fight the 44px min-height tap targets here. */
input[type=range]{accent-color:var(--accent)}
input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.controls output{font-variant-numeric:tabular-nums;color:var(--ink);min-width:2ch;text-align:right}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .chip.on{border-color:var(--accent);color:var(--accent-ink)}
.dayrow{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.dayrow #scrub{flex:1;min-width:160px;min-height:44px}
#clock{font-variant-numeric:tabular-nums;color:var(--muted);min-width:52px}
#stackwrap,#pricewrap{overflow-x:auto}
#stackwrap svg,#pricewrap svg{display:block;min-width:640px;max-width:100%;height:auto}
/* app.js flips .narrow on when it renders at the container's true (sub-520) width
   instead of the 900 canonical — drop the pan floor so it fits instead of scrolling,
   mirroring merit-order/cycles/risk's .mo-narrow / narrow-bucket convention. */
#stackwrap.narrow svg,#pricewrap.narrow svg{min-width:0}
/* inverted-range flag under the sliders — the sibling controls cards' warning
   affordance (cycles/risk's #warns), same class/colour/size; empty = invisible */
/* band-tap callout — mirrors merit-order's .mo-callout visual language (its
   stylesheet is page-scoped, not importable as a module); tokens only. Read-only
   here (name · capacity · bid), so no stepper/btn rows. */
.mo-callout{position:fixed;z-index:20;background:var(--card);border:1px solid var(--border);
  border-radius:0;box-shadow:var(--shadow);padding:14px 16px;min-width:200px;max-width:280px;
  font-size:13.5px}
.mo-callout-name{font-weight:700;margin-bottom:6px}
.mo-callout-math{color:var(--muted);font-size:12.5px;line-height:1.45}
/* reduced-motion: keep Play operable (do NOT hide it — a11y); app.js drops the
   draw-as-you-play reveal so the cursor steps over the full curve instead. */

/* Phone edge system — "16px prose / 10px surface" (Camp A, assets/workspace.css):
   the base .wrap carries a 24px band gutter matching the workspace siblings; ≤640
   drops to 16px, which the full-bleed cards below cancel (side borders + radius
   dropped, hairlines kept) so content still reads flush as a native sheet. */
@media (max-width:640px){
  .wrap{padding-inline:16px}
  .card{margin-inline:-16px;border-inline:none;border-radius:0;padding-inline:12px}
}