/* Pieces shared by the public "Explorar" pages and the home (Components/Explore): link tabs, search box, filter
   chips, staggered lists, meters and sparklines. Motion uses the --pn-* tokens of site.css: transform/opacity only,
   ease-out, under 250 ms; hovers only on devices that really hover. */

/* ---------- Tabs (links or buttons) ---------- */

.pn-tabs {
    display: flex;
    gap: 2px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.pn-tabs::-webkit-scrollbar { display: none; }

.pn-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    text-decoration: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--pn-dur-fast) ease;
}

/* The underline grows from the middle when a tab becomes the active one. */
.pn-tab::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: currentColor;
    transform: scaleX(0);
    transition: transform var(--pn-dur) var(--pn-ease-out);
}

.pn-tab:focus-visible { color: var(--mud-palette-text-primary); }

.pn-tab.active,
.pn-tab[aria-current="page"],
.pn-tab[aria-pressed="true"] {
    color: var(--mud-palette-primary);
}

.pn-tab.active::after,
.pn-tab[aria-current="page"]::after,
.pn-tab[aria-pressed="true"]::after {
    transform: none;
}

.pn-dark .pn-tab.active,
.pn-dark .pn-tab[aria-current="page"],
.pn-dark .pn-tab[aria-pressed="true"] {
    color: var(--mud-palette-primary-lighten);
}

.pn-tab-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: var(--pn-radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}

@media (hover: hover) and (pointer: fine) {
    .pn-tab:hover { color: var(--mud-palette-text-primary); }
    .pn-tab.active:hover,
    .pn-tab[aria-current="page"]:hover { color: var(--mud-palette-primary); }
}

/* LinkTabs: a MudTabs tab bar only (the page draws the content of the active tab; shell.js slides it in). */
.pn-link-tabs { margin: 0 0 20px; }
.pn-link-tabs .mud-tabs-panels { display: none; }
.pn-link-tabs .mud-tab { min-height: 48px; }

/* ---------- Toolbar: search + chips above a list ---------- */

.pn-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin: 0 0 16px;
}

.pn-toolbar > .pn-search { flex: 1 1 260px; }

.pn-toolbar-note {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.pn-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.pn-search-icon {
    position: absolute;
    left: 12px;
    pointer-events: none;
    color: var(--mud-palette-text-secondary);
}

/* 16px text: iOS zooms the page into any smaller input. */
.pn-search input {
    width: 100%;
    min-height: 44px;
    padding: 0 76px 0 40px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 16px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--pn-dur-fast) ease, box-shadow var(--pn-dur-fast) ease;
}

.pn-search input::-webkit-search-cancel-button { display: none; }

.pn-search input::placeholder { color: var(--mud-palette-text-secondary); opacity: 1; }

.pn-search input:focus-visible {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.18);
}

.pn-search-end {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pn-search kbd {
    min-width: 22px;
    padding: 1px 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    font: 600 0.75rem/1.4 inherit;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* The "/" hint means nothing on a touch screen. */
@media (hover: none), (pointer: coarse) {
    .pn-search kbd { display: none; }
}

.pn-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--pn-dur-press) var(--pn-ease-out), background-color var(--pn-dur-fast) ease;
}

.pn-search-clear:active { transform: scale(.94); }

@media (hover: hover) and (pointer: fine) {
    .pn-search-clear:hover { background: var(--mud-palette-action-default-hover); }
}

/* ---------- Filter chips ---------- */

.pn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pn-chip-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-pill);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--pn-dur-fast) ease, border-color var(--pn-dur-fast) ease,
        color var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
}

/* A 44px touch target without making the chip itself bigger. */
.pn-chip-filter { position: relative; }
.pn-chip-filter::before {
    content: "";
    position: absolute;
    inset: -4px 0;
}

.pn-chip-filter:active { transform: scale(.97); }

.pn-chip-filter[aria-pressed="true"],
.pn-chip-filter[aria-current="page"] {
    border-color: transparent;
    background: rgba(var(--mud-palette-primary-rgb), 0.14);
    color: var(--mud-palette-primary);
}

.pn-dark .pn-chip-filter[aria-pressed="true"],
.pn-dark .pn-chip-filter[aria-current="page"] {
    color: var(--mud-palette-primary-lighten);
}

@media (hover: hover) and (pointer: fine) {
    .pn-chip-filter:hover { border-color: var(--mud-palette-text-secondary); color: var(--mud-palette-text-primary); }
    .pn-chip-filter[aria-pressed="true"]:hover { border-color: transparent; color: var(--mud-palette-primary); }
}

/* ---------- Staggered lists ---------- */

