/* ===========================================================================
   Header: utility bar, navigation and hero
   ===========================================================================
   Self-contained replacement for the old _header.css + _nav.css +
   _responsive.css trio, which repeatedly overrode each other:

     * `.settings` had `height: 50px` while switching to `flex-direction:
       column` below 1600px, so the two stacked rows had no room;
     * `width: 100vw` / `width: calc(100vw - 2rem)` made the bar and the hero
       different widths (and slid them under the scrollbar);
     * the hero title was a fixed 32px, so it overflowed and was clipped by
       `overflow-x: hidden` on narrow phones;
     * `max-lines` and `align-items: space-around` are not real properties.

   Everything below is mobile-first, uses no fixed heights and no viewport
   units for block widths, and is verified from 320px to 2560px.
   =========================================================================== */

/* --------------------------------------------------------------------------
   Utility bar
   -------------------------------------------------------------------------- */

.settings {
    position: sticky;
    top: 0;
    z-index: 50;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;

    /* `body` is a column flex container, so without this the bar is shrunk
       below its content height and the nav row spills out of it. */
    flex: none;
    align-self: stretch;

    width: 100%;
    min-height: 52px;
    padding: max(0.5rem, env(safe-area-inset-top)) clamp(0.75rem, 2.5vw, 1.5rem) 0.5rem;

    background-color: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    border-bottom: 1px solid rgba(51, 51, 51, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.settings fieldset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.6rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
}

.settings label {
    cursor: pointer;
    user-select: none;
    font-size: 0.88rem;
    white-space: nowrap;
}

.settings label:hover {
    color: var(--linkedin-color);
}

.settings input[type="radio"] {
    flex: none;
    margin: 0 0 0 0.15rem;
    cursor: pointer;
}

/* Locked treatments ---------------------------------------------------------
   The chips are the game's photo treatments. Until an ad has been watched they
   are locked (premium.js): the radio circle steps aside under the pointer and a
   blue padlock takes its place. Clicking or tapping one starts the ad that opens
   it, so the pointer stays a pointer; the pointer resting on it is what brings up
   the card that explains the lock. The open chips carry the time left in
   `data-left`, shown the same way. The padlock's own paint comes at the very
   end of this sheet, where it can win against the ring drawn for the chips. */
.settings-modifiers > div {
    position: relative;
}

.settings-modifiers > div.is-locked > input[type="radio"] {
    opacity: 0;
}

.settings-modifiers > div.is-locked > label {
    cursor: pointer;
}

/* How long the treatments stay open, on the chips that are open. It hangs
   under the chip, out of the flow, so it never moves the row and never covers
   the chip beside it. */
.settings-modifiers > div[data-left]::after {
    content: attr(data-left);
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    margin-top: 0.45rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background-color: #fff;
    border: 1px solid rgba(0, 119, 181, 0.22);
    box-shadow: 0 6px 14px rgba(16, 24, 40, 0.12);
    color: var(--linkedin-color);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease, visibility 0s 120ms;
    z-index: 5;
}

.settings-modifiers > div[data-left]:hover::after,
.settings-modifiers > div[data-left]:focus-within::after {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* The card that explains the lock, placed by premium.js under the chip the
   pointer is on: fixed, so it never takes part in the bar's layout. */
.mods-card {
    position: fixed;
    z-index: 90;
    width: min(20rem, calc(100vw - 2rem));
    padding: 0.9rem 1rem 1rem;
    border: 1px solid rgba(0, 119, 181, 0.22);
    border-radius: 14px;
    background-color: #fff;
    box-shadow: 0 18px 34px rgba(16, 24, 40, 0.16);
}

.mods-card[hidden] {
    display: none;
}

.mods-card__title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dark-gray);
}

.mods-card__body {
    margin: 0 0 0.8rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #5e6773;
}

.mods-card__cta {
    padding: 0.5rem 1.1rem;
    border: none;
    border-radius: 999px;
    background-image: linear-gradient(90deg, var(--linkedin-color), var(--interpol-color));
    color: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.mods-card__cta[disabled] {
    opacity: 0.6;
    cursor: progress;
}

/* The permanent alternative to watching an ad, on the line under the button. */
.mods-card__all {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--linkedin-color);
    text-decoration: underline;
}

/* Language switcher -------------------------------------------------------- */

.language-selector {
    width: auto;
    max-width: 10rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: transparent;
    font-size: 0.9rem;
    cursor: pointer;
}

.language-selector:hover {
    color: var(--linkedin-color);
    background-color: rgba(0, 119, 181, 0.08);
}

.language-selector:focus {
    outline: none;
}

/* Custom language picker ---------------------------------------------------
   script.js paints this over the native <select>, which stays in the DOM as
   the source of truth: lang.js reads its value and listens for its `change`,
   and blog.js follows the same event. The list uses the same row styling as
   the nav and modifier dropdowns. */

.settings.has-lang-picker #language-selector-label,
.settings.has-lang-picker .language-selector {
    /* the markup ships an inline display: block on the label */
    display: none !important;
}

.lang-picker {
    position: relative;
    flex: none;
}

.lang-picker__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.lang-picker__trigger:hover {
    color: var(--linkedin-color);
    background-color: rgba(0, 119, 181, 0.08);
}

.lang-picker__trigger:focus-visible {
    outline: 2px solid var(--linkedin-color);
    outline-offset: 2px;
}

.lang-picker__flag {
    font-size: 1.05rem;
    line-height: 1;
}

.lang-picker__name {
    white-space: nowrap;
}

.lang-picker__chevron {
    display: inline-flex;
    opacity: 0.6;
    transition: transform 0.15s ease;
}

.lang-picker.is-open .lang-picker__chevron {
    transform: rotate(180deg);
}

/* Anchored under the trigger rather than opened as a full width sheet: the
   list stays inside the viewport on the smallest screens and the bar keeps
   its other two panels for the modifiers and the navigation. */
.lang-picker__list {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 70;

    display: none;
    flex-direction: column;
    gap: 0.1rem;
    width: max-content;
    min-width: min(13rem, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    max-height: min(72vh, 28rem);
    margin: 0;
    padding: 0.4rem;
    overflow-y: auto;
    overscroll-behavior: contain;

    list-style: none;
    text-align: left;
    color: var(--dark-gray);
    background-color: #fff;
    border: 1px solid rgba(51, 51, 51, 0.08);
    border-radius: 14px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18);
}

.lang-picker__list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.lang-picker__list::-webkit-scrollbar-track {
    background-color: transparent;
    /* keep the lane clear of the rounded corners of the card */
    margin: 0.4rem 0;
}

.lang-picker__list::-webkit-scrollbar-thumb {
    background-color: rgba(0, 119, 181, 0.3);
    /* 2px transparent border with padding-box clipping turns the 8px lane into
       a 4px rounded pill */
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}

.lang-picker__list::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 119, 181, 0.55);
}

