/* Plain, early-web aesthetic. No JS, narrow column. Light/dark via color-scheme. */

:root { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

html {
  background: light-dark(#fff, #111);
  color: light-dark(#1f1f1f, #d4d4d4);
}
body {
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.55;
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

h1, h2, h3, h4 {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
}
h1 { font-size: 1.6rem; margin: 0; }
h1 a, h1 a:visited, h1 a:hover { color: light-dark(#1f1f1f, #d4d4d4); text-decoration: none; }
h2 { font-size: 1.3rem; margin-top: 1.5rem; }
h3 { font-size: 1.1rem; margin-top: 1.25rem; }
h4 { font-size: 1rem; margin-top: 1rem; }
small.muted, .muted { color: light-dark(#666, #999); }

/* Editorial link model — measured accent (newspaper-tradition Oxford blue):
   - feed titles and structural links inherit body color so dense lists don't
     read as colored noise.
   - inline body links inside <p> use the Oxford-blue accent so paragraphs
     get visual rhythm and links are obvious in running prose.
   - hover: underline marks every link (standard editorial), except buttons.
   - .cta / .chip / .badge carry their own button affordances and stay
     underline-free on hover.
   Dark-mode accent is lifted to ~10:1 contrast (sat-bumped Oxford blue) so
   inline links sit at or above the body's #d4d4d4 brightness — otherwise the
   accent reads as muted gray-blue against bright prose, the opposite of the
   editorial intent. */
a, a:visited { color: light-dark(#1f1f1f, #d4d4d4); text-decoration: none; }
a:hover { color: light-dark(#1f1f1f, #d4d4d4); text-decoration: underline; }
p a:not(.cta):not(.badge):not(.chip),
p a:not(.cta):not(.badge):not(.chip):visited { color: light-dark(#1d3557, #9cc3ea); }
p a:not(.cta):not(.badge):not(.chip):hover { color: light-dark(#142540, #bcd6f1); text-decoration: underline; }

header .tagline { color: light-dark(#555, #aaa); font-style: italic; margin: 0.25rem 0; }
header nav { font-size: 0.95rem; color: light-dark(#555, #aaa); }
hr { border: none; border-top: 1px solid light-dark(#999, #444); margin: 1rem 0; }

.meta { color: light-dark(#555, #aaa); font-size: 0.9rem; }
.snippet { color: light-dark(#444, #bcbcbc); font-size: 0.95rem; margin: 0.25rem 0 0; }

/* Messages */
.msg {
  background: light-dark(#ffd, #1a1a1a);
  border: 1px solid light-dark(#cc9, #444);
  color: light-dark(inherit, #ffd966);
  padding: 0.5rem 0.75rem;
  margin: 0.75rem 0;
}
.msg-error {
  background: light-dark(#fee, #2a1414);
  border-color: light-dark(#caa, #7a2725);
  color: light-dark(#a33, #ff8a87);
}
.copy-on-click { cursor: pointer; position: relative; }
.copy-on-click::after {
  content: "Copied";
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  font-size: 0.8rem;
  font-weight: bold;
  background: light-dark(#fff, #333);
  color: light-dark(#333, #fff);
  padding: 0.1rem 0.5rem;
  border-radius: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.copy-on-click.is-copied::after { opacity: 1; }
.copy-hint { margin-top: -0.5rem; }

/* Pagination */
.section-more { margin: 0.25rem 0 0.5rem; }
.pagination { margin: 0.75rem 0; }
.pagination .disabled { color: light-dark(#aaa, #555); }

footer { color: light-dark(#555, #aaa); font-size: 0.9rem; }
.theme-toggle { margin-top: 0.5rem; font-size: 0.85rem; }
.theme-toggle a { margin: 0 0.15rem; }
.theme-toggle .current { font-weight: bold; text-decoration: none; color: inherit; }