/* WMF Business Club portal — compiled stylesheet.
   Component-based, so no build step is required to ship the UI.
   Tokens read from the site's live Elementor global kit. */

#wmf-portal{
  --navy:#0C4166; --navy-700:#0A3552; --red:#DE2028; --red-700:#B5171E; --red-050:#FCE9EA;
  --green:#0E8E49; --green-text:#0B7038; --green-050:#E7F4ED; --teal:#12444F;
  --gold:#E5AC58; --gold-050:#FBF1E2; --gold-text:#8A5F16;
  --ground:#FAF7F2; --surface:#FFFFFF; --surface-2:#F4F0E9;
  --line:#E1DED3; --line-strong:#CFC9B9;
  --ink:#1F2A31; --ink-2:#3D4A52; --muted:#5C5C5C; --muted-soft:#7A7A7A;
  --radius:10px; --radius-sm:6px;
  --shadow:0 1px 2px rgba(12,65,102,.06), 0 10px 28px -20px rgba(12,65,102,.35);
  --focus:0 0 0 3px rgba(12,65,102,.28);
  font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink); font-size:15px; line-height:1.6;
}
@media (prefers-color-scheme:dark){
  #wmf-portal:not([data-theme="light"]){
    --navy:#8FBEDC; --navy-700:#B5D6EC; --red:#F2565D; --red-700:#F8878C; --red-050:#3A1A1C;
    --green:#43B478; --green-text:#5CC68C; --green-050:#132A20; --teal:#6FA8B5;
    --gold:#E9BC75; --gold-050:#2E2415; --gold-text:#E9BC75;
    --ground:#0B1C26; --surface:#102733; --surface-2:#173241;
    --line:#1F4356; --line-strong:#2B5870;
    --ink:#E9F0F4; --ink-2:#C3D2DA; --muted:#93A6B1; --muted-soft:#7D909B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -20px rgba(0,0,0,.8);
    --focus:0 0 0 3px rgba(143,190,220,.35);
  }
}
#wmf-portal *,#wmf-portal *::before,#wmf-portal *::after{box-sizing:border-box}
#wmf-portal h1,#wmf-portal h2,#wmf-portal h3,#wmf-portal h4,#wmf-portal p,
#wmf-portal ul,#wmf-portal ol,#wmf-portal figure{margin:0}
#wmf-portal img{max-width:100%;height:auto}
/* Focus ring sits outside the control rather than reading as a second
   border on pale outline buttons. */
#wmf-portal :focus-visible{outline:2px solid var(--navy);outline-offset:2px;box-shadow:none}
#wmf-portal table{border-collapse:collapse;width:100%}

/* --- theme table neutraliser -----------------------------------------------
   The active theme styles every table with borders, striped rows and its own
   spacing. Portal tables must not inherit that, so everything is reset here
   and re-applied by the .wmf-tw component below. --------------------------- */
#wmf-portal table{border-collapse:collapse;width:100%;margin:0;border:0;background:transparent;
  font-size:inherit;line-height:inherit}
#wmf-portal table caption{caption-side:top;text-align:left}
#wmf-portal table tr,#wmf-portal table thead,#wmf-portal table tbody,#wmf-portal table tfoot{
  border:0;background:transparent}
#wmf-portal table th,#wmf-portal table td{border:0;background:transparent;vertical-align:middle}
#wmf-portal table tr:nth-child(even) td,#wmf-portal table tr:nth-child(odd) td{background:transparent}

/* --- key / value list -------------------------------------------------------
   Replaces the two-column tables. A definition list, not a table: no theme
   borders to fight, and it collapses cleanly on a narrow screen. ------------ */
#wmf-portal .wmf-kv{display:flex;flex-direction:column;margin:0}
#wmf-portal .wmf-kv__r{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:10px 0;border-bottom:1px solid var(--line)}
#wmf-portal .wmf-kv__r:last-child{border-bottom:0}
#wmf-portal .wmf-kv dt{margin:0;font-size:13px;color:var(--muted);flex:0 0 auto}
#wmf-portal .wmf-kv dd{margin:0;font-size:13.5px;font-weight:500;color:var(--ink);
  text-align:right;min-width:0;overflow-wrap:anywhere}
#wmf-portal .wmf-kv__r--total{border-top:1px solid var(--line-strong);border-bottom:0;
  margin-top:4px;padding-top:13px}
#wmf-portal .wmf-kv__r--total dt{font-size:13.5px;font-weight:700;color:var(--ink)}
#wmf-portal .wmf-kv__r--total dd{font-size:16px;font-weight:700;color:var(--navy)}
#wmf-portal .wmf-kv--tight .wmf-kv__r{padding:8px 0}
@media (max-width:420px){
  #wmf-portal .wmf-kv__r{flex-direction:column;gap:2px;align-items:flex-start}
  #wmf-portal .wmf-kv dd{text-align:left}
}

/* --- form-control neutraliser -----------------------------------------------
   The theme puts a bottom margin on every input, select and textarea, which is
   what opened the large gaps between fields. Controls inside the portal carry
   no margin of their own: spacing comes from the flex gap on .wmf-f and
   .wmf-stack, so it is set in one place. ----------------------------------- */
#wmf-portal input,#wmf-portal select,#wmf-portal textarea,
#wmf-portal button,#wmf-portal label,#wmf-portal fieldset,#wmf-portal form{
  margin:0;font-family:inherit}
#wmf-portal fieldset{border:0;padding:0}
#wmf-portal .wmf-f label{display:block;font-size:11.5px;line-height:1.45;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
#wmf-portal input::placeholder,#wmf-portal textarea::placeholder{color:var(--muted-soft);opacity:1}
#wmf-portal input[type=checkbox],#wmf-portal input[type=radio]{
  width:16px;height:16px;min-height:0;padding:0;margin:0;flex:none;
  accent-color:var(--navy);border-radius:3px}
#wmf-portal .wmf-check{display:inline-flex;align-items:center;gap:9px;font-size:13px;
  color:var(--muted);cursor:pointer;line-height:1.4}
