/* assets/css/account.css
   THE ACCOUNT CONTROL, AND THE SHEET IS THE POINT.

   These rules lived in suite.css until 2026-09-20. desk-gate.js mounts the
   control on any page carrying a mount seat, and four pages carry one:
   index.html, editorial.html, framework.html and social.html. Only the first
   two load suite.css. MEASURED 2026-09-20, signed in, in headless Chrome at
   390: on framework.html and social.html the control rendered in Arial 13.3px
   with the browser's own outset border, showing the full name and the fallback
   initial at once ("AshaA"), because the rules that hide one of them were not
   loaded. At 358 it spanned x=311 to 367, nine pixels past the screen.

   WHY A SHEET AND NOT A COPY. The obvious repair is to paste these rules into
   social-dark.css, and that would make a third copy of a block that already
   exists twice (here and in app-door.css, held in step by
   tests/account-identity.test.js). A control that can mount on a page ships
   its styles with itself, so the sheet goes wherever the mount seat goes.
   tests/account-sheet-coverage.test.js is what keeps that true.

   WHY IT NEEDS NO COLOURS OF ITS OWN. Every value below is a token. All 26 of
   them are declared in social-dark.css as well as in suite.css, so on the two
   Social pages this block takes the dark world without one new decision.

   Every layout gate in this repo loads its pages with no session, so the
   control never mounted while they measured and overflow_check reported those
   pages CLEAN. That is finding U2 of the 2026-09-20 audit. */

/* ── THE ACCOUNT, top right, on every surface that carries a masthead ────────
   Ritu, 2026-09-19, looking at the signed-in front door: "I did not even
   notice Ritu on the desktop screen. That's another sloppy piece of work."
   And the question underneath it: "How will anyone know where the login or
   logout screen is?"

   MEASURED before this block existed: signed in, the page painted his first
   name as a fifth .navlink, in the same uppercase 12px with the same tracking
   as Product, Pricing and Why us?, so the one control on the bar that is about
   the READER wore the costume of the ones that are about the product. And the
   live page carried no sign-out at all: the string does not occur in it, and
   the only script it loads has none either.

   HIS CHOICE OF THREE SHAPES OFFERED, 2026-09-19: the name with a chevron,
   opening a menu that holds the address, the devices and the way out. Signed
   out, the same corner is a Log in capsule.

   IT IS QUIETER THAN .cta ON PURPOSE. The front door's own call to action is
   Request a demo and it must keep the weight; an account control that shouts
   louder than the thing the page is for is a bar with two first places. So the
   capsule is an outline and the signed-in state is a text button with a rule
   under it only on hover.

   IT IS NOT A .navlink, which is what keeps it on screen below 560px where
   front-door.css hides those. A reader on a narrow window still has to be able
   to find the way out. */
/* THE CAPSULE READS THE BAR IT SITS ON, NOT THE PAGE BEHIND IT, and these four
   lines are why this sheet can serve a light page and a dark one.

   MEASURED 2026-09-20 at 390, the first time this sheet was loaded on
   framework.html: the capsule painted #ECE7DC on the masthead's #E9EDED, which
   is 1.0:1. Nothing was wrong with the tokens. social-dark.css sets --ink light
   because its PAGE is #16171A, while its masthead is a deliberate cream strip
   ("masthead: BRAND INVARIANT" at social-dark.css:272). Every other control in
   that bar already carries explicit colours, so this capsule was the first
   thing in it that ever inherited, and it inherited the page's ink onto the
   bar's paper.

   The menu is not in this indirection on purpose. It drops BELOW the bar onto
   the page, where the page's own tokens are the right ones: on Social that is a
   #1F2024 panel with light text, which is what a menu on a dark page should be.
   The bar and the panel are two different grounds, and only one of them is an
   island. */
.account {
  --acct-ink:      var(--ink);
  --acct-edge:     var(--rule-soft);
  --acct-edge-out: var(--rule);
  --acct-hover-bg: var(--paper-deep);
  position: relative; display: inline-flex; align-items: center;
}

/* Signed out. A capsule, because DESIGN-SYSTEM.md gives boxed interactive
   controls var(--pill), and because a bordered shape reads as a control where
   a bare word reads as navigation. That difference is the whole complaint. */
.account__login {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-size-adjust: var(--x-adjust);
  font-size: var(--t-1); font-weight: 500; letter-spacing: var(--track-caps);
  text-transform: uppercase; text-decoration: none;
  color: var(--acct-ink); background: transparent;
  border: var(--hairline) solid var(--acct-edge-out); border-radius: var(--pill);
  /* 44px, not 36. It is this product's tap floor on a phone, and on a desktop
     it is what stands the capsule level with the .cta beside it: measured, the
     call to action is 46px and a 36px capsule beside it read as an afterthought
     rather than a control. */
  padding: 0 var(--s-3); min-height: var(--touch-min);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.account__login:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); }

/* Signed in. The name, and a drawn chevron rather than a typed one: the craft
   floor refuses a unicode glyph standing in for an icon, and a text arrow
   also inherits the font's own baseline and sits wrong. */
.account__btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-size-adjust: var(--x-adjust);
  font-size: var(--t-1); font-weight: 500; letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--acct-ink); background: transparent;
  /* A VISIBLE EDGE AT REST, and this is the whole repair. Ritu, 2026-09-19:
     "I did not even notice Ritu on the desktop screen." A control that only
     shows its shape on hover is a control nobody finds, and on a touch screen
     there is no hover at all. The account slot is a capsule in both states now,
     signed in and signed out, so the corner always looks pressable. */
  border: var(--hairline) solid var(--acct-edge); border-radius: var(--pill);
  padding: 0 var(--s-3); min-height: var(--touch-min); cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.account__btn:hover,
