/* /Component/FaceCard.razor.rz.scp.css */
/* Fixed card size lets the parent flex-wrap container decide how many
   cards fit per row. A previous `width:100%; aspect-ratio:1/1` rendition
   collapsed to a single column under certain ancestor layouts. */
.face-card[b-uj8x2226su] {
    position: relative;
    width: 120px;
    height: 120px;
    flex: 0 0 auto;
    border: none;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    background-color: #f5f5f5;
}

@media (min-width: 1280px) {
    .face-card[b-uj8x2226su] { width: 140px; height: 140px; }
}

@media (min-width: 1920px) {
    .face-card[b-uj8x2226su] { width: 160px; height: 160px; }
}

.face-card:hover[b-uj8x2226su] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.face-card:focus-visible[b-uj8x2226su] {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

.face-image[b-uj8x2226su] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.face-card:hover .face-image[b-uj8x2226su] {
    opacity: 0.9;
}

.confidence-badge[b-uj8x2226su] {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    pointer-events: none;
}

/* Core (anchor-set) faces: a clear accent ring + a corner badge so it's obvious
   at a glance which faces define the identity and pull in new members. */
.face-card.is-core[b-uj8x2226su] {
    box-shadow: 0 0 0 2px #2dd4bf, 0 2px 6px rgba(0, 0, 0, 0.25);
}

.face-card.is-core:hover[b-uj8x2226su] {
    box-shadow: 0 0 0 2px #2dd4bf, 0 4px 10px rgba(0, 0, 0, 0.3);
}

.core-badge[b-uj8x2226su] {
    position: absolute;
    top: 4px;
    left: 4px;
    background: #2dd4bf;
    color: #04201c;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    pointer-events: none;
}

/* Passive members: a muted tag naming the dominant reason the face is NOT in
   the core (full explanation in the title/tooltip). */
.passive-badge[b-uj8x2226su] {
    position: absolute;
    top: 4px;
    left: 4px;
    max-width: calc(100% - 8px);
    background: rgba(0, 0, 0, 0.62);
    color: #cbd3de;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 600;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-badge[b-uj8x2226su] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.face-card:hover .info-badge[b-uj8x2226su],
.face-card:focus-visible .info-badge[b-uj8x2226su] {
    opacity: 1;
}

/* Loading state */
.face-card.loading[b-uj8x2226su] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-uj8x2226su 1.5s infinite;
}

@keyframes loading-b-uj8x2226su {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}
/* /Pages/Face-grouping-details.razor.rz.scp.css */
.face-details[b-nna65gk8kt] {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
}

/* The source face uses the same FaceCard component as the grid, which is
   width:100% aspect-ratio:1/1 — without this max-width the seed image grows to
   the full content area and pushes everything else off-screen. */
.source-face[b-nna65gk8kt] {
    width: 100%;
    max-width: 280px;
    margin-bottom: 16px;
}

.faces-grid[b-nna65gk8kt] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin: 12px 0;
    padding: 0;
}

.face-cell[b-nna65gk8kt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.face-id[b-nna65gk8kt] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    line-height: 1.3;
    word-break: break-all;
    user-select: all;
    opacity: 0.75;
}

.face-meta[b-nna65gk8kt] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 4px 0 12px;
    font-size: 12px;
}

.face-meta .meta-row[b-nna65gk8kt] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.face-meta .meta-label[b-nna65gk8kt] {
    opacity: 0.6;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
}

.face-meta .face-id[b-nna65gk8kt] {
    font-size: 11px;
    opacity: 0.95;
}

@media (min-width: 1280px) {
    .faces-grid[b-nna65gk8kt] {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 10px;
    }
}

@media (min-width: 1920px) {
    .faces-grid[b-nna65gk8kt] {
        grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
        gap: 12px;
    }
}
/* /Pages/FaceGallery.razor.rz.scp.css */
.face-gallery-container[b-5ucafcjpna] {
    padding: 12px;
    max-width: 100%;
}

