/* The site bar: every signed-in page, built per person by the Worker (siteNav in src/site.ts).
   Colours come from the page it sits on (--ink, --muted, --rule, --accent), so it
   follows each page's light and dark themes; the fallbacks are Truvon's. The
   pages' own element rules (buttons, links, forms) are reset here, never inherited. */
.cq-nav{all:initial;box-sizing:border-box;display:flex;align-items:stretch;flex:none;width:100%;height:48px;
 padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));
 background:transparent;border-bottom:1px solid var(--rule,#D5DBD6);position:relative;z-index:50;
 font:500 14px/1 "Public Sans",-apple-system,system-ui,sans-serif;color:var(--ink,#17201B);-webkit-font-smoothing:antialiased}
.cq-nav *{box-sizing:border-box}
.cq-nav a,.cq-nav button,.cq-nav form{all:unset}
.cq-nav a,.cq-nav button{cursor:pointer;display:inline-flex;align-items:center}
.cq-nav a:focus-visible,.cq-nav button:focus-visible{outline:2px solid var(--accent,#0E5C4A);outline-offset:-2px;border-radius:4px}
.cq-nav .cq-brand{gap:9px;padding-right:14px;color:var(--ink,#17201B)}
.cq-nav .cq-brand img{display:block;width:22px;height:22px;border-radius:5px}
.cq-nav .cq-brand span{font:700 16px/1 Besley,Georgia,serif;letter-spacing:-.005em}
.cq-links{display:flex;align-items:stretch}
.cq-links a{padding:0 10px;color:var(--muted,#5F6C65);box-shadow:inset 0 -2px 0 transparent}
.cq-links a:hover{color:var(--ink,#17201B)}
.cq-links a[aria-current]{color:var(--ink,#17201B);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent,#0E5C4A)}
.cq-nav .cq-right{display:flex;align-items:center;margin-left:auto}
.cq-nav form{display:flex;align-items:center}
.cq-nav button,.cq-nav .cq-act{font-size:13px;color:var(--muted,#5F6C65);padding:7px 10px;border:1px solid var(--rule,#D5DBD6);border-radius:6px}
.cq-nav button:hover,.cq-nav .cq-act:hover{color:var(--ink,#17201B)}
@media (max-width:520px){.cq-nav .cq-brand span{display:none}.cq-nav .cq-brand{padding-right:6px}.cq-nav .cq-links a{padding:0 8px}}
/* Truvon's mark: the name and the yellow square (DESIGN.md), in place of an icon */
.cq-nav .cq-brand b{font:800 18px/1 Besley,Georgia,serif;letter-spacing:-.02em}
.cq-nav .cq-brand i{display:inline-block;width:.32em;height:.32em;background:var(--checked,#F2CF3A);margin-left:.06em}
@media (max-width:520px){.cq-nav .cq-brand b{font-size:17px}}
