/* The console, the control window and sign-in. The shared window has its own sheet, present.css,
 * because a candidate sees it and it must not look like this product.
 *
 * Matched to the new marketing site: its colours, the four-dot mark, Inter at its weights, and the
 * line-drawn boxes of its hero art. Green is only ever the real question and red only ever a
 * decoy, so no status, button or error uses either. Attention is orange.
 *
 * Two colours are darker than the site's for contrast: --blue-ink carries white text at 4.7:1
 * (the site's #209cee manages 3.0:1), and --decoy-ink is readable on the pink band at 4.8:1. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/Inter-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Inter-SemiBold.woff2") format("woff2");
}
/* Bold serves 700 to 900, so the heavy headings use the real face rather than a synthesised one. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("/fonts/Inter-Bold.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --bg: #fffefc;
  --paper: #ffffff;
  --ink: #040402;
  --text: #3c484e;
  --muted: #6b6b6b;
  --line: #2b2b2b;
  --side: #e0e6f2;
  --sky: #d6eaf2;
  --blue: #209cee;
  --blue-ink: #1878b8;
  --real-bg: #e3f4e6;
  --real: #1f7a43;
  --decoy-bg: #fde3dc;
  --decoy-ink: #b8350f;
  --orange: #e08a1e;
  --warn-bg: #fdf0dc;
  --warn-ink: #8a4b00;
  --f: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --stroke: 1.75px;
  --depth: 10px;
  --radius: 5px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px / 23px var(--f);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ol,
ul {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--ink);
}

a {
  color: var(--blue-ink);
  font-weight: 600;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

[hidden],
.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.small {
  font-size: 13px;
  line-height: 19px;
  color: var(--muted);
}

.label {
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 10px;
}

.icon {
  width: 16px;
  height: 16px;
  flex: none;
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  font: 700 11px / 1 var(--f);
  color: var(--ink);
  background: var(--paper);
}

/* Header ----------------------------------------------------------------------------------- */

.top {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: 70px;
  padding: 0 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
}

.brand:hover {
  text-decoration: none;
}

.dots {
  display: grid;
  grid-template-columns: 7px 7px;
  grid-template-rows: 7px 7px;
  gap: 3px;
}

.dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.dots i:nth-child(1) {
  background: #2f6de0;
}
.dots i:nth-child(2) {
  background: #2e9e5b;
}
.dots i:nth-child(3) {
  background: #e08a1e;
}
.dots i:nth-child(4) {
  background: #8a54d6;
}

.nav {
  display: flex;
  justify-content: center;
  gap: 34px;
  flex: 1;
}

.nav a {
  padding: 6px 0;
  border-bottom: 3px solid transparent;
  color: var(--text);
  font-size: 16px;
  white-space: nowrap;
}

.nav a:hover {
  color: var(--ink);
  text-decoration: none;
}

.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--blue);
}

.account {
  position: relative;
}

.account summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.account summary::-webkit-details-marker {
  display: none;
}

.account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 20;
  min-width: 260px;
  padding: 14px 16px;
  border: var(--stroke) solid var(--line);
  background: var(--paper);
  display: grid;
  gap: 10px;
}

.account-menu p {
  display: grid;
  font-size: 14px;
  line-height: 20px;
}

.account-menu p b {
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Page ------------------------------------------------------------------------------------- */

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 32px 72px;
}

.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}

.head > div:first-child {
  flex: 1;
  min-width: 0;
}

.head h1 {
  font-size: 40px;
  line-height: 46px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.head h1:focus {
  outline: none;
}

.lead {
  margin-top: 10px;
  max-width: 800px;
  font-size: 18px;
  line-height: 28px;
}

.lead b {
  color: var(--ink);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.panel[hidden] {
  display: none;
}

h2.section {
  margin: 44px 0 12px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 800;
}

/* Buttons ---------------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border: var(--stroke) solid var(--blue-ink);
  border-radius: var(--radius);
  background: var(--blue-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
  filter: brightness(1.08);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
  filter: none;
}

.btn.line {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
}

.btn.sm {
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
}

/* A mark the interviewer has recorded stays pressed until it is taken back. */
.btn.line[aria-pressed="true"] {
  background: var(--warn-bg);
  border-color: var(--orange);
}

/* A button that reads as a link, for the quieter actions in a row. */
.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue-ink);
  font-weight: 600;
}

.link:hover {
  text-decoration: underline;
}

.link:disabled {
  color: var(--muted);
  cursor: default;
  text-decoration: none;
}

/* Boxes: the hero art's oblique box, a line-drawn front with an open top face and a pale side. */

