/* HexaVI mobile — the phone's own screens.
   Built for one hand and a thumb: text at 16 px, targets of 48 px or more,
   the plan full screen and everything else in sheets that come up from the
   bottom. Everything is scoped to html.mob, so nothing here reaches the
   tablet's screens. */

html.mob{
  --m-ground:#E7EBF0; --m-paper:#F4F6F9; --m-surface:#FFFFFF; --m-ink:#0F1B2D; --m-muted:#5E6876;
  --m-line:#DDE3EA; --m-blue:#1668C9; --m-blue-2:#E4EEFB; --m-amber:#A34E06; --m-amber-2:#FDF0D5;
  --m-green:#157A3C; --m-green-2:#DDF3E5; --m-red:#B42318; --m-red-2:#FDE7E5; --m-grey-2:#E9EDF2;
  --m-top:env(safe-area-inset-top,0px); --m-bottom:env(safe-area-inset-bottom,0px);
  -webkit-text-size-adjust:100%;
}
html.mob body{background:var(--m-paper);color:var(--m-ink);font-size:16px;line-height:1.35;
  -webkit-tap-highlight-color:transparent}
html.mob button{font:inherit;color:inherit}
html.mob a:hover{text-decoration:none}
html.mob .mob-survey{overflow:hidden;overscroll-behavior:none}
html.mob .ic{flex:none}

/* ---------- pages ---------- */
.mpage{max-width:640px;margin:0 auto;padding:calc(12px + var(--m-top)) 14px calc(28px + var(--m-bottom))}
.mtop{display:flex;justify-content:space-between;align-items:center;padding:6px 4px 0}
.mtop h1{font-size:26px;font-weight:800;letter-spacing:-.01em;color:var(--m-ink)}
.mav{width:44px;height:44px;border-radius:50%;border:0;background:#fff;display:grid;place-items:center;
  box-shadow:0 1px 3px rgba(15,27,45,.15);color:var(--m-ink);flex:none}
.msubl{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 4px 14px;
  color:var(--m-muted);font-size:15px}
.mempty{padding:28px 16px;text-align:center;color:var(--m-muted);font-size:15px}
.mhint{font-size:14px;color:var(--m-muted);text-align:center;padding:6px 0}
.mnote{margin:8px 0 0;font-size:13.5px;color:var(--m-muted);line-height:1.45}

/* The network line. Green online with nothing waiting; amber when something
   waits; dark when offline, because offline is the one state that changes
   what the next ten minutes are worth. */
