[hidden] {
  display: none !important;
}

.board-page {
  height: 100vh;
  overflow: hidden;
  background: var(--color-neutral-900);
  color: var(--color-bg);
}

.board-page::before {
  position: fixed;
  top: -260px;
  left: -160px;
  z-index: 0;
  width: 760px;
  height: 760px;
  border-radius: 52% 48% 42% 58%;
  background: radial-gradient(
    circle at 45% 40%,
    var(--color-accent-800),
    transparent 68%
  );
  content: "";
  opacity: 0.55;
  pointer-events: none;
}

/* The wall is drawn at 1920x1080. On a smaller screen (a 1366x768 TV, a
   laptop preview) the board is laid out at the scaled-up size and drawn
   smaller, so every row still fits. `--board-scale` is set by
   `board-organic.js` and is never above 1. */
.board-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: calc(100% / var(--board-scale, 1));
  height: calc(100% / var(--board-scale, 1));
  transform: scale(var(--board-scale, 1));
  transform-origin: 0 0;
  /* The artboard's three row gaps differ (36px above the columns, 28px above
     the footer), so they are margins on the rows rather than one grid gap. */
  padding: 44px 56px 36px;
}

.board-head {
  display: flex;
  gap: 28px;
  align-items: baseline;
  min-width: 0;
}

.board-head h1,
.board-head p,
.board-ready-head h2,
.board-ready-head p,
.board-panel > h2,
.board-orders h3,
.board-orders p,
.board-pickup-note,
.board-info p {
  margin: 0;
}

.board-head h1 {
  flex: none;
  color: var(--color-bg);
  font-size: 52px;
  line-height: 1;
}

.board-event-name {
  overflow: hidden;
  color: var(--color-accent-300);
  font-size: 19px;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.board-stalls {
  overflow: hidden;
  margin-left: auto !important;
  color: color-mix(in srgb, var(--color-bg) 72%, transparent);
  font-size: 24px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 40px;
  min-height: 0;
  margin-top: 36px;
}

.board-panel {
  display: grid;
  min-width: 0;
  min-height: 0;
  border-radius: 32px;
}

.board-in-progress {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 26px;
  padding: 32px 36px;
  background: color-mix(in srgb, var(--color-bg) 8%, transparent);
}

.board-in-progress > h2 {
  color: color-mix(in srgb, var(--color-bg) 70%, transparent);
  font-size: 34px;
}

.board-ready {
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 32px 40px;
  background: var(--color-bg);
  color: var(--color-text);
}

.board-ready-head {
  display: flex;
  gap: 24px;
  align-items: baseline;
  justify-content: space-between;
}

.board-ready-head h2 {
  font-size: 38px;
}

/*
 * The rotation marker: which page is up, and that another is coming.
 *
 * That another page is coming, and how often, is the status line's sentence.
 * The artboard keeps this slot to the page number alone; min-height holds the
 * row open so the Ready heading does not shift when a single page needs none.
 */
.board-pages {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  min-height: 1.55em;
  color: var(--color-accent-700);
  font-size: 22px;
  text-align: right;
}

.board-pages-count {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.board-orders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  min-width: 0;
  min-height: 0;
}

.board-in-progress .board-orders {
  gap: 28px 32px;
}

.board-orders section {
  min-width: 0;
}

/* A Stall's numbers sit in their own grid, so the gap between them (10px) is
   independent of the air under the Stall heading (14px). */
.board-group-orders {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.board-orders h3 {
  overflow: hidden;
  margin: 0 0 14px;
  color: var(--color-accent-300);
  font-size: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-orders span {
  display: flex;
  gap: 16px;
  align-items: baseline;
  min-width: 0;
}

.board-orders b {
  color: color-mix(in srgb, var(--color-bg) 78%, transparent);
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: var(--font-heading-weight);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}

.board-ready .board-orders {
  overflow: hidden;
  gap: 28px 40px;
  margin-top: 26px;
}

.board-ready .board-group-orders {
  gap: 16px;
}

.board-ready .board-orders h3 {
  margin-bottom: 16px;
  color: var(--color-accent-700);
  font-size: 26px;
}

.board-ready .board-orders b {
  color: var(--color-text);
  font-size: var(--ready-size, 76px);
  line-height: 1;
}

.board-ready .board-orders small {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 24px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-empty {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--color-bg) 62%, transparent);
  font-size: 26px;
}

.board-ready .board-empty {
  color: var(--color-text-muted);
}

/* 11a pins the instruction to the foot of the card. */
.board-pickup-note {
  align-self: end;
  margin-top: 24px;
  color: var(--color-text-muted);
  font-size: 22px;
}

.board-info {
  display: flex;
  gap: 32px;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
  margin-top: 28px;
}

.board-status {
  overflow: hidden;
  color: color-mix(in srgb, var(--color-bg) 78%, transparent);
  font-size: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-freshness {
  flex: none;
  color: var(--color-accent-300);
  font-size: 22px;
  white-space: nowrap;
}

.board-page.board-loading .board-columns,
.board-page.board-no-open .board-columns,
.board-page.board-outage .board-columns,
.board-page.board-closed .board-columns {
  display: none;
}

/* The fallback the artboard draws is one stack centred on the screen — board
   name, the sentence, the freshness line — not a name pinned to the top with
   the sentence centred under it. It also carries no blob: nothing decorates a
   screen whose whole message is that it has nothing to say. */
.board-page.board-loading::before,
.board-page.board-no-open::before,
.board-page.board-outage::before,
.board-page.board-closed::before {
  display: none;
}

.board-page.board-loading .board-main,
.board-page.board-no-open .board-main,
.board-page.board-outage .board-main,
.board-page.board-closed .board-main {
  grid-template-rows: none;
  grid-auto-rows: min-content;
  align-content: center;
  padding: 44px 96px 36px;
}

.board-page.board-loading .board-info,
.board-page.board-no-open .board-info,
.board-page.board-outage .board-info,
.board-page.board-closed .board-info {
  display: grid;
  gap: 48px;
  justify-content: start;
  margin-top: 24px;
}

.board-page.board-loading .board-event-name,
.board-page.board-loading .board-stalls,
.board-page.board-no-open .board-event-name,
.board-page.board-no-open .board-stalls,
.board-page.board-outage .board-event-name,
.board-page.board-outage .board-stalls {
  display: none;
}

.board-page.board-loading .board-head h1,
.board-page.board-no-open .board-head h1,
.board-page.board-outage .board-head h1 {
  color: var(--color-accent-300);
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.board-page.board-loading .board-status,
.board-page.board-no-open .board-status,
.board-page.board-outage .board-status,
.board-page.board-closed .board-status {
  max-width: 18ch;
  overflow: visible;
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-size: 112px;
  line-height: 1.1;
  text-overflow: initial;
  white-space: normal;
}

.board-page.board-loading .board-freshness,
.board-page.board-no-open .board-freshness {
  display: none;
}

.board-page.board-outage .board-freshness,
.board-page.board-closed .board-freshness {
  color: var(--color-accent-300);
  font-size: 30px;
}

.board-page.board-closed .board-status {
  font-size: 76px;
}

/* Motion. A newly Ready order settles in with the system's arrival
 * (`.motion-arrive`, organic-system.css); the ring it fades needs room and a
 * rounded edge to read as a highlight rather than a box; the negative margin
 * keeps that room from moving the row. A rotated page eases in. */
.board-orders span.motion-arrive {
  margin: -6px -10px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
}

@media (prefers-reduced-motion: no-preference) {
  .board-turn {
    animation: motion-arrive var(--motion-base) var(--ease-out) both;
  }
}