/* /Components/Account/Pages/Manage/EnableAuthenticator.razor.rz.scp.css */
/* The authenticator set-up as a numbered track: a counter in a tinted circle per step, joined by a thin line, so the
   order reads at a glance. The key is large and spaced, to be copied by eye onto a phone. */

.acct-steps[b-swxclrwo58] {
    counter-reset: acct-step;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.acct-steps > li[b-swxclrwo58] {
    counter-increment: acct-step;
    position: relative;
    min-width: 0;
    padding: 0 0 1.1rem 2.75rem;
}

.acct-steps > li:last-child[b-swxclrwo58] { padding-bottom: 0; }

.acct-steps > li[b-swxclrwo58]::before {
    content: counter(acct-step);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--rl-chart-2) 16%, transparent);
    color: var(--rl-chart-2);
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The line from one step's number down to the next. */
.acct-steps > li:not(:last-child)[b-swxclrwo58]::after {
    content: "";
    position: absolute;
    left: calc(0.95rem - 1px);
    top: 2.2rem;
    bottom: 0.3rem;
    width: 2px;
    border-radius: 2px;
    background: var(--rl-border);
}

.acct-steps p[b-swxclrwo58] { margin: 0 0 0.6rem; color: var(--rl-text-muted); font-size: 0.9rem; line-height: 1.55; }
.acct-steps p:last-child[b-swxclrwo58] { margin-bottom: 0; }

.acct-steps__title[b-swxclrwo58] {
    margin: 0.3rem 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--rl-text);
}

.acct-key[b-swxclrwo58] {
    display: inline-block;
    max-width: 100%;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--rl-border);
    border-radius: 10px;
    background: var(--rl-surface-sunken);
    color: var(--rl-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
    box-shadow: none;
}

.acct-steps .admin__status[b-swxclrwo58] { margin: 0 0 0.6rem; font-size: 0.84rem; }
/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
/* The account area's frame: the menu column beside the page's cards. Overrides the manage__* grid in app.css (a
   scoped rule outranks it), and answers to the page's own width rather than the window's, so an open sidebar on a
   laptop screen folds the menu above the cards before the two columns get cramped. */

.manage[b-x07ey0baq2] {
    container: acct-manage / inline-size;
}

.manage__body[b-x07ey0baq2] {
    display: grid;
    grid-template-columns: minmax(12.5rem, 15rem) minmax(0, 1fr);
    gap: 1rem 1.25rem;
    align-items: start;
}

/* The menu stays in view while a long page (API tokens, deleting the account) scrolls past it. */
.manage__side[b-x07ey0baq2] {
    position: sticky;
    top: 0.75rem;
    min-width: 0;
}

.manage__main[b-x07ey0baq2] {
    min-width: 0;
}

/* The pages' button strips keep their buttons on the right, Cancel before the one that does it; a note, where there
   is one, still takes the left. */
.manage__main[b-x07ey0baq2]  .ui-formfoot { justify-content: flex-end; }

/* The warnings these pages carry over from Identity are a few short paragraphs: set them close, not a line apart. */
.manage__main[b-x07ey0baq2]  .admin__status p { margin: 0; }
.manage__main[b-x07ey0baq2]  .admin__status p + p, .manage__main[b-x07ey0baq2]  .admin__status strong + p { margin-top: 0.3rem; }
.manage__main[b-x07ey0baq2]  .admin__status ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }

/* A button that posts a form of its own sits in a strip beside plain links: the form takes no room of its own. */
.manage__main[b-x07ey0baq2]  .acct-inline { display: contents; }

/* Tick boxes stacked under a small heading, as on the delete page and the token form. */
.manage__main[b-x07ey0baq2]  .acct-checks { display: flex; flex-direction: column; gap: 0.15rem; margin: 0.4rem 0 0.6rem; }
.manage__main[b-x07ey0baq2]  .acct-checks .auth__check { margin: 0; padding: 0.3rem 0; }
.manage__main[b-x07ey0baq2]  .acct-checks .auth__check span { color: var(--rl-text); }
.manage__main[b-x07ey0baq2]  form > .ui-h3:first-of-type { margin-top: 0; }

/* API tokens: a new token in a code face, a long name cut short in the table, the scopes as a wrap of chips. */
.manage__main[b-x07ey0baq2]  .acct-token { max-width: none; }
.manage__main[b-x07ey0baq2]  .acct-token input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.02em; }
.manage__main[b-x07ey0baq2]  .acct-tokname { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.manage__main[b-x07ey0baq2]  .acct-chips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }

/* A row of buttons that is not a form's foot: the services to link, a passkey's Rename and Delete. */
.manage__main[b-x07ey0baq2]  .acct-buttons,
.manage__main[b-x07ey0baq2]  .acct-rowform { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.manage__main[b-x07ey0baq2]  .acct-rowform { gap: 0.35rem; justify-content: flex-end; }

/* An icon in a button outside the kit's own strips (which size theirs) stays the size of the text. */
.manage__main[b-x07ey0baq2]  .btn:has(> svg) { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.manage__main[b-x07ey0baq2]  .btn > svg { width: 1rem; height: 1rem; flex: none; }

@container acct-manage (max-width: 46rem) {
    .manage__body[b-x07ey0baq2] { grid-template-columns: minmax(0, 1fr); }
    .manage__side[b-x07ey0baq2] { position: static; }
}

@media (max-width: 720px) {
    .manage__body[b-x07ey0baq2] { grid-template-columns: minmax(0, 1fr); }
    .manage__side[b-x07ey0baq2] { position: static; }
}
/* /Components/Account/Shared/ManageNavMenu.razor.rz.scp.css */
/* The account area's menu, in a card of its own. The links are NavLink's own <a>, outside this file's scope, so they
   are reached with ::deep; the icon squares are the kit's .ui-ico, tinted by the ui-tone on each. */

.acct-nav[b-ccz5r46vbk] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem;
    border: 1px solid var(--rl-border);
    border-radius: 14px;
    background: var(--rl-surface);
    box-shadow: var(--rl-shadow-sm);
}

.acct-nav__group[b-ccz5r46vbk] {
    margin: 0.6rem 0.55rem 0.2rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rl-text-muted);
}

.acct-nav__group:first-child[b-ccz5r46vbk] { margin-top: 0.2rem; }

.acct-nav[b-ccz5r46vbk]  .acct-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.36rem 0.5rem;
    border-radius: 10px;
    color: var(--rl-text-muted);
    font-size: 0.88rem;
    text-decoration: none;
    transition: background var(--rl-dur) var(--rl-ease), color var(--rl-dur) var(--rl-ease);
}

.acct-nav[b-ccz5r46vbk]  .acct-nav__link:hover { background: var(--rl-surface-sunken); color: var(--rl-text); }
.acct-nav[b-ccz5r46vbk]  .acct-nav__link:focus-visible { outline: 2px solid var(--rl-accent); outline-offset: 1px; }

.acct-nav__label[b-ccz5r46vbk] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Where you are: an accent wash, a bar down the left edge, and the icon filled with its colour. */
.acct-nav[b-ccz5r46vbk]  .acct-nav__link.active,
.acct-nav[b-ccz5r46vbk]  .acct-nav__link.is-current {
    background: color-mix(in srgb, var(--rl-accent) 13%, transparent);
    color: var(--rl-text);
    font-weight: 600;
}

.acct-nav[b-ccz5r46vbk]  .acct-nav__link.active::before,
.acct-nav[b-ccz5r46vbk]  .acct-nav__link.is-current::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 3px;
    background: var(--rl-accent);
}

.acct-nav[b-ccz5r46vbk]  .acct-nav__link.active .ui-ico,
.acct-nav[b-ccz5r46vbk]  .acct-nav__link.is-current .ui-ico {
    background: var(--tone, var(--rl-accent));
    color: #fff;
}

/* Above the page on a narrow screen: the entries become a wrap of pills, and the group names go. */
@container acct-manage (max-width: 46rem) {
    .acct-nav[b-ccz5r46vbk] { flex-direction: row; flex-wrap: wrap; gap: 0.35rem; padding: 0.5rem; }
    .acct-nav__group[b-ccz5r46vbk] { display: none; }
    .acct-nav[b-ccz5r46vbk]  .acct-nav__link {
        padding: 0.22rem 0.7rem 0.22rem 0.25rem;
        border: 1px solid var(--rl-border);
        border-radius: 999px;
        font-size: 0.82rem;
    }
    .acct-nav[b-ccz5r46vbk]  .acct-nav__link.active,
    .acct-nav[b-ccz5r46vbk]  .acct-nav__link.is-current { border-color: color-mix(in srgb, var(--rl-accent) 55%, var(--rl-border)); }
    .acct-nav[b-ccz5r46vbk]  .acct-nav__link.active::before,
    .acct-nav[b-ccz5r46vbk]  .acct-nav__link.is-current::before { display: none; }
    .acct-nav[b-ccz5r46vbk]  .ui-ico { width: 1.45rem; height: 1.45rem; border-radius: 999px; }
    .acct-nav[b-ccz5r46vbk]  .ui-ico svg { width: 0.85rem; height: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .acct-nav[b-ccz5r46vbk]  .acct-nav__link { transition: none; }
}
/* /Components/Account/Shared/ShowRecoveryCodes.razor.rz.scp.css */
/* The codes as a grid of tiles, two or more abreast, each one easy to read out and copy. Overrides the plain column
   of manage__codes in app.css. */

.acct-codes[b-8yg5vrobu7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap: 0.5rem;
    margin: 0;
}

.acct-codes .recovery-code[b-8yg5vrobu7] {
    display: block;
    padding: 0.45rem 0.65rem;
    border: 1px dashed color-mix(in srgb, var(--rl-warning, #e3b341) 55%, var(--rl-border));
    border-radius: 10px;
    background: var(--rl-surface-sunken);
    color: var(--rl-text);
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-align: center;
    overflow-wrap: anywhere;
    user-select: all;
}
/* /Components/Charts/UsageReport.razor.rz.scp.css */
/* The usage report: the chart's legend sits in its card's head beside the title, so it drops the top margin it has
   under a chart. */

.legend[b-y6j8c6xc9g] { margin: 0; font-size: 0.8rem; color: var(--rl-text-muted); }

/* A model name in a table cell can be a long raw id; let it wrap rather than widen the table. */
.table code[b-y6j8c6xc9g] { overflow-wrap: anywhere; }
/* /Components/Chat/ChatIntro.razor.rz.scp.css */
/* The greeting and its tip sit directly above the composer while a chat has not started (see .chat--fresh in
   Chat.razor.css). Both lines keep their height before anything is chosen, so the composer never jumps when they
   arrive — they only fade in. */
.intro[b-fnq5q711kp] {
    margin: 0 0 1.25rem;
    text-align: center;
    transition: opacity 0.25s ease;
}

.intro--waiting[b-fnq5q711kp] { opacity: 0; }

.intro__greeting[b-fnq5q711kp] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    max-width: 100%;
    margin: 0 0 0.5rem;
    min-height: 2.2rem;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-wrap: balance;
}

/* Out of the way until wanted: it shows on hover or focus, and stays lit once a greeting is kept. */
.intro__pin[b-fnq5q711kp] {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--rl-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.intro__pin svg[b-fnq5q711kp] { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.intro__greeting:hover .intro__pin[b-fnq5q711kp],
.intro__pin:focus-visible[b-fnq5q711kp] { opacity: 0.8; }
.intro__pin:hover[b-fnq5q711kp] { background: var(--rl-surface-raised); color: var(--rl-text); opacity: 1; }
.intro__pin--on[b-fnq5q711kp] { opacity: 1; color: var(--rl-accent); }
.intro__pin--on svg[b-fnq5q711kp] { fill: currentColor; }

/* A touch screen has no hover, so the pin is always faintly there. */
@media (hover: none) {
    .intro__pin[b-fnq5q711kp] { opacity: 0.5; }
}

.intro__hint[b-fnq5q711kp] {
    margin: 0 auto;
    max-width: 40rem;
    min-height: 2.6em;
    color: var(--rl-text-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.intro__line[b-fnq5q711kp] {
    display: inline;
    animation: intro-tip-in-b-fnq5q711kp 0.4s ease both;
}

@keyframes intro-tip-in-b-fnq5q711kp {
    from { opacity: 0; transform: translateY(0.3rem); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .intro__line[b-fnq5q711kp] { animation: none; }
}

.intro__tip[b-fnq5q711kp] {
    display: inline-block;
    margin-right: 0.4rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--rl-border);
    border-radius: 99px;
    background: var(--rl-surface-raised);
    color: var(--rl-text-muted);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 0.1em;
    cursor: pointer;
}

.intro__tip:hover[b-fnq5q711kp] { color: var(--rl-text); border-color: var(--rl-accent); }

.intro__link[b-fnq5q711kp] {
    margin-left: 0.35rem;
    color: var(--rl-accent);
    text-decoration: none;
    white-space: nowrap;
}

.intro__link[b-fnq5q711kp]::after { content: " →"; }
.intro__link:hover[b-fnq5q711kp] { text-decoration: underline; }
/* /Components/Chat/ComposerMenu.razor.rz.scp.css */
.cm[b-c9suqrudc6] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
}

.cm svg[b-c9suqrudc6] { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ---- the compact row ---------------------------------------------------- */
.cm__plus[b-c9suqrudc6] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--rl-border);
    border-radius: 50%;
    background: none;
    color: var(--rl-text-muted);
    cursor: pointer;
    transition: background var(--rl-dur) var(--rl-ease), color var(--rl-dur) var(--rl-ease),
                border-color var(--rl-dur) var(--rl-ease);
}

.cm__plus svg[b-c9suqrudc6] { width: 1.1rem; height: 1.1rem; transition: transform var(--rl-dur) var(--rl-ease); }
.cm__plus:hover[b-c9suqrudc6] { background: var(--rl-surface-sunken); color: var(--rl-text); }
.cm__plus--open[b-c9suqrudc6] { background: var(--rl-surface-sunken); color: var(--rl-text); border-color: var(--rl-accent); }
.cm__plus--open svg[b-c9suqrudc6] { transform: rotate(45deg); }

.cm__state[b-c9suqrudc6] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
    overflow: hidden;
}

.cm__pill[b-c9suqrudc6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    max-width: 14rem;
    font: inherit;
    font-size: 0.8rem;
    padding: 0.28rem 0.45rem;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--rl-text-muted);
    cursor: pointer;
    transition: background var(--rl-dur) var(--rl-ease), color var(--rl-dur) var(--rl-ease);
}

.cm__pill svg[b-c9suqrudc6] { width: 0.85rem; height: 0.85rem; }
.cm__pill:hover[b-c9suqrudc6] { background: var(--rl-surface-sunken); color: var(--rl-text); }
.cm__pillText[b-c9suqrudc6] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm__caret[b-c9suqrudc6] { transform: rotate(90deg); opacity: 0.6; }

.cm__on[b-c9suqrudc6] {
    display: grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--rl-accent);
    cursor: pointer;
    transition: background var(--rl-dur) var(--rl-ease);
}

.cm__on svg[b-c9suqrudc6] { width: 0.95rem; height: 0.95rem; }
.cm__on:hover[b-c9suqrudc6] { background: var(--rl-surface-sunken); }

/* A live microphone has to read as live from the corner of the eye, hence a fill and a pulse. */
.cm__on--live[b-c9suqrudc6] {
    color: var(--rl-accent-contrast);
    background: var(--rl-accent);
    animation: cm-pulse-b-c9suqrudc6 1.6s ease-in-out infinite;
}

.cm__on--live:hover[b-c9suqrudc6] { background: var(--rl-accent); }

.cm__plus:focus-visible[b-c9suqrudc6],
.cm__pill:focus-visible[b-c9suqrudc6],
.cm__on:focus-visible[b-c9suqrudc6] {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rl-accent) 45%, transparent);
}

/* ---- the pop-up --------------------------------------------------------- */
.cm__pop[b-c9suqrudc6] {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.6rem);
    z-index: 40;
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
}

.cm__menu[b-c9suqrudc6],
.cm__sub[b-c9suqrudc6] {
    display: flex;
    flex-direction: column;
    padding: 0.3rem;
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    background: var(--rl-surface-raised);
    color: var(--rl-text);
    box-shadow: var(--rl-shadow-md, 0 6px 18px rgb(0 0 0 / .14));
    outline: none;
}

.cm__menu[b-c9suqrudc6] {
    width: 16.5rem;
    transform-origin: bottom left;
    animation: cm-open-b-c9suqrudc6 var(--rl-dur) var(--rl-ease);
}

.cm__sub[b-c9suqrudc6] {
    width: 17rem;
    max-height: min(24rem, 60vh);
    transform-origin: bottom left;
    animation: cm-fly-b-c9suqrudc6 var(--rl-dur) var(--rl-ease);
}

.cm__list[b-c9suqrudc6] { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }

.cm__item[b-c9suqrudc6] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 2rem;
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    padding: 0.35rem 0.55rem;
    border: none;
    border-radius: calc(var(--rl-radius) - 4px);
    background: none;
    color: inherit;
    cursor: pointer;
    transition: background var(--rl-dur) var(--rl-ease);
}

.cm__item:hover[b-c9suqrudc6],
.cm__item:focus-visible[b-c9suqrudc6],
.cm__item--sub[b-c9suqrudc6] {
    background: var(--rl-surface-sunken);
    outline: none;
}

.cm__item:disabled[b-c9suqrudc6] { opacity: 0.5; cursor: not-allowed; }
.cm__item:disabled:hover[b-c9suqrudc6] { background: none; }

.cm__icon[b-c9suqrudc6] { color: var(--rl-text-muted); }
.cm__label[b-c9suqrudc6] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cm__value[b-c9suqrudc6] {
    max-width: 6.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    color: var(--rl-text-muted);
}

.cm .cm__chev[b-c9suqrudc6] { width: 0.85rem; height: 0.85rem; color: var(--rl-text-muted); }
.cm__check[b-c9suqrudc6] { color: var(--rl-accent); }
.cm__item[role="menuitemradio"][aria-checked="true"] .cm__label[b-c9suqrudc6] { font-weight: 600; }

.cm__sep[b-c9suqrudc6] { height: 1px; margin: 0.3rem 0.4rem; background: var(--rl-border); }

/* An on/off switch rather than a tick, because each of these is a standing setting, not a choice from a list. */
.cm__switch[b-c9suqrudc6] {
    position: relative;
    width: 1.9rem;
    height: 1.1rem;
    flex-shrink: 0;
    border-radius: 99px;
    background: var(--rl-border);
    transition: background var(--rl-dur) var(--rl-ease);
}

.cm__switch[b-c9suqrudc6]::after {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--rl-surface);
    box-shadow: 0 1px 2px rgb(0 0 0 / .25);
    transition: transform var(--rl-dur) var(--rl-ease);
}

.cm__item[aria-checked="true"] .cm__switch[b-c9suqrudc6] { background: var(--rl-accent); }
.cm__item[aria-checked="true"] .cm__switch[b-c9suqrudc6]::after { transform: translateX(0.8rem); }
.cm__item[aria-checked="true"] .cm__icon[b-c9suqrudc6] { color: var(--rl-accent); }

.cm__filterRow[b-c9suqrudc6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.3rem;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--rl-border);
    color: var(--rl-text-muted);
}

.cm__filter[b-c9suqrudc6] {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 0.82rem;
    border: none;
    outline: none;
    background: none;
    color: var(--rl-text);
}

.cm__empty[b-c9suqrudc6] { margin: 0; padding: 0.5rem 0.6rem; font-size: 0.8rem; color: var(--rl-text-muted); }

.cm__help[b-c9suqrudc6] { width: 16rem; padding: 0.6rem 0.75rem; }

.cm__help dl[b-c9suqrudc6] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.45rem 0.8rem;
    margin: 0;
    font-size: 0.8rem;
}

.cm__help dt[b-c9suqrudc6] { display: flex; gap: 0.2rem; }
.cm__help dd[b-c9suqrudc6] { margin: 0; color: var(--rl-text-muted); }

.cm__help kbd[b-c9suqrudc6] {
    min-width: 1.4rem;
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--rl-border);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--rl-surface);
    font: inherit;
    font-size: 0.72rem;
    text-align: center;
}

@keyframes cm-open-b-c9suqrudc6 {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@keyframes cm-fly-b-c9suqrudc6 {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: none; }
}

@keyframes cm-pulse-b-c9suqrudc6 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* No room beside the menu on a phone, so the flyout covers it instead. */
@media (max-width: 640px) {
    .cm__pop[b-c9suqrudc6] { right: 0; }
    .cm__menu[b-c9suqrudc6] { width: min(16.5rem, 100%); }
    .cm__sub[b-c9suqrudc6] { position: absolute; left: 0; bottom: 0; width: min(17rem, 100%); }
}

@media (prefers-reduced-motion: reduce) {
    .cm__menu[b-c9suqrudc6], .cm__sub[b-c9suqrudc6], .cm__on--live[b-c9suqrudc6] { animation: none; }
    .cm__plus svg[b-c9suqrudc6], .cm__switch[b-c9suqrudc6], .cm__switch[b-c9suqrudc6]::after { transition: none; }
}
/* /Components/Collaboration/IncomingInvitations.razor.rz.scp.css */
/* An invitation row: the kit's row, but its Accept and Decline drop under the words on a narrow card rather than
   squeezing them, and a quoted note can run to several lines. */
.inv-row[b-oagvzdlc7g] { flex-wrap: wrap; align-items: flex-start; }
.inv-row .ui-row__main[b-oagvzdlc7g] { flex: 1 1 16rem; padding-top: 0.1rem; }
.inv-row .ui-row__end[b-oagvzdlc7g] { margin-left: auto; padding-top: 0.25rem; }
.inv-row .ui-row__sub strong[b-oagvzdlc7g] { color: var(--rl-text); font-weight: 600; }
.inv-row .invites__note[b-oagvzdlc7g] { margin-top: 0.3rem; font-size: 0.85rem; }
/* /Components/Layout/ChatSearchPopover.razor.rz.scp.css */
/* Drops from under the folded Chats strip (ChatShell), over the page rather than pushing it down. */
.csearch__scrim[b-zesclazv2q] { position: fixed; inset: 0; z-index: 19; }

.csearch[b-zesclazv2q] {
    position: absolute;
    top: calc(var(--chatshell-strip-h, 3rem) + 0.4rem);
    left: 0.5rem;
    z-index: 20;
    width: min(24rem, calc(100% - 1rem));
    display: flex;
    flex-direction: column;
    max-height: min(28rem, calc(100% - var(--chatshell-strip-h, 3rem) - 1rem));
    background: var(--rl-surface-raised);
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transform-origin: top left;
    animation: csearch-in-b-zesclazv2q var(--rl-dur) var(--rl-ease) both;
}

@keyframes csearch-in-b-zesclazv2q {
    from { opacity: 0; transform: translateY(-0.35rem) scale(0.98); }
    to { opacity: 1; transform: none; }
}

.csearch__field[b-zesclazv2q] {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.55rem;
    border-bottom: 1px solid var(--rl-border);
}

.csearch__field > svg[b-zesclazv2q] {
    position: absolute;
    left: 1.1rem;
    width: 1rem;
    height: 1rem;
    color: var(--rl-text-muted);
    pointer-events: none;
}

.csearch__field input[b-zesclazv2q] {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 0.88rem;
    padding: 0.45rem 3rem 0.45rem 2.1rem;
    border: 1px solid var(--rl-border);
    border-radius: 8px;
    background: var(--rl-surface);
    color: var(--rl-text);
    outline: none;
    transition: border-color var(--rl-dur);
}

.csearch__field input:focus[b-zesclazv2q] { border-color: var(--rl-accent); }

.csearch__scope[b-zesclazv2q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0.7rem;
    border-bottom: 1px solid var(--rl-border);
    color: var(--rl-text-muted);
    font-size: 0.72rem;
}

.csearch__key[b-zesclazv2q] {
    position: absolute;
    right: 1.05rem;
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--rl-border);
    border-radius: 4px;
    background: var(--rl-surface-raised);
    color: var(--rl-text-muted);
    font-family: inherit;
    font-size: 0.68rem;
    pointer-events: none;
}

.csearch__results[b-zesclazv2q] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.3rem;
}

.csearch__hint[b-zesclazv2q] {
    margin: 0;
    padding: 0.7rem 0.6rem;
    color: var(--rl-text-muted);
    font-size: 0.82rem;
}

.csearch__hit[b-zesclazv2q] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    color: var(--rl-text);
    text-decoration: none;
}

.csearch__hit.is-active[b-zesclazv2q],
.csearch__hit:focus-visible[b-zesclazv2q] { background: var(--rl-surface-sunken); outline: none; }
.csearch__hit.is-active[b-zesclazv2q] { box-shadow: inset 2px 0 0 var(--rl-accent); }

.csearch__title[b-zesclazv2q] {
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csearch__snippet[b-zesclazv2q] {
    font-size: 0.76rem;
    color: var(--rl-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .csearch[b-zesclazv2q] { animation: none; }
}
/* /Components/Layout/ChatShell.razor.rz.scp.css */
/* The history bar beside a chat: the same raised surface the sidebar and a RipCord server's channel list use, so the
   three read as one family. The page itself scrolls inside .chatshell__main, because Talk sizes to its content and
   Chat fills the column. */
.chatshell[b-93adel7sk3] {
    --chatshell-w: 16rem;
    --chatshell-strip-w: 13.5rem;
    --chatshell-strip-h: 3rem;
    --chatshell-fold: calc(var(--rl-dur) * 1.6) var(--rl-ease);
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    overflow: hidden;
}

/* Out of the flow in both states, so folding it is a width and a height to animate rather than a change of layout:
   the page beside it gives up or takes back the same width through its margin. */
.chatshell__history[b-93adel7sk3] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    width: var(--chatshell-w);
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--rl-surface-raised);
    border-right: 1px solid var(--rl-border);
}

.chatshell__head[b-93adel7sk3] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.7rem 0.6rem 0.7rem 1rem;
    border-bottom: 1px solid var(--rl-border);
    min-height: var(--chatshell-strip-h);
    flex-shrink: 0;
}

.chatshell__title[b-93adel7sk3] {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatshell__btn[b-93adel7sk3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--rl-text-muted);
    cursor: pointer;
    transition: background var(--rl-dur), color var(--rl-dur);
}

.chatshell__btn:hover[b-93adel7sk3] { background: var(--rl-border); color: var(--rl-text); }
.chatshell__btn:focus-visible[b-93adel7sk3] { outline: 2px solid var(--rl-accent); outline-offset: 1px; }
.chatshell__btn.is-on[b-93adel7sk3],
.chatshell__btn[aria-expanded="true"].chatshell__searchBtn[b-93adel7sk3] { color: var(--rl-accent); }
.chatshell__btn svg[b-93adel7sk3] { width: 1.05rem; height: 1.05rem; }

/* Open, the list has its own box; the button only slides in once the box is folded away. */
.chatshell__searchBtn[b-93adel7sk3] {
    width: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: width var(--chatshell-fold), opacity var(--chatshell-fold), visibility 0s linear calc(var(--rl-dur) * 1.6);
}

.chatshell__fold svg[b-93adel7sk3] { transform: rotate(-90deg); transition: transform var(--chatshell-fold); }

.chatshell__scroll[b-93adel7sk3] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    transition: opacity var(--chatshell-fold);
}

.chatshell__main[b-93adel7sk3] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    margin-left: var(--chatshell-w);
    transition: margin-left var(--chatshell-fold);
}

.chatshell__handle[b-93adel7sk3],
.chatshell__scrim[b-93adel7sk3] { display: none; }

/* Folded: the bar keeps its head and nothing else, tucked into the page's top-left corner, and the page runs the full
   width underneath it. Chat's title bar steps right to clear it, on the same 3rem line. Desktop only — a phone already
   keeps the bar in a drawer. */
@media (min-width: 781px) {
    :root[data-chats="collapsed"] .chatshell__history[b-93adel7sk3] {
        width: var(--chatshell-strip-w);
        height: var(--chatshell-strip-h);
    }

    :root[data-chats="collapsed"] .chatshell__main[b-93adel7sk3] { margin-left: 0; }

    :root[data-chats="collapsed"] .chatshell__scroll[b-93adel7sk3] {
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--chatshell-fold), visibility 0s linear calc(var(--rl-dur) * 1.6);
    }

    :root[data-chats="collapsed"] .chatshell__searchBtn[b-93adel7sk3] {
        width: 1.7rem;
        opacity: 1;
        visibility: visible;
        transition: width var(--chatshell-fold), opacity var(--chatshell-fold), visibility 0s;
    }

    :root[data-chats="collapsed"] .chatshell__fold svg[b-93adel7sk3] { transform: rotate(90deg); }

    .chatshell__history[b-93adel7sk3] { transition: width var(--chatshell-fold), height var(--chatshell-fold); }

    .chatshell__main[b-93adel7sk3]  .chat__bar { transition: padding-left var(--chatshell-fold); }

    :root[data-chats="collapsed"] .chatshell__main[b-93adel7sk3]  .chat__bar {
        padding-left: calc(var(--chatshell-strip-w) + 1rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chatshell__history[b-93adel7sk3],
    .chatshell__main[b-93adel7sk3],
    .chatshell__scroll[b-93adel7sk3],
    .chatshell__searchBtn[b-93adel7sk3],
    .chatshell__fold svg[b-93adel7sk3],
    .chatshell__main[b-93adel7sk3]  .chat__bar { transition: none !important; }
}

/* On a phone the bar is a drawer over the page, opened from a tab on the left edge. */
@media (max-width: 780px) {
    .chatshell__history[b-93adel7sk3] {
        inset: 0 auto 0 0;
        z-index: 12;
        width: min(19rem, 88%);
        transform: translateX(-100%);
        transition: transform 0.16s ease;
        box-shadow: 0 0 2rem rgba(0, 0, 0, 0.35);
    }

    .chatshell__main[b-93adel7sk3] { margin-left: 0; }

    .chatshell__fold[b-93adel7sk3],
    .chatshell__searchBtn[b-93adel7sk3] { display: none; }

    .chatshell--peek .chatshell__history[b-93adel7sk3] { transform: none; }

    .chatshell__scrim[b-93adel7sk3] {
        position: absolute;
        inset: 0;
        z-index: 11;
        background: rgba(0, 0, 0, 0.45);
    }

    .chatshell--peek .chatshell__scrim[b-93adel7sk3] { display: block; }

    .chatshell__handle[b-93adel7sk3] {
        position: absolute;
        top: 50%;
        left: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.1rem;
        height: 3rem;
        padding: 0;
        transform: translateY(-50%);
        border: 1px solid var(--rl-border);
        border-left: 0;
        border-radius: 0 8px 8px 0;
        background: var(--rl-surface-raised);
        color: var(--rl-text-muted);
        cursor: pointer;
    }

    .chatshell__handle svg[b-93adel7sk3] { width: 0.8rem; height: 0.8rem; }
    .chatshell--peek .chatshell__handle[b-93adel7sk3] { display: none; }
}
/* /Components/Layout/ConversationList.razor.rz.scp.css */
/* ---- hold countdown ------------------------------------------------------
   js/hold.js writes --rl-hold (0 to 1) on the held button every frame, so the
   ring drains continuously rather than in steps. While held the dash follows
   that number directly; let go early and the transition, which only applies
   when not held, refills it instead of snapping.
-------------------------------------------------------------------------- */
.hold-ring[b-dnifw97hty] {
    flex: none;
    overflow: visible;
    transform: rotate(-90deg);
}

.hold-ring__track[b-dnifw97hty] { fill: none; stroke: var(--rl-border); stroke-width: 2; }

.hold-ring__fill[b-dnifw97hty] {
    fill: none;
    stroke: var(--rl-text-muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 * var(--rl-hold, 0));
    opacity: 0.5;
    transition: stroke-dashoffset calc(var(--rl-dur) * 1.75) var(--rl-ease), stroke var(--rl-dur), opacity var(--rl-dur);
}

[data-holding] .hold-ring__fill[b-dnifw97hty] {
    stroke: var(--rl-accent);
    opacity: 1;
    transition: stroke var(--rl-dur), opacity var(--rl-dur);
}

/* In the row menu: in the flow, after the label, so it never covers anything. */
.tmenu__item .hold-ring--inline[b-dnifw97hty] { width: 1rem; height: 1rem; margin-left: 0.4rem; }
.tmenu__hold[data-holding][b-dnifw97hty] { background: var(--rl-surface-sunken); }
.tmenu__item--danger[data-holding] .hold-ring__fill[b-dnifw97hty] { stroke: var(--rl-danger); }

/* On a starred row: the star is the button, and the ring only appears around it while it is held. */
.thread__fav[b-dnifw97hty] {
    position: relative;
    display: grid;
    place-items: center;
    width: 1.3rem;
    height: 1.3rem;
    flex: none;
    margin-right: -0.1rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    touch-action: none;
    transition: background var(--rl-dur);
}

.thread__fav:hover[b-dnifw97hty] { background: color-mix(in srgb, var(--rl-warning, #e3b341) 14%, transparent); }
.thread__fav:focus-visible[b-dnifw97hty] { outline: 2px solid var(--rl-accent); outline-offset: 1px; }

.thread__fav .hold-ring--around[b-dnifw97hty] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity var(--rl-dur);
    pointer-events: none;
}

.thread__fav[data-holding] .hold-ring--around[b-dnifw97hty] { opacity: 1; }
.thread__fav .hold-ring__track[b-dnifw97hty] { stroke: transparent; }
.thread__fav[data-holding] .hold-ring__track[b-dnifw97hty] { stroke: var(--rl-border); }
.thread__fav[data-holding] .hold-ring__fill[b-dnifw97hty] { stroke: var(--rl-warning, #e3b341); }

@media (prefers-reduced-motion: reduce) {
    .hold-ring__fill[b-dnifw97hty],
    [data-holding] .hold-ring__fill[b-dnifw97hty],
    .thread__fav .hold-ring--around[b-dnifw97hty],
    .thread__fav[b-dnifw97hty] { transition: none; }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The shell itself lives in wwwroot/app.css: it is shared by the layout, the sidebar and the
   conversation list, which are three components and so three separate CSS scopes. */

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

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


#components-reconnect-modal[b-fsx9nrkeff] {
    background-color: #16151c;
    color: #f4f1ea;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem 1.75rem 1.6rem;
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    text-align: center;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-fsx9nrkeff 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

.components-reconnect-mark[b-fsx9nrkeff] {
    width: 4.5rem;
    height: 4.5rem;
    display: block;
}

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-fsx9nrkeff {
    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/Layout/VoiceCallHost.razor.rz.scp.css */
.vc-side[b-wmhg5j45w4] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--rl-ok) 35%, var(--rl-border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--rl-ok) 10%, var(--rl-surface));
}

.vc-side__toggle[b-wmhg5j45w4] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    margin: 0;
    padding: 0.25rem 0.3rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.vc-side__toggle:hover[b-wmhg5j45w4] { background: color-mix(in srgb, var(--rl-ok) 12%, transparent); }

.vc-side__pulse[b-wmhg5j45w4] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--rl-ok);
    flex: none;
    animation: vc-pulse-b-wmhg5j45w4 1.6s ease-in-out infinite;
}

@keyframes vc-pulse-b-wmhg5j45w4 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.vc-side__copy[b-wmhg5j45w4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.15;
}

.vc-side__copy strong[b-wmhg5j45w4] {
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vc-side__copy small[b-wmhg5j45w4] {
    color: var(--rl-text-muted);
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vc-side__chev[b-wmhg5j45w4] {
    width: 0.85rem;
    height: 0.85rem;
    flex: none;
    color: var(--rl-text-muted);
    transform: rotate(-90deg);
    transition: transform var(--rl-dur) var(--rl-ease);
}

.vc-side--open .vc-side__chev[b-wmhg5j45w4] { transform: rotate(0deg); }

.vc-side__body[b-wmhg5j45w4] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.15rem 0.3rem 0.25rem;
}

.vc-side__link[b-wmhg5j45w4] {
    font-size: 0.78rem;
    color: var(--rl-accent);
    text-decoration: none;
}

.vc-side__link:hover[b-wmhg5j45w4] { text-decoration: underline; }

.vc-side__ctrls[b-wmhg5j45w4] { display: flex; gap: 0.35rem; }

.vc-hold__btn[b-wmhg5j45w4] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--rl-border);
    border-radius: 8px;
    background: var(--rl-surface-raised);
    color: var(--rl-text);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
}

.vc-hold__btn:hover[b-wmhg5j45w4] { filter: brightness(1.08); }
.vc-hold__btn--off[b-wmhg5j45w4] {
    background: color-mix(in srgb, var(--rl-danger) 14%, var(--rl-surface));
    color: var(--rl-danger);
    border-color: color-mix(in srgb, var(--rl-danger) 40%, transparent);
}
.vc-hold__btn--leave[b-wmhg5j45w4] {
    color: #fff;
    background: var(--rl-danger);
    border-color: transparent;
}
.vc-hold__btn--ptt[b-wmhg5j45w4] {
    min-width: 2.75rem;
    width: auto;
    padding: 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 650;
}

:root[data-sidebar="collapsed"] .vc-side[b-wmhg5j45w4] {
    margin: 0;
    padding: 0.25rem;
}
:root[data-sidebar="collapsed"] .vc-side__copy[b-wmhg5j45w4],
:root[data-sidebar="collapsed"] .vc-side__body[b-wmhg5j45w4] { display: none; }
:root[data-sidebar="collapsed"] .vc-side__toggle[b-wmhg5j45w4] { justify-content: center; padding: 0.35rem; }
:root[data-sidebar="collapsed"] .vc-side__chev[b-wmhg5j45w4] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .vc-side__pulse[b-wmhg5j45w4] { animation: none; }
    .vc-side__chev[b-wmhg5j45w4] { transition: none; }
}
/* /Components/Pages/Admin/AgentsAdmin.razor.rz.scp.css */
/* The role library sits in the side column: a role's chips wrap under its name there, and a row whose description runs
   to two lines keeps its Add button at the top. */
