/**
 * Powerlifting Hub - Main Stylesheet
 *
 * Modern design system - light mode, mobile-first, responsive.
 * All styles scoped to .powerlifting-app to prevent WordPress theme conflicts.
 *
 * @package Powerlifting
 * @since 1.0.0
 */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

.powerlifting-app {
    /* Brand: Power Red + Dark Slate */
    --pl-primary: #dc2626;
    --pl-primary-hover: #b91c1c;
    --pl-primary-dark: #991b1b;
    --pl-primary-light: rgba(220, 38, 38, 0.08);
    --pl-primary-soft: rgba(220, 38, 38, 0.12);

    /* Secondary: Dark Slate */
    --pl-secondary: #1e293b;
    --pl-secondary-light: #334155;
    --pl-secondary-dark: #0f172a;

    /* Accent: Amber */
    --pl-accent: #f59e0b;
    /* Previously undefined tokens (templates referenced them and silently fell
       back to sub-AA colors). Defined here at WCAG AA on white. */
    --pl-heading: #111827;
    --pl-color-primary: #2563eb;
    --pl-color-danger: #dc2626;
    --pl-accent-hover: #d97706;
    --pl-accent-light: rgba(245, 158, 11, 0.08);
    --pl-accent-soft: rgba(245, 158, 11, 0.12);

    /* Surfaces */
    --pl-bg: #f8fafc;
    --pl-bg-card: var(--pl-surface); /* deprecated: use --pl-surface */
    --pl-bg-dark: #0f172a;
    --pl-surface: #ffffff;
    --pl-surface-raised: #ffffff;

    /* Text */
    --pl-text: #1e293b;
    --pl-text-secondary: #475569;
    --pl-text-muted: #64748b;
    --pl-text-light: #6b7280;

    /* Borders */
    --pl-border: #e2e8f0;
    --pl-border-strong: #cbd5e1;

    /* Neutrals */
    --pl-gray-50: #f8fafc;
    --pl-gray-100: #f1f5f9;
    --pl-gray-200: #e2e8f0;
    --pl-gray-300: #cbd5e1;
    --pl-gray-400: #94a3b8;
    --pl-gray-500: #64748b;
    --pl-gray-600: #475569;
    --pl-gray-700: #334155;
    --pl-gray-800: #1e293b;
    --pl-gray-900: #0f172a;

    /* Semantic status */
    --pl-success: #16a34a;
    --pl-success-text: #166534;
    --pl-success-light: rgba(22, 163, 74, 0.1);
    --pl-warning: #f59e0b;
    --pl-warning-light: rgba(245, 158, 11, 0.1);
    --pl-error: #ef4444;
    --pl-error-light: rgba(239, 68, 68, 0.1);
    --pl-info: #2563eb;
    --pl-info-light: rgba(37, 99, 235, 0.1);

    /* Level colors (strength standards) */
    --pl-level-beginner: #94a3b8;
    --pl-level-novice: #22c55e;
    --pl-level-intermediate: #3b82f6;
    --pl-level-advanced: #f59e0b;
    --pl-level-elite: #dc2626;
    --pl-level-world: #7c3aed;

    /* Rank badge colors */
    --pl-gold: #fbbf24;
    --pl-gold-text: #78350f;
    --pl-silver: #d1d5db;
    --pl-silver-text: #374151;
    --pl-bronze: #d97706;
    --pl-bronze-text: #fff;

    /* Spacing */
    --pl-space-xs: 0.25rem;
    --pl-space-sm: 0.5rem;
    --pl-space-md: 1rem;
    --pl-space-lg: 1.5rem;
    --pl-space-xl: 2rem;
    --pl-space-2xl: 3rem;
    --pl-space-3xl: 4rem;
    --pl-space-4xl: 6rem;

    /* Typography */
    --pl-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pl-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, monospace;

    /* Font sizes */
    --pl-text-xs: 0.75rem;
    --pl-text-sm: 0.875rem;
    --pl-text-base: 1rem;
    --pl-text-lg: 1.125rem;
    --pl-text-xl: 1.25rem;
    --pl-text-2xl: 1.5rem;
    --pl-text-3xl: 1.875rem;
    --pl-text-4xl: 2.25rem;
    --pl-text-5xl: 3rem;

    /* Font weights */
    --pl-weight-normal: 400;
    --pl-weight-medium: 500;
    --pl-weight-semibold: 600;
    --pl-weight-bold: 700;
    --pl-weight-extrabold: 800;
    --pl-weight-black: 900;

    /* Border radius */
    --pl-radius-sm: 0.375rem;
    --pl-radius-md: 0.5rem;
    --pl-radius-lg: 0.75rem;
    --pl-radius-xl: 1rem;
    --pl-radius-2xl: 1.5rem;
    --pl-radius-full: 9999px;
    --pl-radius: var(--pl-radius-lg);

    /* Text color alias (referenced by template inline styles) */
    --pl-text-primary: var(--pl-text);

    /* Shadows */
    --pl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --pl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --pl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --pl-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* Focus ring */
    --pl-focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--pl-primary);

    /* Transitions */
    --pl-transition-fast: 100ms ease;
    --pl-transition: 150ms ease;
    --pl-transition-normal: 200ms ease;
    --pl-transition-slow: 300ms ease;

    /* Easing functions */
    --pl-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
    --pl-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --pl-stagger: 60ms;

    /* Container */
    --pl-container: 1240px;

    /*
     * Z-Index Scale
     *   1-2   : Content stacking
     *   10    : Minor overlay (floating labels, badges)
     *   50    : Dropdown / tooltip / popover / sticky nav
     *   100   : Modal backdrop
     *   1000  : Modal
     *   10000 : Toast / notification (topmost layer)
     */
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

.powerlifting-app {
    font-family: var(--pl-font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--pl-text);
    background-color: var(--pl-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.powerlifting-app *,
.powerlifting-app *::before,
.powerlifting-app *::after {
    box-sizing: border-box;
}

.powerlifting-app img,
.powerlifting-app video {
    max-width: 100%;
    height: auto;
}

/* Override theme link styles */
.powerlifting-app a,
.powerlifting-app a:hover,
.powerlifting-app a:focus,
.powerlifting-app a:visited,
.rbct .powerlifting-app a,
.entry-content .powerlifting-app a {
    text-decoration: none;
}

/*
 * `inherit`, NOT --pl-primary, and this is a deliberate reversal.
 *
 * This rule asked for the brand red and never got it. It is (0,1,1) and the theme
 * ships `.rbct a:where(:not(.p-url)...) { color: var(--hyperlink-color, inherit) }`
 * at main.css:16647, also (0,1,1) because :where() contributes nothing - and the
 * theme sheet loads at position 8 against this file's 3, so source order handed
 * the theme the win on every route the plugin has ever served.
 *
 * The page shell removes the theme's .rbct wrapper. That un-defeats this rule, and
 * the measurement was stark: red-600 links went 1 -> 74 on /records/ alone, with
 * athlete names like "Devonte Lewis" flipping slate-800 to red, plus font-weight
 * shifts wherever --hyperlink-weight had been supplying 700.
 *
 * Nobody chose red athlete names. They would have arrived as a side effect of a
 * structural accessibility fix, on a live site, which is the wrong way for a design
 * change to happen. So this rule now states what the page has actually been doing
 * for its whole life, and the shell lands invisibly.
 *
 * Components that DO want colour set it themselves at higher specificity
 * (.pl-records-entry-name and friends) and are unaffected either way.
 *
 * If the brand red is wanted on links, that is a design decision with its own
 * before/after - not a line to flip back here on the assumption it was always
 * meant to be red.
 */
.powerlifting-app a {
    color: inherit;
    transition: color var(--pl-transition);
}

.powerlifting-app a:hover {
    color: var(--pl-primary-hover);
}

/* Alpine.js cloak */


/* ==========================================================================
   2b. SKIP LINK
   ========================================================================== */

.powerlifting-app .pl-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 8px 16px;
    background: var(--pl-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.powerlifting-app .pl-skip-link:focus {
    left: 8px;
    top: 8px;
}

/* ==========================================================================
   2c. NAVIGATION
   ========================================================================== */

/*
 * The nav is a card that hangs off the site header, not a full-bleed band.
 *
 * Cross-plugin design rule, matched to bodybuilding and strongman: rounded bottom
 * corners, a hairline border and a soft drop shadow, so all three section navs
 * read as the same component. Only the geometry is shared - the palette stays
 * powerlifting's, exactly as strongman kept its own rather than taking
 * bodybuilding's cream and oxblood.
 *
 * 12px LITERAL, NOT A TOKEN, and this is the part that will look wrong to the next
 * reader. The shared value is a measured 12px. The theme sets html { font-size:
 * 15px } (see the two px-not-rem notes further down this file), so --pl-radius-lg
 * is 0.75rem = 11.25px and --pl-radius-xl is 1rem = 15px. Neither is 12. Using a
 * token here would silently put powerlifting 0.75px off the other two, which is
 * exactly the kind of drift that makes three navs look almost-but-not-quite alike.
 * Strongman could use --sm-radius-md because its scale happens to land on 12px.
 * Ours does not.
 *
 * WIDTH IS LOAD-BEARING FOR THE CORNERS. A full-bleed nav has its corners off
 * screen, so the radius is invisible and the border reads as a plain rule. The nav
 * therefore takes the container measure itself, and .pl-container inside it stands
 * down to 100% (next rule) so the two do not box the same content twice.
 *
 * The old backdrop blur is gone with the translucency: a blurred card edge over
 * the page ground muddies the corner it is supposed to define, and the surface is
 * opaque now so there is nothing to blur.
 */
.powerlifting-app .pl-nav {
    background: var(--pl-surface, #ffffff);
    border: 1px solid rgba(30, 41, 59, 0.08);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 34px rgba(30, 41, 59, 0.06);
    width: 100%;
    max-width: var(--pl-container);
    margin-inline: auto;
    position: sticky;
    top: 0;
    z-index: 100;
}

/*
 * The nav's own container stands down. The card sets the measure now, so a second
 * max-width here would inset the links inside an already-inset card. Padding stays,
 * because the links still need the gutter off the card edge.
 */
.powerlifting-app .pl-nav .pl-container {
    max-width: 100%;
}

/*
 * The breadcrumb trail, which powerlifting_header() now emits between the nav and
 * <main>. Sized to match bodybuilding's .bb-breadcrumb-bar so the two sections have
 * the same rhythm under the nav: 13px, muted, more room above than below so the
 * trail groups with the content it introduces rather than with the nav above it.
 */
.powerlifting-app .pl-breadcrumb-bar {
    padding-top: var(--pl-space-lg);
    padding-bottom: var(--pl-space-sm);
    font-size: 13px;
    line-height: 1.5;
}

.powerlifting-app .pl-breadcrumb-bar .breadcrumb-inner,
.powerlifting-app .pl-breadcrumb-bar a {
    color: var(--pl-text-muted);
    font-size: 13px;
}

.powerlifting-app .pl-breadcrumb-bar a:hover {
    color: var(--pl-text);
}

/*
 * MOBILE: back to a plain band.
 *
 * Rounded corners floating in a phone gutter read as a component that has come
 * loose, not as chrome. Full-bleed, no radius, no shadow, and the hairline reduced
 * to the bottom edge so it still separates the nav from the content under it.
 */
@media (max-width: 767px) {
    .powerlifting-app .pl-nav {
        max-width: none;
        border-left: 0;
        border-right: 0;
        border-top: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

.powerlifting-app .pl-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    gap: 8px;
}

/* Logo */
.powerlifting-app .pl-nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--pl-text);
    text-decoration: none;
    flex-shrink: 0;
}

.powerlifting-app .pl-nav-logo:hover,
.powerlifting-app .pl-nav-logo:visited {
    color: var(--pl-text);
}

.powerlifting-app .pl-nav-logo-icon {
    display: flex;
    width: 48px;
    height: 40px;
}

.powerlifting-app .pl-nav-logo-icon svg {
    width: 100%;
    height: 100%;
}

.powerlifting-app .pl-nav-logo-text {
    font-family: "Encode Sans Condensed", var(--pl-font-sans);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.powerlifting-app .pl-brand-accent {
    color: var(--pl-primary);
}

/* Desktop nav links */
.powerlifting-app .pl-nav-links {
    display: none;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: center;
}

@media (min-width: 1024px) {
    .powerlifting-app .pl-nav-links {
        display: flex;
    }
}

/* Dropdown trigger */
.powerlifting-app .pl-nav-link {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pl-text-secondary);
    background: none;
    border: none;
    border-radius: var(--pl-radius-md);
    cursor: pointer;
    transition: all var(--pl-transition);
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.4;
}

.powerlifting-app .pl-nav-link:hover {
    color: var(--pl-text);
    background: var(--pl-primary-light);
}

.powerlifting-app .pl-nav-link:focus-visible {
    outline: 2px solid var(--pl-primary);
    outline-offset: 2px;
}

.powerlifting-app .pl-nav-link svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
    transition: transform var(--pl-transition-normal);
}

.powerlifting-app .pl-nav-group-active {
    color: var(--pl-primary);
    background: var(--pl-primary-light);
}

/* Dropdown container */
.powerlifting-app .pl-nav-dropdown {
    position: relative;
}

.powerlifting-app .pl-nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 3px;
}

.powerlifting-app .pl-nav-dropdown[data-open="true"] .pl-nav-dropdown-trigger svg {
    transform: rotate(180deg);
}

/* Dropdown menu */
.powerlifting-app .pl-nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    /* The 4px visual offset is a dead zone for hover: crossing it fired
       mouseout and closed the menu before it could be reached. The ::before
       bridge below keeps the pointer inside the dropdown across the gap. */
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    padding: 6px;
    z-index: 60;
}

.powerlifting-app .pl-nav-dropdown[data-open="true"] .pl-nav-dropdown-menu {
    display: block;
}

.powerlifting-app .pl-nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

/* Dropdown items */
.powerlifting-app .pl-nav-dropdown-item {
    display: block;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--pl-text-secondary);
    text-decoration: none;
    border-radius: var(--pl-radius-sm);
    transition: all var(--pl-transition-fast);
    white-space: nowrap;
}

.powerlifting-app .pl-nav-dropdown-item:hover,
.powerlifting-app .pl-nav-dropdown-item:focus {
    background: var(--pl-gray-50);
    color: var(--pl-primary);
}

.powerlifting-app .pl-nav-dropdown-item.pl-nav-link-active {
    background: var(--pl-primary-light);
    color: var(--pl-primary);
    font-weight: 600;
}

/* Nav actions (right side) */
.powerlifting-app .pl-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Unit toggle */
.powerlifting-app .pl-unit-toggle {
    display: flex;
    border-radius: var(--pl-radius-full);
    overflow: hidden;
    border: 1px solid var(--pl-border-strong);
}

.powerlifting-app .pl-unit-btn {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--pl-transition);
    font-family: inherit;
}

.powerlifting-app .pl-unit-btn:focus-visible {
    outline: 2px solid var(--pl-primary);
    outline-offset: 1px;
}

.powerlifting-app .pl-unit-btn--active {
    background: var(--pl-primary);
    color: #fff;
}

/* Hamburger */
.powerlifting-app .pl-nav-hamburger {
    display: flex;
    position: relative;
    z-index: 110;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: var(--pl-radius-md);
    transition: background 0.15s ease;
}

.powerlifting-app .pl-nav-hamburger:hover {
    background: var(--pl-primary-light);
}

.powerlifting-app .pl-nav-hamburger:focus-visible {
    outline: 2px solid var(--pl-primary);
    outline-offset: 2px;
}

@media (min-width: 1024px) {
    .powerlifting-app .pl-nav-hamburger {
        display: none;
    }
}

@media (max-width: 480px) {
    .powerlifting-app .pl-nav-logo {
        gap: 6px;
    }

    .powerlifting-app .pl-nav-logo-text {
        display: none;
    }
}

.powerlifting-app .pl-nav-hamburger-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 20px;
}

.powerlifting-app .pl-nav-hamburger-icon span {
    display: block;
    height: 2px;
    background: var(--pl-text);
    border-radius: 2px;
    transition: all var(--pl-transition-normal);
}

.powerlifting-app .pl-hamburger-active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.powerlifting-app .pl-hamburger-active span:nth-child(2) {
    opacity: 0;
}

.powerlifting-app .pl-hamburger-active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Mobile menu */
.powerlifting-app .pl-nav-mobile {
    background: var(--pl-surface);
    border-top: 1px solid var(--pl-border);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.powerlifting-app .pl-nav-mobile-inner {
    padding: 12px 0;
}

.powerlifting-app .pl-nav-mobile-group {
    padding: 8px 0;
}

.powerlifting-app .pl-nav-mobile-group-label {
    padding: 4px 20px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pl-text-muted);
}

.powerlifting-app .pl-nav-mobile-links {
    display: flex;
    flex-direction: column;
}

.powerlifting-app .pl-nav-mobile-link {
    display: block;
    padding: 10px 20px 10px 28px;
    font-size: 15px;
    color: var(--pl-text-secondary);
    text-decoration: none;
    transition: all var(--pl-transition-fast);
}

.powerlifting-app .pl-nav-mobile-link:hover {
    background: var(--pl-gray-50);
    color: var(--pl-primary);
}

.powerlifting-app .pl-nav-mobile-link.pl-nav-link-active {
    color: var(--pl-primary);
    font-weight: 600;
    background: var(--pl-primary-light);
    border-left: 3px solid var(--pl-primary);
    padding-left: 25px;
}

/* ==========================================================================
   2d. FOOTER
   ========================================================================== */

.powerlifting-app .pl-footer {
    background: var(--pl-secondary);
    color: rgba(255, 255, 255, 0.7);
    padding: 24px 0;
    margin-top: auto;
}

.powerlifting-app .pl-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

@media (min-width: 768px) {
    .powerlifting-app .pl-footer-inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.powerlifting-app .pl-footer-brand {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.powerlifting-app .pl-footer-brand:hover,
.powerlifting-app .pl-footer-brand:visited {
    color: rgba(255, 255, 255, 0.9);
}

.powerlifting-app .pl-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    justify-content: center;
}

.powerlifting-app .pl-footer-links a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.15s ease;
}

.powerlifting-app .pl-footer-links a:hover {
    color: #fff;
}

.powerlifting-app .pl-footer-data-credit {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

.powerlifting-app .pl-footer-data-credit a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.powerlifting-app .pl-footer-data-credit a:hover {
    color: #fff;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.pl-container {
    width: 100%;
    max-width: var(--pl-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pl-space-md);
    padding-right: var(--pl-space-md);
}

@media (min-width: 640px) {
    .pl-container {
        padding-left: var(--pl-space-lg);
        padding-right: var(--pl-space-lg);
    }
}

.pl-main {
    min-height: 50vh;
    padding-top: var(--pl-space-xl);
    padding-bottom: var(--pl-space-4xl);
}

.pl-section {
    margin-bottom: var(--pl-space-3xl);
}

.pl-section:last-child {
    margin-bottom: 0;
}

/* Skip link */
.pl-skip-link {
    position: absolute;
    top: -9999px;
    left: 16px;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    background: var(--pl-gray-800);
    color: #fff;
    padding: var(--pl-space-sm) var(--pl-space-md);
    z-index: 100;
    border-radius: var(--pl-radius-md);
    transition: none;
}

.pl-skip-link:focus {
    top: 16px;
    clip: auto;
    overflow: visible;
}

/* Responsive grid (auto-fit) */
.pl-grid {
    display: grid;
    gap: var(--pl-space-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .pl-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .pl-grid { grid-template-columns: repeat(3, 1fr); }
}

.pl-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pl-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Bento grid */
.pl-bento {
    display: grid;
    gap: var(--pl-space-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .pl-bento {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .pl-bento {
        grid-template-columns: repeat(3, 1fr);
    }
    .pl-bento--featured:first-child {
        grid-column: span 2;
    }
}


/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

.pl-h1 {
    font-size: var(--pl-text-3xl);
    font-weight: var(--pl-weight-extrabold);
    color: var(--pl-text);
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 var(--pl-space-md) 0;
}

.pl-h2 {
    font-size: var(--pl-text-2xl);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 var(--pl-space-md) 0;
}

.pl-h3 {
    font-size: var(--pl-text-xl);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin: 0 0 var(--pl-space-sm) 0;
}

.pl-h4 {
    font-size: var(--pl-text-lg);
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text);
    line-height: 1.3;
    margin: 0 0 var(--pl-space-sm) 0;
}

@media (min-width: 768px) {
    .pl-h1 { font-size: var(--pl-text-4xl); }
    .pl-h2 { font-size: var(--pl-text-3xl); }
}

.pl-text-muted {
    color: var(--pl-text-muted);
}

.pl-text-accent {
    color: var(--pl-accent);
}

.pl-text-primary {
    color: var(--pl-primary);
}

.pl-section-heading {
    font-size: var(--pl-text-xl);
    font-weight: var(--pl-weight-extrabold);
    color: var(--pl-text);
    letter-spacing: -0.02em;
    margin-bottom: var(--pl-space-lg);
}

@media (min-width: 768px) {
    .pl-section-heading { font-size: var(--pl-text-2xl); }
}

.pl-section-subheading {
    font-size: var(--pl-text-sm);
    color: var(--pl-text-muted);
    margin-top: -0.75rem;
    margin-bottom: var(--pl-space-lg);
    max-width: 600px;
}

.pl-stat-number {
    font-size: var(--pl-text-3xl);
    font-weight: var(--pl-weight-black);
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--pl-text);
}

.pl-stat-number--hero {
    font-size: var(--pl-text-4xl);
    color: #fff;
}

.pl-stat-label {
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
}

.pl-stat-label--hero {
    color: rgba(255, 255, 255, 0.7);
}

.pl-seo-section {
    color: var(--pl-text-secondary);
    line-height: 1.75;
    max-width: 800px;
}

.pl-seo-section h2 {
    font-size: var(--pl-text-xl);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
    margin-bottom: var(--pl-space-md);
}

.pl-seo-section p {
    margin-bottom: var(--pl-space-md);
}

.pl-seo-section a {
    color: var(--pl-primary);
    font-weight: var(--pl-weight-medium);
}

.pl-seo-section a:hover {
    text-decoration: underline;
}


/* ==========================================================================
   5. NAVIGATION (dark header bar - matches Strongman pattern)
   ========================================================================== */

/* NOTE: Primary nav styles are in section 2c above.
   This section is intentionally left empty - all nav rules consolidated in 2c/2d. */


/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.powerlifting-app .pl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-family: var(--pl-font-sans);
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-semibold);
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: var(--pl-radius-lg);
    cursor: pointer;
    transition: all var(--pl-transition);
    white-space: nowrap;
    text-decoration: none;
}

.pl-btn:focus-visible {
    outline: none;
    box-shadow: var(--pl-focus-ring);
}

.pl-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pl-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Primary */
.powerlifting-app .pl-btn-primary,
.powerlifting-app .pl-btn--primary {
    background: var(--pl-primary);
    color: #fff;
    border-color: var(--pl-primary);
}

.powerlifting-app .pl-btn-primary:hover,
.powerlifting-app .pl-btn--primary:hover {
    background: var(--pl-primary-hover);
    border-color: var(--pl-primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--pl-shadow-md);
}

.powerlifting-app .pl-btn-primary:active,
.powerlifting-app .pl-btn--primary:active {
    transform: translateY(0);
}

/* Secondary */
.powerlifting-app .pl-btn-secondary {
    background: var(--pl-surface);
    color: var(--pl-text);
    border-color: var(--pl-border-strong);
}

.powerlifting-app .pl-btn-secondary:hover {
    background: var(--pl-gray-50);
    border-color: var(--pl-gray-400);
    color: var(--pl-text);
}

/* Outline: used by 5 templates but was never defined, rendering bare text */
.powerlifting-app .pl-btn-outline {
    background: transparent;
    color: var(--pl-text);
    border-color: var(--pl-border-strong);
}

.powerlifting-app .pl-btn-outline:hover {
    background: var(--pl-gray-50);
    border-color: var(--pl-gray-400);
    color: var(--pl-text);
}

/* Ghost */
.powerlifting-app .pl-btn-ghost {
    background: transparent;
    color: var(--pl-text-muted);
    border-color: transparent;
}

.powerlifting-app .pl-btn-ghost:hover {
    background: var(--pl-gray-100);
    color: var(--pl-text);
}

/* Dark (for use on dark backgrounds) */
.powerlifting-app .pl-btn-dark {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
}

.powerlifting-app .pl-btn-dark:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Sizes */
.pl-btn-sm {
    padding: 6px 14px;
    font-size: var(--pl-text-xs);
}

.pl-btn-lg {
    padding: 14px 28px;
    font-size: var(--pl-text-base);
    border-radius: var(--pl-radius-xl);
}

/* Button group (toggle) */
.pl-btn-group {
    display: inline-flex;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-lg);
    overflow: hidden;
    background: var(--pl-gray-50);
}

.pl-btn-group .pl-btn-group-item {
    padding: 8px 16px;
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-medium);
    background: transparent;
    border: none;
    color: var(--pl-text-muted);
    cursor: pointer;
    transition: all var(--pl-transition);
    position: relative;
}

.pl-btn-group .pl-btn-group-item:not(:last-child) {
    border-right: 1px solid var(--pl-border);
}

.pl-btn-group .pl-btn-group-item:focus-visible {
    box-shadow: var(--pl-focus-ring);
    z-index: 1;
}

.pl-btn-group .pl-btn-group-item--active,
.pl-btn-group .pl-btn-group-item[aria-pressed="true"] {
    background: var(--pl-surface);
    color: var(--pl-primary);
    font-weight: var(--pl-weight-semibold);
    box-shadow: var(--pl-shadow-sm);
}

/* Arrow slide animation on hover */
.pl-arrow-slide svg {
    transition: transform var(--pl-transition-normal);
}

.pl-arrow-slide:hover svg {
    transform: translateX(4px);
}


/* ==========================================================================
   7. FORMS & INPUTS
   ========================================================================== */

.powerlifting-app .pl-input,
.powerlifting-app .pl-select {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-family: var(--pl-font-sans);
    font-size: var(--pl-text-base);
    color: var(--pl-text);
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-lg);
    transition: border-color var(--pl-transition), box-shadow var(--pl-transition);
    line-height: 1.5;
    appearance: none;
}

.pl-input::placeholder {
    color: var(--pl-text-light);
}

.pl-input:focus,
.pl-select:focus {
    outline: 2px solid transparent;
    border-color: var(--pl-primary);
    box-shadow: 0 0 0 3px var(--pl-primary-light);
}

.pl-input:disabled,
.pl-select:disabled {
    background: var(--pl-gray-50);
    color: var(--pl-text-light);
    cursor: not-allowed;
}

