/*
  ============================================================
  LIGHT AND DARK COLORS — shared by every page of this site
  ============================================================
  The pages use these named colors (var(--fg) and so on) instead of
  writing the colors out, so dark mode only has to swap them here.
  Dark mode itself is switched by ../theme.js, the same switch as on the
  rest of kasperbielecki.com, so a visitor's choice carries over.
  The party colors (red, blue, gray) stay the same in both.
*/
:root {
  --bg: #fff;              /* the page */
  --bar: rgba(255, 255, 255, 0.92);   /* the bar pinned to the top */
  --fg: #222;              /* normal text */
  --strong: #000;          /* text you're hovering over */
  --text-2: #444;          /* a step lighter than normal text */
  --text-3: #555;
  --muted: #666;           /* small gray text */
  --faint: #777;
  --fainter: #999;         /* the faintest text */
  --line: #e5e5e5;         /* borders and dividers */
  --line-soft: #eee;
  --panel: #fafafa;        /* boxes a shade off the page */
  --band: #f0f0f0;         /* the gray areas in the drawings */
  --link: #1f5bbf;
  --tint-r: #f9e5e2;       /* light red: a Republican majority */
  --tint-d: #e2eaf8;       /* light blue: a Democratic majority */
  --tint-none: #efefef;    /* neither */
  --empty-seat: #9a9a9a;   /* the outline of an empty seat */
  --gray-line: #bbb;       /* thin lines in the drawings */
  --switch-off: #ccc;      /* the on/off switches on the Congress page */
  --switch-on: #444;
  --fade: #fff;            /* what pale colors fade toward */
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #121212;           /* the same dark gray as the rest of the site */
  --bar: rgba(18, 18, 18, 0.92);
  --fg: #e6e6e6;
  --strong: #fff;
  --text-2: #c8c8c8;
  --text-3: #b4b4b4;
  --muted: #a0a0a0;
  --faint: #8c8c8c;
  --fainter: #777;
  --line: #333;
  --line-soft: #2a2a2a;
  --panel: #1b1b1b;
  --band: #222;
  --link: #8ab4f8;
  --tint-r: #3d2321;
  --tint-d: #1e2a40;
  --tint-none: #2a2a2a;
  --empty-seat: #777;
  --gray-line: #555;
  --switch-off: #444;
  --switch-on: #8c8c8c;
  --fade: #2a2a2a;         /* a touch lighter than the page, so the palest dots still show */
  color-scheme: dark;
}

/* The dark mode switch (added to the top bar by ../theme.js): the same
   sliding switch as on the rest of the site, sun on the left, moon on
   the right. It sits at the far right of the bar. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 18px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  cursor: pointer;
}
.theme-toggle svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.theme-toggle svg:last-child {
  fill: currentColor;
  stroke: none;
}
.theme-toggle .track {
  position: relative;
  width: 34px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 9px;
  box-sizing: border-box;
}
.theme-toggle .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  transition: transform .15s;
}
.theme-toggle[aria-checked="true"] .knob {
  transform: translateX(16px);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}
/* The page's name takes up the slack, so the links and the switch
   line up on the right. */
.site-header > :first-child {
  margin-right: auto;
}
@media (max-width: 520px) {
  .theme-toggle { margin-left: 12px; gap: 4px; }
  .theme-toggle svg { display: none; }   /* just the switch on phones */
}

/* The link back up to the main page, in front of each page's name:
   "Government Visualization Website ›", shortened to "Government ›"
   on narrower screens. */
@media (max-width: 700px) {
  .crumb-long { display: none; }
}
/* On phones, the page name and links in the bar shorten too
   ("Executive Branch" → "Executive", "White House Staff" → "Staff")
   so everything fits on one line. */
@media (max-width: 520px) {
  .phone-hide { display: none; }
}
/* Keep the Senate / House (and other) links on one line. */
.site-nav { white-space: nowrap; }