/* Mastering Studio (/mastering): templates/mastering_studio.html + js/mastering-studio.js.
   Amber is the studio's own accent: every colour below is a --ms-* token scoped to .ms-studio
   (and the sections under it), so the site header and the rest of the site keep their brand.
   .ms-btn and .ms-art live in styles.css (the report launcher and the home teaser use them). */

html:has(body.page-mastering) {
    scroll-padding-top: 88px;
    /* focused controls never hide behind the sticky action bar: the script measures it into --ms-action-h */
    scroll-padding-bottom: calc(var(--ms-action-h, 9rem) + 16px);
}

.ms-page {
    --ms-bg: #131211;
    --ms-panel: #1b1a18;
    --ms-panel-2: #24221f;
    --ms-line: rgba(255, 240, 220, 0.11);
    --ms-line-strong: rgba(255, 240, 220, 0.24);
    --ms-text: #f4f0e9;
    --ms-muted: #a9a297;
    --ms-sub: #c8b598;
    --ms-accent: #f2a93b;
    --ms-accent-hi: #ffc36a;
    --ms-accent-ink: #1d1305;
    --ms-fill: #f2a93b; /* amber surfaces that carry --ms-accent-ink text */
    --ms-accent-soft: rgba(242, 169, 59, 0.13);
    --ms-warn: #ff9a6b;
    --ms-wave-bg: #1a1814;
    --ms-wave-rest: #7d776f;
    --ms-seg-off: rgba(255, 240, 220, 0.14);
    --ms-knob-hi: #3b3936;
    --ms-knob-lo: #121110;
    --ms-knob-rim: rgba(255, 255, 255, 0.08);
    --ms-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    --ms-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --ms-side-w: 330px;
    --ms-pad: 32px;
    --ms-dir: 1;
    display: grid;
    gap: 28px;
    min-width: 0;
    padding: 16px 0 48px;
    color: var(--ms-text);
}

[data-theme="light"] .ms-page {
    --ms-bg: #fbf9f5;
    --ms-panel: #f4f0e8;
    --ms-panel-2: #ebe5d9;
    --ms-line: rgba(48, 36, 18, 0.12);
    --ms-line-strong: rgba(48, 36, 18, 0.26);
    --ms-text: #1b1711;
    --ms-muted: #675f53;
    --ms-sub: #7b6444;
    --ms-accent: #985406; /* ≥ 4.5:1 on every light tint the studio puts amber text on */
    --ms-accent-hi: #f6b452;
    --ms-fill: #f0a43a;
    --ms-accent-soft: rgba(214, 133, 30, 0.12);
    --ms-warn: #b3400f;
    --ms-wave-bg: #f1ebe0;
    --ms-wave-rest: #a39b8f;
    --ms-seg-off: rgba(48, 36, 18, 0.13);
    --ms-knob-hi: #ffffff;
    --ms-knob-lo: #d9d3c8;
    --ms-knob-rim: rgba(48, 36, 18, 0.16);
    --ms-shadow: 0 14px 30px rgba(48, 36, 18, 0.12);
}

[dir="rtl"] .ms-page {
    --ms-dir: -1;
}

.ms-page [hidden] {
    display: none !important;
}

.ms-page :is(h2, h3, p)[tabindex="-1"]:focus:not(:focus-visible) {
    outline: none;
}

.ms-page :is(h2, h3, p)[tabindex="-1"]:focus-visible {
    outline: 2px solid var(--ms-accent);
    outline-offset: 6px;
    border-radius: var(--radius-xs);
}

.ms-page :is(h1, h2, h3, h4, p) {
    margin: 0;
}

.ms-flip {
    transform: scaleX(var(--ms-dir));
}

/* ---- The studio frame ---- */
.ms-studio {
    position: relative;
    display: grid;
    min-width: 0;
    border: 1px solid var(--ms-line);
    border-radius: var(--radius-xl);
    background: var(--ms-bg);
    box-shadow: var(--ms-shadow);
}

.ms-studio.is-dragging .ms-drop {
    border-color: var(--ms-accent);
    background: var(--ms-accent-soft);
}

/* ---- Studio bar: title, five steps, balance ---- */
.ms-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px 32px;
    padding: 20px var(--ms-pad);
    border-bottom: 1px solid var(--ms-line);
}

.ms-bar__title {
    color: var(--ms-text);
    font-size: clamp(1.4rem, 2.3vw, 2rem);
    font-weight: 850;
    letter-spacing: -0.015em;
    line-height: 1.1;
}

.ms-bar__balance {
    justify-self: end;
    color: var(--ms-text);
    font-size: 1.05rem;
    white-space: nowrap;
}

.ms-bar__value {
    color: var(--ms-accent);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.ms-steps {
    display: flex;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ms-steps__item {
    position: relative;
    display: flex;
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
}

.ms-steps__item + .ms-steps__item::before {
    content: "";
    position: absolute;
    top: 17px;
    inset-inline: calc(-50% + 26px) calc(50% + 26px);
    block-size: 2px;
    border-radius: var(--radius-pill);
    background: var(--ms-line-strong);
}

.ms-steps__item.is-complete + .ms-steps__item::before {
    background: var(--ms-accent);
}

.ms-steps__step {
    display: grid;
    justify-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0 4px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ms-muted);
    font: inherit;
    font-size: 0.95rem;
    text-align: center;
}

button.ms-steps__step:not(:disabled) {
    cursor: pointer;
}

button.ms-steps__step:not(:disabled):hover .ms-steps__dot {
    border-color: var(--ms-accent);
}

.ms-steps__step:focus-visible {
    outline: 3px solid var(--ms-accent);
    outline-offset: 4px;
}

.ms-steps__dot {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border: 1.5px solid var(--ms-line-strong);
    border-radius: var(--radius-pill);
    color: var(--ms-muted);
    font-family: var(--ms-mono);
    font-size: 0.95rem;
}

.ms-steps__check,
.ms-steps__item:not(.is-complete) .ms-steps__done {
    display: none;
}

.ms-steps__item.is-complete .ms-steps__dot,
.ms-steps__item.is-active .ms-steps__dot {
    border-color: var(--ms-fill);
    background: var(--ms-fill);
    color: var(--ms-accent-ink);
    font-weight: 800;
}

.ms-steps__item.is-complete:not(.is-active) .ms-steps__check {
    display: block;
}

.ms-steps__item.is-complete:not(.is-active) .ms-steps__num {
    display: none;
}

.ms-steps__item.is-complete .ms-steps__label {
    color: var(--ms-text);
}

.ms-steps__item.is-active .ms-steps__label {
    color: var(--ms-accent);
    font-weight: 750;
}

.ms-steps__label {
    overflow: hidden;
    max-inline-size: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Columns: the stage on the start side, targets (or versions) on the end side ---- */
.ms-frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ms-side-w);
    min-width: 0;
}

.ms-stage {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    align-content: start;
    gap: 24px;
    min-width: 0;
    padding: var(--ms-pad);
}

.ms-side {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: var(--ms-pad) 28px;
    border-inline-start: 1px solid var(--ms-line);
}

.ms-head {
    display: grid;
    gap: 8px;
}

.ms-head--split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 24px;
}

.ms-head--split > div:first-child {
    display: grid;
    gap: 8px;
}

.ms-title {
    color: var(--ms-text);
    font-size: clamp(1.85rem, 3.5vw, 3rem);
    font-weight: 850;
    letter-spacing: -0.025em;
    line-height: 1.06;
}

.ms-lead {
    max-inline-size: 60ch;
    color: var(--ms-sub);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.4;
}

.ms-hint:empty {
    display: none;
}

.ms-hint {
    color: var(--ms-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.ms-error {
    color: var(--ms-warn);
    font-weight: 700;
    line-height: 1.5;
}

.ms-error:empty {
    display: none;
}

.ms-error a {
    color: inherit;
}

.ms-notice {
    padding: 12px 16px;
    border: 1px solid var(--ms-line);
    border-inline-start: 3px solid var(--ms-warn);
    border-radius: var(--radius-sm);
    background: var(--ms-panel);
    line-height: 1.5;
}

div.ms-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    margin: 16px var(--ms-pad) 0;
}

div.ms-notice p {
    flex: 1 1 280px;
}

div.ms-notice form {
    margin: 0;
}

.ms-notice strong {
    margin-inline-end: 6px;
    color: var(--ms-warn);
}

.ms-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--ms-accent);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.ms-link-btn:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ms-page :is(.ms-link-btn, .ms-btn, .ms-round, summary, select):focus-visible {
    outline: 3px solid var(--ms-accent);
    outline-offset: 3px;
}