.box {
  position: relative;
  margin: var(--depth) var(--depth) 0 0;
  border: var(--stroke) solid var(--line);
  background: var(--paper);
}

.box::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--stroke));
  right: calc(-1 * var(--stroke));
  top: calc(-1 * var(--depth) - var(--stroke));
  height: var(--depth);
  border: var(--stroke) solid var(--line);
  border-bottom: 0;
  transform: skewX(-45deg);
  transform-origin: bottom left;
  pointer-events: none;
}

.box::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--stroke));
  bottom: calc(-1 * var(--stroke));
  right: calc(-1 * var(--depth) - var(--stroke));
  width: var(--depth);
  border: var(--stroke) solid var(--line);
  border-left: 0;
  background: var(--side);
  transform: skewY(-45deg);
  transform-origin: top left;
  pointer-events: none;
}

.box.sky::after {
  background: var(--sky);
}

.card {
  padding: 18px 20px;
  border: var(--stroke) solid var(--line);
  background: var(--paper);
}

.card > h2,
.box > h2 {
  font-size: 17px;
  line-height: 24px;
  font-weight: 800;
  margin-bottom: 8px;
}

.stack > * + * {
  margin-top: 18px;
}

/* Notices ---------------------------------------------------------------------------------- */

.notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: var(--stroke) solid var(--line);
  background: var(--sky);
  color: var(--ink);
  font-weight: 500;
}

.notice.warn {
  background: var(--warn-bg);
  border-color: var(--orange);
  color: var(--warn-ink);
}

.notice .actions {
  flex: none;
}

.warn-text {
  color: var(--warn-ink);
}

/* Forms ------------------------------------------------------------------------------------ */

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.field label,
.field .label {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  color: var(--ink);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 22px;
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

input[type="file"] {
  font-size: 14px;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink);
}

.check input,
.checks input {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  border: var(--stroke) solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  cursor: pointer;
}

.check input:checked,
.checks input:checked {
  border-color: var(--blue-ink);
  background:
    var(--blue-ink)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.error {
  margin-top: 8px;
  color: var(--warn-ink);
  font-size: 14px;
  font-weight: 600;
}

/* Lists and tables ------------------------------------------------------------------------- */

.tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.tabs button {
  padding: 6px 0;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--text);
  font-weight: 600;
}

.tabs button:hover {
  color: var(--ink);
}

.tabs button span {
  margin-left: 3px;
  color: var(--muted);
  font-weight: 500;
}

.tabs button[aria-pressed="true"] {
  color: var(--ink);
  border-bottom-color: var(--blue);
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  width: 300px;
  color: var(--muted);
}

.search .icon {
  position: absolute;
  left: 12px;
}

.search input:not([type="checkbox"]) {
  padding-left: 36px;
}

.scroll-x {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th {
  padding: 12px 12px 10px 0;
  border-bottom: var(--stroke) solid var(--line);
  text-align: left;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}

.table td {
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--side);
  vertical-align: middle;
}

.table td > b {
  display: block;
  color: var(--ink);
  font-weight: 700;
}

.table td > span.sub {
  display: block;
  font-size: 13px;
  color: var(--muted);
}

.table td.num,
.table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table td.nowrap {
  white-space: nowrap;
}

.table td.act {
  text-align: right;
  white-space: nowrap;
}

.table td.act > * + * {
  margin-left: 16px;
}

.table td.empty {
  padding: 28px 0;
  color: var(--muted);
}

.chip {
  display: inline-block;
  padding: 2px 9px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 19px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.chip.live {
  border-color: var(--sky);
  background: var(--sky);
}

.chip.plain {
  padding-left: 0;
  border-color: transparent;
  color: var(--muted);
  font-weight: 500;
}

.chip.warn {
  border-color: var(--orange);
  background: var(--warn-bg);
  color: var(--warn-ink);
}

.flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--ink);
}

.flag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}

.foot {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}

/* A row's other actions, in a small menu. */
.more {
  position: relative;
  display: inline-block;
}

.more summary {
  list-style: none;
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
}

.more summary::-webkit-details-marker {
  display: none;
}

.more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 10;
  display: grid;
  min-width: 170px;
  padding: 6px 0;
  border: var(--stroke) solid var(--line);
  background: var(--paper);
  text-align: left;
}

.more-menu button {
  padding: 8px 14px;
  border: 0;
  background: none;
  color: var(--ink);
  font-weight: 600;
  text-align: left;
}

.more-menu button:hover {
  background: var(--sky);
}

/* Interviews ------------------------------------------------------------------------------- */

.live-box {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
  padding: 16px 24px 16px 16px;
}

