/* ═══════════════════════════════════════════════════════════ sidebar-nav.css — shared app navigation drawer Injected server-side (see server.js) into every .html page except studio.html. Renders as a fixed overlay — does NOT participate in any page's own flex/grid layout, so no existing page markup needs to change to make room for it. Uses only CSS vars every page already defines: --panel --border --ink --mid --tag-bg --ink-soft --card --surface --radius --shadow-md ═══════════════════════════════════════════════════════════ */ #asnRoot { position: fixed; top: 0; left: 0; height: 100vh; width: 188px; z-index: 4000; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: .6rem 0; overflow-y: auto; overflow-x: hidden; box-shadow: var(--shadow-md); transition: width .15s ease; font-family: 'Plus Jakarta Sans', sans-serif; } #asnRoot.asn-collapsed { width: 44px; } #asnRoot .asn-firm { padding: .5rem 1rem .8rem; border-bottom: 1px solid var(--border); margin-bottom: .4rem; white-space: nowrap; overflow: hidden; } #asnRoot .asn-firm-name { font-size: .78rem; font-weight: 600; color: var(--ink); } #asnRoot .asn-firm-sub { font-size: .58rem; color: var(--mid); letter-spacing: .06em; } #asnRoot.asn-collapsed .asn-firm-sub { display: none; } #asnRoot .asn-section { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding: .7rem 1rem .3rem; margin-top: .3rem; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--border); flex-shrink: 0; } #asnRoot .asn-firm + .asn-section { margin-top: 0; border-top: none; } #asnRoot.asn-collapsed .asn-section { opacity: 0; height: 0; padding: 0; margin: 0; border: none; overflow: hidden; } #asnRoot .asn-subsection { font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); padding: .55rem 1rem .2rem; margin-top: .5rem; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; } #asnRoot.asn-collapsed .asn-subsection { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; } #asnRoot .asn-item { display: flex; align-items: center; gap: .5rem; padding: .48rem 1rem; font-size: .73rem; font-weight: 500; color: var(--ink-soft); cursor: pointer; border: none; background: transparent; width: 100%; box-sizing: border-box; text-align: left; text-decoration: none; font-family: 'Plus Jakarta Sans', sans-serif; transition: all .12s; border-left: 2.5px solid transparent; white-space: nowrap; } #asnRoot .asn-item:hover { background: var(--card); color: var(--ink); } #asnRoot .asn-item.active { background: var(--tag-bg); color: var(--ink); border-left-color: var(--ink); font-weight: 600; } #asnRoot .asn-icon { font-size: .8rem; width: 1rem; text-align: center; flex-shrink: 0; } #asnRoot .asn-label { overflow: hidden; text-overflow: ellipsis; } #asnRoot.asn-collapsed .asn-label { display: none; } #asnToggle { position: fixed; top: .6rem; z-index: 4001; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--ink-soft); font-size: .7rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); transition: left .15s ease, color .12s; } #asnToggle:hover { color: var(--ink); } /* Search box — a searchable dropdown of every allowed page, not an inline filter (see #asnSearchDropdown below, appended to so it can escape #asnRoot's own overflow clipping via position:fixed). */ #asnRoot .asn-search-wrap { padding: 0 1rem .5rem; flex-shrink: 0; } #asnRoot.asn-collapsed .asn-search-wrap { display: none; } #asnRoot .asn-search { width: 100%; box-sizing: border-box; font-size: .7rem; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--ink); font-family: inherit; } #asnRoot .asn-search:focus { outline: none; border-color: var(--ink-soft); } #asnSearchDropdown { position: fixed; z-index: 4100; background: var(--card); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow-md); max-height: 260px; overflow-y: auto; font-family: 'Plus Jakarta Sans', sans-serif; } .asn-search-item { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; font-size: .72rem; color: var(--ink-soft); cursor: pointer; } .asn-search-item .asn-icon { font-size: .8rem; width: 1rem; text-align: center; flex-shrink: 0; } .asn-search-item:hover, .asn-search-item.active { background: var(--tag-bg); color: var(--ink); } .asn-search-empty { padding: .5rem .6rem; font-size: .7rem; color: var(--mid); } /* Collapsible module groups (one per category) */ #asnRoot .asn-subsection-toggle { display: flex; align-items: center; gap: .35rem; width: 100%; border: none; background: transparent; cursor: pointer; text-align: left; font-family: inherit; } #asnRoot .asn-chevron { font-size: .55rem; width: .8rem; flex-shrink: 0; } #asnRoot .asn-modgroup .asn-group-items { display: none; } #asnRoot .asn-modgroup.asn-expanded .asn-group-items { display: block; } /* Never show the drawer (or the page-push it causes) in print output */ @media print { #asnRoot, #asnToggle { display: none !important; } body { margin-left: 0 !important; width: auto !important; } }