/* A short list of radio choices in place of a native drop-down, whose menu
   takes the operating system's highlight colour rather than ours. */
#wmf-portal .wmf-choices{display:flex;flex-direction:column;gap:6px}
#wmf-portal .wmf-choice,#wmf-portal .wmf-f .wmf-choice{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);
  cursor:pointer;line-height:1.4;padding:9px 12px;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);background:var(--surface);text-transform:none;letter-spacing:0;font-weight:500}
#wmf-portal .wmf-f .wmf-choice:has(input:checked){border-color:var(--navy);background:rgba(12,65,102,.06)}
/* Search box above a long member list; the select beneath is the real control. */
#wmf-portal .wmf-pick{display:flex;flex-direction:column;gap:6px}
#wmf-portal .wmf-pick__q{font-size:13.5px;padding:9px 12px}
#wmf-portal .wmf-link{font-size:13px;color:var(--navy);font-weight:600;text-decoration:none}
#wmf-portal .wmf-link:hover{text-decoration:underline}
#wmf-portal a{color:var(--navy)}
#wmf-portal .wmf-btn,#wmf-portal .wmf-tab{text-decoration:none}
#wmf-portal .wmf-btn:hover{text-decoration:none}

/* band */
#wmf-portal .wmf-band{background:linear-gradient(135deg,var(--navy),var(--teal));
  border-radius:var(--radius);padding:26px 28px;color:#fff;margin-bottom:22px}
#wmf-portal .wmf-band__k{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.82}
#wmf-portal .wmf-band__t{font-size:27px;font-weight:700;margin:9px 0 7px;letter-spacing:-.01em;color:#fff}
/* The Trust asked for the blue banner's description to run the full width of
   the band rather than stopping at a reading measure. */
#wmf-portal .wmf-band__p{font-size:14px;opacity:.9;max-width:none;color:#fff}
#wmf-portal .wmf-band__p + .wmf-band__p{margin-top:8px}
#wmf-portal .wmf-back{margin:0 0 14px}
/* Name and company left, photograph right and vertically centred — the card
   face the Trust asked for on 3 September. */
#wmf-portal .wmf-vcard__who--split{display:flex;align-items:center;justify-content:space-between;gap:18px}
#wmf-portal .wmf-vcard__who--split > div:first-child{min-width:0}
#wmf-portal .wmf-vcard__who--split .wmf-av{flex:none}
#wmf-portal .wmf-band__count{display:inline-flex;align-items:center;gap:7px;margin-top:15px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);
  padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600}

/* --- scope switcher (sits inside the page band) ---------------------------- */
#wmf-portal .wmf-scopesw{display:inline-flex;align-items:center;gap:4px;margin-top:15px;flex-wrap:wrap;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:4px 4px 4px 14px}
#wmf-portal .wmf-scopesw__l{font-size:12px;font-weight:600;opacity:.85;margin-right:6px}
#wmf-portal .wmf-scopesw__b{font-size:12px;font-weight:600;color:#fff;text-decoration:none;
  padding:6px 13px;border-radius:999px;line-height:1;white-space:nowrap}
#wmf-portal .wmf-scopesw__b:hover{background:rgba(255,255,255,.18);text-decoration:none}
#wmf-portal .wmf-scopesw__b.is-on{background:#fff;color:var(--navy)}

/* buttons */
#wmf-portal .wmf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:15px;font-weight:600;line-height:1;padding:13px 26px;min-height:44px;
  border:1px solid transparent;border-radius:999px;cursor:pointer;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s}
#wmf-portal .wmf-btn--primary{background:var(--red);color:#fff}
#wmf-portal .wmf-btn--primary:hover{background:var(--red-700);color:#fff}
#wmf-portal .wmf-btn--secondary{background:var(--navy);color:var(--surface)}
#wmf-portal .wmf-btn--outline{background:transparent;color:var(--navy);border-color:var(--line-strong)}
#wmf-portal .wmf-btn--outline:hover{border-color:var(--navy);background:var(--surface-2)}
#wmf-portal .wmf-btn--ghost{background:transparent;color:var(--muted);padding:10px 16px}
#wmf-portal .wmf-btn--ghost:hover{color:var(--navy);background:var(--surface-2)}
#wmf-portal .wmf-btn--sm{font-size:13px;padding:9px 18px;min-height:38px}
#wmf-portal .wmf-btn--block{width:100%}

/* chips */
/* Chips carry business categories, and the club's own list runs to names like
   "Banking, Financial Services & Insurance (BFSI)". Held on one line with no
   width cap, a chip like that walked straight out of the card it sits in. It
   wraps now and is capped at its container; short chips are unaffected. */
#wmf-portal .wmf-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:4px 10px;border-radius:12px;border:1px solid transparent;
  max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left;line-height:1.4}
#wmf-portal .wmf-chip i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;
  align-self:flex-start;margin-top:4px}
#wmf-portal .wmf-chip--neutral{background:var(--surface-2);color:var(--muted);border-color:var(--line)}
#wmf-portal .wmf-chip--info{background:rgba(12,65,102,.09);color:var(--navy);border-color:rgba(12,65,102,.22)}
#wmf-portal .wmf-chip--ok{background:var(--green-050);color:var(--green-text);border-color:rgba(14,142,73,.28)}
#wmf-portal .wmf-chip--warn{background:var(--gold-050);color:var(--gold-text);border-color:rgba(229,172,88,.45)}
#wmf-portal .wmf-chip--crit{background:var(--red-050);color:var(--red-700);border-color:rgba(222,32,40,.28)}

