/* /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;
}

/* Multi-select / bulk-delete (issue #65). */
.col-select-bar[b-h4taf7zs7e] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

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

.col-box-check[b-h4taf7zs7e] {
    position: absolute;
    top: -3px;
    left: -3px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    background: var(--mud-palette-primary, #0e8a5a);
    color: #fff;
    font-size: 11px;
    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;
    /* Scrolling moves onto .col-flyout-body so head + actions stay pinned
       regardless of content height (same pattern as the goal-detail flyout). */
    overflow: hidden;
}

.col-flyout-body[b-h4taf7zs7e] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    /* Tiny right padding so the scrollbar doesn't hug content. */
    padding-right: 2px;
}

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

/* Sticky footer — .col-flyout-body owns the scroll, so the actions sit on
   the drawer's bottom edge regardless of how far the body has scrolled.
   flex:none stops it shrinking when the body's min-content pushes down. */
.col-flyout-actions[b-h4taf7zs7e] {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--mud-palette-lines-default, #ced4da);
    background: var(--mud-palette-surface, #fff);
}
/* /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;
}

/*
  Caught-Pokemon tiles.

  A wrapping strip of sprite tiles, each an anchor to the catch's full
  detail page. Mirrors the collection grid's cell look (bordered tile,
  shiny pip, ellipsised label) but laid out like the badge strip above
  since this section shows a flat list rather than 6×5 storage boxes.
*/

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

.pt-detail-catch[b-pnl0rq5yzn] {
    /* anchor reset */
    text-decoration: none;
    color: inherit;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 64px;
    padding: 2px;
    border-radius: 0.375rem;
    text-align: center;
    transition: background 120ms ease, transform 80ms ease;
}

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

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

.pt-detail-catch-tile[b-pnl0rq5yzn] {
    position: relative;
    width: 56px;
    height: 56px;
    border: 1px solid var(--mud-palette-lines-default, #ced4da);
    border-radius: 0.375rem;
    background: var(--mud-palette-surface, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 120ms ease;
}

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

.pt-detail-catch-sprite-wrap[b-pnl0rq5yzn] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.pt-detail-catch-shiny[b-pnl0rq5yzn] {
    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;
}

.pt-detail-catch-label[b-pnl0rq5yzn] {
    width: 100%;
    font-size: 0.7rem;
    line-height: 1.15;
    color: var(--mud-palette-text-primary, #212529);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-detail-catch-sub[b-pnl0rq5yzn] {
    font-size: 0.65rem;
    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-advisory[b-8ildgz22ss] {
    display: flex; align-items: baseline; gap: 5px;
    font-size: .74rem; line-height: 1.3; margin-top: 3px;
    color: var(--mud-palette-warning-darken, #ad6800);
}
.star-advisory-icon[b-8ildgz22ss] { flex: 0 0 auto; font-weight: 700; }
.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/ExternalPokedexLinks.razor.rz.scp.css */
/* External Pokedex links row (Forgejo #59) — small chip-style links that
   sit inside a flyout section. Wraps to multiple lines on a narrow drawer. */

.ext-links[b-ievei0fcwe] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ext-link[b-ievei0fcwe] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    font-size: 0.8rem;
    line-height: 1.2;
    text-decoration: none;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-background-grey);
    transition: background-color 120ms ease, border-color 120ms ease;
}

    .ext-link:hover[b-ievei0fcwe] {
        background: var(--mud-palette-action-default-hover);
        border-color: var(--mud-palette-primary);
    }

.ext-link-icon[b-ievei0fcwe] {
    font-size: 0.7rem;
    opacity: 0.7;
}
/* /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;
    }
}