/* polygrid: page layout. Shared pieces come from components.css and site.css. */

.pg-group { display: flex; align-items: center; gap: var(--space-8); }
.pg-group--rule { padding-left: var(--space-12); border-left: var(--stroke-hair) solid var(--ink); position: relative; }
.pg-group--switch { gap: var(--space-10); padding: 0 var(--space-12); border-left: var(--stroke-hair) solid var(--ink); border-right: var(--stroke-hair) solid var(--ink); }
.pg-switch-label { font: 600 13px/1 var(--font-sans); }
.pr-switch:disabled { opacity: 0.4; cursor: not-allowed; }
.pg-switch-label.is-disabled { color: var(--off); }
.pg-select { height: var(--size-control); }
.pg-master { width: 88px; }

/* Preset menu */
.pg-preset-btn { min-width: 232px; justify-content: space-between; padding: 0 var(--space-8) 0 10px; }
.pg-menu { left: 74px; top: 44px; width: 340px; max-height: min(560px, 70vh); overflow-y: auto; }
.pg-menu__group { display: flex; flex-direction: column; }
.pg-menu__title { padding: 10px var(--space-12) var(--space-8); border-bottom: var(--stroke-hair) solid var(--ink); }
.pg-menu__note { padding: var(--space-8) var(--space-12); font: 400 11px/1.4 var(--font-mono); color: var(--muted); border-bottom: var(--stroke-hair) solid var(--divider); }
.pg-menu .pr-menu-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px var(--space-6); align-items: center; padding-left: var(--space-8); }
.pg-menu .pr-menu-item .pr-icon { grid-row: span 2; font-size: 18px; }
.pg-menu .pr-menu-item[aria-checked="false"] .pr-icon { visibility: hidden; }
.pg-menu__name { font: 600 13px/1.2 var(--font-sans); }
.pg-menu__foot { padding: 10px var(--space-12) 10px 36px; font: 400 11px/1.4 var(--font-mono); color: var(--muted); }
.pr-menu-item:focus-visible { outline-offset: -3px; }

/* Layout F (Oct 21): a ratio headline, then the rows and the speed slider on one gray stage,
   then the grid figure and its story. The page runs edge to edge. */
.pg-wrap { --pg-head: 296px; }

/* Headline: ratio, what it sounds like, the grid it makes. */
.pg-headline { padding: 18px var(--space-20) var(--space-16); border-bottom: var(--stroke-rule) solid var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8) var(--space-20); }
.pg-headline p { margin: 0; }
.pg-ratio { font: 600 36px/1 var(--font-mono); }
.pg-sounds { font: 600 16px/1.2 var(--font-sans); }
.pg-gridline { font: 400 13px/1.2 var(--font-mono); color: var(--muted); }

/* Rows */
.pg-rows { background: var(--panel); padding: var(--space-20); display: grid; grid-template-columns: var(--pg-head) minmax(0, 1fr); gap: var(--space-12); }
.pg-headers, .pg-strips { display: flex; flex-direction: column; gap: var(--space-12); }
.pg-rowhead {
  height: 72px; box-sizing: border-box; border: var(--stroke-hair) solid var(--ink); background: var(--paper); padding: var(--space-6) var(--space-8);
  display: flex; flex-direction: column; justify-content: space-between;
}
/* One line: name, tick, mute, beats. Labels never wrap. */
.pg-rowhead__top { display: flex; align-items: center; gap: var(--space-4); }
.pg-rowhead__name { margin: 0; flex-shrink: 0; white-space: nowrap; font: 700 13px/1.2 var(--font-sans); }
.pg-rowhead__tick { margin-left: var(--space-4); flex-shrink: 0; white-space: nowrap; font: 400 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.pg-rowhead__top .pg-mute { margin-left: auto; margin-right: var(--space-6); }
.pg-dense { color: var(--ink); background: var(--paper); }
.pg-dense[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pg-dense:disabled { opacity: 0.4; cursor: not-allowed; }
.pg-beats-input { width: 40px; height: var(--size-dense); text-align: center; padding: 0 var(--space-4); font-weight: 600; -moz-appearance: textfield; appearance: textfield; }
.pg-beats-input::-webkit-inner-spin-button, .pg-beats-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pg-rowhead__vol { display: grid; grid-template-columns: auto minmax(0, 1fr) 56px; align-items: center; gap: var(--space-6); font: 500 10px/1 var(--font-mono); text-transform: uppercase; white-space: nowrap; }
.pg-rowhead__vol .pr-range { width: 100%; }
.pg-rowhead__db { font: 500 11px/1 var(--font-mono); text-align: right; text-transform: none; }

.pg-stage { position: relative; min-width: 0; }
.pg-lines {
  position: absolute; top: -6px; bottom: -6px; left: 0; right: 0; pointer-events: none;
  display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); border-right: var(--stroke-hair) solid var(--divider);
}
.pg-lines > span { border-left: var(--stroke-hair) solid var(--divider); }
.pg-sweep { position: absolute; inset: -6px 0; pointer-events: none; overflow: hidden; }
.pg-sweep__line { position: absolute; inset: 0; will-change: transform; } /* fills the stage, so the script moves it in % */
.pg-sweep__line::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--ink); }

