/* ---------- the panel ---------- */
.side { position: relative; }
.side-list { display: grid; margin: 0; padding: 0; list-style: none; }
/* a row the filter leaves out folds through its grid row (--v and the fr written by sidebar.js), its gap with it */
.side-node { --v: 1; display: grid; min-width: 0; }
.side-node + .side-node { padding-top: calc(3px * var(--v)); }
.side-node.side-gone, .side-node.side-gone .side-group.side-shown { visibility: hidden; }
.side-box { min-width: 0; min-height: 0; }
.side-row { display: flex; align-items: center; gap: 6px; }

/* ---------- the text pill: opens its page ---------- */
.side-text { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; height: 40px; padding: 0 15px 0 16px; border: 0; border-radius: 999px; background-color: color-mix(in srgb, var(--paper) 0%, transparent); color: var(--ink); font: inherit; font-weight: 800; font-size: 15px; line-height: 1; letter-spacing: .01em; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
	transition: background-color .6s var(--ease), color .6s var(--ease), box-shadow .6s var(--ease), translate .6s var(--ease), scale .6s var(--ease); }
.side-label { flex: 1; min-width: 0; padding-block: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-slot { position: relative; flex: none; width: 8px; height: 8px; margin-left: 10px; }
.side-lock { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 0 8px 0 -3px; }
.side-lock svg { width: 18px; height: 18px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.side-lock rect { fill: currentColor; fill-opacity: .14; }
.side-keyhole { stroke-width: 2.2; }
/* the row's icon (Button Icon: classes of the page's own stylesheet, drawn at --si); a slot even without one, so labels line
	up; an icon too faint on the light pill sits on a dark chip (si-dk), one too dark on the current row's ink a light one (si-lt) */
.side-ico { --si: 16px; flex: none; width: 16px; height: 16px; margin: 0 8px 0 -8px; border-radius: 5px; background-color: rgb(var(--shadow-rgb) / 0); box-shadow: 0 0 0 2px rgb(var(--shadow-rgb) / 0);
	transition: background-color .6s var(--ease), box-shadow .6s var(--ease); }
.side-lock + .side-ico { margin-left: 0; }
.side-ico.si-dk { background-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.side-current .side-ico.si-lt { background-color: var(--paper); box-shadow: 0 0 0 2px var(--paper); transition-duration: .35s; }
.side-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) {
	.side-text:hover { background-color: var(--paper); translate: 0 -1px; transition-duration: .35s, .35s, .35s, .35s, .6s; }
	.side-text.side-current:hover { background-color: color-mix(in srgb, var(--ink) 90%, var(--card)); box-shadow: var(--shadow-md); }
}
.side-text:active { scale: .97; transition-duration: .35s, .35s, .35s, .35s, .4s; }
.side-text.side-current { background-color: var(--ink); color: var(--paper); box-shadow: var(--shadow-sm); transition-duration: .35s, .35s, .35s, .35s, .6s; }
.side-text:focus-visible { outline-offset: 2px; border-radius: 999px; }
.side-sub .side-text { height: 38px; font-weight: 600; font-size: 14.5px; }

/* ---------- the toggle: opens and closes the children ---------- */
.side-toggle { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background-color: var(--paper); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; opacity: var(--appear, 1);
	transition: background-color .6s var(--ease), color .6s var(--ease), box-shadow .6s var(--ease), translate .6s var(--ease), scale .6s var(--ease); }
.side-arrow { width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; rotate: calc(var(--open, 0) * 180deg); scale: calc(.4 + .6 * var(--appear, 1)); }
@media (hover: hover) { .side-toggle:hover { background-color: var(--ink); color: var(--paper); box-shadow: var(--shadow-sm); translate: 0 -1px; transition-duration: .35s, .35s, .35s, .35s, .6s; } }
.side-toggle:active { scale: .88; transition-duration: .35s, .35s, .35s, .35s, .4s; }
.side-toggle:focus-visible { outline-offset: 2px; border-radius: 50%; }
.side-gap { flex: none; width: 32px; height: 32px; }

/* ---------- the children ---------- */
.side-group { height: 0; overflow: clip; visibility: hidden; }
.side-group.side-shown { visibility: visible; }
.side-sub .side-sub { margin-left: 8px; padding-left: 8px; }
.side-sub .side-sub .side-text { font-size: 13.5px; }
.side-sub { margin-left: 14px; padding: 3px 0 1px 11px; border-left: 1.5px solid color-mix(in srgb, var(--ink) 10%, transparent); opacity: var(--open, 0); translate: 0 calc((1 - var(--open, 0)) * -6px); }

/* ---------- the dot ---------- */
.side-dot { position: absolute; inset: 0; z-index: 2; border-radius: 50%; background: #16a34a; pointer-events: none;
	box-shadow: 0 0 0 2px rgb(22 163 74 / .22), 0 0 10px 2px rgb(22 163 74 / .75); opacity: var(--show, 0); scale: calc(.35 + .65 * var(--show, 0)); }
.side-dot.side-loose { inset: auto; left: -4px; top: -4px; width: 8px; height: 8px; }
.side-dot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(closest-side, rgb(22 163 74 / .5), rgb(22 163 74 / 0)); opacity: .55; animation: side-glow 2.8s ease-in-out var(--phase, 0s) infinite alternate; }
@keyframes side-glow { to { opacity: 1; scale: 1.2; } }
@media (prefers-reduced-motion: reduce) { .side-dot::after { animation: none; opacity: .75; } }

/* ---------- the search (sidesearch.js): a pill that stays at the top of the card while the tree scrolls, its hits under it ---------- */
.side-search { position: sticky; top: 0; z-index: 3; padding: 2px 0 8px; background: var(--card); }
.side-search::after { content: ""; position: absolute; left: -8px; right: -8px; bottom: -10px; height: 10px; background: linear-gradient(rgb(var(--shadow-rgb) / .07), rgb(var(--shadow-rgb) / 0)); opacity: 0; pointer-events: none; transition: opacity .6s var(--ease); }
.side-search.side-stuck { box-shadow: 0 -48px 0 var(--card); }
.side-search.side-stuck::after { opacity: 1; transition-duration: .35s; }
@media (scripting: none) { .side-search { display: none; } }
.side-search-field { position: relative; display: flex; align-items: center; height: 40px; border-radius: 999px; background-color: var(--paper); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 0%, transparent);
	transition: background-color .6s var(--ease), box-shadow .6s var(--ease); }
