/* Stitchist — Digitizer editor.
   A full-bleed vector-digitizing surface that lives beside the Appliqué Wizard.
   Reuses the wizard's theme tokens and shared components (style.css: :root,
   .topnav) so it feels native: same backdrop, same panel washes, same ink,
   accent on active controls — in BOTH the light and dark themes. */

/* The Digitizer takes over the viewport; the wizard shell is hidden while active. */
#digitizer-root { display: none; }
.mode-digitizer .shell { display: none; }
/* Editor owns the whole viewport — never a page scrollbar (side-to-side or up/down). */
body.mode-digitizer { overflow: hidden; }
.mode-digitizer #digitizer-root {
  display: flex; position: fixed; inset: 0; z-index: 30; flex-direction: column;
  background: var(--app-bg);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --------------------------------------------------- app bar: project tabs */
.dz-studio-update {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 13px 22px; border-bottom: 1px solid var(--card-line);
  background: linear-gradient(105deg, rgba(105,84,230,.13), rgba(74,148,166,.08));
}
.dz-studio-update-copy > div { display: flex; align-items: center; gap: 9px; }
.dz-studio-update-copy strong { font-size: 14px; line-height: 1.4; }
.dz-studio-update-tag { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .07em; }
.dz-studio-update p { margin: 4px 0 2px; font-size: 12px; line-height: 1.5; }
.dz-studio-update p b { font-weight: 650; }
.dz-studio-update small { color: var(--ink-3); font-size: 11px; }
.dz-studio-update-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.dz-studio-update .dz-btn { min-height: 36px; }
.dz-studio-update-close { min-width: 36px; font-size: 21px; }
.dz-auto-free { display: none; margin-left: auto; color: var(--accent); font-size: 10px; font-weight: 700; }
body.plan-free:not(.trial-autotrace-spent) .dz-auto-free { display: inline; }
@media (max-width: 720px) {
  .dz-studio-update { align-items: flex-start; gap: 10px; padding: 10px 12px; }
  .dz-studio-update-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 145px; }
  .dz-studio-update-copy strong { font-size: 12px; }
  .dz-studio-update p { font-size: 11px; }
}

/* Row 0: brand · one tab per open document · Projects + account. */
.dz-tabbar {
  display: flex; align-items: center; gap: 10px; padding: 6px 14px 0;
  background: rgba(var(--track-rgb), 0.2); border-bottom: 1px solid var(--card-line);
  position: relative; z-index: 22;   /* above .dz-top so the account menu paints over it */
}
.dz-brand { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 13px; padding-bottom: 6px; white-space: nowrap; }
.dz-brand .mark {
  width: 22px; height: 22px; border-radius: 7px;
  background: linear-gradient(135deg, #5a4cf2, #3d8de8);   /* thread gradient — matches the favicon */
  display: flex; align-items: center; justify-content: center; flex: none;
}
.dz-brand .word b { font-weight: 800; }
.dz-tabs { display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; min-width: 0; scrollbar-width: thin; }
.dz-tab {
  display: flex; align-items: center; gap: 7px; max-width: 200px; flex: none;
  padding: 7px 8px 7px 12px; border: 1px solid transparent; border-bottom: none;
  border-radius: 10px 10px 0 0; background: rgba(var(--ink-rgb), 0.07);
  color: rgba(var(--ink-rgb), 0.72); font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: var(--tr);
}
.dz-tab:hover { background: rgba(var(--ink-rgb), 0.13); color: var(--ink); }
.dz-tab.on { background: rgba(var(--ink-rgb), 0.17); color: var(--ink); border-color: var(--card-line); }
.dz-tab .nm { overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.dz-tab .x {
  display: flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 5px; font-size: 13px; line-height: 1; color: rgba(var(--ink-rgb), 0.55);
}
.dz-tab .x:hover { background: rgba(var(--ink-rgb), 0.25); color: var(--ink); }
.dz-tab-add {
  flex: none; width: 26px; height: 26px; margin-bottom: 4px; border-radius: 8px;
  border: 1px dashed rgba(var(--ink-rgb), 0.35); background: transparent;
  color: rgba(var(--ink-rgb), 0.75); font-size: 13px; cursor: pointer; transition: var(--tr);
}
.dz-tab-add:hover { background: rgba(var(--ink-rgb), 0.14); color: var(--ink); }
.dz-tabbar .dz-btn { height: 30px; }
.dz-account { position: relative; padding-bottom: 4px; }
.dz-caret { min-width: 20px; padding: 0 3px; }

/* ------------------------------------------------------------ top toolbar */
.dz-top {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px; flex-wrap: wrap;
  background: rgba(var(--ink-rgb), 0.08); border-bottom: 1px solid var(--card-line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  /* backdrop-filter makes this a stacking context, trapping the Import dropdown's
     z-index inside it; lift the whole toolbar above .dz-main so the dropdown paints
     over the canvas (otherwise the canvas eats the menu clicks).
     z-index 21 (not 20) keeps it ABOVE the second toolbar row below: the Wizards /
     Save dropdowns live here and open downward across .dz-toolbar, so an equal
     z-index would let that later-in-DOM row paint over — and swallow the clicks on —
     the dropdown's top item (the "Appliqué Wizard" row). Still below .dz-tabbar (22)
     so the account menu keeps painting over this row. */
  position: relative; z-index: 21;
}

/* Second header row: editing / view tools. Kept above .dz-main (z-index) so the
   Import dropdown, which now lives here, paints over the canvas rather than under it. */
.dz-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px; flex-wrap: wrap;
  background: rgba(var(--ink-rgb), 0.045); border-bottom: 1px solid var(--card-line);
  position: relative; z-index: 20;
}
.dz-toolbar .dz-label { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--ink-3); margin-right: 2px; }

.dz-group { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 11px; background: rgba(var(--track-rgb), 0.14); }
.dz-sep { width: 1px; height: 26px; background: rgba(var(--ink-rgb), 0.18); margin: 0 2px; }
.dz-spacer { flex: 1; }

/* Selection context strip (right of Import): object parameters + secondary actions. */
.dz-ctx { animation: menuIn var(--dur-2) var(--ease-out); transform-origin: top left; }
.dz-ctx .dz-btn { height: 28px; min-width: 28px; padding: 0 6px; }
.dz-ctx .dz-btn svg { width: 15px; height: 15px; }
.dz-ctx-div { width: 1px; height: 20px; background: rgba(var(--ink-rgb), 0.16); margin: 0 3px; }
.dz-cf { display: flex; align-items: center; gap: 4px; }
.dz-cf > span { font-size: 10.5px; font-weight: 700; color: var(--ink-3); }
.dz-toolbar .dz-cf .dz-input { width: 56px; height: 26px; padding: 2px 6px; font-size: 12px; }

.dz-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; min-width: 34px; padding: 0 9px; border-radius: 9px;
  background: transparent; border: none; color: rgba(var(--ink-rgb), 0.78);
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: var(--tr);
}
.dz-btn svg { width: 17px; height: 17px; display: block; }
.dz-btn:hover { background: rgba(var(--ink-rgb), 0.14); color: var(--ink); }
.dz-btn:active { transform: scale(.94); }   /* uniform press feedback (see --tr) */
.dz-btn.on { background: var(--btn-hi-bg); color: var(--btn-hi-ink); }
.dz-btn.busy { pointer-events: none; opacity: 0.7; }
.dz-btn.primary { background: var(--btn-hi-bg); color: var(--btn-hi-ink); font-weight: 700; padding: 0 14px; }
.dz-btn.primary:hover { background: var(--btn-hi-bg); transform: translateY(-1px); }
.dz-btn .kbd { font-size: 9.5px; opacity: 0.6; font-weight: 700; }

