/* ============================================================================
   amrmatrix · reports stylesheet
   ----------------------------------------------------------------------------
   Versioned static asset served from /reports/report.css.
   STABLE — don't edit per-report. If you find yourself reaching for !important
   to override a rule in a single report's HTML, either you're using the wrong
   component class, or the class needs a real fix here and it'll apply to all
   reports.

   See /reports/README.md (in the source repo, not deployed) for the full
   component reference and HTML skeleton.

   Last meaningful change: 2026-05 — extracted from the LLMInternalHonesty
                          report; switched from serif+italic to all-sans for
                          reliable Chinese rendering on Windows.
   ============================================================================ */


/* ===========================================================================
   1. Design tokens
   ===========================================================================
   - Two themes share the same purple-family accent, only foreground/background
     swap. Toggle via `body[data-theme="light"|"dark"]`.
   - Animation knobs (--step-time, --collapse-time) drive the logo fold timing.
   =========================================================================== */
:root {
  /* All-sans, no serif. Serif Chinese on Windows falls through to SimSun
     bitmap, which is unreadable in italic — so we don't use italic anywhere
     and we don't request a Chinese serif. Latin glyphs come from the first
     Latin-capable font installed (system-ui), Chinese glyphs come from the
     first CJK-capable font installed (PingFang on Mac, YaHei on Windows).
     The browser handles the per-script fallback automatically. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
          "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans SC",
          "Noto Sans SC", "Hiragino Sans GB", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
          "Cascadia Mono", monospace;

  /* Logo fold-animation knobs. Total close ≈ 7 * step + collapse ≈ 780ms. */
  --step-time:     60ms;
  --collapse-time: 360ms;

  /* The whole purple family. Individual themes pick which value gets
     `--accent` etc. — these stay constant so a designer can refer to
     `var(--p-deep)` anywhere if they want a literal shade. */
  --p-deep: #5b2c87;
  --p-mid:  #6c3fc8;
  --p-soft: #b388e8;
}

/* Theme C · light (palette "stripe") — bone background, indigo-ink text,
   medium purple accent. Default theme. */
body[data-theme="light"] {
  --bg:          #f7f4ef;
  --bg-elev:     #fdfbf7;     /* lifted surfaces: tables, cards */
  --ink:         #181822;     /* body text */
  --ink-soft:    #4a4855;     /* secondary text */
  --ink-fade:    #8a8794;     /* tertiary: captions, metadata */
  --accent:      #6c3fc8;
  --accent-hi:   #8456e0;     /* hover */
  --accent-soft: #ebe1f8;     /* tinted backgrounds: code, table headers */
  --rule:        #18182214;   /* hairline borders, 8% ink */
  --code-bg:     #e9e4dc;     /* slightly darker than --bg, paper-like */
  --code-fg:     #181822;
  --code-sub:    #6c3fc8;     /* color for <sub>/<sup> inside code */
  --bad:         #b03434;
  --good:        #277027;
  --shadow:      0 1px 0 #18182208, 0 14px 40px -20px #18182233;
}

/* Theme B · dark (palette "ink") — warm-black background, cream text,
   light purple accent. */
body[data-theme="dark"] {
  --bg:          #0e0c12;
  --bg-elev:     #181620;
  --ink:         #ede1c8;
  --ink-soft:    #b8aea0;
  --ink-fade:    #6a6557;
  --accent:      #b388e8;
  --accent-hi:   #d9c4f3;
  --accent-soft: #2b1d3e;
  --rule:        #ede1c81f;
  --code-bg:     #16141c;
  --code-fg:     #ede1c8;
  --code-sub:    #b388e8;
  --bad:         #e87878;
  --good:        #7ec97e;
  --shadow:      0 0 0 1px #ede1c80f, 0 24px 60px -20px #00000099;
}


/* ===========================================================================
   2. Base
   =========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; }
html {
  scroll-behavior: smooth;
  /* TOC anchor jumps need to clear the sticky masthead (~58px) — leave 90px */
  scroll-padding-top: 90px;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums;     /* keep digits at cap-height */
  transition: background-color 360ms ease, color 360ms ease;
}
::selection { background: var(--accent); color: var(--bg); }


/* ===========================================================================
   3. Masthead — sticky top bar with the folding AMRMATRIX\ wordmark
   ===========================================================================
   The wordmark folds to AM\ when the page scrolls past 30px (handled by
   report.js). HTML skeleton for the masthead MUST match what report.js
   selects (.wordmark + .cell + .fold + .letter-m + .slash + .slash-extra).
   Don't restructure unless you also update report.js.
   =========================================================================== */
