/* Companion site for the paper. Tokens follow alignyourai.com (packages/ui/src/tokens.css of its repository): paper,
   ink, mute, line, surface, ultraviolet and ice; Archivo for headings (Archivo Expanded 800 for the title), Inter for
   reading and controls, JetBrains Mono for short metadata. Fonts are served from this site (assets/fonts). */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2"); }
@font-face { font-family: "Archivo Expanded"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("fonts/archivo-expanded-800-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/jetbrains-mono-400-latin.woff2") format("woff2"); }

:root {
  --paper: #f6f5f1; --ink: #111114; --mute: #5e5c66; --line: #dad8d1; --surface: #ffffff;
  --uv: #6a3dff; --uv-soft: #e9e2ff; --ice: #cdefff; --ice-soft: #eef9ff;
  --warm: #c4561c; --warm-soft: #fbe7dc; --faint: #8c8a94; --grid: #ebe9e3; --pt: #c9c6bd;
  --mark: rgba(106, 61, 255, .16);
  --display: "Archivo Expanded", "Archivo", ui-sans-serif, system-ui, sans-serif;
  --heading: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 6px; --measure: 68ch;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e0e12; --ink: #eceaf2; --mute: #a8a5b3; --line: #26252e; --surface: #15141b;
    --uv: #8b6cff; --uv-soft: #241b4a; --ice: #9ed8f5; --ice-soft: #0f2130;
    --warm: #e9844c; --warm-soft: #3a2116; --faint: #78768a; --grid: #1d1c24; --pt: #3b3a46; --mark: rgba(139, 108, 255, .28);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e0e12; --ink: #eceaf2; --mute: #a8a5b3; --line: #26252e; --surface: #15141b;
  --uv: #8b6cff; --uv-soft: #241b4a; --ice: #9ed8f5; --ice-soft: #0f2130;
  --warm: #e9844c; --warm-soft: #3a2116; --faint: #78768a; --grid: #1d1c24; --pt: #3b3a46; --mark: rgba(139, 108, 255, .28);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--body); }
:focus-visible { outline: 2px solid var(--uv); outline-offset: 2px; }
a { color: var(--uv); text-underline-offset: 2px; }
button, input, select { font: inherit; color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--surface); padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); z-index: 50; }
.skip:focus { left: 16px; }

/* top bar and title */
.topbar { border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; }
.site { font: 800 15px/1 var(--display); letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.site:hover { color: var(--uv); }
.meta { font: 400 12px/1.4 var(--mono); color: var(--mute); letter-spacing: .02em; }
header.hero { padding: 48px 0 28px; }
.kicker { font: 400 12px/1.4 var(--mono); color: var(--mute); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px; }
h1.title { font: 800 clamp(1.75rem, 1.1rem + 2.7vw, 3rem)/1.06 var(--display); letter-spacing: -.03em; margin: 0 0 18px;
  text-wrap: balance; overflow-wrap: break-word; max-width: 22ch; }
.lede { font-size: 18px; line-height: 1.55; color: var(--ink); max-width: var(--measure); margin: 0 0 12px; }
.lede.mute, p.mute { color: var(--mute); }
h2 { font: 700 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.15 var(--heading); letter-spacing: -.015em; margin: 0 0 10px; text-wrap: balance; }
h3 { font: 700 18px/1.3 var(--heading); margin: 22px 0 8px; letter-spacing: -.005em; }
p { max-width: var(--measure); margin: 0 0 12px; }
.num { font-family: var(--mono); font-size: .92em; white-space: nowrap; }

/* key findings */
.findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 26px 0 8px; padding: 0; list-style: none; }
.finding { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px 16px; }
.finding b { display: block; font: 700 16px/1.3 var(--heading); margin: 0 0 6px; }
.finding p { font-size: 14.5px; line-height: 1.5; margin: 0; color: var(--mute); }
.finding a { font-size: 13px; display: inline-block; margin-top: 8px; }

