/* ==========================================================================
   RAQT member web — design system
   --------------------------------------------------------------------------
   Ported from the MOBILE design language (mobile/tailwind.config.js and
   mobile/src/components/), NOT public-web/DESIGN.md and NOT the admin console.
   Mobile is the newer system: it adds the `sun` tennis-ball-yellow ramp and its
   signature gradient has three stops, not two.
   ========================================================================== */

:root {
    /* --- brand ramp (tennis-ball green) --- */
    --brand-50:  #f3faea;
    --brand-100: #e5f5d2;
    --brand-200: #cdeba6;
    --brand-300: #afdd75;
    --brand-400: #92d050; /* primary */
    --brand-500: #7ab83d; /* hover */
    --brand-600: #5fa836; /* gradient end */
    --brand-700: #4a8a28;
    --brand-800: #3c6e22;
    --brand-900: #325b1f;
    --brand-950: #1a3110;

    /* --- ink ramp --- */
    --ink-50:  #f8f9fa;
    --ink-100: #eef0f2;
    --ink-200: #d8dce0;
    --ink-300: #b6bcc4;
    --ink-400: #8d96a1; /* inactive nav, same as the app's tab bar */
    --ink-500: #6c757d;
    --ink-600: #525b65;
    --ink-700: #3f4751;
    --ink-800: #2c3e50;
    --ink-900: #1d2735;
    --ink-950: #0f161f;

    /* --- sun ramp (tennis-ball yellow) — mobile-only, absent from public-web --- */
    --sun-50:  #fbfde9;
    --sun-100: #f6fbc7;
    --sun-200: #eef691;
    --sun-300: #e3f24a; /* bright highlight */
    --sun-400: #d6e64f; /* primary sun, gradient end */
    --sun-500: #c2d23a;
    --sun-600: #a3b22b;
    --sun-700: #7d8a24;

    /* --- clay ramp — accents only, sparingly --- */
    --clay-400: #df7e51;
    --clay-500: #d35f34;
    --clay-600: #b94928;

    /* --- signature gradients: always diagonal, top-left -> bottom-right --- */
    --raqt-gradient-brand: linear-gradient(135deg, #5fa836 0%, #92d050 50%, #d6e64f 100%);
    --raqt-gradient-ink:   linear-gradient(135deg, #0f161f 0%, #1d2735 50%, #2c3e50 100%);
    --raqt-gradient-sun:   linear-gradient(135deg, #92d050 0%, #d6e64f 50%, #e3f24a 100%);

    /* --- glow shadows (never neutral on member-facing surfaces) --- */
    --glow-brand:    0 10px 40px rgba(146, 208, 80, 0.30);
    --glow-brand-sm: 0 4px 14px rgba(146, 208, 80, 0.25);
    --glow-sun:      0 10px 40px rgba(214, 230, 79, 0.35);
    --glow-sun-sm:   0 4px 14px rgba(214, 230, 79, 0.30);
    --glow-ink:      0 10px 40px rgba(15, 22, 31, 0.30);

    /* --- radius scale (mobile: xl 12, 2xl 16, 3xl 24) --- */
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-3xl: 24px;

    /* --- layout --- */
    --rail-w: 248px;
    --rail-w-compact: 84px;
    --context-w: 320px;
}

/* ==========================================================================
   Base
   ========================================================================== */

html, body {
    font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: var(--ink-50);
    color: var(--ink-900);
}

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

/* ==========================================================================
   Wordmark
   ========================================================================== */

.raqt-wordmark {
    display: block;
    height: auto;
    max-width: 100%;
    user-select: none;
}

/* ==========================================================================
   Gradient primitives
   ========================================================================== */

.raqt-gradient-bg,
.raqt-gradient-card {
    position: relative;
    overflow: hidden;
}

.raqt-gradient-bg.is-brand,  .raqt-gradient-card.is-brand  { background-image: var(--raqt-gradient-brand); }
.raqt-gradient-bg.is-ink,    .raqt-gradient-card.is-ink    { background-image: var(--raqt-gradient-ink); }
.raqt-gradient-bg.is-sun,    .raqt-gradient-card.is-sun    { background-image: var(--raqt-gradient-sun); }

.raqt-gradient-bg-content { position: relative; z-index: 1; }

.raqt-gradient-card {
    border-radius: var(--radius-3xl);
    color: #fff;
}

.raqt-gradient-card.is-brand { box-shadow: var(--glow-brand); }
.raqt-gradient-card.is-sun   { box-shadow: var(--glow-sun); color: var(--ink-900); }
.raqt-gradient-card.is-ink   { box-shadow: var(--glow-ink); }

.raqt-gradient-card-content { position: relative; z-index: 1; }

/* --- pill CTA --- */
.raqt-gradient-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 0;
    border-radius: 999px;
    padding: 1rem 1.75rem;
    font-family: inherit;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .01em;
    color: #fff;
    cursor: pointer;
    background-image: var(--raqt-gradient-brand);
    box-shadow: 0 8px 18px rgba(146, 208, 80, 0.45);
    transition: transform .12s ease, box-shadow .18s ease, opacity .18s ease;
}

.raqt-gradient-btn.is-sun { background-image: var(--raqt-gradient-sun); color: var(--ink-900); box-shadow: 0 8px 18px rgba(214, 230, 79, 0.45); }
.raqt-gradient-btn.is-ink { background-image: var(--raqt-gradient-ink); box-shadow: 0 8px 18px rgba(15, 22, 31, 0.35); }

.raqt-gradient-btn:hover:not(:disabled) { box-shadow: 0 12px 26px rgba(146, 208, 80, 0.5); }
.raqt-gradient-btn:active:not(:disabled) { transform: scale(.98); } /* the app's press scale */
.raqt-gradient-btn:disabled { opacity: .5; box-shadow: none; cursor: default; }
.raqt-gradient-btn:focus-visible { outline: 3px solid var(--brand-700); outline-offset: 2px; }

/* ==========================================================================
   HeroAura — drifting orbs (ports HeroAura.tsx)
   ========================================================================== */

.raqt-aura {
    position: absolute;
    inset: 0 0 auto 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.raqt-aura-orb {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(.42, 0, .58, 1); /* Easing.inOut(ease) */
}

.raqt-aura-orb-1 {
    width: 260px; height: 260px; left: -60px; top: -40px;
    background: #fff; opacity: .14;
    animation-name: raqt-orb-1; animation-duration: 9s; animation-delay: 0s;
}

.raqt-aura-orb-2 {
    width: 200px; height: 200px; left: 210px; top: 20px;
    background: var(--sun-300); opacity: .18;
    animation-name: raqt-orb-2; animation-duration: 11s; animation-delay: 1.2s;
}

.raqt-aura-orb-3 {
    width: 150px; height: 150px; left: 120px; top: 150px;
    background: #fff; opacity: .10;
    animation-name: raqt-orb-3; animation-duration: 8s; animation-delay: .6s;
}

@keyframes raqt-orb-1 { from { transform: none; } to { transform: translate(34px, 26px) scale(1.16); } }
@keyframes raqt-orb-2 { from { transform: none; } to { transform: translate(-28px, 34px) scale(1.16); } }
@keyframes raqt-orb-3 { from { transform: none; } to { transform: translate(26px, -22px) scale(1.16); } }

/* ==========================================================================
   BouncingBall loader
   ========================================================================== */

.raqt-ball-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}

.raqt-ball {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--sun-300), var(--brand-400) 70%);
    box-shadow: inset -2px -3px 6px rgba(0, 0, 0, .15);
    animation: raqt-bounce .62s cubic-bezier(.3, .1, .4, 1) infinite alternate;
}

