/* Accedo internal UI (Accedo Brand Guidelines 2024, via the accedo-internal-ui skill) for TV
   browsers. Plain CSS that Chromium 56 (Tizen 2018) supports: no custom properties, flex gap,
   grid or :focus-visible. Colors are brand palette values written out directly:

   #0B0B0B Midnight Black (canvas)    #1E1D21 Space Grey 1 (panels)   #2D2D35 Space Grey 2
   #44454D Space Grey 3 (dividers)    #FDFDFD Spectralon White (text) #9C9C9C white 60% (muted)
   #0064FF Cool Blue (selection)      #FF2B62 Flamingo Red (errors)   #3B0F1B red 20% on black
   #0E9F6E success green [ext]        #0B2A20 green tint [ext]        #8A8A8A control border [ext]

   Status colors never go on text: they mark dots, borders and tinted backgrounds only.
   Pages use the dark theme; TVs can't follow the OS setting (no prefers-color-scheme).

   [ext] 10-foot scale: 1rem is 20px at 1920px wide and scales with the viewport, so the
   layout looks the same at 720p (X1), 1080p and 4K. Hairline borders stay 1px. */

/* Outfit at the three brand weights, self-hosted (SIL OFL, brand/fonts/OFL.txt). Static
   per-weight files: Chromium 56 has no variable fonts, so the variable file Google serves to
   modern browsers would lose the weights on TVs. */
@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 300;
  src: url("../brand/fonts/outfit-300.woff2") format("woff2");
}

@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 500;
  src: url("../brand/fonts/outfit-500.woff2") format("woff2");
}

@font-face {
  font-family: Outfit;
  font-style: normal;
  font-weight: 700;
  src: url("../brand/fonts/outfit-700.woff2") format("woff2");
}

html {
  font-size: 1.042vw;
}

html,
body {
  margin: 0;
  background: #0B0B0B;
}

body {
  color: #FDFDFD;
  font-family: Outfit, Arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.4;
}

/* AAMP renders video on a plane behind the page: keep the page transparent (hole punching). */
html.transparent,
html.transparent body {
  background: transparent;
}

h1,
h2 {
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h1 {
  font-size: 1.5rem;
  font-weight: 700;
}

h2 {
  font-size: 1rem;
  font-weight: 500;
}

/* Top bar: logo, divider, tool name. 5% side inset for TV overscan. */
.topbar {
  display: flex;
  align-items: center;
  padding: 4vh 5vw 1.6rem;
  background: #0B0B0B;
  color: #FDFDFD;
}

/* Official color-negative logo (src/brand/). 2.25rem is 30px at 1280 wide, the brand minimum,
   and scales up from there; min-height guards smaller viewports. Its clear space is the height
   of its "a", about 68% of the logo height (1.55rem): kept by the divider margin and by the
   bar's top and bottom padding. */
.topbar__logo {
  display: block;
  width: auto;
  height: 2.25rem;
  min-height: 30px;
}

.topbar__divider {
  width: 1px;
  height: 2rem;
  margin: 0 1.2rem 0 1.55rem;
  background: #44454D;
}

.topbar__tool {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Remote keys for this page, right-aligned. Key names in the text color, labels muted. */
.topbar__hints {
  margin-left: auto;
  color: #9C9C9C;
  font-size: 0.875rem;
  font-weight: 500;
}

.key {
  color: #FDFDFD;
}

/* AAMP draws video behind the page, so the bar uses Midnight Black at 80%, a brand shade. */
html.transparent .topbar {
  background: rgba(11, 11, 11, 0.8);
}

/* Left panel and right column, inside the overscan inset. */
.stage {
  display: flex;
  align-items: flex-start;
  padding: 0 5vw 5vh;
}

#wrap {
  width: 45vw;
}

#side {
  width: 40vw;
  margin-left: auto;
}

#panel,
#stats,
.caps {
  padding: 1rem;
  border-radius: 16px;
  background: #1E1D21;
  font-variant-numeric: tabular-nums;
}

/* Over AAMP's video: Space Grey 1 is solid, so use Midnight Black at 80% instead. */
html.transparent #panel,
html.transparent #stats {
  background: rgba(11, 11, 11, 0.8);
}

#head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

/* Status badge: the dot and tint carry the state, the words stay in the text color. */
#status {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: #2D2D35;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
}

#status::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.5rem;
  border-radius: 999px;
  background: #9C9C9C;
}

#status.ok {
  background: #0B2A20;
}

#status.ok::before {
  background: #0E9F6E;
}

#status.err {
  background: #3B0F1B;
}

#status.err::before {
  background: #FF2B62;
}

#status.warn {
  background: #3A2C0F;
}