/* layout */
#wmf-portal .wmf-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px}
#wmf-portal .wmf-grid{display:grid;gap:16px}
#wmf-portal .wmf-g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
#wmf-portal .wmf-g3{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
#wmf-portal .wmf-g4{grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
#wmf-portal .wmf-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;align-items:start}
@media (max-width:880px){#wmf-portal .wmf-split{grid-template-columns:minmax(0,1fr)}}
#wmf-portal .wmf-sect{margin-bottom:26px}
#wmf-portal .wmf-sect__h{display:flex;align-items:baseline;gap:12px;margin-bottom:13px;flex-wrap:wrap}
#wmf-portal .wmf-sect__h h3{font-size:16px;font-weight:700;color:var(--ink)}
#wmf-portal .wmf-sect__h .wmf-mo{font-size:12.5px;color:var(--muted)}
#wmf-portal .wmf-sect__h .wmf-more{margin-left:auto;font-size:13px;color:var(--navy);font-weight:600;text-decoration:none}
#wmf-portal .wmf-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
#wmf-portal .wmf-stack{display:flex;flex-direction:column;gap:15px}
#wmf-portal .wmf-hint{font-size:12.5px;color:var(--muted)}
#wmf-portal .wmf-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--ink)}

/* filters + fields */
#wmf-portal .wmf-filters{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:20px}
/* A field is only flexible inside the horizontal filter bar. In a column
   stack, flex-basis would set a HEIGHT floor on every field. */
#wmf-portal .wmf-f{display:flex;flex-direction:column;gap:6px;min-width:0}
#wmf-portal .wmf-filters > .wmf-f{flex:1 1 165px;min-width:150px}
#wmf-portal .wmf-f label{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
/* The asterisk carries no information a screen reader needs — the input's own
   required attribute already does — so it is hidden from the tree and left as
   a purely visual mark. */
#wmf-portal .wmf-req{color:var(--red);margin-left:2px;font-weight:700}
#wmf-portal .wmf-inp,#wmf-portal .wmf-sel,#wmf-portal .wmf-ta{font:inherit;font-size:14.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:11px 13px;width:100%}
#wmf-portal .wmf-ta{min-height:88px;resize:vertical}
#wmf-portal .wmf-dm{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
#wmf-portal .wmf-inp:focus,#wmf-portal .wmf-sel:focus,#wmf-portal .wmf-ta:focus{
  border-color:var(--navy);box-shadow:var(--focus);outline:none}

/* tiles */
#wmf-portal .wmf-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow)}
#wmf-portal .wmf-tile__l{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
#wmf-portal .wmf-tile__v{font-size:31px;font-weight:700;color:var(--navy);line-height:1.1;margin-top:8px;
  font-variant-numeric:tabular-nums}
#wmf-portal .wmf-tile__v.is-alert{color:var(--red)}
#wmf-portal .wmf-tile__s{font-size:12.5px;color:var(--muted);margin-top:6px}

/* avatar */
#wmf-portal .wmf-av{width:54px;height:54px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--navy),var(--teal));color:#fff;font-weight:700;font-size:16px;
  overflow:hidden}
#wmf-portal .wmf-av img{width:100%;height:100%;object-fit:cover}
#wmf-portal .wmf-av--sm{width:40px;height:40px;font-size:13px}
#wmf-portal .wmf-av--lg{width:86px;height:86px;font-size:26px}

/* member card */
#wmf-portal .wmf-mcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column}
#wmf-portal .wmf-mcard__top{display:flex;gap:13px;align-items:flex-start}
#wmf-portal .wmf-mcard__nm{font-size:15.5px;font-weight:700;line-height:1.25}
#wmf-portal .wmf-mcard__co{font-size:12.5px;color:var(--muted);margin-top:2px}
#wmf-portal .wmf-mcard__chips{display:flex;flex-wrap:wrap;gap:6px;margin:13px 0 9px}
#wmf-portal .wmf-mcard__role{font-size:12.5px;font-weight:600;color:var(--navy)}
/* A short paragraph on the card — four lines, then an ellipsis — with the
   full description on the profile. The Trust asked for one line on 11
   September and for a paragraph on 19 September; the second stands. */
#wmf-portal .wmf-mcard__bio{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin:7px 0 15px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* Actions stack: the profile link full width, then the two member actions
   beside each other. Only the arrangement differs from the rest of the UI —
   colours, type and button shapes are the portal's own. */
#wmf-portal .wmf-mcard__acts{display:flex;flex-direction:column;gap:8px;
  border-top:1px solid var(--line);padding-top:13px;margin-top:auto}
#wmf-portal .wmf-mcard__pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:420px){
  #wmf-portal .wmf-mcard__pair{grid-template-columns:1fr}
}

/* list rows */
#wmf-portal .wmf-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
#wmf-portal .wmf-row{display:flex;gap:15px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
#wmf-portal .wmf-row:last-child{border-bottom:0}
#wmf-portal .wmf-row__grow{flex:1;min-width:180px}
#wmf-portal .wmf-row__t{font-size:14.5px;font-weight:600}
#wmf-portal .wmf-row__m{font-size:12.5px;color:var(--muted);margin-top:3px}
#wmf-portal .wmf-date{flex:none;width:56px;text-align:center;background:var(--red-050);
  border:1px solid rgba(222,32,40,.2);border-radius:var(--radius-sm);padding:7px 0}
#wmf-portal .wmf-date__d{font-size:19px;font-weight:700;color:var(--red-700);line-height:1}
#wmf-portal .wmf-date__m{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--red-700);margin-top:3px}

/* tabs + table */
#wmf-portal .wmf-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
#wmf-portal .wmf-tab{font:inherit;font-size:13.5px;font-weight:600;background:none;border:0;
  border-bottom:2px solid transparent;color:var(--muted);padding:10px 14px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;text-decoration:none}
#wmf-portal .wmf-tab.is-on{color:var(--navy);border-bottom-color:var(--red)}
#wmf-portal .wmf-tab span{font-size:11px;background:var(--surface-2);border:1px solid var(--line);
  padding:1px 7px;border-radius:999px}
#wmf-portal .wmf-tw{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
#wmf-portal .wmf-tw table{font-size:13.5px;min-width:600px}
#wmf-portal .wmf-tw table{border-collapse:separate;border-spacing:0}
#wmf-portal .wmf-tw th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--line-strong);background:var(--surface-2)}
#wmf-portal .wmf-tw td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink-2);
  vertical-align:middle;background:transparent}
#wmf-portal .wmf-tw tbody tr:last-child td{border-bottom:0}

