/* Shared by the ops app (public/index.html) and the field app (public/field/index.html): rules that are the same in
   both. Each page loads this first, then its own <style>. No build step: edit here and both apps change. */
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--navy)}
header{position:sticky;top:0;z-index:5;background:var(--navy);color:#fff;padding:0 16px}
.brand .kc{color:var(--orange);font-weight:inherit}
.brand .mark{position:relative;display:inline-block;padding-bottom:5px}
.brand .mark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(110deg,var(--orange) 0 71%,transparent 71% 75%,#8E979F 75% 100%)}
.brandrow{display:flex;align-items:center;gap:10px;min-width:0}
.bul{margin:4px 0 0;padding-left:1.2em}
.bul li{margin:2px 0}
a[href^="tel:"]{white-space:nowrap}
.switch:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55)}
.umenu{position:relative;display:inline-block}
.udrop a{display:block;padding:9px 12px;color:var(--navy);text-decoration:none;font-weight:600}
.bell .cnt{position:absolute;top:-4px;right:-4px;background:var(--orange);color:#fff;font-family:Saira,sans-serif;font-weight:700;font-size:.62rem;min-width:16px;height:16px;border-radius:8px;padding:0 4px;display:flex;align-items:center;justify-content:center}
.bellpanel{position:fixed;right:12px;top:52px;width:min(calc(100vw - 24px),380px);max-height:70vh;overflow:auto;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);text-align:left;z-index:50;font-size:.9rem}
.bellpanel h3{margin:0;padding:10px 12px;border-bottom:1px solid var(--line);font-size:.95rem}
.bellpanel a.n{display:block;padding:9px 12px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.bellpanel a.n.unread{background:#fff7f0;font-weight:600}
.bellpanel .w{display:block;font-size:.78rem;color:var(--muted);font-weight:400;margin-top:2px}
.bellpanel .none{padding:14px 12px;color:var(--muted)}
h1{font-family:Saira,sans-serif;font-weight:700;font-size:1.35rem;line-height:1.2;color:var(--navy)}
.small{font-size:.85rem;color:var(--muted)}
a.card{display:block;text-decoration:none;color:inherit}
.pill.ok{background:var(--okbg);color:var(--ok)}
.pill.bad{background:var(--badbg);color:var(--bad)}
.pill.chk{background:var(--chkbg);color:var(--chk)}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.btn svg{flex:none}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 2px rgba(11,31,51,.12)}
.toggles{display:flex;flex-wrap:wrap;gap:8px}
.toggles button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.back{display:inline-block;color:var(--navy);font-weight:600;text-decoration:none;margin-bottom:10px}
.btn.okb{background:var(--ok);color:#fff}
.sup .it small{display:block;color:var(--muted);font-size:.8rem}
.sheet{position:fixed;inset:0;background:rgba(11,31,51,.55);z-index:10;display:flex;align-items:flex-end}
.sheet>div{background:#fff;width:100%;border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));max-height:85vh;overflow:auto}
.sheet h3{font-family:Saira,sans-serif;margin:0 0 4px}
.sheet textarea{width:100%;min-height:90px;margin-top:8px}
.sheet .srow2{display:flex;gap:8px;margin-top:10px}
.sheet .srow2 .btn{flex:1}