/* The live fleet map (#508). Phones: the map fills the screen, with the list and the quick look in a sheet over its
   foot. From a tablet: the list beside the map. On big screens: the departures board too. The map is Apple's (ADR
   0026); everything on it is ours, in the postcard's colours. */

.fleet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "banner"
    "map"
    "panel";
}

main:has(.fleet) {
  padding-block: 0;
}

.fleet-banner {
  grid-area: banner;
  margin: 0;
  border-radius: 0;
}

.fleet-banner[hidden] {
  display: none;
}

.fleet-map {
  grid-area: map;
  position: relative;
  height: 70dvh;
  min-height: 18rem;
  background: var(--water);
}

.fleet-map-canvas {
  position: absolute;
  inset: 0;
}

.fleet-map.unavailable {
  height: auto;
  min-height: 0;
  background: none;
}

.fleet-map.unavailable .fleet-map-canvas {
  display: none;
}

.fleet-map-note {
  margin: 0;
  padding: var(--space-4) var(--gutter);
  padding-inline: max(var(--gutter), var(--inset-left)) max(var(--gutter), var(--inset-right));
  color: var(--ink-2);
}

/* The sheet, on a phone: under the map, never over Apple's mark and legal link. */
.fleet-panel {
  grid-area: panel;
  position: relative;
  padding: var(--space-4) max(var(--gutter), var(--inset-right)) var(--space-6) max(var(--gutter), var(--inset-left));
  background: var(--mist);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -1px 0 var(--ink-2), 0 -8px 24px rgb(0 0 0 / 0.12);
}

.fleet-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.fleet-panel h1 {
  margin: 0;
  font-size: var(--step-2);
}

.fleet-panel h2 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--step-1);
}

.fleet-panel-toggle,
.fleet-look-close {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ink-2);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
}

.fleet-panel-body.collapsed > :not(.fleet-look, .fleet-summary) {
  display: none;
}

.fleet-summary {
  margin: var(--space-2) 0 0;
  color: var(--ink-2);
}

.fleet-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fleet-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--space-3);
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.fleet-row:hover {
  border-color: var(--ink-2);
}

.fleet-row[aria-current="true"] {
  border-color: var(--sound);
  box-shadow: inset 0 0 0 1px var(--sound);
}

.fleet-row-name {
  font-family: var(--display);
  font-weight: 700;
}

.fleet-row-detail {
  flex-basis: 100%;
  color: var(--ink-2);
  font-size: var(--step--1);
}

.fleet-look {
  margin-top: var(--space-4);
}

.fleet-look[hidden] {
  display: none;
}

.fleet-look:focus {
  outline: none;
}

.fleet-look-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.fleet-look h2 {
  margin: 0;
  font-size: var(--step-2);
}

.fleet-look h3 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--step-0);
}

.fleet-look-lead .tag {
  margin-inline-end: var(--space-1);
}

.fleet-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin: var(--space-3) 0 0;
}

.fleet-facts dt {
  color: var(--ink-2);
}

.fleet-facts dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
}

.fleet-sailings {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fleet-sailings li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.fleet-sailings .time,
.fleet-board .time {
  font-family: var(--display);
  font-weight: 700;
}

.fleet-was {
  color: var(--ink-2);
  text-decoration: line-through;
}

.fleet-app {
  margin: var(--space-4) 0 0;
}

.fleet-keys,
.fleet-credit {
  margin: var(--space-5) 0 0;
  color: var(--ink-2);
  font-size: var(--step--1);
}

.fleet-keys kbd {
  padding: 0 0.35em;
  border: 1px solid var(--ink-2);
  border-radius: 4px;
  font: inherit;
}

/* The departures board: big screens only, beside the list. */
.fleet-board {
  display: none;
}

.fleet-board h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--step-1);
}

.fleet-board table {
  width: 100%;
  border-collapse: collapse;
}

.fleet-board th,
.fleet-board td {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-2) 35%, transparent);
  text-align: start;
  vertical-align: top;
}

.fleet-board td {
  overflow-wrap: normal;
}

.fleet-board .tag {
  white-space: nowrap;
}

.fleet-board th {
  color: var(--ink-2);
  font-size: var(--step--1);
  font-weight: 600;
}

/* From a tablet: the list beside the map, which takes the rest of the screen and stays put. */
@media (min-width: 48rem) {
  .fleet {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
    grid-template-areas:
      "banner banner"
      "map panel";
    align-items: start;
  }

  .fleet-map {
    position: sticky;
    top: 0;
    height: calc(100dvh - 4.5rem);
  }

  .fleet-panel {
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
  }
}

/* Big screens: the departures board too. */
@media (min-width: 110rem) {
  .fleet {
    grid-template-columns: minmax(0, 1fr) 24rem 40rem;
    grid-template-areas:
      "banner banner banner"
      "map panel board";
  }

  .fleet-board {
    display: block;
    grid-area: board;
    padding: var(--space-4) var(--space-4) var(--space-6);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
  }
}

/* ── On the map: the marks are ours, in the postcard's colours, and hidden from assistive technology (the list is
   their equivalent). ──────────────────────────────────────────────────────── */

.fleet-mark,
.fleet-boat {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.fleet-mark .ring {
  fill: var(--ink);
}

.fleet-mark .disc {
  fill: var(--paper);
}

.fleet-mark .glyph {
  fill: var(--ink);
}

.fleet-mark.picked .disc {
  fill: var(--sound);
}

.fleet-mark.picked .glyph {
  fill: var(--paper);
}

.fleet-mark[data-trouble]:not([data-trouble=""])::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--tag-delayed-fill, var(--madrona));
}

.fleet-mark[data-trouble="cancelled"]::after {
  background: var(--tag-cancelled-fill, var(--madrona));
}

.fleet-pill {
  position: absolute;
  top: calc(100% - 4px);
  left: 50%;
  translate: -50% 0;
  padding: 3px 9px;
  border: 1.5px solid var(--ink-2);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

.fleet-mark.name-over .fleet-pill {
  top: auto;
  bottom: calc(100% - 4px);
}

.fleet-pill[hidden] {
  display: none;
}

/* A boat's name only when it's picked: they move, and would crowd the terminals' names. */
.fleet-boat .fleet-pill {
  display: none;
}

.fleet-boat.picked .fleet-pill {
  display: block;
}

.fleet-glyph .hull {
  fill: var(--hull);
  stroke: #1E2A2B;
  stroke-width: 1;
}

.fleet-glyph .band {
  fill: var(--fleet-green);
}

/* A fix older than the rules trust: drawn in outline, as the app draws it. */
.fleet-boat.stale .fleet-glyph .hull {
  stroke-dasharray: 2 2;
}

.fleet-boat.stale .fleet-glyph .band {
  fill: #9AA6A8;
}

.fleet-boat.picked .fleet-glyph {
  scale: 1.3;
}

.fleet-wake {
  position: absolute;
  width: 21px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to left, rgb(255 255 255 / 0), rgb(255 255 255 / 0.85));
  rotate: calc(var(--heading, 0deg) - 90deg);
  translate: -18px 4px;
  transform-origin: right center;
  opacity: 0;
}

.fleet-boat.moving .fleet-wake {
  opacity: 1;
}

@media (prefers-contrast: more) {
  .fleet-pill {
    border-color: var(--ink);
  }
}

@media (forced-colors: active) {
  .fleet-row[aria-current="true"] {
    outline: 2px solid Highlight;
  }
}