.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 14px 28px;
  border-bottom: 1px solid var(--rule);
  transition: background-color 360ms ease, border-color 360ms ease;
}
.masthead-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* The wordmark itself. `inline-flex` so whitespace between cells doesn't
   render as visible gaps when a cell's width animates to 0. */
.wordmark {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  color: var(--ink);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
}
.cell {
  display: inline-block;
  width: 1ch;                  /* monospace = uniform cells */
  text-align: center;
  flex-shrink: 0;
}
.fold, .letter-m, .slash-extra { overflow: hidden; }
.slash, .slash-extra { color: var(--accent); font-weight: 800; }
.slash { transform-origin: 50% 60%; }
.slash-extra { width: 0; opacity: 0; }   /* visible only in A\\ mode */

/* Fold animation. Every fold cell has `--i` set inline in HTML;
   1 = rightmost (X), 7 = leftmost-fold (R). The leading M (`.letter-m`)
   conceptually extends as --i=8 in A\\ mode but defaults to staying. */
.fold, .letter-m, .slash-extra {
  transition: width var(--collapse-time) ease, opacity var(--collapse-time) ease;
}
/* opening direction (no .is-closed): leftmost opens first */
.fold { transition-delay: calc((7 - var(--i)) * var(--step-time)); }
/* closing direction (with .is-closed): rightmost closes first */
.wordmark.is-closed .fold {
  width: 0; opacity: 0;
  transition-delay: calc((var(--i) - 1) * var(--step-time));
}
/* A\\ mode (body[data-end="A"]) — leading M also folds; extra slash slides in.
   AM\ mode (body[data-end="AM"], default) — leading M stays, extra slash hidden. */
body[data-end="A"] .letter-m { transition-delay: 0ms; }
body[data-end="A"] .wordmark.is-closed .letter-m {
  width: 0; opacity: 0;
  transition-delay: calc(7 * var(--step-time));
}
body[data-end="A"] .wordmark.is-closed .slash-extra {
  width: 1ch; opacity: 1;
  transition-delay: calc(7 * var(--step-time) + var(--collapse-time) * 0.45);
}
/* The remaining slash gains a touch of weight as the mark folds */
.slash { transition: transform var(--collapse-time) ease; }
.wordmark.is-closed .slash { transform: scale(1.08); }

/* Right side of the masthead — home link + theme toggle */
.nav-right {
  display: flex;
  gap: 14px;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-fade);
}
.nav-right a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 150ms;
}
.nav-right a:hover { color: var(--accent); }
.theme-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  padding: 4px 10px;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
  transition: border-color 150ms, color 150ms;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }


/* ===========================================================================
   4. Article shell + header
   ===========================================================================
   .report is a CSS grid container. On narrow viewports it's a single column
   capped at 720px (the readable measure). On wide viewports (>=1100px) a
   200px TOC sidebar appears on the left; the article column stays 720px.
   The HTML inside .report must be:
     <aside class="toc" id="toc"></aside>          ← auto-populated by report.js
     <div class="report-content"> ... </div>       ← header + prose + footer
   =========================================================================== */
.report {
  display: grid;
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 28px 96px;
}
.report-content { min-width: 0; }   /* prevents grid blowout on long content */

@media (min-width: 1220px) {
  .report {
    grid-template-columns: 200px minmax(0, 720px);
    gap: 200px;                /* matches the Anthropic reference layout */
    max-width: 1220px;         /* = 200 toc + 200 gap + 720 body + 48*2 padding */
    padding-left: 48px;
    padding-right: 48px;
  }
}

.report-head { padding: 32px 0 28px; }
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
}
.title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  margin: 0 0 18px;
  color: var(--ink);
}
.subtitle {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.byline {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-fade);
  margin: 0 0 28px;
  letter-spacing: 0.03em;
}
.byline strong { color: var(--ink); font-weight: 500; }
.byline .dot { color: var(--accent); margin: 0 6px; }

/* The abstract: visually distinguished by left-border + soft color,
   NOT by italic (italic + Chinese = bad fake-slant rendering). */
.abstract {
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 20px;
  margin: 24px 0 0;
}
.abstract em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}


/* ===========================================================================
   4.5 TOC sidebar (auto-generated)
   ===========================================================================
   The <aside class="toc" id="toc"> is empty in HTML; report.js walks the
   .prose h2 elements, assigns missing ids, and populates the TOC. A scroll
   listener keeps the active item in sync. Hidden on narrow viewports —
   the grid above collapses to single column at the same breakpoint.
   =========================================================================== */
.toc { display: none; }     /* hidden until wide-screen breakpoint */

