/* The beta pages. Built on turingos.css — its variables, its type — and adds
   only what those pages have that no other does: a long form, a numbered
   test, a table of places. */

.tb-wrap { max-width: 780px; }

.tb-h3 {
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 2.8rem 0 0.8rem;
  color: var(--tos-text);
}

.tb-offer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.tb-offer li {
  border: 1px solid var(--tos-line);
  border-radius: var(--tos-radius);
  padding: 1rem 1.1rem;
  color: var(--tos-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.tb-offer strong { display: block; color: var(--tos-text); font-size: 1.05rem; margin-bottom: 0.2rem; }

/* The test, in order. */
.tb-steps { list-style: none; margin: 1.2rem 0 0; padding: 0; counter-reset: tb; }
.tb-steps > li {
  counter-increment: tb;
  position: relative;
  padding: 0 0 1.3rem 3rem;
  color: var(--tos-muted);
  line-height: 1.65;
}
.tb-steps > li::before {
  content: counter(tb);
  position: absolute;
  left: 0;
  top: 0.05rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--tos-line-strong);
  background: rgba(31, 107, 255, 0.12);
  color: var(--tos-text);
  font-size: 0.9rem;
  font-weight: 600;
}
.tb-steps h4 { margin: 0 0 0.15rem; font-size: 1.05rem; font-weight: 650; color: var(--tos-text); }
.tb-steps p { margin: 0; }

/* Places, by make. */
.tb-places { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.95rem; }
.tb-places th, .tb-places td {
  text-align: left;
  padding: 0.5rem 0.8rem 0.5rem 0;
  border-bottom: 1px solid var(--tos-line);
  color: var(--tos-muted);
}
.tb-places th { color: var(--tos-text); font-weight: 600; }
.tb-places td:last-child, .tb-places th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.tb-bar { height: 6px; border-radius: 999px; background: var(--tos-line); overflow: hidden; min-width: 80px; }
.tb-bar span { display: block; height: 100%; background: var(--tos-blue); }

/* What is and is not sent. */
.tb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.tb-two > div { border: 1px solid var(--tos-line); border-radius: var(--tos-radius); padding: 1.1rem 1.2rem; }
.tb-two h4 { margin: 0 0 0.6rem; font-size: 1rem; font-weight: 650; color: var(--tos-text); }
.tb-two ul { margin: 0; padding-left: 1.1rem; color: var(--tos-muted); font-size: 0.93rem; line-height: 1.6; }
.tb-two li + li { margin-top: 0.35rem; }

/* The warning about the disk: the one part of the page nobody should skim. */
.tb-warn {
  border: 1.5px solid var(--tos-warm);
  border-radius: var(--tos-radius);
  padding: 1.2rem 1.3rem;
  margin-top: 1rem;
  color: var(--tos-text);
  line-height: 1.65;
}
.tb-warn ul { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.tb-warn li + li { margin-top: 0.45rem; }

/* The form. */
.tb-form { margin-top: 1.4rem; display: grid; gap: 1.1rem; }
.tb-field label, .tb-field legend {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tos-text);
  margin-bottom: 0.35rem;
  padding: 0;
  float: none;
  width: auto;
}
.tb-field fieldset { border: 0; margin: 0; padding: 0; }
.tb-field input[type="text"],
.tb-field input[type="email"],
.tb-field select,
.tb-field textarea {
  width: 100%;
  padding: 0.75rem 0.95rem;
  border-radius: 12px;
  border: 1px solid var(--tos-line-strong);
  background: rgba(9, 12, 20, 0.03);
  color: var(--tos-text);
  font-family: var(--tos-font);
  font-size: 1rem;
  outline: none;
}
.tb-field input:focus, .tb-field select:focus, .tb-field textarea:focus { border-color: var(--tos-blue); }
.tb-hint { margin: 0.35rem 0 0; font-size: 0.86rem; color: var(--tos-dim); line-height: 1.5; }
.tb-error { margin: 0.35rem 0 0; font-size: 0.88rem; color: #b3261e; font-weight: 600; }
.tb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tb-check { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--tos-muted); line-height: 1.55; font-size: 0.95rem; }
.tb-check input { margin-top: 0.3rem; flex: none; }
.tb-choices { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; color: var(--tos-muted); font-size: 0.95rem; }
.tb-choices label { display: inline-flex; gap: 0.4rem; align-items: center; font-weight: 400; margin: 0; color: var(--tos-muted); }
/* Seen by scripts, not by people. */
.tb-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.tb-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.4rem, 4vw, 2rem);
  letter-spacing: 0.08em;
  font-weight: 650;
  color: var(--tos-text);
  margin: 0.6rem 0 1rem;
  word-break: break-all;
}

/* The staff list. */
.tb-staff { max-width: 1280px; }
.tb-people { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 1rem; }
.tb-people th, .tb-people td { text-align: left; vertical-align: top; padding: 0.55rem 0.8rem 0.55rem 0; border-bottom: 1px solid var(--tos-line); color: var(--tos-muted); }
.tb-people th { color: var(--tos-text); font-weight: 600; }
.tb-people strong { color: var(--tos-text); }
.tb-state { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; border: 1px solid var(--tos-line-strong); font-size: 0.8rem; }
.tb-state-joined { background: rgba(15, 158, 136, 0.14); }
.tb-state-invited { background: rgba(31, 107, 255, 0.12); }
.tb-bad { color: #b3261e; font-weight: 600; }
.tb-invite { display: flex; gap: 0.4rem; align-items: center; }
.tb-invite input { width: 3.2rem; padding: 0.25rem 0.4rem; border-radius: 8px; border: 1px solid var(--tos-line-strong); }
.tb-invite button { padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid var(--tos-line-strong); background: var(--tos-text); color: var(--tos-surface); font-size: 0.85rem; }

@media (max-width: 640px) {
  .tb-offer, .tb-two, .tb-row { grid-template-columns: 1fr; }
}