/* Listen player — compact instrument bar. Portfolio ink, not page-surface. */

.case-audio-slot{
  max-width:100%;
  margin:1.25rem 0 0;
}

.case-audio-kicker{
  margin:0 0 .45rem;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--s1, #c45c26);
}

.case-audio{
  --listen-ink: var(--rust, #b5390d);
  --listen-paper: var(--ivory, #f8f2e0);
  --listen-accent: var(--peach, #feede1);
  position:relative;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:8px 12px;
  margin:0;
  padding:8px 12px;
  background:var(--listen-ink);
  color:var(--listen-paper);
  border:1px solid color-mix(in srgb, var(--listen-accent) 34%, var(--listen-ink));
  border-radius:14px;
  box-shadow:0 8px 24px color-mix(in srgb, var(--listen-ink) 22%, transparent);
  max-width:100%;
}

.case-audio .visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.case-audio-now{
  order:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-self:center;
  flex:0 1 12rem;
  min-width:6.5rem;
  max-width:16rem;
  margin:0;
  font-family:"DM Sans",var(--sans),sans-serif;
  font-size:.78rem;
  line-height:1.25;
  color:var(--listen-paper);
  white-space:normal;
  overflow:visible;
  overflow-wrap:break-word;
  hyphens:manual;
}

.case-audio-now-kicker{
  margin:0;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--listen-accent);
}

.case-audio-now-row{
  display:grid;
  grid-template-columns:1.6rem minmax(0,1fr);
  gap:6px;
  align-items:start;
}

.case-audio-now.is-opening .case-audio-now-row{
  display:none;
}

.case-audio-now-idx{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.68rem;
  font-weight:700;
  color:var(--listen-accent);
  padding-top:.12rem;
}

.case-audio-now-title{
  min-width:0;
  font-weight:600;
  line-height:1.3;
  overflow-wrap:anywhere;
}

.case-audio-status{
  position:absolute;
  left:12px;
  right:12px;
  bottom:calc(100% + 6px);
  z-index:3;
  margin:0;
  padding:6px 10px;
  font-family:"DM Sans",var(--sans),sans-serif;
  font-size:.82rem;
  color:var(--listen-accent);
  background:var(--listen-ink);
  border-radius:8px;
}

.case-audio-status[hidden]{
  display:none;
}

.case-audio-retry{
  margin-left:.5rem;
  font:inherit;
  color:var(--listen-paper);
  background:none;
  border:0;
  padding:0;
  min-height:44px;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:.16em;
}

.case-audio-speed{
  order:4;
  position:relative;
  flex:none;
}

.case-audio-speed-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:6px 10px;
  border:1px solid color-mix(in srgb, var(--listen-accent) 38%, transparent);
  border-radius:8px;
  background:transparent;
  color:var(--listen-paper);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.78rem;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
}

.case-audio-speed-btn[aria-expanded="true"]{
  border-color:var(--listen-accent);
  color:var(--listen-accent);
}

.case-audio-speed-list{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:4;
  margin:0;
  padding:6px;
  list-style:none;
  min-width:4.75rem;
  background:var(--listen-paper);
  color:var(--listen-ink);
  border:1px solid color-mix(in srgb, var(--listen-ink) 18%, transparent);
  border-radius:12px;
  box-shadow:0 10px 28px rgba(20,18,16,.18);
}

.case-audio-speed-list[hidden]{
  display:none;
}

.case-audio-speed-list [role="option"]{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 10px;
  border-radius:8px;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.78rem;
  font-variant-numeric:tabular-nums;
  color:var(--listen-ink);
  cursor:pointer;
}

.case-audio-speed-list [role="option"][aria-selected="true"]{
  background:color-mix(in srgb, var(--s1, #c45c26) 16%, var(--listen-paper));
}

.case-audio-row{
  display:contents;
}

.case-audio-transport{
  order:2;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:6px;
  flex:none;
}

.case-audio-btn,
.case-audio-skip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  height:44px;
  padding:0 8px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--listen-paper);
  cursor:pointer;
}

.case-audio-btn svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.case-audio-skip{
  min-width:44px;
  border:1px solid color-mix(in srgb, var(--listen-accent) 32%, transparent);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}

.case-audio-play{
  width:44px;
  height:44px;
  background:var(--listen-accent);
  color:var(--listen-ink);
}

.case-audio-play svg{
  width:16px;
  height:16px;
}

.case-audio[data-state="playing"] .case-audio-play{
  background:var(--listen-paper);
  color:var(--listen-ink);
}

.case-audio-play .icon-pause{ display:none; }
.case-audio[data-state="playing"] .case-audio-play .icon-play{ display:none; }
.case-audio[data-state="playing"] .case-audio-play .icon-pause{ display:block; fill:currentColor; stroke:none; }

.case-audio-btn:disabled,
.case-audio-skip:disabled{
  opacity:.4;
  cursor:default;
}

.case-audio-btn:focus-visible,
.case-audio-skip:focus-visible,
.case-audio-speed-btn:focus-visible,
.case-audio-speed-list [role="option"]:focus-visible,
.case-audio-retry:focus-visible,
.case-audio-scrub:focus-visible{
  outline:2px solid var(--listen-accent);
  outline-offset:3px;
}

.case-audio-timeline{
  order:3;
  display:grid;
  grid-template-columns:auto minmax(4rem,1fr) auto;
  gap:8px;
  align-items:center;
  flex:1 1 8rem;
  min-width:6.5rem;
}

.case-audio-time{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
  font-size:.68rem;
  color:var(--listen-paper);
}

.case-audio-bar{
  position:relative;
  height:16px;
  display:flex;
  align-items:center;
}

.case-audio-ticks{
  position:absolute;
  inset:0 0 0 0;
  pointer-events:none;
}

.case-audio-ticks span{
  position:absolute;
  top:50%;
  width:1px;
  height:8px;
  margin-top:-4px;
  background:color-mix(in srgb, var(--listen-accent) 45%, transparent);
}

.case-audio-scrub{
  position:relative;
  z-index:1;
  width:100%;
  height:16px;
  margin:0;
  appearance:none;
  background:transparent;
}

.case-audio-scrub::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background:linear-gradient(to right, var(--listen-accent) var(--played, 0%), color-mix(in srgb, var(--listen-paper) 22%, transparent) var(--played, 0%));
}

