/* css/account-chip.css - the header chip of js/account/chip.js ("Sign in" / initial + menu). Self-contained: only tokens.css is needed (every page has it); the pill look
   comes from css/app.css (.bm-tabs.bm-pill .bm-tab) on the headers that load it, the flat look from the toolbar's own button class (data-btn-class). All rules are .bm-acct*. */
.bm-acct{position:relative;flex:none;display:inline-flex;align-items:center}
.bm-acct a,.bm-acct button{text-decoration:none}
.bm-acct .bm-acct-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.bm-acct .bm-tab{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.bm-acct a.bm-tab:hover{color:var(--text)}
/* No padding or font-size of its own: the chip takes exactly what the EN / TR buttons beside it take from css/app.css (6px 12px, 12px, and the line height of the page, which differs per page: index 16.8 px, legal 19.8 px, catalogue 19.2 px),
   so both pills have one height on every page at every width. The first version overrode the padding and was 2 px lower on the legal pages. */
.bm-acct-avatar{flex:none;box-sizing:border-box;width:16px;height:16px;border-radius:50%;display:inline-grid;place-items:center;background:var(--accent-soft);color:var(--accent-2);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);font-size:9px;font-weight:700;line-height:1}   /* 16 px = less than the 16.8 px line of the 12 px label, so the signed-in chip is exactly as high as the "Sign in" chip and the EN / TR pill (an 18 px avatar made it 1.2 px taller) */
.bm-acct-in .bm-tab[aria-expanded="true"]{background:var(--bg-3)}
.bm-acct-pop{position:absolute;z-index:var(--z-menu,60);right:0;left:auto;top:calc(100% + 6px);min-width:220px;max-width:min(92vw,300px);background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius-m,10px);box-shadow:var(--shadow-3,0 12px 32px rgba(0,0,0,.5));padding:6px;font-family:var(--font,inherit)}
.bm-acct-pop[hidden]{display:none}
.bm-acct-mail{padding:6px 10px 8px;margin-bottom:4px;border-bottom:1px solid var(--line);color:var(--text-2);font-size:var(--fs-xs,11px);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bm-acct-menu{display:flex;flex-direction:column;gap:1px}
.bm-acct-item{display:flex;align-items:center;justify-content:center;width:100%;min-height:34px;padding:7px 10px;border:0;border-radius:var(--radius-s,8px);background:none;color:var(--text);font:inherit;font-size:var(--fs-m,13px);cursor:pointer;text-decoration:none;box-sizing:border-box}
.bm-acct-item:hover,.bm-acct-item:focus-visible{background:var(--bg-4,var(--bg-3));outline:none}
.bm-acct-item:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.bm-acct-item[disabled]{opacity:.55;cursor:default}
.bm-acct-fail{margin:6px 10px 2px;color:var(--bad);font-size:var(--fs-xs,11px);text-align:center}
/* an empty flex item one text line high: the signed-in button keeps the height of a text button when the label is hidden (the avatar alone is 16 px, a line is 16.8 - 19.8 px); margin cancels the flex gap */
.bm-acct-btn::after{content:"";flex:none;width:0;height:1.4em;height:1lh;margin-left:-8px}
/* phones: the avatar alone. display:none, not a visually hidden label: the button has its own aria-label ("Account menu"), and clipped hidden text would count as overflow in the page audit */
@media (max-width:560px){
  .bm-acct-label{display:none}
  .bm-acct-in .bm-acct-btn{padding-left:8px;padding-right:8px}
}
/* narrow phones, pill headers only: the visitor's "Sign in" is the person icon (the link keeps its text, so the screen-reader name stays; font-size:0 takes it out of the layout). The landing header holds brand +
   language + menu and the catalogue / legal headers brand + language, and a word does not fit beside them below about 430 px (the page scrolled sideways at 390 and 360 px). The icon box is one text line high
   (1lh of the page's own line height: 16.8 / 19.8 / 19.2 px) so the pill keeps exactly the height of the EN / TR pill. Signed in = the avatar alone already (rule above). */
@media (max-width:430px){
  .bm-acct:not(.bm-acct-flat).bm-acct-in .bm-acct-btn{padding-left:8px;padding-right:8px}   /* the avatar alone as wide as the icon (the rule above loses to app.css .bm-tabs.bm-pill .bm-tab on the pill headers: 46 px instead of 38) */
  .bm-acct:not(.bm-acct-flat):not(.bm-acct-in) a.bm-tab{font-size:0;gap:0;padding-left:8px;padding-right:8px}
  .bm-acct:not(.bm-acct-flat):not(.bm-acct-in) a.bm-tab::before{content:"";flex:none;width:16px;height:1.4em;height:1lh;font-size:12px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5' r='3'/%3E%3Cpath d='M2 15c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5z'/%3E%3C/svg%3E") center/16px 16px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5' r='3'/%3E%3Cpath d='M2 15c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5z'/%3E%3C/svg%3E") center/16px 16px no-repeat}
}
/* the toolbars of vocal-toner / mix / master are full below 900 px: the avatar alone there as well (the Turkish "Hesap" made vocal-toner wrap a link at 800 px) */
@media (max-width:900px){ .bm-acct-flat .bm-acct-label{display:none} }
/* the neutral button look for pages whose toolbar has no button classes of its own (vocal-toner.html): data-btn-class="bm-acct-plain" */
.bm-acct-plain{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--text-2);font:inherit;font-size:12px;cursor:pointer;text-decoration:none;white-space:nowrap}
.bm-acct-plain:hover,.bm-acct-plain[aria-expanded="true"]{color:var(--text);border-color:var(--line-2);background:var(--bg-3)}
.bm-acct-plain:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}