/* LogStitch — /errors/ section stylesheet.
 *
 * The only external stylesheet on the site. Every hand-authored page inlines
 * its CSS because it is self-contained; this section is generated at scale, so
 * one cacheable file beats a few hundred copies of the same 12 KB block.
 *
 * Three sources, kept faithful so the section does not read as a bolt-on:
 *   · tokens, nav, footer, buttons  — the /vs/ pages
 *   · .invocation / .line / .pill-* — /stitch/, so the stitched panel here and
 *                                     the live tool render identically
 *   · .ps-* before/after framing    — the homepage's "CloudWatch problem" block
 *
 * Where a rule differs from its source it is because this page is static
 * (no toggles, no lazy expansion) — never because it was retyped from memory.
 */

:root {
  --bg-0: #05080f;
  --bg-1: #0a0f1c;
  --bg-2: #0f1626;
  --bg-3: #131c30;
  --border: #1c2538;
  --border-2: #25324c;
  --border-strong: #324264;
  --text: #e6ebf5;
  --text-2: #9eabc6;
  --text-3: #66738f;
  --text-4: #424e6b;
  --accent: #5ea7ff;
  --accent-2: #7fc4ff;
  --accent-3: #4188e8;
  --accent-glow: rgba(94, 167, 255, 0.18);
  --accent-soft: rgba(94, 167, 255, 0.08);
  --good: #44d3a4;
  --warn: #f3b755;
  --err: #ef6b7e;
  --purple: #b289ff;
  --teal: #5edbd0;
  /* Dimmest grey in the palette that still clears WCAG AA (4.5:1) on --bg-0
     and --bg-1. Used wherever de-emphasised text is still content. */
  --code-dim: #7b88a6;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg-0); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body {
  background:
    radial-gradient(1100px 600px at 50% -200px, rgba(94, 167, 255, 0.10), transparent 70%),
    var(--bg-0);
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.narrow { max-width: 820px; margin: 0 auto; padding: 0 32px; }
.mono { font-family: var(--mono); letter-spacing: -0.01em; }
.muted { color: var(--text-3); font-size: 14px; }
.eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.eyebrow .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; box-shadow: 0 0 12px var(--accent); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bg-2); color: var(--text);
  padding: 12px 18px; border: 1px solid var(--border-strong); border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ============ NAV ============ */
nav.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 8, 15, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(28, 37, 56, 0.6);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 64px; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 30px; height: 30px; border-radius: 7px; box-shadow: 0 6px 22px -8px rgba(94, 167, 255, 0.45); }
.brand .name { font-weight: 600; letter-spacing: -0.01em; font-size: 16px; }
.brand .stitch { font-weight: 400; color: var(--text-2); }
.nav-links { display: flex; gap: 28px; }
.nav-links a { color: var(--text-2); font-size: 14px; transition: color .15s; }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 12px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em;
  border: 1px solid var(--border-2); background: var(--bg-2); color: var(--text);
  transition: all .15s;
}
.btn:hover { border-color: var(--border-strong); background: var(--bg-3); }
.btn.primary {
  background: linear-gradient(180deg, #6db0ff 0%, #4f96eb 100%);
  border: 1px solid #5da3f0; color: #061224; font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(94, 167, 255, 0.55);
}
.btn.primary:hover { background: linear-gradient(180deg, #80bcff 0%, #5ea7ff 100%); }
.btn.lg { height: 44px; padding: 0 20px; font-size: 14.5px; border-radius: 10px; }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(2px); }

/* ============ HEADER ============ */
.article-header { padding: 56px 0 20px; }
.breadcrumb {
  font-family: var(--mono); font-size: 12px; color: var(--text-3);
  margin-bottom: 24px; letter-spacing: 0.02em;
}
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--text-2); }
.breadcrumb .sep { margin: 0 8px; color: var(--text-4); }
.breadcrumb .here { color: var(--text-2); }

/* The H1 is the error string itself, verbatim and monospaced — it is what the
   reader typed into a search box, and matching it exactly is the whole promise
   of the page. It wraps rather than truncates: a long error message must stay
   readable, never be cut off with an ellipsis. */