/* Children of [data-stagger] rise in one after another, growing a little, when they are inserted (first load, "show
   more"). The delay comes from --i, set by the page and capped there so a long list never makes the user wait. */


[data-stagger] > * {
    animation: pn-rise-pop 320ms var(--pn-ease-out) backwards;
    animation-delay: calc(min(var(--i, 0), 8) * 32ms);
}

.pn-reveal-on [data-reveal]:not([data-revealed]) [data-stagger] > * { animation: none; }

@media (prefers-reduced-motion: reduce) {
    [data-stagger] > * { animation-name: pn-fade; }
}

/* ---------- Meter (relative bar) ---------- */

/* The fill is scaled, never resized: --pn-fill goes from 0 to 1. */
.pn-meter {
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: var(--pn-radius-pill);
    background: var(--mud-palette-action-default-hover);
}

.pn-meter > span {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--pn-meter-color, var(--mud-palette-primary));
    transform: scaleX(var(--pn-fill, 0));
    transform-origin: left center;
    transition: transform var(--pn-dur) var(--pn-ease-out);
}

/* ---------- Sparkline ---------- */

.pn-spark {
    display: block;
    width: 100%;
    height: 36px;
    overflow: visible;
    color: var(--pn-spark-color, var(--mud-palette-primary));
}

.pn-spark-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.pn-spark-area {
    fill: currentColor;
    opacity: 0.12;
}

.pn-dark .pn-spark { color: var(--pn-spark-color, var(--mud-palette-primary-lighten)); }

/* ---------- Podium (shared by /ranking and the home) ---------- */

.pn-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.pn-podium-place {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 10px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius);
    background:
        linear-gradient(180deg, rgba(var(--pn-podium-rgb), 0.16), transparent 70%),
        var(--mud-palette-surface);
    text-align: center;
    min-width: 0;
    animation: pn-podium-in var(--pn-dur) var(--pn-ease-out) backwards;
}

.pn-podium-place::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    border-radius: var(--pn-radius) var(--pn-radius) 0 0;
    background: rgb(var(--pn-podium-rgb));
}

/* Gold in the middle and highest, silver left, bronze right; they come in 2 → 1 → 3 like a real podium. */
.pn-podium-1 { --pn-podium-rgb: 212, 160, 23; order: 2; padding-top: 32px; animation-delay: 80ms; }
.pn-podium-2 { --pn-podium-rgb: 154, 164, 173; order: 1; animation-delay: 0ms; }
.pn-podium-3 { --pn-podium-rgb: 184, 115, 51; order: 3; animation-delay: 160ms; }

@keyframes pn-podium-in {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
}

.pn-podium-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 1.1rem;
    color: #111;
    background: rgb(var(--pn-podium-rgb));
    box-shadow: 0 0 0 4px rgba(var(--pn-podium-rgb), 0.22);
}

.pn-podium-1 .pn-podium-medal { width: 50px; height: 50px; font-size: 1.3rem; }

