/*
 * The sound tool (2026-11-03) on ui/ToolBox: its own studio canvas (dark in both themes, a lavender light at the top),
 * the empty canvas's silent line and drop card, the visitor's own file, the day's limit, the score/roll switch, and the
 * foot's own pieces: the drag hint and the three samples.
 */

.aud-canvas { aspect-ratio: 16 / 11;
  background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--main-dark-from) 22%, transparent), transparent 72%), linear-gradient(165deg, var(--night-card-top), var(--night-card-bottom)); }
@media (max-width: 559px) { .aud-canvas { aspect-ratio: 1 / 1; } }

/* empty: a silent line under a drop card; a file over the box wakes the line into a wave */
.aud-empty { position: relative; display: grid; place-items: center; width: 100%; height: 100%; cursor: pointer; border-radius: 18px; }
.aud-empty:focus-visible { outline: 2px solid var(--main-dark-from); outline-offset: -6px; }
.aud-line { position: absolute; inset-inline: 6%; top: 38%; bottom: 38%; display: flex; align-items: center; gap: 0.7cqi; }
.aud-line i { flex: 1; height: calc(var(--h) * 100%); border-radius: 1cqi; background: var(--white-18); transform: scaleY(0.06); transition: transform 600ms var(--ease-out), background-color 400ms ease; transition-delay: calc(var(--k) * 300ms); }
.aud-canvas.drag .aud-line i { transform: none; background: color-mix(in srgb, var(--main-dark-from) 70%, transparent); }
@media (hover: hover) and (pointer: fine) { .aud-empty:hover .aud-line i { transform: scaleY(0.22); } .aud-empty:hover .aud-empty-ico { scale: 1.06; } }
.aud-empty-t { position: relative; z-index: 3; display: grid; justify-items: center; gap: 6px; max-width: 80%; padding: 18px 26px 16px; border-radius: 22px; text-align: center; background: color-mix(in srgb, var(--night-card-bottom) 60%, transparent); border: 1px solid var(--white-15); box-shadow: 0 18px 40px -20px var(--black-90); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.aud-empty-ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 16px; background: linear-gradient(160deg, var(--main-dark-from), var(--main-dark-to)); color: var(--on-main-dark); box-shadow: inset 0 1px 0 var(--white-30), 0 10px 22px -10px var(--black-80); transition: scale var(--d-enter) var(--ease-out); }
.aud-empty-ico .i { width: 25px; height: 25px; }
.aud-empty-t b { font-size: var(--text-title-3); line-height: var(--lh-title-3); font-weight: 800; }
.aud-empty-t small { color: var(--white-65); font-size: var(--text-footnote); line-height: var(--lh-footnote); }
.aud-canvas.drag .aud-empty-t { border-color: color-mix(in srgb, var(--main-dark-from) 60%, transparent); }

/* the visitor's own file: its whole waveform, the trial's first half minute lit */
.aud-own { position: relative; display: grid; align-content: center; gap: 3cqi; padding: 12% 7% 8%; }
.aud-file { display: inline-flex; align-items: center; gap: 8px; justify-self: start; max-width: 100%; color: var(--white); font-size: var(--text-subhead); font-weight: 700; }
.aud-file .i { width: 18px; height: 18px; color: var(--main-dark-from); flex: none; }
.aud-file b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-overview { position: relative; display: flex; align-items: center; gap: 0.35cqi; height: 22cqi; }
.aud-overview i { flex: 1; height: calc(var(--h) * 100%); border-radius: 0.6cqi; background: var(--white-18); }
.aud-overview i[data-in='true'] { background: linear-gradient(180deg, var(--main-dark-from), var(--main-dark-to)); }
.aud-win { position: absolute; inset-block: -3cqi; inset-inline-start: -1cqi; width: calc(var(--win) * 100% + 2cqi); border-radius: 2cqi; border: 1.5px dashed color-mix(in srgb, var(--main-dark-from) 70%, transparent); pointer-events: none; }
.aud-win small { position: absolute; bottom: calc(100% + 1cqi); inset-inline-start: 0; padding: 2px 9px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--main-dark-from) 25%, transparent); color: var(--white); font-size: var(--text-caption); font-weight: 700; white-space: nowrap; }
.aud-times { display: flex; justify-content: space-between; color: var(--white-60); font-size: var(--text-label); font-weight: 700; }

