/* RepFind Chinese Agents Spreadsheet
   Motif: a reading with a date on it. Every number on this site is one sample
   taken on one day, so the sampling date is a structural part of the component,
   not decoration.

   Contrast: every pair below was computed, not eyeballed (see _src/contrast.py).
   Amber must be layered: --brand only fills, --brand-text only carries text.
   White on #F59E0B is 2.15:1 and is never used. */

:root {
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --ink: #1C1917;          /* 16.74:1 on --bg */
  --ink-2: #57534E;        /* 7.30:1  */
  --ink-3: #78716C;        /* 4.59:1, lightest allowed for text */
  --rule: #E7E5E4;
  --brand: #F59E0B;        /* fill only, dark text on top */
  --brand-text: #B45309;   /* 4.81:1 on --bg */
  --brand-fill: #B45309;   /* white text on top is 5.02:1 */
  --read-bg: #FEF3C7;
  --read-badge: #78350F;   /* 8.15:1 on --read-bg */
  --warn: #9F1239;

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --maxw: 68rem;
  --sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r1: 2px; --r2: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1C1917;
    --surface: #292524;
    --ink: #FAFAF9;        /* 16.74:1 */
    --ink-2: #D6D3D1;
    --ink-3: #A8A29E;      /* 6.93:1 */
    --rule: #44403C;
    --brand: #FBBF24;      /* 10.48:1 as text on dark, dark text on top of fills */
    --brand-text: #FCD34D; /* 12.13:1 */
    --brand-fill: #FBBF24;
    --read-bg: #292524;
    --read-badge: #FCD34D;
    --warn: #FDA4AF;
  }
}

/* Self-hosted fonts. Google Fonts over the network hurt LCP, and deferring the
   stylesheet pushed the swap past 1.8s which produced CLS 0.29 on a sister site.
   size-adjust values come from measured fallback widths, not guesses. */
@font-face {
  font-family: "Fira Sans"; src: url("/assets/fonts/firasans-400.woff2?v=3e38d8c01fe9") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fira Sans"; src: url("/assets/fonts/firasans-600.woff2?v=55e09735e30d") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Mono"; src: url("/assets/fonts/spacemono-400.woff2?v=fb4a81a2d0a8") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fira Sans Fallback"; src: local("Arial");
  size-adjust: 102%; ascent-override: 92%; descent-override: 24%;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1rem/1.65 var(--sans);
  text-underline-offset: .18em;
}
/* Global backstop. Images with intrinsic size will otherwise push a 390px
   viewport out to 500px wherever a wrapper class is missing. */
main svg, main img { max-width: 100%; }
.ico { width: auto; max-width: 120px; height: auto; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; margin: 0 0 var(--s3); }
h1 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 2.9rem); font-weight: 600; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem); font-weight: 600; }
h3 { font-size: 1.12rem; font-weight: 600; }
p { margin: 0 0 var(--s4); max-width: 68ch; }
a { color: var(--brand-text); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--brand-text); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s4); }
.rf-skip {
  position: absolute; left: 0; top: 0; padding: var(--s2) var(--s4);
  background: var(--brand-fill); color: #fff; z-index: 50;
  min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center;
  clip-path: inset(50%); /* clip, not a -9999px offset: that offset counts toward
                            scrollable overflow and reports a false 9px overflow */
}
.rf-skip:focus { clip-path: none; }
/* In dark mode --brand-fill is the bright amber, and white on it measures 1.67:1.
   Same layering rule as the search button: amber fills, dark text sits on top. */
