/* Only what is unique to the classroom tablet. The canvas is 1280 x 800. */
.tablet-stage .device { justify-self: center; max-width: min(1240px, calc((100vh - var(--pocbar-h) - 64px) * 1.6 * 1.04)); }
.stage-cap .muted { font-size: var(--t-14); }
.stage-cap ol { display: grid; gap: var(--s-2); counter-reset: s; }
.stage-cap ol li { counter-increment: s; display: grid; grid-template-columns: 24px 1fr; gap: var(--s-2); font-size: var(--t-14); color: var(--ink-2); }
.stage-cap ol li::before { content: counter(s); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--primary-soft); color: var(--primary-strong); }
.stage-cap .demo { display: grid; gap: var(--s-2); padding-top: var(--s-3); border-top: var(--rule); }

.t-main { padding: var(--s-5) var(--s-5) var(--s-5); }
.t-app.solo { grid-template-columns: minmax(0, 1fr); grid-template-rows: 28px minmax(0, 1fr); }
.t-app.solo .t-main { padding: 0; }
.t-bar [data-slot="user"] { display: flex; }
/* Who is using this tablet */
.t-scrim { position: absolute; inset: 0; z-index: 30; background: oklch(0.21 0.03 215 / .4); opacity: 0; transition: opacity var(--dur-2); }
.usersheet { position: absolute; z-index: 31; left: 50%; top: 50%; width: 760px; translate: -50% -46%; opacity: 0; padding: var(--s-6); border-radius: var(--r-lg); background: var(--bg); box-shadow: var(--elev-modal); transition: opacity var(--dur-2), translate var(--dur-3) var(--ease-out); }
.user-open .t-scrim { opacity: 1; } .user-open .usersheet { opacity: 1; translate: -50% -50%; }
.usersheet h2 { font-size: var(--t-28); }
.usersheet > p { margin: 4px 0 var(--s-5); }
.ulist { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); }
.ulist button { display: grid; justify-items: center; gap: 6px; padding: var(--s-4) var(--s-2); border-radius: var(--r-card); text-align: center; box-shadow: inset 0 0 0 1px var(--line); }
.ulist button:hover { background: var(--surface); }
.ulist button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--primary); background: var(--primary-soft); }
.ulist b { font-size: var(--t-14); line-height: 1.2; }
.ulist small { font-size: var(--t-12); color: var(--muted); line-height: 1.3; }
.pinrow { margin-top: var(--s-5); display: grid; grid-template-columns: auto auto 1fr; gap: var(--s-3) var(--s-6); align-items: center; }
.pinrow .label { grid-column: 1 / -1; }
.pins { display: flex; gap: 12px; }
.pins i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-strong); }
.pins i.on { background: var(--primary); box-shadow: none; }
.keypad { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; }
.keypad button { height: 52px; border-radius: var(--r-ctl); font: 600 22px/1 var(--font-display); background: var(--surface); display: grid; place-items: center; }
.keypad button:hover { background: var(--surface-2); }
.pinrow .help { align-self: end; }

/* ---------- Today ---------- */
.home { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-5); align-items: start; }
.home .col { display: grid; gap: var(--s-4); align-content: start; }
.next { display: grid; gap: var(--s-3); }
.next .item { display: grid; grid-template-columns: 52px 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-4); border-radius: var(--r-card); background: var(--bg); box-shadow: var(--elev-card); }
.next .item .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-strong); }
.next .item.warn .ic { background: var(--warning-soft); color: var(--warning-ink); }
.next .item.ok .ic { background: var(--success-soft); color: var(--success-ink); }
.next .item.off .ic { background: var(--offline-soft); color: var(--offline-ink); }
.next .item b { display: block; font: 600 var(--t-18)/1.25 var(--font-display); font-stretch: 104%; }
.next .item small { display: block; font-size: var(--t-14); color: var(--muted); margin-top: 2px; }
.tcard { padding: var(--s-4) var(--s-5); border-radius: var(--r-card); background: var(--bg); box-shadow: var(--elev-card); }
.tcard h2 { font-size: var(--t-18); margin-bottom: var(--s-3); }
.syncbig { display: grid; gap: var(--s-3); }
.syncbig .q { font: 600 44px/1 var(--font-display); }
.syncbig .q small { font: 400 var(--t-14)/1.3 var(--font-body); color: var(--muted); display: block; margin-top: 4px; }

