/* ============================================================================
   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;
}

/* explore menu */
.explore-wrap { position: relative; }
.explore-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 280px; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--r);
  box-shadow: var(--shadow-2); padding: 8px; z-index: 50;
}
.explore-menu .em-h {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 7px 9px 4px;
}
.explore-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: none; border-radius: var(--r-sm); padding: 8px 9px;
}
.explore-item:hover { background: var(--panel); }
.explore-item .ei-t { font-weight: 600; font-size: 13px; color: var(--ink); }
.explore-item .ei-d { font-size: 11px; color: var(--faint); margin-top: 1px; }

/* ---- 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: 1fr 360px; gap: 24px; align-items: start; }
@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 / scenario affordances */
.optional-box {
  border: 1px dashed var(--line-strong); border-radius: var(--r);
  padding: 14px 16px; background: var(--panel);
}
.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;
}
.scenario-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.scenario {
  text-align: left; cursor: pointer; border: 1px solid var(--hairline);
  border-radius: var(--r); padding: 14px; background: var(--surface);
}
.scenario:hover { border-color: var(--teal); box-shadow: var(--shadow-1); }
.scenario .sc-k { font-family: var(--mono); font-size: 22px; color: var(--teal); font-weight: 600; }
.scenario .sc-t { font-weight: 600; font-size: 13px; margin-top: 4px; }
.scenario .sc-d { font-size: 11px; color: var(--faint); margin-top: 4px; }

/* ---- 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); }
.cellinput.is-hard { border-color: var(--red); color: var(--red); background: var(--red-tint); }
.cellinput.is-saved { background: var(--teal-tint); border-color: var(--teal-line); }
/* 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.hard { background: var(--red-tint); 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; }
.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 {
  border: 1px solid var(--amber-line); border-radius: var(--r); padding: 14px 16px;
  background: var(--amber-tint); margin-bottom: 10px;
}
.flagcard.cleared { background: var(--teal-tint); border-color: var(--teal); opacity: .8; }
.flagcard .fc-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.flagcard .fc-reason select { font-family: var(--sans); font-size: 12px; padding: 5px 8px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--surface); }

.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; } .scenario-row { grid-template-columns: 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); }

/* explore static pages */
.exp-cap { font-size: 12px; color: var(--faint); margin-bottom: 16px; }
.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; }

/* worklist row affordances */
.flagcard.active { box-shadow: 0 0 0 2px var(--teal); }
.flagcard .fc-cell {
  font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .03em;
  margin-top: 4px;
}
.flagcard .fc-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.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); }
.reason-chip.sel { background: var(--teal-tint); border-color: var(--teal); color: var(--teal-deep); }
.reason-chip--dose { border-style: dashed; }
.reason-chip--dose.sel { background: var(--scada-tint); border-color: var(--scada); color: var(--scada); border-style: solid; }
.sent-back { background: var(--scada-tint); border-color: var(--scada-line); opacity: 1; }
.sent-back .archive-line { color: var(--scada); }

/* 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; }

/* ---- 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; }

/* ---- explore promoted ----------------------------------------------------- */
.chat-card { max-width: 760px; }
.ccr-lede { font-size: 14px; }

/* ---- 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; }
.demo-toggle-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* ============================================================================
   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); }

/* 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; }
.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) !important; box-shadow: inset 0 0 0 1.5px var(--amber-line); }
.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) !important; box-shadow: inset 0 0 0 1.5px var(--red); }
.wb-cell-err::after { content: " \2715"; font-size: .85em; }

.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); }

/* 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; } }

/* ============================================================================
   CAPTURE METHODS — method picker (10) · voice round (11) · photo capture (12)
   Groundwater-mobile capture. No raw hex; tokens only; classes not inline.
   ============================================================================ */

/* two-up stage: phone frame beside a context card */
.cap-stage { display: flex; gap: 24px; margin-top: 16px; align-items: flex-start; flex-wrap: wrap; }
.cap-aside { flex: 1; min-width: 280px; max-width: 420px; }
.cap-aside-step { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); margin-top: 7px; }
.cap-aside-n {
  width: 19px; height: 19px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  background: var(--teal-tint); color: var(--teal-deep); border: 1px solid var(--teal-line);
}

