/* Whiteboard application layout. The canvas is the priority; chrome stays thin and neutral. */
html, body.board-page { height: 100%; overflow-x: hidden; }
/* Touch targets: 44 px on phones (Apple and WCAG guidance), a little tighter with a mouse. */
.board-page { --stage: #EEF1F7; --tap: 40px; --tap-small: 36px; --idle: #B6BFCF; --red-glow: 0 4px 12px rgba(192, 57, 43, .3);
  --rail: #F7F9FD; --conn-on: #2f9e62; --conn-wait: #e0a43a; --warn-ink: #9a6a12; --ok-line: #A6D8BB; --bad-line: #efb8b0; --present-bg: #FFFFFF;
  --kid-tap: 56px; --kid-label: 13px; --print-ink: #101B34; --print-line: #808BA1; --report-text: 14px; }
@media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .board-page { --stage: #0A0F1A; --idle: #4A556E; --rail: #121928; --conn-on: #4FC788; --conn-wait: #F0B54A; --warn-ink: #F0B54A; --ok-line: #2E7A50; --bad-line: #8A3A33; --present-bg: #05080F; } }
@media screen { :root[data-theme="dark"] .board-page { --stage: #0A0F1A; --idle: #4A556E; --rail: #121928; --conn-on: #4FC788; --conn-wait: #F0B54A; --warn-ink: #F0B54A; --ok-line: #2E7A50; --bad-line: #8A3A33; --present-bg: #05080F; } }
@media (max-width: 760px) { .board-page { --tap: 44px; --tap-small: 44px; } }
body.board-page { margin: 0; overflow: hidden; background: var(--stage); font-family: var(--font-ui); font-size: 15px; line-height: 1.5; overscroll-behavior: none; }
html[lang="ar"] body.board-page { font-size: 15px; line-height: 1.6; }
.app { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: 100vh; height: 100dvh; }

/* Top bar */
.app-bar { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 12px; padding-top: max(6px, env(safe-area-inset-top)); background: var(--surface); border-bottom: 1px solid var(--line); }
.app-brand { display: inline-grid; place-items: center; flex: none; min-width: var(--tap); min-height: var(--tap); }
.app-mark { width: 34px; height: 34px; display: block; }
.app-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-name { font-family: var(--font-display); font-size: 18px; font-weight: 800; margin: 0; white-space: nowrap; }
.room-chip { border: 1px solid var(--control-line); background: var(--bg); border-radius: 6px; padding: 3px 10px; min-width: 0; font: 700 14px/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; color: var(--ink); cursor: pointer; min-height: var(--tap); }
.room-chip:hover { border-color: var(--blue); }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--idle); }
.conn[data-state="online"] i { background: var(--conn-on); }
.conn[data-state="connecting"] i, .conn[data-state="offline"] i { background: var(--conn-wait); }
.conn[data-state="offline"] { color: var(--warn-ink); }
.conn[data-state="ended"] i { background: var(--red); }
.app-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.bar-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 0; background: transparent; border-radius: 10px; color: var(--ink-2); font-family: var(--font-display); font-size: 15px; font-weight: 500; cursor: pointer; position: relative; }
.bar-btn svg, .icon-btn svg { width: 20px; height: 20px; flex: none; }
.bar-btn:hover, .icon-btn:hover { background: var(--bg); color: var(--ink); }
.bar-btn[aria-expanded="true"] { background: var(--blue-tint); color: var(--blue); font-weight: 700; }
.badge { min-width: 20px; height: 20px; border-radius: 10px; background: var(--orange-ink); color: var(--on-accent); font-size: 12px; line-height: 20px; text-align: center; padding: 0 5px; font-style: normal; }
.icon-btn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; padding: 0; list-style: none; }
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn[disabled] { opacity: .35; cursor: default; background: transparent; }
.bar-menu { position: relative; }
.menu-pop { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); width: 280px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 8px; z-index: 40; display: grid; gap: 4px; max-block-size: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; }
.menu-item { display: flex; align-items: center; gap: 10px; min-height: max(42px, var(--tap)); padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; text-align: start; width: 100%; }
.menu-item svg { width: 18px; height: 18px; color: var(--ink-3); }
.menu-item:hover { background: var(--bg); color: var(--ink); }
.menu-item:disabled { opacity: .45; cursor: default; background: transparent; }
.menu-group { padding: 6px 10px 10px; border-bottom: 1px solid var(--line-2); display: grid; gap: 6px; }
.menu-label { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.seg-mini { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--bg); border: 1px solid var(--control-line); border-radius: 7px; padding: 2px; }
.seg-mini button, .seg-mini a { border: 0; background: transparent; min-height: var(--tap-small); padding: 4px 10px; border-radius: 5px; font-size: 14px; color: var(--ink-2); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.seg-mini button[aria-pressed="true"], .seg-mini a[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--control-line); font-weight: 600; }
.seg-mini .display { font-family: var(--font-display); font-weight: 700; }
/* Text size: thickness dots like the pen sizes, readable in every language */
.tsize { min-width: var(--tap-small); justify-content: center; }
.tsize-dot { --d: 6px; width: var(--d); height: var(--d); border-radius: 50%; background: currentColor; }
.tsize-1 { --d: 9px; } .tsize-2 { --d: 13px; } .tsize-3 { --d: 18px; }
.recent-list { display: grid; gap: 2px; }
.recent-list a { font: 600 14px ui-monospace, Menlo, monospace; letter-spacing: .1em; padding: 6px 8px; border-radius: 5px; text-decoration: none; color: var(--blue); direction: ltr; text-align: start; }
.recent-list a:hover { background: var(--bg); }

/* Body: rail + stage + panel */
.app-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: 0; }
.toolrail { display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; background: var(--rail); border-inline-end: 1px solid var(--line); overflow-y: auto; position: relative; z-index: 5; }
.tool-group { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--line-2); align-items: center; }
.tool-group:last-of-type { border-bottom: 0; }
.tool { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); cursor: pointer; padding: 0; position: relative; }
.tool svg { width: 22px; height: 22px; }
.tool:hover:not([disabled]) { background: var(--bg); color: var(--ink); }
.tool[aria-pressed="true"] { background: var(--blue); color: var(--on-accent); box-shadow: 0 4px 12px rgba(40, 75, 250, .3); }
.tool[disabled] { opacity: .3; cursor: default; }
.tool-red { color: var(--red); }
.tool-red[aria-pressed="true"] { background: var(--red); color: var(--on-accent); box-shadow: var(--red-glow); }
.swatches { display: grid; grid-template-columns: repeat(2, 20px); gap: 6px; justify-content: center; padding: 6px 0 10px; }
.swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--control-line); background: var(--c); cursor: pointer; padding: 0; }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--blue); }
.sizes .size { width: 44px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; border-radius: 6px; }
.size i { width: var(--d); height: var(--d); border-radius: 50%; background: var(--ink-2); }
.size[aria-pressed="true"] { background: var(--bg); }
.size[aria-pressed="true"] i { background: var(--ink); }
/* Wider screens: a two-column rail, so tools, corrections, inks and undo all fit a 768 px tall laptop. */
@media (min-width: 761px) {
  .tool-group { display: grid; grid-template-columns: repeat(2, 44px); justify-content: center; }
  .swatches { grid-template-columns: repeat(3, 20px); column-gap: 10px; }
  .sizes { grid-template-columns: repeat(3, 28px); }
  .sizes .size { width: 28px; }
  /* Fixed columns: when the rail is hidden (a student not yet allowed to write), the stage must not slide into
     the rail's auto-sized column, where it collapses and the board disappears. */
  .board-stage { grid-column: 2; }
  .panel { grid-column: 3; }
  body.presenting .board-stage { grid-column: 1; }
}
/* Shape picker (S1): fixed, outside the scrolling tool rail (which clipped it), placed beside the Shapes button by JS. */
.shape-pop { position: fixed; z-index: 40; display: grid; grid-template-columns: repeat(5, 44px); gap: 2px; background: var(--surface); border: 1px solid var(--control-line); border-radius: 10px; box-shadow: var(--shadow); padding: 4px; }
.shape-pop[hidden] { display: none; }  /* display: grid must not override the hidden attribute */
.shape-pop .tool[aria-pressed="true"] { background: var(--blue-tint); color: var(--blue); }
.shape-icon { display: contents; }
.tool-more { position: absolute; inset-block-end: 6px; inset-inline-end: 6px; width: 5px; height: 5px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; opacity: .7; pointer-events: none; }

