/* =====================================================================
   ODS DIGITAL PLATFORM — Homepage mockup
   Brand tokens: change the values in :root to swap in ODS's real brand.
   ===================================================================== */
:root{
  /* --- Brand palette: derives from the per-tenant ColorTokens injected by the layout
         (--primary, --accent, --cta, …), with the ODS mockup values as fallbacks. --- */
  --ods-primary:        var(--primary, #0F4C81);
  --ods-primary-dark:   var(--primary-dark, #0A3A63);
  --ods-primary-tint:   var(--primary-tint, #E7EEF5);
  --ods-accent:         var(--accent, #1B9AAA);
  --ods-accent-dark:    var(--accent-dark, #0E7681);
  --ods-accent-tint:    var(--accent-tint, #E3F3F5);
  --ods-cta:            var(--cta, #F59E0B);
  --ods-cta-dark:       var(--cta-dark, #B7740A);
  --ods-cta-ink:        var(--cta-ink, #0A3A63);

  /* --- Neutrals --- */
  --ods-ink:            var(--ink, #1A2733);
  --ods-ink-soft:       var(--ink-soft, #56697B);
  --ods-bg:             var(--bg, #FFFFFF);
  --ods-surface:        var(--surface, #F5F8FB);
  --ods-surface-2:      var(--surface-2, #EEF3F8);
  --ods-border:         var(--border, #E1E8EF);
  --ods-success:        #0B7C57;
  --ods-error:          #B42318;

  /* --- Shape & motion --- */
  --radius:   14px;
  --radius-lg:22px;
  --radius-pill:999px;
  --shadow-sm: 0 1px 2px rgba(16,40,67,.06), 0 1px 3px rgba(16,40,67,.08);
  --shadow:    0 6px 18px rgba(16,40,67,.08), 0 2px 6px rgba(16,40,67,.06);
  --shadow-lg: 0 18px 48px rgba(16,40,67,.16);
  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color:var(--ods-ink);
  background:var(--ods-bg);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
/* Sticky footer: body is a full-height flex column, main grows to fill the gap on short/empty pages
   so the footer stays pinned to the bottom of the viewport instead of riding up under the content. */
main{ flex:1 0 auto; }
.topbar, .footer{ flex:none; }
html[dir="rtl"] body{
  font-family:'Noto Sans Arabic','Inter', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
}
img{ max-width:100%; display:block; }
a{ color:var(--ods-accent-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ line-height:1.2; margin:0 0 .5em; color:var(--ods-ink); font-weight:700; letter-spacing:-.01em; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

/* Focus visibility (keyboard) */
:focus-visible{
  outline:3px solid var(--ods-accent-dark);   /* 5.35:1 on white — passes 1.4.11 on all surfaces */
  outline-offset:2px;
  border-radius:6px;
}

/* Skip link */
.skip-link{
  position:absolute; inset-inline-start:12px; top:-60px;
  background:var(--ods-primary); color:#fff; padding:10px 16px;
  border-radius:8px; z-index:200; transition:top .2s var(--ease); font-weight:600;
}
.skip-link:focus{ top:12px; text-decoration:none; }

/* Layout helpers */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
/* Small layout utilities — replace common inline styles. */
.u-inline{ display:inline; }
.ico-15{ width:15px; height:15px; }
.u-mt-0{ margin-top:0; }
.u-m-0{ margin:0; }
.u-mb-12{ margin:0 0 12px; }
.u-mb-18{ margin-bottom:18px; }
.u-mb-22{ margin-bottom:22px; }
.u-mt-14{ margin-top:14px; }
.u-mt-18{ margin-top:18px; }
.u-narrow{ max-width:460px; margin:24px auto; text-align:center; }
.mform.u-full{ max-width:none; }
.section{ padding-block:72px; }
.section--tint{ background:var(--ods-surface); }
.section__head{ max-width:680px; margin:0 auto 44px; text-align:center; }
.eyebrow{
  display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ods-accent-dark);
  background:var(--ods-accent-tint); padding:6px 14px; border-radius:var(--radius-pill);
  margin-bottom:14px;
}
.section__head h1, .section__head h2{ font-size:clamp(1.6rem,3.2vw,2.3rem); margin-bottom:10px; }
.section__head p{ color:var(--ods-ink-soft); font-size:1.05rem; margin:0; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:.98rem; font-family:inherit; line-height:1;
  padding:13px 22px; border-radius:var(--radius-pill); border:1.5px solid transparent;
  cursor:pointer; transition:transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  white-space:nowrap; text-decoration:none;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--ods-primary); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--ods-primary-dark); }
.btn--cta{ background:var(--ods-cta); color:var(--ods-cta-ink); box-shadow:0 6px 16px rgba(245,158,11,.32); }
.btn--cta:hover{ background:var(--ods-cta-dark); color:#fff; }
.btn--ghost{ background:#fff; color:var(--ods-primary); border-color:var(--ods-border); }
.btn--ghost:hover{ border-color:var(--ods-primary); background:var(--ods-primary-tint); }
.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn--outline-light:hover{ background:rgba(255,255,255,.12); }
.btn--sm{ padding:10px 16px; font-size:.9rem; }
.btn--block{ width:100%; }

.icon{ width:20px; height:20px; flex:none; stroke-width:2; }
.icon--sm{ width:16px; height:16px; }

/* Placeholder marker (visible cue for assets ODS must supply) */
/* Tasteful, context-aware "sample" flags for demo content (replaces the old
   PLACEHOLDER badges). White chip + amber text so it reads as intentional. */
.sample-flag{ position:absolute; top:10px; inset-inline-end:10px; z-index:3;
  font-size:.62rem; font-weight:700; letter-spacing:.03em;
  background:#FFFFFF; color:#8A5708; border:1px solid #F3D8A0;
  padding:3px 9px; border-radius:var(--radius-pill); pointer-events:none;
  box-shadow:0 1px 3px rgba(16,40,67,.12); white-space:nowrap; }

/* =======================  TOP BAR  ======================= */
.topbar{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--ods-border); }
.topbar__inner{ display:flex; align-items:center; gap:16px; height:74px; }
.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand__logo{
  width:50px; height:50px; border-radius:13px; flex:none;
  background:linear-gradient(135deg,var(--ods-primary),var(--ods-accent));
  display:grid; place-items:center; color:#fff; box-shadow:var(--shadow-sm);
}
.brand__logo svg{ width:30px; height:30px; }
/* Photo logo: a fixed box the image is fitted inside. The image is centred and contained by default;
   branding applies a transform (translate + scale) so the admin can zoom and pan it within the box.
   overflow:hidden clips a zoomed-in image to the box. */
.brand__logo--photo{ background:transparent; box-shadow:none; padding:0; overflow:hidden; }
.brand__logo--photo img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  display:block; transform-origin:center; }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__text strong{ font-size:1.02rem; color:var(--ods-primary); letter-spacing:-.01em; }
.brand__text span{ font-size:.72rem; color:var(--ods-ink-soft); font-weight:500; }

.mainnav{ margin-inline-start:auto; }
.mainnav ul{ display:flex; align-items:center; gap:2px; }
.mainnav a{
  color:var(--ods-ink); font-weight:500; font-size:.93rem; padding:9px 10px;
  border-radius:9px; display:inline-block; white-space:nowrap;
}
.mainnav a:hover{ background:var(--ods-primary-tint); color:var(--ods-primary); text-decoration:none; }

.topbar__actions{ display:flex; align-items:center; gap:10px; flex:none; }
.lang-toggle{
  display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-weight:600;
  font-size:.88rem; color:var(--ods-primary); background:var(--ods-primary-tint);
  border:1px solid transparent; padding:9px 14px; border-radius:var(--radius-pill); cursor:pointer;
  transition:background .2s var(--ease);
}
.lang-toggle:hover{ background:var(--ods-surface-2); }

.toplink{ font-weight:600; font-size:.92rem; color:var(--ods-primary); padding:9px 8px;
  border-radius:8px; white-space:nowrap; }
.toplink:hover{ color:var(--ods-primary-dark); text-decoration:none; background:var(--ods-primary-tint); }

/* Signed-in role indicator (Admin / Member / Operator) */
.rolebadge{ display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:700;
  letter-spacing:.02em; padding:4px 10px; border-radius:999px; white-space:nowrap; border:1px solid transparent; }
.rolebadge__dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.rolebadge--admin{ color:#1D4ED8; background:#E6EEFF; border-color:#D3E0FF; }
.rolebadge--member{ color:#0E7A4B; background:#E7F6EE; border-color:#CDEBDC; }
.rolebadge--op{ color:#6D28D9; background:#F0E9FF; border-color:#E2D5FB; }
.topbar--dark .rolebadge{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.22); color:#fff; }
@media (max-width:560px){ .rolebadge{ display:none; } }

.menu-btn{ display:none; background:var(--ods-primary-tint); border:none; width:46px; height:46px;
  border-radius:11px; cursor:pointer; color:var(--ods-primary); align-items:center; justify-content:center; }
.menu-btn svg{ width:24px; height:24px; }

/* =======================  HERO  ======================= */
.hero{ position:relative; overflow:hidden; background:
   radial-gradient(1100px 520px at 88% -10%, var(--ods-accent-tint), transparent 60%),
   radial-gradient(900px 480px at -5% 110%, var(--ods-primary-tint), transparent 55%),
   #fff; }
.hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  padding-block:64px 72px; }
.hero__badge{
  display:inline-flex; align-items:center; gap:9px; font-size:.82rem; font-weight:600;
  color:var(--ods-primary-dark); background:#fff; border:1px solid var(--ods-border);
  padding:7px 15px; border-radius:var(--radius-pill); box-shadow:var(--shadow-sm); margin-bottom:22px;
}
.hero__badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--ods-success); flex:none; }
.hero h1{ font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:800; margin-bottom:18px; }
.hero h1 .accent{ color:var(--ods-accent-dark); }
.hero__sub{ font-size:1.16rem; color:var(--ods-ink-soft); max-width:560px; margin-bottom:30px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:22px; }
.hero__meta li{ display:flex; align-items:center; gap:9px; font-size:.92rem; color:var(--ods-ink-soft); font-weight:500; }
.hero__meta svg{ width:19px; height:19px; color:var(--ods-accent-dark); flex:none; }

/* Hero visual — a CSS/SVG "platform" composition (no photos) */
.hero__visual{ position:relative; min-height:440px; }
.hv-card{ position:absolute; background:#fff; border:1px solid var(--ods-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.hv-main{ inset-inline-start:0; top:24px; width:88%; padding:22px; z-index:2; }
.hv-main__top{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.hv-main__top .avatar{ width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,var(--ods-primary),var(--ods-accent)); display:grid; place-items:center; color:#fff; flex:none; }
.hv-main__top .avatar svg{ width:24px; height:24px; }
.hv-main__top .who strong{ display:block; font-size:.95rem; color:var(--ods-ink); }
.hv-main__top .who span{ font-size:.78rem; color:var(--ods-ink-soft); }
.hv-main__top .status{ margin-inline-start:auto; font-size:.72rem; font-weight:700; color:#0A6B4A;
  background:#DCF1E8; padding:5px 11px; border-radius:var(--radius-pill); }
.hv-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.hv-stat{ background:var(--ods-surface); border-radius:12px; padding:12px; text-align:center; }
.hv-stat strong{ display:block; font-size:1.25rem; color:var(--ods-primary); }
.hv-stat span{ font-size:.66rem; color:var(--ods-ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.hv-progress{ font-size:.78rem; color:var(--ods-ink-soft); margin-bottom:7px; display:flex; justify-content:space-between; }
.hv-bar{ height:9px; border-radius:99px; background:var(--ods-surface-2); overflow:hidden; }
.hv-bar i{ display:block; height:100%; width:72%; border-radius:99px;
  background:linear-gradient(90deg,var(--ods-accent),var(--ods-primary)); }
.hv-pill{ position:absolute; background:#fff; border:1px solid var(--ods-border); border-radius:14px;
  box-shadow:var(--shadow); padding:12px 14px; display:flex; align-items:center; gap:11px; z-index:3; }
.hv-pill svg{ width:22px; height:22px; flex:none; }
.hv-pill strong{ display:block; font-size:.84rem; color:var(--ods-ink); line-height:1.2; }
.hv-pill span{ font-size:.72rem; color:var(--ods-ink-soft); }
.hv-pill--events{ inset-inline-end:-6px; top:-8px; }
.hv-pill--events svg{ color:var(--ods-accent-dark); }
.hv-pill--cert{ inset-inline-end:-12px; bottom:74px; }
.hv-pill--cert svg{ color:var(--ods-cta-dark); }
.hv-pill--pay{ inset-inline-start:18px; bottom:6px; }
.hv-pill--pay svg{ color:var(--ods-success); }
.float{ animation:float 6s ease-in-out infinite; }
.float--2{ animation-delay:1.5s; }
.float--3{ animation-delay:.8s; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* =======================  TRUST BAR  ======================= */
.trust{ background:var(--ods-primary); color:#fff; }
.trust__inner{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-block:42px; }
.trust__item{ text-align:center; position:relative; }
.trust__item:not(:last-child)::after{ content:""; position:absolute; inset-inline-end:-12px; top:50%;
  transform:translateY(-50%); width:1px; height:46px; background:rgba(255,255,255,.18); }
.trust__num{ font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800; letter-spacing:-.02em; line-height:1; }
.trust__num .plus{ color:var(--ods-cta); }
.trust__label{ font-size:.86rem; color:rgba(255,255,255,.82); margin-top:8px; font-weight:500; }

/* =======================  CARDS (generic)  ======================= */
.grid{ display:grid; gap:24px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
/* Plan cards: rows of three with the last row centred. Flex, not grid, because grid would leave a final
   row of two hugging the left; wrap + centre gives three over two, or three over one, for any count. */
.plan-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.plan-grid > *{ flex:0 1 calc((100% - 48px) / 3); min-width:0; }
/* Home page with three or more plans: the main category as a card, the others as a list beside it. */
.plan-split{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.45fr); gap:24px; align-items:start; }
.plan-split__lead{ align-self:stretch; }
.plan-list{ padding:26px 28px; }
.plan-list__head{ margin:0 0 6px; font-size:1.05rem; }
.plan-list__rows{ list-style:none; margin:0 0 18px; padding:0; }
.plan-list__row{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0; border-top:1px solid var(--ods-border); }
.plan-list__name{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.plan-list__name strong{ font-size:1rem; }
.plan-list__name span{ color:var(--ods-ink-soft); font-size:.86rem; }
.plan-list__price{ white-space:nowrap; text-align:end; }
.plan-list__price b{ font-size:1.25rem; color:var(--ods-primary); font-weight:800; }
.plan-list__price small{ display:block; color:var(--ods-ink-soft); font-size:.78rem; }
.card{ background:#fff; border:1px solid var(--ods-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  overflow:hidden; display:flex; flex-direction:column; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--ods-accent); }
/* .card is a shell — border, radius, background — and carries no padding of its own,
   because most of its users (.mcard, .plan-form, .reg-card, .profile-card) set their
   own or deliberately run edge-to-edge. This is the padding for the ones that just
   want a padded panel; without it their content sits flush against the border and
   reads as clipped. Static, too: a panel you are reading is not a thing to lift. */
.card--pad{ padding:24px 26px; }
.card--pad:hover{ transform:none; box-shadow:var(--shadow-sm); border-color:var(--ods-border); }
@media (max-width:560px){ .card--pad{ padding:18px 16px; } }
.card__icon{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  background:var(--ods-accent-tint); color:var(--ods-accent-dark); margin-bottom:16px; }
.card__icon--center{ margin-inline:auto; }   /* centered variant for empty-state cards */
.card__icon svg{ width:26px; height:26px; }

/* Membership */
.mcard{ padding:30px 26px; position:relative; text-decoration:none; }
.mcard--featured{ border:2px solid var(--ods-accent); box-shadow:var(--shadow); }
.mcard__flag{ position:absolute; top:18px; inset-inline-end:18px; font-size:.68rem; font-weight:700;
  color:#fff; background:var(--ods-accent); padding:4px 11px; border-radius:var(--radius-pill); letter-spacing:.04em; }
.mcard h3{ font-size:1.3rem; margin-bottom:4px; }
.mcard__who{ color:var(--ods-ink-soft); font-size:.9rem; margin-bottom:18px; min-height:40px; }
.mcard__price{ display:flex; align-items:baseline; gap:6px; margin-bottom:6px; }
.mcard__price b{ font-size:2.1rem; color:var(--ods-primary); font-weight:800; letter-spacing:-.02em; }
.mcard__price span{ color:var(--ods-ink-soft); font-size:.9rem; }
.mcard__renew{ font-size:.82rem; color:var(--ods-accent-dark); font-weight:600; margin-bottom:18px; }

/* Membership cancellation review page */
/* Balanced card padding on all sides + one consistent 20px gap between every section. */
.cancel-card{ margin-inline:auto; padding:28px; }
.cancel-card .panel-head{ margin-bottom:20px; padding-bottom:18px; }
.cancel-summary{ margin:0 0 20px; padding:4px 16px; border:1px solid var(--ods-border);
  border-radius:12px; background:var(--ods-surface,#f5f8fb); overflow:hidden; }
.cancel-summary > div{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--ods-border); }
.cancel-summary > div:last-child{ border-bottom:0; }
.cancel-summary dt{ color:var(--ods-muted,#5b6b7a); margin:0; font-size:.9rem; }
.cancel-summary dd{ margin:0; font-weight:600; text-align:end; }
/* fee reads like an invoice total: full-width highlighted footer band.
   (needs > div specificity so the row's horizontal padding keeps the text aligned with the rows above) */
.cancel-summary > div.cancel-summary__total{ margin:4px -16px -4px; padding:14px 16px;
  background:var(--ods-primary-tint,#E7EEF5); border-top:1px solid var(--ods-border); }
.cancel-summary__total dt{ color:var(--ods-ink); font-weight:700; font-size:1rem; }
.cancel-summary__total dd{ font-size:1.35rem; font-weight:800; color:var(--ods-primary); white-space:nowrap; }
.cancel-feenote{ font-size:.8rem; margin:0 0 20px; }
.cancel-note{ display:flex; align-items:flex-start; gap:10px; line-height:1.5; }
.alert.cancel-note{ margin:0; }
.cancel-note > svg{ flex:none; width:18px; height:18px; margin-top:2px; opacity:.85; }
.cancel-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; padding-top:18px;
  border-top:1px solid var(--ods-border); }
.cancel-actions form{ margin:0; flex:1 1 190px; }
.cancel-actions > .btn{ flex:1 1 190px; }
.cancel-actions .btn{ width:100%; }
.mcard__list li{ display:flex; gap:10px; align-items:flex-start; font-size:.9rem; color:var(--ods-ink);
  padding:7px 0; }
.mcard__list svg{ width:18px; height:18px; color:var(--ods-success); flex:none; margin-top:2px; }
.mcard .btn{ margin-top:20px; }
.pay-note{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px;
  font-size:.76rem; color:var(--ods-ink-soft); }
.pay-note svg{ width:15px; height:15px; color:var(--ods-success); }

/* Broadcast compose — channel checkboxes */
.broadcast-channels{ border:1px solid var(--line,#e4e9f0); border-radius:12px; padding:12px 14px; margin:6px 0 0; display:flex; gap:22px; flex-wrap:wrap; }
.broadcast-channels legend{ font-size:.78rem; color:#7A8A99; padding:0 4px; }
.broadcast-check{ display:inline-flex; align-items:center; gap:8px; font-size:.9rem; cursor:pointer; }
.broadcast-check input{ width:auto; }

/* Refund summary (finance) */
.refund-summary{ display:flex; flex-wrap:wrap; gap:10px 28px; margin:0 0 18px; padding:14px 16px;
  background:var(--surface,#f7f9fc); border:1px solid var(--line,#e4e9f0); border-radius:12px; }
.refund-summary > div{ display:flex; flex-direction:column; gap:2px; }
.refund-summary dt{ font-size:.75rem; color:#7A8A99; margin:0; }
.refund-summary dd{ margin:0; font-variant-numeric:tabular-nums; }

/* Promo-code disclosure at checkout */
.promo{ margin:0 0 12px; text-align:start; }
.promo > summary{ cursor:pointer; font-size:.82rem; color:var(--ods-primary,#0F4C81); list-style:none;
  display:inline-flex; align-items:center; gap:6px; user-select:none; }
.promo > summary::-webkit-details-marker{ display:none; }
.promo > summary::before{ content:"＋"; font-weight:700; }
.promo[open] > summary::before{ content:"－"; }
.promo__input{ margin-top:8px; width:100%; padding:9px 11px; border:1px solid #D8E0E9; border-radius:9px;
  font-size:.9rem; letter-spacing:.04em; text-transform:uppercase; }
.promo__input:focus{ outline:none; border-color:var(--ods-primary,#0F4C81); box-shadow:0 0 0 3px rgba(15,76,129,.12); }

/* Events */
.ecard{ display:flex; flex-direction:column; }
.ecard__media{ height:215px; position:relative; display:flex; align-items:flex-end; padding:12px;
  background:linear-gradient(135deg,#0b2236,#0e3a52); color:#fff; overflow:hidden; }
.ecard__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:0; display:block; }
.ecard__type{ position:relative; z-index:2; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(8,40,66,.66); padding:5px 11px; border-radius:var(--radius-pill); backdrop-filter:blur(4px); }
.ecard__body{ padding:18px 20px 22px; display:flex; flex-direction:column; flex:1; }
.ecard__date{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ods-accent-dark);
  font-weight:600; margin-bottom:9px; }
.ecard__date svg{ width:16px; height:16px; }
.ecard h3{ font-size:1.06rem; margin-bottom:8px; }
.ecard__meta{ font-size:.84rem; color:var(--ods-ink-soft); margin-bottom:16px; display:flex; flex-direction:column; gap:5px; }
.ecard__meta span{ display:flex; align-items:center; gap:7px; }
.ecard__meta svg{ width:15px; height:15px; color:var(--ods-ink-soft); flex:none; }
.ecard .btn{ margin-top:auto; }

/* Certification band */
.cert{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.cert__list{ margin-top:24px; display:grid; gap:18px; }
.cert__item{ display:flex; gap:15px; }
.cert__item .ico{ width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:#fff; color:var(--ods-accent-dark); box-shadow:var(--shadow-sm); }
.cert__item .ico svg{ width:24px; height:24px; }
.cert__item h3{ margin:0 0 3px; font-size:1.02rem; }
.cert__item p{ margin:0; font-size:.9rem; color:var(--ods-ink-soft); }
.cert__visual{ background:#fff; border:1px solid var(--ods-border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:28px; }
.cpd-ring{ display:flex; align-items:center; gap:24px; margin-bottom:22px; }
.cpd-ring svg{ width:118px; height:118px; flex:none; }
.cpd-ring .lbl strong{ font-size:1.7rem; color:var(--ods-primary); display:block; }
.cpd-ring .lbl span{ font-size:.85rem; color:var(--ods-ink-soft); }
.cpd-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0;
  border-top:1px solid var(--ods-border); font-size:.88rem; }
.cpd-row span{ color:var(--ods-ink-soft); }
.cpd-row b{ color:var(--ods-ink); }
.cpd-row .ok{ color:var(--ods-success); display:flex; align-items:center; gap:6px; font-weight:600; }
.cpd-row .ok svg{ width:16px; height:16px; }
.omsb-chip{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-size:.82rem;
  background:var(--ods-primary-tint); color:var(--ods-primary-dark); padding:9px 14px; border-radius:11px; font-weight:600; }
.omsb-chip svg{ width:18px; height:18px; }

/* CPD dashboard */
.cpd-hero{ position:relative; overflow:hidden; display:flex; align-items:center; gap:34px; margin-bottom:18px;
  background:linear-gradient(120deg, color-mix(in srgb, var(--ods-primary) 7%, #fff), color-mix(in srgb, var(--ods-accent) 9%, #fff));
  border:1px solid color-mix(in srgb, var(--ods-primary) 14%, #eef3f8); }
.cpd-hero::after{ content:""; position:absolute; inset-inline-end:-70px; top:-80px; width:230px; height:230px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--ods-accent) 18%, transparent), transparent 70%); }
.cpd-hero .cpd-ring{ margin:0; position:relative; z-index:1; padding:7px; border-radius:50%;
  background:#fff; box-shadow:0 12px 30px rgba(16,40,67,.13); }
.cpd-hero .cpd-ring svg{ width:140px; height:140px; flex:none; display:block; }
.cpd-dash__now{ position:relative; z-index:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.cpd-dash__eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--ods-ink-soft); }
.cpd-dash__now > strong{ font-size:2.2rem; font-weight:800; color:var(--ods-primary); line-height:1.05; letter-spacing:-.02em; }
.cpd-dash__now > strong span{ font-size:.9rem; font-weight:600; color:var(--ods-ink-soft); }
.cpd-progress-row{ display:flex; align-items:center; gap:12px; max-width:380px; margin:11px 0 4px; }
.cpd-progress{ flex:1; height:9px; border-radius:999px; background:#fff; overflow:hidden; margin:0;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ods-primary) 10%, transparent); }
.cpd-progress span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--ods-accent),var(--ods-primary)); transition:width .5s var(--ease); }
.cpd-progress__pct{ flex:0 0 auto; font-size:.95rem; font-weight:800; color:var(--ods-primary); letter-spacing:-.01em; }
.cpd-badge{ align-self:flex-start; margin-top:4px; font-size:.82rem; font-weight:600; color:var(--ods-ink-soft);
  background:var(--ods-surface); border:1px solid var(--ods-border); padding:6px 12px; border-radius:999px; }
.cpd-badge--ok{ color:#0E7A4B; background:#E7F6EE; border-color:transparent; }
.cpd-years{ display:flex; flex-direction:column; }
.cpd-year{ display:grid; grid-template-columns:130px 1fr 150px; align-items:center; gap:16px;
  padding:13px 6px; border-top:1px solid var(--ods-border); }
.cpd-year:first-child{ border-top:none; }
.cpd-year__yr{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:1.02rem; color:var(--ods-ink); }
.cpd-year--now .cpd-year__yr{ color:var(--ods-primary); }
.cpd-year__now{ font-size:.64rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  color:var(--ods-primary); background:var(--ods-primary-tint); padding:3px 8px; border-radius:999px; }
.cpd-year__track{ height:12px; border-radius:999px; background:var(--ods-surface-2); overflow:hidden; }
.cpd-year__fill{ display:block; height:100%; min-width:6px; border-radius:999px;
  background:linear-gradient(90deg,var(--ods-accent),var(--ods-primary)); transition:width .5s var(--ease); }
.cpd-year--now .cpd-year__fill{ background:linear-gradient(90deg,var(--ods-primary),var(--ods-primary-dark)); }
.cpd-year__val{ text-align:end; white-space:nowrap; }
.cpd-year__val strong{ font-size:1.05rem; font-weight:800; color:var(--ods-primary); }
.cpd-year__val .muted{ font-size:.8rem; }
@media (max-width:560px){ .cpd-year{ grid-template-columns:78px 1fr auto; gap:11px; } }
@media (max-width:640px){ .cpd-hero{ flex-wrap:wrap; gap:18px; } }
@media (prefers-reduced-motion: reduce){ .cpd-progress span{ transition:none; } }

/* Directory */
.dir{ background:linear-gradient(135deg,var(--ods-primary),var(--ods-primary-dark)); border-radius:var(--radius-lg);
  padding:48px 44px; color:#fff; box-shadow:var(--shadow); }
.dir__head{ max-width:560px; margin-bottom:28px; }
.dir__head h2{ color:#fff; font-size:clamp(1.5rem,3vw,2.1rem); }
.dir__head p{ color:rgba(255,255,255,.82); margin:0; }
.dir__search{ display:flex; gap:10px; background:#fff; padding:9px; border-radius:var(--radius-pill);
  max-width:620px; box-shadow:var(--shadow); }
.dir__field{ display:flex; align-items:center; gap:9px; flex:1; padding-inline-start:14px; min-width:0; }
.dir__field svg{ width:20px; height:20px; color:var(--ods-ink-soft); flex:none; }
.dir__field input{ border:none; outline:none; font-family:inherit; font-size:.96rem; width:100%;
  color:var(--ods-ink); background:transparent; padding:11px 0; }
.dir__results{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; }
.dcard{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius);
  padding:18px; backdrop-filter:blur(6px); }
.dcard__top{ display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.dcard__avatar{ width:46px; height:46px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.16); color:#fff; font-weight:700; font-size:1.05rem; }
.dcard__top strong{ display:block; font-size:.96rem; color:#fff; }
.dcard__top span{ font-size:.78rem; color:rgba(255,255,255,.78); }
.dcard__row{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:rgba(255,255,255,.85); margin-top:6px; }
.dcard__row svg{ width:15px; height:15px; flex:none; color:var(--ods-cta); }
.dcard__verify{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:.74rem;
  font-weight:600; color:#bef0e1; }
.dcard__verify svg{ width:15px; height:15px; }

/* Benefits */
.bcard{ padding:24px; display:flex; gap:16px; align-items:flex-start; position:relative; }
.bcard__logo{ width:54px; height:54px; border-radius:13px; flex:none; display:grid; place-items:center;
  font-weight:800; color:#fff; font-size:1.1rem; }
.bcard h3{ font-size:1.02rem; margin-bottom:4px; }
.bcard p{ font-size:.86rem; color:var(--ods-ink-soft); margin:0 0 10px; }
.bcard .tag{ font-size:.74rem; font-weight:700; color:#8A5708; background:#FEF3DD;
  padding:4px 10px; border-radius:var(--radius-pill); }

/* News */
/* The whole card is the link (an <a> on the news listings), so it must not pick up
   link colour or underline for its text — only the CTA span underlines on hover. */
.ncard{ display:flex; flex-direction:column; color:inherit; text-decoration:none; }
/* Sized to the cover picture (1200×630) rather than a fixed height: the admin uploads
   at that ratio, so the box fits the whole image at every column width and `cover`
   never has anything to crop. A fixed 180px box either letterboxed the picture
   (contain) or cropped it (cover) depending on how the columns happened to fall. */
.ncard__media{ aspect-ratio:1200/630; background:var(--ods-surface-2); position:relative; overflow:hidden; }
.ncard__media--photo{ background:linear-gradient(135deg,#0b2236,#0e3a52); }
.ncard__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; display:block; }
.ncard__media .label{ position:absolute; z-index:2; bottom:0; inset-inline-start:0; margin:12px;
  font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff;
  background:var(--ods-accent-dark); padding:4px 10px; border-radius:var(--radius-pill); }
.ncard__body{ padding:18px 20px 22px; display:flex; flex-direction:column; flex:1; }
.ncard__date{ font-size:.78rem; color:var(--ods-ink-soft); margin-bottom:8px; }
.ncard h3{ font-size:1.04rem; margin-bottom:10px; }
.ncard__body a, .ncard__cta{ margin-top:auto; font-weight:600; font-size:.88rem; color:var(--ods-primary);
  display:inline-flex; align-items:center; gap:6px; }
.ncard__body a svg, .ncard__cta svg{ width:16px; height:16px; }
/* Interactive lift on news cards (whole card reads as clickable). */
.ncard{ transition:transform .15s ease, box-shadow .15s ease; }
.ncard:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg,0 12px 28px rgba(15,76,129,.14)); }
.ncard:hover .ncard__body a span, .ncard:hover .ncard__cta span{ text-decoration:underline; }

/* Featured news hero — the newest story spans full width above the grid. */
.feature-news{ display:grid; grid-template-columns:1.1fr 1fr; gap:0; margin-bottom:24px;
  border:1px solid var(--ods-border,#e4ecf3); border-radius:var(--radius,14px); overflow:hidden;
  background:var(--ods-surface,#fff); color:inherit; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease; }
.feature-news:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg,0 14px 34px rgba(15,76,129,.16)); }
.feature-news__media{ position:relative; min-height:280px; overflow:hidden; }
.feature-news__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.feature-news__media .label{ position:absolute; z-index:2; bottom:0; inset-inline-start:0; margin:14px;
  font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff;
  background:var(--ods-accent-dark); padding:4px 10px; border-radius:var(--radius-pill); }
.feature-news__body{ padding:30px 32px; display:flex; flex-direction:column; justify-content:center; }
.feature-news__body h2{ font-size:1.5rem; line-height:1.25; margin:6px 0 10px; }
.feature-news__body p{ color:var(--ods-ink-soft); margin:0 0 16px; }
.feature-news__cta{ font-weight:700; font-size:.9rem; color:var(--ods-primary); display:inline-flex; align-items:center; gap:7px; }
.feature-news__cta svg{ width:17px; height:17px; }
.feature-news:hover .feature-news__cta{ text-decoration:underline; }
@media (max-width:760px){ .feature-news{ grid-template-columns:1fr; } .feature-news__media{ min-height:200px; } }

/* News article (read-in-app) */
.article{ max-width:760px; margin:0 auto; }
.article__back{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.88rem;
  color:var(--ods-ink-soft); text-decoration:none; margin-bottom:18px; }
.article__back:hover{ color:var(--ods-primary); }
.article__back svg{ width:17px; height:17px; }
.article__title{ font-size:2rem; line-height:1.2; margin:8px 0 12px; }
.article__meta{ display:flex; align-items:center; gap:12px; color:var(--ods-ink-soft); font-size:.9rem; margin-bottom:22px; }
/* Same 1200×630 ratio as the card media, so the cover shows in full instead of losing
   its top and bottom to a 300px-tall crop. The gradient fallback takes the same box. */
.article__hero{ aspect-ratio:1200/630; border-radius:var(--radius,14px); overflow:hidden; margin-bottom:26px; position:relative; }
.article__hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.article__lead{ font-size:1.15rem; line-height:1.6; color:var(--ods-ink); font-weight:500; margin:0 0 20px; }
.article__cta{ margin-top:28px; }
.pill--soft{ background:var(--ods-surface-2,#eef4f9); color:var(--ods-primary); font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:3px 10px; border-radius:var(--radius-pill); }
@media (max-width:560px){ .article__title{ font-size:1.55rem; } }

/* Careers */
.careers{ display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:center; }
.jcard{ display:flex; align-items:center; gap:16px; padding:18px 20px; background:#fff;
  border:1px solid var(--ods-border); border-radius:var(--radius); margin-bottom:12px; transition:border-color .2s var(--ease); }
.jcard:hover{ border-color:var(--ods-accent); }
.jcard__ico{ width:46px; height:46px; border-radius:12px; background:var(--ods-primary-tint);
  color:var(--ods-primary); display:grid; place-items:center; flex:none; }
.jcard__ico svg{ width:23px; height:23px; }
.jcard__main{ flex:1; min-width:0; }
.jcard__main strong{ display:block; font-size:.98rem; }
.jcard__main span{ font-size:.82rem; color:var(--ods-ink-soft); display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:3px; }
.jcard__main span i{ font-style:normal; display:inline-flex; align-items:center; gap:5px; }
.jcard__main svg{ width:14px; height:14px; vertical-align:-2px; }
.jcard__type{ font-size:.72rem; font-weight:700; color:var(--ods-accent-dark);
  background:var(--ods-accent-tint); padding:5px 11px; border-radius:var(--radius-pill); flex:none; }

/* Support strip */
.support{ background:linear-gradient(135deg,var(--ods-accent-dark),var(--ods-primary)); color:#fff;
  border-radius:var(--radius-lg); padding:38px 40px; display:flex; align-items:center; gap:28px; box-shadow:var(--shadow); }
.support__ico{ width:64px; height:64px; border-radius:18px; background:rgba(255,255,255,.16);
  display:grid; place-items:center; flex:none; }
.support__ico svg{ width:32px; height:32px; }
.support__text{ flex:1; min-width:0; }
.support__text h2{ color:#fff; font-size:1.4rem; margin-bottom:5px; }
.support__text p{ color:rgba(255,255,255,.85); margin:0; }

/* =======================  FOOTER  ======================= */
.footer{ background:var(--ods-primary-dark); color:rgba(255,255,255,.78); padding-block:56px 28px; margin-top:8px; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,.12); }
.footer .brand__text strong{ color:#fff; }
.footer .brand__text span{ color:rgba(255,255,255,.6); }
.footer__about{ margin-top:16px; font-size:.9rem; max-width:300px; line-height:1.7; }
.footer__contact{ margin-top:18px; display:grid; gap:9px; font-size:.88rem; }
.footer__contact li{ display:flex; align-items:flex-start; gap:10px; }
.footer__contact svg{ width:17px; height:17px; color:var(--ods-accent); flex:none; margin-top:3px; }
.footer h3{ color:#fff; font-size:.95rem; margin-bottom:16px; letter-spacing:.02em; }
.footer__links li{ margin-bottom:10px; }
.footer__links a{ color:rgba(255,255,255,.74); font-size:.9rem; }
.footer__links a:hover{ color:#fff; }
.footer__social{ display:flex; gap:10px; margin-top:6px; }
.footer__social a{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.1);
  display:grid; place-items:center; color:#fff; transition:background .2s var(--ease); }
.footer__social a:hover{ background:var(--ods-accent); }
.footer__social svg{ width:19px; height:19px; }
.footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:24px; font-size:.82rem; flex-wrap:wrap; }
.footer__powered{ display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.55); }
.footer__powered b{ color:rgba(255,255,255,.85); font-weight:600; }
.footer__powered .spark{ width:15px; height:15px; color:var(--ods-cta); }

/* =======================  NAV "MORE" DROPDOWN  ======================= */
.has-more{ position:relative; }
.more-btn{ display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-weight:500;
  font-size:.93rem; color:var(--ods-ink); background:none; border:none; cursor:pointer;
  padding:9px 10px; border-radius:9px; white-space:nowrap; }
.more-btn:hover{ background:var(--ods-primary-tint); color:var(--ods-primary); }
.more-btn .chev{ width:15px; height:15px; transition:transform .2s var(--ease); }
.more-btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.more-menu{ list-style:none; margin:0; padding:8px; position:absolute; top:calc(100% + 6px); inset-inline-end:0;
  min-width:212px; background:#fff; border:1px solid var(--ods-border); border-radius:14px;
  box-shadow:var(--shadow); flex-direction:column; align-items:stretch; z-index:120; }
/* specificity must beat `.mainnav ul{display:flex}` (0,1,1) — so hide/show is scoped to .mainnav */
.mainnav .more-menu{ display:none; }
.mainnav .more-menu.is-open{ display:flex; }
.more-menu a{ display:block; padding:10px 12px; border-radius:9px; color:var(--ods-ink); font-weight:500; font-size:.92rem; white-space:nowrap; }
.more-menu a:hover{ background:var(--ods-primary-tint); color:var(--ods-primary); text-decoration:none; }
/* The desktop dropdown panel is white, so keep its links dark even on a dark topbar (avoids white-on-white).
   Beats `.topbar--dark .mainnav a` (0,2,1); the mobile is-open menu is re-whitened by a later rule. */
.topbar--dark .mainnav .more-menu a{ color:var(--ods-ink); }
.topbar--dark .mainnav .more-menu a:hover{ color:var(--ods-primary); }
/* Desktop (pointer): open on hover too — keyboard/touch still use the click handler.
   The ::after bridges the button→menu gap so the pointer can cross without closing. */
@media (hover:hover) and (min-width:1200px){
  .mainnav .has-more:hover .more-menu{ display:flex; }
  .mainnav .has-more:hover .more-btn{ background:var(--ods-primary-tint); color:var(--ods-primary); }
  .mainnav .has-more:hover .more-btn .chev{ transform:rotate(180deg); }
  .mainnav .has-more::after{ content:""; position:absolute; top:100%; inset-inline:0; height:8px; }
}

/* =======================  ABOUT THE SOCIETY  ======================= */
.about-intro{ display:grid; grid-template-columns:1.35fr .65fr; gap:34px; align-items:start; margin-bottom:50px; }
.about-intro__text p{ color:var(--ods-ink-soft); }
.about-points{ display:grid; gap:16px; margin-top:20px; }
.about-point{ display:flex; gap:14px; align-items:flex-start; }
.about-point .ico{ width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--ods-accent-tint); color:var(--ods-accent-dark); }
.about-point .ico svg{ width:22px; height:22px; }
.about-point strong{ display:block; color:var(--ods-ink); font-size:1rem; margin-bottom:2px; }
.about-point span{ color:var(--ods-ink-soft); font-size:.9rem; }
.about-facts{ background:linear-gradient(160deg,var(--ods-primary),var(--ods-primary-dark)); color:#fff;
  border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow); }
.about-facts__title{ font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin:0 0 16px; }
.about-facts dl{ margin:0; display:grid; gap:14px; }
.about-facts .fact{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.14); }
.about-facts .fact:last-child{ border-bottom:none; padding-bottom:0; }
.about-facts dt{ color:rgba(255,255,255,.82); font-size:.9rem; }
.about-facts dd{ margin:0; font-weight:800; font-size:1.12rem; }
.about-subhead{ font-size:1.3rem; margin:0 0 22px; }
.about-note{ text-align:center; font-size:.8rem; color:var(--ods-ink-soft); margin:18px 0 0; }
.bmember{ padding:24px; text-align:center; }
.bmember__avatar{ width:84px; height:84px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center;
  color:#fff; font-weight:800; font-size:1.5rem; background:linear-gradient(135deg,var(--ods-primary),var(--ods-accent)); }
.bmember h4{ font-size:1.05rem; margin:0 0 3px; }
.bmember__role{ color:var(--ods-accent-dark); font-weight:600; font-size:.88rem; margin-bottom:12px; }
.bmember__links{ display:flex; gap:8px; justify-content:center; }
.bmember__links a{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--ods-surface); color:var(--ods-ink-soft); }
.bmember__links a:hover{ background:var(--ods-primary-tint); color:var(--ods-primary); }
.bmember__links svg{ width:17px; height:17px; }
.reports-grid{ margin-top:4px; }
.rcard{ padding:22px 24px; display:flex; gap:16px; align-items:center; }
.rcard__ico{ width:52px; height:64px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:var(--ods-primary-tint); color:var(--ods-primary); }
.rcard__ico svg{ width:26px; height:26px; }
.rcard__body{ flex:1; min-width:0; }
.rcard h3, .rcard h4{ font-size:1.05rem; margin:0 0 3px; }
.rcard__meta{ font-size:.8rem; color:var(--ods-ink-soft); margin-bottom:12px; }

/* =======================  RESEARCH & PUBLICATIONS  ======================= */
.journal{ display:grid; grid-template-columns:.42fr .58fr; gap:0; overflow:hidden; margin-bottom:46px; }
.journal__cover{ background:linear-gradient(160deg,var(--ods-primary),var(--ods-accent-dark)); color:#fff;
  padding:34px; display:flex; flex-direction:column; justify-content:center; min-height:240px; }
.journal__cover .badge{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.16); padding:5px 12px; border-radius:var(--radius-pill); align-self:flex-start; margin-bottom:18px; }
.journal__cover h2, .journal__cover h3{ color:#fff; font-size:1.5rem; margin:0 0 8px; }
.journal__cover .vol{ font-size:.9rem; color:rgba(255,255,255,.82); }
.journal__body{ padding:34px; }
.journal__body p{ color:var(--ods-ink-soft); }
.journal__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.pubcard{ padding:24px; display:flex; flex-direction:column; }
.pubcard__type{ align-self:flex-start; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 11px; border-radius:var(--radius-pill); margin-bottom:14px; }
.pubcard__type--research{ background:var(--ods-accent-tint); color:var(--ods-accent-dark); }
.pubcard__type--review{ background:var(--ods-primary-tint); color:var(--ods-primary); }
.pubcard__type--case{ background:#FEF3DD; color:#8A5708; }
.pubcard h3, .pubcard h4{ font-size:1.02rem; margin:0 0 10px; line-height:1.35; }
.pubcard__authors{ font-size:.85rem; color:var(--ods-ink-soft); margin-bottom:4px; }
.pubcard__src{ font-size:.82rem; color:var(--ods-accent-dark); font-weight:600; margin-bottom:16px; }
.pubcard a.read{ margin-top:auto; font-weight:600; font-size:.88rem; display:inline-flex; align-items:center; gap:6px; }
.pubcard a.read svg{ width:16px; height:16px; }
.cfa{ margin-top:36px; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--ods-border); border-radius:var(--radius-lg); padding:24px 30px; box-shadow:var(--shadow-sm); }
.cfa__ico{ width:54px; height:54px; border-radius:14px; flex:none; display:grid; place-items:center;
  background:var(--ods-accent-tint); color:var(--ods-accent-dark); }
.cfa__ico svg{ width:28px; height:28px; }
.cfa__text{ flex:1; min-width:220px; }
.cfa__text strong{ display:block; font-size:1.1rem; color:var(--ods-ink); margin-bottom:3px; }
.cfa__text span{ color:var(--ods-ink-soft); font-size:.9rem; }

/* Auth links + logout live in the top bar on desktop; on mobile they move into the slide-down menu. */
.nav-auth{ display:none; }

/* =======================  RESPONSIVE  ======================= */
/* Topbar collapses to a hamburger below the container max-width (the full
   horizontal nav + brand + actions needs ~1240px to sit without overflow). */
@media (max-width:1199px){
  .mainnav, .topbar__actions .toplink{ display:none; }
  /* On mobile the top-bar logout is cramped/hidden — hide it and use the one inside the menu instead. */
  .topbar__actions form[action*="Logout"]{ display:none; }
  .mainnav.is-open .nav-auth{ display:flex; flex-direction:column; gap:6px; margin-top:12px;
    padding-top:14px; border-top:1px solid var(--ods-border); }
  .mainnav.is-open .nav-auth a{ padding:12px 14px; border-radius:10px; font-weight:600; color:var(--ods-primary); }
  .mainnav.is-open .nav-auth a:hover{ background:var(--ods-primary-tint); }
  .mainnav.is-open .nav-auth__logout{ margin-top:4px; }
  .mainnav.is-open .nav-auth__logout .btn{ width:100%; }
  .menu-btn{ display:inline-flex; }
  .topbar__actions{ margin-inline-start:auto; }
  .mainnav.is-open{ display:block; position:absolute; top:74px; inset-inline:0; background:#fff;
    border-bottom:1px solid var(--ods-border); box-shadow:var(--shadow); padding:14px 24px; z-index:90; }
  .mainnav.is-open ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .mainnav.is-open a{ padding:12px 14px; border-radius:10px; }
  .mainnav.is-open .mobile-cta{ display:flex; gap:10px; margin-top:12px; }
  .mainnav.is-open .mobile-cta .btn{ flex:1; }
  /* "More" flattens into the slide-down list — no nested dropdown on mobile */
  .more-btn{ display:none; }
  .mainnav .more-menu{ position:static; display:flex; min-width:0; padding:0; border:none; box-shadow:none; background:none; }
  .more-menu a{ padding:12px 14px; }
}
@media (max-width:980px){
  .about-intro{ grid-template-columns:1fr; }
  .journal{ grid-template-columns:1fr; }
  .hero__inner{ grid-template-columns:1fr; gap:36px; }
  .hero__visual{ min-height:380px; max-width:480px; }
  .cert{ grid-template-columns:1fr; gap:34px; }
  .careers{ grid-template-columns:1fr; gap:28px; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .trust__inner{ grid-template-columns:repeat(2,1fr); gap:28px 16px; }
  .trust__item:nth-child(2)::after{ display:none; }
  .dir__results{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:760px){
  .topbar__actions .btn{ display:none; }   /* hide CTA on phones; it lives in the menu */
  .grid--3{ grid-template-columns:1fr; }
  .grid--2{ grid-template-columns:1fr; }
  .plan-grid > *{ flex-basis:100%; }
  .plan-split{ grid-template-columns:1fr; }
  .section{ padding-block:54px; }
  .support{ flex-direction:column; text-align:center; }
}
@media (max-width:430px){
  .container{ padding-inline:18px; }
  .grid--4{ grid-template-columns:1fr; }
  .trust__inner{ grid-template-columns:1fr; }
  .trust__item::after{ display:none !important; }
  .hero__cta .btn{ width:100%; }
  .dir{ padding:32px 22px; }
  .dir__search{ flex-direction:column; border-radius:var(--radius-lg); }
  .dir__search .btn{ width:100%; }
  /* tighten the brand + lang toggle so topbar fits on small phones */
  .brand__text span{ display:none; }
  .brand__logo{ width:42px; height:42px; }
  .brand__text strong{ font-size:.92rem; }
  .topbar__inner{ gap:10px; }
  .lang-toggle{ padding:9px; }      /* icon-only globe (aria-label keeps it accessible) */
  #langLabel{ display:none; }
}
.mobile-cta{ display:none; }

/* RTL fine-tuning */
html[dir="rtl"] .hv-bar i{ background:linear-gradient(270deg,var(--ods-accent),var(--ods-primary)); }
html[dir="rtl"] .ecard__deco{ transform:scaleX(-1); }

/* Sample-data / placeholder captions */
.fee-note{ text-align:center; font-size:.8rem; color:var(--ods-ink-soft); margin:24px 0 0; }
.dir__sample{ font-size:.76rem; color:rgba(255,255,255,.72); margin:20px 0 2px; font-weight:500; }

/* ===== Subpage breadcrumb ===== */
.crumb{ padding-block:22px 0; }
.crumb a{ font-size:.88rem; font-weight:600; color:var(--ods-accent-dark); display:inline-flex; align-items:center; gap:7px; }
.crumb svg{ width:16px; height:16px; }
html[dir="rtl"] .crumb svg{ transform:scaleX(-1); }

/* =====================================================================
   App utilities — used by the platform's module views (membership, events,
   cpd, content, directory, admin, account). Keeps existing markup styled
   under the ported design system.
   ===================================================================== */
.muted{ color:var(--ods-ink-soft); font-size:.92rem; }
main h2{ font-size:1.5rem; margin:0 0 .6em; }
main .card h3{ margin-top:0; color:var(--ods-primary); }
main table{ border-color:var(--ods-border); }
main table th{ color:var(--ods-ink-soft); font-weight:600; }
main input, main select, main textarea{
  font:inherit; color:var(--ods-ink); background:#fff;
  border:1px solid var(--ods-border); border-radius:10px; padding:9px 11px;
}
main input:focus, main select:focus, main textarea:focus{
  outline:none; border-color:var(--ods-primary); box-shadow:0 0 0 3px var(--ods-primary-tint);
}
main button[type=submit]{ cursor:pointer; }

/* =====================================================================
   Dark top bar — scoped to .topbar--dark, added on every host EXCEPT the
   ODS tenant (which keeps the mockup's light navbar). Text flipped to light.
   ===================================================================== */
.topbar--dark{ background:var(--ods-primary-dark); border-bottom:1px solid rgba(255,255,255,.12); backdrop-filter:none; }
.topbar--dark .brand__text strong{ color:#fff; }
.topbar--dark .brand__text span{ color:rgba(255,255,255,.6); }
.topbar--dark .mainnav a{ color:rgba(255,255,255,.88); }
.topbar--dark .mainnav a:hover{ background:rgba(255,255,255,.12); color:#fff; }
.topbar--dark .lang-toggle{ color:#fff; background:rgba(255,255,255,.12); }
.topbar--dark .lang-toggle:hover{ background:rgba(255,255,255,.22); }
.topbar--dark .toplink{ color:#fff; }
.topbar--dark .toplink:hover{ color:#fff; background:rgba(255,255,255,.12); }
.topbar--dark .menu-btn{ color:#fff; background:rgba(255,255,255,.12); }

/* =====================================================================
   Nav layout polish — applies to both the light (ODS) and dark bars.
   ===================================================================== */
.topbar__inner{ gap:18px; }
.mainnav ul{ gap:6px; }
.mainnav a{ padding:9px 14px; }
.topbar__actions{ gap:8px; }
/* Icon-only language toggle in the header (aria-label keeps it accessible) so the action bar stays compact
   and never clips the Sign out button — e.g. a tenant admin on ODS also shows a role badge + Admin + Portal.
   The full "Switch language" text still appears on the auth pages (.auth-top .lang-toggle). */
.topbar__actions .lang-toggle{ gap:0; padding:9px; }
.topbar__actions .lang-toggle > span{ display:none; }
.topbar .lang-toggle svg{ width:18px; height:18px; }

/* Active page: light bar = pale-blue (mockup); dark bar = translucent white. */
.topbar .mainnav a.is-active{ background:var(--ods-primary-tint); color:var(--ods-primary); font-weight:600; }
.topbar--dark .mainnav a.is-active{ background:rgba(255,255,255,.16); color:#fff; }

/* Mobile menu panel: dark only on .topbar--dark (the light base is already styled). */
@media (max-width:1199px){
  .topbar--dark .mainnav.is-open{ background:var(--ods-primary-dark); border-top:1px solid rgba(255,255,255,.12);
    box-shadow:var(--shadow-lg); padding:14px 24px 18px; }
  .topbar--dark .mainnav.is-open a{ color:rgba(255,255,255,.92); }
  .topbar--dark .mainnav.is-open a:hover,
  .topbar--dark .mainnav.is-open a.is-active{ background:rgba(255,255,255,.14); color:#fff; }
}

/* =====================================================================
   Association (tenant) dashboard cards — operator dev switcher.
   ===================================================================== */
.t-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px; }
.t-card{ background:#fff; border:1px solid var(--ods-border); border-radius:var(--radius-lg);
  padding:18px; display:flex; flex-direction:column; gap:14px; min-height:100%;
  transition:transform .16s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.t-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--ods-accent); }
.t-card__head{ display:flex; align-items:flex-start; gap:12px; }
.t-card__logo{ width:48px; height:48px; border-radius:13px; flex:none; overflow:hidden;
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:1.05rem;
  background:linear-gradient(135deg,var(--ods-primary),var(--ods-accent)); box-shadow:var(--shadow-sm); }
.t-card__logo img{ width:100%; height:100%; object-fit:cover; }
.t-card__id{ min-width:0; flex:1; }
.t-card__id h3{ margin:0; font-size:1.02rem; }
.t-card__id code{ font-size:.78rem; word-break:break-all; }
.t-badge{ flex:none; font-size:.7rem; font-weight:700; letter-spacing:.02em; padding:3px 10px;
  border-radius:var(--radius-pill); white-space:nowrap; }
.t-badge--ok{ background:#DCF1E8; color:#0B7C57; }
.t-badge--bad{ background:#FBE3E3; color:#B42318; }
.t-badge--info{ background:var(--ods-primary-tint); color:var(--ods-primary); }
.t-card__meta{ display:flex; flex-wrap:wrap; gap:18px; font-size:.84rem; color:var(--ods-ink-soft);
  border-top:1px solid var(--ods-border); padding-top:12px; }
.t-card__meta span{ display:flex; align-items:center; gap:6px; }
.t-card__meta svg{ width:15px; height:15px; flex:none; }
.t-card__meta strong{ color:var(--ods-ink); font-weight:600; }
.t-card__foot{ display:flex; align-items:center; gap:8px; margin-top:auto; }
.t-card__foot .btn{ flex:1; }
.t-kebab{ flex:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--ods-border);
  background:#fff; color:var(--ods-ink-soft); cursor:pointer; display:grid; place-items:center;
  transition:background .2s var(--ease), color .2s var(--ease); }
.t-kebab:hover{ background:var(--ods-surface); color:var(--ods-primary); }
.t-kebab svg{ width:18px; height:18px; }

/* =====================================================================
   Development tenant switcher — collapsible, subtle warning styling.
   ===================================================================== */
.dev-switcher{ max-width:980px; margin:40px auto 0; border:1px solid #F3D8A0;
  background:#FFFBF2; border-radius:var(--radius-lg); overflow:hidden; }
.dev-switcher > summary{ list-style:none; cursor:pointer; display:flex; align-items:center;
  gap:12px; padding:16px 20px; user-select:none; }
.dev-switcher > summary::-webkit-details-marker{ display:none; }
.dev-switcher > summary:hover{ background:#FEF6E7; }
.dev-switcher__title{ display:flex; align-items:center; gap:9px; font-weight:700;
  font-size:1.02rem; color:var(--ods-ink); }
.dev-switcher__title svg{ width:18px; height:18px; color:#B7740A; flex:none; }
.dev-badge{ font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:#FEF3C7; color:#92400E; border:1px solid #F3D8A0; padding:3px 10px;
  border-radius:var(--radius-pill); white-space:nowrap; }
.dev-switcher__chev{ margin-inline-start:auto; width:20px; height:20px; color:#B7740A; flex:none;
  transition:transform .2s var(--ease); }
.dev-switcher[open] .dev-switcher__chev{ transform:rotate(180deg); }
.dev-switcher__body{ padding:6px 20px 22px; border-top:1px solid #F3D8A0; }
.dev-switcher__body > p{ margin:14px 0 18px; }

/* =====================================================================
   Empty states — friendly icon + message + actions (reusable).
   ===================================================================== */
.empty-state{ text-align:center; max-width:460px; margin:36px auto; padding:8px; }
.empty-state__icon{ width:64px; height:64px; border-radius:18px; display:grid; place-items:center;
  margin:0 auto 16px; background:var(--ods-primary-tint); color:var(--ods-primary); }
.empty-state__icon svg{ width:30px; height:30px; }
.empty-state h3{ margin:0 0 6px; font-size:1.2rem; }
.empty-state p{ margin:0 0 18px; }
.empty-state__actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* =====================================================================
   Visual polish pass — global refinements only (no layout changes).
   ===================================================================== */

/* Depth: subtle resting shadow so cards aren't flat (hover still lifts). */
.card, .t-card{ box-shadow:var(--shadow-sm); }

/* Smooth, consistent eased transitions on interactive chrome. */
.toplink, .lang-toggle, .mainnav a, .t-kebab, .t-badge,
.dev-switcher > summary, .empty-state__icon{
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), box-shadow .2s var(--ease), transform .15s var(--ease);
}

/* Typography: clearer hierarchy and rhythm. */
main h1{ letter-spacing:-.02em; }
main h2{ font-size:1.55rem; letter-spacing:-.01em; margin:0 0 .55em; }
main h3{ font-size:1.06rem; }
.muted{ line-height:1.6; }

/* Consistent radius for form controls. */
main input, main select, main textarea{ border-radius:12px; }

/* Buttons: consistent focus ring + active feel. */
.btn:focus-visible{ outline:3px solid var(--ods-accent-dark); outline-offset:2px; }
.btn:active{ transform:translateY(0); }

/* Responsive: collapse multi-column grids gracefully. */
@media (max-width:880px){ .grid--3, .grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid--2, .grid--3, .grid--4{ grid-template-columns:1fr; } }

/* Tighter padding on small screens. */
@media (max-width:480px){
  .card{ padding:16px; }
  .container{ padding-inline:18px; }
}

/* =====================================================================
   Accessibility — focus contrast on dark surfaces + responsive type.
   ===================================================================== */
/* Keyboard focus must stay visible on the dark top bar (the global teal
   ring has low contrast on --primary-dark), so use a white ring there. */
.topbar--dark a:focus-visible,
.topbar--dark button:focus-visible,
.topbar--dark summary:focus-visible{ outline-color:#fff; }

/* Active nav item is also exposed to assistive tech via aria-current.
   Dark bar = translucent white; the light (ODS) bar uses the primary-tint rule above. */
.topbar--dark .mainnav a[aria-current="page"]{ background:rgba(255,255,255,.16); color:#fff; font-weight:600; }

/* Responsive (fluid) heading typography — scales down on small screens. */
main h1{ font-size:clamp(1.7rem, 1.1rem + 2.6vw, 2.5rem); }
main h2{ font-size:clamp(1.3rem, 1.05rem + 1.2vw, 1.6rem); }
main h3{ font-size:clamp(1rem, .95rem + .4vw, 1.12rem); }

/* =====================================================================
   Landing hero — open header panel (aligned to the dashboard width).
   ===================================================================== */
.landing-hero{ max-width:980px; margin:8px auto 0; text-align:center; padding:52px 24px 14px; }
.landing-hero h1{ font-size:clamp(2rem, 1.4rem + 2.8vw, 2.9rem); margin:.25em auto .35em; max-width:780px; }
.landing-hero__sub{ color:var(--ods-ink-soft); font-size:1.12rem; line-height:1.6;
  max-width:560px; margin:0 auto 28px; }
.landing-hero__cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* =====================================================================
   Auth pages (login, etc.) — centered glassmorphism card on light grey.
   ===================================================================== */
.auth-body{ min-height:100vh; margin:0; color:#1A2733;
  font-family:'Segoe UI','Segoe UI Web','Segoe UI Symbol',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  /* Light gradient base + a few large, soft, low-opacity shapes (no patterns). */
  background:
    radial-gradient(1100px 620px at 8% -12%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(1000px 680px at 104% 4%, rgba(37,99,235,.08), transparent 55%),
    radial-gradient(880px 600px at 50% 118%, rgba(125,211,252,.12), transparent 60%),
    linear-gradient(180deg, #FBFCFE 0%, #F1F5FB 100%);
  background-attachment:fixed;
  display:grid; place-items:center; padding:24px; }
.auth-main{ width:100%; display:grid; place-items:center; }
.auth-top{ position:fixed; top:18px; inset-inline-end:22px; z-index:5; }
.auth-top .lang-toggle{ background:#fff; box-shadow:0 2px 10px rgba(16,40,67,.08); }
.auth-top .lang-toggle svg{ width:17px; height:17px; }

.auth-card{ width:100%; max-width:450px; padding:42px 38px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.65); border-radius:20px;
  box-shadow:0 24px 60px rgba(16,40,67,.12), 0 6px 16px rgba(16,40,67,.06); }

.auth-card__brand{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:20px; }
.auth-card__logo{ width:54px; height:54px; border-radius:15px; overflow:hidden; display:grid; place-items:center;
  color:#fff; font-weight:800; font-size:1.15rem;
  background:linear-gradient(135deg,var(--primary,#0F4C81),var(--accent,#1B9AAA));
  box-shadow:0 6px 16px rgba(16,40,67,.16); }
.auth-card__logo img{ width:100%; height:100%; object-fit:cover; }
.auth-card__brand strong{ font-size:.95rem; color:#56697B; font-weight:600; }

.auth-card h1{ font-size:1.5rem; font-weight:700; letter-spacing:-.01em; text-align:center; margin:0 0 6px; }
.auth-card__sub{ text-align:center; color:#56697B; font-size:.95rem; margin:0 0 26px; }

.auth-field{ margin-bottom:16px; }
.auth-field label{ display:block; font-size:.85rem; font-weight:600; color:#3A4756; margin-bottom:7px; }
.auth-card input[type=email], .auth-card input[type=password], .auth-card input[type=text]{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid #E1E8EF; background:#fff;
  font:inherit; color:inherit; transition:border-color .2s ease, box-shadow .2s ease; }
.auth-card input:focus{ outline:none; border-color:var(--primary,#0F4C81);
  box-shadow:0 0 0 3px var(--primary-tint,#E7EEF5); }

.auth-remember{ display:flex; align-items:center; gap:10px; margin:6px 0 26px;
  font-size:.92rem; font-weight:500; color:#3A4756; cursor:pointer; user-select:none; }
.auth-remember span{ line-height:1; letter-spacing:.005em; }
/* Modern custom checkbox (native input styled; binding/name unchanged). */
.auth-remember input[type=checkbox]{ -webkit-appearance:none; appearance:none; margin:0; flex:0 0 auto;
  width:20px; height:20px; border:1.5px solid #CBD5E1; border-radius:6px; background:#fff; cursor:pointer;
  display:inline-grid; place-content:center;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.auth-remember input[type=checkbox]::before{ content:""; width:11px; height:11px; transform:scale(0);
  transition:transform .15s ease; box-shadow:inset 1em 1em #fff;
  clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.auth-remember input[type=checkbox]:checked{ background:#2563EB; border-color:#2563EB; }
.auth-remember input[type=checkbox]:checked::before{ transform:scale(1); }
.auth-remember:hover input[type=checkbox]{ border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.auth-remember input[type=checkbox]:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.32); }

.auth-validation:not(:empty){ color:#B42318; font-size:.88rem; margin-bottom:14px; }
.auth-note{ background:#E7F6EF; color:#0B7C57; border:1px solid #C7E9DA; border-radius:10px;
  padding:10px 14px; font-size:.9rem; margin-bottom:16px; }

.auth-links{ text-align:center; margin:18px 0 0; font-size:.9rem; color:#56697B; }
.auth-links a{ color:var(--primary,#0F4C81); font-weight:600; }

@media (max-width:480px){ .auth-card{ padding:30px 22px; border-radius:16px; } }

/* Operator login: solid professional slate logo + shield icon sizing. */
.auth-card__logo--operator{ background:var(--primary,#334155); }
.auth-card__logo svg{ width:28px; height:28px; }

/* =====================================================================
   Floating-label inputs (login email/password) — icon + animated label.
   ===================================================================== */
.auth-card .float-field{ position:relative; margin-bottom:18px; }
/* Two fields on one line (e.g. first/last name), stacking on narrow screens. */
.auth-card .float-row{ display:flex; gap:14px; }
/* The hidden attribute loses to any class that sets display; these are the auth-form blocks that hide. */
.auth-card .float-row[hidden], .auth-card .float-field[hidden], .auth-card .reg-renew[hidden]{ display:none; }
.auth-card .float-row .float-field{ flex:1 1 0; min-width:0; }
@media (max-width:440px){ .auth-card .float-row{ flex-direction:column; gap:0; } }
/* Captcha: code image sits beside the input; refresh link below. */
.auth-card .captcha-row{ display:flex; gap:12px; align-items:flex-start; }
.auth-card .captcha-row__img{ height:52px; width:auto; flex:none; border:1px solid #E1E8EF; border-radius:10px; background:#fff; }
.auth-card .captcha-row__field{ flex:1 1 0; min-width:0; margin-bottom:8px; }
.auth-card .captcha-refresh{ display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:600;
  color:var(--primary,#106EBE); text-decoration:none; margin:0 0 18px; }
.auth-card .captcha-refresh svg{ width:15px; height:15px; }
.auth-card .captcha-refresh:hover{ text-decoration:underline; }
/* Post-register "check your email" confirmation card. */
.auth-card.auth-confirm{ padding-top:40px; }
.auth-confirm__icon{ width:66px; height:66px; border-radius:50%; display:grid; place-items:center; margin:0 auto 22px;
  background:var(--primary-tint,#E7EEF5); color:var(--primary,#0F4C81); }
.auth-confirm__icon svg{ width:30px; height:30px; }
.auth-confirm .auth-card__sub{ margin-bottom:20px; line-height:1.55; }
.auth-confirm__note{ display:inline-flex; align-items:center; gap:8px; margin:0 0 24px;
  font-size:.85rem; color:var(--ods-muted,#5b6b7a); }
.auth-confirm__note svg{ width:16px; height:16px; flex:none; }
.auth-card .float-field__icon{ position:absolute; inset-inline-start:15px; top:26px; transform:translateY(-50%);
  width:18px; height:18px; color:#64748B; pointer-events:none; transition:color .2s ease; }
.auth-card input.float-input{ width:100%; height:52px; padding:0 14px; padding-inline-start:44px;
  border:1px solid #E1E8EF; border-radius:12px; background:#fff; font:inherit; color:inherit;
  transition:border-color .2s ease, box-shadow .2s ease; }
.auth-card input.float-input:focus{ outline:none; border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.auth-card .float-field:focus-within .float-field__icon{ color:#2563EB; }
.auth-card .float-label{ position:absolute; inset-inline-start:44px; top:26px; transform:translateY(-50%);
  color:#56697B; font-size:1rem; font-weight:400; pointer-events:none; background:#fff; padding:0 5px;
  transition:top .18s ease, font-size .18s ease, color .18s ease, inset-inline-start .18s ease; }
.auth-card input.float-input:focus + .float-label,
.auth-card input.float-input:not(:placeholder-shown) + .float-label{
  top:0; font-size:.74rem; inset-inline-start:38px; color:#1D4ED8; font-weight:600; }

/* Show/hide password toggle (login). */
.auth-card input.float-input--pw{ padding-inline-end:48px; }
.auth-card .pw-toggle{ position:absolute; inset-inline-end:6px; top:26px; transform:translateY(-50%);
  width:38px; height:38px; border:0; background:transparent; color:#64748B; cursor:pointer;
  display:grid; place-items:center; border-radius:10px;
  transition:color .2s ease, background .2s ease; }
/* Stack both icons in the same cell and crossfade between them. */
.auth-card .pw-toggle svg{ grid-area:1 / 1; width:19px; height:19px;
  transition:opacity .22s ease, transform .22s ease; }
.auth-card .pw-toggle .pw-eye-off{ opacity:0; transform:scale(.55) rotate(-10deg); }
.auth-card .pw-toggle.is-revealed .pw-eye{ opacity:0; transform:scale(.55) rotate(10deg); }
.auth-card .pw-toggle.is-revealed .pw-eye-off{ opacity:1; transform:none; }
.auth-card .pw-toggle:hover{ color:#2563EB; background:#EFF4FF; }
.auth-card .pw-toggle:active{ transform:translateY(-50%) scale(.9); }
.auth-card .pw-toggle.is-revealed{ color:#2563EB; }
.auth-card .pw-toggle:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.32); }
@media (prefers-reduced-motion: reduce){
  .auth-card .pw-toggle svg{ transition:opacity .15s ease; }
  .auth-card .pw-toggle .pw-eye-off,
  .auth-card .pw-toggle.is-revealed .pw-eye{ transform:none; }
  .auth-card .pw-toggle:active{ transform:translateY(-50%); }
}
/* Hide the browser's native password-reveal/clear icon (Edge ::-ms-reveal, etc.)
   so only our custom toggle shows. */
.auth-card input.float-input--pw::-ms-reveal,
.auth-card input.float-input--pw::-ms-clear{ display:none; }

/* =====================================================================
   Login sign-in button — full width, blue gradient, hover scale, spinner.
   ===================================================================== */
.auth-submit{ position:relative; width:100%; height:50px; border:0; border-radius:12px;
  color:#fff; font:inherit; font-weight:600; font-size:1rem; letter-spacing:.01em; cursor:pointer;
  background:linear-gradient(135deg, #2563EB, #1D4ED8);
  box-shadow:0 10px 22px rgba(37,99,235,.32), 0 2px 6px rgba(29,78,216,.22);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; }
.auth-submit:hover{ transform:scale(1.02); filter:brightness(.96);
  box-shadow:0 14px 28px rgba(37,99,235,.42), 0 3px 8px rgba(29,78,216,.28); }
.auth-submit:active{ transform:scale(.99); }
.auth-submit:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.35); }
/* Loading state: hide label, show a CSS-only spinner. */
.auth-submit.is-loading{ pointer-events:none; }
.auth-submit.is-loading .auth-submit__label{ visibility:hidden; }
.auth-submit.is-loading::after{ content:""; position:absolute; top:50%; left:50%;
  width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.45); border-top-color:#fff;
  animation:auth-spin .6s linear infinite; }
@keyframes auth-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .auth-submit{ transition:none; }
  .auth-submit:hover{ transform:none; }
  .auth-submit.is-loading::after{ animation-duration:1.2s; }
}

/* Remember-me / forgot-password row + forgot link. */
.auth-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 22px; }
.auth-row .auth-remember{ margin:0; }
.auth-forgot{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  color:#1D4ED8; font-size:.9rem; font-weight:600; text-decoration:none;
  transition:color .2s ease, gap .2s ease; }
.auth-forgot svg{ width:14px; height:14px; transition:transform .2s ease; }
.auth-forgot:hover{ text-decoration:underline; }
.auth-forgot:hover svg{ transform:translateX(2px); }
[dir="rtl"] .auth-forgot svg{ transform:scaleX(-1); }
[dir="rtl"] .auth-forgot:hover svg{ transform:scaleX(-1) translateX(2px); }

/* =====================================================================
   Validation states (login) — styling only. The framework adds these
   classes server-side; validation logic is unchanged.
   ===================================================================== */
/* Error summary: red panel that shakes when it appears. */
.auth-validation.validation-summary-errors{ color:#B42318; background:#FEF2F2;
  border:1px solid #F7CFCF; border-radius:10px; padding:10px 14px 10px 12px; font-size:.88rem;
  margin-bottom:16px; animation:auth-shake .4s ease; }
.auth-validation.validation-summary-errors ul{ margin:0; padding-inline-start:18px; }
/* Invalid input: red border + red focus ring (smooth via existing transition). */
.auth-card input.input-validation-error{ border-color:#E5484D; }
.auth-card input.input-validation-error:focus{ border-color:#E5484D;
  box-shadow:0 0 0 3px rgba(229,72,77,.18); }
/* Shake the whole field (input + icon + label) and tint them red. */
.auth-card .float-field:has(input.input-validation-error){ animation:auth-shake .4s ease; }
.auth-card .float-field:has(input.input-validation-error) .float-field__icon{ color:#E5484D; }
/* Success feedback stays green (see .auth-note); valid field gets a green edge. */
.auth-card input.input-validation-valid:not(:placeholder-shown):not(:focus){ border-color:#2FA86A; }

@keyframes auth-shake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(4px); } }
@media (prefers-reduced-motion: reduce){
  .auth-validation.validation-summary-errors,
  .auth-card .float-field:has(input.input-validation-error){ animation:none; } }

/* =====================================================================
   Login entrance + interaction animations (300ms) — CSS only.
   (Button hover + input focus already animate; these add the entrance.)
   ===================================================================== */
@keyframes auth-fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes auth-slide-up{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* Card fades in; its soft shadow eases on hover for a subtle lift. */
.auth-card{ animation:auth-fade-in .3s ease-out both; transition:box-shadow .3s ease; }
.auth-card:hover{ box-shadow:0 30px 72px rgba(16,40,67,.16), 0 10px 22px rgba(16,40,67,.08); }

/* Inputs slide upward, lightly staggered (300ms each). */
.auth-card .float-field{ animation:auth-slide-up .3s ease-out both; animation-delay:.10s; }
.auth-card .float-field + .float-field{ animation-delay:.18s; }

@media (prefers-reduced-motion: reduce){
  .auth-card, .auth-card .float-field{ animation:none; }
  .auth-card{ transition:none; }
}

/* Accessibility — visible keyboard focus ring for links on the auth card. */
.auth-card a:focus-visible{ outline:2px solid #1D4ED8; outline-offset:3px; border-radius:4px; }

/* =====================================================================
   Microsoft Fluent design refinement (login) — CSS only. Tightens
   spacing / type / color / elevation / radius / consistency on the
   existing classes. No markup, ASP.NET controls, or IDs changed.
   Accent = Fluent communication blue #0078D4.
   ===================================================================== */

/* Surface: tighter radius + soft layered elevation + 8px-grid padding. */
.auth-card{ padding:40px 32px; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.08); }
@media (max-width:480px){ .auth-card{ padding:28px 20px; border-radius:10px; } }

/* Type ramp (Segoe): semibold title, neutral secondary text. */
.auth-card h1{ font-weight:600; letter-spacing:normal; color:#242424; margin:0 0 4px; }
.auth-card__sub{ color:#605E5C; font-size:.875rem; margin:0 0 24px; }
.auth-card__brand strong{ color:#605E5C; }

/* Spacing on the 8px grid. */
.auth-card .float-field{ margin-bottom:16px; }
.auth-row{ margin:4px 0 20px; }

/* Background: Fluent neutral base with faint accent light. */
.auth-body{ background:
  radial-gradient(1100px 620px at 8% -12%, rgba(0,120,212,.08), transparent 60%),
  radial-gradient(1000px 680px at 104% 4%, rgba(0,120,212,.06), transparent 55%),
  radial-gradient(880px 600px at 50% 118%, rgba(0,120,212,.07), transparent 60%),
  linear-gradient(180deg, #FBFBFC 0%, #F3F3F4 100%); }

/* Inputs: 6px radius, Fluent accent focus; consistent with the button. */
.auth-card input.float-input{ border-radius:6px; }
.auth-card input.float-input:focus{ border-color:#0078D4; box-shadow:0 0 0 3px rgba(0,120,212,.18); }
.auth-card .float-field__icon{ color:#605E5C; }
.auth-card .float-field:focus-within .float-field__icon{ color:#0078D4; }
.auth-card .float-label{ color:#605E5C; }
.auth-card input.float-input:focus + .float-label,
.auth-card input.float-input:not(:placeholder-shown) + .float-label{ color:#106EBE; }

/* Password toggle: Fluent accent, 6px radius. */
.auth-card .pw-toggle{ border-radius:6px; }
.auth-card .pw-toggle:hover{ color:#0078D4; background:#F3F9FD; }
.auth-card .pw-toggle.is-revealed{ color:#0078D4; }
.auth-card .pw-toggle:focus-visible{ box-shadow:0 0 0 3px rgba(0,120,212,.30); }

/* Remember-me: Fluent accent, 4px radius. */
.auth-remember input[type=checkbox]{ border-radius:4px; }
.auth-remember input[type=checkbox]:checked{ background:#0078D4; border-color:#0078D4; }
.auth-remember:hover input[type=checkbox]{ border-color:#0078D4; box-shadow:0 0 0 3px rgba(0,120,212,.12); }
.auth-remember input[type=checkbox]:focus-visible{ box-shadow:0 0 0 3px rgba(0,120,212,.32); }

/* Links: Fluent accent + matching focus ring. */
.auth-forgot{ color:#106EBE; }
.auth-card a:focus-visible{ outline-color:#0078D4; }

/* Primary button: solid Fluent blue, color-state interaction, Fluent focus ring. */
.auth-submit{ height:52px; border-radius:6px; font-weight:600;
  background:#0078D4; box-shadow:0 2px 4px rgba(0,0,0,.12); }
.auth-submit:hover{ background:#106EBE; transform:translateY(-1px); filter:none;
  box-shadow:0 4px 8px rgba(0,0,0,.14); }
.auth-submit:active{ background:#005A9E; transform:translateY(0); }
.auth-submit:focus-visible{ box-shadow:0 0 0 2px #fff, 0 0 0 4px #0078D4; }
@media (prefers-reduced-motion: reduce){ .auth-submit:hover{ transform:none; } }

/* Keep invalid/success states authoritative (Fluent semantic colors). */
.auth-card input.input-validation-error,
.auth-card input.input-validation-error:focus{ border-color:#D13438; }
.auth-card input.input-validation-error:focus{ box-shadow:0 0 0 3px rgba(209,52,56,.20); }
.auth-card .float-field:has(input.input-validation-error) .float-field__icon{ color:#D13438; }
.auth-validation.validation-summary-errors{ background:#FDE7E9; border-color:#F1BBBE; color:#A4262C; }
.auth-note{ background:#DFF6DD; border-color:#BAD9B5; color:#0E700E; }

/* Captcha row on the auth card (forgot-password). */
.auth-captcha{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.auth-captcha img{ height:46px; width:auto; border:1px solid #E1E8EF; border-radius:6px; background:#fff; }
.auth-captcha__refresh{ font-size:.85rem; font-weight:600; color:#106EBE; text-decoration:none; white-space:nowrap; }
.auth-captcha__refresh:hover{ text-decoration:underline; }

/* =====================================================================
   Provision tenant — two-column dashboard (operator). Visual only.
   ===================================================================== */
.prov{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:24px; align-items:start; }
.prov__info{ position:sticky; top:24px; }
.prov-card{ background:#fff; border:1px solid #EAEEF3; border-radius:20px;
  box-shadow:0 10px 30px rgba(16,40,67,.06), 0 2px 8px rgba(16,40,67,.04); padding:28px; }
.prov-card + .prov-card{ margin-top:20px; }

.prov-header{ display:flex; align-items:center; gap:16px; margin:0 0 24px; }
.prov-header__icon{ flex:0 0 auto; width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(135deg, #0078D4, #005A9E); color:#fff; box-shadow:0 6px 16px rgba(0,120,212,.28); }
.prov-header__icon svg{ width:28px; height:28px; }
.prov-header h1{ margin:0 0 4px; font-size:1.6rem; letter-spacing:-.01em; color:#1A2733; }
.prov-header__sub{ margin:0; color:#56697B; font-size:.95rem; line-height:1.5; }

.prov__info h2{ font-size:1.15rem; margin:0 0 8px; letter-spacing:-.01em; }
.prov__lead{ color:#56697B; margin:0 0 22px; line-height:1.6; font-size:.95rem; }
.prov-steps{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.prov-step{ display:flex; gap:12px; align-items:flex-start; }
.prov-step__num{ flex:0 0 auto; width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  background:#EAF1FF; color:#1D4ED8; font-weight:700; font-size:.85rem; }
.prov-step__txt strong{ display:block; font-size:.92rem; color:#1A2733; margin-bottom:2px; }
.prov-step__txt span{ font-size:.85rem; color:#56697B; line-height:1.45; }
.prov-note{ display:flex; gap:10px; align-items:flex-start; margin:22px 0 0; padding-top:18px;
  border-top:1px solid #EEF2F6; font-size:.85rem; color:#56697B; line-height:1.5; }
.prov-note svg{ flex:0 0 auto; width:18px; height:18px; color:#1D4ED8; margin-top:1px; }

.prov-form h2{ margin:0 0 4px; font-size:1.25rem; }
.prov-form__sub{ color:#56697B; margin:0 0 22px; font-size:.9rem; }
.prov-field{ margin-bottom:16px; }
.prov-field > label{ display:block; font-size:.85rem; font-weight:600; color:#3A4756; margin-bottom:6px; }
.prov-field input, .prov-field select{ width:100%; }
.prov-field code{ background:#F1F5F9; padding:1px 5px; border-radius:4px; font-size:.85em; }
.prov-hint{ display:block; margin-top:6px; font-size:.8rem; color:#6B7A8D; line-height:1.4; }
.prov-hide{ display:none !important; }

/* Billing model as friendly cards */
.bill-choice{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px){ .bill-choice{ grid-template-columns:1fr; } }
.bill-opt{ text-align:left; cursor:pointer; padding:14px 16px; border:1.5px solid #E1E7EF; border-radius:12px;
  background:#fff; display:flex; flex-direction:column; gap:4px; transition:border-color .12s, box-shadow .12s, background .12s; }
.bill-opt:hover{ border-color:#B8C6D8; }
.bill-opt.is-active{ border-color:#2563EB; background:#F5F8FF; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.bill-opt__title{ font-weight:700; color:#101E2E; font-size:.98rem; }
.bill-opt.is-active .bill-opt__title{ color:#1D4ED8; }
.bill-opt__desc{ font-size:.82rem; color:#6B7A8D; line-height:1.4; }

/* Initial-term picker */
.term-picker{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.term-chips{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.term-chip{ cursor:pointer; padding:6px 12px; border:1px solid #D8E0EA; border-radius:999px; background:#fff;
  font-size:.85rem; font-weight:600; color:#3A4756; transition:all .12s; }
.term-chip:hover{ border-color:#2563EB; color:#1D4ED8; background:#F5F8FF; }
.term-input{ width:88px; }
.term-suffix{ font-size:.85rem; color:#6B7A8D; }
.prov-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.prov-fieldset{ border:1px solid #EAEEF3; border-radius:14px; padding:18px 18px 4px; margin:8px 0 22px; }
.prov-fieldset legend{ font-size:.8rem; font-weight:600; color:#56697B; padding:0 6px; }
.prov-actions{ display:flex; align-items:center; gap:16px; margin-top:4px; }
.prov-cancel{ color:#56697B; text-decoration:none; font-weight:600; }
.prov-cancel:hover{ color:#1A2733; text-decoration:underline; }

@media (max-width:1200px){
  .prov{ grid-template-columns:1fr; }
  .prov__info, .prov__preview{ position:static; }
}
@media (max-width:900px){
  .prov-grid-2{ grid-template-columns:1fr; }
}

/* Live tenant preview (right column) — dashboard-style. */
.prov__preview{ position:sticky; top:24px; }
.prov-preview__eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#8A96A5; margin-bottom:14px; }
.prov-preview__head{ display:flex; align-items:center; gap:12px; padding-bottom:18px; margin-bottom:6px;
  border-bottom:1px solid #EEF2F6; }
.prov-preview__logo{ flex:0 0 auto; width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, #0078D4, #005A9E); color:#fff; font-weight:700; font-size:1.05rem;
  box-shadow:0 4px 12px rgba(0,120,212,.25); overflow:hidden; }
.prov-preview__logo img{ width:100%; height:100%; object-fit:cover; }
.prov-preview__name{ display:block; font-size:1rem; font-weight:700; color:#1A2733; line-height:1.2; }
.prov-preview__url{ display:block; font-size:.82rem; color:#56697B; margin-top:2px; }
.prov-preview__list{ margin:0; padding:0; }
.prov-preview__list > div{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 0; border-bottom:1px solid #F1F5F9; }
.prov-preview__list > div:last-child{ border-bottom:0; padding-bottom:0; }
.prov-preview__list dt{ font-size:.82rem; color:#56697B; }
.prov-preview__list dd{ margin:0; font-size:.88rem; font-weight:600; color:#1A2733; text-align:end; }
.prov-preview__list dd .muted{ font-weight:400; color:#8A96A5; }
.prov-preview__status{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  background:#FEF3C7; color:#92400E; font-size:.78rem; font-weight:600; }
.prov-preview__status::before{ content:""; width:6px; height:6px; border-radius:50%; background:#D97706; }

/* Provision form split into titled section cards. */
.prov-forms{ min-width:0; }
.prov-section__head{ display:flex; gap:14px; align-items:flex-start;
  margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #EEF2F6; }
.prov-section__icon{ flex:0 0 auto; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; background:#EAF1FF; color:#1D4ED8; }
.prov-section__icon svg{ width:22px; height:22px; }
.prov-section__head h2{ margin:0 0 3px; font-size:1.1rem; letter-spacing:-.01em; }
.prov-section__head p{ margin:0; font-size:.85rem; color:#56697B; line-height:1.45; }
.prov-forms .prov-actions{ margin-top:20px; }

/* Provision action buttons — full-width gradient primary + secondary. */
.prov-actions{ display:grid; gap:12px; }
.prov-btn-primary{ width:100%; height:48px; border:0; border-radius:12px; color:#fff; font:inherit;
  font-size:1rem; font-weight:600; cursor:pointer;
  background:linear-gradient(135deg, #0078D4, #005A9E);
  box-shadow:0 8px 20px rgba(0,120,212,.30), 0 2px 6px rgba(0,90,158,.22);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; }
.prov-btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.05);
  box-shadow:0 12px 26px rgba(0,120,212,.40); }
.prov-btn-primary:active{ transform:translateY(0); }
.prov-btn-primary:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(0,120,212,.35); }
.prov-btn-secondary{ width:100%; height:48px; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #D1D5DB; border-radius:12px; color:#3A4756; font:inherit; font-weight:600;
  text-decoration:none; cursor:pointer; transition:background .2s ease, border-color .2s ease; }
.prov-btn-secondary:hover{ background:#F3F4F6; border-color:#9CA3AF; }
@media (prefers-reduced-motion: reduce){ .prov-btn-primary:hover{ transform:none; } }

/* =====================================================================
   Provision validation UI — keeps ASP.NET validation; presentational.
   ===================================================================== */
.req{ color:#D13438; margin-inline-start:2px; font-weight:700; }

.prov-success{ display:flex; align-items:center; gap:10px; margin-bottom:18px;
  background:#DFF6DD; border:1px solid #BAD9B5; color:#0E700E; border-radius:12px; padding:12px 14px;
  font-size:.9rem; font-weight:500; animation:prov-vin .3s ease both; }
.prov-success svg{ flex:0 0 auto; width:18px; height:18px; }

.prov-validation{ display:flex; align-items:flex-start; gap:12px; margin-bottom:18px;
  background:#FDE7E9; border:1px solid #F1BBBE; color:#A4262C; border-radius:12px; padding:13px 15px;
  animation:prov-vin .3s ease both, prov-shake .42s ease .28s; }
.prov-validation__icon{ flex:0 0 auto; width:20px; height:20px; margin-top:1px; color:#D13438; }
.prov-validation__body strong{ display:block; font-size:.9rem; margin-bottom:2px; }
.prov-validation__list ul{ margin:4px 0 0; padding-inline-start:18px; font-size:.85rem; }
.prov-validation__list li{ margin:2px 0; }

@keyframes prov-vin{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@keyframes prov-shake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }
@media (prefers-reduced-motion: reduce){ .prov-success, .prov-validation{ animation:none; } }

/* =====================================================================
   Microsoft Fluent refinement (Provision tenant) — CSS only. Unifies
   color / spacing / type / elevation / radius / consistency on existing
   classes. No markup, ASP.NET controls, or IDs changed. Accent #0078D4.
   ===================================================================== */

/* Cards: tighter radius + soft layered Fluent elevation. */
.prov-card{ border-radius:12px; border-color:#EDEBE9;
  box-shadow:0 4px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.05); }

/* Page header. */
.prov-header__icon{ border-radius:12px; }
.prov-header h1{ font-weight:600; color:#242424; }
.prov-header__sub{ color:#605E5C; }

/* Left info column — Fluent accent + neutral text. */
.prov__info h2{ font-weight:600; color:#242424; }
.prov__lead{ color:#605E5C; }
.prov-step__num{ background:#EFF6FC; color:#0078D4; border-radius:8px; }
.prov-step__txt strong{ color:#242424; }
.prov-step__txt span{ color:#605E5C; }
.prov-note{ color:#605E5C; }
.prov-note svg{ color:#0078D4; }

/* Section cards. */
.prov-section__icon{ background:#EFF6FC; color:#0078D4; border-radius:10px; }
.prov-section__head h2{ font-weight:600; color:#242424; }
.prov-section__head p{ color:#605E5C; }

/* Fields — Fluent control radius + accent focus, neutral labels. */
.prov-field > label{ color:#323130; }
.prov-forms input, .prov-forms select{ border-radius:6px; border-color:#D1D1D1; }
.prov-forms input:focus, .prov-forms select:focus{ border-color:#0078D4; box-shadow:0 0 0 3px rgba(0,120,212,.18); }
.prov-field code{ background:#F3F2F1; }

/* Validation — tighter radius (semantic colors already Fluent). */
.prov-success, .prov-validation{ border-radius:8px; }

/* Buttons — Fluent radius + cleaner elevation; keep blue gradient primary. */
.prov-btn-primary{ border-radius:6px; background:linear-gradient(135deg,#0078D4,#005A9E);
  box-shadow:0 4px 10px rgba(0,120,212,.24); }
.prov-btn-primary:hover{ box-shadow:0 6px 14px rgba(0,120,212,.30); }
.prov-btn-secondary{ border-radius:6px; border-color:#D1D1D1; color:#323130; }
.prov-btn-secondary:hover{ background:#F3F2F1; border-color:#A19F9D; }

/* Preview card. */
.prov-preview__eyebrow{ color:#8A8886; }
.prov-preview__logo{ border-radius:10px; }
.prov-preview__name{ color:#242424; }
.prov-preview__url{ color:#605E5C; }
.prov-preview__list dt{ color:#605E5C; }
.prov-preview__list dd{ color:#242424; }

/* Keep invalid inputs authoritative (Fluent error red). */
.prov-forms input.input-validation-error,
.prov-forms input.input-validation-error:focus{ border-color:#D13438; }
.prov-forms input.input-validation-error:focus{ box-shadow:0 0 0 3px rgba(209,52,56,.20); }

/* Visually-hidden utility — present for assistive tech, off-screen visually. */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* =====================================================================
   Operator dashboard — statistic cards.
   ===================================================================== */
/* auto-fit, not a fixed four. Every card in here is behind a module check — membership
   KPIs only where there is a membership programme, the events card only where there are
   events — so a tenant without the full set was leaving holes in the row and the one card
   it did have sat marooned at the left. auto-fit collapses the empty tracks instead, and
   whatever cards exist share the width evenly. */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px; margin:18px 0 24px; }
.stat-card{ position:relative; display:flex; align-items:center; gap:16px; background:#fff; border:1px solid #EDF0F4;
  border-radius:18px; padding:20px 22px; overflow:hidden;
  box-shadow:0 6px 18px rgba(16,40,67,.06), 0 1px 3px rgba(16,40,67,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
/* faint decorative glow bleeding from the icon side */
.stat-card::after{ content:""; position:absolute; inset-inline-end:-40px; top:-40px; width:120px; height:120px;
  border-radius:50%; background:radial-gradient(circle, rgba(37,99,235,.06), transparent 70%); pointer-events:none; }
.stat-card:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(16,40,67,.13); border-color:#E2E8F0; }
.stat-card__icon{ flex:0 0 auto; width:52px; height:52px; border-radius:15px; display:grid; place-items:center; color:#fff;
  box-shadow:0 8px 16px rgba(16,40,67,.16); }
.stat-card__icon svg{ width:25px; height:25px; }
.stat-card__icon--blue{ background:linear-gradient(135deg,#5B9BFF,#2563EB); }
.stat-card__icon--green{ background:linear-gradient(135deg,#34D399,#0E9F6E); }
.stat-card__icon--purple{ background:linear-gradient(135deg,#A78BFA,#7C3AED); }
.stat-card__icon--amber{ background:linear-gradient(135deg,#FBBF24,#D97706); }
.stat-card__value{ font-size:1.85rem; font-weight:800; color:#1A2733; line-height:1.05; letter-spacing:-.01em; }
.stat-card__unit{ font-size:.9rem; font-weight:700; color:#56697B; }
.stat-card__label{ font-size:.85rem; color:#56697B; margin-top:2px; }
.stat-card__hint{ font-size:.75rem; color:#7A8A99; margin-top:3px; }
/* The two breakpoints that used to step this down to 2 then 1 column are gone: minmax
   already does it, and leaving them in would have overridden auto-fit and put the holes
   back on exactly the narrow screens where a marooned card looks worst. */
@media (prefers-reduced-motion: reduce){ .stat-card:hover{ transform:none; } }

/* Event check-in card (attendance) */
.checkin-card{ max-width:600px; margin:0 0 26px; padding:0; overflow:hidden;
  border:1px solid var(--ods-border,#e4ecf3); border-radius:16px; background:var(--ods-surface,#fff);
  box-shadow:0 10px 30px rgba(16,40,67,.06); }
.checkin-card__head{ display:flex; align-items:center; gap:15px; padding:20px 24px;
  background:linear-gradient(120deg, color-mix(in srgb, var(--ods-primary) 9%, #fff), color-mix(in srgb, var(--ods-accent) 10%, #fff));
  border-bottom:1px solid var(--ods-border,#e8eef4); }
.checkin-card__icon{ flex:0 0 auto; width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,var(--ods-accent),var(--ods-primary));
  box-shadow:0 6px 16px color-mix(in srgb, var(--ods-primary) 30%, transparent); }
.checkin-card__icon svg{ width:26px; height:26px; }
.checkin-card__head h3{ margin:0 0 3px; font-size:1.1rem; }
.checkin-card__head p{ margin:0; font-size:.85rem; color:var(--ods-ink-soft); }
.checkin-card__form{ display:flex; gap:12px; padding:22px 24px 8px; }
.checkin-field{ flex:1; display:flex; align-items:center; gap:9px; padding:0 14px;
  border:1.5px solid var(--ods-border,#dbe6ef); border-radius:11px; background:var(--ods-surface-2,#f6f9fc);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.checkin-field:focus-within{ border-color:var(--ods-primary); background:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ods-primary) 16%, transparent); }
.checkin-field__ico{ width:19px; height:19px; color:var(--ods-ink-soft); flex:0 0 auto; }
.checkin-field input{ flex:1; border:none; background:transparent; outline:none; padding:12px 0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.06em; font-size:.98rem; color:var(--ods-ink); }
.checkin-card__form .btn{ align-self:stretch; padding-inline:24px; }
.checkin-card__hint{ margin:0; padding:0 24px 20px; font-size:.78rem; color:var(--ods-ink-soft);
  display:flex; align-items:center; gap:6px; }
.checkin-card__hint svg{ width:15px; height:15px; color:var(--ods-ok,#0E9F6E); flex:0 0 auto; }
@media (max-width:480px){ .checkin-card__form{ flex-direction:column; } }

/* Module-based pricing tiers (operator provisioning) */
.plan-picker{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.plan-opt{ cursor:pointer; }
.plan-opt input{ position:absolute; opacity:0; width:0; height:0; }
.plan-opt__card{ display:flex; flex-direction:column; gap:7px; height:100%; padding:16px;
  border:1.5px solid var(--ods-border,#dbe6ef); border-radius:12px; background:var(--ods-surface,#fff);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.plan-opt:hover .plan-opt__card{ border-color:color-mix(in srgb, var(--ods-primary) 40%, #dbe6ef); }
.plan-opt input:checked + .plan-opt__card{ border-color:var(--ods-primary); background:color-mix(in srgb, var(--ods-primary) 5%, #fff);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ods-primary) 15%, transparent); }
.plan-opt input:focus-visible + .plan-opt__card{ outline:2px solid var(--ods-primary); outline-offset:2px; }
.plan-opt__top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.plan-opt__name{ font-weight:800; font-size:1.02rem; color:var(--ods-ink); }
.plan-opt__price{ font-weight:800; color:var(--ods-primary); font-size:1.05rem; white-space:nowrap; }
.plan-opt__price span{ font-size:.7rem; font-weight:700; color:var(--ods-ink-soft); }
.plan-opt__desc{ font-size:.82rem; color:var(--ods-ink-soft); line-height:1.4; }
.plan-opt__mods{ margin-top:auto; font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ods-primary); background:var(--ods-primary-tint,#eef4fb); align-self:flex-start; padding:3px 9px; border-radius:999px; }
.settings-row--plan{ gap:12px; flex-wrap:wrap; background:var(--ods-surface-2,#f6f9fc); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.plan-apply{ display:flex; gap:8px; align-items:center; margin-inline-start:auto; }
.plan-apply select{ padding:8px 11px; border:1px solid var(--ods-border,#dbe6ef); border-radius:9px; background:#fff; font-size:.88rem; }
@media (max-width:640px){ .plan-picker{ grid-template-columns:1fr; } }

/* --- Admin dashboard: activity panels --- */
/* Same reason as .stat-grid: both panels are behind a module check, so an association
   with finance but no events showed the payments panel stranded in the left half with a
   column of nothing beside it. Alone, it now takes the full width. */
.dash-panels{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:16px; margin:4px 0 26px; }
@media (max-width:820px){ .dash-panels{ grid-template-columns:1fr; } }
.dash-panel{ padding:18px 20px; }
.dash-panel__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.dash-panel__head h2{ font-size:1.02rem; margin:0; }
.dash-panel__empty{ padding:10px 0; }
.dash-section-title{ font-size:1.05rem; margin:8px 0 12px; }

.fill-list, .pay-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.fill-row{ padding:11px 0; border-top:1px solid #EDF0F4; }
.fill-row:first-child{ border-top:0; }
.fill-row__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.fill-row__title{ font-weight:650; color:#1A2733; }
.fill-row__count{ font-variant-numeric:tabular-nums; font-weight:700; color:#33475B; white-space:nowrap; }
.fill-row__meta{ font-size:.78rem; margin-top:1px; }
.fill-bar{ margin-top:8px; height:7px; border-radius:99px; background:#EDF1F5; overflow:hidden; }
.fill-bar__fill{ display:block; height:100%; border-radius:99px; background:#1B9AAA; transition:width .3s ease; }
.fill-bar__fill.is-low{ background:#1B9AAA; }
.fill-bar__fill.is-mid{ background:#F59E0B; }
.fill-bar__fill.is-high{ background:#E5533C; }

/* --- Conference dashboard: breakdowns as labelled bars --- */
/* Bars rather than a chart library: the app carries none, and a list of labelled rows reads the same in
   Arabic as in English, which a canvas chart with its own axis text does not. */
.dash-panel--wide{ grid-column:1 / -1; }
.dash-panel__head h3{ font-size:1rem; margin:0; }
.dash-sub{ font-size:.86rem; color:#56697B; margin:16px 0 6px; }
.dash-bars{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.dash-bars__row{ display:grid; grid-template-columns:minmax(0, 11rem) 1fr auto; align-items:center; gap:10px; font-size:.88rem; }
.dash-bars__label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#1A2733; }
/* For labels that only differ at the end — "Dentist / Dental Specialist · Full conference (member rate)"
   and "(non-member rate)" truncate to the same text — the label takes its own line above the bar. */
.dash-bars--stacked .dash-bars__row{ grid-template-columns:1fr auto; row-gap:4px; }
.dash-bars--stacked .dash-bars__label{ grid-column:1 / -1; white-space:normal; }
.dash-bars__track{ display:block; height:8px; border-radius:99px; background:#EDF1F5; overflow:hidden; min-width:40px; }
.dash-bars__fill{ display:block; height:100%; border-radius:99px; background:#2563EB; }
.dash-bars__fill--alt{ background:#7C3AED; }
.dash-bars__num{ font-variant-numeric:tabular-nums; font-weight:700; color:#33475B; white-space:nowrap; }
.dash-bars__num .muted{ font-weight:500; font-size:.78rem; margin-inline-start:6px; }
.dash-inline{ display:grid; grid-template-columns:1fr 2.5rem; align-items:center; gap:8px; }
.dash-inline .num{ text-align:end; font-weight:700; }
.table.dash-weeks{ min-width:0; }
.table.dash-weeks tbody td{ padding:8px 12px; }
.dash-facts{ list-style:none; margin:0; padding:0; }
.dash-facts li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-top:1px solid #EDF0F4; font-size:.9rem; }
.dash-facts li:first-child{ border-top:0; }
.dash-facts strong{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.dash-facts .muted{ font-weight:500; font-size:.78rem; }
@media (max-width:560px){ .dash-bars__row{ grid-template-columns:minmax(0, 8rem) 1fr auto; } }

.pay-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid #EDF0F4; }
.pay-row:first-child{ border-top:0; }
.pay-row__main{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.pay-row__desc{ font-weight:600; color:#1A2733; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pay-row__who{ font-size:.78rem; }

/* Where a payment came from — membership, conference, workshop — as a small tag on finance and the dashboard. */
.src-pill{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:.74rem; font-weight:600; line-height:1.5;
  letter-spacing:.01em; white-space:nowrap; vertical-align:middle; }
.src-pill--membership{ background:#E7EEF5; color:#0F4C81; }
.src-pill--conference{ background:#FDF1DC; color:#8A5A00; }
.src-pill--workshop{ background:#E3F3F5; color:#0E7681; }
.src-pill--other{ background:#EEF1F4; color:#5F6F7D; }
.pay-row__side{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; white-space:nowrap; }
.pay-row__amt{ font-weight:750; color:#0F7A4A; font-variant-numeric:tabular-nums; }
.pay-row__when{ font-size:.76rem; }

/* Operator dashboard header. */
.dash-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.dash-header h1{ margin:0 0 4px; color:var(--primary); font-size:1.6rem; font-weight:700; letter-spacing:-.01em; }
.dash-header__sub{ margin:0; color:#56697B; font-size:.95rem; line-height:1.5; max-width:62ch; }
/* Two controls where there used to be one: keep them on one line, and let them wrap together
   rather than the ghost button drifting under the heading on a narrow screen. */
.dash-header__actions{ flex:0 0 auto; display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }

.dash-header__action{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 20px; border-radius:12px; color:#fff; text-decoration:none; font-weight:600; font-size:.95rem;
  background:linear-gradient(135deg, #2563EB, #1D4ED8);
  box-shadow:0 8px 20px rgba(37,99,235,.30), 0 2px 6px rgba(29,78,216,.20);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; }
.dash-header__action svg{ width:17px; height:17px; }
.dash-header__action:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 12px 26px rgba(37,99,235,.40); }
.dash-header__action:active{ transform:translateY(0); }
.dash-header__action:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.35); }
@media (max-width:560px){ .dash-header__action{ width:100%; } }
@media (prefers-reduced-motion: reduce){ .dash-header__action:hover{ transform:none; } }

/* =====================================================================
   Enterprise data table (operator dashboard) — carded, sticky header,
   zebra, hover, soft borders, responsive.
   ===================================================================== */
.data-card{ background:#fff; border:1px solid #EDF0F4; border-radius:18px; overflow:hidden;
  box-shadow:0 6px 18px rgba(16,40,67,.06), 0 1px 3px rgba(16,40,67,.05); }
/* `.table` / `.table-wrap` are the same table standing inside an ordinary .card
   instead of a .data-card — which is what the conference admin screens use. They
   are aliased onto these rules rather than given their own set: both were
   previously undefined, so those screens rendered raw browser tables, and giving
   them a second look would have replaced one inconsistency with another.
   What is NOT shared is the sticky header and the 70vh cap: those belong to the
   operator console's own scrolling box, and .table's card is already the box. */
.data-table-wrap{ overflow:auto; max-height:70vh; }
.table-wrap{ overflow-x:auto; }
.data-table, .table{ width:100%; min-width:760px; border-collapse:separate; border-spacing:0;
  font-size:.92rem; color:#1A2733; }
.data-table thead th{ position:sticky; top:0; z-index:1; }
.data-table thead th, .table thead th{ background:#F7F9FC; color:#56697B;
  font-weight:600; font-size:.74rem; letter-spacing:.05em; text-transform:uppercase;
  padding:13px 16px; border-bottom:1px solid #E6EAF0; white-space:nowrap; }
/* left/right for the operator console, which is English-only, and start/end for the
   tenant screens, which are not — this is a bilingual product and the conference
   tables are read in Arabic. Kept apart rather than unified so that fixing the
   conference layout does not quietly re-align every operator table in RTL. */
.data-table thead th{ text-align:left; }
.data-table .num{ text-align:right; }
.table thead th{ text-align:start; }
.table .num{ text-align:end; }
.data-table tbody td, .table tbody td{ padding:14px 16px; border-bottom:1px solid #F1F4F8; vertical-align:middle; }
.data-table tbody tr:last-child td, .table tbody tr:last-child td{ border-bottom:0; }
.data-table tbody tr:nth-child(even), .table tbody tr:nth-child(even){ background:#FAFBFD; }
.data-table tbody tr:hover, .table tbody tr:hover{ background:#EFF4FF; }
.data-table .num, .table .num{ font-variant-numeric:tabular-nums; }
.data-table .muted, .table .muted{ font-size:.85rem; }
/* Bare links only. A .btn in a cell keeps its own colour — this selector outranks
   .btn--ghost, and without the exclusion every ghost button in a table turned blue. */
.data-table a:not(.btn), .table a:not(.btn){ color:#2563EB; font-weight:600; text-decoration:none; }
.data-table a:not(.btn):hover, .table a:not(.btn):hover{ text-decoration:underline; }
@media (max-width:560px){ .data-table-wrap{ max-height:none; } }

/* Status pills (tenant table). */
.status-pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-size:.78rem; font-weight:600; line-height:1.5; white-space:nowrap; }
.status-pill__dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.status-pill--green{ background:#E7F6EE; color:#0E7A4B; }
.status-pill--green .status-pill__dot{ background:#16A34A; }
.status-pill--yellow{ background:#FEF6E0; color:#92660A; }
.status-pill--yellow .status-pill__dot{ background:#D9A406; }
.status-pill--red{ background:#FDECEC; color:#B42318; }
.status-pill--red .status-pill__dot{ background:#E5484D; }
.status-pill--gray{ background:#F1F4F8; color:#56697B; }
.status-pill--gray .status-pill__dot{ background:#9CA3AF; }

/* Manage action button (tenant table) — scoped to beat the generic .data-table a. */
.data-table .btn-manage{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  border-radius:8px; background:#EAF1FF; color:#1D4ED8; border:1px solid #DCE7FB;
  font-size:.82rem; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .15s ease, box-shadow .2s ease; }
.data-table .btn-manage svg{ width:14px; height:14px; }
.data-table .btn-manage:hover{ background:#2563EB; color:#fff; border-color:#2563EB;
  text-decoration:none; transform:translateY(-1px); box-shadow:0 4px 10px rgba(37,99,235,.28); }
.data-table .btn-manage:active{ transform:translateY(0); }
.data-table .btn-manage:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.3); }
/* A delete beside an edit: red at rest and on hover, so it never reads as the safe button next to it. */
.data-table .btn-manage--danger{ color:#B42318; border-color:#F3C6C2; }
.data-table .btn-manage--danger:hover{ background:#B42318; color:#fff; border-color:#B42318; }
.data-table .btn-manage--danger:focus-visible{ box-shadow:0 0 0 3px rgba(180,35,24,.3); }
@media (prefers-reduced-motion: reduce){ .data-table .btn-manage:hover{ transform:none; } }

/* =====================================================================
   Tenant table toolbar (operator dashboard).
   ===================================================================== */
.toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.toolbar__search{ position:relative; flex:1 1 240px; min-width:200px; }
.toolbar__search svg{ position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:#8A96A5; pointer-events:none; }
.toolbar__search input{ width:100%; height:40px; padding:0 12px 0 38px; border:1px solid #DCE3EC;
  border-radius:10px; background:#fff; font:inherit; color:#1A2733;
  transition:border-color .18s ease, box-shadow .18s ease; }
.toolbar__search input:focus{ outline:none; border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.toolbar__select{ height:40px; padding:0 12px; border:1px solid #DCE3EC; border-radius:10px; background:#fff;
  font:inherit; color:#3A4756; cursor:pointer; transition:border-color .18s ease, box-shadow .18s ease; }
.toolbar__select:focus{ outline:none; border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.toolbar__spacer{ flex:1 1 auto; }
.toolbar__btn{ display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px;
  border:1px solid #DCE3EC; border-radius:10px; background:#fff; color:#3A4756; font:inherit; font-weight:600;
  font-size:.88rem; cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease; }
.toolbar__btn svg{ width:15px; height:15px; }
.toolbar__btn:hover{ background:#F3F6FA; border-color:#C3CEDC; }
.toolbar__btn--primary{ background:#2563EB; color:#fff; border-color:#2563EB; }
.toolbar__btn--primary:hover{ background:#1D4ED8; border-color:#1D4ED8; }
.toolbar-empty{ margin:14px 2px; color:#56697B; font-size:.9rem; }
@media (max-width:640px){ .toolbar__spacer{ display:none; } .toolbar > *{ flex:1 1 auto; } }

/* =====================================================================
   Tenant empty state (operator dashboard) — professional illustration card.
   ===================================================================== */
.tenant-empty{ background:#fff; border:1px solid #EDF0F4; border-radius:18px;
  box-shadow:0 6px 18px rgba(16,40,67,.06), 0 1px 3px rgba(16,40,67,.05);
  text-align:center; padding:48px 28px; max-width:560px; margin:8px auto; }
.tenant-empty__art{ width:160px; height:130px; margin:0 auto 8px; display:block; }
.error-code{ font-size:4rem; font-weight:800; line-height:1; letter-spacing:-.02em;
  color:var(--ods-primary); opacity:.16; margin-bottom:4px; }
.tenant-empty h2{ margin:0 0 8px; font-size:1.35rem; color:#1A2733; }
.tenant-empty p{ margin:0 auto 24px; color:#56697B; max-width:380px; line-height:1.55; }
.tenant-empty__cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding:0 26px; border-radius:12px; color:#fff; text-decoration:none; font-weight:600; font-size:1rem;
  background:linear-gradient(135deg, #2563EB, #1D4ED8); box-shadow:0 8px 22px rgba(37,99,235,.32);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; }
.tenant-empty__cta svg{ width:18px; height:18px; }
.tenant-empty__cta:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 12px 28px rgba(37,99,235,.42); }
.tenant-empty__cta:active{ transform:translateY(0); }
.tenant-empty__cta:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.35); }
@media (prefers-reduced-motion: reduce){ .tenant-empty__cta:hover{ transform:none; } }

/* =====================================================================
   Member page utilities — consistent page headers, alerts, list cards.
   ===================================================================== */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:6px 0 26px; }
.page-head .eyebrow{ display:inline-block; margin-bottom:7px; }
.page-head h1{ margin:0; }
.page-head p.lead{ margin:6px 0 0; color:var(--ods-ink-soft); max-width:60ch; }
.head-stats{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 0; margin-top:12px; }
.head-stat{ display:inline-flex; align-items:baseline; gap:6px; padding-inline:18px; font-size:.88rem; color:var(--ods-ink-soft); }
.head-stat:first-child{ padding-inline-start:0; }
.head-stat + .head-stat{ border-inline-start:1px solid var(--ods-border); }
.head-stat strong{ font-size:1.4rem; font-weight:800; color:var(--ods-primary); line-height:1; letter-spacing:-.01em; }
.alert{ border:1px solid var(--ods-border); background:var(--ods-surface); border-radius:12px; padding:12px 16px; margin:0 0 18px; }
.alert--ok{ border-color:var(--ods-success); background:var(--ods-accent-tint); color:var(--ods-ink); }
.alert--error{ border-color:var(--ods-error); color:var(--ods-error); }
.alert--info{ background:var(--ods-primary-tint); color:var(--ods-primary-dark); border-color:transparent; }
.ecard__price{ font-weight:600; color:var(--ods-ink); margin:0 0 12px; }
.ecard__body a.ttl{ color:inherit; text-decoration:none; }
.ecard__body a.ttl:hover{ color:var(--ods-primary); }
/* directory search reused on the member directory page */
.member-search{ display:flex; gap:10px; margin:0 0 22px; flex-wrap:wrap; }
.member-search input{ flex:1 1 260px; height:46px; padding:0 14px; border:1px solid var(--ods-border);
  border-radius:12px; background:#fff; font:inherit; }
.member-search input:focus{ outline:none; border-color:var(--ods-primary); box-shadow:0 0 0 3px var(--ods-primary-tint); }

/* Members admin: the three readings of the accounts table (members / unpaid sign-ups / all accounts). */
.view-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 16px; }
.view-tabs a{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--ods-border);
  border-radius:999px; background:#fff; font-size:.88rem; font-weight:600; color:#3A4756; text-decoration:none; transition:all .12s; }
.view-tabs a:hover{ border-color:var(--ods-primary); color:var(--ods-primary); background:var(--ods-primary-tint); }
.view-tabs a.is-active{ border-color:var(--ods-primary); background:var(--ods-primary); color:#fff; }
.view-tabs__n{ display:inline-block; min-width:22px; padding:1px 7px; border-radius:999px; background:rgba(0,0,0,.08);
  font-size:.78rem; text-align:center; }
.view-tabs a.is-active .view-tabs__n{ background:rgba(255,255,255,.22); }

/* Member / admin forms (edit forms, directory profile, etc.) */
.mform{ max-width:640px; }
/* Excludes .pick/.pick-row/.chip: those are <label> elements too (the native radio/checkbox is hidden inside
   them), but they lay out their own contents via flex — without this exclusion, .mform label's higher
   specificity (a class + a type vs. their single class) silently wins and forces flex to render as block,
   which is why a pick's icon/dot ended up stacked above its text instead of beside it. */
.mform label:not(.pick):not(.pick-row):not(.chip){ display:block; font-weight:600; font-size:.85rem; color:var(--ods-ink); margin:0 0 7px; }
.mform p{ margin:0 0 18px; }
.mform .row{ display:flex; gap:16px; flex-wrap:wrap; }
.mform .row > *{ flex:1 1 200px; }
.mform input:not([type=checkbox]), .mform textarea, .mform select{ width:100%; min-height:46px; padding:12px 14px;
  border:1px solid var(--ods-border); border-radius:12px; background:#fff; font:inherit; color:var(--ods-ink);
  transition:border-color .16s ease, box-shadow .16s ease; }
.mform input:not([type=checkbox]):hover, .mform textarea:hover, .mform select:hover{ border-color:#C3CEDC; }
.mform input:focus, .mform textarea:focus, .mform select:focus{ outline:none; border-color:var(--ods-primary);
  box-shadow:0 0 0 3px var(--ods-primary-tint); }
.mform textarea{ min-height:100px; resize:vertical; line-height:1.5; }
.mform select{ appearance:none; -webkit-appearance:none; padding-inline-end:38px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2356697B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
html[dir="rtl"] .mform select{ background-position:left 14px center; }
.mform .check{ display:flex; align-items:center; gap:10px; font-weight:500; padding:12px 14px;
  border:1px solid var(--ods-border); border-radius:12px; background:var(--ods-surface); cursor:pointer; }
.mform .check input{ width:18px; height:18px; accent-color:var(--ods-primary); }
.mform .val-summary{ color:var(--ods-error); margin:0 0 16px; background:#FEF3F2; border:1px solid #FECDCA;
  border-radius:10px; padding:11px 14px; }
.mform .val-summary:empty{ display:none; }
/* asp-validation-summary/asp-validation-for always render a placeholder element even with zero errors
   (an ASP.NET Core TagHelper quirk, normally hidden by jquery.validate.unobtrusive.css — not present
   here), so without this the "valid" state is an empty red box on every single form page load. */
.mform .val-summary.validation-summary-valid{ display:none; }
.mform .field-error.field-validation-valid{ display:none; }
.mform__section{ font-size:.72rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--ods-ink-soft);
  margin:26px 0 15px; padding-top:20px; border-top:1px solid var(--ods-border); }
.mform__section:first-of-type{ border-top:none; padding-top:0; margin-top:6px; }

/* .btn-manage used on a <button> (attendance mark-attended) — reset button chrome */
.data-table button.btn-manage{ cursor:pointer; font-family:inherit; }

/* Certificate verification key-value list */
/* My directory profile: card with a gradient header band + form body */
.profile-card{ padding:0; overflow:hidden; max-width:760px; }
.profile-hero{ display:flex; align-items:center; gap:16px; padding:24px 26px;
  background:linear-gradient(120deg, var(--ods-primary), var(--ods-accent)); color:#fff; }
.profile-hero__avatar{ flex:none; width:60px; height:60px; border-radius:16px; display:grid; place-items:center;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28); color:#fff; font-weight:800; font-size:1.3rem; letter-spacing:.02em; }
.profile-hero__id{ display:flex; flex-direction:column; min-width:0; }
.profile-hero__id strong{ font-size:1.25rem; line-height:1.2; letter-spacing:-.01em; }
.profile-hero__id span{ font-size:.88rem; color:rgba(255,255,255,.85); margin-top:2px; }
.profile-body{ padding:24px 26px 26px; }
.profile-body .mform{ margin:0; }
/* "List me" opt-in callout */
.listing-toggle{ display:flex; align-items:flex-start; gap:11px; margin:6px 0 20px; padding:14px 16px;
  border:1px solid var(--ods-border); border-radius:12px; background:var(--ods-surface-2); cursor:pointer; }
.listing-toggle input{ margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--ods-primary); }
.listing-toggle strong{ display:block; font-size:.92rem; color:var(--ods-ink); }
.listing-toggle .muted{ font-size:.82rem; }
.mform--wide{ max-width:none; }
@media (max-width:560px){ .profile-hero{ padding:20px; gap:13px; } .profile-hero__avatar{ width:52px; height:52px; font-size:1.15rem; } .profile-body{ padding:20px; } }

/* Sandbox (dev) hosted-checkout page */
.sbx{ max-width:400px; margin:0 auto; }
.sbx__card{ background:#fff; border:1px solid var(--ods-border); border-radius:18px; overflow:hidden;
  box-shadow:0 18px 44px rgba(16,40,67,.12); }
.sbx__head{ display:flex; align-items:center; gap:9px; padding:14px 20px; font-weight:600; font-size:.92rem; color:#fff;
  background:linear-gradient(135deg, var(--ods-primary), var(--ods-primary-dark)); }
.sbx__lock svg{ width:16px; height:16px; display:block; }
.sbx__badge{ margin-inline-start:auto; background:rgba(255,255,255,.2); font-size:.62rem; font-weight:700;
  letter-spacing:.09em; padding:3px 9px; border-radius:999px; }
.sbx__body{ padding:24px 24px 22px; text-align:center; }
.sbx__amount-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ods-ink-soft); }
.sbx__amount{ font-size:2.2rem; font-weight:800; color:var(--ods-ink); letter-spacing:-.02em; margin:2px 0 0; }
.sbx__amount span{ font-size:1rem; font-weight:600; color:var(--ods-ink-soft); }
.sbx__desc{ color:var(--ods-ink-soft); margin:4px 0 0; }
.sbx__note{ display:flex; align-items:center; gap:8px; justify-content:center; background:#FFF7E6; border:1px solid #F5C97B;
  color:#8a5a00; border-radius:10px; padding:9px 12px; font-size:.8rem; margin:18px 0; }
.sbx__note svg{ width:16px; height:16px; flex:0 0 auto; }
.sbx__field{ display:flex; align-items:center; gap:10px; border:1px solid var(--ods-border); border-radius:10px;
  padding:12px 14px; margin:0 0 16px; background:#F8FAFC; color:var(--ods-ink-soft); }
.sbx__field svg{ width:20px; height:20px; flex:0 0 auto; }
.sbx__field-text{ font-family:ui-monospace,monospace; letter-spacing:2px; color:var(--ods-ink); }
.sbx__field-meta{ margin-inline-start:auto; font-family:ui-monospace,monospace; font-size:.85rem; }
.sbx__actions form{ margin:0 0 10px; }
.sbx__actions form:last-child{ margin-bottom:0; }
.sbx__foot{ padding:12px 20px; border-top:1px solid var(--ods-border); text-align:center; font-size:.72rem; color:var(--ods-ink-soft); }
.sbx__foot code{ font-family:ui-monospace,monospace; }

/* Payment receipt */
.receipt{ max-width:480px; margin:0 auto; background:#fff; border:1px solid var(--ods-border); border-radius:18px;
  padding:26px 28px; box-shadow:0 14px 40px rgba(16,40,67,.08); }
.receipt__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 6px; }
.receipt__brand{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ods-ink); }
.receipt__brand img{ width:30px; height:30px; object-fit:contain; border-radius:6px; }
.receipt__label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ods-ink-soft); font-weight:700; }
.receipt__meta{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:4px 0 8px; font-size:.88rem; }
.receipt__meta dt{ color:var(--ods-ink-soft); }
.receipt__meta dd{ margin:0; text-align:end; font-family:ui-monospace,monospace; color:var(--ods-ink); }
.receipt__line{ display:flex; justify-content:space-between; gap:12px; padding:13px 0; border-top:1px solid var(--ods-border); }
.receipt__total{ display:flex; justify-content:space-between; gap:12px; padding:14px 0 2px; border-top:2px solid var(--ods-border); font-size:1.1rem; }
.receipt__total strong{ color:var(--ods-primary); }
.verify-badge--pending{ background:#FFF7E6; border:1px solid #F5C97B; }
.verify-badge--pending .verify-badge__disc{ background:#B26B00; }
@media print{
  .topbar, .footer, .receipt-actions{ display:none !important; }
  .receipt{ box-shadow:none; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* Public certificate verification page */
.verify-page{ max-width:520px; margin:0 auto; }
.verify-card{ background:#fff; border:1px solid var(--ods-border); border-radius:18px; padding:28px 30px;
  box-shadow:0 14px 40px rgba(16,40,67,.08); }
.verify-card__brand{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ods-ink); margin:0 0 8px; }
.verify-card__brand img{ width:32px; height:32px; object-fit:contain; border-radius:6px; }
.verify-badge{ display:flex; align-items:center; gap:14px; margin:14px 0 18px; padding:16px 18px; border-radius:14px; }
.verify-badge--ok{ background:#ECFDF3; border:1px solid #A6F4C5; }
.verify-badge--bad{ background:#FEF3F2; border:1px solid #FECDCA; }
.verify-badge__disc{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; }
.verify-badge--ok .verify-badge__disc{ background:#16A34A; }
.verify-badge--bad .verify-badge__disc{ background:#B42318; }
.verify-badge__disc svg{ width:22px; height:22px; }
.verify-badge strong{ display:block; font-size:1.05rem; color:var(--ods-ink); }
.verify-badge span{ color:var(--ods-ink-soft); font-size:.85rem; }
.verify-recheck{ margin-top:18px; padding-top:18px; border-top:1px solid var(--ods-border); }
.verify-recheck label{ display:block; font-weight:600; font-size:.85rem; margin-bottom:8px; }
.verify-recheck__row{ display:flex; gap:8px; }
.verify-recheck__row input{ flex:1; min-height:44px; padding:10px 14px; border:1px solid var(--ods-border); border-radius:10px; }
.verify-recheck__row input:focus{ outline:none; border-color:var(--ods-primary); box-shadow:0 0 0 3px rgba(15,76,129,.12); }

.verify-list{ display:grid; grid-template-columns:auto 1fr; gap:9px 18px; margin:16px 0 0; }
.verify-list dt{ color:var(--ods-ink-soft); font-weight:600; font-size:.9rem; }
.verify-list dd{ margin:0; color:var(--ods-ink); }

/* Content-page body: keep plain prose readable; rich layouts (about-intro, reports) span full width. */
.content-body > p, .content-body > ul, .content-body > ol,
.content-body > h3, .content-body > h2:not(.about-subhead){ max-width:760px; }

/* =====================================================================
   Member card — the "Your membership" panel on the membership page.
   ===================================================================== */
.member-card{ position:relative; overflow:hidden; max-width:480px; margin:0 0 14px; padding:24px 26px;
  border-radius:20px; color:#fff; background:linear-gradient(135deg, var(--ods-primary), var(--ods-primary-dark));
  box-shadow:0 16px 34px rgba(16,40,67,.28); }
.member-card::after{ content:""; position:absolute; width:240px; height:240px; border-radius:50%;
  top:-100px; inset-inline-end:-70px; background:rgba(255,255,255,.08); pointer-events:none; }
.member-card > *{ position:relative; z-index:1; }
.member-card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.member-card__brand{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:1rem; }
.member-card__brand img{ width:30px; height:30px; border-radius:7px; background:#fff; padding:2px; object-fit:contain; }
.member-card__label{ font-size:.7rem; letter-spacing:2px; text-transform:uppercase; opacity:.72; margin-top:22px; }
.member-card__num{ font-size:1.5rem; font-weight:800; letter-spacing:3px; margin-top:3px; }
.member-card__foot{ display:flex; gap:28px; flex-wrap:wrap; margin-top:18px; }
.member-card__foot > div{ display:flex; flex-direction:column; gap:2px; }
.member-card__foot span{ font-size:.68rem; letter-spacing:1px; text-transform:uppercase; opacity:.7; }
.member-card__foot strong{ font-size:.95rem; font-weight:700; }
.member-card .status-pill{ background:rgba(255,255,255,.18); color:#fff; border:none; }
.member-card .status-pill__dot{ background:#fff; }

/* Digital membership card page — large centered card variant */
.digicard-wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.member-card--lg{ max-width:560px; width:100%; padding:30px 32px; margin:0; }
/* diagonal sheen for a premium card feel (behind the content) */
.member-card--lg::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(118deg, transparent 42%, rgba(255,255,255,.12) 50%, transparent 58%); }
.member-card__row{ display:flex; align-items:center; gap:12px; margin:24px 0 10px; position:relative; z-index:1; }
.member-card__chip{ display:block; width:46px; height:34px; border-radius:7px; margin:0;
  background:linear-gradient(135deg,#F6D68A,#D6A44A); position:relative; z-index:1; }
.member-card__chip::before{ content:""; position:absolute; inset:6px 8px; border:1px solid rgba(0,0,0,.22); border-radius:3px; }
.member-card__contactless{ width:22px; height:22px; color:#fff; opacity:.85; }
html[dir="rtl"] .member-card__contactless{ transform:scaleX(-1); }
.member-card__holder{ font-size:1.2rem; font-weight:700; letter-spacing:.4px; margin-top:12px; position:relative; z-index:1; }
.member-card--inactive{ filter:grayscale(.72) contrast(.96); }
.mc-warn{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  max-width:560px; width:100%; background:#FDECEC; border:1px solid #F1A9A9; border-radius:14px; padding:14px 18px;
  color:#8f1a13; font-size:.9rem; }
.digicard-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.digicard-actions svg{ width:15px; height:15px; }
.autorenew-panel{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  width:100%; max-width:440px; margin-top:4px; padding:14px 16px; border:1px solid var(--line,#e4e9f0);
  border-radius:12px; background:var(--surface,#f7f9fc); }
.autorenew-panel__text{ display:flex; flex-direction:column; gap:2px; }
.autorenew-panel__text strong{ font-size:.95rem; }
.autorenew-panel__text .muted{ font-size:.82rem; }
.autorenew-panel form{ margin:0; flex:0 0 auto; }
@media print{
  .topbar, .footer, .page-head, .digicard-actions, .autorenew-panel, .mc-warn, .digicard-wrap p.muted{ display:none !important; }
  .member-card{ box-shadow:none; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  main#main .container{ padding:0 !important; }
}

/* =====================================================================
   Event detail page — banner header + main/registration two-column.
   ===================================================================== */
.event-detail{ max-width:920px; margin:0 auto; }
.event-detail__banner{ border-radius:18px 18px 0 0; padding:32px 30px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--ods-primary), var(--ods-primary-dark)); }
.event-detail__banner::after{ content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  top:-120px; inset-inline-end:-80px; background:rgba(255,255,255,.08); }
.event-detail__banner > *{ position:relative; z-index:1; }
.event-detail__banner .type{ display:inline-flex; align-items:center; font-size:.72rem; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; background:rgba(255,255,255,.2); padding:5px 11px; border-radius:999px; margin-bottom:12px; }
.event-detail__banner h1{ color:#fff; margin:0 0 10px; }
.event-detail__meta{ display:flex; gap:18px; flex-wrap:wrap; font-size:.9rem; opacity:.94; }
.event-detail__meta span{ display:inline-flex; align-items:center; gap:7px; }
.event-detail__meta svg{ width:16px; height:16px; }
.event-detail__grid{ display:grid; grid-template-columns:1fr 320px; background:#fff;
  border:1px solid var(--ods-border); border-top:none; border-radius:0 0 18px 18px; overflow:hidden; }
.event-detail__main{ padding:28px 30px; line-height:1.6; }
.event-detail__main h2{ margin-top:0; }
.event-detail__panel{ padding:26px; background:var(--ods-surface); border-inline-start:1px solid var(--ods-border); }
.event-detail__price{ font-size:1.7rem; font-weight:800; color:var(--ods-primary); line-height:1; }
.event-detail__facts{ list-style:none; margin:18px 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.event-detail__facts li{ display:flex; align-items:center; gap:10px; color:var(--ods-ink-soft); font-size:.9rem; }
.event-detail__facts svg{ width:17px; height:17px; color:var(--ods-primary); flex:none; }
@media (max-width:760px){
  .event-detail__grid{ grid-template-columns:1fr; }
  .event-detail__panel{ border-inline-start:none; border-top:1px solid var(--ods-border); }
}

/* =====================================================================
   Member portal — quick-access tiles (horizontal icon + label).
   ===================================================================== */
.quick-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.quick-tile{ display:flex; align-items:center; gap:14px; padding:16px 18px; background:#fff;
  border:1px solid var(--ods-border); border-radius:14px; text-decoration:none; box-shadow:var(--shadow-sm);
  transition:transform .16s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.quick-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--ods-accent); text-decoration:none; }
.quick-tile__icon{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:var(--ods-primary-tint); color:var(--ods-primary); }
.quick-tile__icon svg{ width:22px; height:22px; }
.quick-tile__text strong{ display:block; color:var(--ods-ink); font-size:.98rem; }
.quick-tile__text span{ font-size:.8rem; color:var(--ods-ink-soft); }

/* =====================================================================
   Portal registration cards — date badge + event details + action.
   ===================================================================== */
.reg-section-head{ display:flex; align-items:center; gap:11px; margin:30px 0 14px; }
.reg-section-head__icon{ flex:none; width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--ods-primary) 12%, #fff); color:var(--ods-primary); }
.reg-section-head__icon svg{ width:18px; height:18px; }
.reg-section-head__icon--muted{ background:#EEF2F6; color:var(--ods-ink-soft); }
.reg-section-head h2{ margin:0; font-size:1.15rem; }
.reg-section-head__count{ display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 8px;
  border-radius:999px; background:var(--ods-primary); color:#fff; font-size:.8rem; font-weight:700; line-height:1; }
.reg-section-head__count--muted{ background:#E6EAF0; color:var(--ods-ink-soft); }
.reg-list{ display:flex; flex-direction:column; gap:12px; }
.reg-card{ display:flex; align-items:center; gap:16px; padding:15px 18px; background:#fff;
  border:1px solid var(--ods-border); border-radius:14px; box-shadow:var(--shadow-sm);
  transition:border-color .18s ease, box-shadow .2s ease, transform .16s ease; }
.reg-card:hover{ border-color:var(--ods-accent); box-shadow:var(--shadow); transform:translateY(-1px); }
.reg-card__date{ flex:none; width:60px; height:60px; border-radius:13px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1; color:#fff;
  background:linear-gradient(135deg,var(--ods-primary),var(--ods-accent)); }
.reg-card__date .d{ font-size:1.55rem; font-weight:800; }
.reg-card__date .m{ font-size:.64rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-top:2px; }
.reg-card__main{ flex:1; min-width:0; }
.reg-card__main h3{ margin:0 0 5px; font-size:1rem; }
.reg-card__meta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:.84rem; color:var(--ods-ink-soft); }
.reg-card__meta span{ display:inline-flex; align-items:center; gap:5px; }
.reg-card__meta svg{ width:14px; height:14px; }
.reg-card__action{ flex:none; }
@media (max-width:560px){ .reg-card{ flex-wrap:wrap; } .reg-card__action{ width:100%; } .reg-card__action .btn{ width:100%; } }

/* Operator tenant-manage: setting rows (modules, domains) */
.settings-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--ods-border); flex-wrap:wrap; }
.settings-row:last-child{ border-bottom:none; }
.settings-row__name{ font-weight:600; flex:1; min-width:120px; }
.settings-row form{ margin:0; }

/* =====================================================================
   Panel header — icon badge + title + description (settings cards).
   ===================================================================== */
.panel-head{ display:flex; align-items:flex-start; gap:13px; margin:0 0 18px; padding-bottom:16px; border-bottom:1px solid var(--ods-border); }
.panel-head__icon{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:var(--ods-primary-tint); color:var(--ods-primary); }
.panel-head__icon svg{ width:21px; height:21px; }
.panel-head__t{ flex:1; min-width:0; }
.panel-head__t h3{ margin:0; }
.panel-head__t p{ margin:3px 0 0; font-size:.84rem; color:var(--ods-ink-soft); line-height:1.4; }
.panel-head__end{ flex:none; align-self:center; }

/* =====================================================================
   Operator console: unify all cards to the Provision card style
   (radius 20, soft deep shadow, #EAEEF3 border) via .op-console on <main>.
   ===================================================================== */
.op-console .card,
.op-console .data-card,
.op-console .stat-card{ border-radius:20px; border-color:#EAEEF3;
  box-shadow:0 10px 30px rgba(16,40,67,.06), 0 2px 8px rgba(16,40,67,.04); }
.op-console .card{ padding:26px; }
/* content/form cards are static (like prov-card) — no hover lift */
.op-console .card:hover{ transform:none; border-color:#EAEEF3;
  box-shadow:0 10px 30px rgba(16,40,67,.06), 0 2px 8px rgba(16,40,67,.04); }

/* Pager (shared _Pager partial) */
.pager{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-top:18px; }
.pager__info{ color:#5b6b7c; font-size:.9rem; }
.pager__nav{ display:flex; align-items:center; gap:10px; }
.pager__page{ color:#5b6b7c; font-size:.9rem; min-width:90px; text-align:center; }
.pager .is-disabled{ opacity:.45; pointer-events:none; }

/* Plan form: numbered section groups + polish */
.plan-form{ padding:28px 30px; }
.form-group{ padding:24px 0; border-top:1px solid var(--ods-border); }
.form-group:first-of-type{ border-top:none; padding-top:6px; }
.form-group:last-of-type{ padding-bottom:6px; }
.form-group__head{ display:flex; gap:12px; align-items:flex-start; margin:0 0 18px; }
.form-group__num{ flex:0 0 auto; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:#EAF1FF; color:var(--ods-primary);
  background:color-mix(in srgb, var(--ods-primary) 12%, #fff);
  font-weight:700; font-size:.82rem; margin-top:2px; }
.form-group__head h4{ margin:0; font-size:1rem; letter-spacing:-.01em; color:var(--ods-ink); }
.form-group__head p{ margin:3px 0 0; color:var(--ods-ink-soft); font-size:.85rem; line-height:1.5; }
.plan-form__actions{ display:flex; gap:10px; margin-top:8px; padding-top:22px; border-top:1px solid var(--ods-border); }

/* Conference set-up: one category, with its ticket options beneath it. Undefined
   until now, so the categories ran together as an unbroken stack of text and
   tables with nothing marking where one ended and the next began. A rule and a
   tinted head do that job; the group is not a card, because it already sits in one. */
.conf-cat{ padding:20px 0; border-top:1px solid var(--ods-border); }
.conf-cat:first-of-type{ border-top:none; padding-top:6px; }
.conf-cat:last-of-type{ padding-bottom:2px; }
.conf-cat__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin:0 0 14px; }
.conf-cat__head > div:first-child{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.conf-cat__head strong{ font-size:1.02rem; color:var(--ods-ink); }
.conf-cat__head > div:last-child{ flex:none; display:flex; gap:8px; flex-wrap:wrap; }

/* An English field and the Arabic of it, as one thing.
   Paired rather than behind a language tab: whoever is translating needs both in
   view at once, and a tab hides exactly the sentence being translated. The Arabic
   control carries dir="rtl" itself rather than inheriting it, so Arabic types
   correctly while the admin UI is still in English — which is how it will be used,
   because the person filling this in is usually working from the English copy. */
.bi-field{ margin:0 0 18px; }
.bi-field > .hint{ margin-top:6px; }
.bi-field__ar{ margin-top:8px; padding-inline-start:12px;
  border-inline-start:2px solid var(--ods-border); }
.bi-field__tag{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.03em;
  color:var(--ods-ink-soft); margin-bottom:5px; }
.bi-field__ar input, .bi-field__ar textarea{ font-family:"Noto Sans Arabic", Inter, sans-serif; }
/* Empty is the normal state — a conference is written in English first — so an
   untouched Arabic box should not shout for attention next to a filled English one. */
.bi-field__ar input:placeholder-shown, .bi-field__ar textarea:empty{ background:#FCFDFE; }

/* Admin edit-form helpers (hints, unit prefix, toggle switch) */
.mform .hint{ display:block; font-weight:400; color:var(--ods-ink-soft); font-size:.8rem; margin-top:6px; }
.mform .field-error{ display:block; color:#B42318; font-size:.8rem; margin-top:6px; }
.mform .field-error:empty{ display:none; }
.input-prefix{ display:flex; align-items:stretch; }
.input-prefix__unit{ display:flex; align-items:center; padding:0 14px; background:#F1F5F9;
  border:1px solid var(--ods-border); border-inline-end:none; border-radius:12px 0 0 12px;
  color:var(--ods-ink-soft); font-weight:600; font-size:.9rem; white-space:nowrap; }
html[dir="rtl"] .input-prefix__unit{ border-radius:0 12px 12px 0; border-inline-end:1px solid var(--ods-border); border-inline-start:none; }
.input-prefix input{ border-start-start-radius:0 !important; border-end-start-radius:0 !important; }
.form-switch{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px;
  border:1px solid var(--ods-border); border-radius:12px; background:#fff; cursor:pointer; margin:0 0 18px; }
.form-switch__label{ font-weight:600; font-size:.9rem; }
.form-switch__label small{ display:block; font-weight:400; color:var(--ods-ink-soft); font-size:.8rem; margin-top:2px; }
.form-switch input{ appearance:none; -webkit-appearance:none; width:44px; height:24px; border-radius:999px;
  background:#CBD5E1; position:relative; cursor:pointer; transition:background .15s; flex:0 0 auto; margin:0; }
.form-switch input:checked{ background:var(--ods-primary); }
.form-switch input::after{ content:""; position:absolute; top:2px; inset-inline-start:2px; width:20px; height:20px;
  border-radius:50%; background:#fff; transition:inset-inline-start .15s; }
.form-switch input:checked::after{ inset-inline-start:22px; }

/* CPD certificate (formal document) */
.certificate{ max-width:820px; margin:0 auto; background:#fff; padding:12px;
  border:2px solid var(--ods-primary); border-radius:8px; box-shadow:0 20px 50px rgba(16,40,67,.14); }
.certificate__inner{ position:relative; padding:46px 50px 40px; text-align:center;
  border:1px solid #C9D7E6; border:1px solid color-mix(in srgb, var(--ods-primary) 32%, #fff); border-radius:4px; }
.certificate__brand{ display:flex; align-items:center; justify-content:center; gap:10px; font-weight:700; color:var(--ods-ink); }
.certificate__brand img{ width:34px; height:34px; object-fit:contain; border-radius:6px; }
.certificate__eyebrow{ text-transform:uppercase; letter-spacing:4px; font-size:.72rem; font-weight:700;
  color:var(--ods-primary); margin:22px 0 0; }
.certificate__lead{ color:var(--ods-ink-soft); margin:20px 0 4px; font-size:.95rem; }
.certificate__name{ font-family:Georgia,"Times New Roman",serif; font-size:2.4rem; line-height:1.1;
  color:var(--ods-primary); margin:2px 0 0; }
.certificate__rule{ width:min(260px,60%); height:2px; margin:14px auto 0;
  background:linear-gradient(90deg, transparent, var(--ods-primary), transparent); opacity:.5; }
.certificate__title{ font-family:Georgia,"Times New Roman",serif; font-size:1.45rem; color:var(--ods-ink); margin:4px 0 0; }
.certificate__meta{ margin:18px 0 0; font-size:1rem; color:var(--ods-ink); }
.certificate__meta strong{ color:var(--ods-primary); }
.certificate__seal{ width:84px; height:84px; margin:24px auto 0; color:var(--ods-primary); display:block; }
.certificate__verify{ display:flex; align-items:center; justify-content:center; gap:16px; text-align:start;
  margin:26px 0 0; padding-top:22px; border-top:1px solid var(--ods-border); }
.certificate__verify img{ width:96px; height:96px; image-rendering:pixelated; border:1px solid var(--ods-border);
  border-radius:8px; padding:6px; background:#fff; flex:0 0 auto; }
.certificate__verify-info{ font-size:.85rem; color:var(--ods-ink-soft); line-height:1.7; word-break:break-all; }
.certificate__verify-info a{ color:var(--ods-primary); }
@media (max-width:560px){
  .certificate__inner{ padding:30px 22px; }
  .certificate__name{ font-size:1.9rem; }
  .certificate__verify{ flex-direction:column; text-align:center; }
}
@media print{
  .certificate{ box-shadow:none; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* Event ticket (member) */
.ticket-wrap{ max-width:400px; margin:0 auto; }
.ticket{ background:#fff; border:1px solid var(--ods-border); border-radius:20px;
  box-shadow:0 14px 40px rgba(16,40,67,.10); }
.ticket__body{ padding:26px 26px 22px; }
.ticket__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; }
.ticket__title{ font-size:1.35rem; line-height:1.25; margin:0 0 18px; letter-spacing:-.01em; }
.ticket__meta{ display:grid; gap:11px; }
.ticket__meta-row{ display:flex; align-items:center; gap:11px; font-size:.92rem; color:var(--ods-ink); }
.ticket__meta-row svg{ width:18px; height:18px; color:var(--ods-primary); flex:0 0 auto; }
.ticket__holder{ margin-top:18px; padding-top:16px; border-top:1px solid var(--ods-border);
  display:flex; flex-direction:column; gap:3px; }
.ticket__holder-label{ font-size:.68rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--ods-ink-soft); }
.ticket__holder-name{ font-size:1.05rem; font-weight:700; color:var(--ods-ink); }
.ticket__perf{ position:relative; height:22px; }
.ticket__perf::after{ content:""; position:absolute; top:50%; inset-inline:22px; border-top:2px dashed var(--ods-border); }
.ticket__notch{ position:absolute; top:50%; width:22px; height:22px; border-radius:50%;
  background:var(--ods-bg); transform:translateY(-50%); }
.ticket__notch--l{ inset-inline-start:-11px; }
.ticket__notch--r{ inset-inline-end:-11px; }
.ticket__stub{ padding:6px 26px 26px; text-align:center; }
.ticket__qr{ width:200px; height:200px; image-rendering:pixelated; border:1px solid var(--ods-border);
  border-radius:14px; padding:10px; background:#fff; }
.ticket__code{ margin:16px 0 4px; }
.ticket__code span{ display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--ods-ink-soft); margin-bottom:5px; }
.ticket__code code{ font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; font-size:1rem; letter-spacing:2px; color:var(--ods-ink); }
.ticket__hint{ color:var(--ods-ink-soft); font-size:.84rem; margin:10px auto 0; max-width:280px; }
.ticket__actions{ display:flex; gap:10px; justify-content:center; margin-top:20px; }
.ticket__actions svg{ width:15px; height:15px; }
@media print{
  .topbar, .footer, .ticket__actions{ display:none !important; }
  .ticket{ box-shadow:none; }
}

/* Operator danger zone (delete tenant) */
.danger-zone{ border-color:#F1A9A9 !important; }
.panel-head__icon--danger{ background:#FDECEC; color:#B42318; }
.btn--danger{ background:#B42318; border:1px solid #B42318; color:#fff; }
.btn--danger:hover{ background:#8f1a13; border-color:#8f1a13; }

/* Membership renewal nudge (member portal) */
.renew-banner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:#FFF7E6; border:1px solid #F5C97B; border-radius:14px; padding:14px 18px; margin-bottom:22px; }
.renew-banner--urgent{ background:#FDECEC; border-color:#F1A9A9; }
.renew-banner__text{ display:flex; flex-direction:column; gap:2px; }

/* Notification center */
.note-toolbar{ display:flex; gap:10px; align-items:center; }
.note--unread{ border-inline-start:3px solid #0F4C81; background:#F7FAFD; }
.note__dot{ display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#0F4C81; margin-inline-end:8px; vertical-align:middle; }
.note__foot{ display:flex; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid #EEF2F6; }

/* Spacing & width utilities — placed last so source order wins any equal-specificity
   component margin (e.g. .stat-grid, .dash-section-title, .alert). Single-property so
   they override only the one side, matching the inline styles they replace. */
.u-maxw-150{ max-width:150px; }
.u-maxw-220{ max-width:220px; }
.u-maxw-260{ max-width:260px; }
.u-maxw-280{ max-width:280px; }
.u-maxw-340{ max-width:340px; }
.u-maxw-440{ max-width:440px; }
.u-maxw-460{ max-width:460px; }
.u-maxw-520{ max-width:520px; }
.u-maxw-560{ max-width:560px; }
.u-maxw-640{ max-width:640px; }
.u-maxw-720{ max-width:720px; }
.u-maxw-760{ max-width:760px; }
.u-mt-8{ margin-top:8px; }
.u-mt-10{ margin-top:10px; }
.u-mt-12{ margin-top:12px; }
.u-mt-16{ margin-top:16px; }
.u-mt-28{ margin-top:28px; }
.u-mb-10{ margin-bottom:10px; }
.u-mb-16{ margin-bottom:16px; }
.u-mb-26{ margin-bottom:26px; }
.u-mb-30{ margin-bottom:30px; }
.u-mb-32{ margin-bottom:32px; }
.u-head-gap{ margin:28px 0 12px; }
.u-flush-b14{ margin:0 0 14px; }
.u-flush-b16{ margin:0 0 16px; }
.u-upper{ text-transform:uppercase; }
.u-mono{ font-family:monospace; }
.u-mono-soft{ font-family:monospace; color:var(--ods-ink-soft); }
.u-mono-ui{ font-family:ui-monospace,monospace; }
.u-fs-82{ font-size:.82rem; }
.u-fs-84{ font-size:.84rem; }
.u-break{ word-break:break-all; }
.u-nowrap{ white-space:nowrap; }
.u-field-note{ margin:0 0 4px; font-size:.85rem; }
.u-tac{ text-align:center; }
.u-jc-center{ justify-content:center; }
.u-mt-26{ margin-top:26px; }
.u-mb-0{ margin-bottom:0; }
.u-pt-0{ padding-top:0; }
/* u-pt-0 (currently just the Support section) assumes a preceding section already supplies bottom space -
   true when Trust/Membership/etc. sit in between, false when every optional section is off and Support
   lands directly after Hero or the conference banner. Restore spacing for exactly that adjacency. */
.hero + .u-pt-0, .conf-banner + .u-pt-0{ padding-top:56px; }
.u-mis-8{ margin-inline-start:8px; }
.u-fw-400{ font-weight:400; }
.u-flex{ display:flex; }
.u-flex-wrap{ flex-wrap:wrap; }
.u-flex-col{ flex-direction:column; }
.u-flex-between{ display:flex; align-items:center; justify-content:space-between; }
.u-items-center{ align-items:center; }
.u-items-end{ align-items:flex-end; }
.u-items-start{ align-items:start; }
.u-jc-end{ justify-content:flex-end; }
.u-wrap{ flex-wrap:wrap; }
.u-gap-8{ gap:8px; }
.u-gap-10{ gap:10px; }
.u-gap-12{ gap:12px; }
.u-flex-1{ flex:1; }
.u-block{ display:block; }
.u-mt-4{ margin-top:4px; }
.u-mt-6{ margin-top:6px; }
.u-mb-14{ margin-bottom:14px; }
.u-flush-b28{ margin:0 0 28px; }
.u-grad-brand{ background:linear-gradient(135deg,var(--ods-primary),var(--ods-accent)); }
.u-chip-light{ background:rgba(255,255,255,.15); color:#fff; }
.u-c-white{ color:#fff; }
.u-c-success{ color:var(--ods-success); }
.u-c-error{ color:var(--ods-error); }
.u-bc-success{ border-color:var(--ods-success); }
.u-fs-1rem{ font-size:1rem; }
.u-fw-600{ font-weight:600; }
.u-w-110{ width:110px; }
.u-w-100{ width:100px; }
.u-m-y3{ margin:.3rem 0; }
.u-mt-r3{ margin:.3rem 0 0; }
.u-mh-5{ margin:.3rem 0 .5rem; }
.u-mh-6{ margin:.3rem 0 .6rem; }
.u-wrap-920{ max-width:920px; margin-inline:auto; }
.u-grid2-520{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:520px; }
.u-panel-480{ max-width:480px; margin:32px auto; text-align:center; }
.u-bio-note{ margin:.5rem 0 0; color:var(--ods-ink-soft); font-size:.88rem; }
.u-note-foot{ font-size:.8rem; margin:14px 0 0; }
.u-pad-y32{ padding-block:32px; }
/* Consistent 20px rhythm — wins over .stat-grid(24) / .grid(gap:24) by source order. */
.u-mb-20{ margin-bottom:20px; }
.u-mt-20{ margin-top:20px; }
.u-gap-20{ gap:20px; }

/* Operator: card-per-feature home editor */
.home-editor .edit-card{ border:1px solid var(--ods-border); border-radius:12px;
  padding:0 18px; margin:0 0 10px; background:var(--ods-surface); overflow:hidden; }
.home-editor__hint{ margin:0 0 12px; }
/* Collapsible section header — click to expand/collapse, with a rotating chevron. */
.home-editor details.edit-card > summary{ cursor:pointer; list-style:none; user-select:none;
  display:flex; align-items:center; gap:10px; margin:0 -18px; padding:13px 18px;
  font-weight:700; font-size:.86rem; color:var(--ods-primary); text-transform:uppercase; letter-spacing:.03em; }
.home-editor details.edit-card > summary::-webkit-details-marker{ display:none; }
.home-editor details.edit-card > summary::after{ content:""; width:8px; height:8px; margin-inline-start:auto; flex:none;
  border-inline-end:2px solid currentColor; border-block-end:2px solid currentColor;
  transform:rotate(45deg); transition:transform .18s ease; opacity:.6; }
.home-editor details.edit-card[open] > summary::after{ transform:rotate(-135deg); }
.home-editor details.edit-card > summary:hover{ background:var(--ods-primary-tint); }
.home-editor details.edit-card[open] > summary{ border-bottom:1px solid var(--ods-border); margin-bottom:12px; }
.home-editor details.edit-card[open]{ padding-bottom:8px; }

/* Operator: section reorder list */
.reorder{ list-style:none; padding:0; margin:0 0 8px; }
.reorder__row{ display:flex; align-items:center; gap:12px;
  padding:12px 14px; border:1px solid var(--ods-border); border-radius:10px; margin-bottom:8px; background:#fff;
  cursor:grab; user-select:none; touch-action:none; transition:border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.reorder__row:hover{ border-color:var(--ods-primary); box-shadow:var(--shadow-sm); }
.reorder__row:active{ cursor:grabbing; }
.reorder__handle{ color:var(--ods-ink-soft); font-size:1.3rem; line-height:1; flex:none; }
.reorder__row:hover .reorder__handle{ color:var(--ods-primary); }
.reorder__name{ font-weight:600; font-size:.95rem; flex:1; }
.reorder__row--dragging{ cursor:grabbing; transform:scale(0.94);
  background:var(--ods-primary); border-color:var(--ods-primary); color:#fff;
  box-shadow:var(--shadow-lg); position:relative; z-index:3; }
.reorder__row--dragging .reorder__handle,
.reorder__row--dragging .reorder__name{ color:#fff; }

/* Content editor: add/remove/drag page-builder sections (block-item reuses .edit-card's card look) */
.block-item__head{ display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.block-item__head .reorder__handle{ cursor:grab; font-size:1.2rem; color:var(--ods-ink-soft); }
.block-item__head:hover .reorder__handle{ color:var(--ods-primary); }
.block-item__head .block-item__title{ flex:1; font-weight:700; font-size:.78rem; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ods-ink-soft); }
.block-item__remove{ margin-inline-start:auto; }
.block-item--dragging{ opacity:.5; }

/* Operator tenant page: section tabs (one pane visible at a time) */
.op-tabs{ display:flex; flex-wrap:wrap; gap:4px; margin:0 0 22px; border-bottom:1px solid var(--ods-border); }
.op-tab{ appearance:none; -webkit-appearance:none; border:0; background:transparent; padding:10px 16px;
  font:inherit; font-size:.92rem; font-weight:600; color:var(--ods-muted,#5b6b7a); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:8px 8px 0 0; }
.op-tab:hover{ color:var(--ods-ink); background:var(--ods-surface,#f5f8fb); }
.op-tab.is-active{ color:var(--ods-primary); border-bottom-color:var(--ods-primary); }
.op-tab--danger.is-active{ color:#B42318; border-bottom-color:#B42318; }
.op-pane{ display:none; }
.op-pane.is-active{ display:block; animation:op-pane-in .16s ease; }
@keyframes op-pane-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* Operator: friendly brand colour pickers */
.brand-help{ font-size:.85rem; color:var(--ods-muted,#5b6b7a); margin:2px 0 10px; }
.brand-colors{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; margin:6px 0 14px; }
.brand-color{ display:flex; align-items:center; gap:10px; }
.brand-color input[type=color]{ width:40px; height:34px; padding:2px; border:1px solid var(--ods-border);
  border-radius:8px; background:#fff; cursor:pointer; flex:none; }
.brand-color label{ font-size:.88rem; color:var(--ods-ink); margin:0; }
@media (max-width:560px){ .brand-colors{ grid-template-columns:1fr; } }

/* one-click palette presets */
.brand-presets{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.brand-preset{ display:flex; align-items:center; gap:8px; padding:5px 12px 5px 6px; border:1px solid var(--ods-border);
  border-radius:999px; background:#fff; cursor:pointer; font-size:.82rem; color:var(--ods-ink); line-height:1; }
.brand-preset:hover{ border-color:var(--ods-primary); }
.brand-preset__swatch{ width:20px; height:20px; border-radius:50%; border:1px solid rgba(0,0,0,.12); flex:none; }

/* two big base pickers */
.brand-mains{ display:flex; flex-wrap:wrap; gap:22px; margin:0 0 12px; }
.brand-color--lg{ flex-direction:column; align-items:flex-start; gap:6px; }
.brand-color--lg input[type=color]{ width:72px; height:48px; }

/* live preview strip */
.brand-swatch{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px;
  border:1px solid var(--ods-border); border-radius:10px; background:var(--ods-surface,#f5f8fb); margin:0 0 14px; }
.brand-swatch__title{ font-size:.8rem; color:var(--ods-muted,#5b6b7a); margin-inline-end:4px; }
.brand-swatch__btn{ padding:5px 12px; border-radius:8px; color:#fff; font-size:.8rem; font-weight:600;
  text-shadow:0 1px 1px rgba(0,0,0,.18); }

/* advanced fold */
.brand-adv{ margin:0 0 14px; }
.brand-adv > summary{ cursor:pointer; font-size:.85rem; color:var(--ods-primary); padding:4px 0; }
.brand-adv[open] > summary{ margin-bottom:8px; }

/* Operator: tenant home preview box */
.tpreview{ border-radius:14px; padding:20px 22px; color:#fff; overflow:hidden; }
.tpreview__bar{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.tpreview__logo{ height:28px; width:auto; border-radius:4px; padding:0; }
.tpreview__name{ font-weight:700; font-size:.9rem; opacity:.92; }
.tpreview__head{ margin:0 0 6px; font-size:1.25rem; line-height:1.25; color:#fff; }
.tpreview__sub{ margin:0 0 14px; font-size:.9rem; color:rgba(255,255,255,.85); }
.tpreview__cta{ display:inline-block; padding:8px 16px; border-radius:999px; font-weight:600; font-size:.85rem; color:#0A3A63; }
.tpreview__meta{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.tpreview__swatch{ width:22px; height:22px; border-radius:6px; border:1px solid var(--ods-border); flex:none; }
.tpreview__meta .btn{ margin-inline-start:auto; }
.tpreview__label{ margin:14px 0 6px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ods-ink-soft); }
.tpreview__order{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px; counter-reset:sec; }
.tpreview__chip{ counter-increment:sec; display:inline-flex; align-items:center; gap:5px; padding:4px 10px 4px 6px;
  border:1px solid var(--ods-border); border-radius:999px; background:#fff; font-size:.8rem; font-weight:600; }
.tpreview__chip::before{ content:counter(sec); display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; background:var(--ods-surface-2); font-size:.66rem; color:var(--ods-ink-soft); }
.tpreview__chip--off{ opacity:.55; text-decoration:line-through; }
.tpreview__chip--custom{ background:var(--ods-accent-tint); border-color:var(--ods-accent); }
.tpreview__chip--custom::before{ content:"✦"; background:var(--ods-accent); color:#fff; }
.tpreview__blocks{ display:flex; flex-direction:column; gap:8px; }
.tpreview__block{ border:1px solid var(--ods-border); border-inline-start:3px solid var(--ods-accent);
  border-radius:10px; padding:12px 14px; background:#fff; }
.tpreview__block--tint{ background:var(--ods-surface); }
.tpreview__block h5{ margin:0 0 5px; font-size:.95rem; color:var(--ods-ink); }
.tpreview__block-body{ font-size:.85rem; color:var(--ods-ink-soft); line-height:1.5; max-height:140px; overflow:hidden; }
.tpreview__block-body > *:first-child{ margin-top:0; }
.tpreview__block-body p{ margin:0 0 6px; }

/* Branding & Home tab: editor cards on one side, a sticky live preview alongside. */
.brand-intro{ font-size:.9rem; color:var(--ods-ink-soft); line-height:1.5; margin:0 0 18px; max-width:72ch; }
.brand-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start; }
.brand-layout > .brand-a{ grid-column:1; grid-row:1; margin-bottom:0; }
.brand-layout > .brand-b{ grid-column:1; grid-row:2; margin-bottom:0; }
.brand-layout > .brand-preview-card{ grid-column:2; grid-row:1 / span 2; position:sticky; top:16px;
  align-self:start; max-height:calc(100vh - 32px); overflow:auto; margin-bottom:0; }
@media (max-width:1080px){
  .brand-layout{ grid-template-columns:1fr; }
  .brand-layout > .brand-a,
  .brand-layout > .brand-b,
  .brand-layout > .brand-preview-card{ grid-column:1; grid-row:auto; position:static;
    max-height:none; overflow:visible; margin-bottom:20px; }
}

/* Home editor: numbered sub-cards for repeated items (trust figures, custom blocks, nav links). */
.home-editor .repeat-item{ border:1px solid var(--ods-border); border-radius:10px; padding:14px 14px 2px;
  margin:0 0 12px; background:var(--ods-surface,#f7fafc); }
.home-editor .repeat-item:last-child{ margin-bottom:2px; }
.home-editor .repeat-item__head{ display:flex; align-items:center; gap:9px; margin:0 0 12px;
  font-weight:700; font-size:.78rem; letter-spacing:.03em; text-transform:uppercase; color:var(--ods-ink-soft); }
.home-editor .repeat-item__num{ display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:var(--ods-primary); color:#fff;
  font-size:.75rem; font-weight:700; flex:none; }
/* Pushed to the end of the row: it governs the whole figure, so it reads as a property of the row rather
   than of the first field under it. */
.home-editor .repeat-item__show{ margin-inline-start:auto; text-transform:none; letter-spacing:0;
  font-size:.8rem; font-weight:600; }
.home-editor .repeat-item__show input{ width:auto; margin:0 6px 0 0; }

/* Modules tab: friendly module name + description per row. */
.module-row__name{ display:block; }
.module-row__desc{ display:block; font-weight:400; font-size:.8rem; color:var(--ods-ink-soft); margin-top:2px; }
.module-row__actions{ display:flex; gap:6px; flex-wrap:wrap; }

/* Staff-preview notice: shown to signed-in users while a module is on for them but not for visitors. Amber
   like the status pill, and full-width under the top bar so it is never mistaken for page content. */
.preview-bar{ background:#FEF6E0; color:#92660A; border-bottom:1px solid #F3E2B3; font-size:.9rem; }
.preview-bar .container{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; padding-top:8px; padding-bottom:8px; }
.preview-bar strong{ text-transform:uppercase; letter-spacing:.04em; font-size:.75rem; }

/* Emailed sign-in code: one wide, spaced field a phone's keyboard fills in one go. */
.otp-field{ margin:6px 0 14px; }
.otp-input{ width:100%; box-sizing:border-box; font-size:1.9rem; letter-spacing:.45em; text-align:center; padding:12px 8px 12px calc(8px + .45em);
  border:1.5px solid var(--ods-border); border-radius:12px; background:#fff; color:var(--ods-ink); font-weight:700; font-variant-numeric:tabular-nums; }
.otp-input:focus{ outline:none; border-color:var(--ods-primary); box-shadow:0 0 0 3px rgba(37,99,235,.18); }
.otp-input::placeholder{ color:var(--ods-border); letter-spacing:.45em; font-weight:400; }
.reg-switch{ display:flex; align-items:center; gap:10px; margin:4px 0 12px; font-size:.92rem; color:var(--ods-ink); cursor:pointer; }
.reg-switch input{ width:18px; height:18px; accent-color:var(--ods-primary); }
.auth-fineprint{ margin:12px 0 0; font-size:.8rem; color:var(--ods-ink-soft); text-align:center; }
.member-card__prev{ font-weight:600; letter-spacing:.04em; opacity:.85; }

/* The association's own profile questions (see _ProfileFields.cshtml), inside .mform. */
.pf__label{ display:block; font-weight:600; margin-bottom:6px; }
.pf__req{ color:var(--ods-error); margin-inline-start:3px; }
.pf__choices{ display:flex; flex-direction:column; gap:6px; }
.pf__choices--row{ flex-direction:row; gap:18px; flex-wrap:wrap; }
.pf__choice{ display:flex; align-items:center; gap:8px; font-weight:400; cursor:pointer; }
.pf__choice input{ width:16px; height:16px; accent-color:var(--ods-primary); }
.pf--error input, .pf--error select, .pf--error textarea{ border-color:var(--ods-error); }
.reg-fields{ margin:12px 0 4px; text-align:start; display:grid; gap:12px; }
/* Questions rendered as .about-field blocks (the conference form's): long answers and lists take the
   whole row of the two-column grid; a long option list wraps into two columns of its own. */
.about-field textarea{ width:100%; padding:11px 13px; border:1px solid var(--ods-border); border-radius:10px; font:inherit; min-height:88px; resize:vertical; box-sizing:border-box; }
.about-field textarea:focus{ outline:none; border-color:var(--ods-primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.about-row .pf--wide{ grid-column:1 / -1; }
.pf__choices--grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 18px; }
/* As many columns as the width allows: on a wide screen the profile editor filled a narrow card and left
   the rest of the page blank. Short fields flow three or four across; wide blocks still take the row. */
.about-row--auto{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
/* Radios and tick boxes inside a question: the generic .mform input rule sizes every non-checkbox input
   as a text box, which turned the yes/no radios into 46px circles. */
.mform .pf__choices .pf__choice input, .about-field .pf__choices .pf__choice input, .about-field .pf__choice input[type=checkbox]{
  width:16px; height:16px; min-height:0; padding:0; margin:0; flex:none; accent-color:var(--ods-primary); }
@media (max-width:640px){ .pf__choices--grid{ grid-template-columns:1fr; } }

/* Registration: choose-a-plan radio cards */
.reg-plans{ display:flex; flex-direction:column; gap:8px; margin:2px 0 18px; }
.reg-plans__label{ font-weight:600; font-size:.85rem; color:var(--ods-ink); }
.reg-plans__error{ color:#B42318; font-size:.8rem; }
.reg-plans__error:empty{ display:none; }
.reg-plan{ display:block; cursor:pointer; position:relative; }
.reg-plan__radio{ position:absolute; opacity:0; width:0; height:0; }
.reg-plan__card{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1.5px solid var(--ods-border); border-radius:12px; padding:11px 14px; background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease; }
.reg-plan__card:hover{ border-color:var(--ods-primary); }
.reg-plan__radio:checked + .reg-plan__card{ border-color:var(--ods-primary); box-shadow:0 0 0 3px var(--ods-primary-tint); }
.reg-plan__radio:focus-visible + .reg-plan__card{ outline:2px solid var(--ods-primary); outline-offset:2px; }
.reg-plan__name{ font-weight:700; font-size:.95rem; display:block; }
.reg-plan__desc{ font-size:.8rem; color:var(--ods-ink-soft); display:block; margin-top:2px; }
.reg-plan__price{ text-align:end; font-size:.8rem; color:var(--ods-ink-soft); white-space:nowrap; }
.reg-plan__price strong{ font-size:1.05rem; color:var(--ods-primary); }
html[dir="rtl"] .reg-plan__price{ text-align:start; }

/* Complete-your-membership card (post-signup) */
.complete-price{ margin:8px 0 14px; font-size:1rem; }
.complete-price strong{ font-size:1.6rem; color:var(--ods-primary); font-weight:800; letter-spacing:-.01em; }
.complete-price__cur{ font-size:1rem; font-weight:600; }

/* Tenant self-service Customize page: welcoming header + readable card width. */
.cz-hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--ods-surface,#f5f8fb); border:1px solid var(--ods-border);
  border-inline-start:4px solid var(--ods-primary); border-radius:14px; padding:20px 22px; margin:0 0 20px; }
.cz-hero__text{ min-width:0; }
.cz-hero__text h1{ margin:2px 0 6px; }
.cz-hero__name{ color:var(--ods-primary); }
.cz-hero__text .lead{ margin:0; max-width:70ch; }
.cz-hero__back{ flex:none; }
.cz-card{ max-width:760px; }

/* Customize page cards: stable, premium settings cards (no hover jump while filling forms). */
.cz-page .card{ border-radius:20px; border-color:#EAEEF3; padding:26px;
  box-shadow:0 10px 30px rgba(16,40,67,.06), 0 2px 8px rgba(16,40,67,.04); }
.cz-page .card:hover{ transform:none; border-color:#EAEEF3;
  box-shadow:0 10px 30px rgba(16,40,67,.06), 0 2px 8px rgba(16,40,67,.04); }
/* richer header badge — gradient chip with a soft shadow, matching the stat cards */
.cz-page .panel-head{ align-items:center; }
.cz-page .panel-head__icon{ width:46px; height:46px; border-radius:13px; color:#fff;
  background:linear-gradient(135deg, var(--ods-primary), var(--ods-primary-dark));
  box-shadow:0 8px 16px rgba(16,40,67,.16); }
.cz-page .panel-head__t h3{ font-size:1.08rem; letter-spacing:-.01em; }

/* --- Tenant-admin subscription page --- */
.sub-grid{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:8px; }
@media (min-width:900px){ .sub-grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; } }
.sub-status{ padding:22px 24px; }
.sub-status__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding-bottom:16px; border-bottom:1px solid #EEF2F7; }
.sub-status__plan{ font-size:1.3rem; font-weight:700; letter-spacing:-.01em; color:#101E2E; }
.sub-status__body{ padding-top:16px; }
.sub-status__until{ font-size:1.05rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; }
.sub-status__until strong{ color:#101E2E; font-size:1.15rem; }
.sub-note{ margin-top:12px; font-size:.9rem; }
.sub-renew{ margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.sub-renew__hint{ font-size:.85rem; }
.sub-invoices{ padding:20px 22px; }

/* --- Topbar notification bell --- */
.notif-bell{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; color:inherit; text-decoration:none;
  transition:background .12s; }
.notif-bell:hover{ background:rgba(127,127,127,.14); }
.notif-bell svg{ width:20px; height:20px; }
.notif-bell__badge{ position:absolute; top:3px; right:3px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:#E5484D; color:#fff; font-size:.68rem; font-weight:700; line-height:16px;
  text-align:center; box-shadow:0 0 0 2px var(--bell-ring, #fff); }

/* --- Notification center: tenant-page panel-card styling --- */
.note-card{ padding:22px 24px; }
.note-card .panel-head{ margin-bottom:16px; }
.note-card__body{ color:var(--ods-ink); line-height:1.55; font-size:.94rem; }
.note-card__body p{ margin:0; }
.note-card__body p + p{ margin-top:8px; }
.note-card--unread{ border-inline-start:3px solid var(--ods-primary); background:#F9FBFE; }
/* Panel-head icon tints per notification category (match the tenant page's tinted icon squares) */
.note-ico--renewal{ background:#FEF3E0; color:#B45309; }
.note-ico--finance{ background:#E7F6EE; color:#0E7A4B; }
.note-ico--award{ background:#F1EBFF; color:#6D28D9; }
.note-ico--info{ background:var(--ods-primary-tint); color:var(--ods-primary); }
/* Footer actions as small ghost buttons */
.note__foot .btn-manage{ cursor:pointer; font-family:inherit; display:inline-flex; align-items:center;
  padding:6px 14px; border:1px solid var(--ods-border); border-radius:8px; background:#fff;
  font-size:.83rem; font-weight:600; color:#3A4756; transition:all .12s; }
.note__foot .btn-manage:hover{ border-color:#2563EB; color:#1D4ED8; background:#F5F8FF; }

/* --- Branding logo upload field --- */
.logo-field{ margin-bottom:16px; }
.logo-field > label{ display:block; font-size:.85rem; font-weight:600; color:#3A4756; margin-bottom:8px; }
.logo-field__row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.logo-field__preview{ width:76px; height:76px; flex:none; border:1px solid var(--ods-border);
  border-radius:12px; background:#F7F9FC; display:grid; place-items:center; overflow:hidden; }
.logo-field__preview img{ max-width:100%; max-height:100%; object-fit:contain; }
.logo-field__ph{ font-size:.72rem; color:#93A1B0; text-align:center; padding:4px; }
.logo-field__controls{ flex:1; min-width:220px; display:flex; flex-direction:column; gap:6px; }
.logo-field__controls input[type=file]{ font-size:.86rem; }
/* File input and size picker on one line — wrapping so the select drops under the file button on a narrow
   admin screen rather than shrinking the filename out of readability. */
.logo-field__pick{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.logo-field__pick input[type=file]{ flex:1; min-width:170px; }
.logo-field__size{ flex:none; width:auto; margin:0; font-size:.86rem; padding:6px 10px; }
.logo-field__remove{ display:inline-flex; align-items:center; gap:7px; font-size:.84rem; color:#B42318;
  font-weight:600; cursor:pointer; width:fit-content; }
.logo-field__remove input{ width:auto; margin:0; accent-color:#B42318; }
/* Logo position & zoom editor */
.logo-adjust{ margin-top:14px; }
.logo-adjust > label{ display:block; font-size:.85rem; font-weight:600; color:#3A4756; margin-bottom:8px; }
.logo-adjust__stage{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.logo-adjust__box{ width:64px; height:64px; flex:none; border:1px solid var(--ods-border); border-radius:12px;
  background:#F7F9FC; overflow:hidden; display:grid; place-items:center; }
.logo-adjust__box img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  transform-origin:center; display:block; }
.logo-adjust__pad{ display:grid; grid-template-columns:repeat(3, 30px); grid-template-rows:repeat(3, 30px); gap:4px; }
.adj-up{ grid-column:2; grid-row:1; } .adj-left{ grid-column:1; grid-row:2; }
.adj-reset{ grid-column:2; grid-row:2; } .adj-right{ grid-column:3; grid-row:2; } .adj-down{ grid-column:2; grid-row:3; }
.logo-adjust__zoom{ display:inline-flex; align-items:center; gap:8px; }
.logo-adjust__zval{ font-size:.82rem; font-weight:700; color:#2563EB; min-width:42px; text-align:center; font-variant-numeric:tabular-nums; }
.adj-btn{ cursor:pointer; width:30px; height:30px; border:1px solid #D8E0EA; border-radius:8px; background:#fff;
  color:#3A4756; font-size:1rem; line-height:1; display:grid; place-items:center; transition:all .12s; padding:0; }
.adj-btn:hover{ border-color:#2563EB; color:#1D4ED8; background:#F5F8FF; }

/* ── Profile (self-service account) ─────────────────────────────────────────
   Reuses .profile-card / .profile-hero / .profile-body from the directory
   profile; these add only what the account page needs on top. */

/* Uploaded picture fills the existing hero avatar box; initials still render
   when there is no image, so the box is styled once and used both ways. */
.profile-hero__avatar img{ width:100%; height:100%; border-radius:inherit; object-fit:cover; display:block; }

/* Read-only detail list on the profile page. */
.deflist{ display:grid; grid-template-columns:1fr; gap:2px 18px; margin:0 0 20px; }
.deflist dt{ font-size:.78rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--ods-muted); padding-top:10px; }
.deflist dd{ margin:0; font-size:.95rem; color:var(--ods-ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
@media (min-width:560px){
  .deflist{ grid-template-columns:170px minmax(0,1fr); }
  .deflist dt{ padding-top:0; }
  .deflist dd{ min-height:1.5rem; }
}

/* Button pair under the profile / at the foot of its forms. */
.profile-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }

/* Picture upload: current image beside the file input. */
.avatar-form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; }
.avatar-form__field{ flex:1 1 240px; min-width:0; margin:0; }
.avatar-preview{ flex:none; width:64px; height:64px; border-radius:16px; display:grid; place-items:center;
  background:var(--ods-surface-2); border:1px solid var(--ods-border); color:var(--ods-primary);
  font-weight:800; font-size:1.25rem; overflow:hidden; }
.avatar-preview img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ── Notification preferences ───────────────────────────────────────────────
   Member-facing, so it follows the same idiom as the notification centre and
   profile cards: padded card body, panel-head with a tinted icon square, and
   hairline-separated rows — not the back-office .data-table it started as. */
.prefs-card{ padding:22px 24px; }
.prefs-card .panel-head{ margin-bottom:4px; }

/* Channel columns. The legend and the rows share one grid template so the
   checkboxes sit exactly under their headings. */
.pref-legend,
.pref-row{ display:grid; grid-template-columns:minmax(0,1fr) 86px 86px; gap:12px; }
.pref-legend{ align-items:end; padding:12px 0 10px; border-bottom:1px solid var(--ods-border); }
.pref-legend__ch{ text-align:center; font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ods-ink-soft); }
/* "All" appears only once the script un-hides it, so it never shows without behaviour. */
.prefs-all{ display:block; margin:4px auto 0; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.72rem; font-weight:600; color:var(--ods-primary); letter-spacing:0; text-transform:none; }
.prefs-all:hover{ text-decoration:underline; }

.pref-row{ align-items:center; padding:15px 0; border-bottom:1px solid #EEF2F6; }
.pref-row:last-of-type{ border-bottom:0; }
.pref-row__text strong{ display:block; font-size:.94rem; font-weight:650; color:var(--ods-ink); }
.pref-row__text span{ display:block; margin-top:3px; font-size:.84rem; line-height:1.45; color:var(--ods-ink-soft); }
.pref-row__ch{ display:grid; justify-items:center; gap:5px; cursor:pointer; }
.pref-row__ch input{ width:20px; height:20px; accent-color:var(--ods-primary); cursor:pointer; }
/* Per-toggle caption: redundant under the legend on wide screens, essential once it's gone. */
.pref-row__chlabel{ display:none; font-size:.7rem; font-weight:600; color:var(--ods-ink-soft); }

@media (max-width:560px){
  .pref-legend{ display:none; }
  .pref-row{ grid-template-columns:minmax(0,1fr) auto auto; gap:18px; align-items:start; }
  .pref-row__chlabel{ display:block; }
}

/* "Always sent" — a plain list would read as another set of options, so each
   item is marked with the same tinted icon square used elsewhere. */
.prefs-always{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.prefs-always li{ display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--ods-ink-soft); line-height:1.45; }
.prefs-always svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--ods-primary); }

/* ── Provisioning add-on (sold beside the plan cards, not inside them) ──── */
.addon-opt{ display:block; cursor:pointer; margin-top:12px; }
.addon-opt input{ position:absolute; opacity:0; width:0; height:0; }
.addon-opt__body{ display:flex; flex-direction:column; gap:6px; padding:14px 16px;
  border:1.5px dashed var(--ods-border,#dbe6ef); border-radius:12px; background:var(--ods-surface,#fff);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.addon-opt:hover .addon-opt__body{ border-color:color-mix(in srgb, var(--ods-primary) 40%, #dbe6ef); }
.addon-opt input:checked + .addon-opt__body{ border-style:solid; border-color:var(--ods-primary);
  background:color-mix(in srgb, var(--ods-primary) 5%, #fff);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ods-primary) 15%, transparent); }
.addon-opt input:focus-visible + .addon-opt__body{ outline:2px solid var(--ods-primary); outline-offset:2px; }
.addon-opt__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.addon-opt__name{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--ods-ink); }
.addon-opt__name svg{ width:18px; height:18px; flex:none; color:#25D366; } /* WhatsApp brand green */
.addon-opt__price{ font-weight:800; color:var(--ods-primary); white-space:nowrap; }
.addon-opt__price span{ font-size:.72rem; font-weight:600; color:var(--ods-muted); }
.addon-opt__desc{ font-size:.85rem; color:var(--ods-muted); }
/* The channel isn't built yet — this warning must stay legible whether or not the box is ticked. */
.addon-opt__warn{ display:flex; align-items:flex-start; gap:7px; margin-top:2px; padding:8px 10px;
  border-radius:9px; background:#FEF6E0; color:#7A5606; font-size:.8rem; line-height:1.45; }
.addon-opt__warn svg{ width:15px; height:15px; flex:none; margin-top:2px; }
@media (max-width:640px){ .addon-opt__body{ padding:13px 14px; } }

/* ---- Conference registration steps ---------------------------------------
   A progress rail across the four steps of the registration form. Numbered
   because the steps genuinely are a sequence a delegate moves through, not a
   set of choices — the number tells them how much is left.                  */
.reg-steps{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 22px; padding:0; counter-reset:reg-step; }
.reg-steps li{
  counter-increment:reg-step; position:relative; flex:1 1 140px; min-width:130px;
  padding:11px 14px 11px 40px; border:1px solid var(--line,#e4e9f0); border-radius:11px;
  background:var(--surface,#f7f9fc); color:var(--ods-ink-soft); font-size:.86rem; font-weight:550; }
.reg-steps li::before{
  content:counter(reg-step); position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:#E6EAF0; color:var(--ods-ink-soft); font-size:.74rem; font-weight:700; }
.reg-steps li.is-current{ border-color:var(--ods-accent,#0B7C57); background:#fff; color:var(--ods-ink); }
.reg-steps li.is-current::before{ background:var(--ods-accent,#0B7C57); color:#fff; }
.reg-steps li.is-done{ background:#E7F6EE; border-color:transparent; color:#0E7A4B; }
.reg-steps li.is-done::before{ content:"✓"; background:#16A34A; color:#fff; }
[dir="rtl"] .reg-steps li{ padding:11px 40px 11px 14px; }
[dir="rtl"] .reg-steps li::before{ left:auto; right:12px; }
@media (max-width:640px){ .reg-steps li{ flex-basis:100%; } }


/* ---- Conference registration -----------------------------------------------
   The registration flow reuses the member-facing card language rather than the
   admin one: same surface, radius and shadow as the Membership plan cards, so a
   delegate arriving from the navigation lands somewhere familiar.            */

/* A section inside the registration form. Same shell as .card, with a titled
   head so a long form reads as a few labelled steps rather than one wall.

   Scoped to `.card.reg-card`, and that matters: `.reg-card` is ALSO the name of
   the list card in Portal/MyRegistrations (see "reg-list" above), which is a
   flex row — `display:flex; align-items:center`. Bare `.reg-card` here inherited
   that, so every form section was a flex row and its children were flex items
   squeezed onto one line: the option grid collapsed to a single column and the
   chip set stacked one per line, whatever their own grid/flex rules said. The
   form variant always carries `.card` as well; the list variant never does. */
.card.reg-card{ display:block; padding:22px 24px; }
.reg-card__head{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.reg-card__icon{ width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:var(--ods-accent-tint); color:var(--ods-accent-dark); }
.reg-card__icon svg{ width:22px; height:22px; }
.reg-card__head h3{ margin:0; font-size:1.02rem; }
.reg-card__head p{ margin:3px 0 0; font-size:.86rem; color:var(--ods-ink-soft); max-width:62ch; }
/* The form card is a container, not a clickable card: keep it still on hover.
   Scoped for the same reason as above — unscoped, this also killed the hover
   lift on the Portal list cards, which are clickable and want it. */
.card.reg-card:hover{ transform:none; box-shadow:var(--shadow-sm); border-color:var(--ods-border); }

/* Facts about the thing being acted on, above the form that acts on it. Two
   columns so the labels form a readable edge and the values line up.         */
.kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:0 0 18px;
  padding:0 0 16px; border-bottom:1px solid var(--ods-border); }
.kv dt{ font-size:.8rem; color:var(--ods-ink-soft); }
.kv dd{ margin:0; font-size:.88rem; font-weight:600; }

/* A field and its button on one line, inside a table cell. */
.inline-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.inline-form input{ margin:0; min-width:150px; }

/* The societies whose membership earns the discounted rate. The code carries the
   weight because it is what the delegate selects; the name is there to be
   recognised, so it sits beside it rather than replacing it.                  */
.society-list{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:5px; }
.society-list li{ font-size:.85rem; line-height:1.45; }
.society-list strong{ font-weight:650; }

/* Announced workshops. Published, not purchasable — so this reads as a notice
   board and carries no control a delegate could mistake for a way to book.    */
.workshops{ padding:22px 24px; }
.workshops:hover{ transform:none; box-shadow:var(--shadow-sm); border-color:var(--ods-border); }
.workshops h3{ margin:0 0 6px; font-size:1.02rem; }
.workshops > .muted{ margin:0 0 14px; font-size:.85rem; line-height:1.6; max-width:62ch; }
.workshops__list{ margin:0; padding-inline-start:1.4em; display:grid; gap:7px; }
.workshops__list li{ font-size:.87rem; line-height:1.45; padding-inline-start:2px; }
.workshops__list li::marker{ color:var(--ods-accent-dark); font-weight:650; font-size:.82rem; }

/* Choosing a category or a rate. A radio, but presented as the thing it picks. */
.pick-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.pick-grid--2{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.pick{ position:relative; display:flex; align-items:center; gap:13px; padding:15px 16px; cursor:pointer;
  border:1.5px solid var(--ods-border); border-radius:14px; background:#fff;
  transition:border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); }
.pick:hover{ border-color:var(--ods-accent); background:var(--ods-accent-tint); }
/* The native control still carries the state and the keyboard behaviour — it is
   moved out of sight, not removed, so the label stays a real radio.          */
.pick input{ position:absolute; opacity:0; width:1px; height:1px; }
.pick:has(input:focus-visible){ outline:2px solid var(--ods-accent); outline-offset:2px; }
/* :has(input:checked) alongside the server's .is-chosen, and it is the one that actually holds.
   The membership Yes/No redraws only #reg-member-fields and #reg-options — these labels are NOT
   re-rendered, so the server class never arrives for them and the click looked like it did nothing.
   Reading the radio directly means every pick control in the form behaves the same way, redrawn or not. */
.pick.is-chosen,
.pick:has(input:checked){ border-color:var(--ods-accent); background:var(--ods-accent-tint); box-shadow:var(--shadow-sm); }
.pick.is-disabled{ opacity:.55; cursor:not-allowed; }
.pick__icon{ width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center;
  background:var(--ods-accent-tint); color:var(--ods-accent-dark); }
.pick.is-chosen .pick__icon,
.pick:has(input:checked) .pick__icon{ background:#fff; }
.pick__icon svg{ width:20px; height:20px; }
.pick__body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.pick__body strong{ font-size:.93rem; font-weight:650; color:var(--ods-ink); }
.pick__note{ font-size:.79rem; color:var(--ods-ink-soft); }
.pick__tick{ width:22px; height:22px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--ods-accent); color:#fff; opacity:0; transform:scale(.7);
  transition:opacity .18s var(--ease), transform .18s var(--ease); }
.pick.is-chosen .pick__tick,
.pick:has(input:checked) .pick__tick{ opacity:1; transform:scale(1); }
.pick__tick svg{ width:13px; height:13px; }
/* A rate is a price first — it lines up on the end like the plan cards do.    */
.pick--rate{ align-items:flex-start; }
.pick__price{ flex:none; text-align:end; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.pick__price b{ font-size:1.45rem; font-weight:800; color:var(--ods-primary); letter-spacing:-.02em; line-height:1; }
.pick__price span{ font-size:.72rem; color:var(--ods-ink-soft); letter-spacing:.04em; }
.pick__price em{ font-style:normal; }

/* Multi-select answers (field of work) read better as chips than as a list.   */
/* A question label that is not attached to one input — the chip set below answers it. Carries none of
   `.mform p`'s 18px trailing margin, because the answer belongs directly under the question. */
.field-legend{ display:block; font-weight:600; font-size:.85rem; color:var(--ods-ink); margin:0 0 8px; }
/* The last row of a section: its fields already sit on one line, so the section does not also need the
   trailing paragraph margin under them. */
.row--tight > p{ margin-bottom:0; }
.chip-set{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ position:relative; display:inline-flex; align-items:center; padding:8px 14px; cursor:pointer;
  border:1.5px solid var(--ods-border); border-radius:999px; background:#fff;
  font-size:.84rem; color:var(--ods-ink);
  transition:border-color .18s var(--ease), background .18s var(--ease); }
.chip:hover{ border-color:var(--ods-accent); }
.chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.chip:has(input:focus-visible){ outline:2px solid var(--ods-accent); outline-offset:2px; }
.chip:has(input:checked){ border-color:var(--ods-accent); background:var(--ods-accent-tint);
  color:var(--ods-accent-dark); font-weight:600; }

/* The confirmation code is the only field worth setting apart — it is copied
   from an email, six characters at a time.                                    */
.reg-code{ font-size:1.5rem; letter-spacing:.4em; text-align:center; font-variant-numeric:tabular-nums; }

/* Steps 1 and 2 of registration: a single centered column, not the two-column reg-form__grid the
   later steps use — there is nothing to put beside the form once workshops (step 1) and the category picker
   (step 3, a genuinely different step) are gone. */
.reg-page{ max-width:760px; margin-inline:auto; }

/* "About you" (step 2): a plain form, deliberately not reg-card/pick-grid — that component reads as "choose
   one of these options," and a name/mobile/work-info form is data entry, not a choice. Sharing the component
   with the category picker further on is what made this page look like a plan selector. */
.about-card{ background:#fff; border:1px solid var(--ods-border); border-radius:var(--radius-lg); padding:32px; }
.about-card h3{ margin:0 0 4px; font-size:1.15rem; }
.about-card__sub{ color:var(--ods-ink-soft); font-size:.9rem; margin:0 0 24px; }
.about-row{ display:grid; gap:16px; margin-bottom:16px; }
.about-row--3{ grid-template-columns:1fr 2fr 2fr; }
.about-row--2{ grid-template-columns:1fr 1fr; }
.about-section-label{ font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ods-ink-soft); margin:24px 0 12px; }
.about-section-label:first-of-type{ margin-top:0; }
.about-field label{ display:block; font-size:.85rem; font-weight:600; color:#3A4756; margin-bottom:6px; }
.about-field input, .about-field select{ width:100%; padding:11px 13px; border:1px solid var(--ods-border);
  border-radius:10px; font:inherit; font-size:.95rem; }
.about-field input:focus, .about-field select:focus{ outline:none; border-color:var(--ods-primary);
  box-shadow:0 0 0 3px var(--ods-primary-tint); }

/* Category and Options (step 3): a compact row, not the larger .pick card — a real category or option list
   tends to run longer than the two-item Yes/No membership question those large cards still suit fine, and
   the smaller footprint keeps the progressive reveal from growing the page as fast as it used to.

   A matrix, not a single forced column: as many as fit at >=260px each, which is two across the form column
   and never one — a row carries a name, a qualifier and a price, and narrower than this the price wraps
   under the name and the saving is undone. No separate radio-dot indicator — border + tint on the row itself
   is the only "chosen" signal, which is also why :has(input:checked) drives it directly rather than waiting
   on JS: a click is never one frame behind, and it still works if script fails to load at all. */
.pick-row-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:8px; }
.pick-row{ position:relative; display:flex; align-items:center; gap:12px; padding:12px 15px; cursor:pointer;
  border:1.5px solid var(--ods-border); border-radius:11px; background:#fff;
  transition:border-color .18s var(--ease), background .18s var(--ease); }
.pick-row:hover{ border-color:var(--ods-accent); background:var(--ods-accent-tint); }
.pick-row input{ position:absolute; opacity:0; width:1px; height:1px; }
.pick-row:has(input:focus-visible){ outline:2px solid var(--ods-accent); outline-offset:2px; }
.pick-row:has(input:checked){ border-color:var(--ods-accent); background:var(--ods-accent-tint); }
.pick-row.is-disabled{ opacity:.55; cursor:not-allowed; }
.pick-row__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.pick-row__body strong{ font-size:.9rem; font-weight:650; color:var(--ods-ink); }
.pick-row__body span{ font-size:.78rem; color:var(--ods-ink-soft); }
.pick-row__price{ flex:none; font-weight:800; color:var(--ods-primary); font-size:1.05rem; }
.pick-row__price small{ font-weight:500; color:var(--ods-ink-soft); font-size:.7rem; }

@media (max-width:640px){
  .card.reg-card{ padding:18px 16px; }
  .pick-grid{ grid-template-columns:1fr; }
  .pick-row-list{ grid-template-columns:1fr; }
  .about-card{ padding:20px; }
  .about-row--3, .about-row--2{ grid-template-columns:1fr; }
}

/* =====================================================================
   The conference: its banner on the home page, its cards, its rate card.
   Dark where the hero is light — this band replaces the hero while a
   conference is live, and it has to read as a different kind of thing
   rather than as the hero with different words in it.
   ===================================================================== */
.conf-banner{ position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(900px 420px at 90% -20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg, var(--ods-primary-dark), var(--ods-primary) 55%, var(--ods-accent-dark)); }
.conf-banner__inner{ display:flex; align-items:center; gap:40px; padding-block:56px 60px; }
.conf-banner__copy{ flex:1; min-width:0; }
/* The trailing column: logo first, countdown under it. Sized off the viewport so the mark stays large
   without ever squeezing the headline — the copy keeps flex:1 and this column only takes what it needs.
   The gap is deliberately tight: logo and countdown are one object here, not two stacked cards. */
.conf-banner__aside{ flex:none; display:flex; flex-direction:column; align-items:center; gap:12px; }
.conf-banner__badge{ display:inline-flex; align-items:center; gap:9px; font-size:.8rem; font-weight:600;
  color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  padding:7px 15px; border-radius:var(--radius-pill); margin-bottom:20px; }
.conf-banner__badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--ods-success); flex:none; }
.conf-banner h1{ color:#fff; font-size:clamp(1.9rem,4.2vw,3rem); font-weight:800; margin-bottom:16px;
  letter-spacing:-.01em; }
.conf-banner__when{ display:flex; flex-wrap:wrap; gap:20px; margin-bottom:16px; font-size:.95rem; }
.conf-banner__when span{ display:inline-flex; align-items:center; gap:8px; opacity:.94; }
.conf-banner__when svg{ width:17px; height:17px; flex:none; }
.conf-banner__sub{ font-size:1.05rem; max-width:60ch; margin-bottom:26px; opacity:.92; line-height:1.6; }
.conf-banner__cta{ display:flex; flex-wrap:wrap; gap:14px; }
/* The conference logo, shared by the home banner and the conference's own hero. Four sizes the tenant admin
   picks between (Conference → Logo size), each a clamp rather than a fixed width so the choice survives the
   window being narrowed: it scales the mark, it does not decide it. */
.conf-logo{ display:block; max-width:100%; height:auto; object-fit:contain; width:clamp(200px, 24vw, 330px); }
.conf-logo--sm{ width:clamp(120px, 14vw, 180px); }
.conf-logo--md{ width:clamp(160px, 19vw, 250px); }
.conf-logo--lg{ width:clamp(200px, 24vw, 330px); }
.conf-logo--xl{ width:clamp(240px, 30vw, 430px); }

/* The countdown is the one number worth setting apart: it is why somebody
   registers today rather than meaning to. Four units, ticked by app.js.      */
.conf-countdown{ align-self:stretch; text-align:center; padding:18px 20px; border-radius:18px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); }
.conf-countdown__units{ display:flex; align-items:baseline; justify-content:center; gap:14px; }
.conf-countdown__unit{ min-width:52px; }
/* Tabular figures so the seconds column does not jitter the whole row every tick. */
.conf-countdown__unit b{ display:block; font-size:2.1rem; font-weight:800; line-height:1;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.conf-countdown__unit span{ display:block; margin-top:6px; font-size:.72rem; opacity:.8;
  text-transform:uppercase; letter-spacing:.06em; }
.conf-countdown__label{ margin:12px 0 0; font-size:.78rem; opacity:.8; }
@media (max-width:860px){
  .conf-banner__inner{ flex-direction:column; align-items:flex-start; gap:26px; padding-block:44px 46px; }
  .conf-banner__aside{ align-self:stretch; align-items:flex-start; gap:18px; }
  .conf-countdown__unit b{ font-size:1.8rem; }
}

/* Countdown again, in the details sidebar. */
.conf-count{ text-align:center; padding:16px; border-radius:14px; margin-bottom:16px;
  background:var(--ods-primary-tint); color:var(--ods-primary-dark); }
.conf-count b{ display:block; font-size:2.2rem; font-weight:800; line-height:1; }
.conf-count span{ display:block; margin-top:4px; font-size:.78rem; color:var(--ods-ink-soft); }

/* Admin-entered prose. Escaped, with the author's line breaks kept — the
   fields are plain text on purpose (see Conference.VenueDetails).            */
.conf-text{ white-space:pre-line; line-height:1.65; max-width:68ch; }

/* One conference in the list of them. */
.conf-card{ display:flex; align-items:center; gap:16px; text-decoration:none; }
.conf-card:hover{ text-decoration:none; }
.conf-card__year{ flex:none; width:62px; height:62px; border-radius:14px; display:grid; place-items:center;
  background:var(--ods-primary-tint); color:var(--ods-primary); font-weight:800; font-size:.95rem;
  font-variant-numeric:tabular-nums; }
.conf-card__body{ min-width:0; }
.conf-card__body strong{ display:block; color:var(--ods-ink); font-size:1rem; line-height:1.35; }
.conf-card__dates{ display:inline-flex; align-items:center; gap:7px; margin-top:5px;
  font-size:.84rem; color:var(--ods-ink-soft); }
.conf-card__dates svg{ width:15px; height:15px; flex:none; }
.conf-card--past .conf-card__year{ background:var(--ods-surface); color:var(--ods-ink-soft); }

/* The checkout: the payment card, beside it who to contact, and under both the questions. The card is
   capped at 560px like the other registration cards, so on its own it left the right two-thirds of a wide
   screen blank and pushed the help under the Pay button, below the fold. Putting the whole help block in
   the side column was no better: eleven questions ran far past the card and left the same blank space on
   the other side. So the side column holds only the short contact panel, stretched to the card's height,
   and the questions take the full width below in two columns. Below 900px everything stacks, card first,
   in the 560px column the earlier steps use. (Replaces the unused .reg-layout, which no view rendered.) */
.checkout-page{ max-width:944px; margin-inline:auto; }
.checkout-layout{ display:grid; grid-template-columns:minmax(0,560px) minmax(0,360px); gap:24px;
  align-items:stretch; }
.checkout-layout__main{ min-width:0; }
.checkout-layout__aside{ min-width:0; }
/* .reg-card is also the event-list card, which centres its content vertically; stretched to the help
   panel's height, the payment card's content floated to the middle instead of sitting at the top. */
.checkout-layout__main > .reg-card{ display:block; height:100%; box-sizing:border-box; }
.payhelp--panel{ margin:0; height:100%; box-sizing:border-box; padding:20px; background:#fff;
  border:1px solid var(--ods-border); border-radius:14px; box-shadow:var(--shadow-sm); }
.payhelp__lead{ margin:0 0 14px; font-size:.88rem; line-height:1.5; color:var(--ods-ink-soft); }
.checkout-layout__faq{ grid-column:1 / -1; margin:8px 0 0; }
.checkout-layout__faq .payhelp__list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 32px;
  align-items:start; }
/* In two columns the last-child bottom rule would close one column only, so every item carries its own
   bottom rule and none a top one. */
.checkout-layout__faq .payhelp__list details{ border-top:0; border-bottom:1px solid var(--ods-border); }
@media (max-width:900px){
  .checkout-page{ max-width:560px; }
  .checkout-layout{ grid-template-columns:1fr; align-items:start; }
  .payhelp--panel{ height:auto; }
  .checkout-layout__faq .payhelp__list{ grid-template-columns:1fr; }
}
/* The short list under a failed or pending receipt, in the receipt's own centred column. */
.receipt__help{ max-width:480px; margin-inline:auto; }

/* A heading inside the conference dropdown — a label, not a destination. */
.more-menu__sep{ margin-top:6px; padding:8px 14px 4px; border-top:1px solid var(--ods-border);
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ods-ink-soft); }

/* =====================================================================
   The conference site — full-bleed bands, not a detail card. It uses the
   same section/container rhythm as the tenant landing, so the conference
   and the association read as one site rather than as a page bolted on.
   ===================================================================== */
.conf-hero{ position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(900px 420px at 88% -25%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg, var(--ods-primary-dark), var(--ods-primary) 55%, var(--ods-accent-dark)); }
.conf-hero__inner{ display:flex; align-items:center; gap:40px; padding-block:64px 68px; }
.conf-hero__copy{ flex:1; min-width:0; }
.conf-hero__eyebrow{ display:inline-block; font-size:.85rem; letter-spacing:.04em; opacity:.9; margin-bottom:14px; }
.conf-hero h1{ color:#fff; font-size:clamp(2rem,4.6vw,3.2rem); font-weight:800; letter-spacing:-.015em;
  margin-bottom:16px; max-width:20ch; }
.conf-hero__sub{ font-size:1.08rem; max-width:62ch; margin-bottom:28px; opacity:.93; line-height:1.65; }
.conf-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.conf-hero__closed{ font-size:.95rem; opacity:.9; padding:10px 0; }
/* Logo over countdown, as on the home banner — same column, same tight gap. */
.conf-hero__aside{ flex:none; display:flex; flex-direction:column; align-items:center; gap:12px; }
@media (max-width:860px){
  .conf-hero__inner{ flex-direction:column; align-items:flex-start; gap:26px; padding-block:46px 48px; }
  .conf-hero__aside{ align-self:stretch; align-items:flex-start; gap:18px; }
}

/* In-page navigation. Sticky, because what makes a long page feel like a site
   is being able to reach any part of it from any other part.                 */
.conf-subnav{ position:sticky; top:0; z-index:40; background:#fff;
  border-bottom:1px solid var(--ods-border); box-shadow:var(--shadow-sm); }
.conf-subnav__inner{ display:flex; align-items:center; gap:4px; overflow-x:auto; scrollbar-width:none; }
.conf-subnav__inner::-webkit-scrollbar{ display:none; }
.conf-subnav a{ flex:none; padding:14px; font-size:.9rem; font-weight:600; color:var(--ods-ink-soft);
  text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; }
.conf-subnav a:hover{ color:var(--ods-primary); border-bottom-color:var(--ods-accent); text-decoration:none; }
.conf-subnav__cta{ margin-inline-start:auto; color:var(--ods-primary) !important; }

/* At a glance — the band somebody skims, so the numbers lead. */
.conf-facts{ padding-block:34px; }
.conf-facts__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:14px 40px; }
.conf-facts__list li{ display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--ods-ink-soft); }
.conf-facts__list svg{ width:20px; height:20px; color:var(--ods-accent-dark); flex:none; }
.conf-facts__list strong{ font-size:1.5rem; font-weight:800; color:var(--ods-primary); line-height:1;
  font-variant-numeric:tabular-nums; }

/* Admin-entered prose: escaped, with the author's line breaks kept. */
.conf-text{ white-space:pre-line; line-height:1.7; max-width:72ch; }
.conf-text--lead{ font-size:1.05rem; }
/* Prose that is the whole band rather than the contents of a panel: it takes the
   container's width, overriding .conf-text's reading measure. Asked for explicitly —
   a measured column under a full-width heading read as a page that had not finished
   loading. The measure was there because a very long line is harder to track back to
   the start of, so if the About text is ever a genuine essay rather than a few
   paragraphs, this is the rule to revisit. */
.conf-text--band{ max-width:none; }
.conf-panel{ padding:24px 26px; }
.conf-panel h3{ margin:0 0 10px; font-size:1rem; }
/* Pushed to the foot of the panel so the two panels' buttons line up when the
   venue text is shorter than the travel text beside it. */
.conf-panel__map{ align-self:flex-start; margin-top:auto; padding-top:0; gap:7px; }
.conf-panel__map svg{ width:16px; height:16px; }
.conf-panel .conf-text + .conf-panel__map{ margin-top:16px; }
.conf-panel:hover{ transform:none; box-shadow:var(--shadow-sm); border-color:var(--ods-border); }
@media (max-width:560px){ .conf-panel{ padding:18px 16px; } }

/* The programme. Every day open at once: somebody booking flights reads the
   whole thing, and tabs hide exactly the day being checked.                  */
.prog-day + .prog-day{ margin-top:30px; }
.prog-day__head{ display:flex; align-items:baseline; gap:10px; margin:0 0 14px;
  padding-bottom:10px; border-bottom:2px solid var(--ods-primary-tint); font-size:1.05rem; }
.prog-day__head em{ font-style:normal; font-size:.85rem; font-weight:500; color:var(--ods-ink-soft); }
.prog-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.prog-slot{ display:flex; gap:18px; padding:14px 16px; background:#fff;
  border:1px solid var(--ods-border); border-radius:12px; }
.prog-slot__time{ flex:none; width:64px; display:flex; flex-direction:column; gap:2px;
  font-variant-numeric:tabular-nums; }
.prog-slot__time b{ font-size:.95rem; font-weight:700; color:var(--ods-primary); }
.prog-slot__time span{ font-size:.78rem; color:var(--ods-ink-soft); }
.prog-slot__body{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.prog-slot__body strong{ font-size:.98rem; font-weight:650; color:var(--ods-ink); line-height:1.4; }
.prog-slot__who{ font-size:.85rem; color:var(--ods-accent-dark); font-weight:600; }
.prog-slot__abstract{ font-size:.85rem; color:var(--ods-ink-soft); line-height:1.6; white-space:pre-line;
  max-width:72ch; }
.prog-slot__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.prog-slot__meta em{ font-style:normal; font-size:.72rem; font-weight:600; letter-spacing:.03em;
  padding:2px 9px; border-radius:var(--radius-pill);
  background:var(--ods-surface); color:var(--ods-ink-soft); }
.prog-slot__track{ background:var(--ods-accent-tint) !important; color:var(--ods-accent-dark) !important; }
/* A break is scaffolding rather than content — legible, but not competing. */
.prog-slot--break, .prog-slot--social{ background:var(--ods-surface); border-style:dashed; }
.prog-slot--break .prog-slot__body strong{ font-weight:500; color:var(--ods-ink-soft); }
@media (max-width:560px){
  .prog-slot{ flex-direction:column; gap:8px; }
  .prog-slot__time{ flex-direction:row; align-items:baseline; gap:8px; width:auto; }
}

/* Programme days as tabs. The strip is built by app.js from markup that is stacked to begin with, so
   everything here hangs off .prog-tabs--on: without it the page is the plain stack it always was. */
/* Equal columns rather than a flex row, so every tab is the width of the widest day
   name instead of the width of its own. "Wednesday" and "Friday" beside each other
   otherwise give a strip of tabs that look like different things. */
.prog-tabs__strip{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px;
  margin:0 0 18px; }
.prog-tabs__tab{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:10px 18px; border:1px solid var(--ods-border); border-radius:12px; background:#fff;
  font:inherit; color:var(--ods-ink-soft); text-align:center; cursor:pointer;
  transition:border-color .15s, background .15s, color .15s; }
.prog-tabs__tab:hover{ border-color:var(--ods-primary); color:var(--ods-ink); }
.prog-tabs__tab span{ font-size:.95rem; font-weight:650; }
.prog-tabs__tab em{ font-style:normal; font-size:.78rem; }
.prog-tabs__tab[aria-selected="true"]{ background:var(--ods-primary); border-color:var(--ods-primary); color:#fff; }
.prog-tabs__tab[aria-selected="true"] em{ color:rgba(255,255,255,.82); }
.prog-tabs__tab:focus-visible{ outline:2px solid var(--ods-primary); outline-offset:2px; }
/* The tab names the day it opens, so repeating it at the top of the panel is noise — on screen. Print
   wants it back, because there are no tabs on paper to say which day a list belongs to. */
.prog-tabs--on .prog-day__head{ display:none; }
.prog-tabs--on .prog-day + .prog-day{ margin-top:0; }
.prog-tabs--on .prog-day:focus-visible{ outline:2px solid var(--ods-primary); outline-offset:6px; border-radius:8px; }

@media (max-width:560px){
  /* One column per day would put a seven-day conference into seven slivers. Two across,
     still equal, wrapping onto as many rows as it takes. */
  .prog-tabs__strip{ grid-auto-flow:row; grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .prog-tabs__tab{ padding:9px 10px; }
}

@media print{
  /* Somebody printing a programme wants the whole thing, not whichever day happened to be open. */
  .prog-tabs__strip{ display:none; }
  .prog-tabs--on .prog-day[hidden]{ display:block; }
  .prog-tabs--on .prog-day__head{ display:flex; }
  .prog-tabs--on .prog-day + .prog-day{ margin-top:30px; }
}

/* A session's times, revealed by their own checkbox. Done in CSS rather than script so the form still
   works with scripting off; if :has() is ever unsupported the fields simply stay visible, and the server
   ignores them unless the box is ticked, so the failure mode is cosmetic. */
.session-time:not(:has(.session-time__toggle:checked)) .session-time__fields{ display:none; }
.session-time__fields{ margin-top:12px; }

/* Speakers. A card is the picture, the flag, the name and the title, and nothing else: the biography and
   the sessions are kept off it and open in the dialog, because a grid where one tile runs three times
   taller than its neighbour (one speaker sent a paragraph, the next a page) reads as a layout fault, not a
   longer bio. The title is clamped to two lines for the same reason; grid-auto-rows matches the rows. */
.spk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); grid-auto-rows:1fr; gap:16px; }
.spk{ background:#fff; border:1px solid var(--ods-border); border-radius:14px; padding:20px; text-align:center; }
.spk-grid .spk{ display:flex; flex-direction:column; align-items:center; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .15s; }
.spk-grid .spk:hover, .spk-grid .spk:focus-visible{ border-color:var(--ods-primary); box-shadow:0 12px 30px rgba(16,40,67,.13);
  transform:translateY(-2px); outline:none; }
.spk-grid .spk:focus-visible{ box-shadow:0 0 0 3px var(--ods-primary-tint), 0 12px 30px rgba(16,40,67,.13); }
.spk__photo{ width:88px; height:88px; border-radius:50%; object-fit:cover; margin:0 auto 12px; display:block;
  background:var(--ods-primary-tint); }
.spk__photo--initials{ display:grid; place-items:center; font-size:1.6rem; font-weight:800;
  color:var(--ods-primary); letter-spacing:.02em; }
.spk h3{ margin:0 0 3px; font-size:.98rem; }
.spk__affil{ margin:0; font-size:.82rem; color:var(--ods-ink-soft); line-height:1.45; }
.spk__country{ margin:4px 0 0; font-size:.76rem; color:var(--ods-ink-soft); }
/* The flag SVGs are already circular; the ring is only so a white-heavy flag (Japan) does not dissolve
   into the card. border-radius stays as a guard in case a square file is ever dropped into the folder. */
.spk__flag{ display:block; margin:-4px auto 8px; width:22px; height:22px; border-radius:50%;
  box-shadow:0 0 0 1px var(--ods-border); }
.spk__country{ margin:-4px 0 8px; }
.flag-inline{ width:18px; height:18px; border-radius:50%; vertical-align:-3px; margin-inline-end:6px;
  box-shadow:0 0 0 1px var(--ods-border); }
.spk__bio{ margin:10px 0 0; font-size:.82rem; color:var(--ods-ink-soft); line-height:1.6; text-align:start;
  white-space:pre-line; }
.spk__sessions{ list-style:none; margin:12px 0 0; padding:12px 0 0; border-top:1px solid var(--ods-border);
  display:grid; gap:5px; text-align:start; }
.spk__sessions li{ font-size:.78rem; color:var(--ods-ink-soft); line-height:1.45; }
/* The clamps live only on the grid so the same markup, cloned into the dialog, shows in full. */
.spk-grid .spk__affil{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:2; }
.spk-grid .spk__bio, .spk-grid .spk__sessions{ display:none; }

/* The profile dialog: the native element, so Escape, focus trapping and the backdrop come for free. */
.spk-dialog{ border:0; padding:0; border-radius:16px; background:#fff; width:min(92vw,560px); max-height:90vh; overflow:auto;
  box-shadow:0 24px 60px rgba(16,40,67,.3); }
.spk-dialog::backdrop{ background:rgba(10,16,24,.6); }
.spk-dialog__close{ position:absolute; top:12px; inset-inline-end:12px; width:40px; height:40px; border:0;
  border-radius:50%; background:var(--ods-primary-tint); color:var(--ods-primary); font-size:1.6rem;
  line-height:1; cursor:pointer; display:grid; place-items:center; }
.spk-dialog__close:hover{ background:var(--ods-border); }
.spk-dialog .spk{ border:0; border-radius:0; padding:36px 28px 28px; }
.spk-dialog .spk__photo{ width:132px; height:132px; margin-bottom:16px; }
.spk-dialog .spk__photo--initials{ font-size:2.3rem; }
.spk-dialog .spk h3{ font-size:1.2rem; }
.spk-dialog .spk__affil{ font-size:.9rem; }
.spk-dialog .spk__bio{ margin-top:16px; padding-top:16px; border-top:1px solid var(--ods-border); font-size:.88rem; }

/* The elected board. Deliberately a wider tile and a bigger portrait than .spk: on a speaker grid the photo
   identifies someone you are about to hear, while on a board page the photograph is the point of the page. */
.bm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; margin-top:8px; }
.bm{ background:#fff; border:1px solid var(--ods-border); border-radius:16px; padding:24px 20px; text-align:center; }
.bm__photo{ width:132px; height:132px; border-radius:50%; object-fit:cover; margin:0 auto 14px; display:block;
  background:var(--ods-primary-tint); }
.bm__photo--initials{ display:grid; place-items:center; font-size:2.3rem; font-weight:800;
  color:var(--ods-primary); letter-spacing:.02em; }
.bm__name{ margin:0 0 2px; font-size:1.02rem; }
.bm__creds{ margin:0 0 4px; font-size:.76rem; color:var(--ods-ink-soft); letter-spacing:.02em; }
/* The seat is what a visitor came to read, so it carries the brand colour rather than the muted grey a
   speaker's affiliation gets. */
.bm__role{ margin:0; font-size:.88rem; font-weight:700; color:var(--ods-primary); line-height:1.45; }
.bm__bio{ margin:12px 0 0; padding-top:12px; border-top:1px solid var(--ods-border); font-size:.82rem;
  color:var(--ods-ink-soft); line-height:1.6; text-align:start; white-space:pre-line; }

/* Admin list thumbnail — same circle, small enough for a table row. */
.bm-thumb{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; overflow:hidden;
  background:var(--ods-primary-tint); }
.bm-thumb img{ width:100%; height:100%; object-fit:cover; }
.bm-thumb__ph{ font-size:.85rem; font-weight:800; color:var(--ods-primary); }

/* Workshop cards: picture, title, speaker, and nothing else — the card is the
   invitation and the workshop's own page is the detail. Three across, so the
   thirteen sit in four rows; two on a tablet, one on a phone. The whole card
   is the link.                                                                 */
.wshop-grid{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
@media (max-width:900px){ .wshop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .wshop-grid{ grid-template-columns:1fr; } }
.wshop{ background:#fff; border:1px solid var(--ods-border); border-radius:14px; overflow:hidden;
  transition:box-shadow .15s, transform .15s; }
.wshop:hover{ box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-2px); }
.wshop__link{ display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none; }
/* The picture is stored at 1200×630, so the box is that shape and nothing is letterboxed. The
   placeholder keeps the same box for a workshop without one, so the row stays level. */
.wshop__pic{ display:block; aspect-ratio:1200/630; background:var(--ods-primary-tint); }
.wshop__pic img{ display:block; width:100%; height:100%; object-fit:cover; }
.wshop__pic--ph{ background:linear-gradient(135deg, var(--ods-primary-tint), var(--ods-accent-tint)); }
.wshop__body{ display:flex; flex-direction:column; gap:6px; padding:16px 18px 18px; }
.wshop strong{ display:block; font-weight:600; font-size:1rem; line-height:1.35; color:var(--ods-ink); }
.wshop__link:hover strong{ color:var(--ods-primary); }
.wshop__who{ display:block; font-size:.86rem; font-weight:600; color:var(--ods-primary); line-height:1.4; }
.wshop__who small{ display:block; font-weight:400; font-size:.78rem; color:var(--ods-ink-soft); }
/* Pills are shared with the workshop page. */
.wshop__pills{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.wshop__pill{ display:inline-block; padding:3px 10px; border-radius:var(--radius-pill);
  background:var(--ods-surface-2,#eef4f9); color:var(--ods-primary); font-size:.72rem; font-weight:700; line-height:1.5; }

/* A workshop's own page: the same facts, at reading size, under the picture. */
.wpage{ max-width:820px; margin:0 auto; padding:8px 0 32px; }
.wpage__crumb{ margin:0 0 16px; font-size:.86rem; }
.wpage__crumb a{ text-decoration:none; font-weight:600; }
.wpage__hero{ margin:0 0 22px; aspect-ratio:1200/630; border-radius:16px; overflow:hidden; background:var(--ods-primary-tint); }
.wpage__hero img{ display:block; width:100%; height:100%; object-fit:cover; }
.wpage__title{ margin:6px 0 10px; font-size:1.75rem; line-height:1.25; }
.wpage__who{ margin:0 0 14px; font-size:1rem; line-height:1.45; }
.wpage__who strong{ display:block; color:var(--ods-primary); }
.wpage__who span{ color:var(--ods-ink-soft); font-size:.9rem; }
.wpage__pills{ margin:0 0 18px; }
.wpage__facts{ margin:0 0 22px; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.wpage__facts > div{ background:#fff; border:1px solid var(--ods-border); border-radius:12px; padding:12px 14px; }
.wpage__facts dt{ font-size:.74rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ods-ink-soft); }
.wpage__facts dd{ margin:3px 0 0; font-size:1.05rem; font-weight:700; }
.wpage__facts dd small{ display:block; font-size:.8rem; font-weight:400; color:var(--ods-ink-soft); }
.wpage__overview{ margin:6px 0 22px; }
.wpage__overview h2{ margin:0 0 8px; font-size:1.05rem; }
.wpage__desc{ margin:0; white-space:pre-line; line-height:1.65; }
/* Enrol spans the column: the button is the reason the page exists for a delegate who has decided. */
.wpage__cta .btn--block{ width:100%; }
.wpage__cta{ flex-direction:column; align-items:stretch; }
.wpage__cta-note{ text-align:center; }
/* "Having trouble paying?" under a checkout: contact lines always open, the questions folded. */
.payhelp{ margin:24px auto 0; }
/* The side panel's own margin reset is written earlier in this file and loses to the line above at equal
   specificity, which dropped the panel 24px below the card's top edge. Restated here, more specifically. */
.checkout-layout__aside .payhelp--panel{ margin:0; }
.payhelp__h{ margin:0 0 12px; font-size:1.02rem; }
.payhelp__contact{ display:flex; flex-direction:column; gap:10px; margin:0 0 14px; font-size:.88rem; }
/* The button fills its column and is allowed to wrap: .btn is nowrap, and label plus number on one line
   overran a 360px panel. The number sits under the label, left-to-right in both languages. */
.payhelp__wa{ display:flex; align-items:center; gap:12px; width:100%; box-sizing:border-box; padding:12px 16px;
  white-space:normal; text-align:start; }
.payhelp__wa svg{ width:22px; height:22px; flex:none; }
.payhelp__wa-text{ display:flex; flex-direction:column; gap:2px; min-width:0; line-height:1.3; }
.payhelp__wa-text strong{ font-size:.9rem; font-weight:700; }
.payhelp__wa-text span{ align-self:flex-start; font-size:.86rem; font-weight:500; opacity:.9; font-variant-numeric:tabular-nums; }
.payhelp__email{ margin:0; color:var(--ods-ink-soft); }
.payhelp__list details{ border-top:1px solid var(--ods-border); padding:10px 0; }
.payhelp__list details:last-child{ border-bottom:1px solid var(--ods-border); }
.payhelp__list summary{ cursor:pointer; font-weight:600; font-size:.9rem; color:var(--ods-ink); }
.payhelp__list summary:hover{ color:var(--ods-primary); }
.payhelp__list p{ margin:8px 0 0; font-size:.86rem; line-height:1.55; color:var(--ods-ink-soft); }
.wpage__flyer{ margin:0 0 18px; }
.wpage__flyer .btn{ width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.wpage__flyer svg{ width:18px; height:18px; }
.wpage__note{ margin:18px 0 0; padding:12px 16px; border-inline-start:3px solid var(--ods-accent);
  background:var(--ods-accent-tint); border-radius:8px; font-size:.9rem; color:var(--ods-ink); }
.wpage__back{ margin:26px 0 0; }

/* Admin list: a thumbnail of the card picture, small enough for a table row. */
/* Special Groups cards: the workshop card with a rate under the title. Two
   across and centred — there are two of them, and three columns would leave
   a hole where the third should be.                                            */
.sg-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:820px; margin:0 auto; }
@media (max-width:560px){ .sg-grid{ grid-template-columns:1fr; } }
.sg-card__desc{ display:block; font-size:.86rem; color:var(--ods-ink-soft); line-height:1.45; }
.sg-card__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-top:6px; }
.sg-card__price > strong{ display:inline; font-size:1.1rem; color:var(--ods-primary); }
.sg-card__price > strong small{ font-size:.72rem; font-weight:600; }
.sg-card__price > small{ font-size:.78rem; color:var(--ods-ink-soft); }
.wshop-row{ display:flex; gap:10px; align-items:flex-start; }
.wshop-row__pic{ flex:none; width:76px; height:40px; object-fit:cover; border-radius:6px; border:1px solid var(--ods-border); }

/* Two fields side by side on an admin form, one under the other on a phone. */
.form-grid--2{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
@media (max-width:640px){ .form-grid--2{ grid-template-columns:1fr; } }
/* The workshop picture preview is landscape, unlike a logo. */
.logo-field__preview--wide{ width:152px; height:80px; }
.logo-field__preview--wide img{ width:100%; height:100%; object-fit:cover; }

/* Sponsors. Levels stacked, each taking the full width, rather than a slider per
   level: a sponsor paid to be seen, and a carousel shows four of them at a time
   while moving the rest out of reach. Rank reads from the order and the logo size.  */
.spon-tier + .spon-tier{ margin-top:38px; }
.spon-tier__name{ text-align:center; margin:0 0 18px; font-size:.78rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ods-ink-soft); }
.spon-row{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center; gap:14px; }

/* A fixed tile per logo, with the image fitted inside it.
   The size belongs to the tile, NOT to the image: pinning the image's height and
   leaving its width free — which is what this did first — breaks at both extremes.
   A portrait mark at a fixed 48px height comes out sixteen pixels wide, and an
   eight-to-one wordmark comes out near four hundred, blowing the tile open and
   swamping the row. Fitting inside a box constrains the wide one by width and the
   tall one by height, and every logo ends up on the same optical footing.
   Transparent padding is already trimmed on upload — see SponsorLogoStore. */
.spon{ display:grid; place-items:center; padding:14px 20px; background:#fff;
  border:1px solid var(--ods-border); border-radius:12px; max-width:100%; box-sizing:border-box;
  height:var(--tile-h); --tile-chrome:30px; /* 14px padding top and bottom, plus the two 1px borders */
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.spon a{ display:grid; place-items:center; width:100%; height:100%; min-width:0; min-height:0;
  text-decoration:none; }
.spon:has(a):hover{ border-color:var(--ods-accent); box-shadow:var(--shadow-sm); }
/* max-height in real pixels, NOT the 100% you would expect, and this is load-bearing.
   The image is a grid item in an auto-sized row track, and a percentage max-height
   against an auto track is circular — the track wants to size to the image, the image
   wants to size to the track — so browsers drop it and the logo renders at its natural
   aspect ratio, spilling out the bottom of the tile. A 1216x1280 mark came out 241px
   tall in a 100px box. max-width survives because the inline axis is definite, which is
   why this looked like it only half worked: wide logos behaved, tall ones did not.
   Deriving the value from --tile-h keeps it honest — the height is declared once, per
   level, and both the box and the image are measured from it. */
.spon img{ width:auto; height:auto; object-fit:contain;
  max-width:100%; max-height:calc(var(--tile-h) - var(--tile-chrome)); }
/* The name set as a wordmark where no logo has been uploaded — a grid with holes in
   it looks broken, and the speaker grid already solves this with initials. Clamped,
   because a long company name would otherwise push out of a fixed tile. */
.spon__word{ font-weight:700; color:var(--ods-primary); text-align:center; line-height:1.25;
  overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; }

/* The box comes from the level, never the individual sponsor, so two logos in one
   row cannot disagree about their own importance.

   A definite width, not a max-width. Two reasons, and the second one is a bug that
   was live: a max-width leaves the tile shrink-to-fit, so it was still the logo
   deciding the tile's width and two tiles in a row did disagree — the opposite of
   what the line above claims. Worse, it makes the image's own max-width:100% a
   percentage of a box that is itself sized by that image. Where a sponsor has a
   website the logo is wrapped in a link, and the anchor breaks the cycle by taking
   the image's natural width, which then overflows the tile. Fixing the width makes
   every percentage inside resolve against something real, linked or not. */
.spon-row--sm .spon{ --tile-h:62px;  width:170px; }
.spon-row--md .spon{ --tile-h:80px;  width:215px; }
.spon-row--lg .spon{ --tile-h:100px; width:270px; }
.spon-row--xl .spon{ --tile-h:124px; width:330px; }
.spon-row--sm .spon__word{ font-size:.85rem; }
.spon-row--md .spon__word{ font-size:.95rem; }
.spon-row--lg .spon__word{ font-size:1.1rem; }
.spon-row--xl .spon__word{ font-size:1.3rem; }
@media (max-width:560px){
  /* A phone is narrower than one extra-large tile, so every level comes down to half
     the row — minus half the 14px gap, so two land side by side exactly rather than
     nearly, which is what 44vw was doing.

     Restated per level rather than once on .spon, because the level selectors above
     are the more specific ones: a bare .spon{width:...} here would lose to them and
     the phone would quietly keep the desktop widths. */
  .spon{ padding:12px 14px; --tile-chrome:26px; }
  .spon-row--sm .spon{ --tile-h:56px; width:calc(50% - 7px); }
  .spon-row--md .spon{ --tile-h:66px; width:calc(50% - 7px); }
  .spon-row--lg .spon{ --tile-h:78px; width:calc(50% - 7px); }
  .spon-row--xl .spon{ --tile-h:92px; width:calc(50% - 7px); }
}

/* Sponsor logo thumbnail in the admin table. */
.spon-thumb{ display:grid; place-items:center; width:64px; height:40px; overflow:hidden;
  border:1px solid var(--ods-border); border-radius:8px; background:#F7F9FC; }
.spon-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
.spon-thumb__ph{ font-size:.62rem; color:#93A1B0; text-align:center; }

/* Contact band. */
.conf-contact{ text-align:center; max-width:60ch; margin-inline:auto; }
.conf-contact h2{ margin-bottom:8px; }
.conf-contact p{ color:var(--ods-ink-soft); margin-bottom:20px; }

/* Mobile register bar: follows you down a long page. Never rendered when the
   form is shut, so it cannot offer something that cannot be done.            */
.conf-stickybar{ display:none; }
@media (max-width:760px){
  .conf-stickybar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
    position:sticky; bottom:0; z-index:45; padding:12px 16px; background:#fff;
    border-top:1px solid var(--ods-border); box-shadow:0 -4px 16px rgba(15,76,129,.09); }
  .conf-stickybar span{ font-size:.85rem; color:var(--ods-ink-soft); }
}

/* =====================================================================
   The published fee table. Laid out like the association's own printed
   rate card — a column per period, the one in force today marked — so a
   delegate can see what registering in August saves them.
   ===================================================================== */
.ratecard{ margin-inline:auto; }
/* Four columns will not fit a phone. The table scrolls inside its own box
   rather than making the whole page scroll sideways.                        */
.ratecard__scroll{ overflow-x:auto; border:1px solid var(--ods-border); border-radius:14px;
  background:#fff; -webkit-overflow-scrolling:touch; }
.ratecard__table{ width:100%; min-width:640px; border-collapse:collapse; }

.ratecard__table thead th{ padding:14px 16px; text-align:center; vertical-align:bottom;
  font-size:.8rem; font-weight:700; line-height:1.35; color:#fff;
  background:var(--ods-primary); border-inline-start:1px solid rgba(255,255,255,.16); }
.ratecard__table thead th:first-child{ text-align:start; border-inline-start:0; min-width:260px;
  background:var(--ods-primary-dark); font-size:.95rem; }
.ratecard__table thead th.is-current{ background:var(--ods-accent-dark); }
.ratecard__now{ display:block; margin-top:5px; font-size:.65rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; opacity:.9; }

/* A category heading spanning the table — the printed card groups the same way. */
.ratecard__cat th{ padding:11px 16px; text-align:start; font-size:.86rem; font-weight:700;
  color:var(--ods-ink); background:var(--ods-primary-tint);
  border-top:1px solid var(--ods-border); }
.ratecard__cat small{ display:block; margin-top:2px; font-size:.76rem; font-weight:500;
  color:var(--ods-ink-soft); line-height:1.45; }

.ratecard__table tbody th[scope="row"]{ padding:13px 16px; text-align:start; font-weight:500;
  font-size:.88rem; color:var(--ods-ink); line-height:1.45; border-top:1px solid var(--ods-border); }
.ratecard__table tbody th small{ display:block; margin-top:3px; font-size:.77rem; color:var(--ods-ink-soft);
  line-height:1.45; font-weight:400; }
.ratecard__table tbody td{ padding:13px 16px; text-align:center; white-space:nowrap;
  border-top:1px solid var(--ods-border); border-inline-start:1px solid var(--ods-border); }
.ratecard__table tbody td b{ font-size:1.08rem; font-weight:800; color:var(--ods-primary);
  font-variant-numeric:tabular-nums; }
.ratecard__table tbody td span{ font-size:.7rem; color:var(--ods-ink-soft); letter-spacing:.04em; }
/* The column in force today is the one being read — tinted down the whole height. */
.ratecard__table tbody td.is-current{ background:var(--ods-accent-tint); }
.ratecard__table tbody td.is-current b{ color:var(--ods-accent-dark); }
.ratecard__none{ color:var(--ods-ink-soft); }
.ratecard__table tbody tr.is-full th[scope="row"], .ratecard__table tbody tr.is-full td{ opacity:.55; }

.ratecard__tag{ display:inline-block; margin-inline-start:6px; padding:1px 8px; border-radius:var(--radius-pill);
  font-style:normal; font-size:.68rem; font-weight:700; letter-spacing:.03em;
  background:var(--ods-accent-tint); color:var(--ods-accent-dark); vertical-align:middle; }
.ratecard__tag--full{ background:var(--ods-surface); color:var(--ods-ink-soft); }

.ratecard__foot{ margin:12px 2px 0; font-size:.8rem; color:var(--ods-ink-soft); line-height:1.55; }
.ratecard__foot strong{ color:var(--ods-accent-dark); font-weight:650; }

/* The group-discount ladder. Above the table rather than below it with the footnotes: it is the answer to
   "should we book together", which is decided before the individual prices are read, not after. */
.ratecard__note{ margin:0 2px 12px; font-size:.8rem; color:var(--ods-ink-soft); line-height:1.55; }
.ratecard__note strong{ color:var(--ods-accent-dark); font-weight:650; }

/* On the registration page the table sits below the form, full width — four
   columns squeezed into the 340px side column would need scrolling to read
   a single price.                                                            */
.reg-fees{ margin-top:34px; }
.reg-fees .section__head{ margin-bottom:16px; }

/* =====================================================================
   The registration form. Two columns with a summary that stays put, so
   the choices and the button that acts on them are visible together —
   it used to be one tall stack with the only button at the bottom.
   ===================================================================== */
/* .mform caps a form at 640px, which is right for a column of questions and
   wrong for two columns of them — the grid inherited the cap and squeezed
   both sides into half a screen.                                            */
.reg-form{ max-width:1080px; margin-inline:auto; }
.reg-form__grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
.reg-form__main{ min-width:0; }
.reg-form__side{ position:sticky; top:88px; }
@media (max-width:900px){
  .reg-form__grid{ grid-template-columns:1fr; }
  /* On a phone the summary belongs after the questions, not before them. */
  .reg-form__side{ position:static; order:2; }
}

/* The title and dialling code are short answers and should not each take a
   third of a row next to a name. Selector matches `.mform .row > *`, which
   sets every field to `flex:1 1 200px` and would otherwise win.            */
.mform .row > .reg-form__title{ flex:0 1 120px; }
.mform .row > .reg-form__dial{ flex:0 1 170px; }

.reg-summary{ background:#fff; border:1px solid var(--ods-border); border-radius:14px; padding:20px;
  box-shadow:var(--shadow-sm); }
.reg-summary h3{ margin:0 0 14px; font-size:1rem; }
.reg-summary__list{ margin:0; display:grid; gap:10px; }
.reg-summary__list > div{ display:grid; gap:2px; }
.reg-summary__list dt{ font-size:.75rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ods-ink-soft); }
.reg-summary__list dd{ margin:0; font-size:.9rem; font-weight:600; color:var(--ods-ink); line-height:1.4; }
.reg-summary__total{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--ods-border); }
.reg-summary__total span{ font-size:.85rem; color:var(--ods-ink-soft); }
.reg-summary__total strong{ font-size:1.35rem; font-weight:800; color:var(--ods-primary);
  font-variant-numeric:tabular-nums; }
.reg-summary__note{ margin:12px 0 0; font-size:.75rem; color:var(--ods-ink-soft); line-height:1.5; }
/* The code's line in the summary sits between the rate and what is left to pay; the rate keeps its
   weight so the discount reads as taken off it, not as a second price. */
.reg-summary__line{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:6px; font-size:.85rem; }
.reg-summary__discount{ color:var(--ods-accent-dark); font-weight:600; }
.reg-summary__topay{ margin-top:8px; padding-top:8px; border-top:1px solid var(--ods-line,#e3e8ee); }
.reg-coupon .hint{ display:block; }
.reg-coupon__ok{ display:block; margin-top:6px; font-size:.85rem; color:var(--ods-accent-dark); font-weight:600; }

/* The swapped region, while the server is answering. Dimmed rather than
   emptied — replacing it with a spinner makes the page jump exactly the way
   the full reload used to.                                                 */
.is-loading{ opacity:.55; transition:opacity .12s var(--ease); pointer-events:none; }

/* A button waiting on the server. It is not disabled — see app.js: a disabled
   submit button is left out of the payload, and this form reads intent off it. */
.btn .btn__spinner{ display:none; width:16px; height:16px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; margin-inline-start:9px; }
.btn.is-busy{ pointer-events:none; opacity:.75; }
.btn.is-busy .btn__spinner{ display:inline-block; animation:btn-spin .7s linear infinite; }
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .btn.is-busy .btn__spinner{ animation-duration:2.4s; }
}

/* Vendor credit on the operator landing. Operator host only. */
.landing-hero__vendor{ margin-top:22px; font-size:.82rem; color:var(--ods-ink-soft); }
.landing-hero__vendor a{ color:var(--ods-primary); font-weight:600; }

/* ===== Resource library =====
   Public gallery and its admin. Cards keep a fixed aspect so a grid of mixed
   portrait and landscape uploads still reads as rows; the original is what
   opens, the thumbnail is what the grid draws. */
.lib-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.lib-tab{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px;
  border:1px solid var(--ods-border); background:#fff; color:var(--ods-ink); font-size:.88rem;
  font-weight:600; text-decoration:none; transition:border-color .15s var(--ease), background .15s var(--ease); }
.lib-tab:hover{ border-color:var(--ods-primary); }
.lib-tab.is-active{ background:var(--ods-primary); border-color:var(--ods-primary); color:#fff; }
.lib-tab__n{ font-size:.74rem; font-weight:700; opacity:.7; }

.lib-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.lib-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--ods-border);
  border-radius:16px; overflow:hidden; color:inherit; text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.lib-card--image:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.lib-card__media{ display:block; aspect-ratio:4/3; background:var(--ods-primary-tint); overflow:hidden; }
.lib-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.lib-card__media--doc{ display:grid; place-items:center; }
.lib-card__body{ display:block; padding:12px 14px 14px; }
.lib-card__title{ display:block; margin:0; font-size:.95rem; font-weight:700; line-height:1.35; }
.lib-card__caption{ display:block; margin:4px 0 0; font-size:.82rem; color:var(--ods-ink-soft); line-height:1.5; }
.lib-card__meta{ margin:6px 0 0; font-size:.78rem; color:var(--ods-ink-soft); }
.lib-card__actions{ margin:10px 0 0; display:flex; gap:14px; font-size:.86rem; font-weight:600; }

/* The PDF tile, shared by the gallery and the admin. */
.lib-item__doc{ display:grid; place-items:center; gap:2px; color:var(--ods-primary); }
.lib-item__doc svg{ width:44px; height:44px; }
.lib-item__doc b{ font-size:.72rem; letter-spacing:.08em; }

/* Lightbox: the native dialog, so Escape, focus trapping and the backdrop come for free. */
.lib-lightbox{ border:0; padding:0; background:transparent; max-width:96vw; max-height:96vh; }
.lib-lightbox::backdrop{ background:rgba(10,16,24,.88); }
.lib-lightbox figure{ margin:0; display:grid; gap:10px; justify-items:center; }
.lib-lightbox img{ max-width:92vw; max-height:84vh; object-fit:contain; border-radius:8px; background:#000; }
.lib-lightbox figcaption{ color:#fff; font-size:.92rem; text-align:center; max-width:70ch; }
.lib-lightbox__close, .lib-lightbox__nav{ position:fixed; top:50%; transform:translateY(-50%); width:44px; height:44px;
  border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:1.8rem; line-height:1;
  cursor:pointer; display:grid; place-items:center; }
.lib-lightbox__close{ top:16px; inset-inline-end:16px; transform:none; }
.lib-lightbox__nav--prev{ inset-inline-start:14px; }
.lib-lightbox__nav--next{ inset-inline-end:14px; }
.lib-lightbox__close:hover, .lib-lightbox__nav:hover{ background:rgba(255,255,255,.28); }

/* Admin */
.lib-upload{ margin-bottom:28px; }
.lib-section{ margin:0 0 30px; }
.section__head--row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.section__head--row h2{ margin:0; font-size:1.2rem; }
.lib-admin-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.lib-item{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--ods-border); border-radius:14px; overflow:hidden; }
.lib-item__thumb{ display:grid; place-items:center; aspect-ratio:4/3; background:var(--ods-primary-tint); overflow:hidden; }
.lib-item__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.lib-item__body{ padding:12px 14px 14px; display:grid; gap:8px; align-content:start; }
.lib-item__title{ margin:0; font-size:.94rem; line-height:1.35; overflow-wrap:anywhere; }
.lib-item__meta{ margin:0; font-size:.78rem; color:var(--ods-ink-soft); }
.lib-item__link{ display:flex; gap:6px; align-items:center; margin:0; }
.lib-item__link input{ flex:1; min-width:0; font-size:.78rem; padding:6px 8px; min-height:auto; direction:ltr; }
.lib-item__actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.lib-file{ display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; margin-bottom:14px; }
.lib-file__preview{ display:grid; place-items:center; width:160px; aspect-ratio:4/3; flex:none; border:1px solid var(--ods-border);
  border-radius:12px; overflow:hidden; background:var(--ods-primary-tint); }
.lib-file__preview img{ width:100%; height:100%; object-fit:cover; }
.lib-file__facts{ flex:1; min-width:240px; display:grid; gap:8px; }
.lib-file__facts p{ margin:0; }

/* The programme PDF button and the way in, as the last line of the section's centred heading. Centred with
   the title rather than left under it; wraps onto two lines on a phone rather than shrinking the buttons. */
.section__head .prog-download{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:12px; margin:22px 0 0; } /* qualified to outrank the heading's own p{margin:0} */
.prog-download .btn svg{ width:18px; height:18px; margin-inline-end:8px; vertical-align:-3px; }
/* A hover note on a button. The trigger is a small ring the height of the text beside it; the bubble
   sits above, centred, and appears on hover or keyboard focus — and on tap, since a tap focuses the
   button. Kept to a fixed width so a long sentence wraps rather than running across the band, and
   clamped to the viewport on a phone so it cannot hang off the edge. */
.tip{ position:relative; display:inline-flex; align-items:center; }
.tip__btn{ display:grid; place-items:center; width:22px; height:22px; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--ods-ink-soft); cursor:help; transition:color .15s, background .15s; }
.tip__btn svg{ width:20px; height:20px; }
.tip__btn:hover, .tip__btn:focus-visible{ color:var(--ods-primary); background:var(--ods-primary-tint); outline:none; }
.tip__bubble{ position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px);
  width:min(300px, calc(100vw - 32px)); padding:10px 13px; border-radius:10px;
  background:var(--ods-ink); color:#fff; font-size:.82rem; font-weight:400; line-height:1.5; text-align:start;
  box-shadow:0 8px 24px rgba(26,39,51,.22); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s, transform .15s, visibility 0s .15s; z-index:5; }
.tip__bubble::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--ods-ink); }
.tip:hover .tip__bubble, .tip:focus-within .tip__bubble{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  transition-delay:0s; }

/* Workshop booking: the choosing step. One card per workshop, ticked like the
   category cards, grouped under its day. A full one stays visible and says so
   rather than vanishing — a delegate who was told about it should find it.   */
.wbook-day{ margin:0 0 22px; }
.wbook-day__h{ margin:0 0 10px; font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ods-ink-soft); }
.wbook{ position:relative; display:flex; gap:14px; align-items:flex-start; padding:14px 16px; margin:0 0 10px;
  background:#fff; border:1.5px solid var(--ods-border); border-radius:12px; cursor:pointer; }
.wbook:hover{ border-color:var(--ods-accent); }
.wbook input{ position:absolute; opacity:0; width:1px; height:1px; }
.wbook:has(input:focus-visible){ outline:2px solid var(--ods-accent); outline-offset:2px; }
.wbook:has(input:checked){ border-color:var(--ods-accent); background:var(--ods-accent-tint); }
/* A workshop chosen through Enrol: the same row, fixed — no box to tick and nothing to click. */
.wbook--fixed{ cursor:default; padding-inline-start:18px; border-color:var(--ods-accent); background:var(--ods-accent-tint); }
.wbook--fixed:hover{ border-color:var(--ods-accent); }
/* The booking form fills the page column. .mform caps a form at 640px, which suits a column of inputs
   and not a stack of cards under a step bar that spans 760 — the cards sat visibly narrower than the bar. */
.wbook-form{ max-width:none; }
.wbook--full{ opacity:.6; cursor:not-allowed; }
.wbook__tick{ flex:none; width:22px; height:22px; margin-top:2px; border-radius:6px; border:1.5px solid var(--ods-border); display:grid; place-items:center; color:#fff; }
.wbook__tick svg{ width:14px; height:14px; opacity:0; }
.wbook:has(input:checked) .wbook__tick{ background:var(--ods-accent); border-color:var(--ods-accent); }
.wbook:has(input:checked) .wbook__tick svg{ opacity:1; }
.wbook__body{ flex:1; min-width:0; }
.wbook__body strong{ display:block; font-weight:600; line-height:1.35; }
.wbook__meta{ display:block; margin-top:3px; font-size:.82rem; color:var(--ods-ink-soft); }
.wbook__price{ flex:none; text-align:end; font-size:.9rem; font-weight:700; }
.wbook__price small{ display:block; font-weight:400; font-size:.76rem; color:var(--ods-ink-soft); }
.wbook__total{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; margin:18px 0;
  border:1px solid var(--ods-border); border-radius:12px; background:var(--ods-surface-2,#eef4f9); font-weight:700; }
/* With a code applied the total becomes three lines: the workshops, what the code takes off, what is left. */
.wbook__totals{ margin:18px 0; }
.wbook__totals .wbook__total{ margin:0; }
.wbook__sub{ display:flex; justify-content:space-between; align-items:center; padding:6px 16px; font-size:.92rem; color:var(--ods-muted,#5b6b7a); }
.wbook__discount{ color:var(--ods-accent-dark); font-weight:600; }
.wbook__warn{ margin:8px 0 10px; padding:10px 14px; border-radius:8px; background:#FFF7E6; border:1px solid #F5D08A; color:#7A4B00; font-size:.9rem; line-height:1.5; }
/* The code field takes the card's width with Apply at its end, on one line at any width the card has. */
.wbook__code-row{ display:flex; gap:10px; align-items:stretch; }
.wbook__code-row input{ flex:1 1 auto; min-width:0; }
.wbook__code-row .btn{ flex:0 0 auto; min-height:46px; }
.wpage__cta{ margin:6px 0 18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.wpage__cta-note{ font-size:.86rem; font-weight:600; color:var(--ods-accent-dark); }
/* The completion page and the ticket list one row per place. */
.wdone{ list-style:none; margin:0; padding:0; }
.wdone li{ display:grid; grid-template-columns:1fr auto; gap:4px 14px; padding:12px 0; border-top:1px solid var(--ods-border); }
.wdone li:first-child{ border-top:0; }
.wdone strong{ font-weight:600; }
.wdone small{ display:block; color:var(--ods-ink-soft); font-size:.8rem; }
.wdone code{ font-size:.85rem; }

/* Pass page QR. Centred with auto margins, because the site's img{display:block} ignores the page's
   text-align:center and left it hard against the left edge on a phone. It shrinks with the screen and stays
   square, keeping a white margin round it: a QR read off a phone at a door needs its quiet zone, and a
   pixelated scale keeps the modules sharp rather than blurring them into each other. */
.pass-qr{ display:block; margin:8px auto 0; width:min(280px, 78vw); height:auto; aspect-ratio:1;
  image-rendering:pixelated; background:#fff; padding:14px; border-radius:14px; border:1px solid var(--ods-border); }
.pass-code{ text-align:center; margin:10px 0 0; }
.pass-code code{ font-size:1.25rem; letter-spacing:.1em; }