.live-box::after {
  background: var(--sky);
}

.live-box h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 800;
}

.live-box p {
  margin-top: 4px;
}

.live-pic {
  width: 200px;
  min-height: 60px;
  border: var(--stroke) solid var(--line);
  background: var(--paper);
}

.live-pic img,
.live-pic .sprite {
  display: block;
  width: 100%;
  height: auto;
}

.under {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-top: 48px;
}

.under h2 {
  font-size: 17px;
  line-height: 24px;
  font-weight: 800;
  margin-bottom: 8px;
}

.plan-box {
  padding: 20px;
}

.plan-box b {
  color: var(--ink);
}

.plan-box a,
.plan-box .btn {
  margin-top: 12px;
}

.meter {
  height: 8px;
  margin: 14px 0 8px;
  background: var(--side);
}

.meter i {
  display: block;
  height: 100%;
  background: var(--blue);
}

.meter.full i {
  background: var(--orange);
}

.help ol {
  margin: 0 0 12px;
  padding-left: 20px;
}

.help li {
  margin-bottom: 6px;
}

.help b {
  color: var(--ink);
}

/* Builder ---------------------------------------------------------------------------------- */

.builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 48px;
  align-items: start;
}

.builder-side {
  position: sticky;
  top: 20px;
  padding: 20px;
}

.builder-side .actions {
  margin-top: 16px;
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0 14px;
}

.slide-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: slide;
  max-height: 60vh;
  overflow-y: auto;
}

.slide-list li {
  counter-increment: slide;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 12px 0;
  border-top: 1px solid var(--side);
}

.slide-list li::before {
  content: counter(slide);
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.slide-list .text {
  color: var(--ink);
}

.slide-list .meta {
  grid-column: 2;
  font-size: 13px;
  color: var(--muted);
}

.slide-list .row {
  grid-column: 2;
  gap: 16px;
}

.bank {
  display: grid;
  max-height: 360px;
  overflow-y: auto;
}

.bank > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--side);
}

/* Designs and billing ---------------------------------------------------------------------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  min-height: 120px;
  margin: 12px 0;
  border: var(--stroke) solid var(--line);
  background: var(--paper);
}

.frame img,
.frame .sprite {
  display: block;
  width: 100%;
  height: auto;
}

/* An animated design is one PNG with its frames stacked; slide-image.js walks it. */
.sprite {
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.plan-card .price {
  font-size: 32px;
  line-height: 38px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.plan-card .price span {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}

.plan-card .end {
  margin-top: auto;
  padding-top: 8px;
}

.plan-card.current::after {
  background: var(--sky);
}

.plans {
  margin-top: 18px;
}

#bill-foot {
  margin-top: 24px;
}

/* The first-run checklist: a step to do links to its page, a step done says so. */
.setup {
  margin-bottom: 32px;
}

.setup ol {
  margin: 0;
  padding-left: 20px;
}

.setup li {
  padding: 8px 0;
  border-top: 1px solid var(--side);
}

.setup li:first-child {
  border-top: 0;
}

.setup li > span:first-child {
  margin-right: 14px;
  color: var(--ink);
}

.setup li.done > span:first-child {
  color: var(--muted);
  text-decoration: line-through;
}

/* The cancel reasons: one choice, required before the cancel goes through. */
.reasons {
  display: grid;
  gap: 2px;
  margin: 18px 0 16px;
  padding: 0;
  border: 0;
}

.reasons legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.reasons label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  color: var(--ink);
  cursor: pointer;
}

.reasons input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--blue-ink);
}

/* Support: a ticket's messages in order, ours marked by a rule down the side. */
.ticket-form {
  margin-bottom: 28px;
}

.back {
  margin-bottom: 8px;
  font-size: 14px;
}

.back + h2.section {
  margin-top: 0;
}

.thread {
  margin: 16px 0 24px;
}

.thread .msg {
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--side);
}

.thread .msg + .msg {
  margin-top: 20px;
}

.thread .msg.staff {
  border-left-color: var(--blue-ink);
}

