[hidden] {
  display: none !important;
}

.board-page {
  min-width: 960px;
  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;
}

.board-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  /* 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: color-mix(in srgb, var(--color-text) 55%, transparent);
  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: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.board-pickup-note {
  margin-top: 24px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  font-size: 22px;
}

/* Not drawn on the artboard: the reduced-motion escape hatch, so a Guest who
   has turned rotation off is not stranded on page one. Kept to its own width
   and off to the left so it reads as chrome beside the pickup note rather
   than as a second Order Ready heading. */
.board-next-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-width: 88px;
  min-height: 44px;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-6);
  border: 2px solid var(--color-accent-600);
  border-radius: 999px;
  color: var(--color-neutral-100);
  background: var(--color-accent-600);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.board-next-page[hidden] {
  display: none;
}

/* No :focus-visible rule here: the global one in organic-system.css already
   gives every control the registered 2px/--color-accent/2px ring, and this
   pill does not need its own — design.md forbids restyling states the
   system already builds in. */

.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;
}