/* Join page. Reuses dashboard.css tokens so the three web surfaces match; only the layout and
   the form controls are added here. */
.join { max-width: 620px; margin: 0 auto; padding: clamp(1.5rem, 1rem + 2vw, 3rem); display: grid; gap: 16px; }
.join header h1 { font-size: 26px; letter-spacing: -0.02em; }
.join .lede { color: var(--text-faint); font-size: 14px; margin-top: 6px; max-width: 56ch; }

.card.plain ul, .card ol { margin: 8px 0 0 18px; padding: 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.6; }
.card.plain li, .card ol li { margin-bottom: 6px; }

.join h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-faint); margin-bottom: 6px; }
.join form { display: grid; gap: 6px; margin-top: 12px; }
.join label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); margin-top: 6px; }
.join input {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--edge-strong); border-radius: 9px; font: 14px var(--mono);
}
.join input:focus-visible { outline: 2px solid var(--open); outline-offset: 1px; border-color: transparent; }
.join input[readonly] { color: var(--open); }
/* The code field is the one thing people mistype, so give it room and spacing. */
#code { font-size: 20px; letter-spacing: 0.3em; text-align: center; }

.join button.primary {
  margin-top: 14px; padding: 11px 16px; border: none; border-radius: 9px;
  background: var(--open); color: var(--bg);
  font: 600 13px/1 var(--sans); letter-spacing: 0.02em; cursor: pointer;
}
.join button.primary:hover { filter: brightness(1.08); }
.join button.primary:disabled { opacity: 0.55; cursor: progress; }

.status { margin-top: 10px; font-size: 13px; min-height: 1.2em; color: var(--text-faint); }
.status.good { color: var(--open); }
.status.bad { color: oklch(66% 0.2 25); }
.card.done { border-color: color-mix(in oklch, var(--open) 40%, transparent); }

/* Plan chooser. Buttons rather than radios: the whole tile is the target, which matters most on a
   phone where a radio dot is a poor tap area. */
.plan-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 12px; }
.plan {
  display: grid; gap: 3px; padding: 14px; text-align: left; cursor: pointer;
  background: var(--bg); border: 1px solid var(--edge-strong); border-radius: 10px; color: var(--text);
  font: inherit; transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.plan:hover { border-color: var(--open); }
.plan.selected { border-color: var(--open); background: var(--open-bg); }
.plan-name { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); }
.plan-price { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-per { font-size: 12px; color: var(--text-faint); }
/* Square's iframe needs room reserved or the button jumps when it mounts. */
#card-container { min-height: 90px; margin: 14px 0; }