/* ==========================================================================
   Membrane-module page (/agri) -- layout only. Colours, radii and the shared
   components (.btn, .toast, .run-pill, .topbar) come from app.css.

   The look is an instrument panel: one neutral line weight for the process,
   one typeface for numbers, and colour reserved for STATE -- recording,
   offline, flowing -- never for decoration.

   The schematic is drawn in a 1600 x 900 design grid. .ag-stage is a size
   container, and --u is one design pixel, so every length below is written
   in design pixels (calc(var(--u) * N)) and the whole panel scales as one.
   ========================================================================== */

.ag-body{
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ag-topbar-row{ padding-bottom: 10px; max-width: none; }
.ag-topbar-row .brand{ overflow: hidden; flex: 0 1 auto; }
@media (max-width: 760px){ .ag-topbar-row .clock, .ag-topbar-row .node-badge{ display: none; } }

.ag-main{
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 14px 8px;
  display: flex;
}
.ag-fit{
  flex: 1 1 auto;
  min-width: 0; min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
}
.ag-stage{
  position: relative;
  width: min(100cqw, calc(100cqh * 16 / 9));
  aspect-ratio: 16 / 9;
  container-type: size;
  --u: calc(100cqw / 1600);
}

/* --------------------------------------------------------- schematic --- */

.ag-svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.ag-pipe{
  fill: none; stroke: var(--text-dim); stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.ag-arrowhead{ fill: var(--text-dim); }
/* a second, dashed stroke over the permeate line that moves only when the
   flow meter really reads a flow -- motion as a fact, not as decoration */
.ag-pipe-live{
  stroke: var(--accent); stroke-width: 3.5; stroke-dasharray: 2 26;
  opacity: 0; transition: opacity .4s;
}
.ag-pipe-live.on{ opacity: .9; animation: ag-flow 1.1s linear infinite; }
@keyframes ag-flow{ to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce){ .ag-pipe-live.on{ animation: none; } }

.ag-vessel{ fill: var(--panel); stroke: var(--text-dim); stroke-width: 2.5; }
.ag-perm-side{ fill: url(#agHatch); }
.ag-hatch{ stroke: var(--border-2); stroke-width: 2; }
.ag-membrane{ fill: var(--text); }
.ag-inner-flow{ fill: none; stroke: var(--border-2); stroke-width: 2; stroke-dasharray: 22 14; }
.ag-machine{ fill: var(--panel); stroke: var(--text-dim); stroke-width: 2.5; transition: stroke .3s; }
.ag-machine.running{ stroke: var(--accent); }
.ag-pump-btn{
  position: absolute;
  left: calc(var(--u) * var(--x)); top: calc(var(--u) * var(--y)); width: calc(var(--u) * var(--w));
  min-height: 0; padding: calc(var(--u) * 7) 0;
  font-size: calc(var(--u) * 15); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ag-fan path{ fill: var(--text-faint); }
.ag-fan circle{ fill: var(--text-dim); }
.ag-pump-mark{ fill: none; stroke: var(--text-dim); stroke-width: 2.5; stroke-linejoin: round; }

.ag-svg text{ font-family: var(--font); }
.ag-unit{ font-size: 17px; font-weight: 700; letter-spacing: .14em; fill: var(--text); }
.ag-unit-sub{ font-size: 15px; fill: var(--text-faint); letter-spacing: .02em; }
.ag-stream{ font-size: 17px; font-weight: 700; letter-spacing: .14em; fill: var(--text-dim); }
.ag-stream-sub{ font-size: 15px; fill: var(--text-faint); letter-spacing: .04em; }
.ag-inner{ font-size: 14px; fill: var(--text-faint); letter-spacing: .04em; }

.ag-tap path{ fill: none; stroke: var(--border-2); stroke-width: 2; stroke-dasharray: 4 5; }
.ag-tap circle{ fill: var(--bg); stroke: var(--border-2); stroke-width: 2.5; }
.ag-tap.on path{ stroke: var(--text-dim); stroke-dasharray: none; }
.ag-tap.on circle{ fill: var(--text); stroke: var(--text); }
.ag-tap:not(.on) path{ opacity: .5; }

/* ----------------------------------------------------- readout cards --- */

.ag-card{
  position: absolute;
  left: calc(var(--u) * var(--x));
  top: calc(var(--u) * var(--y));
  width: calc(var(--u) * var(--w));
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: calc(var(--u) * 6);
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 22) rgba(0,0,0,.28);
  padding: calc(var(--u) * 10) calc(var(--u) * 14) calc(var(--u) * 10);
}
.ag-card.ag-card-up{ top: auto; bottom: calc(100% - var(--u) * var(--yb)); }
.ag-card:empty{ display: none; }

.ag-card-h{
  display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 8);
  font-size: calc(var(--u) * 14); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: calc(var(--u) * 6);
  margin-bottom: calc(var(--u) * 4);
  border-bottom: 1px solid var(--border);
}
.ag-card-h small{ font-size: calc(var(--u) * 13); font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--text-faint); }

.ag-row{
  display: grid;
  grid-template-columns: calc(var(--u) * 44) 1fr auto;
  align-items: baseline;
  column-gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 3) 0;
}
.ag-row + .ag-src{ margin-bottom: calc(var(--u) * 5); }
.ag-q{ font-size: calc(var(--u) * 16); font-weight: 600; color: var(--text-dim); }
.ag-unit-txt{ font-size: calc(var(--u) * 15); color: var(--text-faint); min-width: calc(var(--u) * 38); }

/* the number itself is the button: click it for the graph */
.ag-val{
  appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  justify-self: end;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: calc(var(--u) * 34); font-weight: 600; line-height: 1.05; letter-spacing: -.01em;
  color: var(--val, var(--text));
  border-bottom: calc(var(--u) * 2) solid transparent;
  transition: color .15s, border-color .15s;
}
.ag-val:hover, .ag-val:focus-visible{ color: var(--accent); border-bottom-color: var(--accent); outline: none; }
.ag-val.sm{ font-size: calc(var(--u) * 26); }
.ag-row.dh{ --val: var(--blue); }          /* Data Harvest units */
#card-perm .ag-row{ --val: var(--red); }     /* permeate red, feed blue: PF at a glance */
.ag-row.off .ag-val{ color: var(--text-faint); }

.ag-pair{ display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 12); }
.ag-pair .ag-row{ grid-template-columns: calc(var(--u) * 30) 1fr auto; }
.ag-pair .ag-unit-txt{ min-width: 0; }
/* Data Harvest pressure under its RH/T pair: same left column as RH */
.ag-row.ag-prow{ grid-template-columns: calc(var(--u) * 30) auto 1fr; }
.ag-row.ag-prow .ag-val{ justify-self: start; }

