/* The report form (/scpsl/report): a four-step wizard with a side summary. Prefix pn-rf-. Palette variables only;
   dark-only tweaks under .pn-dark. Motion: the step enters from the side it comes from ([data-dir]), the stepper
   line fills, checks draw themselves, chosen cards tint, previews unfold (grid rows 0fr -> 1fr). Everything is
   still under prefers-reduced-motion. */

.pn-rf {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pn-rf-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (min-width: 1280px) {
    .pn-rf-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); }
}

/* ---------- Stepper ---------- */

.pn-rf-stepper {
    position: relative;
}

.pn-rf-stepper ol {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The line runs from the centre of the first node to the centre of the last; its fill is scaled, never resized. */
.pn-rf-stepper ol::before,
.pn-rf-stepper ol::after {
    content: "";
    position: absolute;
    top: 17px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    border-radius: 2px;
    background: var(--mud-palette-lines-default);
}

.pn-rf-stepper ol::after {
    background: var(--mud-palette-primary);
    transform: scaleX(var(--pn-rf-progress, 0));
    transform-origin: left center;
    transition: transform var(--pn-dur) var(--pn-ease-out);
}

.pn-rf-stepper li { position: relative; z-index: 1; display: flex; justify-content: center; }

.pn-rf-stepper button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: color var(--pn-dur-fast) ease;
}

.pn-rf-stepper button:disabled { cursor: default; }
.pn-rf-stepper button:focus-visible { outline: none; }
.pn-rf-stepper button:focus-visible .pn-rf-node { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.pn-rf-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 50%;
    background: var(--mud-palette-surface);
    font-weight: 600;
    transition: border-color var(--pn-dur-fast) ease, background-color var(--pn-dur-fast) ease,
        color var(--pn-dur-fast) ease, transform var(--pn-dur) var(--pn-ease-out);
}

.pn-rf-node svg { width: 18px; height: 18px; }

.pn-rf-stepper li.is-done button { color: var(--mud-palette-text-primary); }

.pn-rf-stepper li.is-done .pn-rf-node {
    border-color: var(--mud-palette-success);
    background: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
    animation: pn-pop var(--pn-dur) var(--pn-ease-out);
}

.pn-rf-stepper li.is-now button { color: var(--mud-palette-primary); font-weight: 600; }

.pn-rf-stepper li.is-now .pn-rf-node {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    box-shadow: 0 0 0 4px rgba(var(--mud-palette-primary-rgb), .16);
}

@media (hover: hover) and (pointer: fine) {
    .pn-rf-stepper li.is-done button:not(:disabled):hover .pn-rf-node { transform: scale(1.08); }
}

.pn-rf-stepper-mobile,
.pn-rf-stepper-bar { display: none; }

@media (max-width: 599.98px) {
    .pn-rf-stepper ol { display: none; }

    .pn-rf-stepper-mobile {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin: 0 0 8px;
        font-size: 0.85rem;
        color: var(--mud-palette-text-secondary);
    }

    .pn-rf-stepper-mobile strong { color: var(--mud-palette-text-primary); font-size: 1rem; }

    .pn-rf-stepper-bar {
        display: block;
        position: relative;
        height: 4px;
        overflow: hidden;
        border-radius: 999px;
        background: var(--mud-palette-action-default-hover);
    }

    /* At the first step a quarter is already full: the bar says "where you are", not "what is left". */
    .pn-rf-stepper-bar span {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: var(--mud-palette-primary);
        transform: scaleX(calc(.25 + var(--pn-rf-progress, 0) * .75));
        transform-origin: left center;
        transition: transform var(--pn-dur) var(--pn-ease-out);
    }
}

/* Checks draw themselves (stepper nodes, summary ticks). */
.pn-rf-check {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 0;
    animation: pn-rf-draw 320ms var(--pn-ease-out) both;
}

@keyframes pn-rf-draw {
    from { stroke-dashoffset: 24; }
}


/* ---------- Main card and steps ---------- */

.pn-rf-card-main {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius);
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.pn-rf-step {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    animation: pn-rf-enter-fwd var(--pn-dur) var(--pn-ease-out) both;
}

