/* Admin panel; the header, buttons, login screen and messages come from explorer.css,
   the cards and the bot status from status.css */

.panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 32px;
}

.hint {
    margin: -6px 0 14px;
    font-size: 13px;
    color: var(--text-dim);
}

.hint code,
.everyone code,
.server code {
    font: 12px "JetBrains Mono", Consolas, monospace;
    color: var(--link);
}

.muted {
    color: var(--text-dim);
}

.warn {
    color: var(--warning);
    font-weight: 400;
}

/* the bot status line and the notice form */
.status-more {
    margin: 12px 0 0;
}

.status-more a,
.notice-now a {
    color: var(--link);
}

.notice-form {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(var(--accent-rgb), 0.15);
}

.notice-form h3 {
    margin: 0 0 12px;
    font: 13px "Sanakan Mono", monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--link);
}

.notice-now {
    margin: 0 0 10px;
    font-size: 14px;
}

.notice-form textarea {
    width: 100%;
}

.notice-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: 10px 0 8px;
    font-size: 14px;
}

.notice-fields label,
.notice-time {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* the quality of the WebP conversion, per kind of picture */
.quality-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin-top: 14px;
}

.quality-form label {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 12px "Sanakan Mono", monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--link);
}

.quality-form input[type="number"],
.quota-form input[type="number"] {
    width: 4.4em;
    height: 36px;
    padding: 0 10px;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 0;
    background: var(--surface-input);
    color: var(--text);
    font: 15px "JetBrains Mono", Consolas, monospace;
    text-align: center;
    outline: 0;
    appearance: textfield;
    -moz-appearance: textfield;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.quality-form input[type="number"]:hover,
.quota-form input[type="number"]:hover {
    border-color: rgba(var(--accent-light-rgb), 0.7);
}

.quality-form input[type="number"]:focus,
.quota-form input[type="number"]:focus {
    border-color: var(--link);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.35);
}

/* no system spinners; they do not fit the site's fields */
.quality-form input[type="number"]::-webkit-outer-spin-button,
.quality-form input[type="number"]::-webkit-inner-spin-button,
.quota-form input[type="number"]::-webkit-outer-spin-button,
.quota-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* the limits of the accounts' folders: the fields as the quality's, each
   name above its field and the unit after it; in an account's profile a
   choice before the field, the panel's default or its own value */
.quota-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 24px;
    margin: 14px 0 6px;
}

.quota-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quota-form label > span:first-child {
    font: 600 12px "Sanakan Mono", monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--link);
}

.quota-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.quota-form input[type="number"] {
    width: 5.2em;
}

.quota-field em {
    font: normal 12px "JetBrains Mono", Consolas, monospace;
    color: var(--text-muted);
}

/* the choice is the profile's own (.hud-select), as tall as the fields */
.quota-field .hud-select {
    flex: none;
    width: 168px;
}

.quota-field .hud-select select {
    height: 36px;
    font-size: 13px;
}

.quota-field .hud-select::after {
    width: 36px;
    height: 36px;
}

.quota-field .hud-select .hud-chevron {
    right: 13px;
}

.quota-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* the use against the limits: the bar of the stat list, amber over a limit */
.quota-usage {
    margin: 12px 0 8px;
}

.quota-usage li > :first-child i {
    margin-left: 6px;
    font: normal 11px Lato, sans-serif;
    color: var(--text-accent-muted);
}

.quota-usage li.over {
    background: linear-gradient(90deg, color-mix(in srgb, var(--warning) 25%, transparent) var(--share), color-mix(in srgb, var(--text) 2%, transparent) var(--share));
}

.quota-usage li.over > :last-child,
.quota-usage li.over b {
    color: var(--warning);
}

.quota-usage li > :last-child b {
    font-weight: 400;
    color: var(--heading);
}

#quota-impact {
    margin-top: 10px;
}

.quota-transport {
    margin-top: 18px;
}

.quota-transport + .hint {
    margin-top: 6px;
}

.quota-pages {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0 0;
}

/* Date and time in the Polish way (js/admin.js): a text field and a calendar */
.dt {
    position: relative;
    display: inline-block;
}

.dt-field {
    width: 172px;
}

.dt-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    width: 264px;
    padding: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    background: var(--surface-raised);
    box-shadow: 0 10px 30px var(--shadow);
}

.dt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.dt-head b {
    font: 14px "Sanakan Mono", monospace;
    letter-spacing: 0.08em;
    color: var(--heading);
}

.dt-step {
    width: 30px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--link);
    font-size: 20px;
    cursor: pointer;
}

.dt-step:hover {
    color: var(--text-strong);
}

.dt-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dt-weekday {
    padding: 4px 0;
    text-align: center;
    font-size: 11px;
    color: var(--text-dim);
}

.dt-day {
    height: 30px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    font: 13px "JetBrains Mono", Consolas, monospace;
    cursor: pointer;
}

.dt-day:hover {
    background: rgba(var(--accent-rgb), 0.2);
}

.dt-day.other {
    color: var(--text-subtle);
}

.dt-day.sunday {
    color: var(--danger);
}