.ms-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--ms-accent-soft);
    color: var(--ms-accent);
    font-size: 0.8rem;
    font-weight: 750;
    white-space: nowrap;
}

/* Studio buttons: amber primary, quiet outline secondary. */
.ms-page .ms-btn--ghost,
.ms-btn--quiet {
    border-color: var(--ms-line-strong);
    background: transparent;
    color: var(--ms-text);
}

.ms-page .ms-btn--ghost:hover,
.ms-btn--quiet:hover {
    border-color: var(--ms-accent);
    color: var(--ms-text);
}

.ms-btn--quiet {
    min-height: 44px;
    padding: 8px 20px;
    border-radius: var(--radius-sm);
    font-weight: 650;
}

.ms-cta {
    position: relative;
    inline-size: 100%;
    min-height: 60px;
    padding: 14px 56px;
    border-color: transparent;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--ms-accent-hi), var(--ms-fill));
    color: var(--ms-accent-ink);
    font-size: 1.2rem;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(242, 169, 59, 0.18);
}

.ms-cta:hover {
    background: var(--ms-accent-hi);
    color: var(--ms-accent-ink);
}

.ms-cta__arrow {
    position: absolute;
    inset-inline-end: 22px;
    top: 50%;
    margin-top: -12px;
}

.ms-cta:disabled,
.ms-cta[aria-disabled="true"] {
    border-color: var(--ms-line);
    background: var(--ms-panel-2);
    color: var(--ms-muted);
    box-shadow: none;
    cursor: not-allowed;
}

.ms-round {
    display: inline-grid;
    flex: none;
    place-items: center;
    inline-size: 56px;
    block-size: 56px;
    padding: 0;
    border: 1.5px solid var(--ms-line-strong);
    border-radius: var(--radius-pill);
    background: var(--ms-panel);
    color: var(--ms-text);
    cursor: pointer;
}

.ms-round:hover:not(:disabled) {
    border-color: var(--ms-accent);
}

.ms-round:disabled {
    color: var(--ms-muted);
    cursor: not-allowed;
    opacity: 0.55;
}

.ms-round--big {
    inline-size: 76px;
    block-size: 76px;
    border: 2.5px solid var(--ms-accent);
    background: transparent;
    color: var(--ms-accent);
}

.ms-spinner {
    display: inline-block;
    inline-size: 14px;
    block-size: 14px;
    border: 2px solid var(--ms-line-strong);
    border-top-color: var(--ms-accent);
    border-radius: var(--radius-pill);
    vertical-align: -2px;
}

.ms-spinner--big {
    flex: none;
    inline-size: 32px;
    block-size: 32px;
    border-width: 3px;
}

/* ---- Upload ---- */
.ms-picked {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 10px 10px 16px;
    padding-inline: 16px 10px;
    border: 1px solid var(--ms-line-strong);
    border-radius: var(--radius-sm);
    background: var(--ms-panel);
}

.ms-picked__name {
    min-width: 0;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.ms-preset {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--ms-accent-soft);
    line-height: 1.5;
}

.ms-preset bdi {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.ms-drop {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: clamp(28px, 6vw, 56px) 20px;
    border: 1.5px dashed color-mix(in srgb, var(--ms-accent) 55%, transparent);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse at 50% 0%, var(--ms-accent-soft), transparent 70%),
        var(--ms-panel);
    text-align: center;
    cursor: pointer;
}

.ms-drop:hover {
    border-color: var(--ms-accent);
}

.ms-studio:has(#ms-file:focus-visible) .ms-drop {
    outline: 3px solid var(--ms-accent);
    outline-offset: 3px;
}

.ms-drop__wave {
    display: flex;
    align-items: center;
    gap: 4px;
    block-size: 44px;
    opacity: 0.7;
}

.ms-drop__wave i {
    inline-size: 4px;
    block-size: var(--h);
    border-radius: var(--radius-pill);
    background: var(--ms-accent);
}

.ms-drop__icon {
    color: var(--ms-accent);
}

.ms-drop__title {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 800;
}

.ms-drop__button {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 28px;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--ms-accent-hi), var(--ms-fill));
    color: var(--ms-accent-ink);
    font-weight: 800;
}

.ms-drop__formats {
    color: var(--ms-muted);
    font-size: 0.9rem;
}

.ms-facts {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ms-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.ms-facts li {
    padding-inline-start: 18px;
    background: radial-gradient(circle, var(--ms-accent) 0 3px, transparent 3.5px) 0 0.55em / 7px 7px no-repeat;
}

[dir="rtl"] .ms-facts li {
    background-position: 100% 0.55em;
}

/* ---- Shape: style, file, knobs ---- */
.ms-form {
    display: grid;
    gap: 24px;
    min-width: 0;
}

.ms-style {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.ms-style__label {
    font-weight: 750;
}

.ms-select {
    position: relative;
    display: inline-flex;
}

.ms-select::after {
    content: "";
    position: absolute;
    inset-inline-end: 16px;
    top: 50%;
    inline-size: 8px;
    block-size: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--ms-text); /* physical: a dropdown chevron points down in RTL too */
    border-bottom: 2px solid var(--ms-text);
    transform: rotate(45deg);
    pointer-events: none;
}

.ms-select select {
    min-inline-size: 13rem;
    min-height: 48px;
    padding: 8px 44px 8px 14px;
    padding-inline: 14px 44px;
    border: 1px solid var(--ms-muted); /* control borders ≥ 3:1 */
    border-radius: var(--radius-sm);
    background: var(--ms-panel);
    color: var(--ms-text);
    font: inherit;
    font-size: 1.05rem;
    appearance: none;
    cursor: pointer;
}

.ms-file {
    display: grid;
    gap: 14px;
}

.ms-file__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 24px;
}

.ms-file__name {
    min-width: 0;
    font-size: 1.3rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.ms-file__meta {
    color: var(--ms-muted);
    font-family: var(--ms-mono);
    font-size: 0.98rem;
}

/* Length and Peak wrap as one group, so their divider never starts a line. */
.ms-file__metas {
    display: inline-flex;
    white-space: nowrap;
}

.ms-file__meta:not([hidden]) ~ .ms-file__meta {
    margin-inline-start: 24px;
    padding-inline-start: 24px;
    border-inline-start: 1px solid var(--ms-line-strong);
}

.ms-file__change {
    margin-inline-start: auto;
}

.ms-wave {
    position: relative;
    overflow: hidden;
    block-size: 72px;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, transparent, var(--ms-accent-soft) 50%, transparent), var(--ms-wave-bg);
}

/* responsive.css sets canvas { height: auto !important }: the box sets the height here. */
.ms-wave__canvas {
    display: block;
    inline-size: 100%;
    block-size: 100% !important;
}

.ms-wave.is-loading {
    opacity: 0.6;
}

.ms-listen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ms-line);
}

.ms-listen .ms-round.is-playing {
    border-color: var(--ms-accent);
    color: var(--ms-accent);
}

.ms-listen__label {
    font-size: 1.1rem;
}

.ms-listen__note {
    margin-inline-start: auto;
    color: var(--ms-muted);
    font-size: 0.92rem;
}

.ms-knobs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ms-knob {
    --knob: clamp(104px, 11vw, 148px);
    position: relative;
    display: grid;
    justify-items: center;
    min-width: 0;
}

.ms-knob__label {
    margin-bottom: 14px;
    font-size: 1.25rem;
    font-weight: 800;
}

/* The native range stays the source of truth; only its focus ring moves onto the dial. It covers the
   whole knob, invisible and click-through, so scrolling to the focused input brings the knob into view. */
.ms-knob__input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.ms-knob__dial {
    position: relative;
    inline-size: var(--knob);
    block-size: var(--knob);
    border-radius: var(--radius-pill);
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
}

.ms-knob__input:focus-visible ~ .ms-knob__dial {
    outline: 3px solid var(--ms-accent);
    outline-offset: 6px;
}

