/* NX-4734. Cabecera pública y adaptación aislada de Button/Checkbox NXT-DS. */
@font-face {
    font-family: "Silka Ranking Bold";
    src: url("../../../css/fonts/silka-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body:has(.nxt-public-ranking) { background: var(--bg-canvas); }

body:has(.nxt-public-ranking) > #cabecera,
body:has(.nxt-public-ranking) > #cabecera + .divider {
    display: none !important;
}

#container-ppal.ui.container:has(> .nxt-public-ranking) {
    --nxt-public-ranking-organizer-fill: var(--neutral-fill);
    --nxt-public-ranking-organizer-accent: var(--neutral-fill);
    --nxt-public-ranking-organizer-tint: 0%;
    --nxt-public-ranking-organizer-table-surface: var(--bg-sunken);
    --nxt-public-ranking-table-heading-bg: color-mix(in oklab, var(--nxt-public-ranking-organizer-accent) var(--nxt-public-ranking-organizer-tint), var(--nxt-public-ranking-organizer-table-surface));
    --nxt-public-ranking-row-hover-bg: var(--bg-sunken);
    --nxt-public-ranking-discarded-hover-bg: var(--pressed-soft-bg);
    --nxt-public-ranking-row-hover-border: var(--border-default);
    --nxt-public-ranking-page-margin: var(--space-5);
    inline-size: calc(100% - var(--nxt-public-ranking-page-margin) * 2);
    max-inline-size: var(--bp-max);
    margin-inline: auto !important;
    margin-block: var(--nxt-public-ranking-page-margin);
    container-type: inline-size;
    container-name: public-ranking-page;
}

/* Las seis familias heredadas, sin copiar colores literales ni teñir el total. */
#container-ppal.ui.container:has(> .nxt-public-ranking[data-organizer="AM00"]) {
    --nxt-public-ranking-organizer-fill: color-mix(in oklab, var(--semantic-success-8) 70%, var(--neutral-9));
    --nxt-public-ranking-organizer-accent: var(--semantic-success-8);
    --nxt-public-ranking-organizer-tint: 8%;
    --nxt-public-ranking-organizer-table-surface: var(--bg-surface);
}

#container-ppal.ui.container:has(> .nxt-public-ranking[data-organizer="CM00"]) {
    --nxt-public-ranking-organizer-fill: color-mix(in oklch, var(--accent-2-8) 60%, var(--semantic-info-9));
    --nxt-public-ranking-organizer-accent: var(--semantic-warning-6);
    --nxt-public-ranking-organizer-tint: 8%;
    --nxt-public-ranking-organizer-table-surface: var(--bg-surface);
}

#container-ppal.ui.container:has(> .nxt-public-ranking[data-organizer="7700"]) {
    --nxt-public-ranking-organizer-fill: color-mix(in oklch, var(--accent-2-9) 40%, var(--semantic-info-8));
    --nxt-public-ranking-organizer-accent: var(--semantic-success-8);
    --nxt-public-ranking-organizer-tint: 8%;
    --nxt-public-ranking-organizer-table-surface: var(--bg-surface);
}

#container-ppal.ui.container:has(> .nxt-public-ranking[data-organizer="CP00"]) {
    --nxt-public-ranking-organizer-fill: color-mix(in oklch, var(--accent-2-8) 80%, var(--semantic-info-6));
    --nxt-public-ranking-organizer-accent: var(--semantic-warning-5);
    --nxt-public-ranking-organizer-tint: 8%;
    --nxt-public-ranking-organizer-table-surface: var(--bg-surface);
}

#container-ppal.ui.container:has(> .nxt-public-ranking[data-organizer="CM01"]) {
    --nxt-public-ranking-organizer-fill: color-mix(in oklch, var(--semantic-error-8) 90%, var(--accent-2-11));
    --nxt-public-ranking-organizer-accent: var(--semantic-warning-5);
    --nxt-public-ranking-organizer-tint: 8%;
    --nxt-public-ranking-organizer-table-surface: var(--bg-surface);
}

