/* ============================================================================
   1water PROTOTYPE — thin extensions over _kit/onewater.css
   No new tokens. Only layout glue + a few prototype-only affordances.
   ============================================================================ */

html, body { height: 100%; }
body { background: var(--cream); }
#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---- Top bar ---------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 40;
}
.topbar__brand { font-family: var(--serif); font-size: 19px; letter-spacing: -.01em; }
.topbar__brand b { font-weight: 500; }
.topbar__brand .demo {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 2px 8px; margin-left: 8px; vertical-align: 2px;
}
.topbar__sys {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--faint);
}
.topbar__spacer { flex: 1; }

/* system switcher */
.sys-switch select {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 6px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  text-transform: uppercase;
}


/* ---- Step rail -------------------------------------------------------- */
.steprail {
  display: flex; align-items: stretch; gap: 0;
  background: var(--panel); border-bottom: 1px solid var(--hairline);
  padding: 0 28px;
}
.step {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 18px 11px 14px; border: 0; background: none;
  border-bottom: 2px solid transparent; color: var(--faint);
  font-family: var(--sans); font-size: 13px; white-space: nowrap;
}
.step:hover { color: var(--ink); }
.step.active { color: var(--ink); border-bottom-color: var(--teal); }
.step__n {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  background: var(--surface-sink); color: var(--faint); border: 1px solid var(--hairline);
}
.step.active .step__n { background: var(--teal); color: var(--text-on-teal); border-color: var(--teal-deep); }
.step.done .step__n { background: var(--teal-tint); color: var(--teal-deep); border-color: var(--teal); }
.step.done .step__n::after { content: "✓"; }
.step.done .step__n .lbl { display: none; }

/* ---- Caption ribbon --------------------------------------------------- */
.ribbon {
  display: flex; gap: 26px; flex-wrap: wrap;
  padding: 10px 28px; background: var(--surface-sink);
  border-bottom: 1px solid var(--line-faint);
  font-size: 12px; color: var(--ink-soft);
}
.ribbon .rk {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-right: 7px;
}

/* ---- Page shell ------------------------------------------------------- */
.page { flex: 1; padding: 26px 28px 40px; max-width: 1320px; width: 100%; margin: 0 auto; }
.page__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 8px; }
.page__sub { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--faint); margin-top: 4px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.two-col > * { min-width: 0; }   /* let a wide child (workbook grid) scroll inside its card, not blow out the row */
@media (max-width: 1100px){ .two-col { grid-template-columns: 1fr; } }

/* ---- Onboarding compose ---------------------------------------------- */
.src-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.src-card {
  border: 1.5px solid var(--hairline); border-radius: var(--r); padding: 16px 18px;
  cursor: pointer; background: var(--surface); position: relative;
}
.src-card.sel { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.src-card h4 { font-family: var(--serif); font-size: 18px; }
.src-card .sc-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.src-card .sc-ux { font-size: 12px; color: var(--faint); margin-top: 8px; }
.src-card .sc-check { position: absolute; top: 14px; right: 14px; color: var(--teal); font-size: 16px; opacity: 0; }
.src-card.sel .sc-check { opacity: 1; }

.proc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.proc {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 11px 13px;
  background: var(--surface);
}
.proc:hover { background: var(--panel); }
.proc.on { border-color: var(--teal); background: var(--teal-tint); }
.proc .pbox {
  width: 18px; height: 18px; border-radius: 4px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center; font-size: 11px; color: transparent;
}
.proc.on .pbox { background: var(--teal); border-color: var(--teal-deep); color: var(--text-on-teal); }
/* small module-grid variant of .proc */
.proc--sm { padding: 9px 11px; }
.proc--sm .pbox--sm { width: 15px; height: 15px; }
.proc--sm .pname--sm { font-size: 12px; }
.proc.is-core { opacity: .8; cursor: default; }
.proc .pname { font-weight: 600; font-size: 13px; }
.proc .pmeta { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 2px; letter-spacing: .03em; }

/* derived rail */
.derive-pages { display: flex; align-items: baseline; gap: 8px; }
.derive-pages .big { font-family: var(--serif); font-size: 34px; line-height: 1; }
.derive-pages .slash { color: var(--muted); }
.pagechips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pagechip {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  padding: 3px 8px; border-radius: var(--r-sm); border: 1px solid var(--teal);
  background: var(--teal-tint); color: var(--teal-deep);
}
.pagechip.off { border-color: var(--hairline); background: var(--surface); color: var(--muted); text-decoration: line-through; }

.mp-group { margin-top: 10px; }
.mp-group .mp-h { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.mp-group .mp-list { display: flex; flex-wrap: wrap; gap: 5px; }
.paramchip {
  font-family: var(--mono); font-size: 10px; letter-spacing: .02em;
  padding: 2px 7px; border-radius: var(--r-pill); border: 1px solid var(--hairline);
  background: var(--surface); color: var(--ink-soft);
}
.cadence-line { font-family: var(--mono); font-size: 11px; color: var(--ink); letter-spacing: .03em; }

/* optional-module affordances */
.tag-optional {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 2px 7px;
}
.tag-deterministic {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-deep); border: 1px solid var(--teal); background: var(--teal-tint);
  border-radius: var(--r-pill); padding: 2px 7px;
}

/* ---- inputs in grid / forms ------------------------------------------ */
.cellinput {
  width: 72px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px;
  text-align: right; padding: 6px 8px; border: 1px solid var(--hairline); border-radius: 5px;
  background: var(--surface); color: var(--ink);
}
.cellinput:focus { outline: 2px solid var(--teal); outline-offset: -1px; border-color: var(--teal); }
.cellinput.is-flag { border-color: var(--amber-line); color: var(--amber); background: var(--amber-tint-2); }
/* exceeds a standard — RED but savable (recorded + flagged) */
.cellinput.is-violation { border-color: var(--red); color: var(--red); background: var(--red-tint-1); font-weight: 600; }
/* impossible — RED, darker fill, blocked until corrected/overridden (Evan: stand out more) */
.cellinput.is-hard { border-color: var(--red); color: var(--red); background: var(--red-tint-2); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--red); }
.cellinput.is-saved { background: var(--green-tint); border-color: var(--green-line); color: var(--green); }
/* text-mode cell inputs (PWSID / name on onboarding) */
.cellinput--text { text-align: left; width: 130px; }
.cellinput--wide { width: 160px; }
.cellghost { font-family: var(--mono); font-size: 10px; color: var(--muted); display: block; margin-top: 2px; }

