` and spans the * content column AND the aside, with the rail beside the pair. * * The bar is emitted by `buddynext/shell/rail.php`, which both shells * render as a direct child, so it is already a grid item of each. All that * is left is to say where: a first row, starting right of the rail and * running to the end, with the columns below it. The rail spans both rows. * * No number appears in any of this. The old arrangement needed the bar to * escape the main column's padding with `margin: -36px -24px 0`, and * widening it over the sidebar would have meant a third literal — the * sidebar's own width — plus a matching push on the sidebar to get it back * under the bar. `grid-column: 2 / -1` says the same thing and keeps * saying it if any of those widths ever change. * * `.bn-app__region` is `display: contents`, so `.bn-app__main` and * `.bn-app__right` are themselves grid items of `.bn-app__shell` and take * their row directly. * ───────────────────────────────────────────────────────────────────── */ .bn-app__shell, .ek-app__shell { grid-template-rows: auto minmax(0, 1fr); } .bn-app__shell > .bn-app__rail, .ek-app__shell > .bn-app__rail { grid-row: 1 / -1; } .bn-app__shell > .ek-deskbar, .ek-app__shell > .ek-deskbar { grid-column: 2 / -1; grid-row: 1; } /* * The app screens have no sidebar, so one row assignment is the whole * story here. The hub shells' two columns differ either side of 1024px and * are set in their own blocks at the end of this file — see the note * there. */ .ek-app__shell > .ek-app__main { grid-row: 2; } /* * **The column gets her width.** * * This sheet used to cap every child of the main column at 640px, with a * note saying so: *"640px is her frame (390px) plus room for the wider type * a desktop invites — a value to revisit when there is a desktop board, not * a guess at one."* There is a desktop board now, and it measures 1128px of * content beside a 248px rail at 1440. * * Raised for `.ek-home` ONLY, and that is deliberate. The vendor's activity * feed is a sibling below it and keeps the 640px measure — which is also * hers: her board sets the feed in a 640px column with a 320px aside beside * it. The aside is not built, so the feed simply keeps its width rather * than stretching to fill the space the aside would have taken. */ body.ek-bare .bn-app__main > .ek-home { max-width: 1128px; } /* * The bar's own look. It no longer breaks out of anything: as a grid item * in the shell's first row (see above) its left edge is already flush * against the rail and its right edge already runs past the sidebar, so * the three negative margins that used to buy that are gone and only her * 28px of inner padding is left. */ .ek-deskbar { display: flex; align-items: center; gap: 12px; height: 68px; padding: 0 28px; background: var(--ds-rail); border-bottom: 1px solid var(--ds-line); } /* * The wordmark, and the way home. * * Kevin's placement rather than Dana's: her rail carries the wordmark and * her bar opens with the search. The rail's mark became the collapse * control, and one 40px square cannot sensibly be the brand, the toggle * AND the link home — so the word moved here and took the link with it. * * `flex: 0 0 auto` so it never gives way; the search beside it is what * yields on a narrow column. */ .ek-deskbar__brand { flex: 0 0 auto; display: flex; align-items: center; text-decoration: none; } .ek-deskbar__wordmark { font-family: var(--ek-font); font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: -0.02em; color: var(--ds-brand-ink); white-space: nowrap; } .ek-deskbar__brand:hover .ek-deskbar__wordmark, .ek-deskbar__brand:focus-visible .ek-deskbar__wordmark { color: var(--ds-accent-text); } /* * Her 460px search. `max-width` rather than a flat width so it gives way * on a narrow laptop instead of pushing the avatar off the end — she drew * it at 1440, and with the wordmark now in front of it there is less room * than she had. */ .ek-deskbar__search { display: flex; align-items: center; gap: 10px; width: 460px; max-width: 100%; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid var(--ds-line); border-radius: 12px; background: var(--ds-surface2); color: var(--ds-ink2); font-size: 14.5px; text-decoration: none; } .ek-deskbar__search:hover, .ek-deskbar__search:focus-visible { border-color: var(--ds-accent); color: var(--ds-ink); } .ek-deskbar__search-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Everything after the search sits at the far end, as she has it. */ .ek-deskbar__end { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; } .ek-deskbar__icon { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid var(--ds-line); border-radius: 12px; background: var(--ds-surface); color: var(--ds-ink); text-decoration: none; } /* * Both glyphs at 20px, stated here rather than left to the markup. * * The bell is drawn inline with `width="20" height="20"` on the element; * Apps comes from `buddynext_icon()`, which emits no dimensions at all, so * it sized itself from the bar's font and measured 15px beside a 20px bell * (27 September 2026, on the deploy that moved Apps into this row). Two * controls the same size, side by side, should carry the same mark size, * and a rule here covers whatever the next one is drawn with. */ .ek-deskbar__icon svg { width: 20px; height: 20px; flex: 0 0 auto; } .ek-deskbar__icon:hover, .ek-deskbar__icon:focus-visible { border-color: var(--ds-accent); color: var(--ds-accent-text); } /* Where you are, in the row of controls. */ .ek-deskbar__icon[aria-current="page"] { border-color: var(--ds-accent); background: var(--ds-accent-soft); color: var(--ds-accent-text); } /* * The unread dot, ringed in the button's own ground so it reads as sitting * ON the bell rather than beside it. #E5484D is hers and is a literal for * the same reason the meetings date chip is: it must mean "waiting" in * both modes, and neither `--ds-*` carries an alarm colour. */ .ek-deskbar__dot { position: absolute; top: 8px; inset-inline-end: 9px; width: 9px; height: 9px; border-radius: 999px; background: var(--ds-alarm); box-shadow: 0 0 0 2px var(--ds-surface); } /* * The avatar keeps `TopRow`'s own menu markup, so this only resizes it to * her 44px and gives it the ring her board draws. The menu inside is * unchanged — it is the same element and the same rows (Light, Dark or Night is in Settings since 30 Sep). */ .ek-deskbar .ek-top__me { flex: 0 0 auto; } .ek-deskbar .ek-top__me-btn, .ek-deskbar .ek-top__me-img { width: 44px; height: 44px; border-radius: 999px; } .ek-deskbar .ek-top__me-btn { box-shadow: 0 0 0 2px var(--ds-line); } /* ── The greeting, below the bar ──────────────────────────────────────── */ /* * `margin-top: 0`, where this was 28px. The bar used to pull the main * column's 36px of top padding away with it; now that the bar is a shell * row, that padding stays and is the space above the greeting. 28px on top * of it would be 64px, against Dana's 28. */ .ek-deskhead { display: block; margin: 0 0 26px; } /* * Her greeting is ONE line on the desktop — "Good evening, Hannah" — where * the phone stacks it over two. `TopRow::greeting()` emits the two spans * either way, so the comma and the space are restored here rather than in * a second copy of the PHP. */ .ek-deskhead__hello { font-family: var(--ek-font); font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--ds-ink); } .ek-deskhead__hello .ek-top__hello, .ek-deskhead__hello .ek-top__name { display: inline; font: inherit; color: inherit; letter-spacing: inherit; } .ek-deskhead__hello .ek-top__name::before { content: " "; } .ek-deskhead__date { margin-top: 4px; font-size: 15px; color: var(--ds-ink2); } /* * A screen's own name, where Home has its greeting — People, Upcoming, * Groups. Same 30px, and no date under it: a date belongs to the day you * opened the app, not to a list of people. */ .ek-deskhead--title { margin-bottom: 20px; } /* ── Your groups, as her three-up grid ────────────────────────────────── */ /* * Her desktop draws the member's groups as cards in a 3-column grid, each * with a 58px band in the group's own colour across the top. The phone * draws the same groups as a horizontal rail of tiles, which is what * `.ek-home__rail` is — so the rail becomes a grid here rather than a * second block being rendered. */ .ek-home .ek-home__rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; overflow: visible; scroll-snap-type: none; } .ek-home .ek-home__rail-end { display: none; } /* * **The cards fill their column.** * * Kevin: *"notice on desktop the coming up cards overlap."* They did, by * 26px, and the arithmetic says why: the rule above turns `.ek-home__rail` * into three equal columns, which at this width are 260px each — and an * event card is `width: 300px; flex: 0 0 auto`, because on a phone the * rail is a horizontal SCROLLER and a card in a scroller has to state its * own width. In a grid that width is not a request, it is an overflow, and * the next card starts before this one ends. * * Both sections share `.ek-home__rail` — Coming up and Your groups — so * the grid caught both. That is right for the groups and accidental for * the events, and the accident is what showed. * * `width: auto` hands the sizing back to the grid. The phone keeps its * 300px because this whole block is inside the desktop query. * * **Her desktop does not do this at all**, and that is still the open * item: `Main.dc.html` puts ONE warm Next-up card across the column with * an RSVP in it, not a row of three. That card needs the RSVP control * Eventonomy does not expose in a list, so it waits on the same decision * as the meetings screen. This makes the interim arrangement correct * rather than making it hers. */ .ek-home .ek-home__rail > .ek-home__ev { width: auto; min-width: 0; } /* * Her card. On the phone a group is a big coloured tile with its name * underneath; on the desktop it is a card — a 58px band in the group's own * colour across the top, then a white body. * * Same markup either way. `.ek-home__tile-face` is the band and * `.ek-home__tile-name` is the body, so nothing is re-rendered; only the * shape changes at the breakpoint. */ .ek-home .ek-home__tile { display: flex; flex-direction: column; width: auto; border: 1px solid var(--ds-line); border-radius: 16px; background: var(--ds-surface); overflow: hidden; } .ek-home .ek-home__tile-face { flex: 0 0 auto; width: 100%; height: 58px; border-radius: 0; position: relative; } /* * Her band carries the group's MEETING TIME — "TUESDAYS · 7:30 PM" — set * in white across the bottom of it. We do not have that here: * `SpaceMemberService::membership_rows()` returns id, name, slug, category * and role, and the schedule lives in `ek_group_profile` (the table * `Chrome\GroupPage::meets_line()` reads) for groups created through our * own Start-a-group form. * * So the band carries the group's face instead, small and centred, which * is at least a thing that identifies the group. The time is a data * question rather than a styling one, and a real one: a group with no * profile row has no schedule to show, which is why it is not simply * fetched here and left blank for half of them. */ .ek-home .ek-home__tile-img, .ek-home .ek-home__tile-mono { position: absolute; /* * **All four sides, in one `inset`** — and that is the fix, not the * style. * * This set `bottom` and `inset-inline-start` only. On a phone the * picture FILLS the face, so its rule there is `inset: 0` — and the * `top: 0` from it survived into this one. The result: every group * with a real picture had its avatar pinned to the TOP of the colour * band and ending 14px above it, while every group with initials * overhung correctly, because the initials span carries a different * phone rule. Kevin, on the first card: *"the avatar is up."* * * Measured before the fix — Design Critique (image) sat 0px from the * band's top; BSF (initials) sat 32px. Two different treatments of the * same element, and only one of them on purpose. * * The shorthand writes all four, so nothing from another breakpoint * can be left behind. Same lesson as the meetings date chip, which * needed `inset: auto auto 46px 16px` for exactly this reason. */ inset: auto auto -18px 14px; width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 3px var(--ds-surface); object-fit: cover; } .ek-home .ek-home__tile-mono { display: flex; align-items: center; justify-content: center; font-size: 16px; background: inherit; } /* Her lead chip stays on the band, at its far end. */ .ek-home .ek-home__tile-lead { inset-inline-start: auto; inset-inline-end: 10px; top: 10px; bottom: auto; } /* * The body. The extra top padding is the room the face above overhangs * into — 18px of it, plus her 12px — so the name never sits under a tile. */ .ek-home .ek-home__tile-name { padding: 30px 14px 14px; font-family: var(--ek-font); font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--ds-ink); text-align: start; } } /* ══════════════════════════════════════════════════════════════════════════ * The right-hand rail's cards — BuddyNext's, skinned. * * Kevin, 27 September 2026: *"Skin the groups rail from the vendor."* Not * replace it: the four cards on the groups directory — Suggested for you, * Your groups, New groups, Popular this week — are the vendor's own, they * work, and their content is a question for another day. * * **Most of the skinning was already done and not by this file.** Measured * before touching anything: card #FFFFFF on #E2E5EF, headings #5B6178, rows * #1C1F33, meta #5B6178 — Dana's palette, every one. That is the `--bn-*` * token map in `functions.php` doing its job: point BuddyNext's tokens at * `--ds-*` once and its own components arrive in her colours without a * stylesheet knowing they exist. * * What was left is geometry, which no token carries: * * card radius 19.6px → her 16px (`--ds-radius`) * row radius 7px → 10px, the rail's own row corner * heading given the tracking her section headings have, so the * card titles and the left rail's YOUR GROUPS read as the * same kind of label * * Scoped to `.bn-app__right` so it dresses the rail's cards and not every * `.bn-sidebar-card` the vendor might place elsewhere. * ══════════════════════════════════════════════════════════════════════════ */ .bn-app__right .bn-sidebar-card { border-radius: var(--ds-radius); } .bn-app__right .bn-sidebar-card__header { letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-ink2); } .bn-app__right .bn-sd-side-row { border-radius: 10px; } /* * A row that goes somewhere should say so on hover. The vendor leaves these * flat, which on a 320px column of names reads as a list rather than as four * lists of links. */ .bn-app__right .bn-sd-side-row:hover { background: var(--ds-surface2); } /* * Leaders, on People's right column (Chrome\PeopleRail, 27 September 2026). * * The rows reuse `.ek-people__who` / `__avatar` / `__name` / `__line` from the * main column so a person looks the same on both sides of the screen, and add * only what the narrower column changes: no card of their own (the vendor's * `.bn-sidebar-card` already is one), no dividing rules, a 34px face instead of * 40, and the same 10px hover the vendor rows next door take. */ .ek-rail-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .ek-rail-people__row { margin: 0; } .ek-rail-people .ek-people__who { padding: 7px 8px; border-radius: 10px; gap: 10px; } .ek-rail-people .ek-people__who:hover { background: var(--ds-surface2); } .ek-rail-people__avatar { width: 34px; height: 34px; } .ek-rail-people .ek-people__name { font-size: 14.5px; } .ek-rail-people .ek-people__line { font-size: 12.5px; } /* * Apps — the placeholder screen (Chrome\Apps, 27 September 2026). * * Kevin: *"Create an empty page for that to navigate to....we will build that * out later."* One line, set like a caption rather than like body text, so the * screen reads as deliberately unfinished instead of as a page that failed to * load. */ .ek-apps__soon { margin: 0; color: var(--ds-ink2); font-size: 15px; } /* ══════════════════════════════════════════════════════════════════════════ * The hub shell's two columns sit differently either side of 1024px, and that * is the vendor's arrangement, not ours. * * Found 27 September 2026 at 900px: the Leaders rail drew on the LEFT and the * People content on the right, swapped. My own regression, from the commit * that made the desktop bar a row of the shell. * * `bn-shell.css` has two arrangements. Above 1024px the shell is three tracks * — rail, content, sidebar — and the sidebar sits beside the content. At * `max-width: 1024px` it drops to TWO tracks and gives `.bn-app__right` * `grid-column: -2`, which in a two-track grid IS the content track: the * sidebar is meant to reflow under the content rather than beside it. * * Pinning both to `grid-row: 2` broke the second arrangement — they became one * cell, so grid bumped `.bn-app__main`, the one with no explicit column, into * the next free slot and invented a third column to hold it. * * So the rows are split at the vendor's own breakpoint: beside each other * above it, stacked below it. `grid-row: 3` needs no third track declared; * an implicit row is created for it. * * These live at the END of the file on purpose. The first attempt put them in * the middle of the `min-width: 768.02px` block, which closed that block early * and left every rule after it — the whole bar, its wordmark, its search — * gated to `max-width: 1024px`. At 1440 the bar measured zero wide. * ══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1024.02px) { .bn-app__shell > .bn-app__region > .bn-app__main, .bn-app__shell > .bn-app__region > .bn-app__right { grid-row: 2; } } @media (min-width: 768.02px) and (max-width: 1024px) { .bn-app__shell > .bn-app__region > .bn-app__main { grid-row: 2; } .bn-app__shell > .bn-app__region > .bn-app__right { grid-row: 3; } } /* ══════════════════════════════════════════════════════════════════════════ * People — Kevin's layout, 27 September 2026 (decisions item 10). * * Two filters in the middle over BuddyNext's own member card, flattened; a * column of the people in her groups she has not connected with, beside the * list on a computer and ABOVE it on a phone. * * The column is ours and lives inside `.bn-app__main`. It cannot be the * vendor's `.bn-app__right`: below 1025px `bn-shell.css` gives that element * `grid-column: -2` in a two-track grid, so it always reflows UNDER the * content — measured at 1,307px down on a 375px screen with twelve people. * ══════════════════════════════════════════════════════════════════════════ */ .ek-people__cols { display: flex; flex-direction: column; gap: 18px; } /* * Phone: the column first, by `order`. The DOM keeps the list first so a * screen reader hears the main content first at every width; this is the one * place the visual order and the reading order part company, which is why the * column carries its own heading. */ .ek-people__aside { order: -1; } .ek-people__main { min-width: 0; display: flex; flex-direction: column; gap: 14px; } @media (min-width: 1024.02px) { /* * The bare hubs cap every child of the main column at 640px — Dana's * reading measure, and right for a single column of content. People stopped * being one column on 27 September: 640 left the list at 312px beside a * 300px aside, which is narrower than the phone. 1128px is the width * `.ek-home` already takes for the same reason, so the two desktop screens * measure the same rather than each picking a number. */ body.ek-bare .bn-app__main > .ek-people { max-width: 1128px; } .ek-people__cols { flex-direction: row; align-items: flex-start; gap: 28px; } .ek-people__main { flex: 1 1 auto; } .ek-people__aside { order: 0; flex: 0 0 300px; width: 300px; position: sticky; top: 16px; } } /* ── The two filters ────────────────────────────────────────────────────── * Links, not buttons: each filter is a real address, so it can be sent, kept * and reached with the keyboard without a line of script. */ .ek-people__filters { display: flex; gap: 8px; flex-wrap: wrap; } .ek-people__filter { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border: 1px solid var(--ds-line); border-radius: 17px; background: var(--ds-surface); color: var(--ds-ink); font-family: var(--ek-font); font-size: 13.5px; font-weight: 700; text-decoration: none; } .ek-people__filter:hover { border-color: var(--ds-accent); } .ek-people__filter[aria-selected="true"] { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-on-accent); } /* ── The card grid ──────────────────────────────────────────────────────── * Three up on a computer, one up on a phone. The vendor's own grid mode is * 203px a card; this column is wider, so the tracks are a minimum rather than * a count and the cards breathe instead of stretching. */ .ek-people__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 560px) { .ek-people__cards { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); } } .ek-people__card { margin: 0; display: flex; flex-direction: column; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); overflow: hidden; } /* * The card sits inside our own wrapper, which is the visible card. The * vendor's own frame is unset so the two do not draw two borders. */ .ek-people__card .bn-md-card, .ek-people__card .bn-card { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* * **@handle off** (Kevin, 27 Sep, decision 7). The one card ruling with no * template argument — `member-card.php` prints it unconditionally — so it * comes off here. `visibility` is not used: the line must take no space. */ .ek-people__card .bn-md-card__handle { display: none !important; } /* * `show_actions: false` leaves a "View profile" button in the vendor's action * slot. That is a third action nobody asked for, and the whole card is already * a link to the profile, so the slot goes and ours takes its place below. */ .ek-people__card .bn-md-card__actions, .ek-people__card .bn-md-card__connect-decide { display: none !important; } /* * **No dot, and `presence: 'offline'` is not enough.** The card takes the * argument, but `.bn-avatar` draws its `::after` for offline too — a grey * 11.8px dot, measured on the sandbox. A grey dot still says "presence" and * still invites the member to read something into it, and the rule is that * this screen has no online dot at all. So the pseudo-element goes. */ .ek-people__card .bn-avatar::after { display: none !important; } /* * The action hugs the right — Kevin, 27 Sep: *"the message button should be * right justified instead of stretching across the card."* A button as wide as * its card reads as the card's primary surface; Message is one of two things * you can do with a contact, not the point of them. * * `align-items: flex-end` sizes every child to its content, so the group line * takes `align-self: stretch` back — it needs the full width to truncate * against rather than shrink-wrapping its own text. */ .ek-people__card-act { margin-top: auto; padding: 0 12px 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .ek-people__card-line { align-self: stretch; font-size: 12.5px; color: var(--ds-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* * The Connect form is a `

