/* CDS — Join and apply for membership (cds.org)
   Shared stylesheet for: 1-member-classification.html, 3-your-details.html,
   4a-dues-not-current.html, 4b-review-and-pay.html, 4c-provisional.html, 5-welcome.html
   Font: Public Sans (Google Fonts link in each page).
   Layout: main column + side column from ~900px; one column below (phones). */

:root {
  /* Brand — cds.org colors, as used on the original Midwinter Meeting register screen */
  --cds-green: #0A4A38;          /* header, card title bars, links, selected states */
  --cds-green-dark: #06301F;     /* link hover */
  --cds-orange: #F0951F;         /* primary buttons, header rule */
  --cds-orange-hover: #DB8416;

  /* Neutrals */
  --page-bg: #F2F5F3;            /* soft green-grey page background */
  --surface: #FFFFFF;
  --text: #16211D;
  --heading: #12211D;
  --text-body: #3E4A45;
  --text-muted: #4A5752;
  --border-card: #D5D9D7;
  --border-input: #8C9893;
  --border-option: #CFCAC0;
  --divider: #E2E5E3;
  --step-idle: #B9C4BF;
  --tint: #EEF4F1;               /* selected option, info notice */
  --tint-done: #DCEBE4;          /* completed step, success badge */
  --required: #B3261E;

  /* Status */
  --provisional-bg: #FFF1D6;
  --provisional-text: #5C3A00;
  --provisional-dot: #B86E00;

  --radius: 8px;
  --radius-option: 10px;
  --font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--text); background: var(--page-bg); }
a { color: var(--cds-green); }
a:hover { color: var(--cds-green-dark); }
:focus-visible { outline: 3px solid var(--cds-green); outline-offset: 2px; }
[hidden] { display: none !important; }   /* keeps hidden address layouts and buttons hidden despite their display rules */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { flex-shrink: 0; }

/* ---------- Header and footer ---------- */
.site-header {
  min-height: 92px; padding: 0 64px; background: var(--cds-green); border-bottom: 4px solid var(--cds-orange);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.site-header img { height: 48px; width: auto; display: block; }
.site-header .help { color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; padding: 12px 0; }
.site-header .help:hover { color: var(--cds-orange); }
.site-footer {
  max-width: 1200px; margin: 0 auto; padding: 0 40px 32px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-muted);
}
.site-footer nav { display: flex; gap: 24px; }
.site-footer a { color: var(--text-muted); }

