/* ══════════════════════════════════════════════════════════════════════════
 * The desktop rail, at Dana's measurements.
 *
 * Kevin, 27 September 2026: *"replace the buddynext left sidebar with the left
 * sidebar that Dana created for us in her designs for the desktop version."*
 *
 * ══════════════════════════════════════════════════════════════════════════
 * WHICH BOARD THIS IS BUILT FROM — read this before changing a number
 *
 * `Main.dc.html`, whose title is **"Desktop home"**: a 1440x960 INTERACTIVE
 * with persona and theme switches, and the board Kevin pointed at on
 * 27 September 2026 with *"this is what I am expecting our home page design on
 * desktop to look like."*
 *
 * The first version of this file was built from `FeedDesk.dc.html`, a static
 * frame of the same screen, and the two disagree. Where they disagree the
 * interactive wins — it is later, it is the one Kevin is looking at, and it
 * carries state the static frames cannot (pinned groups, unread dots, the
 * leader's own row). The differences were not small: her rail HAS icons, the
 * rows are 44px and not 40, the panel is 248px and not 232, and in dark it has
 * a ground of its own rather than the card surface.
 *
 *     panel     248px wide, its own ground, 1px line on the inline end,
 *               padded 20px 14px 16px, 4px between rows
 *     wordmark  "eKlektiv." — Outfit 800, 26px, -0.02em, padded 0 10px 18px
 *     row       44px tall, padded 0 10px, 10px corner, 15px, 12px gap,
 *               a 20px icon, then the label
 *                 at rest    500, transparent, ink
 *                 current    700, accent-soft, accent-text
 *     badge     a 20px accent pill, 11.5px/700, white
 *     heading   12px, 700, 0.06em tracking, ink2, padded 22px 10px 6px
 *     group row 40px, 14.5px, 10px gap, a 26px tile at an 8px corner
 *
 * Written against `--ds-*` rather than those hex values, because the rail has
 * to survive dark mode and her boards are all drawn light. The mapping is
 * stated at each rule where it is not obvious.
 *
 * ══════════════════════════════════════════════════════════════════════════
 * WHAT THIS IS SCOPED TO, AND WHY IT IS NOT `body.ek-bare`
 *
 * The rail renders on every BuddyNext hub, and four of those — Messages,
 * Notifications, Settings and a member's profile — are not bare screens yet.
 * Scoping to `.ek-bare` would give the product two different rails depending
 * on which screen you were on, which is worse than either one of them. The
 * rail is chrome; it looks the same everywhere it appears.
 *
 * `.bn-app__rail.bn-app__rail …` is 0,3,0 throughout. The vendor's own rules are 0,1,0 and 0,2,0
 * (`[data-bn-rail="collapsed"] .bn-rail__item`), so this wins on specificity
 * and never depends on which stylesheet the browser loaded last — which is not
 * a thing this file gets to decide.
 *
 * **The doubled class, rather than a `.bn-app` ancestor** — 27 September 2026.
 * Every selector here used to open `.bn-app` + the rail's class, borrowing the
 * hub shell's wrapper for specificity. That tied the rail's whole appearance
 * to being inside a BuddyNext hub — and Kevin then asked for it on the four
 * vendor app screens, which have no such wrapper anywhere. The rail rendered
 * there and was completely unstyled. Repeating the rail's OWN class buys the
 * same specificity and asks nothing of its surroundings.
 * ══════════════════════════════════════════════════════════════════════════ */

/*
 * The column's width, declared where the vendor declares its own.
 *
 * `--bn-railw` is read by `.bn-app__shell`'s grid (bn-shell.css:170). The
 * default is 260px on `:root` (bn-base.css:209) and the collapsed state
 * redeclares it as 72px, also on `:root` (bn-shell.css:470).
 *
 * So this has to sit on `:root` too — declaring 248px on `.bn-app__shell`
 * would beat BOTH, and a member who collapsed the rail would get a 232px
 * track with a 72px panel in it. `:not([data-bn-rail="collapsed"])` is 0,2,0
 * against the vendor's 0,1,0, so the expanded value wins and the collapsed
 * one is untouched.
 *
 * The tablet rule (769-1024px) declares `--bn-railw: 72px` ON `.bn-app__shell`
 * itself, which beats this by proximity rather than specificity — so the
 * vendor's forced icon-only rail in that range keeps working, which is right:
 * Dana drew a 1440px frame and no tablet.
 */
:root:not([data-bn-rail="collapsed"]) {
	--bn-railw: 248px;
}

