/* /Components/Layout/LoginLayout.razor.rz.scp.css */
.login-page[b-tkoe19dvca] {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 16px;
    background: var(--sidebar-bg);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.shell[b-81wntp0ukn] {
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.topbar[b-81wntp0ukn] {
    display: none;
}

/*
 * The menu hides itself to a slim strip (menu button + status dot) and slides out over the page on hover,
 * on the menu button (touch), or on keyboard focus. Pinned (html[data-menu-pinned], remembered per browser),
 * it stays open beside the page instead.
 */
.sidebar[b-81wntp0ukn] {
    position: relative;
    z-index: 60;
    flex: 0 0 44px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    box-shadow: var(--sidebar-edge);
}

.rail[b-81wntp0ukn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 10px 0 14px;
}

.rail-btn[b-81wntp0ukn] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--nav-border);
    background: var(--nav-bg);
    color: var(--nav-text);
    cursor: pointer;
}

.rail-btn:hover[b-81wntp0ukn] {
    background: var(--nav-hover);
}

.rail-btn svg[b-81wntp0ukn] {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.rail-status[b-81wntp0ukn] {
    margin-top: auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pill-neutral);
}

.rail-status.ok[b-81wntp0ukn] { background: var(--ok); }
.rail-status.bad[b-81wntp0ukn] { background: var(--bad); }
.rail-status.demo[b-81wntp0ukn] { background: var(--accent); }

.menu-panel[b-81wntp0ukn] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 240px;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 36px 16px 16px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    box-shadow: 4px 0 18px rgba(0, 0, 0, .28);
    transform: translateX(-100%);
    visibility: hidden;
    /* Closing is immediate; opening waits a moment so brushing past the edge doesn't open it. */
    transition: transform .14s ease, visibility 0s linear .14s;
}

.sidebar:hover .menu-panel[b-81wntp0ukn],
.sidebar.open .menu-panel[b-81wntp0ukn],
.sidebar:has(:focus-visible) .menu-panel[b-81wntp0ukn] {
    transform: none;
    visibility: visible;
    transition: transform .16s ease .12s, visibility 0s linear .12s;
}

html[data-menu-pinned] .sidebar[b-81wntp0ukn] {
    flex-basis: 240px;
}

html[data-menu-pinned] .rail[b-81wntp0ukn] {
    display: none;
}

html[data-menu-pinned] .menu-panel[b-81wntp0ukn] {
    transform: none;
    visibility: visible;
    box-shadow: none;
    transition: none;
}

/* The large faint AG mark in the corner, as in archgrille.com's footer. */
.menu-panel[b-81wntp0ukn]::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -70px;
    bottom: -40px;
    width: 300px;
    aspect-ratio: 552 / 467;
    background: var(--logo);
    opacity: var(--watermark-opacity);
    -webkit-mask: url("img/ag-logo.png") center / contain no-repeat;
    mask: url("img/ag-logo.png") center / contain no-repeat;
    pointer-events: none;
}

.pin[b-81wntp0ukn] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    background: none;
    color: var(--sidebar-muted);
    cursor: pointer;
}

.pin:hover[b-81wntp0ukn] {
    border-color: var(--nav-border);
    color: var(--sidebar-text);
}

.pin svg[b-81wntp0ukn] {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transform: rotate(45deg);
    transition: transform .15s;
}

.pin.pinned[b-81wntp0ukn] {
    color: var(--sidebar-text);
}

.pin.pinned svg[b-81wntp0ukn] {
    transform: none;
}