#container-ppal.ui.container:has(> .nxt-public-ranking[data-organizer="CM11"]) {
    --nxt-public-ranking-organizer-fill: color-mix(in oklch, var(--accent-2-9) 35%, var(--semantic-info-7));
    --nxt-public-ranking-organizer-accent: var(--semantic-info-8);
    --nxt-public-ranking-organizer-tint: 8%;
    --nxt-public-ranking-organizer-table-surface: var(--bg-surface);
}

#container-ppal.ui.container:has(> .nxt-public-ranking):has(#show-details:checked) {
    max-inline-size: none;
}

/* --bp-md: conservar un margen pequeño incluso en la vista fluida móvil. */
@media (width < 768px) {
    #container-ppal.ui.container:has(> .nxt-public-ranking) {
        --nxt-public-ranking-page-margin: var(--space-2);
    }
}

.nxt-public-ranking,
.nxt-public-ranking-results {
    --nxt-public-ranking-inline-padding: var(--space-6);
}

.nxt-public-ranking {
    box-sizing: border-box;
    min-inline-size: 0;
    inline-size: 100%;
    max-inline-size: none;
    margin: 0 auto;
    border: var(--control-frame-border-width) solid var(--surface-frame-border);
    border-radius: var(--surface-frame-radius);
    background: var(--surface-frame-bg);
    color: var(--surface-frame-fg);
    font-family: var(--font-sans);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

.nxt-public-ranking .nxt-public-ranking-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-5);
    padding: var(--space-5) var(--nxt-public-ranking-inline-padding);
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
    background: var(--nxt-public-ranking-organizer-fill);
    color: var(--neutral-fill-fg);
}

.nxt-public-ranking .nxt-public-ranking-title-group {
    display: grid;
    min-inline-size: 0;
    gap: var(--stack-gap-heading);
}

.nxt-public-ranking .nxt-public-ranking-brand {
    inline-size: calc(var(--space-7) * 3);
    block-size: auto;
    aspect-ratio: 5;
    fill: currentColor;
}

.nxt-public-ranking .nxt-public-ranking-heading[data-brand-hidden] {
    grid-template-columns: minmax(0, 1fr);
}

.nxt-public-ranking .nxt-public-ranking-heading[data-brand-hidden] .nxt-public-ranking-brand {
    display: none;
}

.nxt-public-ranking .nxt-public-ranking-title-probe {
    position: fixed;
    inline-size: max-content;
    max-inline-size: none;
    white-space: nowrap;
    visibility: hidden;
    pointer-events: none;
}

.nxt-public-ranking h1 {
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: var(--weight-medium);
    line-height: var(--lh-heading);
    letter-spacing: var(--track-snug);
    text-align: start;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.nxt-public-ranking .nxt-public-ranking-toolbar {
    padding: var(--space-4) var(--nxt-public-ranking-inline-padding);
}

.nxt-public-ranking .nxt-public-ranking-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-inline-size: 0;
}

.nxt-public-ranking .nxt-public-ranking-action {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ctrl-gap-md);
    block-size: var(--ctrl-block-h-md);
    margin: 0;
    padding: var(--ctrl-block-pad-md) var(--ctrl-inline-pad-md);
    border: var(--control-frame-border-width) solid var(--neutral-fill);
    border-radius: var(--control-frame-radius);
    background: transparent;
    color: var(--neutral-fill);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    letter-spacing: var(--track-normal);
    line-height: var(--lh-tight);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    touch-action: manipulation;
    cursor: pointer;
}

@media (hover: hover) {
    .nxt-public-ranking .nxt-public-ranking-action:hover {
        background: var(--neutral-fill);
        color: var(--neutral-fill-fg);
    }
}

.nxt-public-ranking .nxt-public-ranking-action:focus-visible {
    outline: 0;
    box-shadow: var(--control-frame-focus-shadow);
}

.nxt-public-ranking .nxt-public-ranking-action:active {
    border-color: var(--neutral-fill-hover);
    background: var(--neutral-fill-hover);
    color: var(--neutral-fill-fg);
}

