/* ---------- problem: unsurveyed water ----------
   A live depth chart fills the section. Behind every text box the scene
   keeps its tones but drops its lines and soundings, so the copy never
   crosses a bright mark. The two hazard notes and the cited figure surface
   from blur when the survey line reaches them. */

.problem { position: relative; overflow: hidden; padding: var(--section-y) 0; background: var(--bg); border-top: 1px solid var(--line); }
.chart-layer { position: absolute; inset: 0; pointer-events: none; }
.chart-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart-gl { background: var(--bg); }
.problem-inner { position: relative; z-index: 1; }

.problem-head { max-width: 800px; }
.problem-h2-line { display: block; }
.problem-head .lead { max-width: 30em; }

/* hazards: a contact mark on the chart and a short note */
.hazards { list-style: none; margin: 0; padding: 0; }
.hazard { display: flex; align-items: flex-start; gap: 14px; }
.hazard-mark { width: 40px; height: 40px; flex: none; margin-top: -7px; color: var(--fg-2); }
.hazard-note { max-width: 17.5em; font-size: 17px; line-height: 1.45; color: var(--fg); }
.hazard-claim { display: block; color: var(--fg-2); }

/* the cited figure */
.measured { margin: 0; max-width: 21em; }
.measured-figure { font-size: 17px; line-height: 1.5; color: var(--fg-2); }
.measured-num { display: block; margin-bottom: 10px; font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 480; letter-spacing: -0.035em; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
/* citations are sentences: mono, sentence case */
.measured figcaption { margin-top: 14px; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.45; }
/* Instrument Grey, not Telemetry Grey: over the chart's lightest tone (#202020)
   Telemetry Grey gives only 3.9:1. */
.measured figcaption a { color: var(--fg-2); text-decoration-color: var(--line-3); transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.measured figcaption a:hover { color: var(--fg); text-decoration-color: var(--fg); }
/* touch: base.css boxes citation links 12px out; this 16px line needs 14px to reach 44px */
@media (pointer: coarse), (max-width: 860px) {
  .measured figcaption a::after { inset: -14px -6px; }
}

@media (min-width: 1100px) {
  .problem-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .problem-head { grid-column: 1 / span 8; }
  .hazards { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 80px; margin-top: 120px; }
  .hazard:nth-child(1) { grid-column: 6 / span 4; }
  .hazard:nth-child(2) { grid-column: 8 / span 5; }
  .measured { grid-column: 9 / span 4; margin-top: 96px; }
}
@media (max-width: 1099px) {
  .hazards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 48px 40px; margin-top: 80px; }
  .measured { margin-top: 72px; }
}
/* phone: open water between the head and the notes, so the chart gets a moment */
@media (max-width: 759px) {
  .hazards { gap: 48px; margin-top: 136px; }
  .measured { margin-top: 80px; }
}

/* the survey: a note is under water until the line reaches it */
.js .problem .hazard,
.js .problem .measured { transition: opacity 0.9s var(--ease-out), filter 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.js .problem .is-submerged { opacity: 0.14; filter: blur(5px); transform: translateY(8px); }

/* no WebGL2 (or no script): a static contour chart, the copy on cleared ground */
.problem.no-webgl .chart-layer,
html:not(.js) .problem .chart-layer { background: var(--bg) url("../../assets/problem/chart-fallback.svg") center / cover no-repeat; }
.problem.no-webgl .chart-gl,
html:not(.js) .problem .chart-gl { display: none; }
.problem.no-webgl .problem-head > *,
.problem.no-webgl .hazard-note,
.problem.no-webgl .measured,
html:not(.js) .problem .problem-head > *,
html:not(.js) .problem .hazard-note,
html:not(.js) .problem .measured { background-color: var(--bg); outline: 12px solid var(--bg); }