.board-stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 16px; overflow: hidden; touch-action: none; }
.board-page button, .board-page summary, .board-page a { touch-action: manipulation; }
.fit-btn { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 6; min-height: 44px; box-shadow: var(--shadow); }
.fit-btn svg { width: 20px; height: 20px; }
/* Unconfirmed work after a server restart: stays until restored or discarded (no timeout, never pushed out). */
.recovery-card { position: absolute; z-index: 7; inset-inline: 12px; inset-block-end: 12px; margin-inline: auto; max-width: 520px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--orange); border-radius: var(--radius); box-shadow: var(--shadow); }
.recovery-card p { margin: 0 0 8px; font-size: 15px; }
.recovery-card .recovery-hint { color: var(--orange-ink); font-size: 14px; }
.recovery-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.recovery-actions .btn { min-height: var(--tap); }
/* BOARD-KEYBOARD1(-FIX): while the objects list has the focus, the focused object's name and the keys, at the stage's
   corner (not on the zoomed sheet); where it would cover the Fit button (narrow screens), app.js moves it to the foot of
   the visible board */
.obj-hint { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 7; max-inline-size: calc(100% - 140px); margin: 0;
  padding: 6px 10px; border: 1px solid var(--control-line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink);
  font-size: 14px; box-shadow: var(--shadow); pointer-events: none; }
.obj-hint[hidden] { display: none; }
.sheet { transform-origin: 0 0; position: relative; background: var(--document); border-radius: 4px; box-shadow: 0 1px 3px rgba(16,27,52,.10), 0 12px 36px rgba(16,27,52,.10); touch-action: none; user-select: none; -webkit-user-select: none; }
.sheet canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#ink-canvas { cursor: crosshair; }
body[data-active-tool="select"] #ink-canvas { cursor: default; }
body[data-active-tool="text"] #ink-canvas { cursor: text; }
body[data-can-edit="false"] #ink-canvas { cursor: not-allowed; }
.empty-hint { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; color: var(--ink-3); pointer-events: none; padding: 24px; }
.empty-hint strong { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--ink-2); }
.empty-hint span { max-width: 44ch; font-size: 15px; }
.text-editor { position: absolute; z-index: 10; margin: 0; padding: 0 2px; border: 0; outline: 2px dashed var(--blue); outline-offset: 4px; background: rgba(255,255,255,.85); resize: none; overflow: hidden; white-space: pre; color: var(--ink); min-width: 40px; }
.sel-bar { position: absolute; z-index: 9; display: flex; gap: 4px; background: var(--inverse); border-radius: 8px; padding: 4px; box-shadow: var(--shadow); transform: translateY(-100%); }
.sel-bar button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--inverse-ink); min-height: 34px; padding: 4px 10px; border-radius: 5px; cursor: pointer; font-size: 14px; }
.sel-bar button:hover { background: var(--inverse-hover); }
.sel-bar svg { width: 16px; height: 16px; }
.sel-author { align-self: center; max-inline-size: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--inverse-ink); font-size: 13px; padding-inline: 8px 4px; border-inline-end: 1px solid var(--inverse-line); }
.filter-note { position: absolute; z-index: 8; inset-block-start: 10px; inset-inline: 10px; margin-inline: auto; inline-size: fit-content; display: flex; align-items: center; gap: 10px; padding-block: 6px; padding-inline: 14px 6px; background: var(--inverse); color: var(--inverse-ink); border-radius: var(--radius-s); box-shadow: var(--shadow); font-size: 14px; }
.filter-note button { white-space: nowrap; border: 0; border-radius: var(--radius-s); background: var(--blue); color: var(--on-accent); min-height: var(--tap-small); padding-inline: 12px; cursor: pointer; font: inherit; }
.filter-note[hidden] { display: none; }  /* display: flex must not override the hidden attribute */
.author-filter { display: grid; gap: 6px; font-size: 14px; color: var(--ink-3); }

.join-banner { position: absolute; top: 16px; inset-inline-start: 16px; display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px 10px 10px; box-shadow: var(--shadow); z-index: 6; }
html[dir="rtl"] .join-banner { padding: 10px 10px 10px 16px; }
.jb-qr { width: 96px; height: 96px; }
.jb-qr svg { width: 100%; height: 100%; }
.jb-text { display: grid; gap: 0; line-height: 1.3; }
.jb-text span { font-size: 13px; color: var(--ink-3); }
.jb-text strong { font-size: 18px; }
.jb-text b { font: 800 30px/1.1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .14em; color: var(--blue); }
.exit-present { position: absolute; bottom: 16px; inset-inline-end: 16px; z-index: 6; }

/* Side panel */
.panel { width: 340px; background: var(--surface); border-inline-start: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line-2); }
html[dir="rtl"] .panel-head { padding: 10px 16px 10px 12px; }
.panel-head h2 { font-size: 18px; margin: 0; }
.panel-body { padding: 16px; overflow-y: auto; display: grid; gap: 12px; align-content: start; }
.panel-body h3 { font-size: 15px; margin: 6px 0 0; display: flex; align-items: center; gap: 8px; }
.count { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.panel-intro, .panel-empty { color: var(--ink-3); font-size: 14px; margin: 0; }
.lock-row { display: flex; flex-wrap: wrap; gap: 6px; }
.lock-row .btn svg { width: 18px; height: 18px; }
#btn-lock[aria-pressed="true"] { background: var(--orange-tint); border-color: var(--orange); }
.locked-note { margin: 0; font-size: 14px; padding: 8px 10px; background: var(--orange-tint); border-radius: 6px; }
.ended-note { padding: 12px; background: var(--red-tint); border-radius: var(--radius-s); }
.ended-note p { margin: 4px 0 10px; font-size: 14px; }
.end-lesson { margin-block-start: 8px; }
/* PRIVACY-SIMPLE1: when the lesson is deleted, under End lesson; shortly before, the text turns to a warning */
.lesson-life { display: grid; gap: 6px; margin-block-start: 8px; }
.lesson-life.is-soon #lesson-life-text { color: var(--red); font-weight: 600; }
.report-switch { display: grid; gap: 4px; margin-block-end: 12px; }
body[data-lesson-ended="true"] .end-lesson { display: none; }
.people-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.person { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px; border-radius: 6px; }
.person:hover { background: var(--bg); }
.person.request { background: var(--orange-tint); }
.avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--blue-tint); color: var(--blue); }
.person .who { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.person .who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }
.person .who small { color: var(--ink-3); font-size: 12px; }
.person .who small.writing { color: var(--ok); font-weight: 600; }
.person .acts { display: flex; gap: 4px; }
.mini { min-height: var(--tap-small); padding: 4px 10px; border-radius: 8px; border: 1px solid var(--control-line); background: var(--surface); font-family: var(--font-display); font-size: 14px; cursor: pointer; font-weight: 700; color: var(--ink); }
.mini:hover { border-color: var(--ink-3); }
.mini.primary { background: var(--blue); color: var(--on-accent); border-color: var(--blue); }
.mini.danger { color: var(--red); }
.full { width: 100%; }
.ask-form { display: grid; gap: 6px; }
.ask-form h3 { margin: 0 0 4px; }
.ask-form .label { margin: 6px 0 0; font-size: 13px; }
.ask-form .textarea { min-height: 64px; }
.ask-actions { display: flex; gap: 6px; margin-top: 8px; }
.answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.answer { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: grid; gap: 4px; }
.answer.ok { border-color: var(--ok-line); background: var(--ok-tint); }
.answer.bad { border-color: var(--bad-line); background: var(--red-tint); }
.answer header { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.answer p { margin: 0; font-size: 19px; unicode-bidi: plaintext; }
.answer .mini { justify-self: start; }
.act-letters { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.act-letters button { min-height: 36px; border: 1px solid var(--control-line); background: var(--surface); border-radius: 6px; font-family: var(--font-model); font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink); padding: 0; }
.act-letters button[aria-checked="true"] { background: var(--blue); color: var(--on-accent); border-color: var(--blue); }
.act-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.act-list button { width: 100%; display: flex; gap: 12px; align-items: center; text-align: start; padding: 10px; border: 1px solid var(--control-line); border-radius: 14px; background: var(--surface); cursor: pointer; color: var(--ink); }
.act-list button:hover { border-color: var(--blue); }
.act-glyph { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--blue-tint); color: var(--blue); font-family: var(--font-model); font-size: 22px; line-height: 1; }
.act-list strong { display: block; font-family: var(--font-display); font-size: 16px; }
.act-list small { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.4; }