.raqt-ball.is-light { background: radial-gradient(circle at 35% 30%, #fff, #eef0f2 70%); }

.raqt-ball-shadow {
    width: 22px; height: 4px;
    border-radius: 50%;
    background: rgba(15, 22, 31, .16);
    margin-top: -2px;
    animation: raqt-bounce-shadow .62s cubic-bezier(.3, .1, .4, 1) infinite alternate;
}

.raqt-ball-label { font-size: .8rem; font-weight: 600; color: var(--ink-500); }

.raqt-ball-wrap.is-small { flex-direction: row; gap: 0; }
.raqt-ball-wrap.is-small .raqt-ball { width: 18px; height: 18px; }
.raqt-ball-wrap.is-small .raqt-ball-shadow { display: none; }

@keyframes raqt-bounce { from { transform: translateY(-14px); } to { transform: translateY(0); } }
@keyframes raqt-bounce-shadow { from { transform: scale(.7); opacity: .5; } to { transform: scale(1); opacity: 1; } }

/* ==========================================================================
   App shell — rail / main / context
   ========================================================================== */

.raqt-shell {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--context-w);
    min-height: 100vh;
}

.raqt-main {
    min-width: 0;
    padding: 2rem 2.5rem 4rem;
}

.raqt-context {
    padding: 2rem 1.5rem;
    border-left: 1px solid var(--ink-100);
}

/* --- left rail --- */
.raqt-rail {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem 1rem;
    border-right: 1px solid var(--ink-100);
    background: #fff;
    position: sticky;
    top: 0;
    height: 100vh;
}

.raqt-rail-brand { padding: .25rem .5rem 0; }
.raqt-rail-brand .raqt-wordmark { height: 30px; width: auto; }

.raqt-rail-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 1;
}