/* inline validation banner under grid */
.valbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 15px; border-radius: var(--r-sm);
}
.valbar.soft { background: var(--amber-tint); color: var(--amber); }
.valbar.violation { background: var(--red-tint); color: var(--red); }
.valbar.hard { background: var(--red-tint-2); color: var(--red); }
.valbar .reason {
  font-family: var(--sans); font-size: 13px; padding: 6px 9px; border-radius: 5px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); min-width: 220px;
}

/* ---- chemical --------------------------------------------------------- */
.chem-table { width: 100%; border-collapse: collapse; }
.chem-table th { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); }
.chem-table td { padding: 12px; border-bottom: 1px solid var(--line-faint); vertical-align: middle; }
.chem-input { width: 84px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; text-align: right; padding: 7px 9px; border: 1px solid var(--hairline); border-radius: 6px; background: var(--surface); }
.chem-input:focus { outline: 2px solid var(--teal); outline-offset: -1px; }
.chem-input.ro { background: var(--scada-tint); color: var(--scada); border-color: var(--scada-line); }
.chem-input--narrow { width: 60px; }
.chem-dose-in { width: 72px; }                                            /* editable feed-point dose (E7) */
.xlsm-edit { width: 68px; font-family: var(--mono); text-align: right; padding: 4px 6px; }  /* inline sheet edit (E10) */
.xlsm-apply { margin-left: 6px; }
.zone-rename-hint { margin-left: 8px; font-size: 11px; }                  /* "click to rename" cue (E2) */
.formula-chip {
  display: inline-flex; gap: 6px; align-items: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  background: var(--teal-tint); color: var(--teal-deep);
  border: 1px solid var(--teal-line); border-radius: var(--r-pill); padding: 4px 10px;
}
.lbs-out { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; color: var(--ink); }

/* ---- MOR -------------------------------------------------------------- */
.mor-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--r); margin-bottom: 18px;
  border: 1px solid var(--hairline); background: var(--surface);
}
.mor-banner.locked { background: var(--red-tint); border-color: var(--red-line); }
.mor-banner.ready { background: var(--teal-tint); border-color: var(--teal-line); }
/* .btn[disabled] / .btn.locked visual state now lives in the kit */

/* ---- review / flags --------------------------------------------------- */
/* (flagcard styles removed — both surfaces now render the shared App.flagRow / .mor-rl-row) */
.sign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sign-field label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.sign-field input, .sign-field select { width: 100%; font-family: var(--mono); font-size: 13px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); }

/* ---- edit profile ----------------------------------------------------- */
.lvl { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--muted); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 1px 6px; }
.module-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 900px){ .module-grid { grid-template-columns: 1fr 1fr; } }
.archive-line { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .03em; }

.removechip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .03em;
  padding: 3px 6px 3px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-soft);
}
.removechip button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 13px; line-height: 1; padding: 0 2px; }
.removechip button:hover { color: var(--red); }

/* toast */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--surface); padding: 11px 18px; border-radius: var(--r);
  font-size: 13px; box-shadow: var(--shadow-2); z-index: 100; opacity: 0; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.kv { display: flex; gap: 8px; font-family: var(--mono); font-size: 11px; }
.kv .k { color: var(--muted); }

.hidden { display: none !important; }

/* ============================================================================
   MODULAR REFACTOR — shell toggles, promoted inline styles, ctx trust footer
   (classes referenced by core.js + views/*.js — no inline styles in views)
   ============================================================================ */

