/* H4H Membership — front end */

/*
 * The palette is scoped to the plugin's own blocks so it cannot leak into a
 * theme. Every block the plugin renders has to be on this list — the member
 * menu and the portal tab bar were added later and were not, so on a real
 * site they resolved --h4h-line and --h4h-soft to nothing: a tab bar with no
 * rule under it and captions in the browser default colour.
 */
.h4h-join, .h4h-form, .h4h-portal, .h4h-pay, .h4h-verify, .h4h-login-prompt,
.h4h-membernav, .h4h-tabs-bar {
  --h4h-accent: #c8321f;
  --h4h-accent-dark: #a32718;
  --h4h-ink: #16181d;
  --h4h-soft: #5c6169;
  --h4h-line: #e5cec4;
  --h4h-paper: #fbf2ee;
  --h4h-ok: #1f8b45;
  font-family: inherit;
  color: var(--h4h-ink);
}

/* Notices ------------------------------------------------------------- */
.h4h-notice { padding: 14px 18px; border-radius: 10px; margin: 0 0 20px; border: 1px solid; font-size: 15px; line-height: 1.55; }
.h4h-notice-ok { background: #eaf7ee; border-color: #b7e2c4; color: #166032; }
.h4h-notice-err { background: #fdecea; border-color: #f3c2bc; color: #8d2418; }
.h4h-notice-warn { background: #fff7e8; border-color: #f0d9a8; color: #7a5200; }
.h4h-notice ul { margin: 6px 0 0; padding-left: 18px; }

/* Stepper -------------------------------------------------------------- */
.h4h-stepper {
  display: flex; gap: 8px; list-style: none; margin: 0 0 28px; padding: 0;
  flex-wrap: wrap; counter-reset: none;
}
.h4h-step { display: flex; align-items: center; gap: 9px; flex: 1 1 160px; padding: 12px 16px; border-radius: 999px; background: #f3f4f5; color: var(--h4h-soft); font-size: 14px; }
.h4h-step-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: #d8dbde; color: #fff; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.h4h-step.is-current { background: var(--h4h-paper); color: var(--h4h-ink); box-shadow: inset 0 0 0 1px var(--h4h-line); }
.h4h-step.is-current .h4h-step-num { background: var(--h4h-accent); }
.h4h-step.is-done { background: #eaf7ee; color: #166032; }
.h4h-step.is-done .h4h-step-num { background: var(--h4h-ok); }

/* Join layout ----------------------------------------------------------
   The card is a fixed 85.6mm (~323px) and cannot shrink, so the two-column
   layout is driven by the *container* width, not the viewport: themes wrap
   this in anything from a 640px column to a full-width section. Below the
   threshold the preview sits on top, where it is still visible while the
   first fields are filled in. */
.h4h-join { container-type: inline-size; }

.h4h-join-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.h4h-join-preview { order: -1; }
.h4h-preview-sticky { max-width: 336px; }

@container (min-width: 820px) {
  .h4h-join-grid { grid-template-columns: minmax(0, 1fr) 336px; gap: 34px; }
  .h4h-join-preview { order: 0; }
}

/* Containers are still unsupported in a few older browsers; fall back to
   the viewport so those users are not stuck with the narrow layout. */
@supports not (container-type: inline-size) {
  @media (min-width: 1100px) {
    .h4h-join-grid { grid-template-columns: minmax(0, 1fr) 336px; gap: 34px; }
    .h4h-join-preview { order: 0; }
  }
}

.h4h-fieldset { border: 1px solid var(--h4h-line); border-radius: 14px; padding: 20px 22px 22px; margin: 0 0 20px; background: #fff; }
.h4h-fieldset legend { padding: 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--h4h-accent); }
.h4h-req-mark { color: var(--h4h-accent); font-style: normal; }

.h4h-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.h4h-field { display: flex; flex-direction: column; gap: 6px; }
.h4h-field-wide { grid-column: 1 / -1; }
.h4h-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--h4h-soft); }
.h4h-label em { color: var(--h4h-accent); font-style: normal; }
.h4h-hint { font-size: 12.5px; color: var(--h4h-soft); line-height: 1.45; }
.h4h-hint-block { margin: 0 0 14px; }

.h4h-form input[type="text"], .h4h-form input[type="email"], .h4h-form input[type="tel"],
.h4h-form input[type="number"], .h4h-form input[type="date"], .h4h-form input[type="password"],
.h4h-form select, .h4h-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--h4h-line); border-radius: 10px;
  background: #fff; font-size: 15px; font-family: inherit; color: var(--h4h-ink); box-sizing: border-box;
}
.h4h-form input:focus, .h4h-form select:focus, .h4h-form textarea:focus {
  outline: 2px solid rgba(200, 50, 31, .35); outline-offset: 1px; border-color: var(--h4h-accent);
}

/* Password ------------------------------------------------------------- */
.h4h-pw-wrap { position: relative; display: block; }
.h4h-pw-wrap input { padding-right: 66px !important; }
.h4h-pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--h4h-accent); font-size: 12px; font-weight: 600;
  cursor: pointer; padding: 6px 10px; font-family: inherit;
}
.h4h-pw-meter { display: block; height: 5px; border-radius: 999px; background: #eceef0; overflow: hidden; }
.h4h-pw-meter .h4h-pw-bar { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .25s ease, background .25s ease; }
.h4h-pw-meter[data-level="0"] .h4h-pw-bar { width: 12%; background: #d94b3a; }
.h4h-pw-meter[data-level="1"] .h4h-pw-bar { width: 30%; background: #d94b3a; }
.h4h-pw-meter[data-level="2"] .h4h-pw-bar { width: 55%; background: #d9a03a; }
.h4h-pw-meter[data-level="3"] .h4h-pw-bar { width: 78%; background: #6aa84f; }
.h4h-pw-meter[data-level="4"] .h4h-pw-bar { width: 100%; background: var(--h4h-ok); }
.h4h-pw-match.is-ok { color: var(--h4h-ok); font-weight: 600; }
.h4h-pw-match.is-bad { color: var(--h4h-accent); font-weight: 600; }

/* Photo picker --------------------------------------------------------- */
.h4h-photo-field { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.h4h-photo-drop {
  position: relative; width: 168px; height: 200px; border-radius: 14px;
  border: 2px dashed var(--h4h-line); background: var(--h4h-paper);
  display: grid; place-items: center; overflow: hidden; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.h4h-photo-drop:hover { border-color: var(--h4h-accent); background: #fff; }
.h4h-photo-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.h4h-photo-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 0 14px; pointer-events: none; }
.h4h-photo-empty svg { width: 30px; height: 30px; color: var(--h4h-accent); }
.h4h-photo-empty strong { font-size: 14px; }
.h4h-photo-empty small { font-size: 11.5px; color: var(--h4h-soft); }
.h4h-photo-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h4h-photo-drop.has-photo { border-style: solid; border-color: var(--h4h-ok); }
.h4h-photo-drop.has-photo .h4h-photo-empty { display: none; }
.h4h-photo-error { display: none; color: var(--h4h-accent); font-weight: 600; }
.h4h-photo-error.is-shown { display: block; }

/* Fee ------------------------------------------------------------------ */
.h4h-fee {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 18px 22px;
  background: var(--h4h-paper); border: 1px solid var(--h4h-line); border-radius: 12px;
}
.h4h-fee-label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--h4h-soft); }
.h4h-fee-amount { font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--h4h-accent); line-height: 1; }
.h4h-fee-note { font-size: 13px; color: var(--h4h-soft); }

/* Buttons -------------------------------------------------------------- */
.h4h-btn {
  display: inline-block; padding: 14px 30px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: .02em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.h4h-btn-primary { background: var(--h4h-accent); color: #fff; }
.h4h-btn-primary:hover { background: var(--h4h-accent-dark); color: #fff; }
.h4h-btn-primary:disabled { opacity: .6; cursor: default; }
.h4h-btn-ghost { background: transparent; border-color: var(--h4h-line); color: var(--h4h-ink); }
.h4h-btn-small { padding: 9px 18px; font-size: 12.5px; }
.h4h-btn-block { display: block; width: 100%; }

/* Card preview column -------------------------------------------------- */
.h4h-join-preview { position: relative; }
.h4h-preview-sticky { position: sticky; top: 24px; }
.h4h-preview-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--h4h-soft); margin: 0 0 12px; }
.h4h-preview-note { font-size: 12.5px; color: var(--h4h-soft); line-height: 1.5; margin: 14px 0 0; }
/* The card is sized in mm (85.6mm ≈ 323px), so it already fits this column. */
.h4h-card-preview { width: 100%; max-width: 100%; }
.h4h-card-name.is-placeholder { opacity: .5; }

/* Payment -------------------------------------------------------------- */
.h4h-pay { max-width: 620px; }
.h4h-pay-summary { font-size: 16px; margin-bottom: 20px; }
.h4h-gateways { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.h4h-gateway {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border: 1px solid var(--h4h-line); border-radius: 12px; background: #fff; cursor: pointer; font-size: 15px;
}
.h4h-gateway:has(input:checked) { border-color: var(--h4h-accent); box-shadow: 0 0 0 1px var(--h4h-accent) inset; }
.h4h-gateway em { color: var(--h4h-soft); font-size: 13px; }
.h4h-offline-note { background: var(--h4h-paper); border: 1px solid var(--h4h-line); border-radius: 12px; padding: 20px 24px; margin-bottom: 18px; }

/* Forminator paints its own checkout in here. Only the surround is styled —
   the form keeps Forminator's own appearance settings. */
.h4h-forminator-embed {
  border: 1px solid var(--h4h-line); border-radius: 12px;
  padding: 22px 24px; background: #fff; margin-bottom: 18px;
}
.h4h-forminator-embed .forminator-ui { max-width: 100%; }

/* Login prompt --------------------------------------------------------- */
.h4h-login-prompt { max-width: 380px; border: 1px solid var(--h4h-line); border-radius: 14px; padding: 26px 28px; background: #fff; }
.h4h-login-prompt h3 { margin: 0 0 16px; }
.h4h-login-prompt input[type="text"], .h4h-login-prompt input[type="password"] {
  width: 100%; padding: 11px 13px; border: 1px solid var(--h4h-line); border-radius: 9px; box-sizing: border-box; font-size: 15px;
}
.h4h-login-prompt .button, .h4h-login-prompt input[type="submit"] {
  background: var(--h4h-accent); color: #fff; border: 0; border-radius: 999px;
  padding: 12px 26px; font-size: 14px; font-weight: 600; cursor: pointer;
}

/* Status page ---------------------------------------------------------- */
.h4h-status-hero {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 22px 24px; border-radius: 16px; margin-bottom: 24px;
  background: var(--h4h-paper); border: 1px solid var(--h4h-line);
}
.h4h-status-photo { width: 84px; height: 84px; border-radius: 999px; object-fit: cover; border: 3px solid #fff; box-shadow: 0 3px 12px rgba(0,0,0,.12); }
.h4h-status-hero-text h2 { margin: 4px 0 8px; font-size: 24px; }
.h4h-status-eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--h4h-soft); }
.h4h-status-badge {
  display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 12px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: #e6effd; color: #17458a;
}
.h4h-status-hero.h4h-status-rejected .h4h-status-badge { background: #fdecea; color: #8d2418; }
.h4h-status-hero.h4h-status-expired .h4h-status-badge { background: #eceef0; color: #5c6169; }
.h4h-status-hero.h4h-status-pending_payment .h4h-status-badge { background: #fff3dd; color: #8a5a00; }

/* Progress track ------------------------------------------------------- */
.h4h-track { list-style: none; margin: 0 0 30px; padding: 0; }
.h4h-track-step { position: relative; display: flex; gap: 16px; padding: 0 0 26px 0; }
.h4h-track-step:last-child { padding-bottom: 0; }
.h4h-track-step::before {
  content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: #e4e7ea;
}
.h4h-track-step:last-child::before { display: none; }
.h4h-track-dot {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff;
  background: #d8dbde; box-shadow: 0 0 0 4px #fff;
}
.h4h-track-step.is-done .h4h-track-dot { background: var(--h4h-ok); }
.h4h-track-step.is-current .h4h-track-dot { background: var(--h4h-accent); animation: h4h-pulse 1.8s ease-in-out infinite; }
.h4h-track-step.is-stopped .h4h-track-dot { background: #8d2418; }
.h4h-track-step.is-done::before { background: var(--h4h-ok); }
.h4h-track-body { display: flex; flex-direction: column; gap: 3px; padding-top: 3px; }
.h4h-track-label { font-weight: 600; font-size: 15.5px; }
.h4h-track-step.is-upcoming .h4h-track-label { color: var(--h4h-soft); font-weight: 500; }
.h4h-track-note { font-size: 13px; color: var(--h4h-soft); }
.h4h-track-step.is-current .h4h-track-label { color: var(--h4h-accent); }

@keyframes h4h-pulse {
  0%, 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 4px rgba(200,50,31,.35); }
  50% { box-shadow: 0 0 0 4px #fff, 0 0 0 10px rgba(200,50,31,0); }
}

/* Photo panel ---------------------------------------------------------- */
.h4h-photo-panel { border: 1px solid var(--h4h-line); border-radius: 14px; padding: 20px 22px; background: #fff; margin: 28px 0; }
.h4h-photo-panel h3 { margin-top: 0; }
.h4h-photo-update { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.h4h-photo-current { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; border: 1px solid var(--h4h-line); }
.h4h-photo-update input[type="file"] { font-size: 13px; max-width: 260px; }

.h4h-account-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.h4h-account-form .h4h-field { flex: 1 1 190px; }
.h4h-account-form input[type="password"] {
  width: 100%; padding: 11px 13px; border: 1px solid var(--h4h-line); border-radius: 9px;
  font-size: 14px; font-family: inherit; box-sizing: border-box;
}

/* Portal --------------------------------------------------------------- */
.h4h-portal h3 { margin: 32px 0 12px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.h4h-portal-status {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 16px 20px; border-radius: 12px; background: var(--h4h-paper);
  border: 1px solid var(--h4h-line); font-weight: 600;
}
.h4h-portal-status.h4h-status-active { background: #eaf7ee; border-color: #b7e2c4; color: #166032; }
.h4h-portal-status em { font-weight: 400; font-style: normal; opacity: .78; }
.h4h-hours-total { font-size: 13px; font-weight: 600; color: var(--h4h-soft); }
.h4h-portal-foot { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--h4h-line); font-size: 13px; }

.h4h-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 12px; }
.h4h-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--h4h-soft); padding: 8px 10px; border-bottom: 1px solid var(--h4h-line); }
.h4h-table td { padding: 10px; border-bottom: 1px solid rgba(229, 206, 196, .5); }

/* Certificate request — hours are recorded by the chapter, so this is the
   only thing the portal asks a member to submit about volunteering. */
.h4h-cert-request { margin: 4px 0 18px; }
.h4h-cert-request textarea {
  width: 100%; max-width: 460px; display: block; margin-bottom: 10px;
  padding: 11px 13px; border: 1px solid var(--h4h-line); border-radius: 9px;
  font-size: 14px; font-family: inherit; box-sizing: border-box; resize: vertical;
}

/* Verify --------------------------------------------------------------- */
.h4h-verify-body { margin: 0; padding: 32px 20px; background: #f4f6f7; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.h4h-verify {
  max-width: 440px; margin: 0 auto; text-align: center; background: #fff;
  border-radius: 18px; padding: 34px 28px; box-shadow: 0 10px 40px rgba(0, 0, 0, .10); border-top: 6px solid #b9bfc5;
}
.h4h-verify-ok { border-top-color: var(--h4h-ok); }
.h4h-verify-bad { border-top-color: var(--h4h-accent); }
.h4h-verify-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 999px; font-size: 30px; color: #fff; background: #b9bfc5; line-height: 1; }
.h4h-verify-ok .h4h-verify-icon { background: var(--h4h-ok); }
.h4h-verify-bad .h4h-verify-icon { background: var(--h4h-accent); }
.h4h-verify h2 { margin: 0 0 18px; font-size: 22px; }
.h4h-verify-photo { width: 110px; height: 110px; border-radius: 999px; object-fit: cover; margin-bottom: 16px; border: 4px solid #fff; box-shadow: 0 4px 16px rgba(0,0,0,.14); }
.h4h-verify-details { text-align: left; margin: 0 0 18px; display: flex; flex-direction: column; gap: 9px; }
.h4h-verify-details div { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid #eef0f2; padding-bottom: 8px; }
.h4h-verify-details dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--h4h-soft); margin: 0; }
.h4h-verify-details dd { margin: 0; font-weight: 600; text-align: right; }
.h4h-verify-foot { font-size: 12px; color: var(--h4h-soft); margin: 0; }
.h4h-verify-idle { color: var(--h4h-soft); }

/* Checkout: the fee, what came off it, and what is left ----------------- */
.h4h-quote { width: 100%; max-width: 460px; border-collapse: collapse; margin: 4px 0 18px; }
.h4h-quote th,
.h4h-quote td { padding: 9px 0; text-align: left; font-weight: 400; border-bottom: 1px solid rgba(229, 206, 196, .55); }
.h4h-quote td { text-align: right; white-space: nowrap; }
.h4h-quote-off th,
.h4h-quote-off td { color: var(--h4h-ok); }
.h4h-quote-total th,
.h4h-quote-total td { border-bottom: 0; border-top: 2px solid var(--h4h-line); font-size: 17px; font-weight: 700; padding-top: 12px; }

.h4h-code-form { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.h4h-code-form label { font-size: 13px; color: var(--h4h-soft); }
.h4h-code-form input[type="text"] {
  padding: 10px 13px; border: 1px solid var(--h4h-line); border-radius: 9px;
  font-size: 14px; font-family: inherit; width: 170px; text-transform: uppercase;
}
.h4h-credit-toggle { display: flex; align-items: center; gap: 7px; width: 100%; font-size: 14px; color: inherit; }

/* Account credit in the portal */
.h4h-credit-panel { border: 1px solid var(--h4h-line); border-radius: 12px; padding: 16px 18px; margin: 18px 0; background: #fffaf7; }
.h4h-credit-figure { font-size: 26px; font-weight: 700; margin: 2px 0 6px; }
.h4h-credit-list { list-style: none; margin: 12px 0 0; padding: 0; font-size: 13px; }
.h4h-credit-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(229, 206, 196, .55); }

/* Member navigation ---------------------------------------------------- */

/*
 * These two live inside somebody else's design — a page-builder header, a
 * theme's content column — so every property a theme is likely to set on a
 * nav, a list or a link is set here explicitly rather than left to inherit.
 *
 * The selectors lead with the element name (nav.h4h-membernav) purely for
 * specificity: a bare class loses to the builder's own generated link rules,
 * which is what left these looking unstyled on a real site while they were
 * fine in the sandbox.
 */
nav.h4h-membernav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.3;
  /* Sits in whatever the theme puts around it, so it takes its own colour
     from the surroundings rather than forcing the plugin ink onto a dark
     header. */
  color: inherit;
}
nav.h4h-membernav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav.h4h-membernav li {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav.h4h-membernav li::before,
nav.h4h-membernav li::marker { content: none; }

nav.h4h-membernav a {
  display: inline-block;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  font: inherit;
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
  transition: background .15s ease, color .15s ease;
}
/* currentColor, so the wash works on a light or a dark header without
   knowing which it is. */
nav.h4h-membernav a:hover,
nav.h4h-membernav a:focus-visible {
  background: color-mix(in srgb, currentColor 12%, transparent);
  text-decoration: none;
  color: inherit;
}
nav.h4h-membernav .is-current > a {
  background: var(--h4h-ink);
  color: #fff;
}
nav.h4h-membernav .h4h-membernav-primary > a {
  background: var(--h4h-accent);
  color: #fff;
  font-weight: 600;
}
nav.h4h-membernav .h4h-membernav-primary > a:hover { background: var(--h4h-accent-dark); color: #fff; }
nav.h4h-membernav .h4h-membernav-link > a { opacity: .8; }
nav.h4h-membernav .h4h-membernav-link > a:hover { opacity: 1; }

/* Who is signed in, so a shared computer is obvious. */
nav.h4h-membernav .h4h-membernav-who {
  display: flex; flex-direction: column; line-height: 1.25; color: inherit;
}
nav.h4h-membernav .h4h-membernav-who strong { font-weight: 700; }
nav.h4h-membernav .h4h-membernav-who em { font-style: normal; font-size: 11px; opacity: .65; }

nav.h4h-membernav-vertical { flex-direction: column; align-items: stretch; gap: 8px; }
nav.h4h-membernav-vertical ul { flex-direction: column; align-items: stretch; }
nav.h4h-membernav-vertical a { display: block; padding: 9px 13px; border-radius: 8px; }

/* The same list as the portal's own tab bar. */
nav.h4h-tabs-bar {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 0;
  border-bottom: 2px solid var(--h4h-line);
  background: transparent;
}
nav.h4h-tabs-bar a {
  display: inline-block;
  padding: 10px 15px;
  margin-bottom: -2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--h4h-soft);
}
nav.h4h-tabs-bar a:hover,
nav.h4h-tabs-bar a:focus-visible { color: var(--h4h-ink); text-decoration: none; }
nav.h4h-tabs-bar a.is-current {
  color: var(--h4h-accent);
  border-bottom-color: var(--h4h-accent);
}

/* Dashboard tiles, each a door to the section behind it. */
.h4h-portal-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin: 22px 0; padding: 0; list-style: none;
}
a.h4h-portal-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 15px 17px; border-radius: 12px;
  border: 1px solid var(--h4h-line); background: #fff;
  text-decoration: none; color: inherit; box-shadow: none;
  transition: border-color .12s ease;
}
a.h4h-portal-tile:hover { border-color: var(--h4h-ink); text-decoration: none; }
a.h4h-portal-tile strong {
  font-size: 22px; line-height: 1.1; color: var(--h4h-ink);
  font-variant-numeric: tabular-nums;
}
a.h4h-portal-tile span {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--h4h-soft);
}

@media (max-width: 600px) {
  nav.h4h-tabs-bar { overflow-x: auto; flex-wrap: nowrap; }
}
}