.lang-picker__list::-webkit-scrollbar-corner {
    background-color: transparent;
}

/* Firefox has no ::-webkit-scrollbar, so it gets the standard pair instead.
   Those two properties must NOT be declared on the rule above: Blink switches
   to standard scrollbar styling as soon as they are set, which would throw the
   rules above away (and a 12px lane, instead of the 8px pill). */
@supports (-moz-appearance: none) {
    .lang-picker__list {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 119, 181, 0.35) transparent;
    }
}

/* --------------------------------------------------------------------------
   Cookie consent
   --------------------------------------------------------------------------
   Cookiebot paints its dialog in the top layer, but the bar carries its own
   backdrop blur, so it stayed sharp above the dimmed page. While the dialog is
   up the bar and the hero are blurred and dimmed with everything else.
   script.js toggles the class on <html>. */

.consent-open .settings,
.consent-open header {
    filter: blur(3px);
    opacity: 0.55;
    pointer-events: none;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.lang-picker.is-open .lang-picker__list {
    display: flex;
    animation: lang-picker-pop 0.14s ease-out;
}

.lang-picker__option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border-radius: 10px;
    color: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    outline: none;
}

.lang-picker__option:hover,
.lang-picker__option:focus-visible {
    color: var(--linkedin-color);
    background-color: rgba(0, 119, 181, 0.1);
}

.lang-picker__option.is-selected {
    color: var(--linkedin-color);
    background-color: rgba(0, 119, 181, 0.14);
    font-weight: 600;
}

.lang-picker__option > .lang-picker__name {
    flex: 1 1 auto;
}

.lang-picker__check {
    color: var(--linkedin-color);
    font-weight: 700;
    opacity: 0;
}

.lang-picker__option.is-selected .lang-picker__check {
    opacity: 1;
}

@keyframes lang-picker-pop {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Divider -------------------------------------------------------------- */

.separator {
    flex: none;
    align-self: stretch;
    width: 1px;
    min-height: 18px;
    margin: 0 0.35rem;
    background-color: #cbd0e0;
}

/* The divider between the language switcher and the navigation belongs to the
   wrapping bar itself, where stretching would make it as tall as every wrapped
   row. It keeps the height of a single line and centres on it instead. */
.settings > .separator {
    align-self: center;
    height: 1.1rem;
    min-height: 0;
}

/* Content pages ship the photo modifiers disabled, so they are hidden
   so hide them (and their dividers) and leave only the language switcher. */
.settings .disabled {
    display: none;
}

.settings fieldset:has(.disabled) .separator {
    display: none;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.settings nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.3rem;
    min-width: 0;
}

.settings nav a {
    position: relative;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    color: var(--dark-gray);
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.settings nav a:hover {
    color: var(--linkedin-color);
    background-color: rgba(0, 119, 181, 0.1);
}

.selected {
    background: rgba(0, 119, 181, 0.14);
    color: var(--linkedin-color);
    font-weight: 600;
}

/* The links the bar cannot hold --------------------------------------------
   script.js measures the bar: when the ten links no longer fit on one line
   next to the language switcher and the account button, the five least used
   ones move into a panel behind a "…" button. Which ones those are is its
   decision rather than a breakpoint's, because a German label is a third
   wider than its English one and the bar ships eleven languages. */

.nav-more {
    position: relative;
    flex: none;
    display: none;
}

.settings.nav-trim .nav-more {
    display: block;
}

.nav-more__button {
    position: relative;
    /* above the panel, so the wedge below never steals the trigger's own
       hover and the pill keeps its filled look while the pointer is on it */
    z-index: 71;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;

    /* Flat and wide rather than a 34px circle: it says what it is, so it has to
       be as wide as its label and no taller than the links it hides. */
    min-height: 28px;
    padding: 0 0.65rem 0 0.55rem;

    border: 1px solid rgba(0, 119, 181, 0.38);
    border-radius: 999px;
    background-color: rgba(0, 119, 181, 0.1);
    color: var(--linkedin-color);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nav-more__button svg {
    display: block;
    flex: none;
}

.nav-more__caret {
    opacity: 0.85;
    transition: transform 0.18s ease;
}

.nav-more__button:hover,
.nav-more__button:focus-visible,
.nav-more.is-open .nav-more__button {
    background-color: var(--linkedin-color);
    border-color: var(--linkedin-color);
    color: #fff;
}

.nav-more.is-open .nav-more__caret {
    transform: rotate(180deg);
}

/* The visitor is on one of the pages that moved, so the button carries the
   highlight the hidden link would have shown. */
.nav-more__button.is-active {
    background-color: rgba(0, 119, 181, 0.2);
    border-color: rgba(0, 119, 181, 0.55);
    color: var(--linkedin-color);
}

@media (prefers-reduced-motion: reduce) {
    .nav-more__button,
    .nav-more__caret {
        transition: none;
    }
}

.nav-more__panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 70;
    display: none;
    /* this padding is the bridge the pointer crosses from the button to the
       card, so the panel does not close on the way down */
    padding-top: 0.5rem;
}

/* Triangle of intent -------------------------------------------------------
   The apex sits on the trigger, the base on the card. Leaving the button
   sideways or on a diagonal no longer crosses a dead band: every straight
   path from the trigger to the panel now stays inside the menu's hover area,
   so the dropdown survives the trip instead of closing under the pointer.
   The width of the trigger is published by script.js as `--nav-more-w`; until
   it is known the top edge spans the whole card, which is the older, plainer
   bridge. */
.nav-more__panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 1.4rem;
    clip-path: polygon(
        0 100%,
        100% 100%,
        100% 0,
        calc(100% - var(--nav-more-w, 100%)) 0
    );
}

.nav-more__list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 12.5rem;
    padding: 0.4rem;
    background-color: #fff;
    border: 1px solid rgba(51, 51, 51, 0.08);
    border-radius: 14px;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.14);
}

/* Two ways in: the pointer, or the keyboard and a tap through `is-open`. */
.nav-more:hover .nav-more__panel,
.nav-more.is-open .nav-more__panel {
    display: block;
}

/* Escape, or a second click, puts the panel away even though the pointer is
   still over the button. Hover takes over again once it leaves. */
.nav-more.is-dismissed .nav-more__panel {
    display: none;
}