.pl-select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.pl-label {
    display: block;
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-medium);
    color: var(--pl-text);
    margin-bottom: 6px;
}

.pl-input-group {
    display: flex;
    gap: var(--pl-space-sm);
}

.pl-input-group .pl-input {
    flex: 1;
}

.pl-form-row {
    margin-bottom: var(--pl-space-lg);
}

/* Unit suffix inside input */
.pl-input-with-unit {
    position: relative;
}

.pl-input-with-unit .pl-input {
    padding-right: 50px;
}

.pl-input-unit-suffix {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-medium);
    color: var(--pl-text-muted);
    pointer-events: none;
}


/* ==========================================================================
   8. CARDS
   ========================================================================== */

.pl-card {
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    overflow: hidden;
    transition: box-shadow var(--pl-transition), transform var(--pl-transition);
}

.pl-card:hover {
    box-shadow: var(--pl-shadow-md);
}

.pl-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.pl-card--link:hover {
    transform: translateY(-2px);
    box-shadow: var(--pl-shadow-lg);
}

.pl-card--link:focus-visible {
    box-shadow: var(--pl-focus-ring);
    outline: none;
}

.pl-card-header {
    padding: var(--pl-space-lg) var(--pl-space-lg) 0;
}

.pl-card-body {
    padding: var(--pl-space-lg);
}

.pl-card-footer {
    padding: 0 var(--pl-space-lg) var(--pl-space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Calculator card specific */
.pl-calc-card {
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    padding: var(--pl-space-lg);
    display: flex;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    gap: var(--pl-space-sm);
    transition: all var(--pl-transition);
    text-decoration: none;
    color: inherit;
}

.pl-calc-card:hover {
    border-color: var(--pl-primary);
    box-shadow: var(--pl-shadow-md), 0 8px 24px rgba(220, 38, 38, 0.1);
    transform: translateY(-3px);
}

.pl-calc-card:focus-visible {
    box-shadow: var(--pl-focus-ring);
    outline: none;
}

.pl-calc-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pl-primary-light);
    border-radius: var(--pl-radius-lg);
    color: var(--pl-primary);
    flex-shrink: 0;
}

.pl-calc-card-icon svg {
    width: 24px;
    height: 24px;
}

.pl-calc-card-title {
    font-size: var(--pl-text-base);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
    margin: 0;
}

.pl-calc-card-desc {
    font-size: var(--pl-text-sm);
    color: var(--pl-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* Card top border color cycling (matches strongman's crimson/gold/green pattern) */
.pl-calc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--pl-primary);
    transition: opacity var(--pl-transition);
}
.pl-calc-card:nth-child(3n+2)::before { background: var(--pl-accent); }
.pl-calc-card:nth-child(3n)::before { background: var(--pl-success, #16a34a); }

.pl-calc-card:nth-child(3n+2) .pl-calc-card-icon {
    background: rgba(245, 158, 11, 0.1);
    color: var(--pl-accent);
}
.pl-calc-card:nth-child(3n) .pl-calc-card-icon {
    background: rgba(22, 163, 74, 0.1);
    color: var(--pl-success, #16a34a);
}

/* Section label pill (overline badge above section headings) */
.pl-section-label {
    display: inline-block;
    padding: 3px 10px;
    background: var(--pl-primary-light);
    color: var(--pl-primary-dark, #991b1b);
    border-radius: var(--pl-radius-full, 9999px);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--pl-space-sm);
}

/* Glass stats bar in hero (matches strongman's glassmorphic pill strip) */
.pl-hero .pl-stats-bar {
    gap: 0;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--pl-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
    padding: 0;
}
.pl-hero .pl-stats-bar--hero {
    padding-top: 0;
    border-top: none;
}
.pl-hero .pl-stat-item {
    padding: 16px 20px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.pl-hero .pl-stat-item:last-child {
    border-right: none;
}

/* Bento featured card - match strongman's sm-featured-card pattern */
.pl-calc-card.pl-calc-card--featured {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--pl-space-lg);
    background: linear-gradient(135deg, var(--pl-secondary) 0%, var(--pl-secondary-dark) 100%);
    border-color: transparent;
    color: #fff;
    padding: var(--pl-space-xl) var(--pl-space-2xl);
    position: relative;
    overflow: hidden;
}

.pl-calc-card--featured::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: rgba(255, 255, 255, 0.06);
    transform: rotate(-15deg);
    pointer-events: none;
}

.pl-calc-card--featured:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: var(--pl-shadow-xl), 0 16px 48px rgba(220, 38, 38, 0.2);
}

.pl-calc-card--featured .pl-calc-card-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: var(--pl-radius-xl);
}

.pl-calc-card--featured .pl-calc-card-icon svg {
    width: 28px;
    height: 28px;
}

.pl-calc-card--featured .pl-calc-card-title {
    color: #fff;
    font-size: var(--pl-text-xl);
    font-weight: 700;
}

.pl-calc-card--featured .pl-calc-card-desc {
    color: rgba(255, 255, 255, 0.85);
    max-width: 420px;
}

/* Featured card content wrapper */
.pl-featured-content {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}

/* Featured card icon column */
.pl-featured-icon-col {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* Featured card badge */
.pl-calc-card--featured .pl-featured-badge {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--pl-radius-sm);
    font-size: var(--pl-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: var(--pl-space-sm);
    color: #fff !important;
}

/* Featured card CTA button */
.pl-calc-card--featured .pl-featured-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #fff;
    color: var(--pl-secondary) !important;
    border-radius: var(--pl-radius-lg);
    font-weight: 600;
    font-size: var(--pl-text-sm);
    transition: all var(--pl-transition);
    margin-top: var(--pl-space-md);
    white-space: nowrap;
}

.pl-featured-cta svg {
    width: 16px;
    height: 16px;
    transition: transform var(--pl-transition);
}

.pl-calc-card--featured:hover .pl-featured-cta {
    gap: 12px;
}

.pl-calc-card--featured:hover .pl-featured-cta svg {
    transform: translateX(2px);
}

/* Mobile responsive for featured cards */
@media (max-width: 768px) {
    .pl-calc-card.pl-calc-card--featured {
        flex-direction: column;
        text-align: center;
        padding: var(--pl-space-lg);
    }

    .pl-calc-card--featured .pl-featured-icon-col {
        order: -1;
        display: flex;
        justify-content: center;
    }

    .pl-calc-card--featured .pl-calc-card-desc {
        max-width: none;
    }
}


/* ==========================================================================
   9. CALCULATOR COMPONENTS
   ========================================================================== */

.pl-calc-form {
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    padding: var(--pl-space-xl);
}

.pl-calc-header {
    margin-bottom: var(--pl-space-xl);
}

.pl-calc-header h1 {
    font-size: var(--pl-text-2xl);
    font-weight: var(--pl-weight-extrabold);
    color: var(--pl-text);
    margin: 0 0 var(--pl-space-sm) 0;
}

.pl-calc-header p {
    color: var(--pl-text-muted);
    margin: 0;
    font-size: var(--pl-text-sm);
}

/* Prose block: every consumer wraps flat h2/p editorial content, so this must
   stay single-column. A 1fr 1fr grid here auto-places headings and paragraphs
   into alternating columns and scrambles reading order. */
.pl-calc-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pl-space-lg);
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.pl-calc-results {
    background: var(--pl-gray-50);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    padding: var(--pl-space-xl);
}

.pl-calc-result-big {
    text-align: center;
    padding: var(--pl-space-xl) 0;
}

.pl-calc-result-big .pl-result-value {
    font-size: var(--pl-text-5xl);
    font-weight: var(--pl-weight-black);
    color: var(--pl-primary);
    line-height: 1;
    margin-bottom: var(--pl-space-xs);
}

.pl-calc-result-big .pl-result-label {
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-medium);
    color: var(--pl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* ==========================================================================
   10. RECORD CARDS
   ========================================================================== */

.pl-auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--pl-space-md);
}

.pl-record-card {
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    padding: var(--pl-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--pl-space-sm);
    position: relative;
    overflow: hidden;
}

.pl-record-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pl-primary), var(--pl-accent));
}

.pl-record-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--pl-radius-full);
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-bold);
    flex-shrink: 0;
}

.pl-record-rank--1 {
    background: var(--pl-gold);
    color: var(--pl-gold-text);
}

.pl-record-rank--2 {
    background: var(--pl-silver);
    color: var(--pl-silver-text);
}

.pl-record-rank--3 {
    background: var(--pl-bronze);
    color: var(--pl-bronze-text);
}

.pl-record-weight {
    font-size: var(--pl-text-3xl);
    font-weight: var(--pl-weight-black);
    color: var(--pl-text);
    line-height: 1;
    letter-spacing: -0.03em;
}

.pl-record-weight small {
    font-size: var(--pl-text-lg);
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text-muted);
}

.pl-record-athlete {
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text);
}

.pl-record-meta {
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
}


/* ==========================================================================
   11. DATA DISPLAY - TABLES
   ========================================================================== */

.pl-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    background: var(--pl-surface);
}

.pl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--pl-text-sm);
}

.pl-table thead {
    background: var(--pl-gray-50);
    border-bottom: 1px solid var(--pl-border);
}

.pl-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: var(--pl-weight-semibold);
    font-size: var(--pl-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
    white-space: nowrap;
}

.pl-table td {
    padding: 12px 16px;
    color: var(--pl-text-secondary);
    border-bottom: 1px solid var(--pl-gray-100);
}

.pl-table tbody tr:last-child td {
    border-bottom: none;
}

.pl-table tbody tr:hover {
    background: var(--pl-gray-50);
}

.pl-table .pl-table-highlight {
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
}

.pl-table .pl-table-number {
    font-family: var(--pl-font-mono);
    font-weight: var(--pl-weight-medium);
}

/* Responsive table (card layout on mobile) */
@media (max-width: 639px) {
    .pl-table--responsive thead {
        display: none;
    }

    .pl-table--responsive tbody tr {
        display: block;
        padding: 12px 16px;
        border-bottom: 1px solid var(--pl-border);
    }

    .pl-table--responsive td {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        border-bottom: none;
    }

    .pl-table--responsive td::before {
        content: attr(data-label);
        font-weight: var(--pl-weight-semibold);
        color: var(--pl-text-muted);
        font-size: var(--pl-text-xs);
        text-transform: uppercase;
    }
}


/* ==========================================================================
   12. BADGES & TAGS
   ========================================================================== */

.pl-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    border-radius: var(--pl-radius-full);
    background: var(--pl-gray-100);
    color: var(--pl-text-secondary);
    white-space: nowrap;
}

.pl-badge--primary {
    background: var(--pl-primary-light);
    color: var(--pl-primary-dark);
}

.pl-badge--success {
    background: var(--pl-success-light);
    color: var(--pl-text);
}

.pl-badge--warning {
    background: var(--pl-warning-light);
    color: var(--pl-gold-text);
}

.pl-badge--raw {
    background: var(--pl-info-light);
    color: var(--pl-text);
}

.pl-badge--equipped {
    background: var(--pl-accent-light);
    color: var(--pl-gold-text);
}

.powerlifting-app .pl-badge a,
.powerlifting-app .pl-badge a:hover,
.powerlifting-app .pl-badge a:focus,
.powerlifting-app .pl-badge a:visited {
    color: inherit;
}

.pl-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-medium);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-full);
    background: var(--pl-surface);
    color: var(--pl-text-secondary);
    transition: all var(--pl-transition);
    cursor: pointer;
}

.pl-tag:hover {
    border-color: var(--pl-primary);
    color: var(--pl-primary);
    background: var(--pl-primary-light);
}

.pl-tag:focus-visible {
    box-shadow: var(--pl-focus-ring);
    outline: none;
}

.pl-tag--active {
    border-color: var(--pl-primary);
    background: var(--pl-primary);
    color: #fff;
}


/* ==========================================================================
   13. SEARCH
   ========================================================================== */

.pl-search-box {
    position: relative;
    max-width: 600px;
}

.pl-search-box .pl-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--pl-text-light);
    pointer-events: none;
    z-index: 1;
}

.pl-search-box .pl-input {
    padding-left: 44px;
    padding-right: 44px;
    font-size: var(--pl-text-base);
    border-radius: var(--pl-radius-xl);
}

.pl-search-box .pl-input:focus {
    box-shadow: 0 0 0 3px var(--pl-primary-light), var(--pl-shadow-lg);
}

.pl-search-box .pl-search-spinner {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--pl-gray-200);
    border-top-color: var(--pl-primary);
    border-radius: 50%;
    animation: pl-spin 0.6s linear infinite;
}

.pl-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    box-shadow: var(--pl-shadow-xl);
    z-index: 50;
    max-height: 400px;
    overflow-y: auto;
}

.pl-search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.1s;
}

.pl-search-result-item:hover,
.pl-search-result-item--active {
    background: var(--pl-gray-50);
}

.pl-search-result-item:focus-visible {
    box-shadow: var(--pl-focus-ring);
    outline: none;
}

.pl-search-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--pl-text-muted);
    font-size: var(--pl-text-sm);
}


/* ==========================================================================
   14. GAUGE / METER / PROGRESS
   ========================================================================== */

.pl-gauge {
    position: relative;
    width: 120px;
    height: 60px;
    overflow: hidden;
}

.pl-gauge-track {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 10px solid var(--pl-gray-100);
    border-bottom-color: transparent;
    border-left-color: transparent;
    transform: rotate(-225deg);
    position: absolute;
    top: 0;
    left: 0;
}

.pl-gauge-fill {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 10px solid var(--pl-primary);
    border-bottom-color: transparent;
    border-left-color: transparent;
    transform: rotate(-225deg);
    position: absolute;
    top: 0;
    left: 0;
    transition: clip-path 0.8s ease;
}

.pl-gauge-value {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--pl-text-2xl);
    font-weight: var(--pl-weight-black);
    color: var(--pl-text);
}

.pl-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--pl-gray-100);
    border-radius: var(--pl-radius-full);
    overflow: hidden;
}

.pl-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--pl-primary), var(--pl-accent));
    border-radius: var(--pl-radius-full);
    transition: width 0.6s ease;
}

/* Percentile bar with segments */
.pl-percentile-bar {
    display: flex;
    height: 10px;
    border-radius: var(--pl-radius-full);
    overflow: hidden;
    gap: 2px;
}

.pl-percentile-bar span {
    flex: 1;
    transition: opacity 0.3s;
}


/* ==========================================================================
   15. HERO SECTION
   ========================================================================== */

.pl-hero {
    position: relative;
    background: linear-gradient(135deg, var(--pl-secondary-dark) 0%, var(--pl-secondary) 50%, var(--pl-secondary-light) 100%);
    border-radius: var(--pl-radius-2xl);
    padding: var(--pl-space-3xl) var(--pl-space-xl);
    color: #fff;
    overflow: hidden;
    margin-bottom: var(--pl-space-3xl);
}

.pl-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.pl-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.pl-hero-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
}

.pl-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--pl-radius-full);
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--pl-space-lg);
    backdrop-filter: blur(4px);
}

.pl-hero-badge-dot {
    width: 8px;
    height: 8px;
    background: var(--pl-success);
    border-radius: 50%;
    animation: pl-pulse-dot 2s ease-in-out infinite;
}

@keyframes pl-pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.pl-hero h1 {
    font-size: var(--pl-text-3xl);
    font-weight: var(--pl-weight-black);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 var(--pl-space-md) 0;
    color: #fff;
}

.pl-hero-subtitle {
    font-size: var(--pl-text-lg);
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 var(--pl-space-xl) 0;
    line-height: 1.6;
    max-width: 560px;
}

@media (min-width: 768px) {
    .pl-hero {
        padding: var(--pl-space-4xl) var(--pl-space-3xl);
    }

    .pl-hero h1 {
        font-size: var(--pl-text-5xl);
    }

    .pl-hero-subtitle {
        font-size: var(--pl-text-xl);
    }
}

.pl-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pl-space-sm);
    margin-bottom: var(--pl-space-2xl);
}

/* Hero illustration - side-by-side layout on wide screens */
@media (min-width: 960px) {
    .pl-hero { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
    .pl-hero-content { flex-shrink: 0; max-width: 680px; }
    .pl-hero-illustration { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 959px) {
    .pl-hero-illustration { display: none; }
}

.powerlifting-app .pl-hero .pl-btn-primary {
    background: var(--pl-primary);
    color: #fff;
    border-color: var(--pl-primary);
    padding: 14px 28px;
    font-size: var(--pl-text-base);
    border-radius: var(--pl-radius-xl);
}

.powerlifting-app .pl-hero .pl-btn-primary:hover {
    background: var(--pl-primary-hover);
    border-color: var(--pl-primary-hover);
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3);
}


/* ==========================================================================
   16. STATS BAR
   ========================================================================== */

.pl-stats-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pl-space-lg);
}

@media (min-width: 640px) {
    .pl-stats-bar {
        grid-template-columns: repeat(4, 1fr);
    }
}

.pl-stats-bar--hero {
    padding-top: var(--pl-space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pl-stats-bar .pl-stat-item {
    text-align: center;
}

.pl-stats-bar--hero .pl-stat-item {
    text-align: left;
}


/* ==========================================================================
   17. FEDERATION CARDS
   ========================================================================== */

.pl-fed-card {
    display: flex;
    align-items: center;
    gap: var(--pl-space-md);
    padding: var(--pl-space-md) var(--pl-space-lg);
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    transition: all var(--pl-transition);
    text-decoration: none;
    color: inherit;
}

.pl-fed-card:hover {
    border-color: var(--pl-primary);
    box-shadow: var(--pl-shadow-md);
    transform: translateY(-1px);
}

.pl-fed-card:focus-visible {
    box-shadow: var(--pl-focus-ring);
    outline: none;
}

.pl-fed-logo {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pl-gray-100);
    border-radius: var(--pl-radius-lg);
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text-muted);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pl-fed-info {
    flex: 1;
    min-width: 0;
}

.pl-fed-name {
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-fed-meta {
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
    display: flex;
    align-items: center;
    gap: var(--pl-space-sm);
    margin-top: 2px;
}

.pl-fed-stat {
    font-family: var(--pl-font-mono);
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
    white-space: nowrap;
}


/* ==========================================================================
   18. COMPARISON
   ========================================================================== */

.pl-compare-table {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--pl-space-md);
    align-items: center;
}

.pl-compare-vs {
    font-size: var(--pl-text-2xl);
    font-weight: var(--pl-weight-black);
    color: var(--pl-primary);
    text-align: center;
}

.pl-compare-card {
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    padding: var(--pl-space-xl);
    text-align: center;
}

.pl-compare-card-name {
    font-size: var(--pl-text-lg);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
    margin-bottom: var(--pl-space-md);
}


/* ==========================================================================
   19. QUICK CALCULATOR (inline hero widget)
   ========================================================================== */

.pl-quick-calc {
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    padding: var(--pl-space-xl);
    box-shadow: var(--pl-shadow-lg);
}

.pl-quick-calc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--pl-space-lg);
}

.pl-quick-calc-header h3 {
    font-size: var(--pl-text-lg);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
    margin: 0;
}

.pl-quick-calc-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--pl-space-sm);
    align-items: end;
}

@media (max-width: 639px) {
    .pl-quick-calc-form {
        grid-template-columns: 1fr;
    }
}

.pl-quick-calc-result {
    text-align: center;
    padding: var(--pl-space-lg) 0;
    border-top: 1px solid var(--pl-border);
    margin-top: var(--pl-space-lg);
}

.pl-quick-calc-result .pl-result-score {
    font-size: var(--pl-text-4xl);
    font-weight: var(--pl-weight-black);
    color: var(--pl-primary);
    line-height: 1;
}

.pl-quick-calc-result .pl-result-classification {
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-semibold);
    margin-top: var(--pl-space-xs);
}


/* ==========================================================================
   20. LOADING STATES
   ========================================================================== */

.pl-skeleton {
    background: linear-gradient(
        90deg,
        var(--pl-gray-100) 25%,
        var(--pl-gray-200) 37%,
        var(--pl-gray-100) 63%
    );
    background-size: 200% 100%;
    animation: pl-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--pl-radius-md);
}

@keyframes pl-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.pl-skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    width: 80%;
}

.pl-skeleton-text:last-child {
    width: 60%;
}

.pl-skeleton-heading {
    height: 24px;
    width: 50%;
    margin-bottom: 12px;
}

.pl-skeleton-number {
    height: 40px;
    width: 100px;
}

.pl-skeleton-card {
    height: 140px;
}

.pl-skeleton-row {
    height: 48px;
    margin-bottom: 4px;
}

/* Spinner */
@keyframes pl-spin {
    to { transform: rotate(360deg); }
}

.pl-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--pl-gray-200);
    border-top-color: var(--pl-primary);
    border-radius: 50%;
    animation: pl-spin 0.6s linear infinite;
}

.pl-spinner--lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

/* Loading overlay */
.pl-loading-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pl-space-3xl);
    color: var(--pl-text-muted);
    gap: var(--pl-space-sm);
}


/* ==========================================================================
   21. TOAST / NOTIFICATION
   ========================================================================== */

.pl-toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.pl-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--pl-gray-800);
    color: #fff;
    border-radius: var(--pl-radius-lg);
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-medium);
    box-shadow: var(--pl-shadow-xl);
    pointer-events: auto;
    animation: pl-toast-in 0.3s ease;
    max-width: 400px;
}

.pl-toast--success { background: var(--pl-success); }
.pl-toast--error { background: var(--pl-error); }
.pl-toast--warning { background: var(--pl-accent-hover); }

@keyframes pl-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.pl-toast-dismiss {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pl-toast-dismiss:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}


/* ==========================================================================
   22. EXPLORE TEASER (mini search)
   ========================================================================== */

.pl-explore-teaser {
    background: var(--pl-gray-50);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-2xl);
    padding: var(--pl-space-2xl);
    text-align: center;
}

.pl-explore-teaser h2 {
    font-size: var(--pl-text-xl);
    font-weight: var(--pl-weight-extrabold);
    color: var(--pl-text);
    margin: 0 0 var(--pl-space-sm) 0;
}

.pl-explore-teaser p {
    color: var(--pl-text-muted);
    margin: 0 0 var(--pl-space-lg) 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.pl-explore-teaser .pl-search-box {
    margin: 0 auto var(--pl-space-lg);
}


/* ==========================================================================
   23. FAQ SECTION
   ========================================================================== */

.pl-faq-section {
    margin-top: var(--pl-space-3xl);
}

.pl-faq-item {
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-lg);
    margin-bottom: var(--pl-space-sm);
    background: var(--pl-surface);
    overflow: hidden;
}

.pl-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--pl-space-md) var(--pl-space-lg);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--pl-font-sans);
    font-size: var(--pl-text-base);
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text);
    text-align: left;
    gap: var(--pl-space-md);
}

.pl-faq-question:hover {
    background: var(--pl-gray-50);
}

.pl-faq-question:focus-visible {
    box-shadow: var(--pl-focus-ring);
    outline: none;
}

.pl-faq-icon {
    flex-shrink: 0;
    transition: transform var(--pl-transition-normal);
    color: var(--pl-text-muted);
}

.pl-faq-icon--open {
    transform: rotate(180deg);
}

.pl-faq-answer {
    padding: 0 var(--pl-space-lg) var(--pl-space-lg);
    color: var(--pl-text-secondary);
    line-height: 1.7;
}


/* ==========================================================================
   24. UTILITY CLASSES
   ========================================================================== */

/* Display */
.pl-hidden { display: none; }
.pl-block { display: block; }
.pl-flex { display: flex; }
.pl-inline-flex { display: inline-flex; }
.pl-grid-display { display: grid; }

/* Flex */
.pl-flex-col { flex-direction: column; }
.pl-items-center { align-items: center; }
.pl-items-start { align-items: flex-start; }
.pl-justify-center { justify-content: center; }
.pl-justify-between { justify-content: space-between; }
.pl-flex-wrap { flex-wrap: wrap; }
.pl-flex-1 { flex: 1; }

/* Gap */
.pl-gap-xs { gap: var(--pl-space-xs); }
.pl-gap-sm { gap: var(--pl-space-sm); }
.pl-gap-md { gap: var(--pl-space-md); }
.pl-gap-lg { gap: var(--pl-space-lg); }
.pl-gap-xl { gap: var(--pl-space-xl); }

/* Margin */
.pl-mt-0 { margin-top: 0; }
.pl-mt-sm { margin-top: var(--pl-space-sm); }
.pl-mt-md { margin-top: var(--pl-space-md); }
.pl-mt-lg { margin-top: var(--pl-space-lg); }
.pl-mt-xl { margin-top: var(--pl-space-xl); }
.pl-mt-2xl { margin-top: var(--pl-space-2xl); }
.pl-mb-0 { margin-bottom: 0; }
.pl-mb-sm { margin-bottom: var(--pl-space-sm); }
.pl-mb-md { margin-bottom: var(--pl-space-md); }
.pl-mb-lg { margin-bottom: var(--pl-space-lg); }
.pl-mb-xl { margin-bottom: var(--pl-space-xl); }
.pl-mb-2xl { margin-bottom: var(--pl-space-2xl); }

/* Padding */
.pl-p-md { padding: var(--pl-space-md); }
.pl-p-lg { padding: var(--pl-space-lg); }
.pl-p-xl { padding: var(--pl-space-xl); }

/* Text alignment */
.pl-text-center { text-align: center; }
.pl-text-right { text-align: right; }
.pl-text-left { text-align: left; }

/* Width */
.pl-w-full { width: 100%; }
.pl-max-w-sm { max-width: 480px; }
.pl-max-w-md { max-width: 640px; }
.pl-max-w-lg { max-width: 800px; }

/* Overflow */
.pl-overflow-hidden { overflow: hidden; }
.pl-overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Misc */
.pl-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Divider */
.pl-divider {
    border: none;
    border-top: 1px solid var(--pl-border);
    margin: var(--pl-space-xl) 0;
}

/* Link with arrow */
.powerlifting-app .pl-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-primary);
}

.powerlifting-app .pl-link-arrow:hover {
    gap: 8px;
}

.powerlifting-app .pl-link-arrow svg {
    width: 14px;
    height: 14px;
    transition: transform 0.15s;
}

.powerlifting-app .pl-link-arrow:hover svg {
    transform: translateX(2px);
}


/* ==========================================================================
   25. RECORDS HIGHLIGHT SECTION
   ========================================================================== */

