/*
  File: wwwroot/css/recruiters.css
  Scope: Views/Resources/Recruiters.cshtml ONLY
  Author: Jessie Martin | Last Updated: 2026-04
  Purpose: Styles for the Recruiters page — interactive map, tabs, recruiter cards, dispatcher grid.
  DO NOT add these classes to dps.css or careers.css.
*/

/* ============================================================
   1. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
    /* Division accent colors — mapped from dps.css globals */
    --rec-gsp-accent: var(--dps-orange, #DB4F30);
    --rec-cve-accent: var(--dps-yellow, #EADC75);
    --rec-cve-dark-accent: var(--dps-yellow-dark, #D4C660);
    --rec-disp-accent: var(--dps-red, #A22237);
    --rec-blue-accent: var(--dps-blue, #1F419B);

    /* Surfaces */
    --rec-bg-base:    #040810;
    --rec-bg-panel:   #07101E;
    --rec-bg-raised:  #0A1525;
    --rec-bg-deeper:  #0F1E35;

    /* Borders */
    --rec-border:        rgba(31, 65, 155, 0.22);
    --rec-border-bright: rgba(31, 65, 155, 0.55);
    --rec-border-white:  rgba(255, 255, 255, 0.08);
 
    /* Text */
    --rec-text-primary: #C8D4E8;
    --rec-text-muted:   rgba(200, 212, 232, 0.45);
    --rec-text-faint:   rgba(200, 212, 232, 0.28);
 
    /* Layout measurements — match career pages */
    --rec-navbar-height: 63px;
    --rec-tab-height:    52px;
    --rec-total-offset:  calc(var(--rec-navbar-height) + var(--rec-tab-height));
 
    /* Drawer width */
    --rec-drawer-width: 580px;
}

/* ============================================================
   2. BODY-LEVEL HOOKS
   ============================================================ */

/* Allow position:fixed children inside the overflow wrapper.
   Mirrors the same rule used in careers.css for career detail pages. */
.recruiters-page .overflow-wrapper {
    overflow: visible;
    overflow-x: clip;
}

/* Body class set by bindDivisionTheme() in recruiters-map.js.
   Used for hero eyebrow color on pages that still have a hero band.
   Kept here as a no-op token so JS can write data-active-division
   without causing errors. No hero band on this design. */
body[data-active-division="gsp"] {
    --rec-current-accent: var(--rec-gsp-accent);
}

body[data-active-division="cve"] {
    --rec-current-accent: var(--rec-cve-accent);
}

body[data-active-division="dispatcher"] {
    --rec-current-accent: var(--rec-gsp-accent);
}


/* ============================================================
   3. FIXED DIVISION TAB BAR
   
   Matches the same pattern as career-section-nav.js:
     - navbar visible: tab bar sits at top: 72px (under navbar)
     - navbar hidden:  tab bar snaps to top: 0
   
   The navbar height is 72px (confirmed in careers.css).
   ============================================================ */
.rec-tabs-wrapper {
    position: fixed; /* ← KEY CHANGE from sticky to fixed */
    top: var(--rec-navbar-height);
    left: 0; /* full viewport width */
    right: 0;
    width: 100%;
    height: var(--rec-tab-height);
    z-index: 1490;
    background: rgba(4, 8, 16, 0.95);
    backdrop-filter: blur(16px); /* matches main navbar blur */
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--rec-border);
    /* Subtle blue glow matching the design system */
    box-shadow: 0 0 20px rgba(31, 65, 155, 0.10);
    transition: top 0.3s ease; /* must match navbar transition */
}

/* When main navbar scrolls away, tab bar locks to viewport top */
body.navbar-is-hidden .rec-tabs-wrapper {
    top: 0;
}

.rec-tabs {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.rec-tabs::-webkit-scrollbar {
    display: none;
}

.rec-tab {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1.4rem;
    height: 100%;
    background: transparent;
    border: none;
    position: relative;
    font-family: 'Oswald', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
    box-sizing: border-box;
}

.rec-tab:hover,
.rec-tab.active {
    color: #FFF;
}

/* Active underline via pseudo-element — zoom-proof */
.rec-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
}

.rec-tab[data-division="gsp"].active::after {
    background: var(--rec-gsp-accent);
}

.rec-tab[data-division="cve"].active::after {
    background: var(--rec-cve-accent);
}

.rec-tab[data-division="dispatcher"].active::after {
    background: var(--rec-gsp-accent);
}

.rec-tab__badge {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Focus ring — WCAG 2.2 AA */
.rec-tab:focus-visible {
    outline: 2px solid var(--rec-gsp-accent);
    outline-offset: -2px;
}

.rec-tab-scroll-hint.is-visible {
    display: flex;
}

.rec-tab-scroll-hint.is-hidden {
    opacity: 0;
    pointer-events: none;
}

@keyframes rec-hint-pulse {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.6;
    }

    50% {
        transform: translateX(3px);
        opacity: 1;
    }
}

.rec-tab-scroll-hint {
    display: none;
}

/* ============================================================
   4. FULLSCREEN STAGE
   position:fixed, sits below navbar + tabbar.
   Holds map areas, dispatcher overlay, and the drawer.
   ============================================================ */
.rec-stage {
    position: fixed;
    top: var(--rec-total-offset);
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: var(--rec-bg-base);
    /* Subtle blue grid texture — same as design system map stages */
    background-image:
        linear-gradient(rgba(31, 65, 155, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 65, 155, 0.04) 1px, transparent 1px),
        radial-gradient(ellipse at 25% 30%, rgba(31, 65, 155, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 75%, rgba(219, 79, 48, 0.05) 0%, transparent 45%);
    background-size: 48px 48px, 48px 48px, auto, auto;
    background-color: var(--rec-bg-base);
}

body.navbar-is-hidden .rec-stage {
    top: var(--rec-tab-height);
}

/* Footer is intentionally hidden on the recruiters page.
   The fullscreen stage design leaves no room for it.
   It remains in the DOM for accessibility and SEO. */
.recruiters-page footer {
    display: none;
}

/* Thin footer strip anchored to bottom of stage */
.rec-stage-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: rgba(4, 8, 16, 0.85);
    border-top: 1px solid rgba(31, 65, 155, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    color: rgba(200, 212, 232, 0.35);
    z-index: 60;
    /* Match map area transition exactly */
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    /* GPU layer */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Corner bracket decorations */
.rec-corner {
    position: absolute;
    width: 26px;
    height: 26px;
    pointer-events: none;
    z-index: 1;
}

.rec-corner--tl {
    top: 1.25rem;
    left: 1.25rem;
    border-top: 1.5px solid rgba(31, 65, 155, 0.5);
    border-left: 1.5px solid rgba(31, 65, 155, 0.5);
}

.rec-corner--tr {
    top: 1.25rem;
    right: 1.25rem;
    border-top: 1.5px solid rgba(219, 79, 48, 0.35);
    border-right: 1.5px solid rgba(219, 79, 48, 0.35);
}

.rec-corner--bl {
    bottom: 1.25rem;
    left: 1.25rem;
    border-bottom: 1.5px solid rgba(31, 65, 155, 0.28);
    border-left: 1.5px solid rgba(31, 65, 155, 0.28);
}

.rec-corner--br {
    bottom: 1.25rem;
    right: 1.25rem;
    border-bottom: 1.5px solid rgba(31, 65, 155, 0.28);
    border-right: 1.5px solid rgba(31, 65, 155, 0.28);
}

.rec-stage-footer a {
    color: rgba(200, 212, 232, 0.45);
    text-decoration: none;
}

.rec-stage-footer a:hover { color: #fff; }

.rec-stage--open .rec-stage-footer {
    transform: translateX(calc(var(--rec-drawer-width) / -2));
}


/* ============================================================
   5. MAP AREAS
   Centred map + floating instruction pill.
   JS adds .rec-map-area--hidden to hide inactive map.
   When drawer opens, JS adds .rec-stage--open to stage,
   which slides the map left via transform.
   ============================================================ */
.rec-map-area {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    transition: transform 0.45s ease;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.rec-map-area--hidden {
    display: none;
}

/* Map shifts left when drawer is open — CSS drives this so the transition fires */
.rec-stage--open .rec-map-area {
    transform: translateX(calc(var(--rec-drawer-width) / -2));
}

/* Instruction pill */
.rec-map-hint {
    /* Remove absolute positioning — make it flow above the map */
    position: static;
    transform: none;
    margin-bottom: 0.75rem;
    text-align: center;
    /* Keep existing font/color/border styles */
    background: rgba(7, 16, 30, 0.88);
    border: 1px solid var(--rec-border-bright);
    border-radius: 3px;
    padding: 0.45rem 1.1rem;
    font-family: 'Oswald', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rec-text-primary);
    display: inline-block;
}

.rec-stage--open .rec-map-hint {
    opacity: 0;
}

/* SVG map */
.rec-svg-map {
    width: min(560px, 88vw);
    height: auto;
    max-height: calc(100vh - var(--rec-total-offset) - 80px);
    display: block;
    filter: drop-shadow(0 0 20px rgba(31, 65, 155, 0.18));
}

/* ── LAYER 1: Troop PNG images ── */

.troop-img {
    pointer-events: none;
    transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Dim all images when any zone is active */
.rec-svg-map.has-active .troop-img {
    opacity: 0.4;
    filter: brightness(0.55) saturate(0.45);
}

/* Hover — brighten the hovered troop (JS sets data-hover on SVG) */
.rec-svg-map[data-hover="A"] image[data-troop="A"],
.rec-svg-map[data-hover="B"] image[data-troop="B"],
.rec-svg-map[data-hover="C"] image[data-troop="C"],
.rec-svg-map[data-hover="D"] image[data-troop="D"],
.rec-svg-map[data-hover="E"] image[data-troop="E"],
.rec-svg-map[data-hover="F"] image[data-troop="F"],
.rec-svg-map[data-hover="G"] image[data-troop="G"],
.rec-svg-map[data-hover="H"] image[data-troop="H"],
.rec-svg-map[data-hover="I"] image[data-troop="I"] {
    opacity: 1;
    filter: brightness(1.3) saturate(1.2) drop-shadow(0 0 6px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.25));
    transition: opacity 0.15s ease, filter 0.15s ease;
}

/* Active — full brightness + GSP orange glow */
.rec-svg-map[data-active="A"] image[data-troop="A"],
.rec-svg-map[data-active="B"] image[data-troop="B"],
.rec-svg-map[data-active="C"] image[data-troop="C"],
.rec-svg-map[data-active="D"] image[data-troop="D"],
.rec-svg-map[data-active="E"] image[data-troop="E"],
.rec-svg-map[data-active="F"] image[data-troop="F"],
.rec-svg-map[data-active="G"] image[data-troop="G"],
.rec-svg-map[data-active="H"] image[data-troop="H"],
.rec-svg-map[data-active="I"] image[data-troop="I"] {
    opacity: 1;
    filter: brightness(1.4) saturate(1.3) drop-shadow(0 0 8px var(--rec-gsp-accent)) drop-shadow(0 0 22px rgba(219, 79, 48, 0.45));
}

/* CVE active — yellow glow */
.rec-svg-map--cve[data-active="A"] image[data-troop="A"],
.rec-svg-map--cve[data-active="B"] image[data-troop="B"],
.rec-svg-map--cve[data-active="C"] image[data-troop="C"],
.rec-svg-map--cve[data-active="D"] image[data-troop="D"],
.rec-svg-map--cve[data-active="E"] image[data-troop="E"],
.rec-svg-map--cve[data-active="F"] image[data-troop="F"],
.rec-svg-map--cve[data-active="G"] image[data-troop="G"],
.rec-svg-map--cve[data-active="H"] image[data-troop="H"],
.rec-svg-map--cve[data-active="I"] image[data-troop="I"] {
    opacity: 1;
    filter: brightness(1.4) saturate(1.3) drop-shadow(0 0 8px var(--rec-cve-accent)) drop-shadow(0 0 22px rgba(234, 220, 117, 0.45));
}

/* ── LAYER 2: Invisible hit polygons ── */

.troop-hit {
    fill: transparent;
    stroke: none;
    cursor: pointer;
    /* No transition needed — visual feedback is on the image layer */
}

.troop-hit:focus-visible {
    outline: none;
    /* Visual feedback for keyboard users — orange glow on the SVG zone */
    stroke: var(--rec-gsp-accent);
    stroke-width: 2;
    fill: rgba(219, 79, 48, 0.15);
}

#troopMapCve .troop-hit:focus-visible {
    stroke: var(--rec-cve-accent);
    fill: rgba(234, 220, 117, 0.12);
}

/* ── LAYER 3: Letter labels ── */

.troop-label {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 700;
    fill: rgba(255, 255, 255, 0.72);
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
    user-select: none;
}

/* Map tooltip (aria-live region below the SVG — hidden by default) */
.rec-map__tooltip {
    display: none;
}

.rec-map__tooltip.is-visible {
    display: block;
    /* Position absolute below the SVG, centred */
    position: absolute;
    top: 5.25rem;
    right: 13.5rem;
    left: auto;
    bottom: auto;
    transform: translateX(-50%);
    background: rgba(7, 16, 30, 0.9);
    border-left: 3px solid var(--rec-gsp-accent);
    border-radius: 0 4px 4px 0;
    padding: 0.45rem 0.9rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
    pointer-events: none;
}

.rec-map__tooltip--cve.is-visible {
    border-left-color: var(--rec-cve-accent);
}


/* ============================================================
   6. SLIDE DRAWER
   Slides in from the right when a zone is selected.
   JS adds/removes .rec-drawer--open.
   JS also toggles .rec-stage--open on the stage for map shift.
   ============================================================ */
.rec-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--rec-drawer-width);
    background: var(--rec-bg-panel);
    border-left: 1px solid var(--rec-border-bright);
    box-shadow: -10px 0 36px rgba(0, 0, 0, 0.5), -1px 0 0 rgba(31, 65, 155, 0.12);
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 200;
    /* Force GPU compositing layer at page load — eliminates first-paint pop */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.rec-drawer--open {
    transform: translateX(0);

}

/* ── Drawer header ── */
.rec-drawer__head {
    background: var(--rec-bg-raised);
    border-bottom: 1px solid var(--rec-border-bright);
    padding: 1rem 1.25rem;
    flex-shrink: 0;
}

.rec-drawer__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.rec-drawer__sys {
    font-family: 'Oswald', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.18em !important;
    margin-bottom: 0.9rem;
}

.rec-drawer__close {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Oswald', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--rec-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.rec-drawer__close:hover {
    color: #FFF;
    background: rgba(255, 255, 255, 0.08);
}

.rec-drawer__close:focus-visible {
    outline: 2px solid var(--rec-gsp-accent);
    outline-offset: 2px;
}

/* Troop identity row */
.rec-drawer__troop-row {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

/* Large ghost letter behind troop name */
.rec-drawer__troop-id {
    font-family: 'Oswald', sans-serif;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 0.88;
    color: var(--rec-gsp-accent);
    opacity: 0.22;
    letter-spacing: -0.02em;
    user-select: none;
    flex-shrink: 0;
    transition: opacity 0.3s;
}

.rec-drawer--open .rec-drawer__troop-id {
    opacity: 0.85;
}

body[data-active-division="cve"] .rec-drawer__troop-id {
    color: var(--rec-cve-accent);
}

.rec-drawer__troop-name {
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #FFF;
    line-height: 1.2;
}

.rec-drawer__troop-region {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: rgba(200, 212, 232, 0.75);
    margin-top: 0.1rem;
}

.rec-drawer__troop-posts {
    font-family: 'Inter', sans-serif;
    font-size: 0.64rem;
    color: var(--rec-text-primary);
    margin: 0.15rem;
    line-height: 1.45;
}

/* County tags */
.rec-drawer__counties {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.rec-county-tag {
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.04em !important;
    color: var(--rec-text-primary);
    background: rgba(31, 65, 155, 0.08);
    border: 1px solid rgba(31, 65, 155, 0.2);
    border-radius: 2px;
    padding: 0.1rem 0.35rem;
}

/* ── Drawer scrollable body ── */
.rec-drawer__body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 140, 220, 0.65) rgba(255, 255, 255, 0.04);
}

.rec-drawer__body::-webkit-scrollbar       { width: 4px; }
.rec-drawer__body::-webkit-scrollbar-track { background: transparent; }
.rec-drawer__body::-webkit-scrollbar-thumb { background: rgba(100, 140, 220, 0.65); border-radius: 2px; }
.rec-drawer__body::-webkit-scrollbar-thumb:hover { background: rgba(100, 140, 220, 0.90); }

/* Section labels inside drawer body */
.rec-drawer__label {
    font-family: 'Oswald', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--rec-text-primary);
    padding: 1rem 1.25rem 1rem;
    display: block;
}

/* Primary label — Assigned Recruiters (main point of contact) */
.rec-drawer__label--primary {
    font-size: 0.78rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.2em !important;
    border-left: 2px solid var(--rec-gsp-accent);
    padding-left: 0.75rem;
    margin-left: 0;
}

body[data-active-division="cve"] .rec-drawer__label--primary {
    border-left-color: var(--rec-cve-accent);
}

/* Secondary label — Statewide Coordinators (supporting info) */
.rec-drawer__label--secondary {
    font-size: 0.58rem;
    color: var(--rec-text-primary);
    border-top: 1px solid var(--rec-border);
    padding-top: 1rem;
    margin-top: 0.25rem;
}

/* Empty state */
.rec-drawer__empty {
    padding: 4rem 2rem;
    text-align: center;
}

.rec-drawer__empty-title {
    font-family: 'Oswald', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: rgba(200, 212, 232, 0.45);
    margin-bottom: 0.4rem;
}

.rec-drawer__empty-sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    color: rgba(200, 212, 232, 0.45);
}


/* ============================================================
   7. COORDINATOR PHOTO CARDS (inside drawer)
   Horizontal layout: 76px photo | role + name + contacts.
   The "happy medium" between a pure photo card and a data row.
   ============================================================ */
.rec-coord-strip {
    border-bottom: 1px solid var(--rec-border);
    padding: 0 0 0 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rec-coord-card {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 1rem 1rem;
    background: rgba(31, 65, 155, 0.055);
    border: 1px solid var(--rec-border);
    border-radius: 4px;
    overflow: hidden;
    transition: background 0.15s;
}

.rec-coord-card:hover { background: rgba(31, 65, 155, 0.10); }

/* Photo slot */
.rec-coord-card__photo {
    width: 72px;
    flex-shrink: 0;
    background: linear-gradient(145deg, var(--rec-bg-deeper) 0%, var(--reg-bg-panel) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-right: 1px solid var(--rec-border);
}

.rec-coord-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Monogram fallback — shown when no photo is available */
.rec-coord-card__monogram {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(200, 212, 232, 0.14);
    user-select: none;
}

/* Accent at bottom of img */
.rec-coord-card__photo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--rec-gsp-accent);
    opacity: 0.85;
}

.rec-coord-card--cve .rec-coord-card__photo::after {
    background: var(--rec-cve-accent);
}

/* Info column */
.rec-coord-card__info {
    flex: 1;
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.rec-coord-card__role {
    font-family: 'Oswald', sans-serif;
    font-size: 0.55rem;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--rec-gsp-accent);
    margin-bottom: 0.15rem;
    opacity: 1;
}

.rec-coord-card--cve .rec-coord-card__role {
    color: var(--rec-cve-accent);
}

.rec-coord-card__name {
    font-family: 'Oswald', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.02em !important;
    margin-bottom: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rec-coord-card__contacts {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    color: rgba(200, 212, 232, 0.70);
    line-height: 1.85;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.rec-coord-card__contacts a {
    color: var(--rec-text-primary);
    text-decoration: none;
    transition: color 0.15s;
}

.rec-coord-card__contacts a:hover { color: var(--rec-gsp-accent); }
.rec-coord-card--cve .rec-coord-card__contacts a:hover { color: var(--rec-cve-accent); }

/* ============================================================
   8. RECRUITER TABLE (inside drawer)
   Photo thumbnail column + data columns.
   Option 2 tactical table skin: blue-tinted thead, mono-style
   contacts, glowing badge ID box, staggered row animation.
   ============================================================ */
.rec-rec-table {
    width: 100%;
    border-collapse: collapse;
}

.rec-rec-table thead tr {
    border-bottom: 1px solid var(--rec-border-bright);
    background: rgba(31, 65, 155, 0.07);
}

.rec-rec-table th {
    font-family: 'Oswald', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--rec-text-faint);
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-weight: 400;
}

.rec-rec-table tbody tr {
    border-bottom: 1px solid rgba(31, 65, 155, 0.1);
    transition: background 0.12s;
}

.rec-rec-table tbody tr:hover { background: rgba(31, 65, 155, 0.09); }

.rec-rec-table td {
    padding: 0.65rem 0.75rem;
    vertical-align: middle;
}

/* Make name column compressible so photo can be wider */
.rec-rec-table td:nth-child(3) {
    min-width: 0;
}

/* Slightly tighten other columns to give photo room */
.rec-rec-table th:nth-child(2),
.rec-rec-table td:nth-child(2) {
    white-space: nowrap;
}

/* Photo thumbnail column */
/* Wider photo column */
.rec-td-photo {
    width: 100px;
    padding: 0.5rem 0 0.5rem 0.75rem !important;
}

/* Larger photo wrap */
.rec-td-photo__wrap {
    width: 82px;
    height: 115px;
    border-radius: 5px;
    overflow: hidden;
    background: linear-gradient(145deg, var(--rec-bg-deeper) 0%, var(--rec-bg-raised) 100%);
    border-left: 2px solid var(--rec-gsp-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.rec-td-photo__wrap--cve {
    border-left: 2px solid var(--rec-cve-accent);
}

.rec-td-photo__wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Monogram fallback */
.rec-td-photo__mono {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: rgba(200, 212, 232, 0.18);
    user-select: none;
}

.rec-td-photo__wrap::after {
    display: none;
}

.rec-td-photo__wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--rec-gsp-accent);
    opacity: 1;
}

/* CVE thumbnail accent */
.rec-td-photo__wrap--cve::after,
.rec-td-photo__wrap--cve::before {
    background: var(--rec-cve-accent);
}

/* Glowing badge ID box */
.rec-td-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 30px;
    padding: 0 0.4rem;
    border: 1px solid rgba(219, 79, 48, 0.40);
    border-radius: 2px;
    background: rgba(219, 79, 48, 0.07);
    box-shadow: 0 0 8px rgba(219, 79, 48, 0.14);
    font-family: 'Oswald', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em !important;
    color: var(--rec-gsp-accent);
    white-space: nowrap;
}

.rec-td-badge--cve {
    border-color: rgba(234, 220, 117, 0.38);
    background: rgba(234, 220, 117, 0.06);
    box-shadow: 0 0 8px rgba(234, 220, 117, 0.12);
    color: var(--rec-cve-accent);
}

/* Name + rank */
.rec-td-name {
    font-family: 'Oswald', sans-serif;
    font-size: 0.94rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.02em !important;
    display: block;
}

.rec-td-rank {
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    color: var(--rec-text-faint);
    display: block;
    margin-top: 0.06rem;
    display: none;
}

/* Phone */
.rec-td-phone a {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    color: var(--rec-text-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.15s;
}

.rec-td-phone a:hover { color: #FFF; }

/* Email */
.rec-td-email a {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    color: var(--rec-text-primary);
    text-decoration: none;
    display: block;
    transition: color 0.15s;
    word-break: break-all;
}

.rec-td-email a:hover { color: #FFF; }

/* Row slide-in animation (JS sets animation-delay per row) */
@keyframes rec-row-in {
    from {
        opacity: 0;
        transform: translateX(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.rec-rec-table tbody tr {
    animation: rec-row-in 0.25s ease both;
}

/* ============================================================
   9. DISPATCHER OVERLAY
   Fullscreen scrollable, shown when Dispatcher tab is active.
   JS toggles .rec-disp-overlay--visible.
   Table design: Option 2 tactical skin, red accent.
   ============================================================ */
.rec-disp-overlay {
    position: absolute;
    inset: 0;
    background: var(--rec-bg-base);
    /* Preserve scanline texture */
    background-image: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.035) 2px, rgba(0, 0, 0, 0.035) 4px );
    background-color: var(--rec-bg-base);
    overflow-y: auto;
    z-index: 50;
    display: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(219, 79, 48, 0.90) transparent;
}

.rec-disp-overlay--visible {
    display: block;
}

.rec-disp-overlay__inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 2.5rem 2rem 5rem;
}

/* Header */
.rec-disp-hdr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: end;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--rec-border-bright);
}

.rec-disp-hdr__eyebrow {
    font-family: 'Oswald', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.25em !important;
    text-transform: uppercase !important;
    color: var(--rec-gsp-accent);
    margin-bottom: 0.6rem;
}

.rec-disp-hdr__title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #fff;
    line-height: 1;
    margin: 0;
}

.rec-disp-hdr__body p {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: rgba(200, 212, 232, 0.5);
    line-height: 1.75;
    margin-bottom: 0.75rem;
}
 
/* Application download button */
.rec-btn-download {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.3rem;
    background: #C44428;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-radius: 3px;
    text-decoration: none;
    margin-top: 0.5rem;
    box-shadow: 0 0 18px rgba(196, 68, 40, 0.32);
    transition: opacity 0.2s;
}

.rec-btn-download:hover { opacity: 0.85; color: #fff; }

/* Table label */
.rec-disp-tbl-label {
    font-family: 'Oswald', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--rec-text-primary);
    margin-bottom: 0.85rem;
}

/* Scrollable table wrapper (for mobile) */
.rec-disp-tbl-wrap {
    overflow-x: auto;
    border: 1px solid var(--rec-border-bright);
    border-radius: 3px;
    box-shadow: 0 0 20px rgba(31, 65, 155, 0.08);
}

/* Table */
.rec-disp-tbl {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.rec-disp-tbl thead {
    background: rgba(219, 79, 48, 0.18);
}

.rec-disp-tbl th {
    font-family: 'Oswald', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(200, 212, 232, 0.95);
    padding: 0.65rem 0.9rem;
    text-align: left;
    font-weight: 400;
    border-bottom: 1px solid rgba(219, 79, 48, 0.3);
}

.rec-disp-tbl tbody tr {
    border-bottom: 1px solid rgba(31, 65, 155, 0.1);
    transition: background 0.15s;
}

.rec-disp-tbl tbody tr:hover { background: rgba(219, 79, 48, 0.075); }

.rec-disp-tbl td {
    padding: 0.75rem 0.9rem;
    vertical-align: middle;
}
 
/* Troop badge */
.rec-disp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(219, 79, 48, 0.15);
    border: 1px solid rgba(219, 79, 48, 0.42);
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(219, 79, 48, 0.18);
    font-family: 'Oswald', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--rec-gsp-accent);
}

/* Center name + location */
.rec-disp-center {
    font-family: 'Oswald', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.03em !important;
    color: rgba(200, 212, 232, 0.85);
    display: block;
}

.rec-disp-loc {
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    color: rgba(200, 212, 232, 0.60);
    display: block;
    margin-top: 0.1rem;
}

/* Chief dispatcher name */
.rec-disp-chief {
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(200, 212, 232, 0.82);
}

/* Address */
.rec-disp-addr {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    color: rgba(200, 212, 232, 0.75);
    line-height: 1.5;
    max-width: 220px;
}

/* Contact links */
.rec-disp-links {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}

.rec-disp-links a {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    color: rgba(219, 79, 48, 0.95);
    text-decoration: none;
    transition: color 0.15s;
}

.rec-disp-links a:hover {
    color: #FFF;
}

.rec-disp-fax {
    color: rgba(200, 212, 232, 0.9) !important;
    font-size: 0.6rem !important;
}

/* Shared link utility */
.rec-link       { text-decoration: none; }
.rec-link--disp { color: var(--rec-gsp-accent); }
.rec-link--disp:hover { text-decoration: underline; }



/* ============================================================
   10. RESPONSIVE
   Tier strategy:
     Base CSS             = laptop (769px–1279px) — the "perfect" view
     min-width: 1280px    = desktop
     min-width: 1600px    = large desktop
     max-width: 768px     = mobile portrait (APPROVED TEMPLATE)
     max-width: 575px     = small mobile (scaled-down template)
     landscape query      = mobile landscape (side drawer variant
   ============================================================ */

/* ── LARGE DESKTOP (1600px+): cap so map doesn't balloon ── */
@media (min-width: 1600px) {
    .rec-svg-map {
        width: min(600px, 40vw);
        max-height: calc(100vh - var(--rec-total-offset) - 112px);
    }
}

/* ── DESKTOP (1280px+): larger map, tighter max-height ── */
@media (min-width: 1280px) {
    .rec-svg-map {
        width: min(620px, 48vw);
        max-height: calc(100vh - var(--rec-total-offset) - 96px);
    }

    .rec-map-area {
        padding-bottom: calc(36px + 0.75rem); /* stage footer + gap */
    }
}

/* ── TABLET / SMALL DESKTOP (769px–1279px): was the old default ── */
@media (max-width: 1279px) {
    :root {
        --rec-drawer-width: 580px;
    }

    .rec-svg-map {
        width: min(500px, 82vw);
        max-height: calc(100vh - var(--rec-total-offset) - 104px);
    }

    .rec-map-area {
        padding-bottom: calc(36px + 1rem);
    }

    /* Make tabs scrollable so Dispatcher is never clipped */
    .rec-tabs-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .rec-tabs {
        justify-content: center;
        flex-wrap: nowrap;
        padding: 0 1rem;
    }

    .rec-tab {
        flex-shrink: 0;
    }
}

/* ── MID TO LARGE MOBILE PHONES (768px AND BELOW) ── */
@media (max-width: 768px) {
    :root {
        --rec-drawer-width: 100vw;
    }

    /* ── Tab bar: scrollable, left-aligned, NOT overflow:hidden ── */
    .rec-tabs-wrapper {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        /* Remove the clip that was hiding CVE + Dispatcher tabs */
        scrollbar-width: thin;
        scrollbar-color: rgba(219, 79, 48, 0.5) transparent;
    }

    .rec-tabs-wrapper .container {
        height: 100%;
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }

    .rec-tabs-wrapper::-webkit-scrollbar {
        height: 2px;
    }

    .rec-tabs-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }

    .rec-tabs-wrapper::-webkit-scrollbar-thumb {
        background: rgba(219, 79, 48, 0.5);
        border-radius: 1px;
    }

    .rec-tabs {
        height: 100%;
        align-items: center;
        padding: 0 1rem 2px 1rem; /* tiny room for the 2px scrollbar at bottom */
    }

    .rec-tab {
        height: calc(100% - 2px); /* leave 2px for the bottom scrollbar */
        align-items: center;
        font-size: 0.72rem;
        letter-spacing: 0.03em !important;
        padding: 0.5rem 0.85rem;
    }

    .rec-tab__badge {
        width: 20px;
        height: 20px;
    }

    /* ── Stage: relative, height = visible area below both bars ── */
    .rec-stage {
        position: fixed;
        top: var(--rec-total-offset);
        left: 0;
        right: 0;
        bottom: 0;
        height: auto; /* fixed + bottom:0 defines height — no calc needed */
        margin-top: 0;
        min-height: unset;
        max-height: unset;
        overflow: hidden;
    }

    body.navbar-is-hidden .rec-stage {
        top: var(--rec-tab-height);
        height: auto;
        max-height: unset;
    }

    /* ── Stage footer: taller on mobile to fit wrapped content ── */
    .rec-stage-footer {
        height: auto;
        min-height: 52px;
        flex-direction: column;
        gap: 0.35rem;
        padding: 0.6rem 1rem;
        text-align: center;
    }

    /* ── Map area: push content down from top, up from bottom ── */
    .rec-map-area {
        align-items: center;
        justify-content: flex-start;
        padding-top: 1.25rem;
        padding-bottom: 0;
    }

    /* ── Map SVG: fit within stage, leave room for hint above ── */
    .rec-svg-map {
        width: min(320px, 84vw);
        /* 70px hint/padding + 36px stage footer = 106px total to subtract */
        max-height: calc(100svh - var(--rec-total-offset) - 130px);
    }

    /* ── Hint pill: compact but visible ── */
    .rec-map-hint {
        font-size: 0.58rem;
        padding: 0.35rem 0.85rem;
        margin-bottom: 0.5rem;
        letter-spacing: 0.1em;
        max-width: 90vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── Tooltip: hidden on mobile — no space ── */
    .rec-map__tooltip,
    .rec-map__tooltip.is-visible {
        display: none !important;
    }

    /* ── Corner brackets: hidden on mobile (no room) ── */
    .rec-corner {
        display: none;
    }

    /* ── Drawer: slides up from bottom ── */
    /* Height is capped so top of drawer never goes above tab bar.
       Stage height = 100svh - total-offset.
       Drawer height = 90% of stage = safe. */
    .rec-drawer {
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        /* 90% of stage keeps the top of the drawer within the stage boundary */
        height: 90%;
        transform: translateY(105%); /* extra 5% ensures full hide */
        border-left: none;
        border-top: 2px solid var(--rec-border-bright);
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.7);
        border-radius: 14px 14px 0 0;
        z-index: 200;
    }

    .rec-drawer__head {
        padding: 0.65rem 1rem 0.5rem;
    }

    .rec-drawer__topbar {
        margin-bottom: 1.5rem;
    }

    .rec-drawer__sys {
        margin-bottom: 0.4rem;
        font-size: 0.55rem;
    }

    .rec-drawer__troop-id {
        font-size: 2.2rem;
    }

    .rec-drawer__troop-row {
        margin-bottom: 0.35rem;
    }

    .rec-drawer--open {
        transform: translateY(0);
    }

    /* Map stays put when drawer opens — drawer overlays on top */
    .rec-stage--open .rec-map-area {
        transform: none;
    }

    /* ── Recruiter table: keep email, hide badge only ── */
    /* Column order: 1=photo, 2=badge, 3=name, 4=phone, 5=email */
    .rec-rec-table th:nth-child(2),
    .rec-rec-table td:nth-child(2) {
        display: none; /* hide badge — takes space, low value on mobile */
    }

    /* Keep email (col 5) visible — restore if previously hidden */
    .rec-rec-table th:nth-child(5),
    .rec-rec-table td:nth-child(5) {
        display: table-cell;
    }

    /* Dispatcher table: single column header */
    .rec-disp-hdr {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* ── Dispatcher overlay: stop short of footer so last row isn't covered ── */
    .rec-disp-overlay {
        bottom: auto;
        top: 0;
        /* inset:0 from base CSS includes bottom:0 which goes behind footer.
       Override bottom to leave room for the two-line mobile footer (~64px) */
        height: calc(100% - 64px);
    }

    /* ── Inner padding: extra bottom room on mobile ── */
    .rec-disp-overlay__inner {
        padding-bottom: 2rem;
    }
}

/* ── SMALL MOBILE (≤ 575px) ── */
@media (max-width: 575px) {
    .rec-tabs-wrapper {
        scrollbar-width: none;
    }

    .rec-tabs-wrapper::-webkit-scrollbar {
        display: none;
    }

    .rec-tabs {
        height: 100%;
        align-items: center;
        padding: 0 0.5rem 2px 15.5rem; /* removed padding-left: 15.5rem */
    }

    .rec-tab {
        height: 100%;
        align-items: center;
        font-size: 0.68rem;
        letter-spacing: 0.04em !important;
        padding: 0.5rem 0.75rem; /* restored vertical padding */
    }

    .rec-tab__badge {
        width: 18px;
        height: 18px;
    }

    .rec-tab-scroll-hint {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 52px;
        display: none;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to right, transparent, rgba(4, 8, 16, 0.98) 40%);
        color: #FFFFFF;
        font-size: 0.75rem;
        pointer-events: none;
        animation: rec-hint-pulse 1.2s ease-in-out infinite;
        transition: opacity 0.3s;
        z-index: 10;
    }

    .rec-tab-scroll-hint--left {
        right: auto;
        left: 0;
        background: linear-gradient(to left, transparent, rgba(4, 8, 16, 0.98) 40%);
        animation: rec-hint-pulse-left 1.2s ease-in-out infinite;
    }

    @keyframes rec-hint-pulse-left {
        0%, 100% { transform: translateX(0);    opacity: 0.6; }
        50%       { transform: translateX(-4px); opacity: 1;   }
    }

    .rec-tab-scroll-hint.is-visible {
        display: flex;
        opacity: 1;
    }

    .rec-svg-map {
        width: min(290px, 82vw);
        max-height: calc(100svh - var(--rec-total-offset) - 130px);
    }

    .rec-map-hint {
        font-size: 0.5rem;
        padding: 0.28rem 0.6rem;
        letter-spacing: 0.08em;
        max-width: 85vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rec-drawer__head {
        padding: 0.5rem 0.85rem 0.4rem;
    }

    .rec-drawer__troop-id {
        font-size: 1.9rem;
    }

    .rec-disp-overlay__inner {
        padding: 1.5rem 0.9rem 3rem;
    }
}

/* ── TAB FIX ONLY: 576px–991px tabs centered and compressed ── */
@media (min-width: 576px) and (max-width: 991px) {
    .rec-tabs {
        justify-content: center;
        flex-wrap: nowrap;
        padding: 0 0.5rem;
    }

    .rec-tab {
        flex-shrink: 1; /* allow slight compression before scrolling */
        font-size: 0.75rem;
        padding: 0.5rem 0.85rem;
        letter-spacing: 0.03em !important;
    }

    .rec-tab__badge {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 480px) {
    :root {
        --rec-navbar-height: 110px !important;
        --rec-total-offset: calc(110px + var(--rec-tab-height)) !important;
    }

    .rec-tabs-wrapper {
        top: 110px;
    }

    .rec-tabs {
        padding: 0 0.5rem 0 2rem;
        justify-content: flex-start;
    }

    .rec-tab {
        font-size: 0.62rem;
        padding: 0.5rem 0.6rem;
        gap: 0.3rem;
    }

    .rec-tab__badge {
        width: 16px;
        height: 16px;
    }
}

/* LANDSCAPE MOBILE (≤ 900px wide, ≤ 500px tall) */
@media (max-width: 900px) and (max-height: 500px) {
    /* Override navbar height to actual landscape value */
    :root {
        --rec-navbar-height: 68px !important;
        --rec-total-offset: calc(68px + var(--rec-tab-height)) !important;
    }

    /* Tab bar snaps to top — no room for navbar in landscape */
    .rec-tabs-wrapper {
        top: 68px !important; /* actual landscape navbar height */
        /* Keep scrollable from mobile template */
        overflow-x: auto;
        overflow-y: hidden;
    }

    body.navbar-is-hidden .rec-tabs-wrapper {
        top: 0 !important;
    }

    .rec-tabs-wrapper .container {
        height: 100%;
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }

    .rec-tabs {
        height: 100%;
        justify-content: center;
        align-items: center;
        padding: 0 0.75rem;
        padding-bottom: 2px;
        flex-wrap: nowrap;
    }

    .rec-tab {
        flex-shrink: 0;
        height: calc(100% - 2px);
        padding: 0.5rem 0.85rem;
        font-size: 0.68rem;
        align-items: center;
    }

    .rec-tab__badge {
        width: 18px;
        height: 18px;
    }

    /* Stage: accounts for BOTH navbar + tab bar in landscape */
    .rec-stage {
        position: fixed;
        top: var(--rec-total-offset);
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        margin-top: 0;
        min-height: unset;
        max-height: unset;
        overflow: hidden;
    }

    body.navbar-is-hidden .rec-stage {
        top: var(--rec-tab-height);
    }

    /* Stage footer: single row in landscape (enough width) */
    .rec-stage-footer {
        height: 32px;
        min-height: unset;
        flex-direction: row;
        padding: 0 1rem;
        text-align: center;
    }

    /* Map: narrower to share horizontal space with potential drawer */
    .rec-map-area {
        align-items: center;
        justify-content: flex-start; /* hint + map stack from top */
        padding-top: 0.5rem;
        padding-bottom: 0;
    }

    .rec-svg-map {
        width: min(240px, 38vw);
        /* total-offset + hint (~28px) + footer (32px) */
        max-height: calc(100vh - var(--rec-total-offset) - 60px);
    }

    /* Hint: hidden in landscape — no vertical room */
    .rec-map-hint {
        display: block;
        font-size: 0.52rem;
        padding: 0.28rem 0.7rem;
        margin-bottom: 0.35rem;
        letter-spacing: 0.08em;
        max-width: 90%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* AFTER */
    /* Tooltip: restored in landscape — upper right, compact */
    .rec-map__tooltip {
        display: none;
    }

    .rec-map__tooltip.is-visible {
        display: block;
        top: 0.75rem;
        right: 20rem;
        left: auto;
        bottom: auto;
        transform: none;
        font-size: 0.68rem;
        padding: 0.35rem 0.75rem;
    }

    /* Drawer: slides in from RIGHT like desktop ── */
    .rec-drawer {
        position: absolute;
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        width: 62vw;
        height: 100%;
        transform: translateX(105%);
        border-top: none;
        border-radius: 0;
        border-left: 1px solid var(--rec-border-bright);
        box-shadow: -10px 0 36px rgba(0, 0, 0, 0.7);
        z-index: 200;
    }

    .rec-drawer--open {
        transform: translateX(0);
    }

    /* Drawer header: compact for landscape */
    .rec-drawer__head {
        padding: 0.5rem 1rem 0.4rem;
    }

    .rec-drawer__topbar {
        margin-bottom: 0.3rem;
    }

    .rec-drawer__sys {
        margin-bottom: 0.25rem;
        font-size: 0.52rem;
    }

    .rec-drawer__troop-id {
        font-size: 1.8rem;
    }

    .rec-drawer__troop-row {
        margin-bottom: 0.25rem;
    }

    /* Map shifts left when drawer opens */
    .rec-stage--open .rec-map-area {
        transform: translateX(calc(-62vw / 2));
    }

    /* Dispatcher overlay: stop above footer */
    .rec-disp-overlay {
        bottom: auto;
        top: 0;
        height: calc(100% - 32px);
    }

    .rec-disp-overlay__inner {
        padding: 1rem 1rem 1.5rem;
    }

    .rec-disp-hdr {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Recruiter table: hide badge, keep email */
    .rec-rec-table th:nth-child(2),
    .rec-rec-table td:nth-child(2) {
        display: none;
    }

    .rec-rec-table th:nth-child(5),
    .rec-rec-table td:nth-child(5) {
        display: table-cell;
    }
}

/* ============================================================
   11. ACCESSIBILITY — REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .rec-drawer,
    .rec-map-area,
    .rec-stage--open .rec-map-area,
    .troop-img {
        transition: none;
    }

    .rec-rec-table tbody tr {
        animation: none;
    }
}