.raqt-rail-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .7rem .9rem;
    border-radius: var(--radius-xl);
    color: var(--ink-400);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.raqt-rail-item:hover { color: var(--ink-800); background: var(--ink-50); }

/* Active item is the app's focused-tab gradient pill (tabs/_layout.tsx). */
.raqt-rail-item.active {
    color: #fff;
    background-image: var(--raqt-gradient-brand);
    box-shadow: var(--glow-brand-sm);
}

.raqt-rail-item.active:hover { color: #fff; }

/* Feed is the raised accent item the app gives it. */
.raqt-rail-item.is-accent .raqt-rail-icon {
    background: var(--brand-50);
    border-radius: 50%;
    padding: .2rem;
}

.raqt-rail-item.is-accent.active .raqt-rail-icon { background: rgba(255, 255, 255, .22); }

.raqt-rail-icon { display: inline-flex; align-items: center; }

.raqt-rail-foot { display: flex; flex-direction: column; gap: .5rem; }

.raqt-rail-user {
    display: flex;
    flex-direction: column;
    padding: .7rem .9rem;
    border-radius: var(--radius-xl);
    background: var(--ink-50);
    text-decoration: none;
}

.raqt-rail-user-name { font-weight: 800; font-size: .9rem; color: var(--ink-900); }
.raqt-rail-user-sub { font-size: .75rem; color: var(--ink-500); }

.raqt-rail-signout {
    width: 100%;
    border: 0;
    background: none;
    padding: .5rem .9rem;
    text-align: left;
    font-family: inherit;
    font-weight: 700;
    font-size: .8rem;
    color: var(--ink-500);
    cursor: pointer;
    border-radius: var(--radius-xl);
}

.raqt-rail-signout:hover { color: var(--clay-600); background: var(--ink-50); }

/* ==========================================================================
   Responsive: 3-col -> 2-col -> mobile with floating pill tab bar
   ========================================================================== */

@media (max-width: 1279px) {
    .raqt-shell { grid-template-columns: var(--rail-w-compact) minmax(0, 1fr); }
    .raqt-context { display: none; }
    .raqt-rail { align-items: center; padding: 1.5rem .5rem; }
    .raqt-rail-label { display: none; }
    .raqt-rail-item { justify-content: center; padding: .7rem; }
    .raqt-rail-brand .raqt-wordmark { height: 16px; }
    .raqt-rail-user-sub { display: none; }
    .raqt-main { padding: 1.75rem 1.5rem 4rem; }
}

@media (max-width: 767px) {
    .raqt-shell { grid-template-columns: minmax(0, 1fr); }
    .raqt-main { padding: 1rem 1rem 7rem; }

    /* Direct port of the app's floating pill tab bar, so members moving between
       phone and browser land somewhere familiar. */
    .raqt-rail {
        position: fixed;
        inset: auto .75rem calc(.75rem + env(safe-area-inset-bottom, 0px)) .75rem;
        height: auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        gap: 0;
        padding: .5rem;
        border: 0;
        border-radius: 999px;
        box-shadow: 0 8px 30px rgba(15, 22, 31, .18);
        z-index: 1200;
    }

    .raqt-rail-brand,
    .raqt-rail-foot { display: none; }

    .raqt-rail-items { flex-direction: row; gap: 0; width: 100%; justify-content: space-around; }
    .raqt-rail-item { padding: .6rem .9rem; border-radius: 999px; }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .raqt-aura-orb,
    .raqt-ball,
    .raqt-ball-shadow { animation: none; }

    .raqt-gradient-btn { transition: none; }
}

/* ==========================================================================
   Blazor error UI
   ========================================================================== */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 2000;
    padding: .9rem 1.25rem;
    background: var(--ink-900);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 -4px 20px rgba(15, 22, 31, .25);
}

