@font-face {
    font-family: Inter;
    src: url('/profile-v3/InterVariable-4.1.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap
}

:root {
    color-scheme: dark;
    --bg: #17181d;
    --panel: #1d1f26;
    --panel2: #20232c;
    --line: #31343e;
    --text: #efeff3;
    --muted: #9da3b1;
    --red: #ed3237;
    --green: #80cfae;
    --blue: #9dbcef;
    font-family: Inter, Arial, sans-serif
}

*:where(:not(.v2-history, .v2-history *)) {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.55
}

/* The v2 history content (#content.v2-history) keeps the legacy base styles, so these element resets skip it. */
:is(button, input, select):where(:not(.v2-history *)) {
    font: inherit
}

a:where(:not(.v2-history *)) {
    color: inherit;
    text-decoration: none
}

/* user.css, loaded alongside the history content, paints every visited link green. The v3 chrome
   around it keeps its own colours: this matches that rule's weight and comes later in the cascade. */
a:visited:where(:not(.v2-history *)) {
    color: inherit
}

button:where(:not(.v2-history *)) {
    cursor: pointer;
    color: inherit
}

button:disabled:where(:not(.v2-history *)) {
    opacity: .5;
    cursor: default
}

:is(a,button,input,select,[tabindex]):focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px
}

:is(h1, h2, h3, p):where(:not(.v2-history *)) {
    margin: 0
}

/* user.css is loaded for the history content; stop its global element rules from restyling the v3 header, hero and footer. */
a[target="_blank"]:where(:not(.v2-history *))::after {
    content: none
}

button:where(:not(.v2-history *)) {
    margin: 0;
    box-shadow: none;
    transition: none
}

/* Match the v2 page: legacy base type, and a container sized against the full viewport instead of the v3 column. */
#profile-search :is(select, button) {
    border-radius: 0
}

#content.v2-history {
    color-scheme: normal;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: normal;
    color: var(--color-text)
}

body:has(#content.v2-history) {
    overflow-x: clip
}

/* The history content is wider than the v3 column, so the sticky profile nav paints its background across the viewport. */
body:has(#content.v2-history) .profile-nav {
    box-shadow: 0 0 0 100vmax var(--bg);
    clip-path: inset(0 -100vmax)
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

[hidden] {
    display: none !important
}

.site-header {
    height: 70px;
    padding: 0 max(28px, calc((100vw - 1380px) / 2));
    display: flex;
    align-items: center;
    gap: 32px;
    border-bottom: 1px solid #292b32;
    background: #17181d
}

.brand img {
    display: block
}

.site-links {
    margin-left: auto;
    display: flex;
    gap: 30px;
    align-items: center;
    color: inherit;
    font-size: 16px;
    white-space: nowrap
}

.site-links a {
    color: inherit;
    text-decoration: none
}

.site-links .discord-link {
    display: flex;
    align-items: center;
    gap: 5px
}

.site-links .discord-link img {
    display: block
}

.site-links a:hover {
    text-decoration: underline
}

.site-links a:last-child, .site-links .pill-link {
    font-weight: 600;
    background: var(--red);
    padding: 10px 40px;
    border-radius: 50px;
    color: white;
    box-shadow: 0 0 22px -6px var(--red);
    transition: background .1s
}

.site-links a:last-child:hover, .site-links .pill-link:hover {
    background: #d12d32;
    text-decoration: none
}

.account-menu {
    position: relative
}

.account-menu__trigger {
    border: none
}

.account-menu__trigger[aria-expanded="true"] {
    background: #d12d32
}

.account-menu__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    padding: 6px;
    z-index: 1000
}

.account-menu__item {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap
}

.account-menu__item:hover {
    background: var(--line)
}

#profile-search {
    display: flex;
    align-items: stretch;
    min-width: 380px;
    width: min(480px, 38vw);
    height: 36px;
    border: 1px solid #3a3d49;
    border-radius: 8px;
    background: #20232a;
    overflow: hidden
}

#profile-search:focus-within {
    border-color: #8291aa
}

#profile-search select, #profile-search input, #profile-search button {
    border: 0;
    background: transparent;
    color: var(--text);
    height: 100%;
    outline: 0
}

#profile-search select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-indent: 1px;
    text-overflow: '';
    cursor: pointer;
    padding: 0 8px;
    font-size: 11px;
    color: #cad0dc;
    border-right: 1px solid #3a3d49
}

#profile-search select option {
    background-color: #20232a;
    color: #cad0dc
}

#profile-search .search-name {
    flex: 1;
    min-width: 0
}

#profile-search input {
    padding: 0 10px;
    width: 100%;
    font-size: 12px
}

#profile-search button {
    font-size: 22px;
    padding: 0 12px;
    color: #b6c5df
}

.page {
    max-width: 1380px;
    margin: auto;
    padding: 42px 28px 70px
}

.hero {
    display: flex;
    align-items: flex-start;
    gap: 21px;
    min-height: 135px
}

.avatar {
    position: relative;
    flex: none;
    width: 78px;
    height: 78px;
    margin-top: 2px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #ef5959, #9b262e);
    box-shadow: inset 0 0 0 1px #ff8b7b66;
    color: #fff0e9;
    font-size: 35px;
    font-weight: 700
}

.premium-profile .avatar {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px #d1ac6860, inset 0 0 0 1px #ff8b7b66
}

.hero-copy {
    min-width: 0;
    flex: 1
}

.name-line {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap
}

.name-line h1 {
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -1.25px;
    overflow-wrap: anywhere
}

.tag {
    font-weight: 400;
    color: #9da3b1
}

.identity-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    color: #b1b6c3;
    font-size: 12px;
    flex-wrap: wrap
}

.badge, .supporter-badge {
    padding: 3px 7px;
    border: 1px solid #4a4f5d;
    border-radius: 5px;
    color: #d3d8e3;
    font-size: 10px
}

a.supporter-badge, .supporter-badge {
    background: #b28c4f16;
    border-color: #b28c4f55;
    color: #e1c58d
}

a.supporter-badge:hover {
    background: #b28c4f2a;
    border-color: #b28c4f80;
    color: #f0d5a3
}

