/* HOWAT flow: the real installation, photographed, with the water drawn on a canvas. Every rule is scoped under .flow */

.flow {
  --fl-ink: #141211;
  --fl-muted: #6B6459;
  --fl-line: #EBE7E0;
  --fl-beige: #FAF8F4;
  --fl-accent: #C05530;
  --fl-accent-2: #A94825;
  --fl-cold: #2678E8;
  --fl-warm: #EC761E;
  --fl-filtered: #00A3AD;
  --fl-boiling: #D0342C;
  --fl-ease: cubic-bezier(.2, .75, .2, 1);
  container-type: inline-size;
  container-name: flow;
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  color: var(--fl-ink);
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.flow *, .flow *::before, .flow *::after { box-sizing: border-box; }
.flow [hidden] { display: none !important; }
/* measures the small viewport height (browser toolbars shown) for the layout */
.flow .flow-vh { position: fixed; top: 0; left: 0; width: 1px; height: 100vh; height: 100svh; visibility: hidden; pointer-events: none; }

/* ---------------------------------------------------------------- layout: phone first */
.flow .flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stage" "panel" "info";
  align-items: start;
}
.flow .flow-stage { grid-area: stage; min-width: 0; }
.flow .flow-panel { grid-area: panel; min-width: 0; }
.flow .flow-info { grid-area: info; min-width: 0; }

@container flow (max-width: 599px) {
  .flow:not(.is-side) .flow-stage { margin-inline: calc(var(--gut, 20px) * -1); }
}
/* side: a short, wide screen (phone in landscape). Photo left, panel right at the same height, facts below */
.flow.is-side .flow-grid {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "stage panel" "info info";
  column-gap: 16px;
  align-items: stretch;
}
@container flow (min-width: 900px) {
  .flow .flow-grid {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "stage panel" "stage info";
    column-gap: clamp(32px, 4cqw, 56px);
  }
}

/* ---------------------------------------------------------------- stage */
.flow .flow-scene {
  position: relative;
  display: block;
  width: 100%;
  height: 640px;
  margin-inline: auto;
  overflow: hidden;
  background: #E9E3DA;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
}
.flow.is-side .flow-scene { border-radius: 16px; box-shadow: 0 0 0 1px rgba(20, 18, 17, .06), 0 2px 4px rgba(20, 18, 17, .04), 0 30px 60px -34px rgba(20, 18, 17, .45); }
@container flow (min-width: 600px) {
  .flow .flow-scene { border-radius: 16px; box-shadow: 0 0 0 1px rgba(20, 18, 17, .06), 0 2px 4px rgba(20, 18, 17, .04), 0 30px 60px -34px rgba(20, 18, 17, .45); }
}
.flow .flow-world { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.flow .flow-over { pointer-events: none; }
/* the real wall continues past the photo edges: edge.webp holds the edge columns of the plate, stretched sideways */
.flow .flow-ext { position: absolute; top: 0; height: 100%; width: var(--ext, 0px); background: url("../media/flow/edge.webp") no-repeat; background-size: 200% 100%; pointer-events: none; }
.flow .flow-ext[data-side="l"] { right: calc(100% - 1px); background-position: 0 0; }
.flow .flow-ext[data-side="r"] { left: calc(100% - 1px); background-position: 100% 0; }
.flow .flow-plate { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; pointer-events: none; -webkit-user-drag: none; }
.flow .flow-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.flow .flow-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.flow .flow-leaders line { stroke: rgba(20, 18, 17, .5); stroke-width: 1.25; vector-effect: non-scaling-stroke; transition: stroke .25s var(--fl-ease), opacity .25s var(--fl-ease); }
.flow .flow-leaders .is-on line { stroke: rgba(20, 18, 17, .95); }

/* --fl-dot: set by flow.js from the photo scale, so a dot never outgrows the part it marks */
.flow .flow-dot {
  position: absolute;
  width: var(--fl-dot, 11px);
  height: var(--fl-dot, 11px);
  margin: calc(var(--fl-dot, 11px) / -2) 0 0 calc(var(--fl-dot, 11px) / -2);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px rgba(20, 18, 17, .8), 0 1px 3px rgba(20, 18, 17, .3);
  pointer-events: none;
  transition: background-color .25s var(--fl-ease), box-shadow .25s var(--fl-ease), opacity .25s var(--fl-ease);
}
.flow .flow-leaders g { transition: opacity .25s var(--fl-ease); }
.flow .flow-dot.is-on { background: var(--fl-ink); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--fl-ink); }
.flow.is-micro .flow-dot { box-shadow: 0 0 0 1.25px rgba(20, 18, 17, .8), 0 1px 2px rgba(20, 18, 17, .3); }
.flow.is-micro .flow-dot.is-on { box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px var(--fl-ink); }

