/* The account menu (app/templates/_account_menu.html): the signed-in name, with Sign out under it. */
.acct-menu { position: relative; display: inline-block }
.acct-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 10px; border-radius: var(--lw-radius-control); font: 600 var(--lw-text-sm) var(--lw-font-ui); color: var(--lw-text) }
.acct-menu > summary::-webkit-details-marker { display: none }
.acct-menu > summary:hover, .acct-menu[open] > summary { background: var(--lw-surface-subtle) }
.acct-menu > summary:focus-visible { outline: 3px solid var(--lw-focus); outline-offset: 2px }
.acct-menu > summary > svg.acct-caret { display: block; flex: 0 0 12px; width: 12px; height: 12px; min-width: 12px; overflow: visible; transition: transform .15s }
.acct-menu[open] > summary > svg.acct-caret { transform: rotate(180deg) }
.acct-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 11rem; padding: 6px;
  background: var(--lw-surface); border: 1px solid var(--lw-border-subtle); border-radius: var(--lw-radius-card);
  box-shadow: var(--lw-shadow-overlay) }
.acct-pop form { margin: 0 }
.acct-item { display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 9px 12px; border-radius: var(--lw-radius-control); font: 500 var(--lw-text-sm) var(--lw-font-ui); color: var(--lw-text) }
.acct-item:hover, .acct-item:focus-visible { background: var(--lw-surface-subtle); outline: none }

/* Always in the top-right corner of the page, on the header's first row, however the rest of the header wraps (Ilya,
   2026-10-28). The header keeps room for it on the right.
   Staff screens: against the full-width sticky header (.hdr). Admin: against the page, beside the first row. BI and
   the patient portals: the centred header becomes full width, with padding that keeps its content where it was. */
.acct-menu > summary .acct-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.hdr .acct-menu, header.bar .acct-menu { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)) }
.hdr .acct-menu { top: 10px }
.hdr-in:has(> .acct-menu) { padding-right: calc(max(16px, env(safe-area-inset-right, 0px)) + 12.5rem) }
body.console:has(> header.bar .acct-menu) { position: relative }
body.console header.bar:has(.acct-menu) { padding-right: 13rem }
body.console header.bar .acct-menu { top: 18px; right: max(20px, env(safe-area-inset-right, 0px)) }
body:not(.console) > header.bar:has(.acct-menu) { --bar-max: 1120px; position: relative; max-width: none;
  padding-left: calc((100% - min(100%, var(--bar-max))) / 2);
  padding-right: max(calc((100% - min(100%, var(--bar-max))) / 2), 13rem) }
body:not(.console) > header.bar:has(> a.name):has(.acct-menu) { --bar-max: var(--lw-marketing-max) }
body:not(.console) > header.bar .acct-menu { top: 50%; transform: translateY(-50%) }