/* ═══════════════════════════════════════════════════════════════════
   PARSLEY'S MAGIC BRUSH — style.css
   ═══════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   0. LOCAL FONTS
   ───────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('fonts/AtkinsonHyperlegibleNext-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('fonts/AtkinsonHyperlegibleNext-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Caveat';
  src: url('fonts/Caveat-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Bodoni';
  src: url('fonts/LibreBodoni-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Bodoni';
  src: url('fonts/LibreBodoni-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'ABeeZee';
  src: url('fonts/ABeeZee-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ABeeZee';
  src: url('fonts/ABeeZee-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono[wght].ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Italic[wght].ttf') format('truetype');
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}


/* ─────────────────────────────────────────────────────────────────
   1. RESET
   ───────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

button {
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  background: none;
}

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring-action);
}

input, textarea, select {
  font-family: var(--font-sans);
}


/* ─────────────────────────────────────────────────────────────────
   2. ROOT VARIABLES — Parsley design tokens + layout constants
   ───────────────────────────────────────────────────────────────── */
:root {
  /* ── Neutrals ── */
  --bg:           #F5F0E8;
  --card-bg:      #FDFCF9;
  --text-1:       #3D2C2E;
  --text-2:       #6B5558;
  --text-3:       #A89080;
  --color-mist:   #C8C0B6;
  --color-border: #DDD6CC;

  /* ── Action — teal ── */
  --color-action:          #4E7C7E;
  --color-action-lt:       #EBF2F2;
  --color-action-bd:       #9EC4C5;
  --color-action-dk:       #3B696B;
  --color-action-lt-hover: #D9ECEC;

  /* ── Success — green ── */
  --color-success:          #5A7D5A;
  --color-success-lt:       #EBF2EB;
  --color-success-bd:       #9EC49E;
  --color-success-dk:       #476A48;
  --color-success-lt-hover: #DDE8DD;

  /* ── Warning — burnt orange ── */
  --color-warning:          #A25F40;
  --color-warning-lt:       #F5EAE4;
  --color-warning-bd:       #D9A88E;
  --color-warning-dk:       #8D4C2D;
  --color-warning-lt-hover: #EBD2C8;

  /* ── Accent — periwinkle ── */
  --color-accent:          #5B7FAF;
  --color-accent-lt:       #EBF0F7;
  --color-accent-bd:       #B5C8E0;
  --color-accent-dk:       #4A6E9A;
  --color-accent-lt-hover: #D9E5F0;

  /* ── Typography ── */
  --font-title:   'Libre Bodoni', georgia, serif;
  --font-heading: 'Lora', georgia, serif;
  --font-sans:    'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Type scale ── */
  --f-s:  0.75rem;   /* 12px */
  --f-m:  1rem;      /* 16px */
  --f-ml: 1.125rem;  /* 18px */
  --f-l:  1.5rem;    /* 24px */
  --f-xl: 2.5rem;    /* 40px */

  --lh-base: 1.5;

  /* ── Spacing ── */
  --xs: 0.25rem;  /*  4px */
  --s:  0.5rem;   /*  8px */
  --ms: 0.75rem;  /* 12px */
  --m:  1rem;     /* 16px */
  --l:  1.5rem;   /* 24px */
  --xl: 2.5rem;   /* 40px */

  /* ── Shadows — warm, derived from --text-1 ── */
  --shadow-sm:    0 1px 3px rgba(61,44,46,0.10);
  --shadow:       0 2px 8px rgba(61,44,46,0.08);
  --shadow-md:    0 2px 12px rgba(61,44,46,0.12);
  --shadow-card:  0 1px 24px rgba(61,44,46,0.06);
  --shadow-modal: 0 8px 32px rgba(61,44,46,0.18);

  /* ── Focus rings ── */
  --ring-action:      rgba(78,124,126,0.35);
  --ring-action-soft: rgba(78,124,126,0.15);
  --ring-success:     rgba(90,125,90,0.35);
  --ring-warning:     rgba(162,95,64,0.35);
  --ring-accent:      rgba(91,127,175,0.35);
  --ring-neutral:     rgba(61,44,46,0.15);

  /* ── Border radius ── */
  --radius:   4px;
  --radius-s: 2px;
  --radius-l: calc(var(--radius) * 2);

  /* ── Layout dimensions ── */
  --toolbar-h: 70px;
  --tabs-h:    52px;

  /* ── Z-index ladder ── */
  --z-canvas:        1;
  --z-ui:            10;
  --z-panel:         100;
  --z-crop-overlay:  50;
  --z-picker:        200;
  --z-modal:         300;
  --z-hwr-popup:     320;
  --z-toast:         400;
}


/* ─────────────────────────────────────────────────────────────────
   3. BASE
   ───────────────────────────────────────────────────────────────── */
html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--font-sans);
  color: var(--text-1);
  font-size: 16px;
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent scroll & zoom bounce on iOS/IWB */
  touch-action: manipulation;
  overscroll-behavior: none;
}


/* ─────────────────────────────────────────────────────────────────
   4. APP SHELL — flex column, full viewport
   ───────────────────────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}


/* ─────────────────────────────────────────────────────────────────
   5. CANVAS CONTAINER — flex:1, paper background + overlays
   ───────────────────────────────────────────────────────────────── */
#canvas-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  touch-action: none;           /* Fabric handles its own pointer events */
  background-color: #FAF7F2;   /* warm cream — slightly warmer than card-bg */
  z-index: var(--z-canvas);
}

/* Fabric injects a wrapper div + the canvas element — both must fill */
#canvas-container > .canvas-container,
#canvas-container > .canvas-container > canvas {
  display: block;
}

/* main-canvas — let Fabric set position/z-index via its own inline styles */
#main-canvas {
  display: block;
}

