/* The app layer: sign-in and main menu (.el-menu), the Menu button, and the lesson card (.el-card).
   Uses the site's own colours and fonts (index.html :root): St. Joseph navy and old gold. */

/* ----- Menu and sign-in: over everything ----- */
.el-menu { position: fixed; inset: 0 0 var(--foot, 0px); z-index: 50; display: grid; place-items: center; overflow-y: auto; overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: rgba(0, 20, 46, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.el-sheet { width: min(620px, 100%); display: grid; gap: 14px; padding: 22px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.el-title { margin: 0; font: 700 34px/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; }
.el-title b { color: var(--accent); }
.el-sub, .el-small { margin: 0; color: var(--ink-2); }
.el-small { font-size: 13px; }
.el-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.el-who { margin: 0; color: var(--ink-2); font-size: 14px; }
.el-who b { color: var(--ink); font-family: var(--f-mono); }
.el-signin { display: grid; gap: 8px; }
.el-signin label { font-weight: 600; }
.el-signin input, .el-number input { min-height: var(--tap); padding: 0 14px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); font: 500 20px var(--f-mono); letter-spacing: .08em; width: 100%; }
.el-signin input:focus, .el-number input:focus, .el-text textarea:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.el-err { margin: 0; min-height: 1.2em; color: var(--bad); font-size: 14px; }
.el-link { background: none; border: 0; padding: 6px 0; color: var(--accent); text-decoration: underline; cursor: pointer; font-size: 14px;
  min-height: 36px; text-align: left; justify-self: start; }
.el-continue { display: grid; gap: 2px; padding: 10px 16px; text-align: left; min-height: 60px; }
.el-continue small { color: #b9cad8; font-size: 13px; }
.el-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.el-item { width: 100%; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "tag title state" "tag blurb state";
  gap: 2px 12px; align-items: center; text-align: left; padding: 12px 14px; min-height: 64px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--raise); }
@media (hover: hover) { .el-item:not([disabled]):hover { border-color: var(--accent); } }
.el-item[disabled] { cursor: default; opacity: .55; }
.el-item .el-tag { grid-area: tag; font: 600 12px var(--f-mono); color: var(--ink-2); width: 72px; }
.el-item b { grid-area: title; font-weight: 600; }
.el-blurb { grid-area: blurb; color: var(--ink-2); font-size: 13px; }
.el-state { grid-area: state; font-size: 12px; padding: 3px 8px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap; color: var(--ink-2); }
.el-item[data-state="going"] .el-state { border-color: var(--warn); color: var(--warn); }
.el-item[data-state="done"] .el-state { border-color: var(--good); color: var(--good); }
.el-item[data-state="done"] .el-state::before { content: "✓ "; }
.el-item[data-state="free"] .el-state { display: none; }
@media (max-width: 520px) {
  .el-sheet { padding: 16px; }
  .el-item { grid-template-columns: 1fr auto; grid-template-areas: "tag state" "title title" "blurb blurb"; }
  .el-item .el-tag { width: auto; }
}

/* ----- The Menu button, top right of the model ----- */
.el-menubtn { position: absolute; top: 10px; right: 10px; z-index: 6; min-height: 44px; padding: 0 16px;
  background: var(--navy, #001e42); border-color: #2a4a76; color: #fff; font-weight: 600; box-shadow: 0 6px 18px rgba(0, 20, 46, .25); }
body.el-menu-open .el-menubtn { display: none; }

/* ----- The lesson card ----- */
.el-card { display: grid; gap: 8px; align-content: start; padding: 14px 16px; border-radius: 12px;
  background: rgba(0, 30, 66, .97); border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(0, 20, 46, .35); }
.stage > .el-card { position: absolute; left: 12px; bottom: 12px; z-index: 5; width: min(420px, calc(100% - 24px));
  max-height: calc(100% - 76px); overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.el-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.el-where { font: 500 12px var(--f-mono); color: var(--ink-2); }
.el-fold { padding: 0; min-height: 32px; }
.el-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.el-bar i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.el-body { display: grid; gap: 10px; align-content: start; overflow-y: auto; overscroll-behavior: contain; min-height: 0;
  padding: 0 4px; margin: 0 -4px; }   /* room inside the scroll edge for the answer boxes' 3px+1px focus ring, which was cut off on the left */
.el-body h3 { margin: 0; font: 700 22px/1.1 var(--f-display); letter-spacing: .02em; }
.el-body p { margin: 0; }
.el-look { color: #d9e2f0; font-size: 14px; padding-left: 10px; border-left: 3px solid var(--accent); }
.el-row { display: flex; flex-wrap: wrap; gap: 8px; }
.el-row .btn { flex: 1 1 auto; }
.el-card.folded .el-body, .el-card.folded .el-nav, .el-card.folded .el-bar { display: none; }

.el-q { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.el-qtext { font-weight: 600; }
.el-wsl { font: 500 11px var(--f-mono); color: var(--ink-2); margin-bottom: -4px; }
.el-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.el-opt { flex: 1 1 calc(50% - 6px); min-height: 44px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--raise); cursor: pointer; text-align: center; }
.el-opt[aria-checked="true"] { border-color: var(--accent); background: #1d3a63; color: #fff; box-shadow: inset 0 0 0 1px var(--accent); }
.el-opt[disabled] { cursor: default; opacity: .75; }
.el-seg .el-opt { flex: 1 1 0; padding: 6px 4px; font-size: 14px; }
.el-pos { display: grid; gap: 10px; }
.el-field { display: grid; gap: 4px; }
.el-field > span { font-size: 13px; color: var(--ink-2); }
.el-text { display: grid; gap: 2px; }
.el-text textarea { width: 100%; resize: vertical; min-height: 72px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); font: 15px/1.4 var(--f-body); color: var(--ink); }
.el-text textarea[disabled] { opacity: .8; }
.el-count { color: var(--ink-2); font-size: 12px; min-height: 1em; }
.el-number { display: flex; align-items: center; gap: 8px; }
.el-number input { width: 9em; font-size: 18px; }
.el-hint { color: var(--warn); font-size: 14px; }
.el-picked { margin: 0; padding-left: 1.6em; display: grid; gap: 2px; font-weight: 600; }
.el-blank { margin: 0; padding-left: 1.2em; }
.el-handin { display: grid; gap: 10px; }

/* While a lesson runs: no topic switching under it, and no stroke name to copy during the test. */
body.el-lesson #topicsNav, body.el-lesson .topics-bar, body.el-lesson #lesson { display: none !important; }
body.el-quiz .stroke:has(#stroke) { visibility: hidden; }
body.el-lesson .readout { visibility: hidden; }   /* no crank degrees in the lessons */

/* Phones: the card is in the dock under the model, as the site's own lesson card is. */
.dock > .el-card { box-shadow: none; padding: 10px 12px; gap: 6px; }
.dock > .el-card .el-body { overflow: visible; }
.dock > .el-card .el-body h3 { font-size: 19px; }
.dock > .el-card .el-head { position: sticky; top: -10px; background: #001e42; z-index: 1; margin: -10px -12px 0; padding: 6px 12px;
  box-shadow: 0 -24px 0 #001e42; }   /* solid, and covering the dock's top padding too, so scrolled text never shows above or through it (3 Nov 2026) */
.dock > .el-card .el-nav { position: sticky; bottom: -10px; background: #001e42; z-index: 1; margin: 0 -12px -10px; padding: 8px 12px; box-shadow: 0 24px 0 #001e42; }
.el-pos > .el-row { flex-wrap: nowrap; } .el-pos > .el-row .btn { padding: 0 10px; white-space: nowrap; }

/* ----- The heat gauge: top right of the model, under the Menu button ----- */
.el-gauge { position: absolute; top: 62px; right: 10px; z-index: 4; width: min(230px, calc(100% - 120px)); display: grid; gap: 6px;
  padding: 10px 12px; border-radius: 10px; background: rgba(0, 30, 66, .94); border: 1px solid var(--line); font-size: 13px; }
.el-g { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: baseline; }
.el-g span { color: var(--ink-2); }
.el-g b { font: 600 18px var(--f-mono); }
.el-gbar { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: #0b2c57; overflow: hidden; }
.el-gbar em { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #3f86ff, #ff7a1a); }
.el-gPbar { background: var(--accent) !important; }
.el-gauge.hot .el-gT { color: #ffb15c; }
.el-gmax { margin: 0; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 0 6px; align-items: center; }
.el-gmax b { color: var(--ink); font-family: var(--f-mono); font-weight: 500; }
.el-gmax .el-link { min-height: 28px; padding: 0; font-size: 13px; }
.el-gwarn { margin: 0; color: #ffd0c8; background: rgba(120, 30, 20, .6); border: 1px solid var(--bad); border-radius: 8px; padding: 6px 8px; animation: el-pulse .6s infinite alternate; }
@keyframes el-pulse { to { box-shadow: 0 0 14px var(--bad); } }
@media (prefers-reduced-motion: reduce) { .el-gwarn { animation: none; } }
/* On a phone it's small, top left over the model (the card is in the dock below). */
@media (max-width: 820px), (max-height: 500px) {
  .el-gauge { top: 6px; left: 6px; right: auto; padding: 6px 8px; gap: 3px; font-size: 11px; width: min(170px, calc(100% - 100px)); }
  .el-g b { font-size: 14px; } .el-gbar { height: 5px; } .el-gmax { display: none; }
  .el-gwarn { font-size: 12px; padding: 4px 6px; } .el-glong { display: none; }
}

/* ----- Slider that moves the piston ----- */
.el-slider { display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.el-slider input { width: 100%; min-height: 40px; accent-color: var(--accent); }
.el-slider-ends { display: flex; justify-content: space-between; font-size: 12px; }

/* ----- Lesson 3 workbench ----- */
.el-bench { display: grid; gap: 8px; }
.el-chamber { width: 100%; max-width: 260px; justify-self: center; background: #0b1f3a; border-radius: 8px; }
.el-readings { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.el-readings div { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.el-readings dt { font-size: 12px; color: var(--ink-2); }
.el-readings dd { margin: 0; font: 600 17px var(--f-mono); }
.el-bwarn { margin: 0; color: #ffd0c8; font-size: 14px; }
.el-bench .el-seg .el-opt { font-size: 13px; }

/* ----- How to Play: the one thing to press glows; tapping a part names it ----- */
.el-glow { animation: el-glow 1s ease-in-out infinite alternate; outline: 3px solid var(--warn) !important; outline-offset: 2px; }
#scene.el-glow { outline-offset: -6px; }
@keyframes el-glow { to { box-shadow: 0 0 18px var(--warn); } }
@media (prefers-reduced-motion: reduce) { .el-glow { animation: none; } }
.el-done { color: var(--good); font-weight: 600; }
.el-skip { font-size: 13px; justify-self: center; }
.el-tap { position: absolute; z-index: 6; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; padding: 4px 10px; border-radius: 6px;
  background: rgba(0, 30, 66, .94); border: 1px solid var(--accent); color: #fff; white-space: nowrap;
  font: 600 15px/1.3 var(--f-display); letter-spacing: .05em; text-transform: uppercase; }
.el-tap small { display: block; font: 500 11px/1.3 var(--f-body, sans-serif); letter-spacing: 0; text-transform: none; color: #9fb0bf; text-align: center; }
.el-tapq .el-more { color: var(--muted, #9aa6b2); margin-top: 2px; }
.el-tapans { margin: 10px 0 6px; padding: 10px 12px; border: 1px dashed var(--line, #3a444d); border-radius: 8px; }
.el-tapans b { font-size: 17px; color: var(--accent); }
.el-tapans.set { border-style: solid; border-color: var(--accent); }

/* ----- The open-house loop (/?demo): the model fills the screen, with big captions ----- */
body.el-demo .app { display: block; height: 100%; height: calc(100svh - var(--foot, 0px)); }
body.el-demo .app > :not(#stage) { display: none !important; }
body.el-demo #stage { position: fixed; inset: 0 0 var(--foot, 0px); }
body.el-demo .el-menu, body.el-demo .el-menubtn, body.el-demo #lesson, body.el-demo .topics-bar, body.el-demo #cuHud, body.el-demo #demo { display: none !important; }
.el-cap { position: absolute; left: 50%; bottom: max(24px, 4vh); transform: translateX(-50%); z-index: 7; width: min(1100px, calc(100% - 32px));
  padding: 18px 28px 16px; border-radius: 14px; background: rgba(0, 30, 66, .88); border: 1px solid rgba(255, 255, 255, .12);
  color: #eef3f7; text-align: center; pointer-events: none; backdrop-filter: blur(6px); }
.el-cap small { display: block; font: 600 clamp(12px, 1.3vw, 16px)/1.2 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.el-cap h2 { margin: 6px 0 4px; font: 700 clamp(26px, 3.6vw, 52px)/1.1 var(--f-display); }
.el-cap p { margin: 0 auto; max-width: 52ch; font-size: clamp(17px, 2vw, 28px); line-height: 1.35; color: #d3dde6; }
.el-cap i { display: block; margin-top: 10px; font-style: normal; font-size: clamp(12px, 1.1vw, 15px); color: #8d9aa6; }
.el-cap.el-paused { bottom: auto; top: 16px; padding: 10px 20px; }
.el-cap.el-paused h2 { font-size: clamp(20px, 2.4vw, 32px); }
.el-cap.el-paused p { font-size: clamp(14px, 1.4vw, 19px); }
/* On a phone the tap card is short, so the answer shows without scrolling: no second sentence, slimmer buttons. */
@media (max-width: 820px), (max-height: 500px) {
  .el-tapq .el-more { display: none; }
  .el-tapq .el-tapans { margin: 6px 0 4px; padding: 6px 10px; }
  .el-tapq .el-row .btn { padding: 6px 10px; min-height: 36px; font-size: 14px; }
  .el-card:has(.el-tapq) .el-body > h3 { display: none; }
}

/* ----- The coach (matching practice): one note, a gold ring on the thing to use, everything else dimmed ----- */
.el-dim { position: fixed; z-index: 40; pointer-events: none; border-radius: 14px;
  box-shadow: 0 0 0 200vmax rgba(8, 11, 15, .6), inset 0 0 18px 6px rgba(8, 11, 15, .45); transition: left .3s, top .3s, width .3s, height .3s, border-radius .3s; }
.el-dim.round { border-radius: 50%; }
.stage > .el-card { transition: opacity .3s; }
body.el-coach-model .stage > .el-card { opacity: .4; }
body.el-coach-under .stage > .el-card { opacity: .25; pointer-events: none; }
.el-ring { position: fixed; z-index: 41; pointer-events: none; border: 3px solid #ffcf86; border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), 0 0 18px #ffcf86; animation: el-ring 1.2s ease-in-out infinite; }
.el-ring.round { border-radius: 50%; }
@keyframes el-ring { 50% { box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), 0 0 30px 6px #ffcf86; } }
.el-coach { position: fixed; z-index: 42; box-sizing: border-box; padding: 10px 14px 12px; border-radius: 14px; background: #fffdf6; color: #000;
  border: 2px solid #ffcf86; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font: 600 15px/1.4 var(--f-body); overflow-wrap: anywhere; }
.el-coach.pop { animation: el-coach-pop .35s ease; }
@keyframes el-coach-pop { from { opacity: 0; transform: translateY(-6px); } }
.el-coach-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.el-coach-k { font: 700 12px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: #9a5b00; }
.el-coach-skip { background: none; border: 1px solid rgba(0, 0, 0, .3); border-radius: 999px; padding: 4px 10px; font: 600 12px var(--f-body); color: #333; cursor: pointer; }
.el-coach-t { margin: 0; color: #000; }
.el-coach-t b { color: #7a2f00; }
.el-coach-ok { margin-top: 8px; min-height: 40px; }
.el-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.el-list b { color: var(--ink); }
@media (max-width: 820px), (max-height: 500px) { .el-coach { font-size: 14px; padding: 8px 12px 10px; } }
@media (prefers-reduced-motion: reduce) { .el-ring, .el-coach.pop { animation: none; } .el-dim { transition: none; } }

/* During the test, no part names to read off: Show labels and the part list are hidden (and labels are off). */
body.el-quiz .toggle:has(#labels), body.el-quiz .group:has(#partToggles) { display: none; }

/* ----- St. Joseph crest on the sign-in and menu ----- */
.el-title { display: flex; align-items: center; gap: 12px; }
.el-crest { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: #fff; flex: none; }
.el-crest img { width: 48px; height: 49px; display: block; }

/* ----- Question cards fill the screen. View engine folds them to a strip so the model shows. ----- */
.el-peek { display: none; }
.el-card.el-full:not(.folded) { position: fixed; inset: 0 0 var(--foot, 0px) 0; z-index: 45; width: auto; max-height: none; margin: 0;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  overflow: hidden; background: #fff; color: #0d1b38;
  --bg: #f2f5fb; --raise: #ffffff; --line: #cfd7e6; --ink: #0d1b38; --ink-2: #4b5a78; --accent: #001e42; --warn: #8a5a00; --good: #1e7a45; --bad: #b3261e; }
.el-card.el-full:not(.folded) .el-head { padding: 12px max(24px, env(safe-area-inset-right, 0px)) 12px max(24px, env(safe-area-inset-left, 0px));
  background: var(--navy, #001e42); color: #fff; margin: 0; position: static; }
.el-card.el-full:not(.folded) .el-where { color: #c9d4ea; font-size: 13px; }
.el-card.el-full .el-fold { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--gold, #b39a24); color: var(--navy, #001e42); text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap; flex: none; }
.el-card.el-full .el-fold::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z' fill='none' stroke='black' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; }
.el-card.el-full.folded .el-fold { background: #fff; }
.el-card.el-full.folded .el-fold::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.el-card.el-full:not(.folded) .el-bar { height: 8px; border-radius: 0; background: #1d3a63; }
.el-card.el-full .el-bar i { background: var(--gold, #b39a24); }
.el-card.el-full:not(.folded) .el-body { display: block; overflow-y: auto; margin: 0; padding: 28px max(24px, env(safe-area-inset-right, 0px)) 28px max(24px, env(safe-area-inset-left, 0px)); }
.el-card.el-full:not(.folded) .el-body > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.el-card.el-full:not(.folded) .el-body > * + * { margin-top: 14px; }
.el-card.el-full:not(.folded) .el-body h3 { font: 700 17px/1.1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--navy, #001e42); }
.el-card.el-full:not(.folded) .el-body h3::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 10px; background: var(--gold, #b39a24); }
.el-card.el-full:not(.folded) .el-qtext { font-size: 21px; line-height: 1.35; color: #0d1b38; }
.el-card.el-full:not(.folded) .el-q { gap: 12px; padding-top: 16px; }
.el-card.el-full:not(.folded) .el-text textarea { font-size: 16px; min-height: 96px; }
.el-card.el-full:not(.folded) .el-look { color: #4b5a78; border-left-color: var(--gold, #b39a24); }
.el-card.el-full:not(.folded) .el-opt[aria-checked="true"] { background: var(--navy, #001e42); color: #fff; border-color: var(--navy, #001e42); box-shadow: inset 0 -3px 0 var(--gold, #b39a24); }
.el-card.el-full:not(.folded) .el-opt { color: #0d1b38; }
.el-card.el-full:not(.folded) .btn { background: #fff; border-color: #cfd7e6; color: #0d1b38; }
.el-card.el-full:not(.folded) .btn.primary { background: var(--navy, #001e42); border-color: var(--navy, #001e42); color: #fff; box-shadow: inset 0 -3px 0 var(--gold, #b39a24); }
.el-card.el-full:not(.folded) .el-link { color: #001e42; }
.el-card.el-full:not(.folded) .el-bwarn { color: #b3261e; }
.el-card.el-full:not(.folded) .el-readings dd, .el-card.el-full:not(.folded) .el-bench { color: #0d1b38; }
.el-card.el-full:not(.folded) .el-nav { flex-wrap: nowrap; justify-content: space-between; margin: 0; padding: 12px max(24px, env(safe-area-inset-right, 0px)) 12px max(24px, env(safe-area-inset-left, 0px));
  border-top: 1px solid #dfe5ef; background: #f2f5fb; position: static; }
.el-card.el-full:not(.folded) .el-nav .btn { flex: 0 1 200px; }
.el-card.el-full .el-skip { justify-self: center; }
/* Folded: a navy strip with the card's title and Back to question. */
.el-card.el-full.folded { grid-template-rows: auto; padding: 8px 8px 8px 16px; border-left: 6px solid var(--gold, #b39a24); }
.el-card.el-full.folded .el-peek { display: block; flex: 1; min-width: 0; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-card.el-full.folded .el-where { color: var(--accent); font: 700 14px/1.1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.stage > .el-card.el-full.folded { top: 12px; bottom: auto; left: 12px; width: min(760px, calc(100% - 120px)); }
.dock > .el-card.el-full.folded { padding: 8px 8px 8px 12px; }
.dock > .el-card.el-full.folded .el-head { position: static; margin: 0; padding: 0; background: none; flex-wrap: wrap; gap: 4px 10px; }
.dock > .el-card.el-full.folded .el-where { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.dock > .el-card.el-full.folded .el-peek { order: 3; flex-basis: 100%; font-size: 14px; white-space: normal; }
.dock > .el-card.el-full.folded .el-fold { margin-left: auto; min-height: 40px; padding: 0 14px; font-size: 14px; }
.dock:has(> .el-card.el-full:not(.folded)) { padding: 0; border: 0; }
body.el-fullq .el-menubtn { z-index: 6; }

/* ----- The model's controls for this question, over the model: Watch it again, Go to position, actions, slider ----- */
.el-view { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 5; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
  width: max-content; max-width: calc(100% - 24px); padding: 8px; border-radius: 16px; background: rgba(0, 30, 66, .92); box-shadow: 0 10px 30px rgba(0, 20, 46, .3); }
.el-view .el-row { flex-wrap: nowrap; gap: 6px; }
.el-view .btn { flex: none; padding: 0 16px; white-space: nowrap; }
.el-view .el-watch { min-height: 52px; padding: 0 26px 0 20px; border-radius: 999px; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; }
.el-view .el-watch::before { content: ""; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5a7 7 0 1 1-6.6 4.7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M4 4v6h6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5a7 7 0 1 1-6.6 4.7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M4 4v6h6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.el-view:has(> .el-watch:only-child) { padding: 0; background: none; box-shadow: none; }
.el-view:has(> .el-watch:only-child) .el-watch { box-shadow: 0 10px 28px rgba(0, 20, 46, .3); }
.el-view .el-slider { min-width: min(320px, 70vw); color: #d9e2f0; padding: 0 8px; }
@media (max-width: 820px), (max-height: 500px) {
  .el-card.el-full:not(.folded) .el-head { padding: 8px 10px 8px 14px; flex-wrap: nowrap; gap: 8px; }
  .el-card.el-full .el-where { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .el-card.el-full:not(.folded) .el-where { font-size: 12px; }
  .el-card.el-full .el-fold { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .el-card.el-full:not(.folded) .el-body { padding: 18px 16px; }
  .el-card.el-full:not(.folded) .el-qtext { font-size: 18px; }
  .el-card.el-full:not(.folded) .el-nav { padding: 10px 14px; }
  .el-card.el-full:not(.folded) .el-nav .btn { flex: 1; }
  .el-view { bottom: 74px; padding: 6px; gap: 6px; }
  .el-view .btn { padding: 0 10px; font-size: 14px; }
  .el-view .el-watch { min-height: 48px; font-size: 15px; }
}

/* Class picker for the Teacher Hub, under "Signed in as" (7 Nov 2026) */
.el-class { flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.el-class select, .el-class input { min-height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; max-width: 100%; }
.el-class select:focus, .el-class input:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.el-hubst:empty { display: none; }