:root { color-scheme: light; --link: #0b57d0; --muted: #555; --rule: #ddd; }
body { margin: 0; background: #fff; color: #000; font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
main { box-sizing: border-box; min-height: 100vh; padding: 25px 50px 50px; }
a, a:visited, a:hover, a:active { color: var(--link); text-decoration: none; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
h1 { margin: 0 0 4px; line-height: 0; }
.logo { display: block; margin-left: -4px; }
.subtitle { color: var(--muted); margin: 0 0 32px; }
.subtitle strong { color: #000; font-weight: 600; }
h2 { width: fit-content; font-size: 18px; margin: 36px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
dl { margin: 0; }
dt { margin-top: 14px; font-weight: 600; }
dd { margin: 2px 0 0; color: #222; }
code { font: 14px ui-monospace, SFMono-Regular, Menlo, monospace; }
.top { display: flex; gap: 20px; align-items: stretch; margin-bottom: 8px; }
.top .race { flex: 55 1 0; min-width: 0; box-sizing: border-box; }
.side { flex: 45 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* The picked assessment's design, as tall as the row; a shade darker than "Test Details" so the two read as separate. */
.summary { flex: 0 0 auto; box-sizing: border-box; background: #e9ebee; color: #111; border-radius: 10px; padding: 18px; font-size: 13.5px; line-height: 1.45; }
.summary h3 { font-size: 17px; margin: 0 0 10px; }
/* Nine test templates (placeholders for now). */
/* Fixed-size squares; the card is as wide as the grid, and the chart and Test Details take the rest of the row. */
.tpl { display: grid; grid-template-columns: repeat(3, 64px); column-gap: 36px; row-gap: 8px; justify-content: center; margin: 0 0 14px; padding: 0; list-style: none; }
.tpl li { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tpl button { width: 100%; aspect-ratio: 1; display: grid; place-items: center; background: #3a3f47; color: #fff; border: 1px solid #3a3f47; border-radius: 8px; padding: 0; cursor: pointer; }
.tpl button .icon { font-size: 28px; }
.tpl small { font-size: 11.5px; color: #333; }
.tpl button:hover { background: #4a505a; }
.tpl button[aria-pressed="true"] { background: #1f2329; border-color: var(--link); box-shadow: 0 0 0 1px var(--link); }
/* Not defined yet (no saved name): grayed out, like the planned resource cards. */
.tpl button:disabled { background: #e2e5ea; border-color: #e2e5ea; color: #999; cursor: default; }
.tpl button:disabled + small { color: #999; }
.tests { flex: 0 0 auto; min-height: 70%; box-sizing: border-box; min-width: 0; background: #f3f4f6; color: #111; border-radius: 10px; padding: 18px; font-size: 13.5px; line-height: 1.45; }
.tests h3 { font-size: 17px; margin: 0 0 10px; }
.tests label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.tests select { width: 100%; font: inherit; padding: 6px 8px; border: 1px solid #c9ced6; border-radius: 6px; background: #fff; color: #111; }
.tests .status { display: inline-block; margin: 10px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; background: #e2e5ea; color: #333; }
.tests .status.live { background: #dbeafe; color: #0b3d91; }
.tests dl { margin: 6px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; }
.tests dt { margin: 0; font-size: 12px; font-weight: 700; color: #333; padding-top: 1px; }
.tests dd { margin: 0; color: #222; }
.tests ol { margin: 0; padding-left: 18px; }
.test-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.test-links a { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 8px 14px; border-radius: 999px; background: #0b1018; color: #fff; }
.test-links a:visited { color: #fff; }
.test-links a:hover { filter: brightness(1.25); }
/* Not the chart's purple, teal or orange, which mean the three columns. */
#go-analyze { background: #1e1e1e; }  /* the analyze view's editor dark */
#go-explain { background: #0b57d0; }  /* the page's link blue */
#go-raw { background: #137333; }      /* green, for data */
.test-links a[aria-disabled="true"] { background: #e2e5ea !important; color: #888; pointer-events: none; }
.tests q { font-style: italic; }
.tests .foot { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 1000px) { .top { flex-direction: column; } .top .race { flex: none; } .tests, .summary { flex: none; } }
.note { color: var(--muted); font-size: 14px; margin-top: 40px; }
/* Resources: equal cards that wrap to as many columns as fit. The whole card is the link. */
.cards { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.card { display: flex; flex-direction: column; gap: 6px; height: 100%; box-sizing: border-box; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 10px; background: #fff; }
.card .name { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card p { margin: 0; color: #222; font-size: 14px; line-height: 1.45; }
a.card:hover { border-color: var(--link); }
/* Planned resources: shown, not linked yet. */
.card.soon, .card.soon .name, .card.soon p { color: #999; background: #fafafa; }