.case-audio-scrub::-moz-range-track{
  height:4px;
  border-radius:999px;
  background:color-mix(in srgb, var(--listen-paper) 22%, transparent);
}

.case-audio-scrub::-moz-range-progress{
  height:4px;
  border-radius:999px;
  background:var(--listen-accent);
}

.case-audio-scrub::-webkit-slider-thumb{
  appearance:none;
  width:12px;
  height:12px;
  margin-top:-4px;
  border-radius:50%;
  background:var(--listen-paper);
  border:0;
}

.case-audio-scrub::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--listen-paper);
  border:0;
}

.case-audio audio{
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  padding:0;
  border:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
}

.case-audio[data-state="loading"] .case-audio-transport,
.case-audio[data-state="loading"] .case-audio-timeline,
.case-audio[data-state="error"] .case-audio-transport,
.case-audio[data-state="error"] .case-audio-timeline{
  opacity:.45;
}

@media (max-width:1099px){
  .case-audio-now:not(.is-opening) .case-audio-now-kicker,
  .case-audio-now-idx{
    display:none;
  }
  .case-audio-now:not(.is-opening) .case-audio-now-row{
    grid-template-columns:minmax(0,1fr);
  }
}

@media (min-width:1100px){
  .case-audio-now{
    flex-basis:14rem;
    max-width:18rem;
    min-width:8rem;
    gap:2px;
  }
}

@media (max-width:720px){
  .case-audio-now{
    flex-basis:7rem;
    max-width:9rem;
    font-size:.72rem;
  }
  .case-audio [data-audio-prev],
  .case-audio [data-audio-next]{
    display:none;
  }
}