.pn-rf-step:focus { outline: none; }
.pn-rf-step[data-dir="back"] { animation-name: pn-rf-enter-back; }

@keyframes pn-rf-enter-fwd {
    from { opacity: 0; transform: translateX(16px); }
}

@keyframes pn-rf-enter-back {
    from { opacity: 0; transform: translateX(-16px); }
}

.pn-rf-step-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.pn-rf-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--pn-radius-md);
    flex-shrink: 0;
}

.pn-rf-step-head h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 650;
    line-height: 1.25;
}

.pn-rf-step-head p {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
}

.pn-rf-group {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.pn-rf-group legend {
    margin-bottom: 10px;
    padding: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.pn-rf-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 8px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

/* ---------- Choice cards (reasons, servers, modes) ---------- */

.pn-rf-reasons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.pn-rf-places {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.pn-rf-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md);
    background: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--pn-dur-fast) ease, background-color var(--pn-dur-fast) ease,
        box-shadow var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
}

.pn-rf-card:active { transform: scale(.97); }

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

.pn-rf-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--pn-radius-md);
    flex-shrink: 0;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    transition: background-color var(--pn-dur-fast) ease, color var(--pn-dur-fast) ease;
}

.pn-rf-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pn-rf-card-text strong { font-weight: 600; }
.pn-rf-card-text small { font-size: 0.78rem; color: var(--mud-palette-text-secondary); }

.pn-rf-card.is-on {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), .08);
    box-shadow: 0 0 0 1px var(--mud-palette-primary) inset;
}

.pn-rf-card.is-on .pn-rf-card-icon {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

@media (hover: hover) and (pointer: fine) {
    .pn-rf-card:not(.is-on):hover {
        border-color: rgba(var(--mud-palette-primary-rgb), .5);
        background: var(--mud-palette-action-default-hover);
    }
}

.pn-rf-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--mud-palette-success-rgb), .12);
    color: var(--mud-palette-success);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pn-rf-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: pn-rf-breathe 2.4s ease-in-out infinite;
}

@keyframes pn-rf-breathe {
    50% { opacity: .35; }
}

.pn-rf-suggest {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px dashed rgba(var(--mud-palette-info-rgb), .6);
    border-radius: var(--pn-radius-md);
    background: rgba(var(--mud-palette-info-rgb), .07);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
    animation: pn-drop var(--pn-dur) var(--pn-ease-out) both;
    transition: background-color var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
}

.pn-rf-suggest .mud-icon-root { color: var(--mud-palette-info); }
.pn-rf-suggest:active { transform: scale(.98); }

@media (hover: hover) and (pointer: fine) {
    .pn-rf-suggest:hover { background: rgba(var(--mud-palette-info-rgb), .13); }
}

.pn-rf-quick { margin: 0; }

/* Something that shows up after a choice (warnings): a short fade. */
.pn-rf-pop { animation: pn-drop var(--pn-dur) var(--pn-ease-out) both; }


/* A block that unfolds: grid rows 0fr -> 1fr animate its real height without measuring it. */
.pn-rf-reveal {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--pn-dur) var(--pn-ease-out), opacity var(--pn-dur) ease;
}

.pn-rf-reveal > div { min-height: 0; overflow: hidden; }

.pn-rf-reveal[data-open="true"] {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* ---------- Player ---------- */

.pn-rf-player {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 2px 0;
}

.pn-rf-player .pn-tier { margin-left: auto; }

.pn-rf-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), .9), rgba(var(--mud-palette-secondary-rgb), .9));
    color: #fff;
    font-weight: 700;
}

.pn-rf-avatar--sm { width: 26px; height: 26px; font-size: 0.78rem; }

.pn-rf-live {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border: 2px solid var(--mud-palette-surface);
    border-radius: 50%;
    background: var(--mud-palette-success);
}

.pn-rf-player-text { display: flex; flex-direction: column; min-width: 0; }
.pn-rf-player-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-rf-player-text small { display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.78rem; color: var(--mud-palette-text-secondary); }
.pn-rf-online { color: var(--mud-palette-success); font-weight: 600; }