/* ── Parsley watermark — centered, faint, empty-canvas only ── */
#parsley-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 512px;
  height: 512px;
  /* stylelint-disable declaration-block-no-duplicate-properties */
  image-rendering: pixelated;  /* Chrome/Safari */
  image-rendering: crisp-edges; /* standard */
  /* stylelint-enable declaration-block-no-duplicate-properties */
  opacity: 0;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  transition: opacity 1800ms ease;
}
#parsley-watermark.visible { opacity: 0.5; }

#text-drag-preview {
  position: absolute;
  border: 2px dashed var(--color-action);
  border-radius: 2px;
  pointer-events: none;
  display: none;
  z-index: 10;
}


/* ─────────────────────────────────────────────────────────────────
   6. PAGE TABS BAR — footer strip, distinct from toolbar
   Pill-style tabs, card-bg background, wordmark right-aligned.
   ───────────────────────────────────────────────────────────────── */

#page-tabs-bar {
  order: 2;   /* pinned to very bottom in all layouts */
  height: 52px;
  background: var(--text-1);   /* warm dark brown — clearly distinct footer */
  border-top: none;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  z-index: var(--z-ui);
  scrollbar-width: none;
}

#page-tabs-bar::-webkit-scrollbar { display: none; }

/* Individual tab — sits inside the dark bar */
.page-tab {
  height: 36px;
  padding: 0 14px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-family: var(--font-sans);
  font-size: var(--f-s);
  font-weight: 400;
  color: rgba(255,255,255,0.5);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 80ms ease, color 80ms ease;
  flex-shrink: 0;
}

.page-tab:hover {
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.8);
}

.page-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring-action);
}

/* Active tab: white pill, dark text — inverted contrast for clear selection */
.page-tab.active {
  background: rgba(255,255,255,0.94);
  color: var(--text-1);
  font-weight: 500;
  padding-right: 8px; /* less padding right — close btn adds its own space */
}

/* Tab label — truncates if long */
.tab-label {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Close × — only shown on active tab */
.tab-close {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1;
  display: none;          /* hidden by default */
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background 60ms ease, color 60ms ease;
  cursor: pointer;
}

/* Show close only on active tab */
.page-tab.active .tab-close {
  display: flex;
  color: rgba(50,35,36,0.45);
}

.tab-dup { opacity: 0.7; }
.tab-dup:hover { opacity: 1; background: rgba(50,35,36,0.08) !important; }

.page-tab.active .tab-close:hover {
  background: rgba(50,35,36,0.12);
  color: var(--text-1);
}

/* Add page button */
.tab-add {
  height: 36px;
  padding: 0 14px;
  border-radius: 7px;
  border: 1.5px dashed rgba(255,255,255,0.2);
  font-size: 20px;
  font-weight: 300;
  color: rgba(255,255,255,0.35);
  transition: border-color 80ms, color 80ms, background 80ms;
}

.tab-add:hover {
  border-color: rgba(255,255,255,0.45);
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.06);
}

/* Spacer — pushes wordmark right */
.tabs-spacer { flex: 1; }

/* App wordmark — lives in the tabs bar */

/* ── Page row action buttons ── */
.tab-action-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-s);
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 60ms, color 60ms;
}

.tab-action-btn svg {
  width: 16px;
  height: 16px;
}

.tab-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.tab-action-btn:disabled {
  opacity: 0.25;
  pointer-events: none;
}

.tab-action-btn.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

.tab-action-btn.danger { color: rgba(220, 80, 60, 0.7); }
.tab-action-btn.danger:hover { background: rgba(220, 80, 60, 0.15); color: rgba(220, 80, 60, 1); }

.tab-action-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 3px;
  flex-shrink: 0;
}

/* Frozen page row — grey out everything except freeze button */
#page-tabs-bar[data-frozen="true"] .tab-action-btn:not(#btn-freeze) {
  opacity: 0.25;
  pointer-events: none;
}

/* ── Help modal ── */
#help-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 15, 0.55);
  z-index: var(--z-modal, 2000);
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#help-modal.open { display: flex; }

.help-card {
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-md);
  width: min(640px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.help-header h2 {
  font-family: var(--font-title);
  font-size: 18px;
  font-style: italic;
  font-weight: 600;
  color: var(--color-action);
  margin: 0 0 6px;
}

.help-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-close:hover { background: rgba(61, 44, 46, 0.08); color: var(--text-1); }

.help-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}

.help-body h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin: 16px 0 8px;
}

.help-body h3:first-child { margin-top: 0; }

.help-intro {
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 16px;
  line-height: 1.5;
}

.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.help-table td {
  padding: 5px 8px;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
  color: var(--text-2);
}

.help-table td:first-child {
  width: 38%;
  color: var(--text-1);
  white-space: nowrap;
}

.help-table tr:last-child td { border-bottom: none; }

.help-body kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--bg);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--text-1);
}

.help-note {
  font-size: 12px;
  color: var(--text-3);
  margin: 6px 0 0;
  font-style: italic;
}

.help-body p { font-size: 13px; color: var(--text-2); margin: 6px 0 0; }

/* Inline rename input */
.tab-rename-input {
  width: 80px;
  font-size: var(--f-s);
  font-family: var(--font-sans);
  border: 1px solid var(--color-action-bd);
  border-radius: var(--radius);
  padding: 1px 4px;
  background: var(--card-bg);
  color: var(--text-1);
  outline: none;
}
.tab-rename-input:focus {
  box-shadow: 0 0 0 2px var(--ring-action-soft);
}

/* ─────────────────────────────────────────────────────────────────
   7. BOTTOM TOOLBAR — 70px, warm shelf
   --bg background, single ruled border top, no shadow.
   ───────────────────────────────────────────────────────────────── */