.flow .flow-labels { position: absolute; inset: 0; pointer-events: none; }
.flow .flow-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--fl-ink);
  background: rgba(255, 255, 255, .96);
  padding: 7px 11px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(20, 18, 17, .08), 0 1px 2px rgba(20, 18, 17, .1), 0 10px 22px -12px rgba(20, 18, 17, .45);
  transition: background-color .25s var(--fl-ease), color .25s var(--fl-ease), opacity .25s var(--fl-ease), box-shadow .25s var(--fl-ease);
}
.flow .flow-label[data-a="t"] { transform: translate(-50%, 0); }
.flow .flow-label[data-a="b"] { transform: translate(-50%, -100%); }
.flow .flow-label[data-a="l"] { transform: translate(0, -50%); }
.flow .flow-label[data-a="r"] { transform: translate(-100%, -50%); }
.flow .flow-label.is-on { background: var(--fl-ink); color: #fff; }
.flow .flow-label-s { display: none; }
.flow.is-tight .flow-label-s { display: inline; }
.flow.is-tight .flow-label { padding: 6px 9px; gap: 6px; }
.flow.is-tiny .flow-label { font-size: 12px; padding: 5px 8px; gap: 5px; }
.flow.is-tiny .flow-temp { font-size: 11.5px; padding: 2px 6px; margin: -2px -4px -2px 0; }
/* a very small photo (short screens): smaller pills and dots, so the labels keep clear of each other */
.flow.is-micro .flow-label { font-size: 11px; padding: 4px 7px; gap: 4px; }
.flow.is-micro .flow-temp { font-size: 10.5px; padding: 1px 5px; margin: -1px -3px -1px 0; }
/* while water runs on a small photo, only the part the caption names keeps its pill, dot and line */
.flow.is-micro.is-running .flow-label[data-label]:not(.is-on),
.flow.is-micro.is-running .flow-dot:not(.is-on),
.flow.is-micro.is-running .flow-leaders g:not(.is-on) { opacity: 0; }
/* smallest photo, before anything runs: the parts the idle caption names (tap, Koud, Warm) and the socket; filter and boiler come with their step */
.flow.is-nano:not(.is-running) :is(.flow-label[data-label="filter"], .flow-label[data-label="boiler"], .flow-dot[data-dot="filter"], .flow-dot[data-dot="boiler"], .flow-leaders g[data-leader="filter"], .flow-leaders g[data-leader="boiler"]) { opacity: 0; }
.flow.no-hot .flow-label.flow-label--hot, .flow.no-hot .flow-label.flow-label--sk { visibility: hidden; }
.flow.is-tight .flow-label:has(.flow-label-s) .flow-label-l { display: none; }
.flow .flow-temp {
  display: none;
  font-weight: 700;
  font-size: 12px;
  padding: 3px 7px;
  margin: -3px -5px -3px 0;
  border-radius: 999px;
  background: var(--fl-boiling);
  color: #fff;
}
.flow[data-state="kokend"] .flow-temp, .flow[data-state="beide"] .flow-temp { display: inline-block; }
/* while water runs, parts that are not part of the current step step back: the pill stays solid, only its text and the dot ring soften */
.flow.is-running .flow-label[data-label]:not(.is-on) { color: #8F877B; box-shadow: 0 0 0 1px rgba(20, 18, 17, .06), 0 1px 2px rgba(20, 18, 17, .06); }
.flow.is-running .flow-dot:not(.is-on) { box-shadow: 0 0 0 1.5px rgba(20, 18, 17, .38), 0 1px 3px rgba(20, 18, 17, .2); }
.flow.is-running .flow-leaders g:not(.is-on) line { stroke: rgba(20, 18, 17, .26); }

.flow .flow-label.flow-label--hot { opacity: 0; background: var(--fl-boiling); color: #fff; font-weight: 700; }
.flow .flow-label.flow-label--hot.is-on { opacity: 1; }
/* with both levers open: one pill names both waters at the same height, its line (--lead) runs into the stream */
.flow .flow-label.flow-label--sk { opacity: 0; flex-direction: column; align-items: flex-start; gap: 3px; border-radius: 12px; padding: 6px 10px 6px 9px; }
.flow .flow-label.flow-label--sk.is-on { opacity: 1; background: rgba(255, 255, 255, .96); color: var(--fl-ink); }
.flow .flow-sk-r { display: inline-flex; align-items: center; gap: 6px; }
.flow.is-tight .flow-label.flow-label--sk { font-size: 12px; gap: 2px; padding: 5px 8px 5px 7px; border-radius: 10px; }
.flow.is-tight .flow-sk-r { gap: 5px; }
.flow.is-tight .flow-label--sk .flow-sw { width: 8px; height: 8px; }
.flow.is-micro .flow-label.flow-label--sk { gap: 1px; padding: 4px 7px 4px 6px; border-radius: 9px; }
.flow .flow-sw { width: 9px; height: 9px; border-radius: 50%; background: var(--fl-cold); flex: none; }
.flow .flow-sw[data-c="boiling"] { background: var(--fl-boiling); }
.flow.is-micro .flow-sw { width: 7px; height: 7px; }
.flow .flow-label.has-lead::after { content: ""; position: absolute; top: 50%; height: 2px; margin-top: -1px; width: var(--lead, 0px); border-radius: 2px; pointer-events: none; }
.flow .flow-label.has-lead[data-a="r"]::after { left: 100%; }
.flow .flow-label.has-lead[data-a="l"]::after { right: 100%; }
.flow .flow-label--hot.has-lead::after { background: var(--fl-boiling); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }
.flow .flow-label--sk.has-lead::after { background: linear-gradient(90deg, var(--fl-cold), var(--fl-boiling)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); }
/* the lever pills: which way the lever of this step turns */
.flow .flow-label.flow-label--lev { opacity: 0; background: var(--fl-ink); color: #fff; gap: 6px; }
.flow .flow-label.flow-label--lev.is-on { opacity: 1; }
.flow .flow-lev-i { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .28); flex: none; }
.flow.is-micro .flow-lev-i { width: 6px; height: 6px; }
.flow .flow-leaders .flow-lev-lead { opacity: 0; }
.flow .flow-leaders .flow-lev-lead.is-on { opacity: 1; }
.flow .flow-leaders .flow-lev-lead line { stroke: rgba(20, 18, 17, .95); stroke-dasharray: 3 3; }

.flow .flow-chip {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 28px);
  padding: 8px 12px 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 0 0 1px rgba(20, 18, 17, .07), 0 10px 22px -12px rgba(20, 18, 17, .45);
  font-size: 13px;
  line-height: 1.15;
  font-weight: 600;
  white-space: nowrap;
  color: var(--fl-ink);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s var(--fl-ease), transform .25s var(--fl-ease), background-color .25s var(--fl-ease), color .25s var(--fl-ease);
  pointer-events: none;
}
.flow .flow-chip.is-on { opacity: 1; transform: none; }
/* on the smallest photo (a phone in landscape) the chip would cover the tap: the caption beside the photo names the water */
.flow.is-micro .flow-chip { display: none; }
.flow.is-tiny .flow-chip { top: 10px; right: 10px; gap: 7px; padding: 7px 11px 7px 9px; font-size: 12.5px; }
.flow.is-tiny .flow-chip i { width: 9px; height: 9px; }
.flow .flow-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--fl-muted); flex: none; }
.flow .flow-chip[data-kind="cold"] i { background: var(--fl-cold); }
.flow .flow-chip[data-kind="warm"] i { background: var(--fl-warm); }
.flow .flow-chip[data-kind="filtered"] i { background: var(--fl-filtered); }
.flow .flow-chip[data-kind="boiling"] { background: var(--fl-boiling); color: #fff; }
.flow .flow-chip[data-kind="boiling"] i { background: #fff; }
.flow .flow-chip[data-kind="both"] i { background: linear-gradient(90deg, var(--fl-cold) 0 50%, var(--fl-boiling) 50% 100%); }

/* ---------------------------------------------------------------- panel: caption, progress, mode buttons */
.flow .flow-panel {
  position: sticky;
  bottom: var(--flow-bottom, 8px);
  z-index: 4;
  width: 100%;
  margin: 10px auto 0;
  padding: 10px 10px 10px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 18, 17, .06), 0 14px 34px -18px rgba(20, 18, 17, .45);
}
.flow .flow-cap { padding: 2px 6px 8px; }
.flow .flow-cap-k { margin: 0 0 3px; font-size: 12px; line-height: 1.3; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fl-accent); }
.flow.is-warn .flow-cap-k { color: var(--fl-accent-2); }
/* the caption keeps one fixed height for every text, so the panel never jumps between steps */
.flow .flow-cap-t { margin: 0; min-height: calc(2 * 1.36em); font-size: 16px; line-height: 1.36; font-weight: 550; letter-spacing: -.008em; color: var(--fl-ink); text-wrap: pretty; }
@container flow (max-width: 379px) { .flow .flow-cap-t { font-size: 15px; } }
@container flow (max-width: 309px) { .flow .flow-cap-t { min-height: calc(3 * 1.36em); } }
.flow .flow-prog-wrap { min-height: 26px; margin-top: 6px; }
/* phones: a slim progress line, the photo labels name the parts */
@container flow (max-width: 599px) {
  .flow:not(.is-side) .flow-prog-wrap { min-height: 4px; margin-top: 10px; }
  .flow:not(.is-side) .flow-prog { gap: 3px; }
  .flow:not(.is-side) .flow-prog li { gap: 0; }
  .flow:not(.is-side) .flow-prog i { height: 4px; }
  .flow:not(.is-side) .flow-prog span { display: none; }
}
.flow .flow-prog { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.flow .flow-prog li { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.flow .flow-prog i { display: block; height: 5px; border-radius: 999px; background: var(--fl-line); overflow: hidden; }
.flow .flow-prog b { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--fl-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--fl-ease); }
.flow .flow-prog [data-kind="cold"] b { background: var(--fl-cold); }
.flow .flow-prog [data-kind="warm"] b { background: var(--fl-warm); }
.flow .flow-prog [data-kind="filtered"] b { background: var(--fl-filtered); }
.flow .flow-prog [data-kind="boiling"] b { background: var(--fl-boiling); }
.flow .flow-prog [data-kind="both"] b { background: linear-gradient(90deg, var(--fl-cold), var(--fl-boiling)); }
.flow .flow-prog [data-kind="warn"] b { background: var(--fl-accent); }
.flow .flow-prog li.is-on b, .flow .flow-prog li.is-done b { transform: none; }
/* --seg-d: set per step by flow.js, the time until the next part of the scene starts */
.flow .flow-prog li.is-on b { transition-duration: var(--seg-d, 1.8s); transition-timing-function: linear; }
.flow .flow-prog span { font-size: 12px; line-height: 1.2; font-weight: 500; color: var(--fl-muted); white-space: nowrap; }
.flow .flow-prog li.is-on span { color: var(--fl-ink); font-weight: 650; }

.flow .flow-modes {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 4px;
  padding: 4px;
  background: var(--fl-beige);
  border: 1px solid var(--fl-line);
  border-radius: 999px;
  width: 100%;
}
.flow .flow-mode {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fl-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  transition: background-color .2s var(--fl-ease), color .2s var(--fl-ease), box-shadow .2s var(--fl-ease);
}
@media (hover: hover) {
  .flow .flow-mode:not([aria-pressed="true"]):not(.is-down):hover { background: #fff; box-shadow: 0 0 0 1px var(--fl-line); }
}
.flow .flow-mode:focus-visible { outline: 2px solid var(--fl-ink); outline-offset: 2px; }
.flow .flow-mode[aria-pressed="true"] { background: var(--fl-ink); color: #fff; }
.flow .flow-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.flow .flow-swatch[data-c="cold"] { background: var(--fl-cold); }
.flow .flow-swatch[data-c="warm"] { background: var(--fl-warm); }
.flow .flow-mode--hold { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; justify-content: flex-start; padding-left: 5px; gap: 9px; }
.flow .flow-mode--hold.is-down { background: #fff; box-shadow: 0 0 0 1px var(--fl-line); }
.flow .flow-mode--hold.is-hot, .flow .flow-mode--hold[aria-pressed="true"] { background: var(--fl-boiling); color: #fff; box-shadow: none; }
.flow .flow-mode--both.is-hot, .flow .flow-mode--both[aria-pressed="true"] { background: linear-gradient(90deg, #1F63C4, var(--fl-boiling)); }
.flow.is-nw .flow-modes { grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr) minmax(0, 1.35fr); }
.flow .flow-mode-t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.flow .flow-mode-t small { font-size: 12px; font-weight: 500; opacity: .7; }
.flow .flow-ring { position: relative; width: 38px; height: 38px; flex: none; display: grid; place-items: center; }
.flow .flow-ring svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.flow .flow-ring-bg { fill: #fff; stroke: #E3DCD1; stroke-width: 3; }
.flow .flow-ring-fg { fill: none; stroke: var(--fl-boiling); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.flow .flow-mode--hold.is-hot .flow-ring-bg { fill: rgba(255, 255, 255, .16); stroke: rgba(255, 255, 255, .3); }
.flow .flow-mode--hold.is-hot .flow-ring-fg { stroke: #fff; }
.flow .flow-lock { position: relative; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.flow .flow-mode--hold:not(.is-hot) .flow-lock { color: var(--fl-ink); }

.flow .flow-hint { display: none; }
/* beside the photo: caption, progress and buttons stay together, centred in the card */
.flow.is-side .flow-panel { position: static; margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
@container flow (max-width: 759px) { .flow.is-side .flow-cap-t { min-height: calc(3 * 1.36em); } }

.flow .flow-modes > * { min-width: 0; }
@container flow (max-width: 379px) {
  .flow .flow-modes { grid-template-columns: minmax(0, .85fr) minmax(0, .85fr) minmax(0, 1.6fr); }
  .flow.is-nw .flow-modes { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr) minmax(0, 1.3fr); }
  .flow .flow-mode { font-size: 14px; padding: 6px 6px; gap: 6px; }
  .flow .flow-mode--hold { padding-left: 4px; gap: 7px; }
  .flow .flow-ring { width: 36px; height: 36px; }
}
@container flow (max-width: 309px) {
  .flow .flow-panel { padding: 8px; }
  .flow .flow-modes { grid-template-columns: minmax(0, .85fr) minmax(0, .9fr) minmax(0, 1.7fr); gap: 2px; padding: 3px; }
  .flow .flow-mode { font-size: 13.5px; padding: 6px 3px; gap: 5px; }
  .flow .flow-swatch { width: 9px; height: 9px; }
  .flow .flow-mode--hold { padding-left: 3px; gap: 6px; }
  .flow .flow-ring { width: 34px; height: 34px; }
  .flow .flow-mode-t small { font-size: 11px; }
  .flow.is-nw .flow-modes { grid-template-columns: minmax(0, .75fr) minmax(0, 1.3fr) minmax(0, 1.3fr); }
}

/* desktop: the panel becomes the top of the right column, the full step list does the explaining */
@container flow (min-width: 900px) {
  .flow .flow-panel { position: static; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .flow .flow-cap { display: none; }
  .flow .flow-modes { background: #fff; }
  .flow .flow-hint { display: block; margin: 10px 6px 0; min-height: 2.8em; font-size: 14px; line-height: 1.4; color: var(--fl-muted); }
  .flow.is-warn .flow-hint { color: var(--fl-accent-2); font-weight: 550; }
  .flow.is-running[data-state="kokend"] .flow-hint { color: var(--fl-ink); font-weight: 550; }
}

/* ---------------------------------------------------------------- steps, facts, note */
.flow .flow-info { margin-top: 20px; }
/* desktop: the column runs to the bottom of the photo, the facts and note close it off there */
@container flow (min-width: 900px) {
  .flow .flow-info { margin-top: 8px; align-self: stretch; display: flex; flex-direction: column; }
  .flow .flow-info > .flow-facts { margin-top: auto; }
  .flow .flow-lists { margin-bottom: 16px; }
}
.flow .flow-steps-title, .flow .flow-steps { display: none; }
@container flow (min-width: 900px) {
  .flow .flow-steps-title { display: block; margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fl-accent); }
  .flow .flow-steps { display: grid; align-content: start; list-style: none; margin: 0; padding: 0; gap: 6px; }
  /* the three lists share one cell, so the column keeps the height of the longest one and the facts never jump when the mode changes */
  .flow .flow-lists { display: grid; }
  .flow .flow-lists > .flow-steps { grid-area: 1 / 1; }
  .flow .flow-lists > .flow-steps[hidden] { display: grid !important; visibility: hidden; }
  /* the list for both levers only takes room when there is no warm-water pipe */
  .flow:not(.is-nw) .flow-lists > .flow-steps[data-for="beide"] { display: none !important; }
  .flow.is-nw .flow-step { padding-top: 9px; padding-bottom: 9px; }
}
.flow .flow-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  padding: 11px 14px 11px 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--fl-line);
  transition: box-shadow .25s var(--fl-ease), background-color .25s var(--fl-ease);
}
.flow .flow-step p { margin: 0; padding-top: 3px; font-size: 15px; line-height: 1.45; color: var(--fl-ink); transition: color .25s var(--fl-ease); }
.flow.is-running .flow-step:not(.is-on):not(.is-done) p { color: var(--fl-muted); }
.flow .flow-step-n {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--fl-muted);
  background: var(--fl-beige);
  box-shadow: inset 0 0 0 1px var(--fl-line);
  transition: background-color .25s var(--fl-ease), color .25s var(--fl-ease);
}
.flow .flow-step.is-on { box-shadow: 0 0 0 1.5px var(--fl-ink), 0 12px 26px -16px rgba(20, 18, 17, .4); }
.flow .flow-step.is-on .flow-step-n, .flow .flow-step.is-done .flow-step-n { color: #fff; box-shadow: none; }
.flow .flow-step[data-kind="cold"].is-on .flow-step-n, .flow .flow-step[data-kind="cold"].is-done .flow-step-n { background: var(--fl-cold); }
.flow .flow-step[data-kind="warm"].is-on .flow-step-n, .flow .flow-step[data-kind="warm"].is-done .flow-step-n { background: var(--fl-warm); }
.flow .flow-step[data-kind="filtered"].is-on .flow-step-n, .flow .flow-step[data-kind="filtered"].is-done .flow-step-n { background: var(--fl-filtered); }
.flow .flow-step[data-kind="boiling"].is-on .flow-step-n, .flow .flow-step[data-kind="boiling"].is-done .flow-step-n { background: var(--fl-boiling); }
.flow .flow-step[data-kind="lever"].is-on .flow-step-n, .flow .flow-step[data-kind="lever"].is-done .flow-step-n { background: var(--fl-ink); }
.flow .flow-step[data-kind="both"].is-on .flow-step-n, .flow .flow-step[data-kind="both"].is-done .flow-step-n { background: linear-gradient(135deg, var(--fl-cold) 0 50%, var(--fl-boiling) 50% 100%); }
.flow .flow-step[data-kind="warn"].is-on .flow-step-n, .flow .flow-step[data-kind="warn"].is-done .flow-step-n { background: var(--fl-accent); }

.flow .flow-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@container flow (min-width: 600px) and (max-width: 899px) { .flow .flow-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.flow .flow-facts li { background: #fff; padding: 11px 12px; border-radius: 8px; box-shadow: 0 0 0 1px var(--fl-line); display: flex; flex-direction: column; gap: 2px; min-width: 0; transition: box-shadow .25s var(--fl-ease); }
.flow .flow-facts li.is-on { box-shadow: 0 0 0 1.5px var(--fl-ink), 0 12px 26px -16px rgba(20, 18, 17, .4); }
.flow .flow-facts b { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.flow .flow-facts span { font-size: 13px; line-height: 1.3; color: var(--fl-muted); }
.flow .flow-note { margin: 12px 0 0; padding: 12px 14px; border-radius: 8px; background: #F3EEE6; font-size: 14px; line-height: 1.5; color: var(--fl-ink); }
.flow .flow-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; }

/* The water is drawn with requestAnimationFrame, so it runs with reduced motion too.
   app.css shortens every CSS transition and animation under reduced motion; restore the few that carry meaning here. */
@media (prefers-reduced-motion: reduce) {
  .flow .flow-mode, .flow .flow-label, .flow .flow-dot, .flow .flow-chip, .flow .flow-leaders line, .flow .flow-capw, .flow .flow-nw-s, .flow .flow-nw-s i,
  .flow .flow-step, .flow .flow-step p, .flow .flow-step-n, .flow .flow-facts li { transition-duration: .25s !important; }
  .flow .flow-prog b { transition-duration: .5s !important; }
  .flow .flow-prog li.is-on b { transition-duration: var(--seg-d, 1.8s) !important; }
}

/* The product page buy bar steps aside while this section is on a short screen (flow.js sets flow-yield), so the photo can use that height.
   It comes back as soon as the section leaves the screen. */
.sticky-buy.is-on.flow-yield { transform: translateY(105%); visibility: hidden; transition: transform .35s var(--ease, ease), visibility 0s .35s; }

/* ---------------------------------------------------------------- the tap: the two levers are photo layers over the plate */
.flow .flow-tap { position: absolute; inset: 0; pointer-events: none; }
.flow .flow-tap img { position: absolute; display: block; max-width: none; margin: 0; pointer-events: none; -webkit-user-drag: none; }
/* a group (plate patch without the lever, and the lever itself) only shows while its lever is off its rest position */
.flow .flow-lg { position: absolute; inset: 0; visibility: hidden; }
.flow .flow-lg.is-on { visibility: visible; }
.flow .flow-lclip { position: absolute; inset: 0; }
.flow .flow-face { opacity: 0; }
/* no warm-water pipe: the warm valve is gone from the photo, the warm tail of the tap ends in a plug */
.flow .flow-capw { opacity: 0; transition: opacity .35s var(--fl-ease); }
.flow.is-nw .flow-capw { opacity: 1; }

/* the levers in the photo are controls: drag the right one, press and hold the left one */
.flow .flow-lh { position: absolute; z-index: 3; display: block; border-radius: 14px; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; outline: none; }
.flow .flow-lh--mixer { cursor: grab; }
.flow .flow-lh--mixer:active { cursor: grabbing; }
.flow .flow-lh--knob { cursor: pointer; }
.flow .flow-lh:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--fl-ink); }
@media (hover: hover) {
  .flow .flow-lh:hover { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 0 0 3px rgba(20, 18, 17, .22); }
}

/* the switch for a tap without a warm-water pipe */
.flow .flow-nw {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  padding: 6px 12px 6px 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fl-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}
.flow .flow-nw:focus-visible { outline: 2px solid var(--fl-ink); outline-offset: 2px; }
.flow .flow-nw-s { position: relative; width: 36px; height: 22px; flex: none; border-radius: 999px; background: #DCD5CA; transition: background-color .2s var(--fl-ease); }
.flow .flow-nw-s i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(20, 18, 17, .3); transition: transform .2s var(--fl-ease); }
.flow .flow-nw[aria-checked="true"] .flow-nw-s { background: var(--fl-ink); }
.flow .flow-nw[aria-checked="true"] .flow-nw-s i { transform: translateX(14px); }
@media (hover: hover) {
  .flow .flow-nw:not(.is-over):hover { background: #fff; box-shadow: 0 0 0 1px var(--fl-line); }
}
.flow .flow-nw-home:empty { display: none; }
/* on a phone the switch sits on the photo, bottom left on the floor, so the sticky panel keeps its height */
.flow .flow-nw.is-over {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  margin: 0;
  gap: 8px;
  padding: 5px 11px 5px 5px;
  font-size: 13px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 0 0 1px rgba(20, 18, 17, .08), 0 1px 2px rgba(20, 18, 17, .1), 0 10px 22px -12px rgba(20, 18, 17, .45);
}
.flow .flow-nw.is-over .flow-nw-s { width: 32px; height: 20px; }
.flow .flow-nw.is-over .flow-nw-s i { width: 14px; height: 14px; }
.flow .flow-nw.is-over[aria-checked="true"] .flow-nw-s i { transform: translateX(12px); }
.flow.is-tiny .flow-nw.is-over { font-size: 12px; left: 8px; bottom: 8px; }
.flow.is-side .flow-nw { margin-top: 0; align-self: flex-start; }
@container flow (min-width: 900px) {
  .flow .flow-nw { margin: 12px 0 0 2px; }
}
/* what you see and what to do, right above the buttons (17-09) */
.flow-intro{margin:0 0 12px}
.flow-intro-t{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.flow-intro-s{margin:4px 0 0;max-width:46ch;font-size:14px;line-height:1.5;color:var(--ink-2)}
.flow-intro-m{display:none}
@media (max-width:1023px){
  .flow-intro{margin:14px 0 10px}
  .flow-intro-t{font-size:15px}
  .flow-intro-m{display:inline}
  .flow-intro-s{display:none}
}
/* Kokend and Beide are plain buttons like Koud and Warm now: one tap opens, the next tap turns the lever back (17-09) */
.flow .flow-swatch[data-c="boiling"] { background: var(--fl-boiling); }
.flow .flow-swatch[data-c="both"] { background: linear-gradient(90deg, var(--fl-cold) 50%, var(--fl-boiling) 50%); }
.flow .flow-mode--hold { justify-content: center; padding-left: 12px; gap: 8px; touch-action: manipulation; }
@media (max-width: 767px) { .flow .flow-mode--hold { padding-left: 6px; gap: 6px; } }
.flow .flow-mode--hold.is-hot .flow-swatch, .flow .flow-mode--hold[aria-pressed="true"] .flow-swatch { background: #fff; }