/* ==========================================================================
   RAQT member web — design system
   --------------------------------------------------------------------------
   Ported from the MOBILE design language (mobile/tailwind.config.js and
   mobile/src/components/), NOT the marketing site 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) — from mobile, absent from the admin console --- */
    --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-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; }

    /* The context rail stacks under the main column instead of disappearing.
       It used to be display:none here, which quietly cost every member on a
       phone or tablet whole sections — recent matches, quick actions, the
       tier-gap nudge, próximas partidas, convites — that the app shows on the
       home screen. There is no third column to put them in below 1280px, so
       they run full width at the end of the page instead.

       All three shell children need explicit placement once the template drops
       to two columns: auto-placement would push the <aside> into row 2 of the
       RAIL's column, not the main one. The rail spans both rows so its sticky
       100vh column still covers the whole page — `1 / -1` cannot be used,
       because with no explicit rows declared line -1 resolves back to line 1. */
    .raqt-rail { grid-row: 1 / span 2; }
    .raqt-main { grid-column: 2; grid-row: 1; }

    /* Two rows means the shell's min-height:100vh now has somewhere to go: the
       default stretch would split the leftover height between them and push the
       divider halfway down the viewport on a short page. Pack them at the top —
       the rail's own 100vh still holds the shell open. */
    .raqt-shell { align-content: start; }

    .raqt-context {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        padding: 1.75rem 1.5rem 4rem;
        border-left: 0;
        border-top: 1px solid var(--ink-100);
    }

    /* Most pages fill no context section, and an empty <aside> would still paint
       that divider plus a screenful of padding at the foot of every one of them.
       Two separate rules, never a selector list: an unsupported :has() would
       invalidate the whole list and take the :empty fallback down with it. */
    .raqt-context:empty { display: none; }
    .raqt-context:not(:has(*)) { display: none; }

    /* Main's bottom padding is the end-of-page margin. With the rail stacked
       below it that turns into a gap in the middle of the page, so hand the
       breathing room to whichever element is actually last. */
    .raqt-shell:has(.raqt-context *) .raqt-main { padding-bottom: 1.5rem; }
}

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

    /* Back to one column, so the placement above has to be undone as well:
       `grid-column: 2` against a single-column template would conjure an
       implicit second column and leave the first one empty. The rail is
       position:fixed down here, so it is out of the grid either way.

       The 7rem foot is clearance for the floating pill tab bar — it belongs to
       whatever ends the page, which is the stacked rail when there is one. */
    .raqt-main { grid-column: 1; }
    .raqt-context { grid-column: 1; padding: 1.5rem 1rem 7rem; }
    .raqt-shell:has(.raqt-context *) .raqt-main { padding-bottom: 1rem; }

    /* 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: 46ch; 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);
}

/* Onboarding (/bem-vindo) — the two states the page grew to match mobile's
   select-city screen. RAQT opens one city at a time, so "your city is not here"
   is a routine outcome, not an edge case, and it needs somewhere to go. */

/* Escape hatch under the confirm button. A link, not a second button: it must read
   as the lesser action or it competes with "Confirmar cidade". */
.raqt-onb-escape {
    display: block;
    width: 100%;
    margin: 1rem 0 0;
    padding: .5rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: .88rem;
    color: var(--ink-600);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.raqt-onb-escape:hover:not(:disabled) { color: var(--brand-700); }
.raqt-onb-escape:disabled { opacity: .55; cursor: default; }

/* Dead end: no active city exists, so the sheet stops asking and explains instead. */
.raqt-onb-empty-title {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink-900);
}
.raqt-onb-empty-sub {
    margin: 0 0 1.5rem;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--ink-600);
}

/* ------------------------------------------------------------------ */
/* Split sign-in (raqt-authx-*)                                        */
/* ------------------------------------------------------------------ */
/* Deliberately a separate namespace from .raqt-auth-*, which Onboarding
   still uses — redesigning the shared classes would have silently
   restyled a page nobody was looking at. */

.raqt-authx {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background:
        radial-gradient(1200px 600px at 12% -10%, var(--brand-400) 0%, transparent 55%),
        radial-gradient(900px 500px at 100% 110%, var(--sun-300) 0%, transparent 50%),
        linear-gradient(140deg, var(--brand-600) 0%, var(--brand-500) 45%, var(--sun-500) 130%);
    background-size: 160% 160%, 160% 160%, 200% 200%;
    animation: authx-drift 24s ease-in-out infinite alternate;
}

@keyframes authx-drift {
    from { background-position: 0% 0%, 100% 100%, 0% 50%; }
    to   { background-position: 20% 12%, 80% 88%, 100% 50%; }
}

.raqt-authx-card {
    width: min(980px, 100%);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    border-radius: var(--radius-3xl);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 90px rgba(15, 22, 31, .28), 0 2px 8px rgba(15, 22, 31, .12);
    animation: authx-rise .6s cubic-bezier(.2, .8, .25, 1) both;
}

