/* =========================================================
   INPA MEMBER UI KIT — Material 3 tokens + components
   =========================================================

   WHAT THIS IS
   A small, hand-built component kit for the members area (sign up /
   log in, profile, directory, listings, filters, forms). It follows
   Google's Material 3 design system — same token names, state layers,
   shapes and type scale — but it's plain CSS (+ js/member-ui.js for a
   few behaviours), with no library dependency and no build step.

   We chose this over Google's Material Web library because Material
   Web has been in maintenance mode since June 2024 (see ClickUp:
   "Wire up Material 3 (Material Web) for member surfaces").

   WHERE IT LOADS
   ONLY on members-area pages. Marketing pages (Home, About, Community,
   Resources, Updates, Donate, Join, Contact, Connect…) never load this
   file, so they're unaffected. Load it AFTER css/style.css — the
   tokens below are built from style.css's brand palette variables:

     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/member-ui.css">
     ...
     <script src="js/member-ui.js" defer></script>

   Everything is namespaced: tokens start with --md-, classes with
   .m3-, so nothing here can restyle existing site elements.

   Live reference / test page: /member-ui-test.html (noindex).

   ---------------------------------------------------------
   BRAND → MATERIAL 3 COLOR MAPPING
   ---------------------------------------------------------
   M3 role                    INPA brand value        Used for
   primary                    --olive-s1 (dark olive) checked controls, switches,
                                                      active field outline,
                                                      links, text buttons
   on-primary                 --paper
   primary-container          olive-t2 45% on paper   tonal buttons, selected
                                                      chips, avatars
   on-primary-container       --olive-s2
   secondary                  --olive-s1              secondary emphasis
   on-secondary               --paper
   secondary-container        --olive-t1 (light olive) FILLED buttons = the
                                                      site's existing olive
                                                      "Join / Donate" CTA look
                                                      (dark ink text, 7:1)
   on-secondary-container     --ink
   tertiary                   --orange-s1             accent highlights
   on-tertiary                --paper
   tertiary-container         --orange-t2
   on-tertiary-container      --orange-s2
   error / on-error           #B3261E / #FFFFFF       (M3 baseline red — the
   error-container            #F9DEDC                  brand has no red, and
   on-error-container         #410E0B                  orange is our accent)
   surface / background       --paper
   surface-container-lowest   #FFFFFF                 cards on paper
   surface-container-low      --cream
   surface-container          cream/sand mix
   surface-container-high     sand 70% on cream
   surface-container-highest  --sand                  filled card / input bg
   on-surface                 --ink
   on-surface-variant         --charcoal              supporting text, icons
   outline                    --taupe                 field borders (3.1:1)
   outline-variant            --stone                 dividers (decorative)
   inverse-surface            --ink                   snackbar
   inverse-on-surface         --paper
   inverse-primary            --olive-t2              snackbar action
   focus ring                 --orange                matches site's
                                                      :focus-visible
   All text pairs above meet WCAG AA (4.5:1+); primary (7.2:1) and
   outline (3.1:1) meet the 3:1 non-text minimum against the page.
   Why not light olive (--olive-t1) as primary? It's only 2.3:1
   against --paper, too faint for checkboxes, field outlines and
   links — so it's used for filled-button backgrounds (where the dark
   label carries the contrast), and dark olive does the rest.
   Navy isn't used in the members area.
   ========================================================= */


/* =========================================================
   TOKENS
   ========================================================= */
:root {
  /* ---- Color roles ---- */
  --md-sys-color-primary: var(--olive-s1);
  --md-sys-color-on-primary: var(--paper);
  --md-sys-color-primary-container: color-mix(in srgb, var(--olive-t2) 45%, var(--paper));
  --md-sys-color-on-primary-container: var(--olive-s2);

  --md-sys-color-secondary: var(--olive-s1);
  --md-sys-color-on-secondary: var(--paper);
  --md-sys-color-secondary-container: var(--olive-t1);
  --md-sys-color-on-secondary-container: var(--ink);

  --md-sys-color-tertiary: var(--orange-s1);
  --md-sys-color-on-tertiary: var(--paper);
  --md-sys-color-tertiary-container: var(--orange-t2);
  --md-sys-color-on-tertiary-container: var(--orange-s2);

  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #F9DEDC;
  --md-sys-color-on-error-container: #410E0B;

  --md-sys-color-background: var(--paper);
  --md-sys-color-on-background: var(--ink);
  --md-sys-color-surface: var(--paper);
  --md-sys-color-on-surface: var(--ink);
  --md-sys-color-on-surface-variant: var(--charcoal);
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: var(--cream);
  --md-sys-color-surface-container: color-mix(in srgb, var(--sand) 35%, var(--cream));
  --md-sys-color-surface-container-high: color-mix(in srgb, var(--sand) 70%, var(--cream));
  --md-sys-color-surface-container-highest: var(--sand);

  --md-sys-color-outline: var(--taupe);
  --md-sys-color-outline-variant: var(--stone);

  --md-sys-color-inverse-surface: var(--ink);
  --md-sys-color-inverse-on-surface: var(--paper);
  --md-sys-color-inverse-primary: var(--olive-t2);

  --md-sys-color-shadow: var(--near-black);
  --md-sys-color-scrim: var(--near-black);

  /* Not an official M3 role — the site-wide focus color. */
  --md-sys-color-focus-ring: var(--orange);

  /* ---- Typography (M3 type scale, set in Archivo) ---- */
  --md-ref-typeface-brand: var(--font-display);
  --md-ref-typeface-plain: var(--font-body);

  --md-sys-typescale-display-small:  400 2.25rem/2.75rem var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large: 700 2rem/2.5rem var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium:700 1.75rem/2.25rem var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small: 700 1.5rem/2rem var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large:    700 1.375rem/1.75rem var(--md-ref-typeface-brand);
  --md-sys-typescale-title-medium:   600 1rem/1.5rem var(--md-ref-typeface-plain);
  --md-sys-typescale-title-small:    600 0.875rem/1.25rem var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large:     400 1rem/1.5rem var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium:    400 0.875rem/1.25rem var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small:     400 0.75rem/1rem var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large:    600 0.875rem/1.25rem var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium:   600 0.75rem/1rem var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small:    600 0.6875rem/1rem var(--md-ref-typeface-plain);

  /* ---- Shape (M3 corner scale; matches the site's 8/12/pill radii) ---- */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 999px;

  /* ---- Elevation ---- */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px rgba(18,14,12,0.18), 0 1px 3px 1px rgba(18,14,12,0.08);
  --md-sys-elevation-2: 0 1px 2px rgba(18,14,12,0.18), 0 2px 6px 2px rgba(18,14,12,0.08);
  --md-sys-elevation-3: 0 1px 3px rgba(18,14,12,0.18), 0 4px 8px 3px rgba(18,14,12,0.08);

  /* ---- State layers (opacity of the content color laid over a surface) ---- */
  --md-sys-state-hover: 0.08;
  --md-sys-state-focus: 0.10;
  --md-sys-state-pressed: 0.10;
  --md-sys-state-dragged: 0.16;
  --md-sys-state-disabled-content: 0.38;
  --md-sys-state-disabled-container: 0.12;

  /* ---- Motion ---- */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 300ms;
}