.profile-credit {
    margin-top: 12px;
    max-width: 610px
}

.credit-main {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: #d0c9ce;
    font-size: 12px;
    line-height: 1.6
}

.credit-main > .icon {
    width: 14px;
    height: 14px;
    margin-top: 2px;
    color: #e79ca8;
    flex-shrink: 0
}

.profile-credit a {
    color: #e7abb8;
    text-decoration: underline;
    text-decoration-color: #e7abb850;
    text-underline-offset: 3px
}

.profile-credit a:hover {
    color: #ffd2db;
    text-decoration-color: currentColor
}

.credit-sub {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.6;
    margin: 3px 0 0 21px
}

.profile-credit-premium .credit-main {
    color: #e1cdac
}

.profile-credit-premium .credit-main > .icon {
    color: #e1bd7f;
    fill: #e1bd7f18
}

.profile-credit-premium a {
    color: #d4bd95;
    text-decoration-color: #d4bd9550
}

.profile-credit-premium a:hover {
    color: #f5dfba
}

.hero-actions {
    display: flex;
    align-items: start;
    gap: 9px;
    flex: none
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    background: transparent;
    border: 1px solid #484c59;
    border-radius: 8px;
    color: #e5e6ea;
    font-size: 12px;
    white-space: nowrap
}

.button:hover {
    background: #ffffff0b;
    border-color: #828999
}

.button.primary {
    background: var(--red);
    border-color: var(--red);
    color: white
}

.button.primary:hover {
    background: #c52d33
}

.button .icon {
    width: 14px;
    height: 14px;
    flex: none
}

.profile-nav {
    display: flex;
    gap: 0;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 12;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    overflow-x: auto;
    scrollbar-width: thin
}

.profile-nav a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 8px;
    border-bottom: 3px solid transparent;
    color: #b5bac7;
    font-size: 12px;
    white-space: nowrap
}

.profile-nav a:first-child {
    padding-left: 0
}

.profile-nav a:last-child {
    padding-right: 0
}

.profile-nav .icon {
    width: 15px;
    height: 15px;
    flex: none
}

.profile-nav a:hover {
    color: white;
    background: #ffffff05
}

.profile-nav a.active {
    border-color: var(--red);
    color: white
}

.coverage {
    min-height: 33px;
    padding: 14px 0;
    color: var(--muted);
    font-size: 11px
}

.coverage strong {
    color: #d3d6df;
    font-weight: 500
}

.coverage .sep {
    margin: 0 10px;
    opacity: .5
}

.source {
    margin: -4px 0 23px;
    font-size: 11px;
    color: #c5cad7
}

.source summary {
    cursor: pointer;
    width: fit-content
}

.source summary span {
    color: var(--muted);
    margin-left: 8px
}

.source-body {
    background: #1d2028;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-top: 15px;
    padding: 22px
}

.source-body > p {
    max-width: 920px;
    line-height: 1.9;
    color: var(--muted);
    margin: 0
}

.source-facts {
    margin: 4px 0 0
}

.source-facts > div {
    padding: 15px 0 0
}

.local-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: -2px 0 20px;
    font-size: 11px;
    color: #9fabc1
}

.local-nav a:hover {
    color: #e0e7f5
}

.update-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px
}

.update-action #update-age {
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap
}

.section-lead {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin: 24px 0 22px
}

.section-lead .kicker, .kicker {
    font-size: 10px;
    color: #d69aa3;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 650
}

.section-lead h2 {
    font-size: 31px;
    line-height: 1.25;
    letter-spacing: -.8px;
    font-weight: 580;
    margin: 6px 0
}

.section-lead p {
    font-size: 12px;
    color: var(--muted)
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 15px;
    margin-bottom: 22px;
    overflow: hidden;
    scroll-margin-top: 70px
}

.panel-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
    padding: 22px 24px 15px
}

.panel-head h3 {
    font-size: 18px;
    letter-spacing: -.35px;
    font-weight: 570
}

.panel-head p {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px
}

.panel-body {
    padding: 4px 24px 23px
}

.stats {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px
}

.stat {
    position: relative;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: 21px 23px;
    min-height: 110px
}

.stat-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #b2b6c3
}

.stat-label .icon {
    width: 15px;
    height: 15px;
    flex: none;
    color: #7f8697
}

.stat-value {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -1.25px;
    line-height: 1.2;
    margin: 7px 0 4px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere
}

.stat-value .unit {
    font-size: 19px;
    color: var(--muted);
    font-weight: 400;
    margin-left: 3px
}

.stat-note {
    font-size: 11px;
    color: var(--muted)
}

.two-col {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 22px
}

.two-col > * {
    min-width: 0
}

.fact-grid {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 0 22px
}

.fact-grid > div {
    padding: 14px 0;
    border-top: 1px solid #ffffff0c
}

.fact-grid dt {
    font-size: 10px;
    color: var(--muted)
}

.fact-grid dd {
    margin: 5px 0 0;
    font-size: 15px;
    font-weight: 510;
    overflow-wrap: anywhere
}

.fact-grid .wide {
    grid-column: span 2
}

.note {
    font-size: 11px;
    color: var(--muted);
    padding: 0 24px 22px;
    line-height: 1.8
}

.toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 4px 24px 18px
}

.toolbar .search {
    min-width: 230px;
    flex: 1
}

.toolbar input, .toolbar select, .toolbar button:not(.segment) {
    border: 1px solid #454a57;
    border-radius: 7px;
    background: #15171e;
    color: var(--text);
    padding: 8px 10px;
    font-size: 11px
}

.toolbar select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23aeb6c4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 6px
}

.toolbar label {
    display: flex;
    gap: 7px;
    align-items: center;
    color: var(--muted);
    font-size: 11px
}

.toolbar input[type=range] {
    accent-color: #c2d5ed;
    min-width: 200px
}

.toolbar .count {
    font-size: 10px;
    color: var(--muted)
}

.segmented {
    display: flex;
    gap: 4px;
    flex-wrap: wrap
}

.segment {
    border: 1px solid #454a57;
    background: #242730;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 11px
}

