/*
 * Station library deck
 *
 * This component deliberately uses its own cassette class system. The main
 * stylesheet contains earlier station-card experiments; keeping the physical
 * deck here makes this the single, readable source of truth for the library.
 */

.stationBank {
  --deck-silver-1: #d6d8d5;
  --deck-silver-2: #aeb3b0;
  --deck-silver-3: #818985;
  --deck-edge: #555e5a;
  --deck-black: #0d1211;
  --deck-green: #7bc788;
  --deck-red: #bc5147;
  background: linear-gradient(180deg, #263330 0%, #1b2623 48%, #111917 100%);
  border-right: 6px solid #0d1412;
  box-shadow:
    inset -1px 0 rgba(164,177,170,.38),
    inset -5px 0 12px rgba(0,0,0,.32),
    4px 0 0 #0a100f;
  color: #eeeae0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px 10px 10px;
}

.stationBank .bankHeader {
  align-items: center;
  border-bottom: 1px solid #65736d;
  box-shadow: 0 1px rgba(0,0,0,.55);
  display: flex;
  justify-content: space-between;
  margin: 0 3px 9px;
  padding: 0 2px 9px;
}

.stationBank .bankHeader .moduleCode {
  color: #9eada6;
  font-size: 8px;
  letter-spacing: .18em;
  margin-bottom: 4px;
  text-shadow: 0 1px #070b0a;
}

.stationBank .bankHeader h2 {
  color: #f0ede4;
  font-size: 28px;
  letter-spacing: -.045em;
  text-shadow: 0 2px #0b100f;
}

.stationBank .bankHeader button {
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), transparent 46%),
    linear-gradient(180deg, #8fbd96, #5c8c66);
  border: 1px solid #26312e;
  border-radius: 2px;
  box-shadow: inset 0 1px rgba(255,255,255,.42), 0 3px 0 #313b38 !important;
  color: #17221c;
  min-height: 39px;
  padding-inline: 14px;
}

.stationBank .bankHeader button:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), transparent 46%),
    linear-gradient(180deg, #9bc8a1, #669a70);
  transform: none;
}

.bankControlDeck {
  background: linear-gradient(180deg, #34413d, #222d2a);
  border: 1px solid #52615b;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(213,222,216,.12),
    inset 0 -2px rgba(0,0,0,.28),
    0 2px 5px rgba(0,0,0,.35);
  margin: 0 2px 9px;
  padding: 6px;
}

.stationBank .bankStats {
  background: #101615;
  border: 1px solid #3e4844;
  border-radius: 3px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.78), 0 1px rgba(255,255,255,.22);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 6px;
  min-height: 47px;
}

.stationBank .bankStats span {
  border-right: 1px solid #36403c;
  color: #c9d0cb;
  display: grid;
  font-size: 7px;
  gap: 1px;
  line-height: 1.1;
  padding: 6px 8px;
  text-transform: uppercase;
}

.stationBank .bankStats span:last-child {
  border-right: 0;
}

.stationBank .bankStats strong {
  color: #a9d09e;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 0 5px rgba(137,196,127,.22);
}

.stationBank .searchField {
  color: #ebe8df;
  gap: 4px;
}

.stationBank .searchField > span {
  color: #b8c2bd;
  font-size: 8px;
  letter-spacing: .13em;
  text-shadow: 0 1px #090d0c;
}

.stationBank .searchField input {
  background: #0b100f;
  border: 1px solid #252e2b;
  border-radius: 2px;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.86), 0 1px rgba(255,255,255,.22);
  color: #f0eee6;
  min-height: 35px;
  padding: 7px 9px;
}

.stationBank .searchField input::placeholder {
  color: #9ba29e;
  opacity: .9;
}

.stationBank .bankFilters {
  background: #1a2220;
  border: 1px solid #38423e;
  border-radius: 2px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.62), 0 1px rgba(255,255,255,.18);
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 6px 0 0;
  padding: 3px;
}

