/**
 * FAME annotator — shared by the ebook reader and the question-explanation view.
 * Loaded alongside fame-annotate.js. Cascades AFTER fame-ebook-reader.css, so the
 * `body.fame-annot` overrides below win without !important.
 *
 * Tokens (--line, --panel, --ink, --brand) come from the host page's :root.
 * Fallbacks are supplied so the quiz surface, which does not define the reader's
 * palette, still renders correctly.
 */

/* ---------------------------------------------------------------- the rail */

/* OFF BY DEFAULT. The rail is hidden in CSS rather than by a class the script
   adds later, so it never flashes on screen before fame-annotate.js has read the
   student's preference — and a page with the script blocked shows no rail at all
   rather than a dead one. JS opts in by putting `fame-annot-on` on the body. */
.rail { display: none; }
body.fame-annot-on .rail { display: flex; }

.rail {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 25;
    background: var(--panel, #fff);
    border: 1px solid var(--line, #ecedf1);
    border-radius: 12px;
    padding: 5px;
    flex-direction: column;
    gap: 3px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
    /* NO overflow here. Any overflow value other than `visible` establishes a
       clipping context, which would trap the absolutely-positioned options
       flyout inside the rail and turn it into a scrollbar instead of letting it
       float out to the side. The rail is only ~300px of buttons, so it does not
       need to scroll; on short screens it simply extends past the stage, and
       below 980px it becomes a horizontal bar anyway. */
    overflow: visible;
}

.rail button {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ink-2, #45536b);
    cursor: pointer;
    padding: 0;
}

/* Colour swatches are excluded from both: their background IS their meaning, so
   a hover tint or the pressed highlight would hide the colour they represent.
   Selection is shown on a swatch by its border instead (see .rail__opts below). */
.rail button:hover:not(:disabled):not([data-annot-color]) { background: var(--bg, #f4f6fa); color: var(--ink, #101a33); }
.rail button[aria-pressed="true"]:not([data-annot-color]) { background: var(--brand-soft, #eef1ff); color: var(--brand, #3257ff); }
.rail button:disabled { opacity: .35; cursor: default; }
.rail button:focus-visible { outline: 2px solid var(--brand, #3257ff); outline-offset: 1px; }

.rail hr { width: 22px; height: 1px; border: 0; background: var(--line, #ecedf1); margin: 3px auto; }

/* Drag handle. A dedicated grip rather than dragging the rail's background:
   the rail is almost entirely buttons, so anything else would make a mis-drag
   fire a tool. Pointer-only by nature, hence role="presentation". */
.rail__grip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    margin: -1px 0 2px;
    color: var(--ink-3, #7b8798);
    cursor: grab;
    touch-action: none;          /* claim the gesture; never scroll while dragging */
    border-radius: 6px;
}

.rail__grip:hover { background: var(--bg, #f4f6fa); color: var(--ink-2, #45536b); }
.rail__grip svg { width: 16px; height: 16px; fill: currentColor; }
.rail.is-dragging { cursor: grabbing; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.rail.is-dragging .rail__grip { cursor: grabbing; }
/* A parked rail floats above everything, including the sidebar drawer. */
.rail.is-moved { z-index: 40; }

/* The supplied markup's SVGs carry no fill/stroke attributes of their own. */
.rail .i {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Quiz explanations: the same VERTICAL rail as the reader's, pinned to the
   right-hand edge of the explanation panel. There is no .stage to anchor to
   here, so the explanation container is the positioning context. */
.fame-quiz-explanation-con { position: relative; }

.rail--inline {
    position: absolute;
    left: auto;
    right: 10px;
    top: 14px;
    transform: none;
    flex-direction: column;
    overflow: visible;
}

/* Keep the rail off the text. Only while it is actually shown, so an
   explanation reads full-width for anyone with the tools switched off. */
body.fame-annot-on .fame-quiz-explanation-con { padding-right: 62px; }

/* It sits at the right edge, so the options flyout has to open LEFT — opening
   right would push it off the page. */
.rail--inline .rail__opts { left: auto; right: calc(100% + 8px); top: 0; }

/* The `hidden` ATTRIBUTE is only `display:none` from the UA stylesheet, so the
   `display:flex` below would beat it and the flyout would always be on screen.
   Scoped to this component rather than a blanket [hidden] rule, which would
   reach every other hidden element on the quiz page. */
.rail__opts[hidden] { display: none; }

/* Colour + width flyout, shown only for tools that have options. */
.rail__opts {
    position: absolute;
    left: calc(100% + 8px);
    top: 8px;
    background: var(--panel, #fff);
    border: 1px solid var(--line, #ecedf1);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rail__row { display: flex; gap: 5px; }
/* Same trap as .rail__opts: display:flex would beat the `hidden` attribute. */
.rail__row[hidden] { display: none; }

/* Shape picker (box / circle / arrow / line) — icon buttons, so they need more
   room than the 22px colour and width swatches below them. */
.rail__opts [data-annot-shape] { width: 30px; height: 30px; }
.rail__opts [data-annot-shape] .i { width: 17px; height: 17px; }

/* Swatch colours as classes, not inline style attributes.
   Scoped with .rail__opts (0-2-0) because the generic `.rail button` reset above
   sets `background: none` at 0-1-1 — a bare `.rail__sw--*` class is 0-1-0 and
   loses to it, which renders every swatch transparent. */
.rail__opts .rail__sw--15171c { background: #15171c; }
.rail__opts .rail__sw--ef4444 { background: #ef4444; }
.rail__opts .rail__sw--3b82f6 { background: #3b82f6; }
.rail__opts .rail__sw--10b981 { background: #10b981; }
.rail__opts .rail__sw--eab308 { background: #eab308; }
.rail__opts .rail__sw--f97316 { background: #f97316; }
.rail__opts .rail__sw--7c3aed { background: #7c3aed; }
.rail__opts button { width: 22px; height: 22px; border-radius: 6px; border: 2px solid transparent; }
.rail__opts [data-annot-color] { box-shadow: 0 0 0 1px var(--line-2, #e2e3e9); }
/* Selected swatch: a ring, not a repaint — the colour must stay readable. */
.rail__opts [data-annot-color][aria-pressed="true"] {
    border-color: var(--ink, #101a33);
    box-shadow: 0 0 0 1px var(--panel, #fff), 0 0 0 2px var(--ink, #101a33);
}
.rail__opts [data-annot-width] { background: none; position: relative; }
.rail__opts [data-annot-width]::after {
    content: ""; position: absolute; left: 3px; right: 3px; top: 50%;
    border-radius: 99px; background: currentColor; transform: translateY(-50%);
}
.rail__opts [data-annot-width="0"]::after { height: 2px; }
.rail__opts [data-annot-width="1"]::after { height: 4px; }
.rail__opts [data-annot-width="2"]::after { height: 7px; }

/* The rail sits in the stage's left gutter, where the Previous arrow also
   lives (.arrow-side.left{left:14px;top:50%}). Widen the gutter and slide the
   arrow past the rail so both stay clickable — z-index alone would leave the
   arrow covered and un-pressable with no visible reason. */
body.fame-annot .stage { padding-left: 112px; }
body.fame-annot .arrow-side.left { left: 58px; }

/* ------------------------------------------------------------- the overlay */

.fame-annot-wrap { position: relative; min-height: 100%; }

.fame-annot-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* Inert unless a drawing tool is active: in `select` mode no event ever
       reaches the layer, so text selection, highlighting, one-finger scroll and
       swipe-to-turn behave exactly as they did before this feature existed. */
    pointer-events: none;
}

.fame-annot-layer canvas { position: absolute; inset: 0; }
.fame-annot-pins { position: absolute; inset: 0; }

body.fame-annot-draw .fame-annot-layer {
    pointer-events: auto;
    /* Declarative gesture claim — we never fight the browser's scroll with
       preventDefault on a passive listener. `pan-y` would make a vertical pen
       stroke scroll instead of draw. */
    touch-action: none;
    cursor: crosshair;
}

body.fame-annot-draw .fame-hl-text,
body.fame-annot-draw .explanation-text { user-select: none; -webkit-user-select: none; }

body.fame-annot-erase .fame-annot-layer { cursor: cell; }

/* A stroke that has not reached the server yet. */
.fame-annot-layer.is-unsaved::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f97316;
}

/* ---------------------------------------------------------------- the pins */

.fame-annot-pin {
    position: absolute;
    width: 26px;
    height: 26px;
    margin: -2px 0 0 -13px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    pointer-events: auto;
}

.fame-annot-pin svg { width: 24px; height: 24px; fill: currentColor; stroke: #fff; stroke-width: 1.4; }
.fame-annot-pin:focus-visible { outline: 2px solid var(--brand, #3257ff); outline-offset: 2px; border-radius: 4px; }

/* ----------------------------------------------------------- hide all marks */

body.fame-marks-hidden .fame-annot-layer { visibility: hidden; pointer-events: none; }

/* Highlights need !important: fame-highlighter.js writes backgroundColor,
   fontWeight and textDecoration as INLINE styles on each span, so a plain class
   rule is silently ignored. The spans must be NEUTRALISED, never display:none —
   they wrap the book's own words, and hiding them would delete the text. */
body.fame-marks-hidden span.fame-hl {
    background-color: transparent !important;
    background-image: none !important;
    font-weight: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

body.fame-marks-hidden span.fame-hl.fame-hl-has-note::after { display: none !important; }
body.fame-marks-hidden .fame-hl-swatch,
body.fame-marks-hidden .fame-hl-tooltip { display: none !important; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 980px) {
    /* The stage becomes the page scroller here, so an absolutely positioned rail
       would scroll off the top. Fixed to the viewport is the only stable anchor.
       The side arrows are display:none at this width, so the gutter goes back. */
    body.fame-annot .stage { padding-left: 14px; }

    /* Both rails — the reader's gutter one and the quiz's right-hand one —
       become the same bottom bar here; a vertical rail is unusable on a phone.
       `right: auto` is explicit because .rail--inline sets it. */
    body.fame-annot-on .rail {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: 12px;
        top: auto;
        transform: translateX(-50%);
        flex-direction: row;
        max-height: none;
        overflow: visible;
    }

    /* The rail is no longer beside the explanation, so give the text its width back. */
    body.fame-annot-on .fame-quiz-explanation-con { padding-right: 0; }

    .rail hr { width: 1px; height: 22px; margin: 0 2px; }
    .rail__opts { left: auto; right: 0; top: auto; bottom: calc(100% + 8px); }
    /* Horizontal bar, so the grip turns on its side too. */
    .rail__grip { height: auto; width: 16px; margin: 0 2px 0 -1px; }

    /* …unless the student has parked it somewhere: an inline position beats the
       bottom-bar rule above, and the rail stays vertical where they put it. */
    body.fame-annot-on .rail.is-moved { flex-direction: column; }
    .rail.is-moved hr { width: 22px; height: 1px; margin: 3px auto; }
    .rail.is-moved .rail__grip { height: 18px; width: auto; margin: -1px 0 2px; }
    .rail.is-moved .rail__opts { left: auto; right: calc(100% + 8px); top: 0; bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .fame-annot-layer { transition: none !important; }
}