/* Colours and control groupings from CodexApp.mtd / TouchMon.mtd. */
:root{--line:#000;--muted:#333;color:#000;background:#ff0;font-size:16px}
body{background:#ff0;color:#000}
body[data-screen=monitor]{background:#00e6e6}
button,input,select{border-radius:0;border:2px solid #000}
button{font-weight:400;color:#000;background:#c0c0c0;min-height:48px;font-size:18px}
button:hover{filter:brightness(.93);background:inherit}
button:disabled{opacity:.55}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f0f;outline-offset:2px}
header{background:#ff0;border-bottom:3px solid #000;min-height:70px;padding:6px 20px}
.brand{gap:14px}.brand img{width:120px;height:48px;background:#fff}.brand span{color:#000;border-color:#000;padding-left:14px}
.connection{color:#000}.connection button{min-height:36px;font-size:14px;padding:4px 12px}
#mode{background:#000;color:#ff0;border-radius:0;padding:4px 10px}
#connection{color:#900;font-weight:bold}#connection.online{color:#005000}
nav{background:#000;padding:0;justify-content:center;border-bottom:0}
nav button{color:#fff;min-height:44px;border:0;border-bottom:4px solid transparent;font-size:14px;padding:10px 15px}
nav button:hover{background:#333}
nav button[aria-current=page]{background:#ff0;color:#000;border-color:#000}
body[data-screen=monitor] nav button[aria-current=page]{background:#00e6e6}
main{max-width:800px;min-height:calc(100vh - 170px);padding:14px 18px 26px}
.page-heading{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px;margin-bottom:8px;align-items:stretch}
.app-title{font-size:23px;font-weight:400;margin:0;text-align:center;padding:6px;background:#ff0}
h1{font-size:26px;font-weight:400;line-height:1.25;text-align:center;background:#000;color:#ff0;padding:8px}
#refresh{width:48px;height:auto;min-height:48px;background:#c0c0c0;border:2px solid #000}
.status-strip{margin:0;padding:8px;text-align:center;background:#ff0;font-size:17px;overflow-wrap:anywhere}
#message{margin:8px 0;padding:10px;border:2px solid #000;border-left:8px solid #008000;background:#fff;color:#000}
#message.error{background:#fff;color:#900;border-color:#c00}
.home-dashboard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;background:#ff0;padding:6px 0 10px}
.home-dashboard>div{text-align:center;padding:12px 8px;font-size:18px;overflow-wrap:anywhere;min-width:0}
.home-dashboard>button{text-align:center;padding:12px 8px;font-size:18px;border:0;overflow-wrap:anywhere;min-width:0}
.home-site{grid-column:1/-1;background:#ff8000}
.home-next{grid-column:1/-1;background:#0ff}
.home-day,.home-clock{background:#008000;color:#fff}
.home-rain{grid-column:1/-1;background:#008080;color:#fff}
.home-pump,.home-irrigation{background:#ff0}
.home-buttons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;background:#000;padding:8px}
.home-buttons button{min-height:76px;font-size:24px;padding:12px 8px;border:0;overflow-wrap:anywhere}
.home-buttons #suspend{grid-column:1/-1;background:#ff8000;color:#fff;min-height:62px;font-size:23px}
.home-buttons .manual-link{background:#0ff;color:#000}
.home-buttons .programs-link{background:#f00;color:#fff}
.home-buttons .starts-link{background:#ff0;color:#000}
.home-buttons .stations-link{background:#008000;color:#fff}
.home-buttons .system-link{grid-column:1/-1;background:#00f;color:#c0c0c0;min-height:56px}
.home-buttons .settings-link{grid-column:1/-1;background:#0ff;min-height:56px}
.quit-link,.home-buttons .quit-link{background:#c0c0c0;color:#000}
.home-buttons .quit-link{grid-column:1/-1;min-height:50px;font-size:21px}
#hmi-status{grid-column:1/-1;background:#000;color:#c0c0c0;text-align:center;font-size:16px;margin:0;padding:4px;overflow-wrap:anywhere}
.technical{margin-top:14px}.technical summary{cursor:pointer;padding:8px 0;font-size:14px}
.section-title{margin:20px 0 10px}h2{font-size:21px;font-weight:400}.section-title>span,.muted{color:#000}
.details{border-top:2px solid #000}.details dt,.details dd{border-bottom:1px solid #000;font-size:16px}
.details dt{background:#ff0;color:#000}.details dd{background:#c0c0c0;color:#000}
.record-toolbar{border:0;padding:10px 0;gap:10px;align-items:end}
.record-toolbar label{font-size:22px;width:140px;flex:1;max-width:220px;font-weight:400}
.record-toolbar input{font-size:25px;text-align:center;background:#ff0;border:2px solid #000;min-height:48px}
.record-toolbar button{background:#c0c0c0;color:#00f}
.record-navigation{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:8px 0 18px}
.record-navigation button{background:#00f;color:#c0c0c0;min-height:64px;font-size:24px}
.record-navigation .secondary-step{background:#c0c0c0;color:#00f}
.record-form{margin-top:0}.field-row{border:0;padding:6px 0;gap:10px;grid-template-columns:minmax(100px,1fr) minmax(120px,1.4fr) 75px}
.record-active{display:flex;align-items:center;gap:12px;font-size:22px;margin:10px 0}.record-active input,.check-list input{width:24px;height:24px;min-height:0;accent-color:#008000}.record-caption{margin:8px 0}.field-row:has(input[readonly]){grid-template-columns:minmax(100px,1fr) minmax(120px,1.4fr) 75px}.record-form[aria-busy=true]{opacity:.5}.zone-filter{margin:12px 0}.zone-filter summary{padding:12px;background:#00f;color:#c0c0c0;cursor:pointer;font-size:22px}.check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px 0}.check-list label{display:flex;align-items:center;gap:8px;font-weight:400}.check-list input{flex-shrink:0}#system-data h2{margin:20px 0 10px}
.field-row label{font-size:18px;font-weight:400}.field-row input{background:#0ff;text-align:center;font-size:20px;min-height:46px}.field-row input[readonly]{background:#c0c0c0}
.field-row button{background:#00f;color:#fff;width:75px;min-height:46px;font-size:16px}
.inline-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 10px;border:0;padding:12px 0}
.inline-form label{width:auto;max-width:none;font-size:17px;font-weight:400}.inline-form select,.inline-form input{background:#0ff;font-size:21px;text-align:center;min-height:54px}
.manual-actions{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.manual-actions button{min-height:76px;font-size:26px;padding:10px 6px}
.manual-actions .danger{background:#f00;color:#000}.manual-actions button[type=submit]{background:#008000;color:#fff}
.command-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:12px 0}
.command-bar button{background:#00f;color:#fff;min-height:56px}
th{background:#ff0;color:#000;font-size:16px;font-weight:400}td{background:#ff0;font-size:17px}th,td{border:1px solid #000;padding:10px}.empty{border-color:#000;color:#000}
.table-wrap button{background:#f00;color:#000;border-color:#000}
body[data-screen=monitor] .app-title{background:#000;color:#0ff;font-size:32px}
body[data-screen=monitor] h1{background:#000;color:#0ff;font-size:32px}
body[data-screen=monitor] h1{display:none}
.monitor-host{text-align:center;background:#000;color:#ff0;margin:0 0 12px;padding:8px;font-size:17px;overflow-wrap:anywhere}
.remote{display:block;padding:0}.remote>div:first-child{margin-bottom:12px}
.lcd{background:#cfe7aa;border:6px solid #000;min-height:156px;max-width:none;padding:14px}
.lcd pre{font-size:20px;line-height:1.5;white-space:pre;overflow:auto;font-family:Consolas,monospace}
.remote img{display:block;width:100%;height:auto;max-height:280px;object-fit:contain;border:4px solid #000}
.keypad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:none;margin:0}
.keypad button{background:#80ffff;color:#000;min-height:62px;font-size:23px;border:2px solid #000}
.keypad [data-key="10"]{grid-column:1/3;grid-row:1}.keypad [data-key="15"]{grid-column:3/5;grid-row:1}
.keypad [data-key="11"]{grid-column:2/4;grid-row:2}.keypad [data-key="17"]{grid-column:1/3;grid-row:3}.keypad [data-key="16"]{grid-column:3/5;grid-row:3}
.keypad [data-key="14"]{grid-column:2/4;grid-row:4}.keypad [data-key="12"]{grid-column:1/3;grid-row:5}.keypad [data-key="13"]{grid-column:3/5;grid-row:5}
.monitor-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}.monitor-actions button{min-height:60px;font-size:19px;background:#80ffff;padding:8px}
.monitor-actions [data-key="99"]{background:#000;color:#ff0}.monitor-actions .quit-link{background:#c0c0c0}
#lcd-time{text-align:center}
footer{background:#000;color:#ff0;border:0;padding:12px 18px}
dialog{background:#ff0;color:#000;border:3px solid #000;border-radius:0}.dialog-actions .danger{background:#f00;color:#fff;border-color:#000}
#login{margin-top:40px}#login h1{font-size:26px}#login button{background:#008000;color:#fff}
#login{max-width:560px;margin:24px auto;padding:0 16px}#login form{gap:16px}#login .app-title{font-size:22px;padding:0}#login label{font-size:18px;font-weight:400}#login input:not([type=checkbox]){background:#0ff;min-height:48px;font-size:20px}#login .check-label{display:flex;align-items:center;gap:12px}#login input[type=checkbox]{width:24px;height:24px;min-height:0;accent-color:#008000}.setup-actions{display:flex;flex-wrap:wrap;gap:10px}.setup-actions button{flex:1;min-width:100px;min-height:52px}#login #demo-button{background:#00f;color:#fff}#login #setup-cancel{background:#c0c0c0;color:#000}#login-error{margin:0;color:#900;overflow-wrap:anywhere;font-size:16px}
@media(max-width:700px){header{padding:6px 10px}.brand img{width:100px;height:40px}.connection{font-size:11px;gap:6px}nav{justify-content:flex-start}nav button{font-size:13px;min-height:42px;padding:9px 12px}main{padding:10px 10px 22px}.app-title{font-size:20px;padding:6px 2px}h1{font-size:23px;padding:8px 4px}.home-dashboard>div{font-size:16px;padding:10px 6px}.home-buttons button{font-size:23px;min-height:68px}.home-buttons #suspend{font-size:20px}.details dt,.details dd{font-size:14px}.field-row{grid-template-columns:minmax(82px,1fr) minmax(100px,1.3fr) 58px;gap:7px}.field-row label{font-size:16px}.field-row input{font-size:18px;padding:6px;min-width:0}.field-row button{width:58px;font-size:14px;padding:6px}.record-navigation button{font-size:21px;min-height:58px}.inline-form label{font-size:15px;min-width:0}.inline-form input,.inline-form select{font-size:18px}.manual-actions button{font-size:22px;overflow-wrap:anywhere}.record-toolbar label{font-size:20px;min-width:90px;max-width:130px}.record-toolbar button{font-size:15px;padding:8px}.lcd pre{font-size:16px}.lcd{padding:10px;min-height:132px}.keypad button{font-size:21px;min-height:56px}.monitor-actions button{font-size:17px;overflow-wrap:anywhere;min-height:56px}body[data-screen=monitor] .app-title,body[data-screen=monitor] h1{font-size:26px}.monitor-host{font-size:15px}.section-title{gap:8px}footer{font-size:11px;padding:10px}.home-clock{font-size:15px!important}}