/* Page bar */
.pagebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 52px; padding: 6px 12px; background: var(--surface); border-top: 1px solid var(--line); }
.pb-group { display: flex; align-items: center; gap: 8px; }
.pb-icon svg { width: 18px; height: 18px; color: var(--ink-3); }
.pb-select { min-height: var(--tap-small); border: 1px solid var(--control-line); border-radius: 6px; background: var(--surface); padding: 4px 8px; font-size: 14px; }
.pb-pages { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.page-num { min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.pb-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.pb-check input { width: 18px; height: 18px; accent-color: var(--blue); }
.pb-note { font-size: 13px; color: var(--ink-3); }

/* Guest bar */
.guest-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; padding-bottom: max(10px, env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.gb-status { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--font-display); font-weight: 700; }
.gb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--idle); flex: none; }
.guest-bar { --gb-tint: var(--surface); --gb-dot: var(--idle); background: var(--gb-tint); transition: background-color .2s ease-out; }
.gb-dot { background: var(--gb-dot); }
.guest-bar[data-state="writing"] { --gb-tint: var(--ok-tint); --gb-dot: var(--ok); }
.guest-bar[data-state="pending"] { --gb-tint: var(--orange-tint); --gb-dot: var(--orange); }
.guest-bar[data-state="locked"] { --gb-tint: var(--red-tint); --gb-dot: var(--red); }
.guest-bar[data-state="reconnecting"] { --gb-tint: var(--orange-tint); --gb-dot: var(--orange); }
.guest-bar[data-state="reconnecting"] .gb-dot { animation: gb-pulse 1s ease-in-out infinite alternate; }
@keyframes gb-pulse { to { opacity: .25; } }
.gb-actions { margin-inline-start: auto; display: flex; gap: 8px; }
.gb-actions svg { width: 20px; height: 20px; }

/* Modals */
.modal { border: 0; border-radius: 22px; padding: 22px; background: var(--surface); width: min(520px, calc(100vw - 24px)); box-shadow: 0 30px 80px rgba(0,0,0,.25); color: var(--ink); }
.modal::backdrop { background: var(--overlay); }
.modal-small { width: min(400px, calc(100vw - 24px)); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.modal-head h2 { font-size: 21px; margin: 0; }
.modal-text { color: var(--ink-2); margin: 0 0 16px; }
/* REVIEWLINK1: the review-link dialog: which pages, previewed as they would be published */
.review-dialog .review-never { font-size: 14px; }
.review-pages { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 12px 12px; margin: 0 0 12px; }
.review-pages legend { padding-inline: 4px; font-family: var(--font-display); }
.review-pages-list { display: flex; flex-wrap: wrap; gap: 10px; max-block-size: 260px; overflow: auto; padding: 4px; }  /* room for the outline */
.review-pages-list label { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; min-width: var(--tap); }
.review-pages-list canvas { inline-size: 120px; block-size: auto; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.review-pages-list input:checked + canvas { outline: 2px solid var(--blue); outline-offset: 1px; }
.review-state { color: var(--ink-2); margin: 0 0 8px; }
.review-note { margin: 0 0 8px; font-family: var(--font-display); color: var(--ink); }  /* REVIEWLINK1-FIX: preparing / changed */
.review-note[hidden] { display: none; }
.review-link-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.review-link-row[hidden] { display: none; }
.review-link-row .input { flex: 1 1 220px; min-width: 0; }
.review-link-row .btn, .review-actions .btn { min-height: var(--tap); }
.review-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.modal .label { margin-top: 10px; }
.modal .btn.full { margin-top: 16px; }
.share-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; }
.share-qr { width: 180px; height: 180px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: var(--document); }
.share-qr svg { width: 100%; height: 100%; }
.share-code { font: 800 40px/1.1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .16em; color: var(--blue); margin-bottom: 8px; text-align: start; }
html[dir="rtl"] .share-code { text-align: right; }
.copy-row { display: flex; gap: 6px; }
.copy-row .input { min-width: 0; font-size: 14px; }
/* CLASSROOM1: on the narrowest phones a learner's answer field takes the full width, the send button below it */
@media (max-width: 360px) { #answer-form .copy-row { flex-wrap: wrap; } #answer-form .copy-row .input { flex: 1 1 100%; } #answer-form .copy-row .btn { flex: 1 1 100%; } }
.share-actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.teacher-link { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 14px; }
.teacher-link summary { cursor: pointer; color: var(--ink-3); font-weight: 600; }
.teacher-link p { color: var(--red); margin: 8px 0; }
.answer-prompt { font-size: 22px; font-weight: 600; margin: 4px 0 14px; unicode-bidi: plaintext; }
.answer-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-bottom: 12px; }
.answer-choices button { min-height: 64px; border: 2px solid var(--control-line); border-radius: 10px; background: var(--surface); font-family: var(--font-model); font-size: 30px; line-height: 1.2; cursor: pointer; color: var(--ink); }
.answer-choices button:hover { border-color: var(--blue); }
.answer-choices button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-tint); }
.answer-feedback { min-height: 24px; font-weight: 700; margin: 12px 0 0; }
.answer-feedback.ok { color: var(--ok); }
.answer-feedback.bad { color: var(--red); }
.confirm-text { font-size: 17px; margin: 0 0 18px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.noscript { position: fixed; inset: auto 0 0; background: var(--red); color: var(--on-accent); padding: 12px; text-align: center; }

/* Role visibility */
body:not([data-mode="host"]) .live-host-only { display: none !important; }
body[data-mode="guest"] .host-only, body[data-mode="guest"] .host-tool { display: none !important; }
body:not([data-mode="solo"]) .solo-only { display: none !important; }
body:not([data-mode="guest"]) .guest-bar { display: none !important; }
body:not([data-mode="guest"]) .guest-only { display: none !important; }
body[data-mode="guest"][data-can-edit="false"] .toolrail { display: none; }
body[data-mode="guest"] .pagebar { display: none; }
body[data-mode="guest"] .toast-region { bottom: 96px; }
.rotate-hint { display: none; }
@media (max-width: 760px) and (orientation: portrait) {
  body[data-mode="guest"][data-format="landscape"] .rotate-hint { display: flex; position: absolute; inset-inline: 12px; bottom: 12px; justify-content: center; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-3); pointer-events: none; }
  body[data-mode="guest"][data-format="landscape"] .rotate-hint svg { width: 20px; height: 20px; }
  body[data-zoomed="true"] .rotate-hint { display: none !important; }
}

/* Presentation mode: hide chrome, keep a compact floating rail */
body.presenting .app-bar, body.presenting .panel, body.presenting .pagebar { display: none; }
body.presenting .app { grid-template-rows: minmax(0, 1fr) auto; }
body.presenting .board-stage { padding: 8px; background: var(--present-bg); }
body.presenting .sheet { box-shadow: none; }
body.presenting .toolrail { position: absolute; z-index: 20; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); max-height: calc(100% - 20px); }
body.presenting .app-body { grid-template-columns: minmax(0, 1fr); position: relative; }

