/* Campus Forms — components Bootstrap does not have.
   Load order: bootstrap.css → campus-forms-tokens.css → campus-forms-bootstrap.css → THIS

   Anything Bootstrap already provides (buttons, inputs, labels, cards, grid,
   spacing utilities) is used as Bootstrap, restyled in the bridge file. What is
   here is what a Campus form needs and Bootstrap has no equivalent for:
   the brand header, the stepper, the choice list, the quantity stepper, the
   summary rail, and the badge and callout tones that carry a readable ink.

   Every class is prefixed cf-. Every value is a token. */

/* Fonts: the page links Fraunces + Instrument Sans from Google Fonts itself
   (_layout_public_form.cshtml), with a preconnect - a <link> starts the fetch
   earlier than an @import buried in a stylesheet. The token stacks fall back
   to Georgia and system-ui either way. */

/* ---------- helpers ---------- */
.cf-muted { color: var(--ink-muted); }
.cf-subtle { color: var(--ink-subtle); }
.cf-req { color: var(--danger); margin-left: 2px; }
.cf-optional { color: var(--ink-subtle); font-weight: 400; font-size: 13px; }

/* ---------- page shell ----------
   Bootstrap's .container + .row/.col works too; this is the narrower,
   opinionated version the reference screens use. */
.cf-shell { background: var(--surface-page); min-height: 100%; }
.cf-shell-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6) var(--space-16);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-8);
  align-items: start;
}
.cf-shell-inner.cf-single { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.cf-shell-head { grid-column: 1 / -1; margin-bottom: var(--space-2); }
.cf-shell-full { grid-column: 1 / -1; }

/* ---------- brand header ---------- */
.cf-header {
  background: var(--surface-card);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -3px 0 var(--brand);
}
.cf-header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.cf-crest {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-pill);
  object-fit: contain;
  background: var(--surface-card);
  border: 1px solid var(--line);
}
.cf-crest-fallback {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-ink);
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  border: 1px solid var(--line);
}
.cf-header-name { font-family: var(--font-display); font-size: 17px; line-height: 22px; font-weight: 600; color: var(--ink); }
.cf-header-sub { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.cf-header-aside { margin-left: auto; }

/* ---------- page title ---------- */
.cf-title-eyebrow {
  display: block;
  font-size: 11px; line-height: 14px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-subtle);
  margin-bottom: var(--space-2);
}
.cf-title { font-family: var(--font-display); font-size: 34px; line-height: 38px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.cf-title-sub { color: var(--ink-muted); margin: var(--space-2) 0 0; max-width: 54ch; }

/* ---------- stepper ---------- */
.cf-stepper { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); flex-wrap: wrap; }
.cf-step { display: inline-flex; align-items: center; gap: var(--space-2); }
.cf-step-dot {
  width: 22px; height: 22px; flex: none;
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  border: 1px solid var(--control-border);
  color: var(--ink-muted);
  background: transparent;
}
.cf-step-label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-subtle); }
.cf-step-rule { width: 28px; height: 1px; background: var(--line-strong); }
.cf-step.is-current .cf-step-dot { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.cf-step.is-current .cf-step-label { color: var(--ink); }
.cf-step.is-done .cf-step-dot { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }
.cf-step.is-done .cf-step-label { color: var(--ink-muted); }

/* ---------- section ---------- */
.cf-section + .cf-section { margin-top: var(--space-10); padding-top: var(--space-10); border-top: 1px solid var(--line); }
.cf-section-head { margin-bottom: var(--space-6); }
.cf-section-title { font-family: var(--font-display); font-size: 19px; line-height: 25px; font-weight: 600; color: var(--ink); margin: 0; }
.cf-section-desc { color: var(--ink-muted); margin: var(--space-2) 0 0; max-width: 58ch; }

/* ---------- choice list ---------- */
.cf-group + .cf-group { margin-top: var(--space-6); }
.cf-group-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.cf-group-label {
  font-size: 11px; line-height: 14px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-subtle); white-space: nowrap;
}
.cf-group-dash { height: 2px; width: 28px; flex: none; background: var(--accent); border-radius: var(--radius-pill); }
.cf-group-rule { height: 1px; flex: 1; background: var(--line); }
.cf-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }

