/* /Components/Layout/AdminLayout.razor.rz.scp.css */
/* AdminLayout — visual differentiation from MainLayout (per ADR-016).
   Warm sidebar gradient and a clear "Admin Console" header so the operator
   knows at a glance they're in admin mode rather than the everyday app. */

.admin-page[b-4ohg8h953f] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main.admin-main[b-4ohg8h953f] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.admin-sidebar[b-4ohg8h953f] {
    background-image: linear-gradient(180deg, #5a1a1a 0%, #7a2a1a 70%);
    color: #f7f7f7;
    display: flex;
    flex-direction: column;
}

.admin-brand[b-4ohg8h953f] {
    padding: 1rem 1.25rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-brand-mark[b-4ohg8h953f] {
    margin-right: 0.5rem;
    font-size: 1.25rem;
}

.admin-nav[b-4ohg8h953f] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0.5rem 0;
}

.admin-nav-link[b-4ohg8h953f] {
    display: flex;
    align-items: center;
    padding: 0.6rem 1.25rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background-color 0.15s, border-left-color 0.15s, color 0.15s;
}

    .admin-nav-link:hover[b-4ohg8h953f] {
        background-color: rgba(255, 255, 255, 0.08);
        color: #fff;
    }

    .admin-nav-link.active[b-4ohg8h953f] {
        background-color: rgba(255, 255, 255, 0.12);
        border-left-color: #ffb74d;
        color: #fff;
    }

    .admin-nav-link span:first-child[b-4ohg8h953f] {
        margin-right: 0.5rem;
    }

.admin-back[b-4ohg8h953f] {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-back-link[b-4ohg8h953f] {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.875rem;
}

    .admin-back-link:hover[b-4ohg8h953f] {
        color: #fff;
        text-decoration: underline;
    }

.admin-top-row[b-4ohg8h953f] {
    background-color: #fff8f0;
    border-bottom: 2px solid #ffb74d;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 1.5rem;
}

.admin-user[b-4ohg8h953f] {
    margin-right: 1.5rem;
}

.admin-badge[b-4ohg8h953f] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    background-color: #b71c1c;
    color: #fff;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-signout[b-4ohg8h953f] {
    background: none;
    border: none;
    padding: 0;
    color: #b71c1c;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.95rem;
}

    .admin-signout:hover[b-4ohg8h953f] {
        text-decoration: underline;
    }

.admin-content[b-4ohg8h953f] {
    padding: 1.5rem 2rem;
    flex: 1;
}

@media (max-width: 640.98px) {
    .admin-top-row[b-4ohg8h953f] {
        justify-content: space-between;
        padding: 0 1rem;
    }

    .admin-content[b-4ohg8h953f] {
        padding: 1rem;
    }
}

@media (min-width: 641px) {
    .admin-page[b-4ohg8h953f] {
        flex-direction: row;
    }

    .admin-sidebar[b-4ohg8h953f] {
        width: 260px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .admin-top-row[b-4ohg8h953f] {
        position: sticky;
        top: 0;
        z-index: 1;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout — top-bar shell. Replaces the original 250px sidebar +
   top-row split now that nav has consolidated into the MeHub rail. */

.page[b-o468jh2h5l] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main[b-o468jh2h5l] {
    flex: 1;
    min-width: 0;
}

.content[b-o468jh2h5l] {
    padding: 1.5rem 2rem;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

@media (max-width: 640.98px) {
    .content[b-o468jh2h5l] {
        padding: 1rem;
    }
}

/* ─── Top bar ─────────────────────────────────────────────────── */

/* Mirrors the design handoff's `.toolbar`: paper background, hairline
   ink rule, sticky with a soft blur. */
.top-bar[b-o468jh2h5l] {
    height: 3.5rem;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    background: var(--pj-paper);
    border-bottom: 1px solid var(--pj-rule);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(8px);
}

.top-brand[b-o468jh2h5l] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--pj-ink);
    text-decoration: none;
}

    .top-brand:hover[b-o468jh2h5l] {
        text-decoration: none;
        opacity: 0.8;
    }

.top-right[b-o468jh2h5l] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ─── Profile dropdown (authed state) ─────────────────────────── */

.top-menu[b-o468jh2h5l] {
    position: relative;
}

    /* Hide the native disclosure marker so we can render our own caret. */
    .top-menu summary[b-o468jh2h5l]::-webkit-details-marker { display: none; }
    .top-menu summary[b-o468jh2h5l] { list-style: none; }

.top-menu-trigger[b-o468jh2h5l] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    cursor: pointer;
    user-select: none;
    background: transparent;
    color: var(--pj-ink);
}

    .top-menu-trigger:hover[b-o468jh2h5l],
    .top-menu[open] .top-menu-trigger[b-o468jh2h5l] {
        background: var(--pj-paper-2);
    }

.top-avatar[b-o468jh2h5l] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid var(--pj-rule-2);
    flex: none;
}

    .top-avatar svg[b-o468jh2h5l] {
        display: block;
    }

.top-name[b-o468jh2h5l] {
    font-size: 0.9rem;
    font-weight: 500;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pj-ink);
}

/* Admin chip — reuses the kit's mono-uppercase pill geometry without
   borrowing the .pj-chip class, since this one wants higher-contrast
   accent treatment to flag elevated privileges. */
.top-admin-badge[b-o468jh2h5l] {
    font-family: var(--pj-font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: var(--pj-accent-tint);
    color: var(--pj-accent-deep);
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    font-weight: 600;
}

.top-menu-caret[b-o468jh2h5l] {
    font-size: 0.75rem;
    color: var(--pj-ink-3);
    line-height: 1;
}

/* The dropdown panel itself. */
.top-menu-panel[b-o468jh2h5l] {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    min-width: 200px;
    background: var(--pj-paper);
    border: 1px solid var(--pj-rule-2);
    border-radius: 0.375rem;
    box-shadow: var(--pj-shadow);
    padding: 0.25rem 0;
    z-index: 200;
}

.top-menu-item[b-o468jh2h5l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.875rem;
    font-size: 0.9rem;
    color: var(--pj-ink);
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

    .top-menu-item:hover[b-o468jh2h5l] {
        background: var(--pj-paper-2);
        text-decoration: none;
    }

.top-menu-icon[b-o468jh2h5l] {
    width: 1.25rem;
    text-align: center;
    color: var(--pj-ink-3);
}

.top-menu-sep[b-o468jh2h5l] {
    margin: 0.25rem 0;
    border: none;
    border-top: 1px solid var(--pj-rule);
}

.top-signout-form[b-o468jh2h5l] {
    margin: 0;
    padding: 0;
}

/* ─── Blazor error UI (kept from the original layout) ────────── */

#blazor-error-ui[b-o468jh2h5l] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-o468jh2h5l] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-dpbnyu1tdv],
.components-reconnect-repeated-attempt-visible[b-dpbnyu1tdv],
.components-reconnect-failed-visible[b-dpbnyu1tdv],
.components-pause-visible[b-dpbnyu1tdv],
.components-resume-failed-visible[b-dpbnyu1tdv],
.components-rejoining-animation[b-dpbnyu1tdv] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-dpbnyu1tdv],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-dpbnyu1tdv],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-dpbnyu1tdv],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-dpbnyu1tdv],
#components-reconnect-modal.components-reconnect-retrying[b-dpbnyu1tdv],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-dpbnyu1tdv],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-dpbnyu1tdv],
#components-reconnect-modal.components-reconnect-failed[b-dpbnyu1tdv],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-dpbnyu1tdv] {
    display: block;
}


#components-reconnect-modal[b-dpbnyu1tdv] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-dpbnyu1tdv 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-dpbnyu1tdv 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-dpbnyu1tdv 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-dpbnyu1tdv]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-dpbnyu1tdv 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-dpbnyu1tdv {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-dpbnyu1tdv {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-dpbnyu1tdv {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-dpbnyu1tdv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-dpbnyu1tdv] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-dpbnyu1tdv] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-dpbnyu1tdv] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-dpbnyu1tdv] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-dpbnyu1tdv] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-dpbnyu1tdv] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-dpbnyu1tdv 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-dpbnyu1tdv] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-dpbnyu1tdv {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/*
  Landing page — Direction 3 "Routes & Records".

  Field-manual aesthetic: hairline rules, mono section keys, an offset
  info card alongside the hero illustration. Tokens come from the
  global UI kit (`wwwroot/ui-kit.css`); only direction-specific
  composition lives here.