/* ---------- Page ---------- */
.page { max-width: 1200px; margin: 0 auto; padding: 64px 40px 48px; display: flex; flex-direction: column; gap: 36px; }
.intro { display: flex; flex-direction: column; gap: 16px; max-width: 780px; }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cds-green); }
.intro h1 { margin: 0; font-size: 46px; line-height: 1.1; font-weight: 600; color: var(--heading); }
.intro .lede { margin: 0; font-size: 19px; line-height: 1.55; color: var(--text-body); }
.intro--icon { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 24px; max-width: none; }
.intro--icon > div { display: flex; flex-direction: column; gap: 12px; max-width: 760px; flex: 1 1 300px; }
.success-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--cds-green); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Step tracker */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.steps li { display: flex; gap: 12px; align-items: center; color: var(--text-muted); }
.steps .dot {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; background: var(--surface); border: 2px solid var(--step-idle);
}
.steps li[aria-current="step"] { color: var(--text); font-weight: 700; }
.steps li[aria-current="step"] .dot { background: var(--cds-green); border-color: var(--cds-green); color: #fff; }
.steps li.done .dot { background: var(--tint-done); border-color: var(--tint-done); color: var(--cds-green); }

/* Two-column layout */
.layout { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.main-col { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.side-col { flex: 1 1 300px; display: flex; flex-direction: column; gap: 20px; }

/* ---------- Cards with a green title bar ---------- */
.card { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.card-title { margin: 0; padding: 18px 32px; background: var(--cds-green); color: #fff; font-size: 22px; font-weight: 600; line-height: 1.3; }
.card-body { padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.card-body > p { margin: 0; font-size: 17px; line-height: 1.55; }
.card--side .card-title { padding: 14px 24px; font-size: 17px; }
.card--side .card-body { padding: 20px 24px; gap: 14px; }
.card--side .card-body p { font-size: 14px; color: var(--text-muted); }
.card-body h3 { margin: 0; font-size: 17px; }
.divider { height: 1px; background: var(--divider); border: 0; margin: 0; }

/* ---------- Form fields ---------- */
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.legend { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 10px; }
.legend--large { font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 20px; }
.legend .req { color: var(--required); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 20px; }
.grid--address { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field--narrow { max-width: 360px; }
.field label { font-size: 15px; font-weight: 600; }
.optional { font-weight: 400; color: var(--text-muted); }
.input {
  width: 100%; height: 52px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--text);
  border: 1.5px solid var(--border-input); border-radius: var(--radius); background: var(--surface);
}
.input:focus { outline: 3px solid var(--cds-green); outline-offset: 1px; }
.input[aria-invalid="true"] { border-color: var(--required); }
.error { margin: 0; font-size: 14px; font-weight: 600; color: var(--required); }
.notice--error { border-color: var(--required); background: #FDECEA; }
.notice--error p, .notice--error li { color: var(--text); }
.notice--error strong { color: var(--required); }
.choice .field-error { display: none; }
fieldset > .field-error { display: block; margin-top: 8px; }
.hint, .card-body > .hint { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }

/* Pill choices (gender, yes/no, preferences) */
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; cursor: pointer;
  border: 1.5px solid var(--border-option); border-radius: var(--radius); background: var(--surface); font-size: 15px;
}
.choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--cds-green); }
.choice:has(input:checked) { border: 2px solid var(--cds-green); background: var(--tint); }

/* Classification option cards (step 1) */
.option-group { display: flex; flex-direction: column; gap: 14px; }
.group-label { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.options--compact { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.option {
  display: flex; gap: 14px; padding: 20px; cursor: pointer;
  border: 1.5px solid var(--border-option); border-radius: var(--radius-option); background: var(--surface);
}
.option:hover { border-color: var(--cds-green); }
.option:has(input:checked) { border: 2px solid var(--cds-green); background: var(--tint); }
.option input { width: 20px; height: 20px; margin: 3px 0 0; flex-shrink: 0; accent-color: var(--cds-green); }
.option-content { display: flex; flex-direction: column; gap: 8px; }
.option-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.option-head strong { font-size: 18px; }
.options--compact .option-head strong { font-size: 17px; }
.price { font-size: 15px; font-weight: 700; color: var(--cds-green); }
.price--muted { color: var(--text-muted); }
.option-text { font-size: 15px; color: var(--text-body); }

/* Selection summary bar (step 1) */
.summary-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid var(--divider); }
.summary-bar .label { font-size: 14px; color: var(--text-muted); }
.summary-bar strong { display: block; font-size: 18px; }

/* ---------- Buttons ---------- */
.btn-primary {
  min-height: 56px; padding: 0 36px; border: 0; border-radius: var(--radius); background: var(--cds-orange); color: var(--text);
  font: inherit; font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-primary:hover { background: var(--cds-orange-hover); color: var(--text); }
.btn-block { width: 100%; }
.btn-secondary {
  align-self: flex-start; min-height: 52px; padding: 0 24px; border: 2px solid var(--cds-green); border-radius: var(--radius);
  background: var(--surface); color: var(--cds-green); font: inherit; font-size: 16px; font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-secondary:hover { background: var(--tint); color: var(--cds-green); }
.actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.actions--start { justify-content: flex-start; }
.text-link { font-size: 16px; font-weight: 600; padding: 14px 8px; color: var(--cds-green); background: none; border: 0; cursor: pointer; text-decoration: none; }
.text-link:hover { color: var(--cds-green-dark); }
.input--locked { background: var(--tint); color: var(--text-body); cursor: default; }
.side-links { display: flex; flex-direction: column; gap: 6px; }
.side-links a { font-size: 15px; padding: 4px 0; align-self: flex-start; }

/* ---------- Results and summaries ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; }
.checklist .sub { display: block; font-size: 15px; color: var(--text-muted); }
.check-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--tint-done); color: var(--cds-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.order-line { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--divider); }
.order-total { display: flex; justify-content: space-between; gap: 16px; font-size: 19px; font-weight: 700; }
.amount { font-variant-numeric: tabular-nums; }
.details-list { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; }
.details-list dt, .facts dt { font-size: 14px; color: var(--text-muted); }
.details-list dd, .facts dd { margin: 0; overflow-wrap: anywhere; }
.facts { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.membership-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.membership-line strong { font-size: 18px; }

/* Status badges */
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge--active { background: var(--tint-done); color: var(--cds-green); }
.badge--provisional { background: var(--provisional-bg); color: var(--provisional-text); }
.badge--provisional::before { background: var(--provisional-dot); }

.choice-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; cursor: pointer; border-bottom: 1px solid var(--divider); }
.choice-row:last-of-type { border-bottom: 0; }
.choice-row input { margin-top: 5px; flex: none; }
.choice-row strong { display: block; font-size: 16px; }
.choice-row .sub { display: block; font-size: 14px; color: var(--text-muted); }

/* Info notice */
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; background: var(--tint); border-radius: var(--radius); }
.notice p { margin: 0; font-size: 15px; line-height: 1.5; }
.notice .icon { margin-top: 2px; }

/* Upload drop zone (4c) */
.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 20px; text-align: center; cursor: pointer;
  border: 2px dashed var(--border-input); border-radius: var(--radius-option); background: #FAFBFA;
}
.dropzone:hover { border-color: var(--cds-green); background: var(--tint); }
.dropzone:focus-within { outline: 3px solid var(--cds-green); outline-offset: 2px; }
.dropzone strong { font-size: 17px; color: var(--cds-green); }
.dropzone span { font-size: 14px; color: var(--text-muted); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone--has-file { border-style: solid; border-color: var(--cds-green); background: var(--tint); }
.dropzone--has-file strong { word-break: break-word; }
.proof-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }

/* Destination tiles (5) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tile { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--border-card); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
.tile:hover { border-color: var(--cds-green); background: var(--tint); color: var(--text); }
.tile strong { font-size: 17px; color: var(--cds-green); }
.tile span { font-size: 15px; color: var(--text-body); }

/* ---------- Phones ---------- */
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 20px; }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f.full { grid-column: 1 / -1; }
.f label { font-size: 15px; font-weight: 600; }
.f input, .f select, .f textarea { width: 100%; height: 52px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--text); border: 1.5px solid var(--border-input); border-radius: var(--radius); background: var(--surface); }
.field-error, .validation-summary-errors { color: var(--required); font-size: 14px; font-weight: 600; }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.field input, .field select, .field textarea { width: 100%; height: 52px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--text); border: 1.5px solid var(--border-input); border-radius: var(--radius); background: var(--surface); }
.field textarea { height: auto; padding: 12px 14px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--cds-green); outline-offset: 1px; }
.sec { margin: 8px 0 0; font-size: 17px; font-weight: 700; }
.req { color: var(--required); }

@media (max-width: 700px) {
  .site-header { min-height: 68px; padding: 0 20px; }
  .site-header img { height: 32px; }
  .site-header .help { display: none; }
  .page { padding: 32px 20px 24px; gap: 24px; }
  .intro h1 { font-size: 34px; }
  .card-body { padding: 24px 20px; }
  .card-title { padding: 16px 20px; font-size: 20px; }
  .summary-bar { flex-direction: column; align-items: stretch; }
  .summary-bar .btn-primary { width: 100%; }
  .actions { flex-direction: column-reverse; align-items: stretch; }
  .actions .btn-primary { width: 100%; }
  .actions .text-link { text-align: center; }
  .site-footer { padding: 0 20px 24px; }
}