/* Copyright Ayers Electronics Inc. All rights reserved. */
/* guide grid cell states. */

.g-cell .left {
  white-space: nowrap;
}
/* A cell's focus: the white ring outside the box, and the cell's own fill one step brighter. Never
   an accent fill, which would hide the cell's category colour, and never a text-colour swap. */
.g-cell.focused {
  box-shadow: var(--focus-ring-outset);
  filter: brightness(1.25);
  z-index: 2;
}
/* A cell against the channel column or the screen's right edge rings inside itself, so nothing
   crosses onto the column or runs off the screen. */
.g-cell.touches-column.focused,
.g-cell.touches-end.focused {
  box-shadow: var(--focus-ring-inset);
}
.g-cell.offair {
  background: transparent;
  color: var(--on-cell-variant);
}
/* A run of short programmes drawn as one block (js/guide-shorts.js): its own count first, whole and
   never shortened (a count that does not fit leaves the cell without words, js/guide-cell-text.js),
   then the titles it holds in the facts' muted ink, ending in an ellipsis at the cell's edge. The
   titles are a block box because an ellipsis never applies to a flex box. The comb marks that there
   are several programmes under the one label without a border per programme, which at this row
   height would read as noise. */
.g-cell.g-block {
  background-image: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, 0.05) 22px 23px);
}
.g-cell.g-block .t {
  flex: none;
}
.g-cell.g-block .facts {
  display: block;
  margin-right: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-cell.g-block:not([data-text="full"]) .facts {
  display: none;
}
/* Category tint: the contract mixes the category colour INTO the cell's fill rather than
   drawing it as a separate accent stripe (the fill is a category
   tint mixed into Panel or Elevated; js/parity.js's two amounts, 0.45 airing / 0.30 resting, are
   the law). The resting rule is the plain selector (matching .g-cell's own resting-tier
   default above); .airing raises it to the airing mix, the same tier .g-cell.airing itself raises
   to when a cell carries no category at all. The declared OnCell/OnCellVariant ink pair is what
   Magpie.Data.Theming.ThemePalette proves clears 4.5:1 against every mix either tier can produce,
   the focused brightening above included - for the shipped palette (ThemePaletteTests) and for any
   palette an admin submits. Both mixes are computed in JS (js/parity.js's mixArgb,
   at parity-apply time) into the --cat-*-fill/--cat-*-rest-fill variables below, never the newer
   CSS colour-mixing function - unsupported on this client's oldest floor engines
   (the Chromium 83 floor) - so every engine on the floor renders the identical
   tint, not just the newer ones. */
.g-cell.cat-movie {
  background: var(--cat-movie-rest-fill);
}
.g-cell.cat-movie.airing {
  background: var(--cat-movie-fill);
}
.g-cell.cat-series {
  background: var(--cat-series-rest-fill);
}
.g-cell.cat-series.airing {
  background: var(--cat-series-fill);
}
.g-cell.cat-news {
  background: var(--cat-news-rest-fill);
}
.g-cell.cat-news.airing {
  background: var(--cat-news-fill);
}
.g-cell.cat-kids {
  background: var(--cat-kids-rest-fill);
}
.g-cell.cat-kids.airing {
  background: var(--cat-kids-fill);
}

/* The cell-colour key (js/guide-head.js's buildGuideLegend): the grid's own line, straight above its
   ruler on the grid's left rail, a swatch per category from the CATEGORIES list. The swatches read
   the very --cat-<key>-* fills the cells use, so the key cannot drift. flex: none keeps the grid
   under it from squeezing it; nowrap and the clip keep it one line. The items draw the page's ring
   outside themselves, so the key carries the ring's width as padding on every side, taken straight
   back as margin: the ring shows whole inside the clip and nothing at rest moves. Each item pads its
   word 8px so the ring clears the letters, and the key stands 8px further left, so the first mark is
   on the title's line. */
#guideLegend {
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  align-items: center;
  padding: var(--focus-ring-width);
  margin: calc(6px - var(--focus-ring-width)) calc(var(--page-margin) - var(--focus-ring-width))
    calc(-1 * var(--focus-ring-width)) calc(var(--page-margin) - var(--focus-ring-width) - 8px);
  font-size: var(--type-micro);
  color: var(--muted);
  overflow: hidden;
}
#guideLegend > * + * {
  margin-left: 4px;
}
/* On a television the key rides up onto the preview frame's foot, its items ending 3px under it. The
   band's picture, fade and words are positioned (css/layout/upper-area.css, z-index 0 and 1), so the
   key stands above them at z-index 2: drawn in flow it would sit under the band with only the foot
   of a focused item's ring showing. */