@media (hover: hover) { .side-search-field:hover { background-color: color-mix(in srgb, var(--ink) 6%, var(--paper)); transition-duration: .35s; } }
.side-search-field:focus-within { background-color: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); transition-duration: .35s; }
.side-search-ico { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; pointer-events: none; }
.side-search-input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 44px 0 40px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-weight: 600; font-size: 15px; line-height: 1; outline: none; -webkit-appearance: none; appearance: none; }
.side-search-input::placeholder { color: var(--muted); opacity: 1; }
.side-search-key { position: absolute; right: 9px; top: 50%; min-width: 22px; height: 22px; margin-top: -11px; padding: 0 6px; border-radius: 6px; font-size: 12px; pointer-events: none; transition: opacity .6s var(--ease), scale .6s var(--ease); }
.side-search-field:focus-within .side-search-key, .side-typed .side-search-key { opacity: 0; scale: .8; transition-duration: .35s; }
.side-search-clear { position: absolute; right: 5px; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; padding: 0; border: 0; border-radius: 50%; background-color: color-mix(in srgb, var(--ink) 0%, transparent); color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent;
	opacity: 0; scale: .6; visibility: hidden; transition: opacity .6s var(--ease), scale .6s var(--ease), background-color .6s var(--ease), color .6s var(--ease), visibility 0s linear .6s; }
.side-search-clear svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.side-typed .side-search-clear { opacity: 1; scale: 1; visibility: visible; transition-duration: .35s, .35s, .6s, .6s, 0s; transition-delay: 0s; }
@media (hover: hover) { .side-typed .side-search-clear:hover { background-color: var(--ink); color: var(--paper); transition-duration: .35s; transition-delay: 0s; } }
.side-typed .side-search-clear:active { scale: .86; transition-duration: .35s, .4s, .35s, .35s, 0s; }
.side-search-clear:focus-visible { outline-offset: 1px; border-radius: 50%; }
@media (hover: none), (pointer: coarse) { .side-search-key { display: none; } }
@media (pointer: coarse) {
	.side-search-field { height: 44px; }
	.side-search-input { font-size: 16px; }
	.side-search-clear { width: 36px; height: 36px; margin-top: -18px; right: 4px; }
}

.side-hits-box { position: relative; }
.side-hits { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.side-hit { min-width: 0; padding-bottom: 2px; }
.side-hit.side-leaving { position: absolute; left: 0; right: 0; pointer-events: none; }
.side-hit-link { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 14px; border-radius: 16px; background-color: color-mix(in srgb, var(--paper) 0%, transparent); color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
	transition: background-color .6s var(--ease), scale .6s var(--ease); }
.side-hit[aria-selected="true"] .side-hit-link { background-color: var(--paper); transition-duration: .35s, .6s; }
.side-hit-link:active { scale: .97; transition-duration: .35s, .4s; }
.side-hit-ico { --si: 16px; flex: none; width: 16px; height: 16px; border-radius: 5px; }
.side-hit-ico.si-dk { background-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.side-hit-text { display: grid; gap: 2px; min-width: 0; }
.side-hit-name { overflow: hidden; font-weight: 600; font-size: 14.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.side-hit-name mark { background: none; color: inherit; font-weight: 850; }
.side-hit-kind { overflow: hidden; font-weight: 600; font-size: 12.5px; line-height: 1.2; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.side-hits-none { margin: 0; padding: 10px 16px 12px; font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--muted); }
.side-hits-none.side-leaving { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }

/* ---------- the drawer (narrow screens) ---------- */
html.side-locked { overflow: hidden; }
.side-backdrop { position: fixed; inset: 0; z-index: 48; background: rgb(var(--shadow-rgb) / .3); opacity: var(--d, 0); pointer-events: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
.side-backdrop.side-live { pointer-events: auto; }
.side-drawer { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: min(320px, calc(100vw - 56px)); margin: 0; overflow-y: auto; overscroll-behavior: contain;
	padding: max(12px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
	border-radius: 0 28px 28px 0; background: var(--card); box-shadow: var(--shadow-md); translate: calc((var(--d, 0) - 1) * (100% + 40px)) 0; visibility: hidden; }
.side-drawer.side-drawer-shown { visibility: visible; }

@media (pointer: coarse) {
	.side-text { height: 44px; }
	.side-sub .side-text { height: 42px; }
	.side-toggle, .side-gap { width: 40px; height: 40px; }
}