/* The account menu: the signed-in person's photo at the right end of the
   header and the small menu that drops down under it. The DOM is injected
   into the header's [data-account] slot by scripts/components/account-menu.js
   only when a session cookie is present. Open/close is the hidden checkbox
   (the header burger's pattern); closing on an outside click is JS, since the
   header's backdrop-filter traps a fixed scrim. */

/* The slot: no box at all for visitors, the menu's anchor when signed in */
.account { view-transition-name: account; position: relative; display: inline-flex; }   /* holds still across pages (styles/transitions.css) */
.account:empty { display: none; }

/* Signed in: the slot holds the photo's size from first paint (the layout's
   head script sets .signed-in), so the nav never shifts when the photo lands */
:root.signed-in .account:empty { display: inline-flex; width: 2.2rem; height: 2.2rem; }

/* Hidden checkbox drives the open state via sibling selectors */
.account-check { position: absolute; opacity: 0; pointer-events: none; }

/* The photo: a circle the size of the theme toggle, with the toggle's hairline */
.account-button {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: var(--hair);
  border-radius: var(--pill);
  color: inherit;
  cursor: pointer;
  transition: border-color var(--fast), outline-color var(--fast);
}
.account-button:hover { border-color: currentColor; }
.account-photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; display: block; }
.account-initial { font-size: var(--small); font-weight: var(--light); }

/* Open: the photo stays, ringed */
.account-check:checked ~ .account-button { outline: 1px solid currentColor; outline-offset: 2px; }

/* Keyboard focus lives on the hidden checkbox and shows on the photo, in the
   theme toggle's accent ring; after the open ring, so focus wins */
.account-check:focus-visible ~ .account-button { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The menu, hung from the bar's bottom edge under the photo, right edges
   aligned: the burger sheet's look (Costa, 2026-09-16). The sheet's glass
   (the page color at 88% over a blur), square, the rows as full-width
   hairlines in the sheet's type, the shadow on its bottom edge. Its own
   colors, so it never inherits the header's white over the hero. */
.account-menu {
  position: absolute;
  top: calc(100% + (var(--header-h) - 2.2rem) / 2);   /* the photo is centered in the bar: this is the bar's bottom edge */
  right: 0;
  width: min(280px, calc(100vw - 2 * var(--page-inset)));
  padding: var(--xs) var(--page-inset);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  border: var(--hair);
  border-top: 0;
  box-shadow: var(--shadow-down);
  font-size: var(--small);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-8px);
  transform-origin: top right;
  pointer-events: none;
  /* Closed = hidden at once, so its links leave the tab order the moment it
     closes (a fade-out would leave Shift+Tab a window to land in it); it
     still fades in */
  visibility: hidden;
  transition: opacity var(--fast), transform var(--fast);
}
.account-check:checked ~ .account-menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
}

/* The blur reads the page only if no ancestor is a backdrop root: while the
   menu is open the slot drops its view-transition-name and the bar drops its
   name and its own blur (it keeps its fill), as the burger sheet does. */
.account:has(.account-check:checked) { view-transition-name: none; }
.site-header:has(.account-check:checked) {
  view-transition-name: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The head row: the name and agency, in the sheet's rhythm, a hairline under */
.account-name, .account-sub { margin: 0; text-transform: none; letter-spacing: 0; }
.account-name { padding: 0.85rem 0 0; font-weight: var(--regular); }
.account-sub { padding: 0.15rem 0 0; font-size: var(--tiny); opacity: 0.7; }
.account-name + .account-link, .account-sub + .account-link { border-top: var(--hair); margin-top: 0.85rem; }

/* The links: the sheet's rows */
.account-link {
  display: block;
  padding: 0.85rem 0;
  border-bottom: var(--hair);
  color: inherit;
  text-decoration: none;
  transition: color var(--fast);
}
.account-link:last-child { border-bottom: none; }
.account-link:hover { color: var(--accent); text-decoration: none; }
.account-link:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.account-signout { opacity: 0.7; }

/* Over the hero, before it scrolls: the sheet's ink glass, white text, faint
   white hairlines */
.has-full-hero .site-header:not(.scrolled) .account-menu {
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  color: var(--white);
}
.has-full-hero .site-header:not(.scrolled) .account-menu,
.has-full-hero .site-header:not(.scrolled) .account-menu .account-link { border-color: color-mix(in srgb, var(--white) 18%, transparent); }

/* Mobile: between the theme toggle (order 2) and the burger (order 3) */
@media (max-width: 1040px) {
  .account { order: 2; }
}