/* Copyright Ayers Electronics Inc. All rights reserved. */

/* Design tokens. Dark is the only mode (parity doctrine).
   Every color below is a hardcoded fallback matching the Magpie guide skin; parity.js
   overwrites these custom properties from GET /clients/parity.json when it is available. */
:root {
  --bg: #0a0a0c;
  /* The off-air page's plain ground, and the ground under its still or video (css/components/demo-gate.css). */
  --offair-ground: #050506;
  --panel: #1a1a1d;
  --elevated: #232327;
  --border: #6c6c72;
  --border-soft: #333337;
  --text: #d4d4d4;
  --muted: #9a9aa2;
  --on-cell: #d4d4d4;
  --on-cell-variant: #c4c4ca;
  --on-panel: #d4d4d4;
  --on-panel-variant: #9a9aa2;
  --on-elevated: #d4d4d4;
  --on-elevated-variant: #9a9aa2;
  --on-track: #d4d4d4;
  --accent: #94ba3f;
  --on-accent: #0a0a0c;
  --accent-ring: #ffffff; /* the focus ring's white (--focus-ring): it reads round an accent fill and on every dark ground */
  --accent-hover: #b0d05e;
  --on-accent-hover: #0a0a0c;
  /* Two accent tokens, one bird. --accent is the fill a control is painted in and its border;
     --accent-text is the same accent read as words, lifted where the fill is too dark to carry
     4.5:1 against --panel and --elevated. --accent-text-hover is that step for a link that brightens
     under the pointer. A bird whose fill already clears 4.5:1 as words sets the two equal. */
  --accent-text: #94ba3f;
  --accent-text-hover: #b0d05e;
  --accent-warm: #e06435;
  --on-accent-warm: #0a0a0c;
  /* Each bird's own accent and ink, for a picker whose five tiles each show their own bird
     (the [data-theme] rules below are what the page WEARS; these are what the tiles SHOW). One source: brand/src/tokens.json. */
  --bird-lovebird: #94ba3f;
  --bird-lovebird-ink: #0a0a0c;
  --bird-oriole: #f16c1c;
  --bird-oriole-ink: #0a0a0c;
  --bird-goldfinch: #fbcf45;
  --bird-goldfinch-ink: #0a0a0c;
  --bird-kingfisher: #3bb3a0;
  --bird-kingfisher-ink: #0a0a0c;
  --bird-cardinal: #c41e3a;
  --bird-cardinal-ink: #f4efe2;
  --scrim: #0b0b0df0;
  --on-scrim: #d4d4d4;
  /* The soft scrim over the LIVE picture (the INFO drawer, the menus - blur behind): the picture stays
     visible under INFO ("dive deep while watching"), so these never take the full-block scrim's alpha. */
  --scrim-soft: rgba(10, 10, 12, 0.72);
  /* The slight dim under a menu or side panel: the media stays in view, never hidden. */
  --scrim-dim: rgba(0, 0, 0, 0.38);
  /* Two more surfaces painted in the bg colour at its own alpha, not the picture-dim scrim above:
     the fly-up panel's own near-opaque backdrop, and a rail arrow's translucent button fill. */
  --panel-solid: rgba(10, 10, 12, 0.92);
  --control-fill: rgba(10, 10, 12, 0.55);
  --chip: #1a1a1dcc;
  --on-chip: #d4d4d4;
  --on-chip-variant: #9a9aa2;
  --playhead: #ededef;
  --live: #e85a5e;
  --on-live: #0a0a0c;
  --error: #f0b232;
  --on-error: #0a0a0c;
  --history: #3a96dd;
  --on-history: #0a0a0c;
  --track: #2a2a2e;
  --cat-movie: #46517a;
  --cat-series: #50555f;
  --cat-news: #6e5a2e;
  --cat-kids: #63465c;
  /* sports is a client default (js/parity.js's CATEGORIES, no served palette slot yet), its raw
     colour #2F6B45 mixed the same two ways below so the fallback never leaves a cell untinted. */
  --cat-sports: #2f6b45;
  /* The kids banner on a kids profile's tile and the word on it (brand/src/tokens.json profile). */
  --kids-banner: #1668dc;
  --kids-banner-ink: #ffffff;
  /* Pre-mixed category cell fills (js/parity.js's mixArgb recomputes these from the served
     palette at boot) - the category colour mixed into --elevated at AiringTint (0.45,
     GuidePaintSurface.cs), so the guide paints its tint correctly even before that JS runs. */
  --cat-movie-fill: #32374c;
  --cat-series-fill: #373940;
  --cat-news-fill: #443b2a;
  --cat-kids-fill: #3f323e;
  --cat-sports-fill: #284334;
  /* The resting tier: the same category colour mixed into --panel at RestingTint (0.30,
     GuidePaintSurface.cs) instead - what a non-airing cell (future OR already past; CellFill's
     airing bool never branches on past-ness) paints before parity.js runs. */
  --cat-movie-rest-fill: #272a38;
  --cat-series-rest-fill: #2a2b30;
  --cat-news-rest-fill: #332d22;
  --cat-kids-rest-fill: #2f272f;
  --cat-sports-rest-fill: #203229;
  /* The stock library tiles' tones, one per default library kind: the top of a tile's ground, which
     runs into --bg (js/librarytile.js draws the picture, components.css paints it from these). */
  --tile-movies: #252b4b;
  --tile-shows: #253b4b;
  --tile-mixed: #33254b;
  --tile-music: #254b39;
  --tile-music-videos: #254b46;
  --tile-podcasts: #4b3325;
  --tile-audiobooks: #4b3c25;
  /* The title face's grounds (js/stock-card.js faceTone): a tone per title, each as dark as the panel
     so the name in the accent's ink reads on it. */
  --face-1: #161a26;
  --face-2: #14201c;
  --face-3: #1d1724;
  --face-4: #221915;
  --face-5: #181c22;

  /* spacing.controlRadius (parity.js overwrites this from the served manifest): THE corner - every
     button, card, dialog, poster, guide cell, and On Demand's bar and panhandle read this one token
     (layout D: one radius, tuned live). */
  --radius: 5px;
  /* The shapes that really differ from THE corner: a chip or a track, a card or a tile, a pill, a circle,
     the chat bubble's own round. Everything else reads --radius. */
  --radius-small: 2px;
  --radius-card: 8px;
  --radius-pill: 999px;
  --radius-round: 50%;
  --radius-chat: 14px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --glide: 220ms;
  --guide-channel-col: 140px; /* parity.guide.channelColumnEpx, written inline by js/guide.js at boot */
  /* Grid geometry is a per-head value, not a shared one. This is the first-paint fallback before
     js/guide-row.js's measureLane overwrites it inline from the served manifest; it equals
     parity.guide.rowEpx (40). Pixels-per-minute (5) against the TV heads' 8 is still open: /watch
     is what the TV heads render, so a mouse-at-a-desk exception does not apply here. */
  --guide-row-h: 40px;
  --guide-px-per-min: 5px;
  /* The guide's ruler: the bar's height, the scroller's snap padding under it and the empty hint's
     top; js/guide-row.js reads it to fit whole rows under it. */
  --guide-timebar-h: 30px;

  /* spacing.controlMinHeight (parity.js overwrites this from the served manifest): the 44x44
     pointer target every interactive control clears (WCAG 2.5.5). */
  --control-min-height: 44px;
  /* spacing.focusRingWidth: the one focus signature every control/cell draws. */
  --focus-ring-width: 3px;
  /* The ring's only two placements, as box-shadows so the ring follows the control's corners on
     every engine (an outline follows border-radius only from Chromium 94; the floor is 83). Inside:
     hugging the control's inner edge. Outside: flush with the border. Every focus face reads one. */
  --focus-ring-inset: inset 0 0 0 var(--focus-ring-width) var(--focus-ring);
  --focus-ring-outset: 0 0 0 var(--focus-ring-width) var(--focus-ring);
  /* The one focus face: the ring is white on every bird and every ground, and a focused row, chip or
     category is filled with the accent under the accent's ink inside it (base.css). */
  --focus-ring: var(--accent-ring);
  --focus-fill: var(--accent);
  --on-focus-fill: var(--on-accent);
  /* --card-focus-inset is the room a rail reserves around its cards, on every side the ring padding
     does not already cover; it grows with the card. */
  --card-focus-inset: calc(12 * var(--od-tv-px));
  /* type.<step> (js/parity.js overwrites these from the served manifest; Themes/TypeScale.xaml's own
     steps): the one scale a text tier reads by name - the banner's lines under the title and the
     badges (components.css, player.css) take body and label from here, never a literal. */
  --type-display: 2.5rem;
  --type-title: 1.875rem;
  --type-heading: 1.375rem;
  --type-body: 1rem;
  --type-label: 0.875rem;
  --type-micro: 0.75rem;
  /* The least line pitch a line of text takes: none in a browser, where each sheet keeps its own,
     and 24 px on a television (48 device pixels at the set's 2x), so small text never sits cramped
     across a room. A consumer reads it as max(<its own pitch>em, var(--text-pitch-floor)). */
  --text-pitch-floor: 0px;
  /* Named sizes that sit outside the reading scale on purpose - a control's own face or a plate
     digit, never a text tier, so a scale step would either misfit the control or drift when the
     scale moves under it. */
  --type-entry-digit: 2.125rem; /* the number-entry overlay's accumulating channel digit, read across the room */
  --type-card-headline: 4.375rem; /* the standby card family's headline at its full 1080p size */
  /* The channel plate: the top line's height, its figures sized to it (the banner, the quick bar,
     Channel 0's head). */
  --plate-h: 2.375rem;
  --plate-type: 1.3125rem;
  --plate-name-type: 1.0625rem; /* the channel name beside the plate */
  --type-keypad-digit: 1.1875rem; /* the inline D-pad keypad's own digit key face, sized to its 36px button */
  --icon-size-kind-face: 22px; /* the library card's kind face beside its name */
  /* The height of the one upper area the guide and On Demand share (css/layout/upper-area.css). It
     is a declared number rather than a measured one so the two screens are the same height before
     either has painted: switching between them moves nothing, and the grid under the guide starts
     at the same y whatever the focused programme's words run to. */
  --upper-area-h: 150px;
  /* The one info screen's band (APPROVED-DESIGN-4): the same upper area grown to hold the air line
     and the button row the sheet draws inside it, 240 of the sheet's own 540. */
  --info-band-h: 240px;
  /* Every button in the info screen's one row, one or two lines alike, and the square every icon
     in it draws in. */
  --info-button-h: 44px;
  /* The fade over the upper area's picture: the ground at four strengths, so the words keep their
     measured contrast wherever the picture is bright. At its thinnest, behind the live frame at the
     band's right edge, the ground still covers 45% of the picture. The one info screen's band reads
     the same four - it is the same picture under the same words. */
  --upper-fade-strong: rgba(10, 10, 12, 0.85);
  --upper-fade-mid: rgba(10, 10, 12, 0.7);
  --upper-fade-light: rgba(10, 10, 12, 0.45);
  --upper-fade-clear: rgba(10, 10, 12, 0);
  /* spacing.guideSurfaceMargin: the guide's own tighter page margin
     (12, not the 48/24 every other surface keeps, because every vertical pixel there is a row). */
  --guide-surface-margin: 12px;
  /* spacing.pageMargin/pageMarginVertical: the 48/24 margin every non-guide surface keeps. */
  --wordmark-ink: #94ba3f; /* the brand accent, the button green - never a separate ink */
  --page-margin: 48px;
  --page-margin-vertical: 24px;
  /* The grey look of a Magpie mark drawn quietly over a picture: the channel's fallback mark and the
     demo strip's mark both read these two. */
  --mark-opacity: 0.45;
  --mark-filter: grayscale(1) contrast(0.6);
  /* A television pixel: 1px on the 960x540 set, the Android starting window's own dp; a larger screen
     scales it by whichever of its sides is tighter against 960x540, so a surface keeps the set's
     proportions at every size and never jumps at a width. A smaller screen keeps the set's pixel, as a
     phone keeps its dp. The start lockup and On Demand's cards are drawn in it. */
  --tv-px: max(1px, min(100vw / 960, 100vh / 540));
  --od-tv-px: var(--tv-px);
  /* The viewer's card size in television pixels (js/prefs-cards.js writes it from the server-owned
     CardSize preference); 120 is Medium - layout D's 120x180 poster. */
  --od-card-step: 120;
  --od-card-w: calc(var(--od-card-step) * var(--od-tv-px));
  /* A still's card: 1.6 of the step. */
  --od-card-w-wide: calc(var(--od-card-step) * 1.6 * var(--od-tv-px));
  /* A Continue Watching card: half a 2:3 poster's height at the picture's own 16:9 shape. */
  --od-card-w-resume: calc(var(--od-card-step) * 4 / 3 * var(--od-tv-px));
  --od-card-h-resume: calc(var(--od-card-step) * 0.75 * var(--od-tv-px));
  /* The air between two cards, the same in every rail and every grid. */
  --od-card-gap: calc(9 * var(--od-tv-px));
  /* On Demand's panhandle (layout D): 496 at 1920 - the 400 preview at the 48 page margin - and
     down to 248 on a 960 television. */
  --od-pan-w: clamp(240px, 25.84vw, 496px);
  /* The first-visit offer and the guided tour's step card: wide enough that the body reads as
     sentences rather than one word a line. */
  --offer-card-w: 320px;
  /* The widest a dialog's panel grows (css/components/card-dialog.css): 60 percent of a television's
     screen, and on a phone the width less its 16 px gutters. */
  --card-dialog-max-w: max(60vw, min(420px, calc(100vw - 32px)));
}

