/* robotpaper skins (2.0.0): loaded in every skin, Plain included. See ROBOTPAPER.md "Skins".
   1. helpers for the skin-only markup (rp-*.hbs; it carries the hidden attribute, so Plain never shows it)
   2. the "Skin" picker (partials/rp-skin-picker.hbs, run by assets/rp/skins.js). Its menu is deliberately neutral:
      system font, its own light/dark colours (following <html data-theme> and the OS like theme.css), so it looks the
      same in every skin. The header button only inherits the header's text colour. */

/* 1. helpers */
.rp-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 2. the picker */
:root {
    --rp-pk-bg: #ffffff;
    --rp-pk-text: #1d1d1f;
    --rp-pk-muted: #5c5c66;
    --rp-pk-border: #c9c9d1;
    --rp-pk-hover: #efeff3;
    --rp-pk-on: #e4e4ea;
    --rp-pk-focus: #1a5fd0;
    --rp-pk-shadow: 0 10px 30px rgb(0 0 0 / 0.16), 0 0 0 1px rgb(0 0 0 / 0.08);
}

:root[data-theme="dark"] {
    --rp-pk-bg: #232428;
    --rp-pk-text: #f1f1f3;
    --rp-pk-muted: #b4b4bd;
    --rp-pk-border: #55565e;
    --rp-pk-hover: #303137;
    --rp-pk-on: #3a3b42;
    --rp-pk-focus: #8db6ff;
    --rp-pk-shadow: 0 10px 30px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.12);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --rp-pk-bg: #232428;
        --rp-pk-text: #f1f1f3;
        --rp-pk-muted: #b4b4bd;
        --rp-pk-border: #55565e;
        --rp-pk-hover: #303137;
        --rp-pk-on: #3a3b42;
        --rp-pk-focus: #8db6ff;
        --rp-pk-shadow: 0 10px 30px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.12);
    }
}

.rp-skin-picker[hidden],
.rp-skin-picker__panel[hidden] {
    display: none !important;
}

.rp-skin-picker {
    position: relative;
    flex: none;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
}

.rp-skin-picker__btn {
    position: relative;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    font: inherit;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 8px;
}

.rp-skin-picker__btn svg {
    flex: none;
    width: 18px;
    height: 18px;
}

.rp-skin-picker__btn:focus-visible,
.rp-skin-picker__item:focus-visible {
    outline: 2px solid var(--rp-pk-focus);
    outline-offset: 2px;
}

.rp-skin-picker__current {
    font-weight: 400;
}

.rp-skin-picker__panel {
    position: absolute;
    z-index: 300;
    width: max-content;
    min-width: 248px;
    max-width: min(320px, calc(100vw - 24px));
    max-height: min(560px, 75vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    color: var(--rp-pk-text);
    text-align: start;
    background: var(--rp-pk-bg);
    border-radius: 12px;
    box-shadow: var(--rp-pk-shadow);
}

.rp-skin-picker__group + .rp-skin-picker__group {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--rp-pk-border);
}

.rp-skin-picker__heading {
    margin: 0;
    padding: 8px 10px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--rp-pk-muted);
    text-transform: uppercase;
}

.rp-skin-picker__item {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 6px 10px;
    margin: 0;
    font: inherit;
    font-weight: 400;
    color: inherit;
    text-align: start;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 8px;
}

.rp-skin-picker__item:hover {
    background: var(--rp-pk-hover);
}

.rp-skin-picker__item[aria-checked="true"] {
    font-weight: 650;
    background: var(--rp-pk-on);
}

.rp-skin-picker__item[aria-checked="true"]::after {
    margin-inline-start: auto;
    padding-inline-start: 12px;
    content: "\2713";
}

/* a small preview: the skin's page colour with its accent as a corner */
.rp-skin-picker__swatch {
    flex: none;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, var(--sw-bg) 0 58%, var(--sw-ac) 58% 100%);
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.25);
}

.rp-skin-picker__note {
    margin: 4px 0 0;
    padding: 6px 10px 4px;
    font-size: 13px;
    color: var(--rp-pk-muted);
    border-top: 1px solid var(--rp-pk-border);
}

/* Header (from 768px): a 44x44 icon button after the theme controls, the name for screen readers and the tooltip.
   Its layout box is 32px like Source's search button (-6px margins), the panel opens under it, aligned right. */
