/*
 * KCE Competition Tracker — Shared Design System
 * Phase 2 foundation. Public modules can opt into these tokens and components.
 */
.kce-ct-shell,
.kce-ct-route{
    --kce-ct-font-sans:Arial,Helvetica,sans-serif;
    --kce-ct-color-bg:#05070a;
    --kce-ct-color-surface:#0b1119;
    --kce-ct-color-surface-2:#101722;
    --kce-ct-color-surface-3:#151e2b;
    --kce-ct-color-border:#263244;
    --kce-ct-color-border-strong:#394a62;
    --kce-ct-color-text:#eef4ff;
    --kce-ct-color-text-muted:#8392aa;
    --kce-ct-color-text-dim:#64748d;
    --kce-ct-color-accent:#df2331;
    --kce-ct-color-accent-soft:#ff4855;
    --kce-ct-color-success:#60dc9a;
    --kce-ct-color-danger:#ef7169;
    --kce-ct-color-warning:#f2c44e;
    --kce-ct-tier-platinum:#77c7f2;
    --kce-ct-tier-gold:#e5b70c;
    --kce-ct-tier-silver:#cbd3dc;
    --kce-ct-tier-bronze:#d47632;
    --kce-ct-tier-rookie:#9b82dc;
    --kce-ct-radius-xs:6px;
    --kce-ct-radius-sm:12px;
    --kce-ct-radius-md:16px;
    --kce-ct-radius-lg:18px;
    --kce-ct-radius-xl:20px;
    --kce-ct-radius-pill:999px;
    --kce-ct-shadow-sm:0 8px 22px rgba(0,0,0,.24);
    --kce-ct-shadow-md:0 12px 32px rgba(0,0,0,.30);
    --kce-ct-shadow-lg:0 18px 48px rgba(0,0,0,.38);
    --kce-ct-shadow-hover:0 20px 44px rgba(0,0,0,.46);
    --kce-ct-transition-fast:160ms ease;
    --kce-ct-transition-base:220ms ease;
    --kce-ct-space-1:4px;
    --kce-ct-space-2:8px;
    --kce-ct-space-3:12px;
    --kce-ct-space-4:16px;
    --kce-ct-space-5:20px;
    --kce-ct-space-6:24px;
    --kce-ct-space-8:32px;
    --kce-ct-space-10:40px;
    font-family:var(--kce-ct-font-sans);
}

/* Shared surfaces */
.kce-ct-ui-surface,
.kce-ct-ui-panel,
.kce-ct-ui-card{
    border:1px solid var(--kce-ct-color-border);
    background:linear-gradient(145deg,var(--kce-ct-color-surface-2),var(--kce-ct-color-surface));
    color:var(--kce-ct-color-text);
}
.kce-ct-ui-surface{border-radius:var(--kce-ct-radius-lg);box-shadow:var(--kce-ct-shadow-lg)}
.kce-ct-ui-panel{border-radius:var(--kce-ct-radius-lg);box-shadow:var(--kce-ct-shadow-md)}
.kce-ct-ui-card{border-radius:var(--kce-ct-radius-lg);box-shadow:var(--kce-ct-shadow-sm);transition:transform var(--kce-ct-transition-base),border-color var(--kce-ct-transition-base),box-shadow var(--kce-ct-transition-base)}
.kce-ct-ui-card:hover{transform:translateY(-4px);border-color:var(--kce-ct-color-border-strong);box-shadow:var(--kce-ct-shadow-hover)}
.kce-ct-ui-hero{border-radius:var(--kce-ct-radius-xl);overflow:hidden;box-shadow:var(--kce-ct-shadow-lg)}

