/* Tokens. Colours and fonts match /phpstan-231-benchmarks/; dividers use alpha so they sit on any surface. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #ffffff;
  --fg: #1b2230;
  --muted: #5b6577;
  --rule: rgb(27 34 48 / 0.1);
  --rule-strong: rgb(27 34 48 / 0.2);
  --link: #1f6feb;
  --link-hover: #1858c2;
  --code-bg: rgb(27 34 48 / 0.06);
  --hero-bg: transparent;
  --shadow: 0 6px 24px rgb(20 28 45 / 0.14);
  --cold-off: #1f6feb; --cold-on: #e8890c; --commit: #0f9d6b; --hot: #8b5cf6; --mago: #7a8496;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #11151c; --panel: #171c25; --fg: #e6eaf1; --muted: #9aa4b5;
    --rule: rgb(255 255 255 / 0.1); --rule-strong: rgb(255 255 255 / 0.2);
    --link: #5b9bff; --link-hover: #8db8ff; --code-bg: rgb(255 255 255 / 0.08);
    --hero-bg: #9aa5b5; --shadow: none;
    --cold-off: #5b9bff; --cold-on: #f2a33a; --commit: #34c48f; --hot: #a78bfa; --mago: #8d97a8;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #11151c; --panel: #171c25; --fg: #e6eaf1; --muted: #9aa4b5;
  --rule: rgb(255 255 255 / 0.1); --rule-strong: rgb(255 255 255 / 0.2);
  --link: #5b9bff; --link-hover: #8db8ff; --code-bg: rgb(255 255 255 / 0.08);
  --hero-bg: #9aa5b5; --shadow: none;
  --cold-off: #5b9bff; --cold-on: #f2a33a; --commit: #34c48f; --hot: #a78bfa; --mago: #8d97a8;
}

/* Page */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 1rem; line-height: 1.75; }
.wrap { max-width: calc(40rem + 2 * var(--gutter)); margin: 0 auto; padding: 24px var(--gutter) 48px; isolation: isolate; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--link-hover); }
.site-nav { margin-bottom: 32px; }
.site-nav a { font-size: 1rem; }
@media (min-width: 640px) { .site-nav a { font-size: 0.875rem; } }
.meta { margin: 0; color: var(--muted); font-size: 0.9375rem; }
@media (min-width: 640px) { .meta { font-size: 0.875rem; } }

/* Post header */
.post-header { margin-bottom: 40px; }
.post-header h1 { margin: 0 0 12px; font-size: 1.875rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; text-wrap: pretty; }
@media (min-width: 640px) { .post-header h1 { font-size: 2.25rem; line-height: 1.15; } }

/* Hero: a transparent illustration with dark outlines. Light mode shows it on the page; dark mode gives it a light panel. */
.hero { display: block; position: relative; left: 50%; transform: translateX(-50%); width: min(60rem, calc(100vw - 2 * var(--gutter)));
  margin: 0 0 40px; background: var(--hero-bg); border-radius: min(2vw, 16px); }
.hero img { display: block; width: 100%; height: auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { padding: clamp(12px, 3vw, 32px); } }
:root[data-theme="dark"] .hero { padding: clamp(12px, 3vw, 32px); }

/* Prose: the post body */
.prose { text-wrap: pretty; }
.prose > * { margin-top: 0; margin-bottom: 0; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { font-size: 1.375rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.prose h3 { font-size: 1.125rem; line-height: 1.4; font-weight: 600; }
.prose > * + h2 { margin-top: 2.5em; }
.prose > * + h3 { margin-top: 2em; }
.prose > h2 + *, .prose > h3 + * { margin-top: 0.75em; }
.prose ul, .prose ol { padding-left: 1.375em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--muted); }
.prose strong { font-weight: 600; }
.prose code { font-family: var(--font-data); font-size: 0.875em; background: var(--code-bg); padding: 0.125em 0.375em; border-radius: 4px; }
.prose pre { overflow-x: auto; padding: 16px; background: var(--code-bg); border-radius: 8px; }
.prose pre code { padding: 0; background: none; }
.prose blockquote { margin-left: 0; padding-left: 1em; border-left: 2px solid var(--rule-strong); color: var(--muted); }
.prose img { max-width: 100%; height: auto; }
.prose .footnote { margin-top: 3em; padding-top: 1.5em; border-top: 1px solid var(--rule); color: var(--muted); font-size: 1rem; }
@media (min-width: 640px) { .prose .footnote { font-size: 0.9375rem; } }

/* Table: on the page, row dividers only, scrolls into the gutter when it does not fit */
.table-scroll { margin: 0 calc(-1 * var(--gutter)); overflow-x: auto; white-space: nowrap; }
.prose > .table-scroll { margin-top: 1.5em; margin-bottom: -0.25em; }
.table-inner { display: inline-block; min-width: 100%; padding: 0 var(--gutter); vertical-align: middle; }
table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
@media (min-width: 640px) { table { font-size: 0.9375rem; } }
th, td { padding: 10px 12px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child { padding-left: 0; text-align: left; }
th:last-child, td:last-child { padding-right: 0; }
thead th { border-bottom: 1px solid var(--rule-strong); color: var(--muted); font-weight: 500; }
tbody tr + tr td { border-top: 1px solid var(--rule); }
td { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
td:first-child { font-family: var(--font-body); }

/* Release-speed chart: interactive, so it gets its own surface */
.chart { margin-left: 0; margin-right: 0; padding: 16px; background: var(--panel); border: 1px solid var(--rule); border-radius: 12px; min-width: 0; line-height: 1.5; }
.prose > .chart { margin-top: 1.75em; }
@media (max-width: 560px) { .chart { padding: 12px 10px; } }
.chart .controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.chart .legend { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.chip, .seg button { position: relative; font: inherit; font-size: 0.875rem; cursor: pointer; }
@media (min-width: 640px) { .chip, .seg button { font-size: 0.8125rem; } }
/* 48px touch area on coarse pointers */
.chip::after, .seg button::after { content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, 3rem); height: max(100%, 3rem); transform: translate(-50%, -50%); }
@media (pointer: fine) { .chip::after, .seg button::after { display: none; } }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--rule-strong); border-radius: 999px; background: transparent; color: var(--fg); }
.chip:hover { background: var(--code-bg); }
.chip .sw { flex-shrink: 0; width: 18px; height: 3px; border-radius: 2px; background: var(--c); }
.chip .sw.dash { background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 8px); }
.chip[aria-pressed="false"] { opacity: 0.45; }
.chip-wrap { position: relative; display: inline-flex; }
.chip-tip { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: max-content; max-width: min(300px, calc(100vw - 32px));
  background: var(--panel); color: var(--fg); border: 1px solid var(--rule-strong); border-radius: 8px; box-shadow: var(--shadow);
  padding: 10px 12px; font-size: 0.875rem; line-height: 1.45; text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; transform: translateY(-2px); transition: opacity 0.12s, transform 0.12s, visibility 0.12s; pointer-events: none; }