.ag__library .ui-row[b-44o14kit2r] { align-items: flex-start; }
.ag__library .ui-row__title[b-44o14kit2r] { flex-wrap: wrap; row-gap: 0.2rem; }
.ag__library .ui-row__end[b-44o14kit2r] { padding-top: 0.1rem; }
/* /Components/Pages/Admin/ComfyServers.razor.rz.scp.css */
/* ComfyUI servers: one card a server, maintenance notes beside them. The layout is the kit's (ui-split, SectionCard);
   this sheet only keeps a long server name to one line and sizes the icons in the notes' small headings. */

.cs-server__name[b-w5ac3bkinq] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-h3icon[b-w5ac3bkinq] {
    width: 0.9rem;
    height: 0.9rem;
    flex: none;
}

/* The address and the last probe can be long; let them break rather than push the card wider. */
[b-w5ac3bkinq] .cs-server .ui-card__hint {
    overflow-wrap: anywhere;
}
/* /Components/Pages/Admin/Connections.razor.rz.scp.css */
/* A long connection name ends in an ellipsis rather than pushing its status chips off the card. */
.cx__name[b-1y3wokh0hv] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cx__url[b-1y3wokh0hv] { margin: 0; font-size: 0.88rem; overflow-wrap: anywhere; }
.cx__facts[b-1y3wokh0hv] { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }

/* The two buttons that change the connection's models or remove it sit apart from the quick ones in the head. */
.cx__foot[b-1y3wokh0hv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.65rem;
    border-top: 1px solid var(--rl-border);
}

.cx__foot .btn[b-1y3wokh0hv] { display: inline-flex; align-items: center; gap: 0.35rem; }
.cx__foot .btn svg[b-1y3wokh0hv] { width: 0.95rem; height: 0.95rem; }
/* /Components/Pages/Admin/ErrorLog.razor.rz.scp.css */
/* Error log: the table keeps its own markup inside the kit's rounded .ui-table frame, as the fleet table does. */

.errorlog__table thead th[b-mm9si5uku4] {
    background: var(--rl-surface-raised);
    white-space: nowrap;
}

.errorlog__row[b-mm9si5uku4] { cursor: pointer; }

.errorlog__what[b-mm9si5uku4] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.errorlog__message[b-mm9si5uku4] { overflow-wrap: anywhere; }

.errorlog__meta[b-mm9si5uku4] {
    font-size: 0.8em;
    opacity: 0.7;
    overflow-wrap: anywhere;
}

.errorlog__num[b-mm9si5uku4] { text-align: right; font-variant-numeric: tabular-nums; }

.errorlog__when[b-mm9si5uku4] { white-space: nowrap; }

.errorlog__act[b-mm9si5uku4] { width: 1%; text-align: right; }

.errorlog__trace[b-mm9si5uku4] {
    margin: 0.4rem 0 0;
    max-height: 24rem;
    overflow: auto;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--rl-surface-raised);
    font-size: 0.8em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Components/Pages/Admin/Launcher.razor.rz.scp.css */
.launch__bar[b-q3jsu1vk8q] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: end;
    margin: 0.75rem 0 0.4rem;
}

.launch__bar label[b-q3jsu1vk8q],
.launch__form[b-q3jsu1vk8q] {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.launch__bar label[b-q3jsu1vk8q] {
    flex-direction: column;
    align-items: stretch;
    min-width: 14rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rl-text-muted, #9aa);
}

.launch__bar select[b-q3jsu1vk8q],
.launch__form input[b-q3jsu1vk8q],
.launch__message[b-q3jsu1vk8q] {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    color: inherit;
}

.launch__form[b-q3jsu1vk8q] {
    flex-wrap: wrap;
    margin: 0.6rem 0;
}

.launch__path[b-q3jsu1vk8q] { min-width: min(28rem, 100%); flex: 1; }

.launch__check[b-q3jsu1vk8q] {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
}

.launch__summary[b-q3jsu1vk8q] {
    margin: 0.35rem 0 0;
    color: var(--rl-text-muted, #9aa);
}

.launch__meta[b-q3jsu1vk8q] {
    margin: 0.15rem 0 0.4rem;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.85rem;
}

.launch__split[b-q3jsu1vk8q] {
    display: grid;
    grid-template-columns: minmax(18rem, 0.9fr) minmax(20rem, 1.3fr);
    gap: 1rem;
    margin-top: 0.75rem;
    align-items: start;
}

.launch__tools[b-q3jsu1vk8q] {
    list-style: none;
    margin: 0.5rem 0;
    padding: 0;
    max-height: 24rem;
    overflow: auto;
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    border-radius: 0.4rem;
}

.launch__tool[b-q3jsu1vk8q] {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
    color: inherit;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
}

.launch__tool span[b-q3jsu1vk8q] {
    color: var(--rl-text-muted, #9aa);
    font-size: 0.75rem;
}

.launch__tool--on[b-q3jsu1vk8q] {
    background: color-mix(in srgb, var(--accent, #7c6af7) 24%, transparent);
}

.launch__tool--off[b-q3jsu1vk8q] { opacity: 0.45; }

.launch__param[b-q3jsu1vk8q] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0.45rem 0;
    font-size: 0.85rem;
}

.launch__message[b-q3jsu1vk8q] { min-width: 14rem; flex: 1; }

.launch__out[b-q3jsu1vk8q] {
    max-height: 28rem;
    overflow: auto;
    margin: 0.4rem 0 0;
    white-space: pre-wrap;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.35;
}

.admin__head[b-q3jsu1vk8q] { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.admin__head h1[b-q3jsu1vk8q] { margin-right: auto; }

@media (max-width: 900px) {
    .launch__split[b-q3jsu1vk8q] { grid-template-columns: 1fr; }
    .launch__tool[b-q3jsu1vk8q] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Admin/MembershipAdmin.razor.rz.scp.css */
/* The plans card: one small form per plan, side by side while each keeps a readable width. */

.mem__plans[b-fvw0hmnmzx] {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.mem__plan[b-fvw0hmnmzx] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    padding: 0.85rem 0.95rem 0.75rem;
    border: 1px solid var(--rl-border);
    border-radius: 12px;
    background: var(--rl-surface-raised);
}

.mem__plan .field[b-fvw0hmnmzx] { max-width: none; }

.mem__planHead[b-fvw0hmnmzx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.6rem;
    margin-bottom: 0.45rem;
}

.mem__planName[b-fvw0hmnmzx] {
    margin: 0;
    min-width: 0;
    font-size: 0.97rem;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mem__plan .ui-formfoot[b-fvw0hmnmzx] { justify-content: flex-end; margin-top: auto; }
/* /Components/Pages/Admin/Models.razor.rz.scp.css */
/* A long connection name ends in an ellipsis rather than pushing the card's buttons off. */
.md__name[b-sfiaho6cr5] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The table edits in place: the name and context fields keep a usable width while the table scrolls sideways. */
.md__table input:not([type=checkbox])[b-sfiaho6cr5] { min-width: 9rem; }
.md__table input[type=number][b-sfiaho6cr5] { min-width: 7rem; max-width: 9rem; }
.md__table code[b-sfiaho6cr5] { overflow-wrap: anywhere; }
.md__table small[b-sfiaho6cr5] { display: block; margin-top: 0.2rem; }
/* /Components/Pages/Admin/PetsAdmin.razor.rz.scp.css */
/* Admin → Pets: the kit's list rows, as buttons that pick a person rather than links that leave the page. */

.petsadmin__filters[b-2uoevqiot0] { margin: 0 0 0.5rem; }

.petsadmin__row[b-2uoevqiot0] {
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.petsadmin__row:hover[b-2uoevqiot0],
.petsadmin__row.is-on[b-2uoevqiot0] { background: color-mix(in srgb, var(--rl-accent) 9%, transparent); }

.petsadmin__row:focus-visible[b-2uoevqiot0] { outline: none; box-shadow: var(--rl-ring); }

.petsadmin__row .ui-row__title[b-2uoevqiot0] { flex-wrap: wrap; row-gap: 0.2rem; }

.petsadmin__figures[b-2uoevqiot0] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05rem;
}

.petsadmin__pager[b-2uoevqiot0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.75rem;
}

/* One kind of animal: a tick for the whole kind in the legend, and its breeds' eggs under it. */
.petsadmin__kind[b-2uoevqiot0] {
    min-width: 0;
    margin: 0 0 0.85rem;
    padding: 0;
    border: 0;
}

.petsadmin__kind legend[b-2uoevqiot0] {
    padding: 0 0 0.4rem;
    font-weight: 700;
}

.petsadmin__eggs[b-2uoevqiot0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.45rem 1rem;
    padding-left: 1.35rem;
}

.petsadmin__egg[b-2uoevqiot0] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-size: 0.9rem;
    cursor: pointer;
}

@media (max-width: 40rem) {
    .petsadmin__row[b-2uoevqiot0] { flex-wrap: wrap; }
    .petsadmin__figures[b-2uoevqiot0] { flex-basis: 100%; align-items: flex-start; padding-left: 2.8rem; white-space: normal; }
    .petsadmin__pager[b-2uoevqiot0] { justify-content: space-between; }
}
/* /Components/Pages/Admin/RemoteHosts.razor.rz.scp.css */
/* Remote hosts: the kit lays the page out (hero, ui-split, SectionCard, ui-table); this sheet only pairs the port and
   user fields in one cell of the form grid, keeps a long allow-list readable, and numbers the gates. */

/* Port is a few digits, so it shares a grid cell with the user rather than taking a whole one. */
.rh-pair[b-wr0xpymyh3] { flex-direction: row; gap: 0.75rem; }
.rh-pair__item[b-wr0xpymyh3] { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.rh-pair__item--grow[b-wr0xpymyh3] { flex: 1 1 auto; }

.rh-name[b-wr0xpymyh3] { font-weight: 600; margin-right: 0.35rem; }

/* A long allow-list wraps inside its cell instead of widening the table. */
.rh-allows[b-wr0xpymyh3] { min-width: 10rem; max-width: 22rem; overflow-wrap: anywhere; font-size: 0.86rem; }

.rh-gates[b-wr0xpymyh3] {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.88rem;
    line-height: 1.45;
}

.rh-gates li[b-wr0xpymyh3]::marker { color: var(--rl-text-muted); font-weight: 600; }
/* /Components/Pages/Admin/Resources.razor.rz.scp.css */
/* Resources: the key to the GB10's split memory bar sits under the cards, with a swatch of each half inline. */

.res__legend[b-hxqvq8o89t] { margin-top: 1rem; max-width: 52rem; }

.res__swatch[b-hxqvq8o89t] {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.25rem;
    border-radius: 3px;
    vertical-align: -0.05rem;
}

.res__swatch--gpu[b-hxqvq8o89t] { background: var(--rl-ok); }
.res__swatch--other[b-hxqvq8o89t] { background: var(--rl-text-muted); opacity: 0.45; }
/* /Components/Pages/Admin/Security.razor.rz.scp.css */
.sec__perm[b-933uo7lxv3] { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; width: 100%; }

/* Long permission wording ("Ask first — someone must approve each attempt to run commands against this
   machine") needs more than the shared 24rem / 34rem field caps; those clipped the closed select at ~1440px. */
[b-933uo7lxv3] .srow:has(.sec__perm) .srow__control.field { max-width: min(48rem, 100%); }
.sec__perm select[b-933uo7lxv3] {
    flex: 1 1 22rem;
    min-width: min(100%, 22rem);
    max-width: none;
    width: 100%;
}

/* The level beside each dropdown is a kit chip (ui-chip + tone); it only needs to keep its size while the select
   beside it wraps. */
.sec__badge[b-933uo7lxv3] { flex: none; }

/* People in unsafe mode: a chip that names what they skip wraps under the name on a narrow card. */
.sec__people .ui-row__title[b-933uo7lxv3] { flex-wrap: wrap; row-gap: 0.2rem; }

.sec__switch[b-933uo7lxv3] { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; cursor: pointer; }
.sec__switch input[b-933uo7lxv3] { width: 1.05rem; height: 1.05rem; accent-color: var(--rl-accent); }
/* /Components/Pages/Admin/SettingRow.razor.rz.scp.css */
/* A row inside a SectionCard: a hairline between rows rather than a full border, so the card's tone line stays the
   strongest rule on it, as the kit's lists do. */
.srow[b-sfuoa8s9aq] {
    display: grid;
    grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr);
    gap: 0.35rem 1.5rem;
    align-items: start;
    padding: 0.75rem 0;
    border-top: 1px solid color-mix(in srgb, var(--rl-border) 70%, transparent);
}

.srow__label[b-sfuoa8s9aq] { min-width: 0; overflow-wrap: anywhere; }

.srow--wide[b-sfuoa8s9aq] { grid-template-columns: minmax(0, 1fr); }

.srow__label[b-sfuoa8s9aq] { padding-top: 0.4rem; line-height: 1.35; }

.srow__label label[b-sfuoa8s9aq], .srow__name[b-sfuoa8s9aq] { font-weight: 600; font-size: 0.9rem; }

.srow__hint[b-sfuoa8s9aq] {
    display: block;
    margin-top: 0.2rem;
    color: var(--rl-text-muted);
    font-size: 0.8rem;
}

/* .field supplies the site's control styling; the row supplies the spacing. */
.srow__control.field[b-sfuoa8s9aq] { margin: 0; max-width: 34rem; gap: 0.35rem; }
.srow--wide .srow__control.field[b-sfuoa8s9aq] { max-width: none; }

.srow__help[b-sfuoa8s9aq] { position: relative; display: inline-flex; margin-left: 0.35rem; vertical-align: 0.05em; }

.srow__q[b-sfuoa8s9aq] {
    display: inline-grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    border: 1px solid var(--rl-border-strong);
    border-radius: 50%;
    background: transparent;
    color: var(--rl-text-muted);
    font: 700 0.68rem/1 var(--rl-font, inherit);
    cursor: help;
    transition: color var(--rl-dur) var(--rl-ease), border-color var(--rl-dur) var(--rl-ease);
}

.srow__q:hover[b-sfuoa8s9aq], .srow__q:focus-visible[b-sfuoa8s9aq] { color: var(--rl-accent); border-color: var(--rl-accent); outline: none; }

.srow__tip[b-sfuoa8s9aq] {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: -0.5rem;
    z-index: 30;
    width: min(26rem, 80vw);
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    background: var(--rl-surface-raised);
    box-shadow: var(--rl-shadow-md);
    color: var(--rl-text);
    font-size: 0.84rem;
    font-weight: 400;
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px);
    transition: opacity var(--rl-dur) var(--rl-ease), transform var(--rl-dur) var(--rl-ease), visibility 0s linear var(--rl-dur);
}

/* Bridges the gap to the button, so the pointer can move onto the tip to follow a link in it. */
.srow__tip[b-sfuoa8s9aq]::before { content: ""; position: absolute; left: 0; right: 0; top: -0.5rem; height: 0.5rem; }

.srow__help:hover .srow__tip[b-sfuoa8s9aq], .srow__help:focus-within .srow__tip[b-sfuoa8s9aq] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

@media (max-width: 720px) {
    .srow[b-sfuoa8s9aq] { grid-template-columns: minmax(0, 1fr); }
    .srow__label[b-sfuoa8s9aq] { padding-top: 0; }
    .srow__control.field[b-sfuoa8s9aq] { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .srow__tip[b-sfuoa8s9aq] { transition: none; }
}
/* /Components/Pages/Admin/Settings.razor.rz.scp.css */
.settings__loading[b-zll6i007hj] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.settings__spinner[b-zll6i007hj] {
    width: 0.8rem;
    height: 0.8rem;
    border: 2px solid var(--rl-border-strong);
    border-top-color: var(--rl-accent);
    border-radius: 50%;
    animation: rl-spin 0.8s linear infinite;
}

.settings__inline[b-zll6i007hj] { align-self: flex-start; }

.reset__options[b-zll6i007hj] { display: flex; flex-direction: column; gap: .15rem; margin: .35rem 0 .7rem; }
.reset__options .rl-check[b-zll6i007hj] { margin: 0; }

/* The DKIM record to publish: read-only, selectable, long enough to see it is the whole key. */
.maildkim[b-zll6i007hj] { display: grid; grid-template-columns: auto 1fr; gap: .35rem .6rem; align-items: start; margin-top: .55rem; width: 100%; }
.maildkim__label[b-zll6i007hj] { font-size: .8rem; color: var(--rl-text-muted); padding-top: .35rem; }
.maildkim__value[b-zll6i007hj] { width: 100%; min-width: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .78rem; word-break: break-all; resize: vertical; }

/* What the DNS check found, one line a record: a coloured edge for right, wrong or unknown, and the fix under it. */
.maildns[b-zll6i007hj] { list-style: none; margin: .55rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; width: 100%; }
.maildns__item[b-zll6i007hj] { display: flex; flex-direction: column; gap: .15rem; padding: .45rem .65rem; border: 1px solid var(--rl-border); border-left-width: 4px; border-radius: 8px; font-size: .85rem; overflow-wrap: anywhere; }
.maildns__item--ok[b-zll6i007hj] { border-left-color: var(--rl-ok); }
.maildns__item--bad[b-zll6i007hj] { border-left-color: var(--rl-danger); }
.maildns__item--unknown[b-zll6i007hj] { border-left-color: var(--rl-text-muted); }
.maildns__fix[b-zll6i007hj] { color: var(--rl-text-muted); }

@media (prefers-reduced-motion: reduce) {
    .settings__spinner[b-zll6i007hj] { animation-duration: 2.4s; }
}
/* /Components/Pages/Admin/SettingsGroup.razor.rz.scp.css */
/* The card itself (padding, hover lift, danger frame, tones) is a SectionCard, which this component does not author,
   so those rules live in SettingsPage.razor.css and reach in with ::deep. This sheet keeps to the rows' container. */

/* The card's gap already parts the rows from the title and hint; the first row needs no rule above it. */
.sset__body[b-ewbxjyfnl9] { margin: -0.15rem 0 0; }

.sset__body[b-ewbxjyfnl9]  .srow:first-child { border-top: 0; }
/* /Components/Pages/Admin/SettingsPage.razor.rz.scp.css */
/* A settings page: the banner across the top, a bar under it that sticks while the page scrolls (filter, state, save),
   then the jump list beside the groups. The groups are SectionCards rendered by SettingsGroup, so their rules here
   reach in with ::deep. */

.sp[b-3lnb2c3v9n] {
    display: grid;
    grid-template-columns: 11.5rem minmax(0, 1fr);
    column-gap: 1.5rem;
    align-items: start;
    max-width: 72rem;
}

.sp[b-3lnb2c3v9n]  .hero { grid-column: 1 / -1; }

.sp__bar[b-3lnb2c3v9n] {
    grid-column: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0 0 0.85rem;
    padding: 0.6rem 0;
    background: color-mix(in srgb, var(--rl-bg) 88%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rl-border);
}

.sp__bar .btn[b-3lnb2c3v9n] { display: inline-flex; align-items: center; gap: 0.4rem; }
.sp__bar .btn svg[b-3lnb2c3v9n] { width: 1rem; height: 1rem; flex: none; }

/* The state and the button keep to the right whether or not there is a filter on the left. */
.sp__state[b-3lnb2c3v9n] { margin-left: auto; }

.sp__state[b-3lnb2c3v9n] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.84rem;
    color: var(--rl-text-muted);
    white-space: nowrap;
}

.sp__state[b-3lnb2c3v9n]::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--rl-border-strong);
    transition: background var(--rl-dur) var(--rl-ease);
}

.sp__state--dirty[b-3lnb2c3v9n] { color: var(--rl-text); }
.sp__state--dirty[b-3lnb2c3v9n]::before { background: var(--rl-accent); }
.sp__state--saving[b-3lnb2c3v9n]::before { background: var(--rl-accent); animation: rl-blink 1s var(--rl-ease) infinite; }
.sp__state--saved[b-3lnb2c3v9n]::before { background: var(--rl-ok); }
.sp__state--failed[b-3lnb2c3v9n] { color: var(--rl-danger); }
.sp__state--failed[b-3lnb2c3v9n]::before { background: var(--rl-danger); }

.sp__alerts[b-3lnb2c3v9n] { grid-column: 1 / -1; display: grid; gap: 0.5rem; margin-bottom: 0.85rem; }

.sp__nav[b-3lnb2c3v9n] {
    position: sticky;
    top: 4.25rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp__navLink[b-3lnb2c3v9n] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.4rem 0.65rem;
    border-radius: var(--rl-radius);
    color: var(--rl-text-muted);
    font-size: 0.9rem;
    text-decoration: none;
    transition: background var(--rl-dur) var(--rl-ease), color var(--rl-dur) var(--rl-ease);
}

.sp__navLink svg[b-3lnb2c3v9n] { width: 1rem; height: 1rem; flex: none; opacity: 0.8; }
.sp__navLink span[b-3lnb2c3v9n] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sp__navLink:hover[b-3lnb2c3v9n], .sp__navLink:focus-visible[b-3lnb2c3v9n] {
    background: var(--rl-surface-raised);
    color: var(--rl-text);
    outline: none;
}

.sp__navLink:hover svg[b-3lnb2c3v9n], .sp__navLink:focus-visible svg[b-3lnb2c3v9n] { opacity: 1; }

.sp__navLink--danger[b-3lnb2c3v9n],
.sp__navLink--danger:hover[b-3lnb2c3v9n],
.sp__navLink--danger:focus-visible[b-3lnb2c3v9n] { color: var(--rl-danger); }

/* The groups, one card after another with the kit's rhythm rather than each card's own margin. */
.sp__body[b-3lnb2c3v9n] { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.sp__body[b-3lnb2c3v9n]  .sset { margin: 0; padding-bottom: 0.4rem; }

/* Groups land under the sticky bar when jumped to, not behind it. */
.sp__body[b-3lnb2c3v9n]  .sset { scroll-margin-top: 4.5rem; }

/* A card's entrance animation leaves it a stacking context of its own, so one under the pointer is lifted above the
   next or its help tip would be drawn beneath it. */
.sp__body[b-3lnb2c3v9n]  .sset:hover, .sp__body[b-3lnb2c3v9n]  .sset:focus-within { position: relative; z-index: 2; }

/* A danger group says so in its frame as well as its hairline. */
.sp__body[b-3lnb2c3v9n]  .sset--danger { border-color: color-mix(in srgb, var(--rl-danger) 55%, var(--rl-border)); }
.sp__body[b-3lnb2c3v9n]  .sset--danger .ui-card__title,
.sp__body[b-3lnb2c3v9n]  .sset--danger .ui-card__hint { color: var(--rl-danger); }

/* A group that names no tone of its own takes the next chart colour down the page, so neighbours differ. */
.sp__body[b-3lnb2c3v9n]  .sset--auto:nth-of-type(5n + 1) { --tone: var(--rl-chart-1); }
.sp__body[b-3lnb2c3v9n]  .sset--auto:nth-of-type(5n + 2) { --tone: var(--rl-chart-2); }
.sp__body[b-3lnb2c3v9n]  .sset--auto:nth-of-type(5n + 3) { --tone: var(--rl-chart-3); }
.sp__body[b-3lnb2c3v9n]  .sset--auto:nth-of-type(5n + 4) { --tone: var(--rl-chart-4); }
.sp__body[b-3lnb2c3v9n]  .sset--auto:nth-of-type(5n + 5) { --tone: var(--rl-chart-5); }

/* A filter that leaves a group with no rows hides the group; one that leaves the page empty says so. */
.sp--searchable .sp__body[b-3lnb2c3v9n]  .sset:not(:has(.srow)) { display: none; }
.sp__body[b-3lnb2c3v9n]  .sp__none { display: none; }
.sp--searchable .sp__body:not(:has(.srow))[b-3lnb2c3v9n]  .sp__none { display: flex; }

@media (max-width: 900px) {
    .sp[b-3lnb2c3v9n] { grid-template-columns: minmax(0, 1fr); }
    .sp__search[b-3lnb2c3v9n] { flex-basis: 100%; max-width: none; }
    .sp__nav[b-3lnb2c3v9n] {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        margin-bottom: 0.75rem;
        padding-bottom: 0.25rem;
    }
    .sp__navLink[b-3lnb2c3v9n] { white-space: nowrap; border: 1px solid var(--rl-border); }

    /* The bar takes two lines here: the filter on one, the state and the button under it. */
    .sp--searchable .sp__body[b-3lnb2c3v9n]  .sset { scroll-margin-top: 7.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sp__state--saving[b-3lnb2c3v9n]::before { animation: none; }
}
/* /Components/Pages/Admin/SiteStatus.razor.rz.scp.css */
/* Site status: the fleet and resource tables keep their own .status markup inside the kit's rounded .ui-table frame,
   so their heads take the frame's raised strip the way a kit .table's does. */

.status thead th[b-3uojxpge6v] {
    background: var(--rl-surface-raised);
    white-space: nowrap;
}

/* A box name that runs long wraps rather than pushing the state chip out of sight. */
.status__name[b-3uojxpge6v] { overflow-wrap: anywhere; }
/* /Components/Pages/Admin/StylesAdmin.razor.rz.scp.css */
/* The style library sits in the side column: a row whose description runs to two lines keeps its Add button at the top. */
.st__library .ui-row[b-yxtskz9umd] { align-items: flex-start; }
.st__library .ui-row__end[b-yxtskz9umd] { padding-top: 0.1rem; }
/* /Components/Pages/Admin/VoiceLibrary.razor.rz.scp.css */
/* Voice library — the search results table, the installed list and its pitch/index sliders. The page's frame
   (hero, ui-split, SectionCard, EmptyState) is the kit's. */

/* Results scroll inside their frame, with the header kept in view. */
.vl-results[b-3axt987aac] { max-height: 28rem; overflow: auto; }
.vl-results th[b-3axt987aac] { position: sticky; top: 0; z-index: 1; }
.vl-results__name[b-3axt987aac] { min-width: 12rem; max-width: 22rem; overflow-wrap: anywhere; font-weight: 600; }
.vl-results input[b-3axt987aac] { width: 100%; min-width: 9rem; }

.vl-list[b-3axt987aac] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vl-row__avatar[b-3axt987aac] { width: 1.8rem; height: 1.8rem; font-size: 0.66rem; }

.vl-row[b-3axt987aac] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rl-border);
}

.vl-row:last-child[b-3axt987aac] { border-bottom: 0; }

.vl-row__name[b-3axt987aac] {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vl-sliders[b-3axt987aac] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.65rem 1.25rem;
    font-size: 0.85rem;
}

.vl-slider[b-3axt987aac] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.vl-slider__label[b-3axt987aac] {
    flex: 0 0 6.5rem;
    color: var(--rl-text-muted);
    font-variant-numeric: tabular-nums;
}

.vl-slider input[type="range"][b-3axt987aac] {
    flex: 1;
    min-width: 0;
}
/* /Components/Pages/Admin/Workloads.razor.rz.scp.css */
/* Workloads: the process's figure tiles under a small heading of their own, and the tables' heads raised like a kit
   table's inside the rounded frame. */

.wl__server[b-j60zd9rqhq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.wl__server .ui-h3[b-j60zd9rqhq] { margin: 0; }

.status thead th[b-j60zd9rqhq] {
    background: var(--rl-surface-raised);
    white-space: nowrap;
}

/* The page a person is on is an address; let it break anywhere rather than widen the side column. */
.wl__page[b-j60zd9rqhq] { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* /Components/Pages/AppearanceSettings.razor.rz.scp.css */
/* The card wears the page kit's tone hairline (a SectionCard's), in the chart colour that sits apart from its
   neighbours on the settings page, so the fold is found by colour like the cards around it. */
.appearance[b-hgv1o6z727] {
    --tone: var(--rl-chart-4);
    box-shadow: inset 0 2px 0 color-mix(in srgb, var(--tone) 75%, transparent), var(--rl-shadow-sm);
}

/* The fold. The summary is the card's heading when closed, so a closed card is one line tall. */
.appearance__summary[b-hgv1o6z727] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    list-style: none;
    cursor: pointer;
    border-radius: 8px;
    margin: -0.25rem;
    padding: 0.25rem;
    transition: background var(--rl-dur) var(--rl-ease);
}

.appearance__summary[b-hgv1o6z727]::-webkit-details-marker { display: none; }
.appearance__summary:hover[b-hgv1o6z727] { background: var(--rl-surface-raised); }
.appearance__summary:focus-visible[b-hgv1o6z727] { outline: 2px solid var(--rl-accent); outline-offset: 2px; }

.appearance__summaryText[b-hgv1o6z727] { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.appearance__summaryText h2[b-hgv1o6z727] { margin: 0; font-size: 1rem; font-weight: 650; }
.appearance__summaryText .card__meta[b-hgv1o6z727] { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.appearance__chevron[b-hgv1o6z727] {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    color: var(--rl-text-muted);
    transition: transform var(--rl-dur) var(--rl-ease);
}

.appearance[open] > .appearance__summary .appearance__chevron[b-hgv1o6z727] { transform: rotate(90deg); }
.appearance[open] > .appearance__summary[b-hgv1o6z727] { margin-bottom: 0.4rem; }

.appearance__match[b-hgv1o6z727] {
    margin: 0.7rem 0 0.4rem;
    padding: 0.2rem 0.9rem 0.8rem;
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    background: var(--rl-surface-raised);
}

.appearance__match legend[b-hgv1o6z727] {
    float: none;
    width: auto;
    margin: 0;
    padding: 0 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.appearance__match .card__meta[b-hgv1o6z727] { margin: 0.2rem 0 0; }

/* Swatches are a fixed, modest width and sit left-aligned, so a row reads as a row of colours
   rather than being stretched to fill whatever width the card has. */
.appearance__grid[b-hgv1o6z727] {
    display: grid;
    grid-template-columns: repeat(auto-fill, 9rem);
    justify-content: start;
    gap: 0.5rem 0.9rem;
    margin: 0.6rem 0;
}

.appearance__grid .field[b-hgv1o6z727] { margin-bottom: 0; }

.appearance__color input[type="color"][b-hgv1o6z727] {
    display: block;
    width: 100%;
    height: 2rem;
    padding: 0.15rem;
    border: 1px solid var(--rl-border);
    border-radius: 8px;
    background: var(--rl-surface);
    cursor: pointer;
}

/* The native swatch draws its own square inner box; round and flatten it to match the frame. */
.appearance__color input[type="color"][b-hgv1o6z727]::-webkit-color-swatch-wrapper { padding: 0; }
.appearance__color input[type="color"][b-hgv1o6z727]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.appearance__color input[type="color"][b-hgv1o6z727]::-moz-color-swatch { border: 0; border-radius: 5px; }

.appearance__check[b-hgv1o6z727] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
}

.appearance__type[b-hgv1o6z727] {
    display: grid;
    grid-template-columns: minmax(12rem, 22rem) 8rem;
    justify-content: start;
    align-items: start;
    gap: 0.25rem 1.25rem;
}

.appearance__local[b-hgv1o6z727] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
}

.appearance__local input[type="file"][b-hgv1o6z727] { max-width: 18rem; }

.appearance__sample[b-hgv1o6z727] {
    margin: 0.5rem 0 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--rl-border);
    border-radius: 12px;
}

.appearance__sampleLine[b-hgv1o6z727] { margin: 0 0 0.35rem; }

.appearance__sampleAlert[b-hgv1o6z727] {
    margin: 0 0 0.6rem;
    font-family: var(--rl-font-fallback);
}

.appearance__sampleBtn[b-hgv1o6z727] {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    .appearance__type[b-hgv1o6z727] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Approvals.razor.rz.scp.css */
/* One parked call: who asked and where on a kit row, the arguments as written, then the decision. The buttons sit on
   the right with the yes last, as at the foot of a form, so Refuse is never where a hurried hand expects Approve. */

.appr__item[b-g1eiod8mtf] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.75rem 0 0.85rem;
}

.appr__item:first-child[b-g1eiod8mtf] { padding-top: 0.15rem; }
.appr__item:last-child[b-g1eiod8mtf] { padding-bottom: 0.1rem; }

.appr__row[b-g1eiod8mtf] { padding: 0; }

.appr__tool[b-g1eiod8mtf] { margin: 0; }

.appr__tool code[b-g1eiod8mtf] {
    font-size: 0.92rem;
    font-weight: 650;
    color: var(--rl-text);
    background: none;
    padding: 0;
}

.appr__where a[b-g1eiod8mtf] { color: inherit; text-decoration: underline; text-decoration-color: var(--rl-border-strong, var(--rl-border)); text-underline-offset: 2px; }
.appr__where a:hover[b-g1eiod8mtf] { color: var(--rl-text); }

.appr__item .approval__args[b-g1eiod8mtf] {
    margin: 0;
    max-height: 18rem;
    overflow: auto;
    border: 1px solid var(--rl-border);
}

.appr__acts[b-g1eiod8mtf] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.appr__acts .btn[b-g1eiod8mtf] { display: inline-flex; align-items: center; gap: 0.35rem; }
.appr__acts .btn svg[b-g1eiod8mtf] { width: 0.95rem; height: 0.95rem; }

@media (max-width: 560px) {
    .appr__acts[b-g1eiod8mtf] { justify-content: flex-start; }
}
/* /Components/Pages/Boards/Agenda.razor.rz.scp.css */
/* The view switch is a kit segmented switch (ui-kit.css .ui-seg) on the banner; these only lay out each button's
   icon and the default-view pip, and dim the buttons while the opening view is still being settled. */
.kb-agendaView__btn[b-4fu827zpho] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.kb-agendaView__btn svg[b-4fu827zpho] { width: 0.95rem; height: 0.95rem; flex: none; }
.kb-agendaView__btn:disabled[b-4fu827zpho] { cursor: default; opacity: 0.6; }

/* Marks the view the page opens on (set from the buttons' right-click menu or Your settings). */
.kb-agendaView__pip[b-4fu827zpho] {
    width: 0.38rem;
    height: 0.38rem;
    margin-left: 0.1rem;
    border-radius: 50%;
    background: var(--rl-accent);
}

.kb-agendaMenu__link[b-4fu827zpho] { text-decoration: none; }

/* The list view: one card per stretch of time, two abreast once each still gets a readable width. */
.kb-agenda__groups[b-4fu827zpho] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
    align-items: start;
}

.kb-agenda__groups[b-4fu827zpho]  .card { margin-bottom: 0; }

/* The due date leads the row at one width, so the titles line up. */
.kb-agenda__row .kb-due[b-4fu827zpho] { min-width: 5.5rem; justify-content: center; }
.kb-agenda__row .kb-agenda__title[b-4fu827zpho] { min-width: 0; flex: 0 1 auto; }
.kb-agenda__row .kb-agenda__where[b-4fu827zpho] { white-space: nowrap; }
/* /Components/Pages/Boards/AgendaCalendar.razor.rz.scp.css */
.cal[b-xbc200bjds] {
    --cal-head: 1.9rem;
    --cal-lane: 1.55rem;
    --cal-pad: 0.6rem;
    --cal-min: 7.25rem;
    max-width: 78rem;
    outline: none;
}

.cal:focus-visible[b-xbc200bjds] {
    box-shadow: var(--rl-ring);
    border-radius: var(--rl-radius);
}

.cal--week[b-xbc200bjds] {
    --cal-head: 2.2rem;
    --cal-lane: 2.75rem;
    --cal-pad: 1.5rem;
    --cal-min: 22rem;
}

/* ---- toolbar ---------------------------------------------------------------------------------------- */

.cal__bar[b-xbc200bjds] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.cal__nav[b-xbc200bjds] { display: inline-flex; align-items: center; gap: 0.35rem; }
.cal__chev[b-xbc200bjds] { width: 1rem; height: 1rem; display: block; }
.cal__chev--back[b-xbc200bjds] { transform: scaleX(-1); }

.cal__title[b-xbc200bjds] {
    flex: 1;
    min-width: 10rem;
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.cal__check[b-xbc200bjds] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--rl-text-muted);
    cursor: pointer;
}

/* ---- grid ------------------------------------------------------------------------------------------- */

/* No overflow clipping on the frame: a pop-up card may hang past it. The corners are rounded cell by cell instead. */
.cal__grid[b-xbc200bjds] {
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    background: var(--rl-surface);
}

.cal__dows[b-xbc200bjds] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--rl-border);
    border-radius: var(--rl-radius) var(--rl-radius) 0 0;
    background: var(--rl-surface-raised);
}

