/* Student sign-in (/join/). Every value comes from ../tokens.css. Big, forgiving targets: students type a class code and an ID. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; font-family: var(--tlg-font); font-size: var(--tlg-text-md); line-height: var(--tlg-leading-body); color: var(--tlg-text); background: var(--tlg-bg); }
:focus-visible { outline: var(--tlg-focus-width) solid var(--tlg-focus); outline-offset: var(--tlg-focus-offset); }
[hidden] { display: none !important; }
h1, h2 { line-height: var(--tlg-leading-heading); }
h1 { font-size: var(--tlg-text-2xl); }
h2 { font-size: var(--tlg-text-lg); }
p { color: var(--tlg-text-muted); }
.mt-3 { margin-top: var(--tlg-space-3); }

/* One card, centred in the space between the header and the fold (the footer sits below). */
.join-main { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - var(--tlg-header-h)); padding: var(--tlg-space-3) var(--tlg-space-4); }
.join-main > * { width: 100%; max-width: 440px; }
.join-main > #s-pick, .join-main > #join-below { max-width: 560px; }
.card { padding: var(--tlg-space-5) var(--tlg-space-6) var(--tlg-space-6); border: var(--tlg-border-width) solid var(--tlg-border); border-radius: calc(var(--tlg-radius-lg) + var(--tlg-space-1)); background: var(--tlg-surface); box-shadow: var(--tlg-shadow-2); }
.stack > * + * { margin-top: var(--tlg-space-4); }

/* Screen changes: a short fade + rise, none for reduced motion. */
@keyframes join-in { from { opacity: 0; transform: translateY(var(--tlg-space-2)); } to { opacity: 1; transform: none; } }
.join-main > section:not(#s-busy) { animation: join-in 180ms ease-out; }
@media (prefers-reduced-motion: reduce) { .join-main > section { animation: none; } }

/* Code screen: compact enough that card + error + links fit a Chromebook window. */
#s-code.stack > * + *, #code-form.stack > * + * { margin-top: var(--tlg-space-3); }
.join-head { display: flex; flex-direction: column; align-items: center; gap: var(--tlg-space-1); text-align: center; }
.join-mark { display: block; width: var(--tlg-space-10); height: var(--tlg-space-10); }
.join-mark svg { display: block; width: 100%; height: 100%; }
.lead { color: var(--tlg-text-muted); }
.acct-pill { display: inline-block; max-width: 100%; padding: var(--tlg-space-1) var(--tlg-space-3); border-radius: var(--tlg-radius-full); color: var(--tlg-text); background: var(--tlg-primary-tint); font-size: var(--tlg-text-sm); font-weight: var(--tlg-weight-bold); overflow-wrap: anywhere; }

label { display: block; margin-bottom: var(--tlg-space-1); font-weight: var(--tlg-weight-bold); }
input[type="text"], select { width: 100%; min-height: 52px; padding: var(--tlg-space-3) var(--tlg-space-4); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; }
input[type="text"]:focus, select:focus { border-color: var(--tlg-focus); outline: var(--tlg-border-width) solid var(--tlg-focus); }
input[type="text"]::placeholder { color: var(--tlg-text-muted); opacity: .55; }
input[aria-invalid="true"], input[aria-invalid="true"]:focus { border-color: var(--tlg-status-missing-solid); outline: var(--tlg-border-width) solid var(--tlg-status-missing-solid); }
#sid { font-size: var(--tlg-text-xl); font-weight: var(--tlg-weight-bold); letter-spacing: var(--tlg-tracking-caps); text-align: center; font-variant-numeric: tabular-nums; }
#sid::placeholder { font-size: var(--tlg-text-lg); font-weight: var(--tlg-weight-regular); letter-spacing: normal; }
#code { padding-block: var(--tlg-space-2); padding-left: var(--tlg-space-4); font-size: var(--tlg-text-2xl); font-weight: var(--tlg-weight-bold); letter-spacing: var(--tlg-tracking-code); text-align: center; text-transform: uppercase; font-variant-numeric: tabular-nums slashed-zero; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--tlg-space-6); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; font-weight: var(--tlg-weight-bold); text-decoration: none; cursor: pointer; transition: background var(--tlg-ease), border-color var(--tlg-ease); }
.btn:hover:not(:disabled) { background: var(--tlg-surface-2); }
.btn:disabled { opacity: .7; cursor: progress; }
.btn-primary { border-color: var(--tlg-primary); color: var(--tlg-on-solid); background: var(--tlg-primary); }
.btn-primary:hover:not(:disabled) { border-color: var(--tlg-primary-hover); background: var(--tlg-primary-hover); }
.btn-wide { width: 100%; min-height: 52px; font-size: var(--tlg-text-lg); }
.link-btn { padding: 0; border: 0; background: none; color: var(--tlg-link); font: inherit; font-weight: var(--tlg-weight-bold); text-decoration: underline; cursor: pointer; }

/* Errors: an icon and a red edge, never colour alone. */
.notice { display: flex; align-items: flex-start; gap: var(--tlg-space-2); padding: var(--tlg-space-2) var(--tlg-space-3); border: var(--tlg-border-width-strong) solid var(--tlg-status-missing-solid); border-radius: var(--tlg-radius-sm); color: var(--tlg-danger-fg); background: var(--tlg-danger-bg); font-size: var(--tlg-text-md); font-weight: var(--tlg-weight-bold); line-height: var(--tlg-leading-heading); }
.notice::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 5h2.4v7h-2.4V7Zm0 9h2.4v2.4h-2.4V16Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.2 5h2.4v7h-2.4V7Zm0 9h2.4v2.4h-2.4V16Z'/%3E%3C/svg%3E") center / contain no-repeat; }

.legal { color: var(--tlg-text-muted); font-size: var(--tlg-text-sm); line-height: var(--tlg-leading-body); text-align: center; }
.legal a { color: var(--tlg-link); }

/* Under the card: quiet ways out */
.join-below { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tlg-space-1) var(--tlg-space-6); margin-top: var(--tlg-space-3); text-align: center; }
.join-below p { font-size: var(--tlg-text-sm); }
.join-below a { color: var(--tlg-link); font-weight: var(--tlg-weight-bold); }