@media screen and (min-width: 900px) {
  #guideLegend {
    position: relative;
    z-index: 2;
    margin-top: calc(3px - 20px - var(--focus-ring-width));
  }
}
/* The key doubles as the content filter's control: each item is a real button on one 20px line,
   reset to the key's own look at rest, a ring on the one in force. The remote's key takes no pointer
   floor; a finger's does (css/components/touch.css). */
#guideLegend .legend-item {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  min-width: 0;
  height: 20px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  padding: 0 8px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
#guideLegend .legend-item[aria-pressed="true"] {
  color: var(--text);
  font-weight: 600;
}
#guideLegend .legend-item[aria-pressed="true"] .legend-sw {
  border-color: var(--text);
}
/* The key's name leads its chips, padded as a chip pads its word so it stands on the title's line. */
#guideLegend .legend-name {
  flex: none;
  padding: 0 8px;
  white-space: nowrap;
}
#guideLegend .legend-sw {
  width: 16px;
  height: 10px;
  border-radius: var(--radius-small);
  border: 1px solid var(--border-soft);
  flex: none;
  margin-right: 5px;
}
.legend-sw[data-cat="all"] {
  background: transparent;
}
.legend-sw[data-cat="movie"] {
  background: var(--cat-movie-rest-fill);
}
.legend-sw[data-cat="series"] {
  background: var(--cat-series-rest-fill);
}
.legend-sw[data-cat="news"] {
  background: var(--cat-news-rest-fill);
}
.legend-sw[data-cat="kids"] {
  background: var(--cat-kids-rest-fill);
}
.legend-sw[data-cat="sports"] {
  background: var(--cat-sports-rest-fill);
}
/* The ruler: a tick every parity.guide.tickMinutes; the hour strong with its label, the half hour
   light with its label, the quarters light with none. */
.g-timebar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  height: var(--guide-timebar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.g-timebar .corner {
  flex: 0 0 var(--guide-channel-col);
  position: sticky;
  left: 0;
  background: var(--bg);
  z-index: 5;
}
/* The channel column's own header: the favorites-only toggle (Up from
   the top row reaches the column's own header). Sits inside the timebar's
   fixed 30px row, not the 44px pointer floor base.css's blanket `button` rule would otherwise
   force onto it - overridden explicitly here, the same way `.g-chan` fits its row by being taller
   than the floor rather than by fighting it. */
#guideChanHeader {
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  color: var(--muted);
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  /* The word's line is the bar's height, as the labelled ticks' is, so the two centre on one line in
     any face. */
  line-height: var(--guide-timebar-h);
  text-align: left;
  padding: 0 8px 0 var(--page-margin);
  cursor: pointer;
}
/* The column's separator in the ruler is the header's own right edge (above), on the rows' (.g-chan's
   border-right), so the lane's first tick draws none of its own. */
.g-ticks .g-tick:first-child {
  border-left-color: transparent;
}
.g-ticks {
  position: relative;
  flex: 0 0 auto;
}
.g-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  font-size: var(--type-micro);
  color: var(--muted);
  padding: 8px 0 0 6px;
  border-left: 1px solid var(--border-soft);
  white-space: nowrap;
  overflow: hidden;
}
/* A tick naming the day (js/guide-ruler-bar.js) spans to the lane's end, so its words run on over the
   ticks after it, on the ruler's own ground so their marks never cross them, and stop at the lane's
   edge with an ellipsis. */
.g-tick.day {
  z-index: 1;
  text-overflow: ellipsis;
}
.g-tick .day-words {
  padding-right: 6px;
  background: var(--bg);
}
.g-tick.hour {
  color: var(--text);
  font-weight: 600;
  border-left-color: var(--border);
}
/* The labelled ticks centre their words in the bar's height, on the Channels word's line. */
.g-tick.hour,
.g-tick.half {
  padding-top: 0;
  line-height: var(--guide-timebar-h);
}
.g-tick.quarter {
  top: 18px;
}

/* The ruler's mark while the window has left now (js/guide-ruler-bar.js): at the ruler's right end,
   in the live colour's edge, naming the key that takes the guide back. */
.g-timebar .g-now-mark {
  position: absolute;
  right: var(--page-margin);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  min-height: 0;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--live);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: var(--type-micro);
  white-space: nowrap;
  cursor: pointer;
}
/* The now line runs under the cells, inside the grid's own stacking: it shows in the gutters between
   them and never across a word, a cell's fill or its focus ring; the airing cell's progress fill
   marks the moment inside it. */
#nowLine {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--live);
  z-index: -1;
  pointer-events: none;
}

/* The favorites-only empty state: painted over the grid (never replacing it - the grid still
   holds zero rows, so there is nothing under this to look broken) while the filter is on and no
   channel is starred. Mirrors GuideFavoritesEmptyHint's placement. */
#guideFavoritesEmptyHint {
  position: absolute;
  top: var(--guide-timebar-h);
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 40px;
  color: var(--muted);
  font-size: var(--type-label);
  pointer-events: none;
}