.chip-tip strong { display: block; font-weight: 600; margin-bottom: 2px; }
.chip-wrap:hover .chip-tip, .chip:focus-visible + .chip-tip { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .chip-tip { transition: none; } }
.chip:focus-visible, .seg button:focus-visible { outline: 2px solid var(--cold-off); outline-offset: 2px; }
.seg { display: inline-flex; margin-left: auto; border: 1px solid var(--rule-strong); border-radius: 8px; overflow: hidden; }
.seg button { padding: 4px 10px; border: 0; background: transparent; color: var(--muted); }
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed="true"] { background: var(--code-bg); color: var(--fg); }
.chart-box { position: relative; height: 380px; }
@media (max-width: 560px) { .chart-box { height: 320px; } }

/* Blog index */
.page-header { margin-bottom: 40px; }
.page-header h1 { margin: 0; font-size: 1.875rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
@media (min-width: 640px) { .page-header h1 { font-size: 2.25rem; line-height: 1.15; } }
.posts { margin: 0; padding: 0; list-style: none; display: grid; gap: 24px; }
.post-card { --radius: 20px; --pad: 12px; position: relative; display: grid; gap: 16px; padding: var(--pad); border: 1px solid var(--rule); border-radius: var(--radius); }
.post-card:hover { border-color: var(--rule-strong); background: var(--code-bg); }
.post-card picture { display: block; border-radius: calc(var(--radius) - var(--pad)); background: var(--hero-bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .post-card picture { padding: clamp(8px, 2vw, 16px); } }
:root[data-theme="dark"] .post-card picture { padding: clamp(8px, 2vw, 16px); }
.post-card img { display: block; width: 100%; height: auto; }
.post-card .body { display: grid; gap: 8px; padding: 0 8px 8px; }
.post-card h2 { margin: 0; font-size: 1.25rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; text-wrap: pretty; }
.post-card h2 a { color: var(--fg); text-decoration: none; }
.post-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-card h2 a:focus-visible { outline: none; }
.post-card:has(a:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
.post-card .excerpt { margin: 0; color: var(--muted); text-wrap: pretty; }
@media (min-width: 640px) { .post-card .excerpt { font-size: 0.9375rem; } }
/* Figures: on wide screens the chart and table break out of the text column, centred, narrower than the hero */
@media (min-width: 900px) {
  .prose > .chart, .prose > .table-scroll { position: relative; left: 50%; transform: translateX(-50%); width: min(52rem, calc(100vw - 2 * var(--gutter))); margin-left: 0; margin-right: 0; }
  .prose > .table-scroll .table-inner { padding: 0; }
  .chart-box { height: 420px; }
}

/* Footer with the GitHub Sponsors card. The card's content is about 56px tall in one row (600px wide)
   and wraps to about 145px on narrow screens, so the frame height follows the layout. */
/* The page is at least one window tall and the footer takes the free space above it, so on a short page
   (the blog index) it sits at the bottom of the window. A long post is unaffected. */
.wrap { display: flex; flex-direction: column; min-height: 100dvh; }
.site-footer { margin-top: auto; padding-top: 64px; color: var(--muted); }
.site-footer p { margin: 0 0 16px; font-size: 1rem; }
@media (min-width: 640px) { .site-footer p { font-size: 0.9375rem; } }
.site-footer iframe { display: block; width: 100%; max-width: 600px; height: 150px; border: 0; }
@media (min-width: 640px) { .site-footer iframe { height: 64px; } }