/* ─────────────────────────────────────────────────────────────────
   Annotations — post-its, highlighter, dispenser, spine, rail.
   Sits on top of the cream-paper IELTS lesson aesthetic. Heavy use
   of tinted shadows, subtle gradients, slight rotations to keep the
   physical-paper feel without descending into skeuomorphic kitsch.
   ───────────────────────────────────────────────────────────── */

/* ── Color palette ──────────────────────────────────────────────
   Saturated post-it brand vibes, dialled ~10% off pure neon so they
   sit comfortably over the cream background. Each color also defines
   a darker companion for shadow/text. */
:root {
  --ann-yellow:        #F5D85F;
  --ann-yellow-deep:   #C49C2D;
  --ann-yellow-text:   #5A4318;

  --ann-pink:          #FF7AAB;
  --ann-pink-deep:     #C5446D;
  --ann-pink-text:     #5A1B30;

  --ann-green:         #6FD08C;
  --ann-green-deep:    #3F8A56;
  --ann-green-text:    #1F4421;

  --ann-blue:          #5FB8DC;
  --ann-blue-deep:     #2F7BAB;
  --ann-blue-text:     #163252;

  --ann-orange:        #FF8C5A;
  --ann-orange-deep:   #C25A2A;
  --ann-orange-text:   #4A2310;
}

/* Helper class — applied wherever we need a per-color treatment. */
.ann-color-yellow { --ann-c: var(--ann-yellow); --ann-cd: var(--ann-yellow-deep); --ann-ct: var(--ann-yellow-text); }
.ann-color-pink   { --ann-c: var(--ann-pink);   --ann-cd: var(--ann-pink-deep);   --ann-ct: var(--ann-pink-text); }
.ann-color-green  { --ann-c: var(--ann-green);  --ann-cd: var(--ann-green-deep);  --ann-ct: var(--ann-green-text); }
.ann-color-blue   { --ann-c: var(--ann-blue);   --ann-cd: var(--ann-blue-deep);   --ann-ct: var(--ann-blue-text); }
.ann-color-orange { --ann-c: var(--ann-orange); --ann-cd: var(--ann-orange-deep); --ann-ct: var(--ann-orange-text); }

/* ── Sentence wrapper — base state ──────────────────────────── */
.ann-sent {
  position: relative;
  cursor: pointer;
  border-radius: 2px;
  transition: background-color .15s ease;
}
.ann-sent:hover:not(.is-hl) {
  background-color: rgba(31, 24, 18, .04);
}

/* ── Highlighter ink ─────────────────────────────────────────────
   The visual goal: looks like an actual marker stripe. Translucent
   color, slightly fuzzy edges, ink bleed past letter bounds, soft
   colored glow. Implemented with two stacked backgrounds:
     1. A horizontal gradient with a slight wave (mask-image) for the
        uneven edge feel.
     2. Translucent fill bounded vertically (transparent top/bottom
        few percent) so it sits behind the text like ink, not a chip.
   box-decoration-break:clone keeps line-wrapped highlights correct. */
.ann-sent.is-hl {
  background-color: transparent; /* no flat fill — gradient does the work */
  background-image:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 6%,
      var(--ann-c, var(--ann-yellow)) 14%,
      var(--ann-c, var(--ann-yellow)) 86%,
      transparent 94%,
      transparent 100%
    );
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* Translucency — lets the dark IELTS shell show through softly */
  opacity: 1;
  padding: 0.06em 0.18em;
  margin: 0 -0.1em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* Subtle colored shadow — the "wet ink" halo */
  text-shadow: 0 0 0 currentColor;
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--ann-c, var(--ann-yellow)) 32%, transparent));
}

/* Each color has slightly different translucency so text legibility
   is consistent across colors. Pinks/oranges need slightly more alpha. */
.ann-sent.is-hl-yellow { background-image: linear-gradient(180deg, transparent 0%, transparent 6%, rgba(245, 216, 95, .68) 14%, rgba(245, 216, 95, .68) 86%, transparent 94%, transparent 100%); }
.ann-sent.is-hl-pink   { background-image: linear-gradient(180deg, transparent 0%, transparent 6%, rgba(255, 122, 171, .55) 14%, rgba(255, 122, 171, .55) 86%, transparent 94%, transparent 100%); }
.ann-sent.is-hl-green  { background-image: linear-gradient(180deg, transparent 0%, transparent 6%, rgba(111, 208, 140, .62) 14%, rgba(111, 208, 140, .62) 86%, transparent 94%, transparent 100%); }
.ann-sent.is-hl-blue   { background-image: linear-gradient(180deg, transparent 0%, transparent 6%, rgba(95, 184, 220, .55) 14%, rgba(95, 184, 220, .55) 86%, transparent 94%, transparent 100%); }
.ann-sent.is-hl-orange { background-image: linear-gradient(180deg, transparent 0%, transparent 6%, rgba(255, 140, 90, .55) 14%, rgba(255, 140, 90, .55) 86%, transparent 94%, transparent 100%); }

