/* ---------- lesson annotations (js/23-annotations.js) ----------
   Markup over the lesson reader, in the order it stacks inside #lessonPanel:
   the lesson text (with <mark class="ann-hl"> highlights woven into it), the
   .ann-margin sheet right of the column, the .ann-ink SVG (pen and highlighter strokes), the .ann-capture sheet that takes
   the pointer while a drawing tool is on, the .ann-pins (sticky notes), and the
   sticky .ann-dock toolbar on top. The popover (.ann-pop) and the selection
   chip (.ann-chip) live on <body> because they are position: fixed.
   On phones the dock moves to the floor above the tab bar and the popover
   becomes a bottom sheet, the same as every other dialog. */

.lesson-panel {
    position: relative;
}

/* tall enough for the toolbar to cover it exactly, so entering the mode moves nothing */
.lesson-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    margin-bottom: 12px;
}

.lesson-topline .back-link {
    margin-bottom: 0;
    white-space: nowrap;
}

.lesson-actions .btn {
    white-space: nowrap;
}

/* phones: "← Back" alone, so the row keeps to one line */
@media (max-width: 560px) {
    .back-link-more {
        display: none;
    }
}

/* the narrowest: tighter buttons, so Back, Ask AI and Annotate share one row down to 320px */
@media (max-width: 400px) {
    .lesson-topline {
        gap: 8px;
    }

    .lesson-actions {
        gap: 6px;
    }

    .lesson-actions .ann-toggle {
        padding-inline: 10px;
        gap: 6px;
    }
}

.ann-toggle .ic {
    margin-right: -2px;
}

.ann-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--accent-ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: .66rem;
    line-height: 20px;
    text-align: center;
}

.lesson-panel[data-ann="on"] .lesson-topline {
    visibility: hidden;
}

/* ---------- toolbar ----------
   A zero-height sticky strip: the bar hangs out of it over the back-link row,
   so it takes no room in the flow and the lesson never jumps under it. */
.ann-dock {
    position: sticky;
    top: 80px;
    z-index: 8;
    height: 0;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 10px;
}

.ann-dock[hidden] {
    display: none;
}

/* paper behind the gap between the header and the stuck bar, so the lesson does not peek
   through it; the header (z-index 40) hides whatever runs up past it */
.ann-dock::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 700px;
    height: 16px;
    background: var(--bg);
    pointer-events: none;
}

.ann-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    padding: 6px;
    background: var(--bg-raised);
    border: 1.5px solid var(--text);
    border-radius: 3px;
    box-shadow: var(--shadow);
}

.ann-group {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    border-left: 1.5px dashed var(--border-strong);
}

.ann-group:first-child {
    padding-left: 0;
    border-left: none;
}

.ann-style:empty {
    display: none;
}

.ann-btn {
    position: relative;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1.5px solid transparent;
    border-radius: 2px;
    color: var(--text);
    cursor: pointer;
}

/* hover only where there is one: a tapped button keeps :hover on touch and would hide the pressed state */
@media (hover: hover) {
    .ann-btn:hover:not(:disabled):not([aria-pressed="true"]) {
        background: var(--bg-sunken);
    }
}

.ann-btn[aria-pressed="true"] {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
}

.ann-btn:disabled {
    opacity: .35;
    cursor: default;
}

/* the colored bar under the highlight and highlighter icons shows the live color */
.ann-ic-bar {
    stroke: var(--ann-tool-c, var(--hl-yellow));
}

.ann-btn[aria-pressed="true"] .ann-ic-bar {
    stroke: var(--ann-tool-c, var(--hl-yellow));
    opacity: 1;
}

.ann-eye-slash {
    display: none;
}

.ann-btn[aria-pressed="true"] .ann-eye-slash {
    display: inline;
}

.ann-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--accent-ink);
    font-family: 'IBM Plex Mono', monospace;
    font-size: .58rem;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}

.ann-badge[hidden],
.ann-count[hidden] {
    display: none;
}

.ann-swatch {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 1.5px solid transparent;
    border-radius: 50%;
    cursor: pointer;
}

.ann-swatch::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.ann-swatch[aria-pressed="true"] {
    border-color: var(--text);
}

