@import url('history-map.css');
/* Interactive classroom tasks: teacher editor, live view, student sheet, QR cards. */
.class-task-mode { grid-column: 1 / -1; border: 0; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.class-task-mode legend { font-weight: 600; margin-bottom: .5rem; }
.class-task-mode .choice { display: flex; gap: .6rem; align-items: flex-start; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .75rem; background: white; background: light-dark(white, #1a2420); cursor: pointer; }
.class-task-mode .choice:has(input:checked) { border-color: var(--green); background: var(--mint); }
.class-task-mode .choice span { display: grid; gap: .15rem; }
.class-task-mode small, .class-task-list small { color: var(--muted); display: block; }
.task-status-open { background: #e3f1e7; background: light-dark(#e3f1e7, #1d251f); color: var(--green); }
.task-status-closed { background: #f3ece0; background: light-dark(#f3ece0, #26221b); color: var(--amber); }
.stack { display: grid; gap: .35rem; margin-top: 1rem; }
.stack textarea, .stack input, .task-item-body textarea, .task-item input:not([type=radio]):not([type=checkbox]), .task-item textarea { width: 100%; }
.class-task-switches { display: grid; gap: .4rem; margin-top: 1rem; }
.check { display: flex; gap: .5rem; align-items: center; font-weight: 500; }
.section-head.compact { margin-bottom: .75rem; }
.task-item-editor { border: 1px solid var(--line); border-radius: .75rem; padding: .85rem 1rem; margin-bottom: .75rem; background: #fbfcfa; background: light-dark(#fbfcfa, #1e1f1e); }
.task-item-editor[data-type=info] { background: #f7f8f4; background: light-dark(#f7f8f4, #1f201e); border-style: dashed; }
.task-item-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.task-item-tools { display: flex; gap: .25rem; }
.task-item-tools button, button.small { min-height: 2.1rem; padding: .35rem .65rem; font-size: .8125rem; }
.task-item-body { display: grid; gap: .5rem; }
.task-options { display: grid; gap: .4rem; }
.task-option { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; }
.points-input { width: 5rem; }
label.inline { display: flex; gap: .5rem; align-items: center; }
.class-task-add { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .5rem; }
.team-editor summary { display: flex; justify-content: space-between; gap: .75rem; align-items: center; }
.team-editor h3 { margin: 1.25rem 0 .5rem; font-size: 1rem; }
.class-task-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: 1rem; padding: .75rem 1rem; margin: 1rem 0; background: white; background: light-dark(white, #1a2420); border-radius: .9rem; box-shadow: var(--shadow), 0 -6px 18px #20382a12; }
[data-save-status].error { color: var(--danger); }
.danger-zone { margin-top: 2rem; }
.empty.small { padding: .75rem; font-size: .875rem; }

.class-task-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.class-task-codes .hint { grid-column: 1 / -1; margin: 0; }
.qr-card { margin: 0; display: grid; justify-items: center; gap: .5rem; text-align: center; }
.qr-card img { width: 180px; height: 180px; cursor: zoom-in; image-rendering: pixelated; }
.qr-card figcaption { display: grid; gap: .25rem; justify-items: center; }
.join-code { font: 700 1.25rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.qr-dialog { border: 0; border-radius: 1rem; padding: 1.5rem; text-align: center; }
.qr-dialog img { width: min(80vmin, 640px); height: min(80vmin, 640px); }
.qr-dialog p { font-size: 1.75rem; font-weight: 700; margin: .5rem 0 1rem; }
.qr-dialog::backdrop { background: #10201890; }

.live-owners { display: grid; gap: .5rem; }
.live-owner { border: 1px solid var(--line); border-radius: .75rem; background: white; background: light-dark(white, #1a2420); }
.live-owner-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem 1rem; cursor: pointer; flex-wrap: wrap; }
.live-owner-name { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.live-owner-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.progress-bar { display: inline-block; width: 6rem; height: .45rem; border-radius: 1rem; background: #e7ebe5; background: light-dark(#e7ebe5, #232521); overflow: hidden; }
.progress-fill { display: block; height: 100%; width: 0; background: var(--green); }
.badge.done { background: #e3f1e7; background: light-dark(#e3f1e7, #1d251f); color: var(--green); }
.badge.pending { background: #f3ece0; background: light-dark(#f3ece0, #26221b); color: var(--amber); }
.presence { width: .6rem; height: .6rem; border-radius: 50%; background: #c8cfc7; background: light-dark(#c8cfc7, #343934); display: inline-block; }
.presence.online { background: #2f9a5d; background: light-dark(#2f9a5d, #3aa366); }
.live-owner-body { padding: 0 1rem 1rem; }
.live-members { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; }
.member { display: inline-flex; align-items: center; gap: .35rem; }
.member button { min-height: 1.6rem; padding: 0 .4rem; }
.live-answers { display: grid; gap: .4rem; padding-left: 1.25rem; margin: .5rem 0; }
.live-answers li { display: grid; gap: .1rem; padding: .35rem .5rem; border-radius: .5rem; }
.live-answers li.correct { background: #eef6f0; background: light-dark(#eef6f0, #1d221e); }
.live-answers li.wrong { background: #fbefee; background: light-dark(#fbefee, #261f1e); }
.live-prompt { font-size: .8125rem; color: var(--muted); white-space: pre-line; }
.live-answer { white-space: pre-wrap; overflow-wrap: anywhere; }
.live-tools { display: flex; gap: .5rem; flex-wrap: wrap; }
.live-missing { margin-top: 1rem; padding: .75rem 1rem; border-radius: .75rem; background: #f7f3ea; background: light-dark(#f7f3ea, #23201b); }
.class-task-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.class-task-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.class-task-portal { margin-bottom: 1.5rem; }

.task-student-shell { max-width: 46rem; margin: 0 auto; display: grid; gap: 1rem; }
.task-student-shell h1 { margin: .25rem 0; }
.task-code-form, .task-join-form { display: grid; gap: .75rem; margin-top: 1rem; }
.task-code-form input { font: 700 1.5rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; width: 100%; }
.task-join-form input { width: 100%; }
.team-banner { font-size: 1.125rem; padding: .6rem .9rem; border-radius: .6rem; background: var(--mint); }
.team-choices { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem; }
.team-choices .button { width: 100%; }
.task-work-head { display: grid; gap: .15rem; }
.team-members { font-size: .875rem; color: var(--muted); margin: 0; }
.task-progress { font-weight: 600; margin: .25rem 0 0; }
.task-instructions h2 { font-size: 1rem; margin-top: 0; }
.task-instructions.team { border-left: 4px solid var(--green); }
.pre { white-space: pre-line; overflow-wrap: anywhere; }
.task-items { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; counter-reset: task; }
.task-item { display: grid; gap: .6rem; }
.task-item:not([data-type=info]) { counter-increment: task; }
.task-item:not([data-type=info]) .task-prompt::before { content: counter(task) '. '; font-weight: 700; }
.task-item[data-type=info] { background: #f7f8f4; background: light-dark(#f7f8f4, #1f201e); }
.task-prompt { margin: 0; font-weight: 500; }
.task-item input:not([type=radio]):not([type=checkbox]), .task-item textarea { font-size: 1rem; min-height: 2.75rem; }
.task-choice { display: flex; gap: .65rem; align-items: center; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: .6rem; cursor: pointer; }
.task-choice:has(input:checked) { border-color: var(--green); background: var(--mint); }
.task-choice input { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
.task-feedback { margin: 0; font-weight: 600; }
.task-feedback.correct { color: var(--green); }
.task-feedback.wrong { color: var(--danger); }
.task-submit { display: grid; gap: .5rem; justify-items: start; }
.save-state { min-height: 1.5rem; font-size: .875rem; }

body.qr-print { margin: 0; background: white; background: light-dark(white, #1a2420); color: #111; color: light-dark(#111, #eeeeee); font: 15px/1.5 system-ui, sans-serif; }
.qr-print-bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid #ddd; border-bottom: 1px solid light-dark(#ddd, #2b2b2b); }
.qr-print-bar button { padding: .6rem 1rem; border-radius: .5rem; border: 0; background: #285944; background: light-dark(#285944, #9cc1a4); color: white; color: light-dark(white, #10201a); font-weight: 600; cursor: pointer; }
.qr-sheet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.qr-print-card { break-inside: avoid; display: grid; justify-items: center; align-content: start; gap: .35rem; padding: 1.25cm 1cm; border: 1px dashed #bbb; border: 1px dashed light-dark(#bbb, #484848); text-align: center; }
.qr-print-card h1 { margin: 0; font-size: 1.6rem; }
.qr-print-card img { width: 6cm; height: 6cm; }
.qr-print-task { margin: 0; color: #555; color: light-dark(#555, #bababa); font-size: .875rem; }
.qr-print-hint { margin: 0; font-size: .75rem; color: #555; color: light-dark(#555, #bababa); }
.qr-print-instructions { margin: .5rem 0 0; white-space: pre-line; font-size: .875rem; text-align: left; }
@media print { .qr-print-bar { display: none; } @page { size: A4; margin: 1cm; } }
@media (max-width: 760px) {
  .class-task-mode { grid-template-columns: 1fr; }
  .qr-sheet { grid-template-columns: 1fr; }
  .class-task-savebar { justify-content: space-between; }
  .live-owner-meta .progress-bar { display: none; }
}
/* The global label is a column; these task controls sit in a row. */
.check, .task-choice, .task-option, label.inline, .class-task-mode .choice { flex-direction: row; margin-bottom: 0; font-size: .9375rem; }
.check { justify-content: flex-start; font-weight: 500; }
.task-option { display: grid; }
.task-choice { align-items: center; justify-content: flex-start; text-align: left; font-weight: 450; }
.task-choice input[type=radio], .task-option input[type=radio] { width: 1.2rem; height: 1.2rem; min-height: 0; padding: 0; flex-shrink: 0; accent-color: var(--green); }
.task-option input:not([type=radio]):not([type=checkbox]) { width: 100%; }
label.inline { justify-self: start; align-items: center; }
.task-item-body > button { justify-self: start; }
.class-task-mode .choice input { margin-top: .2rem; }

/* Live view switcher */
.live-views { display: flex; gap: .4rem; flex-wrap: wrap; }
.live-views [aria-pressed=true] { background: var(--green); color: #fff; color: light-dark(#fff, #10201a); border-color: var(--green); }
.live-answer-toggle { margin-bottom: .75rem; }
.print-options .print-form { align-items: end; }

/* Group work: team number and progress in the middle, members around it. */
.team-orbits { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.team-orbit { margin: 0; padding: .75rem; border: 1px solid var(--line); border-radius: .9rem; background: white; background: light-dark(white, #1a2420); text-align: center; }
.orbit-stage { position: relative; width: 100%; aspect-ratio: 1; max-width: 300px; margin: 0 auto; }
.orbit-center { --p: 0; position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  display: grid; place-content: center; gap: .1rem; background: radial-gradient(closest-side, white 78%, transparent 80% 100%), conic-gradient(var(--green) calc(var(--p) * 1%), #e4e9e3 0); background: radial-gradient(closest-side, light-dark(white, #1a2420) 78%, transparent 80% 100%), conic-gradient(var(--green) calc(var(--p) * 1%), light-dark(#e4e9e3, #232623) 0); }
.orbit-center.done { background: radial-gradient(closest-side, #eef6f0 78%, transparent 80% 100%), conic-gradient(#2f9a5d 100%, #2f9a5d 0); background: radial-gradient(closest-side, light-dark(#eef6f0, #1d221e) 78%, transparent 80% 100%), conic-gradient(light-dark(#2f9a5d, #3aa366) 100%, light-dark(#2f9a5d, #3aa366) 0); }
.orbit-number { font-size: 2.1rem; font-weight: 750; line-height: 1; color: var(--ink); }
.orbit-progress { font-size: .75rem; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.orbit-member { position: absolute; transform: translate(-50%, -50%); max-width: 46%; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .55rem;
  border: 1px solid var(--line); border-radius: 1rem; background: #fbfcfa; background: light-dark(#fbfcfa, #1e1f1e); font-size: .75rem; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orbit-member.online { border-color: #9fcbb0; border-color: light-dark(#9fcbb0, #2e4d3b); }
.orbit-empty { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); font-size: .75rem; color: var(--muted); }
.team-orbit figcaption { margin-top: .25rem; font-size: .875rem; }

/* Individual work on the room map */
.live-seating-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; align-items: center; margin-bottom: .75rem; }
.seat-legend { display: flex; gap: .4rem; align-items: center; font-size: .8125rem; color: var(--muted); flex-wrap: wrap; }
.seat-dot { width: .75rem; height: .75rem; border-radius: .2rem; display: inline-block; margin-left: .5rem; }
.seat-dot.none, .seat-none { background: #f1f2ef; background: light-dark(#f1f2ef, #21211f); }
.seat-dot.working { background: #f6e7c8; background: light-dark(#f6e7c8, #2c2310); } .seat-dot.done { background: #cfe8d7; background: light-dark(#cfe8d7, #1d2d23); }
.seating-map { position: relative; width: 100%; border: 1px solid var(--line); border-radius: .75rem; background: #fafbf8; background: light-dark(#fafbf8, #1f1f1e); overflow: hidden; }
.seating-front { position: absolute; top: 0; left: 30%; width: 40%; text-align: center; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: white; color: light-dark(white, #10201a); border-radius: 0 0 .4rem .4rem; padding: .1rem 0; }
.seating-map[data-front=bottom] .seating-front { top: auto; bottom: 0; border-radius: .4rem .4rem 0 0; }
.seating-map[data-front=left] .seating-front, .seating-map[data-front=right] .seating-front { top: 30%; left: 0; width: 1.4rem; height: 40%; writing-mode: vertical-rl; padding: 0; display: grid; place-content: center; border-radius: 0 .4rem .4rem 0; }
.seating-map[data-front=right] .seating-front { left: auto; right: 0; border-radius: .4rem 0 0 .4rem; }
.seat { position: absolute; display: grid; align-content: center; gap: .1rem; padding: .25rem .4rem; border-radius: .45rem; border: 1px solid #dfe4dc; border: 1px solid light-dark(#dfe4dc, #262924); overflow: hidden; font-size: clamp(.55rem, 1.1vw, .8rem); line-height: 1.2; }
.seat-empty { background: transparent; border-style: dashed; }
.seat-working { background: #fdf6e7; background: light-dark(#fdf6e7, #231f17); border-color: #ecd7a9; border-color: light-dark(#ecd7a9, #382b0a); }
.seat-done { background: #eaf5ed; background: light-dark(#eaf5ed, #1c231e); border-color: #a9d3b6; border-color: light-dark(#a9d3b6, #284432); }
.seat-name { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-meta { display: flex; gap: .25rem; align-items: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.seat-bar { height: .3rem; border-radius: 1rem; background: #e7ebe5; background: light-dark(#e7ebe5, #232521); overflow: hidden; }
.seat-fill { display: block; height: 100%; width: 0; background: var(--green); }
.seat-team { position: absolute; top: .15rem; right: .25rem; min-width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--green); color: white; color: light-dark(white, #10201a); font-size: .6875rem; font-weight: 700; display: grid; place-content: center; }
p.small { font-size: .8125rem; }

/* Student QR scanner */
.qr-video-frame { position: relative; width: 100%; aspect-ratio: 1; max-width: 26rem; margin: .75rem auto; border-radius: 1rem; overflow: hidden; background: #111; }
.qr-video-frame video { width: 100%; height: 100%; object-fit: cover; }
.qr-target { position: absolute; inset: 18%; border: 3px solid #ffffffcc; border: 3px solid light-dark(#ffffffcc, rgba(26, 36, 32, 0.8)); border-radius: 1rem; box-shadow: 0 0 0 999px #0005; }

/* Printable worksheets */
body.worksheet-print { background: #f2f2f0; background: light-dark(#f2f2f0, #212120); }
.worksheet { width: 210mm; min-height: 287mm; margin: 1rem auto; padding: 14mm 15mm; background: white; background: light-dark(white, #1a2420); box-shadow: 0 1px 4px #0002; break-after: page; }
.worksheet:last-of-type { break-after: auto; }
.worksheet-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; border-bottom: 2px solid #222; border-bottom: 2px solid light-dark(#222, #eaeaea); padding-bottom: .5rem; }
.worksheet-head h1 { margin: .1rem 0 0; font-size: 1.45rem; }
.worksheet-meta { margin: 0; font-size: .875rem; color: #444; color: light-dark(#444, #cecece); }
.worksheet-team-number { flex-shrink: 0; width: 3.4rem; height: 3.4rem; border: 3px solid #222; border: 3px solid light-dark(#222, #eaeaea); border-radius: 50%; display: grid; place-content: center; font-size: 1.8rem; font-weight: 800; }
.worksheet-names { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; margin: .8rem 0; font-size: .9rem; }
.name-line { flex: 1 1 40%; min-width: 9rem; border-bottom: 1px solid #555; border-bottom: 1px solid light-dark(#555, #bababa); height: 1.4rem; }
.name-line.short { flex: 0 1 8rem; min-width: 6rem; }
.worksheet-names.single .name-line { flex: 1 1 12rem; }
.worksheet-instructions { margin: .6rem 0; padding: .55rem .8rem; border: 1px solid #999; border: 1px solid light-dark(#999, #6f6f6f); border-radius: .4rem; }
.worksheet-instructions.team { border-width: 2px; border-color: #222; border-color: light-dark(#222, #eaeaea); }
.worksheet-instructions h2 { margin: 0 0 .2rem; font-size: .95rem; }
.worksheet-instructions p { margin: 0; }
.worksheet-items { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .9rem; }
.worksheet-item, .worksheet-info { break-inside: avoid; }
.worksheet-item p { margin: 0 0 .3rem; }
.worksheet-info { padding: .5rem .7rem; background: #f4f4f2; background: light-dark(#f4f4f2, #20201f); border-radius: .3rem; }
.worksheet-points { color: #555; color: light-dark(#555, #bababa); font-size: .85em; }
.worksheet-options { list-style: none; padding: 0 0 0 1rem; margin: 0; display: grid; gap: .3rem; }
.worksheet-options li { display: flex; gap: .5rem; align-items: center; }
.worksheet-options .box { width: .95rem; height: .95rem; border: 1.5px solid #333; border: 1.5px solid light-dark(#333, #e7e7e7); display: inline-grid; place-content: center; font-size: .7rem; flex-shrink: 0; }
.worksheet-options .box.round { border-radius: 50%; }
.worksheet-options .is-correct { font-weight: 700; }
.answer-line { display: block; height: 1.75rem; border-bottom: 1px solid #888; border-bottom: 1px solid light-dark(#888, #858585); }
.worksheet-key { margin: 0; padding-left: 1rem; font-style: italic; color: #333; color: light-dark(#333, #e7e7e7); }
@media print {
  body.worksheet-print { background: white; background: light-dark(white, #1a2420); }
  .worksheet { width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
}
/* Wide view: the page uses the full width beside the sidebar. */
main.wide-view { max-width: none; }
@media (min-width: 801px) {
  :is(.app-shell,.admin-shell) main.wide-view { max-width: none; width: calc(100% - 236px); margin-left: 236px; }
}
@media (min-width: 1400px) {
  main.wide-view [data-teams] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
  main.wide-view [data-teams] > .team-editor { margin: 0; }
  main.wide-view [data-teams] + [data-add-team] { margin-top: 1rem; }
}
/* Expandable panels: lifted into a wide sheet in the middle of the screen. */
.task-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.task-panel-head h2 { margin-bottom: .5rem; }
.task-expand { white-space: nowrap; flex: none; }
.team-editor-tags { display: flex; align-items: center; gap: .4rem; }
.task-panel.task-panel-expanded {
  /* Floating window centred over the content area; the page behind stays visible and scrollable. */
  --left: 0px;
  position: fixed; z-index: 50; top: 50%; left: calc(var(--left) + (100vw - var(--left)) / 2); transform: translate(-50%, -50%);
  width: min(960px, calc((100vw - var(--left)) * .82)); max-height: 82vh; margin: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 1.5rem 1.5rem; background: white; background: light-dark(white, #1a2420); border: 1px solid #c8d8d1; border: 1px solid light-dark(#c8d8d1, #2a3430); border-radius: 1rem; box-shadow: 0 18px 60px #0d1f1638, 0 2px 8px #0d1f1618;
}
@media (min-width: 801px) { :is(.app-shell,.admin-shell) .task-panel.task-panel-expanded { --left: 236px; } }
.task-panel-expanded:focus { outline: none; }
.task-panel-expanded:focus-visible { outline: 3px solid var(--green); }
.task-panel-expanded > summary, .task-panel-expanded .task-expand { display: none; }
.task-panel-expanded > .task-panel-head h2 { margin-top: 1rem; }
.task-panel-bar {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin: 0 -1.5rem 1rem; padding: .75rem 1.5rem; background: #f3f8f4; background: light-dark(#f3f8f4, #1e211e); border-bottom: 1px solid var(--line);
}
.task-panel-bar strong { margin-right: auto; font-size: 1.05rem; }
.task-panel-placeholder {
  display: flex; align-items: center; justify-content: center; width: 100%; margin: 0 0 1rem; padding: 1rem;
  border: 2px dashed #b9cfc2;
  border: 2px dashed light-dark(#b9cfc2, #313f37); border-radius: .9rem; background: #f3f8f4; background: light-dark(#f3f8f4, #1e211e); color: var(--muted); font-weight: 500; cursor: pointer;
}
@media (max-width: 800px) {
  /* Phone: a bottom sheet over the lower part, the page stays visible above it. */
  .task-panel.task-panel-expanded { top: auto; bottom: calc(var(--mobile-nav-height, 4.5rem) + .5rem); left: .5rem; right: .5rem; transform: none; width: auto; max-height: 68vh; padding: 0 1rem 1.25rem; }
  .task-panel-bar { margin-inline: -1rem; padding-inline: 1rem; }
  .task-panel-bar strong { flex-basis: 100%; }
  .task-panel-bar [data-save-status] { flex: 1; }
}
/* Historical map (class task item, board and worksheet). */
.worksheet-map .hmap-host { margin-top: .5rem; break-inside: avoid; }
/* Board (projector) view. */
.board-page { margin: 0; background: #f6f7f3; background: light-dark(#f6f7f3, #20201e); }
.board { display: flex; flex-direction: column; height: 100dvh; }
.board-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; padding: .6rem 1.25rem; background: white; background: light-dark(white, #1a2420); border-bottom: 1px solid var(--line); }
.board-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-counter { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.board-nav { display: inline-flex; gap: .4rem; }
.board-slide { flex: 1 1 0; min-height: 0; overflow-y: auto; width: min(1500px, 100%); margin: 0 auto; padding: 2.5rem 2.5rem 3rem; }
.board-slide.is-map { padding-top: 1.25rem; }
.board-slide h1 { font-size: clamp(2rem, 4vw, 3.4rem); margin: .25rem 0 1rem; }
.board-eyebrow { margin: 0 0 .5rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .875rem; color: var(--green); }
.board-text, .board-prompt { font-size: clamp(1.25rem, 2.2vw, 2rem); line-height: 1.4; max-width: 60ch; }
.board-slide.is-map .board-prompt { font-size: clamp(1.05rem, 1.6vw, 1.45rem); margin: 0 0 .75rem; }
.board-options { font-size: clamp(1.15rem, 2vw, 1.8rem); display: grid; gap: .6rem; padding-left: 2.2rem; }
.board-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .8rem; padding: 0; list-style: none; font-size: 1.1rem; }
.board-teams li { display: grid; gap: .3rem; padding: 1rem 1.2rem; border-radius: .8rem; background: white; background: light-dark(white, #1a2420); box-shadow: var(--shadow); }
.board-map .hmap-year { font-size: 2.2rem; }
/* On the board the map fills whatever height is left under the prompt and the controls. */
.board-slide.is-map { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 1rem; }
.board-map { flex: 1 1 0; min-height: 18rem; display: flex; }
.board-map > .hmap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.board-map .hmap-stage { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.board-map .hmap-pane { min-height: 0; }
.board-map .hmap-svg { width: 100%; height: 100%; }
@media (max-width: 640px) { .board-slide { padding: 1.25rem 1rem 2rem; } .board-title { display: none; } }
/* Data source, showing tools, one-click board map. */
.board-quickmap { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; padding: 1rem 1.5rem; background: #f6f7f3; background: light-dark(#f6f7f3, #20201e); }
.board-quickmap[hidden] { display: none; }
.board-quickmap > .board-map { flex: 1 1 0; min-height: 0; }
.board-bar [data-open-map] { white-space: nowrap; }
/* Timed drawings, areas, thematic layers and the key. */

/* Map locked on the free plan */
.map-locked { opacity: .75; }
.map-locked-note { flex-basis: 100%; margin: .4rem 0 0; }