#blazor-error-ui .reload { color: var(--brand-300); margin-left: .5rem; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* ==========================================================================
   Display components
   ========================================================================== */

.raqt-kicker {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-600);
    margin: 0 0 .35rem;
}

.raqt-page-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: .9rem;
    flex-wrap: wrap;
    /* A hairline that fades out — anchors the header without drawing a hard box. */
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, var(--brand-300), var(--ink-100) 45%, transparent) 1;
}

.raqt-page-headtext { flex: 1; min-width: 0; }

/* Gradient icon mark — the same brand sweep the heroes use, at page scale. */
.raqt-page-mark {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-2xl);
    background-image: var(--raqt-gradient-brand);
    color: #fff;
    box-shadow: var(--glow-brand-sm);
    margin-top: .15rem;
}

.raqt-page-mark .mud-icon-root { font-size: 1.6rem; width: 1.6rem; height: 1.6rem; }

.raqt-page-title {
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: -.03em;
    margin: 0;
    line-height: 1.1;
}

/* One line at desktop width. The subtitle frames the page; it should not become a
   paragraph that pushes the content it describes below the fold. */
.raqt-page-sub {
    color: var(--ink-500);
    margin: .3rem 0 0;
    max-width: 78ch;
    font-size: .88rem;
    line-height: 1.45;
}

.raqt-page-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .55rem;
    margin-top: .5rem;
}

.raqt-page-actions { display: flex; gap: .75rem; align-items: center; margin-left: auto; }

@media (max-width: 640px) {
    .raqt-page-title { font-size: 1.75rem; }
    .raqt-page-mark { width: 44px; height: 44px; }
    .raqt-page-mark .mud-icon-root { font-size: 1.35rem; width: 1.35rem; height: 1.35rem; }
    .raqt-page-actions { margin-left: 0; width: 100%; }
}

/* --- tier chip: one colour per band, climbing green -> sun -> ink --- */
.raqt-tier-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .6rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
}

.raqt-tier-chip.is-small { font-size: .68rem; padding: .16rem .5rem; }

.raqt-tier-chip.is-rising     { background: var(--brand-50);  color: var(--brand-800); }
.raqt-tier-chip.is-challenger { background: var(--brand-100); color: var(--brand-800); }
.raqt-tier-chip.is-tour       { background: var(--brand-200); color: var(--brand-900); }
.raqt-tier-chip.is-masters    { background: var(--sun-200);   color: var(--sun-700); }
.raqt-tier-chip.is-grandslam  { background: var(--sun-300);   color: var(--ink-900); }
.raqt-tier-chip.is-legendary  { background-image: var(--raqt-gradient-ink); color: #fff; }

/* Gold, so a crown seat is legible at chip size against the tier's own tint. Every
   tier band uses a different background, so the crown carries its own colour rather
   than inheriting one that disappears on the darker bands. */
.raqt-tier-crown {
    width: 1em;
    height: 1em;
    font-size: 1em;
    color: var(--sun-600);
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5));
}

.raqt-tier-chip.is-legendary .raqt-tier-crown {
    color: var(--sun-300);
    filter: none;
}

/* --- the gap line (north star) --- */
.raqt-gap-line {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--ink-700);
}

.raqt-gap-line.is-light { color: rgba(255, 255, 255, .92); }
.raqt-gap-tier { font-weight: 900; }
.raqt-gap-sep { opacity: .5; }
.raqt-gap-points { font-weight: 600; }

/* --- avatar --- */
.raqt-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: visible;
    background-image: var(--raqt-gradient-brand);
    color: #fff;
    font-weight: 800;
    flex: none;
}

.raqt-avatar-inner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;          /* clip the photo; the crown sits outside this box */
    display: flex;
    align-items: center;
    justify-content: center;
}

.raqt-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.raqt-avatar.is-sm   { width: 24px;  height: 24px;  font-size: .6rem; }
.raqt-avatar.is-md   { width: 40px;  height: 40px;  font-size: .8rem; }
.raqt-avatar.is-lg   { width: 64px;  height: 64px;  font-size: 1.1rem; }
.raqt-avatar.is-hero { width: 112px; height: 112px; font-size: 2rem; box-shadow: var(--glow-brand); }

