/* Mint Paper — white surfaces, connected square tiles, quiet management controls. */
:root {
  color-scheme: light;
  --bg:#fff; --card:#fff; --ink:#223d32; --ink2:#73847a; --ink3:#5e7266;
  --line:#e1eae5; --line2:#d2e0d7;
  --acc:#287354; --acc-d:#205f45; --acc-soft:#e9f5ed; --acc-text:#287354;
  --sh-sm:0 1px 3px #1d3d2910; --sh-md:0 6px 24px -8px #244f3024;
}
body { background:#fff; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:2px solid var(--acc); outline-offset:3px; }
#topbar { min-height:72px; padding:15px 26px; gap:18px; background:#fffefa; border-color:#e6eae1; box-shadow:none; }
.brand { font-size:1.1rem; letter-spacing:-.04em; }
.brand .logo { width:31px; height:31px; border-radius:10px; background:#eaf4eb; border:1px solid #c7dfcd; color:#397354; box-shadow:inset 0 1px 0 #fff; }
#teacherChip { font-weight:500; font-size:.625rem; color:#849185; background:transparent; padding:0; }
#topbar .bar-center { padding:4px; border:1px solid #e6e9e2; border-radius:12px; background:#fff; }
#dateBtn { background:transparent; font-weight:600; }
#dateBtn:hover { background:#f3f5f1; }
#todayBtn { border-radius:7px; background:#edf4ef; font-weight:600; }
#teacherBar { top:var(--topbar-height,68px); padding:9px 24px; gap:8px; background:#fff; border-color:#eef0eb; }
.tbtn { border-color:transparent; border-radius:8px; font-size:.78rem; padding:8px 11px; color:#62716a; }
.tbtn:hover { background:#f3f5f2; border-color:#e5eae5; }
#btnWait { background:#f5f3ee; border-color:#eae5db; color:#74624a; }
#btnWait[aria-expanded="true"] { background:#ece7db; border-color:#d6ccb8; }
#btnWait .cnt { background:#e8e1d4; color:#766449; font-weight:600; }
#btnSelect { border-color:#e5eae5; }
#btnBg { border:1px solid #e5eae5; background:#fff; }
#btnLogout { color:#89918c; }
#lockBtn { border:1px solid #e5eae5; }
.tbtn.primary,.btn.primary,#fabNew { background:var(--acc); box-shadow:0 3px 12px #28735420; }
#topbar #fabNew { position:static; width:auto; height:auto; min-height:38px; padding:9px 13px; display:flex; gap:7px; border:1px solid #31664d; border-radius:9px; background:#326d52; color:#fff; font-size:.75rem; font-weight:500; white-space:nowrap; box-shadow:0 3px 7px #2a51321a,inset 0 1px 0 #ffffff16; }
#topbar #fabNew:hover { transform:none; background:#285f46; }
#topbar #fabNew .ic { width:16px; height:16px; }
.login-emblem { background:var(--acc-soft); color:var(--acc); box-shadow:none; }
#noticeDock { top:var(--topbar-height,60px); right:20px; }
main { max-width:1156px; padding:0 18px 30px; }
#boardView { max-width:none; width:100%; padding:28px 24px 36px; }

/* Fixed compact tiles: center every row, including a partly filled last row. */
#boardGrid { --board-card-size:210px; display:block; background:#fff; border:0; padding:0; }
#boardGrid #boardBody,#boardGrid #cardsWrap,#boardGrid .gsec { display:block; }
#boardGrid .gsec { margin-bottom:16px; }
#boardGrid .ggrid,#boardGrid #pinSide:not(:empty) { display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin:0; padding:0; background:transparent; border:0; border-radius:0; }
#boardGrid .card { flex:0 0 var(--board-card-size); width:var(--board-card-size); max-width:100%; }
#boardGrid #pinTop:empty { display:none; }
#pinnedSection { position:relative; width:fit-content; max-width:100%; min-width:0; margin:12px auto 27px; padding:7px; border:1px solid #87b29a; border-radius:9px; background:#fff; box-shadow:0 5px 16px #46674407; }
.pinned-heading { position:absolute; z-index:1; top:0; left:15px; transform:translateY(-50%); padding:0 9px; background:#fff; }
.pinned-heading h2 { display:flex; align-items:center; gap:7px; margin:0; font-size:.72rem; line-height:22px; font-weight:600; color:#537c60; letter-spacing:-.02em; }
.pinned-heading h2 .ic { width:14px; height:14px; }
#pinnedCount { font-size:.68rem; font-weight:500; color:#789484; }
#boardGrid #pinTop:not(:empty),#boardGrid.column-layout #pinTop:not(:empty) {
  display:flex; flex-wrap:nowrap; justify-content:flex-start;
  gap:0; min-width:0; width:100%; max-width:100%; margin:0; padding:0;
  border:0; border-radius:3px; background:#fff;
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  scrollbar-width:thin; scrollbar-color:#b3cebd #edf5ef;
}
#boardGrid #pinTop .card { flex:0 0 var(--board-card-size); scroll-snap-align:start; border-color:#dbe8df; }
/* Auto margins center a short rail, and become zero when the rail overflows. */
#boardGrid #pinTop .card:first-child { margin-inline-start:auto; }
#boardGrid #pinTop .card:last-child { margin-inline-end:auto; }
#boardGrid #pinTop::before,#boardGrid #pinSide::before { content:none; }
#boardGrid .ghead { justify-content:center; margin:0; padding:12px 16px; background:#fff; font-size:.88rem; font-weight:600; }
#boardGrid .ghead::before { width:3px; height:14px; background:#95c7ab; }

.card,.card[data-size="s"],.card[data-size="l"] {
  aspect-ratio:1; min-height:210px; min-width:0; grid-column:auto;
  border:1px solid var(--line); border-radius:0; padding:0; gap:0; background:#fff;
  box-shadow:none; content-visibility:visible; contain-intrinsic-size:none;
  display:flex; flex-direction:column; transition:background .16s,box-shadow .16s;
}
.card::before { content:none; }
.card[data-pinned="top"],.card[data-pinned="side"] { background:#fff; }
.card:hover { transform:none; background:#fafcfb; box-shadow:inset 0 0 0 1px #c5dccd; }
.card[data-pinned="top"]:hover,.card[data-pinned="side"]:hover { background:#fafcfb; }
.card.fresh { box-shadow:inset 0 0 0 2px #b5d8c2; }
.card.selected { outline:0; box-shadow:inset 0 0 0 2px var(--acc); }
.card.flash { outline-offset:-3px; }
.card .card-top { display:flex; flex:0 0 34px; align-items:center; justify-content:space-between; gap:6px; height:34px; min-height:34px; padding:4px 10px 0; }
.card .card-pin { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:30px; min-height:30px; border-radius:6px; color:#7b8b82; font-size:.7rem; font-weight:500; }
.card .card-pin .ic { width:15px; height:15px; }
.card .card-pin[aria-pressed="false"] span { display:none; }
.card .card-pin[aria-pressed="true"],.card .card-pin.is-pinned { background:transparent; color:#54816a; padding:0 5px; border:1px solid transparent; font-weight:600; }
.card .card-pin[aria-pressed="true"] .ic,.card .card-pin.is-pinned .ic { width:12px; height:12px; }
.card button.card-pin:hover { background:#edf5ef; color:#3e7056; }
.card button.card-pin[aria-pressed="true"]:hover { background:#edf5ef; color:#3e7056; border-color:#d7e8dc; }
.card .card-status { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:.7rem; color:#718077; font-weight:500; text-align:right; }
.card .card-status::before { content:""; width:5px; height:5px; flex:none; border:1px solid #96a29a; border-radius:50%; }
.card[data-live="true"] .card-status { color:#3a7355; }
.card[data-live="true"] .card-status::before { background:#5ba37d; border-color:#5ba37d; }
.card .card-status.scheduled { color:#876337; }
.card .cchk { position:static; flex:none; margin:0; width:17px; height:17px; }
.card .card-copy { flex:1; min-width:0; margin:0 12px; padding:4px 0 6px; text-align:center; }
.card h3,.card[data-size="s"] h3 { display:block; height:3rem; margin:0; font-size:1.0625rem; line-height:1.25; letter-spacing:-.045em; font-weight:600; word-break:keep-all; overflow-wrap:anywhere; white-space:pre-line; }
.card-title-text { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
.card[data-size="s"] h3 { font-size:.97rem; }
.card[data-size="l"] h3 { font-size:1.2rem; }
.card-title-link { color:inherit; text-decoration:none; }
.card-title-link:hover { color:var(--acc); }
.card .card-url { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; height:2.8em; margin-top:5px; font-size:.7rem; font-weight:400; line-height:1.4; letter-spacing:0; color:#718374; text-decoration:none; white-space:normal; overflow-wrap:anywhere; word-break:break-word; overflow:hidden; }
.card .card-url:hover { color:var(--acc); text-decoration:underline; text-underline-offset:3px; }
.card .card-url + .card-url { margin-top:7px; }
.card-note-slot { min-height:27px; margin-top:7px; }
.card .card-note { display:flex; align-items:center; gap:6px; width:100%; min-height:27px; padding:4px 8px; border:1px solid #e2e9da; border-radius:6px; background:#f1f5eb; color:#58734f; text-align:left; font-size:.6875rem; font-weight:400; line-height:1.5; letter-spacing:-.01em; box-shadow:inset 0 1px 0 #ffffffaa; cursor:pointer; }
.card-note .ic { width:12px; height:12px; flex:none; color:#7b916c; }
.card-note > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; user-select:text; }
.card-note[data-tone="paper"] { background:#f7f1e7; border-color:#ede5d7; color:#806b4e; }
.card-note[data-tone="paper"] .ic { color:#968365; }
.card-note[aria-expanded="true"] { align-items:flex-start; }
.card-note[aria-expanded="true"] > span { white-space:normal; overflow-wrap:anywhere; }
.card .card-details { margin-top:12px; color:var(--ink3); font-size:.75rem; text-align:left; }
.card .card-details summary { width:fit-content; margin:0 auto; padding:5px; cursor:pointer; }
.card .body { margin-top:10px; text-align:left; font-size:.85rem; }
.card .fchip { margin-top:8px; background:#f4f8f5; }
.card .ctrl { flex:none; display:flex; align-items:center; gap:4px; min-height:44px; margin:0 10px; padding:5px 0 6px; border-top:1px solid #e9eeeb; }
.card .card-segment { display:flex; flex:none; gap:2px; padding:3px; border:1px solid #e5e8e5; border-radius:7px; background:#f4f5f3; }
.card .card-segment button { min-width:41px; min-height:24px; padding:0 10px; border-radius:4px; background:transparent; color:#718078; font-size:.7rem; font-weight:500; }
.card .card-segment button[aria-pressed="true"] { background:#fff; color:#42584b; box-shadow:0 1px 3px #1d3d2912; }
.card .card-segment .set-live[aria-pressed="true"] { background:#dfeee4; color:#256b4b; box-shadow:0 1px 2px #234e3010; }
.card .card-segment button:hover { color:#285c42; }
.card .ctrl .card-icon { width:30px; height:32px; padding:0; border-radius:6px; background:transparent; color:#7b8b82; }
.card .ctrl .card-icon .ic { width:15px; height:15px; }
.card .ctrl .card-icon:hover { background:#eaf3ed; color:var(--acc); }
.card .ctrl .card-icon.danger:hover { background:#fcf0ed; color:#ac4f45; }
.card [disabled] { opacity:.5; cursor:wait; }
body:not(.tmode) .card-copy { padding-bottom:24px; }
#waitDrawer { width:352px; padding:22px 18px 18px; background:#fafaf7; border-color:#e5e7df; box-shadow:-12px 0 48px #273c3014; }
#waitDrawer .wd-head { gap:10px; padding-bottom:16px; }
.wd-icon { display:flex; align-items:center; justify-content:center; width:38px; height:42px; border:1px solid #e8e1d5; border-radius:11px; background:#f3efe6; color:#857252; }
.wd-eyebrow { display:block; margin-bottom:4px; font-size:.56rem; font-weight:500; letter-spacing:.12em; color:#8d948c; }
#waitTitle { font-size:1.12rem; font-weight:650; letter-spacing:-.03em; }
#waitDrawer > .hint { line-height:1.6; padding-bottom:14px; border-bottom:1px solid #e5e8df; }
#waitDrawer #waitList { gap:10px; margin:16px 0; padding:1px; background:transparent; border-radius:0; }
#waitDrawer .card { flex-shrink:0; border-radius:10px; }
#waitDrawer .card-copy { margin:0 16px; text-align:left; }
#waitDrawer .card h3 { font-size:1.05rem; }
#waitDrawer .card .ctrl { margin:0 12px; }
#waitPubSel { border-radius:10px; padding:12px; box-shadow:none; }
#waitHandle { right:16px; top:auto; bottom:24px; padding:11px 12px; gap:8px; writing-mode:horizontal-tb; letter-spacing:0; border:1px solid #e2dccc; border-radius:12px; background:#fffdf7; color:#7b694d; font-weight:600; box-shadow:0 4px 18px #3c3b2c0c; }
#waitHandle .cnt { background:#efe9dc; color:#7b694d; min-width:21px; height:21px; }
#waitHandle:hover,#waitHandle[aria-expanded="true"] { background:#f1ece1; }
#waitList:empty { background:transparent; padding:0; }
#waitList .card { aspect-ratio:auto; min-height:182px; margin:0; }
#editModal .mfoot { flex-wrap:wrap; }

/* Clear Frame editor: deliberate input borders and matching date/pin controls. */
#editModal { background:#24372bc4; padding:24px 16px; align-items:safe center; }
#editModal .modal { display:flex; flex-direction:column; max-width:800px; max-height:calc(100dvh - 48px); padding:0; border:1.5px solid #829d8d; border-radius:17px; background:#fff; box-shadow:0 20px 48px #1f392a36,0 3px 8px #1f392a20; overflow:hidden; }
.editor-head { display:flex; align-items:center; gap:11px; flex:none; padding:18px 24px; border-bottom:1px solid #c4d1c7; }
.editor-emblem { display:grid; place-items:center; width:38px; height:38px; flex:none; border:1px solid #90ae9a; border-radius:10px; background:#eff6f0; color:#37694c; }
.editor-kicker { display:block; margin-bottom:3px; color:#6f8375; font-size:.625rem; letter-spacing:.12em; }
#editTitle { font-size:1.3rem; line-height:1.3; font-weight:650; letter-spacing:-.055em; }
.editor-head .icon-btn { margin-left:auto; flex:none; border:1px solid #a7b8ab; border-radius:8px; }
.editor-main { position:relative; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); min-height:0; gap:0; padding:0; overflow-y:auto; overscroll-behavior:contain; }
.editor-content { display:flex; flex-direction:column; gap:20px; min-width:0; padding:24px; }
.editor-note-field { padding:13px; border:1px solid #d7e2d0; border-radius:10px; background:#f2f6ed; }
.editor-note-field small { margin-left:5px; color:#798b71; font-size:.69rem; font-weight:400; }
#editModal .editor-note-field .field { background:#fffefb; border-color:#acbca4; font-size:.8125rem; }
#editModal .editor-field { display:grid; gap:8px; min-width:0; margin:0; color:#3d5646; font-size:.75rem; font-weight:600; }
#editModal .editor-field > label { margin:0; font-size:inherit; }
#editModal .field,#editModal #fSchedAt { min-width:0; width:100%; border:1px solid #8b9f90; background:#fff; border-radius:8px; padding:11px 12px; font-size:.875rem; line-height:1.5; color:#2f4939; font-weight:400; box-shadow:inset 0 1px 2px #28463105; }
#editModal .field::placeholder { color:#7b8980; opacity:1; }
#editModal .field:focus-visible,#editModal #fSchedAt:focus-visible { outline:2px solid #438463; outline-offset:2px; }
#fUrlRows { display:grid; gap:8px; }
.editor-link-row { position:relative; display:flex; align-items:center; gap:6px; min-width:0; }
.editor-link-row > span { position:absolute; left:12px; top:13px; color:#6e8575; pointer-events:none; }
#editModal .editor-link-row .field { padding-left:37px; font-size:.8125rem; }
.editor-link-row .icon-btn { flex:none; }
#fAddLink { display:flex; align-items:center; gap:4px; justify-self:start; color:#647b6b; font-size:.7rem; font-weight:500; padding:2px 0; }
#fAddLink .ic { width:13px; height:13px; }
.editor-options { position:relative; display:flex; flex-direction:column; gap:19px; min-width:0; min-height:394px; padding:24px; margin:0; border-left:1px solid #d8e1d8; background:#f8faf6; }
.editor-date-pin { display:grid; grid-template-columns:1fr; gap:15px; align-items:stretch; }
#editModal #fDateBtn,#editModal .editor-pin { display:flex; align-items:center; gap:9px; width:100%; height:46px; min-height:46px; margin:0; padding:0 11px; border:1px solid #8b9f90; border-radius:8px; font-size:.75rem; font-weight:500; }
#editModal #fDateBtn { background:#fff; color:#395b46; text-align:left; }
#fDateLabel { flex:1; white-space:nowrap; }
#fDateBtn > .ic:last-child { width:13px; color:#819286; }
#editModal #fDateBtn[aria-expanded="true"] { border-color:#4f8461; background:#f4f8f3; box-shadow:0 0 0 2px #e7f1e8; }
#editModal .editor-pin { background:#fafbf8; color:#607768; cursor:pointer; }
.editor-pin > span { flex:1; color:#435e4c; white-space:nowrap; }
#fPinned { appearance:none; -webkit-appearance:none; position:relative; width:32px; height:20px; min-width:32px; flex:none; margin:0; padding:0; border:1px solid #a8b8ab; border-radius:99px; background:#dce3dc; transition:background .16s; }
#fPinned::after { content:""; position:absolute; width:14px; height:14px; top:2px; left:2px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #233e3029; transition:transform .16s; }
#fPinned:checked { background:#397c59; border-color:#397c59; }
#fPinned:checked::after { transform:translateX(12px); }
#editModal .editor-pin:has(input:checked) { background:#edf5ef; border-color:#79a68a; }
#fPinned:focus-visible { outline:2px solid #438463; outline-offset:3px; }
.editor-publish { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
#editModal .editor-publish label { position:relative; margin:0; cursor:pointer; }
.editor-publish input { position:absolute; opacity:0; width:1px; height:1px; }
.editor-publish label > span { display:flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:10px; border:1px solid #97ab9b; border-radius:8px; background:#fff; font-size:.75rem; font-weight:500; color:#64766a; }
.editor-publish input:checked + span { background:#edf5ef; border-color:#4f8461; box-shadow:inset 0 0 0 .5px #4f8461; color:#2b6446; }
.editor-publish input:focus-visible + span { outline:2px solid #438463; outline-offset:2px; }
#editModal #pubHint { margin:0; color:#6e8173; font-size:.7rem; font-weight:400; }
#fScheduleOptions { font-size:.72rem; color:#6e8173; }
#fScheduleOptions summary { cursor:pointer; width:fit-content; padding:2px 0; }
#editModal .editor-schedule { display:flex; align-items:center; gap:7px; margin:12px 0 8px; font-size:.75rem; font-weight:500; }
.editor-schedule input { accent-color:#397c59; }
#editModal .mfoot { margin:0; display:flex; align-items:center; flex:none; gap:9px; padding:14px 24px; background:#fff; border-top:1px solid #b2c3b5; }
#editModal .mfoot .btn { min-height:40px; padding:9px 13px; border:1px solid #9baf9f; border-radius:8px; background:#fff; color:#546b5c; font-size:.8rem; font-weight:500; }
#editModal .mfoot .btn.primary { background:#286c4e; border-color:#286c4e; color:#fff; }
#editModal .mfoot .btn.danger { color:#a24f42; border-color:#d9b9b2; }
#editModal #fCalPop { position:absolute; z-index:2; inset:12px; width:auto; max-width:none; padding:16px; border:1px solid #83a38c; border-radius:12px; background:#fff; box-shadow:0 6px 18px #23442e12; animation:none; overflow-y:auto; }
#fCalPop .cal-title { text-align:left; font-size:.94rem; font-weight:600; }
#fCalPop .icon-btn { border:1px solid #c5d3c7; background:#fafcf9; border-radius:8px; }
#fCalPop .cal-grid { grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
#fCalPop .cal-wd { font-weight:400; font-size:.7rem; }
#fCalPop .cal-d { min-width:0; height:32px; border-radius:8px; font-size:.75rem; font-weight:500; }
#fCalPop .cal-d.sel { background:#347453; }
#fCalPop .cal-d.today { box-shadow:inset 0 0 0 1px #91b19b; }
.editor-cal-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid #d6e0d6; font-size:.65rem; color:#738677; }
.editor-cal-foot > div { display:flex; align-items:center; gap:6px; }
#fCalClose { padding:6px 10px; border:1px solid #c6d2c8; border-radius:7px; color:#597260; background:#fff; font-size:.7rem; }
.editor-cal-foot > span { display:flex; align-items:center; gap:5px; }
.editor-cal-foot > span::before { content:""; width:7px; height:7px; border:1px solid #91b19b; border-radius:3px; }
#fCalToday { border:1px solid #b6cbb9; border-radius:7px; background:#f1f7f0; color:#466e53; padding:6px 10px; font-size:.7rem; }
@media(max-width:680px) {
  #editModal { padding:12px; }
  #editModal .modal { max-width:460px; max-height:calc(100dvh - 24px); }
  .editor-head { padding:14px 17px; }
  .editor-main { display:block; }
  .editor-content { padding:18px 17px; gap:14px; }
  .editor-options { position:static; min-height:0; padding:17px; gap:13px; border-left:0; border-top:1px solid #d8e1d8; }
  .editor-date-pin { grid-template-columns:1fr 1fr; gap:10px; }
  #editModal #fDateBtn,#editModal .editor-pin { gap:5px; padding:0 8px; font-size:.7rem; }
  .editor-pin > .ic { display:none; }
  #editModal #fCalPop { inset:10px 10px auto; padding:16px; }
  .editor-main:has(#fCalPop:not(.hidden)) .editor-content,
  .editor-main:has(#fCalPop:not(.hidden)) .editor-options > :not(#fCalPop) { visibility:hidden; }
  #fCalPop .cal-d { height:36px; }
  #editModal .field,#editModal .editor-link-row .field,#editModal .editor-note-field .field,#editModal #fSchedAt { font-size:16px; }
  #editModal .mfoot { padding:12px 17px; gap:6px; }
  #editModal .mfoot .btn { padding:9px; }
  #editModal .mfoot .btn .ic { display:none; }
}
@media(pointer:coarse) {
  #editModal .mfoot .btn,.editor-publish label > span { min-height:44px; }
  .editor-head .icon-btn { width:44px; height:44px; }
}
@media(prefers-reduced-motion:reduce) { #fPinned,#fPinned::after { transition:none; } }

/* Keep the optional column layout and legacy left-pinned boards usable. */
#boardGrid.column-layout { display:block; background:transparent; padding:0; overflow:visible; }
#boardGrid.column-layout #boardBody { display:flex; gap:16px; }
#boardGrid.column-layout #pinSide:not(:empty) { display:flex; flex:0 0 var(--board-card-size); flex-direction:column; align-items:center; gap:0; padding:0; background:transparent; border-radius:0; overflow:hidden; }
#boardGrid.column-layout #cardsWrap.cols { display:flex; flex:1; justify-content:safe center; min-width:0; gap:14px; overflow-x:auto; }
#boardGrid.column-layout .gsec { display:block; flex:0 0 var(--board-card-size); }
#boardGrid.column-layout .ggrid { display:flex; flex-direction:column; gap:0; padding:0; background:transparent; border-radius:0; overflow:hidden; }
#boardGrid.column-layout .ghead { padding:8px 0 12px; background:transparent; }

@media(max-width:960px) {
  #topbar { padding:10px 16px; gap:10px; }
  #teacherBar { padding:8px 16px; }
}
@media(max-width:760px) {
  #topbar .bar-center { order:3; width:100%; justify-content:center; }
  #topbar .bar-right { margin-left:auto; }
  #boardGrid.column-layout #boardBody { flex-direction:column; }
  #boardGrid.column-layout #pinSide:not(:empty) { flex:none; width:100%; }
}
@media(max-width:560px) {
  #boardView { padding:24px 14px; }
  main { padding:0 14px 24px; }
  .card,.card[data-size="s"],.card[data-size="l"] { min-height:210px; }
  #topbar { gap:8px; }
  .brand { font-size:.96rem; }
  #teacherChip { display:none; }
  #teacherBar { gap:4px; }
  #teacherBar .tbtn { padding:8px; font-size:.73rem; }
  #teacherBar .spacer { display:none; }
  #waitHandle { right:12px; bottom:20px; }
}
@media(pointer:coarse) {
  #boardGrid { --board-card-size:224px; }
  .card .card-pin { min-width:44px; min-height:44px; }
  .card .ctrl .card-icon { width:44px; height:44px; }
  .card .card-segment button { min-height:38px; min-width:44px; padding:0 9px; }
  .card .card-top { flex-basis:54px; height:54px; min-height:54px; }
  .card .ctrl { min-height:60px; gap:0; }
}
@media(max-width:479px) {
  .card,.card[data-size="s"],.card[data-size="l"] { aspect-ratio:auto; min-height:210px; }
  #boardGrid #pinTop .card { aspect-ratio:1; }
}
@media(prefers-reduced-motion:reduce) { .card,#waitDrawer { transition:none; } }