#bottom-toolbar {
  order: 1;   /* toolbar above tabs in default bottom layout */
  min-height: var(--toolbar-h);
  background: var(--bg);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 4px var(--l);
  gap: 2px;
  flex-shrink: 0;
  z-index: var(--z-ui);
  position: relative;
}

/* ── Toolbar groups ── */
.tb-group {
  display: flex;
  align-items: center;
  gap: var(--xs);
  padding: 0 var(--ms);
}

.tb-group:first-child { padding-left: 0; }
.tb-group:last-child  { padding-right: 0; }

/* Vertical divider between groups */
.tb-divider {
  width: 1px;
  height: 28px;
  background: var(--color-border);
  flex-shrink: 0;
  margin: 0 var(--xs);
}

/* ── Shape floating panel ── */
#shape-panel {
  position: fixed;
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 3px;
  box-shadow: var(--shadow-md);
  pointer-events: auto;
}
#shape-panel[hidden] { display: none; }


/* Flex spacer — pushes right-side groups to the end */
.tb-spacer {
  flex: 1;
}

/* ── Tool button — 60×60px IWB touch target (hard requirement) ── */
.tb-btn,
.tb-colour-btn {
  min-width: 60px;
  min-height: 60px;
  width: 60px;
  height: 60px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-l);
  background: transparent;
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background 60ms ease,
    color 60ms ease,
    border-color 60ms ease;
  position: relative;
  flex-shrink: 0;
}

.tb-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Text tool "T" — rendered in serif font at display size */
.tool-icon-T {
  font-family: Lora, Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  display: block;
}

/* Lora italic label — personal annotation, not UI label */
.tb-btn .lbl, .tb-group > .lbl {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 9px;
  font-weight: 400;
  color: var(--text-3);
  line-height: 1;
  letter-spacing: 0.01em;
  transition: color 60ms ease;
  user-select: none;
}

/* ── Toolbar position widget — 4 clickable sides ── */
.pos-widget {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  background: rgba(61, 44, 46, 0.04);
  cursor: default;
  border: 1px solid rgba(61, 44, 46, 0.18);
  border-radius: 3px;
  box-sizing: border-box;
}

/* ── Toolbar drag handle ── */
#tb-drag-handle { cursor: grab; opacity: 0.55; }
#tb-drag-handle:hover { opacity: 1; }

/* ── Toolbar drag drop zones (shown during drag) ── */
#toolbar-drag-overlay {
  position: absolute;
  inset: 0;
  z-index: 149;
  background: rgba(0, 0, 0, 0.28);
  cursor: default;
}

.tb-drop-zone {
  position: absolute;
  z-index: 150;
  border: none;
  cursor: pointer;
  transition: background 80ms ease;
  padding: 0;
  background: rgba(61, 44, 46, 0.18);
}
.tb-drop-zone.active  { background: var(--color-action); opacity: 0.9; }
.tb-drop-zone:hover   { background: var(--color-action); opacity: 0.75; }

/* Non-overlapping sides — 48px thick for easy touch targeting */
.pos-top    { top: 0;     left: 0;    right: 0;     height: 48px; }
.pos-bottom { bottom: 0;  left: 0;    right: 0;     height: 48px; }
.pos-left   { top: 48px;  left: 0;    bottom: 48px; width:  48px; }
.pos-right  { top: 48px;  right: 0;   bottom: 48px; width:  48px; }


/* Hover state — warm neutral, no teal */
.tb-btn:not(.active):hover {
  background: rgba(61, 44, 46, 0.08);
  color: var(--text-1);
}

.tb-btn:not(.active):hover .lbl {
  color: var(--text-2);
}

/* Active / selected tool — Workhouse card style: elevated white card */
.tb-btn.active {
  background: var(--card-bg);
  border-color: transparent;
  color: var(--text-1);
  box-shadow: 0 1px 4px rgba(61, 44, 46, 0.16), 0 0 0 1px rgba(61, 44, 46, 0.08);
}

/* Tools group — subtle card container so the 5 tools read as one unit */
.tb-tools-group {
  background: rgba(61, 44, 46, 0.06);
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
}

/* Lock button — full teal when active (locked state) */
#btn-freeze.active {
  background: var(--color-action);
  color: #fff;
}

/* Locked toolbar — grey out everything */
.bottom-toolbar[data-frozen="true"] .tb-btn {
  opacity: 0.25;
  pointer-events: none;
}


.tb-btn.active .lbl {
  color: var(--text-1);
}

/* Focus ring */
.tb-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring-action);
}

/* Danger variant — Clear button */
.tb-btn.danger:hover {
  background: var(--color-warning-lt);
  color: var(--color-warning);
}

.tb-btn.danger:hover .lbl {
  color: var(--color-warning);
}

.tb-btn.danger:focus-visible {
  box-shadow: 0 0 0 3px var(--ring-warning);
}

/* Disabled — undo/redo with empty stack */
.tb-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

.tb-btn:disabled:hover {
  background: transparent;
  color: var(--text-2);
}

/* ── Colour swatch button (in toolbar) ──
   Shows current colour as a 28px ink-drop circle.
   The full-size 60×60 touch target wraps it.
   Shares all .tb-btn dimensions and layout.           */

.tb-colour-btn:hover {
  background: var(--color-action-lt);
}

.tb-colour-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring-action);
}

/* The coloured circle inside the swatch button */
.tb-colour-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 80ms ease;
}

.tb-colour-btn:hover .tb-colour-dot {
  transform: scale(1.1);
}

.tb-colour-btn .lbl {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 9px;
  font-weight: 400;
  color: var(--text-3);
  line-height: 1;
  letter-spacing: 0.01em;
  user-select: none;
}

/* ── Stroke size buttons ── */
/* ── Stroke size floating panel ── */
#stroke-size-panel {
  position: fixed;
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 3px;
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  min-width: 264px;
}
#stroke-size-panel[hidden] { display: none; }

