/* ==========================================================================
   AMIN APAC — header-account.css
   The one account control in the site header. Loaded by the seven public pages
   and by nothing else.

   WHY IT IS NOW ALLOWED, when it twice was not. The header carries ONE action -
   "Brief the network", settled 2026-08-20 - and for as long as the only login
   was the eleven agencies', a second control there cost every visitor to serve
   eleven people. A buyer account changes that arithmetic and nothing else does:
   an account is now a thing the audience this page is written for can actually
   want. brief.md recorded the condition on 2026-08-27 and this is it being met.

   IT IS A LINK, NOT A BUTTON, and that is the whole of how the two coexist. The
   primary stays the only filled pill in the bar. A second pill beside it would
   be two calls to action, which is none - the exact failure the earlier "no"
   was protecting against. Sign in earns a place in the chrome by being quiet in
   it.

   Deletable as a set with js/header-account.js and the one <a> per page.
   ========================================================================== */

/* base.css pushes the header's button right with `.site-header .btn{margin-left:
   auto}`. A link placed before it would otherwise sit against the wordmark with
   the whole bar between them. The auto margin moves to the link, and the button
   gives its own up - at three classes this outranks the two-class rule it is
   correcting, so base.css is not touched. The gap between them is the flex gap
   the bar already has. */
/* .wrap is in the selector to WIN, not to describe. Three rules push this
   button right - base.css's `.site-header .btn` at 0,2,0 and profile.css's
   `body.pf .site-header .btn` at 0,3,1 - and the second outranks the obvious
   two-class correction, so on the profile both margins resolved to auto and
   flexbox split the free space between them, stranding the link 203px from the
   button it belongs beside. Four classes clears both without touching either
   sheet. */
.site-header .hdr-account{margin-left:auto}
.site-header .wrap .hdr-account + .btn{margin-left:0}

.hdr-account{
  flex:none;
  color:var(--gray);
  font-size:15px;font-weight:400;line-height:22px;
  text-decoration:none;white-space:nowrap;
  transition:color 160ms var(--ease);
}
.hdr-account:hover,
.hdr-account:focus-visible{color:var(--plum)}

/* THE DARK BAR, keyed on the button variant rather than on the page. index and
   profile put the header over their hero as a transparent bar and take
   .btn-on-dark; the five light pages take .btn-primary. That class is already
   the per-page decision about which ground this bar sits on, so reading it here
   means the link can never disagree with the button beside it - which a body
   class or a page list both eventually would. */
.site-header:has(.btn-on-dark) .hdr-account{color:rgb(255 255 255 / .74)}
.site-header:has(.btn-on-dark) .hdr-account:hover,
.site-header:has(.btn-on-dark) .hdr-account:focus-visible{color:var(--white)}

/* Signed in, the link stops being an invitation and becomes a label for where
   you already are. The dot is the whole of the state change: a bar that shouted
   about being logged in would be spending the primary action's attention. */
.hdr-account[data-in]::before{
  content:"";
  display:inline-block;width:6px;height:6px;margin-right:7px;
  border-radius:50%;background:var(--green);
  vertical-align:1px;
}

@media (max-width:900px){
  .hdr-account{font-size:14px}
}
@media (max-width:560px){
  /* The label STAYS. Hiding it and leaving the dot was tried and is worse than
     useless: signed out there is no dot, so the control disappeared entirely
     rather than degrading. "Sign in" is seven characters and the bar has room
     for them at 320px - measured, not assumed. */
  .hdr-account{font-size:13px}
}