/* Shared controls */
.kce-ct-shell :where(button,.button,input[type="button"],input[type="submit"],select,input[type="search"],input[type="text"],input[type="number"]){
    font:inherit;
    transition:border-color var(--kce-ct-transition-fast),box-shadow var(--kce-ct-transition-fast),transform var(--kce-ct-transition-fast),background var(--kce-ct-transition-fast);
}
.kce-ct-ui-button,
.kce-ct-shell button.kce-ct-ui-button,
.kce-ct-shell input.kce-ct-ui-button{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 16px;border:1px solid var(--kce-ct-color-border-strong);border-radius:var(--kce-ct-radius-sm);background:linear-gradient(180deg,var(--kce-ct-color-surface-3),var(--kce-ct-color-surface));color:var(--kce-ct-color-text);font-weight:800;cursor:pointer;box-shadow:var(--kce-ct-shadow-sm)
}
.kce-ct-ui-button:hover{transform:translateY(-2px);border-color:var(--kce-ct-color-accent-soft);box-shadow:var(--kce-ct-shadow-md)}
.kce-ct-ui-button.is-primary{border-color:var(--kce-ct-color-accent);background:linear-gradient(180deg,var(--kce-ct-color-accent-soft),#a20f1a);color:#fff}
.kce-ct-ui-input,
.kce-ct-ui-select{
    min-height:42px;padding:10px 13px;border:1px solid var(--kce-ct-color-border);border-radius:var(--kce-ct-radius-sm);background:var(--kce-ct-color-surface);color:var(--kce-ct-color-text);outline:none
}
.kce-ct-ui-input:focus,
.kce-ct-ui-select:focus{border-color:#6ba9f0;box-shadow:0 0 0 3px rgba(107,169,240,.18)}

/* Shared badges and status chips */
.kce-ct-ui-badge,
.kce-ct-ui-chip{
    display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;border:1px solid var(--kce-ct-color-border);border-radius:var(--kce-ct-radius-pill);background:rgba(18,23,34,.92);color:var(--kce-ct-color-text-muted);font-size:12px;font-weight:800;line-height:1;padding:7px 11px
}
.kce-ct-ui-badge.is-platinum{border-color:rgba(119,199,242,.58);color:var(--kce-ct-tier-platinum)}
.kce-ct-ui-badge.is-gold{border-color:rgba(229,183,12,.58);color:var(--kce-ct-tier-gold)}
.kce-ct-ui-badge.is-silver{border-color:rgba(203,211,220,.58);color:var(--kce-ct-tier-silver)}
.kce-ct-ui-badge.is-bronze{border-color:rgba(212,118,50,.58);color:var(--kce-ct-tier-bronze)}
.kce-ct-ui-badge.is-rookie{border-color:rgba(155,130,220,.58);color:var(--kce-ct-tier-rookie)}

/* Shared table wrapper */
.kce-ct-ui-table-wrap{border:1px solid var(--kce-ct-color-border);border-radius:var(--kce-ct-radius-lg);overflow:hidden;background:var(--kce-ct-color-surface);box-shadow:var(--kce-ct-shadow-md)}
.kce-ct-ui-table{width:100%;border-collapse:collapse;color:var(--kce-ct-color-text)}
.kce-ct-ui-table th{padding:12px 14px;background:var(--kce-ct-color-surface-3);color:var(--kce-ct-color-text-muted);font-size:11px;letter-spacing:.1em;text-align:left;text-transform:uppercase}
.kce-ct-ui-table td{padding:13px 14px;border-top:1px solid var(--kce-ct-color-border)}
.kce-ct-ui-table tbody tr{transition:background var(--kce-ct-transition-fast)}
.kce-ct-ui-table tbody tr:hover{background:rgba(255,255,255,.025)}

/* Shared headings and empty states */
.kce-ct-ui-eyebrow{margin:0;color:var(--kce-ct-color-accent-soft);font-size:10px;font-weight:900;letter-spacing:.22em;text-transform:uppercase}
.kce-ct-ui-heading{margin:5px 0 0;color:var(--kce-ct-color-text);font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.kce-ct-ui-muted{color:var(--kce-ct-color-text-muted)}
.kce-ct-ui-empty{padding:28px;border:1px dashed var(--kce-ct-color-border-strong);border-radius:var(--kce-ct-radius-lg);background:rgba(11,17,25,.72);color:var(--kce-ct-color-text-muted);text-align:center}

/* Focus and reduced motion */
.kce-ct-shell :where(a,button,input,select,textarea):focus-visible{outline:2px solid #6ba9f0;outline-offset:2px}
@media(max-width:600px){
    .kce-ct-shell,.kce-ct-route{--kce-ct-radius-lg:16px;--kce-ct-radius-xl:16px;--kce-ct-space-8:24px;--kce-ct-space-10:30px}
}
@media(prefers-reduced-motion:reduce){
    .kce-ct-shell *,.kce-ct-shell *:before,.kce-ct-shell *:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ======================================================================
   Phase 3 — Shared Design System Adoption
   Applies the Phase 2 tokens to every current public Competition Tracker
   module without changing module markup or application behavior.
   ====================================================================== */

/* Universal page surfaces */
.kce-ct-shell.kce-ct-rankings,
.kce-ct-shell.kce-ct-public-page,
.kce-ct-shell.kce-ct-standings-page,
.kce-ct-shell.kce-ct-champions-page{
    border-radius:var(--kce-ct-radius-xl);
    background:
        radial-gradient(circle at 50% -10%,rgba(72,104,156,.16),transparent 34%),
        linear-gradient(145deg,#070b11,#040609 74%);
    box-shadow:var(--kce-ct-shadow-lg);
    overflow:hidden;
}

/* Shared heroes */
.kce-ct-shell .kce-ct-hero,
.kce-ct-shell .kce-ct-champions-hero{
    border-radius:var(--kce-ct-radius-xl);
    border-color:var(--kce-ct-color-border);
    box-shadow:var(--kce-ct-shadow-lg);
    overflow:hidden;
}
.kce-ct-shell .kce-ct-hero h1,
.kce-ct-shell .kce-ct-champions-title h1{
    color:var(--kce-ct-color-text);
}
.kce-ct-shell .kce-ct-subtitle,
.kce-ct-shell .kce-ct-champions-eyebrow{
    color:var(--kce-ct-color-text-muted);
}

/* Panels, formula blocks, dashboards and empty states */
.kce-ct-shell :where(.kce-ct-formula,.kce-ct-panel,.kce-ct-page-panel,.kce-ct-disabled,.kce-ct-standing-filters,.kce-ct-standings-toolbar,.kce-ct-race-filter,.kce-ct-race-nav,.kce-ct-biggest-movers,.kce-ct-locked-note,.kce-ct-champions-note,.kce-ct-champions-toolbar,.kce-ct-champions-history){
    border-radius:var(--kce-ct-radius-lg);
    border-color:var(--kce-ct-color-border);
    box-shadow:var(--kce-ct-shadow-md);
}
.kce-ct-shell :where(.kce-ct-empty,.kce-ct-empty-tier){
    border-radius:var(--kce-ct-radius-lg);
}

/* Formula chips, legends and tier/status pills */
.kce-ct-shell :where(.kce-ct-chip-row span,.kce-ct-cutoffs span,.kce-ct-tier-pill,.kce-ct-series-legend span,.kce-ct-movement-legend span,.kce-ct-champion-tags span,.kce-ct-race-count,.kce-ct-title-count,.kce-ct-version-badge){
    border-radius:var(--kce-ct-radius-pill);
}

/* Ranking cards */
.kce-ct-shell .kce-ct-driver-card{
    border-radius:var(--kce-ct-radius-lg);
    box-shadow:var(--kce-ct-shadow-sm);
    transition:transform var(--kce-ct-transition-base),border-color var(--kce-ct-transition-base),box-shadow var(--kce-ct-transition-base),background var(--kce-ct-transition-base);
}
.kce-ct-shell .kce-ct-driver-card:hover,
.kce-ct-shell .kce-ct-driver-card:focus-within{
    transform:translateY(-4px);
    box-shadow:var(--kce-ct-shadow-hover);
}
.kce-ct-shell .kce-ct-score,
.kce-ct-shell .kce-ct-apc,
.kce-ct-shell .kce-ct-detail-hint{
    border-radius:var(--kce-ct-radius-pill);
}
.kce-ct-shell .kce-ct-trend-popup{
    border-radius:var(--kce-ct-radius-lg);
    box-shadow:var(--kce-ct-shadow-lg);
    overflow:hidden;
}
.kce-ct-shell .kce-ct-tier > header h2{
    border-radius:var(--kce-ct-radius-sm);
}

/* Season standings */
.kce-ct-shell :where(.kce-ct-standings-dashboard,.kce-ct-standings-primary,.kce-ct-standings-tiers){
    border-radius:var(--kce-ct-radius-lg);
}
.kce-ct-shell :where(.kce-ct-overall-standing,.kce-ct-tier-standing,.kce-ct-standing-row,.kce-ct-mover-group){
    border-radius:var(--kce-ct-radius-md);
    box-shadow:var(--kce-ct-shadow-sm);
    transition:transform var(--kce-ct-transition-base),border-color var(--kce-ct-transition-base),box-shadow var(--kce-ct-transition-base);
}
.kce-ct-shell :where(.kce-ct-overall-standing,.kce-ct-tier-standing,.kce-ct-standing-row,.kce-ct-mover-group):hover{
    transform:translateY(-3px);
    box-shadow:var(--kce-ct-shadow-md);
}
.kce-ct-shell .kce-ct-standings-table{
    border-radius:var(--kce-ct-radius-lg);
    overflow:hidden;
    box-shadow:var(--kce-ct-shadow-md);
}
.kce-ct-shell .kce-ct-race-progress,
.kce-ct-shell .kce-ct-race-progress-bar{
    border-radius:var(--kce-ct-radius-pill);
}

/* Champions */
.kce-ct-shell .kce-ct-champion-card{
    border-radius:var(--kce-ct-radius-xl);
    box-shadow:var(--kce-ct-shadow-lg);
    transition:transform var(--kce-ct-transition-base),box-shadow var(--kce-ct-transition-base),border-color var(--kce-ct-transition-base);
}
.kce-ct-shell .kce-ct-champion-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--kce-ct-shadow-hover);
}
.kce-ct-shell .kce-ct-champion-card-head,
.kce-ct-shell .kce-ct-champion-stats > *,
.kce-ct-shell .kce-ct-history-strip > *{
    border-radius:var(--kce-ct-radius-md);
}

/* Placeholder/future public modules inherit the same finished frame now. */
.kce-ct-public-page .kce-ct-page-panel{
    min-height:190px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:clamp(28px,5vw,58px);
    text-align:center;
    background:
        radial-gradient(circle at 50% 0,rgba(223,35,49,.09),transparent 48%),
        linear-gradient(145deg,var(--kce-ct-color-surface-2),var(--kce-ct-color-surface));
}
.kce-ct-public-page .kce-ct-page-panel h2{
    margin:0 0 10px;
    color:var(--kce-ct-color-text);
    font-size:clamp(24px,4vw,38px);
    text-transform:uppercase;
    letter-spacing:.04em;
}
.kce-ct-public-page .kce-ct-page-panel p{
    max-width:680px;
    margin:0;
    color:var(--kce-ct-color-text-muted);
    line-height:1.7;
}

/* Existing public controls adopt the shared control language. */
.kce-ct-shell :where(select,input[type="search"],input[type="text"],input[type="number"]){
    border-radius:var(--kce-ct-radius-sm);
    border-color:var(--kce-ct-color-border);
    background:var(--kce-ct-color-surface);
    color:var(--kce-ct-color-text);
}
.kce-ct-shell :where(button,.button,input[type="submit"]){
    border-radius:var(--kce-ct-radius-sm);
}

@media(max-width:760px){
    .kce-ct-shell.kce-ct-rankings,
    .kce-ct-shell.kce-ct-public-page,
    .kce-ct-shell.kce-ct-standings-page,
    .kce-ct-shell.kce-ct-champions-page{
        border-radius:var(--kce-ct-radius-lg);
    }
    .kce-ct-shell .kce-ct-driver-card,
    .kce-ct-shell .kce-ct-champion-card{
        border-radius:var(--kce-ct-radius-md);
    }
}


/* Alpha 6.39 — restore Tier Rankings detail popouts.
   Phase 3 rounded the outer application frame with overflow:hidden, which
   clipped the per-driver trend panels. Keep the rounded surface while
   allowing those panels to extend above neighboring cards again. */
.kce-ct-shell.kce-ct-rankings{overflow:visible}
.kce-ct-shell.kce-ct-rankings .kce-ct-tier,
.kce-ct-shell.kce-ct-rankings .kce-ct-driver-grid{position:relative;overflow:visible}
.kce-ct-shell.kce-ct-rankings .kce-ct-driver-card:hover,
.kce-ct-shell.kce-ct-rankings .kce-ct-driver-card:focus,
.kce-ct-shell.kce-ct-rankings .kce-ct-driver-card.is-trend-open{z-index:60}
.kce-ct-shell.kce-ct-rankings .kce-ct-trend-popup{z-index:200}

/* ======================================================================
   Alpha 7.13 — Unified Competition Tracker public layout
   Every shortcode now enters the same outer frame. Module-specific shells
   fill that frame instead of maintaining competing page widths.
   ====================================================================== */
.kce-ct-public-frame{
    /* Alpha 7.14: full-bleed public canvas with a restrained viewport gutter.
       This deliberately escapes narrow WordPress theme content columns. */
    width:calc(100vw - 32px);
    max-width:none;
    margin-left:50%;
    margin-right:0;
    padding:30px 0;
    transform:translateX(-50%);
    box-sizing:border-box;
    font-family:var(--kce-ct-font-sans,Arial,Helvetica,sans-serif);
}
.kce-ct-public-frame > .kce-ct-shell{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    box-sizing:border-box;
}
.kce-ct-public-frame > .kce-ct-rankings,
.kce-ct-public-frame > .kce-ct-public-page,
.kce-ct-public-frame > .kce-ct-standings-page,
.kce-ct-public-frame > .kce-ct-champions-page,
.kce-ct-public-frame > .kce-ct-career-page{
    max-width:none!important;
    width:100%!important;
}
.kce-ct-route > .kce-ct-public-frame{
    max-width:none;
    padding-top:0;
    padding-bottom:0;
}
/* Remove old module-level desktop caps now that the shared frame controls
   the canvas. Internal grids remain responsive and retain their own gaps. */
.kce-ct-public-frame .kce-ct-champion-series,
.kce-ct-public-frame .kce-ct-champions-history{
    max-width:none;
}
@media(max-width:600px){
    .kce-ct-public-frame{
        width:calc(100vw - 16px);
        padding:15px 0;
    }
}