.dt-day.other.sunday {
    color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.dt-day.today {
    border-color: rgba(var(--accent-rgb), 0.6);
}

.dt-day.chosen {
    background: var(--accent);
    color: var(--text-strong);
}

.dt-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 10px 0;
    font-size: 13px;
    color: var(--text-muted);
}

/* the hour and minute, small number cells as the WebP quality's */
.dt-time input {
    width: 52px;
    padding: 5px 6px;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    background: var(--surface-input);
    color: var(--text);
    font: 14px "JetBrains Mono", Consolas, monospace;
    text-align: center;
    outline: 0;
    color-scheme: var(--scheme);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.dt-time input:hover {
    border-color: rgba(var(--accent-light-rgb), 0.7);
}

.dt-time input:focus {
    border-color: var(--link);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.35);
}

.dt-actions {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

/* the server's clock under the bot status */
.server-clock {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.server-clock b {
    font: 14px "JetBrains Mono", Consolas, monospace;
    color: var(--heading);
}

.server-clock .warn {
    font: inherit;
    color: var(--warning);
}

/* the search under the title of the panel */
/* the search of accounts and addresses: the commands page's search box */
.panel-search {
    max-width: 520px;
    margin: 18px auto 0;
}

/* the devices an account is logged in on */
.devices {
    margin: 0;
    padding: 0;
    list-style: none;
}

.devices li {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 14px;
    padding: 7px 8px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
    font-size: 13px;
}

.device-name {
    color: var(--heading);
}

/* "to urządzenie" a little apart from the browser's name */
.device-name .role {
    margin-left: 8px;
}

/* the profile of an account */
.profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.profile-head img {
    border-radius: 50%;
}

.profile-head > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}

.profile-name {
    font-size: 20px;
    color: var(--heading);
}

.profile-head code {
    font: 12px "JetBrains Mono", Consolas, monospace;
    color: var(--text-dim);
}

.profile-yes {
    color: var(--success);
}

a.who-name:hover {
    color: var(--link);
}

.role.account {
    border-color: color-mix(in srgb, var(--info) 60%, transparent);
    color: var(--info);
}

.role.account:hover {
    color: var(--text-strong);
}

.role.protected {
    border-color: color-mix(in srgb, var(--success) 60%, transparent);
    color: var(--success);
}

.notice-form > .hint:last-of-type {
    margin: 0 0 12px;
}

.notice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* requests for access */
.card.requests {
    border-color: color-mix(in srgb, var(--success) 50%, transparent);
    background: color-mix(in srgb, var(--success) 5%, transparent);
}

.card.requests h2 i {
    color: var(--success);
}

/* the backup form in the server card */
.backup {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 4px;
}

.server dd .muted {
    display: inline-block;
}

/* cron has stopped checking the bot */
.card.alarm {
    border-color: color-mix(in srgb, var(--warning) 60%, transparent);
    background: color-mix(in srgb, var(--warning) 6%, transparent);
}

.card.alarm h2 i {
    color: var(--warning);
}

.card.alarm p {
    margin: 0 0 10px;
    font-size: 14px;
}

.card.alarm .hint {
    margin: 0;
}

.logout-all {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 16px 0 0;
}

.logout-all .hint {
    margin: 0;
}

/* The gallery in numbers */
.stats-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 26px;
    font-size: 14px;
    color: var(--text-muted);
}

.stats-summary b {
    font: 20px "JetBrains Mono", Consolas, monospace;
    color: var(--heading);
}

.disk {
    margin-top: 16px;
}

.disk-bar {
    display: flex;
    height: 14px;
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

.disk-bar .gallery,
.disk .timeline-legend .gallery {
    background: var(--accent);
}

.disk-bar .used,
.disk .timeline-legend .used {
    background: rgba(var(--accent-rgb), 0.35);
}

.disk.low .disk-bar .used {
    background: color-mix(in srgb, var(--warning) 70%, transparent);
}

.disk .timeline-legend {
    justify-content: flex-start;
    margin-top: 8px;
}

/* Server resources: a bar per resource, yellow from 75%, red from 90% */
.meters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px 26px;
    margin: 6px 0 22px;
}

.meter-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}

.meter-head b {
    font: 15px "JetBrains Mono", Consolas, monospace;
    color: var(--heading);
    white-space: nowrap;
}

.meter-bar {
    height: 10px;
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

.meter-bar span {
    display: block;
    height: 100%;
    background: var(--accent);
}

.meter.high .meter-bar span {
    background: var(--warning);
}

.meter.critical .meter-bar span {
    background: var(--danger);
}

.meter p {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px 26px;
    margin-top: 20px;
}

.stats-grid h3,
.card > h3 {
    margin: 0 0 8px;
    font: 13px "Sanakan Mono", monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--link);
}

/* a part of a card under its own title, as the account's trash */
.card > h3 {
    margin-top: 22px;
}

.stat-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* the bar behind a row is its share of the whole */
.stat-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 3px;
    padding: 5px 8px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.2) var(--share), color-mix(in srgb, var(--text) 2%, transparent) var(--share));
    font: 13px "JetBrains Mono", Consolas, monospace;
}