.nxt-public-ranking .nxt-public-ranking-action svg {
    flex: none;
    inline-size: var(--ctrl-icon-md);
    block-size: var(--ctrl-icon-md);
    margin-inline-start: var(--button-icon-leading-nudge-inline);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--border-width-strong);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nxt-public-ranking .nxt-public-ranking-updated {
    margin: 0;
    color: var(--neutral-fill-fg);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    font-variant-numeric: tabular-nums;
}

.nxt-public-ranking .nxt-public-ranking-updated time {
    display: inline-block;
}

.nxt-public-ranking-details {
    display: flex;
    align-items: center;
    font-family: var(--font-sans);
    font-synthesis: none;
}

.nxt-public-ranking-details .nxt-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--checkbox-gap);
    min-block-size: var(--ctrl-block-h-md);
    color: var(--field-label-fg);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    cursor: pointer;
}

.nxt-public-ranking-details .nxt-checkbox-input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
}

.nxt-public-ranking-details .nxt-checkbox-box {
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: var(--selection-box-size);
    block-size: var(--selection-box-size);
    border: var(--border-width-strong) solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    pointer-events: none;
}

.nxt-public-ranking-details .nxt-checkbox-input:checked ~ .nxt-checkbox-box {
    border-color: var(--neutral-fill);
    background: var(--neutral-fill);
}

.nxt-public-ranking-details .nxt-checkbox-input:focus-visible ~ .nxt-checkbox-box {
    border-color: var(--input-border-focus);
    box-shadow: var(--focus-ring-shadow-gap);
}

.nxt-public-ranking-details .nxt-checkbox-check {
    inline-size: var(--ctrl-icon-sm);
    block-size: var(--ctrl-icon-sm);
    fill: none;
    stroke: var(--neutral-fill-fg);
    stroke-width: var(--focus-ring-width);
    stroke-linecap: round;
    stroke-linejoin: round;
    visibility: hidden;
}

.nxt-public-ranking-details .nxt-checkbox-input:checked ~ .nxt-checkbox-box .nxt-checkbox-check {
    visibility: visible;
}

.nxt-public-ranking-details .nxt-checkbox-label {
    font-weight: var(--weight-medium);
}

.nxt-public-ranking-results {
    --nxt-public-ranking-total-width: calc(var(--ctrl-block-h-lg) * 2);
    --background-color-cabecera: var(--border-default);
    --background-color-header-table: var(--nxt-public-ranking-table-heading-bg);
    --color-header-table: var(--fg-primary);
    --background-color-cell-marked: var(--bg-sunken);
    --background-color-cell-marked-puntuable: var(--neutral-soft-bg);
    --background-color-cell-marked-puntuable-hover: var(--neutral-soft-bg);
    box-sizing: border-box;
    display: grid;
    gap: var(--stack-gap-related);
    inline-size: 100%;
    max-inline-size: none;
    min-inline-size: 0;
    margin: 0 auto;
    padding: var(--space-5) var(--nxt-public-ranking-inline-padding);
    background: var(--bg-surface);
    color: var(--fg-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--lh-normal);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

/* --bp-md. Una misma condición alinea cabecera, acciones y resultados.
   CSS no admite var() en la condición de una container query. */
@container public-ranking-page (width < 768px) {
    .nxt-public-ranking,
    .nxt-public-ranking-results {
        --nxt-public-ranking-inline-padding: var(--space-4);
    }

    .nxt-public-ranking h1 { font-size: var(--text-xl); }

    .nxt-public-ranking .nxt-public-ranking-heading {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .nxt-public-ranking .nxt-public-ranking-heading .nxt-public-ranking-brand,
    .nxt-public-ranking .nxt-public-ranking-heading[data-brand-hidden] .nxt-public-ranking-brand {
        display: block;
        grid-row: 1;
        justify-self: end;
    }

    .nxt-public-ranking .nxt-public-ranking-action {
        flex: 1 1 calc(var(--ctrl-block-h-md) * 3 - var(--space-4));
        min-inline-size: 0;
        padding-inline: var(--space-2);
        gap: var(--space-2);
    }

    .nxt-public-ranking-results { padding-block: var(--space-4); }
}

.nxt-public-ranking-results .nxt-public-ranking-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--control-frame-border-width) solid var(--warning);
    border-radius: var(--surface-frame-radius);
    background: var(--warning-soft-bg);
    color: var(--warning-soft-fg);
    font-size: var(--text-base);
    line-height: var(--lh-normal);
}

