/* ══ notice-nav.css ════════════════════════════════════════════════════
   The bar across the top of every page. One file rather than a copy per
   page, because there are four of them now and a nav that drifts between
   pages is worse than no nav at all.

   It names no colour. Every value here is one of the site's own tokens, so
   the bar follows Auto / Light / Dark with the theme pill and this file
   never has to learn about the three-state shape in index.html.
   ═══════════════════════════════════════════════════════════════════════ */

/* Its own surface rather than the page ground, so it reads as a layer sitting
   over the page rather than the top of it.

   z-index 70 and not 60: the filter pops on the board are 60 and they live in
   the page's own stacking context, so the bar has to outrank them or the Type
   menu opens behind the Suburb one. */
.nav{position:sticky;top:0;z-index:70;background:var(--surface);
  border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:4px;padding:0 var(--pad);height:58px}
.nav .mark{margin-right:auto;font-family:var(--serif);font-size:27px;line-height:1;
  letter-spacing:-.025em;color:var(--ink);text-decoration:none}
.nav .mark:hover{opacity:.72}
.navmenu{position:relative;display:flex}

/* One shape for the plain links and the two menu buttons both, so About sits on
   the same baseline as Place and does not read as a different kind of thing. */
.navlink{position:relative;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--util);font-size:13px;font-weight:500;letter-spacing:.02em;
  color:var(--ink2);background:transparent;border:0;border-radius:999px;
  padding:8px 13px;cursor:pointer;text-decoration:none;white-space:nowrap}
.navlink:hover{color:var(--ink);background:var(--ground)}
.navlink:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.navlink[aria-current="page"],
.navlink[aria-expanded="true"]{color:var(--ink);background:var(--ground)}
.navlink .car{border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4.5px solid currentColor;opacity:.75}

/* The menus wear the board's filter pops, because it is the same gesture. */
.navpop{position:absolute;top:calc(100% + 4px);left:0;z-index:5;
  min-width:214px;max-height:min(64vh,460px);overflow-y:auto;padding:7px 0;
  background:var(--ground);border:1px solid var(--rule2);
  box-shadow:0 6px 26px rgba(0,0,0,.22)}
.navpop[hidden]{display:none}
.navpop.right{left:auto;right:0}
.navpop a{display:flex;align-items:center;gap:11px;padding:7px 15px;white-space:nowrap;
  font-family:var(--serif);font-size:16px;color:var(--ink);text-decoration:none}
/* ── the icon in a menu row ──
   The sprite is written into every page by notice-icons.js, so the bar can
   point at it like the board's rows do. The slot is always drawn, even for a
   type with no icon, or the labels either side of it would step left and
   right the way the board's names would. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.navpop .tslot{width:17px;height:17px;flex:none;display:grid;place-items:center}
.navpop .tic{width:17px;height:17px;color:var(--ink3)}
.navpop a:hover .tic{color:var(--ink)}
.navpop a[aria-current="page"] .tic{color:var(--ink)}
.navpop a:hover{background:var(--surface)}
.navpop a[aria-current="page"]{font-style:italic}
.navpop .grp{padding:12px 15px 4px;font-family:var(--util);font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.navpop .grp:first-child{padding-top:3px}

/* ── the pin count ──
   An outline pill so it reads as a tally rather than a button to press first;
   it fills in only while it is holding the board down to what you saved. It
   moved here from the board's masthead on 7 Sep 2026, because what you have
   kept is not a fact about one page. */
.savedpill{gap:8px;border:1px solid var(--rule2);padding:7px 13px;margin-left:6px;
  font-weight:600;letter-spacing:.06em;font-size:12.5px;line-height:1}
.savedpill:hover{border-color:var(--ink);color:var(--ink);background:transparent}
.savedpill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.savedpill b{font-weight:600;font-variant-numeric:tabular-nums}
.savedpill.empty{color:var(--ink3)}
/* grey until it is holding something, so the count and the colour say the same thing */
.savedpill .ic{font-size:13px;line-height:1;filter:grayscale(1);opacity:.75}
.savedpill:not(.empty) .ic{filter:none;opacity:1}

/* ── the hamburger, every width ──
   About, Place and Type are drawn in the bar and hidden here; they live in the
   panel, with the theme switcher at its foot. Delete the display:none to put
   them back on a wide screen. */
.navic{width:20px;height:20px;flex:none;display:block}
.nav a[data-nav="about"],.navmenu.place,.navmenu.type{display:none}
.navmenu.burger{display:flex}
.navlink.burger{padding:8px 8px}
.navpop.full{min-width:260px}
.navpop.full>a,.navsec{font-size:17px;padding:9px 15px}
/* the theme switcher, a small three-way segment at the foot of the panel */
.navtheme{display:flex;margin:4px 15px 8px;border:1px solid var(--rule2);border-radius:8px;overflow:hidden}
.navtheme button{flex:1 1 0;font-family:var(--util);font-size:12px;font-weight:600;letter-spacing:.04em;
  padding:8px 4px;border:0;border-right:1px solid var(--rule2);background:transparent;color:var(--ink2);cursor:pointer}
.navtheme button:last-child{border-right:0}
.navtheme button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.navtheme button:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.navsec{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:transparent;border:0;cursor:pointer;color:var(--ink);
  font-family:var(--serif);font-size:16px;padding:7px 15px}
.navsec .car{border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.75;transition:transform .15s}
.navsec[aria-expanded="true"] .car{transform:rotate(180deg)}
.navsec[aria-current="page"]{font-style:italic}
.secbox{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:6px 0;margin:4px 0}
.secbox[hidden]{display:none}

@media (max-width:700px){
  .nav{height:52px;gap:0}
  .nav .mark{font-size:23px}
  .navlink{padding:8px 9px;font-size:12.5px}
  .navlink.burger{padding:8px 6px 8px 8px;margin-right:-8px}
  .savedpill{padding:6px 11px;margin-left:4px}
  /* its panel takes the screen below the bar and scrolls on its own */
  .navpop.full{position:fixed;top:52px;left:0;right:0;bottom:0;
    max-height:none;min-width:0;border:0;border-top:1px solid var(--rule);
    box-shadow:none;padding:10px 0 48px;overscroll-behavior:contain}
  .navpop.full>a,.navsec{font-size:19px;padding:12px var(--pad)}
  .navpop.full .secbox a{padding-left:calc(var(--pad) + 12px)}
  .navpop.full .secbox .grp{padding-left:calc(var(--pad) + 12px)}
}
/* Below this Everything stops fitting beside the wordmark. It is the one to
   drop — the wordmark already goes there. */
@media (max-width:430px){ .nav a[data-nav="board"]{display:none} }