/* Crown seats 2–8: a white disc with a gold crown — present and readable, but clearly
   subordinate to the King/Queen below. */
.raqt-avatar-crown {
    position: absolute;
    top: -.35em;
    right: -.35em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45em;
    height: 1.45em;
    border-radius: 50%;
    background: #fff;
    color: var(--sun-600);
    border: 1.5px solid var(--sun-200);
    box-shadow: 0 1px 4px rgba(15, 22, 31, .16);
}

/* Rank 1 — King / Queen of the Court. Filled gold, slightly larger. */
.raqt-avatar-crown.is-king {
    width: 1.6em;
    height: 1.6em;
    background: var(--sun-300);
    color: var(--ink-900);
    border-color: #fff;
    box-shadow: 0 2px 6px rgba(15, 22, 31, .22);
}

.raqt-avatar-crown .mud-icon-root { font-size: .95em; width: .95em; height: .95em; }

/* --- empty state --- */
.raqt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .4rem;
    padding: 3rem 1.5rem;
    background: #fff;
    border-radius: var(--radius-2xl);
    border: 1px dashed var(--ink-200);
}

/* Flat monochrome glyph on a tinted disc. Emoji were replaced because they render as
   another vendor's colour illustration, differ per OS, and fight a two-green brand. */
.raqt-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: .35rem;
    border-radius: 50%;
    background: var(--brand-50);
    color: var(--brand-600);
    font-size: 1.6rem;
}

.raqt-empty-icon .mud-icon-root { font-size: 1.65rem; width: 1.65rem; height: 1.65rem; }
.raqt-empty-title { font-weight: 800; color: var(--ink-800); margin: 0; }
.raqt-empty-body { color: var(--ink-500); margin: 0; max-width: 44ch; font-size: .9rem; }
.raqt-empty-action { margin-top: .75rem; }

/* ==========================================================================
   Page-specific
   ========================================================================== */

.raqt-center-pad { display: flex; justify-content: center; padding: 4rem 0; }

/* --- home hero --- */
.raqt-home-hero { position: relative; }
.raqt-home-hero-inner { position: relative; z-index: 1; padding: 2rem 2.25rem; }
.raqt-home-hero .raqt-kicker { color: rgba(255, 255, 255, .85); }
.raqt-home-rating { font-size: 3.5rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; margin: .25rem 0 0; }
.raqt-home-rating-label { font-size: .8rem; font-weight: 700; opacity: .85; margin: .35rem 0 0; }

/* --- auth --- */
.raqt-auth { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem 1rem; }
.raqt-auth-head { position: relative; z-index: 1; text-align: center; color: #fff; margin-bottom: 2rem; }
.raqt-auth-mark { height: 46px; width: auto; margin-inline: auto; }
.raqt-auth-title { font-size: 2.25rem; font-weight: 900; letter-spacing: -.02em; margin: 1rem 0 .5rem; }
.raqt-auth-sub { opacity: .9; margin: 0; max-width: 34ch; margin-inline: auto; }

.raqt-auth-sheet {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    background: #fff;
    border-radius: var(--radius-3xl);
    padding: 2rem;
    box-shadow: 0 20px 60px rgba(15, 22, 31, .18);
}

.raqt-auth-note { color: var(--ink-600); font-size: .88rem; margin: 0 0 1rem; }
.raqt-auth-cta { width: 100%; }
.raqt-auth-legal { font-size: .75rem; color: var(--ink-500); text-align: center; margin: 1.25rem 0 0; }
.raqt-auth-legal a { color: var(--brand-600); }

/* --- error page --- */
.raqt-error-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    text-align: center;
    padding: 2rem;
}

.raqt-error-page h1 { font-size: 1.75rem; font-weight: 900; margin: 1rem 0 0; }
.raqt-error-page p { color: var(--ink-600); margin: 0 0 1rem; }

/* ==========================================================================
   Extended tokens
   --------------------------------------------------------------------------
   Scoped .razor.css sheets can't declare these themselves — Blazor rewrites
   `:root` to `:root[b-xxxxx]`, which never matches. They live here so pages
   share one source of truth.
   ========================================================================== */