.stationBank .bankFilters button {
  background: linear-gradient(180deg, #5d6763, #343e3a);
  border: 1px solid #77817c;
  border-radius: 1px;
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 1px 0 #0c1110 !important;
  color: #f0eee7;
  min-height: 28px;
  padding: 0 6px;
  text-shadow: 0 1px #131917;
}

.stationBank .bankFilters button:hover:not(:disabled) {
  background: linear-gradient(180deg, #6a7470, #404b47);
  border-color: #9ba39f;
  transform: none;
}

.stationBank .bankFilters button.active,
.stationBank .bankFilters button[aria-pressed="true"] {
  background: linear-gradient(180deg, #e1c873, #b99a49);
  border-color: #f1dc98;
  color: #121817;
  text-shadow: none;
}

/* One continuous deck, divided into machined station rows. */

.stationBank .stationList {
  align-content: start;
  background: linear-gradient(180deg, #171f1d, #0e1513);
  border: 1px solid #4d5a55;
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 2px rgba(159,174,166,.12),
    inset 0 4px 9px rgba(0,0,0,.58),
    0 2px 5px rgba(0,0,0,.42);
  display: grid;
  flex: 1;
  gap: 0;
  grid-auto-rows: max-content;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 5px 16px;
  scrollbar-color: #6a746f #252d2a;
}

.stationBank .stationItem {
  background: linear-gradient(180deg, #b9bebc, #939b97);
  border: 0;
  border-bottom: 1px solid #46534e;
  border-radius: 0;
  box-shadow: inset 0 -1px rgba(0,0,0,.5);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  min-height: 0;
  overflow: visible;
  position: relative;
  transform: none;
}

.stationBank .stationItem:first-child {
  border-radius: 2px 2px 0 0;
}

.stationBank .stationItem:last-child {
  border-bottom: 0;
  border-radius: 0 0 2px 2px;
}

.stationBank .stationItem:hover,
.stationBank .stationItem.active {
  border-color: #52615b;
  box-shadow: inset 0 -1px rgba(0,0,0,.5);
  transform: none;
}

.stationBank .stationItem.active {
  background: linear-gradient(180deg, #c3c7c4, #9da49f);
}

.stationBank .stationItem::before,
.stationBank .stationItem::after {
  display: none;
}

/* Side transport rail. */

.stationBank .stationOrder {
  align-content: center;
  background: linear-gradient(180deg, #aeb5b1, #858e89);
  border-right: 1px solid #717a76;
  box-shadow: inset -1px 0 rgba(243,245,242,.56);
  display: grid;
  gap: 7px;
  grid-template-rows: 23px 9px minmax(62px, 1fr);
  justify-items: center;
  padding: 10px 6px;
  position: relative;
}

.stationBank .stationOrder::before,
.stationBank .stationOrder::after {
  content: none;
  display: none;
}

.stationBank .stationIndex {
  align-self: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #151a19;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  min-width: 0;
  padding: 0;
  text-shadow: 0 1px rgba(255,255,255,.58);
}

.stationBank .stationOrderLamp {
  background: #b84f45;
  border: 1px solid #4a201d;
  border-radius: 3px;
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 0 0 2px rgba(75,81,77,.22);
  display: block;
  height: 8px;
  line-height: 0;
  min-width: 0;
  padding: 0;
  width: 8px;
}

.stationBank .stationItem.active .stationOrderLamp {
  background: #e86659;
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 0 0 2px rgba(75,81,77,.22), 0 0 5px rgba(219,91,78,.4);
}

.stationBank .stationOrder button {
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), transparent 45%),
    linear-gradient(180deg, #b8bdba, #747d79);
  border: 1px solid #4d5652 !important;
  border-radius: 2px;
  box-shadow: inset 0 1px rgba(255,255,255,.55), inset 0 -1px rgba(42,50,47,.25), 0 3px 0 #515a56 !important;
  color: #f3f4f1;
  font-size: 13px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  text-shadow: 0 1px #4b5450;
  width: 39px;
}

.stationBank .stationOrder button:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), transparent 45%),
    linear-gradient(180deg, #c4c9c6, #818a86);
  filter: none;
  transform: none;
}

.stationBank .stationOrder button:active:not(:disabled) {
  box-shadow: inset 0 2px 4px rgba(44,51,49,.32), 0 1px 0 #515a56 !important;
  transform: translateY(2px);
}

.stationBank .stationOrder button:disabled {
  color: #e0e2df;
  opacity: .42;
}

/* Beat the legacy global tactile-button selector without changing other UI. */
.stationBank .stationList .stationItem .stationOrder button {
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), transparent 45%),
    linear-gradient(180deg, #c4c8c5, #7f8884) !important;
  border-color: #4d5652 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.58), inset 0 -1px rgba(42,50,47,.25), 0 3px 0 #515a56 !important;
}

.stationBank .stationList .stationItem .stationOrder button:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.56), transparent 45%),
    linear-gradient(180deg, #d0d4d1, #8e9793) !important;
}

.stationBank .stationList .stationItem .stationOrder button:active:not(:disabled) {
  box-shadow: inset 0 2px 4px rgba(44,51,49,.32), 0 1px 0 #515a56 !important;
}

.stationBank .stationList .stationItem .stationOrder button:disabled {
  opacity: .56;
}

.stationBank .stationList .stationItem .stationOrder .stationPlayButton {
  align-items: center;
  display: flex;
  height: 62px;
  justify-content: center;
  min-height: 62px;
  width: 39px;
}

.stationBank .stationPlayIcon {
  font-size: 18px;
  line-height: 1;
}

.stationBank .stationList .stationItem .stationOrder .stationPlayButton.is-playing {
  background:
    linear-gradient(180deg, rgba(255,255,255,.38), transparent 45%),
    linear-gradient(180deg, #8dca95, #4d875c) !important;
  border-color: #315f3c !important;
  box-shadow: inset 0 1px rgba(255,255,255,.48), inset 0 -1px rgba(29,65,38,.34), 0 1px 0 #3c5142 !important;
  color: #102116;
  text-shadow: 0 1px rgba(255,255,255,.35);
  transform: translateY(2px);
}

.stationBank .stationList .stationItem .stationOrder .stationPlayButton.is-loading {
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), transparent 45%),
    linear-gradient(180deg, #d8b768, #99782f) !important;
  border-color: #725a24 !important;
  color: #2b210d;
}

.stationBank .stationSignal {
  align-items: center;
  background: linear-gradient(180deg, #c9ccca, #8f9793);
  border: 1px solid #737b77;
  border-radius: 50%;
  box-shadow: inset 0 1px rgba(255,255,255,.6), 0 1px 2px rgba(45,53,50,.36);
  display: flex;
  height: 18px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  z-index: 8;
}

.stationBank .stationSignal i {
  background: #53615b;
  border: 1px solid #41504a;
  border-radius: 50%;
  box-shadow: inset 0 1px rgba(255,255,255,.16);
  height: 9px;
  width: 9px;
}

.stationBank .stationSignal i.lit {
  background: var(--deck-green);
  border-color: #3b6948;
  box-shadow: inset 0 1px rgba(255,255,255,.48), 0 0 5px rgba(123,199,136,.55);
}

/* The station button is now only the recessed cassette well. */

.stationBank .stationSelect,
.stationBank .stationItem:nth-child(even) .stationSelect {
  align-items: stretch;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: block;
  filter: none;
  margin: 0;
  min-width: 0;
  overflow: visible;
  padding: 11px 10px 11px 14px;
  position: relative;
  text-align: left;
  transform: none;
  width: 100%;
}

.stationBank .stationSelect:hover:not(:disabled),
.stationBank .stationSelect:active:not(:disabled) {
  background: transparent;
  box-shadow: none;
  filter: none;
  transform: none;
}

.stationBank .stationSelect:focus-visible {
  outline: 0;
}

.stationBank .stationSelect:focus-visible .cassetteBay {
  box-shadow:
    0 0 0 2px #f0d16f,
    0 0 0 4px #59615e,
    inset 0 5px 10px rgba(0,0,0,.8),
    0 3px 5px rgba(43,50,47,.46);
}

.stationBank .cassetteBay {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 16%),
    #080c0b;
  border: 2px solid #333b38;
  border-radius: 5px;
  box-shadow:
    0 0 0 2px #aeb4b1,
    0 0 0 3px #59615e,
    inset 0 6px 10px rgba(0,0,0,.86),
    inset 5px 0 7px rgba(0,0,0,.55),
    inset -5px 0 7px rgba(0,0,0,.55),
    0 3px 5px rgba(43,50,47,.46);
  box-sizing: border-box;
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 8px;
  position: relative;
  width: 100%;
}

.stationBank .stationSelect:hover .cassetteBay {
  border-color: #46504c;
}

.stationBank .stationItem.active .cassetteBay {
  box-shadow:
    0 0 0 2px #b7bcb9,
    0 0 0 3px #636b67,
    inset 0 6px 10px rgba(0,0,0,.86),
    inset 5px 0 7px rgba(0,0,0,.55),
    inset -5px 0 7px rgba(0,0,0,.55),
    0 3px 5px rgba(43,50,47,.46);
}

/* Full-size compact cassette. */

.deckCassette {
  aspect-ratio: 1.6;
  background:
    radial-gradient(circle at 8px 8px, #0b0e0d 0 2px, #777c79 2.5px 4px, #171c1a 4.5px 6px, transparent 6.5px),
    radial-gradient(circle at calc(100% - 8px) 8px, #0b0e0d 0 2px, #777c79 2.5px 4px, #171c1a 4.5px 6px, transparent 6.5px),
    radial-gradient(circle at 8px calc(100% - 8px), #0b0e0d 0 2px, #777c79 2.5px 4px, #171c1a 4.5px 6px, transparent 6.5px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #0b0e0d 0 2px, #777c79 2.5px 4px, #171c1a 4.5px 6px, transparent 6.5px),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #373c3a, #1a1f1d 68%, #111513);
  border: 1px solid #6c726f;
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 1px #121615,
    inset 0 1px rgba(255,255,255,.17),
    inset 0 -2px rgba(0,0,0,.48),
    0 4px 5px rgba(0,0,0,.66);
  box-sizing: border-box;
  display: block;
  min-width: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.deckCassetteLabel {
  background:
    linear-gradient(90deg, transparent 0 12px, rgba(72,91,88,.14) 12px 13px, transparent 13px),
    repeating-linear-gradient(0deg, transparent 0 20px, rgba(51,58,56,.06) 20px 21px),
    linear-gradient(180deg, #eeeae1, #d9d6cd);
  border: 1px solid #727975;
  box-shadow: 0 2px 3px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.74);
  box-sizing: border-box;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
  color: #191f1e;
  display: grid;
  gap: 2px;
  grid-template-rows: minmax(17px, auto) 14px 17px;
  height: calc(51% - 9px);
  left: 15px;
  padding: 6px 10px 5px 15px;
  position: absolute;
  right: 15px;
  top: 9px;
  z-index: 5;
}

.deckCassetteTitle {
  align-items: center;
  display: flex;
  gap: 7px;
  justify-content: space-between;
  min-width: 0;
}

.deckCassetteTitle strong {
  color: #161c1b;
  font-size: 15px;
  letter-spacing: -.02em;
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deckCassetteStatus {
  background: rgba(230,235,228,.7);
  border: 1px solid #56655d;
  border-radius: 1px;
  color: #294736;
  flex: 0 0 auto;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
  padding: 3px 5px;
  text-transform: uppercase;
}

.deckCassetteStatus.attention {
  background: rgba(235,210,165,.76);
  border-color: #72563b;
  color: #59331f;
}

.deckCassetteStatus.off {
  background: rgba(205,203,193,.8);
  border-color: #666b66;
  color: #4a504d;
}

.deckCassetteMeta {
  align-items: center;
  border-top: 1px solid rgba(78,87,84,.2);
  color: #394542;
  display: flex;
  font-size: 9px;
  gap: 7px;
  justify-content: space-between;
  line-height: 1.15;
  min-width: 0;
  padding-top: 2px;
}

.deckCassetteMeta > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deckCassetteMeta > span:last-child {
  flex: 0 1 42%;
  text-align: right;
}

.deckCassetteFooter {
  align-items: center;
  border-top: 1px solid rgba(78,87,84,.22);
  display: flex;
  gap: 4px;
  justify-content: space-between;
  min-width: 0;
  padding-top: 2px;
}

.deckCassetteTags {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

.deckCassetteTags span {
  background: rgba(218,216,208,.7);
  border: 1px solid #858b86;
  color: #3e4946;
  font-size: 7px;
  line-height: 1;
  max-width: 60px;
  overflow: hidden;
  padding: 2px 4px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.deckCassettePreference {
  border-left: 1px solid #8a8e89;
  color: #4b5652;
  flex: 0 1 auto;
  font-size: 7px;
  line-height: 1;
  max-width: 58px;
  overflow: hidden;
  padding-left: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deckCassettePreference.positive {
  color: #2c5b3b;
}

.deckCassettePreference.negative {
  color: #774331;
}

/* Integrated ribbed transport band. */

.deckCassetteTransport {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, rgba(0,0,0,.055) 1px 3px),
    linear-gradient(180deg, #343936, #1b201e);
  border-bottom: 1px solid #0b0e0d;
  border-top: 0;
  bottom: 16%;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.36), inset 0 -1px rgba(255,255,255,.05);
  display: block;
  height: 27%;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 4;
}

.deckCassetteReel {
  background: repeating-conic-gradient(from -3deg, #f0efe9 0 12deg, #5d6461 12deg 30deg);
  border: 3px solid #6a706d;
  border-radius: 50%;
  box-shadow:
    0 0 0 4px #242927,
    0 0 0 5px #5b615e,
    inset 0 0 0 5px #d7d7d1,
    0 2px 3px rgba(0,0,0,.48);
  display: block;
  height: 32px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: 50% 50%;
  width: 32px;
  z-index: 5;
}

.deckCassetteReel::after {
  background:
    radial-gradient(circle, #101513 0 35%, transparent 38%),
    repeating-conic-gradient(from -3deg, #eeede7 0 13deg, #252b29 13deg 30deg);
  border: 1px solid #efeee8;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #333a37, inset 0 0 0 1px #737a76;
  content: "";
  inset: 5px;
  position: absolute;
}

.deckCassetteReelLeft {
  left: 22px;
}

.deckCassetteReelRight {
  right: 22px;
}

.deckCassetteTapeWindow {
  background: #090c0b;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.92), 0 1px rgba(255,255,255,.08);
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  height: 27px;
  left: 29%;
  overflow: hidden;
  position: absolute;
  right: 29%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.deckCassetteTapeWindow::after {
  background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(205,201,188,.18) 8px 9px);
  content: "";
  height: 5px;
  left: 12%;
  opacity: .55;
  position: absolute;
  right: 12%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
}

.deckCassetteTape {
  background:
    repeating-linear-gradient(88deg, #4b342d 0 2px, #1d1512 2px 5px, #35231e 5px 7px),
    linear-gradient(180deg, #34241f, #17110f 50%, #2c1d19);
  background-position: 0 0, 0 0;
  background-size: 7px 14px, 100% 100%;
  bottom: 2px;
  display: block;
  position: absolute;
  top: 2px;
  z-index: 2;
}

.deckCassetteTapeLeft {
  border-radius: 50% 4px 4px 50% / 50% 20% 20% 50%;
  left: 4px;
  width: 40%;
}

.deckCassetteTapeRight {
  border-radius: 4px 50% 50% 4px / 20% 50% 50% 20%;
  right: 4px;
  width: 44%;
}

/* Lower shell and deliberate transport holes. */

.deckCassetteHeadPlate {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, rgba(0,0,0,.05) 1px 3px),
    linear-gradient(180deg, #343936, #181d1b);
  bottom: 1px;
  box-shadow: inset 0 1px rgba(129,137,132,.22), inset 0 -1px rgba(0,0,0,.5);
  clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
  height: 25%;
  left: 14px;
  position: absolute;
  right: 14px;
  z-index: 3;
}

.deckCassetteHeadHoles {
  align-items: end;
  bottom: 2px;
  display: grid;
  grid-template-columns: 10px 8px 12px 8px 10px;
  justify-content: space-between;
  left: 15%;
  position: absolute;
  right: 15%;
}

.deckCassetteHeadHoles i {
  background: #070a09;
  border: 1px solid #555c59;
  box-shadow: inset 0 1px 2px #000, 0 1px rgba(255,255,255,.06);
  display: block;
}

.deckCassetteCapstan {
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

.deckCassetteGuide {
  border-radius: 2px;
  height: 8px;
  width: 8px;
}

.deckCassetteHead {
  background: linear-gradient(180deg, #d8dad5, #6f7773 55%, #262d2a) !important;
  border-color: #515a56 !important;
  border-radius: 1px;
  height: 8px;
  width: 12px;
}

/* Selection is a transport cue, never a layout animation. */

body.station-switching .stationItem.active .deckCassette,
body.station-switching .stationItem.active .cassetteBay,
body.station-switching .stationItem.active .stationSelect {
  animation: none;
  transform: none;
}

body.station-switching .stationItem.active .deckCassetteReel {
  animation: deckCassetteReelRun 900ms cubic-bezier(.18,.72,.2,1);
}

body.station-switching .stationItem.active .deckCassetteTape {
  animation-duration: 900ms;
  animation-timing-function: linear;
}

body.station-switching .stationItem.active .deckCassetteTapeLeft {
  animation-name: deckCassetteTapeRunLeft;
}

body.station-switching .stationItem.active .deckCassetteTapeRight {
  animation-name: deckCassetteTapeRunRight;
}

body.station-switching .stationItem.active .deckCassetteHead {
  animation: deckCassetteHeadCue 820ms ease-out;
}

body.station-switching .stationItem.active .stationOrderLamp,
body.station-switching .stationItem.active .stationSignal i.lit {
  animation: deckStationLampCue 820ms steps(1, end);
}

@keyframes deckCassetteReelRun {
  0% { transform: translateY(-50%) rotate(0deg); }
  12% { transform: translateY(-50%) rotate(-16deg); }
  78% { transform: translateY(-50%) rotate(-520deg); }
  100% { transform: translateY(-50%) rotate(-540deg); }
}

@keyframes deckCassetteTapeRunLeft {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 -44px, 0 0; }
}

@keyframes deckCassetteTapeRunRight {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 44px, 0 0; }
}

@keyframes deckCassetteHeadCue {
  0%, 100% { filter: brightness(1); }
  18% { filter: brightness(.66); }
  42% { filter: brightness(1.18); }
}

@keyframes deckStationLampCue {
  0%, 16%, 34% { filter: brightness(.55); opacity: .45; }
  8%, 24%, 42%, 100% { filter: brightness(1.12); opacity: 1; }
}

/* Local playback keeps the loaded tape visibly running until paused. */

body .stationBank .stationItem.is-local-playing .deckCassetteReel {
  animation: deckCassetteReelRunContinuous 780ms linear infinite;
}

body .stationBank .stationItem.is-local-playing .deckCassetteTapeLeft {
  animation: deckCassetteTapeRunLeft 760ms linear infinite;
}

body .stationBank .stationItem.is-local-playing .deckCassetteTapeRight {
  animation: deckCassetteTapeRunRight 760ms linear infinite;
}

body .stationBank .stationItem.is-local-playing .stationOrderLamp {
  animation: deckLocalPlayLamp 1.35s ease-in-out infinite;
  background: #78c985;
  border-color: #315f3c;
}

body .stationBank .stationItem.is-local-loading .stationOrderLamp {
  animation: deckLocalLoadingLamp 620ms ease-in-out infinite alternate;
  background: #e6ad45;
  border-color: #76551d;
  box-shadow: inset 0 1px rgba(255,255,255,.48), 0 0 7px rgba(230,173,69,.72);
}

@keyframes deckCassetteReelRunContinuous {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(-360deg); }
}

@keyframes deckLocalPlayLamp {
  0%, 100% { box-shadow: inset 0 1px rgba(255,255,255,.35), 0 0 3px rgba(120,201,133,.36); filter: brightness(.88); }
  50% { box-shadow: inset 0 1px rgba(255,255,255,.48), 0 0 9px rgba(120,201,133,.72); filter: brightness(1.14); }
}

@keyframes deckLocalLoadingLamp {
  from { filter: brightness(.7); opacity: .65; }
  to { filter: brightness(1.25); opacity: 1; }
}

/* Sorting keeps the chassis still and lifts only the cartridge. */

.stationBank .stationSelect[draggable="true"] {
  cursor: grab;
}

.stationBank .stationSelect[draggable="true"]:active,
.stationBank .stationItem.is-dragging .stationSelect {
  cursor: grabbing;
}

.stationBank .stationItem.is-dragging {
  filter: none;
  opacity: 1;
}

.stationBank .stationItem.is-dragging .stationOrder {
  opacity: .58;
}

.stationBank .stationItem.is-dragging .cassetteBay {
  box-shadow:
    0 0 0 2px #c8b15f,
    0 0 0 4px #59615e,
    inset 0 6px 10px rgba(0,0,0,.86),
    0 7px 10px rgba(30,37,34,.46);
  transform: scale(.985);
}

.stationBank .stationItem.drop-before::before,
.stationBank .stationItem.drop-after::before {
  background: #e1bd56;
  box-shadow: 0 0 0 1px #323a37, 0 0 5px rgba(225,189,86,.48);
  content: "";
  display: block;
  height: 3px;
  left: 3px;
  pointer-events: none;
  position: absolute;
  right: 3px;
  z-index: 20;
}

.stationBank .stationItem.drop-before::before {
  top: -2px;
}

.stationBank .stationItem.drop-after::before {
  bottom: -2px;
}

.stationBank .stationItem.drop-before::after,
.stationBank .stationItem.drop-after::after {
  display: none;
}

.stationBank .emptyState {
  align-self: start;
  background: #151c1a;
  border: 1px solid #4f5a55;
  border-radius: 2px;
  color: #eceae2;
  margin: 8px;
  padding: 18px;
}

/* Compact desktop and mobile keep the physical proportions intact. */

@media (max-height: 760px) and (min-width: 841px) {
  .stationBank {
    padding: 8px 8px 7px;
  }

  .stationBank .bankHeader {
    margin-bottom: 6px;
    padding-bottom: 6px;
  }

  .stationBank .bankHeader h2 {
    font-size: 25px;
  }

  .bankControlDeck {
    margin-bottom: 6px;
    padding: 5px;
  }

  .stationBank .bankStats {
    min-height: 40px;
  }

  .stationBank .bankStats span {
    padding-block: 4px;
  }

  .stationBank .searchField > span {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .stationBank .searchField input {
    min-height: 32px;
  }

  .stationBank .bankFilters {
    margin-top: 5px;
  }

  .stationBank .bankFilters button {
    min-height: 25px;
  }

  .stationBank .stationItem {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .stationBank .stationOrder {
    grid-template-rows: 20px 7px minmax(54px, 1fr);
    padding-block: 8px;
  }

  .stationBank .stationOrder button {
    height: 33px;
    min-height: 33px;
    width: 35px;
  }

  .stationBank .stationList .stationItem .stationOrder .stationPlayButton {
    height: 54px;
    min-height: 54px;
    width: 35px;
  }

  .stationBank .stationSelect {
    padding: 9px 8px 9px 12px;
  }

  .stationBank .cassetteBay {
    padding: 7px;
  }
}

@media (max-width: 840px) {
  .stationBank {
    padding: 8px;
  }

  .stationBank .bankHeader {
    margin-bottom: 7px;
    padding-bottom: 7px;
  }

  .bankControlDeck {
    margin-bottom: 7px;
  }

  .stationBank .stationList {
    padding-bottom: 18px;
  }
}

@media (max-width: 430px) {
  .stationBank {
    padding: 7px;
  }

  .stationBank .bankHeader h2 {
    font-size: 26px;
  }

  .stationBank .bankHeader button {
    min-height: 37px;
    padding-inline: 12px;
  }

  .stationBank .stationItem {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .stationBank .stationOrder {
    grid-template-rows: 21px 8px minmax(58px, 1fr);
    padding-inline: 5px;
  }

  .stationBank .stationOrder button {
    height: 36px;
    min-height: 36px;
    width: 37px;
  }

  .stationBank .stationList .stationItem .stationOrder .stationPlayButton {
    height: 58px;
    min-height: 58px;
    width: 37px;
  }

  .stationBank .stationSelect,
  .stationBank .stationItem:nth-child(even) .stationSelect {
    padding: 10px 8px 10px 13px;
  }

  .stationBank .cassetteBay {
    padding: 7px;
  }

  .deckCassetteLabel {
    left: 14px;
    padding-left: 13px;
    right: 14px;
  }

  .deckCassetteTitle strong {
    font-size: 14px;
  }

  .deckCassetteReel {
    height: 30px;
    width: 30px;
  }

  .deckCassetteReelLeft {
    left: 20px;
  }

  .deckCassetteReelRight {
    right: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.station-switching .stationItem.active .deckCassetteReel,
  body.station-switching .stationItem.active .deckCassetteTape,
  body.station-switching .stationItem.active .deckCassetteHead,
  body.station-switching .stationItem.active .stationOrderLamp,
  body.station-switching .stationItem.active .stationSignal i.lit {
    animation: none;
  }

  body .stationBank .stationItem.is-local-playing .deckCassetteReel,
  body .stationBank .stationItem.is-local-playing .deckCassetteTape,
  body .stationBank .stationItem.is-local-playing .stationOrderLamp {
    animation: none;
  }

  body .stationBank .stationItem.is-local-loading .stationOrderLamp {
    animation: none;
  }
}