.pl-records-grid {
    display: grid;
    gap: var(--pl-space-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .pl-records-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .pl-records-grid { grid-template-columns: repeat(4, 1fr); }
}

.pl-records-category {
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    overflow: hidden;
}

.pl-records-category-header {
    padding: var(--pl-space-md) var(--pl-space-lg);
    background: var(--pl-gray-50);
    border-bottom: 1px solid var(--pl-border);
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pl-records-list {
    padding: var(--pl-space-sm) 0;
}

.pl-records-entry {
    display: flex;
    align-items: center;
    gap: var(--pl-space-sm);
    padding: var(--pl-space-sm) var(--pl-space-lg);
}

.pl-records-entry-rank {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-bold);
    flex-shrink: 0;
}

.pl-records-entry-rank--1 { background: var(--pl-gold); color: var(--pl-gold-text); }
.pl-records-entry-rank--2 { background: var(--pl-silver); color: var(--pl-silver-text); }
.pl-records-entry-rank--3 { background: #f3e8e0; color: var(--pl-bronze); }

.pl-records-entry-info {
    flex: 1;
    min-width: 0;
}

.pl-records-entry-name {
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pl-records-entry-meta {
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
}

.pl-records-entry-weight {
    font-family: var(--pl-font-mono);
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-primary);
    white-space: nowrap;
}


/* ==========================================================================
   26. SECTION HEADER WITH LINK
   ========================================================================== */

.pl-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pl-space-md);
    margin-bottom: var(--pl-space-lg);
    flex-wrap: wrap;
}

.pl-section-header .pl-section-heading {
    margin-bottom: 0;
}


/* Federation grid (hub page) */
.pl-fed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--pl-space-md);
}

/* Fed card skeleton state */
.pl-fed-card--skeleton {
    pointer-events: none;
}

/* Quick calc description line */
.pl-quick-calc-desc {
    font-size: var(--pl-text-sm);
    color: var(--pl-text-muted);
    margin-top: var(--pl-space-xs);
    margin-bottom: var(--pl-space-md);
}

/* Explore teaser: database icon */
.pl-explore-teaser-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--pl-primary);
    margin: 0 auto var(--pl-space-md);
}

.pl-explore-teaser-icon svg {
    width: 24px;
    height: 24px;
}

/* Explore teaser: search form */
.pl-explore-teaser-search {
    margin: 0 auto var(--pl-space-lg);
}

/* Top rankings preview label */
.pl-rankings-preview-label {
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
    margin-bottom: var(--pl-space-md);
}

/* Top rankings preview table wrapper */
.pl-rankings-preview-table {
    max-width: 700px;
    margin: 0 auto;
}

/* Table cell: primary colored number */
.pl-table-highlight-primary {
    color: var(--pl-primary);
    font-weight: var(--pl-weight-bold);
}

/* Badge extra-small variant */
.pl-badge--xs {
    font-size: 10px;
    padding: 1px 6px;
}

/* Records empty state entry */
.pl-records-entry--empty {
    justify-content: center;
    color: var(--pl-text-muted);
    font-size: var(--pl-text-sm);
}

/* Inline section subheading (next to heading in section-header row) */
.pl-section-subheading-inline {
    font-size: var(--pl-text-sm);
}

/* Section header column variant (records section on hub) */
.pl-section-header--col {
    flex-direction: column;
    align-items: stretch;
    gap: var(--pl-space-sm);
}

.pl-section-header--col .pl-section-heading {
    margin-bottom: 0;
}

/* Utility: push element to the right in a flex row */
.pl-ml-auto {
    margin-left: auto;
}

/* Skeleton height utility classes (hub loading states) */
.pl-skeleton-h-16 { height: 16px; }
.pl-skeleton-h-24 { height: 24px; }
.pl-skeleton-h-32 { height: 32px; }
.pl-skeleton-h-48 { height: 48px; }
.pl-skeleton-h-60 { height: 60px; }
.pl-skeleton-h-80 { height: 80px; }

/* Skeleton width utilities */
.pl-skeleton-w-40 { width: 40%; }
.pl-skeleton-w-60 { width: 60%; }
.pl-skeleton-w-70 { width: 70%; }
.pl-skeleton-w-80 { width: 80px; }
.pl-skeleton-w-120 { width: 120px; }
.pl-skeleton-w-circle { width: 40px; height: 40px; border-radius: 50%; }
.pl-explore-skeleton-info { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.pl-skeleton-w-icon { width: 48px; height: 48px; border-radius: var(--pl-radius-lg); }

/* Scroll-reveal base states */
.pl-reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.pl-reveal.pl-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for child items */
.pl-stagger > *:nth-child(1) { transition-delay: 0ms; }
.pl-stagger > *:nth-child(2) { transition-delay: 60ms; }
.pl-stagger > *:nth-child(3) { transition-delay: 120ms; }
.pl-stagger > *:nth-child(4) { transition-delay: 180ms; }
.pl-stagger > *:nth-child(5) { transition-delay: 240ms; }
.pl-stagger > *:nth-child(6) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
    .pl-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   27. FOOTER (dark footer - consolidated in section 2d above)
   ========================================================================== */
/* All footer styles are in section 2d */


/* ==========================================================================
   28. ALPINE.JS TRANSITION HELPERS
   ========================================================================== */

.pl-fade-in {
    animation: pl-fade-in 0.3s ease;
}

@keyframes pl-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* x-transition classes (used with Alpine x-transition) */
.pl-enter {
    transition: all 0.2s ease-out;
}

.pl-enter-start {
    opacity: 0;
    transform: translateY(-8px);
}

.pl-enter-end {
    opacity: 1;
    transform: translateY(0);
}

.pl-leave {
    transition: all 0.15s ease-in;
}

.pl-leave-start {
    opacity: 1;
    transform: translateY(0);
}

.pl-leave-end {
    opacity: 0;
    transform: translateY(-8px);
}


/* ==========================================================================
   29. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .powerlifting-app *,
    .powerlifting-app *::before,
    .powerlifting-app *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ==========================================================================
   30. FORCED COLORS (Windows High Contrast Mode)
   ========================================================================== */

@media (forced-colors: active) {
    .pl-btn {
        border: 1px solid ButtonText;
    }

    .pl-btn-primary,
    .pl-btn-group .pl-btn-group-item--active,
    .pl-btn-group .pl-btn-group-item[aria-pressed="true"] {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
        border-color: Highlight;
    }

    .pl-badge,
    .pl-tag--active {
        forced-color-adjust: none;
        border: 1px solid ButtonText;
    }

    .pl-card,
    .pl-calc-form,
    .pl-fed-card {
        border: 1px solid ButtonText;
    }

    .pl-hero-badge-dot {
        forced-color-adjust: none;
    }

    .pl-input:focus {
        outline: 2px solid Highlight;
    }
}


/* ==========================================================================
   31. PRINT STYLES
   ========================================================================== */

@media print {
    .powerlifting-app {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    .pl-nav,
    .pl-footer,
    .pl-hero-badge,
    .pl-hero-cta,
    .pl-btn,
    .pl-toast-container,
    .pl-nav-hamburger,
    .pl-skip-link {
        display: none;
    }

    .pl-hero {
        background: none;
        color: #000;
        padding: 0;
        border: none;
        border-radius: 0;
        margin-bottom: 1rem;
    }

    .pl-hero::before,
    .pl-hero::after {
        display: none;
    }

    .pl-hero h1 {
        color: #000;
        font-size: 24pt;
    }

    .pl-card,
    .pl-calc-form,
    .pl-calc-results,
    .pl-record-card,
    .pl-quick-calc {
        border: 1px solid #ccc;
        box-shadow: none;
        break-inside: avoid;
    }

    .pl-table {
        font-size: 10pt;
    }

    .pl-table th,
    .pl-table td {
        padding: 4px 8px;
    }

    a[href]::after {
        content: none;
    }

    /* L2 - Hide nav/footer/skeleton; show result-hero */
    .pl-nav,
    .pl-mobile-nav,
    .pl-footer,
    .pl-skeleton,
    .pl-skeleton-row,
    .pl-spinner,
    .pl-search-box,
    .pl-btn-group,
    .pl-compare-hero .pl-hero-subtitle {
        display: none !important;
    }

    .pl-result-hero {
        border: 1px solid #ccc;
        background: #fff;
        color: #000;
        box-shadow: none;
        break-inside: avoid;
    }

    .pl-result-hero-value {
        color: #000;
    }
}


/* ==========================================================================
   ACCESSIBILITY UTILITIES
   ========================================================================== */


/* Sortable column button */
.pl-sort-btn {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    padding: 0;
    text-align: inherit;
    width: 100%;
}
.pl-sort-btn:focus-visible {
    outline: 2px solid var(--pl-accent);
    outline-offset: 2px;
    border-radius: 2px;
}


/* ==========================================================================
   32. EXPLORE PAGE - FULL LAYOUT
   (These classes are used by templates/explore/index.php but had no CSS)
   ========================================================================== */

.pl-explore-hero {
    background: linear-gradient(135deg, var(--pl-secondary-dark) 0%, var(--pl-secondary) 50%, var(--pl-secondary-light) 100%);
    border-radius: var(--pl-radius-2xl);
    padding: var(--pl-space-3xl) var(--pl-space-xl);
    color: #fff;
    margin-bottom: var(--pl-space-lg);
}

.pl-explore-hero-inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.pl-explore-hero h1 {
    font-size: var(--pl-text-3xl);
    font-weight: var(--pl-weight-black);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 var(--pl-space-sm) 0;
    color: #fff;
}

.pl-explore-hero-sub {
    font-size: var(--pl-text-base);
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 var(--pl-space-lg) 0;
}

.pl-explore-search-wrap {
    max-width: 560px;
    margin: 0 auto var(--pl-space-md);
}

.pl-explore-search {
    position: relative;
}

.pl-explore-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--pl-text-light);
    pointer-events: none;
    z-index: 1;
}

.powerlifting-app .pl-explore-search-input {
    display: block;
    width: 100%;
    padding: 14px 48px;
    font-family: var(--pl-font-sans);
    font-size: var(--pl-text-base);
    color: var(--pl-text);
    background: var(--pl-surface);
    border: none;
    border-radius: var(--pl-radius-xl);
    box-shadow: var(--pl-shadow-lg);
    transition: box-shadow var(--pl-transition);
    appearance: none;
}

.pl-explore-search-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--pl-primary-light), var(--pl-shadow-lg);
}

.pl-explore-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--pl-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
}

.pl-explore-search-spinner {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--pl-gray-200);
    border-top-color: var(--pl-primary);
    border-radius: 50%;
    animation: pl-spin 0.6s linear infinite;
}

.pl-explore-quick-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--pl-space-sm);
    font-size: var(--pl-text-sm);
    color: rgba(255, 255, 255, 0.75);
}

.pl-explore-stat-dot {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
}

/* Tabs */
.pl-explore-tabs {
    display: flex;
    border-bottom: 2px solid var(--pl-border);
    margin-bottom: var(--pl-space-lg);
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.pl-explore-tabs::-webkit-scrollbar {
    display: none;
}

.pl-explore-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: all var(--pl-transition);
}

.pl-explore-tab:hover {
    color: var(--pl-text);
}

.pl-explore-tab--active {
    color: var(--pl-primary);
    border-bottom-color: var(--pl-primary);
}

.pl-explore-tab:focus-visible {
    outline: 2px solid var(--pl-primary);
    outline-offset: -2px;
}

.pl-explore-tab-count {
    background: var(--pl-gray-100);
    color: var(--pl-text-muted);
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-bold);
    padding: 1px 7px;
    border-radius: var(--pl-radius-full);
}

.pl-explore-tab--active .pl-explore-tab-count {
    background: var(--pl-primary-light);
    color: var(--pl-primary);
}

/* Panel */
.pl-explore-panel {
    /* No special styles needed - just layout container */
}

/* Layout: sidebar + results */
.pl-explore-layout {
    display: flex;
    gap: var(--pl-space-xl);
    align-items: flex-start;
}

/* Filter sidebar */
.pl-explore-filters {
    width: 240px;
    flex-shrink: 0;
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    overflow: hidden;
}

.pl-explore-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pl-space-md) var(--pl-space-lg);
    border-bottom: 1px solid var(--pl-border);
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
}

.pl-explore-filters-close {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--pl-text-muted);
    min-width: 32px;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: var(--pl-radius-md);
}

.pl-explore-filters-close:hover {
    background: var(--pl-gray-100);
}

.pl-explore-filter-body {
    padding: var(--pl-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--pl-space-md);
}

.pl-explore-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--pl-space-xs);
}

.pl-explore-filter-label {
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
    margin-bottom: 2px;
}

.pl-explore-filter-check {
    display: flex;
    align-items: center;
    gap: var(--pl-space-sm);
    font-size: var(--pl-text-sm);
    color: var(--pl-text-secondary);
    cursor: pointer;
}

/* Results area */
.pl-explore-results {
    flex: 1;
    min-width: 0;
}

/* Toolbar */
.pl-explore-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pl-space-sm);
    margin-bottom: var(--pl-space-md);
    flex-wrap: wrap;
}

.pl-explore-toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--pl-space-sm);
    flex-wrap: wrap;
}

.pl-explore-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--pl-space-sm);
}

.pl-explore-filter-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text);
    background: var(--pl-surface);
    border: 1px solid var(--pl-border-strong);
    border-radius: var(--pl-radius-lg);
    cursor: pointer;
    font-family: inherit;
    position: relative;
    min-height: 44px;
}

.pl-explore-filter-toggle:hover {
    background: var(--pl-gray-50);
}

.pl-explore-filter-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--pl-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pl-explore-result-count {
    font-size: var(--pl-text-sm);
    color: var(--pl-text-muted);
}

.pl-explore-view-toggle {
    display: flex;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-md);
    overflow: hidden;
}

.pl-explore-view-btn {
    padding: 7px 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--pl-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    transition: all var(--pl-transition);
}

.pl-explore-view-btn:hover,
.pl-explore-view-btn--active {
    background: var(--pl-primary-light);
    color: var(--pl-primary);
}

/* Loading / skeleton */
.pl-explore-loading {
    padding: var(--pl-space-xl) 0;
}

.pl-explore-skeleton-list {
    display: flex;
    flex-direction: column;
    gap: var(--pl-space-sm);
}

.pl-explore-skeleton-row {
    height: 52px;
    background: linear-gradient(90deg, var(--pl-gray-100) 25%, var(--pl-gray-200) 37%, var(--pl-gray-100) 63%);
    background-size: 200% 100%;
    animation: pl-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--pl-radius-lg);
}

/* Empty state */
.pl-explore-empty {
    text-align: center;
    padding: var(--pl-space-3xl) var(--pl-space-xl);
    color: var(--pl-text-muted);
}

.pl-explore-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pl-space-sm);
    justify-content: center;
    margin-top: var(--pl-space-md);
}

/* Athlete name + cell */
.pl-explore-athlete-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pl-explore-athlete-name {
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text);
}

.pl-explore-athlete-name--elite {
    color: var(--pl-primary);
}

.pl-explore-athlete-country {
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
}

.pl-explore-meet-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pl-explore-meet-name {
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text);
}

.pl-explore-meet-name--link {
    color: var(--pl-primary);
}

/* Grid view cards */
.pl-explore-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--pl-space-md);
}

.pl-explore-athlete-card {
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    padding: var(--pl-space-lg);
    transition: all var(--pl-transition);
}

.pl-explore-athlete-card:hover {
    border-color: var(--pl-primary);
    box-shadow: var(--pl-shadow-md);
    transform: translateY(-2px);
}

.pl-explore-athlete-card-top {
    display: flex;
    align-items: center;
    gap: var(--pl-space-sm);
    margin-bottom: var(--pl-space-sm);
}

.pl-explore-athlete-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--pl-primary-light);
    color: var(--pl-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--pl-weight-bold);
    font-size: var(--pl-text-sm);
    flex-shrink: 0;
}

.pl-explore-athlete-avatar--f {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

.pl-explore-athlete-card-info {
    flex: 1;
    min-width: 0;
}

.pl-explore-athlete-card-meta {
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
}

.pl-explore-athlete-card-stats {
    display: flex;
    gap: var(--pl-space-sm);
    padding-top: var(--pl-space-sm);
    border-top: 1px solid var(--pl-border);
}

.pl-explore-athlete-card-stat-val {
    font-family: var(--pl-font-mono);
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
}

.pl-explore-athlete-card-stat-label {
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
}

/* Rank badge */
.pl-explore-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-bold);
    background: var(--pl-gray-100);
    color: var(--pl-text-muted);
    flex-shrink: 0;
}

.pl-explore-rank-badge--1 {
    background: #f59e0b;
    color: #fff;
}

.pl-explore-rank-badge--2 {
    background: #94a3b8;
    color: #fff;
}

.pl-explore-rank-badge--3 {
    background: #cd7c3e;
    color: #fff;
}

.pl-explore-ranking-top {
    background: rgba(245, 158, 11, 0.04);
}

/* Pagination */
.pl-explore-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pl-space-sm);
    padding: var(--pl-space-lg) 0;
    flex-wrap: wrap;
}

.pl-explore-page-info {
    font-size: var(--pl-text-sm);
    color: var(--pl-text-muted);
}

/* Default (no search) state */
.pl-explore-default {
    padding: var(--pl-space-lg) 0;
}

/* Popular searches */
.pl-explore-popular {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pl-space-sm);
    margin-top: var(--pl-space-md);
}

.pl-explore-popular-item {
    display: inline-flex;
    align-items: center;
    gap: var(--pl-space-xs);
    padding: 8px 14px;
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-full);
    font-size: var(--pl-text-sm);
    color: var(--pl-text-secondary);
    cursor: pointer;
    font-family: inherit;
    transition: all var(--pl-transition);
    min-height: 44px;
}

.pl-explore-popular-item:hover {
    border-color: var(--pl-primary);
    color: var(--pl-primary);
    background: var(--pl-primary-light);
}

.pl-explore-popular-icon {
    font-size: var(--pl-text-base);
}


/* ==========================================================================
   33. MOBILE RESPONSIVENESS - 375px / 768px / 1024px
   Covers: hero, stats bar, calc bento, records grid, explore layout,
           compare stacking, data tables, touch targets, typography
   ========================================================================== */

/* --------------------------------------------------------------------------
   375px - Small phones
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {

    /* Hero section */
    .pl-hero {
        padding: var(--pl-space-xl) var(--pl-space-md);
        border-radius: var(--pl-radius-xl);
        margin-bottom: var(--pl-space-xl);
    }

    .pl-hero h1 {
        font-size: var(--pl-text-2xl);
    }

    .pl-hero-subtitle {
        font-size: var(--pl-text-base);
    }

    .pl-hero-badge {
        font-size: 11px;
        padding: 5px 12px;
    }

    /* CTA buttons - stack vertically */
    .pl-hero-cta {
        flex-direction: column;
        gap: var(--pl-space-sm);
    }

    .pl-hero-cta .pl-btn {
        width: 100%;
        justify-content: center;
    }

    /* Stats bar - already 2-col but reduce gap */
    .pl-stats-bar {
        gap: var(--pl-space-md);
    }

    .pl-stat-number--hero {
        font-size: var(--pl-text-2xl);
    }

    /* Section spacing */
    .pl-main {
        padding-top: var(--pl-space-lg);
        padding-bottom: var(--pl-space-2xl);
    }

    .pl-section {
        margin-bottom: var(--pl-space-2xl);
    }

    /* Card padding */
    .pl-card-body {
        padding: var(--pl-space-md);
    }

    .pl-card-header {
        padding: var(--pl-space-md) var(--pl-space-md) 0;
    }

    .pl-card-footer {
        padding: 0 var(--pl-space-md) var(--pl-space-md);
    }

    /* Quick calc */
    .pl-quick-calc {
        padding: var(--pl-space-lg) var(--pl-space-md);
    }

    .pl-quick-calc-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--pl-space-sm);
    }

    /* Section header - stack on tiny screens */
    .pl-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--pl-space-xs);
    }

    /* Typography */
    .pl-h1 { font-size: var(--pl-text-2xl); }
    .pl-h2 { font-size: var(--pl-text-xl); }
    .pl-section-heading { font-size: var(--pl-text-lg); }

    /* Buttons - ensure 44px touch targets */
    .pl-btn {
        min-height: 44px;
        padding: 10px 16px;
    }

    .pl-btn-lg {
        min-height: 48px;
        padding: 12px 20px;
    }

    /* Bento grid - force single column */
    .pl-bento {
        grid-template-columns: 1fr;
    }

    /* Featured calc card - no span on mobile */
    .pl-calc-card--featured,
    a.pl-calc-card--featured[style*="grid-column"] {
        grid-column: span 1 !important;
    }

    /* Records grid - single column */
    .pl-records-grid {
        grid-template-columns: 1fr;
        gap: var(--pl-space-md);
    }

    /* Explore hero */
    .pl-explore-hero {
        padding: var(--pl-space-xl) var(--pl-space-md);
        border-radius: var(--pl-radius-xl);
    }

    .pl-explore-hero h1 {
        font-size: var(--pl-text-2xl);
    }

    /* Explore tabs - scrollable */
    .pl-explore-tab {
        padding: 10px 14px;
        font-size: var(--pl-text-xs);
    }

    /* Explore filter toggle visible, sidebar hidden by default */
    .pl-explore-filter-toggle {
        display: inline-flex;
    }

    .pl-explore-layout {
        flex-direction: column;
        gap: var(--pl-space-md);
    }

    .pl-explore-filters {
        width: 100%;
        /* Hidden on mobile until toggled */
        display: none;
    }

    .pl-explore-filters--open {
        display: block;
    }

    .pl-explore-filters-close {
        display: flex;
    }

    /* Compare page - stack athlete cards */
    .pl-compare-table {
        grid-template-columns: 1fr;
    }

    .pl-compare-vs {
        display: none;
    }

    /* Navigation */
    .pl-nav-inner {
        padding: 0 var(--pl-space-md);
    }

    /* Pagination */
    .pl-explore-pagination {
        gap: var(--pl-space-xs);
    }

    /* Popular items wrap tightly */
    .pl-explore-popular {
        gap: var(--pl-space-xs);
    }

    /* Footer */
    .pl-footer {
        padding: var(--pl-space-lg) 0;
    }
}

/* --------------------------------------------------------------------------
   768px - Tablets
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* Hero - slightly larger than 375px but still compact */
    .pl-hero {
        padding: var(--pl-space-2xl) var(--pl-space-lg);
        border-radius: var(--pl-radius-xl);
    }

    .pl-hero h1 {
        font-size: var(--pl-text-3xl);
    }

    /* CTA - wrap but don't necessarily stack */
    .pl-hero-cta {
        flex-wrap: wrap;
    }

    /* Stats bar - 2x2 grid already handled by existing 640px breakpoint */

    /* Bento: 2 columns (already handled by 640px), but reset featured span */
    .pl-calc-card--featured,
    a.pl-calc-card--featured[style*="grid-column"] {
        grid-column: span 2 !important;
    }

    /* Records grid stays 2-col (from 640px breakpoint) */

    /* Explore layout: sidebar overlays content on mobile/tablet */
    .pl-explore-filter-toggle {
        display: inline-flex;
    }

    .pl-explore-layout {
        flex-direction: column;
        gap: 0;
        position: relative;
    }

    .pl-explore-filters {
        width: 100%;
        display: none;
        margin-bottom: var(--pl-space-md);
    }

    .pl-explore-filters--open {
        display: block;
    }

    .pl-explore-filters-close {
        display: flex;
    }

    /* Calc content: keep single column below 768px */
    .pl-calc-content {
        grid-template-columns: 1fr;
    }

    /* Compare: head-to-head cards auto-fit already uses minmax(200px), fine */

    /* Table wrapper: ensure horizontal scroll on all tables */
    .pl-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Ensure table cells don't wrap awkwardly */
    .pl-table th,
    .pl-table td {
        white-space: nowrap;
    }

    /* Touch targets for tag/btn-group buttons */
    .pl-tag,
    .pl-btn-group-item {
        min-height: 40px;
        padding: 8px 14px;
    }

    /* Nav links hidden (already handles via 1024px breakpoint) */

    /* Explore toolbar */
    .pl-explore-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .pl-explore-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }

    /* Grid view: 2 columns on tablet */
    .pl-explore-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Quick stats bar: hide dots on narrow */
    .pl-explore-quick-stats {
        gap: var(--pl-space-xs);
    }
}

/* --------------------------------------------------------------------------
   1024px - Laptops / restore sidebar
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Explorer sidebar: show as overlay toggle on tablet-landscape */
    .pl-explore-filter-toggle {
        display: inline-flex;
    }

    .pl-explore-layout {
        flex-direction: column;
        gap: 0;
    }

    .pl-explore-filters {
        width: 100%;
        display: none;
        margin-bottom: var(--pl-space-md);
    }

    .pl-explore-filters--open {
        display: block;
    }

    .pl-explore-filters-close {
        display: flex;
    }
}

@media (min-width: 1024px) {

    /* Explore sidebar: always visible at desktop */
    .pl-explore-filter-toggle {
        display: none;
    }

    .pl-explore-layout {
        flex-direction: row;
        gap: var(--pl-space-xl);
    }

    .pl-explore-filters {
        display: block;
        width: 240px;
        flex-shrink: 0;
    }

    .pl-explore-filters-close {
        display: none;
    }

    /* Grid view: 3 columns on desktop */
    .pl-explore-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Hero h1 already handled by existing 768px breakpoint */

    /* Toolbar: single row */
    .pl-explore-toolbar {
        flex-direction: row;
        align-items: center;
    }

    .pl-explore-toolbar-right {
        width: auto;
        justify-content: flex-end;
    }

    /* Calc content stays single-column at every width (prose reading order) */
}


/* --------------------------------------------------------------------------
   Additional global touch-target + readability fixes (all mobile)
   -------------------------------------------------------------------------- */

