:root{
  --bg:#eef0f3;
  --surface:#ffffff;
  --surface-2:#f6f7f9;
  --border:#e3e6eb;
  --border-strong:#d3d7de;
  --text:#1f2430;
  --text-dim:#6b7280;
  --text-faint:#9aa1ac;
  --primary:#2f6fed;
  --primary-hover:#255fd1;
  --primary-soft:rgba(47,111,237,.10);
  --primary-soft-strong:rgba(47,111,237,.16);
  --accent-2:#f5a524;
  --accent-2-soft:rgba(245,165,36,.16);
  --danger:#e0483e;
  --danger-soft:rgba(224,72,62,.10);
  --paper-shadow:rgba(31,36,48,.18);
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --shadow-md: 0 4px 14px rgba(16,24,40,.10);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.16);
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  overflow:hidden;
}
button, select, input{ font-family: var(--sans); }
button:focus-visible, select:focus-visible, [tabindex]:focus-visible, div[contenteditable]:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

#app{ display:flex; flex-direction:column; height:100vh; }

/* ---------- Toolbar ---------- */
#toolbar{
  display:flex; align-items:stretch;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 8px 14px; gap: 4px; flex-wrap: wrap; flex-shrink:0;
  position: relative;
  z-index: 20;
}
.brand{
  display:flex; flex-direction:column; justify-content:center;
  padding-right:16px; margin-right:10px; border-right:1px solid var(--border);
}
.brand-mark{ font-weight:700; font-size:14.5px; letter-spacing:-.01em; color: var(--text); }
.brand-file{
  font-size:11px; color: var(--text-faint); margin-top:2px;
  max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tgroup{ display:flex; align-items:center; gap:2px; padding: 0 8px; border-right: 1px solid var(--border); position:relative; }
.tgroup:last-of-type{ border-right:none; }
.tbtn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:54px; height:50px; background:transparent; border:1px solid transparent; border-radius:9px;
  color: var(--text-dim); cursor:pointer; transition: background .12s, color .12s, border-color .12s;
}
.tbtn svg{ width:18px; height:18px; }
.tbtn-label{ font-size:10px; font-weight:500; letter-spacing:.01em; }
.tbtn:hover:not(:disabled){ background: var(--surface-2); color: var(--text); }
.tbtn.active{ background: var(--primary-soft); color: var(--primary); border-color: rgba(47,111,237,.28); }
.tbtn.danger:hover:not(:disabled){ background: var(--danger-soft); color: var(--danger); }
.tbtn:disabled{ opacity:.35; cursor:not-allowed; }
.tbtn.primary{ background: var(--primary); color: #fff; border-color: var(--primary); }
.tbtn.primary:hover:not(:disabled){ background: var(--primary-hover); color:#fff; }
.tbtn.primary:disabled{ opacity:.4; }
.spacer{ flex:1; }

/* ---------- Popovers (watermark / page numbers) ---------- */
.popover-group{ position:relative; }
.popover{
  display:none;
  position:absolute; top:calc(100% + 8px); left:0;
  background: var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow: var(--shadow-lg); padding:16px; width:230px; z-index:30;
}
.popover.show{ display:block; }
.popover-title{ font-weight:600; font-size:13px; margin-bottom:12px; }
.pf-label{ display:block; font-size:11px; font-weight:500; color: var(--text-dim); margin:10px 0 6px; }
.pf-input{
  width:100%; padding:7px 9px; border:1px solid var(--border-strong); border-radius:7px;
  font-size:12.5px; color: var(--text); background: var(--surface);
}
.pf-input:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.pf-check{ display:flex; align-items:center; gap:8px; font-size:12.5px; color: var(--text); }
.pf-row{ margin-top:10px; }
.pf-readout{ float:right; color: var(--text-faint); font-weight:400; }
#wmOpacity, #pnStartAt{ width:100%; }
input[type=range]{ accent-color: var(--primary); }

/* Shape button: shows the currently-picked shape's icon (updated on
   selection from the dropdown below), same footprint as any other .tbtn. */
.tbtn-shape-icon{ display:flex; align-items:center; justify-content:center; width:18px; height:18px; }
.tbtn-shape-icon svg{ width:18px; height:18px; }

/* Shape picker dropdown: a simple icon+label list (Rectangle, Ellipse,
   Line, Arrow, Polygon, Polyline), grouping every shape tool behind one
   toolbar button -- matches the reference editor's single "shapes" menu
   instead of a separate flat button per shape. */
.shape-menu{ width:172px; padding:8px; }
.shape-menu .popover-title{ margin: 2px 6px 8px; }
.shape-menu-item{
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px;
  background:transparent; border:none; border-radius:8px; cursor:pointer;
  color: var(--text); font-size:13px; font-family:inherit; text-align:left;
}
.shape-menu-item svg{ width:18px; height:18px; flex-shrink:0; color: var(--text-dim); }
.shape-menu-item:hover{ background: var(--surface-2); }
.shape-menu-item.active{ background: var(--primary-soft); color: var(--primary); }
.shape-menu-item.active svg{ color: var(--primary); }

/* ---------- Body layout ---------- */
#body{ flex:1; display:flex; min-height:0; }

#thumbs{
  width:164px; flex-shrink:0; background: var(--surface); border-right:1px solid var(--border);
  overflow-y:auto; padding:14px 12px;
}
.thumb-item{ margin-bottom:16px; cursor:grab; }
.thumb-item.dragging{ opacity:.35; }
.thumb-frame{
  border:2px solid transparent; border-radius:6px; overflow:hidden; background:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-sm);
}
.thumb-item.selected .thumb-frame{ border-color: var(--primary); }
.thumb-frame canvas{ display:block; }
.thumb-num{ font-size:10.5px; color: var(--text-faint); text-align:center; margin-top:6px; font-weight:500; }
.thumb-item.selected .thumb-num{ color: var(--primary); }