/* phone body padding + in-phone nav */
.cap-body { padding: 4px 0 6px; }
.cap-nav { display: flex; align-items: center; gap: 10px; padding: 8px 18px 12px; }
.cap-back {
  font-size: 24px; line-height: 1; border: 0; background: none; cursor: pointer;
  color: var(--faint); padding: 0 4px 0 0;
}
.cap-back:hover { color: var(--ink); }
.cap-nav__title { font-size: 21px; }
.cap-nav__sys { font-size: 9px; letter-spacing: .1em; margin-top: 2px; }

/* ---- method picker ---------------------------------------------------- */
.cap-pick-h { padding: 4px 20px 8px; font-size: 9px; letter-spacing: .14em; }
.cap-method {
  display: flex; align-items: center; gap: 13px; width: calc(100% - 32px);
  margin: 0 16px 10px; padding: 14px 14px; cursor: pointer; text-align: left;
  border: 1px solid var(--hairline); border-radius: var(--r); background: var(--surface);
}
.cap-method:hover { background: var(--panel); }
.cap-method--default {
  border: 1.5px solid var(--teal); background: var(--teal-tint); box-shadow: 0 0 0 3px var(--teal-tint);
  padding: 18px 16px;
}
.cap-method--default:hover { background: var(--teal-tint-2); }
.cap-method--disabled { opacity: .55; cursor: not-allowed; }
.cap-method--disabled:hover { background: var(--surface); }
.cap-method__glyph {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center;
  font-size: 19px; background: var(--surface-sink); border: 1px solid var(--hairline);
}
.cap-method--default .cap-method__glyph { background: var(--teal); border-color: var(--teal-deep); }
.cap-method__glyph--sm { width: 36px; height: 36px; font-size: 17px; }
.cap-tee { font-family: var(--serif); font-size: 22px; color: var(--text-on-teal); line-height: 1; }
.cap-method__body { flex: 1; }
.cap-method__t { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; color: var(--ink); }
.cap-method__d { font-size: 12px; color: var(--faint); margin-top: 2px; }
.cap-default-badge {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-deep); background: var(--surface); border: 1px solid var(--teal-line);
  border-radius: var(--r-pill); padding: 1px 7px;
}
.cap-opt { font-family: var(--mono); font-size: 10px; letter-spacing: .05em; color: var(--muted); font-weight: 400; }
.cap-method__chev { font-size: 20px; color: var(--muted); }
.cap-floor {
  margin: 6px 20px 4px; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--surface-sink); border: 1px solid var(--line-faint);
  font-size: 11.5px; color: var(--faint); line-height: 1.45;
}
.cap-floor .glyph { color: var(--teal); margin-right: 3px; }

/* ---- offline-first chip (voice + photo) ------------------------------- */
.cap-offrow { display: flex; justify-content: center; padding: 4px 20px 6px; }
.cap-offline {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--faint);
}
.cap-offline__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--locked-grey); }
.cap-offline.on { border-color: var(--scada-line); background: var(--scada-tint); color: var(--scada); }
.cap-offline.on .cap-offline__dot { background: var(--scada); }

/* ---- voice round ------------------------------------------------------ */
.cap-voice { padding: 4px 20px 12px; display: flex; flex-direction: column; align-items: center; }
.cap-voice__lede { font-size: 14px; color: var(--ink-soft); text-align: center; line-height: 1.5; margin: 2px 6px 14px; }
.cap-mic {
  position: relative; width: 96px; height: 96px; border-radius: 50%; cursor: pointer;
  border: 0; background: var(--teal); box-shadow: var(--shadow-2);
  display: grid; place-items: center; margin: 6px 0 4px;
}
.cap-mic__ico { font-size: 38px; line-height: 1; z-index: 1; }
.cap-mic__ring {
  position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--teal-line); opacity: 0;
}
.cap-mic.is-rec { background: var(--red); }
.cap-mic.is-rec .cap-mic__ring { opacity: 1; animation: capPulse 1s ease-out infinite; }
.cap-mic.is-split { background: var(--scada); }
@keyframes capPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.cap-mic__state { margin: 6px 0 12px; font-size: 9px; letter-spacing: .12em; }
.cap-example {
  width: 100%; padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--surface-sink); border: 1px solid var(--line-faint);
}
.cap-example__q { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink); margin-top: 5px; line-height: 1.4; }
.cap-voice-slot { width: 100%; }
.cap-transcript {
  width: 100%; margin-top: 12px; padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--teal-tint); border: 1px solid var(--teal-line);
}
.cap-transcript__q { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink); margin-top: 4px; line-height: 1.4; }

