/* The office screens (plan 7.6c, ADR 0023). A fixed 3840x1080 document with a
   hard midline at 1920 pixels: Pixilab Blocks shows the left half on one
   screen and the right half on the other. Everything is scoped to the display
   page so the internal, admin and ticket-sales pages are untouched, and the
   palette uses the approved Royal Arena identity without a responsive shell. */

html:has(> body.display-page) { width: 3840px; height: 1080px; overflow: hidden; }

body.display-page {
  --display-header-height: 56px;
  --display-accent: #ffffff;
  --display-accent-text: #000000;
  --display-news: #b42318;
  --display-card: #ffffff;
  --display-line: #c1c5cb;
  --display-text: #222222;
  --display-muted: #59616b;
  --display-event: #eaebee;
  --display-event-border: #59616b;
  --display-tba: #fff7e6;
  --display-tba-border: #8a5a10;
  --display-cancelled: #eaebee;
  --display-weekend: #f2f3f5;
  --display-today: #dde1e6;
  margin: 0;
  width: 3840px;
  height: 1080px;
  overflow: hidden;
  background: #000000;
  color: var(--display-text);
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.display-page * { box-sizing: border-box; }
.display-page .display-frame { display: block; width: 3840px; height: 1080px; }

/* Header: two 1920-pixel halves. Left screen: brand and ticker. Right screen:
   today's event, next event. */
.display-page .display-header {
  display: flex;
  height: var(--display-header-height);
  color: #fff;
  background: #000000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.display-page .display-header-half { display: flex; align-items: center; gap: 40px; width: 1920px; flex: 0 0 1920px; padding: 0 32px; min-width: 0; }
.display-page .display-header-right { justify-content: center; gap: 96px; }
.display-page .display-brand { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; white-space: nowrap; flex-shrink: 0; }
.display-page .display-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 5px;
  background: var(--display-accent);
  color: var(--display-accent-text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.display-page .display-widget { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 18px; font-weight: 500; }
.display-page .display-widget-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 560px; }
.display-page .display-countdown { color: var(--display-accent); font-weight: 700; }

/* Ticker: a marquee whose speed follows the text length (see the helper). */
.display-page .display-ticker { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.display-page .display-ticker-tag { background: var(--display-news); color: #fff; }
.display-page .display-ticker-announcement .display-ticker-tag { background: var(--display-accent); color: var(--display-accent-text); }
.display-page .display-ticker-track { flex: 1; min-width: 0; overflow: hidden; }
.display-page .display-ticker-text {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 500;
  animation: display-ticker linear infinite;
}
.display-page .display-ticker-announcement .display-ticker-text { font-weight: 700; color: var(--display-accent); }
@keyframes display-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* Months: twelve equal columns across the calendar page, six across the
   left half of the event-day page. Symmetric padding and gaps put the
   midline in the gap between the sixth and seventh column. */
.display-page .display-months { display: grid; gap: 8px; height: calc(1080px - var(--display-header-height)); padding: 8px; }
.display-page .display-months-twelve { grid-template-columns: repeat(12, minmax(0, 1fr)); width: 3840px; }
.display-page .display-months-six { grid-template-columns: repeat(6, minmax(0, 1fr)); width: 1920px; flex: 0 0 1920px; }
.display-page .display-halves { display: flex; width: 3840px; }
.display-page .display-month {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--display-card);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
.display-page .display-month h2 {
  margin: 0;
  padding: 8px;
  flex-shrink: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #1a1a2e;
  background: rgba(26, 26, 46, 0.05);
  border-bottom: 1px solid var(--display-line);
}
.display-page .display-month h2::first-letter { text-transform: uppercase; }
.display-page .display-days { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.display-page .display-day {
  display: grid;
  grid-template-columns: 26px 30px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 2px 6px;
  border-bottom: 1px solid var(--display-line);
}
.display-page .display-day:last-child { border-bottom: 0; }
.display-page .display-day-weekend { background: var(--display-weekend); }
.display-page .display-day-today { background: var(--display-today); box-shadow: inset 4px 0 0 var(--display-text); }
.display-page .display-day-number { text-align: center; font-size: 14px; font-weight: 700; }
.display-page .display-day-name { font-size: 12px; font-weight: 500; color: var(--display-muted); }
.display-page .display-day-events { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.display-page .display-week-number { font-size: 10px; text-align: right; color: var(--display-muted); }

/* Events: one line each, clipped rather than wrapped, like the legacy page. */
.display-page .display-event {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 22px;
  padding: 0 6px;
  border-left: 3px solid var(--display-event-border);
  border-radius: 4px;
  background: var(--display-event);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
.display-page .display-event-time { flex-shrink: 0; font-size: 11px; color: var(--display-muted); }
.display-page .display-event-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.display-page .display-event-status { flex-shrink: 0; font-size: 11px; color: var(--display-muted); }
.display-page .display-event-tba { background: var(--display-tba); border-color: var(--display-tba-border); }
.display-page .display-event-tba .display-event-title { font-weight: 700; }
.display-page .display-event-cancelled { background: var(--display-cancelled); border-color: var(--display-muted); }
.display-page .display-event-cancelled .display-event-title { text-decoration: line-through; color: var(--display-muted); }

/* Event day: the right half. */
.display-page .display-event-day {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  width: 1920px;
  flex: 0 0 1920px;
  height: calc(1080px - var(--display-header-height));
  padding: 16px 32px;
  color: #fff;
  text-align: center;
}
.display-page .display-event-day-content { display: flex; flex-direction: column; gap: 8px; width: 100%; flex-shrink: 0; transform-origin: center; }
.display-page .display-event-day-date { display: inline-block; margin: 0 24px 6px 0; font-size: 25px; color: rgba(255, 255, 255, 0.8); }
.display-page .display-event-day-date::first-letter { text-transform: uppercase; }
.display-page .display-event-day-calendar-time { display: inline-block; margin: 0 0 6px; font-size: 21px; color: rgba(255, 255, 255, 0.8); }
.display-page .display-event-day-heading h1 { margin: 0; font-size: 44px; line-height: 1.1; overflow-wrap: anywhere; }
.display-page .display-event-day-none, .display-page .display-event-day-notice { margin: 0; font-size: 48px; font-weight: 700; }
.display-page .display-timeline { columns: 2; column-gap: 40px; margin: 0; padding: 0; list-style: none; text-align: left; }
.display-page .display-timeline li { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-content: center; align-items: center; gap: 2px 16px; break-inside: avoid; min-height: 40px; padding: 2px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.display-page .display-timeline-label { display: contents; font-size: 23px; overflow-wrap: anywhere; }
.display-page .display-timeline-label strong { grid-column: 1; grid-row: 1; }
.display-page .display-timeline-label span { grid-column: 1 / -1; grid-row: 2; font-size: 21px; color: rgba(255, 255, 255, 0.8); }
.display-page .display-timeline-time { grid-column: 2; grid-row: 1; text-align: right; font-size: 23px; color: var(--display-accent); }
.display-page .display-timeline-time small { display: block; font-size: 18px; color: #fef08a; }
.display-page .display-timeline-unknown { color: rgba(255, 255, 255, 0.6); }
.display-page .display-attendance { width: 100%; }
.display-page .display-attendance h2 { margin: 0 0 8px; font-size: 22px; font-weight: 500; overflow-wrap: anywhere; }
.display-page .display-attendance dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 0; }
.display-page .display-attendance dl > div { display: flex; justify-content: center; align-items: baseline; gap: 16px; }
.display-page .display-attendance dt { font-size: 23px; color: var(--display-accent); }
.display-page .display-attendance dd { margin: 0; font-size: 38px; font-weight: 800; }
.display-page .display-attendance p { margin: 6px 0 0; font-size: 18px; color: rgba(255, 255, 255, 0.7); }

.display-page .display-venue { display: grid; grid-template-columns: 1.25fr 1.25fr 0.85fr; gap: 24px; text-align: left; }
.display-page .display-venue-section { min-width: 0; }
.display-page .display-venue h2 { margin: 0 0 6px; font-size: 25px; color: var(--display-accent); }
.display-page .display-venue ul { margin: 0; padding: 0; list-style: none; }
.display-page .display-venue li { border-bottom: 1px solid rgba(255, 255, 255, 0.18); padding: 5px 0; font-size: 22px; overflow-wrap: anywhere; }
.display-page .display-restaurant-heading { display: flex; justify-content: space-between; gap: 14px; }
.display-page .display-restaurant-heading strong { flex-shrink: 0; }
.display-page .display-restaurant-heading > span { text-align: right; }
.display-page .display-restaurant-times { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: 21px; color: rgba(255, 255, 255, 0.85); }
.display-page .display-restaurant-times small { color: #fef08a; font-size: 18px; }
.display-page .display-concessions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.display-page .display-concession-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 6px; font-size: 21px; }
.display-page .display-concessions li > span { display: block; font-size: 21px; color: rgba(255, 255, 255, 0.85); }
.display-page .display-entrances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.display-page .display-entrances li { display: flex; justify-content: space-between; gap: 8px; }
.display-page .display-entrances span { font-size: 21px; }
.display-page .display-cloakrooms li { display: flex; justify-content: space-between; gap: 16px; }
.display-page .display-venue-access > h2:not(:first-child), .display-page .display-early-entry { margin-top: 14px; }
.display-page .display-early-entry p { margin: 0; font-size: 21px; overflow-wrap: anywhere; }

.display-page .display-staffing { text-align: left; }
.display-page .display-staffing h2 { margin: 0 0 6px; font-size: 25px; color: var(--display-accent); }
.display-page .display-staffing ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.display-page .display-staffing li { min-width: 0; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); font-size: 22px; overflow-wrap: anywhere; }
.display-page .display-staffing strong, .display-page .display-staffing span { display: block; }
.display-page .display-staffing span { font-size: 21px; color: rgba(255, 255, 255, 0.85); white-space: pre-wrap; }
.display-page .display-event-day-content:has(.display-staffing) .display-timeline { columns: 3; column-gap: 24px; }
.display-page .display-event-day:has(.display-staffing) { padding-top: 14px; padding-bottom: 14px; }
.display-page .display-event-day-content:has(.display-staffing) { line-height: 1; gap: 4px; }
.display-page .display-event-day-content:has(.display-staffing) .display-event-day-heading h1 { font-size: 32px; }
.display-page .display-event-day-content:has(.display-staffing) .display-event-day-date { font-size: 22px; }
.display-page .display-event-day-content:has(.display-staffing) .display-event-day-calendar-time { font-size: 18px; }
.display-page .display-event-day-content:has(.display-staffing) .display-timeline li { min-height: 32px; }
.display-page .display-event-day-content:has(.display-staffing) .display-timeline-label,
.display-page .display-event-day-content:has(.display-staffing) .display-timeline-time { font-size: 20px; }
.display-page .display-event-day-content:has(.display-staffing) .display-timeline-label span,
.display-page .display-event-day-content:has(.display-staffing) .display-venue li,
.display-page .display-event-day-content:has(.display-staffing) .display-restaurant-times,
.display-page .display-event-day-content:has(.display-staffing) .display-concession-heading,
.display-page .display-event-day-content:has(.display-staffing) .display-concessions li > span,
.display-page .display-event-day-content:has(.display-staffing) .display-entrances span,
.display-page .display-event-day-content:has(.display-staffing) .display-early-entry p,
.display-page .display-event-day-content:has(.display-staffing) .display-staffing span { font-size: 18px; }
.display-page .display-event-day-content:has(.display-staffing) .display-venue h2,
.display-page .display-event-day-content:has(.display-staffing) .display-staffing h2 { font-size: 22px; }
.display-page .display-event-day-content:has(.display-staffing) .display-venue li { padding: 3px 0; }
.display-page .display-event-day-content:has(.display-staffing) .display-staffing li { font-size: 20px; padding: 3px 0; line-height: 1; }
.display-page .display-event-day-content:has(.display-staffing) .display-venue-access > h2:not(:first-child),
.display-page .display-event-day-content:has(.display-staffing) .display-early-entry { margin-top: 8px; }
.display-page .display-event-day-content:has(.display-staffing) .display-attendance dt { font-size: 18px; }
.display-page .display-event-day-content:has(.display-staffing) .display-attendance dd { font-size: 30px; }

.display-page .display-refresh-status { position: fixed; z-index: 10; left: 0; bottom: 0; width: 3840px; display: flex; color: #8a5a10; background: #fff7e6; border-top: 4px solid #8a5a10; }
.display-page .display-refresh-status[hidden] { display: none; }
.display-page .display-refresh-status p { width: 1920px; flex: 0 0 1920px; margin: 0; padding: 18px 32px; text-align: center; font-size: 26px; font-weight: 700; }

.display-page .display-brand { display: flex; align-items: center; gap: 12px; font-weight: 800; }
.display-page .display-brand::before { content: ""; display: block; width: 30px; height: 30px; background: url("/assets/fractals-fc7603c9.png") center / cover; }