@media (min-width: 768px) {
    .gh-navigation-actions .rp-skin-picker__btn {
        width: 44px;
        height: 44px;
        margin: -6px;
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .gh-navigation-actions .rp-skin-picker__btn::before {
        position: absolute;
        inset: 0;
        z-index: -1;
        content: "";
        border-radius: 999px;
        pointer-events: none;
    }

    .gh-navigation-actions .rp-skin-picker__btn[aria-expanded="true"]::before {
        background: currentColor;
        opacity: 0.12;
    }

    .gh-navigation-actions .rp-skin-picker__btn svg {
        width: 20px;
        height: 20px;
    }

    .gh-navigation-actions .rp-skin-picker__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .gh-navigation-actions .rp-skin-picker__panel {
        top: calc(100% + 12px);
        inset-inline-end: -10px;
    }

    .gh-navigation-actions .rp-skin-picker__btn {
        isolation: isolate;
    }
}

/* Phones: in the burger menu (with the theme toggle, above Sign in / Subscribe), a full-width labelled row; the menu
   opens inline below it */
@media (max-width: 767px) {
    .gh-navigation-actions .rp-skin-picker {
        width: 100%;
        margin-bottom: 8px;
    }

    .gh-navigation-actions .rp-skin-picker__btn {
        justify-content: flex-start;
        width: 100%;
    }

    .gh-navigation-actions .rp-skin-picker__panel {
        position: static;
        width: auto;
        max-width: none;
        margin-top: 8px;
        max-height: none;
    }
}

/* Footer: a labelled button, centred, the menu opens above it */
.rp-skin-footer {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.rp-skin-footer .rp-skin-picker__panel {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}

/* Header width (same rule as the Theme button in theme.css, 1.11.1: the header row must show exactly the logo and nav
   links of 1.9.0 at every width).
   - Where the Theme button is shown (768-1151px; home page, with the Markdown buttons: to 1351px) the header Skin button
     is hidden and the picker is the "Skin" row in the Theme popover (rp-theme-menu.hbs).
   - Wider, the Skin button takes the Theme button's slot right after search, with its geometry: its 44x44 hit area
     exactly fills the gap between search and Sign in (-20px/-22px margins on its 32px box), and the 18px that adds to
     the actions column are given back in the same places (6px into the gap by the logo, 6px of the Sign in / Subscribe
     gap, 3px of Subscribe's padding a side). Measured with tools/skins/header-sweep.mjs against 1.11.2. */
.theme-menu__panel .rp-skin-picker--popover {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
}

#gh-navigation .theme-menu__panel .rp-skin-picker__btn {
    justify-content: flex-start;
    width: 100%;
    height: auto;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    font-size: 1.4rem;
    color: var(--rp-surface-text);
    border: 0;
    border-radius: 999px;
}

#gh-navigation .theme-menu__panel .rp-skin-picker__btn svg {
    width: 18px;
    height: 18px;
}

#gh-navigation .theme-menu__panel .rp-skin-picker__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
}

.theme-menu__panel .rp-skin-picker__panel {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    margin-top: 4px;
    box-shadow: none;
    padding: 0;
    background: transparent;
    color: inherit;
}

@media (min-width: 768px) and (max-width: 1151px) {
    #gh-navigation .gh-navigation-actions > .rp-skin-picker {
        display: none;
    }
}

@media (min-width: 1152px) and (max-width: 1351px) {
    #gh-navigation .gh-navigation-actions:has(> .rp-md-nav) > .rp-skin-picker {
        display: none;
    }

    #gh-navigation .gh-navigation-actions:not(:has(> .rp-md-nav)) > .rp-skin-picker:not([hidden]) {
        margin-inline: -20px -22px;
    }

    #gh-navigation .gh-navigation-actions:not(:has(> .rp-md-nav)):has(> .rp-skin-picker:not([hidden])) {
        margin-inline-start: -6px;
    }

    #gh-navigation .gh-navigation-actions:not(:has(> .rp-md-nav)):has(> .rp-skin-picker:not([hidden])) > .gh-navigation-members {
        gap: 14px;
    }

    #gh-navigation .gh-navigation-actions:not(:has(> .rp-md-nav)):has(> .rp-skin-picker:not([hidden])) > .gh-navigation-members .gh-button {
        padding-inline: calc(1.4em - 3px);
    }
}

@media (min-width: 1352px) {
    #gh-navigation .gh-navigation-actions > .rp-skin-picker:not([hidden]) {
        margin-inline: -20px -22px;
    }

    #gh-navigation .gh-navigation-actions:has(> .rp-skin-picker:not([hidden])) {
        margin-inline-start: -6px;
    }

    #gh-navigation .gh-navigation-actions:has(> .rp-skin-picker:not([hidden])) > .gh-navigation-members {
        gap: 14px;
    }

    #gh-navigation .gh-navigation-actions:has(> .rp-skin-picker:not([hidden])) > .gh-navigation-members .gh-button {
        padding-inline: calc(1.4em - 3px);
    }
}