/* Additions for the live build. style.css stays exactly as delivered in the mockup. */

/* Standalone centred card (sign-in, set/forgot password). Desktop width equals the old 5/12 grid column. */
.card-center{--g:clamp(24px,4vw,64px);width:calc((100% - 11*var(--g))*5/12 + 4*var(--g));margin:0 auto}
@media(max-width:900px){.card-center{width:100%;max-width:560px}}

/* Member dashboard: anchors styled as the mockup's download buttons; sign-out button styled like the sidebar links. */
a.dl{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#fff}
a.dl.block{display:flex;width:100%}
a.rowbtn{text-decoration:none}

/* Honour the hidden attribute on elements that set their own display (e.g. .btn, .panel). */
[hidden]{display:none !important}

/* Payment popup: trust signals. Plain text and simple inline icons only (no card-network logos). */
.sheet-head h3 .head-lock{display:inline-flex;vertical-align:-3px;margin-right:10px;color:var(--gold-2)}
.trust-pill{display:flex;width:max-content;max-width:100%;margin:0 auto 20px;align-items:center;gap:8px;padding:5px 14px 5px 5px;background:#E8F5E9;border:1px solid #A5D6A7;border-radius:999px;color:#1B5E20;font:700 .86rem/1.2 var(--f-head);letter-spacing:.01em}
.trust-dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#2E7D32;flex-shrink:0}
.trust-note{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;font-size:.85rem;line-height:1.5;color:var(--muted)}
.trust-note svg{flex-shrink:0;margin-top:3px}
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:.78rem;letter-spacing:.02em;color:var(--muted)}
.trust-strip .sep{display:inline-block;width:3px;height:3px;border-radius:50%;background:#8794A8}
.trust-strip .stripe-word{font-family:var(--f-head);font-weight:800;font-size:.95rem;letter-spacing:-.01em;color:var(--navy)}

/* Visually hidden but available to screen readers. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Phone country dropdown (flag + calling code). The native <select> underneath stays the real form field. */
.phone .cc-wrap{position:relative;min-width:0}
.phone.cc-js .cc-native{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.cc-btn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;color:var(--ink)}
.cc-btn .cc-flagbox{display:inline-flex;flex-shrink:0}
.cc-btn .cc-dial{font-weight:600;font-variant-numeric:tabular-nums}
.cc-btn .cc-chev{margin-left:auto;flex-shrink:0;color:var(--navy);transition:transform .15s}
.cc-btn[aria-expanded="true"] .cc-chev{transform:rotate(180deg)}
.cc-flag{display:block;width:20px;height:15px;flex-shrink:0;object-fit:cover;border-radius:2px;background:#E4E7EC;box-shadow:0 0 0 1px rgba(0,24,48,.2)}
.cc-pop{position:absolute;z-index:60;left:0;top:calc(100% + 6px);width:min(max(100%,340px),calc(100vw - 40px));background:#fff;border:1px solid #8794A8;border-radius:var(--r);box-shadow:0 18px 40px rgba(0,17,34,.22);overflow:hidden}
.cc-pop.cc-up{top:auto;bottom:calc(100% + 6px)}
.cc-search{display:block;width:100%;min-height:48px;margin:0;padding:10px 14px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:#fff;color:var(--ink);font:inherit;font-size:.97rem;outline:none}
.cc-search:focus{box-shadow:inset 0 -3px 0 var(--gold)}
.cc-search::placeholder{color:#6B778A}
.cc-list{position:relative;max-height:min(288px,45vh);margin:0;padding:4px 0;overflow-y:auto;list-style:none}
.cc-opt{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 14px;cursor:pointer;font-size:.97rem;line-height:1.3}
.cc-opt .cc-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-opt .cc-code{flex-shrink:0;color:var(--muted);font-variant-numeric:tabular-nums}
.cc-opt.is-active{background:var(--mist)}
.cc-opt[aria-selected="true"]{background:var(--gold-3);color:var(--navy);font-weight:700}
.cc-opt[aria-selected="true"] .cc-code{color:var(--navy)}
.cc-opt[aria-selected="true"].is-active{background:#E3CF98}
.cc-opt[hidden]{display:none}
.cc-empty{margin:0;padding:14px;color:var(--muted);font-size:.92rem}

/* Staff dashboards: sign-out button like the sidebar links (also used by the member dashboard). */
.side-nav a .badge{margin-left:8px}

a.chip{display:inline-flex;align-items:center;text-decoration:none;color:inherit}
a.chip[aria-pressed="true"]{color:#fff}

/* Large confirmation popup (staff workflow moments, member congratulations). Built on the mockup's .modal / .sheet. */
.modal.celebrate{align-items:center;z-index:200}
.celebrate-card{text-align:center;padding:clamp(28px,5vw,48px) clamp(22px,4vw,44px);max-width:520px;border-top:6px solid var(--gold)}
.celebrate-icon{width:84px;height:84px;margin:0 auto 20px;border-radius:50%;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 6px rgba(184,146,58,.25)}
.celebrate-card h2{font-size:clamp(1.6rem,4vw,2.1rem);margin:0 0 10px;color:var(--navy)}
.celebrate-card p{margin:0 0 10px;font-size:1.05rem}
.celebrate-card .celebrate-note{font-size:.95rem;color:var(--muted)}
.celebrate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.celebrate-actions .btn{min-width:150px;justify-content:center}

/* Snapshot confirmation: the heading takes focus after the result popup closes; no ring around a heading. */
#snapDoneT:focus{outline:none}

/* Snapshot result popup: the two-sentence description under each pillar bar. */
.pillar-blurb{margin:-2px 0 12px}

/* Snapshot FAQ: a plain single-column list with thin dividers (no cards, no accordion). */
.faq-list{max-width:78ch}
.faq-item{padding:14px 0;border-top:1px solid var(--line)}
.faq-item:first-child{border-top:0;padding-top:4px}
.faq-item h3{font-size:1.08rem;margin:0 0 4px}
.faq-item p{margin:0}
.faq-item strong{color:var(--navy);font-weight:700}

/* Hero credential pills (Snapshot): a gold-ringed icon + bold label on the navy hero. */
.creds{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 14px}
.cred{display:inline-flex;align-items:center;gap:12px;padding:6px 20px 6px 6px;border-radius:999px;border:1.5px solid var(--gold);background:linear-gradient(180deg,rgba(184,145,62,.20),rgba(184,145,62,.07));box-shadow:inset 0 0 0 1px rgba(235,217,174,.10),0 6px 18px rgba(0,0,0,.25);max-width:100%}
.cred-ic{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:2px solid var(--gold);background:var(--navy-deep);color:var(--gold-2);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px rgba(184,145,62,.18)}
.cred-ic svg{width:19px;height:19px}
.cred-tx{font-family:var(--f-head);font-weight:700;font-size:1rem;letter-spacing:.01em;color:#fff;line-height:1.25}
@media(max-width:560px){.creds{flex-direction:column;align-items:flex-start}.cred{padding-right:16px}.cred-tx{font-size:.95rem}}

/* The 6 Trust Pillars section reuses the FAQ list look (thin dividers, no cards); each pillar has more to read, so a little more air. */
.pillar-list{max-width:80ch}
.pillar-item{padding:18px 0}
.pillar-item:first-child{padding-top:4px}
.pillar-item h3{font-size:1.2rem;font-weight:800;margin:0 0 8px}
.pillar-item p{margin:0 0 8px}
.pillar-item p:last-child{margin-bottom:0}

/* Snapshot result popup: the pillar name is bold; the score and the description keep their own styling. */
#resultModal .bar-row > span{font-weight:700;color:var(--navy)}

/* Key-information boxes on the Snapshot page: gold left accent, soft tint, rounded on the right only. */
.callout{background:#FBF6EA;border-left:5px solid var(--gold);border-radius:0 14px 14px 0;padding:clamp(18px,3vw,28px) clamp(18px,3.4vw,34px)}
.callout h2{margin-top:0}
.callout p{margin:0 0 10px}
.callout p:last-child{margin-bottom:0}
.callout .kicker{margin-bottom:8px}
.callout strong{color:var(--navy);font-weight:800}
.callouts{display:grid;gap:14px}
.callouts .callout h3{font-size:1.3rem;font-weight:800;margin:0 0 8px;color:var(--navy)}

/* Home hero: the emblem (taller than wide, 854 x 900) sits inside the rotating gold ring. Padding makes it about 84% of the stage, so the
   dashed ring (inset 5%) and the thin outer ring both stay visible around it; object-fit: contain keeps its proportions. */
.hero.home .seal-stage img{box-sizing:border-box;padding:8%}

/* Sidebar menu icons: 18 px stroke SVGs. Gold on the normal state; on the current page they take the item's own (highlight) colour. */
.side-nav .ni{display:inline-flex;align-items:center;gap:12px;min-width:0}
.side-nav .nav-ic{flex:0 0 18px;width:18px;height:18px;color:var(--gold);opacity:1}
.side-nav a:hover .nav-ic{color:var(--gold-2)}
.side-nav a[aria-current="page"] .nav-ic{color:inherit}

/* Registry "Mark" column: the round tier seal alone (64 px, the thumbnail files' own size), centred in its cell. The image's alt text carries the
   tier name for screen readers; the text is only shown if a thumbnail has not been generated. On phones the stacked rows keep their label/value layout. */
img.mk{display:block;width:64px;height:64px;border-radius:50%;object-fit:contain;background:transparent;margin:0 auto}
@media(min-width:721px){.tbl th.mk-cell,.tbl td.mk-cell{text-align:center}}
@media(max-width:720px){img.mk{margin:0 0 0 auto}}

/* Certificate preview on the dashboard: the template picture with the live fields laid over it (positions come from config/certificate.php). */
.certprev{position:relative;container-type:inline-size;width:100%;max-width:420px;margin:0 auto 14px;aspect-ratio:900/1273;box-shadow:0 10px 30px rgba(0,0,0,.18);border-radius:4px;overflow:hidden;background:#fff}
.certprev .cp-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.certprev .cp-seal{position:absolute;transform:translate(-50%,-50%);height:auto;display:block}
.certprev .cp-t{position:absolute;transform:translate(-50%,-80%);white-space:nowrap;font-family:Helvetica,Arial,sans-serif;font-weight:700;line-height:1;text-align:center}

/* Pages and content: page list as links (the mockup's .pagelist styled buttons) and the editable intro on public pages. */
.pagelist a{display:flex;align-items:center;width:100%;min-height:46px;padding:0 16px;border-left:3px solid transparent;font-weight:600;color:inherit}
.pagelist a[aria-current="true"]{border-left-color:var(--gold);background:var(--mist);font-weight:800}
.pagelist a:hover{background:var(--mist)}
.cms img{max-width:100%;height:auto;border-radius:var(--r)}
.cms a{color:var(--gold-2);text-decoration:underline}
.cms ul,.cms ol{margin:14px 0 0;padding-left:1.3em}
.cms h3{margin-top:18px}

/* Dashboard logo links (all three dashboards). */
.side-brand .logo-link{display:inline-flex;max-width:100%;border-radius:var(--r)}
.side-brand .logo-link:focus-visible,.dashbar .logo-link:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}

/* Member dashboard header bar: logo, greeting, avatar menu. Navy like the sidebar, slim, sticky. */
.dashbar{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px var(--pad);padding-top:calc(8px + env(safe-area-inset-top,0px));background:var(--navy);color:#fff;position:sticky;top:0;z-index:55;border-bottom:1px solid rgba(255,255,255,.14);font-family:var(--f-head)}
.dashbar .grow{flex:1;min-width:0}
.dashbar .logo-link{display:none;align-items:center;flex:0 0 auto} /* the sidebar shows the logo on desktop */
.dashbar .logo-link img{height:34px;width:auto;display:block}
.dashbar .burger{display:none;width:44px;height:44px}
.dashbar .dash-title{display:none;font-size:1rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashbar .greet{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.acct{position:relative;flex:0 0 auto}
.acct-btn{-webkit-tap-highlight-color:transparent;display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:0 2px;background:none;border:0;color:#fff;cursor:pointer;font:inherit;border-radius:var(--r)}
.acct-btn:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.acct-btn .chev{transition:transform .15s;opacity:.85}
.acct-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.avatar{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--navy);border:2px solid var(--gold-2);overflow:hidden;flex:0 0 auto;font-family:var(--f-head);font-weight:700;font-size:.9rem;letter-spacing:.02em;line-height:1}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.avatar.xl{width:96px;height:96px;font-size:1.9rem;border-width:3px}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;max-width:min(300px,calc(100vw - 24px));background:#fff;color:var(--navy);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:var(--r);box-shadow:0 14px 40px rgba(0,16,40,.28);padding:6px;z-index:80}
.acct-menu[hidden]{display:none}
.acct-who{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px;display:flex;flex-direction:column;min-width:0}
.acct-who b{font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-who span{font-size:.82rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-menu a,.acct-menu button{display:flex;align-items:center;width:100%;min-height:44px;padding:0 12px;border:0;background:none;color:var(--navy);font:inherit;font-weight:600;font-size:.95rem;text-align:left;text-decoration:none;cursor:pointer;border-radius:var(--r)}
.acct-menu a:hover,.acct-menu button:hover,.acct-menu a:focus-visible,.acct-menu button:focus-visible{background:var(--mist);outline:0;color:var(--navy)}
.acct-menu form{margin:0}
@media(max-width:900px){.dashbar .logo-link{display:inline-flex}.dashbar .burger{display:inline-flex}.dashbar .dash-title{display:block}.dashbar .logo-link img{height:30px}}
@media(max-width:700px){.dashbar .dash-title{display:none}}
@media(max-width:560px){.dashbar{gap:10px}.dashbar .greet{display:none}}

/* Account settings page */
.photo-row{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.photo-row>div{flex:1 1 220px;min-width:0}
.inp.file{padding:10px 12px;height:auto;min-height:50px}
#photoHint:not(:empty){color:#8a1f1f;margin:8px 0 0}
@media(max-width:560px){.photo-row{flex-direction:column;align-items:flex-start}.photo-row>div{flex:1 1 auto;width:100%}}
.acct-role{display:inline-block;margin-top:6px;align-self:flex-start;padding:2px 10px;border-radius:999px;background:var(--navy);color:var(--gold-2)!important;font-size:.72rem!important;font-weight:700;letter-spacing:.02em}

/* Super Admin Overview (approved mockup: reference/admin-overview-mockup.html) */
.ov{font-family:var(--f-body)}
.ov-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.ov-head h1{margin:0;font:800 24px/1.2 var(--f-head);color:var(--navy)}
.ov-head p{margin:3px 0 0;font-size:12.5px;color:#6b7280}
.ov-period{display:flex;gap:6px;background:#fff;border:1px solid #e3e6ea;border-radius:99px;padding:3px}
.ov-period a{font-size:11.5px;color:#6b7280;border-radius:99px;padding:5px 12px;text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.ov-period a:hover{color:var(--navy)}
.ov-period a[aria-current]{font-weight:700;background:var(--navy);color:#fff}
.ov-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:14px}
.ov-card{display:block;background:#fff;border:1px solid #e6e9ee;border-radius:12px;padding:16px 18px;box-shadow:0 1px 2px rgba(0,24,48,.05);border-top:3px solid var(--gold);color:inherit;text-decoration:none;transition:box-shadow .15s,transform .15s}
.ov-card:hover{box-shadow:0 6px 18px rgba(0,24,48,.12);transform:translateY(-1px)}
.ov-card:focus-visible,.ov-m:focus-visible,.ov-need:focus-visible,.ov-period a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ov-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ov-row.end{align-items:flex-end}
.ov-label{font-size:11px;font-weight:700;letter-spacing:.05em;color:#6b7280;text-transform:uppercase}
.ov-ico{width:30px;height:30px;border-radius:50%;background:#FBF6EA;display:flex;align-items:center;justify-content:center;color:#8A6A22;flex:0 0 auto}
.ov-num{font:800 32px/1.2 var(--f-head);color:var(--navy);margin:8px 0 2px;overflow-wrap:anywhere}
.ov-sub{font-size:12px;color:#6b7280}
.ov-sub.amber{color:#B26A00}.ov-sub.green{color:#2E7D32}
.ov-card.navy{background:var(--navy);border-color:var(--navy);border-top-color:var(--gold-2);color:#fff;box-shadow:0 1px 2px rgba(0,24,48,.12)}
.ov-card.navy .ov-label{color:var(--gold-2)}
.ov-card.navy .ov-ico{background:rgba(212,176,100,.15);color:var(--gold-2)}
.ov-card.navy .ov-num{color:#fff}
.ov-card.navy .ov-sub{color:rgba(255,255,255,.72)}
.ov-card.navy .ov-sub.up{color:#8fd19a}.ov-card.navy .ov-sub.down{color:#f0c27a}
.ov-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.ov-m{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e6e9ee;border-radius:10px;padding:12px 14px;color:inherit;text-decoration:none}
.ov-m:hover{border-color:var(--gold)}
.ov-m.warn{border-color:#f0d9a8}
.ov-m svg{flex:0 0 auto}
.ov-m b{display:block;font:800 18px/1 var(--f-head);color:var(--navy)}
.ov-m span{display:block;font-size:11px;color:#6b7280;margin-top:2px}
.ov-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.ov-panel{background:#fff;border:1px solid #e6e9ee;border-radius:12px;padding:18px 20px;box-shadow:0 1px 2px rgba(0,24,48,.05);min-width:0}
.ov-panel h2{margin:0 0 12px;font:800 15px/1.3 var(--f-head);color:var(--navy)}
.ov-need{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid #f0f1f3;color:#1f2937;text-decoration:none}
.ov-need:hover .ov-need-t{color:var(--navy);text-decoration:underline}
.ov-need-t{flex:1;font-size:13px;min-width:0}
.ov-badge{font:800 13px var(--f-head);background:#FBF6EA;color:#8A6A22;border-radius:8px;min-width:30px;text-align:center;padding:4px 6px}
.ov-badge.amber{background:#fdf1dc;color:#B26A00}
.ov-act{display:flex;gap:10px;padding:9px 0;border-top:1px solid #f0f1f3}
.ov-act>div{flex:1;min-width:0}
.ov-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:5px;flex:0 0 auto}
.ov-dot.green{background:#2E7D32}.ov-dot.amber{background:#B26A00}
.ov-act-t{font-size:12.5px;color:#1f2937;overflow-wrap:anywhere}
.ov-act-time{display:block;font-size:11px;color:#6b7280}
.ov-empty{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid #f0f1f3}
.ov-empty svg{flex:0 0 auto;margin-top:2px}
.ov-empty b{display:block;font:800 14px/1.3 var(--f-head);color:var(--navy)}
.ov-empty span{display:block;font-size:12.5px;color:#6b7280;margin-top:2px}
@media(max-width:560px){.ov-cards{grid-template-columns:1fr}.ov-num{font-size:30px}}
@media(prefers-reduced-motion:reduce){.ov-card{transition:none}.ov-card:hover{transform:none}}

/* Rebrand: the round emblem + a lockup of real text (Cinzel, SIL OFL, self-hosted and subsetted: assets/fonts/cinzel-latin.woff2). */
@font-face{font-family:'Cinzel';src:url('/assets/fonts/cinzel-latin.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
:root{--f-serif:'Cinzel','Trajan Pro','Cormorant Garamond',Georgia,'Times New Roman',serif;
  /* THE one number for the logo lockup: the emblem, the name, the tagline, the TBAC line, their gaps and the header height all follow it.
     1 = the previous size. Change this value and nothing else to make the lockup bigger or smaller. Text keeps its floors (name 13px, other lines 8.5px). */
  --lockup-scale:.88;
  --hdr-h:calc(72px*var(--lockup-scale))}
/* --lk is the name's font size: 16px (times --lockup-scale), easing down on the smallest phones so the name (about 12 em wide) always fits between the
   emblem and the menu button; never below 13px. Everything else is derived from it, so the three lines keep their proportions and nothing is hidden on narrow
   screens. px (not rem) keeps the logo from outgrowing the bar when the system text size is raised.
   Line 2 ("ACCREDITATION COUNCIL") gets exactly the letter-spacing that makes it as wide as the name: width(name) = 12.12 x name size, and the letters of line 2
   take 13.86 x its size plus 21 gaps (both measured for Cinzel 600), so --ls2 = (12.12 x name - 13.86 x line 2) / 21. */
.brand-lockup{--lk:max(13px,calc(clamp(13px,calc(8.2vw - 11.3px),16px)*var(--lockup-scale)));--em:calc(clamp(44px,calc(40px + 1.5vw),52px)*var(--lockup-scale));--fs2:max(8.5px,calc(var(--lk)*.61));--fs3:max(8.5px,calc(var(--lk)*.66));--ls2:calc((12.12*var(--lk) - 13.86*var(--fs2))/21 - .02px);display:flex;align-items:center;gap:calc(clamp(8px,2.4vw,12px)*var(--lockup-scale));color:var(--gold-2);text-decoration:none;flex-shrink:1;min-width:0;border-radius:6px}
.brand-lockup:hover{color:var(--gold-2)}
.brand-lockup:focus-visible{outline:2px solid var(--gold-2);outline-offset:4px}
.brand-lockup .emblem{width:var(--em);height:var(--em);flex:0 0 auto;display:block;object-fit:contain}
.lockup{display:flex;flex-direction:column;gap:calc(var(--lk)*.3);font-family:var(--f-serif);text-transform:uppercase;line-height:1;white-space:nowrap;min-width:0}
.lk-1{font-weight:600;font-size:var(--lk);letter-spacing:.045em;color:var(--brand-gold)} /* flat mid gold where gradient text is not supported */
/* the stops sit on the capitals themselves (they fill about 6% to 72% of the line box), so the whole gradient shows on the lettering */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .lk-1{background:linear-gradient(180deg,var(--brand-gold-light) 6%,var(--brand-gold) 39%,var(--brand-gold-dark) 72%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-bottom:1px}
}
@media (forced-colors:active){.lk-1{background:none;-webkit-text-fill-color:currentColor;color:CanvasText}}
/* line 2 is spread to the width of the name (letter-spacing computed above; justify closes any last pixel); line 3 is centred between its rules */
.lk-2{font-weight:600;font-size:var(--fs2);letter-spacing:var(--ls2);color:var(--brand-gold-small);text-align:justify;text-align-last:justify;margin-right:calc(var(--ls2)*-1)}
.lk-3{display:flex;align-items:center;justify-content:center;gap:calc(var(--lk)*.5);font-weight:600;font-size:var(--fs3);letter-spacing:.46em;color:var(--brand-gold-small)}
.lk-3::before,.lk-3::after{content:'';flex:1;height:1px;background:var(--brand-gold)}
.lk-3>span{margin-right:-.46em}
/* sidebar (compact): a fixed size, 14px times the scale but never below the 13px floor */
.brand-lockup.sm{--lk:max(13px,calc(14px*var(--lockup-scale)));--em:calc(40px*var(--lockup-scale));gap:9px;max-width:100%}
.side-brand .brand-lockup{display:flex}
/* dashboard top bar (mobile): emblem + TBAC, scaled the same way (the TBAC text keeps a 13px floor) */
.dashbar .logo-link.bar-brand{gap:calc(clamp(6px,2vw,10px)*var(--lockup-scale))}
.dashbar .logo-link .emblem{width:calc(clamp(34px,9vw,40px)*var(--lockup-scale));height:calc(clamp(34px,9vw,40px)*var(--lockup-scale));display:block}
.bar-tbac{font-family:var(--f-serif);font-weight:700;font-size:max(13px,calc(clamp(14px,4.4vw,16px)*var(--lockup-scale)));letter-spacing:.14em;color:var(--brand-gold);line-height:1}
/* the public header's height follows the same scale: about 64px on desktop, about 60px on phones and tablets; the menu button stays 48px */
header.site .bar{min-height:var(--hdr-h)}
/* TEXT SIZE: style.css collapses the menu at 1180px, which is 73.75em at the default text size. When someone raises their browser's text
   size the links grow but a px breakpoint does not move, so the full menu would squeeze the logo. This repeats the same collapse in em
   (an em in a media query follows the browser's text-size setting), so at 125% or 150% the burger menu takes over earlier. At the default size it is identical. */
@media(max-width:73.75em){
  .bar-cta{display:none}
  .burger{display:inline-flex}
  .nav{position:fixed;left:0;right:0;top:calc(76px + env(safe-area-inset-top,0px));background:var(--navy);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 22px;border-bottom:1px solid var(--gold);max-height:calc(100vh - 76px);overflow:auto;transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
  .nav.open{transform:none;opacity:1;visibility:visible}
  .nav a{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:1.05rem}
  .nav a[aria-current="page"]::after{display:none}
  .nav .nav-cta{display:flex;margin-top:18px;border:0}
}
@media(max-width:73.75em){
  :root{--hdr-h:calc(68px*var(--lockup-scale))}
  .nav .nav-cta{display:flex}
  /* the drawer sits right under the (shorter) header */
  .nav{top:calc(var(--hdr-h) + env(safe-area-inset-top,0px));max-height:calc(100vh - var(--hdr-h))}
}
/* small phones: a little less side padding and gap so the whole three-line lockup fits beside the menu button */
@media(max-width:480px){
  header.site .wrap{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
  header.site .bar{gap:8px}
}

/* LARGE TEXT: raising the browser's text size grows rem-based type but not the boxes around it, so the page could scroll sideways or cut text off.
   1) The hero facts strip ("11+ countries"): its 1.6rem minimum was wider than a half-width cell at 150%. The minimum is now never more than 8vw,
      which is the same 25.6px as before at the default size, so nothing changes there. */
.facts b{font-size:clamp(min(1.6rem,8vw),3vw,2.3rem)}
/* 2) Hero labels were nowrap inside an overflow-hidden hero, so a long one (the sign-in page badge, "Reviewer and Super Admin sign-in ...") was CUT OFF whenever
      it did not fit: on narrow phones even at the default size, and at larger text on wider screens. It may now wrap; where it fits on one line nothing changes. */
.hero .badge{white-space:normal;max-width:100%}
/* 3) A media query in em follows the browser's text size, so this applies only when text is enlarged (at the default size a 320px phone is exactly
      20em, so (max-width:19.9em) never matches there): a very long word in a heading may break rather than run out of the screen. */
@media(max-width:19.9em){h1,h2,h3,h4{overflow-wrap:break-word}}

/* ---------- The dashboard sidebar (views/partials/sidebar.php, shared by all three dashboards and the mobile drawer) ---------- */
.side{overflow:hidden}                                   /* the middle part scrolls, the logo and the two buttons stay put */
/* THE sidebar type scale: change the numbers here only. Each is its pixel size at the default text size, written as N rem/16 so it still follows
   the browser's text-size setting (13.5px at 100%, about 20px at 150%). The avatar is a picture, so it stays in px. */
.side{--nav-font:calc(13.5rem/16);--nav-icon:calc(17rem/16);--side-name:calc(14rem/16);--side-chip:calc(8.5rem/16);--side-avatar:38px;--side-group:calc(10rem/16);--side-badge:calc(10rem/16);--side-sub:calc(10.5rem/16);--side-row:46px;--side-btn:44px}
.side-nav a{font-size:var(--nav-font);font-weight:600;min-height:var(--side-row)}
.side-nav .nav-ic{flex:0 0 var(--nav-icon);width:var(--nav-icon);height:var(--nav-icon)}
.side-nav a .badge{font-size:var(--side-badge);font-weight:700;line-height:1.4;padding:1px 8px}
.side-brand{padding:20px 24px 14px;border-bottom:0;gap:0}
.side-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column}
.side-card{display:flex;align-items:center;gap:12px;margin:0 16px 6px;padding:12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;min-width:0}
.side-card:hover{background:rgba(255,255,255,.1);color:#fff}
.side-card:focus-visible{outline:2px solid var(--brand-gold);outline-offset:2px}
.side-card[aria-current="page"]{border-color:var(--brand-gold)}
.avatar.md{width:var(--side-avatar);height:var(--side-avatar);font-size:.85rem}
.sc-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.sc-name{font-family:var(--f-head);font-size:var(--side-name);font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-chip{align-self:flex-start;max-width:100%;padding:2px 9px;border-radius:99px;background:var(--brand-gold);color:var(--navy);font-size:var(--side-chip);font-weight:700;letter-spacing:.07em;text-transform:uppercase;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-sub{color:rgba(255,255,255,.74);font-size:var(--side-sub);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-nav{padding:8px 0 14px}
.side-group{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.side-group-label{margin:10px 24px 4px;font-size:var(--side-group);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.side-nav .lock{flex:0 0 auto;opacity:.75}
.side-foot{flex:0 0 auto;margin-top:0;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:10px}
.side-foot form{flex:1 1 calc(50% - 5px);margin:0;min-width:max-content}     /* two side by side; if they cannot both fit, they wrap and stack at full width */
.side-foot a.sb-btn{flex:1 1 calc(50% - 5px);min-width:max-content}
.sb-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:var(--side-btn);padding:0 10px;border:1px solid;border-radius:8px;background:transparent;font:600 .8125rem/1 var(--f-body);text-decoration:none;cursor:pointer;white-space:nowrap}
.sb-btn svg{flex:0 0 auto;width:16px;height:16px}
.sb-btn.signout{color:#fff;border-color:rgba(255,255,255,.55)}                      /* Sign out: white */
.side-foot a.sb-btn{color:var(--brand-gold);border-color:var(--brand-gold);text-decoration:none}          /* Public site: brand gold (label, icon and outline) */
.sb-btn:hover{background:rgba(255,255,255,.1)}
.side-foot a.sb-btn:hover{color:var(--brand-gold);background:rgba(255,255,255,.1);text-decoration:none}
.sb-btn.signout:hover{color:#fff}
.sb-btn:focus-visible{outline:2px solid var(--brand-gold);outline-offset:2px}