/* ---- photo capture ---------------------------------------------------- */
.cap-photo { padding: 4px 20px 12px; }
.cap-viewer {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: var(--ink); border: 1px solid var(--line-strong);
  min-height: 168px; display: flex; align-items: center; justify-content: center; padding: 14px;
  transition: min-height .25s ease;
}
.cap-viewer.is-snapped { box-shadow: inset 0 0 0 3px var(--teal); }
.cap-viewer.is-thumb { min-height: 120px; }
.cap-sheet {
  position: relative; width: 100%; background: var(--surface); border-radius: 4px;
  padding: 18px 16px 22px; box-shadow: var(--shadow-2); transform: rotate(-1.4deg);
}
.cap-viewer.is-thumb .cap-sheet { transform: rotate(-1.4deg) scale(.82); }
.cap-sheet__hand {
  font-family: 'Bradley Hand', 'Segoe Print', var(--serif); font-style: italic;
  font-size: 15px; color: var(--ink); letter-spacing: .01em; line-height: 1.7;
}
.cap-sheet__corner { position: absolute; top: 8px; right: 12px; font-size: 8px; letter-spacing: .1em; color: var(--muted); }
.cap-viewer__hint {
  position: absolute; bottom: 8px; left: 12px; font-size: 8.5px; letter-spacing: .1em;
  color: var(--text-on-teal); opacity: .85;
}
.cap-scanned {
  display: inline-block; font-size: 8px; letter-spacing: .12em;
  color: var(--text-on-teal); background: var(--teal); border-radius: var(--r-pill);
  padding: 1px 7px; margin-right: 5px;
}
.cap-snap { margin-top: 12px; }
.cap-ocr-wait {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 16px; font-family: var(--mono); font-size: 12px; color: var(--scada); letter-spacing: .03em;
}
.cap-spin {
  width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--scada-line);
  border-top-color: var(--scada); animation: capSpin .7s linear infinite;
}
@keyframes capSpin { to { transform: rotate(360deg); } }

/* ---- shared confirm-before-save list (voice + photo) ------------------ */
.cap-confirm { margin-top: 14px; padding: 0; }
.cap-confirm__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px 9px; border-bottom: 1px solid var(--line-faint);
}
.cap-confirm__count { font-size: 9px; }
.cap-rows { display: flex; flex-direction: column; }
.cap-row { padding: 12px 16px; border-bottom: 1px solid var(--line-faint); }
.cap-row.is-check { background: var(--amber-tint); }
.cap-row__main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cap-row__label { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.cap-row__val { display: flex; align-items: center; gap: 8px; }
.cap-row__num { font-family: var(--mono); font-size: 17px; color: var(--ink); }
.cap-row__unit {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 11px; color: var(--faint);
  background: var(--surface-sink); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: 3px 7px;
}
.cap-pad { font-size: 10px; color: var(--amber-line); line-height: 1; }
.cap-row__chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.cap-row__ok { color: var(--teal); font-size: 14px; margin-left: auto; }
.cap-check {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  padding: 4px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--amber-line); background: var(--surface); color: var(--amber);
}
.cap-check:hover { background: var(--amber-tint); }
.cap-row.is-open { background: var(--surface-sink); }