/* ---- shell device / role toggles ------------------------------------------ */
.shell-toggle { display: flex; align-items: center; gap: 7px; }
.shell-toggle__k {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.tabs--sm { padding: 2px; }
.tabs--sm .tab { padding: 4px 10px; font-size: 11px; }

/* ---- per-view CONTEXT trust footer (views pass 3 provenance strings) ------ */
.trust-strip { padding: 0 28px 24px; max-width: 1320px; width: 100%; margin: 0 auto; }
.trust--ctx { margin-top: 18px; }
.trust--ctx .t-op b, .trust--ctx .t-calc b, .trust--ctx .t-human b { margin-right: 4px; }

/* ---- generic promoted utilities ------------------------------------------- */
.btn-block { width: 100%; justify-content: center; }
.btn-block.btn-primary { padding: 13px; }
.btn--start { justify-content: flex-start; }
.scn-k { color: var(--teal); font-family: var(--mono); margin-right: 8px; }
.scroll-x { overflow-x: auto; }
.card-pad { padding: 14px 18px 6px; }
.legend { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.archive-line__em { color: var(--ink); }
.midlabel { font-size: 13px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.note-13 { font-size: 13px; }
.placeholder-card .ph-title, .error-card .err-title { font-size: 22px; }
.error-card .err-label { color: var(--red); }

/* ---- onboarding derive rail promoted ------------------------------------- */
.derive-pages__den { font-family: var(--mono); font-size: 18px; }
.derive-pages__lbl { font-family: var(--serif); font-size: 18px; margin-left: 8px; }
.diff--full { max-width: 100%; }
.is-hidden-field { opacity: .5; text-decoration: line-through; }

/* ---- chemical promoted ---------------------------------------------------- */
.chem-name { font-weight: 600; }
.lbs-out--total { font-size: 18px; }

/* ---- chemical · screens 4 + 14 (dose × flow) ------------------------------ */
.ta-r { text-align: right; }
.chem-table th.ta-r, .chem-table td.ta-r { text-align: right; }
.lbs-u { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.lbs-mtd { color: var(--ink-soft); }
.chem-dose:focus { outline: 2px solid var(--teal); outline-offset: -1px; }
.chem-input--flag { border-color: var(--amber-line); color: var(--amber); background: var(--amber-tint); }
.chem-input--hard { border-color: var(--red); color: var(--red); background: var(--red-tint); }

/* flow provenance · SCADA read-only chip (vs editable manual cell) */
.flow-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600;
  color: var(--scada); background: var(--scada-tint); border: 1px solid var(--scada-line);
  border-radius: var(--r-sm); padding: 6px 10px;
}
.flow-chip__u { font-size: 10px; font-weight: 400; color: var(--scada); opacity: .8; }
.flow-chip--err { color: var(--red); background: var(--red-tint); border-color: var(--red-line); }
.chip--xs { font-size: 9px; padding: 1px 6px; margin-top: 4px; display: inline-block; }

/* lbs/day error (missing flow on a SCADA row) */
.lbs-err { font-family: var(--mono); font-size: 11px; color: var(--red); display: inline-flex; align-items: center; gap: 5px; }

/* totals + footer */
.chem-foot { row-gap: 12px; }
.tot-block { display: flex; align-items: baseline; gap: 7px; }
.btn-link { background: none; border: 0; color: var(--teal); padding: 6px 0; cursor: pointer; font-size: 13px; }
.btn-link:hover { color: var(--teal-deep); text-decoration: underline; }

/* effective-dated dose-change prompt + segment-history strip */
.dose-prompt {
  border: 1px solid var(--teal-line); background: var(--teal-tint);
  border-radius: var(--r); padding: 14px 16px; color: var(--ink);
}
.dose-prompt--flag { border-color: var(--amber-soft-line); background: var(--amber-tint); color: var(--amber); }
.dose-prompt--hard { border-color: var(--red-line); background: var(--red-tint); color: var(--red); }
.dose-prompt--fallback { border-style: dashed; border-color: var(--line-strong); background: var(--panel); color: var(--ink-soft); }
.dose-prompt__h { font-size: 14px; line-height: 1.45; }
.dose-prompt__opts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.radio { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.radio--big { font-size: 14px; color: var(--ink); }
.eff-date-day { width: 52px; margin-left: 6px; }

.seg-strip {
  margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .02em;
  color: var(--ink-soft); background: var(--panel); border: 1px solid var(--hairline);
  border-radius: var(--r-pill); padding: 3px 9px; display: inline-block;
}
.seg-strip__k {
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-right: 6px; font-size: 9px;
}
.seg-strip--card { display: block; margin-top: 8px; }

.chem-empty { background: var(--panel); border-style: dashed; }

/* ---- chemical mobile cards · screen 14 ------------------------------------ */
.m-slot:empty { display: none; }
.chem-card { padding: 16px 20px; border-bottom: 1px solid var(--line-faint); }
.chem-card--fallback { background: var(--panel); }
.chem-card__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.chem-card__name { font-weight: 600; font-size: 17px; color: var(--ink); }
.chem-card__dose { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chem-card__tank { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.chem-card__out { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.m-mtd { color: var(--muted); }
.formula-chip--card { margin-top: 10px; }
.m-note { padding: 14px 20px 4px; font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.m-note .glyph { color: var(--teal); }
.chem-card__dose .chem-input { width: 70px; }
.chem-card__tank .chem-input { width: 64px; }

/* ---- mor / review promoted ------------------------------------------------ */
.tabbar--wrap { flex-wrap: wrap; }
.stat-num { font-size: 30px; }
.stat-num--red { color: var(--red); }
.stat-num--teal { color: var(--teal); }
.stat-cap { font-size: 13px; }
.kv-check { font-size: 11px; }
.sign-field--full { grid-column: 1 / -1; }
.sign-note { font-size: 13px; }
.role-gate { display: flex; align-items: center; gap: 10px; font-size: 13px; }

/* ---- review · sign-off (screen 16) ---------------------------------------- */
.crumb {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border: 0; background: none; padding: 0; margin-bottom: 6px;
}
.crumb:hover { color: var(--teal); }
.rev-status {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--faint);
  margin-bottom: 16px;
}
.rev-status .dot { color: var(--hairline); }
.rev-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: var(--r); margin-bottom: 16px;
  border: 1px solid var(--amber-soft-line); background: var(--amber-tint); color: var(--amber);
  font-size: 13px;
}
.rev-banner.ready { border-color: var(--teal-line); background: var(--teal-tint); color: var(--teal-deep); }
.rev-banner .grow { flex: 1; }

/* supervisor monitoring (read-only) banner — calm scada/blue, distinct from a warning */
.monitor-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--r); margin: 12px 0;
  border: 1px solid var(--scada-line); background: var(--scada-tint); color: var(--scada);
  font-size: 13px;
}
.monitor-banner .grow { flex: 1; color: var(--ink-soft); }
/* MOR read-only handoff CTA (separate-mode operator) */
.mor-rl-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Keep-with-reason chips (shared App.flagRow audit reasons) */
.reason-chips { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0 2px; }
.reason-chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: .03em; cursor: pointer;
  padding: 3px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft);
}
.reason-chip:hover { border-color: var(--teal); color: var(--teal-deep); }

/* tabbed .xlsm preview pane */
.xlsm { border: 1px solid var(--hairline); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.xlsm__sheet { padding: 16px 18px; }
.xlsm__title { font-family: var(--serif); font-size: 16px; margin-bottom: 2px; }
.xlsm__meta { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .04em; margin-bottom: 12px; }
.xlsm-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.xlsm-tbl th {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--hairline);
}
.xlsm-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line-faint); font-variant-numeric: tabular-nums; }
.xlsm-tbl td.num { text-align: right; font-family: var(--mono); }
.xlsm-cell-flag { background: var(--amber-tint); outline: 1.5px solid var(--amber-line); outline-offset: -1.5px; color: var(--amber); font-weight: 600; }
.xlsm-cell-flag.hard { background: var(--red-tint); outline-color: var(--red); color: var(--red); }
.xlsm-cell-cleared { background: var(--teal-tint); color: var(--teal-deep); }
.xlsm__cert { padding: 14px 18px; border-top: 1px solid var(--hairline); background: var(--panel); }
.cert-stamp { font-family: var(--mono); font-size: 11px; color: var(--teal-deep); letter-spacing: .03em; }
.cert-blank { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.export-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.wl-head { justify-content: space-between; align-items: center; }

/* ---- Review & approve · single-column worklist-hero ----------------------- */
.rev-main { max-width: 980px; }
.rev-worklist { padding: 4px 16px; }
.rev-worklist .rl-item { border-bottom: 1px solid var(--line-faint); }
.rev-worklist .rl-item:last-child { border-bottom: none; }
.rev-worklist .rl-item .mor-rl-row { border-bottom: none; }
/* inline "see in sheet" panel under a flag — the cell in context, indented */
.flag-sheet { margin: 2px 0 12px; border: 1px solid var(--hairline); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.flag-sheet.hidden { display: none; }
.flag-sheet .xlsm__sheet { padding: 12px 14px; }
/* collapsed "Browse the full MOR" reference */
.rev-browse { padding: 0; }
.rev-browse__sum { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 14px 16px; }
.rev-browse__sum::-webkit-details-marker { display: none; }
.rev-browse__sum::before { content: "▸"; color: var(--muted); margin-right: 2px; }
.rev-browse[open] .rev-browse__sum::before { content: "▾"; }
.rev-browse .tabbar--chips { padding: 0 16px; }
.rev-browse .xlsm { margin: 8px 16px 16px; }
/* page-picker tabs as obvious clickable chips (review browser only) */
.tabbar--chips { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: none; }
.tabbar--chips .tab {
  border-radius: var(--r-pill); padding: 6px 12px; background: var(--panel);
  border: 1px solid var(--line-strong); color: var(--ink-soft); font-size: 12px; transition: all .12s;
}
.tabbar--chips .tab:hover { border-color: var(--teal); color: var(--teal-deep); }
.tabbar--chips .tab.active { background: var(--teal-tint); border-color: var(--teal); color: var(--teal-deep); font-weight: 600; }
/* consolidated approve & submit card */
.rev-approve { border-color: var(--teal-line); }
.rev-approve .row.center { align-items: baseline; }

/* ---- capture mobile promoted ---------------------------------------------- */
.phone-wrap { align-items: flex-start; }
.phone-head { padding: 16px 20px 4px; }
.phone-head__name { font-size: 22px; margin-top: 2px; }
.phone-submit { padding: 14px 20px 18px; }
.side-validation { flex: 1; min-width: 280px; }
.side-validation__hint { font-size: 13px; }


/* ---- router placeholder / error cards (module isolation) ------------------ */
.placeholder-card { border-style: dashed; }
.error-card { border-color: var(--red-line); background: var(--red-tint); }
.error-pre {
  font-family: var(--mono); font-size: 11px; white-space: pre-wrap; word-break: break-word;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 10px 12px; margin-top: 8px; color: var(--ink-soft); max-height: 220px; overflow: auto;
}

/* ---- search / data-chat (Role B, read-only) — owned by views/search.js ----- */
.search-box { position: relative; margin-top: 16px; }
.search-box__icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 15px; color: var(--faint); pointer-events: none;
}
.search-input {
  width: 100%; box-sizing: border-box; font-family: var(--serif); font-size: 18px;
  letter-spacing: -.01em; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 15px 16px 15px 42px; outline: none;
}
.search-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-tint); }
.search-input::placeholder { color: var(--faint); font-style: italic; }