/* Ensure all interactive elements meet 44px minimum */
@media (max-width: 1023px) {

    .pl-nav-mobile-link {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .pl-nav-dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .pl-unit-btn {
        min-height: 44px;
        padding: 6px 12px;
    }

    /* Increase base font size on small screens */
    .powerlifting-app {
        font-size: 15px;
    }

    /* Table cells: reduce padding to fit more data */
    .pl-table th,
    .pl-table td {
        padding: 10px 12px;
    }

    /* Section heading smaller on mobile */
    .pl-section-heading {
        font-size: var(--pl-text-lg);
    }

    /* FAQ question min height */
    .pl-faq-question {
        min-height: 52px;
    }

    /* Fed cards: ensure tap area */
    .pl-fed-card {
        min-height: 60px;
    }

    /* Calc card icon: ensure tap area when used as links */
    .pl-calc-card {
        min-height: 100px;
    }

    /* Explore search input: larger text on mobile */
    .pl-explore-search-input {
        font-size: 16px; /* prevents iOS zoom */
        padding: 14px 48px;
    }

    /* Any native inputs: prevent iOS zoom */
    .pl-input,
    .pl-select {
        font-size: 16px;
    }

    /* Reduce xl padding on containers */
    .pl-calc-form {
        padding: var(--pl-space-lg);
    }

    .pl-calc-results {
        padding: var(--pl-space-lg);
    }

    .pl-explore-teaser {
        padding: var(--pl-space-xl) var(--pl-space-lg);
    }
}


/* ==========================================================================
   ADDITIONS: Records, Standards, Federation polish (worker-4)
   ========================================================================== */

/* Records: weight-class badge inside entry meta */
.pl-records-entry-wc {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    background: var(--pl-gray-100);
    color: var(--pl-text-secondary);
    border-radius: var(--pl-radius-full);
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    white-space: nowrap;
}

/* Records: category deep-dive grid — replaces inline display:grid */
.pl-category-grid {
    display: grid;
    gap: var(--pl-space-md);
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin-bottom: var(--pl-space-xl);
}
@media (min-width: 640px) {
    .pl-category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .pl-category-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Standards: level indicator dot */
.pl-level-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    margin-top: 4px;
}
.pl-level-dot--beginner     { background: var(--pl-level-beginner); }
.pl-level-dot--novice       { background: var(--pl-level-novice); }
.pl-level-dot--intermediate { background: var(--pl-level-intermediate); }
.pl-level-dot--advanced     { background: var(--pl-level-advanced); }
.pl-level-dot--elite        { background: var(--pl-level-elite); }
.pl-level-dot--world        { background: var(--pl-level-world); }

/* Standards: world-class number highlight */
.pl-table-number--world {
    color: var(--pl-level-world);
    font-weight: var(--pl-weight-bold);
}

/* Standards: elite number highlight */
.pl-table-number--elite {
    color: var(--pl-primary);
}

/* Standards: highlighted row (user's detected weight class) */
.pl-table-row--highlight {
    background: var(--pl-primary-light);
}

/* Federation: untested badge variant */
.pl-badge--untested {
    background: var(--pl-gray-100);
    color: var(--pl-text-muted);
}

/* Federation: breadcrumb inside dark hero */
.pl-hero-breadcrumb {
    margin-bottom: var(--pl-space-md);
}
.pl-hero-breadcrumb a {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-medium);
    transition: color var(--pl-transition);
}
.pl-hero-breadcrumb a:hover {
    color: rgba(255, 255, 255, 0.9);
}

/* Federation: facts card grid */
.pl-fed-facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--pl-space-lg);
    margin-bottom: var(--pl-space-xl);
}
.pl-fed-fact-card {
    padding: var(--pl-space-md);
    background: var(--pl-gray-50);
    border-radius: var(--pl-radius-lg);
    border: 1px solid var(--pl-border);
}
.pl-fed-fact-label {
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
    margin-bottom: var(--pl-space-xs);
}
.pl-fed-fact-value {
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
}
.pl-fed-fact-value--success { color: var(--pl-success); }

/* Federation: charts grid */
.pl-fed-charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pl-space-xl);
}
@media (min-width: 768px) {
    .pl-fed-charts-grid { grid-template-columns: 1fr 1fr; }
}
.pl-fed-chart-wrap {
    position: relative;
    height: 300px;
}
.pl-fed-chart-wrap--centered {
    max-width: 500px;
    margin: 0 auto;
}

/* Records: non-top-3 rank badge fallback */
.pl-records-entry-rank--default {
    background: var(--pl-gray-100);
    color: var(--pl-text-muted);
}

/* Inline label display-block utility */
.pl-label-block {
    display: block;
    margin-bottom: var(--pl-space-sm);
}

/* Federation card: structured layout helpers */
.pl-card--fed {
    display: flex;
    flex-direction: column;
    gap: var(--pl-space-sm);
    padding: var(--pl-space-lg);
}
.pl-fed-card-header {
    display: flex;
    align-items: center;
    gap: var(--pl-space-md);
}
.pl-fed-card-info {
    flex: 1;
    min-width: 0;
}
.pl-fed-card-abbr {
    font-size: var(--pl-text-base);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
    margin: 0;
    line-height: 1.2;
}
.pl-fed-card-fullname {
    font-size: var(--pl-text-sm);
    color: var(--pl-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pl-fed-card-country {
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
}
.pl-fed-card-desc {
    font-size: var(--pl-text-sm);
    color: var(--pl-text-secondary);
    line-height: 1.5;
    flex: 1;
}
.pl-fed-card-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--pl-space-sm);
    border-top: 1px solid var(--pl-border);
    margin-top: auto;
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
}
.pl-fed-card-stats strong {
    font-family: var(--pl-font-mono);
    color: var(--pl-text);
}

/* ==========================================================================
   COMPARE PAGE - utility classes (replaces inline styles)
   ========================================================================== */

.pl-compare-hero {
    padding: var(--pl-space-2xl) var(--pl-space-xl);
}

.pl-compare-hero-content {
    max-width: 800px;
}

.pl-compare-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--pl-space-md);
}

.pl-compare-athlete-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pl-space-sm);
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
}

.pl-compare-best-total {
    margin-top: var(--pl-space-xs);
    font-family: var(--pl-font-mono);
    font-weight: 700;
    color: var(--pl-text);
}

.pl-compare-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--pl-space-md);
    align-items: stretch;
}

.pl-compare-athlete-name {
    font-size: var(--pl-text-lg);
    font-weight: var(--pl-weight-bold);
    margin: 0 0 var(--pl-space-xs) 0;
    color: var(--pl-text);
}

.pl-compare-athlete-location {
    font-size: var(--pl-text-sm);
    color: var(--pl-text-muted);
    margin-bottom: var(--pl-space-sm);
}

.pl-compare-best-total-big {
    margin-top: var(--pl-space-md);
    font-family: var(--pl-font-mono);
    font-size: var(--pl-text-2xl);
    font-weight: 900;
    color: var(--pl-text);
}

.pl-compare-best-total-label {
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pl-compare-chart-wrap {
    position: relative;
    height: 320px;
}

/* Winning score highlight (replaces :style on isHighestScore) */
.pl-compare-score-winner {
    color: var(--pl-success) !important;
    font-weight: 700;
}

.pl-compare-recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--pl-space-lg);
}

.pl-compare-recent-athlete-label {
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-bold);
    margin-bottom: var(--pl-space-sm);
}

.pl-compare-recent-list {
    display: flex;
    flex-direction: column;
    gap: var(--pl-space-xs);
}

.pl-compare-recent-item {
    padding: var(--pl-space-sm);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-md);
    font-size: var(--pl-text-sm);
}

.pl-compare-recent-item-meta {
    color: var(--pl-text-muted);
    font-size: var(--pl-text-xs);
}

.pl-compare-result-name {
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text);
}

.pl-compare-result-sub {
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
}

.pl-compare-result-total {
    font-family: var(--pl-font-mono);
    font-size: var(--pl-text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.pl-compare-teaser-eyebrow {
    font-size: var(--pl-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
    margin-bottom: var(--pl-space-sm);
}

.pl-compare-teaser-body {
    max-width: 500px;
    margin: 0 auto var(--pl-space-lg);
    color: var(--pl-text-muted);
}

/* Sort icon rotation via class (replaces :style transform) */
.pl-sort-icon {
    display: inline-flex;
    transition: transform var(--pl-transition);
}

.pl-sort-icon--asc {
    transform: rotate(180deg);
}

/* Explore table: ensure horizontal scroll */
.pl-explore-results .pl-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Meet name truncation */
.pl-explore-meet-truncate {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* ==========================================================================
   DIRECTORY PAGES - Athletes & Meets listing pages
   Missing classes used across athletes/index, meets/index, meets/detail,
   athletes/profile and other directory templates.
   ========================================================================== */

/* Hero sub-heading */
.pl-hero-sub {
    font-size: var(--pl-text-lg);
    color: rgba(255, 255, 255, 0.75);
    max-width: 600px;
    margin: var(--pl-space-sm) auto 0;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .pl-hero-sub { font-size: var(--pl-text-xl); }
}

/* Search bar */
.pl-search-bar {
    display: flex;
    flex-direction: column;
    gap: var(--pl-space-sm);
    margin-bottom: var(--pl-space-lg);
}

@media (min-width: 640px) {
    .pl-search-bar {
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: var(--pl-space-md);
    }
}

.pl-search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.powerlifting-app .pl-search-input-wrap input[type="search"] {
    width: 100%;
    padding: 10px 12px 10px 38px;
    font-size: var(--pl-text-sm);
    font-family: var(--pl-font-sans);
    border: 1px solid var(--pl-border-strong);
    border-radius: var(--pl-radius-lg);
    background: var(--pl-surface);
    color: var(--pl-text);
    transition: border-color var(--pl-transition), box-shadow var(--pl-transition);
    line-height: 1.5;
    -webkit-appearance: none;
}

.pl-search-input-wrap input[type="search"]:focus {
    outline: none;
    border-color: var(--pl-primary);
    box-shadow: 0 0 0 3px var(--pl-primary-light);
}

.pl-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--pl-text-muted);
    pointer-events: none;
    flex-shrink: 0;
}

/* Filter row */
.pl-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pl-space-sm);
    align-items: center;
}

.powerlifting-app .pl-filter-row select {
    padding: 10px 12px;
    font-size: var(--pl-text-sm);
    font-family: var(--pl-font-sans);
    border: 1px solid var(--pl-border-strong);
    border-radius: var(--pl-radius-md);
    background: var(--pl-surface);
    color: var(--pl-text);
    cursor: pointer;
    transition: border-color var(--pl-transition);
    min-width: 130px;
}

.pl-filter-row select:focus {
    outline: none;
    border-color: var(--pl-primary);
    box-shadow: 0 0 0 3px var(--pl-primary-light);
}

/* Results meta */
.pl-results-meta {
    font-size: var(--pl-text-sm);
    color: var(--pl-text-muted);
    margin-bottom: var(--pl-space-md);
    min-height: 20px;
}

/* Loading container */
.pl-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pl-space-md);
    padding: var(--pl-space-3xl) 0;
    color: var(--pl-text-muted);
    font-size: var(--pl-text-sm);
}

/* Table wrap */
.pl-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--pl-radius-lg);
    border: 1px solid var(--pl-border);
}

/* Empty state */
.pl-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pl-space-md);
    padding: var(--pl-space-3xl) var(--pl-space-xl);
    text-align: center;
    color: var(--pl-text-muted);
}

.pl-empty-state svg {
    width: 48px;
    height: 48px;
    color: var(--pl-gray-300);
    flex-shrink: 0;
}

.pl-empty-state p {
    font-size: var(--pl-text-sm);
    max-width: 360px;
    margin: 0;
    line-height: 1.6;
}

.pl-empty-state-img {
    display: block;
    margin: 0 auto 1.5rem;
    max-width: 200px;
    height: auto;
    opacity: 0.7;
}

/* Pagination */
.pl-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pl-space-md);
    margin-top: var(--pl-space-xl);
    padding-top: var(--pl-space-lg);
    border-top: 1px solid var(--pl-border);
}

.pl-pagination-info {
    font-size: var(--pl-text-sm);
    color: var(--pl-text-muted);
    white-space: nowrap;
}

/* Meet hero variant */
.pl-hero--meet {
    text-align: left;
}

.pl-hero--meet .pl-hero-content {
    max-width: 900px;
    margin: 0;
}

.pl-hero--meet .pl-hero-meta {
    font-size: var(--pl-text-lg);
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--pl-space-sm);
    margin-top: var(--pl-space-xs);
}

/* Meet detail loading skeleton height helpers */
.pl-skeleton--h32 { height: 32px; }
.pl-skeleton--h18 { height: 18px; }
.pl-skeleton--h14 { height: 14px; }
.pl-skeleton--h80 { height: 80px; border-radius: var(--pl-radius-xl); }
.pl-skeleton--w60 { width: 60%; }
.pl-skeleton--w40 { width: 40%; }
.pl-skeleton--w30 { width: 30%; }

/* Meet filter grid */
.pl-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--pl-space-sm);
    align-items: end;
}

.pl-filter-active-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--pl-space-sm);
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
}

/* Grouped view weight class header */
.pl-weight-class-header {
    padding: var(--pl-space-md) var(--pl-space-lg);
    background: var(--pl-gray-50);
    border-bottom: 1px solid var(--pl-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pl-weight-class-title {
    font-size: var(--pl-text-base);
    font-weight: var(--pl-weight-bold);
    margin: 0;
}

.pl-weight-class-count {
    font-weight: var(--pl-weight-normal);
    color: var(--pl-text-muted);
    font-size: var(--pl-text-sm);
    margin-left: var(--pl-space-xs);
}

/* Attempt detail expansion */
.pl-attempt-detail-label {
    font-size: var(--pl-text-xs);
    text-transform: uppercase;
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text-muted);
    margin-bottom: var(--pl-space-sm);
    letter-spacing: 0.05em;
}

.pl-attempt-lift-label {
    font-weight: var(--pl-weight-semibold);
    font-size: var(--pl-text-sm);
    margin-bottom: var(--pl-space-xs);
}

.pl-attempt-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pl-space-sm) var(--pl-space-lg);
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
    margin-top: var(--pl-space-sm);
}

/* No-results inline */
.pl-no-results-inline {
    text-align: center;
    padding: var(--pl-space-xl);
    color: var(--pl-text-muted);
    font-size: var(--pl-text-sm);
}

/* Profile helpers */
.pl-profile-loading {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--pl-space-md);
    color: var(--pl-text-muted);
    font-size: var(--pl-text-sm);
}

.pl-profile-error {
    padding: var(--pl-space-4xl) 0;
    text-align: center;
}

.pl-profile-back {
    margin-top: var(--pl-space-2xl);
}

.pl-percentile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--pl-space-md);
}

.pl-records-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--pl-space-md);
}

.pl-similar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--pl-space-md);
}

.pl-comp-table-wrap {
    max-height: 600px;
    overflow-y: auto;
}

.pl-comp-table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--pl-gray-50);
}

.pl-unit-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--pl-space-sm);
    margin-bottom: var(--pl-space-lg);
}

.pl-expand-btn {
    padding: 4px 6px;
    font-size: var(--pl-text-xs);
    background: none;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    cursor: pointer;
    color: var(--pl-text-muted);
    line-height: 1;
    font-family: var(--pl-font-sans);
    transition: all var(--pl-transition-fast);
}

.pl-expand-btn:hover {
    background: var(--pl-gray-50);
    color: var(--pl-text);
}

@media (max-width: 639px) {
    .pl-filter-row {
        flex-direction: column;
        align-items: stretch;
    }
    .pl-filter-row select,
    .pl-search-input-wrap {
        width: 100%;
        min-width: 0;
    }
    .pl-hero-sub {
        font-size: var(--pl-text-base);
    }
    .pl-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
    .pl-pagination {
        flex-wrap: wrap;
        gap: var(--pl-space-sm);
    }
}


/* ==========================================================================
   ADDITIONS: Mobile Responsiveness + Loading Performance (worker-10)
   ========================================================================== */


/* --------------------------------------------------------------------------
   PAGE HEADER — dark hero used on all calculator + data pages
   -------------------------------------------------------------------------- */

.pl-page-header {
    padding: var(--pl-space-xl) 0 var(--pl-space-lg);
    margin-bottom: var(--pl-space-xl);
}

.pl-page-header-dark {
    background: linear-gradient(135deg, var(--pl-secondary-dark) 0%, var(--pl-secondary) 100%);
    padding: var(--pl-space-2xl) var(--pl-space-xl);
    border-radius: var(--pl-radius-2xl);
    text-align: center;
    margin-bottom: var(--pl-space-xl);
}

/* The hidden attribute must always win: author display rules (e.g. .td-hero
   { display:flex }) otherwise override the UA [hidden] rule and skeletons/
   empty-states leak into the page. */
.powerlifting-app [hidden] {
    display: none !important;
}

/* Safety net: bare headings/paragraphs dropped into the dark header must never
   inherit the dark app text color (this produced an unreadable 1.2:1 hero). */
.pl-page-header-dark h1,
.pl-page-header-dark h2 {
    color: #fff;
}
.pl-page-header-dark p {
    color: rgba(255, 255, 255, 0.8);
}

.pl-page-title {
    font-size: var(--pl-text-3xl);
    font-weight: var(--pl-weight-extrabold);
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 var(--pl-space-sm) 0;
}

.pl-page-subtitle {
    font-size: var(--pl-text-base);
    color: rgba(255, 255, 255, 0.8);
    margin: 0 auto;
    max-width: 600px;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .pl-page-title { font-size: var(--pl-text-4xl); }
}

@media (max-width: 639px) {
    .pl-page-header-dark {
        padding: var(--pl-space-xl) var(--pl-space-md);
        border-radius: var(--pl-radius-xl);
    }
    .pl-page-title    { font-size: var(--pl-text-2xl); }
    .pl-page-subtitle { font-size: var(--pl-text-sm); }
}


/* --------------------------------------------------------------------------
   CALCULATOR FORM — form-grid, sex toggle, unit toggle, sections
   -------------------------------------------------------------------------- */

.pl-calculator {
    display: flex;
    flex-direction: column;
    gap: var(--pl-space-xl);
}

/* Form grid: 3-col desktop, 2-col tablet, 1-col mobile */
.pl-form-grid {
    display: grid;
    gap: var(--pl-space-md);
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
    .pl-form-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
    .pl-form-grid { grid-template-columns: 1fr; }
}

.pl-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--pl-space-xs);
}

.pl-form-group--total { max-width: 280px; }

@media (max-width: 479px) {
    .pl-form-group--total { max-width: 100%; }
}

.pl-form-label {
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text);
    display: block;
}

.pl-required { color: var(--pl-primary-dark); }

.pl-form-hint {
    font-size: var(--pl-text-sm);
    color: var(--pl-text-muted);
    margin: var(--pl-space-xs) 0 var(--pl-space-md);
    line-height: 1.5;
}

.pl-form-section {
    padding-top: var(--pl-space-md);
    border-top: 1px solid var(--pl-border);
}

.pl-form-section-title {
    font-size: var(--pl-text-base);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
    margin: 0 0 var(--pl-space-xs) 0;
    letter-spacing: -0.01em;
}

.pl-form-actions {
    padding-top: var(--pl-space-md);
    display: flex;
    gap: var(--pl-space-sm);
    flex-wrap: wrap;
}

@media (max-width: 479px) {
    .pl-form-actions .pl-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Input with inline unit suffix */
.pl-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.pl-input-wrap .pl-input {
    padding-right: 42px;
    width: 100%;
}

.pl-input-unit {
    position: absolute;
    right: 12px;
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text-muted);
    pointer-events: none;
}

/* Toggle row */
.pl-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pl-space-md);
    margin-bottom: var(--pl-space-md);
}

.pl-toggle-group {
    display: flex;
    align-items: center;
    gap: var(--pl-space-sm);
}

.pl-toggle-label {
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text-muted);
    white-space: nowrap;
}

/* Sex toggle */
.pl-sex-toggle {
    display: flex;
    border: 1px solid var(--pl-border-strong);
    border-radius: var(--pl-radius-full);
    overflow: hidden;
}

.pl-sex-btn {
    flex: 1;
    padding: 6px 16px;
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all var(--pl-transition);
    font-family: inherit;
    min-height: 36px;
}

.pl-sex-btn:focus-visible {
    outline: 2px solid var(--pl-primary);
    outline-offset: -2px;
}

.pl-sex-btn--active {
    background: var(--pl-primary);
    color: #fff;
}

/* Unit btn active state */
.pl-unit-btn--active {
    background: var(--pl-primary);
    color: #fff;
}

/* Inline error */
.pl-error-msg {
    display: flex;
    align-items: center;
    gap: var(--pl-space-sm);
    padding: var(--pl-space-sm) var(--pl-space-md);
    background: var(--pl-error-light);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: var(--pl-radius-md);
    color: var(--pl-primary-dark);
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-medium);
    margin-top: var(--pl-space-md);
}


/* --------------------------------------------------------------------------
   CALCULATOR RESULTS — score hero, breakdown rows, rating scale
   -------------------------------------------------------------------------- */

.pl-result-hero {
    text-align: center;
    padding: var(--pl-space-xl);
    background: linear-gradient(135deg, var(--pl-secondary-dark) 0%, var(--pl-secondary) 100%);
    border-radius: var(--pl-radius-xl);
    margin-bottom: var(--pl-space-md);
}

.pl-result-hero__label {
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: var(--pl-space-xs);
}

.pl-result-hero__value {
    font-size: var(--pl-text-5xl);
    font-weight: var(--pl-weight-black);
    color: #fff;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: var(--pl-space-xs);
}

.pl-result-hero__rating {
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

/* Sublabel/note sit on the dark hero too; without this they inherit the dark
   app text color and vanish. */
.pl-result-hero__sublabel,
.pl-result-hero__note {
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 479px) {
    .pl-result-hero          { padding: var(--pl-space-lg) var(--pl-space-md); }
    .pl-result-hero__value   { font-size: var(--pl-text-4xl); }
}

/* Rating colour classes */
.pl-rating--beginner     { color: var(--pl-level-beginner) !important; }
.pl-rating--novice       { color: var(--pl-level-novice) !important; }
.pl-rating--intermediate { color: var(--pl-level-intermediate) !important; }
.pl-rating--advanced     { color: var(--pl-level-advanced) !important; }
.pl-rating--elite        { color: var(--pl-level-elite) !important; }
.pl-rating--worldclass   { color: var(--pl-level-world) !important; }

/* Breakdown rows */
.pl-result-breakdown {
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    overflow: hidden;
    margin-bottom: var(--pl-space-md);
}

.pl-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--pl-space-sm) var(--pl-space-lg);
    border-bottom: 1px solid var(--pl-border);
    font-size: var(--pl-text-sm);
}

.pl-result-row:last-child        { border-bottom: none; }
.pl-result-row__label            { color: var(--pl-text-muted); font-weight: var(--pl-weight-medium); }
.pl-result-row__value            { font-weight: var(--pl-weight-bold); color: var(--pl-text); }

/* Rating scale */
.pl-rating-scale {
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    padding: var(--pl-space-lg);
    margin-bottom: var(--pl-space-md);
}

.pl-rating-scale__title {
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
    margin: 0 0 var(--pl-space-md) 0;
}

.pl-rating-bar { margin-bottom: var(--pl-space-sm); }

.pl-rating-bar__track {
    position: relative;
    height: 8px;
    background: linear-gradient(
        90deg,
        var(--pl-level-beginner)     0%,
        var(--pl-level-novice)       25%,
        var(--pl-level-intermediate) 50%,
        var(--pl-level-advanced)     75%,
        var(--pl-level-elite)        87.5%,
        var(--pl-level-world)        100%
    );
    border-radius: var(--pl-radius-full);
    margin-bottom: var(--pl-space-sm);
}

.pl-rating-bar__fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    border-radius: var(--pl-radius-full);
    transition: width var(--pl-transition-slow);
}

.pl-rating-bar__marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: left var(--pl-transition-slow);
}

.pl-rating-bar__marker::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background: var(--pl-secondary-dark);
    border: 2px solid #fff;
    border-radius: var(--pl-radius-full);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.pl-rating-bar__marker-val {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
    white-space: nowrap;
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    padding: 2px 6px;
}

.pl-rating-bar__labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--pl-text-muted);
    padding: 0 2px;
}

.pl-rating-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pl-space-xs) var(--pl-space-md);
    margin-top: var(--pl-space-sm);
}

.pl-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--pl-text-muted);
    white-space: nowrap;
}

.pl-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--pl-radius-full);
    flex-shrink: 0;
}

.pl-legend-dot--beginner     { background: var(--pl-level-beginner); }
.pl-legend-dot--intermediate { background: var(--pl-level-intermediate); }
.pl-legend-dot--advanced     { background: var(--pl-level-advanced); }
.pl-legend-dot--elite        { background: var(--pl-level-elite); }
.pl-legend-dot--worldclass   { background: var(--pl-level-world); }


/* --------------------------------------------------------------------------
   CALCULATOR SHIMMER SKELETON — Wilks (pl-wlk prefix)
   -------------------------------------------------------------------------- */

.pl-wlk-skeleton {
    scroll-margin-top: 80px;
    padding: var(--pl-space-lg) 0;
    display: flex;
    flex-direction: column;
    gap: var(--pl-space-md);
}

.pl-wlk-skel-hero,
.pl-wlk-skel-card,
.pl-wlk-skel-bar {
    border-radius: var(--pl-radius-xl);
    background: linear-gradient(90deg, var(--pl-gray-100) 25%, var(--pl-gray-50) 50%, var(--pl-gray-100) 75%);
    background-size: 800px 100%;
    animation: pl-wlk-shimmer 1.5s infinite linear;
}

.pl-wlk-skel-hero { height: 140px; }
.pl-wlk-skel-card { height: 100px; animation-delay: 0.1s; }
.pl-wlk-skel-bar  { height: 60px;  animation-delay: 0.2s; }

@keyframes pl-wlk-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.pl-skel-msg {
    text-align: center;
    font-size: var(--pl-text-sm);
    color: var(--pl-text-muted);
    margin: var(--pl-space-xs) 0 0;
    font-style: italic;
}


/* --------------------------------------------------------------------------
   DATA PROVENANCE / FRESHNESS
   -------------------------------------------------------------------------- */
.powerlifting-app .pl-provenance-note {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pl-space-xs) var(--pl-space-md);
    align-items: center;
    margin: var(--pl-space-md) 0 var(--pl-space-lg);
    padding: var(--pl-space-sm) var(--pl-space-md);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-lg);
    background: var(--pl-surface);
    color: var(--pl-text-muted);
    font-size: var(--pl-text-sm);
    line-height: 1.5;
}

.powerlifting-app .pl-provenance-note__source {
    font-weight: var(--pl-weight-medium);
}

/* SEO answer paragraph used on records pages (was an unstyled phantom class). */
.powerlifting-app .pl-answer-block {
    max-width: 780px;
    margin: 0 0 var(--pl-space-lg);
    color: var(--pl-text-secondary);
    font-size: var(--pl-text-sm);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   ATHLETE PROFILE — hero layout, stats grid, meta list, photo
   -------------------------------------------------------------------------- */

.pl-profile-hero {
    background: linear-gradient(135deg, var(--pl-secondary-dark) 0%, var(--pl-secondary) 100%);
    border-radius: var(--pl-radius-2xl);
    padding: var(--pl-space-2xl);
    margin-bottom: var(--pl-space-xl);
    color: #fff;
}

.pl-profile-hero-inner {
    display: flex;
    gap: var(--pl-space-xl);
    align-items: flex-start;
}

.pl-profile-photo-wrap { flex-shrink: 0; width: 120px; }

.pl-profile-photo {
    width: 120px;
    height: 120px;
    border-radius: var(--pl-radius-xl);
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.2);
    display: block;
}

