/* Unified Array Control, phone app layout. Loaded only at phone width (media (max-width: 719px) on the <link>),
   after app.css, so it overrides the desktop dashboard without touching it. Design reference: the owner's phone mockup.
   Tokens come from app.css. Only system fonts, no external hosts (CSP). */

html{overflow-x:hidden;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-tap-highlight-color:transparent;--mchip:#dfe4ea;--tab:56px}
img{max-width:100%}
input,select,textarea,.sel{font-size:16px}
.shell{display:block}
main{min-width:0}
.top{display:none}
.rail{display:none}
.page{padding:14px 16px calc(var(--tab) + 28px + env(safe-area-inset-bottom,0px));max-width:100vw;overflow-x:hidden}
.page h1{font-size:20px;line-height:1.2}
.ph{gap:8px}
.ph p{font-size:13px}
.hint{display:none}
.btn{min-height:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.sm{min-height:40px}
.seg button{min-height:44px}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- branded header ---- */
.mbar{display:flex;position:sticky;top:0;z-index:26;align-items:center;gap:10px;min-height:calc(52px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 16px 0;background:var(--bg);border-bottom:1px solid var(--bd)}
.mbar .mchip{width:34px;height:24px;border-radius:4px;background:var(--mchip);display:grid;place-items:center;flex:none}
.mbar .mchip img{width:27px;display:block}
.mbar .mword{font:600 12px var(--mono);letter-spacing:.14em;white-space:nowrap}
.mbar .msp{flex:1}
.mbar button{width:44px;height:44px;border:0;background:none;display:grid;place-items:center;color:var(--ink2);border-radius:50%}
.mbar button svg{width:20px;height:20px}

/* ---- bottom tab bar ---- */
.tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:29;background:var(--sf);border-top:1px solid var(--bd);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar button{position:relative;min-height:var(--tab);display:grid;place-items:center;align-content:center;gap:1px;font-size:12px;color:var(--ink3);padding:6px 0;border:0;background:none}
.tabbar button svg{width:21px;height:21px}
.tabbar button.on{color:var(--acc);font-weight:600}
.tabbar .bd{position:absolute;top:5px;left:calc(50% + 8px);min-width:16px;height:16px;border-radius:8px;background:var(--crit);color:var(--accInk);font:600 11px/16px var(--mono);text-align:center;padding:0 4px}

/* ---- toast above the tab bar ---- */
.toast{bottom:calc(var(--tab) + 14px + env(safe-area-inset-bottom,0px));z-index:70}

/* ---- lists: filters as chips, rows stacked ---- */
.bar{border:0;padding:4px 0 8px;gap:8px}
.bar .seg,.sortbar,.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;border:0;background:none;max-width:100%;margin:0 -16px;padding:2px 16px 4px;width:calc(100% + 32px)}
.bar .seg::-webkit-scrollbar,.sortbar::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none}
.bar .seg button,.sortbar button,.chips button,.mcust{position:relative;flex:none;min-height:36px;padding:0 12px;border:1px solid var(--bd2);border-radius:18px;background:var(--sf);font-size:12.5px;color:var(--ink2);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.bar .seg button::after,.sortbar button::after,.chips button::after,.mcust::after{content:"";position:absolute;inset:-4px 0}
.bar .seg button.on,.sortbar button.on,.chips button.on{background:var(--sel);color:var(--acc);border-color:var(--acc);font-weight:600}
.bar .seg button + button{border-left:1px solid var(--bd2)}
.bar label.lbl{display:none}
.bar #cf{display:none}
.bar .mcust{margin:0}
.bar .order,.bar .sp{display:none}
table.devs tr.dv{min-height:56px;padding:12px 0;align-items:center}
table.devs td.c-host{min-width:0;overflow:hidden}
table.devs .host{display:block;font:600 13px var(--mono);overflow-wrap:anywhere}
table.devs .role{display:block;font-size:12px;color:var(--ink3)}
table.devs td.c-site .cname{font-size:12px;color:var(--ink3)}
table.devs td.c-find{font-size:12.5px;color:var(--ink2)}
table.devs tr.dv.cur{box-shadow:none}
.gap{max-width:none}

/* customers: stacked rows with a tappable address */
table.cust,table.cust tbody{display:block;width:100%}
table.cust thead{display:none}
table.cust tr.dv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:12px 0;border-bottom:1px solid var(--bd);min-height:56px;align-items:center}
table.cust td{display:block;padding:0;border:0;background:none!important;box-shadow:none!important;height:auto;white-space:normal}
table.cust td:nth-child(1){grid-column:1}
table.cust td:last-child{grid-column:2;grid-row:1}
table.cust td.c-addr{display:block;grid-column:1/-1;min-width:0;max-width:none}
table.cust td.n{display:none}
table.cust td:nth-child(3),table.cust td:nth-child(5){display:inline;grid-row:3;font-size:12px}
table.cust td:nth-child(3){grid-column:1}
table.cust td:nth-child(3)::after{content:" devices";font-family:var(--font);color:var(--ink3)}
table.cust td:nth-child(5){grid-column:2;text-align:right}
table.cust td:nth-child(5)::after{content:" attention";font-family:var(--font);color:var(--ink3)}
[data-nav-addr]{cursor:pointer;color:var(--acc);min-height:44px;display:inline-flex;align-items:center;text-decoration:none;overflow-wrap:anywhere}
.pcard [data-nav-addr]{display:flex}
a[href^="tel:"]{display:inline-flex;align-items:center;min-height:44px;color:var(--acc)}

/* ---- device screen: an expanded row becomes a full screen ---- */
table.devs tr.ex{position:fixed;left:0;right:0;top:0;bottom:calc(var(--tab) + env(safe-area-inset-bottom,0px));z-index:28;background:var(--bg);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:block}
table.devs tr.ex > td{display:block;padding:0 0 24px;width:100%}
.mdev-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;min-height:calc(52px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 12px 0 4px;background:var(--bg);border-bottom:1px solid var(--bd)}
.mdev-bar .mback{display:flex;align-items:center;gap:4px;min-height:44px;padding:0 10px 0 6px;color:var(--acc);border:0;background:none;font-weight:600}
.mdev-bar .mback svg{width:20px;height:20px}
.mdev-bar .mtitle{font:600 15px var(--font);min-width:0;overflow-wrap:anywhere;line-height:1.25}
.mdev-acts{padding:14px 16px 4px}
.mremote{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;border-radius:3px;background:var(--acc);color:var(--accInk);font-weight:700;font-size:15px;border:1px solid var(--acc)}
.mremote svg{width:22px;height:22px}
.mquick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.mact{display:grid;place-items:center;align-content:center;gap:4px;min-height:60px;border:1px solid var(--bd2);border-radius:3px;background:var(--sf);font-weight:600;font-size:12px;text-align:center;padding:6px 2px}
.mact svg{width:20px;height:20px}
.mact.now{border-color:color-mix(in srgb,var(--crit) 40%,var(--bd2))}
table.devs tr.ex .exhead{border-left:0;padding:12px 16px}
table.devs tr.ex .exhead .acts{width:100%}
table.devs tr.ex .exhead .acts .btn kbd{display:none}
table.devs tr.ex .exp{border-left:0}
.exp > div{padding:12px 16px}
.hw{grid-template-columns:repeat(2,minmax(0,1fr))}
.strip{grid-template-columns:repeat(2,minmax(0,1fr))}
.strip > div:nth-child(n){border-right:1px solid var(--bd)}
.strip > div:nth-child(even){border-right:0}
.fi .fa .btn{min-height:44px}
.mdev-page{padding:12px 0 0}

/* ---- sheets ---- */
.msheetwrap{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;background:var(--scrim)}
.msheet{width:100%;background:var(--sf);border-top:1px solid var(--bd2);border-radius:14px 14px 0 0;padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px));max-height:88vh;overflow-y:auto}
.msheet .grip{width:38px;height:4px;border-radius:2px;background:var(--bd2);margin:2px auto 12px}
.msheet h3{margin:0 0 2px;font:600 16px var(--font)}
.msheet p{margin:0 0 10px;color:var(--ink2);font-size:13px;overflow-wrap:anywhere}
.mrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;min-height:56px;padding:8px 0;border:0;border-bottom:1px solid var(--bd);background:none;text-align:left;color:inherit;text-decoration:none}
.mrow:last-of-type{border-bottom:0}
.mrow .mapp{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font:700 14px var(--font);color:#fff;flex:none}
.mrow .mapp svg{width:20px;height:20px}
.mrow b{display:block;font-weight:600}
.mrow span.s{color:var(--ink3);font-size:12px}
.mrow .ext{color:var(--acc);font-size:12.5px;font-weight:600}
.msheet .mbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.msheet .mbtns .btn{width:100%}
.msheet .mmsg{min-height:18px;margin-top:10px;font-size:13px}
.msheet .mlist{max-height:52vh;overflow-y:auto;margin:0 -16px;padding:0 16px}
.btn.dz{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 45%,var(--bd2))}

