/* Settings panel. The title row (Settings + round buttons + close) stays at the top while the list scrolls under
   it. The row bleeds over the panel padding so it covers the whole width, and keeps its own glass so the rows
   sliding underneath do not show through the title. */
#topbar-settings-popup {
  --airshow-settings-pad-top: 12px;
  --airshow-settings-pad-x: 14px;
}
@media (pointer: coarse) and (max-width: 980px), (hover: none) and (max-width: 980px), (any-hover: none) and (max-width: 980px), (max-width: 980px) and (max-height: 700px) {
  #topbar-settings-popup {
    --airshow-settings-pad-top: 6px;
    --airshow-settings-pad-x: 8px;
  }
}
html.airshow-mobile-runtime #topbar-settings-popup {
  --airshow-settings-pad-top: 6px;
  --airshow-settings-pad-x: 8px;
}
#topbar-settings-popup .topbar-settings-head-row {
  position: sticky;
  top: calc(-1 * var(--airshow-settings-pad-top));   /* sticks to the panel edge, not inside its padding */
  z-index: 20;
  margin: calc(-1 * var(--airshow-settings-pad-top)) calc(-1 * var(--airshow-settings-pad-x)) 6px;
  padding: var(--airshow-settings-pad-top) var(--airshow-settings-pad-x) 10px;
  border-radius: 11px 11px 0 0;
  background: rgba(18, 24, 36, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.6);
}
/* The Units readout keeps sticking while Units is open, now just under the title row. */
#topbar-settings-popup .topbar-settings-group-units:not(.collapsed) .units-readout-item {
  top: calc(var(--airshow-settings-head-h, 56px) - var(--airshow-settings-pad-top) - 1px);
}

/* Hierarchy, top to bottom:
   1. Title row: "Settings" in the house yellow.
   2. Section: a numbered row-marker tag ("01", like the row numbers above airline seats) and the name in white caps.
   3. Group inside a section ("AIRCRAFT", "AIRPORTS"): small grey caps over its card.
   4. Rows: grouped in a quiet card with hairlines between them; labels are lighter than the values they set. */
#topbar-settings-popup {
  --airshow-settings-accent: color-mix(in srgb, var(--airshow-theme-color) 42%, #ffffff);
  --airshow-settings-card: rgba(255, 255, 255, 0.045);
  --airshow-settings-hairline: rgba(255, 255, 255, 0.07);
}
#topbar-settings-popup .topbar-settings-head {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
#topbar-settings-popup .topbar-settings-main-content {
  counter-reset: airshow-settings-section;
}

/* Cards */
#topbar-settings-popup .topbar-settings-card {
  padding: 0 10px;
  border: 1px solid var(--airshow-settings-hairline);
  border-radius: 10px;
  background: var(--airshow-settings-card);
}
#topbar-settings-popup .topbar-settings-card > .topbar-settings-item {
  min-height: 30px;
  padding-top: 7px;
  padding-bottom: 7px;
}
#topbar-settings-popup .topbar-settings-card > .topbar-settings-item.topbar-settings-item-stack {
  padding-top: 10px;
  padding-bottom: 10px;
}
#topbar-settings-popup .topbar-settings-card > * + * {
  border-top: 1px solid var(--airshow-settings-hairline);
}
#topbar-settings-popup .topbar-settings-card > [hidden] + *,
#topbar-settings-popup .topbar-settings-card > [style*="display: none"] + * {
  border-top: 0;
}
#topbar-settings-popup .topbar-settings-language-row.topbar-settings-card {
  margin: 4px 0 2px;
}

/* Sections */
#topbar-settings-popup .topbar-settings-group {
  counter-increment: airshow-settings-section;
  padding-bottom: 0;
}
#topbar-settings-popup .topbar-settings-group + .topbar-settings-group {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}
#topbar-settings-popup .topbar-settings-group:not(.collapsed) {
  padding-bottom: 8px;
}
#topbar-settings-popup .topbar-settings-subhead {
  justify-content: flex-start;
  gap: 9px;
  margin: 8px -6px 4px;
  padding: 8px 6px;
  min-height: 22px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.11em;
}
#topbar-settings-popup .topbar-settings-group:not(.collapsed) .topbar-settings-subhead {
  color: #ffffff;
}
#topbar-settings-popup .topbar-settings-subhead::before {
  content: counter(airshow-settings-section, decimal-leading-zero);
  flex: 0 0 auto;
  min-width: 22px;
  padding: 3px 0 2px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}
