body > .container {
 // margin-bottom: 80px;
}

.footer {
  background-color: #f5f5f5;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

/* includes/footer.php emits this immediately before the fixed .footer.
   The footer is taken out of the document flow, so without a spacer the
   bottom of the page scrolls under it and can never be read. */
.footer-spacer {
  height: 90px;
}

.bg-wix {
  background-color: #0C3C60;
}

/* Slim build/version badge (includes/versionbar.php) - pinned corner, not
   full-width, so it never covers form fields or page content. Same blue as
   the header (.bg-wix) so it reads as "site chrome," not an alert. */
/* Lifted clear of the wizard's fixed progress bar (see includes/footer.php).
   The bar is 20px tall inside a py-3 footer, so ~56px keeps a comfortable gap. */
.build-badge-raised {
  bottom: 56px !important;
}

.build-badge {
  position: fixed;
  bottom: 8px;
  right: 8px;
  z-index: 1050;
  font-family: SFMono-Regular, Consolas, monospace;
  font-size: 0.7rem;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 12px;
  color: #fff;
  background-color: #0C3C60;
  opacity: 0.88;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
/* ############################################################################
   New-member application wizard (includes/appheader.php)
   ############################################################################ */

.apic-app {
  background-color: #f7f8fa;
}

/* --- Step rail ----------------------------------------------------------- */

.apic-steprail {
  background-color: #fff;
  padding: .85rem 0;
}

.apic-steps {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.apic-step {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: #8a9099;
}

.apic-step-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: .78rem;
  font-weight: 600;
  flex: 0 0 auto;
}

.apic-step-done {
  color: #0C3C60;
}

.apic-step-done .apic-step-dot {
  background-color: #0C3C60;
  border-color: #0C3C60;
  color: #fff;
}

.apic-step-current {
  color: #0C3C60;
  font-weight: 600;
}

.apic-step-current .apic-step-dot {
  border-width: 2px;
}

/* Under ~600px the five labels wrap into an unreadable stack, so drop to
   numbered dots only and let the page title carry the "where am I". */
@media (max-width: 600px) {
  .apic-step-label { display: none; }
  .apic-steps { gap: .75rem; }
}

/* --- Page furniture ------------------------------------------------------ */

.apic-pagetitle {
  font-size: 1.6rem;
  font-weight: 600;
  color: #0C3C60;
  margin: 1.75rem 0 .25rem;
}

.apic-lede {
  color: #5c636a;
  margin-bottom: 1.75rem;
  max-width: 60ch;
}

/* Opt out of the measure limit where the copy is doing a job other than being
   skimmed - apply.php's instructions are a block of conditions the applicant
   has to actually read before starting, and reading as a narrow column beside
   empty space made them look like a caption. */
.apic-lede-full {
  max-width: none;
}

/* Each logical group of questions sits in its own card so a long page reads
   as a few sections rather than one undifferentiated column of inputs. */
.apic-card {
  background-color: #fff;
  border: 1px solid #e3e6ea;
  border-radius: .5rem;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.apic-card > h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0C3C60;
  margin-bottom: .25rem;
}

.apic-card > .apic-card-hint {
  font-size: .875rem;
  color: #6c757d;
  margin-bottom: 1.25rem;
}

.apic-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* --- Checkbox grids ------------------------------------------------------ */

/* Shared by the SME groups and the designation partial: a checkbox that is a
   click target in its own right rather than a 13px box adrift in whitespace. */
.apic-checkgrid .form-check {
  padding: .4rem .6rem .4rem 2.1rem;
  border: 1px solid transparent;
  border-radius: .375rem;
  margin-bottom: .1rem;
}

.apic-checkgrid .form-check:hover {
  background-color: #f1f4f8;
}

.apic-checkgrid .form-check-input {
  margin-left: -1.5rem;
}

.apic-checkgrid .form-check-input:checked ~ .form-check-label {
  font-weight: 600;
  color: #0C3C60;
}

.apic-checkgrid .form-check-label {
  cursor: pointer;
}

/* Conditional ID field revealed by a designation checkbox. */
.apic-reveal {
  border-left: 3px solid #0C3C60;
  background-color: #f1f4f8;
  border-radius: 0 .375rem .375rem 0;
  padding: .85rem 1rem;
  margin: .35rem 0 .75rem 1.6rem;
}

.apic-invalid {
  color: #b02a37;
  font-size: .875rem;
  margin-top: .35rem;
}

/* Confirmation checkmark on newmember/thanks.php. */
.apic-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background-color: #d1e7dd;
  color: #0f5132;
  font-size: 1.75rem;
}

/* ############################################################################
   Cache-reset control (includes/cachebullet.php)
   A clickable bullet living inside the build badge, after the timestamp.
   Board/staff only - never rendered for anyone else.
   ############################################################################ */

/* .build-badge is pointer-events:none so it can never swallow a click meant
   for the page underneath it. The bullet has to opt back in for itself. */
.build-badge .cache-dot {
  pointer-events: auto;
  /* A bare bullet is a ~5px click target. The padding/negative-margin pair
     enlarges the hit area without moving the glyph or changing how the badge
     reads. No negative margin on the LEFT: a single space is all that
     separates it from the timestamp now, and pulling left would close that
     gap up. */
  padding: 2px 5px;
  margin: -2px -5px -2px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  /* Deliberately not a pointer, and no hover feedback: the bullet should read
     as part of the version text rather than announce itself as a control. It
     is for the handful of people who already know it is there. */
  cursor: default;
  opacity: 0.65;
  transition: color .15s ease;
}

.build-badge .cache-dot:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
  opacity: 1;
}

/* Mid-request: dim and ignore further clicks. Cursor stays put - see above. */
.build-badge .cache-dot.is-busy {
  opacity: 0.3;
}

/* Result states. The badge is dark blue, so these need to be light enough to
   read against it rather than the usual Bootstrap success/danger. */
.build-badge .cache-dot.is-ok {
  color: #75d6a3;
  opacity: 1;
}

.build-badge .cache-dot.is-bad {
  color: #ff9aa2;
  opacity: 1;
}

/* Gross revenue quintile on memberdata_A: five inline radios sitting on the
   same baseline as a form-control, so the row lines up with the field beside
   it rather than floating. */
.apic-radiorow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.1rem;
  min-height: calc(1.5em + .75rem + 2px);
  padding: .375rem 0;
}

.apic-radiorow .form-check-inline {
  margin-right: 0;
}

.apic-radiorow .form-check-label {
  cursor: pointer;
}

/* Whichever of "pick designations" / "I have none" the applicant has not
   chosen is locked, so the second can never silently undo the first. */
.apic-disabled {
  opacity: .5;
}

.apic-disabled .form-check-label,
.apic-disabled label {
  cursor: not-allowed;
}

/* Only explain the lock while it is actually locked. */
.apic-nodesig-why { display: none; }
.apic-disabled .apic-nodesig-why { display: inline; font-style: italic; }