.cap-check-panel { margin-top: 11px; padding: 12px 13px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--amber-soft-line); }
.cap-check-panel__why { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--amber); line-height: 1.45; }
.cap-crop { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; margin: 10px 0 4px; padding: 8px 16px; border-radius: var(--r-sm); background: var(--cream-200); border: 1px dashed var(--line-strong); }
.cap-crop__hand { font-family: 'Bradley Hand', 'Segoe Print', var(--serif); font-style: italic; font-size: 22px; color: var(--ink); }
.cap-crop__cap { font-size: 8px; letter-spacing: .1em; }
.cap-check-edit { display: flex; align-items: stretch; gap: 8px; margin-top: 10px; }
.cap-edit-input {
  flex: 1; font-family: var(--mono); font-size: 18px; text-align: left; color: var(--ink);
  padding: 9px 12px; border: 1.5px solid var(--teal); border-radius: var(--r-sm); background: var(--surface);
}
.cap-edit-input:focus { outline: 2px solid var(--teal); outline-offset: -1px; }
.cap-check-actions { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }

.cap-prov {
  display: flex; align-items: center; gap: 7px; padding: 11px 16px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; color: var(--teal-deep);
  background: var(--teal-tint); border-top: 1px solid var(--teal-line);
}
.cap-prov .glyph { color: var(--teal); }
.cap-confirm-cta { margin: 14px 16px 16px; width: calc(100% - 32px); }

/* method link inside the mobile daily form */
.phone-method-row { padding: 4px 20px 0; }
.phone-method-link {
  display: flex; align-items: center; gap: 8px; width: 100%; cursor: pointer; text-align: left;
  padding: 10px 13px; border-radius: var(--r-sm);
  border: 1px dashed var(--line-strong); background: var(--panel); color: var(--ink);
  font-size: 13px; font-weight: 500;
}
.phone-method-link:hover { border-color: var(--teal); background: var(--teal-tint); }
.phone-method-link__sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--muted); margin-left: auto; }

/* ============================================================================
   PLATFORM FEATURES (screens 17-24 · views/platform.js)
   Composes kit tokens only — no raw hex, no inline styles in views.
   ============================================================================ */

/* ---- feature nav (module-gated reactivity surface) ------------------------ */
.feat-nav {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 14px;
  background: var(--surface-sink); border: 1px solid var(--hairline); border-radius: var(--r);
}
.feat-nav__lead {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-right: 4px;
}
.feat-nav__hint, .feat-nav__empty {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--muted);
  margin-left: auto;
}
.feat-nav__empty { color: var(--amber); }
.feat-tab {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; color: var(--faint);
  border: 1px solid transparent; background: none; border-radius: var(--r-pill);
  padding: 5px 11px;
}
.feat-tab:hover { background: var(--warm-hover); color: var(--ink); }
.feat-tab.is-active { background: var(--teal); color: var(--text-on-teal); border-color: var(--teal-deep); }
.feat-tab__g { font-size: 12px; }
.feat-tab.is-active .feat-tab__g { color: var(--text-on-teal); }

.gate-card { border-style: dashed; }
.section-rule {
  display: flex; align-items: center; gap: 12px; margin: 6px 0 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.section-rule::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.table-sub { margin-top: 2px; }
.row-red td { background: var(--red-tint); }
.row-amber td { background: var(--amber-tint); }

/* ---- 17 portfolio --------------------------------------------------------- */
.port-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: var(--r); border: 1px solid var(--hairline);
  background: var(--surface); margin-top: 6px;
}
.port-banner.is-flag { background: var(--red-tint); border-color: var(--red-line); }
.port-banner.is-clear { background: var(--teal-tint); border-color: var(--teal-line); }
.port-banner__tri { color: var(--red); }
.port-banner.is-clear .port-banner__tri { color: var(--teal); }
.port-banner__spacer { flex: 1; }
.filter-chip {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-soft);
  border-radius: var(--r-pill); padding: 4px 11px;
}
.filter-chip:hover { background: var(--warm-hover); }
.filter-chip.is-on { background: var(--ink); color: var(--text-on-teal); border-color: var(--ink); }
.due-strip {
  display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--panel); border: 1px solid var(--hairline);
  border-radius: var(--r); margin-bottom: 4px;
}
.due-strip__lead {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-right: 8px; align-self: center;
}
.due-day { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 30px; padding: 2px 0; }
.due-day__n { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.due-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
.port-table .port-name { font-size: 14px; }
.port-row--red td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.port-row--amber td:first-child { box-shadow: inset 3px 0 0 var(--amber-line); }
.port-row--green td:first-child { box-shadow: inset 3px 0 0 var(--teal); }
.flag-chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: .03em;
  padding: 3px 8px; border-radius: var(--r-sm); border: 1px solid var(--hairline); background: var(--surface);
}
.flag-chip--red { color: var(--red); border-color: var(--red-line); background: var(--red-tint); }
.flag-chip--amber { color: var(--amber); border-color: var(--amber-soft-line); background: var(--amber-tint); }
.flag-chip--green { color: var(--teal); border-color: var(--teal-line); background: var(--teal-tint); }
.late-alarm {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: var(--r);
  background: var(--amber-tint); border: 1px solid var(--amber-soft-line); color: var(--amber);
}
.late-alarm__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber-line); flex: none; }