/* Flex-wrap rather than CSS grid: combined with fixed-size FaceCards
   (see FaceCard.razor.css), this gives a predictable "as many columns
   as fit the viewport" layout that scales naturally on any width. The
   prior grid-auto-fill rendition would sometimes collapse to a single
   column when a parent flex container constrained the grid's content-box. */
.faces-grid[b-5ucafcjpna] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
    padding: 0;
}

@media (min-width: 1280px) {
    .faces-grid[b-5ucafcjpna] {
        gap: 10px;
    }
}

@media (min-width: 1920px) {
    .faces-grid[b-5ucafcjpna] {
        gap: 12px;
    }
}

.gallery-header[b-5ucafcjpna] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.loading-container[b-5ucafcjpna] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
}

.loading-container p[b-5ucafcjpna] {
    margin-top: 16px;
    color: #666;
}

.no-faces[b-5ucafcjpna] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    color: #666;
}

.gallery-info[b-5ucafcjpna] {
    text-align: center;
    margin-top: 20px;
    color: #666;
    font-size: 14px;
}

.cluster-section[b-5ucafcjpna] {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid #e3e3e3;
}

.cluster-section:first-of-type[b-5ucafcjpna] {
    border-top: none;
    margin-top: 8px;
    padding-top: 0;
}

/* Explains what the ★/teal-ring "core" marker on face cards means. */
.core-legend[b-5ucafcjpna] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(45, 212, 191, .08);
    border: 1px solid rgba(45, 212, 191, .25);
    font-size: .85rem;
    color: #b9c2cf;
    line-height: 1.45;
}

.core-legend .core-swatch[b-5ucafcjpna] {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: #2dd4bf;
    color: #04201c;
    font-weight: 700;
}

/* The sub-cluster a gallery people-chip sub-linked to. */
.cluster-focused[b-5ucafcjpna] {
    background-color: rgba(33, 150, 243, 0.08);
    border-left: 3px solid #2196f3;
    padding-left: 9px;
    border-radius: 4px;
}

.cluster-header[b-5ucafcjpna] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.cluster-header h4[b-5ucafcjpna] {
    margin: 0;
    color: #444;
    font-size: 16px;
    font-weight: 500;
}

.cluster-seed-thumb[b-5ucafcjpna] {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ccc;
}
/* /Pages/Faces.razor.rz.scp.css */
/* Fixed-height row inside Virtualize so the virtualizer's ItemSize
   matches reality exactly. Mismatching ItemSize is what previously
   caused the download loop — virtualizer thought the viewport could
   hold many more rows than it actually could and kept asking for
   pages it didn't need. */
.unlinked-row[b-qrfrh64e0a] {
    display: flex;
    flex-direction: row;
    gap: 12px;
    height: 258px;          /* Must match UnlinkedRowHeightPx in code */
    padding: 4px 8px;
    box-sizing: border-box;
    align-items: flex-start;
}

.unlinked-card[b-qrfrh64e0a] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 160px;
    height: 250px;
    flex-shrink: 0;         /* Row's flex container must not squash cards */
    position: relative;     /* anchor for the .linked-badge overlay */
}

/* Optimistic-link state: face was just linked to a PersonGroup this
   session, but we deliberately leave it in the unlinked panel until the
   next natural refresh — see _justLinkedFaceIds in Faces.razor for why
   (avoids resetting the Virtualize viewport during bulk linking). */
.unlinked-card.linked-optimistic[b-qrfrh64e0a] {
    opacity: 0.5;
    pointer-events: none;   /* the dropdown is also Disabled, this is belt-and-braces */
}

.linked-badge[b-qrfrh64e0a] {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(28, 130, 64, 0.92);
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: auto;   /* let tooltip work even though the card is locked */
}

/* At-a-glance attribute line under the thumbnail (quality / gender / age).
   Fixed height so it doesn't disturb the virtualizer's row measurement. */
