/* SOTA Tests: page layout and the test list. The player has its own sheet, player.css. Colours,
   type scale and the top bar come from sota.css (shared by all SOTA sites). */

:root {
  --wide: 1240px;          /* same page width as the checklist */
  /* Right and wrong answers. Red is sota.css's own; green is chosen to sit beside it. */
  --good: #1D7348;
  --good-tint: #EBF5EF;
  --bad-tint: #FBEDEC;
}
:root[data-theme="dark"] {
  --good: #6CC795;
  --good-tint: #172A20;
  --bad-tint: #2D1C1C;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 3px 18px 0;
  font: inherit;
  font-size: var(--text-ui);
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--hairline);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { border-color: var(--ink); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.btn-primary { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.btn-serious { color: #fff; background: var(--red); border-color: var(--red); }
:root[data-theme="dark"] .btn-serious { color: var(--paper); }
.btn-serious:hover { background: color-mix(in srgb, var(--red) 86%, var(--ink)); border-color: var(--red); }
.btn-quiet { border-color: transparent; background: none; color: var(--graphite); }
.btn-quiet:hover { color: var(--ink); border-color: var(--hairline); }
.btn-sm { height: 34px; padding-inline: 12px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: default; }
.btn:disabled:hover { border-color: var(--hairline); }
.btn-primary:disabled:hover { background: var(--ink); border-color: var(--ink); }
.btn svg { width: 16px; height: 16px; flex: none; margin-top: -3px; }
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 5px 0;
  font-family: var(--serif);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--graphite);
  border: 1px solid var(--hairline);
  border-bottom-width: 2px;
}

/* ---------- shared bits ---------- */

.bar { position: relative; height: 4px; background: var(--hairline); overflow: hidden; }
.bar > span { position: absolute; inset: 0 auto 0 0; background: var(--ink); transition: width .25s ease; }
.mode-chip {
  flex: none;
  padding: 2px 8px 0;
  font-size: var(--text-label);
  font-variant-caps: all-small-caps;
  letter-spacing: .08em;
  color: var(--graphite);
  border: 1px solid var(--hairline);
}
.mode-chip.is-serious { color: var(--red); border-color: var(--red); }
.block-title {
  font-size: var(--text-label);
  font-weight: 400;
  font-variant-caps: all-small-caps;
  letter-spacing: .1em;
  color: var(--graphite);
}


html { scroll-padding-top: calc(var(--topbar-h) + 24px); }

.page {
  max-width: var(--wide);
  margin-inline: auto;
  padding: 36px clamp(16px, 4vw, 40px) 96px;
}

.summary {
  display: grid;
  gap: 10px;
  padding: 20px 0 24px;
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.eyebrow {
  font-size: var(--text-label);
  font-variant-caps: all-small-caps;
  letter-spacing: .08em;
  color: var(--graphite);
}
h1 {
  font-size: clamp(28px, 3.6vw, var(--text-title));
  line-height: 1.12;
  font-weight: 700;
  text-wrap: balance;
}
.lede {
  max-width: 62ch;
  font-size: var(--text-body);
  color: var(--graphite);
}

/* The list of tests */
.test-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.test-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 32px;
  align-items: center;
  padding: 22px 24px;
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--ink);
}
.test-card h2 { font-size: var(--text-h2); line-height: 1.2; }
.test-card h2 a { color: var(--ink); }
.test-card h2 a:hover { color: var(--red); text-decoration: none; }
.test-card > div { display: grid; gap: 8px; }
.test-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: var(--text-small);
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
}
.test-summary { max-width: 66ch; color: var(--graphite); }
.test-mine {
  justify-self: start;
  padding: 5px 10px 3px;
  font-size: var(--text-small);
  color: var(--ink);
  background: var(--plate);
}
@media (max-width: 640px) {
  .test-card { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
  .test-card .btn { justify-self: start; }
}

.section-head {
  margin-top: 40px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
  font-size: var(--text-label);
  font-variant-caps: all-small-caps;
  letter-spacing: .08em;
  color: var(--graphite);
}