.segment[aria-pressed=true] {
    border-color: #8b96aa;
    background: #343b49;
    color: white
}

.segment[data-tone=positive] {
    background: #79c69b0d;
    border-color: #79c69b33
}

.segment[data-tone=negative] {
    background: #df89960d;
    border-color: #df899633
}

.segment[data-tone=positive][aria-pressed=true] {
    background: #79c69b24
}

.segment[data-tone=negative][aria-pressed=true] {
    background: #df899624
}

.table-scroll {
    overflow: auto;
    max-width: 100%;
    scrollbar-width: auto;
    scrollbar-color: #596174 #161820
}

/* Chrome ignores ::-webkit-scrollbar sizing when scrollbar-color is set, so the width lives with the colours. */
@supports selector(::-webkit-scrollbar) {
    .table-scroll {
        scrollbar-color: auto
    }

    .table-scroll::-webkit-scrollbar {
        width: 1rem;
        height: 1rem
    }

    .table-scroll::-webkit-scrollbar-track {
        background: #ffffff11
    }

    .table-scroll::-webkit-scrollbar-thumb {
        background: #596174;
        border-radius: .5rem
    }

    .table-scroll::-webkit-scrollbar-thumb:hover {
        background: #6f7a90
    }
}

.table-scroll.scrolling {
    overflow: auto;
    scrollbar-gutter: stable
}

/* A table builds its rows when it scrolls into view. Until then it reserves about the height it will take. */
.table-scroll.pending {
    min-height: var(--pending-table-height, 620px)
}

.table-scroll.scrolling thead th {
    position: sticky;
    top: 0;
    z-index: 3
}

.table-scroll.scrolling thead th:first-child {
    z-index: 4
}

.data-table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
    font-size: 11px;
    font-variant-numeric: tabular-nums
}

.data-table th, .data-table td {
    padding: 5px 6.5px;
    border-bottom: 1px solid #ffffff0b;
    vertical-align: middle;
    text-align: right;
    min-width: 70px
}

.data-table th:first-child, .data-table td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: #20232b;
    z-index: 1;
    min-width: 160px
}

.data-table thead th {
    position: sticky;
    top: 0;
    padding: 5px 8px;
    background: #262933;
    color: #cbd1dd;
    font-size: 10px;
    font-weight: 500;
    white-space: normal;
    z-index: 1
}

.data-table thead th:first-child {
    z-index: 2;
    background: #262933
}

.data-table th button {
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    line-height: 1.45;
    text-align: right
}

.data-table th:first-child button {
    text-align: left
}

.data-table th button:hover {
    color: white
}

.data-table td a {
    color: #b3cafa;
    text-decoration: underline;
    text-underline-offset: 2px
}

.data-table td img {
    width: 25px;
    height: 25px;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 5px;
    border-radius: 4px
}

.data-table tbody tr:hover td {
    background: #ffffff08
}

.data-table tbody tr:hover td:first-child {
    background: #292d36
}

.data-table .baseline td {
    color: #bbc5d5;
    background: #222632
}

.data-table .detail-row td {
    position: static !important;
    padding: 0;
    text-align: left;
    background: #151820 !important
}

.detail-grid {
    position: sticky;
    left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 6px;
    padding: 6px;
    box-sizing: border-box;
    width: var(--detail-width, 100%);
    max-width: var(--detail-width, 100%)
}

.detail-grid div {
    border-bottom: 1px solid #ffffff10;
    padding: 4px
}

.detail-grid span {
    display: block;
    color: var(--muted);
    font-size: 10px
}

.data-table .when {
    display: block
}

.data-table .when .when-ago {
    display: block;
    color: var(--muted);
    font-size: 10px
}

.detail-grid strong {
    font-weight: 520
}

.bar-value {
    display: block;
    min-width: 50px;
    white-space: nowrap
}

.bar-track {
    display: block;
    height: 4px;
    margin-top: 5px;
    border-radius: 3px;
    background: #ffffff10;
    position: relative;
    overflow: hidden
}

.bar-track::before {
    content: '';
    position: absolute;
    left: var(--start, 0);
    width: var(--width, 0);
    height: 100%;
    background: var(--bar, #9cc8ed);
    border-radius: 3px
}

.bar-pair {
    display: flex;
    gap: 8px;
    align-items: center
}

.bar-pair > span {
    min-width: 63px
}

.bar-pair small {
    color: var(--muted)
}

.table-page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 23px;
    font-size: 10px;
    color: var(--muted);
    gap: 12px
}

.table-page button {
    padding: 5px 10px;
    border: 1px solid #414653;
    border-radius: 5px;
    background: #252a34
}

.table-page button:disabled {
    opacity: .3
}

.chart {
    width: 100%;
    height: 290px;
    display: block
}

.chart text {
    fill: #aeb6c5;
    font: 10px Inter, Arial, sans-serif
}

.chart .grid {
    stroke: #ffffff13
}

.chart .bar-win {
    fill: #8bcfad
}

.chart .bar-loss {
    fill: #dd8b9d
}

.chart .bar-other {
    fill: #9eb9eb
}

.chart .line {
    fill: none;
    stroke: #b6c7ea;
    stroke-width: 2
}

/* Bands meet edge to edge, as they did in v2: no outline between neighbouring shares. */
.chart .band {
    stroke: none
}

/* Hovering a legend entry brings its own marks forward and holds the rest back. */
.chart .mark-strong {
    filter: brightness(1.3)
}

.chart polyline.mark-strong {
    stroke-width: 3.5
}

.chart circle.mark-strong {
    r: 4
}

.chart .mark-faint {
    opacity: .75
}

.chart-caption {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 0 24px 17px;
    color: var(--muted);
    font-size: 10px
}

.chart-caption b {
    font-weight: 500;
    color: #d5dce8
}

.chart-note {
    padding: 12px 24px 20px;
    color: #b5becd;
    font-size: 10px
}

.heat-scroll {
    overflow: auto;
    padding: 0 24px 20px
}

.heat-grid {
    display: grid;
    grid-template-columns:75px repeat(var(--cols), minmax(24px, 1fr));
    gap: 3px;
    min-width: max-content
}

