/* The note glyphs need a font that HAS them, or they render as tofu. Imported
   here rather than asking every host page for a <link>, so including this one
   file is all a page has to do — the same reason the component exists. */
@import url("https://fonts.googleapis.com/css2?family=Noto+Music&display=swap");

/* ============================================================
   SYMBOL RAIL — the modules' side rail, packaged for other pages.

   Every Levels/<Grade>/Module.html carries its own inline copy of this
   (#eRail + #eDrawer, styles at the top, SETS and eDraw() at the
   bottom). The Q&A pages needed the same thing, and a third and
   fourth hand-copy is how the copies start to disagree — so the
   markup, the styles and the symbol table live here and in
   scripts/symbol-rail.js instead, mounted onto whichever MathQuill
   field a page has.

   Deliberately the same shape, sizes and colours as the module
   rail: a student who has used one has used the other, and that
   familiarity is the whole point of putting it on the Q&A.

   Class names are sr-* rather than the modules' ids, so the
   component can appear twice on a page and can't collide with a
   host page's own #eRail.
   ============================================================ */

.sr-rail{
    position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:40;
    background:#fff; border:1px solid #e6e8ef; border-radius:14px;
    box-shadow:0 6px 24px rgba(20,30,60,.10);
    padding:10px 6px; display:flex; flex-direction:column; gap:8px; align-items:center;
}
.sr-rail[hidden]{ display:none; }
.sr-t{ font:9px system-ui; color:#9aa0a6; text-transform:uppercase; letter-spacing:.5px; }
.sr-rail > button{
    width:62px; height:48px; border-radius:12px; border:1px solid #e6e8ef;
    background:#fbfcff; color:#444; cursor:pointer; font:14px system-ui;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
}
.sr-rail > button:hover{ background:#f2f6ff; }
.sr-rail > button.active{ background:#0d6efd; border-color:#0d6efd; color:#fff; }
.sr-cap{ font:9px system-ui; color:#8b9097; }
.sr-rail > button.active .sr-cap{ color:#e3ecff; }

/* Locked out of the round, or the field is otherwise closed. The rail is the one
   way into the field that never touches the keyboard, so it has to be shut too —
   greying it without pointer-events:none would leave a working back door. */
.sr-rail.sr-off{ opacity:.4; pointer-events:none; }

.sr-drawer{
    position:fixed; right:114px; top:150px; width:340px; background:#fff;
    border:1px solid #eef0f6; border-radius:14px; box-shadow:0 16px 48px rgba(20,30,60,.22);
    padding:14px; display:none; z-index:41;
}
.sr-drawer.open{ display:block; }
.sr-dh{
    display:flex; justify-content:space-between; align-items:center;
    padding:0 4px 8px; border-bottom:1px solid #eee;
    font:12px system-ui; color:#444; letter-spacing:.4px;
}
.sr-dh .sr-x{ cursor:pointer; color:#999; background:none; border:0; font-size:18px; line-height:1; padding:0 4px; }
.sr-dh .sr-x:hover{ color:#444; }
.sr-dg{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; padding-top:10px; }
.sr-dg button{
    height:42px; border:1px solid #c5d4ff; background:#fff; color:#0d6efd;
    border-radius:8px; font:16px system-ui; cursor:pointer;
}
.sr-dg button:hover{ background:#eef4ff; }

/* ♪ Notes: bigger tiles in the music font, matching Music of Me's own drawer. */
.sr-drawer.sr-notes .sr-dg button{ font-family:"Noto Music", serif; font-size:26px; height:52px; color:#1b2430; }
.sr-rail > button.sr-notes > span:first-child{ font-family:"Noto Music", serif; font-size:17px; }

/* A rendered note (see SymbolRail.render) arrives inside a \text{} block, and
   mathquill.css gives those Times New Roman at 87%. Ask for the music font first
   — it holds nothing but music, so any letters beside the note still fall through
   to the same serif as before — and keep the note at full size. */
.sr-tex .mq-text-mode{ font-family:"Noto Music", "Times New Roman", Symbola, serif; font-size:100%; }

/* A note TYPED INTO a field is an ordinary math-mode symbol, not a 	ext{} block,
   and mathquill.css hands those Symbola / Times New Roman — measured on this
   machine, neither has a musical glyph, so the field the student is typing in
   drew the missing-character box while the palette right above it drew the note.
   Noto Music goes on the END of each of mathquill's own stacks: it contains
   nothing but music, so every other character still resolves to exactly the font
   it resolved to before, and only the notes change. Scoped by this file being
   loaded on the two Q&A pages and nowhere else. */
.mq-math-mode,
.mq-math-mode .mq-editable-field{ font-family:Symbola, "Times New Roman", "Noto Music", serif; }
.mq-math-mode var,
.mq-math-mode .mq-nonSymbola{ font-family:"Times New Roman", Symbola, "Noto Music", serif; }
.mq-math-mode .mq-font{ font:1em "Times New Roman", Symbola, "Noto Music", serif; }

/* ── BAR LAYOUT ────────────────────────────────────────────────────────────
   Mounted in the page instead of floating: a strip of the same buttons sitting
   above the field it types into. The teacher's Q&A uses this — its question box
   lives in a card in a column, and a palette pinned to the far right of a wide
   screen reads as belonging to nothing. Students keep the floating rail, which
   is what the modules give them. */
.sr-rail.sr-bar{
    position:static; transform:none; z-index:auto;
    flex-direction:row; align-items:center; flex-wrap:wrap; gap:6px;
    padding:7px 9px; margin:0 0 14px; border-radius:12px;
    background:#fbfcff; box-shadow:none;
}
.sr-rail.sr-bar .sr-t{ margin:0 4px 0 2px; }
.sr-rail.sr-bar > button{ width:58px; height:42px; }

/* Narrow screens keep the rail VERTICAL on the right rather than becoming the
   modules' bottom bar: this page has its Submit button and its answer at the
   bottom, and a fixed bar across them covers the thing being used. Five buttons
   stack inside a phone's height comfortably. The drawer still drops to a sheet. */
@media (max-width: 820px){
    .sr-rail:not(.sr-bar){ right:6px; padding:7px 5px; gap:5px; }
    .sr-rail > button{ width:50px; height:40px; font-size:13px; }
    .sr-t{ font-size:8px; }
    .sr-drawer{ left:8px; right:8px; width:auto; top:auto; bottom:14px; }
}

@media print{ .sr-rail, .sr-drawer{ display:none !important; } }