/* TV board: light, huge counts, readable from across the shop. */

* { box-sizing: border-box; }

body.board {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--board-text);
  background:
    radial-gradient(1600px 700px at 85% -20%, var(--color-accent-soft), transparent 60%),
    var(--board-bg);
  display: flex;
  flex-direction: column;
  padding: 2.2vh 2.5vw;
}

/* ------------------------------------------------------------- header */

.board-header {
  display: flex;
  align-items: center;
  gap: 2vw;
  padding-bottom: 1.8vh;
  border-bottom: 3px solid var(--board-line);
  margin-bottom: 2.2vh;
}

.board-logo { height: 11vh; width: auto; border-radius: 12px; display: block; }

.board-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 5.2vh;
  line-height: 1;
  margin: 0;
  letter-spacing: 0.01em;
}

.board-title .accent { color: var(--color-accent-deep); }

.board-meta {
  margin-left: auto;
  text-align: right;
  font-size: 2.4vh;
  color: var(--color-ink-soft);
  display: flex;
  align-items: center;
  gap: 1vw;
}

.board-meta .live-dot {
  width: 1.6vh;
  height: 1.6vh;
  border-radius: 50%;
  background: var(--color-ok);
  transition: background var(--duration-normal);
}

.board-meta .live-dot[data-state="down"] { background: var(--color-danger); }

/* --------------------------------------------------------------- grid */

.board-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(28rem, 44vw), 1fr));
  gap: 2vh;
  align-content: start;
}

.pie-card {
  background: var(--board-card);
  border: 3px solid var(--board-line);
  border-radius: 24px;
  box-shadow: 0 5px 0 var(--color-ink);
  padding: 2.4vh 2vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5vw;
  min-height: 16vh;
}

.pie-card .flavour {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4.2vh, 3.4rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  overflow-wrap: normal; /* wrap between words only - never split a word */
}

.pie-card .count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 9.5vh, 7.5rem);
  line-height: 1;
  color: var(--color-accent-deep);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* 4+ digit counts: smaller number so the flavour name keeps its room */
.pie-card .count[data-long="true"] {
  font-size: clamp(2.2rem, 6.5vh, 5rem);
}

/* out of stock: quieten the card, badge instead of a lonely 0 */
.pie-card[data-level="out"] {
  background: var(--board-bg);
  border-color: #b8a88e;
  box-shadow: 0 5px 0 #b8a88e;
}
.pie-card[data-level="out"] .flavour { color: var(--color-ink-soft); }
.pie-card[data-level="out"] .count { color: #b8a88e; }

.pie-card .badge {
  display: inline-block;
  margin-top: 1.2vh;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 2.4vh, 1.6rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: #e9ddc6;
  color: var(--color-ink-soft);
}

/* negative: something is wrong - shout about it */
.pie-card[data-level="neg"] {
  border-color: var(--color-danger);
  box-shadow: 0 5px 0 var(--color-danger);
}
.pie-card[data-level="neg"] .count { color: var(--color-danger); }
.pie-card[data-level="neg"] .badge { background: var(--color-danger); color: #fff; }

.board-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font-display);
  font-size: 4vh;
  color: var(--color-ink-soft);
  padding-top: 18vh;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}