.heat-grid span {
    font-size: 9px;
    color: var(--muted);
    display: grid;
    place-items: center;
    min-height: 24px
}

.heat-grid .rowlabel {
    justify-content: start
}

.heat-cell {
    min-width: 24px;
    min-height: 25px;
    border: 1px solid #ffffff0c;
    border-radius: 3px;
    font-size: 9px;
    color: #e9edf5;
    white-space: nowrap
}

.heat-cell:hover {
    outline: 1px solid #d4e2f5;
    z-index: 1
}

.heat-caption {
    padding: 0 24px 20px;
    color: var(--muted);
    font-size: 10px
}

.cal-grid {
    grid-template-columns:55px repeat(var(--cols), minmax(11px, 1fr));
    gap: 2px
}

.cal-grid .heat-cell {
    min-width: 11px;
    min-height: 14px;
    padding: 0
}

.cal-grid span {
    min-height: 14px
}

.map-layout {
    display: grid;
    grid-template-columns:minmax(400px, 1fr) minmax(300px, .8fr);
    gap: 24px;
    padding: 0 24px 22px
}

.map-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: #101318;
    border-radius: 11px;
    overflow: hidden
}

.map-canvas img, .map-canvas canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.map-canvas canvas {
    opacity: .95
}

.map-controls {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.map-controls label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 11px;
    color: var(--muted)
}

.map-controls select {
    border: 1px solid #454a57;
    border-radius: 7px;
    background: #15171e;
    color: var(--text);
    padding: 8px 10px
}

.map-controls input[type=range] {
    width: 100%;
    accent-color: #b8c7df
}

.map-total {
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 12px
}

.map-total strong {
    font-size: 27px;
    display: block
}

.map-bin {
    padding: 0 24px 22px
}

.map-bin details summary {
    cursor: pointer;
    color: #c3d2e9;
    font-size: 11px
}

.network-wrap {
    padding: 0 24px 24px
}

.network-svg {
    display: block;
    width: 100%;
    height: 340px;
    background: #191c23;
    border: 1px solid #343845;
    border-radius: 10px
}

.network-svg text {
    fill: #cbd4e2;
    font: 10px Inter, Arial, sans-serif
}

.network-svg circle {
    cursor: pointer
}

.network-detail {
    padding: 12px 0;
    color: #cbd3e0;
    font-size: 11px
}

.network-list {
    max-height: 230px;
    overflow: auto;
    font-size: 11px;
    color: #abb4c4
}

.network-list li {
    padding: 3px 0
}

.footer {
    margin-top: 48px;
    border-top: 1px solid var(--line)
}

.footer-support {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    padding: 27px 0;
    border-bottom: 1px solid var(--line)
}

.footer-support h2 {
    font-size: 16px;
    font-weight: 550
}

.footer-support p {
    font-size: 11px;
    color: var(--muted);
    margin-top: 5px
}

.footer-legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 22px 0
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #bfc3ce;
    font-size: 11px
}

.footer-legal nav {
    display: flex;
    gap: 22px;
    font-size: 11px;
    color: #bfc3ce
}

.footer a:hover {
    text-decoration: underline
}

.disclaimer {
    color: var(--muted);
    font-size: 10px;
    max-width: 990px;
    line-height: 1.8
}

.loading, .error {
    padding: 45px 23px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--muted)
}

.error {
    color: #e3a4ad
}

@media (max-width: 1150px) {
    .site-header {
        gap: 16px
    }

    .site-links {
        gap: 13px
    }

    .stats {
        grid-template-columns:repeat(2, 1fr)
    }

    .fact-grid {
        grid-template-columns:repeat(2, 1fr)
    }

    .map-layout {
        grid-template-columns:1fr
    }

    .map-canvas {
        max-width: 650px
    }
}

@media (max-width: 800px) {
    .site-header {
        height: auto;
        padding: 12px 18px;
        flex-wrap: wrap
    }

    .site-links {
        order: 3;
        width: 100%;
        justify-content: space-between
    }

    .site-links a:last-child, .site-links .pill-link {
        padding: 4px 12px
    }

    #profile-search {
        flex: 1;
        min-width: 220px;
        width: auto
    }

    .page {
        padding: 25px 16px 45px
    }

    .hero {
        flex-wrap: wrap
    }

    .hero-actions {
        width: 100%;
        margin-left: 98px
    }

    .name-line h1 {
        font-size: 27px
    }

    .profile-nav {
        top: 0;
        justify-content: flex-start;
        gap: 14px
    }

    .profile-nav a:last-child {
        padding-right: 8px
    }

    .two-col, .table-section-row {
        grid-template-columns:1fr
    }

    .footer-support, .footer-legal {
        flex-wrap: wrap
    }

    .chart {
        height: 230px
    }
}

@media (max-width: 540px) {
    .stats {
        grid-template-columns:1fr 1fr
    }

    .stat {
        padding: 14px
    }

    .stat-value {
        font-size: 23px
    }

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

    .map-layout {
        padding: 0 12px 15px
    }

    .map-canvas {
        min-width: 0
    }

    .hero-actions {
        margin-left: 0
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto
    }
}

.stat-value--compact {
    font-size: clamp(20px, 2vw, 26px);
    letter-spacing: -.4px
}

.panel-head {
    align-items: flex-start
}

.panel-kicker {
    display: block;
    margin-bottom: 7px;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 650;
    color: #e0636a
}

.panel-aside {
    flex: none;
    color: var(--muted);
    font-size: 10px
}

.two-col {
    margin-bottom: 22px
}

.two-col > .panel {
    margin-bottom: 0
}

.two-col .fact-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr))
}

.section-divider {
    margin: 46px 0 22px
}

.section-divider h2 {
    font-size: 28px;
    letter-spacing: -.7px;
    font-weight: 580
}

.section-divider p {
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted)
}

#at-a-glance {
    scroll-margin-top: 70px
}

.empty-state {
    padding: 6px 24px 24px;
    font-size: 12px
}

.chart {
    height: auto;
    padding: 0 12px
}

