/* INSTRUCTOR TOOLS: the toolbar, the Teach tools, the Scenarios card, dialogs and toasts. Same look as the rest of the board: floating, big enough for a finger. */
#toolbar { position: fixed; z-index: 20; left: max(10px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); display: flex; flex-wrap: wrap; gap: 8px; max-width: calc(100vw - 20px); }
.fab[aria-expanded="true"], .fab[aria-pressed="true"] { background: #1b3a80; border-color: #fdc20f; }
#teachTools { display: none; align-items: center; flex-wrap: wrap; gap: 8px; }
body.teaching #teachTools { display: flex; }
.tool { min-height: 44px; padding: 6px 14px; border-radius: 999px; font-weight: 700; background: rgba(18, 41, 92, .95); border-color: rgba(255, 255, 255, .28); box-shadow: 0 3px 10px rgba(0, 0, 0, .4); }
.tool.on { background: #fdc20f; color: #111; border-color: #fdc20f; }
.tstart { font-size: 12.5px; opacity: .9; max-width: 220px; padding: 4px 10px; border-radius: 10px; background: rgba(14, 22, 45, .85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.paused::after { content: 'Paused'; position: fixed; z-index: 12; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 8px 20px; border-radius: 999px; background: #fdc20f; color: #111; font-weight: 800; letter-spacing: .04em; pointer-events: none; }

/* REVIEW and replay */
body.student-mode #revBtn, body.student-mode #revCard, body.student-mode #acctBtn, body.student-mode #clBtn, body.student-mode #clCard, body.student-mode #teachCard, body.student-mode #dashBtn { display: none !important; }
#revCard, #clCard, #teachCard, #myCard, #libCard { right: max(10px, env(safe-area-inset-right)); top: var(--panel-top, 10px); width: min(440px, calc(100vw - 20px)); max-height: calc(100vh - var(--panel-top, 10px) - 14px); max-height: calc(100dvh - var(--panel-top, 10px) - 14px); display: flex; flex-direction: column; }
#revList { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.scrow.follow { margin-left: 18px; border-left: 4px solid #fdc20f; }          /* a follow-up sits under its question */
.rv-group { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin: 10px 2px 2px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .15); } .rv-group strong { font-size: 15px; } .rv-group span { font-size: 13px; opacity: .8; }
.scrow.waiting { border-left: 5px solid #fdc20f; } .scrow.failed { border-left: 5px solid #ff6b5e; } .scrow.passed { border-left: 5px solid #5ed08a; } .scrow.dnf { border-left: 5px solid #8d97ad; }
body.reviewing #toolbar, body.reviewing #taskCard, body.reviewing #notices, body.reviewing #panel, body.reviewing #route, body.reviewing #dock, body.reviewing #carsCard, body.reviewing #scCard, body.reviewing #clCard, body.reviewing #libCard, body.reviewing #teachCard, body.reviewing #zoom, body.reviewing #stCard { display: none !important; }
body.reviewing #stage { bottom: var(--rev-b, 0px); right: var(--rev-r, 0px); }          /* the board is given only the part of the screen the replay bar and the log leave, so they never cover a road */
#revBar { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; box-sizing: border-box; padding: 8px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: #0e162d; border-top: 1px solid rgba(255, 255, 255, .2); }
#revBar > * { max-width: 1000px; margin-left: auto; margin-right: auto; }
.rv-status { margin: 0 auto 4px; min-height: 2.5em; display: flex; align-items: center; font-size: 13.5px; font-weight: 600; opacity: .85; line-height: 1.25; } .rv-status.mistake { opacity: 1; font-weight: 700; color: #ff9a90; }
.rev-track { position: relative; height: 34px; margin-bottom: 8px; }
.rev-track input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; margin: 0; background: transparent; accent-color: #fdc20f; height: 34px; }
#revMarks { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; pointer-events: none; z-index: 1; }
.mk { position: absolute; top: 4px; width: 4px; height: 26px; border-radius: 2px; margin-left: -2px; background: #5c8dff; }
.mk.error { background: #ff5a4a; width: 6px; margin-left: -3px; } .mk.refused { background: #8d97ad; height: 14px; top: 10px; } .mk.end { background: #5ed08a; }
.rev-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rev-row button { min-height: 44px; padding: 4px 12px; font-weight: 700; font-size: 14px; } .rev-row button.on { background: #fdc20f; color: #111; border-color: #fdc20f; }
.rv-time { font-variant-numeric: tabular-nums; font-weight: 700; margin: 0 4px; } .go-btn { background: #1d4a35; border-color: #5ed08a; }
#revLog { right: 0; top: 0; bottom: var(--rev-bar-h, 0px); width: var(--rev-log-w, 360px); display: flex; flex-direction: column; z-index: 33; border-radius: 0; margin: 0; max-height: none; border-left: 1px solid rgba(255, 255, 255, .2); }
#rvSummary { margin: 0 0 8px; font-size: 14px; } #rvRows { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.rvrow { display: flex; gap: 10px; align-items: flex-start; text-align: left; min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1px solid transparent; background: rgba(255, 255, 255, .05); font-weight: 500; font-size: 14px; opacity: .55; }
.rvrow b { min-width: 38px; font-variant-numeric: tabular-nums; } .rvrow.past { opacity: 1; } .rvrow.now { border-color: #fdc20f; }
.rvrow.error { background: rgba(255, 90, 74, .22); border-color: rgba(255, 90, 74, .6); } .rvrow.note { background: rgba(253, 194, 15, .18); border-color: rgba(253, 194, 15, .6); } .rvrow.note span { font-weight: 700; } .rvrow.error span { font-weight: 700; } .rvrow.end { background: rgba(94, 208, 138, .16); }
#rvTitle { text-transform: none; font-size: 15px; } .short { display: none; }
@media (max-width: 900px), (max-height: 520px) {
  .long { display: none; } .short { display: inline; }
  #revBar { padding: 4px 8px max(6px, env(safe-area-inset-bottom)); } .rev-track { height: 26px; margin-bottom: 2px; } .rev-track input { height: 26px; } .mk { height: 18px; top: 4px; } .rv-status { font-size: 12.5px; margin-bottom: 2px; }
  .rev-row { gap: 6px; } .rev-row button { min-height: 40px; padding: 2px 10px; font-size: 13px; } .rv-time { font-size: 13px; margin: 0 2px; }
}
@media (max-width: 480px) { #toolbar .lbl { display: none; } }          /* an upright phone: the toolbar is one row of icons (Start and Give up keep their words) */

/* the temporary switch between the instructor side and the student side */
#modeBtn[data-mode="student"] { background: #1d4a35; border-color: #5ed08a; }
.student-only { display: none; }
body.student-mode .student-only { display: inline-flex; }
body.student-mode #carsBtn, body.student-mode #scBtn, body.student-mode #teachBtn, body.student-mode #teachTools, body.student-mode #carsCard, body.student-mode #scCard { display: none !important; }
#stCard { right: max(10px, env(safe-area-inset-right)); top: var(--panel-top, 10px); width: min(400px, calc(100vw - 20px)); max-height: calc(100vh - var(--panel-top, 10px) - 14px); max-height: calc(100dvh - var(--panel-top, 10px) - 14px); display: flex; flex-direction: column; }
#stList { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
body.student-mode::before { content: 'Student side (testing)'; position: fixed; z-index: 11; left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translateX(-50%); padding: 3px 12px; border-radius: 999px; background: #1d4a35; border: 1px solid #5ed08a; font-size: 12px; font-weight: 700; letter-spacing: .04em; pointer-events: none; display: none; }

/* the task and the countdown, student side */
.fab.go { background: #1d4a35; border-color: #5ed08a; }
.notice.task { border-left-color: #fdc20f; font-weight: 700; } #taskHint { font-weight: 500; font-size: 13.5px; opacity: .85; margin-top: 2px; } #taskHint[hidden] { display: none; }
.timer { position: fixed; z-index: 24; left: max(10px, env(safe-area-inset-left)); top: calc(max(10px, env(safe-area-inset-top)) + var(--toolbar-h, 58px)); display: flex; align-items: center; gap: 8px; padding: 3px 6px 3px 12px; border-radius: 14px; background: rgba(16, 23, 43, .94); border: 1px solid rgba(255, 255, 255, .18); border-left: 5px solid #fdc20f; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.timer span { font-size: 12px; font-weight: 700; opacity: .8; } .timer b { font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; } .timer b:empty { display: none; } .timer b.warn { color: #ff6b5e; }
.timer button { flex: none; width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 50%; font-size: 15px; font-weight: 800; } .timer button[hidden] { display: none; }
.timer.at-tr { left: auto; right: max(10px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); }
.timer.at-bottom { top: auto; bottom: max(10px, env(safe-area-inset-bottom)); left: 76px; }
#notices.at-bottom { top: auto; bottom: max(10px, env(safe-area-inset-bottom)); right: auto; left: 50%; transform: translateX(-50%); width: min(380px, calc(100vw - 220px)); }
@media (orientation: portrait) {
  .timer { top: max(10px, env(safe-area-inset-top)); left: auto; right: max(10px, env(safe-area-inset-right)); height: 44px; box-sizing: border-box; padding: 0 6px 0 12px; border-radius: 22px; }          /* upright phone: the time sits in the toolbar's row, at the right, so it is never over the board */
  .timer span { display: none; } .timer b { font-size: 19px; }
  #notices.at-bottom { top: auto; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 62px); left: calc(max(10px, env(safe-area-inset-left)) + 62px); right: max(10px, env(safe-area-inset-right)); width: auto; transform: none; z-index: 40; }          /* when the top would cover the cars: above the bottom buttons, beside the zoom buttons */
}
@media (pointer: coarse) { .timer button { width: 36px; height: 36px; min-height: 36px; } }
.timer { cursor: pointer; }
@media (max-width: 340px) { .timer button { display: none; } .timer { padding-right: 12px; } }          /* a very narrow phone: tap the time itself to see the question again */
@media (max-height: 520px) and (orientation: landscape) { .timer b { font-size: 18px; } }

/* the Scenarios card, below the toolbar, top left */
#scCard { right: max(10px, env(safe-area-inset-right)); top: var(--panel-top, 10px); width: min(440px, calc(100vw - 20px)); max-height: calc(100vh - var(--panel-top, 10px) - 14px); max-height: calc(100dvh - var(--panel-top, 10px) - 14px); display: flex; flex-direction: column; }
.sc-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.sc-current { margin: 0; font-size: 13.5px; opacity: .9; }
#scList { flex: 1; min-height: 60px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.sc-empty { margin: 6px 2px; opacity: .85; } .sc-empty.bad { color: #ff9a90; }
.scrow { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.scrow.on { border-color: #fdc20f; }
.sctext strong { display: block; font-size: 16px; overflow-wrap: anywhere; }
.sctext .meta { display: block; font-size: 13px; opacity: .8; margin: 2px 0 4px; }
.sctext .desc { margin: 0 0 6px; font-size: 14px; opacity: .92; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scacts { display: flex; flex-wrap: wrap; gap: 6px; }
.scacts button { flex: 1 1 auto; min-height: 40px; padding: 4px 10px; font-weight: 600; font-size: 14px; }
.sc-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sc-foot button { flex: 1 1 140px; }
button.primary { background: #fdc20f; color: #111; border-color: #fdc20f; font-weight: 700; }
button.primary:active:not(:disabled) { background: #e5ad00; }
button.danger { background: #d8402f; border-color: #d8402f; font-weight: 700; }
button.danger-outline { border-color: #d8402f; color: #ffb4ab; }

/* dialogs */
#modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 12px; }
.modal-back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(5, 9, 20, .72); }
.modal-card { position: relative; width: min(460px, 100%); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box; padding: 16px 18px 14px; border-radius: 20px; background: #0e162d; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 18px 50px rgba(0, 0, 0, .6); }
.modal-card h2 { margin: 0 0 8px; font-size: 19px; overflow-wrap: anywhere; }
.modal-card p, .modal-card li { font-size: 15px; line-height: 1.4; } .modal-card ul { margin: 0 0 6px; padding-left: 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.modal-actions button { min-height: 46px; min-width: 96px; font-weight: 700; }
.modal-error { margin: 8px 0 0; color: #ffb4ab; font-weight: 600; }
.field { display: block; margin: 0 0 10px; } .flabel { display: block; font-weight: 700; margin-bottom: 4px; font-size: 14px; }
.field input, .field textarea, .field select, .carrow select { width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; color: #fff; background: #12295c; border: 2px solid #3b4a6b; border-radius: 12px; min-height: 46px; }
.field input:focus, .field textarea:focus, select:focus { outline: 3px solid #fdc20f; outline-offset: 1px; }
.field small { display: block; margin-top: 3px; opacity: .75; font-size: 12.5px; } .field small[hidden] { display: none; }
.modal-card.wide { width: min(600px, 100%); }
.modal-card .fields { display: grid; grid-template-columns: 1fr; gap: 0 14px; } .modal-card.wide .fields { grid-template-columns: 1fr 1fr; } .modal-card.wide .field { grid-column: 1 / -1; } .modal-card.wide .field.half { grid-column: auto; }
.flabel { display: flex; align-items: center; gap: 8px; }
.help { flex: none; width: 22px; height: 22px; min-height: 22px; padding: 0; border-radius: 50%; font-size: 13px; font-weight: 800; line-height: 1; border: 1.5px solid #8ea0c8; background: transparent; color: #cfd8f0; cursor: pointer; } .help:hover { border-color: #fff; color: #fff; } .help[aria-expanded="true"] { background: #fdc20f; border-color: #fdc20f; color: #111; }
.modal-card.wide .carrows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
@media (pointer: coarse) { .help { width: 28px; height: 28px; min-height: 28px; } }
@media (max-width: 560px) { .modal-card.wide .fields { grid-template-columns: 1fr; } .modal-card.wide .field.half { grid-column: 1 / -1; } .modal-card.wide .carrows { grid-template-columns: 1fr; } }
.carrows { display: flex; flex-direction: column; gap: 6px; } .carrow { display: flex; align-items: center; gap: 10px; text-transform: capitalize; } .carrow span { min-width: 84px; } .carrow select { flex: 1; text-transform: none; }
body.modal-open { overflow: hidden; }
@media (pointer: coarse) { #modal.typing { align-items: flex-start; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: calc(var(--kb, 0px) + 6px); } #modal.typing .modal-card { max-height: calc(100vh - var(--kb, 0px) - 12px); max-height: calc(100dvh - var(--kb, 0px) - 12px); } }          /* typing on a phone: the form at the top, above the keyboard */

/* toast: the instructor's own short messages, at the bottom */
/* THE DASHBOARD PANEL: the board dimmed and blurred, a big frosted glass card over it (full screen on a phone); notifications stay above it */
#dash { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 65; display: flex; align-items: center; justify-content: center; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: rgba(4, 7, 12, .5); -webkit-backdrop-filter: blur(10px) brightness(.75); backdrop-filter: blur(10px) brightness(.75); animation: dashIn .18s ease-out; }
#dash[hidden] { display: none; }
.dash-glass { width: min(1320px, 100%); height: min(920px, 100%); border-radius: 26px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); background: linear-gradient(160deg, rgba(26, 34, 50, .74), rgba(8, 12, 18, .84)); box-shadow: 0 30px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(22px) saturate(1.1); backdrop-filter: blur(22px) saturate(1.1); }
.dash-glass iframe { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
@keyframes dashIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 820px), (max-height: 520px) { #dash { padding: 0; } .dash-glass { width: 100%; height: 100%; border-radius: 0; border: 0; } }
@media (prefers-reduced-motion: reduce) { #dash { animation: none; } }
body[data-page="class"] #dash { display: none !important; }
.toast { position: fixed; z-index: 70; left: 50%; bottom: max(70px, calc(env(safe-area-inset-bottom) + 64px)); transform: translateX(-50%); max-width: min(560px, calc(100vw - 24px)); box-sizing: border-box; padding: 10px 16px; border-radius: 14px; background: rgba(16, 23, 43, .96); border: 1px solid rgba(255, 255, 255, .18); border-left: 6px solid #5c8dff; font-size: 15px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); animation: rise .25s ease; }
.toast.good { border-left-color: #5ed08a; } .toast.bad { border-left-color: #ff6b5e; }

@media (orientation: portrait) { body.teaching #notices { top: calc(max(10px, env(safe-area-inset-top)) + var(--toolbar-h, 58px)); } }
@media (pointer: coarse) { .tool { min-height: 48px; } .scacts button { min-height: 44px; } }
/* small screens: the toolbar is compact so Cars, Scenarios, Teach and the teaching tools fit in one or two short rows and the board stays the main thing */
@media (max-width: 900px), (max-height: 520px) {
  #toolbar, #teachTools { gap: 6px; }
  #toolbar .fab { min-height: 44px; padding: 6px 11px 6px 9px; font-size: 14.5px; gap: 6px; }
  #toolbar .fab svg { width: 20px; height: 20px; }
  #toolbar .fab b { font-size: 12px; padding: 1px 7px; }
  #toolbar .tool { min-height: 44px; padding: 4px 10px; font-size: 13.5px; }
  .tstart { display: none; }
}
@media (max-width: 900px) { #modeBtn .lbl, #teachBtn .lbl, #revBtn .lbl { display: none; } }          /* on a phone the toolbar is icons, so it never runs under the controls card */
@media (max-width: 400px) { #toolbar .more, #carsBtn .lbl, #modeBtn .lbl, #teachBtn .lbl, #revBtn .lbl { display: none; } #toolbar, #teachTools { gap: 5px; } #toolbar .fab { padding: 6px 9px 6px 8px; font-size: 14px; } #toolbar .tool { padding: 4px 8px; font-size: 13px; } }
@media (max-height: 520px) and (orientation: landscape) { #scCard { width: min(420px, 52vw); } }
@media (max-width: 380px) { #toolbar .fab { padding: 6px 8px 6px 7px; font-size: 13.5px; gap: 5px; } #toolbar .fab svg { width: 18px; height: 18px; } #modeBtn { padding: 6px 9px; } #toolbar .tool { padding: 4px 7px; font-size: 12.5px; } }
@media (orientation: portrait) { #revLog { top: auto; left: 0; right: 0; width: auto; height: var(--rev-log-h, 32vh); height: var(--rev-log-h, 32dvh); border-left: 0; border-top: 1px solid rgba(255, 255, 255, .2); } }          /* upright phone: the log is a band above the bar */
#acctBtn[data-state="signedin"] { border-color: #5ed08a; } #acctBtn[data-state="signedin"] svg { color: #5ed08a; } #acctBtn[data-state="offline"] { border-color: #ff9a90; }
@media (max-width: 900px) { #acctLabel { display: none; } }
/* a short screen (a phone on its side): the form is laid out in fewer, wider rows so that it still fits without scrolling */
@media (max-height: 560px) {
  .modal-card { padding: 10px 14px 8px; } .modal-card h2 { font-size: 17px; margin-bottom: 4px; }
  .modal-card.wide .fields { grid-template-columns: 3fr 1fr; gap: 0 10px; } .modal-card.wide .field:nth-child(-n+2) { grid-column: auto; }          /* the question and the time limit side by side, Who is who on its own row (it was squeezed into a third column) */
  .field { margin-bottom: 6px; } .flabel { font-size: 13px; margin-bottom: 2px; }
  .field input, .field textarea, .field select, .carrow select { padding: 6px 10px; } .field textarea { min-height: 0; height: 46px; resize: none; }
  .modal-card.wide { width: min(720px, 100%); } .modal-card.wide .carrows { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 12px; } .carrow span { min-width: 0; font-size: 13px; white-space: nowrap; } .carrow select { min-width: 140px; }          /* as many cars to a row as fit with their choice readable */
  .modal-actions button, .modal-card button { min-height: 40px; }
}

/* THE CLASS CARD (instructor) and THE CLASS PAGE (student) */
.cl-body { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.cl-code { text-align: center; font: 800 40px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .22em; padding: 14px 10px 14px 22px; border-radius: 14px; background: rgba(253, 194, 15, .1); border: 1.5px solid #fdc20f; color: #ffe08a; user-select: all; }
.cl-state { margin: 0; text-align: center; font-size: 13.5px; } .cl-state.open { color: #8df0b6; } .cl-state.closed { color: #ff9a90; }
.cl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cl-codewrap { position: relative; } .cl-codewrap .cl-code { padding-right: 64px; padding-left: 64px; }
.cl-fold { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(253, 194, 15, .5); background: rgba(0, 0, 0, .25); color: #ffe08a; font: 700 13px/1 system-ui, sans-serif; cursor: pointer; } .cl-fold i, .cl-minicode i { font-style: normal; font-size: 12px; }
.cl-mini { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 6px; }
.cl-minicode { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; border-radius: 12px; border: 1.5px solid #fdc20f; background: rgba(253, 194, 15, .1); color: #ffe08a; font: 800 18px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .12em; cursor: pointer; }
.cl-mini button { padding-left: 6px; padding-right: 6px; }
.cl-body.folded .cl-list { max-height: none; }
.cl-body h3 { margin: 10px 2px 0; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.cl-list li { align-items: center; } .cl-list li em { margin-left: auto; } .cl-remove { min-height: 30px; padding: 2px 10px; font-size: 13px; font-weight: 700; border-radius: 999px; background: transparent; color: #ff8a80; border: 1px solid rgba(255, 138, 128, .5); cursor: pointer; } .cl-remove:hover { background: rgba(255, 138, 128, .12); }
.cl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 30vh; overflow-y: auto; }
.cl-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); } .cl-list em { font-style: normal; font-size: 13px; opacity: .8; }
.cl-send { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; } .cl-send select { min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 2px solid #3a4a80; background: #112458; color: #fff; font: inherit; }
.cl-now { margin: 2px; font-size: 14px; } .cl-body .wide { width: 100%; margin-top: 8px; }
#classBar { display: inline-flex; align-items: center; gap: 8px; max-width: min(56vw, 620px); padding: 8px 14px; border-radius: 999px; font-size: 14px; background: rgba(13, 27, 70, .92); border: 2px solid #4a5a8f; color: #fff; }
#classBar .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #5ed08a; } #classBar[data-mode="wait"] .dot { background: #fdc20f; } #classBar[data-mode="bad"] .dot { background: #ff6b5e; }
#classText { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body:not([data-page="class"]) #classBar, body:not([data-page="class"]) #leaveBtn, body:not([data-page="class"]) #myBtn, body:not([data-page="class"]) #myCard { display: none !important; }
/* the class page: the board only for the student: no way to the instructor's tools */
body[data-page="class"] #modeBtn, body[data-page="class"] #stPick, body[data-page="class"] #stCard, body[data-page="class"] #clBtn, body[data-page="class"] #libBtn, body[data-page="class"] #libCard, body[data-page="class"] #acctBtn, body[data-page="class"] #revBtn, body[data-page="class"] #scBtn, body[data-page="class"] #carsBtn, body[data-page="class"] #teachBtn, body[data-page="class"] #dashBtn { display: none !important; }
@media (max-width: 900px) { #classBar { max-width: 62vw; font-size: 13px; padding: 7px 11px; } .cl-code { font-size: 32px; } }

/* ---------- THE MENU: all the toolbar's cards behind one round button that slides them away to the left (js/menu.js) ---------- */
#toolbar { flex-wrap: nowrap; align-items: flex-start; gap: 8px; max-width: calc(100vw - 20px); }
#toolbar .fab, a.fab { position: relative; text-decoration: none; color: inherit; }
#menuItems { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
#menuItems > * { max-width: 300px; transition: opacity .2s ease, transform .32s cubic-bezier(.2, .8, .2, 1), max-width .32s ease, margin .32s ease, padding .32s ease, border-width .32s ease; }
#toolbar[data-state="collapsed"] #menuItems > *, #toolbar[data-state="focus"] #menuItems > :not(.focused) { opacity: 0; transform: translateX(-42px); max-width: 0; margin-left: -8px; padding-left: 0; padding-right: 0; border-width: 0; overflow: hidden; pointer-events: none; visibility: hidden; transition: opacity .2s ease, transform .32s cubic-bezier(.2, .8, .2, 1), max-width .32s ease, margin .32s ease, padding .32s ease, border-width .32s ease, visibility 0s .32s; }
#menuBtn { flex: none; }
#menuBtn[aria-expanded="true"] .ico-closed, #menuBtn[aria-expanded="false"] .ico-open { display: none; }
#toolbar[data-state="collapsed"] #menuBtn, #toolbar[data-state="focus"] #menuBtn { background: #17316e; }
.nbadge { position: absolute; top: -7px; right: -5px; z-index: 2; min-width: 21px; height: 21px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; background: #ff5a4a; color: #fff; font: 800 12px/21px system-ui, sans-serif; font-style: normal; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); pointer-events: none; }
.nbadge[hidden] { display: none; }
.hide-btn { display: inline-flex; align-items: center; gap: 4px; width: auto !important; padding: 0 14px 0 8px !important; font-size: 14px !important; font-weight: 700; }
#toolbar > .timer { position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; height: 44px; box-sizing: border-box; padding: 0 6px 0 12px; border-radius: 22px; flex: none; }
#toolbar > .timer span { display: inline; } #toolbar > .timer b { font-size: 19px; }
@media (max-width: 900px) { #toolbar > .timer span { display: none; } #dashBtn .lbl, #clBtn .lbl, #scBtn .lbl { display: none; } #carsBtn .lbl { display: none; } }

/* THE CARS CARD, small: the car and the blocker side by side, the colours under them */
#carsCard { width: min(300px, calc(100vw - 20px)); }
#trayGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.tray-col { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 !important; text-align: center; }
.tray-col canvas { width: 62px !important; height: 100px !important; }
.tray-col p { margin: 0; font-size: 13px !important; line-height: 1.25; opacity: .9; }
#colourDots { justify-content: center; gap: 6px !important; margin-bottom: 6px !important; }
#colourDots .dotpick { width: 30px !important; height: 30px !important; min-height: 30px !important; border-width: 2px !important; }
@media (max-height: 520px) and (orientation: landscape) { .tray-col canvas { width: 48px !important; height: 78px !important; } }

/* THE ZOOM BUTTONS, small and in a row, out of the way */
#zoom { flex-direction: row !important; gap: 6px !important; }
#zoom button { width: 38px !important; height: 38px !important; font-size: 20px !important; border-radius: 12px !important; opacity: .88; }
a.fab { box-sizing: border-box; font: inherit; font-weight: 700; color: #fff; background: #12295c; border: 2px solid #3b4a6b; border-color: rgba(255, 255, 255, .28); border-radius: 999px; cursor: pointer; }
a.fab:active { background: #1b3a80; }

/* LANDSCAPE ONLY: an upright phone or tablet (a touch screen) sees "Turn your phone sideways" over the board (js/pwa.js). A desktop window is never covered. */
#turnPhone { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #turnPhone { display: flex; position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 200; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(600px 500px at 50% 30%, #16233a, #070a10 70%); color: #f2f4f7; text-align: center; }
  .turn-card { max-width: 320px; } .turn-card h2 { margin: 18px 0 8px; font-size: 22px; } .turn-card p { margin: 0; color: #b8c1cf; line-height: 1.5; }
  .turn-ico { color: #f2f4f7; animation: turnIt 2.4s ease-in-out infinite; } .turn-hint { margin-top: 14px !important; font-size: 14px; }
  #turnFull { margin-top: 20px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #e3c35f, #d9b44a); color: #17130a; font-weight: 800; font-size: 16px; } #turnFull[hidden] { display: none; }
}
@keyframes turnIt { 0%, 25% { transform: rotate(0deg); } 55%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .turn-ico { animation: none; transform: rotate(-90deg); } }

/* MY ATTEMPTS (student): each attempt with its result; the replay of their own attempt shows the result in the bar above the timeline */
#myList { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; } .my-row { align-items: center; }
.my-result { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; border: 1px solid rgba(255, 255, 255, .25); color: #c9d2df; white-space: nowrap; }
.my-result.passed { color: #8fe0ad; border-color: rgba(94, 208, 138, .6); background: rgba(94, 208, 138, .12); } .my-result.failed { color: #ffa59b; border-color: rgba(255, 107, 94, .6); background: rgba(255, 107, 94, .12); }
.my-result.waiting { color: #ffd54a; border-color: rgba(255, 200, 40, .6); background: rgba(255, 200, 40, .1); } .my-result.dnf { color: #b9c4d6; }
.rv-status[data-result] { font-weight: 800; font-size: 15px; } .rv-status[data-result="passed"] { color: #8fe0ad; } .rv-status[data-result="failed"] { color: #ffa59b; } .rv-status[data-result="waiting"] { color: #ffd54a; } .rv-status[data-result="dnf"] { color: #b9c4d6; }
body.reviewing-own #revBar .mk.error, body.reviewing-own #revBar .mk.refused { display: none; }

.rv-unmarked { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #ff6b5e; color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; vertical-align: middle; }

/* ---------- THE CLASS CARD holds Teach and each student's attempts (no Teach or Review buttons of their own) ---------- */
.teach-open { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; border-radius: 14px; font: 800 16px/1 system-ui, sans-serif; background: rgba(94, 208, 138, .12); color: #c9f5da; border: 2px solid #5ed08a; cursor: pointer; }
.teach-open:hover { background: rgba(94, 208, 138, .2); } .teach-open.on { background: #5ed08a; color: #0b2a17; }
.cl-list li.cl-stu { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.cl-stu-top { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 4px; }
.cl-stu-top em { margin-left: auto; white-space: nowrap; }
.cl-name { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; min-width: 0; padding: 4px 8px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: 700 15px/1.2 system-ui, sans-serif; text-align: left; cursor: pointer; }
.cl-name:hover, .cl-stu.open .cl-name { background: rgba(255, 255, 255, .08); }
.cl-name > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-caret { flex: none; width: 12px; opacity: .7; font-size: 12px; }
.cl-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: #ff5a4a; color: #fff; font: 800 12px/20px system-ui, sans-serif; font-style: normal; text-align: center; }
.cl-stu.gone .cl-name > span:nth-child(2) { opacity: .7; font-style: italic; }
.cl-atts { list-style: none; margin: 0; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 6px; }
.cl-att { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; border-radius: 10px; background: rgba(0, 0, 0, .22); border-left: 4px solid #8d97ad; }
.cl-att.waiting { border-left-color: #fdc20f; } .cl-att.failed { border-left-color: #ff6b5e; } .cl-att.passed { border-left-color: #5ed08a; }
.cl-att-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .cl-att-text strong { font-size: 14px; } .cl-att-text .meta { font-size: 12.5px; opacity: .78; }
.cl-att button { flex: none; min-height: 36px; padding: 4px 14px; }
.cl-none { margin: 0; padding: 0 14px 10px 30px; font-size: 13px; opacity: .7; }
.cl-list { max-height: 42vh; }
/* the Teach card */
.back-btn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 38px; padding: 4px 12px 4px 8px; }
.teach-state { margin: 4px 2px; font-size: 14px; line-height: 1.45; opacity: .9; }
#teachTools .tool.stop { border-color: #d8402f; color: #ffb4ab; }
/* THE SIGN-IN GATE (js/gate.js): over everything; the board behind it is visible but switched off */
#gate { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(6, 10, 22, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
#gate .gate-card { width: min(440px, 100%); box-sizing: border-box; padding: 22px 22px 18px; border-radius: 18px; background: #0e1730; border: 1px solid rgba(255, 255, 255, .18); color: #fff; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
#gate h2 { margin: 0 0 8px; font-size: 20px; } #gate p { margin: 0 0 10px; line-height: 1.45; opacity: .9; } #gate .gate-count { font-weight: 700; color: #ffd54a; opacity: 1; }
#gate button { width: 100%; min-height: 46px; margin-top: 4px; }
#gate .gate-spin { display: none; width: 54px; height: 54px; margin: 6px auto; border-radius: 50%; border: 5px solid rgba(217, 180, 74, .22); border-top-color: #d9b44a; animation: plSpin .9s linear infinite; }
#gate .gate-card.checking { width: auto; padding: 22px; background: transparent; border-color: transparent; box-shadow: none; } #gate .gate-card.checking .gate-spin { display: block; } #gate .gate-card.checking h2 { display: none; }
@keyframes plSpin { to { transform: rotate(360deg); } }
/* SHORT SCREENS (a phone on its side, a small tablet): the Scenarios card scrolls as one piece, so the list gets the whole height instead of a thin strip under the
   three big buttons; the title bar with Hide stays at the top while it scrolls, and the big buttons are made shorter */
@media (max-height: 640px) {
  #scCard { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  #scCard > .card-head { position: sticky; top: -10px; z-index: 2; margin: -10px -12px 6px; padding: 10px 12px 6px; background: rgb(14, 22, 45); border-radius: 20px 20px 0 0; }
  #scList { flex: none; min-height: 0; overflow: visible; }
  .sc-actions { gap: 6px; } .sc-actions button { min-height: 40px; padding: 4px 10px; font-size: 14px; }
  .sc-foot { margin-top: 8px; } .sc-foot button { min-height: 40px; }
}
.cl-body > * { flex-shrink: 0; }          /* nothing in the Class card is squeezed to nothing on a short screen (the student list used to vanish): the card scrolls instead */
.cl-hint { margin: 0 2px; font-size: 13px; opacity: .8; } .cl-hint.ok { color: #8df0b6; opacity: 1; }
/* Scenarios card: Save new / Update / Follow-up in one row of short buttons; the class line under them */
.sc-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .sc-actions button { min-height: 42px; padding: 4px 8px; }
.sc-actions .sc-current, .sc-actions .sc-class { grid-column: 1 / -1; } .sc-class { margin: 0; font-size: 13.5px; color: #8df0b6; } .sc-class .link { padding: 0; min-height: 0; border: 0; background: none; color: #ffb4ab; text-decoration: underline; font: inherit; cursor: pointer; }
.scacts button.go { background: #1f7a4a; border-color: #5ed08a; } .scacts button:disabled { opacity: .45; cursor: not-allowed; }
.cl-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 2px; font-size: 14px; opacity: .9; }
.cl-list { max-height: none; }
.toast { pointer-events: none; }          /* a message never stops a tap reaching the board under it (a car under a toast could not be picked) */
/* PRECISE PLACEMENT ARROWS round a car that has just been put down (js/nudge.js) */
.nudge { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 32; pointer-events: none; }
.nudge[hidden] { display: none; }
.nudge-btn { position: fixed; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 2px solid #fdc20f; background: rgba(16, 23, 43, .92); color: #fdc20f; box-shadow: 0 4px 14px rgba(0, 0, 0, .45); pointer-events: auto; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; }
.nudge-btn:active { background: #fdc20f; color: #111; }
body.reviewing .nudge, body.dragging .nudge { display: none !important; }
.my-home { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; min-height: 44px; border-radius: 12px; background: #fdc20f; color: #111; font-weight: 800; text-decoration: none; }
.my-home[hidden] { display: none; }
/* LIVE VIEWING (js/review.js openLive): the replay bar without the timeline, Play, Restart, speed or log; a Watch button beside each student doing an attempt */
body.watching-live #revSeek, body.watching-live #revMarks, body.watching-live #rvRestart, body.watching-live #rvPlay, body.watching-live #rvSpeed, body.watching-live #rvLog, body.watching-live #rvResult, body.watching-live #revLog { display: none !important; }
body.watching-live #rvStatus::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: #ff5252; box-shadow: 0 0 0 0 rgba(255, 82, 82, .7); animation: livePulse 1.6s infinite; vertical-align: middle; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(255, 82, 82, .7); } 70% { box-shadow: 0 0 0 9px rgba(255, 82, 82, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0); } }
@media (prefers-reduced-motion: reduce) { body.watching-live #rvStatus::before { animation: none; } }
.cl-watch { min-height: 30px; padding: 2px 10px; font-size: 13px; font-weight: 800; border-radius: 999px; background: transparent; color: #9ad0ff; border: 1px solid rgba(154, 208, 255, .5); cursor: pointer; white-space: nowrap; }
.cl-watch.on { color: #fff; background: rgba(255, 82, 82, .18); border-color: rgba(255, 82, 82, .7); }
body.watching-teach #rvTeach, body.watching-teach #rvExit, body.watching-teach #rvTime { display: none !important; }          /* the student only watches the instructor teach */
body.watching-teach #revBar .rev-row { display: none !important; }
/* A FOLLOW-UP FOR ONE STUDENT (js/followup.js): a small bar at the top, whose follow-up it is, Send and Cancel */
.fu-bar { display: flex; align-items: center; gap: 8px; max-width: min(460px, calc(100vw - 120px)); box-sizing: border-box; padding: 6px 6px 6px 12px; border-radius: 14px; background: rgba(16, 23, 43, .94); border: 1px solid rgba(253, 194, 15, .55); box-shadow: 0 6px 20px rgba(0, 0, 0, .4); color: #f2f4f7; }
.fu-bar[hidden] { display: none; }
.fu-bar .fu-text { display: grid; line-height: 1.15; min-width: 0; } .fu-bar .fu-text b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fu-bar .fu-text small { font-size: 11.5px; color: #c9d2e0; white-space: nowrap; }
.fu-bar .fu-send { min-height: 40px; padding: 0 12px; border-radius: 10px; font-weight: 800; white-space: nowrap; }
.fu-bar .fu-x { min-width: 40px; min-height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; font-size: 16px; cursor: pointer; }

/* THE STUDENT'S RESULT at the bottom of the screen (js/myattempts.js): "Attempt 2 · Passed" in green, "Failed" in red; a tap puts it away */
.result-note { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: min(420px, calc(100vw - 32px)); box-sizing: border-box; padding: 8px 16px 8px 14px; border-radius: 12px; background: rgba(16, 23, 43, .92); border: 1px solid rgba(255, 255, 255, .14); border-left: 4px solid #8d97ad; color: #e6ebf2; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); cursor: pointer; animation: noteUp .25s ease-out; }
.result-note b { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; } .result-note b::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.result-note small { font-size: 12.5px; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; padding-left: 17px; }
.result-note.passed { border-left-color: #5ed08a; } .result-note.passed b { color: #9be8b8; } .result-note.failed { border-left-color: #ff6b5e; } .result-note.failed b { color: #ffaaa1; }
.result-note[hidden] { display: none; }
@keyframes noteUp { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

/* the Guide button (opens the dashboard on its Guide tab): instructor only */
body[data-page="class"] #guideBtn, body.student-mode #guideBtn { display: none !important; }
@media (max-width: 900px) { #guideBtn .lbl { display: none; } }

/* SEND TO CLASS at the top right (js/quicksend.js): a class is open and a scenario is loaded on the board. The notifications move down below it; with a card open on the right it stands beside the card. */
/* THE TOP-RIGHT CORNER (js/reminder.js): the question reminder, then Send to class, in one column; the notifications stand below them */
.tr-stack { position: fixed; z-index: 26; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.tr-stack > * { pointer-events: auto; }
@media (orientation: landscape) { body.right-open .tr-stack { right: calc(max(10px, env(safe-area-inset-right)) + var(--panel-used, 340px) + 12px); } }
.tr-stack.tr-low { top: calc(max(10px, env(safe-area-inset-top)) + var(--toolbar-h, 58px)); }
body.tr-on #notices:not(.at-bottom) { top: calc(var(--tr-h, 0px) + 8px); }
@media (orientation: portrait) { body.tr-on #notices:not(.at-bottom) { top: calc(max(max(10px, env(safe-area-inset-top)) + var(--toolbar-h, 58px), var(--tr-h, 0px) + 8px)); } }
body.reviewing .tr-stack { display: none !important; }
.q-remind { box-sizing: border-box; width: min(360px, calc(100vw - 420px)); min-width: 220px; padding: 8px 8px 10px 14px; border-radius: 14px; background: rgba(16, 23, 43, .95); border: 1px solid rgba(255, 255, 255, .18); border-left: 5px solid #fdc20f; color: #e6ebf2; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); font: 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.q-remind[hidden] { display: none; }
.qr-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qr-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fdc20f; }
.qr-x { flex: none; width: 36px; height: 36px; margin: -4px -2px -4px 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font: 700 22px/1 system-ui, sans-serif; cursor: pointer; } .qr-x:hover { background: rgba(255, 255, 255, .2); }
.qr-title { margin: 2px 0 0; font-size: 13px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-text { margin: 4px 6px 0 0; font-weight: 700; font-size: 16px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } .qr-text.none { font-weight: 600; font-style: italic; opacity: .85; }
@media (max-width: 900px), (max-height: 520px) { .q-remind { width: min(300px, 46vw); min-width: 0; padding: 6px 6px 8px 11px; } .qr-text { font-size: 14px; -webkit-line-clamp: 3; } .qr-title { font-size: 12px; } .qr-x { width: 32px; height: 32px; font-size: 20px; } }
@media (orientation: portrait) { .q-remind { width: min(320px, calc(100vw - 140px)); } }
.quick-send { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 2px solid #8df0b6; background: #1f7a45; color: #fff; font: 800 15.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); cursor: pointer; }
.quick-send span { max-width: 170px; overflow: hidden; white-space: nowrap; transition: max-width .3s ease, opacity .2s ease; }
.quick-send.mini { gap: 0; padding: 0 11px; } .quick-send.mini span { max-width: 0; opacity: 0; }
@media (hover: hover) { .quick-send.mini:hover { gap: 8px; padding: 0 18px; } .quick-send.mini:hover span { max-width: 170px; opacity: 1; } }
.quick-send { transition: padding .3s ease, gap .3s ease; }
.quick-send[hidden] { display: none; } .quick-send:disabled { opacity: .7; cursor: default; }

/* THE PRACTICE LIBRARY (js/librarycard.js) and PRACTISING ALONE (js/practice.js) */
#libBtn[hidden] { display: none !important; }
#libCard .cl-body { overflow-y: auto; overscroll-behavior: contain; }
.lib-list { display: flex; flex-direction: column; gap: 8px; }
.lib-row .lib-warn { margin: 2px 0 6px; font-size: 13px; color: #ffd36b; }
.lib-row.empty { border-left: 4px solid #fdc20f; }
.lib-answers { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lib-ans { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: 10px; background: rgba(0, 0, 0, .22); }
.lib-ans span { font-weight: 700; } .lib-ans small { opacity: .7; margin-right: auto; }
.lib-ans button { min-height: 34px; padding: 2px 12px; font-size: 13.5px; }
.lib-ans .lib-x { min-width: 34px; padding: 0; color: #ff9a90; border-color: rgba(255, 138, 128, .5); }
.lib-answers .lib-row { margin: 6px 0 0 10px; }
body.practising #stPick { display: inline-flex !important; }
body.practising #stCard:not([hidden]) { display: flex !important; }
body.practising #stCard #stList { overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; }
.pr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pr-lede { margin: 0; font-size: 14px; opacity: .85; }
.pr-time { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-size: 14px; font-weight: 700; cursor: pointer; }
.pr-time input { width: 20px; height: 20px; accent-color: #5ed08a; }
.pr-row.passed { border-left: 4px solid #5ed08a; } .pr-row.tried { border-left: 4px solid #fdc20f; }
.lib-row .lib-hint { margin: 2px 0 6px; font-size: 13px; opacity: .8; }
.lib-ans .lib-has { border-color: #5ed08a; color: #9be8b8; }
.lib-ans .lib-last { font-size: 12.5px; opacity: .85; } .lib-ans .lib-last.on { border-color: #fdc20f; color: #ffe08a; opacity: 1; }
.lib-row .lib-goal { margin: 2px 0 4px; font-size: 13.5px; font-weight: 700; color: #9be8b8; display: flex; gap: 8px; align-items: baseline; } .lib-goal .link { font-size: 13px; }