.ssp-size-row {
  display: flex;
  align-items: center;
  gap: 2px;
}


.ssp-btn {
  width: 48px;
  height: 44px;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 60ms ease, border-color 60ms ease;
  flex-shrink: 0;
}
.ssp-btn:hover  { background: rgba(61,44,46,0.06); }
.ssp-btn.active {
  background: var(--card-bg);
  box-shadow: 0 1px 3px rgba(61,44,46,0.14), 0 0 0 1px rgba(61,44,46,0.08);
  border-color: transparent;
}

.ssp-bar {
  display: block;
  width: 34px;
  flex-shrink: 0;
  border-radius: 99px;
  background: var(--text-2);
  transition: background 60ms ease;
}
.ssp-btn.active .ssp-bar { background: var(--color-action); }

/* ── Magic dock (HWR + draw-to-image) ── */
.ssp-magic-dock {
  gap: 6px;
  padding: 4px;
}

.ssp-magic-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 58px;
  border: 1.5px solid var(--color-action-bd);
  border-radius: var(--radius);
  background: var(--color-action-lt);
  color: var(--color-action);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.12s, opacity 0.15s;
}
.ssp-magic-btn:hover:not(:disabled) {
  background: var(--color-action-lt-hover);
}
.ssp-magic-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.ssp-magic-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-action);
  line-height: 1;
}

@keyframes hwr-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 0.9; }
}
.ssp-hwr-btn.hwr-loading,
.ssp-img-btn.hwr-loading {
  pointer-events: none;
  animation: hwr-pulse 1s ease-in-out infinite;
}

/* ── Conversion animations ───────────────────────────────────── */
@keyframes mb-burst-particle {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}
.mb-burst-particle {
  position: fixed;
  border-radius: 50%;
  animation: mb-burst-particle 400ms ease-out forwards;
  pointer-events: none;
  z-index: 9999;
}

/* ── Panel dock + tab layout ─────────────────────────────────── */
.panel-dock {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  background: rgba(61, 44, 46, 0.03);
  border-bottom: 1px solid var(--color-border);
}

.panel-dock-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  padding: 6px 4px;
  border: 1.5px solid var(--color-action-bd);
  border-radius: var(--radius);
  background: var(--color-action-lt);
  color: var(--text-1);
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 0.15s;
}

.panel-dock-btn:hover:not(:disabled) {
  background: var(--color-action-lt);
  border-color: var(--color-action);
}

.panel-dock-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.panel-dock-btn-label {
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--text-2);
  font-family: var(--font-sans);
}

/* Text widget dock overrides — horizontal bar uses normal button sizing */
.taw-dock {
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: nowrap;
}


.panel-tab-strip {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--color-border);
}

.panel-tab-btn {
  flex: 1;
  padding: 5px 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  color: var(--text-3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 60ms, border-color 60ms;
  touch-action: manipulation;
}

.panel-tab-btn:hover { color: var(--text-2); }

.panel-tab-btn.active {
  color: var(--text-1);
  border-bottom-color: var(--color-action);
}

.panel-tab-content {
  display: flex;
  flex-direction: column;
}

.panel-tab-pane {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px;
}

.panel-tab-pane[hidden] { display: none; }


/* ── Inline colour grid (shared across panels) ── */
.cgrid-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 0;
}

.cgrid-standard,
.cgrid-custom {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.cgrid-swatch {
  aspect-ratio: 1;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease;
  touch-action: manipulation;
  position: relative;
}
.cgrid-swatch:hover { transform: scale(1.16); }
.cgrid-swatch.active {
  box-shadow: 0 0 0 2.5px var(--card-bg), 0 0 0 5px var(--color-action);
}
.cgrid-swatch.light {
  box-shadow: inset 0 0 0 1.5px var(--color-border);
}
.cgrid-swatch.light.active {
  box-shadow:
    inset 0 0 0 1.5px var(--color-border),
    0 0 0 2.5px var(--card-bg),
    0 0 0 5px var(--color-action);
}
.cgrid-swatch.empty {
  background: var(--card-bg);
  border: 1.5px dashed var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
}
.cgrid-swatch.empty:hover { background: rgba(61,44,46,0.05); transform: scale(1.08); }

/* ── HWR result popup ── */
#hwr-result-popup {
  position: fixed;
  z-index: var(--z-hwr-popup);
  background: var(--card-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(61,44,46,0.18);
  padding: 8px 10px;
  min-width: 160px;
  max-width: 260px;
}

.hwr-result-text {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 500;
  word-break: break-word;
  color: var(--text-1);
}

.hwr-error {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: #c0392b;
}

.hwr-btn-row {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.hwr-convert-btn,
.hwr-cancel-btn {
  padding: 5px 12px;
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  border: 1.5px solid transparent;
  white-space: nowrap;
}

.hwr-convert-btn {
  background: var(--color-action);
  color: #fff;
  border-color: var(--color-action);
}

.hwr-cancel-btn {
  background: transparent;
  color: var(--text-1);
  border-color: var(--color-border);
}

/* ── Font size buttons — individual cards, same style as font family ── */
/* JS controls display directly via updateToolbarState(); these rules
   provide initial state and active/hover styling. */
.font-btn {
  width: 36px;
  height: 42px;
  min-width: 36px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--text-3);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 80ms ease, box-shadow 80ms ease, color 80ms ease;
  flex-shrink: 0;
}

.font-btn:hover {
  background: rgba(61, 44, 46, 0.06);
  color: var(--text-2);
}

.font-btn.active {
  background: var(--card-bg);
  box-shadow: 0 1px 3px rgba(61, 44, 46, 0.14), 0 0 0 1px rgba(61, 44, 46, 0.08);
  color: var(--text-1);
  border-color: transparent;
}

.font-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring-action);
}


