/* Public display ("bridge instrument" design, chunk 8, round 2).
   Everything is sized in rem and the root size follows the screen, so a 4K TV shows the
   same layout as a 1080p one, just sharper. Colours and sizes are the tokens below. */

:root {
  color-scheme: dark;

  /* colour */
  --ink: #f4f7f8;                      /* primary text */
  --ink-2: #c6d3da;                    /* secondary text */
  --label: #93b0bc;                    /* small uppercase labels */
  --accent: #1be6c6;                   /* brand teal (from the logo): live, active vessel */
  --accent-soft: rgba(27, 230, 198, 0.16);
  --amber: #ffb547;                    /* stale / estimated / warnings */
  --amber-soft: rgba(255, 181, 71, 0.16);
  --panel-bg: rgba(7, 15, 21, 0.86);   /* opaque enough for white text over snow or sand */
  --panel-line: rgba(255, 255, 255, 0.10);
  --shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.35);
  --map-filter: brightness(0.82) saturate(0.9);

  /* type */
  --font-ui: "IBM Plex Sans", "Noto Sans", "DejaVu Sans", "Segoe UI", Arial, sans-serif;
  --font-num: "IBM Plex Mono", "DejaVu Sans Mono", "Noto Sans Mono", Consolas, monospace;
  --fs-name: 3rem;           /* vessel name (48px at 1080p) */
  --fs-meta: 1.375rem;       /* type · flag line */
  --fs-value: 1.875rem;      /* speed, course, position (30px at 1080p) */
  --fs-value-text: 1.375rem; /* status, voyage (was 1.5rem) */
  --fs-project: 1.5rem;      /* project numbers in the name box (24px at 1080p) */
  --fs-lead: 1.375rem;       /* project lead / department */
  --fs-coord: 1.625rem;      /* position, one line (26px at 1080p; was 15px in round 2) */
  --fs-body: 1.0625rem;      /* details values, queue names */
  --fs-label: 0.875rem;      /* uppercase labels in panels */
  --fs-label-bar: 0.75rem;   /* uppercase labels in the instrument bar */

  /* layout */
  --edge: 1.5rem;            /* distance from the screen edge */
  --gap: 0.75rem;
  --radius: 0.75rem;
  --bar-h: 4.25rem;          /* instrument bar height (round 2: 4.5rem, round 1: 5.75rem) */
  --above-bar: calc(var(--edge) + var(--bar-h) + var(--gap));
  --logo-w: 13rem;
  --right-w: 22rem;          /* picture + "Up next" column */
  --locator-w: 21rem;        /* overview map card and position card, bottom left */
  --locator-caption-h: 2.25rem;   /* sea · country line under the overview map (one line)... */
  --locator-caption-max-h: 3.5rem; /* ...or two when the names are long (Bulgarian ocean names) */
  --locator-pos-h: var(--bar-h);  /* the position card: same height as the bar beside it */
  /* the overview map keeps the 288 x 160 shape it is drawn at (see LOCATOR in app.js) */
  --locator-h: calc(var(--locator-w) * 160 / 288 + var(--locator-caption-max-h) + var(--gap) + var(--locator-pos-h));
}

/* Root size: 16px at 1920x1080, 32px at 3840x2160, never below 12px. */
html {
  font-size: clamp(12px, min(1.482vh, 0.834vw), 48px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #061018;
  color: var(--ink);
  font-family: var(--font-ui);
}

body {
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* stale data or no connection: the whole screen is slightly dimmed (app.js sets is-degraded) */
body.is-degraded { opacity: 0.85; }

[hidden] { display: none !important; }

.display-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

h1, h2, p, figure { margin: 0; }

/* ── Map ─────────────────────────────────────────────────────────────── */

#map {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: var(--map-filter);
}

.leaflet-container {
  background: #0a1a24;   /* close to the imagery's deep-ocean colour, for gaps at world zoom */
  font-family: var(--font-ui);
}

/* Soft darkening where text sits: a large, feathered pool in the top-right corner behind
   the logo (no hard edge), plus light fades along the top and bottom. */
.map-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 36rem 20rem at 100% 0%, rgba(3, 8, 12, 0.72) 0%, rgba(3, 8, 12, 0.4) 45%, rgba(3, 8, 12, 0) 75%),
    linear-gradient(180deg,
      rgba(3, 8, 12, 0.4) 0%, rgba(3, 8, 12, 0) 20%,
      rgba(3, 8, 12, 0) 75%, rgba(3, 8, 12, 0.45) 100%);
}

