/* OpenWorldEngineer: storm surge forecast (artifacts-storm-surge.html, assets/art/storm-surge.js). Builds on styles.css
   (tokens, .card, .note, #tip); adds only ss- classes.

   Colour: the map's depth bands are one blue hue, light (shallow) to darker (deep); in dark mode deep water is the
   brighter end. The chart keeps the truth in ink with a neutral ±5 cm wash, the highlighted attempt in the accent and
   every other attempt in the grey "other line" token; per-hour scores are ink at an opacity that follows the score. */

.ss {
  container-type: inline-size;
  --ss-land: #E8E6E0;
  --ss-b0: #DCE9F8; --ss-b1: #C9DEF6; --ss-b2: #B2D0F2; --ss-b3: #94BDEC; --ss-b4: #76A8E4;
  --ss-geo: #4F5866;
  --ss-band: rgba(21, 23, 26, 0.09);
  display: grid; gap: 16px; min-width: 0; color: var(--ink); font-size: var(--fs-ui);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ss {
    --ss-land: #2C2E33;
    --ss-b0: #18273A; --ss-b1: #1C3049; --ss-b2: #213B5B; --ss-b3: #284A72; --ss-b4: #31598A;
    --ss-geo: #A9B1BC;
    --ss-band: rgba(242, 243, 245, 0.11);
  }
}
:root[data-theme="dark"] .ss {
  --ss-land: #2C2E33;
  --ss-b0: #18273A; --ss-b1: #1C3049; --ss-b2: #213B5B; --ss-b3: #284A72; --ss-b4: #31598A;
  --ss-geo: #A9B1BC;
  --ss-band: rgba(242, 243, 245, 0.11);
}
.ss-head p { max-width: 74ch; }

.ss-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; min-width: 0; }
@container (max-width: 860px) { .ss-grid { grid-template-columns: minmax(0, 1fr); } }

.ss-card { display: grid; gap: 12px; min-width: 0; padding: 14px 16px 16px; }
.ss-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 18px; }
.ss-card-head-col { display: grid; justify-content: start; gap: 2px; }
.ss-h { margin: 0; font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 640; line-height: 1.3; letter-spacing: 0; }
.ss-sub { font-size: var(--fs-small); color: var(--muted); }
.ss-note { margin: 0; }

