/* tuner.css — the Tune view recreation (js/components/tuner.js), in the app's two modes.
   Simple (default): readout + needle, the guide card, level row, keyboard. Advanced (the switch): adds the action row,
   partial / B chips, strobe, spectrum and details.
   Sizes follow App/Theme.swift, scaled to the container: the app has desktop min-widths, the web scales instead. */

.rc-tuner { container-type: inline-size; container-name: rc-tuner; font-family: var(--font-ui); font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.3; }
.rc-tuner .rc-fallback { padding: clamp(20px, 4vw, 40px); color: var(--text-2); font-size: var(--step-0); line-height: 1.6; max-width: 62ch; }

.rc-tuner .rc-tuner__root { position: relative; display: grid; gap: 10px; min-width: 0; align-content: start;
  --rc-tone: var(--text-2); }
.rc-tuner .rc-tuner__root[data-tone="flat"] { --rc-tone: var(--flat); }
.rc-tuner .rc-tuner__root[data-tone="sharp"] { --rc-tone: var(--sharp); }
.rc-tuner .rc-tuner__root[data-tone="intune"] { --rc-tone: var(--in-tune); }

.rc-tuner .rc-tuner__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch; }
.rc-tuner .rc-tuner__left { display: grid; gap: 8px; min-width: 0; align-content: start; }
.rc-tuner .rc-tuner__right { display: grid; gap: 8px; min-width: 0; grid-template-columns: minmax(0, 1fr); align-content: start; }
.rc-tuner .rc-tuner__extras { display: grid; gap: 8px; min-width: 0; grid-template-columns: minmax(0, 1fr); }

/* ---------- The "Advanced mode" switch (Settings › Tuning behaviour). Quiet, top right, off by default. ---------- */
.rc-tuner .rc-tuner__switch { position: absolute; top: -4px; right: 0; z-index: 3; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 2px 0 10px; border-radius: 20px;
  font-size: 0.8125rem; font-weight: 550; color: var(--text-2); transition: color var(--t-state) var(--ease); }
.rc-tuner .rc-tuner__switch:hover, .rc-tuner .rc-tuner__switch[aria-checked="true"] { color: var(--text); }
.rc-tuner .rc-tuner__switchtrack { position: relative; flex: none; width: 36px; height: 22px; border-radius: 11px; background: var(--surface-2); box-shadow: inset 0 0 0 1px rgb(232 234 240 / 0.2);
  transition: background-color var(--t-state) var(--ease), box-shadow var(--t-state) var(--ease); }
.rc-tuner .rc-tuner__switchtrack i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-2);
  transition: transform var(--t-state) var(--ease), background-color var(--t-state) var(--ease); }
.rc-tuner .rc-tuner__switch:hover .rc-tuner__switchtrack { box-shadow: inset 0 0 0 1px rgb(232 234 240 / 0.38); }
.rc-tuner .rc-tuner__switch[aria-checked="true"] .rc-tuner__switchtrack { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.rc-tuner .rc-tuner__switch[aria-checked="true"] .rc-tuner__switchtrack i { transform: translateX(14px); background: #fff; }
.rc-tuner .rc-tuner__switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 20px; }

/* ---------- Readout (ReadoutView + NoteNameView) ---------- */
.rc-tuner .rc-tuner__readout { display: grid; gap: 6px; min-width: 0; }
.rc-tuner .rc-tuner__note { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: clamp(56px, 13cqw, 88px); line-height: 0.95; letter-spacing: -0.01em; }
.rc-tuner .rc-tuner__oct { font-size: 0.5em; font-weight: 600; color: var(--text-2); }
.rc-tuner .rc-tuner__hint { margin-top: 4px; font-size: 0.9375rem; color: var(--text-2); }
.rc-tuner .rc-tuner__row2 { display: flex; align-items: baseline; gap: 14px; color: var(--rc-tone); transition: color var(--t-state) var(--ease), opacity var(--t-state) var(--ease); min-height: 1em; font-size: clamp(44px, 10cqw, 66px); line-height: 1; }
.rc-tuner .rc-tuner__cents { font-weight: 600; letter-spacing: -0.01em; }
.rc-tuner .rc-tuner__word { font-size: clamp(19px, 4.2cqw, 26px); font-weight: 600; letter-spacing: 0.02em; }
.rc-tuner .rc-tuner__root[data-state="decayed"] .rc-tuner__row2 { opacity: 0.6; }
.rc-tuner .rc-tuner__row3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; font-size: clamp(19px, 4.2cqw, 26px); font-weight: 600; min-height: 1.3em; }
.rc-tuner .rc-tuner__arrow { color: var(--rc-tone); transition: color var(--t-state) var(--ease); }
.rc-tuner .rc-tuner__arrow:empty { display: none; }
.rc-tuner .rc-tuner__root[data-tone="idle"] .rc-tuner__phrase { color: var(--text-2); }
.rc-tuner .rc-tuner__rowcap { font-size: 0.8125rem; font-weight: 400; color: var(--text-2); margin-left: 4px; }

