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

/* Base reset and shared primitives. Keyboard-first: every interactive element has a visible
   focus state and nothing depends on hover (TV browsers have no pointer hover). */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font:
    100%/1.45 system-ui,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  overflow: hidden;
  /* A phone must not inflate the type on rotate, nor bounce the whole page on an overscroll: the
     surfaces scroll inside their own boxes (#guideScroll, #odScroll), never the page. */
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

/* The 44x44 pointer-target floor (WCAG 2.5.5, spacing.controlMinHeight): applied here once so
   every button/input/select clears it without a per-selector min-height sprinkled through
   components.css/layout.css. A control whose own box is already bigger (a poster card, a guide
   row's channel label) is unaffected - this only ever raises a floor, never shrinks anything. */
button,
input,
select {
  min-height: var(--control-min-height);
  min-width: var(--control-min-height);
}
/* No double-tap zoom and no 300 ms tap delay on any control a finger lands on. */
button,
input,
select,
a,
.g-cell,
.card-btn {
  touch-action: manipulation;
}

button {
  font: inherit;
  color: var(--text);
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 16px;
  cursor: pointer;
}
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
} /* the ink the bird names (tokens.css): the dark ground on four birds, the cream face on the Cardinal */
button.ghost {
  background: transparent;
}
/* The wordmark's face: every "Magpie" the app shows as text is the launcher card's
   wordmark - Concert One, in the wordmark ink token (tokens.css --wordmark-ink, the button green) - never the body font. Self-hosted from brand/fonts
   (SIL OFL 1.1, fonts/ConcertOne-Regular.LICENSE.txt); the set never fetches a font from the internet. */
@font-face {
  font-family: "Concert One";
  src: url("../fonts/ConcertOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.wordmark {
  font-family: "Concert One", "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wordmark-ink);
}
/* An operator's wordmark picture in the written name's place (js/brand.js): one line of the name's own
   height, its width following the picture. */
[data-brand-name] > .brand-picture {
  display: inline-block;
  width: auto;
  height: 1.2em;
  max-width: 100%;
  vertical-align: middle;
}
/* :focus-visible follows the last pointer or keyboard input the browser saw, and a remote's keys reach
   the page by script, which is neither, so a set's focused control need not match it; the television
   WebViews' floor does not know it at all. Every focus face - the ring and whatever a control adds to
   it - is therefore written on plain :focus, a pointer's focus included. The ring is a box-shadow
   (tokens.css --focus-ring-outset) so it follows the control's corners on every engine, and the
   outline the floor's own stylesheet draws on :focus is dropped. */
button:focus,
select:focus,
input:focus,
a:focus {
  outline: none;
  box-shadow: var(--focus-ring-outset);
}
/* On the surface the ring outranks a sheet's own lighter rule; a control that draws its ring inside
   itself scopes its --focus-ring-inset to #guide. */
#guide button:focus {
  outline: none;
  box-shadow: var(--focus-ring-outset);
}
/* A box-shadow paints under the control's content, so a control whose picture reaches its own edge
   (a poster card, a search row's art) draws its inner ring on a layer above that picture. */
.card-btn:focus::after,
#guide .search-row:focus::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  box-shadow: var(--focus-ring-inset);
  pointer-events: none;
}
/* The focus face every row, chip and category wears: the accent fill under the accent's ink, the
   white ring round it. A control's own selected state is listed with it so the face outranks that
   state. Plain :focus, which the television WebView keeps. */
.settings-cat-btn:focus,
.settings-cat-btn.active:focus,
.settings-row-split:focus,
.style-tile:focus,
.style-tile[aria-checked="true"]:focus {
  background: var(--focus-fill);
  border-color: var(--focus-fill);
  color: var(--on-focus-fill);
  outline: none;
  box-shadow: var(--focus-ring-outset);
}

input,
select {
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
}

label {
  display: block;
  color: var(--muted);
  font-size: var(--type-label);
  margin-bottom: 4px;
}

.hidden {
  display: none !important;
}

/* Screen-reader-only (the page h1); the visual brand lives in the surfaces themselves. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.dim {
  color: var(--muted);
}

img {
  max-width: 100%;
}

/* Less motion is asked for by the device's signal or by the viewer's Reduce Motion switch, which
   puts its mark on the root element (js/motion-choice.js). Either way this blanket neutralises every
   animation, transition and smooth scroll on the page, `!important` so it outranks any single rule's
   own specificity, whatever duration that rule sets. The television floor cannot join a media query
   and a selector in one rule, so the two conditions carry the same declarations (a11y.test.mjs holds
   them equal). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
html[data-reduce-motion],
html[data-reduce-motion] *,
html[data-reduce-motion] *::before,
html[data-reduce-motion] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}