#topbar-settings-popup .topbar-settings-group:not(.collapsed) .topbar-settings-subhead::before {
  color: #0c1018;
  border-color: var(--airshow-settings-accent);
  background: var(--airshow-settings-accent);
  opacity: 1;
}
#topbar-settings-popup .topbar-settings-subhead::after {
  margin-left: auto;
}
/* A closed section shows only its name; its cards and group names fold with the rows. */
#topbar-settings-popup .topbar-settings-group.collapsed > :not(.topbar-settings-subhead) {
  display: none;
}

/* Groups inside a section */
#topbar-settings-popup .topbar-settings-sublabel {
  margin: 12px 2px 6px;
  color: rgba(214, 224, 238, 0.55);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#topbar-settings-popup .topbar-settings-subhead + .topbar-settings-sublabel {
  margin-top: 4px;
}

/* Rows */
#topbar-settings-popup .topbar-settings-label {
  color: rgba(226, 234, 244, 0.84);
  font-weight: 500;
}
#topbar-settings-popup .topbar-settings-inline-value {
  color: #ffffff;
}
#topbar-settings-popup .topbar-settings-select {
  width: clamp(104px, 50%, 142px);   /* the card padding would otherwise cut "High Zoom Only" */
  height: 30px;
  border-color: rgba(255, 255, 255, 0.12);
  background-color: rgba(0, 0, 0, 0.3);
  font-size: 12.5px;
}
#topbar-settings-popup .topbar-settings-range-scale {
  margin-top: 4px;
  opacity: 0.6;
  font-size: 9.5px;
}

/* Phones: the panel is narrow, so the cards hug the edge and rows are tighter. */
@media (pointer: coarse) and (max-width: 980px), (hover: none) and (max-width: 980px), (any-hover: none) and (max-width: 980px), (max-width: 980px) and (max-height: 700px) {
  #topbar-settings-popup .topbar-settings-card {
    padding: 0 8px;
    border-radius: 9px;
  }
  #topbar-settings-popup .topbar-settings-card > .topbar-settings-item {
    min-height: 26px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  #topbar-settings-popup .topbar-settings-subhead {
    margin: 6px -4px 2px;
    padding: 6px 4px;
    font-size: 11px;
  }
  #topbar-settings-popup .topbar-settings-head {
    font-size: 14px;
  }
}
html.airshow-mobile-runtime #topbar-settings-popup .topbar-settings-card {
  padding: 0 8px;
  border-radius: 9px;
}
html.airshow-mobile-runtime #topbar-settings-popup .topbar-settings-card > .topbar-settings-item {
  min-height: 26px;
  padding-top: 5px;
  padding-bottom: 5px;
}
html.airshow-mobile-runtime #topbar-settings-popup .topbar-settings-subhead {
  margin: 6px -4px 2px;
  padding: 6px 4px;
  font-size: 11px;
}
html.airshow-mobile-runtime #topbar-settings-popup .topbar-settings-head {
  font-size: 14px;
}
/* Korean, Japanese and Chinese have no capitals; wide caps tracking only spreads their characters apart. */
html:is([data-ui-language="ko"], [data-ui-language="ja"], [data-ui-language="zh-CN"]) #topbar-settings-popup .topbar-settings-sublabel,
html:is([data-ui-language="ko"], [data-ui-language="ja"], [data-ui-language="zh-CN"]) #topbar-settings-popup .topbar-settings-subhead {
  letter-spacing: 0.02em;
}
html:is([data-ui-language="ko"], [data-ui-language="ja"], [data-ui-language="zh-CN"]) #topbar-settings-popup .topbar-settings-sublabel {
  font-size: 11px;
}