/* Brigada client showcase — booth tablet, Future2Tech 2026.
 *
 * Same palette and grammar as the LED wall film so the two read as one system
 * from inside the stand: Brigada blue ground, white ink, halftone dither off
 * the bottom edge, cell frames drawn as inset shadows rather than borders.
 *
 * Everything here is offline-safe. No CDN, no Google Fonts link, no network
 * call of any kind — the venue Wi-Fi is untrusted and the tablet may well have
 * no connection at all. Poppins is vendored in assets/fonts/. */

@font-face { font-family: Poppins; font-weight: 400; font-display: block;
             src: url(assets/fonts/poppins-400.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 600; font-display: block;
             src: url(assets/fonts/poppins-600.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 700; font-display: block;
             src: url(assets/fonts/poppins-700.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 800; font-display: block;
             src: url(assets/fonts/poppins-800.woff2) format('woff2'); }

:root {
  --field:      #01019F;
  --field-deep: #01015E;
  --ink:        #FFFFFF;
  /* The raised daylight values from the film's kit.tsx. The tablet is indoors
     under hall lighting so it is not strictly required, but keeping one
     palette across booth surfaces matters more than squeezing contrast. */
  --mute:       #C3C9F2;
  --accent:     #CCE8FF;
  --faint:      #9297D6;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --gutter: clamp(20px, 3.2vw, 46px);
  --snap: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

/* `hidden` is only a default of `display: none`, so any later rule that sets
   display beats it. .player and .plate are both `display: flex`, which meant
   toggling `hidden` did nothing and every client showed an empty player AND
   its logo plate side by side. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--field-deep);
  color: var(--ink);
  font-family: Poppins, system-ui, -apple-system, sans-serif;
  /* Kiosk hygiene: nothing here is a document to be selected, dragged,
     long-pressed into a callout menu, or rubber-banded past its edges. */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: manipulation;
  overflow: hidden;
}

/* ------------------------------------------------------------------ views */
/* Both views are always in the DOM and cross-fade. Swapping innerHTML instead
   would tear down the <video> element mid-playback on every back press. */
.view {
  position: fixed; inset: 0;
  padding: var(--gutter);
  display: flex; flex-direction: column;
  background: radial-gradient(135% 105% at 66% 38%, var(--field) 0%, var(--field-deep) 82%);
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--snap), visibility .28s;
}
.view.is-active { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------- masthead */
.masthead {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
  flex-wrap: wrap;
}
.lockup { display: flex; align-items: flex-start; gap: .25em; }
/* The brand kit's lockup exports mark and wordmark at the SAME height with the
   transparent padding inside each file doing the optical alignment, so both
   take one height and align to the top. Do not "correct" this by eye. */
.lockup__mark, .lockup__word { height: clamp(26px, 3.4vw, 40px); display: block; }

.masthead__line {
  margin: 0; font-family: var(--mono); font-weight: 600;
  font-size: clamp(10px, 1.05vw, 13px); letter-spacing: .18em; color: var(--mute);
}

.slogan {
  margin: clamp(14px, 2.4vh, 30px) 0 clamp(12px, 2vh, 22px);
  font-size: clamp(26px, 3.9vw, 50px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1;
}

/* ------------------------------------------------------------------- grid */
.grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(8px, 1.1vw, 16px);
}

.cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(10px, 1.6vw, 22px);
  background: rgba(255, 255, 255, .05);
  border: 0; border-radius: 3px;
  cursor: pointer;
  transition: background .18s var(--snap), transform .18s var(--snap);
}
/* Inset shadow, not a border: a border plus any transform puts each edge on a
   different fractional pixel and the frame renders visibly uneven. */
.cell::after {
  content: ''; position: absolute; inset: 0; border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  pointer-events: none;
}
.cell:active { background: rgba(255, 255, 255, .14); transform: scale(.975); }

.cell__logo {
  max-width: 86%; max-height: 62%;
  object-fit: contain; opacity: .92;
  pointer-events: none;
}
/* Rrini's mark is square and reads much heavier than the wordmarks beside it. */
.cell[data-id="rrini"] .cell__logo { max-width: 60%; max-height: 52%; }

.cell__n {
  position: absolute; top: 8px; left: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: var(--faint);
}
/* A client with a video gets a corner tick, so whoever is demoing knows which
   cells actually play something without tapping all twelve. */
.cell[data-has-video="1"]::before {
  content: ''; position: absolute; top: 10px; right: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* ----------------------------------------------------------------- footer */
.footer {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: clamp(10px, 1.6vh, 20px);
  font-family: var(--mono); font-size: clamp(10px, 1vw, 13px);
  letter-spacing: .1em; color: var(--mute);
}
.footer__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
.footer__booth { margin-left: auto; color: var(--accent); font-weight: 600; }

/* ----------------------------------------------------------------- detail */
.detail { gap: clamp(10px, 1.6vh, 18px); }

.back {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  /* 48 px minimum so it is a comfortable thumb target, not a pointer target. */
  min-height: 48px; padding: 10px 20px 10px 14px;
  background: rgba(255, 255, 255, .08); color: var(--ink);
  border: 0; border-radius: 999px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .12em;
  cursor: pointer;
  transition: background .18s var(--snap);
}
.back:active { background: rgba(255, 255, 255, .2); }

.detail__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; }
.detail__n {
  font-family: var(--mono); font-size: 13px; letter-spacing: .14em; color: var(--faint);
}
.detail__title {
  margin: 0; font-size: clamp(28px, 4.2vw, 54px); font-weight: 800; letter-spacing: -.025em;
}
.detail__sub {
  margin: 0; font-family: var(--mono); font-weight: 600;
  font-size: clamp(10px, 1.1vw, 14px); letter-spacing: .16em; color: var(--mute);
}

.stage { flex: 1; min-height: 0; display: flex; }

.player, .plate {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; overflow: hidden;
  position: relative;
}
/* Transparent, not black. The films are letterboxed inside this box whenever
   the stage is not exactly 16:9, and black bars against the blue page read as
   a broken embed. The films' own ground is this same blue, so with the box
   transparent the letterbox simply disappears. */
.player { background: transparent; }
.player video { width: 100%; height: 100%; object-fit: contain; display: block; }

.plate { background: rgba(255, 255, 255, .05); }
.plate::after {
  content: ''; position: absolute; inset: 0; border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  pointer-events: none;
}
.plate__logo { max-width: 58%; max-height: 54%; object-fit: contain; }

/* ------------------------------------------------------------------ facts */
.facts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.facts li {
  padding: 9px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(11px, 1.15vw, 15px); letter-spacing: .1em;
  color: var(--ink);
}

/* ----------------------------------------------------------------- dither */
/* The booth's own halftone, lifted off the infodesk front. Purely decorative,
   so it is pointer-transparent and sits under nothing that must be read. */
.dither {
  position: absolute; left: 0; right: 0; bottom: 0; height: 190px;
  background-image: radial-gradient(circle, rgba(255,255,255,.5) 1.3px, transparent 1.5px);
  background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.8), transparent 78%);
  mask-image: linear-gradient(to top, rgba(0,0,0,.8), transparent 78%);
  pointer-events: none; z-index: -1;
}