.pg-strip { position: relative; height: 72px; --fill: var(--paper); --fill-ink: var(--ink); }
.pg-cells { display: grid; grid-template-columns: repeat(var(--beats, 1), minmax(0, 1fr)); height: 64px; }
.pg-cell { padding: 0 2px; min-width: 0; }
.pg-cell > span {
  display: block; height: 64px; box-sizing: border-box; border: var(--stroke-hair) solid var(--ink); background: var(--fill); color: var(--fill-ink);
  padding: var(--space-6); font: 500 11px/1 var(--font-mono); overflow: hidden;
}
.pg-strip.is-muted .pg-cell > span, .pg-strip.is-muted .pg-band { border-style: dashed; }
.pg-under { height: var(--size-playhead); margin-top: var(--space-4); position: relative; }
.pg-under__bar {
  position: absolute; top: 0; left: 0; height: 100%; width: calc(100% / var(--beats, 1));
  padding: 0 2px; box-sizing: border-box; will-change: transform; transform: translateX(calc(var(--i, 0) * 100%));
}
.pg-under__bar::after { content: ""; display: block; height: 100%; background: var(--ink); }
.pg-band {
  height: 64px; margin: 0 2px; box-sizing: border-box; border: var(--stroke-hair) solid var(--ink); background: var(--fill); color: var(--fill-ink);
  padding: var(--space-8) 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-12);
  font: 600 11px/1 var(--font-mono); white-space: nowrap; overflow: hidden;
}
.pg-band__note { font-size: 20px; }
.pg-off {
  height: 72px; margin: 0 2px; box-sizing: border-box; border: var(--stroke-hair) dashed var(--off); background: var(--paper);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 var(--space-8);
  font: 400 12px/1.3 var(--font-mono); color: var(--muted);
}
.pg-strip:not([data-mode="cells"]) :is(.pg-cells, .pg-under),
.pg-strip:not([data-mode="band"]) .pg-band,
.pg-strip:not([data-mode="off"]) .pg-off { display: none; }

/* Rhythm <-> Tone: on the same gray as the rows, centered, with room above and below. */
.pg-speed { background: var(--panel); border-top: var(--stroke-hair) solid var(--divider); border-bottom: var(--stroke-rule) solid var(--ink); padding: 28px var(--space-20) 52px; display: flex; justify-content: center; }
.pg-speed__inner { width: 100%; max-width: 900px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-16); }
.pg-speed__label { font: 600 22px/1 var(--font-mono); }
.pg-speed__grid { align-self: stretch; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-16); align-items: center; }
.pg-speed__end { font: 600 13px/1 var(--font-sans); }
.pg-big { width: 100%; height: var(--size-target); --range-ground: var(--panel); }
.pg-big::-webkit-slider-runnable-track { height: 10px; }
.pg-big::-webkit-slider-thumb { width: 20px; height: 32px; margin-top: -12px; }
.pg-big::-moz-range-track { height: 10px; }
.pg-big::-moz-range-progress { height: 10px; }
.pg-big::-moz-range-thumb { width: 20px; height: 32px; }
.pg-scale { position: relative; height: 42px; margin: 0 10px; }
.pg-scale__rule { position: absolute; top: 22px; left: 0; right: 0; border-top: var(--stroke-hair) solid var(--ink); }
.pg-tick { position: absolute; top: 22px; left: var(--p); height: 6px; border-left: var(--stroke-hair) solid var(--ink); }
.pg-tick__label { position: absolute; top: 32px; left: var(--p); transform: translateX(-50%); font: 500 11px/1 var(--font-mono); white-space: nowrap; }
.pg-tick__label[data-edge="start"] { transform: none; }
.pg-tick__label[data-edge="end"] { transform: translateX(-100%); }
.pg-fuse, .pg-fuse-key {
  width: 18px; height: 18px; box-sizing: border-box; border: var(--stroke-hair) solid var(--ink); background: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; font: 600 10px/1 var(--font-mono);
}
.pg-fuse { position: absolute; top: 0; left: var(--p); margin-left: -9px; }
.pg-fuse-key { width: 14px; height: 14px; font-size: 9px; flex-shrink: 0; }
.pg-speed__note { margin: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-8); text-align: center; font: 400 11px/1.3 var(--font-mono); color: var(--muted); }