.pn-rf-player-chosen {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-primary);
    border-radius: var(--pn-radius-md);
    background: rgba(var(--mud-palette-primary-rgb), .06);
    animation: pn-pop var(--pn-dur) var(--pn-ease-out);
}

.pn-rf-player-chosen .pn-rf-player { flex: 1; }

/* Other players of the same incident: quieter than the main one. */
.pn-rf-player-chosen--other {
    padding: 10px 14px;
    border-color: var(--pn-line);
    background: transparent;
}

.pn-rf-others {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.pn-rf-others h3 { margin: 0; font-size: 1rem; }

.pn-rf-others p,
.pn-rf-staff-note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

.pn-rf-staff-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--mud-palette-primary-rgb), .3);
    border-radius: var(--pn-radius-sm);
    background: rgba(var(--mud-palette-primary-rgb), .06);
}

.pn-rf-nearby p {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.pn-rf-nearby-list { display: flex; flex-wrap: wrap; gap: 8px; }

.pn-rf-nearby-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 4px 12px 4px 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color var(--pn-dur-fast) ease, background-color var(--pn-dur-fast) ease,
        transform var(--pn-dur-press) var(--pn-ease-out);
}

.pn-rf-nearby-chip > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-rf-nearby-chip:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
    .pn-rf-nearby-chip:hover { border-color: var(--mud-palette-primary); background: var(--mud-palette-action-default-hover); }
}

/* ---------- Proof ---------- */

.pn-rf-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--pn-radius-md);
    background: rgba(var(--mud-palette-warning-rgb), .09);
    font-size: 0.88rem;
}

.pn-rf-tip .mud-icon-root { margin-top: 1px; color: var(--mud-palette-warning); }

.pn-rf-preview {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background);
}

.pn-rf-preview header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.pn-rf-preview-count {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--mud-palette-action-default-hover);
    font-weight: 500;
}

/* ---------- Review ---------- */

.pn-rf-review {
    display: grid;
    gap: 0;
    margin: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md);
    overflow: hidden;
}

.pn-rf-review > div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 12px 16px;
}

.pn-rf-review > div + div { border-top: 1px solid var(--mud-palette-lines-default); }

.pn-rf-review dt {
    padding-top: 2px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.pn-rf-review dd { margin: 0; min-width: 0; font-weight: 500; }
.pn-rf-review dd::first-letter { text-transform: uppercase; }

.pn-rf-review-wide dd { font-weight: 400; }

.pn-rf-review-reason { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 599.98px) {
    .pn-rf-review > div { grid-template-columns: minmax(0, 1fr) auto; }
    .pn-rf-review dt { grid-column: 1 / -1; padding: 0; }
    .pn-rf-review dd { grid-column: 1; }
}

.pn-rf-confirm {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.92rem;
    cursor: pointer;
}

/* ---------- Footer navigation ---------- */

.pn-rf-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 14px 24px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray, var(--mud-palette-background));
}

.pn-rf-nav-why {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    animation: pn-drop var(--pn-dur-fast) ease both;
}

.pn-rf-nav-buttons {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* Phones: the buttons stay at hand above the tab bar. */
@media (max-width: 959.98px) {
    .pn-rf-nav {
        position: sticky;
        bottom: 0;
        z-index: 2;
        box-shadow: 0 -6px 16px rgba(0, 0, 0, .08);
    }

    .pn-has-bottomnav .pn-rf-nav { bottom: calc(60px + env(safe-area-inset-bottom)); }
    .pn-rf-card-main { overflow: visible; }
    .pn-rf-step { padding: 18px 16px; }
    .pn-rf-nav { padding: 12px 16px; }
}

@media (max-width: 599.98px) {
    .pn-rf-nav-buttons { width: 100%; }
    .pn-rf-nav-buttons > * { flex: 1; }
}

/* ---------- Summary (wide screens) ---------- */

.pn-rf-summary { display: none; }

/* Narrower screens: one line above the step that opens into the same checklist. */
.pn-rf-summary-compact { margin-bottom: 16px; }

.pn-rf-summary-compact details {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background);
}

.pn-rf-summary-compact summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    min-height: 44px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    font-size: .875rem;
}