.nxt-public-ranking-notice .nxt-alert-icon {
    flex: none;
    inline-size: var(--ctrl-icon-lg);
    block-size: var(--ctrl-icon-lg);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--border-width-strong);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nxt-public-ranking-notice .nxt-alert-body { min-inline-size: 0; }

.nxt-public-ranking-notice .nxt-alert-title {
    margin: 0 0 var(--stack-gap-heading);
    color: inherit;
    font-weight: var(--weight-medium);
}

.nxt-public-ranking-notice .nxt-alert-message {
    max-inline-size: var(--measure-prose);
    margin: 0;
    color: inherit;
    text-wrap: pretty;
}

.nxt-public-ranking-results .table-ranking-container {
    isolation: isolate;
    box-sizing: border-box;
    inline-size: 100%;
    width: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    margin: 0;
    border: var(--control-frame-border-width) solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    background: var(--bg-surface);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-variant-numeric: tabular-nums;
}

.nxt-public-ranking-results .table-ranking-container:focus-visible {
    outline: 0;
    box-shadow: var(--control-frame-focus-shadow);
}

.nxt-public-ranking-results #ranking {
    min-inline-size: 0;
    margin: 0;
    overflow: visible;
    background: var(--bg-surface);
}

.nxt-public-ranking-results .tableRanking .tableCell {
    padding: var(--space-3);
    border: 0;
    border-block-end: var(--control-frame-border-width) solid var(--border-subtle);
    font-family: var(--font-sans);
    line-height: var(--lh-normal);
}

.nxt-public-ranking-results #ranking .bodyTable :where(.tableRow:not(.filaOculta)) .tableCell {
    background: var(--nxt-public-ranking-row-bg, var(--bg-surface));
    box-shadow: var(--nxt-public-ranking-row-highlight, none);
}

/* Un único estado de fila alcanza posición, licencia, nombre fijo, total y jornadas. */
.nxt-public-ranking-results #ranking .bodyTable .tableRow:not(.filaOculta):is(:hover, :focus-within) {
    --nxt-public-ranking-row-bg: var(--nxt-public-ranking-row-hover-bg);
    --nxt-public-ranking-row-discarded-bg: var(--nxt-public-ranking-discarded-hover-bg);
    --nxt-public-ranking-row-total-bg: var(--neutral-fill-hover);
    --nxt-public-ranking-row-highlight:
        inset 0 var(--control-frame-border-width) var(--nxt-public-ranking-row-hover-border),
        inset 0 calc(var(--control-frame-border-width) * -1) var(--nxt-public-ranking-row-hover-border);
}

.nxt-public-ranking-results .tableRanking .ui.header {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--lh-normal);
    color: var(--fg-secondary);
}

.nxt-public-ranking-results .bodyTable .tableCell-nombre {
    min-inline-size: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
}

/* Ancho estable para el código; el espacio sobrante queda para el jugador. */
.nxt-public-ranking-results .hide-points-columns .tableCell.tableCell-licencia {
    box-sizing: border-box;
    flex: 0 0 calc(var(--space-7) * 3);
    inline-size: calc(var(--space-7) * 3);
}

.nxt-public-ranking-results .bodyTable .tableCell-licencia {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--text-md);
    color: var(--neutral-7);
}

.nxt-public-ranking-results #ranking .filaOculta {
    color: var(--fg-secondary);
}

.nxt-public-ranking-results .bodyTable > .tableRow:nth-child(-n + 5) .tableCell-nombre {
    font-family: "Silka Ranking Bold", var(--font-sans);
    font-weight: var(--weight-bold);
}

.nxt-public-ranking-results #ranking .tableRow .tableCell-total {
    background: var(--nxt-public-ranking-row-total-bg, var(--neutral-fill));
    color: var(--neutral-fill-fg);
    padding: var(--space-4);
}

.nxt-public-ranking-results #ranking .tableCell-total .ui.header {
    color: inherit;
}

