/*!
 * Global Internet Cable Map - page styles
 * Loaded on /internet-cable-map/, /cables/, /landing-stations/,
 * /internet-cables/*, /cable-explorer/ and /internet-route/.
 *
 * Builds on the design tokens in style.css. The globe keeps a deep ocean in both
 * themes - that is the subject of the picture - while every panel around it
 * follows the site theme.
 */

/* ------------------------------------------------------------------ tokens */
:root {
  /* The globe keeps a deep-teal ocean in both themes - it is the subject of the
     picture, not a page surface - and takes its cable colours from the site's
     mint and teal so the map and the chrome read as one design. */
  --cable-ocean: #0a2f45;
  --cable-land: #13547a;
  --cable-border: #4d93b0;
  --cable-halo: #06202f;

  /* Status colours. Every one is also stated in words wherever it is used, and
     cables that are not yet in service are drawn dashed as well as coloured, so
     status never depends on colour alone. */
  --cable-operational: #80d0c7;
  --cable-under-construction: #ffc861;
  --cable-planned: #c9a8ff;
  --cable-retired: #8fa8b5;
  --cable-unidentified: #37677f;
  --cable-highlight: #ffffff;

  --cable-station: #ffd166;
  --cable-station-confirmed: #ff9f5a;
  --cable-cluster: #80d0c7;
  --cable-cluster-text: #06222f;

  --cable-panel: rgba(8, 38, 56, .84);
  --cable-panel-line: rgba(128, 208, 199, .28);
  --cable-panel-ink: #eefaf8;
  --cable-panel-muted: #a4c9d4;
}

:root[data-theme="dark"] {
  --cable-ocean: #061c29;
  --cable-land: #0e3d59;
  --cable-border: #2f6d87;
  --cable-halo: #03121b;
  --cable-panel: rgba(4, 22, 33, .88);
}

/* --------------------------------------------------------------- the globe */

.globe-shell {
  position: relative;
  border-radius: var(--wst-radius);
  overflow: hidden;
  border: 1px solid var(--wst-line);
  box-shadow: var(--wst-shadow-lg);
  background: var(--cable-ocean);
  /* Reserved before MapLibre initialises so the globe cannot shift the page. */
  height: clamp(420px, 68vh, 760px);
}
.globe-shell--mini {
  height: clamp(260px, 42vh, 420px);
  border-radius: 18px;
  box-shadow: var(--wst-shadow-sm);
}
.globe-canvas { position: absolute; inset: 0; }