.pn-rf-summary-compact summary::-webkit-details-marker { display: none; }

.pn-rf-summary-compact summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    align-self: center;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--pn-dur-fast) var(--pn-ease-out);
    opacity: .7;
}

.pn-rf-summary-compact details[open] summary::after { transform: rotate(-135deg); }

.pn-rf-summary-compact summary:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--pn-radius-md);
}

.pn-rf-summary-compact-title { font-weight: 650; }

.pn-rf-summary-compact-count,
.pn-rf-summary-compact-quota { color: var(--mud-palette-text-secondary); }

.pn-rf-summary-compact .pn-rf-checklist { padding: 0 14px 12px; }

@media (min-width: 1280px) {
    .pn-rf-summary-compact { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-rf-summary-compact summary::after { transition: none; }
}

@media (min-width: 1280px) {
    .pn-rf-summary {
        position: sticky;
        top: 84px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 20px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: var(--pn-radius);
        background: var(--mud-palette-surface);
    }
}

.pn-rf-summary h3 { margin: 0; font-size: 1rem; font-weight: 650; }

.pn-rf-checklist {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pn-rf-checklist li { display: flex; align-items: center; gap: 10px; }

.pn-rf-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--mud-palette-success-text);
    transition: background-color var(--pn-dur-fast) ease, border-color var(--pn-dur-fast) ease;
}

.pn-rf-tick svg { width: 14px; height: 14px; visibility: hidden; }

.pn-rf-checklist li.is-done .pn-rf-tick {
    border-color: var(--mud-palette-success);
    background: var(--mud-palette-success);
    animation: pn-pop var(--pn-dur) var(--pn-ease-out);
}

.pn-rf-checklist li.is-done .pn-rf-tick svg { visibility: visible; }

.pn-rf-checklist-text { display: flex; flex-direction: column; min-width: 0; font-size: 0.88rem; }

.pn-rf-checklist-text small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.pn-rf-quota { display: flex; flex-direction: column; gap: 6px; }

.pn-rf-quota-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.pn-rf-quota-head strong { font-variant-numeric: tabular-nums; }
.pn-rf-quota small { font-size: 0.76rem; color: var(--mud-palette-text-secondary); }

.pn-rf-summary-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.82rem;
    color: var(--mud-palette-warning);
}

.pn-rf-summary-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: 0.85rem;
}

.pn-rf-summary-links a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    transition: color var(--pn-dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
    .pn-rf-summary-links a:hover { color: var(--mud-palette-primary); }
}

/* ---------- Sent ---------- */

.pn-rf-sent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 24px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius);
    background:
        radial-gradient(80% 120% at 50% 0%, rgba(var(--mud-palette-success-rgb), .12), transparent 70%),
        var(--mud-palette-surface);
    text-align: center;
    animation: pn-drop var(--pn-dur) var(--pn-ease-out) both;
}

.pn-rf-sent h2 { margin: 4px 0 0; font-size: 1.5rem; font-weight: 700; }
.pn-rf-sent > p { margin: 0; color: var(--mud-palette-text-secondary); }

.pn-rf-sent-mark {
    width: 72px;
    height: 72px;
    color: var(--mud-palette-success);
}

.pn-rf-sent-mark circle,
.pn-rf-sent-mark path {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pn-rf-sent-mark circle {
    stroke-dasharray: 151;
    animation: pn-rf-ring 520ms var(--pn-ease-out) both;
}

.pn-rf-sent-mark path {
    stroke-dasharray: 34;
    animation: pn-rf-tick 320ms var(--pn-ease-out) 380ms both;
}

@keyframes pn-rf-ring {
    from { stroke-dashoffset: 151; }
    to { stroke-dashoffset: 0; }
}

@keyframes pn-rf-tick {
    from { stroke-dashoffset: 34; }
    to { stroke-dashoffset: 0; }
}

.pn-rf-next {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 640px;
    margin: 12px 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.pn-rf-next li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md);
    color: var(--mud-palette-text-secondary);
}

.pn-rf-next li.is-done {
    border-color: rgba(var(--mud-palette-success-rgb), .5);
    color: var(--mud-palette-success);
}

