:root {
  --bg: #0B1220;
  --surface: #121B2E;
  --surface-2: #17233A;
  --line: #223047;
  --amber: #E8A33D;
  --teal: #4FD1C5;
  --text: #E7ECF3;
  --muted: #7C8797;
  --danger: #E8615F;
  --mono: 'Space Mono', ui-monospace, monospace;
  --sans: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background:
    radial-gradient(ellipse at 50% -10%, #17233A 0%, var(--bg) 55%),
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,0.025) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,0.025) 40px);
  color: var(--text);
  font-family: var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
}

.wrap { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 22px; flex: 1; }

header { text-align: center; padding-top: 6px; }

/* --- Sections dépliables (fonctionnalités bêta) --- */
details.feature { width: 100%; }
.feature-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-weight: 600;
  font-size: 15px;
  user-select: none;
}
.feature-summary::-webkit-details-marker { display: none; }
.feature-summary::marker { content: ""; }
.feature-summary:hover { background: var(--surface-2); }
.feature-mode-badge {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.feature-chevron { color: var(--teal); font-size: 12px; flex-shrink: 0; transition: transform 0.15s ease; }
details.feature[open] > .feature-summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}
details.feature[open] > .feature-summary .feature-chevron { transform: rotate(180deg); }
.feature-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-top: none;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* --- Réglages (choix des sections affichées) --- */
.settings-btn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  z-index: 500;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-size: 19px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.settings-btn:hover { background: var(--surface-2); }
.settings-panel {
  position: fixed;
  top: calc(max(12px, env(safe-area-inset-top)) + 48px);
  right: 12px;
  z-index: 500;
  width: min(290px, calc(100vw - 24px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
.settings-panel.is-hidden { display: none; }
.settings-panel-title {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 6px;
}
.settings-bulk {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.settings-bulk-btn {
  flex: 1;
  padding: 6px 8px;
  font-size: 11.5px;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--teal);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.settings-bulk-btn:hover { background: var(--bg); }

.page .page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
.page .page-header-row .back { margin-bottom: 0; flex: 0 1 auto; }

.page .lang-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 50%;
  max-width: 50%;
  margin-bottom: 0;
}
.page .lang-switcher .settings-lang-label { flex: 0 0 auto; white-space: nowrap; }

.page .lang-select-wrap { position: relative; flex: 1; min-width: 0; }
.page .lang-select-wrap::after {
  content: '▾';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--teal);
  font-size: 10px;
}
/* appearance:none removes each browser's own native <select> chrome (arrow, padding,
   min-height all differ between Firefox/Chrome) so the rectangle renders identically. */
.page .lang-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 26px 6px 10px;
  font-size: 11.5px;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--teal);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.page .lang-select:hover { background: var(--bg); }
.settings-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  font-size: 13.5px;
  cursor: pointer;
}
.settings-check input[type="checkbox"] {
  accent-color: var(--teal);
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  cursor: pointer;
}
.settings-check-remove {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
}
.settings-check-remove:hover { color: var(--danger); }
.settings-check-actions {
  margin-left: auto;
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.settings-drag-handle {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--muted);
  cursor: grab;
  padding: 4px 5px;
  border-radius: 6px;
  touch-action: none;
  user-select: none;
}
.settings-drag-handle:hover { color: var(--teal); background: var(--surface-2); }
.settings-check.is-dragging { opacity: 0.5; background: var(--surface-2); border-radius: 8px; }
.settings-check.is-dragging .settings-drag-handle { cursor: grabbing; color: var(--teal); }
.settings-custom-add {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.settings-custom-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--sans);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.settings-custom-input:focus { outline: 1px solid var(--teal); }
.settings-custom-add .settings-bulk-btn { flex: 0 0 auto; padding: 8px 14px; }

