.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::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__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; }
.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,
.resource-detail.local-annotation-writing-surface * { touch-action: none; overscroll-behavior: 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: 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; }
/* 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; scrollbar-width: none; }
.local-annotation--positioned[data-orientation="vertical"] .local-annotation__tools::-webkit-scrollbar { display: none; }
.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: none; }
.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; }

/* Save failures stay readable even with the stylus-only launcher collapsed.
   This notice cannot intercept Pen, touch, mouse or page gestures. */
.local-annotation__save-warning {
  position: fixed; bottom: .5rem; right: .5rem; z-index: 1300;
  max-width: min(24rem, calc(100vw - 1rem)); box-sizing: border-box;
  padding: .45rem .65rem; border: 1px solid #b65b35; border-radius: .45rem;
  color: #782712; background: rgba(255, 248, 239, .97);
  font: 500 .85rem/1.35 system-ui, sans-serif; pointer-events: none;
}
.local-annotation__save-warning[hidden] { display: none; }