/* ── TOKENS ── */
 :root{
     --blue:#003764;
     --mid:#1B6DBE;
     --light:#E8F2FB;
     --gold:#FFD200;
     --dark:#1a1a1a;
     --gray:#595959;
    /* 7:1 on white — AAA */
     --bg:#f4f6f9;
     --white:#fff;
     --border:#c8d4e3;
     --radius:10px;
     --shadow:0 2px 12px rgba(0,55,100,.12);
     --focus:0 0 0 3px var(--gold);
}
/* ── RESET ── */
 *{
    box-sizing:border-box;
    margin:0;
    padding:0
}

 #main {
     padding-top: 0 !important;
     margin-top: 0 !important;
}
 .container {
     padding-right: 0px !important;
     padding-left: 0px !important;
     margin-right: 0 !important;
     margin-left: 0 !important;
     max-width: 100%;
}
/* ── SKIP NAV (WCAG 2.4.1) ── */
 .skip-link{
     position:absolute;
    left:-9999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden 
}
 .skip-link:focus{
     position:fixed;
    top:0;
    left:0;
    width:auto;
    height:auto;
     background:var(--gold);
    color:var(--blue);
     font-weight:700;
    padding:.75rem 1.25rem;
     z-index:9999;
    text-decoration:none;
    border-radius:0 0 6px 0 
}
/* ── HEADER ── */
 .site-hdr{
    background:var(--blue);
    color:#fff
}
 .hdr-top{
     padding:.875rem 1.5rem;
    display:flex;
    align-items:center;
     gap:.75rem;
    border-bottom:4px solid var(--gold) 
}
 .uci-badge{
     width:46px;
    height:46px;
    background:var(--gold);
    border-radius:50%;
     display:flex;
    align-items:center;
    justify-content:center;
     font-weight:900;
    font-size:1rem;
    color:var(--blue);
    flex-shrink:0 
}
 .hdr-name{
    font-size:1.2rem;
    font-weight:700
}
 .hdr-sub{
     font-size:.7rem;
    opacity:.8;
    text-transform:uppercase;
    letter-spacing:.06em 
}
 .hdr-nav{
    background:#00274d;
    display:flex;
    flex-wrap:wrap;
    padding:0 1.5rem
}
 .hdr-nav a{
     color:rgba(255,255,255,.85);
    text-decoration:none;
     padding:.625rem .875rem;
    font-size:.85rem;
    transition:background .2s 
}
 .hdr-nav a:hover, .hdr-nav a[aria-current="page"]{
     background:var(--mid);
    color:#fff 
}
 .hdr-nav a:focus-visible{
    outline:none;
    box-shadow:var(--focus)
}
/* ── QUICK BAR ── */
 .qbar{
     background:#00274d;
    padding:.625rem 1.5rem;
     display:flex;
    gap:.5rem;
    flex-wrap:wrap;
    align-items:center;
     border-top:1px solid rgba(255,255,255,.12) 
}
 .qbar-lbl{
     color:var(--gold);
    font-weight:700;
    font-size:.7rem;
     text-transform:uppercase;
    letter-spacing:.05em;
    flex-shrink:0 
}
 .qbar a{
     color:#fff;
    text-decoration:none;
    font-size:.75rem;
     padding:.25rem .75rem;
    border:1px solid rgba(255,255,255,.35);
     border-radius:20px;
    transition:background .2s 
}
 .qbar a:hover{
    background:rgba(255,255,255,.15)
}
 .qbar a:focus-visible{
    outline:none;
    box-shadow:var(--focus)
}
/* ── HERO ── */
 .hero{
    background:linear-gradient(135deg,var(--blue) 0%,#1B5BA0 100%);
    color:#fff;
    padding: 45px 24px 42px;
    text-align:center 
}
 .hero-pill{
     display:inline-block;
    background:var(--gold);
    color:var(--blue);
    padding:.25rem .875rem;
     border-radius:20px;
    letter-spacing:.08em;
    text-transform:uppercase;
     margin-bottom: 16px; 
     font-weight: 700;
    font-size: .7rem;
}
.hero h1{
    margin-bottom: 1rem;
    color: #fff !important
}
.hero p{
    opacity:.92;
    max-width:600px;
    margin:0 auto
}

#jumplinks {
    color: white;
}

