/* ═══════════════════════════════════════════════════════════════
   UJIYARI — Annotation / Drawing Toolbar  v2.0
   Desktop + tablet only (hidden below 768 px via media query)
═══════════════════════════════════════════════════════════════ */

/* ── Hide everything on phones ─────────────────────────────────── */
@media (max-width: 767px) {
  #ujk-toggle-btn,
  #ujk-toolbar,
  #ujk-tiles,
  #ujk-ghost-canvas,
  #ujk-cursor-dot,
  #ujk-text-input {
    display: none !important;
  }
}

/* ── Toggle button ──────────────────────────────────────────────── */
#ujk-toggle-btn {
  position: fixed;
  right: 20px;
  /* Clears #fab-stack, which is 3 x 48px + 2 x 12px gaps from bottom:20px,
     i.e. it ends at 188px.  Same 12px gap as the buttons inside the stack.
     This button is hidden below 768px (top of this file) and the stack is
     shorter there anyway, so one value covers both. */
  bottom: 200px;
  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  cursor: pointer;

  background: linear-gradient(145deg, #1e3a5a, #0f2238);
  color: #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.1);

  transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease,
              box-shadow 0.18s ease;
}

#ujk-toggle-btn svg {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
}

#ujk-toggle-btn:hover {
  background: linear-gradient(145deg, #e8830a, #c96d05);
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(232, 131, 10, 0.4), inset 0 1px 0 rgba(255,255,255,0.15);
}

#ujk-toggle-btn.active {
  background: linear-gradient(145deg, #e8830a, #c96d05);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(232, 131, 10, 0.35), inset 0 1px 0 rgba(255,255,255,0.15);
}

#ujk-toggle-btn:focus-visible {
  outline: 2px solid #e8830a;
  outline-offset: 3px;
}

/* ── Toolbar card ───────────────────────────────────────────────── */
#ujk-toolbar {
  position: fixed;
  top: 80px;
  right: 16px;
  z-index: 10000;

  width: 220px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);

  background: linear-gradient(160deg, #162b42 0%, #0d1e31 100%);
  color: #e2e8f0;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  user-select: none;

  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

/* ── Toolbar header with close button ───────────────────────────── */
.ujk-toolbar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.ujk-toolbar__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(226, 232, 240, 0.95);
}

.ujk-toolbar__close {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(226, 232, 240, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}

.ujk-toolbar__close:hover {
  background: rgba(239, 68, 68, 0.18);   /* soft red tint to signal close */
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.4);
}

.ujk-toolbar__close:active {
  transform: scale(0.94);
}

.ujk-toolbar__close:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}

/* Light-theme variant — match light toolbar background */
#ujk-toolbar.ujk-light .ujk-toolbar__header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

#ujk-toolbar.ujk-light .ujk-toolbar__title {
  color: #1f2937;
}

#ujk-toolbar.ujk-light .ujk-toolbar__close {
  background: rgba(0, 0, 0, 0.04);
  color: #1f2937;
  border-color: rgba(0, 0, 0, 0.08);
}

#ujk-toolbar.ujk-light .ujk-toolbar__close:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #991b1b;
  border-color: rgba(239, 68, 68, 0.4);
}

/* ── Export PDF button (Phase 3) ────────────────────────────────── */
.ujk-export-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(135deg, #2563a8 0%, #1d4ed8 100%);
  color: #fff;
  border: 1px solid rgba(59, 130, 246, 0.5);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, opacity 0.2s;
}

.ujk-export-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.ujk-export-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.ujk-export-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.ujk-export-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ujk-spin 0.7s linear infinite;
}

@keyframes ujk-spin {
  to { transform: rotate(360deg); }
}

#ujk-toolbar.ujk-light .ujk-export-btn {
  border-color: rgba(37, 99, 168, 0.5);
}

