/* =====================================================================
 * Classboard — the screen at the front of the room.
 *
 * Written for one screen in particular: the 75-inch panel at the front of
 * the room, seen from twenty feet away by someone who is not looking for
 * long. Three rules follow from that and explain most of what is below.
 *
 *   1. Type is sized in container units (cqmin/cqh), never in pixels, so a
 *      widget dragged twice as big prints twice as big. A fixed 48px title
 *      that looked right in a small tile is a whisper in a full-width one.
 *      Every one of those sizes is then multiplied by --ts, the text size set
 *      on the tile, which is how a board can be turned up for a deeper room
 *      than this was drawn for without any tile being resized.
 *   2. Dark is the default. A white board in a dim room is a lamp pointed
 *      at the class; the light theme is there for a bright room, not as the
 *      normal state.
 *   3. Chrome disappears. Everything a teacher needs while planning the
 *      board is in the way while teaching from it, so present mode removes
 *      all of it, including the mouse pointer.
 * ===================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
	--cb-bg:#141518;
	--cb-card:#1e2025;
	--cb-card2:#262930;
	--cb-line:rgba(255,255,255,0.10);
	--cb-line2:rgba(255,255,255,0.22);
	--cb-text:#f2f2ee;
	--cb-text2:#a9aab0;
	--cb-text3:#6e7076;
	--cb-accent:#2bbd8e;
	--cb-accent-ink:#8fe6c8;
	--cb-warn:#e0b263;
	--cb-danger:#e0806f;
	--cb-radius:18px;
	--cb-radius-sm:10px;
	--cb-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
	--cb-gap:14px;
}
body.cb-light{
	--cb-bg:#e8e9ec;
	--cb-card:#ffffff;
	--cb-card2:#f2f3f5;
	--cb-line:rgba(0,0,0,0.10);
	--cb-line2:rgba(0,0,0,0.24);
	--cb-text:#16171a;
	--cb-text2:#5a5c62;
	--cb-text3:#8d8f96;
	--cb-accent:#0f9b71;
	--cb-accent-ink:#0b6b4e;
	--cb-warn:#8a5a10;
	--cb-danger:#b3402f;
}

html,body{height:100%;overflow:hidden;}
body{
	font-family:var(--cb-font);
	background:var(--cb-bg);
	color:var(--cb-text);
	-webkit-font-smoothing:antialiased;
	font-variant-numeric:tabular-nums;
}
body.cb-idle{cursor:none;}
button{font-family:inherit;color:inherit;cursor:pointer;background:none;border:none;}
input,select,textarea{font-family:inherit;font-size:14px;}

.cb-boot{padding:4rem 1rem;text-align:center;color:var(--cb-text3);}
.cb-app{height:100%;display:flex;flex-direction:column;}

/* ---------- toolbar (edit mode only) ---------- */
.cb-bar{
	display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
	padding:8px 12px;background:var(--cb-card);
	border-bottom:1px solid var(--cb-line);
}
body.cb-present .cb-bar{display:none;}
.cb-bar-spacer{flex:1;}
.cb-btn{
	font-size:13px;padding:7px 12px;border-radius:var(--cb-radius-sm);
	border:1px solid var(--cb-line);background:var(--cb-card2);
	display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
}
.cb-btn:hover{border-color:var(--cb-line2);}
.cb-btn.on{background:var(--cb-accent);color:#06251b;border-color:transparent;font-weight:650;}
.cb-btn-primary{background:var(--cb-accent);color:#06251b;border-color:transparent;font-weight:650;}
.cb-btn-quiet{background:transparent;border-color:transparent;color:var(--cb-text2);}
.cb-btn-quiet:hover{background:var(--cb-card2);color:var(--cb-text);}
.cb-btn svg{width:15px;height:15px;flex:none;}

/* board tabs */
.cb-tabs{display:flex;align-items:center;gap:3px;flex-wrap:wrap;}
.cb-tab{
	font-size:13px;padding:6px 12px;border-radius:999px;color:var(--cb-text2);
	border:1px solid transparent;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cb-tab:hover{background:var(--cb-card2);color:var(--cb-text);}
.cb-tab.on{background:var(--cb-card2);color:var(--cb-text);border-color:var(--cb-line2);font-weight:600;}

.cb-status{font-size:12px;color:var(--cb-text3);display:flex;align-items:center;gap:.35rem;}
.cb-status .dot{width:7px;height:7px;border-radius:50%;background:var(--cb-text3);}
.cb-status.ok .dot{background:var(--cb-accent);}
.cb-status.bad .dot{background:var(--cb-danger);}
/* Neither good news nor bad: a weekend, or a day nothing is ticked for. */
.cb-status.idle .dot{background:var(--cb-text3);}
.cb-brand{
	font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--cb-text2);
	padding-right:.35rem;border-right:1px solid var(--cb-line);margin-right:.15rem;
}

/* ---------- the grid ---------- */
.cb-grid{
	flex:1;display:grid;gap:var(--cb-gap);padding:var(--cb-gap);
	min-height:0;position:relative;
}
body.cb-present .cb-grid{padding:calc(var(--cb-gap) * .7);}

/* Placement is set inline per widget. The card itself is a size container so
 * everything inside can be expressed as a fraction of the tile. */
.cb-w{
	position:relative;background:var(--cb-card);border:1px solid var(--cb-line);
	border-radius:var(--cb-radius);overflow:hidden;min-width:0;min-height:0;
	container-type:size;
}
.cb-w.flat{background:transparent;border-color:transparent;}
.cb-body{position:absolute;inset:0;display:flex;flex-direction:column;padding:3cqmin;}

body.cb-edit .cb-w{cursor:grab;}
body.cb-edit .cb-w:hover{border-color:var(--cb-line2);}
body.cb-edit .cb-w.dragging{cursor:grabbing;opacity:.85;z-index:30;box-shadow:0 20px 50px rgba(0,0,0,.45);}
.cb-ghost{
	border:2px dashed var(--cb-accent);border-radius:var(--cb-radius);
	background:rgba(43,189,142,.08);pointer-events:none;
}

/* per-widget controls, edit mode only */
.cb-wtools{
	position:absolute;top:6px;right:6px;display:none;gap:4px;z-index:6;
}
body.cb-edit .cb-w:hover .cb-wtools{display:flex;}
.cb-wtool{
	width:30px;height:30px;border-radius:9px;background:rgba(0,0,0,.55);
	color:#fff;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);
}
body.cb-light .cb-wtool{background:rgba(255,255,255,.85);color:#111;border-color:rgba(0,0,0,.18);}
.cb-wtool:hover{background:var(--cb-accent);color:#06251b;}
.cb-wtool svg{width:15px;height:15px;}
.cb-resize{
	position:absolute;right:0;bottom:0;width:26px;height:26px;cursor:nwse-resize;display:none;z-index:6;
}
body.cb-edit .cb-w:hover .cb-resize{display:block;}
.cb-resize::after{
	content:'';position:absolute;right:6px;bottom:6px;width:10px;height:10px;
	border-right:2px solid var(--cb-line2);border-bottom:2px solid var(--cb-line2);
}

/* Empty board hint */
.cb-empty{
	grid-column:1/-1;grid-row:1/-1;display:grid;place-content:center;text-align:center;
	color:var(--cb-text3);gap:.8rem;
}
.cb-empty h2{font-size:22px;font-weight:600;color:var(--cb-text2);}
.cb-empty p{font-size:14px;max-width:34ch;line-height:1.5;}

/* ---------- shared widget furniture ---------- */
.cb-wlabel{
	font-size:calc(max(11px,3.2cqmin) * var(--ts,1));letter-spacing:.09em;text-transform:uppercase;
	color:var(--cb-text3);font-weight:650;flex:none;margin-bottom:1.5cqmin;
}
.cb-fill{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;}
.cb-icon{width:1em;height:1em;}

/* clock */
.cb-clock{align-items:center;justify-content:center;text-align:center;}
/* cqmin alone sizes off the shorter edge, which clips the time in a tile that
 * is wide and short, or short and wide. The cqw term keeps it inside the
 * width no matter which way the tile is stretched. */
.cb-time{font-size:calc(min(34cqmin,22cqw) * var(--ts,1));line-height:.95;font-weight:700;letter-spacing:-.03em;}
.cb-time .sec{font-size:.45em;color:var(--cb-text2);font-weight:600;margin-left:.12em;}
.cb-time .mer{font-size:.32em;color:var(--cb-text2);font-weight:600;margin-left:.15em;}
.cb-datedeck{margin-top:2cqmin;display:flex;align-items:center;justify-content:center;gap:2.5cqmin;flex-wrap:wrap;}
.cb-date{font-size:calc(7cqmin * var(--ts,1));color:var(--cb-text2);font-weight:550;}
/* The pill is shaped for a cycle label: one letter, or "Day 1". Anything
 * longer is a sentence about why there is no cycle label today, and a
 * sentence in a lozenge reads as an alert. Those go out as plain text. */
.cb-daybadge{
	font-size:calc(6.5cqmin * var(--ts,1));font-weight:750;padding:.25em .7em;border-radius:99px;
	background:var(--cb-accent);color:#06251b;max-width:100%;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cb-dayoff{font-size:calc(6cqmin * var(--ts,1));font-weight:600;color:var(--cb-text2);}
.cb-face{width:min(92cqw,92cqh);height:min(92cqw,92cqh);margin:0 auto;}
.cb-face .fc{stroke:var(--cb-line2);}
.cb-face .tick{stroke:var(--cb-text3);}
.cb-face .tick.big{stroke:var(--cb-text2);}
.cb-face .hh,.cb-face .mh{stroke:var(--cb-text);stroke-linecap:round;}
.cb-face .sh{stroke:var(--cb-accent);stroke-linecap:round;}

/* timer */
.cb-timer{align-items:center;justify-content:center;}
.cb-tdisplay{position:relative;display:grid;place-items:center;flex:1;min-height:0;width:100%;}
/* Sized off the display area rather than the tile, so the ring can never
 * reach down over the buttons underneath it. */
.cb-ring{position:absolute;inset:0;margin:auto;height:100%;width:auto;aspect-ratio:1;max-width:100%;}
.cb-ring circle{fill:none;stroke-width:5;stroke-linecap:round;}
.cb-ring .track{stroke:var(--cb-line);}
.cb-ring .prog{stroke:var(--cb-accent);transition:stroke-dashoffset .3s linear,stroke .3s;}
.cb-tnum{position:relative;font-size:calc(26cqmin * var(--ts,1));font-weight:700;letter-spacing:-.03em;line-height:1;}
.cb-timer.warn .cb-tnum{color:var(--cb-warn);}
.cb-timer.warn .prog{stroke:var(--cb-warn);}
.cb-timer.over .cb-tnum{color:var(--cb-danger);}
.cb-timer.over .prog{stroke:var(--cb-danger);}
@keyframes cb-flash{0%,100%{background:transparent;}50%{background:rgba(224,128,111,.22);}}
.cb-w.ringing{animation:cb-flash 1s ease-in-out infinite;}
.cb-tctl{display:flex;gap:1.5cqmin;justify-content:center;flex-wrap:wrap;flex:none;margin-top:2cqmin;}
.cb-tbtn{
	font-size:calc(max(13px,4.4cqmin) * var(--ts,1));font-weight:600;padding:.45em 1em;border-radius:99px;
	background:var(--cb-card2);border:1px solid var(--cb-line);color:var(--cb-text);
}
.cb-tbtn:hover{border-color:var(--cb-line2);}
.cb-tbtn.go{background:var(--cb-accent);color:#06251b;border-color:transparent;}
.cb-tbtn:disabled{opacity:.4;cursor:default;}
.cb-tbtn:disabled:hover{border-color:var(--cb-line);}
.cb-tpre{display:flex;gap:1.2cqmin;justify-content:center;flex-wrap:wrap;flex:none;margin-top:1.2cqmin;}
.cb-tpre button{
	font-size:calc(max(11px,3.4cqmin) * var(--ts,1));padding:.3em .8em;border-radius:99px;
	color:var(--cb-text2);border:1px solid var(--cb-line);
}
.cb-tpre button:hover{color:var(--cb-text);border-color:var(--cb-line2);}

/* time left bar */
.cb-left{justify-content:center;gap:2cqmin;}
.cb-lefthead{display:flex;align-items:baseline;justify-content:space-between;gap:2cqmin;}
.cb-leftname{font-size:calc(8cqmin * var(--ts,1));font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cb-leftnum{font-size:calc(14cqmin * var(--ts,1));font-weight:700;line-height:1;letter-spacing:-.02em;}
.cb-track{height:6cqmin;min-height:10px;border-radius:99px;background:var(--cb-card2);overflow:hidden;}
.cb-trackfill{height:100%;background:var(--cb-accent);border-radius:99px;transition:width .5s linear;}
.cb-left.warn .cb-trackfill{background:var(--cb-warn);}
.cb-left.warn .cb-leftnum{color:var(--cb-warn);}
.cb-leftfoot{font-size:calc(4.5cqmin * var(--ts,1));color:var(--cb-text3);}

/* picture schedule */
.cb-steps{gap:2cqmin;}
.cb-steplist{flex:1;min-height:0;display:flex;gap:2cqmin;}
.cb-steplist.row{flex-direction:row;}
.cb-steplist.col{flex-direction:column;overflow:auto;}
.cb-step{
	flex:1 1 0;min-width:0;min-height:0;display:flex;align-items:center;gap:2.5cqmin;
	background:var(--cb-card2);border:2px solid transparent;border-radius:14px;
	padding:2cqmin;text-align:left;color:var(--cb-text2);position:relative;overflow:hidden;
	transition:background .2s,border-color .2s,color .2s;
}
.cb-steplist.row .cb-step{flex-direction:column;justify-content:center;text-align:center;}
.cb-step .sicon{width:auto;height:34%;min-height:26px;flex:none;opacity:.65;}
.cb-steplist.col .cb-step .sicon{height:auto;width:9%;min-width:26px;aspect-ratio:1;}
.cb-step .sicon svg{width:100%;height:100%;}
.cb-step .slabel{
	font-size:calc(max(13px,4.4cqmin) * var(--ts,1));font-weight:600;line-height:1.15;
	overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}
.cb-steplist.col .cb-step .slabel{flex:1;font-size:calc(max(14px,6cqmin) * var(--ts,1));}
.cb-step .smins{font-size:calc(max(11px,3.4cqmin) * var(--ts,1));color:var(--cb-text3);font-weight:600;flex:none;}
.cb-step.done{opacity:.42;}
.cb-step.done .sicon{opacity:.5;}
.cb-step.now{
	background:var(--cb-accent);color:#06251b;border-color:var(--cb-accent-ink);
	box-shadow:0 0 0 4px rgba(43,189,142,.18);
}
.cb-step.now .sicon{opacity:1;}
.cb-step.now .smins{color:rgba(6,37,27,.7);}
.cb-step .scheck{position:absolute;top:1.4cqmin;right:1.6cqmin;width:5%;min-width:16px;color:var(--cb-accent);}
.cb-steplist.col .cb-step .scheck{width:3%;}
.cb-step .sbar{position:absolute;left:0;bottom:0;height:5px;background:rgba(6,37,27,.35);width:0;transition:width .5s linear;}
.cb-stepctl{display:flex;gap:1.5cqmin;align-items:center;justify-content:center;flex:none;}
.cb-stepctl .sp{font-size:calc(max(11px,3.2cqmin) * var(--ts,1));color:var(--cb-text3);margin-right:auto;}

/* lesson + day list + text */
.cb-lesson{gap:2cqmin;overflow:auto;}
.cb-ltitle{font-size:calc(9cqmin * var(--fit,1) * var(--ts,1));font-weight:700;line-height:1.1;letter-spacing:-.02em;}
.cb-lobj{font-size:calc(7cqmin * var(--fit,1) * var(--ts,1));line-height:1.3;color:var(--cb-text);}
.cb-lsec{margin-top:1cqmin;}
.cb-lsec h4{
	font-size:calc(max(11px,3.4cqmin) * var(--fit,1) * var(--ts,1));letter-spacing:.09em;text-transform:uppercase;
	color:var(--cb-text3);font-weight:700;margin-bottom:.6cqmin;
}
.cb-lsec ul{list-style:none;display:flex;flex-direction:column;gap:.8cqmin;}
.cb-lsec li{font-size:calc(5.6cqmin * var(--fit,1) * var(--ts,1));line-height:1.3;padding-left:1.2em;position:relative;}
.cb-lsec li::before{content:'';position:absolute;left:.35em;top:.55em;width:.35em;height:.35em;border-radius:50%;background:var(--cb-text3);}
.cb-none{color:var(--cb-text3);font-size:calc(5cqmin * var(--ts,1));font-style:italic;}

.cb-daylist{gap:1.4cqmin;overflow:auto;}
.cb-row{
	display:flex;align-items:center;gap:2cqmin;padding:1.6cqmin 2cqmin;
	border-radius:12px;background:var(--cb-card2);
}
.cb-row.now{background:var(--cb-accent);color:#06251b;}
.cb-row .per{font-size:calc(5cqmin * var(--ts,1));font-weight:750;opacity:.7;min-width:3.4em;}
.cb-row .nm{font-size:calc(6cqmin * var(--ts,1));font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cb-row .tm{font-size:calc(4.6cqmin * var(--ts,1));opacity:.7;font-weight:600;}
.cb-row .swatch{width:1.6cqmin;min-width:6px;align-self:stretch;border-radius:99px;}

.cb-text-h{font-size:calc(11cqmin * var(--fit,1) * var(--ts,1));font-weight:750;line-height:1.1;letter-spacing:-.02em;margin-bottom:1.5cqmin;}
.cb-text-b{font-size:calc(7cqmin * var(--fit,1) * var(--ts,1));line-height:1.35;white-space:pre-wrap;}
.cb-text.mid{justify-content:center;text-align:center;}
.cb-img{position:absolute;inset:0;}
.cb-img img{width:100%;height:100%;object-fit:contain;}
.cb-img.fill img{object-fit:cover;}

/* bell schedule */
.cb-bells{gap:1.4cqmin;}
.cb-belllist{flex:1;min-height:0;display:flex;flex-direction:column;gap:1.2cqmin;overflow:auto;}
.cb-belllist.two{display:grid;grid-template-columns:1fr 1fr;align-content:start;}
/* The fill sits under the row's own content, so the block being counted
 * through is shaded rather than covered. */
.cb-bellrow{
	position:relative;display:flex;align-items:center;gap:2cqmin;
	padding:1.5cqmin 2cqmin;border-radius:12px;background:var(--cb-card2);
	overflow:hidden;min-width:0;
}
.cb-bellrow .bfill{
	position:absolute;left:0;top:0;bottom:0;width:0;pointer-events:none;
	background:rgba(43,189,142,.16);transition:width .5s linear;
}
.cb-bellrow .swatch{width:1.4cqmin;min-width:5px;align-self:stretch;border-radius:99px;background:var(--cb-line);flex:none;}
.cb-bellrow .bmain{flex:1;min-width:0;position:relative;}
/* The block name wraps rather than truncating: turned up for a deep room,
 * "Period 1" clipped to "Peri…" is worse than the same words on two lines.
 * break-word, not anywhere: it wraps between words and only ever splits one
 * that could not fit a line on its own. */
.cb-bellrow .blab{font-size:calc(5.4cqmin * var(--ts,1));font-weight:650;line-height:1.15;overflow-wrap:break-word;}
.cb-bellrow .bcls{font-size:calc(4.2cqmin * var(--ts,1));font-weight:550;line-height:1.2;color:var(--cb-text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cb-bellrow .btime{font-size:calc(4.6cqmin * var(--ts,1));font-weight:600;color:var(--cb-text2);flex:none;white-space:nowrap;position:relative;}
.cb-bellrow.done{opacity:.42;}
.cb-bellrow.now{background:var(--cb-accent);color:#06251b;}
.cb-bellrow.now .bcls,.cb-bellrow.now .btime{color:rgba(6,37,27,.72);}
.cb-bellrow.now .bfill{background:rgba(6,37,27,.16);}

/* links */
.cb-links{gap:1.6cqmin;}
.cb-linklist{flex:1;min-height:0;display:flex;flex-direction:column;gap:1.6cqmin;overflow:auto;justify-content:center;}
.cb-linklist.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(36%,1fr));align-content:center;}
.cb-link{
	display:flex;align-items:center;gap:2.5cqmin;min-width:0;text-decoration:none;color:inherit;
	background:var(--cb-card2);border:2px solid transparent;border-radius:14px;padding:2cqmin 2.5cqmin;
	transition:border-color .2s,background .2s;
}
.cb-linklist.grid .cb-link{flex-direction:column;justify-content:center;text-align:center;gap:1.4cqmin;}
.cb-link:hover{border-color:var(--cb-accent);}
.cb-link .licon{flex:none;width:7cqmin;min-width:20px;aspect-ratio:1;color:var(--cb-accent);}
.cb-linklist.grid .cb-link .licon{width:13cqmin;}
.cb-link .licon svg{width:100%;height:100%;}
.cb-link .ltext{flex:1;min-width:0;}
.cb-linklist.grid .cb-link .ltext{flex:none;width:100%;}
.cb-link .llabel{font-size:calc(6cqmin * var(--ts,1));font-weight:650;line-height:1.15;overflow-wrap:break-word;}
/* The address is the half of a link that a class in seats can actually use,
 * so it wraps rather than being clipped to fit one line. */
.cb-link .lurl{font-size:calc(4cqmin * var(--ts,1));font-weight:550;color:var(--cb-text2);line-height:1.25;margin-top:.5cqmin;overflow-wrap:anywhere;}
.cb-link.dead{opacity:.5;}
.cb-link.dead:hover{border-color:var(--cb-danger);}

/* ---------- panels (palette, settings) ---------- */
.cb-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60;}
.cb-panel{
	position:fixed;top:0;right:0;bottom:0;width:min(440px,92vw);z-index:61;
	background:var(--cb-card);border-left:1px solid var(--cb-line);
	display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.4);
}
.cb-panel-head{
	display:flex;align-items:center;gap:.6rem;padding:14px 16px;
	border-bottom:1px solid var(--cb-line);flex:none;
}
.cb-panel-head h3{font-size:16px;font-weight:650;flex:1;}
.cb-panel-body{flex:1;overflow:auto;padding:16px;}
.cb-panel-foot{padding:12px 16px;border-top:1px solid var(--cb-line);display:flex;gap:.5rem;flex:none;flex-wrap:wrap;}

.cb-pal{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.cb-palcard{
	text-align:left;padding:12px;border-radius:var(--cb-radius-sm);
	border:1px solid var(--cb-line);background:var(--cb-card2);
}
.cb-palcard:hover{border-color:var(--cb-accent);}
.cb-palcard .pn{font-size:14px;font-weight:650;display:flex;align-items:center;gap:.4rem;}
.cb-palcard .pn svg{width:16px;height:16px;color:var(--cb-accent);}
.cb-palcard .pd{font-size:12px;color:var(--cb-text2);margin-top:4px;line-height:1.4;}

.cb-field{margin-bottom:14px;}
.cb-field > label{display:block;font-size:12px;font-weight:600;color:var(--cb-text2);margin-bottom:5px;}
.cb-field .hint{font-size:11.5px;color:var(--cb-text3);margin-top:5px;line-height:1.4;}
.cb-in{
	width:100%;padding:8px 10px;border-radius:var(--cb-radius-sm);
	border:1px solid var(--cb-line);background:var(--cb-bg);color:var(--cb-text);
}
.cb-in:focus{outline:2px solid var(--cb-accent);outline-offset:-1px;}
textarea.cb-in{min-height:90px;resize:vertical;line-height:1.45;}
.cb-check{display:flex;align-items:center;gap:.5rem;font-size:13.5px;margin-bottom:8px;cursor:pointer;}
.cb-check input{width:16px;height:16px;accent-color:var(--cb-accent);}
.cb-seg{display:flex;gap:4px;flex-wrap:wrap;}
.cb-seg button{
	font-size:13px;padding:7px 12px;border-radius:var(--cb-radius-sm);
	border:1px solid var(--cb-line);background:var(--cb-bg);color:var(--cb-text2);
}
.cb-seg button.on{background:var(--cb-accent);color:#06251b;border-color:transparent;font-weight:650;}
.cb-sub{font-size:12.5px;color:var(--cb-text3);line-height:1.5;margin-bottom:14px;}
.cb-sep{height:1px;background:var(--cb-line);margin:18px 0;}

/* step editor rows */
.cb-srow{
	display:flex;align-items:center;gap:8px;padding:8px;margin-bottom:8px;
	border:1px solid var(--cb-line);border-radius:var(--cb-radius-sm);background:var(--cb-card2);
}
.cb-srow .pick{
	width:40px;height:40px;flex:none;border-radius:9px;border:1px solid var(--cb-line);
	display:grid;place-items:center;background:var(--cb-bg);
}
.cb-srow .pick svg{width:22px;height:22px;}
.cb-srow .pick:hover{border-color:var(--cb-accent);color:var(--cb-accent);}
.cb-srow .lab{flex:1;min-width:0;}
/* A bell block carries a name, two times and a class, which is more than fits
 * across a 440px panel. The name takes its own line above the rest rather than
 * being squeezed to a sliver. */
.cb-srow.bell{flex-wrap:wrap;}
.cb-srow.bell .lab{flex:1 1 100%;}
.cb-srow .min{width:64px;flex:none;text-align:center;}
.cb-srow .mv{width:26px;height:26px;flex:none;border-radius:7px;color:var(--cb-text3);display:grid;place-items:center;}
.cb-srow .mv:hover{background:var(--cb-bg);color:var(--cb-text);}
.cb-srow .mv svg{width:14px;height:14px;}

/* the text size slider */
.cb-scale{display:flex;align-items:center;gap:10px;}
.cb-scale input[type=range]{flex:1;min-width:0;accent-color:var(--cb-accent);}
.cb-scale .val{font-size:12.5px;font-weight:650;color:var(--cb-text2);min-width:42px;text-align:right;font-variant-numeric:tabular-nums;}
.cb-scale .cb-btn{padding:5px 9px;font-size:12px;}

/* A link is a name, a picture and an address, which is one line too many for
 * a 440px panel, so the address takes its own line under the rest. */
.cb-srow.link{flex-wrap:wrap;}
.cb-srow.link .url{flex:1 1 100%;font-size:12.5px;}
.cb-srow.link .url.bad{border-color:var(--cb-danger);}

.cb-ipick{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;}
.cb-ipick button{
	padding:8px 4px;border-radius:9px;border:1px solid transparent;background:var(--cb-card2);
	display:flex;flex-direction:column;align-items:center;gap:5px;
}
.cb-ipick button:hover{border-color:var(--cb-accent);}
.cb-ipick button.on{border-color:var(--cb-accent);background:rgba(43,189,142,.14);}
.cb-ipick svg{width:26px;height:26px;}
.cb-ipick .nm{font-size:10.5px;color:var(--cb-text2);text-align:center;line-height:1.15;}
.cb-igroup{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cb-text3);font-weight:700;margin:14px 0 6px;}

/* the unlock button that present mode leaves behind */
.cb-unlock{
	position:fixed;left:12px;bottom:12px;z-index:40;opacity:0;transition:opacity .25s;
	pointer-events:none;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);
	color:#fff;border-radius:99px;padding:9px 16px;font-size:13px;font-weight:600;
}
body.cb-present:not(.cb-idle) .cb-unlock{opacity:.55;pointer-events:auto;}
.cb-unlock:hover{opacity:1 !important;}

@media print{body{display:none;}}

/* A widget that has just been added, ringed for a moment. On a full board it
 * can only land on top of something, and without this it reads as the thing
 * underneath having vanished. */
@keyframes cb-newflash{
	0%,100%{box-shadow:0 0 0 0 rgba(43,189,142,0);}
	50%{box-shadow:0 0 0 5px rgba(43,189,142,.6);}
}
.cb-w.cb-new{animation:cb-newflash 1.1s ease-in-out 2;z-index:20;}

/* =====================================================================
 * The panels this version adds.
 *
 * Classboard has to ask for what the plan book used to supply: the classes,
 * the timetable, the bells, and the lesson itself. That is four screens of
 * form, and it is all built from the same field parts as every widget's
 * settings, so what is below is only the pieces those did not already have.
 * ===================================================================== */

/* ---------- a class: a colour, a name, a period, and its days ---------- */
.cb-crow{
	border:1px solid var(--cb-line);border-radius:var(--cb-radius-sm);
	padding:10px;margin-bottom:10px;background:var(--cb-bg);position:relative;
}
.cb-crow .ctop{display:flex;gap:6px;align-items:center;}
.cb-crow .lab{flex:1;min-width:0;}
.cb-crow .min{width:58px;flex:none;text-align:center;}
/* The remove button, which the .cb-srow rules do not reach from here. */
.cb-crow .mv{
	width:26px;height:26px;flex:none;border-radius:7px;
	color:var(--cb-text3);display:grid;place-items:center;
}
.cb-crow .mv:hover{background:var(--cb-card2);color:var(--cb-danger);}
.cb-crow .mv svg{width:14px;height:14px;}
/* A native colour well, shrunk to a swatch. Every browser draws the inside of
 * one its own way, so the padding is zeroed and the border is ours. */
.cb-swatchin{
	width:32px;height:32px;flex:none;padding:0;border:1px solid var(--cb-line2);
	border-radius:8px;background:none;cursor:pointer;
}
.cb-swatchin::-webkit-color-swatch-wrapper{padding:2px;}
.cb-swatchin::-webkit-color-swatch{border:none;border-radius:6px;}
.cb-days{display:flex;gap:4px;flex-wrap:wrap;margin-top:9px;}
.cb-days button{
	min-width:46px;font-size:12px;padding:5px 8px;border-radius:7px;
	border:1px solid var(--cb-line);background:var(--cb-card2);color:var(--cb-text2);
}
.cb-days button:hover{border-color:var(--cb-line2);color:var(--cb-text);}
.cb-days button.on{background:var(--cb-accent);color:#06251b;border-color:transparent;font-weight:650;}
.cb-egtag{
	position:absolute;top:-7px;right:10px;font-size:10px;letter-spacing:.06em;
	text-transform:uppercase;font-weight:700;color:var(--cb-text3);
	background:var(--cb-card);padding:0 5px;border-radius:4px;
}
.cb-was{font-size:12.5px;color:var(--cb-text3);flex:none;}
.cb-warnline{
	font-size:12.5px;line-height:1.45;color:var(--cb-warn);margin:-6px 0 12px;
	border-left:2px solid var(--cb-warn);padding-left:9px;
}

/* ---------- the lessons panel ---------- */
.cb-datenav{display:flex;gap:6px;align-items:center;margin-bottom:8px;}
.cb-datenav input{flex:1;min-width:0;}
.cb-datenav .cb-btn{padding:7px 11px;}
.cb-dateline{font-size:15px;font-weight:650;margin-bottom:12px;}
.cb-lcard{
	border:1px solid var(--cb-line);border-radius:var(--cb-radius-sm);
	padding:12px;margin-bottom:14px;background:var(--cb-bg);
}
.cb-lcardhead{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.cb-lcardhead .swatch{width:10px;height:10px;border-radius:3px;flex:none;}
.cb-lcardhead .nm{font-size:13.5px;font-weight:650;flex:1;min-width:0;}
.cb-lcardhead .tm{font-size:12px;color:var(--cb-text3);flex:none;}
.cb-lcard .cb-field:last-of-type{margin-bottom:0;}
.cb-lcard textarea{resize:vertical;line-height:1.45;}
.cb-lcardtools{display:flex;gap:6px;margin-top:10px;}
.cb-lcardtools .cb-btn{padding:5px 10px;font-size:12px;}
.cb-footnote{font-size:12px;color:var(--cb-text3);align-self:center;}

/* ---------- welcome and help ---------- */
.cb-steps-list{margin:4px 0 16px;}
.cb-steprow{
	display:flex;gap:11px;align-items:flex-start;padding:11px 0;
	border-top:1px solid var(--cb-line);
}
.cb-steprow .n{
	width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;
	background:var(--cb-card2);color:var(--cb-text2);font-size:12px;font-weight:700;margin-top:1px;
}
.cb-steprow .tx{flex:1;min-width:0;}
.cb-steprow .h{font-size:13.5px;font-weight:650;margin-bottom:3px;}
.cb-steprow .d{font-size:12.5px;color:var(--cb-text3);line-height:1.5;}
.cb-steprow .cb-btn{flex:none;padding:5px 11px;font-size:12px;}

.cb-keys{margin-bottom:4px;}
.cb-keyrow{display:flex;gap:10px;align-items:center;padding:5px 0;font-size:12.5px;color:var(--cb-text2);}
.cb-keyrow kbd{
	font:inherit;font-weight:650;min-width:52px;text-align:center;
	border:1px solid var(--cb-line2);border-bottom-width:2px;border-radius:6px;
	padding:2px 6px;color:var(--cb-text);background:var(--cb-card2);flex:none;
}
.cb-wlist{margin-top:4px;}
.cb-wlistrow{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--cb-line);}
.cb-wlistrow .g{flex:none;color:var(--cb-accent-ink);margin-top:1px;}
.cb-wlistrow .g svg{width:18px;height:18px;display:block;}
.cb-wlistrow .h{font-size:13px;font-weight:650;}
.cb-wlistrow .d{font-size:12px;color:var(--cb-text3);line-height:1.45;}

/* The one button that appears inside a widget rather than on the toolbar:
 * "Write it", on a lesson tile with nothing in it. Sized in pixels and not
 * container units on purpose, because it is chrome for the teacher standing
 * at the machine, not type for the room to read. */
.cb-inlinebtn{
	margin-top:10px;align-self:center;font-size:13px;padding:6px 14px;
	border-radius:999px;border:1px solid var(--cb-line2);background:var(--cb-card2);
	color:var(--cb-text2);
}
.cb-inlinebtn:hover{color:var(--cb-text);border-color:var(--cb-accent);}
body.cb-present .cb-inlinebtn{display:none;}