.mnet{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:16px;border:0;
  background:var(--m-green-2);color:var(--m-green);font-size:13.5px;font-weight:600;white-space:nowrap;flex:none;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
.mnet i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.mnet.wait{background:var(--m-amber-2);color:var(--m-amber)}
.mnet.off{background:var(--m-ink);color:#fff}
.mnet.off i{background:#F5A524}
.mnet.bad{box-shadow:inset 0 0 0 2px var(--m-red)}

/* ---------- missions ---------- */
.mcard{background:#fff;border-radius:18px;padding:14px;margin:0 0 12px;display:grid;gap:8px;
  box-shadow:0 1px 3px rgba(15,27,45,.08)}
.mcard-h{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--m-ink)}
.mcard-h b{font-size:18px;font-weight:700}
.mcard-s{font-size:14px;color:var(--m-muted)}
.mcard>.badge{justify-self:start}
.mprog{height:6px;border-radius:3px;background:var(--m-grey-2);overflow:hidden}
.mprog i{display:block;height:100%;background:var(--m-green)}
.mprogl{font-size:13px;color:var(--m-muted);margin-top:-4px}
html.mob .badge{height:24px;padding:0 8px;font-size:11.5px;border-radius:7px;flex:none}
/* The platform's tag, its colours untouched: only the size is the phone's. */
html.mob .tag{font-size:12px;line-height:20px;padding:0 7px;border-radius:6px;vertical-align:middle}
html.mob .tag.in-btn{max-width:140px}

.mbtn{min-height:46px;border-radius:13px;border:0;font-size:16px;font-weight:650;display:flex;align-items:center;
  justify-content:center;gap:8px;width:100%;padding:6px 12px;text-align:center;flex-wrap:wrap;line-height:1.2;
  background:var(--m-grey-2);color:var(--m-ink);cursor:pointer}
.mbtn small{font-weight:500;font-size:13.5px;opacity:.85}
.mbtn.pri{background:var(--m-blue);color:#fff}
.mbtn.sec{background:var(--m-blue-2);color:var(--m-blue)}
.mbtn.ok{background:var(--m-green);color:#fff}
.mbtn.big{min-height:52px;font-size:17px}
.mbtn.danger-soft{background:var(--m-red-2);color:var(--m-red);margin-top:6px}
.mbtn:disabled{opacity:.5}
.mbtn span{display:inline-flex;align-items:center;gap:8px}
.mcount:empty{display:none}
.mcount{min-width:24px;height:24px;border-radius:12px;background:rgba(255,255,255,.25);font-size:13px;
  display:inline-grid;place-items:center;padding:0 7px}

.mgo{display:flex;gap:8px}
.mgo .mbtn{width:auto;flex:1;min-width:0}
.mgo .mbtn.pri{flex:2;flex-direction:column;gap:1px;line-height:1.15}
.mgo .mbtn.pri b{font-weight:650}
.mgo .mbtn.pri small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.moff{display:flex;align-items:center;gap:8px}
.moff-state{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--m-green)}
.moff .mbtn{width:auto;flex:1;min-height:40px;font-size:15px}
.moff [data-offbtn][aria-pressed="true"],.moff [data-offsend]{flex:none;padding:6px 12px}
.moff-state:has(span[hidden]){display:none}

/* ---------- one mission ---------- */
.mnav{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:48px}
.mnavb{display:flex;align-items:center;gap:2px;color:var(--m-blue);font-size:17px}
.mnavr{display:flex;align-items:center;gap:8px;min-width:0}
.mh{padding:6px 4px 14px;display:grid;gap:6px}
.mh h1{font-size:24px;font-weight:800;color:var(--m-ink)}
.mtags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mstack{display:grid;gap:8px;margin:0 0 4px}
.mbox{background:#fff;border-radius:14px;padding:8px 10px}
.msech{padding:16px 4px 6px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--m-muted)}
.mgrp{margin:0 0 10px;border-radius:16px;background:#fff;overflow:hidden}
.mgh{padding:10px 14px 4px;font-size:14px;font-weight:700;color:var(--m-ink)}
.mlr{min-height:46px;display:flex;align-items:center;gap:10px;padding:0 14px;border-top:1px solid var(--m-line);
  font-size:16px;color:var(--m-ink)}
.mlr:first-child{border-top:0}
.mgh + .mlr{border-top:1px solid var(--m-line)}
.mlr.none{color:var(--m-muted);font-size:14px}
.mlr-t{flex:1;min-width:0}
.mlr .ic,.mlr svg{color:#A8B2BF}
.mcnt{min-width:26px;height:24px;border-radius:12px;background:var(--m-blue-2);color:var(--m-blue);font-size:13px;
  font-weight:700;display:grid;place-items:center;padding:0 7px}
.mlr.ghost{opacity:.5}

/* ---------- sheets ---------- */
.msheet-dim{position:fixed;inset:0;z-index:80;background:rgba(15,27,45,.38)}
.msheet{position:fixed;z-index:90;left:0;right:0;bottom:0;max-height:88vh;display:flex;flex-direction:column;
  background:var(--m-surface);border-radius:24px 24px 0 0;box-shadow:0 -8px 28px rgba(15,27,45,.22);
  padding-bottom:var(--m-bottom);overflow:hidden}
.msheet.tall{height:82vh}
.mgrab{width:40px;height:5px;border-radius:3px;background:#C9D1DB;margin:8px auto 4px;flex:none}
.mshh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 16px 10px;flex:none}
.mshh b{font-size:19px;color:var(--m-ink)}
.mx{width:40px;height:40px;border-radius:50%;border:0;background:var(--m-grey-2);display:grid;place-items:center;
  color:var(--m-muted);flex:none;cursor:pointer}
.mpad{padding:0 16px 14px}
.mpad.tight{padding:0 12px 2px}
.msheet.mel.peek .mscroll{padding-bottom:4px}
.msheet.mel.peek .mgrab{margin:6px auto 2px}
.mscroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px}
.msub{color:var(--m-muted);font-size:14px;margin:-4px 0 12px}
.msrch{margin:0 16px 12px;height:48px;border-radius:14px;background:var(--m-grey-2);display:flex;align-items:center;
  gap:10px;padding:0 14px;color:var(--m-muted);flex:none}
.msrch input{flex:1;min-width:0;border:0;background:none;font-size:16px;color:var(--m-ink);outline:none;height:100%}
.mseg{display:flex;margin:0 16px 10px;padding:3px;border-radius:13px;background:var(--m-grey-2);flex:none}
.mpad .mseg,.mfs .mseg{margin:0 0 10px}
.mseg button{flex:1;min-height:38px;border:0;background:none;border-radius:10px;font-size:15px;font-weight:600;
  color:var(--m-muted);white-space:nowrap;cursor:pointer;padding:0 6px}
.mseg button.on{background:#fff;color:var(--m-ink);box-shadow:0 1px 3px rgba(15,27,45,.18)}
.mseg.life button.on[data-life="EXISTING"]{background:var(--life-existing);color:#fff}
.mseg.life button.on[data-life="PROPOSED"]{background:var(--life-proposed);color:#fff}
.mseg.life button.on[data-life="REMOVE"]{background:var(--life-remove);color:#fff}
.mseg button:disabled{opacity:.55}
.mcat{padding:0 16px 10px;font-size:13px;color:var(--m-muted);flex:none}
.mchips{display:flex;gap:8px;padding:0 16px 12px;overflow-x:auto;white-space:nowrap;flex:none;scrollbar-width:none}
.mchips::-webkit-scrollbar{display:none}
.mchip{flex:none;height:40px;padding:0 14px;border-radius:20px;border:1.5px solid var(--m-line);background:#fff;
  display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:500;cursor:pointer}
.mchip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c,var(--m-ink))}
.mchip.on{background:var(--m-ink);border-color:var(--m-ink);color:#fff}
.mchip.on::before{display:none}
.meg{display:flex;align-items:center;gap:7px;padding:12px 16px 4px;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--m-muted)}
.mdotc{width:8px;height:8px;border-radius:50%;flex:none}
.mer,.mpl{width:100%;min-height:56px;display:flex;align-items:center;gap:12px;padding:0 16px;border:0;
  border-bottom:1px solid var(--m-line);background:none;text-align:left;cursor:pointer}
.mpl{border-left:4px solid var(--lc,transparent)}
.msym{width:44px;height:44px;border-radius:11px;background:var(--m-grey-2);display:grid;place-items:center;flex:none}
.msym svg{width:28px;height:28px}
.msym.big{width:44px;height:44px}
.msym.big svg{width:30px;height:30px}
.met{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.met b{font-size:16px;font-weight:600;color:var(--m-ink);overflow:hidden;text-overflow:ellipsis}
.met small{font-size:13px;color:var(--m-muted);font-family:var(--mono)}
.mdot{width:11px;height:11px;border-radius:50%;flex:none}
.mdot.warn{background:#D97706}
.mdot.ok{background:var(--m-green)}
.mrow{display:flex;align-items:center;gap:12px;min-height:48px;margin:0 0 6px;padding:0 14px;border-radius:14px;border:0;
  background:var(--m-grey-2);font-weight:600;font-size:16px;width:100%;color:var(--m-ink);cursor:pointer}
.mrow span{flex:1;text-align:left}
.mrow.check input{width:24px;height:24px}
.mlab{font-size:14px;font-weight:600;color:var(--m-muted);margin:2px 0 8px}

/* ---------- the survey ---------- */
.msv{position:fixed;inset:0;overflow:hidden;background:var(--m-ground)}
.mstage{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.mlayer{position:absolute;left:0;top:0;transform-origin:0 0}
.mlayer.moving{will-change:transform}
.mlayer img{display:block;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.mblank{background:#fff}
.mmarkers{position:absolute;inset:0}
.mcredit{position:fixed;z-index:20;right:6px;bottom:calc(112px + var(--m-bottom));font-size:10px;
  background:rgba(255,255,255,.8);padding:1px 5px;border-radius:4px}

.mm{position:absolute;transform:translate(-50%,-50%);transform-origin:50% 50%;z-index:2;cursor:pointer}
.mm .sym{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:#fff;
  box-shadow:0 0 0 2px currentColor,0 1px 4px rgba(15,23,42,.35)}
.mm .sym svg{width:26px;height:26px}
.mm.proposed .sym{border:2px dashed currentColor;background:#f8fafc;box-shadow:0 1px 4px rgba(15,23,42,.35)}
.mm.remove .sym{opacity:.6}
.mm.sel{z-index:6}
.mm.sel .sym{box-shadow:0 0 0 2.5px currentColor,0 0 0 7px rgba(22,104,201,.32),0 2px 8px rgba(15,27,45,.35)}
.mm .tag{position:absolute;left:50%;top:44px;transform:translateX(-50%);background:rgba(255,255,255,.96);
  border:1px solid var(--line-strong);border-radius:6px;padding:2px 6px;font:600 12px/1.2 var(--mono);color:var(--m-ink);
  white-space:nowrap;pointer-events:none}
.mm.sel .tag{background:var(--m-ink);color:#fff;border-color:var(--m-ink)}
.mmarkers.nolabels .mm .tag{display:none}
.mmarkers.nolabels .mm.sel .tag{display:block}
.msv.mk-solid .mm .sym,.msv.mk-contrast .mm .sym{background:currentColor}
.msv.mk-contrast .mm .sym{box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px currentColor,0 1px 4px rgba(15,23,42,.45)}
.msv.mk-solid .mm.own .sym,.msv.mk-contrast .mm.own .sym{background:#fff}
.msv.mk-solid .mm.proposed .sym,.msv.mk-contrast .mm.proposed .sym{background:currentColor;border-color:#fff}

.mcap{position:fixed;z-index:30;top:calc(8px + var(--m-top));left:10px;right:10px;min-height:54px;display:flex;align-items:center;
  gap:6px;padding:0 8px 0 4px;border-radius:27px;background:rgba(255,255,255,.95);box-shadow:0 2px 10px rgba(15,27,45,.16)}
.mcapb{width:46px;height:46px;display:grid;place-items:center;color:var(--m-ink);flex:none}
.mcapt{display:flex;flex-direction:column;line-height:1.15;min-width:0;flex:1}
.mcapt b{font-size:16px;color:var(--m-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcapt small{font-size:12.5px;color:var(--m-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcap .mnet{max-width:62%}
.mlifechip{position:fixed;z-index:30;top:calc(72px + var(--m-top));right:10px;display:flex;flex-direction:column;align-items:flex-end;
  min-height:44px;justify-content:center;padding:4px 12px;border-radius:12px;border:0;background:rgba(255,255,255,.95);
  box-shadow:0 2px 8px rgba(15,27,45,.14);line-height:1.15;cursor:pointer}
.mlifechip small{font-size:12px;color:var(--m-muted)}
.mlifechip b{font-size:15px;color:var(--m-ink)}
.mlifechip.ro{cursor:default}
.mscale{position:fixed;z-index:20;left:12px;bottom:calc(118px + var(--m-bottom));display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;background:rgba(255,255,255,.92);padding:5px 9px;border-radius:8px;pointer-events:none}
.mscale i{display:block;height:6px;border:1.5px solid var(--m-ink);border-top:0;
  background:repeating-linear-gradient(90deg,var(--m-ink) 0 25%,transparent 25% 50%)}

.mbar{position:fixed;z-index:30;left:14px;right:14px;bottom:calc(18px + var(--m-bottom));height:76px;border-radius:24px;
  background:rgba(255,255,255,.97);box-shadow:0 6px 20px rgba(15,27,45,.22);display:flex;align-items:center;
  justify-content:space-between;padding:0 14px}
.mtb{position:relative;width:84px;height:62px;border:0;background:none;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;font-size:13px;font-weight:600;color:var(--m-ink);cursor:pointer}
.mtb em{position:absolute;top:2px;right:12px;min-width:20px;height:20px;border-radius:10px;background:var(--m-ink);color:#fff;
  font:700 11px/20px system-ui;font-style:normal;text-align:center;padding:0 5px}
.mtb em:empty{display:none}
.mfab{width:78px;height:78px;margin-top:-34px;border-radius:50%;border:0;background:var(--m-blue);color:#fff;display:grid;
  place-items:center;box-shadow:0 6px 16px rgba(22,104,201,.45),0 0 0 6px #fff;cursor:pointer}

/* placing */
.marm{position:fixed;z-index:31;top:calc(8px + var(--m-top));left:10px;right:10px;min-height:66px;border-radius:20px;
  background:rgba(255,255,255,.97);box-shadow:0 2px 10px rgba(15,27,45,.16);display:flex;align-items:center;gap:12px;padding:0 12px}
.marm-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.marm-t b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marm-t small{font-size:13px;color:var(--m-muted)}
html.m-placing .mcap,html.m-placing .mlifechip{display:none}
.mreticle{position:fixed;z-index:26;width:0;height:0;pointer-events:none}
.mreticle i{position:absolute;left:-46px;top:-46px;width:92px;height:92px;border-radius:50%;border:2.5px solid var(--m-blue);
  box-shadow:0 0 0 4000px rgba(15,27,45,.12)}
.mreticle i::before,.mreticle i::after{content:"";position:absolute;background:var(--m-blue)}
.mreticle i::before{left:50%;top:-14px;bottom:-14px;width:2px;margin-left:-1px;
  background:linear-gradient(var(--m-blue) 0 18px,transparent 18px calc(100% - 18px),var(--m-blue) calc(100% - 18px))}
.mreticle i::after{top:50%;left:-14px;right:-14px;height:2px;margin-top:-1px;
  background:linear-gradient(90deg,var(--m-blue) 0 18px,transparent 18px calc(100% - 18px),var(--m-blue) calc(100% - 18px))}
.mreticle span{position:absolute;left:-21px;top:-21px;width:42px;height:42px;border-radius:10px;border:2px dashed var(--m-blue);
  background:rgba(255,255,255,.88);display:grid;place-items:center}
.mreticle span svg{width:26px;height:26px}
.mhintp{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:calc(98px + var(--m-bottom));white-space:nowrap;
  background:var(--m-ink);color:#fff;font-size:14px;font-weight:500;padding:8px 14px;border-radius:18px;pointer-events:none}
.mplacebar{position:fixed;z-index:30;left:14px;right:14px;bottom:calc(22px + var(--m-bottom));display:grid;
  grid-template-columns:1fr 1.6fr;gap:10px}
.mplacebar .mbtn{min-height:50px;box-shadow:0 4px 14px rgba(15,27,45,.2)}
.mplacebar .mbtn.sec{background:#fff;color:var(--m-ink)}

/* the element */
.msheet.mel{z-index:40}
.msheet.mel.full{top:calc(8px + var(--m-top));max-height:none;background:var(--m-paper)}
.msheet.mel.full .mgrab{display:none}
.meh{display:flex;align-items:center;gap:10px;padding:4px 12px 8px 14px;flex:none}
.msheet.mel.full .meh{background:#fff;padding-top:14px;border-bottom:1px solid var(--m-line)}
.mcode{font-family:var(--mono);font-size:17px !important;white-space:nowrap}
.meh .met small{font-family:var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpills{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.mmiss{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:16px;font-size:14px;font-weight:600}
.mmiss.warn{background:var(--m-amber-2);color:var(--m-amber)}
.mmiss.ok{background:var(--m-green-2);color:var(--m-green)}
.mmiss.sm{min-height:24px;padding:0 9px;border-radius:7px;font-size:12.5px}
.mqa{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px;padding:0 12px 8px}
.mqa button{min-height:54px;border-radius:13px;border:0;background:var(--m-grey-2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;color:var(--m-ink);cursor:pointer}
.mqa button span{font-size:14.5px;font-weight:600}
.mqa button small{font-size:12px;color:var(--m-muted)}
.mjump{display:flex;gap:6px;padding:10px 16px;background:#fff;border-bottom:1px solid var(--m-line);overflow-x:auto;
  white-space:nowrap;flex:none;scrollbar-width:none}
.mjump:empty{display:none}
.mjump::-webkit-scrollbar{display:none}
.mjump button{flex:none;height:36px;padding:0 14px;border-radius:18px;border:0;font-size:14px;font-weight:600;
  color:var(--m-muted);background:var(--m-grey-2);cursor:pointer}
.mjump button.on{background:var(--m-ink);color:#fff}
.mwarn{margin:12px 16px 4px;padding:10px 12px;border-radius:12px;background:var(--m-amber-2);color:var(--m-amber);font-size:14px}
.mfs{margin:8px 10px 0;padding:12px;border-radius:14px;background:#fff}
.mfsh{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--m-muted);margin-bottom:10px}
.min,html.mob .mform input:not([type=checkbox]):not([type=radio]),html.mob .mform select,html.mob .mform textarea{
  width:100%;min-height:52px;border:1.5px solid var(--m-line);border-radius:14px;padding:10px 14px;font-size:16px;
  background:#fff;color:var(--m-ink)}
html.mob .mform select[multiple]{min-height:120px}
textarea.min,html.mob .mform textarea{min-height:96px}
html.mob .mform .field{margin-bottom:14px}
html.mob .mform label{font-size:14px;font-weight:600;color:var(--m-muted);margin-bottom:6px;display:block}
html.mob .mform label.check{display:flex;align-items:center;gap:12px;min-height:48px;color:var(--m-ink);font-size:16px}
html.mob .mform label.check input{width:26px;height:26px}
html.mob .mform .req{color:var(--m-red);margin-left:3px}
html.mob .mform .hint{font-size:13px;color:var(--m-muted);margin-top:5px}
html.mob .mform .err-msg{font-size:13px;color:var(--m-red);margin-top:5px}
.mdirrow{display:flex;align-items:center;gap:12px}
.mdirrow b{flex:1;font-size:22px;font-variant-numeric:tabular-nums}
.mdirrow .mbtn{width:auto;flex:none;min-width:140px}
.mtwo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mstep{display:flex;align-items:center;height:44px;border:1.5px solid var(--m-line);border-radius:12px;background:#fff;overflow:hidden}
.mstep button{width:46px;height:100%;border:0;font-size:22px;color:var(--m-blue);background:var(--m-grey-2);cursor:pointer}
.mstep button:disabled{color:var(--m-muted)}
.mstep b{flex:1;text-align:center;font-size:17px;font-variant-numeric:tabular-nums}
.mstep.big{height:50px}
.mstep.big b{font-size:21px}
.mslot{margin:0 0 14px}
.mslot-h{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.mslot-h b{font-size:15px}
.mslot-h b i{color:var(--m-red);font-style:normal}
.mslot-h small{font-size:13px;color:var(--m-amber)}
.mslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.mph{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--m-grey-2)}
.mph img{width:100%;height:100%;object-fit:cover;display:block}
.mph.add{border:2px dashed #E0B062;background:#FFFBF2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;color:var(--m-amber);font-size:13px;font-weight:600;text-align:center;padding:6px;cursor:pointer}
.mslot:not(.missing) .mph.add{border-color:var(--m-line);background:var(--m-paper);color:var(--m-blue)}
.mph-st{position:absolute;left:6px;bottom:6px;font-size:11px;font-weight:700;background:var(--m-ink);color:#fff;padding:2px 6px;border-radius:6px}
.mph-del{position:absolute;top:6px;right:6px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(15,27,45,.7);
  color:#fff;display:grid;place-items:center}
.mcheck{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mcheck li{display:flex;gap:10px;font-size:15px}
.mcheck li span{width:20px;text-align:center;font-weight:700}
.mcheck li.ok span{color:var(--m-green)}
.mcheck li.miss{color:var(--m-amber)}
.mfoot{display:flex;gap:8px;padding:8px 12px calc(8px + var(--m-bottom));background:#fff;border-top:1px solid var(--m-line);flex:none}
.mfoot .mbtn{flex:1}
.mib{width:50px;height:46px;border-radius:13px;border:0;background:var(--m-grey-2);display:grid;place-items:center;flex:none;cursor:pointer}
.mib.danger{color:var(--m-red)}

/* orienting */
.morient{position:fixed;inset:0;z-index:50;pointer-events:none}
html.m-orienting .msheet.mel,html.m-orienting .mbar{visibility:hidden}
.mdial{position:fixed;width:0;height:0;pointer-events:none}
.mdial::before{content:"";position:absolute;left:calc(-1 * var(--r,120px));top:calc(-1 * var(--r,120px));
  width:calc(2 * var(--r,120px));height:calc(2 * var(--r,120px));border-radius:50%;
  border:2px dashed rgba(22,104,201,.6);background:radial-gradient(circle,transparent 60%,rgba(22,104,201,.07) 61%)}
.mdn{position:absolute;left:-12px;top:-12px;width:24px;text-align:center;font-weight:800;font-size:15px;color:var(--m-ink);
  background:rgba(255,255,255,.85);border-radius:6px}
.mdh{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;background:var(--m-blue);pointer-events:auto;
  box-shadow:0 0 0 5px #fff,0 2px 8px rgba(15,27,45,.35);touch-action:none;cursor:grab}
.mdh.unset{background:#94A3B8}
.morp{position:absolute;left:0;right:0;bottom:0;pointer-events:auto;background:#fff;border-radius:24px 24px 0 0;
  padding:12px 14px calc(12px + var(--m-bottom));box-shadow:0 -8px 28px rgba(15,27,45,.22);display:grid;gap:9px}
.morp .mshh{padding:0}
.mdirs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mdirs button{height:40px;border:0;border-radius:12px;background:var(--m-grey-2);font-size:15px;font-weight:600;cursor:pointer}
.mdirs button.on{background:var(--m-blue);color:#fff}

/* a photograph's marks */
.mph img{cursor:zoom-in}
.mph.marked{box-shadow:inset 0 0 0 2.5px var(--m-blue)}
.mph-marks{position:absolute;left:6px;top:6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:var(--m-blue);color:#fff;font-size:12px;font-weight:700;line-height:22px;text-align:center}
/* The annotator takes the whole screen on a phone: the picture is the work. */
html.mob .modal.annot{padding:0;align-items:stretch}
html.mob .modal.annot .annot-card{max-width:none;width:100vw;height:100dvh;border-radius:0;
  padding:calc(8px + var(--m-top)) 10px calc(8px + var(--m-bottom))}
html.mob .modal.annot .annot-card .modal-head [data-act="max"]{display:none}
html.mob .modal.annot .iconbtn{width:40px;height:40px}
html.mob .modal.annot .annot-body{flex-direction:column;gap:8px;flex:1;min-height:0}
html.mob .modal.annot .annot-stage{flex:1;height:auto;min-height:0}
html.mob .modal.annot .annot-drawer{width:100%;flex:none;gap:6px;max-height:38vh;overflow-y:auto}
html.mob .modal.annot .annot-tools .btn{min-height:40px;font-size:14px}
html.mob .modal.annot .annot-sw{width:32px;height:32px}
html.mob .modal.annot .annot-icons{grid-template-columns:repeat(5,1fr)}
html.mob .modal.annot .annot-ic{height:40px}
html.mob .modal.annot .annot-actions{padding-top:8px;margin-top:8px}
html.mob .modal.annot .annot-actions .btn{min-height:46px;flex:1}
@media (orientation:landscape) and (max-height:500px){
  html.mob .modal.annot .annot-body{flex-direction:row}
  html.mob .modal.annot .annot-drawer{width:240px;max-height:none}
}

/* The plan's notes and photos, and the straightening of a photographed plan:
   the tablet's dialogs, taking the whole screen on a phone. */
.mrow em{min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--m-ink);color:#fff;
  font-size:12px;font-style:normal;font-weight:700;line-height:22px;text-align:center}
.mrow em[hidden]{display:none}
html.mob #planNotesModal,html.mob #rectModal{padding:0;align-items:stretch;justify-content:stretch}
html.mob #planNotesModal .modal-card,html.mob #rectModal .modal-card,html.mob #rectModal.maxi .modal-card{
  max-width:none;width:100vw;height:100dvh;max-height:none;border-radius:0;border:0;overflow-y:auto;
  padding:calc(12px + var(--m-top)) 16px calc(12px + var(--m-bottom))}
html.mob #planNotesModal .btn.sm,html.mob #rectModal .btn.sm{min-height:44px;font-size:15px;padding:0 16px}
html.mob #planNotesModal .btn.xs{min-height:36px;font-size:13px;padding:0 12px}
html.mob #planNotesModal #pnClose,html.mob #rectModal #rectClose{width:44px;padding:0}
html.mob #rectMax{display:none}
html.mob #planNotesModal textarea{font-size:16px}
html.mob .pn-body{font-size:15px}
html.mob .pn-shots{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
html.mob .pn-shot img{height:96px}
html.mob .pn-x{width:28px;height:28px}

/* messages and dialogs, sized for a phone */
html.mob .toast{bottom:auto;top:calc(72px + var(--m-top));font-size:14px;padding:10px 16px;border-radius:12px;z-index:400}
html.mob .modal{padding:16px;align-items:flex-end}
html.mob .modal-card{max-width:520px;border-radius:20px;padding:20px 18px calc(18px + var(--m-bottom))}
html.mob .modal-card h3{font-size:18px}
html.mob .modal-card .modal-msg{font-size:15px}
html.mob .modal-card .btn{min-height:48px;font-size:16px;padding:0 18px;border-radius:12px}
html.mob .modal-card .btn-row{gap:10px}

/* ---------- lying down ---------- */
@media (orientation:landscape) and (max-height:500px){
  .mcap{right:auto;width:min(440px,52vw);top:calc(6px + var(--m-top));min-height:48px}
  .mlifechip{top:calc(6px + var(--m-top));right:104px}
  .mbar{left:auto;right:calc(10px + env(safe-area-inset-right,0px));top:62px;bottom:12px;width:84px;height:auto;
    flex-direction:column;padding:8px 0}
  .mtb{width:72px;height:60px}
  .mfab{margin:0;width:62px;height:62px;box-shadow:0 4px 12px rgba(22,104,201,.45)}
  .mscale{bottom:12px}
  .mcredit{bottom:6px;right:100px}
  .msheet,.msheet.tall,.msheet.mel.full{left:auto;right:0;top:0;bottom:0;width:min(440px,52vw);height:auto;max-height:none;
    border-radius:24px 0 0 24px}
  .msheet .mgrab{display:none}
  .msheet .mshh{padding-top:14px}
  .marm{right:auto;width:min(440px,52vw);top:calc(6px + var(--m-top))}
  .mplacebar{left:50%;right:auto;width:min(440px,60vw);transform:translateX(-50%);bottom:12px}
  .mhintp{bottom:80px}
  .morp{left:auto;right:0;top:0;bottom:0;width:min(400px,48vw);border-radius:24px 0 0 24px;align-content:start;overflow-y:auto}
  .morp{gap:8px;padding-top:10px}
  .morp .mstep.big{height:48px}
  .morp .mstep{height:46px}
  .morp .mdirs button{height:38px}
  .morp .mbtn{min-height:46px}
  html.mob .toast{top:64px;left:calc((100vw - min(440px,52vw)) / 2)}
}

/* The page a scanned QR code opens. */
.mqr-lead{font-size:16px;line-height:1.45;color:var(--m-ink);margin:0}
.mqr-note{font-size:14px;line-height:1.45;color:var(--m-muted);margin:0}
.mcard form .mwarn{margin:0 0 12px}