:root {
    /* clay ramp, filled out from mobile/tailwind.config.js */
    --clay-50:  #fdf5f0;
    --clay-100: #fae5d8;
    --clay-200: #f4c9af;
    --clay-300: #eba37c;
    --clay-700: #983821;
    --clay-wash: #fdf1ea;

    /* Event gender badges. Deliberately outside the brand ramp: these encode a
       category, not a brand moment, so they must not read as brand green. */
    --gender-misto-bg:  #ede9fe;
    --gender-misto-fg:  #6d28d9;
    --gender-masc-bg:   #e0f2fe;
    --gender-masc-fg:   #0369a1;
    --gender-fem-bg:    #fce7f3;
    --gender-fem-fg:    #be185d;

    /* Podium tints, shared by standings rank badges and prize placements. */
    --podium-gold:   #fbf0c4;
    --podium-silver: #eceef1;
    --podium-bronze: #f3e0cf;
}

/* Initials fallback sits beneath the photo, which is absolutely positioned over it.
   When no photo exists (or the <img> errors and hides itself) the initials show through. */
.raqt-avatar-initials {
    position: relative;
    z-index: 0;
    line-height: 1;
    letter-spacing: .02em;
    color: #fff;
    user-select: none;
}

/* Development-only sign-in bypass, visually separated from the real Clerk form
   so it can never be mistaken for the production path. */
.raqt-auth-dev {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--ink-200);
}

.raqt-auth-dev .raqt-auth-note {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin: 0 0 .6rem;
}

/* Clerk mounts its own form; keep it from fighting the sheet's own padding. */
#clerk-signin { display: flex; justify-content: center; }
#clerk-signin .cl-rootBox, #clerk-signin .cl-card { width: 100%; box-shadow: none; }

/* <FocusOnNavigate Selector="h1"> moves focus to the page heading on every navigation,
   which paints a focus ring around the title. Keyboard users still get one via
   :focus-visible; this only suppresses the ring for that programmatic focus. */
/* <FocusOnNavigate Selector="h1"> stamps tabindex="-1" on the heading and focuses it on
   every navigation, which paints a box around the page title. Browsers disagree about
   whether that counts as :focus-visible, so target the tabindex the framework adds —
   an element only reachable programmatically should never show a focus ring. Real
   keyboard focus lands on links and buttons, which keep theirs. */
h1[tabindex="-1"]:focus,
[tabindex="-1"]:focus { outline: none; }

/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   Rules kept deliberately tight so this stays cheap:
     · transform and opacity ONLY — both composite on the GPU, so nothing here
       triggers layout or paint.
     · entrances run ONCE and settle; the only looping animations in the app are
       HeroAura and the BouncingBall loader.
     · stagger caps at 8 children. Past that a list is being scrolled, not read,
       and a long cascade reads as lag rather than polish.
     · everything is disabled under prefers-reduced-motion.
   Blazor recreates elements on navigation and appends new ones on "carregar
   mais", so entrances replay per page and per newly loaded batch — never on the
   rows already on screen.
   ========================================================================== */

@keyframes raqt-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.raqt-enter {
    animation: raqt-enter .38s cubic-bezier(.2, .7, .3, 1) both;
}

/* Children cascade in. `both` holds the from-state during the delay, so nothing
   flashes at full opacity before its turn. */
.raqt-stagger > * {
    animation: raqt-enter .38s cubic-bezier(.2, .7, .3, 1) both;
}

.raqt-stagger > *:nth-child(1) { animation-delay: .02s; }
.raqt-stagger > *:nth-child(2) { animation-delay: .06s; }
.raqt-stagger > *:nth-child(3) { animation-delay: .10s; }
.raqt-stagger > *:nth-child(4) { animation-delay: .14s; }
.raqt-stagger > *:nth-child(5) { animation-delay: .18s; }
.raqt-stagger > *:nth-child(6) { animation-delay: .22s; }
.raqt-stagger > *:nth-child(7) { animation-delay: .26s; }
.raqt-stagger > *:nth-child(8) { animation-delay: .30s; }
.raqt-stagger > *:nth-child(n+9) { animation-delay: .32s; }

/* A number that just changed deserves one beat of attention — used on the home
   hero rating, which is the first thing a member looks for. */
@keyframes raqt-pop {
    0%   { opacity: 0; transform: scale(.94); }
    60%  { transform: scale(1.015); }
    100% { opacity: 1; transform: none; }
}

.raqt-pop { animation: raqt-pop .5s cubic-bezier(.2, .7, .3, 1) both; }

@media (prefers-reduced-motion: reduce) {
    .raqt-enter,
    .raqt-stagger > *,
    .raqt-pop {
        animation: none;
    }
}