/* ============================================================
   water.css - ADDITIVE ONLY.
   Loaded AFTER site.css by index-v3.html, water.html and
   tiki-water.html. Adds the canal chart, the band source line,
   and the water-profile table. Overrides nothing in site.css.

   THEME NOTE: this site switches with body.light, NOT with a
   data-theme attribute. Any light-mode rule must be written
   "body.light .x" or it silently never applies.
   ============================================================ */

/* ---------- canal cross-section chart ---------- */
.chartwrap{padding:clamp(1.4rem,3vw,2.6rem);display:flex;
  align-items:center;min-height:340px}
.chart{width:100%;display:block}
.chart .ln{stroke:var(--sea2);stroke-width:1.1;fill:none}
.chart .ln-fine{stroke:rgba(255,255,255,.16);stroke-width:1;fill:none}
body.light .chart .ln-fine{stroke:rgba(16,28,54,.18)}
.chart .water{fill:var(--sea2);opacity:.16}
.chart .bed{fill:var(--sand);opacity:.12}
.chart .solid{fill:rgba(255,255,255,.05)}
body.light .chart .solid{fill:rgba(16,28,54,.06)}
.chart .tick{stroke:var(--sea);stroke-width:1;stroke-dasharray:2 5}
.chart .dim{stroke:var(--accent-br);stroke-width:1.1}
body.light .chart .dim{stroke:var(--accent)}
.chart .lbl{font-family:"Jost",sans-serif;font-size:9px;font-weight:400;
  letter-spacing:.24em;fill:var(--mute)}
.chart .num{font-family:"Italiana",serif;font-size:19px;fill:var(--accent-br)}
body.light .chart .num{fill:var(--accent)}
.chart .hull{fill:var(--panel2);stroke:var(--sea2);stroke-width:1.1}

/* Draw once, when the containing .reveal enters. Uses the existing
   reveal mechanism rather than a second animation system, so a JS
   failure leaves the chart fully drawn rather than invisible. */
.js .reveal .draw{stroke-dasharray:1500;stroke-dashoffset:1500}
.js .reveal.in .draw{animation:wdraw 2.4s cubic-bezier(.22,.9,.3,1) .25s forwards}
.js .reveal .fadein{opacity:0}
.js .reveal.in .fadein{animation:wfade .9s ease .9s forwards}
.js .reveal.in .fadein.d2{animation-delay:1.3s}
@keyframes wdraw{to{stroke-dashoffset:0}}
@keyframes wfade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .js .reveal .draw{stroke-dasharray:none;stroke-dashoffset:0}
  .js .reveal .fadein{opacity:1}
}

/* ---------- band: source line under each figure ----------
   This is the difference between a measurement and a claim.
   Every figure in a .band on these pages carries its origin. */
.band .st .src{display:block;margin-top:.55rem;font-size:.66rem;
  letter-spacing:.1em;color:var(--mute);font-weight:300;
  text-transform:none;line-height:1.55;max-width:26ch;
  margin-left:auto;margin-right:auto}
@media (max-width:900px){
  .band .row{grid-template-columns:1fr 1fr}
  .band .st:nth-child(2){border-right:0}
  .band .st:nth-child(1),.band .st:nth-child(2){
    border-bottom:1px solid var(--line)}
}
@media (max-width:520px){
  .band .row{grid-template-columns:1fr}
  .band .st{border-right:0;border-bottom:1px solid var(--line)}
  .band .st:last-child{border-bottom:0}
}

/* ---------- water profile table ---------- */
.wprofile{border-top:1px solid var(--line);margin-top:2.6rem}
.wrow{display:grid;grid-template-columns:minmax(0,15ch) 1fr minmax(0,30ch);
  gap:clamp(.8rem,3vw,2.6rem);align-items:baseline;
  padding:1.6rem 0;border-bottom:1px solid var(--line)}
.wrow .k{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-br);font-weight:500}
body.light .wrow .k{color:var(--accent)}
.wrow .d{color:var(--txt);font-weight:300;font-size:1.02rem;line-height:1.65}
.wrow .s{color:var(--mute);font-weight:300;font-size:.82rem;line-height:1.6}
@media (max-width:820px){
  .wrow{grid-template-columns:1fr;gap:.45rem;padding:1.35rem 0}
}

/* ---------- canal roster ---------- */
.canals{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.2rem;margin-top:2.6rem}
.canal{border:1px solid var(--line);border-radius:8px;padding:1.5rem;
  background:var(--panel);transition:.45s}
.canal:hover{border-color:var(--accent);transform:translateY(-4px)}
.canal h4{font-family:"Italiana",serif;font-weight:400;font-size:1.3rem;
  margin:0 0 .55rem}
.canal .m{display:flex;gap:1.4rem;margin:.9rem 0 0}
.canal .m div{font-size:.76rem;color:var(--mute);letter-spacing:.06em}
.canal .m b{display:block;font-family:"Italiana",serif;font-weight:400;
  font-size:1.25rem;color:var(--accent-br);margin-bottom:.15rem}
body.light .canal .m b{color:var(--accent)}
.canal p{color:var(--mute);font-weight:300;font-size:.9rem;line-height:1.65;
  margin:0}

/* ---------- equal-height card rows ----------
   site.css sets .grid2{align-items:center}, which is right for a
   text-beside-image row but wrong for two cards: unequal content
   makes them different heights AND vertically offset from each
   other. Opt in per row with class="grid2 cards".

   The button row must carry class="cta-foot" and must NOT carry an
   inline margin-top. An inline style beats a stylesheet rule no
   matter how specific the selector, so an inline margin-top silently
   defeats the margin-top:auto that does the aligning - which is
   exactly what happened on the first attempt: the cards matched
   height but the buttons still sat at different heights. */
.grid2.cards{align-items:stretch}
.grid2.cards .card{display:flex;flex-direction:column}
.grid2.cards .card .cta-foot{margin-top:auto;padding-top:1.6rem}

/* ---------- verify-first callout ---------- */
.verify{margin-top:3.2rem;padding:1.3rem 1.5rem;border:1px solid var(--line);
  border-left:2px solid var(--accent);border-radius:6px;
  background:var(--panel);color:var(--mute);font-size:.87rem;
  font-weight:300;line-height:1.75}
.verify b{color:var(--txt);font-weight:400}