.rc-tuner .rc-tuner__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; min-height: 22px; }
/* StateBadge: capsule, colour at 15 % with a 50 % stroke, 13 pt medium, height 22 */
.rc-tuner .rc-tuner__badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 0.8125rem; font-weight: 550; white-space: nowrap; color: var(--text-2);
  background: color-mix(in srgb, currentColor 15%, transparent); border: 1px solid color-mix(in srgb, currentColor 50%, transparent); }
.rc-tuner .rc-tuner__badge--accent { color: var(--accent); }
.rc-tuner .rc-tuner__badge--measured { color: var(--measured); }
.rc-tuner .rc-tuner__badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.rc-tuner .rc-tuner__dots { display: inline-flex; gap: 4px; padding: 0 2px; }
.rc-tuner .rc-tuner__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); opacity: 0.3; transition: background-color var(--t-state) var(--ease), opacity var(--t-state) var(--ease); }
.rc-tuner .rc-tuner__dots[data-level="1"] i:nth-child(-n+1),
.rc-tuner .rc-tuner__dots[data-level="2"] i:nth-child(-n+2),
.rc-tuner .rc-tuner__dots[data-level="3"] i:nth-child(-n+3) { background: var(--in-tune); opacity: 1; }

/* ---------- Buttons (TuneActionRow: chip font, bordered) ---------- */
.rc-tuner .rc-tuner__btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; min-width: 40px; padding: 0 14px; border-radius: var(--radius-chip);
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text); font-size: 0.8125rem; font-weight: 600; white-space: nowrap;
  transition: background-color var(--t-state) var(--ease), border-color var(--t-state) var(--ease), opacity var(--t-state) var(--ease), transform var(--t-state) var(--ease); }