/* =========================================================
   SHARED — state layers, focus, icons, type helpers
   ========================================================= */

/* Any interactive component gets a ::before "state layer": a sheet of
   its own content color, faded in on hover/focus/press. */
.m3-button,
.m3-icon-button,
.m3-chip,
.m3-card--interactive {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.m3-button::before,
.m3-icon-button::before,
.m3-chip::before,
.m3-card--interactive::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--md-sys-motion-duration-short) linear;
}
.m3-button:hover::before,
.m3-icon-button:hover::before,
.m3-chip:hover::before,
.m3-card--interactive:hover::before { opacity: var(--md-sys-state-hover); }
.m3-button:focus-visible::before,
.m3-icon-button:focus-visible::before,
.m3-chip:focus-within::before,
.m3-card--interactive:focus-visible::before { opacity: var(--md-sys-state-focus); }
.m3-button:active::before,
.m3-icon-button:active::before,
.m3-chip:active::before,
.m3-card--interactive:active::before { opacity: var(--md-sys-state-pressed); }

.m3-button:focus-visible,
.m3-icon-button:focus-visible,
.m3-card--interactive:focus-visible {
  outline: 2px solid var(--md-sys-color-focus-ring);
  outline-offset: 2px;
}

/* Icons: works with inline <svg class="m3-icon"> or Material Symbols
   (<span class="m3-icon material-symbols-outlined">search</span>, with
   the Material Symbols font linked on that page). */
.m3-icon {
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
  line-height: 1;
  flex: none;
  display: inline-block;
  fill: currentColor;
  user-select: none;
}
.material-symbols-outlined.m3-icon { width: auto; height: auto; }

.m3-headline-large  { font: var(--md-sys-typescale-headline-large); margin: 0; }
.m3-headline-medium { font: var(--md-sys-typescale-headline-medium); margin: 0; }
.m3-headline-small  { font: var(--md-sys-typescale-headline-small); margin: 0; }
.m3-title-large     { font: var(--md-sys-typescale-title-large); margin: 0; }
.m3-title-medium    { font: var(--md-sys-typescale-title-medium); margin: 0; }
.m3-title-small     { font: var(--md-sys-typescale-title-small); margin: 0; }
.m3-body-large      { font: var(--md-sys-typescale-body-large); margin: 0; }
.m3-body-medium     { font: var(--md-sys-typescale-body-medium); margin: 0; }
.m3-body-small      { font: var(--md-sys-typescale-body-small); margin: 0; }
.m3-label-large     { font: var(--md-sys-typescale-label-large); margin: 0; }


/* =========================================================
   BUTTONS
   <button class="m3-button m3-button--filled">Save profile</button>
   Variants: --filled (light olive + dark text, = the site's existing
   Join/Donate CTA), --tonal (pale olive), --outlined, --text, --danger. Add an .m3-icon inside for a leading icon.
   ========================================================= */
.m3-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-large);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.m3-button:has(> .m3-icon:first-child) { padding-left: 1rem; }
.m3-button .m3-icon { width: 1.125rem; height: 1.125rem; font-size: 1.125rem; }

/* Matches the site's .btn--solid: light olive with dark text, turning
   dark olive with light text on hover. */
.m3-button--filled {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  transition:
    background var(--md-sys-motion-duration-short) linear,
    color var(--md-sys-motion-duration-short) linear,
    box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}
.m3-button--filled:hover {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: var(--md-sys-elevation-1);
}
.m3-button--filled:hover::before { opacity: 0; }

.m3-button--tonal {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.m3-button--tonal:hover { box-shadow: var(--md-sys-elevation-1); }

.m3-button--outlined {
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}

.m3-button--text {
  background: transparent;
  color: var(--md-sys-color-primary);
  padding: 0 0.75rem;
}

.m3-button--danger {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}

.m3-button:disabled,
.m3-button[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
  box-shadow: none;
  color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content) * 100%), transparent);
}
.m3-button--filled:disabled,
.m3-button--tonal:disabled,
.m3-button--danger:disabled,
.m3-button--filled[aria-disabled="true"],
.m3-button--tonal[aria-disabled="true"] {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container) * 100%), transparent);
}
.m3-button--outlined:disabled {
  border-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container) * 100%), transparent);
}

/* Icon button: <button class="m3-icon-button" aria-label="Remove">…</button> */
.m3-icon-button {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
}
.m3-icon-button .m3-icon { width: 1.5rem; height: 1.5rem; font-size: 1.5rem; }

/* A row of actions (form footers, dialog footers, card footers). */
.m3-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.m3-actions--end { justify-content: flex-end; }


/* =========================================================
   TEXT FIELDS (M3 outlined field, styled to match the site's join form)
   <div class="m3-field">
     <input class="m3-field__input" id="org" placeholder=" " required>
     <label class="m3-field__label" for="org">Organization name</label>
     <p class="m3-field__support">Shown on your directory card.</p>
   </div>
   - placeholder=" " (a single space) is required: it's what lets the
     label float with pure CSS.
   - Textarea: same markup with <textarea class="m3-field__input">.
   - Select: same markup with <select class="m3-field__input">, label
     stays floated.
   - Counters: add data-m3-counter (uses maxlength) or
     data-m3-max-words="100" to the input; member-ui.js adds the count.
   - Errors: member-ui.js adds .m3-field--error + the browser's
     validation message after the user leaves an invalid field; or add
     .m3-field--error yourself (e.g. for server-side errors) and put the
     message in .m3-field__support.
   ========================================================= */
/* Field box styling matches the site's existing forms (join.html,
   connect.html, contact.html — .contact-form in style.css): off-white
   --paper background, soft 25%-ink border, 8px corners, 0.9rem text,
   and the same thin chevron on selects. Change these four variables to
   restyle every member-area field at once. */