.ag-src{
  display: flex; align-items: center; gap: calc(var(--u) * 6);
  font-size: calc(var(--u) * 13.5); color: var(--text-faint); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ag-src .rec{ width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--red); flex: 0 0 auto; }
.ag-src .warn{ color: var(--amber); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ag-sep{ height: 1px; background: var(--border); margin: calc(var(--u) * 6) 0; }

.ag-derived .ag-row{ grid-template-columns: 1fr auto auto; }
.ag-dcols{ display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--u) * 28); }
.ag-dcols > div:empty{ display: none; }
.ag-derived .ag-q{ font-weight: 500; }
.ag-derived .ag-val{ font-size: calc(var(--u) * 28); cursor: default; }
.ag-derived .ag-val:hover{ color: var(--val, var(--text)); border-bottom-color: transparent; }
.ag-derived .ag-val.click{ cursor: pointer; }
.ag-derived .ag-val.click:hover{ color: var(--accent); border-bottom-color: var(--accent); }
.ag-stats .perm b{ color: var(--red); }
.ag-stats .feed b{ color: var(--blue); }
.ag-derived .ag-src{ white-space: normal; }

.ag-empty{
  position: absolute; left: 24%; top: 74%; transform: translate(-50%, -50%);
  width: min(86%, 460px);
  background: var(--panel); border: 1px dashed var(--border-2); border-radius: 10px;
  padding: 18px 20px; text-align: center;
}
.ag-empty-t{ font-weight: 700; font-size: 15px; }
.ag-empty-s{ color: var(--text-dim); font-size: 13px; margin: 6px 0 14px; }

/* ----------------------------------------------------------- run bar --- */

.ag-bar{
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--panel-2);
}
.ag-bar-fields{ display: flex; gap: 10px; align-items: flex-end; flex: 1 1 360px; min-width: 0; }
.ag-field{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ag-field-grow{ flex: 1 1 160px; max-width: 320px; }
.ag-field > span{
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint);
  white-space: nowrap;
}
.ag-field input, .ag-field select{
  height: 40px; padding: 0 10px; min-width: 0; width: 100%;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  font: inherit; font-size: 14px;
}
.ag-field input:focus, .ag-field select:focus{ outline: none; border-color: var(--accent); }
.ag-bar-fields.locked{ opacity: .45; pointer-events: none; }