.stat-list li > :first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--heading);
}

.stat-list li > :last-child {
    flex: none;
    color: var(--text-muted);
}

.stat-list a:hover {
    color: var(--link);
}

.admin-btn.small {
    padding: 3px 10px;
    font-size: 12px;
}

/* Accounts */
.people {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.people li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
}

.people li img,
.login-who img {
    flex: none;
    border-radius: 50%;
}

.who {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 140px;
}

.who-name {
    color: var(--heading);
    font-size: 14px;
}

.who code {
    font: 12px "JetBrains Mono", Consolas, monospace;
    color: var(--text-accent-muted);
}

.note {
    font-size: 13px;
    font-style: italic;
    color: var(--text-muted);
}

.badge-config,
.role {
    padding: 1px 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    color: var(--link);
    font: 11px/18px "Sanakan Mono", monospace;
    letter-spacing: 0.08em;
}

.role.none {
    border-color: var(--text-subtle);
    color: var(--text-dim);
}

/* a role on the bot's Discord server, in its colour (css/style.css) */
.role.bot {
    border-color: var(--role);
    color: var(--role-ink);
}

/* the recent logins: the highest role as a level, as tall as the chips */
.login-roles .lv,
.login-lv .lv {
    line-height: 20px;
    cursor: help;
}

/* and a column per place on this site; a strong one does more than look */
.access-cell {
    display: flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-left: 2px solid color-mix(in srgb, var(--text) 12%, transparent);
    font-size: 12px;
    color: var(--text-subtle);
    white-space: nowrap;
    cursor: help;
}

.access-cell.on {
    border-left-color: var(--link);
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--text);
}

.access-cell.strong {
    border-left-color: var(--text-strong);
    background: rgba(var(--accent-rgb), 0.25);
    color: var(--text-strong);
    font-weight: 700;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.nobody,
.everyone {
    font-size: 14px;
    color: var(--text-dim);
}

.people .nobody {
    border-bottom: 0;
}

.grant {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.grant input[type="text"] {
    flex: 1 1 140px;
}

/* Recent logins */
/* one grid for all rows (subgrid), so the columns line up whatever the
   roles and rights of a row: the account, when, its role, the four places of
   ACCESS_COLUMNS, the button that opens the row */
.logins {
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) max-content max-content repeat(4, minmax(84px, max-content)) auto;
}

/* the accounts found by the search of the panel: who, why, role, profile */
.logins-search {
    grid-template-columns: minmax(180px, 1.3fr) max-content minmax(160px, 2fr) max-content;
}

.login-head {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: 16px;
    padding-bottom: 4px;
    font: 10px "Sanakan Mono", monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.login-head span:nth-child(n + 4) {
    padding-left: 10px;
}

.login-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    padding: 0;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    background: transparent;
    color: var(--link);
    cursor: pointer;
}

.login-more:hover,
.login-more[aria-expanded="true"] {
    background: rgba(var(--accent-rgb), 0.18);
}

.login-more .account-icon {
    width: 14px;
    height: 14px;
    transition: transform 0.15s;
}

.login-more[aria-expanded="true"] .account-icon {
    transform: rotate(180deg);
}

/* an opened row: where its rights come from and the buttons to give more */
.login-details {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 24px;
    padding: 8px 12px 4px;
    border-left: 2px solid rgba(var(--accent-rgb), 0.4);
    background: color-mix(in srgb, var(--text) 2%, transparent);
}

.login-details[hidden] {
    display: none;
}

.login-details .server {
    flex: 1 1 360px;
    margin: 0;
    font-size: 13px;
}

.logins-all {
    margin: 0 0 6px;
    text-align: right;
}

.login-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    gap: 8px 16px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
}

.login-who {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.login-when {
    font-size: 13px;
    color: var(--text-muted);
}

.login-roles,
.login-lv,
.login-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.login-actions {
    justify-content: flex-end;
}

/* Trash */
.trash-row {
    display: grid;
    grid-template-columns: minmax(200px, 2fr) minmax(200px, 2fr) auto;
    align-items: center;
    gap: 8px 16px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
}

.trash-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.trash-name b {
    overflow: hidden;
    font: 700 14px "JetBrains Mono", Consolas, monospace;
    color: var(--heading);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trash-name code {
    overflow-wrap: anywhere;
    font: 12px "JetBrains Mono", Consolas, monospace;
    color: var(--text-accent-muted);
}

/* a shared link, picked whole with one click to copy */
.trash-name code.share-link {
    user-select: all;
}

/* the photo limit of an account with a folder of its own, in its profile */
.upload-limit {
    align-items: center;
}

.upload-limit input[name="limit"] {
    flex: 0 0 80px;
    font-family: "JetBrains Mono", Consolas, monospace;
}

/* trying other rights: one field per right, the button below */
.test-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px 16px;
    align-items: end;
}

/* its fields are the profile's (.hud-field, .hud-select), the button as
   tall as them */
.test-form .admin-btn {
    height: 38px;
}

.test-now {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: 13px;
}

/* turning the automatic blocking of scanners on and off */
.auto-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 10px 0 4px;
}