/* ---------- Attendance ---------- */
.att { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-5); height: 100%; }
.att-left { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--s-3); min-height: 0; }
.ticks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(12, 44px); column-gap: var(--s-4); }
.tick { display: grid; grid-template-columns: 28px minmax(0, 1fr) 36px; align-items: center; gap: 8px; padding: 0 4px; border-bottom: var(--rule); text-align: left; font-size: var(--t-15); cursor: pointer; }
.tick .no { font-size: var(--t-12); color: var(--muted); }
.tick .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tick .bx { width: 32px; height: 32px; border-radius: 9px; box-shadow: inset 0 0 0 var(--bw-strong) var(--line-strong); display: grid; place-items: center; color: transparent; transition: background var(--dur-1), box-shadow var(--dur-1); }
.tick[aria-checked="true"] .bx { background: var(--primary); box-shadow: none; color: var(--on-primary); }
.tick.abs .nm { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--danger); }
.tick.leave { cursor: default; } .tick.leave .nm { color: var(--muted); }
.tick.leave .bx { box-shadow: none; color: var(--info-ink); width: auto; }
.tick:disabled, .tick[aria-disabled="true"] { cursor: default; }
.att-side { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-card); background: var(--bg); box-shadow: var(--elev-card); }
.att-side .tally { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.att-side .tally b { display: block; font: 600 30px/1 var(--font-display); }
.att-side .tally span { font-size: var(--t-12); color: var(--muted); }
.att-side .dotgrid { width: 100%; justify-self: center; }
.att-side .st { font-size: var(--t-13); line-height: 1.45; color: var(--ink-2); }
.att-side .st b { display: flex; gap: 6px; align-items: center; color: var(--ink); font-size: var(--t-14); }

/* ---------- Lessons ---------- */
.lesson { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s-5); align-items: start; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chipbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--r-full); font-size: var(--t-14); box-shadow: inset 0 0 0 1px var(--line-strong); background: var(--bg); }
.chipbtn small { color: var(--muted); }
.chipbtn[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.chipbtn[aria-pressed="true"] small { color: oklch(1 0 0 / .8); }
.chipbtn.done { box-shadow: inset 0 0 0 1px var(--success); }
.chipbtn.due { box-shadow: inset 0 0 0 1.5px var(--warning); }
.loglist { display: grid; }
.loglist .row-item { align-items: flex-start; }
.loglist .when { width: 56px; flex: none; font-size: var(--t-12); color: var(--muted); padding-top: 3px; }

/* ---------- Fees ---------- */
.fees { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: var(--s-5); height: 100%; }
.slist { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--s-3); min-height: 0; }
.slist .scroll { overflow-y: auto; border-radius: var(--r-card); background: var(--bg); box-shadow: var(--elev-card); }
.srow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 14px; border-bottom: var(--rule); text-align: left; }
.srow:hover { background: var(--surface); }
.srow[aria-pressed="true"] { background: var(--primary-soft); }
.srow b { display: block; font-size: var(--t-15); font-weight: 520; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow small { display: block; font-size: var(--t-12); color: var(--muted); }
.fdetail { overflow-y: auto; display: grid; gap: var(--s-4); align-content: start; padding-right: 4px; }
.duegrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-4); align-items: start; }
.duetable td { padding: 8px 0; border-bottom: 1px dotted var(--line-strong); font-size: var(--t-15); }
.duetable td:last-child { text-align: right; }
.duetable tr.total td { border-bottom: 0; font: 600 var(--t-22)/1.2 var(--font-display); padding-top: 12px; }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.modes button { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border-radius: var(--r-ctl); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: var(--t-14); font-weight: 520; }
.modes button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--primary); background: var(--primary-soft); color: var(--primary-strong); }
.dayclose { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-card); background: var(--surface); }