.font-pick-btn {
  width: 44px;
  height: 42px;
  min-width: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-3);
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 80ms ease, box-shadow 80ms ease, color 80ms ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.font-pick-btn:hover {
  background: rgba(61, 44, 46, 0.06);
  color: var(--text-2);
}

.font-pick-btn.active {
  background: var(--card-bg);
  box-shadow: 0 1px 3px rgba(61, 44, 46, 0.14), 0 0 0 1px rgba(61, 44, 46, 0.08);
  color: var(--text-1);
  border-color: transparent;
}

.font-pick-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring-action);
}

/* 6×2 grid of swatch circles */
.picker-swatches {
  display: grid;
  grid-template-columns: repeat(6, 36px);
  gap: 8px;
  justify-content: space-between;
}

.picker-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 90ms ease, box-shadow 90ms ease;
}

.picker-swatch:hover {
  transform: scale(1.18);
}

.picker-swatch.active {
  box-shadow: 0 0 0 2.5px var(--card-bg), 0 0 0 5px var(--color-action);
}

.picker-swatch.light {
  box-shadow: inset 0 0 0 1.5px var(--color-border);
}

.picker-swatch.light.active {
  box-shadow:
    inset 0 0 0 1.5px var(--color-border),
    0 0 0 2.5px var(--card-bg),
    0 0 0 5px var(--color-action);
}

.picker-swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring-action);
}

/* 6 custom colour slots — same grid as presets */
.picker-custom-slots {
  display: grid;
  grid-template-columns: repeat(6, 36px);
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

/* Empty slot: faint border, + icon */
.custom-slot.empty {
  background: transparent !important;
  border: 1.5px dashed var(--color-border) !important;
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-slot.empty:hover {
  border-color: var(--color-action-bd) !important;
  color: var(--color-action);
  transform: scale(1.12);
}



/* ── Background colour picker popup ── */
.bg-picker-popup {
  position: absolute;
  z-index: var(--z-picker);
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(61,44,46,0.14);
  padding: 8px;
  display: none;
}
.bg-picker-popup.open { display: block; }

.bg-picker-swatches {
  display: flex;
  gap: 6px;
}

.bg-picker-swatch {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1.5px solid rgba(61,44,46,0.12);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.bg-picker-swatch:hover { transform: scale(1.08); }
.bg-picker-swatch.active {
  box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--color-action);
}
.bg-picker-swatch.dark { border-color: rgba(255,255,255,0.15); }


/* ─────────────────────────────────────────────────────────────────
   9. TOOLBAR SEARCH POPUP — compact floating search box
   ───────────────────────────────────────────────────────────────── */
#toolbar-search-popup {
  position: absolute;
  z-index: var(--z-panel);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  padding: 8px 10px;
  box-shadow: var(--shadow-modal);
  width: min(480px, 90%);
}

.ts-top-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ts-type-row {
  display: flex;
  gap: 6px;
}

.ts-type-btn {
  flex: 1;
  height: 32px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: var(--f-s);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 60ms ease, color 60ms ease, border-color 60ms ease;
}

.ts-type-btn:hover {
  background: var(--color-action-lt);
  border-color: var(--color-action-bd);
  color: var(--text-1);
}

.ts-type-btn.active {
  background: var(--color-action);
  border-color: var(--color-action);
  color: #fff;
}

#toolbar-search-popup[hidden] { display: none; }

.ts-input {
  flex: 1;
  height: 38px;
  padding: 0 var(--m);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--f-m);
}

.ts-input:focus {
  outline: none;
  border-color: var(--color-action-bd);
  box-shadow: 0 0 0 3px var(--ring-action-soft);
}

.ts-input::placeholder { color: var(--text-3); }

.ts-btn {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: var(--radius);
  background: var(--color-action);
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 60ms ease;
}

.ts-btn:hover { background: var(--color-action-dk); }

.ts-search {
  background: var(--card-bg);
  color: var(--color-action);
  border: 1.5px solid var(--color-action-bd);
}
.ts-search:hover {
  background: var(--color-action-lt);
  border-color: var(--color-action);
}

.ts-close {
  background: transparent;
  color: var(--text-3);
  font-size: 20px;
  line-height: 1;
}

.ts-close:hover { background: var(--color-border); color: var(--text-1); }

.ts-import {
  background: transparent;
  color: var(--text-2);
  border-left: 1px solid var(--color-border);
  border-radius: 0;
}

.ts-import:hover { background: var(--color-action-lt); color: var(--text-1); }

/* Search spinner — centred in canvas-container */
#search-spinner {
  position: absolute;
  z-index: var(--z-panel);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-action);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

#search-spinner[hidden] { display: none; }

@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* More button in qi-thumb strip */
.qi-more-btn {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border: 1.5px dashed var(--color-action-bd);
  border-radius: var(--radius);
  background: var(--color-action-lt);
  color: var(--color-action);
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 80ms ease, transform 80ms ease;
}

.qi-more-btn:hover { background: var(--color-action-lt-hover); transform: scale(1.06); }

/* Loading state on panel */
#quick-image-panel.loading { opacity: 0.5; pointer-events: none; }




/* ─────────────────────────────────────────────────────────────────
   10. TOAST NOTIFICATION
   Fixed, bottom-center, above toolbar. Slides up on show.
   ───────────────────────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: calc(var(--toolbar-h) + var(--tabs-h) + var(--m));
  left: 50%;
  z-index: var(--z-toast);
  background: var(--card-bg);
  color: var(--text-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
  padding: var(--s) var(--l);
  font-size: var(--f-m);
  font-family: var(--font-sans);
  white-space: nowrap;
  pointer-events: none;
  /* Hidden state: below viewport + invisible */
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
  transition:
    opacity 200ms ease-out,
    transform 200ms ease-out;
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#toast.error {
  border-color: var(--color-warning-bd);
  color: var(--color-warning-dk);
}


