/* Shared with design-system.css. Drawing controls keep a stable 44px target
   and fit in one desktop row or two compact rows in a narrow review pane. */
.markup-toolbar {
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  position:relative; width:fit-content; max-width:100%; gap:var(--nm-space-2,8px);
  margin:0 auto var(--nm-space-2,8px); padding:5px;
  border:1px solid var(--nm-color-border,var(--nm-color-border)); border-radius:var(--nm-radius-md,16px);
  color:var(--nm-color-ink,#242528); background:var(--nm-color-surface,#fff);
  box-shadow:var(--nm-shadow-sm,0 2px 8px #1b213008);
  font-family:var(--nm-font-body,inherit); font-size:var(--nm-text-control,14px); line-height:1.2; letter-spacing:-.01em;
  box-sizing:border-box;
}
.markup-group { display:flex; align-items:center; gap:var(--nm-space-1,4px); flex:0 0 auto; }
.markup-toolbar button {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; flex-shrink:0;
  position:relative; min-width:var(--nm-control-height,44px); min-height:var(--nm-control-height,44px);
  height:var(--nm-control-height,44px); margin:0; padding:10px; border:1px solid transparent;
  border-radius:var(--nm-radius-sm,10px); background:transparent; color:inherit; font:inherit;
  line-height:1.2; letter-spacing:-.01em; cursor:pointer; touch-action:manipulation; box-sizing:border-box;
  transition:background var(--nm-duration,160ms),border-color var(--nm-duration,160ms),box-shadow var(--nm-duration,160ms);
}
.markup-toolbar button:hover:not(:disabled) { background:var(--nm-color-hover,#eeeef2); }
.markup-toolbar button[aria-pressed=true],.markup-toolbar button[aria-expanded=true] {
  background:var(--nm-color-accent,#e6ff63); color:var(--nm-color-accent-ink,#283016);
}
.markup-toolbar button:focus-visible,.markup-all input:focus-visible {
  outline:3px solid var(--nm-color-focus,var(--nm-color-focus)); outline-offset:3px;
}
.markup-toolbar button:disabled { opacity:.3; cursor:not-allowed; }
.markup-toolbar svg { flex:none; width:20px; height:20px; }
.markup-tool-name { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.markup-toolbar .markup-style-button { gap:5px; padding:8px; min-width:55px; }
.markup-style-preview { display:block; }
.markup-style-value { font-size:var(--nm-text-xs,12px); font-weight:var(--nm-weight-semibold); line-height:1.2; color:var(--nm-color-muted,#73757d); font-variant-numeric:tabular-nums; }
.markup-toolbar .markup-done {
  min-width:76px; padding:10px 12px; gap:5px; border-radius:var(--nm-radius-full,999px);
  background:var(--nm-color-ink,#242528); color:var(--nm-color-surface,#fff); font-weight:var(--nm-weight-semibold);
}
.markup-toolbar .markup-done:hover:not(:disabled) { background:var(--nm-color-muted); }
.markup-toolbar .markup-done:disabled { opacity:1; background:var(--nm-color-canvas,#f4f4f6); color:var(--nm-color-subtle,#94969e); }
.markup-options-button.markup-has-visible::before {
  content:''; position:absolute; top:6px; right:6px; width:5px; height:5px; border-radius:50%; background:var(--nm-color-focus,#635bca);
}
/* The status remains available to assistive technology without adding a
   third toolbar row; visible controls have labels, active state and tooltips. */
.markup-status { position:absolute; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.markup-popover {
  position:fixed; inset:auto; z-index:1000; width:256px; margin:0; padding:var(--nm-space-3,12px);
  border:1px solid var(--nm-color-border,var(--nm-color-border)); border-radius:var(--nm-radius-md,16px);
  background:var(--nm-color-surface,#fff); color:var(--nm-color-ink,#242528);
  box-shadow:var(--nm-shadow-popover,0 16px 56px #1b213024); overflow:auto; overscroll-behavior:contain;
  font-family:var(--nm-font-body,inherit); font-size:var(--nm-text-control,14px); line-height:1.5; letter-spacing:-.01em; box-sizing:border-box;
}
.markup-popover[hidden] { display:none!important; }
.markup-popover::backdrop { background:transparent; pointer-events:none; }
.markup-popover-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--nm-space-2,8px); margin-top:-5px; }
.markup-popover-heading strong { font-size:var(--nm-text-control,14px); font-weight:var(--nm-weight-semibold); }
.markup-toolbar .markup-popover-close { margin-right:-5px; color:var(--nm-color-muted,#73757d); }
.markup-setting-label { margin:var(--nm-space-2,8px) 0; color:var(--nm-color-muted,#73757d); font-size:var(--nm-text-xs,12px); }
.markup-color-options,.markup-width-options { display:flex; align-items:center; gap:var(--nm-space-2,8px); }
.markup-toolbar .markup-color { width:44px; padding:8px; border-radius:var(--nm-radius-full,999px); }
.markup-color-swatch { display:block; width:23px; height:23px; border-radius:var(--nm-radius-full,999px); box-shadow:inset 0 0 0 1px #24252814; }
.markup-toolbar .markup-color[aria-pressed=true] { background:var(--nm-color-canvas,#f4f4f6); border-color:var(--nm-color-ink,#242528); }
.markup-color[aria-pressed=true] .markup-color-swatch { box-shadow:0 0 0 3px var(--nm-color-surface,var(--nm-color-surface)); }
.markup-toolbar .markup-width-choice { flex:1; flex-direction:column; gap:7px; min-width:0; height:52px; padding:8px; border-color:var(--nm-color-border,#e6e7eb); font-size:var(--nm-text-xs,12px); }
.markup-toolbar .markup-width-choice[aria-pressed=true] { border-color:var(--nm-color-accent,#e6ff63); }
.markup-width-line { display:block; width:25px; height:0; border-top-style:solid; border-top-color:currentColor; border-radius:var(--nm-radius-full,999px); }
.markup-all { display:flex; align-items:center; gap:var(--nm-space-2,8px); min-height:44px; padding:8px 2px; cursor:pointer; font-size:var(--nm-text-control,14px); }
.markup-all input { width:18px; height:18px; margin:0; accent-color:var(--nm-color-ink,#242528); cursor:inherit; }
.markup-all:has(input:disabled) { color:var(--nm-color-subtle,#94969e); cursor:default; }
.markup-toolbar .markup-clear { width:100%; justify-content:flex-start; color:var(--nm-color-danger,#c13b4a); font-size:var(--nm-text-control,14px); padding:10px 2px; }
.markup-toolbar .markup-clear:hover:not(:disabled) { background:var(--nm-color-danger-bg,#fff0f1); }
.markup-options-hint { margin:var(--nm-space-2,8px) 0 0; color:var(--nm-color-muted,#73757d); font-size:var(--nm-text-xs,12px); line-height:1.65; }
.markup-toolbar[data-readonly=true] .markup-edit-control,.markup-toolbar[data-readonly=true] .markup-tools button:not([data-markup-tool=select]) { display:none; }
/* Tooltips complement the accessible name; touch users retain 44px targets. */
.markup-toolbar button[data-tooltip]::after {
  content:attr(data-tooltip); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translate(-50%,4px);
  padding:7px 9px; border-radius:var(--nm-radius-sm,10px); background:var(--nm-color-ink,#242528); color:var(--nm-color-surface,#fff);
  box-shadow:var(--nm-shadow-sm,0 2px 8px #1b213008); font-size:var(--nm-text-xs,12px); font-weight:var(--nm-weight-medium); line-height:1.5; white-space:nowrap;
  pointer-events:none; opacity:0; transition:opacity var(--nm-duration,160ms),transform var(--nm-duration,160ms); z-index:60;
}
.markup-toolbar button:focus-visible[data-tooltip]::after { opacity:1; transform:translate(-50%,0); }
.markup-toolbar button[aria-expanded=true]::after,.markup-popover button::after { display:none; }
@media(hover:hover) { .markup-toolbar button:hover:not(:disabled)[data-tooltip]::after { opacity:1; transform:translate(-50%,0); } }

.markup-frame { position:relative; isolation:isolate; }
.markup-frame>img { display:block; user-select:none; -webkit-user-drag:none; }
.markup-overlay { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; overflow:visible; touch-action:auto; }
.markup-frame.markup-drawing .markup-overlay { pointer-events:auto; touch-action:none; cursor:crosshair; }
.markup-frame.markup-pin-mode .markup-overlay { pointer-events:auto; touch-action:auto; cursor:crosshair; }
.markup-frame.markup-drawing>.pin,.markup-frame.markup-pin-mode>.pin { pointer-events:none; }
.markup-overlay path,.markup-overlay rect,.markup-overlay ellipse { vector-effect:non-scaling-stroke; }
.markup-overlay .markup-saved { opacity:.55; }
.markup-overlay .markup-focused,.markup-overlay .markup-draft { opacity:1; }
/* The design viewer moves this toolbar to its host after controller mount.
   Document and event images use exactly the same controls and styling. */
:is(.design-viewer,.design-focus) .markup-toolbar { margin:0 auto; box-shadow:var(--nm-shadow-sm,0 2px 8px #1b213008); }
@media(max-width:670px) {
  .markup-toolbar { gap:var(--nm-space-1,4px); }
  .markup-tools,.markup-actions { justify-content:center; }
}
@media(prefers-reduced-motion:reduce) { .markup-toolbar button,.markup-toolbar button[data-tooltip]::after { transition:none; } }