/* Seating Chart Maker. The floor is a 2:1 size container; desks sit at
   fractions of it (--x, --y) and are sized from it (--dw, --dh), so the
   plan scales from a laptop to a projector to a printed page. */

.sc {
  --sc-floor: #f6f2ea;
  --sc-grid: rgba(110, 85, 45, .075);
  --sc-wall: #d3cabb;
  --sc-wood: #f0d3a3;
  --sc-wood-2: #e2b97c;
  --sc-edge: #b17f45;
  --sc-ink: #3a2610;
  --sc-chair: #8299b0;
  --sc-chair-edge: #5c7089;
  --sc-empty: #f4eee4;
  --sc-empty-edge: #cbbca4;
  --sc-empty-ink: #a08d70;
  --sc-teacher: #b9814a;
  --sc-teacher-2: #9d6a37;
  --sc-teacher-edge: #6e4721;
  --sc-board-frame: #8c98a6;
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: clamp(6px, 1.6cqmin, 20px) clamp(6px, 1.6cqmin, 20px) calc(clamp(36px, 8.4cqmin, 84px) + 2 * clamp(8px, 2.6cqmin, 28px));
}
:root[data-theme="dark"] .sc {
  --sc-floor: #1b2430;
  --sc-grid: rgba(255, 255, 255, .045);
  --sc-wall: #3a4757;
  --sc-wood: #dcb57d;
  --sc-wood-2: #c99d5f;
  --sc-edge: #85602f;
  --sc-chair: #5f7790;
  --sc-chair-edge: #3e5066;
  --sc-empty: #2a3340;
  --sc-empty-edge: #4f5d6f;
  --sc-empty-ink: #8d9aab;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sc {
    --sc-floor: #1b2430;
    --sc-grid: rgba(255, 255, 255, .045);
    --sc-wall: #3a4757;
    --sc-wood: #dcb57d;
    --sc-wood-2: #c99d5f;
    --sc-edge: #85602f;
    --sc-chair: #5f7790;
    --sc-chair-edge: #3e5066;
    --sc-empty: #2a3340;
    --sc-empty-edge: #4f5d6f;
    --sc-empty-ink: #8d9aab;
  }
}

/* ---- the room ---- */
.sc-room { flex: 1 1 auto; min-height: 0; container-type: size; display: grid; place-items: center; }
.sc-floor {
  position: relative; width: min(100cqw, 200cqh); aspect-ratio: 2 / 1; container-type: size;
  border-radius: 1.4cqh; background-color: var(--sc-floor);
  background-image: linear-gradient(var(--sc-grid) 1px, transparent 1px), linear-gradient(90deg, var(--sc-grid) 1px, transparent 1px);
  background-size: calc(100% / 16) calc(100% / 8); background-position: -1px -1px;
  box-shadow: inset 0 0 0 .9cqh var(--sc-wall), 0 .8cqh 2cqh rgba(16, 24, 40, .1);
  transition: transform .8s cubic-bezier(.6, 0, .25, 1);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.sc-floor.is-flipped { transform: rotate(180deg); }
.sc-desks { position: absolute; inset: 0; }

/* The front wall: a whiteboard and a label. */
.sc-front {
  position: absolute; left: 50%; top: 1.4%; translate: -50% 0; width: 42%;
  display: flex; flex-direction: column; align-items: center; gap: 1.4cqh; pointer-events: none;
}
.sc-board {
  width: 100%; height: 3.4cqh; border-radius: .7cqh;
  background: linear-gradient(180deg, #ffffff, #e9eef3);
  box-shadow: inset 0 0 0 .55cqh var(--sc-board-frame), 0 .55cqh 0 #6d7885, 0 1.2cqh 1.4cqh -.4cqh rgba(0, 0, 0, .3);
}
.sc-front-label {
  font: 700 2.7cqh/1 var(--font-display); text-transform: uppercase; letter-spacing: .16em; white-space: nowrap;
  color: color-mix(in srgb, var(--stage-ink) 50%, transparent);
  transition: transform .8s cubic-bezier(.6, 0, .25, 1);
}

/* ---- desks: a wooden top with a visible edge, a soft shadow and a chair ---- */
.sc-desk, .sc-teacher {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%);
  width: calc(var(--dw) * 100%); height: calc(var(--dh) * 100%);
  translate: -50% -50%; margin: 0; padding: 0; border: 0; background: none; color: var(--sc-ink);
  font: inherit; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent;
  transition: left .55s cubic-bezier(.3, .7, .2, 1), top .55s cubic-bezier(.3, .7, .2, 1), scale .15s;
}
.sc-teacher { width: 11%; height: 9%; z-index: 1; }
.sc-top {
  position: absolute; inset: 0; border-radius: 1cqh;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 48%),
    repeating-linear-gradient(90deg, rgba(130, 80, 25, .07) 0 .25cqw, transparent .25cqw 1.1cqw),
    linear-gradient(135deg, var(--sc-wood), var(--sc-wood-2));
  box-shadow: inset 0 .3cqh 0 rgba(255, 255, 255, .55), 0 .75cqh 0 var(--sc-edge), 0 1.8cqh 2cqh -.5cqh rgba(40, 25, 5, .38);
  transition: box-shadow .8s, filter .15s;
}
.sc-floor.is-flipped .sc-top {
  box-shadow: inset 0 -.3cqh 0 rgba(255, 255, 255, .55), 0 -.75cqh 0 var(--sc-edge), 0 -1.8cqh 2cqh -.5cqh rgba(40, 25, 5, .38);
}
.sc-teacher .sc-top {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 48%),
    repeating-linear-gradient(90deg, rgba(60, 30, 5, .09) 0 .3cqw, transparent .3cqw 1.3cqw),
    linear-gradient(135deg, var(--sc-teacher), var(--sc-teacher-2));
  box-shadow: inset 0 .3cqh 0 rgba(255, 255, 255, .35), 0 .9cqh 0 var(--sc-teacher-edge), 0 2cqh 2.2cqh -.5cqh rgba(40, 25, 5, .42);
}
.sc-floor.is-flipped .sc-teacher .sc-top {
  box-shadow: inset 0 -.3cqh 0 rgba(255, 255, 255, .35), 0 -.9cqh 0 var(--sc-teacher-edge), 0 -2cqh 2.2cqh -.5cqh rgba(40, 25, 5, .42);
}

