/*
 * Styled after the reference boards: light lavender ground, gold gradient
 * header bars, maroon display type, colour-coded strain badges.
 *
 * Everything is sized in viewport units so one stylesheet drives portrait and
 * landscape screens at any resolution. JS packs the columns; CSS never wraps or
 * balances content on its own, which is what keeps rows from being cut in half.
 */

/*
 * Goudy Heavyface — the display face for titles, section headers, product
 * names and prices. Served from the project rather than the system so the TV
 * stick renders it too; it is the only webfont, and it is preloaded in
 * index.html because the column packer measures text width and would otherwise
 * lay the board out in the fallback face and reflow wrong.
 *
 * Deliberately NOT used for the potency line, size or badges: Heavyface is a
 * dense display serif and turns to mud at those sizes across a room. Those stay
 * in the UI sans.
 */
@font-face {
  font-family: "Goudy Heavyface";
  src: url("fonts/GoudyStd-Heavyface.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: block;
}

:root {
  --ink: #1c2440;
  --maroon: #b0202a;
  --maroon-deep: #8c1a22;
  --gold-a: #ffd24a;
  --gold-b: #f5a33c;
  --paper-a: #ffffff;
  --paper-b: #dfe3f5;
  --rule: #c9cee6;
  --dim: #6b7291;

  --indica: #4a8fc4;
  --sativa: #b03a4a;
  --hybrid: #4f9e5c;
  --cbd: #7a5cc4;
  --neutral: #8a90ad;

  /*
   * Row metrics and type sizes are written here in px by JS, which picks the
   * largest scale that fits the whole board on one screen. The vh values below
   * are only the pre-script fallback.
   */
  --item-h: 5.4vh;
  --head-h: 5.2vh;
  --gap: 1.1vh;
  --fs-head: 2.9vh;
  --fs-name: 2.5vh;
  --fs-potency: 2vh;
  --fs-size: 1.9vh;
  --fs-badge: 1.7vh;
  --fs-price: 3vh;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: linear-gradient(150deg, var(--paper-a) 0%, var(--paper-b) 100%);
  --display: "Goudy Heavyface", "Segoe UI", Georgia, serif;
  --ui: "Segoe UI", -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--ui);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- Splash */

.splash {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3vh;
  background: var(--paper-a);
  z-index: 10;
}

.splash[hidden] {
  display: none;
}

.splash__mark {
  width: 8vh;
  height: 8vh;
  border: 0.6vh solid var(--rule);
  border-top-color: var(--maroon);
  border-radius: 50%;
  animation: spin 1.1s linear infinite;
}

.splash__text {
  margin: 0;
  max-width: 70vw;
  font-size: 2.6vh;
  line-height: 1.5;
  color: var(--dim);
  text-align: center;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------------------------ Board */

.board {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.6vh 1.6vw;
  /* Shifted a few pixels each rotation so static type does not burn in. */
  transform: translate(var(--drift-x, 0), var(--drift-y, 0));
  transition: transform 1.4s ease;
}

.board[hidden] {
  display: none;
}

/*
 * Three tracks rather than a centred title with the store name floated over it:
 * a long title ("Bulk Pre-Rolls") used to run straight underneath the store
 * name. Separate tracks make that collision impossible, and the title keeps its
 * optical centre because the outer tracks are equal.
 */
.titlebar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2vw;
  padding: 0.9vh 2vw;
  border-radius: 0.5vh;
  background: linear-gradient(100deg, var(--gold-a), var(--gold-b) 55%, var(--gold-a));
  box-shadow: 0 0.3vh 0.9vh rgba(28, 36, 64, 0.16);
}

.titlebar__text {
  font-family: var(--display);
  /* Bounded by whatever the store name leaves, so a long title shrinks to fit
     rather than sliding underneath it. */
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 4.4vh;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--maroon);
  text-shadow: 0 0.15vh 0 rgba(255, 255, 255, 0.55);
}

.titlebar__store {
  flex: 0 0 auto;
  padding-right: 2vw;
  white-space: nowrap;
  font-size: 2.1vh;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--maroon-deep);
  opacity: 0.85;
}

/* ---------------------------------------------------------------- Columns */

.columns {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0 2.2vw;
  padding-top: 1.4vh;
}

/*
 * Only the overflow column fades between ticks. Fading the whole grid, as an
 * earlier version did, made the entire board blink even though the fixed
 * columns had not changed.
 */