.chart text {
    fill: #9fa8b8;
    font-size: 11px
}

.chart .axis-title {
    fill: #8a93a3;
    font-size: 11px
}

.chart .marker {
    stroke: #c8cedb;
    stroke-opacity: .5;
    stroke-dasharray: 4 5
}

.chart .marker-label {
    fill: #c3cad6;
    font-size: 11px
}

.chart .hover-zone {
    fill: transparent
}

.chart .hover-zone:hover {
    fill: #ffffff08
}

.chart-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 4px 24px 6px
}

.legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 10px;
    color: #c3c9d5
}

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

.legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--swatch)
}

.legend i.line {
    width: 14px;
    height: 3px;
    border-radius: 2px
}

/* On a plotted chart the legend is also the series switch, so its entries are buttons. */
.legend-toggle .legend-item {
    display: inline-flex;
    align-items: center;
    padding: 2px 4px;
    border: 0;
    border-radius: 5px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer
}

.legend-toggle .legend-item:hover {
    background: #ffffff0f;
    color: white
}

.legend-toggle .legend-item[aria-pressed=false] {
    color: var(--muted);
    text-decoration: line-through
}

.legend-toggle .legend-item[aria-pressed=false] i {
    background: none;
    box-shadow: inset 0 0 0 1.5px var(--swatch)
}

/* The swatch carries the only gap, so the value reads as part of the name: "Lulu: 354". */
.legend-toggle .legend-item i {
    margin-right: 6px
}

/* The hovered period heads the legend row, and each entry carries that period's value. */
.legend-toggle .readout-period {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums
}

.legend-toggle .legend-value {
    color: #eef1f7;
    font-variant-numeric: tabular-nums;
    white-space: pre
}

.legend-toggle .legend-item[aria-pressed=false] .legend-value {
    display: none
}

.axis-note {
    font-size: 10px;
    color: var(--muted)
}

.chart-readout, .grid-readout {
    margin: 0;
    font-size: 11px;
    color: #c9d0dc;
    font-variant-numeric: tabular-nums
}

/* The visible readout lives in the legend; this copy exists for screen readers. */
.chart-readout {
    padding: 0
}

.chart-note {
    padding: 0 24px 16px;
    color: var(--muted);
    font-size: 10px;
    margin: 0
}

.exact-data {
    border-top: 1px solid var(--line)
}

.exact-data > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 24px;
    font-size: 11px;
    color: #d3d8e2
}

.exact-data > summary::-webkit-details-marker {
    display: none
}

.exact-data > summary::after {
    content: '+';
    color: var(--muted);
    font-size: 14px
}

.exact-data[open] > summary::after {
    content: '–'
}

.exact-data > summary:hover {
    background: #ffffff05
}

.exact-data > .note {
    padding: 0 24px 18px
}

.exact-body {
    padding-bottom: 8px
}

.exact-data.map-bin {
    padding: 0
}

.grid-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 24px 18px;
    font-size: 10px;
    color: var(--muted)
}

.grid-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap
}

.grid-legend .scale {
    display: flex;
    align-items: center;
    gap: 6px
}

.ramp {
    display: inline-block;
    width: 80px;
    height: 5px;
    border-radius: 3px
}

.ramp-count {
    background: linear-gradient(90deg, rgba(152, 205, 255, .1), rgba(152, 205, 255, .96))
}

.ramp-rate {
    background: linear-gradient(90deg, rgb(230, 121, 143), rgb(69, 75, 86), rgb(112, 206, 174))
}

.swatch-empty {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 5px;
    border: 1px solid #ffffff30;
    border-radius: 2px;
    background: #14161d;
    vertical-align: -1px
}

.heat-scroll {
    padding-bottom: 4px
}

.heat-grid .collabel {
    justify-content: start;
    white-space: nowrap;
    overflow: visible;
    font-size: 9px;
    letter-spacing: .04em
}

.heat-cell {
    padding: 0
}

.heat-cell:focus-visible {
    outline-offset: 1px
}

.cal-grid {
    grid-template-columns:34px repeat(var(--cols), minmax(0, 1fr));
    gap: 3px;
    min-width: 640px
}

.cal-grid .heat-cell {
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    border-radius: 3px
}

.cal-grid span {
    min-height: 0
}

.heat-cell.outside {
    background: transparent;
    border-color: transparent
}

.dense-grid {
    grid-template-columns:44px repeat(var(--cols), minmax(0, 1fr));
    gap: 2px;
    min-width: 720px
}

.dense-grid .heat-cell {
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1.35;
    border-radius: 2px;
    border-color: #ffffff08
}

.dense-grid span {
    min-height: 0;
    font-size: 9px
}

.dense-grid .rowlabel {
    line-height: 1
}

.calendar-controls {
    gap: 22px
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.control-label {
    font-size: 10px;
    color: var(--muted)
}

.control-split {
    display: flex;
    justify-content: space-between;
    gap: 12px
}

.control-split strong {
    color: #d7dce6;
    font-weight: 500
}

.control-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap
}

.calendar-facts {
    padding-top: 6px
}

.table-note {
    padding: 12px 24px 20px;
    margin: 0
}

.subpanel {
    border-top: 1px solid var(--line)
}

.subpanel-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 18px 24px 12px
}

.subpanel-head h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 560
}

.subpanel-head span {
    font-size: 10px;
    color: var(--muted)
}

.simple-table td {
    min-width: 55px
}

.simple-table tbody th {
    font-weight: 500;
    color: var(--text)
}

.simple-table thead th {
    white-space: nowrap
}

.identity {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0
}

.identity img {
    flex: none;
    margin: 0
}

.identity .portrait {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 0 0 1px #ffffff1c
}

.identity .role-icon {
    width: 20px;
    height: 20px;
    opacity: .85
}

.identity small {
    display: block;
    font-size: 9px;
    color: var(--muted);
    line-height: 1.3
}

.identity-name {
    display: block;
    line-height: 1.35
}

.identity.aggregate .identity-name {
    font-weight: 600
}

.data-table td:first-child .identity {
    white-space: nowrap
}