.trash-info {
    font-size: 13px;
    color: var(--text-muted);
}

/* a long trash scrolls in its card, as the history does */
.trash-list {
    max-height: 520px;
    padding-right: 6px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.4) transparent;
}

.trash-all {
    margin: 14px 0 0;
    text-align: right;
}

/* what a row of the trash shows under itself after "Podgląd" */
.trash-preview {
    grid-column: 1 / -1;
}

.trash-preview .hint {
    margin: 6px 0 0;
}

.trash-full {
    display: inline-block;
    max-width: 100%;
}

.trash-full img,
.trash-full video {
    display: block;
    max-width: 100%;
    max-height: 420px;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    background: var(--media-matte);
}

.trash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}

.trash-grid a {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    background: var(--media-matte);
}

.trash-grid a:hover {
    border-color: var(--link);
}

.trash-grid img,
.trash-grid video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* History of changes */
.history {
    max-height: 420px;
    margin: 0;
    padding: 0 6px 0 0;
    overflow-y: auto;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.4) transparent;
}

.history li {
    display: grid;
    grid-template-columns: 90px minmax(100px, 160px) 1fr;
    gap: 4px 14px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
    font-size: 13px;
}

/* the history of one's own profile names nobody: the text takes the column of the name too */
.history.own-history li {
    grid-template-columns: 90px 1fr;
}

.history time {
    font: 12px "JetBrains Mono", Consolas, monospace;
    color: var(--text-dim);
}

.history-who,
.history-who a {
    color: var(--link);
}

.history-who a:hover {
    color: var(--text-strong);
}

.history-text {
    color: var(--text-body);
    overflow-wrap: anywhere;
}

/* Server */
.server {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 24px;
    margin: 0;
    font-size: 14px;
    font-family: "JetBrains Mono", Consolas, monospace;
}

.server dt {
    color: var(--text-muted);
}

/* running text, so "GD wyłączone: duże pliki…" keeps its colon in place; a
   button or form after the text stands a little apart */
.server dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.server dd > .admin-btn,
.server dd > form {
    margin-left: 8px;
    vertical-align: middle;
}

.server dd a {
    color: var(--link);
}

/* processor and memory of 24 h: the average of every 5 minutes as a line,
   with a band up to the busiest 10 s for the processor, filled below for memory */
.usage {
    margin: -6px 0 22px;
}

.usage .bar {
    margin-top: 12px;
}

.usage-cpu {
    --usage: var(--accent);
}

.usage-mem {
    --usage: var(--info);
}

.usage-plot {
    position: relative;
    height: 72px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.25);
}

.usage-plot svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.usage-grid {
    fill: none;
    stroke: color-mix(in srgb, var(--text) 7%, transparent);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.usage-line {
    fill: none;
    stroke: var(--usage);
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.usage-band {
    fill: var(--usage);
    fill-opacity: 0.2;
}

.usage-plot stop {
    stop-color: var(--usage);
    stop-opacity: 0.5;
}

.usage-plot stop + stop {
    stop-opacity: 0.04;
}

.usage-axis {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(3px);
    font: 10px "JetBrains Mono", Consolas, monospace;
    color: var(--text-subtle);
    pointer-events: none;
}

.usage-axis.middle {
    top: 50%;
}

/* a column per 5 minutes with its numbers in the title */
.usage-columns {
    position: absolute;
    inset: 0;
    display: flex;
}

.usage-columns span {
    flex: 1;
}

.usage-columns span:hover {
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

/* Availability of the site: three 24 h bars close together, the failures and
   the addresses that sent most requests */
.diag .bar {
    margin-top: 12px;
}

.diag-now {
    margin-top: 18px;
}

.diag-now b {
    font-size: 16px;
}

.diag-title {
    margin: 26px 0 10px;
    font: 13px "Sanakan Mono", monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--heading);
}

.diag-title .muted {
    margin-left: 8px;
    font: 12px Lato, sans-serif;
    letter-spacing: 0;
    text-transform: none;
}

.diag-title i {
    margin-right: 8px;
    font-style: normal;
    font-family: "Sanakan Mono", monospace;
    color: var(--link);
}

.diag-episodes {
    max-height: 640px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.4) transparent;
}

.diag-episode {
    margin-top: 6px;
    border-left: 2px solid color-mix(in srgb, var(--danger) 85%, transparent);
    background: color-mix(in srgb, var(--text) 2%, transparent);
}

.diag-episode.ongoing {
    border-left-color: var(--warning);
}

.diag-episode summary {
    display: grid;
    grid-template-columns: 110px 80px 1fr;
    gap: 4px 14px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    list-style: none;
}

.diag-episode summary::-webkit-details-marker {
    display: none;
}

.diag-episode summary time,
.diag-episode summary b {
    font: 13px "JetBrains Mono", Consolas, monospace;
}

.diag-episode summary b {
    color: var(--danger);
}

.diag-episode[open] summary {
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
}

.diag-episode .server {
    padding: 12px;
    font-size: 13px;
}

.diag-episode .diag-ips {
    padding: 0 12px 12px;
}

.diag-ips {
    margin: 0;
    padding: 0;
    list-style: none;
}

.diag-ips li {
    display: grid;
    /* room for a whole IPv6 address, 39 characters */
    grid-template-columns: minmax(0, 320px) 110px minmax(0, 1fr);
    align-items: start;
    gap: 2px 14px;
    margin-top: 3px;
    padding: 5px 8px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.2) var(--share), color-mix(in srgb, var(--text) 2%, transparent) var(--share));
    font: 13px "JetBrains Mono", Consolas, monospace;
}