`, so it must not become a flex container — * that would break its own summary/content layout. Closed, it shrinks to the * button and hugs the right with everything else; open, it takes the card's * width back, because the note field needs it. */ .ek-people__card-act .ek-people__connect { align-self: flex-end; } .ek-people__card-act .ek-people__connect[open] { align-self: stretch; } /* ── The column ───────────────────────────────────────────────────────── */ .ek-people__col { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 14px 12px; } .ek-people__col-head { margin: 0 4px 10px; font-family: var(--ek-font); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-ink2); } .ek-people__col-group + .ek-people__col-group { margin-top: 14px; } .ek-people__col-name { margin: 0 4px 4px; font-family: var(--ek-font); font-size: 14px; font-weight: 700; color: var(--ds-ink); } .ek-people__col-list { list-style: none; margin: 0; padding: 0; } .ek-people__col-row { display: flex; align-items: center; gap: 9px; margin: 0; min-height: 46px; padding: 0 4px; } .ek-people__col-face { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; } .ek-people__col-who { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 13.5px; color: var(--ds-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* No number on it, per the no-counts rule — and it would be a count of people she has not met. */ .ek-people__col-all { display: inline-block; margin: 6px 4px 0; font-size: 12.5px; font-weight: 600; color: var(--ds-accent-text); } /* ── The trust line, anywhere but the Start a group form ───────────────── * One quiet line with the small shield (Key Flows note `tone`). start.css * carries its own copy for the form's screens; this one serves the group * settings "Invite someone" panel (Invite\InviteLinksClosed, 28 Sep 2026). * Existing tokens only, so it follows light and dark with the rest of the page. */ .ek-invite-panel .ek-trust { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--ds-ink); } .ek-invite-panel .ek-trust__mark { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--ds-accent-text); } .ek-invite-panel .ek-trust__mark svg { width: 16px; height: 16px; display: block; } /* * The line between the page and the right-hand sidebar runs to the bottom (Kevin, * 29 Sep 2026: "the right hand sidebar border does not extend to the bottom"). * BuddyNext draws it as the sidebar's own left border (bn-shell.css, * `.bn-app__right`), but that column is sticky and only as tall as its cards, so the * line stopped under the last card. The main column is as tall as the page, so the * line moves there; the sidebar stays sticky. Above 1024px only: below it the vendor * stacks the sidebar under the page with a top border instead. */ @media (min-width: 1025px) { .bn-app__shell:has( .bn-app__right ) .bn-app__main { border-inline-end: 1px solid var(--bn-line); } .bn-app__shell:has( .bn-app__right ) .bn-app__right { border-inline-start: 0; } } /* ══════════════════════════════════════════════════════════════════════════ * Light, Dark or Night — the member's choice, on Settings → Appearance. * * Kevin, 30 Sep 2026 (d-palette a, d-you-menu a): the choice lives in * Settings, not in the You menu. The control is the companion's * (`Chrome\Scheme::control()`), placed first in BuddyNext's own Appearance * card. Four tiles, two by two at phone width; each carries a small sample of * its scheme — the ground, a card and the accent — painted in that scheme's * own values whatever is showing, which is why the samples are the one place * the palette's literals are repeated. "Same as this device" is split * light/dark. * ══════════════════════════════════════════════════════════════════════════ */ .ek-scheme { margin: 0 0 20px; } .ek-scheme__set { margin: 0; padding: 0; border: 0; min-width: 0; } .ek-scheme__legend { display: block; margin: 0 0 10px; padding: 0; } .ek-scheme__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 560px) { .ek-scheme__opts { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .ek-scheme__opt { position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); background: var(--ds-surface); color: var(--ds-ink); cursor: pointer; } .ek-scheme__opt:hover { border-color: var(--ds-accent); } .ek-scheme__opt:has(.ek-scheme__radio:checked) { border-color: var(--ds-accent); box-shadow: 0 0 0 1px var(--ds-accent); background: var(--ds-accent-soft); } .ek-scheme__opt:has(.ek-scheme__radio:focus-visible) { outline: 2px solid var(--ds-accent); outline-offset: 2px; } /* The radio stays in the tree for keyboard and screen reader; the tile is its face. */ .ek-scheme__radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .ek-scheme__name { font-weight: 600; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; } .ek-scheme__opt:has(.ek-scheme__radio:checked) .ek-scheme__name { color: var(--ds-accent-text); } .ek-scheme__swatch { position: relative; display: block; height: 44px; border-radius: 10px; border: 1px solid var(--ds-line); overflow: hidden; } /* A card on the ground, with an accent bar on it. */ .ek-scheme__swatch i { position: absolute; left: 10px; right: 10px; top: 10px; bottom: -4px; border-radius: 6px 6px 0 0; background: var(--sw-surface); box-shadow: inset 0 3px 0 var(--sw-accent); } .ek-scheme__swatch--light { background: #F3F4F9; --sw-surface: #FFFFFF; --sw-accent: #3F5BD9; } .ek-scheme__swatch--dark { background: #0D0E11; --sw-surface: #17181C; --sw-accent: #4B67E8; } /* near-black (Kevin, 30 Sep: "Swap them") */ .ek-scheme__swatch--night { background: #161A2E; --sw-surface: #22273F; --sw-accent: #4B67E8; } /* navy */ .ek-scheme__swatch--system { background: linear-gradient(90deg, #F3F4F9 50%, #0D0E11 50%); --sw-surface: linear-gradient(90deg, #FFFFFF 50%, #17181C 50%); --sw-accent: #3F5BD9; } .ek-scheme__save { margin-top: 12px; } /* With script a tap saves, so the button is only for a browser without it. */ .ek-scheme--live .ek-scheme__save { display: none; } /* ══════════════════════════════════════════════════════════════════════════ * A young person's photo control opens the avatar builder (Kevin, morning * 30 Sep 2026; companion Family\YouthPhotos). On her edit screen the upload * button is hidden; the companion's script puts a link to the builder in its * place, in the same corner and the same shape (`.ek-ep-avatar-design` keeps * the vendor's `.bn-ep-avatar-btn`). Without script the link shows under the * hero instead. Staff editing a young person's profile get no upload either. * ══════════════════════════════════════════════════════════════════════════ */ .ek-ep--designs .bn-ep-avatar-btn:not(.ek-ep-avatar-design) { display: none !important; } .ek-ep-avatar-design { color: inherit; text-decoration: none; } .ek-ep-design { margin: 10px 0 0; } .ek-ep-design[hidden] { display: none; } .ek-ep-design__link { font-weight: 600; color: var(--ds-accent-text); }