/* =========================================================
   Morning Bell — signup/signup.css
   Page-specific layout only. All tokens come from ../styles.css.
   No new colors, no new fonts — reuses the paper/navy palette
   and the form-pill / liquid-btn / eyebrow primitives.
   ========================================================= */

/* ---------- Sticky footer (hotfix 2026-07-16) ----------
   The signup steps are often shorter than the viewport; without this the
   footer floated mid-screen. Standard pattern: body is a full-height flex
   column, main absorbs the slack, so the footer sits at the viewport bottom
   on short content and pushes down naturally on tall content. Scoped to this
   page because this stylesheet only loads on /signup. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

/* ---------- Page column ---------- */
.signup-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 40px 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---------- Step card ---------- */
.signup-card {
  background: #FBF6E9;
  border: 1px solid rgba(14,26,48,0.14);
  border-radius: 16px;
  padding: 36px 38px;
  animation: settle 0.9s cubic-bezier(.16,.8,.28,1) both;
}

.signup-h1 {
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 1.14;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.signup-sub {
  margin: 0 0 26px;
  font-size: 16.5px;
  line-height: 1.55;
  color: rgba(14,26,48,0.85);
}

.signup-sub a { text-decoration: underline; }

/* ---------- Form fields ---------- */
.field-group {
  margin-bottom: 20px;
}

.field-label {
  display: block;
  font-family: Spectral, serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: rgba(14,26,48,0.6);
  margin-bottom: 8px;
}

.field-pill {
  width: 100%;
  margin-top: 0;
}

.field-pill .form-input {
  width: 100%;
}

.field-pill--with-toggle {
  padding-right: 8px;
}

.field-toggle {
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font: 500 13px Spectral, serif;
  letter-spacing: 0.04em;
  color: rgba(14,26,48,0.6);
  padding: 8px 10px;
}

.field-toggle:hover { color: rgba(14,26,48,0.9); }

.field-helper {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  font-style: italic;
  color: rgba(14,26,48,0.6);
}

.field-error {
  margin: 8px 0 0;
  min-height: 0;
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 500;
  color: rgba(14,26,48,0.85);
}

.field-error:empty { margin: 0; }

/* ---------- Step 1: school type-ahead combobox ---------- */
.school-combobox {
  position: relative;
}

.school-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  background: #FBF6E9;
  border: 1px solid rgba(14,26,48,0.16);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(8,15,31,0.14);
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  box-sizing: border-box;
}

.school-listbox {
  list-style: none;
  margin: 0;
  padding: 0;
}

.school-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.school-row:hover,
.school-row.is-active {
  background: #F1E9D3;
}

.school-row-name {
  font: 400 15.5px Newsreader, serif;
  color: #0E1A30;
}

.school-row-domain {
  font-size: 12px;
  color: rgba(14,26,48,0.55);
  flex-shrink: 0;
  white-space: nowrap;
}

.school-dropdown-note {
  margin: 0;
  padding: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(14,26,48,0.75);
}

.school-dropdown-note a { text-decoration: underline; }

.school-pick-confirm {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: rgba(14,26,48,0.75);
}

/* ---------- Step 2: OTP boxes (six digits, one box each) ----------
   The code-entry cluster (label, boxes, error, Verify) is centered in the
   card — Luke-approved 2026-07-16. Box styling is the form-pill idiom
   adapted to a square-ish cell: same paper fill, ink border, inset shadow. */
.otp-group .field-label,
.otp-group .field-error {
  text-align: center;
}

