:root {
  --ink: #1d2a24;
  --ground: #f7f6f1;
  --line: #c9cdc2;
  --accent: #2f6f55;
  --on-accent: #ffffff;
  --warn: #fff4cf;
  --gutter: 16px;
  --banner-h: 44px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8ece6;
    --ground: #1c2420;
    --line: #3a463f;
    --accent: #7fc4a2;
    --on-accent: #10201a;
    --warn: #3a3318;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  position: fixed; inset: 0;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--ground);
  overflow: hidden;
}
/* The map container must not form its own stacking context (so no z-index and
   no position: fixed here). Popups live inside it, and this lets them sit above
   the banner and buttons instead of under them. */
#map { position: absolute; inset: 0; }

/* Banner and controls share one column so nothing overlaps when the banner wraps. */
#chrome {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start;
  pointer-events: none;
}
#chrome > * { pointer-events: auto; }
#demo-banner {
  align-self: stretch;
  padding: 6px var(--gutter);
  background: var(--warn); color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-size: 13px; line-height: 1.35; text-align: center;
}
#toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
  margin: 8px var(--gutter) 0;
  max-width: calc(100vw - 2 * var(--gutter));
  pointer-events: none;
}
#toolbar > * { pointer-events: auto; }

#panel {
  width: min(300px, calc(100vw - 2 * var(--gutter)));
  background: var(--ground); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