.altitude-offset-input {
  width: 68px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: var(--sans);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.altitude-offset-input:focus { outline: 1px solid var(--teal); }

.feature-summary-remove {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
}
.feature-summary-remove:hover { color: var(--danger); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--teal);
  text-transform: uppercase;
}
h1 {
  font-size: 22px;
  font-weight: 700;
  margin-top: 6px;
  letter-spacing: -0.01em;
}
.sub { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* --- Status line --- */
.status-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.dot.live { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.dot.err { background: var(--danger); }

/* --- Option "garder le GPS actif" + compte à rebours --- */
.keep-alive-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.keep-alive-toggle input {
  width: 15px;
  height: 15px;
  accent-color: var(--amber);
  cursor: pointer;
}
.countdown {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  min-height: 14px;
}

/* --- Info panel (masquable) --- */
.info-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.info-toggle {
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.info-toggle:hover { background: var(--surface-2); }
.info-toggle-icon { color: var(--teal); font-size: 10px; }
.info-content {
  padding: 4px 16px 14px;
  border-top: 1px solid var(--line);
}
.info-content.collapsed { display: none; }
.info-content p {
  font-size: 13px;
  line-height: 1.65;
  color: #C7CEDA;
  padding-top: 10px;
}
.info-content p + p { margin-top: 2px; }
.info-content .addr-row { padding-left: 0; padding-right: 0; }
.info-content .addr-row:first-child { border-top: none; }

/* --- Visit counter --- */
.visit-counter {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}
.visit-counter #visitCount { color: var(--teal); font-weight: 700; }

/* --- Carte OSM --- */
.map-wrap {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}
.map-wrap > div:first-child {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  filter: saturate(0.85) brightness(0.92);
}
.map-footer {
  border-top: 1px solid var(--line);
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.map-hint {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.5;
}
.map-link {
  font-size: 12px;
  color: var(--teal);
  text-decoration: none;
}
.map-link:hover { text-decoration: underline; }

/* Légende du dégradé d'intensité du radar de précipitations (échelle "Original" de
   RainViewer, approximative : faible à bleu/vert, jusqu'à très forte en violet). */
.radar-legend { margin: 4px 2px 0; }
.radar-legend-bar {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #2E7BD6 0%, #35B4C9 18%, #3FBF6E 36%, #E8D23D 54%, #E8A33D 68%, #E2524A 84%, #9A3FCC 100%);
}
.radar-legend-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--muted);
}
.radar-legend-labels span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.radar-legend-labels span:not(:first-child):not(:last-child) {
  align-items: center;
  text-align: center;
}
.radar-legend-labels span:last-child {
  align-items: flex-end;
  text-align: right;
}
.radar-legend-labels small {
  font-size: 9px;
  opacity: 0.75;
}
.gps-marker-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--amber);
  border: 2px solid #1A1206;
  box-shadow: 0 0 0 3px rgba(232, 163, 61, 0.35);
}
.click-marker-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--teal);
  border: 2px solid #08201E;
  box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.35);
  transform: rotate(45deg);
}
.leaflet-container { cursor: crosshair; }
.recenter-control, .home-control { margin-top: 8px !important; }
.recenter-control-btn, .home-control-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1 !important;
  color: #1A1206 !important;
  text-decoration: none;
}
.recenter-control-btn:hover, .home-control-btn:hover { background: #f4f4f4; }
.operator-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.operator-filter-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
}
.operator-filter-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.operator-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.leaflet-popup-content a.popup-goto {
  display: inline-block;
  margin-top: 6px;
  padding: 5px 10px;
  background: var(--teal);
  color: #06201C;
  font-weight: 600;
  font-size: 12.5px;
  border-radius: 8px;
  text-decoration: none;
}
.leaflet-popup-content a.popup-goto:hover { background: #6fe0d4; }

/* --- Data grid --- */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.cell { background: var(--surface); padding: 14px 16px; }
.cell .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-family: var(--mono); }
.cell .value { margin-top: 5px; font-family: var(--mono); font-size: 16px; font-weight: 700; }
.cell .value.dim { color: var(--muted); font-weight: 400; font-size: 14px; }

.accuracy-warning {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #C7CEDA;
}


/* --- Address panel --- */
.addr-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.addr-panel .addr-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.addr-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.addr-row:last-child { border-bottom: none; }
.addr-row .k { color: var(--muted); }
.addr-row .v { font-weight: 600; text-align: right; }
.addr-row .v.dim { color: var(--muted); font-weight: 400; }
.addr-row .v.v-amber { color: var(--amber); }
.addr-row .v.v-teal { color: var(--teal); }
.addr-row .v.dim.v-amber, .addr-row .v.dim.v-teal { color: var(--muted); font-weight: 400; }

/* Mini profil altimétrique vertical : trois marqueurs positionnés proportionnellement à
   leur altitude sur une règle verticale (GPS / IGN au point GPS / IGN au point cliqué),
   étiquette (nom + valeur) directement à côté de chaque point, et les deux écarts affichés
   entre les marqueurs qu'ils relient. Un espacement minimal est imposé entre marqueurs
   voisins (voir updateAltitudeProfile) pour que les étiquettes ne se chevauchent jamais,
   même quand un des écarts est très grand (ex. point cliqué sur un relief tout proche). */
.altitude-profile { margin: 14px 16px 8px; }
.altitude-profile.is-hidden { display: none; }
.altitude-profile-ruler {
  position: relative;
  height: 150px;
  margin-left: 8px;
}
.altitude-profile-track {
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
}
.altitude-profile-marker {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}
.altitude-profile-marker.is-hidden { display: none; }
.altitude-profile-dot {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--surface);
}
.altitude-profile-dot-gps { background: var(--amber); border-radius: 50%; }
.altitude-profile-dot-ign-gps { background: var(--amber); border-radius: 2px; transform: rotate(45deg); }
.altitude-profile-dot-ign-click { background: var(--teal); border-radius: 2px; transform: rotate(45deg); }
.altitude-profile-label {
  font-size: 11px;
  font-family: var(--mono);
  color: var(--muted);
  white-space: nowrap;
}
.altitude-profile-label b { color: var(--text); font-weight: 700; }
.altitude-profile-gap {
  position: absolute;
  left: 128px;
  transform: translateY(-50%);
  font-size: 10px;
  font-family: var(--mono);
  color: var(--muted);
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  white-space: nowrap;
}
.altitude-profile-gap.is-hidden { display: none; }
.v.copyable, td.copyable { cursor: pointer; }
.v.copyable:hover, td.copyable:hover { text-decoration: underline; }

