:root {
  --ink: #1f2430;
  --muted: #6b7280;
  --line: #e3e5ea;
  --panel: #f7f8fa;
  --accent: #3b3f8c;
  --teal: #12606e;
  /* answer shades, from the first option to the last */
  --s0: #b8412e;
  --s1: #e3a08f;
  --s2: #c9ccd3;
  --s3: #8fc4a6;
  --s4: #1f7a4d;
}

* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: #fff; }
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 1.25rem; }
a { color: var(--accent); }
h2 { margin: 3rem 0 .5rem; font-size: 1.7rem; }
h2 a { color: inherit; text-decoration: none; }
h2 a:hover { text-decoration: underline; }
h3 { margin-top: 2rem; }
.intro { color: var(--muted); max-width: 52rem; margin-top: 0; }
.note { font-size: .88rem; color: var(--muted); max-width: 52rem; }
footer { color: var(--muted); font-size: .85rem; padding: 2rem 1.25rem 3rem; }

.hero { background: linear-gradient(135deg, var(--teal), var(--accent)); color: #fff; padding: 3rem 0 1.5rem; }
.hero a { color: #fff; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; opacity: .8; margin: 0 0 .5rem; }
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); margin: 0 0 .5rem; }
.lede { font-size: 1.1rem; max-width: 50rem; opacity: .95; }
.hero nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.25rem; }
.hero nav a { text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.hero nav a:hover, .hero nav a:focus-visible { border-bottom-color: #fff; }

.notice { background: #fff8e6; border: 1px solid #f0d78a; padding: .75rem 1rem; border-radius: 8px; }
.notice.error { background: #fdecea; border-color: #f0a8a0; }

/* at a glance */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: .9rem; }
.card { display: block; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; background: var(--panel); transition: border-color .15s; }
.card:hover, .card:focus-visible { border-color: var(--accent); }
.card-test { font-size: .82rem; color: var(--muted); font-weight: 600; }
.card-result { font-size: 1.4rem; font-weight: 800; color: var(--accent); line-height: 1.15; margin-top: .35rem; hyphens: auto; overflow-wrap: break-word; }
.card-result.long { font-size: 1.12rem; }
.card-name { font-weight: 600; }
.card-runs { font-size: .82rem; color: var(--muted); margin-top: .35rem; }

/* one test */
.quiz { border-top: 1px solid var(--line); margin-top: 3rem; }
.headline { margin: .25rem 0 .75rem; }
.headline .big { font-size: 2.6rem; font-weight: 800; color: var(--accent); line-height: 1.1; }
.headline .big-name { font-size: 1.2rem; font-weight: 600; }

.scales { display: grid; gap: .9rem; margin: 1.25rem 0 1.5rem; max-width: 46rem; }
.scale { display: grid; grid-template-columns: 8.5rem 1fr 8.5rem; gap: .1rem .6rem; align-items: center; }
.scale-name { grid-column: 1 / -1; font-weight: 600; font-size: .95rem; }
.scale-low { text-align: right; font-size: .8rem; color: var(--muted); }
.scale-high { font-size: .8rem; color: var(--muted); }
.track { position: relative; height: 12px; border-radius: 999px; background: #eceef2; }
.track .range { position: absolute; top: 0; bottom: 0; min-width: 4px; border-radius: 999px; background: #b9c3e6; }
.track .mean { position: absolute; top: -4px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: var(--accent); }
.scale-value { grid-column: 2; font-size: .8rem; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }
.chart { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.chart img { width: 100%; display: block; }
.chart figcaption { padding: .7rem .9rem .9rem; font-size: .88rem; color: var(--muted); }
.chart figcaption strong { color: var(--ink); display: block; font-size: .98rem; }

details { margin-top: 1.25rem; border: 1px solid var(--line); border-radius: 12px; padding: .6rem 1rem; }
details[open] { padding-bottom: 1rem; }
summary { cursor: pointer; font-weight: 600; }
details .intro { margin-top: .75rem; }

.filters { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin-bottom: .5rem; }
.filters .grow { flex: 1; min-width: 12rem; display: flex; }
.filters .grow input { flex: 1; }
.filters .check { font-size: .88rem; color: var(--muted); }
input[type=search] { font: inherit; color: var(--ink); padding: .4rem .55rem; border: 1px solid #c7cbd3; border-radius: 8px; background: #fff; }
.count { color: var(--muted); font-size: .85rem; }

.items { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.item { border: 1px solid var(--line); border-radius: 10px; padding: .5rem .9rem; display: grid; grid-template-columns: 2.2rem 1fr; gap: .2rem .6rem; }
.item.varied { border-left: 4px solid #d8a43a; }
.item .num { color: var(--muted); font-variant-numeric: tabular-nums; }
.item .text { font-weight: 500; }
.item .detail { grid-column: 2; display: grid; gap: .3rem; }
.item .answer { font-size: .88rem; color: var(--accent); font-weight: 600; }
.dist { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: #eceef2; max-width: 22rem; }
.seg[data-shade="0"] { background: var(--s0); }
.seg[data-shade="1"] { background: var(--s1); }
.seg[data-shade="2"] { background: var(--s2); }
.seg[data-shade="3"] { background: var(--s3); }
.seg[data-shade="4"] { background: var(--s4); }
.pair { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; font-size: .9rem; }
.pair li { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); }
.pair li.picked { color: var(--ink); font-weight: 600; }
.pair-count { white-space: nowrap; font-variant-numeric: tabular-nums; }

.table-wrap { overflow-x: auto; margin-top: .75rem; }
table.runs { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: .88rem; }
table.runs th, table.runs td { padding: .3rem .55rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
table.runs .num { text-align: right; }
table.runs tr.other td { background: #fbf6ea; }

/* setup */
.setup { display: grid; grid-template-columns: 9rem 1fr; gap: .4rem 1rem; }
.setup dt { font-weight: 600; }
.setup dd { margin: 0; word-break: break-word; }
.source { border-top: 1px solid var(--line); padding-top: .25rem; }
.source h4 { margin: .75rem 0 .25rem; }
.source p { margin: .25rem 0; font-size: .92rem; max-width: 52rem; }

@media (max-width: 640px) {
  .setup { grid-template-columns: 1fr; }
  .setup dd { margin-bottom: .5rem; }
  .scale { grid-template-columns: 5.5rem 1fr 5.5rem; }
}