/* --- modal ------------------------------------------------------------------
   Native <dialog>: the browser supplies Esc, focus containment and the
   backdrop, so none of that is reimplemented here. ------------------------- */
/* Do NOT set display on .wmf-modal itself: that would override the browser's
   own dialog:not([open]){display:none} and leave every dialog visible inline.
   The layout display belongs on the [open] state only. */
#wmf-portal .wmf-modal{border:0;padding:0;color:var(--ink);background:var(--surface);
  border-radius:var(--radius);box-shadow:0 24px 64px -24px rgba(11,28,38,.5);
  width:min(560px,calc(100vw - 32px));max-height:min(86vh,860px);overflow:hidden}
#wmf-portal .wmf-modal:not([open]){display:none}
#wmf-portal .wmf-modal[open]{display:flex;flex-direction:column}
#wmf-portal .wmf-modal--sm{width:min(430px,calc(100vw - 32px))}
#wmf-portal .wmf-modal--lg{width:min(760px,calc(100vw - 32px))}
#wmf-portal .wmf-modal::backdrop{background:rgba(11,28,38,.55)}
#wmf-portal .wmf-modal[open]{animation:wmf-pop .16s ease-out}
@keyframes wmf-pop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#wmf-portal .wmf-modal[open]{animation:none}}
#wmf-portal .wmf-modal__hd{display:flex;align-items:flex-start;gap:16px;
  padding:20px 22px 15px;border-bottom:1px solid var(--line);flex:none}
#wmf-portal .wmf-modal__hd h3{font-size:17px;font-weight:700;color:var(--ink);line-height:1.3}
#wmf-portal .wmf-modal__sub{font-size:13px;color:var(--muted);margin-top:4px}
#wmf-portal .wmf-modal__xf{margin-left:auto;flex:none;display:block}
#wmf-portal .wmf-modal__x{flex:none;background:none;border:0;cursor:pointer;
  font-size:24px;line-height:1;color:var(--muted);padding:2px 7px;border-radius:var(--radius-sm)}
#wmf-portal .wmf-modal__x:hover{background:var(--surface-2);color:var(--ink)}
#wmf-portal .wmf-modal__bd{padding:20px 22px;overflow-y:auto;flex:1 1 auto}
#wmf-portal .wmf-modal__ft{margin:0;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;
  padding:15px 22px;border-top:1px solid var(--line);background:var(--surface-2);flex:none}
#wmf-portal .wmf-btn--danger{color:var(--red);border-color:rgba(222,32,40,.4)}
#wmf-portal .wmf-btn--danger:hover{background:var(--red-050);border-color:var(--red)}
#wmf-portal .wmf-modal .wmf-who{display:flex;gap:12px;align-items:center;padding-bottom:16px;
  margin-bottom:16px;border-bottom:1px solid var(--line)}
#wmf-portal .wmf-modal .wmf-who__n{font-size:15px;font-weight:700}
#wmf-portal .wmf-modal .wmf-who__r{font-size:12.5px;color:var(--muted);margin-top:2px}
@media (max-width:520px){
  #wmf-portal .wmf-modal__ft{justify-content:stretch}
  #wmf-portal .wmf-modal__ft .wmf-btn{flex:1 1 auto}
}

/* --- region breadcrumb (club drill-down) ----------------------------------- */
#wmf-portal .wmf-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 16px}
#wmf-portal .wmf-crumb{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;
  padding:3px 9px;border-radius:999px}
#wmf-portal .wmf-crumb:hover{color:var(--navy);background:var(--surface-2);text-decoration:none}
#wmf-portal .wmf-crumb.is-on{background:var(--navy);color:var(--surface)}
#wmf-portal .wmf-crumb__sep{color:var(--muted-soft);font-size:12px}

/* --- upcoming events inside a club card ------------------------------------ */
#wmf-portal .wmf-clubev{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
#wmf-portal .wmf-clubev__r{display:flex;gap:11px;align-items:baseline;font-size:13px;
  color:var(--ink-2);padding:4px 0}
#wmf-portal .wmf-clubev__d{flex:none;font-weight:700;color:var(--red-700);font-size:12px;
  min-width:52px;font-variant-numeric:tabular-nums}

/* --- form result notice ----------------------------------------------------- */
#wmf-portal .wmf-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:20px;
  border-radius:var(--radius);border:1px solid var(--line);background:var(--surface)}
#wmf-portal .wmf-alert p{font-size:13.5px;color:var(--ink-2);margin:1px 0 0}
#wmf-portal .wmf-alert>.wmf-chip{flex:none;white-space:nowrap;overflow-wrap:normal}
#wmf-portal .wmf-alert--ok{border-left:3px solid var(--green)}
#wmf-portal .wmf-alert--warn{border-left:3px solid var(--gold)}
#wmf-portal .wmf-alert--crit{border-left:3px solid var(--red)}
#wmf-portal .wmf-alert--info{border-left:3px solid var(--navy)}

/* --- pagination -------------------------------------------------------------- */
#wmf-portal .wmf-pager{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px;justify-content:center}
#wmf-portal .wmf-pager__p{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;
  min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
#wmf-portal .wmf-pager__p:hover{border-color:var(--navy);color:var(--navy);text-decoration:none}
#wmf-portal .wmf-pager__p.is-on{background:var(--navy);color:var(--surface);border-color:var(--navy)}

/* notices */
#wmf-portal .wmf-notice{border-radius:var(--radius);padding:18px 20px;border:1px solid var(--line);
  background:var(--surface)}
#wmf-portal .wmf-notice--info{border-left:3px solid var(--navy)}
#wmf-portal .wmf-notice--warn{border-left:3px solid var(--gold)}
#wmf-portal .wmf-empty{padding:40px 24px;text-align:center;color:var(--muted);background:var(--surface-2);
  border:1px dashed var(--line-strong);border-radius:var(--radius)}
#wmf-portal .wmf-empty__t{font-size:15px;font-weight:600;color:var(--ink-2);margin-bottom:6px}

