@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root {
  --bg: #081018;
  --bg-2: #0d1a28;
  --panel: #122233;
  --line: #1e3d52;
  --brass: #c9a227;
  --foam: #d7ece6;
  --muted: #8aa4a8;
  --rx: #3dba7a;
  --err: #d45c3a;
  --sans: "IBM Plex Sans", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "ui-monospace", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--foam); font-family: var(--sans); }
a { color: var(--brass); text-decoration: none; }
a:hover { text-decoration: underline; }

.mast {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0c1c2c, var(--bg));
}
.logo { font-weight: 600; letter-spacing: 0.04em; color: var(--foam); font-size: 1.35rem; }
.ver { color: var(--brass); font-family: var(--mono); font-size: 0.85rem; }
.tag { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.92rem; }
.nav { display: flex; gap: 1.1rem; }

.qrg-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.qrg { background: var(--bg-2); padding: 0.75rem 1rem; }
.qrg__k { display: block; color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
.qrg__v { font-family: var(--mono); font-size: 1.05rem; color: var(--brass); }
.qrg__h { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.15rem; }
.live { display: inline-block; margin-top: 0.35rem; color: var(--rx); font-weight: 600; font-size: 0.8rem; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
.intro p, .prose p { color: #c5d5d1; line-height: 1.55; max-width: 70ch; }
h1, h2 { font-weight: 600; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; margin-top: 2rem; }

.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.card { background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.card img, .card__ph { width: 100%; height: 140px; object-fit: cover; background: #071019; display: block; }
.card__ph { display: flex; align-items: center; justify-content: center; font-family: var(--mono); color: var(--muted); }
.card__body { padding: 0.8rem 1rem 1rem; }
.card h2 { margin: 0 0 0.3rem; font-size: 1rem; color: var(--foam); }
.meta { color: var(--muted); font-size: 0.85rem; }
.st--complete { color: var(--rx); }
.st--error { color: var(--err); }
.st--running { color: var(--brass); }
.badge { display: inline-block; margin-right: 0.4rem; padding: 0.1rem 0.45rem; border: 1px solid var(--brass); color: var(--brass); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.empty { color: var(--muted); }

.player video { width: 100%; background: #000; border: 1px solid var(--line); }
.player__cap { color: var(--muted); font-size: 0.85rem; }
.chan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.chan { background: var(--panel); padding: 1rem; border: 1px solid var(--line); }
.chan audio { width: 100%; margin-top: 0.6rem; }
.err { color: var(--err); }
.fleet-box { background: var(--panel); padding: 1rem 1.2rem; border-left: 3px solid var(--brass); margin: 1rem 0 1.5rem; }
.ggr-map-fig { margin: 0 0 1.75rem; }
.ggr-map { height: 36rem; width: 100%; background: #071019; border: 1px solid var(--line); }
.ggr-map-cap { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.85rem; }
.ggr-map-legend { display: flex; gap: 1.25rem; list-style: none; padding: 0.55rem 0 0; margin: 0; color: var(--muted); font-size: 0.82rem; align-items: center; }
.ggr-map-toggle { cursor: pointer; color: var(--foam); }
.ggr-map-toggle input { margin-right: 0.35rem; vertical-align: middle; }
.ggr-map-legend .dot { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.35rem; vertical-align: -0.05rem; }
.dot--boat { width: 0; height: 0; border-left: 0.38rem solid transparent; border-right: 0.38rem solid transparent; border-bottom: 0.75rem solid #e8c547; background: none; }
.dot--cent { border-radius: 50%; background: #081018; box-shadow: 0 0 0 2px #c9a227; }
.dot--sdr { border-radius: 2px; background: #3dba7a; }
.ggr-boat-icon, .ggr-sdr-icon { background: none; border: none; }
.ggr-boat-mark, .ggr-sdr-mark { line-height: 0; }
.ggr-hide-names .ggr-yb-label,
.ggr-hide-names .ggr-sdr-label { display: none !important; }
.leaflet-container { font-family: var(--sans); background: #071019; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--foam); }
.leaflet-popup-content { margin: 0.7rem 0.85rem; }
.leaflet-control-layers { background: var(--panel); color: var(--foam); border: 1px solid var(--line); }
.leaflet-control-attribution { background: rgba(8, 16, 24, 0.75); color: var(--muted); }
.ggr-yb-label, .ggr-sdr-label {
  background: rgba(8, 16, 24, 0.88);
  color: #f4f1ea;
  border: none;
  border-radius: 2px;
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 1px 6px;
  white-space: nowrap;
}
.ggr-yb-label { padding: 1px 6px 1px 0; }
.ggr-sdr-label { border-left: 3px solid var(--rx); }
.leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before, .leaflet-tooltip-right:before { display: none; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tbl th, .tbl td { text-align: left; padding: 0.55rem 0.4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { color: var(--muted); font-weight: 500; }
.prose ul { line-height: 1.55; }
.foot { padding: 1.5rem; color: var(--muted); font-size: 0.82rem; border-top: 1px solid var(--line); }
.crumb { margin-bottom: 0.3rem; }

@media (max-width: 900px) {
  .qrg-bar { grid-template-columns: 1fr 1fr; }
  .mast { flex-direction: column; align-items: flex-start; }
  .ggr-map { height: 24rem; }
  .ggr-map-legend { flex-wrap: wrap; gap: 0.6rem 1rem; }
}