/* Copyright Ayers Electronics Inc. All rights reserved. */
/* the settings page. */
/* The SETTINGS page at the standard page margin (48/24, not the guide's tight one). The page itself never
   scrolls: the category column and the rows each scroll in their own pane under the head row, and both
   end on the safe line at the foot. */
#settingsPage {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 8px var(--page-margin) 16px;
}
/* The Settings page wears the Networks card's grammar: sections as .gate-group fieldsets with their
   legends, the rows as the Networks page's rows. The card takes the page's height for the split. */
.settings-card {
  flex: 1;
  min-height: 0;
  width: 100%;
}
/* The column of categories at the left, the active category's rows at the right, both the page's full
   height. Each pane scrolls by itself and keeps room at its edges for a whole focus ring, and a step
   brings a ring fully into view. */
.settings-split {
  --settings-ring-room: 6px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 20px;
  height: 100%;
}
.settings-column {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--settings-ring-room);
  scroll-padding: var(--settings-ring-room);
}
/* A pitch at which every category, the admin's included, fits above the safe line at 540. */
.settings-column > * + * {
  margin-top: 2px;
}
.settings-cat-btn {
  flex: none;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-size: var(--type-body);
  line-height: max(1.2em, var(--text-pitch-floor));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
}
/* The open category is a quiet neutral selection. Focus keeps the shared branded focus face. */
.settings-cat-btn.active {
  color: var(--text);
  font-weight: 600;
  background: var(--elevated);
  border-color: var(--border-soft);
}
.settings-pane {
  min-width: 0;
  overflow-y: auto;
  padding: var(--settings-ring-room);
  scroll-padding: var(--settings-ring-room);
}
.settings-page-items {
  margin-top: 0;
}
.settings-group {
  margin: 0 0 12px;
}
.settings-section-title {
  margin: 22px 0 8px;
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
legend.settings-section-title {
  margin: 0;
  padding: 0 6px;
}
.settings-page-items > .settings-section-title:first-child {
  margin-top: 0;
} /* the first section starts at the margin */
.settings-row-btn {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-size: var(--type-body);
  line-height: max(1.15em, var(--text-pitch-floor));
}
/* The two columns every settings row draws (js/settings-row.js rowButton): the name and its badge at
   the left, the row's kind after them, the value flush right. Spacing is margins - the television's
   WebView draws no flex gap. */
.settings-row-split {
  display: flex;
  align-items: center;
}
.settings-row-split .lab {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.settings-row-split .name {
  min-width: 0;
}
/* The row's help line, under its name inside the row. */
.settings-row-split .help {
  margin-top: 2px;
  font-size: var(--type-label);
  font-weight: 400;
  line-height: max(1.3em, var(--text-pitch-floor));
  color: var(--muted);
}
/* Playback's ten rows cannot each carry a help line, so there only the focused row opens its own,
   inside the accent fill; every other category keeps every row's help line visible. */
.settings-cat[data-cat="playback"] .settings-row-split .help {
  display: none;
}
.settings-cat[data-cat="playback"] .settings-row-split:focus .help {
  display: block;
}
/* A choice row's pills on one line at the row's right edge, the one in use lit; the name takes what
   is left. */
.settings-row-split .choices {
  flex: none;
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
  padding-left: 16px;
}
.settings-row-split .choice {
  margin: 2px 0 2px 6px;
  padding: 3px 11px;
  font-size: var(--type-label);
  line-height: 1.15; /* a pill keeps its own pitch, never the row's floor */
  font-weight: 400;
  white-space: nowrap;
  color: var(--on-panel-variant);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
}
.settings-row-split .choice.on {
  color: var(--text);
  background: var(--elevated);
  border-color: var(--border);
}
.settings-row-split .sub {
  margin-left: 12px;
  font-size: var(--type-label);
  line-height: max(1.15em, var(--text-pitch-floor));
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}
.settings-row-split .value {
  margin-left: auto;
  padding-left: 16px;
  font-size: var(--type-label);
  line-height: max(1.15em, var(--text-pitch-floor));
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}
/* The focused row wears the one focus face (base.css); the words inside it take the fill's ink. */
.settings-row-split:focus .sub,
.settings-row-split:focus .value {
  color: var(--on-accent);
}
.settings-row-split:focus .help {
  color: var(--on-accent);
  opacity: 0.8;
}
/* On the accent fill the choices are outlined in the row's own ink and the one in use is a light
   pill with dark words. */
.settings-row-split:focus .choice {
  color: var(--on-accent);
  background: transparent;
  border-color: var(--on-accent);
}
.settings-row-split:focus .choice.on {
  color: var(--bg);
  background: var(--text);
  border-color: var(--text);
}
/* A row a switch elsewhere keeps off: still a stop, its value in the muted ink, its help the reason. */
.settings-row-btn[aria-disabled="true"] .value {
  color: var(--muted);
}
/* A read-only fact row: the row's width and padding, the muted ink, no control. */
.settings-fact {
  padding: 6px 12px;
  font-size: var(--type-label);
  color: var(--muted);
  line-height: max(1.35em, var(--text-pitch-floor));
}
.settings-fact:empty {
  display: none;
}
/* About and Credits' facts stand in one card: the app's line first, in the text ink and heavier, then
   the server, its address and the profile, a line each. */
.settings-about-card {
  margin: 4px 0 12px;
  padding: 10px 0;
  border-radius: var(--radius);
  background: var(--panel);
}
.settings-about-card:empty {
  display: none;
}
.settings-about-card .settings-fact:first-child {
  font-size: var(--type-body);
  font-weight: 700;
  color: var(--text);
}
/* The catalog's credit, the last section of Credits: TMDB's own mark over the title, the notice and the
   address. The mark keeps its own colours and stands smaller than the product's mark. */
.settings-credit-mark {
  display: block;
  height: 16px;
  width: auto;
  margin-bottom: 6px;
}
.settings-credit-address {
  color: inherit;
}
/* Your Free Viewing's legend: the name at the left, the household and the last-read words at the
   right, wrapping under it when the card is narrow. */
/* Each child stands 16px from the one before it and 4px under a line above; the legend's own left
   margin takes back the first child's 16px on every line, so a wrapped line starts at the edge. */
.usage-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  margin-left: -16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: var(--type-micro);
  padding-top: 10px;
}
.usage-legend > * {
  margin: 4px 0 0 16px;
}
/* The aside's words stand 12px apart the same way: 4px of its 16px here and 12px on each word. The
   aside stands 4px under a line above like any child; its words stand 4px over a line below, the last
   line's 4px taken back at the aside's foot. */
.usage-legend > .usage-legend-aside {
  margin: 4px 0 -4px 4px;
}
.usage-legend-aside {
  display: flex;
  flex-wrap: wrap;
  font-weight: 400;
  letter-spacing: normal;
}
.usage-legend-aside > * {
  margin: 0 0 4px 12px;
}
/* The Usage section (js/binge.js, js/settings.js): a row per
   budget - the label with its reset under it at the left, a thin bar of what is used in the middle, "N%
   used" at the right - read-only, never a D-pad stop. */
.usage-row {
  display: grid;
  grid-template-columns: minmax(220px, 3fr) minmax(0, 2fr) auto;
  align-items: center;
  column-gap: 24px;
  padding: 10px 14px;
} /* the countdown line under the label keeps one line at the card's width */
.usage-label {
  font-size: var(--type-body);
  color: var(--text);
  line-height: max(1.35em, var(--text-pitch-floor));
}
.usage-sub {
  font-size: var(--type-label);
  line-height: max(1.35em, var(--text-pitch-floor));
  color: var(--muted);
  margin-top: 2px;
}
.usage-bar {
  height: 6px;
  border-radius: var(--radius-small);
  background: var(--track);
  overflow: hidden;
}
.usage-bar > div {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: var(--radius-small);
}
.usage-pct {
  font-size: var(--type-label);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}