:root {
  color-scheme: dark;
  --ocean: #06151b;
  --navy: #081d24;
  --panel: #0a242cf2;
  --line: #314f58;
  --line-soft: #1f3941;
  --paper: #eee5d2;
  --text: #c4cfcc;
  --muted: #82999f;
  --aqua: #5ed0ca;
  --aqua-dim: #1e7878;
  --gold: #d1ac6b;
  --ice: #b8e7ed;
  --shadow: 0 28px 90px #000a;
  font-family: Manrope, system-ui, sans-serif;
  font-size: 16px;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: var(--ocean);
  color: var(--paper);
}
body {
  overflow: hidden;
}
button,
input {
  font: inherit;
}
button {
  color: inherit;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 9999;
  left: 12px;
  top: 10px;
  transform: translateY(-160%);
  background: var(--paper);
  color: var(--ocean);
  padding: 0.7rem 1rem;
}
.skip-link:focus {
  transform: none;
}
[hidden] {
  display: none !important;
}
.app {
  height: 100svh;
  display: grid;
  grid-template-rows: 4.5rem minmax(0, 1fr) 4rem;
  background: var(--ocean);
}
.topbar {
  position: relative;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 1.85rem;
  background: #07191f;
  border-bottom: 1px solid #25434b;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--paper);
  text-decoration: none;
}
.brand-icon {
  width: 2.45rem;
  height: 2.45rem;
  display: block;
  flex: none;
}
.brand-copy strong,
.brand-copy small {
  display: block;
  line-height: 1;
}
.brand-copy strong {
  font-size: 0.9rem;
  letter-spacing: 0.15em;
}
.brand-copy small {
  font:
    500 0.66rem DM Mono,
    monospace;
  letter-spacing: 0.14em;
  color: var(--aqua);
  margin-top: 0.3rem;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.search-box {
  width: min(27vw, 19rem);
  height: 2.5rem;
  padding: 0 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid #2a4952;
  background: #0a2229;
}
.search-box svg,
.tool-button svg {
  width: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: none;
  color: var(--paper);
  font-size: 0.82rem;
}
.search-box input::placeholder {
  color: #71898f;
}
.tool-button,
.discover-button {
  height: 2.5rem;
  border: 1px solid #2b4952;
  background: #0a2229;
  padding: 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.76rem;
}
.tool-button:hover,
.tool-button[aria-expanded="true"] {
  border-color: #668087;
}
.discover-button {
  border-color: #277272;
  color: #bfe9e5;
}
.discover-button:hover {
  background: #0e3035;
}
.map-shell {
  position: relative;
  min-height: 0;
  overflow: hidden;
}
#map {
  position: absolute;
  inset: 0;
  background: #07171d;
}
.map-atmosphere {
  position: absolute;
  z-index: 400;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 56% 44%,
      transparent 0 22%,
      #04111625 65%,
      #03101588 100%
    ),
    linear-gradient(90deg, #06151b8c, transparent 28% 72%, #06151b55);
  box-shadow: inset 0 0 8rem #020c0f77;
}
.leaflet-container {
  font-family: Manrope, sans-serif;
}
.leaflet-control-zoom {
  border: 1px solid #3b5961 !important;
  box-shadow: none !important;
}
.leaflet-control-zoom a {
  background: #092129 !important;
  color: #d8e3de !important;
  border-color: #3b5961 !important;
}
.leaflet-control-attribution {
  background: #06151bd9 !important;
  color: #73898e !important;
  font-size: 0.62rem !important;
}
.leaflet-control-attribution a {
  color: #9bb0b3 !important;
}
.map-tooltip {
  background: #0a2229 !important;
  color: var(--paper) !important;
  border: 1px solid #516d74 !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 30px #0008 !important;
  font:
    500 0.67rem DM Mono,
    monospace !important;
}
.map-tooltip:before {
  border-top-color: #516d74 !important;
}
.wreck-marker-host {
  background: none !important;
  border: 0 !important;
}
.wreck-marker {
  position: relative;
  width: 2.35rem;
  height: 2.35rem;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.wreck-marker .marker-symbol {
  width: 1.9rem;
  height: 1.9rem;
  display: block;
  box-sizing: border-box;
  padding: 0.12rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #06171de8;
  color: var(--role-color);
  filter: drop-shadow(0 0 0.4rem var(--role-color));
  transition:
    color 0.2s,
    filter 0.2s,
    transform 0.2s;
}
.role-passenger {
  --role-color: #5ed0ca;
}
.role-cargo {
  --role-color: #e3a077;
}
.role-exploration {
  --role-color: #bea9e8;
}
.role-naval {
  --role-color: #d1ac6b;
}
.wreck-marker .marker-symbol svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  overflow: visible;
}
.wreck-marker span {
  position: absolute;
  left: 2rem;
  top: 0.55rem;
  white-space: nowrap;
  color: #d7e2de;
  background: #06171dcf;
  padding: 0.15rem 0.35rem;
  font:
    500 0.62rem DM Mono,
    monospace;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateX(-0.25rem);
  transition: 0.2s;
  pointer-events: none;
}
.wreck-marker:hover span,
.wreck-marker:focus-visible span,
.wreck-marker.selected span {
  opacity: 1;
  transform: none;
}
.wreck-marker:hover .marker-symbol,
.wreck-marker.selected .marker-symbol {
  color: #fff;
  filter: drop-shadow(0 0 0.65rem #fff9);
  transform: scale(1.18);
}
.wreck-marker.chronicle:after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #5ed0ca88;
  border-radius: 50%;
  animation: pulse 2.5s infinite;
}
.wreck-marker.probable .marker-symbol svg {
  opacity: 0.85;
}
.wreck-marker.probable .marker-symbol {
  border-style: dashed;
}
@keyframes pulse {
  0% {
    transform: scale(0.58);
    opacity: 0.9;
  }
  80%,
  100% {
    transform: scale(1.32);
    opacity: 0;
  }
}
.wreck-panel,
.filter-panel {
  position: absolute;
  z-index: 700;
  right: 1.85rem;
  top: 1.8rem;
  background: linear-gradient(145deg, #0c2a33f5, #071a20f7);
  border: 1px solid #48656d;
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
.wreck-panel {
  width: min(25rem, calc(100% - 3.7rem));
  padding: 1.75rem;
}
.profile-toggle {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 3.2rem;
  width: 1.6rem;
  height: 3rem;
  border: 1px solid #48656d;
  border-left: 0;
  background: #0b2c35;
  color: var(--aqua);
  font-size: 1.8rem;
  cursor: pointer;
}
.profile-toggle:hover,
.profile-toggle:focus-visible {
  background: #14404a;
}
.ship-profile {
  position: absolute;
  z-index: 710;
  right: calc(25rem + 2.45rem);
  top: 1.8rem;
  width: min(30rem, calc(100% - 29.5rem));
  max-height: calc(100% - 3.6rem);
  overflow-y: auto;
  padding: 1.25rem 1.4rem 1.5rem;
  background: #092129f8;
  border: 1px solid #48656d;
  box-shadow: var(--shadow);
}
.ship-profile-header {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0 0.6rem;
  background: #092129;
  border-bottom: 1px solid #36535b;
}
.ship-profile-header small {
  color: var(--aqua);
  font: 500 0.62rem DM Mono, monospace;
  letter-spacing: 0.12em;
}
.ship-profile-header button {
  border: 0;
  background: none;
  color: var(--paper);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.ship-profile h2 {
  margin: 1rem 0 0.5rem;
  font: 400 2rem/1.1 "Libre Caslon Display", serif;
}
.ship-profile-lead {
  margin: 0 0 1rem;
  color: #c9d9d5;
  font-size: 0.85rem;
  line-height: 1.6;
}
.ship-profile-figure {
  margin: 1rem 0 1.2rem;
  border: 1px solid #36535b;
  background: #06171d;
}
.ship-profile-figure img {
  display: block;
  width: 100%;
  max-height: 16rem;
  object-fit: cover;
}
.ship-profile-figure figcaption {
  padding: 0.65rem 0.75rem;
  color: #aebfbd;
  font-size: 0.68rem;
  line-height: 1.45;
}
.ship-profile a {
  color: var(--aqua);
}
.ship-profile-section {
  margin: 0 0 1.1rem;
}
.ship-profile-section h3,
.ship-profile-sources h3 {
  margin: 0 0 0.35rem;
  font: 400 1.2rem "Libre Caslon Display", serif;
}
.ship-profile-section p {
  margin: 0;
  color: #b9c8c5;
  font-size: 0.76rem;
  line-height: 1.65;
}
.ship-profile-sources {
  padding-top: 0.9rem;
  border-top: 1px solid #36535b;
}
.ship-profile-sources a {
  display: block;
  width: fit-content;
  margin-top: 0.4rem;
  font-size: 0.7rem;
}
@media (max-width: 1000px) {
  .profile-toggle {
    left: auto;
    right: 0.7rem;
    top: 2.7rem;
    width: 2rem;
    height: 2rem;
    border-right: 1px solid #48656d;
    font-size: 1.4rem;
  }
  .ship-profile {
    inset: 0.7rem;
    width: auto;
    max-height: none;
  }
}
.panel-close {
  position: absolute;
  right: 0.8rem;
  top: 0.6rem;
  border: 0;
  background: none;
  color: #91a5a9;
  font-size: 1.5rem;
  cursor: pointer;
}
.panel-eyebrow {
  display: flex;
  gap: 1rem;
  color: var(--aqua);
  font:
    500 0.64rem DM Mono,
    monospace;
  letter-spacing: 0.12em;
}
.panel-eyebrow span + span {
  color: #9aadaf;
}
.panel-eyebrow i,
.narrative-meta i {
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--aqua);
  margin-right: 0.3rem;
}
.wreck-panel h2 {
  font:
    400 2.6rem/1 "Libre Caslon Display",
    serif;
  letter-spacing: -0.025em;
  margin: 1rem 0 0.3rem;
}
.wreck-type {
  font:
    500 0.68rem DM Mono,
    monospace;
  letter-spacing: 0.07em;
  color: var(--gold);
  margin: 0 0 1rem;
}
.wreck-summary {
  color: #b8c5c3;
  font-size: 0.88rem;
  line-height: 1.65;
  margin: 0 0 1.2rem;
}
.wreck-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 1.2rem;
  border-top: 1px solid #36535b;
  border-left: 1px solid #36535b;
}
.wreck-facts div {
  padding: 0.7rem;
  border-right: 1px solid #36535b;
  border-bottom: 1px solid #36535b;
}
.wreck-facts dt {
  color: #789198;
  text-transform: uppercase;
  font:
    500 0.58rem DM Mono,
    monospace;
  letter-spacing: 0.1em;
}
.wreck-facts dd {
  margin: 0.3rem 0 0;
  font-size: 0.77rem;
  color: #e0e5df;
}
.story-cta {
  height: 3rem;
  width: 100%;
  border: 1px solid var(--aqua);
  background: var(--aqua);
  color: #06181d;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  cursor: pointer;
}
.story-cta:disabled {
  background: #263b40;
  border-color: #3b5157;
  color: #778b8f;
  cursor: not-allowed;
}
.story-cta b {
  font-size: 1.1rem;
}
.sources-cta {
  width: 100%;
  height: 2.2rem;
  border: 0;
  background: none;
  color: #8fa5a9;
  font-size: 0.72rem;
  cursor: pointer;
}
.sources-cta:hover {
  color: var(--paper);
}
.filter-panel {
  width: 20rem;
  padding: 1.3rem;
}
.filter-panel header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 1rem;
  border-bottom: 1px solid #35525a;
}
.filter-panel header small {
  font:
    500 0.6rem DM Mono,
    monospace;
  letter-spacing: 0.15em;
  color: var(--aqua);
}
.filter-panel h2 {
  font: 400 1.45rem "Libre Caslon Display";
  margin: 0.3rem 0 0;
}
.filter-panel header button {
  border: 0;
  background: none;
  color: #9aadaf;
  font-size: 1.4rem;
  cursor: pointer;
}
.filter-panel fieldset {
  border: 0;
  margin: 0;
  padding: 1rem 0;
}
.filter-panel legend {
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 0.55rem;
}
.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
.check-grid.two {
  grid-template-columns: 1fr 1fr;
}
.check-grid label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #b2c0bf;
  font-size: 0.75rem;
  cursor: pointer;
}
.check-grid input {
  accent-color: var(--aqua);
}
.reset-button {
  width: 100%;
  height: 2.4rem;
  border: 1px solid #38555d;
  background: transparent;
  color: #9bb0b3;
  font-size: 0.72rem;
  cursor: pointer;
}
.map-legend {
  position: absolute;
  z-index: 450;
  left: 1.9rem;
  bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  max-width: calc(100% - 3.8rem);
  color: #8da2a6;
  font:
    400 0.62rem DM Mono,
    monospace;
}
.map-legend span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.map-legend .role-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
}
.map-legend .role-legend svg {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--role-color);
}
.map-legend .legend-divider {
  width: 1px;
  height: 1rem;
  background: #46616a;
  margin: 0 0.15rem;
}
.map-legend .dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--aqua);
}
.map-legend .probable {
  background: transparent;
  border: 1px solid var(--gold);
}
.map-legend .ring {
  width: 0.8rem;
  height: 0.8rem;
  border: 1px solid #5ed0ca99;
  border-radius: 50%;
}
.map-status {
  position: absolute;
  z-index: 500;
  left: 50%;
  top: 1rem;
  transform: translateX(-50%);
  background: #06171de8;
  color: var(--paper);
  font-size: 0.75rem;
  margin: 0;
  padding: 0.55rem 0.8rem;
}
.map-status:empty {
  display: none;
}
.timeline {
  position: relative;
  z-index: 800;
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) 7rem;
  align-items: center;
  gap: 1rem;
  padding: 0 1.9rem;
  background: #07191f;
  border-top: 1px solid #28464e;
  box-shadow: 0 -1rem 2.6rem #0006;
}
.timeline-year small {
  display: block;
  color: #7d9499;
  font:
    500 0.58rem DM Mono,
    monospace;
  letter-spacing: 0.14em;
}
.timeline-year output {
  font: 400 1.5rem "Libre Caslon Display";
  color: var(--paper);
}
.timeline-control input {
  width: 100%;
  height: 2rem;
  margin: 0;
  accent-color: var(--aqua);
  cursor: ew-resize;
}
.era-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.1rem;
  color: #6f888e;
  font:
    400 0.55rem DM Mono,
    monospace;
  letter-spacing: 0.04em;
}
.wreck-count {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  text-align: left;
  color: #7f959a;
  margin: 0;
}
.wreck-count strong {
  font: 400 1.35rem "Libre Caslon Display";
  color: var(--paper);
}
.wreck-count span {
  font:
    400 0.59rem DM Mono,
    monospace;
  line-height: 1.2;
}
.story-view {
  position: fixed;
  z-index: 900;
  inset: 0;
  background: var(--ocean);
  overflow: hidden;
}
.story-header {
  position: absolute;
  z-index: 1000;
  left: 0;
  right: 0;
  top: 0;
  height: 4.5rem;
  padding: 0 1.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #07191f;
  border-bottom: 1px solid #28464e;
}
.back-button,
.story-tools button {
  border: 0;
  background: none;
  color: #a6b8ba;
  cursor: pointer;
  font-size: 0.75rem;
}
.back-button span {
  color: var(--aqua);
  margin-right: 0.5rem;
}
.story-brand {
  text-align: center;
}
.story-brand small,
.story-brand strong {
  display: block;
}
.story-brand small {
  font:
    500 0.56rem DM Mono,
    monospace;
  letter-spacing: 0.15em;
  color: #6f8a90;
}
.story-brand strong {
  font:
    500 0.9rem Manrope,
    sans-serif;
  letter-spacing: 0.12em;
  margin-top: 0.25rem;
}
.story-tools {
  display: flex;
  gap: 1rem;
}
.story-tools button:last-child {
  color: var(--aqua);
}
.story-map {
  position: absolute;
  inset: 4.5rem 0 0;
  background: #06151b;
}
.story-vignette {
  position: absolute;
  z-index: 400;
  inset: 4.5rem 0 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      #06151bf8 0%,
      #06151bd9 29%,
      #06151b38 52%,
      transparent 70%
    ),
    linear-gradient(0deg, #06151beb 0%, transparent 27%);
  box-shadow: inset 0 0 10rem #010a0d70;
}
.narrative {
  position: absolute;
  z-index: 600;
  left: clamp(1.9rem, 5vw, 5rem);
  top: 50%;
  width: min(29rem, 37vw);
  transform: translateY(-52%);
}
.narrative.refresh {
  animation: refresh 0.42s ease both;
}
@keyframes refresh {
  from {
    opacity: 0.25;
    transform: translateY(-49%);
  }
  to {
    opacity: 1;
    transform: translateY(-52%);
  }
}
.narrative-meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font:
    500 0.62rem DM Mono,
    monospace;
  letter-spacing: 0.11em;
  color: var(--aqua);
}
.narrative-meta span + span {
  color: #93a7aa;
}
.narrative-meta .uncertain {
  color: var(--gold);
}
.narrative-meta .uncertain i {
  background: var(--gold);
}
.event-time {
  color: var(--gold);
  font:
    500 0.68rem DM Mono,
    monospace;
  letter-spacing: 0.14em;
  margin: 2.1rem 0 0.7rem;
}
.narrative h2 {
  font:
    400 clamp(2.3rem, 4vw, 4.75rem)/0.94 "Libre Caslon Display",
    serif;
  letter-spacing: -0.035em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
.event-copy {
  max-width: 26rem;
  color: #bdc9c6;
  font-size: 0.9rem;
  line-height: 1.72;
  margin: 0;
}
.event-place {
  display: inline-block;
  margin: 1.2rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid #3b5961;
  color: #80979c;
  font:
    500 0.61rem DM Mono,
    monospace;
  letter-spacing: 0.1em;
}
.event-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin: 0.65rem 0 0;
  color: #9fb7b7;
  font:
    500 0.62rem/1.4 DM Mono,
    monospace;
}
.event-evidence a {
  color: #75d8cf;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.story-navigation {
  position: absolute;
  z-index: 650;
  left: clamp(1.9rem, 5vw, 5rem);
  right: clamp(1.9rem, 5vw, 5rem);
  bottom: 2.2rem;
  display: grid;
  grid-template-columns: 2.7rem minmax(5rem, 1fr) 4rem 2.7rem;
  align-items: center;
  gap: 1rem;
}
.nav-arrow {
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid #4c6870;
  background: #092129d9;
  cursor: pointer;
}
.nav-arrow:disabled {
  opacity: 0.28;
  cursor: default;
}
.event-progress {
  height: 1px;
  background: #546e75;
  position: relative;
}
.event-progress i {
  position: absolute;
  left: 0;
  top: -1px;
  height: 3px;
  background: var(--aqua);
  transition: width 0.35s;
}
.event-index {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  font:
    500 0.61rem DM Mono,
    monospace;
  color: #6f888e;
}
.event-index strong {
  color: var(--paper);
}
.keyboard-hint {
  position: absolute;
  z-index: 650;
  bottom: 0.35rem;
  left: 50%;
  transform: translateX(-50%);
  color: #586f75;
  font:
    400 0.55rem DM Mono,
    monospace;
}
.keyboard-hint kbd {
  border: 1px solid #3a535a;
  padding: 0.08rem 0.25rem;
  font: inherit;
}
.sources-dialog {
  width: min(44rem, calc(100% - 2rem));
  max-height: 86vh;
  border: 1px solid #4a6870;
  background: #092129;
  color: var(--paper);
  box-shadow: var(--shadow);
  padding: 1.8rem;
}
.sources-dialog::backdrop {
  background: #01090cdc;
  backdrop-filter: blur(6px);
}
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 1rem;
  border-bottom: 1px solid #36535b;
}
.dialog-header small {
  font:
    500 0.6rem DM Mono,
    monospace;
  letter-spacing: 0.14em;
  color: var(--aqua);
}
.dialog-header h2 {
  font: 400 2.2rem "Libre Caslon Display";
  margin: 0.3rem 0;
}
.dialog-header button {
  border: 0;
  background: none;
  color: #91a5a8;
  font-size: 1.6rem;
  cursor: pointer;
}
.sources-dialog > p {
  color: #9fb1b1;
  font-size: 0.8rem;
  line-height: 1.6;
}
.sources-dialog ol {
  list-style: none;
  margin: 1rem 0 1.5rem;
  padding: 0;
}
.sources-dialog ol li {
  padding: 0.85rem 0;
  border-top: 1px solid #2b474f;
}
.sources-dialog ol li > a {
  display: flex;
  justify-content: space-between;
  color: var(--paper);
  text-decoration: none;
}
.sources-dialog ol li > a:hover strong {
  color: var(--aqua);
}
.sources-dialog ol li small,
.sources-dialog ol li strong,
.sources-dialog ol li span {
  display: block;
}
.sources-dialog ol li small {
  color: var(--gold);
  font:
    500 0.55rem DM Mono,
    monospace;
  letter-spacing: 0.08em;
}
.sources-dialog ol li strong {
  font-size: 0.82rem;
  margin: 0.2rem 0;
}
.sources-dialog ol li span {
  color: #849a9e;
  font-size: 0.68rem;
}
.sources-dialog ol li p {
  color: #8fa3a6;
  font-size: 0.7rem;
  margin: 0.4rem 0 0;
}
.toast {
  position: fixed;
  z-index: 1200;
  left: 50%;
  bottom: 7.5rem;
  transform: translate(-50%, 1rem);
  background: var(--paper);
  color: var(--ocean);
  padding: 0.7rem 1rem;
  font-size: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}