.thread .body {
  margin-top: 4px;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Affiliate account (/affiliate/): the join form, the links with their counts, and the ledger. */
.narrow {
  max-width: 760px;
}

.signin .box.join {
  max-width: 560px;
}

.signin .check + .check {
  margin-top: 12px;
}

.signin .check:last-of-type {
  margin-bottom: 16px;
}

.link-cell code {
  font: 500 14px / 22px var(--mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.link-cell .sub {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.payout-form {
  margin: 8px 0 12px;
}

.payout-form input:not([type="checkbox"]) {
  flex: 1;
  max-width: 360px;
  min-width: 220px;
}

.stats.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 32px 0 12px;
}

.table td.text {
  min-width: 260px;
  max-width: 520px;
  overflow-wrap: anywhere;
}

.table td > span.sub.warn-text {
  color: var(--warn-ink);
}

/* Operator --------------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 40px;
}

.stats b {
  display: block;
  font-size: 40px;
  line-height: 44px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stats span {
  font-size: 14px;
  color: var(--muted);
}

.dname {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dname img {
  width: 84px;
  height: 42px;
  flex: none;
  object-fit: cover;
  object-position: top;
  border: var(--stroke) solid var(--line);
  background: var(--paper);
}

.dname b {
  display: block;
  color: var(--ink);
}

.recall {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.recall > b {
  width: 34px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.bar {
  position: relative;
  width: 110px;
  height: 8px;
  flex: none;
  background: var(--side);
}

.bar i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--blue);
}

.bar.weak i {
  background: var(--orange);
}

/* The weak line: recall above it is a weak run. */
.bar em {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--ink);
}

.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-top: 48px;
}

.two h2 {
  font-size: 20px;
  line-height: 26px;
  font-weight: 800;
  margin-bottom: 6px;
}

.list {
  padding: 0;
  list-style: none;
}

.list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--side);
  font-size: 14px;
  line-height: 21px;
}

.list li > * + * {
  margin-top: 2px;
}

.list code {
  font: 600 12px / 18px var(--mono);
  color: var(--muted);
}

.list b {
  color: var(--ink);
}

.list .empty {
  color: var(--muted);
}

/* Jobs ------------------------------------------------------------------------------------- */

#j-tick {
  margin-bottom: 8px;
}

/* A job's last 20 runs, oldest first: the height is how long each took. */
.spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
  margin: -16px 0 32px;
}

.spark i {
  flex: 0 0 8px;
  background: var(--blue);
}

.spark i.warn {
  background: var(--orange);
}

.spark i.plain {
  background: var(--side);
}

.job-log {
  max-height: 320px;
  margin: 16px 0 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--side);
  background: var(--bg);
  color: var(--ink);
  font: 13px / 20px var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Control window --------------------------------------------------------------------------- */

.run-top {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding: 12px 24px;
  border-bottom: var(--stroke) solid var(--line);
  background: var(--bg);
}

.run-top .brand {
  font-size: 17px;
}

.private {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
}

.private::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
}

.screen-state {
  margin-left: auto;
  font-size: 14px;
  color: var(--text);
}

.screen-state.warn {
  color: var(--warn-ink);
  font-weight: 600;
}

.run .head {
  margin-bottom: 28px;
}

.run-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.run-grid > section > .label:first-child {
  margin-bottom: 22px;
}

.screen {
  padding: 0;
}

.band {
  padding: 10px 16px 14px;
  border-top: var(--stroke) solid var(--line);
}

.band:first-child {
  border-top: 0;
}

.band > span {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.band.real {
  background: var(--real-bg);
}

.band.real > span {
  color: var(--real);
}

.band.decoy {
  background: var(--decoy-bg);
}

.band.decoy > span {
  color: var(--decoy-ink);
}

.band p {
  color: var(--ink);
  font-weight: 600;
}

.band .question {
  font-size: 19px;
  line-height: 27px;
  font-weight: 700;
}

.band .frame {
  margin: 12px 0 0;
}

.band .answer-line {
  margin-top: 8px;
  font-weight: 500;
}

.options {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.options li {
  padding: 3px 8px;
  border: 1.5px solid transparent;
  border-radius: 4px;
  color: var(--ink);
}

.options li b {
  font-variant-numeric: tabular-nums;
}

/* Control window only: the right option, marked. The shared window never marks one. */
.options li.correct {
  border-color: var(--real);
  background: var(--paper);
}

.letter {
  font-family: var(--mono);
  font-weight: 700;
}

.side {
  display: grid;
  gap: 18px;
  padding-top: 38px;
}

.listen {
  font-size: 17px;
  line-height: 26px;
  font-weight: 600;
  color: var(--ink);
}

.canary {
  display: inline-block;
  padding: 0 10px;
  border-radius: var(--radius);
  background: var(--decoy-bg);
  color: var(--decoy-ink);
  font-weight: 800;
}

.marks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.checks {
  padding: 0;
  list-style: none;
}

.checks label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--side);
  color: var(--ink);
  cursor: pointer;
}

.checks li:first-child label {
  border-top: 0;
  padding-top: 0;
}

.checks input:checked + span {
  color: var(--muted);
  text-decoration: line-through;
}