.scope-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scope-chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--faint);
}
.scope-chip.active { border-color: var(--teal); background: var(--teal-tint); color: var(--teal); }

.pillrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pill {
  cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--panel); color: var(--ink-soft); transition: background .12s, border-color .12s;
}
.pill:hover { background: var(--surface); border-color: var(--teal-line); color: var(--teal); }
.pill__k { color: var(--faint); margin-right: 6px; }

.suggest {
  margin-top: 10px; border: 1px solid var(--hairline); border-radius: var(--r);
  background: var(--surface); overflow: hidden;
}
.suggest__h { padding: 8px 14px; border-bottom: 1px solid var(--line-faint); }
.suggest-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 14px; background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--ink-soft); border-bottom: 1px solid var(--line-faint);
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover { background: var(--panel); color: var(--ink); }
.suggest-item .glyph { color: var(--faint); font-size: 13px; }

.matched-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding: 11px 14px; border-radius: var(--r);
  background: var(--teal-tint); border: 1px solid var(--teal-line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--teal);
}
.matched-line__what { color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-size: 12px; }
.matched-line .grow { flex: 1; }
.show-query {
  cursor: pointer; font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--teal); border: 1px solid var(--teal-line);
  background: var(--surface); border-radius: 999px; padding: 3px 9px;
}
.query-detail {
  margin-top: 8px; padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--text-on-teal);
  font-family: var(--mono); font-size: 11px; line-height: 1.6; white-space: pre-wrap;
}
.query-detail .qd-k { color: var(--galv); }

.res-meta { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 4px; flex-wrap: wrap; gap: 8px; }
.res-count { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.res-sort { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--faint); }

.search-table td.val { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.search-table td.val.oor { color: var(--red); font-weight: 600; }
.search-table .cite {
  display: block; font-family: var(--mono); font-size: 10px; color: var(--muted);
  letter-spacing: .02em; margin-top: 3px;
}
.search-table tbody tr { cursor: pointer; }
.mor-link {
  font-family: var(--mono); font-size: 11px; color: var(--teal);
  text-decoration: none; white-space: nowrap;
}
.mor-link:hover { text-decoration: underline; }
.mor-link.draft { color: var(--faint); }

.assistant-foot {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 10px 14px; border-radius: var(--r);
  border: 1px solid var(--line-strong); background: var(--panel);
  font-size: 13px; color: var(--ink-soft);
}
.assistant-foot .glyph { color: var(--faint); }
.assistant-foot b { color: var(--ink); }

.zero-res {
  margin-top: 18px; padding: 28px; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--panel);
}
.zero-res__t { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.zero-res__d { font-size: 13px; color: var(--faint); margin-top: 6px; }

.offline-strip {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 9px 14px; border-radius: var(--r);
  background: var(--amber-tint); border: 1px solid var(--amber-soft-line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--amber);
}
.recent-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.recent-chip {
  cursor: pointer; font-family: var(--mono); font-size: 11px;
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--hairline);
  background: var(--surface); color: var(--ink-soft);
}
.recent-chip:hover { border-color: var(--teal-line); color: var(--teal); }
.recent-chip .glyph { color: var(--faint); margin-right: 5px; }

/* ============================================================================
   MOR WORKBOOK (screens 5 & 6) — real .xlsm fidelity, tiles, gate
   ============================================================================ */
.mor-banner.err { background: var(--red-tint); border-color: var(--red); }
.mor-banner__status { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink); }
.mor-banner__status .ok { color: var(--teal-deep); }
.mor-banner__status .rev { color: var(--red); font-weight: 600; }
.mor-banner__status .err { color: var(--red); font-weight: 600; }
.mor-banner__sub { font-size: 12px; color: var(--ink-soft); }
.mor-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.mor-lock-note { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-right: 4px; }
.mor-lock-note.ok { color: var(--teal-deep); }

/* review-first list — the items to clear before export */
.mor-reviewlist { border-color: var(--amber-line); }
.mor-rl-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-faint); flex-wrap: wrap; }
.mor-rl-row:last-child { border-bottom: none; }
.mor-rl-row .grow { font-size: 13px; color: var(--ink-soft); }

