/* console-light: shared theme for micro-business slides and games.
   Spec: MICRO-CAN/00_admin/STYLE_PREFERENCES.md (minimal, monospace, light, pastel). */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --bg: #fdfdfb;
  --ink: #111111;
  --dim: #777777;
  --faint: #bbbbbb;
  --line: #222222;
  --accent: #0062C4;
  --good: #2ECC40;
  --warn: #FFDC00;
  --bad: #FF4136;
  --p-green: #E6F5E6;
  --p-yellow: #FFF9D0;
  --p-pink: #FDE4E6;
  --p-blue: #E4EFFA;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  color-scheme: light;
}

html, body { background: var(--bg); }

.reveal-viewport { background: var(--bg); }
.reveal {
  font-family: var(--mono);
  font-size: 30px;
  color: var(--ink);
}
.reveal .slides { text-align: left; }
.reveal .slides section { height: 100%; }

/* frame title: small, bold, top-left */
.reveal h2 {
  font-family: var(--mono);
  font-size: 0.95em;
  font-weight: 600;
  margin: 0 0 0.15em 0;
  color: var(--ink);
  text-transform: lowercase;
}
.reveal h2::before { content: "> "; color: var(--dim); font-weight: 400; }
.reveal .sub { color: var(--dim); font-style: italic; font-size: 0.75em; margin: 0 0 1.2em 0; }