.card textarea {
  margin-top: 8px;
}

#prepared:not(:empty) {
  margin-bottom: 14px;
}

.saved {
  min-height: 19px;
  margin-top: 6px;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 14px;
}

.log {
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 22px;
  max-height: 280px;
  overflow-y: auto;
}

.log time {
  display: inline-block;
  width: 52px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.so-far {
  margin-top: 22px;
}

.strip-h {
  margin-top: 40px;
}

.strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  margin: 22px 10px 0 0;
  padding: 0;
  list-style: none;
}

.strip button {
  position: relative;
  display: block;
  width: 100%;
  min-height: 66px;
  padding: 8px 9px;
  border: var(--stroke) solid var(--line);
  background: var(--paper);
  color: var(--text);
  font-size: 12px;
  line-height: 16px;
  text-align: left;
}

.strip button b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
}

.strip button span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.strip button.marked b::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

.strip button.done {
  border-color: var(--muted);
  color: var(--muted);
}

.strip button.done b {
  color: var(--muted);
}

.strip button[aria-current="step"] {
  background: var(--sky);
  color: var(--ink);
}

.strip button[aria-current="step"]::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--stroke));
  bottom: calc(-1 * var(--stroke));
  right: calc(-8px - var(--stroke));
  width: 8px;
  border: var(--stroke) solid var(--line);
  border-left: 0;
  background: var(--blue);
  transform: skewY(-45deg);
  transform-origin: top left;
}

.strip button[aria-current="step"]::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--stroke));
  right: calc(-1 * var(--stroke));
  top: calc(-8px - var(--stroke));
  height: 8px;
  border: var(--stroke) solid var(--line);
  border-bottom: 0;
  transform: skewX(-45deg);
  transform-origin: bottom left;
}

.timer.over {
  color: var(--warn-ink);
}

/* Confirmation ----------------------------------------------------------------------------- */

dialog.confirm {
  max-width: 460px;
  padding: 24px;
  border: var(--stroke) solid var(--line);
  background: var(--paper);
  color: var(--text);
}

dialog.confirm::backdrop {
  background: rgba(4, 4, 2, 0.35);
}

dialog.confirm h2 {
  font-size: 22px;
  line-height: 28px;
  font-weight: 800;
  margin-bottom: 8px;
}

dialog.confirm h3 {
  margin-top: 20px;
  font-size: 16px;
  line-height: 22px;
}

dialog.confirm .actions {
  margin-top: 20px;
}

/* The question editor: a whole form, so wider, and it scrolls inside a short window. */
dialog.confirm.wide {
  width: min(640px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  overflow: auto;
}

/* Sign-in ---------------------------------------------------------------------------------- */

.signin {
  display: grid;
  place-items: start center;
  padding: 48px 24px 80px;
}

/* On the console sign-in page the box sits in the middle of the window. The bottom padding
   matches the 70px header, so the box centres on the window rather than on the space below the
   header. A box taller than the window makes the page longer. */
.signin-page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.signin-page .signin {
  flex: 1;
  place-items: center;
  padding: 24px 24px 94px;
}

.signin .box {
  width: 100%;
  max-width: 440px;
  padding: 32px;
}

.signin h1 {
  font-size: 40px;
  line-height: 46px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.signin #intro {
  margin: 10px 0 24px;
  font-size: 15px;
  line-height: 23px;
  color: var(--text);
}

.signin form .btn {
  width: 100%;
}

.signin form .row .btn {
  flex: 1;
  width: auto;
}

.signin #code {
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.signin .terms {
  margin-top: 22px;
}

/* Narrow screens --------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .top {
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 12px 16px;
  }

  .nav {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    gap: 24px;
    overflow-x: auto;
  }

  .account {
    margin-left: auto;
  }

  .wrap {
    padding: 28px 16px 56px;
  }

  .head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .head h1 {
    font-size: 32px;
    line-height: 38px;
  }

  .live-box {
    grid-template-columns: 1fr;
  }

  .tools {
    flex-direction: column;
    align-items: stretch;
  }

  .search {
    width: 100%;
  }

  .under,
  .builder,
  .run-grid,
  .two {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .builder-side {
    position: static;
  }

  .grid-3,
  .grid-4,
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .side {
    padding-top: 0;
  }

  .screen-state {
    margin-left: 0;
  }

  .stats.three b {
    font-size: 28px;
    line-height: 34px;
  }
}

@media (max-width: 560px) {
  .grid-3,
  .grid-4,
  .stats.three {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats.three {
    gap: 16px;
  }

  .signin .box {
    padding: 24px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}