.pl-profile-photo-placeholder {
    width: 120px;
    height: 120px;
    border-radius: var(--pl-radius-xl);
    background: rgba(255, 255, 255, 0.1);
    border: 3px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
}

.pl-profile-info      { flex: 1; min-width: 0; }
.pl-profile-info .pl-h1 { color: #fff; margin-bottom: var(--pl-space-sm); }

.pl-profile-meta-list {
    display: flex;
    flex-direction: column;
    gap: var(--pl-space-xs);
    margin-bottom: var(--pl-space-md);
}

.pl-profile-meta-item {
    display: flex;
    gap: var(--pl-space-sm);
    font-size: var(--pl-text-sm);
    align-items: center;
}

.pl-profile-meta-label {
    font-weight: var(--pl-weight-semibold);
    color: rgba(255, 255, 255, 0.55);
    min-width: 80px;
    flex-shrink: 0;
    font-size: var(--pl-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pl-profile-meta-item a           { color: rgba(255, 255, 255, 0.85); text-decoration: underline; text-underline-offset: 2px; }
.pl-profile-meta-item a:hover     { color: #fff; }

.pl-profile-bio {
    font-size: var(--pl-text-sm);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin: 0;
}

/* Stack on mobile */
@media (max-width: 639px) {
    .pl-profile-hero {
        padding: var(--pl-space-lg) var(--pl-space-md);
        border-radius: var(--pl-radius-xl);
    }
    .pl-profile-hero-inner {
        flex-direction: column;
        gap: var(--pl-space-md);
        align-items: center;
        text-align: center;
    }
    .pl-profile-meta-list  { align-items: center; }
    .pl-profile-meta-item  { justify-content: center; }
}

/* Stats grid: 4-col → 2-col */
.pl-profile-stats-grid {
    display: grid;
    gap: var(--pl-space-md);
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 767px) {
    .pl-profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
    .pl-profile-stats-grid { gap: var(--pl-space-sm); }
}

.pl-profile-stat-card {
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    padding: var(--pl-space-lg);
    text-align: center;
    transition: box-shadow var(--pl-transition);
}

.pl-profile-stat-card:hover                { box-shadow: var(--pl-shadow-md); }
.pl-profile-stat-card .pl-stat-label      { margin-bottom: var(--pl-space-xs); }
.pl-profile-stat-card .pl-stat-number     { font-size: var(--pl-text-2xl); }

@media (max-width: 479px) {
    .pl-profile-stat-card              { padding: var(--pl-space-md) var(--pl-space-sm); }
    .pl-profile-stat-card .pl-stat-number { font-size: var(--pl-text-xl); }
}


/* --------------------------------------------------------------------------
   TRANSITIONS, CLS PREVENTION, GLOBAL SAFETY NET
   -------------------------------------------------------------------------- */

/* Results entry animation */
@keyframes pl-result-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Only target the calc results block for entry animation, not all instances */
.pl-calculator .pl-calc-results[x-transition] {
    animation: pl-result-fadein 0.3s ease;
}

/* Scroll offset for skeleton and results */
.pl-wlk-skeleton,
.pl-calc-results {
    scroll-margin-top: 72px;
}

/* CLS: explicit image dimensions */
.powerlifting-app img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Prevent root horizontal overflow */
.powerlifting-app {
    overflow-x: clip;
}

/* No horizontal bleed on key sections */
.pl-hero,
.pl-section,
.pl-explore-hero,
.pl-quick-calc,
.pl-explore-teaser,
.pl-profile-hero {
    max-width: 100%;
    overflow-x: hidden;
}

/* Scrollable table shadow hint on mobile */
@media (max-width: 767px) {
    .pl-table-wrapper {
        background:
            linear-gradient(to right, var(--pl-surface) 30%, transparent),
            linear-gradient(to left,  var(--pl-surface) 30%, transparent) 100% 0,
            radial-gradient(farthest-side at 0%   50%, rgba(0,0,0,0.07), transparent),
            radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.07), transparent) 100% 0;
        background-repeat: no-repeat;
        background-color: var(--pl-surface);
        background-size: 40px 100%, 40px 100%, 10px 100%, 10px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}

/* 2-col fallback for stats grids on tiny screens */
@media (max-width: 479px) {
    .pl-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Touch targets */
@media (max-width: 1023px) {
    .pl-select { min-height: 44px; }
    .pl-sex-btn { min-height: 40px; padding: 8px 14px; }
    .pl-explore-tab {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .pl-pagination-btn,
    .pl-explore-pagination button {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Font safety on very small screens */
@media (max-width: 479px) {
    .pl-badge    { font-size: 10px; }
    .pl-table td,
    .pl-table th { font-size: var(--pl-text-xs); }
}

/* Reduced motion: disable all shimmer + entry animations */
@media (prefers-reduced-motion: reduce) {
    .pl-wlk-skel-hero,
    .pl-wlk-skel-card,
    .pl-wlk-skel-bar {
        animation: none;
    }
    .pl-calculator .pl-calc-results[x-transition] {
        animation: none;
    }
}


/* ==========================================================================
   ADDITIONS: Records / Standards / Federations page polish
   ========================================================================== */


/* --------------------------------------------------------------------------
   Skeleton utility classes (margin helpers)
   -------------------------------------------------------------------------- */

.powerlifting-app .pl-skeleton--mb4  { margin-bottom: 4px; }
.powerlifting-app .pl-skeleton--mb6  { margin-bottom: 6px; }
.powerlifting-app .pl-skeleton--circle-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.powerlifting-app .pl-skel-record-hero {
    padding: var(--pl-space-2xl) 0;
}


/* --------------------------------------------------------------------------
   Records list: padded variant
   -------------------------------------------------------------------------- */

.powerlifting-app .pl-records-list--padded {
    padding: var(--pl-space-sm) var(--pl-space-lg);
}


/* --------------------------------------------------------------------------
   Breadcrumb inside dark page header
   -------------------------------------------------------------------------- */

.powerlifting-app .pl-breadcrumb-hero {
    margin-bottom: var(--pl-space-md);
}

.powerlifting-app .pl-breadcrumb-list {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-size: var(--pl-text-sm);
    justify-content: center;
}

.powerlifting-app .pl-breadcrumb-link {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color var(--pl-transition);
}

.powerlifting-app .pl-breadcrumb-link:hover {
    color: rgba(255, 255, 255, 0.95);
}

.powerlifting-app .pl-breadcrumb-back {
    font-weight: var(--pl-weight-medium);
}

.powerlifting-app .pl-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.35);
}

.powerlifting-app .pl-breadcrumb-current {
    color: rgba(255, 255, 255, 0.9);
    font-weight: var(--pl-weight-medium);
}


/* --------------------------------------------------------------------------
   Page header: badge row + stats bar
   -------------------------------------------------------------------------- */

.powerlifting-app .pl-page-header-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--pl-space-sm);
    margin-bottom: var(--pl-space-md);
}

.powerlifting-app .pl-badge--ghost {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.powerlifting-app .pl-badge--neutral {
    background: var(--pl-gray-100);
    color: var(--pl-text-muted);
}

.powerlifting-app .pl-badge--xs {
    font-size: 10px;
    padding: 1px 6px;
}

.powerlifting-app .pl-badge--wc {
    background: var(--pl-gray-100);
    color: var(--pl-text-secondary);
    font-family: var(--pl-font-mono);
    font-size: var(--pl-text-xs);
}

.powerlifting-app .pl-page-header-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--pl-space-xl);
    margin-top: var(--pl-space-xl);
    padding-top: var(--pl-space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.powerlifting-app .pl-page-header-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.powerlifting-app .pl-page-header-stat-number {
    font-size: var(--pl-text-2xl);
    font-weight: var(--pl-weight-extrabold);
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1;
}

.powerlifting-app .pl-page-header-stat-label {
    font-size: var(--pl-text-xs);
    color: rgba(255, 255, 255, 0.65);
    font-weight: var(--pl-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 479px) {
    .powerlifting-app .pl-page-header-stats { gap: var(--pl-space-lg); }
    .powerlifting-app .pl-page-header-stat-number { font-size: var(--pl-text-xl); }
}


/* --------------------------------------------------------------------------
   Unit toggle bar (category.php)
   -------------------------------------------------------------------------- */

.powerlifting-app .pl-unit-toggle-bar {
    display: flex;
    align-items: center;
    gap: var(--pl-space-sm);
    padding: var(--pl-space-md) 0;
    margin-bottom: var(--pl-space-sm);
}


/* --------------------------------------------------------------------------
   Record card variants
   -------------------------------------------------------------------------- */

.powerlifting-app .pl-record-card--hero {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    padding: var(--pl-space-2xl);
}

.powerlifting-app .pl-record-card--wc {
    text-align: center;
}

.powerlifting-app .pl-record-rank--lg {
    width: 48px;
    height: 48px;
    font-size: var(--pl-text-xl);
}

.powerlifting-app .pl-records-entry-rank--default {
    background: var(--pl-gray-100);
    color: var(--pl-text-muted);
}

.powerlifting-app .pl-record-weight--hero {
    font-size: var(--pl-text-5xl);
    margin-bottom: var(--pl-space-sm);
}

.powerlifting-app .pl-record-weight--md {
    font-size: var(--pl-text-2xl);
    margin: var(--pl-space-xs) 0;
}

.powerlifting-app .pl-record-athlete--hero {
    font-size: var(--pl-text-xl);
    margin-bottom: var(--pl-space-sm);
}


/* --------------------------------------------------------------------------
   Table utility classes
   -------------------------------------------------------------------------- */

.powerlifting-app .pl-table-number--primary {
    font-weight: var(--pl-weight-bold);
    color: var(--pl-primary);
}

.powerlifting-app .pl-table-number--bold {
    font-weight: var(--pl-weight-bold);
}

.powerlifting-app .pl-table-number--world {
    color: var(--pl-level-world);
    font-weight: var(--pl-weight-bold);
}

.powerlifting-app .pl-table-athlete-link {
    color: var(--pl-text);
    font-weight: var(--pl-weight-semibold);
}

.powerlifting-app .pl-table-athlete-link:hover {
    color: var(--pl-primary);
}

.powerlifting-app .pl-table-link {
    color: var(--pl-primary);
}

.powerlifting-app .pl-table-link:hover {
    color: var(--pl-primary-hover);
}

.powerlifting-app .pl-col-rank  { width: 50px; }
.powerlifting-app .pl-col-level { width: 160px; }
.powerlifting-app .pl-col-meet  { max-width: 200px; }
.powerlifting-app .pl-col-wc   { max-width: 200px; font-size: var(--pl-text-xs); }

.powerlifting-app .pl-nowrap { white-space: nowrap; }

.powerlifting-app .pl-improvement-positive {
    color: var(--pl-text);
    font-weight: var(--pl-weight-semibold);
}


/* --------------------------------------------------------------------------
   Grid helpers
   -------------------------------------------------------------------------- */

.powerlifting-app .pl-grid--gap-md { display: grid; gap: var(--pl-space-md); }
.powerlifting-app .pl-grid--gap-xl { display: grid; gap: var(--pl-space-xl); }
.powerlifting-app .pl-grid-full-span { grid-column: 1 / -1; }


/* --------------------------------------------------------------------------
   Standards form helpers
   -------------------------------------------------------------------------- */

.powerlifting-app .pl-calc-form--wide   { max-width: 720px; }
.powerlifting-app .pl-input-bw          { flex: 1; max-width: 240px; }
.powerlifting-app .pl-input-lift        { flex: 1; min-width: 140px; }

.powerlifting-app .pl-form-row--bordered {
    border-top: 1px solid var(--pl-border);
    padding-top: var(--pl-space-lg);
    margin-top: var(--pl-space-sm);
}

.powerlifting-app .pl-text-relaxed    { line-height: 1.7; }
.powerlifting-app .pl-text-constrained { max-width: 800px; }
.powerlifting-app .pl-block           { display: block; }

.powerlifting-app .pl-mt-xs { margin-top: var(--pl-space-xs); }
.powerlifting-app .pl-mb-xs { margin-bottom: var(--pl-space-xs); }
.powerlifting-app .pl-mb-xl { margin-bottom: var(--pl-space-xl); }


/* --------------------------------------------------------------------------
   Federation directory: filter row, fed card, stats bar
   -------------------------------------------------------------------------- */

.powerlifting-app .pl-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pl-space-md);
    align-items: flex-end;
}

.powerlifting-app .pl-filter-search {
    flex: 1;
    min-width: 200px;
}

.powerlifting-app .pl-select--sort { min-width: 160px; }

.powerlifting-app .pl-fed-stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--pl-space-xl);
    padding: var(--pl-space-lg) var(--pl-space-xl);
    background: var(--pl-surface);
    border-bottom: 1px solid var(--pl-border);
    margin-bottom: var(--pl-space-xl);
}

.powerlifting-app .pl-fed-stats-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.powerlifting-app .pl-fed-stats-bar__number {
    font-size: var(--pl-text-2xl);
    font-weight: var(--pl-weight-extrabold);
    color: var(--pl-text);
    letter-spacing: -0.03em;
    line-height: 1;
    font-family: var(--pl-font-mono);
}

.powerlifting-app .pl-fed-stats-bar__label {
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
    font-weight: var(--pl-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.powerlifting-app .pl-fed-card {
    padding: var(--pl-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--pl-space-sm);
}

.powerlifting-app .pl-fed-card__name-block {
    flex: 1;
    min-width: 0;
}

.powerlifting-app .pl-fed-card__abbr {
    font-size: var(--pl-text-base);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
    margin: 0;
}

.powerlifting-app .pl-fed-card__fullname {
    font-size: var(--pl-text-sm);
    color: var(--pl-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.powerlifting-app .pl-fed-card__desc {
    font-size: var(--pl-text-sm);
    color: var(--pl-text-secondary);
    line-height: 1.5;
    flex: 1;
}

.powerlifting-app .pl-fed-card__stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--pl-space-sm);
    border-top: 1px solid var(--pl-border);
    margin-top: auto;
}

.powerlifting-app .pl-fed-card__stat {
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
}

.powerlifting-app .pl-fed-card__stat-num {
    color: var(--pl-text);
    font-family: var(--pl-font-mono);
}

.powerlifting-app .pl-empty-state {
    text-align: center;
    padding: var(--pl-space-3xl) var(--pl-space-xl);
    color: var(--pl-text-muted);
}

.powerlifting-app .pl-empty-state--page { padding: var(--pl-space-4xl) 0; }

.powerlifting-app .pl-empty-state__title {
    font-size: var(--pl-text-lg);
    font-weight: var(--pl-weight-semibold);
    margin-bottom: var(--pl-space-sm);
    color: var(--pl-text-muted);
}

.powerlifting-app .pl-empty-state__body {
    font-size: var(--pl-text-sm);
    color: var(--pl-text-muted);
}


/* --------------------------------------------------------------------------
   Federation detail page
   -------------------------------------------------------------------------- */

.powerlifting-app .pl-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pl-space-xl);
}

.powerlifting-app .pl-facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--pl-space-lg);
    margin-bottom: var(--pl-space-xl);
}

.powerlifting-app .pl-fact-card {
    padding: var(--pl-space-md);
    background: var(--pl-gray-50);
    border-radius: var(--pl-radius-lg);
}

.powerlifting-app .pl-fact-card__value {
    font-weight: var(--pl-weight-bold);
}

.powerlifting-app .pl-text-success   { color: var(--pl-text); }
.powerlifting-app .pl-text-secondary { color: var(--pl-text-secondary); }

.powerlifting-app .pl-wc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--pl-space-lg);
    margin-top: var(--pl-space-md);
}

.powerlifting-app .pl-chart-container {
    position: relative;
    height: 300px;
}

.powerlifting-app .pl-chart-container--narrow {
    max-width: 500px;
    margin: 0 auto;
}


/* --------------------------------------------------------------------------
   Remaining utility classes
   -------------------------------------------------------------------------- */

/* Skeleton pill shape (badge skeletons) */
.powerlifting-app .pl-skeleton--pill   { border-radius: var(--pl-radius-full); }
.powerlifting-app .pl-skeleton--badge  { width: 50px; }

/* Sort button reset */
.powerlifting-app .pl-sort-btn {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Records empty state inside a records list */
.powerlifting-app .pl-records-empty {
    padding: var(--pl-space-md) var(--pl-space-lg);
    text-align: center;
    color: var(--pl-text-muted);
    font-size: var(--pl-text-sm);
}

/* Table header sub-text (percentile ranges) */
.powerlifting-app .pl-th-sub {
    font-weight: normal;
    text-transform: none;
    opacity: 0.75;
}

/* Button group: no flex-shrink */
.powerlifting-app .pl-btn-group--noshrink { flex-shrink: 0; }

/* Flex wrap utility */
.powerlifting-app .pl-flex-wrap { flex-wrap: wrap; }

/* Padding utility (used on skeleton wrapper div) */
.powerlifting-app .pl-p-lg { padding: var(--pl-space-lg); }


/* ==========================================================================
   PHASE 3 - INTERACTIVITY ADDITIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   H1 - Button press microanimations
   -------------------------------------------------------------------------- */

.pl-btn-press:active {
    transform: scale(0.97) !important;
    transition: transform 80ms ease;
}

.pl-btn-ripple {
    position: relative;
    overflow: hidden;
}

.pl-btn-ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.pl-btn-ripple:active::after {
    transform: scale(2.5);
    opacity: 1;
    transition: 0s;
}

@media (prefers-reduced-motion: reduce) {
    .pl-btn-press:active {
        transform: none !important;
    }
    .pl-btn-ripple::after,
    .pl-btn-ripple:active::after {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   H2 - Card glow hover effect
   -------------------------------------------------------------------------- */

.pl-card-glow {
    position: relative;
    overflow: hidden;
}

.pl-card-glow::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(220, 38, 38, 0.06), transparent 60%);
    opacity: 0;
    transition: opacity var(--pl-transition-normal);
    pointer-events: none;
    z-index: 0;
}

.pl-card-glow:hover::before {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .pl-card-glow::before {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   H4 - Stagger animation delay classes
   -------------------------------------------------------------------------- */

.pl-stagger-1 { transition-delay: 60ms; }
.pl-stagger-2 { transition-delay: 120ms; }
.pl-stagger-3 { transition-delay: 180ms; }
.pl-stagger-4 { transition-delay: 240ms; }
.pl-stagger-5 { transition-delay: 300ms; }

/* --------------------------------------------------------------------------
   C3 - FAQ accordion interactive styles
   (Supplements existing .pl-faq-item, .pl-faq-question, .pl-faq-answer,
    .pl-faq-icon, .pl-faq-icon--open defined in powerlifting.css lines 2225-2265)
   -------------------------------------------------------------------------- */

/* Override static h3 header style with interactive button style */
.pl-faq-item .pl-faq-question {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--pl-gray-50);
    border: none;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--pl-text);
    cursor: pointer;
    text-align: left;
    transition: background var(--pl-transition);
    font-family: var(--pl-font-sans);
    line-height: 1.4;
}

.pl-faq-item .pl-faq-question:hover {
    background: var(--pl-gray-100);
}

.pl-faq-item .pl-faq-question:focus-visible {
    outline: 2px solid var(--pl-primary);
    outline-offset: -2px;
}

.pl-faq-item .pl-faq-question span {
    flex: 1;
}

.pl-faq-icon {
    flex-shrink: 0;
    transition: transform 250ms ease;
    color: var(--pl-text-muted);
}

.pl-faq-icon--open {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .pl-faq-icon {
        transition: none;
    }
}

.pl-faq-answer {
    padding: 0 20px 16px 20px;
    overflow: hidden;
}

.pl-faq-answer p {
    font-size: 0.95rem;
    color: var(--pl-text-secondary);
    margin: 12px 0 0 0;
    line-height: 1.7;
}

/* ==========================================================================
   PHASE 1 + 2 - Remaining utility classes (UI Fix Plan 2026-03-09)
   ========================================================================== */

/* L3 - Text size utilities */
.powerlifting-app .pl-text-sm   { font-size: var(--pl-text-sm); }
.powerlifting-app .pl-text-base { font-size: var(--pl-text-base); }
.powerlifting-app .pl-text-lg   { font-size: var(--pl-text-lg); }

/* L5 - pl-section-row-between */
.powerlifting-app .pl-section-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--pl-space-sm);
}

/* L7 - max-width utility */
.powerlifting-app .pl-max-w-full { max-width: 100%; }

/* L8 - margin auto */
.powerlifting-app .pl-mr-auto { margin-right: auto; }

/* L12 - pl-btn-ghost--active: active state for ghost toggle buttons */
.powerlifting-app .pl-btn-ghost--active {
    background: var(--pl-primary-light);
    color: var(--pl-primary);
}

/* ==========================================================================
   COMPARE PAGE - Extracted inline styles (UI Fix Plan 2026-03-09)
   ========================================================================== */

/* Search slots grid */
.powerlifting-app .pl-compare-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--pl-space-md);
}

/* Slot card overrides */
.powerlifting-app .pl-compare-slot-card {
    border-color: var(--pl-border-strong);
}

.powerlifting-app .pl-compare-slot-body {
    padding: var(--pl-space-md);
}

/* Athlete name inside selected slot */
.powerlifting-app .pl-compare-athlete-name {
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
}

/* Remove/close button inside slot */
.powerlifting-app .pl-compare-slot-btn {
    padding: 4px 8px;
}

/* Athlete meta row (country, sex, weight class) */
.powerlifting-app .pl-compare-athlete-meta {
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
}

/* Best total display inside slot */
.powerlifting-app .pl-compare-best-total {
    margin-top: var(--pl-space-xs);
    font-family: var(--pl-font-mono);
    font-weight: 700;
    color: var(--pl-text);
}

/* Search box inside slot */
.powerlifting-app .pl-compare-search-box {
    max-width: 100%;
}

/* Autocomplete dropdown positioning */
.powerlifting-app .pl-compare-dropdown {
    position: relative;
    top: 4px;
    max-height: 240px;
}

/* No results state inside dropdown */
.powerlifting-app .pl-compare-no-results {
    position: relative;
    top: 4px;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-lg);
}

/* Search result item: flex child that holds name + meta */
.powerlifting-app .pl-compare-result-main {
    flex: 1;
    min-width: 0;
}

/* Result item: athlete name */
.powerlifting-app .pl-compare-result-name {
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text);
}

/* Result item: country/federation meta */
.powerlifting-app .pl-compare-result-meta {
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
}

/* Result item: best total badge */
.powerlifting-app .pl-compare-result-total {
    font-family: var(--pl-font-mono);
    font-size: var(--pl-text-xs);
    font-weight: 600;
    white-space: nowrap;
}

/* Hint text below Compare button */
.powerlifting-app .pl-compare-hint {
    font-size: var(--pl-text-sm);
    margin-top: var(--pl-space-sm);
}

/* Spinner inside Compare button */
.powerlifting-app .pl-compare-btn-spinner {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

/* Overview card grid */
.powerlifting-app .pl-compare-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--pl-space-md);
    align-items: stretch;
}

/* Athlete overview card: name */
.powerlifting-app .pl-compare-card-name {
    font-size: var(--pl-text-lg);
    font-weight: var(--pl-weight-bold);
    margin: 0 0 var(--pl-space-xs) 0;
}

/* Athlete overview card: country/age meta */
.powerlifting-app .pl-compare-card-meta {
    font-size: var(--pl-text-sm);
    color: var(--pl-text-muted);
    margin-bottom: var(--pl-space-sm);
}

/* Athlete overview card: best total value */
.powerlifting-app .pl-compare-card-total {
    margin-top: var(--pl-space-md);
    font-family: var(--pl-font-mono);
    font-size: var(--pl-text-2xl);
    font-weight: 900;
    color: var(--pl-text);
}

/* Athlete overview card: "Best Total" label */
.powerlifting-app .pl-compare-card-total-label {
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Section headings with zero margin override */
.powerlifting-app .pl-h3-flush {
    margin: 0;
}

/* Chart wrapper (PR + Timeline) */
.powerlifting-app .pl-compare-chart-wrap {
    position: relative;
    height: 320px;
}

/* Table wrapper: remove border override */
.powerlifting-app .pl-table-wrapper--borderless {
    border: none;
}

/* Timeline: no-data message */
.powerlifting-app .pl-compare-timeline-empty {
    font-size: var(--pl-text-sm);
    padding: var(--pl-space-lg) 0;
}

/* Recent results grid */
.powerlifting-app .pl-compare-recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--pl-space-lg);
}

/* Per-athlete results column header */
.powerlifting-app .pl-compare-athlete-col-header {
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-bold);
    margin-bottom: var(--pl-space-sm);
}

/* Results list (flex column) */
.powerlifting-app .pl-compare-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--pl-space-xs);
}

/* Individual result row card */
.powerlifting-app .pl-compare-result-row {
    padding: var(--pl-space-sm);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-md);
    font-size: var(--pl-text-sm);
}

/* Result row: meet name */
.powerlifting-app .pl-compare-meet-name {
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text);
}

/* Result row: date/total meta */
.powerlifting-app .pl-compare-result-date-row {
    color: var(--pl-text-muted);
    font-size: var(--pl-text-xs);
}

/* Result row: total weight */
.powerlifting-app .pl-compare-result-weight {
    font-weight: 600;
    color: var(--pl-text);
}

/* Result row: DOTS sub-line */
.powerlifting-app .pl-compare-result-dots {
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
}

/* No results fallback text */
.powerlifting-app .pl-compare-no-recent {
    font-size: var(--pl-text-sm);
    color: var(--pl-text-muted);
}

/* Featured teaser card body */
.powerlifting-app .pl-compare-teaser-body {
    padding: var(--pl-space-2xl);
}

/* Featured teaser: eyebrow label */
.powerlifting-app .pl-compare-teaser-eyebrow {
    font-size: var(--pl-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
    margin-bottom: var(--pl-space-sm);
}

/* Featured teaser: heading */
.powerlifting-app .pl-compare-teaser-heading {
    margin-bottom: var(--pl-space-sm);
}

/* Featured teaser: description */
.powerlifting-app .pl-compare-teaser-desc {
    max-width: 500px;
    margin: 0 auto var(--pl-space-lg);
}

/* Scoring table: highest score highlight (applied via Alpine :class or :style) */
.powerlifting-app .pl-table-score-winner {
    color: var(--pl-text);
    font-weight: 700;
}

/* ==========================================================================
   TASK 2 - Remaining polish items (UI Fix Plan 2026-03-09)
   ========================================================================== */

/* M10 - pl-pulse-attention: CTA glow animation */
@keyframes pl-pulse-attention {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
    }
}

