/* County personnel directory: parchment on olive. */
.roster-page { background:#242d1e; }
.roster-page .content-wrap { width:min(1180px,92%); margin:34px auto 46px; --text:#332e23; --muted:#6b5e47; --accent:#475337; --line:#b29a75; --panel:#cbb99a; --panel-2:#deceb0; }
.roster-page .section-head { max-width:850px; margin:0 auto 24px !important; }
.roster-page .section-head h1 { color:#ece3c2; font-size:clamp(2.1rem,4vw,3.1rem); margin:10px 0 12px; }
.roster-page .section-head .kicker { color:#c8ae7e; letter-spacing:3px; }
.roster-page .section-head p { color:#d1c5a6; margin:0; }
.roster-page .toolbar { padding:16px; gap:8px; background:#cbb99a; border:1px solid #b29a75; border-radius:6px; margin-bottom:20px; }
.roster-page .search-grow { flex:1; min-width:230px; }
.roster-page .input { background:#e0d1b5; }
.roster-page .filter-chip { background:#ddccac; color:#37422c; border-color:#a78f68; font-size:.76rem; padding:8px 12px; }
.roster-page .filter-chip.is-active { background:#475337; color:#f0e5c9; border-color:#475337; }
.roster-page .toolbar .cta-button { padding:9px 12px; font-size:.76rem; }
.roster-page .dept { border-radius:6px; margin-bottom:14px; background:linear-gradient(105deg,#d4c29f,#cbb99a); box-shadow:0 4px 14px #0002; }
.roster-page .dept-head { padding:16px 22px; }
.roster-page .dept-head:hover { background:#dccbaa; }
.roster-page .dept-head:focus-visible { outline:2px solid #475337; outline-offset:-4px; }
.roster-page .dept-name { font-family:'Crimson Text',Georgia,serif; font-size:1.5rem; color:#39452f; font-weight:600; }
.roster-page .dept-sub { color:#6b5e47; }
.roster-page .dept-icon { background:#475337; color:#f0e1bd; border-radius:5px; }
.roster-page .dept-right { color:#475337; }
.roster-page .dept-right .badge { background:#475337; color:#f1e5c9; padding:4px 12px; }
.roster-page .dept-body { border-top:1px solid #af966e; padding:0 22px 22px; }
.roster-page .rank-title { color:#475337; }
.roster-page .member { background:#e0d1b3; color:#332e23; border-color:#b59d77; border-radius:5px; padding:16px; }
.roster-page .m-name { color:#37422c; font-family:'Crimson Text',Georgia,serif; font-size:1.3rem; }
.roster-page .m-rank, .roster-page .m-field-label { color:#716146; }
.roster-page .m-field-value { color:#332e23; }
.roster-page .m-status.active { background:#4753371a; color:#36572c; }
.roster-page .m-status.loa { background:#ac781922; color:#785311; }
.roster-page .m-status.inactive { background:#a1483320; color:#853c2e; }
.roster-page .license-pill { background:#47533714; color:#475337; border-color:#a7916c; }
.roster-page > main > .content-wrap > .state-msg { color:#ece3c2; }
.roster-page footer { margin-top:0; }
@media(max-width:650px){
 .roster-page .content-wrap { width:94%; margin-top:24px; }
 .roster-page .search-grow { flex-basis:100%; min-width:0; }
 .roster-page .toolbar { padding:12px; }
 .roster-page .dept-head { padding:14px; }
 .roster-page .dept-left { gap:10px; }
 .roster-page .dept-name { font-size:1.2rem; }
 .roster-page .dept-sub { font-size:.8rem; }
 .roster-page .dept-icon { flex-shrink:0; width:38px; height:38px; }
 .roster-page .dept-body { padding:0 12px 14px; }
 .roster-page .members { grid-template-columns:1fr; }
}

.roster-page .department-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.roster-page .department-card { display:flex; flex-direction:column; color:#37422c; background:linear-gradient(120deg,#d7c5a4,#cbb99a); border:1px solid #b29a75; border-radius:6px; padding:26px; text-decoration:none; box-shadow:0 5px 16px #0002; transition:transform .15s,background .15s; }
.roster-page .department-card:hover { transform:translateY(-3px); background:#dfcdab; }
.roster-page .department-card:focus-visible { outline:3px solid #d4b579; outline-offset:4px; }
.roster-page .department-seal { width:58px; height:58px; border:2px solid #64704e; outline:1px solid #64704e; outline-offset:3px; border-radius:50%; display:grid; place-items:center; font-family:'Cinzel',Georgia,serif; font-size:.85rem; margin:4px 0 22px; }
.roster-page .department-card h2 { font-family:'Crimson Text',Georgia,serif; font-size:1.65rem; color:#37422c; margin:0 0 8px; }
.roster-page .department-card p { color:#6b5e47; margin:0 0 26px; }
.roster-page .department-card-bottom { margin-top:auto; padding-top:15px; border-top:1px solid #ad9570; display:flex; justify-content:space-between; gap:12px; font-size:.85rem; }
.roster-page .department-card-bottom span:last-child { font-weight:600; }
.roster-page .roster-back .cta-button { color:#ece3c2; border-color:#a99670; }
.roster-page [hidden] { display:none !important; }
@media(max-width:950px){.roster-page .department-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.roster-page .department-grid{grid-template-columns:1fr;} .roster-page .department-card{padding:22px;}}

/* Compact department directory cards. */
.roster-page .department-grid { gap:14px; }
.roster-page .department-card { padding:18px 20px; }
.roster-page .department-seal { width:40px; height:40px; font-size:.65rem; margin:2px 0 14px; outline-offset:2px; }
.roster-page .department-card h2 { font-size:1.35rem; margin-bottom:5px; }
.roster-page .department-card p { font-size:.9rem; line-height:1.4; margin-bottom:14px; }
.roster-page .department-card-bottom { padding-top:10px; font-size:.78rem; gap:8px; }
.roster-page .section-head h1 { font-size:clamp(1.9rem,3.5vw,2.6rem); }
.roster-page .content-wrap { margin-top:24px; }

/* Photo directory based on the approved reference. */
.roster-page { background:linear-gradient(#1f2b20ed,#1f2b20d9),url('/assets/img/frontier-hero.jpg') center bottom / cover fixed; }
.roster-page .content-wrap { width:min(1180px,92%); margin:20px auto 30px; }
.roster-page .section-head { margin-bottom:16px !important; }
.roster-page .section-head .kicker { display:flex; gap:14px; align-items:center; justify-content:center; font-size:.75rem; letter-spacing:2px; }
.roster-page .section-head .kicker:before,.roster-page .section-head .kicker:after { content:''; width:60px; height:1px; background:#a88b51; }
.roster-page .section-head h1 { font-size:clamp(2rem,3.6vw,2.8rem); margin:6px 0; }
.roster-page .section-head h1:after { content:'❧'; display:block; color:#b2995c; font-size:1.1rem; line-height:1; margin:4px 0 8px; }
.roster-page .section-head p { font-size:1rem; }
.roster-page .toolbar { max-width:920px; margin:0 auto 20px; padding:10px; }
.roster-page .department-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.roster-page .department-card { box-sizing:border-box; width:calc((100% - 32px)/3); padding:0; overflow:hidden; border:1px solid #b69a59; border-radius:3px; background:radial-gradient(ellipse at top,#efdfbc44,transparent 70%),#d3bd95; }
.roster-page .department-photo { display:block; width:100%; height:112px; object-fit:cover; filter:sepia(.7) saturate(.6); border-bottom:1px solid #b69a59; }
.roster-page .department-card-copy { padding:12px 18px 14px; display:flex; flex-direction:column; flex:1; text-align:center; }
.roster-page .department-card h2 { font-size:1.4rem; margin:0; }
.roster-page .department-ornament { display:flex; align-items:center; gap:8px; justify-content:center; color:#69704d; font-size:1rem; height:18px; }
.roster-page .department-ornament:before,.roster-page .department-ornament:after { content:''; height:1px; width:35%; background:#b39b6d; }
.roster-page .department-card p { line-height:1.35; font-size:.9rem; margin:4px 0 16px; }
.roster-page .department-card-bottom { text-align:left; font-size:.82rem; border-top:0; padding-top:0; }
.roster-page .department-card:hover { background:#dfcba7; }
@media(max-width:950px){.roster-page .department-card{width:calc((100% - 16px)/2);}}
@media(max-width:600px){.roster-page .department-card{width:100%;} .roster-page .department-photo{height:135px;}}