.nxt-public-ranking-results .bodyTable .tableCell-total {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
}

.nxt-public-ranking-results #ranking .bodyTable .tableCell-competicion {
    background: var(--nxt-public-ranking-row-discarded-bg, var(--neutral-soft-bg));
    background-image: none;
    color: var(--fg-secondary);
}

.nxt-public-ranking-results #ranking .bodyTable .tableCell-competicion.puntuable {
    background: var(--nxt-public-ranking-row-bg, var(--bg-surface));
    color: var(--fg-primary);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
}

.nxt-public-ranking-results .bodyTable .tableCell span { color: inherit; }
.nxt-public-ranking-results .tableRanking .cell-points { color: inherit; }

.nxt-public-ranking-results #ranking .bodyTable .cell-points span { opacity: 1; }

.nxt-public-ranking-results #ranking .headerPoints > .tableCell {
    border-block-end: var(--control-frame-border-width) solid var(--border-default);
}

.nxt-public-ranking-results .hide-points-columns .tableCell-pos {
    flex: 0 0 var(--ctrl-block-h-lg);
    width: var(--ctrl-block-h-lg);
}

.nxt-public-ranking-results .hide-points-columns .tableCell-total {
    flex: 0 0 var(--nxt-public-ranking-total-width);
    width: var(--nxt-public-ranking-total-width);
    box-sizing: border-box;
}

.nxt-public-ranking-results .hide-points-columns .tableCell-nombre {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 0;
}

/* Columnas de detalle con medidas legibles, independientes del número de torneos. */
.nxt-public-ranking-results .table-ranking-container:not(.hide-points-columns) {
    --nxt-public-ranking-player-width: calc(var(--space-7) * 6);
    --nxt-public-ranking-competition-width: calc(var(--space-7) * 3);
}

.nxt-public-ranking-results .table-ranking-container:not(.hide-points-columns) #ranking {
    inline-size: 100%;
    min-inline-size: min-content;
}

.nxt-public-ranking-results .table-ranking-container:not(.hide-points-columns) .tableRow {
    display: grid;
    grid-template-columns:
        var(--ctrl-block-h-lg)
        minmax(var(--nxt-public-ranking-player-width), 1fr)
        var(--nxt-public-ranking-total-width)
        max-content;
}

.nxt-public-ranking-results .table-ranking-container:not(.hide-points-columns) .tableRow > * {
    order: 0;
}

.nxt-public-ranking-results .table-ranking-container:not(.hide-points-columns) .tableRow > .tableCell {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: auto;
    min-inline-size: 0;
}

.nxt-public-ranking-results .table-ranking-container:not(.hide-points-columns) .tableCell-licencia {
    display: none !important;
}

.nxt-public-ranking-results .table-ranking-container:not(.hide-points-columns) .tableRow > .tableCell-nombre {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: var(--bg-surface);
    border-inline-end: var(--control-frame-border-width) solid var(--border-subtle);
}

.nxt-public-ranking-results .table-ranking-container:not(.hide-points-columns) .tableHeader .tableCell-nombre {
    background: var(--nxt-public-ranking-table-heading-bg);
}

@container public-ranking-page (width < 768px) {
    .nxt-public-ranking-results .table-ranking-container:not(.hide-points-columns) {
        --nxt-public-ranking-player-width: min(
            calc(var(--space-6) * 4),
            calc(100cqi - var(--nxt-public-ranking-inline-padding) * 2 - var(--control-frame-border-width) * 2 - var(--ctrl-block-h-lg) - var(--nxt-public-ranking-total-width))
        );
    }
}

.nxt-public-ranking-results .table-ranking-container:not(.hide-points-columns) .tableGroup-variable {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
}

.nxt-public-ranking-results .table-ranking-container:not(.hide-points-columns) .tableGroup-variable > .tableCell {
    box-sizing: border-box;
    flex: 0 0 var(--nxt-public-ranking-competition-width);
    width: var(--nxt-public-ranking-competition-width);
    min-inline-size: var(--nxt-public-ranking-competition-width);
}

.nxt-public-ranking-results .table-ranking-container:not(.hide-points-columns) .cell-points {
    padding: var(--space-2);
}

