/* ============================================================================
   components/annotations.css  --  notes on the page: for readers, and for you

     Author notes     .draft-note .todo .verify .cite-needed   (block or span)
                      Removed from the page unless the site is rendered with
                      COURSE_DRAFT=1 (or `course-draft: true`), so they can never
                      reach students by accident.
     Reader notes     .aside        an aside set off from the text
                      .gloss        an inline term with a hover explanation
                      .hl           highlighted text
     Figures          .figure-frame     a captioned figure with a source line
                      .annotated        an image with numbered pins and a key
   ==========================================================================*/

/* ------------------------------------------------------- author notes */

.course-draft {
    --role: var(--course-draft);
}

div.course-draft {
    margin: 1.2rem 0;
    padding: 0.6rem 1rem;
    border: 1px dashed var(--role);
    border-radius: var(--course-radius);
    background: color-mix(in srgb, var(--role) 6%, var(--course-paper));
}

div.course-draft[data-label]::before {
    content: attr(data-label);
    display: block;
    font-variant: small-caps;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--role);
}

div.course-draft> :last-child {
    margin-bottom: 0;
}

span.course-draft {
    background: color-mix(in srgb, var(--role) 18%, transparent);
    border-bottom: 1px dashed var(--role);
}

span.course-draft::before {
    content: attr(data-label) ": ";
    font-size: 0.75em;
    font-variant: small-caps;
    font-weight: 700;
    color: var(--role);
}

/* ------------------------------------------------------- reader notes */

.aside {
    margin: 1.2rem 0;
    padding: 0.2rem 0 0.2rem 1rem;
    border-left: 2px solid var(--course-rule);
    color: var(--course-muted);
    font-size: 0.95rem;
}

.aside> :first-child {
    margin-top: 0;
}

.aside> :last-child {
    margin-bottom: 0;
}

/* [BWT]{.gloss tip="Burrows-Wheeler transform"} */
.gloss {
    position: relative;
    border-bottom: 1px dotted var(--course-muted);
    cursor: help;
}

.gloss[tip]:is(:hover, :focus)::after {
    content: attr(tip);
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.35rem);
    z-index: 20;
    width: max-content;
    max-width: min(22rem, 80vw);
    padding: 0.4rem 0.7rem;
    border-radius: var(--course-radius);
    background: var(--course-ink);
    color: var(--course-paper);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.hl {
    background: color-mix(in srgb, var(--viz-7) 45%, transparent);
    padding: 0 0.15em;
    border-radius: 2px;
}

/* --------------------------------------------------------- figures */

/* a figure with a header line and a source line:
     ::: {.figure-frame}
     ![](img/x.png){fig-alt="..."}
     ::: source
     Data: ...
     :::
     :::                                                          */
.figure-frame {
    margin: 1.6rem 0;
    padding: 0.8rem 1rem;
    border: 1px solid var(--course-rule);
    border-radius: var(--course-radius);
    background: var(--course-paper);
}

.figure-frame> :first-child {
    margin-top: 0;
}

.figure-frame> :last-child {
    margin-bottom: 0;
}

.figure-frame .source {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--course-muted);
}

.figure-frame .source p {
    margin: 0;
}

/* an image with numbered pins. Put the key after the div, as an ordered list:
     ::: {.annotated}
     ![](img/x.png){fig-alt="..."}
     [1]{.pin style="--x: 32%; --y: 40%"} [2]{.pin style="--x: 70%; --y: 65%"}
     :::

     1. what pin 1 marks
     2. what pin 2 marks
   --x and --y are the pin's position as a percentage of the image. Leave the image
   without a caption: the pins are measured against the whole block.          */
.annotated {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 1.6rem auto;
}

.annotated figure,
.annotated p {
    margin: 0;
}

.annotated img {
    display: block;
    max-width: 100%;
    height: auto;
}

.annotated .pin {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    transform: translate(-50%, -50%);
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--course-paper);
    background: var(--viz-2);
    border: 2px solid var(--course-paper);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.annotated+ol {
    font-size: 0.92rem;
    color: var(--course-muted);
}