/* ========================================================================== THE DESK'S NAV RAIL, one stylesheet for every chrome that renders it. These rules were inside floor/shell.html until 2026-09-04, which is why the rail existed on the board and nowhere else. They are here now, and the ONLY thing that stays with each page is where its 56 or 244 pixels go: the board keeps the grid column it already had, and base.html's document pages get a fixed rail plus a body padding (the .railed rules at the bottom). THE STATE CLASS LIVES ON , not on a page specific wrapper. The board has #app to hang a class on and a document page has nothing, so the one element every chrome shares is the document element. One class, read by two layouts, written by one script. COLOURS COME FROM VARIABLES WITH FALLBACKS. The board defines its palette (--panel2, --line, --text, --muted, --chip); base.html does not define any of it, so every colour below carries the board's own value as the fallback. That way the rail looks like the desk on a document page without base.html having to adopt a palette it does not otherwise use, and if base.html ever declares those variables the rail follows them instead. ========================================================================== */ nav.ikrail { /* BORDER-BOX, AND THE BROWSER CHECK IS WHY. The board's own stylesheet has a global box-sizing reset and base.html has none, so on a document page the rail's declared 244px became 265px (244 plus 20px of padding and a 1px border) while the body reserved exactly 244. The rail's right edge sat 21px over the content: the heading on /models/ started underneath it. A width that only means what it says on one of the two chromes is not a shared rail. */ box-sizing: border-box; background: var(--panel2, #0F161F); border-right: 1px solid var(--line, #1E2A38); padding: 14px 10px; color: var(--text, #E8EDF4); font: 14px/1.45 "IBM Plex Sans", "Segoe UI", sans-serif; } nav.ikrail .brand { font-weight: 800; font-size: 18px; letter-spacing: .5px; padding: 2px 8px 14px; display: flex; align-items: center; gap: 12px; } nav.ikrail .brand img { height: 32px; width: 32px; border-radius: 6px; transform: rotate(-4deg); } nav.ikrail .wordmark { font-family: "Fredoka", "Archivo", sans-serif; font-weight: 700; line-height: 1.05; } nav.ikrail .wordmark .ike { color: #E8EDF4; } nav.ikrail .wordmark .dig { color: #33C481; } nav.ikrail .subline { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: #8A97A8; font-family: "IBM Plex Sans", sans-serif; font-weight: 500; } nav.ikrail .grp { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted, #8A97A8); padding: 12px 8px 4px; } nav.ikrail .desk { display: flex; justify-content: space-between; align-items: center; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-weight: 600; } nav.ikrail .desk:hover { background: var(--chip, #182231); } nav.ikrail .sub { padding-left: 10px; } nav.ikrail .sub a { display: flex; justify-content: space-between; padding: 5px 8px; border-radius: 6px; color: var(--text, #E8EDF4); text-decoration: none; font-size: 13px; } nav.ikrail .sub a:hover { background: var(--chip, #182231); } nav.ikrail .sub .lock { color: var(--muted, #8A97A8); font-size: 10px; letter-spacing: .5px; } nav.ikrail .sub a.locked { color: var(--muted, #8A97A8); pointer-events: none; } .navtog { display: block; width: 100%; margin: 0 0 6px; padding: 4px 6px; background: var(--chip, #182231); color: var(--muted, #8A97A8); border: 1px solid var(--line, #1E2A38); border-radius: 6px; cursor: pointer; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-family: inherit; } .navtog:hover { color: var(--text, #E8EDF4); } /* ------------------------------------------------------------ THE ACTIVE MARK A nav that appears on seventeen pages and never says which one you are on fails at the one job a nav has. Nothing did this while the rail lived only on the board, because the board WAS the page. nav.js sets it from location.pathname; a page opened with JS off simply has no mark, which is the same trade the collapse itself makes. */ nav.ikrail .sub a.here { background: var(--chip, #182231); box-shadow: inset 2px 0 0 var(--accent, #F0A93B); font-weight: 700; } nav.ikrail .desk.here-parent { color: var(--accent, #F0A93B); } /* ---------------------------------------------------------------- COLLAPSED Everything below is the same rail with its labels traded for monograms. data-mono through content:attr() means the rail carries no second copy of each row's identity that could drift from the label beside it, and there are no icon assets in this repo to use instead. WHY !important ON THE DESK SUB-LISTS: toggleDesk writes display inline, and an inline style beats a stylesheet rule. Kevin can leave a group open, collapse the rail, and reload, so the collapsed rail has to be able to overrule a saved open group rather than render a sub-list into 56px. THE FLOOR LINKS STAY REACHABLE as monograms rather than being hidden with the desk groups: they are destinations, not disclosure toggles, and hiding them would put eight pages behind a rail the reader has to widen first. */ html.narrownav nav.ikrail { padding: 14px 6px; overflow: hidden; } html.narrownav nav.ikrail .brand { padding: 2px 0 10px; justify-content: center; gap: 0; } html.narrownav nav.ikrail .brand > span { display: none; } html.narrownav nav.ikrail .grp { padding: 10px 0 4px; text-align: center; font-size: 9px; letter-spacing: .4px; } html.narrownav nav.ikrail .desk { justify-content: center; padding: 8px 0; } html.narrownav nav.ikrail .desk > span { display: none; } html.narrownav nav.ikrail .desk::before { content: attr(data-mono); font-size: 12px; font-weight: 800; letter-spacing: .5px; } html.narrownav nav.ikrail .desk + .sub { display: none !important; } html.narrownav nav.ikrail .sub { padding-left: 0; } /* font-size:0 hides the link's own TEXT NODE, which no child selector can reach, while ::before sets its own size back. */ html.narrownav nav.ikrail .sub a { justify-content: center; padding: 6px 0; font-size: 0; } html.narrownav nav.ikrail .sub a > * { display: none; } html.narrownav nav.ikrail .sub a::before { content: attr(data-mono); font-size: 11px; font-weight: 700; letter-spacing: .5px; } html.narrownav nav.ikrail .sub a.here { box-shadow: inset 2px 0 0 var(--accent, #F0A93B); } /* --------------------------------------------------- THE DOCUMENT PAGES ONLY base.html centres its body (2rem auto, 40rem, and ten of its pages override that width from 60rem to 76rem). A FIXED RAIL PLUS A PADDING is what lets every one of those overrides keep working untouched: no page template was edited for this batch, and none had to be. The class is on from the template rather than from script, so the rail's space is reserved in the first paint and the content does not jump. It is only present for an authenticated user, because base.html is also the login and invite chrome and those pages get no rail at all. */ body.railed { padding-left: 244px; } body.railed > nav.ikrail { position: fixed; top: 0; left: 0; bottom: 0; width: 244px; overflow-y: auto; z-index: 20; } html.narrownav body.railed { padding-left: 56px; } html.narrownav body.railed > nav.ikrail { width: 56px; }