/* ── WRAPPER ── */
.wrap {
    margin: 0 auto;
    padding: 0 22px;
}
/* ── ROLE FILTER ── */
.role-bar{
    background:var(--white);
    border-bottom:3px solid var(--gold);
    padding: 42px 0 
}
 .role-bar h2{
     text-align:center;
    color:var(--blue);
    margin-bottom:.25rem 
}
 .role-sub{
     text-align:center;
    color:var(--gray);
    margin-bottom:1.125rem 
}
 .role-btns{
    display:flex;
    gap:.75rem;
    justify-content:center;
    flex-wrap: wrap;
}
 .role-btn{
    background:var(--light);
    border:2px solid var(--border);
    border-radius:.75rem;
    padding:.875rem 1rem;
    width: 200px;
    cursor:pointer;
    transition:all .2s;
    text-align:center;
    font-family:inherit 
}
 .role-btn:hover{
     border-color:var(--mid);
    background:#cde0f4;
    transform:translateY(-2px) 
}
 .role-btn[aria-pressed="true"]{
     border-color:var(--blue);
    background:var(--blue);
    color:var(--white) 
}
 .role-btn[aria-pressed="true"] .rb-desc{
    color:rgba(255,255,255,.8)
}
 .role-btn:focus-visible{
    outline:none;
    box-shadow:var(--focus)
}
 .rb-icon{
    display:block;
    margin-bottom:.375rem;
    font-size: 1.6rem;
}
 .rb-name{
    color:inherit;
    display:block
}
 .rb-desc{
    color:var(--gray);
    display:block
}
/* ── ROLE PANEL ── */
 .role-panel{
     /*background:var(--light);*/
    /*border-left:4px solid var(--blue);*/
     border-radius:0 var(--radius) var(--radius) 0;
     /*padding:1rem 1.25rem;*/
    margin-bottom:1.5rem;
     /*display:none */
}
 .role-panel.visible{
    display:block
}
 .role-panel h3{
     /*font-size:1rem;*/
    color:var(--blue);
    margin-bottom:.625rem;
     display:flex;
    align-items:center;
    gap:.5rem 
}

#roleArea {
    margin: auto;
    flex-wrap: wrap;
}

#allPanels {
    max-width: 400px;
    margin-left: auto;
    margin-top: 30px;
    margin-right: auto;
}
}

 .rp-links{
    display:flex;
    flex-wrap:wrap;
    flex-direction: column;
    gap:.375rem .75rem;
    list-style:none;
    padding:0 
}
 .rp-links li::before{
    content:none
}
 .rp-links a{
     color:var(--mid);
    text-decoration:none;
     display:inline-flex;
    align-items:center;
    gap:.25rem 
}
 .rp-links a::before{
    content:'›';
    font-weight:bold
}
 .rp-links a:hover{
    text-decoration:underline
}
 .rp-links a:focus-visible{
    outline:none;
    box-shadow:var(--focus);
    border-radius:3px
}
/* ── MAIN ── */
 .main{
    padding:2rem 0
}
 .notice{
     background:#fffbe6;
    border-left:4px solid var(--gold);
     padding:.75rem 1rem;
    border-radius:4px;
    color:#4a3500;
    margin-bottom:1.5rem 
}
/* legend */
 .legend{
     display:flex;
    gap:.625rem;
    flex-wrap:wrap;
     margin-bottom:1.375rem;
    align-items:center;
    color:var(--gray) 
}
 .legend strong{
    margin-right:.25rem
}
 .tag{
     display:inline-block;
     padding:.15rem .5rem;
    border-radius:10px;
     text-transform:uppercase;
    letter-spacing:.04em;
    white-space:nowrap 
}
 .t-ok {
    background:#f0f0f0;
    color:#333;
    border:1px solid #bbb
}
 .t-mg {
    background:#fff3cd;
    color:#6b4a00;
    border:1px solid #f5c518
}
 .t-rn {
    background:#e8f2fb;
    color:#0a4a80;
    border:1px solid #8bb8e8
}
 .t-nw {
    background:#e4f8ec;
    color:#145c30;
    border:1px solid #7dcc9c
}
/* ── SECTIONS ── */
 .section{
    margin-bottom:2rem
}
 .sec-hdr{
    display:flex;
    align-items:center;
    gap:.625rem;
    margin-bottom:.375rem
}
 .sec-num{
     background:var(--blue);
    color:#fff;
     width:28px;
    height:28px;
    border-radius:50%;
     display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0 
}
 .sec-title{
    color:var(--blue)
}
 .sec-desc{
    color:var(--gray);
    margin:.25rem 0 .875rem 2.375rem
}
 .sec-div{
    border:none;
    border-top:2px solid var(--border);
    margin-bottom:1.125rem
}
/* ── CARD GRID ── */
 .grid{
     display:grid;
     grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
     gap:.875rem 
}
 .card{
     background:var(--white);
    border-radius:var(--radius);
     border:1px solid var(--border);
    padding:1rem;
     transition:box-shadow .2s,border-color .2s;
     display:flex;
    flex-direction:column 
}

