/* THE LIGHTBOX: ON PHONES AND TOUCH TABLETS (5 Nov 2026; js/designs/x-lb-phone.js, whose header documents every part; docs/DESIGNER-LIGHTBOX-PLAN-2026-11-05.md).
   Linked after css/designer-lightbox.css. Every rule is scoped to html.dzlb (the Lightbox) and uses its tokens (--lb-ink, --lb-sel, --lb-sel-line,
   --lb-lime, --lb-line, --lb-focus...). Corners are tokens, never pills; nothing under 12 px; every target 44 px. Phones are 860 px and under
   (design.html phone()); a phone on its side (landscape, 520 px tall or less) opens the sheets from the sides; 600 to 860 px (small tablets
   upright) float the sheets as cards; touch tablets above 860 px keep the desktop frame with touch sizes (the last block). */
html.dzlb .lbp-dock,html.dzlb .lbp-sides,html.dzlb .lbp-price,html.dzlb .lbp-grow,html.dzlb .lbp-hist:empty{display:none}

@media (max-width:860px){
  html.dzlb .dz3{--dz-bar:56px;--dz-tb:60px;--dz-sheet:52vh;--lbp-full:calc(100vh - var(--dz-bar) - var(--dz-tb) - 10px - env(safe-area-inset-bottom,0px))}
  @supports (height:100dvh){ html.dzlb .dz3{--lbp-full:calc(100dvh - var(--dz-bar) - var(--dz-tb) - 10px - env(safe-area-inset-bottom,0px))} }
  html.dzlb .dz3.dzp-compact{--dz-sheet:40vh}   /* a piece bar tile's short sheet (x-piecebar.js) */
  /* THE PAGE ABOVE THE SHEET (6 Nov 2026): an open half-height sheet keeps its height free under the page (plus the Undo capsule over it), so
     x-lb-phone.js sheetFit fits the page into the part that shows; a full-height sheet, a phone on its side and the 600 to 860 px cards leave the page as it is */
  /* the drag handles never select words (6 Nov 2026: a mouse drag on the grab line selected the whole panel, and the next drag carried the selection
     away instead of the sheet: dragstart, then pointercancel) */
  html.dzlb .dz3 :is(.dz-grab,.dzp-grab,.dz-panel-h,.dzp-head,.dz-insp>.dzi-h){-webkit-user-select:none;user-select:none}
  @media (max-width:599px){ html.dzlb .dz3.dz-sheet-panel:not(.lbp-full) .dz-canvaswrap,html.dzlb .dz3.dz-sheet-insp:not(.lbp-full) .dz-canvaswrap{padding-bottom:calc(var(--dz-sheet) + 58px)} }
  html.dzlb body.dz-app{background:#fff}

  /* ===== 1. the compact top bar: Back, the name over its save state, the price, the main button ===== */
  html.dzlb .dz-bar{grid-template-columns:minmax(0,1fr) auto;height:var(--dz-bar);padding:0 8px 0 4px;gap:6px;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--lb-line)}
  html.dzlb .dz-bar-l{gap:2px;min-width:0}
  html.dzlb #dzBack{width:44px;height:44px;flex:none;color:var(--lb-ink);border-radius:var(--radius)}
  html.dzlb #dzBack>svg{width:20px;height:20px}
  html.dzlb .dz-doc{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-width:0;padding:0 2px}
  html.dzlb .dz-doc-n{max-width:100%;font-size:14px;font-weight:500;line-height:1.2;color:var(--lb-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.dzlb .dz-doc .dz-doc-size{display:none}
  html.dzlb .dz-doc .dz-saved{display:block;max-width:100%;min-width:0;padding:0;font-size:var(--lb-sub-size);font-weight:500;line-height:1.25;color:var(--lb-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.dzlb .dz-doc .dz-saved svg{width:14px;height:14px;vertical-align:-2px;margin-right:3px}
  html.dzlb .dz-doc .dz-saved .dz-dot{width:6px;height:6px;margin-right:5px;vertical-align:1px}
  html.dzlb .dz-bar-r{gap:4px}
  html.dzlb .dz-bar-r>.dz-ib{width:44px;height:44px;color:var(--lb-ink)}
  html.dzlb .lbp-hist{display:none;align-items:center;gap:0}
  html.dzlb .lbp-hist .dz-ib{width:44px;height:44px;color:var(--lb-ink)}
  html.dzlb .lbp-hist .dz-ib:disabled{color:var(--lb-ink-off)}
  /* under 600 px these leave the top bar: More, Preview and the Print Check are in the More sheet; Undo and Redo are the page's capsule */
  html.dzlb .dz-bar #dzFull,html.dzlb .dz-bar #dzxbBar,html.dzlb .dz-bar .lb-price,html.dzlb .dz-bar #dzBeta{display:none!important}
  html.dzlb .dz-bar #dzMore,html.dzlb .dz-bar #dzPreviewBtn{display:none}
  html.dzlb .dz-bar-r>.dz-btn2:not(#dzPreviewBtn){width:44px;height:44px;padding:0;justify-content:center;background:transparent;box-shadow:none;color:var(--lb-ink)}
  html.dzlb .dz-bar-r>.dz-btn2:not(#dzPreviewBtn) span{display:none}
  /* the price: a button that opens the page card as a sheet */
  html.dzlb .lbp-price:not([hidden]){display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:1px;height:44px;padding:0 8px;border:0;border-radius:var(--radius);background:transparent;color:var(--lb-ink);font:inherit;line-height:1.15;white-space:nowrap;cursor:pointer}
  html.dzlb .lbp-price span{font-size:12px;font-weight:500;color:var(--lb-ink-2)}
  html.dzlb .lbp-price b{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
  html.dzlb .lbp-price:active{background:var(--lb-raised)}
  html.dzlb .lbp-price:focus-visible{outline:0;box-shadow:var(--lb-focus)}
  /* the main button: lime, "Order" on the button (data-lbp-short), its whole name for screen readers */
  html.dzlb .dz-bar .btn.dz-finish{height:44px;min-width:64px;padding:0 14px;gap:0;border:0;border-radius:var(--radius);corner-shape:round;background:var(--lb-lime);color:var(--on-primary);box-shadow:none}
  html.dzlb .dz-bar .btn.dz-finish:active{background:var(--lb-lime-press);color:var(--on-primary)}
  html.dzlb .dz-bar .btn.dz-finish>svg{display:none}
  html.dzlb .dz-bar .dz-finish span{font-size:0}
  html.dzlb .dz-bar .dz-finish span::before{content:"Order";font-size:14px;font-weight:500;color:inherit}
  html.dzlb .dz-bar .dz-finish span[data-lbp-short]::before{content:attr(data-lbp-short)}

  /* ===== 2. the dock: Details, Designs, Text, Pictures, Elements, More (the classic tool bar hides) ===== */
  html.dzlb .dz3 .dz-tabs{display:none!important}
  html.dzlb .lbp-dock{grid-row:3;grid-column:1;z-index:25;display:flex;align-items:stretch;justify-content:space-between;gap:0;min-width:0;padding:0 2px env(safe-area-inset-bottom,0px);background:#fff;box-shadow:0 -1px 0 var(--lb-line)}
  html.dzlb .lbp-dk{position:relative;flex:1 1 auto;min-width:44px;min-height:var(--dz-tb);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 2px 5px;border:0;border-radius:var(--radius);background:transparent;color:var(--lb-ink);font:inherit;font-size:12px;font-weight:500;line-height:1.1;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
  html.dzlb .lbp-dk svg{width:22px;height:22px;flex:none;stroke-width:var(--lb-icon-w);color:var(--lb-icon)}
  html.dzlb .lbp-dk:active{background:var(--lb-raised)}
  html.dzlb .lbp-dk[aria-pressed="true"]{background:var(--lb-sel);box-shadow:inset 0 0 0 1px var(--lb-sel-line);font-weight:500}
  html.dzlb .lbp-dk:focus-visible{outline:0;box-shadow:var(--lb-focus)}
  html.dzlb .lbp-dk[aria-pressed="true"]:focus-visible{box-shadow:inset 0 0 0 1px var(--lb-sel-line),var(--lb-focus)}
  html.dzlb .lbp-badge{position:absolute;top:3px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 4px;font-style:normal;font-size:12px;font-weight:500;line-height:18px;text-align:center;border-radius:var(--tag-radius-s);corner-shape:var(--tag-shape);background:var(--lb-warn-bg);color:var(--lb-warn);box-shadow:inset 0 0 0 1px var(--lb-warn-line);pointer-events:none}
  /* a picked piece: the piece bar takes the dock's place; Select Multiple's own bar too */
  html.dzlb .dz3.dz-has-sel.lbp-pbar>.lbp-dock,html.dzlb .dz3.dzm-on>.lbp-dock{visibility:hidden}

  /* ===== 3. the More sheet: Search Everything and the tiles over More Tools ===== */
  html.dzlb .lbp-more{display:grid;gap:12px;margin:4px 0 14px}
  html.dzlb .lbp-msearch{display:grid;grid-template-columns:20px minmax(0,1fr);grid-template-areas:"i t" "i s";align-items:center;column-gap:12px;row-gap:1px;width:100%;min-height:52px;padding:8px 14px;border:0;border-radius:var(--radius);background:var(--lb-raised);box-shadow:inset 0 0 0 1px var(--lb-line);color:var(--lb-ink);font:inherit;text-align:left;cursor:pointer}
  html.dzlb .lbp-msearch svg{grid-area:i;color:var(--lb-ink)}
  html.dzlb .lbp-msearch span{grid-area:t;font-size:14px;font-weight:500}
  html.dzlb .lbp-msearch small{grid-area:s;font-size:var(--lb-sub-size);color:var(--lb-sub)}
  html.dzlb .lbp-msearch:active{background:var(--lb-raised-2)}
  html.dzlb .lbp-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
  html.dzlb .lbp-mt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:76px;padding:10px 4px 8px;border:0;border-radius:var(--radius);background:#fff;box-shadow:inset 0 0 0 1px var(--lb-line);color:var(--lb-ink);font:inherit;font-size:12px;font-weight:500;line-height:1.2;text-align:center;cursor:pointer}
  html.dzlb .lbp-mt[hidden]{display:none}
  html.dzlb .lbp-mt svg{width:22px;height:22px;color:var(--lb-icon);stroke-width:var(--lb-icon-w)}
  html.dzlb .lbp-mt:active{background:var(--lb-raised)}
  html.dzlb .lbp-mt:focus-visible,html.dzlb .lbp-msearch:focus-visible{outline:0;box-shadow:var(--lb-focus)}
  html.dzlb [data-dzpane="lbtools"] .lbt-top+.lbp-more{margin-top:12px}

  /* ===== 4. the sheets: white, a grab line, a header that drags, two heights ===== */
  html.dzlb .dz3 .dz-panel,html.dzlb .dz3 .dz-insp{background:#fff;border-radius:var(--radius) var(--radius) 0 0;box-shadow:0 -1px 0 var(--lb-line),0 -10px 30px rgba(27,39,51,.12);transition:transform .3s cubic-bezier(.32,.72,0,1),height .25s ease}
  html.dzlb .dz3 .lbp-dragging{transition:none!important}
  html.dzlb .dz3.lbp-full .dz-panel,html.dzlb .dz3.lbp-full .dz-insp{height:var(--lbp-full)}
  html.dzlb .dz3 .dz-panel .dz-grab{position:relative;width:100%;height:22px;margin:0;flex:none;background:transparent;border-radius:0;cursor:ns-resize;touch-action:none}
  html.dzlb .dz3 .dz-panel .dz-grab::before{content:"";position:absolute;left:50%;top:8px;width:36px;height:4px;margin-left:-18px;border-radius:var(--bar-r);background:#C7CCD0}
  html.dzlb .dz3 .dz-panel .dz-grab:focus-visible{outline:0}
  html.dzlb .dz3 .dz-panel .dz-grab:focus-visible::before{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--lb-primary)}
  html.dzlb .dz3 .dz-panel-h{align-items:center;min-height:48px;padding:0 6px 4px 18px;touch-action:none}
  html.dzlb .dz3 .dz-panel-h h3{font-size:15px;font-weight:500;color:var(--lb-ink)}
  html.dzlb .dz3 .dz-panel-h .dz-ib{width:44px;height:44px;color:var(--lb-ink)}
  html.dzlb .dz3 .dz-panel-h .dz-ib svg{transform:none}
  html.dzlb .dz3 .dz-panel-h>div{min-width:0;flex:1}
  html.dzlb .lbp-grow{display:inline-grid;place-items:center;flex:none}
  html.dzlb .dz3 .lb-switch:not([hidden]){display:flex;margin:0 16px 10px;flex:none}
  html.dzlb .dz3 .lb-switch>button{flex:1;min-height:44px;font-size:13px}
  html.dzlb .dz3 .dz-panel-b{padding:2px 16px 28px;overscroll-behavior:contain}
  /* the inspector sheet: its header stays at the top and drags; a grab line over it */
  html.dzlb .dz3 .dz-insp{overscroll-behavior:contain}
  html.dzlb .dz3 .dz-insp>.dzi-h{position:sticky;top:0;z-index:3;padding-top:22px;background:#fff;touch-action:none}
  html.dzlb .dz3 .dz-insp>.dzi-h::before{content:"";position:absolute;left:50%;top:8px;width:36px;height:4px;margin-left:-18px;border-radius:var(--bar-r);background:#C7CCD0}
  html.dzlb .dz3 .dz-insp .dzi-done{min-height:44px;padding:0 16px}
  html.dzlb .dz3 .dzp-head{touch-action:none;padding:0 6px 0 16px}
  html.dzlb .dz3 .dzp-grab{width:36px;height:4px;margin:8px auto 2px;background:#C7CCD0}
  html.dzlb .dz3 .dzp-head-r{min-height:44px}
  html.dzlb .dz3 .dzp-head-r b{font-size:15px;font-weight:500}
  html.dzlb .dz3 .dzp-head-r .dz-ib{width:44px;height:44px;color:var(--lb-ink)}
  html.dzlb .dz3 .dzi-tabs button{min-height:44px}

  /* the bright look inside the sheets: quiet headings, white fields with a 1 px edge, outlined secondary buttons */
  html.dzlb .dz3 .dz-h{font-size:13px;font-weight:500;color:var(--lb-ink)}
  html.dzlb .dz3 .dz-h small,html.dzlb .dz3 .dz-hint,html.dzlb .dz3 .dz-foot,html.dzlb .dz3 .dz-fhint{font-size:var(--lb-sub-size);color:var(--lb-sub)}
  html.dzlb .dz3 .dz-btn2{background:#fff;color:var(--lb-ink);box-shadow:inset 0 0 0 1px var(--lb-line-firm)}
  html.dzlb .dz3 .dz-btn2:active:not(:disabled){background:var(--lb-raised)}
  html.dzlb .dz3 .dz-btn2 svg{color:var(--lb-ink)}
  html.dzlb .dz-panel input[type=text],html.dzlb .dz-panel input[type=email],html.dzlb .dz-panel input[type=tel],html.dzlb .dz-panel input[type=url],html.dzlb .dz-panel input[type=number],html.dzlb .dz-panel input[type=search],html.dzlb .dz-panel textarea,html.dzlb .dz-panel select,
  html.dzlb .dz-insp input[type=text],html.dzlb .dz-insp input[type=number],html.dzlb .dz-insp textarea,html.dzlb .dz-insp select,html.dzlb .dz-insp .dz-popbtn{background:#fff;border:1px solid var(--lb-line-field);border-radius:var(--radius)}
  html.dzlb .dz-panel .dz-search input{background:#fff;border:1px solid var(--lb-line-field);border-radius:var(--radius)}
  html.dzlb .dz-panel input:focus-visible,html.dzlb .dz-panel textarea:focus-visible,html.dzlb .dz-insp input:focus-visible,html.dzlb .dz-insp textarea:focus-visible{outline:0;border-color:var(--lb-primary);box-shadow:0 0 0 1px var(--lb-primary)}
  html.dzlb .dz3 .dz-seg{background:var(--lb-raised);box-shadow:inset 0 0 0 1px var(--lb-line)}
  html.dzlb .dz3 .dz-seg>button{color:var(--lb-ink-2)}
  html.dzlb .dz3 .dz-seg>button[aria-pressed="true"],html.dzlb .dz3 .dz-seg>button[aria-selected="true"],html.dzlb .dz3 .dz-seg>button[aria-checked="true"]{background:#fff;color:var(--lb-ink);box-shadow:0 0 0 1px var(--lb-line-firm),0 1px 1px rgba(27,39,51,.05)}
  html.dzlb .dz3 .dz-swrow input:checked+.dz-switch{background:var(--lb-lime)}
  /* nothing under 12 px in the sheets: the gallery's counts and colour names, small notes, the staff template numbers */
  html.dzlb .dz3 .dz-panel-b :is(small,.dzg-count,.dzg-p,.tn-no,.dz-hint,.dz-blank small),html.dzlb .dz3 .dz-insp :is(small,.dz-hint,.tn-no){font-size:12px}
  html.dzlb .dz3 :is(.dz-panel-b,.dz-insp) :is(.dz-seg>button,.dz-combo span,.st-spaced,.dz-elgo button,.dz-elgo span,.dz-art span,.dzx-pf-n,.dzx-cl-sl output,.dzx-bc-note,.dzx-h-or,.dz-lg-n,.dz-lg i,.dz-new,.dz-tool span,
    .dzb-k,.dzb-live,.dzb-count,.dzbrain-kind,.dzbrain-finding p,.dz-well span,.dz-pal-n,.dzx-f-hero p,.tn-flag,.dzx-g-n,.dzx-g-status,.dzx-g-hint,.dzx-h-qadd span){font-size:12px}
  html.dzlb .dz3 .dz-panel-b button>i:not([class]){font-size:12px}

  /* ===== 5. the piece bar in the bright look: Done first with its word, 12 px words, the chosen tile on the lime tint ===== */
  html.dzlb .dz3 .dzp-bar{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-top:0;box-shadow:0 -1px 0 var(--lb-line)}
  html.dzlb .dz3 .dzp-tiles{padding:0 2px}
  html.dzlb .dz3 .dzp-tiles button{min-width:64px;min-height:var(--dz-tb);gap:4px;padding:6px 6px 5px;color:var(--lb-ink);font-size:12px;font-weight:500;letter-spacing:-.01em}
  html.dzlb .dz3 .dzp-tiles button svg{width:22px;height:22px;color:var(--lb-icon);opacity:1;stroke-width:var(--lb-icon-w)}
  html.dzlb .dz3 .dzp-tiles button:active{background:var(--lb-raised)}
  html.dzlb .dz3 .dzp-tiles button[aria-pressed="true"]{background:var(--lb-sel);box-shadow:inset 0 0 0 1px var(--lb-sel-line);color:var(--lb-ink);font-weight:500}
  html.dzlb .dz3 .dzp-tiles button[aria-pressed="true"] svg{color:var(--lb-ink)}
  html.dzlb .dz3 .dzp-done{order:-1;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:auto;min-width:60px;height:auto;min-height:var(--dz-tb);margin:0;padding:6px 8px 5px;border-radius:var(--radius);background:transparent;color:var(--lb-ink);font:inherit;font-size:12px;font-weight:500;box-shadow:1px 0 0 var(--lb-line)}
  html.dzlb .dz3 .dzp-done svg{width:22px;height:22px}
  html.dzlb .dz3 .dzp-done:active{background:var(--lb-raised);filter:none}
  html.dzlb .dz3 .dzp-bar button:focus-visible{outline:0;box-shadow:var(--lb-focus)}
  /* the float pill over the piece: 44 px buttons */
  html.dzlb .dz3 .dz-float{border-radius:var(--radius);corner-shape:round;box-shadow:var(--lb-sh-float),0 0 0 1px rgba(27,39,51,.05)}
  html.dzlb .dz3 .dz-float button{min-width:44px;min-height:44px;color:var(--lb-ink);border-radius:var(--radius-sm)}
  html.dzlb .dz3 .dz-float.dzp-trim [data-pmore]{width:44px;height:44px}

  /* ===== 6. the page: the side switch and Page button at the top, Undo and Redo and the zoom at the foot ===== */
  html.dzlb .dz3 .dz-stage{background:var(--lb-ws)}
  html.dzlb .dz3 .dz-canvaswrap{padding:64px 12px 72px}
  html.dzlb .dz3.dz-1side .dz-canvaswrap{padding-bottom:72px}
  html.dzlb .dz3 .dz-canvasbox{box-shadow:var(--lb-sh-paper)}
  html.dzlb .dz3 .dz-pages{display:none!important}
  html.dzlb .lbp-sides{position:absolute;z-index:10;top:8px;left:50%;transform:translateX(-50%);max-width:calc(100% - 16px);display:flex;align-items:center;gap:6px}
  html.dzlb .lbp-sides:empty{display:none}
  html.dzlb .lbp-sw{display:flex;gap:2px;min-width:0;padding:2px;border-radius:var(--radius);background:var(--lb-raised);box-shadow:inset 0 0 0 1px var(--lb-line),var(--lb-sh-float)}
  html.dzlb .lbp-side{display:inline-flex;align-items:center;gap:7px;min-height:44px;min-width:44px;padding:0 12px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--lb-ink-2);font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
  html.dzlb .lbp-side b{font-weight:500}
  html.dzlb .lbp-side[aria-checked="true"]{background:#fff;color:var(--lb-ink);box-shadow:0 0 0 1px var(--lb-line-firm),0 1px 2px rgba(27,39,51,.07)}
  html.dzlb .lbp-side:focus-visible,html.dzlb .lbp-pagebtn:focus-visible{outline:0;box-shadow:var(--lb-focus)}
  html.dzlb .lbp-ss{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--lb-ink-2)}
  html.dzlb .lbp-ss i{width:6px;height:6px;border-radius:50%;background:var(--lb-ink-3)}
  html.dzlb .lbp-ss.warn{color:var(--lb-warn)}
  html.dzlb .lbp-ss.warn i{background:var(--lb-warn-icon)}
  html.dzlb .lbp-ss.ok svg{color:var(--lb-ink-2)}
  html.dzlb .lbp-side-add{color:var(--lb-ink)}
  html.dzlb .lbp-side-add svg{color:var(--lb-ink-2)}
  html.dzlb .lbp-pagebtn{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:48px;min-width:48px;padding:0 12px;border:0;border-radius:var(--radius);background:#fff;color:var(--lb-ink);font:inherit;font-size:13px;font-weight:500;box-shadow:var(--lb-sh-float),0 0 0 1px rgba(27,39,51,.06);cursor:pointer}
  html.dzlb .lbp-pagebtn svg{color:var(--lb-ink-2)}
  html.dzlb .dz3 .dz-edge,html.dzlb .dz3 .dz-drawbar{top:62px}
  /* the Fill In My Details offer stays one compact card under the side switch (7 Nov 2026, Junaid: it was pinned top and bottom at once and
     stretched over the whole page): the words on a row, the two buttons under them on the right */
  html.dzlb .dz3 .dz-edge.dz-fill{bottom:auto;width:min(460px,calc(100% - 24px));flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:10px 10px 10px 12px}
  html.dzlb .dz3 .dz-edge.dz-fill>span{flex:1 1 calc(100% - 52px);min-width:0;font-size:13px;line-height:1.4}
  html.dzlb .dz3 .dz-edge.dz-fill :is(#dzFillYes,.dz-fill-no){height:44px}
  /* Undo and Redo: the page's own capsule at the foot on the left; it rises above an open half-height sheet */
  html.dzlb .dz3 .dz-hist{top:auto;bottom:12px;left:10px;gap:0;padding:2px;border-radius:var(--radius);corner-shape:round;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--lb-sh-float),0 0 0 1px rgba(27,39,51,.06)}
  html.dzlb .dz3 .dz-hist button{width:44px;height:44px;padding:0;justify-content:center;gap:0;font-size:0;border-radius:var(--radius-sm);color:var(--lb-ink)}
  html.dzlb .dz3 .dz-hist button svg{width:20px;height:20px;color:var(--lb-ink)}
  html.dzlb .dz3.dz-sheet-panel .dz-hist,html.dzlb .dz3.dz-sheet-insp .dz-hist{bottom:calc(var(--dz-sheet) + 10px)}
  html.dzlb .dz3.lbp-full .dz-hist{display:none}
  /* the zoom capsule: the foot on the right, 44 px */
  html.dzlb .dz3 .dz-view{right:10px;bottom:12px;gap:0;padding:2px;border-radius:var(--radius);corner-shape:round;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--lb-sh-float),0 0 0 1px rgba(27,39,51,.06)}
  html.dzlb .dz3 .dz-view .dz-ib{width:44px;height:44px;color:var(--lb-ink)}
  html.dzlb .dz3 .dz-view .dz-zoom{min-width:52px;height:44px;font-size:12px;font-weight:500;color:var(--lb-ink);font-variant-numeric:tabular-nums}
  html.dzlb .dz3 .dz-view .dz-vsep{width:1px;height:20px;margin:0 2px;background:var(--lb-line)}

  /* ===== 7. the keyboard: the studio inside the visible part, sheets on the keyboard ===== */
  html.dzlb.lbp-kbup body.dz-app main.dz{top:var(--lbp-vt,0px);bottom:auto;height:var(--lbp-vh,100%)}
  html.dzlb.lbp-kbup .dz3 .dz-panel,html.dzlb.lbp-kbup .dz3 .dz-insp{bottom:calc(var(--dz-tb) + var(--lbp-cover,0px));max-height:calc(var(--lbp-vh,100vh) - var(--dz-bar) - var(--dz-tb) - 8px)}
  html.dzlb.lbp-kbup .dz3.dz-sheet-panel{--dz-tb:0px}
  html.dzlb.lbp-kbup .dz3.dz-sheet-panel>.lbp-dock{display:none}
  html.dzlb.lbp-kbup .dz3 .dz-hist,html.dzlb.lbp-kbup .dz3 .dz-view,html.dzlb.lbp-kbup .lbp-sides,html.dzlb.lbp-kbup .dz3 .dz-float{visibility:hidden}   /* while typing, the piece bar has what the float bar has */
  /* a closed sheet never peeks out where the keyboard is; a short sheet (the piece bar's Edit, Size...) takes only the room its controls need, so the page shows above it */
  html.dzlb.lbp-kbup .dz3:not(.dz-sheet-panel) .dz-panel,html.dzlb.lbp-kbup .dz3:not(.dz-sheet-insp) .dz-insp{visibility:hidden}
  html.dzlb.lbp-kbup .dz3.dzp-compact .dz-insp{height:auto}
  html.dzlb .dz3.lbp-kbpad .dz-canvaswrap{padding-bottom:calc(var(--lbp-vh,60vh) * .6)}
}

/* phones (under 600 px): the top bar is Back, the name, the price and the main button; every other top-bar button (More, Preview, Print Lens,
   a plug-in's own) is a tile in the More sheet (x-lb-phone.js moreTiles) */
@media (max-width:599px){
  html.dzlb .dz-bar-r>*:not(.lbp-hist):not(#dzNotif):not(.lbp-price):not(#dzFinish){display:none!important}
}
/* no sliding for those who ask for less motion */
@media (max-width:860px) and (prefers-reduced-motion:reduce){
  html.dzlb .dz3 .dz-panel,html.dzlb .dz3 .dz-insp{transition:none}
}
/* phones under 360 px: the price keeps its words, the main button its room */
@media (max-width:359px){
  html.dzlb .lbp-price{padding:0 4px}
  html.dzlb .dz-bar .btn.dz-finish{padding:0 12px}
  html.dzlb .lbp-side{padding:0 9px}
  html.dzlb .lbp-pagebtn span{display:none}
}

/* small tablets upright and big phones on their side (600 to 860 px): Undo, Redo, Preview and More in the top bar; the dock's slots keep a
   phone's size, centred; the sheets float as cards beside the page */
@media (min-width:600px) and (max-width:860px){
  html.dzlb .lbp-hist:not(:empty){display:inline-flex}
  html.dzlb .dz3 .dz-hist{display:none!important}
  html.dzlb .dz-bar #dzMore:not([hidden]){display:inline-grid}
  html.dzlb .dz-bar #dzPreviewBtn{display:inline-flex;width:44px;height:44px;padding:0;justify-content:center;background:transparent;box-shadow:none;color:var(--lb-ink)}
  html.dzlb .dz-bar #dzPreviewBtn span{display:none}
  html.dzlb .lbp-dock{justify-content:center}
  html.dzlb .lbp-dk{flex:0 1 104px}
  html.dzlb .dz3 .dz-panel{left:12px;right:auto;width:min(480px,calc(100% - 24px));bottom:calc(var(--dz-tb) + 12px + env(safe-area-inset-bottom,0px));border-radius:var(--radius);box-shadow:var(--lb-sh-float),0 0 0 1px rgba(27,39,51,.08),0 18px 40px -12px rgba(27,39,51,.24)}
  html.dzlb .dz3 .dz-insp{left:auto;right:12px;width:min(420px,calc(100% - 24px));bottom:calc(var(--dz-tb) + 12px + env(safe-area-inset-bottom,0px));border-radius:var(--radius);box-shadow:var(--lb-sh-float),0 0 0 1px rgba(27,39,51,.08),0 18px 40px -12px rgba(27,39,51,.24)}
  html.dzlb .dz3{--lbp-full:calc(100vh - var(--dz-bar) - var(--dz-tb) - 36px)}
  /* the sheets float beside the page, so the page keeps its place and size when one opens */
  html.dzlb .dz3.dz-sheet-panel .dz-canvaswrap,html.dzlb .dz3.dz-sheet-insp .dz-canvaswrap{padding-bottom:72px}
  @supports (height:100dvh){ html.dzlb .dz3{--lbp-full:calc(100dvh - var(--dz-bar) - var(--dz-tb) - 36px)} }
  html.dzlb.lbp-kbup .dz3 .dz-panel,html.dzlb.lbp-kbup .dz3 .dz-insp{bottom:calc(var(--dz-tb) + var(--lbp-cover,0px) + 8px)}
}

/* a phone on its side (landscape, 520 px tall or less): the tool panel from the left, the inspector from the right, the page beside them;
   no grab line (they are not dragged taller) */
@media (max-width:860px) and (orientation:landscape) and (max-height:520px){
  html.dzlb .dz3{--dz-bar:52px;--dz-tb:52px;--lbp-side:min(360px,46vw)}
  html.dzlb .lbp-dk{flex-direction:row;gap:6px;min-height:52px}
  html.dzlb .lbp-badge{top:2px;left:auto;right:4px}
  html.dzlb .dz3 .dz-panel,html.dzlb .dz3 .dz-insp{top:calc(var(--dz-bar) + 6px);bottom:calc(var(--dz-tb) + 6px + env(safe-area-inset-bottom,0px));height:auto!important;width:var(--lbp-side);border-radius:var(--radius);box-shadow:var(--lb-sh-float),0 0 0 1px rgba(27,39,51,.08),0 18px 40px -12px rgba(27,39,51,.24)}
  html.dzlb .dz3 .dz-panel{left:6px;right:auto;transform:translateX(calc(-100% - 24px))}
  html.dzlb .dz3 .dz-insp{left:auto;right:6px;transform:translateX(calc(100% + 24px))}
  html.dzlb .dz3.dz-sheet-panel .dz-panel,html.dzlb .dz3.dz-sheet-insp .dz-insp{transform:none}
  html.dzlb .dz3 .dz-panel .dz-grab,html.dzlb .lbp-grow,html.dzlb .dz3 .dz-insp>.dzi-h::before,html.dzlb .dz3 .dzp-grab{display:none}
  html.dzlb .dz3 .dz-insp>.dzi-h{padding-top:12px}
  html.dzlb .dz3 .dz-canvaswrap{padding:60px 12px 60px}
  html.dzlb .dz3.dz-sheet-panel .dz-canvaswrap{padding-bottom:60px;padding-left:calc(var(--lbp-side) + 18px)}
  html.dzlb .dz3.dz-sheet-insp .dz-canvaswrap{padding-bottom:60px;padding-right:calc(var(--lbp-side) + 18px)}
  html.dzlb .dz3.dz-sheet-panel .dz-hist,html.dzlb .dz3.dz-sheet-insp .dz-hist{bottom:12px}
  html.dzlb .dz3.dz-sheet-panel .dz-hist{left:calc(var(--lbp-side) + 16px)}
  html.dzlb .dz3.dz-sheet-panel .lbp-sides{left:calc(50% + var(--lbp-side) / 2)}
  html.dzlb .dz3.dz-sheet-insp .lbp-sides{left:calc(50% - var(--lbp-side) / 2)}
}

/* ===== 8. touch tablets with room (861 px and up, a coarse pointer): the desktop frame with 44 px targets on its chrome ===== */
@media (min-width:861px) and (pointer:coarse){
  html.dzlb #dzBack{min-height:44px}
  html.dzlb .dz-bar .btn.dz-finish{height:44px}
  html.dzlb .lb-side{height:44px}
  html.dzlb .lb-sides{padding:2px}
  html.dzlb .lb-hist .dz-ib,html.dzlb .dz-bar-r .dz-ib,html.dzlb .dz-bar-r .dz-btn2,html.dzlb #dzPreviewBtn{min-width:44px;min-height:44px}
  html.dzlb .dz-savegrp .dz-btn2{height:44px}
  html.dzlb .dz-doc-n{min-height:24px}
  html.dzlb .lb-switch>button{min-height:44px}
  html.dzlb .lb-right-x,html.dzlb .dz-panel-h .dz-ib{width:44px;height:44px}
  html.dzlb .lb-right-h button{min-height:44px}
  html.dzlb .dz-view .dz-ib,html.dzlb .dz-view #dzZoomLbl{min-height:44px;min-width:44px}
  html.dzlb .dz3 .dz-float button{min-width:44px;min-height:44px}
  html.dzlb .dz3 .dzi-done,html.dzlb .dz3 .dzi-tabs button{min-height:44px}
  html.dzlb .lb-cx-btn{min-height:44px;min-width:44px}
  /* the picked piece's toolbar above the page (x-lb-inspector.js): touch sizes for its fields and buttons */
  html.dzlb .lb-ctx input,html.dzlb .lb-ctx select{min-height:44px;min-width:48px}
  html.dzlb .lb-ctx .lbx-b,html.dzlb .lb-ctx button{min-width:44px;min-height:44px}
}

/* TAP TARGETS (6 Nov 2026, the overnight audit: the brand tip's close button was 28 x 28 px on a phone): a small close button keeps its look and
   takes a 44 px finger area round it */
@media (max-width:899px),(pointer:coarse){
  html.dzlb .dz-bc-x::after{content:"";position:absolute;inset:-8px}
  /* the colour swatches (Draw, More Colours) and the live check's badge on the page: the same look, a finger-sized area */
  html.dzlb .dz-sw,html.dzlb .dzc-more,html.dzlb .dzg-cols button{position:relative}
  html.dzlb .dz-sw::after,html.dzlb .dzc-more::after,html.dzlb .dzx-b-badge::after,html.dzlb .dzg-cols button::after{content:"";position:absolute;inset:-8px}
}

/* TOASTS ABOVE THE FLOATING BARS (6 Nov 2026): on phones the designer's notes sit above the undo and view bar, which sits above the dock */
@media (max-width:860px){ html.dzlb .dzx-b-toast,html.dzlb .dzx-v-toast{bottom:calc(134px + env(safe-area-inset-bottom,0px))} }

/* KEEP THE ARTWORK USABLE WHILE EDITING DETAILS (launch audit F11, 9 Nov 2026): on a 344 px phone the half-height sheet left the page 79 px wide;
   on a 768 px tablet the floating panel sat over the lower half of the page and the name being edited. Phones: the sheet takes 46% of the
   height, not 52%. Tablets (600 to 860 px): the open tool panel docks down the right-hand side and the page is fitted into the space beside
   it (x-lb-phone.js sheetFit refits there too), so nothing being edited is covered. */
@media (max-width:599px){ html.dzlb .dz3{--dz-sheet:46vh} }
@media (min-width:600px) and (max-width:860px) and (orientation:portrait){
  html.dzlb .dz3.dz-sheet-panel .dz-panel{left:auto;right:12px;top:calc(var(--dz-bar) + 12px);bottom:calc(var(--dz-tb) + 12px + env(safe-area-inset-bottom,0px));height:auto;width:min(340px,44vw);max-height:none}
  html.dzlb .dz3.dz-sheet-panel .dz-canvaswrap{padding-right:calc(min(340px,44vw) + 24px);padding-bottom:24px}
}