/* Cycles app theming, loaded after cosmic-cycles.css and modes.css. The header,
   footer, and settings follow the theme. The chart window and its data panels
   keep the app's own tokens, because the charts are drawn in fixed colors. */

.main-layout, .echo-results-panel, .detail-panel, .tooltip {
  color-scheme: dark;
  --bg: #1c1e22; --card: #242628; --bar: #161819; --border: #303438;
  --text: #c0c8d0; --dim: #a9b1bc; --bright: #e0e4ea; --link: #a8bdd0;
  --accent: #FFFF55;
  color: var(--text);
}

.main-layout { background: var(--bar); }

header.site-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 4px 18px;
}
.site-bar {
  background: var(--nav-bg);
  color: var(--nav-fg);
  font-family: var(--font-display);
  font-size: 15px;
}
.site-bar a,
.site-bar .site-name,
.site-bar .site-copy { color: var(--nav-fg); }
#appVersion { margin-left: 12px; }
.site-bar a:hover { color: var(--nav-fg); background: transparent; }
.site-bar a[aria-current="page"] { color: var(--nav-fg); }
.site-bar :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.site-bar .site-name { justify-self: start; }
.site-bar .mode-slot { justify-self: end; }
header.site-bar .site-nav { margin-left: 0; justify-content: center; gap: 4px 10px; }

.mode-menu { inset: 44px 20px auto auto; }

@media (max-width: 700px) {
  header.site-bar { grid-template-columns: 1fr auto; }
  header.site-bar .site-name { flex-basis: auto; }
  header.site-bar .site-nav { order: 3; grid-column: 1 / -1; }
  .mode-menu { inset: 0; margin: auto; height: fit-content; }
}

/* Same three fonts as the site: labels in the display face, prose in serif, data in mono */
.settings { font-family: var(--font-display); font-size: 15px; }
.settings .status, .legend-meta { font-size: 13px; }
.settings output, .settings input[type="number"] { font-family: var(--font); font-size: 13px; font-variant-numeric: tabular-nums; }
.subtitle, .detail-panel p, .tooltip-desc { font-family: var(--font-prose); font-variant-numeric: lining-nums; }
.subtitle { font-size: 15px; }

/* Narrow screens: compact bars, so the chart keeps the height */
@media (max-width: 760px) {
  .subtitle { font-size: 13px; }
  .site-bar { padding: 4px 8px; }
  header.site-bar .site-nav { gap: 2px 4px; }
  header.site-bar .site-nav a, .site-foot .site-nav a { padding: 2px 4px; }
  .site-foot .site-nav { gap: 2px 4px; }
}
/* Keeps the footer on one row, so the chart keeps the height */
@media (max-width: 480px) {
  #appVersion { display: none; }
}
/* The back-to-top link only serves a page that scrolls */
@media (max-width: 760px) and (min-height: 561px) {
  .site-foot .site-ext { display: none; }
}

/* Native checkboxes and sliders ignore the palette, so these are drawn from tokens */
.settings input[type="checkbox"] { appearance: none; flex: none; margin: 0; background: var(--card); border: 1px solid var(--text); border-radius: 0; }
.settings input[type="checkbox"]:checked { background: var(--link); box-shadow: inset 0 0 0 2px var(--card); }
.settings input[type="range"] { appearance: none; height: 14px; background: transparent; }
.settings input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--dim); }
.settings input[type="range"]::-moz-range-track { height: 4px; background: var(--dim); }
.settings input[type="range"]::-webkit-slider-thumb { appearance: none; width: 10px; height: 14px; margin-top: -5px; background: var(--link); border: 1px solid var(--bg); border-radius: 0; }
.settings input[type="range"]::-moz-range-thumb { width: 10px; height: 14px; background: var(--link); border: 1px solid var(--bg); border-radius: 0; }