/* Public help pages: sanctions, reporting, FAQ, how to join (Components/Help, Pages/Main/Help). */

.pn-help {
    display: grid;
    gap: 0;
}

/* A section of a guide sits on the page: an h2 with its icon, the prose, a hairline before the next one. */
.pn-help-section {
    height: auto;
    padding: 24px 0;
    scroll-margin-top: calc(var(--pn-appbar-h) + 12px);
}

.pn-help-section:first-child { padding-top: 4px; }

.pn-help-section + .pn-help-section { border-top: 1px solid var(--mud-palette-lines-default); }

.pn-help-section .pn-section-title > span {
    font-family: var(--pn-font-display);
    font-size: 1.3125rem;
    line-height: 1.25;
}

/* Prose reads at a comfortable measure; tables and lists of rules may run wider. */
.pn-help-prose > p,
.pn-help-prose > ul,
.pn-help-prose > ol:not(.pn-rules-list),
.pn-help-prose > .pn-help-note { max-width: 75ch; }

/* The section title is an h2 (the page header holds the h1) but looks like the other pn-section titles. */
h2.pn-section-title {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.pn-help-prose {
    color: var(--mud-palette-text-primary);
    line-height: 1.6;
}

.pn-help-prose > :first-child { margin-top: 0; }
.pn-help-prose > :last-child { margin-bottom: 0; }

.pn-help-prose p { margin: 0 0 12px; }

.pn-help-prose ul,
.pn-help-prose ol {
    margin: 0 0 12px;
    padding-left: 22px;
}

.pn-help-prose li + li { margin-top: 6px; }

.pn-help-prose a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.pn-dark .pn-help-prose a { color: var(--mud-palette-primary-lighten); }

.pn-help-prose h3 {
    margin: 18px 0 8px;
    font-size: 1rem;
    font-weight: 700;
}

.pn-help-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0;
    padding: 12px 14px;
    border: 1px solid rgba(var(--mud-palette-info-rgb), 0.35);
    border-radius: var(--pn-radius-md);
    background: rgba(var(--mud-palette-info-rgb), 0.06);
}

.pn-help-note-icon {
    flex: none;
    margin-top: 2px;
    color: var(--mud-palette-info);
}

.pn-help-note-body { min-width: 0; }

.pn-help-note.pn-help-warn {
    border-color: rgba(var(--mud-palette-warning-rgb), 0.45);
    background: rgba(var(--mud-palette-warning-rgb), 0.08);
}

.pn-help-warn .pn-help-note-icon { color: var(--mud-palette-warning); }

.pn-help-note-body > :last-child,
.pn-help-note > :last-child { margin-bottom: 0; }

.pn-dark .pn-help-note-icon { color: var(--mud-palette-info-lighten); }
.pn-dark .pn-help-warn .pn-help-note-icon { color: var(--mud-palette-warning-lighten); }

/* Table of contents */
.pn-help-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.pn-help-toc a {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

.pn-help-toc a:hover,
.pn-help-toc a:focus-visible {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

/* Plain data table that scrolls sideways on a phone instead of breaking the page */
.pn-help-tablewrap {
    margin: 0 0 12px;
    overflow-x: auto;
}

.pn-help-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.pn-help-table th,
.pn-help-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-align: left;
    white-space: nowrap;
}

.pn-help-table th {
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.pn-help-table tbody th { color: var(--mud-palette-text-primary); }

/* Numbered steps */
.pn-help-steps {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: pn-step;
}

.pn-help-steps > li {
    position: relative;
    margin: 0;
    padding-left: 48px;
    counter-increment: pn-step;
}

.pn-help-steps > li::before {
    content: counter(pn-step);
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--pn-radius-sm);
    font-family: var(--pn-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
}

.pn-help-steps strong { display: block; }

.pn-help-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.pn-help-faq .mud-expand-panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md) !important;
    background: var(--mud-palette-surface);
}

.pn-help-faq .mud-expand-panel + .mud-expand-panel { margin-top: 8px; }

/* Numbered rules: "2.3" is a link to the rule itself */
.pn-rules-list,
.pn-help-prose .pn-rules-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pn-rule {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    scroll-margin-top: 88px;
}

.pn-help-prose li.pn-rule + li.pn-rule { margin-top: 0; }
.pn-rule:last-child { border-bottom: 0; }