/* Map attribution: one small line under the instrument bar, bottom right. */
.leaflet-bottom.leaflet-right { bottom: 0; }

.leaflet-control-attribution.leaflet-control {
  margin: 0;
  background: rgba(3, 8, 12, 0.55);   /* keeps the required credit readable over bright imagery */
  border-top-left-radius: 0.3rem;
  color: rgba(244, 247, 248, 0.55);
  font-size: 0.625rem;
  line-height: 1.6;
  padding: 0 0.5rem;
}

.leaflet-control-attribution a { color: rgba(244, 247, 248, 0.7); }

/* ── Shared ──────────────────────────────────────────────────────────── */

.overlay {
  position: absolute;
  z-index: 2;
}

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Burn-in care: fixed panels drift a few pixels over 20 minutes (not noticeable when watching). */
@keyframes drift {
  0%, 100% { translate: 0 0; }
  25%      { translate: 0.25rem 0.15rem; }
  50%      { translate: 0 0.3rem; }
  75%      { translate: -0.25rem 0.15rem; }
}

.left-stack, .org-logo-wrap, #locator, #position-value, .right-column, #metric-strip {
  animation: drift 20min ease-in-out infinite;
}

/* ── Left column: identity + details ─────────────────────────────────── */

.left-stack {
  top: var(--edge);
  left: var(--edge);
  width: min(46rem, calc(100vw - 2 * var(--edge) - var(--logo-w) - 2rem));
  /* stays clear of the overview map card below it */
  max-height: calc(100vh - 2 * var(--edge) - var(--locator-h) - var(--gap));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap);
  pointer-events: none;
}

.left-stack > * { pointer-events: auto; }

#identity-card {
  /* steady minimum width, so the box does not jump in size with every vessel */
  min-width: min(30rem, 100%);
  max-width: 100%;
  padding: 0.9rem 1.4rem 1.1rem;
  flex-shrink: 0;
}

/* New vessel: the name block, the details (when open) and the picture are hidden while the map
   flies (app.js sets is-flying) and fade in together as it lands. */
@keyframes card-enter {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to   { opacity: 1; transform: none; }
}

body.is-flying #identity-card,
body.is-flying #details-panel,
body.is-flying #image-panel { opacity: 0; }
#identity-card.card-enter,
#details-panel.card-enter,
#image-panel.card-enter { animation: card-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1); }

.identity-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  min-height: 1.75rem;
  margin-bottom: 0.35rem;
}

.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.15rem 0.6rem 0.15rem 0.5rem;
  border-radius: 0.4rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}

.source-chip::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
}

.source-chip--live    { color: var(--accent); background: var(--accent-soft); }
.source-chip--stale   { color: var(--amber);  background: var(--amber-soft); }
.source-chip--neutral { color: var(--ink-2);  background: rgba(255, 255, 255, 0.08); }
.source-chip--live::before { animation: live-pulse 2.4s ease-in-out infinite; }

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.identity-age {
  font-size: var(--fs-label);
  color: var(--label);
}

/* Bottom row of the name box: project number(s) and project lead / department, each with a
   small label, like the readouts in the instrument bar. Wraps to two rows when both are long. */
.identity-work {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.7rem 2.25rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--panel-line);
}

.work-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.work-item--projects { flex: 0 1 auto; }
.work-item--lead { flex: 1 1 14rem; }

.work-label {
  font-size: var(--fs-label-bar);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--label);
  white-space: nowrap;
}

.project-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}