/* When tapping a highlighted sentence, briefly pulse it. */
.ann-sent.is-hl:active { transform: scale(0.998); }

/* ── Overlay containers (notes layer) ───────────────────────── */
.ann-overlay-highlights {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  pointer-events: none;
}
.ann-overlay-notes {
  position: absolute;
  top: 0;
  width: 0;
  height: 100%;
  pointer-events: none;
  z-index: 12;
}
.ann-overlay-notes > * { pointer-events: auto; }
.ann-overlay-notes-right { right: 0; }
.ann-overlay-notes-left  { left: 0; }

/* ── Post-it note ────────────────────────────────────────────────
   The crown jewel — has to look real. Layered:
     · Subtle warm gradient (top brighter — incident light)
     · Soft color-tinted shadow (NOT grey — yellow casts yellow shadow)
     · 1px highlight on the top edge (specular)
     · Curl on bottom-right corner — pseudo-element with skewed gradient
     · Faint paper grain via SVG noise data URI
     · Slight rotation (--ann-rot, set inline per note from a hash) */
.ann-note {
  position: absolute;
  right: -240px;
  width: 220px;
}
.ann-note[data-side="left"] {
  right: auto;
  left: -240px;
  border-radius: 1px 1px 8px 2px; /* mirror the soft corner */
}
.ann-note[data-side="right"] { right: -240px; left: auto; }
/* Mirror the curl on left-side notes so it sits on the bottom-right. */
.ann-note[data-side="left"] .ann-note-curl {
  left: auto;
  right: 0;
  transform: scaleX(-1);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 8px;
}
.ann-note {
  min-height: 140px;
  padding: 18px 16px 16px;
  background: var(--ann-c, var(--ann-yellow));
  background-image:
    /* paper grain */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),
    /* subtle sheen */
    linear-gradient(168deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,0.04) 100%);
  background-size: 160px 160px, 100% 100%;
  border-radius: 1px 1px 2px 8px;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ann-ct, var(--ann-yellow-text));
  transform: rotate(var(--ann-rot, -0.5deg));
  transform-origin: top center;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .25s, opacity .2s;
  /* The shadow is the trick — color-tinted, two layers (close + spread). */
  box-shadow:
    0 1px 0 0 color-mix(in srgb, var(--ann-cd, var(--ann-yellow-deep)) 28%, transparent),
    0 6px 12px -4px color-mix(in srgb, var(--ann-cd, var(--ann-yellow-deep)) 50%, transparent),
    0 18px 28px -12px color-mix(in srgb, var(--ann-cd, var(--ann-yellow-deep)) 35%, rgba(0,0,0,.18)),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  z-index: 4;
}
.ann-note:hover {
  transform: rotate(var(--ann-rot, -0.5deg)) translateY(-2px);
  z-index: 6;
  box-shadow:
    0 1px 0 0 color-mix(in srgb, var(--ann-cd, var(--ann-yellow-deep)) 32%, transparent),
    0 10px 18px -6px color-mix(in srgb, var(--ann-cd, var(--ann-yellow-deep)) 55%, transparent),
    0 26px 38px -14px color-mix(in srgb, var(--ann-cd, var(--ann-yellow-deep)) 40%, rgba(0,0,0,.22)),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.ann-note.is-editing {
  transform: rotate(0deg) translateY(-1px) scale(1.015);
  z-index: 8;
  box-shadow:
    0 2px 0 0 color-mix(in srgb, var(--ann-cd, var(--ann-yellow-deep)) 35%, transparent),
    0 14px 22px -6px color-mix(in srgb, var(--ann-cd, var(--ann-yellow-deep)) 60%, transparent),
    0 30px 44px -14px color-mix(in srgb, var(--ann-cd, var(--ann-yellow-deep)) 45%, rgba(0,0,0,.26)),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ann-note.is-removing { opacity: 0; transform: rotate(var(--ann-rot, -0.5deg)) translateY(8px) scale(0.94); }

/* Curl on the bottom-left corner. Two stacked diagonal gradients
   give it the lift-of-paper look without an SVG. */
.ann-note-curl {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  pointer-events: none;
  background:
    linear-gradient(
      135deg,
      transparent 50%,
      color-mix(in srgb, var(--ann-cd, var(--ann-yellow-deep)) 18%, var(--ann-c, var(--ann-yellow))) 50%,
      color-mix(in srgb, var(--ann-cd, var(--ann-yellow-deep)) 30%, var(--ann-c, var(--ann-yellow))) 80%,
      color-mix(in srgb, var(--ann-cd, var(--ann-yellow-deep)) 45%, transparent) 100%
    );
  border-bottom-left-radius: 8px;
  filter: drop-shadow(1px -1px 2px rgba(0,0,0,.18));
}

/* The text area. Inherits color from --ann-ct. */
.ann-note-text {
  outline: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.45;
  letter-spacing: .002em;
  color: inherit;
  min-height: 100px;
  word-break: break-word;
  /* Slight paper-handwriting feel without going full handwritten font */
  font-weight: 500;
}
.ann-note-text:empty::before,
.ann-note.is-empty .ann-note-text:empty::before {
  content: attr(data-placeholder);
  opacity: 0.45;
  font-style: italic;
}

/* Close button — only visible on hover/edit. */
.ann-note-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--ann-ct, var(--ann-yellow-text));
  opacity: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s, background-color .15s;
}
.ann-note:hover .ann-note-close,
.ann-note.is-editing .ann-note-close { opacity: 0.55; }
.ann-note-close:hover { opacity: 1 !important; background: rgba(0, 0, 0, .08); }