@media (prefers-color-scheme: dark) { .rf-skip { color: #1C1917; } }

/* ---------------------------------------------------------------- nav */
.rf-nav { border-bottom: 1px solid var(--rule); background: var(--surface); }
.rf-nav .wrap { display: flex; align-items: center; gap: var(--s4); min-height: 3.6rem; }
.rf-brand {
  font-weight: 600; color: var(--ink); text-decoration: none;
  font-size: .98rem; letter-spacing: -.015em;
  display: inline-flex; align-items: center; gap: var(--s2);
}
/* The mark is a real SVG file rather than a CSS pseudo element: a curated site
   has to own a logo asset, and a gradient in a stylesheet is not one. */
.rf-mark { width: 1.9rem; height: auto; display: block; flex: 0 0 auto; }
.rf-navl { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s4); }
.rf-navl a {
  color: var(--ink-2); text-decoration: none; font-size: .92rem;
  padding: var(--s3) 0; min-height: 44px; display: inline-flex; align-items: center;
}
.rf-navl a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
.rf-navtog { display: none; }

/* ---------------------------------------------------------------- hero */
.rf-hero { padding: var(--s7) 0 var(--s5); }
.rf-hero__lede {
  font-size: 1.1rem; color: var(--ink-2); max-width: 54ch; margin-bottom: var(--s5);
}
/* The search form is the hero's main part, not an afterthought bolted on at the
   end. It sits directly under the lede with nothing between. */
/* max-width is measured against the hero's full width, not against .wrap.
   At 40rem the gate read 44% of a 1440px hero and warned that the form looked
   bolted on. 48rem puts it over the 45% line at every breakpoint. */
.rf-find {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  background: var(--surface); border: 2px solid var(--ink);
  border-radius: var(--r2); padding: var(--s2);
  max-width: 48rem;
}
.rf-find label { flex: 1 0 100%; font-size: .82rem; color: var(--ink-2); padding: 0 var(--s2); }
.rf-find input {
  flex: 1 1 14rem; min-width: 0; min-height: 48px; border: 0; background: transparent;
  color: var(--ink); font: 400 1.02rem var(--sans); padding: 0 var(--s3);
}
.rf-find input::placeholder { color: var(--ink-3); }
.rf-find button {
  min-height: 48px; padding: 0 var(--s5); cursor: pointer;
  background: var(--brand-fill); color: #fff; border: 0; border-radius: var(--r1);
  font: 600 .98rem var(--sans);
}
@media (prefers-color-scheme: dark) { .rf-find button { color: #1C1917; } }
.rf-find button:hover { background: var(--ink); }

/* Secondary CTAs live here, as a thin bar, never as big buttons in the hero. */
.rf-subnav { border-block: 1px solid var(--rule); background: var(--surface); }
.rf-subnav .wrap { display: flex; flex-wrap: wrap; gap: var(--s5); }
.rf-subnav a {
  font: 400 .88rem var(--mono); color: var(--ink-2); text-decoration: none;
  padding: var(--s3) 0; min-height: 44px; display: inline-flex; align-items: center;
  /* Short labels fail the touch target on width, not on height. A one word jump
     link like "Who" is 30px wide without this. */
  min-width: 44px; justify-content: center;
}
.rf-subnav a:hover { color: var(--brand-text); }

/* ---------------------------------------------------------------- sections */
.rf-sec { padding: var(--s7) 0; border-bottom: 1px solid var(--rule); }
.rf-sec--b { background: var(--surface); }
.rf-lead { font-size: 1.05rem; color: var(--ink-2); max-width: 60ch; }

/* Side by side. Hard gate 4: align top edges AND heights. stretch + cover does
   it for every block at once; per block pixel tweaks never stay aligned. */
.rf-split { display: grid; gap: var(--s5); align-items: stretch; }
@media (min-width: 52rem) {
  /* Equal columns, not 1.15/.85. The uneven split left the image column at 439px,
     which is 0.549 of an 800px screenshot and lands just under the 0.55 floor
     where the text inside a screenshot stops being readable. */
  .rf-split { grid-template-columns: 1fr 1fr; }
  .rf-split--flip .rf-split__t { order: 2; }
  .rf-split__f { display: flex; }
  .rf-split__f .rf-fig { margin: 0; width: 100%; display: flex; flex-direction: column; }
  .rf-split__f .rf-fig img { width: 100%; height: 100%; object-fit: cover; }
}
.rf-fig { margin: 0 0 var(--s4); }
.rf-fig img {
  width: auto; max-width: 100%; height: auto; display: block;
  border: 1px solid var(--rule); border-radius: var(--r2); background: var(--surface);
}
.rf-fig--wide img { width: 100%; }
/* Dense data figures scroll inside their container on narrow screens instead of
   shrinking until the labels stop being readable. Shrinking a grid of agent
   names to 44% of its native width is the same as not shipping the figure. */
.rf-fig--scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* A dense figure in a section of its own: let the prose run as wide as the figure
   so the two are not visibly different widths when stacked. */
.rf-sec--data p, .rf-sec--data .rf-lead { max-width: 54rem; }
.rf-sec--data .rf-fig--scroll { width: -moz-fit-content; width: fit-content; max-width: 100%; }
.rf-fig--scroll img { max-width: none; width: auto; }
.rf-fig--scroll figcaption { position: sticky; left: 0; }
.rf-fig figcaption { font-size: .86rem; color: var(--ink-2); padding-top: var(--s2); }
.rf-srcn { font-size: .8rem; color: var(--ink-3); }
.rf-srcl { font: 400 .78rem var(--mono); }

/* ---------------------------------------------------------------- reading */
.rf-rd {
  background: var(--read-bg); border: 1px solid var(--rule);
  border-radius: var(--r2); padding: var(--s4) var(--s4) var(--s3);
  position: relative; overflow: hidden;
}
/* The notch on the top right marks this as one sample, not a constant. */
.rf-rd::after {
  content: ""; position: absolute; right: 0; top: 0;
  width: var(--s5); height: 3px; background: var(--brand);
}
.rf-rd__v { margin: 0; display: flex; align-items: baseline; gap: var(--s2); }
.rf-rd__n { font: 400 clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem)/1 var(--mono); color: var(--ink); }
.rf-rd__u { font: 400 .9rem var(--mono); color: var(--read-badge); }
.rf-rd__l { margin: var(--s2) 0 0; font-size: .95rem; color: var(--ink); max-width: 34ch; }
.rf-rd__d {
  margin: var(--s2) 0 0; font: 400 .76rem var(--mono); color: var(--read-badge);
  text-transform: lowercase;
}
.rf-rd--warn { background: color-mix(in srgb, var(--warn) 9%, var(--bg)); }
/* auto-fit, and the first card is wider: three equal cards in a row is banned */
.rf-rdrow {
  display: grid; gap: var(--s4); margin-bottom: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
@media (min-width: 60rem) { .rf-rdrow > .rf-rd:first-child { grid-column: span 2; } }

/* ---------------------------------------------------------------- category wall */
.rf-wallsec { padding-top: var(--s6); }
.rf-wall {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 34rem) { .rf-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 52rem) { .rf-wall { grid-template-columns: repeat(4, 1fr); } }
.rf-cell {
  display: flex; flex-direction: column; gap: var(--s2); cursor: pointer;
  text-decoration: none; color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--r2); padding: var(--s2);
  transition: border-color .2s, background-color .2s;
}
.rf-cell:hover { border-color: var(--brand-text); background: var(--read-bg); }
.rf-cell img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r1);
  background: var(--rule);
}
.rf-cell__n { font-size: .92rem; font-weight: 600; }
.rf-dest {
  display: inline-block; font: 400 .72rem var(--mono); color: var(--read-badge);
  background: var(--read-bg); border-radius: var(--r1); padding: 1px var(--s2);
}
@media (prefers-color-scheme: dark) {
  .rf-dest { background: #44403C; color: var(--brand-text); }
}

/* ---------------------------------------------------------------- table */
.rf-tw { overflow-x: auto; margin-bottom: var(--s5); }
.rf-table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.rf-table caption { text-align: left; color: var(--ink-2); padding-bottom: var(--s3); font-size: .92rem; }
.rf-table th, .rf-table td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--rule); }
.rf-table thead th {
  font: 400 .78rem var(--mono); text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-2); border-bottom: 2px solid var(--ink);
}
.rf-table td:nth-child(n+2) { font-family: var(--mono); font-size: .88rem; }
@media (max-width: 46rem) {
  .rf-tw { overflow-x: visible; }
  .rf-table, .rf-table tbody, .rf-table tr, .rf-table td { display: block; width: 100%; }
  .rf-table thead { display: none; }
  .rf-table tr {
    border: 1px solid var(--rule); border-radius: var(--r2);
    margin-bottom: var(--s4); padding: var(--s2) var(--s3); background: var(--surface);
  }
  .rf-table td { border: 0; padding: var(--s2) 0; display: flex; gap: var(--s4); }
  .rf-table td::before {
    content: attr(data-label); flex: 0 0 9rem;
    font: 400 .76rem var(--mono); text-transform: uppercase; color: var(--ink-2);
  }
}