/* MapLibre paints its own chrome; put it on our palette. */
.maplibregl-ctrl-group {
  background: var(--cable-panel);
  border: 1px solid var(--cable-panel-line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(3, 11, 22, .45);
  overflow: hidden;
}
.maplibregl-ctrl-group button { background: transparent; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--cable-panel-line); }
.maplibregl-ctrl-group button:hover { background: rgba(255, 255, 255, .1); }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(1.6); }
.maplibregl-ctrl-attrib {
  background: var(--cable-panel);
  color: var(--cable-panel-muted);
  border-radius: 10px 0 0 0;
  font-size: .7rem;
}
.maplibregl-ctrl-attrib a { color: #cfe0f8; }
.maplibregl-ctrl-scale {
  background: var(--cable-panel);
  border-color: var(--cable-panel-line);
  color: var(--cable-panel-ink);
  border-radius: 0 6px 6px 0;
}
.maplibregl-canvas:focus-visible { outline: 3px solid var(--wst-focus-ring); outline-offset: -3px; }

/* ------------------------------------------------------------ map overlays */

.globe-panel {
  position: absolute;
  z-index: 3;
  max-width: min(92%, 22rem);
  padding: .85rem 1rem;
  border-radius: 16px;
  background: var(--cable-panel);
  border: 1px solid var(--cable-panel-line);
  color: var(--cable-panel-ink);
  box-shadow: 0 12px 32px rgba(3, 11, 22, .45);
  backdrop-filter: blur(10px);
}
.globe-panel h2,
.globe-panel h3 { color: #fff; }
.globe-panel--stats { left: 1rem; bottom: 1rem; }
.globe-panel--legend { right: 1rem; bottom: 1rem; max-width: 15rem; }
.globe-panel--hover {
  left: 50%;
  top: 1rem;
  transform: translateX(-50%);
  max-width: min(92%, 26rem);
  padding: .5rem .9rem;
  text-align: center;
}

.globe-panel__title {
  margin: 0 0 .5rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cable-panel-muted);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem .9rem;
  margin: 0;
}
.stat-grid dt {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cable-panel-muted);
}
.stat-grid dd {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

/* Legend: a colour swatch plus the status in words. */
.legend-list { list-style: none; margin: 0; padding: 0; font-size: .8rem; }
.legend-list li { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.legend-swatch {
  flex: 0 0 22px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}
.legend-swatch--dashed {
  background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px);
}
.legend-swatch--dot { flex-basis: 10px; height: 10px; border-radius: 50%; }
.legend-list .is-operational { color: var(--cable-operational); }
.legend-list .is-under_construction { color: var(--cable-under-construction); }
.legend-list .is-planned { color: var(--cable-planned); }
.legend-list .is-retired { color: var(--cable-retired); }
.legend-list .is-unidentified { color: var(--cable-unidentified); }
.legend-list .is-station { color: var(--cable-station); }
.legend-list .is-station-confirmed { color: var(--cable-station-confirmed); }
.legend-list span:last-child { color: var(--cable-panel-ink); }

.globe-notice {
  position: absolute;
  inset: auto 1rem 1rem;
  z-index: 4;
  margin: 0 auto;
  max-width: 34rem;
  padding: 1rem 1.15rem;
  border-radius: 16px;
  background: var(--wst-surface);
  border: 1px solid var(--wst-line);
  box-shadow: var(--wst-shadow-lg);
  text-align: center;
}
.globe-notice--centre { inset: 50% 1rem auto; transform: translateY(-50%); }

/* ------------------------------------------------------------------ search */

.cable-search { position: relative; }
.cable-search__panel {
  position: absolute;
  z-index: 1100;
  top: calc(100% + .4rem);
  left: 0;
  right: 0;
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  padding: .5rem;
  border-radius: 16px;
  background: var(--wst-surface);
  border: 1px solid var(--wst-line);
  box-shadow: var(--wst-shadow-lg);
}
.cable-search__group {
  margin: .45rem .55rem .25rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wst-muted);
}
.cable-search__list { list-style: none; margin: 0 0 .35rem; padding: 0; }
.cable-search__item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: .5rem .6rem;
  color: var(--wst-body);
  cursor: pointer;
}
.cable-search__item:hover,
.cable-search__item.is-active { background: var(--wst-blue-soft); }
.cable-search__item:focus-visible { outline: 3px solid var(--wst-focus-ring); outline-offset: -2px; }
.cable-search__name { display: block; font-weight: 600; color: var(--wst-ink); }
.cable-search__meta { display: block; font-size: .78rem; color: var(--wst-muted); }
.cable-search__empty { padding: .8rem .6rem; color: var(--wst-muted); }

/* ----------------------------------------------------------------- filters */

.filter-group + .filter-group { margin-top: 1.1rem; }
.filter-group__title {
  margin: 0 0 .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wst-muted);
}
.filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--wst-line);
  border-radius: 999px;
  padding: .3rem .75rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--wst-body);
  background: var(--wst-surface);
  cursor: pointer;
}
.filter-chip:hover { border-color: var(--wst-accent); color: var(--wst-accent); }
.filter-chip input { accent-color: var(--wst-blue); margin: 0; }
.filter-chip:has(input:checked) {
  border-color: var(--wst-blue);
  background: var(--wst-blue-soft);
  color: var(--wst-accent);
}
.filter-chip:has(input:focus-visible) { outline: 3px solid var(--wst-focus-ring); outline-offset: 2px; }
/* The status swatch inside a filter chip, so the chip and the map agree. */
.filter-chip__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
}
.filter-chip__dot--operational { background: var(--cable-operational); }
.filter-chip__dot--under_construction { background: var(--cable-under-construction); }
.filter-chip__dot--planned { background: var(--cable-planned); }
.filter-chip__dot--retired { background: var(--cable-retired); }

/* ---------------------------------------------------------------- timeline */

.timeline-card { display: flex; flex-direction: column; gap: .5rem; }
.timeline-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.timeline-year {
  font-size: 1.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--wst-ink);
  line-height: 1;
}
.timeline-range {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--wst-muted);
  font-variant-numeric: tabular-nums;
}
input[type="range"].timeline-slider { width: 100%; accent-color: var(--wst-blue); }