.diag-ip {
    min-width: 0;
    overflow-wrap: anywhere;
}

.diag-ip a {
    color: var(--heading);
}

.diag-ip a:hover {
    color: var(--link);
}

.diag-count {
    color: var(--text-secondary);
}

.diag-agent {
    display: grid;
    min-width: 0;
    font: 12px Lato, sans-serif;
    color: var(--text-muted);
}

.diag-agent > span,
.diag-agent code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diag-agent code {
    font: 12px "JetBrains Mono", Consolas, monospace;
    color: var(--link);
}

.diag-ips .warn {
    grid-column: 1 / -1;
    font-size: 12px;
}

.diag-ip .role,
.diag-ip .admin-btn.small {
    margin-left: 4px;
    font-size: 11px;
}

.diag-ip .admin-btn.small {
    padding: 1px 8px;
}

.role.scanner {
    border-color: color-mix(in srgb, var(--warning) 50%, transparent);
    color: var(--warning);
}

.role.blocked {
    border-color: color-mix(in srgb, var(--danger) 60%, transparent);
    color: var(--danger);
}

.diag-scroll {
    max-height: 560px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.4) transparent;
}

/* addresses on the block list of Cloudflare */
.diag-blocked {
    margin: 0;
    padding: 0;
    list-style: none;
}

.diag-blocked li {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 14px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
    font-size: 13px;
}

.diag-blocked code {
    font: 13px "JetBrains Mono", Consolas, monospace;
    color: var(--heading);
    overflow-wrap: anywhere;
}

