/* Copyright Ayers Electronics Inc. All rights reserved. */
/* The Caption Style and Colours And Opacity screens js/caption-style-faces.js pushes over the
   AUDIO & CC face's captions sheet. Every tile is the app's own square shape (--radius-small),
   never a pill. */

/* No flex gap anywhere here (Chromium 84; the floor is 83) - every
   spacing below is a margin on the trailing sibling instead, the sheets' own SWEPT idiom
   (js/css-floor.test.mjs). */
#xraySettingsBody .style-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#xraySettingsBody .style-row > * + * {
  margin-top: 8px;
}
.style-row-head {
  display: flex;
  justify-content: space-between; /* two children only: space-between alone keeps them apart */
}
.style-row-head .value {
  color: var(--muted);
  font-weight: 400;
  white-space: nowrap;
}
.style-grid {
  display: flex;
  flex-wrap: wrap;
}
.style-tile {
  display: flex;
  align-items: center;
  margin: 0 8px 8px 0;
  padding: 8px 10px;
  background: var(--elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-small);
  color: var(--text);
  font-size: var(--type-body);
  line-height: 1.15; /* a chip keeps its own pitch, never the row's floor */
  cursor: pointer;
}
/* The chip in use: a quiet light outline, never the focus colour. The chip in focus wears the one
   focus face (base.css). */
.style-tile[aria-checked="true"] {
  border-color: var(--text);
}
/* On the television the chips are the sheet's size and the rows close up, so every group, the two
   rows under them and the preview's picture fit one panel. A television is never under a finger, so
   the 44 px finger floor stays with touch. Each group is a grid with a fixed line count, so its
   height never depends on how wide the face draws a word: one line of chips, each as wide as its
   word and shrinking to an ellipsis past the panel's width. Family is the sheet's three lines on six
   equal tracks: two halves, two halves, three thirds. A grid gap is drawn at the floor (Chromium 66). */
html[data-tv] .style-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, max-content);
  row-gap: 4px;
  column-gap: 6px;
}
html[data-tv] .style-grid[data-type="fontFamily"] {
  grid-auto-flow: row;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
html[data-tv] .style-grid[data-type="fontFamily"] .style-tile {
  grid-column: span 3;
}
html[data-tv] .style-grid[data-type="fontFamily"] .style-tile:nth-child(n + 5) {
  grid-column: span 2;
}
html[data-tv] .style-tile {
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 3px 9px;
  font-size: var(--type-micro);
}
html[data-tv] .style-tile-word {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-tv] #xraySettingsBody .style-row {
  padding: 0;
}
html[data-tv] #xraySettingsBody .style-row > * + * {
  margin-top: 4px;
}
html[data-tv] .style-row-head {
  font-size: var(--type-label);
}
html[data-tv] body.caption-preview-up #xraySettingsBody {
  padding-bottom: 8px;
}
.style-swatch {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-small);
  background: var(--swatch-color, transparent);
  border: 1px solid var(--border-soft);
}
/* A swatch has no room for a word, so the colour in use is named once under its row. */
.style-grid-name {
  color: var(--muted);
  font-size: var(--type-micro);
}

/* The two opacities: the number at the row's right, and under it a bar between the range's ends,
   filled to where the value sits. --style-bar-along is that position, nothing else sets a width. */
#xraySettingsBody .style-bar-row {
  display: flex;
  flex-wrap: wrap;
}
.style-bar {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 8px;
}
.style-bar-end {
  color: var(--muted);
  font-size: var(--type-micro);
}
.style-bar-track {
  position: relative;
  flex: 1 1 auto;
  height: 4px;
  margin: 0 8px;
  border-radius: var(--radius-small);
  background: var(--border-soft);
}
.style-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--style-bar-along, 0%);
  border-radius: var(--radius-small);
  background: var(--accent);
}
.style-bar-knob {
  position: absolute;
  top: 50%;
  left: var(--style-bar-along, 0%);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: var(--radius-round);
  background: var(--accent);
  border: 2px solid var(--elevated);
}

/* While the previews stand the picture is bare: the band and its row step aside and the panel runs
   the full height, so a sample line never prints over the banner's words. */
body.caption-preview-up #hud {
  visibility: hidden;
}
body.caption-preview-up #xray.xray-takeover,
body.caption-preview-up #captionStylePreview {
  bottom: 0;
}

/* The two preview lines: the style as it was when the screen opened, and as the viewer has it set
   now - the same sample line, so only the letters change. They stand on the picture, in the band a
   caption occupies, clear of the drawer at the right; the real cue layer is muted underneath them.
   The letters carry the actual style, drawn through the same --media-user-* mechanism the player
   itself reads, under a --preview- prefix so neither line ever touches the live player. */
#captionStylePreview {
  position: absolute;
  top: var(--safe-top);
  bottom: var(--side-panel-bottom, var(--side-panel-bottom-fallback, 112px));
  left: var(--safe-left);
  right: var(--side-panel-w);
  z-index: 81; /* over the panel's own ground, which dims the picture a step */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  pointer-events: none;
}
.style-preview-line {
  position: relative;
  padding: 24px 12px 12px;
  text-align: center;
  max-width: 100%;
}
/* Which of the two lines this is, on a small pill above it so the word reads over any frame. */
.style-preview-kicker {
  display: block;
  margin: 0 auto 8px;
  width: fit-content;
  padding: 2px 8px;
  border-radius: var(--radius-small);
  background: var(--band-ground);
  font-size: var(--type-micro);
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}
.style-preview-cue {
  display: inline-block;
  font-family: var(--preview-font-family, inherit);
  font-variant: var(--preview-font-variant, normal);
  font-size: calc(1em * var(--preview-font-size, 1));
  text-shadow: var(--preview-text-shadow, none);
  color: var(--preview-text-color, #fff);
  background: var(--preview-text-bg, transparent);
  padding: 0.1em 0.3em;
}
.style-preview-cue.caption-pos-top {
  vertical-align: top;
}
.style-preview-cue.caption-pos-middle {
  vertical-align: middle;
}