/* ==========================================================================
   Kairospace — Landing "flow path" stations
   Layers on top of deep-lab.css. Uses only existing design tokens.
   ========================================================================== */

/* ------------------------------------------------------------ shared ---- */

.station { position: relative; }

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: .24s; }

.st-eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal-bright);
  display: flex;
  align-items: center;
  gap: .7rem;
}
.st-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--teal-bright);
  opacity: .7;
}
.st-num {
  font-family: var(--font-mono);
  color: var(--muted-2);
  font-size: .72rem;
  letter-spacing: .18em;
}

/* ============================================== P&ID rail =============== */

.pid-rail {
  position: fixed;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: .4rem 0;
}
.pid-rail::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
/* live flow indicator — the water level in the schematic */
.pid-rail::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 3px;
  height: var(--flow, 0%);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--teal-bright), var(--teal));
  box-shadow: 0 0 12px rgba(63, 214, 192, .5);
  transition: height .12s linear;
}
.pid-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .58rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
}
.pid-node .pid-dot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--navy);
  transition: .3s;
}
.pid-node .pid-label {
  opacity: 0;
  transform: translateX(-6px);
  transition: .3s;
  white-space: nowrap;
}
.pid-rail:hover .pid-label { opacity: .75; transform: none; }
.pid-node.is-past .pid-dot { border-color: var(--teal); background: var(--teal-deep); }
.pid-node.is-on .pid-dot {
  border-color: var(--teal-bright);
  background: var(--teal-bright);
  box-shadow: 0 0 0 4px rgba(63, 214, 192, .16), 0 0 14px rgba(63, 214, 192, .7);
}
.pid-node.is-on { color: var(--teal-bright); }
.pid-node.is-on .pid-label { opacity: 1; transform: none; }

@media (max-width: 1180px) { .pid-rail { display: none; } }

/* ============================================== 00 · THE FLOW =========== */

#st-seam {
  position: relative;
  overflow: hidden;
  /* the header sits in flow above this, so the hero must never exceed the
     space actually left */
  min-height: min(84vh, calc(100vh - 7.5rem), 860px);
  display: grid;
  grid-template-rows: 1fr;
  /* The poster is the BASE state, not a fallback class: it is the guaranteed
     first paint, and the WebGL canvas fades in over it only if hero-flow
     boots. Every failure path simply never covers it. */
  background: #04141d url('/assets/hero_flow_poster.jpg') center/cover no-repeat;
}
/* injected by hero-flow.min.js */
#st-seam .flow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
#st-seam.flow-live .flow-canvas { opacity: 1; cursor: crosshair; }

#st-seam .seam-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* The flow lives in the right half (the streamline field fades out in
     world space under the headline). Hold the headline hard on the left,
     then get out of the way entirely by ~78% across. */
  background:
    linear-gradient(90deg, rgba(4,20,29,.93) 0%, rgba(4,20,29,.74) 26%, rgba(4,20,29,.20) 55%, rgba(4,20,29,0) 78%),
    linear-gradient(0deg, rgba(4,20,29,.80) 0%, rgba(4,20,29,0) 34%);
}

/* the copy never eats a click — the water underneath is interactive */
#st-seam .container {
  position: relative;
  z-index: 3;
  grid-row: 1;
  align-self: center;
  padding: 4.5rem 0 2rem;
  pointer-events: none;
}
#st-seam .hero-copy { max-width: 40rem; }
#st-seam .hero-cta .btn { pointer-events: auto; }
#st-seam h1 {
  /* the 2.2rem floor is what lets the nowrap phrase below survive a 360px
     phone without clipping — raise one only with the other */
  font-size: clamp(2.2rem, 5.6vw, 4.4rem);
  font-weight: 200;
  margin: 1.3rem 0;
  line-height: 1.08;
}
/* "Your water decides." is the brand line — it never breaks across lines */
#st-seam h1 b { font-weight: 500; white-space: nowrap; }
#st-seam .hero-copy > p {
  font-size: 1.2rem;
  color: var(--ink);
  opacity: .92;
  max-width: 34rem;
  margin-bottom: 2.2rem;
}
#st-seam .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* the touch hint — only exists once the canvas is live */
#st-seam .flow-hint {
  position: absolute;
  right: 1.2rem;
  bottom: 1rem;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  opacity: 0;
  transition: opacity .8s ease 1.2s;
  pointer-events: none;
}
#st-seam.flow-live .flow-hint { opacity: .75; }