/* ---- 18 calendar + register ----------------------------------------------- */
.bucket-row { display: flex; gap: 8px; flex-wrap: wrap; }
.bucket {
  font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
  padding: 4px 11px; border-radius: var(--r-pill); border: 1px solid var(--hairline);
  background: var(--surface); color: var(--ink-soft);
}
.bucket--red { color: var(--red); border-color: var(--red-line); background: var(--red-tint); }
.bucket--amber { color: var(--amber); border-color: var(--amber-soft-line); background: var(--amber-tint); }
.bucket--ghost { color: var(--muted); }

/* ---- 19 CCR / notice ------------------------------------------------------ */
.ccr-card, .notice-card { max-width: 820px; }
.prefill-list { list-style: none; padding: 0; margin: 0; }
.prefill-list li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-faint); align-items: baseline; }
.prefill-k { font-size: 13px; color: var(--ink-soft); }
.prefill-src { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-left: auto; }
.payload {
  font-family: var(--mono); font-size: 11px; white-space: pre-wrap; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 10px 12px; margin: 0 0 6px;
}
.notice-card { border-color: var(--red-line); }
.notice-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 14px; color: var(--ink);
}
.notice-head__warn { color: var(--red); font-weight: 600; }
.notice-draft {
  font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ink-soft);
  background: var(--panel); border-left: 3px solid var(--amber-line); border-radius: var(--r-sm);
  padding: 12px 16px;
}
.chan {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 4px 11px; background: var(--surface);
}
.chan--later { color: var(--muted); opacity: .7; }