/* Bird themes: one accent, the ink drawn on it and the hover step per bird, chosen per device in
   Settings > Appearance (js/theme.js) and carried on <html data-theme>. The values are
   brand/src/tokens.json's themes group verbatim (js/theme.test.mjs holds the two equal); the two ink
   steps are derived from them rather than served, and js/theme.test.mjs names the derivation. The :root
   block above stays the Lovebird, so a page with no choice yet paints the brand; while a theme is
   set js/parity.js leaves these five tokens to the rule below rather than writing the served palette
   over them. The focus ring is white on every bird (--focus-ring). Cardinal's ink is the cream face:
   no crimson clears AA under the dark ground as an ink (3.4 to 1 at best), the cream reads 5.1 to 1. */
:root[data-theme="lovebird"] {
  --accent: #94ba3f;
  --on-accent: #0a0a0c;
  --accent-hover: #b0d05e;
  --on-accent-hover: #0a0a0c;
  --accent-text: #94ba3f;
  --accent-text-hover: #b0d05e;
  --wordmark-ink: #94ba3f;
}
:root[data-theme="oriole"] {
  --accent: #f16c1c;
  --on-accent: #0a0a0c;
  --accent-hover: #f48645;
  --on-accent-hover: #0a0a0c;
  --accent-text: #f16c1c;
  --accent-text-hover: #f48645;
  --wordmark-ink: #f16c1c;
}
:root[data-theme="goldfinch"] {
  --accent: #fbcf45;
  --on-accent: #0a0a0c;
  --accent-hover: #fcd866;
  --on-accent-hover: #0a0a0c;
  --accent-text: #fbcf45;
  --accent-text-hover: #fcd866;
  --wordmark-ink: #fbcf45;
}
:root[data-theme="kingfisher"] {
  --accent: #3bb3a0;
  --on-accent: #0a0a0c;
  --accent-hover: #5ec1b1;
  --on-accent-hover: #0a0a0c;
  --accent-text: #3bb3a0;
  --accent-text-hover: #5ec1b1;
  --wordmark-ink: #3bb3a0;
}
/* Cardinal: the crimson clears nothing as words - 3.39 on bg, 2.97 on panel, 2.68 on elevated - so
   its ink is a step lifted in lightness until it clears 4.5:1 on both grounds (5.01 on panel, 4.52 on
   elevated; the hover ink 7.21 and 6.50). The fill itself never moves. */