.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (max-width: 900px) {
  .search-box {
    width: min(36vw, 17rem);
  }
  .wreck-panel {
    width: 22rem;
  }
  .narrative {
    width: 43vw;
  }
  .story-vignette {
    background:
      linear-gradient(90deg, #06151bf4 0%, #06151bcf 39%, transparent 72%),
      linear-gradient(0deg, #06151be8, transparent 28%);
  }
}
@media (max-width: 680px) {
  body {
    overflow: hidden;
  }
  .app {
    grid-template-rows: auto minmax(0, 1fr) 3.75rem;
  }
  .topbar {
    padding: 0.7rem 1rem;
    flex-wrap: wrap;
    height: auto;
  }
  .brand-icon {
    width: 2.1rem;
    height: 2.1rem;
  }
  .brand-copy strong {
    font-size: 0.78rem;
  }
  .top-actions {
    width: 100%;
  }
  .search-box {
    width: auto;
    flex: 1;
  }
  .tool-button span,
  .discover-button {
    font-size: 0;
  }
  .discover-button span {
    font-size: 1rem;
  }
  .wreck-panel {
    left: 0.7rem;
    right: 0.7rem;
    top: auto;
    bottom: 0.7rem;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 0.9rem;
  }
  .panel-eyebrow {
    font-size: 0.55rem;
  }
  .wreck-panel h2 {
    font-size: 1.8rem;
    margin: 0.55rem 0 0.2rem;
  }
  .wreck-type {
    font-size: 0.56rem;
    margin-bottom: 0.55rem;
  }
  .wreck-summary {
    font-size: 0.73rem;
    line-height: 1.42;
    margin-bottom: 0.6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .wreck-facts {
    margin-bottom: 0.55rem;
  }
  .wreck-facts div {
    padding: 0.4rem 0.55rem;
  }
  .wreck-facts dt {
    font-size: 0.5rem;
  }
  .wreck-facts dd {
    font-size: 0.67rem;
    margin-top: 0.15rem;
  }
  .story-cta {
    height: 2.55rem;
    font-size: 0.75rem;
  }
  .sources-cta {
    display: none;
  }
  .map-legend {
    left: 0.7rem;
    right: 0.7rem;
    bottom: 1.9rem;
    max-width: none;
    padding: 0.45rem 0.6rem;
    background: #06171de8;
    border: 1px solid #38555d;
    font-size: 0.58rem;
  }
  .map-legend > span {
    display: none;
  }
  .map-legend .role-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 0.8rem;
    width: 100%;
  }
  .filter-panel {
    left: 0.7rem;
    right: 0.7rem;
    top: 0.7rem;
    width: auto;
  }
  .timeline {
    grid-template-columns: 6.2rem 1fr;
    padding: 0 1rem;
    gap: 0.7rem;
  }
  .timeline-year output {
    font-size: 1.4rem;
  }
  .wreck-count {
    display: none;
  }
  .era-scale span:not(:first-child):not(:last-child) {
    display: none;
  }
  .leaflet-control-zoom {
    display: none;
  }
  .story-header {
    height: 4.2rem;
    padding: 0 0.9rem;
  }
  .story-brand small {
    display: none;
  }
  .story-brand strong {
    font-size: 0.76rem;
  }
  .story-map {
    inset: 4.2rem 0 46%;
  }
  .story-vignette {
    inset: 4.2rem 0 0;
    background: linear-gradient(
      0deg,
      #06151b 43%,
      #06151be8 52%,
      transparent 76%
    );
  }
  .narrative {
    left: 1.2rem;
    right: 1.2rem;
    top: auto;
    bottom: 5.6rem;
    width: auto;
    transform: none;
  }
  .narrative.refresh {
    animation: refreshMobile 0.4s ease both;
  }
  @keyframes refreshMobile {
    from {
      opacity: 0.25;
      transform: translateY(0.5rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .narrative-meta {
    font-size: 0.54rem;
    gap: 0.7rem;
  }
  .event-time {
    margin: 1rem 0 0.45rem;
    font-size: 0.6rem;
  }
  .narrative h2 {
    font-size: 2rem;
    margin-bottom: 0.6rem;
  }
  .event-copy {
    font-size: 0.78rem;
    line-height: 1.5;
  }
  .event-place {
    margin-top: 0.6rem;
    font-size: 0.52rem;
  }
  .story-navigation {
    left: 1rem;
    right: 1rem;
    bottom: 1.5rem;
    grid-template-columns: 2.5rem 1fr 3.7rem 2.5rem;
    gap: 0.6rem;
  }
  .nav-arrow {
    width: 2.5rem;
    height: 2.5rem;
  }
  .keyboard-hint {
    display: none;
  }
  .sources-dialog {
    padding: 1.1rem;
  }
}
@media (max-height: 700px) and (min-width: 681px) {
  .narrative {
    top: 48%;
    width: 42vw;
  }
  .narrative h2 {
    font-size: 2.8rem;
  }
  .event-time {
    margin: 1rem 0 0.5rem;
  }
  .event-copy {
    font-size: 0.78rem;
  }
  .story-navigation {
    bottom: 1.2rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Structural overrides used by the custom Leaflet map layers. */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
  position: absolute;
  left: 0;
  top: 0;
}
.leaflet-container {
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.leaflet-container .leaflet-overlay-pane svg {
  max-width: none !important;
  max-height: none !important;
}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
  max-width: none !important;
  max-height: none !important;
  width: auto;
  padding: 0;
}
.leaflet-tile {
  visibility: hidden;
  user-select: none;
  -webkit-user-drag: none;
}
.leaflet-tile-loaded {
  visibility: inherit;
}
.leaflet-zoom-box {
  width: 0;
  height: 0;
  box-sizing: border-box;
  z-index: 800;
}
.leaflet-overlay-pane svg {
  user-select: none;
}
.leaflet-pane {
  z-index: 400;
}
.leaflet-tile-pane {
  z-index: 200;
}
.leaflet-overlay-pane {
  z-index: 400;
}
.leaflet-shadow-pane {
  z-index: 500;
}
.leaflet-marker-pane {
  z-index: 600;
}
.leaflet-tooltip-pane {
  z-index: 650;
}
.leaflet-popup-pane {
  z-index: 700;
}
.leaflet-map-pane canvas {
  z-index: 100;
}
.leaflet-map-pane svg {
  z-index: 200;
}
.leaflet-vml-shape {
  width: 1px;
  height: 1px;
}
.lvml {
  behavior: url(#default#VML);
  display: inline-block;
  position: absolute;
}
.leaflet-control {
  position: relative;
  z-index: 800;
  pointer-events: auto;
  float: left;
  clear: both;
}
.leaflet-top,
.leaflet-bottom {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
}
.leaflet-top {
  top: 0;
}
.leaflet-right {
  right: 0;
}
.leaflet-bottom {
  bottom: 0;
}
.leaflet-left {
  left: 0;
}
.leaflet-control {
  margin: 0.65rem;
}
.leaflet-right .leaflet-control {
  float: right;
}
.leaflet-bottom .leaflet-control {
  margin-bottom: 0.65rem;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
  border: 0;
  background-clip: padding-box;
}
.leaflet-bar a {
  display: block;
  width: 1.9rem;
  height: 1.9rem;
  line-height: 1.9rem;
  text-align: center;
  text-decoration: none;
}
.leaflet-bar a.leaflet-disabled {
  cursor: default;
  color: #71848a;
}
.leaflet-control-attribution {
  padding: 0 0.35rem;
  line-height: 1.25rem;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
  color: #333;
}
.leaflet-control-attribution a {
  text-decoration: none;
}
.leaflet-tooltip {
  position: absolute;
  padding: 0.4rem 0.55rem;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.leaflet-tooltip:before {
  position: absolute;
  pointer-events: none;
  border: 0.38rem solid transparent;
  background: transparent;
  content: "";
}
.leaflet-tooltip-top {
  margin-top: -0.4rem;
}
.leaflet-tooltip-top:before {
  top: 100%;
  left: 50%;
  margin-left: -0.38rem;
}

/* Physical terrain map: expose relief and bathymetry without political detail. */
#map,
.story-map {
  background: #0b3850;
}
.base-map-tile {
  filter: none;
}
.map-atmosphere {
  background:
    radial-gradient(
      circle at 57% 43%,
      transparent 0 38%,
      #03151e18 76%,
      #020d135c 100%
    ),
    linear-gradient(90deg, #04151d70, transparent 25% 82%, #04151d28);
  box-shadow: inset 0 0 6rem #020b1040;
}
.story-vignette {
  background:
    linear-gradient(
      90deg,
      #06151bf8 0%,
      #06151bd5 29%,
      #06151b42 51%,
      transparent 69%
    ),
    linear-gradient(0deg, #06151bdc 0%, transparent 25%);
  box-shadow: inset 0 0 7rem #010a0d4a;
}
.map-shell {
  isolation: isolate;
}

/* The archive remains readable if the interactive map is unavailable. */
.catalog-panel {
  position: fixed;
  z-index: 850;
  inset: 0;
  overflow: auto;
  background: #07191f;
  padding: clamp(1rem, 4vw, 3rem);
  color: var(--paper);
}
.catalog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
}
.catalog-header h2 {
  font: 400 clamp(2rem, 4vw, 3.5rem) "Libre Caslon Display";
  margin: 0;
}
.catalog-header button {
  border: 0;
  background: none;
  font-size: 1.75rem;
  cursor: pointer;
}
.catalog-panel > p {
  color: var(--text);
  font-size: 0.9rem;
}
.catalog-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem 1rem;
  max-width: 90rem;
  margin: 1.2rem auto 0;
}
.catalog-controls label {
  display: grid;
  gap: 0.4rem;
  color: var(--muted);
  font:
    500 0.64rem "DM Mono",
    monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.catalog-controls input,
.catalog-controls select {
  min-height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #0a242c;
  color: var(--paper);
  padding: 0.45rem 0.65rem;
  font:
    400 0.84rem Manrope,
    sans-serif;
}
.catalog-controls input {
  width: min(24rem, calc(100vw - 2rem));
}
.catalog-controls #catalog-count {
  margin: 0 0 0.55rem;
  color: var(--aqua);
  font:
    500 0.7rem "DM Mono",
    monospace;
}
.catalog-panel #catalog-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1rem;
  max-width: 90rem;
  margin: 2rem auto 0;
}
.catalog-record {
  border: 1px solid var(--line);
  background: #0a242c;
  padding: 1.25rem;
}
.catalog-record h3 {
  font: 400 1.6rem "Libre Caslon Display";
  margin: 0 0 0.4rem;
}
.catalog-record p {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text);
}
.catalog-record .catalog-details {
  color: var(--gold);
  font:
    500 0.64rem/1.6 "DM Mono",
    monospace;
  text-transform: uppercase;
}
.catalog-record ul {
  margin: 0.9rem 0 0;
  padding-left: 1.1rem;
}
.catalog-record details {
  margin-top: 0.8rem;
}
.catalog-record summary {
  color: var(--aqua);
  font-size: 0.72rem;
  cursor: pointer;
}
.catalog-record li {
  margin: 0.35rem 0;
  font-size: 0.7rem;
}
.catalog-record a {
  color: var(--aqua);
}
.catalog-record.catalog-place {
  border-color: #695a40;
}
.catalog-map-button {
  border: 1px solid var(--aqua);
  background: #133940;
  color: var(--paper);
  padding: 0.55rem 0.8rem;
  font-size: 0.72rem;
  cursor: pointer;
}
.catalog-map-button:disabled {
  display: none;
}
.top-actions #catalog-toggle {
  white-space: nowrap;
}
.catalog-icon {
  display: none;
}
.search-box:focus-within {
  border-color: var(--aqua);
  box-shadow:
    0 0 0 2px #06151b,
    0 0 0 4px var(--aqua);
}
.search-box input:focus {
  outline: none;
}
:where(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}
.wreck-marker-host:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}
.wreck-marker-host:focus-visible .wreck-marker span {
  opacity: 1;
  transform: none;
}
.era-scale {
  gap: 0.25rem;
}
.era-scale span {
  min-width: 0;
  white-space: nowrap;
}
.era-scale span:first-child {
  text-align: left;
}
.era-scale span:last-child {
  text-align: right;
}
@media (max-width: 680px) {
  .top-actions {
    flex-wrap: nowrap;
    gap: 0.4rem;
  }
  .search-box {
    min-width: 0;
    width: auto;
    flex: 1;
  }
  .top-actions #catalog-toggle {
    width: 2.5rem;
    min-width: 2.5rem;
    padding: 0;
    justify-content: center;
  }
  .catalog-label {
    display: none;
  }
  #catalog-toggle .catalog-icon {
    display: inline;
    font-size: 1.1rem;
  }
  .era-scale span {
    font-size: 0.48rem;
  }
  .wreck-panel {
    max-height: min(80%, 31rem);
    overflow: auto;
  }
  .sources-cta {
    display: block;
  }
}

/* Ship journeys */
.story-vignette {
  background: linear-gradient(0deg, #06151b9c 0%, transparent 24%);
}
.narrative {
  padding: 1.5rem 1.7rem;
  background: #071c23eb;
  border: 1px solid #4b6970;
  box-shadow: 0 1rem 3.5rem #0009;
  backdrop-filter: blur(14px);
}
.journey-chapters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1.4rem;
  border: 1px solid #35535b;
  background: #0a252c;
}
.journey-chapters button {
  min-width: 0;
  min-height: 3.8rem;
  padding: 0.55rem 0.6rem;
  border: 0;
  border-right: 1px solid #35535b;
  border-top: 2px solid transparent;
  background: transparent;
  color: #9cafaf;
  text-align: left;
  cursor: pointer;
}
.journey-chapters button:last-child {
  border-right: 0;
}
.journey-chapters button span {
  display: block;
  margin-bottom: 0.25rem;
  color: #68878e;
  font:
    500 0.55rem DM Mono,
    monospace;
}
.journey-chapters button strong {
  display: block;
  font:
    600 0.62rem/1.3 Manrope,
    sans-serif;
}
.journey-chapters button[aria-current="step"] {
  border-top-color: var(--aqua);
  background: #123740;
  color: var(--paper);
}
.journey-chapters button[aria-current="step"] span {
  color: var(--aqua);
}
.journey-chapters button.unavailable {
  color: #6b7d80;
  cursor: not-allowed;
}
.journey-chapters button.unavailable::after {
  content: attr(data-unavailable);
  display: block;
  margin-top: 0.1rem;
  color: var(--gold);
  font:
    500 0.5rem DM Mono,
    monospace;
}
.journey-chapters button:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: -3px;
}
.event-time {
  margin-top: 1.3rem;
}
.story-tools {
  align-items: center;
}
.story-tools label {
  color: #799399;
  font:
    500 0.57rem DM Mono,
    monospace;
  letter-spacing: 0.12em;
}
.story-tools select {
  max-width: 13rem;
  min-height: 2.2rem;
  padding: 0 0.5rem;
  color: var(--paper);
  background: #0b2931;
  border: 1px solid #4c6870;
  font:
    500 0.68rem DM Mono,
    monospace;
}
.story-tools select:disabled {
  opacity: 0.55;
}
.journey-key {
  position: absolute;
  z-index: 600;
  right: 2rem;
  bottom: 1.2rem;
  margin: 0;
  color: #c1d2cf;
  background: #071c23d9;
  padding: 0.45rem 0.65rem;
  font:
    500 0.58rem DM Mono,
    monospace;
}
.journey-key i {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.35rem;
  border: 2px solid #f6f2e7;
  border-radius: 50%;
  background: var(--aqua);
}
.journey-key span:first-of-type {
  color: var(--gold);
  margin: 0 0.3rem;
}
.journey-ship {
  filter: drop-shadow(0 0 8px #5ed0ca);
}
.battle-opponent-icon {
  background: transparent;
  border: 0;
  filter: drop-shadow(0 0 5px #0a252c);
}
.battle-opponent-icon svg {
  display: block;
  width: 42px;
  height: 24px;
  fill: var(--gold);
  stroke: #f6e4b7;
  stroke-width: 1.5;
}
.battle-opponent-icon .deck {
  fill: #15333a;
}
.battle-opponent-icon .turret {
  fill: #f6e4b7;
}
.battle-opponent-label {
  background: #0a252ce8 !important;
  color: var(--gold) !important;
  border: 1px solid #a78958 !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 10px #0009 !important;
  font:
    500 0.63rem DM Mono,
    monospace !important;
}
.battle-opponent-label::before {
  display: none;
}
@media (max-width: 680px) {
  .story-tools label {
    display: none;
  }
  .story-tools select {
    max-width: 7.5rem;
    font-size: 0.62rem;
  }
  .story-vignette {
    background: linear-gradient(0deg, #06151b 0%, transparent 45%);
  }
  .narrative {
    padding: 1rem 1.1rem;
    max-height: 38vh;
    overflow-y: auto;
  }
  .journey-chapters {
    position: sticky;
    top: -1rem;
    z-index: 2;
    margin-bottom: 0.8rem;
  }
  .journey-chapters button {
    min-height: 3.5rem;
    padding: 0.35rem;
  }
  .journey-chapters button strong {
    font-size: 0.54rem;
  }
  .journey-key {
    top: calc(54% - 1.6rem);
    right: 0.6rem;
    bottom: auto;
    font-size: 0.48rem;
  }
}

/* Curated shipyards and ports */
#locations-toggle[aria-pressed="true"] {
  border-color: var(--gold);
  color: var(--paper);
  background: #273028;
}
.location-marker-host {
  background: none !important;
  border: 0 !important;
}
.location-marker {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0.31rem;
  border: 2px solid #f2d8a4;
  background: #544125;
  transform: rotate(45deg);
  box-shadow:
    0 0 0 3px #07191fdd,
    0 0 0.6rem #e7bc75aa;
  transition:
    transform 0.2s,
    background 0.2s;
}
.location-marker.port {
  border-radius: 50%;
  transform: none;
  border-color: #acd8ed;
  background: #244957;
  box-shadow:
    0 0 0 3px #07191fdd,
    0 0 0.6rem #acd8ed88;
}
.location-marker.selected,
.location-marker-host:hover .location-marker {
  background: var(--paper);
  transform: rotate(45deg) scale(1.3);
}
.location-marker.port.selected,
.location-marker-host:hover .location-marker.port {
  transform: scale(1.3);
}
.map-cluster-host {
  background: none !important;
  border: 0 !important;
}
.map-cluster {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 2px solid var(--aqua);
  border-radius: 50%;
  background: #0c3941;
  box-shadow:
    0 0 0 3px #07191fdb,
    0 0 0.9rem #5ed0ca88;
  color: var(--paper);
  font:
    700 0.82rem Manrope,
    sans-serif;
  cursor: pointer;
  transition: transform 0.2s;
}
.map-cluster-host:hover .map-cluster,
.map-cluster-host:focus-visible .map-cluster {
  transform: scale(1.13);
}
.map-legend .cluster-key {
  display: grid;
  place-items: center;
  width: 0.95rem;
  height: 0.95rem;
  border: 1px solid var(--aqua);
  border-radius: 50%;
  color: var(--paper);
  font:
    700 0.55rem Manrope,
    sans-serif;
}
.map-legend .place-key {
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.location-panel {
  position: absolute;
  z-index: 700;
  right: 1.85rem;
  top: 1.8rem;
  width: min(25rem, calc(100% - 3.7rem));
  max-height: calc(100% - 3.6rem);
  overflow-y: auto;
  padding: 1.75rem;
  background: linear-gradient(145deg, #0c2a33f5, #071a20f7);
  border: 1px solid #48656d;
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
.location-panel .panel-eyebrow {
  color: var(--gold);
}
.location-panel h2 {
  font:
    400 2.4rem/1 "Libre Caslon Display",
    serif;
  margin: 1rem 0 0.35rem;
}
.location-region {
  margin: 0 0 0.8rem;
  color: var(--gold);
  font:
    500 0.7rem DM Mono,
    monospace;
}
.location-note {
  margin: 0 0 1.2rem;
  color: #aebfbd;
  font-size: 0.8rem;
  line-height: 1.55;
}
.location-panel h3 {
  margin: 1rem 0 0.5rem;
  color: var(--paper);
  font-size: 0.78rem;
}
.location-count {
  margin: 0;
  color: var(--aqua);
  font:
    500 0.68rem DM Mono,
    monospace;
}
.location-ships {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.location-ships button {
  border: 1px solid #51727a;
  background: #123039;
  padding: 0.4rem 0.55rem;
  color: var(--paper);
  font-size: 0.68rem;
  cursor: pointer;
}
.location-ships button:hover,
.location-ships button:focus-visible {
  border-color: var(--aqua);
}
.location-timeline-note {
  margin: 0 0 0.5rem;
  color: #9db1b2;
  font-size: 0.68rem;
  line-height: 1.5;
}
.location-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
}
.location-journey {
  position: relative;
  padding: 0.75rem 0 0.85rem 4.4rem;
  border-top: 1px solid #36535b;
}
.location-journey::before {
  content: "";
  position: absolute;
  left: 3.75rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #48656d;
}
.location-journey::after {
  content: "";
  position: absolute;
  left: calc(3.75rem - 0.18rem);
  top: 1.04rem;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: var(--gold);
}
.location-year {
  position: absolute;
  top: 0.86rem;
  left: 0;
  width: 3.4rem;
  color: var(--gold);
  font:
    500 0.62rem DM Mono,
    monospace;
}
.location-journey h4 {
  margin: 0 0 0.25rem;
  font-size: 0.84rem;
}
.location-journey p {
  margin: 0 0 0.45rem;
  color: #aebfbd;
  font-size: 0.72rem;
  line-height: 1.5;
}
.location-journey .location-evidence {
  color: #87aeb2;
  font-size: 0.66rem;
}
.location-journey button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--aqua);
  font-size: 0.72rem;
  cursor: pointer;
}
.location-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.8rem;
  margin-top: 0.45rem;
}
.location-sources a {
  color: #b4c4c6;
  font-size: 0.65rem;
}
.wreck-panel {
  max-height: calc(100% - 3.6rem);
  overflow-y: auto;
}
.ship-connections {
  margin: 0 0 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid #36535b;
}
.ship-connections h3 {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
}
.ship-connections > p {
  margin: 0 0 0.6rem;
  color: #9eb1b2;
  font-size: 0.7rem;
  line-height: 1.4;
}
.ship-connection {
  padding: 0.45rem 0;
  border-top: 1px solid #29444c;
}
.ship-connection button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--aqua);
  font-size: 0.75rem;
  cursor: pointer;
}
.ship-connection p {
  margin: 0.2rem 0 0;
  color: #aebfbd;
  font-size: 0.65rem;
  line-height: 1.4;
}
@media (max-width: 680px) {
  .wreck-panel {
    max-height: min(80%, 31rem);
  }
  .location-panel {
    left: 0.7rem;
    right: 0.7rem;
    top: auto;
    bottom: 0.7rem;
    width: auto;
    max-height: min(70%, 31rem);
    padding: 1rem;
  }
  .location-panel h2 {
    font-size: 1.8rem;
  }
  #locations-toggle {
    padding: 0 0.45rem;
  }
  #locations-toggle span {
    font-size: 0.68rem;
  }
}