.ann-size {
    width: 34px;
}

.ann-size i {
    display: block;
    width: var(--d);
    height: var(--d);
    border-radius: 50%;
    background: currentColor;
}

.ann-done {
    margin-left: 4px;
    padding: 10px 16px;
}

.ann-hint {
    width: max-content;
    max-width: 100%;
    margin: 14px 0 0;
    padding: 3px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 2px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .66rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ann-hint:empty {
    display: none;
}

/* ---------- color keys ----------
   Stored as names, never hex, so a saved annotation follows the theme. */
[data-c="yellow"] { --c: var(--hl-yellow); }
[data-c="green"] { --c: var(--hl-green); }
[data-c="blue"] { --c: var(--hl-blue); }
[data-c="pink"] { --c: var(--hl-pink); }
[data-c="ink"] { --c: var(--text); }
[data-c="red"] { --c: var(--accent); }
[data-c="navy"] { --c: var(--ink-blue); }
[data-c="forest"] { --c: var(--success); }

/* ---------- text highlights ---------- */
mark.ann-hl {
    background: var(--c, var(--hl-yellow));
    color: inherit;
    border-radius: 2px;
    padding: .08em 0;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    cursor: pointer;
}

/* a highlight with a note gets a dot after its last segment */
mark.ann-hl.ann-note-end::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 2px;
    vertical-align: super;
    border-radius: 50%;
    background: var(--accent);
}

mark.ann-hl.ann-flash {
    animation: ann-flash 1.2s ease 2;
}

@keyframes ann-flash {
    50% {
        box-shadow: 0 0 0 3px var(--accent);
    }
}

/* ---------- ink, capture sheet, pins ---------- */
.ann-ink {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 3;
}

.ann-ink path {
    fill: none;
    stroke: var(--c);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ann-ink .ann-s-marker {
    mix-blend-mode: var(--hl-blend);
}

.ann-ink .ann-erasing {
    opacity: .2;
}

/* over the reading column and its margin (--ann-write-w, set by annLayoutMargin) */
.ann-capture {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--ann-write-w, 100%);
    z-index: 4;
    display: none;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.lesson-panel[data-ann="on"][data-ann-active="pen"] .ann-capture,
.lesson-panel[data-ann="on"][data-ann-active="marker"] .ann-capture,
.lesson-panel[data-ann="on"][data-ann-active="note"] .ann-capture,
.lesson-panel[data-ann="on"][data-ann-active="eraser"] .ann-capture {
    display: block;
}

/* a press in the margin beside the column must not start a text selection either */
.lesson-panel[data-ann="on"][data-ann-active="pen"],
.lesson-panel[data-ann="on"][data-ann-active="marker"],
.lesson-panel[data-ann="on"][data-ann-active="note"],
.lesson-panel[data-ann="on"][data-ann-active="eraser"] {
    -webkit-user-select: none;
    user-select: none;
}

.lesson-panel[data-ann-active="pen"] .ann-capture,
.lesson-panel[data-ann-active="marker"] .ann-capture {
    cursor: crosshair;
}

.lesson-panel[data-ann-active="note"] .ann-capture {
    cursor: copy;
}

.lesson-panel[data-ann-active="eraser"] .ann-capture {
    cursor: cell;
}

.ann-pins {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 5;
}

.ann-pin {
    position: absolute;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--gold-soft);
    border: 1.5px solid var(--gold);
    border-radius: 3px 3px 3px 12px;
    color: var(--gold);
    box-shadow: 0 6px 14px -8px rgba(28, 24, 16, .6);
    cursor: pointer;
}

.ann-pin:hover,
.ann-pin.ann-active {
    background: var(--gold);
    color: var(--bg);
}

.ann-pin.ann-empty {
    border-style: dashed;
}

.ann-pin.ann-flash {
    animation: ann-flash 1.2s ease 2;
}

/* pins step aside while a stroke tool owns the pointer, so ink can cross them */
.lesson-panel[data-ann="on"][data-ann-active="pen"] .ann-pin,
.lesson-panel[data-ann="on"][data-ann-active="marker"] .ann-pin,
.lesson-panel[data-ann="on"][data-ann-active="eraser"] .ann-pin {
    pointer-events: none;
}