.reveal p, .reveal li { line-height: 1.4; }
.dim { color: var(--dim); }
.small { font-size: 0.7em; }
.big { font-size: 1.6em; font-weight: 600; }
.center { text-align: center; }
.cursor::after { content: "_"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* title slide */
.title-block { position: absolute; top: 38%; left: 0; }
.title-block .t { font-size: 1.5em; font-weight: 600; }
.title-block .s { color: var(--dim); font-size: 0.7em; margin-top: 0.4em; }
.title-block .a { margin-top: 2.2em; font-size: 0.75em; }

/* label | statement rows */
.rows { display: grid; grid-template-columns: max-content 1fr; gap: 0.55em 1.6em; margin-top: 1.6em; align-items: baseline; }
.rows .k { color: var(--dim); font-size: 0.7em; }
.rows .v { font-size: 0.95em; }

/* pastel boxes */
.boxes { display: flex; gap: 0.7em; margin-top: 1.4em; align-items: stretch; flex-wrap: nowrap; }
.box {
  border: 1.5px solid var(--line);
  border-radius: 3px;
  padding: 0.6em 0.7em;
  flex: 1;
  background: #fff;
  min-width: 0;
}
.box .k { color: var(--dim); font-size: 0.65em; display: block; margin-bottom: 0.3em; }
.box .v { font-weight: 600; font-size: 0.9em; }
.box.green { background: var(--p-green); }
.box.yellow { background: var(--p-yellow); }
.box.pink { background: var(--p-pink); }
.box.blue { background: var(--p-blue); }
.arrow { align-self: center; color: var(--dim); font-size: 0.8em; }

/* fragments: fade earlier focus instead of hiding (condorcet look) */
.reveal .fragment.fade-dim.visible.current-fragment { opacity: 1; }
.reveal .fragment.semi-fade-out { opacity: 1; }
.reveal .fragment.semi-fade-out.visible { opacity: 0.2; }

/* console table */
table.console {
  border-collapse: collapse;
  font-size: 0.85em;
  margin-top: 0.6em;
  width: 96%;
}
table.console th, table.console td {
  border: none;
  border-bottom: 1px solid #e3e3e3;
  padding: 0.22em 0.6em;
  text-align: right;
}
table.console th { color: var(--dim); font-weight: 400; border-bottom: 1.5px solid var(--line); }
table.console td:first-child, table.console th:first-child { text-align: left; }
table.console .verdict { font-weight: 600; text-align: center; min-width: 5.5em; }
.pass { background: var(--p-green); }
.fail { background: var(--p-pink); }
.why { color: var(--dim); font-weight: 400; font-size: 0.85em; }
.mark-fail { color: var(--bad); font-weight: 600; }

/* slide number: top left (the top right holds the pulse + ask buttons) */
.reveal .slide-number {
  background: transparent; color: var(--dim); font-family: var(--mono); font-size: 14px;
}
.reveal .progress { color: var(--faint); height: 2px; }

/* only the current row in focus */
.reveal table.console tr.fragment.visible.past { opacity: 0.22; }
.reveal table.console tr.fragment:not(.visible) td { border-color: transparent; }

/* ---------- interactive: buttons, polls, prompts ---------- */
.btn {
  font-family: var(--mono); font-size: 0.75em;
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 2px;
  padding: 0.25em 0.9em; margin: 0 0.4em 0.4em 0; cursor: pointer;
}
.btn::before { content: "[ "; color: var(--dim); }
.btn::after { content: " ]"; color: var(--dim); }
.btn:hover { background: var(--p-blue); }
.btn.chosen { background: #E3F1E7; border-color: #1B7F3B; color: #1B7F3B; font-weight: 600; }
.btn.chosen::after { content: ' ✓'; }
.btn.ghost { border-color: #ccc; color: var(--dim); }

.poll { margin-top: 1.2em; }
.poll-input { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2em; }
.poll-input input {
  font-family: var(--mono); font-size: 0.85em; width: 6em;
  border: 1.5px solid var(--line); border-radius: 2px; padding: 0.2em 0.4em; margin-right: 0.5em;
  background: #fff; color: var(--ink);
}
.poll-input .unit { font-size: 0.85em; margin-right: 0.3em; color: var(--dim); }
.poll-status { font-size: 0.65em; color: var(--dim); margin-left: 0.6em; }
/* slider poll (Cevdet, 08.10): no thumb until the student touches it */
.poll-input input.slider { width: 14em; max-width: 60vw; accent-color: #0062C4; margin: 0 0.4em; padding: 0; border: none; background: none; box-shadow: none; }
.poll-input input.slider.untouched::-webkit-slider-thumb { opacity: 0; }
.poll-input input.slider.untouched::-moz-range-thumb { opacity: 0; }
.poll-input .slider-end { font-size: 0.6em; }
.poll-input .slider-val { min-width: 3.2em; font-weight: 600; margin: 0 0.4em; }
html.mobile .poll-input input.slider { width: 100%; max-width: none; margin: 0.3em 0; }
.poll-controls { margin-top: 0.6em; }
.poll-results { display: none; margin-top: 0.4em; }
.poll-results.open { display: block; }
.poll-results .dim { font-size: 0.65em; }
.poll-results .small-line { margin-top: 0.4em; }

.bar-row { display: grid; grid-template-columns: 4em 1fr 5.2em; gap: 0.6em; align-items: center; font-size: 0.7em; margin: 0.2em 0; }
.bar-track { height: 0.9em; background: #f1f1ee; border: 1px solid #ddd; }
.bar-fill { display: block; height: 100%; background: #7A3DB8; }
.bar-n { text-align: right; white-space: nowrap; }

/* compact poll results (07.10): one small aligned table of thin bars, not a full-width block */
.poll-results .viz { display: grid; grid-template-columns: fit-content(45%) minmax(3em, 12em) auto; justify-content: start; gap: 0.1em 0.6em; align-items: center; font-size: 0.45em; max-width: 100%; }
.poll-results .viz .bar-row { display: contents; font-size: 1em; }
.poll-results .viz .bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poll-results .viz .bar-track { height: 0.6em; }
.poll-results .viz .bar-n { color: var(--dim); }
.poll-results .viz .small-line, .poll-results .viz .vbars { grid-column: 1 / -1; }
.poll-results .viz .small-line { margin-top: 0.1em; font-size: 0.9em; }
.poll-results .viz .vbars { height: 3em; max-width: 24em; }
.poll-results .viz .vbars + .small-line { margin-top: 0.2em; }
html.mobile .poll-results .viz { font-size: 0.75em; grid-template-columns: fit-content(50%) minmax(2.5em, 1fr) auto; justify-content: stretch; }
.poll-controls .btn { font-size: 0.5em; }
html.mobile .poll-controls .btn { font-size: 0.75em; }

.vbars { display: flex; align-items: flex-end; gap: 2px; height: 5em; border-bottom: 1.5px solid var(--line); max-width: 100%; }
.vbar { flex: 1 1 0; min-width: 2px; max-width: 24px; background: #ddd; }
.vbar.hit { background: var(--accent); opacity: 0.55; }

.raw { margin-top: 0.5em; font-size: 0.55em; color: var(--dim); }
.raw summary { cursor: pointer; }
.raw pre { max-height: 9em; overflow: auto; background: #fff; border: 1px solid #e3e3e3; padding: 0.5em; font-family: var(--mono); box-shadow: none; width: 100%; }

/* personalise prompt: collapsed button, bottom right */
details.prompt { position: absolute; right: 0; bottom: 0; max-width: 62%; text-align: left; z-index: 5; }
details.prompt summary {
  list-style: none; cursor: pointer; font-size: 0.65em; display: inline-block; float: right;
  border: 1.5px solid var(--line); border-radius: 2px; padding: 0.2em 0.8em; background: var(--p-yellow);
}
details.prompt summary::-webkit-details-marker { display: none; }
details.prompt summary::before { content: "[ "; color: var(--dim); }
details.prompt summary::after { content: " ]"; color: var(--dim); }
details.prompt[open] { background: #fff; border: 1.5px solid var(--line); padding: 0.6em; }
details.prompt[open] summary { float: none; margin-bottom: 0.5em; }
details.prompt pre {
  white-space: pre-wrap; font-family: var(--mono); font-size: 0.55em; line-height: 1.45;
  box-shadow: none; margin: 0 0 0.5em 0; width: 100%; background: #fff; color: var(--ink);
}

/* first slide of every lecture: QR + short link */
.qr-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.qr-slide img { width: 400px; height: 400px; margin: 0; border: none; box-shadow: none; background: transparent; }
.qr-slide .qr-link { font-size: 0.85em; font-weight: 600; margin-top: 0.6em; }
.qr-slide .small { margin-top: 0.4em; }

/* overview list of the lecture's concepts */
.concept-list { columns: 2; column-gap: 3em; margin-top: 1.2em; font-size: 0.85em; line-height: 1.7; }
.concept-list .dim { display: inline-block; width: 2em; }

/* ---------- phones: no slide scaling, readable text, one slide per screen ---------- */
html.mobile .reveal { font-size: 19px; }
html.mobile .reveal .slides {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  margin: 0 !important; transform: none !important; zoom: 1 !important;
}
html.mobile .reveal .slides > section {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  padding: 18px 16px 64px !important; box-sizing: border-box; overflow-y: auto; top: 0 !important;
}
html.mobile .reveal .fragment { opacity: 1 !important; visibility: visible !important; }
html.mobile .title-block { position: static; margin-top: 30vh; }
html.mobile .boxes { flex-direction: column; }
html.mobile .arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 1em; }
html.mobile .rows { grid-template-columns: 1fr; gap: 0.1em; }
html.mobile .rows .k { margin-top: 0.7em; }
html.mobile .concept-list { columns: 1; }
html.mobile table.console { font-size: 0.72em; }
html.mobile table.console th, html.mobile table.console td { padding: 0.25em 0.3em; }
html.mobile .reveal table.console tr.fragment.visible.past { opacity: 1; }
html.mobile .center[style] { margin-top: 18vh !important; }
html.mobile details.prompt { position: static; max-width: 100%; margin-top: 1.4em; }
html.mobile details.prompt summary { float: none; }
html.mobile .qr-slide img { width: 70vw; height: 70vw; }
html.mobile .btn { font-size: 1em; padding: 0.45em 1em; }
html.mobile .poll-input input { font-size: 1em; width: 7em; }

/* one-sentence definition under a concept's headline */
.def { font-size: 0.7em; color: var(--dim); margin: 0.9em auto 0; max-width: 34em; line-height: 1.45; }
html.mobile details.prompt summary { font-size: 0.9em; padding: 0.4em 1em; }

/* ---------- slide menu ---------- */
.nav-bar { position: fixed; left: 12px; bottom: 10px; z-index: 60; display: flex; gap: 8px; }
.nav-btn { display: none; }
.menu-btn {
  font-family: var(--mono); font-size: 14px; color: var(--dim);
  background: var(--bg); border: 1.5px solid #ccc; border-radius: 2px; padding: 4px 10px; cursor: pointer;
}
.menu-btn::before { content: "[ "; } .menu-btn::after { content: " ]"; }
.menu-btn:hover { color: var(--ink); border-color: var(--line); }
.menu-panel {
  display: none; position: fixed; bottom: 48px; left: 12px; z-index: 60;
  max-height: 80vh; overflow-y: auto; min-width: 300px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 2px; padding: 6px 0;
  font-family: var(--mono); font-size: 14px;
}
.menu-panel.open { display: block; }
.menu-panel a { display: block; padding: 4px 16px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.menu-panel a:hover { background: var(--p-blue); }
.menu-panel a.current { background: var(--p-green); font-weight: 600; }
.menu-panel .menu-n { display: inline-block; width: 2.4em; color: var(--dim); }
.menu-panel .menu-home { color: var(--dim); border-bottom: 1px solid #e3e3e3; margin-bottom: 4px; }
html.mobile .nav-bar { left: 8px; right: 8px; bottom: 8px; }
html.mobile .menu-btn { font-size: 17px; padding: 10px 14px; background: #fff; }
html.mobile .nav-btn {
  display: block; font-family: var(--mono); font-size: 22px; padding: 4px 22px; margin-left: auto;
  background: #fff; color: var(--ink); border: 1.5px solid var(--line); border-radius: 2px;
}
html.mobile .nav-btn + .nav-btn { margin-left: 0; }
html.mobile .menu-panel { top: 8px; bottom: 64px; left: 8px; right: 8px; min-width: 0; max-height: none; font-size: 17px; }
html.mobile .reveal .slides > section { overflow-x: hidden; padding-bottom: 80px !important; }
html.mobile .reveal .slide-number { display: none; }
html.mobile .menu-panel a { padding: 9px 14px; white-space: normal; }

html.mobile #passfail { font-size: 0.6em; }
html.mobile #passfail .verdict { min-width: 0; }

/* practice questions told as a short story, question last */
.rows.story { margin-top: 1.2em; }
.big.q { font-size: 1.25em; margin-top: 1em; }

/* show-answer box on every practice question */
details.answer { margin-top: 0.5em; }
details.answer summary {
  list-style: none; cursor: pointer; display: inline-block; font-size: 0.65em;
  border: 1.5px solid var(--line); border-radius: 2px; padding: 0.2em 0.8em; background: var(--p-green);
}
details.answer summary::-webkit-details-marker { display: none; }
details.answer summary::before { content: "[ "; color: var(--dim); }
details.answer summary::after { content: " ]"; color: var(--dim); }
details.answer .answer-body {
  position: absolute; right: 0; top: 18%; width: 46%; z-index: 6;
  background: #fff; border: 1.5px solid var(--line); border-radius: 2px; padding: 0.7em 0.9em;
  box-shadow: 4px 4px 0 var(--p-green);
}
details.answer .ans { font-weight: 600; font-size: 1em; margin-bottom: 0.4em; }
details.answer .why { font-size: 0.62em; line-height: 1.45; margin-bottom: 0.3em; }
details.answer pre.math {
  font-family: var(--mono); font-size: 0.55em; line-height: 1.5; margin: 0.6em 0 0; padding: 0.5em;
  background: var(--p-yellow); box-shadow: none; width: 100%; white-space: pre; overflow-x: auto;
}
html.mobile details.answer .answer-body { position: static; width: auto; margin-top: 0.6em; }
html.mobile details.answer summary { font-size: 0.9em; padding: 0.4em 1em; }
table.console.calc { font-size: 0.75em; }
html.mobile table.console.calc { font-size: 0.55em; }

/* small aligned table inside answer boxes */
table.mini { border-collapse: collapse; font-size: 0.55em; margin-top: 0.6em; width: 100%; background: var(--p-yellow); }
table.mini th, table.mini td { border: 1px solid #e0dcc0; padding: 0.25em 0.35em; text-align: center; font-weight: 400; }
table.mini th { text-align: left; color: var(--dim); white-space: nowrap; }
table.mini td.pass { background: var(--p-green); }
table.mini td.fail { background: var(--p-pink); }
html.mobile table.mini { font-size: 0.7em; }
html.mobile table.mini th, html.mobile table.mini td { padding: 0.25em 0.15em; }

/* PDF export (?print-pdf): no buttons, answers inline */
html.print-pdf .nav-bar, html.print-pdf .menu-panel, html.print-pdf details.prompt,
html.print-pdf .poll, html.print-pdf details.answer summary { display: none !important; }
html.print-pdf details.answer .answer-body { position: static; width: auto; margin-top: 0.6em; box-shadow: none; }
.today-mark { color: var(--accent); font-size: 0.8em; margin-left: 0.6em; }

/* side remarks inside a line (grey spans): smaller and lighter */
.rows .v .dim, .box .v .dim, .def .dim, .big .dim, td .dim { font-size: 0.72em; color: #a3a3a3; }
.rows.summary { margin-top: 1em; gap: 0.45em 1.6em; }
.rows.summary .k { font-size: 0.7em; }
.rows.summary .v { font-size: 0.88em; }
.qr-slide .big { text-align: center; }
html.mobile .qr-slide .big { font-size: 1.3em; }

/* "about you" survey summary in the slides */
.sv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9em 1.4em; margin-top: 0.8em; }
.sv-box { min-width: 0; }
.sv-t { font-size: 0.7em; color: var(--dim); margin-bottom: 0.15em; }
.sv-grid .bar-row { font-size: 0.62em; grid-template-columns: 8.5em 1fr 5em; margin: 0.15em 0; }
html.mobile .sv-grid { grid-template-columns: 1fr; }
html.mobile .sv-grid .bar-row { font-size: 0.8em; }

/* "no idea" option, free-text polls (2026-10-06) */
.btn.noidea { color: var(--dim); border-style: dashed; }
.bar-fill.noidea { background: #bdbdbd; }
.poll-input textarea { font-family: var(--mono); font-size: 0.75em; width: 100%; min-height: 3em; border: 1.5px solid #bbb; border-radius: 2px; padding: 0.3em; }
html.mobile .poll-input textarea { font-size: 1em; }

/* pulse menu (assets/js/pulse.js): a side button that opens a small panel */
/* top-right buttons: pulse + ask (assets/js/ask.js) */
.side-btns { position: fixed; right: 12px; top: 10px; z-index: 50; display: flex; gap: 6px; }
.side-btn { font-family: var(--mono); font-size: 14px; background: var(--p-yellow); border: 1.5px solid var(--line); border-radius: 2px; padding: 5px 9px; cursor: pointer; }
.ask-btn { background: #fff; }
.ask-btn.has { background: var(--p-pink); font-weight: 700; }
.ask-panel textarea { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 14px; margin: 8px 0 6px; padding: 6px; border: 1.5px solid #bbb; border-radius: 2px; resize: vertical; }
.ask-panel .btn { font-size: 13px; padding: 4px 10px; }
.ask-q { border-top: 1px solid #e3e3e3; padding: 8px 0; }
.ask-q .btn { margin-top: 4px; font-size: 12px; padding: 2px 8px; }
.ask-q.done { color: var(--dim); }
.side-mode { font-family: var(--mono); font-size: 11px; color: var(--dim); align-self: center; }
.side-panel .class-h { margin-top: 14px; padding-top: 8px; border-top: 1px solid #e3e3e3; }
.pulse-graph svg { display: block; margin: 4px 0; }
/* chat light (teacher, Can 08.10): grey when no open question, red + glowing while one is open */
.chat-light { display: inline-flex; align-items: center; gap: 6px; }
.chat-light i { width: 14px; height: 14px; border-radius: 50%; background: #cfcfcf; border: 1px solid #999; display: inline-block; }
.chat-light.on { font-size: 15px; padding: 5px 12px; background: #fde4e6; border-color: #d62728; color: #b0141a; font-weight: 700; }
.chat-light.on i { background: #ff2a2a; border-color: #b0141a; animation: chat-glow 1.2s ease-in-out infinite; }
@keyframes chat-glow { 0%, 100% { box-shadow: 0 0 3px 1px rgba(255, 40, 40, .55); } 50% { box-shadow: 0 0 12px 6px rgba(255, 40, 40, .85); } }
/* teacher-only content: students see this box in its place, so the empty space is clearly on purpose (Can, 08.10) */
.teacher-only { margin: 6px 0; padding: 8px 10px; background: var(--p-blue, #E4EFFA); border: 1.5px dashed #9bb7d6; border-radius: 3px; font-size: 13px; color: #333; }
.pg { margin: 6px 0 10px; }
.pg-h { font-size: 12px; margin-bottom: 2px; }
.pg-bar { display: flex; height: 20px; border: 1px solid #bbb; background: #fff; }
.pg-bar span { display: flex; align-items: center; justify-content: center; font-size: 11px; overflow: hidden; }
.pg-then { display: flex; height: 5px; margin-top: 2px; }
.pg-then span { display: block; }
.pg-ends { display: flex; justify-content: space-between; font-size: 10px; color: #999; margin-top: 1px; }
html.mobile .pg-h { font-size: 13px; } html.mobile .pg-ends { font-size: 11px; }
.pulse-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; margin: 2px 0 4px; }
.pulse-legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.side-panel .btn.ghost { font-size: 12px; padding: 2px 8px; margin-top: 6px; }
.pulse-panel { position: fixed; right: 12px; top: 50px; z-index: 51; width: min(340px, calc(100vw - 28px)); max-height: calc(100vh - 80px); overflow: auto; background: #fff; border: 1.5px solid var(--line); border-radius: 2px; padding: 10px 12px; font-family: var(--mono); font-size: 13px; color: var(--ink); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.pulse-panel h3 { font-size: 14px; margin: 0 0 6px; }
.pulse-panel .q { margin: 10px 0 4px; }
.pulse-panel .scale { display: flex; gap: 4px; }
.pulse-panel .scale button { flex: 1; font-family: var(--mono); font-size: 13px; padding: 5px 0; border: 1.5px solid #bbb; background: #fff; border-radius: 2px; cursor: pointer; }
.pulse-panel .scale button.on { background: var(--p-green); border-color: var(--line); }
.pulse-panel .ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); }
.pulse-panel .st { font-size: 11px; color: var(--dim); margin-top: 8px; }

/* slider graph (assets/js/sd-graph.js) */
.sd-slider { font-size: 0.55em; }
.sd-slider svg { width: 100%; height: auto; display: block; }
.sd-slider label { display: grid; grid-template-columns: 2em 1fr 4em; align-items: center; gap: 0.6em; margin: 0.25em 0; }
.sd-slider input[type=range] { accent-color: #0062C4; height: 1.6em; width: 100%; }
.sd-slider label b { font-size: 1.2em; }
.sd-slider label span { color: var(--dim); }
.sd-slider .ro { margin-top: 0.5em; line-height: 1.6; font-size: 1.35em; }
.sd-slider .ro .dim { font-size: 0.75em; }
html.mobile .sd-slider { font-size: 0.85em; }

/* guessing race (assets/js/mining-demo.js) */
.mine-demo { font-size: 0.6em; margin-top: 0.6em; }
.mine-demo .k { color: var(--dim); display: inline-block; width: 9em; }
.mine-demo .md-block { border: 1.5px solid var(--line); background: var(--p-yellow); padding: 0.5em 0.8em; line-height: 1.6; }
.mine-demo .md-hash { margin-top: 0.6em; font-size: 1.15em; }
.mine-demo .md-hash code { font-family: var(--mono); word-break: break-all; }
.mine-demo .md-z { background: var(--p-green); font-weight: 600; }
.mine-demo .md-goal { margin: 0.3em 0 0.6em; }
.mine-demo .md-st { margin-top: 0.5em; font-size: 1.1em; }
.mine-demo.md-won .md-block { background: var(--p-green); }
html.mobile .mine-demo { font-size: 0.85em; }
.btn.go { background: var(--p-yellow); }

/* left sidebar (assets/js/side-panels.js): pulse + class chat on wide screens */
.sidebar { position: fixed; right: 0; top: 0; bottom: 0; width: 300px; z-index: 40; display: none; flex-direction: column; background: #fbfbf8; border-left: 1.5px solid var(--line); font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
body.sb-open .sidebar { display: flex; }
body.sb-open .reveal { width: calc(100% - 300px); }
body.sb-open .side-btns { right: 312px; }
body.sb-open .side-panel { right: 312px; }
.sb-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid #e3e3e3; font-weight: 700; }
.sb-fold, .sb-tab { font-family: var(--mono); font-size: 14px; background: #fff; border: 1.5px solid var(--line); border-radius: 2px; cursor: pointer; padding: 1px 8px; }
.sb-tab { position: fixed; right: 8px; top: 50%; z-index: 40; padding: 10px 6px; }
body.sb-open .sb-tab { display: none; }
.sp-sec { padding: 8px 10px; }
.sp-sec h3 { font-size: 13px; margin: 0 0 6px; }
.sp-sec h3.has { color: #b8432f; }
.sp-note { font-size: 11px; font-weight: 400; }
.sp-prow { margin-bottom: 6px; }
.sp-prow .q { margin: 2px 0 3px; }
.sp-sec .scale { display: flex; gap: 3px; }
.sp-sec .scale button { flex: 1; font-family: var(--mono); font-size: 12px; padding: 3px 0; border: 1.5px solid #bbb; background: #fff; border-radius: 2px; cursor: pointer; }
.sp-sec .scale button.on { background: var(--p-green); border-color: var(--line); }
.sp-sec .ends { display: flex; justify-content: space-between; font-size: 10px; color: var(--dim); }
.sp-sec .st { font-size: 11px; color: var(--dim); }
.sp-sec .btn { font-size: 12px; padding: 2px 9px; }
.sidebar .pulse-sec { border-bottom: 1px solid #e3e3e3; }
.sidebar .chat-sec { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-msgs { flex: 1; min-height: 80px; overflow-y: auto; border: 1px solid #e3e3e3; background: #fff; padding: 4px 6px; margin-bottom: 6px; }
.chat-panel .chat-msgs { max-height: 45vh; }
.chat-m { padding: 5px 0; border-bottom: 1px solid #f0f0ec; overflow-wrap: anywhere; }
.chat-m.own .chat-h b { color: #2f63a8; }
.chat-m.done { color: var(--dim); }
.chat-h { font-size: 11px; margin-bottom: 1px; }
.chat-m .btn { margin-top: 3px; font-size: 11px; padding: 1px 7px; }
.chat-sec textarea { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 13px; padding: 5px; border: 1.5px solid #bbb; border-radius: 2px; resize: vertical; }
.chat-bar { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.sp-field { display: block; margin: 6px 0; }
.sp-field span { display: block; font-size: 11px; color: var(--dim); }
.sp-field input { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 14px; padding: 5px; border: 1.5px solid #bbb; border-radius: 2px; }
.chat-btn.has { background: var(--p-pink); font-weight: 700; }
.me-btn { background: #fff; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.print-pdf .sidebar, html.print-pdf .sb-tab, html.print-pdf .side-btns { display: none !important; }
.code-panel input { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 15px; padding: 6px; margin: 6px 0; border: 1.5px solid #bbb; border-radius: 2px; }
.chat-m .btn.del { margin-left: 4px; color: #b8432f; }
.chat-m .btn.del.sure { background: var(--p-pink); color: var(--ink); }
.sp-toggle { cursor: pointer; user-select: none; }
.sp-toggle:hover { color: #2f63a8; }
/* phones: bigger tap targets in the pulse/chat/sign-in panels; room for the top buttons above the slide title */
html.mobile .side-panel { left: 8px; right: 8px; width: auto; font-size: 14px; max-height: calc(100vh - 70px); }
html.mobile .sp-sec .scale button { padding: 9px 0; font-size: 15px; }
html.mobile .sp-sec .ends, html.mobile .sp-sec .st, html.mobile .sp-note { font-size: 12px; }
html.mobile .sp-sec h3 { font-size: 15px; }
html.mobile .sp-toggle { padding: 4px 0; }
html.mobile .chat-sec textarea { font-size: 16px; }
html.mobile .sp-sec .btn { font-size: 14px; padding: 5px 12px; }
html.mobile .side-btn { font-size: 13px; padding: 6px 8px; }
html.mobile .reveal .slides > section { padding-top: 42px !important; }
.qr-slide img.qr-small { width: 220px !important; height: 220px !important; }
html.mobile .qr-slide img.qr-small { width: 40vw !important; height: 40vw !important; }
/* the name wheel (Can, 08.10): a box in the top-right corner over the pulse panel, the sidebar's width */
.wheel-overlay { position: fixed; top: 0; right: 0; width: 300px; height: 390px; max-height: calc(100vh - 16px); z-index: 60; background: #fff; display: flex; flex-direction: column; border: 1.5px solid var(--line); box-shadow: 3px 3px 0 rgba(0,0,0,.15); }
.wheel-overlay[hidden] { display: none; }
.wheel-overlay iframe { flex: 1; width: 100%; border: 0; }
.wheel-close { align-self: flex-end; margin: 4px 4px 0; font-size: 11px; padding: 2px 8px; }

/* live-stream link (assets/js/stream.js): red dot while the class is on */
.stream-link .stream-live { color: #B71C1C; font-weight: 700; text-decoration: none; }
.stream-link .stream-live:hover { text-decoration: underline; }

/* in class / online (Can, 14.10): poll bars split by where each device signed in today; chat messages on the lecturer screen */
.answered { font-size: 0.68em; margin: 0.1em 0 0.35em; }
.poll-results .viz .answered { grid-column: 1 / -1; font-size: 1.35em; }
.wh-in { color: #0C8599; } .wh-on { color: #C2255C; } .wh-un { color: #868E96; }
.bar-track.split { display: flex; }
.bar-track.split .bar-fill { display: block; flex: none; }
.bar-fill.wh-in { background: #0C8599; } .bar-fill.wh-on { background: #C2255C; } .bar-fill.wh-un { background: #ADB5BD; }
.chat-m.wh-in { border-left: 4px solid #0C8599; padding-left: 6px; }
.chat-m.wh-on { border-left: 4px solid #C2255C; padding-left: 6px; }
.chat-m.wh-un { border-left: 4px solid #ADB5BD; padding-left: 6px; }
.wh-tag { font-size: 10px; font-weight: 600; }
/* the right option, after your own answer (Can, 14.10) */
.bar-row.correct .bar-label { color: #1B7F3B; font-weight: 700; }