@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Lora:ital,wght@1,500;1,600&display=swap');
:root{--navy:#061b3a;--black:#080c16;--blue:#0b3d91;--royal:#1257c7;--sky:#69c4eb;--gold:#d6ad43;--gold-deep:#b8892f;--red:#5c151b;--danger:#b42318;--success:#177245;--warning:#8a5b0a;--ink:#10151f;--muted:#5b6577;--line:#e3e8f0;--paper:#fff;--offwhite:#f5f7fb;--sidebar:272px;--topbar:76px;--radius:4px;--shadow:0 12px 32px rgba(8,12,22,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:var(--offwhite);line-height:1.5;-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button,a{color:inherit}button{cursor:pointer}a{text-decoration:none}.skip-link{position:fixed;z-index:999;left:16px;top:-80px;padding:12px 18px;background:var(--gold);color:var(--black);font-weight:800}.skip-link:focus{top:12px}.app-shell{min-height:100vh}.sidebar{position:fixed;z-index:40;inset:0 auto 0 0;width:var(--sidebar);display:flex;flex-direction:column;background:var(--navy);color:#fff;transition:width .22s,transform .22s}.workspace{min-height:100vh;margin-left:var(--sidebar);transition:margin .22s}.topbar{position:sticky;z-index:30;top:0;height:var(--topbar);display:flex;align-items:center;gap:18px;padding:0 32px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}.main{padding:30px 32px 110px}.brand-block{display:flex;align-items:center;min-height:var(--topbar);padding:0 22px;border-bottom:1px solid rgba(255,255,255,.12)}.brand-mark{display:grid;place-items:center;flex:none;width:40px;height:40px;border:2px solid var(--gold);color:var(--gold);font-weight:900;font-size:12px}.brand-copy{min-width:0;margin-left:12px;font-weight:900;font-size:13px;line-height:1.15;letter-spacing:.02em}.brand-copy small{display:block;margin-top:4px;color:#9db4d9;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.sidebar-scroll{flex:1;overflow-y:auto;padding:22px 14px}.nav-group{margin-bottom:22px}.nav-label{display:block;padding:0 12px 8px;color:#7891b5;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.nav-item{display:flex;align-items:center;gap:13px;width:100%;min-height:44px;margin:3px 0;padding:10px 12px;border:0;border-left:3px solid transparent;background:transparent;color:#cbd8eb;text-align:left;font-size:13px;font-weight:700}.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}.nav-item.active{border-left-color:var(--gold);background:rgba(105,196,235,.12);color:#fff}.icon{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;font-size:14px}.role-card{margin:0 14px 18px;padding:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06)}.role-card b{display:block;font-size:12px}.role-card small{display:block;margin-top:4px;color:#9db4d9;font-size:10px}.sidebar-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 28px);min-height:42px;margin:0 14px 18px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#cbd8eb;font-size:12px;font-weight:800}.menu-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);background:#fff}.page-title{min-width:170px}.page-title small{display:block;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.page-title strong{display:block;color:var(--navy);font-size:17px}.global-search{position:relative;flex:1;max-width:520px}.global-search input{width:100%;height:44px;padding:0 42px 0 16px;border:1px solid var(--line);border-radius:8px;background:var(--offwhite)}.global-search kbd{position:absolute;right:12px;top:11px;padding:2px 6px;border:1px solid #cdd4df;background:#fff;color:var(--muted);font-size:10px}.top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);background:#fff;color:var(--navy);font-weight:800}.icon-btn .dot{position:absolute;right:8px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px #fff}.profile-btn{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 10px 4px 5px;border:1px solid var(--line);background:#fff;text-align:left}.avatar{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-size:11px;font-weight:900}.profile-btn b{display:block;font-size:11px}.profile-btn small{display:block;color:var(--muted);font-size:9px}.bottom-nav{display:none}.drawer-backdrop{position:fixed;z-index:35;inset:0;background:rgba(8,12,22,.55);opacity:0;visibility:hidden;transition:.2s}.screen-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 26px}.breadcrumbs{display:flex;gap:8px;margin-bottom:8px;color:var(--muted);font-size:11px}.breadcrumbs span+span:before{content:'/';margin-right:8px;color:#9da7b7}.screen-head h1{margin:0;color:var(--navy);font-size:clamp(26px,3vw,38px);line-height:1.1;letter-spacing:-.025em}.screen-head p{max-width:720px;margin:9px 0 0;color:var(--muted);font-size:14px}.head-actions,.actions-row{display:flex;gap:10px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 18px;border:1px solid var(--royal);border-radius:var(--radius);background:var(--royal);color:#fff;font-size:12px;font-weight:800;letter-spacing:.01em}.btn:hover{background:#0d47b8}.btn.secondary{border-color:var(--line);background:#fff;color:var(--navy)}.btn.gold{border-color:var(--gold);background:var(--gold);color:#1a1305}.btn.danger{border-color:var(--danger);background:var(--danger)}.btn.text{border-color:transparent;background:transparent;color:var(--blue)}.btn:disabled{cursor:not-allowed;opacity:.52}.alert{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px;padding:15px 17px;border-left:4px solid var(--blue);background:#edf5ff;color:#183b66;font-size:13px}.alert.warning{border-color:var(--gold-deep);background:#fff8e6;color:#624a0b}.alert.danger{border-color:var(--danger);background:#fff2f1;color:#7a201a}.alert.success{border-color:var(--success);background:#eaf7ef;color:#125b37}.alert b{display:block;margin-bottom:2px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.metric-card,.panel{background:#fff;border:1px solid var(--line);border-top:3px solid var(--sky);box-shadow:0 5px 18px rgba(8,12,22,.035)}.metric-card{min-height:150px;padding:20px}.metric-top{display:flex;justify-content:space-between;gap:12px}.metric-label{color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.metric-icon{display:grid;place-items:center;width:34px;height:34px;background:#eaf4ff;color:var(--blue);font-weight:900}.metric-value{display:block;margin:16px 0 6px;color:var(--navy);font-size:28px;font-weight:900;line-height:1}.metric-meta{color:var(--muted);font-size:11px}.metric-meta.good{color:var(--success)}.metric-meta.warn{color:var(--warning)}.panel{padding:22px}.panel.dark{border:0;background:var(--navy);color:#fff}.panel h2,.panel h3{margin:0;color:var(--navy)}.panel.dark h2,.panel.dark h3{color:#fff}.panel h2{font-size:17px}.panel h3{font-size:14px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.panel-head p{margin:5px 0 0;color:var(--muted);font-size:12px}.panel.dark .panel-head p{color:#a9b9ce}.panel-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-bottom:18px}.panel-grid.equal{grid-template-columns:1fr 1fr}.stack{display:grid;gap:18px}.progress{height:9px;overflow:hidden;background:#e8edf4}.progress span{display:block;height:100%;background:var(--royal)}.progress.gold span{background:var(--gold)}.formation-count{display:flex;align-items:flex-end;justify-content:space-between;margin:18px 0 11px}.formation-count strong{font-size:34px;color:var(--navy)}.formation-count span{color:var(--muted);font-size:12px}.mini-list{display:grid;gap:0}.mini-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:12px}.mini-row:last-child{border:0}.mini-row b{display:block;color:var(--navy)}.mini-row small{color:var(--muted)}.badge{display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;padding:5px 9px;border-radius:999px;background:#edf2f8;color:#46546a;font-size:10px;font-weight:800;white-space:nowrap}.badge.active,.badge.success,.badge.valid,.badge.reconciled,.badge.matched{background:#e8f6ee;color:#17623f}.badge.pending,.badge.review,.badge.scheduled,.badge.partial{background:#fff4d8;color:#79530a}.badge.danger,.badge.revoked,.badge.suspended,.badge.investigation{background:#fcebea;color:#8d2820}.badge.info{background:#eaf4ff;color:#174b8c}.filter-bar{display:grid;grid-template-columns:minmax(220px,2fr) repeat(3,minmax(140px,1fr)) auto;gap:10px;margin-bottom:16px;padding:14px;background:#fff;border:1px solid var(--line)}.field{display:grid;gap:6px}.field label{color:var(--navy);font-size:11px;font-weight:800}.field small{color:var(--muted);font-size:10px}.field input,.field select,.field textarea{width:100%;min-height:42px;padding:10px 12px;border:1px solid #ced6e2;border-radius:6px;background:#fff;color:var(--ink);outline:0}.field textarea{min-height:110px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--royal);box-shadow:0 0 0 3px rgba(18,87,199,.14)}.field.error input{border-color:var(--danger);background:#fffafa}.field .error-text{color:var(--danger);font-size:10px;font-weight:700}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field.span-2{grid-column:1/-1}.table-panel{padding:0;overflow:hidden}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line)}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;background:#fff}.data-table th,.data-table td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;font-size:11px}.data-table th{background:#f7f9fc;color:var(--navy);font-size:10px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.data-table tbody tr:hover{background:#f8fbff}.record-link{border:0;background:none;padding:0;color:var(--blue);font-weight:800;text-align:left}.table-actions{white-space:nowrap}.mobile-records{display:none}.pagination{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;color:var(--muted);font-size:11px}.page-controls{display:flex;gap:5px}.page-controls button{width:34px;height:34px;border:1px solid var(--line);background:#fff}.page-controls button.active{border-color:var(--royal);background:var(--royal);color:#fff}.timeline{position:relative;display:grid;gap:0;margin-top:8px}.timeline-item{position:relative;display:grid;grid-template-columns:24px 1fr;gap:12px;padding-bottom:20px}.timeline-item:before{content:'';position:absolute;left:8px;top:18px;bottom:0;width:2px;background:var(--line)}.timeline-item:last-child:before{display:none}.timeline-dot{position:relative;z-index:1;width:18px;height:18px;border:4px solid #fff;border-radius:50%;background:#aab4c4;box-shadow:0 0 0 1px #aab4c4}.timeline-item.done .timeline-dot{background:var(--success);box-shadow:0 0 0 1px var(--success)}.timeline-item.current .timeline-dot{background:var(--gold);box-shadow:0 0 0 2px var(--gold-deep)}.timeline-copy b{display:block;color:var(--navy);font-size:12px}.timeline-copy p{margin:3px 0;color:var(--muted);font-size:11px}.detail-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr);gap:18px}.summary-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.summary-list div{padding:13px 0;border-bottom:1px solid var(--line)}.summary-list dt{color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase}.summary-list dd{margin:4px 0 0;color:var(--navy);font-size:12px;font-weight:700}.tabs{display:flex;gap:2px;overflow-x:auto;margin-bottom:18px;border-bottom:1px solid var(--line)}.tab{min-height:42px;padding:8px 14px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);font-size:11px;font-weight:800;white-space:nowrap}.tab.active{border-bottom-color:var(--royal);color:var(--blue)}.config-list{display:grid;gap:12px}.config-panel{border:1px solid var(--line);background:#fff}.config-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:17px 18px;border:0;background:#fff;text-align:left}.config-summary b{display:block;color:var(--navy);font-size:13px}.config-summary small{display:block;margin-top:3px;color:var(--muted);font-size:10px}.config-body{display:none;padding:0 18px 18px;border-top:1px solid var(--line)}.config-panel.open .config-body{display:block}.config-body .field-grid{margin-top:18px}.audit-note{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding-top:13px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}.matrix-wrap{overflow:auto}.matrix{min-width:860px}.matrix td,.matrix th{text-align:center}.matrix td:first-child,.matrix th:first-child{text-align:left;position:sticky;left:0;background:#fff}.perm-toggle{position:relative;width:38px;height:22px;border:0;border-radius:999px;background:#cbd3df}.perm-toggle.on{background:var(--royal)}.perm-toggle:after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}.perm-toggle.on:after{transform:translateX(16px)}.chart-bars{display:flex;align-items:flex-end;gap:12px;height:165px;padding-top:20px;border-bottom:1px solid var(--line)}.bar{position:relative;flex:1;min-width:20px;background:var(--royal)}.bar:nth-child(even){background:var(--sky)}.bar span{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);color:var(--muted);font-size:9px}.money-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.money-card{padding:18px;background:var(--offwhite);border-left:3px solid var(--sky)}.money-card b{display:block;color:var(--navy);font-size:22px}.money-card small{color:var(--muted);font-size:10px}.state-card{display:grid;place-items:center;min-height:330px;padding:42px;text-align:center;background:#fff;border:1px dashed #bdc7d5}.state-icon{display:grid;place-items:center;width:58px;height:58px;margin-bottom:18px;background:#eaf4ff;color:var(--blue);font-size:22px;font-weight:900}.state-card h2{margin:0 0 8px;color:var(--navy);font-size:20px}.state-card p{max-width:460px;margin:0 0 20px;color:var(--muted);font-size:12px}.modal-layer:empty{display:none}.modal-layer{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:20px;background:rgba(8,12,22,.7)}.modal{width:min(580px,100%);max-height:90vh;overflow:auto;background:#fff;box-shadow:0 28px 80px rgba(0,0,0,.35)}.modal-head{padding:22px 24px;border-bottom:1px solid var(--line)}.modal-head.danger{background:#fff2f1;border-top:5px solid var(--danger)}.modal-head h2{margin:0;color:var(--navy);font-size:20px}.modal-head p{margin:7px 0 0;color:var(--muted);font-size:12px}.modal-body{padding:24px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:18px 24px;border-top:1px solid var(--line);background:var(--offwhite)}.check-list{display:grid;gap:10px}.check-item{display:flex;align-items:flex-start;gap:10px;padding:11px;background:var(--offwhite);font-size:11px}.check-item input{width:17px;height:17px;accent-color:var(--royal)}.toast-region{position:fixed;z-index:120;right:20px;bottom:20px;display:grid;gap:10px}.toast{width:min(360px,calc(100vw - 40px));padding:15px 18px;border-left:4px solid var(--success);background:#fff;box-shadow:var(--shadow);font-size:12px}.toast b{display:block;color:var(--navy)}.toast span{color:var(--muted)}.search-results{position:absolute;z-index:80;top:52px;left:0;right:0;max-height:360px;overflow:auto;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}.search-result{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 15px;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left}.search-result:hover{background:var(--offwhite)}.search-result b{display:block;color:var(--navy);font-size:11px}.search-result small{color:var(--muted);font-size:9px}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
body.sidebar-collapsed{--sidebar:82px}.sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-label,.sidebar-collapsed .nav-item span:last-child,.sidebar-collapsed .role-card,.sidebar-collapsed .sidebar-toggle span{display:none}.sidebar-collapsed .nav-item{justify-content:center;padding-inline:0}.sidebar-collapsed .brand-block{justify-content:center;padding:0}.sidebar-collapsed .sidebar-toggle{width:52px;margin-inline:auto}
@media(max-width:1200px){.metrics{grid-template-columns:repeat(2,1fr)}.panel-grid,.detail-layout{grid-template-columns:1fr}.filter-bar{grid-template-columns:2fr 1fr 1fr}.filter-bar>*:nth-child(4){display:none}}
@media(max-width:900px){:root{--sidebar:272px}.sidebar{transform:translateX(-100%)}body.nav-open .sidebar{transform:none}body.nav-open .drawer-backdrop{opacity:1;visibility:visible}.workspace{margin-left:0}.menu-toggle{display:grid;place-items:center}.topbar{padding:0 18px}.profile-btn b,.profile-btn small,.page-title{display:none}.main{padding:24px 20px 100px}.bottom-nav{position:fixed;z-index:32;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);min-height:70px;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--line);background:#fff}.bottom-nav button{display:grid;place-items:center;align-content:center;gap:3px;border:0;background:#fff;color:var(--muted);font-size:9px;font-weight:700}.bottom-nav button .icon{font-size:16px}.bottom-nav button.active{color:var(--blue)}body.sidebar-collapsed{--sidebar:272px}.sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-label,.sidebar-collapsed .nav-item span:last-child,.sidebar-collapsed .role-card,.sidebar-collapsed .sidebar-toggle span{display:initial}.sidebar-collapsed .nav-item{justify-content:flex-start;padding:10px 12px}.sidebar-collapsed .brand-block{justify-content:flex-start;padding:0 22px}.sidebar-collapsed .sidebar-toggle{width:calc(100% - 28px);margin:0 14px 18px}}
@media(max-width:700px){.topbar{gap:8px;padding-inline:12px}.global-search{min-width:0;max-width:none}.global-search input{padding:0 10px;font-size:12px}.global-search kbd{display:none}.top-actions{gap:6px}.icon-btn,.profile-btn{width:44px;padding:4px}.top-actions .help-btn{display:none}.screen-head{align-items:flex-start;flex-direction:column}.head-actions{width:100%}.head-actions .btn{flex:1}.metrics{grid-template-columns:1fr}.panel,.metric-card{padding:18px}.panel-grid.equal,.money-grid,.field-grid,.summary-list{grid-template-columns:1fr}.field.span-2{grid-column:auto}.filter-bar{grid-template-columns:1fr}.filter-bar>*:nth-child(4){display:grid}.table-wrap{display:none}.mobile-records{display:grid;gap:10px;padding:12px}.mobile-record{padding:16px;border:1px solid var(--line);background:#fff}.mobile-record-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.mobile-record h3{margin:0;color:var(--navy);font-size:13px}.mobile-record p{margin:5px 0;color:var(--muted);font-size:10px}.mobile-record dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.mobile-record dt{color:var(--muted);font-size:9px;text-transform:uppercase}.mobile-record dd{margin:2px 0 0;color:var(--navy);font-size:10px;font-weight:700}.mobile-record .btn{width:100%}.pagination{padding-inline:12px}.config-summary{min-height:62px}.audit-note{align-items:flex-start;flex-direction:column}.modal-layer{align-items:end;padding:0}.modal{width:100%;max-height:88vh;border-radius:16px 16px 0 0}.modal-actions{position:sticky;bottom:0}.chart-bars{height:130px}.toast-region{right:12px;bottom:82px}.toast{width:calc(100vw - 24px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* --------------------------------------------------------------------------
   Mobile bottom bar — links, not just buttons.

   The design prototype built every bottom-bar destination as a <button> and
   moved the page with JavaScript, so its rules are written `.bottom-nav
   button`. This portal renders real <a> links, so with the script blocked the
   bar still navigates — but the anchors matched none of those rules and fell
   out of the grid as full-size body text.

   Nothing here is new styling: it is the design's own bottom-bar declarations
   applied to the element we actually use, plus truncation so a long label like
   "Credential Administration" cannot push the row out of shape.
   -------------------------------------------------------------------------- */
@media(max-width:900px){
.bottom-nav a{display:grid;place-items:center;align-content:center;gap:3px;min-width:0;padding:6px 4px;border:0;background:#fff;color:var(--muted);font-size:9px;font-weight:700;text-align:center}
.bottom-nav a .icon{font-size:16px}
.bottom-nav a.active{color:var(--blue)}
.bottom-nav a>span:last-child,.bottom-nav button>span:last-child{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.bottom-nav button{min-width:0;padding:6px 4px}
}

/* --------------------------------------------------------------------------
   Small utilities the server-rendered screens use.

   The design prototype had no forms of this kind — no settings with a value, a
   description, an approval tick and a save button in one row — so its
   stylesheet never needed these seven names. The markup converted from the old
   portal kept using them, and they matched nothing: a `.check` label rendered
   as a block, which is why an approval checkbox floated into the middle of the
   Governance Rules page with its label stranded above an empty box.

   Nothing here invents a new look. Every value is the design's own type scale
   and its own tokens; these are the plumbing that was missing underneath.
   -------------------------------------------------------------------------- */
.panel-inner{display:block}
.hint{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.5}
.small{font-size:11px}
.mono{font-family:Menlo,Consolas,'Courier New',monospace;font-size:10px;word-break:break-all}
.muted{color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.check{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.45;cursor:pointer}
.check input{flex:none;width:17px;height:17px;margin-top:1px;accent-color:var(--royal)}
.check span{min-width:0}

/* --------------------------------------------------------------------------
   Settings, two to a row.

   One long column of full-width blocks made Governance Rules four screens
   deep, and every one of them was a single short number. Each setting is now a
   self-contained card in a two-column grid, so a whole group is readable at a
   glance and the page is a third of the length. One column below 900px.
   -------------------------------------------------------------------------- */
.setting-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.setting-card{display:flex;flex-direction:column;gap:9px;padding:17px;border:1px solid var(--line);background:#fff}
.setting-card .setting-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.setting-card h3{margin:0;color:var(--navy);font-size:13px;line-height:1.3}
.setting-card .setting-body{flex:1}
.setting-card input[type=text]{width:100%;min-height:42px;padding:10px 12px;border:1px solid #ced6e2;border-radius:6px;background:#fff;color:var(--ink);outline:0}
.setting-card input[type=text]:focus{border-color:var(--royal);box-shadow:0 0 0 3px rgba(18,87,199,.14)}
.setting-card .setting-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:2px}
.setting-card .setting-foot .btn{flex:none}
@media(max-width:900px){.setting-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   The rest of the names the converted screens use.

   Fifteen more that matched nothing: the treasury's balance figures, the
   confidential note on a credential's history, the second line in a table
   cell, the "nothing here yet" line. None of them errored — they simply
   rendered as unstyled body text in the middle of otherwise finished screens.

   Same rule as the block above: the design's own scale and tokens, no new
   look, just the plumbing that was missing underneath.
   -------------------------------------------------------------------------- */

/* Treasury figures: a number over its label. */
.stat{padding:16px 18px;background:var(--offwhite);border-left:3px solid var(--sky)}
.stat.accent{border-left-color:var(--gold);background:#fffaf0}
.stat .n{color:var(--navy);font-size:22px;font-weight:900;line-height:1.1}
.stat .k{margin-top:4px;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* "Nothing here yet." */
.empty{margin:0;padding:18px 0;color:var(--muted);font-size:12px}

/* A history entry: when it happened, what happened, who did it. */
.when{color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.what{margin-top:2px;color:var(--navy);font-size:12px;font-weight:800}
.who-did{margin-top:1px;color:var(--muted);font-size:11px}
.what+.body,.who-did+.body{margin:6px 0 0}
.body{margin:0;color:var(--ink);font-size:12px;line-height:1.6}

/* Confidential, and it has to LOOK confidential — this is the text that must
   never reach the member it is about. */
.internal{margin-top:8px;padding:11px 13px;border:1px solid #f0dfb8;border-radius:4px;
          background:#fdf4e3;color:#6b5312;font-size:11.5px;line-height:1.55}
.internal b{display:block;margin-bottom:3px;font-size:10px;text-transform:uppercase;letter-spacing:.06em}

/* Table cells. */
.sub{display:block;margin-top:2px;color:var(--muted);font-size:10px}
.nowrap{white-space:nowrap}
.right{text-align:right}
.data-table th.right,.data-table td.right{text-align:right}
.field.wide{grid-column:1/-1}

/* The bare card the "you have no membership" page sits in. */
.plain-card{max-width:520px;margin:60px auto;padding:32px;background:#fff;
            border:1px solid var(--line);border-top:4px solid var(--gold)}
.plain-card .mark strong{display:block;color:var(--navy);font-size:14px;font-weight:900}
.plain-card .mark span{display:block;margin-top:3px;color:var(--muted);font-size:10px;
                       text-transform:uppercase;letter-spacing:.1em}

/* --------------------------------------------------------------------------
   Revenue sharing.

   Four numbers that are one decision. They used to be four separate settings
   in a long list, each captioned "Awaiting KGF approval" and none of them
   saying what the number was for or that the four had to add up to a hundred.
   -------------------------------------------------------------------------- */
.share-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.share-box{padding:14px;border:1px solid var(--line);background:var(--offwhite)}
.share-box label{display:block;color:var(--navy);font-size:12px;font-weight:800}
.share-box small{display:block;margin-top:3px;min-height:28px;color:var(--muted);font-size:10px;line-height:1.4}
.share-input{position:relative;margin-top:10px}
.share-input input{width:100%;min-height:48px;padding:10px 36px 10px 12px;border:1px solid #ced6e2;border-radius:6px;background:#fff;color:var(--navy);font-size:19px;font-weight:900;text-align:right;outline:0}
.share-input input:focus{border-color:var(--royal);box-shadow:0 0 0 3px rgba(18,87,199,.14)}
.share-input span{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;font-weight:800}
.share-total{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-top:14px;padding:12px 15px;border-left:3px solid #c9d2df;background:var(--offwhite);color:var(--muted);font-size:12px}
.share-total strong{color:var(--navy);font-size:20px;font-weight:900;line-height:1}
.share-total em{font-style:normal;font-weight:800}
.share-total.ok{border-left-color:var(--success);background:#eaf7ef}
.share-total.ok em{color:#125b37}
.share-total.over,.share-total.under{border-left-color:var(--gold-deep);background:#fff8e6}
.share-total.over em,.share-total.under em{color:#624a0b}
@media(max-width:900px){.share-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.share-grid{grid-template-columns:1fr}.share-box small{min-height:0}}

/* --------------------------------------------------------------------------
   The collapse control, out of the way.

   It was a full-width bordered button sitting at the foot of the menu, as
   loud as any destination above it and taking sixty pixels of a sidebar that
   already has to hold nine links. It is a view preference, not a place to go.

   So it is now a small icon in the topbar, beside the page title, where a
   panel toggle belongs — and it keeps working when the sidebar is collapsed,
   which a control living inside the sidebar could not do gracefully. Below
   900px the sidebar is a drawer and there is nothing to collapse, so it goes.
   -------------------------------------------------------------------------- */
.collapse-btn{width:38px;height:38px;color:var(--muted);border-color:var(--line);background:#fff}
.collapse-btn:hover{color:var(--navy);background:var(--offwhite)}
.collapse-btn .icon{width:auto;height:auto;font-size:14px}
.sidebar-collapsed .collapse-btn .icon{transform:scaleX(-1)}
@media(max-width:900px){.collapse-btn{display:none}}

/* --------------------------------------------------------------------------
   Folding nations.

   One country with five districts is a screen and a half of table and two
   forms for adding more. With three or four countries the Jurisdictions page
   becomes something you scroll past rather than read, and all of it is about
   places nobody is currently changing.

   A nation that already has a region folds shut. One that has none does not —
   it is the only thing on the page anybody has to act on.
   -------------------------------------------------------------------------- */
.nation-panel{padding:0;margin-bottom:14px}
.nation-panel>*:not(.nation-summary){padding:0 22px 22px}
.nation-summary{margin:0;padding:20px 22px;cursor:pointer;list-style:none;
                align-items:center;transition:background .15s}
.nation-summary::-webkit-details-marker{display:none}
.nation-summary:hover{background:var(--offwhite)}
.nation-summary:focus-visible{outline:2px solid var(--royal);outline-offset:-2px}
.nation-summary h2{font-size:16px}
.nation-summary p{margin-top:4px}
.nation-chevron{display:inline-block;color:var(--muted);font-size:13px;transition:transform .18s}
.nation-panel[open] .nation-chevron{transform:rotate(180deg)}
.nation-panel[open] .nation-summary{border-bottom:1px solid var(--line)}
@media(prefers-reduced-motion:reduce){.nation-chevron{transition:none}}

/* --------------------------------------------------------------------------
   A yes/no setting.

   Two choices that each say what happens, rather than a text box containing
   the digit 1 with a tick underneath asking whether the fellowship had
   formally agreed to the number one.
   -------------------------------------------------------------------------- */
.switch-choice{display:grid;gap:8px}
.switch-choice .check{padding:11px 13px;border:1px solid var(--line);background:var(--offwhite);
                      border-radius:6px;font-size:11.5px;transition:border-color .12s,background .12s}
.switch-choice .check:hover{border-color:#b9c4d4;background:#fff}
.switch-choice .check b{color:var(--navy);font-size:12px}
.switch-choice .check:has(input:checked){border-color:var(--royal);background:#eef5ff}
.switch-choice input[type=radio]{flex:none;width:16px;height:16px;margin-top:2px;accent-color:var(--royal)}

/* --------------------------------------------------------------------------
   Monthly dues, one table, one Save.

   Nine ranks used to mean nine little forms and nine Save buttons — nine page
   loads for one decision. The rows are now a grid so the boxes line up under
   each other, which is what makes a column of figures readable at all.
   -------------------------------------------------------------------------- */
.dues-table{display:grid;gap:0;margin-bottom:20px}
.dues-row{display:grid;grid-template-columns:1fr 190px;align-items:center;gap:14px;
          padding:9px 0;border-bottom:1px solid var(--line)}
.dues-row:last-child{border-bottom:0}
.dues-row label{color:var(--navy);font-size:12.5px;font-weight:700}
.dues-amount{position:relative}
.dues-amount span{position:absolute;left:12px;top:50%;transform:translateY(-50%);
                  color:var(--muted);font-size:11px;font-weight:800;pointer-events:none}
.dues-amount input{width:100%;min-height:42px;padding:10px 12px 10px 52px;border:1px solid #ced6e2;
                   border-radius:6px;background:#fff;color:var(--navy);font-size:14px;
                   font-weight:700;text-align:right;outline:0}
.dues-amount input:focus{border-color:var(--royal);box-shadow:0 0 0 3px rgba(18,87,199,.14)}
@media(max-width:560px){.dues-row{grid-template-columns:1fr}.dues-row label{margin-bottom:-4px}}

/* --------------------------------------------------------------------------
   Five figures across, where the design's grid assumes four.

   These five are meant to be read as one row — the state of the fellowship at
   a glance. Wrapping the last two onto a second line breaks that: the eye
   reads it as two groups and the row stops being a summary.

   So the row stays five wide, and instead of dropping columns it tightens:
   smaller gap, smaller padding, a figure sized to the space it has. The value
   uses clamp() rather than a stack of breakpoints, so it shrinks smoothly
   between a 1080px laptop and a wide desktop instead of jumping.

   It only gives up below 820px, where five cards would be under 60px wide on
   a phone and the figures unreadable. There the row becomes two, then one.
   -------------------------------------------------------------------------- */
.metrics.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.metrics .metric-meta a{color:var(--blue);font-weight:700}
.metrics .metric-meta a:hover{text-decoration:underline}
/* The "click here" line, on its own line under the figure. Inline, it wrapped
   mid-phrase in a narrow column — "see the" on one line and "breakdown" on
   the next, with a stray separator dot starting a line. */
.metric-meta .meta-link{display:block;margin-top:5px}
/* Long figures — a large money total — step down so they stay on one line.
   Set here as well as in the compact rules below, so a four-across row on a
   narrow laptop gets the same treatment. */
/* --------------------------------------------------------------------------
   The lower half of the dashboard.

   Two panels side by side, but they are not two of a kind: one is a short
   fixed list of five stages, the other is the work — a sentence of
   explanation and something to press on every row. An even split starved the
   one that needed the room.
   -------------------------------------------------------------------------- */
.panel-grid.work-first{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:start}
/* The panel's own action stays on one line — "Open the queue" folded in two
   looked like a mistake rather than a button. */
.panel-grid.work-first .panel-head .btn{white-space:nowrap}
@media(max-width:1200px){.panel-grid.work-first{grid-template-columns:1fr}}

/* Status, then the thing to do about it — kept on one line so a two-word
   action does not fold into a paragraph and stop reading as a button. */
.mini-row .row-actions{display:flex;flex:none;align-items:center;gap:10px}
.mini-row .row-actions .btn{white-space:nowrap}
.btn.small{min-height:34px;padding:8px 14px;font-size:11px}
@media(max-width:560px){
  .mini-row{align-items:flex-start;flex-direction:column;gap:10px}
  .mini-row .row-actions{width:100%;justify-content:space-between}
}

/* The currency, sitting above the figure rather than in front of it. */
/* Sized and spaced so the figure below it lands on the same line as the
   figures in the cards either side. A row of numbers is read across; one of
   them sitting lower than the rest is the thing the eye catches instead of
   the numbers. */
.metric-above{display:block;margin:1px 0 0;color:var(--muted);font-size:10px;line-height:1.3;
              font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.metric-above+.metric-value{margin-top:2px}
.metric-value.long{font-size:23px}
.metric-value.very-long{font-size:19px;letter-spacing:-.02em}
/* A mail server or an email address, not a figure. Small enough to finish
   inside the card, and allowed to wrap rather than run off the edge — a
   hostname cut in half mid-word tells you nothing. */
.metric-value.extra-long{font-size:13px;line-height:1.4;letter-spacing:-.01em;overflow-wrap:anywhere}
.metric-value{overflow-wrap:anywhere}

@media(max-width:1560px){
  .metrics.five{gap:13px}
  .metrics.five .metric-card{min-height:140px;padding:17px 15px}
  /* Never wider than its column, however long the number. */
  .metrics.five .metric-value{margin:13px 0 6px;font-size:clamp(19px,1.72vw,28px);
                              letter-spacing:-.02em;overflow-wrap:anywhere}
  .metrics.five .metric-value.long{font-size:clamp(15px,1.35vw,22px)}
  .metrics.five .metric-value.very-long{font-size:clamp(12.5px,1.14vw,19px);letter-spacing:-.03em}
  .metrics.five .metric-value.extra-long{font-size:clamp(11px,.92vw,14px);letter-spacing:0}
  .metrics.five .metric-label{font-size:10px;letter-spacing:.03em}
  .metrics.five .metric-above{margin-top:1px;font-size:9px}
  .metrics.five .metric-above+.metric-value{margin-top:1px}
  .metrics.five .metric-icon{width:29px;height:29px;font-size:12px}
  .metrics.five .metric-meta{font-size:10px;line-height:1.45}
}

@media(max-width:1180px){
  .metrics.five{gap:10px}
  .metrics.five .metric-card{min-height:132px;padding:15px 13px}
  .metrics.five .metric-label{font-size:9px}
  /* The icon is decoration. At this width the column is better spent on
     the figure and the link under it. */
  .metrics.five .metric-icon{display:none}
  .metrics.five .metric-meta{font-size:9.5px}
}

@media(max-width:820px){.metrics.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.metrics.five{grid-template-columns:1fr}}

/* -------------------------------------------------------------------------
   Setting up, in order.

   Shown only while the platform is not yet usable, so it is allowed to take
   real room on the dashboard. The step to do next is the only one that gets a
   button; the rest are stated quietly so the list reads as a sequence rather
   than as nine equally urgent demands.
   ------------------------------------------------------------------------- */
.setup-panel{border-top-color:var(--gold);margin-bottom:18px}
.setup-panel .progress{margin:0 0 6px}
.setup-steps{list-style:none;counter-reset:setup;margin:14px 0 0;padding:0}
.setup-step{display:flex;align-items:flex-start;gap:13px;padding:14px 0;
  border-bottom:1px solid var(--line)}
.setup-step:last-child{border-bottom:0}
.setup-mark{display:grid;place-items:center;flex:none;width:24px;height:24px;
  border:1px solid var(--line);border-radius:50%;color:var(--muted);font-size:12px;font-weight:900}
.setup-step.done .setup-mark{border-color:var(--success);background:#e8f6ee;color:#17623f}
.setup-step.next .setup-mark{border-color:var(--gold-deep);background:#fff4d8;color:#79530a}
.setup-copy{min-width:0;flex:1}
.setup-copy b{display:block;color:var(--navy);font-size:12.5px}
.setup-copy p{margin:4px 0 0;color:var(--muted);font-size:11.5px}
.setup-copy .btn{margin-top:10px}
.setup-link{display:inline-block;margin-top:8px;color:var(--blue);font-size:11px;font-weight:700}
.setup-state{flex:none;color:var(--muted);font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.setup-step.done{opacity:.62}
.setup-step.done .setup-state{color:var(--success)}
.setup-step.next .setup-state{color:var(--gold-deep)}
@media(max-width:700px){
  .setup-step{flex-wrap:wrap}
  .setup-state{width:100%;padding-left:37px}
  .setup-copy .btn{width:100%}
}

/* -------------------------------------------------------------------------
   The fee schedule.

   Thirteen fees, each divided between four offices, with the arithmetic shown
   beside the figures — somebody editing a share needs to see the moment it
   stops adding up, not find out when the server refuses the save.
   ------------------------------------------------------------------------- */
.fee-table td,.fee-table th{vertical-align:top}
.fee-table tbody tr.fee-editor:hover{background:#fff}
.fee-editor td{background:var(--wash);border-bottom:2px solid var(--line);padding:20px}
.fee-fields{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:14px;margin-bottom:16px}
.fee-fields .field input{text-align:right}
.fee-rate{padding:0 0 20px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.fee-rate .check-item{margin-top:12px}
@media(max-width:900px){.fee-fields{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.fee-fields{grid-template-columns:1fr}.fee-editor td{padding:14px}}

/* -------------------------------------------------------------------------
   Tab sets.

   The .tabs strip itself is the approved design's component and is defined
   above. What follows is only what a strip built at runtime needs: the panels
   it switches between, a count that can sit on a tab, and the room the strip
   needs when there are more tabs than fit.

   The strip sticks under the top bar. On a screen this long the tabs are the
   way back to anywhere else, and a strip that scrolls away leaves somebody
   with no way out but the browser's back button.
   ------------------------------------------------------------------------- */
.tabset > .tabs{position:sticky;z-index:20;top:var(--topbar);margin:0 0 20px;padding:2px 0 0;
  background:var(--offwhite);scrollbar-width:thin}
.tabset > .tabs::-webkit-scrollbar{height:4px}
.tabset > .tabs::-webkit-scrollbar-thumb{background:#c9d2df}

/* A crowded strip wraps rather than scrolling sideways.
   Site Media has one tab per page of the website — twenty-seven of them — and
   a strip that scrolled horizontally would have replaced a long scroll down
   with a long scroll across. Three readable rows beat one hidden queue. The
   script sets this when there are more tabs than sit comfortably on a line. */
.tabset > .tabs.many{flex-wrap:wrap;overflow:visible;gap:2px 4px;padding-bottom:2px}
.tabset > .tabs.many .tab{min-height:36px;padding:6px 11px;font-size:10.5px}
.tabpanel:focus{outline:none}
.tabpanel[hidden]{display:none}
.tab{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.tab:hover{color:var(--navy)}
.tab:focus-visible{outline:2px solid var(--royal);outline-offset:-2px}
.tab-badge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 6px;
  border-radius:999px;background:#e6ecf5;color:#46546a;font-size:9.5px;font-weight:900}
.tab.active .tab-badge{background:var(--royal);color:#fff}

/* A panel's first heading repeats what the tab already says. The panels keep
   their headings for the no-JavaScript case, where there is no tab strip to
   read, and lose the top margin here so the panel does not start with a gap. */
.tabpanel > *:first-child{margin-top:0}

@media(max-width:900px){
  .tabset > .tabs{top:0}
}

/* The official seal, where the drawn KGF box used to be. It is an image now,
   so the border and the letter-spacing that made the old mark must not apply.
   The drop shadow separates the gold rim from the navy sidebar behind it. */
.brand-mark.brand-seal{border:0;background:none;width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.paper-head .brand-mark.brand-seal{border:0;filter:none}
@media print{.brand-mark.brand-seal{filter:none}}