@media (max-width: 900px) {
  #st-seam { min-height: min(88vh, calc(100vh - 5rem)); }
  #st-seam .container { padding: 3rem 0 1.5rem; }
  #st-seam .seam-scrim {
    background:
      linear-gradient(90deg, rgba(4,20,29,.94) 0%, rgba(4,20,29,.82) 45%, rgba(4,20,29,.42) 100%),
      linear-gradient(0deg, rgba(4,20,29,.88) 0%, rgba(4,20,29,0) 42%);
  }
}

/* ============================================== 01 · THE LEAK =========== */

#st-leak .leak-intro { max-width: 58ch; color: var(--ink); opacity: .9; margin-top: 1.2rem; }

#st-leak .leak-list {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
#st-leak .leak-row {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr) 11rem;
  gap: 1.6rem;
  align-items: baseline;
  padding: 1.4rem .9rem;
  margin: 0 -.9rem;
  border-bottom: 1px solid var(--line);
  transition: background .35s ease, box-shadow .35s ease;
}
/* station 03 tells us which world they picked; that row lifts */
#st-leak .leak-row.is-on {
  background: rgba(63, 214, 192, .055);
  box-shadow: inset 2px 0 0 var(--teal-bright);
}
#st-leak .leak-where {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--teal-bright);
}
#st-leak .leak-what { margin: 0; color: var(--ink); opacity: .92; line-height: 1.65; }
#st-leak .leak-what b { font-weight: 500; color: var(--ink-bright); opacity: 1; }
#st-leak .leak-src {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  text-align: right;
}

#st-leak .leak-zero {
  margin: 2.6rem 0 0;
  padding: 1.5rem 1.8rem;
  border-left: 2px solid var(--teal-bright);
  background: rgba(63, 214, 192, .045);
  color: var(--ink);
  max-width: 66ch;
  line-height: 1.7;
}
#st-leak .leak-zero b { font-weight: 500; color: var(--ink-bright); }

@media (max-width: 860px) {
  #st-leak .leak-row {
    grid-template-columns: 1fr;
    gap: .5rem;
    padding: 1.2rem .9rem;
  }
  #st-leak .leak-src { text-align: left; }
}

/* ========================================== 02 · THREE FORCES =========== */

#st-forces .forces-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 3.5rem;
  align-items: center;
  margin-top: 2.5rem;
}
#st-forces .forces-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}
/* --- the video stage -----------------------------------------------------
   Two <video> layers cross-dissolve on tab change. The masters are square
   with a near-black surround, so a radial mask dissolves the corners into
   the page instead of parking a visible black box on the navy. The fade
   starts at 94% of the closest-side radius — outside the glowing bore rim,
   which sits at ~90% — so the mask never dims the artwork itself. */
#st-forces .forces-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 94%, transparent 100%);
          mask-image: radial-gradient(circle closest-side, #000 94%, transparent 100%);
}
#st-forces .forces-poster,
#st-forces .forces-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  will-change: opacity, transform;
}
/* Poster holds the frame until a real video frame has painted; JS drops
   .is-lit on it once the first layer is live. */
#st-forces .forces-poster {
  opacity: 1;
  transition: opacity .5s ease;
}
#st-forces .forces-media.is-lit .forces-poster { opacity: 0; }

/* The dissolve. Outgoing settles back and dims, incoming eases forward —
   a shallow depth cue, so it reads as the same pipe changing state rather
   than two clips swapping. */
#st-forces .forces-video {
  opacity: 0;
  transform: scale(1.035);
  filter: brightness(.72);
  transition: opacity .72s cubic-bezier(.4, 0, .2, 1),
              transform .96s cubic-bezier(.22, .61, .36, 1),
              filter .72s cubic-bezier(.4, 0, .2, 1);
}
#st-forces .forces-video.is-on {
  opacity: 1;
  transform: scale(1);
  filter: brightness(1);
  z-index: 1;
}