/* ---- Remote / Scripts screens ---- */
.mscreen{display:block;position:fixed;left:0;right:0;top:calc(52px + env(safe-area-inset-top,0px));bottom:calc(var(--tab) + env(safe-area-inset-bottom,0px));z-index:30;background:var(--bg);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.mscreen[hidden]{display:none}
.mscreen .page{padding-bottom:24px}
.mdevrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--bd);min-height:56px;background:none;text-align:left;color:inherit}
.mdevrow .h{font:600 13px var(--mono);min-width:0;overflow-wrap:anywhere}
.mdevrow .s{grid-column:1/-1;color:var(--ink3);font-size:12px;overflow-wrap:anywhere}
.mfind{width:100%;min-height:44px;margin:4px 0 8px;padding:0 12px;border:1px solid var(--bd2);border-radius:3px;background:var(--sf)}

/* ---- the small popovers of the desktop become bottom sheets ---- */
.quick{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0;width:100%!important;border-radius:14px 14px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));z-index:61}
.pal{top:calc(env(safe-area-inset-top,0px) + 8px);width:calc(100% - 16px)}
.pal footer{display:none}
.dlg{z-index:62}

/* ---- map ---- */
.mapbox{height:52vh;min-height:320px}
.uamap-ctl button{width:44px;height:44px}

