/* 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}}

/* The certificate panel on the dashboard: type, number, validity, status and the two buttons (it uses .vr-facts and .dlrow; the old picture preview and its script-placed lines are gone). */


/* 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;flex:0 0 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}
/* --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}
/* ---------- SITE HEADER: three zones (logo | primary menu | actions) ----------
   The menu has seven items (Home, Pathway, Snapshot, TBLE Services, Awards, Registry, Governance & Review) and stays on ONE line, centred in the free space.
   Measured with all seven: the full layout fits from 1280px (about 70px between the zones) and the compact layout down to 1100px (about 44px), so the breakpoints did not move.
   Wide (1280px and up): logo left, the menu centred, Portal (icon + label) and the small call to action on the right, flush with the page container.
   Compact (1100 to 1279): Portal is an icon only (its name stays for screen readers). Under 1100: the menu folds into a panel behind the menu button (the call to
   action stays in the bar; under 640 it moves into the panel). There is no Join link: "Start as Brand Ally" goes to /join.
   The breakpoints are in em (80em = 1280px, 68.75em = 1100px, 40em = 640px at the default text size) so that a larger browser text size folds the header
   EARLIER instead of squeezing it; sizes are in rem so text zoom still works. The three zones always keep at least 1.5rem (24px) between them. */
:root{--hdr-trim:.88; /* the header logo is 12% smaller than the dashboards' (emblem about 40px); it still follows the one --lockup-scale */
  --hdr-h:calc(75px*var(--lockup-scale));              /* 66px: header height 64 to 68px */
  --hdr-gap:1.5rem;--hdr-fs:clamp(.8125rem,calc(.75vw + .35rem),.875rem);--hdr-nav-gap:clamp(.875rem,1.2vw,1.5rem)}