/* workbook tab strip — looks like .xlsm sheet tabs */
.wb-tabs { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-end; border-bottom: 2px solid var(--hairline); padding: 0 2px; }
.wb-tab {
  font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
  padding: 9px 13px 8px; cursor: pointer; color: var(--faint);
  border: 1px solid var(--hairline); border-bottom: 0; border-radius: 7px 7px 0 0;
  background: var(--panel); position: relative; bottom: -1px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
}
.wb-tab:hover { background: var(--warm-hover); color: var(--ink); }
.wb-tab.active { background: var(--surface); color: var(--ink); border-color: var(--hairline); border-bottom: 2px solid var(--surface); font-weight: 600; }
.wb-tab .pgn { color: var(--teal); font-weight: 600; }
.wb-tab.active .pgn { color: var(--teal-deep); }
.wb-tab .needs { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .04em; background: var(--red); color: var(--text-on-teal); border-radius: var(--r-pill); padding: 1px 6px; line-height: 1.4; }
.wb-tab .done { font-family: var(--mono); font-size: 9px; color: var(--teal-deep); }

.wb-pane { background: var(--surface); border: 1px solid var(--hairline); border-top: 0; border-radius: 0 0 var(--r) var(--r); overflow: hidden; }
.wb-pane__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px 10px; border-bottom: 1px solid var(--line-faint); }
.wb-pane__title { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.wb-pane__formula { font-family: var(--mono); font-size: 10.5px; color: var(--teal-deep); background: var(--teal-tint); border: 1px solid var(--teal-line); border-radius: var(--r-pill); padding: 3px 9px; letter-spacing: .03em; }

/* day-by-day workbook grid */
.wb-scroll { overflow: auto; max-height: 480px; scrollbar-gutter: stable; }
/* the Daily-log ledger reuses the same scroll affordance, but it's horizontal-only (short table) */
.wb-scroll--ledger { max-height: none; overflow-y: hidden; scrollbar-gutter: auto; }
/* always-visible horizontal scrollbar (override macOS hover-only overlay) so hidden columns are discoverable */
.wb-scroll::-webkit-scrollbar { height: 11px; width: 11px; }
.wb-scroll::-webkit-scrollbar-track { background: var(--cream-200); border-radius: 6px; }
.wb-scroll::-webkit-scrollbar-thumb { background: var(--ink-300, #cdbfa9); border-radius: 6px; border: 2px solid var(--cream-200); }
.wb-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-400, #b4a99f); }

/* scroll wrapper — edge-fade "more this way" cues + a hint chip */
.wb-scrollwrap { position: relative; }
.wb-scrollwrap .scroll-fade { position: absolute; top: 0; bottom: 11px; width: 40px; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 5; }
.wb-scrollwrap .scroll-fade--l { left: 0; background: linear-gradient(90deg, rgba(26,22,19,.14), transparent); }
.wb-scrollwrap .scroll-fade--r { right: 0; background: linear-gradient(270deg, rgba(26,22,19,.14), transparent); }
.wb-scrollwrap.can-l .scroll-fade--l { opacity: 1; }
.wb-scrollwrap.can-r .scroll-fade--r { opacity: 1; }
.scroll-hint { position: absolute; right: 14px; bottom: 16px; z-index: 6; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 4px 10px; box-shadow: 0 1px 4px rgba(26,22,19,.1); transition: opacity .15s; }
.wb-scrollwrap:not(.can-r) .scroll-hint { opacity: 0; pointer-events: none; }
.wb-grid { width: 100%; border-collapse: collapse; font-size: 12px; }
.wb-grid th, .wb-grid td { padding: 7px 12px; border-bottom: 1px solid var(--line-faint); border-right: 1px solid var(--line-faint); text-align: right; white-space: nowrap; }
.wb-grid thead th { position: sticky; top: 0; z-index: 3; background: var(--panel); font-family: var(--mono); font-weight: 500; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--hairline); }
.wb-grid thead th .csub { display: block; font-size: 8.5px; color: var(--faint); margin-top: 1px; }
.wb-grid .daycol { position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; font-family: var(--mono); color: var(--faint); letter-spacing: .03em; }
.wb-grid thead th.daycol { z-index: 4; background: var(--panel); }
.wb-grid td.cval { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.wb-grid tbody tr:hover td { background: var(--panel); }
.wb-grid tbody tr:hover td.daycol { background: var(--warm-hover); }

.wb-cell-flag { cursor: pointer; color: var(--amber) !important; font-weight: 700; background: var(--amber-tint-2) !important; box-shadow: inset 0 0 0 2px var(--amber); }
.wb-cell-flag::after { content: " \26A0"; font-size: .85em; }
.wb-cell-err { cursor: pointer; color: var(--red) !important; font-weight: 700; background: var(--red-tint-1) !important; box-shadow: inset 0 0 0 2px var(--red); }
.wb-cell-err::after { content: " \2715"; font-size: .85em; }
.wb-cell-fixed { color: var(--green) !important; background: var(--green-tint) !important; box-shadow: inset 0 0 0 1.5px var(--green-line); }
.wb-cell-fixed::after { content: " \2713"; font-size: .85em; }
/* pulse the flagged cell when it's jumped-to, so the eye lands on it */
@keyframes wb-pulse { 0%,100% { box-shadow: inset 0 0 0 2px var(--amber); } 50% { box-shadow: inset 0 0 0 3px var(--amber), 0 0 0 4px var(--amber-tint); } }
.wb-cell--pulse { animation: wb-pulse 1s ease-in-out 2; }

/* review-list actions + inline edit + done confirmation */
.mor-rl-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mor-rl-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mor-rl-edit .cellinput { width: 92px; text-align: right; }
.mor-rl-keep { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mor-rl-done { color: var(--green); font-size: 13px; }
/* hard (SWTR) flags carry a red left accent; resolved rows read muted — same on both surfaces */
.mor-rl-row--hard { box-shadow: inset 3px 0 0 var(--red); padding-left: 9px; }
.mor-rl-row--done .grow { color: var(--muted); }
/* the review preview cell on Review & approve pulses on jump, exactly like the workbook cell */
.xlsm-cell-flag.wb-cell--pulse { animation: wb-pulse 1s ease-in-out 2; }

.wb-grid tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--cream-200); font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); border-top: 1px solid var(--hairline); }
.wb-grid tfoot td.daycol { z-index: 3; background: var(--cream-200); text-transform: uppercase; font-size: 9.5px; letter-spacing: .1em; color: var(--faint); }
.wb-grid tfoot tr.stat-avg td { background: var(--teal-tint); color: var(--teal-deep); }
.wb-grid tfoot tr.stat-avg td.daycol { background: var(--teal-tint-2); color: var(--teal-deep); }

/* #1 Dosages — VDH Pre/Post-Filter grouped 3-row header (mg/L + lbs per chemical) */
.wb-grid--dose thead th { position: static; }                 /* multi-row header: avoid sticky-overlap */
.wb-grid--dose td.daycol, .wb-grid--dose thead th.daycol { position: sticky; left: 0; z-index: 2; }
.wb-grid--dose thead th.daycol { z-index: 4; background: var(--panel); }
.wb-grid .ppgroup { text-align: center; background: var(--cream-200); color: var(--ink-soft); letter-spacing: .12em; border-bottom: 1px solid var(--hairline); }
.wb-grid .chname { text-align: center; color: var(--ink); text-transform: none; font-size: 10px; letter-spacing: .02em; }
.wb-grid .usub { text-align: right; color: var(--muted); }
.wb-grid td.cval--dose { color: var(--muted); }               /* mg/L sub-col quieter than the lbs sub-col */
.wb-grid th.ta-l, .wb-grid td.ta-l { text-align: left; }      /* register text columns (chemical, application point) */

/* compliance tiles (turbidity summary) */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px 18px; }
.tile { border: 1px solid var(--hairline); border-radius: var(--r); padding: 15px 16px; background: var(--panel); position: relative; }
.tile--pass { border-color: var(--teal-line); background: var(--teal-tint); }
.tile--goal { border-color: var(--amber-soft-line); background: var(--amber-tint); }
.tile--swtr { border-color: var(--scada-line); background: var(--scada-tint); }
.tile--swtr.is-violation { border-color: var(--red); background: var(--red-tint); }
.tile__k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tile__big { font-family: var(--serif); font-size: 34px; line-height: 1.05; margin-top: 6px; }
.tile--pass .tile__big { color: var(--teal-deep); }
.tile--goal .tile__big { color: var(--amber); }
.tile--swtr .tile__big { color: var(--scada); font-size: 22px; }
.tile--swtr.is-violation .tile__big { color: var(--red); }
.tile__sub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.tile__det { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 7px; letter-spacing: .02em; }

