/* The choice page.
 *
 * Tokens, reset, top bar and controls come from base.css, linked first. Only
 * the choice itself is here.
 *
 * A candidate holding a real interview link never sees this: /join/<token> goes
 * straight to the meeting with everything filled in. This page exists for the
 * two people who have nothing but the bare address — a recruiter setting one
 * up, and a candidate holding a raw meeting link rather than one of ours.
 *
 * So it is a fork, not a landing page. No pitch, no features, nothing to read.
 * Two doors and a sentence saying which is which.
 */

body { display: flex; flex-direction: column; }

main {
  flex: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 40px 24px 64px;
  text-align: center;
}

h1 { font-size: 21px; }
main > .sub { margin-bottom: 26px; }

/* ── The two doors ─────────────────────────────────────────────────────────
   Equal weight on purpose. Neither is the primary action — which one is right
   depends entirely on who is reading, and nudging toward either would send
   somebody through the wrong door. Hence no accent fill on either card; the
   accent appears only on hover, once a choice is being made. */
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 660px;
}
@media (max-width: 620px) { .choices { grid-template-columns: 1fr; } }

a.card {
  display: grid;
  justify-items: start;
  /* Cards stretch to match the taller one, and without this the spare height
     is shared out between the rows — so the card with the shorter description
     sits its title a few pixels lower than its neighbour. Two headings that
     nearly line up look like a mistake, which is what it was. */
  align-content: start;
  gap: 7px;
  padding: 22px 22px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  text-align: left;
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
a.card:hover, a.card:focus-visible {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-1px);
}
a.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* A drawn glyph rather than an emoji: emoji render differently on every
   platform and at this size the difference is the whole impression. */
.glyph {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--accent);
  margin-bottom: 4px;
}
.glyph svg { width: 17px; height: 17px; display: block; }

a.card .title { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
a.card .desc { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* ── Footnote ──────────────────────────────────────────────────────────────
   The commonest wrong turn: a candidate who has a /join link but pasted the
   bare address instead. Worth one line. */
.foot {
  margin-top: 30px;
  font-size: 12.5px;
  color: var(--ink-faint);
  max-width: 46ch;
}
.foot code {
  font-family: var(--mono);
  font-size: .92em;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 1px 5px;
}