.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__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[data-confirm="true"] { color: #8a2800; background: #fff0d4; border-color: #dd9b4a; }
.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::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 [data-annotation-popup="erase"] { position: relative; }
.local-annotation__confirmation { width: min(22rem, calc(100vw - 1rem)); flex-wrap: wrap; font-size: .9rem; }
.local-annotation__confirmation span { flex-basis: 100%; padding: .35rem .55rem; border-radius: .45rem; background: rgba(247,250,255,.78); box-shadow: 0 1px 5px rgba(22,41,74,.08); }
.local-annotation__confirmation button { width: auto; flex: 1; padding: 0 .4rem; font-size: .9rem; }
.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; }
.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; }
.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; transition: opacity .08s ease; }
.local-annotation__pen-follower[data-visible="true"] { opacity: 1; visibility: visible; }
/* Include nested scrolling surfaces: UA gesture checks stop at their scroll parent. */
.resource-detail.local-annotation-writing-surface * { touch-action: none; }
.resource-detail.local-annotation-pen-active,
.resource-detail.local-annotation-pen-active * { user-select: none; -webkit-user-select: none; }
.resource-detail.local-annotation-pen-active img { -webkit-user-drag: none; }
.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: auto; box-sizing: border-box; }
.local-annotation--positioned .local-annotation__row { 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[data-orientation="vertical"] .local-annotation__row { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(var(--annotation-rows), 2.25rem); grid-auto-columns: 2rem; }
.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; 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 > .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;
}