/* static/shared/mark_bubbles.css — the comment bubbles both grade viewers
 * draw beside their marks (static/core/mark_bubbles.js, GRADE-FLOAT #855).
 *
 * Loaded by templates/index.html and templates/student.html after each page's
 * own sheet. Colours come from the page's own tokens (--surface, --text,
 * --text-dim, --border, --focus and the side colours), so a bubble follows the
 * instructor's themes and the student page's dark palette alike. The side is
 * said in words in the bubble's head; its colour stripe is never the only cue.
 * Text is a fixed readable size: it does not grow or shrink with the page zoom.
 */

/* The page's marks, bubbles and lines take pointer events even when the layer
   they sit on lets clicks through to the page. */
.mb-mark, .mb-bubble { pointer-events: auto; }
.mb-mark { min-width: 24px; min-height: 24px; }
/* A mark whose bubble found no free spot and opens only from it: a ring, not
   a colour, says it has a comment to open. The ring sits on the paper, which
   is light in every theme, so it is near-black (18:1 on white, 1.4.11). */
.mb-mark.mb-crowded { outline: 2px dashed #111111; outline-offset: 2px; }
/* Keyboard focus on any mark, ringed or not: solid and further out, in two
   tones (near-black against the paper, the focus colour inside it), so it is
   seen on the paper and is never mistaken for the dashed ring (2.4.7,
   2.4.11). Later and more specific than the ring, so it wins. */
.mb-mark:focus-visible,
.mb-mark.mb-crowded:focus-visible {
  outline: 3px solid #111111;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--focus, #FFCD00), 0 0 0 4px #111111;
}

.mb-leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 14;
}
/* Drawn over the paper, which is light in every theme: a dark line. */
.mb-leaders line {
  stroke: rgba(17, 17, 17, 0.75);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

/* A shown bubble paints above every mark, a hovered pin included (the
   student's pins are 20, 30 hovered): default placement keeps it clear of
   them, and one the reader opens or moves over a mark is never covered. */
.mb-bubble {
  position: absolute;
  z-index: 35;
  display: flex;
  flex-direction: column;
  /* Sized by its text alone, wherever it sits, so the same comment measures
     the same in both viewers and the layout is the same. */
  width: max-content;
  max-width: min(16rem, calc(100% - 4px));
  padding: 4px 8px 6px;
  border: 1px solid var(--border, #6e7280);
  border-left-width: 4px;
  border-radius: 6px;
  background: var(--surface, #1a1b1f);
  color: var(--text, #f2eddc);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  font-family: var(--font, system-ui, sans-serif);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: opacity 0.12s;
}
.mb-bubble.mb-hidden { visibility: hidden; opacity: 0; }
.mb-deduction     { border-left-color: var(--red, #e25a4d); }
.mb-positive      { border-left-color: var(--green, #4ac68e); }
.mb-informational { border-left-color: var(--yellow, #e89b2b); }

.mb-head { font-weight: 700; }
/* A long comment scrolls inside its bubble, so a bubble stays on the page. */
.mb-body { max-height: 10rem; min-height: 0; overflow-y: auto; }
/* A crowded bubble its mark opened sits above every other bubble. */
.mb-bubble.mb-raised { z-index: 45; }
.mb-line, .mb-where { color: var(--text-dim, #a49f91); }
.mb-where { font-style: italic; }

/* Editable (the instructor's Grade view): drag the bubble, or Tab to it and
   move it by keys (the host's). The moving state is a dashed outline, not a
   colour; keyboard focus is the marks' solid two-tone ring (2.4.7, 2.4.11). */
.mb-editable { cursor: grab; touch-action: none; user-select: none; }
.mb-editable:focus-visible {
  outline: 3px solid #111111;
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--focus, #FFCD00), 0 0 0 4px #111111;
}
.mb-bubble.mb-moving { outline: 2px dashed var(--focus, #FFCD00); outline-offset: 2px; cursor: grabbing; }
/* The host's slots (mark_bubbles.js `decorate`): a row of controls and a
   footer. Empty, they take no room. */
.mb-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mb-foot { margin-top: 4px; }
.mb-acts:empty, .mb-foot:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mb-bubble { transition: none; }
}