:root {
  color-scheme: light dark;
  --fg: #1a1a1a;
  --muted: #666;
  --accent: #2a6db0;
  --bg: #fdfdfd;
  --border: #e5e5e5;
  --code-bg: #f4f4f4;
  --tag-bg: #eef3f8;
  --max: 720px;
}

/* Dark palette. Applied when the reader explicitly chooses dark, or when the OS
   prefers dark and they have not explicitly chosen light. The two selectors
   share one block so the values stay in sync. */
:root[data-theme="dark"] {
  --fg: #e8e8ea;
  --muted: #9aa0a6;
  --accent: #6fb1ef;
  --bg: #15171c;
  --border: #2c2f36;
  --code-bg: #22262d;
  --tag-bg: #232b35;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fg: #e8e8ea;
    --muted: #9aa0a6;
    --accent: #6fb1ef;
    --bg: #15171c;
    --border: #2c2f36;
    --code-bg: #22262d;
    --tag-bg: #232b35;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
}

@media (prefers-reduced-motion: no-preference) {
  body { transition: background-color 0.2s ease, color 0.2s ease; }
}

.site-header,
.content,
.site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.site-title {
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--fg);
}

.site-nav a {
  margin-left: 1rem;
  text-decoration: none;
  color: var(--muted);
}

.site-nav a:hover { color: var(--accent); }

.site-nav {
  display: flex;
  align-items: center;
}

/* Theme toggle. The icon shows the action the reader can take: a moon when the
   page is light (click to go dark), a sun when it is dark (click to go light).
   It mirrors the same light/dark resolution rules as the palette above. */
.theme-toggle {
  margin-left: 1rem;
  padding: 0;
  width: 1.9rem;
  height: 1.9rem;
  line-height: 1;
  font-size: 1.05rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.theme-toggle::before { content: "\263E"; } /* ☾ moon: light mode, click for dark */
:root[data-theme="dark"] .theme-toggle::before { content: "\2600"; } /* ☀ sun */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle::before { content: "\2600"; }
}

.content { padding-top: 2rem; padding-bottom: 3rem; }

a { color: var(--accent); }

.page-title { margin-top: 0; }

.post-title { margin-bottom: 0.25rem; }

.post-meta,
.post-list-meta {
  color: var(--muted);
  font-size: 0.9rem;
}

.post-body { margin-top: 1.5rem; }

.post-body pre {
  background: var(--code-bg);
  padding: 0.85rem 1rem;
  overflow-x: auto;
  border-radius: 6px;
}

.post-body code {
  background: var(--code-bg);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

.post-body pre code { background: none; padding: 0; }

.post-list { list-style: none; padding: 0; }

.post-list-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.post-list-title {
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  display: block;
}

.post-list-summary { margin: 0.4rem 0 0; color: var(--muted); }

.post-tags,
.taxonomy-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.post-tags { margin-top: 1.5rem; }

.post-tags a,
.tag-cloud a {
  text-decoration: none;
  background: var(--tag-bg);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.85rem;
}

.taxonomy-list .count { color: var(--muted); font-size: 0.85rem; }

/* Follow-up badge shown in post listings. */
.badge-followup {
  text-decoration: none;
  background: var(--tag-bg);
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
}

/* Language switcher and follow-up relationship blocks on a post page. */
.post-translations {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

.post-translations-label { color: var(--muted); }

.post-translation {
  text-decoration: none;
  background: var(--tag-bg);
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
}

.post-translation.current {
  color: var(--muted);
  font-weight: 600;
}

.post-original {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.post-followups {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.post-followups-title { font-size: 1.1rem; margin: 0 0 0.5rem; }

.post-followups-list { margin: 0; padding-left: 1.2rem; }

/* Cover image at the top of a post. */
.post-cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 1.25rem;
}

/* Thumbnail in listings: a small cover to the left of the title. */
.post-list-thumb {
  float: left;
  margin: 0.1rem 0.9rem 0.4rem 0;
}

.post-list-thumb img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 6px;
}

.post-list-item { overflow: hidden; } /* contain the floated thumbnail */

/* Version-history banner and switcher. */
.post-version-banner {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0.5rem 0 0;
}

.post-version-banner a { margin-right: 0.6rem; }

.post-version-nav {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

.post-version-label { color: var(--muted); }

.post-version {
  text-decoration: none;
  background: var(--tag-bg);
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
}

.post-version.current { color: var(--muted); font-weight: 600; }

.site-footer {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  padding-bottom: 2rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.empty { color: var(--muted); }