/* ── Picker (tiny glass-frosted floater on sentence tap) ──────
   Stage 1 — two small icon-only glass circles (highlight + post-it).
   Stage 2 — back arrow + 5 small swatches: round circles for post-it,
             curvy mini-stroke previews for highlighter.
   Tooltip floats above the swatch under hover, showing the category
   label so the user knows what each color "means". */
.ann-picker {
  position: absolute;
  z-index: 25;
  display: inline-block;
  background:
    linear-gradient(180deg, rgba(255, 250, 232, .55) 0%, rgba(245, 235, 211, .42) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
          backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  padding: 5px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .55) inset,
    0 -1px 0 rgba(0, 0, 0, .08) inset,
    0 8px 22px -6px rgba(0, 0, 0, .25),
    0 22px 44px -16px rgba(0, 0, 0, .2);
  font-family: 'Inter', system-ui, sans-serif;
  opacity: 0;
  transform: translateY(4px) scale(0.92);
  transition: opacity .16s, transform .16s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.ann-picker.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ann-picker-stage {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ann-picker-stage[hidden] { display: none !important; }

.ann-picker-circles {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Glass icon circle — base. */
.ann-picker-circle {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .15) 100%);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 50%;
  color: var(--paper-ink, #1F1812);
  cursor: pointer;
  padding: 0;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -2px 4px rgba(0, 0, 0, .04),
    0 2px 4px rgba(0, 0, 0, .08);
  transition: transform .14s, box-shadow .14s;
}
.ann-picker-circle::after {
  /* a thin specular highlight at the top-left, for the glass feel */
  content: '';
  position: absolute;
  top: 4px;
  left: 5px;
  width: 12px;
  height: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .8), transparent);
  border-radius: 50%;
  transform: rotate(-30deg);
  pointer-events: none;
  opacity: .8;
}
.ann-picker-circle:hover {
  transform: scale(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -2px 4px rgba(0, 0, 0, .05),
    0 4px 10px rgba(0, 0, 0, .14);
}
.ann-picker-circle-rm {
  color: #A85B47;
}
.ann-picker-circle-rm:hover { color: #6E2F1E; }

/* Stage 2 — back-arrow circle + swatches. */
.ann-picker-back-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  border: 1px solid rgba(255, 255, 255, .55);
  color: var(--paper-ink-soft, #4A3F33);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background-color .14s, transform .14s;
}
.ann-picker-back-circle:hover {
  background: rgba(255, 255, 255, .65);
  transform: scale(1.08);
}

.ann-picker-swatches {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ann-picker-swatch {
  position: relative;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .14s;
}
.ann-picker-swatch:hover { transform: scale(1.18); }

/* Default swatch view — round chip (post-it mode). */
.ann-picker-swatch-circle {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ann-c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -2px 3px color-mix(in srgb, var(--ann-cd) 30%, transparent),
    0 2px 5px color-mix(in srgb, var(--ann-cd) 55%, transparent);
}
.ann-picker-swatch-stroke { display: none; }

/* In highlight mode, swap to a curvy stroke preview. */
.ann-picker[data-active-tool="highlight"] .ann-picker-swatch-circle { display: none; }
.ann-picker[data-active-tool="highlight"] .ann-picker-swatch-stroke {
  display: block;
  width: 30px;
  height: 14px;
  color: var(--ann-c);
  filter:
    drop-shadow(0 0 3px color-mix(in srgb, var(--ann-c) 50%, transparent))
    drop-shadow(0 0 6px color-mix(in srgb, var(--ann-c) 22%, transparent));
}
.ann-picker[data-active-tool="highlight"] .ann-picker-swatch-stroke svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Floating hover tooltip — shows the category label above the swatch. */
.ann-picker-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1F1812;
  color: #F5EBD3;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: .02em;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .35);
  z-index: 2;
}
.ann-picker-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -4px;
  border: 4px solid transparent;
  border-top-color: #1F1812;
}

/* ── Right-edge spine (scroll indicator + annotation marks) ── */
.ann-spine {
  position: absolute;
  top: 12px;
  right: -22px;
  width: 14px;
  height: calc(100% - 24px);
  pointer-events: none;
  z-index: 3;
}
.ann-spine::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1.5px;
  margin-left: -0.75px;
  background: linear-gradient(
    180deg,
    rgba(31, 24, 18, .04) 0%,
    rgba(31, 24, 18, .15) 8%,
    rgba(31, 24, 18, .15) 92%,
    rgba(31, 24, 18, .04) 100%
  );
  border-radius: 2px;
}

