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

/* ---- guide grid (the law: parity.guide) ---- */
/* Holds the one real focus stop for cell browsing (js/guide-focus.js's setFocus); the visible focus
   signature is still the cell's own .focused ring, so the container's own default outline is
   suppressed here rather than left to show a second, redundant ring around the whole grid. */
/* The grid runs to the screen's left and right edges: the channel column plus the window's lane
   (js/guide-row.js measureLane sizes the lane from the law), never wider. */
/* Its own stacking, so the now line can sit under the rows of the rolling guide channel without
   dropping behind the page. */
#guideGrid {
  position: relative;
  isolation: isolate;
  outline: none;
  margin: 0;
  width: max-content;
  min-width: 100%;
}
/* Each row is a scroll stop at the scroller's top, just under the ruler (#guideScroll's snap). */
.g-row {
  display: flex;
  scroll-snap-align: start;
  height: var(--guide-row-h);
  border-bottom: 1px solid var(--border-soft);
}
/* The group head above the first row of each network (js/lineup.js): the network's name. Not a
   row - no focus, and a lineup of the home network's rows alone draws none, so the one-server guide
   keeps its geometry. Its height is the label's own line plus a quarter row of room above it, so the
   name never reaches up under the row before, whose sticky channel column paints over it. The label
   sits where the channel column does and stays put when the grid scrolls. */
.g-group {
  display: flex;
  padding-top: calc(var(--guide-row-h) / 4);
  border-bottom: 1px solid var(--border-soft);
}
.g-group .label {
  position: sticky;
  left: 0;
  padding: 0 8px 3px;
  font-size: var(--type-label);
  line-height: 1.2;
  color: var(--muted);
}
/* The channel column: the number and the channel's wordmark, or its name where it has none, the
   number on the title's line. A <button>, so the shared button chrome is stripped back, the pointer
   floor too: the row sets its height and its own rule shows under it. A finger's row clears the
   floor itself (css/components/touch.css). */
.g-chan {
  flex: 0 0 var(--guide-channel-col);
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0 8px 0 var(--page-margin);
  background: var(--panel);
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  text-align: left;
  overflow: hidden;
}
/* The sticky column meets the scroller's left clip edge, so its focus ring stays inside the button. */
#guide button.g-chan:focus {
  box-shadow: var(--focus-ring-inset);
}
.g-chan > * + * {
  margin-left: 8px;
}
.g-chan .num {
  font-size: var(--type-label);
  font-weight: 700;
  min-width: 22px;
  flex: none;
}
/* The 320x80 wordmark canvas fills the width the number leaves, at most 100 x 25: 94 x 23.5 beside a
   one-digit number, 74 x 18.5 beside "M1-12". */
.g-chan .logo {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100px;
  height: 25px;
  object-fit: contain;
  object-position: right center;
}
/* The name stands in for a wordmark that is missing or fails to load (the picture leaves the row). */
.g-chan .logo + .name {
  display: none;
}
.g-chan .name {
  font-size: var(--type-micro);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.g-chan .fav {
  color: var(--accent-text);
  font-size: var(--type-label);
}
.g-cells {
  position: relative;
  flex: 0 0 auto;
}
/* Two lines per cell (parity.guide.cellLines): the programme's title with its facts - rating badge,
   minutes left while airing, CC and HD marks - then the episode's own title, at
   parity.guide.cellPaddingEpx. */
.g-cell {
  position: absolute;
  top: 2px;
  bottom: 2px;
  /* Resting tier by default (CellFill's baseColor when !airing): a cell that is not airing right
     now, future OR already past alike - IsCurrent never branches on past-ness, so there is no
     separate past-cell treatment. .airing below raises it to the other tier for the one cell that is on
     right now. */
  background: var(--panel);
  color: var(--on-cell);
  /* No edge of its own: the cells sit in the grid's 2px gutters and their fills do the separating
     (the contract mixes the category into the fill) rather than a hairline round each one, which
     would read as spreadsheet rules over tinted blocks at ten feet. The focus signature below is an
     outline, unaffected. */
  border: 0;
  border-radius: var(--radius); /* one radius (layout D): the cell's own square token is retired */
  padding: 0 8px;
  font-size: var(--type-label);
  /* The title's line pitch, which the marks' badges fill exactly. */
  --cell-line: calc(var(--type-label) * 1.3);
  overflow: hidden;
  white-space: nowrap;
}
/* A sliver against the window's end: no side padding, so its box ends where the lane does. */
.g-cell.sliver {
  padding-left: 0;
  padding-right: 0;
}
/* A cell that starts at or before the window's first minute meets the channel column
   (js/guide-row.js renderRow): its two corners on the column are square so no gap opens there. */
.g-cell.touches-column {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.g-cell.airing {
  background: var(--elevated);
}
/* The airing cell's progress: how far into the programme the clock is, painted under the text. */
.g-cell .prog {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--history);
  opacity: 0.28;
  pointer-events: none;
}
/* .label wraps the lines for the pinned-text translateX (js/guide-row.js's updateStickyTitles), one
   box the transform moves whole, the cell's full height with its words centred top to bottom. It
   stands a layer above the now line, so the line passes under the words. */
.g-cell .label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  position: relative;
  z-index: 1;
}
/* Line one: the title, then the time left and the rating and CC / HD marks, all on one centre; a long
   title gives way to its ellipsis before any fact gives way. */
.g-cell .head {
  display: flex;
  align-items: center;
  min-width: 0;
}
.g-cell .head > * + * {
  margin-left: 6px;
}
/* The continuation mark before a clipped programme's start (js/guide-cell-text.js), raised to its
   optical centre: the glyph's ink sits low in its line. */
.g-cell .since {
  position: relative;
  top: -0.1em;
}
.g-cell .t {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--cell-line);
}
.g-cell .marks {
  display: inline-flex;
  flex: none;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}
.g-cell .marks > * + * {
  margin-left: 4px;
}
.g-cell .marks:empty {
  display: none;
}
/* The facts ride line one beside the title rather than a line of their own; margin-right keeps the
   marks at the cell's right edge, where every other head puts its indicators. */
.g-cell .facts {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-right: auto;
  font-size: var(--type-micro);
  color: var(--on-cell-variant);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
}
.g-cell .facts:empty {
  display: none;
}
/* The minimum-text rule (js/guide-grid-geometry.js cellTextTier, carried on data-text): a cell below
   the full tier drops its facts, and one at none keeps its fill and focus ring with no words. */
.g-cell:not([data-text="full"]) .facts {
  display: none;
}
.g-cell[data-text="none"] .label {
  visibility: hidden;
}
/* The episode's own title. A row is one line of text (parity.guide.cellLines), so it is carried for
   the cell's accessible name and the pinned-text wrapper and never drawn; the band's facts line
   names the episode for the focused programme. */
.g-cell .ep {
  display: none;
  margin-top: 0.1em;
  font-size: var(--type-micro);
  color: var(--on-cell-variant);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-cell .mark.empty {
  visibility: hidden;
} /* the CC slot held open beside HD */
.g-cell .rating,
.g-cell .mark {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: var(--radius-small);
  padding: 0 4px;
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  /* Less its two border rows, the badge's box is the title's line. */
  line-height: calc(var(--cell-line) - 2px);
}