.lesson-panel.ann-hidden .ann-ink,
.lesson-panel.ann-hidden .ann-pins {
    visibility: hidden;
}

.lesson-panel.ann-hidden mark.ann-hl {
    background: none;
    cursor: text;
}

.lesson-panel.ann-hidden mark.ann-hl::after {
    content: none;
}

/* ---------- margin (meeting notes, 2026-11-03, item 5) ----------
   A strip right of the column for notes and ink, 220-560px wide by the room there is
   (geometry in annMargin and annLayoutMargin).
   'inline': the panel has room, so it sits beside the text; its ruled edge shows only
   while the toolbar is out, and what is in it just floats there otherwise.
   'slide': no room, so it waits past the right edge on a paper sheet. The Notes tab or
   a sideways swipe slides the crumb, column and every layer over together, keeping each
   margin note level with its paragraph. The panel clips sideways (clip, not hidden, so
   it is no scroll container and the sticky toolbar still sticks). */
.ann-margin {
    position: absolute;
    z-index: 1;
    display: none;
    pointer-events: none;
    border-left: 1px dashed var(--border-strong);
}

.ann-margin-label {
    position: sticky;
    top: 92px;
    display: block;
    padding: 2px 0 0 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lesson-panel[data-ann="on"][data-ann-margin="inline"] .ann-margin,
.lesson-panel[data-ann-margin="slide"] .ann-margin {
    display: block;
}

.lesson-panel[data-ann-margin="slide"] .ann-margin {
    background: var(--bg-raised);
    border-left-style: solid;
    box-shadow: var(--shadow);
}

.lesson-panel[data-ann-margin="slide"] {
    overflow-x: clip;
}

.lesson-panel[data-ann-margin="slide"]>.lesson-crumb,
.lesson-panel[data-ann-margin="slide"]>.lesson-card,
.lesson-panel[data-ann-margin="slide"]>.ann-margin,
.lesson-panel[data-ann-margin="slide"]>.ann-ink,
.lesson-panel[data-ann-margin="slide"]>.ann-capture,
.lesson-panel[data-ann-margin="slide"]>.ann-pins {
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), opacity .3s;
}

/* the strip of text left showing fades back, so the cut-off words read as the page
   underneath (and a tap on it slides the text back: annBindSwipe) */
.lesson-panel[data-ann-slide="open"]>.lesson-crumb,
.lesson-panel[data-ann-slide="open"]>.lesson-card {
    opacity: .3;
    cursor: pointer;
}

.lesson-panel[data-ann-slide="open"]>.lesson-crumb,
.lesson-panel[data-ann-slide="open"]>.lesson-card,
.lesson-panel[data-ann-slide="open"]>.ann-margin,
.lesson-panel[data-ann-slide="open"]>.ann-ink,
.lesson-panel[data-ann-slide="open"]>.ann-capture,
.lesson-panel[data-ann-slide="open"]>.ann-pins {
    transform: translateX(calc(-1 * var(--ann-slide, 0px)));
}

/* the one-time hint that the page moves sideways */
.lesson-panel.ann-peek>.lesson-crumb,
.lesson-panel.ann-peek>.lesson-card,
.lesson-panel.ann-peek>.ann-margin,
.lesson-panel.ann-peek>.ann-ink,
.lesson-panel.ann-peek>.ann-pins {
    animation: ann-peek 1.2s ease-in-out;
}

@keyframes ann-peek {
    0%, 100% { transform: none; }
    35%, 60% { transform: translateX(-64px); }
}

/* a gold tick on the column's right edge wherever the hidden margin has something */
.ann-mtick {
    position: absolute;
    width: 4px;
    height: 18px;
    margin-left: -4px;
    border-radius: 2px 0 0 2px;
    background: var(--gold);
    pointer-events: none;
    display: none;
}

.lesson-panel[data-ann-margin="slide"]:not([data-ann-slide="open"]) .ann-mtick {
    display: block;
}

