/* =====================================================================================================================
   Channel window (js/ui/pages/channel.js, id 'channel', layout 'single'). ch- prefix.
   A header (title, refresh), a note (the cooldown or combat wait when there is one), then one row per channel of the
   current map: CH number (+ "you are here" / "empty"), a load bar with pilots / cap, and [ย้าย].
   ===================================================================================================================== */

.ch {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.ch .ghead {
  flex: none;
  margin-bottom: calc(6 * var(--u));
}
.ch-note {
  flex: none;
  margin: 0 0 calc(12 * var(--u));
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--dim);
}
.ch-scroll {
  padding: calc(2 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(2 * var(--u));
}
.ch-list {
  display: grid;
  gap: calc(10 * var(--u));
  max-width: calc(640 * var(--u));
}
.ch-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(14 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u));
}
.ch-row.is-here {
  box-shadow: inset 3px 0 0 var(--info);
}
.ch-name {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-width: 0;
}
.ch-name b {
  font-size: var(--fs-md, 16px);
}
.ch-load {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: var(--fs-sm);
  color: var(--dim);
}
.ch-bar {
  flex: 1;
  height: calc(6 * var(--u));
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.ch-bar i {
  display: block;
  height: 100%;
  background: var(--info);
}
/* the map name under the minimap opens this window */
#zoneTag[role='button'] {
  cursor: pointer;
}
#zoneTag[role='button']:hover,
#zoneTag[role='button']:focus-visible {
  background: linear-gradient(90deg, rgba(57, 198, 217, 0.3), transparent 80%);
  outline: none;
}
@media (max-width: 560px) {
  .ch-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .ch-load {
    grid-column: 1 / -1;
    order: 3;
  }
}