/* section navigation */
nav.sections { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(6px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
nav.sections ul { display: flex; gap: 4px; list-style: none; margin: 0 auto; padding: 8px 16px; max-width: 1120px; overflow-x: auto;
  scrollbar-width: none; }
nav.sections a { display: block; white-space: nowrap; padding: 5px 10px; border-radius: 999px; font-size: 13.5px; color: var(--mute); text-decoration: none; }
nav.sections a:hover, nav.sections a[aria-current="true"] { color: var(--ink); background: var(--uv-soft); }

section.panel { padding: 44px 0 20px; border-bottom: 1px solid var(--line); scroll-margin-top: 52px; }
.pnum { font: 400 12px/1 var(--mono); color: var(--uv); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; }
.sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 8px 14px 0 var(--line); padding: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 18px; }
.grid2.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 860px) { .grid2, .grid2.even { grid-template-columns: minmax(0, 1fr); } }

/* controls */
.controls { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 12px; }
.ctl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ctl > span:first-child { font: 400 11.5px/1 var(--mono); color: var(--mute); text-transform: uppercase; letter-spacing: .06em; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--paper); gap: 2px; }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 5px 11px; font-size: 13px; cursor: pointer; color: var(--mute); min-height: 30px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button:disabled { opacity: .38; cursor: not-allowed; }
select.sel { border: 1px solid var(--line); border-radius: 999px; padding: 5px 30px 5px 12px; background: var(--paper); font-size: 13px; min-height: 32px; max-width: 100%; }
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 13px; font-size: 13.5px; cursor: pointer;
  box-shadow: 3px 5px 0 var(--line); min-height: 34px; }
.btn:active { transform: translate(2px, 3px); box-shadow: 1px 2px 0 var(--line); }
.btn.primary { background: var(--uv); color: #fff; border-color: var(--uv); }
.btn.small { padding: 4px 10px; font-size: 12.5px; min-height: 30px; box-shadow: 2px 3px 0 var(--line); }

/* stat tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); }
.tile .v { font: 400 22px/1.15 var(--mono); letter-spacing: -.01em; }
.tile .k { font-size: 12.5px; color: var(--mute); line-height: 1.35; margin-top: 3px; }
.tile.wide { grid-column: 1 / -1; }
.tile.uv .v { color: var(--uv); }
.note { font-size: 13px; color: var(--mute); line-height: 1.5; max-width: var(--measure); }
.bars { display: grid; gap: 6px; margin-top: 6px; }
.bar { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 3.6em; gap: 8px; align-items: center; font-size: 12.5px; color: var(--mute); }
.bar .track { display: block; height: 10px; background: var(--grid); border-radius: 999px; overflow: hidden; }
.bar .fill { display: block; height: 100%; background: var(--uv); border-radius: 999px; }
.bar .fill.ice { background: var(--ice); }
.bar .fill.mute { background: var(--pt); }
.bar .val { font-family: var(--mono); text-align: right; color: var(--ink); }

/* charts */
.chart { width: 100%; min-height: 200px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--body); fill: var(--mute); font-size: 11px; }
.chart .ttl { font-family: var(--mono); fill: var(--ink); font-size: 13px; }
.chart circle.pt { cursor: pointer; }
.chart circle.pt:focus-visible { outline: none; stroke: var(--ink); stroke-width: 2.5px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--mute); margin: 8px 0 0; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.legend i.sq { border-radius: 2px; }

