/* GLYPH: the before / after players (assets/js/ab.js). The device's night panel; one featured player, then rows of
   compact ones on the same 8 pt rhythm. The slider is the DRY / WET rail with its rose-gold thumb. */
.ab-sec {
  --ab-bg: #0b0c0e; --ab-panel: #16171a; --ab-fg: #f2f2ee; --ab-dim: #a7a9ad; --ab-line: rgba(242, 242, 238, .14);
  --ab-gold: #d9a68c; --ab-signal: #ff1f2d;
  background: var(--ab-bg); color: var(--ab-fg); padding-block: clamp(80px, 12vw, 160px);
}
.ab-sec .wrap { display: grid; gap: clamp(64px, 9vw, 120px); }

/* section intro */
.ab-intro { display: grid; gap: 24px 64px; align-items: end; }
@media (min-width: 900px) { .ab-intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.ab-intro > div { display: grid; gap: 18px; }
.ab-intro .lead { color: var(--ab-dim); max-width: 46ch; opacity: 1; }

/* parts */
.ab-part { display: grid; gap: 32px; border-top: 1px solid var(--ab-line); padding-top: 32px; }
.ab-part-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 16px; align-items: baseline; }
@media (min-width: 900px) { .ab-part-head { grid-template-columns: 56px minmax(0, 5fr) minmax(0, 6fr); } }
.ab-num { margin: 0; font: 500 11px/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .22em; color: var(--ab-signal); }
.ab-part-title { margin: 0; font: 600 clamp(22px, 2vw, 28px)/1.2 "Instrument Sans", "Helvetica Neue", Arial, sans-serif; }
.ab-part-lead { margin: 0; grid-column: 2; color: var(--ab-dim); font-size: 16px; line-height: 1.55; max-width: 48ch; }
@media (min-width: 900px) { .ab-part-lead { grid-column: 3; } }

.ab-row { display: grid; gap: 16px; }
@media (min-width: 760px) { .ab-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) and (max-width: 1099px) { .ab-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ab-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* one player */
.ab { background: var(--ab-panel); border: 1px solid var(--ab-line); border-radius: 28px; padding: 24px; display: grid; gap: 20px; align-content: start; min-width: 0; }
.ab-lg { padding: clamp(24px, 3vw, 40px); gap: 24px; }
/* the featured player, wide: the screen on the left, the preset and its controls on the right */
@media (min-width: 1000px) {
  .ab-lg { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-rows: auto 1fr auto; gap: 16px 48px; }
  .ab-lg .ab-screen { grid-column: 1; grid-row: 1 / 3; }
  .ab-lg .ab-fams { grid-column: 1; grid-row: 3; margin-top: 0; }
  .ab-lg .ab-head { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 24px; }
  .ab-lg .ab-deck { grid-column: 2; grid-row: 2 / 4; align-self: end; grid-template-columns: auto minmax(0, 1fr); }
}
.ab-head { display: flex; justify-content: space-between; align-items: end; gap: 16px 24px; flex-wrap: wrap; }
.ab-id { display: grid; gap: 8px; min-width: 0; }
.ab-cat { margin: 0; font: 500 11px/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .22em; color: var(--ab-dim); }
.ab-preset { margin: 0; font: 900 clamp(22px, 2.2vw, 28px)/1 "Doto", "JetBrains Mono", monospace; letter-spacing: .04em; overflow-wrap: anywhere; }
.ab-lg .ab-preset { font-size: clamp(28px, 3.4vw, 44px); }

.ab-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-tabs button { font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--ab-dim); background: none; border: 1px solid var(--ab-line); border-radius: 999px; min-height: 40px; padding: 0 16px; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.ab-tabs button:hover { color: var(--ab-fg); border-color: rgba(242, 242, 238, .32); }
.ab-tabs button[aria-pressed="true"] { color: var(--ab-bg); background: var(--ab-fg); border-color: var(--ab-fg); }

.ab-screen { position: relative; aspect-ratio: 528 / 308; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid var(--ab-line); }
.ab-lg .ab-screen { border-radius: 22px; }
.ab-screen video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: calc(.18 + .82 * var(--m, 1)); transition: opacity .25s; }
.ab:not([data-playing="1"]) .ab-screen video { opacity: .5; }
.ab-fam-name { position: absolute; left: 16px; top: 14px; margin: 0; font: 900 18px/1 "Doto", "JetBrains Mono", monospace; letter-spacing: .04em; color: var(--ab-fg); }
.ab-lg .ab-fam-name { left: 20px; top: 18px; font-size: 22px; }
.ab-screen::after { content: ""; position: absolute; right: 16px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--ab-signal); box-shadow: 0 0 10px var(--ab-signal); opacity: 0; transition: opacity .2s; }
.ab[data-playing="1"] .ab-screen::after { opacity: 1; }

.ab-fams { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: -8px; }
.ab-fams button { font: 500 10px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .18em; color: var(--ab-dim); background: none; border: 0; border-bottom: 1px solid transparent; min-height: 32px; padding: 0 2px; cursor: pointer; }
.ab-fams button:hover { color: var(--ab-fg); }
.ab-fams button[aria-pressed="true"] { color: var(--ab-fg); border-bottom-color: var(--ab-gold); }

.ab-deck { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.ab-play { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--ab-line); background: var(--ab-fg); color: var(--ab-bg); display: grid; place-items: center; cursor: pointer; transition: transform .2s; }
.ab-lg .ab-play { width: 64px; height: 64px; }
.ab-play svg { width: 20px; height: 20px; fill: currentColor; }
.ab-play .i-pause, .ab-play[aria-pressed="true"] .i-play { display: none; }
.ab-play[aria-pressed="true"] .i-pause { display: block; }
.ab-play:active { transform: scale(.96); }
.ab[data-ready="0"] .ab-play { opacity: .35; cursor: not-allowed; }
.ab-mix { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .18em; color: var(--ab-dim); }
.ab-mix input { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: none; margin: 0; cursor: pointer; }
.ab-mix input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--ab-gold) calc(var(--m, 1) * 100%), var(--ab-line) 0); }
.ab-mix input::-moz-range-track { height: 6px; border-radius: 3px; background: var(--ab-line); }
.ab-mix input::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ab-gold); }
.ab-mix input::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 26px; margin-top: -10px; border-radius: 7px; background: var(--ab-panel); border: 3px solid var(--ab-gold); }
.ab-mix input::-moz-range-thumb { width: 18px; height: 20px; border-radius: 7px; background: var(--ab-panel); border: 3px solid var(--ab-gold); }
.ab-state { grid-column: 1 / -1; margin: 0; min-height: 1.4em; font: 500 11px/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--ab-dim); }
.ab-state:empty { display: none; }
.ab-state::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ab-signal); margin-right: 10px; vertical-align: 1px; }

.ab-tabs button:focus-visible, .ab-fams button:focus-visible, .ab-play:focus-visible { outline: 2px solid var(--ab-fg); outline-offset: 3px; }
.ab-mix input:focus-visible { outline: 2px solid var(--ab-fg); outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .ab-play, .ab-screen video, .ab-tabs button { transition: none; } }