/* draw and measure (src/globe/measure.js) */
.ms-modes{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 4px}
.ms-modes .chipbtn{border-color:var(--edge-dim)}
.ms-modes .chipbtn.on{color:#04060a;background:#ffd45c;border-color:#ffd45c}
#card .ms-hint{margin:6px 0 4px}
#card .ms-acts{margin-top:4px} #msOutline{margin:8px 0}
.ms-list{display:flex;flex-direction:column;gap:4px;max-height:28vh;overflow:auto;overscroll-behavior:contain}
.ms-row{display:grid;grid-template-columns:1fr auto;gap:2px 6px;align-items:start;padding:7px 9px;border-radius:9px;border:1px solid var(--edge-dim);background:rgba(230,237,243,.03)}
.ms-row.cur{border-color:rgba(255,212,92,.55);background:rgba(255,212,92,.05)}
.ms-name{justify-self:start;padding:0;border:0;background:none;font:700 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#ffd45c;text-align:left}
.ms-name:hover{text-decoration:underline}
.ms-x{border:0;background:none;color:var(--faint);font-size:17px;line-height:1;padding:0 4px}
.ms-x:hover{color:var(--ink)}
.ms-body{grid-column:1 / -1;display:flex;flex-direction:column;gap:2px;font:500 12px/1.45 var(--body)}
.ms-body.ms-solo{margin:-2px 0 4px}
.ms-n{font:600 13px/1.4 var(--mono);color:var(--ink)}
.ms-dim{color:var(--dim)} .ms-warn{color:#ffb44d} .ms-road{color:#7dffa6} .ms-road small{color:var(--faint)}
.ms-body .chipbtn{align-self:flex-start;padding:6px 10px;margin-top:2px;color:#7dffa6}
.ms-body details summary{cursor:pointer;color:var(--dim);font:500 11px/1.6 var(--mono)}
.ms-legs{margin:2px 0 0;padding-left:22px;max-height:130px;overflow:auto;font:500 11.5px/1.5 var(--mono);color:var(--dim)}
#card .chipbtn:disabled{opacity:.35;cursor:default;border-color:transparent}
#msTip{position:fixed;pointer-events:none;z-index:6;padding:5px 9px;border-radius:7px;font:500 11.5px/1.3 var(--mono);background:var(--glass-strong);border:1px solid rgba(255,212,92,.45);color:var(--ink);display:none;white-space:nowrap}
body.ms-armed #globe canvas{cursor:crosshair!important}
body.m .ms-list{max-height:24vh}
.ms-now{display:none}
#msMore{display:none} body.m #msMore{display:inline-flex}
/* phones while a tool is armed: the card is one slim strip just above the dock (the shape in two lines, Undo, Finish, ▴) */
#card:has(> #msCard.ms-slim){padding:5px 6px 5px 12px;bottom:calc(84px + env(safe-area-inset-bottom,0px))}
#msCard.ms-slim > :not(.ms-acts){display:none!important}
#msCard.ms-slim .ms-acts{margin:0;flex-wrap:nowrap;align-items:center;gap:4px}
#msCard.ms-slim .ms-full{display:none!important}
#msCard.ms-slim .ms-now{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;order:0}
#msCard.ms-slim .ms-now b{font:600 10px/1.35 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#ffd45c}
#msCard.ms-slim .ms-now span{font:600 12.5px/1.35 var(--mono);color:var(--ink)}
#msCard.ms-slim .ms-now b,#msCard.ms-slim .ms-now span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#msCard.ms-slim #msUndo{order:1} #msCard.ms-slim #msFinish{order:2;color:#ffd45c} #msCard.ms-slim #msMore{order:3}
#msCard.ms-slim #msUndo,#msCard.ms-slim #msMore{min-width:40px;justify-content:center;padding:8px;color:var(--ink)}
#msCard.ms-slim #msFinish{padding:8px 9px}
body:has(#msCard.ms-slim) #toast{bottom:calc(146px + env(safe-area-inset-bottom,0px))}
body.lookup #msTip{display:none!important}
@media (pointer:coarse){ .ms-x{font-size:22px;padding:4px 10px} .ms-name{padding:4px 0} }