/* Power Hours, under the template's house system (ART.md; Template/HOUSE.md) and its pane-app register (HOUSE 11):
   one pane of sections on plates on the gray page, one face, gray chrome, no shadows, no glass. The one data color
   is --price, the staircase of the day-ahead price; the register's two meaning colors are --cheap (the day's
   cheapest quarter, a run below the mean) and --dear (the most expensive quarter, a run above it), on words alone. The one
   bold thing is the Landing's ink. Staleness and failure are words, never a hue. --price is pasted from
   tools/art/palette.py --json, never retyped; tools/check.mjs fails while the two differ. */

@font-face {
  font-family: 'Ysabeau Office';
  src: url(fonts/ysabeau-office-gw.woff2) format('woff2');
  font-weight: 400 650;
  font-display: block;
}

:root {
  --page: #e8eef0;
  --sheet: #f6f9fa;
  --ink: #0f1c23;
  --ink-2: #45555d;
  --ink-3: #5b6a72;
  --line: #c9d4d8;
  --line-strong: #74858c;
  --price: #2a67f0;
  --cheap: #1f5f99;
  --dear: #a64a1a;
  --draw: cubic-bezier(0.2, 0, 0, 1);
  --sheet-in: cubic-bezier(0.32, 0.72, 0, 1);
  --face: 'Ysabeau Office', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #141d21;
    --sheet: #1c272c;
    --ink: #e6edee;
    --ink-2: #a3b1b6;
    --ink-3: #8b9a9f;
    --line: #2a373c;
    --line-strong: #64757b;
    --price: #3674fe;
    --cheap: #8cbcf0;
    --dear: #f0a070;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--page);
  color: var(--ink);
  font: 400 13.5px/1.35 var(--face);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
h1, h2, h3, p, dl, dd { margin: 0; }
button, [role="slider"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; }

/* ── the header: the name and the stamp; no row of tabs (one pane) ── */
/* the header's sides follow the pane's 760 px column, so on a wide screen the name starts where the plates do */
.head { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); padding: calc(6px + env(safe-area-inset-top)) calc(max(16px, 50% - 364px) + env(safe-area-inset-right)) 0 calc(max(16px, 50% - 364px) + env(safe-area-inset-left)); }
.head h1 { font-size: 15px; font-weight: 650; line-height: 22px; }
.stamp-home { min-width: 0; padding-bottom: 6px; }
.stamp { position: relative; display: block; max-width: 100%; font-size: 11.5px; line-height: 16px; color: var(--ink-2); }
.stamp .lead { color: var(--ink); }
/* the hit runs up over the name (not a control) and down into the gap: 22 + 16 + 6 = 44 px */
.stamp::before { content: ''; position: absolute; inset: -22px 0 -6px; }

/* ── the pane: it scrolls inside the frame, so the header stays put; a 760 px column centered with the header; with
   no band under it, it pads the home indicator itself (HOUSE 4.14, 11.1 rule 1) ── */
.pane { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.panebody { max-width: 760px; margin: 0 auto; padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left)); padding-top: 4px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }

.title { padding-top: 10px; }
.title h2 { font-size: 15px; font-weight: 650; }
.title p { font-size: 11.5px; line-height: 16px; color: var(--ink-2); }

/* sections on plates (HOUSE 11.1 rule 4): --sheet, a 1 px --line edge, 12 px apart */
.sec { margin-top: 12px; padding: 12px 12px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); }
.sec > h2 { font-size: 15px; font-weight: 650; padding-bottom: 2px; }
.note { font-size: 11.5px; line-height: 16px; color: var(--ink-2); max-width: 62ch; }

/* Now: the pane's key number (HOUSE 11.1 rule 2), the current interval's price at 34 px, its interval above and its
   rank under it, all three in div.hl as in Finances (so .sec > h2 does not reach the label, which stays 12.5 px / 400);
   the day's cheapest and most expensive quarters in their meaning colors, on their words */