/* ---- pull to refresh ---- */
.mptr{position:fixed;left:0;right:0;top:calc(52px + env(safe-area-inset-top,0px));height:0;overflow:hidden;z-index:25;display:flex;align-items:flex-end;justify-content:center;color:var(--ink3);font:600 11px var(--mono);letter-spacing:.06em;pointer-events:none}
.mptr span{padding:0 0 8px}

@media (prefers-reduced-motion:reduce){.mptr{transition:none}}

/* ---- installed app (standalone) ---- */
@media (display-mode: standalone){
  body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  input,textarea,select,.mfind,[contenteditable],td,.m,.host{-webkit-user-select:text;user-select:text}
  .mbar{background:var(--sf)}
}

/* specificity fixes for the stacked device row */
table.devs tr.dv td.c-chk,table.devs tr.dv td.c-vit,table.devs tr.dv td.c-user,table.devs tr.dv td.c-win,table.devs tr.dv td.c-agent{display:none}
table.devs .role{margin-left:0;padding-left:0}

/* 44px touch targets */
.btn.sm{min-width:44px}
.quick-btn{min-height:44px;display:inline-flex;align-items:center;text-align:left}
input.sel,select.sel,textarea.sel{min-height:44px}
input[type=checkbox],input[type=radio]{width:22px;height:22px}
.crumb button{min-height:44px;display:inline-flex;align-items:center}

/* ---- X2: one set of device actions. The phone grid (mobile.js actionGrid) already has Remote, Restart, Shut down, Run script, Move and Check now, so the desktop row hides its copies ---- */
.band:has(+ .mdev-page) .acts :is([data-act="remote"],[data-act="restart"],[data-act="shutdown"],[data-act="move"],[data-act="script"],[data-cad-check]),
tr.ex td:has(.mdev-acts) .exhead .acts :is([data-act="remote"],[data-act="restart"],[data-act="shutdown"],[data-act="move"],[data-act="script"],[data-cad-check]){display:none}