.account__btn[aria-expanded="true"] { background: var(--acct-hover-bg); border-color: var(--acct-edge); }
.account__chev { width: 10px; height: 10px; flex: none; transition: transform .18s ease; }
.account__btn[aria-expanded="true"] .account__chev { transform: rotate(180deg); }

/* The menu. An offset and a soft blur, never a zero-offset halo: light in this
   product comes from above, so the panel casts downwards. */
.account__menu {
  position: absolute; top: calc(100% + var(--s-2)); right: 0; z-index: 60;
  /* MEASURED: the address sets 194px in JetBrains Mono at --t-1, and a 264px
     menu gave its column 170. Widened until his own address fits without an
     ellipsis, because the ellipsis on the one line that says WHICH account this
     is defeats the point of showing it. A longer address than this still
     truncates, and keeps its title attribute. */
  min-width: 296px; max-width: 340px;
  background: var(--paper-warm);
  border: var(--hairline) solid var(--rule-soft); border-radius: var(--box);
  box-shadow: 0 10px 28px rgba(8, 42, 76, .14), 0 2px 6px rgba(8, 42, 76, .08);
  padding: var(--s-2) 0;
}
.account__menu[hidden] { display: none; }

/* ── WHO YOU ARE, THE SAME BLOCK THE APP SHOWS ──────────────────────────────
   Ritu, 2026-09-20: "Next to my login credentials, why isn't there a logo like
   it is on the app? Look at what the app has and do something like that. The
   fonts in the app are also better."

   Right on both. This menu had one 12px line of address in the display face and
   no name at all, where the app's #menuWho carries an initials face, the name at
   --t-4 in weight 700 with Google's mark beside it, and the address in the MONO
   face. The mono is most of what he means by better fonts: an address is a
   string to be read character by character, not a phrase.

   EVERY VALUE HERE IS COPIED FROM app-door.css, class name for class name, so
   the two surfaces are one design and not two that resemble each other. They
   are declared twice because no stylesheet in this product is loaded by every
   page, the same reason --frame and the press tokens are declared twice, and
   tests/account-identity.test.js holds the two copies in step.

   The one thing that differs is the padding: the app's block spans a full-width
   drawer and insets to --frame, where this one sits in a 232px menu. */
.account__menu .who {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--paper-deep);
  border-bottom: var(--hairline) solid var(--rule);
}
.account__menu .who-face {
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--paper-warm);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-variation-settings: "wght" 600;
  font-size: var(--t-3);
  letter-spacing: normal;
}
.account__menu .who-text { display: grid; gap: 2px; min-width: 0; }
.account__menu .who-name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-variation-settings: "wght" 700;
  font-size: var(--t-4);
  letter-spacing: var(--track-tight);
  color: var(--ink);
  min-width: 0;
}
.account__menu .who-name > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Cap-height, not baseline: a square mark has no baseline of its own and drops
   below the letters it stands beside if it is asked to share one. */
.account__menu .who-idp { display: block; line-height: 0; flex: none; transform: translateY(1px); }
.account__menu .who-idp svg { display: block; width: 16px; height: 16px; }
.account__menu .who-mail {
  font-family: var(--font-mono);
  font-size: var(--t-1);
  color: var(--quiet);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 44px is the floor this product holds everywhere a finger can land. */
.account__item {
  display: flex; align-items: center; width: 100%;
  min-height: var(--touch-min); padding: 0 var(--s-3);
  font-family: var(--font-display); font-size-adjust: var(--x-adjust);
  font-size: var(--t-2); font-weight: 400; letter-spacing: 0;
  text-transform: none; text-align: left; text-decoration: none;
  color: var(--ink); background: none; border: 0; cursor: pointer;
}
.account__item:hover { background: var(--paper-deep); }
.account__item:focus-visible,
.account__btn:focus-visible,
.account__login:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.account__item[disabled] { color: var(--quiet); cursor: default; }
.account__item[disabled]:hover { background: none; }

/* The one thing that can go wrong here, said where it goes wrong. */
.account__failed {
  margin: 0; padding: var(--s-2) var(--s-3) 0;
  font-family: var(--font-display); font-size-adjust: var(--x-adjust);
  font-size: var(--t-1); color: var(--warn);
}
.account__failed[hidden] { display: none; }

/* A narrow window keeps the control and drops the tracking that makes a name
   wide. MEASURED at 320: the bar carries the wordmark, this and the CTA. */
@media (max-width: 560px) {
  /* SENTENCE CASE ON A PHONE, and it is not decoration. "RITU" tracked at
     0.16em sets 36px; "Ritu" untracked sets 24. The name is what he chose to
     see, so the letterform gives way before the word does. On a wide screen it
     stays uppercase, because there it sits among uppercase nav words and has to
     belong to them. Below 560 those words are hidden, so there is nothing left
     for it to match. */
  .account__btn, .account__login {
    text-transform: none; letter-spacing: 0; font-size: var(--t-2);
  }
  /* AS WIDE AS THE SCREEN ALLOWS, not a fixed 208. MEASURED at 320, 358 and
     412 with the old number: the address clipped at every one while there was
     room to spare on the screen. The gutter is kept so the panel never touches
     the edge. */
  .account__menu { right: 0; min-width: min(296px, calc(100vw - var(--s-4))); }
}

/* The initial is the last resort, and after the compact mark landed it is
   needed on nothing this product gates at. Kept for a screen narrower than
   anything measured here rather than deleted, because a name that will not fit
   must still leave a control behind. */
.account__initial { display: none; }
@media (max-width: 300px) {
  .account__full { display: none; }
  .account__initial { display: inline; }
}