.m3-field {
  --m3-field-bg: var(--paper);
  --m3-field-border: rgba(30,24,21,0.25);
  --m3-field-border-hover: rgba(30,24,21,0.45);
  --m3-field-radius: var(--md-sys-shape-corner-small);
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 0 1.25rem;
}
.m3-field__input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  margin: 0;
  border: 1px solid var(--m3-field-border);
  border-radius: var(--m3-field-radius);
  background: var(--m3-field-bg);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-ref-typeface-plain);
  font-size: 0.9rem;
  line-height: 1.2;
  caret-color: var(--md-sys-color-primary);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--md-sys-motion-duration-short) linear;
}
.m3-field__input::placeholder { color: transparent; }
.m3-field__input:hover { border-color: var(--m3-field-border-hover); }
/* Focus: the site-wide orange focus ring, same as the join form. */
.m3-field__input:focus-visible,
.m3-field__input:focus {
  outline: 2px solid var(--md-sys-color-focus-ring);
  outline-offset: 3px;
}
textarea.m3-field__input {
  min-height: 8rem;
  resize: vertical;
}
select.m3-field__input {
  padding-right: 2.4rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314231A' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1rem;
}

/* Label: sits inside the field like a placeholder, floats up onto the
   top border on focus or once the field has a value. */
.m3-field__label {
  position: absolute;
  left: 0.65rem;
  top: 0.7rem;
  padding: 0 0.25rem;
  max-width: calc(100% - 1.3rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--md-ref-typeface-plain);
  font-size: 0.9rem;
  line-height: 1.2;
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 65%, transparent);
  background: var(--m3-field-bg);
  border-radius: 2px;
  pointer-events: none;
  transform-origin: left top;
  transition:
    transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short) linear;
}
.m3-field__input:focus ~ .m3-field__label,
.m3-field__input:not(:placeholder-shown) ~ .m3-field__label,
select.m3-field__input ~ .m3-field__label {
  transform: translateY(-1.15rem) scale(0.8);
  color: var(--md-sys-color-on-surface-variant);
}
.m3-field__input:focus ~ .m3-field__label { color: var(--md-sys-color-primary); }

/* Required marker — add .m3-field__label--required, or it's added
   automatically by member-ui.js for inputs with `required`. */
.m3-field__label--required::after {
  content: " *";
  color: var(--md-sys-color-error);
}

/* Optional leading icon:
   <div class="m3-field m3-field--has-leading">
     <svg class="m3-field__leading m3-icon" …> …                       */
.m3-field--has-leading .m3-field__input { padding-left: 2.6rem; }
.m3-field--has-leading .m3-field__label { left: 2.35rem; }
.m3-field--has-leading .m3-field__input:not(:placeholder-shown) ~ .m3-field__label,
.m3-field--has-leading .m3-field__input:focus ~ .m3-field__label { transform: translate(-1.7rem, -1.15rem) scale(0.8); }
.m3-field__leading {
  position: absolute;
  left: 0.8rem;
  top: 0.68rem;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1.25rem;
  color: var(--md-sys-color-on-surface-variant);
  pointer-events: none;
}

/* Supporting text + counter row */
.m3-field__support,
.m3-field__counter {
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0.35rem 0.9rem 0;
}
.m3-field__footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.m3-field__footer .m3-field__support { margin-right: 0; }
.m3-field__counter { margin-left: auto; white-space: nowrap; }

/* Error state */
.m3-field--error .m3-field__input,
.m3-field--error .m3-field__input:hover {
  border-color: var(--md-sys-color-error);
}
.m3-field--error .m3-field__label,
.m3-field--error .m3-field__input:focus ~ .m3-field__label,
.m3-field--error .m3-field__support,
.m3-field--error .m3-field__counter {
  color: var(--md-sys-color-error);
}

/* Disabled */
.m3-field__input:disabled {
  cursor: default;
  border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
.m3-field__input:disabled ~ .m3-field__label {
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}

/* Two fields side by side on wider screens */
.m3-field-row {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1rem;
}
@media (min-width: 640px) {
  .m3-field-row { grid-template-columns: 1fr 1fr; }
}
/* Account and admin pages: one field per line, so every field gets the
   full width of the panel (Small UI Edits, Oct 13). */
[data-auth-page="account"] .m3-field-row,
[data-auth-page="admin"] .m3-field-row { grid-template-columns: 1fr; }


/* =========================================================
   CHECKBOX, RADIO, SWITCH
   <label class="m3-check">
     <input type="checkbox" class="m3-checkbox"> Email me INPA updates
   </label>
   Radio: <input type="radio" class="m3-radio">
   Switch: <input type="checkbox" class="m3-switch" role="switch">
   ========================================================= */
.m3-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  margin: 0 0 0.75rem;
}
.m3-check__text { padding-top: 0.05rem; }
.m3-check__text small {
  display: block;
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
}

.m3-checkbox,
.m3-radio {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  border: 2px solid var(--md-sys-color-on-surface-variant);
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
  /* State-layer halo (M3 draws a 40px circle around the control) */
  box-shadow: 0 0 0 0 transparent;
  transition:
    background var(--md-sys-motion-duration-short) linear,
    border-color var(--md-sys-motion-duration-short) linear,
    box-shadow var(--md-sys-motion-duration-short) linear;
}
.m3-checkbox { border-radius: 2px; }
.m3-radio { border-radius: 50%; }

.m3-checkbox:hover,
.m3-radio:hover {
  box-shadow: 0 0 0 11px color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
.m3-checkbox:focus-visible,
.m3-radio:focus-visible {
  outline: 2px solid var(--md-sys-color-focus-ring);
  outline-offset: 3px;
}

.m3-checkbox:checked,
.m3-checkbox:indeterminate {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}
.m3-checkbox:checked::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--md-sys-color-on-primary);
  clip-path: polygon(14% 44%, 0 59%, 39% 96%, 100% 25%, 85% 11%, 38% 66%);
}
.m3-checkbox:indeterminate::after {
  content: "";
  width: 10px;
  height: 2px;
  background: var(--md-sys-color-on-primary);
}

.m3-radio:checked { border-color: var(--md-sys-color-primary); }
.m3-radio:checked::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--md-sys-color-primary);
}

.m3-checkbox:disabled,
.m3-radio:disabled {
  cursor: default;
  opacity: var(--md-sys-state-disabled-content);
  box-shadow: none;
}

/* Error (e.g. required consent box not ticked) */
.m3-check--error .m3-checkbox { border-color: var(--md-sys-color-error); }
.m3-check--error { color: var(--md-sys-color-error); }