/* Tablet and phone */
@media (max-width: 1100px) {
  /* AUDIT-UI1: the words leave the screen but stay the button's accessible name (display: none would remove it) */
  .bar-btn span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bar-btn { padding: 6px 10px; }
  .panel { width: 300px; }
}
@media (max-width: 760px) {
  .app { grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
  .app-bar { gap: 6px; padding-inline: 8px; min-height: 52px; }
  .app-name { display: none; }
  .conn span { display: none; }
  .app-actions { gap: 0; }
  #btn-export { display: none; }
  /* Keep Share on screen for a teacher in a live lesson (narrow repair): no presentation mode on phones, 44 px bar
     buttons, a tighter room code, and below 400 px the brand mark gives way while live. */
  #btn-present { display: none; }
  .bar-btn, #btn-share { min-width: var(--tap); min-height: var(--tap); justify-content: center; padding-inline: 6px; }
  .app-title { gap: 6px; }
  .room-chip { padding-inline: 6px; letter-spacing: .04em; }
  #btn-share span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* AUDIT-UI1: still its name */
  #btn-share { padding: 6px 10px; position: relative; }
  .app-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .toolrail { grid-row: 2; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-inline-end: 0; border-top: 1px solid var(--line); padding: 6px 8px; gap: 8px; scrollbar-width: none; }
  .toolrail::-webkit-scrollbar { display: none; }
  .tool-group { flex-direction: row; border-bottom: 0; border-inline-end: 1px solid var(--line-2); padding: 0 8px 0 0; flex: none; }
  html[dir="rtl"] .tool-group { padding: 0 0 0 8px; }
  .tool-group:last-of-type { border-inline-end: 0; }
  .swatches { grid-template-columns: repeat(3, 22px); grid-auto-flow: row; padding: 0 8px; }
  /* 44 px targets with the colour drawn inside, as on the learner bar */
  .swatch { width: 44px; height: 44px; border: 0; box-shadow: none; background: radial-gradient(circle closest-side, var(--c) 0 50%, transparent 53%); }
  .swatch[aria-checked="true"] { background: radial-gradient(circle closest-side, var(--c) 0 44%, var(--surface) 47% 58%, var(--blue) 61% 76%, transparent 79%); box-shadow: none; }
  .sizes .size { width: 44px; height: 44px; }
  .teacher-link summary { display: flex; align-items: center; min-block-size: 44px; }
  .kbd-help { display: inline-flex; align-items: center; min-block-size: 44px; }
  .recent-list a { display: flex; align-items: center; min-block-size: 44px; }
  /* Learner bottom bar: pen, eraser, text, three inks, undo. Every target 44 px, no sideways scrolling. */
  body[data-mode="guest"] .toolrail { justify-content: center; overflow-x: visible; gap: 4px; padding-inline: 4px; }
  body[data-mode="guest"] .toolrail [data-tool="highlight"],
  body[data-mode="guest"] .toolrail [data-tool="shape"],
  body[data-mode="guest"] .toolrail .sizes,
  body[data-mode="guest"] #btn-redo { display: none; }
  body[data-mode="guest"] .tool-group { padding-inline: 4px; }
  body[data-mode="guest"] .swatches { grid-template-columns: repeat(3, 44px); gap: 0; padding: 0 4px; }
  body[data-mode="guest"] .swatch { width: 44px; height: 44px; border: 0; box-shadow: none; background: radial-gradient(circle closest-side, var(--c) 0 58%, transparent 61%); }
  body[data-mode="guest"] .swatch[aria-checked="true"] { background: radial-gradient(circle closest-side, var(--c) 0 50%, var(--surface) 53% 64%, var(--blue) 67% 82%, transparent 85%); }
  .board-stage { padding: 8px; }
  .panel { position: fixed; inset: auto 0 0 0; width: auto; max-height: 78dvh; border: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.18); z-index: 50; padding-bottom: env(safe-area-inset-bottom); }
  .pagebar { gap: 6px 8px; padding: 4px 8px; min-height: 46px; }
  .pb-group .pb-icon { display: none; }
  .pb-note { display: none; }
  .text-opts { order: 5; width: 100%; overflow-x: auto; flex-wrap: wrap; row-gap: 4px; }  /* wraps, not widens, when the keyboard toggle joins it */
  .guest-bar { flex-wrap: wrap; }
  .gb-actions { width: 100%; margin: 0; }
  .gb-actions .btn { flex: 1 1 0; min-width: 0; min-height: 50px; white-space: normal; text-align: center; }
  .share-grid { grid-template-columns: 1fr; justify-items: center; }
  .share-info { width: 100%; }
  .share-code { text-align: center !important; font-size: 34px; }
  .join-banner { top: 8px; inset-inline-start: 8px; padding: 6px; gap: 8px; }
  .jb-qr { width: 64px; height: 64px; }
  .jb-text b { font-size: 22px; }
  .jb-text strong { font-size: 14px; }
  .menu-pop { position: fixed; inset-inline: 8px; top: 56px; width: auto; max-block-size: calc(100dvh - 64px); }
}
/* Phones: messages appear under the top bar, never over the tools at the bottom. */
@media (max-width: 760px) {
  body.board-page .toast-region { top: calc(60px + env(safe-area-inset-top)); bottom: auto; }
}
@media (max-width: 760px) and (orientation: landscape) {
  .app-bar { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .gb-dot { animation: none !important; } }
.ask-form .ask-check { font-size: 14px; margin-top: 6px; min-height: 44px; }
/* Contextual link to an online Arabic keyboard, only beside fields where people type Arabic. */
.kbd-help { font-size: 13px; white-space: nowrap; }
@media (max-width: 760px), (pointer: coarse) { .kbd-help-desktop { display: none; } }
/* The activity carried from a practice page. */
[data-activity].is-suggested { outline: 2px solid var(--blue); outline-offset: -2px; background: var(--blue-tint); }
@media (max-width: 399px) { body[data-mode="host"] .app-brand { display: none; } }

/* Floating Arabic keyboard: board placement (the keyboard itself is in keyboard.css). The phone toggle beside the text
   options is the board's own, and comes after .icon-btn so it stays hidden on wide screens. */
.kbd-toggle { display: none; }
@media (max-width: 760px) {
  .kbd-toggle { display: inline-flex; min-block-size: var(--tap); }
  #btn-kbd { display: none; }
  .gb-kbd { margin-inline-start: auto; }
  body[data-can-edit="false"] .gb-kbd { display: none; }  /* learners see it once they may write */
  body[data-kbd="open"] .pagebar > :not(.text-opts) { display: none; }  /* paper and pages wait; text size stays */
}
/* Short phones (K2 fixup): while the docked keyboard is open, the tool row and page bar step aside (closing the
   keyboard brings them back) and the keys show two rows at a time, so the board keeps room for the text. */
@media (max-width: 760px) and (max-height: 700px) {
  body[data-kbd="open"] .toolrail, body[data-kbd="open"] .pagebar { display: none; }
  body[data-kbd="open"] .kbd-keys { max-block-size: 96px; }
  body[data-kbd="open"] .kbd-body { gap: 4px; padding-block: 4px; }
}

/* Classroom tools (TODAY item 4) ---------------------------------------------------------------- */
@media (max-width: 760px) { .wide-only { display: none !important; } }
@media (min-width: 761px) { .narrow-only { display: none !important; } }
body[data-active-tool="laser"] #ink-canvas { cursor: crosshair; }
.tools-panel .tool-block { display: grid; gap: 8px; padding-block-end: 12px; border-bottom: 1px solid var(--line-2); }
.tools-panel .tool-block:last-child { border-bottom: 0; }
.tools-panel h3 svg { width: 18px; height: 18px; color: var(--ink-3); }
.tool-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tool-presets button { min-height: var(--tap-small); min-inline-size: var(--tap-small); }
.tool-min { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-3); }
.tool-min input { inline-size: 5em; }
.tool-big { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.tool-kind { font-size: 14px; color: var(--ink-3); }
.tool-live { display: grid; gap: 6px; }
.tool-result { font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.team-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.team-row { display: grid; grid-template-columns: 1fr auto 3em auto; align-items: center; gap: 6px; }
.team-score { text-align: center; font-family: var(--font-display); font-size: 20px; font-variant-numeric: tabular-nums; }
.team-row .mini { min-inline-size: var(--tap-small); min-block-size: var(--tap-small); font-size: 18px; }

.tools-card { position: absolute; z-index: 7; inset-block-start: 10px; inset-inline-end: 10px; max-inline-size: min(280px, calc(100% - 20px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.tools-card[hidden] { display: none; }
.tools-card-head { display: flex; align-items: center; gap: 8px; inline-size: 100%; min-block-size: var(--tap-small); padding-block: 4px; padding-inline: 12px; border: 0; background: var(--bg); color: var(--ink-2); font-family: var(--font-display); font-size: 14px; font-weight: 700; cursor: pointer; text-align: start; }
.tools-card-head svg { width: 18px; height: 18px; flex: none; }
.tools-card.collapsed .tools-card-body { display: none; }
.tools-card.collapsed .tools-card-head span { display: none; }
.tools-card.collapsed { inline-size: auto; }
.tools-card-body { display: grid; gap: 8px; padding: 10px 12px; }
.tc-row { display: grid; gap: 2px; }
.tc-label { font-size: 13px; color: var(--ink-3); }
.tc-big { font-family: var(--font-display); font-size: 26px; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tc-timer.done .tc-big, .tc-timer.done .tc-label { color: var(--red); }
.tc-scores { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5em, 1fr)); gap: 4px 10px; }
.tc-scores li { display: flex; justify-content: space-between; gap: 6px; font-size: 14px; }
.tc-scores b { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
body.tools-open .tools-card { display: none; }  /* the teacher already sees everything in the Tools panel */
/* Phones: one compact row above the page (portrait phones have room there), so the writing area stays free */
@media (max-width: 760px) {
  .tools-card { inset-inline: 8px; inset-block-start: 6px; max-inline-size: none; display: flex; align-items: stretch; }
  .tools-card-head { inline-size: auto; padding-inline: 10px; }
  .tools-card-head span { display: none; }
  .tools-card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding-block: 4px; padding-inline: 10px; }
  .tc-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tc-big { font-size: 18px; }
  .tc-scores { display: flex; gap: 8px; }
  .tc-scores li { font-size: 16px; }
  .tc-scores li span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tc-scores li + li::before { content: "·"; color: var(--ink-3); margin-inline-end: 8px; }
}
.laser-note { position: absolute; z-index: 8; inset-block-end: 10px; inset-inline: 10px; margin-inline: auto; inline-size: fit-content; display: flex; align-items: center; gap: 10px; padding-block: 6px; padding-inline: 14px 6px; background: var(--inverse); color: var(--inverse-ink); border-radius: var(--radius-s); box-shadow: var(--shadow); font-size: 14px; }
.laser-note[hidden] { display: none; }
/* BOARD-TEACH1: how to adapt material just added; stays until closed, above the board's lower edge */
.adapt-hint { position: absolute; z-index: 8; inset-block-end: 10px; inset-inline: 10px; margin-inline: auto; max-inline-size: 640px; inline-size: fit-content; display: flex; align-items: center; gap: 10px; padding-block: 8px; padding-inline: 14px 8px; background: var(--inverse); color: var(--inverse-ink); border-radius: var(--radius-s); box-shadow: var(--shadow); font-size: 14px; line-height: 1.45; }
.adapt-hint[hidden] { display: none; }
.adapt-hint p { margin: 0; }
.adapt-hint a { color: inherit; font-weight: 700; }
.adapt-hint button { white-space: nowrap; border: 0; border-radius: var(--radius-s); background: var(--blue); color: var(--on-accent); min-height: var(--tap-small); padding-inline: 12px; cursor: pointer; font: inherit; }
@media (max-width: 760px) { .adapt-hint { font-size: 13px; padding-block: 6px; } }
/* BOARD-TEACH1: the Activities catalogue by subject and stage */
.act-filter { display: grid; gap: 8px; margin-block: 8px 4px; }
.act-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.act-tabs .chip { font-family: var(--font-display); font-size: 14px; padding-inline: 12px; }
.act-tabs .chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--on-accent); }
.act-section[hidden], .act-subjects[hidden] { display: none; }
.act-skill { margin: 0 0 6px; color: var(--ink-2); font-size: 13px; }
.act-adapt { margin-block: 6px 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); font-size: 13.5px; line-height: 1.5; }
.act-adapt p { margin: 0; }
.act-adapt p + p { margin-block-start: 4px; }
.model-note { margin-block: 0 10px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.model-note[hidden] { display: none; }
.model-note p { margin: 0 0 4px; }
.laser-note button { white-space: nowrap; border: 0; border-radius: var(--radius-s); background: var(--red); color: var(--on-accent); min-height: var(--tap-small); padding-inline: 12px; cursor: pointer; font: inherit; }

/* Editing (TODAY item 1): icon actions on the selection bar */
.sel-bar .sel-icon { padding-inline: 8px; min-inline-size: 34px; justify-content: center; }
.sel-bar .sel-icon[aria-pressed="true"] { background: var(--blue); }
.sel-bar #sel-lock .ic-unlock, .sel-bar #sel-lock[aria-pressed="true"] .ic-lock { display: none; }
.sel-bar #sel-lock[aria-pressed="true"] .ic-unlock { display: inline-flex; }
.sel-bar #sel-lock span { display: inline-flex; }
.menu-kbd { margin-inline-start: auto; font: inherit; font-size: 12px; color: var(--ink-3); }
/* Phones: the bar docks in one row under the header instead of floating over (and hiding) the board */
@media (max-width: 760px) {
  .sel-bar { position: fixed; inset-block-start: 62px !important; inset-inline: 8px !important; inline-size: auto; transform: none; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior: contain; z-index: 30; }
  .sel-bar button, .sel-bar .sel-icon { min-inline-size: var(--tap-small); min-block-size: var(--tap-small); flex: none; justify-content: center; }
  .sel-bar #sel-count { display: none; }  /* the outlines show what is selected */
  .sel-bar #sel-delete { font-size: 0; gap: 0; }  /* icon only; the label stays for screen readers below */
  .sel-bar .sel-author { flex: none; }
  .menu-kbd { display: none; }
}

/* Appearance choices in the More menu (DM1): three options, wrapping rather than squeezing */
.theme-seg { flex-wrap: wrap; }
.theme-seg button { min-inline-size: var(--tap-small); justify-content: center; }
.theme-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 0 0 1px var(--control-line); }

/* Style options (WB1) */
.style-opts { position: relative; display: flex; align-items: center; }
.style-menu summary { list-style: none; }
.style-menu summary::-webkit-details-marker { display: none; }
.style-menu[open] summary { background: var(--blue-tint); color: var(--blue); }
.style-pop { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 0; z-index: 40; display: grid; gap: 8px; padding: 10px;
  min-inline-size: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: var(--shadow); }
.style-pop .pb-select { inline-size: 100%; }
.style-pop .opt-row { display: flex; gap: 6px; }
.style-opts[hidden], .style-opts [hidden] { display: none !important; }
.pb-mini { display: inline-flex; }
.opt-toggle[aria-pressed="true"] { background: var(--blue); color: var(--on-accent); }
.opt-toggle b { font-family: var(--font-display); font-size: 17px; }
.custom-swatch { position: relative; display: inline-block; cursor: pointer; background: conic-gradient(#E74C3C, #F1C40F, #2ECC71, #3498DB, #9B59B6, #E74C3C); }
.custom-swatch input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
@media (max-width: 760px) {
  .custom-swatch { background: radial-gradient(circle closest-side, transparent 0 30%, transparent 0), conic-gradient(#E74C3C, #F1C40F, #2ECC71, #3498DB, #9B59B6, #E74C3C); -webkit-mask: radial-gradient(circle closest-side, #000 0 50%, transparent 53%); mask: radial-gradient(circle closest-side, #000 0 50%, transparent 53%); }
}


/* Wide screens: the footer is one row of fixed height, so the board never resizes when a tool shows its options.
   AUDIT-FIX 1: the row is contained. The app's one column never grows past the window (a wide footer used to push the
   whole page, Share included, off the left edge in Arabic), the text options give way first (they scroll inside their
   own group if a language's labels still do not fit), and the link to an outside keyboard only shows where it fits. */
.app { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 761px) {
  .pagebar { block-size: 56px; flex-wrap: nowrap; min-inline-size: 0; }
  .pagebar .pb-group { flex: none; }
  .pagebar .text-opts { flex: 0 1 auto; min-inline-size: 0; overflow-x: auto; scrollbar-width: thin; }
  .pagebar .seg-mini { flex-wrap: nowrap; }
}
@media (max-width: 1279px) { .pagebar .kbd-help-desktop { display: none; } }
@media (max-width: 1279px) { .pagebar .pb-icon { display: none; } }  /* the select keeps its own label */

/* Table dialog (WB2) */
.table-form { display: grid; gap: 12px; }
.table-dims { display: flex; gap: 12px; }
.table-dims label { display: grid; gap: 4px; flex: 1; font-size: 14px; color: var(--ink-2); }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Focus mode (WB2): the board and its tools only */
body.focus .app-bar, body.focus .panel { display: none; }
body.focus .app { grid-template-rows: minmax(0, 1fr) auto; }
/* Keyboard shortcuts list (WB2) */
.keys-table { inline-size: 100%; border-collapse: collapse; font-size: 15px; }
.keys-table td { padding-block: 4px; border-block-end: 1px solid var(--line); }
.keys-table td:first-child { inline-size: 45%; }
.keys-table kbd { font: 600 13px var(--font-ui); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 2px 9px; white-space: nowrap; }

/* All pages (WB2) */
button.page-num { background: none; border: 0; color: inherit; border-radius: var(--radius-s); min-block-size: 44px; padding-inline: 8px; cursor: pointer; }
button.page-num:hover:not(:disabled) { background: var(--paper); }
button.page-num:disabled { cursor: default; color: inherit; }
.pages-modal { width: min(920px, calc(100vw - 24px)); }
.page-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; max-block-size: 70vh; overflow-y: auto; padding: 4px; }
.page-thumb { position: relative; display: block; padding: 0; border: 2px solid var(--line); border-radius: var(--radius-s); background: var(--document); overflow: hidden; cursor: pointer; }
.page-thumb canvas { display: block; inline-size: 100%; block-size: auto; }
.page-thumb[aria-current] { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent); }
.page-thumb-num { position: absolute; inset-block-end: 6px; inset-inline-start: 6px; min-inline-size: 26px; padding: 2px 8px; border-radius: var(--radius-s);
  background: var(--inverse); color: var(--inverse-ink); font: 700 13px var(--font-display); }

/* Class signal (WB2): a call for attention over the whole board, for a few seconds */
.class-signal { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: color-mix(in srgb, var(--inverse) 82%, transparent); cursor: pointer; }
.class-signal[hidden] { display: none; }
.class-signal .cs-inner { display: grid; justify-items: center; gap: 10px; padding: 28px 36px; border-radius: 22px; background: var(--surface); color: var(--ink); text-align: center; animation: cs-pop .35s ease-out; }
.class-signal svg { inline-size: 56px; block-size: 56px; color: var(--orange); }
.class-signal strong { font: 800 clamp(28px, 5vw, 48px) var(--font-display); }
.class-signal span { color: var(--ink-2); font-size: 18px; }
@keyframes cs-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .class-signal .cs-inner { animation: none; } }

/* Games (WB3) */
.ask-kinds { margin-block: 4px 10px; }
.ask-error { color: var(--red); font-weight: 600; margin: 8px 0 0; }
.answer-game { display: grid; gap: 12px; margin-block-end: 12px; }
.game-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.game-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: center; }
.game-left { font-family: var(--font-model); font-size: 26px; text-align: start; unicode-bidi: plaintext; }
.game-row .select { min-block-size: 44px; font-size: 18px; }
.game-tiles, .game-built { display: flex; flex-wrap: wrap; gap: 8px; min-block-size: 64px; }
.game-built { padding: 8px; border: 2px dashed var(--control-line); border-radius: var(--radius-s); }
.game-tile { min-inline-size: 56px; min-block-size: 56px; padding-inline: 12px; border: 2px solid var(--control-line); border-radius: var(--radius-s);
  background: var(--surface); color: var(--ink); font-family: var(--font-model); font-size: 28px; cursor: pointer; }
.game-tile.on { border-color: var(--blue); background: var(--blue-tint); }
.game-tile:disabled { opacity: .35; cursor: default; }
.game-preview { margin: 0; min-block-size: 40px; font-family: var(--font-model); font-size: 32px; text-align: center; }

/* Celebrate (WB3): confetti and a star message over the board, for a few seconds */
.celebrate { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; overflow: hidden; cursor: pointer; background: color-mix(in srgb, var(--inverse) 35%, transparent); }
.celebrate[hidden] { display: none; }
.celebrate .cs-inner { position: relative; display: grid; justify-items: center; gap: 10px; padding: 28px 36px; border-radius: 22px; background: var(--surface); color: var(--ink); text-align: center; animation: cs-pop .35s ease-out; }
.celebrate svg { inline-size: 64px; block-size: 64px; color: var(--orange); fill: #FFC93C; }
.celebrate strong { font: 800 clamp(26px, 5vw, 46px) var(--font-display); max-inline-size: 18ch; }
.celebrate-bits { position: absolute; inset: 0; pointer-events: none; }
.celebrate-bits i { position: absolute; inset-block-start: -20px; inset-inline-start: var(--x); inline-size: 10px; block-size: 16px; background: var(--c);
  transform: rotate(var(--r)); animation: confetti 2.6s var(--d) ease-in forwards; }
@keyframes confetti { to { transform: translateY(110vh) rotate(calc(var(--r) + 540deg)); } }
@media (prefers-reduced-motion: reduce) { .celebrate-bits { display: none; } .celebrate .cs-inner { animation: none; } }
.answer-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Lesson tray (WB3) */
.tray-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 8px 12px; }
.tray-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tray-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.tray-kind { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: var(--radius-s); background: var(--blue-tint); color: var(--blue); }
.tray-kind svg { inline-size: 18px; block-size: 18px; }
.tray-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; }

