/* Steps banner at top of the tool */
.redact-steps {
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  flex-wrap: wrap;
}
.redact-steps li {
  flex: 1 1 220px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.4;
}
.redact-steps li strong { color: var(--text); }
.redact-steps .step-num {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
}
.redact-steps .step-text { flex: 1; }

.redact-grid-header {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.redact-grid-header em { font-style: normal; font-weight: 600; color: var(--primary); }

/* Page grid — bigger cards for the redact tool */
.redact-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.redact-page-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.redact-page-card:hover { border-color: var(--border-strong); }
.redact-page-card.has-redactions { border-color: var(--danger); }
.redact-page-card .page-thumb {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  position: relative;
  background: #fff;
  padding: 0;
  display: block;
  cursor: pointer;
  transition: filter 0.12s;
}
.redact-page-card .page-thumb:hover { filter: brightness(0.96); }
.redact-page-card .page-thumb:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.redact-page-card .page-thumb canvas {
  display: block;
  width: 100%;
  height: auto;
}
.redact-page-card .page-num {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.redact-thumb-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  z-index: 1;
}
.redact-thumb-actions {
  display: flex;
  gap: 6px;
  padding: 10px;
  background: var(--bg-elev);
}
.redact-thumb-actions .btn {
  flex: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.redact-mark-btn svg { flex-shrink: 0; }

/* Fullscreen editor overlay */
.redact-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 16, 0.88);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.redact-editor {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  width: 100%;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.redact-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.redact-toolbar-info { display: flex; flex-direction: column; gap: 2px; }
.redact-toolbar-info strong { font-size: 14px; }
.redact-count { font-size: 12px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.redact-toolbar-help {
  flex: 1;
  font-size: 12px;
  color: var(--text-soft);
  min-width: 200px;
}
.redact-toolbar-zoom {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.redact-toolbar-zoom .btn { padding: 4px 8px; }
.redact-zoom-pct {
  font-size: 12px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  min-width: 42px;
  text-align: center;
  user-select: none;
}
.redact-toolbar-actions { display: flex; gap: 8px; }
.redact-toolbar-history { display: flex; gap: 2px; }
.redact-toolbar-history .btn { padding: 4px 8px; }
.redact-toolbar-history .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.redact-toolbar-pager {
  display: flex;
  align-items: center;
  gap: 4px;
}
.redact-toolbar-pager .btn { padding: 4px 8px; }

/* Editor body: optional thumbnails sidebar + the stage. flex row so the
   sidebar is fixed width and the stage flexes to fill. min-height:0 lets
   the stage's overflow:auto actually clip and scroll. */
.redact-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.redact-thumbs {
  flex: 0 0 156px;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
  border-right: 1px solid var(--border);
}
.redact-editor[data-single-page="true"] .redact-thumbs { display: none; }

.redact-thumb-strip {
  position: relative;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: #fff;
  transition: border-color .12s, box-shadow .12s;
  overflow: hidden;
}
.redact-thumb-strip:hover { border-color: var(--border-strong); }
.redact-thumb-strip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.redact-thumb-strip.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft, rgba(37, 99, 235, 0.18));
}
.redact-thumb-strip canvas {
  display: block;
  width: 100%;
  height: auto;
}
.redact-thumb-strip .thumb-label {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  pointer-events: none;
  line-height: 1.4;
}
.redact-thumb-strip .thumb-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.redact-stage {
  flex: 1;
  overflow: auto;
  background:
    linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.05) 75%),
    linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.05) 75%) 10px 10px,
    var(--bg);
  background-size: 20px 20px;
  padding: 24px;
}
.redact-stage-inner {
  position: relative;
  display: block;
  margin: 0 auto;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.redact-stage-inner canvas {
  display: block;
}
.redact-rect-layer {
  position: absolute;
  inset: 0;
  cursor: crosshair;
  touch-action: none;
}
.redact-rect {
  position: absolute;
  background: #000;
  cursor: move;
  outline: 1px dashed rgba(255, 255, 255, 0.6);
  outline-offset: -1px;
  transition: opacity .12s;
}
.redact-rect.draft {
  cursor: crosshair;
  opacity: 0.5;
}
.redact-rect:hover:not(.draft) {
  outline-color: var(--danger);
  box-shadow: 0 0 0 2px var(--danger);
}
.redact-rect.dragging,
.redact-rect.resizing {
  opacity: 0.5;
}
/* While moving the whole rect, hide the dashed outline and the cursor so
   the user can sightline the placement against the page content underneath. */
.redact-rect.dragging:not(.draft) {
  outline-color: transparent !important;
  box-shadow: none !important;
  cursor: none;
}

/* Remove button floats just outside the top-right corner for every rect —
   tiny redactions stay fully draggable, larger ones match. ::after bridge
   below keeps :hover engaged when the cursor crosses the gap. */
.redact-rect .redact-remove {
  position: absolute;
  top: -26px;
  right: -26px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--danger);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
}
.redact-rect:hover:not(.draft) .redact-remove {
  opacity: 1;
  pointer-events: auto;
}
.redact-rect.dragging .redact-remove,
.redact-rect.resizing .redact-remove {
  opacity: 0 !important;
  pointer-events: none !important;
}
.redact-rect .redact-remove:hover { filter: brightness(1.1); }

.redact-rect:not(.draft)::after {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 36px;
  height: 36px;
  z-index: 1;
}
.redact-rect.dragging::after,
.redact-rect.resizing::after { display: none; }

/* Resize handles on redaction rectangles */
.redact-rect .resize-handle {
  box-sizing: border-box;
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1.5px solid #2563eb;
  border-radius: 2px;
  z-index: 5;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity .12s;
}
.redact-rect:hover:not(.draft) .resize-handle,
.redact-rect.resizing .resize-handle {
  opacity: 1;
}
/* Move/resize chrome reduction — same idea as the annotate editor: hide
   non-essential handles while the user is interacting so the bounding box
   they're targeting stays clean. */
.redact-rect.dragging .resize-handle {
  opacity: 0 !important;
  pointer-events: none;
}
.redact-rect.resizing .resize-handle:not(.resize-active) {
  opacity: 0 !important;
  pointer-events: none;
}
.redact-rect .resize-handle:hover {
  background: #2563eb;
  border-color: #fff;
}
.redact-rect .resize-handle-nw { top: -5px;  left: -5px; cursor: nwse-resize; }
.redact-rect .resize-handle-n  { top: -5px;  left: calc(50% - 5px); cursor: ns-resize; }
.redact-rect .resize-handle-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.redact-rect .resize-handle-e  { top: calc(50% - 5px); right: -5px; cursor: ew-resize; }
.redact-rect .resize-handle-se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.redact-rect .resize-handle-s  { bottom: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.redact-rect .resize-handle-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.redact-rect .resize-handle-w  { top: calc(50% - 5px); left: -5px; cursor: ew-resize; }
.redact-rect.draft .resize-handle { display: none; }

@media (max-width: 720px) {
  .redact-steps { flex-direction: column; }
  .redact-toolbar { gap: 10px; }
  .redact-toolbar-help { display: none; }
  /* Phones have too little width to spare 156px for a sidebar; rely on
     the prev/next pager and the keyboard for navigation instead. */
  .redact-thumbs { display: none; }
}