/* My Classroom, on top of kit/kit.css.
   A top-down room on a grid between two side panels: the furniture palette when building, the class and its rules when
   seating. Names are pills in each pupil's colour, sized from the room's cells so they read on a projector and on paper. */

.cr-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; max-width: 1500px; margin: 0 auto; padding-block: 6px 14px; }
#roomDD .dd-btn { min-height: 46px; padding: 9px 18px; font-size: 18px; font-weight: 900; }
.cr-modes { margin-inline: auto; }
.cr-modes button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 15px; }
.cr-modes svg { width: 18px; height: 18px; flex: none; }
.cr-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-bar-actions .btn svg { width: 18px; height: 18px; }

.cr-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 370px); gap: clamp(16px, 2.4vw, 36px); align-items: start; max-width: 1500px; }
body[data-mode="build"] .cr-main { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
body[data-mode="build"] .cr-seat, body[data-mode="seat"] .cr-build { display: none; }
.cr-side { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cr-side > * { animation: rise .5s cubic-bezier(.2,.9,.3,1) both; }
.cr-stage { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* the room goes along when the page scrolls, so it stays in view beside a long side panel (where it fits the screen) */
@media screen and (min-width: 901px) and (min-height: 600px) { .cr-stage { position: sticky; top: 12px; } }

/* ---------- the room ---------- */
.room-wrap { --ar: 1.25; position: relative; width: min(100%, calc((100vh - 250px) * var(--ar))); width: min(100%, calc((100dvh - 250px) * var(--ar))); min-width: min(100%, 320px); aspect-ratio: var(--ar); }
.room, .room-svg, .seat-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.room-svg { display: block; overflow: visible; filter: drop-shadow(0 18px 26px rgba(20,48,44,.25)); }
.room-wall { fill: none; stroke: #143E38; stroke-width: 18; }
.room-grid { fill: none; stroke: rgba(20,62,56,.18); stroke-width: 2; stroke-dasharray: 6 8; opacity: 0; transition: opacity .3s; }
body[data-mode="build"] .room-grid { opacity: 1; }
.it { cursor: default; }
body[data-mode="build"] .it { cursor: grab; }
body[data-mode="build"] .it:hover .it-hit { fill: rgba(31,168,155,.12); }
.it-hit { fill: transparent; }
.it.is-dragging { cursor: grabbing; opacity: .88; }
.it.is-bad .it-hit { fill: rgba(179,38,30,.22); stroke: #B3261E; stroke-width: 6; stroke-dasharray: 10 8; }
.it.is-new { animation: itemIn .45s cubic-bezier(.2,1.4,.4,1); transform-box: fill-box; }
@keyframes itemIn { from { opacity: 0; scale: .6; } }
.it.is-back { animation: nope .4s; }
@keyframes nope { 25% { translate: -14px 0; } 75% { translate: 14px 0; } }
.room-sel { fill: none; stroke: #1FA89B; stroke-width: 6; stroke-dasharray: 14 10; pointer-events: none; }
.item-bar { position: absolute; z-index: 5; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--forest); box-shadow: var(--shadow); translate: -50% calc(-100% - 10px); animation: ddIn .16s ease-out; }
.item-bar button { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #FFFCF4; cursor: pointer; }
.item-bar button:hover { background: rgba(255,255,255,.16); }
.item-bar svg { width: 20px; height: 20px; }

/* ---------- seats and names ---------- */
/* In seat mode a cell never gets smaller than 56px, so whole names stay readable: a room too wide for the screen pans sideways */
.room-pan { display: flex; width: 100%; }
.room-pan > .room-wrap { flex: none; margin-inline: auto; }
body[data-mode="seat"]:not(.presenting) .room-pan { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 34px; margin-bottom: -22px; }
body[data-mode="seat"]:not(.presenting) .room-wrap { min-width: max(min(100%, 320px), calc((var(--cols, 10) + .52) * 56px)); }
.seat-layer { --cell: 60px; container-type: size; pointer-events: none; }
body[data-mode="build"] .seat-layer { display: none; }
.seat { position: absolute; width: calc(var(--cell) * .5); height: calc(var(--cell) * .5); translate: -50% -50%; border-radius: 50%; pointer-events: auto; }
.seat:not(.is-taken) { cursor: pointer; }
.seat:not(.is-taken)::after { content: ''; position: absolute; inset: 6%; border: max(2px, calc(var(--cell) * .03)) dashed rgba(20,62,56,.5); border-radius: 50%; background: rgba(255,252,244,.55); opacity: 0; transition: opacity .2s, scale .2s; }
.seat:not(.is-taken)::before { content: '+'; position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: #143E38; font-weight: 900; font-size: calc(var(--cell) * .3); line-height: 1; opacity: 0; transition: opacity .2s; }
.seat:not(.is-taken):focus-visible::after { opacity: .8; }
@media (hover: hover) { .seat:not(.is-taken):hover::after { opacity: .8; } }
:is(.is-picking, body.dragging) .seat:not(.is-taken)::after, :is(.is-picking, body.dragging) .seat:not(.is-taken)::before { opacity: 1; }
.is-picking .seat:not(.is-taken)::after { animation: seatCall 1.6s ease-in-out infinite; }
@keyframes seatCall { 50% { scale: 1.14; } }
.seat.is-target:not(.is-taken)::after { border-style: solid; border-color: #1FA89B; background: rgba(31,168,155,.35); scale: 1.3; animation: none; }
.seat.is-target .chip { outline: 3px dashed #1FA89B; outline-offset: 3px; scale: 1.06; }
.seat:focus-visible { outline: 3px solid var(--focus, #1FA89B); outline-offset: 2px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 4px 12px 4px 4px; border-radius: 999px; background: #FFFCF4; border: 3px solid var(--c); color: #143E38; font-weight: 900; font-size: 15px; line-height: 1.1; cursor: grab; user-select: none; touch-action: none; box-shadow: 0 4px 10px -4px rgba(20,48,44,.45); transition: scale .2s; }
.chip i { flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--c); color: #FFFFFF; font-style: normal; font-size: .78em; font-weight: 900; }
.chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* On a seat: a name card, first name on top and the rest below, as wide as the seat's space allows (--w cells) */
.seat .chip, .chip-ghost.is-card { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: stretch; gap: 0; width: calc(var(--cell) * var(--w, .94)); max-width: none; padding: calc(var(--cell) * .03) calc(var(--cell) * .02) calc(var(--cell) * .04); border-width: max(2px, calc(var(--cell) * .028)); border-top-width: max(4px, calc(var(--cell) * .07)); border-radius: calc(var(--cell) * .11); background: color-mix(in srgb, var(--c) 12%, #FFFCF4); translate: -50% -50%; font-size: calc(var(--cell) * .2 * var(--fs, 1)); line-height: 1.06; letter-spacing: -.01em; text-align: center; }
.seat .chip b, .chip-ghost.is-card b { display: block; overflow: hidden; font-weight: 900; }
.seat .chip small, .chip-ghost.is-card small { display: block; overflow: hidden; margin-top: .06em; color: #3B5E57; font-size: .8em; font-weight: 800; }
.chip.is-lifted { opacity: .3; }
.chip.is-picked { z-index: 3; outline: 3px solid var(--fg); outline-offset: 2px; animation: picked 1.4s ease-in-out infinite; }
@keyframes picked { 50% { scale: 1.08; } }
.chip.chip-ghost { position: fixed; z-index: 100; pointer-events: none; rotate: -3deg; box-shadow: var(--shadow-pop); translate: none; }
.chip-ghost .chip-lock { display: none; }
.chip-lock { position: absolute; right: -6px; top: -8px; display: grid; place-items: center; width: max(18px, calc(var(--cell) * .2)); height: max(18px, calc(var(--cell) * .2)); padding: 0; border: 0; border-radius: 50%; background: var(--forest); color: #FFFCF4; cursor: pointer; opacity: 0; transition: opacity .15s; }
.seat .chip-lock { right: calc(var(--cell) * -.08); top: calc(var(--cell) * -.11); }
.chip-lock svg { width: 62%; height: 62%; }
.chip:hover .chip-lock, .chip.is-locked .chip-lock, .chip-lock:focus-visible { opacity: 1; }
.chip.is-locked { border-style: double; border-width: max(4px, calc(var(--cell) * .045)); }
.seat .chip.is-locked { border-top-width: max(6px, calc(var(--cell) * .08)); }
.chip.is-locked .chip-lock { background: var(--fox); color: var(--on-fox); }
.seat-layer.is-dealt .chip, .seat .chip.is-in { animation: deal .5s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--k, 0) * 1ms); }
@keyframes deal { from { opacity: 0; scale: .4; rotate: -12deg; } }
.cr-list-wrap.is-picking, .cr-list-wrap.is-target { outline: 3px dashed var(--teal); outline-offset: -3px; }
.cr-list-wrap.is-target { background: color-mix(in srgb, var(--teal) 14%, var(--surface-2)); }
.cr-picking { position: fixed; left: 16px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: 10px; width: fit-content; margin-inline: auto; padding: 7px 7px 7px 14px; border-radius: 28px; background: var(--forest); color: var(--paper); font-weight: 800; line-height: 1.3; box-shadow: var(--shadow); animation: rise .3s cubic-bezier(.2,.9,.3,1) both; }
.cr-picking i { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--c, var(--fox)); border: 2px solid var(--paper); }
.cr-picking button { flex: none; padding: 7px 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.16); color: inherit; font: inherit; font-weight: 900; cursor: pointer; }
.cr-picking button:hover { background: rgba(255,255,255,.26); }
body.presenting .seat:not(.is-taken) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .is-picking .seat:not(.is-taken)::after, .chip.is-picked { animation: none; } }

/* ---------- the panels ---------- */
.cr-palette { display: flex; flex-direction: column; gap: 8px; }
.pal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.pal-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; border: 2px solid transparent; border-radius: 18px; background: var(--surface-2); color: var(--fg); font-weight: 800; font-size: 13px; cursor: grab; touch-action: none; transition: transform .2s, border-color .2s; }
.pal-item:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.pal-ico { display: grid; place-items: center; width: 64px; height: 52px; }
.pal-ico svg { max-width: 100%; max-height: 100%; }
.pal-ghost { position: fixed; z-index: 100; width: 90px; height: 90px; translate: -50% -50%; pointer-events: none; filter: drop-shadow(0 10px 16px rgba(20,48,44,.35)); }
.pal-ghost svg { width: 100%; height: 100%; }
.cr-size { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 8px 14px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
body[data-mode="seat"] .cr-size { display: none; }
.cr-step { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.cr-step button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-3); color: var(--fg); font-size: 18px; font-weight: 900; cursor: pointer; }
.cr-step button:hover { background: var(--hover); }
.cr-step b { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; font-size: 16px; }
.cr-x { font-weight: 900; color: var(--muted); }
.cr-cells { color: var(--muted); font-size: 13px; font-weight: 800; }
.cr-name { width: 190px; padding: 7px 14px; font-size: 14px; }
#roomDelete.is-sure { color: var(--danger); }
.cr-draw { width: 100%; }
.cr-draw svg { width: 22px; height: 22px; }
.cr-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-row .btn { flex: 1 1 auto; }
#crClass .dd-btn { width: 100%; justify-content: space-between; min-height: 44px; font-size: 16px; font-weight: 900; }
#crClass, #crClass .dd { width: 100%; }
.cr-class-row { display: flex; align-items: center; gap: 8px; }
.cr-class-row #crClass { flex: 1 1 auto; min-width: 0; }
.cr-class-row .btn { flex: none; min-height: 44px; }
.cr-class-row .btn svg, .cr-make svg { width: 18px; height: 18px; flex: none; }
.cr-make { align-self: stretch; }
#crDemoClass { align-self: flex-start; }
.cr-list-wrap { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px; background: var(--surface-2); }
.cr-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; }
.cr-list .chip { font-size: 14px; }
/* a details box lays out its content as a block, so the panel's gap does not reach it: the spacing here is margins */
.cr-fold { display: block; }
.cr-fold summary { cursor: pointer; font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cr-fold > :not(summary) { margin-top: 12px; }
.cr-fold > .hist-head + .fine { margin-top: 4px; }
.cr-fold > * + .hist-head { margin-top: 24px; }
.cr-fold > .cr-lock-hint { margin-top: 20px; }
.cr-rule-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cr-rule-add > span { font-weight: 900; color: var(--muted); }
.cr-rule-add .dd { flex: 1 1 120px; min-width: 0; }
.cr-rule-add .dd-btn { width: 100%; justify-content: space-between; }
.cr-rules, .cr-plans { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cr-rules li, .cr-plans li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 10px; border-radius: 12px; background: var(--surface-2); font-weight: 800; font-size: 14px; }
.cr-rules li i { font-style: normal; color: var(--muted); }
.cr-rules li .linkbtn, .cr-plans li .linkbtn { margin-left: auto; font-size: 13px; }
.cr-rules .empty, .cr-plans .empty { background: none; padding-left: 0; color: var(--muted); font-weight: 700; }
.cr-front { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-pick { padding: 5px 12px; border: 2px dashed var(--border-strong); border-radius: 999px; background: none; color: var(--fg); font-weight: 800; font-size: 13px; cursor: pointer; }
.ts-pick[aria-pressed="true"] { border-style: solid; border-color: var(--fox); background: var(--fox); color: var(--on-fox); }
.plan { display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: none; color: var(--fg); text-align: left; cursor: pointer; }
.plan b { font-size: 14px; } .plan span { color: var(--muted); font-size: 12px; font-weight: 700; }
.plan:hover b { text-decoration: underline; }
.plan-acts { display: flex; gap: 2px; margin-left: auto; }
.cr-plans li .plan-acts .linkbtn { margin-left: 0; }
.cr-plans .linkbtn.is-sure { color: var(--danger); }
.plan-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
.plan-form .field { flex: 1 1 150px; min-width: 0; padding: 8px 12px; font-size: 15px; border-radius: 12px; }
.cr-save { padding: 10px; border-radius: 16px; background: var(--surface-2); animation: rise .3s cubic-bezier(.2,.9,.3,1) both; }
.cr-plans li.is-editing { padding: 6px; }
.cr-plans li.is-fresh { animation: planIn 1.2s ease-out; }
@keyframes planIn { from { background: color-mix(in srgb, var(--teal) 35%, var(--surface-2)); } }
.hist-head .linkbtn { font-size: 13px; }

/* ---------- presenting and printing ---------- */
.cr-present-title { display: none; margin: 0; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(26px, 4vh, 48px); }
body.presenting { overflow: hidden; }
body.presenting :is(.top, .cr-bar, .cr-side, .foot) { display: none; }
body.presenting .cr-main { display: block; max-width: none; }
body.presenting .cr-present-title { display: block; }
body.presenting .room-wrap { width: min(100%, calc((100vh - 120px) * var(--ar))); width: min(100%, calc((100dvh - 120px) * var(--ar))); }
.cr-exit { position: fixed; top: 14px; right: 14px; z-index: 80; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 999px; background: var(--forest); color: var(--paper); font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: var(--shadow); opacity: 0; transition: opacity .3s; }
.cr-exit svg { width: 18px; height: 18px; }
.cr-exit.is-awake, .cr-exit:focus-visible { opacity: 1; }
@media print {
  @page { size: landscape; margin: 12mm; }
  body { background: #FFFFFF; padding: 0; }
  .sky, .top, .cr-bar, .cr-side, .foot, .toast, .cr-exit, .item-bar, .chip-lock, .cr-picking { display: none !important; }
  .room-pan { overflow: visible !important; padding: 0 !important; margin: 0 !important; }
  .room-wrap { min-width: 0 !important; }
  .seat:not(.is-taken) { visibility: hidden; }
  .cr-main { display: block; max-width: none; }
  .cr-present-title { display: block; color: #143E38; }
  .room-wrap { width: min(100%, calc(170mm * var(--ar))); margin: 0 auto; }
  .room-svg { filter: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 1050px) {
  .cr-modes { margin-inline: 0; }
}
@media (max-width: 900px) {
  .cr-main, body[data-mode="build"] .cr-main { grid-template-columns: minmax(0, 1fr); }
  body[data-mode="build"] .cr-build { order: 2; }
  .room-wrap { width: 100%; }
  .pal-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}
@media (max-width: 600px) {
  .cr-modes { width: 100%; }
  .cr-modes button { flex: 1 1 auto; justify-content: center; padding: 9px 10px; font-size: 14px; }
  .cr-modes svg { display: none; }
}