#tableCard {
    grid-column: span 2;
}

 .card:hover{
    box-shadow:var(--shadow);
    border-color:var(--mid)
}
 .card-ico{
    font-size:1.25rem;
    margin-bottom:.5rem
}
 .card h3 {
    margin-bottom:.375rem;
    display:flex;
    align-items:flex-start;
    gap:.375rem;
    flex-wrap:wrap 
}
 .card-desc{
    color:var(--gray);
    margin-bottom:.625rem;
    flex:1
}
/* primary links */
 .card-links{
    border-top:1px solid var(--border);
    padding-top:.625rem
}
 .card-links a{
     display:flex;
    align-items:center;
    gap:.25rem;
     color:var(--mid);
    text-decoration:none;
    padding:.2rem 0 
}
 .card-links a:hover{
    text-decoration:underline
}
 .card-links a:focus-visible{
    outline:none;
    box-shadow:var(--focus);
    border-radius:3px
}
 .card-links a::before{
    content:'›';
}
/* accordion "more" */
 .more-btn{
    background:none;
    border:none;
    cursor:pointer;
    color:var(--mid);
    padding:.375rem 0 0;
    display:flex;
    align-items:center;
    gap:.25rem;
    text-decoration:underline;
    transition:color .2s 
}
 .more-btn:hover{
    color:var(--blue)
}
 .more-btn:focus-visible{
    outline:none;
    box-shadow:var(--focus);
    border-radius:3px
}
 .more-btn .chevron{
     display:inline-block;
    transition:transform .25s;
    font-style:normal;
}
 .more-btn[aria-expanded="true"] .chevron{
    transform:rotate(180deg)
}
 .more-links{
     display:none;
    padding-top:.375rem;
     border-top:1px dashed var(--border);
    margin-top:.375rem 
}
 .more-links.open{
    display:block
}
 .more-links a{
     display:flex;
    align-items:center;
    gap:.25rem;
     color:var(--mid);
    padding:.15rem 0 
}
 .more-links a:hover{
    color:var(--blue);
    text-decoration:underline
}
 .more-links a:focus-visible{
    outline:none;
    box-shadow:var(--focus);
    border-radius:3px
}
 .more-links a::before{
    content:'–';
    margin-right:.15rem
}
/* ── CONTACT TABLE ── */
 .contact-tbl-wrap{
    overflow-x:auto;
    margin-top:.625rem
}
 table{
    border-collapse: collapse;
    width:100%;
}
 caption{
    color:var(--gray);
     text-align:left;
    margin-bottom:.375rem 
}
 th{
     background:var(--blue);
    color:#fff;
     padding:.5rem .75rem;
    text-align:left;
    font-weight:600 
}
 td{
     padding:.5rem .75rem;
     border-bottom:1px solid var(--border);
     vertical-align:top 
}
 tr:nth-child(even) td{
    background:#f0f4f9
}
 td a{
    color:var(--mid)
}
 td a:focus-visible{
    outline:none;
    box-shadow:var(--focus);
    border-radius:3px
}
/* ── FOOTER ── */
 .ftr{
     background:#00274d;
    color:rgba(255,255,255,.7);
     padding:1.125rem 1.5rem;
    font-size:.75rem;
    text-align:center 
}
 .ftr a{
    color:var(--gold);
    text-decoration:none
}
 .ftr a:focus-visible{
    outline:none;
    box-shadow:var(--focus);
    border-radius:3px
}
/* ── RESPONSIVE ── */
 @media(max-width:420px){
     .role-btns{
        flex-direction:column;
        align-items:center
    }
     .grid{
        grid-template-columns:1fr
    }
     .hero h1{
        font-size:1.35rem
    }
     .rp-links{
        flex-direction:column
    }
}
 @media(max-width:640px){
     .grid{
        grid-template-columns:1fr
    }
}

@media (min-width: 576px) {
    .wrap {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .wrap {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .wrap {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .wrap {
        max-width: 1140px;
    }
}