.ms-knob__arc,
.ms-knob__fill {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}

.ms-knob__arc {
    background: conic-gradient(from -135deg, var(--ms-line-strong) 0 270deg, transparent 270deg);
}

.ms-knob__fill {
    background: conic-gradient(from -135deg, transparent 0 var(--from), var(--ms-accent) var(--from) var(--to), transparent var(--to));
}

.ms-knob__ticks i,
.ms-knob__dot {
    position: absolute;
    top: 50%;
    left: 50%;
}

.ms-knob__ticks i {
    inline-size: 2px;
    block-size: 6px;
    margin: -3px 0 0 -1px;
    border-radius: 1px;
    background: var(--ms-muted);
    opacity: 0.55;
    transform: rotate(var(--a)) translateY(calc(var(--knob) * -0.42));
}

.ms-knob__dot {
    inline-size: 10px;
    block-size: 10px;
    margin: -5px 0 0 -5px;
    border-radius: var(--radius-pill);
    background: var(--ms-accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--ms-accent) 70%, transparent);
    transform: rotate(var(--angle)) translateY(calc(var(--knob) * -0.5 + 1.5px));
}

.ms-knob__cap {
    position: absolute;
    inset: 18%;
    border-radius: var(--radius-pill);
    background: radial-gradient(circle at 50% 28%, var(--ms-knob-hi), var(--ms-knob-lo) 74%);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--ms-knob-rim), inset 0 1px 1px rgba(255, 255, 255, 0.14);
    transform: rotate(var(--angle));
}

.ms-knob__cap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-conic-gradient(var(--ms-knob-rim) 0 2deg, transparent 2deg 6deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
}

.ms-knob__pointer {
    position: absolute;
    top: 9%;
    left: 50%;
    inline-size: 5px;
    block-size: 30%;
    margin-left: -2.5px;
    border-radius: var(--radius-pill);
    background: var(--ms-accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--ms-accent) 55%, transparent);
}

/* The arc ends sit at ±135°: (50 ∓ 35.4 %, 85.4 %). */
.ms-knob__end {
    position: absolute;
    top: calc(85.4% - 0.65em);
    color: var(--ms-muted);
    font-family: var(--ms-mono);
    font-size: 0.85rem;
    white-space: nowrap;
}

.ms-knob__end--min {
    right: calc(85.4% + 8px);
}

.ms-knob__end--max {
    left: calc(85.4% + 8px);
}

.ms-knob__words {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    inline-size: min(calc(var(--knob) + 5em), 100%); /* under their own arc ends, clear of the next knob */
    margin-top: 2px;
    color: var(--ms-muted);
    font-size: 0.95rem;
}

.ms-knob__value {
    min-inline-size: 7em;
    margin-top: 14px;
    padding: 8px 16px;
    border: 1px solid var(--ms-line-strong);
    border-radius: var(--radius-sm);
    color: var(--ms-accent);
    font-family: var(--ms-mono);
    font-size: 1.45rem;
    text-align: center;
}

.ms-knob.is-dragging .ms-knob__value {
    border-color: var(--ms-accent);
}

.ms-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--ms-muted);
    font-size: 0.95rem;
}

.ms-divider::before,
.ms-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--ms-line);
}

/* ---- Folds: More options, What changed?, Loudness on streaming ---- */
.ms-fold {
    border: 1px solid var(--ms-line-strong);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--ms-panel) 60%, transparent);
}

.ms-fold > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    min-height: 56px;
    padding: 12px 22px;
    border-radius: inherit;
    list-style: none;
    cursor: pointer;
}

.ms-fold > summary::-webkit-details-marker {
    display: none;
}

.ms-fold__chevron {
    flex: none;
    transform: scaleX(var(--ms-dir));
}

details[open] > summary .ms-fold__chevron {
    transform: rotate(90deg);
}

.ms-fold__title {
    font-size: 1.12rem;
    font-weight: 800;
}

.ms-fold__summary > span {
    white-space: nowrap;
}

.ms-fold__summary {
    padding-inline-start: 18px;
    border-inline-start: 1px solid var(--ms-line-strong);
    color: var(--ms-muted);
    font-size: 0.95rem;
}

.ms-more__body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding: 8px 22px 22px;
}

/* Four controls: the knob takes two rows and Source the two cells beside it, so its labels stay on one line. */
.ms-more__loudness {
    display: grid;
    grid-row: span 2;
    justify-items: center;
    gap: 12px;
    text-align: center;
}

.ms-seg--wide {
    grid-column: span 2;
}

.ms-more__foot {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: end;
    gap: 8px 16px;
}

.ms-seg {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ms-seg__legend {
    margin-bottom: 10px;
    padding: 0;
    font-weight: 800;
}

/* Wraps rather than overflowing into the next control when a third of the card is narrow (1024 px, long locales). */
.ms-seg__options {
    display: inline-flex;
    flex-wrap: wrap;
    justify-self: start;
    max-inline-size: 100%;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--ms-muted);
    border-radius: var(--radius-sm);
}

.ms-seg__option {
    position: relative;
    cursor: pointer;
}

/* Radios cover their option (invisible), so focus scrolling reveals the whole control. */
.ms-page :is(.ms-seg__option, .ms-vitem) > input.visually-hidden {
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    clip: auto;
    opacity: 0;
}

.ms-seg__option span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 16px;
    border-radius: var(--radius-xs);
    font-weight: 650;
}

.ms-seg__option input:checked + span {
    background: var(--ms-fill);
    color: var(--ms-accent-ink);
}

.ms-seg__option input:focus-visible + span {
    outline: 3px solid var(--ms-accent);
    outline-offset: 2px;
}

/* ---- Side column: the four targets ---- */
.ms-side__title {
    margin: 0;
    padding: 0;
    color: var(--ms-text);
    font-size: clamp(1.2rem, 1.65vw, 1.5rem);
    font-weight: 850;
    letter-spacing: -0.01em;
}

.ms-side__lead {
    margin-top: 6px;
    color: var(--ms-sub);
    font-size: 1.15rem;
}

.ms-targets {
    display: grid;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.ms-target {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--ms-line);
}

.ms-target:last-child {
    border-bottom: 0;
}

.ms-target__text {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.ms-target__name {
    font-size: 1.2rem;
    font-weight: 800;
}

.ms-target__lufs {
    color: var(--ms-muted);
    font-family: var(--ms-mono);
    font-size: 0.98rem;
}

.ms-target__state {
    grid-column: 2;
    margin-top: -14px;
    color: var(--ms-accent);
    font-size: 0.85rem;
    font-weight: 750;
}

/* Rings grow in intensity from Dynamic to Chart. */
.ms-ring {
    --o: 45%;
    --w: 1.5px;
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 52px;
    block-size: 52px;
    border: 1.5px solid color-mix(in srgb, var(--ms-accent) var(--o), transparent);
    border-radius: var(--radius-pill);
}

.ms-ring::before {
    content: "";
    inline-size: 24px;
    block-size: 24px;
    border: var(--w) solid var(--ms-accent);
    border-radius: var(--radius-pill);
}

.ms-ring::after {
    content: "";
    position: absolute;
    inline-size: 6px;
    block-size: 6px;
    border-radius: var(--radius-pill);
    background: var(--ms-accent);
}

.ms-ring--2 { --o: 60%; --w: 2px; }
.ms-ring--3 { --o: 80%; --w: 2.5px; }
.ms-ring--4 { --o: 100%; --w: 3px; box-shadow: 0 0 14px color-mix(in srgb, var(--ms-accent) 35%, transparent); }

.ms-side[data-mode="ready"] .ms-ring {
    background: var(--ms-accent-soft);
}

/* ---- Run ---- */
.ms-run__file {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.ms-run__elapsed {
    color: var(--ms-muted);
    font-family: var(--ms-mono);
}

.ms-run__file bdi:empty,
#ms-progress:has([data-phase="stopped"]) :is(.ms-wave--run, .ms-stages) {
    display: none;
}

.ms-wave--run {
    --pct: 0;
    block-size: 96px;
}

.ms-wave__sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ms-wave--run[data-phase="upload"] .ms-wave__sweep {
    right: calc((1 - var(--pct)) * 100%);
    border-right: 2px solid var(--ms-accent);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ms-accent) 26%, transparent));
}

