/*
 * static/css/board.css — the split-flap board itself: frame, flaps and tiles.
 *
 * Kept apart from app.css on purpose: the board draws a physical object
 * (flaps, tiles, a frame), not the app's interface, so its palette and
 * measurements are its own. docs/decisions/the-tv-board-has-its-own-stylesheet.md
 * The TV's page around it is tv.css; the front page and the app's display
 * and board pages show it too, as .board--fluid.
 */
/* Barlow and Barlow Semi Condensed, self-hosted (SIL OFL, static/fonts/OFL.txt). */
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-semi-condensed-600-latin.64a19a7cafc2.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500-latin.8e986e86d57e.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-600-latin.a1e2a2d7d4c0.woff2") format("woff2"); }

/* The board's palette and its measurements. The TV sizes it to the screen
   (splitflap.js sets --cw and the rest on <html>); .board--fluid sizes it
   to its container instead. */
:root {
  --frame-hi: #1c1b1a;
  --frame-lo: #0e0e0d;
  --well: #090909;
  --flap-top-a: #232323;
  --flap-top-b: #1c1c1c;
  --flap-bot-a: #191919;
  --flap-bot-b: #141414;
  --ink: #eeeae1;
  --engrave: #4b4841;
  --led-on: #f3ead2;
  --tile-r: #d8372f; --tile-o: #ee7a1f; --tile-y: #f5c22b; --tile-g: #2f9d5b;
  --tile-b: #2069cf; --tile-v: #7a4bc8; --tile-w: #ece9e1;
  --font-flap: "Barlow Semi Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --cw: 40px; --ch: 55px; --gx: 5px; --gy: 6px; --pad: 34px; --fs: 34px; --r: 3px;
}

/* The physical board */
.board {
  position: relative;
  padding: var(--pad) var(--pad) calc(var(--pad) * 1.6);
  background: linear-gradient(180deg, var(--frame-hi), var(--frame-lo));
  border-radius: calc(var(--cw) * 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.8),
    0 0 0 1px #000,
    0 calc(var(--cw) * 0.6) calc(var(--cw) * 2) rgba(0, 0, 0, 0.75);
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cw));
  grid-auto-rows: var(--ch);
  column-gap: var(--gx);
  row-gap: var(--gy);
  padding: calc(var(--gy) * 0.8);
  margin: calc(var(--gy) * -0.8);
  background: var(--well);
  border-radius: calc(var(--r) * 2);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9);
}
.engrave {
  position: absolute; left: var(--pad); right: var(--pad);
  bottom: calc(var(--pad) * 0.5);
  display: flex; align-items: center; justify-content: space-between;
  font: 600 calc(var(--cw) * 0.3) / 1 var(--font-ui);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--engrave);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 -1px 0 rgba(0, 0, 0, 0.9);
}
.leds { display: flex; gap: calc(var(--cw) * 0.28); }
.led {
  width: calc(var(--cw) * 0.14); height: calc(var(--cw) * 0.14); border-radius: 50%;
  background: #262522; box-shadow: inset 0 1px 1px rgba(0,0,0,.9);
  transition: background .4s, box-shadow .4s;
}
.led.on { background: var(--led-on); box-shadow: 0 0 calc(var(--cw) * 0.2) rgba(243, 234, 210, 0.55); }

/* One flap module: two static halves, two moving leaves */
.cell {
  position: relative;
  perspective: calc(var(--ch) * 4);
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.half, .leaf {
  position: absolute; left: 0; right: 0; height: 50%;
  overflow: hidden;
  backface-visibility: hidden;
}
.top { top: 0; border-radius: var(--r) var(--r) 0 0; background: linear-gradient(180deg, var(--flap-top-a), var(--flap-top-b)); box-shadow: inset 0 1px 0 rgba(255,255,255,.045); }
.bottom { bottom: 0; border-radius: 0 0 var(--r) var(--r); background: linear-gradient(180deg, var(--flap-bot-a), var(--flap-bot-b)); }
.leaf { z-index: 2; will-change: transform; }
.leaf.top { transform-origin: 50% 100%; }
.leaf.bottom { transform-origin: 50% 0%; }
.face {
  position: absolute; left: 0; right: 0; height: var(--ch);
  font: 600 var(--fs) / var(--ch) var(--font-flap);
  text-align: center; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.top .face { top: 0; }
.bottom .face { bottom: 0; }
.face.colour { inset: 0; height: auto; }
.top .face.colour { bottom: 0; }
.t-r { background: var(--tile-r); } .t-o { background: var(--tile-o); }
.t-y { background: var(--tile-y); } .t-g { background: var(--tile-g); }
.t-b { background: var(--tile-b); } .t-v { background: var(--tile-v); }
.t-w { background: var(--tile-w); }
.face.icon {
  background: var(--ink);
  -webkit-mask: var(--icon) center / 74% auto no-repeat;
  mask: var(--icon) center / 74% auto no-repeat;
}
/* A pictogram the server draws (img/pictograms.svg), split by the halves like a character. */
.face__icon { display: block; width: 74%; height: 100%; margin: 0 auto; }
.top .face.colour { box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.bottom .face.colour { filter: brightness(0.9); }
/* The split between leaves, with the axle notches at each side */
.cell::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; z-index: 3;
  height: max(1px, calc(var(--ch) * 0.02)); transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.92);
}
.cell::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; z-index: 3;
  height: calc(var(--ch) * 0.075); transform: translateY(-50%);
  background: linear-gradient(90deg, #050505 0 7%, transparent 7% 93%, #050505 93%);
}

/* The board at the width of its container (.board-fit), however wide that
   is: 22 columns of flaps and their gaps, plus the frame either side. */
.board-fit { container-type: inline-size; }
.board--fluid {
  --cols: 22;
  --cw: calc(100cqw / 26.22);
  --ch: calc(var(--cw) * 1.38);
  --gx: calc(var(--cw) * 0.12);
  --gy: calc(var(--cw) * 0.16);
  --pad: calc(var(--cw) * 0.85);
  --fs: calc(var(--ch) * 0.66);
  --r: max(1px, calc(var(--cw) * 0.07));
}

/* What the engraving says on the app's pages: "Draft" or "On the display". */
.engrave__tag { color: var(--tile-y); }

/* One tile on its own, as a palette key on the board page shows it. */
.flap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 34px; border-radius: 4px;
  color: var(--ink);
}
.flap:not(.colour) { background: linear-gradient(180deg, var(--flap-top-a) 0 50%, var(--flap-bot-a) 50% 100%); }
.flap svg { width: 20px; height: 20px; }