/* --------------------------------------------------------------- badges */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  border-radius: 999px;
  padding: .18rem .6rem;
  font-size: .74rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.status-badge--operational { background: #e4f6f3; color: #0a4f45; border-color: #b9e6df; }
.status-badge--under_construction { background: #fff6e3; color: #8a5a06; border-color: #f7e2b6; }
.status-badge--planned { background: #f3edff; color: #5b2e93; border-color: #ded0f9; }
.status-badge--retired { background: var(--wst-bg-soft); color: #475569; border-color: var(--wst-line); }
.status-badge--unknown { background: var(--wst-bg-soft); color: var(--wst-muted); border-color: var(--wst-line); }

:root[data-theme="dark"] .status-badge--operational { background: #072b31; color: #93ded5; border-color: #14544c; }
:root[data-theme="dark"] .status-badge--under_construction { background: #2c2412; color: #f0c274; border-color: #4d3d17; }
:root[data-theme="dark"] .status-badge--planned { background: #241634; color: #d8b4fe; border-color: #45266b; }
:root[data-theme="dark"] .status-badge--retired { background: #16233a; color: #b6c4d8; border-color: var(--wst-line); }

/* A value the source does not state. Never a guess, never blank. */
.no-data { color: var(--wst-muted); font-style: italic; font-weight: 400; }

/* --------------------------------------------------------- detail panel */

.cable-detail__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.detail-list { margin: 0; }
.detail-list dt {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wst-muted);
  margin-top: .9rem;
}
.detail-list dd {
  margin: .15rem 0 0;
  color: var(--wst-ink);
  font-weight: 600;
  word-break: break-word;
}
.detail-source {
  margin-top: 1.25rem;
  padding-top: .9rem;
  border-top: 1px solid var(--wst-line);
  font-size: .78rem;
  color: var(--wst-muted);
}

.cable-link-list { list-style: none; margin: 0; padding: 0; }
.cable-link-list li + li { margin-top: .35rem; }
.cable-link-list button,
.cable-link-list a {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  text-align: left;
  border: 1px solid var(--wst-line);
  border-radius: 12px;
  background: var(--wst-surface-2);
  padding: .5rem .7rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--wst-ink);
  text-decoration: none;
}
.cable-link-list button:hover,
.cable-link-list a:hover { border-color: var(--wst-blue); color: var(--wst-accent); }

/* --------------------------------------------------------- directories */

.directory-table { font-size: .92rem; }
.directory-table th { white-space: nowrap; }
.directory-table td { vertical-align: middle; }
.directory-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }

.cable-card {
  height: 100%;
  border: 1px solid var(--wst-line);
  border-radius: 18px;
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg, var(--wst-surface-2), var(--wst-bg-soft));
}
.cable-card__title { margin: 0 0 .35rem; font-size: 1.02rem; font-weight: 700; }
.cable-card__title a { color: var(--wst-ink); text-decoration: none; }
.cable-card__title a:hover { color: var(--wst-accent); }
.cable-card__meta { margin: .5rem 0 0; font-size: .84rem; color: var(--wst-muted); }

.chip-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border: 1px solid var(--wst-line);
  border-radius: 999px;
  padding: .15rem .6rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--wst-body);
  background: var(--wst-surface);
  text-decoration: none;
}
a.chip:hover { border-color: var(--wst-blue); color: var(--wst-accent); }

/* ------------------------------------------------------------- explorer */

.route-result {
  border: 1px solid var(--wst-line);
  border-radius: 18px;
  background: var(--wst-surface-2);
  padding: 1.1rem 1.25rem;
}
.route-pair {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  font-weight: 700;
  color: var(--wst-ink);
  font-size: 1.1rem;
}
.route-pair__arrow { color: var(--wst-accent); font-size: 1.3rem; line-height: 1; }

/* ------------------------------------------------------------- mobile */

.map-tabs { display: none; }
@media (max-width: 991.98px) {
  .map-tabs { display: inline-flex; }
  .is-hidden-mobile { display: none !important; }
  .globe-shell { height: clamp(360px, 58vh, 560px); }
  .globe-panel--stats,
  .globe-panel--legend {
    position: static;
    max-width: none;
    margin-top: .75rem;
    backdrop-filter: none;
  }
  /* Filters live in an offcanvas on small screens so they never hide the globe. */
  .globe-panel--hover { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .globe-panel { transition: none !important; }
}

/* Sticky sidebar on the long explainer pages. Inline styles are blocked by the
   site's Content-Security-Policy, so this lives in the stylesheet. */
.sticky-aside { position: sticky; top: 6rem; }
@media (max-width: 991.98px) { .sticky-aside { position: static; } }

/* ------------------------------------------------------------ country card */
/* Flag beside the name, so the grid scans by shape as well as by reading. */
.country-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
}
.country-card__text { display: flex; flex-direction: column; min-width: 0; }
.country-card .cable-card__title { margin: 0; }
.country-card .cable-card__meta { margin: .15rem 0 0; }

.flag {
  flex: 0 0 auto;
  border-radius: 50%;
  /* A thin ring so a mostly-white flag still reads as a disc. */
  box-shadow: 0 0 0 1px var(--wst-line);
}
h1 .flag { vertical-align: -.28em; margin-right: .15em; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }