:root {
  --ink: #1a1a1a; --muted: #5c5c5c; --faint: #9a9a9a; --rule: #e3e3e0; --surface: #f5f5f3; --card: #ffffff;
  --swot: #0072B2; --gauge: #D55E00; --temp: #E69F00; --green: #009E73; --pink: #CC79A7; --grey: #8a8a8a; --flood: #c0392b; --flood-major: #7b1a12;
  --font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--surface); }
body { margin: 0; font-family: var(--font); color: var(--ink); font-size: 14px; line-height: 1.45; }
h1, h2, h3, p { margin: 0; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 18px; background: var(--card); border-bottom: 1px solid var(--rule); }
.bar h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; }
.bar p { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
main { padding: 0 0 32px; }
/* viewer */
.viewer { background: var(--card); padding: 10px 14px 8px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 0 20px; align-items: start; }
.stage-map { min-width: 0; }
.map { position: relative; width: min(100%, calc((100vh - 200px) * 1400 / 634)); aspect-ratio: 1400 / 634; margin: 0 auto; background: #e9e9e7; overflow: hidden; border-radius: 3px; }
@media (max-width: 1150px) { .viewer { grid-template-columns: 1fr; } .map { width: min(100%, calc((100vh - 450px) * 1400 / 634)); } }
.map img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map .windcanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.map .region { fill: rgba(255,255,255,0); stroke: rgba(20,20,20,0.7); stroke-width: 1.6; stroke-dasharray: 6 4; cursor: pointer; }
.map .region:hover, .map .region.selected { fill: rgba(255,255,255,0.16); stroke: #111; stroke-dasharray: none; stroke-width: 2.4; }
.map .region-label { font: 600 19px var(--font); fill: #111; paint-order: stroke; stroke: rgba(255,255,255,0.85); stroke-width: 3px; pointer-events: none; }
.map .gauge { stroke: #fff; stroke-width: 1.6; cursor: pointer; }
.map .gauge:hover { stroke: #111; stroke-width: 2.2; }
.map .gauge.selected { stroke: #111; stroke-width: 3; }
.map .tip { position: absolute; pointer-events: none; background: rgba(26,26,26,0.94); color: #fff; border-radius: 6px; padding: 6px 9px; font-size: 13px; line-height: 1.35; display: none; max-width: 240px; }
.map .tip b { font-size: 15px; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px auto 0; width: min(100%, calc((100vh - 200px) * 1400 / 634)); }
.controls .break { flex-basis: 100%; height: 0; }                  /* the player on the first row, the map's choices on the second */
.controls .legend-bar { margin-left: auto; }
@media (max-width: 1150px) { .controls { width: min(100%, calc((100vh - 450px) * 1400 / 634)); } }
/* player controls in the charts' style: light rules, muted text, orange for the current position */
.play { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #c8c8c5; background: #fff; color: #3a3a3a; font-size: 10px; line-height: 1; cursor: pointer; flex: none; padding: 0; }
.play:hover { border-color: #3a3a3a; }
.controls input[type=range] { flex: 1; min-width: 120px; height: 18px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.controls input[type=range]:focus { outline: none; }
.controls input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(to right, #e8693f var(--p, 0%), #dcdcd9 var(--p, 0%)); }
.controls input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%; background: #e8693f; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
.controls input[type=range]::-moz-range-track { height: 3px; border-radius: 2px; background: #dcdcd9; }
.controls input[type=range]::-moz-range-progress { height: 3px; border-radius: 2px; background: #e8693f; }
.controls input[type=range]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #e8693f; border: 2px solid #fff; }
.controls .date { font-weight: 600; font-size: 14px; color: #3a3a3a; width: 10.5em; flex: none; white-space: nowrap; text-align: left; font-variant-numeric: tabular-nums; }   /* fixed: wider than "September 30, 2026", so the colour bars beside it never move; the text next to the slider */
.toggle { border: 1px solid #d2d2d2; background: #fff; color: var(--muted); border-radius: 16px; padding: 4px 12px; font-size: 13px; cursor: pointer; font-family: var(--font); }
.toggle:hover { color: var(--ink); }
.toggle[aria-pressed=true] { background: #ededeb; color: var(--ink); }
.legend-bar { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-left: 6px; }
.legend-bar .ramp { width: 100px; height: 8px; border-radius: 4px; flex: none; }   /* gradient set from the map's colour map (app.js) */
.legend-bar #leg-lo, .legend-bar #leg-hi { width: 5.4em; flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }   /* fixed widths: the controls stay put when the quantity changes */
.legend-bar #leg-lo { text-align: right; }
.map img.tws-overlay { pointer-events: none; }                           /* water stored on land, over any map */
/* rows: the player with the colour bars (the map's, and the land overlay's under it, its place kept when it is off so
   nothing moves); the ocean quantities, Winds and Currents; the land quantities (water storage) */
.controls .legends { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; margin-left: auto; }
.controls .legends .legend-bar { margin-left: 0; } #leg-tws.off { visibility: hidden; }
#leg-res.off { visibility: hidden; }
.map .reservoir path { stroke: #fff; stroke-width: 1.4; pointer-events: none; }        /* a diamond, as the gauge circles */
.map .reservoir.selected path { stroke: #111; stroke-width: 2.6; }
.panel-head { display: flex; align-items: center; justify-content: space-between; } #panel-shape svg { display: block; }
.map .reservoir-hit { fill: transparent; cursor: pointer; }
#leg-tws > span:first-child, #leg-res > span:first-child { color: var(--ink); width: 12.5em; text-align: right; flex: none; }
#leg-tws > span:nth-child(2), #leg-tws > span:nth-child(4), #leg-res > span:nth-child(2), #leg-res > span:nth-child(4) { width: 5.4em; flex: none; white-space: nowrap; } #leg-tws > span:nth-child(2), #leg-res > span:nth-child(2) { text-align: right; }
.legend-bar #leg-name { width: 12.5em; flex: none; text-align: right; color: var(--ink); }   /* "Anomaly", blank for the wave height map; fixed width */
/* side panel */
.panel { min-width: 0; align-self: stretch; display: flex; flex-direction: column; }   /* as tall as the map and its controls */
/* what the map and the charts show, for the selected quantity and place (app.js setNote): as wide as the charts with
   their labels, at the bottom of the panel, as tall as its text; the charts above take the height that is left */
.panel-note { margin: auto 62px 0 16px; padding: 9px 12px; background: #f3f3f1; border-radius: 4px; font-size: 12.5px; line-height: 1.45; color: #4a4a4a; }
.panel-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin: 2px 0 4px; }
.panel-charts { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 2px 0 12px; }
@media (max-width: 1150px) { .panel-charts { grid-template-columns: 1fr 1fr; gap: 24px; } .panel { padding: 8px 6px 0; } }
.chart { width: 100%; }
.chart svg { font-family: var(--font); max-width: 100%; height: auto; }
.chart svg text.endlabel { font-family: var(--font); }
.chart-title { font-size: 13px; font-weight: 600; color: var(--muted); margin: 10px 0 2px; }
/* cards */
.card { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 20px 22px 16px; margin: 16px 18px; }
.card h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 10px; }
/* shore: one grid, three columns (map | beach profile | table); the timeline and scrubber span the last two */
.shore-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr) 230px; column-gap: 32px; row-gap: 0; align-items: start; --ml: 52px; --mt: 10px; }
.g-map-t { grid-column: 1; grid-row: 1; }
.g-sec-t { grid-column: 2; grid-row: 1; }
.g-tab-t { grid-column: 3; grid-row: 1; }
.g-map { grid-column: 1; grid-row: 2 / span 4; }
.g-map-t, .g-sec-t, .g-tab-t { align-self: baseline; }
#shore-card .g-map-t { margin: 0 0 6px; white-space: nowrap; line-height: 1.2; }
.g-sec { grid-column: 2; grid-row: 2; }
.g-tab { grid-column: 3; grid-row: 2; padding-top: var(--mt); }
.g-tl-t { grid-column: 2 / span 2; grid-row: 3; }
.shore-grid > .chart-title.g-tl-t { margin: 30px 0 -4px; }   /* clear of the beach plot's axis labels above */
.g-tl { grid-column: 2 / span 2; grid-row: 4; }
.g-scrub { grid-column: 2 / span 2; grid-row: 5; }
.shore-grid > .chart-title { margin: 0 0 6px; }
.shore-indent { padding-left: var(--ml); }
@media (max-width: 900px) {
  .shore-grid { grid-template-columns: minmax(0, 1fr); } .shore-grid > * { grid-column: 1 !important; grid-row: auto !important; }
  /* one column: the map, then the beach, the table, the timeline */
  #shore-card .g-map-t { order: 0; white-space: normal; margin-bottom: 8px; }
  .g-map { order: 1; width: min(100%, 240px); justify-self: center; margin-bottom: 14px; }
  .g-sec-t { order: 2; } .g-sec { order: 3; } .g-tab-t { order: 4; margin-top: 14px !important; } .g-tab { order: 5; }
  .g-tl-t { order: 6; } .g-tl { order: 7; } .g-scrub { order: 8; }
}

.coastmap { margin-top: 0; }
.coastmap svg { width: 100%; height: auto; display: block; font-family: var(--font); border-radius: 3px; }
.coastmap .sea { fill: #eef2f5; }
.coastmap .land { fill: #d9c9a3; stroke: #b3a27a; stroke-width: 0.6; }
.coastmap .site { fill: #fff; stroke: #3a3a3a; stroke-width: 1.1; cursor: pointer; }
.coastmap .site:hover { fill: #ddd; }
.coastmap .hit { fill: transparent; pointer-events: all; cursor: pointer; }
.coastmap .site.selected { fill: #e8693f; stroke: #fff; stroke-width: 1.5; }
.coastmap .site-label { font-size: 12px; fill: #3a3a3a; pointer-events: none; }
.coastmap .site-label.selected { font-weight: 700; }
.shore-view { position: relative; min-width: 0; }
.shore-legend { font-size: 13px; }
.shore-legend .row { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; height: 29px; border-bottom: 1px solid var(--rule); }
.shore-legend .row:first-child { border-top: 1px solid var(--rule); }
.shore-legend .row.total { border-bottom: none; border-top: 1px solid #3a3a3a; font-weight: 700; }
.shore-legend .key { width: 14px; height: 10px; border-radius: 2px; }
.shore-legend .val { font-variant-numeric: tabular-nums; font-weight: 600; }
.shore-legend .name { color: var(--ink); }
.shore-legend .status { height: 22px; line-height: 22px; font-weight: 700; font-size: 13px; text-align: right; }
.scrubber { position: relative; height: 40px; margin-top: 2px; }
.scrubber svg { position: absolute; left: 0; top: 0; }
.scrubber .play { position: absolute; left: 0; top: 3px; z-index: 2; }
.panel-head h2 { padding-left: 54px; }
#lt-card .lt-head, #lt-label, #fl-label, #ev-label { padding-left: 56px; }
#lt-card .lt-head { display: flex; align-items: center; justify-content: flex-start; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 6px; }   /* the coast switch beside the title */
#lt-card .lt-head h2 { margin: 0; }
#ev-label, #fl-label { margin-top: 26px; }
#chart-longterm { min-height: 320px; }
#chart-events { min-height: 340px; }   /* the charts keep their height while a coast switch redraws them, so the page does not scroll */
/* tooltips */
.tipbox { position: absolute; display: none; pointer-events: none; z-index: 5; background: rgba(26,26,26,0.94); color: #fff; border-radius: 6px; padding: 8px 10px 7px; font-size: 12.5px; line-height: 1.3; min-width: 150px; }
.tipbox .tip-head { color: #c9c9c9; font-size: 11.5px; margin-bottom: 4px; }
.tipbox .tip-row { display: flex; align-items: center; gap: 7px; margin: 2px 0; white-space: nowrap; }
.tipbox .tip-key { width: 10px; height: 3px; border-radius: 2px; flex: none; }
.tipbox b { font-size: 13.5px; font-variant-numeric: tabular-nums; min-width: 4.2em; }
.tipbox .tip-name { color: #c9c9c9; }
.foot { color: var(--muted); font-size: 12.5px; max-width: 90%; margin: 0 auto; padding: 8px 18px 10px; text-align: center; }
.bar-right { display: flex; align-items: center; gap: 14px; }
.bar .sponsor { height: 46px; width: auto; display: block; }
.bar-left { display: flex; align-items: center; gap: 16px; }
.bar .brand { height: 41px; width: auto; display: block; padding-right: 16px; border-right: 1px solid var(--rule); }
.seg { display: inline-flex; border: 1px solid #d2d2d2; border-radius: 16px; overflow: hidden; flex: none; }
.seg button { border: none; background: #fff; color: var(--muted); padding: 4px 12px; font-size: 13px; cursor: pointer; font-family: var(--font); }
.seg button:hover { color: var(--ink); }
.seg button + button { border-left: 1px solid #d2d2d2; }
.seg button[aria-pressed=true] { background: #ededeb; color: var(--ink); }
.copyright { text-align: center; color: var(--muted); font-size: 12.5px; margin: 0; padding: 4px 18px 28px; }
.foot a { color: inherit; text-decoration: underline; text-decoration-color: #b9b9b6; text-underline-offset: 2px; }
.foot a:hover { color: var(--ink); text-decoration-color: currentColor; }
.site-list { display: none; }
.site-chip { border: 1px solid #d2d2d2; background: #fff; color: var(--muted); border-radius: 16px; padding: 5px 12px; font-size: 13px; font-family: var(--font); cursor: pointer; }
.site-chip.selected { border-color: #e8693f; background: #fdf0ea; color: var(--ink); }
/* phones: after every other rule, so these win */
@media (max-width: 640px) {
  .bar { flex-wrap: wrap; padding: 8px 12px; gap: 6px 12px; }
  .bar .brand { height: 31px; padding-right: 10px; }
  .bar h1 { font-size: 20px; white-space: nowrap; }
  /* NASA beside the title on the first row, the update line below */
  .bar-right { display: contents; }
  .bar .sponsor { height: 33px; order: 1; margin-left: auto; }
  .bar p { white-space: normal; font-size: 11.5px; order: 2; flex: 1 0 100%; }
  .viewer { padding: 8px 8px 6px; }
  .controls { flex-wrap: wrap; gap: 8px 10px; }
  .controls input[type=range] { flex: 1 1 calc(100% - 44px); }
  .controls .date { width: 10.2em; text-align: left; font-size: 13px; }
  .seg button, .toggle { padding: 4px 10px; font-size: 12.5px; }
  #q-seg { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 10px; flex: 1 0 100%; }   /* six choices: 3 x 2 on a phone, Winds and Currents below */
  #q-seg button { padding: 5px 8px; font-size: 12.5px; }
  #q-seg button:nth-child(3n+1) { border-left: none; }
  #q-seg button:nth-child(n+4) { border-top: 1px solid #d2d2d2; }
  .controls .break { display: none; }
  .panel { padding: 8px 2px 0; }
  .panel-note { margin: 12px 62px 0 16px; }
  .panel-charts { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .card { margin: 12px 8px; padding: 14px 10px 12px; }
  #lt-card .lt-head { padding-left: 0; } #lt-card .lt-head h2, #lt-label, #fl-label, #ev-label { padding-left: 56px; }   /* the coast switch uses the full width */
  #lt-card .lt-head h2 { flex: 1 0 100%; } #coast-seg { margin: 0 auto; }                                      /* the switch centred on its own row */
  .controls .legends { order: -1; flex: 1 0 100%; align-items: center; margin: 0; }   /* the colour bars right under the map */
  .legends .legend-bar { justify-content: center; margin: 0; } #leg-tws.off, #leg-res.off { display: none; }
  .legend-bar #leg-name, #leg-tws > span:first-child, #leg-res > span:first-child { width: auto; }     /* centred on a phone: the name as wide as its text */                              /* the colour bar right under the map */
  /* titles centred, the same space on both sides */
  .panel-head h2, .chart-title, .card h2, #lt-card .lt-head h2, #shore-card .g-map-t { text-align: center; padding-left: 0 !important; padding-right: 0 !important; }
  .g-map { display: none; } .site-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; order: 1; margin: 2px 0 14px; }
}