@media print{
  .case-audio{
    display:none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .case-audio *{
    transition:none !important;
  }
}

.case-audio.is-docked{
  position:fixed;
  z-index:36;
  margin:0;
}

.case-audio.is-docked .case-audio-speed-list{
  top:auto;
  bottom:calc(100% + 6px);
}

.case-audio.is-docked audio{
  position:absolute;
  width:1px;
  height:1px;
}

/* Desktop: the same instrument, pinned. Mobile has to compact. */
@media (min-width:1100px){
  .case-audio.is-docked{
    left:50%;
    right:auto;
    bottom:16px;
    transform:translateX(-50%);
    width:min(
      calc(var(--wide, 76rem) - 2 * clamp(1.25rem, 4vw, 3rem)),
      calc(100vw - 2 * clamp(1.25rem, 4vw, 3rem))
    );
    max-width:none;
    border-radius:14px;
    padding:8px 12px;
    box-shadow:0 8px 32px color-mix(in srgb, var(--listen-ink) 28%, transparent);
  }
}

@media (max-width:1099px){
  .case-audio.is-docked{
    left:0;
    right:0;
    bottom:0;
    transform:none;
    width:100%;
    max-width:none;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:10px;
    border-radius:14px 14px 0 0;
    padding:6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -8px 24px color-mix(in srgb, var(--listen-ink) 28%, transparent);
  }

  .case-audio.is-docked .case-audio-now{
    display:none;
  }

  .case-audio.is-docked .case-audio-speed{
    grid-area:auto;
    order:5;
    flex:none;
  }

  .case-audio.is-docked .case-audio-speed-btn{
    min-width:52px;
    min-height:44px;
    height:44px;
    padding:0 12px;
    font-size:.78rem;
  }

  .case-audio.is-docked .case-audio-row,
  .case-audio.is-docked .case-audio-timeline{
    display:contents;
  }

  .case-audio.is-docked .case-audio-transport{
    order:1;
    flex:none;
    gap:8px;
  }

  .case-audio.is-docked .case-audio-btn,
  .case-audio.is-docked .case-audio-skip{
    min-width:52px;
    min-height:44px;
    height:44px;
    padding:0 12px;
  }

  .case-audio.is-docked .case-audio-play{
    width:52px;
    min-width:52px;
    height:44px;
  }

  .case-audio.is-docked [data-audio-prev],
  .case-audio.is-docked [data-audio-next]{
    display:none;
  }

  .case-audio.is-docked .case-audio-bar,
  .case-audio.is-docked [data-audio-duration]{
    display:none;
  }

  .case-audio.is-docked [data-audio-elapsed]{
    order:4;
    flex:1 1 auto;
    min-width:0;
    margin:0;
    text-align:center;
    font-size:.72rem;
    color:var(--listen-paper);
  }

  .case-audio.is-docked.is-invite [data-audio-back],
  .case-audio.is-docked.is-invite [data-audio-fwd]{
    display:none;
  }

  .case-audio.is-docked.is-invite [data-audio-elapsed]{
    font-family:"JetBrains Mono",ui-monospace,monospace;
    font-size:.62rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--listen-accent);
    cursor:pointer;
  }
}

.case-study [data-listen-seek]{
  cursor:pointer;
}

.case-study .is-listening{
  background:color-mix(in srgb, var(--rust, #b5390d) 40%, var(--ivory, #f8f2e0));
  border-left:3px solid var(--rust, #b5390d);
  border-radius:0 6px 6px 0;
  padding:.28em .7em .32em .75em;
  margin:.12em 0;
  box-shadow:none;
}

.case-study .glance-card.is-listening,
body.layout-studio .glance-card.is-listening{
  margin:0;
  padding:1.2rem 1.25rem 1.35rem;
  border-radius:18px;
  background:color-mix(in srgb, var(--rust, #b5390d) 40%, var(--ivory, #f8f2e0));
  border-left:3px solid var(--rust, #b5390d);
}

html[data-listen-dock="on"]{
  --listen-dock-h:0px;
}

/* Wayfinder is outside main. Slack has to land after it, or the dock covers the last rows. */
html[data-listen-dock="on"] body{
  padding-bottom:calc(20px + var(--listen-dock-h, 0px) + env(safe-area-inset-bottom, 0px));
}

@media (max-width:1099px){
  html[data-listen-dock="on"] body{
    padding-bottom:calc(72px + var(--listen-dock-h, 0px) + env(safe-area-inset-bottom, 0px));
  }
}