.nav-more__list a {
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    color: var(--dark-gray);
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

.nav-more__list a:hover,
.nav-more__list a:focus-visible {
    color: var(--linkedin-color);
    background-color: rgba(0, 119, 181, 0.1);
}

/* Measuring frame ----------------------------------------------------------
   Added by script.js for one synchronous layout pass and removed before the
   browser paints: it lays the bar's first line out flat so the row can report
   how wide it wants to be while it is currently wrapped over three lines. */
.settings.is-measuring {
    flex-wrap: nowrap;
}

.settings.is-measuring > * {
    flex: none;
}

.settings.is-measuring fieldset,
.settings.is-measuring nav {
    flex-wrap: nowrap;
}

/* The modifier row has a line of its own and is not part of the question. */
.settings.is-measuring .settings-modifiers {
    display: none;
}

/* --------------------------------------------------------------------------
   Sign-in
   --------------------------------------------------------------------------
   The bar is left-stacked: language switcher, photo modifiers, sign-in, menu.
   -------------------------------------------------------------------------- */

.settings-login {
    flex: none;
    /* always pinned to the right edge of the bar */
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 34px;
    padding: 0.25rem 0.75rem;

    border: 1px solid rgba(0, 119, 181, 0.35);
    border-radius: 999px;
    background-color: rgba(0, 119, 181, 0.08);
    color: var(--linkedin-color);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.settings-login:hover {
    background-color: rgba(0, 119, 181, 0.16);
}

.settings-login svg {
    display: block;
}

/* The icon's head, the only part of it that ever moves. The bust under it holds
   the button's outline still — that is what keeps the button from appearing to
   jump as the pointer crosses it, and the whole reason the two are drawn as
   separate shapes instead of one silhouette.
   Both animations below are transforms on the circle alone, written in the
   icon's own coordinates: the viewBox is 20 units across, so `10px 10px` is the
   neck, where the head meets the shoulders. `transform-box: view-box` is what
   makes those numbers count in the icon's units rather than the circle's box. */
.settings-login .login-head {
    transform-box: view-box;
    transform-origin: 10px 10px;
}

/* A pointer arriving, or a keyboard reaching the button: the head lifts and
   settles, once per entry. */
.settings-login:hover .login-head,
.settings-login:focus-visible .login-head {
    animation: login-head-nod 620ms ease-out;
}

/* A click, on the way to the dialog. The same gesture with more conviction, so
   hovering and clicking read as one idea rather than two. It is quick and
   front-loaded because the dialog's backdrop covers the bar a moment later,
   dimmed and blurred — the bounce belongs to the bar, and is over before the
   dialog is. */
.settings-login.is-bouncing .login-head {
    animation: login-head-bounce 520ms cubic-bezier(0.33, 1.4, 0.5, 1);
}

@keyframes login-head-nod {
    0%   { transform: translateY(0); }
    45%  { transform: translateY(-1.5px); }
    100% { transform: translateY(0); }
}

@keyframes login-head-bounce {
    0%   { transform: translateY(0) scaleY(1); }
    30%  { transform: translateY(-3.2px) scaleY(1.08); }
    62%  { transform: translateY(0.6px) scaleY(0.92); }
    82%  { transform: translateY(-0.6px) scaleY(1); }
    100% { transform: translateY(0) scaleY(1); }
}

/* Reduced motion: no nod, no bounce. The three selectors are the ones above,
   spelled out rather than shortened to `.settings-login .login-head`, because a
   guard has to match the specificity of what it turns off — the shortened form
   (two classes against these three) lost to the bounce rule, and the head went
   on bouncing with the animation apparently disabled. */
@media (prefers-reduced-motion: reduce) {
    .settings-login:hover .login-head,
    .settings-login:focus-visible .login-head,
    .settings-login.is-bouncing .login-head {
        animation: none;
    }
}

.settings-login.is-signed-in {
    border-color: rgba(51, 51, 51, 0.16);
    background-color: rgba(51, 51, 51, 0.05);
    color: var(--dark-gray);
}

@media (max-width: 1100px) {
    /* icon only: on a phone the bar also carries the language switcher, the
       modifier toggle and the menu button */
    .settings-login-label {
        display: none;
    }

    /* Fingers, not cursors: the controls the bar holds on a phone are all given
       the same 40px hit area, which is what makes them comfortable to tap
       (they were 28 to 34px tall). The bar grows by 4px. */
    .settings-login,
    .lang-picker__trigger {
        min-height: 40px;
    }
}

/* Sign-in dialog ----------------------------------------------------------- */

dialog.auth-dialog {
    /* Centring. A modal dialog is centred by the user agent through
       `margin: auto` inside `inset: 0`, but the global margin reset sets every
       margin to 0, which pins the dialog to the top left corner. Declaring the
       three properties here is what keeps it centred in the viewport. */
    position: fixed;
    inset: 0;
    margin: auto;

    width: min(24rem, calc(100vw - 2rem));
    max-height: min(92vh, 44rem);
    overflow-y: auto;
    padding: 0;
    border: none;
    border-radius: 18px;
    background: #fff;
    color: var(--dark-gray);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

dialog.auth-dialog::backdrop {
    background-color: rgba(18, 20, 32, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.auth-card {
    padding: 1.5rem;
    text-align: left;
}

.auth-close {
    position: relative;
    float: right;
    width: 32px;
    height: 32px;
    margin: -0.35rem -0.35rem 0 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #666;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

/* A 32px circle is a small thing to hit with a thumb, and it sits in the
   corner of the dialog where a missed tap lands on nothing at all. This grows
   the target to 48px without moving a pixel of what is painted: the
   pseudo-element is transparent, it carries no background of its own, and the
   hover tint stays the same circle it has always been. The card's 1.5rem
   padding leaves room for it to grow on the outside too. */
.auth-close::after {
    content: "";
    position: absolute;
    inset: -8px;
}

.auth-close:hover {
    background-color: rgba(51, 51, 51, 0.08);
}

.auth-card h2 {
    margin: 0 0 0.35rem;
    font-size: 1.3rem;
}

/* The optional-sign-in note: it explains the dialog, so it gets air above and
   below it instead of hugging the title and the provider buttons. */
.auth-note {
    margin: 1rem 0;
    font-size: 0.85rem;
    color: #666;
}

.auth-card label {
    display: block;
    margin: 0.75rem 0 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.auth-card input {
    box-sizing: border-box;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid #cfd3e6;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    font-family: inherit;
    font-size: 0.95rem;
}

.auth-card input:focus {
    outline: none;
    border-color: var(--linkedin-color);
    box-shadow: 0 0 0 3px rgba(0, 119, 181, 0.15);
}

/* Checked by validation.js, like every other field on the site. */
.auth-card input[aria-invalid="true"] {
    border-color: var(--error);
    box-shadow: 0 0 0 3px rgba(209, 17, 36, 0.14);
}

.auth-card .field-error {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
}

/* The line kept free for a status message sits between the email field and the
   button, so it is part of the gap the visitor sees: it keeps a floor for the
   message without reserving a whole line of empty space. */
.auth-status {
    min-height: 0.6rem;
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: #666;
}

.auth-status.is-error {
    color: #c0392b;
    font-weight: 600;
}

/* Log in / create account: the dialog carries one action, so the other path is
   a quiet text link under the button rather than a second button. It names
   whichever path the button is not about to take. */
.auth-switch {
    margin: 0.7rem 0 0;
    text-align: center;
}

.auth-switch-link {
    padding: 0.15rem 0.3rem;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--linkedin-color);
    font-family: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.auth-switch-link:hover {
    color: var(--dark-gray);
}

.auth-switch-link:focus-visible {
    outline: 2px solid var(--linkedin-color);
    outline-offset: 2px;
}

/* Shown after the server refused the address because it does not match the
   intent: this link is now the way out, so it stops being quiet. */
.auth-switch-link.is-suggested {
    background-color: rgba(0, 119, 181, 0.1);
    color: var(--dark-gray);
    font-weight: 700;
}

.auth-submit,
.auth-secondary {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.auth-submit {
    border: none;
    background-color: var(--dark-gray);
    color: #fff;
    /* Half the shared gap: the email field is directly above, and the button
       does not need to be pushed away from it. */
    margin-top: 0.375rem;
}

.auth-submit:hover {
    background-color: #555;
}

.auth-submit[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.auth-secondary {
    border: 1px solid #cfd3e6;
    background: #fff;
    color: var(--dark-gray);
}

.auth-secondary:hover {
    border-color: var(--linkedin-color);
    color: var(--linkedin-color);
}

.auth-account {
    text-align: center;
}

.auth-account strong {
    word-break: break-all;
}

.auth-account .auth-secondary {
    margin-top: 1rem;
}

/* The code screen -------------------------------------------------------- */

/* Six digits typed from a mail. Spacing them out is what makes them read as
   one code, and the left padding pays back the gap the last letter-space
   leaves after the sixth digit, so the group stays centred. */
.auth-code-form #auth-code {
    padding: 0.7rem 0.5rem 0.7rem 0.9rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.42em;
    text-align: center;
}

/* Whose mailbox to open: the address as typed, so a typo is visible here
   rather than blamed on the code. */
.auth-code-who {
    margin: 0.5rem 0 0;
    color: var(--dark-gray);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    word-break: break-all;
}

/* Says the link in the same mail works too, and when both stop working. */
.auth-code-note {
    margin: 0.4rem 0 0;
    color: #666;
    font-size: 0.78rem;
    line-height: 1.45;
}

/* Two quiet ways out, side by side on a wide card and stacked on a phone. */
.auth-code-form .auth-switch {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.9rem;
}

/* Waiting out the resend cooldown: not greyed as a whole, just unclickable. */
.auth-code-form .auth-switch-link[disabled] {
    color: #9aa1ad;
    text-decoration: none;
    cursor: default;
}

/* Provider sign-in ------------------------------------------------------- */

.auth-providers {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 1rem;
}

.auth-provider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;

    width: 100%;
    padding: 0.7rem 1rem;

    border: 1px solid #d6dbe3;
    border-radius: 999px;
    background-color: #fff;
    color: #202124;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

.auth-provider svg {
    flex: none;
    display: block;
}

.auth-provider:hover {
    background-color: #f6f7f9;
    border-color: #c8cfd9;
}

.auth-provider:focus-visible {
    outline: 2px solid var(--linkedin-color);
    outline-offset: 2px;
}

.auth-provider[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.auth-provider--apple {
    background-color: #111;
    border-color: #111;
    color: #fff;
}

.auth-provider--apple:hover {
    background-color: #000;
    border-color: #000;
}

/* A provider that is not configured yet: greyed and inert, so it reads as "not
   for you yet" rather than as a button that failed. This is not the disabled
   state above — that one is the moment a provider is being asked to sign someone
   in, which is why it says `cursor: progress` — so the greying is its own class
   and kills the hover of both providers, Apple's black pill included. The icon
   follows `currentColor`, so it greys with the label. */
.auth-provider.is-unavailable,
.auth-provider.is-unavailable:hover {
    background-color: #f1f3f6;
    border-color: #e2e6ec;
    color: #9aa1ad;
    cursor: not-allowed;
}

.auth-or {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1rem;
    color: #7c8593;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-or::before,
.auth-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: rgba(51, 51, 51, 0.14);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

header {
    width: 100%;
    padding: clamp(0.9rem, 3.2vw, 1.8rem) clamp(0.75rem, 3vw, 1.5rem) clamp(0.75rem, 2.4vw, 1.3rem);
    text-align: center;
    background-color: rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

header h1 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 0.35em;

    margin: 0 0 0.35rem;
    /* fluid: ~22px at 320px, ~44px on desktop, never overflows */
    font-size: clamp(1.35rem, 5vw + 0.4rem, 2.75rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
    cursor: pointer;
}

h1 span:not(.or) {
    padding: 0.2rem 0.5rem;
    position: relative;
    z-index: 2;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, var(--linkedin-color) 0 50%, var(--interpol-color) 50% 100%);
    background-size: 200% 100%;
    background-position: 0% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    transition: background-position 0.35s ease, transform 0.2s ease;
    will-change: transform, background-position, text-shadow;
}

h1 span.interpol {
    background-image: linear-gradient(90deg, var(--interpol-color) 0 50%, var(--linkedin-color) 50% 100%);
}

h1:hover span {
    animation: glitchShift 4.5s ease infinite;
}

@keyframes glitchShift {
    0% {
        background-position: 0% 0;
    }

    75% {
        background-position: 60% 0;
    }

    90% {
        background-position: 100% 0;
    }

    100% {
        background-position: 15% 0;
    }
}

.tagline {
    max-width: 46ch;
    margin: 0 auto 0.75rem;
    font-style: italic;
    font-size: clamp(0.85rem, 2.4vw, 1rem);
    color: #666;
}

/* The score belongs to the play page: it is the only page with rounds to count,
   and index.html is the only page that marks its <body> as the play page. */
body:not(.play-page) .stats {
    display: none;
}

.stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem clamp(0.75rem, 4vw, 2rem);

    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0.3rem clamp(0.75rem, 3vw, 1.25rem);

    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(51, 51, 51, 0.06);
    border-radius: 999px;
}

.stat {
    font-weight: 700;
    font-size: clamp(0.9rem, 2.6vw, 1.1rem);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------------
   Two modes below 1100px:

   * with JS (`.is-enhanced`): the bar keeps a single row (language switcher
     plus two toggle buttons) and the photo modifiers / the navigation open as
     panels below it. Nothing is clipped and the bar never grows.
   * without JS: the fieldset and the nav become horizontal scroll strips with
     faded edges. Kept as a graceful fallback.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {

    /* ---- fallback: scroll strips ------------------------------------- */
    .settings:not(.is-enhanced) {
        gap: 0.4rem;
    }

    .settings:not(.is-enhanced) > .separator {
        display: none;
    }

    .settings:not(.is-enhanced) fieldset {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    }

    .settings:not(.is-enhanced) fieldset::-webkit-scrollbar {
        display: none;
    }

    .settings:not(.is-enhanced) fieldset > div,
    .settings:not(.is-enhanced) fieldset > label,
    .settings:not(.is-enhanced) fieldset > .language-selector {
        flex: none;
    }

    .settings:not(.is-enhanced) nav {
        width: 100%;
        margin-left: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    }

    .settings:not(.is-enhanced) nav::-webkit-scrollbar {
        display: none;
    }

    .settings:not(.is-enhanced) nav a {
        flex: none;
    }

    /* ---- enhanced: single-row bar + panels --------------------------- */
    .settings.is-enhanced {
        flex-wrap: nowrap;
        gap: 0.35rem;
    }

    .settings.is-enhanced > .separator,
    .settings.is-enhanced fieldset > .separator {
        display: none;
    }

    .settings.is-enhanced fieldset {
        flex-wrap: nowrap;
        overflow: visible;
        gap: 0.35rem;
        -webkit-mask-image: none;
        mask-image: none;
    }

    /* collapsed: only the language switcher stays in the bar (the custom
       picker stands in for the select it replaced) */
    .settings.is-enhanced fieldset > div:not(.separator):not(.disabled):not(.lang-picker),
    .settings.is-enhanced nav {
        display: none;
    }

    /* Mobile bar: the language switcher stays on the left, then the buttons
       read left to right: modifiers, account, nav. `order` is used rather than
       moving the buttons in the DOM, because the DOM order is what lays out the
       wide bar (where the account button must follow the nav to keep the right
       edge, and the modifier row takes its own line). */
    .settings.is-enhanced .settings-toggle--options {
        order: 1;
        /* the first button of the group carries the push to the right edge */
        margin-left: auto;
    }

    .settings.is-enhanced .settings-login {
        order: 2;
    }

    .settings.is-enhanced .settings-toggle--nav {
        order: 3;
    }

    /* Pages without a filter toggle: the account button is the first one, so it
       keeps the auto margin that pins the group to the right. */
    .settings.is-enhanced:has(.settings-toggle--options) .settings-login {
        margin-left: 0;
    }

    .settings-toggle {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        min-width: 40px;
        min-height: 40px;
        padding: 0 0.65rem;

        border: 1px solid rgba(51, 51, 51, 0.14);
        border-radius: 999px;
        background-color: rgba(255, 255, 255, 0.75);
        color: var(--dark-gray);
        font-size: 0.95rem;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
    }

    .settings-toggle svg {
        display: block;
    }

    .settings-toggle:hover {
        color: var(--linkedin-color);
        border-color: var(--linkedin-color);
    }

    .settings-toggle[aria-expanded="true"] {
        background-color: rgba(0, 119, 181, 0.12);
        border-color: var(--linkedin-color);
        color: var(--linkedin-color);
    }

    /* --- the icons move with what they opened ---------------------------
       Bars and knobs turn around their own middle, which in SVG means
       filling their box first: otherwise the origin is the corner of the
       drawing and a rotation throws the shape out of the button. */
    .settings-toggle svg .bar,
    .settings-toggle svg .knob {
        transform-box: fill-box;
        transform-origin: center;
    }

    /* The hamburger folds into a cross while the nav panel is open: the two
       outer bars travel to the middle (5 units of the 20-unit viewBox) and
       tilt, the middle one thins away. */
    .settings-toggle--nav .bar {
        transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.2s ease;
    }

    .settings.nav-open .settings-toggle--nav .bar--top {
        transform: translateY(5px) rotate(45deg);
    }

    .settings.nav-open .settings-toggle--nav .bar--middle {
        opacity: 0;
        transform: scaleX(0.35);
    }

    .settings.nav-open .settings-toggle--nav .bar--bottom {
        transform: translateY(-5px) rotate(-45deg);
    }

    /* The three knobs of the modifiers icon slide to new spots along their
       tracks when the panel opens — and slide back when it closes, which is
       also what happens as soon as a modifier is picked. The delays are per
       knob so they arrive one after the other, and the easing overshoots a
       little, which is what makes it read as a nudge rather than a slide. */
    .settings-toggle--options .knob {
        transition: transform 0.42s cubic-bezier(0.34, 1.45, 0.42, 1);
    }

    .settings-toggle--options .knob--1 { transition-delay: 0.05s; }
    .settings-toggle--options .knob--2 { transition-delay: 0.1s; }
    .settings-toggle--options .knob--3 { transition-delay: 0.15s; }

    .settings.options-open .settings-toggle--options .knob--1 { transform: translateX(5px); }
    .settings.options-open .settings-toggle--options .knob--2 { transform: translateX(-6px); }
    .settings.options-open .settings-toggle--options .knob--3 { transform: translateX(4px); }

    @media (prefers-reduced-motion: reduce) {
        .settings-toggle--nav .bar,
        .settings-toggle--options .knob {
            transition: none;
        }
    }

    /* open panels sit right under the bar. Both menus are the same list, so
       the modifier dropdown reads and behaves exactly like the nav one. */
    .settings.is-enhanced.options-open fieldset,
    .settings.is-enhanced.nav-open nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 60;

        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.15rem;
        margin: 0;
        padding: 0.75rem clamp(0.75rem, 3vw, 1.5rem) 0.9rem;
        text-align: left;

        background-color: #fff;
        border-bottom: 1px solid rgba(51, 51, 51, 0.08);
        box-shadow: 0 14px 26px rgba(0, 0, 0, 0.14);

        animation: panel-drop 0.18s ease;
    }

    /* the language switcher stays in the bar, never inside the panel */
    .settings.is-enhanced.options-open fieldset > #language-selector-label,
    .settings.is-enhanced.options-open fieldset > .language-selector {
        display: none;
    }

    /* the flag is decorative (the select carries the aria-label) and the markup
       ships an inline `display: block` on it, hence the !important */
    .settings.is-enhanced.options-open fieldset > #language-selector-label {
        display: none !important;
    }

    .settings.is-enhanced.options-open fieldset > div:not(.separator):not(.disabled) {
        display: block;
    }

    .settings.is-enhanced.nav-open nav a {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.6rem 0.75rem;
        border-radius: 10px;
    }

    /* One icon per destination, in the mobile navigation panel only.
       Drawn as masks so each icon takes the link colour, including the brand
       colour of the page it points at. They live in the stylesheet rather than
       in the markup: lang.js replaces the innerHTML of every [data-i18n] link
       when the language changes, which would wipe an injected element. */
    .settings.is-enhanced.nav-open nav a::before {
        content: "";
        flex: none;
        width: 20px;
        height: 20px;
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: 20px 20px;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 20px 20px;
    }

    /* The play link, and both ways it is written: the sources ship href="/"
       and the build rewrites it to the language root ("/en"), which the
       [href="/"] selector alone would miss. It missed it silently — a
       ::before with no mask still paints its background-color, so the icon
       came out as a black square instead of a triangle. The label key is
       stable in both, so it carries the rule. */
    .settings.is-enhanced.nav-open nav a[href="/"]::before,
    .settings.is-enhanced.nav-open nav a[data-i18n="header-play"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 5.1 15.2 10 7 14.9z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 5.1 15.2 10 7 14.9z'/%3E%3C/svg%3E");
    }

    .settings.is-enhanced.nav-open nav a[href$="/rules"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6.3C8.7 5.2 7 4.8 4.6 4.8v10.4c2.4 0 4.1.4 5.4 1.5 1.3-1.1 3-1.5 5.4-1.5V4.8c-2.4 0-4.1.4-5.4 1.5z'/%3E%3Cpath d='M10 6.3v10.4'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 6.3C8.7 5.2 7 4.8 4.6 4.8v10.4c2.4 0 4.1.4 5.4 1.5 1.3-1.1 3-1.5 5.4-1.5V4.8c-2.4 0-4.1.4-5.4 1.5z'/%3E%3Cpath d='M10 6.3v10.4'/%3E%3C/svg%3E");
    }

    .settings.is-enhanced.nav-open nav a[href$="/blog"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3.9l2.6 2.6-8.3 8.3-3.4.8.8-3.4z'/%3E%3Cpath d='M12.1 5.3l2.6 2.6'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3.9l2.6 2.6-8.3 8.3-3.4.8.8-3.4z'/%3E%3Cpath d='M12.1 5.3l2.6 2.6'/%3E%3C/svg%3E");
    }

    .settings.is-enhanced.nav-open nav a[href$="/faq"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6.8'/%3E%3Cpath d='M8.2 8.2a1.9 1.9 0 1 1 2.6 1.8c-.5.2-.8.6-.8 1.1v.5'/%3E%3Cpath d='M10 14h.01'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6.8'/%3E%3Cpath d='M8.2 8.2a1.9 1.9 0 1 1 2.6 1.8c-.5.2-.8.6-.8 1.1v.5'/%3E%3Cpath d='M10 14h.01'/%3E%3C/svg%3E");
    }

    .settings.is-enhanced.nav-open nav a[href$="/contact"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='5.4' width='13.6' height='9.2' rx='1.6'/%3E%3Cpath d='M3.8 6.5 10 11l6.2-4.5'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='5.4' width='13.6' height='9.2' rx='1.6'/%3E%3Cpath d='M3.8 6.5 10 11l6.2-4.5'/%3E%3C/svg%3E");
    }

    .settings.is-enhanced.nav-open nav a[href$="/about"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6.8'/%3E%3Cpath d='M10 9.3v4.3'/%3E%3Cpath d='M10 6.7h.01'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6.8'/%3E%3Cpath d='M10 9.3v4.3'/%3E%3Cpath d='M10 6.7h.01'/%3E%3C/svg%3E");
    }

    .settings.is-enhanced.nav-open nav a[href$="/versions"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.7 9.4V4.8a1.1 1.1 0 0 1 1.1-1.1h4.6l7.1 7.1-5.7 5.7z'/%3E%3Ccircle cx='7.4' cy='7.4' r='1.2'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.7 9.4V4.8a1.1 1.1 0 0 1 1.1-1.1h4.6l7.1 7.1-5.7 5.7z'/%3E%3Ccircle cx='7.4' cy='7.4' r='1.2'/%3E%3C/svg%3E");
    }

    .settings.is-enhanced.nav-open nav a[href$="/privacy"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3.4 15.8 5.6v4.6c0 3.1-2.3 5.5-5.8 6.4-3.5-.9-5.8-3.3-5.8-6.4V5.6z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3.4 15.8 5.6v4.6c0 3.1-2.3 5.5-5.8 6.4-3.5-.9-5.8-3.3-5.8-6.4V5.6z'/%3E%3C/svg%3E");
    }

    .settings.is-enhanced.nav-open nav a[href$="/terms"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4H6.6A1.6 1.6 0 0 0 5 5v10a1.6 1.6 0 0 0 1.6 1.6h6.8A1.6 1.6 0 0 0 15 15V6.4z'/%3E%3Cpath d='M12 3.4v3h3'/%3E%3Cpath d='M7.7 10.4h4.6M7.7 13.2h4.6'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4H6.6A1.6 1.6 0 0 0 5 5v10a1.6 1.6 0 0 0 1.6 1.6h6.8A1.6 1.6 0 0 0 15 15V6.4z'/%3E%3Cpath d='M12 3.4v3h3'/%3E%3Cpath d='M7.7 10.4h4.6M7.7 13.2h4.6'/%3E%3C/svg%3E");
    }

    .settings.is-enhanced.nav-open nav a[href$="/stats"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16.2V9.6M10 16.2V4.4M16 16.2v-4.4'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16.2V9.6M10 16.2V4.4M16 16.2v-4.4'/%3E%3C/svg%3E");
    }

    /* The store: a shopping bag, so the one destination that takes money reads
       as a shop rather than as another page. */
    .settings.is-enhanced.nav-open nav a[href$="/premium"]::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 6.6h10.8l.9 8.2a1.3 1.3 0 0 1-1.3 1.4H5a1.3 1.3 0 0 1-1.3-1.4z'/%3E%3Cpath d='M7.7 6.6V5.5a2.3 2.3 0 0 1 4.6 0v1.1'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 6.6h10.8l.9 8.2a1.3 1.3 0 0 1-1.3 1.4H5a1.3 1.3 0 0 1-1.3-1.4z'/%3E%3Cpath d='M7.7 6.6V5.5a2.3 2.3 0 0 1 4.6 0v1.1'/%3E%3C/svg%3E");
    }

    /* Modifier rows, styled exactly like the nav links, with the active one
       ticked on the right. */
    .settings.is-enhanced.options-open fieldset > div:not(.separator):not(.disabled) > label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
        min-height: 0;
        padding: 0.6rem 0.75rem;

        border: 1px solid transparent;
        border-radius: 10px;
        background-color: transparent;
        color: var(--dark-gray);
        font-size: 0.9rem;
        font-weight: 500;
        text-align: left;

        transition: background-color 0.16s ease, color 0.16s ease;
    }

    .settings.is-enhanced.options-open fieldset > div:not(.separator):not(.disabled) > label::after {
        width: 15px;
        height: 15px;
        background-size: 13px 13px;
    }

    .settings.is-enhanced.options-open fieldset > div:not(.separator):not(.disabled) > label:hover {
        color: var(--linkedin-color);
        background-color: rgba(0, 119, 181, 0.1);
    }

    /* Press feedback: the row darkens under the finger before it switches. */
    .settings.is-enhanced.options-open fieldset > div:not(.separator):not(.disabled) > label:active {
        background-color: rgba(0, 119, 181, 0.18);
    }

    /* the active modifier mirrors the nav's `.selected` link */
    .settings.is-enhanced.options-open fieldset > div:not(.separator):not(.disabled) > label:has(+ input[type="radio"]:checked) {
        background: rgba(0, 119, 181, 0.14);
        border-color: transparent;
        color: var(--linkedin-color);
        font-weight: 600;
    }

    /* The two modifier groups (the colour filters, then the image ones) both
       read "None" at the end, so the divider is kept inside the panel as a
       hairline, where there is room for it, rather than dropped with the
       single-row bar. */
    .settings.is-enhanced.options-open fieldset > .separator {
        display: block;
        width: 100%;
        height: 1px;
        min-height: 0;
        align-self: stretch;
        margin: 0.3rem 0;
        background-color: rgba(51, 51, 51, 0.12);
    }
}

/* The toggles are a small-screen affordance only. */
@media (min-width: 1101px) {
    .settings-toggle {
        display: none;
    }
}

/* Photo modifiers -----------------------------------------------------------
   A row of browser radio buttons was the only unstyled control left in the bar.
   Each input stays in the DOM (game.js reads it, and its label points at it) but
   is taken out of sight, and the label carries a drawn indicator instead: an
   empty ring that becomes the blue check of the active modifier. The label also
   picks up a pill tint on hover and pops when it becomes active, so switching a
   filter reads as an action rather than a form submission.
   Only applied where `:has()` is supported, so older engines keep the plain
   (still functional) radio list instead of losing the controls. */

@supports selector(:has(*)) {
    .settings fieldset>div:not(.separator):not(.disabled) {
        position: relative;
    }

    .settings input[type="radio"] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .settings label:has(+ input[type="radio"]:focus-visible) {
        outline: 3px solid var(--linkedin-color);
        outline-offset: 2px;
    }

    /* Wide bar: the modifiers own a full-width line, so they stay a compact
       text row with the drawn indicator next to the name. */
    @media (min-width: 1101px) {
        .settings fieldset>div:not(.separator):not(.disabled)>label {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;

            /* the pill is taller than the row: the negative margin hands the
               padding back so the bar keeps its height */
            padding: 0.25rem 0.5rem;
            margin: -0.25rem 0;
            border-radius: 8px;

            transition: background-color 0.16s ease, color 0.16s ease;
        }

        .settings fieldset>div:not(.separator):not(.disabled)>label::after {
            content: "";
            flex: none;
            width: 13px;
            height: 13px;

            border: 1.5px solid rgba(51, 51, 51, 0.35);
            border-radius: 50%;
            background-color: #fff;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 9px 9px;

            transition: border-color 0.16s ease, background-color 0.16s ease;
        }

        .settings fieldset>div:not(.separator):not(.disabled)>label:hover {
            color: var(--linkedin-color);
            background-color: rgba(0, 119, 181, 0.08);
        }

        .settings fieldset>div:not(.separator):not(.disabled)>label:hover::after {
            border-color: var(--linkedin-color);
        }

        .settings fieldset>div:not(.separator):not(.disabled)>label:has(+input[type="radio"]:checked) {
            color: var(--linkedin-color);
            background-color: rgba(0, 119, 181, 0.12);
            font-weight: 600;
        }

        .settings fieldset>div:not(.separator):not(.disabled)>label:has(+input[type="radio"]:checked)::after {
            border-color: var(--linkedin-color);
            background-color: var(--linkedin-color);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.3 6.3 4.6 8.6 9.7 3.5'/%3E%3C/svg%3E");

            animation: modifier-active 0.24s ease;
        }
    }

    /* Narrow bar: the same controls as chips, either in the scrollable strip the
       markup falls back to without JS, or as panel rows (see below). */
    @media (max-width: 1100px) {
        .settings fieldset>div:not(.separator):not(.disabled)>label {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            min-height: 40px;
            padding: 0 0.7rem;

            background-color: rgba(255, 255, 255, 0.75);
            border: 1px solid rgba(51, 51, 51, 0.14);
            border-radius: 999px;
            font-size: 0.8rem;

            transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
        }

        .settings fieldset>div:not(.separator):not(.disabled)>label::after {
            content: "";
            flex: none;
            width: 13px;
            height: 13px;

            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230077b5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.3 6.3 4.6 8.6 9.7 3.5'/%3E%3C/svg%3E");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 11px 11px;

            opacity: 0;
            transform: scale(0.5);
            transition: opacity 0.16s ease, transform 0.16s ease;
        }

        /* The checked rules must carry the same (long) selector as the chip
           rule above, otherwise the chip's own colours win on specificity. */
        .settings fieldset>div:not(.separator):not(.disabled)>label:has(+input[type="radio"]:checked) {
            background-color: rgba(0, 119, 181, 0.12);
            border-color: var(--linkedin-color);
            color: var(--linkedin-color);
            font-weight: 600;
        }

        .settings fieldset>div:not(.separator):not(.disabled)>label:has(+input[type="radio"]:checked)::after {
            opacity: 1;
            transform: scale(1);
        }
    }
}

/* The active modifier's indicator pops in, and the panels drop in under the
   bar, so a click is always acknowledged. */
@keyframes modifier-active {
    0% {
        transform: scale(0.5);
    }

    60% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes panel-drop {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------------------------------------------------------------
   Play page: LANG | NAV | modifiers
   --------------------------------------------------------------------------
   The play page ships the language switcher in its own group and the modifier
   fieldset after the nav, so the modifier row is the group that drops onto the
   next line when the bar runs out of room. Other pages keep the language
   switcher inside the fieldset (their modifiers are disabled and hidden), and
   every modifier rule below matches either structure. */

.settings-lang {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
}

/* The modifier row takes a full line of its own, which is what keeps the
   sign-in button on the right edge of the line above it. */
@media (min-width: 1101px) {
    .settings-modifiers {
        flex-basis: 100%;
    }
}

/* Where the modifiers are in the bar, the header is two rows tall and the button
   has to be centred on the header, not on the row it happens to be wrapped into:
   sitting on the nav row it reads as being too high by half the modifier row,
   and it is a judgement the eye makes against the whole bar, not the row.

   So on those pages the bar is a grid, and the button is a cell spanning both
   rows with `align-self: center` — centred on the bar itself. The modifier row
   gets the three columns the button does not use, which is what stops a long
   chip running underneath it: in German and French they already reach past the
   button's left edge, and a centred button would have been drawn over the last
   chip's tail. The price is that the chips wrap a little earlier.

   Two things this rule must not break:

   - the measuring frame in script.js. It reads the row's natural width to decide
     whether the ten nav links fit (`.is-measuring` lays the row out flat, and the
     button's `margin-left: auto` is what tells that measurement how much room
     there is). A grid measures as exactly the room it has, so it would answer
     "everything fits" every time and the nav would never trim into its More
     panel. Hence the second rule: while measuring, the bar is a flex row again,
     laid out exactly as it was before this change.
   - the narrow layout. This is all scoped above 1100px, where the panels and the
     toggles have already handed the bar over to the wide arrangement; phones keep
     the bar they had. */
@media (min-width: 1101px) {
    .settings:has(> fieldset.settings-modifiers) {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
    }

    .settings:has(> fieldset.settings-modifiers) > .settings-lang { grid-area: 1 / 1; }
    .settings:has(> fieldset.settings-modifiers) > .separator { grid-area: 1 / 2; }

    /* `min-width: 0` because a grid item will not shrink below its content by
       default, and the nav has to be free to wrap or scroll as before. */
    .settings:has(> fieldset.settings-modifiers) > nav {
        grid-area: 1 / 3;
        min-width: 0;
    }

    .settings:has(> fieldset.settings-modifiers) > .settings-login {
        grid-area: 1 / 4 / 3 / 5;
        align-self: center;
    }

    .settings:has(> fieldset.settings-modifiers) > .settings-modifiers {
        grid-area: 2 / 1 / 3 / 4;
        /* the row is not a flex line of its own here, so the 100% basis that
           gave it one is not wanted */
        flex-basis: auto;
    }

    .settings:has(> fieldset.settings-modifiers).is-measuring {
        display: flex;
    }
}

/* Small phones: give the icon controls room by shrinking the language
   switcher. The full language names stay in the opened list; the inline globe
   is decorative and the select carries the accessible label. */

@media (max-width: 430px) {
    .settings #language-selector-label {
        /* the markup ships an inline display: block on it */
        display: none !important;
    }

    /* the custom picker keeps the footprint the select had */
    .settings .lang-picker__trigger {
        padding: 0.3rem 0.4rem;
    }

    .settings .lang-picker__trigger > .lang-picker__name {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    h1:hover span {
        animation: none;
    }

    .settings nav a {
        transition: none;
    }

    .lang-picker__chevron {
        transition: none;
    }

    .lang-picker.is-open .lang-picker__list {
        animation: none;
    }

    .settings.is-enhanced.options-open fieldset,
    .settings.is-enhanced.nav-open nav {
        animation: none;
    }

    /* The modifier controls keep their colours, they just stop moving. */
    .settings fieldset > div:not(.separator):not(.disabled) > label,
    .settings fieldset > div:not(.separator):not(.disabled) > label::after {
        transition: none;
        animation: none;
    }
}

/* A locked treatment keeps its place and turns into a padlock -----------------
   The circle the chips draw is the label's own `::after`, so the padlock is the
   same box with a different paint: nothing moves while the pointer runs along
   the row. These rules are last in the sheet because the ring, the hover tint
   and the blue check are declared above, and a locked chip is none of them.
   The viewBox is the padlock's own ink box (16 x 16 units, stroke included), not
   the 24 x 24 the drawing sits in, so `contain` makes the glyph fill the box.
   That box is the text's own size (1em) — as tall as the words it stands beside,
   and square, because a padlock is — and its horizontal padding takes it out to
   the width of the circle it covers: 13px of ring plus the 1.5px border it is
   drawn with, so 16px. Both sides follow the type size, and the padding is what
   keeps the row still while the pointer runs along it. */
.settings fieldset.settings-modifiers > div.is-locked > label {
    color: #8a90a6;
}

.settings fieldset.settings-modifiers > div.is-locked > label:hover,
.settings fieldset.settings-modifiers > div.is-locked > label:focus-visible {
    color: var(--linkedin-color);
}

.settings fieldset.settings-modifiers > div.is-locked:hover > label:hover::after,
.settings fieldset.settings-modifiers > div.is-locked:focus-within > label::after,
/* A phone has no pointer to hover with, so the panel rows show their padlock
   straight away and a tap is what asks for the ad that opens them -- directly,
   with no card in between (premium.js). */
.settings.is-enhanced.options-open fieldset.settings-modifiers > div.is-locked > label::after {
    display: inline-block;
    /* The drawing is 16 units wide by 21.2 tall, stroke included -- that is the
       whole padlock, shackle and all. The box is the ring's own width, as tall
       as that width makes the drawing (13 x 21.2/16 = 17.2px, 2.2px taller than
       the ring), and the margins give that difference back to the layout: 1px
       each side, standing in for the ring's border, and -1.1px above and below.
       The padlock therefore takes exactly the ring's box -- 13 + 1 + 1 = 15px in
       both directions -- while its ink is taller, which is what stops the
       shackle from being cropped and keeps the row from moving when the pointer
       runs along it. */
    --ring: 13px;
    --ring-border: 1px;
    width: var(--ring);
    height: calc(var(--ring) * 21.2 / 16);
    padding: 0;
    flex: none;
    box-sizing: border-box;
    margin: calc((var(--ring) + 2 * var(--ring-border) - var(--ring) * 21.2 / 16) / 2) var(--ring-border);
    vertical-align: middle;
    border: 0;
    border-radius: 0;
    background-color: var(--linkedin-color);
    background-image: none;
    /* The narrow strip keeps its tick hidden until the chip is checked, by
       fading it out and shrinking it: the padlock has to undo both, or it
       paints at half size and fully transparent. */
    opacity: 1;
    transform: none;
    /* A swap, not a fade: the ring underneath is declared with a transition on
       exactly these two properties, and letting it run left the padlock
       crawling between white and blue. */
    transition: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 0 16 21.2' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.2' y='11.6' width='13.6' height='8.4' rx='2.6'/%3E%3Cpath d='M6.8 11.6V6.4a5.2 5.2 0 0 1 10.4 0v5.2'/%3E%3Ccircle cx='12' cy='15.8' r='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 0 16 21.2' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5.2' y='11.6' width='13.6' height='8.4' rx='2.6'/%3E%3Cpath d='M6.8 11.6V6.4a5.2 5.2 0 0 1 10.4 0v5.2'/%3E%3Ccircle cx='12' cy='15.8' r='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The same panel rows, enhanced for a finger: a locked treatment is greyed out
   and shows its padlock, and the time left an open one has sits on the row
   itself, just before the indicator, instead of hanging under the chip (which
   only made sense in the one-line bar, where the pointer is doing the work). */
.settings.is-enhanced.options-open fieldset.settings-modifiers > div.is-locked > label {
    color: #8a90a6;
}

/* A panel row's indicator is 15px across on a phone, the bar's ring 13px, and
   the panel's has no border where the bar's has one: the padlock follows
   whichever one it is standing in for -- its height comes from that width -- so
   the footprint it takes is the ring's either way. */
@media (max-width: 1100px) {
    .settings.is-enhanced.options-open fieldset.settings-modifiers > div.is-locked > label::after {
        --ring: 15px;
        --ring-border: 0px;
    }
}

.settings.is-enhanced.options-open .settings-modifiers > div[data-left]::after {
    top: 50%;
    left: auto;
    right: calc(0.75rem + 15px + 0.6rem);
    transform: translateY(-50%);
    margin: 0;
    padding: 0.1rem 0.45rem;
    border: 0;
    box-shadow: none;
    background-color: rgba(0, 119, 181, 0.12);
    font-size: 0.68rem;
    opacity: 1;
    visibility: visible;
    transition: none;
}