.rc-tuner .rc-tuner__btn svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rc-tuner .rc-tuner__btn:hover:not(:disabled) { border-color: rgb(232 234 240 / 0.34); }
.rc-tuner .rc-tuner__btn:active:not(:disabled), .rc-tuner .rc-tuner__btn.is-pressed { transform: scale(0.97); }
.rc-tuner .rc-tuner__btn:disabled { opacity: 0.42; cursor: default; }
.rc-tuner .rc-tuner__btn--icon { padding: 0; }
.rc-tuner .rc-tuner__btn--prominent { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.rc-tuner .rc-tuner__btn--prominent.is-pressed { background: var(--in-tune); border-color: var(--in-tune); }
.rc-tuner .rc-tuner__btn--strike { background: transparent; border-color: color-mix(in srgb, var(--reference) 55%, transparent); color: var(--reference); }
.rc-tuner .rc-tuner__btn--strike svg { fill: currentColor; stroke: none; }
.rc-tuner .rc-tuner__btn--strike:hover { background: var(--reference-soft); border-color: var(--reference) !important; }
.rc-tuner .rc-tuner__btn--ghost { background: transparent; color: var(--text-2); }
.rc-tuner .rc-tuner__btn--ghost svg { fill: currentColor; stroke: none; width: 12px; height: 12px; }
.rc-tuner .rc-tuner__btn--ghost:hover { color: var(--text); }
.rc-tuner .rc-tuner__actions { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; }
.rc-tuner .rc-tuner__count { margin-left: auto; font-size: 0.8125rem; color: var(--text-2); }

/* ---------- Needle + strobe ---------- */
.rc-tuner .rc-tuner__needle { aspect-ratio: 600 / 220; position: relative; }
.rc-tuner .rc-tuner__strobe { aspect-ratio: 600 / 40; position: relative; }
.rc-tuner .rc-tuner__needle canvas, .rc-tuner .rc-tuner__strobe canvas, .rc-tuner .rc-tuner__specbox canvas, .rc-tuner .rc-tuner__keys canvas, .rc-tuner .rc-tuner__meter canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* ---------- Cards (CardView: padding 16, surface, radius 10, hairline) ---------- */
.rc-tuner .rc-tuner__card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); }
.rc-tuner .rc-tuner__cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rc-tuner .rc-tuner__cardtitle { font-family: var(--font-ui); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.rc-tuner .rc-tuner__cardcap { font-size: 0.8125rem; color: var(--text-2); }

/* ---------- The guide card (TuneGuideCard): one note, one step, plain words ---------- */
.rc-tuner .rc-tuner__guide { gap: 12px; padding: 16px 16px 8px; }
.rc-tuner .rc-tuner__ghead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.rc-tuner .rc-tuner__gname { font-size: 1.5rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.005em; }
.rc-tuner .rc-tuner__gstep, .rc-tuner .rc-tuner__gcount { font-size: 0.8125rem; color: var(--text-2); white-space: nowrap; }
.rc-tuner .rc-tuner__gcount { margin-left: auto; }
.rc-tuner .rc-tuner__gcaps { display: inline-flex; gap: 4px; align-self: center; }
.rc-tuner .rc-tuner__gcaps i { width: 18px; height: 4px; border-radius: 2px; background: var(--hairline); transition: background-color var(--t-state) var(--ease); }
.rc-tuner .rc-tuner__gcaps i.is-on { background: var(--accent); }
/* Every step of the note lies in the same grid cell; only one shows. The card keeps the height of its tallest step,
   so nothing under it moves while the guide walks on. */
.rc-tuner .rc-tuner__gstack { display: grid; grid-template-columns: minmax(0, 1fr); }
.rc-tuner .rc-tuner__gpanel { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; opacity: 0; visibility: hidden;
  transition: opacity var(--t-state) var(--ease), visibility 0s linear var(--t-state); }
.rc-tuner .rc-tuner__gpanel.is-active { opacity: 1; visibility: visible; transition: opacity var(--t-state) var(--ease), visibility 0s; }
.rc-tuner .rc-tuner__gpanel--ghost { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }
.rc-tuner .rc-tuner__gtitle { font-family: var(--font-ui); font-size: 1.375rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; text-wrap: balance; }
.rc-tuner .rc-tuner__gbody { font-size: 0.9375rem; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.rc-tuner .rc-tuner__gstatus { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 8px;
  font-size: 0.8125rem; line-height: 1.4; color: var(--text-2); }
.rc-tuner .rc-tuner__gstatus[data-kind="good"] { font-size: 0.9375rem; font-weight: 600; color: var(--in-tune); }
.rc-tuner .rc-tuner__gstatus[data-kind="warn"] { font-size: 0.9375rem; font-weight: 600; color: var(--warn); }
.rc-tuner .rc-tuner__gicon { display: grid; place-items: center; width: 20px; height: 1.4em; }
.rc-tuner .rc-tuner__gstatus[data-icon="none"] .rc-tuner__gicon { display: none; }
.rc-tuner .rc-tuner__gstatus[data-icon="none"] > span:last-child { grid-column: 1 / -1; }
.rc-tuner .rc-tuner__gicon > * { display: none; }
.rc-tuner .rc-tuner__gcheck { width: 18px; height: 18px; }
.rc-tuner .rc-tuner__gstatus[data-icon="line"] .rc-tuner__gcheck--line,
.rc-tuner .rc-tuner__gstatus[data-icon="fill"] .rc-tuner__gcheck--fill,
.rc-tuner .rc-tuner__gstatus[data-icon="wob"] .rc-tuner__wob { display: block; }
/* The wobble lamp: silent stand-in for what the ear hears. It swells and fades at the printed rate (--rc-wob 0…1, set per frame). */
.rc-tuner .rc-tuner__wob { --rc-wob: 0; position: relative; width: 18px; height: 18px; }
.rc-tuner .rc-tuner__wob::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--warn); opacity: calc(0.08 + 0.26 * var(--rc-wob)); transform: scale(calc(0.55 + 0.45 * var(--rc-wob))); }
.rc-tuner .rc-tuner__wob::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--warn); opacity: calc(0.3 + 0.7 * var(--rc-wob)); }
/* Borderless buttons in the caption font, right-aligned (the app: Spacer, then the three) */
.rc-tuner .rc-tuner__gbtns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 2px; margin: -4px -8px 0 0; }
.rc-tuner .rc-tuner__textbtn { min-height: 40px; padding: 0 9px; border-radius: var(--radius-chip); font-size: 0.8125rem; font-weight: 550; color: var(--text-2); white-space: nowrap;
  transition: color var(--t-state) var(--ease), background-color var(--t-state) var(--ease), opacity var(--t-state) var(--ease); }
