/* ── Canvas options bar (under the top bar while the Canvas tool is active) ── */
#canvas-options {
  display: flex; align-items: center; gap: 16px;
  height: 40px; flex-shrink: 0; /* same height whatever it shows, so nothing below jumps */
  padding: 0 1.2rem;
  background: #141414; border-bottom: 1px solid #2e2e2e;
  font-size: 0.78rem;
  position: relative; z-index: 4;
  overflow-x: auto; scrollbar-width: none;
}
#canvas-options[hidden] { display: none; }
/* pinned to the right edge; the bar's right padding (17px) lines it up with the content inside the
   docked windows below (dock window margin + window padding) */
#canvas-options { padding-right: 17px; }
#canvas-options #btn-export { margin-left: auto; flex-shrink: 0; }
/* icon + label button (Export) */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; padding: 0 10px 0 8px; font: inherit; white-space: nowrap;
  background: transparent; border: 1px solid #3a3a3a; border-radius: 4px;
  color: #ccc; cursor: pointer;
}
.icon-btn:hover { background: #ffffff10; color: #fff; border-color: #555; }
.icon-btn:active, .icon-btn[aria-expanded="true"] { background: #4a7fcb44; }
.pop-menu {
  position: fixed; z-index: 1100; min-width: 220px; padding: 4px;
  background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 6px;
  box-shadow: 0 8px 24px #0008; display: flex; flex-direction: column;
}
.pop-menu[hidden] { display: none; }
.pop-menu button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 7px 10px; border: none; border-radius: 4px; background: transparent;
  color: #e0e0e0; font: inherit; font-size: 0.8rem; text-align: left; cursor: pointer;
}
.pop-menu button b { font-weight: 500; }
.pop-menu button span { color: #888; font-size: 0.72rem; }
.pop-menu button:hover:not(:disabled), .pop-menu button:focus-visible { background: #ffffff12; outline: none; }
.pop-menu button:disabled { cursor: default; }
.pop-menu button:disabled b { color: #666; }
/* the settings laid out in one row, groups separated by thin lines */
#canvas-options #ts-move { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
#canvas-options #ts-move-main { display: flex; align-items: center; gap: 16px; }
#canvas-options #ts-move-main > * { margin: 0; flex-shrink: 0; }
#canvas-options .ts-row { gap: 8px; min-height: 0; }
#canvas-options #ts-move-main > .ts-row:not(:first-child) { padding-left: 16px; border-left: 1px solid #2e2e2e; }
#canvas-options .ts-divider { width: 1px; height: 22px; background: #2e2e2e; }
#canvas-options .ts-reset { width: auto; padding: 0.3rem 0.8rem; }
#ts-move-main[hidden], #ts-crop-controls[hidden], #canvas-options #ts-move[hidden], .co-item[hidden] { display: none !important; }
/* number field with our own ▲▼ steppers (same look as the Layers opacity field) */
.num-field {
  display: inline-flex; align-items: stretch; height: 26px;
  background: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 4px;
}
.num-field:focus-within { border-color: #4a7fcb; }
.num-field input {
  width: 52px; /* real-scale zoom can reach 5 digits */ background: transparent; border: none; outline: none;
  color: #e0e0e0; font: inherit; padding: 0 2px 0 6px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.num-field input:disabled { opacity: 0.35; }
.num-unit { display: flex; align-items: center; padding-right: 6px; color: #999; }
.num-steps { display: flex; flex-direction: column; border-left: 1px solid #3a3a3a; }
.num-steps button {
  flex: 1; width: 18px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: #999; cursor: pointer;
}
.num-steps button + button { border-top: 1px solid #3a3a3a; }
.num-steps button:hover { background: #ffffff10; color: #fff; }
.num-steps button:active { background: #4a7fcb44; }
.num-steps button:disabled { opacity: 0.35; pointer-events: none; }
.num-steps button:first-child { border-top-right-radius: 3px; }
.num-steps button:last-child { border-bottom-right-radius: 3px; }
/* read-only zoom / canvas size */
#co-info { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.co-item { color: #999; white-space: nowrap; }
.co-item b { font-weight: 500; color: #e0e0e0; margin-left: 4px; font-variant-numeric: tabular-nums; }
/* Zoom | Canvas size | (Canvas tool controls) — thin dividers between the groups */
#co-info > * + *, #canvas-options > #ts-move:not([hidden]), #canvas-options > .co-group:not([hidden]) { padding-left: 16px; border-left: 1px solid #2e2e2e; }
/* per-tool groups in the bar: Move (Transform) and Draw (brush) */
.co-group { display: flex; align-items: center; gap: 10px; flex-shrink: 0; white-space: nowrap; }
.co-group[hidden], .co-sub[hidden] { display: none !important; }
.co-sub { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid #2e2e2e; }
.co-btns, .co-inline { display: flex; align-items: center; gap: 4px; }
/* brush shape: one joined group of icon buttons (names in the tooltips) */
.seg { display: inline-flex; border: 1px solid #3a3a3a; border-radius: 5px; overflow: hidden; }
#co-draw .seg .btn {
  flex: none !important; width: 30px; height: 26px; padding: 0 !important; gap: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 0 !important; /* hide the text label; the icon carries it */
  border: none; border-radius: 0; background: #1e1e1e; color: #aaa;
}
#co-draw .seg .btn + .btn { border-left: 1px solid #3a3a3a; }
#co-draw .seg .btn:hover { background: #2a2a2a; color: #fff; }
#co-draw .seg .btn.active { background: #4a7fcb; color: #fff; }
#co-draw .seg .btn svg { width: 13px; height: 13px; }
/* live footprint of the brush */
#co-brush-preview { width: 26px; height: 26px; border: 1px solid #3a3a3a; border-radius: 4px; background: #1a1a1a; image-rendering: pixelated; }
#co-draw input[type=range] { flex: none !important; width: 80px; }
#co-draw .num-field input {
  width: 30px !important; padding: 0 2px 0 6px !important; border: none !important; background: transparent !important;
  font-size: inherit !important; text-align: right !important; -moz-appearance: textfield;
}
#co-draw .num-field input::-webkit-inner-spin-button, #co-draw .num-field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#co-transform .ts-hint { display: none; }
#co-transform #xf-idle:not([hidden]), #co-transform #xf-active:not([hidden]) { display: flex; align-items: center; gap: 10px; }
#co-transform .ts-row { margin: 0; min-height: 0; gap: 8px; }
/* no Size / Apply / Cancel in the bar: the size shows under the frame, a click outside the frame applies,
   Esc cancels (phones keep Apply / Cancel in their settings window) */
#co-transform #xf-active { display: none !important; }
#xf-active .ts-row { display: none; }
#co-transform .btn { width: auto; padding: 0.3rem 0.8rem; }
#co-info .ts-row { gap: 8px; min-height: 0; margin: 0; }
/* editable canvas size (Canvas tool) */
#co-size-item { display: inline-flex; align-items: center; gap: 4px; }
#co-size-edit { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
#co-size-edit[hidden], #co-size[hidden] { display: none; }
#co-size-edit .num-field input { width: 38px; text-align: center; padding: 0 4px; }
.co-x, .co-px { color: #999; }
/* confirmation dialog (shares the Insert image look) */
#confirm-backdrop { position: fixed; inset: 0; z-index: 2500; background: #0008; display: flex; align-items: center; justify-content: center; padding: 16px; }
#confirm-backdrop[hidden] { display: none; }
#confirm-dialog { width: 360px; max-width: 100%; padding: 16px; background: #1a1a1a; border: 1px solid #3a3a3a; border-radius: 8px; box-shadow: 0 12px 40px #000a; color: #e0e0e0; font-size: 0.8rem; }
#confirm-dialog h2 { margin: 0 0 8px; font-size: 0.95rem; font-weight: 600; }
#confirm-text { color: #bbb; line-height: 1.45; margin-bottom: 14px; }
#confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* crop size badge under the frame (screen space, so it never rotates or scales) */
#crop-badge {
  position: fixed; z-index: 20; transform: translateX(-50%);
  padding: 4px 9px; border-radius: 6px;
  background: #161616ee; border: 1px solid #4a7fcb; box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  color: #fff; font-size: 0.74rem; text-align: center; pointer-events: none; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#crop-badge[hidden] { display: none; }
#crop-badge .cb-size { font-weight: 600; }
#crop-badge .cb-delta { font-size: 0.68rem; color: #aaa; margin-top: 1px; }
#crop-badge .cb-plus { color: #5fe08a; }
#crop-badge .cb-minus { color: #ff6b6f; }
/* crop controls (bar on desktop, window on phones) */
#ts-crop-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crop-size { font-family: ui-monospace, Consolas, monospace; min-width: 96px; }
.btn.crop-apply { background: #4a7fcb; border-color: #5a8fdb; color: #fff; }
.btn.crop-apply:hover { background: #5a8fdb; }

/* Canvas tool › Grid: which grid kinds show (either or both); dimmed while the grid is off */
.ts-grid-kinds .btn {
  padding: 0.22rem 0.6rem; font-size: 0.72rem; border: none; border-radius: 0;
  background: #1e1e1e; color: #aaa;
}
.ts-grid-kinds .btn + .btn { border-left: 1px solid #3a3a3a; }
.ts-grid-kinds .btn:hover { background: #2a2a2a; color: #fff; }
.ts-grid-kinds .btn.active { background: #4a7fcb; color: #fff; }
.ts-grid-kinds.off { opacity: 0.4; }
#ts-grid-row { gap: 10px; }

/* narrower windows (e.g. 1280 px laptops): tighter spacing between the groups so the bar still fits */
@media (max-width: 1499px) {
  #canvas-options, #canvas-options #ts-move, #canvas-options #ts-move-main, #co-info { gap: 10px; }
  #canvas-options #ts-move-main > .ts-row:not(:first-child),
  #co-info > * + *, #canvas-options > #ts-move:not([hidden]), #canvas-options > .co-group:not([hidden]) { padding-left: 10px; }
}
.ts-iso-tip { display: inline-flex; align-items: center; gap: 6px; }
.ts-iso-tip[hidden] { display: none; }
@media (max-width: 1499px) {
  .long-label { display: none; } /* "Reset to default" → "Reset", "Isometric" → "Iso" */
  .ts-grid-kinds .btn { padding: 0.22rem 0.45rem; }
}