/* Switch */
.m3-switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 52px;
  height: 32px;
  margin: 0;
  border-radius: var(--md-sys-shape-corner-full);
  border: 2px solid var(--md-sys-color-outline);
  background: var(--md-sys-color-surface-container-highest);
  cursor: pointer;
  transition:
    background var(--md-sys-motion-duration-short) linear,
    border-color var(--md-sys-motion-duration-short) linear;
}
.m3-switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--md-sys-color-outline);
  transform: translateY(-50%);
  transition:
    left var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    width var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    height var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    background var(--md-sys-motion-duration-short) linear;
}
.m3-switch:checked {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}
.m3-switch:checked::after {
  left: 22px;
  width: 24px;
  height: 24px;
  background: var(--md-sys-color-on-primary);
}
.m3-switch:focus-visible {
  outline: 2px solid var(--md-sys-color-focus-ring);
  outline-offset: 3px;
}
.m3-switch:disabled { opacity: var(--md-sys-state-disabled-content); cursor: default; }
/* Switch rows: label text on the left, switch on the right. */
.m3-check:has(.m3-switch) { align-items: center; gap: 1rem; }
.m3-check:has(.m3-switch) .m3-check__text { flex: 1; }
.m3-check .m3-switch { order: 2; }


/* =========================================================
   CHIPS
   Filter chip (toggles, e.g. directory filters):
     <label class="m3-chip m3-chip--filter">
       <input type="checkbox" name="focus" value="research"> Research
     </label>
   Input chip (removable, e.g. chosen tags):
     <span class="m3-chip m3-chip--input">Policy
       <button type="button" class="m3-chip__remove" data-m3-chip-remove
         aria-label="Remove Policy">×</button></span>
   Wrap a set in <div class="m3-chip-set">.
   ========================================================= */
.m3-chip-set {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.m3-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 32px;
  padding: 0 1rem;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-label-large);
  cursor: pointer;
  user-select: none;
}
.m3-chip input {
  /* Visually hidden but still focusable/announced */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.m3-chip:focus-within:has(input:focus-visible) {
  outline: 2px solid var(--md-sys-color-focus-ring);
  outline-offset: 2px;
}
.m3-chip--filter:has(input:checked) {
  background: var(--md-sys-color-primary-container);
  border-color: transparent;
  color: var(--md-sys-color-on-primary-container);
  padding-left: 0.5rem;
}
.m3-chip--filter:has(input:checked)::after {
  /* Leading checkmark when selected */
  content: "";
  order: -1;
  width: 18px;
  height: 18px;
  background: currentColor;
  clip-path: polygon(14% 44%, 0 59%, 39% 96%, 100% 25%, 85% 11%, 38% 66%);
  transform: scale(0.75);
}
.m3-chip--input {
  padding-right: 0.25rem;
  cursor: default;
}
.m3-chip__remove {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.m3-chip__remove:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.m3-chip__remove:focus-visible {
  outline: 2px solid var(--md-sys-color-focus-ring);
  outline-offset: 1px;
}


/* =========================================================
   CARDS
   <article class="m3-card m3-card--outlined">…</article>
   Variants: --elevated, --filled, --outlined. Add
   .m3-card--interactive to an <a> or <button> card (e.g. a directory
   card that opens a profile) for hover/focus states.
   ========================================================= */
.m3-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  padding: 1rem;
  text-align: left;
  text-decoration: none;
}
.m3-card--elevated {
  background: var(--md-sys-color-surface-container-low);
  box-shadow: var(--md-sys-elevation-1);
}
.m3-card--filled { background: var(--md-sys-color-surface-container-highest); }
.m3-card--outlined { border: 1px solid var(--md-sys-color-outline-variant); }
.m3-card--interactive { cursor: pointer; }
.m3-card--elevated.m3-card--interactive:hover { box-shadow: var(--md-sys-elevation-2); }

.m3-card__media {
  margin: -1rem -1rem 1rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: calc(100% + 2rem);
  max-width: none;
  border-radius: var(--md-sys-shape-corner-medium) var(--md-sys-shape-corner-medium) 0 0;
}
.m3-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.m3-card__title { font: var(--md-sys-typescale-title-medium); margin: 0; }
.m3-card__subtitle {
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0;
}
.m3-card__body {
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 1rem;
}
.m3-card .m3-actions { margin-top: auto; }

/* Avatar: <span class="m3-avatar">JD</span> or <img class="m3-avatar"> */
.m3-avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font: var(--md-sys-typescale-title-medium);
}
.m3-avatar--large { width: 96px; height: 96px; font: var(--md-sys-typescale-headline-medium); }

/* Responsive grid for card listings (directory, webinars…) */
.m3-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 1rem;
}


/* =========================================================
   DIVIDER, LINEAR PROGRESS
   ========================================================= */
.m3-divider {
  border: 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  margin: 1.5rem 0;
}

/* <div class="m3-progress" role="progressbar" aria-label="Saving"></div>
   Indeterminate by default; set style="--value: 40%" for determinate. */
.m3-progress {
  position: relative;
  height: 4px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  overflow: hidden;
}
.m3-progress::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value, 40%);
  border-radius: inherit;
  background: var(--md-sys-color-primary);
}
.m3-progress:not([style*="--value"])::after {
  animation: m3-progress-indeterminate 1.6s var(--md-sys-motion-easing-standard) infinite;
}
@keyframes m3-progress-indeterminate {
  0%   { left: -40%; }
  100% { left: 100%; }
}


/* =========================================================
   DIALOG (native <dialog>)
   <button data-m3-dialog-open="delete-dialog">Delete account</button>
   <dialog class="m3-dialog" id="delete-dialog" aria-labelledby="dd-t">
     <h2 class="m3-dialog__headline" id="dd-t">Delete your account?</h2>
     <div class="m3-dialog__content">…</div>
     <div class="m3-actions m3-actions--end">
       <button class="m3-button m3-button--text" data-m3-dialog-close>Cancel</button>
       <button class="m3-button m3-button--danger">Delete</button>
     </div>
   </dialog>
   ========================================================= */
.m3-dialog {
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: 1.5rem;
  border: 0;
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-3);
}
.m3-dialog[open] {
  animation: m3-dialog-in var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized-decelerate);
}
.m3-dialog::backdrop {
  background: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
}
.m3-dialog__headline {
  font: var(--md-sys-typescale-headline-small);
  margin: 0 0 1rem;
}
.m3-dialog__content {
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 1.5rem;
}
.m3-dialog__content p { margin: 0 0 0.75rem; }
@keyframes m3-dialog-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}


/* =========================================================
   SNACKBAR — created by M3UI.snackbar("Profile saved") in
   member-ui.js; no markup needed.
   ========================================================= */
.m3-snackbar {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 48px;
  max-width: min(560px, calc(100vw - 2rem));
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  font: var(--md-sys-typescale-body-medium);
  box-shadow: var(--md-sys-elevation-3);
  transform: translate(-50%, 1rem);
  opacity: 0;
  transition:
    transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized-decelerate),
    opacity var(--md-sys-motion-duration-short) linear;
}
.m3-snackbar--visible { transform: translate(-50%, 0); opacity: 1; }
.m3-snackbar__text { flex: 1; padding: 0.375rem 0; }
.m3-snackbar .m3-button--text { color: var(--md-sys-color-inverse-primary); }
/* Prominent variant, now used by every snackbar: larger, with an icon.
   Tones: success (brand olive), error (red), info (warm grey, default). */
