/* The sign-in and sign-up pages (sign-in/, sign-up/; assets/sign-in.js). The page is the home
   page's chapter picker (assets/home.css .pick*, assets/home-pick.js) with this card where its
   finder goes: the finder's look, holding Clerk's box (styled in assets/auth.js). */

.pick-card.has-side > .pick-finder { display: none; }
/* The map is only a picture here: no chapter cards or picking from its pins. */
.pick-card.has-side .pin { pointer-events: none; cursor: default; }

.si-card {
  position: relative;
  z-index: 3;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--cream);
  color: var(--navy);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--red);
  overflow: auto;
}
/* (before the map draws, or if it can't: the card alone) */
.pick-body > .si-card { max-width: 420px; }
/* (as tall as what's in it, not the map's full height) */
.pick-card.has-side > .si-card { align-self: start; max-height: 100%; }

.si-kicker { margin: 0; font-size: 10.5px; color: var(--red); }
.si-card h1 { margin: 0; font-size: 31px; line-height: 1.08; }
.si-card p { margin: 0; }
.si-lede { font-size: 14.5px; line-height: 1.5; color: var(--home-meta); }
.si-who { font-size: 14.5px; color: var(--home-meta); overflow-wrap: anywhere; }
#si-clerk { margin-top: 6px; min-height: 260px; }
.si-loading { color: var(--home-meta); font-style: italic; }
.si-error { color: var(--red); font-weight: 700; }
.si-more {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--home-rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--home-meta);
}
.si-card a:not(.si-btn) { color: var(--red); font-weight: 700; }
.si-acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 6px; }
.si-btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  box-sizing: border-box;
  padding: 0 20px;
  border-radius: var(--radius-btn, 10px);
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-serif);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--red);
}
.si-btn:hover { color: var(--cream); text-decoration: none; box-shadow: 4px 4px 0 var(--red); }
.si-quiet {
  min-height: 46px;
  padding: 0 16px;
  border: 1.5px solid var(--navy);
  border-radius: var(--radius-btn, 10px);
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.si-quiet:hover { background: var(--navy); color: var(--cream); }

/* Clerk's box (assets/auth.js sets its colours and fonts; Clerk swaps #si-clerk's class for its own). Clerk draws borders as box-shadows and
   its main button with a gradient, so these win with !important: buttons in the site's look (a navy
   outline, or navy with the red offset shadow), fields with a navy edge all round, plain rules. */
#si-clerk .cl-cardBox { overflow: visible !important; }   /* (it clipped the fields' right edge) */
#si-clerk .cl-card { margin: 0 !important; }
#si-clerk .cl-socialButtonsBlockButton {
  min-height: 46px;
  background: var(--cream) !important;
  color: var(--navy) !important;
  border: 1.5px solid var(--navy) !important;
  border-radius: var(--radius-btn, 10px) !important;
  box-shadow: none !important;
}
#si-clerk .cl-socialButtonsBlockButton:hover { background: var(--home-blue) !important; }
#si-clerk .cl-socialButtonsBlockButton:focus-visible,
#si-clerk .cl-formButtonPrimary:focus-visible { outline: 3px solid var(--red) !important; outline-offset: 2px; }
#si-clerk .cl-socialButtonsBlockButtonText { font-weight: 600; font-size: 15px; }
#si-clerk .cl-dividerLine { background: var(--home-rule) !important; height: 1px; }
#si-clerk .cl-dividerText { color: var(--home-meta) !important; font-size: 13px; padding: 0 10px; }
#si-clerk .cl-formFieldLabel { font-weight: 600 !important; font-size: 14px; color: var(--navy) !important; margin: 0; }
#si-clerk .cl-formFieldInput {
  min-height: 46px;
  box-sizing: border-box;
  padding: 0 12px !important;
  background: #fff !important;
  color: var(--navy) !important;
  border: 1.5px solid var(--navy) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 16px !important;   /* (16px: no zoom on iPhones) */
}
#si-clerk .cl-formFieldInput:focus { outline: none; border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(159, 60, 57, 0.22) !important; }
#si-clerk .cl-formFieldInput[aria-invalid="true"] { border-color: var(--red) !important; }
#si-clerk .cl-formButtonPrimary {
  min-height: 46px;
  width: calc(100% - 4px) !important;   /* (room for its shadow) */
  background: var(--navy) !important;
  background-image: none !important;
  color: var(--cream) !important;
  border: 0 !important;
  border-radius: var(--radius-btn, 10px) !important;
  box-shadow: 3px 3px 0 var(--red) !important;
  font-family: var(--font-serif) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-transform: none !important;
}
#si-clerk .cl-formButtonPrimary::before,
#si-clerk .cl-formButtonPrimary::after { display: none !important; }
#si-clerk .cl-formButtonPrimary:hover { box-shadow: 4px 4px 0 var(--red) !important; }
#si-clerk .cl-formButtonPrimary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--red) !important; }
#si-clerk .cl-buttonArrowIcon { display: none; }
#si-clerk .cl-footer { background: transparent !important; }

@media (max-width: 1180px) and (min-width: 901px) {
  .si-card h1 { font-size: 27px; }
}
@media (max-width: 900px) {
  .si-card { padding: 18px 16px; overflow: visible; }
  .pick-card.has-side .pick-maps { gap: 10px; }   /* (both small maps show here) */
  .si-card h1 { font-size: 26px; }
}