.pn-rule-number,
.pn-help-prose a.pn-rule-number {
    flex: 0 0 auto;
    min-width: 2.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.pn-rule-text {
    flex: 1 1 auto;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.pn-rule-copy { opacity: 0.55; }
.pn-rule:hover .pn-rule-copy,
.pn-rule-copy:focus-visible { opacity: 1; }

.pn-rule {
    border-radius: var(--pn-radius-md);
    transition: background-color var(--pn-dur) ease;
}

/* The rule a link points to (/normas#n-2-3) is tinted, and the tint pulses once so the eye finds it. */
.pn-rule:target {
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
    animation: pn-rule-found 1.2s ease-out 1;
}

@keyframes pn-rule-found {
    0%, 30% { background: rgba(var(--mud-palette-primary-rgb), 0.22); }
}

/* ---------- Help pages: index at the side on a wide screen (HelpLayout) ---------- */

.pn-help-layout {
    display: grid;
    gap: 16px;
}

.pn-help-aside-title {
    display: none;
    margin: 0 0 6px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* On a phone the index is a row of chips that scrolls sideways. */
.pn-help-index {
    flex-wrap: nowrap;
    margin: 0;
    padding-bottom: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.pn-help-index a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.pn-help-index a[aria-disabled="true"] { opacity: 0.45; }

.pn-help-index-number {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.pn-help-index a[data-current],
.pn-help-index a[data-current] .pn-help-index-number {
    color: var(--mud-palette-primary);
}

.pn-dark .pn-help-index a[data-current],
.pn-dark .pn-help-index a[data-current] .pn-help-index-number {
    color: var(--mud-palette-primary-lighten);
}

.pn-help-main { min-width: 0; }

@media (min-width: 960px) {
    .pn-help-layout {
        grid-template-columns: 230px minmax(0, 1fr);
        align-items: start;
        gap: 28px;
    }

    .pn-help-aside {
        position: sticky;
        top: calc(var(--pn-appbar-h) + 20px);
        max-height: calc(100dvh - var(--pn-appbar-h) - 40px);
        overflow-y: auto;
    }

    .pn-help-aside-title { display: block; }

    .pn-help-index {
        flex-direction: column;
        gap: 2px;
        overflow: visible;
    }

    /* A quiet list with a marker that slides along the left edge to the section being read. */
    .pn-help-index a {
        position: relative;
        display: flex;
        padding: 8px 12px;
        border: 0;
        border-radius: var(--pn-radius-md);
        background: none;
        white-space: normal;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
        transition: color var(--pn-dur-fast) ease, background-color var(--pn-dur-fast) ease;
    }

    /* The section being read: the violet wash and the stronger weight, no side bar. */
    .pn-help-index a[data-current] {
        font-weight: 700;
        background: var(--pn-brand-soft);
    }

    .pn-help-index-title { flex: 1; }
}

@media (hover: hover) and (pointer: fine) {
    .pn-help-index a:hover { color: var(--mud-palette-text-primary); }
}

/* A table wider than the phone scrolls inside its box; a shadow at the edge says there is more. */
.pn-help-tablewrap {
    background:
        linear-gradient(90deg, var(--mud-palette-surface) 30%, transparent) left / 24px 100% no-repeat local,
        linear-gradient(270deg, var(--mud-palette-surface) 30%, transparent) right / 24px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.16), transparent) left / 10px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.16), transparent) right / 10px 100% no-repeat scroll;
    overscroll-behavior-x: contain;
}

.pn-help-footnote {
    margin: 16px 0 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.pn-rule-tools {
    display: inline-flex;
    flex: 0 0 auto;
}

/* ---------- /ayuda ---------- */

.pn-faq-tools { margin: 0 0 20px; }

.pn-faq-item { scroll-margin-top: calc(var(--pn-appbar-h) + 16px); }

.pn-faq-question { font-weight: 600; }

/* One heading per topic while nothing filters the list; the topic sits quietly under a question found by a search. */
.pn-faq-group + .pn-faq-group { margin-top: 24px; }

.pn-faq-group > h3 {
    margin: 0 0 10px;
    font-family: var(--pn-font-display);
    font-size: 1.3125rem;
    font-weight: 700;
}

.pn-faq-topic {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.pn-faq-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.pn-faq-contact { margin-top: 28px; }

.pn-faq-contact .pn-callout { flex-wrap: wrap; }

.pn-faq-contact-text { flex: 1 1 260px; }

.pn-faq-contact-text h2 {
    margin: 0 0 4px;
    font-size: 1.15rem;
}

.pn-faq-contact-text p {
    margin: 0;
    color: var(--mud-palette-text-secondary);
}

.pn-faq-contact .pn-help-actions { margin-top: 0; }

@media (hover: hover) and (pointer: fine) {
    .pn-help-faq .mud-expand-panel { transition: border-color var(--pn-dur-fast) ease; }
    .pn-help-faq .mud-expand-panel:hover { border-color: var(--mud-palette-text-secondary); }
}

/* ---------- Guides: the hub on /ayuda, the chapter pages (/ayuda/{slug}, /staff/guia/{slug}) ---------- */

.pn-guide-hub { margin: 4px 0 32px; }

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

/* The chapters as the questions they answer: a list on the page, rows split by a hairline. */
.pn-guide-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.pn-guide-list > li { border-bottom: 1px solid var(--mud-palette-lines-default); }

.pn-guide-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 12px 8px;
    border-radius: var(--pn-radius-md);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: background-color var(--pn-dur-fast) ease;
}

.pn-guide-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.pn-guide-item-text {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.pn-guide-item-question { font-weight: 600; }

.pn-guide-item-summary {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.pn-guide-item-go {
    flex: none;
    color: var(--mud-palette-text-secondary);
    transition: transform var(--pn-dur-fast) var(--pn-ease-out), color var(--pn-dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
    .pn-guide-item:hover { background: var(--mud-palette-action-default-hover); }
    .pn-guide-item:hover .pn-guide-item-go {
        color: var(--mud-palette-primary);
        transform: translateX(3px);
    }
}

.pn-guide-hub-foot {
    margin: 14px 0 0;
    max-width: 75ch;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.pn-guide-hub-foot a { color: var(--mud-palette-primary); }

.pn-faq-head {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.pn-faq-head .pn-guide-hub-title { margin: 0; }

.pn-faq-head .pn-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 4px 0;
}

.pn-faq-head .pn-chip-filter { flex: none; }

/* The reader's own standing inside a chapter ("Tú: nivel 12, rango Veterano"): quiet, one line, violet only on the
   number that is theirs. */
.pn-guide-you {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 12px 0;
    padding: 10px 14px;
    max-width: 75ch;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background-gray);
    font-size: 0.9375rem;
}

.pn-guide-you-label {
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

.pn-guide-you strong {
    color: var(--pn-brand-text);
    font-variant-numeric: tabular-nums;
}

/* Small key/value tables inside a chapter (the curve, the milestones, the weights). */
.pn-guide-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.pn-help-prose li.pn-guide-chip + li.pn-guide-chip { margin-top: 0; }

.pn-guide-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pn-guide-chip small {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pn-help-table td.pn-num,
.pn-help-table th.pn-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Previous / next chapter at the end of a chapter. */
.pn-guide-pager {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.pn-guide-pager a {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: border-color var(--pn-dur-fast) ease;
}

.pn-guide-pager a.pn-guide-next { text-align: right; }

.pn-guide-pager small { color: var(--mud-palette-text-secondary); }

.pn-guide-pager strong { font-weight: 600; }

.pn-guide-pager a:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .pn-guide-pager a:hover { border-color: var(--mud-palette-primary); }
}

.pn-guide-back {
    margin: 20px 0 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.pn-guide-back a { color: var(--mud-palette-primary); }

.pn-dark .pn-guide-hub-foot a,
.pn-dark .pn-guide-back a { color: var(--mud-palette-primary-lighten); }

@media (prefers-reduced-motion: reduce) {
    .pn-guide-item,
    .pn-guide-item-go,
    .pn-guide-pager a,
    .pn-rule { transition: none; }

    .pn-rule:target { animation: none; }
}

/* The cosmetics catalog of /ayuda/distintivos: name, then how to get it, one per row. */
.pn-help-prose .pn-guide-cosmetics {
    display: grid;
    gap: 0;
    padding: 0;
    list-style: none;
    max-width: none;
}

.pn-guide-cosmetics > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pn-help-prose .pn-guide-cosmetics > li + li { margin-top: 0; }

.pn-guide-cosmetics > li:last-child { border-bottom: 0; }

.pn-guide-cosmetic-how {
    flex: 1 1 260px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.9375rem;
}

/* A staff-chosen colour is data: shown as a swatch with a border so even white reads. */
.pn-guide-swatch {
    width: 16px;
    height: 16px;
    flex: none;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--pn-radius-sm);
    background: var(--pn-swatch);
}