/* annotate.css — the floating annotation pill (annotate.js). styles.css tokens. */
.an-bar { position: fixed; left: 50%; transform: translateX(-50%); z-index: 70;
  display: flex; align-items: center; gap: 2px; padding: 5px 8px; max-width: calc(100vw - 24px);
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(46, 27, 74, .08), 0 12px 32px rgba(46, 27, 74, .16); }
.an-bar[data-pos="bottom"] { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.an-bar[data-pos="top"] { top: calc(var(--vw-top, 76px) + 58px); }
.an-bar[hidden] { display: none; }
.an-group { display: flex; gap: 2px; }
.an-bar button { width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; background: transparent;
  color: var(--grey); display: grid; place-items: center; cursor: pointer; padding: 0; }
.an-bar button:hover:not(:disabled) { background: var(--cream); color: var(--ink); }
.an-bar button:disabled { opacity: .35; cursor: default; }
.an-bar button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.an-bar button[aria-pressed="true"] { background: var(--lav); color: var(--lav-ink); }
.an-bar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.an-bar .an-grip { width: 22px; cursor: grab; color: var(--grey); opacity: .7; }
.an-bar .an-grip svg { fill: currentColor; stroke: none; width: 16px; height: 16px; }
.an-sep { width: 1px; height: 20px; background: var(--line); margin: 0 5px; flex: none; }
.an-swatch i { width: 18px; height: 18px; border-radius: 50%; display: block;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--line); }
.an-size i { width: var(--d, 8px); height: var(--d, 8px); border-radius: 50%; background: var(--ink); display: block; }
.an-pop-wrap { position: relative; }
.an-pop { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 8px;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(46, 27, 74, .18); }
.an-bar[data-pos="bottom"] .an-pop { bottom: calc(100% + 10px); }
.an-bar[data-pos="top"] .an-pop { top: calc(100% + 10px); }
.an-pop[hidden] { display: none; }
.an-pop [data-color] { width: 26px; height: 26px; background: var(--c) !important; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--line); }
.an-pop [data-color].is-on { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--c); }
.an-pop [data-size] i { width: var(--d); height: var(--d); border-radius: 50%; background: var(--ink); display: block; }
.an-pop [data-size].is-on { background: var(--lav); }
/* eraser options: shown in place of colour/thickness while the eraser is on */
.an-eraseopts { display: flex; align-items: center; gap: 6px; }
.an-eraseopts[hidden], .an-inkopt[hidden] { display: none; }
.an-seg { display: flex; background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.an-bar .an-seg button { width: auto; height: 28px; border-radius: 999px; padding: 0 .7rem; white-space: nowrap;
  font: 700 .74rem/1 "Hanken Grotesk", sans-serif; color: var(--grey); }
.an-bar .an-seg button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); }
.an-esizes { display: flex; gap: 1px; }
.an-bar .an-esizes button { width: 30px; }
.an-esizes i { display: block; width: var(--d); height: var(--d); border-radius: 50%; border: 1.5px solid var(--grey); }
.an-bar .an-esizes button[aria-checked="true"] { background: var(--lav); }
.an-bar .an-esizes button[aria-checked="true"] i { border-color: var(--lav-ink); background: var(--white); }
.an-bar .an-del { color: var(--pink-ink); }
.an-bar .an-del[hidden] { display: none; }
.an-saved { font-size: .72rem; color: var(--green-ink); min-width: 0; max-width: 9rem; white-space: nowrap;
  overflow: hidden; padding: 0 .2rem; }
.an-saved:empty { display: none; }
/* bottom-left corner: clear of page content and of the chat / note buttons on the right */
.an-fab { position: fixed; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 70; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--white);
  color: var(--purple); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 28px rgba(46, 27, 74, .2); }
.an-fab[hidden] { display: none; }
.an-fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the drawing layer over each page */
.an-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
/* touch-action stays none even after a stylus is seen: with pan allowed, Chrome/Edge
   turn a pen stroke into a scroll (the Wacom "page jumps while writing" bug).
   annotate.js scrolls the page itself for a finger once a pen has been used. */
.an-layer.is-active { pointer-events: auto; touch-action: none; cursor: crosshair;
  -webkit-user-select: none; user-select: none; }
.an-layer.is-active[data-tool^="eraser"] { cursor: none; }
.an-layer.is-active[data-tool="text"] { cursor: text; }
.an-layer.is-active[data-tool="select"] { cursor: default; }
.an-drawing .vw-stage, .an-drawing .mq-stage { overscroll-behavior: contain; }
.an-text { position: absolute; z-index: 6; min-width: 8rem; border: 1.5px dashed currentColor; border-radius: 6px;
  background: rgba(255, 255, 255, .92); font: 600 14px/1.25 "Hanken Grotesk", system-ui, sans-serif;
  padding: 2px 6px; resize: none; outline: none; }