/* ─────────────────────────────────────────────────────────────────
   11. HIDDEN FILE INPUT
   ───────────────────────────────────────────────────────────────── */
#file-input {
  display: none;
}


/* ─────────────────────────────────────────────────────────────────
   11b. CONFIRM MODAL
   ───────────────────────────────────────────────────────────────── */
#confirm-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(61,44,46,0.35);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
}

#confirm-modal.open {
  display: flex;
}

.confirm-card {
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-modal);
  padding: var(--l) var(--xl);
  max-width: 320px;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: var(--m);
}

.confirm-msg {
  font-family: var(--font-sans);
  font-size: var(--f-ml);
  color: var(--text-1);
  margin: 0;
  text-align: center;
}

.confirm-btns {
  display: flex;
  gap: var(--m);
  justify-content: center;
}

.confirm-cancel,
.confirm-ok {
  flex: 1;
  height: 44px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--f-m);
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 80ms ease, border-color 80ms ease;
}

.confirm-cancel {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--text-2);
}

.confirm-cancel:hover {
  background: var(--bg);
  border-color: var(--text-3);
}

.confirm-ok {
  background: var(--color-action);
  border: 1.5px solid var(--color-action);
  color: #fff;
}

.confirm-ok:hover {
  background: var(--color-action-dk);
}

/* ─────────────────────────────────────────────────────────────────
   12. TOUCH TARGET UTILITY CLASS
   Applied to any element that needs guaranteed IWB touch target.
   ───────────────────────────────────────────────────────────────── */
.touch-target {
  min-width: 60px;
  min-height: 60px;
  touch-action: manipulation;
}


/* ─────────────────────────────────────────────────────────────────
   12a. QUICK IMAGE PANEL
   Thumbnail strip that appears beneath a just-placed quick image.
   ───────────────────────────────────────────────────────────────── */
#quick-image-panel {
  position: absolute;
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  padding: 6px;
  box-shadow: var(--shadow-md);
}

/* Type toggle row (Photo / Art / Vector) */
.qi-type-row {
  display: flex;
  gap: 4px;
}

.qi-type-btn {
  flex: 1;
  height: 28px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-s);
  background: var(--card-bg);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 60ms ease, color 60ms ease, border-color 60ms ease;
}

.qi-type-btn:hover {
  background: var(--color-action-lt);
  border-color: var(--color-action-bd);
  color: var(--text-1);
}

.qi-type-btn.active {
  background: var(--color-action);
  border-color: var(--color-action);
  color: #fff;
}

/* Thumbs + more button row */
.qi-thumbs-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
}

#quick-image-panel[hidden] { display: none; }

.qi-thumb {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: var(--radius);
  border: 2.5px solid transparent;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
  padding: 0;
  background: var(--bg);
  transition: border-color 80ms ease, transform 80ms ease;
}

.qi-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.qi-thumb:hover {
  border-color: var(--color-action-bd);
  transform: scale(1.06);
}

.qi-thumb.active {
  border-color: var(--color-action);
  box-shadow: 0 0 0 1px var(--color-action);
}


/* ─────────────────────────────────────────────────────────────────
   12c. OBJECT ACTION BAR
   Floats above any selected object. × delete + context actions.
   ───────────────────────────────────────────────────────────────── */
#object-action-bar {
  position: absolute;
  z-index: var(--z-panel);
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 3px;
  box-shadow: var(--shadow-md);
  pointer-events: auto;
}
#object-action-bar[hidden] { display: none; }

.oab-divider {
  width: 1px;
  height: 22px;
  background: var(--color-border);
  margin: 0 2px;
  flex-shrink: 0;
}

.oab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-sans);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 60ms ease, color 60ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.oab-btn:hover { background: rgba(61,44,46,0.06); color: var(--text-1); }

.oab-delete {
  color: var(--color-warning);
  min-width: 36px;
}
.oab-delete:hover {
  background: var(--color-warning-lt);
  color: var(--color-warning-dk);
  border-color: var(--color-warning-bd);
}

.oab-find {
  gap: 5px;
  padding: 0 10px;
  background: var(--color-action-lt);
  color: var(--color-action-dk);
  border-color: var(--color-action-bd);
}
.oab-find:hover { background: var(--color-action-lt-hover); color: var(--color-action-dk); }

.oab-find-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.oab-layer {
  gap: 4px;
  padding: 0 8px;
}
.oab-z-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.oab-icon-btn {
  min-width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  color: var(--color-action);
}
.oab-icon-btn:hover { background: var(--color-action-lt); }

/* Query chip inside action bar */
.oab-query-chip {
  display: flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2px 6px 2px 8px;
}
.oab-query-label {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  cursor: pointer;
}
.oab-query-label:hover { color: var(--text-1); }
.oab-query-input {
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--text-1);
  background: transparent;
  border: none;
  outline: none;
  width: 130px;
  padding: 0;
}

.oab-lock.active {
  background: var(--color-warning-lt);
  color: var(--color-warning-dk);
  border-color: var(--color-warning-bd);
}
.oab-lock.active:hover {
  background: var(--color-warning-lt);
  color: var(--color-warning-dk);
}


/* ─────────────────────────────────────────────────────────────────
   12b. TEXT ACTIONS WIDGET
   Floating pill that appears next to a selected text object.
   ───────────────────────────────────────────────────────────────── */
#text-actions-widget {
  position: fixed;
  z-index: var(--z-panel);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2px;
  box-shadow: var(--shadow-md);
  pointer-events: auto;
}

#text-actions-widget[hidden] { display: none; }

.taw-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.taw-divider {
  width: 1px;
  height: 24px;
  background: var(--color-border);
  margin: 0 3px;
  flex-shrink: 0;
}

.text-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 60ms ease, color 60ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.text-action-btn:hover {
  background: rgba(61,44,46,0.06);
  color: var(--text-1);
}

