/*
 * React Native -> CSS compatibility layer for the TV screen preview.
 *
 * The preview reproduces frontend/src/screens/HomeScreen.tsx and friends in the
 * browser. React Native's flexbox IS CSS flexbox, but with different DEFAULTS,
 * and those differences are the single largest source of "why does this look
 * subtly wrong" in a port like this. They are encoded once, here.
 *
 * ── THE SCALING RULE ──────────────────────────────────────────────────────
 * Hotel panels run 1920x1080 at density 2, so React Native's 960x540 dp canvas
 * lands on screen at DOUBLE every number (see the comment at HomeScreen.tsx
 * :1406, measured off a real capture from room 3007).
 *
 * This stylesheet therefore works in dp — every value is copied VERBATIM from
 * the RN source with no arithmetic — and #tv-root is scaled x2 into the
 * 1920x1080 frame. Hand-doubling three thousand lines of CSS is where the
 * fidelity would actually die, and a reviewer can diff `40` against `40` but
 * not `80` against `40`.
 */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
}

/*
 * The dp canvas. 960x540 dp scaled x2 = the 1920x1080 the panel renders.
 * transform-origin top-left so the scaled box starts flush in the corner.
 */
#tv-root {
  width: 960px;
  height: 540px;
  transform: scale(2);
  transform-origin: top left;
  position: relative;
  overflow: hidden;
  /*
   * Default preset ships fonts:{} and Android falls back to system Roboto.
   * Roboto is not redistributed with the app, so the preview asks for it and
   * degrades to the platform sans. Listed in PREVIEW_PARITY.md as a known
   * approximation.
   */
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  /*
   * Android does NO synthetic bolding when a style names a specific font file
   * family. Letting the browser invent weights would show the operator a
   * heavier face than the panel draws.
   */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/*
 * The View primitive.
 *
 * RN defaults: flex-direction column, align-items stretch, flex-shrink 0,
 * position relative. CSS defaults: row, stretch, shrink 1, static. Without
 * this every row/column relationship in the port is subtly off.
 *
 * min-width/min-height 0 disables CSS's automatic minimum size, which Yoga
 * does not implement. Without it a row can never become narrower than its
 * content and the horizontally-scrolling card rows stop working.
 */
.v, .row {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  position: relative;
  min-width: 0;
  min-height: 0;
}

/* Both must carry the full reset, not just a direction: a bare
 * `flex-direction` on a block element is inert, which silently stacks every
 * row vertically. */
.v   { flex-direction: column; }
.row { flex-direction: row; }

/*
 * RN `flex: N` means `N 1 0%` for N > 0.
 *
 * But RN `flex: 0` means `0 0 auto` (size to content), while CSS `flex: 0`
 * means `0 1 0%` (collapse to nothing). That difference is LOAD-BEARING here:
 * the banner-hero pill row and the banner-trio tile row are both `{ flex: 0 }`
 * and are sized by their cards' aspectRatio (HomeScreen.tsx :1037-1081, whose
 * comments record two separate regressions at that exact spot). Using the CSS
 * meaning collapses row 1 and pushes row 2 up the screen.
 */
.flex-0    { flex: 0 0 auto; }
.flex-07   { flex: 0.7 1 0%; }
.flex-1    { flex: 1 1 0%; }
.flex-16   { flex: 1.6 1 0%; }
.flex-34   { flex: 3.4 1 0%; }

/* RN Text: no inherited margins, and it never wraps unless told to. */
.t {
  margin: 0;
  padding: 0;
  display: block;
  /*
   * RN card labels set includeFontPadding:false, which has no CSS analogue.
   * An explicit line-height is the closest match; the residual difference is a
   * fraction of a pixel of vertical offset. Enumerated in PREVIEW_PARITY.md
   * rather than chased.
   */
  line-height: 1.15;
}

.t-1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.abs  { position: absolute; }
.fill { position: absolute; inset: 0; }

img.cover   { width: 100%; height: 100%; object-fit: cover;   display: block; }
/* The promo video tile: RN's resizeMode="cover", so the same fit here. */
video.cover { width: 100%; height: 100%; object-fit: cover;   display: block; }
img.contain { width: 100%; height: 100%; object-fit: contain; display: block; }

/*
 * elevation -> shadow.
 *
 * IMPORTANT: on Android ONLY `elevation` renders. The iOS shadowColor /
 * shadowOffset / shadowOpacity / shadowRadius props that sit alongside it in
 * menuCardPill (HomeScreen.tsx :1317-1327) are dead code on these panels.
 * Rendering a box-shadow from those iOS values would show a shadow the TV does
 * not draw, which is exactly the kind of difference nobody notices until a
 * hotel complains. These approximate Android's ambient+key model instead.
 */
.elev-4 { box-shadow: 0 2px 4px rgba(0,0,0,.20), 0 1px 10px rgba(0,0,0,.12); }
.elev-6 { box-shadow: 0 3px 5px rgba(0,0,0,.20), 0 1px 18px rgba(0,0,0,.12); }

/* Capital brand face. One @font-face per FILE, each at weight 400, mirroring
 * how RN names a specific family and Android applies no synthetic weight. */
@font-face { font-family: 'Montserrat-Regular';   src: url('fonts/Montserrat-Regular.ttf')   format('truetype'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Montserrat-Bold';      src: url('fonts/Montserrat-Bold.ttf')      format('truetype'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Montserrat-ExtraBold'; src: url('fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Montserrat-Italic';    src: url('fonts/Montserrat-Italic.ttf')    format('truetype'); font-weight: 400; font-style: normal; font-display: block; }
/* Proxima Nova (Capital's brand face, supplied 2026-08-28): same one-file-per-family rule. */
@font-face { font-family: 'ProximaNova-Regular'; src: url('fonts/ProximaNova-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'ProximaNova-Bold';    src: url('fonts/ProximaNova-Bold.otf')    format('opentype'); font-weight: 400; font-style: normal; font-display: block; }

/* Motion. Values from DS.motion so focus feels like the panel, not snappier. */
.anim-focus { transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease, color 150ms ease; }