/* auth + steps */
#wmf-portal .wmf-auth{max-width:396px;margin:0 auto;padding-block:clamp(8px,2vw,28px)}
#wmf-portal .wmf-auth .wmf-card{padding:28px}
#wmf-portal .wmf-auth .wmf-stack{gap:16px}
#wmf-portal .wmf-auth h2{font-size:22px;font-weight:700;margin-bottom:6px;color:var(--navy);letter-spacing:-.01em}
#wmf-portal .wmf-steps{display:flex;flex-wrap:wrap;margin-bottom:22px}
#wmf-portal .wmf-step{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);padding:0 18px 8px 0}
#wmf-portal .wmf-step i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;font-style:normal;background:var(--surface-2);
  border:1px solid var(--line-strong);color:var(--muted)}
#wmf-portal .wmf-step.is-done i{background:var(--green-050);border-color:var(--green);color:var(--green-text)}
#wmf-portal .wmf-step.is-now i{background:var(--red);border-color:var(--red);color:#fff}
#wmf-portal .wmf-step.is-now{color:var(--ink);font-weight:600}

/* membership card */
#wmf-portal .wmf-vcard{background:linear-gradient(140deg,var(--navy),var(--teal));color:#fff;border-radius:14px;
  padding:22px;max-width:400px;box-shadow:var(--shadow)}
#wmf-portal .wmf-vcard__fed{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.8;font-weight:600}
#wmf-portal .wmf-vcard__who{display:flex;gap:14px;align-items:center;margin:18px 0}
#wmf-portal .wmf-vcard__n{font-size:19px;font-weight:700;line-height:1.2}
#wmf-portal .wmf-vcard__c{font-size:12.5px;opacity:.85;margin-top:2px}
#wmf-portal .wmf-vcard__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  border-top:1px solid rgba(255,255,255,.25);padding-top:14px}
#wmf-portal .wmf-vcard__lbl{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;font-weight:600}
#wmf-portal .wmf-vcard__val{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;margin-top:3px}
#wmf-portal .wmf-qr{width:58px;height:58px;border-radius:6px;background:#fff;display:grid;place-items:center;
  color:var(--navy);font-size:8px;font-weight:700;text-align:center;line-height:1.1}

/* celebrations */
#wmf-portal .wmf-celeb{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
#wmf-portal .wmf-celeb__cap{background:linear-gradient(135deg,var(--red),#F0654B);color:#fff;padding:14px 18px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
#wmf-portal .wmf-celeb__bd{padding:16px 18px}
#wmf-portal .wmf-celeb__who{display:flex;gap:12px;align-items:center}
#wmf-portal .wmf-celeb__n{font-size:15px;font-weight:700}
#wmf-portal .wmf-celeb__r{font-size:12.5px;color:var(--muted);margin-top:2px}
#wmf-portal .wmf-celeb__msg{font-size:12.5px;color:var(--ink-2);margin:13px 0 15px;font-style:italic}

/* prototype banner */
#wmf-portal .wmf-proto{display:flex;align-items:center;gap:10px;background:var(--gold-050);
  border:1px solid rgba(229,172,88,.45);color:var(--gold-text);border-radius:var(--radius-sm);
  padding:9px 14px;font-size:12.5px;font-weight:600;margin-bottom:18px}

/* --- printing: the membership card only ------------------------------------ */
@media print {
  /* Not visibility:hidden — that hides the rest of the page but keeps its
     space, which is what pushed the card onto a second, mostly blank sheet.
     display:none removes it from the flow entirely. */
  /* Hide the site's own chrome and nothing else. Naming the wrappers a page
     was expected to have is what broke this: the theme changed, .page-content
     stopped existing, and the rule that hid everything which was not it hid
     the portal too — a blank sheet. Everything inside <main> now prints. */
  body > *:not(main) { display: none !important; }
  main > *:not(article) { display: none !important; }
  .wmf-entry__title { display: none !important; }

  #wmf-portal { padding: 0 !important; }
  #wmf-portal .wmf-noprint, #wmf-portal .wmf-proto { display: none !important; }
  #wmf-portal .wmf-split { display: block !important; }

  /* Keep the card's own colours: browsers drop backgrounds by default, which
     is what reduced it to plain text on white. */
  #wmf-portal .wmf-vcard {
    max-width: 100% !important;
    box-shadow: none !important;
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #wmf-portal .wmf-vcard * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --- invoice ---------------------------------------------------------------- */
#wmf-portal .wmf-invoice{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px;box-shadow:var(--shadow);max-width:760px}
#wmf-portal .wmf-invoice__head{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:24px;border-bottom:2px solid var(--navy)}
#wmf-portal .wmf-invoice__brand{font-size:19px;font-weight:700;color:var(--navy)}
#wmf-portal .wmf-invoice__addr{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
#wmf-portal .wmf-invoice__title{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
#wmf-portal .wmf-invoice__to{margin:24px 0}
#wmf-portal .wmf-invoice__lines{width:100%;border-collapse:collapse;margin-top:8px}
#wmf-portal .wmf-invoice__lines th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding:10px 0;border-bottom:1px solid var(--line-strong)}
#wmf-portal .wmf-invoice__lines td{padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
#wmf-portal .wmf-invoice__lines tfoot td{border-bottom:0;border-top:2px solid var(--navy);font-size:16px;color:var(--ink)}
#wmf-portal .wmf-invoice__terms{font-size:12.5px;color:var(--muted);margin-top:24px;padding-top:16px;
  border-top:1px solid var(--line);line-height:1.6}
@media print {
  #wmf-portal .wmf-invoice{border:0;box-shadow:none;padding:0;max-width:100%}
}

#wmf-portal .wmf-card[id]{scroll-margin-top:90px}