/* Position disc — slides as the page scrolls. Honey core, glow halo. */
.ann-spine-disc {
  position: absolute;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #DCAA52 0%, #B57A2E 70%, #8B5A1C 100%);
  box-shadow:
    0 0 0 3px rgba(181, 122, 46, .18),
    0 0 12px rgba(181, 122, 46, .35),
    inset 0 1px 0 rgba(255,255,255,.45);
  transition: top .12s ease-out;
  pointer-events: none;
}

/* Section ticks — small notches at every h2. */
.ann-spine-tick {
  position: absolute;
  left: 50%;
  width: 7px;
  height: 1.5px;
  margin-left: -3.5px;
  background: rgba(31, 24, 18, .35);
  border-radius: 1px;
  pointer-events: none;
}

/* Annotation marks — colored bumps along the spine. */
.ann-spine-mark {
  position: absolute;
  left: 50%;
  width: 12px;
  height: 8px;
  margin-left: -6px;
  margin-top: -4px;
  background: var(--ann-c);
  border: 0;
  border-radius: 1.5px;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 1px 2px color-mix(in srgb, var(--ann-cd) 50%, transparent);
  transition: transform .12s, box-shadow .12s;
}
.ann-spine-mark:hover {
  transform: scaleX(1.25);
  z-index: 4;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 2px 6px color-mix(in srgb, var(--ann-cd) 70%, transparent);
}
.ann-spine-mark-highlight { height: 4px; margin-top: -2px; border-radius: 1px; }