*/

.landing[b-g4fnbiywnm] {
    --max-w: 1280px;

    color: var(--pj-ink);
    background: var(--pj-paper);
    /* MainLayout puts .content on a 1280px column with 1.5rem 2rem of
       padding. The landing wants its own container; cancel the shell
       padding so sections can carry the full-bleed top rules. */
    margin: -1.5rem -2rem 0;
    padding: 0 32px;
    font-family: var(--pj-font-sans);
}

@media (max-width: 640.98px) {
    .landing[b-g4fnbiywnm] {
        margin: -1rem -1rem 0;
        padding: 0 16px;
    }
}

/* ─── Hero ─────────────────────────────────────────────────────── */

.landing-hero-section[b-g4fnbiywnm] {
    padding: 56px 0 0;
    max-width: var(--max-w);
    margin: 0 auto;
}

.landing-hero-grid[b-g4fnbiywnm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 32px;
    align-items: stretch;
}

@media (max-width: 960px) {
    .landing-hero-grid[b-g4fnbiywnm] {
        grid-template-columns: 1fr;
    }
}

.landing-hero-art[b-g4fnbiywnm] {
    position: relative;
    background: var(--pj-paper-2);
    border: 1px solid var(--pj-rule-2);
    border-radius: 8px;
    overflow: hidden;
    height: 540px;
    min-height: 360px;
}

@media (max-width: 960px) {
    .landing-hero-art[b-g4fnbiywnm] {
        height: 400px;
    }
}

.landing-hero-art svg[b-g4fnbiywnm] {
    width: 100%;
    height: 100%;
    display: block;
}

.landing-hero-card[b-g4fnbiywnm] {
    background: var(--pj-paper);
    border: 1px solid var(--pj-rule-2);
    border-radius: 8px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--pj-shadow);
}

.landing-h1[b-g4fnbiywnm] {
    font-size: 44px;
    line-height: 1.03;
    letter-spacing: -0.025em;
    font-weight: 600;
    margin: 14px 0 16px;
    color: var(--pj-ink);
}

.landing-lede[b-g4fnbiywnm] {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--pj-ink-2);
    margin: 0 0 24px;
}

.landing-ledger[b-g4fnbiywnm] {
    margin: 0 0 24px;
    padding: 14px 0;
    border-top: 1px solid var(--pj-rule);
    border-bottom: 1px solid var(--pj-rule);
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 8px;
    column-gap: 18px;
    font-family: var(--pj-font-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
}

.landing-ledger .k[b-g4fnbiywnm] { color: var(--pj-ink-3); }
.landing-ledger .v[b-g4fnbiywnm] { color: var(--pj-ink); text-align: right; }

.landing-cta-row[b-g4fnbiywnm] {
    display: flex;
    gap: 8px;
    margin-top: auto;
    flex-wrap: wrap;
}

/* ─── Numbered sections ────────────────────────────────────────── */

.landing-num[b-g4fnbiywnm] {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 96px 0;
    border-top: 1px solid var(--pj-rule);
}

.landing-num:first-of-type[b-g4fnbiywnm] {
    margin-top: 56px;
}

.landing-num-head[b-g4fnbiywnm] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 32px;
    margin-bottom: 36px;
}

.landing-num-key[b-g4fnbiywnm] {
    font-family: var(--pj-font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--pj-ink-3);
    padding-top: 12px;
}

.landing-num-head h2[b-g4fnbiywnm] {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0 0 8px;
    max-width: 720px;
    color: var(--pj-ink);
    line-height: 1.1;
}

.landing-num-head p[b-g4fnbiywnm] {
    font-size: 16px;
    line-height: 1.55;
    color: var(--pj-ink-2);
    max-width: 620px;
    margin: 0;
}

.landing-num-body[b-g4fnbiywnm] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 32px;
}

.landing-grid-3[b-g4fnbiywnm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.landing-feat[b-g4fnbiywnm] {
    border: 1px solid var(--pj-rule);
    background: var(--pj-paper-2);
    border-radius: 8px;
    padding: 22px;
}

.landing-feat .k[b-g4fnbiywnm] {
    font-family: var(--pj-font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--pj-accent-deep);
    margin-bottom: 14px;
}

.landing-feat h4[b-g4fnbiywnm] {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--pj-ink);
}

.landing-feat p[b-g4fnbiywnm] {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--pj-ink-2);
    margin: 0;
}

/* ─── Closing CTA ──────────────────────────────────────────────── */

.landing-closer[b-g4fnbiywnm] {
    max-width: var(--max-w);
    margin: 0 auto;
    border-top: 1px solid var(--pj-rule);
    padding: 80px 0;
}

.landing-closer-row[b-g4fnbiywnm] {
    display: grid;
    grid-template-columns: 140px 1fr 1fr;
    gap: 32px;
    align-items: end;
}

.landing-closer h2[b-g4fnbiywnm] {
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.04;
    margin: 0;
    max-width: 580px;
    color: var(--pj-ink);
}

.landing-cta-stack[b-g4fnbiywnm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.landing-note[b-g4fnbiywnm] {
    font-family: var(--pj-font-mono);
    font-size: 11px;
    color: var(--pj-ink-3);
    letter-spacing: 0.1em;
}

/* ─── Foot ─────────────────────────────────────────────────────── */

.landing-foot[b-g4fnbiywnm] {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 26px 0;
    border-top: 1px solid var(--pj-rule);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    font-family: var(--pj-font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--pj-ink-3);
}

.landing-foot .right[b-g4fnbiywnm] { text-align: right; }

/* ─── Compact viewports ────────────────────────────────────────── */

@media (max-width: 880px) {
    .landing-num[b-g4fnbiywnm],
    .landing-closer[b-g4fnbiywnm] {
        padding: 56px 0;
    }

    .landing-num-head[b-g4fnbiywnm],
    .landing-num-body[b-g4fnbiywnm],
    .landing-closer-row[b-g4fnbiywnm] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .landing-num-spacer[b-g4fnbiywnm] { display: none; }

    .landing-grid-3[b-g4fnbiywnm] {
        grid-template-columns: 1fr;
    }

    .landing-h1[b-g4fnbiywnm] { font-size: 32px; }
    .landing-num-head h2[b-g4fnbiywnm],
    .landing-closer h2[b-g4fnbiywnm] { font-size: 28px; }

    .landing-foot[b-g4fnbiywnm] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .landing-foot .right[b-g4fnbiywnm] { text-align: left; }
}
/* /Components/Pages/Me/CollectionPage.razor.rz.scp.css */
/*
  Collection — box-style storage grid + left-edge detail flyout.

  Mirrors the Challenges goal-detail surface's "PC box" layout
  (see DexGoalDetailPage's .dex-box-grid / .dex-box / .dex-flyout)
  but renames the classes so the two pages can drift independently
  if needed. Tokens are sourced from the global pj- design system
  via the rerouted MudBlazor palette vars.
*/

/* ─── Box grid ──────────────────────────────────────────────── */

.col-box-grid[b-h4taf7zs7e] {
    display: grid;
    /* auto-fit fixed-size tracks rather than 1fr-distributed columns.
       Each box is intrinsically ~312px (6×48px cell + gaps + padding +
       border); a fixed-width track guarantees the box has room and
       lets the grid choose how many tracks fit instead of forcing N
       tracks to share a too-narrow row. Without this, the 3-up
       breakpoint compressed each track below the box's intrinsic
       width at typical tab-body viewports (~900px) and the boxes
       overlapped their neighbours. */
    grid-template-columns: repeat(auto-fit, 312px);
    gap: 0.625rem;
    /* Anchor to the left rather than centring across the row — matches
       the rest of the app's left-aligned content flow. Partial rows
       (e.g. two boxes in a viewport that could hold three) sit flush
       with the toolbar above them instead of floating in the middle. */
    justify-content: start;
}

.col-box-card[b-h4taf7zs7e] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Intrinsic-sized: card wraps to fit its 6×44px box (+ gaps +
       padding ≈ 288px). The parent .col-box-grid uses
       `justify-items: center` to centre each card in its 1fr track,
       so narrower-than-column cards sit centred rather than stretched
       across a track that's too narrow for 6 × 44px cells. */
    max-width: 320px;
}