/* the Notes tab: a sticky-note colored bookmark on the right edge */
.ann-mtab {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 30;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 34px;
    padding: 10px 6px 12px;
    border: 1.5px solid var(--gold);
    border-right: none;
    border-radius: 6px 0 0 6px;
    background: var(--gold-soft);
    color: var(--gold);
    box-shadow: var(--shadow);
    font-family: 'IBM Plex Mono', monospace;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.ann-mtab[hidden] {
    display: none;
}

.ann-mtab:hover,
.ann-mtab[aria-expanded="true"] {
    background: var(--gold);
    color: var(--bg);
}

.ann-mtab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ann-mtab-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.ann-mtab-n {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--gold);
    color: var(--bg);
    line-height: 18px;
    text-align: center;
    letter-spacing: 0;
}

.ann-mtab:hover .ann-mtab-n {
    background: var(--bg);
    color: var(--gold);
}

.lesson-panel.ann-peek .ann-mtab {
    animation: ann-tab-nudge 1.2s ease-in-out;
}

@keyframes ann-tab-nudge {
    0%, 100% { transform: translateY(-50%); }
    35%, 60% { transform: translateY(-50%) translateX(-6px); }
}

/* phone: a slimmer ribbon so it covers less of the line ends; the invisible
   ::before keeps the press target 44px wide */
@media (max-width: 720px) {
    .ann-mtab {
        min-width: 24px;
        padding: 9px 3px 10px;
        gap: 5px;
        top: 46%;
    }

    .ann-mtab::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 44px;
    }

    .ann-mtab .ic {
        width: 12px;
        height: 12px;
    }

    .ann-mtab-n {
        min-width: 16px;
        height: 16px;
        line-height: 16px;
        padding: 0 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lesson-panel[data-ann-margin="slide"]>* {
        transition: none !important;
    }
}

/* while a tool is drawing, the reading text should not get selected */
.lesson-panel[data-ann="on"][data-ann-active="highlight"] .lesson-body {
    cursor: text;
}

/* ---------- selection chip ---------- */
.ann-chip {
    position: fixed;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: var(--text);
    border-radius: 3px;
    box-shadow: var(--shadow);
}

.ann-chip[hidden] {
    display: none;
}

.ann-chip .ann-swatch[aria-pressed] {
    border-color: transparent;
}

.ann-chip .ann-swatch::before {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.ann-chip-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px 0 8px;
    margin-left: 2px;
    background: none;
    border: none;
    border-left: 1px solid var(--text-muted);
    color: var(--bg);
    font-family: 'IBM Plex Mono', monospace;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
}

/* ---------- popover: highlight / note editor and the annotations list ---------- */
.ann-pop {
    position: fixed;
    z-index: 60;
    width: 320px;
    max-width: calc(100vw - 24px);
    max-height: min(480px, calc(100vh - 100px));
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1.5px solid var(--text);
    border-radius: 3px;
    box-shadow: var(--shadow);
}

.ann-pop[hidden] {
    display: none;
}

.ann-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 10px 14px;
    border-bottom: 1.5px dashed var(--border-strong);
}

.ann-pop-head .eyebrow {
    margin: 0;
}

.ann-pop-x {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
}

.ann-pop-x:hover {
    color: var(--text);
}

.ann-pop-body {
    padding: 12px 14px;
    overflow-y: auto;
}