/* the day's limit */
.aud-limit { position: relative; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 8%; text-align: center; }
.aud-limit-ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--white-10); border: 1px solid var(--white-15); color: var(--main-dark-from); }
.aud-limit-ico .i { width: 28px; height: 28px; }
.aud-limit b { font-size: var(--text-title-2); line-height: var(--lh-title-2); font-weight: 800; }

/* the score/roll switch */
.aud-switch { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 4; display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--night-card-bottom) 60%, transparent); border: 1px solid var(--white-15); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.aud-switch button { height: 28px; padding: 0 12px; border-radius: var(--radius-pill); color: var(--white-65); font-size: var(--text-label); font-weight: 700; transition: background-color var(--d-default) ease, color var(--d-default) ease; }
.aud-switch button[aria-pressed='true'] { background: var(--white); color: var(--score-ink); box-shadow: 0 2px 6px var(--black-20); }
@media (hover: hover) and (pointer: fine) { .aud-switch button[aria-pressed='false']:hover { color: var(--white); } }
.aud-switch button:active { scale: 0.96; }
@media (max-width: 479px) { .aud-trial { display: none; } .aud-empty-t { padding: 14px 18px 12px; } .aud-empty-ico { width: 44px; height: 44px; } }

/* the foot's own pieces */
.aud-hint { color: var(--fg-muted); font-size: var(--text-subhead); line-height: var(--lh-subhead); }
@media (pointer: coarse) { .aud-hint { display: none; } }
.aud-samples { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--fg) 8%, transparent); }
.aud-samples-t { color: var(--fg-muted); font-size: var(--text-footnote); line-height: var(--lh-footnote); font-weight: 600; }
.aud-samples-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.aud-sample { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 10px; border-radius: 14px; text-align: start; background: color-mix(in srgb, var(--surface) 60%, transparent); border: 1px solid var(--edge);
  transition: translate var(--d-default) var(--ease-out), border-color var(--d-default) ease, background-color var(--d-default) ease, box-shadow var(--d-default) ease; }