h1.error-title {
  font-family: var(--mono);
  font-size: clamp(21px, 3.1vw, 34px);
  line-height: 1.28;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: anywhere;
  margin-bottom: 18px;
}
h1.page-title {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05; letter-spacing: -0.028em; font-weight: 500;
  text-wrap: balance; margin-bottom: 18px;
}
h1.page-title em {
  font-style: normal;
  background: linear-gradient(180deg, #b6d5ff 0%, #5ea7ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.article-meta {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  color: var(--text-3); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em;
  margin-bottom: 28px;
}
.article-meta .tag {
  border: 1px solid var(--border-2); background: var(--bg-2);
  padding: 3px 9px; border-radius: 999px; color: var(--text-2);
}
.article-meta .tag a { color: inherit; }
.article-meta .tag:hover { border-color: var(--border-strong); }

/* ============ SHORT ANSWER ============ */
.tldr {
  background: linear-gradient(180deg, rgba(94, 167, 255, 0.08), rgba(94, 167, 255, 0.02));
  border: 1px solid rgba(94, 167, 255, 0.25);
  border-radius: 14px;
  padding: 22px 26px;
  margin: 4px 0 32px;
}
.tldr .label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 10px;
}
.tldr p { font-size: 16.5px; line-height: 1.62; color: var(--text); }
.tldr p strong { color: var(--accent-2); font-weight: 600; }
.tldr p + p { margin-top: 10px; }

/* ============ ARTICLE BODY ============ */
article { padding: 0 0 72px; }
article h2 {
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.12; letter-spacing: -0.02em; font-weight: 500;
  margin: 56px 0 16px;
  scroll-margin-top: 80px;
}
article h3 {
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  margin: 28px 0 10px; color: var(--text);
}
article p { color: var(--text-2); font-size: 16px; line-height: 1.7; margin-bottom: 16px; max-width: 720px; }
article p.lead { font-size: 17.5px; color: var(--text); max-width: 760px; }
article a { color: var(--accent-2); border-bottom: 1px solid rgba(127, 196, 255, 0.3); transition: border-color .15s; }
article a:hover { border-bottom-color: var(--accent-2); }
article ul, article ol { color: var(--text-2); font-size: 16px; line-height: 1.7; margin-bottom: 16px; padding-left: 22px; max-width: 720px; }
article li { margin-bottom: 8px; }
article li strong { color: var(--text); font-weight: 600; }
article code {
  font-family: var(--mono); font-size: 13.5px;
  background: var(--bg-2); border: 1px solid var(--border);
  padding: 1.5px 6px; border-radius: 5px; color: var(--accent-2);
  word-break: break-word;
}
article .footnote {
  font-size: 13px; color: var(--text-3); font-style: italic;
  margin-top: 20px; padding-left: 16px; border-left: 2px solid var(--border-2);
  max-width: 720px;
}
article .footnote a { color: var(--text-2); border-bottom-color: var(--border-2); }

/* ============ FACT STRIP ============ */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  margin: 20px 0 8px;
}
.fact { background: var(--bg-1); padding: 13px 15px; }
.fact-value { font-family: var(--mono); font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); }
.fact-label { margin-top: 4px; font-size: 11px; color: var(--text-3); }

/* The CloudWatch Errors-metric answer. Its own treatment because it is the one
   fact on the page that no competing result states, and it is frequently the
   reason someone's dashboard looks healthy while their users do not. */
.metric-note {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--border-2); border-radius: 12px;
  background: var(--bg-1); padding: 16px 18px; margin: 18px 0 8px;
  max-width: 760px;
}
.metric-note .verdict {
  flex: 0 0 auto; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; border: 1px solid;
}
.metric-note .verdict.counts { color: var(--err); border-color: rgba(239, 107, 126, 0.35); background: rgba(239, 107, 126, 0.1); }
.metric-note .verdict.silent { color: var(--warn); border-color: rgba(243, 183, 85, 0.35); background: rgba(243, 183, 85, 0.1); }
.metric-note .verdict.unclear { color: var(--text-3); border-color: var(--border-2); background: var(--bg-2); }
.metric-note p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.metric-note p strong { color: var(--text); }

/* ============ BEFORE / AFTER ============ */
/* The homepage's framing, with real content in both panels. */
.ps-grid {
  display: grid; grid-template-columns: 1fr 34px 1fr;
  gap: 14px; align-items: stretch; margin: 24px 0 8px;
}
.ps-card {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px; min-width: 0;
}
.ps-card.after { border-color: rgba(94, 167, 255, 0.28); background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); }
.ps-card h3 {
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 10px; margin: 0 0 4px;
}
.ps-card .badge {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--border-2); background: var(--bg-3); color: var(--text-3);
}
.ps-card.after .badge { border-color: rgba(94, 167, 255, 0.3); background: rgba(94, 167, 255, 0.1); color: var(--accent-2); }
.ps-card .sub { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin: 0 0 14px; }
.ps-arrow { display: flex; align-items: center; justify-content: center; color: var(--text-4); }

