/* Hermes Fleet Overview V1 */
.hermes-fleet-overview {
    --fleet-grid: minmax(230px, 2.2fr) minmax(112px, .9fr) minmax(92px, .72fr) minmax(80px, .62fr) minmax(88px, .68fr) minmax(136px, 1fr) 34px;
    padding-bottom: 38px;
}

.fleet-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--line, rgba(255,255,255,.09));
}
.fleet-intro > div:first-child { min-width: 0; }
.fleet-intro small,
.fleet-detail-heading,
.fleet-community-details > summary {
    color: rgba(var(--accent-rgb), .72);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.fleet-intro h2 {
    margin: 4px 0 0;
    color: #d7dddf;
    font-size: var(--text-section, 19px);
    font-weight: 560;
}
.fleet-intro p {
    margin: 5px 0 0;
    color: #7f8a90;
    font-size: var(--text-small, 12px);
}

.fleet-source-note {
    display: flex;
    gap: 14px;
    flex: 0 0 auto;
    color: #718087;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.fleet-source-note span:first-child { color: rgba(var(--accent-rgb), .72); }
.fleet-source-note.stale span:first-child { color: #c19f6d; }

.fleet-table {
    border-top: 1px solid var(--line, rgba(255,255,255,.09));
    border-left: 1px solid var(--line, rgba(255,255,255,.09));
    border-right: 1px solid var(--line, rgba(255,255,255,.09));
    background: rgba(255,255,255,.008);
}
.fleet-table-header,
.fleet-row {
    display: grid;
    grid-template-columns: var(--fleet-grid);
    align-items: center;
}
.fleet-table-header {
    min-height: 32px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line, rgba(255,255,255,.09));
    background: rgba(255,255,255,.018);
    color: #69757b;
    font-size: 9px;
    letter-spacing: .1em;
}

.fleet-server-wrap { border-bottom: 1px solid var(--line, rgba(255,255,255,.09)); }
.fleet-row {
    width: 100%;
    min-height: 72px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease;
}
.fleet-row:hover,
.fleet-row:focus-visible,
.fleet-row[aria-expanded="true"] {
    background: rgba(var(--accent-rgb), .035);
}
.fleet-row:focus-visible { outline: 1px solid rgba(var(--accent-rgb), .4); outline-offset: -1px; }

.fleet-cell { min-width: 0; padding-right: 12px; }
.fleet-cell strong { display: block; color: #cbd2d5; font-size: 12px; font-weight: 540; }
.fleet-mobile-label { display: none; }
.fleet-server {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    min-height: 72px;
    padding-left: 78px;
    overflow: hidden;
}
.fleet-server-art {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 64px;
    height: auto;
    max-width: none;
    opacity: .43;
    filter: grayscale(1) saturate(.20) brightness(.58);
    pointer-events: none;
    transition: opacity .22s ease, filter .22s ease, transform .22s ease;
}
.fleet-row:hover .fleet-server-art,
.fleet-row:focus-visible .fleet-server-art {
    opacity: .70;
    filter: grayscale(.72) saturate(.55) brightness(.76);
}
.fleet-row[aria-expanded="true"] .fleet-server-art {
    opacity: 1;
    filter: none;
}
.fleet-server-copy {
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
}
.fleet-server .fleet-name {
    overflow: hidden;
    color: var(--accent, #7eddd5);
    font-size: 14px;
    font-weight: 560;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fleet-server .fleet-instance {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #657178;
    font-size: 9px;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fleet-state {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    font-size: 10px !important;
    letter-spacing: .06em;
}
.fleet-state::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent, #7eddd5);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .08);
}
.fleet-state.offline { color: #c88b8b; }
.fleet-state.offline::before { background: #ba7373; box-shadow: none; }
.fleet-state.stale { color: #bea16f; }
.fleet-state.stale::before { background: #b6965f; box-shadow: none; }
.fleet-chevron {
    justify-self: end;
    width: 24px;
    color: rgba(var(--accent-rgb), .7);
    font-size: 16px;
    font-weight: 300;
    text-align: center;
}

.fleet-detail-panel {
    padding: 18px 20px 20px;
    border-top: 1px solid rgba(var(--accent-rgb), .13);
    background: rgba(0,0,0,.14);
}
.fleet-detail-section + .fleet-detail-section { margin-top: 18px; }
.fleet-detail-heading { display: block; margin-bottom: 9px; }
.fleet-player-list { display: flex; flex-wrap: wrap; gap: 6px; }
.fleet-player,
.fleet-mod {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 8px;
    border: 1px solid var(--line, rgba(255,255,255,.09));
    background: rgba(255,255,255,.018);
    color: #abb5ba;
    font-size: 10px;
}
.fleet-player.unregistered { color: #7f8a90; }
.fleet-muted,
.fleet-community-empty { color: #68757b; font-size: 11px; }

.fleet-detail-grid,
.fleet-community-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    border-top: 1px solid var(--line, rgba(255,255,255,.09));
    border-left: 1px solid var(--line, rgba(255,255,255,.09));
}
.fleet-detail-metric {
    min-height: 68px;
    padding: 11px 12px;
    border-right: 1px solid var(--line, rgba(255,255,255,.09));
    border-bottom: 1px solid var(--line, rgba(255,255,255,.09));
    background: rgba(255,255,255,.012);
}
.fleet-detail-metric small {
    display: block;
    color: #67737a;
    font-size: 8px;
    letter-spacing: .09em;
}
.fleet-detail-metric strong {
    display: block;
    margin-top: 7px;
    color: #c8d0d3;
    font-size: 12px;
    font-weight: 540;
}
.fleet-detail-metric span {
    display: block;
    margin-top: 4px;
    color: #68757b;
    font-size: 9px;
}

.fleet-community-details { margin-top: 18px; border-top: 1px solid var(--line, rgba(255,255,255,.09)); }
.fleet-community-details > summary {
    display: flex;
    align-items: center;
    min-height: 40px;
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.fleet-community-details > summary::-webkit-details-marker { display: none; }
.fleet-community-details > summary::before {
    content: "+";
    width: 22px;
    color: rgba(var(--accent-rgb), .72);
    font-size: 15px;
}
.fleet-community-details[open] > summary::before { content: "-"; }
.fleet-community-body { padding: 2px 0 4px 22px; }
.fleet-community-empty { margin: 0; padding: 10px 0 2px; }
.fleet-mod-list { margin-top: 14px; }
.fleet-mod-list > small { color: #67737a; font-size: 8px; letter-spacing: .09em; }
.fleet-mod-list > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }

.fleet-network-history {
    margin: 0 0 16px;
    padding: 12px 14px 14px;
    border: 1px solid var(--line, rgba(255,255,255,.09));
    background: rgba(255,255,255,.008);
}
.fleet-history-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
    margin-bottom: 8px;
}
.fleet-history-copy small {
    display: block;
    color: rgba(var(--accent-rgb), .72);
    font-size: 9px;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.fleet-history-copy strong {
    display: block;
    margin-top: 4px;
    color: #9aa5aa;
    font-size: 11px;
    font-weight: 520;
}
.fleet-network-history .server-history-chart { margin-top: 0; }
.fleet-technical-source { margin-top: 14px; }

@media (max-width: 1100px) {
    .hermes-fleet-overview { --fleet-grid: minmax(200px, 2fr) 100px 88px 76px 82px 120px 30px; }
    .fleet-detail-grid,
    .fleet-community-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}

@media (max-width: 820px) {
    .fleet-intro { display: block; }
    .fleet-source-note { margin-top: 10px; justify-content: space-between; }
    .fleet-table-header { display: none; }
    .fleet-row {
        grid-template-columns: minmax(150px, 1.6fr) 92px 70px 26px;
        grid-template-areas:
            "server state players chevron"
            "server ping uptime chevron"
            "server restart restart chevron";
        gap: 5px 10px;
        min-height: 96px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .fleet-server {
        grid-area: server;
        min-height: 96px;
        padding-left: 72px;
    }
    .fleet-server-art { width: 60px; }
    .fleet-state-cell { grid-area: state; }
    .fleet-players { grid-area: players; }
    .fleet-ping { grid-area: ping; }
    .fleet-uptime { grid-area: uptime; }
    .fleet-restart { grid-area: restart; }
    .fleet-chevron { grid-area: chevron; align-self: center; }
    .fleet-mobile-label { display: block; margin-bottom: 3px; color: #5e6a70; font-size: 7px; letter-spacing: .08em; }
    .fleet-cell strong { font-size: 10px; }
    .fleet-detail-panel { padding: 16px 12px 18px; }
    .fleet-community-body { padding-left: 0; }
}

@media (max-width: 560px) {
    .fleet-source-note { display: block; }
    .fleet-source-note span { display: block; margin-top: 3px; }
    .fleet-row {
        grid-template-columns: 1fr 90px 24px;
        grid-template-areas:
            "server state chevron"
            "players ping chevron"
            "uptime restart chevron";
    }
    .fleet-players { grid-area: players; }
    .fleet-detail-grid,
    .fleet-community-grid { grid-template-columns: 1fr; }
    .fleet-history-heading { display: block; padding: 10px 0; }
    .fleet-history-heading .server-range-controls { margin-top: 8px; }
}