.project-tag {
  padding: 0.05rem 0.55rem;
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.09);
  font-family: var(--font-num);
  font-size: var(--fs-project);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.lead-text {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
  /* free text up to 200 characters: at most two lines */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* sits level with the project tags */
  padding-top: 0.05rem;
}

/* long project leads (over 90 characters): smaller, up to three lines, so 200 characters fit */
.lead-text--long {
  font-size: var(--fs-body);
  -webkit-line-clamp: 3;
}

/* Details button: quiet, at the end of the status line */
.details-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--panel-line);
  border-radius: 0.45rem;
  background: none;
  color: var(--ink-2);
  font: 500 0.8125rem var(--font-ui);
  cursor: pointer;
}

.details-toggle kbd {
  font-family: var(--font-num);
  font-size: 0.75rem;
  padding: 0 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.25rem;
  color: var(--ink);
}

/* The Details and language buttons only show while a mouse or touch is in use (app.js adds
   controls-visible for 10 s after any pointer movement); a TV nobody touches shows none.
   Screens whose main input is touch always show them. */
.details-toggle,
.lang-toggle {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s, border-color 0.2s ease;
}

body.controls-visible .details-toggle,
body.controls-visible .lang-toggle {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

@media (pointer: coarse) {
  .details-toggle,
  .lang-toggle { opacity: 1; visibility: visible; }
}

.details-toggle:hover,
.details-toggle:focus-visible,
.details-toggle[aria-expanded="true"] {
  color: var(--ink);
  border-color: var(--accent);
  outline: none;
}

#ship-name {
  font-size: var(--fs-name);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
  /* long names: at most two lines */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Names over ~26 characters get a smaller size so most still fit on two lines. */
#ship-name.ship-name--long { font-size: calc(var(--fs-name) * 0.75); }

.identity-meta {
  margin-top: 0.4rem;
  font-size: var(--fs-meta);
  line-height: 1.25;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.identity-warning {
  margin-top: 0.8rem;
  padding: 0.5rem 0.8rem;
  border-left: 0.3rem solid var(--amber);
  border-radius: 0.3rem;
  background: var(--amber-soft);
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Details panel */
#details-panel {
  width: 27rem;
  max-width: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: 0.9rem 1.3rem 1.1rem;
  transform: translateX(calc(-100% - 3rem));
  opacity: 0;
  visibility: hidden;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, visibility 0s linear 0.38s;
}

#details-panel.details-visible {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
}

.details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--panel-line);
}