.text-action-btn.active {
  background: var(--text-1);
  color: #fff;
  border-color: transparent;
  box-shadow: none;
}

.text-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring-action);
}

/* Bold/italic labels */
.taw-bold   { font-weight: 700; font-size: 15px; }
.taw-italic { font-style: italic; font-size: 15px; }

/* Bg toggle button */
.taw-bg-toggle {
  gap: 4px;
}



/* ─────────────────────────────────────────────────────────────────
   13. TOOLBAR POSITION VARIANTS
   data-toolbar-pos attribute on #app drives layout changes.
   Page tabs always at the bottom regardless of toolbar position.
   ───────────────────────────────────────────────────────────────── */

/* ── TOP — toolbar at top, canvas middle, tabs at bottom ── */
[data-toolbar-pos="top"] #bottom-toolbar {
  order: -1;
  border-top: none;
  border-bottom: 1px solid var(--color-border);
}
[data-toolbar-pos="top"] #canvas-container {
  order: 0;
}
[data-toolbar-pos="top"] #page-tabs-bar {
  order: 1;
  border-top: 1px solid var(--color-border);
}
[data-toolbar-pos="top"] #toast {
  bottom: calc(var(--tabs-h) + var(--m));
}

/* ── LEFT — toolbar sidebar on left, canvas + tabs on right ── */
#app[data-toolbar-pos="left"] {
  display: grid;
  grid-template-columns: var(--toolbar-h) 1fr;
  grid-template-rows: 1fr var(--tabs-h);
}
[data-toolbar-pos="left"] #bottom-toolbar {
  grid-column: 1;
  grid-row: 1 / 3;
  width: var(--toolbar-h);
  height: 100%;
  border-top: none;
  border-right: 1px solid var(--color-border);
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  padding: var(--s) 0;
  overflow-y: auto;
  overflow-x: hidden;
  gap: 0;
}
[data-toolbar-pos="left"] #bottom-toolbar .tb-group {
  flex-direction: column;
  padding: var(--xs) 0;
  gap: var(--xs);
}
[data-toolbar-pos="left"] #bottom-toolbar .tb-divider {
  width: 32px;
  height: 1px;
  margin: 2px 0;
}
[data-toolbar-pos="left"] #bottom-toolbar .tb-spacer {
  flex: 1;
}
[data-toolbar-pos="left"] #canvas-container {
  grid-column: 2;
  grid-row: 1;
  height: 100%;
}
[data-toolbar-pos="left"] #page-tabs-bar {
  grid-column: 2;
  grid-row: 2;
}
[data-toolbar-pos="left"] #toast {
  bottom: calc(var(--tabs-h) + var(--m));
}

/* ── RIGHT — toolbar sidebar on right, canvas + tabs on left ── */
#app[data-toolbar-pos="right"] {
  display: grid;
  grid-template-columns: 1fr var(--toolbar-h);
  grid-template-rows: 1fr var(--tabs-h);
}
[data-toolbar-pos="right"] #bottom-toolbar {
  grid-column: 2;
  grid-row: 1 / 3;
  width: var(--toolbar-h);
  height: 100%;
  border-top: none;
  border-left: 1px solid var(--color-border);
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  padding: var(--s) 0;
  overflow-y: auto;
  overflow-x: hidden;
  gap: 0;
}
[data-toolbar-pos="right"] #bottom-toolbar .tb-group {
  flex-direction: column;
  padding: var(--xs) 0;
  gap: var(--xs);
}
[data-toolbar-pos="right"] #bottom-toolbar .tb-divider {
  width: 32px;
  height: 1px;
  margin: 2px 0;
}
[data-toolbar-pos="right"] #bottom-toolbar .tb-spacer {
  flex: 1;
}
[data-toolbar-pos="right"] #canvas-container {
  grid-column: 1;
  grid-row: 1;
  height: 100%;
}
[data-toolbar-pos="right"] #page-tabs-bar {
  grid-column: 1;
  grid-row: 2;
}
[data-toolbar-pos="right"] #toast {
  bottom: calc(var(--tabs-h) + var(--m));
}


/* ─────────────────────────────────────────────────────────────────
   CROP OVERLAY
   ───────────────────────────────────────────────────────────────── */

#crop-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-crop-overlay);
  cursor: crosshair;
  touch-action: none;
}

#crop-draw-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#crop-frame {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
  border: 2px solid #fff;
  cursor: move;
  box-sizing: border-box;
}

#crop-frame.circle { border-radius: 50%; }

.crop-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.4);
  border-radius: 3px;
  touch-action: none;
}

.crop-nw { top: -8px;  left: -8px;  cursor: nw-resize; }
.crop-n  { top: -8px;  left: calc(50% - 8px); cursor: n-resize; }
.crop-ne { top: -8px;  right: -8px; cursor: ne-resize; }
.crop-w  { top: calc(50% - 8px); left: -8px; cursor: w-resize; }
.crop-e  { top: calc(50% - 8px); right: -8px; cursor: e-resize; }
.crop-sw { bottom: -8px; left: -8px;  cursor: sw-resize; }
.crop-s  { bottom: -8px; left: calc(50% - 8px); cursor: s-resize; }
.crop-se { bottom: -8px; right: -8px; cursor: se-resize; }

#crop-freehand-hint {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.65);
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  pointer-events: none;
  white-space: nowrap;
}

#crop-controls {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--card-bg);
  border-radius: var(--radius-l);
  padding: 8px 12px;
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}

#crop-mode-btns {
  display: flex;
  gap: 6px;
}

.crop-mode-btn {
  padding: 6px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  touch-action: manipulation;
  color: var(--text-1);
}
.crop-mode-btn.active {
  background: var(--color-action);
  color: #fff;
  border-color: var(--color-action);
}

