/* The Lesson Board: a full-window LCD face for the classroom screen. Everything is in em from one size set on .lboard (it follows the
   smaller of the window's width and height, so nothing is cut off on a short or a wide screen). The LCD colours are copied from Home
   by board.js (so Settings > Colours applies). Loads after home.css. Motion is only inside prefers-reduced-motion: no-preference. */
.lboard { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; gap: .6em; padding: .8em 1.2em .6em; font-size: min(1.05vw, 1.7vh); background: #0E1819; color: #EDE4CB; --u: 1em; --lcd-bg: #A9E89B; --lcd-ink: #0A1A0B; --lcd-dim: #2D5A32; --lcd-rule: #0A1A0B; font-family: var(--font); overflow: hidden; }
.lboard[hidden] { display: none; }
body[data-mode=dark] .lboard { background: #080E0F; }
body[data-board=open] #lessonPill { display: none !important; }

.bd-top { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) auto auto; align-items: center; gap: 1.4em; }
.bd-kicker { margin: 0 0 .15em; font: 700 .9em var(--font-mono); letter-spacing: .3em; text-transform: uppercase; color: #AFC48B; }
.bd-title { margin: 0; font: 800 2.5em/1.02 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: #EDE4CB; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-sub { margin: .3em 0 0; font: 700 1em var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #C9D3B8; }
.bd-clock { display: flex; flex-direction: column; align-items: flex-end; gap: .2em; color: #EDE4CB; }
.lboard .bd-clock .lcd-seg { color: #EDE4CB; }
.lboard .bd-clock .lcd-seg .g { opacity: .14; }
.lboard .bd-clock .lcd-seg .g.on { opacity: 1; }
.bd-date { margin: 0; font: 700 .85em var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: #AFC48B; }
.bd-tools { display: flex; flex-direction: column; gap: .35em; align-items: stretch; }
.lboard .bd-top button { background: transparent !important; color: #EDE4CB !important; border: 1px solid rgb(237 228 203 / .5) !important; border-radius: 5px; font: 700 .95em var(--font); min-height: max(26px, 2.1em); padding: 0 1em; box-shadow: none !important; translate: none; }
.lboard .bd-top button:hover:not(:disabled), .lboard .bd-top button:focus-visible { background: rgb(237 228 203 / .16) !important; border-color: #EDE4CB !important; }
.lboard .bd-top button[aria-pressed=true] { background: #EDE4CB !important; color: #162122 !important; }
.lboard .bd-top .bd-leave { border-color: #E3A07F !important; }

/* the face: the plan takes everything the right-hand column does not need, and the column is sized by its content */
.bd-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(24em, 31%); grid-template-rows: auto auto auto minmax(0, 1fr); gap: 2px; background: var(--lcd-rule); border: 3px solid #050A0A; border-radius: 1em; overflow: hidden; }
.bd-cell { background: var(--lcd-bg); color: var(--lcd-ink); padding: .55em .9em .65em; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: .35em; }
.bd-plan { grid-column: 1; grid-row: 1 / span 4; padding: .55em .7em .7em; }
.bd-bell { grid-column: 2; grid-row: 1; } .bd-timer { grid-column: 2; grid-row: 2; } .bd-sound { grid-column: 2; grid-row: 3; } .bd-pick { grid-column: 2; grid-row: 4; }
.bd-label { margin: 0; font: 700 .9em var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--lcd-dim); }
.bd-note { margin: 0; font: 600 .95em/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--lcd-dim); }
.bd-big { margin: 0; color: inherit; font: 800 1.9em/1.08 var(--font-display); text-transform: uppercase; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-empty { margin: auto; font: 700 1.4em var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lcd-dim); }
.bd-cellhead { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.bd-planwrap { position: relative; flex: 1; min-height: 0; border: 2px solid var(--lcd-ink); border-radius: 4px; overflow: hidden; background: #F4F1E6; }
body[data-mode=dark] .bd-planwrap { background: #1B2523; }

/* the room, in room units, scaled by board.js */
.bd-room { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; transform: translate(-50%, -50%); font-family: var(--font); }
.bd-desk { position: absolute; border: 2px solid rgb(0 0 0 / .22); box-sizing: border-box; opacity: .95; }
.bd-teacherdesk { display: grid; place-items: center; background: #E1D49A !important; border-color: rgb(0 0 0 / .35); }
.bd-tlabel { font: 800 15px/1.1 var(--font); color: #3B332A; text-align: center; padding: 0 6px; }
.bd-card { position: absolute; transform: translate(-50%, -50%); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px 6px; background: #FFFBEF; color: #1B2523; border-radius: 6px; box-shadow: 0 1px 0 rgb(0 0 0 / .25), 0 2px 5px rgb(0 0 0 / .18); z-index: 2; }
.bd-card.bd-compact { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 6px 10px; }
.bd-photo, .bd-initials { flex: none; display: block; border-radius: 4px; object-fit: cover; }
.bd-initials { display: grid; place-items: center; background: #C9D8CF; color: #1B3A3A; font: 800 20px var(--font); }
.bd-cname { font: 700 14px/19px var(--font); text-align: center; white-space: nowrap; }
.bd-compact .bd-cname { text-align: left; }
.bd-nonames .bd-cname { display: none; }
.bd-nonames .bd-card.bd-portrait { padding-bottom: 5px; height: auto !important; }
.bd-nophotos .bd-photo, .bd-nophotos .bd-initials { display: none; }
.bd-nophotos .bd-card { height: auto !important; padding: 7px 10px; }
.bd-nophotos .bd-cname { font-size: 16px; line-height: 20px; }
.bd-empty-seat { position: absolute; width: 26px; height: 26px; border: 3px dashed rgb(0 0 0 / .28); border-radius: 50%; transform: translate(-50%, -50%); box-sizing: border-box; z-index: 1; }
.bd-card.bd-picked { background: #0A1A0B; color: #F4FFEF; z-index: 6; scale: 1.25; box-shadow: 0 0 0 4px #A9E89B, 0 0 0 7px #0A1A0B, 0 8px 18px rgb(0 0 0 / .45); }
.bd-card.bd-dim { filter: grayscale(1) contrast(.92); }
body[data-mode=dark] .bd-room { filter: brightness(.74); }

.bd-row { display: flex; flex-wrap: wrap; gap: .4em; align-items: center; }
.bd-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.2em, 1fr)); }
.bd-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4em; }
.lboard .bd-cell button { background: transparent !important; color: var(--lcd-ink) !important; border: 2px solid var(--lcd-ink) !important; border-radius: 3px; box-shadow: none !important; font: 700 1em var(--font-mono); letter-spacing: .05em; text-transform: uppercase; min-height: max(26px, 2.1em); padding: 0 .6em; translate: none; white-space: nowrap; }
.lboard .bd-cell button:hover:not(:disabled), .lboard .bd-cell button:focus-visible { background: var(--lcd-ink) !important; color: var(--lcd-bg) !important; }
.lboard .bd-cell button[aria-pressed=true], .lboard .bd-cell button.bd-primary { background: var(--lcd-ink) !important; color: var(--lcd-bg) !important; }
.lboard .bd-cell button.bd-primary:hover:not(:disabled) { background: transparent !important; color: var(--lcd-ink) !important; }
.bd-gauge { display: flex; gap: .2em; height: 1.5em; align-items: stretch; }
.bd-gauge i { flex: 1 1 0; background: var(--lcd-ink); opacity: .13; }
.bd-gauge i.on { opacity: 1; }
.bd-gauge i.cl { outline: .14em solid var(--lcd-ink); outline-offset: .1em; opacity: .55; }
.bd-gauge i.cl.on { opacity: 1; }
.bd-sound.alarm { background: var(--lcd-ink); color: var(--lcd-bg); --lcd-dim: var(--lcd-bg); }
.bd-sound.alarm .bd-gauge i { background: var(--lcd-bg); }
.bd-sound.alarm button { border-color: var(--lcd-bg) !important; color: var(--lcd-bg) !important; }
.bd-sound.alarm button[aria-pressed=true], .bd-sound.alarm button.bd-primary { background: var(--lcd-bg) !important; color: var(--lcd-ink) !important; }
.bd-pickname { font-size: 2.3em; overflow-wrap: anywhere; white-space: normal; line-height: 1.04; flex: 1; display: flex; align-items: center; min-height: 0; overflow: hidden; }
.bd-hint { margin: 0; text-align: center; font: 700 .8em var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: #8FA19A; }
.lboard .lcd-seg { color: var(--lcd-ink); }
.bd-bell .lcd-seg, .bd-timer .lcd-seg { align-self: flex-start; }
.lboard .lcd-seg .g { opacity: .1; } .lboard .lcd-seg .g.on { opacity: 1; }

@media (max-width: 900px), (max-height: 520px) {
  .lboard { overflow: auto; font-size: 14px; }
  .bd-top { grid-template-columns: minmax(0, 1fr); gap: .8em; }
  .bd-tools { flex-direction: row; } .bd-clock { align-items: flex-start; }
  .bd-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; flex: none; }
  .bd-plan, .bd-bell, .bd-timer, .bd-sound, .bd-pick { grid-column: 1; grid-row: auto; }
  .bd-planwrap { min-height: 60vh; }
}
@media (prefers-reduced-motion: no-preference) {
  .lboard:not([hidden]) { animation: bd-in .2s ease-out; }
  @keyframes bd-in { from { opacity: 0; } to { opacity: 1; } }
  .bd-gauge i { transition: opacity .16s ease-out; }
}
@media print { .lboard { display: none !important; } }

/* the same room as a small thumbnail (the Seat Studio tile on Home) */
.bd-planhost { position: relative; overflow: hidden; background: #F4F1E6; }
body[data-mode=dark] .bd-planhost { background: #1B2523; }
.bd-planhost .bd-card { box-shadow: 0 1px 0 rgb(0 0 0 / .3), 0 1px 3px rgb(0 0 0 / .2); }
.bd-planhost .bd-initials { font-size: 18px; }

.bd-microw { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4em; }

/* the lesson plan note in the middle of the banner */
.bd-lp { min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: .3em; }
.bd-lp-off { visibility: hidden; }
.lboard .bd-top .bd-lp-read { display: flex; flex-direction: column; align-items: flex-start; gap: .15em; width: 100%; height: auto; min-height: 0; padding: .3em .8em !important; text-align: left; border: 0 !important; border-left: 3px solid #AFC48B !important; border-radius: 0 6px 6px 0 !important; background: rgb(237 228 203 / .06) !important; cursor: text; }
.lboard .bd-top .bd-lp-read:hover:not(:disabled), .lboard .bd-top .bd-lp-read:focus-visible { background: rgb(237 228 203 / .14) !important; border-left-color: #EDE4CB !important; }
.bd-lp-read .bd-kicker { margin: 0; font-size: .75em; }
.bd-lp-body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; font: 600 1.25em/1.25 var(--font); color: #EDE4CB; text-transform: none; letter-spacing: 0; }
.bd-lp-empty .bd-lp-body { font-weight: 500; font-style: italic; opacity: .7; }
.bd-lp-text { box-sizing: border-box; width: 100%; resize: none; min-height: 4.6em; padding: .45em .6em; font: 600 1.1em/1.3 var(--font); color: #162122; background: #F4F1E6; border: 2px solid #AFC48B; border-radius: 6px; }
.bd-lp-row { display: flex; gap: .4em; align-items: center; flex-wrap: wrap; }
.bd-lp-hint { margin-left: auto; font: 700 .7em var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #AFC48B; }
@media (max-width: 900px), (max-height: 520px) { .bd-lp-off { display: none; } }

/* ---------- the big screen: a tool swaps places with the seating plan (v1.21) ---------- */
.bd-toolhead { align-items: center; min-height: 2.2em; }
.lboard .bd-cell button.bd-swap { display: inline-flex; align-items: center; gap: .4em; min-height: max(36px, 2.1em); padding: 0 .7em; font-size: .85em; flex: none; }
.bd-swap .ui-icon { width: 1.1em; height: 1.1em; background: currentColor; }
.bd-stagecell { grid-column: 1; grid-row: 1 / span 4; padding: .55em .7em .7em; }
.bd-stagehost { position: relative; flex: 1; min-height: 0; display: flex; overflow: hidden; border-radius: 14px; }
.bd-stagehost > .nm-stage, .bd-stagehost > .tm-stage { flex: 1; min-width: 0; min-height: 0; height: auto; }
.bd-plan.bd-mini { grid-column: 2; padding: .55em .9em .65em; }
.bd-plan.bd-mini[data-slot=timer] { grid-row: 2; } .bd-plan.bd-mini[data-slot=sound] { grid-row: 3; } .bd-plan.bd-mini[data-slot=pick] { grid-row: 4; }
.bd-plan.bd-mini .bd-planwrap { min-height: 14em; }
.bd-stagebar { display: flex; flex-direction: column; gap: .45em; padding-top: .2em; }
.bd-chips { display: flex; flex-wrap: wrap; gap: .4em; align-items: center; }
.bd-soundbar { justify-content: space-between; gap: .4em 1.6em; }
.bd-optlabel { font: 700 .85em var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lcd-dim); margin-right: .2em; min-width: 6.4em; }
.bd-soundbar .bd-optlabel { min-width: 0; }
.lboard .bd-cell .bd-chips button { min-height: max(40px, 2.4em); padding: 0 .9em; }
.bd-timeropts { display: flex; flex-direction: column; gap: .4em; }
.bd-wallrow { flex-wrap: nowrap; align-items: stretch; }
.bd-wallrow .bd-optlabel { align-self: center; flex: none; }
.bd-walls { display: flex; gap: .4em; overflow-x: auto; min-width: 0; flex: 1; padding: .15em .1em .35em; -webkit-overflow-scrolling: touch; }
.lboard .bd-cell button.bd-wall { flex: none; display: flex; flex-direction: column; gap: .2em; width: 8.4em; height: auto; min-height: 0; padding: .2em .2em .25em !important; background: transparent !important; color: var(--lcd-ink) !important; border: 2px solid transparent !important; }
.lboard .bd-cell button.bd-wall:hover:not(:disabled), .lboard .bd-cell button.bd-wall:focus-visible { border-color: var(--lcd-ink) !important; background: transparent !important; color: var(--lcd-ink) !important; }
.lboard .bd-cell button.bd-wall[aria-pressed=true] { border-color: var(--lcd-ink) !important; background: var(--lcd-ink) !important; color: var(--lcd-bg) !important; }
.bd-wname { display: block; font: 700 .72em/1.2 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.bd-pickstage { align-items: stretch; }
.bd-pickmid { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 3em; padding: 0 2em; }
.bd-pickface { flex: none; height: min(62%, 26em); aspect-ratio: 3 / 4; }
.bd-pickphoto, .bd-pickinitials { display: grid; place-items: center; width: 100%; height: 100%; object-fit: cover; border-radius: 1em; background: var(--lcd-ink); color: var(--lcd-bg); font: 800 5em var(--font-display); border: 3px solid var(--lcd-ink); box-sizing: border-box; }
.lboard .bd-pickbig { flex: 0 1 auto; display: block; margin: 0; font: 800 6.4em/1.02 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: var(--lcd-ink); text-align: center; }
.bd-pickleft { text-align: center; }
.bd-pickrow { justify-content: center; }
.lboard .bd-pickrow button.bd-primary { min-width: 16em; min-height: max(52px, 3.2em) !important; font-size: 1.15em; }
@media (max-width: 900px), (max-height: 520px) {
  .bd-stagecell, .bd-plan.bd-mini, .bd-plan.bd-mini[data-slot] { grid-column: 1; grid-row: auto; }
  .bd-stagehost { height: 60vh; flex: none; }
  .bd-plan.bd-mini .bd-planwrap { min-height: 40vh; }
  .bd-swaptext { display: none; }
}

/* v1.22: the right-hand column must always fit. The plan, when it is the small cell, takes whatever height the other three leave (it used to ask for 14em and push Pick a name off the bottom). */
.bd-grid[data-stage=timer] { grid-template-rows: auto minmax(5em, 1fr) auto auto; }
.bd-grid[data-stage=sound] { grid-template-rows: auto auto minmax(5em, 1fr) auto; }
.bd-grid[data-stage=pick] { grid-template-rows: auto auto auto minmax(5em, 1fr); }
.bd-plan.bd-mini .bd-planwrap { min-height: 0; }
.bd-plan.bd-mini { overflow: hidden; }
.bd-headtools { display: flex; gap: .5em; align-items: center; }
.bd-headtools .bd-note { margin-right: .4em; }
@media (max-width: 900px), (max-height: 520px) { .bd-grid[data-stage] { grid-template-rows: none; } .bd-plan.bd-mini .bd-planwrap { min-height: 40vh; } }