/* Governance Register - W3.6 mainstream design system. Loaded only when W3_6_MAINSTREAM_UX_ENABLED=1, AFTER the legacy sheets and the inline layout styles, on . Every component is prefixed ux-. Base element rules are wrapped in :where() so they never outrank a legacy class rule on the pages W3.6 does not redesign. Documented in W3_6_DESIGN_SYSTEM.md. Hyphens only in comments (house style). */ :root{ --ux-paper:#FBFAF7; --ux-surface:#FFFFFF; --ux-sunk:#F2F0EB; --ux-ink:#14161A; --ux-ink-2:#3B4048; --ux-muted:#595E67; --ux-rule:#E2DFD7; --ux-rule-2:#C9C5BB; --ux-brand:#D2261A; --ux-brand-ink:#A51D13; --ux-brand-tint:#FBECE9; --ux-focus:#1B55D0; --ux-ok:#0E5A38; --ux-ok-bg:#E4F1E9; --ux-info:#1B4C77; --ux-info-bg:#E5EDF6; --ux-own:#58298A; --ux-own-bg:#EFE7F7; --ux-calc:#664710; --ux-calc-bg:#F5EEDB; --ux-warn:#6F4E00; --ux-warn-bg:#FAF0D3; --ux-danger:#9A1B12; --ux-danger-bg:#FBE7E5; --ux-r:10px; --ux-r-sm:8px; --ux-r-lg:14px; --ux-shadow:0 1px 2px rgba(20,22,26,.05),0 10px 28px -14px rgba(20,22,26,.16); --ux-shadow-pop:0 20px 44px -18px rgba(20,22,26,.34); --ux-max:1200px; --ux-content:1080px; --ux-read:720px; --ux-form:540px; --ux-gut:20px; --ux-hdr-h:64px; --ux-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,"Helvetica Neue",Arial,sans-serif; } @media (min-width:768px){ :root{ --ux-gut:32px; } } :root[data-theme="dark"]{ --ux-paper:#111214; --ux-surface:#18191C; --ux-sunk:#202125; --ux-ink:#F2F1EE; --ux-ink-2:#D3D2CE; --ux-muted:#A8A7A3; --ux-rule:#2D2E32; --ux-rule-2:#44454B; --ux-brand:#F0473F; --ux-brand-ink:#FF8A80; --ux-brand-tint:#2A1715; --ux-focus:#8AB4FF; --ux-ok:#86D6AA; --ux-ok-bg:#132A1E; --ux-info:#9CC3EC; --ux-info-bg:#15222F; --ux-own:#CDB1EE; --ux-own-bg:#241A31; --ux-calc:#E3C07C; --ux-calc-bg:#2A2314; --ux-warn:#EBC76B; --ux-warn-bg:#2B2410; --ux-danger:#FF9A90; --ux-danger-bg:#301715; --ux-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.6); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ux-paper:#111214; --ux-surface:#18191C; --ux-sunk:#202125; --ux-ink:#F2F1EE; --ux-ink-2:#D3D2CE; --ux-muted:#A8A7A3; --ux-rule:#2D2E32; --ux-rule-2:#44454B; --ux-brand:#F0473F; --ux-brand-ink:#FF8A80; --ux-brand-tint:#2A1715; --ux-focus:#8AB4FF; --ux-ok:#86D6AA; --ux-ok-bg:#132A1E; --ux-info:#9CC3EC; --ux-info-bg:#15222F; --ux-own:#CDB1EE; --ux-own-bg:#241A31; --ux-calc:#E3C07C; --ux-calc-bg:#2A2314; --ux-warn:#EBC76B; --ux-warn-bg:#2B2410; --ux-danger:#FF9A90; --ux-danger-bg:#301715; --ux-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.6); } } /* ------------------------------------------------------------------ base */ body.ux{margin:0;background:var(--ux-paper);color:var(--ux-ink);font-family:var(--ux-font); font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} @media (min-width:768px){ body.ux{font-size:1.0625rem} } :where(body.ux) h1{font-size:clamp(1.85rem,1.3rem + 1.9vw,2.6rem);line-height:1.15;letter-spacing:-.02em;font-weight:750;color:var(--ux-ink);margin:.1em 0 .4em} :where(body.ux) h2{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.3;letter-spacing:-.01em;font-weight:700;color:var(--ux-ink);margin:0 0 .5em} :where(body.ux) h3{font-size:1.08rem;line-height:1.35;font-weight:680;color:var(--ux-ink);margin:0 0 .4em;text-transform:none;letter-spacing:0} :where(body.ux) p{margin:0 0 1em} :where(body.ux) a{color:var(--ux-ink);text-decoration:underline;text-decoration-color:var(--ux-rule-2);text-underline-offset:3px;text-decoration-thickness:1px} :where(body.ux) a:hover{text-decoration-color:var(--ux-brand)} body.ux :focus-visible{outline:3px solid var(--ux-focus);outline-offset:2px;border-radius:4px} body.ux img{max-width:100%;height:auto} .ux-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .ux-skip{position:absolute;left:12px;top:-80px;z-index:200;background:var(--ux-ink);color:var(--ux-paper)!important;padding:12px 16px;border-radius:8px;font-weight:650;text-decoration:none!important} .ux-skip:focus{top:12px} @media (prefers-reduced-motion:reduce){ body.ux *,body.ux *::before,body.ux *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} } /* Legacy pages rendered inside the new shell: a calmer, more readable lift, no restructure. */ body.ux .ux-main:not(.ux-full){max-width:var(--ux-max);margin:0 auto;padding:28px var(--ux-gut) 64px} body.ux .ux-main.ux-full{max-width:none;margin:0;padding:0} body.ux .muted{color:var(--ux-muted)} body.ux .card{background:var(--ux-surface);border:1px solid var(--ux-rule);border-radius:var(--ux-r);box-shadow:none} body.ux .phead h1{font-size:clamp(1.85rem,1.3rem + 1.9vw,2.6rem)} body.ux .list li{font-size:1rem} body.ux .chip{font-size:.8125rem} body.ux .gcap,body.ux .g2-sub,body.ux .g2-net-lab{font-size:.875rem} body.ux .w2page{max-width:var(--ux-content)} body.ux .w2page.narrow{max-width:var(--ux-read)} /* ------------------------------------------------------------------ layout */ .ux-wrap{max-width:var(--ux-max);margin:0 auto;padding-left:var(--ux-gut);padding-right:var(--ux-gut)} .ux-wrap-c{max-width:var(--ux-content);margin:0 auto;padding-left:var(--ux-gut);padding-right:var(--ux-gut)} .ux-page{max-width:var(--ux-max);margin:0 auto;padding:32px var(--ux-gut) 72px} .ux-page-c{max-width:var(--ux-content);margin:0 auto;padding:32px var(--ux-gut) 72px} .ux-page-read{max-width:calc(var(--ux-read) + 2 * var(--ux-gut));margin:0 auto;padding:32px var(--ux-gut) 72px} .ux-page-form{max-width:calc(var(--ux-form) + 2 * var(--ux-gut));margin:0 auto;padding:36px var(--ux-gut) 72px} .ux-read{max-width:var(--ux-read)} .ux-kicker{display:inline-block;font-size:.8125rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ux-brand-ink);margin:0 0 10px} .ux-kicker.muted{color:var(--ux-muted)} .ux-lede{font-size:clamp(1.06rem,1rem + .35vw,1.2rem);line-height:1.55;color:var(--ux-ink-2);max-width:62ch;margin:0 0 20px} .ux-note{font-size:.95rem;color:var(--ux-muted)} .ux-small{font-size:.9rem;color:var(--ux-muted)} .ux-back{display:inline-flex;align-items:center;gap:6px;font-size:.95rem;color:var(--ux-ink-2)!important;text-decoration:none!important;margin:0 0 14px} .ux-back:hover{color:var(--ux-ink)!important;text-decoration:underline!important} .ux-section{padding:56px 0} .ux-section + .ux-section{border-top:1px solid var(--ux-rule)} .ux-section.tint{background:var(--ux-surface);border-top:1px solid var(--ux-rule);border-bottom:1px solid var(--ux-rule)} .ux-section h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);letter-spacing:-.02em;line-height:1.2;margin:0 0 12px;max-width:26ch} .ux-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center} .ux-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .ux-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .ux-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start} @media (max-width:1023px){ .ux-split,.ux-layout{grid-template-columns:minmax(0,1fr);gap:28px} .ux-grid3{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .ux-grid2,.ux-grid3{grid-template-columns:minmax(0,1fr)} .ux-section{padding:40px 0} } .ux-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .ux-stack > * + *{margin-top:12px} .ux-divider{height:1px;background:var(--ux-rule);border:0;margin:28px 0} /* ------------------------------------------------------------------ header */ .ux-hdr{position:sticky;top:0;z-index:40;background:var(--ux-paper);border-bottom:1px solid var(--ux-rule)} @supports (backdrop-filter:blur(2px)){ .ux-hdr{background:color-mix(in srgb,var(--ux-paper) 92%,transparent);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px)} } .ux-hdr-in{max-width:var(--ux-max);margin:0 auto;padding:10px var(--ux-gut);min-height:var(--ux-hdr-h);display:flex;align-items:center;gap:14px;box-sizing:border-box} .ux-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ux-ink)!important;text-decoration:none!important;font-weight:760;font-size:1.06rem;letter-spacing:-.01em;white-space:nowrap;min-height:44px} .ux-disc{width:16px;height:16px;border-radius:50%;background:var(--ux-brand);flex:0 0 auto} .ux-hsearch{position:relative;flex:1 1 300px;max-width:420px;margin:0} .ux-hsearch input{box-sizing:border-box;width:100%;height:44px;padding:0 46px 0 16px;border:1px solid var(--ux-rule-2);border-radius:999px;background:var(--ux-surface);color:var(--ux-ink);font:inherit;font-size:.95rem} .ux-hsearch input::placeholder{color:var(--ux-muted)} .ux-hsearch input:focus{outline:3px solid color-mix(in srgb,var(--ux-focus) 30%,transparent);border-color:var(--ux-focus)} .ux-hsearch > button{position:absolute;right:4px;top:4px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--ux-ink-2);display:grid;place-items:center;cursor:pointer} .ux-nav{display:flex;gap:2px;align-items:center} .ux-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;color:var(--ux-ink-2)!important;text-decoration:none!important;font-weight:620;font-size:.95rem;white-space:nowrap} .ux-nav a:hover,.ux-nav a[aria-current="page"]{color:var(--ux-ink)!important;background:var(--ux-sunk)} .ux-hdr-act{display:flex;gap:8px;align-items:center;margin-left:auto} .ux-iconbtn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:10px;border:0;background:transparent;color:var(--ux-ink)!important;cursor:pointer;text-decoration:none!important} .ux-iconbtn:hover{background:var(--ux-sunk)} .ux-mobonly,.ux-mobmenu{display:none!important} @media (max-width:1100px){ .ux-hsearch{max-width:300px} .ux-nav a{padding:0 9px} } @media (max-width:1023px){ .ux-hdr .ux-nav,.ux-hdr .ux-hsearch{display:none!important} .ux-mobonly{display:inline-grid!important} .ux-mobmenu{display:block!important} .ux-hide-sm{display:none!important} } .ux-menu-panel a.ux-btn-primary{background:var(--ux-ink);color:var(--ux-paper)!important;justify-content:center;margin:2px 0 6px} .ux-menu-panel a.ux-btn-primary:hover{background:var(--ux-ink);opacity:.9} .ux-menu-panel a[aria-current="true"]{font-weight:700;background:var(--ux-sunk)} @media (max-width:420px){ .ux-brand-name{font-size:1rem} } /* menus (details/summary, work without JS; JS adds outside-click + Esc) */ .ux-menu{position:relative} .ux-menu > summary{list-style:none;cursor:pointer} .ux-menu > summary::-webkit-details-marker{display:none} .ux-menu-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:270px;background:var(--ux-surface);border:1px solid var(--ux-rule);border-radius:12px;box-shadow:var(--ux-shadow-pop);padding:8px;z-index:60} .ux-menu-panel a,.ux-menu-panel button{box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border-radius:8px;color:var(--ux-ink)!important;text-decoration:none!important;font:inherit;font-size:.975rem;font-weight:560;background:none;border:0;text-align:left;cursor:pointer} .ux-menu-panel a:hover,.ux-menu-panel button:hover{background:var(--ux-sunk)} .ux-menu-panel form{margin:0} .ux-menu-lab{font-size:.8125rem;font-weight:650;color:var(--ux-muted);padding:8px 12px 2px} .ux-menu-who{padding:10px 12px;border-bottom:1px solid var(--ux-rule);margin:0 0 6px} .ux-menu-who b{display:block} .ux-menu-who span{font-size:.875rem;color:var(--ux-muted);word-break:break-all} .ux-menu-sep{height:1px;background:var(--ux-rule);margin:6px 4px} @media (max-width:767px){ .ux-menu-panel{position:fixed;left:10px;right:10px;top:calc(var(--ux-hdr-h) + 6px);min-width:0;max-height:calc(100vh - var(--ux-hdr-h) - 20px);overflow:auto} } .ux-avatarbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:2px 6px 2px 2px;border-radius:999px;border:1px solid var(--ux-rule);background:var(--ux-surface);cursor:pointer;color:var(--ux-ink)} /* ------------------------------------------------------------------ buttons */ .ux-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--ux-r-sm);border:1.5px solid transparent;font:inherit;font-weight:650;font-size:.975rem;line-height:1.2;text-decoration:none!important;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,opacity .15s} .ux-btn-primary{background:var(--ux-ink);color:var(--ux-paper)!important} .ux-btn-primary:hover{opacity:.88} .ux-btn-secondary{background:var(--ux-surface);color:var(--ux-ink)!important;border-color:var(--ux-rule-2)} .ux-btn-secondary:hover{border-color:var(--ux-ink)} .ux-btn-text{background:none;border-color:transparent;color:var(--ux-ink)!important;padding-left:4px;padding-right:4px;text-decoration:underline!important;text-underline-offset:3px;text-decoration-color:var(--ux-rule-2)!important} .ux-btn-text:hover{text-decoration-color:var(--ux-ink)!important} .ux-btn-danger{background:var(--ux-surface);color:var(--ux-danger)!important;border-color:var(--ux-danger)} .ux-btn-danger:hover{background:var(--ux-danger-bg)} .ux-btn-sm{min-height:38px;padding:6px 13px;font-size:.925rem} .ux-btn-lg{min-height:52px;padding:12px 22px;font-size:1.05rem} .ux-btn-block{width:100%} @media (max-width:767px){ .ux-btn-sm{min-height:44px} .ux-btn-stack-sm{width:100%} } .ux-btn[disabled],.ux-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed} /* ------------------------------------------------------------------ forms */ .ux-form{margin:0} .ux-field{display:flex;flex-direction:column;gap:6px;margin:0 0 18px} .ux-label{font-weight:650;font-size:.975rem;color:var(--ux-ink)} .ux-opt{font-weight:500;color:var(--ux-muted);font-size:.875rem;margin-left:6px} .ux-help{font-size:.925rem;color:var(--ux-muted);margin:0} .ux-input,.ux-select,.ux-textarea{box-sizing:border-box;width:100%;min-height:50px;padding:11px 14px;border:1.5px solid var(--ux-rule-2);border-radius:var(--ux-r-sm);background:var(--ux-surface);color:var(--ux-ink);font:inherit;font-size:1rem} .ux-textarea{min-height:120px;resize:vertical;line-height:1.5} .ux-input:focus,.ux-select:focus,.ux-textarea:focus{outline:3px solid color-mix(in srgb,var(--ux-focus) 30%,transparent);outline-offset:0;border-color:var(--ux-focus)} .ux-input-code{font-size:1.5rem;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums;max-width:240px} .ux-field.is-error .ux-input,.ux-field.is-error .ux-textarea{border-color:var(--ux-danger)} .ux-error{color:var(--ux-danger);font-size:.95rem;font-weight:620;margin:0} .ux-check{display:flex;gap:10px;align-items:flex-start;font-size:.975rem} .ux-check input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--ux-ink)} .ux-alert{display:flex;gap:10px;align-items:flex-start;border-radius:var(--ux-r);padding:14px 16px;margin:0 0 20px;border:1px solid transparent;font-size:.975rem} .ux-alert > svg{flex:0 0 auto;margin-top:2px} .ux-alert p{margin:0} .ux-alert-info{background:var(--ux-info-bg);color:var(--ux-info)} .ux-alert-ok{background:var(--ux-ok-bg);color:var(--ux-ok)} .ux-alert-warn{background:var(--ux-warn-bg);color:var(--ux-warn)} .ux-alert-error{background:var(--ux-danger-bg);color:var(--ux-danger)} .ux-alert a{color:inherit!important} /* ------------------------------------------------------------------ cards, rows, badges */ .ux-card{background:var(--ux-surface);border:1px solid var(--ux-rule);border-radius:var(--ux-r);padding:20px 22px} .ux-card > h2:first-child,.ux-card > h3:first-child{margin-top:0} .ux-card-link{display:flex;flex-direction:column;gap:6px;color:var(--ux-ink)!important;text-decoration:none!important;transition:border-color .15s} .ux-card-link:hover{border-color:var(--ux-ink)} .ux-card-link .ux-card-go{margin-top:auto;font-weight:650;display:inline-flex;gap:6px;align-items:center} .ux-av{box-sizing:border-box;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ux-sunk);color:var(--ux-ink-2);font-weight:720;font-size:.95rem;flex:0 0 auto;border:1px solid var(--ux-rule);letter-spacing:.02em;overflow:hidden} .ux-av-sm{width:32px;height:32px;font-size:.8rem} .ux-av-lg{width:84px;height:84px;font-size:1.6rem} .ux-av-org{border-radius:12px;color:var(--ux-ink-2)} .ux-list{list-style:none;margin:0;padding:0;border:1px solid var(--ux-rule);border-radius:var(--ux-r);background:var(--ux-surface);overflow:hidden} .ux-item{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-top:1px solid var(--ux-rule)} .ux-item:first-child{border-top:0} .ux-item-main{flex:1 1 auto;min-width:0} .ux-item-title{display:block;font-weight:690;font-size:1.05rem;line-height:1.35;color:var(--ux-ink)!important;text-decoration:none!important} a.ux-item-title:hover{text-decoration:underline!important} .ux-item-sub{display:block;color:var(--ux-ink-2);font-size:.975rem;margin-top:2px} .ux-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:48px;align-items:center} @media (max-width:1023px){ .ux-hero-grid{grid-template-columns:minmax(0,1fr);gap:28px} .ux-hero-aside{display:none} } .ux-excard{box-sizing:border-box;background:var(--ux-surface);border:1px solid var(--ux-rule);border-radius:var(--ux-r-lg);padding:20px;box-shadow:var(--ux-shadow)} .ux-excard-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--ux-rule);font-size:.975rem} .ux-excard-row b{font-variant-numeric:tabular-nums} .ux-item-meta{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--ux-muted);font-size:.925rem;margin-top:5px} .ux-item-act{flex:0 0 auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap} @media (max-width:640px){ .ux-item{flex-wrap:wrap} .ux-item-act{width:100%;padding-left:58px} } .ux-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:14px} .ux-pcard{box-sizing:border-box;background:var(--ux-surface);border:1px solid var(--ux-rule);border-radius:var(--ux-r);padding:16px 18px;display:flex;flex-direction:column;gap:10px} .ux-pcard-head{display:flex;gap:12px;align-items:flex-start} .ux-pcard-name{font-weight:700;font-size:1.05rem;line-height:1.3;color:var(--ux-ink)!important;text-decoration:none!important} a.ux-pcard-name:hover{text-decoration:underline!important} .ux-pcard-why{color:var(--ux-ink-2);font-size:.95rem;margin:0} .ux-pcard-foot{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:auto;padding-top:10px;border-top:1px solid var(--ux-rule);font-size:.925rem} .ux-pcard-foot a{font-weight:600} .ux-badge{display:inline-flex;align-items:center;gap:5px;font-size:.8125rem;font-weight:650;line-height:1.25;padding:3px 10px;border-radius:999px;white-space:nowrap;border:1px solid transparent;vertical-align:middle} .ux-b-official{background:var(--ux-ok-bg);color:var(--ux-ok)} .ux-b-own{background:var(--ux-own-bg);color:var(--ux-own)} .ux-b-orgadd{background:var(--ux-info-bg);color:var(--ux-info)} .ux-b-confirmed{background:var(--ux-info-bg);color:var(--ux-info)} .ux-b-calc{background:var(--ux-calc-bg);color:var(--ux-calc)} .ux-b-current{background:transparent;color:var(--ux-ok);border-color:currentColor} .ux-b-hist{background:var(--ux-sunk);color:var(--ux-ink-2)} .ux-b-warn{background:var(--ux-warn-bg);color:var(--ux-warn)} .ux-b-danger{background:var(--ux-danger-bg);color:var(--ux-danger)} .ux-b-neutral{background:var(--ux-sunk);color:var(--ux-ink-2)} .ux-b-fixture{background:transparent;color:var(--ux-warn);border:1px dashed currentColor} /* source label: compact line, expandable detail */ .ux-src{font-size:.9rem;color:var(--ux-muted);margin:6px 0 0} .ux-src > summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;min-height:32px} .ux-src > summary::-webkit-details-marker{display:none} .ux-src > summary:hover{color:var(--ux-ink)} .ux-src-body{margin:6px 0 0;padding:12px 14px;background:var(--ux-sunk);border-radius:8px;color:var(--ux-ink-2);font-size:.925rem} .ux-src-body dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 14px;margin:0} .ux-src-body dt{color:var(--ux-muted)} .ux-src-body dd{margin:0;overflow-wrap:anywhere} /* metrics */ .ux-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px;margin:0 0 20px} .ux-metric{background:var(--ux-surface);border:1px solid var(--ux-rule);border-radius:var(--ux-r);padding:16px 18px} .ux-metric-n{display:block;font-size:1.9rem;font-weight:760;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums} .ux-metric-l{display:block;color:var(--ux-ink-2);font-size:.975rem;margin-top:4px} .ux-metric-note{display:block;color:var(--ux-muted);font-size:.875rem;margin-top:6px} /* tabs / anchor nav / segmented filters */ .ux-tabs{position:sticky;top:var(--ux-hdr-h);z-index:30;background:var(--ux-paper);border-bottom:1px solid var(--ux-rule)} .ux-tabs-in{display:flex;gap:2px;max-width:var(--ux-max);margin:0 auto;padding:0 var(--ux-gut);overflow-x:auto;scrollbar-width:none} .ux-tabs-in::-webkit-scrollbar{display:none} .ux-tabs a{display:inline-flex;align-items:center;min-height:50px;padding:0 12px;color:var(--ux-ink-2)!important;text-decoration:none!important;font-weight:620;border-bottom:3px solid transparent;white-space:nowrap} .ux-tabs a:hover,.ux-tabs a[aria-current="true"],.ux-tabs a[aria-current="page"]{color:var(--ux-ink)!important;border-bottom-color:var(--ux-ink)} .ux-seg{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;padding:0;list-style:none} .ux-seg a{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 15px;border-radius:999px;border:1px solid var(--ux-rule-2);color:var(--ux-ink-2)!important;text-decoration:none!important;font-weight:620;font-size:.95rem;background:var(--ux-surface)} .ux-seg a:hover{border-color:var(--ux-ink)} .ux-seg a[aria-current="true"]{background:var(--ux-ink);border-color:var(--ux-ink);color:var(--ux-paper)!important} .ux-seg .n{font-weight:500;opacity:.8} .ux-sec{margin:0 0 44px;scroll-margin-top:calc(var(--ux-hdr-h) + 64px)} .ux-sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px} .ux-sec-h h2{margin:0} /* empty / error / loading */ .ux-empty{box-sizing:border-box;border:1px dashed var(--ux-rule-2);border-radius:var(--ux-r);padding:26px 24px;background:var(--ux-surface)} .ux-empty > h2,.ux-empty > h3{margin-top:0} .ux-empty ul{margin:8px 0 16px;padding-left:22px} .ux-empty li{margin:4px 0} .ux-state{max-width:640px;margin:0 auto;padding:64px var(--ux-gut) 80px} .ux-state .ux-kicker{color:var(--ux-muted)} .ux-skel{display:block;position:relative;overflow:hidden;background:var(--ux-sunk);border-radius:8px;min-height:14px} .ux-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:ux-shimmer 1.4s infinite} @keyframes ux-shimmer{to{transform:translateX(100%)}} .ux-loading{display:flex;gap:12px;align-items:center;color:var(--ux-ink-2);font-weight:600} .ux-spin{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--ux-rule-2);border-top-color:var(--ux-ink);animation:ux-rot .8s linear infinite} @keyframes ux-rot{to{transform:rotate(360deg)}} /* ------------------------------------------------------------------ search */ .ux-bigsearch{position:relative;max-width:680px;margin:0} .ux-bigsearch input{box-sizing:border-box;width:100%;height:62px;padding:0 128px 0 20px;border:1.5px solid var(--ux-ink);border-radius:14px;background:var(--ux-surface);color:var(--ux-ink);font:inherit;font-size:1.125rem;box-shadow:var(--ux-shadow)} .ux-bigsearch input::placeholder{color:var(--ux-muted)} .ux-bigsearch input:focus{outline:3px solid color-mix(in srgb,var(--ux-focus) 35%,transparent);outline-offset:1px} .ux-bigsearch > button{position:absolute;right:7px;top:7px;height:48px;padding:0 18px;border-radius:10px;border:0;background:var(--ux-ink);color:var(--ux-paper);font:inherit;font-weight:650;display:inline-flex;align-items:center;gap:8px;cursor:pointer} @media (max-width:560px){ .ux-bigsearch input{height:56px;padding-right:62px;font-size:1.0625rem} .ux-bigsearch > button{height:44px;width:44px;padding:0;justify-content:center;top:6px;right:6px} .ux-bigsearch > button span{display:none} } .ux-suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);box-sizing:border-box;background:var(--ux-surface);border:1px solid var(--ux-rule);border-radius:12px;box-shadow:var(--ux-shadow-pop);padding:6px;z-index:70;max-height:min(70vh,540px);overflow:auto;text-align:left;margin:0;list-style:none} .ux-suggest[hidden]{display:none} .ux-sg-group{font-size:.8125rem;font-weight:700;color:var(--ux-muted);text-transform:uppercase;letter-spacing:.05em;padding:10px 10px 4px} .ux-sg-opt{display:flex;gap:12px;align-items:flex-start;padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--ux-ink)} .ux-sg-opt[aria-selected="true"],.ux-sg-opt:hover{background:var(--ux-sunk)} .ux-sg-txt{min-width:0} .ux-sg-name{display:block;font-weight:660;font-size:1rem;line-height:1.3} .ux-sg-ctx{display:block;font-size:.9rem;color:var(--ux-muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis} .ux-sg-kind{margin-left:auto;flex:0 0 auto;font-size:.75rem;font-weight:650;color:var(--ux-ink-2);background:var(--ux-sunk);border-radius:999px;padding:2px 8px;align-self:center} .ux-sg-opt[aria-selected="true"] .ux-sg-kind{background:var(--ux-surface)} .ux-sg-hint,.ux-sg-status{padding:10px;color:var(--ux-muted);font-size:.925rem} .ux-sg-all{border-top:1px solid var(--ux-rule);margin-top:4px;font-weight:650} .ux-results-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 14px} .ux-filters{margin:0 0 18px} .ux-filters > summary{display:inline-flex;align-items:center;gap:8px;min-height:42px;cursor:pointer;font-weight:620;color:var(--ux-ink-2)} .ux-filters-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px;padding:16px;margin-top:8px;border:1px solid var(--ux-rule);border-radius:var(--ux-r);background:var(--ux-surface)} /* ------------------------------------------------------------------ homepage */ .ux-hero{padding:64px 0 48px;background:radial-gradient(900px 380px at 8% -30%,var(--ux-brand-tint),transparent 70%),var(--ux-paper)} .ux-hero h1{font-size:clamp(1.9rem,1.05rem + 4.2vw,3.75rem);line-height:1.05;letter-spacing:-.035em;font-weight:780;max-width:17ch;margin:0 0 18px;overflow-wrap:break-word;hyphens:manual} body.ux h1,body.ux h2{overflow-wrap:break-word} .ux-hero .ux-lede{max-width:56ch;margin-bottom:28px} .ux-hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 20px} .ux-trustline{display:flex;gap:8px;align-items:center;color:var(--ux-ink-2);font-size:.975rem;margin:0} .ux-trustline svg{color:var(--ux-ok);flex:0 0 auto} .ux-tryline{font-size:.95rem;color:var(--ux-muted);margin:12px 0 0} .ux-tryline a{color:var(--ux-ink-2)!important} @media (max-width:640px){ .ux-hero{padding:36px 0 32px} .ux-hero-cta .ux-btn{flex:1 1 100%} } .ux-proof{box-sizing:border-box;background:var(--ux-surface);border:1px solid var(--ux-rule);border-radius:var(--ux-r-lg);padding:22px;box-shadow:var(--ux-shadow)} .ux-proof-steps{list-style:none;margin:0;padding:0;display:grid;gap:0} .ux-proof-steps li{display:flex;gap:14px;align-items:center;padding:12px 0;position:relative} .ux-proof-steps li + li{border-top:1px dashed var(--ux-rule-2)} .ux-proof-n{min-width:3.2ch;font-size:1.75rem;font-weight:780;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ux-brand-ink);text-align:right} .ux-proof-l{font-size:1rem;color:var(--ux-ink-2)} .ux-proof-l b{color:var(--ux-ink)} .ux-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} @media (max-width:767px){ .ux-stats{grid-template-columns:repeat(2,minmax(0,1fr))} } .ux-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px} @media (max-width:900px){ .ux-trio{grid-template-columns:minmax(0,1fr)} } .ux-trio > div{background:var(--ux-surface);border:1px solid var(--ux-rule);border-radius:var(--ux-r);padding:20px} .ux-trio h3{display:flex;gap:8px;align-items:center;margin:8px 0 6px} .ux-chainline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:620} .ux-chainline .ux-node{padding:8px 12px;border-radius:999px;border:1px solid var(--ux-rule-2);background:var(--ux-surface)} .ux-chainline .ux-edge{color:var(--ux-muted);font-weight:500;font-size:.9rem} /* ------------------------------------------------------------------ record pages (person / organisation) */ .ux-rec-hero{background:var(--ux-surface);border-bottom:1px solid var(--ux-rule)} .ux-rec-hero-in{max-width:var(--ux-max);margin:0 auto;padding:30px var(--ux-gut) 26px;display:flex;gap:20px;align-items:flex-start} .ux-rec-hero-main{flex:1 1 auto;min-width:0} .ux-rec-kind{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.925rem;color:var(--ux-muted);font-weight:620;margin:0 0 6px} .ux-rec-title{margin:0 0 6px;font-size:clamp(1.9rem,1.35rem + 2vw,2.75rem);line-height:1.1;letter-spacing:-.025em;overflow-wrap:anywhere} .ux-rec-sub{font-size:clamp(1.02rem,.98rem + .3vw,1.15rem);color:var(--ux-ink-2);margin:0 0 12px;max-width:70ch} .ux-rec-facts{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--ux-ink-2);font-size:.95rem;margin:0 0 16px;padding:0;list-style:none} .ux-rec-facts li{display:inline-flex;gap:6px;align-items:center} .ux-rec-facts svg{color:var(--ux-muted)} .ux-rec-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center} @media (max-width:640px){ .ux-rec-hero-in{flex-direction:column;gap:12px;padding-top:22px} .ux-rec-cta .ux-btn{flex:1 1 auto} } .ux-role-list{list-style:none;margin:0;padding:0} .ux-role{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--ux-rule)} .ux-role:first-child{border-top:0;padding-top:4px} .ux-role-main{flex:1 1 auto;min-width:0} .ux-role-org{font-weight:680;font-size:1.05rem} .ux-role-what{color:var(--ux-ink-2);font-size:.975rem} .ux-role-side{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;gap:6px;align-items:flex-end} @media (max-width:560px){ .ux-role{flex-wrap:wrap} .ux-role-side{flex-direction:row;align-items:center;text-align:left;width:100%} } .ux-aside{display:grid;gap:14px;position:sticky;top:calc(var(--ux-hdr-h) + 66px)} @media (max-width:1023px){ .ux-aside{position:static} } .ux-more{border:1px solid var(--ux-rule);border-radius:var(--ux-r);background:var(--ux-surface);margin:0 0 16px} .ux-more > summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;cursor:pointer;font-weight:680;list-style:none;min-height:24px} .ux-more > summary::-webkit-details-marker{display:none} .ux-more[open] > summary{border-bottom:1px solid var(--ux-rule)} .ux-more-body{padding:16px 18px} .ux-report{font-size:.925rem;color:var(--ux-muted);margin:32px 0 0;padding-top:16px;border-top:1px solid var(--ux-rule)} .ux-legend{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:.9rem;color:var(--ux-muted)} .ux-cta-band{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:20px 22px;border-radius:var(--ux-r);background:var(--ux-surface);border:1px solid var(--ux-rule);border-left:4px solid var(--ux-ink)} .ux-cta-band h2,.ux-cta-band h3{margin:0 0 4px} .ux-cta-band p{margin:0;color:var(--ux-ink-2)} .ux-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 18px;margin:0} .ux-kv dt{color:var(--ux-muted)} .ux-kv dd{margin:0;overflow-wrap:anywhere} @media (max-width:480px){ .ux-kv{grid-template-columns:minmax(0,1fr)} .ux-kv dd{margin-bottom:8px} } .ux-yearlist{list-style:none;margin:0;padding:0;display:grid;gap:0} .ux-yearlist li{display:grid;grid-template-columns:5ch minmax(0,1fr) minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--ux-rule);font-variant-numeric:tabular-nums} .ux-yearlist li:first-child{border-top:0} .ux-yearlist .h{color:var(--ux-muted);font-size:.875rem;font-weight:650} /* ------------------------------------------------------------------ steps / claim / onboarding */ .ux-steps{display:flex;gap:6px 16px;list-style:none;padding:0;margin:0 0 22px;flex-wrap:wrap;counter-reset:uxs} .ux-steps li{display:flex;align-items:center;gap:8px;color:var(--ux-muted);font-size:.925rem;font-weight:620} .ux-steps li::before{counter-increment:uxs;content:counter(uxs);box-sizing:border-box;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ux-rule-2);font-size:.875rem;font-weight:700} .ux-steps li[aria-current="step"]{color:var(--ux-ink)} .ux-steps li[aria-current="step"]::before{background:var(--ux-ink);border-color:var(--ux-ink);color:var(--ux-paper)} .ux-steps li.done{color:var(--ux-ink-2)} .ux-steps li.done::before{background:var(--ux-ok-bg);border-color:var(--ux-ok);color:var(--ux-ok)} .ux-cand{box-sizing:border-box;background:var(--ux-surface);border:1.5px solid var(--ux-rule);border-radius:var(--ux-r-lg);padding:18px 20px;display:flex;gap:16px;align-items:flex-start} .ux-cand + .ux-cand{margin-top:12px} .ux-cand-main{flex:1 1 auto;min-width:0} .ux-cand-name{font-weight:720;font-size:1.15rem;margin:0 0 2px} .ux-cand-roles{list-style:none;margin:6px 0 0;padding:0;color:var(--ux-ink-2);font-size:.975rem} .ux-cand-roles li{margin:2px 0} .ux-cand-act{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;align-items:stretch} @media (max-width:640px){ .ux-cand{flex-wrap:wrap} .ux-cand-act{width:100%} } .ux-assure{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--ux-r);background:var(--ux-sunk);color:var(--ux-ink-2);margin:0 0 20px} .ux-assure svg{flex:0 0 auto;color:var(--ux-ok);margin-top:3px} .ux-assure p{margin:0} /* ------------------------------------------------------------------ first wow + personal home */ .ux-wow{padding:40px 0 8px} .ux-wow h1{font-size:clamp(2rem,1.3rem + 2.8vw,3.1rem);line-height:1.08;letter-spacing:-.03em;max-width:28ch} body.ux [tabindex="-1"]:focus{outline:none} .ux-wow .ux-n{color:var(--ux-brand-ink);font-variant-numeric:tabular-nums} .ux-todo{list-style:none;margin:0;padding:0;border:1px solid var(--ux-rule);border-radius:var(--ux-r);background:var(--ux-surface)} .ux-todo li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:14px 16px;border-top:1px solid var(--ux-rule);flex-wrap:wrap} .ux-todo li:first-child{border-top:0} .ux-todo-t{display:flex;gap:10px;align-items:flex-start;min-width:0;flex:1 1 260px} .ux-todo-t svg{flex:0 0 auto;margin-top:3px;color:var(--ux-ink-2)} .ux-checklist{list-style:none;margin:0;padding:0;display:grid;gap:8px} .ux-checklist li{display:flex;gap:10px;align-items:center} .ux-tick{box-sizing:border-box;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ux-rule-2);display:inline-grid;place-items:center;flex:0 0 auto;color:var(--ux-ok)} .ux-tick.on{background:var(--ux-ok-bg);border-color:var(--ux-ok)} /* ------------------------------------------------------------------ invitations + consent */ .ux-invite{box-sizing:border-box;max-width:calc(660px + 2 * var(--ux-gut));margin:0 auto;padding:34px var(--ux-gut) 64px} .ux-invite h1{font-size:clamp(1.65rem,1.3rem + 1.6vw,2.3rem);line-height:1.15} .ux-invite-from{display:flex;gap:12px;align-items:center;color:var(--ux-ink-2);font-size:.975rem;margin:0 0 14px} .ux-points{list-style:none;margin:20px 0;padding:0;display:grid;gap:10px} .ux-points li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--ux-surface);border:1px solid var(--ux-rule);border-radius:var(--ux-r)} .ux-points li svg{flex:0 0 auto;color:var(--ux-ok);margin-top:3px} .ux-points b{display:block} .ux-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:22px 0} @media (max-width:560px){ .ux-actions{flex-direction:column;align-items:stretch} .ux-actions .ux-btn{width:100%} .ux-actions .ux-btn-text{width:auto;align-self:center} } .ux-safety{display:flex;gap:10px;align-items:flex-start;font-size:.975rem;color:var(--ux-ink-2);padding:14px 16px;background:var(--ux-sunk);border-radius:var(--ux-r);margin:18px 0 0} .ux-safety svg{flex:0 0 auto;margin-top:3px} .ux-choices{display:grid;gap:12px;margin:18px 0;border:0;padding:0;min-width:0} .ux-choices legend{font-weight:700;font-size:1.05rem;margin:0 0 10px;padding:0} .ux-choice{box-sizing:border-box;position:relative;display:block;padding:18px 18px 18px 58px;border:1.5px solid var(--ux-rule-2);border-radius:12px;background:var(--ux-surface);cursor:pointer} .ux-choice input{position:absolute;left:18px;top:20px;width:24px;height:24px;margin:0;accent-color:var(--ux-ink)} .ux-choice:hover{border-color:var(--ux-ink-2)} .ux-choice:has(input:checked){border-color:var(--ux-ink);box-shadow:0 0 0 1px var(--ux-ink)} .ux-choice:has(input:focus-visible){outline:3px solid var(--ux-focus);outline-offset:2px} .ux-choice-t{display:block;font-weight:720;font-size:1.06rem;line-height:1.3} .ux-choice-d{display:block;color:var(--ux-ink-2);margin-top:4px;font-size:.975rem} .ux-see{box-sizing:border-box;border:1px solid var(--ux-rule);border-radius:12px;background:var(--ux-surface);padding:18px 20px;margin:18px 0} .ux-see > h2,.ux-see > summary{font-size:1.12rem;font-weight:700;margin:0} .ux-see > summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:center;min-height:28px} .ux-see > summary::-webkit-details-marker{display:none} .ux-see-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:14px} @media (max-width:600px){ .ux-see-cols{grid-template-columns:minmax(0,1fr)} } .ux-see-h{display:flex;gap:6px;align-items:center;font-weight:700;margin:0 0 6px} .ux-see ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} .ux-see li{display:flex;gap:8px;align-items:flex-start;color:var(--ux-ink-2)} .ux-see li svg{flex:0 0 auto;margin-top:4px} .ux-can .ux-see-h,.ux-can li svg{color:var(--ux-ok)} .ux-cannot .ux-see-h,.ux-cannot li svg{color:var(--ux-danger)} .ux-perm{box-sizing:border-box;border:1px solid var(--ux-rule);border-radius:var(--ux-r);background:var(--ux-surface);padding:16px 18px} .ux-perm-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--ux-rule);font-size:.975rem} .ux-perm-row:first-of-type{border-top:0} .ux-onoff{font-weight:700} .ux-onoff.on{color:var(--ux-ok)} .ux-onoff.off{color:var(--ux-ink-2)} /* ------------------------------------------------------------------ organisation workspace */ .ux-ws-hdr{background:var(--ux-surface);border-bottom:1px solid var(--ux-rule)} .ux-ws-hdr-in{max-width:var(--ux-max);margin:0 auto;padding:16px var(--ux-gut) 0} .ux-crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.925rem;color:var(--ux-muted);margin:0 0 6px;padding:0;list-style:none} .ux-crumb li + li::before{content:"/";margin-right:6px;color:var(--ux-rule-2)} .ux-crumb a{color:var(--ux-ink-2)!important} .ux-ws-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px} .ux-ws-title h1{margin:0;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)} .ux-ws-nav{display:flex;gap:2px;align-items:stretch;overflow-x:auto;scrollbar-width:none} .ux-ws-nav::-webkit-scrollbar{display:none} .ux-ws-nav > a,.ux-ws-more > summary{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;color:var(--ux-ink-2)!important;text-decoration:none!important;font-weight:620;border-bottom:3px solid transparent;white-space:nowrap;cursor:pointer;list-style:none} .ux-ws-more > summary::-webkit-details-marker{display:none} .ux-ws-nav > a:hover,.ux-ws-nav > a[aria-current="page"]{color:var(--ux-ink)!important;border-bottom-color:var(--ux-ink)} .ux-ws-more{display:none;position:relative} .ux-ws-more .ux-menu-panel{top:100%} @media (max-width:767px){ .ux-ws-nav > a.ux-ws-sec{display:none} .ux-ws-more{display:block} .ux-ws-nav{overflow:visible} } .ux-orgsearch{box-sizing:border-box;background:var(--ux-surface);border:1px solid var(--ux-rule);border-radius:var(--ux-r-lg);padding:22px;margin:0 0 24px} .ux-orgsearch h2{margin:0 0 6px} .ux-route{box-sizing:border-box;border:1px solid var(--ux-rule);border-radius:var(--ux-r);background:var(--ux-surface);padding:16px 18px} .ux-route + .ux-route{margin-top:10px} .ux-explain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 20px} @media (max-width:767px){ .ux-explain{grid-template-columns:minmax(0,1fr)} } .ux-explain > div{padding:14px 16px;border-radius:var(--ux-r);background:var(--ux-sunk)} .ux-explain b{display:block;margin:0 0 2px} .ux-table-wrap{overflow-x:auto;border:1px solid var(--ux-rule);border-radius:var(--ux-r);background:var(--ux-surface)} .ux-table{width:100%;border-collapse:collapse;font-size:.975rem} .ux-table th{text-align:left;font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ux-muted);font-weight:700;padding:12px 14px;border-bottom:1px solid var(--ux-rule);background:var(--ux-sunk);white-space:nowrap} .ux-table td{padding:14px;border-top:1px solid var(--ux-rule);vertical-align:top} .ux-table tr:first-child td{border-top:0} @media (max-width:767px){ .ux-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .ux-table,.ux-table tbody,.ux-table tr,.ux-table td{display:block;width:auto} .ux-table tr{padding:14px 16px;border-top:1px solid var(--ux-rule)} .ux-table tr:first-child{border-top:0} .ux-table td{display:flex;justify-content:space-between;gap:14px;border:0;padding:5px 0;text-align:right} .ux-table td::before{content:attr(data-label);color:var(--ux-muted);font-size:.875rem;font-weight:650;text-align:left} .ux-table td.ux-td-main{display:block;text-align:left;padding-bottom:8px} .ux-table td.ux-td-main::before{content:none} } /* ------------------------------------------------------------------ marketing pages */ .ux-qa{border-top:1px solid var(--ux-rule)} .ux-qa > details{border-bottom:1px solid var(--ux-rule)} .ux-qa summary{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:18px 0;cursor:pointer;font-weight:680;font-size:1.08rem;list-style:none} .ux-qa summary::-webkit-details-marker{display:none} .ux-qa summary svg{flex:0 0 auto;transition:transform .15s} .ux-qa details[open] summary svg{transform:rotate(180deg)} .ux-qa .ux-qa-a{padding:0 0 18px;color:var(--ux-ink-2);max-width:70ch} .ux-feature{padding:20px;border:1px solid var(--ux-rule);border-radius:var(--ux-r);background:var(--ux-surface)} .ux-feature h3{display:flex;gap:10px;align-items:center} .ux-ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--ux-sunk);color:var(--ux-ink);flex:0 0 auto} /* ------------------------------------------------------------------ footer */ .ux-ftr{background:var(--ux-sunk);color:var(--ux-ink-2);border-top:1px solid var(--ux-rule);margin:0} .ux-ftr-in{max-width:var(--ux-max);margin:0 auto;padding:40px var(--ux-gut) 26px;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px} .ux-ftr h2{font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ux-muted);margin:0 0 10px} .ux-ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:4px} .ux-ftr li a,.ux-ftr li button{display:inline-flex;align-items:center;min-height:32px;color:var(--ux-ink-2)!important;text-decoration:none!important;font:inherit;font-size:.95rem;background:none;border:0;padding:0;cursor:pointer} .ux-ftr li a:hover,.ux-ftr li button:hover{color:var(--ux-ink)!important;text-decoration:underline!important} .ux-ftr-about p{font-size:.925rem;color:var(--ux-ink-2);max-width:46ch;margin:10px 0 0} .ux-ftr-base{max-width:var(--ux-max);margin:0 auto;padding:16px var(--ux-gut) 26px;border-top:1px solid var(--ux-rule);display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;font-size:.875rem;color:var(--ux-muted)} .ux-ftr-base p{margin:0;max-width:90ch} .ux-ftr-base a{color:var(--ux-ink-2)!important} @media (max-width:900px){ .ux-ftr-in{grid-template-columns:repeat(2,minmax(0,1fr))} .ux-ftr-about{grid-column:1 / -1} } @media (max-width:480px){ .ux-ftr-in{grid-template-columns:minmax(0,1fr)} } .ux-ftr-min{background:transparent;border-top:1px solid var(--ux-rule)} .ux-ftr-min .ux-ftr-base{border-top:0;justify-content:center;text-align:center} .ux-ed{position:relative;display:inline-block} .ux-ed > summary{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--ux-rule-2);border-radius:999px;cursor:pointer;list-style:none;font-weight:620;font-size:.925rem;color:var(--ux-ink-2);background:var(--ux-surface)} .ux-ed > summary::-webkit-details-marker{display:none} .ux-ed .ux-menu-panel{bottom:calc(100% + 8px);top:auto;left:0;right:auto} @media (max-width:767px){ .ux-ed .ux-menu-panel{position:absolute;left:0;right:auto;top:auto;bottom:calc(100% + 8px);min-width:240px} } /* focused-flow header */ .ux-hdr-focus .ux-hdr-in{justify-content:space-between} /* staging-only fixture label (W3_6_STAGING_FIXTURE_LABELS) */ .ux-fixture-note{display:inline-flex;gap:6px;align-items:center;font-size:.8125rem;font-weight:650;color:var(--ux-warn);border:1px dashed currentColor;border-radius:999px;padding:2px 9px} /* ------------------------------------------------------------------ small-screen fixes (W3.6 responsive matrix) */ .ux-av-sm{font-size:.82rem} @media (max-width:480px){ .ux-btn{white-space:normal;text-align:center} .ux-badge{white-space:normal;max-width:100%} } @media (max-width:767px){ .ux-ws-nav{overflow-x:auto} .ux-ws-nav > a,.ux-ws-more > summary{padding:0 9px} .ux-ws-more .ux-menu-panel{position:fixed;top:calc(var(--ux-hdr-h) + 8px);left:10px;right:10px} } @media (max-width:360px){ :root{--ux-gut:14px} .ux-hdr-in{gap:8px} .ux-brand{gap:8px;font-size:.95rem} .ux-iconbtn{width:40px;height:40px} } /* Legacy analysis panels reused inside W3.6 collapsed sections: lift stat and label text to the 13px floor. Chart axis ticks (.oh-y, .oh-axis-lab) are left as designed and listed as an exception. */ .ux-more-body :is(.g2-stat-lab,.g2-stat-sub,.g2-ro-shared,.g2-prov,.g2-sub,.oh-tile-sub,.oh-tile-l,.inf,.gcap,.chip){font-size:.8125rem} /* Big aggregate numbers must fit half-width cells on small phones (18,729,588 at 320px). */ @media (max-width:560px){ .ux-stats .ux-metric-n{font-size:clamp(1.15rem,.85rem + 2.2vw,1.9rem)} .ux-stats .ux-metric{padding:14px} } .ux-metric-n{overflow-wrap:anywhere} /* W3.6A: served-alongside chapters (person page) */ .ux-chapter{margin:0 0 20px} .ux-chapter-h{font-size:1.02rem;margin:0 0 10px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap} .ux-chips-people{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px} .ux-person-chip{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--ux-line);border-radius:12px;background:var(--ux-surface);color:inherit;text-decoration:none;min-height:44px} .ux-person-chip:hover{border-color:var(--ux-ink-3,#8a8f98)} .ux-person-chip b{display:block;font-weight:620;line-height:1.3} .ux-claim-quiet{font-weight:560} @media (max-width:480px){.ux-chips-people{grid-template-columns:1fr 1fr}.ux-person-chip{padding:8px 10px}.ux-person-chip .ux-av-sm{display:none}} /* W3.6A: Governance Passport as a CV */ .ux-cv-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:22px 0 0;padding:0} .ux-cv-facts>div{border:1px solid var(--ux-line);border-radius:12px;padding:12px 14px;background:var(--ux-surface)} .ux-cv-facts dt{font-size:.85rem;color:var(--ux-muted);margin:0} .ux-cv-facts dd{margin:4px 0 0;font-size:1.45rem;font-weight:700} .ux-cv-list{list-style:none;margin:0;padding:0;border-left:2px solid var(--ux-line)} .ux-cv-row{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:10px 0 10px 16px;position:relative} .ux-cv-row::before{content:"";position:absolute;left:-6px;top:17px;width:10px;height:10px;border-radius:50%;background:var(--ux-surface);border:2px solid var(--ux-ink-2)} .ux-cv-when{color:var(--ux-muted);font-size:.92rem;padding-top:1px} .ux-cv-org{font-weight:620} .ux-cv-role{color:var(--ux-ink-2)} @media (max-width:560px){.ux-cv-row{grid-template-columns:1fr;gap:2px}} .ux-cv .ux-cv-facts + .ux-small{margin-bottom:28px!important} .ux-cv .ux-sec{margin-top:28px} /* W3.7: Saved + Changes */ .ux-inline{display:inline} .ux-tertiary{color:var(--ux-ink);opacity:.72} .ux-tertiary:hover{opacity:1} .ux-bullets{margin:0 0 12px;padding-left:1.2em}.ux-bullets li{margin:4px 0} .ux-tablewrap{overflow-x:auto;max-width:100%} .ux-toast{margin:12px 0 18px;padding:12px 14px;border:1px solid var(--ux-rule);border-left:4px solid var(--ux-ok);border-radius:var(--ux-r);background:var(--ux-paper);box-shadow:var(--ux-shadow)} .ux-toast .ux-btn{vertical-align:baseline} .ux-card-ok{border-left:4px solid var(--ux-ok)} .ux-count{display:inline-block;min-width:1.5em;padding:0 .4em;margin-left:6px;border-radius:999px;background:var(--ux-brand);color:#fff;font-size:.78rem;line-height:1.5em;text-align:center;font-weight:600} .ux-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ux-brand);margin-left:4px;vertical-align:top} .ux-saved-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:8px 0 16px} .ux-saved-filter{gap:8px;flex-wrap:wrap;align-items:center} .ux-saved-filter .ux-input{min-width:180px} .ux-save-menu{display:inline-block;position:relative} .ux-chg-stack{display:grid;gap:14px} .ux-chg{padding:16px 18px;border:1px solid var(--ux-rule);border-radius:var(--ux-r);background:var(--ux-paper)} .ux-chg-imp{border-left:4px solid var(--ux-warn)} .ux-chg-lab{margin:0 0 4px;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;opacity:.75} .ux-chg-new{display:inline-block;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--ux-brand);color:#fff;font-size:.72rem;text-transform:none;letter-spacing:0;opacity:1} .ux-chg-title{margin:0 0 6px;font-size:1.12rem;line-height:1.35} .ux-chg-line{margin:4px 0} .ux-chg-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px} .ux-chg-meta{margin:10px 0 0} .ux-chg-list{list-style:none;margin:0;padding:0;display:grid;gap:8px} .ux-chg-compact{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--ux-rule);border-radius:var(--ux-r);background:var(--ux-paper)} .ux-chg-compact .ux-chg-lab{margin:0} .ux-chg-compact .ux-chg-title{font-size:1rem;font-weight:600;margin:0} .ux-rtcard{padding:16px 18px;border:1px solid var(--ux-rule);border-radius:var(--ux-r);background:var(--ux-paper)} .ux-rt{list-style:none;margin:0;padding:0} .ux-rt-step{position:relative;display:flex;gap:12px;padding:0 0 16px} .ux-rt-step:last-child{padding-bottom:0} .ux-rt-step:not(:last-child)::before{content:"";position:absolute;left:15px;top:32px;bottom:2px;width:2px;background:var(--ux-rule)} .ux-rt-dot{flex:0 0 32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ux-rule)} .ux-rt-step .ux-note{display:block} .ux-why{margin:0;padding-left:1.3em}.ux-why li{margin:8px 0;line-height:1.5} @media (max-width:600px){.ux-saved-tools{flex-direction:column;align-items:stretch}.ux-chg{padding:14px}.ux-chg-foot .ux-btn{flex:1 1 auto}} @media (prefers-reduced-motion:reduce){.ux-toast{transition:none}} /* W3.7 back link on its own line */ .ux-page > .ux-back,.ux-page-read > .ux-back{display:flex;width:max-content;margin:0 0 10px} /* W3.7A: Find a route, compact controls */ .ux-route-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;align-items:start;margin:8px 0 24px;padding:16px;border:1px solid var(--ux-rule);border-radius:var(--ux-r);background:var(--ux-paper)} .ux-route-field label{display:block;font-weight:600;margin:0 0 4px} .ux-route-field .ux-input{width:100%} .ux-route-me{padding:9px 0 4px} .ux-route-change summary,.ux-route-opts summary{cursor:pointer} .ux-route-change .ux-input{margin-top:6px} .ux-route-opts{grid-column:1/-1} .ux-route-form > .ux-btn-primary{grid-column:1/-1;justify-self:start} .ux-route-headline{font-size:1.35rem;line-height:1.3;margin:0 0 8px} .ux-route-result .ux-card-ok{margin:14px 0} .ux-route-result .ux-rtcard{margin:0 0 4px} .ux-more-menu{display:inline-block;position:relative;vertical-align:middle} .ux-more-menu .ux-menu-panel button{background:none;border:0;font:inherit;text-align:left;width:100%;padding:8px 12px;cursor:pointer;display:flex;gap:8px;align-items:center} .ux-saved-news{margin:0 0 14px;padding:10px 12px;border-left:4px solid var(--ux-brand);background:var(--ux-paper)} .ux-saved-row .ux-item-sub b{font-weight:600} .ux-chg-when{margin-left:auto} .ux-chg-more{margin:6px 0 0} .ux-pcard .ux-small{color:inherit;opacity:.78} @media (max-width:600px){.ux-route-form{grid-template-columns:1fr}.ux-chg-when{margin-left:0;width:100%}} /* W3.7A workspace nav: Overview, Find a route, Requests, People visible; Organisations, Continuity, How it works under More */ .ux-ws-more{display:inline-block} /* W3.7B organisation page: one column, human leadership list, one connection sentence, quiet evidence */ .ux-org-body{max-width:820px} .ux-rec-source{margin:14px 0 0;font-size:.9rem;color:var(--ux-ink-2)} .ux-rec-source .ux-badge{margin-right:4px} .ux-org-conn{padding:14px 16px;border-left:4px solid var(--ux-brand);background:var(--ux-paper);border-radius:var(--ux-r)} .ux-org-conn-t{margin:0 0 6px} .ux-org-band{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:14px 16px;border:1px solid var(--ux-rule);border-radius:var(--ux-r);margin:0 0 8px;background:var(--ux-paper)} .ux-org-band p{margin:0;max-width:60ch} .ux-leads{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));column-gap:28px} .ux-lead{padding:10px 0;border-bottom:1px solid var(--ux-rule)} .ux-lead-name{display:block;font-weight:600} .ux-lead-role{display:block;font-size:.92rem;color:var(--ux-ink-2)} .ux-plainlist{list-style:none;margin:0;padding:0} .ux-plainlist li{padding:7px 0;border-bottom:1px solid var(--ux-rule)} .ux-org-claim{margin:14px 0 0} .ux-research{margin-top:24px} @media (max-width:600px){.ux-leads{grid-template-columns:1fr}.ux-org-band{flex-direction:column;align-items:flex-start}} /* W3.7B: legacy info tooltips inside the single-column organisation body. Hidden popovers kept their 250px box in layout and pushed narrow pages sideways (company page 533px wide at 390). Out of layout until hovered/focused; anchored to fit on phones. */ .ux-org-body .wc-inf-pop{display:none;max-width:calc(100vw - 32px)} .ux-org-body .wc-inf-i:hover .wc-inf-pop,.ux-org-body .wc-inf-i:focus .wc-inf-pop,.ux-org-body .wc-inf-i:focus-within .wc-inf-pop{display:block} @media (max-width:600px){.ux-org-body .wc-inf-pop{left:auto;right:-8px;width:min(250px,calc(100vw - 40px))}} /* ===== W3.7D homepage: proposition first (journey, benefits), holdings as proof lower down ===== */ .ux-hero .ux-kicker{margin-bottom:10px} .ux-journey{list-style:none;margin:6px 0 18px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .ux-journey li{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;border:1px solid var(--ux-rule);border-radius:var(--ux-r);background:var(--ux-surface);font-size:.9rem;line-height:1.3;color:var(--ux-ink-2)} .ux-journey li b{display:block;color:var(--ux-ink);font-size:.95rem} .ux-journey-n{display:inline-grid;place-items:center;flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--ux-ink);color:var(--ux-paper);font-size:.78rem;font-weight:700;margin-top:1px} @media (min-width:1024px){ .ux-hero .ux-journey{display:none} } .ux-jcard{box-sizing:border-box;background:var(--ux-surface);border:1px solid var(--ux-rule);border-radius:var(--ux-r-lg);padding:22px;box-shadow:var(--ux-shadow)} .ux-jcard ol{list-style:none;margin:0;padding:0} .ux-jcard li{display:flex;gap:12px;align-items:center;padding:11px 0} .ux-jcard li + li{border-top:1px dashed var(--ux-rule-2)} .ux-jcard b{display:block;font-size:1.02rem;color:var(--ux-ink)} .ux-jcard-l{display:block;color:var(--ux-ink-2);font-size:.93rem} .ux-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:22px} .ux-benefits .ux-card-link b{font-size:1.1rem} @media (max-width:1100px){ .ux-benefits{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .ux-benefits{grid-template-columns:minmax(0,1fr)} .ux-hero .ux-lede{margin-bottom:18px} .ux-hero-cta{margin:12px 0 14px} } .ux-regtable{width:100%;border-collapse:collapse;font-size:.95rem} .ux-regtable th,.ux-regtable td{padding:8px 10px;border-top:1px solid var(--ux-rule);text-align:left} .ux-regtable .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .ux-regtable-group th{background:var(--ux-sunk);font-weight:700;font-size:.85rem;letter-spacing:.02em} /* W3.7E anonymous person preview: gated sections show a count-only shape, never names */ .ux-locked{position:relative;border:1px solid var(--ux-rule);border-radius:var(--ux-r);background:var(--ux-surface);overflow:hidden} .ux-locked-shape{padding:16px 18px 4px;opacity:.6;pointer-events:none;user-select:none} .ux-locked-over{padding:18px;border-top:1px solid var(--ux-rule);background:var(--ux-sunk);text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px} .ux-locked-title{font-weight:700;font-size:1.05rem;margin:0;color:var(--ux-ink)} .ux-locked-line{margin:0;color:var(--ux-ink-2);max-width:46ch} .ux-locked-slim{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:12px 16px;margin-top:12px;background:var(--ux-sunk)} .ux-locked-slim p{margin:0} .ux-skel{display:block;background:var(--ux-rule);border-radius:6px} .ux-skel-h{height:14px;width:40%;margin:4px 0 12px} .ux-skel-line{display:inline-block;height:10px;width:90px} .ux-skel-av{background:var(--ux-rule)!important} .ux-topo-wrap{margin:6px 0 4px} .ux-topo{width:100%;height:auto;display:block} .ux-topo-edge{stroke:var(--ux-rule);stroke-width:2} .ux-topo-edge-2{stroke-width:1.5} .ux-topo-person{fill:var(--ux-sunk);stroke:var(--ux-ink-2);stroke-width:1.5} .ux-topo-org{fill:var(--ux-surface);stroke:var(--ux-brand);stroke-width:2} .ux-topo-self{fill:var(--ux-brand)} .ux-steps-mini{margin:8px 0 14px;padding-left:1.2em} .ux-steps-mini li{margin:4px 0}