.cal__dows span[b-xbc200bjds] {
    padding: 0.4rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rl-text-muted);
}

.cal__week[b-xbc200bjds] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    row-gap: 2px;
    min-height: var(--cal-min);
}

.cal__week + .cal__week[b-xbc200bjds] { border-top: 1px solid var(--rl-border); }

.cal__cell[b-xbc200bjds] {
    min-width: 0;
    padding: 0.3rem 0.4rem;
    transition: background var(--rl-dur) var(--rl-ease);
}

.cal__cell + .cal__cell[b-xbc200bjds] { border-left: 1px solid var(--rl-border); }
.cal__cell--weekend[b-xbc200bjds] { background: color-mix(in srgb, var(--rl-surface-sunken) 45%, transparent); }
.cal__cell--out[b-xbc200bjds] { background: var(--rl-surface-sunken); }
.cal__cell--out .cal__num[b-xbc200bjds] { color: color-mix(in srgb, var(--rl-text-muted) 70%, transparent); }
.cal__cell--today[b-xbc200bjds] { background: color-mix(in srgb, var(--rl-accent) 7%, var(--rl-surface)); }

.cal__week:last-child > .cal__cell:nth-child(1)[b-xbc200bjds] { border-bottom-left-radius: var(--rl-radius); }
.cal__week:last-child > .cal__cell:nth-child(7)[b-xbc200bjds] { border-bottom-right-radius: var(--rl-radius); }

.cal__num[b-xbc200bjds] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.35rem;
    border-radius: 99px;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--rl-text-muted);
}

.cal--week .cal__num[b-xbc200bjds] { font-size: 0.95rem; min-width: 1.85rem; height: 1.85rem; }

.cal__cell--today .cal__num[b-xbc200bjds] {
    background: var(--rl-accent);
    color: var(--rl-accent-contrast);
    font-weight: 700;
}

/* ---- task bars -------------------------------------------------------------------------------------- */

.cal__chip[b-xbc200bjds] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    margin: 0 0.3rem;
    padding: 0 0.45rem 0 0.4rem;
    border: 1px solid transparent;
    border-left: 3px solid var(--kb-tint, var(--rl-text-muted));
    border-radius: 6px;
    background: color-mix(in srgb, var(--kb-tint, var(--rl-text-muted)) 14%, var(--rl-surface));
    color: var(--rl-text);
    font: inherit;
    font-size: 0.76rem;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: background var(--rl-dur) var(--rl-ease), border-color var(--rl-dur) var(--rl-ease), box-shadow var(--rl-dur) var(--rl-ease), transform var(--rl-dur) var(--rl-ease);
}

.cal__chip:hover[b-xbc200bjds] { background: color-mix(in srgb, var(--kb-tint, var(--rl-text-muted)) 24%, var(--rl-surface)); }
.cal__chip:focus-visible[b-xbc200bjds] { outline: 2px solid var(--rl-accent); outline-offset: 1px; }
.cal__chip--open[b-xbc200bjds] { box-shadow: 0 0 0 2px var(--rl-accent); }

/* A bar that carries on into the next or previous week loses its rounded end on that side, so it reads as one bar across rows. */
.cal__chip--fromBefore[b-xbc200bjds] { margin-left: 0; border-left-width: 1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal__chip--toAfter[b-xbc200bjds] { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }

.cal__chip--today[b-xbc200bjds] { font-weight: 600; }

.cal__chip--overdue[b-xbc200bjds] {
    border-color: color-mix(in srgb, var(--rl-danger) 55%, transparent);
    border-left-color: var(--kb-tint, var(--rl-danger));
    background: color-mix(in srgb, var(--rl-danger) 10%, var(--rl-surface));
}
.cal__chip--overdue .cal__chipTitle[b-xbc200bjds] { color: var(--rl-danger); font-weight: 600; }

.cal__chip--done[b-xbc200bjds] { opacity: 0.62; }
.cal__chip--done .cal__chipTitle[b-xbc200bjds] { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--rl-text) 45%, transparent); }
.cal__chip--done:hover[b-xbc200bjds], .cal__chip--done:focus-visible[b-xbc200bjds], .cal__chip--done.cal__chip--open[b-xbc200bjds] { opacity: 1; }

.cal__chipIcon[b-xbc200bjds] { flex: none; width: 0.85rem; height: 0.85rem; color: var(--rl-ok); }

.cal__pri[b-xbc200bjds] {
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--kb-tint);
}

.cal__chipText[b-xbc200bjds] { display: flex; flex-direction: column; min-width: 0; }

.cal__chipTitle[b-xbc200bjds], .cal__chipWhere[b-xbc200bjds] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cal__chipWhere[b-xbc200bjds] { font-size: 0.7rem; color: var(--rl-text-muted); }
.cal--week .cal__chip[b-xbc200bjds] { font-size: 0.82rem; padding-top: 0.2rem; padding-bottom: 0.2rem; }

.cal__more[b-xbc200bjds] {
    align-self: center;
    justify-self: start;
    margin: 0 0.3rem;
    padding: 0.05rem 0.4rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--rl-text-muted);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--rl-dur) var(--rl-ease), color var(--rl-dur) var(--rl-ease);
}

.cal__more:hover[b-xbc200bjds] { background: var(--rl-surface-sunken); color: var(--rl-text); }
.cal__more:focus-visible[b-xbc200bjds] { outline: 2px solid var(--rl-accent); outline-offset: 1px; }

.cal__none[b-xbc200bjds] { margin: 0.75rem 0 0; font-size: 0.9rem; color: var(--rl-text-muted); }

/* ---- pop-up card ------------------------------------------------------------------------------------ */

.cal__scrim[b-xbc200bjds] { position: fixed; inset: 0; z-index: 30; }

/* Positioned against the clicked bar's own grid area, so it opens beside it with no measuring. */
.cal__pop[b-xbc200bjds] {
    position: absolute;
    z-index: 31;
    top: calc(100% + 0.35rem);
    left: 0;
    width: min(22rem, calc(100vw - 2rem));
    padding: 0.85rem 0.95rem 0.9rem;
    border: 1px solid var(--rl-border);
    border-top: 4px solid var(--kb-tint, var(--rl-accent));
    border-radius: var(--rl-radius);
    background: var(--rl-surface-raised);
    color: var(--rl-text);
    box-shadow: var(--rl-shadow-lg, 0 18px 48px rgb(0 0 0 / .3));
    font-size: 0.85rem;
    text-align: left;
    cursor: auto;
    animation: cal-pop-b-xbc200bjds var(--rl-dur) var(--rl-ease);
}

.cal__pop:focus[b-xbc200bjds] { outline: none; }
.cal__pop:focus-visible[b-xbc200bjds] { outline: 2px solid var(--rl-accent); outline-offset: 2px; }
.cal__pop--end[b-xbc200bjds] { left: auto; right: 0; }
.cal__pop--up[b-xbc200bjds] { top: auto; bottom: calc(100% + 0.35rem); }

@keyframes cal-pop-b-xbc200bjds {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
    .cal__pop[b-xbc200bjds] { animation: none; }
}

.cal__popHead[b-xbc200bjds] { display: flex; align-items: flex-start; gap: 0.5rem; }

.cal__popHead h3[b-xbc200bjds] {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.cal__popClose[b-xbc200bjds] { margin: -0.3rem -0.4rem 0 0; }
.cal__popClose svg[b-xbc200bjds] { width: 1rem; height: 1rem; display: block; }

.cal__popWhere[b-xbc200bjds] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin: 0.25rem 0 0.6rem;
    color: var(--rl-text-muted);
    font-size: 0.8rem;
}

.cal__popWhere a[b-xbc200bjds] { color: inherit; font-weight: 600; }
.cal__popWhere a:hover[b-xbc200bjds] { color: var(--rl-accent); }

.cal__swatch[b-xbc200bjds] { width: 0.6rem; height: 0.6rem; border-radius: 3px; background: var(--kb-tint); flex: none; }

.cal__popBadges[b-xbc200bjds], .cal__popLabels[b-xbc200bjds] { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.55rem; }

.cal__popFacts[b-xbc200bjds] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 0.75rem;
    margin: 0 0 0.6rem;
}

.cal__popFacts dt[b-xbc200bjds] { color: var(--rl-text-muted); font-size: 0.78rem; }
.cal__popFacts dd[b-xbc200bjds] { margin: 0; font-size: 0.8rem; }
.cal__popChecklist[b-xbc200bjds] { display: inline-flex; align-items: center; gap: 0.45rem; font-variant-numeric: tabular-nums; }

.cal__popExcerpt[b-xbc200bjds] {
    margin: 0 0 0.7rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    background: var(--rl-surface-sunken);
    color: var(--rl-text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cal__popActions[b-xbc200bjds] { display: flex; gap: 0.4rem; justify-content: flex-end; }

/* ---- narrow screens --------------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .cal[b-xbc200bjds] { --cal-lane: 1.3rem; --cal-min: 5.5rem; --cal-head: 1.6rem; }
    .cal--week[b-xbc200bjds] { --cal-lane: 2.6rem; --cal-min: 16rem; }
    .cal__dows span[b-xbc200bjds] { padding: 0.35rem 0.2rem; text-align: center; font-size: 0.65rem; }
    .cal__cell[b-xbc200bjds] { padding: 0.2rem; text-align: center; }
    .cal__chip[b-xbc200bjds] { margin: 0 0.1rem; padding: 0 0.25rem 0 0.2rem; font-size: 0.66rem; }
    .cal__pri[b-xbc200bjds] { display: none; }
    .cal__more[b-xbc200bjds] { margin: 0; padding: 0 0.15rem; font-size: 0.66rem; }

    .cal__pop[b-xbc200bjds],
    .cal__pop--end[b-xbc200bjds],
    .cal__pop--up[b-xbc200bjds] {
        position: fixed;
        top: auto;
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        width: auto;
        max-height: 75vh;
        overflow-y: auto;
    }
}
/* /Components/Pages/Chat.razor.rz.scp.css */
/* Three rows: a thin title bar, a scrolling thread, and a composer card pinned to the bottom.
   The thread and the composer share one centred column so the draft lines up with the reply
   above it, the way a document lines up with its margins. */
.chat[b-lzwphsap0x] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background-color: var(--rl-bg);
    background-image: var(--rl-bg-image, none);
    background-attachment: fixed;
    color: var(--rl-text);
}

/* ---- incognito banner ---- */
.chat__incognito[b-lzwphsap0x] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--rl-border);
    background: var(--rl-surface-sunken);
    color: var(--rl-text);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.chat__incognito > svg[b-lzwphsap0x] {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    fill: none;
    stroke: var(--rl-accent);
    stroke-width: 1.6;
}

.chat__incognitoText[b-lzwphsap0x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.chat__incognitoText span[b-lzwphsap0x] {
    color: var(--rl-text-muted);
}

.chat__incognitoText code[b-lzwphsap0x] {
    overflow-wrap: anywhere;
}

.chat__incognitoNote[b-lzwphsap0x] {
    width: 100%;
    color: var(--rl-text) !important;
}

.chat__incognitoActions[b-lzwphsap0x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .chat__incognito[b-lzwphsap0x] {
        flex-direction: column;
    }
}

/* ---- title bar ---- */
.chat__bar[b-lzwphsap0x] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--rl-border);
    flex-shrink: 0;
    min-height: 3rem;
}

.chat__title[b-lzwphsap0x] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 32rem;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0.25rem 0.45rem;
    border: none;
    border-radius: 7px;
    background: none;
    color: var(--rl-text);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat__title svg[b-lzwphsap0x] { width: 0.9rem; height: 0.9rem; opacity: 0; flex-shrink: 0; }
.chat__title:hover[b-lzwphsap0x] { background: var(--rl-surface-raised); }
.chat__title:hover svg[b-lzwphsap0x] { opacity: 0.6; }

.chat__title--muted[b-lzwphsap0x] { color: var(--rl-text-muted); cursor: default; }
.chat__title--muted:hover[b-lzwphsap0x] { background: none; }

.chat__rename[b-lzwphsap0x] {
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    width: min(28rem, 60%);
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--rl-accent);
    border-radius: 7px;
    background: var(--rl-surface-raised);
    color: var(--rl-text);
}

.chat__crumb[b-lzwphsap0x] {
    font-size: 0.78rem;
    color: var(--rl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat__crumb[b-lzwphsap0x]  .proj-icon { margin: -0.1rem 0.3rem 0 0; }

.chat__barRight[b-lzwphsap0x] { margin-left: auto; display: flex; gap: 0.4rem; }

/* ---- thread ---- */
.chat__main[b-lzwphsap0x] { display: flex; flex: 1; min-height: 0; }

.chat__thread[b-lzwphsap0x] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.5rem 1.25rem 0.5rem;
}

/* The one measure shared by the thread and the composer below it. */
.thread-col[b-lzwphsap0x] {
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.chat__foot .thread-col[b-lzwphsap0x] { gap: 0.5rem; }

/* ---- a chat that has not started ----------------------------------------
   The greeting (ChatIntro) and the composer sit together a little above the middle of the page, the way a
   search box sits under its logo; the first message sends the composer back down to the foot. Both rows keep
   their own elements, so the draft, the voice strip and the chips do not move between parents mid-type. */
.chat--fresh .chat__main[b-lzwphsap0x] { flex: 0 0 auto; margin-top: auto; }
.chat--fresh .chat__thread[b-lzwphsap0x] { overflow: visible; padding-bottom: 0; }
.chat--fresh .chat__foot[b-lzwphsap0x] { margin-bottom: auto; padding-bottom: max(0.75rem, 16vh); }

/* ---- messages ----------------------------------------------------------
   The model's turn is set as prose on the page, not in a bubble: a reply can run
   for pages, and a container that long stops reading as a chat message and starts
   reading as a wall. Only the person's own turn keeps a bubble, so the eye can find
   where each exchange begins. With data-messages-right (the default), that bubble
   sits on the right like an SMS thread; without it, both sides share the left. */
.msg[b-lzwphsap0x] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-width: 100%;
}

.msg--user[b-lzwphsap0x] {
    align-self: flex-start;
    align-items: flex-start;
    max-width: min(38rem, 100%);
}

:root[data-messages-right] .msg--user[b-lzwphsap0x] {
    align-self: flex-end;
    align-items: flex-end;
}

.msg__body[b-lzwphsap0x] {
    border-radius: var(--rl-radius);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.65;
}

.msg--user .msg__body[b-lzwphsap0x] {
    padding: 0.65rem 0.95rem;
    background: var(--rl-bubble-user);
    color: var(--rl-bubble-user-text);
}

/* An assistant turn holds rendered markdown, which must not also collapse whitespace. */
.msg--assistant .msg__body[b-lzwphsap0x] { white-space: normal; }

.msg__author[b-lzwphsap0x] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Hidden until the reply is hovered or the keyboard reaches it, so a long thread
   reads as prose rather than as a column of buttons. */
.msg__actions[b-lzwphsap0x] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.5rem;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.msg:hover .msg__actions[b-lzwphsap0x],
.msg:focus-within .msg__actions[b-lzwphsap0x] { opacity: 1; }

.msg__meta[b-lzwphsap0x] { font-size: 0.75rem; color: var(--rl-text-muted); }

.msg__copyDone[b-lzwphsap0x] { display: none; }
[data-done] .msg__copyIdle[b-lzwphsap0x] { display: none; }
[data-done] .msg__copyDone[b-lzwphsap0x] { display: block; color: var(--rl-accent); }

/* ---- reasoning ---- */
.msg__reasoning[b-lzwphsap0x] {
    border: 1px solid var(--rl-border);
    border-radius: 10px;
    background: var(--rl-surface-raised);
    padding: 0.4rem 0.75rem;
    font-size: 0.86rem;
}

.msg__reasoning summary[b-lzwphsap0x] {
    cursor: pointer;
    color: var(--rl-text-muted);
    list-style: none;
}

.msg__reasoning summary[b-lzwphsap0x]::-webkit-details-marker { display: none; }
.msg__reasoning summary[b-lzwphsap0x]::before { content: "▸ "; }
.msg__reasoning[open] summary[b-lzwphsap0x]::before { content: "▾ "; }

.msg__reasoning pre[b-lzwphsap0x] {
    margin: 0.5rem 0 0.25rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--rl-text-muted);
    max-height: 18rem;
    overflow-y: auto;
}

/* Three dots that pulse while the reply is still streaming and has produced no text yet. */
.msg__pending[b-lzwphsap0x] { display: inline-flex; gap: 0.25rem; padding: 0.2rem 0; }

.msg__pending span[b-lzwphsap0x] {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--rl-text-muted);
    animation: rl-pulse-b-lzwphsap0x 1.2s ease-in-out infinite;
}

.msg__pending span:nth-child(2)[b-lzwphsap0x] { animation-delay: 0.15s; }
.msg__pending span:nth-child(3)[b-lzwphsap0x] { animation-delay: 0.3s; }

/* The folded turn: one clickable status line while the reply is still being produced. */
.msg__live[b-lzwphsap0x] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    max-width: 100%;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--rl-border);
    border-radius: 10px;
    background: var(--rl-surface-raised);
    color: var(--rl-text-muted);
    font: inherit;
    font-size: 0.86rem;
    text-align: left;
    cursor: pointer;
}

.msg__live:hover[b-lzwphsap0x] { color: var(--rl-text); }

.msg__liveStatus[b-lzwphsap0x] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg__live .msg__pending[b-lzwphsap0x] { padding: 0; }

@keyframes rl-pulse-b-lzwphsap0x {
    0%, 60%, 100% { opacity: 0.25; }
    30% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .msg__pending span[b-lzwphsap0x] { animation: none; opacity: 0.6; }
}

.chat__error[b-lzwphsap0x] {
    align-self: center;
    color: var(--rl-danger);
    background: var(--rl-surface-raised);
    border: 1px solid var(--rl-danger);
    border-radius: 10px;
    padding: 0.6rem 1rem;
}

/* ---- attachments, sources, plan ---------------------------------------- */
.msg__files[b-lzwphsap0x] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.msg__image[b-lzwphsap0x] { max-width: 260px; border-radius: 10px; border: 1px solid var(--rl-border); }

.msg__file[b-lzwphsap0x] {
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--rl-border);
    border-radius: 8px;
    background: var(--rl-surface-raised);
    color: inherit;
    text-decoration: none;
}

.msg__sources[b-lzwphsap0x] {
    margin: 0;
    padding-left: 1.4rem;
    font-size: 0.82rem;
    color: var(--rl-text-muted);
}

.msg__sources a[b-lzwphsap0x] { color: var(--rl-accent); }

.msg__plan[b-lzwphsap0x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--rl-text-muted);
    border: 1px dashed var(--rl-border);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
}

.msg__planFile[b-lzwphsap0x] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    color: var(--rl-accent);
    cursor: pointer;
}

.msg__planFile:hover[b-lzwphsap0x] { text-decoration: underline; }

.msg__planNote[b-lzwphsap0x] { font-size: 0.8rem; font-style: italic; }

.msg__planFile svg[b-lzwphsap0x] { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ---- tool calls ----------------------------------------------------------
   The rows themselves are styled in app.css: they are their own component, so a
   scoped rule here would never match them.
-------------------------------------------------------------------------- */

/* What happened to the turn rather than to a file — a spent tool budget, a reply
   cut off at the output limit. Set apart from the run rows, because it is not
   something the agent did. */
.msg__notice[b-lzwphsap0x] {
    margin: 0;
    padding: 0.3rem 0.55rem;
    border-left: 2px solid #d08700;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--rl-text-muted);
}

/* ---- composer ----------------------------------------------------------- */
.chat__foot[b-lzwphsap0x] { flex-shrink: 0; padding: 0.5rem 1.25rem 0.75rem; }

.chips[b-lzwphsap0x] { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.chip[b-lzwphsap0x] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 20rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--rl-border);
    border-radius: 99px;
    background: var(--rl-surface-raised);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip svg[b-lzwphsap0x] { width: 0.85rem; height: 0.85rem; color: var(--rl-text-muted); flex-shrink: 0; }
.chip button[b-lzwphsap0x] { background: none; border: none; color: var(--rl-text-muted); cursor: pointer; padding: 0 0 0 0.1rem; }
.chip button:hover[b-lzwphsap0x] { color: var(--rl-text); }

.composer[b-lzwphsap0x] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.7rem 0.5rem;
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    background: var(--rl-surface);
}

.composer:focus-within[b-lzwphsap0x] { border-color: var(--rl-accent); box-shadow: var(--rl-ring); }

.composer__box[b-lzwphsap0x] {
    font: inherit;
    resize: none;
    border: none;
    outline: none;
    background: none;
    color: var(--rl-text);
    line-height: 1.55;
    padding: 0.25rem 0.3rem;
    max-height: 16rem;
    overflow-y: auto;
}

.composer__tools[b-lzwphsap0x] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.composer__send[b-lzwphsap0x] { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; }

.send[b-lzwphsap0x] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: var(--rl-accent);
    color: var(--rl-accent-contrast);
    cursor: pointer;
}

.send svg[b-lzwphsap0x] { width: 1.1rem; height: 1.1rem; }
.send:disabled[b-lzwphsap0x] { background: var(--rl-surface-sunken); color: var(--rl-text-muted); cursor: not-allowed; }
.send--stop[b-lzwphsap0x] { background: var(--rl-surface-sunken); color: var(--rl-text); }

.chat__hint[b-lzwphsap0x] {
    margin: 0;
    font-size: 0.72rem;
    color: var(--rl-text-muted);
    text-align: center;
}

.chat__hint--live[b-lzwphsap0x] {
    color: var(--rl-accent);
}

.chat__hint--warn[b-lzwphsap0x] {
    color: var(--rl-danger);
}

/* ---- canvas ------------------------------------------------------------- */
.canvas[b-lzwphsap0x] {
    position: relative;
    width: 380px;
    flex-shrink: 0;
    border-left: 1px solid var(--rl-border);
    background: var(--rl-surface);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Drag the left edge. How wide this pane is decides whether a build log is read or
   guessed at, and that is not a call a stylesheet can make once for every machine.
   The width it sets lives on <html>, because the panel itself is re-rendered on
   every streamed token and an inline style would not survive it. */
.canvas__grip[b-lzwphsap0x] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    width: 7px;
    cursor: col-resize;
    z-index: 5;
    touch-action: none;
}

.canvas__grip[b-lzwphsap0x]::after {
    content: "";
    position: absolute;
    inset: 0 3px;
    background: var(--rl-accent);
    opacity: 0;
    transition: opacity 0.12s;
}

.canvas__grip:hover[b-lzwphsap0x]::after, .canvas__grip[data-dragging][b-lzwphsap0x]::after { opacity: 0.65; }

.canvas__head[b-lzwphsap0x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--rl-border);
}

.canvas__editor[b-lzwphsap0x] {
    font: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    resize: none;
    height: 40%;
    padding: 0.7rem 0.9rem;
    border: none;
    border-bottom: 1px solid var(--rl-border);
    background: var(--rl-surface-raised);
    color: var(--rl-text);
}

.canvas__preview[b-lzwphsap0x] { flex: 1; min-height: 0; overflow-y: auto; padding: 0.9rem; font-size: 0.9rem; }

.canvas--changes[b-lzwphsap0x] { width: 32rem; }

/* Figures and a bar, not a document: narrower than the panes that hold prose. */
.canvas--context[b-lzwphsap0x] { width: 24rem; }

/* Tiles and bars, no prose at all. */
.canvas--metrics[b-lzwphsap0x] { width: 25rem; }

/* A plan is read as a document, so it gets the room a document needs. */
.canvas--plan[b-lzwphsap0x] { width: 34rem; }

/* Output is monospace and only wraps when asked, so this is the widest pane by
   default — and the one worth dragging wider when a command prints a wide table. */
.canvas--term[b-lzwphsap0x] { width: var(--rl-term-w, 42rem); }

.canvas__note[b-lzwphsap0x] { font-size: 0.78rem; color: var(--rl-text-muted); align-self: center; }

/* Blocks butt closer together than the cards in the other panes: consecutive
   commands are one session, not a list of unrelated things. */
.canvas__scroll.term[b-lzwphsap0x] { gap: 0.45rem; }

.term__empty[b-lzwphsap0x] { margin: 0; font-size: 0.85rem; color: var(--rl-text-muted); }

.canvas--plan .canvas__head strong[b-lzwphsap0x] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.canvas--plan .canvas__editor[b-lzwphsap0x] { height: 45%; }

.canvas__error[b-lzwphsap0x] {
    margin: 0;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--rl-border);
    font-size: 0.82rem;
    color: var(--rl-danger);
}

.canvas__scroll[b-lzwphsap0x] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.canvas__preview :first-child[b-lzwphsap0x] { margin-top: 0; }

@media (max-width: 900px) {
    .canvas[b-lzwphsap0x] { position: fixed; inset: 3rem 0 0 auto; width: min(24rem, 100%); z-index: 15; }
    /* The panel is already the width of the screen here, so there is nothing to drag. */
    .canvas--term[b-lzwphsap0x] { width: min(24rem, 100%); }
    .canvas__grip[b-lzwphsap0x] { display: none; }
}

/* Markdown produced by the model is styled in app.css, not here: it arrives as a MarkupString
   and so never carries this component's scope attribute, which a scoped rule needs to match. */

/* ---- one decision for the whole reply ----
   Sits directly above the composer, where the reader's eye already is when a run
   finishes, rather than behind a drawer they have to remember to open. */
.approve-bar[b-lzwphsap0x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--rl-border);
    border-radius: 9px;
    background: var(--rl-surface-raised);
    font-size: 0.85rem;
}

.approve-bar > svg[b-lzwphsap0x] { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--rl-text-muted); }
.approve-bar > span[b-lzwphsap0x] { flex: 1; min-width: 9rem; color: var(--rl-text-muted); }
/* /Components/Pages/ConvertPage.razor.rz.scp.css */
/* The project picker in the compact strip a ToolLayout page draws (tool-pages.css), here outside one: room under it, and nothing
   at all when the person has no projects and the picker draws nothing. */
.convert__setup[b-thl8sjdrfa] {
    margin: 0 0 1rem;
}

.convert__setup:not(:has(*))[b-thl8sjdrfa] {
    display: none;
}

/* The converted file's name beside its download button, cut short when it is long. */
.convert__savedName[b-thl8sjdrfa] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.convert__preview[b-thl8sjdrfa] {
    margin-top: 0;
}
/* /Components/Pages/Dialogue.razor.rz.scp.css */
.studio__state[b-7m88a1tie6] {
    font-size: 0.85rem;
    color: var(--rl-text-muted);
}

.dialogue__problems[b-7m88a1tie6] {
    margin: 0.4rem 0;
    padding-left: 1.2rem;
}

/* The kit's table frame (ui-table) does the border and the sideways scroll; the head is drawn here the way the kit draws a
   .table's, since this one is a grid of inputs rather than a Bootstrap table. */
.dialogue__scroll[b-7m88a1tie6] {
    background: var(--rl-surface);
}