/* Private boards and homework (WB4) */
.work-toggle { inline-size: 100%; justify-content: center; margin-block-end: 8px; }
.work-toggle[aria-pressed="true"] { background: var(--blue); color: var(--on-accent); border-color: var(--blue); }
.work-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.work-card { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.work-open { padding: 0; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--document); overflow: hidden; cursor: pointer; }
.work-open canvas { display: block; inline-size: 100%; block-size: auto; }
.work-name { font-family: var(--font-display); }
.work-grade { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.work-grade .input { min-block-size: 44px; }
.view-banner { position: absolute; inset-block-start: 10px; inset-inline: 0; margin-inline: auto; inline-size: fit-content; max-inline-size: calc(100% - 20px); z-index: 7;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: var(--radius); background: var(--inverse); color: var(--inverse-ink); box-shadow: var(--shadow); }
.view-banner[hidden] { display: none; }
/* BOARD-RELIABILITY1: the stalled-connection notice, below the teacher's view banner when both show */
.conn-card { position: absolute; inset-block-start: 10px; inset-inline: 0; margin-inline: auto; inline-size: fit-content; max-inline-size: min(560px, calc(100% - 20px)); z-index: 8;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font-size: 15px; }
.conn-card[hidden] { display: none; }
.conn-card span { flex: 1 1 240px; }
.conn-card .btn { min-height: var(--tap); }
.view-banner:not([hidden]) ~ .conn-card { inset-block-start: 64px; }
.golive-status { margin: 0 0 12px; color: var(--ink-2); }
.golive-cancel { margin-block-start: 8px; }
.gb-private { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; font-size: 13px; color: var(--ink-2); }
.gb-private svg { inline-size: 14px; block-size: 14px; }
.grade-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: var(--radius-s); background: var(--blue-tint); color: var(--ink); }
.grade-card[hidden] { display: none; }
/* MINIBOARD1: the learner's dictation round and a teacher's "try again"; the teacher's steps, dictation form and show-to-class preview */
.dict-card, .try-card { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: var(--radius-s); background: var(--blue-tint); color: var(--ink); }
.dict-card[hidden], .try-card[hidden], .dict-state[hidden], .dict-actions[hidden] { display: none; }
.dict-card b { font: 700 24px var(--font-model); color: var(--blue); }
.work-steps { margin: 0 0 10px; padding-inline-start: 20px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.dict-form { display: grid; gap: 6px; margin-block: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.dict-form h3 { margin: 0; font-size: 15px; }
.dict-state { margin: 0; font-size: 14px; font-weight: 600; }
.dict-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.show-form { display: grid; gap: 10px; }
.show-preview { display: block; max-inline-size: 100%; block-size: auto; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--document); }
.show-names { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; }
.grade-card b { font: 800 18px var(--font-display); color: var(--blue); }

/* Stickers */
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; max-block-size: 60vh; overflow-y: auto; }
.sticker-pick { display: grid; place-items: center; min-block-size: 64px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--document); cursor: pointer; }
.sticker-pick:hover, .sticker-pick:focus-visible { border-color: var(--blue); }
.sticker-pick canvas { inline-size: 56px; block-size: 56px; }
#sticker-anim { margin-block-end: 12px; }