.powerlifting-app .pl-pulse-attention {
    animation: pl-pulse-attention 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .powerlifting-app .pl-pulse-attention {
        animation: none;
    }
}

/* M3 - pl-animate-fade-up and pl-animate-fade-scale keyframe animations */
@keyframes pl-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pl-fade-scale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.powerlifting-app .pl-animate-fade-up {
    animation: pl-fade-up 300ms ease-out both;
}

.powerlifting-app .pl-animate-fade-scale {
    animation: pl-fade-scale 250ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .powerlifting-app .pl-animate-fade-up,
    .powerlifting-app .pl-animate-fade-scale {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* SP2 - pl-section--alt: alternating background for hub sections */
.powerlifting-app .pl-section--alt {
    background: var(--pl-gray-50);
    border-top: 1px solid var(--pl-border);
    border-bottom: 1px solid var(--pl-border);
}

/* H7 - Sort icon rotation (replaces inline :style) */
.powerlifting-app .pl-sort-icon-asc {
    transform: rotate(180deg);
}

/* L4 - Focus ring for dark surfaces */
.powerlifting-app .pl-focus-ring-dark:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.5);
}

/* ==========================================================================
   VISUAL ENHANCEMENTS — appended
   ========================================================================== */

/* 1. Page Header Decorative Pattern */
.powerlifting-app .pl-page-header-dark {
    position: relative;
    overflow: hidden;
}
.powerlifting-app .pl-page-header-dark::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'%3E%3Cline x1='10' y1='30' x2='50' y2='30'/%3E%3Crect x='6' y='26' width='6' height='8' rx='1'/%3E%3Crect x='48' y='26' width='6' height='8' rx='1'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}
.powerlifting-app .pl-page-header-dark > * {
    position: relative;
    z-index: 1;
}

/* Decorative barbell SVG: without these rules the unsized SVG (viewBox 200x40)
   stretches to container width and adds ~240px of empty space above the h1. */
.powerlifting-app .pl-page-header-decor {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
}
.powerlifting-app .pl-page-header-decor svg {
    width: 420px;
    max-width: 80%;
    height: auto;
}

/* 2. Records Category Header with Lift Icons */
.powerlifting-app .pl-records-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.powerlifting-app .pl-records-category-header svg {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    flex-shrink: 0;
}

/* 3. Record Category Cards - Unique Colors Per Lift */
.powerlifting-app .pl-category-card--squat .pl-calc-card-icon { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.powerlifting-app .pl-category-card--bench .pl-calc-card-icon { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
.powerlifting-app .pl-category-card--deadlift .pl-calc-card-icon { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.powerlifting-app .pl-category-card--total .pl-calc-card-icon { background: rgba(124, 58, 237, 0.1); color: #7c3aed; }

/* 4. Animated Gradient Border on Calc Cards on Hover */
.powerlifting-app .pl-calc-card {
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.powerlifting-app .pl-calc-card:hover {
    transform: translateY(-3px);
}
.powerlifting-app .pl-calc-card--featured:hover {
    transform: translateY(-4px);
}
.powerlifting-app .pl-calc-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, var(--pl-primary), var(--pl-accent), var(--pl-primary));
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.powerlifting-app .pl-calc-card:hover::after {
    opacity: 1;
}
.powerlifting-app .pl-calc-card--featured::after {
    background: linear-gradient(90deg, rgba(255,255,255,0.3), rgba(255,255,255,0.6), rgba(255,255,255,0.3));
}

/* 5. Pulsing Glow on Gold Rank Badge */
.powerlifting-app .pl-records-entry-rank--1 {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
    animation: pl-pulse-gold 2s infinite;
}
@keyframes pl-pulse-gold {
    0%   { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
    70%  { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0); }
    100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}

/* 6. Enhanced Level Dots with Ring Effect */
.powerlifting-app .pl-level-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    position: relative;
}
.powerlifting-app .pl-level-indicator::after {
    content: '';
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0.3;
}
.powerlifting-app .pl-level-indicator--beginner     { background: var(--pl-level-beginner); color: var(--pl-level-beginner); }
.powerlifting-app .pl-level-indicator--intermediate { background: var(--pl-level-intermediate); color: var(--pl-level-intermediate); }
.powerlifting-app .pl-level-indicator--advanced     { background: var(--pl-level-advanced); color: var(--pl-level-advanced); }
.powerlifting-app .pl-level-indicator--elite        { background: var(--pl-level-elite); color: var(--pl-level-elite); }
.powerlifting-app .pl-level-indicator--world_class  { background: var(--pl-level-world); color: var(--pl-level-world); }

/* 7. Hero Stats Number Counter Animation */
.powerlifting-app .pl-stat-number--hero,
.powerlifting-app .pl-page-header-stat-number {
    display: inline-block;
    animation: pl-count-up 0.6s ease-out;
}
@keyframes pl-count-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 8. Records Grid Card Hover Lift Effect */
.powerlifting-app .pl-records-category {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.powerlifting-app .pl-records-category:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* 9. Federation Card Enhanced Hover */
.powerlifting-app .pl-fed-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.powerlifting-app .pl-fed-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border-color: var(--pl-primary);
}
.powerlifting-app .pl-fed-logo {
    transition: background 0.2s ease, color 0.2s ease;
}
.powerlifting-app .pl-fed-card:hover .pl-fed-logo {
    background: var(--pl-primary);
    color: #fff;
}

/* 10. Explore Teaser Icon Bounce */
.powerlifting-app .pl-explore-teaser-icon {
    animation: pl-float 3s ease-in-out infinite;
}
@keyframes pl-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

/* 11. Section Heading with Accent Underline */
.powerlifting-app .pl-section-heading {
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
}
.powerlifting-app .pl-section-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--pl-primary);
    border-radius: 3px;
}

/* 12. Table Row Hover Highlight */
.powerlifting-app .pl-table tbody tr {
    transition: background 0.15s ease;
}
.powerlifting-app .pl-table tbody tr:hover {
    background: var(--pl-primary-light);
}
.powerlifting-app .pl-table-row--highlight {
    background: rgba(220, 38, 38, 0.06) !important;
    border-left: 3px solid var(--pl-primary);
}

/* 13. Smooth Reveal Animation for Sections */
.powerlifting-app .pl-reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.powerlifting-app .pl-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* 14. Rating Bar Gradient Shimmer */
.powerlifting-app .pl-rating-bar__fill {
    position: relative;
    overflow: hidden;
}
.powerlifting-app .pl-rating-bar__fill::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: pl-shimmer-bar 2s infinite;
}
@keyframes pl-shimmer-bar {
    0%   { left: -100%; }
    100% { left: 100%; }
}

/* 15. Quick Calc Result Score Pop-in */
.powerlifting-app .pl-result-score {
    animation: pl-pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes pl-pop-in {
    0%   { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

/* 16. Subtle Card Icon Rotation on Hover */
.powerlifting-app .pl-calc-card-icon svg {
    transition: transform 0.3s ease;
}
.powerlifting-app .pl-calc-card:hover .pl-calc-card-icon svg {
    transform: rotate(-8deg) scale(1.1);
}


/* ============================================================================
   FEATURE 1: Weight Class Analyzer
   ============================================================================ */
/**
 * Powerlifting Hub - Feature 1: Weight Class Analyzer Styles
 *
 * Shared/reusable styles for the Weight Class Analyzer calculator.
 * Component-specific styles that only apply to this feature to keep
 * powerlifting.css lean. Scoped under .powerlifting-app.
 *
 * @package Powerlifting
 * @since 1.7.0
 */

/* ==========================================================================
   Weight Class Cards Grid
   ========================================================================== */

.powerlifting-app .pl-wc-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
}

@media (max-width: 640px) {
    .powerlifting-app .pl-wc-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ==========================================================================
   Individual Card
   ========================================================================== */

.powerlifting-app .pl-wc-card {
    position: relative;
    background: var(--pl-surface);
    border: 2px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    padding: 24px 20px 20px;
    text-align: center;
    transition:
        border-color var(--pl-transition-normal),
        box-shadow var(--pl-transition-normal),
        transform var(--pl-transition-normal);
    overflow: hidden;
}

.powerlifting-app .pl-wc-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--pl-shadow-md);
}

/* Current class highlight */
.powerlifting-app .pl-wc-card--current {
    border-color: var(--pl-primary);
    box-shadow: 0 0 0 3px var(--pl-primary-soft);
}

.powerlifting-app .pl-wc-card--current:hover {
    box-shadow: 0 0 0 3px var(--pl-primary-soft), var(--pl-shadow-md);
}

/* Best-fit class highlight */
.powerlifting-app .pl-wc-card--best:not(.pl-wc-card--current) {
    border-color: var(--pl-success);
    box-shadow: 0 0 0 3px var(--pl-success-light);
}

.powerlifting-app .pl-wc-card--best:not(.pl-wc-card--current):hover {
    box-shadow: 0 0 0 3px var(--pl-success-light), var(--pl-shadow-md);
}

/* ==========================================================================
   Card Badge
   ========================================================================== */

.powerlifting-app .pl-wc-card__badge {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--pl-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: var(--pl-radius-full);
    white-space: nowrap;
    line-height: 1.4;
}

.powerlifting-app .pl-wc-card__badge--best {
    background: var(--pl-success);
}

/* ==========================================================================
   Card Content
   ========================================================================== */

.powerlifting-app .pl-wc-card__class {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--pl-text);
    margin-top: 20px;
    line-height: 1;
}

.powerlifting-app .pl-wc-card__class-sub {
    font-size: 0.78rem;
    color: var(--pl-text-muted);
    font-weight: 500;
    margin-top: 4px;
    margin-bottom: 16px;
}

.powerlifting-app .pl-wc-card__percentile-wrap {
    margin: 4px 0 12px;
}

.powerlifting-app .pl-wc-card__percentile {
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--pl-text);
    line-height: 1;
}

.powerlifting-app .pl-wc-card__percentile-label {
    font-size: 0.75rem;
    color: var(--pl-text-muted);
    font-weight: 500;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   Percentile Bar
   ========================================================================== */

.powerlifting-app .pl-wc-card__bar-track {
    height: 6px;
    background: var(--pl-gray-100);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 0 8px;
}

.powerlifting-app .pl-wc-card__bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--pl-primary);
    transition: width 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}

.powerlifting-app .pl-wc-card__bar-fill--low  { background: var(--pl-level-beginner); }
.powerlifting-app .pl-wc-card__bar-fill--mid  { background: var(--pl-level-intermediate); }
.powerlifting-app .pl-wc-card__bar-fill--high { background: var(--pl-level-advanced); }
.powerlifting-app .pl-wc-card__bar-fill--top  { background: var(--pl-level-elite); }

/* ==========================================================================
   Sample size
   ========================================================================== */

.powerlifting-app .pl-wc-card__sample {
    font-size: 0.72rem;
    color: var(--pl-text-muted);
    font-family: var(--pl-font-mono);
}

/* ==========================================================================
   Recommendation Box
   ========================================================================== */

.powerlifting-app .pl-wc-recommendation {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
    background: var(--pl-primary-light);
    border: 1px solid var(--pl-primary-soft);
    border-radius: var(--pl-radius-lg);
    padding: 16px 20px;
    color: var(--pl-text);
}

.powerlifting-app .pl-wc-rec-icon {
    flex-shrink: 0;
    color: var(--pl-primary);
    margin-top: 1px;
}

.powerlifting-app .pl-wc-recommendation p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ==========================================================================
   Skeleton Loaders
   ========================================================================== */

.powerlifting-app .pl-wc-skeleton {
    scroll-margin-top: 80px;
    padding: 32px 0 16px;
}

.powerlifting-app .pl-wc-skel-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 640px) {
    .powerlifting-app .pl-wc-skel-cards {
        grid-template-columns: 1fr;
    }
}

.powerlifting-app .pl-wc-skel-card {
    height: 180px;
    border-radius: var(--pl-radius-xl);
    background: linear-gradient(
        90deg,
        var(--pl-gray-100) 25%,
        var(--pl-gray-50)  50%,
        var(--pl-gray-100) 75%
    );
    background-size: 800px 100%;
    animation: pl-wc-shimmer 1.5s infinite linear;
}

.powerlifting-app .pl-wc-skel-card--mid {
    height: 200px;
    animation-delay: 0.1s;
}

.powerlifting-app .pl-wc-skel-rec {
    height: 56px;
    border-radius: var(--pl-radius-lg);
    background: linear-gradient(
        90deg,
        var(--pl-gray-100) 25%,
        var(--pl-gray-50)  50%,
        var(--pl-gray-100) 75%
    );
    background-size: 800px 100%;
    animation: pl-wc-shimmer 1.5s infinite linear;
    animation-delay: 0.2s;
}

@keyframes pl-wc-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

/* ==========================================================================
   Back link
   ========================================================================== */

.powerlifting-app .pl-back-link {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--pl-border);
}

.powerlifting-app .pl-back-link .pl-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pl-text-muted);
    transition: color var(--pl-transition);
}

.powerlifting-app .pl-back-link .pl-link:hover {
    color: var(--pl-primary);
}

/* ============================================================================
   FEATURE 2: Coefficient Comparison Calculator
   ============================================================================ */
/**
 * Powerlifting Hub - Feature 2: Coefficient Comparison Calculator
 *
 * Styles for the Wilks / DOTS / IPF GL side-by-side comparison layout.
 * Uses pl- prefix. Shared variables live in powerlifting.css.
 *
 * @package Powerlifting
 * @since 1.7.0
 */

/* ============================================================
   Score Cards - 3-column layout
   ============================================================ */

.pl-sc-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.pl-sc-card {
    background: var(--pl-surface);
    border: 2px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    padding: 24px 20px;
    text-align: center;
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pl-sc-card--wilks {
    --sc-accent: #2563eb;
    --sc-accent-light: rgba(37, 99, 235, 0.08);
}

.pl-sc-card--dots {
    --sc-accent: #16a34a;
    --sc-accent-light: rgba(22, 163, 74, 0.08);
}

.pl-sc-card--ipfgl {
    --sc-accent: #dc2626;
    --sc-accent-light: rgba(220, 38, 38, 0.08);
}

.pl-sc-card--best {
    border-color: var(--sc-accent);
    box-shadow: 0 0 0 3px var(--sc-accent-light);
}

/* Best badge */
.pl-sc-card__best-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--sc-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Card header */
.pl-sc-card__header {
    margin-bottom: 16px;
}

.pl-sc-card__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sc-accent);
    margin-bottom: 8px;
}

.pl-sc-card__name {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sc-accent);
    margin: 0;
}

/* Score value */
.pl-sc-card__score {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
    color: var(--pl-text);
    margin: 12px 0 8px;
}

/* Level badge */
.pl-sc-card__level {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--sc-accent-light);
    color: var(--sc-accent);
    margin-bottom: 16px;
}

/* Divider */
.pl-sc-card__divider {
    border: none;
    border-top: 1px solid var(--pl-border);
    margin: 0 0 14px;
}

/* Meta list */
.pl-sc-card__meta {
    font-size: 0.78rem;
    color: var(--pl-text-secondary);
    line-height: 1.55;
    text-align: left;
}

.pl-sc-card__meta-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
}

.pl-sc-card__meta-bullet {
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sc-accent);
    margin-top: 6px;
}

/* ============================================================
   "Which score favors you?" insight box
   ============================================================ */

.pl-sc-insight {
    margin-top: 20px;
    background: var(--pl-gray-50);
    border: 1px solid var(--pl-border);
    border-left: 4px solid var(--pl-accent);
    border-radius: var(--pl-radius-lg);
    padding: 16px 20px;
}

.pl-sc-insight__title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pl-text-secondary);
    margin: 0 0 6px;
}

.pl-sc-insight__text {
    font-size: 0.9rem;
    color: var(--pl-text);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   Input summary row (shown in results)
   ============================================================ */

.pl-sc-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 4px;
    padding: 12px 16px;
    background: var(--pl-gray-50);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-lg);
}

.pl-sc-summary__item {
    font-size: 0.82rem;
    color: var(--pl-text-secondary);
}

.pl-sc-summary__item strong {
    color: var(--pl-text);
    font-weight: 700;
}

/* ============================================================
   Skeleton loader (prefix: sc)
   ============================================================ */

.pl-sc-skeleton {
    scroll-margin-top: 80px;
    padding: 24px 0;
}

.pl-sc-skel-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.pl-sc-skel-card {
    height: 180px;
    border-radius: var(--pl-radius-xl);
    background: linear-gradient(90deg, var(--pl-gray-100) 25%, var(--pl-gray-50) 50%, var(--pl-gray-100) 75%);
    background-size: 800px 100%;
    animation: pl-sc-shimmer 1.5s infinite linear;
}

.pl-sc-skel-card:nth-child(2) { animation-delay: 0.1s; }
.pl-sc-skel-card:nth-child(3) { animation-delay: 0.2s; }

.pl-sc-skel-insight {
    height: 64px;
    border-radius: var(--pl-radius-lg);
    background: linear-gradient(90deg, var(--pl-gray-100) 25%, var(--pl-gray-50) 50%, var(--pl-gray-100) 75%);
    background-size: 800px 100%;
    animation: pl-sc-shimmer 1.5s infinite linear;
    animation-delay: 0.3s;
}

@keyframes pl-sc-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

/* ============================================================
   Equipment toggle (Raw / Equipped) - IPF GL only
   ============================================================ */

.pl-sc-equip-note {
    font-size: 0.78rem;
    color: var(--pl-text-muted);
    margin-top: 4px;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 768px) {
    .pl-sc-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pl-sc-skel-row {
        grid-template-columns: 1fr;
    }

    .pl-sc-card__score {
        font-size: 2rem;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    .pl-sc-card__score {
        font-size: 1.9rem;
    }
}

/* ============================================================================
   FEATURE 3: Meet Results Enhancement
   ============================================================================ */
/**
 * Feature 3: Meet Results Enhancement
 * Meet Statistics card + Weight Class Winner highlights
 *
 * @package Powerlifting
 * @since 1.0.0
 */

/* ==========================================================================
   MEET STATISTICS CARD
   ========================================================================== */

.powerlifting-app .pl-meet-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--pl-border);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-lg, 12px);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .powerlifting-app .pl-meet-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 960px) {
    .powerlifting-app .pl-meet-stats {
        grid-template-columns: repeat(6, 1fr);
    }
}

.powerlifting-app .pl-meet-stats-item {
    background: var(--pl-surface);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
}

.powerlifting-app .pl-meet-stat-value {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--pl-text);
    font-variant-numeric: tabular-nums;
}

.powerlifting-app .pl-meet-stat-value--accent {
    color: var(--pl-primary);
}

.powerlifting-app .pl-meet-stat-label {
    font-size: var(--pl-text-xs, 0.75rem);
    color: var(--pl-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Card header */
.powerlifting-app .pl-meet-stats-card {
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-lg, 12px);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.powerlifting-app .pl-meet-stats-card-header {
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--pl-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.powerlifting-app .pl-meet-stats-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--pl-text);
    margin: 0;
}

.powerlifting-app .pl-meet-stats-card-body {
    padding: 0;
}

/* ==========================================================================
   WEIGHT CLASS WINNER HIGHLIGHT
   ========================================================================== */

.powerlifting-app .pl-wc-winner td {
    background: linear-gradient(
        to right,
        rgba(245, 158, 11, 0.07) 0%,
        rgba(245, 158, 11, 0.04) 60%,
        transparent 100%
    );
    position: relative;
}

/* Left gold bar */
.powerlifting-app .pl-wc-winner td:first-child {
    border-left: 3px solid var(--pl-accent);
}

/* Gold place badge */
.powerlifting-app .pl-wc-winner td:first-child span {
    color: var(--pl-accent-hover, #d97706);
    font-weight: 800;
}

/* Trophy icon next to place */
.powerlifting-app .pl-wc-winner-trophy {
    display: inline-block;
    margin-left: 0.25rem;
    font-size: 0.8em;
    vertical-align: middle;
    opacity: 0.85;
}

/* ============================================================================
   FEATURE 4: Records Progression Chart
   ============================================================================ */
/**
 * Powerlifting Hub - Feature 4b: Records Progression Chart Styles
 * @package Powerlifting
 * @since 1.7.0
 */

/* Chart Toggle Button */
.powerlifting-app .pl-chart-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #e5e7eb;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.powerlifting-app .pl-chart-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

.powerlifting-app .pl-chart-toggle-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.powerlifting-app .pl-chart-toggle-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Chart Wrapper */
.powerlifting-app .pl-chart-wrapper {
    margin-top: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.25rem;
}

.powerlifting-app .pl-chart-canvas-container {
    position: relative;
    height: 400px;
    width: 100%;
}

/* Loading */
.powerlifting-app .pl-chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    color: #9ca3af;
    font-size: 0.875rem;
}

.powerlifting-app .pl-chart-loading::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: pl-chart-spin 0.8s linear infinite;
}

@keyframes pl-chart-spin {
    to { transform: rotate(360deg); }
}

/* Error */
.powerlifting-app .pl-chart-error {
    padding: 1rem 1.25rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.875rem;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .powerlifting-app .pl-chart-canvas-container {
        height: 280px;
    }
    .powerlifting-app .pl-chart-wrapper {
        padding: 0.75rem;
    }
}

@media (max-width: 480px) {
    .powerlifting-app .pl-chart-canvas-container {
        height: 220px;
    }
}

/* ============================================================================
   FEATURE 5: Meet Finder
   ============================================================================ */
/**
 * Powerlifting Hub - Feature 5: Meet Finder Styles
 *
 * Scoped under .powerlifting-app so these rules never leak outside the
 * plugin wrapper. Follows the same BEM-light naming as other feature files.
 *
 * @package Powerlifting
 * @since 1.7.0
 */

/* ==========================================================================
   Filter Bar
   ========================================================================== */

.powerlifting-app .pl-mf-filter-bar {
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    padding: 20px 24px;
    margin-bottom: 24px;
}

.powerlifting-app .pl-mf-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.powerlifting-app .pl-mf-filter-group {
    flex: 1 1 180px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.powerlifting-app .pl-mf-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.powerlifting-app .pl-mf-search-wrap {
    position: relative;
    flex: 1;
}

.powerlifting-app .pl-mf-search-wrap .pl-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--pl-text-muted);
    pointer-events: none;
}

.powerlifting-app .pl-mf-search-input {
    padding-left: 38px;
    width: 100%;
}

.powerlifting-app .pl-mf-reset-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .powerlifting-app .pl-mf-filter-bar {
        padding: 16px;
    }

    .powerlifting-app .pl-mf-filter-row {
        gap: 12px;
    }

    .powerlifting-app .pl-mf-filter-group {
        flex: 1 1 calc(50% - 6px);
        min-width: 120px;
    }

    .powerlifting-app .pl-mf-search-row {
        flex-wrap: wrap;
    }

    .powerlifting-app .pl-mf-reset-btn {
        width: 100%;
    }
}

/* ==========================================================================
   Meet Cards Grid
   ========================================================================== */

.powerlifting-app .pl-mf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

@media (max-width: 1024px) {
    .powerlifting-app .pl-mf-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .powerlifting-app .pl-mf-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ==========================================================================
   Meet Card
   ========================================================================== */

.powerlifting-app .pl-mf-card {
    display: flex;
    flex-direction: column;
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    padding: 18px 20px 16px;
    text-decoration: none;
    color: var(--pl-text);
    transition:
        border-color var(--pl-transition-normal),
        box-shadow var(--pl-transition-normal),
        transform var(--pl-transition-normal);
    min-height: 130px;
}

.powerlifting-app .pl-mf-card:hover {
    border-color: var(--pl-primary);
    box-shadow: var(--pl-shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--pl-text);
}

.powerlifting-app .pl-mf-card:focus-visible {
    outline: 2px solid var(--pl-primary);
    outline-offset: 2px;
}

/* Card top row: federation badge + date */
.powerlifting-app .pl-mf-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.powerlifting-app .pl-mf-fed-badge {
    font-size: 0.68rem;
    padding: 2px 8px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.powerlifting-app .pl-mf-card-date {
    font-size: 0.78rem;
    color: var(--pl-text-muted);
    font-family: var(--pl-font-mono);
    white-space: nowrap;
}

/* Card name */
.powerlifting-app .pl-mf-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--pl-text);
    line-height: 1.35;
    margin: 0 0 8px;
    flex: 1;
    /* Allow two lines before truncating */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Location row */
.powerlifting-app .pl-mf-card-location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    color: var(--pl-text-muted);
    margin-bottom: 12px;
    min-height: 18px;
}

.powerlifting-app .pl-mf-card-location svg {
    flex-shrink: 0;
    color: var(--pl-text-muted);
}

/* Card footer: entries + arrow */
.powerlifting-app .pl-mf-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--pl-border);
}

.powerlifting-app .pl-mf-card-entries {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: var(--pl-text-muted);
}

.powerlifting-app .pl-mf-card-entries svg {
    flex-shrink: 0;
}

.powerlifting-app .pl-mf-card-arrow {
    color: var(--pl-primary);
    display: flex;
    align-items: center;
    transition: transform var(--pl-transition);
}

.powerlifting-app .pl-mf-card:hover .pl-mf-card-arrow {
    transform: translateX(3px);
}

/* ==========================================================================
   Skeleton Loader
   ========================================================================== */