.turb-table tr.is-violation td { background: var(--red-tint); }
.turb-table .pass { color: var(--teal-deep); font-weight: 600; }
.turb-table .fail { color: var(--red); font-weight: 700; }

/* gate-release / locked banner */
.gate-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 18px 18px; padding: 13px 16px; border-radius: var(--r); background: var(--teal-tint); border: 1px solid var(--teal-line); color: var(--teal-deep); }
.gate-banner.locked { background: var(--red-tint); border-color: var(--red-line); color: var(--red); }
.gate-banner .gb-glyph { font-family: var(--serif); font-size: 18px; }

/* flag-resolve side panel */
.flag-panel { border: 1px solid var(--amber-line); border-radius: var(--r); background: var(--amber-tint); overflow: hidden; }
.flag-panel.is-err { border-color: var(--red); background: var(--red-tint); }
.flag-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 15px; border-bottom: 1px solid var(--amber-soft-line); }
.flag-panel.is-err .flag-panel__head { border-bottom-color: var(--red-line); }
.flag-panel__body { padding: 13px 15px; font-size: 13px; color: var(--ink-soft); }
.flag-panel__rule { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 10px 12px; font-size: 12.5px; color: var(--ink); margin-bottom: 12px; }
.flag-panel__kv { font-family: var(--mono); font-size: 11px; color: var(--faint); letter-spacing: .02em; margin-bottom: 3px; }
.flag-panel__act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.flag-empty { font-size: 13px; color: var(--faint); padding: 4px 2px; }

.wb-legend { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: .03em; color: var(--faint); padding: 10px 18px 14px; }
.wb-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.wb-legend .sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.wb-legend .sw--flag { background: var(--amber-tint); border: 1.5px solid var(--amber-line); }
.wb-legend .sw--err { background: var(--red-tint); border: 1.5px solid var(--red); }
.wb-empty { padding: 40px 24px; text-align: center; color: var(--faint); }
.wb-empty .h-serif { font-size: 22px; color: var(--ink); margin-bottom: 6px; }

@media (max-width: 760px){ .tiles { grid-template-columns: 1fr; } }

/* turbidity "Noted" (sub-0.2 but ≥0.18) — informational, scada-blue not red */
.turb-table tr.is-noted td { background: var(--scada-tint); }
.turb-table .noted { color: var(--scada); font-weight: 600; }
.wb-grid td.daycol--static { position: static; }

/* ============================================================================
   v2 — COMPOSE-YOUR-PLANT builder (zones · chemicals · tests)
   ============================================================================ */
.zone-card { border: 1px solid var(--line-strong); border-radius: var(--r); padding: 12px 14px; margin-top: 10px; background: var(--panel); }
.zone-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.zone-name { flex: 1; font-family: var(--serif); font-size: 17px; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); padding: 3px 6px; }
.zone-name:hover { border-color: var(--hairline); }
.zone-name:focus { outline: 2px solid var(--teal); outline-offset: -1px; background: var(--surface); }
.zone-rm { border: 1px solid var(--line-strong); background: var(--surface); color: var(--faint); width: 26px; height: 26px; border-radius: var(--r-sm); cursor: pointer; line-height: 1; }
.zone-rm:hover { color: var(--red); border-color: var(--red-line); background: var(--red-tint); }
.zone-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 6px 0 4px; }
.addrow { align-items: center; }
.mini-sel, .mini-in { font-family: var(--sans); font-size: 12px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-soft); }
.mini-in--dose { width: 64px; }
.mini-sel:focus, .mini-in:focus { outline: 2px solid var(--teal); outline-offset: -1px; }
.removechip.chip--chem { border-color: var(--teal-line); background: var(--teal-tint); color: var(--teal-deep); }
.removechip.chip--daily { border-style: dashed; }
.is-locked { opacity: .55; pointer-events: none; }

/* ============================================================================
   v2 — TRANSPOSED daily-log grid (time DOWN rows · tests ACROSS by compartment)
   ============================================================================ */