#stage{
  flex:1; position:relative; overflow:auto; display:flex; align-items:flex-start; justify-content:center;
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(31,36,48,.06) 1px, transparent 1px);
  background-size: 20px 20px;
  padding:48px 40px;
}
#page-indicator{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  font-size:11.5px; font-weight:500; color: var(--text-dim);
  background: var(--surface); padding:6px 14px; border-radius:20px; border:1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

#zoomPill{
  position:absolute; bottom:18px; right:22px;
  display:flex; align-items:center; gap:2px;
  background: var(--surface); border:1px solid var(--border); border-radius:20px;
  box-shadow: var(--shadow-md); padding:4px; z-index:15;
}
#zoomPill button{
  border:none; background:transparent; color: var(--text-dim); cursor:pointer;
  width:28px; height:28px; border-radius:14px; font-size:15px; display:flex; align-items:center; justify-content:center;
}
#zoomPill button:hover{ background: var(--surface-2); color: var(--text); }
#zoomReadout{ font-size:11px; color: var(--text-dim); width:42px; text-align:center; font-weight:500; }
#zoomPill #zoomReset{ font-size:10px; font-weight:600; width:auto; padding:0 10px; }

#empty-state{ margin:auto; text-align:center; max-width:420px; }
#dropzone{
  border:2px dashed var(--border-strong); border-radius:16px; padding:52px 36px; cursor:pointer;
  background: var(--surface);
  transition: border-color .15s, background .15s;
}
#dropzone:hover, #dropzone.hover{ border-color: var(--primary); background: var(--primary-soft); }
#dropzone svg{ width:34px; height:34px; color: var(--text-faint); margin-bottom:14px; }
#dropzone h2{ font-size:17px; font-weight:700; margin:0 0 6px; color: var(--text); }
#dropzone p{ font-size:12px; color: var(--text-dim); margin:0; }

/* A CSS transform (used for zoom, see #rotator below) shrinks/rotates its
   element purely visually -- it does NOT reduce the LAYOUT SPACE that
   element's ancestors reserve for it, which is still the full, unscaled
   page size. Left alone, #stage (which scrolls) would keep reserving that
   full unscaled height/width even at a small zoom level, and centering
   the (still full-size, just visually tiny) content within it would plant
   the actually-visible pixels somewhere in the middle of a mostly-empty
   scroll area -- on a phone, often scrolled hundreds of pixels below the
   initially-visible fold. #canvas-wrap's own box is instead explicitly
   sized to the true post-zoom visual footprint (see applyTransform() in
   editor.js), with this flex centering ensuring #rotator's scale/rotate
   transform -- which pivots around ITS OWN center -- shrinks toward a
   center point that already coincides with this box's center, so the
   visible result exactly fills it with no dead space to scroll through. */