.aud-sample:active { scale: 0.97; }
.aud-thumb { display: flex; align-items: center; gap: 2px; flex: none; width: 34px; height: 34px; padding: 0 6px; border-radius: 10px; background: linear-gradient(165deg, var(--night-card-top), var(--night-card-bottom)); }
.aud-thumb i { flex: 1; border-radius: 2px; background: var(--main-dark-from); transition: transform var(--d-enter) var(--ease-out); }
.aud-thumb i:nth-child(1) { height: 30%; } .aud-thumb i:nth-child(2) { height: 75%; } .aud-thumb i:nth-child(3) { height: 50%; } .aud-thumb i:nth-child(4) { height: 90%; } .aud-thumb i:nth-child(5) { height: 40%; }
.aud-sample-t { display: grid; min-width: 0; line-height: 1.35; }
.aud-sample-t b { font-size: var(--text-subhead); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a foreign title (a sample's piece is the CMS's, its name the library's) reads from its own start, cut at its own end */
.aud-sample-t b[dir='ltr'] { text-align: end; }
.aud-sample-t small { color: var(--fg-muted); font-size: var(--text-footnote); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) and (pointer: fine) {
  .aud-sample:hover { translate: 0 -1px; border-color: var(--edge-strong); background: var(--surface); box-shadow: var(--shadow-tile); }
  .aud-sample:hover b { color: var(--accent-ink); }
  .aud-sample:hover .aud-thumb i { transform: scaleY(0.6); }
}
@media (max-width: 559px) { .aud-samples-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
/*
 * The studio (Studio.tsx), a music box (dir=ltr): the waveform on top (7–25 %), the roll and the score under it
 * (30–96 %), sharing one area and crossfading. Sizes in the canvas's container units, so it scales as one picture.
 */

.aud-view { position: relative; }
.aud-studio { position: absolute; inset: 0; }
/* the wave starts under the chips (12 px from the top, 30 px tall) at every width */
.aud-wave { position: absolute; top: max(9%, 52px); height: 15%; inset-inline: 6%; display: flex; align-items: center; gap: 0.3cqi; }
.aud-wave i { flex: 1; height: calc(var(--h) * 100%); border-radius: 0.5cqi; background: var(--white-28); transform: scaleY(0.04); transition: transform 700ms var(--ease-out), background-color 500ms ease; transition-delay: calc(var(--k) * 500ms); }
.aud-studio.opened .aud-wave i { transform: none; }
.aud-studio.heard .aud-wave i { background: color-mix(in srgb, var(--main-dark-from) 75%, transparent); transition-delay: calc(var(--k) * 2900ms); transition-duration: 160ms; }
.aud-head { position: absolute; top: -12%; bottom: -12%; inset-inline-start: 0; width: 2px; border-radius: 1px; background: var(--white); box-shadow: 0 0 14px color-mix(in srgb, var(--main-dark-from) 80%, transparent); opacity: 0; }
.aud-studio.hearing .aud-head { opacity: 1; animation: aud-sweep 2900ms linear forwards; }
.aud-studio.playing .aud-head { opacity: 1; animation: aud-sweep var(--dur) linear forwards; }
@keyframes aud-sweep { from { inset-inline-start: 0; } to { inset-inline-start: calc(100% - 2px); } }

.aud-lower { position: absolute; top: max(29%, calc(52px + 18%)); bottom: 4%; inset-inline: 6%; }
/* the roll: each note a bar of its hand's colour, time across, pitch up; it appears behind the playhead */
.aud-roll { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); transition: opacity 500ms ease, filter 500ms ease; }
.aud-roll i { position: absolute; inset-inline-start: calc(var(--x) * 100%); width: max(calc(var(--w) * 100% - 2px), 3px); bottom: calc(var(--y) * 88%); height: 4.5%; border-radius: 0.5cqi; background: linear-gradient(90deg, var(--main-dark-from), color-mix(in srgb, var(--main-dark-from) 55%, transparent)); }
.aud-roll i[data-hand='left'] { background: linear-gradient(90deg, var(--hand-left-light), color-mix(in srgb, var(--hand-left-light) 55%, transparent)); }
.aud-studio.hearing .aud-roll { animation: aud-reveal 2900ms linear forwards; }
.aud-studio.heard .aud-roll { clip-path: inset(0 0 0 0); }
@keyframes aud-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* the score takes the roll's place once it is written */
.aud-score { position: absolute; inset: 0; display: grid; align-content: center; opacity: 0; filter: blur(4px); transition: opacity 700ms ease, filter 700ms ease; }
.aud-studio.written .aud-score { opacity: 1; filter: none; }
.aud-studio.written .aud-roll { opacity: 0; filter: blur(4px); }
.aud-sys { position: relative; display: grid; }
.aud-sys + .aud-sys { margin-top: 0.6cqi; }
.aud-sys::before { content: ''; position: absolute; inset-inline-start: 0; top: 4.15cqi; bottom: 4.15cqi; width: 1px; background: var(--white-60); }
.aud-st + .aud-st { margin-top: -2.6cqi; }
.aud-st svg { display: block; width: 100%; height: auto; overflow: visible; }
.aud-st .staff .line { stroke: var(--white); stroke-opacity: 0.35; }
.aud-st .staff :is(.glyph, .stem, .beam, .ledger, .barline) { fill: var(--white); stroke: var(--white); }
.aud-st .staff .tie { stroke: var(--white); }
.aud-st[data-hand='right'] .staff .ev.on :is(.glyph, .stem, .beam) { fill: var(--main-dark-from); stroke: var(--main-dark-from); }
.aud-st[data-hand='left'] .staff .ev.on :is(.glyph, .stem, .beam) { fill: var(--hand-left-light); stroke: var(--hand-left-light); }
@media (prefers-reduced-motion: reduce) { .aud-wave i { transition-delay: 0s; } .aud-studio.hearing .aud-head, .aud-studio.hearing .aud-roll { animation-duration: 0s; } }
/*
 * «پیانوم چطور نت رو می‌شنوه؟»: four ui/StepCards in one row from 1200 px, two from 768, one below; this file draws their
 * close-ups (music boxes, left to right). They play as their card scrolls in; where a browser cannot tie motion to the
 * scroll, or motion is reduced, they show their end.
 */

.ahw { padding-block: 0 var(--section); }
.ahw-cards { display: grid; gap: 16px; }
@media (min-width: 768px) { .ahw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ahw-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ahw-wave { position: absolute; inset-inline: 8%; top: 46%; height: 34%; display: flex; align-items: center; gap: 0.9cqi; }
.ahw-wave i { flex: 1; height: calc(var(--h) * 100%); border-radius: 0.8cqi; background: linear-gradient(180deg, var(--main-dark-from), var(--main-dark-to)); }
.ahw-top { top: 9%; height: 24%; }
.ahw-top i { background: var(--white-28); }
.ahw-roll { position: absolute; inset: 40% 8% 10%; }
.ahw-roll i { position: absolute; inset-inline-start: calc(var(--x) * 100%); width: max(calc(var(--w) * 100% - 2px), 3px); bottom: calc(var(--y) * 86%); height: 7%; border-radius: 0.8cqi; background: var(--main-dark-from); }
.ahw-roll i[data-hand='left'] { background: var(--hand-left-light); }

/* 1: a file opens into a waveform */
.ahw-files { position: absolute; top: 12%; inset-inline: 8%; display: flex; gap: 2cqi; }
.ahw-files b { padding: 1cqi 3cqi; border-radius: 2cqi; background: var(--white-10); border: 1px solid var(--white-15); color: var(--white); font-size: 4cqi; font-weight: 800; }
.ahw-files b:first-child { background: color-mix(in srgb, var(--main-dark-from) 30%, transparent); }

/* 2: heard behind a playhead */
.ahw-head { position: absolute; top: -10%; bottom: -10%; inset-inline-start: 62%; width: 2px; background: var(--white); box-shadow: 0 0 12px color-mix(in srgb, var(--main-dark-from) 80%, transparent); }
.ahw-hear .ahw-roll { clip-path: inset(0 38% 0 0); }

/* 3: the beat under the notes, and what it gives */
.ahw-grid { inset: 12% 8% 32%; }
.ahw-tick { position: absolute; top: -4%; bottom: -4%; inset-inline-start: calc(var(--t) * 100%); width: 1px; background: var(--white-15); }
.ahw-tick:nth-child(4n + 1) { background: var(--white-60); }
.ahw-chips { position: absolute; inset-inline: 8%; bottom: 8%; display: flex; flex-wrap: wrap; gap: 1.6cqi; }
.ahw-chips span { padding: 0.8cqi 2.6cqi; border-radius: var(--radius-pill); background: var(--white-10); border: 1px solid var(--white-15); color: var(--white); font-size: 3.8cqi; font-weight: 700; }

/* 4: written, each hand in its colour */
.ahw-gs { position: absolute; inset-inline: 9% 7%; top: 50%; translate: 0 -46%; display: grid; }
.ahw-gs > div + div { margin-top: -9%; }
.ahw-gs [data-hand='right'] .staff .ev :is(.glyph, .stem, .beam) { fill: var(--main-dark-from); stroke: var(--main-dark-from); }
.ahw-gs [data-hand='left'] .staff .ev :is(.glyph, .stem, .beam) { fill: var(--hand-left-light); stroke: var(--hand-left-light); }
.ahw-hand { position: absolute; inset-inline-end: 5%; display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--white-10); font-size: var(--text-caption); font-weight: 700; }
.ahw-hand::before { content: ''; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--main-dark-from); }
.ahw-hand[data-hand='left']::before { background: var(--hand-left-light); }
.ahw-hand[data-hand='right'] { top: 7%; }
.ahw-hand[data-hand='left'] { bottom: 7%; }

/* the close-ups play as their card scrolls in */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ahw-open .ahw-wave i { animation: ahw-rise linear both; animation-timeline: view(); animation-range: entry calc(20% + var(--k) * 40%) cover calc(30% + var(--k) * 12%); }
    .ahw-hear .ahw-head { animation: ahw-sweep linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .ahw-hear .ahw-roll { animation: ahw-reveal linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .ahw-tick { animation: ahw-tick linear both; animation-timeline: view(); animation-range: entry calc(20% + var(--t) * 50%) cover 40%; }
    .ahw-gs [data-hand] .staff .ev :is(.glyph, .stem, .beam) { animation: ahw-ink linear both; animation-timeline: view(); animation-range: entry 40% cover 45%; }
  }
}
@keyframes ahw-rise { from { transform: scaleY(0.06); } to { transform: none; } }
@keyframes ahw-sweep { from { inset-inline-start: 0; } to { inset-inline-start: 62%; } }
@keyframes ahw-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 38% 0 0); } }
@keyframes ahw-tick { from { opacity: 0; } to { opacity: 1; } }
@keyframes ahw-ink { from { fill: var(--white); stroke: var(--white); } }