/* EMTS QuizForge
   ---------------------------------------------------------------------------
   The palette, type and geometry below are lifted from the EMTS Moodle theme
   at lms.emt-school.com so that a student moving from the LMS into this tool
   does not cross a visual seam. Values were read off the live site's computed
   styles rather than eyeballed, and the LMS token name is noted beside each
   one so they can be re-synced when the LMS theme changes.

   The four live-game answer colours are the deliberate exception. They are
   chosen to be told apart from the back of a classroom, which matters more
   than matching the LMS, and they are left alone.
   --------------------------------------------------------------------------- */

/* Roboto Flex, the LMS's typeface, served from this application rather than
   from Google. Two reasons: a campus network that blocks third-party requests
   still renders the tool correctly, and no page load leaks a student's IP to
   a font CDN. The weight axis alone is 34 KB; the full variable font is 250. */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/static/fonts/roboto-flex-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/static/fonts/roboto-flex-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand ---------------------------------------------------------------- */
  --navy:        #001d62;   /* mb2-pb-headerbgcolor   page header band       */
  --navy-2:      #204c96;   /* mb2-pb-headerbgcolor2  band gradient end      */
  --navy-deep:   #041336;   /* mb2-pb-mhbgcolor       main header            */
  --blue:        #005eb8;   /* mb2-pb-accent1                                */
  --blue-bright: #0c97fb;   /* mb2-pb-btn-bgcolor                            */
  --blue-hover:  #0487e5;   /* mb2-pb-btn-bghcolor                           */
  --link:        #0083fa;   /* mb2-pb-linkcolor                              */
  --gold:        #faa307;   /* mb2-pb-accent3                                */
  --slate:       #27323a;   /* mb2-pb-accent2                                */
  --primary:     #160e69;   /* .btn-primary background                       */
  --rail-from:   #006ed7;   /* left icon rail gradient                       */
  --rail-to:     #004e99;

  /* Surfaces and text ---------------------------------------------------- */
  --bg:        #f4f5f6;
  --surface:   #ffffff;
  --surface-2: #f2f2f4;     /* the LMS card header tint, made opaque         */
  --ink:       #4f4c51;     /* mb2-pb-textcolor                              */
  --heading:   #242027;     /* mb2-pb-headingscolor                          */
  --ink-2:     #6f6b74;     /* darkened from mb2-pb-textcolor_lighten, which
                               is #a6a2a9 and fails contrast as body text    */
  --ink-3:     #a6a2a9;     /* mb2-pb-textcolor_lighten, decorative only     */
  --line:      rgba(0, 0, 0, .1);   /* mb2-pb-bordercolor                    */
  --line-solid: #e3e3e6;
  --footer-bg: #212a31;
  --footer-ink: #909699;    /* mb2-pb-textcolorondark                        */

  /* Status --------------------------------------------------------------- */
  --ok:   #25a18e;          /* mb2-pb-color_success                          */
  --warn: #ff7000;          /* mb2-pb-color_warning                          */
  --bad:  #eb455f;          /* mb2-pb-color_danger                           */
  --info: #005eb8;          /* mb2-pb-color_info                             */

  /* Geometry and type ---------------------------------------------------- */
  --radius:     7px;        /* .card                                         */
  --radius-btn: 4px;        /* .btn-primary                                  */
  --radius-in:  6px;        /* .form-control                                 */
  --shadow:     0 3px 6px rgba(0, 0, 0, .07);
  --rail-w:     58px;
  --font: "Roboto Flex", "Roboto", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

/* The LMS is light only. These keep the tool readable for anyone whose
   machine is set to dark, without inventing a second brand: the navy stays
   navy and the blues are lifted just enough to hold contrast on a dark
   ground. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #12161c;
    --surface:   #1a1f27;
    --surface-2: #232933;
    --ink:       #dfe2e8;
    --heading:   #f2f4f7;
    --ink-2:     #a7aeba;
    --ink-3:     #7c8492;
    --line:      rgba(255, 255, 255, .13);
    --line-solid: #2c333e;
    --navy:      #062a72;
    --navy-2:    #17417c;
    --link:      #58b0ff;
    --blue:      #4da3f0;
    --blue-bright: #2f9bf5;
    --primary:   #2b2394;
    --ok:   #3ec4ac;
    --warn: #ff9540;
    --bad:  #ff6c83;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.56;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); }

h1, h2, h3, h4 {
  color: var(--heading);
  font-weight: 600;
  line-height: 1.125;
  margin: 0;
}

:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }

/* ===========================================================================
   The shell: logo bar, icon rail, page header band, footer.
   Laid out to mirror the LMS so the two products read as one system.
   =========================================================================== */

