/* Shared site chrome: skip link, top nav, footer.
   Deliberately namespaced (--nav-*) so it composes with each document's own
   custom properties without colliding — the guide uses --structure/--accent,
   the other three use --key/--acc for the same values. */
:root{
  --nav-paper:#FBFBFC; --nav-ink:#191C22; --nav-soft:#4A505C;
  --nav-rule:#D8DAE0; --nav-key:#2E4A7D; --nav-bg:#F6F7F9;
}
@media (prefers-color-scheme:dark){
  :root{
    --nav-paper:#15171C; --nav-ink:#E8E9EC; --nav-soft:#9BA1AD;
    --nav-rule:#2E323B; --nav-key:#8FAEE0; --nav-bg:#111318;
  }
}

/* Chrome tracks each document's own content column. build.mjs sets
   --content-max / --content-pad per page from that page's .wrap rule; the
   defaults here match the guide. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--nav-key);color:#fff;padding:.55rem 1rem;border-radius:0 0 3px 0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:.85rem;
  text-decoration:none}
.skip:focus{left:0}

.sitenav{border-bottom:1px solid var(--nav-rule);background:var(--nav-bg)}
.sitenav .sitenav-inner{max-width:var(--content-max,44rem);margin:0 auto;
  padding:.5rem var(--content-pad,1.4rem);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .3rem;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.sitenav .brand{font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;
  font-weight:700;color:var(--nav-key);text-decoration:none;margin-right:.9rem;
  white-space:nowrap}
.sitenav a.nl{font-size:.8rem;color:var(--nav-soft);text-decoration:none;
  padding:.3rem .6rem;border-radius:3px;white-space:nowrap}
.sitenav a.nl:hover{color:var(--nav-ink);background:var(--nav-paper)}
.sitenav a.nl:focus-visible{outline:2px solid var(--nav-key);outline-offset:1px}
.sitenav a.nl[aria-current="page"]{color:var(--nav-key);font-weight:700;
  background:var(--nav-paper);box-shadow:inset 0 -2px 0 var(--nav-key)}

.sitefoot{border-top:1px solid var(--nav-rule);margin-top:4rem;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.sitefoot .sitefoot-inner{max-width:var(--content-max,44rem);margin:0 auto;
  padding:1.6rem var(--content-pad,1.4rem) 3rem;
  font-size:.74rem;line-height:1.6;color:var(--nav-soft)}
.sitefoot p{margin:0 0 .5rem}
.sitefoot p:last-child{margin-bottom:0}
.sitefoot a{color:var(--nav-soft)}

/* The guide's fixed 19rem sidebar: keep chrome in the content column,
   mirroring the existing body.hasnav .wrap rule. */
body.hasnav .sitenav-inner,
body.hasnav .sitefoot-inner{margin-left:19rem}
@media (max-width:1180px){
  body.hasnav .sitenav-inner,
  body.hasnav .sitefoot-inner{margin-left:auto}
}
/* Five sections plus a search affordance wraps to three rows on a phone.
   Keep it one scrollable row instead — the nav should not own a third of the
   viewport before any content appears. */
@media (max-width:700px){
  .sitenav .sitenav-inner{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-top:.35rem;padding-bottom:.35rem}
  .sitenav .sitenav-inner::-webkit-scrollbar{display:none}
  .sitenav .brand{margin-right:.5rem}
  .sitenav a.nl{padding:.25rem .45rem;font-size:.78rem}
  .navsearch{position:sticky;right:0}
  .navsearch kbd{display:none}
}

@media print{.sitenav,.skip{display:none}
  .sitefoot{margin-top:1.5rem;border-top:1px solid #999}
  body.hasnav .sitefoot-inner{margin-left:0}}

.sr-overlay{position:fixed;inset:0;background:rgba(20,22,28,.45);z-index:200;
  display:none;align-items:flex-start;justify-content:center;padding:8vh 1rem 1rem}
.sr-overlay.open{display:flex}
.sr-panel{width:100%;max-width:40rem;background:var(--nav-paper);border:1px solid var(--nav-rule);
  border-radius:4px;box-shadow:0 12px 40px rgba(0,0,0,.3);padding:.9rem;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;max-height:80vh;
  display:flex;flex-direction:column}
.sr-input{width:100%;padding:.6rem .7rem;font-size:1rem;border:1px solid var(--nav-rule);
  border-radius:3px;background:var(--nav-bg);color:var(--nav-ink);font-family:inherit}
.sr-results{overflow-y:auto;margin-top:.6rem}
.sr-hit{display:block;padding:.55rem .6rem;border-radius:3px;text-decoration:none;color:var(--nav-ink)}
.sr-hit:hover{background:var(--nav-bg)}
.sr-where{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--nav-key);font-weight:700}
.sr-title{display:block;font-size:.9rem;font-weight:600;margin:.1rem 0}
.sr-snip{display:block;font-size:.78rem;color:var(--nav-soft);line-height:1.45}
.sr-empty{font-size:.85rem;color:var(--nav-soft);padding:.6rem}
.sr-hint{font-size:.68rem;color:var(--nav-soft);margin:.5rem 0 0;text-align:right}
.navsearch{margin-left:auto;font-family:inherit;font-size:.75rem;background:transparent;
  color:var(--nav-soft);border:1px solid var(--nav-rule);border-radius:3px;
  padding:.22rem .5rem;cursor:pointer}
.navsearch:hover{color:var(--nav-ink);background:var(--nav-paper)}
.navsearch kbd{font-family:inherit;border:1px solid var(--nav-rule);border-radius:2px;
  padding:0 .25rem;margin-left:.25rem;font-size:.9em}
@media print{.sr-overlay,.navsearch{display:none !important}}