.dialogue__table[b-7m88a1tie6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.dialogue__table th[b-7m88a1tie6] {
    text-align: left;
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid var(--rl-border);
    background: var(--rl-surface-raised);
    color: var(--rl-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dialogue__table td[b-7m88a1tie6] {
    padding: 0.4rem 0.5rem;
    vertical-align: top;
    border-bottom: 1px solid var(--rl-border);
}

.dialogue__table tbody tr:last-child td[b-7m88a1tie6] {
    border-bottom: 0;
}

.dialogue__table .dialogue__num[b-7m88a1tie6] {
    padding-top: 0.6rem;
    color: var(--rl-text-muted);
    font-variant-numeric: tabular-nums;
}

.dialogue__table input[b-7m88a1tie6],
.dialogue__table textarea[b-7m88a1tie6],
.dialogue__table select[b-7m88a1tie6] {
    width: 100%;
    min-width: 7rem;
    font: inherit;
}

.dialogue__table textarea[b-7m88a1tie6] {
    min-width: 16rem;
    resize: vertical;
}

.dialogue__take[b-7m88a1tie6] {
    min-width: 13rem;
}

.dialogue__take audio[b-7m88a1tie6] {
    width: 12.5rem;
    height: 2rem;
}

.dialogue__error[b-7m88a1tie6] {
    display: block;
    color: var(--rl-danger);
    margin-bottom: 0.3rem;
}

.dialogue__row--failed td[b-7m88a1tie6] {
    background: color-mix(in srgb, var(--rl-danger) 8%, transparent);
}

.dialogue__row--speaking td[b-7m88a1tie6] {
    background: color-mix(in srgb, var(--rl-accent) 10%, transparent);
}
/* /Components/Pages/DiffReport.razor.rz.scp.css */
/* Three rows — a compact hero, the review, one decision — with the review split into a fixed
   list of files and a pane that fills whatever is left. The list stays put while the
   pane scrolls, so moving between files never loses your place in the list. */
.report[b-dyepzl0yie] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background-color: var(--rl-bg);
    background-image: var(--rl-bg-image, none);
    background-attachment: fixed;
    color: var(--rl-text);
}

/* The page runs edge to edge (app.css gives .report no padding), so the hero brings its own margin and keeps its height. */
.report[b-dyepzl0yie]  .report__hero {
    flex: none;
    margin: 0.75rem 1rem;
}

.report__empty[b-dyepzl0yie] {
    padding: 0 1rem 1rem;
}

.report__body[b-dyepzl0yie] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    border-top: 1px solid var(--rl-border);
}

/* ---- the file list ---- */
.report__rail[b-dyepzl0yie] {
    overflow-y: auto;
    border-right: 1px solid var(--rl-border);
    background: var(--rl-surface-raised);
}

.rail[b-dyepzl0yie] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.7rem;
    border: none;
    border-bottom: 1px solid var(--rl-border);
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.rail:hover[b-dyepzl0yie] { background: var(--rl-surface); }

/* The bar rather than a fill: a selected row still has to show its own colours. */
.rail--on[b-dyepzl0yie] { background: var(--rl-surface); box-shadow: inset 3px 0 0 var(--rl-accent); }

.rail__top[b-dyepzl0yie] { display: flex; align-items: baseline; gap: 0.5rem; }

.rail__name[b-dyepzl0yie] {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rail__stat[b-dyepzl0yie] {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.rail__bottom[b-dyepzl0yie] { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; min-width: 0; }

/* Long paths matter at the end, not the start, so the ellipsis goes on the left. */
.rail__dir[b-dyepzl0yie] {
    flex: 1;
    min-width: 0;
    font-size: 0.72rem;
    color: var(--rl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    text-align: left;
}

/* A file's tags (a second write, new, emptied) are the kit's chips, kept small enough for the rail. */
.rail__bottom .ui-chip[b-dyepzl0yie] {
    flex-shrink: 0;
    font-size: 0.64rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---- the pane ---- */
.report__main[b-dyepzl0yie] {
    min-width: 0;
    overflow: auto;
    padding: 0.9rem 1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.report__file[b-dyepzl0yie] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 0.5rem;
    background: var(--rl-bg);
}

.report__path[b-dyepzl0yie] {
    flex: 1;
    min-width: 8rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    word-break: break-all;
}

.report__fileActions[b-dyepzl0yie] { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }

/* ---- the decision ---- */
.report__foot[b-dyepzl0yie] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--rl-border);
    background: var(--rl-surface-raised);
}

.report__msg[b-dyepzl0yie] { font-size: 0.82rem; color: var(--rl-text-muted); }
.report__foot .btn svg[b-dyepzl0yie] { width: 0.95rem; height: 0.95rem; }

@media (max-width: 60rem) {
    .report__body[b-dyepzl0yie] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 12rem minmax(0, 1fr); }
    .report__rail[b-dyepzl0yie] { border-right: none; border-bottom: 1px solid var(--rl-border); }
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* The request id sits in a chip on the dark banner; its code reads white there rather than in the page's code colour. */

.hero__chip code[b-owh5hdg35w] {
    padding: 0;
    background: none;
    color: #fff;
    font-size: 0.74rem;
    user-select: all;
}
/* /Components/Pages/Favorites.razor.rz.scp.css */
/* The filter's clear button sits inside the kit's search pill, centred on its right end. */
.fav-search input[b-nswb5nzqqs] { padding-right: 2rem; }

.fav-search .side__searchClear[b-nswb5nzqqs] {
    top: 50%;
    right: 0.55rem;
    transform: translateY(-50%);
    border-radius: 50%;
}

.fav-search .side__searchClear:hover[b-nswb5nzqqs] { color: var(--rl-text); }

/* The star in the tile's corner is the way off the page, so it stays lit rather than fading in on hover. */
.fav-tile .icon-btn--star[b-nswb5nzqqs] { flex: none; align-self: flex-start; margin: -0.2rem -0.3rem 0 0; }

.fav-tile__chips[b-nswb5nzqqs] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
}

/* An archived favourite is still one, but it reads as put away, as an archived board does. */
.fav-tile--archived[b-nswb5nzqqs] { background: var(--rl-surface-sunken); }
.fav-tile--archived .ui-tile__title[b-nswb5nzqqs] { color: var(--rl-text-muted); }

/* A long project name gives way to the date rather than pushing it off the tile. */
.fav-tile__project[b-nswb5nzqqs] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
}

.fav-tile__project > span[b-nswb5nzqqs] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-tile__project:hover[b-nswb5nzqqs] { color: var(--rl-text); }
.fav-tile__project:hover > span[b-nswb5nzqqs] { text-decoration: underline; text-underline-offset: 2px; }

.fav-tile__when[b-nswb5nzqqs] { margin-left: auto; white-space: nowrap; }
/* /Components/Pages/GamesPage.razor.rz.scp.css */
/* /games: the kit's rows (ui-kit.css). A title's Play and Install drop under its name on a narrow column rather than
   squeezing the name; the install's progress line takes the accent so it is seen while it runs. */

.gv-list .ui-row[b-81w8etx6q0] { flex-wrap: wrap; }
.gv-list .ui-row__end[b-81w8etx6q0] { margin-left: auto; }

.gv-progress[b-81w8etx6q0] { color: var(--rl-accent); font-variant-numeric: tabular-nums; }
/* /Components/Pages/GoPage.razor.rz.scp.css */
/* The link page: a narrow column in the middle of the page, wide enough for the banner, with the address it was given
   in a quiet tile beneath. */

.go[b-0ik450mag9] { max-width: 44rem; margin: 2.5rem auto; padding: 0 1rem; }

.go__address[b-0ik450mag9] { overflow-wrap: anywhere; word-break: break-all; }

.go__opening[b-0ik450mag9] { max-width: 44rem; margin: 2.5rem auto; padding: 0 1rem; }
/* /Components/Pages/Library.razor.rz.scp.css */
/* The library in the page kit's language. The older library rules live in app.css and tool-pages.css (the type cards, the
   upload label, the tool picker); this sheet only fits them into the hero and the Find files card. */

/* A project's library shows the project's icon beside its name in the banner. */
.library__heroTitle[b-tsg0ywbwft] { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; max-width: 100%; }
.library__heroTitle > span[b-tsg0ywbwft] { min-width: 0; overflow-wrap: anywhere; }
.library__heroTitle[b-tsg0ywbwft]  .library__projectIcon { margin: 0; flex: none; }

/* The stat strip is passed even before anything has loaded; an empty one would be a bare dark band under the banner. */
.library[b-tsg0ywbwft]  .hero__stats:not(:has(*)) { display: none; }

/* ---- the Find files card ---- */

/* The kit's search box, with the clear button the old one had sitting inside its right end. */
.library__find input[b-tsg0ywbwft] { padding-right: 2rem; }
.library__find .side__searchClear[b-tsg0ywbwft] { top: 50%; right: 0.55rem; transform: translateY(-50%); line-height: 1; border-radius: 999px; }
.library__find .side__searchClear:hover[b-tsg0ywbwft] { color: var(--rl-text); background: var(--rl-surface-sunken); }

/* A small muted name before each pill select, so "Nothing" under Group by still says what it is. */
.library__pick[b-tsg0ywbwft] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    margin: 0;
    color: var(--rl-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Batch and project names can be long; the pill ellipsises rather than pushing the row wider than the card. */
.library__pick select[b-tsg0ywbwft] { min-width: 0; max-width: min(18rem, 70vw); text-overflow: ellipsis; }

.library__pickers[b-tsg0ywbwft] { gap: 0.5rem 1rem; }

.library__run[b-tsg0ywbwft] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; }

/* ---- cards ---- */

.library__foot[b-tsg0ywbwft] { justify-content: flex-end; }
.library[b-tsg0ywbwft]  .library__confirm p { margin: 0; }

.library__groupLink[b-tsg0ywbwft], .library__groupName[b-tsg0ywbwft] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library__groupLink[b-tsg0ywbwft] { color: inherit; text-decoration: none; }
.library__groupLink:hover[b-tsg0ywbwft] { text-decoration: underline; text-underline-offset: 2px; }

/* The selection bar keeps its sticky place over the grid, with the accent hairline the kit's cards wear. */
.library__selection[b-tsg0ywbwft] {
    border-color: color-mix(in srgb, var(--rl-accent) 35%, var(--rl-border));
    box-shadow: inset 0 2px 0 color-mix(in srgb, var(--rl-accent) 75%, transparent), 0 2px 10px rgb(0 0 0 / 0.18);
}

.library__more[b-tsg0ywbwft] { justify-content: center; }
/* /Components/Pages/MembershipPage.razor.rz.scp.css */
/* The plan tiles: the blurb is the point of a plan, so it is shown whole rather than clamped as a tile's description is. */
.membership__blurb[b-zecupw14o3] { margin: 0; color: var(--rl-text-muted); font-size: 0.86rem; line-height: 1.5; }
.membership__role[b-zecupw14o3] { margin: 0; line-height: 1.5; }

/* The plan held wears its colour as a ring, so it is found among the others at a glance. */
.membership__plan--held[b-zecupw14o3] { border-color: color-mix(in srgb, hsl(var(--tile-hue) 70% 55%) 60%, var(--rl-border)); }

.membership__foot[b-zecupw14o3] { justify-content: flex-end; }

/* The figures arrive with the membership; until then the strip would be a bare band under the banner. */
.membership[b-zecupw14o3]  .hero__stats:not(:has(*)) { display: none; }
/* /Components/Pages/MemorySettings.razor.rz.scp.css */
/* Memory and instructions: lines of memory are plain inputs in a list, so editing one is just typing in it. */

.memory__list[b-h50ijfav4d] {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.memory__row[b-h50ijfav4d],
.memory__add[b-h50ijfav4d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.memory__text[b-h50ijfav4d] { flex: 1 1 auto; min-width: 0; }

.memory__actions[b-h50ijfav4d] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.memory__empty[b-h50ijfav4d] { opacity: 0.7; margin: 0 0 0.75rem; }

textarea[b-h50ijfav4d] { width: 100%; resize: vertical; }
/* /Components/Pages/Mesh/PrepareMesh.razor.rz.scp.css */
/* What the run will make, in a sunken box at the foot of the settings, like a receipt before the button. */
.prepare__facts[b-58e6sh3a40] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.3rem 1rem;
    margin: 0.5rem 0 0;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--rl-border);
    border-radius: 10px;
    background: var(--rl-surface-sunken);
    font-size: 0.88rem;
}

.prepare__facts dt[b-58e6sh3a40] {
    color: var(--rl-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    align-self: center;
}

.prepare__facts dd:nth-of-type(2)[b-58e6sh3a40],
.prepare__facts dd:nth-of-type(3)[b-58e6sh3a40] {
    font-variant-numeric: tabular-nums;
}

.prepare__facts dd[b-58e6sh3a40] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* /Components/Pages/MusicBot/MusicPlayerPage.razor.rz.scp.css */
/* Holds the card at roughly the player's height while the circuit connects, so nothing jumps when it arrives. */
.mbpage__loading[b-wa8hik4eg9] { display: flex; align-items: center; justify-content: center; min-height: 16rem; margin: 0; }

/* The YouTube engine card: what is installed on one line, and where, which can be a long path, under it. */
.mbpage__engineState[b-wa8hik4eg9] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0; }
.mbpage__path[b-wa8hik4eg9] { flex-basis: 100%; overflow-wrap: anywhere; }
/* /Components/Pages/MusicBot/MusicPlayerPanel.razor.rz.scp.css */
/* The visualizer strip. js/music-visualizer.js draws it in the canvas's own `color`, which is the theme accent. */
.mb__viz[b-o9kaw57kfk] {
    position: relative;
    height: 7rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--rl-border);
    background: linear-gradient(to top, color-mix(in srgb, var(--rl-accent) 8%, var(--rl-surface-sunken)), var(--rl-surface-sunken));
}

.mb__viz[data-mode="off"][b-o9kaw57kfk] { display: none; }

.mb__vizCanvas[b-o9kaw57kfk] { display: block; width: 100%; height: 100%; color: var(--rl-accent); }

/* Until the first track plays there is nothing to draw: a resting line says where the picture will be. */
.mb:not([data-viz="live"]) .mb__viz[b-o9kaw57kfk]::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: 6px;
    height: 2px;
    border-radius: 1px;
    background: color-mix(in srgb, var(--rl-accent) 30%, transparent);
}

.mb--compact .mb__viz[b-o9kaw57kfk] { height: 3.25rem; }

.mb[data-viz="none"] .mb__viz[b-o9kaw57kfk],
.mb[data-viz="none"] .mb__vizBtn[b-o9kaw57kfk] { display: none; }
/* /Components/Pages/MyMachineSetup.razor.rz.scp.css */
/* The guided setup's own touches on the page kit. The older setup__ rules (the warning, the command box, the download
   row) are in app.css; these only fit the numbered cards, the package rows and the service rows. */

/* The banner's chips and figures are passed before the page knows anything; empty, they would be bare bands. */
.setup[b-uoax7gg1d0]  .hero__stats:not(:has(*)), .setup[b-uoax7gg1d0]  .hero__chips:not(:has(*)) { display: none; }

/* The step number sits in the tinted square a card's icon would. */
.setup__num[b-uoax7gg1d0] { font-size: 0.85rem; font-weight: 750; font-variant-numeric: tabular-nums; }

/* ---- step 1: the packages ---- */
label.ui-row[b-uoax7gg1d0] { cursor: pointer; }
.setup__pkg .ui-row__lead input[b-uoax7gg1d0] { display: block; margin: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--rl-accent); }
.setup__pkg--missing label.ui-row[b-uoax7gg1d0] { cursor: default; }
.setup__pkg--missing .ui-row__main[b-uoax7gg1d0] { opacity: 0.8; }
.setup__list code[b-uoax7gg1d0], .setup__svcs code[b-uoax7gg1d0] { overflow-wrap: anywhere; }

/* ---- step 3: the services ---- */
.setup__svcBad[b-uoax7gg1d0] { color: var(--rl-danger); }

.setup__foot[b-uoax7gg1d0] { justify-content: flex-end; }
/* /Components/Pages/Narrator.razor.rz.scp.css */
.narrator__steps[b-48aqj36zlk] {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.4rem;
    line-height: 1.5;
}

.narrator__steps li[b-48aqj36zlk]::marker {
    color: var(--rl-text-muted);
    font-weight: 700;
}

.narrator__text[b-48aqj36zlk] {
    margin: 0;
    line-height: 1.5;
}

/* The code just made: a sunken box, so it reads as the one thing to copy. */
.narrator__code[b-48aqj36zlk] {
    padding: 0.75rem 0.85rem 0.25rem;
    border: 1px solid color-mix(in srgb, var(--rl-accent) 40%, var(--rl-border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--rl-accent) 6%, var(--rl-surface-sunken));
}

.narrator__code .field[b-48aqj36zlk] {
    max-width: none;
}

.narrator__code input[b-48aqj36zlk] {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.narrator__code .card__actions[b-48aqj36zlk] {
    margin: 0 0 0.6rem;
}

.narrator__modes[b-48aqj36zlk],
.narrator__keys[b-48aqj36zlk] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
    margin: 0.5rem 0 0;
    line-height: 1.5;
}

.narrator__modes dt[b-48aqj36zlk] {
    font-weight: 600;
}

.narrator__modes dd[b-48aqj36zlk],
.narrator__keys dd[b-48aqj36zlk] {
    margin: 0;
    min-width: 0;
}

.narrator__keys dt[b-48aqj36zlk] {
    white-space: nowrap;
}

.narrator__moves[b-48aqj36zlk] {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.45rem;
    line-height: 1.5;
}

@media (max-width: 40rem) {
    .narrator__modes[b-48aqj36zlk] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
    }

    .narrator__modes dd[b-48aqj36zlk] {
        margin-bottom: 0.45rem;
    }
}

kbd[b-48aqj36zlk] {
    font-family: inherit;
    font-size: 0.85em;
    padding: 0.05em 0.4em;
    border: 1px solid currentColor;
    border-radius: 4px;
    opacity: 0.85;
}
/* /Components/Pages/Panel.razor.rz.scp.css */
/* The agents dashboard. Laid out against its own width (a container, not the window) because the sidebar can be
   open or folded, and every card draws its figures in a shape of its own. Colours come from the theme tokens only,
   so light and dark both follow. */

.dash[b-38f5e3bum6] { container: dash / inline-size; }

.dash__scope[b-38f5e3bum6] { margin: 0.15rem 0 1rem; max-width: 42rem; }
.dash__error[b-38f5e3bum6] { color: var(--rl-danger); }

/* ---- shared pieces ------------------------------------------------------- */

.dash .card[b-38f5e3bum6] { margin-bottom: 0; min-width: 0; padding: 0.85rem 0.95rem; }
.dash .card__empty[b-38f5e3bum6] { margin: 0; font-size: 0.88rem; }

.dash__tone--1[b-38f5e3bum6] { --tone: var(--rl-chart-1); }
.dash__tone--2[b-38f5e3bum6] { --tone: var(--rl-chart-2); }
.dash__tone--3[b-38f5e3bum6] { --tone: var(--rl-chart-3); }
.dash__tone--4[b-38f5e3bum6] { --tone: var(--rl-chart-4); }
.dash__tone--5[b-38f5e3bum6] { --tone: var(--rl-chart-5); }

/* A card wears its colour as a hairline along the top and on its icon, so each one is found by colour as well as
   by name. An inset shadow rather than a border, so it follows the rounded corners. */
.dash__card[b-38f5e3bum6] { box-shadow: inset 0 2px 0 color-mix(in srgb, var(--tone, var(--rl-accent)) 75%, transparent), var(--rl-shadow-sm); }

.dash__head[b-38f5e3bum6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.dash__head .card__meta[b-38f5e3bum6] { font-size: 0.78rem; }

.dash__h[b-38f5e3bum6] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 650;
}

.dash__ico[b-38f5e3bum6] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--tone, var(--rl-accent)) 16%, transparent);
    color: var(--tone, var(--rl-accent));
}

.dash__ico svg[b-38f5e3bum6] { width: 1rem; height: 1rem; }

.dash__eyebrow[b-38f5e3bum6] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rl-text-muted);
}

.dash__sub[b-38f5e3bum6] {
    margin: 0 0 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rl-text-muted);
}

.dash__when[b-38f5e3bum6] { color: var(--rl-text-muted); font-size: 0.78rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash__chip[b-38f5e3bum6] { margin-left: 0; white-space: nowrap; }
.dash__nil[b-38f5e3bum6] { color: var(--rl-text-muted); }

.dash__listMain[b-38f5e3bum6] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.dash__listMain strong[b-38f5e3bum6] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.88rem; }
.dash__listMain .roles__desc[b-38f5e3bum6] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; color: var(--rl-text-muted); }

.dash__trend[b-38f5e3bum6] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: 0.2rem;
    padding: 0.05rem 0.4rem;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 650;
    white-space: nowrap;
}

.dash__trend.is-up[b-38f5e3bum6] { color: var(--rl-ok); background: color-mix(in srgb, var(--rl-ok) 14%, transparent); }
.dash__trend.is-down[b-38f5e3bum6] { color: var(--rl-text-muted); background: var(--rl-surface-sunken); }

.dash__pulse[b-38f5e3bum6] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--rl-accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--rl-accent) 60%, transparent);
    animation: dash-ping-b-38f5e3bum6 1.6s ease-out infinite;
}

/* Segmented switch: whose work, and which series the chart draws. */
.dash__seg[b-38f5e3bum6] {
    display: inline-flex;
    border: 1px solid var(--rl-border);
    border-radius: 8px;
    padding: 2px;
    background: var(--rl-surface-sunken);
}

.dash__segBtn[b-38f5e3bum6] {
    border: 0;
    background: transparent;
    color: var(--rl-text-muted);
    font: inherit;
    font-size: 0.82rem;
    padding: 0.25rem 0.7rem;
    border-radius: 6px;
    white-space: nowrap;
    cursor: pointer;
}

.dash__seg--small .dash__segBtn[b-38f5e3bum6] { font-size: 0.75rem; padding: 0.15rem 0.55rem; }
.dash__segBtn:hover[b-38f5e3bum6] { color: inherit; }
.dash__segBtn.is-on[b-38f5e3bum6] { background: var(--rl-surface-raised); color: inherit; box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }

/* ---- approvals waiting: the one thing on the page that asks for a hand ---- */

.dash__alert[b-38f5e3bum6] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--rl-warning, #e3b341) 55%, var(--rl-border));
    border-radius: var(--rl-radius);
    background: linear-gradient(90deg, color-mix(in srgb, var(--rl-warning, #e3b341) 18%, var(--rl-surface)), var(--rl-surface) 75%);
    color: inherit;
    text-decoration: none;
}

.dash__alertIco[b-38f5e3bum6] {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--rl-warning, #e3b341);
    color: #241a02;
    animation: dash-nudge-b-38f5e3bum6 2.6s ease-in-out infinite;
}

.dash__alertIco svg[b-38f5e3bum6] { width: 1.15rem; height: 1.15rem; }
.dash__alertText[b-38f5e3bum6] { flex: 1; min-width: 0; font-size: 0.9rem; }

/* ---- bands ---------------------------------------------------------------- */

.dash__top[b-38f5e3bum6],
.dash__mid[b-38f5e3bum6] {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 0.85rem;
}

.dash__topMain[b-38f5e3bum6] { display: grid; gap: 0.85rem; grid-template-rows: auto 1fr; min-width: 0; }

/* The feed is the tall one; the column beside it stacks to roughly its height rather than stretching a card. */
.dash__mid[b-38f5e3bum6] { align-items: start; }
.dash__side[b-38f5e3bum6] { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }

.dash__pair[b-38f5e3bum6] {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

@container dash (min-width: 36rem) and (max-width: 61.99rem) {
    .dash__side[b-38f5e3bum6] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .dash__side > .card:nth-child(3)[b-38f5e3bum6] { grid-column: 1 / -1; }
}

@container dash (min-width: 62rem) {
    .dash__top[b-38f5e3bum6] { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .dash__mid[b-38f5e3bum6] { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }

    /* Side by side, the column of cards sets the band's height and the feed fills it, scrolling for the rest —
       contain: size keeps the feed's own length out of the row's sizing. */
    .dash__feedCard[b-38f5e3bum6] { contain: size; min-height: 26rem; display: flex; flex-direction: column; }
    .dash__feedCard > .dash__feed[b-38f5e3bum6] { flex: 1; min-height: 0; margin-right: -0.5rem; padding-right: 0.5rem; overflow-y: auto; scrollbar-width: thin; }
}

/* ---- now: an eclipse that turns while anything runs ----------------------- */

.dash__now[b-38f5e3bum6] {
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(110% 65% at 0% 0%, color-mix(in srgb, var(--rl-chart-4) 11%, transparent), transparent 62%),
        var(--rl-surface);
}

.dash__now.is-live[b-38f5e3bum6] {
    border-color: color-mix(in srgb, var(--rl-accent) 45%, var(--rl-border));
    background:
        radial-gradient(110% 65% at 0% 0%, color-mix(in srgb, var(--rl-accent) 15%, transparent), transparent 62%),
        var(--rl-surface);
}

.dash__nowHead[b-38f5e3bum6] { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.dash__nowTitle[b-38f5e3bum6] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.dash__nowNote[b-38f5e3bum6] { font-size: 1.05rem; font-weight: 650; }
.dash__now.is-live .dash__eyebrow[b-38f5e3bum6] { color: var(--rl-accent); }
.dash__nowBody[b-38f5e3bum6] { flex: 1; margin: 0; }

.dash__orb[b-38f5e3bum6] {
    --size: 3rem;
    --ring: 3px;
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--size);
    height: var(--size);
}

/* The corona: a ring of light brightest on one side, with a bead where it breaks round the edge, and a blurred
   copy of the same sweep behind it as the glow. */
.dash__orb[b-38f5e3bum6]::before,
.dash__orb[b-38f5e3bum6]::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: conic-gradient(from 200deg,
        color-mix(in srgb, var(--rl-chart-4) 30%, transparent) 0%,
        var(--rl-chart-4) 22%,
        var(--rl-accent) 38%,
        color-mix(in srgb, var(--rl-accent) 30%, #fff) 45%,
        var(--rl-accent) 52%,
        var(--rl-chart-4) 70%,
        color-mix(in srgb, var(--rl-chart-4) 30%, transparent) 100%);
}

.dash__orb[b-38f5e3bum6]::before {
    inset: 0;
    z-index: -1;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring) - 1px), #000 calc(100% - var(--ring)));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring) - 1px), #000 calc(100% - var(--ring)));
}

.dash__orb[b-38f5e3bum6]::after {
    inset: -6%;
    z-index: -2;
    filter: blur(calc(var(--size) * 0.12));
    opacity: 0.55;
}

/* The moon is dark in either theme — it is the eclipse, not a surface. */
.dash__orbFace[b-38f5e3bum6] {
    display: grid;
    place-items: center;
    width: calc(100% - var(--ring) * 2 - 3px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #3b2168, #1b0f38 55%, #0c0620);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06), 0 2px 10px rgb(12 6 32 / 0.35);
    color: #fff;
    font-size: calc(var(--size) * 0.38);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.dash__orb--big[b-38f5e3bum6] { --size: 8.5rem; --ring: 5px; }
.dash__now.is-live .dash__orb[b-38f5e3bum6]::before,
.dash__now.is-live .dash__orb[b-38f5e3bum6]::after { animation: dash-spin-b-38f5e3bum6 2.8s linear infinite; }
.dash__now:not(.is-live) .dash__orb[b-38f5e3bum6]::after { animation: dash-breathe-b-38f5e3bum6 5s ease-in-out infinite; }

.dash__idle[b-38f5e3bum6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding: 0.75rem 0 1rem;
    text-align: center;
}

.dash__idleText[b-38f5e3bum6] { display: flex; flex-direction: column; gap: 0.2rem; }
.dash__idleText strong[b-38f5e3bum6] { font-size: 1.15rem; }
.dash__idleText span[b-38f5e3bum6] { color: var(--rl-text-muted); font-size: 0.88rem; }

/* Only the tall left-hand column has room to stand the eclipse up; stacked, it lies beside its words. */
@container dash (max-width: 61.99rem) {
    .dash__idle[b-38f5e3bum6] { flex-direction: row; text-align: left; padding: 0.25rem 0 0.5rem; }
    .dash__orb--big[b-38f5e3bum6] { --size: 4.75rem; --ring: 4px; }
}

/* Running items: a rail and a tag in the colour of their kind, and a track that fills or sweeps. */
.dash__runs[b-38f5e3bum6] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.dash__run[b-38f5e3bum6] {
    --kind: var(--rl-accent);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
    padding: 0.55rem 0.7rem 0.6rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--kind) 25%, var(--rl-border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--kind) 6%, var(--rl-surface-raised));
}

.dash__run[b-38f5e3bum6]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    bottom: 0.55rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--kind);
}

.dash__run--batch[b-38f5e3bum6] { --kind: var(--rl-chart-2); }
.dash__run--workflow[b-38f5e3bum6] { --kind: var(--rl-chart-4); }
.dash__run--tool[b-38f5e3bum6] { --kind: var(--rl-chart-3); }
.dash__run--build[b-38f5e3bum6] { --kind: var(--rl-chart-5); }

.dash__runKind[b-38f5e3bum6] {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kind);
}

.dash__runTime[b-38f5e3bum6] {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    padding: 0.1rem 0.45rem;
    border-radius: 99px;
    background: color-mix(in srgb, var(--kind) 14%, transparent);
    color: var(--kind);
    font: 600 0.72rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: nowrap;
}

.dash__runMain[b-38f5e3bum6] { grid-column: 1; grid-row: 2; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.dash__runTitle[b-38f5e3bum6] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dash__runSub[b-38f5e3bum6] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; color: var(--rl-text-muted); }
.dash__runActs[b-38f5e3bum6] { grid-column: 2; grid-row: 2; display: flex; gap: 0.35rem; align-self: center; }

.dash__runTrack[b-38f5e3bum6] {
    grid-column: 1 / -1;
    grid-row: 3;
    height: 3px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--kind) 15%, transparent);
    overflow: hidden;
}

.dash__runTrack > span[b-38f5e3bum6] { display: block; height: 100%; border-radius: inherit; background: var(--kind); transition: width 0.4s var(--rl-ease); }
.dash__runTrack.is-busy > span[b-38f5e3bum6] { width: 35%; animation: dash-sweep-b-38f5e3bum6 1.6s ease-in-out infinite; }

.dash__nowFoot[b-38f5e3bum6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding-top: 0.8rem;
    border-top: 1px dashed var(--rl-border);
}

.dash__flag[b-38f5e3bum6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--rl-border);
    border-radius: 10px;
    background: var(--rl-surface-raised);
    color: inherit;
    font-size: 0.84rem;
    text-decoration: none;
    transition: border-color var(--rl-dur) var(--rl-ease);
}

.dash__flag:hover[b-38f5e3bum6] { border-color: var(--rl-accent); }
.dash__flag > span[b-38f5e3bum6] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash__flag svg[b-38f5e3bum6] { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: var(--rl-chart-5); }
.dash__flag--ok svg[b-38f5e3bum6] { color: var(--rl-ok); }
.dash__flagNote[b-38f5e3bum6] { color: var(--rl-text-muted); }