/*
 * The panel.
 *
 * `--ds-rail` and not `--ds-surface`, and the difference only shows in the
 * dark. Her interactive keeps a `rail` entry in every palette — #FFFFFF light,
 * **#1B1F35** dark, #121317 night — where the card surface is #22273F and
 * #17181C. So in the light the rail is the same white as a card and in the
 * dark it is deliberately DARKER than one: the navigation sits behind the
 * content rather than on it.
 *
 * Either way it is a panel, which is the one structural thing the vendor's
 * rail does not do at all — it is transparent, so before this it was the same
 * colour as the feed beside it and read as margin.
 */
.bn-app__rail.bn-app__rail {
	/*
	 * `box-sizing` is the third thing the rail was getting from `.bn-app`
	 * without asking (27 Sep). BuddyNext sets it on the hub shell's
	 * descendants, so on a hub the vendor's `height: 100vh` includes the
	 * rail's own 36px of padding. On the app screens there is no `.bn-app`,
	 * the default content-box applied, and the rail came out 36px TALLER than
	 * the window — a panel that overflowed the bottom of the screen rather
	 * than meeting it.
	 */
	box-sizing: border-box;
	background: var(--ds-rail);
	border-inline-end: 1px solid var(--ds-line);
	padding: 20px 14px 16px;
}

/* ── The mark, which is also the control ──────────────────────────────────
 * Kevin, 27 September 2026: *"making the logo the collapse/expand and putting
 * our full word mark on the top bar."*
 *
 * The full wordmark now lives in `.ek-deskbar` on Home. What stays here is the
 * mark — the same "e." at both widths — and it is the button that collapses
 * and expands the rail.
 *
 * **It is sized to be found.** The chevron it replaces was 28px at 0.55
 * opacity, quietened by an earlier note in this file so it would not compete
 * with the wordmark beside it. It competed with nothing and was found by
 * nobody: a member who collapsed the rail had no obvious way back.
 * ────────────────────────────────────────────────────────────────────────── */
.bn-app__rail.bn-app__rail .bn-rail__head {
	padding: 0 4px 18px;
	margin-bottom: 0;
	min-height: 0;
}

.bn-app__rail.bn-app__rail .ek-rail__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--ds-brand-ink);
	cursor: pointer;
	opacity: 1;
}

.bn-app__rail.bn-app__rail .ek-rail__mark:hover,
.bn-app__rail.bn-app__rail .ek-rail__mark:focus-visible {
	background: var(--ds-accent-soft);
	color: var(--ds-accent-text);
}

.bn-app__rail.bn-app__rail .ek-rail__mark-text {
	font-family: var(--ek-font);
	font-weight: 800;
	font-size: 26px;
	line-height: 1;
	letter-spacing: -0.02em;
}

/*
 * Collapsed, the head centres in the 72px panel. The vendor stacks its head
 * into a column for the logo-plus-chevron pair it expects; with one element
 * there is nothing to stack, so the column is undone and the mark simply
 * centres.
 */
[data-bn-rail="collapsed"] .bn-app__rail.bn-app__rail .bn-rail__head {
	flex-direction: row;
	justify-content: center;
	padding-inline: 0;
}

/* ── The rows ────────────────────────────────────────────────────────────── */

.bn-app__rail.bn-app__rail .bn-rail__group {
	gap: 4px;
	margin-bottom: 0;
}

.bn-app__rail.bn-app__rail .bn-rail__item {
	min-height: 44px;
	padding: 0 10px;
	gap: 12px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 500;
	color: var(--ds-ink);
}

/*
 * Her current row is a filled pill, not a tint of the page.
 *
 * #E8ECFF is the accent's own wash — the same `--ds-accent-soft` the group
 * page's Pinned chip and the shelf icons are drawn in — and #2F48B8 is
 * `--ds-accent-text`. The vendor uses `--bn-canvas` here, which is the page
 * ground, so on a white panel the current row was marked by colour alone.
 */
.bn-app__rail.bn-app__rail .bn-rail__item[aria-current="page"] {
	background: var(--ds-accent-soft);
	color: var(--ds-accent-text);
	font-weight: 700;
}

.bn-app__rail.bn-app__rail .bn-rail__item:hover {
	background: var(--ds-surface2);
	color: var(--ds-ink);
}

.bn-app__rail.bn-app__rail .bn-rail__item[aria-current="page"]:hover {
	background: var(--ds-accent-soft);
	color: var(--ds-accent-text);
}

/*
 * **The icons stay, and an early version of this file was wrong about that.**
 *
 * `FeedDesk`, a static frame, draws the rail as text only, and this file hid
 * the icons to match it. The interactive Kevin actually pointed at gives every
 * nav row a 20px stroked icon before the label — home, chat, users, calendar,
 * compass — and the rows are 44px rather than 40 to carry them.
 *
 * Nothing is needed to put them back except not taking them away: the vendor
 * renders `.bn-rail__icon` on every row already. It sizes them from
 * `--bn-rail-icon-size`, which resolves to 18px here against her 20px — two
 * pixels, but they are the two that make a 44px row read as a row with an icon
 * in it rather than a row with a mark beside it. Set on the variable, not on
 * the element, so the SVG inside (`width: 100%`) follows.
 *
 * Her group rows carry a coloured 26px TILE instead of an icon, which is a
 * different thing and is noted at that section.
 */