.brand[b-81wntp0ukn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* The AG logo is drawn as a mask so each theme can color it. */
.ag-mark[b-81wntp0ukn] {
    display: block;
    width: 96px;
    aspect-ratio: 552 / 467;
    background: var(--logo);
    -webkit-mask: url("img/ag-logo.png") center / contain no-repeat;
    mask: url("img/ag-logo.png") center / contain no-repeat;
}

.app-name[b-81wntp0ukn] {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .14em;
    text-align: center;
    text-transform: uppercase;
}

nav[b-81wntp0ukn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

nav[b-81wntp0ukn]  .nav-btn {
    display: block;
    padding: 14px 10px;
    background: var(--nav-bg);
    border: 1px solid var(--nav-border);
    color: var(--nav-text);
    font-size: 1.9rem;
    font-weight: var(--nav-weight);
    letter-spacing: var(--nav-spacing);
    text-align: center;
    text-decoration: none;
    text-transform: var(--nav-transform);
}

nav[b-81wntp0ukn]  .nav-btn:hover {
    background: var(--nav-hover);
}

nav[b-81wntp0ukn]  .nav-btn.active {
    background: var(--nav-active-bg);
    color: var(--nav-active-text);
    border-color: var(--nav-active-border);
}

nav[b-81wntp0ukn]  .nav-settings {
    margin-top: 12px;
    font-size: 1.25rem;
}

nav[b-81wntp0ukn]  .nav-small {
    font-size: 1.25rem;
}

nav[b-81wntp0ukn]  .nav-help {
    margin-top: 12px;
}

.sidebar-status[b-81wntp0ukn] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: .85rem;
}

.pill[b-81wntp0ukn] {
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: var(--pill-radius);
    background: var(--pill-neutral);
    color: var(--text);
    font-weight: 600;
}

.pill.ok[b-81wntp0ukn] { background: var(--ok); color: #fff; }
.pill.bad[b-81wntp0ukn] { background: var(--bad); color: #fff; }
.pill.demo[b-81wntp0ukn] { background: var(--accent); color: var(--accent-text); }

.source[b-81wntp0ukn] {
    color: var(--sidebar-muted);
    overflow-wrap: anywhere;
}

.content[b-81wntp0ukn] {
    position: relative;
    flex: 1;
    min-width: 0;
    background: var(--bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.busy-banner[b-81wntp0ukn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--banner-bg);
    border-bottom: 1px solid var(--banner-border);
    font-weight: 600;
}

.spinner[b-81wntp0ukn] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--warn);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-81wntp0ukn 0.8s linear infinite;
}

@keyframes spin-b-81wntp0ukn {
    to { transform: rotate(360deg); }
}

.notices[b-81wntp0ukn] {
    position: fixed;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 440px;
    z-index: 900;
}

.notice[b-81wntp0ukn] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    background: var(--surface);
    color: var(--text);
    border-left: 5px solid var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.notice.warning[b-81wntp0ukn] { border-left-color: var(--warn); }
.notice.error[b-81wntp0ukn] { border-left-color: var(--bad); }

.notice .count[b-81wntp0ukn] {
    align-self: center;
    padding: 0 6px;
    border-radius: var(--pill-radius);
    background: var(--pill-neutral);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.notice .dismiss[b-81wntp0ukn] {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

/* Phones: app name and status across the top, the menu as a tab bar along the bottom. */
@media (max-width: 700px) {
    .shell[b-81wntp0ukn] {
        flex-direction: column;
    }

    .topbar[b-81wntp0ukn] {
        order: 0;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: var(--sidebar-bg);
        color: var(--sidebar-text);
        box-shadow: var(--sidebar-edge), 0 1px 0 rgba(0, 0, 0, .12);
    }

    .topbar .ag-mark[b-81wntp0ukn] {
        flex: 0 0 auto;
        width: 30px;
    }

    .topbar-title[b-81wntp0ukn] {
        min-width: 0;
        overflow: hidden;
        font-size: .8rem;
        font-weight: 600;
        letter-spacing: .06em;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .topbar .pill[b-81wntp0ukn] {
        margin-left: auto;
        align-self: center;
        font-size: .75rem;
        white-space: nowrap;
    }

    .content[b-81wntp0ukn] {
        order: 1;
    }

    .sidebar[b-81wntp0ukn],
    html[data-menu-pinned] .sidebar[b-81wntp0ukn] {
        order: 2;
        flex: 0 0 auto;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .15);
    }

    /* The menu is always the tab bar here: no strip, slide-out or pin. */
    .menu-panel[b-81wntp0ukn],
    .sidebar:hover .menu-panel[b-81wntp0ukn],
    html[data-menu-pinned] .menu-panel[b-81wntp0ukn] {
        position: static;
        width: auto;
        flex-direction: row;
        gap: 0;
        padding: 0 0 env(safe-area-inset-bottom);
        overflow: visible;
        transform: none;
        visibility: visible;
        box-shadow: none;
        transition: none;
    }

    .rail[b-81wntp0ukn],
    .pin[b-81wntp0ukn],
    .menu-panel[b-81wntp0ukn]::after,
    .brand[b-81wntp0ukn],
    .sidebar-status[b-81wntp0ukn] {
        display: none;
    }

    nav[b-81wntp0ukn] {
        flex: 1;
        flex-direction: row;
        gap: 0;
        margin: 0;
    }

    nav[b-81wntp0ukn]  .nav-btn,
    nav[b-81wntp0ukn]  .nav-settings,
    nav[b-81wntp0ukn]  .nav-small,
    nav[b-81wntp0ukn]  .nav-help {
        flex: 1;
        margin: 0;
        padding: 14px 4px;
        border: 0;
        font-size: 1rem;
    }

    .notices[b-81wntp0ukn] {
        left: 8px;
        right: 8px;
        bottom: 60px;
        max-width: none;
    }
}

#blazor-error-ui[b-81wntp0ukn] {
    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-81wntp0ukn] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-rthef1o3v0],
.components-reconnect-repeated-attempt-visible[b-rthef1o3v0],
.components-reconnect-failed-visible[b-rthef1o3v0],
.components-pause-visible[b-rthef1o3v0],
.components-resume-failed-visible[b-rthef1o3v0],
.components-rejoining-animation[b-rthef1o3v0] {
    display: none;
}

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


#components-reconnect-modal[b-rthef1o3v0] {
    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-rthef1o3v0 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-rthef1o3v0 {
    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/Bingo.razor.rz.scp.css */
.board-host[b-xqjtkobixu] {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: 12px 20px 0;
    overflow: auto;
}

.board-host[data-fit="true"][b-xqjtkobixu] {
    overflow: hidden;
}

/* Cards fill each line left to right, then the next line down, so a sorted board reads like text. */
.board-rows[b-xqjtkobixu] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    column-gap: 16px;
}

.board-host[data-fit="true"] .board-rows[b-xqjtkobixu] {
    overflow: hidden;
}

.empty[b-xqjtkobixu] {
    padding: 40px 8px;
    font-size: 1.15rem;
}

.empty a[b-xqjtkobixu] {
    color: var(--link);
    font-weight: 600;
}

.info-table[b-xqjtkobixu] {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0;
    font-size: .92rem;
}

.info-table th[b-xqjtkobixu],
.info-table td[b-xqjtkobixu] {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.mono[b-xqjtkobixu] {
    font-family: Consolas, "Courier New", monospace;
}

@media (max-width: 700px) {
    .board-host[b-xqjtkobixu] {
        padding: 4px 8px 0;
    }

    .board-host[data-fit="true"][b-xqjtkobixu] {
        overflow: auto;
    }

    .fit-toggle[b-xqjtkobixu] {
        display: none;
    }
}

.sort[b-xqjtkobixu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sort-select[b-xqjtkobixu] {
    min-height: 38px;
    padding: 6px 8px;
    border: 1px solid var(--border-strong);
    background: var(--field-bg);
    color: var(--text);
    font: inherit;
}

.offline-toggle.active[b-xqjtkobixu] {
    background: var(--accent);
    border-color: var(--accent-border);
    color: var(--accent-text);
}
/* /Components/Pages/Devices.razor.rz.scp.css */
.devices-host[b-eb1te47qkd] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 20px 20px;
}

.search[b-eb1te47qkd],
.filter[b-eb1te47qkd] {
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    background: var(--field-bg);
    color: var(--text);
    font: inherit;
}

.search[b-eb1te47qkd] {
    width: 260px;
}

.result[b-eb1te47qkd] {
    margin: 0;
    padding: 8px 12px;
    border-left: 4px solid var(--accent);
    background: var(--surface);
}

.summary[b-eb1te47qkd] {
    margin: 0;
    color: var(--text-muted);
}

.gateway .mono[b-eb1te47qkd] {
    font-size: .85rem;
}

.table-wrap[b-eb1te47qkd] {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
}

.devices[b-eb1te47qkd] {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.devices th[b-eb1te47qkd],
.devices td[b-eb1te47qkd] {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

.devices th[b-eb1te47qkd] {
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.devices tbody tr:hover[b-eb1te47qkd] {
    background: var(--hover);
}

.devices tr.offline td[b-eb1te47qkd] {
    color: var(--text-muted);
}

.name[b-eb1te47qkd] {
    font-weight: 700;
}

.mono[b-eb1te47qkd] {
    font-family: Consolas, "Courier New", monospace;
}

.status[b-eb1te47qkd] {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--pill-neutral);
}

.status.online[b-eb1te47qkd] { background: var(--ok); }
.status.offline[b-eb1te47qkd] { background: var(--bad); }
.status.battery[b-eb1te47qkd] { background: var(--warn); }

.badge-new[b-eb1te47qkd] {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: var(--pill-radius);
    background: var(--accent);
    color: var(--accent-text);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.badge-hidden[b-eb1te47qkd] {
    margin-left: 6px;
    padding: 0 5px;
    border: 1px solid var(--border-strong);
    border-radius: var(--pill-radius);
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.devices tr.hidden-device td[b-eb1te47qkd] {
    color: var(--text-muted);
}

/* Under the alias: the device's own name, then its notes on one line (the full text is in the tooltip). */
.device-name[b-eb1te47qkd],
.notes[b-eb1te47qkd] {
    display: block;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 400;
}

.notes[b-eb1te47qkd] {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
}

.edit-field[b-eb1te47qkd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 1rem;
    font-weight: 600;
}

.edit-field .hint[b-eb1te47qkd] {
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 400;
}

.edit-field textarea[b-eb1te47qkd] {
    resize: vertical;
}

.edit-check[b-eb1te47qkd] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
}

.lights[b-eb1te47qkd] {
    display: inline-flex;
    gap: 4px;
}

.dot[b-eb1te47qkd] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--off);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}

.dot.on.c-red[b-eb1te47qkd] { background: #ff0000; }
.dot.on.c-yellow[b-eb1te47qkd] { background: #ffff00; }
.dot.on.c-green[b-eb1te47qkd] { background: #00ff00; }
.dot.on.c-blue[b-eb1te47qkd] { background: #3d6bff; }
.dot.on.c-white[b-eb1te47qkd] { background: #ffffff; }
.dot.on.c-orange[b-eb1te47qkd] { background: #ffa500; }

.actions[b-eb1te47qkd] {
    display: inline-flex;
    gap: 6px;
}

.btn.small[b-eb1te47qkd] {
    min-height: 30px;
    padding: 4px 10px;
    font-size: .85rem;
}

.empty[b-eb1te47qkd] {
    margin: 0;
    padding: 20px;
    color: var(--text-muted);
}

@media (max-width: 700px) {
    .devices-host[b-eb1te47qkd] {
        padding: 0 8px 12px;
    }

    .search[b-eb1te47qkd] {
        width: 100%;
    }
}
/* /Components/Pages/Help.razor.rz.scp.css */
.help-host[b-sejd1ax2j5] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0 20px 24px;
}

.help[b-sejd1ax2j5] {
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    line-height: 1.5;
}

.contents[b-sejd1ax2j5] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
}

section[b-sejd1ax2j5] {
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    scroll-margin-top: 12px;
}

h2[b-sejd1ax2j5] {
    margin: 0 0 8px;
    font-size: 1.3rem;
    font-weight: var(--heading-weight);
    text-transform: var(--heading-transform);
    letter-spacing: var(--heading-spacing);
}

h3[b-sejd1ax2j5] {
    margin: 12px 0 6px;
    font-size: 1.05rem;
}

p[b-sejd1ax2j5],
ul[b-sejd1ax2j5],
dl[b-sejd1ax2j5] {
    margin: 0 0 8px;
}

p:last-child[b-sejd1ax2j5],
ul:last-child[b-sejd1ax2j5],
dl:last-child[b-sejd1ax2j5] {
    margin-bottom: 0;
}

ul[b-sejd1ax2j5] {
    padding-left: 20px;
}

li + li[b-sejd1ax2j5] {
    margin-top: 4px;
}

dl[b-sejd1ax2j5] {
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    gap: 6px 16px;
}

dt[b-sejd1ax2j5] {
    font-weight: 700;
}

dd[b-sejd1ax2j5] {
    margin: 0;
}

.needs[b-sejd1ax2j5] {
    margin-left: 6px;
    padding: 1px 6px;
    vertical-align: middle;
    border: 1px solid var(--border-strong);
    border-radius: var(--pill-radius);
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.tip[b-sejd1ax2j5] {
    color: var(--text-muted);
    font-size: .9rem;
}

.mono[b-sejd1ax2j5] {
    font-family: Consolas, "Courier New", monospace;
}

@media (max-width: 700px) {
    .help-host[b-sejd1ax2j5] {
        padding: 0 8px 12px;
    }

    dl[b-sejd1ax2j5] {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    dd[b-sejd1ax2j5] {
        margin-bottom: 8px;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
.login-card[b-t4xqu47fp9] {
    width: min(400px, 100%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 28px 22px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.brand[b-t4xqu47fp9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ag-mark[b-t4xqu47fp9] {
    display: block;
    width: 52px;
    aspect-ratio: 552 / 467;
    background: var(--accent);
    -webkit-mask: url("img/ag-logo.png") center / contain no-repeat;
    mask: url("img/ag-logo.png") center / contain no-repeat;
}

.app-name[b-t4xqu47fp9] {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

h1[b-t4xqu47fp9] {
    margin: 6px 0 0;
    font-size: 1.5rem;
    font-weight: var(--heading-weight);
    letter-spacing: var(--heading-spacing);
    text-transform: var(--heading-transform);
}

.intro[b-t4xqu47fp9] {
    margin: 0;
    color: var(--text-muted);
}

[b-t4xqu47fp9] .login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-t4xqu47fp9] .login-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-weight: 600;
}

[b-t4xqu47fp9] .login-form .error-text {
    margin: 0;
    font-size: .9rem;
}

[b-t4xqu47fp9] .login-form .btn {
    margin-top: 6px;
}

.skip-link[b-t4xqu47fp9] {
    align-self: center;
    color: var(--link);
    font-size: .9rem;
}
/* /Components/Pages/Map.razor.rz.scp.css */
.map-layout[b-xdy1rsef0v] {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 12px;
    padding: 0 16px 16px;
}

.device-list[b-xdy1rsef0v] {
    flex: 0 0 230px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 10px;
}

.device-list-head[b-xdy1rsef0v] {
    display: flex;
    align-items: flex-start;
}

.device-list-head .close[b-xdy1rsef0v] {
    margin-left: auto;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.btn.active[b-xdy1rsef0v] {
    background: var(--accent);
    border-color: var(--accent-border);
    color: var(--accent-text);
}

.device-list h2[b-xdy1rsef0v] {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: var(--heading-weight);
    text-transform: var(--heading-transform);
    letter-spacing: var(--heading-spacing);
}

.device-list ul[b-xdy1rsef0v] {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.device-list li[b-xdy1rsef0v] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    padding: 6px 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    cursor: grab;
    font-size: .9rem;
}

.device-list li .mono[b-xdy1rsef0v] {
    width: 100%;
    color: var(--text-muted);
    font-size: .8rem;
}

.hint[b-xdy1rsef0v] {
    margin-top: auto;
    font-size: .82rem;
    color: var(--text-muted);
}

.map-host[b-xdy1rsef0v] {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.map-canvas[b-xdy1rsef0v] {
    position: relative;
    transform-origin: 0 0;
    background-color: var(--map-bg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: 1px solid var(--border-strong);
}

.no-image[b-xdy1rsef0v] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 28px;
    color: var(--text-muted);
}

.mono[b-xdy1rsef0v] {
    font-family: Consolas, "Courier New", monospace;
}

.pad[b-xdy1rsef0v] {
    padding: 0 20px;
}

/* Phones: no drag-and-drop list (touch screens can't drag it); the map fills the height and scrolls sideways. */
@media (max-width: 700px) {
    .unplaced-toggle[b-xdy1rsef0v],
    .device-list[b-xdy1rsef0v],
    .map-file[b-xdy1rsef0v] {
        display: none;
    }

    .map-layout[b-xdy1rsef0v] {
        padding: 0 8px 8px;
    }

    .map-host[b-xdy1rsef0v] {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-grid[b-ql0t2dj5f5] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    align-content: start;
    gap: 16px;
    padding: 0 20px 20px;
}

.group[b-ql0t2dj5f5] {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.group h2[b-ql0t2dj5f5] {
    margin: 0;
    font-size: 1.3rem;
    font-weight: var(--heading-weight);
    text-transform: var(--heading-transform);
    letter-spacing: var(--heading-spacing);
}

dl[b-ql0t2dj5f5] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    margin: 0;
}

dt[b-ql0t2dj5f5] {
    font-weight: 600;
}

dd[b-ql0t2dj5f5] {
    margin: 0;
    overflow-wrap: anywhere;
}

.actions[b-ql0t2dj5f5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.checks[b-ql0t2dj5f5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inline[b-ql0t2dj5f5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 26px;
}

.file-label[b-ql0t2dj5f5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 600;
}

.file-label.disabled[b-ql0t2dj5f5] {
    color: var(--text-disabled);
}

.note[b-ql0t2dj5f5] {
    margin: 0;
    font-size: .85rem;
    color: var(--text-muted);
}

.mono[b-ql0t2dj5f5] {
    font-family: Consolas, "Courier New", monospace;
}

.small[b-ql0t2dj5f5] {
    font-size: .8rem;
    font-weight: 400;
}

.group h3[b-ql0t2dj5f5] {
    margin: 4px 0 0;
    font-size: 1.05rem;
}

.env[b-ql0t2dj5f5] {
    margin: 0;
    padding: 10px 12px;
    background: var(--code-bg);
    color: var(--code-text);
    font: .92rem Consolas, "Courier New", monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.penguins[b-ql0t2dj5f5] {
    border-collapse: collapse;
    width: 100%;
    font-size: .9rem;
}

.penguins th[b-ql0t2dj5f5],
.penguins td[b-ql0t2dj5f5] {
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.themes[b-ql0t2dj5f5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.theme-card[b-ql0t2dj5f5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.theme-card:hover:not(:disabled)[b-ql0t2dj5f5] {
    border-color: var(--border-strong);
}

.theme-card.selected[b-ql0t2dj5f5] {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
    border-color: var(--accent);
}

.theme-card:disabled[b-ql0t2dj5f5] {
    cursor: default;
    opacity: .7;
}

/* A miniature of the app in the theme's colors: menu, two bingo rows and a button. */
.theme-preview[b-ql0t2dj5f5] {
    display: flex;
    height: 72px;
    border: 1px solid rgba(0, 0, 0, .15);
    background: var(--p-page);
}

.p-side[b-ql0t2dj5f5] {
    flex: 0 0 28%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 5px;
    background: var(--p-side);
    border-right: 1px solid rgba(0, 0, 0, .1);
}

.p-nav[b-ql0t2dj5f5] {
    height: 7px;
    background: var(--p-accent);
    opacity: .85;
}

.p-nav + .p-nav[b-ql0t2dj5f5] {
    opacity: .3;
}

.p-page[b-ql0t2dj5f5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 7px;
}

.p-card[b-ql0t2dj5f5] {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--p-card);
    border: 1px solid rgba(0, 0, 0, .1);
}

.p-card i[b-ql0t2dj5f5] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6f7682;
}

.p-card i.r[b-ql0t2dj5f5] { background: #ff0000; }
.p-card i.y[b-ql0t2dj5f5] { background: #ffff00; }
.p-card i.g[b-ql0t2dj5f5] { background: #00ff00; }

.p-btn[b-ql0t2dj5f5] {
    align-self: flex-end;
    width: 32px;
    height: 8px;
    background: var(--p-accent);
}

.theme-name[b-ql0t2dj5f5] {
    font-weight: 600;
}

.theme-desc[b-ql0t2dj5f5] {
    font-size: .8rem;
    color: var(--text-muted);
}

@media (max-width: 700px) {
    .settings-grid[b-ql0t2dj5f5] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 0 8px 12px;
    }

    .group[b-ql0t2dj5f5] {
        padding: 12px;
    }
}
/* /Components/Shared/AccountBox.razor.rz.scp.css */
.account[b-sdrc5jq9ln] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.account-name[b-sdrc5jq9ln] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.account-form[b-sdrc5jq9ln] {
    margin: 0;
}

.account-btn[b-sdrc5jq9ln] {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--nav-border);
    background: var(--nav-bg);
    color: var(--nav-text);
    font: inherit;
    font-weight: 600;
    letter-spacing: var(--nav-spacing);
    text-decoration: none;
    text-transform: var(--nav-transform);
    cursor: pointer;
}

.account-btn:hover[b-sdrc5jq9ln] {
    background: var(--nav-hover);
}

.account.compact[b-sdrc5jq9ln] {
    flex-direction: row;
    align-items: center;
}

.account.compact .account-btn[b-sdrc5jq9ln] {
    padding: 3px 9px;
    font-size: .72rem;
    white-space: nowrap;
}
/* /Components/Shared/BingoRowCard.razor.rz.scp.css */
.row-card[b-lt6408jrkm] {
    display: inline-grid;
    grid-template-columns: 130px repeat(var(--light-count), 86px) 40px;
    grid-auto-rows: auto;
    align-items: center;
    column-gap: 0;
    row-gap: 2px;
    padding: 10px 6px 8px 6px;
    margin: 0 0 12px 0;
    background: var(--row);
    border: var(--row-border-width) solid;
    border-color: var(--row-border-colors);
    box-shadow: var(--row-shadow);
    break-inside: avoid;
    user-select: none;
}

/* Shown only when "offline hidden" is clicked. */
.row-card.offline[b-lt6408jrkm] {
    opacity: .55;
}

.offline-badge[b-lt6408jrkm] {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 1px 6px;
    border-radius: var(--pill-radius);
    background: var(--bad);
    color: #fff;
    font: 700 11px var(--font-row);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.row-card.drop-target[b-lt6408jrkm] {
    outline: 3px dashed var(--accent);
    outline-offset: 2px;
}

.row-title[b-lt6408jrkm] {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    width: 122px;
    height: 76px;
}

.row-name[b-lt6408jrkm] {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    resize: none;
    overflow: hidden;
    border: none;
    background: var(--row);
    color: var(--text);
    font-family: var(--font-row);
    font-weight: 700;
    line-height: 1.05;
    text-align: left;
    padding: 2px;
}

.row-name:focus[b-lt6408jrkm] {
    outline: 2px solid var(--accent);
    background: var(--row-name-focus);
}

/* The card title: the team's device names, sized per name in the markup. */
.device-names[b-lt6408jrkm] {
    flex: 0 0 auto;
    overflow: hidden;
    padding: 0 2px;
    color: var(--text);
    font-family: var(--font-row);
    font-weight: 700;
    line-height: 1.1;
}

/* The row name under a device-name title. */
.row-name.secondary[b-lt6408jrkm] {
    color: var(--text-muted);
    font-weight: 600;
}

/* One device per line; long names end in an ellipsis (the full list is in the tooltip). */
.device-names span[b-lt6408jrkm] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.light[b-lt6408jrkm] {
    grid-row: 1;
    width: 75px;
    height: 75px;
    margin: 0 5px;
    border-radius: 50%;
    border: none;
    background: var(--off);
    cursor: pointer;
    box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .35);
    transition: background-color .12s, box-shadow .12s;
}

.light:disabled[b-lt6408jrkm] {
    cursor: default;
}

.light.on.c-red[b-lt6408jrkm] { background: #ff0000; }
.light.on.c-yellow[b-lt6408jrkm] { background: #ffff00; }
.light.on.c-green[b-lt6408jrkm] { background: #00ff00; }
.light.on.c-blue[b-lt6408jrkm] { background: #0000ff; }
.light.on.c-white[b-lt6408jrkm] { background: #ffffff; }
.light.on.c-orange[b-lt6408jrkm] { background: #ffa500; }

.light.on[b-lt6408jrkm] {
    box-shadow: 0 0 18px 2px rgba(255, 255, 255, .55), inset 0 -4px 8px rgba(0, 0, 0, .2);
}

.light:focus-visible[b-lt6408jrkm] {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.row-controls[b-lt6408jrkm] {
    grid-row: 1 / span 4;
    grid-column: -2;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-self: end;
}

.row-controls button[b-lt6408jrkm] {
    width: 30px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border-strong);
    background: var(--field-bg);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.row-controls button:disabled[b-lt6408jrkm] {
    color: var(--text-disabled);
    cursor: default;
}

.row-controls img[b-lt6408jrkm] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: var(--icon-filter);
}

.counter-label[b-lt6408jrkm] {
    grid-column: 1;
    font: 700 11px var(--font-row);
    text-align: right;
    padding-right: 6px;
}

.counter[b-lt6408jrkm] {
    font: 700 11px var(--font-row);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Phones: rows fill the width, lights shrink to fit, only the "Time" counters show, row buttons sit along the bottom. */
@media (max-width: 700px) {
    .row-card[b-lt6408jrkm] {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(64px, 1fr) repeat(var(--light-count), minmax(0, 62px));
        padding: 8px 6px 6px 8px;
        margin-bottom: 8px;
    }

    .row-title[b-lt6408jrkm] {
        width: 100%;
        height: auto;
        min-height: 52px;
    }

    .row-name[b-lt6408jrkm] {
        flex: 0 0 auto;
        height: 2.2em;
        font-size: 1.1rem !important;
    }

    .row-name.secondary[b-lt6408jrkm] {
        height: 1.3em;
        font-size: .95rem !important;
    }

    .light[b-lt6408jrkm] {
        justify-self: center;
        width: calc(100% - 8px);
        max-width: 54px;
        height: auto;
        aspect-ratio: 1;
        margin: 0 4px;
    }

    .counter-label.extra[b-lt6408jrkm],
    .counter.extra[b-lt6408jrkm] {
        display: none;
    }

    .row-controls[b-lt6408jrkm] {
        grid-row: 3;
        grid-column: 1 / -1;
        flex-direction: row;
        justify-self: end;
        gap: 6px;
        margin-top: 4px;
    }

    .row-controls button[b-lt6408jrkm] {
        width: 36px;
        height: 30px;
    }
}
/* /Components/Shared/LightDetailsCard.razor.rz.scp.css */
/* Placed beside its light by stackLight.placeCard (fixed position, shown once placed). */
.details-card[b-o1oqcfo1fp] {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 940;
    visibility: hidden;
    width: max-content;
    max-width: min(480px, calc(100vw - 20px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
    font-size: .85rem;
    line-height: 1.3;
}

/* The hover card is information only: it never takes the mouse, and touch screens use press-and-hold instead. */
.details-card:not(.pinned)[b-o1oqcfo1fp] {
    pointer-events: none;
}

@media (hover: none) {
    .details-card:not(.pinned)[b-o1oqcfo1fp] {
        display: none;
    }
}

.dc-head[b-o1oqcfo1fp] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.dc-name[b-o1oqcfo1fp] {
    font-size: 1.05rem;
    white-space: pre-line;
}

.dc-team[b-o1oqcfo1fp] {
    color: var(--text-muted);
}

.dc-close[b-o1oqcfo1fp] {
    margin-left: auto;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.dc-device[b-o1oqcfo1fp] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    color: var(--text-muted);
}

.dc-device b[b-o1oqcfo1fp] {
    color: var(--text);
}

.dc-notes[b-o1oqcfo1fp] {
    margin: 0;
    max-width: 360px;
    font-style: italic;
    white-space: pre-line;
}

.mono[b-o1oqcfo1fp] {
    font-family: Consolas, "Courier New", monospace;
    font-size: .8rem;
}

.dc-lights[b-o1oqcfo1fp] {
    border-collapse: collapse;
}

.dc-lights th[b-o1oqcfo1fp],
.dc-lights td[b-o1oqcfo1fp] {
    padding: 3px 8px 3px 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

.dc-lights th[b-o1oqcfo1fp] {
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dc-lights .num[b-o1oqcfo1fp] {
    font-variant-numeric: tabular-nums;
}

.dc-lights tr.on td[b-o1oqcfo1fp] {
    font-weight: 700;
}

.dc-color[b-o1oqcfo1fp] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dot[b-o1oqcfo1fp] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--off);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}

tr.on .dot.c-red[b-o1oqcfo1fp] { background: #ff0000; }
tr.on .dot.c-yellow[b-o1oqcfo1fp] { background: #ffff00; }
tr.on .dot.c-green[b-o1oqcfo1fp] { background: #00ff00; }
tr.on .dot.c-blue[b-o1oqcfo1fp] { background: #3d6bff; }
tr.on .dot.c-white[b-o1oqcfo1fp] { background: #ffffff; }
tr.on .dot.c-orange[b-o1oqcfo1fp] { background: #ffa500; }

.dc-note[b-o1oqcfo1fp] {
    margin: 0;
    color: var(--text-muted);
    font-size: .75rem;
}

.dc-actions[b-o1oqcfo1fp] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Phones: smaller text, the "Now" column wraps, and a wide table scrolls sideways inside the card. */
@media (max-width: 700px) {
    .details-card[b-o1oqcfo1fp] {
        padding: 8px 10px;
        font-size: .8rem;
    }

    .dc-lights[b-o1oqcfo1fp] {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    .dc-lights td:nth-child(2)[b-o1oqcfo1fp] {
        min-width: 7em;
        white-space: normal;
    }
}

.dc-signal[b-o1oqcfo1fp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* /Components/Shared/MiniLight.razor.rz.scp.css */
.mini[b-1gvgz32zl8] {
    position: absolute;
    display: flex;
    flex-direction: column;
    border: 1px solid #000;
    background: #000;
    cursor: grab;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    /* Press-and-hold opens the details card, so no text selection or phone callout menu. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.mini:focus-visible[b-1gvgz32zl8] {
    outline: 3px solid var(--accent);
}

.seg[b-1gvgz32zl8] {
    width: 100%;
    background: var(--off);
    border-bottom: 1px solid rgba(0, 0, 0, .35);
}

button.seg[b-1gvgz32zl8] {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .35);
    cursor: pointer;
}

button.seg:hover[b-1gvgz32zl8] {
    filter: brightness(1.3);
}

button.seg:focus-visible[b-1gvgz32zl8] {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

.seg.on.c-red[b-1gvgz32zl8] { background: #ff0000; }
.seg.on.c-yellow[b-1gvgz32zl8] { background: #ffff00; }
.seg.on.c-green[b-1gvgz32zl8] { background: #00ff00; }
.seg.on.c-blue[b-1gvgz32zl8] { background: #0000ff; }
.seg.on.c-white[b-1gvgz32zl8] { background: #ffffff; }
.seg.on.c-orange[b-1gvgz32zl8] { background: #ffa500; }

.flash[b-1gvgz32zl8] {
    animation: flash-b-1gvgz32zl8 .4s step-end 5;
}

@keyframes flash-b-1gvgz32zl8 {
    50% { visibility: hidden; }
}

/* How long each lit light has been on, centered under the stack light. */
.on-times[b-1gvgz32zl8] {
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transform: translateX(-50%);
    pointer-events: none;
}

.on-time[b-1gvgz32zl8] {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    padding: .05em .4em;
    border-radius: 2px;
    background: rgba(20, 24, 31, .85);
    color: #fff;
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dot[b-1gvgz32zl8] {
    display: inline-block;
    width: .65em;
    height: .65em;
    border-radius: 50%;
}

.dot.c-red[b-1gvgz32zl8] { background: #ff0000; }
.dot.c-yellow[b-1gvgz32zl8] { background: #ffff00; }
.dot.c-green[b-1gvgz32zl8] { background: #00ff00; }
.dot.c-blue[b-1gvgz32zl8] { background: #3d6bff; }
.dot.c-white[b-1gvgz32zl8] { background: #ffffff; }
.dot.c-orange[b-1gvgz32zl8] { background: #ffa500; }
/* /Components/Shared/SignalBars.razor.rz.scp.css */
.signal[b-k6xt8y7wn0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bars[b-k6xt8y7wn0] {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}

.bars i[b-k6xt8y7wn0] {
    width: 4px;
    background: var(--border-strong);
    opacity: .45;
}

.bars i.lit[b-k6xt8y7wn0] {
    opacity: 1;
}

.level-4 .bars i.lit[b-k6xt8y7wn0],
.level-3 .bars i.lit[b-k6xt8y7wn0] {
    background: var(--ok);
}

.level-2 .bars i.lit[b-k6xt8y7wn0] {
    background: var(--warn);
}

.level-1 .bars i.lit[b-k6xt8y7wn0] {
    background: var(--bad);
}

.unknown[b-k6xt8y7wn0] {
    color: var(--text-muted);
}