/* One-page plant view (#/plant, js/plant.js): the treatment train left to right on a wide screen,
   top to bottom on a phone. Uses the tokens of app.css; no new colours. */

.plant{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:4px 2px 10px;
  -webkit-overflow-scrolling:touch}
.pblk{flex:1 1 0;min-width:132px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 11px 11px;display:flex;flex-direction:column;gap:7px;position:relative;
  box-shadow:inset 0 3px 0 var(--offline)}
.pblk.ok{box-shadow:inset 0 3px 0 var(--good)}
.pblk.warning{box-shadow:inset 0 3px 0 var(--warn);border-color:rgba(233,178,60,.45)}
.pblk.fault{box-shadow:inset 0 3px 0 var(--fault);border-color:rgba(224,86,86,.55);background:linear-gradient(180deg,var(--fault-soft),var(--panel-2) 60%)}
.pblk.offline{box-shadow:inset 0 3px 0 var(--offline);opacity:.8}
.pblk.off{box-shadow:none;border-style:dashed;opacity:.6}

.phd{display:flex;align-items:center;gap:8px;min-width:0}
.pico{width:28px;height:28px;flex:0 0 auto;color:var(--accent)}
.pblk.warning .pico{color:var(--warn)}
.pblk.fault .pico{color:var(--fault)}
.pblk.offline .pico,.pblk.off .pico{color:var(--ink-dim)}
.pttl{min-width:0}
.pti{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.psrc{font-size:10.5px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pblk .chip{align-self:flex-start;font-size:9.5px;padding:3px 8px}

.pmain b{font-family:var(--disp);font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.pmain small{font-size:12px;color:var(--ink-mut);margin-left:3px}
.pmain .plbl{font-size:10.5px;color:var(--ink-dim);letter-spacing:.04em}
.pmain.nf b{font-size:14px;color:var(--ink-dim);font-weight:500;letter-spacing:.06em}

.plines{margin:0;display:flex;flex-direction:column;gap:2px;font-size:11.5px}
.plines div{display:flex;justify-content:space-between;gap:6px;border-top:1px solid var(--line-soft);padding-top:2px}
.plines dt{color:var(--ink-mut)}
.plines dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.plines dd span{color:var(--ink-dim)}
.plines .pfault dd{color:var(--warn)}

.palarms{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:11px}
.palarms li{border-radius:6px;padding:3px 6px;background:var(--warn-soft);color:var(--warn)}
.palarms li.red{background:var(--fault-soft);color:var(--fault)}
.palarms li.more{background:none;color:var(--ink-dim)}
.palarms .sev{font-family:var(--disp);font-size:9.5px;letter-spacing:.1em;font-weight:600}

/* The pipe between two blocks. Grey when nothing is moving; the water colour, with a slow flow,
   while the pump runs or water flows. */
.ppipe{flex:0 0 22px;position:relative;display:flex;align-items:center;justify-content:center}
.ppipe svg{display:block}
.ppipe .ph{width:100%;height:16px}
.ppipe .pv{display:none}
.ppipe .pa{position:absolute;width:10px;height:10px;fill:var(--offline)}
.ppipe .pc{stroke:var(--line);stroke-width:7;fill:none}
.ppipe .pf{stroke:var(--offline);stroke-width:3;fill:none;stroke-dasharray:4 4}
.ppipe.on .pf{stroke:var(--accent);animation:pflow 1.2s linear infinite}
.ppipe.on .pa{fill:var(--accent)}
@keyframes pflow{to{stroke-dashoffset:-8}}
@media (prefers-reduced-motion:reduce){.ppipe.on .pf{animation:none}}

.plegend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:11.5px;color:var(--ink-mut)}
.plegend .dim{margin-left:auto}
.plegend a{color:var(--accent)}
.pdot{display:inline-block;width:9px;height:9px;border-radius:3px;background:var(--offline);vertical-align:-1px}
.pdot.ok{background:var(--good)}.pdot.warning{background:var(--warn)}.pdot.fault{background:var(--fault)}
.pdot.off{background:none;border:1px dashed var(--ink-dim)}

/* A phone: the train runs downwards, one block per row, the pipes vertical. */
@media(max-width:760px){
  .plant{flex-direction:column;overflow-x:visible}
  .pblk{min-width:0;flex:0 0 auto}
  .ppipe{flex:0 0 20px}
  .ppipe .ph{display:none}
  .ppipe .pv{display:block;width:16px;height:100%}
  .ppipe .pa{transform:rotate(90deg)}
  .plegend .dim{margin-left:0;width:100%}
}

/* All sites (#/programme and #/fleet, js/programme.js; console review 7 Nov 2026). Kept here, beside the other
   status page's styles, so the page is styled without touching app.css; the tokens are app.css's. */
/* The count tiles are the state filter: a button that looks like the tile, and shows when it is the one chosen. */
button.kpibtn{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;min-height:44px}
button.kpibtn:hover{border-color:var(--accent)}
button.kpibtn[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
/* Sortable column headings: a heading that is a button, with no button chrome. */
.prog-table th button.sortbtn{background:none;border:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;
  text-transform:inherit;cursor:pointer;text-align:left}
.prog-table th button.sortbtn:hover{color:var(--accent)}
/* A row opens its site on one click. */
tr.prog-row td[data-prog-go]{cursor:pointer}
/* Re-test 8 Nov 2026: at 1440 px the site name wrapped over 3-5 lines and Schedule ran off the right edge. The site
   keeps a readable width, Why takes what is left, and a chip never breaks over two lines. */
.prog-table td[data-label="Site"]{min-width:170px}
.prog-table td.prog-why{min-width:200px;max-width:340px}
.prog-table td.prog-sched .chip,.prog-table td[data-label="Open alarms"] .chip{white-space:nowrap}
/* Wherever the table is cards (app.css: up to 920 px) a cell with nothing to say is left off the card. */
@media(max-width:920px){
  table.cards.prog-table td.prog-quiet{display:none}
  .prog-table td.prog-why,.prog-table td[data-label="Site"]{min-width:0;max-width:none}
}
@media(max-width:620px){
  /* The count tiles: three to a row, the words left to the State filter, so the first screen shows sites. */
  .kpis.progtiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .kpis.progtiles .kpi{padding:6px 8px}
  .kpis.progtiles .kpi .num{font-size:17px;margin-top:2px}
  .kpis.progtiles .kpi .sub{display:none}
  /* A site's card on a phone: two fields a line, Site and Why across. */
  table.cards.prog-table tr.prog-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px}
  table.cards.prog-table tr.prog-row td{width:auto}
  table.cards.prog-table tr.prog-row td[data-label="Site"],table.cards.prog-table tr.prog-row td.prog-why{grid-column:1 / -1}
}

/* Events on a tablet (re-test 8 Nov 2026, N09-056): app.css draws every table.cards as cards up to 920 px now, the
   events table included (class "cards ev-table"). The genuine / false buttons and their Undo: big enough to tap
   (44 px on a touch screen). */
.ev-judge .btn{min-height:36px}
.ev-judge .linkbtn{padding:6px 4px}
@media(pointer:coarse){.ev-judge .btn,.ev-judge .linkbtn,.ev-ack{min-height:44px}}

/* Overview: a reading with no status of its own is a grey ring, a reading outside its good range amber. */
.chan .qd.warn{background:var(--warn)}