/* Drawing viewer: toolbar, style panel, pages, thumbnails, split screen; minimum text sizes. (Files load in this order: base, layout, projects, viewer, editor, report, report-blocks — see index.html; later files win.) */
/* ---------- v0.2.7 one toolbar, page views, compact UI ---------- */
:root{--tb:32px;--tb-ic:18px;--pill:var(--accent-soft);--pill-ink:var(--accent)}
@media (pointer:coarse){:root{--tb:40px}}
.vbar{flex-wrap:nowrap;gap:6px;padding-block:5px;padding-right:max(12px,env(safe-area-inset-right,0px));padding-left:max(12px,env(safe-area-inset-left,0px));min-height:calc(var(--tb) + 10px);overflow:hidden}
.vbar.drop-open{overflow:visible}
.tb-left,.tb-right{display:flex;align-items:center;gap:4px;flex:none}
.tb-right{margin-left:auto}
.tb-btn{flex:none;min-width:var(--tb);height:var(--tb);display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 6px;border:1px solid transparent;border-radius:8px;background:none;color:var(--ink);cursor:pointer;font:500 13px/1 var(--f-sans);white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background .12s,border-color .12s,color .12s}
.tb-btn:hover{background:var(--surface)}
.tb-btn:active{background:var(--line)}
.tb-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tb-btn[aria-pressed="true"],.tb-btn.on{background:var(--pill);color:var(--pill-ink);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.tb-btn:disabled{opacity:.35;cursor:default;background:none}
.tb-pin{padding:0 10px 0 8px}
.tb-pin.arming{background:var(--accent);color:var(--accent-ink)}
.tb-group{display:flex;align-items:center;gap:2px}
.tb-sep{width:1px;height:20px;background:var(--line);margin:0 4px;flex:none}
.tb-tools{display:flex;align-items:center;position:relative}
.tb-drop{display:flex;align-items:center;gap:2px}
.tb-markup{display:none}
.tb-role{padding:0 4px}
.pager{display:flex;align-items:center;gap:0;font-family:var(--f-mono);font-size:13px;font-variant-numeric:tabular-nums}
.pager #pgLabel{min-width:54px;text-align:center}
.tb-zl{border:0;background:none;color:var(--ink);font:500 13px/1 var(--f-mono);min-width:48px;height:var(--tb);cursor:pointer;border-radius:6px;padding:0 2px}
.tb-zl:hover{background:var(--surface)}
.tb-pop{position:relative}
.view-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:12;min-width:236px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px;display:grid;gap:4px}
.view-menu[hidden]{display:none}
.vbar:has(.view-menu:not([hidden])){overflow:visible}
.vm-sec{display:grid;gap:2px;padding:2px 0}
.vm-sec+.vm-sec{border-top:1px solid var(--line);padding-top:6px}
.vm-item{display:flex;align-items:center;gap:10px;min-height:var(--tb);padding:0 8px;border:0;background:none;border-radius:7px;color:var(--ink);font:500 13px/1.2 var(--f-sans);cursor:pointer;text-align:left}
.vm-item:hover{background:var(--surface-2)}
.vm-item[aria-checked="true"]{background:var(--pill);color:var(--pill-ink)}
.vm-item:disabled{opacity:.4;cursor:default}
.vm-item span{flex:1}
kbd{font:500 11px/1 var(--f-mono);color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:2px 4px}
.vm-row{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);padding:2px 6px}
.vm-sel{border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--ink);padding:4px 6px;font-size:13px;min-height:30px}
.vm-step{display:flex}
.vm-step button{min-height:30px;padding:0 8px;font-size:13px}
.vm-note{margin:0;padding:4px 8px;font-size:13px;color:var(--muted)}
/* toolbar that does not fit: labels go, then the tools fold into "Markup", then the zoom buttons */
.vbar.tight .lbl{display:none}
.vbar.tight .tb-pin{padding:0 6px}
.vbar.compact .tb-markup{display:inline-flex}
.vbar.compact .tb-drop{display:none;position:fixed;left:8px;top:0;z-index:12;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px;flex-wrap:wrap;width:max-content;max-width:calc(100vw - 16px)}
.vbar.compact.drop-open .tb-drop{display:flex}
.vbar.compact .tb-drop .tb-sep{display:none}
.vbar.compact .tb-drop .tb-group{flex-wrap:wrap}   /* phone: all tools on two rows instead of running off the screen */
.vbar.compact .tb-drop{left:max(8px,env(safe-area-inset-left,0px));max-width:calc(100vw - 16px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}
.vbar.nozoom .tb-zoom{display:none}
.vbar.compact2 .pager #pgLabel{min-width:44px;font-size:12px}
.vbar.compact3 #mkShow,.vbar.compact3 .tb-count{display:none}
.vbar.compact4 #btnPages,.vbar.compact4 #btnView{display:none}
/* style panel under the toolbar */
/* floating, so showing it never moves the drawing under the pencil */
.mk-style{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:4px 6px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow);position:absolute;z-index:5;left:max(8px,env(safe-area-inset-left,0px));top:52px;max-width:calc(100% - 16px)}
.mk-style[hidden]{display:none}
.mk-style .grow{flex:0 0 4px}
.st-group{display:flex;align-items:center;gap:1px;flex-wrap:wrap}
.st-btn{min-width:var(--tb);height:var(--tb);display:inline-grid;place-items:center;border:1px solid transparent;border-radius:8px;background:none;color:var(--ink);cursor:pointer;padding:0;font:600 12px/1 var(--f-sans)}
.st-btn:hover{background:var(--surface-2)}
.st-btn[aria-pressed="true"]{background:var(--pill);color:var(--pill-ink);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.st-color i{width:16px;height:16px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.st-color[aria-pressed="true"]{background:none;border-color:transparent}
.st-color[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.st-width i{width:20px;background:currentColor;border-radius:4px;display:block}
.st-lw{min-width:calc(var(--tb) * .78);display:inline-flex;flex-direction:column;justify-content:center;gap:3px;font:600 11px/1 var(--f-mono,var(--f-sans));font-variant-numeric:tabular-nums}
.st-lw i{width:16px;background:currentColor;border-radius:3px;display:block}
.st-arc{min-width:calc(var(--tb) * .9)}
.st-font{width:var(--tb)}
.st-colors.two{display:grid;grid-template-columns:repeat(8,auto);gap:0 1px}
.st-colors.two .st-btn{height:calc(var(--tb) * .72);min-width:calc(var(--tb) * .8)}
.st-dash{color:var(--ink)}
/* v0.4.4: each setting folds into a small drop-down */
.dd{position:relative;display:inline-flex}
.dd-btn{display:inline-flex;align-items:center;gap:3px;padding:0 4px 0 6px;min-width:0}
.dd-btn .dd-chev{display:inline-flex;opacity:.55}
.dd.open>.dd-btn{background:var(--surface-2);border-color:var(--line)}
.dd-sw{width:16px;height:16px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.lw-prev{width:16px;background:currentColor;border-radius:3px;display:block}
.dd-num{font:600 11px/1 var(--f-mono,var(--f-sans));font-variant-numeric:tabular-nums}
.dd-pop{display:none;position:absolute;left:0;top:calc(100% + 4px);z-index:8;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:4px;width:max-content;max-width:min(340px,calc(100vw - 24px))}
.dd.open>.dd-pop{display:block}
.dd-pop .st-colors{display:grid;grid-template-columns:repeat(8,auto);gap:1px}
.dd-pop .st-ends{display:grid;grid-template-columns:repeat(3,auto)}
.st-end{min-width:calc(var(--tb) * 1.1)}
.mk-gsep{margin:0 2px}
.vbar.tight #mkbar .tb-btn{padding:0 4px;min-width:calc(var(--tb) - 4px)}   /* room for the group lines */
.vbar.compact .tb-drop .mk-gsep{display:block;margin:0 3px}   /* phone: groups still apart in the drop-down */
.st-count{font:600 12px/1 var(--f-sans);color:var(--muted);padding:0 4px;white-space:nowrap}
.mk-link{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.mk-link select{max-width:200px;border:1px solid var(--line);border-radius:7px;padding:5px 6px;background:var(--surface);color:var(--ink);font-size:13px;min-height:30px}
/* pages */
.pages{display:flex;justify-content:center;align-items:flex-start;gap:16px;min-width:min-content;transform-origin:0 0}
.pages[hidden]{display:none}
.pages.view-all{flex-direction:column;align-items:center;gap:28px;padding-bottom:16px}
.sheet{margin:0;flex:none;background:#fff center/100% 100% no-repeat}
.sheet canvas{width:100%;height:100%}
.sheet canvas.hi{position:absolute;pointer-events:none}
.sheet canvas.hi[hidden]{display:none}
.sheet .page-no{display:none}
.view-all .sheet .page-no,.view-two .sheet .page-no{display:block;position:absolute;left:0;top:-20px;font:600 12px/1 var(--f-mono);color:var(--muted);pointer-events:none}
.view-two .sheet .page-no{top:auto;bottom:-20px}
.view-two{padding-bottom:22px}
.scroller.panning,.scroller.space-pan,.scroller.space-pan *{cursor:grab}
.scroller.panning *{cursor:grabbing!important}
.mk-layer{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.mk-glow{fill:rgba(31,79,209,.07);stroke:#1f4fd1;stroke-width:2;stroke-dasharray:6 4}
.scroller[data-tool="pen"] .sheet,.scroller[data-tool="line"] .sheet,.scroller[data-tool="arrow"] .sheet,.scroller[data-tool="rect"] .sheet,
.scroller[data-tool="cloud"] .sheet,.scroller[data-tool="callout"] .sheet{cursor:crosshair}
.scroller[data-tool="text"] .sheet{cursor:text}
.scroller[data-tool="eraser"] .sheet{cursor:cell}
.scroller[data-tool="select"] .sheet{cursor:default}
.mk-textin{position:absolute;z-index:5;font:500 14px/1.3 var(--f-sans);padding:5px 7px;border:1.5px solid var(--accent);border-radius:4px;background:#fff;resize:none;min-height:46px;box-shadow:var(--shadow);-webkit-user-select:text;user-select:text}
.planwrap svg.mk-layer{width:100%;height:100%}
.thumb .vid.mk-badge{top:6px;bottom:auto;background:var(--accent);color:var(--accent-ink)}
/* page thumbnails */
.viewer{position:relative}
.pages-panel{position:absolute;z-index:6;right:0;top:0;bottom:0;width:min(300px,86%);background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow);display:grid;grid-template-rows:auto minmax(0,1fr)}
.pp-head{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-bottom:1px solid var(--line)}
.pp-head .icon-btn{margin-left:auto}
.pp-grid{overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;align-content:start}
.pthumb{display:grid;gap:4px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:6px;cursor:pointer;text-align:left;color:var(--ink);min-height:44px}
.pthumb:hover{border-color:var(--accent)}
.pthumb.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.pt-img{display:block;aspect-ratio:10/7;background:#fff;border-radius:4px;overflow:hidden}
.pt-img img{width:100%;height:100%;object-fit:contain;display:block}
.pt-meta{display:flex;align-items:baseline;gap:6px;font-size:13px;min-width:0}
.pt-meta b{font-family:var(--f-mono)}
.pt-count{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* text never below 13 px in the app chrome */
.stats h2{font-size:13px}
.rmeta{font-size:13px}
.num{font-size:13px}
.vbar.compact2 .pager #pgLabel{font-size:13px}
.pt-count{font-size:13px}
.vm-zoom{display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:13px;color:var(--muted)}
.vm-zoom span{flex:1}
.vm-zoom b{font:500 13px/1 var(--f-mono);color:var(--ink);min-width:44px;text-align:center}
.scroller{scrollbar-gutter:stable}
/* ---------- split screen (v0.2.7) ---------- */
.viewer>.panes{grid-row:2}
.panes{--split-bar:8px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0;min-width:0}
.pane{position:relative;display:grid;grid-template-rows:minmax(0,1fr);min-height:0;min-width:0}
.pane[hidden]{display:none}
.pane>.scroller{min-height:0;min-width:0}
#pane1{grid-template-rows:auto minmax(0,1fr)}
.panes.split .pane::after{content:"";position:absolute;inset:0;pointer-events:none;border:2px solid transparent;border-radius:2px;transition:border-color .15s;z-index:4}
.panes.split .pane.active::after{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.pane.drop-page::after{border-color:var(--accent)!important;border-style:dashed!important;background:var(--accent-soft);opacity:.6}
.split-bar{position:relative;z-index:5;background:var(--surface-2);border-inline:1px solid var(--line);cursor:col-resize;touch-action:none}
.split-bar[hidden]{display:none}
.split-bar::before{content:"";position:absolute;inset:0 -10px}            /* ≥ 26 px touch zone */
.split-bar span{position:absolute;left:50%;top:50%;width:4px;height:36px;margin:-18px 0 0 -2px;border-radius:2px;background:var(--muted);opacity:.55}
.split-bar:hover span,.split-bar.dragging span,.split-bar:focus-visible span{background:var(--accent);opacity:1}
.panes.col .split-bar{cursor:row-resize;border-inline:0;border-block:1px solid var(--line)}
.panes.col .split-bar::before{inset:-10px 0}
.panes.col .split-bar span{width:36px;height:4px;margin:-2px 0 0 -18px}
.pane-head{display:flex;align-items:center;gap:6px;padding:4px 8px;border-bottom:1px solid var(--line);background:var(--surface-2);min-width:0}
.pane-head select{min-width:0;max-width:60%;border:1px solid var(--line);border-radius:7px;padding:4px 6px;background:var(--surface);color:var(--ink);font-size:13px;min-height:30px}
.pane-head .p2-draw{flex:0 1 auto;font-weight:600}
.pane-head .p2-page{flex:none;font-family:var(--f-mono)}
.pane-head .ph-gap{flex:1}
#btnSplit[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
#btnSplit[hidden]{display:none}
.pthumb-wrap{position:relative}
.pthumb-wrap .pthumb{width:100%}
.pt-open2{position:absolute;right:6px;bottom:6px;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);cursor:pointer}
.pt-open2:hover{border-color:var(--accent);color:var(--accent)}
.pthumb.on2{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),inset 0 0 0 2px var(--surface)}
.pthumb.on2 .pt-meta b::after{content:" · 2";color:var(--accent)}
.draw-menu{max-height:60vh;overflow:auto;z-index:50}
@media (pointer:coarse){.pane-head select{min-height:36px}.pt-open2{width:36px;height:36px}}
/* v0.3.7: scale, measuring, stamps, signature */
.st-scale{display:inline-flex;align-items:center;gap:5px;padding:0 8px;width:auto}
.st-scale span{font:600 12px/1 var(--f-sans);white-space:nowrap}
.st-select{border:1px solid var(--line);border-radius:7px;padding:5px 6px;background:var(--surface);color:var(--ink);font:600 12px/1 var(--f-sans);min-height:30px}
.scaledlg .dlg-body{display:grid;gap:12px}
.sc-units{display:flex;gap:6px;flex-wrap:wrap}
.sc-box{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:10px}
.sc-box h3{margin:0;font-size:14px}
.sc-row{display:flex;gap:8px}.sc-row select{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--surface);color:var(--ink);font-size:14px}
.scaledlg .chk{display:flex;gap:8px;align-items:center;font-size:14px}
.sig-canvas{width:100%;max-width:600px;aspect-ratio:600/220;border:1px solid var(--line);border-radius:10px;background:#fff;touch-action:none;display:block}
.sig-actions{display:flex;gap:8px;margin-top:10px}.sig-actions .grow{flex:1}
#mkLoupe{position:fixed;z-index:50;width:120px;height:120px;border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:none}
#mkLoupe[hidden]{display:none}
/* v0.4.2: floating (non-modal) windows: Scale, calibration — dragged by the header, the drawing stays usable */
.modal.floating{background:transparent;pointer-events:none;display:block;padding:0}
.modal.floating .dlg{pointer-events:auto;position:fixed;margin:0;width:min(360px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:auto;box-shadow:0 14px 40px rgba(0,0,0,.28),0 0 0 1px var(--line);transition:opacity .12s}
.modal.floating .dlg-head{touch-action:none;user-select:none;-webkit-user-select:none}
@media (pointer:fine){.modal.floating .dlg-head{cursor:move}.modal.floating .dlg-head button{cursor:pointer}}
.modal.floating.moving .dlg{opacity:.72}
.drag-grip{display:inline-grid;place-items:center;color:var(--muted);margin:0 6px 0 -4px;align-self:center}
.mu{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.mu-l{flex-basis:100%;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.mu .st-select{max-width:140px}
.mu-box{display:grid;gap:6px}
.sum-face{font:600 12px/1 var(--f-mono,var(--f-sans));white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.sum-face b{font-family:var(--f-sans);margin-right:2px}
.sum-tab{border-collapse:collapse;font:12px/1.3 var(--f-sans);color:var(--ink);margin:2px}
.sum-tab th,.sum-tab td{padding:5px 8px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
.sum-tab th{text-transform:none;letter-spacing:0;background:none;color:var(--ink)}
.sum-tab th:first-child{text-align:left;font-weight:500}
.sum-tab th .dd-sw{display:inline-block;width:11px;height:11px;vertical-align:-1px;margin-right:6px}
.sum-tab thead th{font-weight:600;color:var(--muted);font-size:11px}
.sum-tab td{font-family:var(--f-mono,var(--f-sans));font-variant-numeric:tabular-nums}
.sum-tab small{color:var(--muted)}
.sum-note{margin:6px 8px 4px;font-size:11px;color:var(--muted);max-width:300px}
.dd[data-dd="sum"] .dd-pop{left:auto;right:0;max-width:calc(100vw - 24px)}
.sum-tab{width:max-content}
/* v0.5.1 Pages panel: head with Select / delete set, select bar and removed pages under the grid */
.pages-panel{grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr)}
.pp-head>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-head .icon-btn,.pp-head .pp-sel-btn{margin-left:0}
/* v0.5.6 rotation in the style panel */
.st-rot{display:inline-flex;align-items:center;gap:2px}
.st-rot .st-btn{min-width:0;padding:0 7px;font-size:12.5px;font-weight:600}
.st-rotin{display:inline-flex;align-items:center;gap:3px;color:var(--muted)}
.st-rotin input{width:54px;height:30px;padding:0 6px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font:500 13px/1 var(--f-mono,inherit);text-align:right}
.mk-sel .mk-rot{cursor:grab}
/* v0.5.7 compact style panel: Fill and Rotation are drop-downs, Snap / Guides icon only */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#mkSnap,#mkGuides{min-width:var(--tb);padding:0}
.dd-btn .dd-name{font:500 12px/1 var(--f-sans);max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-btn .fill-ic{flex:none}
.dd-pop .st-fills{display:grid;grid-template-columns:repeat(5,auto);gap:2px}
.dd-pop .st-sub{display:flex;align-items:center;gap:2px;margin-top:4px;padding-top:4px;border-top:1px solid var(--line)}
.dd-pop .st-sub>span{font:600 11px/1 var(--f-sans);color:var(--muted);min-width:52px}
.dd-pop .st-sub .st-btn{min-width:calc(var(--tb) * 1.05);font-size:12px}
.st-btn:disabled{opacity:.35;cursor:default}
.dd-pop .st-rot{display:flex}
.dd-pop .mk-link select{max-width:280px;min-height:var(--tb)}
.dd[data-dd="link"] .dd-btn svg{width:16px;height:16px}
.mk-style{gap:3px}
.mk-style .tb-sep{margin:0 1px}
/* v0.5.7.3 buttons with a light edge and shadow (style panel, its drop-downs, the tool bar) */
.mk-style .st-btn,.dd-pop .st-btn{border-color:var(--line);background:var(--surface);box-shadow:0 1px 2px rgba(15,23,42,.07)}
.mk-style .st-btn:hover,.dd-pop .st-btn:hover{background:var(--surface-2)}
.mk-style .st-btn[aria-pressed="true"],.dd-pop .st-btn[aria-pressed="true"]{background:var(--pill);color:var(--pill-ink);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.dd-pop .st-group,.dd-pop .st-sub,.dd-pop .st-rot{gap:4px}
.dd-pop .st-colors{gap:4px}
.dd-pop{padding:6px}
.st-defs{display:flex;flex-direction:column;gap:4px;min-width:200px}
.st-defs .st-btn{justify-content:start;display:flex;padding:0 12px;font-weight:500;font-size:13px}
#mkbar .tb-btn,#vbar>.tb-btn{border-color:color-mix(in srgb,var(--line) 70%,transparent);box-shadow:0 1px 2px rgba(15,23,42,.05)}
/* v0.5.7.4 icon-only toggles centred; text sizes as a grid of numbers */
#mkSnap,#mkGuides{display:inline-grid;place-items:center;gap:0;width:var(--tb);padding:0}
.dd-pop .st-fzs{display:grid;grid-template-columns:repeat(6,auto);gap:4px}
/* v0.5.7.5 tool bar: smaller buttons before anything folds away; the zoom stays */
.vbar.mini{--tb:34px;gap:3px}.vbar.mini .tb-sep{margin:0 2px}.vbar.mini #mkbar .tb-btn{padding:0 2px;min-width:var(--tb)}
.vbar.mini2{--tb:30px;gap:2px}.vbar.mini2 .tb-btn svg{width:16px;height:16px}.vbar.mini2 .tb-sep{margin:0 1px}
.vbar.nozlabel #zLabel{display:none}
@media (pointer:coarse){.mk-style{--tb:36px}}
/* account always top right; the project buttons wrap on the left of it */
.top{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr) auto;align-items:center}
.top>.actions:not(.top-me){justify-content:flex-end;flex-wrap:wrap;min-width:0}
.top>.top-me{flex-wrap:nowrap;justify-self:end}
/* phone on its side (or any short screen): everything as small as it goes, so the drawing keeps the room */
@media (max-height:500px) and (orientation:landscape){
  :root{--tb:30px}
  .top{padding-block:3px;gap:4px}.top .btn{min-height:30px;padding-inline:8px}.top .btn .lbl,.top .who,.top #signOut span,.top-left a.logo.home .logo-txt{display:none}
  .top-left h1{font-size:14px}.top-left a.logo.home{min-height:28px}
  .vbar{padding-block:2px;gap:2px;min-height:34px}.vbar .tb-btn svg{width:16px;height:16px}
  .mk-style{--tb:30px;padding:2px 4px;top:38px}
}
@media (max-width:1279px){.top .btn .lbl{display:none}.top .btn{padding-inline:10px}#drawSel{max-width:240px}}
@media (max-height:500px) and (orientation:landscape){.top .btn .lbl-r,.top-left h1{display:none}#drawSel{max-width:170px}.top{grid-template-columns:auto minmax(0,1fr) auto}}
/* v0.5.7.6 phone upright: the header stays one row (title shrinks, More holds the account) */
.compact .top{display:flex;flex-wrap:nowrap}
.compact .top>.top-left{flex:1 1 auto;min-width:0}
.compact .top>.actions:not(.top-me){flex:none;flex-wrap:nowrap}
.compact .top>.top-me{display:none}
/* v0.5.7.6 phone on its side: the list panel scrolls as a whole (the page itself stays put), smaller text */
@media (max-height:500px) and (orientation:landscape) and (min-width:861px){
  main.proj .panel-list{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;min-height:0;height:100%}
  main.proj .panel-list .list{overflow:visible}
  main.proj .panel{--pfs:12px;overflow:hidden}
  main.proj .panel .chip{min-height:30px;padding-block:2px}
}
@media (max-height:500px) and (orientation:landscape){html,body{overscroll-behavior:none}}