.powerlifting-app .pl-mf-skeleton {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

@media (max-width: 1024px) {
    .powerlifting-app .pl-mf-skeleton {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .powerlifting-app .pl-mf-skeleton {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.powerlifting-app .pl-mf-skel-card {
    height: 130px;
    border-radius: var(--pl-radius-xl);
    background: linear-gradient(
        90deg,
        var(--pl-gray-100) 25%,
        var(--pl-gray-50)  50%,
        var(--pl-gray-100) 75%
    );
    background-size: 800px 100%;
    animation: pl-mf-shimmer 1.5s infinite linear;
}

.powerlifting-app .pl-mf-skel-card:nth-child(even) {
    animation-delay: 0.1s;
    height: 140px;
}

.powerlifting-app .pl-mf-skel-card:nth-child(3n) {
    animation-delay: 0.2s;
}

@keyframes pl-mf-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.powerlifting-app .pl-mf-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

.powerlifting-app .pl-mf-pagination .pl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================================================
   SEO section
   ========================================================================== */

.powerlifting-app .pl-mf-seo {
    border-top: 1px solid var(--pl-border);
    padding-top: 40px;
}

.powerlifting-app .pl-mf-seo .pl-seo-section h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pl-text);
    margin: 0 0 16px;
}

/* ============================================================================
   FEATURE 6: Federation Comparison
   ============================================================================ */
/**
 * Powerlifting Hub - Feature 6: Federation Comparison Tool
 *
 * Styles for the side-by-side federation comparison page.
 * Sticky first column on desktop; card stack on mobile.
 *
 * @package Powerlifting
 * @since   1.7.0
 */

/* ============================================================
   PICKER ROW
   ============================================================ */

.pl-fc-picker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-end;
}

.pl-fc-picker-slot {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 240px;
    flex: 1 1 240px;
}

.pl-fc-select-wrap {
    position: relative;
}

.pl-fc-select {
    width: 100%;
    padding-right: 2.5rem; /* room for spinner */
}

.pl-fc-select-spinner {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--pl-color-primary, #3b82f6);
    display: flex;
    align-items: center;
}

.pl-fc-remove-btn {
    align-self: flex-start;
    margin-top: 0.25rem;
    color: var(--pl-color-danger, #ef4444);
    font-size: 0.8125rem;
}

.pl-fc-remove-btn:hover {
    color: var(--pl-color-danger, #ef4444);
    opacity: 0.75;
}

/* Spin animation for loading icon */
@keyframes pl-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

.pl-spin {
    animation: pl-spin 0.8s linear infinite;
    transform-origin: center center;
}


/* ============================================================
   FEDERATION BADGES (overview row)
   ============================================================ */

.pl-fc-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.pl-fc-badge-card {
    flex: 1 1 160px;
    max-width: 260px;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    background: var(--pl-surface-2, #f8fafc);
    border: 2px solid transparent;
    text-align: center;
}

.pl-fc-badge-card--1 { border-color: #3b82f6; }
.pl-fc-badge-card--2 { border-color: #8b5cf6; }
.pl-fc-badge-card--3 { border-color: #10b981; }

.pl-fc-badge-abbr {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.pl-fc-badge-card--1 .pl-fc-badge-abbr { color: #3b82f6; }
.pl-fc-badge-card--2 .pl-fc-badge-abbr { color: #8b5cf6; }
.pl-fc-badge-card--3 .pl-fc-badge-abbr { color: #10b981; }

.pl-fc-badge-name {
    font-size: 0.8125rem;
    color: var(--pl-text-secondary, #64748b);
    line-height: 1.3;
    margin-bottom: 0.125rem;
}

.pl-fc-badge-country {
    font-size: 0.75rem;
    color: var(--pl-text-muted, #94a3b8);
}


/* ============================================================
   COMPARISON TABLE (desktop)
   ============================================================ */

.pl-fc-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pl-fc-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* Sticky attribute column */
.pl-fc-table__attr-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--pl-surface-1, #ffffff);
    min-width: 180px;
    max-width: 220px;
    white-space: nowrap;
}

.pl-fc-table__fed-col {
    min-width: 200px;
    text-align: center;
}

.pl-fc-table thead th {
    padding: 0.875rem 1rem;
    background: var(--pl-surface-2, #f8fafc);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--pl-text-primary, #0f172a);
    border-bottom: 2px solid var(--pl-border, #e2e8f0);
}

/* Color-code federation columns */
.pl-fc-table thead th:nth-child(2) { border-top: 3px solid #3b82f6; }
.pl-fc-table thead th:nth-child(3) { border-top: 3px solid #8b5cf6; }
.pl-fc-table thead th:nth-child(4) { border-top: 3px solid #10b981; }

.pl-fc-table__attr {
    position: sticky;
    left: 0;
    background: var(--pl-surface-1, #ffffff);
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pl-text-secondary, #64748b);
    border-bottom: 1px solid var(--pl-border, #e2e8f0);
    white-space: nowrap;
    /* Shadow to show separation from scrollable cols */
    box-shadow: 2px 0 4px -2px rgba(0,0,0,0.08);
}

.pl-fc-table__val {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--pl-text-primary, #0f172a);
    border-bottom: 1px solid var(--pl-border, #e2e8f0);
    text-align: center;
    vertical-align: middle;
}

/* Zebra highlight rows */
.pl-fc-table__row--highlight .pl-fc-table__attr,
.pl-fc-table__row--highlight .pl-fc-table__val {
    background: var(--pl-surface-hover, #f1f5f9);
}

/* Weight class cells don't need center align */
.pl-fc-table__val--wc {
    text-align: left;
}

/* Hover row highlight */
.pl-fc-table tbody tr:hover .pl-fc-table__val {
    background: var(--pl-surface-hover, #f1f5f9);
}

.pl-fc-table tbody tr:hover .pl-fc-table__attr {
    background: var(--pl-surface-hover, #f1f5f9);
}


/* ============================================================
   MOBILE CARDS
   ============================================================ */

/* Hidden on desktop, shown below 768px */
.pl-fc-mobile-cards {
    display: none;
}

.pl-fc-mobile-card {
    border-radius: 0.75rem;
    background: var(--pl-surface-1, #ffffff);
    border: 2px solid var(--pl-border, #e2e8f0);
    overflow: hidden;
    margin-bottom: 1rem;
}

.pl-fc-mobile-card--1 { border-color: #3b82f6; }
.pl-fc-mobile-card--2 { border-color: #8b5cf6; }
.pl-fc-mobile-card--3 { border-color: #10b981; }

.pl-fc-mobile-card__header {
    padding: 0.875rem 1rem;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.pl-fc-mobile-card--1 .pl-fc-mobile-card__header { background: #eff6ff; color: #3b82f6; }
.pl-fc-mobile-card--2 .pl-fc-mobile-card__header { background: #f5f3ff; color: #8b5cf6; }
.pl-fc-mobile-card--3 .pl-fc-mobile-card__header { background: #ecfdf5; color: #10b981; }

.pl-fc-mobile-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--pl-border, #e2e8f0);
}

.pl-fc-mobile-row:last-of-type {
    border-bottom: none;
}

.pl-fc-mobile-row__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pl-text-muted, #94a3b8);
    min-width: 140px;
    flex-shrink: 0;
}

.pl-fc-mobile-row__val {
    font-size: 0.875rem;
    color: var(--pl-text-primary, #0f172a);
    text-align: right;
    flex: 1;
}


/* ============================================================
   VIEW FULL PROFILES ROW
   ============================================================ */

.pl-fc-profiles-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.pl-fc-profile-link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex: 1 1 200px;
    max-width: 300px;
    padding: 1rem 1.25rem;
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.15s;
}

.pl-fc-profile-link:hover {
    transform: translateY(-2px);
}

.pl-fc-profile-link__abbr {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pl-text-primary, #0f172a);
}

.pl-fc-profile-link__label {
    font-size: 0.8125rem;
    color: var(--pl-color-primary, #3b82f6);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {
    /* Hide the desktop comparison table, show mobile cards */
    .pl-fc-table-wrapper {
        display: none;
    }

    .pl-fc-mobile-cards {
        display: block;
    }

    /* Picker slots stack full-width */
    .pl-fc-picker-slot {
        flex: 1 1 100%;
        min-width: unset;
    }

    /* Badges stack */
    .pl-fc-badge-card {
        flex: 1 1 100%;
        max-width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .pl-fc-badge-abbr {
        font-size: 1.25rem;
        min-width: 3.5rem;
    }

    /* Profile links stack */
    .pl-fc-profile-link {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* On tablet, allow table to scroll horizontally */
    .pl-fc-table-wrapper {
        overflow-x: auto;
    }

    .pl-fc-table__attr-col,
    .pl-fc-table__attr {
        min-width: 150px;
    }

    .pl-fc-table__fed-col {
        min-width: 170px;
    }
}


/* ============================================================
   SHARE CARD SECTION
   Share buttons shown below calculator results
   ============================================================ */

.pl-share-section {
    margin-top: 28px;
    padding: 24px;
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-lg);
}

.pl-share-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pl-text);
    margin: 0 0 16px 0;
}

.pl-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pl-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: var(--pl-radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s, transform 0.1s;
    text-decoration: none;
    line-height: 1;
}

.pl-share-btn:hover {
    opacity: 0.85;
}

.pl-share-btn:active {
    transform: scale(0.97);
}

.pl-share-btn--download {
    background: var(--pl-primary);
    color: #fff;
}

.pl-share-btn--download:hover {
    background: var(--pl-primary-hover);
    opacity: 1;
}

.pl-share-btn--story {
    background: var(--pl-surface-raised, #334155);
    color: var(--pl-text);
    border: 1px solid var(--pl-border);
}

.pl-share-btn--twitter {
    background: #000;
    color: #fff;
}

.pl-share-btn--facebook {
    background: #0f63ce;
    color: #fff;
}

.pl-share-btn--facebook:hover {
    background: #0b5fcc;
    opacity: 1;
}

.pl-share-btn--copy {
    background: var(--pl-surface-raised, #334155);
    color: var(--pl-text);
    border: 1px solid var(--pl-border);
}

.pl-share-btn--reddit {
    background: #c93600;
    color: #fff;
}

.pl-share-btn--reddit:hover {
    background: #a92d00;
    opacity: 1;
}

.pl-share-btn--whatsapp {
    background: #187a3f;
    color: #fff;
}

.pl-share-btn--whatsapp:hover {
    background: #126331;
    opacity: 1;
}

.pl-share-hint {
    margin: 12px 0 0 0;
    font-size: 0.825rem;
    color: var(--pl-text-muted);
}

@media (max-width: 480px) {
    .pl-share-buttons {
        flex-direction: column;
    }

    .pl-share-btn {
        justify-content: center;
        width: 100%;
    }

}

/* ============================================================
   Follow / Favorite Button
   ============================================================ */

.pl-btn-follow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--pl-radius-full);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-medium);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1;
}

.pl-btn-follow:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.7);
}

.pl-btn-follow--active {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.8);
}

.pl-btn-follow:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Light variant (used on white/light backgrounds) */
.pl-btn-follow--light {
    border-color: var(--pl-border);
    background: var(--pl-bg-card);
    color: var(--pl-text-secondary);
}

.pl-btn-follow--light:hover:not(:disabled) {
    border-color: var(--pl-primary);
    color: var(--pl-primary);
    background: var(--pl-bg-card);
}

.pl-btn-follow--light.pl-btn-follow--active {
    border-color: var(--pl-primary);
    color: var(--pl-primary);
    background: var(--pl-primary-light, #e8eeff);
}


/* ==========================================================================
   FOLLOWED ATHLETES ROW (Hub)
   ========================================================================== */

.pl-followed-section {
    padding-top: var(--pl-space-xl);
    padding-bottom: 0;
}

.pl-followed-row {
    display: flex;
    gap: var(--pl-space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--pl-space-sm);
    /* Hide scrollbar but keep scrollable */
    scrollbar-width: none;
}

.pl-followed-row::-webkit-scrollbar {
    display: none;
}

.pl-followed-card {
    display: flex;
    align-items: center;
    gap: var(--pl-space-sm);
    flex: 0 0 auto;
    scroll-snap-align: start;
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-lg);
    padding: var(--pl-space-sm) var(--pl-space-md);
    text-decoration: none;
    color: var(--pl-text);
    min-width: 160px;
    max-width: 220px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.pl-followed-card:hover {
    border-color: var(--pl-primary);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.12);
    transform: translateY(-1px);
    color: var(--pl-text);
    text-decoration: none;
}

.pl-followed-card-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pl-primary-light);
    color: var(--pl-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--pl-text-sm);
    line-height: 1;
}

.pl-followed-card-body {
    min-width: 0;
}

.pl-followed-card-name {
    font-size: var(--pl-text-sm);
    font-weight: 600;
    color: var(--pl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-followed-card-meta {
    font-size: var(--pl-text-xs);
    color: var(--pl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.pl-followed-empty {
    display: flex;
    align-items: center;
    gap: var(--pl-space-md);
    padding: var(--pl-space-md) var(--pl-space-lg);
    background: var(--pl-surface);
    border: 1px dashed var(--pl-border);
    border-radius: var(--pl-radius-lg);
    color: var(--pl-text-muted);
    font-size: var(--pl-text-sm);
}

.pl-followed-empty p {
    margin: 0;
    flex: 1;
}

@media (max-width: 480px) {
    .pl-followed-card {
        min-width: 140px;
        max-width: 180px;
    }
}

/* ==========================================================================
   GUIDE IMAGES
   ========================================================================== */

/* Guide detail - full-width hero banner */
.pl-guide-hero-image {
    margin: -1.5rem -1.5rem 1.5rem;
    border-radius: var(--pl-radius-lg, 12px) var(--pl-radius-lg, 12px) 0 0;
    overflow: hidden;
}

.pl-guide-header-img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 400px;
    object-fit: cover;
    /* Reduce layout shift: reserve 16:9 space until image loads */
    aspect-ratio: 16 / 9;
    background-color: var(--pl-gray-100);
    background-image: linear-gradient(90deg, var(--pl-gray-100) 25%, var(--pl-gray-200) 50%, var(--pl-gray-100) 75%);
    background-size: 200% 100%;
}

/* Guide index cards - thumbnail */
.pl-guide-card-thumb {
    margin: -1.5rem -1.5rem 0;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.pl-guide-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    /* Reduce layout shift: reserve space and show placeholder until image loads */
    aspect-ratio: 16 / 9;
    background-color: var(--pl-gray-100);
    background-image: linear-gradient(90deg, var(--pl-gray-100) 25%, var(--pl-gray-200) 50%, var(--pl-gray-100) 75%);
    background-size: 200% 100%;
}


/* ==========================================================================
   GUESS THE LIFTER - daily game (route: /powerlifting/game/)
   Mobile-first. Reuses the global --pl-* tokens. Light theme.
   ========================================================================== */

.pl-game {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 var(--pl-space-md);
}

.pl-game-header {
    text-align: center;
    margin-bottom: var(--pl-space-lg);
}

.pl-game-title {
    font-size: var(--pl-text-3xl);
    font-weight: var(--pl-weight-extrabold);
    color: var(--pl-text);
    margin: 0 0 0.35rem;
    line-height: 1.15;
}

.pl-game-subtitle {
    font-size: var(--pl-text-base);
    color: var(--pl-text-secondary);
    margin: 0;
}

.pl-game-poolnote {
    font-size: var(--pl-text-sm);
    color: var(--pl-gray-500);
    margin: 0.5rem 0 0;
}

/* ---- Board ---- */
.pl-game-board {
    margin-bottom: var(--pl-space-xl);
}

.pl-game-loading,
.pl-game-error {
    text-align: center;
    padding: var(--pl-space-xl) var(--pl-space-md);
    color: var(--pl-text-secondary);
    font-size: var(--pl-text-base);
}

.pl-game-error {
    color: var(--pl-primary-dark);
}

/* ---- Guess input + autocomplete ---- */
.pl-game-input-wrap {
    margin-bottom: var(--pl-space-lg);
}

.pl-game-input-label {
    display: block;
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text-secondary);
    margin-bottom: 0.4rem;
}

.pl-game-search {
    position: relative;
}

.powerlifting-app .pl-game-search-input {
    width: 100%;
    padding: 12px 14px;
    font-size: var(--pl-text-base);
    font-family: var(--pl-font-sans);
    color: var(--pl-text);
    background: #fff;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-lg);
    transition: border-color var(--pl-transition-fast), box-shadow var(--pl-transition-fast);
}

.pl-game-search-input:focus {
    outline: none;
    border-color: var(--pl-success);
    box-shadow: 0 0 0 3px var(--pl-success-light);
}

.pl-game-suggest {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-lg);
    box-shadow: var(--pl-shadow-lg);
    max-height: 320px;
    overflow-y: auto;
}

.pl-game-suggest-item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 10px 14px;
    cursor: pointer;
    min-height: 44px;
    justify-content: center;
    border-bottom: 1px solid var(--pl-gray-100);
}

.pl-game-suggest-item:last-child {
    border-bottom: none;
}

.pl-game-suggest-item:hover,
.pl-game-suggest-item:focus {
    background: var(--pl-gray-100);
}

.pl-game-suggest-name {
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-text);
    font-size: var(--pl-text-sm);
}

.pl-game-suggest-meta {
    font-size: var(--pl-text-xs);
    color: var(--pl-gray-500);
}

/* ---- Feedback grid ---- */
.pl-game-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--pl-space-md);
}

.pl-game-grid-head,
.pl-game-row {
    display: grid;
    grid-template-columns: 1.6fr 0.7fr 1fr 0.9fr 0.9fr 1fr 1fr;
    gap: 4px;
    align-items: stretch;
}

.pl-game-grid-head {
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.pl-game-grid-head span {
    padding: 2px 4px;
    text-align: center;
}

.pl-game-grid-head span:first-child {
    text-align: left;
}

.pl-game-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    text-align: center;
    border-radius: var(--pl-radius-md);
    background: var(--pl-gray-100);
    color: var(--pl-text);
    min-height: 40px;
    line-height: 1.1;
    word-break: break-word;
}

.pl-game-cell--name {
    justify-content: flex-start;
    text-align: left;
    background: transparent;
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
}

.pl-game-cell--green {
    background: var(--pl-success);
    color: #fff;
}

.pl-game-cell--amber {
    background: var(--pl-warning);
    color: #fff;
}

.pl-game-cell--gray {
    background: var(--pl-gray-200);
    color: var(--pl-gray-700);
}

.pl-game-arrow {
    font-size: 0.85em;
    line-height: 1;
}

/* ---- Legend ---- */
.pl-game-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: var(--pl-space-lg);
    font-size: var(--pl-text-xs);
    color: var(--pl-text-secondary);
}

.pl-game-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.pl-game-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
}

.pl-game-swatch--green { background: var(--pl-success); }
.pl-game-swatch--amber { background: var(--pl-warning); }
.pl-game-swatch--gray  { background: var(--pl-gray-300); }

/* ---- Result + reveal ---- */
.pl-game-result {
    text-align: center;
    padding: var(--pl-space-lg) var(--pl-space-md);
    border-radius: var(--pl-radius-lg);
    margin-bottom: var(--pl-space-lg);
}

.pl-game-result--win {
    background: var(--pl-success-light);
    border: 1px solid var(--pl-success);
}

.pl-game-result--loss {
    background: var(--pl-gray-100);
    border: 1px solid var(--pl-border);
}

.pl-game-result-headline {
    font-size: var(--pl-text-xl);
    font-weight: var(--pl-weight-extrabold);
    color: var(--pl-text);
    margin: 0 0 0.4rem;
}

.pl-game-reveal {
    font-size: var(--pl-text-base);
    color: var(--pl-text);
    margin: 0 0 0.5rem;
    font-weight: var(--pl-weight-semibold);
}

.pl-game-reveal-link {
    display: inline-block;
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-primary);
    text-decoration: none;
}

.pl-game-reveal-link:hover {
    text-decoration: underline;
}

/* ---- Share + countdown ---- */
.pl-game-share {
    text-align: center;
    margin-bottom: var(--pl-space-lg);
}

.pl-game-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: var(--pl-text-base);
    font-weight: var(--pl-weight-bold);
    font-family: var(--pl-font-sans);
    color: #fff;
    background: var(--pl-success-text);
    border: none;
    border-radius: var(--pl-radius-lg);
    cursor: pointer;
    min-height: 44px;
    transition: background var(--pl-transition-fast), transform var(--pl-transition-fast);
}

.pl-game-share-btn:hover {
    background: #14532d;
}

.pl-game-share-btn:active {
    transform: translateY(1px);
}

.pl-game-countdown {
    font-size: var(--pl-text-sm);
    color: var(--pl-gray-500);
    margin: 0.6rem 0 0;
    font-variant-numeric: tabular-nums;
}

/* ---- Stats ---- */
.pl-game-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pl-space-sm);
    margin-bottom: var(--pl-space-xl);
}

.pl-game-stat {
    text-align: center;
    padding: var(--pl-space-sm);
    background: var(--pl-gray-100);
    border-radius: var(--pl-radius-md);
}

.pl-game-stat-num {
    display: block;
    font-size: var(--pl-text-2xl);
    font-weight: var(--pl-weight-extrabold);
    color: var(--pl-text);
    line-height: 1.1;
}

.pl-game-stat-label {
    display: block;
    font-size: var(--pl-text-xs);
    color: var(--pl-gray-500);
    margin-top: 0.2rem;
}

/* ---- Crawlable info (how-to, yesterday, about) ---- */
.pl-game-info {
    border-top: 1px solid var(--pl-border);
    padding-top: var(--pl-space-lg);
}

.pl-game-info section {
    margin-bottom: var(--pl-space-lg);
}

.pl-game-info h2 {
    font-size: var(--pl-text-lg);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-text);
    margin: 0 0 0.6rem;
}

.pl-game-howto-list {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--pl-text-secondary);
    font-size: var(--pl-text-sm);
    line-height: 1.6;
}

.pl-game-howto-list li {
    margin-bottom: 0.4rem;
}

.pl-game-yesterday-text,
.pl-game-about p {
    color: var(--pl-text-secondary);
    font-size: var(--pl-text-sm);
    line-height: 1.6;
    margin: 0;
}

.pl-game-yesterday-text a,
.pl-game-about a {
    color: var(--pl-primary);
    font-weight: var(--pl-weight-semibold);
    text-decoration: none;
}

.pl-game-yesterday-text a:hover,
.pl-game-about a:hover {
    text-decoration: underline;
}

/* ---- Narrow phones: tighten the grid ---- */
@media (max-width: 480px) {
    .pl-game-grid-head,
    .pl-game-row {
        grid-template-columns: 1.4fr 0.6fr 0.9fr 0.8fr 0.8fr 0.9fr 0.9fr;
        gap: 3px;
    }

    .pl-game-cell {
        padding: 7px 2px;
        font-size: 0.66rem;
    }

    .pl-game-title {
        font-size: var(--pl-text-2xl);
    }
}


/* ==========================================================================
   TABLE CONSISTENCY LAYER (Phase 3)
   Normalizes ~12 rival table class systems to match the canonical .pl-table
   look: bordered/rounded wrapper, gray-50 thead, xs uppercase muted semibold
   th, 12px/16px cell padding, gray-100 row borders, last-row no-border,
   gray-50 hover. All values use CSS vars -- no hardcoded hex.
   Intentional layout choices (sticky columns, centered numerics, row
   highlights, color-coded accents) are preserved.
   Additive only -- does not touch markup or existing selectors.
   Specificity note: th/td/hover rules are prefixed with .powerlifting-app so
   they win the cascade over same-specificity inline <style> blocks that load
   after this stylesheet. Wrapper rules need no boost (they only add new
   properties not set inline).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. STATE-OF-POWERLIFTING  (.pl-sop-table-wrap / .pl-sop-table)
   Was: hardcoded hex, padding 9-10px/14px, 2px thead border, no vars.
   Normalized: wrapper card, vars throughout, 12px/16px padding, 1px borders.
   Intentional preserved: .pl-sop-num right-align, .pl-sop-partial-row amber
   highlight, link color.
   -------------------------------------------------------------------------- */
.pl-sop-table-wrap {
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    background: var(--pl-surface);
    overflow-x: auto;
}

.powerlifting-app .pl-sop-table thead {
    background: var(--pl-gray-50);
    border-bottom: 1px solid var(--pl-border);
}

.powerlifting-app .pl-sop-table th {
    padding: 12px 16px;
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
    white-space: nowrap;
    background: transparent;
    border-bottom: none;
}

.powerlifting-app .pl-sop-table td {
    padding: 12px 16px;
    color: var(--pl-text-secondary);
    border-bottom: 1px solid var(--pl-gray-100);
}

.powerlifting-app .pl-sop-table tbody tr:last-child td {
    border-bottom: none;
}

.powerlifting-app .pl-sop-table tbody tr:hover td {
    background: var(--pl-gray-50);
}


/* --------------------------------------------------------------------------
   2. PERCENTAGE / 1RM / TRAINING-MAX  (.pl-pct-table-wrap / .pl-pct-table)
   Was: no wrapper card, padding 8px/12px, no thead background.
   Normalized: wrapper card, 12px/16px padding, thead background, vars.
   -------------------------------------------------------------------------- */
.pl-pct-table-wrap {
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    background: var(--pl-surface);
    overflow-x: auto;
}

.powerlifting-app .pl-pct-table thead {
    background: var(--pl-gray-50);
    border-bottom: 1px solid var(--pl-border);
}

.powerlifting-app .pl-pct-table th {
    padding: 12px 16px;
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
    white-space: nowrap;
    border-bottom: none;
    background: transparent;
}

.powerlifting-app .pl-pct-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pl-gray-100);
    color: var(--pl-text-secondary);
}

.powerlifting-app .pl-pct-table tbody tr:last-child td {
    border-bottom: none;
}

.powerlifting-app .pl-pct-table tbody tr:hover td {
    background: var(--pl-gray-50);
}


/* --------------------------------------------------------------------------
   3. COUNTRY-DETAIL ATHLETE  (.pl-cd-athlete-table)
   Was: no wrapper border (lives inside a card already), padding 10-12px/12px,
   uses pl-bg-hover var. Missing thead background.
   Normalized: thead background, canonical th typography, 12px/16px padding.
   Intentional preserved: right-align on non-first-child cols, last-row no-border.
   -------------------------------------------------------------------------- */
.powerlifting-app .pl-cd-athlete-table thead {
    background: var(--pl-gray-50);
    border-bottom: 1px solid var(--pl-border);
}

.powerlifting-app .pl-cd-athlete-table thead th {
    padding: 12px 16px;
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
    border-bottom: none;
    background: transparent;
}

.powerlifting-app .pl-cd-athlete-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pl-gray-100);
    color: var(--pl-text-secondary);
}

.powerlifting-app .pl-cd-athlete-table tbody tr:last-child td {
    border-bottom: none;
}

.powerlifting-app .pl-cd-athlete-table tbody tr:hover td {
    background: var(--pl-gray-50);
}


/* --------------------------------------------------------------------------
   4. AGE-CURVES DATA TABLE  (.pl-ac-data-table)
   Was: hardcoded hex, padding 9-10px/12px, no thead bg rule.
   Normalized: vars, 12px/16px padding, canonical header.
   Intentional preserved: .peak-row blue highlight (set per-row inline).
   -------------------------------------------------------------------------- */
.powerlifting-app .pl-ac-data-table thead {
    background: var(--pl-gray-50);
    border-bottom: 1px solid var(--pl-border);
}

.powerlifting-app .pl-ac-data-table th {
    padding: 12px 16px;
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
    white-space: nowrap;
    border-bottom: none;
    background: transparent;
}

.powerlifting-app .pl-ac-data-table td {
    padding: 12px 16px;
    color: var(--pl-text-secondary);
    border-bottom: 1px solid var(--pl-gray-100);
}

.powerlifting-app .pl-ac-data-table tbody tr:last-child td {
    border-bottom: none;
}

.powerlifting-app .pl-ac-data-table tr:hover td {
    background: var(--pl-gray-50);
}


/* --------------------------------------------------------------------------
   5. MEET-DAY ATTEMPT + WARMUP TABLES
      (.pl-meet-day-table-wrap / .pl-meet-day-attempt-table / .pl-meet-day-warmup-table)
   Was: no wrapper card, padding 8-9px/12px, 2px thead border, uses vars.
   Normalized: wrapper card, 12px/16px padding, 1px thead border, canonical header.
   Intentional preserved: centered attempt number cells, lift label col styles,
   tbody row divider borders, weight input fields.
   -------------------------------------------------------------------------- */
.pl-meet-day-table-wrap {
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    background: var(--pl-surface);
    overflow-x: auto;
}

.powerlifting-app .pl-meet-day-attempt-table thead,
.powerlifting-app .pl-meet-day-warmup-table thead {
    background: var(--pl-gray-50);
    border-bottom: 1px solid var(--pl-border);
}

.powerlifting-app .pl-meet-day-attempt-table th,
.powerlifting-app .pl-meet-day-warmup-table th {
    padding: 12px 16px;
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
    white-space: nowrap;
    background: transparent;
    border-bottom: none;
}

.powerlifting-app .pl-meet-day-attempt-table td,
.powerlifting-app .pl-meet-day-warmup-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pl-gray-100);
    color: var(--pl-text-secondary);
}

.powerlifting-app .pl-meet-day-attempt-table tr:last-child td,
.powerlifting-app .pl-meet-day-warmup-table tr:last-child td {
    border-bottom: none;
}

.powerlifting-app .pl-meet-day-attempt-table tbody tr:hover td,
.powerlifting-app .pl-meet-day-warmup-table tbody tr:hover td {
    background: var(--pl-gray-50);
}


/* --------------------------------------------------------------------------
   6. SCORE-COMPARISON TABLE  (.pl-scp-table-wrap / .pl-scp-table)
   Was: wrapper has border+radius (good). Padding 9-11px/12px, th uses
   pl-text-secondary. Missing thead background fill.
   Normalized: thead background, 12px/16px padding, muted th color.
   Intentional preserved: .pl-scp-row--disagree amber highlight, score badges.
   -------------------------------------------------------------------------- */
.pl-scp-table-wrap {
    background: var(--pl-surface);
    border-radius: var(--pl-radius-xl);
}

.powerlifting-app .pl-scp-table thead {
    background: var(--pl-gray-50);
    border-bottom: 1px solid var(--pl-border);
}

.powerlifting-app .pl-scp-table thead th {
    padding: 12px 16px;
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
    border-bottom: none;
    background: transparent;
}

.powerlifting-app .pl-scp-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pl-gray-100);
    color: var(--pl-text-secondary);
}

.powerlifting-app .pl-scp-table tbody tr:last-child {
    border-bottom: none;
}

.powerlifting-app .pl-scp-table tbody tr:hover {
    background: var(--pl-gray-50);
}


/* --------------------------------------------------------------------------
   7. CAREER TRAJECTORY TABLE  (.cte-table-wrap / .cte-table)
   Was: dark theme -- hardcoded hex for thead bg, hover bg, text, border.
   Normalized to light canonical look.
   Intentional preserved: .cte-td-score accent color, .cte-td-date muted.
   -------------------------------------------------------------------------- */
.cte-table-wrap {
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    background: var(--pl-surface);
    overflow-x: auto;
}

.powerlifting-app .cte-table thead {
    background: var(--pl-gray-50);
    border-bottom: 1px solid var(--pl-border);
}

.powerlifting-app .cte-table th {
    padding: 12px 16px;
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
    white-space: nowrap;
    background: transparent;
    border-bottom: none;
}

.powerlifting-app .cte-table td {
    padding: 12px 16px;
    color: var(--pl-text-secondary);
    border-bottom: 1px solid var(--pl-gray-100);
}

.powerlifting-app .cte-table tr:last-child td {
    border-bottom: none;
}

.powerlifting-app .cte-table tr:hover td {
    background: var(--pl-gray-50);
}

/* Restore intentional accent colors over the dark-theme overrides */
.powerlifting-app .cte-table .cte-td-score {
    color: var(--pl-accent);
}

.powerlifting-app .cte-table .cte-td-date {
    color: var(--pl-text-muted);
}


/* --------------------------------------------------------------------------
   8. IS-GOOD TABLE  (.ig-table-card / .ig-table)
   Was: lives inside ig-table-card card, padding 6px/10px, no thead bg.
   Normalized: thead background, 12px/16px padding.
   Intentional preserved: .ig-td-pct mono font, mini-bar cells.
   -------------------------------------------------------------------------- */
.powerlifting-app .ig-table thead {
    background: var(--pl-gray-50);
    border-bottom: 1px solid var(--pl-border);
}

.powerlifting-app .ig-table th {
    padding: 12px 16px;
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
    border-bottom: none;
    background: transparent;
}

.powerlifting-app .ig-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pl-gray-100);
    color: var(--pl-text-secondary);
}

.powerlifting-app .ig-table tr:last-child td {
    border-bottom: none;
}

.powerlifting-app .ig-table tr:hover td {
    background: var(--pl-gray-50);
}


/* --------------------------------------------------------------------------
   9. FEDERATION COMPARE TABLE  (.pl-fc-table-wrapper / .pl-fc-table)
   Already in main CSS (L8042+). Wrapper lacked canonical card chrome.
   Normalizes header typography; sticky first-column and color accents kept.
   -------------------------------------------------------------------------- */
.pl-fc-table-wrapper {
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-xl);
    background: var(--pl-surface);
}

.powerlifting-app .pl-fc-table thead th {
    padding: 12px 16px;
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
    background: var(--pl-gray-50);
    border-bottom: 1px solid var(--pl-border);
}

.powerlifting-app .pl-fc-table .pl-fc-table__attr {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pl-gray-100);
}

.powerlifting-app .pl-fc-table .pl-fc-table__val {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pl-gray-100);
}