.diag-blocked li > span {
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

/* the changes of the Cloudflare list sent from the panel, above every page of it */
.cf-pending-grid {
    margin-top: 24px;
}

.cf-pending li[data-status="pending"] .cf-op-status {
    color: var(--link);
}

.cf-pending li[data-status="completed"] .cf-op-status {
    color: var(--success);
}

.cf-pending li[data-status="failed"] .cf-op-status,
.cf-pending li[data-status="unconfirmed"] .cf-op-status {
    color: var(--warning);
}

.diag-slow {
    max-height: 220px;
    margin: 6px 0 0;
    padding: 10px 12px;
    overflow: auto;
    background: var(--surface-input);
    font: 12px/1.5 "JetBrains Mono", Consolas, monospace;
    color: var(--text-secondary);
    white-space: pre;
}

@media only screen and (max-width: 760px) {
    .panel-grid {
        grid-template-columns: 1fr;
    }

    .trash-row {
        grid-template-columns: 1fr;
    }

    /* the four places two by two, each with its name */
    .logins,
    .login-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .access-cell {
        min-width: 0;
        height: auto;
        min-height: 22px;
        white-space: normal;
    }

    .login-who,
    .login-when,
    .login-lv,
    .login-details {
        grid-column: 1 / -1;
    }

    .login-head {
        display: none;
    }

    .logins-search,
    .logins-search .login-row {
        grid-template-columns: 1fr;
    }

    .access-cell::before {
        content: attr(data-column) "\00a0";
        color: var(--text-dim);
        font-weight: 400;
    }

    .login-more {
        grid-column: 1 / -1;
        width: 100%;
    }

    .history li,
    .diag-ips li,
    .diag-blocked li,
    .devices li,
    .diag-episode summary {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .login-actions {
        justify-content: flex-start;
    }

    .server {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .server dd {
        margin-bottom: 10px;
    }
}

/* the profile of the logged-in account itself (account/): plain forms instead of the panel's buttons */
.devices li form {
    margin: 0;
}

.devices-all {
    margin: 12px 0 0;
}

.panel-grid > .own-note {
    grid-column: 1 / -1;
    margin: 0;
}

.own-profile .hint a {
    color: var(--link);
}

.own-profile .hint a:hover {
    color: var(--text-strong);
}

.own-profile .server + .hint {
    margin-top: 14px;
}

/* the Safeguard's register: the finds lit up, the rest dim with a hint */
.register {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.register li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px dashed color-mix(in srgb, var(--text) 15%, transparent);
    font-size: 13px;
    color: var(--text-dim);
}

.register b {
    font: 12px "Sanakan Mono", monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.register li.found {
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--text);
}

.register li.found b {
    color: var(--link);
}

.register time {
    margin-top: auto;
    font: 11px "JetBrains Mono", Consolas, monospace;
    color: var(--text-dim);
}

/* how soon a seasonal find not made yet comes back; lit while it lasts */
.register-soon {
    margin-top: auto;
    font: 11px "JetBrains Mono", Consolas, monospace;
    color: var(--text-dim);
}

.register li.now {
    border-color: rgba(var(--accent-rgb), 0.6);
}

.register li.now .register-soon {
    color: var(--link);
}

/* the account's finds flagged as cheated (inc/auth/finds.php), in the profile and the panel */
.register-flag,
.profile-flag {
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    color: var(--danger);
}

.profile-flag .warn {
    margin-right: 6px;
}

/* ---- Layout, sticky nav, folded cards, alerts ---- */

.admin-layout {
    margin-top: 32px;
}

.admin-layout .panel-grid {
    margin-top: 0;
}

.admin-layout.has-nav {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.admin-nav {
    position: sticky;
    top: 16px;
    display: none;
    flex-direction: column;
    gap: 3px;
}

.admin-layout.has-nav .admin-nav {
    display: flex;
}

.admin-nav .nav-filter {
    margin: 0 0 8px;
    font-size: 13px;
}

.admin-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-left: 2px solid transparent;
    color: color-mix(in srgb, var(--text-muted) 82%, transparent);
    text-decoration: none;
    font: 12px "Sanakan Mono", monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.admin-nav a:hover {
    color: var(--text-strong);
    background: rgba(var(--accent-rgb), 0.14);
}

.admin-nav a.active {
    border-color: var(--link);
    color: var(--text-strong);
    background: rgba(var(--accent-rgb), 0.22);
}

.admin-nav .dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
}

.admin-nav .dot.warn {
    background: var(--warning);
    animation: nav-pulse 1.6s infinite;
}

@keyframes nav-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.admin-nav .n {
    margin-left: auto;
    color: var(--warning);
}

/* the cards of a section, under its link */
/* the categories stand out, the cards under them sit back on a guide line */
.admin-nav .nav-section {
    margin-top: 6px;
    color: var(--heading);
}

.admin-nav .nav-sub {
    display: flex;
    flex-direction: column;
    margin: 0 0 8px 13px;
    border-left: 1px solid rgba(var(--accent-rgb), 0.35);
}

.admin-nav .nav-card {
    padding: 5px 12px 5px 13px;
    border-left: 0;
    color: color-mix(in srgb, var(--text-muted) 78%, transparent);
    font: 12px/1.45 "JetBrains Mono", Consolas, monospace;
    letter-spacing: 0;
    text-transform: none;
}

.admin-nav .nav-card:hover {
    color: var(--text-strong);
    background: rgba(var(--accent-rgb), 0.12);
}

/* a long nav scrolls on its own */
.admin-nav {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.4) transparent;
}

.panel-section {
    grid-column: 1 / -1;
    margin: 26px 0 0;
    font: 13px "Sanakan Mono", monospace;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    scroll-margin-top: 80px;
}

.panel-grid > .panel-section:first-child {
    margin-top: 0;
}

/* a card folds to its title; a colored left edge says how it stands */
.card.collapsible {
    border-left: 3px solid rgba(var(--accent-rgb), 0.3);
}

.card[data-state="ok"] {
    border-left-color: var(--success);
}

.card[data-state="warn"] {
    border-left-color: var(--warning);
}

.card[data-state="bad"] {
    border-left-color: var(--danger);
}

.card.collapsible > h2 {
    cursor: pointer;
}

.card.collapsible.collapsed > :not(h2) {
    display: none;
}

.card h2::after {
    order: 1;
}

.card h2 .card-dot {
    order: 2;
    flex: none;
    width: 9px;
    height: 9px;
    margin-left: 14px;
    border-radius: 50%;
    background: var(--success);
}

.card h2 .card-dot.warn {
    background: var(--warning);
}

.card h2 .card-dot.bad {
    background: var(--danger);
}

.card h2 .card-sum {
    order: 3;
    margin-left: 8px;
    font: 12px "JetBrains Mono", Consolas, monospace;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
    white-space: nowrap;
}

.card h2 .card-chev,
.diag-sub > summary .card-chev {
    flex: none;
    order: 4;
    width: 8px;
    height: 8px;
    margin-left: 12px;
    border-right: 2px solid var(--accent-light);
    border-bottom: 2px solid var(--accent-light);
    transform: rotate(45deg);
    transition: transform 0.2s;
}

.card.collapsible:not(.collapsed) h2 .card-chev,
.diag-sub[open] > summary .card-chev {
    transform: rotate(-135deg);
}

/* the floating button that points at the alerts */
.admin-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    border: 1px solid color-mix(in srgb, var(--warning) 60%, transparent);
    background: var(--surface-raised);
    color: var(--warning);
    font: 12px "Sanakan Mono", monospace;
    letter-spacing: 0.08em;
    text-decoration: none;
    box-shadow: 0 6px 24px var(--shadow);
}

.admin-fab[hidden] {
    display: none;
}

.admin-fab:hover {
    background: color-mix(in srgb, var(--warning) 18%, transparent);
}

/* the diagnostics card folded into sub-accordions */
.diag-sub {
    margin-top: 8px;
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-left: 2px solid rgba(var(--accent-rgb), 0.4);
    background: color-mix(in srgb, var(--text) 2%, transparent);
}

.diag-sub > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    cursor: pointer;
    list-style: none;
    transition: background-color 0.2s, border-color 0.2s;
}