.rc-tuner .rc-tuner__textbtn:first-child { color: var(--accent); }
.rc-tuner .rc-tuner__textbtn:hover:not(:disabled) { color: var(--text); background: rgb(232 234 240 / 0.06); }
.rc-tuner .rc-tuner__textbtn:disabled { opacity: 0.4; cursor: default; }
.rc-tuner .rc-tuner__textbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- Mute diagram (MuteDiagramView) — drawn as in css/components/wizard.css ---------- */
.rc-tuner .rc-tuner__diagram { display: grid; justify-items: center; }
.rc-tuner .rc-tuner__diagram svg { width: 100%; max-width: 336px; height: auto; aspect-ratio: 336 / 160; overflow: visible; }
.rc-tuner .rc-tuner__dstr { fill: var(--text); }
.rc-tuner .rc-tuner__dstr--nb { opacity: 0.28; }
.rc-tuner .rc-tuner__dstr--ref { fill: var(--reference); }
.rc-tuner .rc-tuner__dwedge { fill: var(--warn); stroke: var(--warn); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.rc-tuner .rc-tuner__dsplit { fill: var(--warn); }
.rc-tuner .rc-tuner__dplate { fill: var(--text-2); }
.rc-tuner .rc-tuner__dcap { font-family: var(--font-ui); font-size: 11px; font-weight: 600; fill: var(--text-2); }
.rc-tuner .rc-tuner__dcap--nb { opacity: 0.7; }
.rc-tuner .rc-tuner__dcap--ref { fill: var(--reference); }
.rc-tuner .rc-tuner__dcap--warn { fill: var(--warn); }
.rc-tuner .rc-tuner__dfoot { font-family: var(--font-ui); font-size: 13px; fill: var(--text-2); }

/* ---------- The tuning pin ---------- */
.rc-tuner .rc-tuner__controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 10px 14px; border-radius: var(--radius); border: 1px dashed color-mix(in srgb, var(--reference) 30%, transparent); background: linear-gradient(90deg, rgb(255 180 84 / 0.05), transparent 60%); }
.rc-tuner .rc-tuner__pin { display: grid; gap: 2px; min-width: 0; }
.rc-tuner .rc-tuner__pinlabel { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--reference); }
.rc-tuner .rc-tuner__rail { position: relative; height: 40px; display: grid; align-items: center; }
.rc-tuner .rc-tuner__rail::before { content: ""; position: absolute; left: 15px; right: 15px; top: 50%; height: 9px; margin-top: -4.5px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px calc(100% / 12)); border-right: 1px solid var(--hairline); }
.rc-tuner .rc-tuner__rail::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.5px; height: 17px; margin: -8.5px 0 0 -0.75px; background: var(--in-tune); border-radius: 1px; pointer-events: none; }
.rc-tuner .rc-tuner__range { -webkit-appearance: none; appearance: none; position: relative; z-index: 1; width: 100%; height: 40px; margin: 0; background: transparent; cursor: grab; touch-action: pan-y; --rc-pin-rot: 0deg; }
.rc-tuner .rc-tuner__range:active { cursor: grabbing; }
.rc-tuner .rc-tuner__range::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgb(255 180 84 / 0.15), rgb(255 180 84 / 0.7) 50%, rgb(255 180 84 / 0.15)); }
.rc-tuner .rc-tuner__range::-moz-range-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgb(255 180 84 / 0.15), rgb(255 180 84 / 0.7) 50%, rgb(255 180 84 / 0.15)); }
/* The thumb is the pin seen end-on: copper body, square tuning-lever head that turns with the value. */
.rc-tuner .rc-tuner__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -13.5px; border-radius: 50%; border: 1px solid rgb(0 0 0 / 0.55);
  background: linear-gradient(var(--bg), var(--bg)) center / 10px 10px no-repeat, radial-gradient(circle at 35% 30%, var(--reference), var(--copper) 55%, var(--copper-deep));
  box-shadow: 0 0 0 1px rgb(255 180 84 / 0.35), 0 3px 10px rgb(0 0 0 / 0.6); transform: rotate(var(--rc-pin-rot)); }