.pn-podium-name {
    max-width: 100%;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-podium-name a {
    color: inherit;
    text-decoration: none;
}

/* The whole card is the link's hit area. */
.pn-podium-name a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.pn-podium-name a:focus-visible { outline: none; }
.pn-podium-place:has(a:focus-visible) {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.pn-podium-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pn-podium-value small {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.pn-podium-you {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.pn-podium-place:has(a) { transition: transform var(--pn-dur-press) var(--pn-ease-out), box-shadow var(--pn-dur-fast) ease; }
.pn-podium-place:has(a):active { transform: scale(.98); }

@media (hover: hover) and (pointer: fine) {
    .pn-podium-place:has(a):hover { box-shadow: 0 8px 22px rgba(var(--pn-podium-rgb), 0.22); }
}

@media (max-width: 600px) {
    .pn-podium { gap: 8px; }
    .pn-podium-place { padding: 14px 6px 12px; }
    .pn-podium-1 { padding-top: 24px; }
    .pn-podium-medal { width: 36px; height: 36px; font-size: 1rem; }
    .pn-podium-1 .pn-podium-medal { width: 42px; height: 42px; }
}

/* Inside a section that reveals on scroll, the podium waits for the reveal to rise. */
.pn-reveal-on [data-reveal]:not([data-revealed]) .pn-podium-place { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .pn-podium-place { animation-name: pn-fade; }
}

/* ---------- Highlighted search match ---------- */

mark.pn-match {
    padding: 0 1px;
    border-radius: 3px;
    background: rgba(var(--mud-palette-warning-rgb), 0.35);
    color: inherit;
}

/* ---------- Copy button that turns into a check ---------- */

.pn-copied-swap {
    display: inline-grid;
}

.pn-copied-swap > * {
    grid-area: 1 / 1;
    transition: opacity var(--pn-dur-fast) ease, filter var(--pn-dur-fast) ease, transform var(--pn-dur-fast) var(--pn-ease-out);
}

.pn-copied-swap > :last-child { opacity: 0; filter: blur(2px); transform: scale(.8); }
.pn-copied-swap[data-done] > :first-child { opacity: 0; filter: blur(2px); transform: scale(.8); }
.pn-copied-swap[data-done] > :last-child { opacity: 1; filter: none; transform: none; }

/* ---------- Side sheet (player card) ---------- */

/* Always in the page so it can animate both ways; closed it is off screen, transparent and inert. It comes in
   from the right on a desk and from the bottom on a phone, with the drawer curve; it leaves a little faster. */
.pn-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.pn-sheet-backdrop[data-open] {
    opacity: 1;
    pointer-events: auto;
    transition-duration: var(--pn-dur);
}

.pn-sheet {
    position: fixed;
    z-index: 1401;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(420px, 100vw);
    background: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    box-shadow: var(--pn-shadow-modal);
    outline: none;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 200ms var(--pn-ease-out), visibility 0s linear 200ms;
}

.pn-sheet[data-open] {
    transform: none;
    visibility: visible;
    transition: transform 320ms var(--pn-ease-drawer), visibility 0s;
}

.pn-sheet-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 12px 12px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* With a card loaded the head floats over its top corner: the card draws the name. */
.pn-sheet-head--float {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    justify-content: flex-end;
    padding: 10px 10px 0;
    border-bottom: 0;
    pointer-events: none;
}

.pn-sheet-head--float > * { pointer-events: auto; }

.pn-sheet-grip { display: none; }

.pn-sheet-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.pn-sheet-body {
    --pn-pc-pad: 20px;
    display: grid;
    align-content: start;
    gap: 18px;
    padding: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Phones: a bottom sheet that leaves the top of the page visible and respects the home indicator. */
@media (max-width: 600px) {
    .pn-sheet {
        top: auto;
        left: 0;
        width: auto;
        max-height: 88dvh;
        border-left: 0;
        border-top: 1px solid var(--mud-palette-lines-default);
        border-radius: var(--pn-radius) var(--pn-radius) 0 0;
        box-shadow: var(--pn-shadow-modal);
        transform: translateY(100%);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .pn-sheet-head { padding-top: 22px; }

    .pn-sheet-grip {
        display: block;
        position: absolute;
        top: 8px;
        left: 50%;
        width: 36px;
        height: 4px;
        margin-left: -18px;
        border-radius: 2px;
        background: var(--mud-palette-lines-default);
    }

    .pn-sheet-head--float { padding-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-sheet,
    .pn-sheet[data-open] { transform: none; }
    .pn-sheet { opacity: 0; transition: opacity 180ms ease, visibility 0s linear 180ms; }
    .pn-sheet[data-open] { opacity: 1; transition: opacity 180ms ease, visibility 0s; }
}

/* ---------- Week heat map (ActivityHeatmap: "when to play") ----------
   7 rows (Monday first) × 24 hours; --v (0..1) is the share of the busiest hour. */
.pn-heatmap { margin: 0; }

.pn-heatmap-caption {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

.pn-heatmap-caption .mud-icon-root { margin-top: 2px; color: var(--mud-palette-primary); flex-shrink: 0; }

.pn-heatmap-grid {
    display: grid;
    grid-template-columns: 18px repeat(24, minmax(0, 1fr));
    gap: 3px;
    align-items: center;
}

.pn-heatmap-hour,
.pn-heatmap-day {
    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.pn-heatmap-hour { padding-bottom: 4px; }

.pn-heatmap-cell {
    display: block;
    aspect-ratio: 1;
    border-radius: 4px;
    background: rgba(var(--mud-palette-primary-rgb), calc(.06 + var(--v, 0) * .9));
}

.pn-heatmap-cell.is-peak { outline: 2px solid var(--mud-palette-secondary); outline-offset: 1px; }

.pn-heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 12px;
    font-size: .72rem;
    color: var(--mud-palette-text-secondary);
}

.pn-heatmap-legend .pn-heatmap-cell { width: 12px; }

@media (max-width: 600px) {
    .pn-heatmap-grid { gap: 2px; grid-template-columns: 14px repeat(24, minmax(0, 1fr)); }
    .pn-heatmap-cell { border-radius: 2px; }
    .pn-heatmap-hour { font-size: .6rem; }
}

/* ---------- "Cómo unirse" (JoinSteps, /servers#unirse) ----------
   Three numbered steps on a rail (a real sequence, so the numbers carry the order), across on wide screens and
   down on narrow ones; step 2 holds the one filled action and its number is the only filled one. Then an
   unnumbered line of what is worth doing once playing. The page's one cut corner. */

.pn-join {
    margin-top: 40px;
    padding: 24px 28px;
    border: 1px solid var(--pn-line);
    background: var(--mud-palette-surface);
}

.pn-join-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    margin: 0 0 24px;
}

.pn-join-title {
    margin: 0;
    font-family: var(--pn-font-display);
    font-size: clamp(1.5rem, 2.8vw, 1.875rem);
    font-weight: 700;
    line-height: 1.15;
    text-wrap: balance;
}

.pn-join-lede { margin: 0; color: var(--mud-palette-text-secondary); }

.pn-join-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 0 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: pn-join;
}

.pn-join-step {
    --pn-join-num: 36px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    counter-increment: pn-join;
}

.pn-join-step::before {
    content: counter(pn-join);
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pn-join-num);
    height: var(--pn-join-num);
    margin-bottom: 6px;
    border: 1px solid var(--pn-line-strong);
    border-radius: var(--pn-radius-sm);
    background: var(--mud-palette-surface);
    font-family: var(--pn-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The rail: a hairline from each number to the next one. */
.pn-join-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--pn-join-num) / 2);
    left: calc(var(--pn-join-num) + 8px);
    right: -20px;
    height: 1px;
    background: var(--pn-line-strong);
}

.pn-join-step--key::before {
    border-color: transparent;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.pn-join-step-title {
    margin: 0;
    font-family: var(--pn-font-text);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
}

.pn-join-step p {
    margin: 0;
    max-width: 52ch;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

.pn-join-step p strong { color: var(--mud-palette-text-primary); font-weight: 600; }

.pn-join-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: auto;
    padding-top: 8px;
}

.pn-join-link {
    color: var(--pn-brand-text);
    font-weight: 600;
    text-decoration: none;
    text-underline-offset: 3px;
}

.pn-join-link:hover,
.pn-join-link:focus-visible { text-decoration: underline; }

/* The full address, ready to paste: mono, with its copy button inside. */
.pn-join-address {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    min-height: 36px;
    padding: 0 2px 0 12px;
    border: 1px solid var(--pn-line-strong);
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background);
}

.pn-join-address code {
    min-width: 0;
    padding: 0;
    background: none;
    font-family: var(--pn-font-mono);
    font-size: .875rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.pn-join-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--pn-radius-sm);
    background: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.pn-join-copy:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.pn-join-copy:active { transform: scale(.97); }

.pn-join-more {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 28px;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--pn-line);
}

.pn-join-more-title { margin: 0; font-weight: 600; }

.pn-join-more ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pn-join-more li { display: flex; align-items: center; gap: 8px; color: var(--mud-palette-text-secondary); }
.pn-join-more li > .mud-icon-root { flex-shrink: 0; }

@media (hover: hover) and (pointer: fine) {
    .pn-join-copy { transition: background-color var(--pn-dur-fast) ease, color var(--pn-dur-fast) ease; }
    .pn-join-copy:hover { background: var(--pn-brand-soft); color: var(--pn-brand-text); }
}

/* Narrower screens: the rail runs down, the numbers in their own column. */
@media (max-width: 960px) {
    .pn-join-steps { grid-template-columns: minmax(0, 1fr); }

    .pn-join-step {
        display: grid;
        grid-template-columns: var(--pn-join-num) minmax(0, 1fr);
        align-content: start;
        column-gap: 16px;
        row-gap: 6px;
        padding-bottom: 24px;
    }

    .pn-join-step:last-child { padding-bottom: 0; }
    .pn-join-step > * { grid-column: 2; }
    .pn-join-step::before { grid-column: 1; grid-row: 1; margin: 0; }

    .pn-join-step:not(:last-child)::after {
        top: calc(var(--pn-join-num) + 6px);
        bottom: 6px;
        left: calc(var(--pn-join-num) / 2);
        right: auto;
        width: 1px;
        height: auto;
    }

    .pn-join-step-title { align-self: center; min-height: var(--pn-join-num); display: flex; align-items: center; }
    .pn-join-actions { margin-top: 0; padding-top: 4px; }
}

@media (max-width: 600px) {
    .pn-join { padding: 20px 16px; --pn-cut: 12px; }
    .pn-join-more { flex-direction: column; gap: 10px; }
    .pn-join-more ul { flex-direction: column; gap: 10px; }
    .pn-join-copy { width: 44px; height: 44px; }
    .pn-join-address { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-join-copy:active { transform: none; }
}