.m3-snackbar--prominent {
  width: max-content;   /* use the full max-width before wrapping */
  bottom: 2rem;
  gap: 0.875rem;
  min-height: 64px;
  max-width: min(640px, calc(100vw - 2rem));
  padding: 0.875rem 0.625rem 0.875rem 1.25rem;
  border-radius: var(--md-sys-shape-corner-medium);
  font: var(--md-sys-typescale-body-large);
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.18);
  transform: translate(-50%, 1.5rem) scale(0.96);
}
.m3-snackbar--prominent.m3-snackbar--visible { transform: translate(-50%, 0) scale(1); }
.m3-snackbar--success {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}
.m3-snackbar--error {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}
/* Neutral notes and validation hints (the default tone): warm grey,
   same size as success/error so nothing shows as the small black bar. */
.m3-snackbar--info {
  background: color-mix(in srgb, var(--charcoal) 45%, var(--taupe));
  color: var(--paper);
}
.m3-snackbar__icon { display: flex; flex: none; }
.m3-snackbar--prominent .m3-button--text {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
@media (prefers-reduced-motion: reduce) {
  .m3-snackbar--prominent,
  .m3-snackbar--prominent.m3-snackbar--visible { transform: translate(-50%, 0); }
}


/* =========================================================
   PAGE SCAFFOLD for member pages
   <main class="m3-page"> … <section class="m3-panel"> …
   ========================================================= */
.m3-page {
  background: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  font: var(--md-sys-typescale-body-large);
  padding-block: clamp(2rem, 6vw, 4rem);
}
/* On pages with the fixed site header, keep its offset as well. */
.main--offset.m3-page {
  padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 4rem));
}
.m3-page__inner {
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.m3-panel {
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  padding: clamp(1.25rem, 4vw, 2rem);
  margin-bottom: 1.5rem;
}
.m3-panel__title {
  font: var(--md-sys-typescale-title-large);
  margin: 0 0 1.25rem;
}


/* =========================================================
   BANNERS — inline messages (success, error, info, warning)
   <div class="m3-banner m3-banner--error" role="alert">…</div>
   Hidden with the `hidden` attribute until needed.
   ========================================================= */
.m3-banner {
  display: block;
  padding: 0.875rem 1rem;
  margin: 0 0 1.25rem;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  font: var(--md-sys-typescale-body-medium);
}
.m3-banner[hidden] { display: none; }
.m3-banner strong { font-weight: 700; }
.m3-banner a,
.m3-banner .m3-link { color: inherit; }
.m3-banner--success,
.m3-banner--info {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.m3-banner--warning {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
.m3-banner--error {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}


/* =========================================================
   TEXT LINKS, STATUS BADGES, NARROW (AUTH) PAGES
   ========================================================= */
.m3-link {
  color: var(--md-sys-color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.m3-link:hover { text-decoration-thickness: 2px; }
.m3-link:focus-visible {
  outline: 2px solid var(--md-sys-color-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* <span class="m3-status m3-status--pending">Pending approval</span> */
.m3-status {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 0.6rem;
  border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-medium);
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
}
.m3-status--approved {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.m3-status--pending {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
.m3-status--suspended {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

/* Narrow single-column layout for sign up / log in / password pages. */
.m3-page__inner--narrow { max-width: 34rem; }
/* Your Account: 40px wider than the other narrow pages (544 → 584px). */
[data-auth-page="account"] .m3-page__inner--narrow { max-width: 36.5rem; }
/* Your Account on computer screens: wider page, two columns. "Your
   profile" is the wide left column; the shorter panels stack on the
   right (top group above, bottom group below). Phones and tablets keep
   the single narrow column in the original panel order. */
@media (min-width: 960px) {
  [data-auth-page="account"] .m3-page__inner--narrow { max-width: 76rem; }
  .acct-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "main top"
      "main bottom";
    column-gap: 1.5rem;
    align-items: start;
  }
  .acct-main { grid-area: main; min-width: 0; }
  .acct-side--top { grid-area: top; }
  .acct-side--bottom { grid-area: bottom; }
  /* The right column is narrow: let action buttons wrap. */
  .acct-side .m3-actions { flex-wrap: wrap; }
  /* The profile column is wide again: paired fields sit side by side
     (they stay one per line in the narrow side column and on phones). */
  [data-auth-page="account"] .acct-main .m3-field-row { grid-template-columns: 1fr 1fr; }
}
.m3-auth-title { font: var(--md-sys-typescale-headline-medium); margin: 0 0 0.5rem; }
.m3-auth-lede {
  font: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 1.75rem;
}
.m3-auth-footer {
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
  margin: 1.5rem 0 0;
  text-align: center;
}
.m3-auth-footer p { margin: 0 0 0.5rem; }
.m3-form--auth .m3-button[type="submit"] { width: 100%; min-height: 44px; }
.m3-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  font: var(--md-sys-typescale-label-medium);
  color: var(--md-sys-color-on-surface-variant);
}
.m3-or::before, .m3-or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* Read-only detail list (account page) */
.m3-details { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 1.25rem; font: var(--md-sys-typescale-body-medium); }
.m3-details dt { color: var(--md-sys-color-on-surface-variant); }
.m3-details dd { margin: 0; color: var(--md-sys-color-on-surface); overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .m3-details { grid-template-columns: 1fr; gap: 0.15rem; }
  .m3-details dd { margin-bottom: 0.6rem; }
}

/* Page is hidden until the login check finishes, so logged-out
   visitors never see a flash of member content. */
[data-m3-auth-gate] { visibility: hidden; }
[data-m3-auth-gate].is-ready { visibility: visible; }


/* =========================================================
   ADMIN — member review list (admin-members.html)
   ========================================================= */
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.admin-toolbar .m3-field { margin: 0; flex: 1 1 18rem; max-width: 26rem; }
.admin-filters .m3-chip { gap: 0.4rem; }
.admin-filters .m3-chip__count {
  font: var(--md-sys-typescale-label-small);
  opacity: 0.8;
}
.admin-list { display: grid; gap: 0.75rem; }
.admin-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.admin-row__main { display: flex; gap: 0.875rem; align-items: flex-start; min-width: 0; flex: 1 1 20rem; }
.admin-row__info { min-width: 0; }
.admin-row__info .m3-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.admin-row__email { font: var(--md-sys-typescale-body-medium); overflow-wrap: anywhere; }
.admin-row__meta {
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0.35rem 0 0;
}
.admin-row__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}
@media (max-width: 640px) {
  .admin-row__side { align-items: flex-start; width: 100%; padding-left: 3.375rem; }
}
.admin-tag { height: 20px; font: var(--md-sys-typescale-label-small); }
.admin-ok { color: var(--md-sys-color-primary); font-weight: 600; }
.admin-warn { color: var(--md-sys-color-tertiary); font-weight: 600; }
.admin-empty {
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
  padding: 2rem 1rem;
  margin: 0;
}


/* Manage members: "Members" / "Leadership Circle invites" tabs */
.admin-tabs {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  overflow-x: auto;
}
.admin-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-title-small);
  white-space: nowrap;
  cursor: pointer;
}
.admin-tabs__tab:hover { color: var(--md-sys-color-on-surface); }
.admin-tabs__tab[aria-selected="true"] {
  color: var(--md-sys-color-primary);
  border-bottom-color: var(--md-sys-color-primary);
}
.admin-tabs__tab:focus-visible {
  outline: 2px solid var(--md-sys-color-focus-ring);
  outline-offset: -2px;
}
.admin-tabs__count {
  font: var(--md-sys-typescale-label-small);
  padding: 0.1rem 0.45rem;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.admin-tabs__count[hidden] { display: none; }

/* Invites tab */
.invite-form {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}
.invite-form .m3-actions { margin-top: 0.25rem; }
.invite-row .m3-avatar { flex: none; }

/* Header/footer member links: see "MEMBER LINKS" in css/style.css. */


/* Account page: Leadership Circle details (account.html #profile-form) */
.ld-group { margin: 0.25rem 0 1rem; }
#profile-form .m3-field[hidden] { display: none; }
.ld-group .m3-label-large { margin: 0 0 0.5rem; }
.ld-error { color: var(--md-sys-color-error); margin: 0.5rem 0 0; }
#profile-form .m3-check { margin: 0.5rem 0 1.25rem; }

/* Admin page: membership type (filter, tag, change) + Leadership Circle details */
.admin-type-filters { margin: 0 0 1rem; }
.admin-type-tag--leader { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.admin-type { display: inline-flex; align-items: center; gap: 0.5rem; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.admin-type__select {
  font: var(--md-sys-typescale-body-medium);
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small, 8px);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}
.admin-details { margin-top: 0.5rem; }
.admin-details summary { cursor: pointer; font: var(--md-sys-typescale-body-medium); width: fit-content; }
.admin-details__list { margin: 0.75rem 0 0.25rem; }
.admin-details__list dd { overflow-wrap: anywhere; white-space: pre-line; }
.admin-details__links { display: flex; flex-direction: column; gap: 0.15rem; }

/* Account page: social media links as a list of fields (matches the form) */
.ld-hint { margin: -0.25rem 0 0.75rem; color: var(--md-sys-color-on-surface-variant); }
.ld-social-row { display: flex; align-items: flex-start; gap: 0.5rem; }
.ld-social-row .m3-field { flex: 1 1 auto; margin-bottom: 0.75rem; }
.ld-social-row .m3-icon-button { margin-top: 0.4rem; flex: none; }
.ld-social-add { margin-top: -0.25rem; }
.ld-social-row .m3-icon-button[hidden],
.ld-social-add[hidden] { display: none; }

/* Read-only fields (e.g. the login email on the account page): shown
   as information, not something to type in. */
.m3-field:has(.m3-field__input[readonly]) { --m3-field-bg: var(--md-sys-color-surface-container); }
.m3-field__input[readonly] {
  color: var(--md-sys-color-on-surface-variant);
  cursor: default;
}
.m3-field__input[readonly]:focus { outline: none; }

/* Account page: Your profile */
.pf-intro { color: var(--md-sys-color-on-surface-variant); margin: 0 0 1.25rem; }
.pf-heading { margin: 1.75rem 0 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--md-sys-color-outline-variant, rgba(30,24,21,0.12)); }
#profile-form .pf-heading:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#profile-form [data-leader-only][hidden],
#profile-form .ld-group[hidden],
.pf-tags__chips[hidden] { display: none; }
.pf-tags__chips { margin-bottom: 0.75rem; }
.pf-privacy { margin: 0.5rem 0 1rem; color: var(--md-sys-color-on-surface-variant); }
.pf-logo { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.pf-logo__preview {
  width: 120px; height: 120px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--md-sys-color-outline, rgba(30,24,21,0.25));
  border-radius: 12px; background: var(--md-sys-color-surface, #fff); overflow: hidden;
}
.pf-logo__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pf-logo__preview img[hidden], .pf-logo__empty[hidden] { display: none; }
.pf-logo__empty { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); text-align: center; padding: 0.5rem; }
.pf-logo__actions { flex: 1 1 14rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pf-logo__actions .ld-hint { flex-basis: 100%; margin: 0.25rem 0 0; }
.pf-logo__actions label.m3-button { cursor: pointer; }
.pf-logo__actions label.is-busy { opacity: 0.6; pointer-events: none; }
.pf-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
#pf-logo-file:focus-visible + label { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
#profile-form select.m3-field__input:disabled ~ .m3-field__label { opacity: 0.6; }
/* Profile image (account page): leaders' photo is round, members'
   initiative image is 3:2. */
.pf-photo__preview { border-style: solid; background: var(--sand, #eee); }
.pf-photo__preview img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.pf-photo__preview--round { border-radius: 50%; }
.pf-photo__preview--wide { width: 180px; height: 120px; }
#pf-photo-file:focus-visible + label { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
#profile-form [data-member-only][hidden],
#profile-form [data-leader-only][hidden] { display: none; }
.admin-details__photo { width: 144px; height: 96px; object-fit: cover; border-radius: 8px; }
.admin-details__photo--round { width: 96px; height: 96px; border-radius: 50%; }
/* Manage Members: avatar shows the profile image, else the logo. */
.admin-avatar { overflow: hidden; }
.admin-avatar img { width: 100%; height: 100%; display: block; }
.admin-avatar--photo img { object-fit: cover; }
.admin-avatar--logo { background: #fff; border: 1px solid rgba(30,24,21,0.12); }
.admin-avatar--logo img { object-fit: contain; padding: 4px; }
.admin-details__logo { max-width: 96px; max-height: 96px; object-fit: contain; border-radius: 8px; background: #fff; }

/* =========================================================
   LEADERSHIP DIRECTORY (leaders/directory.html, leaders/profile.html)
   js/leader-directory.js fills these in.
   ========================================================= */
.ld-page .m3-page__inner { max-width: 1120px; }
/* Buttons, the filter bar etc. set their own display; keep [hidden] hidden. */
.ld-page [hidden] { display: none !important; }
.ld-page .m3-page__inner--narrow { max-width: 46rem; }

/* 401 – Not authorized */
.ld-denied { max-width: 34rem; margin: 0 auto; text-align: center; }
.ld-denied__code {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 10vw, 5rem);
  line-height: 1;
  color: var(--olive-t1);
}
.ld-denied .m3-body-medium { margin: 0.75rem 0 1.5rem; color: var(--md-sys-color-on-surface-variant); }
.ld-denied .m3-actions { justify-content: center; flex-wrap: wrap; }

/* Heading */
.ld-head { margin-bottom: 1.75rem; }
.ld-title {
  font-family: var(--font-display);
  font-weight: var(--font-heading-weight);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.2;
  margin: 0 0 0.5rem;
}
.ld-lede { margin: 0; color: var(--md-sys-color-on-surface-variant); }

/* Search + filters: search full width, then the four selects */
.ld-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}
.ld-filters__search { grid-column: 1 / -1; }
.ld-filters .m3-field { margin-bottom: 1rem; }
@media (min-width: 860px) {
  .ld-filters { grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); }
  .ld-filters__search { grid-column: auto; }
}
.ld-filters input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.ld-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  margin: 0.25rem 0 1rem;
}
.ld-count { margin: 0; color: var(--md-sys-color-on-surface-variant); font-size: 0.95rem; }

/* Cards */
.ld-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .ld-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ld-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ld-card { display: flex; }
.ld-card__link {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  width: 100%;
  padding: 1.1rem;
  background: var(--paper);
  border: 1px solid rgba(30,24,21,0.12);
  border-radius: 14px;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ld-card__link:hover {
  border-color: var(--olive-t1);
  box-shadow: 0 6px 18px rgba(14,29,44,0.08);
  transform: translateY(-1px);
}
.ld-card__link:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; }
.ld-card__logo,
.lp-logo {
  flex: none;
  width: 4rem;
  height: 4rem;
  border-radius: 12px;
  border: 1px solid rgba(30,24,21,0.1);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ld-card__logo img,
.lp-logo img { width: 100%; height: 100%; object-fit: contain; padding: 0.35rem; }
/* A leader's photo replaces the logo square with a circle. */
.ld-card .ld-card__logo--photo,
.lp-head .lp-logo--photo { border-radius: 50%; border-color: transparent; background: var(--sand, #eee); }
.ld-card__logo--photo img,
.lp-logo--photo img { object-fit: cover; padding: 0; }
/* The organization's logo, small, next to the organization's name. */
.lp-org-logo { display: inline-flex; align-items: center; gap: 0.6rem; }
.lp-org-logo img { width: 2.25rem; height: 2.25rem; object-fit: contain; border: 1px solid rgba(30,24,21,0.1); border-radius: 6px; background: #fff; padding: 0.15rem; }
.ld-card__logo--initials,
.lp-logo--initials {
  background: linear-gradient(160deg, var(--olive-t2) 0%, var(--olive) 100%);
  border-color: transparent;
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
}
.ld-card__body { min-width: 0; }
.ld-card__name {
  font-family: var(--font-display);
  font-weight: var(--font-heading-weight);
  font-size: 1.05rem;
  line-height: 1.25;
  margin: 0.1rem 0 0.25rem;
}
.ld-card__link:hover .ld-card__name { color: var(--olive-s1); }
.ld-card__role,
.ld-card__org { margin: 0; font-size: 0.92rem; color: var(--charcoal); line-height: 1.4; }
.ld-card__org { font-weight: 600; }
.ld-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
}
.ld-card__type {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(70,89,37,0.12);
  color: var(--olive-s1);
  font-weight: 700;
}
.ld-card__place { color: var(--taupe); align-self: center; }
@media (prefers-reduced-motion: reduce) {
  .ld-card__link { transition: none; }
  .ld-card__link:hover { transform: none; }
}

/* Empty / no results */
.ld-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--stone);
  border-radius: 14px;
  color: var(--md-sys-color-on-surface-variant);
}
.ld-empty .m3-title-medium { margin: 0 0 0.35rem; color: var(--md-sys-color-on-surface); }
.ld-empty .m3-body-medium { margin: 0; }

/* Pages */
.ld-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 2rem;
}
.ld-pager__btn { min-width: 2.75rem; }
.ld-pager__btn:disabled { opacity: 0.4; cursor: default; }

.ld-self { margin: 2.5rem 0 0; text-align: center; color: var(--md-sys-color-on-surface-variant); }
.ld-self a { color: var(--olive-s1); text-decoration: underline; text-underline-offset: 0.18em; }

/* Profile */
.lp-back { margin: 0 0 1.25rem; }
.lp-back a { font-weight: 700; color: var(--olive-s1); }
.lp-back a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.lp-head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; }
.lp-logo { width: 6rem; height: 6rem; border-radius: 16px; }
.lp-logo--initials { font-size: 1.9rem; }
.lp-head .about-eyebrow { margin-bottom: 0.35rem; }
.lp-name {
  font-family: var(--font-display);
  font-weight: var(--font-heading-weight);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  line-height: 1.2;
  margin: 0;
}
.lp-details {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  border-top: 1px solid var(--sand);
}
.lp-details dt {
  margin: 1rem 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive);
}
.lp-details dd { margin: 0; color: var(--ink); line-height: 1.5; }
@media (min-width: 640px) {
  .lp-details { grid-template-columns: 12rem 1fr; column-gap: 1.5rem; }
  .lp-details dt { margin: 0; padding: 0.9rem 0; border-bottom: 1px solid var(--sand); }
  .lp-details dd { padding: 0.9rem 0; border-bottom: 1px solid var(--sand); }
}
.lp-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* Bio and initiative description keep the leader's line breaks. */
.lp-long { white-space: pre-line; }
.lp-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.lp-links a { overflow-wrap: anywhere; }
.lp-tag {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(70,89,37,0.1);
  color: var(--olive-s1);
  font-size: 0.88rem;
  font-weight: 600;
}
@media (max-width: 480px) {
  .lp-head { flex-direction: column; align-items: flex-start; }
}

/* Profile on computer screens: wider page, two columns. Left: photo,
   name and key facts (label above value). Right: bio, description and
   tags, with a light rule between the columns. */
.lp-main .lp-details { border-top: 0; }
@media (min-width: 960px) {
  .ld-page .lp-inner { max-width: 72rem; }
  .lp-card {
    display: grid;
    grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
    gap: 0 clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .lp-card--single { grid-template-columns: minmax(0, 40rem); }
  .lp-side .lp-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .lp-side .lp-logo { width: 8rem; height: 8rem; }
  .lp-details--side { grid-template-columns: 1fr; }
  .lp-details--side dt { margin: 0; padding: 0.85rem 0 0.2rem; border-bottom: 0; }
  .lp-details--side dd { padding: 0 0 0.85rem; border-bottom: 1px solid var(--sand); }
  .lp-main {
    padding-left: clamp(2rem, 4vw, 3.5rem);
    border-left: 1px solid var(--sand);
    min-height: 100%;
  }
  .lp-details--main { grid-template-columns: 1fr; }
  .lp-details--main dt { margin: 0; padding: 1.25rem 0 0.4rem; border-bottom: 0; }
  .lp-details--main dt:first-child { padding-top: 0; }
  .lp-details--main dd { padding: 0 0 1.25rem; border-bottom: 1px solid var(--sand); font-size: 1.02rem; line-height: 1.6; }
  .lp-details--main dd:last-child { border-bottom: 0; }
}

/* LEADERSHIP DIRECTORY: MULTI-SELECT FILTERS
   A button that looks like the other fields and opens a checkbox list.
   js/leader-directory.js builds the options. */
.ld-multi__btn {
  text-align: left;
  cursor: pointer;
  padding-right: 2.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314231A' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1rem;
}
.ld-multi__btn[aria-expanded="true"] { border-color: var(--md-sys-color-primary); }
.ld-multi.is-active .ld-multi__btn { border-color: var(--olive); font-weight: 600; }
.ld-multi .m3-field__label {
  transform: translateY(-1.15rem) scale(0.8);
  color: var(--md-sys-color-on-surface-variant);
}
.ld-multi__panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 30;
  min-width: 100%;
  width: max-content;
  max-width: min(22rem, calc(100vw - 2rem));
  background: var(--paper);
  border: 1px solid rgba(30,24,21,0.15);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(14,29,44,0.16);
  padding: 0.5rem 0 0;
}
.ld-multi__options { max-height: 17rem; overflow-y: auto; padding: 0 0.85rem; }
.ld-multi__options .m3-check { margin: 0; padding: 0.4rem 0; cursor: pointer; }
.ld-multi__foot {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-top: 1px solid var(--sand);
  margin-top: 0.35rem;
}
/* The last filter opens leftwards on wide screens so it stays on the page. */
@media (min-width: 860px) {
  .ld-multi[data-filter="expertise"] .ld-multi__panel { left: auto; right: 0; }
}

/* =========================================================
   ADMIN — Manage resources (admin-resources.html)
   Reuses the member review list styles above.
   ========================================================= */
.ar-page [hidden] { display: none !important; }
.ar-row__thumb {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--olive-t2) 0%, var(--olive) 100%);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.4rem;
}
.ar-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ar-row__desc { margin: 0.4rem 0 0; font: var(--md-sys-typescale-body-medium); }
.ar-dialog { width: min(40rem, calc(100vw - 2rem)); }
.ar-dialog .m3-dialog__content { max-height: 70vh; overflow-y: auto; padding-top: 0.75rem; }
.ar-dialog .m3-chip-set { flex-wrap: wrap; }
.ar-thumb { width: 96px; height: 96px; }
.ar-thumb img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.ar-spacer { flex: 1; }
.ar-error { color: var(--md-sys-color-error); margin: 0.5rem 0 0; }
.ar-submitter { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); margin: 0; }

/* =========================================================
   ACCOUNT — leader profile review (supabase/011_profile_changes.sql)
   ========================================================= */
.pf-review-note { color: var(--md-sys-color-on-surface-variant); margin: -0.25rem 0 1rem; }
.pf-review-note[hidden] { display: none; }
.pf-review { border-left: 4px solid var(--md-sys-color-primary); }
.pf-review--declined { border-left-color: var(--md-sys-color-error, #b3261e); }
.pf-review__title { margin: 0 0 0.25rem; font-weight: 700; }
.pf-review__text { margin: 0 0 0.5rem; }
.pf-review__list { margin: 0 0 0.5rem; padding-left: 1.2rem; }
.pf-review__list li { margin: 0.15rem 0; overflow-wrap: anywhere; }
.pf-review .m3-button { margin-left: -0.75rem; }
.pf-logo__preview { position: relative; }
.pf-logo__preview.is-pending::after {
  content: "Waiting for review";
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0.2rem 0.25rem;
  font: 600 0.68rem/1.2 var(--font-display, sans-serif);
  text-align: center;
  color: var(--md-sys-color-on-primary, #fff);
  background: var(--md-sys-color-primary, #465925);
}

/* =========================================================
   ADMIN — Profile changes (admin-profile-changes.html)
   ========================================================= */
.pc-page [hidden] { display: none !important; }
.pc-list { display: grid; gap: 1rem; }
.pc-card {
  border: 1px solid var(--md-sys-color-outline-variant, rgba(30,24,21,0.15));
  border-radius: var(--md-sys-shape-corner-large, 16px);
  padding: 1.1rem 1.25rem;
  background: var(--md-sys-color-surface, #fff);
}
.pc-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.75rem; }
.pc-card__name { margin: 0; font: var(--md-sys-typescale-title-medium); }
.pc-card__meta { margin: 0; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.pc-badge {
  display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 999px;
  font: 600 0.72rem/1.4 var(--font-display, sans-serif);
  background: var(--md-sys-color-primary-container, #dfe8cc); color: var(--md-sys-color-on-primary-container, #1e1815);
}
.pc-diff { width: 100%; border-collapse: collapse; font: var(--md-sys-typescale-body-medium); margin-bottom: 0.75rem; }
.pc-diff th, .pc-diff td { text-align: left; vertical-align: top; padding: 0.45rem 0.6rem; border-top: 1px solid var(--md-sys-color-outline-variant, rgba(30,24,21,0.12)); overflow-wrap: anywhere; }
.pc-diff th { width: 22%; font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
.pc-diff thead th { border-top: 0; font: var(--md-sys-typescale-label-medium); text-transform: uppercase; letter-spacing: 0.04em; }
.pc-diff .pc-old { color: var(--md-sys-color-on-surface-variant); }
.pc-diff .pc-new { font-weight: 600; }
.pc-diff img { max-width: 96px; max-height: 96px; border-radius: 8px; display: block; background: var(--md-sys-color-surface-container); }
.pc-diff .pc-round { border-radius: 50%; }
.pc-empty { color: var(--md-sys-color-on-surface-variant); }
.pc-note { margin: 0 0 0.75rem; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
@media (max-width: 600px) {
  .pc-diff thead { display: none; }
  .pc-diff tr { display: grid; grid-template-columns: 1fr 1fr; }
  .pc-diff th { grid-column: 1 / -1; width: auto; padding-bottom: 0; }
  .pc-diff td { border-top: 0; }
}
.pc-edit-grid { display: grid; gap: 0.25rem; }