/* messages */
#wmf-portal .wmf-row--link{text-decoration:none;color:inherit;transition:background .15s}
#wmf-portal .wmf-row--link:hover{background:var(--surface-2)}
#wmf-portal .wmf-row--link.is-unread .wmf-row__t{font-weight:700;color:var(--navy)}
/* conversation */
#wmf-portal .wmf-chat__hd{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 18px;border-bottom:1px solid var(--line)}
#wmf-portal .wmf-chat__who{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
#wmf-portal .wmf-chat__id{display:flex;flex-direction:column;gap:1px;line-height:1.3}
#wmf-portal .wmf-chat__id strong{font-size:15.5px;font-weight:700;color:var(--ink)}
#wmf-portal .wmf-chat__id span{font-size:12.5px;color:var(--muted)}
#wmf-portal .wmf-chat__who:hover strong{color:var(--navy)}
#wmf-portal .wmf-chat__acts{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
#wmf-portal .wmf-chat__report:hover{color:var(--red-700);background:var(--red-050)}

/* Bottom-anchored: a short conversation sits by the composer rather than
   stranded at the top of an empty panel. */
#wmf-portal .wmf-thread{display:flex;flex-direction:column;justify-content:flex-end;
  gap:10px;padding:20px;min-height:320px;max-height:56vh;overflow-y:auto;
  background:var(--ground);border-bottom:1px solid var(--line)}
#wmf-portal .wmf-thread__none{margin:auto;text-align:center;display:flex;
  flex-direction:column;gap:6px;color:var(--muted)}
#wmf-portal .wmf-thread__none strong{font-size:15px;color:var(--ink)}
#wmf-portal .wmf-thread__none span{font-size:13.5px}
#wmf-portal .wmf-thread__day{display:flex;align-items:center;gap:12px;margin:6px 0 2px;
  color:var(--muted-soft);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
#wmf-portal .wmf-thread__day::before,
#wmf-portal .wmf-thread__day::after{content:"";flex:1;height:1px;background:var(--line)}

#wmf-portal .wmf-msg{max-width:min(72%,520px);align-self:flex-start;
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px 14px 14px 4px;padding:11px 15px;
  box-shadow:0 1px 2px rgba(12,65,102,.04)}
#wmf-portal .wmf-msg--mine{align-self:flex-end;background:var(--navy);border-color:var(--navy);
  border-radius:14px 14px 4px 14px;box-shadow:none}
#wmf-portal .wmf-msg__b{font-size:14.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
#wmf-portal .wmf-msg--mine .wmf-msg__b{color:#fff}
#wmf-portal .wmf-msg__m{font-size:11px;color:var(--muted-soft);margin-top:5px}
#wmf-portal .wmf-msg--mine .wmf-msg__m{color:rgba(255,255,255,.62)}

/* composer */
#wmf-portal .wmf-composer{display:flex;align-items:flex-end;gap:10px;padding:14px 18px}
#wmf-portal .wmf-composer textarea{flex:1;min-width:0;resize:none;font:inherit;font-size:14.5px;
  line-height:1.5;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);
  border-radius:14px;padding:11px 15px;max-height:160px}
#wmf-portal .wmf-composer textarea:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(12,65,102,.12)}
#wmf-portal .wmf-composer__go{flex:none;gap:8px;padding:12px 22px}
#wmf-portal .wmf-composer__go svg{width:17px;height:17px}
@media (max-width:520px){
  #wmf-portal .wmf-composer__go span{display:none}
  #wmf-portal .wmf-composer__go{padding:12px 15px}
}

/* ajax states */
#wmf-portal.is-loading{opacity:.55;transition:opacity .12s;pointer-events:none}
#wmf-portal .is-busy{opacity:.6;cursor:progress}
#wmf-portal .wmf-alert[data-wmf-live]{animation:wmf-in .18s ease-out}
@keyframes wmf-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  #wmf-portal.is-loading{transition:none}
  #wmf-portal .wmf-alert[data-wmf-live]{animation:none}
}

/* fee panel — the total is the anchor, the arithmetic sits under it */
#wmf-portal .wmf-fee{padding:22px}
#wmf-portal .wmf-fee__hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
#wmf-portal .wmf-fee__k{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
#wmf-portal .wmf-fee__total{background:linear-gradient(135deg,var(--navy),var(--teal));
  border-radius:var(--radius);padding:20px 22px;display:flex;flex-direction:column;gap:4px}
#wmf-portal .wmf-fee__amt{font-size:34px;font-weight:700;line-height:1.05;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
#wmf-portal .wmf-fee__cap{font-size:11.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
#wmf-portal .wmf-fee__lines{margin:16px 0 0;padding:0}
#wmf-portal .wmf-fee__lines > div{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:9px 2px;border-bottom:1px dashed var(--line)}
#wmf-portal .wmf-fee__lines > div:last-child{border-bottom:0}
#wmf-portal .wmf-fee__lines dt{font-size:13.5px;color:var(--ink-2);margin:0}
#wmf-portal .wmf-fee__lines dd{margin:0;font-size:14px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
#wmf-portal .wmf-fee__notes{list-style:none;margin:18px 0 0;padding:16px 0 0;
  border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
#wmf-portal .wmf-fee__notes li{position:relative;padding-left:24px;font-size:13px;
  line-height:1.5;color:var(--muted)}
#wmf-portal .wmf-fee__notes li::before{content:"";position:absolute;left:0;top:3px;
  width:15px;height:15px;border-radius:50%;background:var(--green-050);
  border:1px solid rgba(14,142,73,.3)}
#wmf-portal .wmf-fee__notes li::after{content:"";position:absolute;left:5px;top:7px;
  width:4px;height:7px;border:solid var(--green);border-width:0 1.6px 1.6px 0;
  transform:rotate(42deg)}
#wmf-portal .wmf-fee__cta{margin-top:18px}
#wmf-portal .wmf-fee__secure{display:flex;align-items:flex-start;gap:8px;margin-top:12px;
  font-size:12.5px;line-height:1.5;color:var(--muted)}
#wmf-portal .wmf-fee__secure svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--green)}
#wmf-portal .wmf-fee__methods{list-style:none;display:flex;flex-wrap:wrap;gap:6px;
  margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
#wmf-portal .wmf-fee__methods li{font-size:11.5px;font-weight:600;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
#wmf-portal .wmf-fee__amt{overflow-wrap:normal;word-break:keep-all}
@media (max-width:420px){ #wmf-portal .wmf-fee__amt{font-size:29px} }

/* dashboard navigation tiles */
#wmf-portal .wmf-quick{display:grid;gap:12px;margin-bottom:26px;
  grid-template-columns:repeat(auto-fill,minmax(155px,1fr))}