.rc-tuner .rc-tuner__range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgb(0 0 0 / 0.55);
  background: linear-gradient(var(--bg), var(--bg)) center / 10px 10px no-repeat, radial-gradient(circle at 35% 30%, var(--reference), var(--copper) 55%, var(--copper-deep));
  box-shadow: 0 0 0 1px rgb(255 180 84 / 0.35), 0 3px 10px rgb(0 0 0 / 0.6); transform: rotate(var(--rc-pin-rot)); }
.rc-tuner .rc-tuner__range:focus-visible { outline: none; }
.rc-tuner .rc-tuner__range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 3px; }
.rc-tuner .rc-tuner__range:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 3px; }
.rc-tuner .rc-tuner__scale { display: grid; grid-template-columns: 1fr auto 1fr; font-size: 0.6875rem; color: var(--text-2); padding: 0 2px; }
.rc-tuner .rc-tuner__scale span:last-child { text-align: right; }

/* ---------- Advanced: spectrum + details ---------- */
.rc-tuner .rc-tuner__specbox { position: relative; flex: 1 1 auto; height: 160px; min-height: 150px; }
.rc-tuner .rc-tuner__details { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); column-gap: 28px; overflow: hidden; font-family: var(--font-mono); font-size: 0.75rem; }
.rc-tuner .rc-tuner__details div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; margin-top: -1px; border-top: 1px solid var(--hairline); }
.rc-tuner .rc-tuner__details dt { color: var(--text-2); }
.rc-tuner .rc-tuner__details dd { margin: 0; color: var(--text); text-align: right; white-space: nowrap; }
.rc-tuner .rc-tuner__card--details { display: none; }