/* ---- 20 sampling + intake / 21 scada / dropzones -------------------------- */
.dropzone {
  border: 1.5px dashed var(--line-strong); border-radius: var(--r);
  background: var(--panel); padding: 22px; text-align: center;
}
.dropzone__icon { font-size: 26px; color: var(--teal); }
.dropzone__txt { font-size: 14px; color: var(--ink-soft); margin-top: 6px; }
.link-btn { border: 0; background: none; color: var(--teal); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.parsing { font-family: var(--mono); font-size: 13px; color: var(--faint); padding: 8px 0; }
.parsing__spin { color: var(--teal); }
.lifecycle { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ls {
  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(--muted);
}
.ls--done { color: var(--teal); border-color: var(--teal-line); background: var(--teal-tint); }
.ls--now { color: var(--ink); border-color: var(--teal); background: var(--teal-tint); font-weight: 600; }
.ls-arr { color: var(--hairline); font-family: var(--mono); }

/* ---- 21 scada ------------------------------------------------------------- */
.security-note {
  font-size: 13px; color: var(--scada);
  background: var(--scada-tint); border: 1px solid var(--scada-line); border-radius: var(--r-sm); padding: 10px 13px;
}
.summarize-pill {
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
  border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 3px 9px; background: var(--surface);
}
.scada-preview { font-size: 13px; }
.amber-line-note { color: var(--amber); font-size: 13px; }

/* ---- 22 lsl --------------------------------------------------------------- */
.lsl-summary__breakdown { display: flex; gap: 8px; flex-wrap: wrap; }
.lsl-pill {
  font-family: var(--mono); font-size: 11px; letter-spacing: .02em;
  padding: 4px 11px; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-soft);
}
.lsl-pill--lead { color: var(--red); border-color: var(--red-line); background: var(--red-tint); }
.lsl-pill--galv { color: var(--ink-soft); }
.lsl-pill--galv b { color: var(--galv); }
.lsl-pill--ok { color: var(--teal); border-color: var(--teal-line); background: var(--teal-tint); }
.lsl-pill--unknown { color: var(--amber); border-color: var(--amber-soft-line); background: var(--amber-tint); }
.lsl-sel {
  font-family: var(--mono); font-size: 11.5px; padding: 4px 7px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
}
.lsl-sel--flag { border-color: var(--amber-line); background: var(--amber-tint); color: var(--amber); }

/* ---- 23 config-chat ------------------------------------------------------- */
.config-chat { max-width: 820px; }
.assistant-note {
  font-size: 12.5px; color: var(--ink-soft);
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 10px 13px;
}
.chat-box {
  flex: 1; font-family: var(--sans); font-size: 14px; padding: 10px 13px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink);
}
.chat-box:focus { outline: 2px solid var(--teal); outline-offset: -1px; }
.example-prompt {
  font-family: var(--mono); font-size: 11px; cursor: pointer; color: var(--faint);
  border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 4px 11px; background: var(--surface);
}
.example-prompt:hover { background: var(--warm-hover); color: var(--ink); }
.diff--blocked { border-color: var(--red-line); }
.diff-blocked-body { padding: 14px 16px; background: var(--red-tint); }
.diff__guards { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 15px; background: var(--surface); border-top: 1px solid var(--line-faint); }
.guard-chip {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--teal-deep);
  border: 1px solid var(--teal-line); background: var(--teal-tint); border-radius: var(--r-pill); padding: 2px 8px;
}
.audit-line {
  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-sm); padding: 8px 11px;
}
.vp-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); cursor: pointer; }

/* ---- 24 logbook ----------------------------------------------------------- */
.handoff-banner {
  border: 1px solid var(--teal-line); background: var(--teal-tint); border-radius: var(--r); padding: 13px 16px;
}
.handoff-banner__icon { color: var(--teal); }
.handoff-items { margin: 0; padding-left: 20px; }
.handoff-items li { font-size: 13px; color: var(--ink-soft); padding: 2px 0; }
.logbook-composer .lb-type {
  font-family: var(--sans); font-size: 12.5px; cursor: pointer; color: var(--faint);
  border: 1px solid var(--hairline); background: var(--surface); border-radius: var(--r-pill); padding: 5px 12px;
}
.logbook-composer .lb-type.is-on { background: var(--teal); color: var(--text-on-teal); border-color: var(--teal-deep); }
.lb-textarea {
  width: 100%; min-height: 64px; font-family: var(--sans); font-size: 14px; padding: 11px 13px; resize: vertical;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); box-sizing: border-box;
}
.lb-textarea:focus { outline: 2px solid var(--teal); outline-offset: -1px; }
.timeline { border-left: 2px solid var(--hairline); padding-left: 18px; }
.tl-item { position: relative; padding: 12px 0; border-bottom: 1px solid var(--line-faint); }
.tl-item::before {
  content: ""; position: absolute; left: -25px; top: 16px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--hairline); border: 2px solid var(--cream);
}
.tl-item--handoff::before { background: var(--teal); }
.tl-item--event::before { background: var(--red); }
.tl-meta { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.tl-time { color: var(--ink); font-weight: 600; }
.tl-type {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 1px 7px; margin-left: 6px;
}
.tl-type--handoff { color: var(--teal-deep); border-color: var(--teal-line); background: var(--teal-tint); }
.tl-type--event { color: var(--red); border-color: var(--red-line); background: var(--red-tint); }
.tl-body { font-size: 14px; color: var(--ink-soft); margin-top: 5px; }
.tl-photo {
  font-family: var(--mono); font-size: 10px; color: var(--scada);
  border: 1px solid var(--scada-line); background: var(--scada-tint); border-radius: var(--r-sm); padding: 1px 7px;
}

/* 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; }