.col-box-card-head[b-h4taf7zs7e] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-family: var(--pj-font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary, #6c757d);
    padding: 0.125rem 0.375rem 0.375rem;
}

.col-box-num[b-h4taf7zs7e] {
    color: var(--mud-palette-text-primary, #15171a);
    font-weight: 600;
}

.col-box[b-h4taf7zs7e] {
    display: grid;
    /* Fixed 48px columns rather than 1fr — `1fr` is minmax(auto, 1fr)
       and the cell's `auto` min-content includes the white-space:nowrap
       label, so a single long nickname would inflate every column
       past sprite size and push the box past the card's 320 cap.
       Fixed columns keep the box deterministically 312px wide; long
       labels clip via the label's own overflow:hidden + ellipsis. */
    grid-template-columns: repeat(6, 48px);
    gap: 4px 2px;
    padding: 0.375rem;
    border: 1px solid var(--mud-palette-lines-default, #ced4da);
    border-radius: 0.375rem;
    background: var(--mud-palette-surface, #fff);
    box-shadow: var(--pj-shadow);
}

/* ─── Cells ─────────────────────────────────────────────────── */

/* Bordered cell — a 1px hairline rule around each slot visually
   breaks the box into 30 discrete cells. Footprint is sized so 6
   cells (each 44px sprite + 2px padding + 2px border = 48px) plus
   gaps plus box chrome land at ~312px — inside the 320px max-width
   the box-card caps to. */
.col-box-cell[b-h4taf7zs7e] {
    position: relative;
    background: var(--pj-paper);
    border: 1px solid var(--mud-palette-lines-default, #ced4da);
    border-radius: 0.25rem;
    padding: 2px 1px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    /* Stable footprint regardless of label length so the box stays
       a clean 6×5 grid even when one cell holds "metapod" and the
       next holds a long nickname. */
    min-height: 68px;
    transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
    font: inherit;
    color: inherit;
    text-align: center;
}

    .col-box-cell:hover[b-h4taf7zs7e] {
        border-color: var(--mud-palette-primary, #0e8a5a);
        background: var(--pj-paper-2);
    }

    .col-box-cell:active[b-h4taf7zs7e] {
        transform: scale(0.94);
    }

    .col-box-cell.active[b-h4taf7zs7e] {
        border-color: var(--mud-palette-primary, #0e8a5a);
        background: var(--pj-accent-tint);
        box-shadow: 0 0 0 1px var(--mud-palette-primary, #0e8a5a);
    }

    /* Padding cells keep the 6×5 footprint stable without rendering
       anything visible. pointer-events:none stops hover leaking into
       empty grid tracks. visibility:hidden preserves layout. */
    .col-box-cell.empty[b-h4taf7zs7e] {
        visibility: hidden;
        pointer-events: none;
        cursor: default;
    }

.col-box-sprite-wrap[b-h4taf7zs7e] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.col-box-shiny[b-h4taf7zs7e] {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 14px;
    height: 14px;
    line-height: 14px;
    border-radius: 50%;
    background: var(--mud-palette-warning, #f6c84c);
    color: var(--mud-palette-warning-text, #15171a);
    font-size: 9px;
    text-align: center;
    font-weight: 700;
    pointer-events: none;
}

.col-box-label[b-h4taf7zs7e] {
    width: 100%;
    font-size: 0.625rem;
    line-height: 1.1;
    color: var(--mud-palette-text-secondary, #6c757d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.col-box-cell:hover .col-box-label[b-h4taf7zs7e],
.col-box-cell.active .col-box-label[b-h4taf7zs7e] {
    color: var(--mud-palette-text-primary, #15171a);
}

/* ─── Flyout (left-edge drawer) ──────────────────────────────
   Pinned to the viewport so it covers MeHub's rail rather than
   being constrained by MeHub's grid columns. Same pattern the
   goal-detail flyout uses. */

.col-flyout-scrim[b-h4taf7zs7e] {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 20, 0.25);
    z-index: 1300;
}

.col-flyout[b-h4taf7zs7e] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 360px;
    max-width: 92vw;
    background: var(--mud-palette-surface, #fff);
    border-right: 1px solid var(--mud-palette-lines-default, #ced4da);
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.12);
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    z-index: 1301;
    overflow-y: auto;
}

.col-flyout-head[b-h4taf7zs7e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.col-flyout-label[b-h4taf7zs7e] {
    font-family: var(--pj-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary, #6c757d);
}

.col-flyout-close[b-h4taf7zs7e] {
    background: none;
    border: none;
    font-family: var(--pj-font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary, #6c757d);
    cursor: pointer;
    padding: 0;
    transition: color 120ms ease;
}

    .col-flyout-close:hover[b-h4taf7zs7e] {
        color: var(--mud-palette-text-primary, #15171a);
    }

.col-flyout-identity[b-h4taf7zs7e] {
    display: flex;
    gap: 0.875rem;
    align-items: center;
}

.col-flyout-sprite[b-h4taf7zs7e] {
    width: 96px;
    height: 96px;
    border: 1px solid var(--mud-palette-lines-default, #ced4da);
    border-radius: 0.375rem;
    background: var(--pj-paper);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.col-flyout-identity-text[b-h4taf7zs7e] {
    min-width: 0;
}

.col-flyout-name[b-h4taf7zs7e] {
    font-size: 1.35rem;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary, #15171a);
    word-break: break-word;
}

.col-flyout-shiny[b-h4taf7zs7e] {
    color: var(--mud-palette-warning, #f6c84c);
    margin-left: 0.25rem;
    font-size: 1.1rem;
    vertical-align: 1px;
}

.col-flyout-sub[b-h4taf7zs7e] {
    font-family: var(--pj-font-mono);
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary, #6c757d);
    letter-spacing: 0.04em;
    margin-top: 0.125rem;
    word-break: break-word;
}

/* ─── Section + DL grid (mono key, ink value) ───────────────── */

.col-flyout-section[b-h4taf7zs7e] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.col-flyout-section-label[b-h4taf7zs7e] {
    font-family: var(--pj-font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--mud-palette-text-secondary, #6c757d);
    font-weight: 600;
}

.col-flyout-grid[b-h4taf7zs7e] {
    display: grid;
    grid-template-columns: 84px 1fr;
    row-gap: 0.25rem;
    column-gap: 0.625rem;
    margin: 0;
    font-size: 0.8125rem;
}

    .col-flyout-grid dt[b-h4taf7zs7e] {
        font-family: var(--pj-font-mono);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--mud-palette-text-secondary, #6c757d);
        align-self: center;
    }

    .col-flyout-grid dd[b-h4taf7zs7e] {
        margin: 0;
        color: var(--mud-palette-text-primary, #15171a);
        word-break: break-word;
    }

.col-flyout-line[b-h4taf7zs7e] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary, #15171a);
}

.col-flyout-chips[b-h4taf7zs7e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.col-flyout-notes[b-h4taf7zs7e] {
    font-size: 0.875rem;
    line-height: 1.45;
    white-space: pre-wrap;
    color: var(--mud-palette-text-primary, #15171a);
}

/* Actions stick to the bottom of the drawer regardless of content
   length, matching the goal-detail flyout's affordance pattern. */
.col-flyout-actions[b-h4taf7zs7e] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--mud-palette-lines-default, #ced4da);
}
/* /Components/Pages/Me/Games.razor.rz.scp.css */
/*
  Games tab — generation swimlanes.

  Mirrors design-handoff "Games · swimlanes" structurally; rendered with
  MudBlazor / Bootstrap tokens rather than the wireframe's hand-drawn ink.
  Per-lane accent colour is injected via CSS custom properties on each
  <section> so the lane header bar and owned-tile thumbnails share a hue.
*/

/* ── Toolbar ─────────────────────────────────────────────────── */

.games-toolbar[b-tdwez6i3kp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-lines-default, #dee2e6);
    border-radius: 0.375rem;
    position: sticky;
    top: 0;
    z-index: 2;
}

.games-seg[b-tdwez6i3kp] {
    display: inline-flex;
    border: 1px solid var(--mud-palette-lines-default, #ced4da);
    border-radius: 0.25rem;
    overflow: hidden;
}

.games-seg-btn[b-tdwez6i3kp] {
    border: none;
    background: transparent;
    color: var(--mud-palette-text-primary, #212529);
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    border-right: 1px solid var(--mud-palette-lines-default, #ced4da);
    transition: background 120ms ease, color 120ms ease;
}

    .games-seg-btn:last-child[b-tdwez6i3kp] {
        border-right: none;
    }

    .games-seg-btn:hover:not(.active)[b-tdwez6i3kp] {
        background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
    }

    .games-seg-btn.active[b-tdwez6i3kp] {
        background: var(--mud-palette-primary, #594ae2);
        color: var(--mud-palette-primary-text, #fff);
    }

.games-search[b-tdwez6i3kp] {
    flex: 1 1 220px;
    max-width: 320px;
    min-width: 180px;
}

.games-toolbar-count[b-tdwez6i3kp] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary, #6c757d);
    white-space: nowrap;
    padding: 0 0.25rem;
}

/* ── Stage / lanes ───────────────────────────────────────────── */

.games-stage[b-tdwez6i3kp] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.games-lane[b-tdwez6i3kp] {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--mud-palette-lines-default, #dee2e6);
    border-radius: 0.5rem;
    background: var(--mud-palette-surface, #fff);
    /* Matches the design-token shadow applied to MudPaper Elevation="1"
       so swimlanes lift the same way as cards in the other tabs. */
    box-shadow: var(--pj-shadow);
}

.games-lane-head[b-tdwez6i3kp] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-right: 1px solid var(--mud-palette-lines-default, #dee2e6);
    padding-right: 0.75rem;
}

.games-lane-title[b-tdwez6i3kp] {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--gen-ink, var(--mud-palette-text-primary, #212529));
}

.games-lane-region[b-tdwez6i3kp] {
    font-family: var(--mud-typography-mono-family, ui-monospace, monospace);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary, #6c757d);
}

.games-lane-ratio[b-tdwez6i3kp] {
    font-family: var(--mud-typography-mono-family, ui-monospace, monospace);
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary, #6c757d);
}

.games-lane-shown[b-tdwez6i3kp] {
    color: var(--mud-palette-text-disabled, #adb5bd);
    margin-left: 0.25rem;
}

.games-lane-track[b-tdwez6i3kp] {
    width: 100%;
    height: 6px;
    border: 1px solid var(--mud-palette-lines-default, #ced4da);
    border-radius: 3px;
    overflow: hidden;
    background: var(--mud-palette-background-gray, #f8f9fa);
    margin-top: 0.25rem;
}

.games-lane-fill[b-tdwez6i3kp] {
    height: 100%;
    background: var(--gen-fill, var(--mud-palette-primary, #594ae2));
    transition: width 200ms ease;
}

.games-lane-row[b-tdwez6i3kp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-content: flex-start;
    min-width: 0;
}

/* ── Tile ────────────────────────────────────────────────────── */

.games-tile[b-tdwez6i3kp] {
    /* button reset */
    border: 1px solid var(--mud-palette-lines-default, #ced4da);
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #212529);
    margin: 0;
    cursor: pointer;
    font: inherit;
    text-align: left;

    position: relative;
    width: 116px;
    padding: 6px;
    border-radius: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 120ms ease, background 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}

    .games-tile:hover[b-tdwez6i3kp] {
        border-color: var(--gen-ink, var(--mud-palette-primary, #594ae2));
        /* Shadow lifts the hovered tile by the same token every other
           raised surface uses, instead of a one-off rgba shadow. */
        box-shadow: var(--pj-shadow);
    }

    .games-tile:active[b-tdwez6i3kp] {
        transform: scale(0.98);
    }

    .games-tile.unowned[b-tdwez6i3kp] {
        border-style: dashed;
        background: transparent;
    }

    /* Read-only mode (rendered as <div>, not <button>) — drop every
       interactive affordance so a foreign profile's tiles don't pretend
       to be actionable. The owned/unowned visuals still distinguish at
       a glance even though click-to-add is gone. */
    .games-tile.read-only[b-tdwez6i3kp] {
        cursor: default;
    }

        .games-tile.read-only:hover[b-tdwez6i3kp] {
            border-color: var(--mud-palette-lines-default, #ced4da);
            box-shadow: none;
        }

        .games-tile.read-only:active[b-tdwez6i3kp] {
            transform: none;
        }

.games-tile-cover[b-tdwez6i3kp] {
    aspect-ratio: 4 / 3;
    width: 100%;
    border: 1px solid var(--mud-palette-lines-default, #ced4da);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background-gray, #f8f9fa);
    overflow: hidden;
}

.games-tile.owned .games-tile-cover[b-tdwez6i3kp] {
    background: var(--gen-fill, var(--mud-palette-primary, #594ae2));
    border-color: var(--gen-ink, var(--mud-palette-primary, #594ae2));
}

/* When the cover is a real logo image we drop the gen-tinted fill so the
   logo art reads cleanly — the lane already broadcasts its hue via the
   header bar, region label, and progress fill, so we don't need a second
   wash behind every tile. The owned/unowned distinction is preserved by
   keeping the dashed border on unowned tiles via the parent rule above. */
.games-tile.owned .games-tile-cover.has-logo[b-tdwez6i3kp] {
    background: var(--mud-palette-surface, #fff);
    border-color: var(--gen-ink, var(--mud-palette-lines-default, #ced4da));
}

.games-tile.unowned .games-tile-cover.has-logo[b-tdwez6i3kp] {
    /* Drain the colour out of the logo on wishlist tiles so they read as
       inactive without us shipping a second set of greyscale PNGs. */
    filter: grayscale(1) opacity(0.55);
}

.games-tile-cover-img[b-tdwez6i3kp] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.games-tile-cover-label[b-tdwez6i3kp] {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-primary, #212529);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.games-tile.unowned .games-tile-cover-label[b-tdwez6i3kp] {
    color: var(--mud-palette-text-disabled, #adb5bd);
    text-shadow: none;
}

.games-tile-title[b-tdwez6i3kp] {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.3em;
}

.games-tile.unowned .games-tile-title[b-tdwez6i3kp] {
    color: var(--mud-palette-text-secondary, #6c757d);
    font-weight: 500;
}

.games-tile-fmts[b-tdwez6i3kp] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.games-tile-fmt[b-tdwez6i3kp] {
    font-family: var(--mud-typography-mono-family, ui-monospace, monospace);
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    padding: 1px 4px;
    border: 1px solid var(--mud-palette-lines-default, #ced4da);
    border-radius: 2px;
    background: var(--mud-palette-background-gray, #f8f9fa);
    color: var(--mud-palette-text-primary, #212529);
    line-height: 1.4;
    text-transform: uppercase;
}

.games-tile-fmt.ghost[b-tdwez6i3kp] {
    border-style: dashed;
    background: transparent;
    color: var(--mud-palette-text-disabled, #adb5bd);
}

/* "Remove from collection" affordance — appears on hover for owned
   tiles, anchored to the corner. The button stops propagation so the
   tile-click handler doesn't also fire. */
.games-tile-remove[b-tdwez6i3kp] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    border: 1px solid var(--mud-palette-error, #d62828);
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-error, #d62828);
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
    z-index: 1;
}

.games-tile:hover .games-tile-remove[b-tdwez6i3kp],
.games-tile-remove:focus[b-tdwez6i3kp] {
    opacity: 1;
}

.games-tile-remove:hover[b-tdwez6i3kp] {
    background: var(--mud-palette-error, #d62828);
    color: var(--mud-palette-error-text, #fff);
}

/* ── Compact-pane handling ───────────────────────────────────── */

@media (max-width: 720px) {
    .games-lane[b-tdwez6i3kp] {
        grid-template-columns: 1fr;
    }

    .games-lane-head[b-tdwez6i3kp] {
        border-right: none;
        border-bottom: 1px solid var(--mud-palette-lines-default, #dee2e6);
        padding-right: 0;
        padding-bottom: 0.5rem;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.5rem;
    }

    .games-lane-track[b-tdwez6i3kp] {
        flex-basis: 100%;
        margin-top: 0.25rem;
    }
}
/* /Components/Pages/Me/GoalsPage.razor.rz.scp.css */
/*
  Goals / Challenges tab — row-card list.

  Mirrors the Playthroughs tab structure (`.pt-table` / `.pt-row` /
  `.pt-card`) but parallel-named because razor scoped CSS can't reach
  across components. Same column grid pattern: a header row up top,
  then one bordered card per goal. No outer container — the tab body
  is the surface.
*/

.goal-table[b-oysimtswfd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Row grid (header + body share this template) ─────────────── */

.goal-row[b-oysimtswfd] {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) /* title       */
        96px            /* public      */
        112px           /* created     */
        96px;           /* actions     */
    column-gap: 0.75rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    min-width: 0;
}

/* Read-only mode (rendered from TrainerProfilePage) — drops the
   public toggle and actions columns so we render title + created. */
.goal-row.read-only[b-oysimtswfd] {
    grid-template-columns:
        minmax(0, 1fr) /* title   */
        112px;         /* created */
}

.goal-row-header[b-oysimtswfd] {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary, #6c757d);
    border-bottom: 1px solid var(--mud-palette-lines-default, #dee2e6);
    padding-top: 0;
    padding-bottom: 0.5rem;
}

.goal-card[b-oysimtswfd] {
    border: 1px solid var(--mud-palette-lines-default, #dee2e6);
    border-radius: 0.375rem;
    background: var(--mud-palette-surface, #fff);
    overflow: hidden;
    /* Matches the design-token shadow applied to MudPaper Elevation="1"
       so each goal row lifts the same way as cards elsewhere. */
    box-shadow: var(--pj-shadow);
    transition: border-color 120ms ease, background 120ms ease;
}

    .goal-card:hover[b-oysimtswfd] {
        border-color: var(--mud-palette-text-secondary, #6c757d);
    }

/* ── Cells ───────────────────────────────────────────────────── */

.goal-cell[b-oysimtswfd] {
    min-width: 0;
}

.goal-title a[b-oysimtswfd] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mud-palette-text-primary, #212529);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

    .goal-title a:hover[b-oysimtswfd] {
        color: var(--mud-palette-primary, #0e8a5a);
        text-decoration: none;
    }

.goal-created[b-oysimtswfd] {
    font-family: var(--mud-typography-mono-family, ui-monospace, monospace);
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #6c757d);
}

.goal-actions[b-oysimtswfd] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.125rem;
}

/* ── Compact-pane handling ───────────────────────────────────── */

@media (max-width: 720px) {
    .goal-row[b-oysimtswfd] {
        grid-template-columns: minmax(0, 1fr) 80px 88px;
        row-gap: 0.5rem;
    }

    .goal-row.read-only[b-oysimtswfd] {
        grid-template-columns: minmax(0, 1fr) 96px;
    }

    /* Collapse to title + public + actions on narrow viewports; created
       drops out of view (still visible on the detail page). */
    .goal-row > .goal-created[b-oysimtswfd],
    .goal-row-header > div:nth-child(3)[b-oysimtswfd] {
        display: none;
    }

    /* In read-only the "created" column is the 2nd child, not the 3rd
       — we keep it visible there since there's no public toggle eating
       horizontal real estate. */
    .goal-row.read-only > .goal-created[b-oysimtswfd] {
        display: block;
    }
}
/* /Components/Pages/Me/MeHub.razor.rz.scp.css */
/* MeHub layout — left rail + tabbed right area, per Profile Wireframes v07. */

.me-hub[b-gqpt42sriw] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 768px) {
    .me-hub[b-gqpt42sriw] {
        grid-template-columns: 1fr;
    }
}

/* ─── Left rail ───────────────────────────────────────────────────── */

/* Identity column rendered as a paper-2 card with the kit's hairline
   rule — matches the design's `.kit .row` and `.d3 .hero-card` panels.
   Aligned with the rest of the app's MudBlazor surfaces via the
   PaletteLight/PaletteDark.Surface mapping in MudProviders.razor. */
.me-rail[b-gqpt42sriw] {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--pj-rule);
    border-radius: 8px;
    background: var(--pj-paper-2);
    box-shadow: var(--pj-shadow);
}

.me-rail-identity[b-gqpt42sriw] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.me-avatar[b-gqpt42sriw] {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid var(--pj-rule-2);
    background: var(--pj-paper);
}

    .me-avatar svg[b-gqpt42sriw] {
        width: 64px;
        height: 64px;
    }

.me-identity-text[b-gqpt42sriw] {
    min-width: 0;
}

.me-name[b-gqpt42sriw] {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    color: var(--pj-ink);
}

.me-meta[b-gqpt42sriw] {
    font-size: 0.8125rem;
    color: var(--pj-ink-2);
    margin-top: 0.125rem;
}

.me-rail-section[b-gqpt42sriw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Mono-uppercase label — directly mirrors the kit's `.pj-eyebrow`. */
.me-rail-label[b-gqpt42sriw] {
    font-family: var(--pj-font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--pj-ink-3);
    font-weight: 500;
}

.me-rail-empty[b-gqpt42sriw] {
    font-size: 0.8125rem;
    color: var(--pj-ink-3);
    font-style: italic;
}

.me-rail-codes[b-gqpt42sriw] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .me-rail-codes li[b-gqpt42sriw] {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        font-size: 0.8125rem;
        padding: 0.25rem 0;
        border-bottom: 1px dashed var(--pj-rule-2);
    }

        .me-rail-codes li:last-child[b-gqpt42sriw] {
            border-bottom: none;
        }

    .me-rail-codes code[b-gqpt42sriw] {
        font-family: var(--pj-font-mono);
        font-size: 0.75rem;
        color: var(--pj-ink);
    }

.me-rail-code-key[b-gqpt42sriw] {
    color: var(--pj-ink-3);
    flex: none;
}

.me-rail-bar[b-gqpt42sriw] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.me-rail-bar-head[b-gqpt42sriw] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8125rem;
    align-items: baseline;
    color: var(--pj-ink);
}

    .me-rail-bar-head a[b-gqpt42sriw] {
        text-decoration: none;
        color: inherit;
    }

        .me-rail-bar-head a:hover[b-gqpt42sriw] {
            text-decoration: underline;
        }

.me-rail-bar-meta[b-gqpt42sriw] {
    font-family: var(--pj-font-mono);
    color: var(--pj-ink-3);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    flex: none;
}

.me-rail-share[b-gqpt42sriw] {
    margin-top: auto;
    font-size: 0.8125rem;
    text-align: center;
}

/* ─── Right pane: tabs + body ────────────────────────────────────── */

.me-content[b-gqpt42sriw] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Tab rail mirrors the kit's mono-uppercase nav labels: short pills
   that sit on the paper rule and lift to the paper card when active. */
.me-tabs[b-gqpt42sriw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--pj-rule);
    margin-bottom: 1rem;
}

.me-tab[b-gqpt42sriw] {
    padding: 0.5rem 0.875rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--pj-ink-2);
    text-decoration: none;
    font-family: var(--pj-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: -1px;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

    .me-tab:hover[b-gqpt42sriw] {
        background: var(--pj-paper-2);
        color: var(--pj-ink);
        text-decoration: none;
    }

    .me-tab.active[b-gqpt42sriw] {
        background: var(--pj-paper);
        color: var(--pj-ink);
        border-color: var(--pj-rule);
        border-bottom-color: var(--pj-paper);
        font-weight: 600;
    }

.me-tab-body[b-gqpt42sriw] {
    min-width: 0;
}
/* /Components/Pages/Me/PlaythroughDetail.razor.rz.scp.css */
/*
  PlaythroughDetail — horizontal badge strip.

  Mirrors the list view's tap-to-toggle interaction on a larger tile,
  with slot name (and leader, when set) under each badge since the
  detail page has the room.
*/

.pt-detail-badges[b-pnl0rq5yzn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pt-detail-badge[b-pnl0rq5yzn] {
    /* button reset */
    border: none;
    background: transparent;
    padding: 0.25rem;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    width: 96px;
    text-align: center;
    border-radius: 0.375rem;
    transition: background 120ms ease;
}

    .pt-detail-badge:hover[b-pnl0rq5yzn] {
        background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
    }

    .pt-detail-badge:active[b-pnl0rq5yzn] {
        transform: scale(0.97);
    }

.pt-detail-badge-tile[b-pnl0rq5yzn] {
    width: 64px;
    height: 64px;
    border: 1.5px dashed var(--mud-palette-lines-default, #ced4da);
    border-radius: 0.5rem;
    background: var(--mud-palette-surface, #fff);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 120ms ease, background 120ms ease;
}

.pt-detail-badge.earned .pt-detail-badge-tile[b-pnl0rq5yzn] {
    border-style: solid;
    border-color: var(--mud-palette-primary, #594ae2);
    background: var(--mud-palette-surface, #fff);
}

.pt-detail-badge:hover .pt-detail-badge-tile[b-pnl0rq5yzn] {
    border-color: var(--mud-palette-primary, #594ae2);
}

.pt-detail-badge-tile img[b-pnl0rq5yzn] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pt-detail-badge:not(.earned) .pt-detail-badge-tile img[b-pnl0rq5yzn] {
    filter: grayscale(1) opacity(0.35);
}

.pt-detail-badge-fallback[b-pnl0rq5yzn] {
    font-family: var(--mud-typography-mono-family, ui-monospace, monospace);
    font-size: 1rem;
    color: var(--mud-palette-text-secondary, #6c757d);
}

.pt-detail-badge-label[b-pnl0rq5yzn] {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--mud-palette-text-primary, #212529);
}

.pt-detail-badge:not(.earned) .pt-detail-badge-label[b-pnl0rq5yzn] {
    color: var(--mud-palette-text-secondary, #6c757d);
}

.pt-detail-badge-sub[b-pnl0rq5yzn] {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary, #6c757d);
    line-height: 1.1;
}
/* /Components/Pages/Me/Playthroughs.razor.rz.scp.css */
/*
  Playthroughs tab — accordion + inline-badges layout.

  Sticks to the structure of design-handoff variation 03c but renders
  with MudBlazor / Bootstrap palette tokens rather than the wireframe's
  hand-drawn aesthetic. Six-column grid for the header + every body
  row keeps everything aligned.
*/

.pt-table[b-3ft4qeo9z4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Row grid (header + body share this template) ─────────────── */

.pt-row[b-3ft4qeo9z4] {
    display: grid;
    grid-template-columns:
        24px            /* chevron       */
        minmax(0, 1.2fr) /* game          */
        minmax(0, 1fr)   /* trainer       */
        minmax(0, 0.9fr) /* status / date */
        minmax(0, auto)  /* badges        */
        72px;            /* actions       */
    column-gap: 0.75rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    min-width: 0;
}

/* Read-only mode (rendered from TrainerProfilePage). Drops the chevron
   and actions columns so the row reads as a four-column read-out. */
.pt-row.read-only[b-3ft4qeo9z4] {
    grid-template-columns:
        minmax(0, 1.2fr) /* game          */
        minmax(0, 1fr)   /* trainer       */
        minmax(0, 0.9fr) /* status / date */
        minmax(0, auto); /* badges        */
}

.pt-row-header[b-3ft4qeo9z4] {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary, #6c757d);
    border-bottom: 1px solid var(--mud-palette-lines-default, #dee2e6);
    padding-top: 0;
    padding-bottom: 0.5rem;
}

.pt-card[b-3ft4qeo9z4] {
    border: 1px solid var(--mud-palette-lines-default, #dee2e6);
    border-radius: 0.375rem;
    background: var(--mud-palette-surface, #fff);
    overflow: hidden;
    /* Matches the design-token shadow applied to MudPaper Elevation="1"
       so each playthrough row lifts the same way as cards elsewhere. */
    box-shadow: var(--pj-shadow);
    transition: background 120ms ease, border-color 120ms ease;
}

    .pt-card.open[b-3ft4qeo9z4] {
        background: var(--mud-palette-background-gray, #f8f9fa);
        border-color: var(--mud-palette-primary, #594ae2);
    }

.pt-row-body[b-3ft4qeo9z4] {
    cursor: pointer;
}

    .pt-row-body:hover[b-3ft4qeo9z4] {
        background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
    }

    /* Read-only row — no click handler, no hover-shade, no pointer. */
    .pt-row-body.read-only[b-3ft4qeo9z4] {
        cursor: default;
    }

        .pt-row-body.read-only:hover[b-3ft4qeo9z4] {
            background: transparent;
        }

/* ── Cells ───────────────────────────────────────────────────── */

.pt-cell[b-3ft4qeo9z4] {
    min-width: 0;
}

.pt-chev[b-3ft4qeo9z4] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary, #6c757d);
}

.pt-game-name[b-3ft4qeo9z4] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-game-sub[b-3ft4qeo9z4] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #6c757d);
    margin-top: 0.125rem;
}

.pt-trainer[b-3ft4qeo9z4] {
    font-size: 0.875rem;
    line-height: 1.25;
}

.pt-trainer-name[b-3ft4qeo9z4] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-trainer-gender[b-3ft4qeo9z4] {
    color: var(--mud-palette-text-secondary, #6c757d);
    margin-left: 0.125rem;
}

.pt-trainer-id[b-3ft4qeo9z4] {
    font-family: var(--mud-typography-mono-family, ui-monospace, "JetBrains Mono", monospace);
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #6c757d);
}

.pt-status[b-3ft4qeo9z4] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    /* Centre the chip + the date in the cell so their visual centres
       line up. Left-aligning previously made the chip's left padding
       offset its text from the date underneath — read as a misalign. */
    align-items: center;
    text-align: center;
}

.pt-status-chip[b-3ft4qeo9z4] {
    /* Mud chip — let the framework own most of it; just keep the line
       compact so the started-date can sit underneath. */
    margin: 0;
}

.pt-champion[b-3ft4qeo9z4] {
    margin-left: 0.25rem;
}

.pt-started[b-3ft4qeo9z4] {
    font-family: var(--mud-typography-mono-family, ui-monospace, monospace);
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary, #6c757d);
}

/* ── Badges ──────────────────────────────────────────────────── */

.pt-badges[b-3ft4qeo9z4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Reserve a single row of 8 badge tiles + the count chip even
       when the playthrough has no badges yet — keeps the badge
       column's left edge aligned across rows so games with 0 badges
       don't visibly shift the count + actions inwards.
         8 × 28px tile          = 224px
         7 × 4px tile gap       =  28px
         0.5rem flex gap        =   8px
         worst-case count text  =  56px  (room for "16/16" — and
                                          any future game with up to
                                          three-digit gym tallies —
                                          without the cell crowding
                                          out the actions column)
                                  ─────
                                  316px
       Cleared in the narrow media query below where the cell reflows. */
    min-width: 316px;
    min-height: 28px;
}

.pt-badges-empty[b-3ft4qeo9z4] {
    color: var(--mud-palette-text-disabled, #adb5bd);
}

.pt-badge-tiles[b-3ft4qeo9z4] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    /* Cap at 8 tiles per row — Crystal-style 16-badge games used to
       run a single 500-px-wide strip and crowd the other row cells out.
       8 × 28px tile + 7 × 4px gap = 252px. */
    max-width: 252px;
}

.pt-badge[b-3ft4qeo9z4] {
    width: 28px;
    height: 28px;
    border: 1.5px dashed var(--mud-palette-lines-default, #ced4da);
    border-radius: 4px;
    background: var(--mud-palette-surface, #fff);
    padding: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 120ms ease, background 120ms ease, transform 80ms ease;
}

    .pt-badge:hover[b-3ft4qeo9z4] {
        border-color: var(--mud-palette-primary, #594ae2);
        background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
    }

    .pt-badge:active[b-3ft4qeo9z4] {
        transform: scale(0.92);
    }

    /* Read-only badge — rendered as a div, no toggle interaction. */
    .pt-badge.read-only[b-3ft4qeo9z4] {
        cursor: default;
    }

        .pt-badge.read-only:hover[b-3ft4qeo9z4] {
            border-color: var(--mud-palette-lines-default, #ced4da);
            background: var(--mud-palette-surface, #fff);
        }

        .pt-badge.read-only.earned:hover[b-3ft4qeo9z4] {
            border-color: var(--mud-palette-primary, #594ae2);
        }

        .pt-badge.read-only:active[b-3ft4qeo9z4] {
            transform: none;
        }

    .pt-badge.earned[b-3ft4qeo9z4] {
        border: 1.5px solid var(--mud-palette-primary, #594ae2);
        background: var(--mud-palette-surface, #fff);
    }

    .pt-badge img[b-3ft4qeo9z4] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .pt-badge:not(.earned) img[b-3ft4qeo9z4] {
        filter: grayscale(1) opacity(0.35);
    }

    .pt-badge .pt-badge-fallback[b-3ft4qeo9z4] {
        font-family: var(--mud-typography-mono-family, ui-monospace, monospace);
        font-size: 0.7rem;
        color: var(--mud-palette-text-secondary, #6c757d);
    }

.pt-badges-count[b-3ft4qeo9z4] {
    font-family: var(--mud-typography-mono-family, ui-monospace, monospace);
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #6c757d);
    flex: none;
}

/* ── Actions ─────────────────────────────────────────────────── */

.pt-actions[b-3ft4qeo9z4] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* ── Expanded edit panel ─────────────────────────────────────── */

.pt-edit[b-3ft4qeo9z4] {
    border-top: 1px dashed var(--mud-palette-lines-default, #dee2e6);
    padding: 0.875rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    cursor: default;
}

.pt-edit-grid[b-3ft4qeo9z4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.pt-edit-finished[b-3ft4qeo9z4] {
    max-width: 220px;
}

.pt-edit-status-cell[b-3ft4qeo9z4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* Status has 4 segments (Active / Finished / Abandoned / Lost) and the
       longest word is wider than a 170-min grid track. Let the cell span
       the row so the segments aren't clipped. */
    grid-column: 1 / -1;
}

.pt-edit-label[b-3ft4qeo9z4] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary, #6c757d);
    font-weight: 600;
    padding-left: 0.125rem;
}

.pt-edit-status[b-3ft4qeo9z4] {
    display: inline-flex;
    flex-wrap: wrap;
    border: 1px solid var(--mud-palette-lines-default, #ced4da);
    border-radius: 0.25rem;
    overflow: hidden;
    align-self: flex-start;
}

.pt-edit-status-seg[b-3ft4qeo9z4] {
    border: none;
    background: transparent;
    color: var(--mud-palette-text-primary, #212529);
    padding: 0.35rem 0.7rem;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    border-right: 1px solid var(--mud-palette-lines-default, #ced4da);
    transition: background 120ms ease, color 120ms ease;
}

    .pt-edit-status-seg:last-child[b-3ft4qeo9z4] {
        border-right: none;
    }

    .pt-edit-status-seg:hover:not(.active)[b-3ft4qeo9z4] {
        background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
    }

    .pt-edit-status-seg.active[b-3ft4qeo9z4] {
        background: var(--mud-palette-primary, #594ae2);
        color: var(--mud-palette-primary-text, #fff);
    }

.pt-edit-champion-cell[b-3ft4qeo9z4] {
    display: flex;
    align-items: center;
}

.pt-edit-footer[b-3ft4qeo9z4] {
    display: flex;
    justify-content: flex-end;
    border-top: 1px dashed var(--mud-palette-lines-default, #dee2e6);
    padding-top: 0.5rem;
}

/* ── Compact-pane handling ───────────────────────────────────── */

@media (max-width: 900px) {
    .pt-row[b-3ft4qeo9z4] {
        grid-template-columns:
            24px
            minmax(0, 1.2fr)
            minmax(0, 1fr)
            minmax(0, auto)
            48px;
        row-gap: 0.5rem;
    }

    .pt-row.read-only[b-3ft4qeo9z4] {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(0, 1fr)
            minmax(0, auto);
    }

    /* Push status under the badges + collapse "Status/Date" header out of
       view on narrow widths — the chip still surfaces inside the row's
       second visual line. */
    .pt-row > .pt-status[b-3ft4qeo9z4] {
        grid-column: 2 / 4;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .pt-row.read-only > .pt-status[b-3ft4qeo9z4] {
        grid-column: 1 / 4;
    }

    .pt-row > .pt-badges[b-3ft4qeo9z4] {
        grid-column: 2 / 5;
        /* Drop the wide-screen 252px reservation — at this breakpoint
           the cell already spans 3 grid columns, so reserving anything
           extra would overflow on small viewports. */
        min-width: 0;
    }

    .pt-row.read-only > .pt-badges[b-3ft4qeo9z4] {
        grid-column: 1 / 4;
    }

    .pt-row-header > div:nth-child(4)[b-3ft4qeo9z4] {
        display: none;
    }

    /* In the read-only header (4 cells: game / trainer / status / badges),
       the "status" header is the 3rd child — hide it instead of the 4th. */
    .pt-row-header.read-only > div:nth-child(3)[b-3ft4qeo9z4] {
        display: none;
    }
}
/* /Components/Pages/Me/StarsPanel.razor.rz.scp.css */
/* Stars tab — themed to the app's design tokens. Each tier is a collapsible
   "card" matching the product's .pj-card look (beige paper + hairline rule). */

.stars-panel[b-8ildgz22ss] { display: flex; flex-direction: column; gap: 12px; }

/* ─── Page header ─── */
.stars-head[b-8ildgz22ss] {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; padding: 4px 4px 0;
}
.stars-mini[b-8ildgz22ss] { display: flex; gap: 18px; flex-wrap: wrap; }
.stars-mini-item[b-8ildgz22ss] { display: flex; flex-direction: column; align-items: center; gap: 1px; }

/* ─── Tier section: beige card with a hairline rule (matches .pj-card tokens) ─── */
.tier-section[b-8ildgz22ss] {
    background: var(--pj-paper-2, #f2efe8);
    border: 1px solid var(--pj-rule, rgba(21, 23, 26, .10));
    border-radius: 8px;
    overflow: hidden;
}
.tier-header[b-8ildgz22ss] {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px 14px; background: transparent; border: 0; cursor: pointer;
    font: inherit; color: inherit; text-align: left;
}
.tier-header:hover[b-8ildgz22ss] { background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, .04)); }
.tier-th-name[b-8ildgz22ss] { font-size: 1.05rem; font-weight: 600; text-transform: capitalize; }
.tier-th-count[b-8ildgz22ss] { font-size: .75rem; color: var(--mud-palette-text-secondary, #777); font-variant-numeric: tabular-nums; }
.tier-th-bar[b-8ildgz22ss] {
    flex: 1; max-width: 200px; height: 6px; margin-left: auto;
    border-radius: 3px; overflow: hidden;
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, .08));
}
.tier-th-fill[b-8ildgz22ss] { height: 100%; border-radius: 3px; }
.tier-th-pct[b-8ildgz22ss] { min-width: 36px; text-align: right; font-size: .75rem; color: var(--mud-palette-text-secondary, #777); font-variant-numeric: tabular-nums; }
.tier-chevron[b-8ildgz22ss] { transition: transform 150ms ease; color: var(--mud-palette-text-secondary, #777); }
.tier-chevron.open[b-8ildgz22ss] { transform: rotate(180deg); }

/* ─── Star rows (2-col dense grid) ─── */
.star-grid[b-8ildgz22ss] { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--pj-rule, rgba(21, 23, 26, .10)); }
.star-row[b-8ildgz22ss] {
    display: grid; grid-template-columns: 34px 1fr auto; align-items: center;
    gap: 8px; padding: 8px 12px;
    border-bottom: 1px solid var(--pj-rule, rgba(21, 23, 26, .10));
}
.star-row:nth-child(odd)[b-8ildgz22ss] { border-right: 1px solid var(--pj-rule, rgba(21, 23, 26, .10)); }
.star-row-icon[b-8ildgz22ss] { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.star-num[b-8ildgz22ss] {
    font-family: var(--pj-font-mono, ui-monospace, monospace);
    font-size: .6rem; line-height: 1; font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary, #777);
}
.star-row.locked[b-8ildgz22ss] { opacity: .6; }
.star-row-text[b-8ildgz22ss] { min-width: 0; }
.star-cond[b-8ildgz22ss] { font-size: .85rem; line-height: 1.3; }
.star-quirk[b-8ildgz22ss] {
    font-style: italic; font-size: .78rem; line-height: 1.3;
    color: var(--mud-palette-text-secondary, #777); margin-top: 2px;
}
.star-meta[b-8ildgz22ss] {
    display: flex; align-items: baseline; gap: 8px;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--mud-palette-text-secondary, #777); margin-top: 2px;
}
.star-games[b-8ildgz22ss] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.star-region[b-8ildgz22ss] { margin-left: auto; white-space: nowrap; padding-left: 8px; }
.star-status[b-8ildgz22ss] { font-size: .72rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.star-status-locked[b-8ildgz22ss] { color: var(--mud-palette-text-secondary, #777); }
.star-svg[b-8ildgz22ss] { display: block; }

/* ─── Responsive: one column ─── */
@media (max-width: 960px) {
    .star-grid[b-8ildgz22ss] { grid-template-columns: 1fr; }
    .star-row:nth-child(odd)[b-8ildgz22ss] { border-right: none; }
}
/* /Components/Pages/Me/StarTotalsRail.razor.rz.scp.css */
/* Star totals rail module — small tier star icons with earned/total underneath. */

.star-totals[b-s9kdvwu2wh] { margin: 4px 0; }

.st-mini[b-s9kdvwu2wh] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 14px;
}

.st-mini-item[b-s9kdvwu2wh] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.st-count[b-s9kdvwu2wh] {
    font-family: var(--mud-typography-monospace-family, ui-monospace, monospace);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary, #777);
}
/* /Components/Pages/TrainerProfilePage.razor.rz.scp.css */
/*
  Public trainer profile — sticky rail + tabbed pane.

  Every tab body (Games, Playthroughs, BadgesTab, CollectionPage,
  GoalsPage, DexGoalDetailPage) delegates to the corresponding /me/*
  component with ReadOnly=true; the components carry their own scoped
  CSS. This file owns only the shell — rail, tab strip, empty states.

  Token-based throughout — every surface borrows from --pj-paper /
  --pj-rule / --pj-ink so dark mode and the ambient app palette pick
  the page up automatically. Class prefix `tp-` keeps the shell
  separate from the /me/* scoped class names.
*/

/* =====================================================================
   Hub layout
   ===================================================================== */

.tp-hub[b-2qfnyi4ksz] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 768px) {
    .tp-hub[b-2qfnyi4ksz] {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Left rail
   ===================================================================== */

.tp-rail[b-2qfnyi4ksz] {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--pj-rule);
    border-radius: 8px;
    background: var(--pj-paper-2);
    box-shadow: var(--pj-shadow);
}

.tp-rail-identity[b-2qfnyi4ksz] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.tp-avatar[b-2qfnyi4ksz] {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid var(--pj-rule-2);
    background: var(--pj-paper);
}

    .tp-avatar svg[b-2qfnyi4ksz] {
        width: 64px;
        height: 64px;
    }

.tp-identity-text[b-2qfnyi4ksz] {
    min-width: 0;
}

.tp-name[b-2qfnyi4ksz] {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    color: var(--pj-ink);
}

.tp-handle[b-2qfnyi4ksz] {
    font-family: var(--pj-font-mono);
    font-size: 0.8125rem;
    color: var(--pj-ink-3);
    margin-top: 0.125rem;
}

.tp-meta[b-2qfnyi4ksz] {
    font-size: 0.8125rem;
    color: var(--pj-ink-2);
    margin-top: 0.25rem;
}

.tp-meta-sep[b-2qfnyi4ksz] {
    margin: 0 0.35rem;
    color: var(--pj-ink-3);
}

.tp-rail-section[b-2qfnyi4ksz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Mono-uppercase eyebrow label — mirrors the kit's `.pj-eyebrow`. */
.tp-rail-label[b-2qfnyi4ksz] {
    font-family: var(--pj-font-mono);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--pj-ink-3);
    font-weight: 500;
}

.tp-rail-empty[b-2qfnyi4ksz] {
    font-size: 0.8125rem;
    color: var(--pj-ink-3);
    font-style: italic;
}

.tp-rail-codes[b-2qfnyi4ksz] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .tp-rail-codes li[b-2qfnyi4ksz] {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        font-size: 0.8125rem;
        padding: 0.25rem 0;
        border-bottom: 1px dashed var(--pj-rule-2);
    }

        .tp-rail-codes li:last-child[b-2qfnyi4ksz] {
            border-bottom: none;
        }

    .tp-rail-codes code[b-2qfnyi4ksz] {
        font-family: var(--pj-font-mono);
        font-size: 0.75rem;
        color: var(--pj-ink);
    }

.tp-rail-code-key[b-2qfnyi4ksz] {
    color: var(--pj-ink-3);
    flex: none;
}

/* =====================================================================
   Right pane: tabs + body
   ===================================================================== */

.tp-content[b-2qfnyi4ksz] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.tp-tabs[b-2qfnyi4ksz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--pj-rule);
    margin-bottom: 1rem;
}

.tp-tab[b-2qfnyi4ksz] {
    padding: 0.5rem 0.875rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--pj-ink-2);
    text-decoration: none;
    font-family: var(--pj-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: -1px;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

    .tp-tab:hover[b-2qfnyi4ksz] {
        background: var(--pj-paper-2);
        color: var(--pj-ink);
        text-decoration: none;
    }

    .tp-tab.active[b-2qfnyi4ksz] {
        background: var(--pj-paper);
        color: var(--pj-ink);
        border-color: var(--pj-rule);
        border-bottom-color: var(--pj-paper);
        font-weight: 600;
    }

.tp-tab-body[b-2qfnyi4ksz] {
    min-width: 0;
}

/* =====================================================================
   Empty states + shared utilities
   ===================================================================== */

.tp-section-empty[b-2qfnyi4ksz] {
    padding: 1.5rem;
    border: 1px dashed var(--pj-rule-2);
    border-radius: 8px;
    background: var(--pj-paper-2);
    color: var(--pj-ink-3);
    font-style: italic;
    text-align: center;
}

.tp-empty-hub[b-2qfnyi4ksz] {
    padding: 2rem 1.5rem;
    font-style: normal;
}

    .tp-empty-hub p[b-2qfnyi4ksz] {
        margin: 0 0 0.5rem;
    }

        .tp-empty-hub p:last-child[b-2qfnyi4ksz] {
            margin-bottom: 0;
        }

.tp-muted[b-2qfnyi4ksz] {
    color: var(--pj-ink-3);
}
/* /Components/Shared/ThemeToggle.razor.rz.scp.css */
/*
  Top-bar theme toggle — mirrors the design hi-fi's `.theme` button.
  Mono-uppercase label, hairline rule, accent on hover. Sits in the
  AppBar slot just before sign-in / profile menu.
*/

.pj-theme-toggle[b-p6gzn474i9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--pj-font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pj-ink-2);
    background: transparent;
    border: 1px solid var(--pj-rule-2);
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

    .pj-theme-toggle:hover[b-p6gzn474i9],
    .pj-theme-toggle:focus-visible[b-p6gzn474i9] {
        color: var(--pj-ink);
        border-color: var(--pj-ink-3);
        outline: none;
    }

    .pj-theme-toggle:focus-visible[b-p6gzn474i9] {
        box-shadow: 0 0 0 3px var(--pj-accent-tint);
    }

.pj-theme-toggle-icon[b-p6gzn474i9] {
    font-size: 13px;
    line-height: 1;
    /* Geometric glyphs sit slightly low on the baseline — nudge up so
       the icon optically centres with the mono label. */
    transform: translateY(-0.5px);
}

.pj-theme-toggle-label[b-p6gzn474i9] {
    /* Hide the label on narrow viewports — icon alone is enough. */
}

@media (max-width: 520px) {
    .pj-theme-toggle-label[b-p6gzn474i9] {
        display: none;
    }

    .pj-theme-toggle[b-p6gzn474i9] {
        padding: 6px 8px;
    }
}