/* Identity columns other than the first are right-aligned, so the portrait follows the name
   and every image in the column lines up on the same edge regardless of name length. */
.data-table td:not(:first-child) .identity {
    flex-direction: row-reverse
}

.record-groups {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 24px 16px
}

.record-group {
    display: grid;
    grid-template-columns:92px 1fr;
    align-items: center;
    gap: 10px
}

.record-group-label {
    font-size: 10px;
    color: var(--muted)
}

.moments {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 24px 24px
}

.moment {
    display: grid;
    grid-template-columns:34px 1fr auto;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    text-align: left;
    background: #181a21;
    border: 1px solid var(--line);
    border-radius: 11px
}

.moment:hover {
    border-color: #5b6272;
    background: #1b1e26
}

.moment-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #ed323714;
    color: #ec8c91
}

.moment-icon .icon {
    width: 17px;
    height: 17px
}

.moment-copy strong {
    display: block;
    font-size: 13px;
    font-weight: 560
}

.moment-copy small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: var(--muted)
}

.moment-action {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    color: #b7c7e3
}

.moment-value {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.8px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    line-height: 1.1
}

.moment-value small {
    display: block;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--muted)
}

.preview-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 24px 20px;
    font-size: 10px;
    color: var(--muted)
}

.preview-foot a, a.text-link, .text-link {
    color: #b7c7e3;
    font-size: 11px
}

.text-link {
    border: 0;
    background: none;
    padding: 0
}

.preview-foot a:hover, .text-link:hover {
    color: white
}

.big-facts {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 4px 24px 4px
}

.big-facts strong {
    display: block;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.7px
}

.big-facts span {
    font-size: 10px;
    color: var(--muted)
}

.family-control {
    padding: 4px 24px 20px
}

.family-control .control-label {
    margin-right: 4px
}

.network-tools {
    padding: 2px 24px 14px
}

.network-tools label {
    gap: 9px
}

.network-tools input[type=range] {
    min-width: 130px
}

.network-stage {
    padding: 0 24px
}

.network-svg {
    height: auto;
    aspect-ratio: 900/430;
    background: radial-gradient(circle at 50% 50%, #23262f 0, #191c23 70%);
    border: 1px solid #2c303b
}

.network-svg.compact {
    aspect-ratio: 900/400
}

.network-svg line {
    stroke: #a8bacd;
    stroke-opacity: .2;
    transition: stroke-opacity .16s ease, stroke .16s ease
}

.network-node {
    transition: opacity .16s ease
}

/* The wave paints its own timing and the label has nothing to fade between. */
.network-svg line.pulse, .hover-label {
    transition: none
}

/* It only exists while the pointer is on a node, so it wears the hover colour outright: the rule
   that whitens a node's own label cannot reach it, since it is a sibling of the nodes, not a child. */
.network-svg .hover-label {
    fill: #fff
}

.hover-label.is-off {
    display: none
}

@media (prefers-reduced-motion: reduce) {
    .network-svg line, .network-node {
        transition: none
    }
}

.network-svg line.direct {
    stroke-opacity: .42
}

/* The graph area is a zoom target: drag a box across it. */
.network-stage svg {
    cursor: crosshair
}

.network-svg .zoom-band {
    fill: #9dbcef1c;
    stroke: #9dbcef;
    stroke-width: 1;
    stroke-dasharray: 4 3;
    pointer-events: none
}

.network-node {
    cursor: pointer
}

.network-node circle {
    fill: #28303b;
    stroke: #8fa6bd;
    stroke-width: 1.5
}

.network-node.owner circle {
    fill: #3a2328;
    stroke: #e0707a
}

.network-node.selected circle {
    fill: #253830;
    stroke: #86d1ad;
    stroke-width: 2.5
}

.network-node:hover circle, .network-node:focus-visible circle {
    stroke: white
}

.network-node:focus-visible {
    outline: none
}

/* The champion portrait sits inside the node, clipped to the circle and held back so the
   initials and the node's own outline stay the things you read first. */
.network-node .portrait {
    clip-path: circle(46%);
    opacity: .55;
    pointer-events: none
}

.network-node.selected .portrait, .network-node:hover .portrait, .network-node:focus-visible .portrait {
    opacity: .8
}

.network-svg .initials {
    fill: #e6ebf3;
    font: 600 13px Inter, Arial, sans-serif;
    paint-order: stroke;
    stroke: #10131a;
    stroke-width: 2.5px;
    stroke-linejoin: round
}

.network-svg .node-label {
    fill: #b9c3d2;
    font: 11px Inter, Arial, sans-serif
}

.network-selected {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 18px 24px;
    border-top: 1px solid var(--line)
}

.network-identity {
    min-width: 200px
}

.network-identity strong {
    display: block;
    font-size: 18px;
    font-weight: 580;
    letter-spacing: -.3px;
    overflow-wrap: anywhere
}

.network-identity small {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: var(--muted)
}

.network-selected dl {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin: 0;
    flex: 1
}

.network-selected dt {
    font-size: 10px;
    color: var(--muted)
}

.network-selected dd {
    margin: 4px 0 0;
    font-size: 17px;
    font-weight: 560;
    font-variant-numeric: tabular-nums
}

a.network-link, .network-link {
    color: #b7c7e3;
    font-size: 11px
}

.network-link:hover {
    color: white
}

.map-canvas canvas {
    opacity: 1
}

.map-hint {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 7px 10px;
    border: 1px solid #ffffff1f;
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: #111318d9;
    color: #d8dde6;
    font-size: 10px;
    pointer-events: none
}

.map-controls small {
    font-size: 10px;
    color: var(--muted);
    line-height: 1.6
}

.density-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: var(--muted)
}

.density-legend i {
    width: 100px;
    height: 5px;
    border-radius: 3px
}

.map-summary {
    border-top: 1px solid var(--line);
    padding-top: 4px
}

.map-summary > div {
    border-top: 0
}

.map-bin .heat-scroll {
    padding-left: 12px;
    padding-right: 12px
}

.map-bin .heat-grid {
    grid-template-columns:48px repeat(var(--cols), 12px);
    gap: 1px
}