/* ---- X4: every tap target at least 44px (docs/UX-GAPS.md; audit script in the work notes) ---- */
.btn,.btn.sm{min-height:44px}
button[data-tab],button[data-ctab],button[data-net-f],button[data-px-tab],button[data-hist-range],.seg button,.bar .seg button,.sortbar button,.chips button,.mcust{min-height:44px;min-width:44px}
html body :is(a.clink,.lnk,.sortb,.net-tog,.net-ic,.px-sellbtn,.sec-x,summary,.uamap-attr a,a.ext){display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.net-tog{padding-right:8px}
summary{min-height:44px;cursor:pointer}
.rz-h{display:none} /* column resize handles are a mouse feature */
.ualt{min-height:24px}

/* ---- Android app: More button, More sheet, All pages (web/native-shell.js; only exists when the app's WebView runs the page) ---- */
.mbar .ua-morebtn{width:auto;min-width:44px;height:44px;padding:0 14px 0 12px;border:1px solid var(--bd2);border-radius:22px;display:inline-flex;align-items:center;gap:8px;color:var(--ink);background:var(--sf);font:600 14px var(--font)}
.mbar .ua-morebtn svg{width:20px;height:20px}
.msheet .ua-who{display:grid;gap:2px;margin:2px 0 10px;padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:var(--sf2)}
.msheet .ua-who b{font-weight:600;overflow-wrap:anywhere}
.msheet .ua-who span{color:var(--ink2);font-size:13px;overflow-wrap:anywhere}
.ua-mrow{min-height:56px}
.ua-mrow .ua-mico{background:var(--sf3);color:var(--ink2)}
.ua-mrow.ua-danger .ua-mico,.ua-mrow.ua-danger .ext{color:var(--crit)}
.ua-mrow.ua-danger.armed b{color:var(--crit)}
.ua-allpages{position:fixed;inset:0;z-index:61;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);overscroll-behavior:contain}
.ua-aphead{display:flex;align-items:center;gap:8px;min-height:calc(56px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 12px 0;border-bottom:1px solid var(--bd);background:var(--sf);flex:none}
.ua-aphead h2{margin:0 0 0 4px;font:600 17px var(--font)}
.ua-apback{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 12px;border:1px solid var(--bd2);border-radius:24px;background:var(--bg);color:var(--ink);font:600 14px var(--font)}
.ua-apback svg{width:20px;height:20px}
.ua-aplist{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 0 calc(16px + env(safe-area-inset-bottom,0px))}
.ua-prow{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 16px;border:0;border-bottom:1px solid var(--bd);background:none;color:inherit;text-align:left;font:500 16px var(--font)}
.ua-prow .m{color:var(--ink3);font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.ua-prow .m.warn{color:var(--warn)}
.ua-prow .m.crit{color:var(--crit)}
.ua-prow .chev{color:var(--ink3);font-size:20px;text-align:center}
.ua-prow.on{background:var(--sel);font-weight:600}
.ua-prow:active{background:var(--sel)}
.ua-apsep{border:0;border-top:8px solid var(--sf2);margin:0}
/* the keyboard is open: the tab bar gives its space back to the page */
html.ua-kb .tabbar{display:none}
/* UI QA 2026-10: phone tap targets that later page stylesheets had shrunk below 44px (specificity raised so load order does not matter) */
html body :is(.btn.sm,.btn.pri,.quick-btn,.hub-chip,.sm-ipb,.px-lnk.host){min-height:44px;display:inline-flex;align-items:center}
html body :is(a.ps-mini){min-height:44px}
html body :is(a.ps-more,.hub-pen){display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
html body :is(.bk-xx){min-width:44px}
html body :is(a[data-ps-dev]){display:inline-flex;align-items:center;min-height:44px;min-width:44px}