.diag-sub > summary:hover {
    background: rgba(var(--accent-rgb), 0.1);
}

.diag-sub > summary::-webkit-details-marker {
    display: none;
}

.diag-sub > summary .diag-title {
    flex: 1;
    margin: 0;
}

.diag-sub[open] {
    border-color: rgba(var(--accent-rgb), 0.35);
    border-left-color: var(--link);
}

.diag-sub[open] > summary {
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.18);
    background: rgba(var(--accent-rgb), 0.12);
}

.diag-sub > .diag-subbody {
    padding: 12px 14px;
}

.panel-hidden {
    display: none !important;
}

/* a click on a section link glides instead of jumping */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media only screen and (max-width: 900px) {
    .admin-layout.has-nav {
        grid-template-columns: 1fr;
    }

    /* above the cards there is no room for the list of all of them: the
       filter and the five sections as buttons in a row */
    .admin-nav {
        position: static;
    }

    .admin-layout.has-nav .admin-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .admin-nav .nav-filter {
        flex: 1 1 100%;
        margin: 0 0 4px;
    }

    .admin-nav .nav-sub {
        display: none;
    }

    .admin-nav a.nav-section {
        padding: 6px 10px;
        border: 1px solid rgba(var(--accent-rgb), 0.35);
    }
}

/* a phone: card titles smaller and less spaced, so most fit one line, and a
   folded card ends right below its title */
@media only screen and (max-width: 600px) {
    .card h2 {
        font-size: 14px;
        letter-spacing: 0.12em;
    }

    .card.collapsible.collapsed > h2 {
        margin-bottom: 0;
    }
}

/* The HUD colour chosen in the profile (/account/): two dropdowns side by
   side, in the style of the site's fields (like the select of skalpelator) */
.hud-form {
    margin-top: 14px;
}

/* Skins supply their own palette. Keep the saved HUD controls in the form,
   so hiding them never clears the choice. Animations belong to the skin form. */
html[data-skin] [data-default-skin-only],
html[data-skin] .hud-form > .admin-btn {
    display: none;
}

.hud-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

/* a phone: one field under the other, so neither cuts its choice short */
@media only screen and (max-width: 600px) {
    .hud-fields {
        grid-template-columns: 1fr;
    }
}

.hud-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.hud-field-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 600 12px "Sanakan Mono", monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--link);
}

.hud-field-label .muted {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* a small dot next to the Kolor label, in the picked colour */
.hud-dot {
    flex: none;
    width: 13px;
    height: 13px;
    border: 1px solid color-mix(in srgb, var(--text) 25%, transparent);
    border-radius: 50%;
}

.hud-form .admin-btn {
    margin-top: 16px;
}

/* the snow's switch under the fields, shown while it snows (js/safeguard.js) */
.hud-form .snow-field {
    display: flex;
    margin-top: 14px;
}

.hud-form .snow-field + .admin-btn {
    margin-top: 10px;
}

/* the skin of the home page, under the HUD's own fields (js/appearance-picker.js): the
   words' switch on a line of its own and the save under it, like the HUD's
   switch and its save (the save keeps its room when the picked skin speaks no
   words and the switch is not there at all) */
.skin-form {
    margin-top: 14px;
}

.skin-form .admin-btn {
    margin-top: 16px;
}

.skin-form .skin-words:not([hidden]),
.skin-form .skin-animations {
    display: flex;
    margin-top: 14px;
}

.skin-form .skin-animations + .admin-btn {
    margin-top: 10px;
}

/* Compact profile selection; the native dropdown remains the no-JS fallback. */
.skin-current:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.05);
}

.skin-current > img {
    flex: none;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.5);
}

.skin-current-text {
    flex: 1;
    min-width: 0;
}

.skin-current-text > b {
    display: block;
    margin-top: 5px;
    font-size: 16px;
}

.skin-current-text > p {
    margin: 5px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.skin-current .admin-btn {
    flex: none;
    margin: 0;
}

body.skin-picker-open {
    overflow: hidden;
}

.skin-dialog {
    width: min(760px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 40px);
    padding: 24px;
    border: 1px solid var(--panel-border);
    background: var(--panel-surface);
    color: var(--text);
    box-shadow: 0 24px 80px var(--shadow);
}

.skin-dialog[open] {
    display: flex;
    flex-direction: column;
}

.skin-dialog [hidden] {
    display: none;
}

.skin-dialog::backdrop {
    background: var(--scrim);
    backdrop-filter: blur(5px);
}

.skin-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.skin-dialog-head .tag {
    display: block;
    margin: 0;
    animation: none;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--link);
}

.skin-dialog-head .tag::before,
.skin-dialog-head .tag::after,
.skin-dialog h2::after {
    content: none;
}