.raw-excerpt {
  font-size: 11.5px; line-height: 1.65; color: var(--text-2);
  overflow-x: auto; max-height: 460px; overflow-y: auto;
  border-top: 1px solid var(--border); padding-top: 10px;
}
.raw-excerpt .rawline { white-space: pre; }

/* ============ INVOCATION CARD (from /stitch/) ============ */
.invocation {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-2);
  border-radius: 10px;
  background: var(--bg-1);
}
.invocation[open] { background: var(--bg-2); border-color: var(--border-2); }
.invocation.status-error, .invocation.status-timeout { border-left-color: var(--err); }
.invocation.status-throttled { border-left-color: var(--warn); }
.invocation.status-success { border-left-color: var(--good); }
.invocation.status-in_progress { border-left-color: var(--text-4); }

.inv-head {
  list-style: none;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 12px 14px;
}
.inv-head::-webkit-details-marker { display: none; }
.badges { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inv-id { font-size: 12px; font-weight: 500; word-break: break-all; }
.attempt {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--warn); border: 1px solid rgba(243, 183, 85, 0.35);
  padding: 1px 5px; border-radius: 5px;
}
.inv-meta { display: inline-flex; gap: 14px; font-size: 11.5px; color: var(--text-2); flex-wrap: wrap; width: 100%; }
.inv-meta .k { color: var(--text-4); }

.pill {
  display: inline-block;
  padding: 2px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em;
  border: 1px solid var(--border-2); background: var(--bg-3); color: var(--text-2);
}
.pill-success { background: rgba(68, 211, 164, 0.12); color: var(--good); border-color: rgba(68, 211, 164, 0.3); }
.pill-error, .pill-timeout, .pill-oom { background: rgba(239, 107, 126, 0.12); color: var(--err); border-color: rgba(239, 107, 126, 0.3); }
.pill-throttled, .pill-partial { background: rgba(243, 183, 85, 0.12); color: var(--warn); border-color: rgba(243, 183, 85, 0.3); }
.pill-cold { background: rgba(94, 219, 208, 0.12); color: var(--teal); border-color: rgba(94, 219, 208, 0.3); }
.pill-in-progress { color: var(--text-3); }

.inv-body { padding: 0 14px 12px; }
.lines { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.line {
  display: grid;
  grid-template-columns: 84px 40px 1fr;
  gap: 10px; align-items: start;
  padding: 5px 0;
  border-bottom: 1px solid rgba(28, 37, 56, 0.5);
  font-size: 12px;
}
.line:last-child { border-bottom: none; }
.line-time { color: var(--text-4); font-size: 10.5px; padding-top: 2px; font-family: var(--mono); }
.line-level {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--text-4); padding-top: 3px;
}
.level-error, .level-fatal { color: var(--err); }
.level-warn { color: var(--warn); }
.level-info { color: var(--accent); }
.line-text {
  font-size: 12px; line-height: 1.6; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word;
  font-family: var(--mono);
}
.line.kind-platform { background: rgba(94, 167, 255, 0.035); }
.line.kind-platform .line-text { color: var(--text-3); }
.line.kind-platform .line-level { color: var(--accent-3); }
.line.is-error .line-text { color: #ffc4cd; }
.line.is-error { background: rgba(239, 107, 126, 0.06); }
.line.is-multiline .line-text { border-left: 2px solid var(--border-2); padding-left: 10px; margin-left: -2px; }
.line-count { grid-column: 3; font-family: var(--mono); font-size: 10.5px; color: var(--text-4); padding-bottom: 2px; }

/* ============ CAUSES ============ */
.causes { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; max-width: 780px; }
.cause {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-1); padding: 18px 20px;
}
.cause-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.cause-rank {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 11px; color: var(--accent);
  border: 1px solid rgba(94, 167, 255, 0.3); background: rgba(94, 167, 255, 0.08);
  border-radius: 6px; padding: 2px 7px;
}
.cause-head h3 { margin: 0; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.cause .confirm {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 14px; line-height: 1.6; color: var(--text-2);
}
.cause .confirm .k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-4); display: block; margin-bottom: 5px;
}
.cause p { margin: 0; font-size: 15px; }

