/* Public chrome: masthead, identity, navigation links and locale switch. */
/* Sequential part 1-474 of the former chrome.css; load order in website/includes/header.php must be preserved. */
/* Footer rules (.site-tail, .endpoint) live in chrome-tail.css. */

.mast {
    position: relative;
    z-index: 7990;
    border-block-end: 0.0625rem solid rgba(255, 255, 255, 0.07);
    background-color: rgba(12, 13, 16, 0.9);
    backdrop-filter: blur(1.125rem);
}

.mast::before {
    position: absolute;
    inset: 0 0 auto;
    block-size: 0.0625rem;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(var(--flare-rgb), 0.72) 41%, rgba(var(--sun-rgb), 0.52) 59%, transparent);
}

.mast > .viewport-rail { inline-size: 100%; }
.mast__lane {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    inline-size: calc(100% - 1.25rem);
    min-block-size: 3.875rem;
    align-items: center;
    gap: 0.5rem;
    margin-inline: auto;
    padding-block: 0.5625rem 0.4375rem;
}

.mast__lane--locale { justify-content: end; }
.mast__lane--locale .header-links { grid-column: 2; }
.identity {
    display: grid;
    grid-template-columns: 2.375rem minmax(0, 1fr);
    min-inline-size: 0;
    align-items: center;
    gap: 0.625rem;
    color: var(--copy-bright);
    text-decoration: none;
}

.identity__emblem {
    display: grid;
    inline-size: 2.375rem;
    block-size: 2.375rem;
    place-items: center;
    overflow: hidden;
    padding: 0.125rem;
    border: 0.0625rem solid rgba(var(--flare-rgb), 0.42);
    border-radius: 50%;
    background-color: #050506;
    background-image: var(--identity-art);
    background-clip: content-box;
    background-origin: content-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 0.4375rem 1.25rem rgba(0, 0, 0, 0.32);
    font-style: normal;
}