.ann-quote {
    margin: 0 0 10px;
    padding: 6px 10px;
    border-left: 3px solid var(--c, var(--hl-yellow));
    background: var(--bg-raised);
    font-size: .86rem;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ann-pop-swatches {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.ann-pop textarea {
    width: 100%;
    min-height: 92px;
    resize: vertical;
    padding: 10px;
    background: var(--bg-raised);
    border: 1.5px solid var(--border-strong);
    border-radius: 2px;
    color: var(--text);
    font: inherit;
    font-size: .92rem;
    line-height: 1.45;
}

.ann-pop textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.ann-pop-meta {
    margin: 6px 0 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .64rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ann-pop-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
}

.ann-link-danger {
    background: none;
    border: none;
    padding: 6px 0;
    color: var(--danger);
    font-weight: 700;
    font-size: .8rem;
    cursor: pointer;
}

.ann-link-danger:hover {
    text-decoration: underline;
}

/* list */
.ann-list-sec + .ann-list-sec {
    margin-top: 14px;
}

.ann-list-sec h4 {
    margin: 0 0 6px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ann-item {
    display: block;
    width: 100%;
    margin: 0 0 6px;
    padding: 8px 10px;
    background: var(--bg-raised);
    border: 1px solid var(--border);
    border-left: 4px solid var(--c, var(--gold));
    border-radius: 2px;
    color: var(--text);
    font: inherit;
    font-size: .86rem;
    text-align: left;
    cursor: pointer;
}

.ann-item:hover {
    border-color: var(--border-strong);
}

.ann-item q {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    quotes: "\201C" "\201D";
}

.ann-item small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: .8rem;
}

.ann-item.ann-orphan {
    opacity: .6;
    cursor: default;
}

.ann-list-empty {
    margin: 4px 0;
    color: var(--text-muted);
    font-size: .88rem;
}

.ann-list-ink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: .86rem;
}

/* deleting: a trash button on every row, "Delete all" on every section */
.ann-sec-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.ann-sec-head h4 {
    flex: 1;
    margin: 0;
}

.ann-sec-head .ann-link-danger {
    padding: 4px 0;
    font-size: .74rem;
}

.ann-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin-bottom: 6px;
}

.ann-row .ann-item {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.ann-lesson-item strong {
    display: block;
    font-size: .88rem;
}

div.ann-lesson-item {
    cursor: default;
}

.ann-del {
    flex: none;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text-muted);
    cursor: pointer;
}

.ann-del[data-armed] {
    width: auto;
    padding: 0 8px;
    border-color: var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: .72rem;
    font-weight: 700;
}

@media (hover: hover) {
    .ann-del:hover {
        border-color: var(--danger);
        color: var(--danger);
    }
}

.ann-list-tip {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: .78rem;
}

.ann-link {
    background: none;
    border: none;
    padding: 6px 0;
    color: var(--accent);
    font-weight: 700;
    font-size: .8rem;
    cursor: pointer;
}

.ann-link:hover {
    text-decoration: underline;
}

.ann-pop-back {
    width: 26px;
    height: 26px;
    margin: -4px 4px -4px -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
}

/* undo toast after a delete */
.ann-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 61;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: calc(100vw - 32px);
    padding: 10px 12px 10px 16px;
    background: var(--text);
    color: var(--bg);
    border-radius: 3px;
    box-shadow: var(--shadow);
    font-size: .88rem;
    animation: ann-toast-in .2s ease-out;
}

@keyframes ann-toast-in {
    from {
        opacity: 0;
        transform: translate(-50%, 8px);
    }
}

.ann-toast[hidden] {
    display: none;
}