/* ============ FIXES ============ */
.fixes { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; max-width: 780px; counter-reset: fix; }
.fix {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-1); padding: 18px 20px;
}
.fix-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; }
.fix-num {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 11px; color: var(--good);
  border: 1px solid rgba(68, 211, 164, 0.3); background: rgba(68, 211, 164, 0.08);
  border-radius: 6px; padding: 2px 7px;
}
.fix-head h3 { margin: 0; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.fix p { margin: 0 0 10px; font-size: 15px; }
.fix p:last-child { margin-bottom: 0; }

/* Code blocks are highlighted at build time — no client-side highlighter runs
   on these pages.

   Token colours are NOT taken from the site's dimmer greys. --text-4 (#424e6b)
   reaches only 2.42:1 on --bg-0 and --text-3 only 4.21:1, both short of WCAG AA
   for body text — acceptable for a decorative label, not for a code comment,
   which carries the explanation of the line above it. --code-dim is the dimmest
   grey in this family that still clears 4.5:1, and tests/errorsCss.test.js
   asserts every one of these ratios so a future palette tweak cannot quietly
   drop them back below the line. */
pre.snippet {
  background: var(--bg-0); border: 1px solid var(--border-2);
  border-radius: 10px; padding: 14px 16px; margin: 12px 0;
  overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
  color: var(--text-2);
}
pre.snippet .lang {
  display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: 8px;
}
pre.snippet .c { color: var(--code-dim); font-style: italic; }
pre.snippet .s { color: var(--good); }
pre.snippet .n { color: var(--warn); }
pre.snippet .k { color: var(--accent-2); }
pre.snippet .p { color: var(--code-dim); }

/* ============ DEPLOYMENT OUTPUT (deploy-error pages) ============ */
/* Deliberately NOT styled like the before/after. A deploy-error has no
   invocation, so dressing this up as a stitched panel would imply LogStitch had
   something to show — the one dishonest thing this section could do. It reads as
   what it is: a terminal, with an explicit badge saying this never reaches
   CloudWatch. */
.deploy-output {
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--warn);
  border-radius: 12px;
  background: var(--bg-0);
  padding: 16px 18px;
  margin: 20px 0 8px;
  max-width: 780px;
}
.deploy-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.deploy-head h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
.deploy-head .badge {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(243, 183, 85, 0.35);
  background: rgba(243, 183, 85, 0.1); color: var(--warn);
}
.deploy-output .raw-excerpt { border-top: none; padding-top: 0; max-height: none; }

/* ============ RECORD FIELDS (platform-event pages) ============ */
/* The field table is what replaces "causes" on a platform-event page. Wrapped
   in its own scroller so a long meaning column cannot make the page itself
   scroll sideways on a phone. */
.fields-wrap { margin: 20px 0 8px; overflow-x: auto; max-width: 780px; }
table.fields {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 14.5px;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--bg-1);
}
table.fields thead th {
  background: var(--bg-2); color: var(--text);
  text-align: left; font-weight: 600; font-size: 12px;
  letter-spacing: 0.02em;
  padding: 12px 15px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.fields tbody td {
  padding: 11px 15px; vertical-align: top;
  border-bottom: 1px solid var(--border);
  color: var(--text-2); line-height: 1.55;
}
table.fields tbody tr:last-child td { border-bottom: none; }
table.fields tbody tr:hover td { background: rgba(94, 167, 255, 0.03); }
table.fields .fname { color: var(--accent-2); font-size: 13px; white-space: nowrap; }
table.fields .ftype { color: var(--text-3); font-size: 12.5px; white-space: nowrap; }

/* ============ ALSO SEEN AS ============ */
.aliases { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.alias {
  font-family: var(--mono); font-size: 12px; color: var(--text-2);
  background: var(--bg-1); border: 1px solid var(--border);
  padding: 6px 11px; border-radius: 8px;
  word-break: break-word;
}

/* ============ RELATED ============ */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 20px 0; }
.related-card {
  display: block;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-1); padding: 15px 17px;
  transition: border-color .15s, background .15s;
  border-bottom: 1px solid var(--border);
}
.related-card:hover { border-color: var(--border-strong); background: var(--bg-2); }
.related-card .msg {
  font-family: var(--mono); font-size: 12.5px; color: var(--accent-2);
  line-height: 1.5; word-break: break-word; margin-bottom: 6px;
}
.related-card .why { font-size: 13px; color: var(--text-3); line-height: 1.5; }

