.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 { background: #f7faff !important; box-shadow: 0 2px 10px #16294a33; }
.local-annotation__tools { position: relative; padding: .15rem; background: #f7faff; border: 1px solid #9db5dd; border-radius: .5rem; box-shadow: 0 3px 14px #16294a33; }
.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; gap: .2rem; padding: .25rem; border: 1px solid #9db5dd; border-radius: .5rem; background: #f7faff; box-shadow: 0 3px 14px #16294a33; }
.local-annotation__popover button { width: 2.5rem; height: 2.5rem; }
.local-annotation__inputs { flex-direction: column; }
.local-annotation__inputs button { width: auto; min-width: 8rem; justify-content: flex-start; padding: 0 .5rem; font-size: .9rem; }
.local-annotation__inputs button::after { content: "○"; margin-left: auto; padding-left: .5rem; }
.local-annotation__inputs button[aria-pressed="true"]::after { content: "✓"; }
.local-annotation [data-annotation-popup="erase"] { position: relative; }
.local-annotation [data-annotation-popup="erase"]::after { content: "⌄"; position: absolute; right: 1px; bottom: 1px; font-size: .55rem; }
.local-annotation__confirmation { width: min(18rem, calc(100vw - 2rem)); flex-wrap: wrap; font-size: .9rem; }
.local-annotation__confirmation span { flex-basis: 100%; padding: .3rem; }
.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; }
/* Include nested scrolling surfaces: UA gesture checks stop at their scroll parent. */
.resource-detail.local-annotation-writing-surface * { touch-action: none; }
@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; } }

/* 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; }
@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; }
}