header.site .brand-lockup{--lk:max(13px,calc(clamp(13px,calc(8.2vw - 11.3px),16px)*var(--lockup-scale)*var(--hdr-trim)));--em:calc(clamp(44px,calc(40px + 1.5vw),52px)*var(--lockup-scale)*var(--hdr-trim))}
header.site .bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:var(--hdr-gap);min-height:var(--hdr-h)}
header.site .brand-lockup{grid-column:1;min-width:0}
header.site .nav{grid-column:2;position:static;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--hdr-nav-gap);min-width:0;background:none;padding:0;border:0;max-height:none;overflow:visible;transform:none;opacity:1;visibility:visible} /* (resets style.css's older 1180px menu rules) */
header.site .burger{display:none}
header.site .nav a:not(.btn){font-size:var(--hdr-fs);font-weight:400;letter-spacing:0;white-space:nowrap;line-height:1.3;padding:.5rem 0;border:0;color:#fff}
header.site .nav a[aria-current="page"]::after{display:block}
header.site .nav a[aria-current="page"]{font-weight:500;color:var(--gold-2)}
header.site .actions{grid-column:3;display:flex;align-items:center;justify-content:flex-end;gap:var(--hdr-nav-gap);min-width:0}
header.site .act{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-size:var(--hdr-fs);font-weight:400;letter-spacing:0;white-space:nowrap;line-height:1.3;padding:.5rem 0;color:#fff}
header.site .act:hover{color:var(--gold-2)}
header.site .act[aria-current="page"]{font-weight:500;color:var(--gold-2)}
header.site .act[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold)}
header.site .act .ti,header.site .has-ic .ti{flex:0 0 auto}
header.site .has-ic{display:inline-flex;align-items:center;gap:.5rem}
header.site .nav .nav-more,header.site .nav .nav-cta{display:none} /* panel-only copies: shown below 1100px (Portal) and below 640px (the call to action) */
header.site .cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:36px;height:36px;padding:.4375rem .875rem;border-radius:6px;font-size:.8125rem;font-weight:500;letter-spacing:0;white-space:nowrap;line-height:1.2}
@media(min-width:68.75em) and (max-width:79.99em){ /* compact: 1100 to 1279 */
  header.site{--hdr-fs:.8125rem}
  header.site .act-portal .lbl{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
@media(max-width:68.74em){ /* the menu folds into a panel (under 1100px); the call to action stays in the bar */
  header.site .bar{grid-template-columns:minmax(0,1fr) auto auto}
  header.site .actions{grid-column:2}
  header.site .burger{grid-column:3;display:inline-flex}
  header.site .act{display:none}
  header.site .nav{position:fixed;left:0;right:0;top:calc(var(--hdr-h) + env(safe-area-inset-top,0px));background:var(--navy);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:8px var(--pad) 22px;border-bottom:1px solid var(--gold);max-height:calc(100vh - var(--hdr-h));overflow:auto;transform:translateY(-12px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
  header.site .nav.open{transform:none;opacity:1;visibility:visible;transition:opacity .2s,transform .2s,visibility 0s} /* visible at once, so the first link can take focus */
  header.site .nav a:not(.btn){display:flex;align-items:center;font-size:1.05rem;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12);white-space:normal}
  header.site .nav a[aria-current="page"]::after{display:none}
  header.site .nav .nav-more{display:flex}
}
@media(max-width:39.99em){ /* phones: the call to action moves into the panel as a full-width button */
  header.site .actions{display:none}
  header.site .bar{grid-template-columns:minmax(0,1fr) auto}
  header.site .burger{grid-column:2}
  header.site .nav .nav-cta{display:flex;width:100%;margin-top:18px;min-height:44px;height:auto;border:0;font-size:.9375rem}
}
/* 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 ("80 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}}

/* Pay page: the "Not a Brand Ally yet?" announcement. Navy, 2px gold border, big bold text, icon, gold button. */
.announce{display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);flex-wrap:wrap;background:var(--navy);color:#fff;border:2px solid var(--gold);border-radius:var(--r2);padding:clamp(20px,3vw,32px)}
.announce .announce-ic{flex:0 0 auto;display:flex;color:var(--gold-2)}
.announce p{margin:0;flex:1 1 280px;font-family:var(--f-head);font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.25;font-weight:800;color:#fff}
.announce .btn{flex:0 0 auto}
@media(max-width:560px){.announce .btn{width:100%}}


/* Join page: the reminder just above the Continue button. Soft ivory, 1px gold border, navy text at regular weight (the key words are medium), a thin mail icon. No shadow, no animation. */
.remind{display:flex;align-items:flex-start;gap:14px;margin-top:22px;background:#FDF8EA;color:var(--navy);border:1px solid var(--gold);border-radius:10px;padding:18px 22px;box-shadow:none}
.remind .remind-ic{flex:0 0 22px;display:flex;color:var(--navy);margin-top:1px}
.remind .remind-ic svg{width:22px;height:22px;stroke-width:1.5}
.remind .remind-tx{min-width:0}
.remind p{margin:0;font-size:.9375rem;line-height:1.6;font-weight:400;color:var(--navy)}
.remind p+p{margin-top:10px;opacity:.95}
.remind .med{font-weight:500}

/* Join page: password field with a show/hide button, inline field errors, the card box. */
.pw{display:flex;gap:8px;align-items:stretch}
.pw .inp{flex:1 1 auto;min-width:0}
.pw-toggle{flex:0 0 auto;min-width:76px;min-height:44px;padding:0 14px;border:1px solid var(--navy);border-radius:var(--r);background:#fff;color:var(--navy);font:inherit;font-weight:700;cursor:pointer}
.pw-toggle[aria-pressed="true"]{background:var(--navy);color:#fff}
.field-err{margin:6px 0 0;color:#8a1f11;font-weight:600}
.inp[aria-invalid="true"]{border-color:#8a1f11}
#cardEl{min-height:52px}
#joinWorking:focus,#joinExisting:focus,#joinErrors:focus{outline:3px solid var(--gold-2);outline-offset:2px}

/* ---------- 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(15rem/16);--nav-icon:calc(20rem/16);--side-name:calc(14rem/16);--side-chip:calc(10rem/16);--side-avatar:36px;--side-group:calc(11rem/16);--side-badge:calc(11rem/16);--side-sub:calc(10.5rem/16);--side-row:44px;--side-btn:44px} /* sidebar redesign: 44px rows, 20px icons, 15px labels */
.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}

/* ---------- MOBILE AND TABLET AUDIT (phones 320 to 430, tablets 768; safe areas; large text) ----------
   What was fixed: tables that turned into narrow right-aligned label/value columns (style.css, .tbl.stack: now small cards); the accessibility tab sitting on top
   of the text (hidden under 640px, reached from an "Accessibility" row in the menu instead; at 641 to 1100px the page keeps a gutter for it); links and buttons
   under 44px (logo links, footer lists, chips, row buttons); text under 16px on phones (tables, labels, notes); the search box that clipped its placeholder.
   Safe areas: the header, the page gutters and the footer keep clear of notches and the home bar. All sizes are rem or %, so 200% text size still fits. */
header.site{padding-top:env(safe-area-inset-top,0px)}
.wrap{padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
.foot{padding-bottom:env(safe-area-inset-bottom,0px)}
header.site .brand-lockup,.foot .brand-lockup,.dashbar .logo-link{min-height:44px}
header.site .nav .nav-a11y,.side-a11y{display:none}                    /* phones only (below) */
@media(min-width:641px) and (max-width:1100px){ /* the floating accessibility tab is 48px wide: keep the text clear of it */
  .wrap{padding-left:max(var(--pad),56px,env(safe-area-inset-left,0px));padding-right:max(var(--pad),56px,env(safe-area-inset-right,0px))}
  .main{padding-right:max(clamp(20px,4vw,48px),56px)}
}
@media(max-width:1024px){ /* touch screens: every footer link, chip and header button is a 44px target */
  .chip,.chips a{min-height:44px}
  .foot .legal a{display:inline-flex;align-items:center;min-height:44px}
  .foot li{padding:0}
  .foot li a,.foot address a,.foot p a{display:inline-flex;align-items:center;min-height:44px}
}
@media(max-width:68.74em){ header.site .cta{min-height:44px;height:44px} } /* the call to action beside the menu button on tablets and phones */
@media(max-width:39.99em){ /* phones */
  header.site .nav .nav-a11y{display:flex;align-items:center;gap:.5rem;width:100%;min-height:44px;margin:0;padding:16px 0;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.12);border-radius:0;color:#fff;font:inherit;font-size:1.05rem;text-align:left;cursor:pointer}
  header.site .nav .nav-a11y .ti{flex:0 0 auto}
  .side-a11y{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;margin:0;padding:0 24px;border:0;border-left:3px solid transparent;background:none;color:#fff;font:600 .98rem/1.2 var(--f-body);text-align:left;cursor:pointer}
  .side-a11y .ti{flex:0 0 18px;color:var(--gold)}
  .side-a11y:hover{background:rgba(255,255,255,.06)}
  .tbl,.tbl td,.tbl th{font-size:1rem}
  .field label,.lab{font-size:1rem}
  .note,.tl li,.bar-row,.ticks li{font-size:1rem}
  .field .hint{font-size:.9375rem}
  .searchrow form{flex:1 1 100%}
  .searchrow .inp{max-width:none}
  .chip,.chips a{min-height:44px;display:inline-flex;align-items:center}
  .tbl button.rowbtn,.tbl a.rowbtn{min-height:44px}
  .lead{font-size:1.0625rem}
  .sum-total{font-size:clamp(1.25rem,6.4vw,1.6rem);gap:2px 10px;flex-wrap:wrap}  /* "Due today USD 750" on one line, also at 320px */
  .sum-total span{white-space:nowrap}
  .remind{padding:16px 18px}
  .remind p{font-size:1rem;line-height:1.6}  /* phone body text stays at 16px or more */
  .remind .remind-ic{margin-top:2px}
  .ov-head p{font-size:1rem}
  .ov-period a{min-height:44px;display:inline-flex;align-items:center}
}
/* /pay: the Brand Snapshot row is a div with a small label; stretch the label over the whole row so the row is the tap target (as in the other rows) */
.svc{position:relative}
.svc label.ttl::after{content:'';position:absolute;inset:0}

#organisation a{overflow-wrap:anywhere} /* a long address in the list (www.thebrandlaureate.com) wraps instead of pushing the page sideways at 320 px with larger text */
/* ---------- /governance-review: the Council and the Expert Reviewers ----------
   Cards reuse the page tokens (navy, gold var(--gold), --gold-3, --f-serif, --muted). A card is a 4:5 portrait in a premium frame (1px gold outer border (--gold), a 0.5px light-gold
   border inset 6px, a navy gradient behind the photo, a small gold diamond on the bottom edge), then the name, the role, the expertise and the country with its flag.
   Gold is only ever a border, a line or the diamond: the text is navy, ink or the muted blue-grey (gold text on white fails contrast).
   Columns: Council 4 / 2 / 1, Expert Reviewers 5 / 3 / 2 / 1 (see the media queries below). */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.gov-jump,.gov-tabs{justify-content:center;margin-bottom:clamp(28px,4vw,48px);scroll-margin-top:calc(var(--hdr-h,66px) + 16px)}
.gov-jump .tab{text-decoration:none}
.gov-panel{margin:0 0 clamp(48px,7vw,80px)}
.gov-panel:last-child{margin-bottom:0}
.gov-panel[hidden]{display:none}
.gov-panel:focus,.gov-panel:focus-visible{outline:0;box-shadow:none} /* a panel takes focus only from a deep link; it is not a Tab stop */
.gov-h{text-align:center;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:clamp(24px,3.5vw,40px)}
.gov-js .gov-h{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.gov-grid{--gcol:clamp(16px,2vw,32px);--n:1;list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(32px,4vw,52px) var(--gcol)}
.gov-council{max-width:1160px}
.gov-reviewers{max-width:1152px}
.gov-card{scroll-margin-top:calc(var(--hdr-h,66px) + 16px);flex:0 0 calc((100% - (var(--n) - 1) * var(--gcol)) / var(--n));min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
/* columns, by the width of the panel (a container query in em: a larger browser text size makes the em bigger and drops the columns, which a viewport media query does not do in Chrome).
   Expert Reviewers: 3 per row (the last row of 2 centred) from a viewport of 900px (panel 49.25em), 2 columns (the last card centred) from 480px (27.36em), 1 below.
   Council (4 people): TWO cards per row and two rows from a panel of 36.25em = 580px (viewport 636px, the first width where two 280px cards and the 20px gap fit and no name wraps; the request said 640 or the first such width), ONE column below.
   Every Council card has the same width, between 280px and 400px, so a portrait never becomes huge; the grid is centred with an equal gap. An incomplete last row of the Reviewers is centred. */
.gov-panel{container-type:inline-size}
.gov-council{--gcol:clamp(20px,3vw,40px);gap:var(--gcol)}
@container (min-width:36.25em){.gov-council .gov-card{flex:0 0 clamp(280px,calc((100% - var(--gcol)) / 2),400px)}}
@container (min-width:31em){.gov-reviewers{--n:2}}
@container (min-width:49.25em){.gov-reviewers{--n:3}}
@container (max-width:36.24em){.gov-council .gov-card{flex:0 0 min(100%,17.5em)}.gov-council .gov-frame{width:min(100%,200px)}}
@container (max-width:30.99em){.gov-reviewers .gov-card{max-width:17.5em}.gov-reviewers .gov-frame{width:min(100%,200px)}}
/* THE shared name typography: one set of custom properties for ALL nine names AND for the honorific line above a name (same family, size, weight, letter-spacing, line-height and colour:
   change a value here and every name and prefix changes). The size never goes below 15px; its clamp follows the Council card width (the Council holds the longest name, 17.35em). */
.gov-grid{--gov-name-family:var(--f-serif);--gov-name-weight:700;--gov-name-spacing:.01em;--gov-name-leading:1.3;--gov-name-color:var(--navy);--gov-name-size:clamp(.9375rem,calc(min(17.5rem,100cqw)/17.7),1.1rem)}
@container (min-width:36.25em){.gov-grid{--gov-name-size:clamp(.9375rem,calc(min(25rem,(100cqw - 1.5rem)/2)/17.7),1.1rem)}}
:root{--gov-aspect:4/5} /* THE frame's aspect ratio: the page draws the frame with it and bin/make-team-photos.php crops every portrait to it (one setting) */
.gov-frame{position:relative;width:100%;aspect-ratio:var(--gov-aspect);border:1px solid var(--gold);background:linear-gradient(160deg,var(--navy-2),var(--navy-deep))}
.gov-frame picture{display:contents}
.gov-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,25%);display:block}
/* the focal point of a portrait, as classes (no inline style): horizontal and vertical position in steps of 5 percent */
.gov-fx-0{--fx:0%}.gov-fx-5{--fx:5%}.gov-fx-10{--fx:10%}.gov-fx-15{--fx:15%}.gov-fx-20{--fx:20%}.gov-fx-25{--fx:25%}.gov-fx-30{--fx:30%}.gov-fx-35{--fx:35%}.gov-fx-40{--fx:40%}.gov-fx-45{--fx:45%}.gov-fx-50{--fx:50%}.gov-fx-55{--fx:55%}.gov-fx-60{--fx:60%}.gov-fx-65{--fx:65%}.gov-fx-70{--fx:70%}.gov-fx-75{--fx:75%}.gov-fx-80{--fx:80%}.gov-fx-85{--fx:85%}.gov-fx-90{--fx:90%}.gov-fx-95{--fx:95%}.gov-fx-100{--fx:100%}
.gov-fy-0{--fy:0%}.gov-fy-5{--fy:5%}.gov-fy-10{--fy:10%}.gov-fy-15{--fy:15%}.gov-fy-20{--fy:20%}.gov-fy-25{--fy:25%}.gov-fy-30{--fy:30%}.gov-fy-35{--fy:35%}.gov-fy-40{--fy:40%}.gov-fy-45{--fy:45%}.gov-fy-50{--fy:50%}.gov-fy-55{--fy:55%}.gov-fy-60{--fy:60%}.gov-fy-65{--fy:65%}.gov-fy-70{--fy:70%}.gov-fy-75{--fy:75%}.gov-fy-80{--fy:80%}.gov-fy-85{--fy:85%}.gov-fy-90{--fy:90%}.gov-fy-95{--fy:95%}.gov-fy-100{--fy:100%}
.gov-frame::before{content:'';position:absolute;inset:6px;border:.5px solid var(--gold-3);z-index:2;pointer-events:none}
.gov-frame::after{content:'';position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:var(--gold);transform:translateX(-50%) rotate(45deg);z-index:3}
.gov-name{margin:24px 0 6px;max-width:100%}
.gov-name,.gov-hon{font-family:var(--gov-name-family);font-size:var(--gov-name-size,.9375rem);font-weight:var(--gov-name-weight);letter-spacing:var(--gov-name-spacing);line-height:var(--gov-name-leading);color:var(--gov-name-color)}
.gov-hon{display:block;min-height:calc(var(--gov-name-leading) * 1em)} /* the honorific phrase: the SAME typography as the names; an empty one reserves its line in the other cards so the names, titles and rules line up */
.gov-nm{display:block}
.gov-role{margin:0;font-family:var(--f-head);font-weight:600;font-size:1rem;line-height:1.4;color:var(--muted)}
.gov-exp{margin:8px 0 0;font-size:1rem;line-height:1.45;color:var(--navy-3)}
.gov-country{margin:10px 0 0;font-size:1rem;line-height:1.4;color:var(--muted)}   /* inline flow: the flag stays with the first word when a long country name wraps */
.gov-exp .gov-country{margin:0;display:inline;font-size:inherit;color:inherit}
.gov-pintro{text-align:center;margin:0 auto clamp(20px,3vw,32px);max-width:70ch}
.gov-top-h{text-align:center;margin-bottom:clamp(20px,3vw,32px)}
.gov-flag{display:inline-block;width:20px;height:14px;margin:0 8px 0 0;vertical-align:-2px;border-radius:2px;border:.5px solid rgba(0,24,48,.35)}
.gov-rule{display:block;width:40px;height:1px;margin:auto auto 0;background:var(--gold)} /* pinned to the bottom of an equal-height card: the rules line up across a row */
.gov-card>.gov-role:nth-last-child(2),.gov-card>.gov-exp:nth-last-child(2){margin-bottom:16px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .gov-card{transition:transform .25s ease}
  .gov-card:hover{transform:translateY(-4px)}
}
html.a11y-still .gov-card:hover{transform:none}

/* Table headers may wrap on a narrow screen (SEO phase 6 follow-up). style.css sets white-space:nowrap on every .tbl th, so a long header such as the Six Trust Pillars
   "Description: what we look at" ran 350px wide on a 320px screen at 150% text (it sits in the visually hidden header row). From 640px down a header wraps and may break
   inside a long word; min-width:0 lets the cell shrink to its column. Wider than 640px, and every table that already fits, is exactly as before. */
@media(max-width:640px){
  .tbl th{white-space:normal;min-width:0;overflow-wrap:anywhere}
}

/* ==========================================================================================================================================================
   HEADING SCALE (owner decision, SEO phase 6 follow-up): THE one place where the size of a public heading is set. Dashboards and admin screens (body data-page
   "member" and "staff") keep their own sizes. Only font-size, line-height, margins and text-wrap are changed: no heading text, level, order, id or anchor.
   The size follows the TAG (h1, h2, h3), never a class or an inline style, so the visual order always matches the document order: H1 > H2 > H3, each step at least 1.15 times.
   Sizes were chosen from the widest headings on the site (measured with the text on one line, 1100 to 1440px): the longest H2 fits one line up to 23.8px at 1280px, the
   Governance H1 up to 31.2px, the Home hero H1 (it shares the hero with the seal) up to 25.7px. Floors: H1 1.5rem, H2 1.125rem, H3 1rem from 900px; on phones and tablets
   (under 900px) H1 1.25rem or more, H2 1.0625rem or more, and a heading may wrap (text-wrap: balance) but never runs past the screen.
   ========================================================================================================================================================== */
:root{
  --h1-size:clamp(1.4rem,1.15rem + 1.1vw,1.8rem);   /* 22.4px on a phone, 28.8px at 1000px and up */
  --h1-hero-size:var(--h1-size);                    /* the Home hero H1 */
  --h2-size:clamp(1.17rem,1.05rem + .7vw,1.25rem);  /* 18.7px on a phone, 20px from 700px */
  --h3-size:1rem;                                   /* 16px */
  --h1-lh:1.2;
  --h2-lh:1.25;
  --h3-lh:1.3;
}
@media(min-width:900px){
  :root{--h1-hero-size:1.5rem} /* 24px: fits the 637px hero column at 1280px (the H1 has 53 characters); from 1100px to 1190px it wraps in two balanced lines */
}
@media(min-width:1100px){
  :root{--h1-size:clamp(1.5rem,min(1.15rem + 1.1vw,(100vw - 7.5rem) / 37.5),1.8rem)} /* never wider than the page: the longest H1 (Governance, 76 characters) stays on one line */
}
body:not([data-page="member"]):not([data-page="staff"]) :is(h1,h2,h3){text-wrap:balance;overflow-wrap:break-word}
body:not([data-page="member"]):not([data-page="staff"]) h1{font-size:var(--h1-size);line-height:var(--h1-lh);max-width:none}
body:not([data-page="member"]):not([data-page="staff"]) .hero.home h1{font-size:var(--h1-hero-size)}
body:not([data-page="member"]):not([data-page="staff"]) h2{font-size:var(--h2-size);line-height:var(--h2-lh)}
body:not([data-page="member"]):not([data-page="staff"]) h3{font-size:var(--h3-size);line-height:var(--h3-lh)}

/* Footer column titles ("Explore", "Contact") are plain text, not headings: they repeat on every page, so they must not fill the outline (the page-end
   titles, "Related pages about ...", "Questions about ...", "Key facts about ...", stay real h2 elements: brief File B items 24, 99, 102, 106). This class gives a <p>
   exactly the look the h2 had (the h2 size scale above), and nothing else. */
.h2-look{font-family:var(--f-head);font-size:var(--h2-size);font-weight:700;letter-spacing:-.022em;line-height:var(--h2-lh);margin:0;text-wrap:balance;overflow-wrap:break-word}

/* 200% text size, narrow screens: a long address in the footer (council@tbac.ac) and a form field in a row may break or shrink instead of widening the page. */
.foot a{overflow-wrap:anywhere}
.tel,.foot a.tel,.foot address a.tel{white-space:nowrap;overflow-wrap:normal;word-break:keep-all}   /* a telephone number never splits; the line wraps only after the slash */
.tel-sep{white-space:nowrap}
.field{min-width:0}
.inp,select.inp{max-width:100%}
.row2.reg-filter{grid-template-columns:2fr 1fr 1fr} /* the Registry filter row: three columns, one column on phones */
@media(max-width:640px){.row2.reg-filter{grid-template-columns:minmax(0,1fr)}}
.lockbox>.stack{min-width:0;flex:1 1 0} /* the text beside the lock icon may shrink, so a large heading wraps instead of widening the page */
.announce p{min-width:0;max-width:100%;overflow-wrap:anywhere}

/* Phase 7: the small "Privacy policy" link under the consent text of the Snapshot form and the payment text of the Join form (it opens in a new tab, so nothing typed is lost). */
.form-policy{margin:8px 0 0}
.form-policy a{display:inline-block;min-height:24px;padding:4px 0}

/* The questions of a page are a list (ul > li > details, SEO phase 8 follow-up): the same look as before, without bullets, and each item is the first details of its own li. */
.faq-ul,.prose .wrap>ul.faq-ul{list-style:none;margin:0;padding:0;max-width:none}
.faq-ul>li{margin:0;padding:0}
.faq-ul>li>details.faq:first-of-type{border-top:0;margin-top:0}
.faq-ul>li:first-child>details.faq:first-of-type{border-top:1px solid var(--line);margin-top:18px}

/* Certificate check (/verification): the result is words AND an icon AND a border, never colour alone. The QR code is an inline SVG that scales to its box. */
.vr-live:focus{outline:3px solid var(--gold);outline-offset:4px}
.vr-facts{margin:16px 0 0;padding:0}
.vr-facts>div{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:4px 16px;padding:10px 0;border-top:1px solid var(--line)}
.vr-facts dt{font-weight:700;color:var(--navy)}
.vr-facts dd{margin:0;overflow-wrap:anywhere}
.vr-no{font-variant-numeric:tabular-nums;letter-spacing:.02em}
@media(max-width:520px){.vr-facts>div{grid-template-columns:minmax(0,1fr)}}
.qr{display:block;width:min(100%,220px);height:auto;background:#fff}
.rec-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start}
@media(max-width:700px){.rec-grid{grid-template-columns:minmax(0,1fr)}}

/* Links in running text inside a DARK section (the hero, .dark, navy panels, the footer, the sidebar, the bars). The rules for ".muted a", ".col a" and ".link" paint a link
   navy, which is invisible on navy (only its underline showed, e.g. "BrandMark Pathway" in the Brand Mirror hero). One rule for all of them: the light gold token (--gold-2,
   about 8:1 on navy; --gold-3 and white for the visited and hover states are lighter still), the same gold underline, and a visible hover, visited and focus state.
   The accessibility tool's high-contrast mode still wins (it forces yellow links with !important); larger text changes nothing here. Test: tests/security/t132.js. */
:is(.hero,.dark,.panel.navy,.foot,.side,.topbar,.sheet-head,.tip,.crumbs) :is(.muted,.col) a:not(.btn):not(.dl),
:is(.hero,.dark,.panel.navy,.foot,.side,.topbar,.sheet-head,.tip,.crumbs) a.link{color:var(--gold-2);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
:is(.hero,.dark,.panel.navy,.foot,.side,.topbar,.sheet-head,.tip,.crumbs) :is(.muted,.col) a:not(.btn):not(.dl):visited,
:is(.hero,.dark,.panel.navy,.foot,.side,.topbar,.sheet-head,.tip,.crumbs) a.link:visited{color:var(--gold-3)}
:is(.hero,.dark,.panel.navy,.foot,.side,.topbar,.sheet-head,.tip,.crumbs) :is(.muted,.col) a:not(.btn):not(.dl):is(:hover,:visited:hover),
:is(.hero,.dark,.panel.navy,.foot,.side,.topbar,.sheet-head,.tip,.crumbs) a.link:is(:hover,:visited:hover){color:var(--white);text-decoration-color:var(--gold-2);text-decoration-thickness:2px}
:is(.hero,.dark,.panel.navy,.foot,.side,.topbar,.sheet-head,.tip,.crumbs) :is(.muted,.col) a:not(.btn):not(.dl):focus-visible,
:is(.hero,.dark,.panel.navy,.foot,.side,.topbar,.sheet-head,.tip,.crumbs) a.link:focus-visible{outline:2px solid var(--gold-3);outline-offset:3px;border-radius:2px}
/* The preview picture of the certificate in the dashboard card (a link to the PDF; the picture is made by the server, see CertificatePreview). */
.cert-prev{display:block;width:100%;max-width:420px;margin:0 auto 14px;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.cert-prev img{display:block;width:100%;height:auto;border-radius:4px}
/* The filter chips of /admin/invitations are links: the chosen one is aria-current (aria-pressed is not allowed on a link), drawn like a pressed chip. */
a.chip[aria-current="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

/* the footer button to the verification page, directly below the e-mail line: a FILLED button (the site's gold with navy text, 6.1:1; hover 8.7:1), rounded like the other buttons, at least 44px high, with a visible focus ring */
.foot-verify{margin:14px 0 0}
.foot .foot-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--gold);border-radius:8px;background:var(--gold);color:var(--navy);text-decoration:none;font-weight:700;line-height:1.2}
.foot .foot-btn:hover{background:var(--gold-2);border-color:var(--gold-2);color:var(--navy)}
.foot .foot-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.foot .foot-btn svg{color:var(--navy);flex:0 0 auto}

/* The e-mail verification pop-up: a native <dialog> opened by verify-popup.js. Rem units (so larger text scales it), tokens from the page, no animation under reduced motion. */
.vd{width:min(92vw,520px);max-height:92vh;padding:0;border:1px solid var(--gold);border-radius:14px;background:#fff;color:var(--ink,#111);overflow:auto;box-shadow:0 20px 60px rgba(0,12,28,.45)}
.vd::backdrop{background:rgba(0,12,28,.78)}
.vd-card{padding:clamp(22px,5vw,36px);text-align:center}
.vd-icon{display:inline-flex;width:64px;height:64px;align-items:center;justify-content:center;border-radius:50%;background:var(--navy);color:var(--gold-3);margin-bottom:14px}
.vd h2{font-size:clamp(1.3rem,4vw,1.7rem);margin:0 0 12px;color:var(--navy)}
.vd p{margin:0 0 22px;font-size:1rem;line-height:1.6;text-align:left}
.vd-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.vd-actions .btn{min-height:44px}
.vd-actions form{margin:0}
@media(prefers-reduced-motion:no-preference){.vd[open]{animation:vdIn .18s ease-out}@keyframes vdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}

/* ---------- The sidebar, version 2 (docs/SIDEBAR.md): THREE zones. Fixed top (brand row + one-row profile), the NAV is the only scrolling zone, fixed footer with the two buttons side by side. ----------
   Why the footer sat under the phone browser's toolbar: the sidebar was `height:100vh` (the LARGE viewport, which includes the area behind the toolbar) and the drawer was fixed with
   top:0;bottom:0;height:auto. Both now use the dynamic viewport height (100dvh, with a 100vh fallback). One place to change the numbers: the custom properties on .side. */
.side{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.side-top{flex:0 0 auto}
.side-brand{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;min-height:56px;padding:10px 12px 6px 16px}
.side-close{display:none;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;border:1px solid rgba(255,255,255,.3);border-radius:10px;background:transparent;color:#fff;cursor:pointer}
.side-close:hover{background:rgba(255,255,255,.1)}
.side-card{min-height:56px;margin:0 12px 6px;padding:8px 10px;gap:10px;align-items:center}
.sc-text{gap:2px}
.sc-chip{font-size:var(--side-chip);padding:1px 8px}
.side-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent;padding:6px 0 10px;gap:2px;
  background:linear-gradient(var(--navy) 30%,rgba(0,24,48,0)) 0 0/100% 28px no-repeat local,linear-gradient(rgba(0,24,48,0),var(--navy) 70%) 0 100%/100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.5),rgba(0,0,0,0)) 0 0/100% 10px no-repeat scroll,radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.5),rgba(0,0,0,0)) 0 100%/100% 10px no-repeat scroll} /* a CSS-only fade at an edge when more is hidden beyond it */
.side-nav::-webkit-scrollbar{width:8px}
.side-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:8px}
.side-nav a{min-height:var(--side-row);padding:0 16px 0 13px;gap:12px;font-size:var(--nav-font);font-weight:600}
.side-nav .ni{gap:12px}
.side-nav a:focus-visible,.side-group-btn:focus-visible,.side-close:focus-visible,.side-a11y:focus-visible{outline:2px solid var(--brand-gold);outline-offset:-2px}
.side-card:focus-visible{outline:2px solid var(--brand-gold);outline-offset:2px}
.side-group{display:flex;flex-direction:column;margin-top:4px}
.side-group-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:0 16px;border:0;background:none;color:rgba(255,255,255,.78);font:700 var(--side-group)/1.2 var(--f-head);letter-spacing:.1em;text-transform:uppercase;text-align:left;cursor:pointer}
.side-group-btn:hover{color:#fff;background:rgba(255,255,255,.05)}
.side-group-btn svg{flex:0 0 auto;transition:transform .15s}
.side-group-btn[aria-expanded="false"] svg{transform:rotate(-90deg)}
@media(prefers-reduced-motion:reduce){.side-group-btn svg{transition:none}}
.side-group-items{display:flex;flex-direction:column;gap:2px}
.side-group-items[hidden]{display:none}
.side-foot{flex:0 0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(6.5em,1fr));gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--navy-deep);border-top:1px solid rgba(255,255,255,.18)}
.side-foot form,.side-foot a.sb-btn{min-width:0;flex:none}
.side-foot .sb-btn{min-height:44px}
@media(max-width:39.99em){ /* the drawer */
  .side{position:fixed;left:0;top:0;bottom:auto;height:100vh;height:100dvh;width:min(300px,86vw)}
  .side-close{display:inline-flex}
  .side-a11y{min-height:44px;padding:0 16px 0 13px;font-size:var(--nav-font)}
}

/* Certificate check result card (/verification), 14 Oct 2026. One shell for every state; only the strip colour and icon change (words AND icon, never colour alone).
   The card is a size container: it lays the seal beside the text from 40em (about 700px of viewport) and the number takes its size from the card width (cqw),
   shrinking toward 16px but never wrapping. Colours are fixed pairs, every text on its fill is at least 4.5:1 (measured in tests/security/t150.js). */
.vr-wide{max-width:820px;margin:28px auto 0}
.vr-note{text-align:center;margin-top:16px}
.vr{container-type:inline-size;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 14px 40px rgba(0,24,48,.14);--vr-fill:#EEF0F3;--vr-ink:#2B3547;--vr-edge:#455063;--vr-dot:#455063}
.vr-valid{--vr-fill:#E6F4EA;--vr-ink:#12512A;--vr-edge:#1F6A3A;--vr-dot:#1F6A3A}
.vr-expired{--vr-fill:#FFF3D1;--vr-ink:#5E4100;--vr-edge:#8A5A00;--vr-dot:#8A5A00}
.vr-revoked{--vr-fill:#FCE9E6;--vr-ink:#7A1A0E;--vr-edge:#8A1F11;--vr-dot:#8A1F11}
.vr-top{display:flex;justify-content:space-between;gap:12px;padding:12px clamp(16px,4cqw,32px);background:var(--navy);color:var(--gold-2);border-bottom:3px solid var(--gold);font:700 .72rem/1.3 var(--f-head);letter-spacing:.16em;text-transform:uppercase}
.vr-strip{display:flex;align-items:center;gap:14px;padding:16px clamp(16px,4cqw,32px);background:var(--vr-fill);color:var(--vr-ink);border-bottom:1px solid var(--vr-edge)}
.vr-circle{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--vr-dot);color:#fff;border:2px solid var(--vr-edge)}
.vr-title{margin:0;font:800 1.5rem/1.2 var(--f-head);color:var(--vr-ink)}
.vr-msg{min-width:0}.vr-msg p{margin:2px 0 0;color:var(--vr-ink)}
.vr-body{display:grid;gap:20px;justify-items:center;text-align:center;padding:clamp(20px,5cqw,32px) clamp(16px,4cqw,32px)}
.vr-seal{display:block;width:150px;height:auto;aspect-ratio:1;filter:drop-shadow(0 6px 12px rgba(0,24,48,.25))}
.vr-main{min-width:0;width:100%}
.vr-label{margin:0 0 6px;font:700 .75rem/1.3 var(--f-head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vr-org{margin:0 0 14px;font-family:var(--f-serif);font-weight:700;font-size:clamp(28px,6cqw,40px);line-height:1.15;color:var(--navy);overflow-wrap:anywhere;hyphens:auto}
.vr-kind{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 8px;max-width:100%;margin:0;padding:6px 16px;border:1.5px solid var(--gold);border-radius:999px;background:#FFFBF0;color:var(--navy);font:700 .95rem/1.3 var(--f-head)}
.vr-dot::before{content:"\00B7";color:var(--gold-ink);font-weight:800}
.vr-rule{height:2px;border:0;margin:18px 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.vr .vr-facts{margin:0;display:grid;gap:14px}
.vr .vr-facts>div{display:block;padding:0;border:0}
.vr .vr-facts dt{margin:0 0 2px;font:700 .8rem/1.3 var(--f-head);letter-spacing:.04em;color:var(--muted)}
.vr .vr-facts dd{margin:0;font:700 1.05rem/1.35 var(--f-head);color:var(--navy);overflow-wrap:normal}
.vr .vr-f-no dd,.vr .vr-no{font-family:var(--f-head);font-weight:800;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.01em;white-space:nowrap;font-size:clamp(16px,5.2cqw,30px);line-height:1.2;color:var(--navy)}
.vr-d{white-space:nowrap}
.vr-st{display:inline-flex;align-items:center;gap:6px;padding:4px 14px 4px 10px;border:1.5px solid var(--vr-edge);border-radius:999px;background:var(--vr-fill);color:var(--vr-ink);font-weight:800}
.vr-foot{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px clamp(16px,4cqw,32px) 20px;background:var(--mist);border-top:1px solid var(--line);text-align:center}
.vr-foot p{margin:0;font-size:.9rem;line-height:1.45;color:var(--muted)}
.vr-again{display:inline-flex;align-items:center;justify-content:center;min-height:44px;max-width:100%;padding:8px 22px;text-align:center;border:2px solid var(--navy);border-radius:10px;background:var(--navy);color:#fff;font:700 .95rem/1.2 var(--f-head);text-decoration:none}
.vr-again:hover{background:var(--navy-2);border-color:var(--gold);color:var(--gold-3)}
.vr-again:focus-visible{outline:3px solid var(--navy);outline-offset:3px;box-shadow:0 0 0 3px #fff}
@container (min-width:40em){
  .vr-body.has-seal{grid-template-columns:200px minmax(0,1fr);gap:32px;justify-items:stretch;text-align:left;align-items:start}
  .vr-body.has-seal .vr-seal{width:200px}
  .vr-body.has-seal .vr-main{text-align:left}
  .vr .vr-f-no dd,.vr .vr-no{font-size:clamp(16px,3.6cqw,30px)}
  .vr-body:not(.has-seal) .vr-main{max-width:34em;margin:0 auto}
  .vr-foot{flex-direction:row;justify-content:space-between;text-align:left}
  .vr-again{flex:none;white-space:nowrap}
}
@media (forced-colors:active){
  .vr{border:2px solid CanvasText;box-shadow:none}
  .vr-top,.vr-strip,.vr-foot{border-color:CanvasText}
  .vr-circle,.vr-st,.vr-kind,.vr-again{border:2px solid CanvasText}
  .vr-seal{filter:none}
}
@media print{
  .vr-lookup,.vr-again{display:none}
  .vr{box-shadow:none;background:#fff;border:1px solid #000;break-inside:avoid}
  .vr-seal{filter:none}
  .vr-top,.vr-strip,.vr-foot{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ===== Phones and small tablets (max 768px): touch targets and long words (docs/MOBILE.md) =====
   A finger needs 44px. Where the design is smaller the HIT AREA grows with vertical padding and an equal negative margin: no line moves and nothing looks different
   (on an inline link the padding only widens what a finger can hit). A link inside a sentence or a paragraph of running text is NOT in these lists and is not enlarged;
   a link that stands alone on its line carries the class "solo". */
@media(max-width:768px),(max-height:500px) and (max-width:1000px),(pointer:coarse) and (max-width:1024px){ /* phones, a phone turned sideways, and touch tablets; a mouse on a desktop is not touched */
  /* a long word, address or number wraps inside its box instead of pushing the page sideways (at 200 percent text "Recommendations" is wider than a phone) */
  h1,h2,h3,h4,p,dd,dt,li,label,.badge,a:not(.btn):not(.tel){overflow-wrap:anywhere}
  .badge{white-space:normal;max-width:100%}
  .sc-chip{white-space:normal}
  .sum-row.disc b{white-space:normal}
  .sum-row>*{min-width:0;overflow-wrap:anywhere}
  .check>*{min-width:0}
  .vr-top,.share-block{flex-wrap:wrap}
  /* links that stand alone: a list of links, a link in a table cell or a definition, a link button, a link marked "solo" */
  a.solo,p.muted>a[href="/what-is-ibes"]:only-child,.faq-more a,#related-pages li a,.form-policy a,.tbl td>a:only-child,.tbl th>a:only-child,.kv dd>a:only-child,
  a.link.small,a.rowbtn,button.link,.flex>a.small,.flex>a.link,.svc .t.link{padding-block:13px;margin-block:-13px}
  .form-policy a{min-height:0}
  .toc a{padding-block:8.5px}
  /* the row of a checkbox or radio is the target, the whole row */
  .check,label.ttl{padding-block:10px;margin-block:-10px}
  /* the round share buttons and the pills keep their look; the 44px box around them is the target (the picture is drawn by ::before) */
  .share-ic{position:relative;width:44px;height:44px;margin:-3px;border-color:transparent;background:none;color:var(--navy)}
  .share-ic::before{content:"";position:absolute;inset:3px;border-radius:50%;border:1.5px solid var(--gold);background:#fff;transition:background .15s,border-color .15s}
  .share-ic svg{position:relative}
  .share-ic:hover,.share-ic:focus-visible{background:none;border-color:transparent;color:var(--gold-2)}
  .share-ic:hover::before,.share-ic:focus-visible::before{background:var(--navy);border-color:var(--navy)}
  .ebadge,.ebadge-note summary{position:relative;isolation:isolate;min-height:44px;margin-block:-6px;border-color:transparent;background:none}
  .ebadge::before,.ebadge-note summary::before{content:"";position:absolute;inset:6px 0;z-index:-1;border:1px solid var(--gold);border-radius:99px;background:#fff}
  .ebadge-note[open] summary::before{background:var(--gold)}
  .ebadge-note[open] summary{background:none}
  .side-brand .brand-lockup{padding-block:3px;margin-block:-3px}
  .ov-period a{min-height:44px}
  .tbl-wrap{position:relative} /* the hidden (sr-only) text inside a wide table's cells is clipped by the scrolling box instead of stretching the whole page sideways */
  .avatar{font-size:min(.9rem,14.4px)}.avatar.md{font-size:min(.85rem,13.6px)} /* the initials stay inside the circle when the text is enlarged to 200 percent (same size as before at the normal size) */
}
@media(max-width:900px){.path,.two,.split{grid-template-columns:minmax(0,1fr)}} /* .split is 12 columns with a gap: at 320px the eleven gaps alone were wider than the Snapshot result sheet and cut its content off (every child already spans all columns here) */
@media(max-width:720px){.row2,.opts{grid-template-columns:minmax(0,1fr)}.bar-row{grid-template-columns:minmax(0,1fr) 44px}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

/* ===== Registry on a phone, and the caption of every stacked table (docs/MOBILE.md, 16 Oct 2026) =====
   THE CAUSE: at 720px and below style.css makes the <table> itself display:block (so its rows can become cards), but the <caption> kept display:table-caption. A table-caption whose parent
   is not a table box is wrapped in an ANONYMOUS table, and that table shrinks to fit: the caption was 144px wide inside a 348px card and wrapped at one word per line (371px high on the
   Registry; the same on /tble, the BrandMark tiers of /pathway and the fee tables of /pay). A block caption spans its table. No markup, no word, no script and no data changes. */
@media(max-width:720px){
  .tbl.stack caption{display:block;width:100%;box-sizing:border-box;font-size:.9rem;font-weight:600;line-height:1.4;color:var(--navy);text-align:left}
  /* Registry: the search and the two filters use the full width of the page */
  .row2.reg-filter{grid-template-columns:minmax(0,1fr)}
  /* Registry: each company is a compact card (name and seal on one line, country and industry side by side, the status pill under them); the cells keep their order, text, labels and attributes,
     only their place in the card changes. The table is not one big boxed card any more: the cards have 12px between them. */
  #regBox .tbl-wrap{border:0;background:transparent}
  #regBox .tbl.stack caption{padding:0 0 12px}
  #regBox .tbl.stack tbody{container:regcard/inline-size} /* the container of the query below (a query restyles the DESCENDANTS of its container: the rows) */
  #regBox .tbl.stack tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 48px;column-gap:12px;row-gap:8px;align-items:start;box-sizing:border-box;margin:0 0 12px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r2);background:#fff}
  #regBox .tbl.stack tbody tr:last-child{margin-bottom:0}
  #regBox .tbl.stack td{padding:0;min-width:0;font-size:.9375rem;line-height:1.35}
  #regBox .tbl.stack td::before{margin-bottom:2px;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--muted)}
  #regBox .tbl.stack tbody th[scope="row"]{grid-column:1 / 3;grid-row:1;align-self:center;min-width:0;padding:0;font-size:1.0625rem;line-height:1.3;color:var(--navy);overflow-wrap:anywhere}
  #regBox .tbl.stack td.mk-cell{grid-column:3;grid-row:1;align-self:center;justify-self:end}
  #regBox .tbl.stack td.mk-cell::before{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* the "Mark" label stays for a screen reader, it is not drawn */
  #regBox .tbl.stack td[data-l="Country"]{grid-column:1;grid-row:2}
  #regBox .tbl.stack td[data-l="Industry"]{grid-column:2 / 4;grid-row:2}
  #regBox .tbl.stack td[data-l="Status"]{grid-column:1 / 4;grid-row:3}
  #regBox img.mk{width:48px;height:48px;margin:0}
  #regBox .tbl.stack .badge{padding:5px 14px;font-size:.8125rem}
  /* a large text size (or a very narrow list): country and industry stack, the name keeps its line with the seal (13em of the text size in use: about 208px at the normal size, 416px at 200 percent) */
  @container regcard (max-width:13em){
    #regBox .tbl.stack tbody tr{grid-template-columns:minmax(0,1fr) 48px}
    #regBox .tbl.stack tbody th[scope="row"]{grid-column:1}
    #regBox .tbl.stack td.mk-cell{grid-column:2}
    #regBox .tbl.stack td[data-l="Country"]{grid-column:1 / 3;grid-row:2}
    #regBox .tbl.stack td[data-l="Industry"]{grid-column:1 / 3;grid-row:3}
    #regBox .tbl.stack td[data-l="Status"]{grid-column:1 / 3;grid-row:4}
  }
}

/* Registry, 721 to 1099px: the table stays a table. At a very large text size (about 200 percent) its five columns were wider than the box and the table scrolled inside it; the cell padding and the seal
   get smaller ONLY when the box is narrower than 34rem (34 times the text size in use: 544px at the normal size, where the table is never that narrow from 721px up, so nothing changes), which keeps the table inside its box. */
@media(min-width:721px) and (max-width:1099px){
  #regBox .tbl-wrap{container:regwrap/inline-size}
  @container regwrap (max-width:34rem){
    #regBox .tbl th,#regBox .tbl td,#regBox .tbl tbody th[scope="row"]{padding-left:12px;padding-right:12px}
    #regBox img.mk{width:48px;height:48px}
    #regBox .tbl td,#regBox .tbl tbody th[scope="row"]{overflow-wrap:anywhere} /* a very long word wraps inside its cell instead of widening the table */
    #regBox .tbl .badge{white-space:normal;max-width:100%} /* the pill may wrap too (above 768px it could not, and "Brand Aspirant" alone was 242px wide at 200 percent) */
  }
}

/* ===== Super Admin screens, building blocks (docs/ADMIN_UI.md, 16 Oct 2026; values of the approved mockup, SPEC.md) =====
   Everything here is scoped to the wrapper class .adm, so a screen opts in by wrapping its content in <div class="adm"> and a screen that has not been moved over (phase 2) is untouched.
   Blocks: page header, KPI cards (.kpis .kpi), toolbar (.searchrow with .chips .chip, a search form, an empty .adm-slot for the Export CSV button of the next job), the table card (.tbl-wrap.adm-card
   with table.adm-table), pills (.adm-pill-gold, -blue, -grey, -green, -red, -outline), the usage meter (progress.adm-meter), buttons, form fields, the disclosure (details.adm-more).
   Three layouts of a table: 1100px and wider a real table with a navy header row; 760 to 1099px compact rows (the primary cells on line 1, the secondary ones on line 2); under 760px one card per row.
   Below 1100px the <table> is display:block; its <caption> is made a block too, or it would shrink to fit its text (docs/MOBILE.md, the Registry caption). */
.adm{--a-navy:#061a31;--a-navy2:#14304f;--a-gold:#b8953f;--a-bg:#f3f5f9;--a-line:#dde2ea;--a-line2:#e8ebf0;--a-input:#c9d0dc;--a-text:#0b1c33;--a-text2:#26354d;--a-muted:#546074;
  display:flex;flex-direction:column;gap:20px;min-width:0;color:var(--a-text);font-size:0.9375rem;line-height:1.375rem}
.main:has(>.adm){background:var(--a-bg,#f3f5f9)}
@media(min-width:1101px){.main:has(>.adm){padding:32px 36px}}
@media(min-width:761px) and (max-width:1100px){.main:has(>.adm){padding:32px 56px 32px 24px}}
@media(min-width:641px) and (max-width:760px){.main:has(>.adm){padding:16px 56px 16px 16px}}
@media(max-width:640px){.main:has(>.adm){padding:16px}}
.adm>*{margin-top:0;margin-bottom:0}
/* page header */
.adm .pagehead{margin:0;gap:16px}
.adm .pagehead h1{font-family:var(--f-head);font-size:1.75rem;line-height:2.125rem;font-weight:800;letter-spacing:-.01em;color:var(--a-text)}
.adm .pagehead p{max-width:700px;margin:6px 0 0;font-size:0.9375rem;line-height:1.375rem;color:var(--a-muted)}
@media(max-width:760px){.adm .pagehead h1{font-size:1.5rem;line-height:1.875rem}}
/* notes and panels keep their meaning; they take the page's card look */
.adm .note{margin:0}
.adm .panel{background:#fff;border:1px solid var(--a-line);border-radius:14px;padding:24px}
.adm .panel.gold{border-top:3px solid var(--a-gold)}
.adm .panel.soft{background:#fff;border-color:var(--a-line)}
.adm .panel h2,.adm .panel h3{font-family:var(--f-head);letter-spacing:0}
.adm .panel h2{font-size:1.125rem;line-height:1.5rem;font-weight:700}
@media(max-width:760px){.adm .panel{padding:16px}}
/* KPI cards */
.adm .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0}
.adm .kpi{background:#fff;border:1px solid var(--a-line);border-top:3px solid var(--a-gold);border-radius:14px;padding:16px 20px;min-width:0;overflow-wrap:anywhere}
.adm .kpi span{display:block;font-size:0.8125rem;line-height:1.125rem;font-weight:500;color:var(--a-muted)}
.adm .kpi b{display:block;margin-top:0;font-family:var(--f-head);font-size:1.875rem;line-height:2.25rem;font-weight:800;color:var(--a-text)}
@media(max-width:1099px){.adm .kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr))}}
@media(max-width:760px){.adm .kpis{gap:12px}.adm .kpi{padding:8px 12px}.adm .kpi b{font-size:1.375rem;line-height:1.625rem}}
/* toolbar: chips, search, the slot for the Export CSV button of the next job */
.adm .searchrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:16px;margin:0}
.adm .chips{display:flex;flex:1 1 360px;flex-wrap:wrap;gap:8px;min-width:0}
.adm .chip{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border:1px solid var(--a-line);border-radius:999px;background:#fff;color:var(--a-text);font:700 0.875rem/1.2 var(--f-body);text-decoration:none;white-space:nowrap}
.adm a.chip[aria-pressed="true"],.adm a.chip[aria-current="true"]{background:var(--a-navy);border-color:var(--a-navy);color:#fff}
.adm .chip:hover{border-color:var(--a-input)}
.adm .searchrow form{flex:0 1 260px;min-width:0}
.adm .searchrow .inp{max-width:none}
.adm .adm-slot{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.adm .adm-slot:empty{display:none}
@media(max-width:760px){
  .adm .chips{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px} /* the chips scroll inside their own row, the page never does */
  .adm .chip{min-height:44px;flex:0 0 auto}
  .adm .searchrow form{flex:1 1 0;min-width:0}
}
/* inputs, buttons, fields */
.adm .inp,.adm select.inp,.adm textarea.inp{min-height:44px;padding:10px 14px;border:1px solid var(--a-input);border-radius:10px;background:#fff;color:var(--a-text);font:400 0.9375rem/1.375rem var(--f-body)}
.adm textarea.inp{min-height:96px}
.adm .searchrow .inp{min-height:40px;padding:0 14px}
@media(max-width:760px){.adm .inp,.adm select.inp,.adm textarea.inp{font-size:1rem}.adm .searchrow .inp{min-height:44px}}
.adm .field label{display:block;margin-bottom:6px;font-size:0.8125rem;line-height:1.125rem;font-weight:700;color:var(--a-text2)}
.adm .field .small,.adm .muted{color:var(--a-muted)}
.adm .btn{min-height:40px;padding:0 16px;border:1px solid var(--a-input);border-radius:10px;background:#fff;color:var(--a-text);font:700 0.875rem/1.2 var(--f-body);letter-spacing:0}
.adm .btn:hover{background:#f3f5f9;border-color:var(--a-input);color:var(--a-text)}
.adm .btn.navy{background:var(--a-navy);border-color:var(--a-navy);color:#fff}
.adm .btn.navy:hover{background:var(--a-navy2);border-color:var(--a-navy2);color:#fff}
.adm .btn.adm-gold{background:var(--a-gold);border-color:var(--a-gold);color:var(--a-navy);min-height:44px;padding:0 24px;font-size:0.9375rem}
.adm .btn.adm-gold:hover{background:#c7a24d;border-color:#c7a24d;color:var(--a-navy)}
.adm .btn.sm{min-height:40px;padding:0 14px;font-size:0.875rem}
@media(max-width:760px){.adm .btn,.adm .btn.sm{min-height:44px;font-size:0.9375rem}}
.adm :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--a-gold);outline-offset:2px}
/* pills: words, never colour alone; every pair is at least 4.5:1 */
.adm .adm-pill{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border:0;border-radius:999px;font:700 0.7812rem/1.125rem var(--f-body);letter-spacing:0;white-space:nowrap;background:#e8ebf0;color:#3b4558}
.adm .adm-pill-gold{background:#f1e6c4;color:#5a4210}
.adm .adm-pill-blue{background:#dce8f8;color:#1b3f73}
.adm .adm-pill-grey{background:#e8ebf0;color:#3b4558}
.adm .adm-pill-green{background:#dcefe3;color:#1f5a37}
.adm .adm-pill-red{background:#f8dedd;color:#8a1f1c}
.adm .adm-pill-outline{background:#fff;border:1px solid var(--a-input);color:#3b4558}
.adm .adm-pill.sm{min-height:22px;padding:0 8px;font-size:0.75rem}
/* usage meter (a <progress>, so no inline style is needed): gold, navy when full */
.adm progress.adm-meter{display:block;width:100%;height:8px;border:0;border-radius:4px;background:#e8ebf0;overflow:hidden;-webkit-appearance:none;appearance:none}
.adm progress.adm-meter::-webkit-progress-bar{background:#e8ebf0;border-radius:4px}
.adm progress.adm-meter::-webkit-progress-value{background:var(--a-gold);border-radius:4px}
.adm progress.adm-meter::-moz-progress-bar{background:var(--a-gold);border-radius:4px}
.adm progress.adm-meter.full::-webkit-progress-value{background:var(--a-navy)}
.adm progress.adm-meter.full::-moz-progress-bar{background:var(--a-navy)}
.adm progress.adm-meter.thin{height:6px}
/* the table card and the table: the real table at 1100px and wider */
.adm .tbl-wrap.adm-card{background:#fff;border:1px solid var(--a-line);border-radius:14px;overflow:hidden}
.adm .adm-table{width:100%;border-collapse:collapse;font-size:0.875rem;line-height:1.25rem;table-layout:fixed}
.adm .adm-table caption{display:block;width:100%;box-sizing:border-box;padding:14px 24px;font-size:0.8125rem;line-height:1.1875rem;font-weight:500;color:var(--a-muted);text-align:left}
.adm .adm-table th{height:48px;padding:0 16px;background:var(--a-navy);color:#fff;font:700 0.7812rem/1.125rem var(--f-body);letter-spacing:.06em;text-transform:uppercase;text-align:left;white-space:normal;overflow-wrap:anywhere}
.adm .adm-table th:first-child,.adm .adm-table td:first-child{padding-left:24px}
.adm .adm-table th:last-child,.adm .adm-table td:last-child{padding-right:24px}
.adm .adm-table td{padding:16px;border-top:1px solid var(--a-line2);vertical-align:middle;overflow-wrap:anywhere;min-width:0}
.adm .adm-table tbody tr:nth-child(even){background:transparent}
.adm .adm-table tbody tr.pick{background:#fbf6e8}
.adm .adm-table td b{font-weight:700}
.adm .adm-table .adm-id{display:block;min-width:0}
.adm .adm-table .adm-id b{display:block;font-size:0.9375rem;line-height:1.25rem}
.adm .adm-table .adm-id span{display:block;color:var(--a-text2)}
.adm .adm-table .adm-line{display:block;color:var(--a-muted);font-size:0.8125rem;line-height:1.25rem;overflow-wrap:anywhere}
.adm .adm-table .adm-sub{display:block;color:var(--a-muted);font-size:0.8125rem;line-height:1.125rem}
/* the small link-button of a row (an "Open" link): a button with a visible edge */
.adm .adm-table a.rowbtn,.adm .adm-open{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border:1px solid var(--a-input);border-radius:10px;background:#fff;color:var(--a-text);font:700 0.875rem/1.2 var(--f-body);text-decoration:none}
.adm .adm-table a.rowbtn:hover{background:#f3f5f9}
/* the disclosure for the rarer controls of a row ("More"): real <details>, no script */
.adm details.adm-more{margin:0}
.adm details.adm-more>summary{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--a-input);border-radius:10px;background:#fff;font:700 0.875rem/1.2 var(--f-body);cursor:pointer;list-style:none}
.adm details.adm-more>summary::-webkit-details-marker{display:none}
.adm details.adm-more[open]>summary{background:#f3f5f9}
.adm details.adm-more .adm-more-body{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.adm details.adm-more form{margin:0}
.adm details.adm-more .btn{white-space:normal}
/* below 1100px a table is compact rows; below 760px cards. The table, its body and its caption are blocks; the header row stays for a screen reader but is not drawn. */
@media(max-width:1099px){
  .adm .adm-table,.adm .adm-table tbody{display:block}
  .adm .adm-table caption{padding:12px 20px}
  .adm .adm-table thead{display:none} /* as the older stacked tables: every cell carries its own label (data-l) in the card */
  .adm .adm-table tbody tr{display:grid;align-items:center;column-gap:16px;row-gap:6px;padding:16px 20px;border-top:1px solid var(--a-line2)}
  .adm .adm-table tbody tr:first-child{border-top:0}
  .adm .adm-table td,.adm .adm-table td:first-child,.adm .adm-table td:last-child{display:block;padding:0;border:0;width:auto}
  .adm .adm-table td.adm-labeled::before{content:attr(data-l);display:block;font-size:0.7812rem;line-height:1.125rem;font-weight:600;color:var(--a-muted)}
}
@media(max-width:759px){
  .adm .adm-table tbody tr{padding:16px;row-gap:8px}
  .adm .adm-table caption{padding:12px 16px}
  .adm .adm-table a.rowbtn,.adm .adm-open,.adm details.adm-more>summary{min-height:44px}
}

/* ===== Super Admin screens: Snapshot results (the table of /admin/snapshots; docs/ADMIN_UI.md) ===== */
.adm .adm-snap th:nth-child(1){width:128px}
.adm .adm-snap th:nth-child(3){width:230px}
.adm .adm-snap th:nth-child(4){width:150px}
.adm .adm-snap th:nth-child(5){width:7rem}
.adm .adm-snap .adm-when{color:var(--a-text2);font-size:0.875rem}
.adm .adm-snap .adm-line{display:flex;flex-wrap:wrap;column-gap:12px}
.adm .adm-snap .adm-score b{font-family:var(--f-head);font-size:1.125rem;line-height:1.5rem;font-weight:800;margin-right:6px}
.adm .adm-snap .adm-score progress{margin-top:6px;max-width:160px}
.adm .adm-snap .adm-act{text-align:left}
@media(max-width:1099px){
  .adm .adm-snap tbody tr{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;grid-template-areas:"who who act" "when score fu"}
  .adm .adm-snap .adm-who{grid-area:who}.adm .adm-snap .adm-act{grid-area:act}
  .adm .adm-snap .adm-when{grid-area:when}.adm .adm-snap .adm-score{grid-area:score}.adm .adm-snap .adm-fu{grid-area:fu}
}
@media(max-width:759px){
  .adm .adm-snap tbody tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who act" "score score" "when fu"}
  .adm .adm-snap .adm-fu{justify-self:end}
}

/* ===== Super Admin screens: Members (the table of /admin/members) ===== */
.adm .adm-mem th:nth-child(3){width:128px}
.adm .adm-mem th:nth-child(4){width:124px}
.adm .adm-mem th:nth-child(5){width:148px}
.adm .adm-mem th:nth-child(6){width:7rem}
.adm .adm-mem .adm-mail{color:var(--a-muted);font-size:0.8125rem;line-height:1.25rem}
.adm .adm-mem .adm-brand{color:var(--a-text2)}
.adm .adm-mem .adm-brand .adm-pill{margin-left:6px}
.adm .adm-mem .adm-joined,.adm .adm-mem .adm-seen{color:var(--a-text2);font-size:0.875rem}
@media(max-width:1099px){
  .adm .adm-mem tbody tr{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto auto;grid-template-areas:"who who st act" "brand joined seen seen"}
  .adm .adm-mem .adm-who{grid-area:who}.adm .adm-mem .adm-st{grid-area:st}.adm .adm-mem .adm-act{grid-area:act}
  .adm .adm-mem .adm-brand{grid-area:brand}.adm .adm-mem .adm-joined{grid-area:joined}.adm .adm-mem .adm-seen{grid-area:seen}
}
@media(max-width:759px){
  .adm .adm-mem tbody tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"who who st" "brand brand brand" "joined seen seen" "act act act"}
  .adm .adm-mem .adm-st{justify-self:end;align-self:start}
  .adm .adm-mem .adm-act{margin-top:4px}
}

/* ===== Super Admin screens: Email log (the table of /admin/emails) ===== */
.adm .adm-mail th:nth-child(1){width:168px}
.adm .adm-mail th:nth-child(2){width:22%}
.adm .adm-mail th:nth-child(4){width:200px}
.adm .adm-mail th:nth-child(5){width:190px}
.adm .adm-mail .adm-when{color:var(--a-text2);font-size:0.875rem}
.adm .adm-mail .adm-subj{font-weight:600}
.adm .adm-mail .adm-type .adm-pill{white-space:normal;text-align:left;padding-top:3px;padding-bottom:3px;min-height:28px}
.adm .adm-mail .adm-st .adm-sub{margin-top:6px;font-weight:400}
.adm>.small{margin:0}
@media(max-width:1099px){
  .adm .adm-mail tbody tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"subj subj st" "to type when"}
  .adm .adm-mail .adm-subj{grid-area:subj}.adm .adm-mail .adm-st{grid-area:st;align-self:start}.adm .adm-mail .adm-to{grid-area:to}.adm .adm-mail .adm-type{grid-area:type}.adm .adm-mail .adm-when{grid-area:when}
  .adm .adm-mail .adm-to,.adm .adm-mail .adm-when{color:var(--a-muted);font-size:0.8125rem;line-height:1.25rem}
}
@media(max-width:759px){
  .adm .adm-mail tbody tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"subj st" "to to" "type when"}
  .adm .adm-mail .adm-when{justify-self:end;text-align:right}
}

/* ===== Super Admin screens: Invitations (list, create form, one invitation, the links page) ===== */
.adm .adm-table caption.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* a screen-reader-only caption stays out of the layout */
@media(max-width:1099px){.adm .adm-table caption.sr-only{display:none}} /* below 1100px the table is a block and has no table semantics, so there is nothing to caption */
.adm .adm-acts{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.adm .adm-inv .adm-main,.adm .adm-table td.adm-main{display:flex;align-items:flex-start;gap:14px}
.adm .adm-inv .adm-ico{display:inline-flex;flex:0 0 44px;width:44px;height:44px;align-items:center;justify-content:center;border-radius:10px;background:#f1e6c4;color:#5a4210}
.adm .adm-inv .adm-id b{font-size:1rem;line-height:1.375rem}
.adm .adm-inv .adm-line{display:block;font-size:0.8125rem;line-height:1.25rem;color:var(--a-muted)}
.adm .adm-table.adm-inv .adm-id .adm-line>span{display:inline}
.adm .adm-inv .adm-line>span+span::before{content:"\00b7";margin:0 6px}
.adm .adm-inv .adm-line[data-l="Reason"]{color:var(--a-text2)}
.adm .adm-inv .adm-line[data-l="Used by"]{color:var(--a-text2)}
.adm .adm-inv .adm-uses b{display:block;font-size:0.875rem;line-height:1.25rem}
.adm .adm-inv .adm-uses progress{margin-top:6px}
.adm .adm-inv .adm-exp{color:var(--a-text2);font-size:0.875rem}
.adm .adm-inv th:nth-child(2){width:176px}
.adm .adm-inv th:nth-child(3){width:120px}
.adm .adm-inv th:nth-child(4){width:150px}
.adm .adm-inv th:nth-child(5){width:208px}
.adm .adm-inv .adm-st .adm-pill svg{flex:0 0 auto}
.adm-invites .kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.adm details.adm-more{flex:1 1 auto}
.adm .adm-inv details.adm-more[open]{flex:1 1 100%}
.adm .adm-inv details.adm-more .adm-more-body{display:flex;flex-direction:column;align-items:stretch}
.adm .adm-inv details.adm-more .adm-more-body .btn{width:100%}
/* the create form: gold top border, three fields a row, behind a gold button (a checkbox) on phones */
.adm .adm-toggle-in{display:none}
.adm .adm-toggle{display:none}
.adm:has(.adm-toggle-in:focus-visible) .adm-toggle{outline:3px solid var(--a-gold);outline-offset:2px}
#new.panel{margin:0}
.adm .field label.check,.adm label.check{margin:0;font-size:0.9375rem;line-height:1.375rem;font-weight:400;color:var(--a-text)}
.adm-invites #inviteSend,.adm-invites #bulkSend{background:var(--a-gold);border-color:var(--a-gold);color:var(--a-navy);min-height:44px;padding:0 24px;font-size:0.9375rem}
.adm-invites #inviteSend:hover,.adm-invites #bulkSend:hover{background:#c7a24d;border-color:#c7a24d}
.adm-invites .row2{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px}
.adm-invites .panel .field{margin-bottom:16px}
.adm-invites .panel .field .small{margin:6px 0 0}
.adm-invites .check{min-height:44px;align-items:center}
.adm-invites #bk1,.adm-invites #iv6{min-height:112px}
@media(max-width:1099px){.adm-invites .row2{grid-template-columns:repeat(2,minmax(0,1fr))}.adm-invites .kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr))}}
@media(max-width:759px){
  .adm .adm-toggle-in{display:block;position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
  .adm .adm-toggle{display:flex;width:100%;min-height:44px}
  .adm-invites #new{display:none}
  .adm-invites .adm-toggle-in:checked~#new,.adm-invites #new:target{display:block}
  .adm-invites .row2{grid-template-columns:minmax(0,1fr)}
  .adm .adm-inv tbody tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main main" "uses st" "exp exp" "act act"}
  .adm .adm-inv .adm-main{grid-area:main}.adm .adm-inv .adm-uses{grid-area:uses}.adm .adm-inv .adm-st{grid-area:st;align-self:start}.adm .adm-inv .adm-exp{grid-area:exp}.adm .adm-inv .adm-act{grid-area:act}
}
@media(min-width:760px) and (max-width:1099px){
  .adm .adm-inv tbody tr{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;grid-template-areas:"main main st" "uses exp act"}
  .adm .adm-inv .adm-main{grid-area:main}.adm .adm-inv .adm-uses{grid-area:uses}.adm .adm-inv .adm-st{grid-area:st;align-self:start}.adm .adm-inv .adm-exp{grid-area:exp}.adm .adm-inv .adm-act{grid-area:act}
}
/* one invitation, the claimants, the links page */
.adm .kv{margin:0}
.adm .adm-claim th:nth-child(5){width:150px}
.adm .adm-claim .adm-when,.adm .adm-claim .adm-ver{color:var(--a-text2);font-size:0.875rem}
@media(max-width:1099px){
  .adm .adm-claim tbody tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"co co act" "em em em" "when ver ver"}
  .adm .adm-claim .adm-co{grid-area:co;font-weight:700}.adm .adm-claim .adm-em{grid-area:em}.adm .adm-claim .adm-when{grid-area:when}.adm .adm-claim .adm-ver{grid-area:ver}.adm .adm-claim .adm-act{grid-area:act}
}
.adm .panel .flex>form,.adm .panel .flex>.btn{margin:0}
.adm .btn{white-space:normal;height:auto;line-height:1.25;padding-top:8px;padding-bottom:8px;text-align:center}
.adm-created .flex{align-items:stretch}
.adm-created .flex .inp[readonly]{flex:1 1 14rem;min-width:0;width:auto}
@media(max-width:759px){.adm .panel .flex>form,.adm .panel .flex>form .btn{width:100%}}
.adm a.link.solo{display:inline-flex;align-items:center;min-height:32px} /* a lone link is a 24px target with room around it (WCAG 2.2 target size) */
.adm .panel>h2.u0423b2{margin-top:28px}
.adm .panel>.kv+h2.u0423b2{margin-top:28px}
.adm .panel>form,.adm .panel>.flex,.adm .panel>p{margin-top:16px}
.adm .panel>.flex{gap:12px}
.adm .panel>.flex>form{margin:0}
/* touch sizes follow the site's phone rule (docs/MOBILE.md: 768px and below, a phone turned sideways, touch tablets), the card layout starts at 759px */
@media(max-width:768px),(max-height:500px) and (max-width:1000px),(pointer:coarse) and (max-width:1024px){
  .adm .chip,.adm .searchrow .inp{min-height:44px}
  .adm .inp,.adm select.inp,.adm textarea.inp{font-size:1rem}
  .adm .btn,.adm .btn.sm{min-height:44px;font-size:0.9375rem}
  .adm .adm-table a.rowbtn,.adm .adm-open,.adm details.adm-more>summary,.adm a.link.solo{min-height:44px}
}
.adm .adm-table .adm-line .small,.adm .adm-table .adm-sub.small{font-size:inherit}
@media(max-width:480px){.adm .adm-mail tbody tr{grid-template-areas:"subj st" "to to" "type type" "when when"}.adm .adm-mail .adm-when{justify-self:start;text-align:left}}

/* ===== CSV exports of the Super Admin screens: the dialog, the page and the form they share (docs/EXPORTS.md; values of the approved mockup, SPEC.md section 7) ===== */
.adm .adm-slot .btn{white-space:nowrap}
.adm .adm-slot .btn svg{flex:0 0 auto}
.adm dialog.xd{width:min(92vw,37.5rem);max-height:92vh;padding:0;border:0;border-radius:18px;background:#fff;color:var(--a-text);overflow:auto;box-shadow:0 18px 48px rgba(6,26,49,.28)}
.adm dialog.xd::backdrop{background:rgba(6,26,49,.62)}
.adm .xd-card{padding:28px}
.adm .xd-card h2{font-family:var(--f-head);font-size:1.5rem;line-height:1.25;font-weight:800;margin:0 0 6px}
.adm .xd-intro{margin:0 0 18px;color:var(--a-muted);font-size:.9375rem;line-height:1.5}
.adm .xf{display:flex;flex-direction:column;gap:18px;margin:0}
.adm .xf-pills{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0;padding:0;list-style:none}
.adm .xf-pills .adm-pill{white-space:normal}
.adm .xf-cols{margin:0;padding:0;border:0;min-width:0}
.adm .xf-cols legend{padding:0;margin-bottom:4px;font-size:.8125rem;line-height:1.4;font-weight:700;color:var(--a-text2);text-transform:uppercase;letter-spacing:.06em}
.adm .xf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.adm .xf-grid .check{min-height:44px;align-items:center}
.adm .xf-warn{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid #e2d29a;border-radius:12px;background:#f6efd6;color:#4a3710}
.adm .xf-warn svg{flex:0 0 auto;margin-top:2px;color:#5a4210}
.adm .xf-warn p{margin:0;font-size:.875rem;line-height:1.5}
.adm .xf-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px}
.adm .xf-actions .btn{min-height:44px;font-size:.9375rem}
.adm .xp.panel{max-width:44rem}
@media(max-width:759px){
  .adm .xd-card{padding:18px}
  .adm .xf-grid{grid-template-columns:minmax(0,1fr)}
  .adm .xf-actions .btn{flex:1 1 9rem}
}
.adm .adm-dates{flex:0 1 auto}
/* the number inside a filter chip (docs/ADMIN_UI.md) */
.adm .chip-n{margin-left:6px;font-weight:500}