:root{--accent:#23305E;--accent-deep:#1B2549;--accent-soft:#EEF0F7;--spark:#2A9D8F;--sun:#F4B43A;--teal:#2A9D8F;
--ink:#23305E;--ink-mid:#5A6180;--ink-soft:#6E7593;--ink-faint:#9AA2B8;
--surface:#fff;--porcelain:#FAF9F6;--porcelain-sub:#EEF0F7;
--line:#C9CEDF;--line-soft:#E4E6EE;
--ok:#1F7A6F;--warn:#8A5A00;--bad:#C8102E;
--radius:14px;--radius-sm:9px;--gap:16px;
--shadow:0 1px 2px rgba(17,24,39,.04);
--mono:ui-monospace,Consolas,monospace;--sans:system-ui,-apple-system,'Segoe UI',sans-serif;
/* Aliases for the token names the pages already use. Each page kept some
   rules of its own, and those rules say var(--card), var(--bdr), var(--p2).
   Without these they resolve to nothing and the element renders transparent —
   which is exactly how the Products and Data Log cards lost their background
   when this sheet first went in. Keep them: they cost ~180 bytes and they mean
   a page-specific rule never has to be rewritten to adopt the standard. */
--card:var(--surface);--bg:var(--porcelain);--p2:var(--porcelain-sub);
--bdr:var(--line-soft);--bdr2:var(--line);--txt:var(--ink);--sub:var(--ink-soft);
--mut:var(--ink-faint);--glow:rgba(42,157,143,.26);
--g:var(--ok);--r:var(--bad);--y:var(--warn);--b:var(--accent)}
*{box-sizing:border-box}
body{margin:0;background:var(--porcelain);color:var(--ink);font:15px/1.45 var(--sans)}
body::before{content:none}
.kc{display:none}
/* Top bar --------------------------------------------------
   Indigo, not white. The brand file puts brand-indigo on "hero panels, app
   headers and nameplates, with white or sun text on it" — so this is the
   on-brand reading, and it is what stops the page being all white and ink. */
