/* ============================================================================
   gc-annotate.css — full-workspace student scratch/annotation layer
   Pairs with gc-annotate.js. Styled through the shared design tokens
   (gc-tokens.css) so it is light/dark correct with zero extra work.
   ========================================================================== */

/* The drawing surface: fixed, covers the viewport, glued to page scroll by JS.
   pointer-events toggles per tool — 'answer' mode is fully click-through so it
   never intercepts answer selection. */
.gc-annot-canvas{
  position:fixed; inset:0; z-index:9998;
  pointer-events:none;            /* JS flips to auto only for drawing tools */
  touch-action:auto;              /* JS sets 'none' while a pen tool is active */
}
.gc-annot-canvas.gc-draw{ cursor:crosshair; }
.gc-annot-canvas.gc-select{ cursor:default; }

/* Focus / distraction-free backdrop */
.gc-annot-scrim{
  position:fixed; inset:0; z-index:9997; pointer-events:none;
  background:var(--blush,#f3e7f3); opacity:0; transition:opacity .25s ease;
}
body.gc-annot-focus .gc-annot-scrim{ opacity:.96; pointer-events:auto; }

/* ---- Toolbar --------------------------------------------------------------*/
.gc-annot-bar{
  position:fixed; z-index:10000; left:50%; top:14px; transform:translateX(-50%);
  display:flex; align-items:center; gap:.25rem; flex-wrap:wrap; justify-content:center;
  max-width:min(96vw,860px); padding:.4rem .5rem;
  background:var(--white,#fff); border:1px solid var(--line,rgba(218,181,213,.4));
  border-radius:16px; box-shadow:0 10px 34px rgba(160,80,159,.18);
  font:600 .8rem/1 'Montserrat',system-ui,sans-serif; color:var(--text,#2e1a2e);
  user-select:none;
}
.gc-annot-bar.gc-collapsed .gc-annot-group,
.gc-annot-bar.gc-collapsed .gc-annot-sep{ display:none; }

.gc-annot-group{ display:flex; align-items:center; gap:.15rem; }
.gc-annot-sep{ width:1px; align-self:stretch; margin:.15rem .3rem; background:var(--line,rgba(218,181,213,.4)); }

.gc-annot-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border:1px solid transparent; border-radius:10px;
  background:transparent; color:var(--muted,#8a6a88); cursor:pointer;
  transition:background .14s ease,color .14s ease,border-color .14s ease;
}
.gc-annot-btn svg{ width:19px; height:19px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.gc-annot-btn:hover{ background:var(--blush,#f3e7f3); color:var(--purple,#a0509f); }
.gc-annot-btn.gc-on{ background:var(--purple,#a0509f); color:#fff; border-color:transparent; }
:root[data-theme="dark"] .gc-annot-btn.gc-on{ color:#241127; }
.gc-annot-btn:disabled{ opacity:.4; cursor:default; }
.gc-annot-btn:focus-visible{ outline:2px solid var(--purple,#a0509f); outline-offset:2px; }

/* colour + size controls */
.gc-annot-color{
  width:24px; height:24px; border-radius:50%; border:2px solid var(--white,#fff);
  box-shadow:0 0 0 1px var(--line,rgba(218,181,213,.4)); cursor:pointer; padding:0;
}
.gc-annot-color.gc-on{ box-shadow:0 0 0 2px var(--purple,#a0509f); transform:scale(1.08); }
.gc-annot-sizes{ display:flex; align-items:center; gap:.2rem; }
.gc-annot-size{ width:28px; height:28px; border:1px solid transparent; border-radius:8px;
  background:transparent; cursor:pointer; display:grid; place-items:center; }
.gc-annot-size:hover{ background:var(--blush,#f3e7f3); }
.gc-annot-size.gc-on{ background:var(--blush,#f3e7f3); border-color:var(--lavender,#dab5d5); }
.gc-annot-size i{ display:block; border-radius:50%; background:var(--text,#2e1a2e); }

/* status pill (autosave) */
.gc-annot-status{ font-size:.68rem; font-weight:600; color:var(--muted,#8a6a88);
  padding:0 .3rem; min-width:44px; text-align:center; }

/* toggle handle to reopen a hidden bar */
.gc-annot-handle{        /* sits left of the theme toggle so they don't overlap */
  position:fixed; z-index:10000; top:14px; right:64px; width:40px; height:40px;
  display:none; align-items:center; justify-content:center;
  background:var(--white,#fff); color:var(--purple,#a0509f);
  border:1px solid var(--line,rgba(218,181,213,.4)); border-radius:100px;
  box-shadow:0 6px 20px rgba(160,80,159,.18); cursor:pointer;
}
.gc-annot-handle svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
body.gc-annot-hidden .gc-annot-bar{ display:none; }
body.gc-annot-hidden .gc-annot-handle{ display:flex; }

/* ---- Inline text / sticky editors ----------------------------------------*/
.gc-annot-editor{
  position:fixed; z-index:10001; min-width:120px; max-width:360px;
  padding:.4rem .55rem; border-radius:10px; font:400 1rem/1.35 'Montserrat',system-ui,sans-serif;
  border:1.5px solid var(--purple,#a0509f); background:var(--white,#fff); color:var(--text,#2e1a2e);
  box-shadow:0 8px 28px rgba(160,80,159,.2); resize:none; overflow:hidden;
}
.gc-annot-editor.gc-sticky{ background:#fff6b8; color:#3a2f00; border-color:#e6c84e; }
:root[data-theme="dark"] .gc-annot-editor.gc-sticky{ background:#4a4110; color:#fbeec0; border-color:#7a6a1e; }

@media (max-width:640px){
  .gc-annot-bar{ top:auto; bottom:12px; gap:.15rem; padding:.35rem .4rem; }
  .gc-annot-btn{ width:32px; height:32px; }
}
@media (prefers-reduced-motion:reduce){
  .gc-annot-scrim,.gc-annot-btn,.gc-annot-color{ transition:none; }
}