.ms-wave--run[data-phase="wait"] .ms-wave__sweep {
    background: color-mix(in srgb, var(--ms-accent) 12%, transparent);
}

.ms-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ms-muted);
    font-size: 0.98rem;
}

.ms-stages li + li::before {
    content: "→";
    margin-inline: 12px;
    color: var(--ms-line-strong);
}

[dir="rtl"] .ms-stages li + li::before {
    content: "←";
}

.ms-stages .is-done {
    color: var(--ms-text);
}

.ms-stages .is-current {
    color: var(--ms-accent);
    font-weight: 800;
}

.ms-stages .is-done::after {
    content: " ✓";
    color: var(--ms-accent);
}

.ms-run__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ms-run__actions:not(:has(:not([hidden]))) {
    display: none;
}

/* ---- Compare: one grid, the version list on the end side ---- */
.ms-compare {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) var(--ms-side-w);
    gap: 0;
    padding: var(--ms-pad) 0;
}

.ms-compare > * {
    grid-column: 1;
    min-width: 0;
    margin-inline: var(--ms-pad);
}

.ms-compare > * + * {
    margin-top: 20px;
}

.ms-compare > .ms-versions {
    grid-column: 2;
    grid-row: 1 / span 8;
    align-self: stretch;
    margin: calc(var(--ms-pad) * -1) 0;
    padding: var(--ms-pad) 28px;
    border-inline-start: 1px solid var(--ms-line);
}

.ms-notes:empty {
    display: none;
}

.ms-notes {
    display: grid;
    gap: 8px;
}

.ms-touch {
    display: grid;
    gap: 22px;
    padding: 24px;
    border: 1px solid var(--ms-line-strong);
    border-radius: var(--radius-lg);
    background: var(--ms-panel);
}