@keyframes authx-rise {
    from { opacity: 0; transform: translateY(18px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* ---- left: brand panel ---- */
/* The dark end of the brand ramp, not the middle of it. The wordmark is white lettering
   around a sun-yellow ball, so on a mid-green panel the ball sat almost on top of its own
   background and the lettering had little to push against — and because the page behind
   the card is *also* green, the card barely read as a card. Going deep fixes all three. */
.raqt-authx-brand {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    padding: clamp(2rem, 4vw, 3.25rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.15rem;
    background: linear-gradient(155deg, var(--brand-950) 0%, var(--brand-800) 52%, var(--brand-600) 100%);
}

/* Two soft discs drifting behind the copy — depth without a background image. Both are
   dimmer than they were on the old mid-green panel: the same alphas over a dark base read
   as hard pale blobs rather than as light. */
.raqt-authx-brand::before,
.raqt-authx-brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    filter: blur(6px);
}

.raqt-authx-brand::before {
    width: 340px; height: 340px;
    right: -120px; top: -100px;
    background: radial-gradient(circle at 35% 35%, rgba(214,230,79,.20), rgba(214,230,79,0) 66%);
    animation: authx-float 14s ease-in-out infinite alternate;
}

.raqt-authx-brand::after {
    width: 260px; height: 260px;
    left: -90px; bottom: -80px;
    background: radial-gradient(circle at 60% 40%, rgba(146,208,80,.26), rgba(146,208,80,0) 68%);
    animation: authx-float 18s ease-in-out infinite alternate-reverse;
}

@keyframes authx-float {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-18px, 22px, 0) scale(1.08); }
}

/* align-self is load-bearing, not decoration. This img is a DIRECT child of a
   flex-direction: column container, so it inherits align-items: stretch — and with
   `width: auto` the cross axis is free, so the browser stretched the mark to the full
   panel width while `height` held it at one line, flattening the ball into an ellipse.
   (The width="" attribute normally guards against this, but `width: auto` here overrides
   that presentational hint.) Any wordmark placed as a direct flex child needs this.

   No drop-shadow: the mark is a raster PNG with antialiased white edges, and a shadow
   under those edges reads as a halo that makes the lettering look softer than it is.
   White on a dark panel needs no help separating. */
.raqt-authx-mark {
    align-self: flex-start;
    height: 58px;
    width: auto;
    margin-bottom: .35rem;
}

.raqt-authx-title {
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -.025em;
    line-height: 1.08;
    margin: 0;
    text-wrap: balance;
}

.raqt-authx-sub {
    margin: 0;
    max-width: 32ch;
    /* An explicit colour rather than opacity: the list below needs a different level of
       recession and opacity here would have to be undone there. */
    color: rgba(255, 255, 255, .82);
    line-height: 1.55;
}

/* A hairline sets the value props apart from the pitch instead of letting the whole panel
   read as one undifferentiated stack of text. */
.raqt-authx-points {
    list-style: none;
    margin: .35rem 0 0;
    padding: 1.15rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: grid;
    gap: .7rem;
}

.raqt-authx-points li {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .95);
}

/* Chip for the flat 2-D glyphs. Squared-off radius, not a circle: the circles read as
   bullets, and these carry meaning. Sun-yellow ties them to the ball in the wordmark. */
.raqt-authx-ico {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: var(--sun-300);
    background: rgba(255, 255, 255, .10);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.raqt-authx-ico .mud-icon-root { font-size: 1.05rem; }

/* Staggered entrance so the panel assembles rather than appearing at once. */
.raqt-authx-brand > * { animation: authx-fadeup .55s cubic-bezier(.2,.8,.25,1) both; }
.raqt-authx-brand > *:nth-child(1) { animation-delay: .10s; }
.raqt-authx-brand > *:nth-child(2) { animation-delay: .17s; }
.raqt-authx-brand > *:nth-child(3) { animation-delay: .24s; }
.raqt-authx-brand > *:nth-child(4) { animation-delay: .31s; }

@keyframes authx-fadeup {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ---- right: form panel ---- */
.raqt-authx-form {
    padding: clamp(1.75rem, 3.2vw, 2.75rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    animation: authx-fadeup .55s cubic-bezier(.2,.8,.25,1) .2s both;
}

.raqt-authx-welcome {
    margin: 0 0 .25rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ink-900);
    letter-spacing: -.01em;
}

.raqt-authx-welcome-sub {
    margin: 0 0 1.25rem;
    font-size: .9rem;
    color: var(--ink-500);
}

.raqt-authx-dev {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--ink-200);
}

.raqt-authx-legal {
    font-size: .75rem;
    color: var(--ink-500);
    text-align: center;
    margin: 1.25rem 0 0;
}

.raqt-authx-legal a { color: var(--brand-600); }

/* ---- responsive: stack, with the brand panel as a compact banner ---- */
@media (max-width: 860px) {
    .raqt-authx-card { grid-template-columns: 1fr; }
    .raqt-authx-brand {
        padding: 1.75rem 1.5rem;
        gap: .75rem;
        text-align: center;
        align-items: center;
    }
    /* The panel centres its content here, and align-self: flex-start above would otherwise
       leave the mark hanging off to the left of centred text. */
    .raqt-authx-mark { align-self: center; height: 46px; }
    .raqt-authx-title { font-size: 1.6rem; }
    .raqt-authx-sub { max-width: 40ch; }
    /* The value props are the first thing worth dropping on a small screen —
       the form is why anyone opened this page. */
    .raqt-authx-points { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .raqt-authx,
    .raqt-authx-card,
    .raqt-authx-brand > *,
    .raqt-authx-form,
    .raqt-authx-brand::before,
    .raqt-authx-brand::after {
        animation: none !important;
    }
}

.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;
    }
}