/* ════════════════════════════════════════════════════════════════════════ Partner portal — the ACCOUNT family (MAR-1782). Two things, one change unit: the sidebar's account footer (chrome, on all 20 portal pages) and the account page it links to. WHY ITS OWN SHEET. `portal.shell.css` was 15,636 bytes against the 16,384-byte `SHEET_SIZE_CEILING` — 748 bytes of headroom, which an account family plus its ≤700px branch does not fit in. The ceiling's own failure message says what to do: "A sheet at the ceiling is the signal to START A NEW ONE, not to raise this number." So this is a new sheet plus a `` in `partner/_head.html` plus an entry in `tests.unit.partner_css`'s `SHARED_SHEETS` — three edits in lockstep, or CI fails. WHY THE SHARED LAYER RATHER THAN A PER-SCREEN SHEET. The footer is part of `partner/_sidebar.html`, which 20 pages `{% include %}` — so its rules have to load on all of them, not only on the account page. ⚠️ NO SELECTOR HERE MAY NAME A CLASS DEFINED IN ANOTHER PARTNER SHEET, not even as an ancestor. `test_no_class_is_defined_in_two_files` reads every `.pp-*` token in the file (comments stripped) and reports it as a DEFINITION, so a descendant selector like `.pp-side .pp-side__foot` would be reported as a duplicate definition of `.pp-side`, which lives in portal.shell.css. Every rule below therefore stands on its own class. That is also why the footer's push-to-the-bottom is `margin-top:auto` ON THE BLOCK rather than a `.pp-side` change: it works because `.pp-side` is already `display:flex; flex-direction:column`, which it has been since MAR-665 — there is no `.pp-side__foot` region and never was. Colours are pulled from the portal's own token set the way `.pp-nav` does (`--ink` / `--ink-2` / `--ink-3`, `--tint-hover`, `--mp-rule`, `--r-md`). The two sibling footers this is modelled on — admin's `.admin-sidebar__footer` and support's `.sidebar__foot` — are for a NAVY sidebar and hard-code white-on-transparent values; `.pp-side` is white, so the structure and the copy are reused and the palette is not. ══════════════════════════════════════════════════════════════════════ */ /* ── the sidebar account footer ── */ /* `margin-top:auto` is the pusher. `.pp-side` is a top-aligned flex column, so without it the block sits directly under the last nav item rather than at the foot of the rail. */ .pp-side__foot { margin-top:auto; display:flex; align-items:center; gap:8px; padding:12px 4px 0; border-top:1px solid var(--mp-rule); } /* The lettered circle. Beige-on-ink rather than the navy sidebars' gold-on- navy, so it reads on the white rail. */ .pp-side__mark { width:26px; height:26px; flex:none; border-radius:50%; background:var(--mp-beige); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; letter-spacing:.02em; } /* The account control: the circle AND the two lines, one link. `min-width:0` is what lets the lines ellipsize — a flex item's default `min-width:auto` refuses to shrink past its content. */ .pp-side__acct { flex:1; min-width:0; display:flex; align-items:center; gap:8px; text-decoration:none; border-radius:var(--r-md); padding:4px; margin:-4px; } .pp-side__acct:hover { background:var(--tint-hover); } .pp-side__acct:focus-visible { outline:2px solid var(--mp-navy); outline-offset:2px; } .pp-side__who { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; } /* The person's name (MAR-2023), or the organisation's when no person was resolved. Both are free text and can be long, so it truncates rather than wrapping the rail wider. */ .pp-side__name { font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* "Role · Organisation" since MAR-2023 — it now carries a partner's `display_name`, so it truncates the same way. */ .pp-side__role { font-size:10.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Icon-only, like admin's. Padded to a comfortable hit area rather than the 17px glyph's own box. */ .pp-side__out { flex:none; display:flex; align-items:center; padding:5px; color:var(--ink-2); border-radius:var(--r-sm); } .pp-side__out:hover { background:var(--tint-hover); color:var(--ink); } .pp-side__out:focus-visible { outline:2px solid var(--mp-navy); outline-offset:2px; } /* ── the account page ── */ /* `max-width` on the CARD, not on `.pp-main`: this page is a short list of facts, and a 1fr card stretched across a wide viewport puts the label and its value a screen apart. `.pp-card` (portal.primitives.css) supplies the material padding and the vertical stack; this only bounds the measure and tightens the rhythm, since the rows here are one line each rather than the form blocks that sheet's 16px gap is sized for. */ .pp-acct { gap:12px; max-width:620px; } .pp-acct__grid { display:grid; grid-template-columns:auto 1fr; gap:10px 22px; align-items:baseline; } .pp-acct__l { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); } .pp-acct__v { font-size:14px; color:var(--ink); min-width:0; overflow-wrap:anywhere; } .pp-acct__orgs { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; } .pp-acct__org { display:flex; align-items:baseline; gap:10px; font-size:13.5px; color:var(--ink-2); } .pp-acct__org--on { color:var(--ink); font-weight:600; } /* ── ≤820px: the rail becomes a horizontal bar ── `.pp-side` flips to `flex-direction:row; flex-wrap:wrap` at this breakpoint (portal.shell.css), which makes `margin-top:auto` meaningless and would drop this block mid-bar. Pushed to the END of the bar instead, with the rule moved from the top edge to the leading edge. The name and role are hidden the way `.pp-brand__txt` is — the bar is a row of icons at this width. The initials circle stays, and it IS the account link (the anchor wraps it), so the page is still reachable there; its accessible name rides on the anchor's `aria-label`, since a `display:none` node is out of the accessibility tree as well as out of the layout. THE WIDTH IS NOT FREE TO DIVERGE (MAR-1816). It moved 700 → 820 with the sidebar's own collapse, because this block exists only to re-lay the footer for a sidebar that is a ROW. Left at 700 it would lay the footer out for a column between 701 and 820px while the sidebar is already a row — the footer stranded under the nav with a top rule and `margin-top` it cannot use. MAR-1816 also turned the bar into a drawer: with the drawer OPEN this block still applies, and the footer wraps below the revealed items rather than sitting on the bar. That is accepted rather than styled, and portal.shell.css's collapse block says why a `:checked` rule for `.pp-side__foot` cannot be written from either sheet. */ @media (max-width:820px) { .pp-side__foot { margin-top:0; margin-left:auto; padding:0 0 0 10px; border-top:none; border-left:1px solid var(--mp-rule); flex:none; gap:2px; } .pp-side__who { display:none; } /* Both controls are icon-only here, so the padding IS the hit area: 28 + 2×8 and 17 + 2×12 put them at 44px and 41px, against the ~24px each would be at the desktop padding. The `margin:-4px` that lets the desktop hover bleed past the text is dropped with it. */ .pp-side__acct { flex:none; padding:8px; margin:0; } .pp-side__mark { width:28px; height:28px; } .pp-side__out { padding:12px; } }