.hdr{position:sticky;top:0;z-index:9;background:var(--accent);color:#fff;
display:flex;align-items:center;gap:14px;padding:9px 16px;min-height:60px;
flex-wrap:wrap}
.hdr img{height:26px;width:auto;display:block;flex:none}
.hdr-text h1{margin:0;font-size:14.5px;font-weight:600;letter-spacing:0;color:#fff}
.hdr-text small{font-size:12px;color:#B9C2E4;font-weight:400}
/* Nav as round pills, in the top bar. Sun for the active page: it is the one
   brand colour with the contrast to carry text on indigo (6.9:1). */
/* A burger at the far left opening a sheet. The SCADA standard already calls
   for this once a menu runs long; here it also keeps the top bar to one line on
   a phone, which a row of six pills never managed. */
.navbtn{flex:none;background:rgba(255,255,255,.14);border:0;color:#fff;
font:400 19px/1 var(--sans);padding:9px 12px;border-radius:var(--radius-sm);
cursor:pointer}
.navbtn:hover{background:rgba(255,255,255,.26)}
.nav{display:none;position:absolute;top:calc(100% - 4px);left:12px;z-index:20;
flex-direction:column;gap:2px;min-width:208px;padding:7px;
background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;
box-shadow:0 12px 32px rgba(17,24,39,.16)}
.nav.open{display:flex}
.nav a{color:var(--ink-mid);text-decoration:none;font-size:13.5px;
padding:9px 12px;border-radius:var(--radius-sm);white-space:nowrap}
.nav a:hover{background:var(--porcelain-sub);color:var(--ink)}
.nav a.active{background:var(--accent-soft);color:var(--accent-deep);font-weight:600}
/* Pills and the time bar ----------------------------------- */
.pills{display:flex;gap:7px;flex-wrap:wrap;margin-left:auto;align-items:center}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;
font-weight:550;background:var(--porcelain-sub);color:var(--ink-mid)}
.pill.ok{background:rgba(31,122,111,.11);color:var(--ok)}
.pill.warn{background:rgba(138,90,0,.11);color:var(--warn)}
.pill.err{background:rgba(200,16,46,.10);color:var(--bad)}
.pill-ip{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
/* Sits under the indigo bar, so it carries a deeper indigo rather than white —
   the two together read as one header block instead of a stripe. */
.timebar{font-size:12px;color:#C8D0EC;padding:6px 16px;
background:var(--accent-deep);display:flex;gap:9px;align-items:center}
.wrap{padding:var(--gap);max-width:1100px;margin:0 auto}
/* Cards and tiles ------------------------------------------ */
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.card{background:var(--surface);border:1px solid var(--line-soft);
border-radius:var(--radius);padding:18px 20px 16px;box-shadow:var(--shadow)}
/* A teal rule above the label. Small, but it is what stops a wall of white
   cards reading as a spreadsheet. Brand colour as an accent — never state. */
.card h3{margin:0;font-size:13.5px;font-weight:550;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
padding-top:9px;border-top:2px solid var(--teal)}
.card .val{font-size:32px;font-weight:650;margin-top:8px;font-family:var(--mono);
font-variant-numeric:tabular-nums;line-height:1.1;color:var(--accent-deep)}
.card .unit{font-size:14px;color:var(--ink-soft);font-weight:400;margin-left:3px}
/* Sparkline: the last minute of this value, drawn in the tile. 34 px with an
   8% fill, as the SCADA's dashboard tile does it. */
.spark{width:100%;height:34px;display:block;margin-top:8px}
/* The status banner ---------------------------------------- */
.banner{background:var(--surface);border:1px solid var(--line-soft);
border-radius:var(--radius);padding:16px 20px;margin-bottom:var(--gap);
box-shadow:var(--shadow);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.banner .lbl{font-size:12.5px;font-weight:500;color:var(--ink-mid)}
.banner .big{font-size:26px;font-weight:650;letter-spacing:-.01em}
.banner.on{border-color:var(--ok)}
.on{color:var(--ok)}
.off{color:var(--ink-soft)}
.alarm{color:var(--bad)}
.done{color:var(--accent-deep)}
/* Controls -------------------------------------------------- */
.ctrl{background:var(--surface);border:1px solid var(--line-soft);
border-radius:var(--radius);padding:18px 20px;margin-bottom:var(--gap);
box-shadow:var(--shadow)}
.ctrl-title{font-size:15.5px;font-weight:600;margin:0 0 12px}
.brow{display:flex;gap:9px;flex-wrap:wrap}
.btn{font:500 13.5px var(--sans);padding:8px 15px;border-radius:var(--radius-sm);
border:1px solid var(--line);background:var(--surface);color:var(--ink);
cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:var(--porcelain-sub)}
.btn:active{transform:translateY(1px)}
.b-run{background:var(--ok);border-color:var(--ok);color:#fff;font-weight:600}
.b-stop{background:var(--bad);border-color:var(--bad);color:#fff;font-weight:600}
.b-reset{color:var(--warn);border-color:var(--warn)}
.b-blue{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.b-gray{color:var(--ink-mid)}
.b-sm{padding:4px 10px;font-size:12px}
/* Progress -------------------------------------------------- */
/* The bar carries its own percentage label INSIDE it, so it needs real height
   and the flex row — at 9 px the text was clipped to a sliver. */
.prog-wrap{background:var(--porcelain-sub);border:1px solid var(--line-soft);
border-radius:999px;height:18px;overflow:hidden;margin-top:11px}
.prog-bar{background:var(--spark);height:100%;border-radius:999px;transition:width .4s;
display:flex;align-items:center;justify-content:flex-end;padding-right:7px;
font:700 11px var(--mono);color:#fff;min-width:2px}
/* Charts ---------------------------------------------------- */
.chart-box{background:var(--surface);border:1px solid var(--line-soft);
border-radius:var(--radius);padding:18px 20px;margin-bottom:var(--gap);
box-shadow:var(--shadow)}
.chart-title{font-size:15.5px;font-weight:600;margin:0 0 10px}
/* The chart canvas is sized by CSS, not by attributes. Without the height it
   collapses and the rate history renders as an empty box. */
canvas{width:100%!important;max-height:160px;display:block}
/* Sections and tables --------------------------------------- */
/* A card. Three pages already meant that by .section; only the dashboard used
   it as a bare spacer, and a card suits it there too. One meaning per name is
   the whole point of a shared sheet. */
.section{background:var(--surface);border:1px solid var(--line-soft);
border-radius:var(--radius);padding:18px 20px;margin:0 0 var(--gap);
box-shadow:var(--shadow)}
/* A table inside a card does not need its own frame as well. */
.section .tbl{border:0;border-radius:0}
.section-title{font-size:12px;text-transform:uppercase;letter-spacing:.07em;
color:var(--ink-soft);font-weight:600;margin:0 0 11px}
.tbl{width:100%;border-collapse:collapse;background:var(--surface);
border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden}
.tbl th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
color:var(--ink-soft);text-align:left;padding:10px 12px;font-weight:600}
.tbl td{padding:10px 12px;font-size:13.5px;border-top:1px solid var(--line-soft)}
.tbl tr:last-child td{border-bottom:0}
.dot-on{display:inline-block;width:8px;height:8px;border-radius:50%;
background:var(--ok);box-shadow:0 0 0 3px rgba(31,122,111,.14)}
.dot-off{display:inline-block;width:8px;height:8px;border-radius:50%;
background:var(--ink-faint);box-shadow:0 0 0 3px rgba(20,22,31,.06)}
.io-val{font-family:var(--mono);font-size:13px}
/* The running product block ---------------------------------- */
.prod-run{background:var(--surface);border:1px solid var(--line-soft);
border-radius:var(--radius);padding:18px 20px;margin-bottom:var(--gap);
box-shadow:var(--shadow)}
.pr-title{font-size:12px;text-transform:uppercase;letter-spacing:.07em;
color:var(--ink-soft);font-weight:600;margin:0 0 9px;
display:flex;gap:10px;align-items:baseline}
.pr-title a{color:var(--accent);text-decoration:none;font-size:12px;
text-transform:none;letter-spacing:0;font-weight:500}
.pr-name{font-size:19px;font-weight:650}
.pr-part{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft)}
.pr-costs{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px}
.prc{min-width:90px}
.prc-v{font-size:17px;font-weight:600;font-family:var(--mono)}
.prc-l{font-size:11.5px;color:var(--ink-soft)}
.prod-run.no-prod{border-style:dashed;background:var(--porcelain)}
.prod-run.no-prod .pr-title{color:var(--ink-faint)}
.qedit{display:flex;gap:7px;align-items:center;margin-top:11px}
.qedit input{font:14px var(--mono);padding:8px 11px;border:1px solid var(--line);
border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);width:120px}
.qedit input:focus{outline:0;border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-soft)}
/* Advisory notes --------------------------------------------- */
.note{font-size:13px;color:var(--ink-soft);margin-top:9px}
.ai-tip{background:var(--accent-soft);border:1px solid var(--line-soft);
border-radius:var(--radius-sm);padding:10px 13px;font-size:13px;margin-top:11px}
.ai-warn{background:rgba(138,90,0,.09);border:1px solid rgba(138,90,0,.25);
border-radius:var(--radius-sm);padding:10px 13px;font-size:13px;margin-top:11px;
color:var(--warn)}
/* Shared across pages ----------------------------------------
   These were defined separately on three or four pages each, which is how
   .btn-primary ended up looking different on Settings and on WiFi. One
   definition, in the standard. */
.btn-primary{background:var(--accent);border:1px solid var(--accent);color:#fff;
font:600 13.5px var(--sans);padding:8px 15px;border-radius:var(--radius-sm);
cursor:pointer;text-decoration:none;display:inline-block}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn-secondary{background:var(--surface);border:1px solid var(--line);
color:var(--ink);font:500 13.5px var(--sans);padding:8px 15px;
border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;display:inline-block}
.btn-secondary:hover{background:var(--porcelain-sub)}
.btn-danger{background:var(--bad);border:1px solid var(--bad);color:#fff;
font:600 13.5px var(--sans);padding:8px 15px;border-radius:var(--radius-sm);cursor:pointer}
.btn-sm,.b-edit,.b-del,.b-load,.b-green{font-size:12px;padding:5px 11px;
border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);
color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block}
.b-green{background:var(--ok);border-color:var(--ok);color:#fff;font-weight:600}
.b-del{color:var(--bad);border-color:var(--bad)}
.form-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.form-row>div{flex:1;min-width:180px}
.check-row{display:flex;align-items:center;gap:9px;margin:9px 0}
.check-row input[type=checkbox]{width:17px;height:17px;flex:none;accent-color:var(--accent)}
.check-row label{margin:0;font-size:13.5px;color:var(--ink)}
.tip{background:var(--accent-soft);border:1px solid var(--line-soft);
border-radius:var(--radius-sm);padding:11px 14px;font-size:13px;
color:var(--ink-mid);margin:11px 0}
.hdr h1{margin:0;font-size:14.5px;font-weight:600;color:#fff}
code{font-family:var(--mono);font-size:12.5px;background:var(--porcelain-sub);
padding:1px 5px;border-radius:4px}
.brand-mark{width:26px;height:26px;display:block;flex:none}
.credit{text-align:center;font-size:11px;color:var(--ink-mid);padding:14px 0}
@media(max-width:720px){
:root{--gap:12px}
.wrap{padding:12px}
.card .val{font-size:27px}
.banner .big{font-size:22px}
.hdr{padding:9px 12px}}

/* ── irrigate-specific ───────────────────────────────────────────────
   Zone cards, setpoint rows, the accordion and the advisory bars. These
   exist on no other product, so they stay here rather than going into
   the standard above. Everything before this line is the shared sheet. */
@keyframes kpulse{0%,100%{opacity:1}50%{opacity:.75}}
.banner.on{animation:kpulse 2s ease-in-out infinite}
.b-preset{background:#e2e8f0;color:#23305E;border:none;border-radius:7px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer;margin-right:4px}
@media(min-width:600px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border-radius:14px;padding:13px 10px;
      box-shadow:0 1px 6px rgba(0,0,0,.07);text-align:center;border:1px solid var(--bdr)}
.cg{color:var(--g)}.cr{color:var(--r)}.cb{color:var(--b)}
.cy{color:var(--y)}.cs{color:var(--sub)}
.badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;
       font-weight:700;margin-left:4px}
.b-g{background:#E8F4F2;color:#2A9D8F}
.b-b{background:#dbeafe;color:#1d4ed8}
.b-y{background:#FDF3DE;color:#92400e}
.b-r{background:#FBE8EB;color:#b91c1c}
.warn{background:#FDF3DE;border:1px solid #fde047;border-radius:8px;
      padding:10px 12px;margin:8px 0;font-size:13px;color:#78350f}
@media(max-width:440px){.form-row{grid-template-columns:1fr}}
label{display:block;font-size:12px;font-weight:600;color:#475569;
      margin-top:10px;margin-bottom:3px}
input[type=text],input[type=password],input[type=number],input[type=time],select{
  width:100%;padding:10px;border:2px solid var(--bdr);border-radius:9px;
  font-size:14px;color:var(--txt);background:#FAF9F6}
input:focus,select:focus{outline:none;border-color:#2A9D8F}
.wrn{background:#FDF3DE;border:2px solid #8A5A00;color:#78350f}
.b-mode{background:#23305E;color:#fff}
.b-fault{background:#8A5A00;color:#fff}
.sp-row{display:flex;gap:8px;margin-top:10px}
.sp-row select,.sp-row input{flex:1;padding:11px;border:2px solid var(--bdr);
  border-radius:10px;font-size:14px;background:var(--bg);color:var(--txt)}
.sp-row select:focus,.sp-row input:focus{outline:none;border-color:#2A9D8F}
.b-sp{background:#2A9D8F;color:#fff;border-radius:10px;border:none;
      padding:11px 16px;font-size:14px;font-weight:700;cursor:pointer}
.b-sp-r{background:#C8102E;color:#fff;border-radius:10px;border:none;
        padding:11px 16px;font-size:14px;font-weight:700;cursor:pointer}
.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;
          margin-right:5px;vertical-align:middle}
.dot-na{background:#9AA2B8}.dot-warn{background:#8A5A00}
.zone-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:10px}
@media(min-width:480px){.zone-grid{grid-template-columns:repeat(4,1fr)}}
.zcard{background:var(--card);border-radius:14px;padding:12px 8px;text-align:center;
       border:2px solid var(--bdr);box-shadow:0 1px 6px rgba(0,0,0,.07);transition:.3s}
.zcard.zactive{border-color:#1F7A6F;background:#E8F4F2}
.zcard h4{font-size:10px;font-weight:700;color:var(--sub);text-transform:uppercase;
          letter-spacing:.6px;margin-bottom:4px}
.zcard .zval{font-size:16px;font-weight:900;margin-bottom:2px}
.zcard .zsub{font-size:10px;color:var(--sub)}
.zcard .ztmr{font-size:11px;color:#1F7A6F;font-weight:700;margin-top:3px;min-height:14px}
.info-bar{border-radius:10px;padding:8px 12px;margin-bottom:10px;
          font-size:13px;font-weight:600;display:none}
.rain-bar{background:#EEF0F7;border:1px solid #bfdbfe;color:#1d4ed8}
.fault-bar{background:#FDF3DE;border:1px solid #fde047;color:#78350f}

h3{font-size:13px;font-weight:700;color:#23305E;margin:12px 0 6px}
p{font-size:14px;color:#475569;line-height:1.65;margin-bottom:8px}
ul,ol{padding-left:20px;margin-bottom:8px}
li{font-size:14px;color:#475569;line-height:1.7}
.contact{background:linear-gradient(135deg,#14532d,#2A9D8F);color:#fff;
         border-radius:14px;padding:20px;text-align:center;margin-bottom:14px}
.contact h2{color:#fff;border-bottom:1px solid rgba(255,255,255,.2);
            font-size:16px;margin-bottom:12px;padding-bottom:10px}
.contact a{color:#86efac;font-weight:700;text-decoration:none;font-size:15px;display:block;margin:6px 0}
.contact .sub{font-size:12px;opacity:.75;margin-top:10px}
.acc{background:var(--card);border:1px solid var(--bdr);border-radius:12px;margin-bottom:8px;overflow:hidden}
.acc-hdr{padding:12px 14px;font-size:13px;font-weight:700;color:#23305E;cursor:pointer;
         display:flex;justify-content:space-between;align-items:center;
         background:#FAF9F6;border-bottom:1px solid var(--bdr)}
.acc-hdr:hover{background:#FAF9F6}
.acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 14px}
.acc-body.open{max-height:600px;padding:12px 14px}
.chev{transition:transform .3s;display:inline-block}
.chev.open{transform:rotate(180deg)}