.ag-bar-status{
  flex: 1 1 220px; min-width: 0;
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ag-bar-status b{ color: var(--text); font-weight: 600; }
.ag-bar-status .rec{ color: var(--red); font-weight: 700; letter-spacing: .08em; }
.ag-bar-status .paused{ color: var(--amber); font-weight: 700; letter-spacing: .08em; }
.ag-bar-actions{ display: flex; gap: 10px; }
.ag-big{ min-width: 124px; min-height: 48px; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }

/* ------------------------------------------------- chart + setup panes --- */

.ag-overlay{
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4, 8, 14, .62);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
#setupOverlay{ justify-content: flex-end; padding: 0; }

.ag-modal{
  width: min(1180px, 100%); height: min(720px, 100%);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  padding: 14px 16px 12px;
}
.ag-modal-head{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ag-modal-title{ flex: 1 1 220px; min-width: 0; }
.ag-modal-t{ font-size: 16px; font-weight: 700; letter-spacing: .02em; }
.ag-modal-s{ font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.ag-chips{ display: flex; gap: 6px; flex-wrap: wrap; }
.ag-chip{
  appearance: none; cursor: pointer;
  height: 32px; padding: 0 12px; border-radius: 999px;
  background: transparent; color: var(--text-dim); border: 1px solid var(--border-2);
  font: inherit; font-size: 12.5px; font-weight: 600;
}
.ag-chip:hover{ color: var(--text); }
.ag-chip.active{ background: var(--text); color: var(--bg); border-color: var(--text); }
.ag-chip:disabled{ opacity: .35; cursor: not-allowed; }
.ag-check{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; }

.ag-stats{
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  margin: 12px 0 8px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2);
  font-size: 12px; color: var(--text-faint); letter-spacing: .06em; text-transform: uppercase;
}
.ag-stats b{
  display: block; margin-top: 2px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text);
}
.ag-chart-box{ flex: 1 1 auto; min-height: 0; position: relative; }
.ag-chart-box canvas{ position: absolute; inset: 0; }

.ag-drawer{
  width: min(520px, 100%); height: 100%;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border-left: 1px solid var(--border-2);
  padding: 16px 18px 14px;
}
.ag-setup{ flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 12px -4px 0; padding: 0 4px; }
.ag-setup-lock{
  margin-top: 12px; padding: 9px 12px; border-radius: 8px; font-size: 12.5px;
  border: 1px solid var(--pill-warm-border); background: var(--pill-warm-bg); color: var(--amber);
}
.ag-group-h{
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim);
  margin: 16px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
.ag-group-h:first-child{ margin-top: 0; }
.ag-slot{ display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px; padding: 7px 0; }
.ag-slot-n{ font-size: 13px; font-weight: 600; color: var(--text-dim); padding-top: 7px; }
.ag-opts{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ag-opt{
  display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 7px; cursor: pointer; min-width: 0;
}
.ag-opt:hover{ border-color: var(--border-2); background: var(--panel-hover); }
.ag-opt.sel{ border-color: var(--text-dim); background: var(--panel-hover); }
.ag-opt.gone{ opacity: .6; }
.ag-opt input{ flex: 0 0 auto; accent-color: var(--accent); width: 16px; height: 16px; }
.ag-opt-n{ flex: 1 1 auto; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-opt-v{ flex: 0 0 auto; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-dim); }
.ag-none{ font-size: 12.5px; color: var(--text-faint); padding: 8px 0; }
.ag-drawer-foot{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); }

@media (max-width: 720px){
  .ag-bar-status{ flex-basis: 100%; order: 3; }
  .ag-big{ min-width: 0; flex: 1; }
  .ag-bar-actions{ flex: 1 1 100%; }
}

/* pump timer in the run status line, beside the run timer */
.pump-t{ color: var(--green); }
/* pump state + its own timer under the pump symbol: readable across the bench */
#pumpState{ font-family: var(--mono); font-size: 19px; font-weight: 600; fill: var(--text); letter-spacing: 0; }

/* a run started without a label: say so, it is easy to miss */
#runStatus .nolabel{ color: var(--amber); font-weight: 700; }
#runStatus .runlabel{ color: var(--text); }

/* balance box: PF in permeate red, a dotted underline says "click me" */
.ag-derived .ag-row.pf{ --val: var(--red); }
.ag-derived .ag-q small{ font-size: .78em; font-weight: 500; color: var(--text-faint); margin-left: .3em; }
.ag-derived .ag-val.click{ border-bottom: calc(var(--u) * 2) dotted var(--red); }
#card-perm .ag-row.co2out .ag-val{ cursor: default; }
#card-perm .ag-row.co2out .ag-val:hover{ color: var(--val); border-bottom-color: transparent; }
#card-perm .ag-row.co2out .ag-q{ white-space: nowrap; }

/* ---- public read-only view (viewer.py sets window.PILAB_VIEW_ONLY) ---- */
.view-only #setupBtn, .view-only .ag-topbar-row a.btn, .view-only #emptySetupBtn,
.view-only #runFields, .view-only .ag-bar-actions, .view-only #pumpBtn,
.view-only #setupOverlay{ display: none !important; }
.view-only .ag-bar{ justify-content: center; }
.view-badge{
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); border: 1px solid currentColor; border-radius: 999px; padding: 3px 10px;
  white-space: nowrap;
}