/* Assignments (PARITY-CLOSE 4) */
.as-form { display: grid; gap: 6px; padding-block-end: 12px; margin-block-end: 12px; border-block-end: 1px solid var(--line); }
.as-form .btn { justify-self: start; }
.work-state { justify-self: start; padding: 2px 10px; border-radius: var(--radius-s); background: var(--paper); color: var(--ink-2); font-size: 13px; }
.work-state.in { background: var(--blue-tint); color: var(--blue); font-weight: 600; }
.work-return { justify-self: start; }
.assign-card { display: grid; gap: 6px; padding: 8px 12px; border-radius: var(--radius-s); background: var(--surface); border: 1px solid var(--line); }
.assign-card[hidden] { display: none; }
.assign-text { margin: 0; font-weight: 600; unicode-bidi: plaintext; }
.assign-meta { margin: 0; color: var(--ink-2); font-size: 14px; }
.assign-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.assign-actions .btn { min-block-size: 44px; }
.pb-width { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pb-width input { inline-size: 120px; }
.pb-toggle { min-block-size: 40px; border: 1px solid var(--control-line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); padding-inline: 10px; }
.pb-toggle[aria-pressed="true"] { background: var(--blue-tint); border-color: var(--blue); }

/* Q1 (internal): the Quran reader panel. Only built when the server offers the reader; off on the public site. */
.quran-panel { --quran-font: "Amiri", var(--font-model); }
.quran-panel .field { display: grid; gap: 6px; margin-block-end: 12px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink-2); }
.quran-range, .quran-aids { display: flex; flex-wrap: wrap; gap: 10px; margin-block-end: 10px; }
.quran-panel .field-inline { display: grid; gap: 4px; flex: 1 1 120px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink-2); }
.quran-preview {
  font-family: var(--quran-font); font-size: 24px; line-height: 2.1; text-align: start;
  min-block-size: 96px; max-block-size: 260px; overflow-y: auto; padding: 10px 14px; margin-block: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink);
}
.quran-preview:empty { display: none; }
.quran-end { white-space: nowrap; }
.quran-credit { color: var(--ink-3); font-size: 13px; margin-block: 0 10px; }
.panel-sub { font-size: 15px; margin-block: 18px 6px; }