/* ---------------------------------------------------------------- scene */
.rf-scene {
  border-left: 3px solid var(--brand); background: var(--surface);
  padding: var(--s4); border-radius: 0 var(--r2) var(--r2) 0; margin-bottom: var(--s4);
}
.rf-scene__w { font-weight: 600; margin: 0 0 var(--s3); }
.rf-scene ul { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s2); }
.rf-scene li { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; }
.rf-scene__a { font-weight: 600; min-width: 7rem; }
.rf-scene__v { font: 400 .88rem var(--mono); color: var(--ink-2); }
.rf-scene__y { margin: 0; font-size: .92rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- signals */
.rf-sigs { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: var(--s3); }
.rf-sig { padding-left: var(--s5); position: relative; }
.rf-sig::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: .72rem; height: .72rem; border-radius: var(--r1);
}
.rf-sig--solid::before { background: var(--brand); border: 1px solid var(--read-badge); }
.rf-sig--dashed::before { background: transparent; border: 1px dashed var(--read-badge); }
.rf-sig--struck::before {
  background: transparent; border: 1px solid var(--warn);
  background-image: linear-gradient(45deg, transparent 44%, var(--warn) 44% 56%, transparent 56%);
}
.rf-sig__s { margin: 0 0 var(--s1); font-weight: 600; }
.rf-sig__h { margin: 0; font-size: .92rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- agent card */
.rf-ags { display: grid; gap: var(--s5); }
/* Two columns, deliberately unequal. Three equal cards in a row is banned. */
@media (min-width: 56rem) { .rf-ags { grid-template-columns: 1.1fr .9fr; } }
.rf-ag {
  border: 1px solid var(--rule); border-radius: var(--r2); overflow: hidden;
  background: var(--surface); display: flex; flex-direction: column;
}
.rf-ag .rf-fig { margin: 0; }
.rf-ag .rf-fig img { border: 0; border-radius: 0; width: 100%; }
.rf-ag__b { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.rf-ag__b h3 { margin: 0; }
.rf-ag__w { margin: 0; font-size: .95rem; color: var(--ink-2); }
.rf-ag__r { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.rf-ag__r li { font: 400 .86rem var(--mono); color: var(--ink-2); }
.rf-ag__r b { color: var(--ink); }
.rf-dead {
  margin: 0; font-size: .88rem; color: var(--warn); font-weight: 600;
}
.rf-out {
  display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer;
  align-self: flex-start; min-height: 44px; padding: var(--s2) var(--s4);
  border: 2px solid var(--brand-text); border-radius: var(--r1);
  color: var(--brand-text); text-decoration: none; font-weight: 600; font-size: .94rem;
  transition: background-color .2s, color .2s;
}
.rf-out:hover { background: var(--brand-fill); color: #fff; }
@media (prefers-color-scheme: dark) { .rf-out:hover { color: #1C1917; } }

/* ---------------------------------------------------------------- picker */
.rf-pick { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r2); padding: var(--s5); }
.rf-pick__f { display: grid; gap: var(--s4); margin-bottom: var(--s5); }
@media (min-width: 44rem) { .rf-pick__f { grid-template-columns: repeat(3, 1fr); } }
.rf-pick__f label { display: block; font-size: .86rem; color: var(--ink-2); margin-bottom: var(--s1); }
.rf-pick__f select {
  width: 100%; min-height: 44px; padding: 0 var(--s3); cursor: pointer;
  font: 400 .96rem var(--sans); color: var(--ink);
  background: var(--bg); border: 1px solid var(--ink-2); border-radius: var(--r1);
}
.rf-pick__o { border-top: 2px solid var(--ink); padding-top: var(--s4); }
.rf-pick__o[hidden] { display: none; }
.rf-pick__f select:disabled { opacity: .6; cursor: progress; }
.rf-pick__l { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s3); }
.rf-pick__l li {
  display: grid; gap: var(--s1) var(--s4); align-items: baseline;
  padding-bottom: var(--s3); border-bottom: 1px solid var(--rule);
}
@media (min-width: 40rem) { .rf-pick__l li { grid-template-columns: 8rem 1fr; } }
.rf-pick__l .rf-scene__a { font-size: 1.02rem; }
.rf-pick__ln { font: 400 .82rem var(--mono); color: var(--ink-3); grid-column: 1 / -1; }
@media (min-width: 40rem) { .rf-pick__ln { grid-column: 2; } }
.rf-pick__t {
  margin: 0 0 var(--s3); padding: var(--s3) var(--s4);
  background: var(--read-bg); border-radius: var(--r2); font-size: .95rem; color: var(--ink);
}

/* ---------------------------------------------------------------- steps / qa / log */
.rf-steps { counter-reset: s; list-style: none; margin: 0 0 var(--s4); padding: 0; }
.rf-steps li {
  counter-increment: s; position: relative; padding-left: var(--s7);
  margin-bottom: var(--s4); max-width: 60ch;
}
.rf-steps li::before {
  content: counter(s); position: absolute; left: 0; top: -.1em;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  font: 400 .9rem var(--mono); color: var(--read-badge);
  background: var(--read-bg); border-radius: var(--r2);
}
.rf-steps b { display: block; }

.rf-qa { border-bottom: 1px solid var(--rule); padding: var(--s3) 0; }
.rf-qa summary {
  cursor: pointer; font-weight: 600; min-height: 44px;
  display: flex; align-items: center; gap: var(--s3); list-style: none;
}
.rf-qa summary::-webkit-details-marker { display: none; }
.rf-qa summary::before {
  content: "+"; font: 400 1.1rem var(--mono); color: var(--brand-text); flex: 0 0 1rem;
}
.rf-qa[open] summary::before { content: "\2212"; }
.rf-qa p { margin: var(--s2) 0 var(--s3) calc(1rem + var(--s3)); color: var(--ink-2); }

.rf-entry { padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
.rf-entry:first-child { padding-top: 0; }
.rf-entry__d { font: 400 .82rem var(--mono); color: var(--read-badge); margin: 0 0 var(--s1); }
.rf-entry h3 { margin: 0 0 var(--s3); max-width: 46ch; }

/* ---------------------------------------------------------------- footer */
.rf-foot {
  padding: var(--s7) 0 var(--s8); background: var(--surface);
  border-top: 1px solid var(--rule); font-size: .92rem; color: var(--ink-2);
}
.rf-foot__b { font-weight: 600; color: var(--ink); margin-bottom: var(--s3); }
.rf-foot__n { font: 400 .82rem var(--mono); }
.rf-foot__c { font-size: .84rem; color: var(--ink-3); }
.rf-foot a { margin-right: var(--s4); }

/* ---------------------------------------------------------------- narrow nav */
@media (max-width: 52rem) {
  .rf-navtog {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; min-height: 44px; min-width: 64px; cursor: pointer;
    background: transparent; color: var(--ink); border: 1px solid var(--ink-2);
    border-radius: var(--r1); font: 600 .9rem var(--sans);
  }
  .rf-navl {
    flex: 1 0 100%; margin-left: 0; display: none;
    flex-direction: column; gap: 0; padding-bottom: var(--s3);
  }
  .rf-navl[data-open] { display: flex; }
  .rf-navl a { border-top: 1px solid var(--rule); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}