/* ---------- Exam terminal ---------- */
.xstart { height: 100%; display: grid; grid-template-columns: 520px minmax(0, 1fr); }
.xstart .left { background: var(--drench); color: var(--on-drench); padding: 56px 48px; display: grid; align-content: space-between; }
.xstart .left .crest { --size: 280px; color: var(--rice); }
.xstart .left h1 { font-size: 40px; line-height: 1.05; }
.xstart .left p { color: var(--on-drench-muted); margin-top: 10px; }
.xstart .right { padding: 56px 64px; display: grid; align-content: center; gap: var(--s-5); }
.xstart .right h2 { font-size: var(--t-28); }
.codebox { display: flex; gap: 8px; }
.codebox input { width: 56px; height: 68px; text-align: center; border: 0; border-radius: var(--r-ctl); box-shadow: inset 0 0 0 var(--bw-strong) var(--line-strong); font: 600 30px/1 var(--font-display); text-transform: uppercase; background: var(--bg); }
.codebox input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primary), 0 0 0 4px var(--primary-soft); }
.codebox .gap { width: 10px; }
.xhead { display: flex; align-items: center; gap: var(--s-4); height: 76px; padding: 0 28px; border-bottom: var(--rule); background: var(--surface); }
.xhead .grow { flex: 1; }
.xhead b { font: 600 var(--t-18)/1.2 var(--font-display); }
.xhead small { display: block; color: var(--muted); font-size: var(--t-13); }
.timer { font: 600 30px/1 var(--font-display); font-variant-numeric: tabular-nums; padding: 8px 14px; border-radius: var(--r-ctl); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.timer.low { color: var(--danger-ink); box-shadow: inset 0 0 0 2px var(--danger); }
.xbody { display: grid; grid-template-columns: minmax(0, 1fr) 300px; height: calc(100% - 76px); }
.xq { padding: 36px 48px; display: grid; align-content: start; gap: var(--s-5); overflow-y: auto; }
.xq .qn { font-size: var(--t-14); color: var(--muted); }
.xq h2 { font: 500 30px/1.3 var(--font-body); letter-spacing: 0; text-wrap: pretty; max-width: 30ch; }
.xq .opts { max-width: 680px; }
.xq .opt { font-size: 22px; min-height: 72px; }
.xq .nav { display: flex; gap: var(--s-3); margin-top: var(--s-2); }
.xside { border-left: var(--rule); padding: 28px 24px; display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s-4); background: var(--surface); }
.xside .qnav button { width: 44px; height: 44px; font-size: var(--t-15); }
.leftflag { position: absolute; left: 50%; top: 92px; translate: -50% 0; z-index: 20; display: none; }
.leftflag.on { display: flex; }
.xdone { height: 100%; display: grid; place-items: center; text-align: center; padding: 40px; }
.xdone .score { font: 650 120px/.9 var(--font-display); font-stretch: 112%; letter-spacing: -.03em; }
.xdone .score small { font-size: 40px; color: var(--muted); }

/* ---------- Sync centre ---------- */
.syncgrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-5); align-items: start; }
.synchero { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-5); align-items: center; padding: var(--s-5); border-radius: var(--r-card); background: var(--bg); box-shadow: var(--elev-card); }
.synchero .big { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-strong); }
.synchero.offline .big { background: var(--offline-soft); color: var(--offline-ink); }
.synchero.syncing .big { background: var(--accent-soft); color: var(--on-accent); }
.synchero.syncing .big .ico { animation: breathe 1.2s var(--ease) infinite; }
.synchero h2 { font-size: var(--t-28); }
.synchero p { color: var(--muted); font-size: var(--t-15); margin-top: 4px; }

/* ---------- Locked and register ---------- */
.lockscreen { height: 100%; display: grid; grid-template-columns: 1fr 1fr; background: var(--drench); color: var(--on-drench); }
.lockscreen .art { display: grid; place-items: center; position: relative; }
.lockscreen .art .crest { --size: 340px; color: var(--rice); }
.lockscreen .art .ring { position: absolute; width: 420px; height: 420px; border-radius: 50%; box-shadow: inset 0 0 0 3px var(--rice); opacity: .5; }
.lockscreen .copy { padding: 72px 64px; display: grid; align-content: center; gap: var(--s-4); }
.lockscreen h1 { font-size: 44px; line-height: 1.05; }
.lockscreen p { color: var(--on-drench-muted); font-size: var(--t-18); line-height: 1.5; max-width: 34ch; }
.lockscreen .meta { display: grid; gap: 6px; padding-top: var(--s-4); border-top: 1px solid var(--drench-line); font-size: var(--t-14); color: var(--on-drench-muted); }
.lockscreen .meta b { color: var(--on-drench); font-weight: 520; }
.lockscreen .why { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 14px; border-radius: var(--r-full); background: oklch(1 0 0 / .1); font-size: var(--t-14); }
.regscreen { height: 100%; display: grid; grid-template-columns: 520px 1fr; }
.regscreen .left { background: var(--drench); color: var(--on-drench); padding: 56px 48px; display: grid; align-content: space-between; }
.regscreen .left .crest { --size: 300px; color: var(--rice); }
.regscreen .right { padding: 56px 72px; display: grid; align-content: center; gap: var(--s-5); }
.regscreen h1 { font-size: 40px; line-height: 1.05; }
.progress { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.progress i { display: block; height: 100%; width: var(--p, 0%); background: var(--primary); transition: width 400ms var(--ease-out); }
.dlist { display: grid; gap: 8px; font-size: var(--t-15); }
.dlist li { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.dlist li.done { color: var(--ink); }
.dlist li.done .ico { color: var(--success); }
.regscreen input::placeholder { text-transform: none; }