/* Copyright Ayers Electronics Inc. All rights reserved. */
/* On Demand filter row. */

/* ---- On Demand filter row (js/on-demand-filters.js): the genre and sort controls beside the search box ----
   A menu button sized like the segmented control next to it; a small triangle marks it as a list,
   and the value it currently holds is its text. flex: none so it holds its width while the search
   box gives up its own (layout.css). */
.filter-ctl {
  flex: none;
  display: inline-flex;
  align-items: center;
  max-width: 40vw;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: var(--type-label);
  letter-spacing: 0.12em;
  padding: 6px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The drawn icons (real icons, not glyph text): the player bundle's <media-icon>,
   sized here per seat - the chevron that says a control opens a list, the sort arrows. */
.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.15em;
}
/* The sprite of drawn marks at the top of index.html: defined once, never itself on screen. */
.icon-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* An icon is a ratio of the text beside it, never a fixed box: the type tokens are relative, so a
   viewer who reads at a larger size gets a larger mark too. The sort arrows want no ratio of their
   own - 1em is what .ico above already gives them. */
/* The chevron follows the control's value, which is text, 8px after it. */
.filter-ctl .ico {
  width: 0.875em;
  height: 0.875em;
  margin-left: 8px;
  color: var(--muted);
}
#guide .filter-ctl:focus {
  box-shadow: var(--focus-ring-inset);
}
#odSortDir {
  flex: none;
}
#odSortDir .seg-btn {
  padding: 6px 12px;
}
/* A direction the server cannot yet honor (js/on-demand-render.js): shown, dimmed, not selectable. */
#odSortDir .seg-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* The genre/sort dropdown list: a panel over the filter row that owns its keys while up
   (onDemandKey routes to filterMenuKey). Fixed to the viewport so the scrolling rails under it never
   clip it; js/on-demand-filters.js sets its position from the button that opened it. */
.filter-menu {
  position: fixed;
  z-index: 30;
  min-width: 180px;
  max-width: 320px;
  max-height: 60vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px var(--scrim);
  padding: 6px;
}
.filter-menu-head {
  font-size: var(--type-micro);
  letter-spacing: 0.14em;
  color: var(--muted);
  padding: 6px 10px 8px;
}
.filter-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  white-space: nowrap;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--type-label);
  padding: 8px 10px;
}
.filter-menu-item.active {
  color: var(--accent-text);
  font-weight: 600;
}
.filter-menu-item:hover {
  background: var(--elevated);
}
#guide .filter-menu-item:focus {
  box-shadow: var(--focus-ring-inset);
}
/* An icon-only close: the X glyph in a 44 px square on the ghost button's own ground. */
.x-btn {
  width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: var(--type-heading);
  line-height: 1;
}
/* The X sits in a card's top right corner, over the card's own content. */
.card-x {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
}
@media (max-width: 767px) {
  .card-x {
    top: calc(6px + var(--safe-top));
    right: max(6px, var(--safe-right));
  }
}

/* A Show Only box and Show Hidden: a tick box and a word, no frame round either (js/on-demand-filters.js).
   The box is drawn here: an edge while off, the accent with a tick while on. */
.filter-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 calc(4 * var(--od-tv-px));
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: var(--type-label);
  white-space: nowrap;
}
.filter-check + .filter-check {
  margin-left: calc(6 * var(--od-tv-px));
}
.filter-check::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: calc(14 * var(--od-tv-px));
  height: calc(14 * var(--od-tv-px));
  margin-right: calc(7 * var(--od-tv-px));
  border: 1px solid var(--muted);
  border-radius: var(--radius-small);
}
.filter-check[aria-checked="true"]::before {
  background: var(--accent);
  border-color: var(--accent);
}
.filter-check[aria-checked="true"]::after {
  content: "";
  position: absolute;
  left: calc(9 * var(--od-tv-px));
  top: 50%;
  width: calc(4 * var(--od-tv-px));
  height: calc(8 * var(--od-tv-px));
  margin-top: calc(-6 * var(--od-tv-px));
  border: solid var(--on-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#guide .filter-check:focus {
  outline: none;
  box-shadow: var(--focus-ring-inset);
}
/* A direction's word follows its arrow. */
#odSortDir .seg-word {
  margin-left: calc(4 * var(--od-tv-px));
}
/* A label names the control under it; on a narrow screen the controls stand in a line and the values
   speak for themselves. */
.filter-label {
  display: none;
}
/* A row the open grid cannot act on folds (js/right-column-sort-filter.js), at every width. */
#ondemand.grid-open #odFilters > [data-row].row-off {
  display: none;
}

