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

.pt-group { display: flex; align-items: center; gap: var(--space-8); }
.pt-master { width: 88px; }
.pt-loop { min-width: 0; flex: 1 1 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.pt-menuwrap { position: relative; display: inline-flex; }
.pt-zoom { display: flex; align-items: center; gap: var(--space-6); }
.pt-zoom__range { width: 96px; }
.pr-scene[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.pr-scene.is-empty:not([aria-selected="true"]) { border-style: dashed; border-color: var(--off); color: var(--off); }
.pr-scene.is-drop { outline: var(--stroke-focus) solid var(--ink); outline-offset: 2px; }
.pr-menu-item:disabled { color: var(--off); cursor: default; }
.pr-menu { top: 40px; }

/* ---------- Body: instruments | stage ---------- */
/* The app fills the window; the instrument list and the stage scroll on their own. */
body[data-app="polytoggle"] { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.pt-sidebar__full { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Info: fixed height at the foot of the instruments column; its rule lines up with the panel's. */
.pt-info { margin-top: auto; flex: 0 0 var(--dock-h, 106px); height: var(--dock-h, 106px); box-sizing: border-box; min-height: 0; padding: var(--space-10) var(--space-16) var(--space-12); gap: var(--space-6); overflow-y: auto; }
.pt-info__head { display: flex; align-items: center; gap: var(--space-8); min-height: 20px; }
.pt-info__head .pr-eyebrow { margin: 0; }
.pt-info .pr-info__title { font-size: 14px; }

.pt-body { flex: 1; display: flex; min-height: 0; }
.pt-sidebar { flex-shrink: 0; min-height: 0; }
.pt-sidebar.is-collapsed { width: var(--size-rail); }
.pt-sidebar.is-collapsed .pt-sidebar__full, .pt-sidebar.is-collapsed .pr-info { display: none; }
.pt-instruments { display: flex; flex-direction: column; gap: var(--space-14); }
.pt-instruments .pr-inst .pr-swatch { flex-shrink: 0; }
.pt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pt-stage { flex: 1; overflow: auto; padding: 0; position: relative; }
.pt-stage.is-drop { outline: var(--stroke-focus) dashed var(--ink); outline-offset: -6px; }
.pt-empty-stage { margin: var(--space-48) var(--space-24); color: var(--muted); font: 400 14px/1.5 var(--font-sans); }

/* ---------- Lanes ---------- */
.pt-lanes { --zoom: 1; display: flex; flex-direction: column; gap: 0; width: calc(100% * var(--zoom)); }
.pt-lane { display: flex; align-items: stretch; }
.pt-lane > .pr-lane { position: sticky; left: 0; z-index: 2; flex-shrink: 0; border: 0; border-right: var(--stroke-rule) solid var(--ink); border-bottom: var(--stroke-hair) solid var(--ink); }
.pt-track { position: relative; flex: 1 0 auto; box-sizing: border-box; min-width: 0; padding: var(--space-10) var(--space-12) var(--space-6); }
.pt-cells { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: var(--space-4); }
.pt-playhead { position: relative; height: var(--size-playhead); margin-top: var(--space-4); overflow: hidden; }
.pt-playhead__bar { position: absolute; left: 0; top: 0; height: 100%; width: calc(100% / var(--cols, 1)); background: var(--ink); will-change: transform; }
.pt-playhead__bar[hidden] { display: none; }

.pt-cell {
  grid-column: span var(--span, 1); height: var(--size-cell); min-width: 0; position: relative;
  border: var(--stroke-hair) solid var(--ink); background: var(--paper); cursor: pointer;
  font: 500 11px/1 var(--font-mono); color: var(--muted);
}
.pt-cell:hover { background: var(--panel); }
.pt-cell .pt-num { position: absolute; left: 3px; top: 3px; pointer-events: none; }
.pt-cell--ghost { border: var(--stroke-hair) dashed var(--ghost-line); background: transparent; cursor: default; pointer-events: none; }
.pt-cell--ghost:hover { background: transparent; }
.pr-note { user-select: none; touch-action: none; }
.pr-note .pt-num { position: absolute; left: 3px; top: 3px; opacity: 0.8; pointer-events: none; }
.pr-note[aria-selected="true"] { outline: var(--stroke-focus) solid var(--ink); outline-offset: 2px; box-shadow: var(--focus-halo); }
.pr-note.is-dragging { opacity: 0.45; }
.pr-note__grab { touch-action: none; }
.pt-cell:focus-visible, .pr-note:focus-visible { outline: var(--stroke-focus) solid var(--ink); outline-offset: 2px; box-shadow: var(--focus-halo); z-index: 1; }
.pt-cell.is-target { outline: var(--stroke-focus) solid var(--ink); outline-offset: -3px; background: var(--panel); }
@media (pointer: coarse) { .pt-cell, .pr-note { min-width: var(--size-target); } }

/* ---------- Panel (C2): one grid, fixed tracks, so nothing moves when values change ---------- */
.pt-dock { flex: none; }
.pt-panel[hidden], .pt-panelbar[hidden] { display: none; }
.pt-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px; height: 106px; box-sizing: border-box; border-top: var(--stroke-rule) solid var(--ink); }
.pt-sec { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-10) var(--space-16) var(--space-12); min-width: 0; box-sizing: border-box; }
.pt-sec--lane { background: var(--panel); border-right: var(--stroke-rule) solid var(--ink); }
.pt-sec--note { background: var(--paper); }
.pt-sec__head { display: flex; align-items: center; gap: var(--space-10); height: 20px; min-width: 0; }
.pt-sec__head .pr-eyebrow { margin: 0; flex: none; }
.pt-sec__head .pr-swatch { width: 14px; height: 14px; flex: none; }
.pt-sec__title { margin: 0; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px/1.2 var(--font-sans); }
.pt-sec__title.is-empty { font-weight: 500; color: var(--muted); }
.pt-readout { margin-left: auto; flex: none; font: 400 12px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); white-space: pre; }
.pt-textbtn { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: var(--space-4); min-height: 24px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: 500 12px/1 var(--font-sans); }
.pt-textbtn:hover { text-decoration: underline; }
.pt-textbtn .pr-icon { font-size: 16px; }
.pt-textbtn:focus-visible, .pt-collapse:focus-visible, .pt-panelbar__label:focus-visible { outline: var(--stroke-focus) solid var(--ink); outline-offset: -3px; box-shadow: var(--focus-halo); }

.pt-cells6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding-left: 1px; }
.pt-param { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 54px; box-sizing: border-box; min-width: 0; padding: 7px 8px 9px; margin-left: -1px; border: var(--stroke-hair) solid var(--ink); background: var(--paper); color: var(--ink); cursor: ns-resize; overflow: hidden; touch-action: none; }
.pt-param:focus-within { outline: var(--stroke-focus) solid var(--ink); outline-offset: 0; box-shadow: var(--focus-halo); z-index: 1; }
.pt-param__label { font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
.pt-param__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); min-width: 0; }
.pt-param__input { flex: 1 1 auto; min-width: 0; width: 100%; height: 20px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); outline: none; font: 500 15px/20px var(--font-mono); font-variant-numeric: tabular-nums; cursor: text; -moz-appearance: textfield; appearance: textfield; }
.pt-param__input::-webkit-inner-spin-button, .pt-param__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pt-param__unit { flex: none; font: 400 11px/1 var(--font-mono); color: #555; white-space: nowrap; }
.pt-param__unit:empty { display: none; }
.pt-param__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--ink); pointer-events: none; }
.pt-param__select { cursor: pointer; padding-right: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") right center / 10px 6px no-repeat; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.pt-param--env { cursor: default; }
.pt-env { display: block; width: 100%; height: 22px; }
.pt-env polyline { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pt-param.is-scrubbing { cursor: ns-resize; background: var(--panel); }
.pt-param.is-scrubbing .pt-param__input { cursor: ns-resize; }

/* The collapse strip: same size and place open and collapsed */
.pt-collapse { display: flex; align-items: flex-end; justify-content: center; width: 56px; height: 100%; padding: 0 0 var(--space-10); border: 0; border-left: var(--stroke-rule) solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; box-sizing: border-box; }
.pt-collapse:hover { background: var(--panel); }
.pt-collapse .pr-icon { font-size: var(--size-chevron); }
.pt-panelbar { display: grid; grid-template-columns: minmax(0, 1fr) 56px; height: 40px; box-sizing: border-box; border-top: var(--stroke-rule) solid var(--ink); }
.pt-panelbar__label { padding: 0 var(--space-16); border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.pt-lane > .pr-lane { background: var(--panel); }

/* ---------- Dialog ---------- */
.pt-dialog { border: var(--stroke-rule) solid var(--ink); padding: var(--space-20); max-width: 28rem; background: var(--paper); color: var(--ink); }
.pt-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.pt-dialog h2 { margin: 0 0 var(--space-8); font: 700 18px/1.2 var(--font-sans); }
.pt-dialog p { margin: 0 0 var(--space-14); }
.pt-dialog__input { width: 100%; height: var(--size-control); margin-bottom: var(--space-14); font-size: 14px; }
.pt-dialog__buttons { display: flex; justify-content: flex-end; gap: var(--space-8); }

/* Rename field in a lane header */
.pr-lane__rename { flex-grow: 1; min-width: 0; height: 22px; font: 700 13px/1 var(--font-sans); color: var(--ink); background: var(--paper); border: var(--stroke-hair) solid var(--ink); padding: 0 4px; }

/* ---------- Phones: the page scrolls, the instruments start folded, the grid scrolls sideways ---------- */
/* Narrow desktop windows and tablets; phones get their own layout (the Phones section below). */
@media (max-width: 820px) {
  :root:not(.is-phone) body[data-app="polytoggle"] { height: auto; overflow: visible; }
  :root:not(.is-phone) .pr-topbar { padding: var(--space-8) var(--space-12); gap: var(--space-8); }
  :root:not(.is-phone) .pr-topbar__row { gap: var(--space-8); }
  :root:not(.is-phone) .pt-body { min-height: 440px; }
  :root:not(.is-phone) .pt-sidebar { max-height: none; }
  :root:not(.is-phone) .pt-stage { min-height: 360px; }
  :root:not(.is-phone) .pt-panel { grid-template-columns: minmax(0, 1fr) 56px; height: auto; }
  :root:not(.is-phone) .pt-sec--lane, :root:not(.is-phone) .pt-sec--note { grid-column: 1; border-right: 0; }
  :root:not(.is-phone) .pt-cells6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
  :root:not(.is-phone) .pt-collapse { grid-column: 2; grid-row: 1 / span 2; }
  :root:not(.is-phone) .pt-info { margin-top: var(--space-14); }
  .pr-shortcuts { display: none; }
  .pt-loop { flex-basis: 100%; }
}
@media (pointer: coarse) {
  .pt-lane > .pr-lane .pr-lane__row { flex-wrap: wrap; row-gap: var(--space-4); }
  .pr-lane__spacer { display: none; }
}

.pt-lane .pr-lane__top { align-items: center; }

/* Song name at the left of the second top-bar row: plain text and a pencil; a text field while editing */
.pt-song { display: flex; align-items: center; margin-right: var(--space-8); min-width: 0; }
.pt-songname { display: inline-flex; align-items: center; gap: var(--space-8); max-width: 26ch; min-height: 32px; padding: 0 var(--space-4) 0 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: 700 17px/1.5 var(--font-sans); }
.pt-songname:hover .pr-icon { color: var(--ink); }
.pt-songname__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 0; }
.pt-songname .pr-icon { font-size: 20px; color: var(--muted); flex: none; }
.pt-songname__input { width: 26ch; height: 32px; font: 700 17px/1.5 var(--font-sans); }
.pt-songname:focus-visible { outline: var(--stroke-focus) solid var(--ink); outline-offset: 2px; box-shadow: var(--focus-halo); }
.pt-iconbtn { padding: 0 10px; }
.pt-menu__rule { border-top: var(--stroke-hair) solid var(--ink); }
.pt-status { align-self: center; color: var(--muted); }

/* Keyboard shortcuts link (foot of Info) and dialog */
.pt-info .pr-info__text { margin-bottom: var(--space-12); }
.pt-shortcuts-link { margin: auto 0 0; align-self: flex-start; flex: none; }



/* Touch only: an add button per instrument and a Delete note button (no double-click on a phone). */
.pr-inst-row { display: flex; }
.pr-inst-row .pr-inst { flex: 1; min-width: 0; }
.pr-inst-add, .pt-note-delete { display: none; }
@media (pointer: coarse) {
  .pr-inst-add { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--size-target); height: var(--size-control); min-height: var(--size-target); margin-left: -1px; padding: 0; border: var(--stroke-hair) solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
  .pr-inst-row .pr-inst { min-height: var(--size-target); }
  .pt-note-delete:not([hidden]) { display: inline-flex; min-height: var(--size-target); }
}

/* Poly's first-visit note: "Tap a square to add a beat", then "Now press play". Taps pass through it. */
.pt-hint {
  position: absolute; right: var(--space-14); bottom: var(--space-14); z-index: 4; width: 236px; box-sizing: border-box;
  display: flex; align-items: center; gap: var(--space-10); padding: var(--space-10) var(--space-12);
  background: var(--paper); border: var(--stroke-rule) solid var(--ink); pointer-events: none;
}
.pt-hint__poly .poly { width: 34px; height: 34px; }
.pt-hint__body { display: flex; flex-direction: column; gap: 3px; }
.pt-hint__title { font: 700 14px/1.2 var(--font-sans); }
.pt-hint__text { font: 400 12px/1.35 var(--font-sans); }

/* ---------- Phones (spec, Phones): rail | top bar over the stage, settings drawer beside it ---------- */

/* One top bar: Play, Restart, BPM, the polytoggle, then the five scene tabs. The rest moves to the rail and Menu. */
.is-phone .pr-topbar__row { display: contents; }
.is-phone .pr-topbar :is(.pt-group, .pt-loop, .pt-song, .pt-zoom, .pt-menuwrap:not(.pt-scenewrap), .pr-btngroup__gap, .pt-iconbtn:not(.pt-scenemenu), .pr-scenes > .pr-eyebrow) { display: none; }
.is-phone .pt-scenemenu { width: var(--size-target); height: var(--size-target); }
.is-phone .pr-topbar .pr-btngroup > :not(.pt-status) { display: none; }
.is-phone .pr-topbar .pr-btngroup { display: contents; }
.is-phone .pr-inline[data-info="bpm"] {
  flex: none; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 0;
  width: 64px; height: var(--size-target); box-sizing: border-box; margin-left: var(--space-4); padding: 5px 6px 4px;
  border: var(--stroke-hair) solid var(--ink); font: 600 9px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--muted);
}
.is-phone .pr-inline[data-info="bpm"]:focus-within { outline: var(--stroke-focus) solid var(--ink); outline-offset: 0; }
.is-phone .pr-input--bpm { width: 100%; height: auto; padding: 0; border: 0; background: transparent; text-align: left; font: 600 16px/1 var(--font-mono); color: var(--ink); }
.is-phone .pr-input--bpm:focus-visible { outline: 0; box-shadow: none; }
.is-phone .pr-toggle { flex: none; gap: 7px; height: var(--size-target); padding: 0 var(--space-8); }
.is-phone .pr-toggle__label { font-size: 12px; }
.is-phone .pr-switch::before { content: ""; position: absolute; inset: -9px -2px; }
.is-phone .pr-scenes { flex: none; gap: 2px; }
.is-phone .pr-scene { width: var(--size-target); height: var(--size-target); font-size: 15px; }
.is-phone .pt-status:not(:empty) {
  position: fixed; z-index: 40; left: 50%; bottom: calc(env(safe-area-inset-bottom) + var(--space-12)); transform: translateX(-50%);
  padding: var(--space-10) var(--space-14); background: var(--ink); color: var(--paper); font: 400 12px/1.3 var(--font-mono); white-space: nowrap;
}
@media (max-width: 720px) {
  .is-phone .pr-topbar { gap: var(--space-4); }
  .is-phone .pr-toggle { gap: var(--space-4); padding: 0 var(--space-6); }
  .is-phone .pr-toggle__label { font-size: 11px; }
}

/* The body: stage and, with a selection, the settings drawer beside it. No instruments column, no Info. */
.is-phone .pt-body { grid-column: 2; grid-row: 2; min-height: 0; min-width: 0; }
.is-phone .pt-sidebar { display: none; }
.is-phone .pt-main { flex-direction: row; min-height: 0; }
.is-phone .pt-stage { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; scrollbar-width: none; }
.is-phone .pt-stage::-webkit-scrollbar { display: none; }
.is-phone .pt-hint { top: 30px; right: var(--space-14); bottom: auto; }
.is-phone .pt-empty-stage { margin: var(--space-24); }

/* Lanes share the stage's height (56px at least) and beats are 56px wide at least; the stage scrolls both ways. */
.is-phone .pt-lanes { flex: 1 0 auto; width: max(calc(100% * var(--zoom)), calc(116px + var(--total, 1) * 60px)); }
.pt-beatrow { position: sticky; top: 0; z-index: 3; display: flex; flex: none; height: 22px; background: var(--paper); }
.pt-beatrow__loop {
  position: sticky; left: 0; z-index: 1; flex: none; width: 104px; box-sizing: border-box; padding: 7px 2px 0 8px; background: var(--paper);
  font: 500 8.5px/1 var(--font-mono); letter-spacing: -0.02em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pt-beatrow__nums { flex: 1; display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: var(--space-4); padding: 0 var(--space-8) 0 var(--space-4); }
.pt-beatrow__nums > span { padding-left: 3px; font: 500 10px/22px var(--font-mono); color: var(--muted); }
.is-phone .pt-lane { flex: 1 1 0; min-height: 56px; }
.is-phone .pt-lane > .pr-lane { width: 104px; padding: 0; border-right: 0; border-bottom: var(--stroke-hair) solid var(--paper); }
.pt-phonehead {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px;
  padding: 0 var(--space-8) 0 var(--space-10); border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer;
}
.pt-phonehead__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px/1.15 var(--font-sans); }
.pt-phonehead__kind { font: 500 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.pt-phonehead__tags { display: flex; gap: var(--space-4); }
.pt-phonehead__tag { padding: 2px 4px; border: var(--stroke-hair) solid currentColor; font: 600 9px/1 var(--font-mono); text-transform: uppercase; }
.pt-phonehead:focus-visible { outline: var(--stroke-focus) solid currentColor; outline-offset: -4px; box-shadow: none; }
.is-phone .pt-track { display: flex; flex-direction: column; gap: 3px; padding: 5px var(--space-8) 3px var(--space-4); }
.is-phone .pt-cells { flex: 1 1 auto; min-height: 0; }
.is-phone :is(.pt-cell, .pr-note) { height: auto; min-height: 0; }
.is-phone .pt-cell:hover { background: var(--paper); }
.is-phone :is(.pt-cell, .pr-note) .pt-num { display: none; }
.is-phone .pt-playhead { flex: none; margin-top: 0; }
/* A selected note shows a length handle on its right edge: drawn 14 x 28, a 44 x 44 hit area. */
.is-phone .pr-note[aria-selected="true"] { z-index: 2; }
.is-phone .pr-note .pr-note__grab { display: none; }
.is-phone .pr-note[aria-selected="true"] .pr-note__grab {
  display: flex; align-items: center; justify-content: center; top: 50%; right: -9px; bottom: auto; width: 14px; height: 28px; margin-top: -14px;
  box-sizing: border-box; border: var(--stroke-rule) solid var(--ink); background: var(--paper); opacity: 1;
}
.is-phone .pr-note[aria-selected="true"] .pr-note__grab::after { content: ""; width: 2px; height: 12px; background: var(--ink); }
.is-phone .pr-note__grab::before { content: ""; position: absolute; inset: -8px -15px; }

/* The settings panel (Oct 22): 320px beside the stage, from the top bar to the bottom edge. It never scrolls:
   the cells' rows share whatever height is left, from about 240px (Safari's bars showing) up. */
.is-phone .pt-dock { display: flex; min-height: 0; }
.is-phone .pt-panelbar, .is-phone .pt-collapse { display: none; }
.is-phone .pt-panel {
  display: flex; flex-direction: column; width: 320px; height: auto; min-height: 0; overflow: hidden;
  border-top: 0; border-left: var(--stroke-rule) solid var(--ink); background: var(--paper);
}
.is-phone .pt-panel[data-tab="note"] .pt-sec--lane, .is-phone .pt-panel[data-tab="lane"] .pt-sec--note { display: none; }
.pt-tabs { position: sticky; top: 0; z-index: 2; display: flex; flex: none; border-bottom: var(--stroke-rule) solid var(--ink); background: var(--paper); }
.pt-tabs__list { display: flex; flex: 1; }
.pt-tab {
  flex: 1 1 0; height: var(--size-target); border: 0; border-right: var(--stroke-hair) solid var(--ink); background: var(--paper); color: var(--ink);
  cursor: pointer; font: 600 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em;
}
.pt-tab:last-child { border-right: 0; }
.pt-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.pt-tab:disabled { color: var(--off); cursor: default; }
.pt-tabs__close { display: flex; align-items: center; justify-content: center; width: var(--size-target); height: var(--size-target); padding: 0; border: 0; border-left: var(--stroke-rule) solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.pt-tabs__close .pr-icon { font-size: 22px; }
:is(.pt-tab, .pt-tabs__close, .pt-ctl, .pt-renamebtn):focus-visible { outline-offset: -3px; }
.is-phone .pt-sec { flex: 1 1 auto; min-height: 0; gap: 0; padding: 0; background: var(--paper); border-right: 0; }
.is-phone .pt-sec__head { flex: none; flex-wrap: wrap; height: auto; min-height: var(--size-target); gap: 2px var(--space-8); padding: var(--space-4) 0 var(--space-4) var(--space-12); }
.is-phone .pt-sec__head .pr-eyebrow { display: none; }
.is-phone .pt-sec__head .pr-swatch { width: 16px; height: 16px; }
.is-phone .pt-sec__title { flex: 1 1 0; font-size: 14px; }
.is-phone .pt-sec--note .pt-sec__head { padding-right: var(--space-12); }
.is-phone .pt-readout { order: 3; flex-basis: 100%; margin-left: 0; padding-bottom: var(--space-4); overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.pt-renamebtn { display: flex; align-items: center; justify-content: center; flex: none; width: var(--size-target); height: var(--size-target); padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.pt-lanectl { display: flex; flex: none; align-items: center; gap: var(--space-4); padding: 0 var(--space-8) var(--space-6); }
.pt-ctl {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--size-target); height: var(--size-target); padding: 0;
  border: var(--stroke-hair) solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; font: 600 14px/1 var(--font-mono);
}
.pt-ctl[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pt-ctl:disabled { opacity: 0.4; cursor: default; }
.pt-lanectl__gap { flex: 1; }
.pt-lanectl__count { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 28px; font: 600 16px/1 var(--font-mono); }
.pt-lanectl__unit { font: 500 8px/1 var(--font-mono); text-transform: uppercase; }
/* The cells: three to a row for a note, four for a lane, in two rows that stretch to fill. Hairlines are the grid's gaps. */
.is-phone .pt-cells6 {
  flex: 1 1 auto; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(40px, 1fr));
  gap: var(--stroke-hair); padding-left: 0; background: var(--ink); border-block: var(--stroke-hair) solid var(--ink);
}
.is-phone .pt-sec--lane .pt-cells6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.is-phone .pt-param { height: auto; min-height: 0; margin-left: 0; border: 0; padding: 6px 8px 8px; touch-action: none; cursor: ew-resize; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.is-phone .pt-param__input { cursor: ew-resize; pointer-events: none; -webkit-user-select: none; user-select: none; }
.is-phone .pt-param__select { pointer-events: auto; cursor: pointer; }
.is-phone .pt-param:has(.pt-param__select) { cursor: pointer; }
.is-phone .pt-param.is-scrubbing { background: var(--ink); color: var(--paper); }
.is-phone .pt-param.is-scrubbing :is(.pt-param__input, .pt-param__label, .pt-param__unit) { color: var(--paper); }
.is-phone .pt-param.is-scrubbing .pt-param__bar { background: var(--paper); }
.is-phone .pt-sec--lane .pt-param:not(.is-scrubbing) { background: var(--panel); }
.is-phone .pt-param__input, .is-phone .pt-param__select { font-size: 16px; } /* 16px, or iOS zooms in on focus */
.is-phone .pt-param--env { order: 1; cursor: default; background: var(--paper) !important; }
.is-phone .pt-param--env .pt-env { flex: 1 1 auto; min-height: 0; height: auto; }
.pt-noteacts { display: flex; flex: none; gap: var(--space-8); padding: var(--space-6) var(--space-12) var(--space-8); }
.pt-noteacts .pr-btn { flex: 1 1 0; height: var(--size-target); justify-content: center; }

/* The Add drawer: hear an instrument, or add it as a lane. */
.pt-drawer__count { margin-left: var(--space-6); font: 500 11px/1 var(--font-mono); color: var(--muted); }
.pt-addgroup .pr-mgroup { margin: 0; padding: var(--space-12) var(--space-16) var(--space-6); border: 0; }
.pt-addrow { display: flex; align-items: stretch; height: var(--size-target); border-bottom: var(--stroke-hair) solid var(--divider); }
.pt-addrow__hear {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-10); padding: 0 var(--space-12) 0 var(--space-16);
  border: 0; background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; font: 500 14px/1 var(--font-sans);
}
.pt-addrow__name { flex: 1; }
.pt-addrow__hear .pr-icon { color: var(--muted); }
.pt-addrow__add { display: flex; align-items: center; justify-content: center; width: 56px; padding: 0; border: 0; border-left: var(--stroke-hair) solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.pt-addrow__add:disabled { opacity: 0.4; cursor: default; }
:is(.pt-addrow__hear, .pt-addrow__add, .pt-menuname, .pt-mrow__step, .pt-help__close):focus-visible { outline-offset: -3px; }

/* The Menu drawer. */
.pt-menuname { display: flex; align-items: center; gap: var(--space-8); width: 100%; min-width: 0; height: var(--size-target); padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; text-align: left; font: 700 17px/1.2 var(--font-sans); }
.pt-menuname__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-menuname .pr-icon { flex: none; font-size: 20px; }
.pt-opensub { padding: 0 var(--space-16) var(--space-8) 56px; }
.pt-opensub .pr-menu-item { width: 100%; min-height: var(--size-target); }
.pt-opensub .pr-menu__heading { padding-left: 0; }
.pt-mrow { display: grid; grid-template-columns: 74px 44px minmax(0, 1fr) 44px; align-items: center; min-height: 48px; padding: 0 var(--space-16) 0 var(--space-20); font: 500 14px/1 var(--font-sans); }
.pt-mrow--master { grid-template-columns: 112px minmax(0, 1fr) 56px; }
.pt-mrow .pr-range { width: 100%; }
.pt-mrow__step { height: var(--size-target); padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; font: 600 18px/1 var(--font-mono); }
.pt-mrow__out { text-align: right; white-space: nowrap; font: 500 11px/1 var(--font-mono); }
.pt-mi--help { margin-top: var(--space-8); }

/* How polytoggle works: the phone's stand-in for the Info area. */
.pt-help { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 24px); padding: 0; border: var(--stroke-rule) solid var(--ink); background: var(--paper); color: var(--ink); }
.pt-help[open] { display: flex; flex-direction: column; }
.pt-help::backdrop { background: rgba(0, 0, 0, 0.45); }
.pt-help__head { display: flex; align-items: center; flex: none; height: 52px; padding-left: var(--space-16); border-bottom: var(--stroke-rule) solid var(--ink); }
.pt-help__head h2 { flex: 1; margin: 0; font: 700 16px/1.2 var(--font-sans); }
.pt-help__close { display: flex; align-items: center; justify-content: center; width: 52px; height: 100%; padding: 0; border: 0; border-left: var(--stroke-rule) solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.pt-help__list { margin: 0; padding: var(--space-4) var(--space-16) var(--space-12); overflow-y: auto; }
.pt-help__item { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--space-12); padding: var(--space-10) 0; border-bottom: var(--stroke-hair) solid var(--divider); }
.pt-help__item dt { font: 700 13px/1.4 var(--font-sans); }
.pt-help__item dd { margin: 0; font: 400 13px/1.45 var(--font-sans); }
.is-phone .pt-dialog { max-width: min(28rem, calc(100vw - 32px)); }
.is-phone .pt-dialog__input { font-size: 16px; }
.is-phone .pt-lanes:not(:has(.pt-lane)) { flex: none; }
/* BPM drags sideways too (app.js, "Phones: drag a value sideways"). */
.is-phone .pr-inline[data-info="bpm"] { touch-action: none; cursor: ew-resize; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.is-phone .pr-inline[data-info="bpm"] .pr-input--bpm { pointer-events: none; }
.is-phone .pr-inline[data-info="bpm"].is-scrubbing { background: var(--ink); color: var(--paper); }
.is-phone .pr-inline[data-info="bpm"].is-scrubbing .pr-input--bpm { color: var(--paper); }
/* Tuning in a quarter-width cell: the menu arrow moves up beside the label so "12-EDO" fits. */
.is-phone .pt-param__select { padding-right: 0; background-image: none; }
.is-phone .pt-param:has(.pt-param__select) .pt-param__label::after { content: " \25BE"; }

/* ---------- Phones, upright: the rings view (spec, Phones: Upright). The grid and its settings wait for landscape. ---------- */
.pt-rings { display: none; }
@media (orientation: portrait) {
  .is-phone .pr-app > .pr-topbar { display: grid; grid-template-columns: 34px 44px 44px minmax(0, 1fr); column-gap: var(--space-8); align-items: center; padding-bottom: var(--space-6); }
  .is-phone .pr-topbar .pr-logo { grid-area: 1 / 1; height: 56px; border: 0; padding: 0; }
  .is-phone .pr-topbar #play { grid-area: 1 / 2; }
  .is-phone .pr-topbar #restart { grid-area: 1 / 3; }
  .is-phone .pr-topbar .pr-toggle { grid-area: 1 / 4; justify-self: end; border: 0; }
  .is-phone .pr-topbar .pr-scenes { grid-area: 2 / 1 / 3 / -1; justify-self: start; }
  .is-phone .pr-topbar .pr-inline[data-info="bpm"] { grid-area: 2 / 4; justify-self: end; margin-left: 0; margin-right: var(--space-8); }
  .is-phone .pr-topbar .pt-scenewrap { grid-area: 2 / 4; justify-self: end; margin-right: calc(64px + var(--space-8) * 2); } /* the gap between the tabs and BPM */
  .is-phone .pr-topbar .pr-toggle { gap: 6px; padding: 0 0 0 var(--space-6); }
  .is-phone .pr-topbar .pr-toggle__label { font-size: 11px; }
  .is-phone .pt-body { display: none; }
  .is-phone .pt-rings {
    display: flex; flex-direction: column; align-items: center; grid-column: 1; grid-row: 2; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--space-12) var(--space-16) var(--space-16);
  }
}
.pt-rings__fig { flex: none; width: min(300px, 100%); aspect-ratio: 1; }
.pt-ring__cell { stroke: var(--ink); stroke-width: 1; }
.pt-ring__cell.is-now { stroke-width: 3; }
.pt-ring__marker, .pt-ring__hand { stroke: var(--ink); stroke-width: 4; stroke-linecap: butt; }
.pt-ring__hand { stroke-width: 3; }
.is-muted .pt-ring__cell { stroke-dasharray: 3 2; }
.pt-ring__center { font: 700 40px/1 var(--font-mono); fill: var(--ink); }
.pt-ring__of { font: 500 12px/1 var(--font-mono); fill: var(--muted); }
.pt-rings__loop { margin: var(--space-8) 0 0; font: 500 12px/1.3 var(--font-mono); text-align: center; }
.pt-rings__turn { margin: var(--space-4) 0 var(--space-8); display: flex; align-items: center; gap: var(--space-6); font: 400 12px/1.3 var(--font-mono); color: var(--muted); }
.pt-rings__turn .pr-icon { font-size: 18px; }
.pt-rings__lanes { align-self: stretch; margin: 0; padding: 0; list-style: none; border-top: var(--stroke-hair) solid var(--divider); }
.pt-ringrow { display: flex; align-items: center; gap: var(--space-4); min-height: 56px; border-bottom: var(--stroke-hair) solid var(--divider); }
.pt-ringrow.is-muted .pt-ringrow__text { color: var(--muted); }
.pt-ringrow__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-12); min-height: 56px; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.pt-ringrow__main[aria-current="true"] { box-shadow: inset 4px 0 0 var(--ink); padding-left: var(--space-12); }
.pt-ringrow__main .pr-swatch { flex: none; width: 24px; height: 24px; }
.pt-ringrow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.pt-ringrow__text strong { font: 700 14px/1 var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-ringrow__text span { font: 400 10px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--muted); }
.pt-ringrow__btn { width: var(--size-target); height: var(--size-target); }
.pt-ringrow__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.pt-ring__cell { cursor: pointer; }
.is-selected .pt-ring__cell { stroke-width: 1.5; }
.pt-pad { align-self: stretch; display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-4) 0 var(--space-12); }
.pt-pad[hidden] { display: none; }
.pt-pad__beat {
  height: 48px; padding: 0; border: var(--stroke-hair) solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer;
  font: 500 11px/1 var(--font-mono); display: flex; align-items: flex-start; justify-content: flex-start; padding: var(--space-4);
}
.pt-pad__beat.is-on { background: var(--note-bg); color: var(--note-fg); }

/* Phones, landscape, narrow: the top bar runs out of room (issue #26, measured at 667 px). Restart hides first, then the scene menu button;
   both stay in the Menu's Scene group, and Restart keeps its keyboard shortcut. */
@media (orientation: landscape) and (max-width: 780px) { .is-phone .pr-topbar #restart { display: none; } }
@media (orientation: landscape) and (max-width: 710px) { .is-phone .pr-topbar .pt-scenewrap { display: none; } }

/* ---------- Rings view on desktop (spec, Rings view on desktop). Phones keep their own upright rings above. ---------- */
.pt-view { display: inline-flex; margin: 0 var(--space-12) 0 0; padding: 0; min-width: 0; border: var(--stroke-hair) solid var(--ink); flex: none; }
.pt-view__opt { position: relative; display: inline-flex; align-items: center; gap: var(--space-6); height: 34px; padding: 0 12px 0 10px; box-sizing: border-box; cursor: pointer; background: var(--paper); color: var(--ink); font: 600 12px/1 var(--font-sans); }
.pt-view__opt + .pt-view__opt { border-left: var(--stroke-hair) solid var(--ink); }
.pt-view__opt:has(input:checked) { background: var(--ink); color: var(--paper); }
.pt-view__opt:has(input:focus-visible) { outline: var(--stroke-focus) solid var(--ink); outline-offset: 2px; box-shadow: var(--focus-halo); z-index: 1; }
.pt-view__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
@media (pointer: coarse) { .pt-view__opt { height: var(--size-target); } }
.is-phone .pt-view { display: none; }

.pt-ringsdesk { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 440px); grid-template-rows: minmax(0, 1fr); }
.pt-ringsdesk[hidden] { display: none; }
.pt-rd__stage { min-width: 0; min-height: 0; box-sizing: border-box; padding: var(--space-10) var(--space-20) var(--space-14); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-10); overflow: auto; }
.pt-rd__stage .pr-eyebrow { align-self: flex-start; margin: 0; }
.pt-rd__wrap { position: relative; flex: none; aspect-ratio: 1; margin-inline: auto; } /* auto margins, not centering, so a zoomed figure still scrolls to its left edge */
.pt-rd__fig { display: block; width: 100%; height: 100%; }
.pt-rd__side { min-height: 0; box-sizing: border-box; border-left: var(--stroke-rule) solid var(--ink); display: flex; flex-direction: column; overflow-y: auto; }
@media (max-width: 1100px) { .pt-ringsdesk { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(420px, 1fr) auto; overflow: auto; } .pt-rd__side { overflow: visible; border-left: 0; border-top: var(--stroke-rule) solid var(--ink); } }
.pt-rd__head { display: flex; align-items: center; height: 33px; margin: 0; padding: 0 var(--space-12); box-sizing: border-box; border-bottom: var(--stroke-hair) solid var(--ink); }
.pt-rd__lanes { margin: 0; padding: 0; list-style: none; }
.pt-rdrow { display: flex; align-items: center; gap: var(--space-8); height: 58px; box-sizing: border-box; padding: 0 var(--space-10) 0 var(--space-12); background: #f0f0f0; color: var(--ink); border-bottom: var(--stroke-hair) solid var(--ink); }
.pt-rdrow.is-sel { background: var(--ink); color: var(--paper); }
.pt-rdrow .pr-swatch { flex: none; width: 16px; height: 16px; border-color: currentColor; }
.pt-rdrow__name { flex: 1 1 auto; min-width: 0; height: var(--size-target); display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.pt-rdrow__name strong { font: 700 13px/1.1 var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-rdrow__name span { font: 400 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.pt-rdrow.is-muted .pt-rdrow__name strong { opacity: 0.6; }
.pt-rdrow__ctl { flex: none; width: 224px; display: flex; flex-direction: column; gap: 5px; }
.pt-rdrow__line { display: flex; align-items: center; gap: var(--space-4); }
.pt-rdrow__count { min-width: 22px; text-align: center; font: 600 13px/1 var(--font-mono); }
.pt-rdrow__spacer { flex: 1; }
.pt-rdrow .pr-dense[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pt-rdrow.is-sel .pr-dense[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.pt-rdrow__mix { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0 6px; font: 500 10px/1 var(--font-mono); text-transform: uppercase; }
.pt-rdrow__mix .pr-range { width: 100%; height: 16px; color: inherit; }
.pt-rdrow.is-sel .pr-range { --range-ground: var(--ink); }
.pt-rd__padbox { padding: var(--space-14) var(--space-12) var(--space-16); display: flex; flex-direction: column; gap: var(--space-8); }
.pt-rd__padtitle { margin: 0; display: flex; align-items: center; gap: var(--space-8); }
.pt-rd__padtitle .pr-swatch { width: 12px; height: 12px; }
.pt-rd__pad { display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: var(--space-4); }
.pt-rd__pad .pt-pad__beat { height: var(--size-target); }
.pt-rd__pad .pt-pad__beat[aria-pressed="true"] { outline: var(--stroke-focus) solid var(--ink); outline-offset: 2px; box-shadow: var(--focus-halo); }
.pt-rd__pad .pt-pad__beat:focus-visible { outline: var(--stroke-focus) solid var(--ink); outline-offset: 2px; box-shadow: var(--focus-halo); z-index: 1; }
.pt-rd__fig .pt-ring__cell { cursor: pointer; }
.pt-rd__fig .pt-ring__center { font-size: 56px; }
.pt-rd__fig .pt-ring__of { font-size: 11px; letter-spacing: 0.08em; }
.pt-ring__halo-white, .pt-ring__halo-ink { fill: none; stroke-linejoin: round; pointer-events: none; }
.pt-ring__halo-white { stroke: var(--paper); stroke-width: 7; }
.pt-ring__halo-ink { stroke: var(--ink); stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .pt-rd__fig * { transition: none; } }
.pt-stage[hidden] { display: none; }