/* The Zal map: a calm floor plan where every seat reads at a glance. */
.zal-canvas {
  --present: #1f8a4c; --present-bg: #e3f6ea; --present-line: #9fd9b4;
  --late: #a86500; --late-bg: #fff3d6; --late-line: #f1cf86;
  --absent: #c2362a; --absent-bg: #fde8e4; --absent-line: #f2b1a7;
  --seat-ink: #2d3744;
  position: relative; margin: 0 auto; aspect-ratio: 2338 / 1700; container-type: normal;
  border-radius: 22px;
  background:
    radial-gradient(circle at 1px 1px, #d9dfe7 1px, transparent 1.4px) 0 0 / calc(22px * var(--zoom, 1)) calc(22px * var(--zoom, 1)),
    linear-gradient(#fbfcfd, #f6f8fb);
  box-shadow: 0 1px 2px #17202e14, 0 18px 50px #17202e14;
  font-size: calc(10.5px * var(--zoom, 1));
  user-select: none; -webkit-user-select: none;
}
.zal-canvas .room-walls path { fill: none; stroke: #c3cbd6; stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }
.zal-canvas .room-walls path:first-child { fill: #fff; fill-opacity: .55; }
.zal-canvas .room-label { position: absolute; color: #9aa5b2; font: 700 calc(9px * var(--zoom, 1)) / 1 Inter, sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.zal-canvas .room-label.front { right: 1.4%; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }
.zal-canvas .room-label.entrance { left: 8.5%; top: 50%; transform: translate(-50%, -50%); writing-mode: vertical-rl; }

/* Tables and fixtures */
.zal-canvas .zal-table {
  position: absolute; z-index: 2; display: flex; flex-direction: column; gap: calc(3px * var(--zoom, 1));
  padding: calc(4px * var(--zoom, 1)); border: 0; border-radius: calc(9px * var(--zoom, 1));
  box-shadow: 0 1px 0 #ffffff80 inset, 0 2px 6px #4a3a1f1f;
}
.zal-canvas .zal-table.wooden { background: linear-gradient(160deg, #ead9bd, #dcc49f); }
.zal-canvas .zal-table.plastic { background: linear-gradient(160deg, #e6ebf2, #d5dde8); box-shadow: 0 1px 0 #fff inset, 0 2px 6px #1f2a3a1a; }
/* Seat 1 sat at the top of each table on the drawing; seen from the Bima it is on the right. */
.zal-canvas .zal-table.across { flex-direction: row-reverse; }
.zal-canvas .zal-table.square { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.zal-canvas .zal-table.square .zal-seat:first-child { grid-column: 2; grid-row: 1 / -1; }
.zal-canvas .zal-table.square .zal-seat:nth-child(2) { grid-column: 1; grid-row: 1; }
.zal-canvas .zal-table.square .zal-seat:nth-child(3) { grid-column: 1; grid-row: 2; }
.zal-canvas .zal-staff, .zal-canvas .zal-bima, .zal-canvas .zal-fixture {
  position: absolute; z-index: 1; display: grid; place-items: center; border-radius: calc(10px * var(--zoom, 1));
  border: 1.5px dashed #c3cbd6; background: #f3f5f8; color: #8994a2;
  font: 600 calc(9px * var(--zoom, 1)) / 1 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.zal-canvas .zal-bima { border: 0; background: linear-gradient(160deg, #e3e8f5, #d6ddf0); color: #4e5d86; font-size: calc(11px * var(--zoom, 1)); box-shadow: 0 2px 8px #2b3a6a1f; }
.zal-canvas .zal-fixture { border-style: solid; background: #eef1f5; }

/* Seats */
.zal-canvas .zal-seat {
  position: relative; flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: .95em 2px 1px; border: 0; border-radius: calc(6px * var(--zoom, 1)); background: #fff; color: var(--seat-ink);
  box-shadow: 0 1px 1px #17202e14; font: inherit; line-height: 1.1; text-align: center; cursor: pointer; overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease, background-color .2s ease, opacity .2s ease;
  touch-action: manipulation;
}
.zal-canvas .zal-seat:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 3px 10px #17202e24; z-index: 3; }
.zal-canvas .zal-seat:focus-visible { outline: 2px solid var(--blue, #1667d9); outline-offset: 1px; z-index: 4; }
.zal-canvas .seat-first, .zal-canvas .seat-last { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zal-canvas .seat-first { font-weight: 700; font-size: 1em; letter-spacing: -.025em; }
.zal-canvas .seat-last { font-size: .86em; opacity: .72; }
.zal-canvas .seat-num { color: #b2bac5; font-size: .9em; font-weight: 600; }
.zal-canvas .seat-badge {
  position: absolute; top: calc(2px * var(--zoom, 1)); right: calc(2px * var(--zoom, 1)); min-width: 1.3em; height: 1.3em; padding: 0 .22em;
  display: grid; place-items: center; border-radius: 999px; font-size: .7em; font-weight: 800; line-height: 1; color: #fff; box-shadow: 0 0 0 1.5px #fff;
}
.zal-canvas .seat-more { position: absolute; bottom: 2px; right: 3px; font-size: .75em; font-weight: 700; opacity: .7; }

.zal-canvas .zal-seat.unmarked { background: #fff; box-shadow: inset 0 0 0 1.5px #b9c4d2; }
.zal-canvas .zal-seat.unmarked::after { content: ""; position: absolute; top: 4px; right: 4px; width: .5em; height: .5em; border-radius: 50%; background: #8fa0b5; }
.zal-canvas .zal-seat.present { background: var(--present-bg); color: #135c33; box-shadow: inset 0 0 0 1px var(--present-line); }
.zal-canvas .zal-seat.present .seat-badge { background: var(--present); }
.zal-canvas .zal-seat.late { background: var(--late-bg); color: #6e4300; box-shadow: inset 0 0 0 1px var(--late-line); }
.zal-canvas .zal-seat.late .seat-badge { background: #d98a10; }
.zal-canvas .zal-seat.absent { background: var(--absent-bg); color: #8a2219; box-shadow: inset 0 0 0 1px var(--absent-line); }
.zal-canvas .zal-seat.absent .seat-badge { background: var(--absent); }
.zal-canvas .zal-seat.mixed { background: linear-gradient(135deg, var(--present-bg) 50%, var(--late-bg) 50%); }
.zal-canvas .zal-seat.empty, .zal-canvas .zal-seat:not(:has(.seat-badge)):not(.unmarked) { padding-top: 1px; }
.zal-canvas .zal-seat.empty { background: #ffffff8c; box-shadow: inset 0 0 0 1px #ffffffb3; cursor: default; }
.zal-canvas .zal-seat.empty:hover { transform: none; box-shadow: inset 0 0 0 1px #ffffffb3; }
.zal-canvas.editing .zal-seat.empty { cursor: pointer; box-shadow: inset 0 0 0 1.5px #9fb3cf; background: #fff; }
.zal-canvas.editing .zal-seat.empty .seat-num::before { content: "+ "; }
.zal-canvas .zal-seat.taken { background: repeating-linear-gradient(135deg, #f1f3f6 0 4px, #e4e8ee 4px 8px); cursor: not-allowed; box-shadow: none; }
.zal-canvas .zal-seat.dirty::before { content: ""; position: absolute; left: 3px; top: 3px; width: .55em; height: .55em; border-radius: 50%; background: var(--blue, #1667d9); box-shadow: 0 0 0 2px #fff; }
.zal-canvas .zal-seat.dim { opacity: .22; }
.zal-canvas .zal-seat.search-match { opacity: 1; z-index: 5; box-shadow: 0 0 0 3px var(--blue, #1667d9), 0 6px 18px #1667d955; animation: seat-glow 1.6s ease-in-out infinite; }
.zal-canvas .zal-seat.just-marked { animation: seat-pop .45s cubic-bezier(.2, .9, .3, 1.4); z-index: 4; }
.zal-canvas .zal-seat.just-marked .seat-badge { animation: badge-in .4s cubic-bezier(.2, .9, .3, 1.6); }
.zal-canvas.editing .zal-seat[data-member] { cursor: grab; touch-action: none; }
.zal-seat.drag-source { opacity: .35; }
.zal-canvas .zal-seat.drop-target, [data-drop].drop-target { box-shadow: 0 0 0 3px var(--blue, #1667d9), 0 0 0 7px #1667d92e !important; transform: scale(1.04); }
.zal-ghost { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; display: flex; flex-direction: column; justify-content: center; align-items: center;
  border-radius: 9px; background: #fff; color: #2d3744; font: 600 12px/1.2 Inter, sans-serif; box-shadow: 0 14px 34px #17202e40; opacity: .95; border: 0; }
.zal-ghost .seat-badge, .zal-ghost::before, .zal-ghost::after { display: none; }
body.zal-dragging, body.zal-dragging * { cursor: grabbing !important; }

@keyframes seat-pop { 0% { transform: scale(.9); } 55% { transform: scale(1.1); box-shadow: 0 0 0 6px #ffffff00, 0 6px 16px #17202e2e; } 100% { transform: none; } }
@keyframes badge-in { from { transform: scale(0) rotate(-40deg); } }
@keyframes seat-glow { 50% { box-shadow: 0 0 0 5px var(--blue, #1667d9), 0 8px 22px #1667d966; } }
@media (prefers-reduced-motion: reduce) {
  .zal-canvas .zal-seat, .zal-canvas .zal-seat.just-marked, .zal-canvas .zal-seat.just-marked .seat-badge, .zal-canvas .zal-seat.search-match { animation: none; transition: none; }
}

/* The scroll frame and toolbar around the room */
.map-scroll.zal-frame { position: relative; overflow: auto; max-height: min(80vh, 980px); padding: 18px; background: #e9edf2; overscroll-behavior: contain; touch-action: pan-x pan-y; cursor: grab; }
.map-scroll.zal-frame.panning { cursor: grabbing; }
.zal-toolbar { display: grid; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.zal-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.zal-toolbar-row .spacer { flex: 1; }
.zal-progress { display: grid; gap: 7px; flex: 1 1 320px; min-width: 0; }
.zal-progress-head { display: flex; align-items: baseline; gap: 7px; }
.zal-progress-head strong { font: 700 18px/1 "Space Grotesk", Inter, sans-serif; color: var(--ink); }
.zal-progress-head span { color: var(--muted); font-size: 12.5px; }
.zal-progress-bar { display: flex; height: 8px; overflow: hidden; border-radius: 999px; background: #edf0f4; gap: 2px; }
.zal-progress-bar i { display: block; min-width: 4px; transition: flex-grow .35s ease; }
.zal-progress-bar i.present { background: #2ea05e; } .zal-progress-bar i.late { background: #e3a21b; } .zal-progress-bar i.absent { background: #d6493b; }
.zal-progress-bar i.none { background: repeating-linear-gradient(135deg, #dfe4ea 0 4px, #edf0f4 4px 8px); }
.zal-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.zal-legend-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #dfe4ea; border-radius: 999px; background: #fff; color: #4e5864; font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s; }
.zal-legend-chip:hover { background: #f5f7fa; }
.zal-legend-chip b { color: var(--ink); font-variant-numeric: tabular-nums; }
.zal-legend-chip .dot { width: 9px; height: 9px; border-radius: 50%; }
.zal-legend-chip.present .dot { background: #2ea05e; } .zal-legend-chip.late .dot { background: #e3a21b; } .zal-legend-chip.absent .dot { background: #d6493b; }
.zal-legend-chip.none .dot { background: #fff; box-shadow: inset 0 0 0 2px #8fa0b5; }
.zal-legend-chip[aria-pressed=true] { border-color: #1667d9; background: #e8f1fd; color: #0f4fa8; }

.zal-brush { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border-radius: 12px; background: #eef1f5; }
.zal-brush > span { padding: 0 6px 0 8px; color: #6b7684; font-size: 11.5px; font-weight: 600; }
.zal-brush button { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 6px 11px; border: 0; border-radius: 9px; background: transparent; color: #4e5864; font-size: 12.5px; font-weight: 650; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; }
.zal-brush button i { width: 10px; height: 10px; border-radius: 50%; font-style: normal; }
.zal-brush button[data-brush=present] i { background: #2ea05e; } .zal-brush button[data-brush=late] i { background: #e3a21b; } .zal-brush button[data-brush=absent] i { background: #d6493b; }
.zal-brush button[data-brush=ask] i { background: #fff; box-shadow: inset 0 0 0 2px #8fa0b5; }
.zal-brush button[aria-pressed=true] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px #17202e26; }
.zal-brush button[aria-pressed=true][data-brush=present] { color: #135c33; } .zal-brush button[aria-pressed=true][data-brush=late] { color: #6e4300; } .zal-brush button[aria-pressed=true][data-brush=absent] { color: #8a2219; }
.zal-zoom { display: inline-flex; align-items: center; gap: 4px; }
.zal-zoom button { min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid #d5dae0; border-radius: 9px; background: #fff; color: #4e5864; font-size: 13px; font-weight: 650; cursor: pointer; }
.zal-zoom button:hover { background: #f3f5f8; }
.zal-rest { min-height: 34px; padding: 6px 12px; border: 1px solid #a9d8bb; border-radius: 9px; background: #effaf3; color: #135c33; font-size: 12.5px; font-weight: 650; cursor: pointer; }
.zal-rest:hover { background: #e1f5e8; }
.zal-rest:disabled { opacity: .5; cursor: default; }
.zal-hint { margin: 0; color: var(--muted); font-size: 12px; }

/* Outside the Zal / unseated tray as a drop zone */
.outside-panel[data-drop], .outside-panel .outside-list { transition: box-shadow .15s, background-color .15s; }
.outside-panel[data-drop].drop-target { background: #f3f8ff; }
.outside-list button { cursor: pointer; }
.zal-canvas-tray { display: flex; flex-wrap: wrap; gap: 6px; }
.zal-canvas-tray button { touch-action: none; cursor: grab; }

@media (max-width: 700px) {
  .map-scroll.zal-frame { max-height: 70vh; padding: 10px; }
  .zal-toolbar { padding: 12px; }
  .zal-brush { width: 100%; justify-content: space-between; }
  .zal-brush > span { display: none; }
  .zal-brush button { flex: 1; justify-content: center; padding: 6px 4px; }
}

/* Zal map view: the map comes first, follow-ups after it. */
#workspace.zal-mode:not([hidden]) { display: flex; flex-direction: column; }
#workspace.zal-mode > * { order: 3; }
#workspace.zal-mode > .session-heading { order: 0; }
#workspace.zal-mode > .work-toolbar, #workspace.zal-mode > #error { order: 1; }
#workspace.zal-mode > #map-view, #workspace.zal-mode > #list-view { order: 2; margin-bottom: 26px; }
#workspace.zal-mode > .stat-grid { display: none; }

/* People outside the Zal carry the same status colors as seats. */
.outside-list .outside-person { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.outside-list .outside-person::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #b9c2cc; }
.outside-list .outside-person.present { background: #e7f4ea; border-color: #b9dfc3; color: #1f6b3a; }
.outside-list .outside-person.present::before { background: #2e9c55; }
.outside-list .outside-person.late { background: #fff4dc; border-color: #f1d79a; color: #8a5a00; }
.outside-list .outside-person.late::before { background: #e0a21b; }
.outside-list .outside-person.absent { background: #fdeae6; border-color: #f2c0b6; color: #a33a26; }
.outside-list .outside-person.absent::before { background: #d9472b; }
.outside-panel > div:first-child { flex: 0 0 190px; }

/* A tall, steady frame that starts by showing the whole room; full screen on demand. */
.map-scroll.zal-frame { height: min(78vh, 980px); max-height: none; scrollbar-width: auto; scrollbar-color: #b9c3cf #e9edf2; }
.map-scroll.zal-frame:focus-visible { outline: 2px solid #1667d9; outline-offset: -2px; }
.zal-full-btn { font-size: 15px; }
.map-workspace.zal-full, .seat-map-card.zal-full { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; margin: 0; border-radius: 0; background: #fff; }
.zal-full .map-scroll.zal-frame { flex: 1; height: auto; max-height: none; }
.zal-full .outside-panel, .zal-full .chart-bar, .zal-full .map-help, .zal-full .zal-progress-bar, .zal-full #unseated-panel { display: none; }
.zal-full .seat-outside { flex: none; }
.zal-full .zal-toolbar { padding: 8px 12px; gap: 8px; }
body.zal-full-open { overflow: hidden; }
body.zal-full-open .ask-fab { display: none; }
@media (max-width: 700px) { .map-scroll.zal-frame { height: 64vh; } }

/* On the page the map is part of the page: it fits the card's width and grows in
   height, so the page scrolls normally. Zooming in only adds sideways scrolling.
   Full screen keeps its own scrolling. */
.map-scroll.zal-frame { height: auto; max-height: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior: auto; touch-action: auto; }
.zal-full .map-scroll.zal-frame { overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; }
@media (max-width: 700px) { .map-scroll.zal-frame { height: auto; } }
/* Seat changes: Save and Undo right above the map. */
.chart-bar { border-top: 0; border-bottom: 1px solid var(--line); }
.chart-bar .chart-actions { display: flex; gap: 8px; }
.chart-bar.dirty { background: #fff8e8; color: #7a5200; }
.chart-bar.dirty #chart-state::before { content: "Seats moved — not saved yet · "; font-weight: 700; }
.zal-full .chart-bar { display: flex !important; }
.zal-brush button[data-brush=excused] i { background: #f3c4cf; box-shadow: inset 0 0 0 2px #d6493b; }
@media (max-width: 760px) { .zal-brush { flex-wrap: wrap; } }