@media (min-width: 1220px) {
  .toc {
    display: block;
    position: sticky;
    top: 90px;              /* clears the sticky masthead */
    align-self: start;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding-right: 12px;
    /* tiny custom scrollbar so the TOC area doesn't look like a busy input */
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
  }
}

.toc-label {
  /* sans — not mono. CJK glyphs rendered in monospace get forced into a
     square grid and lose their natural metric. sans = whatever the system's
     real Chinese font is (PingFang on Mac, YaHei on Windows). */
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 18px;
  font-weight: 600;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-list li {
  margin-bottom: 14px;
  position: relative;
  padding-left: 18px;
}

/* Square marker — invisible by default, filled accent when the li
   is the currently-active section. The 8x8 sits left of the link text. */
.toc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  background: transparent;
  transition: background-color 200ms ease;
}
.toc-list li.is-active::before {
  background: var(--accent);
}

.toc-list a {
  display: block;
  color: var(--ink-fade);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 13.5px;          /* 13 felt thin in YaHei; half a step bigger steadies it */
  line-height: 1.55;
  transition: color 200ms ease;
}
.toc-list a:hover { color: var(--ink); }
.toc-list li.is-active a {
  color: var(--ink);
  font-weight: 500;
}


/* ===========================================================================
   5. Prose — body content inside the report
   ===========================================================================
   Wrap all body content in `<section class="prose">…</section>` (or one
   prose wrapper that spans multiple <section>s). The `.prose` class scopes
   the typographic rules so nothing outside accidentally inherits.
   =========================================================================== */
.rule { border: 0; height: 1px; background: var(--rule); margin: 36px 0; }

.prose p {
  margin: 0 0 1.05em;
  color: var(--ink);
}
.prose p strong { font-weight: 600; color: var(--ink); }
.prose p em {
  color: var(--accent);
  font-style: normal;          /* same anti-italic rule for inline emphasis */
  font-weight: 500;
}
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.prose a:hover { color: var(--accent-hi); }

.prose ul, .prose ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
  color: var(--ink);
}
.prose li { margin-bottom: 0.4em; }
.prose ul li::marker { color: var(--accent); }
.prose ol li::marker { color: var(--accent); font-family: var(--mono); }

/* Inline code (single backtick equivalent) */
.prose code,
.compare code,
.quadrant-grid code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Section heading. H2 = numbered/topic section, H3 = sub-section. */
.prose h2 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 56px 0 16px;
  color: var(--ink);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.prose h3 {
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 600;
  margin: 32px 0 12px;
  color: var(--accent);
}

/* Code block. Paper-colored background in light mode, dark in dark mode,
   so the deep purple <sub>/<sup> are always readable (the earlier version
   used a dark block in both modes and made deep purple sub/sup unreadable
   on light pages). */
.prose pre {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.65;
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 16px 20px;
  border-radius: 6px;
  margin: 20px 0;
  overflow-x: auto;
  box-shadow: var(--shadow);
  border-left: 3px solid var(--accent);
}
.prose pre code {
  background: transparent; color: inherit; padding: 0; font-size: inherit;
}
.prose pre sub, .prose pre sup { color: var(--code-sub); }

/* Pull quote. Same border-left treatment as the abstract — italic stays
   off so Chinese pull quotes don't render as fake-slant. The visual
   distinction comes from font size (19px) and weight (medium). */
.pullquote {
  margin: 36px 0;
  padding: 6px 0 6px 24px;
  border-left: 4px solid var(--accent);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
}
.pullquote em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}


/* ===========================================================================
   5.5 Figures (img + caption)
   ===========================================================================
   Use for any embedded image (data plot, diagram, screenshot). Per-report
   figures live at /reports/figures/<slug>/<name>.png so they're namespaced.
   =========================================================================== */
.report figure {
  margin: 32px 0;
  text-align: center;
}
.report figure img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--bg-elev);
}
.report figure figcaption {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-fade);
  text-align: center;
  margin-top: 10px;
  line-height: 1.55;
}


/* ===========================================================================
   6. Tables
   =========================================================================== */
.table-wrap { margin: 28px 0; }
.report table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 14px;
  background: var(--bg-elev);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.report th, .report td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
.report th {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.report tbody tr:last-child td { border-bottom: 0; }
.report tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
/* Add `.num` to <td> for numeric cells: monospace + tabular alignment */
.report td.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
/* Add `.hl` to <td> for highlighted (key-result) cells */
.report td.hl { color: var(--accent); font-weight: 600; }

.caption {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-fade);
  text-align: center;
  margin: 10px 0 0;
}