.identity__wordmark {
    max-inline-size: calc(100vw - 12.8125rem);
    overflow: hidden;
    color: var(--copy-bright);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-links {
    display: flex;
    min-inline-size: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.header-links__item {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.5625rem 0.75rem;
    color: var(--copy-soft);
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 160ms ease, background-color 160ms ease;
}

.header-links__item:is(:hover, .current-link) {
    color: var(--copy-bright);
    background-color: rgba(255, 255, 255, 0.055);
}

.pocket-links {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 0.375rem;
    padding-block-start: 0.25rem;
}

.pocket-links__item {
    display: inline-grid;
    min-block-size: 2.375rem;
    place-items: center;
    padding: 0.5rem 0.625rem;
    color: var(--copy-bright);
    border: 0.0625rem solid var(--edge-soft);
    border-radius: 0.5625rem;
    background-color: rgba(18, 20, 25, 0.78);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
}

.pocket-links__item:is(:hover, .current-link) {
    border-color: var(--edge-hot);
    background-color: #1a1d23;
}

.locale-switch {
    position: relative;
    z-index: 8110;
}

.locale-switch__trigger {
    display: grid;
    grid-template-columns: 1.625rem auto 0.625rem;
    min-block-size: 2.375rem;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.3125rem 0.5625rem 0.3125rem 0.3125rem;
    color: var(--copy-bright);
    border: 0.0625rem solid var(--edge-soft);
    border-radius: 0.625rem;
    background-color: #111318;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: border-color 180ms ease, background-color 180ms ease;
}

.locale-switch__trigger::-webkit-details-marker,
.help-hatch__toggle::-webkit-details-marker,
.help-hatch__reconnect summary::-webkit-details-marker,
.help-hatch__access-key summary::-webkit-details-marker { display: none; }

.locale-switch__trigger:is(:hover, :focus-visible),
.locale-switch[open] .locale-switch__trigger {
    border-color: rgba(var(--flare-rgb), 0.45);
    outline: 0;
    background-color: rgba(var(--flare-rgb), 0.1);
}

.locale-switch__flag,
.locale-switch__choice-flag {
    position: relative;
    display: block;
    overflow: hidden;
    border: 0.0625rem solid var(--edge-soft);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 0.3125rem 0.75rem rgba(0, 0, 0, 0.34);
    font-style: normal;
    isolation: isolate;
}

.locale-switch__flag {
    inline-size: 1.625rem;
    block-size: 1.625rem;
    border-radius: 50%;
}

.locale-switch__code {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.05em;
}

.locale-switch__caret {
    inline-size: 0.4375rem;
    block-size: 0.4375rem;
    border-inline-end: 0.125rem solid currentColor;
    border-block-end: 0.125rem solid currentColor;
    transform: translateY(-0.125rem) rotate(45deg);
    transition: transform 180ms ease;
}

.locale-switch[open] .locale-switch__caret { transform: translateY(0.125rem) rotate(225deg); }
.locale-switch__tray {
    position: absolute;
    inset-block-start: calc(100% + 0.625rem);
    inset-inline-end: 0;
    z-index: 8230;
    display: grid;
    inline-size: min(11.875rem, calc(100vw - 1.25rem));
    max-block-size: min(26.25rem, calc(100vh - 6.25rem));
    gap: 0.125rem;
    padding: 0.3125rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    border: 0.0625rem solid var(--edge-soft);
    border-radius: 0.75rem;
    background-color: #111318;
    box-shadow: 0 1.375rem 3rem rgba(0, 0, 0, 0.44);
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.4375rem) scale(0.985);
    transform-origin: top right;
    transition: opacity 200ms ease, transform 200ms ease;
}

.locale-switch[open] .locale-switch__tray {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.locale-switch__choice {
    display: grid;
    grid-template-columns: 2.125rem minmax(0, 1fr) 1.0625rem;
    min-block-size: 2.75rem;
    align-items: center;
    gap: 0.5625rem;
    padding: 0.3125rem 0.4375rem;
    color: var(--copy-bright);
    border-radius: 0.5625rem;
    text-decoration: none;
    transition: background-color 180ms ease;
}

.locale-switch__choice:is(:hover, .current-link) { background-color: rgba(var(--flare-rgb), 0.1); }
.locale-switch__choice-flag {
    inline-size: 2.125rem;
    block-size: 2.125rem;
    border-radius: 50%;
}

.locale-switch__flag::before,
.locale-switch__flag::after,
.locale-switch__choice-flag::before,
.locale-switch__choice-flag::after {
    position: absolute;
    content: "";
}

.locale-switch__flag--ru,
.locale-switch__choice-flag--ru {
    background-image: linear-gradient(
        to bottom,
        #fff 0 33.333%,
        #2354a1 33.333% 66.666%,
        #cf3848 66.666% 100%
    );
}

.locale-switch__flag--gb,
.locale-switch__choice-flag--gb {
    background-color: #18376e;
    background-image:
        linear-gradient(90deg, transparent 43%, #cc3442 43% 57%, transparent 57%),
        linear-gradient(transparent 40%, #cc3442 40% 60%, transparent 60%),
        linear-gradient(90deg, transparent 35%, #fff 35% 65%, transparent 65%),
        linear-gradient(transparent 31%, #fff 31% 69%, transparent 69%),
        linear-gradient(34deg, transparent 43%, #cc3442 43% 49%, transparent 49% 51%, #cc3442 51% 57%, transparent 57%),
        linear-gradient(-34deg, transparent 43%, #cc3442 43% 49%, transparent 49% 51%, #cc3442 51% 57%, transparent 57%),
        linear-gradient(34deg, transparent 38%, #fff 38% 62%, transparent 62%),
        linear-gradient(-34deg, transparent 38%, #fff 38% 62%, transparent 62%);
}

.locale-switch__flag--cn,
.locale-switch__choice-flag--cn {
    background-color: #de2910;
}

.locale-switch__flag--cn::before,
.locale-switch__choice-flag--cn::before {
    inset-block-start: 19%;
    inset-inline-start: 16%;
    inline-size: 31%;
    block-size: 31%;
    background-color: #ffde00;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 93%, 50% 71%, 21% 93%, 32% 57%, 2% 35%, 39% 35%);
}

.locale-switch__flag--de,
.locale-switch__choice-flag--de {
    background-image: linear-gradient(
        to bottom,
        #161616 0 33.333%,
        #dd1f2d 33.333% 66.666%,
        #ffce36 66.666% 100%
    );
}

.locale-switch__flag--fr,
.locale-switch__choice-flag--fr {
    background-image: linear-gradient(
        to right,
        #1a3f91 0 33.333%,
        #fff 33.333% 66.666%,
        #e43a43 66.666% 100%
    );
}

.locale-switch__flag--jp,
.locale-switch__choice-flag--jp {
    background-color: #fff;
    background-image: radial-gradient(circle at center, #bc002d 0 30%, transparent 31%);
}

.locale-switch__flag--br,
.locale-switch__choice-flag--br {
    background-color: #159447;
}

.locale-switch__flag--br::before,
.locale-switch__choice-flag--br::before {
    inset: 15%;
    background-color: #ffdf32;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.locale-switch__flag--br::after,
.locale-switch__choice-flag--br::after {
    inset: 31%;
    z-index: 1;
    border-radius: 50%;
    background-color: #1d3f91;
}

.locale-switch__flag--tr,
.locale-switch__choice-flag--tr {
    background-color: #e30a17;
    background-image:
        radial-gradient(circle at 49% 50%, #e30a17 0 24%, transparent 25%),
        radial-gradient(circle at 41% 50%, #fff 0 29%, transparent 30%);
}

.locale-switch__flag--tr::before,
.locale-switch__choice-flag--tr::before {
    inset-block-start: 37%;
    inset-inline-start: 66%;
    inline-size: 25%;
    block-size: 25%;
    background-color: #fff;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 93%, 50% 71%, 21% 93%, 32% 57%, 2% 35%, 39% 35%);
    transform: rotate(18deg);
}

.locale-switch__flag--es,
.locale-switch__choice-flag--es {
    background-image: linear-gradient(
        to bottom,
        #aa151b 0 25%,
        #f1bf00 25% 75%,
        #aa151b 75% 100%
    );
}

.locale-switch__flag--in,
.locale-switch__choice-flag--in {
    background-image: linear-gradient(
        to bottom,
        #ff9933 0 33.333%,
        #fff 33.333% 66.666%,
        #138808 66.666% 100%
    );
}

.locale-switch__flag--in::after,
.locale-switch__choice-flag--in::after {
    inset: 38%;
    border: 0.0625rem solid #172b85;
    border-radius: 50%;
    background-image: repeating-conic-gradient(#172b85 0 4deg, transparent 4deg 30deg);
}

.locale-switch__choice-copy {
    display: grid;
    min-inline-size: 0;
    font-weight: inherit;
}

.locale-switch__choice-name {
    font-size: 0.8125rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    line-height: 1.15;
}

.locale-switch__choice-code {
    margin-block-start: 0.125rem;
    color: var(--copy-dim);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.locale-switch__choice-dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    justify-self: center;
    border-radius: 50%;
}

.locale-switch__choice.current-link .locale-switch__choice-dot {
    background-color: var(--flare);
    box-shadow: 0 0 0 0.25rem rgba(var(--flare-rgb), 0.1);
}