.map-bin .heat-grid span {
    font-size: 7px;
    min-height: 12px
}

.map-bin .heat-cell {
    min-width: 12px;
    min-height: 12px;
    border-radius: 2px;
    font-size: 7px;
    padding: 0
}

@media (max-width: 1150px) {
    .big-facts {
        grid-template-columns:1fr 1fr
    }

    .record-group {
        grid-template-columns:1fr
    }
}

@media (max-width: 800px) {
    .two-col {
        gap: 22px
    }

    .network-selected dl {
        gap: 18px
    }
}

.map-canvas img {
    filter: saturate(.3) brightness(.62) contrast(1.05)
}

.simple-table tbody th:first-child, .simple-table td:first-child {
    background: var(--panel)
}

.simple-table tbody tr:hover th:first-child {
    background: #262a33
}

.network-svg.compact .initials {
    font-size: 17px
}

.network-svg.compact .node-label {
    font-size: 15px
}

.toolbar .control-group {
    align-items: flex-start
}

.table-section {
    border-top: 1px solid var(--line);
    padding-top: 16px
}

.table-section + .table-section {
    margin-top: 20px
}

.table-section > .subpanel-head {
    padding: 0 24px 10px
}

.table-section-row {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 22px;
    border-top: 1px solid var(--line);
    padding-top: 16px
}

.table-section-row + .table-section, .table-section + .table-section-row {
    margin-top: 20px
}

.table-section-row > .table-section {
    border-top: 0;
    padding-top: 0;
    margin-top: 0
}

.ramp-gold-rate {
    background: linear-gradient(90deg, #e6798f 0%, #e1a069 15%, #d9dce2 50%, #9bc470 85%, #70ceae 100%)
}

.segment[data-tone=positive] {
    --tint: 123, 198, 157
}

.segment[data-tone=negative] {
    --tint: 223, 137, 150
}

.record-groups .segment:not([data-tone]) {
    --tint: 170, 182, 204
}

.segment[data-tone], .record-groups .segment {
    color: rgba(var(--tint), .78);
    background: rgba(var(--tint), .035);
    border-color: rgba(var(--tint), .2)
}

.segment[data-tone]:hover, .record-groups .segment:hover {
    color: rgb(var(--tint));
    background: rgba(var(--tint), .1);
    border-color: rgba(var(--tint), .4)
}

.segment[data-tone][aria-pressed=true], .record-groups .segment[aria-pressed=true] {
    color: #fff;
    background: rgba(var(--tint), .32);
    border-color: rgb(var(--tint));
    box-shadow: inset 0 0 0 1px rgba(var(--tint), .6), 0 0 0 3px rgba(var(--tint), .12)
}

.data-table thead th[data-sort] {
    cursor: pointer;
    user-select: none
}

.data-table thead th[data-sort]:hover {
    background: #2d313c;
    color: white
}

.network-tools {
    gap: 14px 18px
}

.network-size .network-count {
    min-width: 112px;
    color: var(--muted);
    font-size: 11px
}

.network-size input {
    min-width: 150px
}

.network-svg {
    aspect-ratio: 900/430
}

.network-svg.dense line {
    stroke-opacity: .1
}

.network-svg.dense line.direct {
    stroke: #cfe3f5;
    stroke-opacity: .5
}

/* The selected node keeps its own links lit for as long as it stays selected, tinted like the node
   itself; the rest of the web recedes. Hovering then overrides this for the node under the pointer. */
.network-svg.selecting line:not(.direct):not(.pulse) {
    stroke-opacity: .16
}

.network-svg.selecting line.direct:not(.pulse) {
    stroke: #8fd3b1;
    stroke-opacity: .7
}

/* While a node is hovered, its own links are the only ones drawn at full strength. Placed after the
   dense rules so it also holds back the selected node's links, which carry their own weight above. */
.network-svg.hovering line:not(.touching):not(.pulse) {
    stroke-opacity: .13
}

.network-svg.hovering line.touching:not(.pulse) {
    stroke: #eaf0fa;
    stroke-opacity: .85
}

/* The web is easier to follow when the people it connects come forward with it. */
.network-svg.hovering .network-node.faint {
    opacity: .5
}

/* Selecting a node draws its links outward from it: each one is hidden and then painted by a front
   travelling at a fixed speed, so short and long links are drawn at the same rate. The front is white
   and settles into the resting colour as it lands. Lengths and timings come from the renderer, which
   is what knows how long each line is. */
@keyframes network-edge-draw {
    from {
        stroke-dashoffset: var(--pulse-head);
        stroke: #ffffff
    }

    to {
        stroke-dashoffset: 0;
        stroke: #8fd3b1
    }
}

.network-svg line.pulse {
    stroke-linecap: round;
    stroke-opacity: 1;
    stroke-dasharray: var(--pulse-dash);
    animation: network-edge-draw var(--pulse-time) linear var(--pulse-delay) 1 both;
    pointer-events: none
}

/* The real link stays out of sight until the front has drawn it, then takes over unchanged. */
.network-svg.waving line.direct:not(.pulse) {
    stroke-opacity: 0
}

@media (prefers-reduced-motion: reduce) {
    .network-svg line.pulse {
        display: none
    }

    .network-svg.waving line.direct:not(.pulse) {
        stroke-opacity: .7
    }
}

.network-svg.dense .node-label {
    font-size: 10px
}

.network-svg.dense .initials {
    font-size: 9px
}

.network-node.dim circle {
    opacity: .45
}

.network-node.dim text {
    opacity: .55
}

.network-svg .network-node:is(:hover, :focus-visible) .node-label {
    fill: #fff;
    opacity: 1
}

.network-svg.crowded .node-label {
    font-size: 11px
}

.network-svg.crowded .initials {
    font-size: 11px
}

.combo {
    position: relative;
    display: inline-block
}

.combo input {
    width: 230px
}

.combo-list {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 30;
    width: max(100%, 300px);
    max-height: 320px;
    overflow: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #15171e;
    border: 1px solid #4a505e;
    border-radius: 9px;
    box-shadow: 0 14px 34px #0000008c
}

.combo-list li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 9px;
    border-radius: 6px;
    font-size: 12px;
    color: #d9dee8;
    cursor: pointer;
    white-space: nowrap
}