/* --- Badge discret "Source" au-dessus de chaque carte --- */
.source-mini-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 8px;
}
.source-mini-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.source-mini-badge.is-hidden { display: none; }
.source-mini-badge.source-mini-gps { color: var(--amber); }
.source-mini-badge.source-mini-gps::before { background: var(--amber); box-shadow: 0 0 5px var(--amber); }
.source-mini-badge.source-mini-carte { color: var(--teal); }
.source-mini-badge.source-mini-carte::before { background: var(--teal); box-shadow: 0 0 5px var(--teal); }

/* --- POI table --- */
.poi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.poi-table thead th {
  text-align: left;
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.poi-table thead th:last-child,
.poi-table tbody td:last-child { text-align: right; }
.poi-table tbody td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.poi-table tbody tr:last-child td { border-bottom: none; }
.poi-table tbody td.dim { color: var(--muted); text-align: center; }
.poi-table tbody.results-gps td { color: var(--amber); }
.poi-table tbody.results-carte td { color: var(--teal); }

/* --- Contours table (largeurs de colonnes fixes : le texte de statut ne
   doit jamais déplacer le bouton) --- */
.contours-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 13px;
}
.contours-table col.col-version { width: 39%; }
.contours-table col.col-status { width: 31%; }
.contours-table col.col-action { width: 21%; }
.contours-table col.col-delete { width: 9%; }
.contours-table thead th {
  text-align: left;
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.contours-table tbody td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: middle;
}
.contours-table tbody tr:last-child td { border-bottom: none; }
.contours-table tbody td.dim { color: var(--muted); font-weight: 400; }
.contours-table tbody td:last-child { text-align: right; }
.contours-table .btn-secondary {
  width: 100%;
  padding: 8px 10px;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-delete {
  width: 100%;
  padding: 8px 6px;
  font-size: 14px;
  background: transparent;
  color: var(--muted);
  border-color: var(--line);
}
.btn-delete:hover:not(:disabled) { background: rgba(224, 84, 106, 0.14); color: #e0546a; border-color: #e0546a; }

/* --- Buttons --- */
.actions { display: flex; flex-direction: column; gap: 10px; }
button {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14.5px;
  border-radius: 12px;
  padding: 14px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease, background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--amber); color: #1A1206; }
.btn-primary:hover:not(:disabled) { background: #f0ae4e; }
.btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.btn-secondary:hover:not(:disabled) { background: #1d2c47; }

.install-note { text-align: center; font-size: 12px; color: var(--muted); line-height: 1.5; }

.feedback-note {
  text-align: center;
  font-size: 11px;
  color: #5A6B85;
  line-height: 1.6;
  padding-top: 4px;
}
.feedback-note a { color: #7C8CAA; }
.feedback-note a:hover { color: var(--teal); }

.version-note {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: #3A4457;
  letter-spacing: 0.04em;
}

.osm-credit { text-align: center; font-size: 10.5px; color: #5A6B85; }
.osm-credit a { color: #7C8CAA; }

.translation-notice { text-align: center; font-size: 11px; color: #5A6B85; background: rgba(124,140,170,0.08); border-radius: 8px; padding: 8px 12px; margin: 12px 0; }
.translation-notice a { color: #7C8CAA; }
.translation-notice.is-hidden { display: none; }

footer { text-align: center; font-size: 11px; color: #5A6B85; font-family: var(--mono); letter-spacing: 0.04em; padding-top: 4px; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-bottom: 8px; font-family: var(--sans); letter-spacing: normal; }
.footer-nav a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-size: 12px; }
.footer-nav a:hover { color: var(--text); }

/* --- Static pages (À propos / Mentions légales) --- */
.page { width: 100%; max-width: 560px; padding: 8px 0 40px; }
.page .back { display: inline-block; margin-bottom: 22px; color: var(--teal); font-family: var(--mono); font-size: 12px; text-decoration: none; letter-spacing: 0.04em; }
.page .back:hover { text-decoration: underline; }
.page h1 { font-size: 24px; margin-bottom: 6px; }
.page .page-sub { color: var(--muted); font-size: 13px; margin-bottom: 26px; }
.page h2 { font-size: 15px; color: var(--amber); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; margin: 28px 0 10px; }
.page h2:first-of-type { margin-top: 0; }
.page p { font-size: 14.5px; line-height: 1.75; color: #C7CEDA; margin-bottom: 12px; }
.page p strong { color: var(--text); }
.page ul { margin: 6px 0 14px 20px; }
.page li { font-size: 14.5px; line-height: 1.75; color: #C7CEDA; margin-bottom: 4px; }
.page .callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13.5px;
  color: #C7CEDA;
  margin: 16px 0;
}
.page .fill { color: var(--teal); font-style: italic; }

.callout-beta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: #C7CEDA;
}
.page a.inline { color: var(--teal); }

@media (prefers-reduced-motion: reduce) {
  .sweep, .pulse { animation: none !important; }
}