/* Chronos Admin (private Chronos tooling, not an Epic service), styled after the 2017 Epic Games Launcher (top bar, tabs,
   status boxes, its web pages' fields and buttons) and the Fortnite 1.7.2 social menu (panel layout, icons, NotoSans).
   Colours are taken from both; see docs/AdminPanel.md section 6. */

@font-face {
    font-family: 'BrutalType';
    src: url('/fonts/BrutalType-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'BrutalType';
    src: url('/fonts/BrutalType-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'BrutalType';
    src: url('/fonts/BrutalType-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'NotoSans';
    src: url('/fonts/NotoSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'NotoSans';
    src: url('/fonts/NotoSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

:root {
    /* Launcher */
    --page: #171717;
    --bar: #1e1e1e;
    --bar-box: #2a2a2a;
    --modal: #1f2022;
    --field: #111213;
    --field-line: #333233;
    --status-box: #1e262c;
    --status-label: #8fa0ad;
    --green: #95c990;
    --green-hover: #aae0a4;
    --online: #39e630;
    --red: #c70018;
    --red-text: #ff5a5f;
    /* Panels: the social menu's layout on the launcher's modal colour (pure black was too dark) */
    --panel: #1f2022;
    --panel-dark: #18191b;
    --row-line: #2a2b2e;
    --row-hover: #26272a;
    --line: #2e2f32;
    --line-strong: #3a3a3a;
    --away: #e5b94e;
    --offline: #8f2410;
    /* Text */
    --text: #f2f2f2;
    --soft: #c8c8c8;
    --muted: #8c8c8c;
    --dim: #5e5e5e;
    --display: 'BrutalType', 'Segoe UI', system-ui, sans-serif;
    --body: 'NotoSans', 'Noto Sans', 'Segoe UI', system-ui, sans-serif;
    --mono: ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

/* The page colour sits on the root, so the sign-in backdrop (z-index -1) shows above it and under the content */
html {
    background: var(--page);
}

html, body {
    margin: 0;
    min-height: 100%;
    color: var(--soft);
    font: 14px/1.45 var(--body);
}

a {
    color: var(--green);
}

[hidden] {
    display: none !important;
}

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

.mono {
    font-family: var(--mono);
    font-size: 12px;
}

/* Icons: the white textures, tinted with the text colour */
.mask {
    display: inline-block;
    flex: none;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.dot {
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--online);
}

.dot.away {
    background: var(--away);
}

.dot.offline {
    background: var(--offline);
}

/* Do not disturb: red with a bar, as social menus draw busy */
.dot.dnd, .presence-badge.dnd, .presence-dot.dnd {
    background: #e5302a;
}

/* The badge is placed already; the dots need a box for the bar */
.dot.dnd, .presence-dot.dnd {
    position: relative;
}

.dot.dnd::after, .presence-badge.dnd::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 22%;
    left: 22%;
    height: 2px;
    margin-top: -1px;
    background: #fff;
    border-radius: 1px;
}

/* --- Sign-in backdrop: the launcher's background page (art under a 70% black overlay) --- */

.backdrop {
    display: none;
}

body.signed-out .backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #000 url('/img/login_bg.jpg') center / cover no-repeat;
}

body.signed-out .backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

/* --- Top bar (launcher) --- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: stretch;
    gap: 28px;
    min-height: 56px;
    padding: 0 16px;
    background: var(--bar);
    border-bottom: 1px solid #111;
    font-family: var(--display);
}

body.signed-out .topbar {
    background: rgba(30, 30, 30, 0.85);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

/* Our badge (icon.svg): the social menu's glyph style, not an Epic logo */
.brand img {
    display: block;
}

.brand-name {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brand-tag {
    color: var(--dim);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

/* The launcher's product tabs: normal case; the open one is lighter with a green top edge */
.tabs a {
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-top: 3px solid transparent;
    color: #9a9a9a;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.tabs a:hover {
    color: #e6e6e6;
}

.tabs a.active {
    color: #fff;
    background: var(--bar-box);
    border-top-color: var(--green);
}

.who {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    color: var(--soft);
    background: none;
    border: 0;
    font: 500 13px var(--display);
    letter-spacing: 0.02em;
    cursor: pointer;
}

.user:hover {
    color: #fff;
}

.user .dot {
    width: 11px;
    height: 11px;
    background: #3fc33f;
}

.user .dot.away {
    background: var(--away);
}

.user .dot.dnd {
    background: #e5302a;
}

.user .dot.offline {
    background: var(--offline);
}

.user .mask.drop {
    width: 11px;
    height: 11px;
    color: #c8c8c8;
    --icon: url('/img/ComboDropdown.png');
}

.icon-box {
    display: flex;
    align-items: center;
    gap: 6px;
}

.icon-box a {
    display: flex;
    padding: 6px;
    color: #c8c8c8;
}

.icon-box a:hover {
    color: #fff;
}

.icon-box .mask.friends {
    width: 26px;
    height: 18px;
    --icon: url('/img/socialWidget_ico.png');
}

.icon-box .mask.gear {
    width: 18px;
    height: 18px;
    --icon: url('/img/Gear.png');
}

/* The user menu: the social menu's presence drop-down */
.menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    min-width: 240px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    font-family: var(--body);
}

.menu-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 2px solid var(--line);
    color: var(--text);
    font-size: 16px;
}

.menu .menu-presence {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
}

.menu .menu-presence.chosen {
    color: var(--text);
    background: var(--bar-box);
}

.menu-line {
    border-top: 2px solid var(--line);
}

.menu-status .state {
    color: var(--muted);
}

.menu button {
    display: block;
    width: 100%;
    padding: 11px 16px;
    color: var(--soft);
    background: none;
    border: 0;
    text-align: left;
    font: 15px var(--body);
    cursor: pointer;
}

.menu button:hover {
    background: var(--row-hover);
    color: #fff;
}

/* --- Page --- */

.main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px 24px 48px;
}

.page-head {
    margin-bottom: 22px;
}

/* The launcher's product title ("FORTNITE"), its text and "SERVERS: ONLINE" */
.page-head h1 {
    margin: 0;
    color: #fff;
    font: 700 32px/1.2 var(--display);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-head p {
    max-width: 720px;
    margin: 10px 0 0;
    color: #d0d0d0;
    font: 400 15px/1.5 var(--display);
    letter-spacing: 0.01em;
}

.status-line {
    margin-top: 14px;
    color: #e6e6e6;
    font: 700 14px var(--display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.status-line .online {
    color: var(--online);
}

.status-line .offline {
    color: var(--red-text);
}

.status-line .paused {
    color: var(--away);
}

/* Status boxes: the launcher's "Waiting In Line" box */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.stat {
    padding: 16px 18px;
    background: var(--status-box);
}

.stat .label {
    color: var(--status-label);
    font: 500 11px var(--display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.stat .value {
    margin-top: 6px;
    color: var(--text);
    font: 500 22px/1.2 var(--display);
    font-variant-numeric: tabular-nums;
}

.stat .sub {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.meter {
    height: 4px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.08);
}

.meter > div {
    height: 100%;
    width: 0;
    background: var(--green);
}

.meter.high > div {
    background: var(--away);
}

/* Panels: the social menu */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.panel {
    margin-bottom: 14px;
    background: var(--panel);
}

.grid .panel {
    margin-bottom: 0;
}

/* Grids whose panels share the whole width (no empty columns) */
.grid.fill {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 18px;
    border-bottom: 2px solid var(--line);
}

.panel-head img {
    width: 26px;
    height: 26px;
    opacity: 0.75;
}

.panel-head h2 {
    flex: 1;
    margin: 0;
    color: #a0a0a0;
    font: 400 17px var(--body);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.panel-body {
    padding: 16px 18px;
}

.panel-body.flush {
    padding: 0;
}

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

.kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
    margin: 0;
}

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

.kv dd {
    margin: 0;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* Rows: the social menu's friends list */
.rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--row-line);
}

.row:last-child {
    border-bottom: 0;
}

.row:hover {
    background: var(--row-hover);
}

.avatar-wrap {
    position: relative;
    display: inline-flex;
    flex: none;
}

.avatar-wrap .avatar {
    display: block;
}

.avatar-wrap.small .avatar {
    width: 28px;
    height: 28px;
}

.presence-badge {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 13px;
    height: 13px;
    background: var(--offline);
    border: 2px solid var(--panel);
    border-radius: 50%;
}

.avatar-wrap.small .presence-badge {
    width: 11px;
    height: 11px;
}

.presence-badge.online {
    background: var(--online);
}

.presence-badge.away {
    background: var(--away);
}

.face.dnd {
    border-color: #e5302a;
}

.row .avatar {
    width: 38px;
    height: 38px;
    opacity: 0.9;
}

.row .who-text {
    flex: 1;
    min-width: 0;
}

.row .name {
    color: var(--text);
    font-size: 16px;
}

.row .name .you {
    color: var(--muted);
    font-size: 13px;
}

.row .detail {
    color: var(--muted);
    font-size: 12.5px;
}

.row .controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.row .controls input {
    height: 30px;
    width: 180px;
    font-size: 13px;
}

.row.muted {
    color: var(--muted);
}

/* Roles: the launcher's presence colours */
.role-badge {
    padding: 3px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    color: var(--soft);
    font: 500 12px var(--display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.role-badge.owner {
    color: var(--green);
    border-color: var(--green);
}

.role-badge.admin {
    color: #8fc3ff;
    border-color: #4a6f99;
}

.role-badge.tester {
    color: var(--away);
    border-color: #7a6431;
}

.detail {
    font: 12.5px var(--body);
    letter-spacing: 0;
    text-transform: none;
}

/* Owners without two-factor, or a tab older than the build: a notice under the top bar on every page */
.notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    color: #ffe2a8;
    background: rgba(229, 185, 78, 0.14);
    border-bottom: 1px solid rgba(229, 185, 78, 0.35);
}

.qr-box {
    align-self: flex-start;
    padding: 10px;
    background: #fff;
    border-radius: 2px;
}

.qr-box .qr {
    display: block;
    width: 200px;
    height: 200px;
    image-rendering: pixelated;
}

.key {
    padding: 8px 12px;
    color: var(--text);
    background: var(--field);
    border: 1px solid var(--field-line);
    border-radius: 3px;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: none;
    user-select: all;
}

.codes {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 6px 28px;
    margin: 0;
    padding: 12px 16px;
    list-style: none;
    background: var(--field);
    border: 1px solid var(--field-line);
    font: 16px var(--mono);
    color: var(--text);
}

textarea {
    padding: 10px 14px;
    color: #f8f8f8;
    background: var(--field);
    border: 1px solid var(--field-line);
    border-radius: 3px;
    font: 15px var(--body);
    letter-spacing: 0;
    text-transform: none;
    resize: vertical;
    outline: none;
}

textarea:focus {
    border-color: var(--green);
}

/* The owner's message on the join screen */
.message {
    margin: 0;
    padding: 10px 14px;
    color: var(--text);
    background: var(--panel);
    border-left: 3px solid var(--status-label);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.message-from {
    margin-bottom: 4px;
    color: var(--status-label);
    font: 500 11px var(--display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.invite-result {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.invite-link {
    display: flex;
    gap: 8px;
}

.invite-link input {
    flex: 1;
    min-width: 0;
    font-family: var(--mono);
    font-size: 12px;
}

/* Fields: the launcher's web pages */
.stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--muted);
    font: 500 11px var(--display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

label.inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font: 13px var(--body);
    letter-spacing: 0;
    text-transform: none;
}

input, select, button {
    font: inherit;
}

input[type="text"], input[type="password"], input[type="number"], select {
    height: 46px;
    padding: 0 14px;
    color: #f8f8f8;
    background: var(--field);
    border: 1px solid var(--field-line);
    border-radius: 3px;
    font: 15px var(--body);
    letter-spacing: 0;
    text-transform: none;
    outline: none;
    transition: border-color 0.2s;
}

select {
    height: 38px;
    font-size: 13px;
}

input:focus, select:focus {
    border-color: var(--green);
}

/* Search fields: the social menu's "Add a friend" box */
.search {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    padding: 0 4px;
    border-bottom: 2px solid var(--line);
    letter-spacing: 0;
    text-transform: none;
}

.search img {
    width: 20px;
    height: 20px;
    opacity: 0.85;
}

.search input {
    flex: 1;
    min-width: 0;
    height: 36px;
    color: #fff;
    background: none;
    border: 0;
    outline: none;
    font: 15px var(--body);
}

.search:focus-within {
    border-bottom-color: #555;
}

/* Buttons: the launcher's EcosystemStyle brushes. primary_btn is a filled block with 2px corners (the green Launch
   button: white BrutalType, normal case; pressed is the tint at 81%, like split_btn_right); secondary_btn is a 2px
   outline that fills on hover. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 20px;
    color: #e6e6e6;
    background: transparent;
    border: 2px solid #5a5a5a;
    border-radius: 2px;
    font: 500 15px var(--display);
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover:not(:disabled) {
    color: #fff;
    background: #5a5a5a;
}

.btn.green {
    min-height: 52px;
    color: #fff;
    background: var(--green);
    border-color: var(--green);
    font-size: 20px;
}

.btn.green:hover:not(:disabled) {
    background: var(--green-hover);
    border-color: var(--green-hover);
}

.btn.green:active:not(:disabled) {
    background: #79a375;
    border-color: #79a375;
}

.btn.danger {
    color: #ff8a8f;
    border-color: #8a1c22;
}

.btn.danger:hover:not(:disabled) {
    color: #fff;
    background: var(--red);
    border-color: var(--red);
}

.btn.small {
    min-height: 30px;
    padding: 0 12px;
    font-size: 13px;
}

.btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.btn:focus-visible, .tabs a:focus-visible, .user:focus-visible, .icon-box a:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.note {
    padding: 10px 14px;
    color: var(--soft);
    background: var(--status-box);
    border-left: 3px solid var(--green);
}

.error {
    padding: 10px 14px;
    color: #ffd7d9;
    background: rgba(199, 0, 24, 0.18);
    border-left: 3px solid var(--red);
}

.banner {
    margin-bottom: 14px;
    padding: 10px 14px;
    color: #ffe2a8;
    background: rgba(229, 185, 78, 0.12);
    border-left: 3px solid var(--away);
}

/* --- Sign-in: the launcher's web modal --- */

.signin {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 140px);
}

.modal {
    width: 100%;
    max-width: 440px;
    background: var(--modal);
    box-shadow: 0 0 3px 0 #000, 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 26px 34px 0;
}

.modal-head img {
    width: 34px;
    height: 34px;
    opacity: 0.85;
}

.modal-head h1 {
    margin: 0;
    color: #fff;
    font: 400 22px var(--display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.modal-body {
    padding: 22px 34px 30px;
}

.modal-foot {
    padding: 12px 34px;
    border-top: 1px solid var(--field-line);
    color: var(--dim);
    font: 11px var(--display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Dialogs: the sign-in modal over the dimmed page */
.dialog-layer {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(0, 0, 0, 0.65);
}

.modal.dialog {
    max-width: 560px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.modal.dialog .modal-head h1 {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.dialog-close {
    align-self: flex-start;
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--muted);
    background: none;
    border: 0;
    font: 26px/1 var(--body);
    cursor: pointer;
}

.dialog-close:hover {
    color: var(--text);
}

.dialog-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.dialog-label {
    color: var(--muted);
    font: 500 11px var(--display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dialog-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

/* --- Log and tables --- */

.log {
    height: 420px;
    background: var(--panel-dark);
    overflow: auto;
    padding: 10px 18px;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.55;
}

.log-line {
    color: #c8c8c8;
    white-space: pre-wrap;
    word-break: break-word;
}

.log-line .t {
    color: #5e5e5e;
}

.log-line.WARN .lv {
    color: var(--away);
}

.log-line.ERROR .lv {
    color: var(--red-text);
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 9px 18px;
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    border-bottom: 2px solid var(--line);
    font: 500 11px var(--display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

td {
    color: var(--soft);
    border-bottom: 1px solid var(--row-line);
}

tr:hover td {
    background: var(--row-hover);
}

/* Matchmaking (A2): buckets as social-menu section bars, states as role-badge outlines */
.mm-bucket {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 9px 18px;
    background: var(--panel-dark);
    border-bottom: 1px solid var(--row-line);
}

.mm-bucket .title {
    color: var(--text);
    font: 500 13px var(--display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mm-bucket .count {
    flex: 1;
    color: var(--muted);
    font-size: 12.5px;
}

.mm-check, .mm-check-space {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
}

.mm-check {
    accent-color: var(--green);
    cursor: pointer;
}

.mm-state {
    padding: 3px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    color: var(--soft);
    font: 500 11px var(--display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mm-state.waiting, .mm-state.free {
    color: var(--green);
    border-color: #4c6b49;
}

.mm-state.held, .mm-state.assigned, .mm-state.busy {
    color: #8fc3ff;
    border-color: #4a6f99;
}

.mm-state.paused, .mm-state.connecting, .mm-state.done {
    color: var(--away);
    border-color: #7a6431;
}

.mm-state.ingame {
    color: var(--online);
    border-color: #2f7a2a;
}

.mm-start {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 14px;
    padding: 14px 18px;
    background: var(--panel-dark);
    border-top: 2px solid var(--line);
}

.mm-start label {
    flex: 1 1 200px;
}

.mm-start .detail {
    flex-basis: 100%;
}

.mm-tag {
    margin-left: 8px;
    padding: 1px 6px;
    color: var(--away);
    border: 1px solid #7a6431;
    border-radius: 2px;
    font: 500 10px var(--display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: 2px;
}

td .mm-tag {
    margin-left: 0;
}

.mm-tag.bad {
    color: var(--red-text);
    border-color: #7a2a2f;
}

/* Profiles (A4) */
.subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 18px;
}

.subtabs:empty {
    display: none;
}

.subtab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    color: var(--soft);
    background: var(--bar-box);
    border: 1px solid transparent;
    border-radius: 2px;
    font: 13px var(--mono);
    cursor: pointer;
}

.subtab:hover {
    color: var(--text);
}

.subtab.active {
    color: var(--text);
    border-color: var(--green);
}

.subtab.new {
    color: var(--dim);
    font-style: italic;
}

.subtab .count {
    padding: 0 6px;
    color: var(--muted);
    background: var(--panel-dark);
    border-radius: 2px;
    font-size: 11px;
}

.banner.info {
    color: var(--status-label);
    background: var(--status-box);
    border-left-color: var(--status-label);
}

.profile-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 14px;
}

.profile-head .tools {
    margin-left: auto;
}

input.qty {
    width: 120px;
    height: 30px;
    font-size: 13px;
}

.json-edit {
    min-height: 280px;
    font: 12px/1.5 var(--mono);
}

.stats-kv dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Storage (A6) */
a.btn {
    text-decoration: none;
}

.modal-head h1.keep-case {
    text-transform: none;
}

.code {
    max-height: 60vh;
    margin: 12px 0 0;
    padding: 12px 14px;
    overflow: auto;
    color: var(--soft);
    background: var(--panel-dark);
    font: var(--code-size, 12px)/1.5 var(--mono);
    white-space: pre;
    tab-size: 4;
}

.code.desc {
    max-height: 30vh;
    white-space: pre-wrap;
}

.code.diff .add {
    color: #8fd18a;
}

.code.diff .del {
    color: var(--red-text);
}

.code.diff .hunk {
    color: #8fc3ff;
}

.code.diff .file {
    color: var(--text);
    font-weight: 700;
}

/* Code colours (code.js), after the dark themes code editors use */
.code .t-com { color: #6a9955; }
.code .t-str { color: #ce9178; }
.code .t-num { color: #b5cea8; }
.code .t-kw, .code .t-lit { color: #569cd6; }
.code .t-ctl, .code .t-pre { color: #c586c0; }
.code .t-type, .code .t-sec { color: #4ec9b0; }
.code .t-fn, .code .t-anno { color: #dcdcaa; }
.code .t-macro { color: #4fc1ff; }
.code .t-var, .code .t-attr { color: #9cdcfe; }
.code .t-tag { color: #569cd6; }
.code .t-punct { color: #808080; }
.code .t-err { color: #f48771; }
.code .t-warn { color: #e2c08d; }
.code .t-add { color: #8fd18a; }
.code .t-del { color: var(--red-text); }
.code .t-hunk { color: #8fc3ff; }
.code .t-meta { color: var(--text); font-weight: 700; }

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0 0 12px;
}

.crumb {
    padding: 4px 6px;
    color: var(--soft);
    background: none;
    border: 0;
    border-radius: 2px;
    font: 13px var(--mono);
    cursor: pointer;
}

.crumb:hover {
    color: var(--text);
    background: var(--bar-box);
}

tr.clickable {
    cursor: pointer;
}

.pad {
    margin: 0;
    padding: 12px 18px 0;
}

.cloud-user + .cloud-user {
    border-top: 2px solid var(--line);
}

.row.current .name {
    color: var(--green);
}

/* Accounts (A3) */
.row.clickable {
    cursor: pointer;
}

.rows.compact .row {
    padding: 6px 0;
}

.rows.compact .row:hover {
    background: none;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.inline-form input {
    flex: 1 1 200px;
    min-width: 0;
}

.modal.dialog.wide {
    max-width: 760px;
}

.dialog-actions.left {
    justify-content: flex-start;
    margin-top: 10px;
}

/* Two fields side by side in a dialog form */
.field-row {
    display: flex;
    gap: 12px;
}

.field-row label {
    flex: 1;
    min-width: 0;
}

.field-row label.narrow {
    flex: 0 0 110px;
}

.chips, .teams {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 5px 0 3px;
}

.chip {
    padding: 2px 8px;
    color: var(--soft);
    background: var(--bar-box);
    border-radius: 2px;
    font-size: 12.5px;
}

.chip.on {
    color: var(--green);
}

/* "Coming soon": the launcher's queue box */
.queue {
    max-width: 560px;
    padding: 22px 26px;
    background: var(--status-box);
}

.queue h2 {
    margin: 0;
    color: #fff;
    font: 500 20px var(--display);
}

.queue .eta {
    margin-top: 4px;
    color: var(--status-label);
    font-size: 13px;
}

.queue ul {
    margin: 14px 0 0;
    padding-left: 18px;
    color: var(--soft);
}

.queue li + li {
    margin-top: 4px;
}

/* --- Toast: the social menu's notification --- */

.toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(440px, calc(100vw - 32px));
    padding: 12px 16px;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--green);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.toast img {
    width: 20px;
    height: 20px;
}

.toast.bad {
    border-left-color: var(--red);
}

/* Depot browser: a folder tree beside the open folder or file, previews by kind, changes with one's own Perforce login */
.panel-head h2.keep-case {
    text-transform: none;
    overflow-wrap: anywhere;
}

.depot {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
}

.depot-tree {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    padding: 8px 0;
    overflow: auto;
    background: var(--panel);
}

.depot-main {
    min-width: 0;
}

.depot-main .panel {
    margin-bottom: 0;
}

.tree, .tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tree ul {
    padding-left: 16px;
}

.tree-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 30px;
    padding: 0 10px 0 6px;
}

.tree-row:hover {
    background: var(--row-hover);
}

.tree-row.current {
    background: var(--bar-box);
    box-shadow: inset 3px 0 0 var(--green);
}

.tree-row.current .tree-name {
    color: var(--text);
}

.tree-top {
    padding-left: 10px;
    border-bottom: 1px solid var(--row-line);
    margin-bottom: 4px;
}

.twisty {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    padding: 0;
    color: var(--muted);
    background: none;
    border: 0;
    font-size: 12px;
    cursor: pointer;
}

.twisty:hover {
    color: var(--text);
}

.twisty.empty {
    visibility: hidden;
}

.tree-name {
    flex: 1;
    min-width: 0;
    padding: 4px 2px;
    overflow: hidden;
    color: var(--soft);
    background: none;
    border: 0;
    font: 13.5px var(--body);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.tree-name:hover {
    color: var(--text);
}

.tree-note {
    padding: 2px 10px 6px 34px;
}

/* Folder glyphs (svg): a folder; a depot's drum (class drum: .depot is the depot browser's layout) coloured by the
   depot's type; a stream's folder coloured by the stream's type, with a stream's mark (a branch, or a straight line
   for a mainline) */
.gi {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.gi .body { fill: #c99a3a; }
.gi.drum .body { fill: #7d8796; }
.gi.drum .rim { fill: none; stroke: rgba(0, 0, 0, 0.32); stroke-width: 1.2; }
.gi.drum.stream .body { fill: #3f86c9; }
.gi.drum.remote .body { fill: #8a63b8; }
.gi.drum.spec .body, .gi.drum.extension .body { fill: #8c8c8c; }
.gi.drum.archive .body { fill: #9a7048; }
.gi.drum.unload .body, .gi.drum.tangent .body, .gi.drum.other .body { fill: #5d6168; }
.gi.drum.graph .body { fill: #3e9a6a; }
.gi.stream .mark { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; }
.gi.stream circle.mark { fill: #fff; stroke: none; }
.gi.stream.mainline .body { fill: #3f86c9; }
.gi.stream.development .body, .gi.stream.sparsedev .body { fill: #3e9a4f; }
.gi.stream.release .body, .gi.stream.sparserel .body { fill: #d9822b; }
.gi.stream.task .body { fill: #a8982e; }
.gi.stream.other .body { fill: #6f7f8f; }
.gi.stream.virtual .body { fill: none; stroke: #9a90e0; stroke-width: 1.4; stroke-dasharray: 2.4 1.6; }
.gi.stream.virtual .mark { stroke: #9a90e0; }
.gi.stream.virtual circle.mark { fill: #9a90e0; }

/* File glyphs: a page with its extension */
.ficon {
    display: inline-block;
    flex: 0 0 auto;
    position: relative;
    vertical-align: middle;
}

.ficon.file {
    width: 18px;
    height: 22px;
    background: #4a4c51;
    border-radius: 2px;
    clip-path: polygon(0 0, 70% 0, 100% 24%, 100% 100%, 0 100%);
}

.ficon.file::after {
    content: attr(data-ext);
    position: absolute;
    right: -1px;
    bottom: 2px;
    left: -1px;
    color: #fff;
    font: 700 6.5px/1 var(--body);
    letter-spacing: -0.02em;
    text-align: center;
    text-transform: uppercase;
}

.ficon.file.kind-image { background: #3f7f4a; }
.ficon.file.kind-video, .ficon.file.kind-audio { background: #7a4aa0; }
.ficon.file.kind-pdf { background: #a83a32; }
.ficon.file.kind-markdown { background: #2f6aa0; }
.ficon.file.kind-csv { background: #2f8a7a; }
.ficon.file.kind-json { background: #8a7a2f; }
.ficon.file.kind-code { background: #4b5f9a; }
.ficon.file.kind-model { background: #a0632e; }
.ficon.file.kind-font { background: #6b5f8a; }

.file-name {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

table.files td {
    white-space: nowrap;
}

table.files td:first-child {
    min-width: 12em;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Segmented switch: list or grid, rendered or source */
.seg {
    display: inline-flex;
    border: 1px solid var(--field-line);
    border-radius: 2px;
}

.seg-btn {
    padding: 5px 12px;
    color: var(--muted);
    background: var(--field);
    border: 0;
    font: 12.5px var(--body);
    cursor: pointer;
}

.seg-btn + .seg-btn {
    border-left: 1px solid var(--field-line);
}

.seg-btn:hover {
    color: var(--text);
}

.seg-btn.active {
    color: var(--text);
    background: var(--bar-box);
    box-shadow: inset 0 -2px 0 var(--green);
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 10px;
    padding: 14px 18px 18px;
}

.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 10px 8px;
    color: var(--soft);
    background: var(--panel-dark);
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
}

.tile:hover {
    color: var(--text);
    border-color: var(--line-strong);
}

.tile-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 84px;
    overflow: hidden;
}

.tile-art img, .tile-art canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tile-art .gi {
    width: 60px;
    height: 60px;
}

.tile-art .ficon.file {
    width: 46px;
    height: 58px;
}

.tile-art .ficon.file::after {
    bottom: 8px;
    font-size: 12px;
}

.tile-name {
    width: 100%;
    overflow: hidden;
    font: 12.5px var(--body);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tile-detail {
    color: var(--dim);
    font-size: 11.5px;
}

/* The open file */
.file-meta {
    padding: 12px 18px 0;
    overflow-wrap: anywhere;
}

.file-meta .mm-tag {
    margin-left: 8px;
}

button.link {
    padding: 0;
    color: var(--soft);
    background: none;
    border: 0;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

button.link:hover {
    color: var(--text);
}

.file-view {
    padding-bottom: 16px;
}

.file-view > .code, .file-view > .code-lines, .file-view .markdown, .file-view .csv-view {
    margin: 12px 18px 0;
}

.file-view > div > .code-lines {
    margin: 12px 18px 0;
}

.code-language {
    margin-left: auto;
}

.view-modes {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 0;
}

.code-lines {
    display: flex;
    max-height: 70vh;
    margin-top: 12px;
    overflow: auto;
    background: var(--panel-dark);
}

.code-lines .code {
    flex: 1;
    max-height: none;
    margin: 0;
    overflow: visible;
    background: none;
}

.code-lines .gutter {
    position: sticky;
    left: 0;
    margin: 0;
    padding: 12px 10px 12px 14px;
    color: var(--dim);
    background: var(--panel-dark);
    border-right: 1px solid var(--row-line);
    font: var(--code-size, 12px)/1.5 var(--mono);
    text-align: right;
    user-select: none;
}

.image-view {
    margin: 12px 18px 0;
    padding: 12px;
    overflow: auto;
    text-align: center;
    background-color: #2a2b2e;
    background-image: linear-gradient(45deg, #333 25%, transparent 25%), linear-gradient(-45deg, #333 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #333 75%), linear-gradient(-45deg, transparent 75%, #333 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.image-view img, .image-view canvas {
    cursor: zoom-in;
}

.image-view img.fit, .image-view canvas.fit {
    max-width: 100%;
    max-height: 70vh;
}

.image-view img:not(.fit), .image-view canvas:not(.fit) {
    cursor: zoom-out;
}

.image-view canvas.small.fit {
    width: min(256px, 100%);
    height: auto;
    image-rendering: pixelated;
}

/* 3D model previews (models.js): the script sizes the canvas from the wrapper (16:10, at most 70vh), so the wrapper has
   no side padding */
.model-view {
    margin: 12px 18px 0;
    background: var(--panel-dark);
    border: 1px solid var(--line);
}

.model-canvas {
    display: block;
    touch-action: none;
    cursor: grab;
}

.model-canvas:active {
    cursor: grabbing;
}

.model-thumb {
    display: block;
    width: 256px;
    max-width: 100%;
    height: auto;
    margin: 12px auto;
}

.model-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 8px 10px;
    background: var(--panel);
    border-top: 1px solid var(--line);
}

.model-bar .detail {
    flex: 1 1 16em;
    min-width: 0;
}

/* Fonts: the font's own name in itself, samples at sizes, the alphabet and a grid of its characters */
.font-view {
    margin: 12px 18px 0;
}

.font-head {
    margin-bottom: 14px;
}

.font-name {
    color: var(--text);
    font-size: 30px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.font-sample {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    max-width: 640px;
    text-align: left;
}

.font-sample input {
    width: 100%;
}

.font-lines {
    margin: 12px 0;
    padding: 6px 12px;
    overflow: hidden;
    background: var(--panel-dark);
}

.font-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--row-line);
}

.font-row:last-child {
    border-bottom: 0;
}

.font-size {
    flex: 0 0 2em;
    font: 11px var(--mono);
    text-align: right;
}

.font-line {
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
}

.font-alphabet {
    color: var(--soft);
    font-size: 26px;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.pad-top {
    padding-top: 14px;
}

.font-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 2px;
    margin-top: 8px;
}

.font-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    color: var(--text);
    background: var(--panel-dark);
    font-size: 22px;
}

.font-cell:hover {
    background: var(--bar-box);
}

.font-legal {
    margin: 8px 0 0;
    white-space: pre-wrap;
}

.font-tile {
    color: var(--text);
    font-size: 40px;
    line-height: 1;
}

.media-box {
    margin: 12px 18px 0;
    background: #000;
}

.media-view {
    display: block;
    width: 100%;
    max-height: 70vh;
}

audio.media-view {
    background: var(--panel-dark);
}

.pdf-view {
    display: block;
    width: calc(100% - 36px);
    height: 75vh;
    margin: 12px 18px 0;
    background: #fff;
    border: 0;
}

.csv-view {
    max-height: 70vh;
    overflow: auto;
}

.csv-view th {
    position: sticky;
    top: 0;
    background: var(--panel);
}

.csv-view .num {
    color: var(--dim);
    text-align: right;
}

/* Markdown, drawn as elements */
.markdown {
    max-width: 900px;
    color: var(--soft);
    font-size: 14.5px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.markdown .md-h {
    margin: 1.2em 0 0.5em;
    color: var(--text);
    font-family: var(--display);
    font-weight: 500;
    line-height: 1.25;
}

.markdown h1.md-h {
    font-size: 26px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

.markdown h2.md-h {
    font-size: 21px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--row-line);
}

.markdown h3.md-h {
    font-size: 17px;
}

.markdown h4.md-h, .markdown h5.md-h, .markdown h6.md-h {
    font-size: 15px;
}

.markdown > :first-child {
    margin-top: 0;
}

.markdown p, .markdown .md-list, .markdown blockquote, .markdown .md-table {
    margin: 0 0 0.9em;
}

.markdown a {
    color: #8fc3ff;
}

.markdown code {
    padding: 1px 5px;
    color: var(--text);
    background: var(--bar-box);
    border-radius: 2px;
    font: 0.9em var(--mono);
}

.markdown .md-code {
    max-height: none;
    margin: 0 0 0.9em;
}

.markdown .md-code code {
    padding: 0;
    background: none;
}

.markdown blockquote {
    padding: 2px 14px;
    color: var(--muted);
    border-left: 3px solid var(--line-strong);
}

.markdown hr {
    margin: 1.4em 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.markdown .md-list {
    padding-left: 1.6em;
}

.markdown .md-list .md-list {
    margin: 0.2em 0;
}

.markdown li.task {
    list-style: none;
}

.markdown li.task .check {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 8px 0 -22px;
    color: var(--green);
    border: 1px solid var(--line-strong);
    font-size: 11px;
    line-height: 12px;
    text-align: center;
    vertical-align: -2px;
}

.markdown .md-img {
    max-width: 100%;
}

.markdown .md-table th, .markdown .md-table td {
    white-space: normal;
}

.markdown .al-center {
    text-align: center;
}

.markdown .al-right {
    text-align: right;
}

.md-external {
    color: var(--muted);
}

/* Changes */
.banner.p4 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.banner.p4 > span {
    flex: 1 1 300px;
}

.banner.p4.signed {
    color: #d4f0d0;
    background: rgba(149, 201, 144, 0.1);
    border-left-color: var(--green);
}

.code-edit {
    width: 100%;
    min-height: 55vh;
    padding: 12px 14px;
    color: var(--text);
    background: var(--panel-dark);
    font: var(--code-size, 12px)/1.5 var(--mono);
    white-space: pre;
    tab-size: 4;
    resize: vertical;
}

.code-edit.short {
    min-height: 240px;
}

/* Code being edited, coloured: a see-through text box over a coloured copy of its text, with the same metrics */
.code-editor {
    position: relative;
    background: var(--panel-dark);
}

.code-editor .code-shade {
    position: absolute;
    inset: 0;
    max-height: none;
    margin: 0;
    padding: 12px 40px 40px 14px;
    overflow: hidden;
    background: none;
    border: 1px solid transparent;
    font: var(--code-size, 12px)/1.5 var(--mono);
    pointer-events: none;
}

.code-edit.coloured {
    position: relative;
    display: block;
    color: transparent;
    background: transparent;
    caret-color: var(--text);
}

.code-edit.coloured::selection {
    color: transparent;
    background: rgba(92, 160, 255, 0.35);
}

.edit-form {
    padding-top: 12px;
}

label.check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px;
    color: var(--muted);
    border: 2px dashed var(--line-strong);
    border-radius: 2px;
    text-align: center;
    cursor: pointer;
}

.drop-zone.over {
    color: var(--text);
    background: var(--row-hover);
    border-color: var(--green);
}

.row .detail.bad {
    color: var(--red-text);
}

.row .controls progress {
    width: 110px;
}

/* Permissions */
.perm-rows .row.changed .name {
    color: var(--away);
}

.perm-group + .perm-group {
    margin-top: 10px;
}

.chip.off {
    color: var(--dim);
}

@media (max-width: 860px) {
    .depot {
        grid-template-columns: 1fr;
    }

    .depot-tree {
        position: static;
        max-height: 260px;
    }
}

/* --- Narrow screens --- */

/* The brand's tag goes first when the bar gets tight */
@media (max-width: 1279px) {
    .brand-tag {
        display: none;
    }
}

/* Too narrow for the tabs beside the brand (fitTabs in admin.js: how many tabs there are depends on the permissions):
   the tabs get a row of their own */
.topbar.tabs-row {
    flex-wrap: wrap;
    gap: 0 12px;
    padding: 0 12px;
}

.topbar.tabs-row .brand {
    min-height: 50px;
}

.topbar.tabs-row .tabs {
    order: 3;
    width: calc(100% + 24px);
    margin: 0 -12px;
    padding: 0 4px;
    border-top: 1px solid #111;
}

.topbar.tabs-row .tabs a {
    min-height: 44px;
    padding: 0 10px;
}

@media (max-width: 720px) {
    .icon-box {
        display: none;
    }

    .main {
        padding: 20px 16px 40px;
    }

    .page-head h1 {
        font-size: 24px;
    }

    .modal-head, .modal-body, .modal-foot {
        padding-left: 20px;
        padding-right: 20px;
    }

    .log {
        height: 320px;
    }

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

/* --- Presence, chat, Perforce users, settings (A9) --- */

/* Unread chat beside the Chat tab */
.tabs a[data-unread]:not([data-unread=""])::after {
    content: attr(data-unread);
    margin-left: 7px;
    padding: 1px 6px;
    color: #fff;
    background: var(--red);
    border-radius: 9px;
    font: 700 11px/16px var(--body);
}

.badge {
    margin-left: auto;
    padding: 1px 6px;
    color: #fff;
    background: var(--red);
    border-radius: 9px;
    font: 700 11px/16px var(--body);
}

/* Who else is online, in the top bar */
.online-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 6px;
    color: var(--soft);
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
}

.online-chip:hover {
    color: var(--text);
    border-color: var(--green);
}

.online-chip .badge {
    margin-left: 2px;
}

.face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: -8px;
    color: #fff;
    background: #3a4a5c;
    border: 2px solid var(--online);
    border-radius: 50%;
    font: 700 11px/1 var(--body);
    text-transform: uppercase;
}

.face:first-child {
    margin-left: 0;
}

.face.away {
    border-color: var(--away);
}

.presence-dot {
    display: inline-block;
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--offline);
}

.presence-dot.online {
    background: var(--online);
}

.presence-dot.away {
    background: var(--away);
}

.menu-mood {
    padding: 0 14px 8px;
    color: var(--soft);
    font-size: 13px;
}

/* The notices under the top bar, stacked; the owners' banners by kind (Panel page), mildest to most serious */
.notices .notice + .notice {
    border-top: 1px solid rgba(0, 0, 0, 0.35);
}

.notice.kind-friendly {
    color: #d6f5d2;
    background: rgba(149, 201, 144, 0.16);
    border-bottom-color: rgba(149, 201, 144, 0.45);
}

.notice.kind-info {
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
    border-bottom-color: rgba(255, 255, 255, 0.22);
}

.notice.kind-notice {
    color: #d3e6ff;
    background: rgba(64, 140, 230, 0.18);
    border-bottom-color: rgba(110, 170, 255, 0.45);
}

.notice.kind-important {
    color: #ffe7a8;
    background: rgba(229, 185, 78, 0.18);
    border-bottom-color: rgba(229, 185, 78, 0.5);
}

.notice.kind-warning {
    color: #ffd0d0;
    background: rgba(199, 0, 24, 0.24);
    border-bottom-color: rgba(255, 90, 95, 0.55);
}

.notice.kind-critical {
    color: #efdcff;
    background: rgba(140, 60, 220, 0.32);
    border-bottom-color: rgba(190, 120, 255, 0.65);
    font-weight: 600;
}

.banner-tag {
    padding: 1px 6px;
    border: 1px solid currentColor;
    border-radius: 2px;
    font: 500 10.5px var(--display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* The Panel page's banners: a kind, a text, and their order */
.banner-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.banner-row {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
}

.banner-moves {
    display: flex;
    gap: 6px;
}

.banner-preview {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
}

.banner-preview .notice {
    padding: 8px 12px;
}

@media (max-width: 720px) {
    .banner-row {
        grid-template-columns: 1fr;
    }
}

.banner-text {
    white-space: pre-wrap;
    text-align: center;
}

/* The Chat page: chats and people on the left, the open chat on the right */
.chat {
    display: grid;
    grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.chat-side {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    padding: 8px 0;
    overflow: auto;
    background: var(--panel);
}

.chat-side-title {
    padding: 12px 14px 6px;
    color: var(--dim);
    font: 700 11px var(--body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chat-side .detail {
    padding: 0 14px 8px;
}

.chat-item, .chat-person {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 14px;
    color: var(--soft);
    background: none;
    border: 0;
    font: 13.5px var(--body);
    text-align: left;
    cursor: pointer;
    flex-wrap: wrap;
}

.chat-person {
    flex-wrap: nowrap;
}

.chat-item:hover, .chat-person:not([disabled]):not(div):hover {
    color: var(--text);
    background: var(--row-hover);
}

div.chat-person, .chat-person[disabled] {
    cursor: default;
}

.chat-item {
    position: relative;
    padding-right: 44px;
}

.chat-item .badge {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

.chat-item.active {
    color: var(--text);
    background: var(--bar-box);
    box-shadow: inset 3px 0 0 var(--green);
}

.chat-item-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-item-sub {
    display: block;
    flex-basis: 100%;
    color: var(--dim);
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-person-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.role-tag {
    padding: 0 5px;
    color: var(--dim);
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    font-size: 10px;
    text-transform: uppercase;
}

.role-tag.owner, .chat-from.owner { color: #f0c36b; }
.role-tag.admin, .chat-from.admin { color: #8fc3ff; }
.role-tag.tester, .chat-from.tester { color: #95c990; }

.chat-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--panel);
}

.chat-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--row-line);
}

.chat-head h2 {
    margin: 0;
    font-size: 17px;
}

.chat-log {
    height: min(60vh, 640px);
    padding: 10px 18px;
    overflow-y: auto;
}

.chat-more {
    padding: 4px 0 10px;
    text-align: center;
}

.chat-empty {
    padding: 20px 0;
    text-align: center;
}

.chat-msg {
    padding: 6px 0;
    border-bottom: 1px solid var(--row-line);
}

.chat-msg-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.chat-from {
    color: var(--text);
    font-weight: 700;
    font-size: 13.5px;
}

.chat-msg.mine .chat-from::after {
    content: ' (you)';
    color: var(--dim);
    font-weight: 400;
}

.chat-time {
    color: var(--dim);
    font-size: 11.5px;
}

.room-tag {
    padding: 0 6px;
    color: var(--soft);
    background: var(--bar-box);
    border-radius: 2px;
    font-size: 11px;
}

.chat-delete {
    margin-left: auto;
    padding: 0 6px;
    color: var(--dim);
    background: none;
    border: 0;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
}

.chat-msg:hover .chat-delete, .chat-delete:focus {
    opacity: 1;
}

.chat-delete:hover {
    color: var(--red-text);
}

.chat-text {
    margin-top: 2px;
    color: var(--soft);
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-text a {
    color: #8fc3ff;
}

.chat-compose {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--row-line);
}

.chat-compose textarea {
    flex: 1;
    min-width: 0;
    resize: vertical;
}

.chat-note {
    padding: 10px 18px 14px;
    border-top: 1px solid var(--row-line);
}

/* Perforce users */
.p4-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

table.p4-users td {
    vertical-align: middle;
}

/* Settings: your status */
.mood-row {
    display: flex;
    gap: 8px;
}

.mood-row input:last-child {
    flex: 1;
    min-width: 0;
}

.emoji-field {
    width: 64px;
    text-align: center;
}

.quick-emoji {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Storage: the server's disk and the Oracle account */
.disk-total {
    margin-bottom: 8px;
    color: var(--soft);
}

.stack-bar {
    display: flex;
    height: 14px;
    overflow: hidden;
    background: #3a3c40;
    border-radius: 2px;
}

.stack-part {
    height: 100%;
}

.stack-part.p4, .swatch.p4, .usage-fill.p4 { background: #3f86c9; }
.stack-part.p4db, .swatch.p4db, .usage-fill.p4db { background: #7a9cc9; }
.stack-part.app, .swatch.app, .usage-fill.app { background: #5cb85c; }
.stack-part.sys, .swatch.sys, .usage-fill.sys { background: #c99a3a; }
.stack-part.other, .swatch.other, .usage-fill.other { background: #8a8f98; }
.swatch.free { background: #3a3c40; }

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 8px 0 4px;
    color: var(--soft);
    font-size: 12px;
}

.legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.usage-title {
    margin: 18px 0 4px;
    color: var(--soft);
    font: 700 12px var(--body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.usage .row {
    gap: 14px;
}

.usage-bar {
    height: 6px;
    margin-top: 5px;
    overflow: hidden;
    background: #2c2e31;
    border-radius: 3px;
}

.usage-fill {
    display: block;
    height: 100%;
    background: var(--green);
}

.usage-fill.over {
    background: var(--red-text);
}

.usage-size {
    flex: none;
    min-width: 6em;
    color: var(--soft);
    font: 13px var(--mono);
    text-align: right;
}

.usage-details {
    margin-top: 6px;
    color: var(--soft);
}

.usage-details summary {
    cursor: pointer;
}

.gauges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.gauge-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--text);
    font-size: 13.5px;
}

.copy-block {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 6px;
}

.copy-block .code {
    flex: 1;
    min-width: 0;
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.oracle-setup ol {
    margin: 0;
    padding-left: 20px;
}

.oracle-setup li {
    margin-bottom: 10px;
    color: var(--soft);
}

/* --- Examine (A10): the side panel that looks at a change, a Perforce user, a login or a player --- */

.examine {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: min(460px, 100vw);
    background: var(--modal);
    border-left: 1px solid var(--line-strong);
    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.55);
}

.examine-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 6px 10px 6px 16px;
    background: var(--bar);
    border-bottom: 1px solid var(--line);
}

.examine-head .dialog-close {
    align-self: center;
}

.examine-back {
    flex: none;
    width: 30px;
    height: 30px;
    margin-left: -6px;
    padding: 0;
    color: var(--soft);
    background: var(--bar-box);
    border: 0;
    border-radius: 2px;
    font: 22px/1 var(--body);
    cursor: pointer;
}

.examine-back:hover {
    color: var(--text);
    background: var(--line-strong);
}

.examine-title {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.examine-kind {
    color: var(--status-label);
    font: 500 11px var(--display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.examine-title h2 {
    margin: 0;
    overflow: hidden;
    color: #fff;
    font: 400 20px var(--display);
    letter-spacing: 0.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.examine-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--row-line);
    color: var(--muted);
    font-size: 12.5px;
}

.examine-trail button.link {
    color: var(--muted);
    text-decoration: none;
}

.examine-trail button.link:hover {
    color: var(--text);
    text-decoration: underline;
}

.examine-trail .sep {
    color: var(--dim);
}

.examine-body {
    flex: 1;
    padding: 16px 18px 28px;
    overflow-y: auto;
}

.examine-body > .kv {
    margin-top: 14px;
}

.examine-body > .kv:first-child {
    margin-top: 0;
}

.examine-body .code.desc {
    margin: 14px 0 0;
    max-height: 240px;
    overflow: auto;
}

.examine-body .dialog-actions {
    margin-top: 14px;
}

.examine-body .rows.compact .row .ficon,
.examine-body .rows.compact .row .presence-dot {
    margin-right: 10px;
}

/* A player's Profiles tab: the panel widens for the profile's panels and item table */
.examine.wide {
    width: min(940px, 100vw);
}

.examine-tabs {
    margin: 14px -18px 0;
    padding: 0 18px 10px;
    border-bottom: 1px solid var(--row-line);
}

.examine-body .profile-editor > .subtabs {
    padding: 12px 0;
}

.examine-body .profile-editor .banner {
    margin-top: 14px;
}

.examine-body .profile-editor .panel {
    background: var(--panel-dark);
}

.examine-body .profile-head {
    margin-bottom: 12px;
}

.type-chips {
    padding: 10px 18px 0;
}

.type-chips .chip {
    border: 0;
    font: 12.5px var(--body);
    cursor: pointer;
}

.examine-hero {
    display: flex;
    align-items: center;
    gap: 14px;
}

.examine-hero .avatar {
    width: 52px;
    height: 52px;
}

.examine-hero .who-text {
    min-width: 0;
}

.examine-hero .name {
    color: var(--text);
    font-weight: 700;
    font-size: 16px;
    overflow-wrap: anywhere;
}

.examine-hero .name .you {
    color: var(--dim);
    font-weight: 400;
}

.examine-hero .detail {
    margin-top: 2px;
    color: var(--soft);
    font-size: 13px;
}

.examine-hero .detail.muted {
    color: var(--muted);
}

/* A name or number that opens the examine panel */
button.link.examine-link {
    text-decoration: underline dotted rgba(255, 255, 255, 0.35);
    text-underline-offset: 3px;
}

button.link.examine-link:hover {
    color: var(--text);
    text-decoration: underline;
}

button.link.chat-from {
    color: var(--text);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
}

button.link.chat-from:hover {
    text-decoration: underline;
}

button.link.chat-from.owner { color: #f0c36b; }
button.link.chat-from.admin { color: #8fc3ff; }
button.link.chat-from.tester { color: #95c990; }

.chat-text button.link {
    color: #8fc3ff;
    text-decoration: underline;
}

/* --- Chat files (A10): attach, the tray of uploads, and files in messages --- */

.chat-attach {
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--muted);
    background: var(--field);
    border: 1px solid var(--field-line);
    border-radius: 2px;
    cursor: pointer;
}

.chat-attach:hover {
    color: var(--text);
    border-color: var(--line-strong);
}

.chat-attach .gi {
    display: block;
    margin: 0 auto;
}

.gi.clip path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat-main.dropping {
    box-shadow: inset 0 0 0 2px var(--green);
}

.chat-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 18px 0;
    border-top: 1px solid var(--row-line);
}

.chat-pending {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    padding: 6px 4px 6px 6px;
    background: var(--panel-dark);
    border: 1px solid var(--line);
    border-radius: 2px;
}

.chat-pending.bad {
    border-color: var(--red);
}

.chat-pending-art {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.chat-pending-art img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.chat-pending-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.chat-pending-name {
    overflow: hidden;
    color: var(--soft);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-pending-size {
    color: var(--muted);
    font-size: 12px;
}

.chat-pending.bad .chat-pending-size {
    color: var(--red-text);
}

.chat-pending progress {
    width: 150px;
    height: 6px;
}

.chat-pending .chat-delete {
    margin-left: 0;
    opacity: 1;
}

.chat-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.chat-image {
    display: block;
    padding: 0;
    overflow: hidden;
    background: var(--panel-dark);
    border: 1px solid var(--line);
    border-radius: 2px;
    cursor: zoom-in;
}

.chat-image img {
    display: block;
    max-width: min(360px, 100%);
    max-height: 280px;
}

.chat-media {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 100%;
}

.chat-media video {
    max-width: min(480px, 100%);
    max-height: 320px;
    background: #000;
}

.chat-media audio {
    width: min(360px, 100%);
}

.chat-media-name {
    display: flex;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
}

.chat-media-name a, .chat-file {
    color: #8fc3ff;
}

.chat-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    background: var(--panel-dark);
    border: 1px solid var(--line);
    border-radius: 2px;
    text-decoration: none;
}

.chat-file:hover {
    border-color: var(--line-strong);
}

.chat-file-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-file-size {
    color: var(--muted);
    font-size: 12px;
}

/* --- World (A12): the theaters, one open beside the list --- */

.world {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.world-list {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    background: var(--panel);
}

.world-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 14px;
    color: var(--soft);
    background: none;
    border: 0;
    font: 13.5px var(--body);
    text-align: left;
    cursor: pointer;
}

.world-item:hover {
    background: var(--row-hover);
}

.world-item.active {
    color: var(--text);
    background: var(--bar-box);
    box-shadow: inset 3px 0 0 var(--green);
}

.world-item-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.world-item-sub {
    color: var(--muted);
    font-size: 12px;
}

.world-add {
    margin: 8px 14px 4px;
}

.world-main {
    min-width: 0;
    padding-bottom: 18px;
    background: var(--panel);
}

.world-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px 4px;
}

.world-head h2 {
    margin: 0;
    font: 400 22px var(--display);
    letter-spacing: 0.03em;
}

.world-save {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 18px 0;
    padding: 8px 12px;
    color: #ffe7a8;
    background: rgba(229, 185, 78, 0.14);
    border: 1px solid rgba(229, 185, 78, 0.4);
}

.world-save span {
    flex: 1;
}

.world-main > .banner {
    margin: 12px 18px 0;
}

.world-problems {
    color: #ffd0d0;
    background: rgba(199, 0, 24, 0.18);
}

.world-problems ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.world-tab {
    padding: 0 18px;
}

.world-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px 16px;
    margin-bottom: 18px;
}

.world-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--muted);
    font-size: 12.5px;
}

.world-form label.check {
    flex-direction: row;
    align-items: center;
    color: var(--soft);
}

table.world-texts input {
    width: 100%;
}

.world-json {
    width: 100%;
    min-height: 520px;
}

/* The map: each tile at its coordinates, coloured by its region; a letter for the tile type */
.map-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px;
}

.map-wrap {
    max-width: 100%;
    overflow: auto;
}

/* Each tile is the game's hex (img/Hex.png, white on clear) used as a mask over its region's colour (--tile); the page
   places it (left, top) by its coordinates */
.tile-map {
    position: relative;
    margin: 4px;
}

.tile {
    position: absolute;
    width: 36px;
    height: 36px;
    padding: 0;
    color: #fff;
    background: none;
    border: 0;
    font: 700 12px var(--body);
    cursor: pointer;
}

.tile::before, .tile::after {
    content: '';
    position: absolute;
    inset: 0;
    -webkit-mask: url('/img/Hex.png') center / contain no-repeat;
    mask: url('/img/Hex.png') center / contain no-repeat;
}

.tile::before {
    z-index: 1;
    background: var(--tile, repeating-linear-gradient(45deg, #4a4a4a, #4a4a4a 4px, #333 4px, #333 8px));
}

/* The ring of a picked or hovered tile: a bigger hex behind it */
.tile::after {
    inset: -4px;
    background: transparent;
}

.tile:hover::after {
    background: rgba(255, 255, 255, 0.45);
}

.tile.selected::after {
    background: #fff;
}

.tile.selected {
    z-index: 2;
}

.tile.type-NonMission::before {
    opacity: 0.45;
}

.tile-mark {
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.tile-panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    min-width: 240px;
    max-width: 380px;
}

.tile-panel label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--muted);
    font-size: 12.5px;
}

.tile-panel label.check {
    flex-direction: row;
    align-items: center;
    color: var(--soft);
}

/* x and y side by side: the inline form's growing inputs would grow tall in these column labels */
.tile-panel .inline-form label {
    flex: 1;
}

.tile-panel .inline-form input {
    flex: none;
    width: 100%;
}

.tile-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 14px;
    font-size: 12.5px;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.swatch {
    display: inline-block;
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.region-name {
    width: min(420px, 100%);
}

/* --- Content (A13): the CMS page's parts as forms --- */

.content-main > .world-save {
    margin: 0 0 12px;
}

.content-main > .banner {
    margin: 0 0 12px;
}

.content-part {
    padding: 14px 18px 4px;
}

.content-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-weight: 700;
}

.content-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px 16px;
}

.content-part .content-fields {
    padding: 4px 0 12px;
}

.content-fields.two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.content-fields label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12.5px;
}

.content-fields input, .content-fields textarea {
    width: 100%;
}

.content-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 18px 14px;
}

.content-part .content-list {
    padding: 0;
}

.content-row {
    display: grid;
    grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
}

.content-image {
    display: flex;
    align-items: center;
    gap: 10px;
}

.content-image img {
    width: 64px;
    height: 36px;
    object-fit: cover;
    background: var(--panel-dark);
}

.content-add select {
    max-width: 220px;
}

@media (max-width: 720px) {
    .content-row {
        grid-template-columns: 1fr;
    }
}

/* --- Hosted files (A12): public files as cards with their addresses --- */

.hosted-drop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 14px;
    border: 1px dashed var(--line-strong);
    color: var(--soft);
}

.hosted-drop.dropping {
    border-color: var(--green);
    background: rgba(149, 201, 144, 0.08);
}

.hosted-folder {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hosted-folder input {
    width: 180px;
}

.hosted-uploads {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.hosted-upload {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hosted-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 14px 18px 18px;
}

.hosted-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--panel-dark);
    border: 1px solid var(--line);
}

.hosted-art {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    overflow: hidden;
    background: repeating-conic-gradient(#202124 0% 25%, #26272a 0% 50%) 50% / 16px 16px;
}

.hosted-art img, .hosted-art video {
    max-width: 100%;
    max-height: 100%;
}

.hosted-art audio {
    width: 90%;
}

.hosted-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

.hosted-path {
    overflow: hidden;
    color: var(--text);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hosted-meta .tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

@media (max-width: 860px) {
    .world {
        grid-template-columns: 1fr;
    }

    .world-list {
        position: static;
    }
}

/* Thirteen tabs for owners: tighter on narrower screens, and the online chip shows only faces */
@media (max-width: 1440px) {
    .tabs a {
        padding: 0 10px;
        font-size: 14px;
    }

    .online-chip .online-label {
        display: none;
    }
}

@media (max-width: 860px) {
    .chat {
        grid-template-columns: 1fr;
    }

    .chat-side {
        position: static;
        max-height: 260px;
    }

    .online-chip .online-label {
        display: none;
    }
}

/* Links (A14): cards in their groups, each with a line glyph on a coloured square. A web card opens as a whole (its
   name's link covers the card); the others are text to copy. The editor is one row of fields per link. */
.links-tools {
    max-width: 360px;
    margin-bottom: 14px;
}

.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 10px;
    padding: 14px 18px 18px;
}

.links-empty {
    margin: 0;
    padding: 16px 18px;
}

.link-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    background: var(--panel-dark);
    border: 1px solid var(--line);
    transition: background 0.15s, border-color 0.15s;
}

.link-card.web:hover {
    background: var(--row-hover);
    border-color: var(--line-strong);
}

.link-card.web .link-name::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Above the web card's link, so they stay clickable */
.link-side {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.link-side .role-badge {
    padding: 2px 6px;
    font-size: 11px;
}

@media (hover: hover) {
    .link-card.web .link-copy {
        opacity: 0;
        transition: opacity 0.15s;
    }

    .link-card.web:hover .link-copy, .link-card.web .link-copy:focus-visible {
        opacity: 1;
    }
}

.link-glyph {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #3e9a6a;
    border-radius: 4px;
}

.link-glyph.chat { background: #5b63d3; }
.link-glyph.tracker { background: #2f74c0; }
.link-glyph.code { background: #4d5259; }
.link-glyph.video { background: #b8392e; }
.link-glyph.files { background: #b98a2e; }
.link-glyph.depot { background: #6c7685; }
.link-glyph.server { background: #2a8483; }
.link-glyph.docs { background: #8a63b8; }

.gi.link {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gi.link .solid {
    fill: #fff;
    stroke: none;
}

.gi.link .dots {
    stroke-width: 2.6;
}

.link-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.link-name {
    overflow: hidden;
    color: var(--text);
    font: 700 15px var(--display);
    letter-spacing: 0.02em;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-card.web:hover .link-name {
    color: var(--green-hover);
}

.link-card .link-name:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.link-description {
    color: var(--soft);
    font-size: 13px;
}

.link-address {
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Text to copy is the point of its card: shown whole */
.link-card:not(.web) .link-address {
    color: var(--soft);
    white-space: normal;
    overflow-wrap: anywhere;
    user-select: all;
}

.links-save {
    margin: 0 0 14px;
}

.link-edit-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--row-line);
}

.link-edit-row:first-child {
    border-top: 0;
}

.link-order {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.link-order .btn {
    padding: 0 8px;
    line-height: 1.4;
}

.link-fields {
    display: grid;
    flex: 1;
    grid-template-columns: 1fr 1.5fr 1.5fr 1fr 1fr 1fr;
    gap: 8px;
    min-width: 0;
}

.link-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    color: var(--muted);
    font-size: 12px;
}

.link-field input[type="text"], .link-field select {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    font-size: 13.5px;
}

@media (max-width: 1280px) {
    .link-fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .links-grid {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .link-edit-row {
        flex-wrap: wrap;
        padding: 12px;
    }

    .link-fields {
        flex-basis: 100%;
        order: 3;
        grid-template-columns: 1fr;
    }
}