:root[data-theme="cardinal"] {
  --accent: #c41e3a;
  --on-accent: #f4efe2;
  --accent-hover: #cf465d;
  --on-accent-hover: #f4efe2;
  --accent-text: #e65a6f;
  --accent-text-hover: #e2909e;
  --wordmark-ink: #c41e3a;
}

/* Motion: how long the get-a-title poster takes to sweep round to a new percentage. */
:root {
  --ask-fill-ms: 900ms;
}

/* Safe-area insets (a notch, rounded corners, the home bar): the browser reports them under
   viewport-fit=cover (index.html) and 0 everywhere else, so every rule below can add them freely. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* A television (js/theme-boot.js marks one on <html data-tv>): small text never pitched under 24 px. */
:root[data-tv] {
  --text-pitch-floor: 24px;
}

/* Phones (360-430 wide, either orientation): a narrower channel column and a denser minute so a
   30-minute cell still reads (js/guide.js reads both live). The row height itself moves on
   pointer: coarse (components.css), not on width - a small window on a desk keeps the mouse row.
   The page margins are NOT overridden here: js/parity.js writes --page-margin inline from the
   served manifest, which would beat a stylesheet token, so the phone rules that need a tighter
   margin (components.css's #upnext) carry their own number. */
@media (max-width: 767px) {
  :root {
    /* PhoneGeometry (parity.phone): js/guide.js writes the same figures inline from the manifest. */
    --guide-channel-col: 88px;
    --guide-row-h: 48px;
    --guide-px-per-min: 4px;
    --phone-head-row: 44px;
    --phone-caption: 44px;
    /* Three poster cards across (PhoneGeometry.CardsPerScreen): the surface margin at both edges,
       the rail's 12px gap between; a wide card takes two across. */
    --phone-card-w: calc((100vw - 24px - 24px) / 3);
    --phone-card-w-wide: calc((100vw - 24px - 12px) / 2);
  }
}

/* Tablets (768-1024): between the two. */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --guide-channel-col: 140px;
  }
}