#wmf-portal .wmf-quick__a{position:relative;display:flex;flex-direction:column;gap:10px;
  padding:16px 16px 15px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);text-decoration:none;color:var(--ink);
  transition:border-color .15s,background .15s,transform .15s}
#wmf-portal .wmf-quick__a:hover{border-color:var(--navy);background:var(--surface-2);transform:translateY(-1px)}
#wmf-portal .wmf-quick__i{width:38px;height:38px;border-radius:10px;display:inline-flex;
  align-items:center;justify-content:center;background:rgba(12,65,102,.08);color:var(--navy)}
#wmf-portal .wmf-quick__i svg{width:21px;height:21px}
#wmf-portal .wmf-quick__t{font-size:14.5px;font-weight:600;line-height:1.25}
#wmf-portal .wmf-quick__b{position:absolute;top:12px;right:12px;min-width:20px;height:20px;
  padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-size:11.5px;
  font-weight:700;display:inline-flex;align-items:center;justify-content:center}
@media (prefers-reduced-motion:reduce){ #wmf-portal .wmf-quick__a:hover{transform:none} }
#wmf-portal .wmf-masked{color:var(--muted-soft);letter-spacing:.04em;user-select:none}

/* Membership type picker on the join form's fee panel. Two options side by
   side so both prices are visible at once; the chosen one takes the navy the
   total below it uses, so the panel reads as one thing. */
#wmf-portal .wmf-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
#wmf-portal .wmf-pick__o{position:relative;display:block;cursor:pointer}
#wmf-portal .wmf-pick__o input{position:absolute;opacity:0;width:1px;height:1px}
#wmf-portal .wmf-pick__b{display:flex;flex-direction:column;gap:3px;padding:11px 12px;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);background:#fff;
  transition:border-color .15s ease,background-color .15s ease}
#wmf-portal .wmf-pick__o:hover .wmf-pick__b{border-color:var(--line-strong)}
#wmf-portal .wmf-pick__n{font-size:13px;font-weight:600;color:var(--ink-2);line-height:1.2}
#wmf-portal .wmf-pick__p{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.2}
#wmf-portal .wmf-pick__o input:checked + .wmf-pick__b{border-color:var(--navy);background:var(--navy);}
#wmf-portal .wmf-pick__o input:checked + .wmf-pick__b .wmf-pick__n{color:rgba(255,255,255,.72)}
#wmf-portal .wmf-pick__o input:checked + .wmf-pick__b .wmf-pick__p{color:#fff}
#wmf-portal .wmf-pick__o input:focus-visible + .wmf-pick__b{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:380px){ #wmf-portal .wmf-pick{grid-template-columns:1fr} }

/* The back of the membership card: fixed artwork, sized and cornered to sit
   with the front rather than beside it as a loose image. */
#wmf-portal .wmf-vcard__back{display:block;width:100%;max-width:400px;height:auto;
  border-radius:14px;box-shadow:var(--shadow)}

/* Trust account details on a Trust event. Monospaced because an account
   number read off a screen is transcribed by hand, and a proportional font is
   where a 1 and an l get confused. */
#wmf-portal .wmf-bank{margin-top:12px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:12px 14px}
#wmf-portal .wmf-bank__k{font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
#wmf-portal .wmf-bank__d{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.55;color:var(--ink);white-space:pre-wrap;word-break:break-word}

/* The join wizard. Panels are only hidden once the script has said it is
   running (.is-wizard), so with no JavaScript every step stays on the page and
   the form is an ordinary long one rather than a broken one. */
#wmf-portal .wmf-wiz__bar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px}
#wmf-portal .wmf-wiz__s{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;
  border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12.5px;
  font-weight:600;color:var(--muted);cursor:pointer;transition:border-color .15s ease,color .15s ease}
#wmf-portal .wmf-wiz__s i{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--ground);color:var(--muted);
  font-style:normal;font-size:11.5px;font-weight:700;flex:none}
#wmf-portal .wmf-wiz__s:hover{border-color:var(--line-strong);color:var(--ink-2)}
#wmf-portal .wmf-wiz__s.is-done i{background:var(--green);color:#fff}
#wmf-portal .wmf-wiz__s.is-done{color:var(--ink-2)}
#wmf-portal .wmf-wiz__s.is-now{border-color:var(--navy);color:var(--navy);background:#fff}
#wmf-portal .wmf-wiz__s.is-now i{background:var(--navy);color:#fff}
#wmf-portal .wmf-wiz__p{border:0;margin:0;padding:0;min-width:0}
#wmf-portal form.is-wizard .wmf-wiz__p{display:none}
#wmf-portal form.is-wizard .wmf-wiz__p.is-now{display:block}
#wmf-portal .wmf-wiz__nav{display:flex;align-items:center;gap:12px;margin-top:4px;
  padding-top:16px;border-top:1px solid var(--line)}
#wmf-portal .wmf-wiz__count{margin-left:auto;font-size:12px;font-weight:600;
  color:var(--muted);font-variant-numeric:tabular-nums}
#wmf-portal .wmf-wiz__nav [hidden]{display:none}
@media (max-width:560px){
  #wmf-portal .wmf-wiz__s span{display:none}
  #wmf-portal .wmf-wiz__s{padding:8px}
}

/* --- advertising strip ------------------------------------------------------
   Paid artwork at the Trust's 3:4, plus an invitation in every empty slot so
   the band never looks abandoned. Public and identical for everyone. -------- */
#wmf-portal .wmf-ads{background:var(--red-050);border-radius:var(--radius);padding:28px 26px 26px}
/* Inside a band that already supplies the tint and the heading — the site
   footer — the strip brings only its grid. */
