.small { font-size: 14px; }
.join { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.join-card { width: min(420px, 100%); display: grid; gap: 18px; background: var(--card); padding: 32px; border-radius: 16px; border: 1px solid var(--line); }
.join-card h1 { font-size: 30px; letter-spacing: -.02em; }
.join-card .error:empty { display: none; }
.input-lg { font-size: 20px; min-height: 52px; }
.btn-lg { min-height: 52px; font-size: 18px; }

.lesson { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.lesson .bar { min-height: 52px; padding: 8px 16px; }
.lesson-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me { font-weight: 700; background: var(--hl-soft); padding: 2px 10px; border-radius: 999px; }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.conn.off .dot { background: var(--warn); }

.lesson-main { min-height: 0; display: flex; }
.canvas-col { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 16px; gap: 10px; }
.note { margin: 0; padding: 8px 14px; background: var(--hl-soft); border-radius: 8px; font-weight: 600; }
.stage-frame { flex: 1; min-height: 0; }
.linkview { flex: 1; min-height: 0; }
.stage-frame .stage { box-shadow: 0 1px 2px rgba(27, 42, 65, .12), 0 6px 24px rgba(27, 42, 65, .10); border-radius: 2px; }

/* Slides for students to work on glow with a soft, slowly flowing rainbow.
   Sizes are divided by --k (the slide's scale) so the glow is the same size on every screen. */
.work-glow .stage::before {
  content: ""; position: absolute; z-index: -1; inset: calc(-8px / var(--k, 1)); border-radius: calc(12px / var(--k, 1));
  background: linear-gradient(90deg, #ff6b6b, #ffb84d, #ffe14d, #6bd88a, #5ab8ff, #a78bfa, #ff6b6b);
  background-size: 50% 100%; background-repeat: repeat-x;
  filter: blur(calc(8px / var(--k, 1))); opacity: .85; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .work-glow .stage::before { animation: rainbow-flow 8s linear infinite; }
  /* A brighter pulse when the lesson moves onto a work slide. */
  .work-glow-intro .stage::before { animation: rainbow-flow 8s linear infinite, glow-pulse 2.4s ease-out; }
}
@keyframes rainbow-flow { to { background-position: 100% 0; } }
@keyframes glow-pulse {
  0% { opacity: 0; }
  20% { opacity: 1; inset: calc(-14px / var(--k, 1)); }
  45% { opacity: .7; inset: calc(-8px / var(--k, 1)); }
  65% { opacity: 1; inset: calc(-14px / var(--k, 1)); }
  100% { opacity: .85; inset: calc(-8px / var(--k, 1)); }
}

.tray { width: 230px; flex: none; background: var(--card); border-right: 1px solid var(--line); padding: 16px; overflow-y: auto; }
.tray-help { margin: 0 0 12px; font-weight: 600; }
.tray-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.tray-done { color: var(--live); font-weight: 600; font-size: 14px; }

/* ---------- "Your teacher is looking at your work" ----------
   Sits at the top middle of the slide. The slide is scaled to fit the screen, so the note is scaled back
   by 1 / --k to stay the same size everywhere. Clicks and pen strokes pass straight through it. */
.viewing-wrap { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; justify-content: center; pointer-events: none; }
.viewing {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 13px 4px 10px; border-radius: 999px;
  background: #e6effc; color: #1a4f9c; font: 600 14px/1.4 var(--font); white-space: nowrap;
  border: 1px solid #c6d8f3; box-shadow: 0 2px 8px rgba(27, 42, 65, .12);
  margin-top: calc(12px / var(--k, 1)); transform: scale(calc(1 / var(--k, 1))); transform-origin: top center;
}
.viewing svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.viewing-short { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .viewing-wrap:not([hidden]) { animation: viewing-in .6s ease-out; }
  @keyframes viewing-in { from { opacity: 0; } }
}
@media (max-width: 760px) {
  .viewing-long { display: none; }
  .viewing-short { display: inline; }
}

/* ---------- poll card ---------- */
.canvas-col { position: relative; }
.poll-card {
  position: absolute; z-index: 20; top: 16px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 24px));
  max-height: calc(100% - 32px); overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 16px 50px rgba(27, 42, 65, .28); padding: 16px 18px 18px; display: grid; gap: 12px;
}
@media (prefers-reduced-motion: no-preference) {
  .poll-card:not([hidden]) { animation: poll-in .3s ease-out; }
  @keyframes poll-in { from { opacity: 0; transform: translate(-50%, -8px); } }
}
.poll-card-head { display: flex; align-items: center; gap: 8px; }
.poll-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #1a4f9c; text-transform: uppercase; letter-spacing: .04em; }
.poll-kicker svg, .poll-pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.poll-q { margin: 0; font-size: 20px; line-height: 1.3; overflow-wrap: anywhere; }
.poll-options { display: grid; gap: 8px; }
.poll-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px; text-align: left;
  border: 2px solid var(--line); border-radius: 12px; background: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
}
.poll-opt:hover:not(:disabled) { border-color: #9fb0c5; }
.poll-opt b { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--line-2); font-size: 14px; }
.poll-opt[aria-pressed="true"] { border-color: var(--focus); background: #eaf2fd; }
.poll-opt[aria-pressed="true"] b { background: var(--focus); color: #fff; }
.poll-opt.right { border-color: #1f8a4c; background: #e7f5ec; }
.poll-opt.right b { background: #1f8a4c; color: #fff; }
.poll-opt:disabled { cursor: default; }
.poll-rating { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.poll-rating .poll-opt { justify-content: center; font-size: 22px; font-weight: 800; min-height: 56px; }
.poll-rating-ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: -4px; }
.poll-type { display: flex; gap: 8px; }
.poll-type .input { font-size: 18px; min-height: 48px; }
.poll-status { margin: 0; font-size: 14px; color: var(--muted); }
.poll-status.ok { color: #17633f; font-weight: 600; }
.poll-status.err { color: var(--warn); font-weight: 600; }
.poll-answer-line { margin: 0; font-size: 15px; }
.poll-results { border-top: 1px solid var(--line-2); padding-top: 10px; }
.poll-results h3 { margin: 0 0 6px; font-size: 14px; }
.poll-pill {
  position: absolute; z-index: 20; top: 10px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; border: 0; background: #1a4f9c; color: #fff; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(27, 42, 65, .25);
}

/* ---------- a link the teacher shared ---------- */
.share-card {
  position: absolute; z-index: 15; inset: 10px; display: grid; grid-template-rows: auto 1fr; gap: 8px; padding: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 50px rgba(27, 42, 65, .28);
}
.share-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 0 6px; }
.share-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #1a4f9c; text-transform: uppercase; letter-spacing: .04em; }
.share-kicker svg, .share-pill svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.share-body { min-height: 0; }
.share-pill {
  position: absolute; z-index: 20; top: 10px; left: 26px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; border: 0; background: #1c64c8; color: #fff; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(27, 42, 65, .25);
}

/* ---------- live demonstration ---------- */
.demo-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 9px 16px; border-radius: 10px;
  background: var(--ink); color: #fff;
}
.demo-banner strong { font-size: 16px; }
.demo-sub { color: #c9d3e0; font-size: 14px; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff5a4f; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: live-blink 1.6s ease-in-out infinite; }
  @keyframes live-blink { 50% { opacity: .3; } }
}

@media (max-width: 760px) {
  .tool span:not(.tool-123) { display: none; }
  .tray { width: 150px; padding: 10px; }
  .canvas-col { padding: 8px; }
}

/* ---------- Quick check ----------
   One question under the slide, centred and bold so students spot it straight away. A neutral blue shows the
   answer chosen: never green or red, because students are not told whether they were right. */
.qc { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 16px 14px; background: #f6f2fd; border: 2px solid #5b3c99; border-radius: 14px; text-align: center; }
.qc-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; color: #5b3c99; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.qc-kicker svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.qc-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.qc-options.with-text { width: min(100%, 900px); display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.qc-opt {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; min-width: 76px; padding: 8px 14px;
  border: 3px solid #5b3c99; border-radius: 14px; background: #fff; color: var(--ink); font-size: 18px; font-weight: 700; cursor: pointer; text-align: left;
  box-shadow: 0 3px 0 #5b3c99;
}
.qc-options.with-text .qc-opt { justify-content: flex-start; }
.qc-options:not(.with-text) .qc-opt { min-width: 96px; min-height: 66px; }
.qc-options:not(.with-text) .qc-opt b { width: 44px; height: 44px; font-size: 26px; }
.qc-opt:hover { background: #efe8fb; }
.qc-opt:active { transform: translateY(2px); box-shadow: 0 1px 0 #5b3c99; }
.qc-opt b { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: #5b3c99; color: #fff; font-size: 22px; font-weight: 800; }
.qc-opt span { overflow-wrap: anywhere; }
.qc-opt[aria-pressed="true"] { border-color: var(--focus); background: #eaf2fd; box-shadow: 0 3px 0 var(--focus); }
.qc-opt[aria-pressed="true"] b { background: var(--focus); }
.qc-type { display: flex; gap: 8px; width: min(100%, 520px); }
.qc-type .input { font-size: 20px; min-height: 54px; border: 3px solid #5b3c99; font-weight: 600; }
.qc-type .btn { min-height: 54px; font-size: 18px; padding: 0 22px; }
.qc-status { margin: 0; font-size: 15px; color: var(--muted); }
.qc-status.ok { color: #1a4f9c; font-weight: 600; }
.qc-status.err { color: var(--warn); font-weight: 600; }
.qc-mine { color: var(--ink); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  /* A short pulse when the class arrives on a Quick check, to draw the eye. */
  .qc:not([hidden]) { animation: qc-in 1.6s ease-out; }
  @keyframes qc-in { 0% { box-shadow: 0 0 0 0 rgba(91, 60, 153, .55); } 60% { box-shadow: 0 0 0 12px rgba(91, 60, 153, 0); } }
}
@media (max-width: 760px) {
  .qc { padding: 8px 10px 10px; gap: 8px; }
  .qc-opt, .qc-options:not(.with-text) .qc-opt { min-height: 54px; min-width: 64px; }
  .qc-options.with-text { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}