/* ===========================================================================
   7. Quadrant grid (2×2 classification matrix)
   ===========================================================================
   Use when you have a 2-axis taxonomy whose cells are concepts, not data
   rows. See .quadrant-grid example in _template.html.
   =========================================================================== */
.quadrant-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 0;
  margin: 28px 0;
  font-family: var(--sans);
  font-size: 13.5px;
  background: var(--bg-elev);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.quadrant-grid > div {
  padding: 14px 16px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.quadrant-grid > div:nth-child(3n)        { border-right: 0; }
.quadrant-grid > div:nth-last-child(-n+3) { border-bottom: 0; }
.quadrant-grid .label,
.quadrant-grid .col-head {
  background: var(--accent-soft);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.quadrant-grid .label    { font-size: 11.5px; color: var(--ink-fade); }
.quadrant-grid .col-head { font-size: 12px; color: var(--accent); font-weight: 600; letter-spacing: 0.06em; }
.quadrant-grid .cell-letter {
  font-family: var(--mono);
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  margin-right: 8px;
}


/* ===========================================================================
   8. Compare card — "baseline vs intervention" side-by-side
   ===========================================================================
   Use whenever you're showing two responses to the same prompt with a
   binary verdict. The header carries: tag, question, verdict, optional
   numeric metric. The body is a <dl> with one <dt>/<dd> pair per variant.
   Mark the "after"/intervention rows with class="r15b" (legacy name —
   could be any class for visual highlight) for accent coloring.
   =========================================================================== */
.compare {
  border: 1px solid var(--rule);
  border-radius: 8px;
  margin: 22px 0;
  font-family: var(--sans);
  font-size: 14px;
  background: var(--bg-elev);
  overflow: hidden;
}
.compare-head {
  padding: 10px 14px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}
.compare-tag {
  font-family: var(--mono);
  background: var(--accent);
  color: var(--bg);
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.compare-q { color: var(--ink); font-weight: 600; }
.compare-m {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 12px;
  margin-left: auto;
}
.verdict {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
}
.verdict.bad  { color: var(--bad); }
.verdict.good { color: var(--good); }
.compare-truth {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-fade);
}
.compare-body {
  margin: 0;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px 14px;
  align-items: baseline;
}
.compare-body dt {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-fade);
  text-align: right;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.compare-body dt.r15b { color: var(--accent); }
.compare-body dd { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.compare-body dd.r15b { color: var(--ink); }


/* ===========================================================================
   9. Footer
   =========================================================================== */
.report-foot {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-fade);
}
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-right: 6px;
  margin-bottom: 6px;
}
.cite {
  color: var(--ink-fade);
  line-height: 1.5;
  margin-top: 16px;
  font-size: 12.5px;
}
.cite em { color: var(--ink-soft); font-style: normal; }


/* ===========================================================================
   9.5 Reports landing page (/reports/index.html)
   ===========================================================================
   Single-column layout (no TOC sidebar — it'd duplicate the list).
   Populated by JS that fetches /reports/manifest.json.
   =========================================================================== */
.report-index {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 28px 96px;
}
.index-head { padding: 32px 0 28px; }
.index-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 18px 0 16px;
  color: var(--ink);
}
.index-subtitle {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

.report-list {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
}
.report-list > li { margin-bottom: 16px; }

.report-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 22px 24px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--bg-elev);
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}
.report-item:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-elev));
  transform: translateY(-2px);
}
.report-item .kicker { margin: 0 0 10px; }
.report-item-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--ink);
}
.report-item-subtitle {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0 0 12px;
  line-height: 1.55;
}
.report-item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-fade);
  letter-spacing: 0.02em;
}
.report-item-meta time { color: var(--ink-fade); }

.empty-state {
  text-align: center;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-fade);
  padding: 40px;
  list-style: none;
}


/* ===========================================================================
   9.6 Bilingual visibility + lang-badge
   ===========================================================================
   Each language gets its own URL (report_X.html for zh, report_X_en.html for
   en). On the landing page the same approach is used for landing chrome:
   wrap both languages in <span lang="..."> and let the html[lang] selector
   hide the inactive one. The .lang-badge is for reports that exist in only
   one language but appear in the other-language list (so EN readers can see
   that a Chinese-only writeup exists). */
html[lang^="zh"] [lang="en"],
html[lang="en"]  [lang="zh"] { display: none; }

.lang-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-left: 6px;
  vertical-align: 1px;
}


/* ===========================================================================
   10. Reduced-motion accessibility
   ===========================================================================
   Cuts the logo fold transitions to ~0ms so the open/close flip still works
   as a state change, just without the staggered motion.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fold, .letter-m, .slash-extra, .slash {
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
  }
}