/* Q1-TAJWEED: the switch and the legend in the reader panel */
.quran-panel .check-row { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink-2); }
.tajweed-legend-box summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink-2); }
.tajweed-legend { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.tajweed-legend li { display: flex; align-items: center; gap: 8px; }
.tajweed-swatch { inline-size: 14px; block-size: 14px; border-radius: 4px; flex: none; }

/* Certificates: the form beside a live preview; stacked on phones */
.cert-layout { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 20px; align-items: start; }
.cert-form { display: grid; gap: 10px; }
.cert-form .field { display: grid; gap: 4px; }
.cert-preview { inline-size: 100%; block-size: auto; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
#cert-dialog { inline-size: min(1100px, calc(100vw - 32px)); }
@media (max-width: 760px) { .cert-layout { grid-template-columns: 1fr; } }

/* PRIV1: the learner's proof code for a data request, easy to read aloud or copy */
.privacy-code { display: block; margin-block: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--surface); font: 700 1.2rem/1.4 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .06em; text-align: center; }

/* Phones (AUDIT-FIX 2): one row of 44 px tools. Colours and thickness live in the ink drawer, opened by the ink button
   at the start of the row; undo stays at its end. Both stay in view while the tools between them scroll. While text is
   being set, its options take the paper picker's row, so the footer keeps two rows. The learner bar is unchanged. */
.ink-btn, .ink-drawer { display: none; }
@media (max-width: 760px) {
  body:not([data-mode="guest"]) .ink-btn { display: grid; flex: none; position: sticky; inset-inline-start: 0; z-index: 2; background: var(--rail); }
  body:not([data-mode="guest"]) .history-group { position: sticky; inset-inline-end: 0; z-index: 2; background: var(--rail); padding-inline: 8px 0; border-inline-end: 0; border-inline-start: 1px solid var(--line-2); }
  .ink-dot { inline-size: 26px; block-size: 26px; border-radius: 50%; background: var(--c, transparent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--control-line); }
  .ink-dot[data-size="0"] { inline-size: 18px; block-size: 18px; }
  .ink-dot[data-size="2"] { inline-size: 32px; block-size: 32px; }
  .ink-drawer:not([hidden]) { display: flex; flex-direction: column; gap: 6px; position: fixed; inset-inline: 8px; z-index: 45; padding: 8px; background: var(--surface); border: 1px solid var(--control-line); border-radius: var(--radius); box-shadow: var(--shadow); }
  .ink-drawer .tool-group { border: 0; padding: 0; }
  .ink-drawer .swatches { display: flex; flex-wrap: wrap; gap: 0; padding: 0; }
  .ink-drawer .sizes { display: flex; gap: 0; border-block-start: 1px solid var(--line-2); padding-block-start: 6px; }
  .ink-drawer .custom-swatch, .ink-drawer .custom-color { inline-size: 44px; block-size: 44px; }
  .pagebar:has(> #text-opts:not([hidden])) > .pb-group.host-only:first-child { display: none; }
  .text-opts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .text-opts > * { flex: none; }
  .text-opts .seg-mini { flex-wrap: nowrap; }
}
@media (max-width: 760px) {
  .text-opts .pb-check { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; }
}
/* 320 px learners (AUDIT-FIX 2): pen, eraser, text, three inks and undo fit without sideways scrolling */
@media (max-width: 340px) {
  body[data-mode="guest"] .toolrail { gap: 0; padding-inline: 2px; }
  body[data-mode="guest"] .tool-group, html[dir="rtl"] body[data-mode="guest"] .tool-group { padding-inline: 0; }
  body[data-mode="guest"] .swatches { padding-inline: 0; }
}

/* CLASSROOM1: the learners' simple view. The teacher turns it on for the room; it is a view, never a permission. Pen,
   eraser, the learners' three colours and undo, with their names beside the icons; the request, status and current
   task stay in the learner bar, larger. */
.kid-label { display: none; }
body[data-kids="on"] .toolrail :is([data-tool="highlight"], [data-tool="text"], [data-tool="shape"], #btn-kbd, #btn-redo, .ink-btn),
body[data-kids="on"] .toolrail .sizes, body[data-kids="on"] .gb-kbd { display: none !important; }
body[data-kids="on"] .toolrail { gap: 10px; }
body[data-kids="on"] .toolrail .tool { width: auto; height: auto; min-width: var(--kid-tap); min-height: var(--kid-tap); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding-block: 6px; padding-inline: 10px; }
body[data-kids="on"] .kid-label { display: block; font: 700 var(--kid-label)/1.2 var(--font-display); color: inherit; }
body[data-kids="on"] .swatches { grid-template-columns: repeat(2, var(--kid-tap)); gap: 4px; padding-inline: 0; }
body[data-kids="on"] .swatch { width: var(--kid-tap); height: var(--kid-tap); border: 0; box-shadow: none; background: radial-gradient(circle closest-side, var(--c) 0 56%, transparent 59%); }
body[data-kids="on"] .swatch[aria-checked="true"] { background: radial-gradient(circle closest-side, var(--c) 0 46%, var(--surface) 49% 60%, var(--blue) 63% 78%, transparent 81%); }
body[data-kids="on"] .guest-bar { gap: 14px; padding-block: 12px; font-size: 17px; flex-wrap: wrap; }
body[data-kids="on"] .guest-bar .btn { min-height: var(--kid-tap); font-size: 17px; padding-inline: 18px; }
@media (max-width: 760px) {
  body[data-kids="on"] .toolrail { justify-content: center; gap: 6px; }
  body[data-kids="on"] .swatches { grid-template-columns: repeat(3, 44px); gap: 0; }
  body[data-kids="on"] .swatch { width: 44px; height: 44px; }
  body[data-kids="on"] .toolrail .tool { min-width: 52px; padding-inline: 6px; }
  body[data-kids="on"] .gb-actions { margin-inline-start: 0; width: 100%; }
  body[data-kids="on"] .gb-actions .btn { flex: 1; }
}

/* The teacher's class view and report */
.class-view { display: grid; gap: 6px; margin-block: 12px; padding-block: 12px; border-block: 1px solid var(--line-2); }
.class-view .panel-intro { margin: 0; }
#btn-kids[aria-pressed="true"] { background: var(--blue-tint); border-color: var(--blue); color: var(--ink); }
.report-modal { width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 48px); overflow: auto; }
.report-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block: 4px 12px; }
.report-notes { margin: 0 0 12px; padding-inline-start: 20px; color: var(--ink-3); font-size: var(--report-text); }
.report-part { font-size: 17px; margin-block: 16px 4px; }
.report-q, .report-l, .report-hw-block { margin-block: 14px; }
.report-q h3, .report-l h3, .report-hw-block h3 { font-size: 16px; margin: 0 0 4px; }
.report-meta { margin: 0 0 6px; color: var(--ink-3); font-size: var(--report-text); }
.report-empty { color: var(--ink-3); }
.report-table { width: 100%; border-collapse: collapse; font-size: var(--report-text); }
.report-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.report-table th, .report-table td { text-align: start; padding-block: 6px; padding-inline: 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.report-table th { background: var(--bg); font-family: var(--font-display); font-weight: 700; }
.report-table tr[data-result="correct"] td:nth-child(3) { color: var(--ok); font-weight: 600; }
.report-table tr[data-result="wrong"] td:nth-child(3) { color: var(--red); font-weight: 600; }
.report-table tr[data-result="absent"] td { color: var(--ink-3); }
@media (max-width: 760px) { .report-actions .btn { flex: 1 1 auto; } }

/* Print (and "Save as PDF"): only the report, on A4 with margins, table headings repeated on every page */
@page report { size: A4; margin: 14mm 12mm; }
@media print {
  html:has(body.print-report), body.board-page.print-report { height: auto; overflow: visible; background: var(--document); }
  body.print-report > *:not(.report-paper) { display: none !important; }
  body.print-report .report-paper { display: block; page: report; color: var(--print-ink); font-size: 10.5pt; }
  .report-paper h1 { font-size: 18pt; margin: 0 0 4px; }
  .report-paper h2 { font-size: 14pt; margin-block: 12px 4px; }
  .report-paper h2 ~ h2 { break-before: page; }
  .report-paper h3 { break-after: avoid; }
  .report-paper .report-meta, .report-paper .report-notes { color: var(--print-ink); }
  .report-paper .report-table { font-size: 10pt; }
  .report-paper .report-table thead { display: table-header-group; }
  .report-paper .report-table tr { break-inside: avoid; }
  .report-paper .report-table th { background: none; border-bottom: 1.5pt solid var(--print-ink); }
  .report-paper .report-table td { border-bottom: .5pt solid var(--print-line); color: var(--print-ink); }
}

/* SUBJECTS1: the Activities panel's subject group and a subject model's settings */
.act-group { font-family: var(--font-display); font-size: 15px; margin: 18px 0 2px; color: var(--ink-2); }
/* DIGITS1: the digits subject material is added in */
.act-digits { border: 0; padding: 0; margin: 4px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.act-digits legend { float: inline-start; margin-inline-end: 8px; padding: 0; }
.act-glyph canvas { inline-size: 48px; block-size: 48px; background: var(--document); border-radius: var(--radius-s); }
.act-dots { font-size: 30px; }
.model-form { display: grid; gap: 12px; }
.model-fields { display: grid; gap: 12px; max-block-size: 60vh; overflow: auto; }
.model-field { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.model-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.model-chips .chip { font-family: var(--font-display); font-size: 16px; }
/* CLASSROOM2: the request queue in arrival order, who is no longer connected, the end-of-time pause, the picker's reveal */
.queue-list { padding: 0; }
.queue-n { font-variant-numeric: tabular-nums; }
#btn-allow-next { margin-block-end: 8px; }
.work-away { font-size: 12.5px; color: var(--ink-2); }
.work-card.away canvas { opacity: .6; }
.tool-opts { display: block; font-size: 12.5px; color: var(--ink-2); }
.tool-paused { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-block: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.tc-note { margin: 0; font-size: 13px; color: var(--ink-2); }
.pick-reveal { animation: pick-reveal .7s ease-out; }
@keyframes pick-reveal {
  0% { opacity: 0; transform: translateY(-.4em); }
  30% { opacity: 1; transform: translateY(.15em); }
  55% { transform: translateY(-.08em); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .pick-reveal { animation: none; } }
/* FOLLOW1: the learner's follow / browse choice, the way back to the teacher's view, and pages when browsing */
.follow-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.follow-box[hidden], .follow-pages[hidden] { display: none; }
.follow-pages { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; color: var(--ink-2); }
/* STAMPS1: letter and haraka stamps in the Activities panel */
.act-stamps { margin-block: 10px; }
.act-stamps h4 { margin: 0; }
.stamp-head { margin: 8px 0 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.stamp-row { display: flex; flex-wrap: wrap; gap: 4px; }
.stamp { min-inline-size: 44px; min-height: 44px; padding-inline: 8px; border: 1px solid var(--control-line); background: var(--surface); border-radius: var(--radius-s); font-family: var(--font-model); font-size: 24px; line-height: 1.9; color: var(--ink); cursor: pointer; }  /* tall enough for hamza with its haraka, and marks below */
.stamp:hover { border-color: var(--blue); }
/* BOARD-FOCUS1: while the teacher keeps learners in the lesson, no way out to a personal board (Leave lesson stays) */
body[data-navlock="true"] #menu-home { display: none; }
.app-brand:not([href]) { cursor: default; }
.menu-note { margin: 4px 0 0; padding-inline: 10px; font-size: 13px; color: var(--ink-2); }
.menu-note[hidden] { display: none; }
/* BOARD-DELIVERY1-FIX: a learner kept in the lesson gets the help in the lesson, not the public guide */
body[data-navlock="true"] #menu-guide { display: none; }
body:not([data-navlock="true"]) #menu-help { display: none; }
/* FOCUS-LINKS1: kept in the lesson: no pointer to another keyboard site; the built-in keyboard's credit stays, as words */
body[data-navlock="true"] .kbd-help { display: none; }
body[data-navlock="true"] .kbd-credit a:not([href]) { color: inherit; text-decoration: none; cursor: default; }
.help-list { margin: 8px 0 12px; padding-inline-start: 20px; display: grid; gap: 6px; color: var(--ink-2); }
/* BOARD-LEAVE1-FIX: Leave can offer up to four actions; they wrap inside the small dialog */
#leave-dialog .dialog-actions { flex-wrap: wrap; }
/* PREP1: a starter lesson's pages, shown as they will be on the board before anything is added */
.starter-pages { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; max-block-size: 60dvh; overflow-y: auto; }
.starter-pages canvas { inline-size: 100%; block-size: auto; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.starters { margin-block-end: 16px; }