.grid--t thead .zone-th {
  text-align: center; background: var(--cream-200); border-left: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
  padding: 6px 10px;
}
.grid--t thead .test-th { white-space: nowrap; font-size: 11px; vertical-align: bottom; }
.grid--t thead .test-th .sub { display: block; font-family: var(--mono); font-size: 9px; color: var(--muted); }
.grid--t .zone-corner { vertical-align: middle; }
.grid--t .col-time { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.grid--t .rstat { margin-left: 6px; color: var(--muted); font-weight: 400; }
.grid--t td { text-align: center; }
.grid--t td.pcol { text-align: left; }
/* SINGLE-FOCUS hierarchy: the current round is the bright, large-target row; completed
   rounds recede to a quiet trend band; upcoming rounds are faint. (Evan: less overwhelming) */
.grid--t tr.row-current td { background: var(--scada-tint); border-top: 1.5px solid var(--scada-line); border-bottom: 1.5px solid var(--scada-line); padding-top: 9px; padding-bottom: 9px; }
.grid--t tr.row-current td.col-time { box-shadow: inset 3px 0 0 var(--scada); font-weight: 700; }
.grid--t tr.row-current .cellinput--t { width: 66px; font-size: 14px; padding: 7px 8px; }
.grid--t tr.row-done td { padding-top: 4px; padding-bottom: 4px; }
.grid--t tr.row-done td.col-time { color: var(--muted); font-weight: 400; }
.grid--t tr.row-future td { color: var(--faint); }
.grid--t tr.row-future td.col-time { color: var(--faint); font-weight: 400; }
.grid--t td.cell--done .num { color: var(--green); font-size: 12px; opacity: .72; }   /* filled = quiet green */
.grid--t td.cell--flagdone { background: var(--amber-tint-2); }
.grid--t td.cell--flagdone .num { color: var(--amber); font-weight: 600; opacity: 1; }
.grid--t td.cell--violdone { background: var(--red-tint-1); }
.grid--t td.cell--violdone .num { color: var(--red); font-weight: 700; opacity: 1; }
.grid--t td.cell--future .num--ghost { color: var(--muted); }
.cellinput--t { width: 62px; text-align: center; }

/* the colour key swatches (all FILLED so they match the cells they describe) */
.swatch--green { background: var(--green-tint); border: 1px solid var(--green-line); }
.swatch--current { background: var(--scada-tint); border: 1px solid var(--scada-line); }
.swatch--hard { background: var(--red-tint-1); border: 1px solid var(--red-line); }

/* once-daily side box + inline-meter strip rows */
.od-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line-faint); }
.od-row:last-child { border-bottom: none; }
.od-name { font-size: 13px; color: var(--ink-soft); }
.od-name .u { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-left: 5px; }
.od-in { width: 92px; text-align: right; }
.od-unit { font-family: var(--mono); font-size: 10px; color: var(--muted); }

/* Now/Next guide strip — the single next action + what's coming */
.nownext { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); }
.nownext__now { font-size: 14px; color: var(--ink); }
.nownext__now b { font-weight: 700; }
.nownext__k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 7px; }
.nownext__next { color: var(--ink-soft); }
.nownext__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip.clickable { cursor: pointer; }

/* once-daily collapsed-to-green summary line (shown once all daily values are in) */
.od-doneline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.od-doneline__l { font-size: 13px; color: var(--green); }
.od-doneline__l b { font-weight: 600; }
/* once-daily chemical-feed section divider */
.od-chemhead { border-top: 1px solid var(--line-strong); padding-top: 11px; margin-top: 14px; }

/* ============================================================================
   Round / Once-daily modes — read-only ledger (glance) + docked entry form (act)
   ============================================================================ */
.logmode-tabs { display: inline-flex; gap: 4px; padding: 3px; background: var(--cream-200); border-radius: var(--r-sm); }
.logmode-tab { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 16px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-soft); cursor: pointer; }
.logmode-tab.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(26,22,19,.06); }

/* read-only history ledger — compact so many columns fit without horizontal-scroll-to-enter */
.histledger__cap { padding: 10px 12px 2px; }
.histledger td, .histledger th { padding-top: 4px; padding-bottom: 4px; }
.histledger .cell--done .num { font-size: 12px; opacity: .82; }
.histledger thead .test-th { font-size: 10px; }
.histledger tr.row-current td { background: var(--scada-tint); }
.histledger td.cell--curghost .num--ghost { color: var(--scada); font-weight: 700; }

/* docked round entry form — fields WRAP so any number of tests flows down (never sideways) */
.roundform__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.roundform__title { font-size: 15px; color: var(--ink); }
.roundform__title b { font-family: var(--mono); }
.roundrail { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.roundrail__chip { font-family: var(--mono); font-size: 11px; padding: 3px 9px; border: 1px solid var(--hairline);
  border-radius: var(--r-pill); background: var(--surface); color: var(--muted); cursor: pointer; }
.roundrail__chip--done { color: var(--green); border-color: var(--green-line); }
.roundrail__chip--current { background: var(--teal); color: var(--text-on-teal); border-color: var(--teal-deep); }
.roundform__zone { padding: 9px 0; border-top: 1px solid var(--line-faint); }
.roundform__zone:first-child { border-top: 0; }
.roundform__zname { margin-bottom: 7px; }
.roundform__fields { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.roundfield { display: inline-flex; flex-direction: column; gap: 3px; }
.roundfield__name { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.roundfield__u { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.roundfield__in { width: 96px; text-align: center; }
.roundfield__prev { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.roundform__foot { display: flex; justify-content: flex-end; margin-top: 14px; }

/* reorder forecast (chemical tab) */
.ro-days { font-family: var(--mono); font-weight: 600; color: var(--ink-soft); }
.ro-days--low { color: var(--amber); }
.ro-low { color: var(--amber); font-weight: 600; }

/* chemical usage & reordering — inventory table + expandable detail */
.inv-table .inv-onhand { width: 72px; text-align: right; }
.inv-expand > td { background: var(--cream-100); padding: 0; }
.inv-bd { padding: 12px 16px; }
.inv-bd-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 4px 0; border-bottom: 1px solid var(--line-faint); }
.inv-bd-row:last-of-type { border-bottom: none; }
.inv-bd-row > span:first-child { font-size: 13px; color: var(--ink-soft); }
.chem-card__inv { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chem-card__inv .inv-onhand { width: 70px; text-align: right; }

/* ============================================================================
   v2 — new platform screens (CT · Analytics · CPE · Assets)
   ============================================================================ */
/* end-of-day raw-turbidity review */
.eod-card { border-color: var(--amber-line); }
.eod-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line-faint); }
.eod-row:last-child { border-bottom: none; }
.eod-row .grow { font-size: 13px; color: var(--ink-soft); }

/* ============================================================================
   v2.1 — guided treatment-train walk (onboarding "Compose your plant")
   ============================================================================ */
.plant-train .train-rail { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 4px 0 12px; border-bottom: 1px solid var(--line-faint); margin-bottom: 14px; }
.train-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-pill); cursor: pointer; font-size: 13px; color: var(--faint); }
.train-pill:hover { border-color: var(--teal-line); }
.train-pill .tp-n { font-family: var(--mono); font-size: 11px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cream-200); color: var(--faint); }
.train-pill .tp-name { font-weight: 500; }
.train-pill.is-current { border-color: var(--teal); background: var(--teal-tint); color: var(--teal-deep); }
.train-pill.is-current .tp-n { background: var(--teal); color: var(--text-on-teal); }
.train-pill.is-done { color: var(--ink-soft); }
.train-pill.is-done .tp-n { background: var(--green-tint); color: var(--green); }
.train-sep { color: var(--muted); }
.train-add { border: 1px dashed var(--line-strong); background: transparent; color: var(--faint); border-radius: var(--r-pill); padding: 6px 12px; cursor: pointer; font-size: 13px; }
.train-add:hover { border-color: var(--teal); color: var(--teal-deep); }

