/* RECAP Field phone app (mobile first; one-hand use; 48 px targets). */
body.m{background:var(--rf-pale)}
.m-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 16px;padding-top:max(8px,env(safe-area-inset-top));
  background:var(--rf-navy);color:var(--rf-white);position:sticky;top:0;z-index:5}
.m-top .id{display:flex;align-items:center;gap:10px;min-width:0}
.m-top .id img{width:32px;height:32px;flex:none}
.m-top .id strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-top .right{display:flex;gap:6px;align-items:center;flex:none}
.m-top a.light{color:var(--rf-white)}
.m-top .net{color:var(--rf-gray)}
.m-top .offline{color:var(--rf-amber);font-weight:700}
.m-top .tag{background:var(--rf-amber);border-color:var(--rf-amber);color:var(--rf-navy)}
body.em .m-top,body.em .sos{display:none}
.m-main{max-width:560px;margin:0 auto;padding:16px 16px calc(40px + env(safe-area-inset-bottom))}
.btn.block{display:flex;width:100%;margin:8px 0}
.btn.big{min-height:64px;font-size:1.15rem}
.btn.huge{min-height:96px;font-size:1.8rem}
.grid-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.grid-btns .btn{flex-direction:column;text-align:center}
@media(max-width:340px){.grid-btns{grid-template-columns:1fr}}
.shift{text-align:center}.shift.on{border:3px solid var(--rf-tealText)}.shift.off{border:2px dashed var(--rf-slate)}
.shift-state{font-size:1.5rem;font-weight:800}.shift.on .shift-state{color:var(--rf-tealText)}
.shift.on .shift-state::before{content:"● "}
.em-first{background:var(--rf-error);color:var(--rf-white);border-radius:12px;padding:16px;margin-bottom:12px}
.em-first h1{margin-top:0;color:var(--rf-white)}
.em-first .btn{background:var(--rf-white);color:var(--rf-error);border-color:var(--rf-white)}
.toast{position:fixed;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));background:var(--rf-navy);color:var(--rf-white);
  padding:14px 16px;border-radius:10px;z-index:20;box-shadow:0 4px 18px rgba(6,27,47,.35)}
.toast.bad{background:var(--rf-error)}
#alert-note{display:block;width:100%;margin:8px 0;min-height:72px;resize:vertical}
.qstate{font-weight:700}
.qstate.pending{background:var(--rf-amber);border-color:var(--rf-amber);color:var(--rf-navy)}
.qstate.sent{border-color:var(--rf-tealText);color:var(--rf-tealText)}
.qstate.failed{border-color:var(--rf-error);color:var(--rf-error)}
/* Messages and native-app status */
.tag.unread{background:var(--rf-error);border-color:var(--rf-error);color:var(--rf-white);margin-left:4px}
.chat{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.chat li{max-width:85%;padding:10px 12px;border-radius:12px;background:var(--rf-white);border:1px solid var(--rf-gray);align-self:flex-start}
.chat li.me{align-self:flex-end;background:var(--rf-navy);color:var(--rf-white);border-color:var(--rf-navy)}
.chat li .meta{display:block;font-size:.8rem;opacity:.8;margin-top:4px}
.chat li.bc{border-left:4px solid var(--rf-amber)}
.jibble{margin-top:6px;font-weight:700}
.jibble.ok{color:var(--rf-tealText)}
.jibble.bad,.warn{color:var(--rf-error);font-weight:700}
/* UI review fixes (Oct 2026) */
.m-top .light-btn,.m-top .light-btn:hover,.m-top .light-btn:focus{color:var(--rf-white);background:transparent;border-color:rgba(255,255,255,.6);min-height:44px}
.due{margin-top:10px;font-weight:800;font-size:1.05rem;color:var(--rf-navy)}
.due.late{color:var(--rf-error)}
.warn-card{border:2px solid var(--rf-amber);background:#FFF8E6}
.warn-card .btn{margin-top:10px}
.danger-text{color:var(--rf-error);border-color:var(--rf-error)}
#log li{padding:8px 0;border-bottom:1px solid var(--rf-gray)}
#log .qstate{font-weight:700}
#log .qstate.pending{color:#7A5200;background:none;border:0}
#log .qstate.sent{color:var(--rf-tealText);border:0}
#log .qstate.failed{color:var(--rf-error);border:0}
.compose{position:sticky;bottom:0;display:flex;gap:8px;align-items:flex-end;background:var(--rf-pale);
  padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:4}
.compose textarea{flex:1;min-height:56px}
.compose .btn{min-width:88px}
/* Usability review (2026-10-13) */
.m-top{flex-wrap:wrap;row-gap:4px}
.m-top .m-status{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:.85rem;min-height:22px}
.m-top .m-status .net{color:var(--rf-gray)}
.m-top .m-status .net.offline{color:var(--rf-amber);font-weight:700}
.m-top .m-status .tag{font-size:.75rem;padding:1px 8px}
.m-top .right .btn{min-height:44px}
.shift-detail,#shift-detail{white-space:pre-line}
.warn-card.inner{text-align:left;border-radius:8px;padding:10px 12px;margin:0 0 12px}
.warn-card.inner .btn{margin-top:8px}
.busy{border:2px solid var(--rf-navy);text-align:center}
.warn-line{color:#8A4B00;font-weight:700}
.alert-result{font-weight:700;min-height:1.4em}
.alert-result.ok{color:var(--rf-tealText)}
.alert-result.not-sent,.not-sent{color:var(--rf-error);font-weight:800}
ul.alerts li{padding:10px 0}
ul.alerts li.waiting{border-left:4px solid var(--rf-amber);padding-left:10px}
ul.alerts .btn{margin-top:6px}
.em-net{font-weight:700;margin:4px 0 8px}
.sticky-actions{position:sticky;bottom:0;background:var(--rf-pale);padding:8px 0 calc(8px + env(safe-area-inset-bottom));z-index:3}
.note-strong{border:2px solid var(--rf-navy)}
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0}
dl.facts dt{font-weight:700;color:var(--rf-slate)}dl.facts dd{margin:0;overflow-wrap:anywhere}
/* Message bubbles keep their padding inside the plain list (P24) */
ul.plain.chat li{padding:10px 14px;border-bottom:1px solid var(--rf-gray)}
ul.plain.chat li.me{border-bottom-color:var(--rf-navy)}
.toast{pointer-events:none}
#my-requests li{padding:10px 0}
/* Second review */
.nowrap{white-space:nowrap}
.li-note{font-weight:700;margin:4px 0 8px}
.toast{top:calc(8px + env(safe-area-inset-top));bottom:auto}
.warn-card.inner{font-size:.9rem;padding:8px 10px}

/* Call 911 stands apart from the desk alert, so one can't be tapped for the other (owner, Oct 17). */
#v-emergency .em-first{margin-bottom:40px}
#v-emergency .em-first + .em-net{margin-top:-24px}
/* H1 (interface review 2): the Emergency screen opens where EMERGENCY was just tapped. The heading and a short line sit
   in that spot, so Call 911 starts well below where EMERGENCY was, and taps on it are ignored for a moment (m.js). */
body.em .m-main{padding-top:calc(16px + env(safe-area-inset-top))}
#v-emergency .em-first h1{margin-bottom:8px}
#v-emergency .em-call-hint{margin:0 0 var(--em-call-gap,96px);font-weight:700}
#v-emergency.arming #call-911{pointer-events:none}
#share-wrap.disabled{color:var(--rf-slate)}
#v-emergency #em-loc-off{margin:8px 0}