/* The account of every page, on its own so Skalpelator and USkalpelator
   (apps/), which have a stylesheet of their own, can take it too: the colours
   of the roles on the bot's Discord server, the HUD in the colour of the role
   (data-hud, js/appearance.js), the account menu of the top right corner
   (accountMenuHtml() in inc/auth.php, js/account.js) and the bar of trying
   other rights. Colours and role identities come from css/skins.css;
   page and cropper styles provide the layout and .hud-corners. */

/* The role of the account on the bot's Discord server as a Safeguard level,
   "LV.9", next to its name on every page; the panel colours its role chips
   the same way */
/* The HUD in the colour of the role, chosen in the profile (/account/).
   "accent" makes the accent elements (the targeting corners, links, the search
   box, the account menu) follow the role; "full" also the page chrome. The
   default keeps the site's own purple. */
html[data-hud="accent"],
html[data-hud="full"] {
    --accent-rgb: var(--role-rgb, 155, 89, 182);
    --accent-light-rgb: var(--role-light-rgb, 182, 112, 211);
    --accent-dark-rgb: var(--role-dark-rgb, 113, 59, 135);
    --accent: rgb(var(--accent-rgb));
    --accent-light: rgb(var(--accent-light-rgb));
    --accent-dark: rgb(var(--accent-dark-rgb));
}

html[data-hud="full"] {
    --hud-rgb: var(--role-rgb, 155, 89, 182);
    --hud-light-rgb: var(--role-light-rgb, 182, 112, 211);
}

/* A red HUD (an admin) would swallow the locked red of the API button and the
   moderator commands, so there the locked accent turns amber, which still
   reads as "kept away" and stays apart from the red around it. */
html[data-hud="accent"].role-admin,
html[data-hud="full"].role-admin {
    --lock: var(--warning);
    --lock-text: var(--warning);
}

.lv {
    flex: none;
    padding: 0 5px;
    background: var(--role);
    color: var(--media-matte);
    font: 11px/16px "Sanakan Mono", monospace;
    letter-spacing: 0.12em;
    white-space: nowrap;
    cursor: default;
}

/* The account menu of every page (accountMenuHtml() in inc/auth.php,
   js/account.js): the account as a button, its avatar ringed in the accent of
   the HUD and its level in the colour of its role, and below it a menu in HUD corners with the places it may open,
   logging out and a dim line with the role and the ID */
/* trying other rights (inc/auth.php): a bar at the bottom of every page */
.test-bar {
    position: fixed;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 14px;
    border: 1px solid var(--warning);
    background: var(--surface-raised);
    box-shadow: 0 6px 24px var(--shadow);
    font: 13px Lato, sans-serif;
    color: var(--text);
}

.test-bar b {
    margin-right: 6px;
    color: var(--warning);
}

.test-bar form {
    margin: 0;
}

.test-bar button {
    padding: 6px 12px;
    border: 1px solid var(--warning);
    background: transparent;
    color: var(--warning);
    font: 600 12px Lato, sans-serif;
    cursor: pointer;
}

.test-bar button:hover {
    background: color-mix(in srgb, var(--warning) 15%, transparent);
}

.account-menu {
    position: relative;
    z-index: 15;
    font: 14px "JetBrains Mono", Consolas, monospace;
}

.account-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px 5px 6px;
    border: 0;
    background: transparent;
    color: var(--text-body);
    font: inherit;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.account-toggle:hover,
.account-menu.open .account-toggle {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--text-strong);
}

.account-toggle img {
    flex: none;
    border-radius: 50%;
    /* the accent of the HUD, the same on every page (the site's purple, or the
       colour picked in the profile); the level next to it shows the role */
    box-shadow: 0 0 0 2px var(--accent-light);
}

.account-toggle .lv {
    cursor: inherit;
}

.account-icon {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-toggle > .account-icon {
    color: var(--link);
    transition: transform 0.2s;
}

.account-menu.open .account-toggle > .account-icon {
    transform: rotate(180deg);
}

/* graphite with a thin frame under the corners, like the toasts of the site;
   .hud-corners, later in this file, would make it see-through */
.account-menu .account-drop {
    --fill: var(--panel-surface);
    border: 1px solid var(--panel-border);
}

.account-drop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 230px;
    padding-top: 8px;
    box-shadow: 0 12px 30px var(--shadow);
    font: 12px "Sanakan Mono", monospace;
    letter-spacing: 0.12em;
    text-align: left;
}

.account-drop[hidden] {
    display: none;
}

.account-drop form {
    margin: 0;
}

/* logging out apart from the places, when there are any */
.account-drop a + form {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--panel-divider);
}

.account-drop a,
.account-drop button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 16px;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.account-drop a:hover,
.account-drop a:focus-visible {
    background: var(--panel-hover);
    color: var(--text-strong);
}

.account-drop a .account-icon {
    color: var(--link);
}

.account-drop a[aria-current] {
    color: var(--link);
}

.account-drop small {
    margin-left: auto;
    padding-left: 16px;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: none;
    color: var(--text-subtle);
}

.account-drop .account-out {
    color: var(--logout);
}

.account-drop .account-out:hover,
.account-drop .account-out:focus-visible {
    background: color-mix(in srgb, var(--danger) 16%, transparent);
    color: var(--logout-hover);
}

.account-scan {
    margin-top: 8px;
    padding: 7px 16px 8px;
    border-top: 1px solid rgba(var(--accent-rgb), 0.18);
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--account-meta);
    font-size: 10px;
    letter-spacing: 0.14em;
    white-space: nowrap;
}

.account-scan em {
    font-style: normal;
    color: var(--role-ink);
}

/* on a phone the name goes, the avatar and the level stay */
@media only screen and (max-width: 480px) {
    .account-toggle .account-name {
        display: none;
    }
}