.logobar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  position: relative;
  z-index: 5;
}
.logobar .brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--heading);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.01em;
}
.logobar .brand .wordmark { font-weight: 700; }
.logobar .brand .product { color: var(--ink-2); font-weight: 400; }
/* Two files rather than a CSS filter. The marks carry brand reds and blues
   that an invert would destroy; the dark variant lifts only the near-black
   pixels and leaves the colour alone. */
.mark { display: block; height: 34px; width: auto; }
.mark-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .mark { display: none; }
  .mark-dark { display: block; }
}
.logobar .who {
  position: absolute;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-2);
}
.logobar .who a { color: var(--ink-2); }

/* The icon rail. Fixed, because in the LMS it never scrolls away. */
.rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--rail-w);
  background: linear-gradient(var(--rail-from), var(--rail-to));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 78px;
  gap: 4px;
  z-index: 20;
}
.rail a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #fff;
  opacity: .78;
  text-decoration: none;
  position: relative;
}
.rail a:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.rail a.here { opacity: 1; background: rgba(255, 255, 255, .2); }
.rail a svg { width: 20px; height: 20px; display: block; }
/* Label on hover, because an icon rail with no words is a guessing game the
   first week and the LMS does the same thing. */
.rail a .tip {
  position: absolute;
  left: calc(100% + 10px);
  white-space: nowrap;
  background: var(--slate);
  color: #fff;
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-4px);
  transition: opacity .12s ease, transform .12s ease;
}
.rail a:hover .tip, .rail a:focus-visible .tip { opacity: 1; transform: none; }
.rail .spacer { margin-top: auto; }

/* Column layout so the footer sits at the bottom of a short page instead of
   halfway up it. */
.shell { display: flex; flex-direction: column; min-height: calc(100vh - 64px); }
.shell > main { flex: 1 0 auto; }
.shell.railed { margin-left: var(--rail-w); }
@media (max-width: 700px) {
  .rail { flex-direction: row; inset: auto 0 0 0; width: auto; height: 54px;
          padding: 0 8px; justify-content: space-around; }
  .rail a .tip { display: none; }
  .shell.railed { margin-left: 0; padding-bottom: 54px; }
}

/* The navy band. The wave is the LMS's, redrawn as an inline SVG so the page
   stays self-contained. */
