/* MERIDIAN — CHARTS view. Dark-console restyle of the map/weather/AIS components ported
   from the HYANS public site (which was Editorial Luxury light). Class names are kept
   identical to the HYANS originals where the markup carried over; only the palette, the
   density and the type ramp are MERIDIAN's. The map chrome is MapLibre's, not Leaflet's —
   the panel was rebuilt on the library this app already vendors.

   TYPE FLOOR — 11px, same rule as styles.css and enforced by tests/test_type_floor.py
   (this file is listed in its CSS_FILES). Nothing here may declare below 11px. The HYANS
   original used a 0.7–0.78rem band for credits and ETDs; those are on the 11 / 11.5 / 12
   ladder here instead. */

/* ── Head ─────────────────────────────────────────────────────────────────── */
.charts-head { margin-bottom: 14px; }
.charts-title { margin: 0; font: 700 19px var(--disp); letter-spacing: .4px; }
.charts-where { color: var(--brand); font-weight: 600; }
.charts-where::before { content: '· '; color: var(--faint); }
.charts-sub { margin: 5px 0 0; font: 400 12px/1.55 var(--disp); color: var(--dim); max-width: 78ch; }
.charts-h3 {
  margin: 0 0 12px; font: 600 11.5px var(--mono); letter-spacing: 2px;
  text-transform: uppercase; color: var(--faint);
}
.charts-note { margin: 0; padding: 18px; font: 400 12px var(--disp); color: var(--dim); }

/* ── Location picker ──────────────────────────────────────────────────────── */
.charts-picker {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; margin-bottom: 16px;
  background: var(--pan); border: 1px solid var(--edge); border-radius: var(--radius-md);
}
.enc-jumprow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.enc-jumprow__label {
  flex: 0 0 96px; font: 600 11px var(--mono); letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--faint);
}
.enc-jumpbar { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.enc-jump {
  appearance: none; cursor: pointer;
  border: 1px solid var(--edge); background: var(--pan2); color: var(--dim);
  border-radius: 999px; padding: 4px 11px;
  font: 600 12px/1.4 var(--disp); letter-spacing: .02em;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.enc-jump:hover { background: var(--grid); color: var(--ink); border-color: var(--brand); }
.enc-jump--active {
  background: var(--brand); border-color: var(--brand); color: #10151f; font-weight: 700;
}

/* ── Chart panel + side column ────────────────────────────────────────────── */
.charts-grid {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
  gap: 16px; align-items: start;
}
@media (max-width: 1000px) { .charts-grid { grid-template-columns: 1fr; } }

.livemap-panel { min-width: 0; }
.mer-enc-map {
  height: clamp(340px, 52vh, 620px); width: 100%;
  background: var(--bg2);
  border: 1px solid var(--edge); border-radius: var(--radius-md); overflow: hidden;
}
.livemap-panel__foot {
  margin-top: 7px; font: 500 11px/1.5 var(--mono); letter-spacing: .6px; color: var(--faint);
}
.charts-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.mer-vessel-pin .vp-chip {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); color: #10151f; border: 1px solid #10151f;
  font: 700 11.5px var(--mono);
}
.mer-vp-pop b { display: block; font: 700 12.5px var(--disp); margin-bottom: 5px; }
.mer-vp-pop ul { margin: 0; padding: 0 0 0 14px; }
.mer-vp-pop li { font-size: 12px; }
.mer-vp-pop li span { display: block; color: var(--dim); font-size: 11px; }
.mer-vp-pop em { display: block; margin-top: 6px; color: var(--faint); font-size: 11px; font-style: normal; }
/* ── Vessels in port ──────────────────────────────────────────────────────── */
.inport {
  background: var(--pan); border: 1px solid var(--edge); border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm); padding: 13px 15px;
}
.inport__head { font: 700 13px var(--disp); color: var(--ink); margin-bottom: 8px; }
.inport__count { color: var(--brand); font: 700 11.5px var(--mono); letter-spacing: .8px; }
.inport__list { list-style: none; margin: 0; padding: 0; }
.inport__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 5px 0; border-bottom: 1px dashed var(--edge);
  font: 500 12px/1.45 var(--disp);
}
.inport__list li:last-child { border-bottom: none; }
.inport__list li b { color: var(--ink); font-weight: 600; }
.inport__berth { color: var(--brand); white-space: nowrap; font: 600 11px var(--mono); letter-spacing: .5px; }
.inport__etd { color: var(--dim); white-space: nowrap; font-size: 11px; }
.inport__loading, .inport__empty { color: var(--faint); border-bottom: none !important; }
.inport__src { margin: 9px 0 0; font: 400 11px/1.5 var(--disp); color: var(--faint); }