/* Google-Docs-style autosave pill in the document bar */
.dz-savestat {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px;
  border: none; background: transparent; border-radius: 8px; cursor: pointer;
  color: var(--ink-3); font-family: inherit; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; transition: var(--tr);
}
.dz-savestat:hover { background: rgba(var(--ink-rgb), 0.08); color: var(--ink-2); }
.dz-savestat .ss-dot { width: 8px; height: 8px; border-radius: 50%; background: #9aa4b2; flex: none; }
.dz-savestat.ss-clean .ss-dot { background: #2e9e5b; }
.dz-savestat.ss-saving .ss-dot { background: #3884ff; animation: ss-pulse 1s ease-in-out infinite; }
.dz-savestat.ss-dirty .ss-dot { background: #e0a32e; }
.dz-savestat.ss-error { color: #d9534f; }
.dz-savestat.ss-error .ss-dot { background: #d9534f; }
@keyframes ss-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }

/* ------------------------------------------------------------- main area */
/* Ember-style three panes: tool rail | stage | properties+sequence docker. */
.dz-main { flex: 1; display: flex; min-height: 0; }

/* The rail holds every tool with NO scrollbar: buttons flex-shrink to fit
   whatever height the stage has (base 34px, down to 26px when tight), and the
   rail clips rather than scrolls, so all tools are always reachable. */
.dz-rail {
  width: 50px; flex: none; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 6px 5px; overflow: hidden; min-height: 0;
  background: rgba(var(--ink-rgb), 0.06); border-right: 1px solid var(--card-line);
}
.dz-rail .dz-btn {
  flex: 0 1 34px; min-height: 26px; width: 40px; min-width: 40px;
  flex-direction: column; gap: 1px; padding: 0;
}
.dz-rail .dz-btn svg { width: 16px; height: 16px; }
.dz-rail .dz-btn .kbd { font-size: 8px; line-height: 1; }
.dz-rail-sep { width: 24px; height: 1px; background: rgba(var(--ink-rgb), 0.18); margin: 2px 0; flex: none; }

/* Both working panels are always on screen: object properties above, the stitch
   sequence below. They split the column between them rather than taking turns
   behind a tab, because editing means moving between the two constantly. */
.dz-dock {
  position: relative; width: 322px; flex: none; display: flex; flex-direction: column;
  min-height: 0; background: rgba(var(--ink-rgb), 0.06); border-left: 1px solid var(--card-line);
}
.dz-dock > .dz-panel {
  min-height: 0; display: flex; flex-direction: column;
  background: none; border: none; border-radius: 0; padding: 12px;
}
.dz-dock > .dz-panel > h4 {
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--inset-line);
  font-size: 12px; letter-spacing: 0.02em; text-transform: none; font-weight: 700;
  color: var(--ink); flex: none;
}
.dz-dock-props { flex: 1 1 50%; overflow-y: auto; }
.dz-dock-seq { flex: 1 1 50%; border-top: 1px solid var(--card-line); }
.dz-dock-seq .dz-seq { flex: 1; min-height: 0; overflow-y: auto; }
.dz-sqmode { margin-left: auto; }
.dz-sqmode button { padding: 3px 9px; font-size: 11px; }
.dz-inspector { display: flex; flex-direction: column; min-height: 0; }

/* Object-properties tabs. Every serious digitizer splits this panel rather than
   stacking it (Wilcom's docker and Ink/Stitch's Params are both tabbed, and both
   give underlay its own tab); one column of 13 blocks meant scrolling for
   everything. Order is fixed and empty tabs are dropped, so a control is either
   present or absent — it never moves. */
.dz-insp-tabs {
  display: flex; gap: 2px; margin: 2px 0 10px; padding: 3px;
  border-radius: 10px; background: rgba(var(--track-rgb), 0.16); flex: none;
}
.dz-insp-tabs button {
  flex: 1; padding: 5px 4px; border: none; border-radius: 7px; background: transparent;
  color: var(--ink-2); font-family: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer; transition: var(--tr);
}
.dz-insp-tabs button:hover { background: rgba(var(--ink-rgb), 0.09); color: var(--ink); }
.dz-insp-tabs button.on { background: var(--btn-hi-bg); color: var(--btn-hi-ink); }
.dz-insp-pane[hidden] { display: none; }

/* top-bar project fields + the Import dropdown. Scoped to .dz-top so they beat the
   generic `.dz-input { width: 100% }` (which otherwise stretches them to full rows). */
.dz-top .dz-name { flex: 0 1 240px; width: auto; min-width: 150px; height: 34px; padding: 0 10px; font-weight: 600; }
.dz-top .dz-hoopsel { flex: none; width: 152px; height: 34px; padding: 0 8px; }
/* flex (not block) so the caret button can never wrap onto a second line when the
   toolbar squeezes this flex item below its natural width */
.dz-import-wrap { position: relative; display: flex; align-items: center; }
.dz-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 218px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--menu-bg); border: 1px solid var(--card-line); border-radius: 12px;
  box-shadow: var(--shadow-menu);
  transform-origin: top left;
  animation: menuIn var(--dur-2) var(--ease-out);   /* replays each time display flips on */
}
.dz-menu.dz-menu-right { transform-origin: top right; }
.dz-menu.dz-menu-right { left: auto; right: 0; }
.dz-mi {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px;
  background: transparent; border: none; color: var(--ink); font-family: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; text-align: left; transition: var(--tr);
}
.dz-mi:hover { background: rgba(var(--ink-rgb), 0.14); }
.dz-mi svg { flex: none; }

.dz-panel { background: rgba(var(--ink-rgb), 0.07); border: 1px solid var(--inset-line); border-radius: 13px; padding: 12px; }
.dz-panel > h4 {
  margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; justify-content: space-between;
}
.dz-panel > h4 .pc { font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink-3); }

/* ------------------------------------------------------------- the stage */
.dz-stage { flex: 1; position: relative; min-width: 0; overflow: hidden; }
.dz-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.dz-canvas.tool-select { cursor: default; }
.dz-canvas.tool-pan { cursor: grab; }
.dz-canvas.tool-pan.panning { cursor: grabbing; }
/* Plotting cursor: a real crosshair image, black on the light theme and white
   on dark (the OS-drawn crosshair can vanish against the canvas). */
.dz-canvas.tool-draw, .dz-canvas.tool-measure {
  cursor: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20width="24"%20height="24"><path%20d="M12%202v20M2%2012h20"%20fill="none"%20stroke="%23111111"%20stroke-width="1.8"/></svg>') 12 12, crosshair;
}
[data-theme="dark"] .dz-canvas.tool-draw, [data-theme="dark"] .dz-canvas.tool-measure {
  cursor: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20width="24"%20height="24"><path%20d="M12%202v20M2%2012h20"%20fill="none"%20stroke="%23ffffff"%20stroke-width="1.8"/></svg>') 12 12, crosshair;
}

/* "Appliqué bundle ready" pill — shown after the Appliqué Wizard hands its design
   back for export. Sits top-centre of the stage. */
.dz-ready {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 9px; padding: 7px 8px 7px 13px;
  border-radius: 12px; background: var(--pill-bg); border: 1px solid var(--accent);
  box-shadow: var(--shadow-pill); color: var(--ink); font-size: 12.5px; font-weight: 600;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: dropIn var(--dur-3) var(--ease-out);
}
.dz-ready svg { flex: none; }
.dz-ready .rgo {
  padding: 6px 12px; border-radius: 9px; border: none; background: var(--btn-hi-bg); color: var(--btn-hi-ink);
  font-family: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.dz-ready .rgo:hover { transform: translateY(-1px); }
.dz-ready .rx {
  display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 7px; border: none; background: transparent; color: var(--ink-3); cursor: pointer;
}
.dz-ready .rx:hover { background: rgba(var(--ink-rgb), 0.14); color: var(--ink); }
.dz-btn.hot { box-shadow: 0 0 0 2px var(--accent); }

.dz-readout {
  position: absolute; left: 12px; bottom: 12px; z-index: 4; pointer-events: none;
  display: flex; gap: 8px; align-items: center;
  background: var(--pill-bg); border: 1px solid var(--card-line); border-radius: 10px;
  padding: 7px 11px; font-size: 12px; font-weight: 600; color: var(--ink);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.dz-readout .muted { color: var(--ink-3); font-weight: 600; }

/* zoom in/out cluster — bottom-left of the canvas, stacked above the readout pill */
.dz-zoomctl {
  position: absolute; left: 12px; bottom: 52px; z-index: 5;
  display: flex; flex-direction: column; gap: 4px; padding: 4px;
  background: var(--pill-bg); border: 1px solid var(--card-line); border-radius: 11px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.dz-zoomctl .dz-btn { width: 30px; min-width: 30px; height: 28px; padding: 0; font-size: 16px; font-weight: 700; line-height: 1; }

.dz-hint {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 4; pointer-events: none;
  background: var(--pill-bg); border: 1px solid var(--card-line); border-radius: 999px;
  padding: 7px 16px; font-size: 12.5px; font-weight: 600; color: var(--ink); max-width: 80%;
  text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: top var(--dur-3) var(--ease-out);
}
/* when the "bundle ready" pill is up it owns the top-centre slot — the hint steps down */
.dz-stage.has-ready .dz-hint { top: 58px; }

/* contextual shape-action toolbar floating over the stage */
.dz-actions {
  position: absolute; z-index: 5; display: flex; gap: 4px; padding: 4px;
  background: var(--pill-bg); border: 1px solid var(--card-line); border-radius: 11px;
  box-shadow: var(--shadow-pill); backdrop-filter: blur(8px); transform: translate(-50%, 0);
  animation: dz-actions-in var(--dur-2) var(--ease-out);
}
@keyframes dz-actions-in { from { opacity: 0; transform: translate(-50%, 5px) scale(.97); } to { opacity: 1; transform: translate(-50%, 0); } }
.dz-actions button {
  min-width: 46px; padding: 3px 6px 4px; border-radius: 7px; background: rgba(var(--ink-rgb), 0.12);
  border: none; color: var(--ink); font-size: 13px; cursor: pointer; transition: var(--tr);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.dz-actions button span { font-size: 9.5px; line-height: 1; letter-spacing: .2px; opacity: .82; }
.dz-actions button:hover { background: rgba(var(--ink-rgb), 0.26); }
.dz-actions button:active { transform: scale(.92); }
.dz-actions button.danger:hover { background: rgba(255, 120, 130, 0.55); }
.dz-actions button svg { width: 15px; height: 15px; }

/* stage right-click menu */
.dz-ctxmenu {
  position: absolute; z-index: 30; min-width: 176px; padding: 4px;
  background: var(--pill-bg); border: 1px solid var(--card-line); border-radius: 10px;
  box-shadow: var(--shadow-pill); backdrop-filter: blur(8px);
  animation: dz-ctxmenu-in var(--dur-1) var(--ease-out);
}
@keyframes dz-ctxmenu-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.dz-ctxmenu button {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; padding: 6px 9px; border: none; border-radius: 7px; background: transparent;
  color: var(--ink); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.dz-ctxmenu button:hover:not(:disabled) { background: rgba(var(--ink-rgb), 0.12); }
.dz-ctxmenu button:disabled { opacity: .38; cursor: default; }
.dz-ctxmenu button.danger:hover:not(:disabled) { background: rgba(255, 120, 130, 0.28); }
.dz-ctxmenu kbd { font: inherit; font-size: 10.5px; opacity: .5; }

/* ------------------------------------------------------- sequencer list */
.dz-seq { position: relative; display: flex; flex-direction: column; gap: 6px; }
.dz-seq .empty { font-size: 12px; color: var(--ink-3); text-align: center; padding: 10px 0; line-height: 1.5; }
.dz-row {
  display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 10px;
  background: rgba(var(--ink-rgb), 0.07); border: 1px solid transparent; cursor: pointer; transition: var(--tr);
}
.dz-row:hover { background: rgba(var(--ink-rgb), 0.12); }
.dz-row.sel { border-color: var(--sel-ring); background: rgba(var(--ink-rgb), 0.16); }
.dz-row.hidden-shape { opacity: 0.45; }
.dz-row .sw { width: 15px; height: 15px; border-radius: 4px; flex: none; border: 1px solid rgba(var(--ink-rgb), 0.4); }
.dz-row .nm { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-row .ty { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.dz-row .ico { width: 34px; height: 34px; border-radius: 7px; background: rgba(var(--ink-rgb), 0.1); border: none;
  color: var(--ink-2); cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.dz-row .ico:hover { background: rgba(var(--ink-rgb), 0.24); color: var(--ink); }
.dz-row .ico svg { width: 18px; height: 18px; }
.dz-row .ico:focus-visible { outline: 2px solid var(--sel-ring); outline-offset: 2px; }
.dz-wand-settings { position: absolute; top: 12px; left: 12px; z-index: 12; width: 245px;
  padding: 14px; border-radius: 12px; background: var(--surface, #fff); color: var(--ink);
  border: 1px solid var(--field-line, #bbb); box-shadow: 0 4px 18px #0002; }
.dz-wand-settings[hidden] { display: none; }
.dz-wand-settings label { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; }
.dz-wand-settings input[type=range] { min-width: 0; flex: 1; }
.dz-wand-settings input[type=checkbox] { width: 16px; height: 16px; flex: none; }
.dz-wand-settings small { display: block; margin-top: 12px; line-height: 1.4; opacity: .75; }

/* color palette */
/* Thread palette, permanently in the toolbar: one swatch per colour in the design.
   Wraps onto a second line rather than scrolling — a scrollbar inside a toolbar
   strip is both ugly and awkward to hit. */
.dz-palette { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; max-width: 300px; }
.dz-toolbar .dz-palette .pc { width: 20px; height: 20px; border-radius: 6px; }
.dz-toolbar .dz-palette .pc.add { font-size: 13px; }

/* ------------------------------------------------------- sequence rows
   Each row previews what it contains — a rendered thumbnail of the object or the
   whole colour block — so a 480-object import reads as the design instead of as a
   list of names. Layout mirrors a machine's colour list: handle, preview, name +
   code + count, then the object range, thread swatch and stitch order. */
.dz-srow {
  display: flex; align-items: center; gap: 9px; padding: 7px 8px;
  border-radius: 10px; cursor: pointer;
}
.dz-grip { flex: none; color: var(--ink-3); font-size: 12px; line-height: 1; letter-spacing: -1px; cursor: grab; }
.dz-srow:active .dz-grip { cursor: grabbing; }
.dz-thumb {
  flex: none; width: 46px; height: 46px; border-radius: 8px;
  background: rgba(var(--ink-rgb), 0.07); border: 1px solid var(--inset-line);
}
.dz-sinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dz-sinfo .nm { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-scode { font-size: 11px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-scount { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.dz-smeta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.dz-srange {
  font-size: 10.5px; font-weight: 700; color: var(--ink-2); line-height: 1;
  background: rgba(var(--ink-rgb), 0.12); border-radius: 6px; padding: 3px 7px;
}
.dz-smeta .sw { width: 15px; height: 15px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28); }
.dz-sidx { font-size: 10.5px; font-weight: 700; color: var(--ink-3); line-height: 1; }
.dz-sacts { display: flex; gap: 1px; opacity: 0; transition: var(--tr); }
.dz-srow:hover .dz-sacts, .dz-srow.sel .dz-sacts { opacity: 1; }
.dz-warnpip { color: var(--warn, #e0a32e); font-size: 10px; }

/* design info popover (the toolbar "i Info" button) */
.dz-info-wrap { position: relative; display: flex; align-items: center; }
.dz-infopop { min-width: 268px; padding: 12px; gap: 0; }
.dz-infopop .dz-filebtns { margin-top: 10px; }
.dz-palette .pc {
  width: 26px; height: 26px; border-radius: 7px; border: 2px solid rgba(var(--ink-rgb), 0.35);
  cursor: pointer; padding: 0; position: relative; transition: var(--tr);
}
.dz-palette .pc:hover { transform: scale(1.12); }
.dz-palette .pc:active { transform: scale(.95); }
.dz-palette .pc.add { display: flex; align-items: center; justify-content: center; background: rgba(var(--ink-rgb), 0.1); color: var(--ink); font-size: 16px; }

/* project info rows */
.dz-info { display: flex; flex-direction: column; gap: 6px; }
.dz-info .ir { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.dz-info .ir .k { color: var(--ink-3); }
.dz-info .ir .v { font-weight: 700; }
.dz-info .ir .v.warn { color: var(--warn); }

/* inspector form */
.dz-empty-insp { font-size: 12.5px; color: var(--ink-3); text-align: center; padding: 26px 8px; line-height: 1.6; }
.dz-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.dz-field > .k { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.dz-seg { display: flex; gap: 4px; background: rgba(var(--track-rgb), 0.16); border-radius: 9px; padding: 3px; }
.dz-seg button {
  flex: 1; padding: 7px 2px; border-radius: 7px; background: transparent; border: none;
  color: var(--ink-2); font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: var(--tr);
}
.dz-seg button.on { background: var(--btn-hi-bg); color: var(--btn-hi-ink); }
/* Satin style diagrams sit beside the labels and inherit each button's colour. */
.dz-satin-style button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 5px 4px; white-space: nowrap; }
.dz-satin-style button svg { display: block; flex: none; }
/* stitch-type chips: icon stacked over the label */
.dz-seg-ico button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px 5px; font-size: 10px; line-height: 1.1;
}
.dz-seg-ico button svg { display: block; opacity: 0.9; }
.dz-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.dz-pf { display: flex; flex-direction: column; gap: 4px; }
.dz-pf .k { font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.dz-pf.chk { flex-direction: row; align-items: center; gap: 7px; }
.dz-pf.chk input { width: auto; }
.dz-pf.full { grid-column: 1 / -1; }
.dz-input {
  font-family: inherit; font-size: 13px; color: var(--ink); width: 100%;
  background: var(--field); border: 1px solid var(--field-line); border-radius: 9px; padding: 8px 10px; outline: none;
}
.dz-input:focus { border-color: var(--field-focus); }
select.dz-input option { color: #1a1330; }
.dz-color { width: 100%; height: 34px; padding: 3px; border-radius: 9px; border: 1px solid var(--field-line);
  background: var(--field); cursor: pointer; }

/* ----------------------------------------------------------- stitch player */
.dz-player {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6;
  width: min(620px, calc(100% - 28px)); display: none; flex-direction: column; gap: 9px;
  background: var(--pill-bg); border: 1px solid var(--card-line); border-radius: 15px; padding: 13px 15px;
  box-shadow: var(--shadow-pill); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.dz-player.on { display: flex; animation: slideUpIn var(--dur-3) var(--ease-out); }
.dz-player .prow { display: flex; align-items: center; gap: 10px; padding-right: 26px; /* keep the pause chip clear of the absolute .pclose button */ }
.dz-player .ptitle { font-size: 12.5px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-player .pcount { font-size: 11.5px; color: var(--ink-2); }
.dz-player .ppause { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.dz-player .ppause.on { background: rgba(255, 214, 107, 0.22); color: var(--warn); }
.dz-player .ppause.off { background: rgba(var(--ink-rgb), 0.14); color: var(--ink-2); }
.dz-player input[type="range"] { width: 100%; accent-color: var(--btn-hi-bg); }
.dz-player .ptransport { display: flex; align-items: center; gap: 8px; justify-content: center; }
.dz-player .ptransport button {
  height: 32px; min-width: 38px; border-radius: 8px; background: rgba(var(--ink-rgb), 0.16);
  border: none; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dz-player .ptransport button:hover { background: rgba(var(--ink-rgb), 0.28); }
.dz-player .ptransport .pplay { background: var(--btn-hi-bg); color: var(--btn-hi-ink); font-weight: 700; min-width: 56px; }
.dz-player .pspeed { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-2); }
/* leave room for the shared select chevron (style.css positions it 13px from the
   right) — with the old 6px padding the "1×" ran underneath the arrow */
.dz-player .pspeed select { padding: 4px 26px 4px 9px; font-size: 11px; background-position: right 8px center; }
.dz-player .pclose {
  position: absolute; top: 9px; right: 11px; background: none; border: none;
  color: var(--ink-2); cursor: pointer; display: flex; padding: 2px;
}
.dz-player .pclose:hover { color: var(--ink); }

/* ------------------------------------------------------------- footer */
.dz-foot {
  padding: 7px 14px; font-size: 11px; color: var(--ink-3); text-align: center;
  background: rgba(var(--track-rgb), 0.14); border-top: 1px solid var(--card-line);
}
.dz-foot b { color: var(--ink-2); }

@media (max-width: 900px) {
  .dz-dock { width: 262px; }
  .dz-dock > .dz-panel { padding: 10px; }
  .dz-top .dz-name { flex-basis: 120px; min-width: 96px; }
  .dz-top .dz-hoopsel { width: 120px; }
}

/* ------------------------------------------------------------ wizard dialogs */
/* Heading row shared by the small wizard dialogs (redwork, …). The auto-digitize
   review has its own stylesheet (autodigitize.css). */
.dz-wizard-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-shrink: 0; }
.modal .dz-wizard-heading h3 { margin: 0; min-width: 0; }
.dz-wizard-close { flex: none; font-size: 23px; font-weight: 400; }

/* ---------------------------------------------------- lettering font browser */
/* Two-pane dialog: a searchable list of every installed font (each row is the
   font's name rendered IN that font, lazy-loaded) beside the text options and a
   live preview of the typed text. */
.modal.dz-let-modal { max-width: 780px; width: 94vw; }
.dz-let-body { display: grid; grid-template-columns: 272px 1fr; gap: 16px; margin-top: 12px; }
@media (max-width: 640px) { .dz-let-body { grid-template-columns: 1fr; } }
.dz-let-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dz-let-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.dz-let-chips button {
  padding: 4px 10px; border-radius: 20px; border: 1px solid var(--field-line);
  background: rgba(var(--ink-rgb), 0.06); color: var(--ink-2); font-family: inherit;
  font-size: 11px; font-weight: 700; cursor: pointer; transition: var(--tr);
}
.dz-let-chips button:hover { color: var(--ink); background: rgba(var(--ink-rgb), 0.14); }
.dz-let-chips button.on { background: var(--btn-hi-bg); color: var(--btn-hi-ink); border-color: transparent; }
.dz-let-list {
  height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--inset-line); border-radius: 12px; padding: 5px;
  background: rgba(var(--track-rgb), 0.18);
}
.dz-let-sec {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); padding: 6px 8px 3px;
}
.dz-fontrow {
  display: flex; align-items: center; min-height: 30px; padding: 4px 8px; flex: none;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  cursor: pointer; transition: background .15s ease; content-visibility: auto;
  contain-intrinsic-size: auto 30px;
}
.dz-fontrow:hover { background: rgba(var(--ink-rgb), 0.1); }
.dz-fontrow.on { background: rgba(var(--ink-rgb), 0.16); border-color: var(--accent); }
.dz-fontrow img { max-width: 100%; height: 19px; width: auto; display: block; }
.dz-let-loading {
  display: flex; align-items: center; justify-content: center; gap: 9px; flex: 1;
  padding: 22px 10px; color: var(--ink-3); font-size: 12px; text-align: center; line-height: 1.5;
}
.dz-let-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dz-let-right textarea.dz-input { resize: vertical; min-height: 44px; font-size: 14px; }
.dz-let-preview {
  display: flex; align-items: center; justify-content: center; min-height: 64px;
  border: 1px solid var(--inset-line); border-radius: 12px; padding: 8px 10px;
  background: rgba(var(--track-rgb), 0.18); overflow: hidden;
}
.dz-let-preview img { max-width: 100%; max-height: 96px; display: block; }
.dz-let-preview .ph { color: var(--ink-3); font-size: 12px; }
.dz-let-fontname { font-size: 11px; color: var(--ink-3); text-align: center; min-height: 14px; }
.dz-let-editbtn { width: 100%; justify-content: center; background: rgba(var(--ink-rgb), 0.1); }

/* The /api/fonts preview strips are white-on-transparent PNGs (drawn for the
   dark theme). In the light theme flip them to ink with a filter — brightness(0)
   blackens every opaque pixel and the alpha channel keeps the glyph shape. */
:root:not([data-theme="dark"]) .dz-fontrow img,
:root:not([data-theme="dark"]) .dz-let-preview img { filter: brightness(0) opacity(0.82); }

/* "experimental" tag on options that are still being proven (lettering satin) */
.dz-exp {
  display: inline-block; margin-left: 5px; padding: 1px 4px; border-radius: 6px;
  font-size: 7.5px; font-weight: 800; letter-spacing: .05em; line-height: 1.3;
  vertical-align: 1px; background: rgba(224, 163, 46, 0.22); color: var(--warn);
}
.dz-seg button.on .dz-exp { background: rgba(224, 163, 46, 0.3); color: #7a4d00; }
:root[data-theme="dark"] .dz-seg button.on .dz-exp { color: #8a6100; }

/* fill-pattern picker: real stitch-out photos (uniform crop) */
.dz-fp img { width: 100%; height: 46px; object-fit: cover; border-radius: 5px; display: block; }
/* ------------------------------------------------------------- Pro crown mark
   One gold crown marks every Pro-only control, wherever it appears — inline in a
   label, stacked on a swatch, or appended by CSS alone to a menu row. It is drawn
   as a mask so a single definition carries the gradient and stays legible in both
   themes, and so the same shape works in a ::after where no markup exists to hang
   an <svg> on. Every control wearing one routes to the upgrade screen on click. */
:root {
  --crown: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2.4 7.6c.7-.5 1.7-.3 2.1.5l2.2 3.6 3-5.5c.5-1 1.9-1 2.5 0l3 5.5 2.2-3.6c.4-.8 1.4-1 2.1-.5.6.4.9 1.2.7 1.9l-2 7c-.2.8-.9 1.3-1.7 1.3H5.5c-.8 0-1.5-.5-1.7-1.3l-2-7c-.2-.7.1-1.5.6-1.9z"/><rect x="5" y="19.2" width="14" height="2.3" rx="1.15"/></svg>');
}
.dz-crown {
  display: inline-block; width: 12px; height: 12px; flex: none;
  vertical-align: -1px; margin-left: 5px;
  background: linear-gradient(140deg, #f7c948, #d1892a);
  -webkit-mask: var(--crown) center / contain no-repeat;
          mask: var(--crown) center / contain no-repeat;
}
/* stacked on a swatch or thumbnail rather than sitting after a word */
.dz-crown.on-art {
  position: absolute; top: 3px; right: 4px; margin: 0; width: 13px; height: 13px;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55));
}
/* Pro-locked options (patterns / stitch types on the free plan) */
.dz-locked { opacity: 0.62; position: relative; }
.dz-locked:hover { opacity: 0.85; }
.dz-fontrow { position: relative; }

/* version-history modal (Pro): snapshot rows with thumbnail + restore */
.dz-vh-modal { max-width: 480px; }
.dz-vh-sub { font-size: 12px; color: var(--ink-3); margin: 4px 0 10px; line-height: 1.45; }
.dz-vh-list { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.dz-verrow {
  display: flex; align-items: center; gap: 10px; padding: 7px 9px;
  border: 1px solid rgba(var(--ink-rgb), 0.12); border-radius: 9px;
}
.dz-verrow img, .dz-verrow .ph {
  width: 58px; height: 38px; object-fit: cover; border-radius: 6px; flex: none;
  background: rgba(var(--ink-rgb), 0.06); display: block;
}
.dz-verrow .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dz-verrow .meta b { font-size: 12.5px; }
.dz-verrow .meta span { font-size: 11px; color: var(--ink-3); }

/* brand button (navigates home; work autosaves on the way out) */
button.dz-brand {
  background: transparent; border: 0; font-family: inherit; font-weight: inherit;
  cursor: pointer; border-radius: 9px; padding: 2px 8px 6px 4px; transition: var(--tr);
}
button.dz-brand:hover { background: rgba(var(--ink-rgb), 0.08); }
button.dz-brand:active { transform: scale(.97); }

/* little icon crowning the empty panels so they don't read as bare text */
.dz-empty-art {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 2px auto 10px; border-radius: 12px;
  background: rgba(79, 59, 246, 0.09); color: var(--accent);
}
:root[data-theme="dark"] .dz-empty-art { background: rgba(255, 255, 255, 0.1); color: var(--ink-2); }

/* identity row: name and thread colour share a line rather than a block each */
.dz-idrow { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.dz-idrow .dz-input { flex: 1; min-width: 0; }
.dz-idrow .dz-color { flex: none; width: 34px; }
/* All stitch types on one row, icon ABOVE its name — the icons alone were a
   guessing game, and stacking keeps the row short enough to still fit. */
.dz-seg-stack button {
  flex-direction: column; gap: 2px; padding: 5px 1px; min-width: 0;
}
.dz-seg-stack button span { font-size: 8.5px; line-height: 1; letter-spacing: -0.01em; }
.dz-seg-stack button svg { width: 13px; height: 13px; }
/* corner options: each button carries a diagram of the corner it produces */
.dz-corner-seg button { flex-direction: column; gap: 3px; padding: 6px 4px; }
.dz-corner-art { display: block; }

/* Inside the dock the properties panel is a fixed half-height, so it is tuned to
   FIT rather than to breathe: tighter blocks, smaller pattern swatches, and the
   long explanatory paragraphs clamped to two lines (the full text stays in the
   title attribute). The goal is no scrolling on the tab you use most. */
.dz-dock-props .dz-field { gap: 5px; margin-bottom: 9px; }
.dz-dock-props .dz-help { margin: 0 0 4px !important; font-size: 10.5px !important; line-height: 1.35 !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dz-dock-props .dz-fillpats { gap: 5px; margin-top: 5px; }
.dz-dock-props .dz-fp img { height: 30px; }
.dz-dock-props .dz-fp { font-size: 9px; padding: 3px; }
.dz-dock-props .dz-guides { gap: 3px; margin: 4px 0; }
.dz-dock-props .dz-guide { padding: 3px 7px; }
.dz-dock-props .dz-uls { gap: 6px; margin-top: 5px; }
.dz-dock-props .dz-ul { padding: 7px; }
.dz-dock-props .dz-ul-add { margin-top: 6px; padding: 6px; }

/* draggable divider between the two dock halves */
.dz-dock-split {
  flex: none; height: 7px; cursor: row-resize; position: relative;
  background: rgba(var(--ink-rgb), 0.05); border-top: 1px solid var(--card-line);
}
.dz-dock-split::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 2px;
  transform: translate(-50%, -50%); border-radius: 2px; background: rgba(var(--ink-rgb), 0.28);
}
.dz-dock-split:hover, .dz-dock-split.dragging { background: rgba(var(--ink-rgb), 0.12); }
.dz-dock-split:hover::after, .dz-dock-split.dragging::after { background: var(--accent); }
.dz-dock-seq { border-top: none !important; }

/* The properties half has no heading of its own — the object's name field is its
   title, and the tab strip says what the rest is. A separate "Object properties"
   bar cost ~40px of a pane that has to fit without scrolling. */
.dz-dock-props { padding-top: 10px; }
/* Fill patterns: four to a row at thumbnail size. This block was 191px — the
   single tallest thing in the inspector and the reason Effects overflowed. */
.dz-dock-props .dz-fillpats { grid-template-columns: repeat(4, 1fr); }
.dz-dock-props .dz-fp img { height: 24px; }
.dz-dock-props .dz-fp { font-size: 8.5px; padding: 3px 2px; gap: 2px; }
/* last few pixels: the tab strip and the blocks under it are tuned so the tallest
   combination (a closed fill's Effects tab) lands inside the pane */
.dz-dock-props .dz-insp-tabs { margin: 0 0 8px; padding: 2px; }
.dz-dock-props .dz-insp-tabs button { padding: 4px 4px; }
.dz-dock-props .dz-field { margin-bottom: 8px; }
.dz-dock-props .dz-fp img { height: 22px; }
.dz-dock-props .dz-fillpats { gap: 4px; margin-top: 4px; }
.dz-dock-props .dz-fp { padding: 2px; }

/* Disabled group: underlay settings grey out when the underlay is switched off,
   rather than sitting there looking editable and doing nothing. */
.dz-grid2.dz-off > *:not(.chk) { opacity: 0.42; pointer-events: none; }

/* Fill pattern: the panel shows the CURRENT choice compactly and opens a popover
   with previews big enough to actually read, each named. Inline swatches had to be
   shrunk to ~22px to keep the panel from scrolling — too small to tell apart. */
.dz-fp-wrap { position: relative; }
.dz-fp-cur {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px;
  border: 1px solid var(--field-line); border-radius: 9px; background: var(--field-bg, rgba(var(--ink-rgb), .05));
  color: var(--ink); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.dz-fp-cur:hover { background: rgba(var(--ink-rgb), 0.1); }
.dz-fp-cur img { width: 30px; height: 22px; object-fit: cover; border-radius: 5px; flex: none; }
.dz-fp-cur .nm { flex: 1; text-align: left; }
.dz-fp-pop { width: 296px; right: 0; left: auto; padding: 8px; }
.dz-fp-pop .dz-fillpats { grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 0; }
.dz-fp-pop .dz-fp { padding: 5px; gap: 4px; font-size: 10.5px; }
.dz-fp-pop .dz-fp img { height: 52px; }

/* a requested machine stop, listed in the colour sequence like a commercial docker */
.dz-stoprow {
  display: flex; align-items: center; gap: 6px; margin: 2px 0 4px 42px; padding: 3px 8px;
  border-radius: 7px; background: rgba(var(--warn-rgb, 224, 163, 46), 0.16);
  color: var(--warn, #e0a32e); font-size: 10.5px; font-weight: 700;
}
.dz-stoprow svg { width: 12px; height: 12px; }

/* drop strip above the first row — "bring to front" without hunting for 3px of
   the top row's upper half */
.dz-drop-top { height: 10px; border-radius: 5px; margin-bottom: 2px; }

/* ------------------------------------------- reordering: island + drop marker
   Reordering happened inside a half-height pane: to move an object more than a
   few places you dropped it, scrolled, and picked it up again. While a row is
   held the sequence lifts into a floating island over the WHOLE dock, the
   properties panel dims behind it, and the rows go compact when even the taller
   island would not hold them all. It settles back the moment the drag ends. */
.dz-dock-props, .dz-dock-split { transition: opacity var(--dur-2) ease; }
.dz-dock.seq-lift .dz-dock-props { opacity: 0.16; pointer-events: none; }
.dz-dock.seq-lift .dz-dock-split { opacity: 0; pointer-events: none; }
/* the rest of the editor recedes behind the island (pointer-events: none — the
   scrim must not take a single drag event away from the list) */
.dz-dock.seq-lift::before {
  content: ""; position: fixed; inset: 0; z-index: 24; pointer-events: none;
  background: rgba(var(--track-rgb), 0.3);
}
/* Fixed, not absolute: the island is measured against the WINDOW, so it clears
   the toolbars and runs the full height of the page. Wider than the dock too —
   the taller rows carry a bigger preview, and the preview is what you aim at. */
.dz-dock-seq.lifted {
  position: fixed; top: 8px; right: 8px; bottom: 8px; left: auto; z-index: 25;
  width: min(440px, 42vw);
  border-radius: 14px; border: 1px solid var(--card-line);
  background: var(--menu-bg); box-shadow: var(--shadow-pop);
  transition: top var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
/* Fitted rows: seqFitRows divides the island's height between the objects and
   publishes the result here, so the list always ends where the panel does — a
   short list gets big targets, a long one gets as many rows as still read. */
.dz-seq.fitted { gap: 4px; }
/* flex: none, or the column squeezes every row below the height it was given the
   moment the list is longer than the panel (a 40-object list lost a third of it) */
.dz-seq.fitted .dz-srow { flex: none; height: var(--seq-rowh); padding: 0 8px; gap: 8px; }
.dz-seq.fitted .dz-thumb { width: var(--seq-thumb-w); height: var(--seq-thumb); border-radius: 7px; }
/* under ~52px the type and thread code have nowhere to go, and the meta column
   has to lie sideways or it sets the row height all by itself */
.dz-seq.tight .dz-scode, .dz-seq.tight .dz-scount,
.dz-seq.tight .dz-sacts, .dz-seq.tight .alp { display: none; }
.dz-seq.tight .dz-smeta { flex-direction: row; align-items: center; gap: 6px; }

/* One marker that GLIDES to the gap the object will land in. The old cue was a
   bar hung on whichever row the pointer was over, which never made it obvious
   which SIDE of that row it meant — and it moved in jumps, so a long list read
   as a row of flickering bars. The cap marks where the row will start; the halo
   stands in for the gap that is about to open. */
.dz-seq { --drop: var(--accent); --drop-wash: rgba(79, 59, 246, 0.16); }
:root[data-theme="dark"] .dz-seq { --drop: #9fb4ff; --drop-wash: rgba(159, 180, 255, 0.22); }
.dz-dropline {
  position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 5;
  opacity: 0; pointer-events: none;
  transition: transform var(--dur-1) var(--ease-out), left var(--dur-1) var(--ease-out),
              opacity var(--dur-1) ease;
}
.dz-dropline.on { opacity: 1; }
.dz-dropline::before {
  content: ""; position: absolute; left: 11px; right: 2px; top: -1.5px; height: 3px;
  border-radius: 2px; background: var(--drop); box-shadow: 0 0 0 4px var(--drop-wash);
}
.dz-dropline::after {
  content: ""; position: absolute; left: 0; top: -5px; width: 10px; height: 10px;
  border-radius: 50%; border: 3px solid var(--drop); background: var(--menu-bg);
}
/* the island and the marker still change state, they just stop travelling */
@media (prefers-reduced-motion: reduce) {
  .dz-dock-seq.lifted, .dz-dropline, .dz-dock-props, .dz-dock-split { transition: none; }
}
.dz-fill-underlays { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.dz-fill-ul-picker summary { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--field-line); border-radius: 10px; background: var(--field); cursor: pointer; list-style: none; }
.dz-fill-ul-picker summary::-webkit-details-marker { display: none; }
.dz-fill-ul-picker summary svg { width: 64px; height: 44px; color: var(--accent); flex: none; }
.dz-fill-ul-picker summary strong, .dz-fill-ul-picker summary small { display: block; font-size: 13px; line-height: 1.5; }
.dz-fill-ul-picker summary small { font-size: 12px; color: var(--ink-3); }
.dz-fill-ul-chevron { margin-left: auto; color: var(--ink-3); }
.dz-fill-ul-picker[open] .dz-fill-underlays { margin-top: 8px; }
.dz-fill-ul-picker summary:focus-visible { outline: 2px solid var(--field-focus); outline-offset: 2px; }
.dz-fill-ul { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 10px; border: 1px solid var(--field-line); color: var(--ink-2); background: var(--field); font-family: inherit; line-height: 1.4; cursor: pointer; }
.dz-fill-ul span { font-family: inherit; font-size: 12px; font-weight: 600; }
.dz-fill-ul svg { width: 100%; height: 44px; }
.dz-fill-ul:hover { border-color: var(--field-focus); }
.dz-fill-ul.on { color: var(--btn-hi-ink); background: var(--btn-hi-bg); border-color: var(--btn-hi-bg); }
.dz-dock-props .dz-underlay-note { margin-top: 12px !important; }
.dz-dock-props button:focus-visible { outline: 2px solid var(--field-focus); outline-offset: 2px; }

/* Larger Properties tabs; the controls within each tab retain their compact sizing. */
.dz-dock-props .dz-insp-tabs { padding: 4px; margin-bottom: 10px; }
.dz-dock-props .dz-insp-tabs button { min-width: 0; min-height: 40px; padding: 9px 3px; font-size: 13px; }