/* lab/csb.css — THE CONTROL SURFACE (the transport bar on the STAGE, in a rack card and FREE; its expander, the search pill, the favourites), out of lab.css (021 G6, an OWNER SHEET: the nodes.css precedent). UNLAYERED like lab.css and loaded right after it from index.html (lab.css · csb.css · keymap.css · skin.css · nodes.css), so every rule keeps its rank; the bar's computed boxes and pixels were proved equal before and after on STAGE, FREE, RACK and EXPANDED (research/iteration-021/G-BUILD.md). */ /* ── THE CONTROL SURFACE (iteration 014 A1 · A8; 018 E2 · E4: λWAVES' own layout array under the kit's data-layout="csb", lab/shell/transport.js). ON THE STAGE: PLAY floats outside the bar's left edge (a round chip of its own); three tracks, the two sides equal (--csb-side: the left block's width) so MOLECULES' chooser sits dead centre over LIBRARY · MOLECULAR · HYDROGEN · FOLDERS; LEFT = RATE over the typed BPM pill, MOD over EXPAND, then a 2 × 2 of ⏮ ↺ / TIMELINE the door (032 T14); RIGHT = a 5-wide grid SEARCH FINDER ♥ ◧ FOLDS / NODES INFORMATIONAL THEME ⚙ the dock (020 T2; 032). Every seat one 36-px box, one 20-px icon. IN A RACK CARD (docked, or FREE one card wide): the same order wrapping — PLAY · RATE · BPM · MOD · EXPAND, the chooser, the modes + FOLDERS, then the thirteen icons, centred. ── */ #transport[data-layout="csb"] { --csb-side: 212px; display: grid; grid-template-columns: minmax(var(--csb-side), 1fr) auto minmax(var(--csb-side), 1fr); grid-template-areas: "left mid right" "panel panel panel"; grid-template-rows: auto auto; align-items: center; column-gap: 14px; row-gap: 0; overflow: visible; } #transport.mini[data-layout="csb"] { width: max-content; max-width: calc(100vw - 24px); height: auto; min-height: 0; padding: 6px 12px; contain: layout; } /* E2: no paint containment — PLAY floats outside the box */ #transport[data-layout="csb"] > .csb-left { grid-area: left; justify-self: start; } #transport[data-layout="csb"] > .csb-right { grid-area: right; justify-self: end; } #transport[data-layout="csb"] > .csb-mid { grid-area: mid; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 220px; } #transport[data-layout="csb"] > .native-tempo { grid-area: panel; margin-top: 8px; } /* iteration 016 W6 · THE EXPANDER'S DIRECTION (call 9): at the stage's foot the panel is the grid's first row and rises above the bar; at the top (.at-top) it hangs below. A narrow screen seats the bar at the top whatever its class (skin.css), so wide only. */ @media (min-width: 861px) { #transport.mini[data-layout="csb"]:not(.at-top) { grid-template-areas: "panel panel panel" "left mid right"; } #transport.mini[data-layout="csb"]:not(.at-top) > .native-tempo { margin-top: 0; margin-bottom: 8px; } } #transport[data-layout="csb"] .csb-side { display: flex; align-items: center; gap: 8px; } #transport[data-layout="csb"] .csb-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } #transport[data-layout="csb"] .csb-ico { display: grid; grid-template-columns: repeat(var(--csb-cols, 2), 36px); grid-auto-rows: 36px; gap: 4px; } #transport[data-layout="csb"] .csb-right { --csb-cols: 5; } /* 020 T2: nine seats, two rows of five (196 px, inside the 212-px side track: the bar keeps its 674 px and its height); 032 T14: the dock chip is the tenth */ #transport[data-layout="csb"] .tr-openers { display: contents; } #transport[data-layout="csb"] .tr-open.has-glyph .tr-word { display: none; } #transport[data-layout="csb"].mir-transport :is(.csb-col, .csb-row, .csb-ico) > * { order: 0; flex-shrink: 0; } #transport[data-layout="csb"] .csb-row { display: flex; align-items: center; gap: 4px; height: 36px; } /* THE SEATS: one 36-px round box, flat until hovered, the icon a 20-px glyph (the kit's and lab/icons.js' alike) */ #transport[data-layout="csb"] :is(.csb-ico .tbtn, .csb-ico .dock-btn, .csb-ico .mod-exp, .csb-ico .tr-open, .csb-ico .csb-search-b, #rackToggle, #rackFav, .tr-expand) { display: inline-grid; place-items: center; width: 36px; height: 36px; min-width: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--ink-key); font-size: 18px; transform: none; } #transport[data-layout="csb"] :is(.csb-ico .tbtn, .csb-ico .dock-btn, .csb-ico .mod-exp, .csb-ico .tr-open, .csb-ico .csb-search-b, #rackToggle, #rackFav, .tr-expand):hover { color: var(--fg); background: var(--glass-raise); } #transport[data-layout="csb"] :is(.csb-ico, .csb-mod) svg { width: 20px; height: 20px; } #transport[data-layout="csb"] :is(.csb-ico .tr-open.on, .csb-ico .mod-exp.live, .csb-search-b[aria-expanded="true"], #rackFav[aria-expanded="true"], .csb-info.on, .csb-nodes.on, .tr-expand.on) { color: var(--acc); } /* 021 V2 · every seat's icon is an SVG from the one table (lab/icons.js through the kit's setGlyph): no masks. THEME carries the moon and the sun; the theme shows one (body[data-theme]) */ body[data-theme="light"] #transport .csb-theme > .gly-moon, body:not([data-theme="light"]) #transport .csb-theme > .gly-sun { display: none; } /* PLAY: a round chip floating outside the bar's left edge, level with the bar's own rows (the panel never moves it) */ #transport[data-layout="csb"] > .csb-play { display: grid; place-items: center; border-radius: 50%; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } /* 032 C4 (Josh: "PLAY's outer stroke"): no chip around the disc — the 56-px disc stands alone; the kit's :focus-visible ring is the keyboard's */ #transport.mini[data-layout="csb"] > .csb-play { position: absolute; right: calc(100% + 16px); bottom: 15px; grid-area: auto; } /* 032 C4: the disc where it stood inside its 4-px chip */ #transport.mini[data-layout="csb"].at-top > .csb-play { top: 15px; bottom: auto; } /* 020 T1 · PLAY IS A BUTTON (Josh: "it must feel like a button"); 023 B3 (Josh: "a weird outline and glow over the play pause button … the cool animation for clicking, click-holding, and releasing"): the kit chip's motion (window.css .mir-chip) on the raised disc — hover a lighter face and 6 % larger (--chip-hover-scale), press sinks to 92 % (--chip-press-scale) under the trig's press face, release eases back on --motion-micro. Playing is the same face (the glyph says pause): no rim, no glow. The kit's own svg scale (shell/transport.css) rides on top. */ #transport[data-layout="csb"] .csb-play > .tbtn.play { --state-hover-wash: inset 0 0 0 99px var(--state-hover, var(--glass-raise)); width: 56px; height: 56px; min-width: 0; border-radius: 50%; background: var(--glass-raise); box-shadow: var(--relief-raise, var(--neu-raise)); color: var(--fg); translate: none; transition: background var(--motion-micro) var(--ease-out), box-shadow var(--motion-micro) var(--ease-out), scale var(--motion-micro) var(--ease-out); } :where(:root:not(.kbm-touch)) #transport[data-layout="csb"] .csb-play > .tbtn.play:hover { box-shadow: var(--relief-raise, var(--neu-raise)), var(--state-hover-wash); scale: var(--chip-hover-scale); } #transport[data-layout="csb"] .csb-play > .tbtn.play:is(:active, .press) { background: var(--state-press, var(--glass-press)); box-shadow: var(--trig-press-relief); scale: var(--chip-press-scale); } #transport[data-layout="csb"] .csb-play > .tbtn.play > svg { width: 26px; height: 26px; } /* LEFT: RATE over the BPM pill (a click types it: the kit's `typed`), MOD over EXPAND */ #transport[data-layout="csb"] .csb-mod > .tbtn.modb { background: transparent; border-color: transparent; box-shadow: none; width: 48px; height: 26px; min-width: 0; min-height: 0; border-radius: var(--r-pill); font-size: var(--fs-tiny); } #transport[data-layout="csb"] .csb-tempo > .k { width: 44px; } #transport[data-layout="csb"] .csb-tempo > .k .k-lbl { display: none; } #transport[data-layout="csb"] .csb-tempo .tempo-expand { flex: 0 0 auto; width: 72px; height: 34px; padding-right: 7px; } #transport[data-layout="csb"] .csb-tempo .tempo-expand .tempo-number { font: var(--w-bold) 12px/1 var(--font-num); font-variant-numeric: tabular-nums; } /* 015 T4: tabular */ #transport[data-layout="csb"] .tempo-chevron { display: none; } /* the pill opens nothing now: EXPAND does */ /* CENTRE: the chooser over the modes + FOLDERS (a fixed 220 px, so a long name never widens the bar; under HYDROGEN its seat stays, empty) */ #transport #lwMode { position: static; flex-direction: row; gap: 2px; } #transport[data-layout="csb"] :is(#lwMode .lw-stage-b, .csb-folders) { width: 40px; height: 36px; border-radius: 10px; } #transport[data-layout="csb"] :is(#lwMode .lw-stage-b, .csb-folders) > svg { width: 22px; height: 22px; } /* 021 V2: the glyph (was the mask ::before); 22 px kept as it was — 022 snaps it to 20 or 24 */ #transport[data-layout="csb"] .csb-folders { display: inline-grid; place-items: center; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--ink-key); } #transport[data-layout="csb"] .csb-folders:hover { color: var(--fg); background: var(--glass-raise); } #transport :is(#rackToggle, #rackFav) { position: static; inset: auto; -webkit-backdrop-filter: none; backdrop-filter: none; } body.rack-hidden #transport #rackFav { opacity: 1; visibility: inherit; pointer-events: auto; } #transport[data-layout="csb"] .csb-mid > .mol-pick { --touch: 34px; flex: 0 0 auto; width: 220px; min-width: 220px; max-width: 220px; height: 34px; overflow: hidden; } /* 023 B3: the kit stepper's seat is --touch (44 px); in the 34-px box its foot was cut, so the bar seats it at 34 */ #transport:has(#lwMode [data-id="hydrogen"][aria-pressed="true"]) .csb-mid > .mol-pick { visibility: hidden; } /* HYDROGEN: no molecule to choose */ /* IN A RACK CARD (docked, or the FREE window one card wide) — 023 B4 (Josh: "don't purely center it condensely, give some space"): one 7-column grid, its groups apart: PLAY · RATE over BPM · MOD over EXPAND on the row's thirds; THE PRESET (the chooser and its arrows the full width, LIBRARY · MOLECULES · HYDROGEN · FOLDERS on columns 1 · 3 · 5 · 7, subgrids of the card's columns); THE TOOLS, the thirteen icons seven a row on the same columns (7 + 6, as 020 T2 counted them); the expander under them, one column, its order kept */ #transport[data-layout="csb"]:is(.docked, [data-place="free"]) { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; align-items: center; gap: 4px 2px; padding: 8px; height: auto; } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) :is(.csb-left, .csb-right, .csb-ico) { display: contents; } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) > .csb-play { grid-area: 1 / 1 / 2 / 3; padding: 0; border-radius: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) .csb-play > .tbtn.play { width: 48px; height: 48px; } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) .csb-tempo { grid-area: 1 / 3 / 2 / 6; } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) .csb-mod { grid-area: 1 / 6 / 2 / 8; } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) > .csb-mid { grid-area: 2 / 1 / 3 / -1; display: grid; grid-template-columns: subgrid; justify-items: center; gap: 4px normal; width: 100%; min-width: 0; margin: 6px 0; } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) .csb-mid > .mol-pick { grid-area: 1 / 1 / 2 / -1; width: 100%; max-width: none; min-width: 0; } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) .csb-lib { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; justify-items: center; column-gap: normal; width: 100%; } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) .csb-lib > #lwMode { grid-column: 1 / 6; display: grid; grid-template-columns: subgrid; justify-items: center; column-gap: normal; } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) #lwMode > :nth-child(1) { grid-column: 1; } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) #lwMode > :nth-child(2) { grid-column: 3; } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) #lwMode > :nth-child(3) { grid-column: 5; } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) .csb-lib > .csb-folders { grid-column: 7; } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) :is(.csb-ico .tbtn, .csb-ico .dock-btn, .csb-ico .mod-exp, .csb-ico .tr-open, .csb-ico .csb-search-b, #rackToggle, #rackFav, .tr-expand) { grid-area: auto; order: 2; width: 32px; height: 32px; } /* auto: the kit's docked grid names cells for its own drawing */ #transport[data-layout="csb"]:is(.docked, [data-place="free"]) > .native-tempo { grid-area: auto / 1 / auto / -1; justify-self: stretch; order: 3; } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) > .native-tempo:not([hidden]) { grid-template-columns: minmax(0, 1fr); } #transport[data-layout="csb"]:is(.docked, [data-place="free"]):has(#lwMode [data-id="hydrogen"][aria-pressed="true"]) .csb-mid > .mol-pick { display: none; } /* the FREE window (the kit's createWindow; data-place="free"): the bar in the window's flow, never parked by a hidden rack */ html body #transport[data-place="free"] { position: static; left: auto; right: auto; top: auto; bottom: auto; transform: none; margin: 0; border: 0; box-shadow: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } html body.rack-hidden #transport[data-place="free"] { transform: none; opacity: 1; visibility: visible; pointer-events: auto; } /* THE SEARCH PILL (A8) above the bar and its ≤ 6 tiles above the pill (lab/csb-search.js; the Picker's tile, the hue in use) */ .csb-pill { position: fixed; z-index: calc(var(--z-chrome) + 4); padding: 4px; border-radius: var(--r-pill); } .csb-pill[hidden] { display: none; } .csb-pill .csb-search-in { display: block; width: 280px; height: 34px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--fg); font: 14px var(--font-ui); } .csb-pill .csb-search-in::placeholder { color: var(--ink-faint); } .csb-pill .csb-search-in:focus { outline: 0; } .csb-suggest { position: fixed; z-index: calc(var(--z-chrome) + 4); display: flex; gap: 6px; padding: 6px; border-radius: 14px; } .csb-suggest[hidden] { display: none; } .csb-suggest .mm-tile { position: relative; width: 76px; height: 76px; padding: 0; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; overflow: hidden; } /* 018 A9 (Josh: "don't show a colored outline for the thumbnails, just either highlight/outset/inset"): relief only — hover raised, the chosen one sunk */ .csb-suggest .mm-tile:hover { background: var(--glass-raise); box-shadow: var(--relief-raise, var(--neu-raise)); } .csb-suggest .mm-tile.on { background: var(--glass-well); box-shadow: var(--relief-well, var(--neu-inset)); } .csb-suggest .mm-pic { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; pointer-events: none; filter: hue-rotate(var(--mol-hue, 0deg)); } .csb-suggest .mm-under { display: none; } .csb-suggest .mm-ph { position: absolute; inset: 0 0 12px; display: grid; place-items: center; font: 400 15px/1 var(--font-math, serif); color: var(--fg); opacity: .75; pointer-events: none; } /* 018 A3: no picture — the formula holds the square */ .csb-suggest .mm-lbl { position: absolute; left: 0; right: 0; bottom: 3px; font: var(--w-bold) 10px/1 var(--font-math, serif); color: var(--fg); text-align: center; pointer-events: none; } .csb-suggest .csb-none { padding: 6px 10px; font-size: var(--fs-small); color: var(--ink-faint); } /* 022 C2 · THE SURFACE IS A SURFACE (lab/shell/transport.js): the expander is ONE WELL (the kit's `data-mir-surface="well"`, its fill `--xport-well`) holding four kit sections on the 44-px grid (`--xport-grid`). On the STAGE: TRANSPORT across the top, MACROS over FAVOURITES on the left and METERS standing beside them; in a rack card (docked, FREE) the four stack. Nothing scrolls inside it (017 R2). The bar's own rules hide a seat's word and float its value; the surface names every control and reads its value at rest, so its rules carry the bar's weight. */ #transport[data-layout="csb"] > .native-tempo.csb-surface:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tr tr" "mac met" "fav met"; gap: 6px; padding: 6px; background: var(--xport-well); } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) > .native-tempo.csb-surface:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tr" "mac" "fav" "met"; } .csb-surface > .csb-sec-tr { grid-area: tr; } .csb-surface > .csb-sec-mac { grid-area: mac; } .csb-surface > .csb-sec-fav { grid-area: fav; } .csb-surface > .csb-sec-met { grid-area: met; } #transport[data-layout="csb"] .csb-surface :is(.k-lbl, .ro-lbl) { display: block; } #transport[data-layout="csb"] .csb-surface .k { width: 100%; } #transport[data-layout="csb"] .csb-surface .k-val { display: block; position: static; opacity: 1; transform: none; font-size: var(--fs-micro); } #transport[data-layout="csb"] .csb-favs .segw .k-lbl { display: none; } /* TRANSPORT: ⏮ ‹ › ⟳ as glyph chips, REPEATS (it takes what is left) and BPM as readouts, the beat lamp on BPM, the kit's clock tiles one 44-px strip (023 B2: the T / t theorem is gone); in a card REPEATS takes the first line */ #transport[data-layout="csb"] .csb-steps { display: inline-flex; } #transport[data-layout="csb"] .csb-steps > .tbtn { display: inline-grid; place-items: center; width: 28px; min-width: 0; height: var(--xport-grid); padding: 0; border: 0; border-radius: var(--r-md); background: transparent; box-shadow: none; color: var(--ink-key); } #transport[data-layout="csb"] .csb-steps > .tbtn > svg { width: 18px; height: 18px; } #transport[data-layout="csb"] .csb-steps > .tbtn:hover { color: var(--fg); background: var(--state-hover, var(--glass-raise)); } #transport[data-layout="csb"] .csb-sec-tr .ro { position: relative; order: 0; flex: 0 0 auto; width: auto; min-width: 0; min-height: var(--xport-grid); justify-content: center; align-items: flex-start; padding: 0 4px; box-sizing: border-box; text-align: left; background: transparent; border: 0; box-shadow: none; } #transport[data-layout="csb"] .csb-sec-tr .ro.period { flex: 1 1 0; } #transport[data-layout="csb"] .csb-sec-tr .ro-val { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-small); } #transport[data-layout="csb"] .csb-sec-tr .ro-sub { display: none; } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) .csb-sec-tr .ro.period { order: -1; flex-basis: 100%; min-height: 0; } #transport[data-layout="csb"]:is(.docked, [data-place="free"]) .csb-sec-tr .trig:not(.tap) { flex-basis: calc(25% - 3px); } /* a card: the clock tiles four a line */ #transport[data-layout="csb"]:is(.docked, [data-place="free"]) .csb-surface .mir-bank-grid { --cell-min: 48px; } /* a card: four slots a line, eight in two */ #transport[data-layout="csb"] .csb-beat { position: absolute; top: 7px; right: -4px; } #transport[data-layout="csb"] .csb-sec-tr .trig { flex: 0 0 var(--xport-grid); width: var(--xport-grid); padding: 0 2px; } /* MACROS and FAVOURITES: the kit's knob banks (eight slots; a segment takes four) */ .csb-sec-mac .tempo-pane, .csb-favs { flex: 1 1 100%; min-width: 0; } #transport[data-layout="csb"] .csb-favs .pal-invert { width: var(--xport-grid); height: var(--xport-grid); } .csb-favs .pal-invert svg { transition: transform var(--motion-ui) var(--ease-out); } .csb-favs .pal-invert.on svg { transform: rotate(180deg); } /* METERS: LOW · MID · HIGH as LED bars and the beat equaliser's seven gains */ .csb-sec-met > .mir-section-body { flex-wrap: nowrap; align-items: stretch; flex: 1 1 auto; } .csb-sec-met .mir-meter { min-height: 64px; } .csb-sec-met .mir-meter-bar { width: 8px; } .csb-sec-met .csb-eqm .mir-meter-bar { width: 4px; } /* docked into the rack as a card */ #transport.docked { position: static; transform: none; width: auto; height: auto; flex-wrap: wrap; padding: 6px; gap: 6px; border: 0; box-shadow: none; background: transparent; } /* 0.6.6 G2 · THE TYPE BOX (lab/shell/transport.js): ASK swaps the centre for one line to Gemma; her answer echoes in the t readout's seat for 4 s */ #transport:not(.asking) .ask-seat, .ask-seat [hidden], #transport.asking :is(.ro.time, .ro.period, .native-info), #transport.mini:is(.asking, .echo) .fd, #transport.consent .native-play-row > :not(.ask-seat, .ask), #transport.echo :is(.ro.period, .native-info) { display: none; } #transport .ask-seat, #transport.echo .native-play-row > .ro.time { display: flex; flex: 1 1 auto; align-items: center; gap: 6px; min-width: 0; order: 1; grid-area: 3 / 1 / 4 / 6; } .ask-line { flex: 1 1 auto; min-width: 0; height: 28px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--glass-hairline); border-radius: var(--r-pill); background: var(--glass-well); color: var(--fg); font: var(--w-med) var(--fs-small)/1.2 var(--font-ui); } .ask-line::placeholder, .ask-note, #transport .ask-seat > .tbtn.ask-ok, #transport .tbtn.ask { width: auto; min-width: 0; padding: 0 6px; border-radius: var(--r-pill); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-small); } /* ── 021 G6 · λWAVES' VALUES OVER THE KIT'S TRANSPORT (mir/shell/transport.css), once copies of the kit's rules in skin.css. A value the kit reads through a token is that token here; the rules below the tokens are λWAVES' own (the open panel's edge and corners, the pill re-asserted over lab.css' .tbtn, MOD's lit accent, the docked card's flat seats and lit play / MOD, the knobs' hidden values), which no kit token carries — kept verbatim, in their old order. ── */ #transport { --xport-micro: 7px; } /* BPM and the Hz reading: 7 px on the bar (the kit's 8) */ #transport.docked { --xport-micro: 8px; } /* … 8 in the rack card */ #transport .native-tempo { order: 9; width: 100%; } /* 022 C2: its grid is THE SURFACE's (above) */ #transport.mini.tempo-open { width:min(640px,calc(100vw - 24px));height:auto;min-height:46px;padding-bottom:8px; } #transport .tempo-expand { position:relative;flex:0 0 72px;width:72px;height:34px;padding:4px 15px 4px 7px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr 1fr;column-gap:4px;align-items:center;border:1px solid var(--glass-hairline);border-radius:8px;background:var(--glass-well);box-shadow:var(--relief-well, var(--neu-inset));color:var(--fg-soft);touch-action:none; } #transport .tempo-expand:hover,#transport .tempo-expand:focus-visible { border-color:color-mix(in srgb,var(--acc2) 60%,transparent);background:var(--glass-raise);outline:0; } #transport .native-tempo { padding:8px;border-top:1px solid var(--glass-hairline);border-radius:0 0 10px 10px; } #transport.mini .tbtn.modb.on { color:var(--acc2); } #transport.docked .tbtn:not(.transport-home,.tempo-expand) { border:0;background:transparent;box-shadow:none;color:var(--ink-key); } #transport.docked .tbtn:not(.transport-home,.tempo-expand):hover { color:var(--fg);background:var(--state-hover,var(--glass-raise)); } #transport.docked .tbtn.modb.on { color:var(--acc2);background:transparent; } #transport .native-tempo .trig { min-width:0;height:44px;min-height:44px;padding:0 3px;justify-content:center;font-size:8.5px;letter-spacing:.04em; } /* the window's seats are 44 px; the clock tiles match */ #transport .k-val { display:none; } #transport .k:hover .k-val, #transport .k:focus-within .k-val, #transport .k.drag .k-val { display:block; } #transport.docked .tempo-expand { width:100%;background:hsl(var(--glass-tint) / 1);box-shadow:var(--relief-raise,var(--neu-raise)); } /* 021 V3 · THE NARROW STAGE (≤ 860 px: the racks stack, the right one at the foot): the old seat (left rack-w + 10, width auto) lost to the csb rules' weight, so the bar kept its 674 px, stretched from 112 px to 60 px above the foot over the rack and left PLAY off the edge. Now: under the top rack's cards, centred with PLAY (the pair 674 + 78 px; 39 px is half PLAY's seat), its own height */ @media (max-width:860px) { #transport.mini[data-layout="csb"],#transport.mini[data-layout="csb"].tempo-open { left:calc(50% + 39px);right:auto;top:calc(env(safe-area-inset-top) + 112px);bottom:auto;transform:translateX(-50%);max-width:calc(100vw - 102px); } } /* 022 E3 · BELOW 790 px ON A DESKTOP (a phone has its own layout) the stage bar and its PLAY are scaled about the bar's centre, so the pair stays on the screen down to ≈ 620 px (021 V3: PLAY clipped under 776); a transform, so the hit road, the mask and the resting box read the drawn rect */ @media (max-width:790px) { body:not(.phone) #transport.mini[data-layout="csb"] { transform:translateX(-50%) scale(.88);transform-origin:50% 0;max-width:none; } } @media (max-width:730px) { body:not(.phone) #transport.mini[data-layout="csb"] { transform:translateX(-50%) scale(.8);transform-origin:50% 0;max-width:none; } } /* 021 V3 · THE REDUCED-MOTION LIST CLOSED (REVIEW-C §3): PLAY's hover and press scale (023 B3) and INVERT's turn arrive at their end state at once (the system's setting or MIR OPTIONS' motion, ) */ @media (prefers-reduced-motion: reduce) { #transport[data-layout="csb"] .csb-play > .tbtn.play { transition: none; } .pal-invert svg { transition: none; } } :root:is([data-motion="reduced"], [data-motion="off"]) #transport[data-layout="csb"] .csb-play > .tbtn.play { transition: none; } :root:is([data-motion="reduced"], [data-motion="off"]) .pal-invert svg { transition: none; }