.local-annotation { position: fixed; z-index: 1100; right: .5rem; bottom: .5rem; max-width: calc(100vw - 1rem); font: inherit; }
.local-annotation button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2rem; height: 2.25rem; padding: 0; border: 1px solid transparent; border-radius: .35rem; background: transparent; color: #173f8f; cursor: pointer; font: 650 1.1rem/1 system-ui, sans-serif; }
.local-annotation button:hover { background: #e6eeff; }
.local-annotation button:focus-visible, .local-annotation__save:focus-visible { outline: 2px solid #f5af32; outline-offset: 1px; }
.local-annotation__open { width: 3rem !important; height: 3rem !important; padding: .15rem !important; border: 0 !important; border-radius: 50%; background: transparent !important; box-shadow: none !important; }
.local-annotation__open img { display: block; width: 100%; height: 100%; object-fit: contain; }
.local-annotation__open:hover { background: transparent !important; transform: scale(1.04); }
.local-annotation__open:focus-visible { outline: 2px solid #f5af32; outline-offset: 3px; }
.local-annotation__auth { position: absolute; right: 0; bottom: calc(100% + .5rem); width: min(21rem, calc(100vw - 1rem)); padding: .85rem 1rem; border: 1px solid rgba(157,181,221,.55); border-radius: .7rem; background: rgba(255,255,255,.96); box-shadow: 0 4px 16px rgba(22,41,74,.16); color: #173f8f; }
.local-annotation__auth p { margin: .35rem 0; font-size: .9rem; }
.local-annotation__auth a { color: #173f8f; font-weight: 700; }
.local-annotation__tools { position: relative; padding: .1rem; background: rgba(247,250,255,.38); border: 1px solid rgba(157,181,221,.46); border-radius: .45rem; box-shadow: 0 2px 8px rgba(22,41,74,.11); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease; }
.local-annotation__tools:hover, .local-annotation__tools:focus-within, .local-annotation--toolbar-awake .local-annotation__tools { background: rgba(247,250,255,.64); border-color: rgba(157,181,221,.7); box-shadow: 0 2px 9px rgba(22,41,74,.16); }
.local-annotation--pen-writing .local-annotation__tools { background: rgba(247,250,255,.08); border-color: rgba(157,181,221,.16); box-shadow: 0 1px 3px rgba(22,41,74,.04); }
.local-annotation--pen-writing .local-annotation__tools button { opacity: .9; }
.local-annotation [hidden] { display: none !important; }
.local-annotation__row { display: flex; align-items: center; gap: 1px; }
.local-annotation button[aria-pressed="true"], .local-annotation button[aria-expanded="true"] { color: #fff; background: #2456b3; border-color: #173f8f; }
.local-annotation [data-annotation-mode-toggle] { border-color: #9db5dd; background: #e6eeff; }
.local-annotation [data-annotation-mode-toggle][data-mode="screen"] { color: #fff; background: #2456b3; }
.local-annotation [data-annotation-popup="color"] { color: #e02934; }
.local-annotation button:disabled { opacity: .4; cursor: default; }
.local-annotation__popover { position: absolute; right: 0; bottom: calc(100% + .3rem); display: flex; align-items: center; gap: .25rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.local-annotation__popover button { width: 2.5rem; height: 2.5rem; }
.local-annotation__inputs { flex-direction: row; flex-wrap: wrap; width: max-content; max-width: min(100vw - 1rem, 32rem); }
.local-annotation__inputs button { width: auto; min-width: 0; height: 2.25rem; justify-content: center; padding: 0 .6rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #173f8f; font-size: .9rem; white-space: nowrap; }
.local-annotation__popover button:hover,
.local-annotation__popover button:focus-visible { background: rgba(36,86,179,.1); border-color: rgba(36,86,179,.18); box-shadow: 0 0 0 2px rgba(36,86,179,.08); }
.local-annotation__popover button[aria-pressed="true"] { color: #173f8f; background: rgba(36,86,179,.16); border-color: rgba(36,86,179,.28); box-shadow: 0 0 0 2px rgba(36,86,179,.12); }
.local-annotation__inputs button[aria-pressed]::after { content: "○"; margin-left: auto; padding-left: .5rem; }
.local-annotation__inputs button[aria-pressed="true"]::after { content: "✓"; }
.local-annotation__inputs button[aria-disabled="true"] { cursor: default; opacity: .85; }
.local-annotation__favorites { display: inline-flex; align-items: center; gap: 1px; }
.local-annotation__favorites button { width: 1.65rem; height: 2rem; font-size: 1rem; }
.local-annotation__color-grid { display: grid; grid-template-columns: repeat(8, 1.65rem); gap: .2rem; }
.local-annotation__color-grid button { width: 1.45rem; height: 1.45rem; min-width: 1.45rem; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #9db5dd; }
.local-annotation__color-grid button[aria-pressed="true"] { box-shadow: 0 0 0 2px #173f8f; }
.local-annotation__color-grid button[data-annotation-color-choice="#ffffff"] { border-color: #d8e0ef; }
.local-annotation__custom-color { display: inline-flex; align-items: center; gap: .2rem; font-size: .72rem; white-space: nowrap; }
.local-annotation__custom-color input { width: 2rem; height: 1.7rem; padding: 0; border: 0; background: transparent; }
.local-annotation [data-annotation-pin-color] { width: auto; min-width: 0; padding: 0 .6rem; font-size: .76rem; }
.local-annotation [data-annotation-width-choice] { width: 2.2rem; height: 2.2rem; }
.local-annotation [data-annotation-width-choice] i { display: block; width: 1.35rem; border-top: var(--annotation-line, 2px) solid currentColor; border-radius: 999px; }
.local-annotation [data-annotation-width-choice="1.5"] i { --annotation-line: 1px; }
.local-annotation [data-annotation-width-choice="2.5"] i { --annotation-line: 2px; }
.local-annotation [data-annotation-width-choice="4"] i { --annotation-line: 3px; }
.local-annotation [data-annotation-width-choice="6"] i { --annotation-line: 5px; }
.local-annotation [data-annotation-width-choice="9"] i { --annotation-line: 7px; }
.local-annotation [data-annotation-width-choice="14"] i { --annotation-line: 10px; }
.local-annotation .local-annotation__popover[data-annotation-popover="width"] { flex-wrap: wrap; }
.local-annotation .local-annotation__width-context { flex: 1 0 100%; width: 100%; padding: 0 4px 2px; color: #334155; font: 600 12px/1.3 system-ui, sans-serif; }
.local-annotation [data-annotation-popover="width"][data-width-family="highlighter"] [data-annotation-width-choice="1.5"] i { --annotation-line: 4px; }
.local-annotation [data-annotation-popover="width"][data-width-family="highlighter"] [data-annotation-width-choice="2.5"] i { --annotation-line: 5px; }
.local-annotation [data-annotation-popover="width"][data-width-family="highlighter"] [data-annotation-width-choice="4"] i { --annotation-line: 6px; }
.local-annotation [data-annotation-popover="width"][data-width-family="highlighter"] [data-annotation-width-choice="6"] i { --annotation-line: 8px; }
.local-annotation [data-annotation-popover="width"][data-width-family="highlighter"] [data-annotation-width-choice="9"] i { --annotation-line: 9px; }
.local-annotation [data-annotation-popover="width"][data-width-family="highlighter"] [data-annotation-width-choice="14"] i { --annotation-line: 12px; }
.local-annotation [data-annotation-popup="erase"] { position: relative; }
.local-annotation__hint { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.local-annotation__save { display: inline-flex; align-items: center; justify-content: center; width: .75rem; height: 2rem; font-size: 0; color: #344967; }
.local-annotation__save::before { content: "·"; font-size: 1rem; }
.local-annotation__save[data-warning="true"] { color: #a12d12; }
.local-annotation__save[data-warning="true"]::before { content: "!"; }
.local-annotation__ink { z-index: 1090; overflow: visible; touch-action: pan-y; }
.local-annotation__ink[hidden] { display: none; }
/* Active bitmap isolates frequent paints from retained vector history. */
.local-annotation__live-ink { position: fixed; inset: 0 auto auto 0; z-index: 1091; pointer-events: none !important; }
.local-annotation__live-ink[hidden] { display: none !important; }
@media print { .local-annotation__live-ink { display: none !important; } }
.local-annotation__ink--page { position: absolute; left: 0; top: 0; }
.local-annotation__ink--screen { position: fixed; left: 0; top: 0; overflow: hidden; }
.local-annotation__ink { pointer-events: none; }
/* Natural manipulation claims only ink/selection, never the blank document. */
.local-annotation__natural-hits { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1092; pointer-events: none; touch-action: auto; overflow: hidden; }
.local-annotation__natural-hits polyline { pointer-events: stroke; stroke: transparent; fill: none; stroke-linecap: round; stroke-linejoin: round; touch-action: auto; cursor: var(--pen-selection-cursor, grab); }
.local-annotation__natural-hits [data-closed-shape] { pointer-events: all; }
[data-pen-natural="true"] .local-annotation__selection rect,
[data-pen-natural="true"] .local-annotation__selection circle { pointer-events: all; touch-action: auto; }
[data-pen-natural="true"] .local-annotation__selection { touch-action: auto; z-index: 1093; }
[data-pen-touch-manipulation="true"] .local-annotation__natural-hits,
[data-pen-touch-manipulation="true"] .local-annotation__selection,
[data-pen-touch-manipulation="true"] .local-annotation__natural-hits polyline,
[data-pen-touch-manipulation="true"] .local-annotation__selection rect,
[data-pen-touch-manipulation="true"] .local-annotation__selection circle { touch-action: pinch-zoom; }
/* Only an existing selection owns its complete frame, including blank interior. */
[data-pen-touch-manipulation="true"] .local-annotation__selection rect { pointer-events: all; }
@media print { .local-annotation__natural-hits { display: none !important; } }
.local-annotation__pen-follower { position: fixed; z-index: 1110; display: block; width: clamp(54px, 6vw, 68px); height: auto; max-width: none; pointer-events: none !important; user-select: none; -webkit-user-drag: none; opacity: 0; visibility: hidden; transform: translate3d(-9999px, -9999px, 0); transform-origin: 0 0; will-change: transform, opacity; }
.local-annotation__pen-follower[data-visible="true"] { opacity: 1; visibility: visible; }
.local-annotation [data-annotation-eraser-icon] { display: block; object-fit: contain; pointer-events: none; }
/* Include nested scrolling surfaces: UA gesture checks stop at their scroll parent. */
.resource-detail.local-annotation-writing-surface,
.resource-detail.local-annotation-writing-surface * { touch-action: none; overscroll-behavior: none; }
/* One finger inks; the UA may take a two-finger pinch and cancel provisional ink. */
.resource-detail.local-annotation-finger-writing,
.resource-detail.local-annotation-finger-writing * { touch-action: pinch-zoom; }
.resource-detail.local-annotation-pen-active,
.resource-detail.local-annotation-pen-active * { user-select: none; -webkit-user-select: none; touch-action: none; }
.resource-detail.local-annotation-pen-active img { -webkit-user-drag: none; }
.local-annotation-selecting { user-select: none; -webkit-user-select: none; cursor: crosshair; }
.local-annotation__selection { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; overflow: visible; }
.local-annotation__selection rect { fill: rgba(36,86,179,.08); stroke: #2456b3; stroke-width: 2; stroke-dasharray: 6 4; }
.local-annotation__selection circle { fill: white; stroke: #2456b3; stroke-width: 3; }
/* Gesture feedback is paint-only, never a hit target or an alternate cursor. */
.local-annotation__touch-selection-origin { position: fixed; inset: 0 auto auto 0; width: 44px; height: 44px; z-index: 1093; overflow: visible; pointer-events: all; touch-action: pinch-zoom; user-select: none; }
.local-annotation__touch-selection-origin circle { fill: #2456b3; stroke: #fff; stroke-width: 3; filter: drop-shadow(0 1px 2px #000b); pointer-events: none; }
.local-annotation__touch-selection-origin[hidden] { display: none !important; }
.local-annotation__touch-selection-origin[data-tracing="true"] circle { visibility: hidden; }
@media print { .local-annotation__touch-selection-origin { display: none !important; } }
.local-annotation__touch-hold-feedback { position: fixed; inset: 0 auto auto 0; width: 56px; height: 56px; z-index: 1094; overflow: visible; pointer-events: none !important; user-select: none; filter: drop-shadow(0 1px 2px #0007); }
.local-annotation__touch-hold-feedback * { pointer-events: none !important; fill: none; }
.local-annotation__touch-hold-feedback[hidden] { display: none !important; }
.local-annotation__touch-hold-feedback [data-hold-outline] { stroke: #fff; stroke-width: 6; }
.local-annotation__touch-hold-feedback [data-hold-track] { stroke: #334155; stroke-width: 3; }
.local-annotation__touch-hold-feedback [data-hold-progress] { stroke: #2456b3; stroke-width: 3; }
.local-annotation__touch-hold-feedback[data-state="ready"] [data-hold-progress] { stroke: #15803d; }
.local-annotation__touch-hold-feedback [data-hold-check-outline],
.local-annotation__touch-hold-feedback [data-hold-check] { display: none; stroke-linecap: round; stroke-linejoin: round; }
.local-annotation__touch-hold-feedback[data-state="ready"] [data-hold-check-outline] { display: block; stroke: #fff; stroke-width: 6; }
.local-annotation__touch-hold-feedback[data-state="ready"] [data-hold-check] { display: block; stroke: #15803d; stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .local-annotation__touch-hold-feedback[data-state="pending"] [data-hold-progress] { display: none; } }
@media print { .local-annotation__touch-hold-feedback { display: none !important; } }
/* The cursor belongs to the current device, not the last mouse hit target.
   Layered important beats unlayered manipulation cursors, including cell,
   inline selection hints, pseudo-elements and body-level capture SVGs.
   auto leaves Windows/browser in charge; no hidden or substitute Pen dot. */
@layer pen-native-cursor {
  :root[data-pen-cursor="ink"],
  :root[data-pen-cursor="ink"] *,
  :root[data-pen-cursor="ink"]::before,
  :root[data-pen-cursor="ink"]::after,
  :root[data-pen-cursor="ink"] *::before,
  :root[data-pen-cursor="ink"] *::after { cursor: auto !important; }
}
.local-annotation__lasso { fill: rgba(36,86,179,.10); stroke: #2456b3; stroke-width: 2; stroke-dasharray: 6 4; stroke-linejoin: round; }
.local-annotation__selected-ink { fill: none; stroke: #2456b3; stroke-width: 7; stroke-opacity: .35; stroke-linecap: round; stroke-linejoin: round; }
.local-annotation__lasso-icon { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.local-annotation__shape-preview { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1095; overflow: visible; }
.local-annotation__shape-preview path { fill: none; stroke: #2456b3; stroke-width: 2; stroke-dasharray: 5 3; }
.local-annotation__shape-proposal { max-width: min(27rem,calc(100vw - 1rem)); padding: 8px; background: #fff; border: 2px solid #2456b3; border-radius: 8px; color: #173f8f; font-size: 14px; }
.local-annotation .local-annotation__shape-proposal button { width: auto; min-height: 44px; padding: 4px 8px; }
.local-annotation__shape-actions { display: flex; flex-wrap: wrap; gap: 4px; border-top: 1px solid #9db5dd; padding-top: 4px; }
.local-annotation__shape-controls { flex: 1 0 100%; color: #173f8f; }
.local-annotation__shape-controls summary { padding: 8px; cursor: pointer; min-height: 28px; }
.local-annotation__selection [data-shape-handle] { fill: #fff; stroke: #2456b3; stroke-width: 2; }
.local-annotation__selection-actions { display: flex; flex-wrap: wrap; gap: 4px; max-width: min(24rem, calc(100vw - 24px)); padding: 6px; background: #fff; border: 1px solid #9db5dd; border-radius: 8px; }
.local-annotation__selection-actions[hidden] { display: none; }
/* A settings popup must win over the contextual selection actions, in H and V. */
.local-annotation .local-annotation__selection-actions { z-index: 1; }
.local-annotation .local-annotation__popover { z-index: 2; }
.local-annotation .local-annotation__selection-actions button { width: auto; min-width: 44px; min-height: 44px; padding: 4px 9px; font-size: 14px; white-space: nowrap; }
.local-annotation__help { max-width: min(24rem, calc(100vw - 24px)); background: white; color: #173f8f; border-radius: 6px; font-size: 14px; }
.local-annotation__help summary { padding: 8px; min-height: 28px; cursor: pointer; }
.local-annotation__help p { padding: 8px; margin: 0; max-height: 180px; overflow: auto; }
.local-annotation button:focus-visible, .local-annotation summary:focus-visible { outline: 3px solid #2456b3; outline-offset: 2px; }
@media (pointer: coarse) { .local-annotation .local-annotation__row > button { min-width: 44px; min-height: 44px; } }
.resource-detail.local-annotation-mouse-erasing,
.resource-detail.local-annotation-mouse-erasing * { cursor: cell !important; }
@media (max-width: 460px) { .local-annotation__row { display: grid; grid-template-columns: repeat(6, 2.25rem); } .local-annotation button { width: 2.25rem; } .local-annotation__save { position: absolute; right: .1rem; top: -.55rem; height: .75rem; } }
@media print { .local-annotation, .local-annotation__ink { display: none !important; } }
@media print { .local-annotation__pen-follower { display: none !important; } }

/* Positioning is independent of ink, and only the two drag targets own touch gestures. */
.local-annotation__open, .local-annotation [data-annotation-drag] { touch-action: none; user-select: none; cursor: grab; }
.local-annotation [data-annotation-drag] { width: 1.5rem; }
.local-annotation--positioned { right: auto; bottom: auto; width: 0; height: 0; max-width: none; }
.local-annotation--positioned .local-annotation__tools { position: absolute; width: max-content; max-width: var(--annotation-available-width); max-height: var(--annotation-available-height); overflow: visible; box-sizing: border-box; }
.local-annotation--positioned .local-annotation__row { display: flex; flex-wrap: wrap; max-width: calc(var(--annotation-available-width) - .5rem); }
.local-annotation--positioned .local-annotation__popover { position: fixed; right: auto; bottom: auto; max-width: var(--annotation-available-width); max-height: var(--annotation-available-height); overflow: auto; box-sizing: border-box; }
.local-annotation--positioned .local-annotation__inputs button { width: auto; }
.local-annotation--positioned .local-annotation__inputs[data-annotation-popover="inputs"] {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start;
  width: min(29rem,var(--annotation-available-width,calc(100vw - 1rem)));
  max-width: min(29rem,var(--annotation-available-width,calc(100vw - 1rem))); gap: .35rem; padding: .5rem;
}
.local-annotation__inputs fieldset { min-width: 0; margin: 0; padding: .3rem; border: 1px solid rgba(36,86,179,.22); border-radius: .5rem; }
.local-annotation__inputs legend { padding: 0 .25rem; color: #173f8f; font: 700 .8rem/1.3 system-ui,sans-serif; }
.local-annotation .local-annotation__inputs fieldset button { width: 100%; min-height: 44px; height: auto; padding: .4rem; text-align: left; justify-content: flex-start; white-space: normal; font-size: .8rem; line-height: 1.25; }
.local-annotation__inputs details { grid-column: 1/-1; color: #173f8f; font-size: .8rem; }
.local-annotation__inputs summary { cursor: pointer; padding: .5rem; min-height: 28px; }
.local-annotation__inputs details p { margin: .3rem .5rem; line-height: 1.4; }
@media(max-width:360px) { .local-annotation--positioned .local-annotation__inputs[data-annotation-popover="inputs"] { grid-template-columns: minmax(0,1fr); } }
/* One slim column, including on short screens: scroll instead of widening. */
.local-annotation--positioned[data-orientation="vertical"] .local-annotation__tools { overflow-y: auto; overflow-x: hidden; pointer-events: auto; touch-action: pan-y; overscroll-behavior-y: contain; scrollbar-width: none; scroll-padding-block: 6px; }
.local-annotation--positioned[data-orientation="vertical"] .local-annotation__tools::-webkit-scrollbar { display: none; width: 0; height: 0; }
.local-annotation--positioned[data-orientation="vertical"] .local-annotation__row { flex-direction: column; flex-wrap: nowrap; align-items: center; max-height: none; align-content: center; }
.local-annotation--positioned .local-annotation__save { position: absolute; right: 0; top: 0; width: .4rem; height: .4rem; pointer-events: none; }
.local-annotation--positioned .local-annotation__save::before { content: none; }
@media (max-width: 460px) {
  .local-annotation--positioned[data-orientation="horizontal"] .local-annotation__row { grid-template-columns: repeat(var(--annotation-cols), 2.25rem); }
  .local-annotation--positioned[data-orientation="vertical"] .local-annotation__row { grid-auto-columns: 2.25rem; }
}

/* Backgroundless floating toolbar: hit targets remain generous, only local
   tool state is painted. Temporary popovers intentionally keep their readable
   surfaces above this row. */
.local-annotation__tools,
.local-annotation__tools:hover,
.local-annotation__tools:focus-within,
.local-annotation--toolbar-awake .local-annotation__tools,
.local-annotation--pen-writing .local-annotation__tools {
  padding: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.local-annotation__tools > .local-annotation__row { gap: .08rem; padding: 3px; box-sizing: border-box; background: transparent; }
.local-annotation__tools > .local-annotation__row > button {
  width: 2.25rem;
  height: 2.25rem;
  border-color: transparent !important;
  border-radius: 50%;
  background: transparent !important;
  box-shadow: none;
  color: #173f8f;
}
.local-annotation__tools [data-annotation-eraser-icon] {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  pointer-events: none;
}
.local-annotation__tools > .local-annotation__row > button:hover,
.local-annotation__tools > .local-annotation__row > button:focus-visible,
.local-annotation--toolbar-awake .local-annotation__tools > .local-annotation__row > button:hover {
  background: rgba(36,86,179,.11) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 2px rgba(36,86,179,.12);
}
.local-annotation__tools > .local-annotation__row > button[aria-pressed="true"],
.local-annotation__tools > .local-annotation__row > button[aria-expanded="true"],
.local-annotation__tools > .local-annotation__row > [data-annotation-mode-toggle][data-mode="screen"] {
  color: #173f8f !important;
  background: rgba(36,86,179,.14) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 2px rgba(36,86,179,.2);
}
.local-annotation--pen-writing .local-annotation__tools > .local-annotation__row > button {
  opacity: .86;
}
.local-annotation__tools > .local-annotation__row > [data-annotation-drag] {
  width: 2.25rem;
  color: #173f8f;
}
.local-annotation__tools > .local-annotation__row > .local-annotation__favorites { background: transparent; }
.local-annotation__tools > .local-annotation__row > .local-annotation__favorites button {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none;
}
.local-annotation__tools > .local-annotation__row > .local-annotation__favorites button:hover,
.local-annotation__tools > .local-annotation__row > .local-annotation__favorites button:focus-visible {
  background: rgba(36,86,179,.11) !important;
  box-shadow: 0 0 0 2px rgba(36,86,179,.12);
}
.local-annotation__tools > .local-annotation__row > .local-annotation__save { background: transparent; }

/* Every secondary Annotation surface is backgroundless too. Individual
   choices retain only compact local hover/active indicators. */
.local-annotation__popover .local-annotation__color-grid,
.local-annotation__popover .local-annotation__custom-color,
.local-annotation__popover > [data-annotation-pin-color] {
  background: transparent;
}
.local-annotation__popover .local-annotation__custom-color {
  min-height: 2.25rem;
  padding: 0 .45rem;
  border-radius: 999px;
  background: rgba(247,250,255,.78);
  box-shadow: 0 1px 5px rgba(22,41,74,.08);
}
.local-annotation__popover .local-annotation__custom-color:focus-within {
  background: rgba(247,250,255,.92);
  box-shadow: 0 0 0 2px rgba(36,86,179,.14);
}
.local-annotation__popover .local-annotation__color-grid { gap: .2rem; }
.local-annotation__popover .local-annotation__color-grid button,
.local-annotation__popover [data-annotation-width-choice] {
  background: transparent;
}

/* Direct colors: small writing dots, larger highlighter discs; equal safe hit targets. */
.local-annotation { --pen-button-size: 2.25rem; --pen-write-dot: 1rem; --pen-highlight-dot: 1.9rem; --pen-color-gap: 0; }
.local-annotation__favorites, .local-annotation__highlights { display: inline-flex; align-items: center; gap: 0; flex: none; }
.local-annotation__highlights { margin-left: .3rem; padding-left: .3rem; border-left: 1px solid rgba(23,63,143,.2); }
.local-annotation__favorites button, .local-annotation__highlights button {
  width: var(--pen-button-size); height: var(--pen-button-size); min-width: var(--pen-button-size); border: 0; border-radius: 50%;
  background: transparent !important; box-shadow: none; line-height: 1; padding: 0;
}
.local-annotation__favorites button { font-size: var(--pen-write-dot); }
.local-annotation__highlights button { font-size: var(--pen-highlight-dot); text-shadow: 0 0 1px rgba(23,63,143,.5); }
.local-annotation__favorites button[aria-pressed="true"], .local-annotation__highlights button[aria-pressed="true"],
.local-annotation__favorites button:focus-visible, .local-annotation__highlights button:focus-visible {
  outline: 2px solid #173f8f; outline-offset: -3px;
}
.local-annotation__row > [data-annotation-tool="pen"], .local-annotation__row > [data-annotation-tool="highlighter"] { display: inline-flex; }
.local-annotation--positioned[data-orientation="vertical"] .local-annotation__favorites,
.local-annotation--positioned[data-orientation="vertical"] .local-annotation__highlights {
  flex-direction: column; gap: var(--pen-color-gap); align-self: center;
}
.local-annotation--positioned[data-orientation="vertical"] .local-annotation__highlights {
  margin: .2rem 0 0; padding: .2rem 0 0; border-left: 0; border-top: 1px solid rgba(23,63,143,.2);
}
.local-annotation .local-annotation__favorites button[data-editing="true"],
.local-annotation .local-annotation__highlights button[data-editing="true"] { outline: 2px dashed #173f8f; outline-offset: -2px; }
.local-annotation__chevrons { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.local-annotation__chevrons g { display: none; }
.local-annotation [data-chevron="left"] .chevron-left,
.local-annotation [data-chevron="right"] .chevron-right,
.local-annotation [data-chevron="up"] .chevron-up,
.local-annotation [data-chevron="down"] .chevron-down { display: inline; }
.local-annotation__open { position: relative; }

/* One actionable notice belongs to this widget, never an unrelated duplicate toast. */
.local-annotation__notice {
  max-width: min(28rem, calc(100vw - 1rem)); box-sizing: border-box;
  padding: .5rem .65rem; margin-top: .25rem; border: 1px solid #b65b35; border-radius: .45rem;
  color: #782712; background: #fff8ef; font: 500 .85rem/1.35 system-ui;
}
.local-annotation__notice p { margin: 0 0 .3rem; }
.local-annotation__notice[hidden] { display: none; }
.local-annotation__notice[data-collapsed="true"] { position: fixed; z-index: 1300; right: .5rem; bottom: 4rem; }
.local-annotation__notice button { width: auto; height: auto; min-height: 44px; padding: .35rem .65rem; font-size: .85rem; text-decoration: underline; }
.local-annotation__comparison { width: min(56rem, calc(100vw - 2rem)); max-height: 85vh; overflow: auto; border: 1px solid #9db5dd; border-radius: .7rem; color: #173f8f; background: #fff; padding: 1rem; }
.local-annotation__comparison::backdrop { background: rgba(15,23,42,.4); }
.local-annotation__comparison-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.local-annotation__comparison svg { display: block; width: 100%; height: 160px; border: 1px solid #ddd; }
.local-annotation__comparison button { min-height: 44px; margin: .3rem; padding: .4rem .7rem; color: #173f8f; background: #e6eeff; border: 1px solid #9db5dd; border-radius: .4rem; cursor: pointer; }
@media (max-width: 500px) { .local-annotation__comparison-previews { grid-template-columns: 1fr; } }

/* Readable controls above ink, with touch targets independent of input type. */
.local-annotation .local-annotation__row > [data-annotation-shapes-toggle] { width: auto; min-width: 140px; max-width: 180px; height: auto; min-height: 44px; padding: 6px; font: 600 12px/1.3 system-ui, sans-serif; white-space: normal; grid-column: span 3; }
.local-annotation__shape-help { max-width: min(34rem, calc(100vw - 40px)); margin: 4px; font: 12px/1.4 system-ui, sans-serif; }
.local-annotation__shape-help input { width: 4.5em; min-height: 36px; font: inherit; }
.local-annotation__mode-label { margin: 0; padding: 2px 8px; font: 600 12px/1.4 system-ui, sans-serif; color: #173f8f; }
/* A server receipt must be readable, not only a tooltip or an invisible dot. */
.local-annotation .local-annotation__tools > .local-annotation__save {
  position: static; display: block; width: auto; height: auto; margin: 2px 0;
  max-width: min(30rem, calc(100vw - 40px)); padding: 2px 8px;
  font: 500 12px/1.4 system-ui, sans-serif; overflow-wrap: anywhere; pointer-events: auto;
}
.local-annotation .local-annotation__tools > .local-annotation__save::before { content: none; }
.local-annotation .local-annotation__backup { width: auto; min-height: 44px; height: auto; margin: 4px; padding: 8px; font-size: 14px; border: 1px solid #9db5dd; }
.local-annotation__tools, .local-annotation__tools:hover, .local-annotation__tools:focus-within,
.local-annotation--toolbar-awake .local-annotation__tools,
.local-annotation--pen-writing .local-annotation__tools {
  background: rgba(255,255,255,.98); border: 1px solid #9db5dd; border-radius: 12px;
  box-shadow: 0 3px 15px rgba(23,63,143,.18); padding: 6px;
}
@media (max-width: 600px) {
  .local-annotation { --pen-button-size: 44px; }
  .local-annotation--positioned[data-orientation="horizontal"] .local-annotation__row {
    display: flex; flex-wrap: wrap; gap: 2px; max-width: calc(100vw - 32px);
  }
  .local-annotation .local-annotation__row > button { width: 44px; height: 44px; min-width: 44px; }
  /* The same colors remain in Nuancier; avoid two redundant rows on phones. */
  .local-annotation__row > .local-annotation__favorites,
  .local-annotation__row > .local-annotation__highlights { display: none; }
  .local-annotation__color-grid { grid-template-columns: repeat(6, 44px); gap: 1px; }
  .local-annotation__color-grid button { width: 44px; height: 44px; min-width: 44px; }
  .local-annotation__popover[data-annotation-popover="color"] { flex-wrap: wrap; width: 282px; background: #fff; border: 1px solid #9db5dd; }
  .local-annotation--positioned .local-annotation__tools { max-height: min(45vh, var(--annotation-available-height)); overflow-y: auto; overflow-x: hidden; }
}

/* Compact v3: only the core tools occupy the floating strip. The translucent
   background never changes icon opacity, capture surfaces, or saved ink. */
.local-annotation { --pen-button-size: 44px; }
.local-annotation__tools,
.local-annotation__tools:hover,
.local-annotation__tools:focus-within,
.local-annotation--toolbar-awake .local-annotation__tools,
.local-annotation--pen-writing .local-annotation__tools {
  padding: 2px; background: rgba(248,251,255,.38); border: 1px solid rgba(60,90,145,.22);
  border-radius: 24px; box-shadow: 0 2px 7px rgba(23,63,143,.08); backdrop-filter: none;
}
.local-annotation .local-annotation__tools button { opacity: 1; }
.local-annotation .local-annotation__tools > .local-annotation__row {
  display: flex; flex-wrap: wrap; gap: 0; padding: 0; max-width: min(506px, calc(100vw - 24px));
}
.local-annotation .local-annotation__row > button,
.local-annotation .local-annotation__row > [data-annotation-shapes-toggle],
.local-annotation .local-annotation__row > [data-annotation-drag] {
  width: 44px; min-width: 44px; max-width: 44px; height: 44px; min-height: 44px;
  padding: 0; grid-column: auto; font: 650 20px/1 system-ui;
}
.local-annotation__mode-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.local-annotation .local-annotation__tools > .local-annotation__row > .local-annotation__save {
  position: static; flex: 0 0 20px; width: 20px; height: 44px; padding: 0; margin: 0;
  font-size: 0; display: inline-flex; align-items: center; justify-content: center; color: #245471;
}
.local-annotation .local-annotation__save::before { content: "◷"; font: 700 16px system-ui; }
.local-annotation .local-annotation__save[data-save-state="sending"]::before { content: "↻"; animation: pen-save-sync 1.2s linear infinite; }
.local-annotation .local-annotation__save[data-save-state="saved"]::before { content: "✓"; color: #167145; }
.local-annotation .local-annotation__save[data-save-state="local"]::before,
.local-annotation .local-annotation__save[data-save-state="temporary"]::before { content: "▣"; color: #52627b; }
.local-annotation .local-annotation__save[data-save-state="offline"]::before { content: "↯"; color: #965a00; }
.local-annotation .local-annotation__save[data-save-state="error"]::before,
.local-annotation .local-annotation__save[data-save-state="conflict"]::before { content: "!"; color: #a12d12; }
@keyframes pen-save-sync { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .local-annotation .local-annotation__save[data-save-state="sending"]::before { animation: none; } }
.local-annotation .local-annotation__save:focus-visible,
.local-annotation .local-annotation__save:hover {
  position: fixed; z-index: 1400; left: 8px; bottom: 8px; width: auto; max-width: calc(100vw - 32px);
  height: auto; min-height: 44px; padding: 8px; font: 13px/1.4 system-ui; background: #f8fbff; border: 1px solid #9db5dd; border-radius: 8px;
}
.local-annotation .local-annotation__popover { padding: 8px; border: 1px solid #9db5dd; border-radius: 12px; background: rgba(250,252,255,.97); box-shadow: 0 3px 12px #173f8f26; }
.local-annotation .local-annotation__more { flex-wrap: wrap; width: min(342px, calc(100vw - 20px)); max-height: min(60vh, var(--annotation-available-height)); gap: 4px; }
.local-annotation .local-annotation__more > .local-annotation__selection-trigger {
  box-sizing: border-box; flex: 1 0 100%; width: 100%; height: auto; min-height: 44px; padding: 8px 10px;
  justify-content: flex-start; text-align: left; white-space: normal; font: 600 14px/1.3 system-ui, sans-serif;
}
.local-annotation__more > button { min-width: 44px; min-height: 44px; }
.local-annotation__more > .local-annotation__highlights { border: 0; margin: 0; padding: 0; }
.local-annotation__shape-help { flex: 1 0 100%; margin: 4px 0; font: 12px/1.4 system-ui; }
.local-annotation__more > .local-annotation__help { width: 100%; }
.local-annotation .local-annotation__notice { position: fixed; right: 8px; bottom: 72px; width: min(28rem, calc(100vw - 16px)); max-height: 50vh; overflow: auto; }
.local-annotation .local-annotation__selection-actions,
.local-annotation .local-annotation__shape-proposal { position: fixed; max-height: 42vh; overflow: auto; box-sizing: border-box; }
.local-annotation--positioned[data-orientation="vertical"] .local-annotation__tools { width: 50px; max-width: 50px; max-height: var(--annotation-available-height); overflow-y: auto; overflow-x: hidden; }
.local-annotation--positioned[data-orientation="vertical"] .local-annotation__row { width: 44px; max-width: 44px; flex-direction: column; flex-wrap: nowrap; }
.local-annotation--positioned[data-orientation="vertical"] .local-annotation__row > .local-annotation__save { flex-basis: 20px; height: 20px; }
@media (max-width: 600px) {
  .local-annotation--positioned[data-orientation="horizontal"] .local-annotation__tools { max-height: 112px; overflow: visible; }
  .local-annotation .local-annotation__more .local-annotation__favorites,
  .local-annotation .local-annotation__more .local-annotation__highlights { display: inline-flex; }
}

/* V5 is one DOM toolbar and one preference state in both orientations. */
.local-annotation .local-annotation__tools {
  /* The opacity slider is an immediate setting, including a true zero. */
  transition: none;
  background: rgba(248,251,255,var(--annotation-bg-alpha,.38));
  border-color: rgba(60,90,145,calc(var(--annotation-bg-alpha,.38) * .58));
  box-shadow: 0 2px 7px rgba(23,63,143,calc(var(--annotation-bg-alpha,.38) * .21));
}
.local-annotation[data-background-transparent="true"] .local-annotation__tools {
  background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.local-annotation .local-annotation__tools,
.local-annotation .local-annotation__row { pointer-events: none; }
.local-annotation .local-annotation__tools button,
.local-annotation .local-annotation__popover,
.local-annotation .local-annotation__save,
.local-annotation .local-annotation__selection-actions,
.local-annotation .local-annotation__shape-proposal,
.local-annotation .local-annotation__notice { pointer-events: auto; }
.local-annotation .local-annotation__tools > .local-annotation__row {
  max-width: min(920px,calc(100vw - 24px)); flex-wrap: nowrap;
}
.local-annotation[data-orientation="horizontal"] .local-annotation__row { overflow-x: auto; scrollbar-width: thin; }
.local-annotation .local-annotation__row > .local-annotation__favorites,
.local-annotation .local-annotation__row > .local-annotation__highlights { display: inline-flex; flex: none; }
.local-annotation .local-annotation__favorites button,
.local-annotation .local-annotation__highlights button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
.local-annotation .local-annotation__favorites button { font-size: 14px; }
.local-annotation .local-annotation__highlights button { font-size: 25px; }
.local-annotation .local-annotation__favorites button[aria-pressed="true"],
.local-annotation .local-annotation__highlights button[aria-pressed="true"] {
  background: transparent; border-color: transparent; border-radius: 4px; box-shadow: inset 0 -2px #2456b3;
}
.local-annotation .local-annotation__row > button[aria-pressed="true"],
.local-annotation .local-annotation__row > button[aria-expanded="true"] {
  background: transparent !important; box-shadow: none; border: 1px solid #2456b3 !important; border-radius: 7px;
}
.local-annotation .local-annotation__row > [data-annotation-shapes-toggle] { font-size: 13px; white-space: nowrap; }
.local-annotation .local-annotation__more [data-annotation-shapes-toggle] { width: 100%; min-height: 44px; font: 600 13px/1.4 system-ui; }
.local-annotation .local-annotation__more [data-annotation-tool] { width: auto; padding: 4px 8px; font-size: 13px; }
.local-annotation__selection [data-shape-handle] { filter: drop-shadow(0 1px 2px #173f8f44); }
.local-annotation__background-control,.local-annotation__hold-control { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; width: 100%; font: 13px/1.4 system-ui; }
.local-annotation__background-control input { min-height: 44px; width: 160px; max-width: 70%; }
.local-annotation__hold-control input { width: 24px; height: 24px; margin: 10px; }
/* Only the outer strip scrolls. overflow-x:hidden here would implicitly make
   the inner row overflow-y:auto and introduce a second, visible scrollbar. */
.local-annotation--positioned[data-orientation="vertical"] .local-annotation__row { overflow: visible; }
.local-annotation--positioned[data-orientation="vertical"] .local-annotation__row,
.local-annotation--positioned[data-orientation="vertical"] .local-annotation__row button { touch-action: pan-y; }
.local-annotation--positioned[data-orientation="vertical"] .local-annotation__row > [data-annotation-drag] { touch-action: none; }
.local-annotation {
  --annotation-safe-top: env(safe-area-inset-top, 0px);
  --annotation-safe-right: env(safe-area-inset-right, 0px);
  --annotation-safe-bottom: env(safe-area-inset-bottom, 0px);
  --annotation-safe-left: env(safe-area-inset-left, 0px);
}
@media (max-width:600px) { .local-annotation--positioned[data-orientation="horizontal"] .local-annotation__tools { max-height: 70px; } }

/* V8: one background preference for ALL Pen UI surfaces, not for ink or
   controls themselves. The root variable also reaches body-portalled dialogs. */
.local-annotation :is(.local-annotation__tools, .local-annotation__popover,
  .local-annotation__selection-actions, .local-annotation__shape-proposal,
  .local-annotation__help, .local-annotation__custom-color,
  .local-annotation__auth, .local-annotation__notice),
.local-annotation .local-annotation__custom-color:focus-within,
.local-annotation .local-annotation__save:hover,
.local-annotation .local-annotation__save:focus-visible,
.local-annotation__comparison {
  background: rgba(248,251,255,var(--annotation-bg-alpha,.38));
  border-color: rgba(60,90,145,calc(var(--annotation-bg-alpha,.38) * .58));
  box-shadow: 0 2px 7px rgba(23,63,143,calc(var(--annotation-bg-alpha,.38) * .21));
  backdrop-filter: none; -webkit-backdrop-filter: none; transition: none;
}
.local-annotation :is(.local-annotation__shape-actions, input[type="number"], select, textarea),
.local-annotation__comparison svg {
  background: transparent;
  border-color: rgba(60,90,145,calc(var(--annotation-bg-alpha,.38) * .58));
}
.local-annotation :is(.local-annotation__tools, .local-annotation__popover,
  .local-annotation__selection-actions, .local-annotation__shape-proposal,
  .local-annotation__help, .local-annotation__custom-color,
  .local-annotation__auth, .local-annotation__notice)::before,
.local-annotation :is(.local-annotation__tools, .local-annotation__popover,
  .local-annotation__selection-actions, .local-annotation__shape-proposal,
  .local-annotation__help, .local-annotation__custom-color,
  .local-annotation__auth, .local-annotation__notice)::after,
.local-annotation__comparison::before, .local-annotation__comparison::after {
  background: transparent; border-color: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.local-annotation__comparison::backdrop {
  background: rgba(15,23,42,calc(var(--annotation-bg-alpha,.38) * .4));
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-annotation-background-transparent="true"] .local-annotation :is(
  .local-annotation__tools, .local-annotation__popover, .local-annotation__selection-actions,
  .local-annotation__shape-proposal, .local-annotation__help, .local-annotation__custom-color,
  .local-annotation__auth, .local-annotation__notice),
html[data-annotation-background-transparent="true"] .local-annotation .local-annotation__save:hover,
html[data-annotation-background-transparent="true"] .local-annotation .local-annotation__save:focus-visible,
html[data-annotation-background-transparent="true"] .local-annotation__comparison {
  background: transparent; border-color: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}