.cf-choice {
  display: block;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.cf-choice:hover { background: var(--surface-hover); border-color: var(--control-border); }
.cf-choice.is-selected { border-color: var(--brand); border-width: 2px; background: var(--brand-soft); }
.cf-choice.is-disabled { cursor: not-allowed; background: var(--surface-sunken); border-color: var(--line); }
.cf-choice.is-disabled .cf-choice-name,
.cf-choice.is-disabled .cf-choice-fee { color: var(--ink-subtle); }

.cf-choice-main { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); margin: 0; cursor: inherit; }
.cf-choice.is-selected .cf-choice-main { padding: calc(var(--space-4) - 1px); }
.cf-choice-text { min-width: 0; flex: 1 1 auto; }
.cf-choice-name { display: block; font-size: 15px; line-height: 23px; font-weight: 600; color: var(--ink); }
.cf-choice-meta { display: block; font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.cf-choice-fee {
  margin-left: auto; white-space: nowrap; color: var(--ink);
  font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.cf-choice-fee .cf-per { color: var(--ink-muted); font-weight: 400; font-size: 13px; }

.cf-choice-detail {
  border-top: 1px solid var(--brand);
  padding: var(--space-4) calc(var(--space-4) - 1px);
  display: grid; gap: var(--space-3);
}

/* ---------- quantity stepper ---------- */
.cf-qty-row { display: flex; align-items: center; gap: var(--space-3); }
.cf-qty-label { display: block; font-size: 15px; line-height: 23px; font-weight: 600; color: var(--ink); }
.cf-qty-note { display: block; font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.cf-qty { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); }
.cf-qty-btn {
  width: 40px; height: 40px; min-height: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--control-border);
  background: var(--surface-card);
  color: var(--ink);
  font-size: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.cf-qty-btn:hover:not(:disabled) { background: var(--surface-hover); }
.cf-qty-btn:disabled { color: var(--ink-subtle); cursor: not-allowed; }
.cf-qty-value { min-width: 36px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- summary rail ---------- */
.cf-rail { position: sticky; top: var(--space-6); overflow: hidden; }
.cf-rail .card-body { padding: 0; }
.cf-rail-head { padding: var(--space-6) var(--space-6) var(--space-4); }
.cf-rail-title { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); margin: 0; }
.cf-rail-empty { font-size: 13px; line-height: 19px; color: var(--ink-muted); margin: var(--space-2) 0 0; }
.cf-rail-lines { padding: 0 var(--space-6) var(--space-4); display: grid; gap: var(--space-3); }
.cf-line { display: flex; align-items: baseline; gap: var(--space-2); }
.cf-line-name { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 19px; color: var(--ink); }
.cf-line-qty { flex: none; margin-left: auto; white-space: nowrap; font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.cf-line-amount {
  flex: none; white-space: nowrap; color: var(--ink);
  font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.cf-line-qty + .cf-line-amount { margin-left: 0; }
.cf-line:not(:has(.cf-line-qty)) .cf-line-amount { margin-left: auto; }
.cf-rail-total {
  background: var(--surface-sunken);
  border-top: 1px solid var(--line);
  padding: var(--space-4) var(--space-6);
  display: flex; align-items: center; gap: var(--space-3);
}
.cf-rail-total-label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.cf-rail-total-value {
  margin-left: auto; color: var(--ink);
  font-size: 22px; line-height: 26px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cf-rail-foot { padding: var(--space-5) var(--space-6) var(--space-6); display: grid; gap: var(--space-3); }
.cf-rail-note { font-size: 12px; line-height: 17px; color: var(--ink-muted); text-align: center; margin: 0; }

/* ---------- badge tones ----------
   Bootstrap's .bg-* classes set a background and leave the ink to chance.
   These pairs are checked in both themes. */
.cf-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: 12px; line-height: 17px; font-weight: 600;
}
.cf-badge-brand { background: var(--brand-soft); color: var(--brand-ink); }
.cf-badge-success { background: var(--success-soft); color: var(--success-ink); }
.cf-badge-warning { background: var(--warning-soft); color: var(--warning-ink); }
.cf-badge-danger { background: var(--danger-soft); color: var(--danger-ink); }
.cf-badge-accent { background: var(--accent); color: var(--on-accent); }
.cf-badge-neutral { background: var(--surface-sunken); color: var(--ink-muted); }

/* ---------- callout tones ----------
   Use on Bootstrap's .alert element: <div class="alert cf-callout cf-callout-warning"> */
.cf-callout { border: 1px solid transparent; border-radius: var(--radius-lg); color: var(--ink); }
.cf-callout-title { display: block; font-size: 15px; line-height: 23px; font-weight: 600; margin-bottom: var(--space-1); }
.cf-callout-info { background: var(--brand-soft); border-color: var(--brand); }
.cf-callout-info .cf-callout-title { color: var(--brand-ink); }
.cf-callout-success { background: var(--success-soft); border-color: var(--success-ink); }
.cf-callout-success .cf-callout-title { color: var(--success-ink); }
.cf-callout-warning { background: var(--warning-soft); border-color: var(--warning-ink); }
.cf-callout-warning .cf-callout-title { color: var(--warning-ink); }
.cf-callout-danger { background: var(--danger-soft); border-color: var(--danger); }
.cf-callout-danger .cf-callout-title { color: var(--danger-ink); }

/* ---------- footer ---------- */
.cf-footer { text-align: center; padding: var(--space-8) var(--space-6); color: var(--ink-subtle); font-size: 12px; line-height: 17px; }

/* ---------- narrow ---------- */
@media (max-width: 860px) {
  .cf-shell-inner { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) var(--space-4) var(--space-12); }
  .cf-rail { position: static; }
  .cf-title { font-size: 26px; line-height: 31px; }
}