/* while drawing, links and form fields on the page must not steal the pen */
.an-drawing .vw-pg .annotationLayer { pointer-events: none; }

@media (max-width: 640px) {
  .an-bar { gap: 0; padding: 4px 6px; overflow-x: auto; scrollbar-width: none; }
  .an-bar button { width: 32px; height: 32px; }
  .an-sep { margin: 0 3px; }
  .an-pop { position: fixed; left: 50%; bottom: 70px; }
}
@media print { .an-bar, .an-fab { display: none !important; } }
/* phones: the pen button sits bottom-left, clear of the site's chat / note buttons */
@media (max-width: 999px) { .an-fab { left: .8rem; } }

/* scratch layer over a whole web page (every non-PDF page; never saved) */
.an-viewport { position: fixed; inset: 0; z-index: 65; pointer-events: none; }
.an-viewport .an-layer:not(.is-active) { pointer-events: none; }

/* instruments: ruler + protractor (annotate.js) - see-through, draggable, rotatable */
.an-inst { position: absolute; z-index: 7; pointer-events: auto; touch-action: none; cursor: grab;
  user-select: none; -webkit-user-select: none; filter: drop-shadow(0 4px 10px rgba(20, 20, 40, .18)); }
.an-inst:active { cursor: grabbing; }
.an-inst-svg { display: block; overflow: visible; }
.an-inst-body { fill: rgba(255, 252, 236, .72); stroke: rgba(60, 60, 90, .55); stroke-width: 1; }
.an-inst-ticks line { stroke: #2b2b40; stroke-width: .8; }
.an-inst-ticks text { fill: #2b2b40; text-anchor: middle; font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 600; }
.an-inst-ticks .an-inst-inner { fill: #b0326e; font-weight: 500; }
.an-inst-unit { fill: #5a5a72; font: 600 9px "Hanken Grotesk", sans-serif; }
.an-inst-base { stroke: #2b2b40; stroke-width: 1; }
.an-inst-centre { fill: #dc2626; }
.an-inst-rot { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #7c5cf0;
  background: #fff; cursor: alias; padding: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.an-inst-ruler .an-inst-rot { right: -26px; top: 50%; margin-top: -10px; }
.an-inst-protractor .an-inst-rot { right: -24px; bottom: -6px; }
.an-inst-deg { position: absolute; left: 50%; transform: translateX(-50%); font: 700 11px/1 "Hanken Grotesk", sans-serif;
  color: #fff; background: #7c5cf0; border-radius: 999px; padding: 3px 7px; pointer-events: none; white-space: nowrap; }
.an-inst-ruler .an-inst-deg { bottom: -22px; }
.an-inst-protractor .an-inst-deg { top: 34%; }
.an-inst-x { position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #2b2b40;
  color: #fff; font: 700 13px/1 system-ui; cursor: pointer; padding: 0; }
.an-inst-ruler .an-inst-x { left: -26px; top: 50%; margin-top: -10px; }
.an-inst-protractor .an-inst-x { left: -24px; bottom: -6px; }
.an-viewport .an-inst { pointer-events: auto; }
.an-insts { display: flex; gap: 2px; }

/* ── ink palette (12 tokens + custom) ─────────────────────────────── */
.an-pop.an-colors { display: grid; gap: 8px; padding: 10px 12px 12px; width: max-content; }
.an-pop.an-colors[hidden] { display: none; }
.an-pop-head { margin: 0; font: 700 .68rem/1 "Hanken Grotesk", sans-serif; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grey); }
.an-swatches { display: grid; grid-template-columns: repeat(6, 26px); gap: 7px; }
.an-custom { display: flex; align-items: center; gap: 8px; font: 600 .78rem/1 "Hanken Grotesk", sans-serif;
  color: var(--grey); cursor: pointer; padding-top: 6px; border-top: 1px solid var(--line); }
.an-custom input { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.an-custom input::-webkit-color-swatch-wrapper { padding: 0; }
.an-custom input::-webkit-color-swatch { border: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--line); }
.an-custom input::-moz-color-swatch { border: 0; border-radius: 50%; }
.an-custom.is-on { color: var(--ink); }
.an-custom.is-on input::-webkit-color-swatch { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ink); }
/* the text-box editor follows the paper */
html[data-paper="dark"] .vw-pg .an-text, html[data-paper="dark"] .an-text { background: rgba(16, 18, 24, .92); }