/* legend */
.ss-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: var(--fs-small); color: var(--muted); }
.ss-lg { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ss-lg-k { color: var(--muted); }
.ss-bands { display: inline-flex; gap: 2px; }
.ss-lg-band { display: inline-grid; justify-items: start; gap: 2px; font-size: 0.6875rem; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ss-sw { display: inline-block; width: 26px; height: 9px; border-radius: 0; }
.ss-lg > .ss-sw { width: 14px; height: 10px; }
.ss-sw-b0 { background: var(--ss-b0); } .ss-sw-b1 { background: var(--ss-b1); } .ss-sw-b2 { background: var(--ss-b2); }
.ss-sw-b3 { background: var(--ss-b3); } .ss-sw-b4 { background: var(--ss-b4); }
.ss-sw-land { background: var(--ss-land); box-shadow: inset 0 0 0 1px var(--rule); }
.ss-k-pt { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); }
.ss-k-gauge { width: 7px; height: 7px; border: 1.5px solid var(--ink-2); background: var(--sheet); box-sizing: border-box; }
.ss-k-truth, .ss-k-sel, .ss-k-oth { width: 16px; height: 0; border-top: 2px solid var(--ink); }
.ss-k-sel { border-top-color: var(--accent); }
.ss-k-oth { border-top-color: var(--line-other); }
.ss-k-band { width: 16px; height: 10px; border-radius: 0; background: var(--ss-band); }
.ss-lg-on { color: var(--ink); font-weight: 560; }

/* map */
.ss-map { min-width: 0; }
.ss-map-svg { display: block; width: 100%; height: auto; border-radius: 0; }
.ss-land { fill: var(--ss-land); }
.ss-b0 { fill: var(--ss-b0); } .ss-b1 { fill: var(--ss-b1); } .ss-b2 { fill: var(--ss-b2); }
.ss-b3 { fill: var(--ss-b3); } .ss-b4 { fill: var(--ss-b4); }
.ss-geo { fill: var(--ss-geo); font-family: var(--font-sans); font-weight: 520; letter-spacing: 0.01em; pointer-events: none; }
.ss-scale path { fill: none; stroke: var(--ss-geo); stroke-width: 1.25; }
.ss-scale text { fill: var(--ss-geo); font-family: var(--font-mono); }
.ss-pt { fill: var(--ink-2); stroke: var(--sheet); stroke-width: 1.25; pointer-events: none; }
.ss-gauge { fill: var(--sheet); stroke: var(--ink-2); stroke-width: 1.5; pointer-events: none; }
.ss-hit { fill: transparent; }
.ss-hit.is-pub { cursor: pointer; }
.ss-pub-ring { fill: var(--sheet); stroke: var(--ink); stroke-width: 2; }
.ss-pub-dot { fill: var(--ink); }
.ss-pub-l { fill: var(--ink); font-family: var(--font-mono); font-weight: 640; paint-order: stroke; stroke: var(--sheet); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.ss-pub.is-on .ss-pub-ring { stroke: var(--accent); stroke-width: 2.5; }
.ss-pub.is-on .ss-pub-dot { fill: var(--accent); }
.ss-pub:hover .ss-pub-ring { stroke-width: 3; }

/* point picker */
.ss-points { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
@container (max-width: 860px) and (min-width: 600px) { .ss-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ss-point {
  display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 0 8px; align-content: start; min-width: 0;
  padding: 8px 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--sheet);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.ss-point:hover { border-color: var(--ink-2); }
.ss-point[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ss-point-id { grid-row: span 2; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 640; line-height: 1.45; }
.ss-point-n { font-size: 0.8125rem; font-weight: 600; line-height: 1.45; }
.ss-point-d { font-size: 0.75rem; color: var(--muted); line-height: 1.35; }

/* chart */
.ss-chart { min-width: 0; }
.ss-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ss-chart-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 0; }
.ss-axes line { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.ss-axes line.is-zero { stroke: var(--rule-strong); }
.ss-axes line.ss-xt { stroke: var(--rule-strong); }
.ss-tick { fill: var(--muted); font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.ss-axis-l { fill: var(--muted); font-size: 11.5px; }
.ss-band { fill: var(--ss-band); }
.ss-oth { fill: none; stroke: var(--line-other); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
.ss-truth { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ss-sel { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ss-cross { stroke: var(--rule-strong); stroke-width: 1; }
.ss-dot-truth { fill: var(--ink); stroke: var(--sheet); stroke-width: 2; }
.ss-dot-sel { fill: var(--accent); stroke: var(--sheet); stroke-width: 2; }

.ss-details summary { cursor: pointer; font-size: var(--fs-small); color: var(--muted); width: max-content; max-width: 100%; }
.ss-details summary:hover { color: var(--ink); }
.ss-vwrap { overflow-x: auto; margin-top: 8px; }
.ss-vtable { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.ss-vtable th { text-align: left; padding: 5px 8px; font-weight: 560; color: var(--muted); font-size: 0.75rem; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.ss-vtable td { padding: 4px 8px; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 0.75rem; }
.ss-vtable .r { text-align: right; }

/* attempts table */
.ss-twrap { min-width: 0; }
.ss-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; table-layout: fixed; }
.ss-table th { text-align: left; padding: 6px 8px; font-weight: 560; color: var(--muted); font-size: var(--fs-small); border-bottom: 1px solid var(--rule-strong); white-space: nowrap; }
.ss-table th:nth-child(1) { width: 34%; }
.ss-table th:nth-child(2) { width: 18%; }
.ss-table td { padding: 7px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; min-width: 0; }
.ss-table .r { text-align: right; }
.ss-table tr.is-on td { background: var(--hover); }
.ss-table tr.is-on td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.ss-th-strip { display: flex; justify-content: space-between; gap: 8px; }
.ss-th-hr { font-family: var(--font-mono); font-size: 0.6875rem; }
.ss-t-model { display: grid; gap: 1px; }
.ss-table td.ss-t-model { display: table-cell; }
.ss-pick {
  display: block; max-width: 100%; padding: 0 0 2px; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600;
  text-align: left; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-pick:hover { box-shadow: inset 0 -2px 0 var(--rule-strong); }
.ss-pick[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
.ss-t-sub { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 0.75rem; color: var(--muted); }
.ss-t-score .ss-t-sub { justify-content: flex-end; gap: 0 4px; }
.ss-t-score b { font-weight: 640; font-size: 0.9375rem; }
.ss-traj { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-2); }
.ss-strip { display: block; width: 100%; height: 18px; }
.ss-cell { fill: var(--ink); }
.ss-cell.is-zero { fill: transparent; stroke: var(--rule-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* tooltip (the site's #tip): wide enough for one row per attempt, line keys */
.tip.ss-tip { max-width: min(350px, calc(100vw - 16px)); }
.tip.ss-tip .tr > span { white-space: nowrap; }
.tip .tk i.ss-tru, .tip .tk i.ss-sel, .tip .tk i.ss-oth { width: 12px; height: 0; border-radius: 0; border-top: 2px solid var(--tip-fg); }
.tip .tk i.ss-sel { border-top-color: var(--tip-web); }
.tip .tk i.ss-oth { border-top-color: var(--tip-muted); }

@container (max-width: 520px) {
  .ss-card { padding: 12px 12px 14px; }
  .ss-table th:nth-child(1) { width: 40%; }
  .ss-table th:nth-child(2) { width: 22%; }
  .ss-table td, .ss-table th { padding-left: 5px; padding-right: 5px; }
  .ss-th-hr, .ss-wide { display: none; }
  .ss-pick { white-space: normal; line-height: 1.3; }
}