.zone-focus { padding: 2px; }
.zone-rm-wrap { display: inline-flex; align-items: center; gap: 6px; }
.rm-confirm { font-size: 12px; color: var(--red); display: inline-flex; align-items: center; gap: 6px; }
.zone-help { color: var(--faint); margin: 2px 0 10px; }
.chip-row { min-height: 26px; align-items: center; }
.removechip .chip-u { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-left: 6px; }

.add-slot { margin-top: 8px; }
.add-affordance { border-style: dashed; color: var(--teal-deep); }
.add-panel { border: 1px solid var(--teal-line); background: var(--teal-tint); border-radius: var(--r); padding: 12px 14px; margin-top: 6px; }
.type-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.type-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-sm); cursor: pointer; font-size: 13px; color: var(--ink-soft); }
.type-chip:hover { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal-tint); }
.type-chip .tc-u { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.zone-nav { border-top: 1px solid var(--line-faint); padding-top: 12px; }
.adv summary { cursor: pointer; color: var(--faint); }
.adv summary:hover { color: var(--teal-deep); }

/* ============================================================================
   RESPONSIVE — true adaptive layout (desktop · iPad · phone).
   Variant selection is viewport-driven in core.js (App.device); this is the
   layout / overflow / touch / phone-full-bleed layer. Mobile-first guards so the
   shell + every page contain to the screen with zero horizontal page scroll.
   ============================================================================ */

/* never let a flex/grid child force the page wider than the screen */
.two-col > *, .phone-wrap > *, .row > * { min-width: 0; }

/* ---- iPad / tablet ( ≤ 1024px ) -------------------------------------------- */
@media (max-width: 1024px) {
  .topbar, .steprail, .ribbon { padding-left: 20px; padding-right: 20px; }
  .page { padding: 22px 20px 36px; }
  .trust-strip { padding: 0 20px 22px; }
  .wb-tabs { flex-wrap: wrap; }
}

/* ---- Phone — gated on the JS device, NOT a separate media query ------------------------
   core.js sets <html data-device="mobile"> below MOBILE_BP and renders the mobile variants;
   this layer applies in lockstep, so CSS and JS share ONE breakpoint and can never disagree
   (this is what closes the old 641–767px "half-phone" gap). ------------------------------- */
[data-device="mobile"] {
  /* shell wraps + shrinks; the step rail scrolls INSIDE itself, never the page */
  & .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; }
  & .topbar__spacer { display: none; }
  & .shell-toggle__k { display: none; }                 /* drop the "Role" label to save width */

  & .steprail { padding: 0 8px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  & .steprail::-webkit-scrollbar { display: none; }
  & .step { padding: 10px 12px; min-height: 44px; }

  & .ribbon { gap: 6px 14px; padding: 8px 14px; }
  & .page { padding: 16px 14px 30px; }
  & .trust-strip { padding: 0 14px 18px; }

  /* page heads + action clusters stack instead of overflowing */
  & .page__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  & .mor-actions { flex-wrap: wrap; margin-left: 0; }
  & .mor-banner { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* every 2-up grid stacks */
  & .src-grid, & .proc-grid, & .module-grid, & .sign-grid { grid-template-columns: 1fr; }

  /* onboarding treatment train scrolls horizontally, contained */
  & .plant-train .train-rail { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  & .plant-train .train-rail::-webkit-scrollbar { display: none; }

  /* touch + type: ≥16px inputs (no iOS auto-zoom), comfortable hit areas */
  & .cellinput { font-size: 16px; min-height: 40px; }
  & .cellinput--text, & .cellinput--wide { width: 100%; }
  & .btn, & .btn-sm { min-height: 44px; }
  & .tabs .tab { min-height: 36px; display: inline-flex; align-items: center; }
  & .entry-tabs { flex-wrap: wrap; }                    /* demo state selector wraps instead of overflowing */

  /* phone column stacks; the desktop-demo explainer is noise on a real phone */
  & .phone-wrap { flex-direction: column; }
  & .side-validation { display: none; }

  /* scroll containers stay within the screen */
  & .wb-scroll, & .wb-scrollwrap, & .scroll-x, & .card { max-width: 100%; }
}

/* ============================================================================
   Optional tools — rail tabs + Usage projections (views/analytics.js, assets.js)
   ============================================================================ */
/* tool tabs (Usage / Assets) — no step number; a divider marks the first one */
.step--tool { color: var(--ink-soft); }
.step:not(.step--tool) + .step--tool { border-left: 1px solid var(--line-faint); margin-left: 4px; }

/* Usage & projections — horizontal bars vs capacity */
.usage-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.usage-row__k { width: 92px; flex: none; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.usage-row__v { width: 46px; flex: none; text-align: right; font-family: var(--mono); font-size: 12px; color: var(--ink); }
.usage-bar { position: relative; flex: 1; min-width: 0; height: 14px; background: var(--cream-200); border-radius: var(--r-sm); overflow: hidden; }
.usage-bar__fill { position: absolute; inset: 0 auto 0 0; background: var(--teal-tint); border-right: 2px solid var(--teal); }
.usage-bar__fill--now { background: var(--teal); border-right: 0; }
.usage-bar__fill--over { background: var(--red-tint-1); border-right: 2px solid var(--red); }
.usage-row--cap .usage-bar { background: transparent; overflow: visible; }
.usage-bar__cap { position: absolute; right: 0; top: -3px; bottom: -3px; width: 2px; background: var(--red); }