/* Dedicated SASPR personnel directory */
.directory-main{max-width:1440px;margin:0 auto;padding:70px 6vw 110px;min-height:75vh}
.directory-hero{padding:35px 0 30px;border-bottom:1px solid #ffffff25}
.directory-eyebrow,.directory-rule,.directory-card-top,.directory-card-bottom{display:flex;justify-content:space-between;align-items:center;letter-spacing:2px;font-size:9px;color:#9cac98}
.directory-eyebrow{justify-content:flex-start;gap:12px;color:var(--lime)}
.directory-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.directory-hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding:35px 0}
.directory-hero h1{font-size:clamp(48px,8vw,100px);line-height:.9;letter-spacing:-5px;margin:0;font-weight:800}
.directory-hero h1 em{font-family:'Playfair Display',serif;color:var(--lime);font-weight:600}
.directory-hero p{max-width:560px;color:#a9b7a7;line-height:1.8;font-size:14px;margin:24px 0 0}
.directory-counter{border-left:1px solid #ffffff28;padding:10px 0 10px 28px;min-width:160px}
.directory-counter strong{display:block;font-size:46px;color:var(--lime);font-weight:500}
.directory-counter span{font-size:8px;letter-spacing:1.7px;color:#93a18e}
.directory-rule{padding-top:15px}
.directory-tools{padding:28px 0 20px}
.member-search{display:flex;align-items:center;gap:15px;background:#14271d;border:1px solid #ffffff26;padding:0 18px;height:60px;transition:.25s}
.member-search:focus-within{border-color:#b5d48a;box-shadow:0 0 0 3px #b5d48a12,0 10px 35px #0003}
.member-search>span{font-size:28px;color:var(--lime)}
.member-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#f3f3e9;font:inherit;font-size:14px}
.member-search input::placeholder{color:#7f907f}
.member-search kbd{font-size:8px;letter-spacing:2px;color:#8c9a88}
.filter-row{display:flex;align-items:flex-start;gap:22px;padding:22px 0 18px;border-bottom:1px solid #ffffff1b}
.filter-label{font-size:9px;letter-spacing:1.5px;color:#9cac98;white-space:nowrap;padding-top:10px}
.tag-filters{display:flex;flex-wrap:wrap;gap:8px}
.filter-chip{border:1px solid #ffffff25;background:#122319;color:#aab6a6;padding:9px 12px;font-size:9px;letter-spacing:.8px;cursor:pointer;transition:.22s}
.filter-chip:hover,.filter-chip.selected{border-color:var(--lime);color:var(--lime);background:#b5d48a12;box-shadow:0 0 16px #b5d48a15}
.directory-results{display:flex;justify-content:space-between;align-items:center;padding:16px 0;color:#82927f;font-size:9px;letter-spacing:1.5px}
.directory-results button{background:none;border:0;color:var(--lime);font-size:9px;letter-spacing:1.3px;cursor:pointer}
.members-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.directory-card{position:relative;min-width:0;background:linear-gradient(145deg,#1a3023,#101e16 75%);border:1px solid #ffffff20;overflow:hidden;cursor:pointer;transition:transform .35s,border-color .35s,box-shadow .35s;animation:memberReveal .55s both}
.directory-card:hover,.directory-card:focus-visible{transform:translateY(-7px);border-color:#c0dc91;box-shadow:0 20px 55px #0008,0 0 25px #b5d48a1b;outline:0}
.directory-card:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,#b5d48a,transparent);opacity:0;transition:.3s;z-index:2}
.directory-card:hover:before{opacity:1}
.directory-card.saspr-member{border-color:#8ebc62a8;box-shadow:inset 0 0 28px #91c65c0c}
.directory-card.saspr-member:hover{box-shadow:0 20px 55px #0008,0 0 28px #9dd66b36}
.directory-card-top{padding:13px 15px;font-size:8px}
.directory-card.saspr-member .directory-card-top:first-child{color:var(--lime)}
.directory-index{color:#d4e3c9}
.member-visuals{display:grid;grid-template-columns:1fr 1fr;gap:3px;height:225px;background:#0a160f}
.member-visuals:has(.member-dog){grid-template-columns:1fr 1fr}
.member-officer,.member-dog{position:relative;min-width:0;overflow:hidden}
.member-officer:only-child{grid-column:1/-1}
.member-officer img,.member-dog img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.78);transition:transform .7s,filter .4s}
.directory-card:hover img{transform:scale(1.06);filter:saturate(1)}
.member-officer:after,.member-dog:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#07120cdd)}
.member-officer>span,.member-dog>span{position:absolute;z-index:1;bottom:10px;left:12px;font-size:8px;letter-spacing:1.5px;color:#e4efdb}
.directory-card-info{padding:19px 18px 0}
.member-role{color:#9cad91;font-size:9px;letter-spacing:1.8px;text-transform:uppercase}
.directory-card-info h3{font-size:22px;margin:8px 0 13px;font-weight:600}
.member-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 17px}
.member-tag{display:inline-flex;align-items:center;border:1px solid #ffffff22;background:#ffffff08;color:#bdc9b7;padding:5px 8px;font-size:8px;letter-spacing:.5px}
.member-tag.saspr-tag{border-color:#9ed36b99;color:#d2f3a8;background:#a6d87512;box-shadow:0 0 12px #9ed36b13}
.directory-card-bottom{border-top:1px solid #ffffff18;padding:13px 0;margin-top:4px;font-size:8px}
.directory-card-bottom b{font-size:16px;color:var(--lime)}
.directory-empty,.directory-loading{grid-column:1/-1;text-align:center;padding:75px 20px;border:1px dashed #ffffff25;color:#9baa96}
.directory-empty>span{font-size:34px;color:var(--lime)}
.directory-empty h3{color:#e8eee2;font-size:22px}
.directory-footer{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:24px 6vw;border-top:1px solid #ffffff20;color:#81907d;font-size:8px;letter-spacing:1.3px}
.directory-footer a{color:var(--lime)}
@keyframes memberReveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.members-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.directory-main{padding-left:4vw;padding-right:4vw}}
@media(max-width:620px){.topbar nav{display:none}.directory-main{padding:42px 18px 75px}.directory-hero-row{align-items:flex-start;flex-direction:column}.directory-counter{border-left:0;border-top:1px solid #ffffff28;padding:14px 0 0}.directory-hero h1{letter-spacing:-3px}.filter-row{flex-direction:column;gap:12px}.members-grid{grid-template-columns:1fr}.member-visuals{height:260px}.directory-footer{padding:22px 18px}.directory-footer span:nth-child(2){display:none}}

#profileModal .modal-card{width:min(820px,100%);max-height:88vh;overflow:auto;border-radius:8px;box-shadow:0 28px 90px #000b}
#profileModal .modal-close{position:absolute;top:12px;right:15px;z-index:5;border:0;background:transparent;color:#eef5e8;font-size:30px;cursor:pointer}


/* Subtle marriage profile announcement */
.marriage-announcement{display:flex;align-items:center;gap:13px;margin:22px 0 4px;padding:15px 16px;border:1px solid #d98ab455;background:linear-gradient(115deg,#d98ab416,#ffffff04);border-radius:10px;box-shadow:inset 3px 0 0 #d98ab4,0 8px 24px #0002}
.marriage-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;color:#f2b4cf;background:#d98ab426;border:1px solid #d98ab477;font-size:19px}
.marriage-announcement div{display:flex;flex-direction:column;gap:4px;min-width:0}
.marriage-announcement small{font-size:8px;letter-spacing:1.8px;color:#d99ab8}
.marriage-announcement strong{font-size:14px;color:#f5dce8;font-weight:600}
.marriage-announcement div span{font-size:10px;color:#a99aa3}


/* Marriage announcement + linked two-person personnel display */
.marriage-emblem{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;color:#efb2d0;background:radial-gradient(circle,#e99bc52a,#e99bc50b 70%);border:1px solid #e99bc577;border-radius:13px;box-shadow:0 0 22px #e99bc522}
.marriage-emblem svg{width:38px;height:30px;filter:drop-shadow(0 0 5px #e99bc555)}
.spouse-open{display:inline;padding:0;border:0;border-bottom:1px solid #e9a5c6;background:transparent;color:#ffd4e7;font:inherit;font-weight:700;cursor:pointer;transition:.2s}
.spouse-open:hover{color:#fff; text-shadow:0 0 12px #f09bc5}
.couple-view{padding:32px 28px 26px;background:radial-gradient(ellipse at 50% 45%,#bd6d9518,transparent 55%)}
.couple-heading{text-align:center;margin:4px auto 30px}
.couple-heading>span{font-size:8px;letter-spacing:2.2px;color:#d9a0ba}
.couple-heading h2{font-size:clamp(27px,5vw,42px);margin:10px 0 8px;color:#f0f3e9}
.couple-heading h2 em{font-family:Georgia,serif;font-weight:500;color:#e9a4c5}
.couple-heading p{margin:0;color:#9ba99a;font-size:12px}
.couple-stage{display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);align-items:center;gap:0;max-width:720px;margin:0 auto}
.couple-person{min-width:0;overflow:hidden;border:1px solid #e8a2c555;background:linear-gradient(145deg,#1c3025,#101b15);box-shadow:0 15px 35px #0006;position:relative}
.couple-left{border-radius:12px 0 0 12px;border-right:0}
.couple-right{border-radius:0 12px 12px 0;border-left:0}
.couple-photo{height:clamp(150px,24vw,260px);background:#0a130e;overflow:hidden}
.couple-photo img{width:100%;height:100%;display:block;object-fit:cover}
.couple-photo>span{height:100%;display:grid;place-items:center;color:#d7e8cb;font-size:54px}
.couple-copy{display:flex;flex-direction:column;gap:5px;padding:14px 15px 17px}
.couple-copy small{font-size:8px;letter-spacing:1.7px;color:#e4a4c3}
.couple-copy strong{font-size:clamp(13px,2vw,19px);color:#f2f2e9;overflow-wrap:anywhere}
.couple-copy>span{font-size:10px;color:#9eaa9b}
.couple-bow{z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 -2px;filter:drop-shadow(0 0 12px #ec9fc8a8)}
.couple-bow svg{width:100px;max-width:100%;height:auto;overflow:visible}
.couple-bow span{margin-top:-2px;font-size:7px;letter-spacing:1.5px;color:#f4c6dc;text-shadow:0 0 9px #e98bb8}
.couple-footer{display:flex;align-items:center;justify-content:center;gap:9px;margin:24px 0 18px;color:#b3c0ae;font-size:8px;letter-spacing:1.3px;text-align:center}
.couple-pulse{width:6px;height:6px;border-radius:50%;background:#e8a2c5;box-shadow:0 0 12px #e8a2c5}
.couple-back{display:block;margin:0 auto;border:1px solid #e5a1c455;background:#e5a1c510;color:#f0c5d9;padding:10px 17px;font-size:9px;letter-spacing:1px;cursor:pointer}
.couple-back:hover{background:#e5a1c522;border-color:#e5a1c5}
@media(max-width:560px){
 .couple-view{padding:28px 12px 22px}
 .couple-stage{grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr)}
 .couple-bow svg{width:68px}
 .couple-photo{height:155px}
 .couple-copy{padding:10px 8px 12px}
 .couple-copy strong{font-size:12px}
 .couple-copy>span{font-size:9px}
 .couple-footer{font-size:7px;line-height:1.6}
}


/* Interactive six-tap jeweled egg above the marriage bow */
.couple-stage{position:relative;overflow:visible}
.couple-bow-zone{position:absolute;z-index:5;left:50%;top:-112px;transform:translateX(-50%);width:112px;height:118px;display:grid;place-items:center;pointer-events:none}
.marriage-egg{position:relative;width:74px;height:94px;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto;filter:drop-shadow(0 5px 10px #e45a9a55);transition:filter .25s,transform .25s;animation:eggFloat 3.2s ease-in-out infinite}
.marriage-egg svg{width:100%;height:100%;overflow:visible}
.marriage-egg .egg-cracks path{opacity:0;transition:opacity .18s,stroke-width .18s}
.marriage-egg:hover{filter:drop-shadow(0 0 10px #ff8bc7) drop-shadow(0 0 20px #ed65ad88);transform:scale(1.06)}
.marriage-egg:focus-visible{outline:2px solid #ffc2df;outline-offset:5px;border-radius:50%}
.egg-tap-count{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);white-space:nowrap;border:1px solid #f6b4d455;border-radius:20px;padding:3px 8px;background:#21121dcc;color:#ffd8eb;font:700 8px/1 Arial,sans-serif;letter-spacing:1px;box-shadow:0 0 12px #f27eb455}
.egg-shake{animation:eggShake .42s ease}
.egg-broken{animation:eggPop .35s ease forwards;pointer-events:none}
.egg-broken svg{opacity:0;transform:scale(1.25);transition:opacity .22s,transform .22s}
.egg-broken .egg-tap-count{opacity:0}
.egg-heart-burst{position:absolute;left:50%;top:48%;width:1px;height:1px;pointer-events:none;z-index:8}
.heart-particle{position:absolute;left:0;top:0;width:20px;height:18px;opacity:0;animation:heartScatter 1.65s cubic-bezier(.15,.7,.25,1) var(--delay,0ms) forwards;filter:drop-shadow(0 0 5px #ff75b8)}
.heart-particle svg{width:100%;height:100%;overflow:visible}
.heart-particle svg defs{display:block}
@keyframes eggFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes eggShake{0%,100%{transform:rotate(0) scale(1)}18%{transform:rotate(-11deg) scale(1.05)}38%{transform:rotate(10deg) scale(1.04)}58%{transform:rotate(-7deg)}78%{transform:rotate(5deg)}}
@keyframes eggPop{0%{transform:scale(1)}55%{transform:scale(1.22)}100%{transform:scale(.75);opacity:0}}
@keyframes heartScatter{0%{opacity:0;transform:translate(0,0) scale(.25) rotate(0)}12%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--rot))}}
@media(max-width:560px){.couple-bow-zone{top:-102px;transform:translateX(-50%) scale(.86)}}
@media(prefers-reduced-motion:reduce){.marriage-egg{animation:none}.egg-shake,.egg-broken,.heart-particle{animation-duration:.01ms!important}.marriage-egg,.marriage-egg svg{transition:none}}

/* Agency identity card outlines */
.directory-card.agency-bcso{border:2px solid #d5a52f;box-shadow:0 0 0 1px #d5a52f22,0 12px 28px #0002}.directory-card.agency-warden{border:2px solid #176b3a;box-shadow:0 0 0 1px #176b3a22,0 12px 28px #0002}.directory-card.agency-lspd{border:2px solid #347fc4;box-shadow:0 0 0 1px #347fc422,0 12px 28px #0002}.directory-card.agency-sahp{border:2px solid #d8d0b7;box-shadow:0 0 0 1px #d8d0b722,0 12px 28px #0002}.directory-card.agency-hundred{border:2px solid transparent;background:linear-gradient(#14271d,#14271d) padding-box,conic-gradient(#e34b4b,#e4b33f,#4ba86a,#4a8bd8,#a66bd4,#e34b4b) border-box}.marriage-egg{width:82px;height:78px}.marriage-egg svg{width:100%;height:100%;transform:scaleX(1.05)}

/* Chief titles inherit their agency's illuminated perimeter. */
.directory-card.agency-lspd{border:2px solid #4a9cf0;box-shadow:0 0 0 1px #4a9cf044,0 0 17px #347fc455,0 12px 28px #0005}
.directory-card.agency-sahp{border:2px solid #eee9d8;box-shadow:0 0 0 1px #fff8e755,0 0 19px #f4efdc55,0 12px 28px #0005}
.directory-card.agency-bcso{border:2px solid #d9ae38;box-shadow:0 0 0 1px #d9ae3844,0 0 16px #d9ae3844,0 12px 28px #0005}

/* Official member tags: standard agency tags stay neutral; only command/warden distinctions glow softly. */
.member-tag{border:1px solid #ffffff20!important;background:#ffffff07!important;color:#cbd3c5!important;box-shadow:none!important}
.member-tag.chief-lspd{border-color:#78aeea99!important;color:#b9d9ff!important;background:#6da9e91a!important;box-shadow:0 0 10px #78aeea18!important}
.member-tag.game-warden{border-color:#80bd7199!important;color:#c4edb2!important;background:#6baf4c1b!important;box-shadow:0 0 10px #80bd7118!important}
.member-tag.chief-sahp{border-color:#e8e5d599!important;color:#f1eee2!important;background:#e8e5d51a!important;box-shadow:0 0 10px #e8e5d518!important}
.member-tag.chief-bcso{border-color:#d7b85e99!important;color:#f1d98e!important;background:#d7b85e1a!important;box-shadow:0 0 10px #d7b85e18!important}
.member-tag.tag-100{border-color:#b9a0d899!important;color:#e0d2f6!important;background:linear-gradient(110deg,#8c79bd22,#6c9a8d22,#b9a0d822)!important;box-shadow:0 0 10px #b9a0d818!important}
.member-tag.saspr-tag{border-color:#9ed36b88!important;color:#d2f3a8!important;background:#a6d87512!important;box-shadow:0 0 10px #9ed36b12!important}

.directory-card.has-badge-accent{border-color:var(--badge-accent);box-shadow:inset 0 0 22px color-mix(in srgb,var(--badge-accent),transparent 88%),0 0 12px color-mix(in srgb,var(--badge-accent),transparent 78%)}.directory-card.has-badge-accent:before{background:linear-gradient(90deg,transparent,var(--badge-accent),transparent);opacity:.85}

.directory-card.has-badge-accent{border:1px solid transparent;background:linear-gradient(145deg,#1a3023,#101e16 75%) padding-box,linear-gradient(135deg,var(--badge-accent),var(--badge-accent-2)) border-box}.directory-card.has-badge-accent:before{background:linear-gradient(90deg,transparent,var(--badge-accent),var(--badge-accent-2),transparent)}

.members-pagination{display:flex;align-items:center;justify-content:center;gap:18px;padding:26px 0 8px;color:#aebeaa;font-size:10px;letter-spacing:1px}
.members-pagination[hidden]{display:none!important}
.members-pagination button{border:1px solid #9db77b55;background:#14251b;color:#dce8d2;padding:10px 16px;border-radius:3px;font-size:9px;letter-spacing:1px;cursor:pointer}
.members-pagination button:hover:not(:disabled){border-color:#b9d88d;color:#cce9a4}
.members-pagination button:disabled{opacity:.35;cursor:not-allowed}