.combo-list li small {
    font-size: 10px;
    color: var(--muted);
    font-variant-numeric: tabular-nums
}

.combo-list li:hover, .combo-list li[aria-selected=true] {
    background: #2c3442;
    color: white
}

.combo-list li.current {
    box-shadow: inset 2px 0 0 #86d1ad
}

.combo-list mark {
    background: none;
    color: #f0c987;
    font-weight: 600
}

.combo-list .combo-more, .combo-list .combo-empty {
    display: block;
    cursor: default;
    color: var(--muted);
    font-size: 11px
}

.combo-list .combo-more:hover, .combo-list .combo-empty:hover {
    background: none
}

.combo-list .combo-name {
    overflow: hidden;
    text-overflow: ellipsis
}

.data-table tbody tr.data-row {
    cursor: pointer
}

.data-table tbody tr.data-row:focus {
    outline: none
}

.data-table tbody tr.data-row:focus-visible td {
    box-shadow: inset 0 2px 0 #9dbcef, inset 0 -2px 0 #9dbcef
}

.data-table tbody tr.data-row:focus-visible td:first-child {
    box-shadow: inset 2px 2px 0 #9dbcef, inset 0 -2px 0 #9dbcef
}

.data-table tbody tr.data-row[aria-expanded=true] td {
    background: #262b36
}

.data-table tbody tr.data-row[aria-expanded=true] td:first-child {
    background: #2b313d;
    box-shadow: inset 3px 0 0 #9dbcef
}

.data-table td.record-cell {
    min-width: 250px
}

.record {
    display: grid;
    gap: 0
}

.record-top {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 7px;
    font-size: 11px;
    color: #e6e9ef;
    white-space: nowrap
}

.record-top .share {
    color: var(--muted)
}

/* Each surrender rate is tinted like its segment in the bar below it, and sits on that segment's
   side of the game count. The separators belong to the line, not to the values. */
/* The rates keep the room the separator used to take, without the dot itself. */
.record-top .ff {
    color: #cf8fa6;
    margin-right: 12px
}

.record-top .gg {
    color: #8fc9a9;
    margin-left: 12px
}

.record-bar {
    display: grid;
    grid-template-columns:1fr 2px 1fr;
    align-items: center
}

.record-half {
    position: relative;
    height: 15px;
    background: #ffffff0a;
    overflow: hidden
}

.record-half.loss {
    border-radius: 4px 0 0 4px
}

.record-half.win {
    border-radius: 0 4px 4px 0
}

.record-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--size)
}

.loss .record-fill {
    right: 0;
    background: #dd8b9d;
    border-radius: 4px 0 0 4px
}

.win .record-fill {
    left: 0;
    background: #8bcfad;
    border-radius: 0 4px 4px 0
}

/* Games that ended in a surrender, drawn inside their own bar and anchored to the centre divider:
   your team's on the loss side, the enemy's on the win side. */
.record-ff {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: var(--ff);
    background: #9c5068
}

.record-gg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--gg);
    background: #3d8a64
}

.record-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 6px;
    font-size: 9.5px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1
}

.loss .record-label {
    justify-content: flex-start;
    color: #e7a3b1
}

.win .record-label {
    justify-content: flex-end;
    color: #9fdcbd
}

.record-label.on-bar {
    color: #16181e
}

.loss .record-label.on-bar {
    clip-path: inset(0 0 0 calc(100% - var(--size)))
}

/* A surrender count starts at the centre divider and runs back across up to three backgrounds:
   the track, its own bar, then the surrendered segment. One copy is clipped to each. */
.loss .record-label.ff, .win .record-label.gg {
    font-size: 9px
}

.loss .record-label.ff {
    justify-content: flex-end;
    padding-right: 5px;
    color: #cf8fa6
}

.loss .record-label.ff.on-loss {
    color: #16181e;
    clip-path: inset(0 0 0 calc(100% - var(--size)))
}

.loss .record-label.ff.on-ff {
    color: #ffe7ed;
    clip-path: inset(0 0 0 calc(100% - var(--ff)))
}

.win .record-label.gg {
    justify-content: flex-start;
    padding-left: 5px;
    color: #8fc9a9
}

.win .record-label.gg.on-win {
    color: #16181e;
    clip-path: inset(0 calc(100% - var(--size)) 0 0)
}

.win .record-label.gg.on-gg {
    color: #e2f6ea;
    clip-path: inset(0 calc(100% - var(--gg)) 0 0)
}

.win .record-label.on-bar {
    clip-path: inset(0 calc(100% - var(--size)) 0 0)
}

.record-label .pct {
    font-weight: 500;
    opacity: .85
}

.loss .record-label .pct {
    margin-left: 4px
}

.win .record-label .pct {
    margin-right: 4px
}

.record-bar i {
    width: 2px;
    height: 19px;
    background: #f4f6fa;
    border-radius: 1px
}

.data-table thead th.record-head {
    text-align: center;
    min-width: 230px
}

.record-head > button {
    display: block;
    width: 100%;
    text-align: center !important
}

.record-sorts {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 5px
}

.record-sorts button {
    padding: 2px 6px;
    border: 1px solid #ffffff1c !important;
    border-radius: 4px;
    font-size: 9px;
    color: #aeb6c4;
    line-height: 1.3 !important
}

.record-sorts button:hover {
    color: white;
    border-color: #ffffff40 !important
}

.record-sorts button.active {
    color: white;
    background: #ffffff14 !important;
    border-color: #ffffff4d !important
}

.data-table thead th.compound-head {
    text-align: center;
    min-width: 145px
}

.compound-title {
    display: block;
    line-height: 1.45
}

.compound-sorts {
    align-items: center;
    gap: 3px
}

.compound-sorts > span {
    color: #737b8b;
    font-size: 9px
}

.data-table thead th.deviation-head {
    min-width: 165px
}

.deviation-sorts {
    margin-top: 0;
    white-space: nowrap
}