/* ── Left rail (annotations catalog) ────────────────────────── */
.ann-rail {
  position: fixed;
  top: 96px;
  left: 16px;
  width: 232px;
  max-height: calc(100vh - 132px);
  background:
    linear-gradient(180deg, rgba(252, 244, 224, .96) 0%, rgba(245, 235, 211, .96) 100%);
  border: 1px solid rgba(31, 24, 18, .1);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(0,0,0,.08),
    0 18px 32px -16px rgba(0,0,0,.28),
    0 36px 64px -28px rgba(0,0,0,.18);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--paper-ink, #1F1812);
  z-index: 18;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
.ann-rail.is-collapsed {
  transform: translateX(calc(-100% + 28px));
}
.ann-rail.is-collapsed .ann-rail-list,
.ann-rail.is-collapsed .ann-rail-empty,
.ann-rail.is-collapsed .ann-rail-eyebrow,
.ann-rail.is-collapsed .ann-rail-count { opacity: 0; pointer-events: none; }
.ann-rail.is-collapsed .ann-rail-collapse svg { transform: rotate(180deg); }

.ann-rail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(31, 24, 18, .08);
}
.ann-rail-eyebrow {
  font-size: 0.62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-ink-soft, #4A3F33);
  flex: 1;
}
.ann-rail-count {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--paper-ink-mute, #7A6A55);
  background: rgba(31, 24, 18, .08);
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
.ann-rail-collapse {
  background: transparent;
  border: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--paper-ink-soft, #4A3F33);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s, color .15s;
}
.ann-rail-collapse:hover { background: rgba(31, 24, 18, .08); }
.ann-rail-collapse svg { transition: transform .25s; }

.ann-rail-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ann-rail-list::-webkit-scrollbar { width: 6px; }
.ann-rail-list::-webkit-scrollbar-thumb { background: rgba(31, 24, 18, .15); border-radius: 3px; }

.ann-rail-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  text-align: left;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--paper-ink, #1F1812);
  cursor: pointer;
  width: 100%;
  transition: background-color .15s, transform .12s;
}
.ann-rail-item:hover { background: rgba(255, 255, 255, .55); transform: translateX(1px); }
.ann-rail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ann-c);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ann-cd) 50%, transparent);
  flex-shrink: 0;
  margin-top: 6px;
}
.ann-rail-icon {
  display: flex;
  color: var(--ann-cd);
  margin-top: 2px;
  flex-shrink: 0;
}
.ann-rail-text {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ann-rail-empty {
  padding: 18px 16px 22px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--paper-ink-mute, #7A6A55);
  font-style: italic;
}

.ann-rail.is-locked { opacity: 0.55; }

/* ── Dispenser (right edge — pulls a tab to arm the tool) ────
   Designed to mimic a real desk-side post-it dispenser: a tall
   matte-black holder with two compartments. Each compartment shows
   a tool icon + label, then a vertical stack of substantial,
   grabbable color tabs that lift on hover. */
.ann-dispenser {
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: 84px;
  background:
    radial-gradient(ellipse at top, rgba(58, 44, 32, .55) 0%, transparent 60%),
    linear-gradient(180deg, rgba(28, 22, 16, .96) 0%, rgba(20, 16, 12, .96) 100%);
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: 18px;
  padding: 16px 10px 18px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .04) inset,
    0 -1px 0 rgba(0, 0, 0, .5) inset,
    0 1px 0 rgba(0, 0, 0, .4),
    0 22px 40px -12px rgba(0, 0, 0, .55),
    0 44px 70px -28px rgba(0, 0, 0, .45);
  font-family: 'Inter', system-ui, sans-serif;
  z-index: 18;
  display: flex;
  flex-direction: column;
  gap: 14px;
  user-select: none;
}

/* Each compartment within the dispenser. */
.ann-disp-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  padding: 0;
  background: transparent;
}

/* Compartment head — small icon + label, lives inside the stack
   (no more floating chip). A fine bottom rule separates head from
   tabs so the eye registers the section without extra chrome. */
.ann-disp-stack-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 4px 7px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  margin-bottom: 8px;
}
.ann-disp-stack-icon {
  display: inline-flex;
  color: rgba(245, 235, 211, .55);
  margin-top: -1px;
}
.ann-disp-stack-label {
  font-size: 0.56rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(245, 235, 211, .7);
}

/* The tab column itself. */
.ann-disp-stack-tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 2px 0 2px;
}

/* Faint divider between the two compartments — a hairline reflection
   suggesting two trays in one holder, without adding visual weight. */
.ann-disp-divider {
  height: 1px;
  margin: -2px 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, .08) 30%,
    rgba(255, 255, 255, .12) 50%,
    rgba(255, 255, 255, .08) 70%,
    transparent 100%
  );
}

/* Common tab base — substantial, grabbable. */
.ann-disp-tab {
  position: relative;
  width: 56px;
  height: 24px;
  border: 0;
  cursor: pointer;
  padding: 0;
  background: var(--ann-c);
  border-radius: 1.5px 1.5px 5px 5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -3px 5px color-mix(in srgb, var(--ann-cd) 30%, transparent),
    0 2px 5px color-mix(in srgb, var(--ann-cd) 55%, transparent);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), height .2s, box-shadow .2s;
}
.ann-disp-tab::after {
  /* faint paper grain on each tab so they look like real Post-it edges */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(170deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,.05) 100%);
  pointer-events: none;
}
.ann-disp-tab:hover {
  transform: translateY(2px);
  height: 30px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -4px 7px color-mix(in srgb, var(--ann-cd) 35%, transparent),
    0 5px 10px color-mix(in srgb, var(--ann-cd) 60%, transparent);
}
.ann-disp-tab.is-armed {
  transform: translateY(4px) scale(1.04);
  height: 32px;
  outline: 2px solid rgba(255, 255, 255, .4);
  outline-offset: 3px;
}