/* Name picker */
.pick-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-2) var(--tlg-space-3); }
.btn-back { min-height: var(--tlg-tap); padding: 0 var(--tlg-space-4); }
.class-banner { flex: 1 1 12rem; min-width: 0; padding: var(--tlg-space-2) var(--tlg-space-4); border-radius: var(--tlg-radius-full); color: var(--tlg-text); background: var(--tlg-primary-tint); overflow-wrap: anywhere; }
#pick-sub::before { content: " · "; }
.subtitle { margin-top: var(--tlg-space-1); }
.hint { font-size: var(--tlg-text-sm); }

.names { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--tlg-space-2); }
.name-btn { min-height: 52px; padding: var(--tlg-space-2) var(--tlg-space-4); border: var(--tlg-border-width-strong) solid var(--tlg-border-strong); border-radius: var(--tlg-radius-sm); color: var(--tlg-text); background: var(--tlg-surface); font: inherit; font-size: var(--tlg-text-lg); font-weight: var(--tlg-weight-bold); text-align: left; overflow-wrap: anywhere; cursor: pointer; transition: background var(--tlg-ease), border-color var(--tlg-ease); }
.name-btn:hover { border-color: var(--tlg-primary); background: var(--tlg-primary-tint); }
.confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tlg-space-3) var(--tlg-space-4); grid-column: 1 / -1; padding: var(--tlg-space-4); border: var(--tlg-border-width-strong) solid var(--tlg-status-done-solid); border-radius: var(--tlg-radius-lg); background: var(--tlg-surface); }
.confirm .who { flex: 1 1 14rem; font-size: var(--tlg-text-xl); font-weight: var(--tlg-weight-bold); overflow-wrap: anywhere; }
.confirm .btn-yes { border-color: var(--tlg-status-done-solid); color: var(--tlg-on-solid); background: var(--tlg-status-done-solid); }

.own { padding: var(--tlg-space-4); border-radius: var(--tlg-radius-lg); background: var(--tlg-surface-2); }
.own-form { display: grid; gap: var(--tlg-space-3); margin-top: var(--tlg-space-3); }
.own-form label { margin-bottom: 0; }
.own-age { display: flex; flex-wrap: wrap; gap: var(--tlg-space-2); border: 0; }
.own-age legend { margin-bottom: var(--tlg-space-1); font-weight: var(--tlg-weight-bold); }
.own-age select { flex: 1 1 140px; width: auto; }
.own-age .hint { flex-basis: 100%; }

/* Done / waiting / already */
.success { text-align: center; }
.success p { margin-inline: auto; }
.success p:empty { display: none; }
.status-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--tlg-space-16); height: var(--tlg-space-16); border-radius: var(--tlg-radius-full); color: var(--tlg-status-done-fg); background: var(--tlg-status-done-bg); }
.status-icon.is-waiting { color: var(--tlg-status-progress-fg); background: var(--tlg-status-progress-bg); }
.status-icon svg { width: var(--tlg-space-8); height: var(--tlg-space-8); }
.success .who { font-size: var(--tlg-text-2xl); font-weight: var(--tlg-weight-bold); overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tlg-space-3); margin-top: var(--tlg-space-5); }

@media (max-width: 640px) {
  .join-main { justify-content: flex-start; padding: var(--tlg-space-5) var(--tlg-space-4) var(--tlg-space-10); }
  .card { padding: var(--tlg-space-5); }
}