.nxt-public-ranking-results .top-scroll {
    block-size: var(--space-2);
    height: var(--space-2);
    margin: 0;
}

.nxt-public-ranking-results #show-observations-btn {
    min-block-size: var(--ctrl-block-h-md);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
    color: var(--fg-primary);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
}

.nxt-public-ranking-results #show-observations-btn svg {
    inline-size: var(--ctrl-icon-md);
    block-size: var(--ctrl-icon-md);
    margin-inline-end: var(--space-2);
}

.nxt-public-ranking-results #observations-segment {
    margin: 0;
    padding: var(--space-5);
    border: var(--control-frame-border-width) solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
}

.nxt-public-ranking-results #observations-hide-btn svg {
    background: var(--neutral-fill);
    color: var(--neutral-fill-fg);
}

/* El marcador del calendario conserva el aislamiento al mover Fomantic el modal. */
.ui.dimmer:has(> .nxt-public-ranking-calendar:is(.active, .visible, .animating)) {
    position: fixed;
    inline-size: 100vw;
    block-size: 100dvh !important;
    padding: 0;
    overflow: hidden;
}

.ui.modal.nxt-public-ranking-calendar {
    --nxt-public-ranking-calendar-inline-padding: var(--space-6);
    --nxt-public-ranking-calendar-max-size: calc(100dvh - var(--space-5) * 2);
    box-sizing: border-box;
    position: relative;
    inline-size: calc(100% - var(--space-5) * 2);
    width: calc(100% - var(--space-5) * 2);
    max-inline-size: var(--bp-xl);
    max-block-size: var(--nxt-public-ranking-calendar-max-size);
    margin: var(--space-5) auto !important;
    overflow: hidden;
    border: var(--control-frame-border-width) solid var(--border-subtle);
    border-radius: var(--dialog-radius);
    background: var(--bg-surface);
    color: var(--fg-primary);
    box-shadow: var(--dialog-shadow);
    font-family: var(--font-sans);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

/* Fomantic fija display:block!important; la estructura interior gestiona el scroll. */
.nxt-public-ranking-calendar-layout {
    display: flex;
    flex-direction: column;
    max-block-size: calc(var(--nxt-public-ranking-calendar-max-size) - var(--control-frame-border-width) * 2);
}

.nxt-public-ranking-calendar-layout > .header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex: none;
    min-block-size: calc(var(--ctrl-block-h-md) + var(--space-4) * 2);
    margin: 0;
    padding: var(--space-4) var(--nxt-public-ranking-calendar-inline-padding);
    padding-inline-end: calc(var(--nxt-public-ranking-calendar-inline-padding) + var(--ctrl-block-h-md) + var(--space-4));
    border: 0;
    background: var(--neutral-fill);
    color: var(--neutral-fill-fg);
    font-family: var(--font-sans);
}

.nxt-public-ranking-calendar h2 {
    margin: 0;
    color: inherit;
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    line-height: var(--lh-heading);
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.ui.modal.nxt-public-ranking-calendar > .nxt-public-ranking-calendar-close {
    box-sizing: border-box;
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-end: var(--nxt-public-ranking-calendar-inline-padding);
    display: grid;
    place-items: center;
    inline-size: var(--ctrl-block-h-md);
    block-size: var(--ctrl-block-h-md);
    margin: 0;
    padding: 0;
    border: var(--control-frame-border-width) solid var(--overlay-on-inverse);
    border-radius: var(--control-frame-radius);
    background: transparent;
    color: var(--neutral-fill-fg);
    opacity: 1;
    cursor: pointer;
    touch-action: manipulation;
}

.nxt-public-ranking-calendar-close svg {
    inline-size: var(--ctrl-icon-md);
    block-size: var(--ctrl-icon-md);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--border-width-strong);
    stroke-linecap: round;
}

.nxt-public-ranking-calendar-close:hover,
.nxt-public-ranking-calendar-close:active {
    background: var(--neutral-fill-hover);
}

.nxt-public-ranking-calendar-close:focus-visible {
    outline: 0;
    box-shadow: var(--control-frame-focus-shadow);
}