.headline { padding: 14px 12px 12px; }
.hl { display: grid; gap: 2px; }
.hl-what { font-size: 12.5px; font-weight: inherit; color: var(--ink-2); }
.fig b { font-size: 34px; line-height: 1.05; font-weight: 650; }
.fig .u { font-size: 15px; color: var(--ink-2); }
.now .lead { font-size: 13.5px; color: var(--ink-2); }
.cheap { color: var(--cheap); }
.dear { color: var(--dear); }
/* the scale's label and the key under the Landing (HOUSE 4.15, 11.1 rule 6) */
.scale { margin-top: 2px; }
.key { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; font-size: 11.5px; line-height: 15px; color: var(--ink-2); }
.key .sw { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }
.sw-run { height: 3px !important; vertical-align: 2px !important; background: var(--ink); }
/* the private-use line at the pane's head (HOUSE 4.15 exception 2), in ink */
.statement.private-use { color: var(--ink); }
/* the key at the end of the pane (HOUSE 11.1 rule 1) */
.aboutlink { display: block; margin: 14px 0 0; min-height: 44px; font-size: 12.5px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.aboutlink:active { color: var(--ink); }

/* ── the Landing: the price's blue staircase on the page, the chosen run's ink level laid into it. The drawing
   is the slider named Time; a vertical swipe on it scrolls the pane and a pinch zooms the page (app.js) ── */
.stw { padding-top: 0; }
.stair { position: relative; width: fit-content; max-width: 100%; margin: 4px 0 2px; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.stair svg { display: block; overflow: visible; font-size: 10.5px; }
.stair:focus-visible { outline-offset: 4px; }
.stair text { font-size: 10.5px; fill: var(--ink-2); }
.stair .run { fill: var(--ink); }
.stair .nowl { fill: var(--ink-3); }
.stair .halo { paint-order: stroke; stroke: var(--sheet); stroke-width: 3px; stroke-linejoin: round; }
.stair .grid, .stair .hair { fill: var(--line); }
.stair .zero, .stair .base { fill: var(--line-strong); }
.stair .st { fill: none; stroke: var(--price); stroke-width: 1.5px; }
.stair .past { opacity: 0.4; }
.stair .neg { fill: var(--price); fill-opacity: 0.16; }
.stair .mean { stroke: var(--ink-3); stroke-width: 1px; stroke-dasharray: 3 3; }
.stair .lvl, .stair .post, .stair .brk, .stair .head rect, .stair .head circle { fill: var(--ink); }
/* the landing's rects on whole device pixels: no edge row of ink blended into the blue tread beneath it */
.stair .lvl, .stair .post, .stair .brk { shape-rendering: crispEdges; }
.stair .head .ring { fill: var(--sheet); }
.stair .mt, .stair .now { fill: var(--ink-2); }
.stair .ht { fill: var(--ink-3); opacity: 0.5; }
.stair .col { fill: var(--ink); fill-opacity: 0.07; }

/* the readout: two fixed lines under the drawing, always the chosen interval, updated in place; app.js holds the
   block at the tallest it gets for any interval at this width, so nothing under it moves while scrubbing */
.ro { padding-bottom: 10px; }
.ro-when { font-size: 12.5px; line-height: 17px; font-weight: 620; }
.ro-vals { font-size: 11.5px; line-height: 16px; color: var(--ink-2); }

/* the runs: one pressed button per appliance, rows on their plate parted by hairlines; the pressed one's name at 620
   with a 2 px ink rule in the gutter, the landing's level turned on its side */
.runs { margin-top: 6px; }
.runs button:first-child { border-top: 0; }
.runs button { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; width: 100%; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--line); }
.runs .nm { font-weight: 560; }
.runs .tm { font-size: 15px; font-weight: 600; text-align: right; white-space: nowrap; }
.runs .sub { grid-column: 1 / -1; font-size: 11.5px; line-height: 16px; color: var(--ink-2); }
.runs [aria-pressed="true"] .nm { font-weight: 620; }
.runs [aria-pressed="true"]::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 2px; background: var(--ink); }

/* statements: sentences on the page, the first words at 620, never a box or a colored edge */
.statement { padding: 8px 0 2px; line-height: 1.4; max-width: 62ch; }
.statement b { font-weight: 620; }

/* text keys: a 28 px frame on a 44 px hit */
.textkey { position: relative; height: 44px; padding: 0 10px; font-size: 12.5px; }
.textkey::before { content: ''; position: absolute; inset: 8px 0; border: 1px solid var(--line-strong); border-radius: 6px; }
.textkey:active::before { background: color-mix(in srgb, currentColor 22%, transparent); }

/* a problem with the prices is a sentence on a plate, never a blank pane */
.notice { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 5; width: max-content; max-width: min(300px, calc(100% - 32px)); padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--sheet); line-height: 1.4; text-align: center; }
.notice.kept { position: fixed; }
.notice p + p { margin-top: 6px; }
.notice-lines { font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; text-align: left; }

/* ── About: a full-height sheet ── */
.about { position: fixed; inset: 0; z-index: 20; }
.about-sheet { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--sheet); animation: sheet-in 220ms var(--sheet-in); }
@keyframes sheet-in { from { transform: translateY(100%); } }
.about-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: env(safe-area-inset-top) calc(8px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left)); border-bottom: 1px solid var(--line); }
.about-head h2 { font-size: 15px; font-weight: 650; }
.about .textkey::before { border: 0; }
.about-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
.about-body section { max-width: 62ch; padding: 12px 0; border-bottom: 1px solid var(--line); }
.about-body h3 { margin-bottom: 6px; font-size: 13.5px; font-weight: 650; }
.about-body p { line-height: 1.5; }
.about-body p + p { margin-top: 8px; }
.about-body dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; line-height: 1.45; }
.about-body dt { color: var(--ink-2); }
.about-body dd { overflow-wrap: anywhere; }
.about-foot { margin-top: 8px; }

@media (hover: hover) {
  .stamp:hover, .aboutlink:hover { color: var(--ink); }
  .runs button:hover .nm { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
  .textkey:hover::before { background: color-mix(in srgb, currentColor 7%, transparent); }
}
/* a phone on its side: the header is one 46 px row block, the plot 96 px tall (app.js) */
@media (orientation: landscape) and (max-height: 500px) {
  .head { grid-template-rows: 22px 24px; padding-top: env(safe-area-inset-top); }
  .stamp-home { padding-bottom: 0; }
  .stamp { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
}