.soundcard-outer-container {
  position: relative;
  display: grid;
  grid-template-areas:
    "card"
    "progress";

  --pico-color: var(--bardic-dark);
  --pico-contrast: var(--bardic-dark);

  svg {
    --pico-color: var(--bardic-dark);
    --pico-contrast: var(--bardic-dark);
  }

  cursor: grab;
}

.soundcard-progress {
  grid-area: progress;

  /* Stacking context so the bar always wins hit-testing over the
     attribution row, which can overlap by a sub-pixel near the bottom of
     the card. */
  position: relative;
  z-index: 1;

  cursor: ew-resize;

  height: 0.3rem;
  --pico-progress-color: var(--pico-contrast);
  --pico-progress-background-color: var(--pico-muted-color);
  margin: 0;

  border-width: 1px;
  border-style: none solid solid solid;
  border-radius: 0 0 var(--pico-border-radius) var(--pico-border-radius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;

  transition: none;
  transition-timing-function: linear;
  animation: none;

  background-color: var(--pico-muted-color);
}

.soundcard-progress-off {
  color: var(--pico-muted-color);
}

.soundcard {
  font-family: var(--bardic-font-sans);
  color: var(--bardic-dark);
  --pico-color: var(--bardic-dark);
  --pico-contrast: var(--bardic-dark);

  background-color: var(--bardic-light);

  border: var(--gmfx-soundcard-border-width) solid;
  border-radius: var(--pico-border-radius);

  transition: all 0.1s ease-in-out;
}

.soundcard-with-limited-dimensions-for-library-dragging {
  font-family: var(--bardic-font-sans);
  color: var(--bardic-dark);
  --pico-color: var(--bardic-dark);
  --pico-contrast: var(--bardic-dark);

  background-color: var(--bardic-light);

  border: var(--gmfx-soundcard-border-width) solid;
  border-radius: var(--pico-border-radius);

  max-width: var(--gmfx-soundcard-width);
  max-height: var(--gmfx-soundcard-height);
}

/* TODO BL: remove this because it's only used in UploadDisabled */
.soundcard-plain-dimensions {
  width: var(--gmfx-soundcard-width);
  height: var(--gmfx-soundcard-height);

  /* To make space for the progress */
  border-bottom-width: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.soundcard-music-container {
  position: relative;
  display: grid;

  /* To make space for the progress */
  border-bottom-width: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;

  padding-top: var(--gmfx-soundcard-padding);
  padding-left: var(--gmfx-soundcard-padding);
  padding-right: var(--gmfx-soundcard-padding);
}

.soundcard-music-container-square {
  width: var(--gmfx-soundcard-width);
  height: var(--gmfx-soundcard-height);

  grid-template-areas:
    "header"
    "volume"
    "controls"
    "attribution";

  grid-template-rows: 3.5rem 1rem 2rem 1rem;
}

.soundcard-music-container-long {
  --music-card-width: 17rem;
  --music-card-height: 3.6rem;
  line-height: 1;

  grid-template:        
      "header volume"
      "header controls"
      "attribution controls";
    width: var(--music-card-width);
    height: var(--music-card-height);
  grid-template-rows: 1rem 3fr 1.5fr;
  grid-template-columns: auto 6.5rem;
  column-gap: 10px;
}

/* Default to the mobile layout in headless mode, regardless of screen size.
   The JS flips music cards to headless for any portrait viewport up to 1488px,
   so this can't live behind the <600px media query or the 600-1488px portrait
   range falls back to the fixed-width square/long grid (empty volume row +
   only 3 control columns for 4 buttons). */
.soundcard-outer-container.headless {
  width: 100%;
}

.soundcard-outer-container.headless .soundcard-progress {
  width: 100%;
}

.soundcard-music-container.headless {
  width: 100%;
  /* Fixed height so every card in the grid is the same size regardless of how
     many lines the title wraps to (the title is clamped below to fit). */
  height: 3.5rem;

  gap: 5px;
  grid-template-areas:
    "header controls"
    "attribution controls";
  grid-template-rows: auto 1rem;
  grid-template-columns: auto 8rem;
}

.soundcard-music-container.headless .soundcard-controls {
  --number-of-controls: 4; /* Volume, Play, Stop, Repeat */
  padding-bottom: var(--gmfx-soundcard-padding);
  align-content: center;
}

/* Clamp long titles to 2 lines (with ellipsis) so they stay within the card's
   fixed height instead of pushing it taller than its neighbours. */
.soundcard-music-container.headless .soundcard-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.soundcard-ambience-dimensions {
  width: clamp(20rem, 32.5%, 100%);
  min-height: 3.5rem;
  height: 3.5rem;
  line-height: 1rem;
}

.soundcard-ambience-layout {
  display: grid;
  align-items: center;
  gap: 1rem;
  grid-template-areas: "header volume enabled";
  grid-template-columns: fit-content(20rem) auto 2rem;

  height: 100%;
}

/* Default to the mobile layout in headless mode, regardless of screen size. */
.soundcard-ambience-layout.headless {
  display: grid;
  align-items: center;
  grid-template-areas: "header volume enabled";

  gap: 1rem;
  row-gap: 5px;
  grid-template-columns: auto 2rem 2rem;
  grid-template-rows: 2rem;
}


.soundcard-ambience-container {
  padding: var(--gmfx-soundcard-padding);

  /* Needed for the close button */
  position: relative;
}

.sound-attribution {
  font-size: x-small;
  color: var(--bardic-blue);

  line-height: 100%;
  vertical-align: bottom;
  height: 100%;

  a {
    color: var(--bardic-blue);
    text-decoration: none;
  }
}

.sound-attribution:hover {
  --pico-primary-underline: var(--bardic-blue);

  a {
    text-decoration: underline;
  }
}

.soundcard-effect-dimensions {
  width: fit-content(20rem);
}

.soundcard-effect-container {
  display: grid;
  column-gap: 5px;
  row-gap: 0.1rem;

  grid-template-areas:
    "header      effect-volume effect-play"
    "attribution  effect-volume effect-play";
  grid-template-columns: fit-content(18rem) 2rem 2rem;
  grid-template-rows: 1rem 0.7rem;

  align-items: center;

  padding: var(--gmfx-soundcard-padding);

  /* Needed for the close button */
  position: relative;
}

.soundcard-effect-container.headless {
  width: 100%;
  grid-template-areas: "header effect-volume effect-play";
  grid-template-columns: auto 2rem 2rem;
  grid-template-rows: 2rem;
}

.soundcard-effect-volume {
  grid-area: effect-volume;
}

.soundcard-effect-play {
  grid-area: effect-play;
}

.soundcard-header {
  min-width: 0px;
  grid-area: header;

  justify-content: center;
}

/* In headless mode, we always want short lines, regardless of whether we're on a wider screen */
.soundcard-header.headless {
  height: 100%;
  line-height: 1rem;
}

.soundcard-title {
  text-wrap: wrap;

  min-width: 0;
  max-height: 100%;
  margin-bottom: 0;

  .hover-target {
    svg {
      height: 1rem;
      width: 1rem;
    }
  }
}

.soundcard-attribution {
  grid-area: attribution;
}

.soundcard-button {
  width: 2rem;
  height: 2rem;

  padding: 0.1rem;
  margin: 0;

  border: none;
  background-color: transparent;
}

.soundcard-controls {
  --number-of-controls: 3; /* Play, Stop, Repeat */
  grid-area: controls;
  display: grid;
  grid-template-columns: repeat(var(--number-of-controls), minmax(1rem, 1fr));
  gap: 5px;
  justify-items: center;
  align-items: center;
}

.soundcard-volume {
  grid-area: volume;
}

.soundcard-volume-slider {
  height: 20px;
  margin: 0;
  --pico-spacing: 0px;
}

.soundcard-settings {
  position: absolute;
  bottom: 0;
  right: 0;
  border: 0;
  z-index: var(--bardic-z-indices-remove-scene);

  height: 1rem;
  width: 1rem;
  padding: 0;

  display: grid;

  align-items: center;
  justify-items: center;

  svg {
    height: 0.7rem;
    width: 0.7rem;
  }
}

.soundcard-settings:focus {
  background-color: transparent;
  --pico-box-shadow: none;
}

.soundcard-ambience-overlay {
  position: absolute;
  top: 0;
  left: 0;

  font-size: smaller;

  height: 100%;
  width: 100%;

  padding: var(--gmfx-soundcard-padding);

  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px;

  background-color: var(--bardic-dark);
  color: var(--bardic-light);

  select {
    padding-left: 3px;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;

    width: 2.5rem;
    font-size: smaller;
    background-position: center right;
  }
}

.soundcard-close-button {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  height: 1.3rem;
  transform: translate(50%, -60%);
  z-index: var(--bardic-z-indices-remove-sound);
  background-color: transparent;
  color: var(--bardic-dark);
  stroke: var(--bardic-dark);

  svg {
    color: var(--bardic-light);
    stroke: var(--bardic-light);
    fill: var(--bardic-dark);
  }

  padding: 0;
}

.soundcard-contrast {
  border-color: var(--pico-contrast);
  color: var(--pico-color);
}

.soundcard-off {
  border-color: var(--pico-muted-color);
  color: var(--pico-color);
}

.soundcard-enabled {
  --pico-background-color: var(--bardic-light);
}

.soundcard-dim {
  background-color: transparent;
}

.soundcard-highlight {
  border-color: var(--pico-color);
  filter: brightness(105%);
}

.upload-card {
  border-bottom-width: var(--gmfx-soundcard-border-width);
}

.soundcard-onpress-volume-container {
  display: grid;
  place-items: center;

  > * {
    grid-area: 1 / 1;
  }
}

.soundcard-vertical-volume-control {
  --range-onpress-bar-height: 2.6rem;
  --range-bar-width: 0.4rem;
  --range-thumb-size: 1rem;
  --range-border-color: var(--bardic-dark);
  --range-border-active-color: var(--bardic-light);

  z-index: var(--bardic-z-indices-remove-scene);

  input[type="range"] {
    height: var(--range-onpress-bar-height);
    width: var(--range-bar-width);
  }

  /******** Chrome and Safari ********/
  input[type="range"]::-webkit-slider-thumb {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  input[type="range"]::-moz-range-thumb {
    /* For some reason, we don't have to do this translation on Firefox. */
  }
}



@media screen and (width <600px) {
  .soundcard-title {
    line-height: calc(var(--pico-line-height) * 0.7);
  }

  .soundcard-title.headless {
    text-overflow: ellipsis;
    height: 3rem;
  }

  /* Music card width/grid/controls now live in the .headless rules above
     (music is always headless at <600px), so they're not duplicated here. */

  .soundcard-ambience-dimensions {
    width: 100%;
  }

  .soundcard-ambience-layout {
    display: grid;
    align-items: center;
    grid-template-areas: "header volume enabled";

    gap: 1rem;
    row-gap: 5px;
    grid-template-columns: auto 2rem 2rem;
    grid-template-rows: 2rem;
  }

  .soundcard-ambience-container {
    padding: var(--gmfx-soundcard-padding);
  }

  .soundcard-effect-dimensions {
    width: 100%;
  }

  .soundcard-effect-container {
    grid-template-areas: "header effect-volume effect-play" "attribution attribution attribution";
    grid-template-columns: auto 2rem 2rem;
    grid-template-rows: 2rem 0.7rem;
  }


  .soundcard-vertical-volume-control {
    --range-bar-thickness: 1.5rem;
    --range-thumb-size: 3rem;
    --range-onpress-bar-height: 6rem;
  }
}