/* THE ACCOUNT VIEWS' OWN SYSTEM (docs/design/source/account-views/README.md, the v8 handoff of 24 September 2026; docs/account-views-v8-review.md §7). LOADED BY THE SIX ACCOUNT SHELLS - /hub/, /hub/organisation/, /hub/details/, /hub/about/, /hub/manage/ and /hub/review/ - AND BY THE LEAF HUBS (aiprofile, aigovernance, personal-ai-index), after hub.css, which stays frozen (D118). The leaf hubs draw chrome.js's header, hero and footer, so they take the restyle of those with everybody else and need the states here to go with it; their bodies are hub.css's and hub.js's own until cutover. Never the partner shells, which carry partner.css instead (H9). The two systems share the identity's colours and faces and differ in ground: the partner hub is an ink sidebar around a paper column; these views are white cards on paper under a paper hero. ⚠ NEARLY EVERYTHING THESE PAGES DRAW IS INLINE, and that is deliberate: hub-contrast.test.js audits the rendered tree by reading `color`, `background`, `font-size` and `font-weight` off inline styles, so a rest state written here would be a rest state the audit cannot see. What lives here is what an inline style cannot carry - hover, focus, and the phone breakpoints - plus the rest colour of the toggle's and the tabs' inactive links, written here rather than inline so the hover can change it (the audit does not render either control). SQUARE, RULED, NO SHADOW: v8's one geometric rule ("radius 0 everywhere except the on/off switch and 8px dots"). The ruler ticks of the marketing site are not in this handoff and are not drawn. THE COLOURS ARE THE HANDOFF'S TOKENS, named in chrome.js's T for the inline uses: ink #1B1917, paper #F6F2EA, paper-2 #FBF8F1, rule #E5E2D9, rule-soft #F1EDE3, rule-strong #8F8778, sep #C9C3B6, text-2 #37332C, text-3 #57534A, accent #C8471C, error #B23A16, positive #2E6B4E. ⚠ #8F8778 IS A BORDER COLOUR AND NEVER TEXT: the mocks use it for 12px record lines and counters, and at 3.4:1 on white it fails AA (review §5); those read in #57534A. VERMILLION IS THE HOVER AND THE FOCUS RING HERE, as v8 draws them, which is wider than the partner hub's data-only rule (H10). The ring is #C8471C (3:1 is its bar); the hovers are the site's --rust-ink #C2451B, because #C8471C is 4.30:1 on paper, below AA as text and behind a cream label, and #C2451B is 4.52:1 (26 October 2026, review of #969). */ /* ---- focus, the same ring on every control ------------------------------- */ #hub a:focus-visible, #hub button:focus-visible, #hub input:focus-visible, #hub select:focus-visible, #hub textarea:focus-visible, #hub summary:focus-visible { outline: 2px solid #C8471C; outline-offset: 3px; } /* ---- links: ink at rest (hub.css), the accent on hover ------------------- */ /* An inline `color` beats this, so the links that should take the hover - utilityLink() and the text links the pages draw - carry no inline colour and inherit ink from hub.css's `a` rule. quietLink() keeps its muted colour inline and so keeps it on hover, which is right for a link that should not compete with the sentence it sits in. :where() takes the id's weight off, so a class's own hover wins. As `#hub a:hover` it out-ranked report-layout.css's links drawn as buttons and painted their labels rust on their own rust fill: the leaf's "Re-take the Index" (.prl-btn) and "What happens next" (.orl-next__btn) went blank. */ :where(#hub) a:hover { color: #C2451B; } /* linkButton()'s button drawn as a link takes the same hover; the anchor rule above cannot reach a button, and linkButton writes its colour inline, which only !important out-ranks (the same shape as the button hovers below). */ #hub button.ail-link:hover:not([disabled]) { color: #C2451B !important; } /* ---- buttons: the hover is the stylesheet's, keyed on the rest state ------ */ /* btnStyle() and navBtnStyle() write the rest state inline (see the note at the top), so the hover has to out-rank an inline declaration, and the only thing that does is !important. The selector keys on the very declaration it changes - the fill a primary button starts with, the white a secondary one starts with - so a button that is not one of those two takes no hover, and the :not([disabled]) guard keeps it off a disabled one. */ #hub .ail-act[style*="background:#1B1917"]:hover:not([disabled]) { background: #C2451B !important; border-color: #C2451B !important; } #hub .ail-act[style*="background:#fff"]:hover:not([disabled]) { border-color: #1B1917 !important; background: #FBF8F1 !important; } /* v8's disabled primary (the Share button before its tick) is the same button at 40%. Keyed on the two fills above for the same reason: the manage panel draws ITS disabled buttons in their own grey with a white label, and 40% over that would be illegible. */ #hub .ail-act[disabled][style*="background:#1B1917"], #hub .ail-act[disabled][style*="background:#fff"] { cursor: not-allowed; opacity: 0.4; } /* ---- the scope toggle: hub.css's pill, square ---------------------------- */ /* hub.css paints .tabpill round with a 1.5px hairline; v8's toggle is a 1px #8F8778 box with 4px inside it and square segments. The phone rules below are hub.css's own, re-declared because a later base rule at equal specificity would otherwise beat hub.css's earlier media rule - the 14px touch target at 560 is not something this file may take away. */ #hub .tabpill { border: 1px solid #8F8778; border-radius: 0; gap: 4px; background: #fff; } #hub .tabseg { border-radius: 0; padding: 9px 20px; font-weight: 600; } /* navRow writes neither colour nor background on an inactive segment, so both the rest state and the hover land. The current segment carries its ink fill and paper text inline. */ #hub a.tabseg { color: #37332C; } #hub a.tabseg:hover { background: #F1EDE3; color: #1B1917; } @media (max-width:560px) { #hub .tabpill { border-radius: 0; } #hub .tabseg { padding: 14px 12px; } } /* ---- the view tabs under the hero ---------------------------------------- */ /* tabRow() writes no colour on an inactive tab, so the rest state and the hover both land; the current tab is ink inline. */ #hub a.hubtab { color: #57534A; } #hub a.hubtab:hover { color: #1B1917; } /* ⚠ NO .eyebrow RULE HERE, THOUGH v8 CHANGES ITS WEIGHT AND COLOUR. A colour carried by a class is one hub-contrast.test.js cannot resolve, so the eyebrows write v8's 600 and #57534A inline (pageHeader, sectionHead, and the pages' own) on top of the class hub.css gives them. */ /* ---- the phone ----------------------------------------------------------- */ /* The hero's tab row loses its 40px of air on a phone, where the h1 has already taken the height; the card grids reflow alone (H.indexGrid in chrome.js). ⚠ THREE TABS OR FEWER STAY A ROW, FOUR GO TO TWO ALIGNED COLUMNS, AND THE UNDERLINE MOVES IN. Wrapped as a row they once sat ragged, with 14px under each tab and 4px between rows, so the current tab's rule sat nearer the row below than the word it marks; the two-column grid that replaced it (8 October 2026) then left the Personal view's third tab alone on a second row (Finlay, 16 October 2026). Now a row of three or fewer keeps the inline flex row, which fits a phone at ordinary text sizes, with the underline 8px under each tab, 18px between rows if it ever wraps (a long label, or text enlarged), and every tab bottom-aligned so the rules sit on one line. Four tabs do not fit one row at 320px, so the Organisation view's full row keeps two aligned columns; a browser without :has() wraps them as a row instead, which stays inside the band. tabRow() writes the display, gap and padding inline, hence !important. */ @media (max-width:560px) { #hub nav.hubtabs { margin-top: 28px; align-items: flex-end; gap: 18px clamp(16px, 5vw, 28px) !important; } #hub a.hubtab { padding-bottom: 8px !important; } #hub nav.hubtabs:has(> a:nth-child(4)) { display: grid !important; grid-template-columns: auto auto; justify-content: start; gap: 18px 28px !important; } #hub nav.hubtabs:has(> a:nth-child(4)) > a.hubtab { justify-self: start; } /* A link field and its Copy button share one row (the leaf hub's "Help build the picture"). ail-act's phone rule makes a button the full width, which here left the field a sliver and the button overflowing the card, so in this row the button keeps its own width. The selector out-ranks chrome.js's injected `.ail-act`, and both carry !important. */ #hub .ail-copyrow > .ail-act { display: inline-block !important; width: auto !important; flex: none !important; } } /* ---- the index card's "Partner sharing" strip and the partner's switch --- */ /* shareStrip() writes the rest state inline (the contrast audit reads it); the hover and the chevron's turn are here. The chevron is a bordered box turned 45 degrees rather than an SVG, because el() builds HTML elements and an made that way is not an SVG. */ #hub .ail-strip:hover { background: #F6F2EA !important; } #hub summary.ail-strip::-webkit-details-marker { display: none; } #hub .ail-strip__end { margin-left: auto; } #hub .ail-chev { display: inline-block; width: 7px; height: 7px; box-sizing: border-box; border-right: 1.6px solid #1B1917; border-bottom: 1.6px solid #1B1917; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; } #hub details[open] > .ail-strip .ail-chev { transform: translateY(2px) rotate(225deg); } /* v8's on/off switch: the pill track and the round knob are the two radii the handoff allows. The rest state is inline; this is the .2s ease it moves with. */ #hub .ail-switch { transition: background .2s ease, border-color .2s ease; } #hub .ail-switch__knob { transition: left .2s ease; } #hub .ail-switch[disabled] { opacity: 0.4; } /* No movement for a device set to reduce motion (2 October 2026): the chevron and the switch still change state, they just do not animate it. */ @media (prefers-reduced-motion: reduce) { #hub .ail-chev, #hub .ail-switch, #hub .ail-switch__knob { transition: none; } } /* ---- the header: logo, scope toggle, account menu ------------------------ Finlay, 23 October 2026, design_handoff_hub_nav_responsive. Three widths: desktop 1024 and up, tablet 640 to 1023, phone below 640. The account menu itself is account-menu.css's, which the partner hub's pages load too; what is here is this bar's own arrangement, scoped to .hubnav, which only the unframed bar carries. ⚠ THE ROW NEVER STACKS HERE, against hub.css's column at 700: on a phone the logo and the button share the first row and the toggle takes the second, full width (order and flex-basis, not a second element). */ /* ⚠ 8px ABOVE AND BELOW AND 8px BETWEEN ROWS, at every width (Finlay, 23 October 2026, the phone toggle sat flush under the logo row). min-height is the container's, not its first line's, so once the row wraps it puts no space above the first line or between the lines; the padding and the row gap do, and the handoff's phone drawing is 8px, 8px, then 14px under the toggle. Unwrapped, the row is as tall as before (border-box, items centred). The row can wrap at a tablet width too, with a partner's lockup on a leaf index hub. */ #hub .hubnav .toprow { min-height: 76px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 8px 0; } /* width:auto against hub.css's 100% at 700 and below, which put the toggle on a line of its own between 640 and 700. */ #hub .hubnav .tabpill { display: flex; width: auto; padding: 3px; gap: 0; } #hub .hubnav .tabseg { padding: 9px 24px; font-size: 14px; font-weight: 600; text-align: center; } @media (max-width:1023px) { #hub .hubnav .toprow { min-height: 68px; gap: 8px 16px; } #hub .hubnav .tabseg { padding: 8px 22px; } } @media (max-width:639px) { /* Sticky, so the view and the menu stay in reach down a page of results (the handoff's recommendation); the sticky bar is also what the phone's menu card is placed against. */ #hub .hubnav { position: sticky; top: 0; z-index: 40; } /* ⚠ clip, NOT hub.css's hidden: overflow-x:hidden on html and body makes body a scroll container that never scrolls, and a sticky header inside it never sticks. clip stops the sideways scroll without that; a browser that does not know clip keeps hub.css's hidden. */ html, body { overflow-x: clip; } #hub .hubnav .toprow { min-height: 60px; gap: 8px 12px; } /* ONE ROW ON A PHONE (Finlay, 24 October 2026, design_handoff_hub_phone_scope_menu, Option A): the toggle leaves the bar for the account menu's View group, and the account button reads the view (chrome.js accountMenu, account-menu.css). Pinned, the bar is 61px where it was 121. */ #hub .hubnav .tabpill { display: none; } /* ⚠ AND THE ROW NEVER WRAPS NOW: the menu card is placed at 66px, one row down (account-menu.css), so a second row would put it over the button. The partner's logo is capped at 80px to make room: at 320px the lockup is then 121px beside "Organisation ▾" at about 127, in a 288px row. hub.css's and this file's 560px .tabpill rules style nothing on a phone since this; hub.css is frozen (D118), so they stay until cutover. */ #hub .hubnav .toprow { flex-wrap: nowrap; } /* THE WORDMARK STAYS ON A PHONE WHERE IT FITS (Finlay, 24 October 2026: "plenty of space"). #938 drew the marks only at every phone width; the wordmark is the row's first thing to give way now, by fit rather than by a width sum. The lockup may shrink, and the marks-and-word span wraps with one line's height and overflow hidden, so when the row is short the wordmark drops to an unseen second line, whole: never clipped mid-word, never pushing the account button off the edge. That covers what a sum misses: a partner's logo beside it, "← Your account" in the row, the fallback font, a raised text size. The link keeps its aria-label, so a screen reader hears the same name either way. Under 360px it goes outright (below): there "Organisation" leaves no room and "Personal" does, and the bar is not to change shape with the view. The partner's logo, the rule and our mark at 20px, 10px apart. The sizes and flex are inline (lockup, ourMark, homeLink), so only !important reaches them. */ #hub .hubnav .bl-lock, #hub .hubnav .bl-home { flex: 0 1 auto !important; min-width: 0; } #hub .hubnav .bl-markword { flex-wrap: wrap; height: 20px; overflow: hidden; min-width: 0; } #hub .hubnav .bl-mark { width: 20px !important; height: 20px !important; } #hub .hubnav .bl-lock { gap: 10px !important; } #hub .hubnav .bl-lock__co, #hub .hubnav .bl-lock__rule { height: 20px !important; } #hub .hubnav .bl-lock__co { max-width: 80px !important; } } @media (max-width:359px) { #hub .hubnav .bl-word { display: none; } } /* ---- printing a tailored report (B29, 24 September 2026) ----------------- THE ONLY PAGE IN THIS SYSTEM ANYBODY PRINTS. A client reading what an AI model wrote about its organisation, and sent to its bank, will want it in the folder the meeting is in - and the partner's copy of the same document already prints (partner.css). The rule is the same shape: drop the frame's furniture and let the measure out. Nothing here changes the screen. `.hubdoc` is capped at 68ch on screen, which is the line length prose is read at and is far narrower than a page of paper. */ @media print { /* ⚠ !important IS NOT DECORATION HERE, IT IS THE ONLY THING THAT WORKS, AND WITHOUT IT THIS WHOLE BLOCK DID NOTHING (review, 24 September 2026). These pages write their look INLINE by design, so the contrast audit can read it off the rendered tree - and an inline style beats an author stylesheet at any specificity. `.hubdoc` carries `max-width:68ch` inline and `.hubtabs` carries `display:flex`, so the one behaviour this rule was copied from partner.css to fix - prose set to a 68-character measure in the middle of an A4 page - carried on happening. partner.css needs none of this because its measure comes from the stylesheet in the first place. `ensureActStyle` and `ensureHlogoStyle` in chrome.js carry the same note for the same reason. */ .hubnav, .hubtabs { display: none !important; } .hubdoc { max-width: none !important; } } /* ⚠ AND THE FOOTER IS NOT FURNITURE - IT IS THE LEGAL LINE, SO IT PRINTS. `.hubfoot` was in the list above, which took "© The AI Adoption Lab Limited, trading as Benchmark Lab · Registered in Scotland No. SC900444 · ICO registration ZC251110" off every printed page - including the one this rule exists for, where somebody files a page of AI-written judgement about their organisation with their meeting papers and it carries no company identity, no ICO number and no privacy sentence at all. partner.css's equivalent hides `.bl-topbar, .bl-side` and keeps its footer, which is the right instinct. The nav is furniture; the disclosure is not. */