.ms-touch .ms-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.ms-touch__actions,
.ms-touch__original {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.ms-touch__original > p {
    flex-basis: 100%;
}

.ms-touch__original bdi {
    overflow-wrap: anywhere;
}

.ms-touch .ms-knob:has(input:disabled) {
    opacity: 0.6;
}

.ms-warmth {
    display: grid;
    gap: 8px;
    padding-block-start: 18px;
    border-top: 1px solid var(--ms-line);
}

.ms-warmth__head,
.ms-warmth__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

.ms-warmth__head label {
    flex: 1 1 auto;
    font-weight: 700;
}

.ms-warmth__head output {
    color: var(--ms-accent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ms-warmth input[type="range"] {
    inline-size: 100%;
    min-block-size: 44px;
    margin: 0;
    accent-color: var(--ms-accent);
}

.ms-warmth input[type="range"]:focus-visible {
    outline: 2px solid var(--ms-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.ms-warmth__foot > p {
    flex: 1 1 240px;
}

.ms-vitem--personal {
    border-color: var(--ms-accent);
    background: var(--ms-accent-soft);
}

.ms-compare__file {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 0;
    color: var(--ms-sub);
    font-size: 1.1rem;
}

.ms-compare__name {
    color: var(--ms-text);
    font-size: 1.3rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.ms-compare__length {
    color: var(--ms-text);
    font-family: var(--ms-mono);
}

.ms-compare__length:has(> bdi:empty) {
    display: none;
}

.ms-compare__length::before {
    content: "·";
    margin-inline: 12px;
}

.ms-compare__lead {
    margin-inline-start: 24px;
    padding-inline-start: 24px;
    border-inline-start: 1px solid var(--ms-line-strong);
}

.ms-player {
    display: grid;
    gap: 14px;
}

.ms-wave--scrub {
    block-size: 104px;
    border: 1px solid var(--ms-line);
}

.ms-seek {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.ms-wave--scrub:has(.ms-seek:focus-visible) {
    outline: 3px solid var(--ms-accent);
    outline-offset: 3px;
}

.ms-player {
    container: ms-player / inline-size;
}

.ms-transport {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
}

.ms-transport__keys {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ms-transport__keys .ms-round:not(.ms-round--big) {
    background: transparent;
}

.ms-time {
    margin-inline-start: 10px;
    font-family: var(--ms-mono);
    font-size: 1.15rem;
    white-space: nowrap;
}

.ms-meter {
    display: grid;
    gap: 6px;
}

/* Room for one row (sketch): transport | meter | switch, with dividers; the switch text wraps in its
   column. Narrower, the row wraps and draws no dividers, so none is left dangling. */
@container ms-player (min-width: 740px) {
    .ms-transport {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    .ms-meter {
        padding-inline: 20px;
        border-inline: 1px solid var(--ms-line-strong);
    }
}

.ms-meter__label {
    color: var(--ms-muted);
    font-size: 0.88rem;
}

.ms-meter__row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ms-muted);
    font-family: var(--ms-mono);
    font-size: 0.78rem;
}

.ms-meter__bar {
    --level: 0;
    position: relative;
    inline-size: 112px;
    block-size: 12px;
    background: repeating-linear-gradient(90deg, var(--ms-seg-off) 0 5px, transparent 5px 7px);
}

.ms-meter__bar::after {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 0;
    inline-size: calc(var(--level) * 100%);
    background: repeating-linear-gradient(90deg, var(--ms-accent) 0 5px, transparent 5px 7px);
}

.ms-switch {
    position: relative;
    display: inline-flex;
    flex: 1 1 200px;
    min-width: 0;
    align-items: center;
    gap: 14px;
    min-block-size: 44px;
    cursor: pointer;
}

.ms-switch input {
    position: absolute;
    inset-inline-start: 0;
    inline-size: 60px;
    block-size: 34px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.ms-switch__track {
    position: relative;
    flex: none;
    inline-size: 60px;
    block-size: 34px;
    border: 1.5px solid var(--ms-line-strong);
    border-radius: var(--radius-pill);
    background: var(--ms-panel-2);
}

.ms-switch__track::after {
    content: "";
    position: absolute;
    top: 4px;
    inset-inline-start: 4px;
    inline-size: 23px;
    block-size: 23px;
    border-radius: var(--radius-pill);
    background: var(--ms-muted);
}

.ms-switch input:checked + .ms-switch__track {
    border-color: var(--ms-accent);
    background: color-mix(in srgb, var(--ms-accent) 22%, var(--ms-panel));
}

.ms-switch input:checked + .ms-switch__track::after {
    inset-inline-start: 30px;
    background: var(--ms-accent);
}

.ms-switch input:focus-visible + .ms-switch__track {
    outline: 3px solid var(--ms-accent);
    outline-offset: 3px;
}

.ms-switch__text {
    display: grid;
    gap: 2px;
    font-weight: 750;
}

.ms-switch__note {
    color: var(--ms-muted);
    font-size: 0.88rem;
    font-weight: 400;
}

.ms-player__hint {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ms-line);
}

/* Versions */
.ms-versions {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ms-versions > legend {
    float: inline-start;
    inline-size: 100%;
}

.ms-versions > legend + * {
    clear: both;
}

.ms-vlist {
    display: grid;
    margin-top: 16px;
}

.ms-vitem {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 18px 14px;
    border-bottom: 1px solid var(--ms-line);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.ms-vitem:last-child {
    border-bottom: 0;
}

.ms-vitem:hover .ms-vitem__radio {
    border-color: var(--ms-accent);
}

.ms-vitem:has(input:checked) {
    background: linear-gradient(90deg, var(--ms-accent-soft), transparent);
}

.ms-vitem:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
}

.ms-vitem__radio {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border: 1.5px solid var(--ms-muted);
    border-radius: var(--radius-pill);
}

.ms-vitem input:checked ~ .ms-vitem__radio {
    border: 2.5px solid var(--ms-accent);
}

.ms-vitem input:checked ~ .ms-vitem__radio::after {
    content: "";
    inline-size: 12px;
    block-size: 12px;
    border-radius: var(--radius-pill);
    background: var(--ms-accent);
}

.ms-vitem input:focus-visible ~ .ms-vitem__radio {
    outline: 3px solid var(--ms-accent);
    outline-offset: 3px;
}

.ms-vitem__text {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.ms-vitem__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-size: 1.18rem;
    font-weight: 800;
}

.ms-vitem__tag {
    color: var(--ms-muted);
    font-size: 1rem;
}

/* The checked card reads "Selected" (sketch); its tag stays for screen readers. */
.ms-vitem:not(:has(input:checked)) .ms-vitem__selected {
    display: none;
}

.ms-vitem:has(input:checked) .ms-vitem__tag:not(.ms-vitem__selected) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ms-versions > .ms-hint,
.ms-versions > .ms-error {
    margin-top: 12px;
}

.ms-vitem__loading {
    color: var(--ms-muted);
    font-size: 0.85rem;
}

.ms-badge {
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--ms-fill);
    color: var(--ms-accent-ink);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.3;
}

/* Metrics + recommendation */
.ms-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 24px;
}

.ms-eyebrow {
    color: var(--ms-muted);
    font-family: var(--ms-mono);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ms-nums {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 12px 0 0;
}

.ms-nums > div {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 4px;
    padding-inline: 8px;
}

.ms-nums > div + div {
    border-inline-start: 1px solid var(--ms-line-strong);
}

.ms-nums dt {
    color: var(--ms-muted);
    font-family: var(--ms-mono);
    font-size: 0.95rem;
}

.ms-nums dd {
    margin: 0;
    font-family: var(--ms-mono);
    font-size: clamp(1.4rem, 2.2vw, 2.1rem);
    font-weight: 500;
    white-space: nowrap;
}

.ms-reco {
    display: grid;
    align-content: center;
    gap: 6px;
    padding-inline-start: 24px;
    border-inline-start: 1px solid var(--ms-line-strong);
}

.ms-reco__title {
    color: var(--ms-accent);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
}

.ms-reco__text {
    color: var(--ms-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.ms-settings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    padding-top: 16px;
    border-top: 1px solid var(--ms-line);
}

.ms-settings__text {
    flex: 1 1 320px;
    line-height: 1.55;
}

.ms-settings__adjust {
    padding-inline-start: 24px;
    border-inline-start: 1px solid var(--ms-line-strong);
    border-radius: 0;
}

/* The master review: a folded row until it opens, then the questions as segmented chips. */
.ms-review {
    border: 1px solid var(--ms-line-strong);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--ms-panel) 60%, transparent);
}

.ms-review__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 18px;
    padding: 6px 18px;
}

.ms-review__row .ms-link-btn {
    justify-content: center;
    min-inline-size: 44px; /* a short "Edit" ("تعديل") stays a full target */
}

.ms-review__thanks {
    font-weight: 700;
}

.ms-review__form {
    display: grid;
    gap: 20px;
    padding: 20px 22px 22px;
}

.ms-review__head {
    display: grid;
    gap: 4px;
}

.ms-review__title {
    color: var(--ms-text);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
}

.ms-review__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
}

.ms-review .ms-seg__legend {
    margin-bottom: 0;
}

.ms-review .ms-seg__option span {
    justify-content: center;
    min-inline-size: 44px; /* one-word answers ("لا") stay a full target */
}

.ms-review__star {
    flex: none;
    fill: none;
    stroke: currentColor;
}

.ms-review__stars .ms-seg__option span {
    padding-inline: 10px;
    color: var(--ms-muted);
}

/* Send without a rating marks the stars: focus moved there by script shows no :focus-visible ring. */
.ms-review__stars:has(.ms-error:not(:empty)) .ms-seg__options {
    outline: 2px solid var(--ms-warn);
    outline-offset: 2px;
}

/* A rating fills its star and every star before it (the pill would only mark the last one). */
.ms-review__stars .ms-seg__option input:checked + span {
    background: none;
}

.ms-review__stars .ms-seg__option:has(~ .ms-seg__option input:checked) .ms-review__star,
.ms-review__stars .ms-seg__option input:checked + span .ms-review__star {
    fill: var(--ms-fill);
    stroke: var(--ms-accent); /* the dark amber edge keeps a filled star visible on the light theme */
}

.ms-review__comment {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
}

.ms-review__input {
    box-sizing: border-box;
    inline-size: 100%;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--ms-muted);
    border-radius: var(--radius-sm);
    background: var(--ms-bg);
    color: var(--ms-text);
    font: inherit;
}

.ms-review__input:focus-visible {
    outline: 3px solid var(--ms-accent);
    outline-offset: 2px;
}

.ms-review__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

.ms-changes {
    display: grid;
    gap: 16px;
    padding: 4px 22px 22px;
}

.ms-changes__group h3 {
    margin: 0 0 6px;
    color: var(--ms-muted);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ms-changes__group ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-inline-start: 18px;
    line-height: 1.5;
}

.ms-changes__group li::marker {
    color: var(--ms-accent);
}

.ms-changes__group li.is-user {
    font-weight: 650;
}

.ms-levels__body {
    display: grid;
    gap: 16px;
    padding: 4px 22px 22px;
}

/* ---- Loudness ladder (includes/mastering_ladder.html): a numeric axis, always LTR ---- */
.ms-ladder {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
}

.ms-ladder__title {
    font-weight: 800;
}

.ms-ladder__plot {
    position: relative;
    block-size: 112px;
    margin-inline: 6px;
}

.ms-ladder__plot > *,
.ms-ladder__dot,
.ms-ladder__ticks > span {
    --p: clamp(0, (var(--lufs) + 20) / 15, 1);
}

.ms-ladder__rail {
    position: absolute;
    top: 22px;
    bottom: 20px;
    left: calc(var(--p) * 100%);
    border-left: 1px dashed var(--ms-muted);
}

.ms-ladder__rail-label {
    position: absolute;
    bottom: 100%;
    margin-bottom: 4px;
    color: var(--ms-muted);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.ms-ladder__rail--apple .ms-ladder__rail-label {
    right: 4px;
}

.ms-ladder__rail--spotify .ms-ladder__rail-label {
    left: 4px;
}

.ms-ladder__rail--club .ms-ladder__rail-label {
    left: 4px; /* toward the loud end, clear of Spotify's label */
}

.ms-ladder__track {
    position: absolute;
    inset-inline: 0;
    top: 38px;
    block-size: 6px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--ms-seg-off), color-mix(in srgb, var(--ms-accent) 55%, transparent));
}

.ms-ladder__dots {
    position: absolute;
    inset-inline: 0;
    top: 41px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ms-ladder__dot {
    position: absolute;
    top: 0;
    left: calc(var(--p) * 100%);
    inline-size: 12px;
    block-size: 12px;
    border-radius: var(--radius-pill);
    background: var(--ms-accent);
    transform: translate(-50%, -50%);
}

.ms-ladder__dot--source {
    inline-size: 10px;
    block-size: 10px;
    border-radius: var(--radius-xs);
    background: var(--ms-muted);
}

.ms-ladder__dot.is-recommended {
    box-shadow: 0 0 0 2px var(--ms-bg), 0 0 0 4px var(--ms-accent-hi);
}

.ms-ladder__dot.is-selected {
    inline-size: 16px;
    block-size: 16px;
}

/* Labels lean away from the edges: start-aligned at −20, end-aligned at −5. */
.ms-ladder__label {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    color: var(--ms-muted);
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
    transform: translateX(calc(var(--p) * -100%));
}

.ms-ladder__dot.is-low .ms-ladder__label {
    top: calc(100% + 24px);
}

.ms-ladder__dot.is-selected .ms-ladder__label {
    color: var(--ms-text);
    font-weight: 850;
}

/* On a platform view the loud masters share one spot; only the selected one keeps its label. */
.ms-ladder:is([data-view="spotify"], [data-view="apple"]) .ms-ladder__dot:not(.is-selected) .ms-ladder__label {
    visibility: hidden;
}

.ms-ladder__ticks {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    block-size: 14px;
}

.ms-ladder__ticks > span {
    position: absolute;
    left: calc(var(--p) * 100%);
    color: var(--ms-muted);
    font-family: var(--ms-mono);
    font-size: 0.7rem;
    transform: translateX(calc(var(--p) * -100%));
}

.ms-ladder__caption {
    color: var(--ms-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.ms-ladder__line {
    line-height: 1.5;
}

/* ---- Action bar: sticks to the bottom while the studio is on screen ---- */
.ms-action {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 18px var(--ms-pad) max(18px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--ms-line);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    background: color-mix(in srgb, var(--ms-bg) 94%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.ms-action__group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 14px 32px;
}

.ms-action__pane {
    display: contents;
}

.ms-action__info {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.ms-action__icon {
    flex: none;
    inline-size: 38px;
    block-size: 38px;
    color: var(--ms-accent);
}

.ms-action__title {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
}

.ms-action__sub {
    margin-top: 2px;
    color: var(--ms-muted);
    line-height: 1.45;
}

.ms-action__flag:empty {
    display: none;
}

.ms-action__flag {
    margin-top: 4px;
    color: var(--ms-warn);
    font-size: 0.88rem;
    line-height: 1.45;
}

.ms-action__do {
    display: grid;
    gap: 8px;
    padding-inline-start: 32px;
    border-inline-start: 1px solid var(--ms-line-strong);
}

.ms-action__note {
    color: var(--ms-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: center;
}

.ms-action__buttons,
.ms-wall__options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ms-action__buttons > *,
.ms-wall__option {
    flex: 1 1 200px;
}

.ms-action__buttons > .ms-cta {
    flex: 2 1 260px;
    padding-inline: 24px 52px;
}

.ms-wall__option {
    display: grid;
    gap: 6px;
}

.ms-wall__option form {
    margin: 0;
}

.ms-wall__option .ms-btn {
    inline-size: 100%;
    min-height: 56px;
    padding-inline: 16px;
    font-size: 1rem;
}

[data-group="status"] .ms-action__do:not(:has(:not([hidden]))) {
    display: none;
}

/* ---- Below the studio or the guest hero: demo, versions, how, why, AI songs, limits, price, FAQ ---- */
.ms-section,
.ms-card {
    min-width: 0;
    border: 1px solid var(--ms-line);
    background: var(--ms-bg);
}

.ms-section {
    display: grid;
    gap: 18px;
    padding: clamp(20px, 4vw, var(--ms-pad));
    border-radius: var(--radius-xl);
}

.ms-section h2,
.ms-card h2 {
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    font-weight: 850;
    letter-spacing: -0.015em;
}

.ms-card {
    display: grid;
    align-content: start;
    gap: 12px;
    padding: clamp(18px, 3vw, 26px);
    border-radius: var(--radius-lg);
}

.ms-how__steps {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ms-how .ms-card {
    background: var(--ms-panel);
}

.ms-card__num {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: var(--radius-pill);
    background: var(--ms-fill);
    color: var(--ms-accent-ink);
    font-family: var(--ms-mono);
    font-weight: 800;
}

.ms-card p,
.ms-card ul {
    margin: 0;
    color: var(--ms-muted);
    line-height: 1.6;
}

.ms-how .ms-card p {
    color: var(--ms-text);
}

.ms-info {
    display: grid;
    gap: 20px;
}

.ms-card ul {
    display: grid;
    gap: 6px;
    padding-inline-start: 18px;
}

.ms-card :is(.ms-btn, .ms-link-btn) {
    justify-self: start;
}

.ms-faq__item {
    border-top: 1px solid var(--ms-line);
}

.ms-faq__item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-block-size: 56px;
    font-weight: 750;
    list-style: none;
    cursor: pointer;
}

.ms-faq__item > summary::-webkit-details-marker {
    display: none;
}

.ms-faq__item p {
    max-width: 70ch;
    margin: 0 0 16px;
    color: var(--ms-muted);
    line-height: 1.65;
}

/* ---- Ready for mastering? Pre-run tips under the file; advice only, so it reads calm, not as an error ---- */
.ms-ready {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid var(--ms-line);
    border-inline-start: 3px solid var(--ms-accent);
    border-radius: var(--radius-md);
    background: var(--ms-accent-soft);
}

.ms-ready__title {
    font-weight: 800;
}

.ms-ready__tips {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-inline-start: 18px;
    line-height: 1.55;
}

.ms-ready__tips li.is-ok {
    list-style: none;
    margin-inline-start: -18px;
}

.ms-ready__note {
    color: var(--ms-muted);
    font-size: 0.88rem;
}

/* ---- Shape: the optional reference track. Dashed while empty (an offer), solid once one is set ---- */
.ms-ref {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border: 1px dashed var(--ms-line-strong);
    border-radius: var(--radius-md);
    background: var(--ms-panel);
}

.ms-ref:has([data-ms="ref-picked"]:not([hidden])) {
    border-style: solid;
    border-inline-start: 3px solid var(--ms-accent);
}

.ms-ref__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.ms-ref__text {
    display: grid;
    flex: 1 1 260px;
    gap: 4px;
    min-width: 0;
}

.ms-ref__title,
.ms-ref__name {
    color: var(--ms-text);
    font-weight: 800;
}

.ms-ref__name {
    overflow-wrap: anywhere;
}

/* The page's direction carries the gap (the figure inside is an LTR bdi), so RTL keeps it beside the name */
.ms-ref__lufs:has(> bdi:not(:empty)) {
    margin-inline-start: 12px;
    color: var(--ms-muted);
    font-family: var(--ms-mono);
    font-size: 0.95rem;
    font-weight: 400;
    white-space: nowrap;
}

.ms-ref__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

.ms-ref__status {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Guest landing (no studio for guests): hero, demo clips, content sections, closing CTA ---- */
.ms-hero,
.ms-final {
    background:
        radial-gradient(120% 140% at 100% 0%, var(--ms-accent-soft), transparent 62%),
        var(--ms-bg);
}

.ms-hero {
    display: grid;
    align-items: center;
    gap: 28px;
    min-width: 0;
    padding: clamp(24px, 5vw, 48px);
    border: 1px solid var(--ms-line);
    border-radius: var(--radius-xl);
}

.ms-hero__copy {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.ms-hero__kicker {
    color: var(--ms-accent);
    font-family: var(--ms-mono);
    font-size: 0.85rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ms-hero h1 {
    max-width: 24ch;
    font-size: clamp(1.9rem, 4.4vw, 2.9rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.ms-hero__lead {
    max-width: 62ch;
    font-size: clamp(1.02rem, 1.6vw, 1.15rem);
    line-height: 1.6;
}

.ms-hero__ai a {
    color: var(--ms-accent);
    font-weight: 650;
    text-decoration-color: color-mix(in srgb, var(--ms-accent) 40%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.ms-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ms-hero__actions .ms-cta {
    inline-size: auto;
    min-height: 56px;
    padding-inline: 28px 64px;
    font-size: 1.1rem;
}

.ms-hero__actions .ms-btn--ghost {
    min-height: 56px;
}

.ms-hero__note {
    max-width: 62ch;
    color: var(--ms-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.ms-hero__note .ms-link-btn {
    display: inline;
    min-height: 0;
    padding: 0;
}

.ms-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.ms-hero__chips li {
    padding: 6px 12px;
    border: 1px solid var(--ms-line-strong);
    border-radius: var(--radius-pill);
    color: var(--ms-sub);
    font-size: 0.85rem;
    font-weight: 700;
}

.ms-hero__art {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: clamp(16px, 3vw, 28px);
    border: 1px solid var(--ms-line);
    border-radius: var(--radius-lg);
    background: var(--ms-panel);
}

.ms-section__lead {
    max-width: 70ch;
    color: var(--ms-muted);
    line-height: 1.6;
}

.ms-section__note {
    max-width: 70ch;
    color: var(--ms-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.ms-section__note a {
    color: var(--ms-accent);
    text-underline-offset: 3px;
}

.ms-card :is(h3, h4) {
    font-size: 1.08rem;
    font-weight: 800;
}

.ms-demo__tip {
    max-width: 70ch;
    padding: 12px 16px;
    border: 1px solid var(--ms-line);
    border-inline-start: 3px solid var(--ms-accent);
    border-radius: var(--radius-md);
    background: var(--ms-accent-soft);
    font-weight: 650;
    line-height: 1.55;
}

.ms-demo__clips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ms-demo__clip {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--ms-line);
    border-radius: var(--radius-lg);
    background: var(--ms-panel);
}

.ms-demo__clip.is-recommended {
    border-color: color-mix(in srgb, var(--ms-accent) 60%, transparent);
}

.ms-demo__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

.ms-demo__badge {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--ms-fill);
    color: var(--ms-accent-ink);
    font-size: 0.75rem;
    font-weight: 800;
}

.ms-demo__meta {
    color: var(--ms-muted);
    font-family: var(--ms-mono);
    font-size: 0.85rem;
}

/* Monospace fonts have no Arabic glyphs: the fallback spaces the words apart. */
[dir="rtl"] .ms-page :is(.ms-demo__meta, .ms-target__lufs) {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

.ms-demo audio {
    inline-size: 100%;
    block-size: 40px;
    margin-top: 4px;
    color-scheme: dark;
}

[data-theme="light"] .ms-demo audio {
    color-scheme: light;
}

.ms-demo__changes {
    background: var(--ms-panel);
}

.ms-target__use {
    color: var(--ms-muted);
    line-height: 1.55;
}

.ms-list {
    display: grid;
    gap: 8px;
    max-width: 75ch;
    margin: 0;
    padding-inline-start: 20px;
    line-height: 1.6;
}

.ms-list li::marker {
    color: var(--ms-accent);
}

.ms-final {
    justify-items: start;
}

.ms-final > p:not(.ms-hero__note) {
    color: var(--ms-muted);
    line-height: 1.6;
}

@media (min-width: 1024px) {
    .ms-hero {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    }
}

/* Wide screens: Music style stays top-right beside the headline (sketch), its label above the select. */
@media (min-width: 1024px) {
    .ms-head--split {
        flex-wrap: nowrap;
    }

    .ms-head--split > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .ms-style {
        display: grid;
        flex: none;
        gap: 6px;
    }
}

@media (min-width: 768px) {
    .ms-how__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ms-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .ms-how__steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---- Below 1024 px: one column; targets follow Shape, versions sit above the metrics ---- */
@media (max-width: 1023px) {
    .ms-page {
        --ms-pad: 24px;
    }

    .ms-bar {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .ms-steps {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .ms-frame,
    .ms-compare {
        grid-template-columns: minmax(0, 1fr);
    }

    .ms-side {
        grid-column: 1;
        grid-row: 2;
        padding-top: 24px;
        border-inline-start: 0;
        border-top: 1px solid var(--ms-line);
    }

    .ms-targets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }

    .ms-target:nth-last-child(2) {
        border-bottom: 0;
    }

    .ms-compare > .ms-versions {
        grid-column: 1;
        grid-row: auto;
        margin: 20px var(--ms-pad) 0;
        padding: 0;
        border: 0;
    }

    .ms-vlist {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
        gap: 8px;
    }

    .ms-vitem {
        padding: 12px;
        border: 1px solid var(--ms-line);
    }

    .ms-vitem:last-child {
        border-bottom: 1px solid var(--ms-line);
    }

    .ms-vitem:has(input:checked) {
        border-color: var(--ms-accent);
    }

    .ms-more__body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- Phones ---- */
/* ---- My masters (mastering_library.html): the caller's runs, their reports and the keep add-on ---- */
.ms-library {
    padding-inline: 16px; /* the studio pads inside its panels; this page has none */
}

.ms-library__notice.is-ok {
    border-inline-start-color: var(--ms-accent);
}

.ms-library__list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ms-library__run {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 18px 20px;
    border: 1px solid var(--ms-line);
    border-radius: var(--radius-md);
    background: var(--ms-panel);
}

.ms-library__info {
    display: grid;
    flex: 1 1 320px;
    gap: 6px;
    min-width: 0;
}

.ms-library time {
    white-space: nowrap; /* a "2026-11-28 16:51 UTC" stamp never breaks, in RTL either */
}

.ms-library__name {
    overflow-wrap: anywhere;
    color: var(--ms-text);
    font-size: 1.15rem;
    font-weight: 750;
}

.ms-library__levels {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    color: var(--ms-muted);
    font-family: var(--ms-mono);
    font-size: 0.85rem;
}

.ms-library__levels .is-recommended {
    color: var(--ms-accent);
    font-weight: 700;
}

.ms-library__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.ms-library__actions form {
    margin: 0;
}

.ms-library__delete summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
    color: var(--ms-muted);
    font-weight: 650;
    cursor: pointer;
}

.ms-library__delete[open] form {
    display: grid;
    gap: 8px;
    max-inline-size: 28ch;
    margin-top: 6px;
}

.ms-library__empty {
    display: grid;
    justify-items: start;
    gap: 14px;
    padding: 24px;
    border: 1px dashed var(--ms-line-strong);
    border-radius: var(--radius-md);
    color: var(--ms-sub);
}

@media (max-width: 767px) {
    .ms-page {
        --ms-pad: 16px;
        padding-top: 8px;
    }

    .ms-studio {
        border-radius: var(--radius-lg);
    }

    .ms-bar {
        gap: 12px 16px;
        padding: 14px var(--ms-pad);
    }

    .ms-bar__title {
        font-size: 1.3rem;
    }

    .ms-bar__balance {
        font-size: 0.92rem;
    }

    /* Compact rail: dots only; the stage heading names the step. */
    .ms-steps__label {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .ms-steps__dot {
        inline-size: 28px;
        block-size: 28px;
        font-size: 0.82rem;
    }

    .ms-steps__step {
        place-content: center;
        min-block-size: 44px;
        min-inline-size: 44px;
    }

    .ms-steps__item + .ms-steps__item::before {
        top: 21px;
        inset-inline: calc(-50% + 20px) calc(50% + 20px);
    }

    .ms-stage {
        gap: 20px;
    }

    .ms-touch {
        padding: 16px 12px;
    }

    .ms-touch__actions > .ms-cta {
        inline-size: 100%;
    }

    .ms-title {
        font-size: 1.75rem;
    }

    .ms-lead {
        font-size: 1.02rem;
    }

    .ms-style,
    .ms-select,
    .ms-select select {
        inline-size: 100%;
    }

    .ms-file__name {
        flex: 1 1 100%;
        font-size: 1.12rem;
    }

    .ms-file__change {
        margin-inline-start: 0;
    }

    .ms-listen__note {
        flex: 1 1 100%;
        margin-inline-start: 0;
    }

    .ms-knobs {
        gap: 14px;
    }

    .ms-knob {
        --knob: 78px;
    }

    .ms-knob__label {
        margin-bottom: 8px;
        font-size: 1rem;
    }

    .ms-knob__end {
        font-size: 0.68rem;
    }

    .ms-knob__end--min {
        right: calc(85.4% + 2px);
    }

    .ms-knob__end--max {
        left: calc(85.4% + 2px);
    }

    .ms-knob__words {
        flex-wrap: wrap;
        justify-content: space-between;
        inline-size: 100%;
        margin-top: 6px;
        font-size: 0.72rem;
    }

    .ms-knob__value {
        min-inline-size: 0;
        inline-size: 100%;
        margin-top: 8px;
        padding: 6px 4px;
        font-size: 1rem;
    }

    .ms-fold > summary {
        padding-inline: 14px;
    }

    .ms-fold__summary {
        flex: 1 1 100%;
        padding-inline-start: 38px;
        border: 0;
        font-size: 0.85rem;
    }

    .ms-more__body {
        grid-template-columns: minmax(0, 1fr);
        padding-inline: 14px;
    }

    .ms-more__loudness,
    .ms-seg--wide {
        grid-area: auto;
    }

    .ms-targets {
        grid-template-columns: minmax(0, 1fr);
    }

    .ms-target {
        padding: 14px 0;
    }

    .ms-target:nth-last-child(2) {
        border-bottom: 1px solid var(--ms-line);
    }

    .ms-ring {
        inline-size: 42px;
        block-size: 42px;
    }

    .ms-ring::before {
        inline-size: 20px;
        block-size: 20px;
    }

    .ms-compare__lead {
        flex: 1 1 100%;
        margin: 4px 0 0;
        padding: 0;
        border: 0;
        font-size: 1rem;
    }

    /* The transport pins under the site header while the versions and details below it scroll.
       4.75rem is the phone header height (same offset as i18n.css's language panel). */
    html:has(.ms-studio[data-stage="compare"]) {
        scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 4.75rem + 8px + 150px); /* + the pinned transport */
    }

    .ms-player {
        display: contents;
    }

    .ms-page .ms-player > * { /* beats the page's p { margin: 0 } */
        margin: 14px var(--ms-pad) 0;
    }

    .ms-transport {
        position: sticky;
        top: calc(env(safe-area-inset-top, 0px) + 4.75rem + 8px);
        z-index: 4;
        gap: 10px 16px;
        padding: 10px 12px;
        border: 1px solid var(--ms-line);
        border-radius: var(--radius-md);
        background: var(--ms-bg);
        box-shadow: var(--ms-shadow);
    }

    .ms-transport__keys {
        gap: 10px;
        inline-size: 100%;
    }

    .ms-transport .ms-round {
        inline-size: 44px;
        block-size: 44px;
    }

    .ms-transport .ms-round--big {
        inline-size: 56px;
        block-size: 56px;
    }

    .ms-time {
        margin-inline-start: auto;
        font-size: 1rem;
    }

    .ms-meter {
        display: none;
    }

    .ms-switch {
        flex-basis: 100%;
    }

    .ms-wave--scrub {
        block-size: 80px;
    }

    .ms-vlist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ms-vitem {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        padding: 10px 12px;
    }

    .ms-vitem__radio {
        display: none;
    }

    /* No radio dot here: the card carries focus */
    .ms-vitem:has(input:focus-visible) {
        outline: 3px solid var(--ms-accent);
        outline-offset: 2px;
    }

    :is(.ms-view, .ms-seg--wide) .ms-seg__options {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        inline-size: 100%;
    }

    :is(.ms-view, .ms-seg--wide) .ms-seg__option {
        display: grid; /* the amber pill fills the cell when a neighbour wraps */
    }

    :is(.ms-view, .ms-seg--wide) .ms-seg__option span {
        justify-content: center;
        padding-inline: 6px;
        font-size: 0.9rem;
        text-align: center;
    }

    /* Masters sit within a few LU of each other: only the selected one is named (the list below names all). */
    .ms-ladder .ms-ladder__dot:not(.is-selected) .ms-ladder__label {
        visibility: hidden;
    }

    .ms-ladder .ms-ladder__dot .ms-ladder__label {
        top: calc(100% + 6px);
    }

    .ms-vitem__name {
        font-size: 1rem;
    }

    .ms-vitem__tag {
        font-size: 0.85rem;
    }

    .ms-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .ms-reco {
        padding: 14px 0 0;
        border: 0;
        border-top: 1px solid var(--ms-line);
    }

    .ms-nums dd {
        font-size: 1.45rem;
    }

    .ms-settings__adjust {
        padding-inline-start: 4px;
        border: 0;
    }

    .ms-review__row,
    .ms-review__form {
        padding-inline: 14px;
    }

    .ms-review__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Full-width chip rows: three answers, five stars or two-by-two versions; long words wrap inside a cell. */
    .ms-review .ms-seg__options {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        inline-size: 100%;
    }

    .ms-review .ms-review__stars .ms-seg__options {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .ms-review .ms-review__versions .ms-seg__options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ms-review .ms-seg__option {
        display: grid;
    }

    .ms-review .ms-seg__option span {
        justify-content: center;
        padding-inline: 6px;
        font-size: 0.9rem;
        text-align: center;
    }

    .ms-action {
        padding: 12px var(--ms-pad) max(12px, env(safe-area-inset-bottom));
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }

    /* Sign-in and unlock offers are too tall to pin on a phone: they sit at the end of the studio. */
    .ms-studio[data-state="guest"] .ms-action,
    .ms-studio[data-touch-pending="true"] .ms-action,
    .ms-action:has([data-group="cta"]:not([hidden]) .ms-wall:not([hidden])) {
        position: relative;
    }

    .ms-action__group {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .ms-action__info {
        gap: 12px;
    }

    .ms-action__icon {
        display: none;
    }

    .ms-action__title {
        font-size: 1rem;
    }

    .ms-action__sub {
        font-size: 0.9rem;
    }

    .ms-action__do {
        padding: 0;
        border: 0;
    }

    .ms-cta {
        min-height: 52px;
        padding-inline: 44px;
        font-size: 1.05rem;
    }

    .ms-action__note {
        font-size: 0.78rem;
    }

    .ms-action__group {
        gap: 8px;
    }

    .ms-action__sub {
        margin-top: 0;
    }
}

/* Scripts without case or tracking conventions read better without them. */
:is(:lang(ar), :lang(hi), :lang(ja), :lang(ko), :lang(zh)) :is(.ms-eyebrow, .ms-changes__group h3) {
    letter-spacing: 0;
    text-transform: none;
}

@media (prefers-reduced-motion: no-preference) {
    .ms-seg__option span,
    .ms-vitem,
    .ms-round,
    .ms-steps__dot,
    .ms-cta {
        transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .ms-fold__chevron {
        transition: transform 0.2s ease;
    }

    .ms-switch__track::after {
        transition: inset-inline-start 0.18s ease, background-color 0.18s ease;
    }

    .ms-ladder__dot {
        transition: left 0.4s ease, inline-size 0.2s ease, block-size 0.2s ease;
    }

    .ms-wave--run[data-phase="wait"] .ms-wave__sweep {
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ms-accent) 34%, transparent), transparent) 0 0 / 35% 100% no-repeat;
        animation: ms-sweep 1.8s linear infinite;
    }

    .ms-side[data-mode="wait"] .ms-ring {
        animation: ms-pulse 1.6s ease-in-out infinite;
        animation-delay: calc(var(--i) * 0.4s);
    }

    .ms-spinner {
        animation: ms-spin 0.8s linear infinite;
    }
}

@keyframes ms-sweep {
    from { background-position: -40% 0; }
    to { background-position: 140% 0; }
}

@keyframes ms-pulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50% { box-shadow: 0 0 0 6px var(--ms-accent-soft), 0 0 18px color-mix(in srgb, var(--ms-accent) 40%, transparent); }
}

@keyframes ms-spin {
    to { transform: rotate(360deg); }
}

@media (forced-colors: active) {
    .ms-knob__dial,
    .ms-meter__bar,
    .ms-switch__track {
        forced-color-adjust: none;
    }

    .ms-review__stars .ms-review__star {
        forced-color-adjust: none;
        stroke: CanvasText;
    }

    .ms-review__stars .ms-seg__option:has(~ .ms-seg__option input:checked) .ms-review__star,
    .ms-review__stars .ms-seg__option input:checked + span .ms-review__star {
        fill: Highlight;
        stroke: Highlight;
    }

    .ms-knob__arc {
        background: conic-gradient(from -135deg, GrayText 0 270deg, transparent 270deg);
    }

    .ms-knob__fill {
        background: conic-gradient(from -135deg, transparent 0 var(--from), Highlight var(--from) var(--to), transparent var(--to));
    }

    .ms-knob__cap {
        border: 2px solid CanvasText;
        background: Canvas;
        box-shadow: none;
    }

    .ms-knob__cap::before {
        display: none;
    }

    .ms-knob__pointer,
    .ms-knob__dot {
        background: Highlight;
        box-shadow: none;
    }

    .ms-knob__ticks i {
        background: CanvasText;
    }

    .ms-knob__end {
        color: CanvasText;
    }

    .ms-meter__bar {
        background: repeating-linear-gradient(90deg, GrayText 0 5px, Canvas 5px 7px);
    }

    .ms-meter__bar::after {
        background: repeating-linear-gradient(90deg, Highlight 0 5px, Canvas 5px 7px);
    }

    .ms-steps__item.is-active .ms-steps__dot,
    .ms-seg__option input:checked + span,
    .ms-vitem input:checked ~ .ms-vitem__radio,
    .ms-vitem:has(input:checked) {
        outline: 2px solid Highlight;
    }

    .ms-knob__input:focus-visible ~ .ms-knob__dial,
    .ms-seg__option input:focus-visible + span,
    .ms-vitem input:focus-visible ~ .ms-vitem__radio,
    .ms-vitem:has(input:focus-visible),
    .ms-switch input:focus-visible + .ms-switch__track,
    .ms-studio:has(#ms-file:focus-visible) .ms-drop,
    .ms-wave--scrub:has(.ms-seek:focus-visible) {
        outline: 3px solid Highlight;
        outline-offset: 4px;
    }

    .ms-switch__track {
        box-sizing: border-box;
        border: 1px solid CanvasText;
        background: Canvas;
    }

    .ms-switch__track::after {
        background: CanvasText;
    }

    .ms-switch input:checked + .ms-switch__track {
        border-color: Highlight;
        background: Highlight;
    }

    .ms-switch input:checked + .ms-switch__track::after {
        background: HighlightText;
    }
}