/* /Components/Layout/MainLayout.razor.rz.scp.css */
:host[b-fnszu11yml] {
    display: block;
}

/* ── App Bar ─────────────────────────────────────────────── */

[b-fnszu11yml] .mud-appbar {
    height: 64px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[b-fnszu11yml] .admin-appbar {
    background: color-mix(in oklab, var(--mud-palette-appbar-background) 85%, transparent) !important;
}

[b-fnszu11yml] .admin-appbar-actions {
    display: flex;
    align-items: center;
}

/* TRI-229: --admin-appbar-* are declared on :root in app.css, not here — this
   bar stays dark in both themes, so it needs the dark ramp even in light mode,
   and a `::deep .admin-appbar { --… }` block would never match. See app.css. */
[b-fnszu11yml] .admin-env-chip {
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    height: 28px;
    background: color-mix(in oklab, var(--admin-appbar-neutral) 18%, transparent) !important;
    color: var(--admin-appbar-neutral) !important;
}

[b-fnszu11yml] .admin-env-chip--production {
    background: color-mix(in oklab, var(--admin-appbar-success) 20%, transparent) !important;
    color: var(--admin-appbar-success) !important;
}

[b-fnszu11yml] .admin-env-chip--staging {
    background: color-mix(in oklab, var(--admin-appbar-info) 22%, transparent) !important;
    color: var(--admin-appbar-info) !important;
}

[b-fnszu11yml] .admin-env-chip--development {
    background: color-mix(in oklab, var(--admin-appbar-warning) 22%, transparent) !important;
    color: var(--admin-appbar-warning) !important;
}

/* ── Drawer ──────────────────────────────────────────────── */

[b-fnszu11yml] .mud-drawer {
    border-right: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
}

[b-fnszu11yml] .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Drawer Header / Brand ───────────────────────────────── */

[b-fnszu11yml] .admin-drawer-header {
    min-height: 68px;
    padding: 14px 16px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
    display: flex;
    align-items: center;
    background:
        radial-gradient(120px 70px at 20% 0%, rgba(255, 214, 64, 0.09), transparent 65%),
        linear-gradient(180deg,
            color-mix(in oklab, #05215a 32%, var(--mud-palette-surface)),
            color-mix(in oklab, #03143c 18%, var(--mud-palette-surface)));
}

[b-fnszu11yml] .admin-brand {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0;
    width: 100%;
}

[b-fnszu11yml] .admin-brand-mark {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 2px;
    border-radius: 12px;
    background: color-mix(in oklab, #06246b 88%, black);
    box-shadow:
        0 8px 18px color-mix(in oklab, #001a55 45%, transparent),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    overflow: hidden;
}

[b-fnszu11yml] .admin-brand-mark::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 16px;
    background: radial-gradient(circle, rgba(255, 214, 64, 0.13) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

[b-fnszu11yml] .admin-brand-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

[b-fnszu11yml] .admin-brand-logo {
    display: block;
    width: min(132px, 100%);
    max-height: 42px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 3px 8px rgba(0, 12, 42, 0.35));
}

/* ── Drawer Footer ───────────────────────────────────────── */

[b-fnszu11yml] .admin-drawer-footer {
    padding: 10px 12px 12px;
    border-top: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: color-mix(in oklab, var(--mud-palette-drawer-background) 96%, var(--mud-palette-background));
}

[b-fnszu11yml] .admin-footer-card {
    display: grid;
    gap: 4px;
    min-width: 0;
}

[b-fnszu11yml] .admin-footer-utility-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 0 2px;
}

[b-fnszu11yml] .admin-user-profile {
    min-width: 0;
    padding: 0 !important;
    border-radius: 9px !important;
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    transition: background-color 0.2s ease !important;
}

[b-fnszu11yml] .admin-user-profile-inner {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 16px;
    align-items: center;
    width: 100%;
    gap: 8px;
    padding: 4px 2px;
    min-width: 0;
}

[b-fnszu11yml] .admin-user-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
}

[b-fnszu11yml] .admin-user-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
    text-align: left;
}

[b-fnszu11yml] .admin-user-action-icon {
    opacity: 0.52;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

[b-fnszu11yml] .admin-user-profile:hover {
    background-color: color-mix(in oklab, var(--mud-palette-primary) 7%, transparent) !important;
}

[b-fnszu11yml] .admin-user-profile:hover .admin-user-action-icon {
    opacity: 0.85;
    transform: translateX(1px);
}

[b-fnszu11yml] .admin-user-name {
    overflow: hidden;
    color: var(--mud-palette-text-primary);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-fnszu11yml] .admin-user-caption {
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-fnszu11yml] .admin-auth-mode-pill {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 6px;
    max-width: 100%;
    padding: 0 0 0 38px;
    color: color-mix(in oklab, var(--mud-palette-warning) 82%, var(--mud-palette-text-primary));
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

[b-fnszu11yml] .admin-auth-mode-dot {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
}

[b-fnszu11yml] .admin-theme-toggle {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    opacity: 0.74;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

[b-fnszu11yml] .admin-theme-toggle:hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 10%, transparent);
    opacity: 1;
}

[b-fnszu11yml] .admin-release-link {
    display: grid;
    min-width: 0;
    gap: 2px;
    padding: 2px 0;
    border-radius: 6px;
    opacity: 0.8;
    transition: opacity 0.15s ease, color 0.15s ease;
}

[b-fnszu11yml] .admin-release-link:hover {
    opacity: 1;
}

[b-fnszu11yml] .admin-release-kicker {
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-fnszu11yml] .admin-release-version {
    overflow: hidden;
    color: var(--mud-palette-text-primary);
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 600px) {
    [b-fnszu11yml] .admin-env-chip {
        display: none;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
:host[b-w7x6jp4gc4] {
    display: block;
}

/* ── Nav Menu Container ─────────────────────────────────── */

[b-w7x6jp4gc4] .mud-navmenu {
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Section Color Accent Variables ──────────────────────── */

.nav-group--dailyops[b-w7x6jp4gc4]  { --nav-accent: #FFB960; }
.nav-group--content[b-w7x6jp4gc4]   { --nav-accent: #6E8BFF; }
.nav-group--adventure[b-w7x6jp4gc4] { --nav-accent: #26c6da; }
.nav-group--liveops[b-w7x6jp4gc4]   { --nav-accent: #4CAF50; }
.nav-group--growth[b-w7x6jp4gc4]    { --nav-accent: #fb7185; }
.nav-group--players[b-w7x6jp4gc4]   { --nav-accent: #B39DDB; }
.nav-group--system[b-w7x6jp4gc4]    { --nav-accent: #8e909f; }

/* ── Nav Group (collapsible section) ─────────────────────── */

.nav-group[b-w7x6jp4gc4] {
    display: flex;
    flex-direction: column;
}

.nav-group + .nav-group[b-w7x6jp4gc4] {
    margin-top: 6px;
}

/* ── Group Header Button ─────────────────────────────────── */

.nav-group-header[b-w7x6jp4gc4] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 8px 14px 8px 12px;
    margin: 0 16px;
    width: calc(100% - 32px);
    border: none;
    border-radius: 10px;
    background: color-mix(in oklab, var(--nav-accent) 4%, transparent);
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nav-accent) 12%, transparent);
}

.nav-group-header:hover[b-w7x6jp4gc4] {
    background: color-mix(in oklab, var(--nav-accent) 10%, transparent);
    color: var(--mud-palette-text-primary);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nav-accent) 22%, transparent);
}

/* ── Accent rail (fixed-height stripe — matches dot hue, stronger section cue) ── */

.nav-group-accent[b-w7x6jp4gc4] {
    width: 4px;
    align-self: stretch;
    min-height: 22px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--nav-accent) 92%, white 8%);
    opacity: 0.72;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.nav-group-header:hover .nav-group-accent[b-w7x6jp4gc4] {
    opacity: 1;
}

/* ── Section marker dot (every group has rail + dot for quick scanning) ──────── */

.nav-group-dot[b-w7x6jp4gc4] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--nav-accent);
    flex-shrink: 0;
    box-shadow:
        0 0 0 2px color-mix(in oklab, var(--nav-accent) 28%, transparent),
        0 0 12px color-mix(in oklab, var(--nav-accent) 35%, transparent);
}

/* ── Group Label (heavier than before for primary structure read) ── */

.nav-group-label[b-w7x6jp4gc4] {
    flex: 1;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
    color: color-mix(in oklab, var(--nav-accent) 28%, var(--mud-palette-text-primary));
}

.nav-group-header:hover .nav-group-label[b-w7x6jp4gc4] {
    color: var(--mud-palette-text-primary);
}

/* ── Chevron ─────────────────────────────────────────────── */

[b-w7x6jp4gc4] .nav-group-chevron {
    opacity: 0.4;
    transition: opacity 0.15s ease, transform 0.2s ease;
    font-size: 18px !important;
}

.nav-group-header:hover[b-w7x6jp4gc4]  .nav-group-chevron {
    opacity: 0.85;
    color: var(--nav-accent);
}

/* ── Group Children Container ────────────────────────────── */

.nav-group-children[b-w7x6jp4gc4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 4px;
    animation: nav-group-expand-b-w7x6jp4gc4 0.2s ease-out;
}

@keyframes nav-group-expand-b-w7x6jp4gc4 {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Individual Nav Links ────────────────────────────────── */

[b-w7x6jp4gc4] .nav-link {
    margin: 0;
    padding: 0;
}

[b-w7x6jp4gc4] .nav-link .mud-nav-link {
    min-height: 44px;
    margin: 1px 16px !important;
    padding: 8px 16px !important;
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: transparent !important;
    /* MudBlazor NavMenu default paints a heavy primary stripe on .active */
    border: none !important;
    border-inline-start: none !important;
    box-shadow: none !important;
}

[b-w7x6jp4gc4] .nav-link--home .mud-nav-link {
    margin: 1px 16px 4px !important;
}

/* ── Hover ───────────────────────────────────────────────── */

[b-w7x6jp4gc4] .nav-link .mud-nav-link:hover {
    background-color: color-mix(in oklab, var(--mud-palette-primary) 8%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--dailyops .nav-link .mud-nav-link:hover {
    background-color: color-mix(in oklab, #FFB960 8%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--content .nav-link .mud-nav-link:hover {
    background-color: color-mix(in oklab, #6E8BFF 8%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--adventure .nav-link .mud-nav-link:hover {
    background-color: color-mix(in oklab, #26c6da 8%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--growth .nav-link .mud-nav-link:hover {
    background-color: color-mix(in oklab, #fb7185 8%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--liveops .nav-link .mud-nav-link:hover {
    background-color: color-mix(in oklab, #4CAF50 8%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--players .nav-link .mud-nav-link:hover {
    background-color: color-mix(in oklab, #B39DDB 8%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--system .nav-link .mud-nav-link:hover {
    background-color: color-mix(in oklab, #8e909f 8%, transparent) !important;
}

/* ── Active State — filled pill only (no Mud left-rail / inset stripe) ── */

/* NOTE (TRI-226): [data-aggregate-active] sits on the WRAPPER div that
   MudNavLink renders (.mud-nav-item.nav-link), not on the inner <a
   class="mud-nav-link"> — MudBlazor splats UserAttributes onto the wrapper.
   So the attribute must be matched on .nav-link and the styled element
   selected below it. Verified against the rendered HTML, not the API docs;
   tools/qa/tri-226/verify-aggregate-active.mjs asserts it. */
[b-w7x6jp4gc4] .nav-link .mud-nav-link.active,
[b-w7x6jp4gc4] .nav-link[data-aggregate-active="true"] .mud-nav-link {
    background-color: color-mix(in oklab, var(--mud-palette-primary) 18%, transparent) !important;
    border: none !important;
    border-inline-start: none !important;
    box-shadow: none !important;
}

[b-w7x6jp4gc4] .nav-group--dailyops .nav-link .mud-nav-link.active,
[b-w7x6jp4gc4] .nav-group--dailyops .nav-link[data-aggregate-active="true"] .mud-nav-link {
    background-color: color-mix(in oklab, #FFB960 18%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--content .nav-link .mud-nav-link.active,
[b-w7x6jp4gc4] .nav-group--content .nav-link[data-aggregate-active="true"] .mud-nav-link {
    background-color: color-mix(in oklab, #6E8BFF 18%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--adventure .nav-link .mud-nav-link.active,
[b-w7x6jp4gc4] .nav-group--adventure .nav-link[data-aggregate-active="true"] .mud-nav-link {
    background-color: color-mix(in oklab, #26c6da 18%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--growth .nav-link .mud-nav-link.active,
[b-w7x6jp4gc4] .nav-group--growth .nav-link[data-aggregate-active="true"] .mud-nav-link {
    background-color: color-mix(in oklab, #fb7185 18%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--liveops .nav-link .mud-nav-link.active,
[b-w7x6jp4gc4] .nav-group--liveops .nav-link[data-aggregate-active="true"] .mud-nav-link {
    background-color: color-mix(in oklab, #4CAF50 18%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--players .nav-link .mud-nav-link.active,
[b-w7x6jp4gc4] .nav-group--players .nav-link[data-aggregate-active="true"] .mud-nav-link {
    background-color: color-mix(in oklab, #B39DDB 18%, transparent) !important;
}

[b-w7x6jp4gc4] .nav-group--system .nav-link .mud-nav-link.active,
[b-w7x6jp4gc4] .nav-group--system .nav-link[data-aggregate-active="true"] .mud-nav-link {
    background-color: color-mix(in oklab, #8e909f 18%, transparent) !important;
}

/* ── Icon Styling ────────────────────────────────────────── */

[b-w7x6jp4gc4] .nav-link .mud-nav-link-icon {
    min-width: 22px;
    width: 22px;
    height: 22px;
    font-size: 20px;
    margin-right: 12px;
    color: var(--mud-palette-text-secondary) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[b-w7x6jp4gc4] .nav-link .mud-nav-link:hover .mud-nav-link-icon {
    color: var(--mud-palette-text-primary) !important;
    transform: scale(1.08);
}

[b-w7x6jp4gc4] .nav-link .mud-nav-link.active .mud-nav-link-icon,
[b-w7x6jp4gc4] .nav-link[data-aggregate-active="true"] .mud-nav-link .mud-nav-link-icon {
    color: var(--mud-palette-primary) !important;
}

[b-w7x6jp4gc4] .nav-group--dailyops .nav-link .mud-nav-link.active .mud-nav-link-icon,
[b-w7x6jp4gc4] .nav-group--dailyops .nav-link[data-aggregate-active="true"] .mud-nav-link .mud-nav-link-icon {
    color: #FFB960 !important;
}

[b-w7x6jp4gc4] .nav-group--content .nav-link .mud-nav-link.active .mud-nav-link-icon,
[b-w7x6jp4gc4] .nav-group--content .nav-link[data-aggregate-active="true"] .mud-nav-link .mud-nav-link-icon {
    color: #6E8BFF !important;
}

[b-w7x6jp4gc4] .nav-group--adventure .nav-link .mud-nav-link.active .mud-nav-link-icon,
[b-w7x6jp4gc4] .nav-group--adventure .nav-link[data-aggregate-active="true"] .mud-nav-link .mud-nav-link-icon {
    color: #26c6da !important;
}

[b-w7x6jp4gc4] .nav-group--growth .nav-link .mud-nav-link.active .mud-nav-link-icon,
[b-w7x6jp4gc4] .nav-group--growth .nav-link[data-aggregate-active="true"] .mud-nav-link .mud-nav-link-icon {
    color: #fb7185 !important;
}

[b-w7x6jp4gc4] .nav-group--liveops .nav-link .mud-nav-link.active .mud-nav-link-icon,
[b-w7x6jp4gc4] .nav-group--liveops .nav-link[data-aggregate-active="true"] .mud-nav-link .mud-nav-link-icon {
    color: #4CAF50 !important;
}

[b-w7x6jp4gc4] .nav-group--players .nav-link .mud-nav-link.active .mud-nav-link-icon,
[b-w7x6jp4gc4] .nav-group--players .nav-link[data-aggregate-active="true"] .mud-nav-link .mud-nav-link-icon {
    color: #B39DDB !important;
}

[b-w7x6jp4gc4] .nav-group--system .nav-link .mud-nav-link.active .mud-nav-link-icon,
[b-w7x6jp4gc4] .nav-group--system .nav-link[data-aggregate-active="true"] .mud-nav-link .mud-nav-link-icon {
    color: #8e909f !important;
}

/* ── Content Layout ──────────────────────────────────────── */

[b-w7x6jp4gc4] .nav-link-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
}

/* ── Title ───────────────────────────────────────────────── */

[b-w7x6jp4gc4] .nav-link-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    transition: color 0.2s ease;
    line-height: 1.2;
}

[b-w7x6jp4gc4] .nav-link .mud-nav-link:hover .nav-link-title {
    color: var(--mud-palette-text-primary);
}

[b-w7x6jp4gc4] .nav-link .mud-nav-link.active .nav-link-title,
[b-w7x6jp4gc4] .nav-link[data-aggregate-active="true"] .mud-nav-link .nav-link-title {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

/* ── Subtitle ────────────────────────────────────────────── */

/* At rest this used to be --mud-palette-text-disabled (rgba(255,255,255,0.2)),
   which composites to 1.79:1 on the drawer — far below the 4.5:1 AA floor for
   10.4px text (TRI-26). It now sits one measured step below the title's
   text-secondary rather than in the disabled ramp: 5.91:1 dark / 5.67:1 light,
   against the title's 7.57 / 7.58. Verified by tools/qa/tri-26 — re-run it
   before changing this percentage, the light theme has little headroom. */
[b-w7x6jp4gc4] .nav-link-subtitle {
    font-size: 0.65rem;
    font-weight: 400;
    color: color-mix(in oklab, var(--mud-palette-text-secondary) 88%, var(--mud-palette-drawer-background));
    transition: color 0.2s ease;
    line-height: 1.1;
    letter-spacing: 0.02em;
}

[b-w7x6jp4gc4] .nav-link .mud-nav-link:hover .nav-link-subtitle {
    color: color-mix(in oklab, var(--mud-palette-text-secondary) 55%, var(--mud-palette-text-primary));
}

[b-w7x6jp4gc4] .nav-link .mud-nav-link.active .nav-link-subtitle,
[b-w7x6jp4gc4] .nav-link[data-aggregate-active="true"] .mud-nav-link .nav-link-subtitle {
    color: color-mix(in oklab, var(--mud-palette-text-secondary) 55%, var(--mud-palette-text-primary));
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-p6vgaxprdr],
.components-reconnect-repeated-attempt-visible[b-p6vgaxprdr],
.components-reconnect-failed-visible[b-p6vgaxprdr],
.components-pause-visible[b-p6vgaxprdr],
.components-resume-failed-visible[b-p6vgaxprdr],
.components-reconnect-meaning[b-p6vgaxprdr],
.components-rejoining-animation[b-p6vgaxprdr] {
    display: none;
}

/* Shown in every state the dialog is open in: whatever Blazor is doing about
   it, the operator's situation is the same one. */
#components-reconnect-modal.components-reconnect-show .components-reconnect-meaning[b-p6vgaxprdr],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-meaning[b-p6vgaxprdr],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-meaning[b-p6vgaxprdr],
#components-reconnect-modal.components-reconnect-paused .components-reconnect-meaning[b-p6vgaxprdr],
#components-reconnect-modal.components-reconnect-resume-failed .components-reconnect-meaning[b-p6vgaxprdr] {
    display: block;
}

/* De-emphasised, but derived from the primary text colour rather than taken
   from --mud-palette-text-secondary. Secondary is `rgba(0,0,0,0.54)` in the
   light theme, which over this modal's surface measures 3.95:1 -- under WCAG
   AA's 4.5:1, on the one line that tells the operator what the outage means.
   It passed in the dark theme, which is why it needed measuring in both.
   Mixing toward the surface keeps the hierarchy while staying tied to the
   colour the theme already guarantees is readable on it. Measured after:
   8.06:1 dark, 8.77:1 light -- verify-admin-circuit.mjs asserts both. */
#components-reconnect-modal p.components-reconnect-meaning[b-p6vgaxprdr] {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: color-mix(in oklab, var(--mud-palette-text-primary) 80%, var(--mud-palette-surface));
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 0.75rem;
}

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

/* Blazor leaves the "show" class on when it adds "retrying", so the rule above
   keeps "Rejoining the server..." on screen directly over "Rejoin failed.
   Trying again in 1s." -- two contradictory sentences, mid-incident. Identical
   specificity, so this has to sit after that block to win; it is not grouped
   with the other TRI-137 rules below for that reason alone. */
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-first-attempt-visible[b-p6vgaxprdr] {
    display: none;
}


/* TRI-137. Two things had to be beaten here, both invisible in source:
   1. MudBlazor.min.css ships `#components-reconnect-modal { background-color:
      var(--mud-palette-background) !important }`. It was written for Blazor's
      OLD full-screen overlay <div>, where painting it in the theme background
      was right. Against .NET 9+'s <dialog> it repaints the 320px box the exact
      colour of the page behind it, so the modal has no edge at all.
   2. The UA stylesheet gives <dialog> `color: CanvasText`, and this page never
      declares `color-scheme: dark`, so CanvasText resolves to BLACK. Stock
      Blazor never notices because stock Blazor paints the box white.
   Together they put black status text on a near-black box: 1.06:1 measured,
   against WCAG AA's 4.5:1. The operator's only warning was unreadable.

   Ours carries !important too and is one attribute more specific (the scoped
   `[b-...]` Blazor appends), so it wins. Everything is a palette var rather
   than a hex: MainLayout has a working light-mode toggle. */
#components-reconnect-modal[b-p6vgaxprdr] {
    background-color: color-mix(in oklab, var(--mud-palette-surface) 92%, var(--mud-palette-text-primary)) !important;
    color: var(--mud-palette-text-primary);
    width: 24rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 0.5rem;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-p6vgaxprdr 0.5s both;
}

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

/* A 40%-black scrim over a #070a13 page is a 3-point change nobody can see, so
   the dashboard kept reading as fully operable while the modal swallowed every
   click (a top-layer dialog hit-tests over its own backdrop). Dim hard enough
   that "this page is blocked" is legible without reading a word. */
#components-reconnect-modal[b-p6vgaxprdr]::backdrop {
    background-color: rgba(0, 0, 0, 0.72);
    backdrop-filter: saturate(0.4) blur(2px);
    animation: components-reconnect-modal-fadeInOpacity-b-p6vgaxprdr 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

/* Restated rather than left to inherit: the UA `color: CanvasText` on <dialog>
   is what made this text black, and an inherited value is one stray UA rule
   away from going back. */
#components-reconnect-modal p[b-p6vgaxprdr] {
    margin: 0;
    text-align: center;
    color: var(--mud-palette-text-primary);
}

/* MudBlazor.min.css also lands `margin: 40px auto !important` on these, which
   pushes the buttons a long way clear of the text they belong to. The flex
   container's own 1rem gap is the spacing.

   --mud-palette-primary straight is rgb(110,139,255); its own
   --mud-palette-primary-text is white, which measures 3.09:1 dark / 3.64:1
   light -- under WCAG AA on the PRIMARY action of this dialog (found by QA in
   TRI-148, after the 1.06:1 status text was fixed). MudBlazor gets away with
   it on 20px+ buttons elsewhere; these are 14px/500, where the floor is 4.5:1.
   Darkening the fill rather than lightening the label keeps it reading as the
   primary action. Measured after: 8.83:1 dark (white on rgb(54,70,134)) and
   9.81:1 light (white on rgb(44,62,134)). The themes differ because
   --mud-palette-primary does -- #6E8BFF dark, #5B7CFF light -- so one figure
   cannot stand for both.

   Those replace "6.55:1 dark, 6.55:1 light" (TRI-187), which was wrong when it
   was written rather than drifted since: this rule, its 62%, and both palette
   primaries are byte-identical to the commit that added the claim. It was
   wrong because it was transcribed by hand -- a PASSING contrast sweep printed
   only a count and the worst reading on the dialog, and this button has never
   been the worst, so its own number was never on screen to copy. Do not
   hand-write the next one either: `TRI_ONLY=paused,paused-light node
   tools/verify-admin-circuit.mjs <dir> <baseUrl>` names this control and
   prints its ratio in both themes. (The light half needed a new probe: the
   Resume button only exists in the paused state, and every light-mode probe
   before it drove an outage, which renders no Resume button at all.) */
#components-reconnect-modal button[b-p6vgaxprdr] {
    border: 0;
    background-color: color-mix(in oklab, var(--mud-palette-primary) 62%, black);
    color: var(--mud-palette-primary-text);
    padding: 4px 24px;
    width: 9.5rem;
    white-space: nowrap;
    border-radius: 4px;
    margin: 0 auto !important;
    cursor: pointer;
}

/* Secondary: reloading is always available but is not the recommended move
   while Blazor is still rejoining on its own. Its boundary is mixed from the
   readable text colour instead of --mud-palette-lines-default: that general
   divider token is intentionally quiet, but at 1.05:1 against the light modal
   surface it did not identify this as a control. The shared button width keeps
   the longer secondary label from becoming a larger target than Resume. */
#components-reconnect-modal #components-reconnect-reload-button[b-p6vgaxprdr] {
    background-color: transparent;
    color: var(--mud-palette-text-primary);
    border: 1px solid color-mix(in oklab, var(--mud-palette-text-primary) 50%, var(--mud-palette-surface));
}

    #components-reconnect-modal #components-reconnect-reload-button:hover[b-p6vgaxprdr] {
        background-color: var(--mud-palette-action-default-hover);
    }

    /* Both stay on the darkened ramp. Reverting :active to the raw
       --mud-palette-primary would put the label back at 3.09:1 for as long as
       the operator is holding the button down. */
    #components-reconnect-modal button:hover[b-p6vgaxprdr] {
        background-color: color-mix(in oklab, var(--mud-palette-primary) 52%, black);
    }

    #components-reconnect-modal button:active[b-p6vgaxprdr] {
        background-color: color-mix(in oklab, var(--mud-palette-primary) 44%, black);
    }

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

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

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

@keyframes components-rejoining-animation-b-p6vgaxprdr {
    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/Infrastructure.razor.rz.scp.css */
/* ── Constellation Graph Container ── */
.infra-graph-container[b-1q93fuuk7i] {
    padding: 0;
    margin-bottom: 24px;
    overflow: hidden;
}

.infra-graph-header[b-1q93fuuk7i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
}

.infra-graph-title[b-1q93fuuk7i] {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.infra-svg-wrap[b-1q93fuuk7i] {
    position: relative;
    padding: 16px;
    background: radial-gradient(ellipse at 50% 40%, color-mix(in oklab, var(--mud-palette-primary) 6%, transparent) 0%, transparent 70%);
    overflow: hidden;
}

[b-1q93fuuk7i] .infra-svg {
    width: 100%;
    height: 420px;
    cursor: grab;
    display: block;
    touch-action: none;
    user-select: none;
}

[b-1q93fuuk7i] .infra-svg:active {
    cursor: grabbing;
}

/* ── Zoom Controls ── */
.infra-zoom-controls[b-1q93fuuk7i] {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
}

[b-1q93fuuk7i] .infra-zoom-btn {
    background: color-mix(in oklab, var(--mud-palette-surface) 85%, var(--mud-palette-lines-default)) !important;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent) !important;
    border-radius: var(--admin-radius-sm, 8px) !important;
    width: 32px !important;
    height: 32px !important;
    backdrop-filter: blur(8px);
    transition: background 0.15s ease, border-color 0.15s ease;
}

[b-1q93fuuk7i] .infra-zoom-btn:hover {
    background: color-mix(in oklab, var(--mud-palette-surface) 95%, var(--mud-palette-primary)) !important;
    border-color: color-mix(in oklab, var(--mud-palette-primary) 40%, transparent) !important;
}

/* ── Connection Lines ── */
[b-1q93fuuk7i] .infra-connection {
    stroke: color-mix(in oklab, var(--mud-palette-text-secondary) 25%, transparent);
    stroke-width: 1.5;
    stroke-linecap: round;
    transition: stroke 0.3s ease;
}

[b-1q93fuuk7i] .infra-connection--active {
    stroke: color-mix(in oklab, var(--mud-palette-primary) 40%, transparent);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    animation: flow-dash-b-1q93fuuk7i 1.2s linear infinite;
}

@keyframes flow-dash-b-1q93fuuk7i {
    to { stroke-dashoffset: -20; }
}

/* ── Nodes ── */
[b-1q93fuuk7i] .infra-node {
    transition: transform 0.3s ease;
}

[b-1q93fuuk7i] .infra-node-ring {
    fill: none;
    stroke-width: 2;
    transition: all 0.3s ease;
}

[b-1q93fuuk7i] .infra-node-core {
    transition: all 0.3s ease;
}

[b-1q93fuuk7i] .infra-node-label {
    fill: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-weight: 500;
    text-anchor: middle;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    user-select: none;
}

[b-1q93fuuk7i] .infra-node-badge {
    fill: var(--mud-palette-text-primary);
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    user-select: none;
}

/* Healthy */
[b-1q93fuuk7i] .infra-node--healthy .infra-node-ring {
    stroke: color-mix(in oklab, var(--mud-palette-primary) 70%, transparent);
    animation: node-pulse-b-1q93fuuk7i 3s ease-in-out infinite;
}

[b-1q93fuuk7i] .infra-node--healthy .infra-node-core {
    fill: color-mix(in oklab, var(--mud-palette-primary) 15%, var(--mud-palette-surface));
}

@keyframes node-pulse-b-1q93fuuk7i {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Warning */
[b-1q93fuuk7i] .infra-node--warning .infra-node-ring {
    stroke: color-mix(in oklab, var(--mud-palette-warning) 80%, transparent);
    animation: node-pulse-warn-b-1q93fuuk7i 2s ease-in-out infinite;
}

[b-1q93fuuk7i] .infra-node--warning .infra-node-core {
    fill: color-mix(in oklab, var(--mud-palette-warning) 12%, var(--mud-palette-surface));
}

@keyframes node-pulse-warn-b-1q93fuuk7i {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Error */
[b-1q93fuuk7i] .infra-node--error .infra-node-ring {
    stroke: color-mix(in oklab, var(--mud-palette-error) 80%, transparent);
    animation: node-pulse-err-b-1q93fuuk7i 1.5s ease-in-out infinite;
}

[b-1q93fuuk7i] .infra-node--error .infra-node-core {
    fill: color-mix(in oklab, var(--mud-palette-error) 12%, var(--mud-palette-surface));
}

@keyframes node-pulse-err-b-1q93fuuk7i {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Stopped */
[b-1q93fuuk7i] .infra-node--stopped .infra-node-ring {
    stroke: color-mix(in oklab, var(--mud-palette-text-secondary) 30%, transparent);
}

[b-1q93fuuk7i] .infra-node--stopped .infra-node-core {
    fill: color-mix(in oklab, var(--mud-palette-text-secondary) 8%, var(--mud-palette-surface));
}

/* Selected */
[b-1q93fuuk7i] .infra-node--selected .infra-node-ring {
    stroke-width: 3;
    opacity: 1 !important;
}

[b-1q93fuuk7i] .infra-node--selected .infra-node-label {
    fill: var(--mud-palette-text-primary);
    font-weight: 700;
}

/* Hover */
[b-1q93fuuk7i] .infra-node:hover .infra-node-ring {
    stroke-width: 3;
}

[b-1q93fuuk7i] .infra-node:hover .infra-node-label {
    fill: var(--mud-palette-text-primary);
}

/* ── Detail Panel ── */
.infra-detail-panel[b-1q93fuuk7i] {
    margin-top: 24px;
    margin-bottom: 24px;
    overflow: hidden;
}

.infra-detail-header[b-1q93fuuk7i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
}

.infra-detail-section[b-1q93fuuk7i] {
    margin-bottom: 14px;
}

.infra-detail-label[b-1q93fuuk7i] {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.infra-detail-value[b-1q93fuuk7i] {
    display: block;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
    line-height: 1.4;
}

/* ── Scale Events Timeline ── */
.infra-timeline-container[b-1q93fuuk7i] {
    margin-top: 24px;
    margin-bottom: 24px;
    overflow: hidden;
}

.infra-timeline-header[b-1q93fuuk7i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
}

.infra-timeline-body[b-1q93fuuk7i] {
    max-height: 320px;
    overflow-y: auto;
    padding: 8px 0;
}

.infra-timeline-empty[b-1q93fuuk7i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.infra-event[b-1q93fuuk7i] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    transition: background 0.15s ease;
    animation: event-slide-in-b-1q93fuuk7i 0.3s ease-out;
}

.infra-event:hover[b-1q93fuuk7i] {
    background: color-mix(in oklab, var(--mud-palette-surface) 60%, var(--mud-palette-lines-default));
}

@keyframes event-slide-in-b-1q93fuuk7i {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.infra-event-time[b-1q93fuuk7i] {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    min-width: 70px;
}

.infra-event-text[b-1q93fuuk7i] {
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}

.infra-event-id[b-1q93fuuk7i] {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* Event type accent borders */
.infra-event--replica_joined[b-1q93fuuk7i] {
    border-left: 3px solid var(--mud-palette-success);
}

.infra-event--replica_left[b-1q93fuuk7i] {
    border-left: 3px solid var(--mud-palette-warning);
}

.infra-event--replica_expired[b-1q93fuuk7i] {
    border-left: 3px solid var(--mud-palette-error);
}

/* ── Timeline scrollbar ── */
.infra-timeline-body[b-1q93fuuk7i]::-webkit-scrollbar {
    width: 6px;
}

.infra-timeline-body[b-1q93fuuk7i]::-webkit-scrollbar-track {
    background: transparent;
}

.infra-timeline-body[b-1q93fuuk7i]::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--mud-palette-text-secondary) 30%, transparent);
    border-radius: 3px;
}

.infra-timeline-body[b-1q93fuuk7i]::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklab, var(--mud-palette-text-secondary) 50%, transparent);
}
/* /Components/Pages/SocialContent/TemplateDialog.razor.rz.scp.css */
/*
   TemplateDialog.razor scoped styles. Drives the fullscreen WYSIWYG layout:
   left pane = phone-frame canvas, right pane = scrollable form controls.
   Both panes share the dialog's vertical space; form scrolls independently
   so the canvas is always visible.
*/

[b-950rndhv1x] .template-editor-dialog {
    /* Ensure the dialog backdrop's content area uses the full screen. */
}

[b-950rndhv1x] .template-editor-content {
    padding: 0 !important;
    /* Remove default MudDialog content padding so the editor layout owns
       its own spacing. */
}

.template-editor-titlebar[b-950rndhv1x] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.template-editor-layout[b-950rndhv1x] {
    display: grid;
    grid-template-columns: minmax(420px, 0.65fr) minmax(360px, 1fr);
    gap: 0;
    width: 100%;
    height: calc(100vh - 160px);
    /* 160px ~= titlebar (~64px) + dialog actions (~56px) + outer chrome
       padding. Keeps the editor pinned to the dialog's chrome rather
       than stretching off the screen. */
    min-height: 600px;
    background: rgba(0, 0, 0, 0.2);
}

@media (max-width: 1100px) {
    .template-editor-layout[b-950rndhv1x] {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }
}

.template-editor-canvas-pane[b-950rndhv1x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background:
        radial-gradient(
            ellipse at center top,
            rgba(108, 92, 231, 0.10),
            transparent 70%
        ),
        rgba(0, 0, 0, 0.25);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    overflow: auto;
}

.template-editor-canvas-host[b-950rndhv1x] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
}

.template-editor-canvas-hint[b-950rndhv1x] {
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    max-width: 420px;
}

.template-editor-controls-pane[b-950rndhv1x] {
    padding: 24px;
    overflow: auto;
}

[b-950rndhv1x] .template-editor-segment-tabs {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
}

[b-950rndhv1x] .template-editor-segment-tabs button {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 120ms ease, color 120ms ease;
}

[b-950rndhv1x] .template-editor-segment-tabs button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

[b-950rndhv1x] .template-editor-segment-tabs button.active {
    background: rgba(108, 92, 231, 0.20);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(108, 92, 231, 0.35);
}

/*
  View-mode toggle (Live | Real). Lives next to SegmentTabs on the
  canvas toolbar; styled identically so the two pill-shaped controls
  read as part of the same group. The Refresh button sits to the
  right and turns amber when stale (i.e. an edit happened since the
  last render) so operators know the on-screen frame is out of date.
*/
[b-950rndhv1x] .template-editor-canvas-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

[b-950rndhv1x] .template-editor-viewmode-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
}

[b-950rndhv1x] .template-editor-viewmode-toggle button {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 120ms ease, color 120ms ease;
}

[b-950rndhv1x] .template-editor-viewmode-toggle button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

[b-950rndhv1x] .template-editor-viewmode-toggle button.active {
    background: rgba(0, 229, 160, 0.18);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 229, 160, 0.35);
}

[b-950rndhv1x] .template-editor-viewmode-refresh {
    margin-left: 8px;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
}

[b-950rndhv1x] .template-editor-viewmode-refresh:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[b-950rndhv1x] .template-editor-viewmode-refresh.stale {
    background: rgba(253, 203, 110, 0.16) !important;
    border-color: rgba(253, 203, 110, 0.45) !important;
    color: #fdcb6e !important;
}

/*
  Real-mode preview image. Same aspect ratio + width as PhoneFrame's
  CSS-scaled stage so the operator perceives no jump between Live and
  Real. The wrapper handles the 9:16 aspect; the image fills it.
*/
[b-950rndhv1x] .template-editor-real-preview {
    aspect-ratio: 9 / 16;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    background: rgba(0, 0, 0, 0.6);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-950rndhv1x] .template-editor-real-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

[b-950rndhv1x] .template-editor-real-preview .placeholder {
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
    text-align: center;
    padding: 16px;
    line-height: 1.4;
}

[b-950rndhv1x] .template-editor-real-preview.is-stale::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        transparent 47%,
        rgba(253, 203, 110, 0.10) 50%,
        transparent 53%
    );
    background-size: 24px 24px;
}

[b-950rndhv1x] .template-editor-panel {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    margin-bottom: 8px;
}

[b-950rndhv1x] .template-editor-panel .mud-expand-panel-header {
    font-weight: 600;
}
/* /Components/Pages/SocialContent/TemplateEditor/PhoneFrame.razor.rz.scp.css */
/*
   PhoneFrame.razor scoped styles. Blazor's CSS isolation appends a
   per-component attribute (b-xxxxxxx) to every selector so these rules
   never leak.

   The render strategy:
     - .pf-wrapper sets the visible CSS width and applies aspect-ratio so
       the box is exactly 9:16.
     - .pf-stage is a fixed 1080x1920 logical canvas. CSS transform: scale
       maps it onto the wrapper width.
     - All children of .pf-stage are absolutely positioned in source-frame
       pixels -- the same coordinate space the renderer uses.
*/

.pf-wrapper[b-z6wzy9jgk4] {
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;
}

.pf-stage[b-z6wzy9jgk4] {
    width: 1080px;
    height: 1920px;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    /*
        Scale must be a unitless number for transform: scale(), so the
        wrapper passes --pf-scale (e.g. 0.333) computed in C# from the
        wrapper width / 1080. CSS calc(<length> / <number>) produces a
        length, not a number, which silently disables the transform --
        precomputing in C# avoids that gotcha.
    */
    transform: scale(var(--pf-scale, 0.333));
    font-family: 'Inter', 'Montserrat', system-ui, -apple-system, sans-serif;
    color: #fff;
    user-select: none;
}

.pf-element[b-z6wzy9jgk4] {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    word-break: break-word;
    /*
        Soft hover affordance: every element gets a faint outline on
        hover so operators can see what's clickable. The actual selected
        element gets a stronger outline below.
    */
    transition: box-shadow 0.12s ease, outline-color 0.12s ease;
    outline: 2px solid transparent;
    outline-offset: 0px;
}

.pf-element:hover[b-z6wzy9jgk4] {
    outline-color: rgba(0, 229, 160, 0.35);
    cursor: pointer;
}

.pf-element.pf-selected[b-z6wzy9jgk4] {
    /*
        The accent-green outline is the operator's primary feedback that
        an element is the inspector's current target. Box-shadow rather
        than outline so it sits on top of the next element's outline
        when boxes happen to overlap.
    */
    outline-color: #00E5A0;
    box-shadow: 0 0 0 2px rgba(0, 229, 160, 0.35), 0 8px 28px rgba(0, 0, 0, 0.45);
    z-index: 5;
    /* Allow the 8 resize handles (children with negative top/left) to
       render outside the element's content box without being clipped.
       Trade-off: long unwrapped text in a selected element may briefly
       extend past the box edge. Acceptable in editor mode where the
       operator is actively repositioning the element. */
    overflow: visible;
}

.pf-element.pf-dragging[b-z6wzy9jgk4],
.pf-element.pf-resizing[b-z6wzy9jgk4] {
    /* Slight lift while a pointer gesture is active so the element feels
       picked up. JS adds/removes the class around pointerdown/pointerup. */
    box-shadow: 0 0 0 2px #00E5A0, 0 18px 48px rgba(0, 0, 0, 0.55);
    z-index: 6;
    opacity: 0.96;
}

/* ────────────────────────────────────────────────────────────────────
   Resize handles. Eight directional grips appear on the selected
   element. They live in source-frame px so they scale alongside the
   stage; size is chosen so the rendered CSS click target is ~12 CSS
   pixels at the default 360-CSS-px wrapper width.
   ──────────────────────────────────────────────────────────────────── */

.pf-handle[b-z6wzy9jgk4] {
    position: absolute;
    width: 36px;
    height: 36px;
    background: #00E5A0;
    border: 6px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
    z-index: 20;
    /* Don't block touch scrolling on tablets; pointerdown is intercepted
       by JS before the browser starts a pan/zoom gesture. */
    touch-action: none;
}

.pf-handle-nw[b-z6wzy9jgk4] { top: -18px; left: -18px;       cursor: nwse-resize; }
.pf-handle-n[b-z6wzy9jgk4]  { top: -18px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.pf-handle-ne[b-z6wzy9jgk4] { top: -18px; right: -18px;      cursor: nesw-resize; }
.pf-handle-e[b-z6wzy9jgk4]  { top: 50%;   right: -18px; transform: translateY(-50%); cursor: ew-resize; }
.pf-handle-se[b-z6wzy9jgk4] { bottom: -18px; right: -18px;   cursor: nwse-resize; }
.pf-handle-s[b-z6wzy9jgk4]  { bottom: -18px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.pf-handle-sw[b-z6wzy9jgk4] { bottom: -18px; left: -18px;    cursor: nesw-resize; }
.pf-handle-w[b-z6wzy9jgk4]  { top: 50%;   left: -18px; transform: translateY(-50%); cursor: ew-resize; }

.pf-text-centered[b-z6wzy9jgk4],
.pf-text-top[b-z6wzy9jgk4] {
    overflow: hidden;
}

/* Category badge: rounded pill with semi-transparent backdrop. */
.pf-badge[b-z6wzy9jgk4] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    color: #fff;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.04em;
}

.pf-badge > span[b-z6wzy9jgk4] {
    position: relative;
    z-index: 2;
}

.pf-badge-bg[b-z6wzy9jgk4] {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    z-index: 1;
}

/* Question image placeholder. Real image lives only in composed videos --
   in the editor we draw a soft tile with a subtle dashed border so
   operators see WHERE the image will appear without having to upload one. */
.pf-image[b-z6wzy9jgk4] {
    border-radius: 32px;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.04) 24px,
            rgba(255, 255, 255, 0.07) 24px,
            rgba(255, 255, 255, 0.07) 48px
        );
    border: 2px dashed rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pf-image-label[b-z6wzy9jgk4] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Answer strip: 4 vertically-stacked boxes inside a single layout box.
   Children use flex column with equal height + gap so the renderer's
   "4 boxes of height 100 with 16px gap" intent translates faithfully. */
.pf-answer-strip[b-z6wzy9jgk4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pf-answer-box[b-z6wzy9jgk4] {
    flex: 1 1 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: 0 30px;
    position: relative;
}

.pf-answer-check[b-z6wzy9jgk4] {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 48px;
    font-weight: 700;
}

/* Countdown timer is a circle with a thick accent-colored ring. The radius
   is implied by the box dimensions; we use border-radius:50% to keep it
   round even when the user resizes asymmetrically (Phase 3 enforces a
   square at the resize layer). */
.pf-timer[b-z6wzy9jgk4] {
    box-sizing: border-box;
}

/* Subtle phone notch overlay so the canvas reads as a player without
   adding a heavy bezel that competes with the layout being edited. */
.pf-chrome-notch[b-z6wzy9jgk4] {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 32px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 18px;
    z-index: 10;
    pointer-events: none;
    /* Notch is in CSS-px space (overlay sits OUTSIDE the scaled stage), so
       it does NOT scale with the stage. Anchored to the wrapper. */
}
/* /Components/Pages/SocialContent/TemplateEditor/PropertyInspector.razor.rz.scp.css */
.property-inspector[b-f6lh5nkseg] {
    background: rgba(0, 229, 160, 0.06);
    border: 1px solid rgba(0, 229, 160, 0.25);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.property-inspector-header[b-f6lh5nkseg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.property-inspector-title[b-f6lh5nkseg] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #00E5A0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.property-inspector-actions[b-f6lh5nkseg] {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}
/* /Components/Pages/SubcategorySuggestions.razor.rz.scp.css */
.subcategory-suggestion-scope[b-t5yho5oft0] {
    display: grid;
    grid-template-columns: minmax(160px, 0.6fr) minmax(320px, 2fr) minmax(140px, 0.5fr);
    gap: var(--admin-section-gap);
    align-items: end;
}

.subcategory-suggestion-options[b-t5yho5oft0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.subcategory-suggestion-console[b-t5yho5oft0] {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(340px, 0.85fr);
    gap: var(--admin-section-gap);
    align-items: start;
}

.subcategory-suggestion-list[b-t5yho5oft0],
.subcategory-suggestion-detail[b-t5yho5oft0] {
    min-width: 0;
}

.subcategory-suggestion-detail[b-t5yho5oft0] {
    position: sticky;
    top: var(--admin-section-gap);
    max-height: calc(100vh - 48px);
    overflow: auto;
}

.subcategory-suggestion-list-head[b-t5yho5oft0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--admin-section-gap);
    margin-bottom: var(--admin-section-gap);
}

.subcategory-suggestion-bulk-actions[b-t5yho5oft0] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 8px;
}

.subcategory-suggestion-bulk-actions .mud-input-control[b-t5yho5oft0] {
    width: 150px;
    margin-bottom: 0;
}

.subcategory-suggestion-id[b-t5yho5oft0] {
    display: block;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    margin-top: 2px;
}

[b-t5yho5oft0] .subcategory-suggestion-row--active td {
    background: color-mix(in oklab, var(--mud-palette-primary) 9%, transparent);
}

.subcategory-suggestion-score-grid[b-t5yho5oft0] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.subcategory-suggestion-score[b-t5yho5oft0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 10px;
    border-radius: var(--admin-radius-sm);
    background: color-mix(in oklab, var(--mud-palette-surface) 65%, var(--mud-palette-background));
}

.subcategory-suggestion-score span[b-t5yho5oft0] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    line-height: 1.2;
}

.subcategory-suggestion-score strong[b-t5yho5oft0] {
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
}

.subcategory-suggestion-angle-list[b-t5yho5oft0] {
    margin: 8px 0 0;
    padding-left: 20px;
    color: var(--mud-palette-text-secondary);
}

.subcategory-suggestion-angle-list li + li[b-t5yho5oft0] {
    margin-top: 6px;
}

.subcategory-suggestion-detail-actions[b-t5yho5oft0] {
    position: sticky;
    bottom: -20px;
    margin: 8px -20px -20px;
}

@media (max-width: 1180px) {
    .subcategory-suggestion-console[b-t5yho5oft0] {
        grid-template-columns: 1fr;
    }

    .subcategory-suggestion-detail[b-t5yho5oft0] {
        position: static;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .subcategory-suggestion-scope[b-t5yho5oft0] {
        grid-template-columns: 1fr;
    }

    .subcategory-suggestion-list-head[b-t5yho5oft0] {
        flex-direction: column;
    }

    .subcategory-suggestion-bulk-actions[b-t5yho5oft0] {
        justify-content: flex-start;
        width: 100%;
    }

    .subcategory-suggestion-score-grid[b-t5yho5oft0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}