#st-forces .forces-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 90px -20px rgba(38, 159, 146, .45) inset;
  transition: box-shadow .72s cubic-bezier(.4, 0, .2, 1);
}
/* One teal breath on the rim, timed to the dissolve. Cheap, and it stitches
   the two layers together as a single physical event. */
#st-forces .forces-stage.is-switching .forces-ring {
  box-shadow: 0 0 130px -14px rgba(63, 214, 192, .78) inset,
              0 0 42px -8px rgba(63, 214, 192, .30);
}

@media (prefers-reduced-motion: reduce) {
  /* Stills only — stations.js never assigns a src in this mode. */
  #st-forces .forces-video { display: none; }
  #st-forces .forces-media.is-lit .forces-poster { opacity: 1; }
  #st-forces .forces-poster { transition: opacity .2s linear; }
  #st-forces .forces-ring { transition: none; }
}
.force-tabs {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-bottom: 1.6rem;
}
.force-tab {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  width: 100%;
  text-align: left;
  padding: .95rem 1.15rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 400;
  cursor: pointer;
  transition: .25s;
}
.force-tab:hover { border-color: var(--line-2); color: var(--ink); }
.force-tab .k {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--muted-2);
  flex: 0 0 auto;
}
.force-tab.is-on {
  border-color: rgba(63, 214, 192, .45);
  background: rgba(38, 159, 146, .1);
  color: var(--ink-bright);
}
.force-tab.is-on .k { color: var(--teal-bright); }

.force-pane { display: none; }
.force-pane.is-on { display: block; animation: fpIn .4s ease both; }
@keyframes fpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.force-pane h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.force-pane .sub {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: .9rem;
  display: block;
}
.force-pane p { color: var(--ink); opacity: .9; margin-bottom: .9rem; }
.force-pane .tags {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--muted);
}

@media (max-width: 900px) {
  #st-forces .forces-grid { grid-template-columns: 1fr; gap: 2rem; }
  /* Grid items default to min-width:auto, so wide tab rows GROW the item (and the
     page's scrollWidth) instead of scrolling inside it. min-width:0 restores the
     constraint that overflow-x needs to mean anything. */
  #st-forces .forces-grid > div { min-width: 0; }
  #st-forces .forces-stage { max-width: 320px; order: -1; }
  .force-tabs { flex-direction: row; overflow-x: auto; gap: .5rem; padding-bottom: .3rem; }
  .force-tab { white-space: nowrap; padding: .7rem .9rem; font-size: .92rem; }
}
@media (max-width: 640px) {
  /* On phones the horizontal strip hides the third tab entirely — stack instead,
     matching the desktop's vertical arrangement. */
  .force-tabs { flex-direction: column; overflow-x: visible; }
  .force-tab { white-space: normal; }
}

/* ============================================ 03 · YOUR WORLD ========== */

#st-world .world-ask {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 200;
  text-align: center;
  margin-bottom: 2rem;
}
.world-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.world-chip {
  padding: .7rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .02);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .95rem;
  cursor: pointer;
  transition: .22s;
}
.world-chip:hover { border-color: var(--teal); color: #fff; transform: translateY(-2px); }
.world-chip.is-on {
  background: var(--grad);
  border-color: transparent;
  color: #04141d;
  font-weight: 500;
}
.world-pane { display: none; }
.world-pane.is-on { display: block; animation: fpIn .45s ease both; }
.world-body {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2.5rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(6, 33, 46, .5);
  overflow: hidden;
}
.world-body .world-text { padding: 2.4rem; }
.world-body h3 { font-size: 1.9rem; margin-bottom: .8rem; }
.world-body p { color: var(--ink); opacity: .9; margin-bottom: 1.4rem; }
.world-figs { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-bottom: 1.6rem; }
.world-fig .n {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 300;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
}
.world-fig .l {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-top: .2rem;
}
.world-body .world-shot { position: relative; min-height: 260px; height: 100%; }
.world-body .world-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.world-body .world-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,33,46,.95), rgba(6,33,46,0) 55%);
}
.world-empty { text-align: center; color: var(--muted); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .1em; }
#st-world.has-pick .world-empty { display: none; }

