/* Shared by every page. Uses the colour tokens each page defines on :root. */
:root{--brand:#5C74B7;}
@media (prefers-color-scheme: dark){:root{--brand:#7A8CBD;}}

/* ---------- site navigation ---------- */
.sitenav{border-bottom:1px solid var(--border);margin-inline:-16px;padding-inline:16px;background:var(--surface);}
.sitenav-in{max-width:1040px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding-block:8px;}
.sitenav .brand{display:inline-flex;align-items:center;margin-right:auto;padding:4px 4px 4px 0;text-decoration:none;}
.sitenav .brand img{display:block;height:36px;width:auto;}
.sitenav a.nav-link{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.76rem;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;color:var(--grey);padding:8px 12px;border-radius:6px;}
.sitenav a.nav-link:hover{color:var(--link);}
.sitenav a.nav-link[aria-current="page"]{background:var(--accent);color:var(--accent-ink);font-weight:500;}
.sitenav a:focus-visible{outline:2px solid var(--link);outline-offset:2px;}
.sitenav .badge{display:inline-block;min-width:1.4em;margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--brand);color:#fff;font-size:.68rem;text-align:center;}

/* ---------- star ratings (used by the directory and the review pages) ---------- */
.stars{display:inline-flex;gap:1px;font-size:1rem;line-height:1;letter-spacing:0;vertical-align:middle;}
.stars .s{color:var(--border);}
.stars .s.f{color:var(--brand);}
.stars .s.h{background:linear-gradient(90deg,var(--brand) 50%,var(--border) 50%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.rating-line{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--grey);}
.rating-line b{color:var(--ink);font-weight:600;}