.bn-app__rail.bn-app__rail .bn-rail__item {
	--bn-rail-icon-size: 20px;
}

/*
 * The count beside Messages.
 *
 * Hers is a filled accent pill — 20px round, white, 11.5px/700. The vendor's
 * is `--bn-danger` red, which on her rail would be the only alarm colour on
 * the screen and would read as something being wrong rather than as something
 * waiting.
 */
.bn-app__rail.bn-app__rail .bn-rail__badge {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--ds-accent);
	color: var(--ds-on-accent);
	font-size: 11.5px;
	font-weight: 700;
}

/* Her section heading: 22px of air above it, and the row's own 10px inset. */
.bn-app__rail.bn-app__rail .bn-rail__heading {
	margin-top: 22px;
	padding: 0 10px 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--ds-ink2);
}

/*
 * The collapse control used to be a separate 28px chevron here at 0.55
 * opacity. It is the mark itself now — see the block at the top of this file.
 * The two rules that quietened it are deleted rather than overridden, because
 * the reasoning in them ("so it reads as a control and not as part of the
 * wordmark's line") is exactly what made it impossible to find.
 */

/* ══════════════════════════════════════════════════════════════════════════
 * YOUR GROUPS — the part that needed the template, not the stylesheet.
 *
 * Kevin, 27 September 2026: *"I want Dana's sidebar."* The rail is our own
 * `buddynext/shell/rail.php` now, so the three things CSS could not reach are
 * here: a tile with letters in it, a dot, and a heading that is a heading
 * rather than a `<summary>` controlling a `<details>`.
 *
 * The vendor's `.bn-rail__spaces*` rules are gone from this file with the
 * flyout they styled.
 * ══════════════════════════════════════════════════════════════════════════ */

/*
 * The section sits under the nav rows with her 22px of air. No `order: 99`
 * any more — the vendor pinned its flyout to the Groups row and needed moving;
 * ours is simply printed where it belongs.
 */
.bn-app__rail.bn-app__rail .ek-rail__groups {
	margin-top: 22px;
}

.bn-app__rail.bn-app__rail .ek-rail__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin-top: 0;
}

/*
 * The count, where Dana puts her "All" control. Only drawn when there are more
 * groups than the rail is showing, so it always means "there are more".
 */
.bn-app__rail.bn-app__rail .ek-rail__all {
	flex: 0 0 auto;
	padding: 0 6px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	color: var(--ds-accent-text);
	background: var(--ds-accent-soft);
	text-decoration: none;
}

.bn-app__rail.bn-app__rail .ek-rail__all:hover,
.bn-app__rail.bn-app__rail .ek-rail__all:focus-visible {
	color: var(--ds-on-accent);
	background: var(--ds-accent);
}

/*
 * A group row is a nav row at her smaller size: 40px rather than 44, 14.5px
 * rather than 15. Her boards are explicit about the difference, and it is what
 * makes the five above read as navigation and these as a list of places.
 */
.bn-app__rail.bn-app__rail .ek-rail__group {
	min-height: 40px;
	gap: 10px;
	font-size: 14.5px;
}

/*
 * The tile. 26px at an 8px corner, the group's own picture or its initials on
 * its own hue — `Chrome\Rail` resolves which through the same two helpers the
 * group page and Home use, so a group cannot wear one face here and another
 * there.
 */
.bn-app__rail.bn-app__rail .ek-rail__tile {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	object-fit: cover;
	display: block;
}

.bn-app__rail.bn-app__rail .ek-rail__tile--letters {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ek-font);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: var(--ds-on-accent);
}

/*
 * Something is waiting in this group's conversation. A dot rather than a
 * count: the number belongs to the conversation, and a member scanning a rail
 * is being told that there is something, not how much.
 */
.bn-app__rail.bn-app__rail .ek-rail__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--ds-accent);
}

/*
 * Collapsed, the tile IS the row — it is the only thing that identifies a
 * group at 72px, so unlike the labels it must not shrink away. The dot moves
 * to the tile's corner, where it can still be seen.
 */
[data-bn-rail="collapsed"] .bn-app__rail.bn-app__rail .ek-rail__group {
	position: relative;
}

[data-bn-rail="collapsed"] .bn-app__rail.bn-app__rail .ek-rail__dot {
	position: absolute;
	top: 6px;
	inset-inline-end: 18px;
	box-shadow: 0 0 0 2px var(--ds-rail);
}

