:root{font-family:Segoe UI,Arial,sans-serif;color:#202b39;background:#f3f5f7;font-size:15px;line-height:1.5}*{box-sizing:border-box}body{margin:0}header{background:#182735;color:#fff;padding:18px 32px;display:flex;gap:32px;align-items:center}header a{color:#fff;text-decoration:none}.brand{font-weight:600;font-size:20px}nav{display:flex;gap:22px;flex:1;flex-wrap:wrap}main{max-width:1440px;margin:30px auto;padding:0 28px;min-height:75vh}footer{padding:22px 32px;color:#687481;border-top:1px solid #d5dce3}h1{font-size:28px;margin:0 0 10px;font-weight:600}h2{font-size:20px;margin:0 0 16px}h3{font-size:17px;margin:0 0 12px}p{margin:8px 0 18px}.muted,small{color:#596879}section,.panel{background:white;border:1px solid #d5dce3;padding:22px;margin:20px 0}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:18px}.grid>.panel{margin:0}.row{display:flex;gap:14px;align-items:end;flex-wrap:wrap}.row>label{flex:1;min-width:135px}label{display:block;font-size:14px;margin:8px 0}input,select,button{font:inherit;border:1px solid #a8b4c0;border-radius:2px;padding:9px 11px}input,select{display:block;width:100%;background:white;color:#202b39;margin-top:4px}input[type=checkbox]{width:auto;display:inline;margin:0 7px 0 0}button,.button{cursor:pointer;background:#fff;color:#263c53;font-weight:600;text-decoration:none;display:inline-block;padding:9px 15px;border:1px solid #a8b4c0;border-radius:2px}button:hover,.button:hover{background:#eaf0f5}button.primary,.button.primary{background:#244f73;border-color:#244f73;color:#fff}button:disabled{opacity:.45;cursor:default}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}a{color:#205d88}table{border-collapse:collapse;width:100%;background:#fff}th,td{text-align:left;padding:11px 12px;border-bottom:1px solid #dce2e7;vertical-align:middle}th{font-size:13px;background:#edf1f5;font-weight:600}.table-wrap{overflow:auto}td input{min-width:75px}td select{min-width:110px}.status{font-weight:600;padding:4px 9px;display:inline-block;background:#eef1f4}.free{background:#e9f3ed;color:#245d3a}.busy{background:#f9e9e8;color:#91342b}.blocked{background:#ececf0;color:#424352}.stale{color:#78694b;background:#f6f1e5}.warning{border-left:4px solid #ad741d;background:#fff8e8;padding:12px;margin:12px 0}.error{background:#fbece9!important;color:#862d24!important}.success{background:#eaf3ed;color:#245d3a}#notice{position:sticky;top:8px;padding:13px 18px;background:#e8eff7;border:1px solid #c5d4e2;z-index:5;margin-bottom:18px;white-space:pre-wrap}.login{max-width:460px;margin:55px auto}.sensor{border-left:3px solid #bac6d0}.sensor.alert{border-left-color:#b06b0c}.sensor .values{font-variant-numeric:tabular-nums;display:flex;gap:22px;margin:12px 0}.values strong{display:block;font-size:22px}.sensor .row label{min-width:100px}.subtle{font-size:13px;color:#626e79}details{margin:14px 0}summary{cursor:pointer;font-weight:600}.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.post{padding:18px;border:1px solid #d0d8e1;background:white}.post h3{margin-bottom:12px}.pill{font-size:12px;padding:3px 8px;background:#e9eef3;display:inline-block}#emulator-live{margin:12px 0}.command-log{font-family:Consolas,monospace;font-size:12px;max-height:260px;overflow:auto;white-space:pre-wrap}.check{display:flex;align-items:center;gap:6px}#logout{color:white;border-color:#627386;background:transparent}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #1b70ab;outline-offset:2px}@media(max-width:700px){header{padding:15px;gap:16px;flex-wrap:wrap}main{padding:0 14px;margin-top:20px}section,.panel{padding:16px}nav{gap:12px}h1{font-size:24px}.row>label{min-width:120px}}
[hidden]{display:none!important}

.section-title{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.section-title h2{margin:0}.grid-tools{display:flex;gap:10px;align-items:end;flex-wrap:wrap;font-size:12px}.grid-tools label{font-size:12px;margin:0}.grid-tools select{width:auto;padding:5px 8px}.grid-tools button{padding:6px 10px;font-size:12px}.grid-count{font-size:12px;color:#687481;align-self:center}.grid-scroll{overflow-x:auto;margin-top:16px;padding-bottom:4px}.tile-grid{display:grid;grid-template-columns:repeat(var(--columns,3),minmax(0,1fr));gap:10px}.tile-grid[data-kind=sensors],.tile-grid[data-kind=posts]{min-width:calc(var(--columns,3)*190px)}.tile-grid[data-kind=relays],.tile-grid[data-kind=inputs]{min-width:calc(var(--columns,8)*75px)}.sensor-tile{text-align:left;border:1px solid #c9d3dc;padding:14px;display:flex;flex-direction:column;gap:7px;min-width:0;font-weight:400}.tile-name{font-weight:600;font-size:16px;overflow-wrap:anywhere}.tile-meta,.tile-state{font-size:12px}.sensor-numbers{display:flex;gap:20px;flex-wrap:wrap}.sensor-numbers strong{font-size:21px;font-weight:600;display:block}.calibration-alert{border:2px solid #b27b24}.io-tile{border:1px solid #cad4dc;padding:12px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;min-width:0;font-weight:400;background:#f6f8fa;overflow-wrap:anywhere}.io-tile>strong{font-size:22px;font-weight:600}.io-tile>span{font-size:12px}.io-tile small{font-size:10px;line-height:1.3}.io-tile.ready{background:#eef3f7}.input-tile.input-active{background:#dceee2;border-color:#97b8a0;color:#215739}.input-tile.input-inactive{background:#f5dedb;border-color:#d1a29c;color:#832e28}.input-tile.unknown{background:#e9edf0;color:#65717c}.tile-grid[data-size=small] .sensor-tile{padding:9px;gap:4px}.tile-grid[data-size=small] .sensor-numbers strong{font-size:18px}.tile-grid[data-size=small] .io-tile{padding:7px 5px}.tile-grid[data-size=large] .sensor-tile,.tile-grid[data-size=large] .io-tile{padding:24px 16px;min-height:125px}.tile-grid[data-size=large] .sensor-numbers strong,.tile-grid[data-size=large] .io-tile>strong{font-size:30px}.settings-dialog{border:1px solid #aab8c5;border-radius:3px;padding:24px;width:min(640px,calc(100vw - 32px));max-height:90vh;overflow:auto;color:#202b39;background:#fff}.settings-dialog::backdrop{background:rgba(20,32,43,.48)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}.dialog-header h2{margin:0}.settings-dialog .sensor{border:0;padding:0;margin:0}.dialog-message{padding:10px;margin:12px 0}.sensor-name{border-bottom:1px solid #dce2e7;padding-bottom:18px;margin-bottom:18px}.compact-section{padding:18px}.compact-section .post{padding:13px}.compact-section .post .actions{gap:5px}.compact-section .post button{font-size:12px;padding:7px 9px}.io-tile:hover{filter:brightness(.98)}div.io-tile,div.sensor-tile{cursor:default}

/* Width-adaptive object tiles; configured columns are an upper limit. */
.grid-scroll{overflow:visible;min-width:0}.tile-grid[data-kind]{min-width:0}.tile-grid>*{min-width:0;overflow-wrap:anywhere}.sensor-group{margin-bottom:20px;min-width:0}.post-tile{padding:16px;border:1px solid #aab6bf;display:flex;flex-direction:column;justify-content:space-between;gap:10px;background:#e6eaed}.post-tile.light-green{background:#bfe4ca;border-color:#76ad87}.post-tile.light-red{background:#efb9b5;border-color:#c77771}.post-tile.light-red_cross{background:#f5cf96;border-color:#cb9548}.post-tile .actions{margin-top:0}.post-tile button{font-size:12px;padding:6px 8px;max-width:100%;white-space:normal}.sensor-tile:hover{filter:brightness(.98)}main,section,nav,.section-title,.grid-tools{min-width:0;overflow-wrap:anywhere}.grid-tools label,.grid-tools select{max-width:100%}.dialog-header{flex-wrap:wrap}.settings-dialog input,.settings-dialog select{min-width:0;max-width:100%}@media(max-width:450px){main{padding:0 8px}.compact-section{padding:12px}header{gap:10px}.brand{font-size:18px}nav{flex-basis:100%}.grid-tools{gap:6px}.grid-tools button{max-width:100%}.sensor-numbers{gap:10px}}

.settings-dialog:has([data-sensor]){padding:16px;width:min(680px,calc(100vw - 24px))}.settings-dialog .dialog-header{margin-bottom:8px}.settings-dialog .sensor h3{margin:0;font-size:16px}.settings-dialog .sensor p{margin:4px 0 8px}.settings-dialog .sensor .values{margin:6px 0;gap:18px}.settings-dialog .sensor .values strong{font-size:18px}.sensor-form-row{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin:6px 0}.sensor-form-row>label{flex:1 1 130px;min-width:0;margin:0;font-size:12px}.sensor-form-row>label:has(input[type=checkbox]){align-self:center;flex:0 1 auto}.sensor-form-row input,.sensor-form-row select{padding:5px 7px;margin-top:2px;font-size:13px}.sensor-form-row button,.settings-dialog .sensor .actions button{padding:6px 10px;font-size:12px}.sensor-name .sensor-form-row:nth-of-type(2)>label{flex-basis:100px}.settings-dialog .sensor-name{padding-bottom:10px;margin-bottom:10px}.settings-dialog .sensor-options{padding-bottom:8px;border-bottom:1px solid #dce2e7}.settings-dialog .sensor details{margin:8px 0 0}.settings-dialog .sensor summary{font-size:14px}.settings-dialog .sensor .actions{margin-top:5px}.settings-dialog .sensor-help{font-size:11px}.settings-dialog .sensor-write .sensor-form-row>label{flex-basis:110px}@media(max-width:450px){.sensor-form-row>label{flex-basis:120px}.sensor-form-row button{flex-shrink:0}}

.tile-grid[data-kind=sensors]{gap:clamp(2px,1vw,10px)}.tile-grid[data-kind=sensors] .sensor-tile{padding:min(2%,12px);overflow-wrap:anywhere;container-type:inline-size}.tile-grid[data-kind=sensors] .sensor-numbers{gap:6px;min-width:0}.tile-grid[data-kind=sensors] .sensor-numbers>span{min-width:0;max-width:100%}.tile-grid[data-kind=sensors] .tile-name{font-size:clamp(10px,10cqi,16px)}.tile-grid[data-kind=sensors] .sensor-numbers strong{font-size:clamp(10px,14cqi,24px)}.tile-grid[data-kind=sensors] .tile-meta,.tile-grid[data-kind=sensors] .tile-state,.tile-grid[data-kind=sensors] .sensor-numbers>span{font-size:clamp(9px,8cqi,12px)}

.tile-grid[data-kind=relays],.tile-grid[data-kind=inputs]{gap:clamp(2px,1vw,10px)}.tile-grid[data-kind=relays] .io-tile,.tile-grid[data-kind=inputs] .io-tile{padding:min(2%,10px);container-type:inline-size}.tile-grid[data-kind=relays] .io-tile>strong,.tile-grid[data-kind=inputs] .io-tile>strong{font-size:clamp(10px,30cqi,24px)}.tile-grid[data-kind=relays] .io-tile>span,.tile-grid[data-kind=inputs] .io-tile>span{font-size:clamp(9px,18cqi,12px)}.tile-grid[data-kind=relays] .io-tile small,.tile-grid[data-kind=inputs] .io-tile small{font-size:clamp(8px,16cqi,10px)}

.tile-grid[data-kind=posts]{gap:clamp(2px,1vw,10px)}.post-tile{padding:min(2%,12px);container-type:inline-size}.post-tile .tile-name{font-size:clamp(10px,12cqi,16px)}.post-tile .actions{min-width:0}.post-tile .actions button{min-width:0;overflow-wrap:anywhere;padding:4px min(3%,8px);font-size:clamp(8px,10cqi,12px)}

#object-editor input[aria-invalid="true"]{border:1px solid #b83229;background:#fff1ef}.field-feedback{color:#9a2922;font-size:12px;margin:2px 0 6px}.field-feedback:empty{display:none}#object-editor .subtle{margin:4px 0 10px}#object-validation{font-size:13px}

/* Dense working layout shared by administration, settings and operator screens. */
:root{font-size:14px;line-height:1.35}header{padding:8px 14px;gap:20px;min-height:44px}.brand{font-size:17px}nav{gap:16px}main{max-width:none;margin:12px 0;padding:0 14px;min-height:calc(100vh - 100px)}footer{padding:8px 14px;font-size:11px}h1{font-size:21px;margin:0 0 8px}h2{font-size:17px;margin:0 0 10px}h3{font-size:15px;margin:0 0 8px}p{margin:5px 0 10px}section,.panel{padding:12px;margin:10px 0}.compact-section{padding:10px}.section-title{gap:10px}.grid{gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}.row{gap:10px}.row>label{min-width:120px}label{font-size:12px;margin:5px 0}input,select{padding:5px 7px;margin-top:3px;font-size:13px;min-height:30px}button,.button{padding:5px 10px;font-size:13px;min-height:30px}input[type=checkbox]{min-height:0}.actions{gap:6px;margin-top:8px}th,td{padding:7px 9px}th{font-size:12px}td{font-size:13px}.table-wrap button{padding:4px 8px;min-height:28px}.grid-scroll{margin-top:10px;padding-bottom:0}.grid-tools{gap:8px}.grid-tools select{padding:3px 6px;min-height:27px}.grid-tools button{min-height:27px;padding:4px 8px}.sensor-group{margin-bottom:10px}.sensor-group:last-child{margin-bottom:0}.sensor-group h3{margin-bottom:6px}.post-tile{gap:6px}.sensor-tile{gap:4px}.tile-grid[data-size=large] .sensor-tile,.tile-grid[data-size=large] .io-tile{min-height:90px}.settings-dialog{padding:14px;width:min(600px,calc(100vw - 24px));max-height:94vh}.dialog-header{gap:12px;margin-bottom:10px}.dialog-header h2{font-size:18px}.dialog-message{padding:7px;margin:6px 0}.settings-dialog .row{gap:10px}.settings-dialog details{margin:8px 0}.login{max-width:420px;margin:28px auto}.login h1{font-size:21px}#notice{top:4px;padding:8px 12px;margin-bottom:8px}#object-editor>label{margin:6px 0}#object-editor .subtle{font-size:11px;margin:3px 0 7px}#object-validation{font-size:12px;margin:7px 0}.command-log{font-size:11px}
@media(max-width:700px){header{padding:8px 10px;gap:10px}main{padding:0 8px;margin:8px 0}nav{gap:10px}section,.panel,.compact-section{padding:9px;margin:8px 0}h1{font-size:19px}.settings-dialog{padding:12px}.login{margin:18px auto}.row>label{min-width:110px}footer{padding:7px 10px}}

.io-tile.relay-confirmed{background:#bbf7d0!important;border-color:#15803d!important;color:#14532d!important;box-shadow:inset 0 0 0 2px #15803d}

.operator-posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:12px;max-width:1600px}.operator-post{margin:0;padding:16px;border:1px solid #d9dfe5;border-radius:12px;background:#fff;display:flex;flex-direction:column;gap:12px;min-width:0;--signal:#7b8791;--rim:#e5e8eb}.operator-post[data-state=green]{--signal:#249360;--rim:#dcefe4}.operator-post[data-state=red]{--signal:#ce4646;--rim:#f7e1e1}.operator-post[data-state=red_cross]{--signal:#da871c;--rim:#faead3}.operator-signal{height:138px;width:100%;max-width:190px;align-self:center;border-radius:50%;background:var(--signal);border:6px solid var(--rim);color:#fff;display:grid;place-items:center}.operator-signal strong{font-size:25px;font-weight:650;text-align:center;overflow-wrap:anywhere;padding:8px;line-height:1.2}.operator-post button{min-height:44px;font-size:14px;border-radius:7px;padding:10px 7px;overflow-wrap:anywhere}.operator-open{background:#243748;color:white;border-color:#243748;font-weight:600}.operator-open:hover{background:#354c60}.operator-post.relay-confirmed .operator-open{background:#258556;border-color:#258556}.operator-post[data-state=red_cross]>button:not(.operator-open){background:#fff6e9;border-color:#e9c895}@media(max-width:580px){.operator-posts{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.operator-post{padding:10px}.operator-signal{height:110px}.operator-signal strong{font-size:22px}}@media(max-width:330px){.operator-posts{grid-template-columns:1fr}}

/* Compact page navigation. */
header .brand{white-space:nowrap}#nav{min-width:0}.page-switcher{position:relative;margin:0}.page-switcher>summary{list-style:none;cursor:pointer;padding:6px 8px;color:#fff;font-size:14px;font-weight:500;border-radius:3px;display:flex;align-items:center;gap:10px}.page-switcher>summary::-webkit-details-marker{display:none}.page-switcher>summary::after{content:"";width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);margin-top:-3px}.page-switcher[open]>summary,.page-switcher>summary:hover{background:#304252}.page-switcher>summary:focus-visible{outline:2px solid #bedaf2;outline-offset:2px}.page-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:1000;min-width:180px;max-width:calc(100vw - 150px);padding:4px;background:#fff;border:1px solid #d5dce3;border-radius:4px;box-shadow:0 5px 16px #18273526}.page-menu>a,.page-menu>#logout{display:block;width:100%;text-align:left;padding:8px 10px;color:#263c53;font-size:13px;border:0;border-radius:2px;background:transparent;text-decoration:none;white-space:normal}.page-menu>a:hover,.page-menu>#logout:hover{background:#edf1f5}.page-menu>a[aria-current=page]{background:#e6edf3;font-weight:600}.page-menu>#logout{border-top:1px solid #e2e7ec;margin-top:4px;border-radius:0}.page-menu>#logout[hidden]{display:none}