.nxt-public-ranking-calendar-layout > .content {
    flex: 1 1 auto;
    min-block-size: 0;
    padding: var(--space-5) var(--nxt-public-ranking-calendar-inline-padding);
    overflow-y: auto;
    background: var(--bg-surface);
    color: var(--fg-primary);
    font-family: var(--font-sans);
}

.nxt-public-ranking-calendar-table-frame {
    border: var(--control-frame-border-width) solid var(--border-subtle);
    border-radius: var(--surface-frame-radius);
    overflow: hidden;
}

.nxt-public-ranking-calendar-table {
    inline-size: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--text-md);
    line-height: var(--lh-normal);
    text-align: start;
}

.nxt-public-ranking-calendar-table :is(th, td) {
    padding: var(--space-4);
    border-block-end: var(--control-frame-border-width) solid var(--border-subtle);
    vertical-align: middle;
    text-align: start;
    overflow-wrap: anywhere;
}

.nxt-public-ranking-calendar-table th {
    background: var(--bg-sunken);
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.nxt-public-ranking-calendar-table th:first-child {
    inline-size: calc(var(--space-7) * 3);
}

.nxt-public-ranking-calendar-table th:last-child {
    inline-size: 28%;
}

.nxt-public-ranking-calendar-table tbody tr:last-child td {
    border-block-end: 0;
}

.nxt-public-ranking-calendar-date {
    color: var(--fg-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.nxt-public-ranking-calendar-competition {
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
}

.nxt-public-ranking-calendar-club,
.nxt-public-ranking-calendar-empty {
    color: var(--fg-secondary);
}

.nxt-public-ranking-calendar-table a {
    display: inline-block;
    max-inline-size: 100%;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--border-default);
    text-decoration-thickness: var(--control-frame-border-width);
    text-underline-offset: var(--space-1);
}

.nxt-public-ranking-calendar-table a:focus-visible {
    outline: 0;
    border-radius: var(--radius-sm);
    box-shadow: var(--control-frame-focus-shadow);
}

.nxt-public-ranking-calendar-table a:is(:hover, :active) {
    color: var(--fg-primary);
    text-decoration-color: currentColor;
}

.nxt-public-ranking-calendar-table tbody tr:is(:hover, :focus-within) {
    background: var(--bg-sunken);
}

@media (width < 768px) {
    .ui.modal.nxt-public-ranking-calendar {
        --nxt-public-ranking-calendar-inline-padding: var(--space-4);
        inline-size: calc(100% - var(--space-2) * 2);
        width: calc(100% - var(--space-2) * 2);
        --nxt-public-ranking-calendar-max-size: calc(100dvh - var(--space-2) * 2);
        margin-block: var(--space-2) !important;
    }

    .nxt-public-ranking-calendar h2 { font-size: var(--text-lg); }

    .nxt-public-ranking-calendar-layout > .content { padding-block: var(--space-4); }

    .nxt-public-ranking-calendar-table thead {
        position: absolute;
        inline-size: var(--control-frame-border-width);
        block-size: var(--control-frame-border-width);
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .nxt-public-ranking-calendar-table :is(tbody, tr, td) {
        display: block;
        inline-size: auto;
    }

    .nxt-public-ranking-calendar-table tbody tr {
        padding: var(--space-4);
        border-block-end: var(--control-frame-border-width) solid var(--border-subtle);
    }

    .nxt-public-ranking-calendar-table tbody tr:last-child { border-block-end: 0; }

    .nxt-public-ranking-calendar-table td,
    .nxt-public-ranking-calendar-table tbody tr:last-child td {
        padding: 0;
        border: 0;
    }

    .nxt-public-ranking-calendar-table td + td { margin-block-start: var(--space-3); }

    .nxt-public-ranking-calendar-table a {
        display: inline-flex;
        align-items: center;
        min-block-size: var(--ctrl-block-h-md);
    }

    .nxt-public-ranking-calendar-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-block-end: var(--stack-gap-heading);
        color: var(--fg-secondary);
        font-size: var(--text-sm);
        font-weight: var(--weight-medium);
    }
}