.ann-toast span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ann-toast-undo {
    flex: none;
    min-height: 32px;
    padding: 0 10px;
    background: none;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* ---------- touch: bigger targets ---------- */
@media (hover: none) and (pointer: coarse) {
    .ann-btn {
        width: 44px;
        height: 44px;
    }

    .ann-swatch {
        width: 36px;
        height: 36px;
    }

    .ann-swatch::before {
        width: 22px;
        height: 22px;
    }

    .ann-chip-btn {
        height: 36px;
    }

    .ann-del {
        width: 44px;
    }

    .ann-sec-head .ann-link-danger,
    .ann-link,
    .ann-toast-undo {
        min-height: 40px;
    }
}

/* ---------- tablet: the header is shorter ---------- */
@media (max-width: 900px) {
    .ann-dock {
        top: 76px;
    }
}

/* ---------- phone: dock on the floor, popover as a bottom sheet ---------- */
@media (max-width: 720px) {
    .lesson-topline {
        min-height: 44px;
        margin-bottom: 10px;
    }

    /* the dock is on the floor here, so the back link can stay */
    .lesson-panel[data-ann="on"] .lesson-topline {
        visibility: visible;
    }

    .lesson-panel[data-ann="on"] .ann-toggle {
        visibility: hidden;
    }

    .lesson-panel[data-ann="on"] {
        padding-bottom: 170px;
    }

    .ann-dock::before {
        content: none;
    }

    .ann-dock {
        position: fixed;
        left: 0;
        right: 0;
        top: auto;
        bottom: calc(var(--tabbar-h) + var(--safe-b));
        z-index: 44;
        height: auto;
        gap: 0;
        margin: 0;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        pointer-events: none;
    }

    /* two rows, nothing scrolled out of sight:
       tools ............ Done
       colors  size       undo redo  hide list */
    .ann-bar {
        pointer-events: auto;
        width: 100%;
        flex-wrap: wrap;
        gap: 0;
        padding: 6px 8px 4px;
        border-width: 1.5px 0 0;
        border-radius: 0;
        box-shadow: 0 -12px 30px -22px rgba(28, 24, 16, .55);
    }

    /* the line break between the rows */
    .ann-bar::after {
        content: "";
        order: 3;
        flex-basis: 100%;
        height: 0;
    }

    .ann-group {
        flex: none;
        padding: 0;
        border-left: none;
    }

    .ann-tools {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        justify-content: space-between;
    }

    .ann-done {
        order: 2;
        flex: none;
        margin-left: 10px;
        padding: 10px 14px;
    }

    .ann-style {
        order: 4;
        margin-top: 4px;
    }

    .ann-history {
        order: 5;
        margin: 4px 0 0 auto;
    }

    .ann-view {
        order: 6;
        margin-top: 4px;
        padding-left: 6px;
        border-left: 1.5px dashed var(--border-strong);
    }

    .ann-hint {
        margin: 0 0 8px;
        max-width: calc(100% - 32px);
        box-shadow: var(--shadow);
    }

    .ann-pop {
        left: 0 !important;
        right: 0;
        top: auto !important;
        bottom: 0;
        width: auto;
        max-width: none;
        max-height: 80dvh;
        border-width: 1.5px 0 0;
        border-radius: 12px 12px 0 0;
        padding-bottom: var(--safe-b);
        animation: sheet-up .24s cubic-bezier(.2, .8, .2, 1);
    }

    .ann-pop-foot .btn {
        min-height: 44px;
    }

    .ann-pop textarea {
        font-size: 16px;
    }
}

/* small phones: the second row is the widest, so it gives a little */
@media (max-width: 400px) {
    .ann-bar {
        padding-left: 6px;
        padding-right: 6px;
    }

    .ann-style .ann-swatch {
        width: 30px;
        height: 32px;
    }

    .ann-style .ann-swatch::before {
        width: 20px;
        height: 20px;
    }

    .ann-history .ann-btn,
    .ann-view .ann-btn {
        width: 38px;
    }

    .ann-style .ann-btn {
        width: 36px;
    }

    .ann-view {
        padding-left: 4px;
    }
}

/* ---------- floating Annotate button (meeting notes, 2026-11-03, item 3) ----------
   The top-bar Annotate scrolls away with a long lesson; this one floats bottom-right
   while a lesson is open, so markup is one tap away at any depth. It lives inside
   .lesson-panel, so it is gone whenever the reader is. It steps aside while the mode
   is on (the toolbar has Done) and while the AI tutor is open in the same corner. */
.ann-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 18px 0 15px;
    border: 1.5px solid var(--text);
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: var(--shadow);
    font-family: 'IBM Plex Mono', monospace;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
}

.ann-fab:hover {
    transform: translateY(-2px);
}

.ann-fab:active {
    transform: translateY(0);
}

.ann-fab:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: 3px;
}

.ann-fab .ann-count {
    background: var(--accent-ink);
    color: var(--accent);
}

/* room under the last line, so the button never covers the quiz call to action */
.lesson-panel:not([data-ann="on"]) {
    padding-bottom: 72px;
}

.lesson-panel[data-ann="on"] .ann-fab,
.lesson-panel:has(#aiToggleBtn[aria-expanded="true"]) .ann-fab {
    display: none;
}

/* phone: an icon-only round button above the bottom tab bar */
@media (max-width: 720px) {
    .ann-fab {
        right: 16px;
        bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
        width: 52px;
        height: 52px;
        padding: 0;
        justify-content: center;
    }

    .ann-fab-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .ann-fab .ann-count {
        position: absolute;
        top: -6px;
        right: -6px;
    }
}