/* Region-picker typography only. Original map artwork and overlays are unchanged. */
@font-face{font-family:RegionSerif;src:url('fonts/region-serif.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@media(max-width:700px),(max-width:1000px) and (max-height:500px){
  .mobile-quick-nav{color:#edf2f5;background:linear-gradient(135deg,#344658 0%,#263847 58%,#202f3e 100%);border-top:1px solid #647487;padding-top:7px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));box-shadow:inset 0 1px 0 #ffffff0a}
  .quick-nav-head{gap:8px;min-height:44px}
  .quick-nav-head>strong{font-size:.875rem;font-weight:500;letter-spacing:.06em;color:#e8eef3}
  .quick-nav-tabs{background:#14233273;border:1px solid #81909c4d;border-radius:7px;padding:2px;gap:2px}
  .quick-nav-tabs button{min-height:40px;padding:6px 10px;color:#c4d0da;border-radius:5px;font-weight:400}
  .quick-nav-tabs button[aria-selected=true]{color:#ffedc2;background:#ffffff0c;box-shadow:inset 0 -2px 0 #d8b777}
  .quick-nav-collapse{color:#d3dde5;font-size:.8125rem}
  .quick-nav-items{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(54px,auto);max-height:181px;gap:6px;padding:7px 0 0;scrollbar-color:#84939f #ffffff08}
  .quick-nav-items button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:54px;padding:4px 2px;border:1px solid #b6c6d542;border-radius:7px;background:linear-gradient(155deg,#ffffff0e,#ffffff04);box-shadow:inset 0 1px 0 #ffffff09;color:#f4f6f8;white-space:normal;transition:background-color .15s,border-color .15s,box-shadow .15s}
  .quick-nav-items b{font-family:RegionSerif,'Noto Serif TC','Songti TC','PMingLiU',serif;font-size:1.5rem;line-height:1.12;font-weight:400;letter-spacing:.025em;font-variant-numeric:lining-nums tabular-nums}
  .quick-phase-unit{font-size:.875rem;margin-left:3px;letter-spacing:0}
  .quick-nav-items small{font-size:.75rem;line-height:1.2;font-weight:400;letter-spacing:0;color:#c7d2dc;max-width:100%;overflow-wrap:anywhere}
  .quick-nav-items button[aria-pressed=true]{border-color:#e2bf7e;background:linear-gradient(145deg,#77644055,#ffffff0d);box-shadow:inset 0 0 0 1px #ddba7638;color:#fff0ce}
  .quick-nav-items button[aria-pressed=true] small{color:#f0d9ad}
  .quick-nav-items button:active{background-color:#ffffff16;border-color:#ddc295}
  .mobile-quick-nav button:focus-visible{outline:2px solid #f4d18e;outline-offset:-3px}
  .quick-nav-items .is-outside{border-style:dashed}
  .quick-nav-items[data-kind=districts]{grid-template-columns:repeat(4,minmax(0,1fr))}
  .quick-nav-items[data-kind=districts] b{font-size:1.125rem;line-height:1.35;letter-spacing:.055em}
  .quick-nav-hint{color:#bccad5;font-size:.75rem;margin:7px 0 1px;line-height:1.35}
  .quick-nav-items p{color:#d7e0e7}
  .mobile-quick-nav.is-collapsed{padding-top:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom,0px))}
}
@media(hover:hover){.mobile-quick-nav button:hover{background-color:#ffffff12}.quick-nav-items button:hover{border-color:#d2b57c}}
@media(max-width:350px){.quick-nav-head{gap:3px}.quick-nav-head>strong{font-size:.8125rem;letter-spacing:0}.quick-nav-tabs button{padding:6px 7px}.quick-nav-items{gap:4px}.quick-nav-items b{font-size:1.375rem}.quick-phase-unit{margin-left:2px}.quick-nav-items[data-kind=districts] b{font-size:1rem;letter-spacing:0}}
@media(max-height:650px){.quick-nav-items{max-height:122px}}
@media(min-width:701px) and (max-width:1000px) and (max-height:500px){.quick-nav-items{max-height:61px}.quick-nav-hint{display:none}}
@media(prefers-reduced-motion:reduce){.quick-nav-items button{transition:none}}
@media(forced-colors:active){.mobile-quick-nav{background:Canvas;color:CanvasText}.mobile-quick-nav button,.mobile-quick-nav strong,.mobile-quick-nav small,.quick-nav-hint{color:CanvasText}.quick-nav-items button[aria-pressed=true],.quick-nav-tabs button[aria-selected=true]{outline:2px solid Highlight}}

@media(max-width:700px){.quick-nav-head{flex-wrap:wrap}.quick-nav-head>strong{flex:1}.quick-nav-head .quick-nav-tabs{order:3;flex:0 0 100%;margin:0;justify-content:space-between}.quick-nav-tabs button{flex:1;min-height:42px;padding:6px 7px}}

/* Equal tab widths keep Districts and Metro adjacent without clipping on phones. */
@media(max-width:700px){.mobile-quick-nav .quick-nav-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.mobile-quick-nav .quick-nav-tabs button{min-width:0;width:100%;padding:6px 3px}}