/* <cad-nav> styles. Link this file in <head> (render-blocking), so the tree is styled, and folded on narrow screens,
 * from the first paint: <link rel="stylesheet" href="/kit/nav.css">. nav.js adds the behaviour.
 * Kit rules sit in :where() (zero specificity): the --cad-nav-* custom properties or any page rule win. Narrow layout:
 * below 1100px (override the two media queries below to change it). */
:where(cad-nav){display:block;font:var(--cad-nav-font,13px/1.5 system-ui,sans-serif);color:var(--cad-nav-fg,#173d3c)}
:where(cad-nav .cad-nav-panel){position:sticky;top:var(--cad-nav-top,96px);max-height:calc(100vh - var(--cad-nav-top,96px) - 16px);
  overflow:auto;padding:4px 10px 24px 4px;scrollbar-width:thin}
:where(cad-nav .cad-nav-filter){position:sticky;top:4px;z-index:1;display:block;width:100%;box-sizing:border-box;margin:0 0 12px;
  padding:8px 12px;border-radius:999px;font:inherit;border:1px solid var(--cad-nav-input-line,#6f8a80);
  background:var(--cad-nav-bg,#fff);color:inherit;
  /* page colour above (the panel's 4px top padding) and below (the 12px margin), so no link shows around the pill */
  box-shadow:0 -4px 0 4px var(--cad-nav-page,#fffdf5),0 8px 0 4px var(--cad-nav-page,#fffdf5)}
:where(cad-nav .cad-nav-filter:focus-visible){outline:2px solid var(--cad-nav-accent,#bd3a12);outline-offset:1px}
:where(cad-nav .cad-nav-empty:not(:empty)){margin:0 0 12px;padding:8px 12px;border-radius:10px;background:var(--cad-nav-current,#f0f5e7)}
:where(cad-nav details){margin:0 0 6px}
:where(cad-nav summary){cursor:pointer;font-weight:700;font-size:.78em;letter-spacing:.08em;text-transform:uppercase;padding:6px 4px;
  color:var(--cad-nav-muted,#526863);list-style-position:inside}
:where(cad-nav ul, cad-nav ol, .cad-nav-rail){list-style:none;margin:0;padding:0}
:where(cad-nav li a, .cad-nav-rail a){display:block;padding:4px 8px 4px 12px;border-left:2px solid transparent;color:inherit;
  text-decoration:none;border-radius:0 8px 8px 0;overflow-wrap:anywhere}
:where(cad-nav li a:hover, .cad-nav-rail a:hover){background:var(--cad-nav-hover,#eef1e4)}
:where(cad-nav li a:focus-visible, .cad-nav-rail a:focus-visible){outline:2px solid var(--cad-nav-accent,#bd3a12);outline-offset:-2px}
:where(cad-nav a[aria-current=page]){font-weight:700;border-left-color:var(--cad-nav-accent,#bd3a12);background:var(--cad-nav-current,#f0f5e7)}
:where(.cad-nav-outline){margin:2px 0 8px 14px;border-left:1px solid var(--cad-nav-line,#c9d8ca)}
:where(.cad-nav-outline.cad-nav-rail){margin:0}
:where(.cad-nav-outline a){font-size:.92em;padding:3px 8px;color:var(--cad-nav-muted,#526863)}
:where(.cad-nav-outline .h3 a){padding-left:20px;font-size:.88em}
:where(.cad-nav-outline a[aria-current=location]){color:var(--cad-nav-fg,#173d3c);font-weight:650;border-left-color:var(--cad-nav-active,#2e9d5b)}
:where(cad-nav .cad-nav-toggle){display:none}
cad-nav [hidden]{display:none!important}
@media(max-width:1099.98px){
  :where(cad-nav .cad-nav-panel){position:static;max-height:none;overflow:visible;padding:0}
  :where(cad-nav .cad-nav-filter){position:static;box-shadow:none}
  :where(cad-nav .cad-nav-toggle){display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
    box-sizing:border-box;padding:10px 16px;min-height:44px;border-radius:12px;border:1px solid var(--cad-nav-input-line,#6f8a80);
    background:var(--cad-nav-current,#f0f5e7);color:inherit;font:inherit;font-weight:700;cursor:pointer;text-align:left}
  :where(cad-nav .cad-nav-toggle)::after{content:"▾";transition:transform .15s}
  :where(cad-nav[data-open] .cad-nav-toggle)::after{transform:rotate(180deg)}
  cad-nav:not([data-open]) .cad-nav-panel{display:none}
  :where(cad-nav[data-open] .cad-nav-panel){margin-top:10px}
}
/* Without script there is nothing to toggle or filter: show the tree as plain links. */
@media(scripting:none){
  cad-nav .cad-nav-toggle,cad-nav .cad-nav-filter{display:none}
  cad-nav:not([data-open]) .cad-nav-panel{display:block}
}
@media(prefers-reduced-motion:reduce){:where(cad-nav .cad-nav-toggle)::after{transition:none}}