#wmf-portal .wmf-ads--bare{background:transparent;padding:0}
#wmf-portal .wmf-ads__h{text-align:center;margin-bottom:20px}
#wmf-portal .wmf-ads__h .wmf-band__k{color:var(--navy);opacity:1}
#wmf-portal .wmf-ads__lede{font-size:13.5px;color:var(--ink-2);margin-top:4px}
/* The track: a screenful of tiles, then scrolling. Scroll-snap does the
   carousel; the script only adds arrows, a gentle auto-advance and the
   knowledge of whether there is anything to scroll to. Without it, a reader
   can still drag or swipe. */
#wmf-portal .wmf-ads__car{position:relative}
#wmf-portal .wmf-ads__track{--wmf-ads-gap:18px;display:flex;gap:var(--wmf-ads-gap);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
  padding:6px 2px 10px;margin:-6px -2px -10px}
#wmf-portal .wmf-ads__track::-webkit-scrollbar{display:none}
#wmf-portal .wmf-ads__track > .wmf-ad{flex:0 0 calc((100% - (var(--wmf-ads-per) - 1) * var(--wmf-ads-gap)) / var(--wmf-ads-per));
  scroll-snap-align:start}
@media (max-width:1024px){ #wmf-portal .wmf-ads__track{--wmf-ads-per:3 !important} }
/* One at a time on a phone, as the Trust asked — but not the full width of
   it: a 3:4 tile as wide as the screen stands taller than the screen. The
   tile takes just over half the width and sits centred, with the neighbours
   showing at the edges, which is also how a reader learns it swipes. */
@media (max-width:560px){
  #wmf-portal .wmf-ads__track{--wmf-ads-gap:12px;scroll-padding:0 22%;padding-left:22%;padding-right:22%}
  /* 100% of the content box, which the 22% side padding has already
     narrowed to 56% of the strip — a percentage here resolves against the
     content box, not the padded one. */
  #wmf-portal .wmf-ads__track > .wmf-ad{flex:0 0 100%;scroll-snap-align:center}
  #wmf-portal .wmf-ads__nav{width:34px;height:34px;margin-top:-17px}
  #wmf-portal .wmf-ads__nav--prev{left:4px}
  #wmf-portal .wmf-ads__nav--next{right:4px}
}
#wmf-portal .wmf-ads__nav{position:absolute;top:50%;z-index:2;width:40px;height:40px;margin-top:-20px;padding:0;
  display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  background:var(--surface);color:var(--navy);border:1px solid var(--line-strong);
  box-shadow:0 2px 6px rgba(12,65,102,.12),0 10px 22px -14px rgba(12,65,102,.5);
  transition:background .15s,color .15s,opacity .15s,transform .15s}
#wmf-portal .wmf-ads__nav[hidden]{display:none}
/* A disabled button must look disabled: the meeting record's Save sits
   greyed until the photograph is chosen, and reads as clickable otherwise. */
#wmf-portal .wmf-btn:disabled,#wmf-portal .wmf-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
#wmf-portal .wmf-ads__nav svg{width:18px;height:18px}
#wmf-portal .wmf-ads__nav:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
#wmf-portal .wmf-ads__nav:disabled{opacity:.35;cursor:default;background:var(--surface);color:var(--navy);border-color:var(--line)}
/* Inside the track's edge, over the first and last tile: the band runs to
   the viewport on a wide screen, so there is no gutter to hang them in. */
#wmf-portal .wmf-ads__nav--prev{left:10px}
#wmf-portal .wmf-ads__nav--next{right:10px}
@media (prefers-reduced-motion:reduce){ #wmf-portal .wmf-ads__track{scroll-behavior:auto} }
#wmf-portal .wmf-ad{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);text-decoration:none;color:var(--ink);
  box-shadow:0 1px 2px rgba(12,65,102,.05),0 10px 24px -18px rgba(12,65,102,.45);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
#wmf-portal .wmf-ad:hover{transform:translateY(-4px);text-decoration:none;border-color:rgba(12,65,102,.35);
  box-shadow:0 2px 4px rgba(12,65,102,.06),0 18px 34px -18px rgba(12,65,102,.55)}
#wmf-portal .wmf-ad img{width:100%;height:100%;object-fit:cover;display:block}
/* The invitation: a quiet card, the mark of the club, and three lines that
   read top to bottom. No hatching — an empty slot is an offer, not a hole. */
#wmf-portal .wmf-ad--empty{border:1px dashed var(--line-strong);padding:16px 12px 14px;gap:3px;text-align:center;
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%)}
#wmf-portal .wmf-ad--empty::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 60% at 50% -10%,rgba(222,32,40,.08) 0%,rgba(222,32,40,0) 60%);pointer-events:none}
#wmf-portal .wmf-ad__i{position:relative;display:flex;align-items:center;justify-content:center;width:50px;height:50px;
  border-radius:50%;background:var(--navy);color:#fff;margin-bottom:12px;
  box-shadow:0 0 0 6px rgba(12,65,102,.08)}
#wmf-portal .wmf-ad__i svg{width:24px;height:24px}
#wmf-portal .wmf-ad--empty:hover .wmf-ad__i{background:var(--red);box-shadow:0 0 0 6px rgba(222,32,40,.12)}
#wmf-portal .wmf-ad__t{position:relative;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#wmf-portal .wmf-ad__b{position:relative;font-size:16px;font-weight:800;color:var(--navy);line-height:1.15;letter-spacing:-.01em}
#wmf-portal .wmf-ad__s{position:relative;font-size:11px;color:var(--ink-2);line-height:1.35;margin-top:5px;max-width:20ch}
#wmf-portal .wmf-ad__z{position:absolute;left:0;right:0;bottom:10px;font-size:10px;letter-spacing:.06em;color:var(--muted-soft);
  font-variant-numeric:tabular-nums}
#wmf-portal .wmf-ads__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;margin-top:24px}
#wmf-portal .wmf-ads__fee{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 16px;line-height:1.3}
#wmf-portal .wmf-ads__fee strong{color:var(--navy);font-weight:700}
/* The artwork beside its details, on the pay step and the thank-you. */
#wmf-portal .wmf-advert__preview{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:start}
#wmf-portal .wmf-advert__preview img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line)}
@media (max-width:520px){ #wmf-portal .wmf-advert__preview{grid-template-columns:1fr} }