/* cluster card */
.cluster h3 { margin: 4px 0 6px; }
.cluster .desc { color: var(--mute); font-size: 14px; margin: 0 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chip { font: 400 12px/1 var(--mono); padding: 5px 8px; border-radius: 4px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.chip.uv { background: var(--uv-soft); border-color: transparent; }

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font: 400 11.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.tbl td.n, .tbl th.n { text-align: right; font-family: var(--mono); white-space: nowrap; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ok { color: var(--uv); } .no { color: var(--mute); }

/* registry */
.reg-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 14px 0 10px; }
.reg-tools input[type="search"] { border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; background: var(--surface); min-width: min(100%, 320px); font-size: 14px; }
.reg-count { font: 400 12.5px/1.4 var(--mono); color: var(--mute); margin: 0 0 8px; }
.reg-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.reg-list li { border-bottom: 1px solid var(--line); }
.reg-list details > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 4.2em 7.6em minmax(0, 1fr); gap: 10px; padding: 10px 4px; align-items: baseline; }
.reg-list details > summary::-webkit-details-marker { display: none; }
.reg-list .rid { font: 400 13px/1.3 var(--mono); }
.status { font: 400 11px/1 var(--mono); padding: 4px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: .04em; justify-self: start; }
.status.held { background: var(--uv-soft); color: var(--uv); }
.status.not-held { background: var(--warm-soft); color: var(--warm); }
.status.not-run { background: var(--grid); color: var(--mute); }
.status.descriptive { background: var(--ice-soft); color: color-mix(in srgb, var(--ice) 35%, var(--ink)); }
.reg-list .what { font-size: 14px; line-height: 1.45; }
.reg-list dl { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 4px 12px; margin: 0 4px 12px; font-size: 13.5px; }
.reg-list dt { color: var(--mute); font: 400 12px/1.6 var(--mono); }
.reg-list dd { margin: 0; }
@media (max-width: 600px) {
  .reg-list details > summary { grid-template-columns: 3.6em minmax(0, 1fr); }
  .reg-list .what { grid-column: 1 / -1; }
  .reg-list dl { grid-template-columns: minmax(0, 1fr); }
}

/* maps */
.maps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
@media (max-width: 860px) { .maps { grid-template-columns: minmax(0, 1fr); } }
.map { position: relative; height: 440px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 600px) { .map { height: 340px; } }
.map .mbar { position: absolute; z-index: 2; left: 10px; right: 10px; top: 10px; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }
.map .mbar > * { pointer-events: auto; }
.map .mlegend { position: absolute; z-index: 2; left: 10px; bottom: 10px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 6px 9px; font-size: 11.5px; color: var(--mute); max-width: 80%; }
.map .ramp { height: 7px; width: 140px; border-radius: 4px; margin: 4px 0 2px; }
.map .ends { display: flex; justify-content: space-between; width: 140px; }
.map .tip { position: absolute; z-index: 5; pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px 9px; font-size: 12px; display: none; max-width: 260px; }
.map .placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mute); font-size: 14px; padding: 20px; text-align: center; }

/* content note and drawer */
.cw { border: 1px solid color-mix(in srgb, var(--warm) 40%, var(--line)); border-radius: var(--radius); padding: 14px 16px;
  background: color-mix(in srgb, var(--warm) 6%, var(--surface)); }
.cw p { font-size: 14px; margin: 0 0 10px; }
.drawer { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: -10px 0 30px rgba(0, 0, 0, .12); }
.drawer .dh { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.drawer .dh .t { flex: 1; min-width: 0; }
.drawer .dh h3 { margin: 6px 0 0; font-size: 20px; }
.drawer .db { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 36px; }
.drawer h4 { font: 400 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 20px 0 8px; }
.x { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); cursor: pointer; font-size: 18px; line-height: 1; flex: none; }
.msg { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 10px; background: var(--paper); }
.msg.chosen { border-left: 3px solid var(--uv); }
.msg.rejected { border-left: 3px solid var(--warm); }
.msg.ans { border-left: 3px solid var(--ink); }
.msg.ans.sft { border-left-color: var(--ice); }
.msg.ans.arm { border-left-color: var(--warm); }
.who { font: 400 11px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.txt { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; }
.txt.clip { max-height: 16em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 1px; }
.ex { display: block; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 11px; margin: 0 0 7px; background: var(--paper); cursor: pointer; }
.ex:hover { border-color: var(--uv); }
.ex .q, .ex .a { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ex .q { -webkit-line-clamp: 2; font-size: 12.5px; color: var(--mute); }
.ex .a { -webkit-line-clamp: 3; font-size: 13.5px; margin-top: 4px; }
.ex .u { font: 400 11px/1 var(--mono); color: var(--mute); }
.navrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }

footer.foot { padding: 34px 0 60px; font-size: 13.5px; color: var(--mute); }
footer.foot p { max-width: 90ch; }
.extra-card { margin-top: 12px; }