/* ---- the library view, 900 wide and up ----
   The preview keeps its place at the top right with the side column under it (css/components/
   side-column.css); the panel of controls is that column's Sort and Filter face
   (js/right-column-sort-filter.js), each control under its label. The rhythm: 12 between sections, 2
   under a label, 4 between a section's rows. Over the cards a View All's breadcrumb line names the page (a library's own wall has none), then
   the page's own name in the rail heading's type (466); the cards fill the rest as a grid
   (css/components/on-demand-cards.css draws each card). js/on-demand-column-layout.test.mjs adds
   these numbers up. */
@media screen and (min-width: 900px) {
  #ondemand.grid-open #odAll {
    position: relative;
  }
  #ondemand.grid-open #odAllHead {
    --column-name: calc(20 * var(--od-tv-px));
    display: block;
    margin: 0;
    padding: 0 0 0 var(--page-margin);
    border: 0;
  }
  #ondemand.grid-open #odAllHead #odAllTitle {
    display: block;
    height: var(--column-name);
    margin: 0;
    font-size: calc(15 * var(--od-tv-px));
    font-weight: 600;
    line-height: var(--column-name);
    letter-spacing: 0.02em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #ondemand.grid-open #odAll > #odCrumbs {
    padding-left: var(--page-margin);
  }
  #ondemand.grid-open #odFilters {
    --column-gap: calc(12 * var(--od-tv-px));
    --column-label: calc(12 * var(--od-tv-px));
    --column-under-label: calc(2 * var(--od-tv-px));
    --column-inside: calc(4 * var(--od-tv-px));
    --column-control: calc(34 * var(--od-tv-px));
    --column-check: calc(20 * var(--od-tv-px));
    position: relative;
    display: block;
    margin: 0;
  }
  #ondemand.grid-open #odFilters > * {
    margin: 0 0 var(--column-gap);
  }
  #ondemand.grid-open #odFilters > .filter-label {
    display: block;
    height: var(--column-label);
    margin: 0 0 var(--column-under-label);
    font-size: calc(11 * var(--od-tv-px));
    line-height: var(--column-label);
    letter-spacing: 0.1em;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #ondemand.grid-open #odFilters .filter-ctl {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: var(--column-control);
    padding: 0 calc(13 * var(--od-tv-px));
  }
  #ondemand.grid-open #odFilters > #odSortBtn,
  #ondemand.grid-open #odFilters > #odShowOnly {
    margin-bottom: var(--column-inside);
  }
  #ondemand.grid-open #odFilters > .filter-checks {
    display: flex;
    height: var(--column-check);
  }
  #ondemand.grid-open #odFilters > #odSortDir {
    display: flex;
    width: 100%;
    height: var(--column-control);
  }
  #ondemand.grid-open #odSortDir .seg-btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 calc(4 * var(--od-tv-px));
  }
  /* A menu control, a box and a direction fill their own row and never run past it: the remote's and
     the mouse's size, under the page's floor (css/base.css), so the column adds up to what its
     numbers say. A finger's floor is raised again under this block and in css/components/touch.css,
     whose rules outrank this one. */
  #odFilters .filter-ctl,
  #odFilters .filter-check,
  #odSortDir .seg-btn {
    min-height: 0;
  }
  /* The cards (css/components/on-demand-cards.css #odAllGrid) in the room left of the column, rows that
     run off the foot so the next row's tops show there is more. The grid moves by the page's one
     glide (js/scroll-motion.js glideTo, js/focus-view.js), the way #odScroll does: no scroll-snap
     fighting a step it did not ask for. */
  #ondemand.grid-open #odAllGrid {
    padding: var(--od-card-gap) 0 0 var(--page-margin);
    scroll-padding-top: var(--od-card-gap);
  }
  /* List: one title to a row across the room left of the column (css/components/on-demand-cards.css
     draws the row). */
  html[data-card-shape="list"] #ondemand.grid-open #odAllGrid > .card {
    width: auto;
  }
}

/* Under a finger the column's short rows take the touch floor: base.css floors every button at the
   control token, and a row cut shorter lets its buttons spill into the section below. The menu
   controls and the sort buttons take the floor in css/components/touch.css. */
@media (pointer: coarse) {
  html:not([data-tv]) #odFilters > .filter-checks,
  html:not([data-tv]) #odFilters > #odSortDir,
  html:not([data-tv]) #odFilters .filter-check {
    min-height: var(--control-min-height, 44px);
  }
}

/* ON DEMAND keeps no description band; the preview lives in the pane's top block. */
#guide.mode-ondemand #guideDetail {
  display: none;
}