/* ---------- Level row ---------- */
.rc-tuner .rc-tuner__level { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 0.8125rem; color: var(--text-2); min-width: 0; }
.rc-tuner .rc-tuner__level > svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.rc-tuner .rc-tuner__meter { position: relative; flex: 0 1 260px; min-width: 60px; height: 6px; }
.rc-tuner .rc-tuner__db { flex: none; min-width: 5.2em; }
.rc-tuner .rc-tuner__engine { margin-left: auto; font-family: var(--font-mono); font-size: 0.6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---------- Keyboard ---------- */
.rc-tuner .rc-tuner__kbd { position: relative; padding-top: 9px; border-radius: 4px; }
.rc-tuner .rc-tuner__kbd:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.rc-tuner .rc-tuner__keys { position: relative; aspect-ratio: 6 / 1; cursor: pointer; }
.rc-tuner .rc-tuner__marker { position: absolute; top: 0; width: 0; height: 0; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top: 6px solid var(--text); transition: left var(--t-state) var(--ease); }
.rc-tuner .rc-tuner__tip { position: absolute; bottom: calc(100% - 2px); transform: translateX(-50%); padding: 5px 10px; border-radius: var(--radius-chip); background: var(--surface-2); border: 1px solid var(--hairline); box-shadow: 0 8px 24px rgb(0 0 0 / 0.5); font-size: 0.75rem; color: var(--text); white-space: nowrap; pointer-events: none; z-index: 2; }

/* ---------- Simple ⇄ Advanced: the app's 200 ms easeInOut state change, no bounce ---------- */
.rc-tuner .is-entering { animation: rc-tuner-in var(--t-state) var(--ease) both; }
.rc-tuner .is-leaving { opacity: 0; transition: opacity var(--t-state) var(--ease); pointer-events: none; }
.rc-tuner .rc-tuner__root.is-morphing { transition: height var(--t-state) var(--ease); }
.rc-tuner .is-morphing .rc-tuner__needle, .rc-tuner .is-morphing .rc-tuner__guide, .rc-tuner .is-morphing .rc-tuner__controls,
.rc-tuner .is-morphing .rc-tuner__level, .rc-tuner .is-morphing .rc-tuner__kbd { transition: transform var(--t-state) var(--ease); }
@keyframes rc-tuner-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Wider containers ---------- */
@container rc-tuner (min-width: 600px) {
  .rc-tuner .rc-tuner__extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-tuner .rc-tuner__card--details { display: flex; }
  .rc-tuner .rc-tuner__keys { aspect-ratio: 9 / 1; }        /* Theme.keyboardAspect */
  .rc-tuner .rc-tuner__specbox { height: auto; min-height: 190px; }
  .rc-tuner .rc-tuner__guide { padding: 18px 20px 10px; }
}
@container rc-tuner (min-width: 900px) {
  .rc-tuner .rc-tuner__main { grid-template-columns: minmax(0, 1fr) minmax(360px, 38%); gap: 20px; }
  .rc-tuner .rc-tuner__right { padding-top: 40px; }          /* the switch sits above the guide card */
  .rc-tuner .rc-tuner__extras { grid-template-columns: minmax(0, 1fr); }
  .rc-tuner .rc-tuner__root[data-adv="on"] .rc-tuner__right { grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; }
  .rc-tuner .rc-tuner__left > .rc-tuner__card--details { margin-top: 4px; }
}
@container rc-tuner (max-width: 599px) {
  .rc-tuner .rc-tuner__controls { grid-template-columns: auto minmax(0, 1fr); padding: 10px 12px; }
  .rc-tuner .rc-tuner__pin { grid-column: 1 / -1; grid-row: 1; }
  .rc-tuner .rc-tuner__btn--ghost { justify-self: end; }
  .rc-tuner .rc-tuner__hint { font-size: 0.875rem; }
  .rc-tuner .rc-tuner__engine { display: none; }
  .rc-tuner .rc-tuner__guide { padding: 14px 14px 6px; }
  .rc-tuner .rc-tuner__gtitle { font-size: 1.25rem; }
  /* the 336-unit diagram is scaled down to about 0.8: larger unit sizes keep the captions legible */
  .rc-tuner .rc-tuner__dcap { font-size: 12.5px; }
  .rc-tuner .rc-tuner__dfoot { font-size: 15px; }
}
@media (pointer: coarse) {
  .rc-tuner .rc-tuner__btn { min-height: 44px; min-width: 44px; }
  .rc-tuner .rc-tuner__textbtn, .rc-tuner .rc-tuner__switch { min-height: 44px; }
  .rc-tuner .rc-tuner__rail, .rc-tuner .rc-tuner__range { height: 44px; }
}

/* Phones: the needle is the main instrument in Simple mode — give the dial a taller box so its radius grows. */
@container rc-tuner (max-width: 599px) { .rc-tuner .rc-tuner__needle { aspect-ratio: 600 / 300; } }