.details-title {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.details-close {
  flex-shrink: 0;
  min-width: 2.75rem;
  min-height: 2.75rem;
  background: none;
  border: 1px solid var(--panel-line);
  border-radius: 0.5rem;
  color: var(--ink-2);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.details-close:hover,
.details-close:focus-visible {
  color: var(--ink);
  border-color: var(--accent);
  outline: none;
}

.details-grid {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.details-grid--dims {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--panel-line);
}

.details-row {
  display: grid;
  grid-template-columns: minmax(6.5rem, max-content) 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 0.35rem 0;
}

.details-row dt {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--label);
}

.details-row dd {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.details-empty {
  margin-top: 0.4rem;
  font-size: var(--fs-body);
  color: var(--ink-2);
}

/* ── Logo + language button ─────────────────────────────────────────── */

.org-logo-wrap {
  top: var(--edge);
  right: var(--edge);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.9rem;
  pointer-events: none;
}

/* Light version of the logo straight on the map. The corner shade (see .map-shade) and a
   soft shadow keep it readable over bright snow or sand; no plate. */
.org-logo {
  display: block;
  width: var(--logo-w);
  height: auto;
  filter: drop-shadow(0 0.1rem 0.35rem rgba(0, 0, 0, 0.7)) drop-shadow(0 0 1.2rem rgba(0, 0, 0, 0.45));
}

.lang-toggle {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  min-height: 3.25rem;
  padding: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: var(--panel-bg);
  cursor: pointer;
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lang-flag {
  display: block;
  width: 2.25rem;
  height: 1.5rem;
  object-fit: cover;
  border-radius: 0.2rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.lang-code {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

/* ── Empty / loading state ──────────────────────────────────────────── */

#empty-state {
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(38rem, calc(100vw - 2 * var(--edge)));
  padding: 2rem 2.5rem 2.25rem;
  text-align: center;
}

.empty-icon {
  width: 4.5rem;
  height: 4.5rem;
  color: var(--accent);
  margin-bottom: 1rem;
}

.empty-sweep {
  transform-origin: 32px 32px;
  animation: sweep 4s linear infinite;
}

@keyframes sweep { to { transform: rotate(360deg); } }

.empty-title {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
}

.empty-hint {
  margin-top: 0.75rem;
  font-size: 1.125rem;
  color: var(--ink-2);
}

body.is-empty #empty-state { display: block; }

body.is-empty .left-stack,
body.is-empty #locator,
body.is-empty #position-value,
body.is-empty .right-column,
body.is-empty #metric-strip,
body.is-empty .vessel-marker,
body.is-empty .ship-label { display: none; }

/* ── Where: overview map + position, bottom left ────────────────────── */

/* The "where" corner of the screen: the overview map card sits a gap above the position card,
   which is on the bottom line, left of the instrument bar (two cards, round 4). */
#locator {
  left: var(--edge);
  bottom: calc(var(--edge) + var(--locator-pos-h) + var(--gap));
  width: var(--locator-w);
  overflow: hidden;
}

.locator-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 288 / 160;
  overflow: hidden;
  border-bottom: 1px solid var(--panel-line);
}

/* Drawn at a fixed 288 x 160 px and scaled to the frame by app.js (same tiles on every screen). */
#locator-map {
  position: absolute;
  left: 0;
  top: 0;
  width: 288px;
  height: 160px;
  transform-origin: 0 0;
  background: #0a1a24;
}

#locator-map .leaflet-tile-pane { filter: var(--map-filter); }

/* Sea · country under the overview map (no names on the map itself). One line, or two when the
   names are long ("Северен Атлантически океан · Норвегия"); the card grows upwards. */
.locator-caption {
  min-height: var(--locator-caption-h);
  margin: 0;
  padding: 0.525rem 1rem;   /* one line: 2.25rem high */
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-wrap: balance;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Position: one line, as large as speed and course; hemisphere letters smaller and dimmer. */
.locator-position {
  left: var(--edge);
  bottom: var(--edge);
  width: var(--locator-w);
  height: var(--locator-pos-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  padding: 0 1rem;
  font-size: var(--fs-coord);
  white-space: nowrap;
  overflow: hidden;
}

.coord {
  font-family: var(--font-num);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.coord-hemi {
  margin-left: 0.3em;
  font-family: var(--font-ui);
  font-size: 0.62em;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* ── Right column: picture + up next ─────────────────────────────────── */

.right-column {
  bottom: var(--edge);
  right: var(--edge);
  width: var(--right-w);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.image-hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow);
  background: var(--panel-bg);
}

#ship-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

/* No picture: a line drawing of the vessel type, in the accent colour at about half
   brightness (owner's choice, chunk 7b), so it reads as a sketch and does not compete with
   the LIVE status. The drawings are reused with <use>, so they take their colours from
   these variables. */
.silhouette {
  position: relative;
  aspect-ratio: 16 / 9;
  --sil-line: rgba(27, 230, 198, 0.5);
  --sil-fill: rgba(27, 230, 198, 0.035);
  --sil-detail: rgba(27, 230, 198, 0.3);
  --sil-sea: rgba(27, 230, 198, 0.22);
}

.silhouette[hidden], #ship-image[hidden] { display: none; }

.silhouette svg {
  position: absolute;
  left: 7%;
  top: 11%;
  width: 86%;
}

.sil-hull, .sil-top { fill: var(--sil-fill); stroke: var(--sil-line); stroke-width: 1.6; stroke-linejoin: round; }
.sil-win { fill: none; stroke: var(--sil-line); stroke-width: 1.1; }
.sil-detail { fill: none; stroke: var(--sil-detail); stroke-width: 1; }
.sil-sea { stroke: var(--sil-sea); stroke-width: 1; stroke-dasharray: 5 4; }

.silhouette-label {
  position: absolute;
  inset: auto 0 0.7rem 0;
  text-align: center;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
}

.image-hero--silhouette .image-caption { display: none; }

.image-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem 0.75rem 0.4rem;
  background: linear-gradient(transparent, rgba(3, 8, 12, 0.85));
}

.image-source-text {
  font-size: 0.75rem;
  color: rgba(244, 247, 248, 0.8);
}

#queue-filmstrip {
  padding: 0.8rem 1rem 0.9rem;
}

.filmstrip-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.filmstrip-title {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--label);
}

.timing-badge {
  font-family: var(--font-num);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}

.timing-track {
  height: 0.2rem;
  margin: 0.5rem 0 0.4rem;
  border-radius: 0.1rem;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.timing-bar {
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  transition: transform 1s linear;
}

.filmstrip-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.filmstrip-card {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--panel-line);
}

.filmstrip-card:last-child { border-bottom: 0; padding-bottom: 0; }
.filmstrip-card:nth-child(n+5) { display: none; }   /* four is plenty at a glance */

.filmstrip-name {
  min-width: 0;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filmstrip-card:first-child .filmstrip-name {
  color: var(--ink);
  font-weight: 600;
}

.filmstrip-project {
  flex-shrink: 0;
  font-family: var(--font-num);
  font-size: 0.8125rem;
  color: var(--label);
}

/* ── Instrument bar (bottom) ────────────────────────────────────────── */

/* A slim floating bar: speed, course (with a small dial), status, and the voyage
   (last port → destination). It starts next to the overview map card, on the same bottom
   line, and is only as wide as its content (it may grow up to the "Up next" column, then
   the port names shorten with "…"). */
#metric-strip {
  left: calc(var(--edge) + var(--locator-w) + var(--gap));
  bottom: var(--edge);
  width: max-content;
  max-width: calc(100vw - 2 * var(--edge) - var(--locator-w) - var(--right-w) - 2 * var(--gap));
  height: var(--bar-h);
  display: flex;
  align-items: center;
  padding: 0 0.35rem;
}

.metric-chip {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  padding: 0 1.1rem;
  min-width: 0;
  border-left: 1px solid var(--panel-line);
}

/* the status keeps its room (up to 22rem); when space runs out the voyage shortens first */
.metric-chip--status { flex: 0 0 auto; max-width: 22rem; }
.metric-chip--voyage { flex: 0 1 auto; }

.metric-chip:first-child { border-left: 0; }

.metric-chip--course {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.metric-stack {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.metric-label {
  font-size: var(--fs-label-bar);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metric-value {
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

.metric-value--num {
  font-size: var(--fs-value);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.metric-value--text {
  font-size: var(--fs-value-text);
  font-weight: 500;
}

/* Course dial: north-up ring, the needle turns to the course */
.course-dial {
  flex-shrink: 0;
  width: 2.9rem;
  height: 2.9rem;
}

.compass-ring { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 3; }
.compass-ticks line { stroke: var(--label); stroke-width: 5; stroke-linecap: round; }
.compass-ticks line:first-child { stroke: var(--ink); }
#compass-needle {
  transform-origin: 50px 50px;
  transform-box: view-box;
  transition: transform 1s ease, opacity 0.3s ease;
}
.compass-needle-head { fill: var(--accent); }
.compass-needle-tail { fill: rgba(255, 255, 255, 0.35); }
.compass-hub { fill: var(--ink); }
body.is-degraded .compass-needle-head { fill: var(--amber); }

/* Voyage: FROM (age) → TO. Both port names shorten with "…" so the arrow and the
   destination always stay visible. */
.voyage-value {
  display: flex;
  align-items: baseline;
  min-width: 0;
}

.voyage-from, .voyage-to {
  flex: 0 1 auto;
  min-width: 3rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voyage-from:empty { display: none; }

.voyage-age {
  flex: none;
  margin-left: 0.5rem;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--label);
}

.voyage-arrow {
  flex: none;
  margin: 0 0.6rem;
  color: var(--accent);
  font-weight: 400;
}

.voyage-from:empty ~ .voyage-arrow { margin-left: 0; }

/* ── Value flash animation ───────────────────────────────────────────── */

@keyframes value-pop {
  0%   { opacity: 0.3; transform: translateY(3px); }
  100% { opacity: 1;   transform: translateY(0);   }
}

.value-updated { animation: value-pop 0.28s ease-out; }

/* ── Map markers ─────────────────────────────────────────────────────── */

.vessel-marker, .fleet-marker, .ship-label {
  background: none;
  border: 0;
}

.vessel-marker__shape,
.vessel-marker__ring,
.fleet-marker svg {
  position: absolute;
  left: 0;
  top: 0;
}

.vessel-marker__shape {
  width: 1.75rem;
  height: 1.9rem;
  margin: -0.95rem 0 0 -0.875rem;
  overflow: visible;
  fill: var(--accent);
  stroke: #03141a;
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 0.3rem rgba(0, 0, 0, 0.6));
}

.vessel-marker__ring {
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: radar-ping 2.8s ease-out infinite;
  pointer-events: none;
}

/* Stale or estimated data: the vessel marker turns amber, like the source chip. */
body.is-degraded .vessel-marker__shape { fill: var(--amber); }
body.is-degraded .vessel-marker__ring { border-color: var(--amber); }

@keyframes radar-ping {
  0%   { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(3.6); opacity: 0; }
}

.fleet-marker svg {
  width: 0.75rem;
  height: 0.75rem;
  margin: -0.375rem 0 0 -0.375rem;
  overflow: visible;
  fill: rgba(255, 255, 255, 0.85);
  stroke: rgba(3, 10, 14, 0.85);
  stroke-width: 1.4;
  cursor: pointer;
}

.ship-label__text {
  position: absolute;
  left: 0;
  bottom: 1.6rem;
  transform: translateX(-50%);
  padding: 0.15rem 0.55rem;
  border-radius: 0.35rem;
  background: var(--panel-bg);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.leaflet-tooltip {
  font-family: var(--font-ui);
  font-size: 0.875rem;
}

/* ── Short landscape screens (e.g. 1280x720) ───────────────────────── */

@media (max-height: 800px) and (min-width: 761px) {
  .filmstrip-card:nth-child(n+4) { display: none; }
  /* with the details open there is no room for the overview map as well */
  body.details-open #locator, body.details-open #position-value { display: none; }
  body.details-open #metric-strip {
    left: var(--edge);
    max-width: calc(100vw - 2 * var(--edge) - var(--right-w) - var(--gap));
  }
  body.details-open .left-stack { max-height: calc(100vh - var(--edge) - var(--above-bar)); }
}

/* ── Narrow / portrait (phones, not the kiosk) ─────────────────────── */

@media (max-width: 760px) {
  :root {
    --edge: 0.75rem;
    --logo-w: 7.5rem;
    --fs-name: 1.9rem;
    --fs-meta: 1.1rem;
    --fs-value: 1.5rem;
    --fs-value-text: 1.2rem;
    --bar-h: 9.5rem;
  }

  .left-stack {
    width: calc(100vw - 2 * var(--edge) - var(--logo-w) - 1.5rem);
    max-height: calc(100vh - var(--edge) - var(--above-bar));
  }

  #details-panel { width: calc(100vw - 2 * var(--edge)); }

  .right-column, #locator, #position-value { display: none; }

  /* attribution gets its own lines above the bar */
  .leaflet-bottom.leaflet-right { bottom: calc(var(--edge) + var(--bar-h)); }

  #metric-strip {
    left: var(--edge);
    right: var(--edge);
    width: auto;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-content: center;
    align-items: center;
    row-gap: 0.7rem;
    padding: 0.75rem 0.5rem;
  }

  .metric-chip { padding: 0 0.6rem; border-left: 0; }
  .metric-chip--status { max-width: none; }
  .metric-chip--voyage { grid-column: 1 / -1; }
  .course-dial { width: 2.4rem; height: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}