/* The grid: a colorless page of the current rows, the shared grid faint behind, and its story. */
.pg-callout { padding: var(--space-36) var(--space-20) var(--space-24); display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-20) 40px; min-width: 0; }
.pg-page-fig { margin: 0; flex: 0 1 600px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.pg-page { position: relative; width: 100%; aspect-ratio: 600 / 340; box-sizing: border-box; border: var(--stroke-hair) solid var(--ink); background: var(--paper); padding: 18px; }
.pg-page__lines {
  position: absolute; inset: 18px; pointer-events: none;
  display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); border-right: var(--stroke-hair) solid #e2e2e2;
}
.pg-page__lines > span { border-left: var(--stroke-hair) solid #e2e2e2; }
.pg-page__rows { position: relative; height: 100%; display: flex; flex-direction: column; gap: 10px; }
.pg-page__row { flex: 1 1 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.pg-page__row > span { padding: 0 2px; box-sizing: border-box; min-width: 0; }
.pg-page__row > span::after { content: ""; display: block; height: 100%; box-sizing: border-box; border: var(--stroke-hair) solid var(--ink); background: var(--paper); }
.pg-page__row.is-muted > span::after { border-style: dashed; }
.pg-rowname__n { font-weight: 700; }
.pg-rowname__n, .pg-sheet__mute { display: none; }
.pg-page-fig figcaption { font: 400 11px/1.3 var(--font-mono); color: var(--muted); }
.pg-callout__text { flex: 1 1 300px; max-width: 460px; display: flex; flex-direction: column; gap: var(--space-10); }
.pg-callout__text p { margin: 0; font-size: 14px; line-height: 1.5; }
.pg-callout__link { align-self: flex-start; display: inline-block; font: 600 14px/var(--size-target) var(--font-sans); }

/* Narrow screens: the rows scroll sideways with the headers pinned. */
@media (max-width: 760px) {
  :root:not(.is-phone) .pg-rows { overflow-x: auto; grid-template-columns: var(--pg-head) minmax(420px, 1fr); }
  :root:not(.is-phone) .pg-headers { position: sticky; left: 0; z-index: 2; background: var(--panel); }
  :root:not(.is-phone) .pg-ratio { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) { .pg-sweep { display: none; } }

/* ---------- Phones (spec, Layout: Phones): rail | the headline in the top bar, then the gray stage ---------- */
.is-phone .pr-topbar__row { display: contents; }
.is-phone .pr-topbar .pg-group--rule { display: none; }
.is-phone .pg-headline { flex-wrap: nowrap; align-items: baseline; gap: var(--space-12); min-width: 0; padding: 0 0 0 var(--space-4); border: 0; overflow: hidden; }
.is-phone .pg-ratio { flex: none; font-size: 26px; white-space: nowrap; }
.is-phone .pg-sounds { flex: none; font-size: 14px; white-space: nowrap; }
.is-phone .pg-gridline { min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.is-phone #main { grid-column: 2; grid-row: 2; min-height: 0; overflow: hidden auto; background: var(--panel); }
.is-phone .pg-wrap { display: flex; flex-direction: column; min-height: 100%; }
.is-phone .pg-rows { grid-template-columns: 252px minmax(0, 1fr); gap: var(--space-10); padding: var(--space-10) var(--space-12) 0 var(--space-10); }
.is-phone :is(.pg-headers, .pg-strips) { gap: var(--space-8); }
/* Row headers on one line: the name button (Row 1 over Low tick), M, and Beats as − field +. */
.is-phone .pg-rowhead { flex-direction: row; align-items: center; height: 58px; padding: 0 var(--space-6) 0 0; }
.is-phone .pg-rowhead :is(.pg-rowhead__name, .pg-rowhead__tick, .pg-rowhead__vol) { display: none; }
.pg-rowname {
  flex: 1; min-width: 0; height: 56px; display: flex; flex-direction: column; justify-content: center; gap: var(--space-4);
  padding: 0 var(--space-6) 0 var(--space-8); border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer;
}
.pg-rowname strong { font: 700 13px/1 var(--font-sans); white-space: nowrap; }
.pg-rowname span { font: 400 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); white-space: nowrap; }
.pg-rowname:focus-visible { outline-offset: -3px; }
.is-phone .pg-rowhead__top { flex: none; gap: 0; }
.is-phone .pg-rowhead__top .pg-mute { margin: 0 var(--space-4) 0 0; }
.is-phone .pg-rowhead .pr-dense { width: 40px; min-width: 40px; height: var(--size-target); font-size: 14px; }
.is-phone .pg-rowhead .pr-dense::before { inset: 0 -2px; }
.is-phone .pg-beats-input { width: 36px; height: var(--size-target); border-left: 0; border-right: 0; font-size: 16px; } /* 16px, or iOS zooms in on focus */
.is-phone .pg-strip { height: 58px; }
.is-phone .pg-cells { height: 52px; }
.is-phone .pg-cell > span { height: 52px; padding: var(--space-4); font-size: 10px; }
.is-phone :is(.pg-band, .pg-off) { height: 52px; }
.is-phone .pg-band__note { font-size: 18px; }
.is-phone .pg-off { font-size: 11px; }
.is-phone .pg-lines { top: -4px; bottom: -4px; }
/* The speed slider fills the rest of the stage, with its end labels, centered speed, ticks and fuse markers. */
.is-phone .pg-speed { flex: 1 1 auto; align-items: center; padding: var(--space-4) var(--space-16) var(--space-6); border-top: var(--stroke-hair) solid #c4c4c4; border-bottom: 0; margin-top: var(--space-8); }
.is-phone .pg-speed__inner { gap: 0; max-width: none; }
.is-phone .pg-speed__label { font-size: 15px; }
.is-phone .pg-speed__note { display: none; }
.is-phone .pg-speed__end { font-size: 12px; }
.is-phone .pg-scale { height: 38px; }
.is-phone .pg-tick__label { font-size: 10px; }

/* Drawers: presets, the grid, a row's sheet, and the Menu's settings. */
.pr-drawer .pg-menu { position: static; width: auto; max-height: none; overflow: visible; border: 0; }
.pr-drawer .pg-menu .pr-menu-item { min-height: 52px; padding: var(--space-6) var(--space-16) var(--space-6) var(--space-10); }
.is-phone .pg-griddrawer:not([hidden]) { width: min(600px, calc(100vw - var(--size-rail) - env(safe-area-inset-left) - env(safe-area-inset-right))); }
.pr-drawer .pg-callout { flex-wrap: nowrap; gap: 18px; padding: var(--space-14) var(--space-16) var(--space-24); }
.pr-drawer .pg-page-fig { flex: 0 0 260px; }
.pr-drawer .pg-callout__text p { font-size: 13px; }
.pg-sheet__tick { margin: 0; padding: var(--space-12) var(--space-16); font: 400 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.pr-drawer .pg-rowhead__vol {
  grid-template-columns: 52px minmax(0, 1fr) 56px; gap: var(--space-8); min-height: 52px; padding: 0 var(--space-12) 0 var(--space-16);
  border-top: var(--stroke-hair) solid var(--divider); border-bottom: var(--stroke-hair) solid var(--divider); font: 500 14px/1 var(--font-sans); text-transform: none;
}
.pr-drawer .pg-rowhead__vol .pr-range { height: var(--size-target); }
.pr-drawer .pg-rowhead__db { font-size: 12px; }
.pg-msettings { display: flex; flex-direction: column; padding: var(--space-12) var(--space-16) 0 var(--space-20); }
.pg-msettings > * { min-height: 52px; }
.pg-msettings .pr-inline { justify-content: space-between; font: 500 14px/1 var(--font-sans); text-transform: none; letter-spacing: 0; }
.pg-msettings .pg-select { height: var(--size-target); font-size: 16px; }
.pg-msettings .pg-group--switch { justify-content: space-between; padding: 0; border: 0; }
.pg-msettings .pg-switch-label { font: 500 14px/1 var(--font-sans); }
.pg-msettings .pr-switch::before { content: ""; position: absolute; inset: -9px -2px; }
.pg-msettings .pg-group:not(.pg-group--switch) { gap: var(--space-12); }
.pg-msettings .pg-master { flex: 1; width: auto; }
.pr-drawer .pg-callout__text > .pr-eyebrow { display: none; }
.pg-msettings .pg-group:not(.pg-group--switch) > .pr-icon { display: none; }
.pg-msettings .pg-group:not(.pg-group--switch) > .pr-sr { position: static; width: auto; height: auto; overflow: visible; clip: auto; flex: none; font: 500 14px/1 var(--font-sans); }

/* ---------- Phones, upright (spec, Layout: Phones, Upright) ----------
   The phone is the page: the three rows stand up as columns, each cut into its beats from top to bottom, with the
   shared grid faint across them. The speed slider stands at the right as a fader, Tone at the top, Rhythm at the bottom. */
@media (orientation: portrait) {
  .is-phone .pr-app > .pr-topbar { display: grid; grid-template-columns: 34px 44px minmax(0, 1fr); column-gap: var(--space-8); align-items: center; padding-bottom: var(--space-6); min-width: 0; }
  .is-phone .pr-topbar .pr-logo { grid-area: 1 / 1; height: 56px; align-items: center; }
  .is-phone .pr-topbar #play { grid-area: 1 / 2; }
  .is-phone .pr-topbar .pr-logo { border: 0; padding: 0; }
  .is-phone .pg-headline { grid-area: 2 / 1 / 3 / -1; justify-self: start; flex-direction: row; align-items: baseline; gap: var(--space-12); padding: 0; min-height: 44px; max-width: 100%; min-width: 0; }
  .is-phone .pg-ratio { font-size: 26px; }
  .is-phone .pg-sounds { flex: 0 1 auto; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .is-phone .pg-gridline { display: none; }

  .is-phone #main { grid-column: 1; grid-row: 2; overflow: hidden; }
  .is-phone .pg-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 140px; grid-template-rows: minmax(0, 1fr) auto; height: 100%; min-height: 0; }
  .is-phone .pg-rows {
    grid-area: 1 / 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr);
    gap: 0 var(--space-8); min-height: 0; padding: var(--space-10) var(--space-4) var(--space-8) var(--space-12);
  }
  .is-phone :is(.pg-headers, .pg-stage, .pg-strips) { display: contents; }
  .is-phone .pg-headers > :nth-child(1), .is-phone .pg-strips > :nth-child(1) { grid-column: 1; }
  .is-phone .pg-headers > :nth-child(2), .is-phone .pg-strips > :nth-child(2) { grid-column: 2; }
  .is-phone .pg-headers > :nth-child(3), .is-phone .pg-strips > :nth-child(3) { grid-column: 3; }
  .is-phone .pg-headers > * { grid-row: 1; margin-bottom: var(--space-8); }
  .is-phone .pg-strips > * { grid-row: 2; }

  /* Column head: name and beat count over − and +, 44px tall each. */
  .is-phone .pg-rowhead { height: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; }
  .is-phone .pg-rowname { flex: none; height: 44px; padding: 0 var(--space-6); }
  .is-phone .pg-rowname__n { display: inline; }
  .is-phone .pg-rowhead__top { display: grid; grid-template-columns: 1fr 1fr; }
  .is-phone .pg-rowhead .pg-mute, .is-phone .pg-rowhead .pg-beats-input { display: none; }
  .is-phone .pg-rowhead .pr-dense { width: auto; min-width: 0; height: 44px; }
  .is-phone .pg-sheet__mute { display: flex; }
  .is-phone .pg-griddrawer:not([hidden]) { width: auto; }
  /* The grid drawer stacks: the figure on top at full width, then the story. */
  .is-phone .pr-drawer .pg-callout { flex-direction: column; flex-wrap: nowrap; }
  .is-phone .pr-drawer .pg-page-fig { flex: none; width: 100%; }
  .is-phone .pr-drawer .pg-callout__text { flex: none; max-width: none; }

  /* The columns: beats run top to bottom. */
  .is-phone .pg-strip { height: auto; min-height: 0; }
  .is-phone .pg-cells { height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(var(--beats, 1), minmax(0, 1fr)); }
  .is-phone .pg-cell { padding: 1px 0; }
  .is-phone .pg-cell > span { height: 100%; padding: 2px var(--space-4); }
  .is-phone :is(.pg-band, .pg-off) { height: 100%; margin: 0; }
  .is-phone .pg-band { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--space-4); white-space: normal; padding: var(--space-8); }
  .is-phone .pg-band__hz { font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
  .is-phone .pg-under { position: absolute; top: 0; bottom: 0; right: -6px; width: 4px; height: auto; margin: 0; }
  .is-phone .pg-under__bar { width: 100%; height: calc(100% / var(--beats, 1)); padding: 1px 0; transform: translateY(calc(var(--i, 0) * 100%)); }
  .is-phone .pg-lines {
    grid-area: 2 / 1 / 3 / -1; position: static; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(var(--cols, 1), minmax(0, 1fr));
    border-right: 0; border-bottom: var(--stroke-hair) solid var(--divider);
  }
  .is-phone .pg-lines > span { border-left: 0; border-top: var(--stroke-hair) solid var(--divider); }
  .is-phone .pg-sweep { grid-area: 2 / 1 / 3 / -1; position: relative; inset: auto; }
  .is-phone .pg-sweep__line::before { top: -1px; bottom: auto; left: 0; right: 0; width: auto; height: 2px; }

  /* The fader and the speed readout. */
  .is-phone :is(.pg-speed, .pg-speed__inner) { display: contents; }
  .is-phone .pg-speed__label { grid-area: 2 / 1 / 3 / -1; justify-self: center; padding: var(--space-6) 0 var(--space-12); font-size: 26px; }
  .is-phone .pg-speed__grid { grid-area: 1 / 2; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; row-gap: var(--space-6); padding: var(--space-10) 2px var(--space-8) 0; min-height: 0; }
  .is-phone .pg-speed__grid > :nth-child(1) { grid-area: 3 / 1 / 4 / 3; justify-self: start; }
  .is-phone .pg-speed__grid > :nth-child(2) { grid-area: 2 / 1; }
  .is-phone .pg-speed__grid > :nth-child(3) { grid-area: 1 / 1 / 2 / 3; justify-self: start; }
  .is-phone .pg-speed__grid > :nth-child(4), .is-phone .pg-speed__grid > :nth-child(6) { display: none; }
  .is-phone .pg-speed__grid > :nth-child(5) { grid-area: 2 / 2; }
  .is-phone .pg-big { writing-mode: vertical-lr; direction: rtl; width: 44px; height: 100%; }
  .is-phone .pg-big::-webkit-slider-runnable-track { width: 10px; height: auto; }
  .is-phone .pg-big::-webkit-slider-thumb { width: 32px; height: 20px; margin: 0 0 0 -11px; }
  .is-phone .pg-big::-moz-range-track, .is-phone .pg-big::-moz-range-progress { width: 10px; height: auto; }
  .is-phone .pg-big::-moz-range-thumb { width: 32px; height: 20px; }
  .is-phone .pg-scale { height: 100%; margin: 10px 0; }
  .is-phone .pg-scale__rule { top: 0; bottom: 0; left: 24px; right: auto; border-top: 0; border-left: var(--stroke-hair) solid var(--ink); }
  .is-phone .pg-tick { top: auto; bottom: var(--p); left: 24px; right: auto; width: 6px; height: 0; border-left: 0; border-top: var(--stroke-hair) solid var(--ink); }
  .is-phone .pg-tick__label { top: auto; bottom: var(--p); left: 32px; transform: translateY(50%); font-size: 10px; }
  .is-phone .pg-tick__label[data-edge="start"] { transform: none; }
  .is-phone .pg-tick__label[data-edge="end"] { transform: translateY(100%); }
  .is-phone .pg-fuse { top: auto; bottom: var(--p); left: 0; margin: 0 0 -9px; }
}