#crop-action-btns {
  display: flex;
  gap: 6px;
  margin-left: 6px;
  border-left: 1px solid var(--color-border);
  padding-left: 12px;
}

#crop-cancel-btn, #crop-apply-btn {
  padding: 6px 16px;
  border-radius: var(--radius);
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  font-size: 13px;
  touch-action: manipulation;
  color: var(--text-1);
  background: transparent;
}
#crop-apply-btn {
  background: var(--color-action);
  color: #fff;
  border-color: var(--color-action);
}


/* ─────────────────────────────────────────────────────────────────
   FLOATING TOOL PANEL (#ftp) — double-tap/click on empty canvas
   ───────────────────────────────────────────────────────────────── */

#ftp {
  position: fixed;
  z-index: var(--z-panel);
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-md);
  padding: 6px;
  touch-action: manipulation;
}

.ftp-tools {
  display: flex;
  gap: 2px;
}

.ftp-tool-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: background 60ms ease, color 60ms ease;
}
.ftp-tool-btn:hover {
  background: rgba(61,44,46,0.06);
  color: var(--text-1);
}
.ftp-tool-btn.active {
  color: var(--text-1);
  background: var(--card-bg);
  box-shadow: 0 1px 3px rgba(61,44,46,0.14), 0 0 0 1px rgba(61,44,46,0.08);
}
#ftp-images.active {
  background: var(--color-action);
  color: #fff;
  box-shadow: 0 1px 3px rgba(61,44,46,0.14);
}
.ftp-tool-btn .tool-icon-T {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}


/* ─────────────────────────────────────────────────────────────────
   FG/BG COLOUR BUTTONS IN TOOLBAR
   ───────────────────────────────────────────────────────────────── */

.tb-colour-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  flex-shrink: 0;
}
.tb-colour-group .tb-colour-swatches {
  display: flex;
  flex-direction: row;
  gap: 2px;
}

/* Palette selector row in toolbar colour group */
.tb-palette-row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 2px;
}
.tb-palette-arrow {
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-s);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.tb-palette-arrow:hover { background: rgba(61,44,46,0.08); color: var(--text-1); }
.tb-palette-name {
  font-family: var(--font-heading);
  font-size: 9px;
  font-style: italic;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

/* Empty BG swatch — dashed circle */
.tb-bg-swatch.empty {
  background: var(--card-bg) !important;
  border: 2px dashed var(--color-border);
  box-shadow: none;
}

/* Toolbar position variants for colour group */
[data-toolbar-pos="left"] #bottom-toolbar .tb-colour-group,
[data-toolbar-pos="right"] #bottom-toolbar .tb-colour-group {
  padding: 4px 0;
}

/* ─────────────────────────────────────────────────────────────────
   FG/BG COLOUR PANEL POPUP
   ───────────────────────────────────────────────────────────────── */

.colour-panel-popup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  z-index: 110;
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 12px;
  box-sizing: border-box;
  width: 284px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transition: opacity 120ms ease, transform 120ms ease;
}

.colour-panel-popup.open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
}


.cp-grid-wrap {
  /* inherits cgrid layout */
}

/* Opacity row in colour panel */
.cp-opacity-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.cp-opacity-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.cp-opacity-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
}

.cp-opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-action);
  border: 2px solid var(--card-bg);
  box-shadow: 0 1px 3px rgba(61,44,46,0.25);
  margin-top: -7px;
}

.cp-opacity-slider::-moz-range-track {
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
}

.cp-opacity-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-action);
  border: 2px solid var(--card-bg);
  box-shadow: 0 1px 3px rgba(61,44,46,0.25);
}

.cp-opacity-label {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  min-width: 3ch;
  text-align: right;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────
   STROKE SIZE PANEL — fill toggle row
   ───────────────────────────────────────────────────────────────── */

.ssp-stroke-pane {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 0;
}

.ssp-fill-toggle-row {
  padding: 4px var(--ms) 2px;
}

.ssp-fill-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius);
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.ssp-fill-toggle-btn:hover {
  background: rgba(61,44,46,0.06);
  color: var(--text-1);
}

.ssp-fill-toggle-btn.active {
  background: var(--color-action-lt);
  border-color: var(--color-action-bd);
  color: var(--color-action);
}

/* ─────────────────────────────────────────────────────────────────
   SHAPE PANEL — stroke/fill toggle buttons
   ───────────────────────────────────────────────────────────────── */

.sp-toggle-row {
  display: flex;
  flex-direction: row;
  gap: 6px;
  padding: 6px var(--ms) 4px;
}

.sp-toggle-btn {
  flex: 1;
  padding: 6px 8px;
  border-radius: var(--radius);
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  text-align: center;
}

.sp-toggle-btn:hover {
  background: rgba(61,44,46,0.06);
  color: var(--text-1);
}

.sp-toggle-btn.active {
  background: var(--color-action-lt);
  border-color: var(--color-action-bd);
  color: var(--color-action);
}

/* ─────────────────────────────────────────────────────────────────
   TEXT ACTIONS WIDGET — bg toggle row
   ───────────────────────────────────────────────────────────────── */

.taw-bg-toggle-row {
  padding: 6px var(--ms) 4px;
}

/* ─────────────────────────────────────────────────────────────────
   FTP COLOUR BUTTONS
   ───────────────────────────────────────────────────────────────── */

.ftp-divider {
  width: 1px;
  height: 24px;
  background: var(--color-border);
  margin: 0 2px;
  flex-shrink: 0;
  align-self: center;
}

.ftp-colour-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

.ftp-colour-swatch {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(61,44,46,0.18);
  flex-shrink: 0;
  transition: transform 80ms ease;
}

.ftp-colour-swatch.empty {
  background: var(--card-bg) !important;
  border: 2px dashed var(--color-border);
}

.ftp-colour-btn:hover .ftp-colour-swatch {
  transform: scale(1.15);
}