#panel details > summary {
  cursor: pointer; padding: 10px 12px; min-height: 44px;
  display: flex; align-items: center; font-weight: 600;
}
#panel details[open] { max-height: calc(100dvh - var(--banner-h) - 72px); overflow: auto; }
#panel fieldset { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 8px 12px; min-width: 0; }
#panel legend { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .75; padding: 0 4px 0 0; }
#panel label { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; }
#panel input[type=checkbox] { flex: none; width: 20px; height: 20px; accent-color: var(--accent); }
#panel .empty { margin: 0 0 4px; font-size: 13px; opacity: .85; }
/* The notice a Canadian Hydrographic Service licence requires in a prominent place, under the layer it belongs to. */
#panel .chs-notice { margin: 4px 0 8px; padding: 4px 8px; font-size: 12px; opacity: 1; border-left: 3px solid var(--accent); }
#panel .chs-notice[hidden] { display: none; }
/* A sub-toggle belongs to the layer above it and sits one step in. */
#panel .sub { margin-left: 30px; }
#panel label.sub { min-height: 40px; }
#panel input:disabled + span { opacity: .55; }
#panel label:has(input:disabled) { cursor: default; }
#panel .actions { border-top: 1px solid var(--line); padding: 10px 12px 12px; }
/* Status line under an overlay box. A failure is shown plainly, with a tint. */
#panel .empty[data-state=fail] { background: var(--warn); padding: 4px 8px; border-radius: 6px; opacity: 1; }
#panel button.small { min-height: 36px; padding: 4px 14px; }
#radar-controls, #currents-controls, #wind-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px 30px; font-size: 13px; }
#radar-controls[hidden], #currents-controls[hidden], #wind-controls[hidden], #alerts-list:empty { display: none; }
/* The species picker of the whale and porpoise density layer. */
#cetaceans-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px 30px; font-size: 13px; }
#cetaceans-controls[hidden] { display: none; }
/* Safari draws a plain select 21 px tall whatever min-height says (found 2026-10-23 in WebKit), so it is drawn by the page, with a caret of two gradients. */
#panel select {
  min-height: 44px; max-width: 100%; padding: 4px 30px 4px 8px; font: inherit; color: var(--ink); border: 1px solid var(--line); border-radius: 6px;
  appearance: none; -webkit-appearance: none; background-color: var(--ground); background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
}
#radar-legend { flex-basis: 100%; }
#radar-legend summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; }
#radar-legend img { display: block; max-width: 100%; height: auto; background: #fff; border: 1px solid var(--line); }
/* The key under a colour layer: a gradient bar, and the values at its ticks. */
#panel .scale { margin-bottom: 6px; font-size: 13px; }
#panel .scale[hidden] { display: none; }
.scale-title { display: block; margin-bottom: 4px; }
.scale-bar { height: 12px; border: 1px solid var(--line); border-radius: 3px; }
.scale-ticks { position: relative; height: 16px; margin-top: 2px; }
.scale-ticks span { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; }
.scale-ticks span:first-child { transform: none; }
.scale-ticks span:last-child { transform: translateX(-100%); }
/* A key of steps has its limits between the blocks, so every number is centred on its limit. */
.scale-ticks.steps span:first-child, .scale-ticks.steps span:last-child { transform: translateX(-50%); }
/* The next events and the 24-hour curve in a tide popup. */
.tide-events { border-collapse: collapse; margin: 2px 0 4px; }
.tide-events th { text-align: left; font-weight: 600; padding: 1px 10px 1px 0; white-space: nowrap; }
.tide-events td { padding: 1px 10px 1px 0; white-space: nowrap; }
.tide-curve-box { margin: 4px 0 6px; }
.tide-curve { display: block; max-width: 100%; height: auto; }
/* A sub-toggle that only shows while its layer is on. */
#panel label[hidden], #panel .key[hidden] { display: none; }
/* The key of a layer with classes: a swatch and a name per row. */
#panel .key { margin-bottom: 6px; font-size: 12px; }
.swatch-row { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.swatch { flex: none; width: 14px; height: 14px; border: 1px solid rgba(0, 0, 0, .25); border-radius: 2px; }

/* The time slider: at the bottom of the map, above the scale and the credits, and only while a layer that changes over time is on. */
#timebar {
  position: fixed; z-index: 3; left: 50%; bottom: calc(var(--attrib-h, 40px) + 12px); transform: translateX(-50%);
  width: min(560px, calc(100vw - 2 * var(--gutter)));
  padding: 8px 12px 6px;
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
#timebar[hidden] { display: none; }
.time-row { display: flex; align-items: center; gap: 6px; }
#timebar button.small { min-height: 40px; min-width: 44px; padding: 4px 12px; }
#time-prev, #time-next { font-size: 20px; line-height: 1; }
#time-speed-box { display: flex; align-items: center; gap: 4px; font-size: 13px; }
#time-speed { min-height: 40px; font: inherit; }
#time-speed-box[hidden], #time-track[hidden], #time-play[hidden] { display: none; }
#time-year { margin-left: auto; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
#time-slider { display: block; width: 100%; height: 32px; margin: 4px 0 0; accent-color: var(--accent); }
.time-ends { display: flex; justify-content: space-between; font-size: 12px; opacity: .8; }
#time-lines { max-height: 22vh; overflow: auto; margin-top: 4px; font-size: 13px; }
#time-lines p, #time-paused { margin: 0 0 2px; }
#time-paused { font-size: 12px; opacity: .85; }
#time-paused[hidden] { display: none; }
body.night #timebar { box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }

/* The swipes of the air photos and of the ecosystems: a map per side over the page's map, cut at the line, and the line's handle. The map
   under them keeps the clicks. */
.swipe-map { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.swipe-handle {
  position: absolute; top: 0; bottom: 0; z-index: 2; width: 44px; margin-left: -22px;
  cursor: ew-resize; touch-action: none;
}
.swipe-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 21px; width: 2px; background: #ffffff; box-shadow: 0 0 3px rgba(0, 0, 0, .6); }
.swipe-grip { position: absolute; top: 50%; left: 2px; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.swipe-grip::before { content: "\2039\00a0\203a"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #1d2a24; }
.swipe-label { position: absolute; top: calc(50% + 26px); padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .9); color: #1d2a24; font-size: 12px; font-weight: 600; white-space: nowrap; }
.swipe-label.left { right: 26px; }
.swipe-label.right { left: 26px; }
/* At an edge of the map the grip sits inside it, and the names of the sides are not needed. */
.swipe-handle[data-edge=left] .swipe-grip { left: 22px; }
.swipe-handle[data-edge=right] .swipe-grip { left: -18px; }
.swipe-handle[data-edge] .swipe-label { display: none; }
.swipe-handle:focus-visible { outline: none; }
.swipe-handle:focus-visible .swipe-grip { outline: 3px solid var(--accent); outline-offset: 2px; }

#alerts-list { margin: 0 0 6px 30px; }
#alerts-list details { border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; margin-bottom: 6px; font-size: 13px; }
#alerts-list summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 600; }
#alerts-list .alert-text { white-space: pre-line; max-height: 40vh; overflow: auto; margin: 0 0 6px; }
#alerts-list .src { margin: 0 0 6px; opacity: .85; }

button {
  min-height: 44px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  font: inherit; cursor: pointer;
}
button.pill {
  background: var(--ground); color: var(--ink); border-color: var(--line);
  font-weight: 600; box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
button:focus-visible, summary:focus-visible, input:focus-visible, a:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

#credits {
  position: fixed; z-index: 5; left: var(--gutter); right: var(--gutter); bottom: 40px;
  max-width: 600px; margin: 0 auto; padding: 14px 16px;
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
  max-height: calc(100dvh - var(--banner-h) - 64px); overflow: auto;
}
#credits[hidden] { display: none; }
#credits h2 { margin: 0 0 8px; font-size: 17px; padding-right: 80px; }
#credits p, #credits li { margin: 0 0 8px; font-size: 13px; }
#credits ul { margin: 0 0 8px; padding-left: 18px; }
#credits a { color: var(--accent); }
#credits-close { position: absolute; top: 8px; right: 8px; min-height: 40px; padding: 4px 12px; }

.noscript { position: fixed; z-index: 6; inset: 50% 16px auto; margin: 0; text-align: center; }

/* Map controls sit below the banner. */
.maplibregl-ctrl-top-right { top: var(--banner-h); }
.maplibregl-ctrl-group button { min-height: 0; }
/* A long attribution (terrain on) wraps instead of running under the scale bar. */
.maplibregl-ctrl-bottom-right { max-width: calc(100% - 130px); }

/* In the Night look the attribution and the scale are dark too, so a pale bar does not cut across the dark map. */
body.night .maplibregl-ctrl-attrib:not(.maplibregl-compact), body.night .maplibregl-ctrl-scale { background: rgba(20, 27, 35, .78); color: #d8dfe4; }
body.night .maplibregl-ctrl-scale { border-color: #d8dfe4; }
body.night .maplibregl-ctrl-attrib:not(.maplibregl-compact) a { color: #b9d6e8; }
/* Popups stay light because the basemap stays light. */
.maplibregl-popup { z-index: 4; }
.maplibregl-popup-content { color: #1d2a24; font: 14px/1.4 system-ui, sans-serif; max-width: 290px; padding: 12px 14px; }
.maplibregl-popup-content h3 { margin: 0 14px 4px 0; font-size: 15px; overflow-wrap: anywhere; }
.maplibregl-popup-content .tag { display: inline-block; margin-bottom: 6px; padding: 1px 8px; border-radius: 10px; background: #e6efe9; font-size: 12px; }
.maplibregl-popup-content p { margin: 0 0 6px; }
.maplibregl-popup-content .src { font-size: 12px; color: #4a554f; }
.maplibregl-popup-content .notice { margin-top: 8px; padding-left: 8px; border-left: 3px solid #1f5a43; color: #1d2a24; }
.maplibregl-popup-content hr { border: 0; border-top: 1px solid #d5dad3; margin: 8px 0; }
.maplibregl-popup-content { max-height: 60vh; overflow: auto; }
/* The popup of the Canadian Hydrographic Service gauge carries a long notice its licence requires, so it may use more of the screen. */
.maplibregl-popup-content:has(.tide-body .notice) { max-height: calc(100dvh - var(--banner-h) - 100px); }
.maplibregl-popup-content a { color: #1f5a43; }
.maplibregl-popup-close-button { min-height: 0; padding: 0 6px; background: transparent; border: 0; color: #1d2a24; }

/* On a phone a popup is never wider than the screen or taller than the room between the banner and the bottom controls, and scrolls inside.
   app.js moves the map so that the whole popup is in view. A wide screen is unchanged. */
@media (max-width: 640px), (max-height: 500px) {
  .maplibregl-popup-content { max-width: min(290px, calc(100vw - 16px)); max-height: min(60vh, calc(100dvh - var(--banner-h) - 64px)); }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  #panel { width: auto; }
  #panel details[open] { width: min(300px, calc(100vw - 2 * var(--gutter))); }
  #credits { bottom: 36px; }
  #timebar { bottom: max(36px, calc(var(--attrib-h, 24px) + 10px)); padding: 6px 10px 4px; }
  #time-lines { max-height: 16vh; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}