/* Site-wide "District links" menu in the top bar (both the app and the About the district page). */
.dlinks{position:relative;display:inline-block}
.dlinks summary{list-style:none;cursor:pointer;font-size:14px;color:var(--fg)}
.dlinks summary::-webkit-details-marker{display:none}
.dlinks[open] summary{color:var(--accent)}
.dlinks .pop{position:absolute;left:auto;right:0;top:calc(100% + 8px);z-index:60;min-width:260px;max-width:min(320px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 22px rgba(0,0,0,.18);padding:6px;display:grid}
.dlinks .pop a{display:block;padding:7px 10px;border-radius:5px;text-decoration:none;color:var(--fg);font-size:14px}
.dlinks .pop a:hover,.dlinks .pop a:focus-visible{background:var(--accent-soft);color:var(--accent)}
.dlinks .pop a span{display:block;font-size:12px;color:var(--muted)}
.dlinks .pop small{padding:6px 10px 4px;color:var(--muted);font-size:12px;border-top:1px solid var(--line);margin-top:4px}
@media (max-width:640px){.dlinks .pop{position:fixed;left:12px;right:12px;top:auto;max-width:none}}

/* Phone header: one line (brand + Menu button); the links open as a panel. */
.navbtn{display:none;font:inherit;font-size:14px;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--fg);cursor:pointer}
@media (max-width:700px){
  header.top .wrap{flex-wrap:nowrap;gap:10px}
  .brand small{display:none}
  .navbtn{display:inline-block}
  header.top nav{display:none;position:absolute;left:0;right:0;top:100%;z-index:70;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 8px 18px rgba(0,0,0,.18);padding:6px 16px 12px;flex-direction:column;gap:0}
  html.navopen header.top nav{display:flex}
  header.top nav > a{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
  header.top nav .dlinks{padding:10px 0}
  header.top nav .dlinks .pop{position:static;box-shadow:none;border:0;padding:4px 0 0;min-width:0;max-width:none}
  header.top{position:sticky;top:0;z-index:50}
  header.top .wrap{position:relative}
}
/* Banner B on every page: sticky, and one thin line once you scroll. */
html.bb header.top{position:sticky;top:0;z-index:50}
html.bb.shrunk header.top{box-shadow:0 2px 8px rgba(0,0,0,.18)}
html.bb.shrunk header.top .wrap{padding-block:4px;flex-wrap:nowrap}
html.bb.shrunk .brand{font-size:15px}
html.bb.shrunk .brand small{display:none}