/* Account menu (DOWNSTUDIOS dropdown): one stylesheet for the studio and every other page. Square corners, dark, Montserrat. */
:where(.acctmenu .toplink) { font: 800 var(--fs-btn, 13px)/1.2 var(--f, 'Montserrat', 'Arial Black', system-ui, sans-serif); color: #fff; background: none; border: 0; cursor: pointer; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; padding: .55em .5em; }
.acctmenu { --red: #ff3b3b; --line2: #262626; --warm: 255, 180, 107; --dim: #8a8a8a; --fg: #fff; --t: 120ms ease; }
:where(.acctmenu .count) { display: inline-block; margin-left: .45em; background: #fff; color: #000; font-size: .7em; padding: .05em .45em; vertical-align: middle; }
:where(.acctmenu .count.red) { background: #ff3b3b; }
:where(.acctmenu .lubar) { display: block; height: 4px; background: #262626; overflow: hidden; }
:where(.acctmenu .lubar i) { display: block; height: 100%; width: 0; background: #fff; }
:where(.acctmenu .devstate) { margin-left: .6em; font-size: .7em; color: #8a8a8a; }
:where(.acctmenu .devstate.on) { color: rgb(255, 180, 107); }
.acctmenu { position: relative; display: inline-block; }
.acctbtn { display: inline-flex !important; align-items: center; gap: .6em; white-space: nowrap; max-width: min(46vw, 34em); }
.acctbtn .acctname { overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.acctbtn .credits { color: var(--dim); font-size: .8em; }
.acctbtn .caret { width: 0; height: 0; border-left: .32em solid transparent; border-right: .32em solid transparent; border-top: .38em solid currentColor;
  transition: transform var(--t); }
.acctbtn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.acctdot { width: .5em; height: .5em; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #000; }
.acctdrop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 75; min-width: 13em; max-width: calc(100vw - 16px);
  display: flex; flex-direction: column; background: #000; border: 1px solid var(--line2); box-shadow: 0 14px 34px rgba(0,0,0,.7); padding: .3em 0; }
.acctdrop[hidden] { display: none; }
.acctdrop .dropitem { display: flex !important; align-items: center; justify-content: space-between; width: 100%; text-align: left;
  padding: .75em 1em !important; text-decoration: none; color: var(--fg); white-space: nowrap; box-sizing: border-box; }
.acctdrop .dropitem[hidden], .acctdrop .dropwrap[hidden] { display: none !important; }
.acctdrop .dropitem.off, .acctdrop .dropitem:disabled { color: var(--dim); opacity: .45; cursor: default; }
.acctdrop .dropitem.alertlink { color: var(--dim); }
.acctdrop .dropitem.alertlink.hot { color: var(--red); }
.acctdrop .dropwrap { display: block; position: relative; }
.acctdrop .dropauth { border-top: 1px solid var(--line2); margin-top: .3em; }
.acctdrop .dropcredits { padding: .6em 1em .7em; color: var(--dim); font-size: calc(var(--fs-btn) * .8); border-bottom: 1px solid var(--line2); white-space: nowrap; }
.acctdrop .dropitem:focus-visible { outline: 1px solid rgba(var(--warm), .7); outline-offset: -1px; }
@media (max-width: 700px) {   /* narrow: credits move from the button into the menu; menu fits the window */
  .acctbtn .credits { display: none !important; }
  .acctdrop .dropcredits:not([hidden]) { display: block !important; }
  .acctdrop { min-width: min(13em, calc(100vw - 16px)); }
}
@media (min-width: 701px) { .acctdrop .dropcredits { display: none !important; } }
.acctdrop .dropitem.dropstorage:not([hidden]) { display: grid !important; } .acctdrop .dropstorage { grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: .8em; row-gap: .35em; text-align: left; }
.acctdrop .dropstorage .dslabel { grid-column: 1; color: var(--dim); }
.acctdrop .dropstorage .lubar { grid-column: 2; width: auto; min-width: 70px; }
.acctdrop .dropstorage .dstext { grid-column: 1 / -1; font-size: calc(var(--fs-chip, 11px) * .9); color: var(--dim); white-space: nowrap; }
.acctdrop .dropstorage.full .lubar i { background: rgb(var(--warm)); }
.acctdrop .dropstorage.full .dstext { color: rgb(var(--warm)); }
/* the host used by pages other than the studio (guide, pricing, admin): same button, same dropdown */
.acctmenu[data-shared] { --fs-btn: 13px; --fs-chip: 11px; --dim: #8a8a8a; }
.acctmenu[data-shared] .acctbtn { font-size: 13px; }
@media (max-width: 700px) { .acctmenu[data-shared] .acctbtn { max-width: 56vw; } }

/* CLEAR X tab (static/clearfield.js): one fixed layer; sits outside the field at its top-right corner; square, dark, orange on hover */
#clearLayer { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 9000; pointer-events: none; }
.clearbtn { position: fixed; pointer-events: auto; padding: 0; margin: 0; border: 1px solid #333; border-radius: 0; background: #0a0a0a; color: #bbb;
  font: 800 16px/1 var(--f, 'Montserrat', 'Arial Black', system-ui, sans-serif); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.clearbtn[hidden] { display: none; }
.clearbtn:hover, .clearbtn:focus-visible { color: rgb(255, 180, 107); border-color: rgb(255, 180, 107); outline: none; }
body.m .clearbtn { font-size: 22px; }

@media (max-width: 480px) { .acctdrop .dropauth[hidden], .acctdrop .dropauth:not(:first-child):empty { display: none; } .acctdrop .dropauth { border-top: 0; margin-top: 0; } .acctdrop .guidelink + .dropauth[hidden] { display: none !important; } }
.acctdrop .devstate { font-size: 12px; }