/* THE ACCOUNT MENU (Finlay, 23 October 2026, design_handoff_hub_nav_responsive;
   chrome.js accountMenu). One component on every hub bar: the account pages'
   (account.css arranges that bar) and the partner hub's framed bar (partner.css
   arranges that one), so a partner meets the same account control on both
   sides of the hub. Desktop 1024 and up: the initial, the address over the
   organisation. Below 1024: the initial alone, and the menu opens with a
   "Signed in" block. Below 640: a card across the screen over a scrim.

   Its own file, loaded by both kinds of page, because account.css is not
   loaded on the partner hub and partner.css is not loaded anywhere else. */
.bl-acct { position: relative; flex: 0 0 auto; }
.bl-acct__btn { display: flex; align-items: center; gap: 10px; height: 40px;
  padding: 0 10px 0 4px; border: 1px solid #D6D1C5; border-radius: 0; background: #fff;
  color: #1B1917; cursor: pointer; font: 500 13px 'IBM Plex Sans', system-ui, sans-serif; }
.bl-acct__btn:hover, .bl-acct--open .bl-acct__btn { border-color: #1B1917; }
.bl-acct--open .bl-acct__btn svg { transform: rotate(180deg); }
.bl-acct__tile { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center;
  background: #1B1917; color: #F6F2EA; font: 600 13px 'Archivo', 'IBM Plex Sans', sans-serif; }
.bl-acct__who { display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
  max-width: 220px; line-height: 1.2; text-align: left; }
.bl-acct__email, .bl-acct__org { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-acct__email { font-weight: 600; }
.bl-acct__org { font-size: 12px; color: #57534A; }
.bl-acct__sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.bl-acct__menu { position: absolute; right: 0; top: 48px; width: 300px; z-index: 45;
  background: #fff; border: 1px solid #1B1917; box-shadow: 0 12px 32px rgba(27,25,23,.14); padding: 6px;
  text-align: left; }
.bl-acct__menu[hidden], .bl-acct__scrim { display: none; }
/* No "Signed in" block on a wide screen: the button already says who. */
.bl-acct__head { display: none; }
.bl-acct__head p { margin: 0; }
/* The id is what beats hub.css's `a` and partner.css's `.bl-frame a`
   (0,1,1), which would otherwise paint and underline these as links. */
#hub .bl-acct__item { display: flex; justify-content: space-between;
  align-items: center; padding: 10px 12px; text-decoration: none; color: #1B1917;
  font: 500 14px 'IBM Plex Sans', system-ui, sans-serif; }
#hub .bl-acct__item:hover, #hub .bl-acct__item:focus-visible { background: #F6F2EA; color: #1B1917; }
.bl-acct__ext { color: #8F8778; }
.bl-acct__rule { border-top: 1px solid #E5E2D9; margin: 6px 0; }
/* The phone's view label and View group (chrome.js accountMenu): not drawn
   above 639px, where the toggle in the bar says the view. */
.bl-acct__view, .bl-acct__viewgroup, .bl-acct__viewrule { display: none; }
.bl-acct__confirm { display: flex; align-items: center; gap: 6px; padding: 10px 12px;
  color: #1B1917; font: 500 14px 'IBM Plex Sans', system-ui, sans-serif; }
#hub .bl-acct__confirm a { color: #1B1917; }
@media (max-width:1023px) {
  .bl-acct__btn { gap: 6px; padding: 0 8px 0 4px; }
  .bl-acct__who { display: none; }
  .bl-acct__head { display: block; padding: 12px 12px 10px; border-bottom: 1px solid #E5E2D9; margin-bottom: 6px; }
  .bl-acct__tile--big { display: none; }
  .bl-acct__head .bl-acct__eyebrow { font: 600 11px/1 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: .12em;
    text-transform: uppercase; color: #8F8778; margin-bottom: 8px; }
  .bl-acct__heademail { font: 600 14px/1.3 'IBM Plex Sans', system-ui, sans-serif; color: #1B1917; word-break: break-all; }
  .bl-acct__head .bl-acct__headorg { font: 400 13px/1.4 'IBM Plex Sans', system-ui, sans-serif; color: #57534A; margin-top: 2px; }
  #hub .bl-acct__item, .bl-acct__confirm { padding: 12px; }
}
@media (max-width:639px) {
  /* The card is placed against the bar. On the account bar that is the
     sticky .hubnav, one 60px row on a phone (account.css), so 66 is that row
     plus 6. The partner bar's row is its own containing block and
     sets --bl-acct-top to calc(100% + 6px) (partner.css). */
  .bl-acct { position: static; }
  .bl-acct__btn { height: 44px; padding: 0 8px 0 6px; }
  /* ON THE ACCOUNT BAR the button, the toggle it replaces and the card share
     the toggle's border (Finlay, 24 October 2026,
     design_handoff_hub_phone_scope_menu). Not on the partner bar, which has no
     toggle and whose account button sits beside its own ink-bordered Menu
     button (partner.css .bl-menubtn): there the pair matching is the reason.
     ⚠ A TAP LEAVES :hover ON THE BUTTON, so the fill and the ink border are
     the open state's alone here, and the hover fill is only where there is a
     pointer to hover (below). Otherwise a closed button looks open. */
  .hubnav .bl-acct__btn, .hubnav .bl-acct__btn:hover { border-color: #8F8778; background: #fff; }
  .hubnav .bl-acct--open .bl-acct__btn { border-color: #1B1917; background: #F1EDE3; }
  .hubnav .bl-acct__menu { border-color: #8F8778; }
  .bl-acct__btn svg path { stroke: #1B1917; }
  /* With a view to read, the button is the view's name and the chevron; who
     is signed in is the menu's head. */
  .bl-acct__btn--view { gap: 6px; padding: 0 10px 0 12px; }
  .bl-acct__btn--view .bl-acct__tile { display: none; }
  .bl-acct__view { display: block; font: 600 14px/1 'IBM Plex Sans', system-ui, sans-serif;
    color: #1B1917; white-space: nowrap; }
  .bl-acct__menu { left: 12px; right: 12px; top: var(--bl-acct-top, 66px); width: auto;
    box-shadow: 0 12px 32px rgba(27,25,23,.18); }
  .bl-acct__head { display: flex; gap: 12px; align-items: center; padding: 10px 12px 12px; }
  .bl-acct__tile--big { display: grid; width: 40px; height: 40px; font-size: 16px; }
  .bl-acct__headtext { min-width: 0; }
  .bl-acct__head .bl-acct__eyebrow { display: none; }
  #hub .bl-acct__item, .bl-acct__confirm { min-height: 44px; padding: 0 12px; font-size: 15px; }
  #hub .bl-acct__item:hover, #hub .bl-acct__item:focus-visible { background: #F1EDE3; }
  .bl-acct__viewgroup, .bl-acct__viewrule { display: block; }
  /* ⚠ #57534A, NOT THE HANDOFF'S #8F8778: that is a border colour and never
     text, 3.4:1 on white (account.css's note on the tokens). */
  .bl-acct__viewhead { margin: 0; padding: 8px 12px 4px; color: #57534A;
    font: 600 11px/1.2 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
  #hub .bl-acct__viewitem { color: #37332C; }
  #hub .bl-acct__viewitem--on { color: #1B1917; font-weight: 600; }
  /* The page you are on is not pressable, so it takes no hover. */
  #hub span.bl-acct__viewitem:hover { background: none; }
  /* The scrim dims the page and closes the menu on its own click (chrome.js
     accountMenu): a press on it counts as inside, so it is still there for
     the click and nothing under it is tapped by accident. */
  .bl-acct--open .bl-acct__scrim { display: block; position: fixed; inset: 0; z-index: 44;
    background: rgba(27,25,23,.35); }
  /* The button stays above the scrim, so a tap on it closes the menu rather
     than landing on the scrim and opening it again on the click. */
  .bl-acct--open .bl-acct__btn { position: relative; z-index: 46; }
}
@media (max-width:639px) and (hover:hover) {
  .hubnav .bl-acct__btn:hover { background: #F1EDE3; }
}