/* Highlighter tabs — curved hand-drawn strokes drawn as inline SVG
   inside each button. The SVG path's `currentColor` is driven by the
   button's `color: var(--ann-c)` so each tab gets its own ink hue.
   No backgrounds, no gradients — just a curvy stroke + glow. */
.ann-disp-tab-hl {
  width: 60px;
  height: 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  padding: 0;
  color: var(--ann-c);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), height .22s, filter .22s;
  filter:
    drop-shadow(0 0 4px color-mix(in srgb, var(--ann-c) 50%, transparent))
    drop-shadow(0 0 9px color-mix(in srgb, var(--ann-c) 22%, transparent));
}
.ann-disp-tab-hl::before,
.ann-disp-tab-hl::after { display: none !important; }
.ann-disp-tab-hl .ann-hl-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ann-disp-tab-hl:hover {
  height: 19px;
  transform: translateY(-1px);
  filter:
    drop-shadow(0 0 6px color-mix(in srgb, var(--ann-c) 70%, transparent))
    drop-shadow(0 0 14px color-mix(in srgb, var(--ann-c) 32%, transparent));
}
.ann-disp-tab-hl.is-armed {
  height: 20px;
  transform: translateY(-1px) scale(1.04);
  filter:
    drop-shadow(0 0 8px color-mix(in srgb, var(--ann-c) 80%, transparent))
    drop-shadow(0 0 18px color-mix(in srgb, var(--ann-c) 40%, transparent));
}

.ann-disp-hint {
  margin-top: 8px;
  padding: 7px 6px;
  font-size: 0.62rem;
  text-align: center;
  color: rgba(245, 235, 211, .92);
  background: rgba(245, 235, 211, .12);
  border-radius: 7px;
  line-height: 1.32;
  letter-spacing: .02em;
  font-weight: 500;
}

.ann-disp-locked {
  padding: 8px 4px;
  font-size: 0.62rem;
  text-align: center;
  color: rgba(245, 235, 211, .55);
  line-height: 1.4;
}
.ann-dispenser.is-locked { opacity: 0.85; }

/* While armed, the cursor on the lesson body changes — clear feedback. */
body.is-ann-armed-highlight .rd-lesson-body { cursor: crosshair; }
body.is-ann-armed-note .rd-lesson-body { cursor: copy; }
body.is-ann-armed .ann-sent:hover { background-color: rgba(31, 24, 18, .07); }

/* ── Hide annotations UI while editing the lesson (god mode) ── */
body.is-editing-lesson .ann-dispenser,
body.is-editing-lesson .ann-rail,
body.is-editing-lesson .ann-spine,
body.is-editing-lesson .ann-overlay-notes,
body.is-editing-lesson .ann-picker {
  pointer-events: none;
  opacity: 0.25;
}

/* ── Card dots ─────────────────────────────────────────────────
   Small color indicators on lesson cards in the index, showing
   which annotation colors the user has on that lesson. Pinned to
   top-right of each card. Idempotent injection by JS. */
.ann-card-dots {
  position: absolute;
  top: 10px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  z-index: 2;
}
.ann-card-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ann-c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 1px 2px color-mix(in srgb, var(--ann-cd) 55%, transparent);
}
/* Some host cards aren't positioning contexts — fix that. */
.rd-lesson-card,
.wr-cat-lesson,
.rd-pr-card { position: relative; }

/* ─────────────────────────────────────────────────────────────────
   Global "all my notes" page — shown at #subject/ielts/annotations.
   Lives inside #course-body so it inherits the IELTS shell.
   ───────────────────────────────────────────────────────────── */