/* ── Toolbar sections ───────────────────────────────────────────── */
.ujk-toolbar__section {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ujk-toolbar__section--last {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.ujk-toolbar__section--shortcuts {
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.ujk-toolbar__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.75);
  margin-bottom: 8px;
}

.ujk-toolbar__row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ujk-toolbar__row--wrap {
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Tool buttons ───────────────────────────────────────────────── */
.ujk-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  cursor: pointer;

  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;

  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              opacity 0.15s ease, transform 0.1s ease;
}

/* ── Explicit SVG sizing — prevents reset.css height:auto overriding
      the SVG presentation attributes and collapsing stroke icons ── */
.ujk-tool-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

.ujk-tool-btn:hover:not(:disabled) {
  background: rgba(232, 131, 10, 0.25);
  border-color: rgba(232, 131, 10, 0.65);
  color: #f8b967;
  transform: scale(1.05);
}

.ujk-tool-btn.active {
  background: #e8830a;
  border-color: #f5a23b;
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(232, 131, 10, 0.35), 0 2px 8px rgba(232, 131, 10, 0.4);
}

.ujk-tool-btn.active:hover {
  transform: none;
}

.ujk-tool-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.ujk-tool-btn:focus-visible {
  outline: 2px solid #e8830a;
  outline-offset: 2px;
}

/* ── Color swatches ─────────────────────────────────────────────── */
.ujk-color-swatch {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  cursor: pointer;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.ujk-color-swatch:hover {
  transform: scale(1.2);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}

.ujk-color-swatch.selected {
  border-color: #ffffff;
  transform: scale(1.25);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 3px 10px rgba(0, 0, 0, 0.4);
}

.ujk-color-swatch:focus-visible {
  outline: 2px solid #e8830a;
  outline-offset: 2px;
}

/* ── Spinbox row (Width / Opacity) ──────────────────────────────── */
.ujk-toolbar__row--spinbox {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 3px;
}

.ujk-spin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 7px;
  cursor: pointer;

  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;

  transition: background 0.15s ease, color 0.15s ease;
}

.ujk-spin-btn:hover {
  background: rgba(232, 131, 10, 0.35);
  color: #ffffff;
}

.ujk-spin-btn:active {
  transform: scale(0.9);
}

.ujk-spin-btn:focus-visible {
  outline: 2px solid #e8830a;
  outline-offset: 2px;
}

.ujk-spin-val {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #f1f5f9;
  min-width: 48px;
  padding: 0 4px;
  letter-spacing: 0.03em;
}

/* ── Clear button ───────────────────────────────────────────────── */
.ujk-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  width: 100%;
  height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 9px;
  cursor: pointer;

  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;

  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ujk-clear-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}

.ujk-clear-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.6);
  color: #ffffff;
}

.ujk-clear-btn:focus-visible {
  outline: 2px solid #ef4444;
  outline-offset: 2px;
}

/* ── Keyboard shortcuts hint ────────────────────────────────────── */
.ujk-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 5px 6px;
}

.ujk-sc-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: #64748b;
  white-space: nowrap;
}

.ujk-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 2px 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  color: #cbd5e1;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

/* ── Text input overlay ─────────────────────────────────────────── */
#ujk-text-input {
  position: fixed;
  z-index: 10001;
  padding: 2px 6px;
  min-width: 120px;
  max-width: 400px;

  background: rgba(0, 0, 0, 0.55);
  border: 1px dashed rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  outline: none;

  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  caret-color: white;
}

#ujk-text-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.75em;
  font-weight: 400;
}

/* ── Cursor dot preview ─────────────────────────────────────────── */
#ujk-cursor-dot {
  pointer-events: none;
  z-index: 10001;
  transition: width 0.1s ease, height 0.1s ease;
}

/* Back-to-top button styles moved to components.css (global bundle) on 3 Sep
   2026: this file loads only on article and editorial pages, so the button
   had no position anywhere else and never appeared. */

/* ── Draw-active cursor — managed by JS via document.body.style.cursor ── */
/* No CSS cursor:none rule here — JS sets it directly to avoid !important battles */

/* ── Light theme ────────────────────────────────────────────────── */
#ujk-toolbar.ujk-light {
  background: linear-gradient(160deg, #f8fafc 0%, #f0f4f8 100%);
  color: #1e293b;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.12),
    0 2px 10px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

#ujk-toolbar.ujk-light .ujk-toolbar__section {
  border-bottom-color: rgba(0, 0, 0, 0.07);
}

#ujk-toolbar.ujk-light .ujk-toolbar__label {
  color: #64748b;
}

#ujk-toolbar.ujk-light .ujk-tool-btn {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.14);
  color: #334155;
}

#ujk-toolbar.ujk-light .ujk-tool-btn:hover:not(:disabled) {
  background: rgba(232, 131, 10, 0.12);
  border-color: rgba(232, 131, 10, 0.45);
  color: #b85e04;
}

#ujk-toolbar.ujk-light .ujk-tool-btn.active {
  background: #e8830a;
  border-color: #f5a23b;
  color: #ffffff;
}

#ujk-toolbar.ujk-light .ujk-toolbar__row--spinbox {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

#ujk-toolbar.ujk-light .ujk-spin-btn {
  background: rgba(0, 0, 0, 0.07);
  color: #334155;
}

#ujk-toolbar.ujk-light .ujk-spin-btn:hover {
  background: rgba(232, 131, 10, 0.18);
  color: #b85e04;
}

#ujk-toolbar.ujk-light .ujk-spin-val {
  color: #1e293b;
}

#ujk-toolbar.ujk-light .ujk-shortcuts .ujk-sc-item {
  color: #94a3b8;
}

#ujk-toolbar.ujk-light .ujk-key {
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(0, 0, 0, 0.05);
  color: #475569;
}

/* ── Theme toggle button (sits in History row alongside undo/redo) ── */
/* Inherits all .ujk-tool-btn styles; no additional CSS needed */