/* ============ INDEX ============ */
.index-controls {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin: 8px 0 24px;
}
#error-filter {
  height: 38px; min-width: 260px; flex: 1 1 260px;
  padding: 0 13px;
  background: var(--bg-1); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 9px;
  font-family: inherit; font-size: 14px;
}
#error-filter::placeholder { color: var(--text-4); }
.filter-count { font-family: var(--mono); font-size: 12px; color: var(--text-3); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip {
  font-family: var(--mono); font-size: 12px;
  color: var(--text-2); background: var(--bg-1);
  border: 1px solid var(--border-2); border-radius: 999px;
  padding: 6px 13px; transition: all .15s;
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip[aria-pressed="true"], .chip.active {
  background: rgba(94, 167, 255, 0.12); border-color: rgba(94, 167, 255, 0.4); color: var(--accent-2);
}
.chip .n { color: var(--text-4); margin-left: 6px; }

.cat-section { margin-bottom: 48px; scroll-margin-top: 80px; }
.cat-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.cat-head h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.cat-head .n { font-family: var(--mono); font-size: 12px; color: var(--text-4); }
.cat-head a { color: var(--accent-2); font-size: 13px; border-bottom: 1px solid rgba(127, 196, 255, 0.3); }
.cat-blurb { color: var(--text-3); font-size: 14px; line-height: 1.6; margin-bottom: 14px; max-width: 700px; }

.error-list { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; }
.error-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-1); padding: 12px 15px;
  transition: border-color .15s, background .15s;
}
.error-row:hover { border-color: var(--border-strong); background: var(--bg-2); }
.error-row .msg {
  font-family: var(--mono); font-size: 13px; color: var(--text);
  flex: 1 1 340px; min-width: 0; word-break: break-word; line-height: 1.5;
}
.error-row .meta { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.error-row .rt {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
  border: 1px solid var(--border-2); border-radius: 999px; padding: 2px 8px;
}
.error-row[hidden] { display: none; }
.no-results { color: var(--text-3); font-size: 15px; padding: 24px 0; }

/* ============ CTA ============ */
.cta {
  margin-top: 56px; padding: 36px;
  background: linear-gradient(180deg, rgba(94, 167, 255, 0.08), rgba(94, 167, 255, 0.02));
  border: 1px solid rgba(94, 167, 255, 0.25);
  border-radius: 16px;
  text-align: center;
}
.cta h3 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 10px; text-wrap: balance; }
.cta p { color: var(--text-2); margin: 0 auto 20px; max-width: 560px; font-size: 15px; line-height: 1.65; }
.cta .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============ FOOTER ============ */
footer { border-top: 1px solid var(--border); padding: 56px 0 36px; }
.foot-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; max-width: 1240px; margin-left: auto; margin-right: auto; padding: 0 32px; }
.foot-brand .brand { margin-bottom: 14px; }
.foot-brand p { color: var(--text-3); font-size: 13px; line-height: 1.6; max-width: 320px; }
.foot-badge { display: inline-block; margin-top: 18px; line-height: 0; }
.foot-badge img { width: 250px; height: 54px; max-width: 100%; }
.foot-col h6 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-4); margin-bottom: 14px; }
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.foot-col ul li a { color: var(--text-2); font-size: 13.5px; transition: color .15s; }
.foot-col ul li a:hover { color: var(--text); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 11.5px; color: var(--text-4); max-width: 1240px; margin: 0 auto; padding-left: 32px; padding-right: 32px; gap: 16px; flex-wrap: wrap; }

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .ps-grid { grid-template-columns: 1fr; }
  .ps-arrow { transform: rotate(90deg); height: 28px; }
}
@media (max-width: 800px) {
  .nav-links { display: none; }
  .foot-row { grid-template-columns: 1fr 1fr; }
  .wrap, .narrow { padding: 0 20px; }
  .line { grid-template-columns: 1fr; gap: 2px; }
  .line-count { grid-column: 1; }
}
@media (max-width: 520px) {
  .foot-row { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
}

/* Honour the OS-level reduced-motion setting: every transition here is
   decorative, so there is nothing to preserve when it is on. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Printing an error page should give a clean reference sheet, not a dark slab. */
@media print {
  nav.top, footer, .cta, .index-controls, .chips, .skip-link { display: none; }
  html, body { background: #fff; color: #000; }
  .ps-grid { grid-template-columns: 1fr; }
  a { color: #000; }
}