/* Scoped interactive model; shared Materialer typography and shell are preserved. */
.classroom { --room-ink:var(--color-primary,#5b4b37); margin-block:24px; min-width:0; }
.classroom .classroom-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px; }
.classroom button, .classroom input { font:inherit; }
.classroom-toolbar button { border:1px solid var(--color-border,#dcded6); background:var(--color-primary-soft,#efe7d8); color:var(--room-ink); padding:10px 14px; border-radius:8px; cursor:pointer; font-size:14px; font-weight:650; min-height:44px; }
.classroom-toolbar button:hover:not(:disabled) { background:var(--room-ink); color:white; }
.classroom-toolbar button:disabled { opacity:.45; cursor:default; }
.classroom-toolbar label { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:14px; font-weight:650; margin-right:auto; }
.classroom input { border:1px solid var(--color-border,#dcded6); border-radius:8px; padding:9px 12px; width:220px; max-width:100%; color:var(--color-text); background:white; }
.classroom :is(button,input):focus-visible { outline:3px solid var(--room-ink); outline-offset:4px; }
body.subject-page #main-content .classroom .classroom-help { font-family:var(--font-body,system-ui,sans-serif); font-size:14px; line-height:1.6; margin:12px 0 18px; color:var(--color-muted,#46514b); }
.classroom-count { margin-left:auto; font-size:14px; white-space:nowrap; }
.classroom-viewport { border:1px solid #d4c8b4; border-radius:14px; background:#d1d3d1; overflow:auto; padding:0; }
.classroom-sizer { position:relative; margin-inline:auto; }
.classroom-floor { width:1000px; height:700px; position:absolute; left:0; top:0; transform-origin:top left; background:radial-gradient(ellipse at 20% 30%,#fff3 0 .7px,transparent 1.1px) 0 0/7px 11px,radial-gradient(ellipse at 70% 65%,#4e55531c 0 .6px,transparent 1px) 3px 4px/13px 9px,radial-gradient(ellipse at 40% 70%,#fff2 0 1px,transparent 1.5px) 1px 2px/19px 17px,linear-gradient(120deg,#d0d2d0,#bec2bf); box-shadow:inset 0 0 0 11px #d4c8b5,inset 0 0 0 14px #fff9,inset 0 15px 26px #343a371a; }
.classroom-board .classroom-fixture-shape { position:absolute; inset:0; width:100%; height:100%; background:#254c3c url("assets/classroom/slate-v1.webp") center/cover; border:3px solid #baa383; border-bottom-color:#8a7354; border-radius:4px; color:#fff; text-align:center; font:600 15px/30px system-ui,sans-serif; letter-spacing:.18em; box-shadow:0 5px 7px #332b1d35,inset 0 2px 4px #10261e77,0 0 0 1px #796449; text-shadow:0 1px 2px #0008; }
.classroom .classroom-object { position:absolute; padding:0; border:0; border-radius:10px; background:transparent; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; }
.classroom-furniture { position:absolute; width:132px; height:86px; top:50%; left:50%; margin:-43px 0 0 -66px; pointer-events:none; }
.classroom-table { position:absolute; top:0; left:4px; width:124px; height:53px; display:flex; align-items:center; justify-content:space-around; background:linear-gradient(160deg,#ffffff24,#4d30100d),url("assets/classroom/oak-v1.webp") center/cover; border:2px solid #ae8c60; border-radius:5px; box-shadow:0 4px 0 -1px #826844,0 7px 8px -3px #332b1d50,inset 0 1px 1px #fff9; }
.classroom-table::after { content:''; position:absolute; inset:2px; border:1px solid #fff2; border-radius:2px; pointer-events:none; }
.classroom-seat-number { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#fffdf5ed; border:1px solid #a38b6566; box-shadow:0 1px 2px #593c1926; color:#483822; font:700 17px/1 system-ui,sans-serif; }
.classroom-chair { position:absolute; top:60px; width:39px; height:25px; border:2px solid #51634b; border-bottom:6px solid #344632; border-radius:7px 7px 9px 9px; background:linear-gradient(180deg,#ffffff15,#18251515),url("assets/classroom/upholstery-v1.webp") center/cover; box-shadow:0 2px 0 #aeb5ad,0 5px 5px -1px #332b1d40,inset 0 1px 2px #f3f8e86b; }
.classroom-chair-one {left:15px;} .classroom-chair-two {right:15px;}
.classroom-object.is-selected { outline:3px solid var(--room-ink); outline-offset:5px; background:#c28b3515; }
.classroom-object.is-dragging { z-index:2; cursor:grabbing; filter:drop-shadow(0 8px 5px #0002); }
.classroom-object.is-blocked { outline:3px dashed #a0392e; background:#a0392e20; }
.classroom-bottom { display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; margin-top:16px; font-size:13px; color:var(--color-muted,#46514b); }
.classroom-projecting { overflow:hidden; }
.classroom.is-projected { position:fixed; z-index:10000; inset:0; margin:0; padding:18px; background:#f5f2ea; display:flex; flex-direction:column; }
.classroom.is-projected .classroom-viewport { flex:1; min-height:0; display:grid; align-items:center; }
.classroom.is-projected .classroom-edit-tools, .classroom.is-projected .classroom-help, .classroom.is-projected .classroom-bottom { display:none; }
.classroom.is-projected .classroom-object { pointer-events:none; }
@media(max-width:640px) { .classroom-toolbar label { width:100%; } .classroom input { flex:1; min-width:0; } .classroom-count { margin-left:0; width:100%; } .classroom.is-projected {padding:8px;} }

/* Landmarks remain independent of seat numbering and can sit along any wall. */
.classroom-fixture { z-index:1; }
.classroom-window .classroom-fixture-shape { position:absolute; inset:5px 0; border:3px solid #d9ddd8; border-radius:3px; background:#bad5df url("assets/classroom/glass-v1.webp") center/cover; box-shadow:inset 0 0 0 1px #567e8f88,0 1px 0 1px #a1aaa6,0 4px 7px #32455333; }
.classroom-window .classroom-fixture-shape::before { content:''; position:absolute; top:0; bottom:0; left:50%; border-left:3px solid #edf0e9; box-shadow:1px 0 2px #405e6b66; }
:is(.classroom-door,.classroom-glass-door) .classroom-fixture-shape { position:absolute; inset:4px; border-left:6px solid #8a7254; border-top:1px dashed #b4916899; border-right:1px dashed #b4916899; border-radius:0 100% 0 0; background:radial-gradient(ellipse at bottom left,#c28b3512,transparent 75%); }
:is(.classroom-door,.classroom-glass-door) .classroom-fixture-shape::before { content:''; position:absolute; left:-6px; bottom:0; width:83px; height:8px; border:1px solid #8c6e47; border-radius:2px; background:#dbb17b url("assets/classroom/oak-v1.webp") center/cover; box-shadow:0 3px 4px #46331c55,inset 0 1px 0 #fff8; }

:is(.classroom-door,.classroom-glass-door) .classroom-fixture-shape::after { content:''; position:absolute; bottom:5px; left:64px; width:12px; height:3px; border-radius:2px; background:linear-gradient(#f4f5ef,#8e9998); box-shadow:0 1px 2px #0005; }

/* Lars is an independent teacher marker, with the same pointer/keyboard controls. */
.classroom .classroom-teacher { z-index:3; }
.classroom .classroom-teacher.is-dragging { z-index:4; }
.classroom .classroom-teacher-image { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; filter:drop-shadow(1px 3px 2px #30251c45); }

/* Four wall handles resize the room without changing furniture dimensions. */
.classroom .classroom-wall { position:absolute; z-index:5; padding:0; border:0; background:transparent; color:#5b4b37; touch-action:none; user-select:none; display:grid; place-items:center; }
.classroom-wall span { display:grid; place-items:center; min-width:28px; min-height:28px; border-radius:6px; background:#fffaf0ed; border:1px solid #a79473; box-shadow:0 2px 5px #45331a25; font:700 18px/1 system-ui,sans-serif; pointer-events:none; }
.classroom-wall-east,.classroom-wall-west { top:calc(50% - 36px); width:var(--wall-hit,44px); height:72px; cursor:ew-resize; }
.classroom-wall-east {right:0;} .classroom-wall-west {left:0;}
.classroom-wall-north,.classroom-wall-south { left:calc(50% - 36px); width:72px; height:var(--wall-hit,44px); cursor:ns-resize; }
.classroom-wall-north {top:0;} .classroom-wall-south {bottom:0;}
.classroom-wall:hover span,.classroom-wall:focus-visible span { background:#5b4b37; color:white; }
.classroom.is-projected .classroom-wall { display:none; }
.classroom.is-resizing-room .classroom-object { pointer-events:none; }

/* A short seat draw is available in both the editor and projector view. */
.classroom .classroom-pick-result { position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.classroom-seat-number.is-random-lit { background:#76f29a; color:#123d22; border:2px solid #168441; box-shadow:0 0 0 5px #31dd6f66,0 0 22px 10px #31dd6f99; }
.classroom-chair.is-random-lit { outline:3px solid #3be276; outline-offset:2px; box-shadow:0 0 18px 6px #31dd6f88; }
.classroom-teacher .classroom-furniture { transition:transform 160ms ease-out; }
.classroom.is-picking .classroom-floor { pointer-events:none; }
@media(prefers-reduced-motion:reduce) { .classroom-teacher .classroom-furniture {transition:none;} }

/* Seat controls are real buttons inside a desk group; empty seats remain reversible. */
.classroom .classroom-seat-number { padding:0; font:700 17px/1 system-ui,sans-serif; pointer-events:auto; cursor:pointer; background:#d5ebcf; color:#254c36; border-color:#79a47b; }
.classroom .classroom-seat-number:hover { box-shadow:0 0 0 3px #43834b66; }
.classroom .classroom-seat-number.is-seat-empty { background:#f6f3e9b3; border:1px dashed #9b968a; box-shadow:none; }
.classroom .classroom-chair[data-seat-index] { pointer-events:auto; cursor:pointer; }
.classroom-chair.is-seat-empty { opacity:.45; filter:grayscale(1); }
.classroom .classroom-seat-number.is-random-lit { background:#76f29a; color:#123d22; border:2px solid #168441; box-shadow:0 0 0 5px #31dd6f66,0 0 22px 10px #31dd6f99; }
.classroom.is-projected [data-seat-index] { pointer-events:none; }

/* Fine rotation stays outside the floor so it works equally well with mouse and touch. */
.classroom .classroom-rotation { padding:10px 12px; border:1px solid var(--color-border,#dcded6); border-radius:8px; background:var(--surface-soft,#f5f2ea); }
.classroom .classroom-rotation label { flex:1; margin:0; gap:12px; }
.classroom .classroom-angle { flex:1; width:auto; min-width:100px; max-width:320px; padding:0; border:0; background:transparent; accent-color:var(--room-ink); cursor:ew-resize; min-height:36px; }
.classroom-angle-value { min-width:42px; font-variant-numeric:tabular-nums; text-align:right; }
.classroom.is-projected .classroom-rotation { display:none; }
@media(max-width:640px) { .classroom .classroom-rotation label { order:-1; flex-basis:100%; } }

/* One disclosure holds the three add actions without changing the surrounding toolbar. */
.classroom-add-menu { position:relative; }
.classroom .classroom-add-options { position:absolute; top:calc(100% + 6px); left:0; z-index:20; display:grid; gap:4px; width:210px; max-width:calc(100vw - 64px); padding:8px; background:var(--color-surface,#fff); border:1px solid var(--color-border,#dcded6); border-radius:10px; box-shadow:0 8px 24px #30251c26; }
.classroom .classroom-add-options[hidden] { display:none; }
.classroom-add-options button { width:100%; text-align:left; background:transparent; border-color:transparent; }
.classroom [data-room-action="add-menu"][aria-expanded="true"] { background:var(--room-ink); color:white; }

/* Each browser holds its own room collection; the selector and plus sit beside the name. */
.classroom-room-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-right:auto; }
.classroom .classroom-room-controls label { display:grid; gap:5px; margin:0; }
.classroom .classroom-room-select { font:inherit; font-size:14px; border:1px solid var(--color-border,#dcded6); border-radius:8px; padding:9px 12px; background:white; color:var(--color-text); width:180px; max-width:100%; min-height:42px; }
.classroom [data-room-action="new-room"] { align-self:flex-end; min-width:44px; font-size:22px; padding:5px 12px; }
.classroom .classroom-storage-note { flex-basis:100%; padding:10px 12px; border-radius:8px; background:var(--color-primary-soft,#efe7d8); color:var(--room-ink); font:400 13px/1.6 system-ui,sans-serif; }
.classroom .classroom-room-select:focus-visible { outline:3px solid var(--room-ink); outline-offset:4px; }
.classroom.is-projected .classroom-storage-note,.classroom.is-projected [data-room-action="new-room"] { display:none; }
@media(max-width:640px) {
  .classroom-room-controls { width:100%; display:grid; grid-template-columns:minmax(0,1fr) 44px; }
  .classroom .classroom-room-controls label:first-child { grid-column:1/-1; }
  .classroom .classroom-room-controls :is(input,select) { width:100%; min-width:0; }
}

.classroom.is-readonly :is(.classroom-edit-tools,.classroom-rotation,.classroom-bottom,.classroom-wall,[data-room-action="new-room"]) { display:none; }
.classroom.is-readonly .classroom-object { pointer-events:none; cursor:default; }
.classroom.is-readonly .classroom-seat-number:disabled { opacity:1; cursor:default; }
.classroom [data-room-action="edit"][aria-pressed="true"] { background:var(--room-ink); color:white; }
.classroom.is-projected [data-room-action="edit"] { display:none; }
.classroom-name:read-only { background:transparent; border-color:transparent; }

.classroom > .classroom-viewport { margin-bottom:16px; }

/* Group colors supplement permanent seat numbers; letters keep every group identifiable. */
.classroom .classroom-groups-panel { margin:0 0 16px; padding:16px; border:1px solid #c9c2b5; border-radius:12px; background:#fff; box-shadow:0 3px 12px #30251c0d; }
.classroom .classroom-groups-panel[hidden],.classroom .classroom-group-overview[hidden] { display:none; }
.classroom-groups-panel h3,.classroom-group-overview h3 { margin:0 0 10px; }
.classroom .classroom-groups-panel p { margin:8px 0 14px; font-size:14px; line-height:1.5; }
.classroom .classroom-groups-panel select { font:inherit; padding:9px; min-height:44px; border:1px solid var(--color-border,#dcded6); border-radius:8px; max-width:100%; background:white; color:var(--room-ink); }
.classroom .classroom-group-value { width:90px; }
.classroom .classroom-group-preview { font-weight:650; }
.classroom-group-overview { margin:0 0 18px; }
.classroom-group-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:10px; }
.classroom .classroom-group-card { display:grid; gap:6px; text-align:left; padding:12px; border:1px solid var(--color-border,#dcded6); border-left:7px solid var(--group-color); border-radius:8px; background:var(--color-surface,#fff); color:var(--room-ink); cursor:pointer; font:inherit; min-width:0; overflow-wrap:anywhere; }
.classroom .classroom-group-card span { font-size:13px; line-height:1.5; }
.classroom .classroom-group-card:disabled { opacity:1; cursor:default; }
.classroom .classroom-group-card[aria-pressed="true"] { outline:3px solid var(--group-color); outline-offset:2px; }
.classroom .classroom-seat-number.has-group { position:relative; border:3px solid var(--group-color); background:white; box-shadow:0 0 0 2px #fff9; color:#26392d; }
.classroom .classroom-seat-number.has-group::after { content:attr(data-group-letter); position:absolute; right:-11px; top:-12px; min-width:17px; height:17px; padding:1px 3px; border-radius:5px; background:var(--group-color); color:white; font:700 11px/15px system-ui,sans-serif; box-shadow:0 1px 3px #0003; }
.classroom.is-group-assigning .classroom-seat-number:not(:disabled) { cursor:crosshair; }
.classroom .classroom-seat-number.has-group.is-random-lit { background:#76f29a; box-shadow:0 0 0 5px #31dd6f66,0 0 22px 10px #31dd6f99; }
.classroom.is-projected .classroom-groups-panel,.classroom.is-projected [data-room-action="groups"] { display:none; }
.classroom.is-projected .classroom-group-overview { max-height:22vh; overflow:auto; flex-shrink:0; margin:4px 0; }
.classroom.is-projected .classroom-group-overview h3 { font-size:16px; margin-bottom:6px; }
.classroom.is-projected .classroom-group-card { padding:6px 10px; }

.classroom .classroom-rotation .classroom-angle-value { flex:0 0 82px; width:82px; min-width:0; padding:8px; background:white; }

.classroom .classroom-help-disclosure { margin:12px 0; font-size:14px; }
.classroom .classroom-help-disclosure summary { cursor:pointer; font-weight:650; padding:8px 0; }
.classroom.is-readonly .classroom-help-disclosure,.classroom.is-projected .classroom-help-disclosure,.classroom .classroom-pick-result.is-idle { display:none; }

/* Contextual rotation sits beside the selected furniture, outside the scaled floor. */
.classroom { position:relative; }
.classroom .classroom-rotation { position:absolute; z-index:30; margin:0; padding:8px 10px; background:var(--color-surface,#fff); box-shadow:0 5px 18px #30251c33; }
.classroom .classroom-rotation[hidden] { display:none; }
.classroom .classroom-rotation label { flex-wrap:nowrap; width:100%; gap:8px; font-size:13px; }
.classroom .classroom-rotation .classroom-angle { min-width:45px; max-width:none; width:0; }
.classroom .classroom-rotation .classroom-angle-value { flex:0 0 68px; width:68px; font-size:14px; }

/* A shallow wooden cupboard, viewed from above, helps identify the real room. */
:is(.classroom-cabinet,.classroom-narrow-cabinet) .classroom-fixture-shape { position:absolute; inset:0; border:3px solid #89714f; border-bottom:8px solid #a1835b; border-radius:3px; background:linear-gradient(#ffffff24,#0000000a),url("assets/classroom/oak-v1.webp") center/cover; box-shadow:0 5px 7px #30251c44,inset 0 0 0 2px #e5cfaa; }
:is(.classroom-cabinet,.classroom-narrow-cabinet) .classroom-fixture-shape::before { content:''; position:absolute; left:50%; top:0; bottom:-8px; border-left:2px solid #705b3d88; }
:is(.classroom-cabinet,.classroom-narrow-cabinet) .classroom-fixture-shape::after { content:''; position:absolute; bottom:-7px; left:calc(50% - 10px); width:6px; height:3px; border-radius:1px; background:#dce0db; box-shadow:12px 0 #dce0db,0 1px 2px #0006,12px 1px 2px #0006; }

/* The classroom uses the available Materialer width; guidance is a separate paper below. */
body.subject-page #main-content .article-surface.classroom-page { padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
.classroom-page .classroom { margin-block:0; }
.classroom .classroom-help-section { margin-top:36px; padding:24px; border:1px solid var(--color-border,#dcded6); border-radius:14px; background:var(--color-surface,#fff); }
.classroom .classroom-help-section h2 { margin:0 0 16px; font-size:22px; }
.classroom .classroom-help-section .classroom-help { max-width:none; }
.classroom.is-projected .classroom-help-section { display:none; }
@media(max-width:640px){ .classroom .classroom-help-section { padding:18px; margin-top:28px; } }

.classroom-single-desk .classroom-table { width:68px; }

.classroom-room-sign { position:absolute; z-index:3; bottom:2px; left:50%; transform:translateX(-50%); max-width:min(240px,50%); padding:3px 20px; border:1px solid #8c7548; border-radius:4px; background:linear-gradient(140deg,#eddbac,#cbb17a 60%,#e5d2a0); color:#473c28; box-shadow:0 2px 3px #30251c44,inset 0 1px #fff9; font:650 14px/20px system-ui,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.classroom-room-sign::before,.classroom-room-sign::after { content:''; position:absolute; top:11px; width:5px; height:5px; border:1px solid #8f805f; border-radius:50%; background:linear-gradient(45deg,#d5cfbb 40%,#7e735a 45% 55%,#d5cfbb 60%); }
.classroom-room-sign::before { left:6px; }.classroom-room-sign::after { right:6px; }
.classroom .classroom-wall-south { left:calc(50% + 132px); }

/* A real-looking mushroom push button lives in the floor plan. */
.classroom .classroom-panic { cursor:pointer; background:transparent; border:0; }
.classroom.is-readonly .classroom-panic,.classroom.is-projected .classroom-panic { pointer-events:auto; }
.classroom-panic-base { position:absolute; inset:0 0 4px; border:3px solid #262a29; border-radius:9px; background:repeating-linear-gradient(135deg,#e6bf45 0 8px,#343a35 8px 16px); box-shadow:0 4px 0 #252926,0 8px 9px #16221d55,inset 0 1px 1px #fff9; }
.classroom-panic-base::before { content:''; position:absolute; inset:4px; border-radius:5px; background:radial-gradient(circle at 4px 4px,#d7d9d1 0 1px,#777d75 2px,transparent 3px),radial-gradient(circle at calc(100% - 4px) 4px,#d7d9d1 0 1px,#777d75 2px,transparent 3px),linear-gradient(125deg,#4a504a,#222823); border:1px solid #1f2520; }
.classroom-panic-cap { position:absolute; z-index:1; top:9px; left:7px; width:56px; height:56px; border:3px solid #981010; border-radius:50%; background:radial-gradient(circle at 32% 22%,#ffaaa0 0,#fa5045 22%,#db211e 57%,#9f0b0c 100%); box-shadow:0 6px 0 #740b0d,0 8px 5px #0008,inset 0 3px 3px #ffccc877,inset 0 -3px 4px #820000aa; transition:transform .08s,box-shadow .08s; }
.classroom-panic-cap::after { content:''; position:absolute; top:5px; left:9px; width:28px; height:12px; border-radius:50%; background:linear-gradient(#ffd7cda3,#ffd7cd00); transform:rotate(-22deg); }
.classroom-panic-label { position:absolute; z-index:1; bottom:3px; left:5px; right:5px; color:#f8f4dd; font:800 8px/12px system-ui,sans-serif; letter-spacing:.06em; text-align:center; text-shadow:0 1px #000; }
.classroom-panic:hover:not(:disabled) .classroom-panic-cap { filter:brightness(1.1); }
.classroom-panic:active:not(:disabled) .classroom-panic-cap,.classroom-panic.is-pressed .classroom-panic-cap { transform:translateY(4px); box-shadow:0 2px 0 #740b0d,0 3px 3px #0008,inset 0 3px 3px #ffccc877,inset 0 -3px 4px #820000aa; }
.classroom .classroom-panic:disabled { opacity:.6; cursor:default; }
@media(prefers-reduced-motion:reduce){ .classroom-panic-cap { transition:none; } }

.classroom .classroom-rotation { display:grid; gap:5px; }
.classroom .classroom-rotation label { display:grid; grid-template-columns:58px minmax(35px,1fr) 62px 8px; align-items:center; gap:6px; }
.classroom .classroom-rotation :is(.classroom-angle,.classroom-size) { width:100%; min-width:0; padding:0; border:0; accent-color:var(--room-ink); }
.classroom .classroom-rotation :is(.classroom-angle-value,.classroom-size-value) { width:62px; min-width:0; padding:6px; background:white; font-size:14px; }
.classroom .classroom-rotation label { white-space:nowrap; font-size:12px; }
.classroom .classroom-room-select { width:145px; }
.classroom .classroom-name { width:175px; }
.classroom .classroom-edit-tools { margin:0 0 12px; padding:8px 10px; background:var(--color-primary-soft,#efe7d8); border-radius:9px; }
.classroom .classroom-add-options { max-height:min(65vh,430px); overflow:auto; width:250px; }
.classroom .classroom-desk.is-single .classroom-table { width:68px; }
.classroom .classroom-desk.is-single .classroom-chair-one { left:18px; }
.classroom-student { position:absolute; z-index:1; top:46px; left:12px; width:44px; height:44px; object-fit:contain; pointer-events:none; user-select:none; }
.classroom-student-1 { left:75px; }
.classroom-desk.is-single .classroom-student-0 { left:16px; }
.classroom-desk .classroom-table { z-index:2; }
.classroom-skeleton-image { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 3px #0004); }
.classroom-narrow-cabinet .classroom-fixture-shape::before { display:none; }
.classroom-narrow-cabinet .classroom-fixture-shape::after { left:70%; box-shadow:0 1px 2px #0006; }
.classroom-smartboard .classroom-fixture-shape { position:absolute; inset:0; border:4px solid #343c3c; border-radius:4px; background:linear-gradient(130deg,#e6f5ff4d,transparent 40%),linear-gradient(90deg,#30404a,#16292d); box-shadow:0 4px 5px #0004,inset 0 0 0 1px #fff4; }
.classroom-smartboard .classroom-fixture-shape::after { content:''; position:absolute; bottom:-3px; left:44%; width:12%; height:2px; background:#75d6da; border-radius:2px; }
.classroom-hood .classroom-fixture-shape { position:absolute; inset:0; border:4px solid #86938e; border-radius:3px; background:linear-gradient(130deg,#e6edeb,#aab7b2 50%,#d3ddda); box-shadow:0 5px 7px #0004,inset 0 0 0 2px #fff8; }
.classroom-hood .classroom-fixture-shape::before { content:''; position:absolute; top:0; left:0; right:0; height:18px; border-bottom:4px solid #6d7975; background:repeating-linear-gradient(90deg,#46504d 0 3px,#a1ada8 3px 6px); box-shadow:0 3px 4px #0003; }
.classroom-hood .classroom-fixture-shape::after { content:''; position:absolute; inset:25px 10px 8px; border:2px solid #84928d; border-radius:3px; background:linear-gradient(145deg,#ffffff91,#a4c6cd52),url("assets/classroom/glass-v1.webp") center/cover; box-shadow:inset 0 1px 6px #32413b55; }

/* Guidance stays visible in view mode; only editing controls are conditional. */
.classroom-help-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,300px); gap:28px; align-items:start; }
.classroom-help-copy { min-width:0; }
.classroom .classroom-help-section h3 { font-size:18px; margin:24px 0 10px; }
.classroom .classroom-pedagogy { padding-left:20px; margin:0; font:400 14px/1.6 var(--font-body,system-ui,sans-serif); color:var(--color-muted,#46514b); }
.classroom .classroom-pedagogy li+li { margin-top:10px; }
.classroom .classroom-pedagogy-sources { margin:14px 0 0; font-size:12px; line-height:1.6; color:var(--color-muted,#46514b); }
.classroom .classroom-pedagogy-sources a { color:var(--room-ink); text-decoration:underline; text-underline-offset:2px; }
.classroom .classroom-local-save { margin:0; min-width:0; }
.classroom-local-save img { display:block; width:100%; max-width:100%; height:auto; border-radius:12px; }
.classroom .classroom-local-save .classroom-storage-note { margin-top:12px; padding:12px 14px; font-size:13px; line-height:1.6; }
.classroom-local-save strong { display:block; }
@media(max-width:800px){ .classroom-help-layout { grid-template-columns:minmax(0,1fr); gap:24px; } .classroom .classroom-local-save { width:100%; max-width:360px; margin-inline:auto; } }

body.subject-page #main-content .subject-layout.class-tools-layout { grid-template-columns:minmax(0,1fr); }

.classroom-glass-door .classroom-fixture-shape { border-left-color:#8eaaa9; }
.classroom-glass-door .classroom-fixture-shape::before { border-color:#6f929b; background:linear-gradient(140deg,#effaffb3,#a0d2df80),url("assets/classroom/glass-v1.webp") center/cover; box-shadow:0 2px 4px #36535c44,inset 0 0 0 1px #e6f8ff; }

body.subject-page #main-content .classroom .classroom-help-section :is(.classroom-help,.classroom-pedagogy li) { font-family:var(--font-body,system-ui,sans-serif); font-size:16px; line-height:1.7; }
body.subject-page #main-content .classroom .classroom-help-section .classroom-help { width:100%; max-width:none; margin:0 0 18px; }
body.subject-page #main-content .classroom .classroom-pedagogy-sources { font-size:13px; line-height:1.6; }

.classroom .classroom-viewport { overflow:hidden; }
.classroom .classroom-room-sign { pointer-events:auto; }
.classroom .classroom-room-sign .classroom-name { width:170px; max-width:100%; min-width:0; padding:0; margin:0; border:0; border-radius:2px; background:transparent; color:inherit; text-align:center; font:inherit; line-height:20px; }
.classroom .classroom-room-sign .classroom-name:read-only { cursor:default; }
.classroom .classroom-room-sign .classroom-name:not(:read-only) { cursor:text; }
@media(max-width:640px){ .classroom .classroom-room-controls { grid-template-columns:minmax(0,1fr) 44px; } .classroom .classroom-room-controls label:first-child { grid-column:auto; } }

.classroom .classroom-toolbar .classroom-logo-control { display:inline-flex; flex-direction:column; align-items:center; gap:7px; min-width:100px; padding:6px 10px; border:0; background:transparent; color:var(--room-ink); }
.classroom-control-logo { position:relative; display:grid; place-items:center; width:62px; height:62px; border-radius:18px; border:1px solid #c9c5b6; background:linear-gradient(145deg,#fffef9,#e4e6d9); box-shadow:0 3px 0 #c6c2b3,0 5px 9px #342b201a,inset 0 1px #fff; transition:transform .15s,box-shadow .15s; }
.classroom-control-logo svg { display:block; width:54px; height:54px; }
.classroom .classroom-toolbar .classroom-logo-control:is(:hover,[aria-pressed="true"]) { background:transparent; color:var(--room-ink); }
.classroom-logo-control:hover .classroom-control-logo { transform:translateY(-2px); box-shadow:0 4px 0 #c6c2b3,0 7px 12px #342b2026; }
.classroom-logo-control:is([aria-pressed="true"],[aria-expanded="true"]) .classroom-control-logo { border-color:#528567; background:linear-gradient(145deg,#edf6e9,#c6dec8); box-shadow:0 3px 0 #84a58b,0 0 0 3px #47785626; }
.classroom-logo-control[data-room-action="edit"] .classroom-control-logo::after { content:''; position:absolute; right:-3px; bottom:-2px; width:13px; height:13px; border:3px solid #f8f5ed; border-radius:50%; background:#b5ada0; }
.classroom-logo-control[data-room-action="edit"][aria-pressed="true"] .classroom-control-logo::after { background:#3d8a55; }
.classroom-control-label { font-size:13px; line-height:1.25; font-weight:700; }
@media(prefers-reduced-motion:reduce){ .classroom-control-logo { transition:none; } }