.unlinked-meta[b-qrfrh64e0a] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 18px;
    width: 160px;
    font-size: 12px;
    line-height: 18px;
    flex-shrink: 0;
}

.unlinked-meta .meta-ok[b-qrfrh64e0a] {
    color: #4caf50;
}

/* Below the grouping quality floor — this face won't auto-group. */
.unlinked-meta .meta-bad[b-qrfrh64e0a] {
    color: #e57373;
    font-weight: 600;
}

/* Attribute the model couldn't classify (Unknown gender / null age). */
.unlinked-meta .meta-dim[b-qrfrh64e0a] {
    color: #888;
}

.unlinked-thumb[b-qrfrh64e0a] {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    /* Background reserves the 160x160 box visually even while loading
       or on 404 (legacy S3-path data). Without this a failed image
       collapses to zero intrinsic height and disturbs row measurement. */
    background-color: #2a2a2a;
}

/* /Pages/LoginPage.razor.rz.scp.css */
/* Centered, responsive auth card. Card surface/border use Radzen theme vars so
   it's correct in both light and dark; only the brand mark + accent are fixed. */
.xif-auth[b-5b5pplmlqs] {
    min-height: 80vh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
}

.xif-auth-card[b-5b5pplmlqs] {
    width: 100%;
    max-width: 420px;
    background: var(--rz-card-background-color, #161b22);
    border: 1px solid var(--rz-border-color, #2a323d);
    border-radius: 16px;
    padding: 28px 26px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
}

.xif-auth-brand[b-5b5pplmlqs] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.xif-auth-logo[b-5b5pplmlqs] {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #5e9dff, #2dd4bf);
    color: #04111f;
    font-weight: 800;
    font-size: 18px;
    flex: none;
}

.xif-auth-name[b-5b5pplmlqs] {
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.2;
}

.xif-auth-sub[b-5b5pplmlqs] {
    font-size: .82rem;
    opacity: .65;
}

/* The adoption code: big, monospaced, copy-on-tap. */
.xif-adoption-code[b-5b5pplmlqs] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-align: center;
    padding: 14px;
    border-radius: 12px;
    background: rgba(94, 157, 255, .1);
    border: 1px dashed rgba(94, 157, 255, .4);
    color: #cfe1ff;
    user-select: all;
}

/* RadzenLogin renders inside a child component, so reach it with ::deep to make
   the form fill the card width on mobile. */
[b-5b5pplmlqs] .rz-login {
    width: 100%;
    max-width: 100%;
}
/* /Pages/PersonImages.razor.rz.scp.css */
/* /Pages/Rotation.razor.rz.scp.css */
.videoGalleri[b-570sw8l3b4] {
    object-fit: cover;
    height: 100%;
    width: 100%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

.rotationpage[b-570sw8l3b4] {
    background-color: black;
    cursor: none;
    height: 100vh;
    min-height: 100%;
    min-width: 100%;
    place-items: center;
    overflow-y: hidden; /* Hide vertical scrollbar */
    overflow-x: hidden; /* Hide horizontal scrollbar */
}
/* /Shared/MainLayout.razor.rz.scp.css */
/* The Radzen layout (RadzenLayout/Header/Sidebar/Body) manages the shell itself;
   .page is just the full-viewport flex wrapper around it. The old Blazor-template
   rules (.sidebar gradient, .top-row, the 641px media queries) were dead — the
   Radzen layout never used those classes — and have been removed. */
.page[b-6smvlrdqac] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}
/* /Shared/NavMenu.razor.rz.scp.css */
/* Sidebar lays out as a column so the footer (logout + version) sticks to the
   bottom regardless of how many menu items there are. */
.xif-nav[b-vi7hdrbodl] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 10px 8px;
}

.xif-nav-footer[b-vi7hdrbodl] {
    margin-top: auto;
    padding: 14px 8px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.xif-version[b-vi7hdrbodl] {
    font-size: .72rem;
    color: #8a93a3;
    opacity: .75;
    letter-spacing: .02em;
}