.dash__flag--warn[b-38f5e3bum6] {
    border-color: color-mix(in srgb, var(--rl-warning, #e3b341) 60%, var(--rl-border));
    background: color-mix(in srgb, var(--rl-warning, #e3b341) 14%, var(--rl-surface-raised));
}

.dash__flag--warn svg[b-38f5e3bum6] { color: var(--rl-warning, #e3b341); }

/* ---- the three figures: a line, a ring, columns ---------------------------- */

.dash__metrics[b-38f5e3bum6] { display: grid; gap: 0.85rem; grid-template-columns: minmax(0, 1fr); }

@container dash (min-width: 36rem) {
    .dash__metrics[b-38f5e3bum6] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dash__metric[b-38f5e3bum6] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    min-height: 7.4rem;
    padding: 0.8rem 0.9rem;
    overflow: hidden;
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    background: var(--rl-surface);
    box-shadow: var(--rl-shadow-sm);
    color: inherit;
    text-decoration: none;
    animation: rl-rise 0.22s var(--rl-ease) both;
    transition: border-color var(--rl-dur) var(--rl-ease), transform var(--rl-dur) var(--rl-ease);
}

a.dash__metric[href]:hover[b-38f5e3bum6] { border-color: var(--rl-accent); transform: translateY(-1px); }

.dash__metricLabel[b-38f5e3bum6] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--rl-text-muted);
}

.dash__metricValue[b-38f5e3bum6] {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.dash__metricNote[b-38f5e3bum6] { font-size: 0.76rem; color: var(--rl-text-muted); }
.dash__metricNote strong[b-38f5e3bum6] { color: var(--rl-text); font-weight: 650; }
.dash__metricNote--bad[b-38f5e3bum6] { color: var(--rl-danger); }

/* A line: the fortnight's replies as an area along the foot of the card. */
.dash__metric--spark[b-38f5e3bum6] {
    padding-bottom: 2.7rem;
    background:
        linear-gradient(to top, color-mix(in srgb, var(--rl-chart-1) 7%, transparent), transparent 55%),
        var(--rl-surface);
}

.dash__spark[b-38f5e3bum6] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2.6rem;
    color: var(--rl-chart-1);
    pointer-events: none;
}

/* A ring: the success rate as a gauge, coloured by how worried to be. */
.dash__metric--ring[b-38f5e3bum6] { flex-direction: row; align-items: center; gap: 0.9rem; }

.dash__ring[b-38f5e3bum6] { --ring: var(--rl-text-muted); width: 4.75rem; height: 4.75rem; flex-shrink: 0; }
.dash__ring.is-good[b-38f5e3bum6] { --ring: var(--rl-ok); }
.dash__ring.is-fair[b-38f5e3bum6] { --ring: var(--rl-warning, #e3b341); }
.dash__ring.is-bad[b-38f5e3bum6] { --ring: var(--rl-danger); }

.dash__ringTrack[b-38f5e3bum6] { fill: none; stroke: var(--rl-surface-sunken); stroke-width: 3.4; }
.dash__ringFill[b-38f5e3bum6] { fill: none; stroke: var(--ring); stroke-width: 3.4; stroke-linecap: round; filter: drop-shadow(0 0 2px color-mix(in srgb, var(--ring) 45%, transparent)); }

.dash__ringText[b-38f5e3bum6] {
    fill: var(--rl-text);
    font-size: 8.5px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    font-variant-numeric: tabular-nums;
}

.dash__ringSide[b-38f5e3bum6] { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }

/* Columns: the week's tokens day by day, beside the total. */
.dash__colsRow[b-38f5e3bum6] { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; margin-top: auto; }
.dash__colsText[b-38f5e3bum6] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.dash__minicols[b-38f5e3bum6] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
    width: 4.6rem;
    height: 3rem;
    padding-bottom: 0.15rem;
}

.dash__minicols > span[b-38f5e3bum6] {
    flex: 1;
    border-radius: 2px 2px 1px 1px;
    background: color-mix(in srgb, var(--rl-chart-2) 45%, transparent);
}

.dash__minicols > span.is-today[b-38f5e3bum6] { background: var(--rl-chart-2); box-shadow: 0 0 8px color-mix(in srgb, var(--rl-chart-2) 50%, transparent); }

/* ---- the fortnight chart ---------------------------------------------------- */

.dash__chart[b-38f5e3bum6] { display: flex; flex-direction: column; }

.dash__chartSum[b-38f5e3bum6] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    margin: -0.15rem 0 0.4rem;
    font-size: 0.84rem;
    color: var(--rl-text-muted);
}

.dash__chartSum strong[b-38f5e3bum6] { font-size: 1.4rem; color: var(--rl-text); font-variant-numeric: tabular-nums; }
.dash__chartPrev[b-38f5e3bum6] { margin-left: auto; font-size: 0.76rem; }

/* Quarter gridlines drawn by the background, in the content box so they line up with the bars' percentages. */
.dash__bars[b-38f5e3bum6] {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 0.3rem;
    align-items: end;
    min-height: 8rem;
    padding-top: 1.25rem;
    border-bottom: 1px solid var(--rl-chart-grid);
    background-image: linear-gradient(to top, color-mix(in srgb, var(--rl-chart-grid) 80%, transparent) 1px, transparent 1px);
    background-size: 100% 25%;
    background-position: bottom;
    background-origin: content-box;
    background-clip: content-box;
}

.dash__barCol[b-38f5e3bum6] { position: relative; height: 100%; display: flex; align-items: flex-end; }

.dash__bar[b-38f5e3bum6] {
    position: relative;
    display: block;
    width: 100%;
    height: var(--h);
    overflow: hidden;
    border-radius: 5px 5px 1px 1px;
    background: linear-gradient(to top, color-mix(in srgb, var(--rl-chart-1) 50%, transparent), var(--rl-chart-1));
    transition: height 0.35s var(--rl-ease), filter var(--rl-dur) var(--rl-ease);
}

.dash__barCol:hover .dash__bar[b-38f5e3bum6] { filter: brightness(1.2); }

.dash__barCol.is-today .dash__bar[b-38f5e3bum6] {
    background: linear-gradient(to top, color-mix(in srgb, var(--rl-chart-4) 55%, transparent), var(--rl-chart-4));
    box-shadow: 0 0 14px color-mix(in srgb, var(--rl-chart-4) 45%, transparent);
}

/* The day's figure floats over its bar: always for today, on hover for the rest. */
.dash__barCol[b-38f5e3bum6]::after {
    content: attr(data-v);
    position: absolute;
    left: 50%;
    bottom: calc(var(--h) + 0.25rem);
    z-index: 1;
    padding: 0.05rem 0.35rem;
    border-radius: 6px;
    background: var(--rl-text);
    color: var(--rl-surface);
    font-size: 0.68rem;
    font-weight: 650;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity var(--rl-dur) var(--rl-ease);
}

.dash__barCol:hover[b-38f5e3bum6]::after,
.dash__barCol.is-today[b-38f5e3bum6]::after { opacity: 1; }
.dash__barCol.is-today[b-38f5e3bum6]::after { background: var(--rl-chart-4); color: var(--rl-bg); }
.dash__bars:has(.dash__barCol:not(.is-today):hover) .dash__barCol.is-today[b-38f5e3bum6]::after { opacity: 0; }

.dash__barFail[b-38f5e3bum6] { position: absolute; left: 0; right: 0; top: 0; background: var(--rl-danger); }

.dash__days[b-38f5e3bum6] {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 0.3rem;
    margin-top: 0.35rem;
    color: var(--rl-text-muted);
    font-size: 0.72rem;
    line-height: 1.15;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.dash__days small[b-38f5e3bum6] { display: block; font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; }
.dash__days .is-weekend[b-38f5e3bum6] { opacity: 0.55; }
.dash__days .is-today[b-38f5e3bum6] { color: var(--rl-chart-4); font-weight: 700; }

.dash__foot[b-38f5e3bum6] { margin: 0.5rem 0 0; font-size: 0.76rem; color: var(--rl-text-muted); }
.dash__key[b-38f5e3bum6] { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; vertical-align: middle; margin-right: 0.25rem; }
.dash__key--fail[b-38f5e3bum6] { background: var(--rl-danger); }

/* ---- recently: a timeline, a day at a time ---------------------------------- */

.dash__ev--online[b-38f5e3bum6] { --dot: var(--rl-ok); }
.dash__ev--bad[b-38f5e3bum6] { --dot: var(--rl-danger); }
.dash__ev--warn[b-38f5e3bum6] { --dot: var(--rl-warning, #e3b341); }
.dash__ev--busy[b-38f5e3bum6] { --dot: var(--rl-accent); }
.dash__ev--off[b-38f5e3bum6] { --dot: var(--rl-text-muted); }

.dash__feed[b-38f5e3bum6] { display: flex; flex-direction: column; }

.dash__feedDay[b-38f5e3bum6] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.85rem 0 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rl-text-muted);
}

.dash__feedDay:first-child[b-38f5e3bum6] { margin-top: 0; }
.dash__feedDay[b-38f5e3bum6]::after { content: ""; flex: 1; height: 1px; background: var(--rl-border); }

.dash__events[b-38f5e3bum6] { position: relative; list-style: none; margin: 0; padding: 0; }

.dash__events[b-38f5e3bum6]::before {
    content: "";
    position: absolute;
    left: calc(0.425rem - 1px);
    top: 0.75rem;
    bottom: 0.75rem;
    width: 2px;
    border-radius: 2px;
    background: var(--rl-border);
}

.dash__ev[b-38f5e3bum6] {
    position: relative;
    display: grid;
    grid-template-columns: 0.85rem minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    padding: 0.45rem 0;
}

.dash__evDot[b-38f5e3bum6] {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 0.85rem;
    height: 0.85rem;
    margin-top: 0.2rem;
    border: 2.5px solid var(--dot, var(--rl-text-muted));
    border-radius: 50%;
    background: var(--rl-surface);
}

.dash__ev--bad .dash__evDot[b-38f5e3bum6],
.dash__ev--warn .dash__evDot[b-38f5e3bum6] { background: var(--dot); }
.dash__ev--busy .dash__evDot[b-38f5e3bum6] { animation: dash-ping-b-38f5e3bum6 1.6s ease-out infinite; }

.dash__evBody[b-38f5e3bum6] { min-width: 0; }
.dash__evLine[b-38f5e3bum6] { font-size: 0.88rem; line-height: 1.4; overflow-wrap: anywhere; color: var(--rl-text-muted); }
.dash__evLine strong[b-38f5e3bum6] { margin-right: 0.15rem; color: var(--rl-text); font-weight: 650; }
.dash__evSubject[b-38f5e3bum6] { color: var(--rl-text); }

.dash__evTag[b-38f5e3bum6] {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.02rem 0.4rem;
    border-radius: 99px;
    background: color-mix(in srgb, var(--dot, var(--rl-text-muted)) 16%, transparent);
    color: var(--dot, var(--rl-text-muted));
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 0.08em;
}

.dash__evOutcome[b-38f5e3bum6] {
    display: -webkit-box;
    margin-top: 0.1rem;
    overflow: hidden;
    color: var(--rl-text-muted);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dash__evThread[b-38f5e3bum6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    margin-top: 0.3rem;
    padding: 0.12rem 0.5rem 0.12rem 0.4rem;
    border-radius: 6px;
    background: var(--rl-surface-sunken);
    color: var(--rl-text-muted);
    font-size: 0.74rem;
    text-decoration: none;
}

.dash__evThread > span[b-38f5e3bum6] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash__evThread svg[b-38f5e3bum6] { width: 0.8rem; height: 0.8rem; flex-shrink: 0; }
a.dash__evThread:hover[b-38f5e3bum6] { color: var(--rl-accent); }
.dash__ev > .dash__when[b-38f5e3bum6] { padding-top: 0.12rem; }

/* ---- scheduled: tear-off countdowns ------------------------------------------ */

.dash__sched[b-38f5e3bum6] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.dash__sched li[b-38f5e3bum6] { display: flex; align-items: center; gap: 0.75rem; }

.dash__whenBadge[b-38f5e3bum6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.1rem;
    height: 3.1rem;
    border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--rl-border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--tone) 12%, var(--rl-surface-raised));
    box-shadow: inset 0 4px 0 color-mix(in srgb, var(--tone) 55%, transparent);
    color: var(--tone);
    line-height: 1.05;
}

.dash__whenBadge small[b-38f5e3bum6] { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.dash__whenBadge b[b-38f5e3bum6] { font-size: 1rem; font-weight: 750; font-variant-numeric: tabular-nums; }

.dash__sched li.is-off .dash__whenBadge[b-38f5e3bum6] {
    border-style: dashed;
    border-color: var(--rl-border);
    background: var(--rl-surface-sunken);
    box-shadow: none;
    color: var(--rl-text-muted);
}

.dash__sched li.is-off strong[b-38f5e3bum6] { color: var(--rl-text-muted); }

.dash__schedEmpty[b-38f5e3bum6] { display: flex; align-items: center; gap: 0.75rem; }

.dash__whenBadge--add[b-38f5e3bum6] {
    border-style: dashed;
    box-shadow: none;
    text-decoration: none;
    transition: transform var(--rl-dur) var(--rl-ease), background var(--rl-dur) var(--rl-ease);
}

.dash__whenBadge--add:hover[b-38f5e3bum6] { background: color-mix(in srgb, var(--tone) 22%, var(--rl-surface-raised)); transform: rotate(-4deg); }
.dash__whenBadge--add svg[b-38f5e3bum6] { width: 1.2rem; height: 1.2rem; }

/* ---- most used: a share bar for agents, a ranking for tools ------------------- */

.dash__share[b-38f5e3bum6] {
    display: flex;
    gap: 2px;
    height: 0.8rem;
    margin-bottom: 0.6rem;
    overflow: hidden;
    border-radius: 99px;
}

.dash__share > span[b-38f5e3bum6] { min-width: 4px; flex-basis: 0; }

.dash__legend[b-38f5e3bum6] { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.3rem; }
.dash__legend:last-child[b-38f5e3bum6] { margin-bottom: 0; }
.dash__legend li[b-38f5e3bum6] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.84rem; }
.dash__sw[b-38f5e3bum6] { width: 0.65rem; height: 0.65rem; flex-shrink: 0; border-radius: 3px; }
.dash__legendName[b-38f5e3bum6] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash__legendVal[b-38f5e3bum6] { font-weight: 600; font-variant-numeric: tabular-nums; }
.dash__legendVal small[b-38f5e3bum6] { margin-left: 0.25rem; color: var(--rl-text-muted); font-weight: 400; }

.dash__rank[b-38f5e3bum6] { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.dash__rank li[b-38f5e3bum6] {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 0.5rem;
    row-gap: 0.25rem;
}

.dash__rankNo[b-38f5e3bum6] { color: var(--tone); font: 700 0.72rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.dash__rank li:not(:first-child) .dash__rankNo[b-38f5e3bum6] { color: var(--rl-text-muted); }
.dash__rankName[b-38f5e3bum6] { overflow: hidden; padding: 0; background: none; color: var(--rl-text); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.dash__rankVal[b-38f5e3bum6] { color: var(--rl-text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.dash__rankBar[b-38f5e3bum6] { grid-column: 2 / -1; height: 3px; overflow: hidden; border-radius: 99px; background: var(--rl-surface-sunken); }
.dash__rankBar > span[b-38f5e3bum6] { display: block; height: 100%; border-radius: inherit; background: var(--tone); }

/* ---- empty cards keep the shape of what will fill them ------------------------- */

.dash__ghost[b-38f5e3bum6] { display: flex; gap: 0.45rem; margin-bottom: 0.75rem; }
.dash__ghost--bars[b-38f5e3bum6] { flex-direction: column; gap: 0.55rem; }
.dash__ghost--bars span[b-38f5e3bum6] { height: 0.5rem; border-radius: 99px; background: color-mix(in srgb, var(--tone) 14%, var(--rl-surface-sunken)); }
.dash__ghost--bars span:nth-child(1)[b-38f5e3bum6] { width: 82%; }
.dash__ghost--bars span:nth-child(2)[b-38f5e3bum6] { width: 56%; }
.dash__ghost--bars span:nth-child(3)[b-38f5e3bum6] { width: 34%; }
.dash__ghost--share[b-38f5e3bum6] { gap: 2px; height: 0.8rem; overflow: hidden; border-radius: 99px; }
.dash__ghost--share span[b-38f5e3bum6] { flex: 3; background: color-mix(in srgb, var(--tone) 22%, var(--rl-surface-sunken)); }
.dash__ghost--share span:nth-child(2)[b-38f5e3bum6] { flex: 2; opacity: 0.7; }
.dash__ghost--share span:nth-child(3)[b-38f5e3bum6] { flex: 1; opacity: 0.45; }
.dash__ghost--notes[b-38f5e3bum6] { padding-top: 0.2rem; }
.dash__ghost--notes span[b-38f5e3bum6] {
    flex: 1;
    height: 3.2rem;
    border: 1.5px dashed color-mix(in srgb, var(--tone) 45%, var(--rl-border));
    border-radius: 4px 4px 10px 4px;
    background: color-mix(in srgb, var(--tone) 5%, transparent);
}
.dash__ghost--notes span:nth-child(1)[b-38f5e3bum6] { transform: rotate(-2deg); }
.dash__ghost--notes span:nth-child(3)[b-38f5e3bum6] { transform: rotate(1.5deg); }

/* ---- workflow runs: how long each took, in its status colour ------------------- */

.dash__wf[b-38f5e3bum6] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.dash__wfLine[b-38f5e3bum6] { display: flex; align-items: center; gap: 0.45rem; min-width: 0; font-size: 0.86rem; }
.dash__wfLine .dash__evDot[b-38f5e3bum6] { width: 0.7rem; height: 0.7rem; margin-top: 0; border-width: 2px; flex-shrink: 0; }
.dash__wfLine a[b-38f5e3bum6] { min-width: 0; overflow: hidden; color: inherit; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.dash__wfLine a:hover[b-38f5e3bum6] { text-decoration: underline; }
.dash__wfLine .dash__evTag[b-38f5e3bum6] { margin-left: 0; flex-shrink: 0; }
.dash__wfLine .dash__when[b-38f5e3bum6] { margin-left: auto; }

.dash__wfDur[b-38f5e3bum6] { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0 0 1.15rem; }
.dash__wfTrack[b-38f5e3bum6] { flex: 1; height: 0.4rem; overflow: hidden; border-radius: 99px; background: var(--rl-surface-sunken); }
.dash__wfTrack > span[b-38f5e3bum6] { display: block; height: 100%; border-radius: inherit; background: var(--dot, var(--rl-text-muted)); }

.dash__wfTrack.is-busy > span[b-38f5e3bum6] {
    background: repeating-linear-gradient(45deg, var(--dot) 0 6px, color-mix(in srgb, var(--dot) 50%, transparent) 6px 12px);
    background-size: 17px 17px;
    animation: dash-stripes-b-38f5e3bum6 0.8s linear infinite;
}

.dash__wfTime[b-38f5e3bum6] { min-width: 3.4rem; color: var(--rl-text-muted); text-align: right; font: 600 0.72rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }

/* ---- board agents: the cards they worked, as notes ------------------------------- */

.dash__notes[b-38f5e3bum6] {
    list-style: none;
    margin: 0;
    padding: 0.2rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.65rem;
}

.dash__note[b-38f5e3bum6] {
    --tilt: 0deg;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.65rem 0.65rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--rl-border));
    border-radius: 4px 4px 10px 4px;
    background: color-mix(in srgb, var(--tone) 12%, var(--rl-surface-raised));
    box-shadow: 0 8px 16px -12px rgb(0 0 0 / 0.55);
    transform: rotate(var(--tilt));
    transition: transform var(--rl-dur) var(--rl-ease);
}

.dash__note:nth-child(3n + 1)[b-38f5e3bum6] { --tilt: -0.8deg; }
.dash__note:nth-child(3n + 2)[b-38f5e3bum6] { --tilt: 0.6deg; }
.dash__note:hover[b-38f5e3bum6] { transform: translateY(-2px); }

/* A strip of tape holding it up. */
.dash__note[b-38f5e3bum6]::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 1.7rem;
    height: 0.55rem;
    border-radius: 2px;
    background: color-mix(in srgb, var(--tone) 40%, transparent);
    transform: translateX(-50%) rotate(-3deg);
}

.dash__noteTitle[b-38f5e3bum6] {
    display: -webkit-box;
    overflow: hidden;
    color: inherit;
    font-size: 0.85rem;
    font-weight: 650;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dash__noteTitle:hover[b-38f5e3bum6] { text-decoration: underline; }

.dash__noteOutcome[b-38f5e3bum6] {
    display: -webkit-box;
    overflow: hidden;
    color: var(--rl-text-muted);
    font-size: 0.74rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dash__noteFoot[b-38f5e3bum6] { display: flex; align-items: center; gap: 0.35rem; min-width: 0; margin-top: auto; color: var(--rl-text-muted); font-size: 0.72rem; }
.dash__noteWho[b-38f5e3bum6] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dash__avatar[b-38f5e3bum6] {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--tone, var(--rl-accent));
    color: var(--rl-bg);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.02em;
}

.dash__avatar--xs[b-38f5e3bum6] { width: 1.2rem; height: 1.2rem; font-size: 0.52rem; }

/* ---- start something: a launcher ------------------------------------------------- */

.dash__launch[b-38f5e3bum6] { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 0.5rem; }

.dash__launchItem[b-38f5e3bum6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.35rem 0.6rem;
    border: 1px solid var(--rl-border);
    border-radius: 12px;
    background: var(--rl-surface-raised);
    color: inherit;
    font-size: 0.76rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform var(--rl-dur) var(--rl-ease), border-color var(--rl-dur) var(--rl-ease), background var(--rl-dur) var(--rl-ease);
}

.dash__launchItem:hover[b-38f5e3bum6] {
    border-color: color-mix(in srgb, var(--tone) 60%, var(--rl-border));
    background: color-mix(in srgb, var(--tone) 8%, var(--rl-surface-raised));
    transform: translateY(-2px);
}

.dash__launchIco[b-38f5e3bum6] {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tone) 18%, transparent);
    color: var(--tone);
    transition: transform var(--rl-dur) var(--rl-ease);
}

.dash__launchIco svg[b-38f5e3bum6] { width: 1.15rem; height: 1.15rem; }
.dash__launchItem:hover .dash__launchIco[b-38f5e3bum6] { transform: scale(1.08) rotate(-6deg); }

.dash__launchItem.is-primary[b-38f5e3bum6] { border-color: transparent; background: var(--rl-accent); color: var(--rl-accent-contrast); font-weight: 600; }
.dash__launchItem.is-primary:hover[b-38f5e3bum6] { background: var(--rl-accent); filter: brightness(1.08); }
.dash__launchItem.is-primary .dash__launchIco[b-38f5e3bum6] { background: rgb(255 255 255 / 0.22); color: inherit; }

/* ---- the machine: an administrator's band, on dotted ground ------------------------- */

.dash__machine[b-38f5e3bum6] {
    margin-top: 1.6rem;
    padding: 1rem;
    border: 1px solid var(--rl-border);
    border-radius: calc(var(--rl-radius) + 6px);
    background:
        radial-gradient(circle, color-mix(in srgb, var(--rl-text) 9%, transparent) 1px, transparent 1.3px) 0 0 / 16px 16px,
        var(--rl-surface-sunken);
}

.dash__machineHead[b-38f5e3bum6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    margin-bottom: 0.85rem;
}

.dash__section[b-38f5e3bum6] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--rl-text-muted);
}

.dash__section[b-38f5e3bum6]::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: currentColor; transform: rotate(45deg); }

.dash__chips[b-38f5e3bum6] { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.dash__chipLink[b-38f5e3bum6] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.65rem;
    border: 1px solid var(--rl-border);
    border-radius: 99px;
    background: var(--rl-surface);
    color: inherit;
    font-size: 0.78rem;
    text-decoration: none;
    transition: border-color var(--rl-dur) var(--rl-ease), color var(--rl-dur) var(--rl-ease);
}

.dash__chipLink:hover[b-38f5e3bum6] { border-color: var(--rl-accent); color: var(--rl-accent); }
.dash__chipLink svg[b-38f5e3bum6] { width: 0.9rem; height: 0.9rem; }

.dash__machineGrid[b-38f5e3bum6] { display: grid; gap: 0.85rem; grid-template-columns: minmax(0, 1fr); }
.dash__stack[b-38f5e3bum6] { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }

@container dash (max-width: 35.99rem) {
    .dash__machine[b-38f5e3bum6] { padding: 0.65rem; }
}

@container dash (min-width: 36rem) and (max-width: 55.99rem) {
    .dash__stack[b-38f5e3bum6] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container dash (min-width: 56rem) {
    .dash__machineGrid[b-38f5e3bum6] { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* The fleet as a console readout — dark in either theme, like the terminal it summarises. */
.dash__readout[b-38f5e3bum6] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgb(255 255 255 / 0.06);
    border-radius: 8px;
    background: #0d1017;
    box-shadow: inset 0 0 18px rgb(0 0 0 / 0.45);
    color: #9aa3b2;
    font: 0.8rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.dash__readout.is-checked[b-38f5e3bum6] { color: #b8f5c9; }
.dash__readoutDot[b-38f5e3bum6] { width: 0.55rem; height: 0.55rem; margin-top: 0.35rem; flex-shrink: 0; border-radius: 50%; background: #5b6472; }
.dash__readout.is-probing .dash__readoutDot[b-38f5e3bum6] { background: #6f9bff; animation: dash-blink-b-38f5e3bum6 0.9s steps(2, start) infinite; }
.dash__readout.is-checked .dash__readoutDot[b-38f5e3bum6] { background: #5bd08c; box-shadow: 0 0 8px #5bd08c; }

.dash__readoutFoot[b-38f5e3bum6] { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.55rem; color: var(--rl-text-muted); font-size: 0.76rem; }
.dash__readoutFoot a[b-38f5e3bum6] { margin-left: auto; }

/* Workloads: two big figures and the failure share between them. */
.dash__split[b-38f5e3bum6] { display: grid; grid-template-columns: 1fr 1fr; }
.dash__split > div[b-38f5e3bum6] { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.15rem 0.9rem; }
.dash__split > div:first-child[b-38f5e3bum6] { padding-left: 0; }
.dash__split > div + div[b-38f5e3bum6] { border-left: 1px solid var(--rl-border); }
.dash__split strong[b-38f5e3bum6] { font-size: 2rem; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.dash__split small[b-38f5e3bum6] { color: var(--rl-text-muted); font-size: 0.9rem; font-weight: 500; }
.dash__split span[b-38f5e3bum6] { color: var(--rl-text-muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.dash__split .is-live strong[b-38f5e3bum6] { color: var(--rl-accent); }
.dash__split .is-bad strong[b-38f5e3bum6] { color: var(--rl-danger); }

.dash__ratio[b-38f5e3bum6] { display: flex; gap: 2px; height: 0.45rem; margin-top: 0.85rem; overflow: hidden; border-radius: 99px; }
.dash__ratio > span[b-38f5e3bum6] { flex-basis: 0; }
.dash__ratioOk[b-38f5e3bum6] { background: color-mix(in srgb, var(--rl-ok) 70%, transparent); }
.dash__ratioBad[b-38f5e3bum6] { background: var(--rl-danger); }

/* Busiest: a leaderboard, still a table underneath for whoever reads it as one. */
.dash__lb[b-38f5e3bum6] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.86rem; }

.dash__lb th[b-38f5e3bum6] {
    padding: 0 0.5rem 0.45rem;
    border-bottom: 1px solid var(--rl-border);
    color: var(--rl-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-align: left;
    text-transform: uppercase;
}

.dash__lb td[b-38f5e3bum6] { padding: 0.45rem 0.5rem; border-bottom: 1px solid color-mix(in srgb, var(--rl-border) 60%, transparent); vertical-align: middle; }
.dash__lb tbody tr:last-child td[b-38f5e3bum6] { border-bottom: 0; }
.dash__lb .td--num[b-38f5e3bum6] { text-align: right; }
.dash__lb tbody tr:hover td[b-38f5e3bum6] { background: color-mix(in srgb, var(--rl-text) 3%, transparent); }

.dash__lbRank[b-38f5e3bum6] { width: 1.6rem; color: var(--rl-text-muted); font: 700 0.75rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
.dash__lb tbody tr:first-child .dash__lbRank[b-38f5e3bum6] { color: var(--rl-chart-5); }

.dash__lbWho[b-38f5e3bum6] { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.dash__lbName[b-38f5e3bum6] { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dash__lbBarCell[b-38f5e3bum6] { display: flex; align-items: center; gap: 0.5rem; min-width: 8rem; }
.dash__lbBar[b-38f5e3bum6] { flex: 1; height: 0.5rem; overflow: hidden; border-radius: 99px; background: var(--rl-surface-sunken); }
.dash__lbBar > span[b-38f5e3bum6] { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--rl-chart-4) 45%, transparent), var(--rl-chart-4)); }
.dash__lbVal[b-38f5e3bum6] { min-width: 2.5rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- motion ------------------------------------------------------------------------- */

@keyframes dash-spin-b-38f5e3bum6 { to { transform: rotate(1turn); } }

@keyframes dash-breathe-b-38f5e3bum6 {
    0%, 100% { opacity: 0.45; transform: scale(0.96); }
    50% { opacity: 0.85; transform: scale(1.04); }
}

@keyframes dash-ping-b-38f5e3bum6 {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rl-accent) 55%, transparent); }
    100% { box-shadow: 0 0 0 0.45rem transparent; }
}

@keyframes dash-sweep-b-38f5e3bum6 {
    from { transform: translateX(-100%); }
    to { transform: translateX(290%); }
}

@keyframes dash-stripes-b-38f5e3bum6 { to { background-position: 17px 0; } }

@keyframes dash-nudge-b-38f5e3bum6 {
    0%, 88%, 100% { transform: rotate(0); }
    92% { transform: rotate(-10deg); }
    96% { transform: rotate(8deg); }
}

@keyframes dash-blink-b-38f5e3bum6 { to { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
    .dash__orb[b-38f5e3bum6]::before,
    .dash__orb[b-38f5e3bum6]::after,
    .dash__pulse[b-38f5e3bum6],
    .dash__alertIco[b-38f5e3bum6],
    .dash__runTrack.is-busy > span[b-38f5e3bum6],
    .dash__wfTrack.is-busy > span[b-38f5e3bum6],
    .dash__ev--busy .dash__evDot[b-38f5e3bum6],
    .dash__readoutDot[b-38f5e3bum6] { animation: none !important; }

    .dash__metric[b-38f5e3bum6],
    .dash__note[b-38f5e3bum6],
    .dash__launchItem[b-38f5e3bum6],
    .dash__launchIco[b-38f5e3bum6],
    .dash__bar[b-38f5e3bum6] { transition: none; }
}
/* /Components/Pages/Personalities.razor.rz.scp.css */
/* A personality's name in the list: its avatar, the name cut short when it is long, and a chip when it is turned off. */
.personalities__who[b-j1qwjzvmye] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    max-width: 100%;
    min-width: 0;
}

.personalities__who .ui-avatar[b-j1qwjzvmye] {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.68rem;
}

.personalities__name[b-j1qwjzvmye] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
/* /Components/Pages/Portal.razor.rz.scp.css */
/* The portal: groups of kit tiles under the welcome banner. The descriptions are the point of the page, so a tile shows
   all of one rather than the kit's two clamped lines, and the tool's pages run as small links along the tile's foot. */

.portal__group[b-e0km1k5vi9] { margin-top: 1.5rem; }
.portal__group:first-of-type[b-e0km1k5vi9] { margin-top: 0.5rem; }

.portal__group h2[b-e0km1k5vi9] { display: flex; align-items: center; gap: 0.45rem; }

.ui-tile__desc[b-e0km1k5vi9] { -webkit-line-clamp: 5; line-clamp: 5; }

.portal__links[b-e0km1k5vi9] { margin: 0; padding: 0; }
/* /Components/Pages/Reader.razor.rz.scp.css */
/* The reader fills the work area edge to edge (app.css gives .reader no padding), so the hero gets its own margin and keeps its
   height while the frame takes the rest. */
.reader[b-gb1kc1ampm]  .hero {
    flex: none;
    margin: 0.75rem 0.9rem 0.25rem;
}

/* Back, forward and reload: square icon buttons beside the address. */
.reader__nav[b-gb1kc1ampm] {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    padding-inline: 0;
}

.reader__nav svg[b-gb1kc1ampm] {
    width: 1rem;
    height: 1rem;
}

.reader__back[b-gb1kc1ampm] {
    transform: rotate(180deg);
}
/* /Components/Pages/Scheduled.razor.rz.scp.css */
.sch-ico[b-hr2ba3y8w2] {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: none;
    stroke: currentColor;
}

.sch-sr[b-hr2ba3y8w2] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.sch-label[b-hr2ba3y8w2] {
    font-size: 0.88rem;
    color: var(--rl-text-muted);
}

.sch-mono[b-hr2ba3y8w2] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.sch-note[b-hr2ba3y8w2] {
    color: var(--rl-text-muted);
}

/* ---- the banner ------------------------------------------------------------------------------------------- */

/* "Next up" carries a task's name as its note; a long one ends in an ellipsis rather than pushing the strip wide.
   The stat is drawn by HeroStat, hence ::deep from the page's own wrapper. */
.sch[b-hr2ba3y8w2]  .hero__stat dd small {
    min-width: 0;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- the week --------------------------------------------------------------------------------------------- */

.sch-legend[b-hr2ba3y8w2] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.8rem;
    color: var(--rl-text-muted);
    font-size: 0.76rem;
}

.sch-legend > span[b-hr2ba3y8w2] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.sch-key[b-hr2ba3y8w2] {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 3px;
    background: var(--rl-accent);
}

.sch-key--flow[b-hr2ba3y8w2] {
    background: var(--rl-chart-2, var(--rl-accent));
}

.sch-week[b-hr2ba3y8w2] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem;
}

.sch-day[b-hr2ba3y8w2] {
    min-width: 0;
    padding: 0.5rem;
    background: var(--rl-surface-sunken, var(--rl-surface));
    border: 1px solid var(--rl-border);
    border-radius: 12px;
}

/* A free day recedes, so the eye goes to the days with something on them. */
.sch-day--free[b-hr2ba3y8w2] {
    background: transparent;
    border-style: dashed;
}

.sch-day--today[b-hr2ba3y8w2] {
    background: color-mix(in srgb, var(--rl-accent) 6%, var(--rl-surface));
    border-color: var(--rl-accent);
    border-style: solid;
    box-shadow: 0 0 0 1px var(--rl-accent) inset;
}

.sch-day--today .sch-day__head > span[b-hr2ba3y8w2] {
    color: var(--rl-accent);
}

.sch-day__head[b-hr2ba3y8w2] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.sch-day__head small[b-hr2ba3y8w2] {
    color: var(--rl-text-muted);
    font-weight: 400;
}

.sch-day__empty[b-hr2ba3y8w2] {
    margin: 0;
    color: var(--rl-text-muted);
    font-size: 0.8rem;
}

.sch-day__list[b-hr2ba3y8w2] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sch-run[b-hr2ba3y8w2] {
    display: flex;
    gap: 0.3rem;
    padding: 0.15rem 0.35rem;
    font-size: 0.75rem;
    border-radius: calc(var(--rl-radius) * 0.6);
    border-left: 3px solid var(--rl-accent);
    background: color-mix(in srgb, var(--rl-accent) 10%, transparent);
    min-width: 0;
}

.sch-run--flow[b-hr2ba3y8w2] {
    border-left-color: var(--rl-chart-2, var(--rl-accent));
    background: color-mix(in srgb, var(--rl-chart-2, var(--rl-accent)) 12%, transparent);
}

.sch-run__time[b-hr2ba3y8w2] {
    flex: none;
    font-variant-numeric: tabular-nums;
    color: var(--rl-text-muted);
}

.sch-run__name[b-hr2ba3y8w2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sch-day__more[b-hr2ba3y8w2] {
    font-size: 0.72rem;
    color: var(--rl-text-muted);
    padding-left: 0.35rem;
}

/* ---- templates -------------------------------------------------------------------------------------------- */

.sch-templates[b-hr2ba3y8w2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 0.6rem;
}

/* A template is a small tile: the kind's tinted icon, its name, a line on what it does. */
.sch-template[b-hr2ba3y8w2] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.1rem 0.65rem;
    align-items: center;
    padding: 0.7rem 0.85rem;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--rl-surface);
    border: 1px solid var(--rl-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color var(--rl-dur, 0.15s) var(--rl-ease, ease), transform var(--rl-dur, 0.15s) var(--rl-ease, ease),
        box-shadow var(--rl-dur, 0.15s) var(--rl-ease, ease);
}

.sch-template .ui-ico[b-hr2ba3y8w2] {
    grid-row: span 2;
    align-self: start;
}

.sch-template small[b-hr2ba3y8w2] {
    grid-column: 2;
    color: var(--rl-text-muted);
    line-height: 1.4;
}

.sch-template:hover:not(:disabled)[b-hr2ba3y8w2],
.sch-template:focus-visible[b-hr2ba3y8w2] {
    border-color: var(--rl-accent);
    transform: translateY(-1px);
    box-shadow: var(--rl-shadow-sm, none);
}

.sch-template:focus-visible[b-hr2ba3y8w2] {
    outline: 2px solid var(--rl-accent);
    outline-offset: 1px;
}

.sch-template:disabled[b-hr2ba3y8w2] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---- the editor ------------------------------------------------------------------------------------------- */

/* The "when" column wants a little more than the kit's side column, for a month of day buttons and the preview. */
.sch-cols > .sch-col--when[b-hr2ba3y8w2] {
    flex-basis: 23rem;
}

.sch-col[b-hr2ba3y8w2] {
    gap: 0.85rem;
}

/* The kit's segmented switch, as a radio group; it sizes to its buttons rather than the field. */
.sch-seg[b-hr2ba3y8w2] {
    width: fit-content;
    max-width: 100%;
}

.sch-seg button[b-hr2ba3y8w2] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sch-seg button:disabled[b-hr2ba3y8w2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sch-grid[b-hr2ba3y8w2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.75rem 1rem;
}

.sch-grid label[b-hr2ba3y8w2],
.sch-quiet[b-hr2ba3y8w2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.88rem;
}

.sch-grid small[b-hr2ba3y8w2],
.sch-quiet small[b-hr2ba3y8w2],
.sch-row small[b-hr2ba3y8w2] {
    color: var(--rl-text-muted);
    font-size: 0.78rem;
}

.sch-fieldset[b-hr2ba3y8w2] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
    margin: 0;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--rl-border);
    border-radius: 12px;
    background: var(--rl-surface-sunken, transparent);
}

/* Bootstrap floats a legend, which keeps it inside the box as the fieldset's heading rather than on its border. */
.sch-fieldset legend[b-hr2ba3y8w2] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    font-weight: 650;
    font-size: 1rem;
}

.sch-row[b-hr2ba3y8w2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.sch-row label[b-hr2ba3y8w2] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
}

.sch-days[b-hr2ba3y8w2],
.sch-month[b-hr2ba3y8w2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.sch-month[b-hr2ba3y8w2] {
    display: grid;
    grid-template-columns: repeat(7, 2.3rem);
}

.sch-day-btn[b-hr2ba3y8w2] {
    min-width: 2.3rem;
    padding: 0.3rem 0.4rem;
    font: inherit;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    color: var(--rl-text);
    background: var(--rl-surface);
    border: 1px solid var(--rl-border);
    border-radius: calc(var(--rl-radius) * 0.75);
    cursor: pointer;
}

.sch-day-btn--on[b-hr2ba3y8w2] {
    color: var(--rl-accent-contrast, #fff);
    background: var(--rl-accent);
    border-color: var(--rl-accent);
}

.sch-time[b-hr2ba3y8w2] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.sch-x[b-hr2ba3y8w2] {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    color: var(--rl-text-muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.sch-x:hover[b-hr2ba3y8w2] {
    color: var(--rl-danger);
}

.sch-x svg[b-hr2ba3y8w2] {
    width: 0.85rem;
    height: 0.85rem;
    fill: none;
    stroke: currentColor;
}

.sch-zone-select[b-hr2ba3y8w2] {
    max-width: 24rem;
}

.sch-summary[b-hr2ba3y8w2] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    background: color-mix(in srgb, var(--rl-accent) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--rl-accent) 30%, var(--rl-border));
    border-radius: var(--rl-radius);
}

.sch-summary--bad[b-hr2ba3y8w2] {
    color: var(--rl-danger);
    background: color-mix(in srgb, var(--rl-danger) 8%, transparent);
    border-color: color-mix(in srgb, var(--rl-danger) 40%, var(--rl-border));
}

.sch-preview[b-hr2ba3y8w2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sch-preview li[b-hr2ba3y8w2] {
    display: inline-flex;
    gap: 0.35rem;
    align-items: baseline;
    padding: 0.15rem 0.55rem;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    background: var(--rl-surface);
    border: 1px solid var(--rl-border);
    border-radius: 99px;
}

.sch-preview small[b-hr2ba3y8w2] {
    color: var(--rl-text-muted);
}

.sch-more[b-hr2ba3y8w2] {
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--rl-border);
    border-radius: 12px;
}

.sch-more summary[b-hr2ba3y8w2] {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
}

.sch-more[open] summary[b-hr2ba3y8w2] {
    margin-bottom: 0.7rem;
}

.sch-check[b-hr2ba3y8w2] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
}

/* ---- the list --------------------------------------------------------------------------------------------- */

/* Rows in the card, split by hairlines as the kit's lists are, rather than boxes inside a box. */
.sch-list[b-hr2ba3y8w2] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sch-list > li + li[b-hr2ba3y8w2] {
    border-top: 1px solid var(--rl-border);
}

.sch-task[b-hr2ba3y8w2] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.5rem 0.85rem;
    padding: 0.8rem 0.15rem;
}

.sch-task:first-child[b-hr2ba3y8w2] {
    padding-top: 0.2rem;
}

.sch-task:last-child[b-hr2ba3y8w2] {
    padding-bottom: 0.1rem;
}

.sch-task__ico[b-hr2ba3y8w2] {
    margin-top: 0.1rem;
}

/* A paused task greys out, its icon too, so the running ones are what the eye lands on. */
.sch-task--off .sch-task__ico[b-hr2ba3y8w2] {
    --tone: var(--rl-text-muted);
}

.sch-task--off .sch-task__name[b-hr2ba3y8w2] {
    color: var(--rl-text-muted);
}

.sch-task__main[b-hr2ba3y8w2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.sch-task__title[b-hr2ba3y8w2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.sch-task__name[b-hr2ba3y8w2] {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sch-task__meta[b-hr2ba3y8w2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-size: 0.84rem;
    color: var(--rl-text-muted);
}

.sch-task__times[b-hr2ba3y8w2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.1rem;
    font-size: 0.86rem;
}

.sch-task__times > span > small[b-hr2ba3y8w2] {
    margin-right: 0.3rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rl-text-muted);
}

.sch-task__outcome[b-hr2ba3y8w2] {
    margin: 0;
    font-size: 0.84rem;
    color: var(--rl-text-muted);
    overflow-wrap: anywhere;
}

.sch-task__actions[b-hr2ba3y8w2] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.3rem;
}

.sch-dots[b-hr2ba3y8w2] {
    display: inline-flex;
    gap: 0.2rem;
    align-items: center;
}

.sch-dot[b-hr2ba3y8w2] {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--rl-border-strong, var(--rl-border));
}

.sch-dot--ok[b-hr2ba3y8w2] { background: var(--rl-ok); }
.sch-dot--warn[b-hr2ba3y8w2] { background: var(--rl-warning, #e3b341); }
.sch-dot--bad[b-hr2ba3y8w2] { background: var(--rl-danger); }
.sch-dot--run[b-hr2ba3y8w2] { background: var(--rl-accent); }

/* The run history opens under the row, across its full width, in the kit's framed table. */
.sch-history[b-hr2ba3y8w2] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.65rem 0.75rem 0.75rem;
    border-radius: 12px;
    background: var(--rl-surface-sunken, transparent);
}

.sch-history .ui-h3[b-hr2ba3y8w2] {
    margin: 0;
}

.sch-history .ui-table[b-hr2ba3y8w2] {
    background: var(--rl-surface);
}

.sch-history__table[b-hr2ba3y8w2] {
    width: 100%;
    font-size: 0.84rem;
}

.sch-history__table td[b-hr2ba3y8w2] {
    vertical-align: top;
}

.sch-nowrap[b-hr2ba3y8w2] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sch-link[b-hr2ba3y8w2] {
    margin-left: 0.4rem;
}

.sch-output summary[b-hr2ba3y8w2] {
    cursor: pointer;
    color: var(--rl-text-muted);
    font-size: 0.8rem;
}

.sch-output pre[b-hr2ba3y8w2] {
    margin: 0.35rem 0 0;
    padding: 0.5rem 0.65rem;
    max-height: 16rem;
    overflow: auto;
    white-space: pre-wrap;
    font-size: 0.8rem;
    background: var(--rl-surface-sunken, var(--rl-surface));
    border: 1px solid var(--rl-border);
    border-radius: calc(var(--rl-radius) * 0.75);
}

/* The trash button stays quiet until it is aimed at. */
.sch-del:hover[b-hr2ba3y8w2] {
    color: var(--rl-danger);
}

@media (max-width: 900px) {
    .sch-week[b-hr2ba3y8w2] {
        grid-template-columns: repeat(7, minmax(7.5rem, 1fr));
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    /* The buttons drop under the text, still beside the icon's column. */
    .sch-task[b-hr2ba3y8w2] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sch-task__actions[b-hr2ba3y8w2] {
        grid-column: 2;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .sch-task[b-hr2ba3y8w2] {
        grid-template-columns: minmax(0, 1fr);
    }

    .sch-task__ico[b-hr2ba3y8w2] {
        display: none;
    }

    .sch-task__actions[b-hr2ba3y8w2] {
        grid-column: 1;
    }
}
/* /Components/Pages/Servers/BrowserChannelHost.razor.rz.scp.css */
.sb[b-as62oi80vd] { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .4rem; padding: .6rem .75rem .5rem; background: var(--rl-surface); }

.sb__bar[b-as62oi80vd] { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.sb__nav[b-as62oi80vd] { width: 2rem; height: 2rem; display: inline-grid; place-items: center; padding: 0; font-size: 1rem; line-height: 1; color: var(--rl-text); background: transparent; border: 1px solid transparent; border-radius: var(--rl-radius); cursor: pointer; }
.sb__nav:hover:not(:disabled)[b-as62oi80vd] { background: var(--rl-surface-sunken); border-color: var(--rl-border); }
.sb__nav:disabled[b-as62oi80vd] { color: var(--rl-text-muted); opacity: .5; cursor: default; }

.sb__address[b-as62oi80vd] { flex: 1 1 16rem; min-width: 10rem; display: flex; align-items: center; gap: .4rem; padding: 0 .65rem; height: 2.1rem; background: var(--rl-surface-sunken); border: 1px solid var(--rl-border); border-radius: 999px; }
.sb__address:focus-within[b-as62oi80vd] { border-color: var(--rl-accent); box-shadow: 0 0 0 3px var(--rl-ring, transparent); }
.sb__lock[b-as62oi80vd] { font-size: .8rem; opacity: .75; }
.sb__address input[b-as62oi80vd] { flex: 1; min-width: 0; height: 100%; padding: 0; color: var(--rl-text); background: transparent; border: 0; outline: none; font: inherit; font-size: .9rem; }
.sb__address input[readonly][b-as62oi80vd] { color: var(--rl-text-muted); cursor: default; }

.sb__status[b-as62oi80vd] { display: flex; align-items: center; gap: .8rem; min-width: 0; font-size: .8rem; color: var(--rl-text-muted); }
.sb__driver[b-as62oi80vd] { flex: none; font-weight: 600; color: var(--rl-text); }
.sb__title[b-as62oi80vd] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb__watching[b-as62oi80vd] { flex: none; }

.sb__stage[b-as62oi80vd] { position: relative; flex: 1; min-height: 12rem; display: grid; place-items: center; overflow: hidden; background: var(--rl-surface-sunken); border: 1px solid var(--rl-border); border-radius: var(--rl-radius); }
.sb__screen[b-as62oi80vd] { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #fff; outline: none; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.sb__screen--driving[b-as62oi80vd] { cursor: default; box-shadow: 0 0 0 2px var(--rl-accent); }
.sb__screen--driving:focus-visible[b-as62oi80vd] { box-shadow: 0 0 0 3px var(--rl-accent); }
.sb__screen[b-as62oi80vd]  .sb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sb__screen[b-as62oi80vd]  .sb-wait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: .5rem .8rem; max-width: 80%; text-align: center; font-size: .85rem; color: #333; background: rgba(255, 255, 255, .9); border-radius: var(--rl-radius); }
.sb__screen[b-as62oi80vd]  .sb-cursor { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; transition: transform 60ms linear; }
.sb__screen[b-as62oi80vd]  .sb-cursor svg { display: block; width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.sb__screen[b-as62oi80vd]  .sb-cursor span { position: absolute; left: 14px; top: 16px; padding: 1px 6px; font-size: 11px; line-height: 1.4; white-space: nowrap; color: #fff; background: var(--rl-accent); border-radius: 999px; }

.sb__dialog[b-as62oi80vd] { position: absolute; left: 50%; top: 1.5rem; transform: translateX(-50%); z-index: 3; width: min(26rem, calc(100% - 2rem)); padding: .8rem .9rem; background: var(--rl-surface-raised); border: 1px solid var(--rl-border); border-radius: var(--rl-radius); box-shadow: var(--rl-shadow-lg, 0 10px 30px rgba(0, 0, 0, .25)); }
.sb__dialogText[b-as62oi80vd] { margin: 0 0 .6rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 12rem; overflow: auto; }
.sb__dialogInput[b-as62oi80vd] { width: 100%; margin-bottom: .6rem; }
.sb__dialogBtns[b-as62oi80vd] { display: flex; gap: .4rem; justify-content: flex-end; }
.sb__dialogWait[b-as62oi80vd] { margin: 0; font-size: .82rem; color: var(--rl-text-muted); }

.sb__notice[b-as62oi80vd] { margin: 0; padding: .35rem .6rem; font-size: .82rem; background: var(--rl-surface-raised); border: 1px solid var(--rl-border); border-radius: var(--rl-radius); }
.sb__notice--error[b-as62oi80vd] { color: var(--rl-danger); border-color: color-mix(in srgb, var(--rl-danger) 45%, var(--rl-border)); }
.sb__hint[b-as62oi80vd] { margin: 0; font-size: .76rem; color: var(--rl-text-muted); }

.sb__closed[b-as62oi80vd] { flex: 1; display: grid; place-items: center; padding: 1rem; }
.sb__closedCard[b-as62oi80vd] { width: min(34rem, 100%); display: flex; flex-direction: column; gap: .7rem; padding: 1.2rem 1.3rem; background: var(--rl-surface-raised); border: 1px solid var(--rl-border); border-radius: var(--rl-radius); }
.sb__closedCard p[b-as62oi80vd] { margin: 0; }
.sb__closedTitle[b-as62oi80vd] { margin: 0; font-size: 1.1rem; }
.sb__closedWhy[b-as62oi80vd] { font-size: .85rem; color: var(--rl-text-muted); }
.sb__starting[b-as62oi80vd] { color: var(--rl-text-muted); }
.sb__open[b-as62oi80vd] { display: flex; gap: .5rem; flex-wrap: wrap; }
.sb__open input[b-as62oi80vd] { flex: 1 1 14rem; min-width: 0; }

@media (max-width: 640px) {
    .sb[b-as62oi80vd] { padding: .4rem; }
    .sb__status[b-as62oi80vd] { flex-wrap: wrap; gap: .3rem .7rem; }
    .sb__title[b-as62oi80vd] { flex-basis: 100%; order: 3; }
}
/* /Components/Pages/Servers/FriendsPage.razor.rz.scp.css */
/* /servers/friends: the kit's rows (ui-kit.css). A row's buttons drop under the name when the column is too narrow for both,
   rather than squeezing the name down to an ellipsis. */

/* The banner's figure strip stays away until the lists have loaded. */
.fr-page[b-k3q2ol38ba]  .hero__stats:empty { display: none; }

.fr-list .ui-row[b-k3q2ol38ba] { flex-wrap: wrap; }
.fr-list .ui-row__end[b-k3q2ol38ba] { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }

/* Everyone in every shared server can be a long list; it scrolls inside the card. */
.fr-people[b-k3q2ol38ba] { max-height: 22rem; overflow-y: auto; }

/* The search box fills the side column rather than stopping at the toolbar's width. */
.fr-page .ui-search[b-k3q2ol38ba] { max-width: none; }
/* /Components/Pages/Servers/Games/CheckersBoard.razor.rz.scp.css */
.checkers[b-scmuiunh7t] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    color: var(--rl-text);
}

.ck-main[b-scmuiunh7t] {
    flex: 1 1 320px;
    min-width: 0;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.ck-board[b-scmuiunh7t] {
    width: min(100%, 560px);
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    border: 4px solid #4a2f18;
    border-radius: 6px;
    box-sizing: border-box;
    overflow: hidden;
    background: #e8d3a8;
    user-select: none;
}

.ck-row[b-scmuiunh7t] {
    flex: 1 1 0;
    display: flex;
    min-height: 0;
}

.ck-sq[b-scmuiunh7t] {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    font: inherit;
    container-type: size;
}

.ck-sq.light[b-scmuiunh7t] {
    background: #ecdcb8;
}

.ck-sq.dark[b-scmuiunh7t] {
    background: #8a5a35;
    cursor: default;
}

.ck-sq.dark:disabled[b-scmuiunh7t] {
    opacity: 1;
    color: inherit;
}

.ck-sq.dark:not(:disabled)[b-scmuiunh7t] {
    cursor: pointer;
}

.ck-sq.last[b-scmuiunh7t] {
    background: #a98a3a;
}

.ck-sq.chain[b-scmuiunh7t] {
    background: #c28a1c;
}

.ck-sq.selected[b-scmuiunh7t] {
    background: #3f8a52;
}

.ck-sq.dest:hover[b-scmuiunh7t],
.ck-sq.dest:focus-visible[b-scmuiunh7t] {
    background: #4f9a62;
}

.ck-sq:focus-visible[b-scmuiunh7t] {
    outline: 3px solid var(--rl-accent);
    outline-offset: -3px;
    z-index: 2;
}

.ck-piece[b-scmuiunh7t] {
    width: 78%;
    height: 78%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .55), inset 0 0 0 4px rgba(255, 255, 255, .18);
}

.ck-piece.red[b-scmuiunh7t] {
    background: radial-gradient(circle at 35% 30%, #e85a4a, #b3261e 70%);
    border: 2px solid #7d1510;
}

.ck-piece.black[b-scmuiunh7t] {
    background: radial-gradient(circle at 35% 30%, #5a5a5a, #1d1d1d 70%);
    border: 2px solid #000;
}

.ck-piece .crown[b-scmuiunh7t] {
    font-size: clamp(.8rem, 55cqmin, 2.4rem);
    line-height: 1;
    color: #ffd54a;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}

.ck-piece.mini[b-scmuiunh7t] {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    box-shadow: none;
    border-width: 1px;
}

/* pieces that can move, and the ones that must capture */
.ck-sq.movable .ck-piece[b-scmuiunh7t] {
    outline: 3px solid #ffe27a;
    outline-offset: 1px;
}

.ck-sq.movable.must .ck-piece[b-scmuiunh7t] {
    outline-color: #ff9d2e;
    animation: ck-pulse-b-scmuiunh7t 1.2s ease-in-out infinite;
}

.ck-sq.selected .ck-piece[b-scmuiunh7t] {
    outline: 3px solid #ffffff;
    outline-offset: 1px;
    animation: none;
}

.ck-sq.chain .ck-piece[b-scmuiunh7t] {
    outline: 3px solid #ff9d2e;
    outline-offset: 1px;
}

@keyframes ck-pulse-b-scmuiunh7t {
    0%, 100% { outline-offset: 1px; }
    50% { outline-offset: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .ck-sq.movable.must .ck-piece[b-scmuiunh7t] {
        animation: none;
    }
}

/* legal destinations */
.ck-dot[b-scmuiunh7t] {
    position: absolute;
    width: 28%;
    height: 28%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
    pointer-events: none;
}

.ck-sq.dest-jump .ck-dot[b-scmuiunh7t] {
    width: 42%;
    height: 42%;
    background: rgba(255, 157, 46, .9);
}

/* player strips */
.ck-strip[b-scmuiunh7t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    padding: .35rem .6rem;
    background: var(--rl-surface);
    border: 1px solid var(--rl-border);
    border-radius: 6px;
    font-size: .9rem;
}

.ck-strip.turn[b-scmuiunh7t] {
    border-color: var(--rl-accent);
    box-shadow: 0 0 0 1px var(--rl-accent);
}

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

.ck-count[b-scmuiunh7t] {
    color: var(--rl-text-muted);
    font-size: .82rem;
}

.ck-hint[b-scmuiunh7t] {
    margin: 0;
    min-height: 1.3em;
    font-size: .9rem;
    color: var(--rl-text-muted);
}

/* buttons */
.ck-actions[b-scmuiunh7t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.ck-offer[b-scmuiunh7t] {
    font-size: .9rem;
}

.ck-btn[b-scmuiunh7t] {
    padding: .4rem .8rem;
    min-height: 2.25rem;
    border-radius: 6px;
    border: 1px solid var(--rl-border);
    background: var(--rl-surface-raised);
    color: var(--rl-text);
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}

.ck-btn:hover[b-scmuiunh7t] {
    border-color: var(--rl-accent);
}

.ck-btn:focus-visible[b-scmuiunh7t] {
    outline: 2px solid var(--rl-accent);
    outline-offset: 2px;
}

.ck-btn.primary[b-scmuiunh7t] {
    background: var(--rl-accent);
    border-color: var(--rl-accent);
    color: var(--rl-accent-contrast);
}

.ck-btn.danger[b-scmuiunh7t] {
    background: var(--rl-danger);
    border-color: var(--rl-danger);
    color: #fff;
}

.ck-btn.danger-outline[b-scmuiunh7t] {
    border-color: var(--rl-danger);
    color: var(--rl-danger);
}

/* move list */
.ck-moves[b-scmuiunh7t] {
    flex: 1 1 180px;
    min-width: 160px;
    max-width: 260px;
    background: var(--rl-surface);
    border: 1px solid var(--rl-border);
    border-radius: 6px;
    padding: .5rem .75rem;
}

.ck-moves h3[b-scmuiunh7t] {
    margin: 0 0 .4rem;
    font-size: 1rem;
}

.ck-moves ol[b-scmuiunh7t] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 22rem;
    overflow-y: auto;
    font-variant-numeric: tabular-nums;
}

.ck-moves li[b-scmuiunh7t] {
    display: grid;
    grid-template-columns: 2.2rem 1fr 1fr;
    gap: .25rem;
    padding: .1rem 0;
    font-size: .9rem;
}

.ck-moves .num[b-scmuiunh7t] {
    color: var(--rl-text-muted);
}

.ck-moves .mv.latest[b-scmuiunh7t] {
    font-weight: 700;
    color: var(--rl-accent);
}

.ck-empty[b-scmuiunh7t],
.ck-note[b-scmuiunh7t] {
    margin: 0;
    font-size: .8rem;
    color: var(--rl-text-muted);
}

.ck-note[b-scmuiunh7t] {
    margin-top: .6rem;
}

@media (max-width: 560px) {
    .ck-moves[b-scmuiunh7t] {
        max-width: none;
        flex-basis: 100%;
    }

    .ck-moves ol[b-scmuiunh7t] {
        max-height: 10rem;
    }
}
/* /Components/Pages/Servers/Games/ChessBoard.razor.rz.scp.css */
.chess[b-1qii92q83g] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    width: 100%;
    color: var(--rl-text);
}

.chess-main[b-1qii92q83g] {
    flex: 1 1 320px;
    max-width: 560px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.chess-side[b-1qii92q83g] {
    flex: 1 1 200px;
    min-width: 0;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ---- board ---- */

.board-wrap[b-1qii92q83g] {
    position: relative;
    width: min(100%, 560px);
}

.board[b-1qii92q83g] {
    --sq-light: #ecd9b4;
    --sq-dark: #ae8760;
    container-type: inline-size;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    width: 100%;
    aspect-ratio: 1;
    border: 2px solid var(--rl-border);
    border-radius: 6px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.sq[b-1qii92q83g] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    min-width: 0;
    min-height: 0;
    font: inherit;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}

.sq.light[b-1qii92q83g] { background: var(--sq-light); }
.sq.dark[b-1qii92q83g] { background: var(--sq-dark); }

.sq.movable[b-1qii92q83g],
.sq.target[b-1qii92q83g],
.sq.target-capture[b-1qii92q83g] { cursor: pointer; }

.sq:focus-visible[b-1qii92q83g] {
    outline: 3px solid var(--rl-accent);
    outline-offset: -3px;
    z-index: 2;
}

/* Last move: a wash over the colour. Selected is stronger and wins. */
.sq.last[b-1qii92q83g]::before,
.sq.selected[b-1qii92q83g]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sq.last[b-1qii92q83g]::before { background: rgba(255, 214, 0, 0.42); }
.sq.selected[b-1qii92q83g]::before { background: rgba(30, 130, 255, 0.5); }

.sq.check[b-1qii92q83g]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle, rgba(230, 30, 30, 0.95) 0%, rgba(230, 30, 30, 0.6) 40%, rgba(230, 30, 30, 0) 72%);
}

.coord[b-1qii92q83g] {
    position: absolute;
    font-size: 2.6cqw;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
}

.coord.rank[b-1qii92q83g] { top: 0.5cqw; left: 0.6cqw; }
.coord.file[b-1qii92q83g] { bottom: 0.5cqw; right: 0.7cqw; }
.sq.light .coord[b-1qii92q83g] { color: #8d6b45; }
.sq.dark .coord[b-1qii92q83g] { color: #f3e5c8; }

.piece[b-1qii92q83g] {
    position: relative;
    z-index: 1;
    font-size: 9.2cqw;
    line-height: 1;
    font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", "Apple Symbols", sans-serif;
    pointer-events: none;
}

.piece.white[b-1qii92q83g] {
    color: #fdfdfd;
    -webkit-text-stroke: 0.3cqw #1b1b1b;
    paint-order: stroke fill;
    text-shadow: 0 0.2cqw 0.4cqw rgba(0, 0, 0, 0.35);
}

.piece.black[b-1qii92q83g] {
    color: #1b1b1b;
    text-shadow: 0 0 0.35cqw rgba(255, 255, 255, 0.55);
}

/* Legal destinations: a dot on an empty square, a ring around a capture. */
.dot[b-1qii92q83g] {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    width: 28%;
    height: 28%;
    border-radius: 50%;
    background: rgba(20, 60, 20, 0.42);
}

.sq.target-capture .dot[b-1qii92q83g] {
    width: 92%;
    height: 92%;
    background: transparent;
    border: 0.9cqw solid rgba(20, 60, 20, 0.42);
    box-sizing: border-box;
}

.sq.target:hover[b-1qii92q83g]::before,
.sq.target-capture:hover[b-1qii92q83g]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 130, 40, 0.28);
    pointer-events: none;
}

/* ---- promotion chooser ---- */

.promo-overlay[b-1qii92q83g] {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
}

.promo-card[b-1qii92q83g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    background: var(--rl-surface-raised);
    border: 1px solid var(--rl-border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
    max-width: 94%;
}

.promo-title[b-1qii92q83g] {
    font-weight: 600;
    color: var(--rl-text);
}

.promo-choices[b-1qii92q83g] {
    display: flex;
    gap: 0.4rem;
}

.promo-btn[b-1qii92q83g] {
    width: 3.6rem;
    height: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sq-promo, #ecd9b4);
    border: 2px solid var(--rl-border);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
}

.promo-btn:hover[b-1qii92q83g],
.promo-btn:focus-visible[b-1qii92q83g] {
    border-color: var(--rl-accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--rl-accent);
}

.promo-btn .piece[b-1qii92q83g] {
    font-size: 2.4rem;
}

/* Promotion pieces drawn at a fixed size, not by the board's container width. */
.promo-btn .piece.white[b-1qii92q83g] { -webkit-text-stroke: 1px #1b1b1b; }

/* ---- captured strips ---- */

.strip[b-1qii92q83g] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2rem;
    padding: 0.2rem 0.5rem;
    background: var(--rl-surface);
    border: 1px solid var(--rl-border);
    border-radius: 6px;
    font-size: 0.9rem;
    min-width: 0;
}

.strip.to-move[b-1qii92q83g] {
    border-color: var(--rl-accent);
}

.chip[b-1qii92q83g] {
    flex: none;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    border: 1px solid var(--rl-text-muted);
}

.chip.white[b-1qii92q83g] { background: #fdfdfd; }
.chip.black[b-1qii92q83g] { background: #1b1b1b; }

.strip-name[b-1qii92q83g] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 40%;
}

.taken[b-1qii92q83g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.piece.small[b-1qii92q83g] {
    font-size: 1.15rem;
    margin-right: -0.15rem;
}

.piece.small.white[b-1qii92q83g] { -webkit-text-stroke: 0.5px #1b1b1b; text-shadow: none; }
.piece.small.black[b-1qii92q83g] { text-shadow: 0 0 2px rgba(255, 255, 255, 0.55); }

/* The strip sits on the app surface, which may be dark: give light pieces a dark chip behind them there. */
.taken .piece.small.white[b-1qii92q83g] { filter: drop-shadow(0 0 1px #000); }
.taken .piece.small.black[b-1qii92q83g] { filter: drop-shadow(0 0 1px #fff); }

.lead[b-1qii92q83g] {
    margin-left: auto;
    font-weight: 700;
    color: var(--rl-ok);
    white-space: nowrap;
}

/* ---- side panel ---- */

.status[b-1qii92q83g] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.8rem;
    padding: 0.5rem 0.7rem;
    background: var(--rl-surface);
    border: 1px solid var(--rl-border);
    border-radius: 6px;
}

.status-text[b-1qii92q83g] { font-weight: 600; }
.status-text.in-check[b-1qii92q83g] { color: var(--rl-danger); }
.your-move[b-1qii92q83g] { color: var(--rl-accent); font-weight: 600; font-size: 0.9rem; }

.controls[b-1qii92q83g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}

.offer[b-1qii92q83g],
.confirm[b-1qii92q83g] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1 1 100%;
    padding: 0.5rem 0.7rem;
    background: var(--rl-surface-raised);
    border: 1px solid var(--rl-border);
    border-radius: 6px;
}

.offer-text[b-1qii92q83g] { font-size: 0.92rem; }

.offer-actions[b-1qii92q83g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.btn-quiet[b-1qii92q83g],
.btn-ok[b-1qii92q83g],
.btn-danger[b-1qii92q83g],
.btn-danger-quiet[b-1qii92q83g] {
    font: inherit;
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    border: 1px solid var(--rl-border);
    cursor: pointer;
    background: var(--rl-surface-raised);
    color: var(--rl-text);
}

.btn-quiet:hover:not(:disabled)[b-1qii92q83g],
.btn-danger-quiet:hover:not(:disabled)[b-1qii92q83g] { border-color: var(--rl-accent); }

.btn-quiet:disabled[b-1qii92q83g] {
    opacity: 0.6;
    cursor: default;
}

.btn-ok[b-1qii92q83g] {
    background: var(--rl-accent);
    border-color: var(--rl-accent);
    color: var(--rl-accent-contrast);
    font-weight: 600;
}

.btn-danger[b-1qii92q83g] {
    background: var(--rl-danger);
    border-color: var(--rl-danger);
    color: #fff;
    font-weight: 600;
}

.btn-danger-quiet[b-1qii92q83g] {
    color: var(--rl-danger);
    border-color: var(--rl-danger);
    background: transparent;
}

.btn-quiet:focus-visible[b-1qii92q83g],
.btn-ok:focus-visible[b-1qii92q83g],
.btn-danger:focus-visible[b-1qii92q83g],
.btn-danger-quiet:focus-visible[b-1qii92q83g] {
    outline: 2px solid var(--rl-accent);
    outline-offset: 2px;
}

.moves-panel[b-1qii92q83g] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.moves-title[b-1qii92q83g] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rl-text-muted);
}

/* column-reverse keeps the box scrolled to the bottom, so the newest move is always in view. */
.moves[b-1qii92q83g] {
    display: flex;
    flex-direction: column-reverse;
    max-height: 12rem;
    overflow-y: auto;
    padding: 0.25rem 0.4rem;
    background: var(--rl-surface-sunken);
    border: 1px solid var(--rl-border);
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}

.moves-empty[b-1qii92q83g] {
    color: var(--rl-text-muted);
    font-size: 0.9rem;
    padding: 0.2rem 0;
}

.move-row[b-1qii92q83g] {
    display: grid;
    grid-template-columns: 2.4rem 1fr 1fr;
    gap: 0.25rem;
    padding: 0.1rem 0;
    font-size: 0.95rem;
}

.move-no[b-1qii92q83g] { color: var(--rl-text-muted); }
.move[b-1qii92q83g] { padding: 0 0.25rem; border-radius: 4px; min-height: 1.2em; }
.move.latest[b-1qii92q83g] { background: var(--rl-accent); color: var(--rl-accent-contrast); font-weight: 600; }

@media (max-width: 520px) {
    .chess[b-1qii92q83g] { gap: 0.75rem; }
    .chess-side[b-1qii92q83g] { max-width: none; flex-basis: 100%; }
    .moves[b-1qii92q83g] { max-height: 8rem; }
}
/* /Components/Pages/Servers/Games/HoldemTable.razor.rz.scp.css */
.hd[b-tmwjh2xdia] {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
    color: var(--rl-text);
}

.hd__head[b-tmwjh2xdia] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.hd__pill[b-tmwjh2xdia] {
    background: var(--rl-surface-raised);
    border: 1px solid var(--rl-border);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.hd__muted[b-tmwjh2xdia] {
    color: var(--rl-text-muted);
    font-weight: 400;
}

.hd__next[b-tmwjh2xdia] {
    font-size: 0.8rem;
}

/* ---- the table ---- */

.hd__wrap[b-tmwjh2xdia] {
    padding: 3.4rem 0.5rem;
}

.hd__felt[b-tmwjh2xdia] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 50% / 50%;
    background: radial-gradient(ellipse at 50% 40%, #2b8a5a 0%, #1b6b43 55%, #124c30 100%);
    border: 0.9rem solid #5b3a22;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.35);
    color: #f4fbf6;
}

.hd__center[b-tmwjh2xdia] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    width: 62%;
}

.hd__street[b-tmwjh2xdia] {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
}

.hd__board[b-tmwjh2xdia] {
    display: flex;
    gap: 0.35rem;
    justify-content: center;
}

.hd__slot[b-tmwjh2xdia] {
    width: 3.1rem;
    aspect-ratio: 5 / 7;
    border: 2px dashed rgba(255, 255, 255, 0.28);
    border-radius: 0.4rem;
}

.hd__pot[b-tmwjh2xdia] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.6rem;
    background: rgba(0, 0, 0, 0.32);
    border-radius: 999px;
    padding: 0.25rem 0.8rem;
    font-size: 0.9rem;
}

.hd__pots[b-tmwjh2xdia] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    opacity: 0.9;
}

.hd__chip[b-tmwjh2xdia] {
    display: inline-block;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 28%, #d9a400 30%, #d9a400 100%);
    border: 2px dashed #fff;
    box-sizing: border-box;
    vertical-align: middle;
    margin-right: 0.25rem;
}

.hd__front[b-tmwjh2xdia] {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.45);
    border-radius: 999px;
    padding: 0.1rem 0.55rem 0.1rem 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

/* ---- seats ---- */

.hd__seat[b-tmwjh2xdia] {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 7.4rem;
    min-height: 3.6rem;
    padding: 0.3rem 0.4rem;
    text-align: center;
    background: var(--rl-surface);
    color: var(--rl-text);
    border: 2px solid var(--rl-border);
    border-radius: 0.7rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-size: 0.8rem;
    line-height: 1.25;
}

.hd__seat.is-active[b-tmwjh2xdia] {
    border-color: var(--rl-accent);
    box-shadow: 0 0 0 3px var(--rl-accent), 0 2px 10px rgba(0, 0, 0, 0.4);
}

.hd__seat.is-me .hd__name[b-tmwjh2xdia] {
    color: var(--rl-accent);
}

.hd__seat.is-folded[b-tmwjh2xdia] {
    opacity: 0.55;
}

.hd__seat.is-out[b-tmwjh2xdia] {
    opacity: 0.4;
    filter: grayscale(1);
}

.hd__seat.is-out .hd__name[b-tmwjh2xdia] {
    text-decoration: line-through;
}

.hd__seat.is-winner[b-tmwjh2xdia] {
    border-color: var(--rl-ok);
    box-shadow: 0 0 0 3px var(--rl-ok), 0 2px 10px rgba(0, 0, 0, 0.4);
}

.hd__name[b-tmwjh2xdia] {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hd__chips[b-tmwjh2xdia] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.hd__chips[b-tmwjh2xdia]::before {
    content: "";
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.3rem;
    border-radius: 50%;
    background: #d9a400;
    vertical-align: -0.05rem;
}

.hd__state[b-tmwjh2xdia] {
    color: var(--rl-text-muted);
    font-size: 0.72rem;
    min-height: 1em;
}

.hd__allin[b-tmwjh2xdia] {
    color: var(--rl-danger);
    font-weight: 700;
    text-transform: uppercase;
}

.hd__badges[b-tmwjh2xdia] {
    position: absolute;
    right: -0.45rem;
    top: -0.65rem;
    display: flex;
    gap: 0.2rem;
}

.hd__btn[b-tmwjh2xdia] {
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--rl-accent);
    color: var(--rl-accent-contrast);
    font-size: 0.65rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.hd__btn--dealer[b-tmwjh2xdia] {
    background: #fff;
    color: #111;
    border: 2px solid #111;
}

.hd__bet-inline[b-tmwjh2xdia] {
    display: none;
    font-weight: 700;
}

.hd__mini[b-tmwjh2xdia] {
    display: flex;
    justify-content: center;
    gap: 0.2rem;
    margin-top: 0.2rem;
}

.hd__hand[b-tmwjh2xdia] {
    font-size: 0.68rem;
    color: var(--rl-text-muted);
}

.hd__back[b-tmwjh2xdia] {
    width: 1.4rem;
    aspect-ratio: 5 / 7;
    border-radius: 0.2rem;
    background: repeating-linear-gradient(45deg, #2f4f9f 0 3px, #223a78 3px 6px);
    border: 1px solid #fff;
}

/* ---- cards: four colours so the suits stay apart even in a glance ---- */

.hd__card[b-tmwjh2xdia] {
    --suit: #1b1b1b;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    aspect-ratio: 5 / 7;
    background: #fff;
    color: var(--suit);
    border: 1px solid #8a8a8a;
    border-radius: 0.4rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    user-select: none;
}

.hd__card .hd__rank[b-tmwjh2xdia] {
    font-size: 1.15rem;
}

.hd__card .hd__suit[b-tmwjh2xdia] {
    font-size: 1.3rem;
}

.hd__card.su-s[b-tmwjh2xdia] { --suit: #1b1b1b; }
.hd__card.su-h[b-tmwjh2xdia] { --suit: #d62828; }
.hd__card.su-d[b-tmwjh2xdia] { --suit: #1d62d6; }
.hd__card.su-c[b-tmwjh2xdia] { --suit: #1f8a3b; }

.hd__card--big[b-tmwjh2xdia] {
    width: 5.2rem;
}

.hd__card--big .hd__rank[b-tmwjh2xdia] {
    font-size: 1.9rem;
}

.hd__card--big .hd__suit[b-tmwjh2xdia] {
    font-size: 2.2rem;
}

.hd__card--small[b-tmwjh2xdia] {
    width: 1.7rem;
    border-radius: 0.25rem;
}

.hd__card--small .hd__rank[b-tmwjh2xdia] {
    font-size: 0.8rem;
}

.hd__card--small .hd__suit[b-tmwjh2xdia] {
    font-size: 0.85rem;
}

/* ---- the viewer's hand and the controls ---- */

.hd__mine[b-tmwjh2xdia] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.hd__hole[b-tmwjh2xdia] {
    display: flex;
    gap: 0.6rem;
}

.hd__note[b-tmwjh2xdia] {
    text-align: center;
    color: var(--rl-text-muted);
    font-size: 0.9rem;
}

.hd__actions[b-tmwjh2xdia],
.hd__result[b-tmwjh2xdia] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.8rem;
    background: var(--rl-surface);
    border: 1px solid var(--rl-border);
    border-radius: 0.7rem;
}

.hd__turn[b-tmwjh2xdia] {
    font-weight: 700;
}

.hd__buttons[b-tmwjh2xdia],
.hd__quick[b-tmwjh2xdia],
.hd__slide[b-tmwjh2xdia] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.hd__raise[b-tmwjh2xdia] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rl-border);
}

.hd__range[b-tmwjh2xdia] {
    flex: 1 1 10rem;
    min-width: 8rem;
    accent-color: var(--rl-accent);
}

.hd__num[b-tmwjh2xdia] {
    width: 6.5rem;
    padding: 0.4rem 0.5rem;
    background: var(--rl-surface-sunken);
    color: var(--rl-text);
    border: 1px solid var(--rl-border);
    border-radius: 0.4rem;
    font: inherit;
}

.hd__act[b-tmwjh2xdia],
.hd__q[b-tmwjh2xdia],
.hd__go[b-tmwjh2xdia] {
    padding: 0.55rem 1rem;
    min-height: 2.5rem;
    background: var(--rl-surface-raised);
    color: var(--rl-text);
    border: 1px solid var(--rl-border);
    border-radius: 0.5rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.hd__q[b-tmwjh2xdia] {
    padding: 0.3rem 0.7rem;
    min-height: 2rem;
    font-size: 0.85rem;
}

.hd__act:hover:not(:disabled)[b-tmwjh2xdia],
.hd__q:hover:not(:disabled)[b-tmwjh2xdia] {
    border-color: var(--rl-accent);
}

.hd__act:disabled[b-tmwjh2xdia],
.hd__go:disabled[b-tmwjh2xdia] {
    opacity: 0.45;
    cursor: not-allowed;
}

.hd__act--raise[b-tmwjh2xdia],
.hd__go[b-tmwjh2xdia] {
    background: var(--rl-accent);
    color: var(--rl-accent-contrast);
    border-color: var(--rl-accent);
    align-self: flex-start;
}

.hd__act--fold[b-tmwjh2xdia] {
    color: var(--rl-danger);
}

.hd__act--allin[b-tmwjh2xdia] {
    border-color: var(--rl-danger);
    color: var(--rl-danger);
}

.hd__act:focus-visible[b-tmwjh2xdia],
.hd__q:focus-visible[b-tmwjh2xdia],
.hd__go:focus-visible[b-tmwjh2xdia],
.hd__num:focus-visible[b-tmwjh2xdia],
.hd__range:focus-visible[b-tmwjh2xdia] {
    outline: 2px solid var(--rl-accent);
    outline-offset: 2px;
}

.hd__h[b-tmwjh2xdia] {
    margin: 0;
    font-size: 1rem;
}

.hd__award[b-tmwjh2xdia] {
    margin: 0;
}

.hd__standings[b-tmwjh2xdia] {
    margin: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hd__place[b-tmwjh2xdia] {
    display: inline-block;
    min-width: 2.2rem;
    font-weight: 700;
    color: var(--rl-accent);
}

.hd__log[b-tmwjh2xdia] {
    max-height: 9rem;
    overflow-y: auto;
    padding: 0.5rem 0.7rem;
    background: var(--rl-surface-sunken);
    border: 1px solid var(--rl-border);
    border-radius: 0.5rem;
    font-size: 0.8rem;
    color: var(--rl-text-muted);
}

.hd__ev + .hd__ev[b-tmwjh2xdia] {
    margin-top: 0.15rem;
}

/* ---- narrow: no oval, a vertical list of seats under the board ---- */

@container (max-width: 700px) {
    .hd__wrap[b-tmwjh2xdia] {
        padding: 0;
    }

    .hd__felt[b-tmwjh2xdia] {
        aspect-ratio: auto;
        border-radius: 1.2rem;
        border-width: 0.5rem;
        padding: 0.6rem;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .hd__center[b-tmwjh2xdia] {
        position: static;
        transform: none;
        width: auto;
        order: -1;
        margin-bottom: 0.4rem;
    }

    .hd__slot[b-tmwjh2xdia],
    .hd__center .hd__card[b-tmwjh2xdia] {
        width: 2.5rem;
    }

    .hd__front[b-tmwjh2xdia] {
        display: none;
    }

    .hd__seat[b-tmwjh2xdia] {
        position: relative;
        /* Reason: each seat carries its oval position inline; as a list item that would shift it right and down. */
        left: auto !important;
        top: auto !important;
        transform: none;
        width: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 0.1rem 0.6rem;
        text-align: left;
        padding: 0.35rem 0.6rem 0.35rem 1.9rem;
        min-height: 0;
    }

    .hd__name[b-tmwjh2xdia] {
        grid-column: 1;
    }

    .hd__chips[b-tmwjh2xdia] {
        grid-column: 2;
        grid-row: 1;
    }

    .hd__state[b-tmwjh2xdia] {
        grid-column: 1;
    }

    .hd__bet-inline[b-tmwjh2xdia] {
        display: block;
        grid-column: 2;
        grid-row: 2;
    }

    .hd__mini[b-tmwjh2xdia] {
        grid-column: 3;
        grid-row: 1 / span 2;
        margin: 0;
    }

    .hd__hand[b-tmwjh2xdia] {
        grid-column: 1 / -1;
    }

    .hd__badges[b-tmwjh2xdia] {
        right: auto;
        left: 0.35rem;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
    }

    .hd__card--big[b-tmwjh2xdia] {
        width: 4.2rem;
    }
}
/* /Components/Pages/Servers/Games/Phase10Table.razor.rz.scp.css */
.p10[b-b9833fvv2w] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: 100%;
    max-width: 100%;
    color: var(--rl-text);
    box-sizing: border-box;
}

.p10 h3[b-b9833fvv2w] {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
}

.p10 h4[b-b9833fvv2w] {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
}

.muted[b-b9833fvv2w] {
    color: var(--rl-text-muted);
    font-size: 0.82rem;
    margin: 0.2rem 0;
}

.p10-bar[b-b9833fvv2w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: baseline;
}

.p10-round[b-b9833fvv2w] {
    font-weight: 700;
}

.p10-status[b-b9833fvv2w] {
    color: var(--rl-text-muted);
}

/* ---- seats */
.p10-seats[b-b9833fvv2w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip[b-b9833fvv2w] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 7.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--rl-border);
    border-radius: 8px;
    background: var(--rl-surface);
    font-size: 0.82rem;
}

.chip.turn[b-b9833fvv2w] {
    border-color: var(--rl-accent);
    box-shadow: 0 0 0 2px var(--rl-accent);
}

.chip.me .chip-name[b-b9833fvv2w] {
    color: var(--rl-accent);
}

.chip.left[b-b9833fvv2w] {
    opacity: 0.55;
}

.chip-name[b-b9833fvv2w] {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.chip-badges[b-b9833fvv2w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-height: 1.1rem;
}

.badge[b-b9833fvv2w] {
    padding: 0 0.4rem;
    border-radius: 999px;
    font-size: 0.7rem;
    border: 1px solid var(--rl-border);
}

.badge.ok[b-b9833fvv2w] {
    background: var(--rl-ok);
    border-color: var(--rl-ok);
    color: #fff;
}

.badge.warn[b-b9833fvv2w] {
    background: var(--rl-danger);
    border-color: var(--rl-danger);
    color: #fff;
}

.badge.muted[b-b9833fvv2w] {
    color: var(--rl-text-muted);
}

/* ---- piles and phase ladder */
.p10-main[b-b9833fvv2w] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: flex-start;
}

.p10-piles[b-b9833fvv2w] {
    display: flex;
    gap: 1rem;
}

.pile-box[b-b9833fvv2w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.pile-label[b-b9833fvv2w] {
    font-size: 0.75rem;
    color: var(--rl-text-muted);
}

.pile[b-b9833fvv2w] {
    width: 4.2rem;
    height: 5.8rem;
    padding: 0;
    border-radius: 8px;
    border: 2px solid var(--rl-border);
    background: var(--rl-surface-sunken);
    color: var(--rl-text);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pile.draw[b-b9833fvv2w] {
    background: repeating-linear-gradient(45deg, #2b3a67, #2b3a67 6px, #35467d 6px, #35467d 12px);
    color: #fff;
    cursor: pointer;
}

.pile.draw:disabled[b-b9833fvv2w] {
    cursor: default;
    opacity: 0.75;
}

.pile.draw:not(:disabled)[b-b9833fvv2w], .pile.live[b-b9833fvv2w] {
    border-color: var(--rl-accent);
    box-shadow: 0 0 0 2px var(--rl-accent);
    cursor: pointer;
}

.pile.empty[b-b9833fvv2w] {
    font-size: 0.75rem;
    color: var(--rl-text-muted);
    border-style: dashed;
}

.pile-back[b-b9833fvv2w] {
    font-weight: 800;
    letter-spacing: 0.05em;
}

.pile-count[b-b9833fvv2w] {
    position: absolute;
    bottom: 0.2rem;
    right: 0.35rem;
    font-size: 0.75rem;
}

.p10-ladder[b-b9833fvv2w] {
    flex: 1 1 14rem;
    min-width: 0;
}

.p10-ladder ol[b-b9833fvv2w] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.25rem 0.6rem;
}

.p10-ladder li[b-b9833fvv2w] {
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
    font-size: 0.8rem;
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
    color: var(--rl-text-muted);
}

.p10-ladder li.done[b-b9833fvv2w] {
    text-decoration: line-through;
    opacity: 0.7;
}

.p10-ladder li.now[b-b9833fvv2w] {
    background: var(--rl-accent);
    color: var(--rl-accent-contrast);
    font-weight: 700;
}

.ph-n[b-b9833fvv2w] {
    min-width: 1.2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---- cards */
.pcard[b-b9833fvv2w] {
    --card-colour: #666;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 3.2rem;
    height: 4.4rem;
    padding: 0.2rem 0.1rem;
    border-radius: 7px;
    border: 3px solid var(--card-colour);
    background: #fff;
    color: var(--card-colour);
    font-weight: 800;
    line-height: 1;
    user-select: none;
}

.pcard.small[b-b9833fvv2w] {
    width: 2.5rem;
    height: 3.4rem;
    font-size: 0.85rem;
    border-width: 2px;
    border-radius: 6px;
}

.pcard.c-red[b-b9833fvv2w] { --card-colour: #c62828; }
.pcard.c-blue[b-b9833fvv2w] { --card-colour: #1565c0; }
.pcard.c-green[b-b9833fvv2w] { --card-colour: #2e7d32; }
.pcard.c-yellow[b-b9833fvv2w] { --card-colour: #9a7400; background: #fff8d6; }

.pc-num[b-b9833fvv2w] {
    font-size: 1.35rem;
}

.pcard.small .pc-num[b-b9833fvv2w] {
    font-size: 1.05rem;
}

.pc-sym[b-b9833fvv2w] {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.pcard.c-wild[b-b9833fvv2w] {
    --card-colour: #fff;
    background: linear-gradient(135deg, #c62828, #f9a825, #2e7d32, #1565c0);
    border: 3px double #fff;
    outline: 2px solid #222;
    justify-content: center;
    gap: 0.15rem;
    color: #fff;
    text-shadow: 0 1px 2px #000, 0 0 3px #000;
}

.pcard.c-skip[b-b9833fvv2w] {
    --card-colour: #eee;
    background: repeating-linear-gradient(-45deg, #222, #222 5px, #444 5px, #444 10px);
    border: 3px solid #eee;
    justify-content: center;
    gap: 0.15rem;
    color: #fff;
}

.pc-big[b-b9833fvv2w] {
    font-size: 1.6rem;
}

.pcard.small .pc-big[b-b9833fvv2w] {
    font-size: 1.2rem;
}

.pc-word[b-b9833fvv2w] {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
}

.pc-as[b-b9833fvv2w] {
    font-size: 0.65rem;
}

/* ---- hand */
.p10-mine[b-b9833fvv2w] {
    border: 1px solid var(--rl-border);
    border-radius: 10px;
    background: var(--rl-surface);
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.mine-head[b-b9833fvv2w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.mine-head h3[b-b9833fvv2w] {
    margin: 0;
}

.hand[b-b9833fvv2w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.hand-card[b-b9833fvv2w] {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: 8px;
    transition: transform 0.08s ease;
}

.hand-card.selected[b-b9833fvv2w] {
    transform: translateY(-8px);
    outline: 3px solid var(--rl-accent);
    outline-offset: 1px;
}

.hand-card.slotted[b-b9833fvv2w] {
    opacity: 0.6;
}

.hand-card:focus-visible[b-b9833fvv2w] {
    outline: 3px solid var(--rl-accent);
    outline-offset: 2px;
}

.slot-tag[b-b9833fvv2w] {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    background: var(--rl-accent);
    color: var(--rl-accent-contrast);
    border-radius: 999px;
    font-size: 0.65rem;
    padding: 0.05rem 0.3rem;
    font-weight: 700;
}

/* ---- laying down */
.lay[b-b9833fvv2w] {
    border-top: 1px solid var(--rl-border);
    padding-top: 0.6rem;
}

.slots[b-b9833fvv2w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.5rem 0;
}

.slot[b-b9833fvv2w] {
    flex: 1 1 14rem;
    min-width: 0;
    border: 1px dashed var(--rl-border);
    border-radius: 8px;
    padding: 0.5rem;
    background: var(--rl-surface-sunken);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.slot.valid[b-b9833fvv2w] {
    border: 1px solid var(--rl-ok);
}

.slot-title[b-b9833fvv2w] {
    font-size: 0.8rem;
    font-weight: 700;
}

.slot-cards[b-b9833fvv2w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-height: 3.4rem;
    align-items: center;
}

.slot-card[b-b9833fvv2w] {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.slot-hint[b-b9833fvv2w] {
    font-size: 0.78rem;
    color: var(--rl-text-muted);
}

.slot-hint.ok[b-b9833fvv2w] {
    color: var(--rl-ok);
    font-weight: 700;
}

.slot-actions[b-b9833fvv2w] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* ---- buttons */
.btn[b-b9833fvv2w] {
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--rl-border);
    background: var(--rl-surface-raised);
    color: var(--rl-text);
    cursor: pointer;
    font: inherit;
}

.btn.small[b-b9833fvv2w] {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
}

.btn.primary[b-b9833fvv2w] {
    background: var(--rl-accent);
    border-color: var(--rl-accent);
    color: var(--rl-accent-contrast);
    font-weight: 700;
}

.btn:disabled[b-b9833fvv2w] {
    opacity: 0.45;
    cursor: not-allowed;
}

.discard-bar[b-b9833fvv2w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* ---- table groups */
.p10-table[b-b9833fvv2w] {
    border: 1px solid var(--rl-border);
    border-radius: 10px;
    background: var(--rl-surface);
    padding: 0.7rem;
}

.seat-groups + .seat-groups[b-b9833fvv2w] {
    margin-top: 0.7rem;
}

.seat-groups-name[b-b9833fvv2w] {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.groups[b-b9833fvv2w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.group[b-b9833fvv2w] {
    border: 1px solid var(--rl-border);
    border-radius: 8px;
    padding: 0.4rem;
    background: var(--rl-surface-sunken);
    max-width: 100%;
    box-sizing: border-box;
}

.group.hittable[b-b9833fvv2w] {
    border-color: var(--rl-accent);
    box-shadow: 0 0 0 2px var(--rl-accent);
}

.group-title[b-b9833fvv2w] {
    font-size: 0.75rem;
    color: var(--rl-text-muted);
    margin-bottom: 0.25rem;
}

.group-cards[b-b9833fvv2w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.group-hits[b-b9833fvv2w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

/* ---- side panels */
.p10-side[b-b9833fvv2w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.9rem;
}

.scores[b-b9833fvv2w], .last-round[b-b9833fvv2w], .events[b-b9833fvv2w] {
    border: 1px solid var(--rl-border);
    border-radius: 10px;
    background: var(--rl-surface);
    padding: 0.7rem;
    min-width: 0;
}

.scores table[b-b9833fvv2w] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.scores th[b-b9833fvv2w], .scores td[b-b9833fvv2w] {
    text-align: left;
    padding: 0.2rem 0.3rem;
    border-bottom: 1px solid var(--rl-border);
}

.scores tr.me th[b-b9833fvv2w] {
    color: var(--rl-accent);
}

.last-round ul[b-b9833fvv2w], .events ul[b-b9833fvv2w] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
}

.last-round p[b-b9833fvv2w] {
    margin: 0 0 0.3rem;
}

@media (max-width: 480px) {
    .pcard[b-b9833fvv2w] {
        width: 2.8rem;
        height: 3.9rem;
    }

    .pcard.small[b-b9833fvv2w] {
        width: 2.3rem;
        height: 3.2rem;
    }
}
/* /Components/Pages/Servers/Games/PoolTable.razor.rz.scp.css */
.pool[b-cga644yo0x] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(100%, 760px);
    margin-inline: auto;
}

.pool-table[b-cga644yo0x] {
    width: 100%;
    min-height: 120px;
}

.pool-status[b-cga644yo0x] {
    margin: 0;
    font-size: .9rem;
    color: var(--rl-text);
}

.pool-last[b-cga644yo0x] {
    margin: 0;
    font-size: .85rem;
    font-weight: 600;
    color: var(--rl-accent);
}

.pool-trays[b-cga644yo0x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .5rem;
}

.pool-tray[b-cga644yo0x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    padding: .45rem .6rem;
    border: 1px solid var(--rl-border);
    border-radius: 10px;
    background: var(--rl-surface-sunken);
    min-width: 0;
}

.pool-tray-name[b-cga644yo0x] {
    font-weight: 700;
    font-size: .85rem;
    color: var(--rl-text);
    overflow-wrap: anywhere;
}

.pool-tray-group[b-cga644yo0x] {
    font-size: .75rem;
    color: var(--rl-text-muted);
}

.pool-chips[b-cga644yo0x] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    flex-basis: 100%;
}

.pool-none[b-cga644yo0x] {
    font-size: .75rem;
    color: var(--rl-text-muted);
}

.chip[b-cga644yo0x] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    text-shadow: 0 0 2px #000, 0 0 2px #000;
    box-shadow: inset -2px -2px 4px rgba(0, 0, 0, .35), inset 2px 2px 3px rgba(255, 255, 255, .35);
}

.chip.stripe[b-cga644yo0x] {
    background: linear-gradient(#f6f4ec 0 26%, var(--c) 26% 74%, #f6f4ec 74%);
}
/* /Components/Pages/Servers/Games/UnoTable.razor.rz.scp.css */
.uno[b-mc9fcvui83] {
    --uno-red: #c62828;
    --uno-yellow: #f5b800;
    --uno-green: #2e7d32;
    --uno-blue: #1565c0;
    --uno-wild: #1f1f24;
    --cw-base: 62px;
    --cw: var(--cw-base);
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    color: var(--rl-text);
}

@media (min-width: 640px) {
    .uno[b-mc9fcvui83] { --cw-base: 78px; }
}

/* ---------- seats ---------- */
.uno__seats[b-mc9fcvui83] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.uno__seat[b-mc9fcvui83] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 6px 10px;
    border: 1px solid var(--rl-border);
    border-radius: 999px;
    background: var(--rl-surface);
    font-size: .88rem;
}

.uno__seat.is-turn[b-mc9fcvui83] {
    border-color: var(--rl-accent);
    box-shadow: 0 0 0 2px var(--rl-accent);
}

.uno__seat.is-left[b-mc9fcvui83] { opacity: .5; }
.uno__seat.is-me[b-mc9fcvui83] { background: var(--rl-surface-raised); }
.uno__seat-name[b-mc9fcvui83] { font-weight: 600; }
.uno__seat-note[b-mc9fcvui83] { color: var(--rl-text-muted); }

.uno__seat-count[b-mc9fcvui83] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-variant-numeric: tabular-nums;
}

.uno__mini[b-mc9fcvui83] {
    display: inline-block;
    width: 12px;
    height: 17px;
    border-radius: 3px;
    background: #111;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--rl-border);
}

.uno__badge[b-mc9fcvui83] {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--uno-red);
    color: #fff;
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .04em;
}

.uno__badge--missed[b-mc9fcvui83] {
    background: transparent;
    color: var(--rl-danger);
    border: 1px dashed var(--rl-danger);
    font-weight: 600;
}

/* ---------- buttons ---------- */
.uno__btn[b-mc9fcvui83] {
    padding: 6px 14px;
    border: 1px solid var(--rl-border);
    border-radius: 8px;
    background: var(--rl-accent);
    color: var(--rl-accent-contrast);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.uno__btn:disabled[b-mc9fcvui83] { opacity: .55; cursor: default; }
.uno__btn--catch[b-mc9fcvui83] { background: var(--rl-danger); color: #fff; padding: 3px 10px; animation: uno-pulse-b-mc9fcvui83 1s ease-in-out infinite; }
.uno__btn--quiet[b-mc9fcvui83] { background: transparent; color: var(--rl-text); }

@keyframes uno-pulse-b-mc9fcvui83 {
    50% { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
    .uno__btn--catch[b-mc9fcvui83] { animation: none; }
}

/* ---------- the middle of the table ---------- */
.uno__centre[b-mc9fcvui83] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px 26px;
    padding: 16px;
    border-radius: 16px;
    background: #14532d;
    color: #f0fdf4;
}

.uno__pile[b-mc9fcvui83] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.uno__pile-label[b-mc9fcvui83] { font-size: .8rem; opacity: .9; }

.uno__back[b-mc9fcvui83] {
    position: relative;
    width: var(--cw);
    aspect-ratio: 5 / 7;
    border-radius: 9px;
    border: 3px solid #fff;
    background: #111;
    color: #fff;
    cursor: default;
    display: grid;
    place-items: center;
    padding: 0;
}

.uno__back-logo[b-mc9fcvui83] {
    transform: rotate(-20deg);
    font-weight: 900;
    font-style: italic;
    color: var(--uno-yellow);
    text-shadow: 1px 1px 0 var(--uno-red);
    font-size: calc(var(--cw) * .32);
}

.uno__back.is-playable[b-mc9fcvui83] { cursor: pointer; box-shadow: 0 0 0 3px var(--uno-yellow); transform: translateY(-3px); }
.uno__back:disabled[b-mc9fcvui83] { opacity: .85; }

.uno__discard[b-mc9fcvui83] {
    --cw: calc(var(--cw-base) * 1.25);
    padding: 5px;
    border-radius: 14px;
    border: 4px solid transparent;
}

.uno__discard--red[b-mc9fcvui83] { border-color: var(--uno-red); }
.uno__discard--yellow[b-mc9fcvui83] { border-color: var(--uno-yellow); }
.uno__discard--green[b-mc9fcvui83] { border-color: var(--uno-green); }
.uno__discard--blue[b-mc9fcvui83] { border-color: var(--uno-blue); }
.uno__discard--wild[b-mc9fcvui83] { border-style: dashed; border-color: #fff; }

.uno__info[b-mc9fcvui83] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 150px;
}

.uno__colour[b-mc9fcvui83] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 2px solid #fff;
    font-weight: 700;
    color: #fff;
}

.uno__colour--red[b-mc9fcvui83] { background: var(--uno-red); }
.uno__colour--yellow[b-mc9fcvui83] { background: var(--uno-yellow); color: #1a1a1a; }
.uno__colour--green[b-mc9fcvui83] { background: var(--uno-green); }
.uno__colour--blue[b-mc9fcvui83] { background: var(--uno-blue); }
.uno__colour--wild[b-mc9fcvui83] { background: var(--uno-wild); }

.uno__colour-shape[b-mc9fcvui83] { font-weight: 900; letter-spacing: .05em; }
.uno__dir[b-mc9fcvui83] { font-size: .9rem; }
.uno__status[b-mc9fcvui83] { margin: 0; font-size: .92rem; font-weight: 600; max-width: 22ch; }

/* ---------- colour chooser ---------- */
.uno__chooser[b-mc9fcvui83] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 2px solid var(--rl-accent);
    border-radius: 12px;
    background: var(--rl-surface-raised);
}

.uno__chooser-title[b-mc9fcvui83] { font-weight: 700; margin-right: 6px; }

.uno__pick[b-mc9fcvui83] {
    padding: 8px 14px;
    border: 2px solid #fff;
    border-radius: 10px;
    font: inherit;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--rl-border);
}

.uno__pick:disabled[b-mc9fcvui83] { opacity: .6; }
.uno__pick--red[b-mc9fcvui83] { background: var(--uno-red); }
.uno__pick--yellow[b-mc9fcvui83] { background: var(--uno-yellow); color: #1a1a1a; }
.uno__pick--green[b-mc9fcvui83] { background: var(--uno-green); }
.uno__pick--blue[b-mc9fcvui83] { background: var(--uno-blue); }

/* ---------- cards ---------- */
.ucard[b-mc9fcvui83] {
    position: relative;
    flex: 0 0 auto;
    width: var(--cw);
    aspect-ratio: 5 / 7;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 9px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .3);
    color: #fff;
    font: inherit;
    overflow: hidden;
}

.ucard--big[b-mc9fcvui83] { cursor: default; }
.ucard--red[b-mc9fcvui83] { background: var(--uno-red); }
.ucard--yellow[b-mc9fcvui83] { background: var(--uno-yellow); color: #1a1a1a; }
.ucard--green[b-mc9fcvui83] { background: var(--uno-green); }
.ucard--blue[b-mc9fcvui83] { background: var(--uno-blue); }
.ucard--wild[b-mc9fcvui83] {
    background: conic-gradient(from 45deg, var(--uno-red) 0 25%, var(--uno-blue) 0 50%, var(--uno-green) 0 75%, var(--uno-yellow) 0);
}

.ucard__oval[b-mc9fcvui83] {
    position: absolute;
    inset: 16% 10%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    transform: rotate(-24deg);
}

.ucard__sym[b-mc9fcvui83] {
    transform: rotate(24deg);
    font-weight: 900;
    line-height: 1;
}

.ucard__sym--num[b-mc9fcvui83] { font-size: calc(var(--cw) * .5); }
.ucard__sym--act[b-mc9fcvui83] { font-size: calc(var(--cw) * .36); }
.ucard--red .ucard__sym[b-mc9fcvui83] { color: var(--uno-red); }
.ucard--yellow .ucard__sym[b-mc9fcvui83] { color: #b07d00; }
.ucard--green .ucard__sym[b-mc9fcvui83] { color: var(--uno-green); }
.ucard--blue .ucard__sym[b-mc9fcvui83] { color: var(--uno-blue); }
.ucard--wild .ucard__sym[b-mc9fcvui83] { color: #111; }

.ucard__corner[b-mc9fcvui83] {
    position: absolute;
    font-size: calc(var(--cw) * .2);
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 0 2px rgba(0, 0, 0, .35);
}

.ucard--yellow .ucard__corner[b-mc9fcvui83] { text-shadow: none; }
.ucard__corner--tl[b-mc9fcvui83] { top: 4px; left: 5px; }
.ucard__corner--br[b-mc9fcvui83] { bottom: 4px; right: 5px; transform: rotate(180deg); }

.ucard__new[b-mc9fcvui83] {
    position: absolute;
    top: 3px;
    right: 3px;
    padding: 0 5px;
    border-radius: 6px;
    background: #111;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* ---------- the hand ---------- */
.uno__hand[b-mc9fcvui83] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 6px;
    padding: 18px 4px 6px;
}

button.ucard[b-mc9fcvui83] { cursor: pointer; transition: transform .12s ease, opacity .12s ease; }
button.ucard.is-playable[b-mc9fcvui83] { transform: translateY(-10px); box-shadow: 0 0 0 3px var(--rl-accent), 0 4px 8px rgba(0, 0, 0, .35); }
button.ucard.is-playable:hover[b-mc9fcvui83], button.ucard.is-picked[b-mc9fcvui83] { transform: translateY(-16px); }
button.ucard.is-dim[b-mc9fcvui83] { opacity: .45; cursor: default; filter: saturate(.7); }
button.ucard:focus-visible[b-mc9fcvui83] { outline: 3px solid var(--rl-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    button.ucard[b-mc9fcvui83] { transition: none; }
}

.uno__hint[b-mc9fcvui83] { margin: 0; text-align: center; color: var(--rl-text-muted); font-size: .88rem; }

/* ---------- summary, scores, log ---------- */
.uno__summary[b-mc9fcvui83] {
    padding: 12px 14px;
    border: 2px solid var(--rl-accent);
    border-radius: 12px;
    background: var(--rl-surface-raised);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.uno__summary-title[b-mc9fcvui83] { margin: 0; font-size: 1.05rem; }
.uno__summary-list[b-mc9fcvui83] { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: min(100%, 260px); }
.uno__summary-list li[b-mc9fcvui83] { display: flex; justify-content: space-between; gap: 18px; }
.uno__summary-list li.is-winner[b-mc9fcvui83] { font-weight: 700; color: var(--rl-ok); }

.uno__lower[b-mc9fcvui83] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.uno__h[b-mc9fcvui83] { margin: 0 0 6px; font-size: .85rem; color: var(--rl-text-muted); font-weight: 600; }

.uno__table[b-mc9fcvui83] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

.uno__table th[b-mc9fcvui83], .uno__table td[b-mc9fcvui83] { padding: 4px 8px; text-align: right; border-bottom: 1px solid var(--rl-border); }
.uno__table th:first-child[b-mc9fcvui83] { text-align: left; font-weight: 600; }
.uno__table thead th[b-mc9fcvui83] { color: var(--rl-text-muted); font-weight: 500; font-size: .8rem; }
.uno__table tr.is-left[b-mc9fcvui83] { opacity: .5; }

.uno__events[b-mc9fcvui83] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 3px;
    font-size: .88rem;
    max-height: 14rem;
    overflow-y: auto;
}

.uno__events li:first-child[b-mc9fcvui83] { font-weight: 600; }
.uno__events li:not(:first-child)[b-mc9fcvui83] { color: var(--rl-text-muted); }
/* /Components/Pages/Servers/ImageCropDialog.razor.rz.scp.css */
.crop[b-ri11lltnc3] {
    width: min(38rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 1px solid var(--rl-border);
    border-radius: var(--rl-radius);
    background: var(--rl-surface);
    color: var(--rl-text);
    box-shadow: var(--rl-shadow-lg, 0 24px 60px rgb(0 0 0 / .32));
    overflow: auto;
}

.crop[open][b-ri11lltnc3] {
    display: flex;
    flex-direction: column;
    animation: crop-rise-b-ri11lltnc3 .2s var(--rl-ease) both;
}

.crop[b-ri11lltnc3]::backdrop {
    background: rgb(8 8 14 / .6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.crop__head[b-ri11lltnc3] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--rl-border);
}

.crop__head h2[b-ri11lltnc3] { margin: 0; font-size: 1.1rem; }
.crop__head small[b-ri11lltnc3] { color: var(--rl-text-muted); font-variant-numeric: tabular-nums; }

/* ---------- stage: the picture, and the frame that dims everything outside the crop ---------- */
.crop__stage[b-ri11lltnc3] {
    position: relative;
    flex: none;
    height: 20rem;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    background-color: #111318;
    background-image: conic-gradient(#1b1e25 25%, transparent 0 50%, #1b1e25 0 75%, transparent 0);
    background-size: 20px 20px;
}

.crop--wide .crop__stage[b-ri11lltnc3] { height: 15rem; }
.crop__stage.is-dragging[b-ri11lltnc3] { cursor: grabbing; }
.crop__stage:focus[b-ri11lltnc3] { outline: none; }
.crop__stage:focus-visible[b-ri11lltnc3] { outline: 2px solid var(--rl-accent); outline-offset: -2px; }

.crop__stage img[b-ri11lltnc3] {
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    opacity: 0;
    pointer-events: none;
    will-change: transform;
}

.crop__stage.is-ready img[b-ri11lltnc3] { opacity: 1; transition: opacity .15s ease-out; }

.crop__frame[b-ri11lltnc3] {
    position: absolute;
    pointer-events: none;
    border-radius: 10px;
    outline: 2px solid rgb(255 255 255 / .9);
    box-shadow: 0 0 0 100vmax rgb(6 8 12 / .62);
}

.crop--round .crop__frame[b-ri11lltnc3] { border-radius: 50%; }
.crop--square .crop__frame[b-ri11lltnc3] { border-radius: 14px; }

/* A server icon is square on disk and round in the rail until hovered, so the circle is shown as a guide. */
.crop--square .crop__frame[b-ri11lltnc3]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgb(255 255 255 / .5);
}

.crop__frame[b-ri11lltnc3]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--rl-dur);
    background-image:
        linear-gradient(to right, transparent 33.2%, rgb(255 255 255 / .35) 33.2% 33.5%, transparent 33.5% 66.5%, rgb(255 255 255 / .35) 66.5% 66.8%, transparent 66.8%),
        linear-gradient(to bottom, transparent 33.2%, rgb(255 255 255 / .35) 33.2% 33.5%, transparent 33.5% 66.5%, rgb(255 255 255 / .35) 66.5% 66.8%, transparent 66.8%);
}

.crop__stage.is-dragging .crop__frame[b-ri11lltnc3]::before { opacity: 1; }

/* ---------- controls ---------- */
.crop__help[b-ri11lltnc3] { margin: .65rem 1.1rem 0; font-size: .82rem; color: var(--rl-text-muted); }

.crop__zoom[b-ri11lltnc3] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1.1rem 0;
}

.crop__zoom input[type=range][b-ri11lltnc3] { flex: 1; min-width: 0; accent-color: var(--rl-accent); }

.crop__step[b-ri11lltnc3] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--rl-border);
    border-radius: 50%;
    background: var(--rl-surface-raised);
    color: var(--rl-text);
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--rl-dur), border-color var(--rl-dur), transform var(--rl-dur) var(--rl-ease);
}

.crop__step:hover[b-ri11lltnc3] { border-color: var(--rl-accent); }
.crop__step:active[b-ri11lltnc3] { transform: scale(.92); }
.crop__step:focus-visible[b-ri11lltnc3] { outline: none; border-color: var(--rl-accent); box-shadow: var(--rl-ring); }

.crop__readout[b-ri11lltnc3] {
    min-width: 3.25rem;
    text-align: right;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    color: var(--rl-text-muted);
}

.crop .cs-error[b-ri11lltnc3] { margin: .65rem 1.1rem 0; }

.crop__foot[b-ri11lltnc3] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem 1.1rem 1rem;
}

.crop__spacer[b-ri11lltnc3] { flex: 1; }

@media (max-width: 480px) {
    .crop__stage[b-ri11lltnc3] { height: 16rem; }
    .crop--wide .crop__stage[b-ri11lltnc3] { height: 11rem; }
    .crop__help[b-ri11lltnc3] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .crop[open][b-ri11lltnc3] { animation: none; }
}

@keyframes crop-rise-b-ri11lltnc3 {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
}
/* /Components/Pages/Servers/ImagePicker.razor.rz.scp.css */
.cs-pick__note[b-3o1m2xnjjg] {
    margin-top: .25rem;
    color: var(--rl-text-muted);
    font-style: italic;
}
/* /Components/Pages/Servers/InviteLanding.razor.rz.scp.css */
/* The page an invite link opens: one welcoming card in the middle of the page, in the hero language the signed-in pages
   open with (ui-kit.css .hero) — a dark banner washed in the server's own colour, a dot grid, the eclipse glowing quietly
   on the right, and the server's picture sitting on the banner's lower edge. The banner is dark in both themes, like every
   page hero; --invite-colour is the server's colour, set on the card. */

.invite[b-z8c2rjn0px] {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1rem;
    padding: 1.5rem 1rem 3rem;
}

.invite__card[b-z8c2rjn0px] {
    --invite-colour: #5865f2;
    position: relative;
    width: min(100%, 31rem);
    padding: 0 0 1.75rem;
    overflow: hidden;
    text-align: center;
    border-radius: 18px;
    box-shadow:
        0 26px 64px -30px color-mix(in srgb, var(--invite-colour) 75%, transparent),
        0 2px 10px -4px rgb(0 0 0 / 0.3);
    animation: rl-rise 0.24s var(--rl-ease) both;
}

/* No server to show: the same card, in a quiet slate. */
.invite__card--gone[b-z8c2rjn0px] { --invite-colour: #6b7488; }

/* ---- the banner ---------------------------------------------------------------------------------------------------- */

.invite__hero[b-z8c2rjn0px] {
    position: relative;
    isolation: isolate;
    height: 9rem;
    overflow: hidden;
    color: #fff;
    text-align: left;
}

.invite__card--gone .invite__hero[b-z8c2rjn0px] { height: 7rem; }

.invite__art[b-z8c2rjn0px] {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(60% 130% at 84% 18%, color-mix(in srgb, var(--invite-colour) 72%, transparent), transparent 66%),
        radial-gradient(45% 120% at 6% 118%, color-mix(in srgb, var(--invite-colour) 48%, transparent), transparent 70%),
        linear-gradient(125deg, color-mix(in srgb, var(--invite-colour) 32%, #0b0d14), #07080d);
}

/* A dot grid that fades in from the left, as on the page heroes. */
.invite__art[b-z8c2rjn0px]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgb(255 255 255 / 0.15) 1px, transparent 1.4px);
    background-size: 22px 22px;
    mask-image: linear-gradient(90deg, transparent 0%, #000 55%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%, #000 100%);
}

/* The brand's eclipse, lit by the server's colour. */
.invite__orb[b-z8c2rjn0px] {
    position: absolute;
    top: 50%;
    right: 9%;
    width: 6.25rem;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle at 38% 36%, color-mix(in srgb, var(--invite-colour) 22%, #0d0f16), #050608 70%);
    box-shadow:
        0 0 0 1.5px color-mix(in srgb, var(--invite-colour) 45%, #fff),
        0 0 24px 5px color-mix(in srgb, var(--invite-colour) 50%, transparent),
        0 0 80px 20px color-mix(in srgb, var(--invite-colour) 28%, transparent);
    animation: invite-glow-b-z8c2rjn0px 7s ease-in-out infinite alternate;
}

@keyframes invite-glow-b-z8c2rjn0px {
    to {
        box-shadow:
            0 0 0 1.5px color-mix(in srgb, var(--invite-colour) 35%, #fff),
            0 0 32px 8px color-mix(in srgb, var(--invite-colour) 62%, transparent),
            0 0 104px 28px color-mix(in srgb, var(--invite-colour) 36%, transparent);
    }
}

/* The server's own banner covers the art, darkened at top and bottom so the mark and the picture stand out on any image. */
.invite__banner[b-z8c2rjn0px] {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.invite__hero[b-z8c2rjn0px]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0.35), transparent 42%, transparent 70%, rgb(0 0 0 / 0.22));
    pointer-events: none;
}

.invite__brand[b-z8c2rjn0px] {
    position: absolute;
    top: 0.85rem;
    left: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.22rem 0.65rem 0.22rem 0.35rem;
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: 999px;
    background: rgb(10 12 18 / 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: rgb(255 255 255 / 0.88);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.invite__brand img[b-z8c2rjn0px] { width: 1.15rem; height: 1.15rem; }

/* ---- the server -------------------------------------------------------------------------------------------------------- */

.invite__icon[b-z8c2rjn0px] {
    position: relative;
    display: grid;
    place-items: center;
    width: 5.75rem;
    height: 5.75rem;
    margin: -2.9rem auto 0;
    overflow: hidden;
    border-radius: 1.5rem;
    border: 4px solid var(--rl-surface, #fff);
    box-shadow: 0 12px 28px -10px rgb(0 0 0 / 0.5);
    color: #fff;
    font-size: 1.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.invite__icon img[b-z8c2rjn0px] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.invite__icon--gone[b-z8c2rjn0px] { background: var(--rl-surface-sunken); color: var(--rl-text-muted); }
.invite__icon svg[b-z8c2rjn0px] { width: 2.1rem; height: 2.1rem; }

.invite__lead[b-z8c2rjn0px] {
    margin: 0.95rem 1.5rem 0;
    color: var(--rl-text-muted);
    font-size: 0.95rem;
}

.invite__title[b-z8c2rjn0px] {
    margin: 0.15rem 1.5rem 0;
    font-size: 1.85rem;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.invite__card--gone .invite__title[b-z8c2rjn0px] { margin-top: 0.95rem; font-size: 1.5rem; }

.invite__about[b-z8c2rjn0px] {
    margin: 0.75rem 1.5rem 0;
    color: var(--rl-text-muted);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Members, age, and the invite's limits, as pills. */
.invite__facts[b-z8c2rjn0px] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin: 1.1rem 1.5rem 0;
    padding: 0;
    list-style: none;
}

.invite__facts li[b-z8c2rjn0px] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    background: var(--rl-surface-sunken);
    color: var(--rl-text-muted);
    font-size: 0.82rem;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
}

.invite__dot[b-z8c2rjn0px] {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--rl-ok);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rl-ok) 25%, transparent);
}

/* ---- what to do --------------------------------------------------------------------------------------------------------- */

.invite__actions[b-z8c2rjn0px] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1.5rem 1.5rem 0;
}

.invite__actions form[b-z8c2rjn0px] {
    display: contents;
}

.invite__btn[b-z8c2rjn0px] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 650;
    text-align: center;
}

.invite__btn.btn--primary[b-z8c2rjn0px] {
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--invite-colour) 85%, transparent);
}

.invite__hint[b-z8c2rjn0px] {
    margin: 0.85rem 1.5rem 0;
    color: var(--rl-text-muted);
    font-size: 0.85rem;
}

.invite__error[b-z8c2rjn0px] {
    margin: 1rem 1.5rem 0;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--rl-danger) 12%, transparent);
    color: var(--rl-text);
    font-size: 0.9rem;
}

/* For a visitor with no account: what Shade is, under the card. */
.invite__shade[b-z8c2rjn0px] {
    max-width: 28rem;
    margin: 0;
    color: var(--rl-text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 420px) {
    .invite__hero[b-z8c2rjn0px] { height: 7.5rem; }
    .invite__orb[b-z8c2rjn0px] { width: 5rem; right: -0.75rem; }
    .invite__title[b-z8c2rjn0px] { font-size: 1.55rem; }
}

@media (prefers-reduced-motion: reduce) {
    .invite__card[b-z8c2rjn0px], .invite__orb[b-z8c2rjn0px] { animation: none; }
}
/* /Components/Pages/Servers/InviteManager.razor.rz.scp.css */
.inv-form[b-f1wgxewkqo] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    margin-bottom: 1rem;
}

.inv-form .field[b-f1wgxewkqo] {
    margin: 0;
    min-width: 10rem;
}

.inv-toggle[b-f1wgxewkqo] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .25rem 0 .5rem;
    font-size: .85rem;
    color: var(--rl-text-muted);
}

.inv-scroll[b-f1wgxewkqo] {
    overflow-x: auto;
}

.inv-table[b-f1wgxewkqo] {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.inv-table th[b-f1wgxewkqo] {
    padding: .35rem .5rem;
    text-align: left;
    color: var(--rl-text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.inv-table td[b-f1wgxewkqo] {
    padding: .45rem .5rem;
    border-top: 1px solid var(--rl-border);
    vertical-align: middle;
}

.inv-table__dim[b-f1wgxewkqo] {
    opacity: .6;
}

.inv-code[b-f1wgxewkqo] {
    display: block;
    overflow-wrap: anywhere;
}

.inv-when[b-f1wgxewkqo] {
    color: var(--rl-text-muted);
}

.inv-chip[b-f1wgxewkqo] {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: var(--rl-surface-sunken);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.inv-chip--active[b-f1wgxewkqo] {
    background: color-mix(in srgb, var(--rl-ok) 22%, transparent);
}

.inv-chip--revoked[b-f1wgxewkqo] {
    background: color-mix(in srgb, #d33 18%, transparent);
}

.inv-actions[b-f1wgxewkqo] {
    display: flex;
    gap: .35rem;
    justify-content: flex-end;
    white-space: nowrap;
}

.inv-actions .btn[b-f1wgxewkqo] {
    padding: .2rem .55rem;
    font-size: .8rem;
}
/* /Components/Pages/Servers/ProfilePage.razor.rz.scp.css */
/* The profile editor keeps its own frame (servers.css .cs-pedit) because the Shade pop-out shares it; on this page it gets the
   section cards' hairline and shadow so it reads as one of them under the banner. */
.pf-page[b-17f8u0ltnr]  .cs-pedit:not(.cs-pedit--popout) {
    box-shadow: inset 0 2px 0 color-mix(in srgb, var(--rl-chart-1) 75%, transparent), var(--rl-shadow-sm);
}
/* /Components/Pages/Servers/ServersIndex.razor.rz.scp.css */
/* /servers/manage: the kit's tiles and rows (ui-kit.css), plus what a server tile has that a board's does not — its own
   banner across the top, with its picture sitting on the banner's edge as it does on the server itself. */

/* The banner's figure strip waits for the lists, and stays away for someone with nothing in Shade yet. */
.sv-index[b-rztddiisco]  .hero__stats:empty { display: none; }

/* The servers block: a small heading over the tiles, as a card's inner heading reads. */
.sv-block[b-rztddiisco] { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.sv-block > .ui-h3[b-rztddiisco] { margin: 0; }

/* The banner runs edge to edge over the tile's padding; a clip plays in it like the banner on the server itself. */
.sv-tile__banner[b-rztddiisco] {
    position: relative;
    display: block;
    height: 4.5rem;
    margin: -0.95rem -1rem 0;
    border-radius: 13px 13px 0 0;
    overflow: hidden;
    background: center / cover no-repeat var(--rl-surface-sunken);
}

.sv-tile--banner .ui-tile__top[b-rztddiisco] { align-items: flex-end; }
.sv-tile--banner .ui-tile__icon[b-rztddiisco] {
    width: 2.9rem;
    height: 2.9rem;
    margin-top: -1.6rem;
    border: 3px solid var(--rl-surface);
}

.ui-tile__icon video[b-rztddiisco] { width: 100%; height: 100%; object-fit: cover; display: block; }
/* /Components/Pages/Sessions.razor.rz.scp.css */
/* The idle switch, as a chip beside the filters so the count of what it hides is always in view. */
.sessions__chip[b-s47s9swygm] {
    min-height: var(--rl-control-h, 2.25rem);
    font: inherit;
    font-size: 0.82rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--rl-border);
    border-radius: 999px;
    background: var(--rl-surface-sunken);
    color: var(--rl-text-muted);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sessions__chip:hover[b-s47s9swygm] { color: var(--rl-text); border-color: var(--rl-accent); }

.sessions__chip.is-on[b-s47s9swygm] {
    background: color-mix(in srgb, var(--rl-accent) 18%, var(--rl-surface-raised));
    border-color: var(--rl-accent);
    color: var(--rl-text);
}

/* "Favorites only" as a plain check on the toolbar, the height of the pills beside it. */
.ses-check[b-s47s9swygm] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--rl-control-h, 2.25rem);
    font-size: 0.86rem;
    white-space: nowrap;
    cursor: pointer;
}

/* ---- the cards ------------------------------------------------------------------------------------------------------ */

/* Columns that never ask for more than the screen has, so a phone gets one card across rather than a sideways scroll. */
.ses-grid[b-s47s9swygm] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    align-items: stretch;
}

.ses-card[b-s47s9swygm] {
    margin-bottom: 0;
    min-width: 0;
}

.ses-card__head[b-s47s9swygm] { flex-wrap: nowrap; align-items: flex-start; }

/* The title takes what the buttons leave and ends in an ellipsis; the star and the state chip stay whole. */
.ses-card__title[b-s47s9swygm] { flex: 1 1 auto; line-height: 1.75rem; }

.ses-card__title a[b-s47s9swygm] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}

.ses-card__title a:hover[b-s47s9swygm] { text-decoration: underline; text-underline-offset: 3px; }
.ses-card__title .fav__star[b-s47s9swygm], .ses-card__title .ui-chip[b-s47s9swygm] { flex: none; }

.ses-card__head .ui-card__actions[b-s47s9swygm] { flex: none; flex-wrap: nowrap; }

.ses-card__where[b-s47s9swygm] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; min-width: 0; margin: -0.25rem 0 0; }
.ses-card__where a[b-s47s9swygm] { min-width: 0; color: inherit; }
.ses-card__where a > span[b-s47s9swygm] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ses-card__where a:hover[b-s47s9swygm] { color: var(--rl-text); }

/* The tail of the reply, in a sunken well like the Panel's run rows, so the moving text reads as the card's live part. */
.ses-card__preview[b-s47s9swygm] {
    flex: 1 1 auto;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: var(--rl-surface-sunken);
    overflow-wrap: anywhere;
}

.ses-card--streaming .ses-card__preview[b-s47s9swygm] {
    background: color-mix(in srgb, var(--rl-accent) 7%, var(--rl-surface-sunken));
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--rl-accent) 70%, transparent);
}

.ses-card--failed .ses-card__preview[b-s47s9swygm] {
    background: color-mix(in srgb, var(--rl-danger) 7%, var(--rl-surface-sunken));
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--rl-danger) 70%, transparent);
}

.ses-card .agent__composer .btn[b-s47s9swygm] { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; }
.ses-card .agent__composer .btn svg[b-s47s9swygm] { width: 0.9rem; height: 0.9rem; }
.ses-card .ui-card__actions .btn svg[b-s47s9swygm] { width: 0.85rem; height: 0.85rem; }

@media (max-width: 520px) {
    .ses-card__head[b-s47s9swygm] { flex-wrap: wrap; }
}
/* /Components/Pages/Sprites.razor.rz.scp.css */
.sprites__row[b-1auyc19w73] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sprites__row select[b-1auyc19w73] {
    flex: 1 1 12rem;
    min-width: 0;
}

/* The frames to pack, in order: a kit list whose rows keep their buttons on one line beside a name that is cut short. */
.sprites__inputs[b-1auyc19w73] {
    margin: 0.25rem 0 0;
}

.sprites__inputs .ui-row__end[b-1auyc19w73] {
    gap: 0.25rem;
}
/* /Components/Pages/Status.razor.rz.scp.css */
/* Status: each service is a kit row with a state dot in front and its chips on the right. On a narrow card the chips
   drop under the name rather than squeezing it to nothing. */

.pub__row[b-byl78poetk] { flex-wrap: wrap; row-gap: 0.35rem; }
.pub__row .ui-row__main[b-byl78poetk] { flex: 1 1 10rem; }
.pub__chips[b-byl78poetk] { flex-wrap: wrap; justify-content: flex-end; }

/* The load table keeps its own markup inside the kit's rounded frame, with the frame's raised head. */
.status thead th[b-byl78poetk] {
    background: var(--rl-surface-raised);
    white-space: nowrap;
}

.pub__key[b-byl78poetk] { max-width: 52rem; margin-top: 0.25rem; }
/* /Components/Pages/Talk.razor.rz.scp.css */
/* The voice-only mode. Laid out as one column that centres on the orb, because the orb is the interface and
   everything else is a caption for it. */
.talk[b-4to4s6idkl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    min-height: 100%;
    padding: 3rem 1.5rem;
    text-align: center;
}

.talk__blocked[b-4to4s6idkl] {
    max-width: 34rem;
    color: var(--rl-text-muted);
}

.talk__stage[b-4to4s6idkl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* ---- The orb ---------------------------------------------------------------------------------------------

   Two rings behind a disc. The rings only animate while something is happening, so a still orb means the
   machine is not listening — which is the one thing it must never be ambiguous about. */
.orb[b-4to4s6idkl] {
    position: relative;
    width: 9rem;
    height: 9rem;
    border: none;
    border-radius: 50%;
    background: var(--rl-surface-sunken);
    color: var(--rl-text-muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.orb:hover[b-4to4s6idkl] {
    color: var(--rl-text);
}

.orb__icon[b-4to4s6idkl] {
    width: 2.4rem;
    height: 2.4rem;
    position: relative;
    z-index: 1;
}

.orb__ring[b-4to4s6idkl] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0;
}

.orb--live[b-4to4s6idkl] {
    background: color-mix(in srgb, var(--rl-accent) 18%, var(--rl-surface-sunken));
    color: var(--rl-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--rl-accent) 35%, transparent);
}

/* Waiting for speech: a slow, patient pulse. */
.orb--listening .orb__ring[b-4to4s6idkl] {
    animation: orb-pulse-b-4to4s6idkl 2.4s ease-out infinite;
}

/* Hearing speech: faster, and the disc brightens. */
.orb--speech[b-4to4s6idkl] {
    background: color-mix(in srgb, var(--rl-accent) 32%, var(--rl-surface-sunken));
    color: var(--rl-accent);
}

.orb--speech .orb__ring[b-4to4s6idkl] {
    animation: orb-pulse-b-4to4s6idkl 0.9s ease-out infinite;
}

/* Thinking: no rings at all. Nothing is being heard, and a pulse here would suggest otherwise. */
.orb--thinking[b-4to4s6idkl] {
    color: var(--rl-text-muted);
}

.orb--speaking[b-4to4s6idkl] {
    background: color-mix(in srgb, var(--rl-accent) 24%, var(--rl-surface-sunken));
    color: var(--rl-accent);
}

.orb--speaking .orb__ring[b-4to4s6idkl] {
    animation: orb-pulse-b-4to4s6idkl 1.4s ease-out infinite;
}

.orb__ring--slow[b-4to4s6idkl] {
    animation-delay: 0.7s !important;
}

@keyframes orb-pulse-b-4to4s6idkl {
    0% { opacity: 0.55; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.45); }
}

/* Reason: a pulsing ring is motion nobody asked for. The colour states still carry every distinction. */
@media (prefers-reduced-motion: reduce) {
    .orb__ring[b-4to4s6idkl] { animation: none !important; }
}

.talk__state[b-4to4s6idkl] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--rl-text-muted);
    min-height: 1.4rem;
}

.talk__error[b-4to4s6idkl] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--rl-danger);
}

/* ---- The one exchange on screen -------------------------------------------------------------------------- */
.talk__exchange[b-4to4s6idkl] {
    max-width: 44rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.talk__said[b-4to4s6idkl] {
    margin: 0;
    font-size: 1.05rem;
    color: var(--rl-text-muted);
    font-style: italic;
}

.talk__answer[b-4to4s6idkl] {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.5;
    color: var(--rl-text);
}

.talk__answer--waiting[b-4to4s6idkl] {
    color: var(--rl-text-muted);
    letter-spacing: 0.3em;
}

.talk__foot[b-4to4s6idkl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.talk__hint[b-4to4s6idkl] {
    font-size: 0.72rem;
    color: var(--rl-text-muted);
}

/* Pull the voice Refresh control up against the picker it belongs to, tighter than the foot's own gap. */
.talk__voiceRefresh[b-4to4s6idkl] {
    margin-left: -0.45rem;
    color: var(--rl-text-muted);
}

/* The local-server status pills. Each is a button — click a green one to recheck, a red one to start (and for
   STT install) that server. The global .pill carries a left margin for sitting after a heading; in the strip it
   is spaced by gap instead, and the button chrome is stripped so it reads as a pill. */
.talk__localHealth[b-4to4s6idkl] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.talk__localHealth .pill[b-4to4s6idkl] {
    margin-left: 0;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.talk__localHealth .pill:disabled[b-4to4s6idkl] {
    cursor: default;
    opacity: 0.7;
}

.talk__modes[b-4to4s6idkl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.talk__modeSelect[b-4to4s6idkl] {
    min-width: 12rem;
}

.talk__studioLink[b-4to4s6idkl] {
    font-size: 0.75rem;
    color: var(--rl-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.talk__studioLink:hover[b-4to4s6idkl] {
    color: var(--rl-text);
    text-decoration: underline;
}

.talk__modeDesc[b-4to4s6idkl] {
    margin: 0 auto 0.75rem;
    max-width: 32rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--rl-text-muted);
}

/* ---- The log panel ---------------------------------------------------------------------------------------

   A debugging surface, so it reads like one: monospace times, one row per step, the detail folded away until
   asked for. It scrolls on its own so a long session does not push the orb off the screen. */
.talk__logBtn--bad[b-4to4s6idkl] {
    color: var(--rl-danger);
    border-color: var(--rl-danger);
}

.talk__log[b-4to4s6idkl] {
    width: 100%;
    max-width: 72rem;
    max-height: 60vh;
    overflow: auto;
    text-align: left;
    font-size: 0.78rem;
    background: var(--rl-surface-raised);
    border: 1px solid var(--rl-border);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
}

.talk__logHead[b-4to4s6idkl] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.talk__logActions[b-4to4s6idkl] {
    margin-left: auto;
    display: flex;
    gap: 0.4rem;
}

.talk__logEntry[b-4to4s6idkl] {
    border-top: 1px solid var(--rl-border);
    padding: 0.3rem 0;
}

.talk__logEntry > summary[b-4to4s6idkl] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    cursor: pointer;
}

.talk__logEntry--bad[b-4to4s6idkl],
.talk__logEntry--bad .talk__logTitle[b-4to4s6idkl] {
    color: var(--rl-danger);
}

.talk__logTime[b-4to4s6idkl],
.talk__logTook[b-4to4s6idkl] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    color: var(--rl-text-muted);
    white-space: nowrap;
}

.talk__logStage[b-4to4s6idkl] {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--rl-border);
    color: var(--rl-text-muted);
    min-width: 3.6rem;
    text-align: center;
}

.talk__logStage--llm[b-4to4s6idkl] { color: var(--rl-accent); border-color: var(--rl-accent); }
.talk__logStage--tts[b-4to4s6idkl],
.talk__logStage--stt[b-4to4s6idkl] { color: var(--rl-ok); border-color: var(--rl-ok); }

.talk__logTitle[b-4to4s6idkl] {
    color: var(--rl-text);
}

.talk__logRoute[b-4to4s6idkl] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.72rem;
    padding: 0 0.4rem;
    border-radius: 4px;
    background: var(--rl-surface-sunken);
    color: var(--rl-text-muted);
    overflow-wrap: anywhere;
}

.talk__logErr[b-4to4s6idkl] {
    color: var(--rl-danger);
    overflow-wrap: anywhere;
}

.talk__logFields[b-4to4s6idkl] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.2rem 0.8rem;
    margin: 0.4rem 0 0.2rem 1rem;
}

.talk__logFields dt[b-4to4s6idkl] {
    color: var(--rl-text-muted);
    font-weight: 500;
}

.talk__logFields dd[b-4to4s6idkl] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 16rem;
    overflow: auto;
}

.talk__logTrace[b-4to4s6idkl] {
    margin: 0.2rem 0 0.2rem 1rem;
    padding-left: 1rem;
    color: var(--rl-text-muted);
}

.talk__logTrace code[b-4to4s6idkl] {
    margin-right: 0.4rem;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .talk__logFields[b-4to4s6idkl] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Tiles.razor.rz.scp.css */
/* The tile card's foot is the kit's form foot (ui-formfoot): the run's link on the left, the buttons on the right. */
.tiles__row[b-2ikw0h7dt8] {
    margin-top: 0.15rem;
}

/* Nine copies of the tile as one background, so a seam would show as a grid of lines. */
.tiles__repeat[b-2ikw0h7dt8] {
    width: min(100%, 30rem);
    aspect-ratio: 1;
    background-repeat: repeat;
    background-size: calc(100% / 3) calc(100% / 3);
    border: 1px solid var(--rl-border);
    border-radius: 10px;
}

/* A checkerboard behind the atlas, so the transparent parts of each piece read as empty rather than as the page. */
.tiles__atlas[b-2ikw0h7dt8] {
    display: block;
    width: min(100%, 36rem);
    border: 1px solid var(--rl-border);
    border-radius: 10px;
    background:
        conic-gradient(#8884 25%, transparent 0 50%, #8884 0 75%, transparent 0) 0 0 / 24px 24px;
    image-rendering: auto;
}

.tiles__roles[b-2ikw0h7dt8] {
    columns: 4;
    margin: 0;
    padding-left: 1.6rem;
    font-size: 0.8rem;
    color: var(--rl-text-muted);
}

@media (max-width: 640px) {
    .tiles__roles[b-2ikw0h7dt8] {
        columns: 2;
    }
}
/* /Components/Pages/Unreal/GameDesigner.razor.rz.scp.css */
/* A planned asset's brief can run to a few lines, so its icon sits at the top of the row rather than in the middle. */
.designer__asset[b-ijjniqqe83] {
    align-items: flex-start;
}
/* /Components/Pages/Unreal/UnrealStudio.razor.rz.scp.css */
/* The kits under the new-product form: a small heading with their count, then the list (styled in tool-pages.css) close under it. */
.ui-h3[b-04k0mrkin7] {
    margin-top: 1rem;
}

.unreal-products[b-04k0mrkin7] {
    margin-top: 0.45rem;
}
/* /Components/Pages/UserSettings.razor.rz.scp.css */
/* ---- The input meter -------------------------------------------------------------------------------------

   The threshold is drawn as a line on the bar rather than printed as a number beside it. The only question
   anybody actually has is whether their speech clears the line, and that is a comparison. */
.meter[b-h9ferrpzxv] {
    position: relative;
    height: 1.5rem;
    /* The card's own gap spaces it now (a SectionCard is a flex column). */
    margin: 0;
    border: 1px solid var(--rl-border);
    border-radius: 8px;
    background: var(--rl-surface-sunken);
    overflow: hidden;
}

.meter__fill[b-h9ferrpzxv] {
    height: 100%;
    background: var(--rl-text-muted);
    /* Reason: short enough to still read as live, long enough that the 120 ms sampling does not look steppy. */
    transition: width 0.12s linear;
}

.meter__fill--over[b-h9ferrpzxv] {
    background: var(--rl-accent);
}

.meter__mark[b-h9ferrpzxv] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--rl-danger);
}

/* ---- The probe readout ----------------------------------------------------------------------------------- */
.probe[b-h9ferrpzxv] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    margin: 0;
    font-size: 0.82rem;
}

.probe dt[b-h9ferrpzxv] {
    color: var(--rl-text-muted);
}

.probe dd[b-h9ferrpzxv] {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.probe__heading[b-h9ferrpzxv] {
    margin: 0.4rem 0 0;
}

/* ---- What it heard --------------------------------------------------------------------------------------- */
.heard[b-h9ferrpzxv] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.heard__row[b-h9ferrpzxv] {
    display: flex;
    gap: 0.75rem;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: var(--rl-surface-sunken);
    font-size: 0.85rem;
}

.heard__time[b-h9ferrpzxv] {
    color: var(--rl-text-muted);
    font-variant-numeric: tabular-nums;
    flex: none;
}

.heard__text[b-h9ferrpzxv] {
    word-break: break-word;
}

/* ---- The page's layout ----------------------------------------------------------------------------------

   The per-device cards in the side column are other components' own cards; the kit's split already takes their
   bottom margin away, and the folded Appearance card keeps the page's rhythm above the split. */
.settings[b-h9ferrpzxv]  .appearance { margin-bottom: 1rem; }

/* The voice chips arrive once the page has read the settings; until then the row would be an empty gap. */
.settings[b-h9ferrpzxv]  .hero__chips:not(:has(*)) { display: none; }
/* /Components/Pages/VoiceOver.razor.rz.scp.css */
.studio__row[b-l7d1n8nl3z] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.studio__row select[b-l7d1n8nl3z] {
    flex: 1 1 12rem;
    min-width: 0;
}

.studio__state[b-l7d1n8nl3z] {
    font-size: 0.8rem;
    color: var(--rl-text-muted);
}

.studio__warn[b-l7d1n8nl3z] {
    color: var(--rl-danger);
}
/* /Components/Pages/WhatsNew.razor.rz.scp.css */
/* What's new: a commit's subject is a sentence, so it wraps instead of being cut to one line like a kit row's title. */

.whatsnew__row[b-o1mwrzlrm0] { align-items: flex-start; gap: 0.75rem; }
.whatsnew__subject[b-o1mwrzlrm0] { white-space: normal; overflow-wrap: anywhere; font-size: 0.9rem; line-height: 1.45; }
.whatsnew__row .ui-row__meta[b-o1mwrzlrm0] { padding-top: 0.15rem; }
.whatsnew__hash[b-o1mwrzlrm0] {
    flex: none;
    padding-top: 0.15rem;
    color: var(--rl-text-muted);
    font-size: 0.75rem;
}

@media (max-width: 640px) {
    .whatsnew__row[b-o1mwrzlrm0] { flex-wrap: wrap; row-gap: 0.15rem; }
    .whatsnew__row .ui-row__main[b-o1mwrzlrm0] { flex: 1 1 100%; }
}

.whatsnew__era[b-o1mwrzlrm0] { margin: 1.5rem 0 0; font-size: 1.1rem; }
.whatsnew__eraNote[b-o1mwrzlrm0] { margin: 0.15rem 0 0.75rem; }
/* /Components/Pages/Workflows/WorkflowConnections.razor.rz.scp.css */
/* A saved connection's row: the kit's row, but its buttons drop under the words on a narrow screen rather than squeezing
   them, and a warning or a "used by" note can run to two lines. */
.wc-row[b-pj014ax8tc] { flex-wrap: wrap; align-items: flex-start; }
.wc-row .ui-row__main[b-pj014ax8tc] { flex: 1 1 18rem; padding-top: 0.15rem; }
.wc-row .ui-row__sub[b-pj014ax8tc] { overflow-wrap: anywhere; }
.wc-row .ui-row__end[b-pj014ax8tc] { margin-left: auto; padding-top: 0.25rem; }
.wc-row .admin__status[b-pj014ax8tc] { margin: 0.3rem 0 0; }
/* /Components/Pages/Workflows/WorkflowsIndex.razor.rz.scp.css */
/* The workflow tiles, the toolbar and the chips are the kit's (ui-kit.css). What is left here is the template picker in
   the New workflow card: each template is a kit tile that is a button, a little narrower than a list tile, and the
   chosen one wears the accent ring. */
.wfi-templates[b-dmavs27xah] {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}

.wfi-template[b-dmavs27xah] {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.wfi-template[aria-pressed="true"][b-dmavs27xah] {
    border-color: var(--rl-accent);
    box-shadow: 0 0 0 1px var(--rl-accent) inset, var(--rl-shadow-sm);
}

.wfi-template:focus-visible[b-dmavs27xah] {
    outline: 2px solid var(--rl-accent);
    outline-offset: 2px;
}