#canvas-wrap{ display:none; margin-top:34px; align-items:center; justify-content:center; }
#rotator{
  position:relative; background: #fff; box-shadow: 0 20px 50px var(--paper-shadow);
  transform-origin:center center; border-radius:2px;
}
@media (prefers-reduced-motion: no-preference){ #rotator{ transition: transform .22s ease; } }
#pageCanvas{ display:block; }
/* touch-action:none so a touch-drag on the page (Pen, Select-and-move,
   drawing a highlight/erase/shape box, resize handles, ...) is handled
   entirely by our own pointerdown/move/up listeners instead of the
   browser also trying to scroll/pan/zoom the page in response to the
   same gesture -- without this, touch dragging on the canvas is
   unreliable at best (fights with native scrolling) on phones/tablets. */
#overlay{ position:absolute; inset:0; pointer-events:auto; touch-action:none; }
#overlay.tool-select{ cursor:default; }
#overlay.tool-text{ cursor: text; }
#overlay.tool-edit-text{ cursor: text; }
#overlay.tool-highlight, #overlay.tool-erase, #overlay.tool-shape-rect{ cursor: crosshair; }
#overlay.tool-shape-line, #overlay.tool-draw{ cursor: crosshair; }
#overlay.tool-shape-ellipse, #overlay.tool-shape-arrow{ cursor: crosshair; }
#overlay.tool-shape-polygon, #overlay.tool-shape-polyline{ cursor: crosshair; }
#vectorLayer{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.annot{ position:absolute; }

/* Text box: idle state has no visible chrome at all (matches the reference
   editors -- a text box looks like plain page content until you interact
   with it). Hover gives a faint hint it's interactive; selected gets the
   same thin dashed outline convention used by every other annotation type;
   editing gets a solid caret-ready outline plus a text cursor. Fixed-size
   box (w/h come from the annotation, not auto-grow) so the generic resize
   handles apply exactly like they do for erase/rect/image. */
.text-annot{
  cursor:pointer; line-height:1.2; border:1px dashed transparent; border-radius:2px;
  overflow:visible;
}
.text-annot:hover{ border-color: rgba(47,111,237,.30); }
.text-annot.selected{ border-color: rgba(47,111,237,.55); }
.text-annot.editing{ cursor:text; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.text-annot .text-body{
  width:100%; height:100%; outline:none; white-space:pre-wrap; word-break:break-word;
  overflow-wrap:break-word; padding:1px 2px; cursor:inherit;
}
.text-annot:not(.editing) .text-body{ pointer-events:none; user-select:none; }
.text-annot.empty:not(.editing) .text-body::before{ content: attr(data-placeholder); color:#9aa3b8; pointer-events:none; }
/* Un-forked existing-PDF text runs: a lightweight hit-target only, no
   visible chrome until hovered, so browsing the page doesn't look like
   every word is a form field. The moment one is clicked it gets forked
   into a real annotation (see editor.js) and rendered with the normal
   .text-annot rules above instead of this class. */
.text-annot.pdf-source{ border-color: transparent !important; box-shadow:none; cursor:text; }
.text-annot.pdf-source:hover{ border-color: rgba(47,111,237,.22) !important; }
/* These hit-targets blanket most of the visible page, so they must get out
   of the way unless the Edit Text tool is active -- otherwise highlighting,
   erasing, drawing, or even just selecting/moving other boxes anywhere
   existing text appears would fork that text instead. Add Text (for
   stamping new boxes) and Select (for moving already-created annotations)
   deliberately do NOT trigger a fork; only Edit Text does, matching the
   reference editor's dedicated "Edit Text" tool. */
#overlay:not(.tool-edit-text) .pdf-run-hit{ pointer-events: none; }

.highlight-annot{ background: rgba(245,165,36,.35); border:1px dashed transparent; border-radius:3px; cursor:move; }
.highlight-annot.selected{ border-color: var(--accent-2); }

/* Erase range: no border/label while idle. Selecting it reveals only a
   thin, subtle, transparent dashed outline plus resize handles -- never a
   thick, rounded, or distracting frame, and never a text label. */
.erase-annot{ cursor:move; border-radius:0; border:1px dashed transparent; }
.erase-annot.selected{ border-color: rgba(47,111,237,.55); }

/* Resize handles: created only for erase ranges, and only ever shown while
   that range is the selected annotation (see .annot.selected below). */
.resize-handle{
  position:absolute; width:10px; height:10px; background:#fff;
  border:1.5px solid var(--primary); border-radius:2px; display:none; z-index:6;
}
.annot.selected .resize-handle{ display:block; }
.resize-handle.handle-nw{ top:-6px; left:-6px; cursor:nwse-resize; }
.resize-handle.handle-n{ top:-6px; left:50%; margin-left:-5px; cursor:ns-resize; }
.resize-handle.handle-ne{ top:-6px; right:-6px; cursor:nesw-resize; }
.resize-handle.handle-e{ top:50%; right:-6px; margin-top:-5px; cursor:ew-resize; }
.resize-handle.handle-se{ bottom:-6px; right:-6px; cursor:nwse-resize; }
.resize-handle.handle-s{ bottom:-6px; left:50%; margin-left:-5px; cursor:ns-resize; }
.resize-handle.handle-sw{ bottom:-6px; left:-6px; cursor:nesw-resize; }
.resize-handle.handle-w{ top:50%; left:-6px; margin-top:-5px; cursor:ew-resize; }

.shape-rect-annot{ border:1px dashed transparent; cursor:move; }
.shape-rect-annot.selected{ border-color: var(--primary); background: rgba(47,111,237,.04); }

/* Ellipse: an ordinary bounding-box wrapper (same hit-test/drag/select
   behavior as the rectangle shape above), just rendered visually as an
   ellipse -- border-radius:50% on a non-square box draws an ellipse
   inscribed in it. */
.shape-ellipse-annot{ border:1px dashed transparent; border-radius:50%; cursor:move; }
.shape-ellipse-annot.selected{ border-color: var(--primary); background: rgba(47,111,237,.04); }

.image-annot{ border:1px dashed transparent; cursor:move; border-radius:2px; overflow:hidden; }
.image-annot img{ width:100%; height:100%; display:block; pointer-events:none; }
.image-annot.selected{ border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft-strong); }

.vector-annot{ border:1px dashed transparent; border-radius:4px; cursor:move; }
.vector-annot.selected{ border-color: var(--primary); background: rgba(47,111,237,.04); }

.annot-del{
  position:absolute; top:-11px; right:-11px; width:18px; height:18px; border-radius:50%;
  background: var(--danger); color:#fff; border:2px solid #fff; font-size:11px; line-height:1;
  display:none; align-items:center; justify-content:center; cursor:pointer; padding:0; box-shadow: var(--shadow-sm);
}
.annot.selected .annot-del{ display:flex; }

.temp-highlight{ position:absolute; background: rgba(245,165,36,.3); border:1px dashed var(--accent-2); pointer-events:none; }
.temp-erase{ position:absolute; background: rgba(31,36,48,.18); border:1px dashed var(--text-dim); pointer-events:none; }
.temp-rect{ position:absolute; background: rgba(47,111,237,.08); border:1.5px dashed var(--primary); pointer-events:none; }

/* ---------- Floating contextual text toolbar ---------- */
.text-toolbar{
  display:none; position:fixed; top:0; left:0; z-index:40;
  align-items:center; gap:3px;
  background: var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow: var(--shadow-lg); padding:6px; white-space:nowrap;
}
.text-toolbar.show{ display:flex; }
.tt-select{
  height:30px; border:1px solid var(--border-strong); border-radius:7px; background: var(--surface);
  color: var(--text); font-size:12px; padding:0 6px; max-width:118px; cursor:pointer;
}
.tt-num-wrap{ display:flex; align-items:center; border:1px solid var(--border-strong); border-radius:7px; overflow:hidden; height:30px; }
.tt-num-btn{
  width:22px; height:100%; border:none; background: var(--surface-2); color: var(--text-dim);
  cursor:pointer; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.tt-num-btn:hover{ background: var(--border); color: var(--text); }
.tt-num{
  width:38px; height:100%; border:none; border-left:1px solid var(--border-strong); border-right:1px solid var(--border-strong);
  text-align:center; font-size:12px; color: var(--text); -moz-appearance:textfield;
}
.tt-num::-webkit-inner-spin-button, .tt-num::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.tt-sep{ width:1px; height:22px; background: var(--border); margin:0 3px; flex-shrink:0; }
.tt-btn{
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:7px;
  color: var(--text-dim); cursor:pointer; font-size:13px;
}
.tt-btn svg{ width:16px; height:16px; }
.tt-btn:hover{ background: var(--surface-2); color: var(--text); }
.tt-btn.active{ background: var(--primary-soft); color: var(--primary); border-color: rgba(47,111,237,.28); }
.tt-btn.tt-danger:hover{ background: var(--danger-soft); color: var(--danger); }
.tt-color{
  position:relative; width:26px; height:26px; border-radius:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.tt-color:hover{ background: var(--surface-2); }
.tt-color-swatch{
  width:16px; height:16px; border-radius:4px; border:1.5px solid var(--border-strong);
  background:#1f2430; pointer-events:none;
}
.tt-highlight-swatch{ background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); position:relative; }
.tt-highlight-swatch::after{
  content:''; position:absolute; inset:0; border-radius:3px;
  background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(224,72,62,.5) 2px, rgba(224,72,62,.5) 3px);
}
.tt-highlight-swatch.has-color::after{ display:none; }
.tt-color input[type=color]{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:none; padding:0;
}
.tt-popover-group{ position:relative; }
.tt-popover{
  display:none; position:absolute; top:calc(100% + 8px); right:0;
  background: var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow: var(--shadow-lg); padding:12px 14px; width:180px; z-index:41;
}
.tt-popover.show{ display:block; }
.tt-pop-label{ display:block; font-size:11px; font-weight:500; color: var(--text-dim); margin:8px 0 5px; }
.tt-pop-label:first-child{ margin-top:0; }
.tt-pop-readout{ float:right; color: var(--text-faint); font-weight:400; }
.tt-popover input[type=range]{ width:100%; }

/* ---------- Properties panel ---------- */
#props{ width:224px; flex-shrink:0; background: var(--surface); border-left:1px solid var(--border); padding:18px 16px; display:none; overflow-y:auto; position:relative; }
#props.show{ display:block; }
/* Only relevant (and only shown) as a mobile bottom sheet -- see the
   max-width:860px block below -- where the panel can end up covering
   most or all of a heavily zoomed-out page, with not much empty
   background left to tap for a "tap outside to dismiss" gesture. On
   desktop (a normal sidebar, deselectable by just clicking the canvas)
   it stays hidden. */
#propsClose{
  display:none; position:absolute; top:10px; right:10px; width:26px; height:26px;
  border-radius:50%; border:none; background: var(--surface-2); color: var(--text-dim);
  font-size:16px; line-height:1; cursor:pointer; align-items:center; justify-content:center;
}
.props-title{ font-weight:600; font-size:13px; color: var(--text); margin-bottom:16px; }
.props-field{ margin-bottom:18px; display:none; }
.props-field.show{ display:block; }
.props-field label{ display:block; font-size:11px; font-weight:500; color: var(--text-dim); margin-bottom:8px; }
.props-field input[type=range]{ width:100%; }
.size-readout{ color: var(--text-faint); float:right; font-weight:400; }
.swatches{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.swatch{ width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.swatch.selected{ border-color: var(--primary); }
.swatch-custom{ width:24px; height:24px; border-radius:50%; padding:0; border:2px solid var(--border-strong); cursor:pointer; overflow:hidden; }
.swatch-custom::-webkit-color-swatch-wrapper{ padding:0; }
.swatch-custom::-webkit-color-swatch{ border:none; border-radius:50%; }
.style-toggle{ display:flex; gap:6px; margin-top:10px; }
.style-btn{
  width:34px; height:30px; border-radius:7px; border:1px solid var(--border-strong); background: var(--surface);
  color: var(--text-dim); cursor:pointer; font-size:13px;
}
.style-btn:hover{ background: var(--surface-2); }
.style-btn.active{ background: var(--primary-soft); color: var(--primary); border-color: rgba(47,111,237,.3); }
.props-delete{
  width:100%; padding:9px 0; background: var(--danger-soft); color: var(--danger); border:1px solid rgba(224,72,62,.3);
  border-radius:8px; font-size:12px; font-weight:600; letter-spacing:.01em; cursor:pointer; margin-top:6px;
}
.props-delete:hover{ background: var(--danger); color:#fff; }
.props-hint{ font-size:11px; color: var(--text-faint); line-height:1.6; margin-top:20px; }

#status{
  /* bottom is measured from the actual viewport edge (position:fixed), not
     from #app -- clear of the site footer's own height (~56px on a wide
     screen, ~81px once "Terms Privacy Support" wraps to its own line on a
     narrow one) so this toast doesn't render on top of/underneath it. */
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%) translateY(12px);
  background: var(--text); color: #fff; font-size:12px; font-weight:500;
  padding:10px 18px; border-radius:20px; opacity:0; pointer-events:none;
  transition: opacity .18s, transform .18s; z-index:50; max-width:80vw; text-align:center;
  box-shadow: var(--shadow-lg);
}
#status.show{ opacity:1; transform:translateX(-50%) translateY(0); }

#thumbs::-webkit-scrollbar, #stage::-webkit-scrollbar, #props::-webkit-scrollbar{ width:10px; height:10px; }
#thumbs::-webkit-scrollbar-thumb, #stage::-webkit-scrollbar-thumb, #props::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius:6px; }

/* ---------- Narrow viewports (phones/small tablets) ----------
   #thumbs and #props are both fixed-width layout siblings of #stage --
   on a ~390px-wide phone their combined 388px alone leaves almost no room
   for the actual page canvas, forcing it to render far wider than the
   screen and requiring blind horizontal scrolling to reach most of it
   (which looks exactly like "the tools don't work": a tap lands nowhere
   near where it visually appears to be). #thumbs shrinks instead of
   disappearing -- it's the only way to switch pages -- while #props
   becomes a bottom sheet overlaying the canvas instead of permanently
   claiming its own column, since it's only ever shown while an
   annotation happens to be selected. */
@media (max-width: 860px){
  #thumbs{ width:84px; padding:10px 8px; }
  .thumb-num{ font-size:9.5px; }
  #stage{ padding:24px 12px; }

  #props{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:35;
    /* Sized to its actual content (a title, one or two small fields, the
       delete button, a hint line) rather than a viewport percentage --
       55vh on a typically-short phone screen covered over half of it,
       completely blocking the canvas underneath the moment anything got
       selected (which happens automatically right after placing a new
       annotation), making it impossible to then touch-drag that same
       annotation or reach the rest of the page at all. */
    width:auto; max-height:280px; border-left:none; border-top:1px solid var(--border);
    border-radius:14px 14px 0 0; box-shadow: var(--shadow-lg); padding:14px 44px 20px 16px;
  }
  /* Explicit close button -- on a short screen this sheet can cover most
     or all of the (heavily zoomed-out) canvas underneath, so dismissing
     it needs to be obvious rather than relying on finding a bit of empty
     background to tap. */
  #propsClose{ display:flex; }

  .tbtn{ width:46px; height:44px; }
  .tbtn-label{ font-size:9px; }
  .tgroup{ padding:0 4px; }

  /* The floating text-formatting toolbar (font, size, B/I/U, alignment,
     colors, more-options, duplicate, delete) adds up to well over 500px
     of controls at their normal size -- wider than any phone in portrait,
     regardless of white-space:nowrap's positionTextToolbarFor() JS trying
     to slide it fully on-screen (there's no horizontal position left
     where a 500px-wide bar fits inside a 390px window). Letting it wrap
     onto multiple rows instead keeps every control reachable by a tap
     instead of silently cut off past the right edge with no way to
     scroll to it. */
  .text-toolbar{ flex-wrap:wrap; max-width:calc(100vw - 16px); white-space:normal; }
}