:root {
  --ink: #1a1a1a;
  --muted: #666;
  --line: #444;
  --fixture: #e6e2d8;
  --wall: #999;
  --open: #e8f5e9;
  --open-line: #2e7d32;
  --seat-col: minmax(40px, 1fr);
  --edge-col: 22px;
  --seat-row: 44px;
  --gap-row: 12px;
  --name-size: 11px;
  --id-size: 9px;
}

* { box-sizing: border-box; }

@media screen { .print-only { display: none; } }

body {
  margin: 0;
  padding: 16px;
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  color: var(--ink);
  background: #fff;
}

header, footer { max-width: 1200px; margin: 0 auto; text-align: center; }
h1 { margin: 0 0 6px; font-size: 26px; }
header p { margin: 4px 0; }
#status { color: #b00020; min-height: 1.2em; }
footer { margin-top: 12px; font-size: 13px; line-height: 1.35; max-width: 900px; }

#chart-scroll { overflow-x: auto; }
#chart {
  display: grid;
  gap: 2px;
  min-width: 1000px;
  max-width: 1200px;
  margin: 0 auto;
}

.feature {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--name-size);
  font-weight: bold;
  overflow: hidden;
}
.feature.fixture { background: var(--fixture); border: 1px solid var(--line); }
.feature.edge { font-size: var(--id-size); }
.feature.vertical { writing-mode: vertical-rl; }
.feature.wall { background: var(--wall); }
.feature.wall.vertical { justify-self: center; width: 25%; }
.feature.wall:not(.vertical) { align-self: center; height: max(3px, 25%); }
.feature.room { background: repeating-linear-gradient(45deg, #fff 0 4px, #ddd 4px 6px); border: 1px solid var(--line); }

.seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 1px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  color: inherit;
  text-align: center;
  overflow: hidden;
}
/* Light divider at each seat boundary inside a box that covers several seats. */
.seat.taken {
  background-image: linear-gradient(to right, transparent calc(100% - 1px), #c8c8c8 calc(100% - 1px));
  background-size: calc(100% / var(--seats, 1)) 100%;
  background-repeat: repeat-x;
}
.seat.taken .seat-id { display: none; }
.seat-id { font-size: var(--id-size); color: var(--muted); line-height: 1; }
.seat-name { font-size: calc(var(--name-size) * var(--fit, 1)); font-weight: bold; line-height: 1.05; overflow-wrap: anywhere; }
.seat.open { background: var(--open); border: 1px dashed var(--open-line); cursor: pointer; }
.seat.open:hover, .seat.open:focus-visible { background: #c8e6c9; outline: 2px solid var(--open-line); }

dialog { border: 1px solid var(--line); border-radius: 6px; padding: 16px 20px; max-width: calc(100vw - 32px); }
dialog h2 { margin: 0 0 12px; font-size: 20px; }
dialog label { display: block; margin-bottom: 4px; }
dialog input { width: 22em; max-width: 100%; padding: 6px; font: inherit; font-size: 16px; }
#claim-error { color: #b00020; min-height: 1.2em; margin: 8px 0; }
.actions { display: flex; gap: 8px; justify-content: flex-end; }
.actions button { padding: 6px 14px; font: inherit; font-size: 15px; }

@page { size: letter landscape; margin: 0.3in; }

@media print {
  :root {
    --seat-col: 1fr;
    --edge-col: 13pt;
    --seat-row: 24pt;
    --gap-row: 4.5pt;
    --name-size: 6.8pt;
    --id-size: 5pt;
    --open: #fff;
    --open-line: #999;
  }
  body { padding: 0; }
  .screen-only { display: none; }
  h1 { font-size: 16pt; margin-bottom: 4pt; }
  #chart-scroll { overflow: visible; }
  #chart { min-width: 0; max-width: none; width: 100%; gap: 1pt; }
  .feature.fixture { background: #eee; }
  footer { margin-top: 6pt; font-size: 7.5pt; line-height: 1.25; max-width: none; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}