.sc-chair {
  position: absolute; left: 50%; top: calc(100% + 1.1cqh); translate: -50% 0;
  width: 46%; height: 42%; border-radius: .5cqh .5cqh 1.3cqh 1.3cqh;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sc-chair) 78%, white), var(--sc-chair));
  box-shadow: 0 .45cqh 0 var(--sc-chair-edge), 0 1cqh 1.2cqh -.4cqh rgba(0, 0, 0, .3);
}
[data-f="180"] > .sc-chair { top: auto; bottom: calc(100% + .5cqh); border-radius: 1.3cqh 1.3cqh .5cqh .5cqh; }
[data-f="90"] > .sc-chair { left: auto; right: calc(100% + .6cqh); top: 50%; translate: 0 -50%; width: 25%; height: 70%; border-radius: 1.3cqh .5cqh .5cqh 1.3cqh; }
[data-f="270"] > .sc-chair { left: calc(100% + .6cqh); top: 50%; translate: 0 -50%; width: 25%; height: 70%; border-radius: .5cqh 1.3cqh 1.3cqh .5cqh; }
.sc-teacher > .sc-chair { width: 30%; height: 38%; }

.sc-label {
  position: absolute; inset: 4% 5%; display: grid; place-items: center; pointer-events: none;
  transition: transform .8s cubic-bezier(.6, 0, .25, 1);
}
/* Turned the other way from the floor, at the same pace, so names stay upright throughout. */
.sc-floor.is-flipped .sc-label, .sc-floor.is-flipped .sc-front-label { transform: rotate(-180deg); }
.sc-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  max-width: 100%; text-align: center; overflow-wrap: anywhere;
  font: 650 calc(var(--dw) * 15.5cqw)/1.08 var(--font-display); color: var(--sc-ink);
}
.sc-desk.is-long .sc-name { font-size: calc(var(--dw) * 13cqw); }
.sc-desk.is-xlong .sc-name { font-size: calc(var(--dw) * 11.5cqw); }
.sc-teacher .sc-name { font-size: 1.55cqw; font-weight: 700; color: #fff8ec; letter-spacing: .02em; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }

.sc-desk.is-empty .sc-top {
  background: var(--sc-empty); border: .3cqh dashed var(--sc-empty-edge);
  box-shadow: 0 .5cqh 0 color-mix(in srgb, var(--sc-empty-edge) 55%, transparent);
}
.sc-floor.is-flipped .sc-desk.is-empty .sc-top { box-shadow: 0 -.5cqh 0 color-mix(in srgb, var(--sc-empty-edge) 55%, transparent); }
.sc-desk.is-empty .sc-name { color: var(--sc-empty-ink); font-weight: 500; font-size: calc(var(--dw) * 12cqw); }
.sc-desk.is-empty .sc-chair { opacity: .5; }

/* ---- states ---- */
.sc-desk:hover .sc-top, .sc-teacher:hover .sc-top { filter: brightness(1.05); }
.sc-desk:focus-visible, .sc-teacher:focus-visible { outline: none; }
.sc-desk:focus-visible .sc-top, .sc-teacher:focus-visible .sc-top { outline: .5cqh solid color-mix(in srgb, var(--cat) 70%, transparent); outline-offset: .4cqh; }
.sc-desk.is-selected { z-index: 5; }
.sc-desk.is-selected .sc-top { outline: .7cqh solid var(--cat); outline-offset: .45cqh; }
.sc-desk.is-target { z-index: 4; scale: 1.08; }
.sc-desk.is-target .sc-top { outline: .55cqh dashed var(--cat); outline-offset: .45cqh; filter: brightness(1.07); }
.sc-desk.is-dragging, .sc-teacher.is-dragging { z-index: 30; transition: none; cursor: grabbing; scale: 1.06; }
.sc-desk.is-dragging .sc-top { box-shadow: inset 0 .3cqh 0 rgba(255, 255, 255, .55), 0 .75cqh 0 var(--sc-edge), 0 4cqh 4cqh -.8cqh rgba(0, 0, 0, .4); }
.sc-floor.is-locked .sc-desk.is-dragging { scale: 1; }
.sc-floor.is-locked .sc-desk.is-dragging .sc-name { position: relative; z-index: 2; }
.sc-floor.is-locked .sc-teacher { cursor: default; }
.sc-desk.is-flying { z-index: 20; }

/* ---- overlays ---- */
.sc-hint { pointer-events: none; font-size: clamp(12px, 3cqmin, 30px); }
.sc-unseated {
  position: absolute; top: clamp(8px, 2.2cqmin, 26px); left: clamp(8px, 2.2cqmin, 26px); z-index: 6;
  max-width: 46%; min-height: 36px; padding: .35em .9em; border-radius: 999px; cursor: pointer; text-align: left;
  font: 650 clamp(11px, 2.5cqmin, 24px)/1.25 var(--font-display);
  background: #fff3cd; color: #7a4b00; border: 1px solid #f0c75e; box-shadow: var(--shadow-sm);
}
.sc-unseated:hover { background: #ffe9a8; }
.sc-print-head { display: none; }

.sc-group { display: inline-flex; align-items: center; gap: clamp(4px, 1cqmin, 12px); }
.sc-count { min-width: 5.5em; justify-content: center; }
.sc-alpha { min-width: 0; }

/* The desk count is also in Settings, so it goes first when space runs out. */
@container (max-width: 820px) {
  .sc-count { display: none; }
}
@container (max-width: 640px) {
  .sc-controls .t-btn-primary span { display: none; }
  .sc-controls .t-btn-primary { min-width: 0; width: clamp(36px, 8.4cqmin, 84px); padding: 0; }
}

/* ---- print: the plan, large, with the class and the date ---- */
@media print {
  @page { size: landscape; margin: 10mm; }
  body:has(.sc) .tool-head, body:has(.sc) .breadcrumbs, body:has(.sc) .present-bar { display: none !important; }
  body:has(.sc) .stage {
    height: 182mm !important; min-height: 0 !important; overflow: visible !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important;
  }
  .sc {
    --stage-ink: #18212d;
    --sc-floor: #fbf9f5; --sc-grid: rgba(110, 85, 45, .06); --sc-wall: #b9b0a2;
    --sc-wood: #f0d3a3; --sc-wood-2: #e2b97c; --sc-edge: #b17f45; --sc-ink: #2a1a08;
    --sc-chair: #8299b0; --sc-chair-edge: #5c7089;
    --sc-empty: #f7f3ec; --sc-empty-edge: #c2b298; --sc-empty-ink: #8d7a5d;
    padding: 0; gap: 4mm; color: #18212d;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  .sc-print-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8mm; flex: none; border-bottom: .4mm solid #c9c2b6; padding-bottom: 2mm; }
  .sc-print-title { margin: 0; font: 700 18pt/1.1 var(--font-display); color: #18212d; }
  .sc-print-date { margin: 0; font: 500 11pt/1.2 var(--font); color: #4a5563; }
  .sc-hint, .sc-unseated, .sc-controls { display: none !important; }
  .sc-floor { box-shadow: inset 0 0 0 .9cqh var(--sc-wall); transition: none; }
  .sc-desk, .sc-teacher, .sc-label, .sc-front-label, .sc-top { transition: none !important; }
  .sc-desk.is-selected .sc-top, .sc-desk:focus-visible .sc-top { outline: none; }
}