.skin-dialog h2 {
    margin: 6px 0 0;
    font-size: 20px;
    letter-spacing: 0.1em;
    color: var(--heading);
}

.skin-dialog-close {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid var(--panel-border);
    background: transparent;
    color: var(--text);
    line-height: 1;
    cursor: pointer;
}

.skin-dialog-close svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
}

.skin-dialog-close:hover {
    background: var(--panel-hover);
    color: var(--text-strong);
}

.skin-dialog-hint {
    margin: 14px 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

.skin-dialog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.skin-filters {
    display: flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--panel-border);
    background: var(--panel-surface);
}

.skin-filters button {
    padding: 8px 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font: 12px "Sanakan Mono", monospace;
    cursor: pointer;
}

.skin-filters button[aria-pressed="true"] {
    border-color: var(--panel-border);
    background: var(--panel-selected);
    color: var(--heading);
}

.skin-count {
    flex: none;
    font: 11px "Sanakan Mono", monospace;
    color: var(--text-muted);
}

.skin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    min-height: 0;
    overflow: auto;
    max-height: 45dvh;
    padding: 2px 6px 2px 2px;
    overscroll-behavior: contain;
    scrollbar-color: var(--border-strong) var(--surface-raised);
    scrollbar-width: thin;
}

.skin-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 14px 10px;
    border: 1px solid var(--panel-border);
    background: var(--panel-surface);
    color: var(--text);
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.skin-tile:hover:not(:disabled) {
    border-color: var(--link);
    background: var(--panel-hover);
}

.skin-tile[aria-pressed="true"] {
    border-color: var(--focus);
    box-shadow: inset 0 0 0 1px var(--focus);
    background: var(--panel-selected);
}

.skin-tile:disabled {
    border-style: dashed;
    color: var(--text-subtle);
    background: var(--panel-surface);
    cursor: not-allowed;
}

.skin-tile-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 3px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--tile-bg, var(--surface-input));
}

.skin-tile-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.skin-tile-art svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.skin-tile > b {
    font-size: 14px;
    font-weight: 600;
}

.skin-tile-group,
.skin-tile-status {
    font-size: 11px;
    color: var(--text-muted);
}

.skin-tile-status {
    margin-top: 2px;
    color: var(--link);
}

.skin-swatches {
    display: flex;
    gap: 4px;
    margin-top: 3px;
}

.skin-swatches i {
    width: 14px;
    height: 14px;
    border: 1px solid color-mix(in srgb, var(--text) 25%, transparent);
    border-radius: 50%;
    background: var(--tile-accent, var(--accent));
}

.skin-swatches i:nth-child(2) { background: var(--tile-bg, var(--bg-dark)); }
.skin-swatches i:nth-child(3) { background: var(--tile-text, var(--text)); }

.skin-tile-check {
    display: none;
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--link);
}

.skin-tile[aria-pressed="true"] .skin-tile-check {
    display: block;
}

.skin-selection {
    flex: none;
    min-height: 65px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--panel-divider);
}

.skin-selection > p {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

.skin-dialog-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.skin-dialog-foot > span {
    max-width: 240px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.skin-dialog-foot > div {
    display: flex;
    flex: none;
    gap: 8px;
}

.skin-dialog .admin-btn {
    margin: 0;
}

.skin-dialog button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

@media only screen and (max-width: 600px) {
    .skin-current:not([hidden]) { flex-wrap: wrap; }
    .skin-current .admin-btn { width: 100%; }
    .skin-dialog { padding: 16px; max-height: calc(100dvh - 24px); }
    .skin-dialog h2 { font-size: 17px; }
    .skin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skin-dialog-foot { flex-wrap: wrap; gap: 10px; }
    .skin-dialog-foot > span { max-width: none; }
    .skin-dialog-foot > div { width: 100%; }
    .skin-dialog-foot .admin-btn { flex: 1; }
}

.custom-skin {
    min-width: 0;
    margin: 20px 0 0;
    padding: 16px;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
}

.custom-skin legend {
    padding: 0 8px;
    color: var(--link);
}

.custom-skin-image {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 16px 0;
}

.custom-skin-image img {
    flex: none;
    width: 112px;
    height: 112px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--accent);
}

.custom-skin-image .hud-field {
    flex: 1;
}

.custom-skin-color {
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-skin-color input[type="color"] {
    flex: none;
    width: 42px;
    height: 38px;
    padding: 2px;
    cursor: pointer;
}

.custom-skin-color input[type="text"] {
    min-width: 0;
    width: 100%;
    height: 38px;
    padding: 7px 10px;
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    background: var(--surface-input);
    color: var(--text);
    font: 16px "Sanakan Mono", monospace;
}

.custom-skin-color input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

@media only screen and (max-width: 600px) {
    .custom-skin-image {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-skin-image img {
        align-self: center;
    }
}

/* leaving the ranking of the hunters, under the register of the profile */
.ranking-form .admin-check {
    display: flex;
}

.ranking-form .admin-check a {
    color: var(--link);
}

.ranking-form .admin-btn {
    margin-top: 10px;
}