/* ── Start a group ─────────────────────────────────────────────────────────
 * Her card at the foot of the rail, in her dashed outline. `margin-top: auto`
 * is what puts it at the foot: the rail is a flex column (bn-shell.css), so
 * this takes the slack and the card sits under the groups however few there
 * are.
 * ────────────────────────────────────────────────────────────────────────── */
/*
 * **Scoped to the desktop, and that is not tidiness.**
 *
 * The rail needs to be a flex column so `margin-top: auto` can push Start a
 * group to its foot. Declared unscoped, `.bn-app__rail.bn-app__rail` is 0,2,0 and
 * the vendor's `@media (max-width: 768px) { .bn-app__rail { display: none } }`
 * is 0,1,0 — and specificity beats a media query. So an unscoped rule here
 * put the whole desktop rail back on every phone, which is the exact bug
 * Kevin reported an hour earlier from a missing viewport meta:
 * *"we now have the BuddyNext side bar on mobile too."* Caught by checking
 * the phone after a desktop change rather than by looking at the desktop.
 */
@media (min-width: 768.02px) {
	.bn-app__rail.bn-app__rail {
		display: flex;
		flex-direction: column;
	}
}

/*
 * `margin-top: auto` is back on the card, where it was before Apps briefly
 * joined it at the foot (27 September 2026). Apps moved to the desktop bar the
 * same day, and an `.ek-rail__foot` wrapper holding one child is a wrapper
 * whose only stated reason — two things anchoring together — is no longer
 * true.
 */
.bn-app__rail.bn-app__rail .ek-rail__start {
	margin-top: auto;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 38px;
	padding: 0 10px;
	border: 1px dashed var(--ds-line);
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ds-ink2);
	text-decoration: none;
}

.bn-app__rail.bn-app__rail .ek-rail__start:hover,
.bn-app__rail.bn-app__rail .ek-rail__start:focus-visible {
	border-color: var(--ds-accent);
	color: var(--ds-accent-text);
	background: var(--ds-accent-soft);
}

.bn-app__rail.bn-app__rail .ek-rail__start-mark {
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
}

/* At 72px the word does not fit; the mark alone still opens the door. */
[data-bn-rail="collapsed"] .bn-app__rail.bn-app__rail .ek-rail__start span:not(.ek-rail__start-mark) {
	display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Her rail holds all the way down to the phone — and this block lives LAST.
 *
 * `bn-shell.css:588-618` forces BuddyNext's icon-only panel between 769px and
 * 1024px, reasoning *"so it never crowds the content"*. A sensible default for
 * a plugin shipping on themes it has never seen, and the wrong call here: Dana
 * drew ONE rail, and a laptop window is very often in exactly that band, so a
 * member would watch their navigation change shape as they resized.
 *
 * **Lost twice.** It first sat between the wordmark and the rows, and a splice
 * that replaced everything between those two headings took it with them — the
 * rail dropped to 72px on a 1013px window and read as a broken template. It
 * was then restored to the same place, and the SAME splice ate it again the
 * next time the wordmark changed. Its own note said it should live "after the
 * rows, where nothing is likely to be replaced wholesale"; it was not put
 * there. It is now at the end of the file, after everything.
 *
 * Every selector is guarded on NOT being collapsed. The vendor declares its
 * collapsed width on `:root`; this declares the expanded width on
 * `.bn-app__shell`, and a custom property set on the element itself beats one
 * inherited from an ancestor whatever the specificity — so an unguarded rule
 * here won every time and Collapse did nothing in this band. The guard says
 * what the block means: do not force icon-only by WIDTH. A member who asks for
 * it still gets it.
 *
 * Below 769px the rail is `display: none` and the bottom bar is the
 * navigation — the vendor's own breakpoint, untouched.
 * ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768.02px) and (max-width: 1024px) {
	:root:not([data-bn-rail="collapsed"]) .bn-app .bn-app__shell,
	:root:not([data-bn-rail="collapsed"]) .ek-app .ek-app__shell {
		--bn-railw: 248px;
	}

	:root:not([data-bn-rail="collapsed"]) .bn-app__rail.bn-app__rail .bn-rail__label,
	:root:not([data-bn-rail="collapsed"]) .bn-app__rail.bn-app__rail .bn-rail__heading {
		display: block;
	}

	:root:not([data-bn-rail="collapsed"]) .bn-app__rail.bn-app__rail .ek-rail__heading {
		display: flex;
	}

	:root:not([data-bn-rail="collapsed"]) .bn-app__rail.bn-app__rail .bn-rail__item {
		justify-content: flex-start;
		padding-inline: 10px;
	}
}