/* The page already picks a theme, so a browser extension should not invert it again. */
html { color-scheme: light; }

.theme-toggle {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font: 600 13px/1 "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
}
header > .eyebrow,
header > .small { order: 1; flex: 1 1 10rem; min-width: 0; }
header > .theme-toggle { order: 2; position: static; margin-left: auto; flex: 0 0 auto; }
header > h1 { order: 3; flex-basis: 100%; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bar .theme-toggle { color: #fff; border-color: rgba(255, 255, 255, .55); }
.bar .theme-toggle:hover { color: #fff; }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e7eee8;
  --muted: #b7c4b9;
  --line: #3a463e;
  --paper: #121614;
  --card: #1c2420;
  --accent: #9dceb4;
  --maybe: #e6c27a;
}

html[data-theme="dark"] table,
html[data-theme="dark"] .reply,
html[data-theme="dark"] .card { background: var(--card); color: var(--ink); }
html[data-theme="dark"] th,
html[data-theme="dark"] .tag { background: #243028; color: #d5e6da; }
html[data-theme="dark"] .btn,
html[data-theme="dark"] .bar { background: #2f4a3c; color: #fff; }
html[data-theme="dark"] .bar a,
html[data-theme="dark"] .btn { color: #fff; }