/* ─────────────────────────────────────────────────────────────────────────────
   SIGN-IN CARD — shared by meetings.html and kiosk.html

   Lifted out of meetings.html when the kiosk page appeared, so the two pages
   cannot drift apart. Nothing here is page-specific: the card is a fixed width
   and centres itself, so a page decides where it sits, not how it looks.

   Pairs with assets/signin.js. Depends on the design tokens in styles.css
   (--navy, --gold, --text-muted, --border, --surface), so it loads after it.
   ───────────────────────────────────────────────────────────────────────────── */

.signin-card {
  max-width: 460px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.signin-meeting {
  padding: 1.1rem 1.4rem;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  color: #fff;
}
.signin-meeting-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
}
.signin-meeting-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  margin-top: .2rem;
}
.signin-meeting-when { font-size: .85rem; opacity: .9; margin-top: .15rem; }
.signin-body { padding: 1.3rem 1.4rem 1.5rem; }
.signin-field { margin-bottom: .9rem; }
.signin-field label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--navy);
  margin-bottom: .35rem;
}
.signin-field input {
  width: 100%;
  padding: .7rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  transition: border-color .2s, box-shadow .2s;
}
#si-number { letter-spacing: .28em; font-weight: 600; text-align: center; }
.signin-field input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(29,82,188,.15);
}
.signin-field select {
  width: 100%;
  padding: .7rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  transition: border-color .2s, box-shadow .2s;
}
.signin-field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(29,82,188,.15);
}
/* Yes / No returning-member pair — big tap targets, no tiny radio dots. */
.signin-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.signin-choice label {
  display: flex; align-items: center; justify-content: center;
  padding: .65rem .5rem;
  margin: 0;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.signin-choice input { position: absolute; opacity: 0; pointer-events: none; }
.signin-choice input:checked + span { color: #fff; }
.signin-choice label:has(input:checked) {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.signin-choice label:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(29,82,188,.25);
}
/* Optional anonymous survey, shown above the Sign In button. */
.signin-survey {
  border-top: 1px solid var(--border);
  margin: 1.1rem 0 .2rem;
  padding-top: 1rem;
}
.signin-survey-head {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: .3rem;
}
.signin-survey-note {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 .9rem;
}
.signin-field .req { color: var(--gold); }
/* .signin-field only styles `input`, so textareas need their own rule. */
.signin-field textarea {
  width: 100%;
  padding: .7rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  resize: vertical;
  min-height: 4.4rem;
  transition: border-color .2s, box-shadow .2s;
}
.signin-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(29,82,188,.15);
}
.signin-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 420px) { .signin-field-row { grid-template-columns: 1fr; } }
.signin-loc-note {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: .8rem;
}
.signin-loc-note svg { flex-shrink: 0; margin-top: .12rem; }
/* The group a member was drawn into — the main thing they came to find out. */
.signin-group {
  margin-top: 1.1rem;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  color: #fff;
}
.signin-group-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .78;
}
.signin-group-name {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: .15rem;
  line-height: 1.2;
}
.signin-success .campus-tag {
  display: inline-block;
  margin: .7rem .25rem 0;
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  background: rgba(31,111,51,.1);
  border: 1px solid rgba(31,111,51,.3);
  color: #1f6f33;
}
.signin-success .campus-tag.off {
  background: #fff8e6;
  border-color: #f4d79a;
  color: #8a5e00;
}
.signin-names-note {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 .7rem;
}
#si-submit { width: 100%; }
#si-submit:disabled { opacity: .6; cursor: not-allowed; }
.signin-msg {
  display: none;
  border-radius: 10px;
  padding: .6rem .85rem;
  font-size: .86rem;
  line-height: 1.45;
  margin-bottom: .9rem;
}
.signin-msg.show { display: block; }
.signin-msg.error   { background: #fff0f0; border: 1px solid #ffcdd2; color: #c62828; }
.signin-msg.info    { background: #eef3fc; border: 1px solid #c6d6f3; color: var(--navy); }
.signin-msg.warn    { background: #fff8e6; border: 1px solid #f4d79a; color: #8a5e00; }
.signin-success {
  text-align: center;
  padding: 2rem 1.4rem 2.2rem;
}
.signin-success .check {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(31,111,51,.12);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: .9rem;
}
.signin-success h3 {
  font-family: var(--font-head);
  color: var(--navy);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: .35rem;
}
.signin-success p { color: var(--text-muted); font-size: .92rem; line-height: 1.5; }
.signin-success .btn { margin-top: 1.2rem; }
.signin-closed {
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
  padding: 1.75rem 1.5rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.55;
}
.signin-closed strong { color: var(--navy); display: block; margin-bottom: .3rem; font-size: 1rem; }

/* ── Kiosk mode ──────────────────────────────────────────────────────────────
   One shared screen with a queue in front of it. Every difference from a
   member's own phone follows from that: the targets are bigger because people
   are standing and tapping in a hurry, and the success card carries the button
   that hands the screen to the next person. */
.signin-kiosk .signin-card { max-width: 30rem; }
.signin-kiosk .signin-field input,
.signin-kiosk .signin-field select { font-size: 1.05rem; padding: .85rem .9rem; }
.signin-kiosk #si-number { font-size: 1.6rem; padding: .9rem; }
.signin-kiosk .signin-choice label { padding: .85rem .6rem; }
.signin-kiosk #si-submit { padding: .95rem; font-size: 1.05rem; }
.signin-kiosk .signin-success { padding: 2.4rem 1.4rem 2rem; }
.signin-kiosk .signin-success h3 { font-size: 1.5rem; }
.signin-kiosk .signin-success .btn { min-width: 12rem; }
.signin-next-note { margin-top: .7rem; font-size: .78rem; color: var(--text-muted); }