/* Theme: follows the system light/dark setting, no toggle.
   Muted greys are kept at or above 4.5:1 against their own background so
   body text, meta lines, and the breadcrumb all clear WCAG AA. */
:root {
  color-scheme: light;

  --bg: #fff;
  --text: #111;
  --muted: #6b6b6b;          /* 5.3:1 on --bg */
  --rule: #e0e0e0;
  --rule-strong: #ccc;
  --quote-text: #4a4a4a;
  --code-bg: #f2f2ef;
  --pre-bg: #f6f6f4;
  --img-bg: #f6f6f4;

  --tok-comment: #6a6a6a;    /* 4.9:1 on --pre-bg */
  --tok-string: #47612f;
  --tok-number: #8a4f24;
  --tok-keyword: #1f4f7a;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: #14140f;
    --text: #e8e6e0;
    --muted: #9a978e;        /* 5.6:1 on --bg */
    --rule: #2e2e28;
    --rule-strong: #45443c;
    --quote-text: #b8b5ac;
    --code-bg: #232320;
    --pre-bg: #1c1c18;
    --img-bg: #232320;

    --tok-comment: #8b887f;  /* 4.8:1 on --pre-bg */
    --tok-string: #a3c07a;
    --tok-number: #d9a066;
    --tok-keyword: #7fb3d9;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Georgia, serif;
  background: var(--bg);
  color: var(--text);
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 24px;
}

/* Shared breadcrumb header: wecreatethis.com / blog / section */
header {
  margin-bottom: 40px;
}

header nav {
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}

header nav a {
  color: var(--text);
  text-decoration: none;
}

header nav a:hover {
  text-decoration: underline;
}

header nav span[aria-current] {
  color: var(--text);
}

#loading {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Section page */

#section-title {
  font-size: 1.4rem;
  font-weight: normal;
  margin-bottom: 8px;
}

.section-head {
  margin-bottom: 40px;
}

#sort-toggle {
  display: none;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

#sort-toggle:hover {
  color: var(--text);
}

#subsections {
  display: none;
  list-style: none;
  margin-bottom: 40px;
}

#subsections li {
  margin-bottom: 12px;
}

#subsections a {
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
}

#subsections a:hover {
  text-decoration: underline;
}

.post-entry {
  margin-bottom: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 24px;
}

/* A post is revealed only once it and every post above it have rendered
   (see revealLoaded in app.js), so content is only ever appended below what
   is already painted, never inserted above it. visibility (not display) so
   hidden posts keep their boxes: the IntersectionObserver still sees them,
   and invisible elements can shuffle freely without counting as layout
   shifts. Height reservation cannot solve this - any estimate is
   viewport-width-dependent and wrong by hundreds of px. */
.post-entry:not(.is-revealed) {
  visibility: hidden;
}

.post-entry:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.post-meta {
  margin-bottom: 32px;
}

.post-meta h2 {
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 1.3;
  margin-bottom: 12px;
}

.post-meta .meta-line {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Rendered markdown, shared by posts and the home page */

.md-content {
  line-height: 1.8;
  font-size: 1rem;
}

/* Unloaded posts get NO reserved height on purpose. Any guess is wrong for
   most posts and collapses to the real height on load, which is a layout
   shift of exactly the amount guessed. Posts render fast enough that an
   unstyled gap is never really seen, and a placeholder that occupies no
   space cannot shift anything when it fills in. */
.md-content.post-placeholder {
  color: var(--muted);
}

/* Headings carry anchor ids, so keep linked headings off the viewport edge. */
.md-content h1,
.md-content h2,
.md-content h3 {
  scroll-margin-top: 24px;
}

.md-content h1 {
  font-size: 1.3rem;
  font-weight: normal;
  margin: 0 0 16px;
}

.md-content h2 {
  font-size: 1.15rem;
  font-weight: normal;
  margin: 36px 0 12px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
}

.md-content h2:first-child {
  margin-top: 0;
}

.md-content h3 {
  font-size: 1rem;
  font-weight: bold;
  margin: 24px 0 8px;
}

.md-content p {
  margin-bottom: 16px;
}

.md-content a {
  color: var(--text);
}

.md-content ul,
.md-content ol {
  margin: 0 0 16px 24px;
}

.md-content li {
  margin-bottom: 8px;
}

/* Images: never wider than the column, never upscaled past their natural
   size, and never so tall they push the rest of the post off screen.
   `height: auto` alone (no `width: auto`) is deliberate: it lets the
   width/height attributes the renderer emits establish an aspect-ratio
   box, so the space is reserved before the file loads. Adding
   `width: auto` would discard that and reintroduce layout shift. */
/* Images: never wider than the column, and sized from the width/height
   attributes the renderer emits so the space is reserved before the file
   loads (this is what keeps layout shift near zero).
   No `max-height` here: clamping the height while the width follows the
   attribute ratio stretches tall images. Portrait images are simply as
   tall as their aspect ratio makes them. */
.md-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 0 16px;
  border-radius: 4px;
  background: var(--img-bg);
}

/* An image with no known intrinsic size (remote, or missing at build time)
   still must not overflow the column. */
.md-content img:not([width]) {
  width: auto;
}

.md-content li img {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

.md-content a img {
  margin-bottom: 0;
}

/* Tables: scroll horizontally on narrow screens rather than overflowing. */

.md-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 0.95rem;
  display: block;
  overflow-x: auto;
}

.md-content th,
.md-content td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.md-content th {
  font-weight: bold;
  border-bottom: 2px solid var(--rule-strong);
  white-space: nowrap;
}

.md-content tbody tr:last-child td {
  border-bottom: none;
}

.md-content blockquote {
  margin: 0 0 16px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--rule);
  color: var(--quote-text);
}

.md-content blockquote p:last-child {
  margin-bottom: 0;
}

/* Code */

.md-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
}

.md-content p code,
.md-content li code,
.md-content td code,
.md-content th code {
  background: var(--code-bg);
  padding: 1px 5px;
  border-radius: 3px;
}

.md-content pre {
  background: var(--pre-bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 16px;
  overflow-x: auto;
  line-height: 1.6;
}

.md-content pre code {
  font-size: 0.85rem;
  background: none;
  padding: 0;
}

.tok-c { color: var(--tok-comment); font-style: italic; }
.tok-s { color: var(--tok-string); }
.tok-n { color: var(--tok-number); }
.tok-k { color: var(--tok-keyword); }

/* Home page markdown tweaks: link lists without bullets */

#home-content ul {
  list-style: none;
  margin-left: 0;
}

#home-content li {
  margin-bottom: 12px;
}

#home-content a {
  font-size: 1.1rem;
  text-decoration: none;
}

#home-content a:hover {
  text-decoration: underline;
}

#home-content p {
  color: var(--muted);
}