.otp-boxes {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.otp-box {
  width: 52px;
  height: 62px;
  text-align: center;
  background: #FBF6E9;
  border: 1px solid rgba(14,26,48,0.18);
  border-radius: 12px;
  font: 400 26px Newsreader, serif;
  font-variant-numeric: tabular-nums;
  color: #0E1A30;
  outline: none;
  box-shadow: inset 0 2px 6px rgba(14,26,48,0.06), 0 10px 26px rgba(8,15,31,0.1);
}

.otp-box:focus {
  border-color: rgba(14,26,48,0.55);
}

.otp-verify-row {
  text-align: center;
}

.step2-links {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 14px;
}

.step2-links a.is-disabled {
  pointer-events: none;
  opacity: 0.5;
  text-decoration: none;
}

/* ---------- Inline notice / error panel ---------- */
.panel-note {
  margin: 8px 0 20px;
  padding: 14px 16px;
  background: #F1E9D3;
  border: 1px solid rgba(14,26,48,0.16);
  border-left: 3px solid #0E1A30;
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(14,26,48,0.9);
}

.panel-note a { text-decoration: underline; }

.panel-note-card {
  animation: settle 0.9s cubic-bezier(.16,.8,.28,1) both;
}

.panel-note-card .panel-note {
  margin: 0;
}

/* ---------- Step 3: connect layout (wide centered button on top,
   numbered steps below, left-aligned — Luke's 2.2 review) ---------- */
.connect-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 26px;
}

.connect-open-wrap {
  display: flex;
  justify-content: center;
}

.connect-grid .liquid-btn {
  width: min(100%, 460px);
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.connect-steps {
  margin: 0;
  padding-left: 20px;
}

.connect-steps li {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(14,26,48,0.85);
  margin-bottom: 6px;
}

/* ---------- Step 4: send-time picker (hour + AM/PM) ----------
   Two form-pills holding native selects; the .form-input reset gives them
   the paper/ink text treatment, so only width/cursor need adjusting. */
.send-time-row {
  display: flex;
  gap: 12px;
}

.send-time-pill {
  width: auto;
  padding-right: 12px;
}

.send-time-select {
  width: auto;
  cursor: pointer;
}

/* ---------- Connect success / done state ---------- */
.connect-success {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  animation: settle 1s cubic-bezier(.16,.8,.28,1) both;
}

.signup-done {
  margin-top: 4px;
}

.signup-done .signup-sub {
  margin-top: 10px;
  margin-bottom: 0;
}

/* ---------- Plain ink footer (mirrors privacy/privacy.css) ---------- */
.footer-plain {
  background: #0E1A30;
  color: #F4EFE2;
  padding: 32px 0 44px;
}

.footer-plain .footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px;
}

.footer-plain .footer-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-plain .footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-plain .footer-name {
  font-weight: 600;
  font-size: 19px;
  line-height: 1;
}

.footer-plain .footer-note {
  font-size: 13.5px;
  line-height: 1;
  font-style: italic;
  color: rgba(244,239,226,0.7);
}

.footer-plain .footer-divider {
  height: 1px;
  background: rgba(244,239,226,0.16);
  margin: 22px 0 18px;
}

.footer-plain .footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(244,239,226,0.6);
}

.footer-plain .footer-bottom a {
  color: rgba(244,239,226,0.6);
  text-decoration: underline;
}

.footer-plain .footer-bottom a:hover {
  color: rgba(244,239,226,0.9);
}

/* ---------- Responsive ---------- */
@media (max-width: 999px) {
  .masthead-note { display: none; }
  .signup-wrap { padding: 32px 24px 72px; }
  .signup-card { padding: 28px 24px; }
  .signup-h1 { font-size: 27px; }
  .footer-plain .footer-inner { padding: 0 24px; }
  .footer-plain .footer-bottom { flex-direction: column; gap: 12px; }
}

@media (max-width: 600px) {
  .signup-wrap { padding: 24px 16px 60px; }
  .signup-card { padding: 22px 18px; }
  .signup-h1 { font-size: 24px; }
  .liquid-btn { padding: 12px 20px; font-size: 15px; }
  .form-pill { padding: 6px 6px 6px 16px; }
  .school-dropdown { max-height: 220px; }
  .school-row { flex-wrap: wrap; gap: 2px 12px; }
  .otp-boxes { gap: 8px; }
  .otp-box { width: 44px; height: 54px; font-size: 22px; }
}