/* ------------------------------------------------------------ portrait/small */
@media (orientation: portrait), (max-width: 760px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slogan { font-size: clamp(22px, 6vw, 38px); }
  .footer__booth { margin-left: 0; width: 100%; }
}

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

/* --------------------------------------------------------------- transport */
/* Sits under the film. Every target is at least 56 px so it can be hit with a
   thumb without looking, which is the actual use: the person demoing is
   watching whoever they are talking to, not the tablet. */
.transport {
  display: flex; align-items: center; gap: 10px;
  padding-top: 4px;
}
.tbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 56px; min-height: 56px; padding: 0 16px;
  background: rgba(255, 255, 255, .08); color: var(--ink);
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .08em;
  transition: background .15s var(--snap), transform .15s var(--snap);
}
.tbtn:active { background: rgba(255, 255, 255, .24); transform: scale(.94); }
.tbtn--play { min-width: 68px; background: rgba(255, 255, 255, .16); }
.tbtn svg { display: block; }

.transport__time {
  margin-left: auto;
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  letter-spacing: .06em; color: var(--mute);
  font-variant-numeric: tabular-nums;
}

@media (orientation: portrait), (max-width: 760px) {
  .tbtn { min-width: 50px; min-height: 50px; padding: 0 11px; }
  .transport { gap: 7px; }
  .transport__time { font-size: 12px; }
}