/* ── AIS panel (click-to-load third-party embed) ──────────────────────────── */
.ais-panel { display: flex; flex-direction: column; min-width: 0; }
.ais-panel__stage {
  min-height: 240px; border-radius: var(--radius-sm); border: 1px solid var(--edge);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(63, 208, 201, .18), transparent 58%),
    linear-gradient(160deg, var(--pan2), var(--bg) 72%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 11px; padding: 22px; text-align: center;
}
.ais-panel__stage--live { padding: 0; display: block; overflow: hidden; }
.ais-panel__stage--live iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.ais-panel__title { font: 600 13px var(--disp); color: var(--ink); }
.ais-panel__load {
  appearance: none; cursor: pointer;
  border: 1px solid var(--brand); background: var(--brand); color: #10151f;
  border-radius: 999px; padding: 8px 18px;
  font: 700 12px/1.4 var(--disp); letter-spacing: .03em;
}
.ais-panel__load:hover { background: var(--brand2); border-color: var(--brand2); }
.ais-panel__note { margin: 0; font: 400 11px/1.5 var(--disp); color: var(--faint); max-width: 34ch; }
.ais-panel__links {
  display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 8px;
  font: 600 11px/1.5 var(--mono); letter-spacing: .5px; color: var(--faint);
}
.ais-panel__links a { color: var(--brand); text-decoration: none; }
.ais-panel__links a:hover { text-decoration: underline; }

/* ── NOAA weather cards ───────────────────────────────────────────────────── */
.charts-wx { margin-top: 22px; }
.wx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.wx-card {
  margin: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--pan); border: 1px solid var(--edge); border-radius: var(--radius-sm);
}
.wx-card__imglink { display: block; background: var(--bg); }
.wx-card img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.wx-card figcaption { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.wx-card figcaption b { font: 600 12.5px var(--disp); color: var(--ink); }
.wx-card figcaption span { font: 400 11.5px/1.5 var(--disp); color: var(--dim); }
.wx-card__credit { color: var(--faint) !important; font-size: 11px !important; letter-spacing: .4px; }
.wx-card__credit a { color: var(--brand); text-decoration: none; }

.wx-links { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; margin-top: 14px; }
.wx-links__label {
  font: 600 11px var(--mono); letter-spacing: 1.6px; text-transform: uppercase; color: var(--faint);
}
.wx-links a {
  border: 1px solid var(--edge); border-radius: 999px; padding: 4px 11px;
  font: 600 11.5px var(--disp); color: var(--dim); text-decoration: none;
}
.wx-links a:hover { background: var(--grid); color: var(--ink); border-color: var(--brand); }

/* ── Disclaimer — reference-only, not decoration. ─────────────────────────── */
.charts-disclaimer {
  margin: 22px 0 0; padding: 11px 14px;
  border: 1px solid var(--edge); border-left: 3px solid var(--nogo); border-radius: var(--radius-sm);
  background: var(--pan); color: var(--dim);
  font: 400 11.5px/1.6 var(--disp);
}

/* ── Panel head: layer toggles + the in-port count badge ──────────────────── */
.charts-maphead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 7px;
}
.charts-layers { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.charts-layers label {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 11.5px var(--disp); color: var(--dim); cursor: pointer;
}
.charts-layers input { accent-color: var(--brand); margin: 0; }
.charts-inport-badge {
  border: 1px solid var(--edge); border-radius: 999px; padding: 3px 10px;
  background: var(--pan2); color: var(--brand);
  font: 600 11px var(--mono); letter-spacing: .6px;
}

/* MapLibre chrome inside the panel. */
.mer-enc-map .maplibregl-ctrl-attrib {
  background: rgba(6, 10, 18, .82); color: var(--faint); font-size: 11px;
}
.mer-enc-map .maplibregl-ctrl-attrib a { color: var(--brand); }
.mer-enc-map .maplibregl-ctrl-scale {
  background: rgba(6, 10, 18, .7); color: var(--ink); border-color: var(--brand); font-size: 11px;
}
.mer-enc-map .maplibregl-popup-content {
  background: var(--pan); color: var(--ink); border: 1px solid var(--edge);
  border-radius: 8px; padding: 10px 13px; font: 400 12px/1.5 var(--disp);
}
.mer-enc-map .maplibregl-popup-tip { border-top-color: var(--pan); border-bottom-color: var(--pan); }