/* --------------------------------------------------------------------------
   10. FEDERATION VS TABLE  (.pl-table.pl-vs-table)
   Uses pl-table class -- canonical chrome fully inherited. No override needed.
   -------------------------------------------------------------------------- */
/* pl-vs-table: canonical chrome inherited via .pl-table */


/* --------------------------------------------------------------------------
   11. GHOST COMPETITOR TABLE  (.pl-table.pl-gc-table)
   Uses pl-table class -- canonical chrome fully inherited. No override needed.
   -------------------------------------------------------------------------- */
/* pl-gc-table: canonical chrome inherited via .pl-table */


/* --------------------------------------------------------------------------
   12. ATTEMPT OPTIMIZER JUMP TABLE
       (.pl-ao-jump-table-wrap / .pl-ao-jump-table)
   Was: wrapper has border+radius (good). Padding 11px/14px, th uses
   pl-text-secondary. Missing thead background.
   Normalized: thead background, 12px/16px padding, muted th color.
   Intentional preserved: border-right on lift col, success green accent,
   responsive column hide.
   -------------------------------------------------------------------------- */
.pl-ao-jump-table-wrap {
    background: var(--pl-surface);
    border-radius: var(--pl-radius-xl);
}

.powerlifting-app .pl-ao-jump-table thead {
    background: var(--pl-gray-50);
    border-bottom: 1px solid var(--pl-border);
}

.powerlifting-app .pl-ao-jump-table th {
    padding: 12px 16px;
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
    border-bottom: none;
    background: transparent;
}

.powerlifting-app .pl-ao-jump-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pl-gray-100);
    color: var(--pl-text-secondary);
}

.powerlifting-app .pl-ao-jump-table tr:last-child td {
    border-bottom: none;
}

.powerlifting-app .pl-ao-jump-table tbody tr:hover td {
    background: var(--pl-gray-50);
}

/* ============================================================
   FILTER + SEARCH CONSISTENCY LAYER (Phase 4)
   Brings the rival filter/search controls into line with the
   canonical .pl-input / .pl-explore-filter-label look. Chrome only
   (field border/radius/focus, label typography); no width, grid, or
   behavior changes. Scoped under .powerlifting-app so these win over
   the template inline style blocks. All values use --pl-* vars.
   ============================================================ */

/* Text inputs + selects across the rival filter systems get the
   canonical field look. This also converts the career-trajectory
   (cte-) controls from their dark palette to the light theme. */
.powerlifting-app .rv-filter-input,
.powerlifting-app .rv-filter-select,
.powerlifting-app .rv-athlete-search-input,
.powerlifting-app .cte-search-input,
.powerlifting-app .pl-input,
.powerlifting-app .pl-select,
.powerlifting-app .pl-countries-search-input {
    font-family: var(--pl-font-sans);
    font-size: var(--pl-text-base);
    color: var(--pl-text);
    background: var(--pl-surface);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-lg);
    transition: border-color var(--pl-transition), box-shadow var(--pl-transition);
}

.powerlifting-app .rv-filter-input:focus,
.powerlifting-app .rv-filter-select:focus,
.powerlifting-app .rv-athlete-search-input:focus,
.powerlifting-app .cte-search-input:focus,
.powerlifting-app .pl-input:focus,
.powerlifting-app .pl-select:focus,
.powerlifting-app .pl-countries-search-input:focus {
    border-color: var(--pl-primary);
    box-shadow: 0 0 0 3px var(--pl-primary-light);
    outline: none;
}

/* Dark career-trajectory search containers become light cards so the
   page matches the light theme used everywhere else. */
.powerlifting-app .cte-search-card,
.powerlifting-app .cte-search-wrap {
    background: var(--pl-surface);
    border-color: var(--pl-border);
    color: var(--pl-text);
}

/* Filter labels: the canonical uppercase, muted micro-label. */
.powerlifting-app .rv-filter-label,
.powerlifting-app .pl-mf-filter-group > label {
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-text-muted);
}

/* Toggle pills (is-good) get a consistent inactive chrome; the active
   state is left to the template so its accent is preserved. */
.powerlifting-app .ig-toggle-btn {
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-lg);
    transition: border-color var(--pl-transition), color var(--pl-transition);
}
.powerlifting-app .ig-toggle-btn:hover {
    border-color: var(--pl-primary);
}

/* ============================================================
   LIGHT-THEME POLISH (Phase 5)
   The career-trajectory template shipped a few dark-palette remnants
   (autocomplete dropdown, formula select, loading skeletons) that
   clashed with the light theme used everywhere else. Convert them.
   .powerlifting-app-scoped, --pl-* vars only.
   ============================================================ */
.powerlifting-app .cte-dropdown {
    background: var(--pl-surface);
    border-color: var(--pl-border);
    color: var(--pl-text);
}
.powerlifting-app .cte-dropdown-item:hover {
    background: var(--pl-gray-50);
}
.powerlifting-app .cte-formula-select {
    background: var(--pl-surface);
    color: var(--pl-text);
    border-color: var(--pl-border);
}
.powerlifting-app .cte-skeleton,
.powerlifting-app [class*="cte-skel-"] {
    background: var(--pl-gray-100);
}

/* ============================================================
   CALCULATOR RESULT SHARE ACTIONS
   Deep-link, text summary, and image-card controls.
   ============================================================ */
.powerlifting-app .pl-share-section--result {
    box-shadow: var(--pl-shadow-sm);
}

.powerlifting-app .pl-share-buttons--result {
    align-items: center;
}

.powerlifting-app .pl-share-section--result .pl-share-btn {
    min-height: 40px;
    border: 1px solid transparent;
    transition: background-color var(--pl-transition), border-color var(--pl-transition), color var(--pl-transition), transform var(--pl-transition-fast);
}

.powerlifting-app .pl-share-section--result .pl-share-btn:focus-visible {
    outline: none;
    box-shadow: var(--pl-focus-ring);
}

.powerlifting-app .pl-share-section--result .pl-share-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

.powerlifting-app .pl-share-section--result .pl-share-btn--download {
    background: var(--pl-primary);
    border-color: var(--pl-primary);
    color: #fff;
}

.powerlifting-app .pl-share-section--result .pl-share-btn--download:hover:not(:disabled) {
    background: var(--pl-primary-hover);
    border-color: var(--pl-primary-hover);
}

.powerlifting-app .pl-share-section--result .pl-share-btn--copy,
.powerlifting-app .pl-share-section--result .pl-share-btn--text {
    background: var(--pl-surface);
    border-color: var(--pl-border);
    color: var(--pl-text);
}

.powerlifting-app .pl-share-section--result .pl-share-btn--copy:hover,
.powerlifting-app .pl-share-section--result .pl-share-btn--text:hover {
    background: var(--pl-gray-50);
    border-color: var(--pl-border-strong);
}

/* Keyboard focus remains visible over theme resets while preserving component shadows. */
.powerlifting-app a:focus-visible,
.powerlifting-app button:focus-visible,
.powerlifting-app input:focus-visible,
.powerlifting-app select:focus-visible,
.powerlifting-app textarea:focus-visible,
.powerlifting-app [tabindex="0"]:focus-visible,
.powerlifting-app .pl-btn:focus-visible,
.powerlifting-app .pl-input:focus-visible,
.powerlifting-app .pl-select:focus-visible,
.powerlifting-app .pl-unit-btn:focus-visible,
.powerlifting-app .pl-sex-btn:focus-visible,
.powerlifting-app .pl-share-section--result .pl-share-btn:focus-visible,
.powerlifting-app .pl-table-wrapper:focus-visible,
.powerlifting-app .pl-table-wrap:focus-visible {
    outline: 2px solid var(--pl-primary);
    outline-offset: 2px;
}

@media (forced-colors: active) {
    .powerlifting-app a:focus-visible,
    .powerlifting-app button:focus-visible,
    .powerlifting-app input:focus-visible,
    .powerlifting-app select:focus-visible,
    .powerlifting-app textarea:focus-visible,
    .powerlifting-app [tabindex="0"]:focus-visible,
    .powerlifting-app .pl-btn:focus-visible,
    .powerlifting-app .pl-input:focus-visible,
    .powerlifting-app .pl-select:focus-visible,
    .powerlifting-app .pl-unit-btn:focus-visible,
    .powerlifting-app .pl-sex-btn:focus-visible,
    .powerlifting-app .pl-share-section--result .pl-share-btn:focus-visible,
    .powerlifting-app .pl-table-wrapper:focus-visible,
    .powerlifting-app .pl-table-wrap:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
}

.powerlifting-app input[type="range"]:focus-visible {
    outline: 2px solid var(--pl-primary) !important;
    outline-offset: 2px;
}

@media (forced-colors: active) {
    .powerlifting-app input[type="range"]:focus-visible {
        outline: 2px solid Highlight !important;
    }
}

/* Career score states use darker foregrounds on light result surfaces. */
.powerlifting-app .cte-phase-label {
    opacity: 1;
}

.powerlifting-app .cte-phase-hero--improving .cte-phase-name,
.powerlifting-app .cte-phase-hero--improving .cte-phase-label,
.powerlifting-app .cte-stat-value--up,
.powerlifting-app .cte-proj-delta--pos,
.powerlifting-app .cte-timeline-jump {
    color: var(--pl-success-text);
}

.powerlifting-app .cte-phase-hero--declining .cte-phase-name,
.powerlifting-app .cte-phase-hero--declining .cte-phase-label {
    color: var(--pl-primary-hover);
}

@media (max-width: 639px) {
    /* Prevent featured cards from creating an implicit second bento track. */
    .powerlifting-app .pl-bento {
        grid-template-columns: minmax(0, 1fr);
    }

    .powerlifting-app .pl-bento .pl-calc-card--featured,
    .powerlifting-app .pl-bento a.pl-calc-card--featured[style*="grid-column"] {
        grid-column: 1 / -1 !important;
        min-width: 0;
    }

    /* The Masters records table uses its stable hook for mobile cards only. */
    .powerlifting-app .pl-record-age-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .powerlifting-app .pl-record-age-table-wrap .pl-table--responsive,
    .powerlifting-app .pl-record-age-table-wrap .pl-table--responsive tbody,
    .powerlifting-app .pl-record-age-table-wrap .pl-table--responsive tbody tr {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .powerlifting-app .pl-record-age-table-wrap .pl-table--responsive {
        table-layout: fixed;
    }

    .powerlifting-app .pl-record-age-table-wrap .pl-table--responsive tbody {
        display: block;
    }

    .powerlifting-app .pl-record-age-table-wrap .pl-table--responsive th[scope="row"],
    .powerlifting-app .pl-record-age-table-wrap .pl-table--responsive td {
        display: grid;
        grid-template-columns: minmax(0, 42%) minmax(0, 58%);
        gap: var(--pl-space-sm);
        justify-content: normal;
        width: 100%;
        padding: 6px 0;
        border-bottom: none;
        box-sizing: border-box;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: right;
    }

    .powerlifting-app .pl-record-age-table-wrap .pl-table--responsive th[scope="row"]::before,
    .powerlifting-app .pl-record-age-table-wrap .pl-table--responsive td::before {
        content: attr(data-label);
        min-width: 0;
        font-size: var(--pl-text-xs);
        font-weight: var(--pl-weight-semibold);
        color: var(--pl-text-muted);
        text-align: left;
        text-transform: uppercase;
    }
}

/* ========================================================================== 
   ARTICLE POWERDATA SHORTCODES
   These rules intentionally live outside .powerlifting-app and are fully
   scoped so legacy shortcodes can render safely inside theme article content.
   ========================================================================== */
.pl-powerdata {
    margin: 1.75rem 0;
    padding: 1.25rem;
    color: #1f2937;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.pl-powerdata .pl-powerdata__title {
    margin: 0 0 1rem;
    color: #111827;
    font-size: 1.25rem;
    line-height: 1.3;
}

.pl-powerdata a {
    color: #b91c1c;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.pl-powerdata a:hover {
    color: #7f1d1d;
}

.pl-powerdata a:focus-visible,
.pl-powerdata .pl-powerdata__table-wrap:focus-visible {
    outline: 2px solid #b91c1c;
    outline-offset: 2px;
}

.pl-powerdata .pl-powerdata__table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}

.pl-powerdata .pl-powerdata__table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    color: #1f2937;
    background: #fff;
    font-size: 0.875rem;
    line-height: 1.45;
}

.pl-powerdata .pl-powerdata__table th,
.pl-powerdata .pl-powerdata__table td {
    padding: 0.5rem 0.55rem;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
}

/* The results table uses fixed layout so it always fits the article
   column with no horizontal scrollbar; long meet names and divisions
   truncate with an ellipsis (full text via title tooltip and the
   expanded detail rows). */
.pl-powerdata .pl-powerdata__results-table {
    table-layout: fixed;
}

/* Column sizing and ellipsis apply ONLY to the top-level rows; the
   nested detail tables must keep readable auto-sized labels. */
.pl-powerdata .pl-powerdata__results-table > thead > tr > th:nth-child(1) { width: 6%; }
.pl-powerdata .pl-powerdata__results-table > thead > tr > th:nth-child(2) { width: 9%; }
.pl-powerdata .pl-powerdata__results-table > thead > tr > th:nth-child(3) { width: 10%; }
.pl-powerdata .pl-powerdata__results-table > thead > tr > th:nth-child(4) { width: 16%; }
.pl-powerdata .pl-powerdata__results-table > thead > tr > th:nth-child(5) { width: 28%; }
.pl-powerdata .pl-powerdata__results-table > thead > tr > th:nth-child(6) { width: 13%; }
.pl-powerdata .pl-powerdata__results-table > thead > tr > th:nth-child(7) { width: 9%; }
.pl-powerdata .pl-powerdata__results-table > thead > tr > th:nth-child(8) { width: 9%; }

.pl-powerdata .pl-powerdata__results-table > thead > tr > th,
.pl-powerdata .pl-powerdata__competition-row > td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Expanded detail: auto layout, roomy fixed label column, values wrap. */
.pl-powerdata .pl-powerdata__detail-table {
    table-layout: auto;
}

.pl-powerdata .pl-powerdata__detail-table th {
    width: 7.5rem;
    min-width: 7.5rem;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.pl-powerdata .pl-powerdata__detail-table td {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

/* Detail rows that only exist to replace hidden columns on phones. */
.pl-powerdata .pl-powerdata__mobile-only {
    display: none;
}

@media (max-width: 640px) {
    .pl-powerdata .pl-powerdata__results-table th:nth-child(5),
    .pl-powerdata .pl-powerdata__results-table th:nth-child(6),
    .pl-powerdata .pl-powerdata__results-table .pl-powerdata__competition-row td:nth-child(5),
    .pl-powerdata .pl-powerdata__results-table .pl-powerdata__competition-row td:nth-child(6) {
        display: none;
    }

    .pl-powerdata .pl-powerdata__results-table th:nth-child(2) { width: 12%; }
    .pl-powerdata .pl-powerdata__results-table th:nth-child(3) { width: 18%; }
    .pl-powerdata .pl-powerdata__results-table th:nth-child(4) { width: 30%; }
    .pl-powerdata .pl-powerdata__results-table th:nth-child(7) { width: 17%; }
    .pl-powerdata .pl-powerdata__results-table th:nth-child(8) { width: 17%; }

    .pl-powerdata .pl-powerdata__mobile-only {
        display: table-row;
    }
}

.pl-powerdata .pl-powerdata__table th {
    color: #374151;
    background: #f9fafb;
    font-weight: 700;
}

.pl-powerdata .pl-powerdata__table tbody tr:nth-child(even) {
    background: #f9fafb;
}

.pl-powerdata .pl-powerdata__table tbody tr:last-child td {
    border-bottom: 0;
}

.pl-powerdata .pl-powerdata__footer {
    margin: 1rem 0 0;
    font-weight: 600;
}

.pl-powerdata.pl-powerdata--ranking .pl-powerdata__table {
    min-width: 560px;
}

.pl-powerdata--athlete .pl-powerdata__section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0 0.65rem;
}

.pl-powerdata--athlete .pl-powerdata__section-heading--results {
    margin-top: 1.75rem;
}

.pl-powerdata--athlete .pl-powerdata__section-heading h4 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    line-height: 1.35;
}

.pl-powerdata--athlete .pl-powerdata__unit-control {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pl-powerdata--athlete .pl-powerdata__unit-select {
    width: auto;
    min-width: 64px;
    height: 34px;
    margin: 0;
    padding: 0 1.8rem 0 0.65rem;
    color: #111827;
    background-color: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font: inherit;
    line-height: 1;
    text-transform: none;
    cursor: pointer;
}

.pl-powerdata--athlete .pl-powerdata__unit-select:focus-visible,
.pl-powerdata--athlete .pl-powerdata__expander:focus-visible,
.pl-powerdata--athlete .pl-powerdata__show-all:focus-visible,
.pl-powerdata--athlete .pl-powerdata__chart-button:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

.pl-powerdata--athlete .pl-powerdata__bests-table {
    min-width: 0;
}

.pl-powerdata--athlete .pl-powerdata__results-table {
    /* min-width removed: fixed layout + ellipsis keeps it inside the article column */
}

.pl-powerdata--athlete .pl-powerdata__table > thead th {
    color: #7f1d1d;
    background: #fef2f2;
    border-bottom-color: #fecaca;
}

.pl-powerdata--athlete .pl-powerdata__bests-table tbody th {
    color: #111827;
    background: transparent;
}

.pl-powerdata--athlete .pl-powerdata__competition-row:nth-child(4n + 1) {
    background: #f9fafb;
}

.pl-powerdata--athlete .pl-powerdata__competition-row:hover {
    background: #fff7f7;
}

.pl-powerdata--athlete .pl-powerdata__results-table > tbody > .pl-powerdata__detail-row > td {
    padding: 0;
    background: #fff;
    border-bottom: 2px solid #fecaca;
}

.pl-powerdata--athlete .pl-powerdata__expander {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 0;
    padding: 0;
    color: #fff;
    background: #dc2626;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
    appearance: none;
}

.pl-powerdata--athlete .pl-powerdata__expander::before,
.pl-powerdata--athlete .pl-powerdata__expander::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: translate(-50%, -50%);
}

.pl-powerdata--athlete .pl-powerdata__expander::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform 150ms ease;
}

.pl-powerdata--athlete .pl-powerdata__expander[aria-expanded="true"]::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.pl-powerdata--athlete .pl-powerdata__detail-table {
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    /* auto layout: fixed equal columns crushed the label column to "L..." */
    table-layout: auto;
    color: #374151;
    background: #fffafa;
    font-size: 0.82rem;
}

.pl-powerdata--athlete .pl-powerdata__detail-table th,
.pl-powerdata--athlete .pl-powerdata__detail-table td {
    padding: 0.55rem 0.75rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #f3f4f6;
    white-space: normal;
}

.pl-powerdata--athlete .pl-powerdata__detail-table th {
    width: 18%;
    color: #7f1d1d;
}

.pl-powerdata--athlete .pl-powerdata__detail-table .pl-powerdata__attempt {
    position: relative;
    width: 20.5%;
    padding-top: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.pl-powerdata--athlete .pl-powerdata__detail-table .pl-powerdata__attempt::before {
    content: attr(data-attempt);
    position: absolute;
    top: 0.24rem;
    left: 0.75rem;
    color: #9ca3af;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.pl-powerdata--athlete .pl-powerdata__attempt--best {
    color: #111827;
    background: #fef2f2 !important;
    font-weight: 700;
}

.pl-powerdata--athlete .pl-powerdata__miss {
    color: #dc2626;
    font-weight: 700;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.pl-powerdata--athlete .pl-powerdata__detail-row[hidden],
.pl-powerdata--athlete .pl-powerdata__chart[hidden] {
    display: none !important;
}

.pl-powerdata--athlete .pl-powerdata__extra-row {
    display: none;
}

.pl-powerdata--athlete.pl-powerdata--show-all .pl-powerdata__extra-row:not([hidden]) {
    display: table-row;
}

.pl-powerdata--athlete .pl-powerdata__show-all,
.pl-powerdata--athlete .pl-powerdata__chart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0.9rem 0 0;
    padding: 0.55rem 1rem;
    color: #fff;
    background: #dc2626;
    border: 1px solid #dc2626;
    border-radius: 6px;
    box-shadow: none;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
}

.pl-powerdata--athlete .pl-powerdata__show-all:hover,
.pl-powerdata--athlete .pl-powerdata__chart-button:hover {
    color: #fff;
    background: #b91c1c;
    border-color: #b91c1c;
}

.pl-powerdata--athlete .pl-powerdata__source {
    margin: 0.85rem 0 0;
    color: #6b7280;
    font-size: 0.76rem;
    line-height: 1.45;
}

.pl-powerdata--athlete .pl-powerdata__chart-actions {
    margin-top: 0.3rem;
}

.pl-powerdata--athlete .pl-powerdata__chart {
    margin-top: 1rem;
    padding: 1rem;
    overflow-x: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

@media (max-width: 640px) {
    .pl-powerdata {
        padding: 1rem;
    }
}