.pagehead {
  background:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.055' d='M0 118 L240 96 L520 132 L820 88 L1120 124 L1440 92 L1440 200 L0 200 Z'/%3E%3Cpath fill='%23ffffff' fill-opacity='0.07' d='M0 158 L300 138 L640 170 L980 134 L1240 162 L1440 140 L1440 200 L0 200 Z'/%3E%3C/svg%3E")
    bottom / 100% 100% no-repeat,
    linear-gradient(105deg, var(--navy) 0%, var(--navy) 55%, var(--navy-2) 100%);
  color: #fff;
  padding: 26px 32px 16px;
}
.pagehead .inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 24px;
}
.pagehead h1 {
  color: #fff;
  font-size: clamp(21px, 2.4vw, 29.5px);
  margin: 0 0 2px;
  flex: 1 1 auto;
}
.pagehead .sub { color: rgba(255, 255, 255, .82); margin: 0; font-size: 14.5px; flex-basis: 100%; }
.pagehead .crumbs {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, .8);
  margin-top: 14px;
}
.pagehead .crumbs a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.pagehead .crumbs a:hover { color: #fff; text-decoration: underline; }
.pagehead .crumbs .sep { opacity: .5; }
.pagehead .headactions { display: flex; gap: 8px; align-items: center; }

main { max-width: 1080px; margin: 0 auto; padding: 26px 32px 72px; }
main.wide { max-width: 1360px; }

.sitefoot {
  background: var(--footer-bg);
  color: var(--footer-ink);
  font-size: 13.5px;
  padding: 26px 32px;
}
.sitefoot .inner {
  max-width: 1360px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center;
}
.sitefoot a { color: var(--footer-ink); }
.sitefoot .byline {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; opacity: .85;
}
.sitefoot .byline:hover { opacity: 1; }
.sitefoot .byline img { display: block; height: 20px; width: auto; }

/* ===========================================================================
   Content
   =========================================================================== */

h1 { font-size: 24px; margin: 0 0 6px; }
h2 { font-size: 19.5px; font-weight: 500; margin: 28px 0 10px; }
h3 { font-size: 16px; margin: 18px 0 8px; }
.sub { color: var(--ink-2); margin: 0 0 22px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.stat { text-align: left; }
.stat .n { font-size: 30px; font-weight: 600; color: var(--heading); letter-spacing: -.02em; }
.stat .l { font-size: 13px; color: var(--ink-2); }

label { display: block; font-size: 13px; font-weight: 500; color: var(--heading); margin: 14px 0 5px; }
label.inline { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; color: var(--ink); margin: 4px 14px 4px 0; }

input[type=text], input[type=number], input[type=password], select, textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-in);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
textarea { min-height: 110px; resize: vertical; font-family: var(--mono); font-size: 13px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue-bright);
  box-shadow: 0 0 0 3px rgba(12, 151, 251, .18);
}

.btn {
  display: inline-block;
  padding: 10px 15px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: #241a8c; border-color: #241a8c; }
.btn.ghost { background: transparent; color: var(--link); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface-2); color: var(--link); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.ok:hover { filter: brightness(1.06); }
.btn.bad { background: transparent; color: var(--bad); border-color: var(--bad); }
.btn.bad:hover { background: var(--bad); color: #fff; }
.btn.lg { padding: 14px 28px; font-size: 17px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* On the navy band, the filled indigo button disappears into the ground. */
.pagehead .btn { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: #fff; }
.pagehead .btn:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .5); }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); font-weight: 600; }
.scroll-x { overflow-x: auto; }

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.pill.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: color-mix(in srgb, var(--ok) 78%, black); }
.pill.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: color-mix(in srgb, var(--warn) 72%, black); }
.pill.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: color-mix(in srgb, var(--bad) 74%, black); }
@media (prefers-color-scheme: dark) {
  .pill.ok { color: var(--ok); }
  .pill.warn { color: var(--warn); }
  .pill.bad { color: var(--bad); }
}

.stem { font-size: 15.5px; line-height: 1.6; margin: 0 0 12px; }

ol.options { list-style: none; padding: 0; margin: 0; counter-reset: opt; }
ol.options li {
  border: 1px solid var(--line);
  border-radius: var(--radius-in);
  padding: 10px 12px;
  margin-bottom: 7px;
  background: var(--surface);
}
ol.options li.correct { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
ol.options li .lab { font-weight: 600; color: var(--heading); margin-right: 7px; }
ol.options li .why { font-size: 13px; color: var(--ink-2); margin-top: 6px; }

.note { font-size: 13px; color: var(--ink-2); }
.flagbox, .errbox, .okbox {
  padding: 10px 13px;
  border-radius: 0 var(--radius-in) var(--radius-in) 0;
  font-size: 13.5px;
  margin: 10px 0;
}
.flagbox { border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.errbox { border-left: 3px solid var(--bad); background: color-mix(in srgb, var(--bad) 9%, transparent); }
.okbox { border-left: 3px solid var(--ok); background: color-mix(in srgb, var(--ok) 9%, transparent); }

/* Ask about this question ------------------------------------------------ */
.askbox { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.askbox summary {
  cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--link);
  list-style: none; display: inline-flex; align-items: center; gap: 7px;
}
.askbox summary::-webkit-details-marker { display: none; }
.askbox summary::before { content: "?"; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--blue);
  color: #fff; font-size: 11px; font-weight: 600; }
.ask-body { margin-top: 10px; }
.ask-q { flex: 1 1 260px; }
.ask-answer {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-in);
  background: var(--surface-2); white-space: pre-wrap; line-height: 1.55;
  color: var(--ink);
}
.ask-answer.ask-error { background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); }

.meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }

/* ===========================================================================
   Live game.
   Full bleed, no rail, no band. The four answer colours are chosen to be
   distinguishable from the back of a classroom and are deliberately NOT the
   LMS palette: a student has to match the tile on their phone to the tile on
   the projector without reading either one.
   =========================================================================== */

.stage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24px 32px 32px;
  background: var(--bg);
}
.stage .pinbar { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.joinqr {
  background: #fff; padding: 10px; border-radius: var(--radius); line-height: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14); flex: none;
}
.joinqr img { display: block; width: 150px; height: 150px; }
.joinurl { font-family: var(--mono); font-size: 22px; font-weight: 500; line-height: 1.2; }
.stage .pin { font-size: 40px; font-weight: 700; letter-spacing: .12em; font-family: var(--mono); color: var(--heading); }
.stage .pinlabel { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.stage .qstem { font-size: clamp(22px, 3.2vw, 40px); line-height: 1.28; font-weight: 600; color: var(--heading); margin: 24px 0; }

.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .answers { grid-template-columns: 1fr; } }

.answer {
  border-radius: 10px;
  padding: 18px 20px;
  font-size: clamp(15px, 1.7vw, 21px);
  font-weight: 600;
  color: #fff;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 3px solid transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.answer .lab { font-weight: 800; opacity: .85; }
.answer.a { background: #b4261c; }
.answer.b { background: #1e5aa8; }
.answer.c { background: #9a6206; }
.answer.d { background: #1c7a4a; }
.answer.e { background: #6b3fa0; }
.answer.f { background: #0d6f75; }
.answer.dim { background: var(--surface-2); color: var(--ink-3); }
.answer.picked { border-color: var(--heading); box-shadow: 0 0 0 4px rgba(0, 0, 0, .18); }
.answer.win { border-color: var(--heading); }

.timer { font-size: 44px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 90px; text-align: center; color: var(--heading); }
.timer.low { color: var(--bad); }

.leaderboard { list-style: none; padding: 0; margin: 0; }
.leaderboard li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--radius-in);
  background: var(--surface-2); margin-bottom: 7px; font-size: 16px;
}
.leaderboard li .rank { font-weight: 700; width: 30px; color: var(--ink-2); }
.leaderboard li .pts { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

.brandpreview { width: 46px; height: 34px; border-radius: 6px; border: 1px solid var(--line); flex: none; }
.budget-head { display: flex; align-items: baseline; gap: 12px; }
.budget .bar { margin-top: 8px; }
.bar .fill.over { background: var(--bad); }

.bars { display: grid; gap: 7px; margin-top: 14px; }
.bar { display: flex; align-items: center; gap: 10px; font-size: 14px; }
/* Both are spans, and an inline element ignores width and height, so without
   this every distribution bar renders empty no matter what the numbers say.
   The bug is invisible in code review and obvious on a projector. */
.bar .track, .bar .fill { display: block; }
.bar .track { flex: 1; height: 22px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.bar .fill { height: 100%; background: var(--blue); transition: width .35s ease; }
.bar .fill.right { background: var(--ok); }
.bar .opt { flex: 0 1 34%; min-width: 0; color: var(--ink-2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.bar .n { width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

.big-verdict { font-size: clamp(30px, 6vw, 64px); font-weight: 700; text-align: center; margin: 30px 0 10px; }
.big-verdict.right { color: var(--ok); }
.big-verdict.wrong { color: var(--bad); }

.center-screen {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px; text-align: center;
}
.center-screen .card { width: 100%; max-width: 420px; text-align: left; }

.hidden { display: none !important; }

.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  background: var(--surface);
  user-select: none;
}
.chip.on { background: var(--blue); color: #fff; border-color: var(--blue); }

progress { width: 100%; height: 8px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}