@media (max-width: 900px) {
  .world-body { grid-template-columns: 1fr; }
  .world-body .world-text { padding: 1.6rem; }
  .world-body .world-shot { min-height: 180px; order: -1; }
  .world-body .world-shot::after { background: linear-gradient(0deg, rgba(6,33,46,.95), rgba(6,33,46,0) 60%); }
}

/* =========================================== 04 · PROOF LEDGER ========= */

#st-ledger .ledger-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 2rem 0 1.2rem;
}
.ledger-filter {
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .2s;
}
.ledger-filter:hover { border-color: var(--line-2); color: var(--ink); }
.ledger-filter.is-on { border-color: var(--teal); color: var(--teal-bright); background: rgba(38, 159, 146, .12); }
.ledger-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--muted-2);
}
.ledger-clear {
  border: 0;
  background: none;
  color: var(--muted-2);
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ledger-clear:hover { color: var(--teal-bright); }

.ledger-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
table.ledger {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: .78rem;
  min-width: 720px;
}
table.ledger thead th {
  text-align: left;
  padding: .85rem 1rem;
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 400;
  border-bottom: 1px solid var(--line-2);
  background: rgba(4, 20, 29, .6);
  position: sticky;
  top: 0;
}
table.ledger tbody td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: top;
}
table.ledger tbody tr:last-child td { border-bottom: 0; }
table.ledger tbody tr:hover td { background: rgba(38, 159, 146, .06); }
table.ledger .m-val { color: var(--teal-bright); white-space: nowrap; }
table.ledger .m-src { color: var(--muted); }
table.ledger .m-n { color: var(--muted-2); font-size: .72rem; }

.tier {
  display: inline-block;
  padding: .16rem .55rem;
  border-radius: 999px;
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid;
}
.tier.field { color: var(--teal-bright); border-color: rgba(63, 214, 192, .4); background: rgba(38, 159, 146, .1); }
.tier.lit { color: #8fb8c7; border-color: rgba(143, 184, 199, .3); background: rgba(143, 184, 199, .07); }
/* Independent laboratory characterization — a third party measured OUR water or
   OUR hardware, outside peer review. CLAIMS.md rule 3 makes it a tier of its
   own precisely because collapsing it into `field` overstates it and into `lit`
   wastes it, so it needs a swatch a reader cannot mistake for either: warm sand
   against the teal of `field` and the blue-grey of `lit`. */
.tier.lab { color: #d9b779; border-color: rgba(217, 183, 121, .35); background: rgba(217, 183, 121, .08); }

.ledger-legend {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  line-height: 1.9;
  color: var(--muted-2);
  letter-spacing: .04em;
}
.ledger-legend b { color: var(--muted); font-weight: 400; }

/* ============================================= 05 · THE NUMBER ========= */

#st-number .number-wrap {
  max-width: 940px;
  margin: 0 auto;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(38, 159, 146, .14), transparent 55%),
    rgba(6, 33, 46, .6);
  padding: 2.8rem;
}
.number-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0 1.4rem;
}
.number-form label {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: .45rem;
}
.number-form select,
.number-form input[type="number"],
.number-form input[type="text"] {
  width: 100%;
  padding: .8rem .9rem;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: rgba(4, 20, 29, .6);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .95rem;
}
.number-form select:focus,
.number-form input:focus { outline: none; border-color: var(--teal); }
.number-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.number-fine {
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.2rem;
}
.number-fine div {
  font-family: var(--font-mono);
  font-size: .68rem;
  line-height: 1.8;
  color: var(--muted-2);
  letter-spacing: .04em;
}
.number-fine b {
  display: block;
  color: var(--teal-bright);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .64rem;
  margin-bottom: .2rem;
}

@media (max-width: 760px) {
  #st-number .number-wrap { padding: 1.6rem; }
  .number-form { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  #st-leak .leak-row { transition: none; }
  .force-pane.is-on, .world-pane.is-on { animation: none; }
}