.editor-loading, .editor-empty { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 60vh; color: var(--ink2); font-weight: 500; }

.editor-root {
  position: relative; z-index: 2; height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  overflow: hidden;
}

/* ---------- menubar ---------- */
.menubar {
  display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 52px; flex: none;
  background: #ffffff; border-bottom: 1px solid var(--line); z-index: 40;
}
.menu-brand { display: flex; align-items: center; gap: 9px; cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 15px; flex: none; }
.menu-logo { width: 24px; height: 24px; flex: none; object-fit: contain; }
/* the scrollable middle strip: File/Edit/View/Insert/Tools + filename — everything
   that isn't the brand (leftmost) or the save-status/Export (rightmost) */
.menu-scroll {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.menu-scroll::-webkit-scrollbar { height: 5px; }
.menu-scroll::-webkit-scrollbar-thumb { background: rgba(20, 30, 70, 0.16); border-radius: 3px; }
.menu-scroll::-webkit-scrollbar-track { background: transparent; }
.menu-item-wrap { position: relative; flex: none; }
.menu-btn { background: none; border: none; font-size: 13.5px; color: var(--ink2); font-weight: 500; cursor: pointer; padding: 6px 8px; border-radius: 8px; white-space: nowrap; }
.menu-btn:hover, .menu-item-wrap.open .menu-btn { background: rgba(20, 18, 12, 0.06); color: var(--ink); }
.menu-panel {
  /* mounted in <body> and positioned via JS (see menubar.ts) — it must not sit
     inside the menubar, whose backdrop-filter becomes the containing block for
     fixed descendants and clips them on iOS Safari. */
  position: fixed; min-width: 232px; padding: 6px; border-radius: 14px; z-index: 1600;
  background: #ffffff;
  border: 1px solid var(--line); box-shadow: 0 20px 44px -18px rgba(20, 18, 12, 0.34);
  display: none; max-height: 70vh; max-height: 70dvh; overflow-y: auto;
}
.menu-panel.open { display: block; animation: pop 0.14s ease; }
.menu-option { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: none; background: none; border-radius: 9px; cursor: pointer; text-align: left; font-size: 13.5px; color: var(--ink); }
.menu-option:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.menu-option:disabled { opacity: 0.4; cursor: not-allowed; }
.menu-option:disabled:hover { background: none; }
.menu-opt-icon { width: 18px; display: inline-flex; color: var(--ink2); }
.menu-opt-label { flex: 1; }
.menu-opt-key { font-size: 11.5px; color: var(--ink3); }
.menu-divider { height: 1px; background: var(--line); margin: 5px 8px; }
.menu-header { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); padding: 9px 10px 4px; }
.menu-file-pill { flex: none; margin-left: 4px; padding: 6px 16px; border-radius: 9px; background: rgba(20, 18, 12, 0.05); font-size: 13px; font-weight: 600; color: var(--ink2); white-space: nowrap; }
.menu-right { display: flex; align-items: center; gap: 12px; flex: none; }
.saved-badge { font-size: 12.5px; color: var(--ink3); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.saved-icon { display: inline-flex; flex: none; }

/* ---------- tool rail ----------
   On desktop this is a vertical list of labeled sections (Basics, Shapes,
   Markup, …) down the left edge, each a 2-column grid of tool buttons —
   frees the vertical space the old horizontal toolbar used. On mobile
   (<=820px, see the reflow block below) the sections flatten into one
   horizontally-scrolling strip with no labels/dividers. */
.toolbar {
  flex: 0 0 auto; width: 156px; display: flex; flex-direction: column; gap: 16px;
  padding: 12px 10px; background: #fcfcfb; border-right: 1px solid var(--line);
  overflow-y: auto; overflow-x: hidden; z-index: 30;
}
.tool-group { display: flex; flex-direction: column; gap: 6px; flex: none; }
.tool-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); padding-left: 2px; }
.tool-group-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tool-btn {
  min-width: 0; min-height: 52px; padding: 7px 4px; border-radius: 9px; border: 1px solid transparent; background: #f7f7f5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink2); cursor: pointer; transition: all 0.13s ease;
  touch-action: manipulation;
}
.tool-btn:hover { background: #fff; color: var(--ink); border-color: var(--line); }
.tool-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.tool-btn.active { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.tool-label { font-size: 10px; line-height: 1.05; font-weight: 600; text-align: center; white-space: nowrap; }
/* Free up room for .menu-scroll: the brand text and "Saved locally" label are
   nice-to-haves, not core actions — collapse them first. */
@media (max-width: 780px) {
  .menu-brand span { display: none; }
  .saved-text { display: none; }
}
.zoom-ctl { display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 4px; border-radius: 9px; background: #fff; border: 1px solid var(--line); flex: none; }
.zoom-btn { width: 28px; height: 28px; border-radius: 7px; border: none; background: none; color: var(--ink2); cursor: pointer; display: flex; align-items: center; justify-content: center; touch-action: manipulation; }
.zoom-btn:hover { background: rgba(20, 18, 12, 0.06); color: var(--ink); }
.zoom-val { font-size: 12px; font-weight: 700; color: var(--ink); min-width: 34px; text-align: center; }

/* ---------- workspace ---------- */
.workspace { flex: 1; display: flex; min-height: 0; }
/* No document open: the pages rail and properties panel have nothing to
   show, so hide them rather than reserve their fixed widths — the canvas
   (and its empty-state card) then use the full remaining space. */
.workspace.no-doc .rail, .workspace.no-doc .properties-panel { display: none; }
.rail {
  width: 176px; flex: none; padding: 14px 12px; overflow-y: auto; border-right: 1px solid var(--line);
  background: #fcfcfb; display: flex; flex-direction: column; gap: 10px;
}
.rail-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); padding: 2px; }
.rail-list { display: flex; flex-direction: column; gap: 10px; }
.rail-item { position: relative; border-radius: 9px; background: #ffffff; border: 1px solid var(--line); padding: 8px; cursor: pointer; transition: all 0.13s ease; }
.rail-item:hover { border-color: var(--accent-line); }
.rail-item.active { border: 2px solid var(--accent); box-shadow: 0 4px 12px rgba(20, 18, 12, 0.08); background: #fff; padding: 7px; }
.rail-item.dragging { opacity: 0.4; }
.rail-item.drop-before { box-shadow: 0 -3px 0 -1px var(--accent); }
.rail-item.drop-after { box-shadow: 0 3px 0 -1px var(--accent); }
.rail-item.drop-left { box-shadow: -3px 0 0 -1px var(--accent); }
.rail-item.drop-right { box-shadow: 3px 0 0 -1px var(--accent); }
.thumb-num { position: absolute; top: -7px; left: 6px; width: 20px; height: 20px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); }
.thumb-canvas { display: flex; align-items: center; justify-content: center; min-height: 60px; border-radius: 5px; overflow: hidden; background: #fff; }
.thumb-img { max-width: 100%; height: auto; display: block; }
.thumb-blank { width: 100%; padding-top: 130%; background: #fff; border: 1px solid var(--line); }
.thumb-actions { display: flex; gap: 4px; justify-content: center; margin-top: 7px; opacity: 0; transition: opacity 0.13s ease; }
.rail-item:hover .thumb-actions { opacity: 1; }
.thumb-act { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: #fff; color: var(--ink2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.thumb-act:hover { background: #fbfbf9; color: var(--ink); }
.thumb-act.danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, white); }
.rail-add { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 9px; border: 1px dashed #d8d6d0; background: #fff; color: var(--ink2); font-size: 13px; font-weight: 600; cursor: pointer; }
.rail-add:hover { border-color: var(--accent); color: var(--accent-deep); }

/* ---------- viewer / canvas ---------- */
.viewer-scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 30px 24px 80px; background: #f5f5f3; }
.page-column { display: flex; flex-direction: column; gap: 24px; }
/* margin auto (not the old parent align-items:center) so that when a zoomed-in
   page is WIDER than the viewer, it aligns flush-start instead of being centered-
   and-clipped — centering an overflowing flex child leaves its start-side overflow
   at a negative scroll-container offset, which scrollLeft can never reach (it
   can't go negative), permanently trapping the left side of the page off-screen. */
.page-wrap { position: relative; margin: 0 auto; background: #fff; border-radius: 3px; box-shadow: 0 1px 2px rgba(20, 18, 12, 0.06), 0 12px 34px rgba(20, 18, 12, 0.10); }
.page-canvas { display: block; border-radius: 3px; opacity: 0; transition: opacity 0.2s ease; }
.page-canvas.ready { opacity: 1; }
.page-blank { position: absolute; inset: 0; background: #fff; }
.page-badge { position: absolute; top: 8px; left: -12px; transform: translateX(-100%); background: rgba(20, 30, 70, 0.5); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }

/* ---------- annotation layer ---------- */
.anno-layer { position: absolute; transform-origin: center center; }
/* touch-action:none hands the whole gesture to our pointer handlers — without it
   a touch drag ALSO pans .viewer-scroll, then the browser fires pointercancel
   mid-drag (element and page fight each other, strokes/creates get abandoned).
   Scoped to create-mode layers and selected elements only, so with nothing
   selected a finger on the page still scrolls normally. Mouse input ignores
   touch-action, so desktop behavior is untouched. */
.workspace.tool-create .anno-layer { cursor: crosshair; touch-action: none; }
.workspace.tool-create .anno { pointer-events: none; }
.anno { position: absolute; box-sizing: border-box; }
.workspace.tool-select .anno { cursor: move; }
.anno.selected { outline: 1.5px solid var(--accent); outline-offset: 1px; touch-action: none; }
.anno-text-inner { width: 100%; height: 100%; overflow: hidden; outline: none; white-space: pre-wrap; word-break: break-word; padding: 2px; }
.anno-text-inner.editing { overflow: visible; cursor: text; background: rgba(255, 255, 255, 0.6) !important; box-shadow: 0 0 0 2px var(--accent); border-radius: 2px; }
.anno-img { pointer-events: none; -webkit-user-drag: none; }
.anno-note-icon { width: 22px; height: 22px; border-radius: 5px 5px 5px 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px -4px rgba(20, 30, 70, 0.5); border: 1px solid rgba(255, 255, 255, 0.7); }
.anno-link-box { border: 1.5px dashed var(--accent); border-radius: 2px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
.anno-field { border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 3px; background: color-mix(in srgb, var(--accent) 8%, rgba(255,255,255,0.6)); font-size: 12px; color: var(--ink2); display: flex; align-items: center; padding: 0 6px; overflow: hidden; }
.field-check { justify-content: center; font-weight: 800; color: var(--accent); }
.field-drop { justify-content: space-between; }
.field-radio { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 3px 6px; }
.radio-opt { display: flex; align-items: center; gap: 5px; }
.radio-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--accent); }
.drop-caret { color: var(--ink3); }

/* selection handles */
.anno-handle { position: absolute; width: 10px; height: 10px; background: #fff; border: 1.5px solid var(--accent); border-radius: 2px; z-index: 5; }
.handle-nw { left: -5px; top: -5px; cursor: nwse-resize; }
.handle-n { left: 50%; top: -5px; margin-left: -5px; cursor: ns-resize; }
.handle-ne { right: -5px; top: -5px; cursor: nesw-resize; }
.handle-e { right: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.handle-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.handle-s { left: 50%; bottom: -5px; margin-left: -5px; cursor: ns-resize; }
.handle-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.handle-w { left: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.create-ghost { position: absolute; border: 1.5px dashed var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); pointer-events: none; }

/* ---------- native content-editing layer (mupdf: redact / edit-text / edit-image) ---------- */
.edit-layer { position: absolute; transform-origin: center center; pointer-events: none; z-index: 3; }
.workspace.content-mode .edit-layer { pointer-events: auto; }
.workspace.content-mode .anno-layer { pointer-events: none; }
.ce-hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: rgba(20, 30, 70, 0.72); color: #fff; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; white-space: nowrap; }

/* redact */
.workspace.content-mode .edit-layer { cursor: crosshair; touch-action: none; }
.ce-redact-ghost { position: absolute; background: rgba(10, 10, 12, 0.55); border: 1.5px solid #111; pointer-events: none; }
.ce-redact-mark { position: absolute; background: rgba(10, 10, 12, 0.82); border: 1px solid #000; box-sizing: border-box; }
.ce-mark-del { position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff; border: 1.5px solid #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: 0 2px 6px -1px rgba(0,0,0,0.4); }
.ce-action-bar { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 16px; border-radius: 14px; background: rgba(255,255,255,0.86); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 12px 34px -12px rgba(20,30,70,0.5); border: 1px solid rgba(255,255,255,0.7); }
.ce-action-label { font-size: 13px; font-weight: 600; color: var(--ink2); }

/* edit-text */
.ce-text-box { position: absolute; box-sizing: border-box; border-radius: 2px; cursor: text; transition: background 0.1s ease; }
.ce-text-box:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: 1px solid var(--accent); }
.ce-text-box-scan { outline: 1px dashed color-mix(in srgb, var(--ink2) 55%, transparent); }
.ce-text-box-scan:hover { background: color-mix(in srgb, #e0a500 20%, transparent); outline: 1px dashed #e0a500; }
.ce-text-input { position: absolute; box-sizing: border-box; margin: 0; padding: 0 1px; border: none; outline: 2px solid var(--accent); border-radius: 2px; background: rgba(255,255,255,0.96); box-shadow: 0 6px 18px -8px rgba(20,30,70,0.6); resize: none; overflow: hidden; line-height: 1; z-index: 10; }
/* inline font/style toolbar shown above the native text editor */
.ce-edit-bar { position: absolute; z-index: 12; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 10px; background: rgba(255,255,255,0.97); backdrop-filter: blur(10px); box-shadow: 0 8px 22px -10px rgba(20,30,70,0.5); border: 1px solid var(--line); }
.ce-font-sel { height: 28px; max-width: 150px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); font-size: 12.5px; padding: 0 6px; font-family: var(--font-body); cursor: pointer; }
.ce-style-btn { height: 28px; min-width: 28px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink2); cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.ce-style-btn:hover { background: var(--line2); color: var(--ink); }
.ce-style-btn.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.ce-style-btn.ce-b { font-weight: 800; }
.ce-style-btn.ce-i { font-style: italic; font-family: Georgia, 'Times New Roman', serif; }
.ce-style-btn.ce-u { text-decoration: underline; }

/* edit-image */
.ce-image-box { position: absolute; box-sizing: border-box; cursor: move; transform-origin: center center; outline: 1.5px dashed color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.ce-image-box:hover { outline-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ce-image-box.selected { outline: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.ce-handle { position: absolute; width: 11px; height: 11px; background: #fff; border: 1.5px solid var(--accent); border-radius: 2px; z-index: 6; }
.ce-h-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.ce-h-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.ce-h-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.ce-h-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.ce-rotate-handle { position: absolute; left: 50%; top: -26px; margin-left: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1.5px solid var(--accent); cursor: grab; z-index: 6; }
.ce-rotate-handle::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 12px; background: var(--accent); transform: translateX(-50%); }
.ce-controls { position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: rgba(255,255,255,0.92); backdrop-filter: blur(14px); box-shadow: 0 8px 22px -10px rgba(20,30,70,0.5); border: 1px solid rgba(255,255,255,0.7); z-index: 7; }
.ce-ctl { width: 28px; height: 28px; border-radius: 7px; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--ink2); }
.ce-ctl:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.ce-ctl-danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

/* ---------- properties panel ---------- */
.properties-panel { width: 250px; flex: none; padding: 18px 16px; overflow-y: auto; border-left: 1px solid var(--line); background: #ffffff; display: flex; flex-direction: column; gap: 18px; }
.prop-title { font-family: var(--font-head); font-weight: 600; font-size: 16px; }
.prop-group { display: flex; flex-direction: column; gap: 8px; }
.prop-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); }
.prop-row { display: flex; gap: 10px; }
.prop-row .prop-group { flex: 1; }
.prop-empty { text-align: center; color: var(--ink3); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 6px; }
.prop-empty p { font-size: 13.5px; line-height: 1.5; }
.prop-tip { font-size: 12px; color: var(--ink3); line-height: 1.4; padding: 10px; border-radius: 10px; background: rgba(20, 18, 12, 0.04); }
.prop-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; }
.prop-actions .btn { flex: 1; }

/* ---------- statusbar ---------- */
.statusbar { display: flex; align-items: center; gap: 14px; padding: 9px 18px; flex: none; border-top: 1px solid var(--line); background: #ffffff; font-size: 12.5px; color: var(--ink2); font-weight: 500; }
.status-sep { color: var(--ink3); }
.status-ok { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--ok); font-weight: 600; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

/* empty state */
.editor-empty-card { width: 480px; max-width: 92vw; padding: 40px 36px; border-radius: var(--r-xl); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.editor-empty-card h2 { font-size: 24px; }
.editor-empty-card p { color: var(--ink2); font-size: 15px; }
.editor-empty-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px -12px rgba(214, 178, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.05); margin-bottom: 4px; }
/* Big drop target — dominates the card above the "restore last session" pill. */
.editor-empty-card .dropzone { width: 100%; min-height: 320px; margin-top: 8px; }
.editor-empty-card .dropzone-icon svg { width: 40px; height: 40px; }
.editor-empty-card .dropzone-label { font-size: 16px; }
/* white-space:normal (overriding .btn's nowrap) so a long recovered filename
   wraps onto a second line instead of overflowing and getting clipped by the
   scroll container. */
.recovery-btn { width: 100%; margin-top: 4px; padding: 10px 16px; font-size: 13.5px; white-space: normal; height: auto; line-height: 1.35; }

/* signature modal */
.sig-stage { min-height: 180px; border-radius: 14px; border: 1.5px dashed rgba(20, 30, 70, 0.2); background: rgba(255, 255, 255, 0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; gap: 8px; }
.sig-canvas { width: 100%; height: 180px; touch-action: none; }
.sig-type-input { max-width: 280px; }
.sig-fontrow { display: flex; gap: 8px; }
.sig-font { padding: 6px 14px; border-radius: 9px; border: 1px solid var(--line); background: #fff; font-size: 18px; cursor: pointer; }
.sig-font.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
.sig-colors { display: flex; gap: 8px; justify-content: center; }
.sig-upload { display: flex; align-items: center; justify-content: center; min-height: 150px; }

/* tool grid used by feature modals */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tool-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.7); cursor: pointer; text-align: left; transition: all 0.13s ease; }
.tool-card:hover { border-color: var(--accent); box-shadow: 0 12px 26px -18px var(--accent); }
.tool-card-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
.tool-card-title { font-weight: 700; font-size: 14.5px; }
.tool-card-desc { font-size: 12.5px; color: var(--ink2); margin-top: 2px; line-height: 1.4; }

/* Below 820px there isn't room for two 176-250px fixed side columns without
   crushing the canvas. Instead of hiding them (losing page-reorder + the
   properties/settings panel entirely), stack everything vertically and turn
   both side panels into horizontally-scrolling strips between the toolbar
   and the canvas — same "never clip, always scroll" treatment as the toolbar. */
@media (max-width: 820px) {
  .workspace { flex-direction: column; }
  .viewer-scroll { order: 3; flex: 1; min-height: 0; }

  /* toolbar: on mobile it flips from the desktop vertical left-rail (labeled
     sections, 2-col grids) back to one flat horizontal scrolling strip at the
     top of the stack — same "never clip, always scroll" treatment as the
     page/attribute strips below it. Section labels collapse; a faint divider
     between .tool-group clusters is the only leftover grouping cue. */
  .toolbar {
    order: 0; width: auto; flex: none; flex-direction: row; align-items: center; gap: 8px;
    padding: 8px 12px; border-right: none; border-bottom: 1px solid var(--line);
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .tool-group {
    flex-direction: row; align-items: center; gap: 8px;
    padding-right: 10px; margin-right: 2px; border-right: 1px solid var(--line);
  }
  .tool-group:last-of-type { border-right: none; padding-right: 0; margin-right: 0; }
  .tool-group-label { display: none; }
  .tool-group-btns { display: flex; flex-direction: row; gap: 8px; }
  /* Apple HIG's 44px minimum hit target for the packed horizontal strip. */
  .tool-btn { min-width: 44px; min-height: 44px; }
  .tool-label { display: none; }
  .toolbar::-webkit-scrollbar { height: 5px; }
  .toolbar::-webkit-scrollbar-thumb { background: rgba(20, 18, 12, 0.16); border-radius: 3px; }
  .toolbar::-webkit-scrollbar-track { background: transparent; }

  .rail, .properties-panel {
    order: 1; width: auto; flex: none; flex-direction: row; align-items: flex-start;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
  .rail::-webkit-scrollbar, .properties-panel::-webkit-scrollbar { height: 5px; }
  .rail::-webkit-scrollbar-thumb, .properties-panel::-webkit-scrollbar-thumb { background: rgba(20, 18, 12, 0.16); border-radius: 3px; }
  .rail::-webkit-scrollbar-track, .properties-panel::-webkit-scrollbar-track { background: transparent; }

  /* pages strip: ~20% shorter than before (was 128px) to reclaim canvas height */
  .rail {
    max-height: 102px; padding: 10px 12px; border-right: none; border-bottom: 1px solid var(--line);
  }
  .rail-title { display: none; }
  .rail-list { flex-direction: row; gap: 10px; }
  .rail-item { flex: none; width: 78px; }
  .rail-add { flex: none; width: 78px; padding: 8px 6px; font-size: 11px; text-align: center; white-space: normal; }

  .properties-panel {
    order: 2; max-height: 168px; padding: 14px 16px; border-left: none; border-top: 1px solid var(--line2);
  }
  .properties-panel > * { flex: none; }
  .prop-group { min-width: 108px; }
  .prop-empty { max-width: 220px; padding: 6px; text-align: left; flex-direction: row; }
  .prop-tip { max-width: 200px; }
  .properties-panel .prop-actions,
  .properties-panel .prop-setting { margin-top: 0; }

  .statusbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .statusbar::-webkit-scrollbar { display: none; }
  .statusbar > * { flex: none; white-space: nowrap; }
}

/* ---------- properties: settings + field style ---------- */
.prop-setting { padding: 12px; border-radius: 12px; background: rgba(20, 18, 12, 0.04); display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.prop-setting .checkbox-row { font-weight: 600; font-size: 13.5px; }
.prop-divider { height: 1px; background: var(--line); margin: 4px 0; }
.check-mark { font-weight: 800; font-size: 1.1em; }
.field-drop .drop-caret, .field-text, .field-drop { color: inherit; }

/* ---------- saved signatures ---------- */
.sig-saved-wrap:empty { display: none; }
.sig-saved-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink3); margin-bottom: 8px; }
.sig-saved-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.sig-saved-card { position: relative; border-radius: 10px; border: 1px solid var(--line); background: #fff; height: 66px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; transition: border-color 0.13s ease, box-shadow 0.13s ease; }
.sig-saved-card:hover { border-color: var(--accent); box-shadow: 0 8px 18px -12px var(--accent); }
.sig-saved-card img { max-width: 88%; max-height: 80%; object-fit: contain; }
.sig-saved-del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(20,26,45,0.72); color: #fff; cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.13s ease; }
.sig-saved-card:hover .sig-saved-del { opacity: 1; }
.sig-saved-sep { display: flex; align-items: center; gap: 12px; margin: 16px 0 2px; color: var(--ink3); font-size: 12.5px; }
.sig-saved-sep::before, .sig-saved-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* text-content box in the properties panel */
.prop-textarea { resize: vertical; min-height: 56px; line-height: 1.4; }

/* signature controls in properties panel */
.prop-block { padding: 12px; border-radius: 12px; background: rgba(20, 18, 12, 0.04); display: flex; flex-direction: column; gap: 6px; }
.prop-block .checkbox-row { font-weight: 600; font-size: 13.5px; }
.prop-full-btn { width: 100%; justify-content: flex-start; }

/* rotate handle */
.anno-rotate { position: absolute; left: 50%; top: -26px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; border: 1.5px solid var(--accent); cursor: grab; z-index: 6; box-shadow: 0 2px 5px -1px rgba(20,30,70,0.4); }
.anno-rotate::before { content: ''; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 12px; margin-left: -0.75px; background: var(--accent); }
.anno-rotate:active { cursor: grabbing; }

/* transform controls in properties panel */
.transform-row { display: flex; align-items: center; gap: 6px; }
.transform-row + .transform-row { margin-top: 6px; }
.tf-btn { height: 34px; min-width: 34px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,0.85); color: var(--ink2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 12.5px; font-weight: 600; }
.tf-btn:hover { background: #fff; color: var(--ink); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.tf-btn.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.tf-btn.tf-wide { flex: 1; }
/* Bold / Italic / Underline text-style toggles: fill the row, glyph previews the effect. */
.tf-btn.style-b, .tf-btn.style-i, .tf-btn.style-u { flex: 1; font-size: 14px; }
.tf-btn.style-b { font-weight: 800; }
.tf-btn.style-i { font-style: italic; font-family: Georgia, 'Times New Roman', serif; }
.tf-btn.style-u { text-decoration: underline; }
.tf-mirror { display: inline-flex; transform: scaleX(-1); }
.transform-row .input { max-width: 66px; }
.tf-deg { color: var(--ink3); font-size: 13px; margin-left: -2px; }