.ann-global {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 24px 96px;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--paper-ink, #1F1812);
}
.ann-global-loading {
  text-align: center;
  padding: 80px 0;
  color: var(--paper-ink-mute, #7A6A55);
  font-style: italic;
}

/* Header. */
.ann-global-head {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(31, 24, 18, .12);
}
.ann-global-eyebrow {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  margin-bottom: 6px;
}
.ann-global-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-size: 2.1rem;
  margin: 0 0 6px;
  letter-spacing: -.01em;
  color: var(--paper-ink, #1F1812);
}
.ann-global-meta {
  margin: 0;
  font-size: .92rem;
  color: var(--paper-ink-soft, #4A3F33);
}

/* Sections. */
.ann-global-section {
  margin-top: 32px;
}
.ann-global-section-head { margin-bottom: 14px; }
.ann-global-section-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0 0 4px;
  color: var(--paper-ink, #1F1812);
}
.ann-global-section-meta {
  margin: 0;
  font-size: .82rem;
  color: var(--paper-ink-mute, #7A6A55);
}

/* Categories — rename labels. */
.ann-global-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.ann-global-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(31, 24, 18, .12);
  border-radius: 12px;
  transition: border-color .15s, background-color .15s;
}
.ann-global-cat:hover,
.ann-global-cat:focus-within {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(181, 122, 46, .35);
}
.ann-global-cat-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ann-c);
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 2px 5px color-mix(in srgb, var(--ann-cd) 50%, transparent);
}
.ann-global-cat-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font: inherit;
  font-size: .94rem;
  font-weight: 600;
  color: var(--paper-ink, #1F1812);
  padding: 4px 0;
  min-width: 0;
}
.ann-global-cat-input:focus {
  border-bottom: 1px solid var(--ann-cd);
}
.ann-global-cat-reset {
  background: transparent;
  border: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--paper-ink-mute, #7A6A55);
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transition: opacity .15s, background-color .15s;
}
.ann-global-cat:hover .ann-global-cat-reset,
.ann-global-cat:focus-within .ann-global-cat-reset { opacity: .65; }
.ann-global-cat-reset:hover { opacity: 1; background: rgba(31, 24, 18, .08); }