.pn-rf-next li span { display: flex; flex-direction: column; gap: 2px; }
.pn-rf-next li strong { color: var(--mud-palette-text-primary); font-size: 0.9rem; }
.pn-rf-next li small { font-size: 0.76rem; color: var(--mud-palette-text-secondary); }

@media (max-width: 599.98px) {
    .pn-rf-next { grid-template-columns: 1fr; }
}

/* ---------- Quota used up: the open reports ---------- */

.pn-rf-open-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto 16px;
    padding: 0;
    list-style: none;
    text-align: left;
}

.pn-rf-open-list a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--pn-dur-fast) ease;
}

.pn-rf-open-list small { font-size: 0.78rem; color: var(--mud-palette-text-secondary); }

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

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

@media (prefers-reduced-motion: reduce) {
    .pn-rf-step,
    .pn-rf-step[data-dir="back"] { animation-name: pn-rf-still; }

    .pn-rf-check,
    .pn-rf-sent-mark circle,
    .pn-rf-sent-mark path,
    .pn-rf-live-dot,
    .pn-rf-player-chosen,
    .pn-rf-stepper li.is-done .pn-rf-node,
    .pn-rf-checklist li.is-done .pn-rf-tick { animation: none; }

    .pn-rf-pop,
    .pn-rf-suggest,
    .pn-rf-sent,
    .pn-rf-nav-why { animation-name: pn-rf-still; }

    .pn-rf-stepper ol::after,
    .pn-rf-stepper-bar span,
    .pn-rf-reveal,
    .pn-rf-card,
    .pn-rf-nearby-chip { transition: none; }

    .pn-rf-card:active,
    .pn-rf-nearby-chip:active,
    .pn-rf-suggest:active { transform: none; }
}

@keyframes pn-rf-still {
    from { opacity: 0; }
}

/* ---------- "Tus partidas" (step 2) ---------- */

.pn-rf-sessions { margin-bottom: 14px; }

.pn-rf-session-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

.pn-rf-session {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--pn-dur-fast) var(--pn-ease-out), background-color var(--pn-dur-fast) var(--pn-ease-out);
}

.pn-rf-session strong { font-size: .875rem; font-weight: 650; }

.pn-rf-session small {
    color: var(--mud-palette-text-secondary);
    font-family: var(--pn-font-mono);
    font-size: .75rem;
}

.pn-rf-session.is-on {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

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

.pn-rf-session:active { transform: scale(.97); }

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

.pn-rf-picker { max-width: 200px; }

@media (prefers-reduced-motion: reduce) {
    .pn-rf-session { transition: none; }
    .pn-rf-session:active { transform: none; }
}

/* Proof files (step 3): a drop zone, then the uploaded files. */
.pn-rf-upload { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.pn-rf-upload h3 { margin: 0; font-size: 1rem; }
.pn-rf-dropwrap { position: relative; }
.pn-rf-drop-wrap { margin: 0; position: static !important; }
/* MudBlazor shows its file input while something is dragged: stretch it over the drop zone so the drop lands on it. */
.pn-rf-dropwrap .pn-rf-drop-input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: copy;
}
/* Above the stretched input, so the click reaches the button. */
.pn-rf-drop-pick { position: relative; z-index: 3; margin-top: 4px; }

.pn-rf-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 120px;
    padding: 16px;
    border: 1px dashed var(--mud-palette-lines-inputs);
    border-radius: var(--pn-radius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    text-align: center;
    transition: border-color var(--pn-dur) var(--pn-ease-out), background-color var(--pn-dur) var(--pn-ease-out);
}

.pn-rf-drop strong { color: var(--mud-palette-text-primary); font-weight: 600; }
.pn-rf-drop small { font-size: .8rem; }
.pn-rf-drop[data-dragging="true"] { border-color: var(--mud-palette-primary); background: var(--pn-brand-soft); }
.pn-rf-drop[data-busy="true"] { cursor: progress; }
.pn-rf-drop-bar { width: min(100%, 320px); }

@media (prefers-reduced-motion: reduce) {
    .pn-rf-drop { transition: none; }
}