/* Mobile map-first interface. Desktop presentation is deliberately unchanged. */
.mobile-search-trigger,.mobile-progress,.display-switch-name-mobile,.area-list-collapse{display:none}
@media(max-width:700px){
 :root{--header:54px;--scope:34px;--mobile-progress-size:30px;--mobile-switch-height:56px}
 .header{height:var(--header);display:flex;flex-wrap:nowrap;align-items:center;align-content:center;gap:8px;padding:4px 9px;border-bottom-width:2px}
 .header .brand{flex:none;width:72px;height:42px;padding:0}
 .header .brand .tla-color-logo{width:70px;max-height:40px}
 .title-lockup{flex:1 1 auto;min-width:0;padding:0;border:0}
 .title-lockup h1{font-size:19px;letter-spacing:0;white-space:nowrap;line-height:1.1}
 .workspace-label,.layers{display:none!important}
 .mobile-search-trigger{display:grid;place-items:center;flex:none;width:40px;height:40px;margin-left:auto;border:1px solid #c4d4e3;border-radius:7px;background:#fff;color:#1C4076}
 .mobile-search-trigger svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
 .header.search-open .mobile-search-trigger{visibility:hidden}
 #search-form.search{display:none;position:absolute;top:7px;left:8px;right:8px;width:auto;min-width:0;height:40px;margin:0;z-index:32;background:#fff}
 #search-form.search.is-open{display:block}
 #search-form .search-field{height:40px;gap:8px;padding:3px 5px 3px 9px;background:#fff;border:2px solid #1C4076}
 #search-form .search-field input{font-size:16px}
 #search-form #search-results{position:fixed;left:8px;right:8px;top:calc(var(--header) + 1px);max-height:55dvh;z-index:35}
 .scope-bar{height:var(--scope);padding:0 8px;gap:4px}
 #breadcrumbs{max-width:100%;min-width:0;flex:1}
 #breadcrumbs button,#breadcrumbs .current{font-size:11px;white-space:nowrap}
 .scope-actions{display:none}
 .mobile-progress{position:fixed;display:block;left:0;right:0;top:calc(var(--header) + var(--scope));height:var(--mobile-progress-size);padding:3px 8px;background:#fff;border-bottom:1px solid #cedcea;z-index:22}
 .mobile-progress[hidden]{display:none!important}
 .mobile-progress-track{height:23px;position:relative;overflow:hidden;border:1px solid #a2bcd2;border-radius:5px;background:#e9f2fa;color:#14245e}
 .mobile-progress-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#b1d6ee;transition:width .2s ease}
 .mobile-progress-text{position:relative;z-index:1;display:block;text-align:center;line-height:21px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:#14245e}
 #map{top:calc(var(--header) + var(--scope));bottom:calc(var(--mobile-switch-height) + env(safe-area-inset-bottom,0px))}
 body.has-mobile-progress #map{top:calc(var(--header) + var(--scope) + var(--mobile-progress-size))}
 .map-display-toggles{display:grid;grid-template-columns:.8fr 1.2fr 1fr;align-items:stretch;left:0;right:0;top:auto;bottom:0;gap:0;width:100%;height:calc(var(--mobile-switch-height) + env(safe-area-inset-bottom,0px));padding:3px 6px calc(3px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid #b8cadd;border-radius:0;box-shadow:0 -2px 10px #14245e16;z-index:29}
 .map-display-toggles .display-switch{display:flex!important;flex-direction:column;justify-content:center;align-items:center!important;gap:2px!important;min-width:0;min-height:46px;padding:0 2px!important;background:transparent;border:0;border-radius:0;box-shadow:none}
 .map-display-toggles .display-switch-name{display:block;font-size:10px;line-height:1.2;text-align:center;color:#1C4076;white-space:nowrap}
 .map-display-toggles .display-switch-name-mobile{display:inline}
 .map-display-toggles .display-switch-name-desktop{display:none}
 .map-display-toggles .display-switch-track{width:31px;height:18px}
 .map-display-toggles .display-switch-thumb{width:12px;height:12px}
 .map-display-toggles .display-switch input:checked~.display-switch-track .display-switch-thumb{transform:translateX(13px)}
 #control-rail,#precinct-profile-card,#precinct-profile-leader,.view-label{display:none!important}
 body.stats-only-precinct #precinct-profile-card:not([hidden]){display:block!important}
 .district-navigation{left:50%;top:9px;max-width:calc(100% - 104px);padding:6px 9px;gap:6px;overflow:hidden;text-overflow:ellipsis;font-size:11px}
 .district-navigation strong{font-size:12px}
 .district-navigation span{font-size:10px}
 .district-navigation button{white-space:nowrap}
 .mapboxgl-ctrl-top-right{top:7px;right:7px}
 .map-buttons{top:calc(var(--header) + var(--scope) + 140px);right:7px}
 .map-buttons button{width:33px;height:33px}
 .legend{left:auto;right:8px;bottom:calc(var(--mobile-switch-height) + env(safe-area-inset-bottom,0px) + 8px);max-width:min(265px,calc(100vw - 20px))}
 .legend[open]{max-height:46dvh}
 .notice{left:auto;right:8px;top:auto;bottom:calc(var(--mobile-switch-height) + env(safe-area-inset-bottom,0px) + 45px);max-width:min(285px,calc(100vw - 18px));padding:8px 11px;font-size:11px}
 .summary{right:8px;bottom:calc(var(--mobile-switch-height) + env(safe-area-inset-bottom,0px) + 10px)}
 body.show-area-summary #summary.area-canvass-card{right:8px;bottom:calc(var(--mobile-switch-height) + env(safe-area-inset-bottom,0px) + 10px)}
 body.has-canvass-area-list #summary{display:none!important}
 .canvass-area-list{left:8px;top:calc(var(--header) + var(--scope) + 54px);bottom:calc(var(--mobile-switch-height) + env(safe-area-inset-bottom,0px) + 8px);width:142px;height:auto;max-height:none;overflow:hidden;font-size:11px;z-index:23;border:1px solid #b8cadd;border-top:3px solid #1C4076;border-radius:5px;box-shadow:0 2px 9px #14245e22}
 body.has-mobile-progress .canvass-area-list{top:calc(var(--header) + var(--scope) + var(--mobile-progress-size) + 54px)}
 .canvass-area-list header{padding:7px 30px 5px 9px}
 .canvass-area-list header>span{font-size:8px}
 .canvass-area-list h2{font-size:23px;margin:1px 0 0;white-space:nowrap}
 .canvass-area-list-columns{display:grid;grid-template-columns:36px 63px;justify-content:start;gap:3px;padding:5px 4px 5px 9px;text-align:left;line-height:1.2;font-size:9px}
 .canvass-area-list-hint,.canvass-area-list-totals,.canvass-area-list-race{display:none}
 .canvass-area-list ul{min-height:0;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
 .canvass-area-list li button{display:grid;grid-template-columns:36px 53px 12px;justify-content:start;gap:3px;min-height:43px;padding:7px 3px 7px 9px;text-align:left;align-items:center;font-size:12px;touch-action:manipulation}
 .canvass-area-list li i{position:static;justify-self:end;font-size:19px}
 .canvass-area-list li strong{font-variant-numeric:tabular-nums}
 .canvass-area-list .area-list-collapse{position:absolute;top:6px;right:5px;z-index:2;display:grid;place-items:center;width:28px;height:29px;padding:0;border:1px solid #c6d4e2;border-radius:5px;background:#fff;color:#1C4076;font-size:21px;font-weight:700}
 .canvass-area-list.is-collapsed{bottom:auto;width:37px;height:103px;max-height:103px}
 .canvass-area-list.is-collapsed header,.canvass-area-list.is-collapsed .canvass-area-list-columns,.canvass-area-list.is-collapsed ul{display:none}
 .canvass-area-list.is-collapsed .area-list-collapse{inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:none;font-size:12px;font-weight:700;border:0;border-radius:3px}
}

/* Follow-up mobile refinements: reclaim header space, clarify geography, preserve tap targets. */
.legend-heading{font-weight:700;color:#1C4076;font-size:11px;margin:10px 0 5px}
.legend-heading:first-child{margin-top:0}
.selected-area-key{background:#F6F7F5;border:3px solid #DB4D2B!important;box-shadow:inset 0 0 0 1px #FFF}
.other-area-key{background:#E5EAED;border:1.5px solid #60798C!important}
.unassigned-area-key{background:repeating-linear-gradient(135deg,#e7ebed 0px,#e7ebed 4px,#bac4cb 5px,#e7ebed 6px);border-color:#a2b0b9!important}
@media(max-width:700px){
 .scope-bar{background:#fff;padding:0 7px;border-bottom-color:#c9d7e2}
 #breadcrumbs{display:flex;align-items:center;min-width:0;max-width:100%;width:100%;height:100%;flex:1;gap:0;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
 #breadcrumbs::-webkit-scrollbar{display:none}
 #breadcrumbs button{font-size:11px;font-weight:600;color:#1C4076;padding:6px 4px;flex:none;min-height:30px}
 #breadcrumbs button[aria-current="location"]{font-weight:800}
 #breadcrumbs .sep{font-size:13px;color:#8da2b1;padding:0 1px;flex:none}
 #breadcrumbs .current{font-size:11px;font-weight:800;color:#1C4076;flex:none;padding:0 4px}
 .district-navigation{display:none!important}
 /* Card occupies just its content's height and scrolls internally in larger precincts. */
 .canvass-area-list,body.has-mobile-progress .canvass-area-list{
  left:6px;top:calc(var(--header) + var(--scope) + 16px);
  width:110px;height:auto;bottom:auto;
  max-height:calc(100dvh - var(--header) - var(--scope) - var(--mobile-progress-size) - var(--mobile-switch-height) - env(safe-area-inset-bottom,0px) - 38px);
  overflow:hidden;border-radius:5px;
 }
 body.has-mobile-progress .canvass-area-list{top:calc(var(--header) + var(--scope) + var(--mobile-progress-size) + 16px)}
 .canvass-area-list header{padding:7px 29px 6px 6px}
 .canvass-area-list h2{font-size:20px}
 .canvass-area-list header>span{font-size:8px}
 .canvass-area-list-columns{grid-template-columns:23px 54px;gap:2px;padding:5px 3px 6px 6px;text-align:left;font-size:8px;line-height:1.15}
 .canvass-area-list ul{flex:0 1 auto;min-height:0;max-height:calc(100dvh - var(--header) - var(--scope) - var(--mobile-progress-size) - var(--mobile-switch-height) - env(safe-area-inset-bottom,0px) - 114px);overflow-x:hidden;overflow-y:auto}
 .canvass-area-list li button{grid-template-columns:22px 40px 14px;justify-content:start;gap:3px;min-height:44px;padding:7px 3px 7px 6px;align-items:center;font-size:12px}
 .canvass-area-list li i{justify-self:center}
 .canvass-area-list .area-list-collapse{top:6px;right:4px;width:24px;height:28px;font-size:18px}
 .canvass-area-list.is-collapsed{width:38px;height:98px;max-height:98px;bottom:auto}
 .canvass-area-list.is-collapsed .area-list-collapse{width:100%;height:100%;font-size:12px}
 #north-up,#tilt{display:none!important}
}


/* Accessibility and mobile interaction repairs. The stable external tab survives panel collapse. */
.areas-reopen{display:none}
@media(max-width:700px){
  #breadcrumbs{display:flex!important;max-width:100%!important;visibility:visible!important}
  .scope-bar{justify-content:flex-start!important}
  #areas-reopen[hidden]{display:none!important}
  body.has-area-reopen #areas-reopen{
    display:flex!important;position:fixed;z-index:27;
    left:6px;top:calc(var(--header) + var(--scope) + 16px);
    width:42px;height:112px;min-width:42px;min-height:112px;
    justify-content:center;align-items:center;
    background:#fff;color:#1C4076;border:1px solid #9aafc3;
    border-left:5px solid #1C4076;border-radius:0 7px 7px 0;
    box-shadow:2px 3px 10px #14245e33;
    cursor:pointer;font:700 13px/1.2 'Noto Sans',sans-serif;
    writing-mode:vertical-rl;
  }
  body.has-mobile-progress.has-area-reopen #areas-reopen{
    top:calc(var(--header) + var(--scope) + var(--mobile-progress-size) + 16px);
  }
  body.has-area-reopen .canvass-area-list.is-collapsed{display:none!important}
  #areas-reopen:focus-visible{outline:3px solid #3F9ED8;outline-offset:3px}
  .household-map-callout{
    position:fixed!important;left:auto!important;top:auto!important;
    right:8px!important;bottom:calc(var(--mobile-switch-height) + env(safe-area-inset-bottom,0px) + 12px)!important;
    width:min(235px,calc(100vw - 135px))!important;
    max-width:calc(100vw - 135px);max-height:min(32dvh,240px);overflow-y:auto;
    box-sizing:border-box;padding:10px 11px 11px;border-top:3px solid #1C4076;
    z-index:28;box-shadow:0 5px 18px #1a35532a;border-radius:7px;
  }
  body.has-area-reopen .household-map-callout{
    width:min(256px,calc(100vw - 61px))!important;
    max-width:calc(100vw - 61px);
  }
  .household-map-callout h3{font-size:16px;line-height:1.2;margin:0 27px 6px 0;overflow-wrap:anywhere}
  .household-callout-status{font-size:11px;gap:5px;margin-bottom:5px}
  .household-callout-facts{font-size:11px;padding-top:5px;padding-right:0}
  .household-callout-facts b{font-size:18px}
  .household-callout-close{width:34px;height:34px;right:2px;top:2px}
  .household-callout-pinned{position:static;display:inline-block;font-size:8px;margin-top:5px}
  .household-callout-leader{display:none!important}
  body.household-callout-open .legend:not([open]){display:none!important}
}


/* Outline-first area selection: one terracotta accent in map, area list and breadcrumb.
   Selection never changes household status colors or geographic fill. */
.canvass-area-list li button[aria-pressed="true"],
.canvass-area-list li button[aria-pressed="true"]:hover{
  background:#FAFAF8;box-shadow:inset 4px 0 #DB4D2B;
}
.canvass-area-list li button[aria-pressed="true"] .area-number,
.canvass-area-list li button[aria-pressed="true"] strong,
.canvass-area-list li button[aria-pressed="true"] strong small{color:#B6432B}
#breadcrumbs .area-current{display:inline-flex;align-items:center;gap:5px}
#breadcrumbs .area-current::before{
  content:"";display:block;flex:none;width:8px;height:8px;
  background:#DB4D2B;border-radius:50%;
}

/* Parish visit maps are always visible before a precinct is selected. */
.parish-tapestry-status{position:fixed;left:16px;bottom:24px;z-index:28;padding:8px 12px;max-width:calc(100vw - 32px);border:1px solid #B8CADD;border-radius:7px;background:#FFFFFFEE;color:#1C4076;font:12px/1.4 system-ui,sans-serif;pointer-events:none}
.parish-tapestry-status[hidden]{display:none}
@media(max-width:700px){.parish-tapestry-status{left:10px;bottom:calc(var(--mobile-switch-height,58px) + env(safe-area-inset-bottom,0px) + 16px);max-width:calc(100vw - 80px);font-size:11px}}