.column--rotating {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.column--rotating.is-swapping {
  opacity: 0;
}

.column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-content: start;
  /* Nothing may bleed into the neighbouring column. */
  overflow: hidden;
}

/* --------------------------------------------------------------- Sections */

.section {
  min-width: 0;
}

.section__head {
  font-family: var(--display);
  height: calc(var(--head-h) - var(--gap));
  margin: 0 0 0.4vh;
  display: flex;
  align-items: center;
  padding: 0 1vw;
  border-radius: 0.4vh;
  background: linear-gradient(100deg, var(--gold-a), var(--gold-b));
  font-size: var(--fs-head);
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--maroon);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section__head--cont {
  opacity: 0.92;
}

.section__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------------------ Items */

/*
 * One flex row per product: an optional leading badge, the name/potency block,
 * then optional size and price columns. Every board variant in config is a
 * different subset of those four slots, so no per-variant grid is needed.
 */
.item {
  height: var(--item-h);
  display: flex;
  align-items: center;
  gap: 0.9vw;
  padding: 0 0.7vw;
  min-width: 0;
}

.item__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15vh;
}

/*
 * Single line, always. Rows are a fixed height so the column packer can do its
 * arithmetic, and a name that wraps would overflow into the row below. The
 * scale search shrinks the type until names genuinely fit their column, so the
 * ellipsis is a last resort rather than the normal case.
 */
.item__name {
  font-family: var(--display);
  font-size: var(--fs-name);
  font-weight: 700;
  line-height: 1.12;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item__meta {
  display: flex;
  align-items: center;
  gap: 0.6vw;
  min-width: 0;
  /* Potency text is nowrap; without this it spills past the column edge. */
  overflow: hidden;
}

.potency {
  font-size: var(--fs-potency);
  font-weight: 700;
  color: var(--maroon-deep);
  white-space: nowrap;
}

.potency--cbd {
  color: var(--cbd);
}

.item__size {
  font-size: var(--fs-size);
  font-weight: 600;
  color: var(--dim);
  white-space: nowrap;
}

.item__size--col {
  flex-shrink: 0;
  text-align: right;
}

.badge {
  flex-shrink: 0;
  padding: 0.15vh 0.45vw;
  border-radius: 0.3vh;
  font-size: var(--fs-badge);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--neutral);
}

/*
 * A leading badge column is only legible if every row aligns to one width.
 * 'ch' is the width of a zero, but these labels are bold, uppercase and
 * letter-spaced, so INDICA/SATIVA/HYBRID need noticeably more than 6ch — and
 * border-box means the horizontal padding comes out of this width too.
 */
.board--badge-left > .columns .item > .badge {
  width: 9.5ch;
  text-align: center;
}

.badge--indica { background: var(--indica); }
.badge--sativa { background: var(--sativa); }
.badge--hybrid { background: var(--hybrid); }
.badge--cbd    { background: var(--cbd); }

/* ------------------------------------------------------------------ Price */

.item__price {
  font-family: var(--display);
  font-size: var(--fs-price);
  font-weight: 800;
  color: var(--maroon);
  white-space: nowrap;
}

.item__price--col {
  flex-shrink: 0;
  text-align: right;
}

/* Inline prices sit in the potency line, so they match its scale. */
.item__price--inline {
  font-size: var(--fs-potency);
}

.item__price--was {
  display: block;
  font-size: var(--fs-badge);
  font-weight: 600;
  color: var(--dim);
  text-decoration: line-through;
  line-height: 1;
}

.item__price--inline .item__price--was {
  display: inline;
  margin-right: 0.3vw;
}

.item__price--sale {
  color: #c2410c;
}

/* ----------------------------------------------------------------- Footer */

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  padding-top: 0.9vh;
  margin-top: 0.6vh;
  border-top: 0.2vh solid var(--rule);
  font-size: 1.8vh;
  font-weight: 600;
  color: var(--dim);
  min-height: 3vh;
}

.footer__page {
  flex-shrink: 0;
  color: var(--maroon-deep);
}

/* ----------------------------------------------------------- Stale banner */

/*
 * In the flex flow, not floating over it. Fixed positioning parked this on top
 * of the title bar and hid the board's own name.
 */
.stale-banner {
  order: -1;
  flex: 0 0 auto;
  margin-bottom: 0.8vh;
  border-radius: 0.4vh;
  padding: 0.7vh 2vw;
  background: #b91c1c;
  color: #fff;
  font-size: 1.8vh;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.stale-banner[hidden] {
  display: none;
}