#status.warn::before {
  background: #FFB71E;
}

/* Key/value rows: summary, stats and capabilities. */
#summary div,
#stats div,
.caps .row {
  padding-left: 6rem;
  text-indent: -6rem;
}

#summary .k,
#stats .k,
.caps .k {
  display: inline-block;
  width: 6rem;
  color: #9C9C9C;
  font-weight: 500;
  text-indent: 0;
}

#summary .v,
#stats .v,
.caps .v {
  word-wrap: break-word;
}

/* A dot before values that carry a state; the value text stays in the text color. */
.v.ok::before,
.v.warn::before,
.v.err::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.4rem;
  border-radius: 999px;
  vertical-align: 0.1em;
}

.v.ok::before {
  background: #0E9F6E;
}

.v.err::before {
  background: #FF2B62;
}

.v.warn::before {
  background: #FFB71E;
}

/* Larger dots on the capabilities, where every row is an answer. */
/* vertical-align centres the dot on the capital height of the answer (measured, Outfit). */
.caps .v::before {
  width: 0.8rem;
  height: 0.8rem;
  vertical-align: -0.11em;
}

#summary {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #44454D;
}

/* Timeline: a fixed column of seconds since load, then the entry. */
#out {
  max-height: 60vh;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

#out .line {
  padding: 0.1rem 0.5rem 0.1rem 5rem;
  border-left: 0.25rem solid transparent;
  text-indent: -4.5rem;
}

#out .t {
  display: inline-block;
  width: 4.5rem;
  color: #9C9C9C;
  text-indent: 0;
}

#out .line.ok {
  border-left-color: #0E9F6E;
}

#out .line.err {
  border-left-color: #FF2B62;
  background: #3B0F1B;
}

/* Non-fatal problems the player recovers from: Swedish Yellow, tinted at 20% on black. */
#out .line.warn {
  border-left-color: #FFB71E;
  background: #3A2C0F;
}

/* The timeline scrolls with the remote, so the desktop scrollbar is only noise. */
#out::-webkit-scrollbar {
  display: none;
}

/* 16:9 video box (padding-bottom ratio, as Chromium 56 has no aspect-ratio). Native controls
   are off because the remote can't reach them; the placeholder covers it until playback. */
.screen {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%;
  border-radius: 16px;
  background: #0B0B0B;
}

.screen video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0B0B0B;
}

.screen__wait {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #1E1D21;
  color: #9C9C9C;
  font-weight: 500;
}

#stats {
  margin-top: 0.5rem;
}

/* Hidden until stats.js emits rows. */
#stats:empty {
  display: none;
}

/* No video above it on the AAMP page; line up with the left panel. */
#stats:first-child {
  margin-top: 0;
}

video.fullscreen {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* Index: player menu. The focused item is the selection, so it takes the primary look. */
#panel h1 {
  margin-bottom: 0.75rem;
}

#menu a {
  display: flex;
  justify-content: space-between;
  margin: 0.25rem 0;
  padding: 0.5rem 1rem;
  border: 1px solid #8A8A8A;
  border-radius: 10px;
  color: #FDFDFD;
  font-weight: 500;
  text-decoration: none;
}

#menu a:focus {
  border-color: #0064FF;
  outline: 2px solid #FDFDFD;
  outline-offset: 2px;
  background: #0064FF;
  color: #FDFDFD;
}

#menu .ver {
  color: #9C9C9C;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}

/* Grey on Cool Blue fails contrast, so the version turns white with the selection. */
#menu a:focus .ver {
  color: #FDFDFD;
}

/* Index: everything fits on one screen, so nothing here scrolls. Left: players, then the
   device panel. Right: one wide panel with codecs and DRM side by side. */
.stage--index #wrap {
  width: 36vw;
}

#capsDevice {
  margin-top: 0.5rem;
}

#capsWide {
  display: flex;
  align-items: flex-start;
  width: 50vw;
  margin-left: auto;
}

/* flex-basis 0 splits the panel evenly; min-width 0 lets long values wrap. */
.caps__col {
  flex: 1 1 0;
  min-width: 0;
}

.caps__col + .caps__col {
  margin-left: 1.5rem;
}

.caps h2 {
  margin: 1rem 0 0.25rem;
}

.caps h2:first-child {
  margin-top: 0;
}

.caps .row {
  padding-left: 12rem;
  text-indent: -12rem;
}

/* pre keeps the two-space indent on robustness and security-level rows. */
.caps .k {
  width: 12rem;
  white-space: pre;
}

/* Device rows have short labels and long values (user agent). */
#capsDevice .row {
  padding-left: 5rem;
  text-indent: -5rem;
}

#capsDevice .k {
  width: 5rem;
}