/* =========================================================================== Escalas — the scale laboratory of the Ejercicios module. Loaded after music-lab.css, practice-lab.css (the player shell, transport, fretboard) and practice-chords.css (instrument tabs, chips, keyboard, drum grid, facts, diatonic chord buttons). This file adds the exercise field, the wide layout, the recorrido, ahora/sigue, the scale cards and the focus mode. No colour is defined here: the notes use --ml-root-*, the rest the shared tokens, so the day and night themes both work. =========================================================================== */ /* Each note class also exposes its colour as --note, for filled discs whose text takes the page background (readable in both themes). */ .ml-sc .ml-root-c { --note: var(--ml-root-c); } .ml-sc .ml-root-cs { --note: var(--ml-root-cs); } .ml-sc .ml-root-d { --note: var(--ml-root-d); } .ml-sc .ml-root-ds { --note: var(--ml-root-ds); } .ml-sc .ml-root-e { --note: var(--ml-root-e); } .ml-sc .ml-root-f { --note: var(--ml-root-f); } .ml-sc .ml-root-fs { --note: var(--ml-root-fs); } .ml-sc .ml-root-g { --note: var(--ml-root-g); } .ml-sc .ml-root-gs { --note: var(--ml-root-gs); } .ml-sc .ml-root-a { --note: var(--ml-root-a); } .ml-sc .ml-root-as { --note: var(--ml-root-as); } .ml-sc .ml-root-b { --note: var(--ml-root-b); } .ml-sc { max-width: 1320px; } /* Flex rows below would beat the UA's [hidden] rule. */ .ml-sc__display[hidden], .ml-sc__subdiv[hidden] { display: none; } /* ── Header ───────────────────────────────────────────────────────────── */ .ml-sc__title { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-start; justify-content: space-between; } .ml-sc__title-main { min-width: 0; flex: 1 1 320px; } .ml-sc__scale-name { margin: 4px 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .ml-sc__scale-name strong { font: 700 clamp(1.25rem, 3vw, 1.6rem) "Space Grotesk", sans-serif; } .ml-sc__scale-name span { color: var(--ml-muted); font-size: 14px; } .ml-sc__pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: end; flex: 0 1 440px; min-width: min(100%, 300px); } .ml-sc__pick .ml-pl__badges { grid-column: 1 / -1; } .ml-sc__fav { width: 46px; height: 46px; border: 1px solid var(--ml-line-strong); border-radius: 12px; background: var(--ml-surface); } /* ── Exercise field: looks like a form field, opens a searchable list ── */ .ml-xp { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .ml-xp__label { font-size: 12px; color: var(--ml-muted); font-weight: 600; } .ml-xp__field { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 12px; border: 1px solid var(--ml-line-strong); border-radius: 12px; background: var(--ml-bg-2); color: var(--ml-text); font: inherit; text-align: left; cursor: pointer; } .ml-xp__field:hover { border-color: color-mix(in srgb, var(--ml-pink) 45%, var(--ml-line-strong)); } .ml-xp__field:focus-visible { outline: 2px solid var(--ml-coral); outline-offset: 2px; } .ml-xp__field[aria-expanded="true"] { border-color: var(--ml-pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ml-pink) 18%, transparent); } .ml-xp__icon { flex: none; display: grid; place-items: center; color: var(--ml-muted); } .ml-xp__text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .ml-xp__value { font: 600 15px "Space Grotesk", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ml-xp__meta { font-size: 12px; color: var(--ml-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ml-xp__chev { flex: none; color: var(--ml-muted); transition: transform .15s; } .ml-xp__field[aria-expanded="true"] .ml-xp__chev { transform: rotate(180deg); } /* The list lives in (moved by the script): fixed, above everything. */ .ml-xp__pop { position: fixed; z-index: 1200; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--ml-line-strong); border-radius: 16px; background: var(--ml-popover-bg, var(--ml-bg-2)); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); color: var(--ml-text); overflow: hidden; } .ml-xp__pop[hidden], .ml-xp__opt[hidden], .ml-xp__group[hidden] { display: none; } .ml-xp__head { display: none; align-items: center; justify-content: space-between; } .ml-xp__head strong { font: 700 16px "Space Grotesk", sans-serif; } .ml-xp__close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--ml-muted); cursor: pointer; } .ml-xp__search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--ml-line-strong); border-radius: 11px; background: var(--ml-surface); color: var(--ml-muted); } .ml-xp__search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ml-text); font: inherit; font-size: 16px; padding: 10px 0; } .ml-xp__search input:focus { outline: none; } .ml-xp__search:focus-within { border-color: var(--ml-pink); } .ml-xp__filters { display: flex; gap: 6px; flex-wrap: wrap; } .ml-xp__filters .ml-chip { cursor: pointer; font-family: inherit; min-height: 32px; } .ml-xp__filters .ml-chip.is-active { background: var(--ml-grad); color: #fff; border-color: transparent; } .ml-xp__filters .ml-chip:focus-visible { outline: 2px solid var(--ml-coral); outline-offset: 2px; } .ml-xp__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; } .ml-xp__group + .ml-xp__group { margin-top: 8px; } .ml-xp__group-name { position: sticky; top: 0; z-index: 1; padding: 6px 8px; font: 700 12px Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--ml-dim); background: var(--ml-popover-bg, var(--ml-bg-2)); } .ml-xp__group-name small { text-transform: none; letter-spacing: 0; font-weight: 500; margin-left: 6px; } .ml-xp__opt { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 32px; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; } .ml-xp__opt.is-active { background: var(--ml-surface-2); } .ml-xp__opt[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--ml-pink); background: color-mix(in srgb, var(--ml-pink) 10%, transparent); } .ml-xp__lvl { width: 8px; height: 8px; border-radius: 50%; background: var(--ml-accent, var(--ml-muted)); } .ml-xp__opt-text { display: flex; flex-direction: column; min-width: 0; } .ml-xp__name { font-weight: 600; font-size: 14px; } .ml-xp__desc { font-size: 12px; color: var(--ml-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ml-xp__level { font-size: 11px; color: var(--ml-dim); white-space: nowrap; } .ml-xp__star { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--ml-dim); } .ml-xp__star:hover { color: var(--ml-amber); background: var(--ml-surface); } .ml-xp__opt.is-fav .ml-xp__star { color: var(--ml-amber); } .ml-xp__opt.is-fav .ml-xp__star svg { fill: currentColor; } .ml-xp__empty { margin: 4px 8px; font-size: 13px; color: var(--ml-muted); } .ml-xp__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--ml-line); font-size: 12px; color: var(--ml-dim); } .ml-xp__foot a { color: var(--ml-pink); font-weight: 600; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; } .ml-xp__foot a:hover { text-decoration: underline; } .ml-xp__backdrop { position: fixed; inset: 0; z-index: 1190; background: rgba(0, 0, 0, .45); } .ml-xp__backdrop[hidden] { display: none; } /* Phone: the same list as a bottom sheet (still one field on the page). */ .ml-xp__pop.is-sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: min(82vh, 640px); border-radius: 18px 18px 0 0; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); } .ml-xp__pop.is-sheet .ml-xp__head { display: flex; } .ml-xp__pop.is-sheet .ml-xp__keys { display: none; } .ml-xp__pop.is-sheet .ml-xp__opt { padding: 10px 6px; } /* ── Layout: sections across the width (no side column) ───────────────── */ .ml-sc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .ml-sc__setup { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .ml-sc__grid > * { min-width: 0; } .ml-sc__config { align-items: flex-end; } .ml-sc__field { flex: 1 1 150px; min-width: 0; } .ml-sc__field .ml-input { width: 100%; } .ml-sc__field--tonic { flex: 0 1 130px; } .ml-sc__field--wide { flex: 2 1 240px; } .ml-sc__scale-line { flex-basis: 100%; } .ml-sc__steps-key { font-size: 12px; color: var(--ml-dim); } /* Modes and transport on one band. */ .ml-sc__controls { display: grid; gap: 10px; } .ml-sc__deck { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .ml-sc__deck .ml-pl__transport { flex: 0 1 auto; } .ml-sc__deck .ml-pl__tempo { flex: 0 0 auto; margin-left: 6px; } .ml-sc__deck .ml-pl__range { flex: 1 1 200px; width: auto; } .ml-sc__deck .ml-pl__audio-hint { flex-basis: 100%; } .ml-sc__subdiv { flex-direction: row; align-items: center; gap: 8px; } /* ── Stage ────────────────────────────────────────────────────────────── */ .ml-sc__stage-body { display: flex; flex-direction: column; gap: 12px; min-height: 180px; } .ml-sc__stage-sub { color: var(--ml-muted); } .ml-sc__board .ml-fb { min-width: 480px; } .ml-sc__stage[data-instrument="bajo"] .ml-sc__board .ml-fb { min-width: 440px; } .ml-sc__board--fit .ml-fb, .ml-sc__stage[data-instrument="bajo"] .ml-sc__board--fit .ml-fb { min-width: 0; } .ml-sc__display { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; } .ml-sc__display-label { font-size: 12px; font-weight: 600; color: var(--ml-muted); } .ml-seg__b:disabled { opacity: .45; cursor: not-allowed; } /* The tonic: a thicker ring and a visible halo, not only its colour. */ .ml-sc .ml-fb__dot.is-root .ml-fb__disc { stroke-width: 4; } .ml-sc .ml-fb__dot.is-root .ml-fb__halo { opacity: .22; } .ml-sc .ml-fb__dot.is-root.is-active .ml-fb__halo { opacity: .4; } /* A degree to find: a dashed outer ring. */ .ml-sc .ml-fb__dot.is-target .ml-fb__halo { opacity: 1; fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 4 3; } /* Outside the chord of the tonic (bass): quieter, still there. */ .ml-sc .ml-fb__dot.is-soft { opacity: .38; } /* Guided mode: the next note is announced before it arrives. */ .ml-sc .ml-fb__dot.is-next .ml-fb__disc { stroke-dasharray: 5 3; stroke-width: 3; } .ml-sc .ml-fb__dot.is-next .ml-fb__halo { opacity: .14; } .ml-sc .ml-kb__key.is-next .ml-kb__dot { stroke: var(--ml-coral); stroke-dasharray: 2 1.5; stroke-width: 1.6; } .ml-sc .ml-pl__tabcell.is-next { outline: 1.5px dashed var(--ml-coral); outline-offset: -1px; } /* The position on the whole neck (Mapa). */ .ml-fb__band { fill: color-mix(in srgb, var(--ml-pink) 8%, transparent); stroke: color-mix(in srgb, var(--ml-pink) 55%, transparent); stroke-width: 1.5; stroke-dasharray: 6 4; } .ml-sc__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ml-muted); } .ml-sc__legend li { display: inline-flex; align-items: center; gap: 7px; } .ml-sc__key { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ml-muted); background: var(--ml-bg-2); } .ml-sc__key.is-root { border-width: 4px; border-color: var(--ml-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ml-text) 18%, transparent); } .ml-sc__key.is-target { border-style: dashed; } .ml-sc__key.is-dim { border-style: dotted; opacity: .6; } .ml-sc__key.is-soft { opacity: .38; } .ml-sc__chordtones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--ml-muted); } .ml-sc__chordtones b { color: var(--ml-text); } /* Piano: one keyboard per hand. */ .ml-sc__keys { display: grid; gap: 12px; } .ml-sc__hand h3, .ml-sc__theory h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ml-dim); margin: 0 0 6px; } .ml-sc__keys .ml-kb { max-height: 230px; } /* Teoría. */ .ml-sc__theory { display: flex; flex-direction: column; gap: 12px; } .ml-sc__theory .ml-kb { max-width: 420px; } /* TAB: the run, one column per step. */ .ml-sc__tabwrap { overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; } .ml-sc__tab .ml-pl__tabcell { width: 24px; } .ml-sc__tab .ml-pl__tabcell.is-group-start { margin-left: 10px; } /* Drums: who plays the scale over the groove. */ .ml-sc__soloist { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; font-size: 13px; color: var(--ml-muted); } /* ── Ahora / Sigue ────────────────────────────────────────────────────── */ .ml-sc__now { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; } .ml-sc__nowcard { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--ml-line); border-radius: 16px; background: var(--ml-surface); min-width: 0; } .ml-sc__nowrow { display: flex; align-items: center; gap: 14px; min-width: 0; } .ml-sc__bigdisc { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--note, var(--ml-surface-2)); color: var(--ml-bg); font: 700 1.45rem "Space Grotesk", sans-serif; box-shadow: 0 0 0 4px color-mix(in srgb, var(--note, transparent) 25%, transparent); } .ml-sc__bigdisc--next { width: 50px; height: 50px; font-size: 1.1rem; } .ml-sc__bigdisc.is-chord { width: auto; min-width: 64px; padding: 0 12px; border-radius: 32px; font-size: 1.15rem; } .ml-sc__bigdisc--next.is-chord { min-width: 50px; border-radius: 25px; } .ml-sc__nowfacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 4px 12px; margin: 0; min-width: 0; flex: 1; } .ml-sc__nowfacts div { min-width: 0; } .ml-sc__nowfacts dt { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ml-dim); } .ml-sc__nowfacts dd { margin: 0; font-weight: 600; font-size: 13.5px; color: var(--ml-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Recorrido ────────────────────────────────────────────────────────── */ .ml-sc__track { list-style: none; margin: 0; padding: 4px 2px 8px; gap: 4px; } .ml-sc__cell { flex: none; display: grid; justify-items: center; gap: 3px; min-width: 42px; padding: 6px 4px; border-radius: 12px; position: relative; transition: background .12s, transform .12s; } .ml-sc__cell + .ml-sc__cell::before { content: ""; position: absolute; left: -5px; top: 22px; width: 6px; height: 6px; border-top: 1.5px solid var(--ml-dim); border-right: 1.5px solid var(--ml-dim); transform: rotate(45deg); opacity: .6; } .ml-sc__cell.is-group-start { margin-left: 12px; } .ml-sc__cell.is-group-start::before { display: none; } .ml-sc__disc { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 4px; border-radius: 17px; background: var(--note, var(--ml-surface-2)); color: var(--ml-bg); font: 700 13px "Space Grotesk", sans-serif; } .ml-sc__disc.is-root { box-shadow: 0 0 0 2px var(--ml-surface), 0 0 0 4px var(--ml-text); } .ml-sc__deg { font: 700 12px "Space Grotesk", sans-serif; color: var(--ml-muted); } .ml-sc__stroke { font-size: 13px; color: var(--ml-dim); line-height: 1; } .ml-sc__cell.is-active { background: var(--ml-surface-2); transform: translateY(-2px); } .ml-sc__cell.is-active .ml-sc__disc { box-shadow: 0 0 0 2px var(--ml-surface), 0 0 0 4px var(--ml-coral); } .ml-sc__cell.is-active .ml-sc__deg { color: var(--ml-text); } .ml-sc__cell.is-next .ml-sc__disc { outline: 2px dashed color-mix(in srgb, var(--ml-coral) 70%, transparent); outline-offset: 2px; } .ml-sc__cell--bar { min-width: 76px; padding: 8px 10px; border: 1px solid var(--ml-line); background: var(--ml-bg-2); } .ml-sc__cell--bar::before { display: none; } .ml-sc__cell--bar .ml-chord { font: 700 1.05rem "Space Grotesk", sans-serif; } .ml-sc__cell--bar.is-active { border-color: transparent; background: var(--ml-grad); } .ml-sc__cell--bar.is-active .ml-chord, .ml-sc__cell--bar.is-active .ml-sc__deg { color: #fff; } /* ── Cards ────────────────────────────────────────────────────────────── */ .ml-sc__card { border: 1px solid var(--ml-line); border-radius: 16px; background: var(--ml-surface); padding: 14px 16px; } .ml-sc__card h2 { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--ml-dim); margin: 0 0 10px; } .ml-sc__card .ml-pl__seq-head h2 { margin: 0; } /* Audio de práctica. */ .ml-sc__acc { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .ml-sc__radio { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px; border: 1px solid var(--ml-line); border-radius: 11px; cursor: pointer; font-size: 14px; } .ml-sc__radio input { width: 18px; height: 18px; accent-color: var(--ml-pink); margin: 0; } .ml-sc__radio:has(input:checked) { border-color: color-mix(in srgb, var(--ml-pink) 55%, transparent); background: color-mix(in srgb, var(--ml-pink) 8%, transparent); } .ml-sc__radio:focus-within { outline: 2px solid var(--ml-coral); outline-offset: 2px; } .ml-sc__vols { margin-top: 10px; max-width: none; } .ml-sc__vols label { grid-template-columns: 116px 1fr; } /* Fórmula: degrees with the distance between them. */ .ml-sc__formula { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 2px; margin: 0 0 12px; } .ml-sc__fnote { display: grid; justify-items: center; gap: 2px; } .ml-sc__fnote small { font-size: 11.5px; color: var(--ml-muted); font-weight: 600; } .ml-sc__fdisc { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--note, var(--ml-surface-2)); color: var(--ml-bg); font: 700 12px "Space Grotesk", sans-serif; } .ml-sc__fstep { align-self: center; margin-top: -16px; padding: 0 3px; font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ml-muted); } .ml-sc__fstep.is-half { color: var(--ml-coral); } .ml-sc__formula--big .ml-sc__fdisc { width: 38px; height: 38px; font-size: 14px; } .ml-sc__formula--big .ml-sc__fstep { margin-top: -18px; font-size: 13px; padding: 0 6px; } .ml-sc__facts { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } /* Relaciones. */ .ml-sc__rel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; } .ml-sc__rel-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 9px 12px; border: 1px solid var(--ml-line); border-radius: 12px; background: var(--ml-bg-2); color: var(--ml-text); font: inherit; text-align: left; cursor: pointer; } .ml-sc__rel-item small { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ml-dim); } .ml-sc__rel-item strong { font: 600 14px "Space Grotesk", sans-serif; } .ml-sc__rel-item:hover { border-color: color-mix(in srgb, var(--ml-pink) 50%, transparent); } .ml-sc__rel-item:focus-visible { outline: 2px solid var(--ml-coral); outline-offset: 2px; } .ml-sc__chords-head { align-items: center; flex-wrap: wrap; gap: 8px; } .ml-sc__chords-head h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ml-dim); margin: 0; } .ml-sc__chords { margin-top: 6px; } .ml-sc__chords .ml-ch__deg { text-decoration: none; } .ml-sc__chords .ml-ch__deg:focus-visible { outline: 2px solid var(--ml-coral); outline-offset: 2px; } /* Progreso. */ .ml-sc__pos { display: flex; justify-content: space-between; font-size: 13px; color: var(--ml-muted); } .ml-sc__pos strong { color: var(--ml-text); } .ml-sc__bar { height: 6px; border-radius: 3px; background: var(--ml-surface-2); margin: 6px 0 12px; overflow: hidden; } .ml-sc__bar i { display: block; height: 100%; width: 0; background: var(--ml-grad); transition: width .15s linear; } .ml-sc__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0 0 10px; } .ml-sc__stats dt { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ml-dim); } .ml-sc__stats dd { margin: 0; font: 700 15px "Space Grotesk", sans-serif; color: var(--ml-text); } .ml-sc__tip { color: var(--ml-muted); font-size: 13.5px; margin: 0 0 10px; } /* ── Focus mode: the instrument, the recorrido and the transport ─────── */ .ml-sc.is-focus .ml-sc__head, .ml-sc.is-focus .ml-sc__setup, .ml-sc.is-focus .ml-sc__audio, .ml-sc.is-focus .ml-sc__info, .ml-sc.is-focus .ml-sc__rel, .ml-sc.is-focus .ml-sc__progress, .ml-sc.is-focus .ml-sc__tips, .ml-sc.is-focus .ml-pl__mode-hint { display: none; } /* ── Responsive ───────────────────────────────────────────────────────── */ @media (min-width: 760px) { .ml-sc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "setup setup" "controls controls" "stage stage" "now now" "run run" "audio info" "rel rel" "progress tips"; } .ml-sc__setup { grid-area: setup; } .ml-sc__controls { grid-area: controls; } .ml-sc__stage { grid-area: stage; } .ml-sc__now { grid-area: now; } .ml-sc__run { grid-area: run; } .ml-sc__audio { grid-area: audio; } .ml-sc__info { grid-area: info; } .ml-sc__rel { grid-area: rel; } .ml-sc__progress { grid-area: progress; } .ml-sc__tips { grid-area: tips; } } @media (min-width: 1100px) { /* The recorrido gets the room it has: bigger notes. */ .ml-sc__cell { min-width: 50px; } .ml-sc__disc { min-width: 42px; height: 42px; border-radius: 21px; font-size: 15px; } .ml-sc__cell + .ml-sc__cell::before { top: 26px; } .ml-sc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "setup setup setup" "controls controls controls" "stage stage stage" "now now now" "run run run" "audio info progress" "rel rel tips"; gap: 16px; } .ml-sc__controls { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); align-items: start; column-gap: 16px; } .ml-sc__controls .ml-pl__modes { grid-template-columns: repeat(4, 1fr); } .ml-sc__controls .ml-pl__mode-hint { grid-column: 1; } .ml-sc__controls .ml-sc__deck { grid-column: 2; grid-row: 1 / span 2; } } @media (max-width: 759px) { /* Phone order: setup, controls, the instrument right away, then ahora/sigue. */ .ml-sc__pick { flex-basis: 100%; } .ml-sc__instr-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .ml-sc__instr-bar .ml-ch__instr-tab { flex-direction: column; gap: 3px; padding: 8px 4px; font-size: 12.5px; } .ml-sc__now { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .ml-sc__nowcard { padding: 10px; } .ml-sc__nowrow { flex-direction: column; align-items: flex-start; gap: 8px; } .ml-sc__nowfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .ml-sc__bigdisc { width: 52px; height: 52px; font-size: 1.2rem; } .ml-sc__bigdisc--next { width: 44px; height: 44px; font-size: 1rem; } .ml-sc__field, .ml-sc__field--tonic { flex: 1 1 42%; } .ml-sc__field--wide { flex-basis: 100%; } .ml-sc__deck .ml-pl__transport { flex-basis: 100%; } .ml-sc__deck .ml-pl__tempo { margin-left: auto; } /* Segmented controls fill their row instead of running off it. */ .ml-sc__config .ml-pl__field { flex-basis: 100%; } .ml-sc__config .ml-sc__field, .ml-sc__config .ml-sc__field--tonic { flex-basis: 42%; } .ml-sc__config .ml-sc__field--wide { flex-basis: 100%; } .ml-sc__config .ml-seg { display: flex; } .ml-sc__config .ml-seg__b, .ml-sc__display .ml-seg__b { flex: 1; min-width: 0; } .ml-sc__display .ml-seg { flex: 1; display: flex; } .ml-sc .ml-pl__modes { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 380px) { /* The narrowest phones: segment labels may wrap rather than overflow. */ .ml-sc__config .ml-seg__b { white-space: normal; padding: 8px 4px; line-height: 1.2; } } @media (prefers-reduced-motion: reduce) { .ml-sc__cell, .ml-sc__bar i, .ml-xp__chev { transition: none; } }