/* Lessons. */
.ann-global-lessons {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 14px;
}
.ann-global-lesson {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(31, 24, 18, .1);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(0,0,0,.06),
    0 12px 24px -16px rgba(0,0,0,.18);
}
.ann-global-lesson-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(31, 24, 18, .03);
  border-bottom: 1px solid rgba(31, 24, 18, .08);
}
.ann-global-lesson-kind {
  font-size: 0.6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  background: rgba(181, 122, 46, .12);
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.ann-global-lesson-title {
  flex: 1;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--paper-ink, #1F1812);
  text-decoration: none;
  letter-spacing: -.005em;
  transition: color .15s;
}
.ann-global-lesson-title:hover { color: var(--paper-honey-deep, #8B5A1C); text-decoration: underline; }
.ann-global-lesson-count {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--paper-ink-mute, #7A6A55);
  background: rgba(31, 24, 18, .08);
  padding: 2px 9px;
  border-radius: 999px;
}

.ann-global-items {
  display: flex;
  flex-direction: column;
}
.ann-global-item {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(31, 24, 18, .06);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background-color .15s, transform .12s;
}
.ann-global-item:last-child { border-bottom: 0; }
.ann-global-item:hover { background: rgba(255, 255, 255, .85); transform: translateX(2px); }
.ann-global-item-bar {
  width: 4px;
  background: var(--ann-c);
  flex-shrink: 0;
  align-self: stretch;
}
.ann-global-item-icon {
  display: flex;
  align-items: center;
  padding: 14px 12px;
  color: var(--ann-cd);
  flex-shrink: 0;
}
.ann-global-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px 14px 0;
  flex: 1;
  min-width: 0;
}
.ann-global-item-meta {
  font-size: 0.66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper-ink-mute, #7A6A55);
}
.ann-global-item-meta b {
  font-weight: 700;
  color: var(--paper-ink-soft, #4A3F33);
  letter-spacing: .12em;
}
.ann-global-item-text {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .98rem;
  line-height: 1.45;
  color: var(--paper-ink, #1F1812);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ann-global-item-text.is-placeholder {
  font-style: italic;
  color: var(--paper-ink-mute, #7A6A55);
}

/* Empty / blank states. */
.ann-global-empty,
.ann-global-blank {
  text-align: center;
  padding: 60px 20px;
  color: var(--paper-ink-soft, #4A3F33);
}
.ann-global-empty h2,
.ann-global-blank h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  margin: 12px 0 8px;
  color: var(--paper-ink, #1F1812);
}
.ann-global-empty p,
.ann-global-blank p {
  margin: 0 auto;
  max-width: 440px;
  line-height: 1.5;
  color: var(--paper-ink-mute, #7A6A55);
}
.ann-global-blank-icon {
  color: var(--paper-honey, #B57A2E);
  opacity: .8;
}

/* ─────────────────────────────────────────────────────────────────
   Drag ghost (desktop): tab follows the cursor while being dragged
   to a drop target on the lesson body. Drop-target gets a soft
   honey outline so the user knows where it'll land.
   ───────────────────────────────────────────────────────────── */
.ann-drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) rotate(-3deg);
  transition: transform .15s cubic-bezier(.2,.8,.2,1);
}
/* Note ghost — looks like a real post-it, slightly tilted, dragged. */
.ann-drag-ghost-note > div {
  position: relative;
  width: 76px;
  height: 76px;
  background: var(--ann-c);
  border-radius: 1px 1px 2px 6px;
  box-shadow:
    0 6px 14px -2px color-mix(in srgb, var(--ann-cd) 55%, transparent),
    0 16px 28px -10px color-mix(in srgb, var(--ann-cd) 40%, rgba(0,0,0,.25)),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.ann-drag-ghost-note-curl {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  background: linear-gradient(
    135deg,
    transparent 50%,
    color-mix(in srgb, var(--ann-cd) 25%, var(--ann-c)) 50%,
    color-mix(in srgb, var(--ann-cd) 45%, transparent) 100%
  );
  border-bottom-left-radius: 6px;
}
/* Highlighter ghost — a marker stripe with glow. */
.ann-drag-ghost-hl > div {
  width: 70px;
  height: 16px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ann-c) 12%,
    var(--ann-c) 88%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(180deg, transparent 0%, black 22%, black 78%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0%, black 22%, black 78%, transparent 100%);
  filter:
    drop-shadow(0 0 6px color-mix(in srgb, var(--ann-c) 70%, transparent))
    drop-shadow(0 0 14px color-mix(in srgb, var(--ann-c) 35%, transparent));
}

/* ── Save status toast ─────────────────────────────────────────
   Bottom-center, auto-dismissing. Brief honey-colored "Saved" pill
   on success; persistent ember-tinted error pill if save fails so
   the user is never wondering whether their note actually saved. */
.ann-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  padding: 9px 18px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #F5EBD3;
  background: #1F1812;
  box-shadow:
    0 8px 22px -6px rgba(0,0,0,.35),
    0 18px 36px -16px rgba(0,0,0,.28);
  pointer-events: none;
  opacity: 0;
  z-index: 9998;
  transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.ann-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ann-toast[data-kind="ok"] {
  background: #4F7A4A;
  color: #FFF;
}
.ann-toast[data-kind="error"] {
  background: #A85B47;
  color: #FFF;
  font-size: .8rem;
  max-width: 80vw;
  line-height: 1.3;
}

/* Drop-target visualiser. */
.is-ann-droptarget {
  outline: 2px dashed var(--paper-honey, #B57A2E);
  outline-offset: 4px;
  border-radius: 4px;
  background-color: rgba(245, 216, 95, .08) !important;
}
body.is-ann-dragging,
body.is-ann-dragging * { cursor: grabbing !important; }
body.is-ann-dragging .ann-dispenser { opacity: .65; }
body.is-ann-dragging .ann-picker { opacity: 0; pointer-events: none; }

/* ── Responsive ─────────────────────────────────────────────────
   On narrow viewports the side rail and dispenser collapse to thin
   bars — the lesson body is too narrow to support side annotations.
   Notes still place in-flow above their anchor block on mobile. */
@media (max-width: 1180px) {
  .ann-rail {
    top: 80px;
    width: 200px;
  }
}
@media (max-width: 980px) {
  .ann-rail {
    width: 56px;
  }
  .ann-rail .ann-rail-eyebrow,
  .ann-rail .ann-rail-count,
  .ann-rail .ann-rail-list,
  .ann-rail .ann-rail-empty { display: none; }
  .ann-rail-head {
    justify-content: center;
    padding: 12px 6px;
  }
  .ann-rail-collapse svg { transform: rotate(180deg); }
}
@media (max-width: 720px) {
  /* Mobile: notes render inline below their block instead of in the
     right margin. Spine becomes a hair-thin bar at the very right edge.
     The dispenser shrinks to a small chip in the bottom-right. */
  .ann-overlay-notes {
    position: static;
    width: 100%;
    height: auto;
  }
  .ann-note {
    position: relative;
    right: auto;
    width: 100%;
    max-width: 100%;
    margin: 12px 0;
  }
  .ann-spine {
    right: -10px;
    width: 6px;
  }
  .ann-rail {
    display: none; /* mobile uses the spine + dispenser only */
  }
  .ann-dispenser {
    top: auto;
    bottom: 16px;
    right: 12px;
    transform: none;
    width: 70px;
    padding: 12px 8px 14px;
    gap: 10px;
  }
  .ann-disp-tab { width: 44px; height: 20px; }
  .ann-disp-tab:hover { height: 24px; }
  .ann-disp-tab-hl { height: 10px; }
  .ann-disp-tab-hl:hover { height: 12px; }
  .ann-disp-stack-head { padding-bottom: 5px; margin-bottom: 6px; }
  .ann-disp-stack-label { font-size: 0.5rem; }
}