/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-au7j0rtvie] {
    background: var(--clr-warning-surface);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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-au7j0rtvie] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ─── IMPERSONATION BUTTON + PANEL ─── */

/* Amber tint on the icon when actively impersonating */
.impersonate-wrap.is-impersonating .impersonate-btn[b-au7j0rtvie],
.impersonate-btn.is-open[b-au7j0rtvie] {
    color: var(--clr-warning-text);
}

/* Full-screen transparent backdrop — closes the panel on outside click */
.impersonate-backdrop[b-au7j0rtvie] {
    position: fixed;
    inset: 0;
    z-index: 2000;
}

/* Panel sits above the backdrop — hidden by default, .is-open reveals it */
.impersonate-panel[b-au7j0rtvie] {
    position: fixed;
    top: calc(var(--header-height) + 8px);
    right: 0.75rem;
    width: 300px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
    z-index: 9996;
}

    .impersonate-panel.is-open[b-au7j0rtvie] {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

.impersonate-panel__header[b-au7j0rtvie] {
    padding: 0.55rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.impersonate-panel__list[b-au7j0rtvie] {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 300px;
    overflow-y: auto;
}

.impersonate-panel__item[b-au7j0rtvie] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 7px 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    transition: background var(--transition);
}

    .impersonate-panel__item:hover[b-au7j0rtvie] {
        background: var(--nav-hover-bg);
    }

    .impersonate-panel__item.is-active[b-au7j0rtvie] {
        background: var(--nav-active-bg);
        color: var(--brand-primary);
    }

.impersonate-panel__avatar[b-au7j0rtvie] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: var(--brand-white);
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.impersonate-panel__info[b-au7j0rtvie] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.impersonate-panel__name[b-au7j0rtvie] {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.impersonate-panel__email[b-au7j0rtvie] {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.impersonate-panel__empty[b-au7j0rtvie] {
    padding: 1rem;
    font-size: 0.84rem;
    color: var(--text-secondary);
    text-align: center;
}

/* ─── IMPERSONATION BANNER (fixed below header) ─── */

.impersonation-banner[b-au7j0rtvie] {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: 38px;
    z-index: 999;
    background: var(--clr-warning-bg);
    border-bottom: 1px solid var(--clr-warning-border);
    color: var(--clr-warning-text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.84rem;
    padding: 0 1rem;
}

.impersonation-banner__email[b-au7j0rtvie] {
    opacity: 0.75;
}

.impersonation-banner__exit[b-au7j0rtvie] {
    margin-left: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1.5px solid var(--clr-warning-border);
    background: transparent;
    color: var(--clr-warning-text);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}

    .impersonation-banner__exit:hover[b-au7j0rtvie] {
        background: var(--clr-warning-border);
    }
/* /Components/Layout/Shared/AlertRow.razor.rz.scp.css */
.alert-row[b-i0km5txpmx] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color var(--transition);
}

.alert-row:hover[b-i0km5txpmx],
.alert-row:focus-visible[b-i0km5txpmx] {
    background: var(--nav-hover-bg);
    outline: none;
}

.alert-row:focus-visible[b-i0km5txpmx] {
    box-shadow: inset 0 0 0 2px var(--brand-primary);
}

.alert-row--unread[b-i0km5txpmx] {
    background: var(--nav-active-bg);
    border-left-color: var(--brand-primary);
}

.alert-row__icon[b-i0km5txpmx] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-white);
}

.alert-row__icon--info[b-i0km5txpmx] { background: var(--clr-info-border); color: var(--clr-info-text); }
.alert-row__icon--success[b-i0km5txpmx] { background: var(--clr-success-border); color: var(--clr-success-text); }
.alert-row__icon--warning[b-i0km5txpmx] { background: var(--clr-warning-border); color: var(--clr-warning-text); }
.alert-row__icon--assignment[b-i0km5txpmx] { background: var(--brand-primary); color: var(--brand-white); }

.alert-row__body[b-i0km5txpmx] {
    flex: 1 1 auto;
    min-width: 0;
}

.alert-row__title[b-i0km5txpmx] {
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--text-primary);
    word-wrap: break-word;
}

.alert-row--unread .alert-row__title[b-i0km5txpmx] {
    font-weight: 600;
}

.alert-row__meta[b-i0km5txpmx] {
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.alert-row__badge[b-i0km5txpmx] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem;
    border-radius: var(--border-radius-sm);
}

.alert-row__badge--unread[b-i0km5txpmx] {
    background: var(--brand-primary);
    color: var(--brand-white);
}

.alert-row__badge--read[b-i0km5txpmx] {
    background: var(--bg-inset);
    color: var(--text-secondary);
}

.alert-row__actions[b-i0km5txpmx] {
    flex: 0 0 auto;
    align-self: center;
}

.alert-row__action-btn[b-i0km5txpmx] {
    background: transparent;
    color: var(--link-color);
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--border-radius-sm);
}

.alert-row__action-btn:hover[b-i0km5txpmx] {
    background: var(--icon-btn-hover-bg);
    color: var(--link-color-hover);
}
/* /Components/Layout/Shared/AlertsBell.razor.rz.scp.css */
.notification-wrap[b-taheek87u3] {
    position: relative;
    display: inline-flex;
}

.notification-backdrop[b-taheek87u3] {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}
/* /Components/Layout/Shared/AlertsDropdown.razor.rz.scp.css */
.alerts-dropdown[b-t6vr451nm4] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 1rem);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    overflow: hidden;
}

.alerts-dropdown__header[b-t6vr451nm4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-subsection);
}

.alerts-dropdown__title[b-t6vr451nm4] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.alerts-dropdown__mark-all[b-t6vr451nm4] {
    background: transparent;
    color: var(--link-color);
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-sm);
}

.alerts-dropdown__mark-all:hover[b-t6vr451nm4] {
    background: var(--icon-btn-hover-bg);
    color: var(--link-color-hover);
}

.alerts-dropdown__list[b-t6vr451nm4] {
    max-height: 360px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

.alerts-dropdown__empty[b-t6vr451nm4] {
    padding: 1.25rem 0.85rem;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

.alerts-dropdown__footer[b-t6vr451nm4] {
    border-top: 1px solid var(--border-default);
    background: var(--bg-subsection);
}

.alerts-dropdown__view-all[b-t6vr451nm4] {
    display: block;
    padding: 0.6rem 0.85rem;
    text-align: center;
    color: var(--link-color);
    font-size: 0.85rem;
    font-weight: 500;
}

.alerts-dropdown__view-all:hover[b-t6vr451nm4] {
    background: var(--nav-hover-bg);
    color: var(--link-color-hover);
}
/* /Components/Layout/Shared/AuthenticationInfoDisplay.razor.rz.scp.css */
/* Scoped styles for AuthenticationInfoDisplay */
/* /Components/Layout/Shared/CalendarAgendaList.razor.rz.scp.css */
.agenda[b-rleo6ij4ik] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* The <li> owns the separator, today-highlight, and type scale; the inner element owns the
   grid and padding so a clickable row's hit area covers the whole strip. */
.agenda__row[b-rleo6ij4ik] {
    border-top: 1px solid var(--border-default, rgba(128, 128, 128, 0.08));
    font-size: 0.875rem;
    line-height: 1.3;
    border-radius: 0.25rem;
}

.agenda__row-inner[b-rleo6ij4ik] {
    display: grid;
    grid-template-columns: 130px 22px minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.5rem;
    width: 100%;
}

/* Button reset — the row must look identical to its non-clickable sibling until hovered. */
.agenda__row-inner--clickable[b-rleo6ij4ik] {
    background: none;
    border: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 0.25rem;
}

.agenda__row-inner--clickable:hover[b-rleo6ij4ik] {
    background: var(--bg-inset);
}

.agenda__row-inner--clickable:focus-visible[b-rleo6ij4ik] {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

.agenda__row:first-of-type[b-rleo6ij4ik] {
    border-top: none;
}

.agenda__row--today[b-rleo6ij4ik] {
    background: var(--clr-info-bg);
    border-top-color: transparent;
}

.agenda__row--today + .agenda__row[b-rleo6ij4ik] {
    border-top-color: transparent;
}

.agenda__date[b-rleo6ij4ik] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.agenda__row--today .agenda__date[b-rleo6ij4ik] {
    color: var(--brand-primary);
    font-weight: 700;
}

.agenda__icon[b-rleo6ij4ik] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
}

.agenda__icon--birthday[b-rleo6ij4ik] {
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
}

.agenda__icon--anniversary[b-rleo6ij4ik] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

.agenda__icon--holiday[b-rleo6ij4ik] {
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
}

.agenda__icon--sprint[b-rleo6ij4ik] {
    background: var(--clr-needs-review-bg);
    color: var(--clr-needs-review-text);
}

.agenda__icon--activity[b-rleo6ij4ik] {
    background: var(--clr-activity-bg);
    color: var(--clr-activity-text);
}

.agenda__icon--training[b-rleo6ij4ik],
.agenda__icon--default[b-rleo6ij4ik] {
    background: var(--clr-ignored-bg);
    color: var(--clr-ignored-text);
}

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

.agenda__title[b-rleo6ij4ik] {
    color: var(--text-primary);
    font-weight: 600;
}

.agenda__user-icon[b-rleo6ij4ik] {
    margin-right: 0.3rem;
    color: var(--text-tertiary);
    vertical-align: middle;
}

/* "This row has an admin-written description" marker. */
.agenda__desc-icon[b-rleo6ij4ik] {
    margin-left: 0.3rem;
    color: var(--text-tertiary);
    vertical-align: middle;
}

.agenda__subtitle[b-rleo6ij4ik] {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.agenda__private-pill[b-rleo6ij4ik] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.4rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
/* /Components/Layout/Shared/CalendarGrid.razor.rz.scp.css */
.cal-grid[b-reu8ywsfbe] {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.18));
    border-radius: 0.5rem;
    overflow: hidden;
}

.cal-grid__header[b-reu8ywsfbe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-subsection);
    border-bottom: 1px solid var(--border-default, rgba(128, 128, 128, 0.18));
}

.cal-grid__nav[b-reu8ywsfbe] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.cal-grid__month[b-reu8ywsfbe] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cal-grid__weekdays[b-reu8ywsfbe] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background: var(--bg-inset);
}

.cal-grid__weekday[b-reu8ywsfbe] {
    padding: 0.4rem 0.5rem;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.cal-grid__days[b-reu8ywsfbe] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: minmax(96px, auto);
}

.cal-grid__day[b-reu8ywsfbe] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.35rem 0.4rem;
    border-top: 1px solid var(--border-default, rgba(128, 128, 128, 0.12));
    border-left: 1px solid var(--border-default, rgba(128, 128, 128, 0.12));
    background: var(--bg-card);
    cursor: pointer;
    min-width: 0;
}

.cal-grid__day:nth-child(7n+1)[b-reu8ywsfbe] {
    border-left: none;
}

.cal-grid__day:hover[b-reu8ywsfbe] {
    background: var(--bg-subsection);
}

.cal-grid__day--out[b-reu8ywsfbe] {
    background: var(--bg-inset);
}

.cal-grid__day--out .cal-grid__day-number[b-reu8ywsfbe] {
    color: var(--text-tertiary);
}

.cal-grid__day--today[b-reu8ywsfbe] {
    background: var(--clr-info-bg);
}

.cal-grid__day--today .cal-grid__day-number[b-reu8ywsfbe] {
    color: var(--brand-primary);
    font-weight: 700;
}

.cal-grid__day-number[b-reu8ywsfbe] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cal-grid__chips[b-reu8ywsfbe] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

/* Chips render as <button> so they're keyboard-reachable; the reset keeps them looking like
   the plain pills they were. Colors come from the --{kind} modifiers below. */
.cal-grid__chip[b-reu8ywsfbe] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.35rem;
    border: 0;
    margin: 0;
    border-radius: 0.25rem;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-grid__chip--clickable[b-reu8ywsfbe] {
    cursor: pointer;
}

/* opacity rather than a brightness filter so the feedback reads the same in light and dark,
   where the chip backgrounds sit on opposite sides of the page color. */
.cal-grid__chip--clickable:hover[b-reu8ywsfbe] {
    opacity: 0.8;
}

.cal-grid__chip:focus-visible[b-reu8ywsfbe] {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

.cal-grid__chip-label[b-reu8ywsfbe] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-grid__chip-lock[b-reu8ywsfbe] {
    flex-shrink: 0;
    opacity: 0.85;
}

.cal-grid__chip-user[b-reu8ywsfbe] {
    flex-shrink: 0;
    opacity: 0.85;
}

/* "This chip has an admin-written description" marker. */
.cal-grid__chip-desc[b-reu8ywsfbe] {
    flex-shrink: 0;
    opacity: 0.75;
}

.cal-grid__chip--birthday[b-reu8ywsfbe] {
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
}

.cal-grid__chip--anniversary[b-reu8ywsfbe] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

.cal-grid__chip--holiday[b-reu8ywsfbe] {
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
}

.cal-grid__chip--sprint[b-reu8ywsfbe] {
    background: var(--clr-needs-review-bg);
    color: var(--clr-needs-review-text);
}

.cal-grid__chip--activity[b-reu8ywsfbe] {
    background: var(--clr-activity-bg);
    color: var(--clr-activity-text);
}

.cal-grid__chip--training[b-reu8ywsfbe],
.cal-grid__chip--default[b-reu8ywsfbe] {
    background: var(--clr-ignored-bg);
    color: var(--clr-ignored-text);
}

.cal-grid__chip--more[b-reu8ywsfbe] {
    background: transparent;
    color: var(--text-tertiary);
    font-style: italic;
    padding-left: 0;
}

/* The generic clickable-chip hover fades the pill's background, which a transparent chip has
   none of — underline it instead so the affordance is visible. */
.cal-grid__chip--more.cal-grid__chip--clickable:hover[b-reu8ywsfbe] {
    opacity: 1;
    color: var(--text-primary);
    text-decoration: underline;
}
/* /Components/Layout/Shared/CapacityWorkflowBadge.razor.rz.scp.css */
.cw-badge[b-60tw77paqo] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.4;
    border: none;
}

.cw-badge--interactive[b-60tw77paqo] {
    cursor: pointer;
    transition: filter 0.15s ease;
}

.cw-badge--interactive:hover[b-60tw77paqo] {
    filter: brightness(0.92);
}

.cw-badge__chevron[b-60tw77paqo] {
    font-size: 0.5rem;
    margin-left: 0.125rem;
    opacity: 0.7;
}

.cw-badge--sm[b-60tw77paqo] {
    font-size: 0.625rem;
    padding: 0.0625rem 0.375rem;
}

.cw-badge--not-started[b-60tw77paqo] {
    background: var(--bg-page);
    color: var(--text-tertiary);
}

.cw-badge--backlog[b-60tw77paqo] {
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
}

.cw-badge--in-progress[b-60tw77paqo] {
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
}

.cw-badge--awaiting-feedback[b-60tw77paqo] {
    background: var(--clr-info-bg);
    color: var(--brand-primary);
}

.cw-badge--complete[b-60tw77paqo] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

/* ── Dropdown ── */
.cw-dropdown[b-60tw77paqo] {
    position: relative;
    display: inline-block;
    overflow: visible;
}

.cw-dropdown__backdrop[b-60tw77paqo] {
    position: fixed;
    inset: 0;
    z-index: 9990;
}

.cw-dropdown__menu[b-60tw77paqo] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9991;
    margin-top: 0.25rem;
    padding: 0.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    list-style: none;
    min-width: 140px;
}

.cw-dropdown__item[b-60tw77paqo] {
    display: block;
    width: 100%;
    padding: 0.25rem 0.375rem;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
    transition: background 0.15s ease;
}

.cw-dropdown__item:hover[b-60tw77paqo] {
    background: var(--bg-inset);
}
/* /Components/Layout/Shared/CheckInStatusBadge.razor.rz.scp.css */
.ci-badge[b-3yr8jq26bp] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.4;
}

.ci-badge--submitted[b-3yr8jq26bp] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

.ci-badge--excused[b-3yr8jq26bp] {
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
}

.ci-badge--missing[b-3yr8jq26bp] {
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
}

/* Deliberately quiet: an exemption is a standing arrangement, not something to act on. */
.ci-badge--exempt[b-3yr8jq26bp] {
    background: var(--bg-subsection);
    color: var(--text-tertiary);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.25));
}
/* /Components/Layout/Shared/ChecklistWizard.razor.rz.scp.css */
/* All .wiz-* styles moved to global app.css so both ChecklistWizard (solution
   checklists, shown inside a dialog) and ModuleChecklistWizard (handbook
   module instances) share the same look. This file is kept intentionally
   empty so the component can have a scoped stylesheet later if a
   solution-checklist-only tweak ever needs to live here. */
/* /Components/Layout/Shared/CircuitHealthMonitor.razor.rz.scp.css */
/* Headless island — renders no markup, so no scoped styles. The stale-page
   prompt it backs is styled in ReconnectModal.razor.css (.stale-page__*),
   since that prompt must live in pure DOM to survive a dead circuit. */
/* /Components/Layout/Shared/CollabChecklistEditor.razor.rz.scp.css */
/* Two columns: the editing area (main) and, when open, the comments side rail. */
.checklist-collab[b-njo3qtjz0v] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.checklist-collab__main[b-njo3qtjz0v] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Footer status bar (mirrors the HTML document editor's bottom bar): the
   live-connection state + last-saved time, right-aligned below the editing
   area. Presence + workflow buttons live in the page header. */
.checklist-collab__statusbar[b-njo3qtjz0v] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.4rem 0.25rem 0;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

.collab-savestate[b-njo3qtjz0v] {
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

/* ── Comments (copied from the HTML editor's scoped styles so they apply to this
   component's panel; the highlight-mark styling stays with the step editors) ── */
.collab-status[b-njo3qtjz0v] {
    font-size: 0.75rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--text-tertiary);
    color: var(--text-secondary);
    white-space: nowrap;
}

.collab-status--connected[b-njo3qtjz0v] {
    border-color: currentColor;
}

.collab-status--reconnecting[b-njo3qtjz0v],
.collab-status--disconnected[b-njo3qtjz0v],
.collab-status--ended[b-njo3qtjz0v],
.collab-status--rejected[b-njo3qtjz0v] {
    color: var(--clr-warning-text, var(--text-primary));
    border-color: currentColor;
}

.collab-comments-toggle[b-njo3qtjz0v] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    font-size: 0.75rem;
    cursor: pointer;
}

.collab-comments-toggle.is-active[b-njo3qtjz0v] {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* Side rail: sticky so it stays in view while the step content scrolls. The
   top offset clears the fixed app nav + sticky page header so the rail's own
   header isn't hidden behind them. */
.checklist-comments[b-njo3qtjz0v] {
    flex: 0 0 20rem;
    max-width: 20rem;
    position: sticky;
    top: 9rem;
    /* Leaves ~3.5rem at the bottom so the rail clears the sticky Submit/Publish
       footer on draft checklists (and stays within the viewport). */
    max-height: calc(100vh - 12.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    /* No top padding: the sticky header supplies its own, so scrolled content
       has no gap to bleed into above the title. */
    padding: 0 0.75rem 0.75rem;
}

/* Stack the rail below the editor when the viewport is too narrow for two columns. */
@media (max-width: 900px) {
    .checklist-collab[b-njo3qtjz0v] {
        flex-direction: column;
    }

    .checklist-comments[b-njo3qtjz0v] {
        flex-basis: auto;
        max-width: none;
        width: 100%;
        position: static;
        max-height: 26rem;
    }
}

.checklist-comments__head[b-njo3qtjz0v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    /* Sticky within the rail's own scroll. Own top padding (the rail has none)
       + an opaque background + a separator so scrolled thread content passes
       cleanly UNDER it instead of bleeding into a gap above the title. */
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-card);
    padding: 0.75rem 0 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.checklist-comments__head h3[b-njo3qtjz0v] {
    font-size: 0.95rem;
    margin: 0;
    color: var(--text-primary);
}

.checklist-comments__steplabel[b-njo3qtjz0v] {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-tertiary);
    margin-bottom: 0.25rem;
}

.collab-comments__empty[b-njo3qtjz0v] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.collab-comment-thread[b-njo3qtjz0v] {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
    background: var(--bg-page);
    cursor: pointer;
}

.collab-comment-thread.is-focused[b-njo3qtjz0v] {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 1px var(--brand-primary);
}

.collab-comment-thread.is-resolved[b-njo3qtjz0v] {
    opacity: 0.7;
}

.collab-comment-thread--new[b-njo3qtjz0v] {
    border-color: var(--brand-primary);
    cursor: default;
}

.collab-comment-thread__quote[b-njo3qtjz0v] {
    margin: 0 0 0.4rem;
    padding: 0.15rem 0.5rem;
    border-left: 3px solid var(--clr-warning-text, #f59e0b);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-style: italic;
}

.collab-comment[b-njo3qtjz0v] {
    margin-bottom: 0.4rem;
}

.collab-comment__meta[b-njo3qtjz0v] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.collab-comment__meta strong[b-njo3qtjz0v] {
    color: var(--text-primary);
}

.collab-comment__body[b-njo3qtjz0v] {
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: pre-wrap;
}

.collab-comment-thread__resolved[b-njo3qtjz0v] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin: 0.25rem 0 0;
}

/* General (unanchored) comment: attached to the whole checklist, no step/quote. */
.collab-comment-thread__general[b-njo3qtjz0v] {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-tertiary);
    margin-bottom: 0.35rem;
}

.checklist-comments__head-title[b-njo3qtjz0v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.collab-comments__add-general[b-njo3qtjz0v] {
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

/* Orphaned thread: its highlighted text was edited/removed, so it can't be
   jumped to. Flagged so the reader knows why clicking does nothing. */
.collab-comment-thread.is-orphaned[b-njo3qtjz0v] {
    border-style: dashed;
}

.collab-comment-thread__orphan[b-njo3qtjz0v] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--clr-warning-text, #b45309);
    margin: 0 0 0.35rem;
}

.collab-comment-composer[b-njo3qtjz0v] {
    width: 100%;
    font-size: 0.85rem;
    resize: vertical;
    margin-top: 0.35rem;
}

.collab-comment-actions[b-njo3qtjz0v] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.empty-state[b-njo3qtjz0v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    text-align: center;
    color: var(--text-secondary);
}

/* Per-step editor panel — matches the original single-author checklist look. */
.checklist-author-step[b-njo3qtjz0v] {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checklist-author-step__header[b-njo3qtjz0v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.checklist-author-step__num[b-njo3qtjz0v] {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.checklist-author-step__actions[b-njo3qtjz0v] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.checklist-author-link[b-njo3qtjz0v] {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}
/* /Components/Layout/Shared/CollabHtmlEditor.razor.rz.scp.css */
.html-editor[b-ie32jjrzvz] {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    min-height: 200px;
    overflow: hidden;
}

/* The editor root is a flex column; when the surface's content outgrows the
   available height, flex items default to shrinking — which vertically
   squishes the toolbar and bars. Pin every chrome row to natural height; the
   surface (overflow-y: auto) is the only child that absorbs the squeeze. */
.html-editor-toolbar[b-ie32jjrzvz],
.html-editor-tabletools[b-ie32jjrzvz],
.html-editor-findbar[b-ie32jjrzvz],
.html-editor-draftbar[b-ie32jjrzvz],
.html-editor__statusbar[b-ie32jjrzvz] {
    flex-shrink: 0;
}

.html-editor-toolbar[b-ie32jjrzvz] {
    display: flex;
    /* Single row: tools that don't fit move into the ⋯ overflow panel (see
       relayoutToolbar in html-editor.js). overflow:hidden both clips any
       transient spill during measurement and makes scrollWidth a reliable
       overflow signal. The absolutely-positioned panel escapes the clip
       because the toolbar itself is unpositioned — its containing block is
       the .html-editor root. */
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 2px;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    /* --bg-subsection reads as a distinct "header tray" against --bg-card in
       both themes: in dark it's lighter than the surface (clear elevation);
       in light it's a subtle gray strip. Avoid --bg-page — it's nearly
       identical to --bg-card in dark theme and the toolbar disappears. */
    background: var(--bg-subsection);
}

.html-editor-btn[b-ie32jjrzvz] {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    transition: background-color 80ms ease, border-color 80ms ease;
}

.html-editor-btn:hover[b-ie32jjrzvz],
.html-editor-btn:focus-visible[b-ie32jjrzvz] {
    /* --surface-hover isn't a theme token; the rgba fallback is what actually applies. */
    background: var(--surface-hover, rgba(0, 0, 0, 0.05));
    outline: none;
}

.html-editor-btn[aria-pressed="true"][b-ie32jjrzvz] {
    background: var(--brand-primary);
    color: var(--brand-white);
    border-color: var(--brand-primary);
}

/* Merge/split buttons disable when the caret's cell has no legal target. */
.html-editor-btn:disabled[b-ie32jjrzvz] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* The button's display:inline-flex would override the hidden attribute's UA
   display:none (same trap as the source textarea) — re-assert it. */
.html-editor-btn[hidden][b-ie32jjrzvz] {
    display: none;
}

/* ── Toolbar overflow (⋯) panel ── */
.html-editor-overflow-btn[b-ie32jjrzvz] {
    font-weight: 700;
}

.html-editor-overflow-panel[b-ie32jjrzvz] {
    position: absolute;
    right: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
    max-width: min(420px, calc(100% - 8px));
    padding: 6px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    z-index: 20;
}

.html-editor-overflow-panel[hidden][b-ie32jjrzvz] {
    display: none;
}

/* A separator that lands first in the panel is noise — the panel edge
   already provides the visual break. */
.html-editor-overflow-panel > .html-editor-sep:first-child[b-ie32jjrzvz] {
    display: none;
}

/* ── Full screen ── */
.html-editor.is-fullscreen[b-ie32jjrzvz] {
    position: fixed;
    inset: 0;
    /* Above the app header (9999) and sidebar (9989); the editor's own
       dialogs elevate further via .dialog-backdrop--above-editor. */
    z-index: 10000;
    border-radius: 0;
    border: 0;
}

/* Let the editing surface grow to fill the viewport instead of capping at
   the inline-editor height. */
.html-editor.is-fullscreen .html-editor-surface[b-ie32jjrzvz],
.html-editor.is-fullscreen .html-editor-source[b-ie32jjrzvz] {
    flex: 1 1 auto;
    max-height: none;
}

/* Swap the maximize/minimize glyphs with the mode. ::deep because the SVGs
   carry the Icon component's scope attribute, not this component's. */
.html-editor-btn-fullscreen[b-ie32jjrzvz]  .html-editor-icon-min {
    display: none;
}

.html-editor.is-fullscreen .html-editor-btn-fullscreen[b-ie32jjrzvz]  .html-editor-icon-max {
    display: none;
}

.html-editor.is-fullscreen .html-editor-btn-fullscreen[b-ie32jjrzvz]  .html-editor-icon-min {
    display: inline;
}

/* Dialogs opened while the editor covers the viewport must stack above it
   (the global .dialog-backdrop sits at z-index 9997, below the editor's
   fullscreen layer at 10000). */
.dialog-backdrop--above-editor[b-ie32jjrzvz] {
    z-index: 10001;
}

/* Swap the page/full-width glyphs with the layout mode, mirroring the
   fullscreen swap above. */
.html-editor-btn-layout[b-ie32jjrzvz]  .html-editor-icon-wide {
    display: none;
}

.html-editor.is-page-layout .html-editor-btn-layout[b-ie32jjrzvz]  .html-editor-icon-page {
    display: none;
}

.html-editor.is-page-layout .html-editor-btn-layout[b-ie32jjrzvz]  .html-editor-icon-wide {
    display: inline;
}

/* Orientation only means something in page mode — hide the button entirely
   in full width. Icon shows the orientation you'd switch TO. */
.html-editor:not(.is-page-layout) .html-editor-btn-orientation[b-ie32jjrzvz] {
    display: none;
}

.html-editor-btn-orientation[b-ie32jjrzvz]  .html-editor-icon-to-portrait {
    display: none;
}

.html-editor.is-page-landscape .html-editor-btn-orientation[b-ie32jjrzvz]  .html-editor-icon-to-landscape {
    display: none;
}

.html-editor.is-page-landscape .html-editor-btn-orientation[b-ie32jjrzvz]  .html-editor-icon-to-portrait {
    display: inline;
}

.html-editor-btn-bold[b-ie32jjrzvz] { font-weight: 700; font-family: serif; }
.html-editor-btn-italic[b-ie32jjrzvz] { font-style: italic; font-family: serif; }
.html-editor-btn-underline[b-ie32jjrzvz] { text-decoration: underline; font-family: serif; }
.html-editor-btn-strikethrough[b-ie32jjrzvz] { text-decoration: line-through; font-family: serif; }
.html-editor-btn-omega[b-ie32jjrzvz] { font-family: serif; }

/* Paragraph-style dropdown. Sized to sit flush with the 28px buttons. */
.html-editor-select[b-ie32jjrzvz] {
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 4px;
    min-height: 28px;
    padding: 2px 4px;
    font-size: 0.82rem;
    cursor: pointer;
}

.html-editor-select:hover[b-ie32jjrzvz],
.html-editor-select:focus-visible[b-ie32jjrzvz] {
    border-color: var(--brand-primary);
    outline: none;
}

.html-editor-sep[b-ie32jjrzvz] {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
}

/* ── Alignment flyout (one trigger + popup of the four choices) ── */
/* NOT positioned: the flyout must anchor to the .html-editor root (which IS
   positioned), so the toolbar's overflow:hidden doesn't clip it — the same
   trick the ⋯ overflow panel uses. Position is set in JS from the trigger. */
.html-editor-align[b-ie32jjrzvz] {
    display: inline-flex;
}

.html-editor-align__caret[b-ie32jjrzvz] {
    font-size: 0.55rem;
    line-height: 1;
    margin-left: 1px;
    opacity: 0.7;
}

/* Trigger shows only the current alignment's icon (data-align set by JS).
   ::deep because the glyphs are SVGs rendered inside the Icon child component. */
.html-editor-align[b-ie32jjrzvz]  .html-editor-align__icon {
    display: none;
}

.html-editor-align[data-align="left"][b-ie32jjrzvz]  .html-editor-align__icon--left,
.html-editor-align[data-align="center"][b-ie32jjrzvz]  .html-editor-align__icon--center,
.html-editor-align[data-align="right"][b-ie32jjrzvz]  .html-editor-align__icon--right,
.html-editor-align[data-align="justify"][b-ie32jjrzvz]  .html-editor-align__icon--justify {
    display: inline;
}

.html-editor-align__menu[b-ie32jjrzvz] {
    /* top/left set in JS relative to the editor root (the offsetParent). */
    position: absolute;
    z-index: 25;
    display: flex;
    gap: 2px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.html-editor-align__menu[hidden][b-ie32jjrzvz] {
    display: none;
}

/* ── Text-style group (Paragraph / Font / Size) ──
   Inline by default (the three selects show); when JS adds .is-collapsed the
   selects move into the flyout and only the icon trigger shows. */
.html-editor-textstyle[b-ie32jjrzvz] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.html-editor-textstyle__trigger[b-ie32jjrzvz] {
    /* Shown only while collapsed (the [hidden] attr governs the rest). */
    gap: 1px;
}

.html-editor-textstyle__pop[b-ie32jjrzvz] {
    /* top/left set in JS relative to the editor root (the offsetParent),
       same approach as the alignment flyout. */
    position: absolute;
    z-index: 25;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    min-width: 160px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.html-editor-textstyle__pop[hidden][b-ie32jjrzvz] {
    display: none;
}

/* Selects fill the flyout width so they're easy to hit and read. */
.html-editor-textstyle__pop .html-editor-select[b-ie32jjrzvz] {
    width: 100%;
}

/* ── Contextual table tools ──
   A slim second toolbar row that appears only while the caret is inside a
   table (JS toggles .is-in-table on the root). */
.html-editor-tabletools[b-ie32jjrzvz] {
    display: none;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
    padding: 3px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-subsection);
}

.html-editor.is-in-table .html-editor-tabletools[b-ie32jjrzvz] {
    display: flex;
}

/* The WYSIWYG surface is hidden in source mode; so are its table tools. */
.html-editor.is-source-mode .html-editor-tabletools[b-ie32jjrzvz] {
    display: none !important;
}

.html-editor-tabletools__label[b-ie32jjrzvz] {
    color: var(--text-tertiary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 6px;
}

.html-editor-tablebtn[b-ie32jjrzvz] {
    font-size: 0.76rem;
    padding: 2px 6px;
    min-height: 24px;
    gap: 4px;
}

/* ── Right-click table menu ──
   Opened by toolbar.js on a contextmenu inside a table; top/left are set in JS
   relative to the editor root (the offsetParent), same as the other popovers.
   Sits above the ⋯ overflow panel (20) and the toolbar flyouts (25). */
.html-editor-tablemenu[b-ie32jjrzvz] {
    position: absolute;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    /* Token rather than the literal the older popovers in this file use — it
       deepens in dark theme, where a light-theme shadow reads as nothing. */
    box-shadow: var(--shadow-lg);
}

.html-editor-tablemenu[hidden][b-ie32jjrzvz] {
    display: none;
}

/* Source mode hides the WYSIWYG surface, so nothing can be right-clicked. */
.html-editor.is-source-mode .html-editor-tablemenu[b-ie32jjrzvz] {
    display: none !important;
}

.html-editor-tablemenu__item[b-ie32jjrzvz] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 5px 10px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--text-primary);
    font-size: 0.8rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition);
}

.html-editor-tablemenu__item:hover:not(:disabled)[b-ie32jjrzvz],
.html-editor-tablemenu__item:focus-visible[b-ie32jjrzvz] {
    background: var(--bg-subsection);
}

.html-editor-tablemenu__item:disabled[b-ie32jjrzvz] {
    opacity: 0.45;
    cursor: default;
}

.html-editor-tablemenu__item--danger[b-ie32jjrzvz] {
    color: var(--dropdown-danger-color);
}

.html-editor-tablemenu__item--danger:hover:not(:disabled)[b-ie32jjrzvz],
.html-editor-tablemenu__item--danger:focus-visible[b-ie32jjrzvz] {
    background: var(--clr-critical-bg);
    color: var(--clr-critical-text);
}

.html-editor-tablemenu__sep[b-ie32jjrzvz] {
    height: 1px;
    margin: 4px 6px;
    background: var(--border);
}

.html-editor-surface[b-ie32jjrzvz] {
    padding: 10px 12px;
    min-height: 160px;
    max-height: 480px;
    overflow-y: auto;
    /* Always-white "paper" regardless of theme: author content (often
       Word-pasted with literal black text / fixed colors) stays readable
       without per-theme color juggling. Tokens defined once in app.css and
       identical in both themes. */
    background: var(--paper-bg);
    color: var(--paper-text);
    line-height: 1.5;
    outline: none;
    font-size: 0.95rem;
}

.html-editor-surface:focus-visible[b-ie32jjrzvz] {
    box-shadow: inset 0 0 0 2px var(--brand-primary);
}

.html-editor-surface[data-placeholder]:empty[b-ie32jjrzvz]::before {
    content: attr(data-placeholder);
    /* Paper-fixed muted gray — the themed tertiary token is light in dark
       mode and would vanish on the white surface. */
    color: var(--paper-muted);
    pointer-events: none;
}

/* All rules that target content INSIDE the editing surface must use ::deep:
   the surface's children are created at runtime (typing, JS insertion,
   innerHTML), so they never carry Blazor's CSS-isolation scope attribute.
   Without ::deep the compiled selector pins the attribute on the leaf
   element (e.g. `img[b-…]`) and the rule silently never matches. */
.html-editor-surface[b-ie32jjrzvz]  img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 6px 0;
    /* Grab cursor signals "drag me to reposition." Clicking still works for
       selection (via the JS handler), but the primary affordance now reads
       as drag-friendly. The edit pencil in the floating overlay is the way
       to open the alt/size dialog. */
    cursor: grab;
}

.html-editor-surface[b-ie32jjrzvz]  img:active {
    cursor: grabbing;
}

/* Placeholder while an image's bytes are still streaming in. A freshly
   inserted <img> is 0×0 until the download finishes — for a large file that
   reads as "the editor lost my image". The dashed frame, photo glyph, and
   shimmer hold the spot; html-editor.js removes the class on load/error and
   strips it from saved HTML. The glyph and shimmer use fixed neutral grays
   because SVG data URIs can't reference CSS custom properties; mid-gray
   reads correctly on both themes. */
.html-editor-surface[b-ie32jjrzvz]  img.se-img-loading {
    min-width: 160px;
    min-height: 96px;
    border: 1px dashed var(--border);
    background-color: var(--bg-subsection);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999999'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E"),
        linear-gradient(100deg, transparent 35%, rgba(153, 153, 153, 0.18) 50%, transparent 65%);
    background-repeat: no-repeat;
    background-position: center center, 200% 0;
    background-size: 28px 28px, 200% 100%;
    animation: se-img-shimmer-b-ie32jjrzvz 1.4s linear infinite;
}

@keyframes se-img-shimmer-b-ie32jjrzvz {
    from { background-position: center center, 200% 0; }
    to { background-position: center center, -200% 0; }
}

/* Explicit rules for inline formatting tags. Without these, contenteditable
   output can pick up the parent form-field's font-weight cascade and bolded
   spans render the same as surrounding text. Also normalizes execCommand's
   varying tag choice (<b> vs <strong>, <i> vs <em>). */
.html-editor-surface[b-ie32jjrzvz]  b,
.html-editor-surface[b-ie32jjrzvz]  strong {
    font-weight: 700;
}

.html-editor-surface[b-ie32jjrzvz]  i,
.html-editor-surface[b-ie32jjrzvz]  em {
    font-style: italic;
}

.html-editor-surface[b-ie32jjrzvz]  u {
    text-decoration: underline;
}

.html-editor-surface[b-ie32jjrzvz]  s,
.html-editor-surface[b-ie32jjrzvz]  strike {
    text-decoration: line-through;
}

.html-editor-surface[b-ie32jjrzvz]  a {
    color: var(--brand-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}

.html-editor-surface[b-ie32jjrzvz]  a:hover {
    filter: brightness(1.15);
}

.html-editor-surface[b-ie32jjrzvz]  p {
    margin: 0 0 8px;
}

.html-editor-surface[b-ie32jjrzvz]  ul,
.html-editor-surface[b-ie32jjrzvz]  ol {
    padding-left: 1.5rem;
    margin: 0 0 8px;
}

/* The app's global reset zeroes out list-style on every <ul>/<ol>. Reinstate
   the bullet/number marker explicitly inside the editor so authors see what
   they're producing. Nested markers cycle Word-style (these longer selectors
   out-specify the base rules below, and must — the base rules out-specify
   the equivalent .rich-content cycling in app.css). */
.html-editor-surface[b-ie32jjrzvz]  ul {
    list-style: disc outside;
}

.html-editor-surface[b-ie32jjrzvz]  ol {
    list-style: decimal outside;
}

.html-editor-surface[b-ie32jjrzvz]  ol ol { list-style-type: lower-alpha; }
.html-editor-surface[b-ie32jjrzvz]  ol ol ol { list-style-type: lower-roman; }
.html-editor-surface[b-ie32jjrzvz]  ol ol ol ol { list-style-type: decimal; }
.html-editor-surface[b-ie32jjrzvz]  ol ol ol ol ol { list-style-type: lower-alpha; }
.html-editor-surface[b-ie32jjrzvz]  ol ol ol ol ol ol { list-style-type: lower-roman; }

.html-editor-surface[b-ie32jjrzvz]  ul ul { list-style-type: circle; }
.html-editor-surface[b-ie32jjrzvz]  ul ul ul { list-style-type: square; }
.html-editor-surface[b-ie32jjrzvz]  ul ul ul ul { list-style-type: disc; }
.html-editor-surface[b-ie32jjrzvz]  ul ul ul ul ul { list-style-type: circle; }
.html-editor-surface[b-ie32jjrzvz]  ul ul ul ul ul ul { list-style-type: square; }

.html-editor-surface[b-ie32jjrzvz]  li {
    margin: 0 0 2px;
}

.html-editor.is-drag-over[b-ie32jjrzvz] {
    box-shadow: inset 0 0 0 2px var(--brand-primary);
}

/* Raw-HTML edit surface. Matches the WYSIWYG surface's box so the editor
   doesn't visibly jump when toggling modes — same min/max-height window
   and same padding. Monospace font signals "you're looking at code". */
.html-editor-source[b-ie32jjrzvz] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    min-height: 160px;
    max-height: 480px;
    border: 0;
    outline: 0;
    resize: vertical;
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* The hidden attribute's UA style is a plain (non-important) display: none,
   which any author display declaration overrides — so the display: block
   above would keep the textarea visible even while JS has it hidden.
   Re-assert hiding explicitly whenever the attribute is present. */
.html-editor-source[hidden][b-ie32jjrzvz] {
    display: none;
}

.html-editor-source:focus-visible[b-ie32jjrzvz] {
    box-shadow: inset 0 0 0 2px var(--brand-primary);
}

/* Wrapper around the source textarea: a thin bar (message + Copy) above the
   raw-HTML editor. Hidden until the <> button flips the surface to source. */
.html-editor-source-wrap[b-ie32jjrzvz] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.html-editor-source-wrap[hidden][b-ie32jjrzvz] {
    display: none;
}

.html-editor-source-bar[b-ie32jjrzvz] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-subsection);
}

.html-editor-source-bar__msg[b-ie32jjrzvz] {
    flex: 1;
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.html-editor-source-copy[b-ie32jjrzvz] {
    flex: 0 0 auto;
    font-size: 0.78rem;
    padding: 2px 10px;
    border: 1px solid var(--border);
}

/* In full screen the source editor grows to fill the viewport like the surface. */
.html-editor.is-fullscreen .html-editor-source-wrap[b-ie32jjrzvz] {
    flex: 1 1 auto;
}

/* While in source-mode the formatting / undo / image / link buttons are
   inert — they target the WYSIWYG surface which isn't the active editor.
   Dim them and disable pointer events so the user gets a clear signal that
   only the source toggle is live. The overflow ⋯ and full-screen buttons
   stay active too: the source toggle may be sitting INSIDE the overflow
   panel on narrow screens, and locking the ⋯ button would trap the user in
   source mode. */
.html-editor.is-source-mode .html-editor-btn:not(.html-editor-btn-source):not(.html-editor-overflow-btn):not(.html-editor-btn-fullscreen):not(.html-editor-source-copy)[b-ie32jjrzvz],
.html-editor.is-source-mode .html-editor-select[b-ie32jjrzvz] {
    opacity: 0.4;
    pointer-events: none;
}

/* ── Image selection overlay ──
   Floats over the selected image. The container itself is non-interactive
   (so the image underneath stays clickable / draggable for repositioning);
   only the edit button and the resize handle accept pointer events. JS
   positions it via inline top/left/width/height. */
.html-editor__image-overlay[b-ie32jjrzvz] {
    position: absolute;
    pointer-events: none;
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
    z-index: 3;
    box-sizing: border-box;
}

/* Pencil/edit affordance pinned to the top-right corner. Clicking opens
   the alt-text + size dialog. The slight outward offset puts the icon
   over the corner of the image instead of inside it. */
.html-editor__image-edit[b-ie32jjrzvz] {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--brand-primary);
    background: var(--bg-card);
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.html-editor__image-edit:hover[b-ie32jjrzvz],
.html-editor__image-edit:focus-visible[b-ie32jjrzvz] {
    background: var(--brand-primary);
    color: var(--brand-white);
    outline: none;
}

/* Crop affordance, stacked below the edit pencil on the same corner. JS sets
   hidden for GIFs (canvas cropping would flatten the animation). */
.html-editor__image-crop[b-ie32jjrzvz] {
    position: absolute;
    top: 20px;
    right: -10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--brand-primary);
    background: var(--bg-card);
    color: var(--brand-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.html-editor__image-crop:hover[b-ie32jjrzvz],
.html-editor__image-crop:focus-visible[b-ie32jjrzvz] {
    background: var(--brand-primary);
    color: var(--brand-white);
    outline: none;
}

/* Corner resize handle pinned to the bottom-right of the image. Dragging
   it resizes the image, aspect-locked, via the JS handlers. */
.html-editor__image-handle[b-ie32jjrzvz] {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 12px;
    height: 12px;
    background: var(--brand-primary);
    border: 1px solid var(--bg-card);
    border-radius: 2px;
    cursor: nwse-resize;
    pointer-events: auto;
}

/* In source mode the WYSIWYG surface is hidden — keep the overlay hidden
   regardless of whatever stale selection state JS may be tracking. */
.html-editor.is-source-mode .html-editor__image-overlay[b-ie32jjrzvz] {
    display: none !important;
}

/* ── Copy-link hover badge ──
   Small round chip floated at the top-right corner of the hovered link
   (same reveal-on-hover affordance as the global .chip-edit-btn). JS owns
   visibility (hidden attribute) and inline top/left positioning within the
   position:relative editor root. */
.html-editor__link-copy[b-ie32jjrzvz] {
    position: absolute;
    width: 20px;
    height: 20px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-tertiary);
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* The display rule above outranks the UA's [hidden] { display: none } —
   restate it, or the "hidden" badge stays visible at its last position. */
.html-editor__link-copy[hidden][b-ie32jjrzvz] {
    display: none;
}

.html-editor__link-copy:hover[b-ie32jjrzvz],
.html-editor__link-copy:focus-visible[b-ie32jjrzvz] {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    outline: none;
}

/* Copy → check swap while the "copied" state is active. */
.html-editor__link-copy[b-ie32jjrzvz]  .html-editor-icon-copied {
    display: none;
}

.html-editor__link-copy.is-copied[b-ie32jjrzvz] {
    color: var(--clr-success-icon);
    border-color: var(--clr-success-icon);
}

.html-editor__link-copy.is-copied[b-ie32jjrzvz]  .html-editor-icon-copy {
    display: none;
}

.html-editor__link-copy.is-copied[b-ie32jjrzvz]  .html-editor-icon-copied {
    display: inline;
}

.html-editor.is-source-mode .html-editor__link-copy[b-ie32jjrzvz] {
    display: none !important;
}

/* The editor container needs position: relative so the absolute overlay
   anchors to its bounds. */
.html-editor[b-ie32jjrzvz] {
    position: relative;
}

.html-editor__upload-overlay[b-ie32jjrzvz] {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.9rem;
    z-index: 5;
    /* Pointer events on so the user can't click into the surface during upload. */
    pointer-events: all;
}

.html-editor.is-uploading .html-editor__upload-overlay[b-ie32jjrzvz] {
    display: flex;
}

.html-editor__upload-label[b-ie32jjrzvz] {
    color: var(--text-secondary);
}

.html-editor__upload-progress[b-ie32jjrzvz] {
    width: 220px;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-subsection);
    overflow: hidden;
}

.html-editor__upload-progress[hidden][b-ie32jjrzvz] {
    display: none;
}

.html-editor__upload-progress-fill[b-ie32jjrzvz] {
    height: 100%;
    width: 0;
    background: var(--brand-primary);
    border-radius: 3px;
    transition: width 200ms ease;
}

.html-editor__statusbar[b-ie32jjrzvz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 4px 10px 6px;
    border-top: 1px solid var(--border);
    background: var(--bg-subsection);
    color: var(--text-tertiary);
    font-size: 0.72rem;
}

.html-editor__statusbar-right[b-ie32jjrzvz] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
}

.html-editor__presence[b-ie32jjrzvz] {
    color: var(--clr-warning-text);
    font-weight: 600;
}

.html-editor__a11y[b-ie32jjrzvz] {
    color: var(--clr-warning-text);
    cursor: help;
}

.html-editor__a11y[hidden][b-ie32jjrzvz] {
    display: none;
}

.html-editor__hint[b-ie32jjrzvz] {
    font-style: italic;
}

.html-editor__wordcount[b-ie32jjrzvz] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Visually-hidden native color pickers. Not display:none / hidden — some
   browsers refuse to open the picker for a fully-hidden input, so they're
   parked off to the side at zero size instead. */
/* Current-color bar beneath the text-color / highlight icons. */
.html-editor-btn--color[b-ie32jjrzvz] {
    position: relative;
}

.html-editor-colorbar[b-ie32jjrzvz] {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 3px;
    height: 3px;
    border-radius: 1px;
    background: transparent;
    pointer-events: none;
}

/* ── Color swatch popover ── */
/* Not positioned by CSS — anchored to the editor root in JS (top/left) so the
   toolbar's overflow:hidden doesn't clip it, same as the alignment flyout. */
.html-editor-colorpop[b-ie32jjrzvz] {
    position: absolute;
    z-index: 25;
    width: 232px;
    padding: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.html-editor-colorpop[hidden][b-ie32jjrzvz] {
    display: none;
}

/* The popover's contents (swatches, Automatic, Custom) are built in JS, so
   they don't carry the component's scoped-CSS attribute — ::deep opts these
   rules out of scoping so they actually match the dynamic children. */
.html-editor-colorpop[b-ie32jjrzvz]  .html-editor-colorpop__grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 3px;
    margin: 6px 0;
}

.html-editor-colorpop[b-ie32jjrzvz]  .html-editor-colorpop__swatch {
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
}

.html-editor-colorpop[b-ie32jjrzvz]  .html-editor-colorpop__swatch:hover,
.html-editor-colorpop[b-ie32jjrzvz]  .html-editor-colorpop__swatch:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

.html-editor-colorpop[b-ie32jjrzvz]  .html-editor-colorpop__auto,
.html-editor-colorpop[b-ie32jjrzvz]  .html-editor-colorpop__custom {
    display: block;
    width: 100%;
    text-align: left;
    padding: 5px 8px;
    background: transparent;
    color: var(--text-primary);
    border: 0;
    border-radius: 4px;
    font-size: 0.82rem;
    cursor: pointer;
}

.html-editor-colorpop[b-ie32jjrzvz]  .html-editor-colorpop__auto:hover,
.html-editor-colorpop[b-ie32jjrzvz]  .html-editor-colorpop__auto:focus-visible,
.html-editor-colorpop[b-ie32jjrzvz]  .html-editor-colorpop__custom:hover,
.html-editor-colorpop[b-ie32jjrzvz]  .html-editor-colorpop__custom:focus-visible {
    background: var(--bg-subsection);
    outline: none;
}

.html-editor-color-input[b-ie32jjrzvz] {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* The link / image prompts use the global .dialog-* classes (see app.css and
   StartModuleInstanceDialog for the convention) — no editor-scoped overrides
   needed. The image-size resize controls below are unique to this editor. */

[b-ie32jjrzvz] .img-size-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

[b-ie32jjrzvz] .img-size-input {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.4rem;
}

[b-ie32jjrzvz] .img-size-input__label {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

[b-ie32jjrzvz] .img-size-input__unit {
    font-size: 0.78rem;
    color: var(--text-tertiary);
}

[b-ie32jjrzvz] .img-size-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
}

[b-ie32jjrzvz] .img-size-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

/* ── Find & replace bar (Ctrl+F) ── */
.html-editor-findbar[b-ie32jjrzvz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-subsection);
}

.html-editor-findbar[hidden][b-ie32jjrzvz] {
    display: none;
}

.html-editor-findbar__find[b-ie32jjrzvz],
.html-editor-findbar__replace[b-ie32jjrzvz] {
    flex: 1 1 140px;
    min-width: 120px;
    max-width: 220px;
    min-height: 26px;
    padding: 2px 8px;
    font-size: 0.85rem;
}

.html-editor-findbar__count[b-ie32jjrzvz] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    min-width: 64px;
    text-align: center;
}

.html-editor-findbar__btn[b-ie32jjrzvz] {
    font-size: 0.78rem;
    padding: 2px 6px;
    min-height: 24px;
}

/* ── Draft recovery bar ── */
.html-editor-draftbar[b-ie32jjrzvz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--clr-warning-border);
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
    font-size: 0.82rem;
}

.html-editor-draftbar[hidden][b-ie32jjrzvz] {
    display: none;
}

/* ── Column / row resize bars ──
   Shown when the pointer hovers a cell's right / bottom edge; dragging
   resizes the column or row. Semi-transparent until hovered so they read
   as an affordance, not a wall. */
.html-editor__col-resizer[b-ie32jjrzvz],
.html-editor__row-resizer[b-ie32jjrzvz] {
    position: absolute;
    background: var(--brand-primary);
    opacity: 0.35;
    border-radius: 2px;
    z-index: 4;
}

.html-editor__col-resizer[b-ie32jjrzvz] {
    width: 5px;
    cursor: col-resize;
}

.html-editor__row-resizer[b-ie32jjrzvz] {
    height: 5px;
    cursor: row-resize;
}

.html-editor__col-resizer:hover[b-ie32jjrzvz],
.html-editor__row-resizer:hover[b-ie32jjrzvz] {
    opacity: 0.8;
}

.html-editor__col-resizer[hidden][b-ie32jjrzvz],
.html-editor__row-resizer[hidden][b-ie32jjrzvz] {
    display: none;
}

.html-editor.is-source-mode .html-editor__col-resizer[b-ie32jjrzvz],
.html-editor.is-source-mode .html-editor__row-resizer[b-ie32jjrzvz] {
    display: none !important;
}

/* ── Drop-position caret ──
   Shown while dragging an image (or an external file) over the surface;
   marks exactly where the content will land on release. */
.html-editor__drop-caret[b-ie32jjrzvz] {
    position: absolute;
    width: 2px;
    border-radius: 1px;
    background: var(--brand-primary);
    pointer-events: none;
    z-index: 4;
    animation: se-drop-caret-pulse-b-ie32jjrzvz 0.9s ease-in-out infinite;
}

.html-editor__drop-caret[hidden][b-ie32jjrzvz] {
    display: none;
}

@keyframes se-drop-caret-pulse-b-ie32jjrzvz {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* ── Table resize grip ── */
.html-editor__table-handle[b-ie32jjrzvz] {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--brand-primary);
    border: 1px solid var(--bg-card);
    border-radius: 2px;
    cursor: nwse-resize;
    z-index: 3;
}

.html-editor__table-handle[hidden][b-ie32jjrzvz] {
    display: none;
}

.html-editor.is-source-mode .html-editor__table-handle[b-ie32jjrzvz] {
    display: none !important;
}

/* ── Table / row / cell property dialogs ── */
[b-ie32jjrzvz] .prop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
}

[b-ie32jjrzvz] .prop-grid__check {
    align-self: end;
}

/* Fields whose hint text needs the full dialog width rather than one column. */
[b-ie32jjrzvz] .prop-grid__wide {
    grid-column: 1 / -1;
}

/* Border-sides checkbox group. <fieldset> for the grouping semantics, so the
   default fieldset chrome has to be reset back to a plain form field. */
[b-ie32jjrzvz] .prop-sides {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

[b-ie32jjrzvz] .prop-sides__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0.15rem 0 0.25rem;
}

[b-ie32jjrzvz] .prop-sides__row label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 400;
}

[b-ie32jjrzvz] .prop-color {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-ie32jjrzvz] .prop-color__swatch {
    width: 36px;
    height: 28px;
    padding: 1px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-card);
    cursor: pointer;
}

[b-ie32jjrzvz] .prop-color__value {
    flex: 1;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* ── Handbook link search (inside the link dialog) ── */
[b-ie32jjrzvz] .link-search-results {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    max-height: 220px;
    overflow-y: auto;
}

[b-ie32jjrzvz] .link-search-results__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    cursor: pointer;
    font-size: 0.85rem;
}

[b-ie32jjrzvz] .link-search-results li:last-child .link-search-results__item {
    border-bottom: 0;
}

[b-ie32jjrzvz] .link-search-results__item:hover,
[b-ie32jjrzvz] .link-search-results__item:focus-visible {
    background: var(--bg-subsection);
    outline: none;
}

[b-ie32jjrzvz] .link-search-results__status {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Keyboard shortcut help (Ctrl+/) ── */
[b-ie32jjrzvz] .shortcut-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
}

[b-ie32jjrzvz] .shortcut-list dt {
    white-space: nowrap;
}

[b-ie32jjrzvz] .shortcut-list dd {
    margin: 0;
    color: var(--text-secondary);
}

[b-ie32jjrzvz] .shortcut-list kbd {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--bg-subsection);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
}

/* ── Insert-table dialog ── */

[b-ie32jjrzvz] .table-size-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

[b-ie32jjrzvz] .table-header-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
}

/* ── Special character picker ── */

[b-ie32jjrzvz] .char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
    gap: 0.25rem;
}

[b-ie32jjrzvz] .char-grid__btn {
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 4px;
    min-height: 36px;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 80ms ease, border-color 80ms ease;
}

[b-ie32jjrzvz] .char-grid__btn:hover,
[b-ie32jjrzvz] .char-grid__btn:focus-visible {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-white);
    outline: none;
}

/* ── Collab editor additions (TipTap surface, remote carets, status) ──
   The rules above style the shared toolbar/surface/dialog chrome (used by both
   the collaborative and plain Collaborative="false" modes); some (source mode,
   resize handles) are inert because the corresponding markup doesn't exist.
   TipTap mounts .ProseMirror inside .html-editor-surface at runtime, so all
   surface-content rules need ::deep. */

/* The priority+ overflow (⋯ panel) is wired in toolbar.js, so the inherited
   single-row nowrap/hidden toolbar rules apply as-is. */

/* Find & replace match highlights (decorations from find.js). Paper-fixed
   colors — these sit on the always-white surface. */
.html-editor-surface[b-ie32jjrzvz]  .collab-find-match {
    background: var(--clr-warning-bg, #fef3c7);
    outline: 1px solid var(--clr-warning-text, #b45309);
}

.html-editor-surface[b-ie32jjrzvz]  .collab-find-match--active {
    background: var(--clr-warning-text, #f59e0b);
    color: var(--brand-white);
}

/* The surface keeps the inherited always-white "paper" treatment
   (--paper-bg / --paper-text, identical in both themes); padding moves to
   the runtime-created .ProseMirror so the caret/click target fills the box.
   Everything inside the paper must use --paper-* tokens, never theme-aware
   --text-* ones, or dark mode paints light text onto the white page. */
.html-editor-surface[b-ie32jjrzvz] {
    padding: 0;
}

.html-editor-surface[b-ie32jjrzvz]  .ProseMirror {
    min-height: 160px;
    padding: 10px 12px;
    outline: none;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* ── Page layout ──
   Google-Docs-style "sheet of paper on a desk": the scrollable surface
   becomes the theme-aware desk and the runtime .ProseMirror becomes the
   centered always-white paper. Content colors stay on the --paper-* tokens
   (inherited from the surface); only the desk around the sheet is themed.
   Composes with .is-fullscreen (surface flexes, paper stays capped inside)
   and with the comments rail (cap applies within the remaining flex width);
   at dialog widths the cap is a no-op and the gutter clamps down. */
.html-editor.is-page-layout .html-editor-surface[b-ie32jjrzvz] {
    background: var(--bg-page);
    padding: 1.25rem clamp(0.5rem, 4vw, 2rem);
}

.html-editor.is-page-layout .html-editor-surface[b-ie32jjrzvz]  .ProseMirror {
    max-width: 900px;
    margin: 0 auto;
    background: var(--paper-bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    padding: 2rem 2.5rem;
}

/* Landscape page: wider sheet, roughly the letter portrait→landscape ratio
   of the 900px portrait cap. For docs dominated by wide tables/diagrams. */
.html-editor.is-page-layout.is-page-landscape .html-editor-surface[b-ie32jjrzvz]  .ProseMirror {
    max-width: 1160px;
}

/* ── Narrow-container flatten ──
   When the editor is barely wider than the sheet, the paper-on-desk chrome
   only wastes space — drop the desk gutter, border, and shadow so page mode
   degrades to the flat editor. Container query rather than media query
   because the editor's width is host-driven (comments rail, dialogs,
   checklist columns), not viewport-driven. The subjects below are the
   surface / ProseMirror, whose query container is the .html-editor root. */
.html-editor[b-ie32jjrzvz] {
    container-type: inline-size;
}

@container (max-width: 960px) {
    .html-editor.is-page-layout:not(.is-page-landscape) .html-editor-surface[b-ie32jjrzvz] {
        background: var(--paper-bg);
        padding: 0;
    }

    .html-editor.is-page-layout:not(.is-page-landscape) .html-editor-surface[b-ie32jjrzvz]  .ProseMirror {
        max-width: none;
        margin: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 10px 12px;
    }
}

@container (max-width: 1220px) {
    .html-editor.is-page-layout.is-page-landscape .html-editor-surface[b-ie32jjrzvz] {
        background: var(--paper-bg);
        padding: 0;
    }

    .html-editor.is-page-layout.is-page-landscape .html-editor-surface[b-ie32jjrzvz]  .ProseMirror {
        max-width: none;
        margin: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 10px 12px;
    }
}

.html-editor-surface[b-ie32jjrzvz]  .ProseMirror table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    overflow: hidden;
}

.html-editor-surface[b-ie32jjrzvz]  .ProseMirror th,
.html-editor-surface[b-ie32jjrzvz]  .ProseMirror td {
    border: 1px solid var(--paper-border);
    padding: 0.35rem 0.5rem;
    vertical-align: top;
    position: relative;
}

.html-editor-surface[b-ie32jjrzvz]  .ProseMirror caption {
    caption-side: top;
    text-align: center;
    font-style: italic;
    color: var(--paper-muted);
    padding: 0.25rem;
}

/* TipTap's cell-selection overlay and column-resize affordances. */
.html-editor-surface[b-ie32jjrzvz]  .ProseMirror .selectedCell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--brand-primary);
    opacity: 0.12;
    pointer-events: none;
}

.html-editor-surface[b-ie32jjrzvz]  .ProseMirror .column-resize-handle {
    position: absolute;
    right: -2px;
    top: 0;
    bottom: -2px;
    width: 4px;
    background: var(--brand-primary);
    pointer-events: none;
}

.html-editor-surface[b-ie32jjrzvz]  .ProseMirror.resize-cursor {
    cursor: col-resize;
}

/* Remote collaborator carets (CollaborationCaret render in main.js). */
.html-editor-surface[b-ie32jjrzvz]  .collab-caret {
    position: relative;
    border-left: 2px solid var(--caret-color, var(--paper-muted));
    margin-left: -1px;
    margin-right: -1px;
    word-break: normal;
    pointer-events: none;
}

.html-editor-surface[b-ie32jjrzvz]  .collab-caret__label {
    position: absolute;
    top: -1.3em;
    left: -2px;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--brand-white);
    background: var(--caret-color, var(--paper-muted));
    padding: 0.05rem 0.35rem;
    border-radius: 3px 3px 3px 0;
    white-space: nowrap;
    user-select: none;
}

/* Collaborator caret colors use the shared --collab-c* identity tokens
   (defined in app.css), matching the presence chips in CollabPresenceBar. */
.html-editor-surface[b-ie32jjrzvz]  .collab-caret--c0 { --caret-color: var(--collab-c0); }
.html-editor-surface[b-ie32jjrzvz]  .collab-caret--c1 { --caret-color: var(--collab-c1); }
.html-editor-surface[b-ie32jjrzvz]  .collab-caret--c2 { --caret-color: var(--collab-c2); }
.html-editor-surface[b-ie32jjrzvz]  .collab-caret--c3 { --caret-color: var(--collab-c3); }
.html-editor-surface[b-ie32jjrzvz]  .collab-caret--c4 { --caret-color: var(--collab-c4); }
.html-editor-surface[b-ie32jjrzvz]  .collab-caret--c5 { --caret-color: var(--collab-c5); }

/* Connection / save status chips in the status bar. */
.collab-status[b-ie32jjrzvz] {
    font-size: 0.75rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--text-tertiary);
    color: var(--text-secondary);
    white-space: nowrap;
}

.collab-status--connected[b-ie32jjrzvz] {
    border-color: currentColor;
}

.collab-status--reconnecting[b-ie32jjrzvz],
.collab-status--disconnected[b-ie32jjrzvz],
.collab-status--ended[b-ie32jjrzvz],
.collab-status--rejected[b-ie32jjrzvz] {
    color: var(--clr-warning-text, var(--text-primary));
    border-color: currentColor;
}

.collab-savestate[b-ie32jjrzvz] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.collab-permission-notice[b-ie32jjrzvz] {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--clr-warning-text, var(--text-secondary));
}

/* Shown when the collab session can't recover in place (the indefinite
   reconnect gave up or the post-reconnect rejoin was rejected). A reload is
   the only path back to a live session. */
.collab-reload-banner[b-ie32jjrzvz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.4rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--clr-warning-border);
    border-radius: 6px;
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
    font-size: 0.85rem;
}

.collab-reload-banner__msg[b-ie32jjrzvz] {
    flex: 1 1 auto;
}

/* ── Review comments ── */

/* Wrapper that places the editor and the comments panel side by side. In the
   author page's full-height flex column this grows to fill; the editor takes
   the remaining width and the panel is a fixed rail. */
.collab-editor-layout[b-ie32jjrzvz] {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
}

.collab-editor-layout > .html-editor[b-ie32jjrzvz] {
    flex: 1 1 auto;
    min-width: 0;
}

.collab-comments[b-ie32jjrzvz] {
    flex: 0 0 320px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-left: 0;
    border-radius: 0 6px 6px 0;
    background: var(--bg-card);
    padding: 0.5rem 0.6rem 1rem;
}

.collab-comments__head[b-ie32jjrzvz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    position: sticky;
    top: 0;
    background: var(--bg-card);
    padding-bottom: 0.4rem;
}

.collab-comments__head-title[b-ie32jjrzvz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.collab-comments__head h3[b-ie32jjrzvz] {
    font-size: 0.95rem;
    margin: 0;
    color: var(--text-primary);
}

.collab-comments__nav[b-ie32jjrzvz] {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.collab-comments__empty[b-ie32jjrzvz] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.collab-comment-thread[b-ie32jjrzvz] {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
    background: var(--bg-page);
    cursor: pointer;
}

.collab-comment-thread.is-focused[b-ie32jjrzvz] {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 1px var(--brand-primary);
}

.collab-comment-thread.is-resolved[b-ie32jjrzvz] {
    opacity: 0.7;
}

.collab-comment-thread--new[b-ie32jjrzvz] {
    border-color: var(--brand-primary);
    cursor: default;
}

.collab-comment-thread__quote[b-ie32jjrzvz] {
    margin: 0 0 0.4rem;
    padding: 0.15rem 0.5rem;
    border-left: 3px solid var(--clr-warning-text, #f59e0b);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-style: italic;
}

.collab-comment[b-ie32jjrzvz] {
    margin-bottom: 0.4rem;
}

.collab-comment__meta[b-ie32jjrzvz] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.collab-comment__meta strong[b-ie32jjrzvz] {
    color: var(--text-primary);
}

.collab-comment__body[b-ie32jjrzvz] {
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: pre-wrap;
}

.collab-comment-thread__resolved[b-ie32jjrzvz] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin: 0.25rem 0 0;
}

/* General (unanchored) comment: attached to the whole document, no quote. */
.collab-comment-thread__general[b-ie32jjrzvz] {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-tertiary);
    margin-bottom: 0.35rem;
}

.collab-comments__add-general[b-ie32jjrzvz] {
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

/* Orphaned thread: its highlighted text was edited/removed, so it can't be
   jumped to. Flagged so the reader knows why clicking does nothing. */
.collab-comment-thread.is-orphaned[b-ie32jjrzvz] {
    border-style: dashed;
}

.collab-comment-thread__orphan[b-ie32jjrzvz] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--clr-warning-text, #b45309);
    margin: 0 0 0.35rem;
}

.collab-comment-composer[b-ie32jjrzvz] {
    width: 100%;
    font-size: 0.85rem;
    resize: vertical;
    margin-top: 0.35rem;
}

.collab-comment-actions[b-ie32jjrzvz] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

/* Status-bar toggle showing the open-comment count. */
.collab-comments-toggle[b-ie32jjrzvz] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    font-size: 0.75rem;
    cursor: pointer;
}

.collab-comments-toggle.is-active[b-ie32jjrzvz] {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* The comment highlight in the editor. JS-created span inside .ProseMirror, so
   ::deep; paper tokens since it sits on the always-white surface. */
.html-editor-surface[b-ie32jjrzvz]  .comment-highlight {
    background: var(--paper-comment-bg, #fff3bf);
    border-bottom: 2px solid var(--clr-warning-text, #f59e0b);
    cursor: pointer;
}

/* Resolved threads keep their anchor (so re-opening restores the highlight) but
   show NO highlight — the underline/background would otherwise linger on
   already-handled text. */
.html-editor-surface[b-ie32jjrzvz]  .comment-highlight[data-resolved="true"] {
    background: transparent;
    border-bottom: none;
    cursor: default;
}

/* Jump-to-comment feedback: a brief, unmistakable pulse so clicking a thread is
   visibly located even on a heading (bold text hid the old subtle tint) and even
   when the anchor is already on-screen and nothing scrolls. */
.html-editor-surface[b-ie32jjrzvz]  .comment-highlight--flash {
    animation: se-comment-flash-b-ie32jjrzvz 1.4s ease-out;
    border-radius: 2px;
}

@keyframes se-comment-flash-b-ie32jjrzvz {
    0%,
    70% {
        background-color: var(--paper-comment-flash-strong, #ffa94d);
        outline: 2px solid var(--paper-comment-flash-strong, #ffa94d);
    }

    100% {
        background-color: var(--paper-comment-bg, #fff3bf);
        outline: 2px solid transparent;
    }
}
/* /Components/Layout/Shared/ComplianceBadge.razor.rz.scp.css */
.cb-badge[b-3fzy3fp4iq] {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.4;
}

.cb-badge--ontrack[b-3fzy3fp4iq] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

.cb-badge--close[b-3fzy3fp4iq] {
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
}

.cb-badge--below[b-3fzy3fp4iq] {
    background: var(--clr-critical-bg);
    color: var(--clr-critical-text);
}

.cb-badge--missing[b-3fzy3fp4iq] {
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
}

.cb-badge--excused[b-3fzy3fp4iq] {
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
}
/* /Components/Layout/Shared/DayEventsDialog.razor.rz.scp.css */
/* Layout only — .dialog-backdrop / .dialog-panel / .dialog__header / .dialog__body are global
   (app.css) and must not be redefined here. */

.dayev[b-2wrujymdg5] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* The <li> owns the separator; the inner element owns the grid and padding so a clickable row's
   hit area covers the whole strip (Clickable List Row pattern). */
.dayev__row[b-2wrujymdg5] {
    border-top: 1px solid var(--border-default, rgba(128, 128, 128, 0.08));
}

.dayev__row:first-of-type[b-2wrujymdg5] {
    border-top: none;
}

.dayev__row-inner[b-2wrujymdg5] {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.25rem;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.3;
}

/* Button reset — a clickable row must look identical to its non-clickable sibling until hovered. */
.dayev__row-inner--clickable[b-2wrujymdg5] {
    background: none;
    border: 0;
    margin: 0;
    font: inherit;
    font-size: 0.875rem;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 0.25rem;
}

.dayev__row-inner--clickable:hover[b-2wrujymdg5] {
    background: var(--bg-inset);
}

.dayev__row-inner--clickable:focus-visible[b-2wrujymdg5] {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

.dayev__icon[b-2wrujymdg5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Same per-kind color tokens every other event surface uses. */
.dayev__icon--birthday[b-2wrujymdg5] {
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
}

.dayev__icon--anniversary[b-2wrujymdg5] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

.dayev__icon--holiday[b-2wrujymdg5] {
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
}

.dayev__icon--sprint[b-2wrujymdg5] {
    background: var(--clr-needs-review-bg);
    color: var(--clr-needs-review-text);
}

.dayev__icon--activity[b-2wrujymdg5] {
    background: var(--clr-activity-bg);
    color: var(--clr-activity-text);
}

.dayev__icon--training[b-2wrujymdg5],
.dayev__icon--default[b-2wrujymdg5] {
    background: var(--clr-ignored-bg);
    color: var(--clr-ignored-text);
}

.dayev__text[b-2wrujymdg5] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.dayev__title[b-2wrujymdg5] {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dayev__subtitle[b-2wrujymdg5] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.dayev__desc-icon[b-2wrujymdg5] {
    margin-left: 0.3rem;
    color: var(--text-tertiary);
    vertical-align: middle;
}

.dayev__when[b-2wrujymdg5] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}

.dayev__private-pill[b-2wrujymdg5] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.4rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    white-space: nowrap;
}
/* /Components/Layout/Shared/DeveloperCapacityCard.razor.rz.scp.css */
/* Reuses the global cpo-* (Capacity Overview) and oo-cap* classes in app.css. Intentionally empty. */
/* /Components/Layout/Shared/ErrorContent.razor.rz.scp.css */
/* Scoped styles for ErrorContent */
/* /Components/Layout/Shared/EventDetailDialog.razor.rz.scp.css */
/* Layout only — .dialog-backdrop / .dialog-panel / .dialog__header / .dialog__body are global
   (app.css) and must not be redefined here. */

/* Groups the optional back button with the title so the header's space-between still pushes the
   close button to the far right. */
.event-detail__heading[b-blquh2120t] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.event-detail__kind[b-blquh2120t] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.event-detail__kind-icon[b-blquh2120t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Same per-kind color tokens the agenda rows and dashboard card use, so a kind reads the
   same everywhere. */
.event-detail__kind-icon--birthday[b-blquh2120t] {
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
}

.event-detail__kind-icon--anniversary[b-blquh2120t] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

.event-detail__kind-icon--holiday[b-blquh2120t] {
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
}

.event-detail__kind-icon--sprint[b-blquh2120t] {
    background: var(--clr-needs-review-bg);
    color: var(--clr-needs-review-text);
}

.event-detail__kind-icon--activity[b-blquh2120t] {
    background: var(--clr-activity-bg);
    color: var(--clr-activity-text);
}

.event-detail__kind-icon--training[b-blquh2120t],
.event-detail__kind-icon--default[b-blquh2120t] {
    background: var(--clr-ignored-bg);
    color: var(--clr-ignored-text);
}

.event-detail__kind-label[b-blquh2120t] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.event-detail__pill[b-blquh2120t] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--border-radius-sm);
    background: var(--clr-ignored-bg);
    color: var(--clr-ignored-text);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.event-detail__pill--private[b-blquh2120t] {
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
}

.event-detail__facts[b-blquh2120t] {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 0.35rem 0.75rem;
    margin: 0;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.event-detail__facts dt[b-blquh2120t] {
    margin: 0;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 0.1rem;
}

.event-detail__facts dd[b-blquh2120t] {
    margin: 0;
    color: var(--text-primary);
    min-width: 0;
}

.event-detail__time[b-blquh2120t] {
    display: block;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.event-detail__person-icon[b-blquh2120t] {
    color: var(--text-tertiary);
    vertical-align: middle;
    margin-right: 0.2rem;
}

.event-detail__section[b-blquh2120t] {
    margin-top: 0.85rem;
}

.event-detail__section-title[b-blquh2120t] {
    margin: 0 0 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* pre-wrap: Description is plain text, so the only structure it has is the line breaks the
   admin typed. wrap-anywhere keeps a pasted URL from widening the panel. */
.event-detail__description[b-blquh2120t] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.event-detail__no-description[b-blquh2120t] {
    margin: 0.85rem 0 0;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    font-style: italic;
}

.event-detail__actions[b-blquh2120t] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}
/* /Components/Layout/Shared/FeedbackDialog.razor.rz.scp.css */
/* A touch wider than the shared --md (560px) so the intro line doesn't orphan a single word. */
.dialog-panel--md[b-ymn1lipvkm] {
    width: 640px;
}

.fb-intro[b-ymn1lipvkm] {
    margin: 0 0 0.85rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.form-field[b-ymn1lipvkm] {
    margin-bottom: 0.85rem;
}

.fb-success[b-ymn1lipvkm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    text-align: center;
}

.fb-success__icon[b-ymn1lipvkm] {
    color: var(--brand-primary);
}

.fb-success__message[b-ymn1lipvkm] {
    margin: 0;
    color: var(--text-primary);
    font-weight: 600;
}

/* Sticky footer: pin the actions to the panel's bottom edge and let the body scroll under
   them. Negative margins cancel the body padding so the bar spans the full panel width. */
.feedback-dialog__actions[b-ymn1lipvkm] {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 0.5rem -1.25rem -1.25rem;
    padding: 0.75rem 1.25rem;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
}

.feedback-dialog__actions-right[b-ymn1lipvkm] {
    display: flex;
    gap: 0.5rem;
}
/* /Components/Layout/Shared/FeedbackMenuButton.razor.rz.scp.css */
/* The dropdown items are normally <a> tags; this one is a <button> so it can open the dialog
   without navigating. The global `button` reset (app.css) already clears the native border,
   background, font, and cursor at low specificity, so the shared `.dropdown-item` hover/danger
   colors still win — we only need to stretch it to fill the row so the highlight spans edge-to-edge. */
.dropdown-item[b-qml2puve6d] {
    width: 100%;
}
/* /Components/Layout/Shared/FeedbackResponseDialog.razor.rz.scp.css */
.frd-original[b-4d9b08kfdm] {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.frd-original__meta[b-4d9b08kfdm] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-bottom: 0.25rem;
}

.frd-original__message[b-4d9b08kfdm] {
    margin: 0;
    color: var(--text-primary);
    white-space: pre-wrap;
    font-size: 0.9rem;
    border-left: 3px solid var(--border-color);
    padding-left: 0.75rem;
}

.frd-prior-note[b-4d9b08kfdm] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin: 0 0 0.75rem 0;
}

.frd-no-email[b-4d9b08kfdm] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin: 0.5rem 0 0 0;
    font-style: italic;
}

.frd-label[b-4d9b08kfdm] {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 500;
    font-size: 0.875rem;
}

.frd-actions[b-4d9b08kfdm] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
/* /Components/Layout/Shared/FrequencyBadge.razor.rz.scp.css */
.freq-badge[b-2qqvcvtghp] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.4;
    border: none;
}

.freq-badge--interactive[b-2qqvcvtghp] {
    cursor: pointer;
    transition: filter 0.15s ease;
}

.freq-badge--interactive:hover[b-2qqvcvtghp] {
    filter: brightness(0.92);
}

.freq-badge__chevron[b-2qqvcvtghp] {
    font-size: 0.5rem;
    margin-left: 0.125rem;
    opacity: 0.7;
}

.freq-badge--sm[b-2qqvcvtghp] {
    font-size: 0.625rem;
    padding: 0.0625rem 0.375rem;
}

.freq-badge--never[b-2qqvcvtghp] {
    background: var(--bg-page);
    color: var(--text-tertiary);
    border: 1px solid var(--text-tertiary);
}

.freq-badge--hardly-ever[b-2qqvcvtghp] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
    border: 1px solid var(--clr-success-text);
}

.freq-badge--sometimes[b-2qqvcvtghp] {
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
    border: 1px solid var(--clr-info-text);
}

.freq-badge--often[b-2qqvcvtghp] {
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
    border: 1px solid var(--clr-warning-text);
}

.freq-badge--very-often[b-2qqvcvtghp] {
    background: var(--clr-critical-bg);
    color: var(--clr-critical-text);
    border: 1px solid var(--clr-critical-text);
}

/* ── Dropdown ── */
.freq-dropdown[b-2qqvcvtghp] {
    position: relative;
    display: inline-block;
    overflow: visible;
}

.freq-dropdown__backdrop[b-2qqvcvtghp] {
    position: fixed;
    inset: 0;
    z-index: 9990;
}

.freq-dropdown__menu[b-2qqvcvtghp] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9991;
    margin-top: 0.25rem;
    padding: 0.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    list-style: none;
    min-width: 120px;
}

.freq-dropdown__item[b-2qqvcvtghp] {
    display: block;
    width: 100%;
    padding: 0.25rem 0.375rem;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
    transition: background 0.15s ease;
}

.freq-dropdown__item:hover[b-2qqvcvtghp] {
    background: var(--bg-inset);
}
/* /Components/Layout/Shared/Icon.razor.rz.scp.css */
/* Scoped styles for Icon */
/* /Components/Layout/Shared/LabelDeleteConfirmDialog.razor.rz.scp.css */
.ldcd-target[b-dqdahhhc5e] {
    margin-top: 0.375rem;
}
/* /Components/Layout/Shared/LabelEditDialog.razor.rz.scp.css */
.led-color-row[b-pytibdjs4v] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.led-color-row .form-field[b-pytibdjs4v] {
    flex: 1 1 180px;
    min-width: 0;
}

.color-field[b-pytibdjs4v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.color-field input[type="color"][b-pytibdjs4v] {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.125rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    background: transparent;
    flex-shrink: 0;
}

.color-field .form-control[b-pytibdjs4v] {
    min-width: 0;
    flex: 1 1 auto;
}

.led-preview[b-pytibdjs4v] {
    display: flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.5rem;
    background: var(--bg-inset);
    border: 1px dashed var(--border-default, rgba(128, 128, 128, 0.2));
    border-radius: 6px;
}

.led-actions[b-pytibdjs4v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.led-actions__primary[b-pytibdjs4v] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.led-actions__delete[b-pytibdjs4v] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.led-delete-blocked[b-pytibdjs4v] {
    color: var(--text-tertiary);
    font-style: italic;
    flex: 1 1 12rem;
    margin: 0;
}
/* /Components/Layout/Shared/LifecyclePhaseBadge.razor.rz.scp.css */
.phase-badge--interactive[b-lisi8cw4hu] {
    cursor: pointer;
    border: none;
    transition: filter 0.15s ease;
}

.phase-badge--interactive:hover[b-lisi8cw4hu] {
    filter: brightness(0.92);
}

.phase-badge__chevron[b-lisi8cw4hu] {
    font-size: 0.5rem;
    margin-left: 0.125rem;
    opacity: 0.7;
}

.phase-badge--busy[b-lisi8cw4hu] {
    cursor: progress;
    opacity: 0.75;
}

.phase-badge--busy:hover[b-lisi8cw4hu] {
    filter: none;
}

.phase-badge__spinner[b-lisi8cw4hu] {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.25rem;
    border: 1.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: phase-badge-spin-b-lisi8cw4hu 0.7s linear infinite;
    vertical-align: -1px;
}

@keyframes phase-badge-spin-b-lisi8cw4hu {
    to { transform: rotate(360deg); }
}

/* ── Dropdown ── */
.lp-dropdown[b-lisi8cw4hu] {
    position: relative;
    display: inline-block;
    overflow: visible;
}

.lp-dropdown__backdrop[b-lisi8cw4hu] {
    position: fixed;
    inset: 0;
    z-index: 9990;
}

.lp-dropdown__menu[b-lisi8cw4hu] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 9991;
    margin-top: 0.25rem;
    padding: 0.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    list-style: none;
    min-width: 160px;
}

.lp-dropdown__item[b-lisi8cw4hu] {
    display: block;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
    font-size: 0.8125rem;
    color: var(--text-primary);
    transition: background 0.15s ease;
}

.lp-dropdown__item:hover[b-lisi8cw4hu] {
    background: var(--bg-inset);
}
/* /Components/Layout/Shared/Login.razor.rz.scp.css */
/* Mirrors NotFound.razor.css / Unauthorized.razor.css so the sign-in interstitial reads as
   the same friendly card — the only difference is the fixed overlay, because an anonymous
   visitor should never see app chrome behind it. */

/* ── Overlay ──────────────────────────────────────────────── */
.login-overlay[b-pmb9grdezo] {
    position: fixed;
    inset: 0;
    background: var(--bg-page);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    z-index: 9999;
}

/* ── Page wrapper ─────────────────────────────────────────── */
#login-message[b-pmb9grdezo] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 3rem;
    width: 100%;
    max-width: 680px;
    margin: 6rem auto;
    padding: 3rem 3.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
}

/* ── Logo cell ────────────────────────────────────────────── */
#login-grid-cell-1[b-pmb9grdezo] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 2.5rem;
    border-right: 1px solid var(--border-color);
}

/* The <Icon> svg is a child component, so scoped CSS can't target it directly —
   set the color here and let fill="currentColor" inherit into the sprite. */
.logo[b-pmb9grdezo] {
    color: var(--text-primary);
    transition: opacity var(--transition);
}

    .logo:hover[b-pmb9grdezo] {
        opacity: 0.75;
    }

/* ── Content cell ─────────────────────────────────────────── */
#login-grid-cell-2 h1[b-pmb9grdezo] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

#login-grid-cell-2 > p[b-pmb9grdezo] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

/* ── Redirect status ──────────────────────────────────────── */
.login-status[b-pmb9grdezo] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

.login-spinner[b-pmb9grdezo] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: loginSpin-b-pmb9grdezo 1s linear infinite;
}

@keyframes loginSpin-b-pmb9grdezo {
    to { transform: rotate(360deg); }
}

/* ── Actions ──────────────────────────────────────────────── */
.login-actions[b-pmb9grdezo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 560px) {
    #login-message[b-pmb9grdezo] {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
        margin: 3rem 1rem;
        padding: 2rem 1.5rem;
    }

    #login-grid-cell-1[b-pmb9grdezo] {
        padding-right: 0;
        padding-bottom: 1.5rem;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .login-status[b-pmb9grdezo] {
        justify-content: center;
    }

    .login-actions[b-pmb9grdezo] {
        justify-content: center;
    }
}
/* /Components/Layout/Shared/NotFound.razor.rz.scp.css */
/* ── Page wrapper ─────────────────────────────────────────── */
#error404-message[b-xmyx3e4qnp] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 3rem;
    max-width: 680px;
    margin: 6rem auto;
    padding: 3rem 3.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
}

/* ── Logo cell ────────────────────────────────────────────── */
#error404-grid-cell-1[b-xmyx3e4qnp] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 2.5rem;
    border-right: 1px solid var(--border-color);
}

.logo[b-xmyx3e4qnp] {
    color: var(--text-primary);
    transition: opacity var(--transition);
}

    .logo:hover[b-xmyx3e4qnp] {
        opacity: 0.75;
    }

/* ── Content cell ─────────────────────────────────────────── */
#error404-grid-cell-2 h1[b-xmyx3e4qnp] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

#error404-grid-cell-2 > p[b-xmyx3e4qnp] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

#error404-grid-cell-2 div > p[b-xmyx3e4qnp] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
}

#error404-grid-cell-2 ul[b-xmyx3e4qnp] {
    list-style: disc;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

    #error404-grid-cell-2 ul li[b-xmyx3e4qnp] {
        font-size: 0.875rem;
        color: var(--text-secondary);
    }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 560px) {
    #error404-message[b-xmyx3e4qnp] {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
        margin: 3rem 1rem;
        padding: 2rem 1.5rem;
    }

    #error404-grid-cell-1[b-xmyx3e4qnp] {
        padding-right: 0;
        padding-bottom: 1.5rem;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    #error404-grid-cell-2 ul[b-xmyx3e4qnp] {
        display: inline-flex;
        text-align: left;
    }
}
/* /Components/Layout/Shared/PriorityBadge.razor.rz.scp.css */
.pri-badge[b-fm9fkste0h] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    line-height: 1.4;
    border: none;
}

.pri-badge--interactive[b-fm9fkste0h] {
    cursor: pointer;
    transition: filter 0.15s ease;
}

.pri-badge--interactive:hover[b-fm9fkste0h] {
    filter: brightness(0.92);
}

.pri-badge__chevron[b-fm9fkste0h] {
    font-size: 0.5rem;
    margin-left: 0.125rem;
    opacity: 0.7;
}

.pri-badge--sm[b-fm9fkste0h] {
    font-size: 0.625rem;
    padding: 0.0625rem 0.375rem;
}

.pri-badge--low[b-fm9fkste0h] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
    border: 1px solid var(--clr-success-text);
}

.pri-badge--medium[b-fm9fkste0h] {
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
    border: 1px solid var(--clr-info-text);
}

.pri-badge--high[b-fm9fkste0h] {
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
    border: 1px solid var(--clr-warning-text);
}

.pri-badge--urgent[b-fm9fkste0h] {
    background: var(--clr-critical-bg);
    color: var(--clr-critical-text);
    border: 1px solid var(--clr-critical-text);
}

/* ── Dropdown ── */
.pri-dropdown[b-fm9fkste0h] {
    position: relative;
    display: inline-block;
    overflow: visible;
}

.pri-dropdown__backdrop[b-fm9fkste0h] {
    position: fixed;
    inset: 0;
    z-index: 9990;
}

.pri-dropdown__menu[b-fm9fkste0h] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9991;
    margin-top: 0.25rem;
    padding: 0.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    list-style: none;
    min-width: 100px;
}

.pri-dropdown__item[b-fm9fkste0h] {
    display: block;
    width: 100%;
    padding: 0.25rem 0.375rem;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
    transition: background 0.15s ease;
}

.pri-dropdown__item:hover[b-fm9fkste0h] {
    background: var(--bg-inset);
}
/* /Components/Layout/Shared/QuizRunner.razor.rz.scp.css */
/* Quiz runner. Colours come from the shared status tokens so a pass reads like a met
   requirement and a fail like a pending one, in both themes. */

.qr[b-abs4v4ui0v] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.qr__intro[b-abs4v4ui0v] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.qr__status[b-abs4v4ui0v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--clr-warning-border);
    border-radius: var(--border-radius-sm);
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
    font-size: 0.9rem;
}

.qr__status--passed[b-abs4v4ui0v] {
    border-color: var(--clr-success-border);
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

/* ── Questions ───────────────────────────────────────────────────────── */

.qr__progress[b-abs4v4ui0v] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* Progress label and the question map share a row; the map wraps under the label when narrow. */
.qr__progress-row[b-abs4v4ui0v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
}

/* One dot per question so a learner who skipped ahead can see what's still open and jump to
   it. Answered dots take the success tint the review uses for a met question; the one on
   screen is ringed in brand. Tokens throughout, so both states survive a theme swap. */
.qr__map[b-abs4v4ui0v] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.qr__dot[b-abs4v4ui0v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-tertiary);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.qr__dot:hover[b-abs4v4ui0v] {
    border-color: var(--brand-primary);
    color: var(--text-primary);
}

.qr__dot:focus-visible[b-abs4v4ui0v] {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.qr__dot.is-answered[b-abs4v4ui0v] {
    border-color: var(--clr-success-border);
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

.qr__dot.is-current[b-abs4v4ui0v] {
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--brand-primary);
}

/* The question on screen — one at a time; Back/Next step through them. */
.qr__question[b-abs4v4ui0v] {
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color);
    border-left-width: 4px;
    border-radius: var(--border-radius-sm);
    background: var(--bg-card);
}

/* Right/wrong is carried by the left edge and the mark, so a marked list still reads
   correctly to someone who can't tell the two tints apart. */
.qr__question--correct[b-abs4v4ui0v] {
    border-left-color: var(--clr-success-border);
}

.qr__question--wrong[b-abs4v4ui0v] {
    border-left-color: var(--clr-warning-border);
}

/* ── Review (after a graded attempt) ──────────────────────────────────── */

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

.qr__review .qr__question[b-abs4v4ui0v] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.qr__fieldset[b-abs4v4ui0v] {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.qr__legend[b-abs4v4ui0v] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0;
    margin: 0 0 0.6rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.qr__number[b-abs4v4ui0v] {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.qr__text[b-abs4v4ui0v] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.qr__text code[b-abs4v4ui0v],
.qr__option-text code[b-abs4v4ui0v] {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
    font-size: 0.9em;
    padding: 0 0.3em;
    border-radius: var(--border-radius-sm);
    background: var(--bg-subsection);
}

.qr__mark[b-abs4v4ui0v] {
    flex-shrink: 0;
    font-weight: 700;
}

.qr__question--correct .qr__mark[b-abs4v4ui0v] {
    color: var(--clr-success-text);
}

.qr__question--wrong .qr__mark[b-abs4v4ui0v] {
    color: var(--clr-warning-text);
}

.qr__mark--recorded[b-abs4v4ui0v] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.qr__hint[b-abs4v4ui0v] {
    margin: -0.3rem 0 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ── Free text ───────────────────────────────────────────────────────── */

/* Grows with its content up to a cap, then scrolls — same recipe as .ci-editor__textarea in
   the check-in editor. rows="2" in the markup is the floor; field-sizing does the rest. */
.qr__free-input[b-abs4v4ui0v] {
    max-width: 32rem;
    resize: none;
    min-height: 2.5rem;
    max-height: 12rem;
    field-sizing: content;
    overflow-y: auto;
}

/* ── Options ─────────────────────────────────────────────────────────── */

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

.qr__option[b-abs4v4ui0v] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-subsection);
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.qr__option:hover[b-abs4v4ui0v] {
    border-color: var(--brand-primary);
}

.qr__option.is-selected[b-abs4v4ui0v] {
    border-color: var(--brand-primary);
}

.qr__option input[b-abs4v4ui0v] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.qr__fieldset:disabled .qr__option[b-abs4v4ui0v] {
    cursor: default;
}

.qr__fieldset:disabled .qr__option:hover[b-abs4v4ui0v] {
    border-color: var(--border-color);
}

.qr__fieldset:disabled .qr__option.is-selected[b-abs4v4ui0v] {
    border-color: var(--brand-primary);
}

.qr__option-text[b-abs4v4ui0v] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── Actions ─────────────────────────────────────────────────────────── */

.qr__actions[b-abs4v4ui0v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Submit's "Unanswered: 2, 5" — each number is a link in running text, not a button. */
.qr__jump[b-abs4v4ui0v] {
    font-weight: 600;
}

/* ── Projected ───────────────────────────────────────────────────────── */

.qr--projected .qr__legend[b-abs4v4ui0v] {
    font-size: clamp(1.1rem, 1.8vw, 1.8rem);
}

.qr--projected .qr__option[b-abs4v4ui0v] {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    padding: 0.75rem 1rem;
}

.qr--projected .qr__question[b-abs4v4ui0v] {
    padding: 1.25rem 1.5rem;
}

.qr--projected .qr__progress[b-abs4v4ui0v] {
    font-size: clamp(0.85rem, 1.2vw, 1.1rem);
}
/* /Components/Layout/Shared/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-7g867mat6x],
.components-reconnect-repeated-attempt-visible[b-7g867mat6x],
.components-reconnect-failed-visible[b-7g867mat6x],
.components-pause-visible[b-7g867mat6x],
.components-resume-failed-visible[b-7g867mat6x],
.components-rejoining-animation[b-7g867mat6x] {
    display: none;
}

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


#components-reconnect-modal[b-7g867mat6x] {
    background-color: var(--brand-white);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-7g867mat6x 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-7g867mat6x] {
    border: 0;
    background-color: var(--reconnect-btn-bg);
    color: var(--brand-white);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-7g867mat6x] {
        background-color: var(--reconnect-btn-bg-hover);
    }

    #components-reconnect-modal button:active[b-7g867mat6x] {
        background-color: var(--reconnect-btn-bg);
    }

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

    .components-rejoining-animation div[b-7g867mat6x] {
        position: absolute;
        border: 3px solid var(--reconnect-ring-color);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-7g867mat6x 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

@keyframes components-rejoining-animation-b-7g867mat6x {
    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;
    }
}

/* Stale-page prompt — always-white "system" surface like the reconnect modal
   above (it can appear over a dead circuit, so it stays theme-independent). */
#stale-page-modal[b-7g867mat6x] {
    background-color: var(--brand-white);
    color: var(--brand-black);
    width: 22rem;
    max-width: calc(100vw - 2rem);
    margin: 20vh auto;
    padding: 1.75rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
}

#stale-page-modal[b-7g867mat6x]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}

.stale-page[b-7g867mat6x] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
}

.stale-page__title[b-7g867mat6x] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.stale-page__msg[b-7g867mat6x] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.stale-page__actions[b-7g867mat6x] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.stale-page__reload[b-7g867mat6x],
.stale-page__dismiss[b-7g867mat6x] {
    border: 0;
    padding: 6px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

.stale-page__reload[b-7g867mat6x] {
    background-color: var(--reconnect-btn-bg);
    color: var(--brand-white);
}

.stale-page__reload:hover[b-7g867mat6x] {
    background-color: var(--reconnect-btn-bg-hover);
}

.stale-page__dismiss[b-7g867mat6x] {
    background-color: transparent;
    color: var(--brand-black);
    text-decoration: underline;
}
/* /Components/Layout/Shared/SolutionDeleteConfirmDialog.razor.rz.scp.css */
.sdcd-lead[b-7ei3g2mbkv] {
    margin: 0 0 0.75rem;
}

/* A solution can carry a lot of work across several developers — keep the panel on screen. */
.sdcd-owners[b-7ei3g2mbkv] {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.sdcd-owner[b-7ei3g2mbkv] {
    padding: 0.5rem 0.75rem;
}

.sdcd-owner + .sdcd-owner[b-7ei3g2mbkv] {
    border-top: 1px solid var(--border-color);
}

.sdcd-owner__name[b-7ei3g2mbkv] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sdcd-owner__count[b-7ei3g2mbkv] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-tertiary);
}

.sdcd-items[b-7ei3g2mbkv] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.sdcd-item[b-7ei3g2mbkv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sdcd-item__title[b-7ei3g2mbkv] {
    font-size: 0.875rem;
    color: var(--text-primary);
}

.sdcd-item__meta[b-7ei3g2mbkv] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.sdcd-warning[b-7ei3g2mbkv] {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--clr-warning-border);
    border-radius: 6px;
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
    font-size: 0.8125rem;
}
/* /Components/Layout/Shared/Tabs.razor.rz.scp.css */
/* Tabs styling lives in the global app.css under the .tabs / .tab / .tabs__panel
   / .tabs__trailing / .tabs-container selectors so other (non-Razor) parts of the
   app — e.g., pages that build their own tab strips with the same vocabulary —
   stay visually consistent. Keep this scoped file for three-file-pattern parity;
   put Tabs-only overrides here if they're ever needed. */
/* /Components/Layout/Shared/ThemeSync.razor.rz.scp.css */
/* /Components/Layout/Shared/ToastContainer.razor.rz.scp.css */
.toast-container[b-56ilzo9fhv] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    z-index: 9999;
    pointer-events: none;
}

.toast-item[b-56ilzo9fhv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--border-radius);
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: toast-in-b-56ilzo9fhv 0.25s ease-out;
    min-width: 240px;
    max-width: 400px;
}

.toast-item--success[b-56ilzo9fhv] {
    background: var(--clr-success-bg, #f0fdf4);
    color: var(--clr-success-text, #16a34a);
    border: 1px solid var(--clr-success-border, #bbf7d0);
}

.toast-item--info[b-56ilzo9fhv] {
    background: var(--clr-info-bg, #eff6ff);
    color: var(--clr-info-text, #2563eb);
    border: 1px solid var(--clr-info-border, #bfdbfe);
}

.toast-item--warning[b-56ilzo9fhv] {
    background: var(--clr-warning-bg, #fffbeb);
    color: var(--clr-warning-text, #d97706);
    border: 1px solid var(--clr-warning-border, #fde68a);
}

.toast-item--error[b-56ilzo9fhv] {
    background: var(--clr-critical-bg, #fef2f2);
    color: var(--clr-critical-text, #dc2626);
    border: 1px solid var(--clr-critical-border, #fecaca);
}

[b-56ilzo9fhv] .toast-item__icon {
    flex-shrink: 0;
}

.toast-item__text[b-56ilzo9fhv] {
    flex: 1;
}

.toast-item__close[b-56ilzo9fhv] {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0.125rem;
    display: flex;
    align-items: center;
}

.toast-item__close:hover[b-56ilzo9fhv] {
    opacity: 1;
}

@keyframes toast-in-b-56ilzo9fhv {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Layout/Shared/ToDoCategoryPicker.razor.rz.scp.css */
.catpick[b-oolieezewj] {
    position: relative;
    display: inline-block;
}

.catpick__toggle[b-oolieezewj] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
}

.catpick__toggle:hover[b-oolieezewj] {
    border-color: var(--brand-primary);
    color: var(--text-primary);
}

.catpick__label[b-oolieezewj] {
    font-weight: 600;
}

.catpick__backdrop[b-oolieezewj] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.catpick__menu[b-oolieezewj] {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 41;
    min-width: 16rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.35rem;
    background: var(--bg-card-elevated, var(--bg-card));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
}

.catpick__row[b-oolieezewj] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.catpick__item[b-oolieezewj] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    background: none;
    border: none;
    padding: 0.4rem 0.5rem;
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
}

.catpick__name[b-oolieezewj] {
    flex: 1 1 auto;
    min-width: 0;
}

.catpick__count[b-oolieezewj] {
    flex: 0 0 auto;
    min-width: 1.25rem;
    text-align: center;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--bg-inset);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.catpick__item:hover[b-oolieezewj] {
    background: var(--bg-page);
}

.catpick__item.is-active[b-oolieezewj] {
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
    font-weight: 600;
}

.catpick__del-btn[b-oolieezewj] {
    flex: 0 0 auto;
}

.catpick__delete[b-oolieezewj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.4rem 0.5rem;
    width: 100%;
}

.catpick__delete-label[b-oolieezewj] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.catpick__select[b-oolieezewj] {
    width: auto;
    padding: 0.2rem 1.6rem 0.2rem 0.45rem;
    font-size: 0.8125rem;
}

.catpick__footer[b-oolieezewj] {
    border-top: 1px solid var(--border-color);
    margin-top: 0.35rem;
    padding-top: 0.35rem;
}

.catpick__add[b-oolieezewj] {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.4rem 0.5rem;
    border-radius: var(--border-radius-sm);
    color: var(--brand-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.catpick__add:hover[b-oolieezewj] {
    background: var(--bg-page);
}

.catpick__new[b-oolieezewj] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem;
}

.catpick__new .form-control[b-oolieezewj] {
    flex: 1 1 auto;
    min-width: 0;
}
/* /Components/Layout/Shared/ToDoDialog.razor.rz.scp.css */
.form-field[b-0nxykki0h0] {
    margin-bottom: 0.85rem;
}

.todo-priority-pick[b-0nxykki0h0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.todo-catrow[b-0nxykki0h0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.todo-catrow .form-control[b-0nxykki0h0] {
    flex: 1 1 auto;
    min-width: 0;
}

.todo-catrow .btn[b-0nxykki0h0] {
    flex: 0 0 auto;
}

/* The priority badges double as a single-select control. Unselected options are faded;
   the chosen one shows full semantic color plus a brand ring. */
.todo-priority-pick__option[b-0nxykki0h0] {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.12s ease, box-shadow 0.12s ease;
}

.todo-priority-pick__option.is-selected[b-0nxykki0h0] {
    opacity: 1;
    box-shadow: 0 0 0 2px var(--brand-primary);
}

/* Sticky footer: the dialog panel is the scroll container, so pin the actions to its
   bottom edge and let the fields scroll under them. Negative margins cancel the body
   padding so the bar spans the full panel width. */
.todo-dialog__actions[b-0nxykki0h0] {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.5rem -1.25rem -1.25rem;
    padding: 0.75rem 1.25rem;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
}

.todo-dialog__actions-right[b-0nxykki0h0] {
    display: flex;
    gap: 0.5rem;
}
/* /Components/Layout/Shared/TrackingDueChip.razor.rz.scp.css */
/* Base shape and the upcoming tone come from the global .badge-status / --info pair in
   app.css; only the overdue tone is defined here.

   --clr-critical-bg, not --clr-critical-text: the critical pair is inverted relative to the
   others — -bg is the saturated red and -text is the pale foreground that sits on top of it. */
.td-chip--overdue[b-vhqlw5hybm] {
    background: var(--clr-critical-bg);
    color: var(--clr-critical-text);
    border: 1px solid var(--clr-critical-border);
}
/* /Components/Layout/Shared/TrainingModuleWizard.razor.rz.scp.css */
/* Shell only. The progress bar, dots, sticky footer and action row all reuse the global
   .wiz-* family in app.css that the checklist wizard uses; the rules here cover the parts
   specific to stepping through sections. */

/* The card body deliberately has zero padding (so its scrollbar and sticky footer reach
   the edges), which means every child supplies its own. A section is a screen's worth of
   content, so it gets real breathing room rather than list-item spacing, and a floor
   height so a two-line section still previews with slide-like proportions instead of
   collapsing to a sliver. */
.twiz__stage[b-473bu4g5v0] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    padding: 2rem 2rem 2.5rem;
    min-height: min(48vh, 460px);
}

/* The section's measure is deliberately NOT set here. It belongs to TrainingSectionCanvas,
   which is the only thing that knows the layout and the author's Width setting — and a
   ::deep rule from this file would out-specify that setting and silently pin every section
   to one width. The stage supplies the room; the canvas decides how much of it to take. */

/* Mirrors the global .wiz-actions spacing, but as a 1fr/auto/1fr grid so the button
   group stays optically centered while the position counter occupies its own
   right-hand column. A flex row with the counter appended would drag the buttons
   left by half the counter's width. */
.twiz__actions[b-473bu4g5v0] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
}

.twiz__actions-aside[b-473bu4g5v0] {
    grid-column: 1;
    justify-self: start;
    display: flex;
    gap: 0.5rem;
}

.twiz__actions-buttons[b-473bu4g5v0] {
    grid-column: 2;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.twiz__counter[b-473bu4g5v0] {
    grid-column: 3;
    justify-self: end;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* The locked-dot look (.wiz-dot:disabled) lives with the rest of the .wiz-* family in app.css. */

.twiz__blocked-hint[b-473bu4g5v0] {
    margin: 0 0 0.5rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Narrow screens: the three columns can't hold the buttons and the counter side by
   side, so drop the counter under them rather than letting it squeeze the buttons. */
@media (max-width: 480px) {
    .twiz__actions[b-473bu4g5v0] {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0.35rem;
    }

    .twiz__actions-aside[b-473bu4g5v0],
    .twiz__actions-buttons[b-473bu4g5v0],
    .twiz__counter[b-473bu4g5v0] {
        grid-column: 1;
    }

    /* Stacked, Mark unread goes BELOW the paging row rather than above it, so the row the
       user is aiming at is still the first thing under the section. Explicit order on all
       three because auto-placement otherwise follows source order, which puts it on top. */
    .twiz__actions-buttons[b-473bu4g5v0] {
        order: 0;
    }

    .twiz__actions-aside[b-473bu4g5v0] {
        order: 1;
        justify-self: center;
    }

    .twiz__counter[b-473bu4g5v0] {
        order: 2;
        justify-self: center;
    }
}

/* ── Projected ───────────────────────────────────────────────────────── */

/* In projection the learner chrome gets out of the way: the progress bar is already
   suppressed in markup, and the stage takes the full height so a Title or Section-break
   section sits centered rather than hugging the top of a 1080p screen. */

.twiz--projected[b-473bu4g5v0] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.twiz--projected .twiz__stage[b-473bu4g5v0] {
    flex: 1 1 auto;
    /* Ordinary center alignment puts half of an over-tall section above the scroll origin,
       where it can never be reached. Safe center keeps short slides centred and falls back to
       start alignment when the section needs scrolling, so its title and images remain visible. */
    justify-content: safe center;
    overflow-y: auto;
    padding: clamp(1rem, 4vh, 3rem) clamp(1rem, 4vw, 4rem);
}

/* Only the type scale changes when projected — placement is the grid's job now. */
.twiz--projected .twiz__counter[b-473bu4g5v0] {
    font-size: clamp(0.7rem, 0.9vw, 1rem);
}
/* /Components/Layout/Shared/TrainingPresenter.razor.rz.scp.css */
/* Intentionally empty. The .tm-present* family is shared with the Present buttons the host
   pages render (.tm-present-btn), so it lives in wwwroot/app.css rather than here — scoped
   styles would only reach this component's own markup. Put presenter-only overrides here if
   one is ever genuinely needed. */
/* /Components/Layout/Shared/TrainingSectionCanvas.razor.rz.scp.css */
/* One section, two renderings. The base rules are the in-page reading size; every
   .tsec--projected override exists only to make the same markup legible from across a
   room. Keeping them in one file is deliberate — a layout edited for one context and
   forgotten in the other is the failure mode this guards against. */

.tsec[b-75rs80fe4y] {
    /* Preview is the primary reading surface, so media needs to fit alongside the title,
       caption and wizard controls instead of filling the card's entire scroll area. Present
       raises this budget below because it owns nearly the whole viewport. */
    --tsec-media-max-height: min(42vh, 420px);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    /* The measure lives here rather than on whatever stage is hosting the section: the
       author's Width setting overrides it, and a host that capped it from outside would
       out-specify that override and make the setting do nothing. */
    width: 100%;
    max-width: 72ch;
    margin-inline: auto;
}

/* A prompt is a block to be read and copied rather than prose to be scanned, so the reading
   measure only cramps it. It takes the stage by default and lets Width narrow it. A scenario
   hub is a card wall, not prose, and wants the same room. Both sit ABOVE the .tsec--w-* rules
   so the author's width choice still out-cascades them. */
.tsec--prompt[b-75rs80fe4y],
.tsec--scenario[b-75rs80fe4y] {
    max-width: 100%;
}

/* Supporting content makes Prompt a responsive two-pane layout. Container sizing follows the
   authored Width setting as well as the viewport, so a half-width section stacks even on a
   large monitor instead of squeezing two unreadable columns into a narrow stage. */
.tsec--prompt[b-75rs80fe4y] {
    container-type: inline-size;
}

/* ── Width ───────────────────────────────────────────────────────────── */

/* The author's per-section choice, relative to the stage. TrainingSectionWidth.Default
   writes no class at all, which is what leaves each layout on the measure above — a payload
   from before this setting reached the text layouts renders exactly as it did.
   Centred rather than left-aligned so a half-width section doesn't leave a lopsided slide. */
.tsec--w-full[b-75rs80fe4y] {
    max-width: 100%;
}

.tsec--w-three-quarter[b-75rs80fe4y] {
    max-width: 75%;
}

.tsec--w-half[b-75rs80fe4y] {
    max-width: 50%;
}

/* Below tablet width there isn't enough room for the fractions to be anything but
   cramped, so every section goes full width. */
@media (max-width: 640px) {
    .tsec--w-three-quarter[b-75rs80fe4y],
    .tsec--w-half[b-75rs80fe4y] {
        max-width: 100%;
    }
}

.tsec__title[b-75rs80fe4y] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

/* ── Alignment ───────────────────────────────────────────────────────── */

/* One class set for every alignable element — the hero block, a heading, a caption. The
   canvas always writes one of these: TrainingTextAlign.Default is layout-dependent (a title
   screen centres, a content heading runs left), so it is resolved to a concrete value in
   TitleAlignClass rather than left for the stylesheet to imply. That keeps alignment in one
   place instead of a per-layout default the author's choice would have to out-specify. */
.tsec--align-left[b-75rs80fe4y] {
    text-align: left;
}

.tsec--align-center[b-75rs80fe4y] {
    text-align: center;
}

.tsec--align-right[b-75rs80fe4y] {
    text-align: right;
}

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

.tsec__hero[b-75rs80fe4y] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.5rem 0;
}

.tsec__hero-title[b-75rs80fe4y] {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.tsec__hero-subtitle[b-75rs80fe4y] {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-secondary);
    white-space: pre-line;
}

/* ── Section break ───────────────────────────────────────────────────── */

.tsec__break[b-75rs80fe4y] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.4rem 1.5rem;
    border-radius: var(--border-radius);
    background: var(--bg-hero);
}

.tsec__break-title[b-75rs80fe4y] {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.2;
    /* Sits on the brand gradient in both themes, so it takes the fixed on-dark
       token rather than the theme-aware one. */
    color: var(--text-on-dark);
}

.tsec__break-subtitle[b-75rs80fe4y] {
    margin: 0;
    font-size: 1rem;
    color: var(--text-on-dark);
    opacity: 0.85;
    white-space: pre-line;
}

/* ── Bullets ─────────────────────────────────────────────────────────── */

/* fit-content sizes the list to its longest unwrapped line, capped at the section's own
   width: a short list shrinks and centers, a line that needs more room claims up to the
   full Width setting before it ever wraps. Nested lists below reset this — they hug the
   parent bullet's indent instead of re-centering under it. */
.tsec__bullets[b-75rs80fe4y] {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

.tsec__bullet[b-75rs80fe4y] {
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.5;
}

/* Nested levels: a smaller gap and a lighter marker so depth reads as subordination
   rather than as a second list that happens to be indented. The list-style walk matches
   what a reader expects from an outline (disc → circle → square). */
.tsec__bullet .tsec__bullets[b-75rs80fe4y] {
    margin-top: 0.4rem;
    gap: 0.35rem;
    list-style-type: circle;
    width: auto;
    margin-inline: 0;
}

.tsec__bullet .tsec__bullet .tsec__bullets[b-75rs80fe4y] {
    list-style-type: square;
}

.tsec__bullet .tsec__bullet .tsec__bullet .tsec__bullets[b-75rs80fe4y] {
    list-style-type: disc;
}

.tsec__bullet .tsec__bullet[b-75rs80fe4y] {
    font-size: 0.95em;
    color: var(--text-secondary);
}

/* ── Content / Gate rich body ────────────────────────────────────────── */

.tsec__html[b-75rs80fe4y] {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* MarkupString children carry no scope attribute, so anything inside the
   sanitized HTML needs ::deep to be reachable from scoped CSS. */
.tsec__html[b-75rs80fe4y]  img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-sm);
}

.tsec__html[b-75rs80fe4y]  table {
    max-width: 100%;
}

.tsec__html[b-75rs80fe4y]  pre {
    overflow-x: auto;
}

/* ── Prompt ──────────────────────────────────────────────────────────── */

.tsec__prompt-layout[b-75rs80fe4y] {
    display: grid;
    align-items: start;
    gap: clamp(1rem, 3cqi, 2rem);
}

/* The companion takes its intrinsic width — a small image no longer reserves three fifths of
   the projector — but fit-content caps a wide paragraph/table/image at 60%. The prompt column
   gets everything left over. DOM order follows visual order in both variants, which also keeps
   keyboard and screen-reader reading order honest. */
.tsec__prompt-layout--left[b-75rs80fe4y] {
    grid-template-columns: fit-content(60%) minmax(0, 1fr);
}

.tsec__prompt-layout--right[b-75rs80fe4y] {
    grid-template-columns: minmax(0, 1fr) fit-content(60%);
}

.tsec__prompt-list[b-75rs80fe4y],
.tsec__prompt-companion[b-75rs80fe4y] {
    min-width: 0;
}

/* At roughly a half-projector measure there is no useful two-column composition left. Stack
   before either rich content or a code prompt wraps into a very tall, narrow strip. */
@container (max-width: 60rem) {
    .tsec__prompt-layout[b-75rs80fe4y] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* One prompt: its optional "why" line, the block, and the button that copies it. The gap
   inside is tighter than the gap between items so several prompts on one screen read as a
   list of blocks rather than one undifferentiated column. */
.tsec__prompt-item[b-75rs80fe4y] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}

.tsec__prompt-item + .tsec__prompt-item[b-75rs80fe4y] {
    margin-top: 1.5rem;
}

.tsec__prompt-why[b-75rs80fe4y] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Same family as the rich-content inline-code look (app.css), but with its own border and
   full-strength text color rather than the inherited --text-secondary: --bg-inset sits only a
   few values off the page background in light theme (see the .dash-section__panel comment in
   app.css for the same issue), so the fill alone doesn't read as a highlight there, and a muted
   foreground compounded it in both themes. */
.tsec__prompt-why code[b-75rs80fe4y] {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;
    background: var(--bg-inset);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    font-size: 0.875em;
}

.tsec__prompt-body[b-75rs80fe4y] {
    position: relative;
    width: 100%;
}

.tsec__prompt[b-75rs80fe4y] {
    width: 100%;
    margin: 0;
    /* Extra right padding clears the copy button floating in the corner. */
    padding: 0.9rem 2.75rem 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-inset);
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.55;
    /* pre-wrap, not pre: the author's newlines and indentation are meaningful and must
       survive, but a long single line should wrap rather than force the page sideways. */
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* Floats in the block's corner (GitHub code-block pattern) instead of a full labeled button
   underneath — the label already lives in the aria-label/title for anyone who needs it named. */
.tsec__copy[b-75rs80fe4y] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

/* ── Media ───────────────────────────────────────────────────────────── */

/* The frame owns the width the author picked; what owns the HEIGHT depends on the fit,
   which is why the border and the rounded corner move between the two.
   Natural — the image keeps its own proportions, so it is the visible box and carries the
   border; the frame is a bare centring wrapper.
   Cropping fits — the frame pins an aspect ratio and the image covers it, so the frame is
   the visible box and clips its overflow. */
.tsec__frame[b-75rs80fe4y] {
    display: flex;
    justify-content: center;
    line-height: 0;
}

.tsec__image[b-75rs80fe4y] {
    width: 100%;
    height: 100%;
    /* Both are written inline per section for the pinned-ratio fits (see ImageStyle). These
       are the fallbacks: cover-and-centre is what every cropping frame did before the author
       could choose, and they're inert on a natural fit, where the frame already fits. */
    object-fit: cover;
    object-position: center center;
}

.tsec__frame--natural .tsec__image[b-75rs80fe4y] {
    width: auto;
    max-width: 100%;
    max-height: var(--tsec-media-max-height);
    height: auto;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

/* The fill colour matters once the scale stops covering: contain, none and scale-down all
   leave part of the frame bare, and a filled box reads as a deliberate letterbox where a
   transparent one reads as a rendering fault. */
.tsec__frame--wide[b-75rs80fe4y],
.tsec__frame--standard[b-75rs80fe4y],
.tsec__frame--square[b-75rs80fe4y] {
    max-height: var(--tsec-media-max-height);
    overflow: hidden;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background-color: var(--bg-subsection);
}

.tsec__frame--wide[b-75rs80fe4y] {
    aspect-ratio: 16 / 9;
}

.tsec__frame--standard[b-75rs80fe4y] {
    aspect-ratio: 4 / 3;
}

.tsec__frame--square[b-75rs80fe4y] {
    aspect-ratio: 1 / 1;
}

.tsec__caption[b-75rs80fe4y] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ── Gate ────────────────────────────────────────────────────────────── */

.tsec__gate[b-75rs80fe4y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--clr-info-border);
    border-radius: var(--border-radius-sm);
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
    font-size: 0.9rem;
}

.tsec__gate--met[b-75rs80fe4y] {
    border-color: var(--clr-success-border);
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

/* ── Scenario hub ────────────────────────────────────────────────────── */

/* The "tonal tile" wall: brand-tinted cards on fixed-size tiles so eighteen names come out
   as one even board (a grid of content-sized cards never did — one wrapping name made its
   whole row taller). Surfaces come from the --scenario-* tokens in app.css: the plain card
   surface is near-invisible on the dark page, which is the bug this replaced. */

.tsec__scenario-intro[b-75rs80fe4y] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    white-space: pre-line;
}

/* Same info→success treatment as the gate banner: the two derived sections should read as
   the same kind of thing. fit-content because the line is a status, not a section-wide bar —
   which is also why it can't be text-align'd and follows the title with margin classes. */
.tsec__scenario-status[b-75rs80fe4y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--clr-info-border);
    border-radius: 999px;
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
    font-size: 0.875rem;
}

.tsec__scenario-status--center[b-75rs80fe4y] {
    margin-inline: auto;
}

.tsec__scenario-status--right[b-75rs80fe4y] {
    margin-left: auto;
}

.tsec__scenario-status--met[b-75rs80fe4y] {
    border-color: var(--clr-success-border);
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

/* Wrapping flex, not a grid: fixed-width tiles center as a wall AND the ragged last row
   centers under it, which auto-fill columns never do. Cross-axis stretch (the flex default,
   left unset here) is what makes every card in one wrapped ROW match the tallest card in
   that row — a two-line title grows its own row without forcing every OTHER row taller too. */
.tsec__scenarios[b-75rs80fe4y] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
}

/* The stretch target: an auto-height flex item whose own height comes from its card's
   natural content height, so the row's tallest card sets what everyone else stretches to. */
.tsec__scenario-item[b-75rs80fe4y] {
    position: relative;
}

/* No fixed height and no line clamp: a long title grows the card instead of being cut off.
   height:100% fills whatever height the row's stretch settled on; min-height only sets the
   floor for a short one-line title. */
.tsec__scenario-card[b-75rs80fe4y] {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    width: 13rem;
    height: 100%;
    min-height: 5rem;
    box-sizing: border-box;
    padding: 0.7rem 1rem;
    border: 1px solid var(--scenario-card-border);
    border-radius: var(--border-radius);
    background: var(--scenario-card-bg);
    text-align: left;
    cursor: pointer;
}

.tsec__scenario-card:hover:not(:disabled)[b-75rs80fe4y],
.tsec__scenario-card:focus-visible[b-75rs80fe4y] {
    /* The meta tone doubles as the hover ring: unlike --brand-primary it is bright enough
       to read on the dark tiles. */
    border-color: var(--scenario-card-meta);
}

.tsec__scenario-card:disabled[b-75rs80fe4y] {
    opacity: 0.55;
    cursor: not-allowed;
}

.tsec__scenario-card--visited[b-75rs80fe4y] {
    background: var(--clr-success-bg);
    border-color: var(--clr-success-border);
}

.tsec__scenario-ghost[b-75rs80fe4y] {
    position: absolute;
    right: 0.4rem;
    bottom: -0.65rem;
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--scenario-card-ghost);
    pointer-events: none;
}

/* position:relative lifts the text above the ghost numeral. No clamp: the card grows to fit
   whatever the title needs (see .tsec__scenario-card) instead of cutting it off. */
.tsec__scenario-name[b-75rs80fe4y] {
    position: relative;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--scenario-card-title);
}

.tsec__scenario-card--visited .tsec__scenario-name[b-75rs80fe4y] {
    color: var(--clr-success-text);
}

.tsec__scenario-meta[b-75rs80fe4y] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--scenario-card-meta);
}

.tsec__scenario-card--visited .tsec__scenario-meta[b-75rs80fe4y] {
    color: var(--clr-success-text);
}

.tsec__scenario-assignee--none[b-75rs80fe4y] {
    font-style: italic;
    opacity: 0.75;
}

.tsec__scenario-assign[b-75rs80fe4y] {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
}

.tsec__assign-pop[b-75rs80fe4y] {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 4px);
    z-index: 5;
    padding: 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-card-elevated, var(--bg-card));
    box-shadow: var(--shadow-md);
}

.tsec__returns[b-75rs80fe4y] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ── Attachments and links ───────────────────────────────────────────── */

.tsec__files[b-75rs80fe4y] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.tsec__files.tsec--align-left[b-75rs80fe4y] {
    align-items: flex-start;
}

.tsec__files.tsec--align-center[b-75rs80fe4y] {
    align-items: center;
}

.tsec__files.tsec--align-right[b-75rs80fe4y] {
    align-items: flex-end;
}

.tsec__file[b-75rs80fe4y] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-subsection);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.875rem;
}

.tsec__file-details[b-75rs80fe4y] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tsec__file-description[b-75rs80fe4y] {
    color: var(--text-secondary);
    font-size: 0.8rem;
    white-space: pre-wrap;
}

.tsec__file:hover[b-75rs80fe4y] {
    border-color: var(--brand-primary);
}

.tsec__file-size[b-75rs80fe4y] {
    color: var(--text-tertiary);
    font-size: 0.8rem;
}

.tsec__links[b-75rs80fe4y] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tsec__link[b-75rs80fe4y] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--brand-primary);
    font-size: 0.875rem;
    text-decoration: none;
}

.tsec__link:hover[b-75rs80fe4y] {
    text-decoration: underline;
}

/* ── Projected ───────────────────────────────────────────────────────── */

/* Type scales with the viewport so one deck reads correctly on a laptop panel and a
   1080p projector without per-venue tuning. The clamp floors keep it from collapsing
   below the in-page size on a narrow window. */

.tsec--projected[b-75rs80fe4y] {
    --tsec-media-max-height: 62vh;
    gap: clamp(1rem, 2vh, 2rem);
    max-width: 60ch;
    margin: 0 auto;
}

.tsec--projected.tsec--media[b-75rs80fe4y],
.tsec--projected.tsec--break[b-75rs80fe4y] {
    max-width: 80ch;
}

/* A prompt is a block to be read and copied, not prose to be scanned, so the 60ch measure
   that serves the text layouts just wastes the projector. It takes the stage instead and
   lets the section's Width decide how much of it to use. Same for a scenario card wall. */
.tsec--projected.tsec--prompt[b-75rs80fe4y],
.tsec--projected.tsec--scenario[b-75rs80fe4y] {
    max-width: 100%;
}

/* The author's width choice, restated at projected specificity. The three rules above are
   two classes deep, so a plain .tsec--w-* would lose to them and the setting would work in
   the page and do nothing on the projector — the one place a full-bleed title matters most. */
.tsec--projected.tsec--w-full[b-75rs80fe4y] {
    max-width: 100%;
}

.tsec--projected.tsec--w-three-quarter[b-75rs80fe4y] {
    max-width: 75%;
}

.tsec--projected.tsec--w-half[b-75rs80fe4y] {
    max-width: 50%;
}

@media (max-width: 640px) {
    .tsec--projected.tsec--w-three-quarter[b-75rs80fe4y],
    .tsec--projected.tsec--w-half[b-75rs80fe4y] {
        max-width: 100%;
    }
}

.tsec--projected .tsec__title[b-75rs80fe4y] {
    font-size: clamp(1.5rem, 3.4vw, 3rem);
}

.tsec--projected .tsec__prompt-why[b-75rs80fe4y] {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
}

.tsec--projected .tsec__hero-title[b-75rs80fe4y] {
    font-size: clamp(2.25rem, 6vw, 5.5rem);
}

.tsec--projected .tsec__hero-subtitle[b-75rs80fe4y] {
    font-size: clamp(1.1rem, 2.2vw, 2.25rem);
}

.tsec--projected .tsec__break[b-75rs80fe4y] {
    padding: clamp(1.5rem, 4vh, 3.5rem) clamp(1.5rem, 4vw, 4rem);
}

.tsec--projected .tsec__break-title[b-75rs80fe4y] {
    font-size: clamp(1.9rem, 5vw, 4.5rem);
}

.tsec--projected .tsec__break-subtitle[b-75rs80fe4y] {
    font-size: clamp(1rem, 1.8vw, 1.9rem);
}

.tsec--projected .tsec__bullets[b-75rs80fe4y] {
    gap: clamp(0.6rem, 1.6vh, 1.4rem);
    padding-left: 1.5rem;
}

.tsec--projected .tsec__bullet[b-75rs80fe4y] {
    font-size: clamp(1.05rem, 2.1vw, 2.1rem);
    line-height: 1.4;
}

/* Restated at higher specificity than the two rules above, which would otherwise reach
   nested bullets too and flatten the outline back into one size at one spacing. */
.tsec--projected .tsec__bullet .tsec__bullet[b-75rs80fe4y] {
    font-size: 0.9em;
}

.tsec--projected .tsec__bullet .tsec__bullets[b-75rs80fe4y] {
    gap: clamp(0.4rem, 1vh, 0.9rem);
    margin-top: clamp(0.4rem, 1vh, 0.9rem);
}

.tsec--projected .tsec__html[b-75rs80fe4y] {
    font-size: clamp(1rem, 1.5vw, 1.6rem);
}

.tsec--projected .tsec__prompt[b-75rs80fe4y] {
    font-size: clamp(0.9rem, 1.15vw, 1.35rem);
    padding: clamp(0.9rem, 2vh, 1.6rem) clamp(2.25rem, 3.5vw, 3rem) clamp(0.9rem, 2vh, 1.6rem) clamp(1rem, 2vw, 1.75rem);
}

.tsec--projected .tsec__caption[b-75rs80fe4y],
.tsec--projected .tsec__link[b-75rs80fe4y],
.tsec--projected .tsec__file[b-75rs80fe4y] {
    font-size: clamp(0.875rem, 1.1vw, 1.25rem);
}

.tsec--projected .tsec__scenarios[b-75rs80fe4y] {
    gap: clamp(0.8rem, 1.6vh, 1.3rem);
}

.tsec--projected .tsec__scenario-card[b-75rs80fe4y] {
    width: clamp(13rem, 18vw, 17rem);
    /* min-height, not height: the base rule's height:100% still stretches the card to its
       row's tallest sibling; this only raises the floor for a short one-line title. */
    min-height: clamp(5rem, 9vh, 6.5rem);
}

.tsec--projected .tsec__scenario-name[b-75rs80fe4y] {
    font-size: clamp(0.95rem, 1.35vw, 1.35rem);
}

.tsec--projected .tsec__scenario-meta[b-75rs80fe4y] {
    font-size: clamp(0.78rem, 1vw, 1.05rem);
}

.tsec--projected .tsec__scenario-ghost[b-75rs80fe4y] {
    font-size: clamp(3.4rem, 5vw, 4.6rem);
}

.tsec--projected .tsec__scenario-intro[b-75rs80fe4y],
.tsec--projected .tsec__scenario-status[b-75rs80fe4y] {
    font-size: clamp(0.95rem, 1.3vw, 1.4rem);
}

/* ── Quiz ────────────────────────────────────────────────────────────── */

/* The slide wears the gate pill for its state; these cover the intro line, the placeholder
   shown when no quiz is attached, and the runner's slot. The runner styles itself. */

.tsec__quiz-intro[b-75rs80fe4y] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    white-space: pre-line;
}

.tsec__quiz-missing[b-75rs80fe4y] {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.tsec__quiz[b-75rs80fe4y] {
    margin-top: 0.25rem;
}

.tsec--projected .tsec__quiz-intro[b-75rs80fe4y],
.tsec--projected .tsec__quiz-missing[b-75rs80fe4y] {
    font-size: clamp(0.95rem, 1.3vw, 1.4rem);
}
/* /Components/Layout/Shared/Unauthorized.razor.rz.scp.css */
/* Mirrors NotFound.razor.css so the access-denied and page-not-found screens read
   as the same friendly card. */

/* ── Page wrapper ─────────────────────────────────────────── */
#accessdenied-message[b-omnmpmk76z] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 3rem;
    width: 100%;
    max-width: 680px;
    margin: 3rem auto;
    padding: 3rem 3.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
}

/* ── Logo cell ────────────────────────────────────────────── */
#accessdenied-grid-cell-1[b-omnmpmk76z] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 2.5rem;
    border-right: 1px solid var(--border-color);
}

/* The <Icon> svg is a child component, so scoped CSS can't target it directly —
   set the color here and let fill="currentColor" inherit into the sprite. */
.logo[b-omnmpmk76z] {
    color: var(--text-primary);
    transition: opacity var(--transition);
}

    .logo:hover[b-omnmpmk76z] {
        opacity: 0.75;
    }

/* ── Content cell ─────────────────────────────────────────── */
#accessdenied-grid-cell-2 h1[b-omnmpmk76z] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

#accessdenied-grid-cell-2 > p[b-omnmpmk76z] {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

#accessdenied-grid-cell-2 div > p[b-omnmpmk76z] {
    font-size: 0.875rem;
    color: var(--text-tertiary);
    margin-bottom: 0.5rem;
}

#accessdenied-grid-cell-2 ul[b-omnmpmk76z] {
    list-style: disc;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

    #accessdenied-grid-cell-2 ul li[b-omnmpmk76z] {
        font-size: 0.875rem;
        color: var(--text-secondary);
    }

/* ── Actions ──────────────────────────────────────────────── */
.accessdenied-actions[b-omnmpmk76z] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 560px) {
    #accessdenied-message[b-omnmpmk76z] {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
        margin: 3rem 1rem;
        padding: 2rem 1.5rem;
    }

    #accessdenied-grid-cell-1[b-omnmpmk76z] {
        padding-right: 0;
        padding-bottom: 1.5rem;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    #accessdenied-grid-cell-2 ul[b-omnmpmk76z] {
        display: inline-flex;
        text-align: left;
    }

    .accessdenied-actions[b-omnmpmk76z] {
        justify-content: center;
    }
}
/* /Components/Layout/Shared/User.razor.rz.scp.css */
/* Scoped styles for User */
/* /Components/Layout/Shared/WeeklyGantt.razor.rz.scp.css */
.gantt[b-inabtxsb3w] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 200px;
}

.gantt__header[b-inabtxsb3w] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}

.gantt__week-label[b-inabtxsb3w] {
    font-size: 0.5625rem;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.gantt__bar[b-inabtxsb3w] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    height: 2rem;
}

.gantt__cell[b-inabtxsb3w] {
    position: relative;
    border-radius: 2px;
    border: 1px solid var(--border-default);
    background: var(--bg-page);
    overflow: hidden;
}

/* Learning Sprint week — purple ring around the cell so the sprint stays visible even at
   100% allocation (when there's no leftover capacity for the striped --sprint segment to fill).
   Uses an outset box-shadow + matching border color to draw a 2px ring without changing the
   cell's grid-cell dimensions, keeping the columns aligned. */
.gantt__cell--sprint[b-inabtxsb3w] {
    border-color: var(--clr-needs-review-text);
    box-shadow: 0 0 0 1px var(--clr-needs-review-text);
}

.gantt__stack[b-inabtxsb3w] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
}

.gantt__seg[b-inabtxsb3w] {
    flex-shrink: 0;
    transition: flex-basis 0.3s ease;
}

/* Priority-based colors (solid = committed) */
.gantt__seg--low[b-inabtxsb3w] {
    background: var(--clr-success-text);
    opacity: 0.45;
}

.gantt__seg--medium[b-inabtxsb3w] {
    background: var(--brand-primary);
    opacity: 0.5;
}

.gantt__seg--high[b-inabtxsb3w] {
    background: var(--clr-warning-text);
    opacity: 0.6;
}

.gantt__seg--urgent[b-inabtxsb3w] {
    background: var(--clr-over-capacity);
}

/* Backlog: striped fill over priority color. Override the solid background
   so the priority hue comes through the stripe bands. */
.gantt__seg--backlog.gantt__seg--low[b-inabtxsb3w] {
    background: repeating-linear-gradient(
        45deg,
        var(--clr-success-text) 0 6px,
        transparent 6px 12px);
    opacity: 0.55;
}

.gantt__seg--backlog.gantt__seg--medium[b-inabtxsb3w] {
    background: repeating-linear-gradient(
        45deg,
        var(--brand-primary) 0 6px,
        transparent 6px 12px);
    opacity: 0.6;
}

.gantt__seg--backlog.gantt__seg--high[b-inabtxsb3w] {
    background: repeating-linear-gradient(
        45deg,
        var(--clr-warning-text) 0 6px,
        transparent 6px 12px);
    opacity: 0.75;
}

.gantt__seg--backlog.gantt__seg--urgent[b-inabtxsb3w] {
    background: repeating-linear-gradient(
        45deg,
        var(--clr-over-capacity) 0 6px,
        transparent 6px 12px);
    opacity: 0.9;
}

/* Learning Sprint: opposite-direction stripes (-45deg) in the same purple as the calendar
   sprint icon. Takes the place of backlog stripes for any week the sprint covers, signaling
   "the rest of this week is committed to the sprint." */
.gantt__seg--sprint[b-inabtxsb3w] {
    background: repeating-linear-gradient(
        -45deg,
        var(--clr-needs-review-text) 0 6px,
        transparent 6px 12px);
    opacity: 0.75;
}
/* /Components/Layout/Sidebar.razor.rz.scp.css */
.sidebar-version[b-oojujhtp48] {
    display: block;
    margin-top: auto;
    padding: 0.5rem 1.25rem 0.75rem;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    letter-spacing: 0.03em;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
    transition: opacity 0.2s, color 0.2s;
}

.sidebar-version:hover[b-oojujhtp48] {
    opacity: 1;
    color: var(--text-secondary);
}

.nav-badge[b-oojujhtp48] {
    margin-left: auto;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--badge-solid-bg);
    color: var(--badge-solid-text);
    box-shadow: 0 0 0 2px var(--bg-sidebar);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
    white-space: nowrap;
}
/* /Components/Layout/UnauthorizedLayout.razor.rz.scp.css */
/* ================================================================
   UNAUTHORIZED LAYOUT  ·  Bare page — no app shell, no nav
   Same neutral surface as the rest of the app so the access-denied
   card reads like the NotFound card rather than a lockdown screen.
   ================================================================ */

.unauth-page[b-l4xo5gnxsm] {
    min-height: 100vh;
    background: var(--bg-page);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
/* /Components/Pages/AdminFeedbackCard.razor.rz.scp.css */
/* Same look as Home's .dash-card__count (scoped CSS doesn't cross components). */
.afc-count[b-29bpvddhfo] {
    margin-left: auto;
    background: var(--bg-inset);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}
/* /Components/Pages/AdminFollowUpToDosCard.razor.rz.scp.css */
/* Layout reuses the shared .todo-* / .dash-card classes in app.css. This scoped
   file is intentionally empty — add card-only overrides here if ever needed. */
/* /Components/Pages/AdminRemoteComplianceCard.razor.rz.scp.css */
/* Same look as Home's .dash-card__count (scoped CSS doesn't cross components). */
.arc-count[b-amcyxzxddh] {
    margin-left: auto;
    background: var(--bg-inset);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Matches UpcomingEventsCard's .uec__reveal-btn — the established privacy-toggle affordance.
   No margin: .dash-card__header is flex with its own 0.75rem gap, and the count pill ahead of it
   already claimed the margin-left: auto that pushes both to the right edge. */
.arc-reveal[b-amcyxzxddh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    flex-shrink: 0;
}

.arc-reveal:hover[b-amcyxzxddh],
.arc-reveal:focus-visible[b-amcyxzxddh] {
    background: var(--bg-page);
    color: var(--text-primary);
    border-color: var(--border-default, rgba(128, 128, 128, 0.2));
    outline: none;
}

.arc-masked[b-amcyxzxddh] {
    color: var(--text-tertiary);
    font-style: italic;
    letter-spacing: 0.05em;
}
/* /Components/Pages/Admin/AuditLog.razor.rz.scp.css */
.al-filters[b-8zto2qbwjt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.1));
    border-radius: 6px;
}

.al-row[b-8zto2qbwjt] {
    cursor: pointer;
}

.al-row:hover[b-8zto2qbwjt],
.al-row--expanded[b-8zto2qbwjt] {
    background: var(--bg-page);
}

.al-changes[b-8zto2qbwjt] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.al-change[b-8zto2qbwjt] {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
}

.al-change--created[b-8zto2qbwjt] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

.al-change--updated[b-8zto2qbwjt] {
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
}

.al-change--deleted[b-8zto2qbwjt] {
    background: var(--clr-critical-bg);
    color: var(--clr-critical-text);
}

.al-detail-row td[b-8zto2qbwjt] {
    background: var(--bg-inset);
}

.al-detail-json[b-8zto2qbwjt] {
    margin: 0;
    padding: 0.75rem;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-secondary);
}

.al-paging[b-8zto2qbwjt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0;
}

.al-paging__info[b-8zto2qbwjt] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}
/* /Components/Pages/Admin/CalendarEventEditor.razor.rz.scp.css */
.form-row[b-mcxhaez27g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.form-field__hint[b-mcxhaez27g] {
    font-weight: 400;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

.form-field__help[b-mcxhaez27g] {
    margin: -0.25rem 0 0.5rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Push the destructive Remove button to the far left so Save/Cancel stay grouped on the right.
   Matches the conventional dialog pattern: destructive on one side, primary on the other. */
.form-actions__delete[b-mcxhaez27g] {
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
/* /Components/Pages/Admin/CalendarEvents.razor.rz.scp.css */
/* CalendarEvents page reuses .data-table, .data-table-wrap, .page-wrap, etc. from app.css */

.cal-table__desc[b-pltsx7pi3o] {
    color: var(--text-secondary);
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-admin__toolbar[b-pltsx7pi3o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 0.75rem 0 1rem;
}

.cal-admin__toolbar .filter-pills[b-pltsx7pi3o] {
    margin-bottom: 0;
}
/* /Components/Pages/Admin/ChecklistTemplates.razor.rz.scp.css */
.ct-order[b-cbbszrstlj] {
    width: 3rem;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

.ct-desc[b-cbbszrstlj] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.ct-action-group[b-cbbszrstlj] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

[b-cbbszrstlj] .icon-flip-v {
    transform: rotate(180deg);
}

.ct-links[b-cbbszrstlj] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.ct-link-row[b-cbbszrstlj] {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}

.ct-link-label[b-cbbszrstlj] {
    flex: 1;
    min-width: 0;
}

.ct-link-url[b-cbbszrstlj] {
    flex: 2;
    min-width: 0;
}
/* /Components/Pages/Admin/DbDiagnostics.razor.rz.scp.css */
.db-diag__hint[b-v4xq1loezv] {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.db-diag__list[b-v4xq1loezv] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.5rem 1.25rem;
    background: var(--bg-card);
    padding: 1rem 1.25rem;
    border-radius: 6px;
}

.db-diag__list dt[b-v4xq1loezv] {
    font-weight: 600;
    color: var(--text-secondary);
}

.db-diag__list dd[b-v4xq1loezv] {
    margin: 0;
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    word-break: break-all;
}

.db-diag__badge[b-v4xq1loezv] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85em;
}

.db-diag__badge--yes[b-v4xq1loezv] {
    background: var(--clr-info-bg, rgba(0, 128, 0, 0.15));
    color: var(--clr-info-fg, #0a7a0a);
}

.db-diag__badge--no[b-v4xq1loezv] {
    background: var(--clr-critical-bg, rgba(200, 0, 0, 0.15));
    color: var(--clr-critical-fg, #b00020);
}

.db-diag__cols[b-v4xq1loezv] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.db-diag__migrations[b-v4xq1loezv] {
    margin: 0;
    padding-left: 1.25rem;
}

.db-diag__migrations code[b-v4xq1loezv] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* /Components/Pages/Admin/DocumentTemplates/DocumentTemplates.razor.rz.scp.css */
/* The kind pivot rides on .seg-toggle--2, which spans its container by design
   (it was built for full-width tab strips). Here it sits above the category
   pills as one control among several, so shrink it to its labels and give the
   pills below some breathing room. The options keep flex: 1 1 0 from the base
   styles, so they still land on equal halves and the sliding indicator's 50%
   width stays aligned. */
.dt-kind-pivot[b-c5m9ul4yj3] {
    margin-bottom: 0.75rem;
}

.dt-kind-pivot .seg-toggle[b-c5m9ul4yj3] {
    width: auto;
}

.dt-kind-pivot .seg-toggle__option[b-c5m9ul4yj3] {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
/* /Components/Pages/Admin/DocumentTemplates/HtmlTemplateEditor.razor.rz.scp.css */
/* Fill the content area exactly, the same recipe HtmlDocumentAuthor uses: the
   page is a flex column pinned to the viewport height below the app header, the
   header / blurb rows take their natural height, and the editor absorbs ALL
   remaining space. Below the min-height floor the page scrolls normally instead
   of crushing the editor. */
.html-template-editor[b-r1f1uadjbp] {
    display: flex;
    flex-direction: column;
    /* page-wrap padding is inside this height (global border-box sizing). */
    height: calc(100dvh - var(--header-height));
    min-height: 480px;
}

/* Flex items default to flex-shrink: 1, so in a height-pinned column these
   would COMPRESS whenever the editor wants more room. Pin them to their
   natural height; the editor is the only child allowed to flex. */
.html-template-editor > .page-header[b-r1f1uadjbp],
.html-template-editor > .form-hint[b-r1f1uadjbp],
.html-template-editor > .form-error[b-r1f1uadjbp],
.html-template-editor > .collapsible-section[b-r1f1uadjbp] {
    flex-shrink: 0;
}

/* Expanding the token reference eats into the editor's share of the column
   instead of overflowing the page. Left overflow alone — the base
   .collapsible-section sets overflow: visible on purpose so dropdowns can
   escape the card. */
.html-template-editor > .collapsible-section[b-r1f1uadjbp] {
    margin-bottom: 1rem;
}

/* The global .page-header carries negative side margins to outdent its divider
   strip in normal block flow; as a flex item that shifts the whole box left
   under the sidebar. Neutralize them — the header's edge-fading gradient makes
   the narrower strip look the same. */
.html-template-editor > .page-header[b-r1f1uadjbp] {
    margin: 0 0 1rem;
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.html-template-editor > .form-hint[b-r1f1uadjbp],
.html-template-editor > .form-error[b-r1f1uadjbp] {
    margin: 0 0 1rem;
}

/* The editor root is itself a flex column (toolbar / surface / status bar), so
   giving it the remaining page height lets its surface stretch. ::deep because
   the class lands on the CollabHtmlEditor component's root element. */
.html-template-editor[b-r1f1uadjbp]  .html-template-editor__editor {
    flex: 1 1 auto;
    min-height: 0;
}

.html-template-editor[b-r1f1uadjbp]  .html-template-editor__editor .html-editor-surface,
.html-template-editor[b-r1f1uadjbp]  .html-template-editor__editor .html-editor-source-wrap,
.html-template-editor[b-r1f1uadjbp]  .html-template-editor__editor .html-editor-source {
    flex: 1 1 auto;
    /* min-height: 0 (not a fixed floor) keeps the status bar visible on short
       windows: the editor root is overflow:hidden and pinned to the viewport
       height, so a fixed surface floor would push toolbar + surface + footer
       past it and clip the footer. */
    min-height: 0;
    max-height: none;
}

/* TipTap mounts .ProseMirror inside the surface at runtime; stretch it to the
   surface's full height so clicking anywhere in the empty area below the text
   places the caret instead of hitting dead space. */
.html-template-editor[b-r1f1uadjbp]  .html-template-editor__editor .html-editor-surface .ProseMirror {
    min-height: 100%;
}
/* /Components/Pages/Admin/Feedback.razor.rz.scp.css */
/* Date cell */
.fb-date[b-mksn9wpszz] {
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

[b-mksn9wpszz] .fb-date__icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.25rem;
    color: var(--text-tertiary);
}

/* Submitter cell */
.fb-submitter[b-mksn9wpszz] {
    white-space: nowrap;
    font-size: 0.875rem;
}

/* Message cell */
.fb-message[b-mksn9wpszz] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Rendered rich-text message. Keep the cell from getting too wide, and clamp tall content with
   a soft fade until "Show more" expands it (CSS clamp avoids slicing the HTML mid-tag). */
.fb-message__content[b-mksn9wpszz] {
    max-width: 32rem;
}

.fb-message__content--clamped[b-mksn9wpszz] {
    max-height: 8em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

/* Status radio group — buttons with role="radio", not native radios (see the .razor). The
   dot is drawn in CSS so the control still reads as a mutually exclusive set. */
.fb-status[b-mksn9wpszz] {
    white-space: nowrap;
}

.fb-radio-group[b-mksn9wpszz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fb-radio-option[b-mksn9wpszz] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: var(--border-radius);
    border: 1px solid transparent;
    background: none;
}

.fb-radio-option[b-mksn9wpszz]::before {
    content: "";
    flex-shrink: 0;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 1px solid var(--text-tertiary);
}

.fb-radio-option:not(:disabled):hover[b-mksn9wpszz] {
    color: var(--text-primary);
    border-color: var(--border-color);
}

.fb-radio-option:focus-visible[b-mksn9wpszz] {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.fb-radio-option:disabled[b-mksn9wpszz] {
    cursor: default;
    opacity: 0.6;
}

.fb-radio-option--active[b-mksn9wpszz] {
    color: var(--text-primary);
    font-weight: 600;
    border-color: var(--border-color);
    background: var(--bg-page);
}

.fb-radio-option--active[b-mksn9wpszz]::before {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    box-shadow: inset 0 0 0 2px var(--bg-card);
}

/* Expand / collapse toggle on truncated messages */
.fb-toggle[b-mksn9wpszz] {
    display: inline;
    margin-left: 0.25rem;
    font-size: 0.75rem;
}

/* Admin response block shown under the original message when expanded */
.fb-response[b-mksn9wpszz] {
    margin-top: 0.75rem;
    padding: 0.6rem 0.8rem;
    background: var(--bg-page);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--border-radius);
}

.fb-response__meta[b-mksn9wpszz] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    margin-bottom: 0.25rem;
}

.fb-response__body[b-mksn9wpszz] {
    color: var(--text-primary);
    white-space: pre-wrap;
    font-size: 0.9rem;
}

/* Action button row (respond + delete icon buttons) */
.fb-action-buttons[b-mksn9wpszz] {
    display: inline-flex;
    gap: 0.25rem;
}

/* Buttons styles are now in app.css (.btn-danger, .btn-sm) */
/* /Components/Pages/Admin/Labels.razor.rz.scp.css */
.label-swatch[b-vmbk6204oy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    vertical-align: middle;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.color-field[b-vmbk6204oy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.color-field input[type="color"][b-vmbk6204oy] {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.125rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    background: transparent;
}

.lbl-merge-bar[b-vmbk6204oy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
    border-radius: 6px;
    position: sticky;
    top: var(--header-height, 58px);
    z-index: 5;
}

.lbl-merge-bar__count[b-vmbk6204oy] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-right: auto;
}

.lbl-col-select[b-vmbk6204oy] {
    width: 2.25rem;
}

.data-table tbody tr.is-selected[b-vmbk6204oy] {
    background: var(--nav-hover-bg);
}

.label-detail-row[b-vmbk6204oy] {
    background: var(--bg-inset);
}

.label-detail-row:hover[b-vmbk6204oy] {
    background: var(--bg-inset);
}

.label-solutions[b-vmbk6204oy] {
    padding: 0.375rem 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}

.label-solutions__title[b-vmbk6204oy] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 0.25rem;
}

.label-solutions__link[b-vmbk6204oy] {
    font-size: 0.8125rem;
    color: var(--brand-primary);
    text-decoration: none;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
}

.label-solutions__link:hover[b-vmbk6204oy] {
    text-decoration: underline;
}
/* /Components/Pages/Admin/LearningSprints.razor.rz.scp.css */
.ls-name[b-31navt08gd] {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}

.ls-meta[b-31navt08gd] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.ls-eligible[b-31navt08gd] {
    color: var(--text-primary);
}

.ls-eligible--now[b-31navt08gd] {
    color: var(--clr-success-text);
    font-weight: 600;
}

.ls-upcoming[b-31navt08gd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ls-upcoming__title[b-31navt08gd] {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
}

.ls-upcoming__detail[b-31navt08gd] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.ls-upcoming__description[b-31navt08gd] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
}
/* /Components/Pages/Admin/OneOnOneTracking.razor.rz.scp.css */
.oot-list[b-u19ne4bix6] {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.oot-row[b-u19ne4bix6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-card);
}

/* A real <button data-reorder-handle> (keyboard-focusable, arrow keys reorder); strip
   the native button chrome so it still reads as a plain grip glyph. */
.oot-row__handle[b-u19ne4bix6] {
    flex: 0 0 auto;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: grab;
    color: var(--text-tertiary);
    user-select: none;
    line-height: 1;
}

.oot-row__handle:active[b-u19ne4bix6] {
    cursor: grabbing;
}

.oot-row__main[b-u19ne4bix6] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.oot-row__name[b-u19ne4bix6] {
    font-weight: 600;
    color: var(--text-primary);
}

/* Static (non-clickable) variant used for the deleted-items list. */
.oot-row__main--static[b-u19ne4bix6] {
    cursor: default;
}

.oot-deleted[b-u19ne4bix6] {
    margin-top: 1.25rem;
}

.oot-row--deleted[b-u19ne4bix6] {
    background: var(--bg-inset);
    opacity: 0.85;
}

.oot-dialog__actions[b-u19ne4bix6] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
/* /Components/Pages/Admin/ProgressTracking.razor.rz.scp.css */
.pt-layout[b-gn91ojd1my] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 800px) {
    .pt-layout[b-gn91ojd1my] {
        grid-template-columns: 1fr;
    }
}

/* ── Sidebar ── */
.pt-sidebar[b-gn91ojd1my] {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
    border-radius: 10px;
    padding: 0.5rem;
}

.pt-list-nav[b-gn91ojd1my] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pt-list-nav__btn[b-gn91ojd1my] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
}

.pt-list-nav__btn:hover[b-gn91ojd1my] {
    background: var(--bg-page);
}

.pt-list-nav__btn.is-active[b-gn91ojd1my] {
    background: var(--brand-primary);
    color: var(--brand-white);
}

.pt-list-nav__btn.is-active .text-muted[b-gn91ojd1my] {
    color: var(--brand-white);
    opacity: 0.85;
}

.pt-list-nav__title[b-gn91ojd1my] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Detail ── */
.pt-detail[b-gn91ojd1my] {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
    border-radius: 10px;
    padding: 1.25rem;
}

.pt-detail__header[b-gn91ojd1my] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
    padding-bottom: 0.75rem;
}

.pt-detail__title[b-gn91ojd1my] {
    margin: 0;
    font-size: 1.25rem;
}

.pt-detail__desc[b-gn91ojd1my] {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
}

/* Deadline line under the title: icon + date + countdown chip on one baseline. */
.pt-detail__due[b-gn91ojd1my] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.35rem 0 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.pt-due-field[b-gn91ojd1my] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* A date picker doesn't need the full width of the form. */
.pt-due-input[b-gn91ojd1my] {
    max-width: 190px;
}

.pt-detail__actions[b-gn91ojd1my] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Overall list progress (shared .progress-bar-* pattern from app.css) ── */
.pt-overall[b-gn91ojd1my] {
    margin-bottom: 1rem;
}

/* ── Items ──
   Each item uses the shared .collapsible-section pattern (same as /admin/users
   grouping) for the highlighted header + chevron. Actions can't nest inside the
   header button, so they sit as a flex sibling (see .pt-item__headrow), mirroring
   the .hb-html-doc__headrow approach in app.css. */
.pt-items[b-gn91ojd1my] {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}

/* Completed items recede: a darker/recessed surface + muted title so the eye
   skips past the work that's already done. */
.pt-item--done[b-gn91ojd1my] {
    background: var(--bg-page);
}

.pt-item--done .collapsible-section__title[b-gn91ojd1my] {
    color: var(--text-secondary);
}

/* Header button + per-item actions share one row; the header takes the slack. */
.pt-item__headrow[b-gn91ojd1my] {
    display: flex;
    align-items: center;
}

.pt-item__headrow .collapsible-section__header[b-gn91ojd1my] {
    flex: 1 1 auto;
    min-width: 0;
}

.pt-item__actions[b-gn91ojd1my] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    padding-right: 0.75rem;
}

.pt-item__desc[b-gn91ojd1my] {
    margin: 0 0 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ── Assignees ── */
.pt-assignee-picker__grid[b-gn91ojd1my] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.35rem;
    margin-bottom: 0.65rem;
}

.pt-assignee-option[b-gn91ojd1my] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

.pt-assignee-table[b-gn91ojd1my] {
    width: 100%;
}

/* Compact rows: tighten the standard data-table padding for a denser report. */
.pt-assignee-table th[b-gn91ojd1my],
.pt-assignee-table td[b-gn91ojd1my] {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

/* Whole row is the edit affordance — no separate Edit button. */
.pt-assignee-row[b-gn91ojd1my] {
    cursor: pointer;
}

.pt-assignee-row:hover[b-gn91ojd1my] {
    background: var(--bg-page);
}

.pt-assignee-row--editing[b-gn91ojd1my] {
    cursor: default;
}

/* Fixed-width leading column so every progress bar lines up at the same size. */
.pt-col-progress[b-gn91ojd1my] {
    width: 170px;
}

.pt-progress[b-gn91ojd1my] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pt-progress .progress-mini[b-gn91ojd1my] {
    flex: 1;
}

.pt-notes-cell[b-gn91ojd1my] {
    white-space: pre-wrap;
    max-width: 360px;
}

/* Right-align the timestamp and use tabular figures so the digits sit in a
   fixed-width grid — dates line up cleanly down the column. */
.pt-col-updated[b-gn91ojd1my] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* The cell values benefit most from the monospaced digits. */
td.pt-col-updated[b-gn91ojd1my] {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.pt-percent-input[b-gn91ojd1my] {
    width: 80px;
}

/* ── Forms ── */
.pt-edit-form[b-gn91ojd1my] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.pt-edit-form--grow[b-gn91ojd1my] {
    flex: 1;
}

/* ── Items toolbar (heading + expand/collapse all + Add Item) ── */
.pt-items-toolbar[b-gn91ojd1my] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.pt-items-toolbar__left[b-gn91ojd1my] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pt-items-toolbar__title[b-gn91ojd1my] {
    margin: 0;
    font-size: 1rem;
}

.pt-items-toolbar__action[b-gn91ojd1my] {
    color: var(--text-tertiary);
}

.pt-items-toolbar__action:hover[b-gn91ojd1my] {
    color: var(--brand-primary);
}

/* "14 remaining" — the at-a-glance answer the x/y count makes you do in your head. */
.pt-items-toolbar__remaining[b-gn91ojd1my] {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Export dialog: format radios stack vertically (labels are full sentences). */
.pt-export-formats[b-gn91ojd1my] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
/* /Components/Pages/Admin/ReleaseNotes.razor.rz.scp.css */
/* Page layout handled by global .page-wrap and .page-header in app.css */

/* Date cell */
.rn-date[b-k2d1c2e1hn] {
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

[b-k2d1c2e1hn] .rn-date__icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.25rem;
    color: var(--text-tertiary);
}

/* Description cell */
.rn-description[b-k2d1c2e1hn] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Optional label hint */
.form-label-hint[b-k2d1c2e1hn] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-tertiary);
}

/* Full-width form field */
.form-field--full[b-k2d1c2e1hn] {
    width: 100%;
}

/* Textarea */
.rn-textarea[b-k2d1c2e1hn] {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

/* Buttons and dialog styles are now in app.css (.btn-danger, .btn-sm, .dialog-*) */
/* /Components/Pages/Admin/SolutionSync.razor.rz.scp.css */
.page-intro[b-113n2chbso] {
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
}

.sync-controls[b-113n2chbso] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.sync-controls__field[b-113n2chbso] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* .form-control is full-width by default; keep the run picker to a sensible size in the bar. */
.sync-run-select[b-113n2chbso] {
    width: auto;
    min-width: 22rem;
    max-width: 100%;
}

.sync-controls__label[b-113n2chbso] {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

/* Sits beside the run picker; nudge up so the icon/confirm aligns with the select box. */
.sync-controls__delete[b-113n2chbso] {
    display: flex;
    align-items: center;
    padding-bottom: 0.3rem;
}

.sync-controls__toggle[b-113n2chbso] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.sync-running-note[b-113n2chbso] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle, var(--bg-sidebar));
    border-radius: 0.5rem;
    color: var(--text-secondary);
}

.sync-running-note__spinner[b-113n2chbso] {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
}

.sync-unverified[b-113n2chbso] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--clr-warning-bg);
    color: var(--clr-warning-fg);
    border-radius: 0.5rem;
}

.sync-unverified__icon[b-113n2chbso] {
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.sync-unverified__projects[b-113n2chbso] {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.sync-unverified__action[b-113n2chbso] {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.sync-bulk[b-113n2chbso] {
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle, var(--bg-sidebar));
    border-radius: 0.5rem;
}

.sync-bulk__label[b-113n2chbso] {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.sync-bulk__types[b-113n2chbso] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sync-bulk__type .btn[b-113n2chbso] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.sync-bulk__result[b-113n2chbso] {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.sync-bulk__failures[b-113n2chbso] {
    margin-top: 0.4rem;
    color: var(--clr-warning-fg);
}

.sync-bulk__failures ul[b-113n2chbso] {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
}

.sync-force-fail[b-113n2chbso] {
    margin-top: 0.6rem;
}

.sync-summary[b-113n2chbso] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.sync-summary__stat[b-113n2chbso] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 5rem;
    padding: 0.6rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle, var(--bg-sidebar));
    border-radius: 0.5rem;
}

.sync-summary__num[b-113n2chbso] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* A duration ("3m 12s") is far wider than the counts, so it gets a smaller size to keep the tile
   row from stretching. */
.sync-summary__num--text[b-113n2chbso] {
    font-size: 1.1rem;
    white-space: nowrap;
}

.sync-summary__lbl[b-113n2chbso] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.sync-repo[b-113n2chbso] {
    margin-bottom: 1.5rem;
}

.sync-repo__head[b-113n2chbso] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

/* Keep the repo name and its external-repo icon tight together, separate from the project. */
.sync-repo__title[b-113n2chbso] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sync-repo__name[b-113n2chbso] {
    font-weight: 600;
    color: var(--text-primary);
}

.sync-repo__link[b-113n2chbso] {
    text-decoration: none;
}

.sync-repo__link:hover[b-113n2chbso] {
    color: var(--brand-primary);
    text-decoration: underline;
}

.sync-repo__repo[b-113n2chbso] {
    display: inline-flex;
    align-items: center;
    color: var(--text-tertiary);
    transition: color 0.15s ease;
}

.sync-repo__repo:hover[b-113n2chbso] {
    color: var(--brand-primary);
}

.sync-repo__project[b-113n2chbso] {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

/* Marks a repo whose scan came back incomplete — its "removed" rows may be artifacts. */
.sync-repo__incomplete[b-113n2chbso] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--clr-warning-bg);
    color: var(--clr-warning-fg);
    border-radius: 0.25rem;
    white-space: nowrap;
}

.sync-bulk__risk[b-113n2chbso] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.35rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--clr-warning-bg);
    color: var(--clr-warning-fg);
    border-radius: 0.25rem;
    white-space: nowrap;
}

.sync-bulk__warn[b-113n2chbso] {
    display: block;
    margin: 0.25rem 0;
    color: var(--clr-warning-fg);
}

.sync-bulk__skip[b-113n2chbso] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.sync-bulk__note[b-113n2chbso] {
    display: block;
    margin: 0.25rem 0;
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.sync-cell[b-113n2chbso] {
    max-width: 26rem;
    overflow-wrap: anywhere;
    color: var(--text-secondary);
}

.sync-cell--old[b-113n2chbso] {
    color: var(--clr-critical-fg, var(--text-secondary));
}

.sync-cell--new[b-113n2chbso] {
    color: var(--clr-info-fg, var(--text-primary));
}

.sync-row--resolved[b-113n2chbso] {
    opacity: 0.55;
}

.sync-actions[b-113n2chbso] {
    display: flex;
    gap: 0.35rem;
}

/* Accept: constructive action, tinted to read distinctly from the danger dismiss button. */
.sync-accept[b-113n2chbso] {
    color: var(--clr-info-fg, var(--brand-primary));
}

.sync-resolved-tag[b-113n2chbso] {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.sync-resolved-tag--applied[b-113n2chbso] {
    color: var(--clr-info-fg, var(--text-secondary));
    font-weight: 600;
}

.sync-badge[b-113n2chbso] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--bg-sidebar);
    color: var(--text-secondary);
}

.sync-badge--new[b-113n2chbso] {
    background: var(--clr-info-bg);
    color: var(--clr-info-fg);
}

.sync-badge--missing[b-113n2chbso] {
    background: var(--clr-critical-bg);
    color: var(--clr-critical-fg);
}

.sync-badge--renamed[b-113n2chbso] {
    background: var(--clr-warning-bg);
    color: var(--clr-warning-fg);
}

.sync-badge--added[b-113n2chbso] {
    background: var(--clr-info-bg);
    color: var(--clr-info-fg);
}

.sync-badge--removed[b-113n2chbso] {
    background: var(--clr-warning-bg);
    color: var(--clr-warning-fg);
}
/* /Components/Pages/Admin/Users.razor.rz.scp.css */
/* Page layout handled by global .page-wrap and .page-header in app.css */

/* Table */
/* Styles live in app.css under DATA TABLE (.data-table, .data-table__actions, etc.) */

/* Buttons and dialog styles are now in app.css (.btn-danger, .btn-sm, .dialog-*) */

/* Filter pills are now in app.css (.filter-pills, .filter-pill) */

/* ── Copy filtered users ─────────────────────────────────── */

.users-page-header[b-eqtho85d2q] {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.users-page-header__actions[b-eqtho85d2q] {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.users-copy-format[b-eqtho85d2q] {
    width: auto;
    max-width: min(17rem, 100%);
}

/* ── Role checkboxes in edit dialog ────────────────────────── */

.role-checkboxes[b-eqtho85d2q] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-top: 0.25rem;
}

/* Help line under the "Exempt from daily check-ins" checkbox. */
.exempt-help[b-eqtho85d2q] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-tertiary);
}

/* ── Private birthday indicators ───────────────────────────── */

.private-pill[b-eqtho85d2q] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.4rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.reveal-btn[b-eqtho85d2q] {
    margin-right: 0.35rem;
    vertical-align: middle;
}

.masked-text[b-eqtho85d2q] {
    color: var(--text-tertiary);
    font-style: italic;
    letter-spacing: 0.05em;
}
/* /Components/Pages/Admin/WorkflowTasks.razor.rz.scp.css */
.wft-list[b-rmt64pfbrn] {
    list-style: none;
    margin: 1rem 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wft-row[b-rmt64pfbrn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
    border-left: 3px solid var(--clr-warning-text);
}

/* Fully followed-up rows stay in the list but stop asking for attention. */
.wft-row--handled[b-rmt64pfbrn] {
    border-left-color: var(--clr-success-text);
}

.wft-row__main[b-rmt64pfbrn] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.wft-row__item[b-rmt64pfbrn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-weight: 600;
    color: var(--text-primary);
}

.wft-row__link[b-rmt64pfbrn] {
    color: var(--brand-primary);
    text-decoration: none;
}

.wft-row__link:hover[b-rmt64pfbrn] {
    text-decoration: underline;
}

.wft-row__title[b-rmt64pfbrn] {
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.wft-row__meta[b-rmt64pfbrn] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.wft-row__sep[b-rmt64pfbrn] {
    margin: 0 0.25rem;
}

.wft-row__tasks[b-rmt64pfbrn] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.wft-task[b-rmt64pfbrn] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.wft-task__label[b-rmt64pfbrn] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
}

.wft-task__by[b-rmt64pfbrn],
.wft-task__notes[b-rmt64pfbrn] {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    padding-left: 1.5rem;
}

.wft-task__notes[b-rmt64pfbrn] {
    font-style: italic;
}

@media (max-width: 640px) {
    .wft-row[b-rmt64pfbrn] {
        align-items: flex-start;
    }

    .wft-row__tasks[b-rmt64pfbrn] {
        gap: 0.75rem;
    }
}
/* /Components/Pages/Alerts.razor.rz.scp.css */
.alerts-filter-row[b-ltu95ag9tu] {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    flex-wrap: wrap;
}

.alerts-filter-pill[b-ltu95ag9tu] {
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.alerts-filter-pill:hover[b-ltu95ag9tu] {
    background: var(--nav-hover-bg);
    color: var(--text-primary);
}

.alerts-filter-pill.is-active[b-ltu95ag9tu] {
    background: var(--brand-primary);
    color: var(--brand-white);
    border-color: var(--brand-primary);
}

.alerts-list[b-ltu95ag9tu] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--bg-card);
}

.alerts-list > li:last-child[b-ltu95ag9tu]  .alert-row {
    border-bottom: none;
}

.alerts-paging[b-ltu95ag9tu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    justify-content: flex-end;
}

.alerts-paging__info[b-ltu95ag9tu] {
    color: var(--text-secondary);
    font-size: 0.8125rem;
}
/* /Components/Pages/Budget/BudgetForecast.razor.rz.scp.css */
/* Page layout handled by global .page-wrap and .page-header in app.css.
   Tables use the global .data-table; dialogs the global .dialog-*; inline delete
   confirm the global .confirm-delete; quantity spinners the global .number-input. */

.bf-year-picker[b-0s15m6gerv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bf-year-picker__label[b-0s15m6gerv] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.bf-year-picker__select[b-0s15m6gerv] {
    width: auto;
}

/* ── Summary tiles ── */

.bf-summary[b-0s15m6gerv] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

/* Wide screens only: the summary tiles ride along under the sticky page header so the totals
   stay visible while editing far down the page (offset per TrainingModuleAuthor's toolbar).
   Narrow screens skip it — the wrapped tiles would eat too much viewport. */
@media (min-width: 900px) {
    .bf-summary[b-0s15m6gerv] {
        position: sticky;
        top: calc(var(--header-height) + 3.75rem);
        z-index: 9980; /* under the page header's 9990 */
        background: var(--bg-page);
        padding-bottom: 0.5rem;
        margin-bottom: 0.75rem;
    }
}

.bf-tile[b-0s15m6gerv] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card, var(--bg-page));
}

.bf-tile--highlight[b-0s15m6gerv] {
    border-color: var(--brand-primary);
}

.bf-tile__label[b-0s15m6gerv] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.bf-tile__value[b-0s15m6gerv] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* ── Money colors ── */

.bf-money--over[b-0s15m6gerv] {
    color: var(--clr-over-capacity);
}

.bf-money--ok[b-0s15m6gerv] {
    color: var(--clr-success-text);
}

.bf-fill--over[b-0s15m6gerv] {
    background: var(--clr-over-capacity);
}

/* ── Accounts table ── */

.bf-col-expand[b-0s15m6gerv] {
    width: 32px;
}

.bf-col-money[b-0s15m6gerv] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bf-col-bar[b-0s15m6gerv] {
    width: 120px;
}

.bf-account-name[b-0s15m6gerv] {
    font-weight: 600;
}

.bf-account-row[b-0s15m6gerv] {
    cursor: pointer;
}

/* Note affordances: a muted icon whose title carries the text, and the full note shown
   at the top of the expanded panel. */
.bf-note-icon[b-0s15m6gerv] {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0.35rem;
    color: var(--text-tertiary);
}

.bf-account-note[b-0s15m6gerv] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.bf-account-note[b-0s15m6gerv]  svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--text-tertiary);
}

.bf-name-wrap[b-0s15m6gerv] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.bf-name-wrap input[b-0s15m6gerv] {
    flex: 1 1 auto;
}

.bf-name-wrap .bf-note-icon[b-0s15m6gerv] {
    margin-left: 0;
}

.bf-ledger[b-0s15m6gerv] {
    color: var(--text-secondary);
    white-space: nowrap;
}

[b-0s15m6gerv] .bf-chevron {
    transition: transform 0.15s ease;
}

[b-0s15m6gerv] .bf-chevron--open {
    transform: rotate(180deg);
}

.bf-detail-row > td[b-0s15m6gerv] {
    background: var(--bg-inset, var(--bg-page));
    padding: 1rem 1.25rem;
}

.bf-detail[b-0s15m6gerv] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.bf-panel[b-0s15m6gerv] {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1.25rem;
}

.bf-detail .bf-panel[b-0s15m6gerv] {
    margin-bottom: 0;
    background: var(--bg-page);
}

/* ── Sections inside an expanded account ── */

.bf-section__header[b-0s15m6gerv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.bf-section__title[b-0s15m6gerv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin: 0 0 0.5rem;
}

.bf-hint[b-0s15m6gerv] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin: 0 0 0.5rem;
}

/* ── Line item editor ── */
/* Single-line rows: the amount hint and per-engineer toggle sit beside their inputs, not
   under them, and cell padding is tighter than the .data-table default so a handful of
   items doesn't fill the screen. */

.bf-items td[b-0s15m6gerv] {
    padding: 0.3rem 0.5rem;
}

/* Zebra striping so the eye can track a row across to its delete button. --bg-card vs the
   dedicated --table-stripe-bg token — a deliberately higher-contrast pair than the near-identical
   bg-page/bg-inset family. Hover must NOT swap the background (that made the hovered row look
   like the other stripe); it draws a brand-colored top/bottom rule through the row instead, so
   the stripe stays put and the hovered row is unmistakable. */
.bf-items tbody tr:nth-child(odd) td[b-0s15m6gerv] {
    background: var(--bg-card);
}

.bf-items tbody tr:nth-child(even) td[b-0s15m6gerv] {
    background: var(--table-stripe-bg);
}

.bf-items tbody tr:hover td[b-0s15m6gerv] {
    box-shadow: inset 0 1px 0 0 var(--brand-primary), inset 0 -1px 0 0 var(--brand-primary);
}

.bf-items input.form-control[b-0s15m6gerv],
.bf-items select.form-control[b-0s15m6gerv] {
    min-width: 0;
}

.bf-item-name[b-0s15m6gerv] {
    min-width: 200px;
}

/* Inline beside the per-engineer checkbox so the row stays one line tall. */
.bf-per-eng-note[b-0s15m6gerv] {
    display: inline;
    margin-left: 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.bf-drift[b-0s15m6gerv] {
    border: none;
    background: none;
    padding: 0;
    margin-left: 0.35rem;
    font-size: 0.6875rem;
    color: var(--clr-warning-text);
    text-decoration: underline;
    cursor: pointer;
}

.bf-amount-cell[b-0s15m6gerv] {
    white-space: nowrap;
}

.bf-amount-input[b-0s15m6gerv] {
    width: 110px;
    text-align: right;
    vertical-align: middle;
}

.bf-amount-hint[b-0s15m6gerv] {
    display: inline;
    margin-left: 0.4rem;
    font-size: 0.625rem;
    color: var(--text-tertiary);
}

.bf-qty-cell[b-0s15m6gerv] {
    white-space: nowrap;
}

.bf-qty[b-0s15m6gerv] {
    width: 90px;
    display: inline-block;
    vertical-align: middle;
}

.bf-per-eng[b-0s15m6gerv] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.5rem;
    vertical-align: middle;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.bf-items-footer[b-0s15m6gerv] {
    margin-top: 0.5rem;
}

/* ── Copy-forward empty state ── */

.bf-copy-year[b-0s15m6gerv] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.bf-copy-year .bf-hint[b-0s15m6gerv] {
    margin: 0;
    max-width: 560px;
}

/* ── Export dialog options ── */

.bf-export-option[b-0s15m6gerv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}

.bf-months-cell[b-0s15m6gerv] {
    white-space: nowrap;
}

.bf-months-cell select[b-0s15m6gerv] {
    display: inline-block;
    width: auto;
}

.bf-months-sep[b-0s15m6gerv] {
    margin: 0 0.25rem;
    color: var(--text-tertiary);
}

.bf-per-head[b-0s15m6gerv] {
    margin: 0.6rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* ── Month strip ── */

.bf-months-table th.bf-month-rowlabel[b-0s15m6gerv] {
    text-align: left;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.bf-month-col[b-0s15m6gerv] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    min-width: 84px;
}

.bf-month-col--future[b-0s15m6gerv] {
    color: var(--text-tertiary);
}

.bf-month-col--empty[b-0s15m6gerv] {
    color: var(--text-tertiary);
    text-align: center;
}

.bf-actual-input[b-0s15m6gerv] {
    width: 80px;
    text-align: right;
}

/* ── Anniversaries ── */

.bf-anniversaries[b-0s15m6gerv] {
    margin-top: 1.5rem;
}

.bf-anniv-title[b-0s15m6gerv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.bf-anniv-table[b-0s15m6gerv] {
    max-width: 560px;
}

.bf-anniv-cost[b-0s15m6gerv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.bf-lunch-input[b-0s15m6gerv] {
    width: 90px;
    text-align: right;
}

.bf-anniv-total strong[b-0s15m6gerv] {
    color: var(--text-primary);
}

.bf-anniv-add[b-0s15m6gerv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.bf-anniv-add__select[b-0s15m6gerv] {
    width: auto;
    max-width: 260px;
}

.bf-anniv-add .bf-hint[b-0s15m6gerv] {
    margin: 0;
}
/* /Components/Pages/Budget/BudgetYearChart.razor.rz.scp.css */
/* Flexbox-div chart (WeeklyGantt approach) — colors are app.css tokens only. */

.bychart[b-chm23yrvm0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bychart__toolbar[b-chm23yrvm0] {
    display: flex;
    justify-content: flex-end;
}

.bychart__plot-wrap[b-chm23yrvm0] {
    min-width: 420px;
}

.bychart__plot[b-chm23yrvm0] {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 120px;
    /* Label room as MARGIN, not padding: the reference line's bottom-% and the bars' height-%
       must resolve against the same box, or the line rides ~13px higher than the bars' scale
       and a bar that is genuinely over budget renders below the line. The label overflows
       into the margin. */
    margin-top: 0.9rem;
    border-bottom: 1px solid var(--border-color);
}

.bychart__col[b-chm23yrvm0] {
    position: relative;
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}

/* Monthly mode: each column's own budget mark, sharing the bars' coordinate frame so
   bar-above-tick always agrees with the verdict color. */
.bychart__tick[b-chm23yrvm0] {
    position: absolute;
    left: 8%;
    right: 8%;
    border-top: 2px dashed var(--text-tertiary);
    z-index: 1;
    pointer-events: none;
}

.bychart__bar[b-chm23yrvm0] {
    width: 70%;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    transition: height 0.3s ease;
}

.bychart__bar--actual[b-chm23yrvm0] {
    background: var(--clr-progress-default);
}

.bychart__bar--under[b-chm23yrvm0] {
    background: var(--clr-success-icon);
}

.bychart__bar--over[b-chm23yrvm0] {
    background: var(--clr-over-capacity);
}

.bychart__bar--planned[b-chm23yrvm0] {
    background: transparent;
    border: 1px dashed var(--clr-progress-default);
    border-bottom: none;
    opacity: 0.75;
}

/* Cumulative mode: a future (dashed) month whose running total has crossed the annual
   budget goes red — the crossing is a color signal, not a two-pixel height difference. */
.bychart__bar--planned.bychart__bar--crossed[b-chm23yrvm0] {
    border-color: var(--clr-over-capacity);
    opacity: 0.9;
}

/* Partial months: verdict color striped with the no-actual blue — some accounts typed,
   the rest still standing in as plan. */
.bychart__bar--under.bychart__bar--partial[b-chm23yrvm0] {
    background: repeating-linear-gradient(
        45deg,
        var(--clr-success-icon) 0 6px,
        var(--clr-progress-default) 6px 12px);
}

.bychart__bar--over.bychart__bar--partial[b-chm23yrvm0] {
    background: repeating-linear-gradient(
        45deg,
        var(--clr-over-capacity) 0 6px,
        var(--clr-progress-default) 6px 12px);
}

.bychart__reference[b-chm23yrvm0] {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--text-tertiary);
    z-index: 1;
    pointer-events: none;
}

.bychart__reference-label[b-chm23yrvm0] {
    position: absolute;
    right: 0;
    bottom: 2px;
    font-size: 0.625rem;
    color: var(--text-tertiary);
    background: var(--bg-page);
    padding-left: 0.25rem;
}

.bychart__labels[b-chm23yrvm0] {
    display: flex;
    gap: 4px;
}

.bychart__month[b-chm23yrvm0] {
    flex: 1 1 0;
    text-align: center;
    font-size: 0.625rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bychart__legend[b-chm23yrvm0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.6875rem;
    color: var(--text-secondary);
}

.bychart__legend-item[b-chm23yrvm0] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.bychart__swatch[b-chm23yrvm0] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.bychart__swatch--actual[b-chm23yrvm0] {
    background: var(--clr-progress-default);
}

.bychart__swatch--under[b-chm23yrvm0] {
    background: var(--clr-success-icon);
}

.bychart__swatch--over[b-chm23yrvm0] {
    background: var(--clr-over-capacity);
}

.bychart__swatch--planned[b-chm23yrvm0] {
    background: transparent;
    border: 1px dashed var(--clr-progress-default);
}

.bychart__swatch--partial[b-chm23yrvm0] {
    background: repeating-linear-gradient(
        45deg,
        var(--clr-success-icon) 0 3px,
        var(--clr-progress-default) 3px 6px);
}

.bychart__swatch--crossed[b-chm23yrvm0] {
    background: transparent;
    border: 1px dashed var(--clr-over-capacity);
}

.bychart__swatch--tick[b-chm23yrvm0] {
    background: transparent;
    height: 0;
    border-top: 2px dashed var(--text-tertiary);
    align-self: center;
}
/* /Components/Pages/CheckIns/CheckInEditor.razor.rz.scp.css */
.ci-editor[b-wu4ahakrkd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ci-editor__hours[b-wu4ahakrkd] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

/* Fixed, content-sized boxes rather than flex: 1 1 0 — an hours field only ever holds something
   like "7.5", and stretching two of them across the /check-ins edit row looked like a mistake.
   Matches the capped Location toggle above. */
.ci-editor__hours .ci-editor__field[b-wu4ahakrkd] {
    flex: 0 0 auto;
    width: 7rem;
    min-width: 0;
}

.ci-editor__field[b-wu4ahakrkd] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ci-editor__field--full[b-wu4ahakrkd] {
    grid-column: 1 / -1;
}

.ci-editor__label[b-wu4ahakrkd] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.ci-editor__required[b-wu4ahakrkd] {
    color: var(--clr-invalid);
    margin-left: 0.125rem;
}

.ci-editor__input[b-wu4ahakrkd],
.ci-editor__textarea[b-wu4ahakrkd] {
    appearance: none;
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.2));
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
}

.ci-editor__input:focus[b-wu4ahakrkd],
.ci-editor__textarea:focus[b-wu4ahakrkd] {
    outline: 2px solid var(--brand-primary);
    outline-offset: 0;
    border-color: transparent;
}

.ci-editor__textarea[b-wu4ahakrkd] {
    resize: none;
    min-height: 2.5rem;
    max-height: 12rem;
    field-sizing: content;
    overflow-y: auto;
}

/* Keep .seg-toggle--4's equal-quarters flex layout — the sliding indicator is 25% wide and
   translates by whole multiples, so unequal option widths would leave it misaligned — but cap
   the overall width. Without this the toggle stretches to the container, which is the full table
   width inside the /check-ins inline edit row. */
.ci-editor .seg-toggle--4[b-wu4ahakrkd] {
    max-width: 26rem;
}

.ci-editor__field--reason[b-wu4ahakrkd] {
    max-width: 12rem;
}

/* .ci-editor__input sets appearance: none, which strips a select's dropdown arrow. Put it back —
   without the affordance this reads as a disabled text box. */
.ci-editor__select[b-wu4ahakrkd] {
    appearance: auto;
}

.ci-editor__optional[b-wu4ahakrkd] {
    font-weight: 400;
    color: var(--text-tertiary);
    margin-left: 0.25rem;
}

/* The live region is always in the DOM (see the component comment). Collapse it while empty so
   it doesn't spend one of .ci-editor's row gaps on nothing. */
.ci-editor__approval-region[b-wu4ahakrkd] {
    display: flex;
}

.ci-editor__approval-region:empty[b-wu4ahakrkd] {
    display: none;
}

.ci-editor__approval[b-wu4ahakrkd] {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
    border: 1px solid var(--clr-warning-border);
}

/* app.css resets every anchor to `text-decoration: none; color: inherit`, so a link inside the
   warning reads as plain text. Underline + weight (rather than --link-color) is deliberate: the
   warning surface is amber in light mode and near-black-amber in dark, and a blue link on either
   loses contrast. Keeping the inherited warning color guarantees legibility on both. */
.ci-editor__approval-link[b-wu4ahakrkd] {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ci-editor__approval-link:hover[b-wu4ahakrkd] {
    text-decoration-thickness: 2px;
}

.ci-editor__approval-link:focus-visible[b-wu4ahakrkd] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ::deep — the svg belongs to the <Icon /> child component, so it carries Icon's scope id,
   not this component's. */
.ci-editor__approval[b-wu4ahakrkd]  svg {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.ci-editor__error[b-wu4ahakrkd] {
    color: var(--clr-invalid);
    font-size: 0.8125rem;
    margin: 0;
}

.ci-editor__actions[b-wu4ahakrkd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ci-editor__hint[b-wu4ahakrkd] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.ci-editor__loading[b-wu4ahakrkd] {
    height: 4rem;
}

.ci-editor__excused[b-wu4ahakrkd] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
}

.ci-editor__excused-msg[b-wu4ahakrkd] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ci-editor__excused-sub[b-wu4ahakrkd] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
/* /Components/Pages/CheckIns/CheckInHistory.razor.rz.scp.css */
/* Mirrors the day picker on /check-ins/team — same shape, month granularity. */
.cih-nav[b-5ahd2lp2cf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.cih-nav__picker[b-5ahd2lp2cf] {
    appearance: none;
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.25));
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
}

.cih-nav__picker:focus[b-5ahd2lp2cf] {
    outline: 2px solid var(--brand-primary);
    outline-offset: 0;
    border-color: transparent;
}

.cih-nav__label[b-5ahd2lp2cf] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cih-summary[b-5ahd2lp2cf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.cih-summary__stat[b-5ahd2lp2cf] {
    background: var(--bg-subsection);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
    border-radius: 10px;
    padding: 0.75rem 1rem;
    box-shadow: var(--shadow-sm);
}

.cih-summary__label[b-5ahd2lp2cf] {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cih-summary__value[b-5ahd2lp2cf] {
    margin: 0.25rem 0 0;
    font-size: 1.375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cih-summary__value--success[b-5ahd2lp2cf] {
    color: var(--clr-success-text);
}

.cih-summary__value--info[b-5ahd2lp2cf] {
    color: var(--clr-info-text);
}

.cih-summary__value--warn[b-5ahd2lp2cf] {
    color: var(--clr-warning-text);
}
/* /Components/Pages/CheckIns/CheckInHistoryTable.razor.rz.scp.css */
.ci-history[b-u6gxu43nlz] {
    background: var(--bg-card);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.ci-history__table[b-u6gxu43nlz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ci-history__table th[b-u6gxu43nlz],
.ci-history__table td[b-u6gxu43nlz] {
    text-align: left;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--border-default, rgba(128, 128, 128, 0.12));
    vertical-align: middle;
}

.ci-history__table thead th[b-u6gxu43nlz] {
    background: var(--bg-inset, rgba(128, 128, 128, 0.06));
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ci-history__date[b-u6gxu43nlz] {
    font-weight: 600;
    white-space: nowrap;
}

.ci-history__row--missing[b-u6gxu43nlz] {
    background: var(--clr-warning-bg);
}

.ci-history__row--missing td[b-u6gxu43nlz],
.ci-history__row--missing th[b-u6gxu43nlz] {
    color: var(--clr-warning-text);
}

/* Block, because a day can carry two note lines (absence note + check-in note) that must stack. */
.ci-history__note[b-u6gxu43nlz] {
    display: block;
    color: var(--text-secondary);
    max-width: 24rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ci-history__note + .ci-history__note[b-u6gxu43nlz] {
    margin-top: 0.25rem;
}

.ci-history__col-actions[b-u6gxu43nlz] {
    width: 7rem;
    text-align: right;
}

/* The stacked note row only exists for narrow viewports. */
.ci-history__note-row[b-u6gxu43nlz] {
    display: none;
}

.ci-history__note-row .ci-history__note[b-u6gxu43nlz] {
    display: block;
    max-width: none;
}

.ci-history__note-label[b-u6gxu43nlz] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    margin-bottom: 0.125rem;
}

.ci-history__readonly[b-u6gxu43nlz] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.ci-history__edit-row > td[b-u6gxu43nlz] {
    background: var(--bg-inset, rgba(128, 128, 128, 0.04));
    padding: 1rem;
}

/* Tighter than the global .btn-sm — the Edit button sits inside a dense table row. */
.btn-sm[b-u6gxu43nlz] {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
}

/*
 * Narrow viewports: the Note column squeezes to one word per line, so drop it out of the
 * main row and give it a full-width row of its own directly underneath.
 */
@media (max-width: 1000px) {
    .ci-history__col-note[b-u6gxu43nlz] {
        display: none;
    }

    .ci-history__note-row[b-u6gxu43nlz] {
        display: table-row;
    }

    .ci-history__row--has-note > th[b-u6gxu43nlz],
    .ci-history__row--has-note > td[b-u6gxu43nlz] {
        border-bottom: none;
        padding-bottom: 0.25rem;
    }

    .ci-history__note-row > td[b-u6gxu43nlz] {
        padding-top: 0;
    }
}
/* /Components/Pages/CheckIns/CheckIns.razor.rz.scp.css */
/*
 * The history table's styles live with the component that renders it
 * (CheckInHistoryTable.razor.css) — scoped CSS does not reach into child components, so they
 * have to travel with the markup. This page is header + component and needs nothing else.
 */
/* /Components/Pages/CheckIns/CheckInsTeam.razor.rz.scp.css */
.date-nav[b-q8cz95cukj] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.date-nav__picker[b-q8cz95cukj] {
    appearance: none;
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.25));
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
}

.date-nav__picker:focus[b-q8cz95cukj] {
    outline: 2px solid var(--brand-primary);
    outline-offset: 0;
    border-color: transparent;
}

.date-nav__label[b-q8cz95cukj] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.team-tiles[b-q8cz95cukj] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (max-width: 800px) {
    .team-tiles[b-q8cz95cukj] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.team-tile[b-q8cz95cukj] {
    appearance: none;
    text-align: left;
    font: inherit;
    background: var(--bg-subsection);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
    border-radius: 10px;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.team-tile:hover[b-q8cz95cukj] {
    border-color: var(--text-tertiary);
}

.team-tile:focus-visible[b-q8cz95cukj] {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.team-tile--active[b-q8cz95cukj] {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 1px var(--brand-primary), var(--shadow-sm);
}

.team-tile__label[b-q8cz95cukj] {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.team-tile__value[b-q8cz95cukj] {
    font-size: 1.375rem;
    font-weight: 700;
}

.team-tile__value--success[b-q8cz95cukj] {
    color: var(--clr-success-text);
}

.team-tile__value--warn[b-q8cz95cukj] {
    color: var(--clr-warning-text);
}

.team-tile__value--info[b-q8cz95cukj] {
    color: var(--clr-info-text);
}

.team-tile__value--critical[b-q8cz95cukj] {
    color: var(--clr-over-capacity);
}

/* Single-engineer focus banner — occupies the status tiles' slot while a focus is set. */
.team-focus[b-q8cz95cukj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    background: var(--bg-subsection);
    border: 1px solid var(--brand-primary);
    border-radius: 10px;
    padding: 0.625rem 0.875rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}

.team-focus__label[b-q8cz95cukj] {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.team-focus__name[b-q8cz95cukj] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-right: auto;
}

/*
 * The engineer name doubles as the drill-in toggle. Quiet by default so a dozen blue links
 * don't shout down the table, revealing itself as a link on hover — the same treatment the
 * handbook row's folder-path anchors use.
 */
.team-table__name[b-q8cz95cukj] {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.team-table__name:hover[b-q8cz95cukj],
.team-table__name:focus-visible[b-q8cz95cukj] {
    color: var(--brand-primary);
    text-decoration: underline;
}

.team-table__name[aria-pressed="true"][b-q8cz95cukj] {
    font-weight: 600;
}

.team-row__pct[b-q8cz95cukj] {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.team-table__note[b-q8cz95cukj] {
    color: var(--text-secondary);
    max-width: 24rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* A day can carry two lines — the absence and the check-in note it was laid over. */
.team-table__note-line[b-q8cz95cukj] {
    display: block;
}

.team-table__note-line + .team-table__note-line[b-q8cz95cukj] {
    margin-top: 0.25rem;
}

/* The stacked note row only exists for narrow viewports. */
.team-table__note-row[b-q8cz95cukj] {
    display: none;
}

.team-table__note-row .team-table__note[b-q8cz95cukj] {
    display: block;
    max-width: none;
}

.team-table__note-label[b-q8cz95cukj] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    margin-bottom: 0.125rem;
}

/* A row and its note row are one record — hovering either lights both. */
.team-table__row--has-note:hover + .team-table__note-row > td[b-q8cz95cukj],
tr:has(+ .team-table__note-row:hover) > td[b-q8cz95cukj] {
    background: var(--nav-hover-bg);
}

/* A hidden note row is still :last-child, so the global rule stops clearing the final border. */
tbody tr:has(+ .team-table__note-row:last-child) > td[b-q8cz95cukj] {
    border-bottom: none;
}

.team-table__date[b-q8cz95cukj] {
    white-space: nowrap;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.team-table__col-actions[b-q8cz95cukj] {
    width: 9rem;
    text-align: right;
    white-space: nowrap;
}

.location-toggle[b-q8cz95cukj] {
    display: inline-flex;
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.25));
    border-radius: 6px;
    overflow: hidden;
}

.location-toggle__btn[b-q8cz95cukj] {
    appearance: none;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 0;
    padding: 0.25rem 0.6rem;
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.location-toggle__btn + .location-toggle__btn[b-q8cz95cukj] {
    border-left: 1px solid var(--border-default, rgba(128, 128, 128, 0.25));
}

.location-toggle__btn:hover:not(:disabled):not(.location-toggle__btn--active)[b-q8cz95cukj] {
    background: var(--bg-subsection);
    color: var(--text-primary);
}

.location-toggle__btn--active[b-q8cz95cukj] {
    background: var(--brand-primary);
    color: var(--brand-white);
}

.location-toggle__btn:disabled[b-q8cz95cukj] {
    cursor: default;
    opacity: 0.6;
}

.team-table__col-actions .btn-sm + .btn-sm[b-q8cz95cukj] {
    margin-left: 0.25rem;
}

/*
 * Narrow viewports: eleven columns leave the Note squeezed to one word per line, so drop it out
 * of the main row and give it a full-width row of its own directly underneath — the same
 * treatment the check-in history table uses, at a wider breakpoint because there are more
 * columns competing for the width.
 */
@media (max-width: 1700px) {
    .team-table__col-note[b-q8cz95cukj] {
        display: none;
    }

    .team-table__note-row[b-q8cz95cukj] {
        display: table-row;
    }

    .team-table__row--has-note > td[b-q8cz95cukj] {
        border-bottom: none;
        padding-bottom: 0.15rem;
    }

    .team-table__note-row > td[b-q8cz95cukj] {
        padding-top: 0;
    }
}
/* /Components/Pages/CheckIns/ExcuseDayDialog.razor.rz.scp.css */
.exd-sub[b-wsvihupqdr] {
    margin: 0 0 0.5rem 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.exd-sub__source[b-wsvihupqdr] {
    color: var(--text-tertiary);
}

/* .form-actions packs its children left, so pushing the destructive action's right margin out
   separates it from the Cancel/Save pair without a wrapper element. */
.exd-remove[b-wsvihupqdr] {
    margin-right: auto;
}

.exd-remove-hint[b-wsvihupqdr] {
    margin: 0.5rem 0 0 0;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}
/* /Components/Pages/CheckIns/SendRemindersDialog.razor.rz.scp.css */
.srd-status[b-i6z04fuskh] {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.srd-sub[b-i6z04fuskh] {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.srd-toolbar[b-i6z04fuskh] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.srd-toolbar__count[b-i6z04fuskh] {
    margin-right: auto;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.srd-list[b-i6z04fuskh] {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.2));
    border-radius: 0.375rem;
}

.srd-list__item[b-i6z04fuskh] {
    border-top: 1px solid var(--border-default, rgba(128, 128, 128, 0.1));
}

.srd-list__item:first-child[b-i6z04fuskh] {
    border-top: none;
}

.srd-person[b-i6z04fuskh] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
}

.srd-person:hover[b-i6z04fuskh] {
    background: var(--bg-page);
}

.srd-person__name[b-i6z04fuskh] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.srd-person__email[b-i6z04fuskh] {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}
/* /Components/Pages/CheckIns/TodaysCheckInCard.razor.rz.scp.css */
.tcc__date[b-znpabavv0q] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.tcc__header-meta[b-znpabavv0q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* "You are checked in!" success pill — mirrors the eligible-now pill on the Learning Sprint
   card so completion states across dashboard cards read with the same visual language. */
.tcc__status[b-znpabavv0q] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tcc__status--checked-in[b-znpabavv0q] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}
/* /Components/Pages/CheckIns/WeeklyComplianceCard.razor.rz.scp.css */
.wcc__sentence[b-1kh8ecen2p] {
    margin: 0.5rem 0 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.wcc__stats[b-1kh8ecen2p] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

/* One tile left when the hour totals are hidden — a third of the card is the right size for it;
   a full-width percent tile reads as a progress bar that isn't one. */
.wcc__stats--percent-only[b-1kh8ecen2p] {
    grid-template-columns: minmax(0, 10rem);
}

.wcc__stats--pair[b-1kh8ecen2p] {
    grid-template-columns: repeat(2, minmax(0, 10rem));
}

.wcc__stat[b-1kh8ecen2p] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.625rem;
    border-radius: 6px;
    background: var(--bg-inset, rgba(128, 128, 128, 0.06));
}

.wcc__stat-label[b-1kh8ecen2p] {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wcc__stat-value[b-1kh8ecen2p] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}
/* /Components/Pages/Dev/CollabRoundTripAudit.razor.rz.scp.css */
.audit-wrap[b-dbnc8yolv2] {
    padding: 1rem;
    max-width: 70rem;
    margin: 0 auto;
}

.audit-wrap h1[b-dbnc8yolv2] {
    font-size: 1.25rem;
    color: var(--text-primary);
}

.audit-intro[b-dbnc8yolv2],
.audit-progress[b-dbnc8yolv2] {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.audit-clean[b-dbnc8yolv2] {
    color: var(--text-primary);
    font-weight: 600;
}

.audit-entry[b-dbnc8yolv2] {
    margin: 0.5rem 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
}

.audit-entry summary[b-dbnc8yolv2] {
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
}

.audit-entry__meta[b-dbnc8yolv2] {
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

/* Key so additions/removals aren't conveyed by color alone (WCAG 1.4.1). */
.audit-entry__legend[b-dbnc8yolv2] {
    padding: 0.5rem 1rem 0;
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* The diff renders document content — paper treatment, same as readers see. */
.audit-entry__diff[b-dbnc8yolv2] {
    border-top: 1px solid var(--border);
    padding: 0.75rem 1rem;
    background: var(--paper-bg);
    color: var(--paper-text);
    overflow-x: auto;
}
/* /Components/Pages/Events.razor.rz.scp.css */
.events__toolbar[b-thz3zi470b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Filter-pills carry a global 1rem margin-bottom for stand-alone use; null it out
   inside the toolbar so the seg-toggle and pills stay vertically aligned. */
.events__toolbar .filter-pills[b-thz3zi470b] {
    margin-bottom: 0;
}

.events__agenda-controls[b-thz3zi470b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.5rem 0 1rem;
}

.events__agenda-controls--bottom[b-thz3zi470b] {
    justify-content: center;
    margin: 1rem 0 0;
}

.events__range-label[b-thz3zi470b] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}
/* /Components/Pages/Feedback.razor.rz.scp.css */
.fb-form-wrap[b-ezs05cxx2m] {
    max-width: 640px;
}

.fb-intro[b-ezs05cxx2m] {
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.fb-success[b-ezs05cxx2m] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 480px;
    padding: 1.5rem;
    background: var(--bg-card);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.fb-success__icon[b-ezs05cxx2m] {
    color: var(--clr-info-text, #2563eb);
}

.fb-success__message[b-ezs05cxx2m] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}
/* /Components/Pages/HandbookReviewCard.razor.rz.scp.css */
/* Same look as Home's .dash-card__count (scoped CSS doesn't cross components). */
.hrc-count[b-10q4v4hhr9] {
    margin-left: auto;
    background: var(--bg-inset);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

/* Top margin only: .dash-card__header carries no margin-bottom, so without this the first
   row sits flush against the "Handbook Review" heading. */
.hrc-list[b-10q4v4hhr9] {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.hrc-row[b-10q4v4hhr9] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .3rem .4rem;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    color: var(--text-primary);
}

.hrc-row:hover[b-10q4v4hhr9],
.hrc-row:focus-visible[b-10q4v4hhr9] {
    background: var(--bg-page);
}

/* 0.875rem, matching .vbc-row__title / .uec__title: a list row must step down from the
   1rem .dash-card__title, or the document names read as card headings instead of items. */
.hrc-row__title[b-10q4v4hhr9] {
    font-size: .875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hrc-row__meta[b-10q4v4hhr9] {
    margin-left: auto;
    font-size: .78rem;
    color: var(--text-tertiary);
    white-space: nowrap;
}
/* /Components/Pages/Handbook/Admin/Folders.razor.rz.scp.css */
.hb-folder-admin__hint[b-952bq3qei5] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0 0 0.75rem 0;
}

.hb-folder-admin__list[b-952bq3qei5] {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--border-radius);
    background: var(--bg-card);
    overflow: hidden;
}

.hb-folder-admin__row[b-952bq3qei5] {
    position: relative;
    border-top: 1px solid var(--border-color, #f1f1f4);
    background: var(--bg-card);
    transition: background 0.12s ease;
}

.hb-folder-admin__row:first-of-type[b-952bq3qei5] {
    border-top: 0;
}

.hb-folder-admin__row.is-dragging[b-952bq3qei5] {
    opacity: 0.45;
}

.hb-folder-admin__row-inner[b-952bq3qei5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    min-height: 36px;
}

/* One rail per nesting level. Each rail is a 20 px column with a single vertical
   guide line on the left, so a row at depth N renders N stacked rails before
   the content. The "leaf" variant (the rail closest to the row content) adds a
   short horizontal elbow connecting the parent's vertical line to the row. */
.hb-folder-admin__rail[b-952bq3qei5] {
    flex: 0 0 20px;
    position: relative;
    align-self: stretch;
}

.hb-folder-admin__rail[b-952bq3qei5]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 7px;
    width: 1px;
    background: var(--border-color, #d1d5db);
}

.hb-folder-admin__rail--leaf[b-952bq3qei5]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 7px;
    width: 10px;
    height: 1px;
    background: var(--border-color, #d1d5db);
}

/* Six-dot grip — the standard drag-handle pattern. Rendered as a radial-gradient
   dot tiled twice on the X axis to make two columns of three dots. */
.hb-folder-admin__handle[b-952bq3qei5] {
    display: inline-block;
    width: 10px;
    height: 16px;
    cursor: grab;
    user-select: none;
    background-image: radial-gradient(circle, var(--text-tertiary) 1px, transparent 1.5px);
    background-size: 4px 5px;
    background-position: 0 1px;
    background-repeat: round;
    opacity: 0.8;
    flex-shrink: 0;
}

.hb-folder-admin__handle:hover[b-952bq3qei5] {
    opacity: 1;
}

.hb-folder-admin__handle:active[b-952bq3qei5] {
    cursor: grabbing;
}

.hb-folder-admin__name[b-952bq3qei5] {
    color: var(--text-primary);
    flex: 0 1 auto;
}

.hb-folder-admin__proposed-badge[b-952bq3qei5] {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

.hb-folder-admin__row-actions[b-952bq3qei5] {
    margin-left: auto;
    display: inline-flex;
    gap: 0.25rem;
}

/* Drop zones: three transparent overlays per row that intercept drag events.
   They're pointer-events: none by default so clicks on the row's buttons still
   work; the parent .hb-folder-admin__list flips them to pointer-events: auto
   while a drag is in progress. */
.hb-folder-admin__zone[b-952bq3qei5] {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}

.hb-folder-admin__list.is-dragging .hb-folder-admin__zone[b-952bq3qei5] {
    pointer-events: auto;
}

.hb-folder-admin__zone--above[b-952bq3qei5] {
    top: 0;
    height: 25%;
}

.hb-folder-admin__zone--into[b-952bq3qei5] {
    top: 25%;
    bottom: 25%;
}

.hb-folder-admin__zone--below[b-952bq3qei5] {
    bottom: 0;
    height: 25%;
}

/* Drop indicators. Above/Below render a thin line at the row edge; Into
   highlights the row body. */
.hb-folder-admin__row.is-drop-into > .hb-folder-admin__row-inner[b-952bq3qei5] {
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
    border-radius: var(--border-radius-sm);
}

.hb-folder-admin__row.is-drop-above[b-952bq3qei5]::before,
.hb-folder-admin__row.is-drop-below[b-952bq3qei5]::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    height: 3px;
    background: var(--brand-primary);
    border-radius: 2px;
    pointer-events: none;
    z-index: 2;
}

.hb-folder-admin__row.is-drop-above[b-952bq3qei5]::before {
    top: -2px;
}

.hb-folder-admin__row.is-drop-below[b-952bq3qei5]::after {
    bottom: -2px;
}

/* Top/bottom-of-list zones for dropping a folder at the very top level. They're
   short slivers above the first row and below the last row, only interactive
   during a drag. */
.hb-folder-admin__root-zone[b-952bq3qei5] {
    height: 10px;
    pointer-events: none;
    background: transparent;
    list-style: none;
}

.hb-folder-admin__list.is-dragging .hb-folder-admin__root-zone[b-952bq3qei5] {
    pointer-events: auto;
}

.hb-folder-admin__root-zone.is-active[b-952bq3qei5] {
    background: color-mix(in srgb, var(--brand-primary) 25%, transparent);
}
/* /Components/Pages/Handbook/CollabPresenceBar.razor.rz.scp.css */
/* Chip colors use the shared --collab-c* identity tokens (defined in app.css)
   so "who is who" matches the editor's remote carets across UI and text. */
.collab-presence[b-91jgzwb6ns] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Compact circular initials badge; full name shows on hover (title attr). */
.collab-presence__chip[b-91jgzwb6ns] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--brand-white);
    border-radius: 50%;
    cursor: default;
    user-select: none;
}

/* Viewers (read-only watchers) read as dimmed vs. active editors. */
.collab-presence__chip--viewing[b-91jgzwb6ns] {
    opacity: 0.5;
}

.collab-presence__chip--c0[b-91jgzwb6ns] { background: var(--collab-c0); }
.collab-presence__chip--c1[b-91jgzwb6ns] { background: var(--collab-c1); }
.collab-presence__chip--c2[b-91jgzwb6ns] { background: var(--collab-c2); }
.collab-presence__chip--c3[b-91jgzwb6ns] { background: var(--collab-c3); }
.collab-presence__chip--c4[b-91jgzwb6ns] { background: var(--collab-c4); }
.collab-presence__chip--c5[b-91jgzwb6ns] { background: var(--collab-c5); }
/* /Components/Pages/Handbook/HandbookFolderPicker.razor.rz.scp.css */
/* The picker stacks chips → "+ Add location" → popover-with-tree vertically.
   The host (Item.razor's Edit Details body) places the picker into its own
   right column so the tree never pushes the left-column text fields down.
   The __main wrapper still groups the chips + button as a single layout block. */
.hb-folder-picker[b-qu4ljmjbz0] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.hb-folder-picker__main[b-qu4ljmjbz0] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.hb-folder-picker__chips[b-qu4ljmjbz0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-height: 1.5rem;
    align-items: center;
}

.hb-folder-picker__empty[b-qu4ljmjbz0] {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    font-style: italic;
}

.hb-folder-picker__add[b-qu4ljmjbz0] {
    align-self: flex-start;
}

.hb-folder-picker__popover[b-qu4ljmjbz0] {
    position: relative;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 36rem;
    overflow: hidden;
    min-width: 0;
}

.hb-folder-picker__tree-wrap[b-qu4ljmjbz0] {
    overflow-y: auto;
    max-height: 24rem;
    padding: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-page);
}

.hb-folder-picker__new-label[b-qu4ljmjbz0] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Compact info button that toggles the nesting-syntax tip. We hide the long
   explanation by default so the popover stays focused; one click reveals it
   inline below the input row. */
.hb-folder-picker__info[b-qu4ljmjbz0] {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
}

.hb-folder-picker__info:hover[b-qu4ljmjbz0] {
    color: var(--text-primary);
}

.hb-folder-picker__tip[b-qu4ljmjbz0] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.hb-folder-picker__tip code[b-qu4ljmjbz0] {
    background: var(--bg-card);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
}

.hb-folder-picker__empty-tree[b-qu4ljmjbz0] {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    margin: 0.5rem;
}

/* Row that pairs the "+ Add selected as location" button with its hint. The
   button width follows the selected folder's name (it changes label as the
   user clicks around the tree), so we let it size itself and keep the hint
   wrappable next to it. */
.hb-folder-picker__select-actions[b-qu4ljmjbz0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.hb-folder-picker__new[b-qu4ljmjbz0] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.hb-folder-picker__new-row[b-qu4ljmjbz0] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.hb-folder-picker__new-row .form-control[b-qu4ljmjbz0] {
    flex: 1 1 auto;
}
/* /Components/Pages/Handbook/HandbookItemRow.razor.rz.scp.css */
.hb-item-actions[b-i7mrhcumw4] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

/* The global .hb-item-meta rule pulls metadata to the right with margin-left: auto,
   which would split the available space with .hb-item-actions and leave meta floating
   in the middle. Inside this row we let meta sit inline next to the title/status and
   keep actions pinned to the right edge. */
.hb-item-meta[b-i7mrhcumw4] {
    margin-left: 0;
}
/* /Components/Pages/Handbook/HtmlDocumentAuthor.razor.rz.scp.css */
/* Fill the content area exactly. The page is a flex column pinned to the
   viewport height below the app header; the header / warning rows take their
   natural height and the editor absorbs ALL remaining space. Below the
   min-height floor the page scrolls normally instead of crushing the editor. */
.html-doc-author[b-85l7zkuwrf] {
    display: flex;
    flex-direction: column;
    /* page-wrap padding is inside this height (global border-box sizing). */
    height: calc(100dvh - var(--header-height));
    min-height: 480px;
}

/* Flex items default to flex-shrink: 1, so in a height-pinned column the
   page header and warning banner would COMPRESS whenever the editor wants
   more room. Pin them to their natural height; the editor is the only
   child allowed to flex. */
.html-doc-author > .hb-breadcrumb[b-85l7zkuwrf],
.html-doc-author .page-header[b-85l7zkuwrf],
.html-doc-author .form-warning[b-85l7zkuwrf] {
    flex-shrink: 0;
}

/* Full-width breadcrumb row: spans the page and wraps only at the right edge,
   instead of being squeezed into a column beside the action buttons. */
.html-doc-author > .hb-breadcrumb[b-85l7zkuwrf] {
    margin-bottom: 0.5rem;
}

/* The global .page-header carries negative side margins (margin: -1.5rem
   -1.5rem 1.25rem) to outdent its divider strip past the page padding in
   normal BLOCK flow. As a flex item that outdent shifts the whole box —
   text included — left under the sidebar. Neutralize the negative margins
   here; the header's edge-fading gradient makes the narrower strip look
   the same. */
.html-doc-author .page-header[b-85l7zkuwrf] {
    margin: 0 0 1.25rem;
    /* Let the action buttons drop to a new line on narrow widths instead of
       overflowing off the right edge. row-gap spaces the wrapped rows. */
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

/* The presence badges + buttons wrap among themselves once they reach the
   right edge, and stay right-aligned. */
.html-doc-author .page-header__actions[b-85l7zkuwrf] {
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Shrink the "Edit document" title on smaller widths so it stays on one line
   and leaves more room for the actions; full size on desktop. */
.html-doc-author .page-header__title[b-85l7zkuwrf] {
    font-size: clamp(0.95rem, 3.5vw, 1.25rem);
    white-space: nowrap;
}

/* The editor root is itself a flex column (toolbar / surface / status bar),
   so giving it the remaining page height lets its surface stretch. ::deep
   because the class lands on the HtmlEditor component's root element. */
.html-doc-author[b-85l7zkuwrf]  .html-doc-author__editor {
    flex: 1 1 auto;
    min-height: 0;
}

.html-doc-author[b-85l7zkuwrf]  .html-doc-author__editor .html-editor-surface,
.html-doc-author[b-85l7zkuwrf]  .html-doc-author__editor .html-editor-source-wrap,
.html-doc-author[b-85l7zkuwrf]  .html-doc-author__editor .html-editor-source {
    flex: 1 1 auto;
    /* min-height: 0 (not a fixed floor) is what keeps the status-bar footer
       visible on short windows. The editor root is overflow:hidden and pinned
       to the viewport height; a fixed surface floor would push toolbar +
       surface + footer past that height and clip the footer. With 0 the
       surface absorbs the squeeze and scrolls its own content (overflow-y:
       auto), while the no-shrink toolbar and footer stay pinned. The source
       view is now wrapped (bar + textarea), so the WRAP must flex too — without
       it the wrap stays content-height and the textarea collapses to a few rows. */
    min-height: 0;
    max-height: none;
}

/* TipTap mounts .ProseMirror inside the surface at runtime; stretch it to
   the surface's full height so clicking anywhere in the empty area below
   the text places the caret instead of dead space. */
.html-doc-author[b-85l7zkuwrf]  .html-doc-author__editor .html-editor-surface .ProseMirror {
    min-height: 100%;
}

/* ── Collaborators dialog ── */

[b-85l7zkuwrf] .collab-open-access {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.25rem 0 0.75rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-subsection);
    font-size: 0.85rem;
    color: var(--text-primary);
    cursor: pointer;
}

[b-85l7zkuwrf] .collab-open-access input {
    margin-top: 0.15rem;
}

/* User search results. Same classes as the editor's handbook-link search,
   but scoped CSS doesn't cross components — the rules must exist here too,
   or the buttons fall back to browser defaults (near-black text, unreadable
   on the dark-theme dialog). */
[b-85l7zkuwrf] .link-search-results {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    max-height: 220px;
    overflow-y: auto;
}

[b-85l7zkuwrf] .link-search-results__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    cursor: pointer;
    font-size: 0.85rem;
}

[b-85l7zkuwrf] .link-search-results li:last-child .link-search-results__item {
    border-bottom: 0;
}

[b-85l7zkuwrf] .link-search-results__item:hover,
[b-85l7zkuwrf] .link-search-results__item:focus-visible {
    background: var(--bg-subsection);
    outline: none;
}

[b-85l7zkuwrf] .link-search-results__title {
    color: var(--text-primary);
}

[b-85l7zkuwrf] .collab-list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

[b-85l7zkuwrf] .collab-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--text-primary);
}

[b-85l7zkuwrf] .collab-list__row:last-child {
    border-bottom: 0;
}
/* /Components/Pages/Handbook/HtmlDocumentView.razor.rz.scp.css */
.hb-doc-view[b-qdvgcxknba] {
    max-width: 980px;
    margin: 0 auto;
}

/* Full-width documents (HandbookItem.FullWidthLayout) opt out of the page cap. */
.hb-doc-view--full[b-qdvgcxknba] {
    max-width: none;
}

/* Landscape page documents get the wider sheet (matches the editor's
   1160px landscape content cap plus the paper's side padding). */
.hb-doc-view--landscape[b-qdvgcxknba] {
    max-width: 1240px;
}

/* Page mode: lift the paper card (base look in app.css) into a "sheet on the
   desk" so the reader matches the editor's page layout. */
.hb-doc-view:not(.hb-doc-view--full) .hb-html-doc__body[b-qdvgcxknba] {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
    padding: 2rem 2.5rem;
}

/* Narrow screens: the sheet fills the viewport anyway — drop the paper lift
   (shadow + wide gutters) so page mode stops costing horizontal space.
   Must come AFTER the lift rule above (equal specificity; cascade order). */
@media (max-width: 1024px) {
    .hb-doc-view:not(.hb-doc-view--full) .hb-html-doc__body[b-qdvgcxknba] {
        box-shadow: none;
        padding: 1rem 1.25rem;
    }
}

@media print {
    /* The physical sheet is the width cap — drop the screen chrome for both
       layouts so Ctrl+P from this route prints a clean document. */
    .hb-doc-view[b-qdvgcxknba],
    .hb-doc-view--full[b-qdvgcxknba] {
        max-width: none;
    }

    .hb-doc-view__actions[b-qdvgcxknba] {
        display: none;
    }

    .hb-doc-view:not(.hb-doc-view--full) .hb-html-doc__body[b-qdvgcxknba] {
        box-shadow: none;
        padding: 0;
    }
}

.hb-doc-view__bar[b-qdvgcxknba] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.hb-doc-view__title[b-qdvgcxknba] {
    margin: 0;
    font-size: 1.3rem;
    color: var(--text-primary);
}

.hb-doc-view__actions[b-qdvgcxknba] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
/* /Components/Pages/Handbook/Item.razor.rz.scp.css */
/* Reviewer's decline notes — render under the "Changes requested by …" header
   inside .form-warning. white-space: pre-wrap preserves line breaks the
   reviewer typed in the decline dialog without forcing a single long run-on. */
.hb-decline-notes[b-jo5a5ae4jb] {
    margin-top: 0.5rem;
    white-space: pre-wrap;
}

/* Live character count under the decline-dialog textarea. Subtle by design —
   the column itself is unbounded (nvarchar(max)), so this is informational
   feedback, not a hard cap. */
.hb-decline-meta[b-jo5a5ae4jb] {
    margin-top: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-align: right;
}

/* When the field is empty the meta line flips into a "this is required"
   helper so reviewers immediately understand why Send decline is disabled,
   instead of just seeing a greyed-out button with no explanation. Uses
   --clr-invalid (the same variable .form-error reads from) so the text
   stays legible in both light and dark mode. */
.hb-decline-meta--required[b-jo5a5ae4jb] {
    color: var(--clr-invalid);
    text-align: left;
}

/* Red-tinted border + ring on the empty textarea reinforces the validation
   message — matches Bootstrap-style is-invalid styling, without depending
   on a global rule. */
.form-control.is-invalid[b-jo5a5ae4jb] {
    border-color: var(--clr-invalid);
    box-shadow: 0 0 0 1px var(--clr-invalid);
}

.hb-link-destination[b-jo5a5ae4jb] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 100%;
    min-width: 0;
}

.hb-link-destination__label[b-jo5a5ae4jb] {
    color: var(--text-secondary);
    font-weight: 600;
    flex: 0 0 auto;
}

.hb-link-destination__url[b-jo5a5ae4jb] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/Handbook/ModuleChecklistAuthor.razor.rz.scp.css */
/* Page chrome reuses the global .page-wrap + .page-header pattern (see app.css).
   Only the page-specific bits live here. */

/* The sticky page header sits at z-index 9990 — above the default dialog
   backdrop (200) — so a full-height dialog's top would slide under it. Lift the
   preview backdrop above the header (and the sticky footer at 9980). */
.checklist-preview__backdrop[b-8f9q157ndm] {
    z-index: 10000;
}

/* Same stacking problem as the preview backdrop above: without this, the
   Collaborators dialog renders under the sticky page header (9990) and the
   sticky Publish/Submit footer (9980), clipping its bottom half (including
   the "Add a collaborator" search box) behind the footer bar. */
.cl-collab-backdrop[b-8f9q157ndm] {
    z-index: 10000;
}

/* Preview dialog: the wizard (especially "View all") can exceed the viewport,
   and it scrolls the current step into view on open — which scrolled the whole
   panel and hid the header. Make the panel a flex column so the header stays
   pinned and only the body scrolls. */
.checklist-preview__panel[b-8f9q157ndm] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.checklist-preview__panel .dialog__header[b-8f9q157ndm] {
    flex: 0 0 auto;
}

.checklist-preview__panel .dialog__body[b-8f9q157ndm] {
    flex: 1 1 auto;
    overflow-y: auto;
    /* No bottom padding: the wizard's sticky footer pins to the content-box
       bottom, so any padding-bottom becomes a gap where the tall step content
       shows through beneath the footer. Zero it so the footer sits flush. */
    padding-bottom: 0;
}

.author-backlink[b-8f9q157ndm] {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.author-backlink:hover[b-8f9q157ndm] {
    color: var(--brand-primary);
}

/* Sticky save bar at the bottom of the viewport. Mirrors the header's
   edge-to-edge treatment with negative side margins, so the bar visually
   spans the full content column even though it lives inside .page-wrap.
   Pinned to bottom so Save is always one click away no matter how long
   the checklist gets. */
.author-sticky-footer[b-8f9q157ndm] {
    position: sticky;
    bottom: 0;
    margin: 1.5rem -1rem 0;
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    background: var(--bg-page);
    border-top: 1px solid var(--border);
    z-index: 9980;
}

.checklist-author-list[b-8f9q157ndm] {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.checklist-author-step[b-8f9q157ndm] {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    padding: 1rem;
}

.checklist-author-step__header[b-8f9q157ndm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.checklist-author-step__num[b-8f9q157ndm] {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.checklist-author-step__actions[b-8f9q157ndm] {
    display: flex;
    gap: 0.25rem;
}

.checklist-author-link[b-8f9q157ndm] {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.empty-state[b-8f9q157ndm] {
    padding: 2rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    text-align: center;
    color: var(--text-secondary);
}
/* /Components/Pages/Handbook/ModuleChecklistView.razor.rz.scp.css */
/* Page chrome uses the global .page-wrap + .page-header pattern (see app.css). */

.author-backlink[b-8h8f3t1mi0] {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.author-backlink:hover[b-8h8f3t1mi0] {
    color: var(--brand-primary);
}

.view-subtitle[b-8h8f3t1mi0] {
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
}

/* The view page now reuses the global .module-card + .wiz-* styles. Only
   the page-specific empty state stays here. */
.empty-state[b-8h8f3t1mi0] {
    padding: 1.5rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    text-align: center;
    color: var(--text-secondary);
}
/* /Components/Pages/Handbook/QuizAuthor.razor.rz.scp.css */
/* Page chrome uses the global .page-wrap + .page-header pattern (see app.css); the drag
   affordances come from the shared .reorder-list family. Only the single-column authoring
   layout lives here. */

.qa-layout[b-b84oggx154] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 56rem;
}

.qa-card[b-b84oggx154] {
    padding: 1.25rem 1.5rem 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-card);
}

.qa-card__intro[b-b84oggx154] {
    margin: 0 0 1rem;
    line-height: 1.5;
}

.qa-dirty[b-b84oggx154] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    align-self: center;
}

/* ── Settings ────────────────────────────────────────────────────────── */

.qa-pass[b-b84oggx154] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.qa-pass__input[b-b84oggx154] {
    width: 6rem;
}

.qa-pass__unit[b-b84oggx154] {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* ── Question list ───────────────────────────────────────────────────── */

.qa-field-head[b-b84oggx154] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.qa-field-tools[b-b84oggx154] {
    margin-left: auto;
}

.qa-group-label[b-b84oggx154] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Same rule as the training author's copy — a scoped class, so each page carries its own. */
.form-optional[b-b84oggx154] {
    font-weight: 400;
    color: var(--text-tertiary);
}

.qa-count[b-b84oggx154] {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

/* A question row doubles as a collapsible-section purely for its chevron-rotation rule; the
   row's own border/background win on specificity so its look doesn't change. */
.qa-question[b-b84oggx154] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-subsection);
}

.qa-question + .qa-question[b-b84oggx154] {
    margin-top: 0.75rem;
}

.qa-question__head[b-b84oggx154] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    /* Held open so the row doesn't jump when the remove button swaps for its confirm pair. */
    min-height: 1.75rem;
}

.qa-question__lead[b-b84oggx154] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex: 1 1 auto;
}

/* The button reset comes from the global .reorder-list [data-reorder-handle] rule. */
.qa-question__handle[b-b84oggx154] {
    flex-shrink: 0;
    color: var(--text-tertiary);
    cursor: grab;
}

.qa-question__toggle[b-b84oggx154] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex: 1 1 auto;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* The global chevron rule pushes itself to the far right with margin-left:auto (right for a
   full-width section header, wrong inside a left-aligned toggle). The Icon is a child
   component's markup, so the override has to reach through ::deep. */
.qa-question__toggle[b-b84oggx154]  .collapsible-section__chevron {
    margin-left: 0;
    flex-shrink: 0;
}

.qa-question__index[b-b84oggx154] {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.qa-question__summary[b-b84oggx154] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.qa-question__kind[b-b84oggx154] {
    flex-shrink: 0;
    margin-left: auto;
    padding-right: 0.25rem;
    font-size: 0.72rem;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* The expanded editor gets its own breathing room below the header row. */
.qa-question__body[b-b84oggx154] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.25rem 0.25rem 0.5rem 2.15rem;
}

.qa-type__select[b-b84oggx154] {
    max-width: 26rem;
}

.qa-textarea[b-b84oggx154] {
    width: 100%;
    resize: vertical;
    line-height: 1.5;
}

.qa-check[b-b84oggx154] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
}

.qa-check input[b-b84oggx154] {
    margin-top: 0.2rem;
}

/* ── Options ─────────────────────────────────────────────────────────── */

/* A fieldset, so the browser's default border/padding are reset before the flex layout. */
.qa-options[b-b84oggx154] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.qa-options__head[b-b84oggx154] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0;
    margin-bottom: 0.2rem;
}

.qa-options__head .form-hint[b-b84oggx154] {
    margin: 0;
}

/* Correct-mark | text | fixed delete slot. The slot is always present so rows line up
   whether or not their delete button renders. */
.qa-option[b-b84oggx154] {
    display: grid;
    grid-template-columns: 1.5rem 1fr 2.25rem;
    align-items: center;
    gap: 0.5rem;
}

.qa-option__correct[b-b84oggx154] {
    justify-self: center;
    cursor: pointer;
}

.qa-add-option[b-b84oggx154] {
    align-self: flex-start;
    margin-top: 0.25rem;
}

.qa-add-bottom[b-b84oggx154] {
    margin-top: 0.75rem;
}

/* ── Live preview ────────────────────────────────────────────────────── */

.qa-preview__body[b-b84oggx154] {
    padding: 1rem;
}
/* /Components/Pages/Handbook/QuizPreview.razor.rz.scp.css */
/* Page chrome is the global .page-wrap / .module-card pattern; the quiz itself is styled by
   QuizRunner. The backlink rule is the same copy TrainingModuleView and the checklist pages
   carry — a scoped class, so each page brings its own. */

.author-backlink[b-sxxwu6lzgo] {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.author-backlink:hover[b-sxxwu6lzgo] {
    color: var(--brand-primary);
}

/* The module card's body deliberately has no padding of its own (its wizards supply theirs),
   so the runner gets a stage here, like the training wizard's .twiz__stage. */
.qp-stage[b-sxxwu6lzgo] {
    padding: 1.25rem 1.5rem 1.5rem;
}
/* /Components/Pages/Handbook/QuizResponsesPanel.razor.rz.scp.css */
/* Same shape as TrainingCompletionPanel; only the class prefix differs so the two can drift
   independently if they ever need to. */

.qrp-section[b-s28ntyu62w] {
    margin-top: 1rem;
}

.qrp-headline[b-s28ntyu62w] {
    margin-left: auto;
    margin-right: .6rem;
    font-size: .85rem;
    color: var(--text-secondary);
}

.qrp-scroll[b-s28ntyu62w] {
    overflow-x: auto;
}

.qrp-table[b-s28ntyu62w] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.qrp-table th[b-s28ntyu62w] {
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.qrp-table td[b-s28ntyu62w] {
    padding: .4rem .5rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    vertical-align: top;
}

.qrp-table tr:last-child td[b-s28ntyu62w] {
    border-bottom: 0;
}

.qrp-question[b-s28ntyu62w] {
    max-width: 16rem;
    white-space: normal;
}

.qrp-tag[b-s28ntyu62w] {
    display: block;
    font-size: .68rem;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.qrp-name[b-s28ntyu62w] {
    white-space: nowrap;
}

/* A learner's typed answer: keep their line breaks, wrap long words, stay readable. */
.qrp-answer[b-s28ntyu62w] {
    max-width: 22rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.qrp-status[b-s28ntyu62w] {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .8rem;
    white-space: nowrap;
    background: var(--bg-inset);
    color: var(--text-secondary);
}

.qrp-status--passed[b-s28ntyu62w] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

/* ── Admin reset ─────────────────────────────────────────────────────── */

.qrp-actions[b-s28ntyu62w] {
    white-space: nowrap;
    text-align: right;
}

/* The consequence sentence needs room the fixed action column doesn't have, so the confirm
   wraps to its own block and is allowed to break lines. */
.qrp-confirm[b-s28ntyu62w] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
    min-width: 16rem;
    max-width: 22rem;
    white-space: normal;
    text-align: left;
    font-size: .8rem;
    color: var(--text-secondary);
}
/* /Components/Pages/Handbook/TrainingAudienceDialog.razor.rz.scp.css */
.tad-intro[b-t79ven2rf2] {
    margin: 0 0 .7rem;
    color: var(--text-secondary);
}

.tad-check[b-t79ven2rf2] {
    display: flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    color: var(--text-primary);
}

.tad-check--lead[b-t79ven2rf2] {
    font-weight: 600;
}

/* Indented under its checkbox so the explanation reads as belonging to it. */
.tad-check__hint[b-t79ven2rf2] {
    margin: .15rem 0 .7rem 1.6rem;
}

.tad-people[b-t79ven2rf2] {
    margin-top: .3rem;
    padding-top: .7rem;
    border-top: 1px solid var(--border);
}

.tad-add[b-t79ven2rf2] {
    display: flex;
    gap: .4rem;
    align-items: center;
}

.tad-add .form-control[b-t79ven2rf2] {
    flex: 1 1 auto;
}

.tad-add__error[b-t79ven2rf2] {
    margin: .25rem 0 0;
    font-size: .85rem;
    color: var(--clr-critical-text);
}

/* Same contract as the handbook collaborator search (HtmlDocumentAuthor.razor.css);
   scoped styles don't cross components, so the rules are repeated rather than shared. */
.link-search-results[b-t79ven2rf2] {
    list-style: none;
    margin: .35rem 0 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    max-height: 220px;
    overflow-y: auto;
}

.link-search-results__item[b-t79ven2rf2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .4rem .6rem;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    cursor: pointer;
}

.link-search-results li:last-child .link-search-results__item[b-t79ven2rf2] {
    border-bottom: 0;
}

.link-search-results__item:hover[b-t79ven2rf2],
.link-search-results__item:focus-visible[b-t79ven2rf2] {
    background: var(--bg-subsection);
    outline: none;
}

.link-search-results__title[b-t79ven2rf2] {
    color: var(--text-primary);
}

.link-search-results__meta[b-t79ven2rf2] {
    font-size: .8rem;
    color: var(--text-tertiary);
    overflow-wrap: anywhere;
}

.tad-list[b-t79ven2rf2] {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    max-height: 12rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    background: var(--bg-card);
}

.tad-list > li + li[b-t79ven2rf2] {
    border-top: 1px solid var(--border);
}

.tad-row[b-t79ven2rf2] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .65rem;
    font-size: .9rem;
    color: var(--text-primary);
}

.tad-row__name[b-t79ven2rf2] {
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

.tad-row__tag[b-t79ven2rf2] {
    font-size: .72rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}

.tad-share[b-t79ven2rf2] {
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px solid var(--border);
}

.tad-share__row[b-t79ven2rf2] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.tad-share__url[b-t79ven2rf2] {
    flex: 1 1 auto;
    padding: .3rem .5rem;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    background: var(--bg-inset);
    color: var(--text-primary);
    font-size: .82rem;
    overflow-wrap: anywhere;
}

.tad-summary[b-t79ven2rf2] {
    margin: .8rem 0 0;
    font-size: .88rem;
    color: var(--text-secondary);
}

.tad-actions[b-t79ven2rf2] {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: .85rem;
}
/* /Components/Pages/Handbook/TrainingCompletionPanel.razor.rz.scp.css */
.tcp-section[b-zwltkjuyqg] {
    margin-top: 1rem;
}

/* Sits between the section title and the chevron, so the answer is visible without expanding. */
.tcp-headline[b-zwltkjuyqg] {
    margin-left: auto;
    margin-right: .6rem;
    font-size: .85rem;
    color: var(--text-secondary);
}

/* The table is the one thing here that can outgrow a narrow window; it scrolls, the page never
   does horizontally. */
.tcp-scroll[b-zwltkjuyqg] {
    overflow-x: auto;
}

.tcp-table[b-zwltkjuyqg] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.tcp-table th[b-zwltkjuyqg] {
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.tcp-table td[b-zwltkjuyqg] {
    padding: .4rem .5rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    vertical-align: middle;
}

.tcp-table tr:last-child td[b-zwltkjuyqg] {
    border-bottom: 0;
}

.tcp-name[b-zwltkjuyqg] {
    margin-right: .4rem;
}

.tcp-tag[b-zwltkjuyqg] {
    font-size: .72rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
}

.tcp-status[b-zwltkjuyqg] {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .8rem;
    white-space: nowrap;
    background: var(--bg-inset);
    color: var(--text-secondary);
}

.tcp-status--complete[b-zwltkjuyqg] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

.tcp-status--progress[b-zwltkjuyqg] {
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
}

.tcp-progress[b-zwltkjuyqg] {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 7rem;
}

.tcp-blocked[b-zwltkjuyqg] {
    color: var(--clr-warning-text);
}
/* /Components/Pages/Handbook/TrainingModuleAuthor.razor.rz.scp.css */
/* Page chrome uses the global .page-wrap + .page-header pattern (see app.css); the drag
   affordances come from the shared .reorder-list family. Only the two-pane authoring
   layout lives here. */

.tma-layout[b-3yiirb1uds] {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 760px) {
    .tma-layout[b-3yiirb1uds] {
        grid-template-columns: 1fr;
    }
}

/* ── Section rail ────────────────────────────────────────────────────── */

.tma-rail[b-3yiirb1uds] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-card);
    position: sticky;
    /* 3.75rem clears the sticky .page-header (47px) plus the gap above the layout — the
       same measurement the dashboard rail uses. It has to be no MORE than the rail's
       natural offset from the top of the viewport: sticky clamps the element to `top`
       immediately, so an over-large value pushed the rail a few pixels below the editor
       pane the moment the pane grew tall enough to give it room to move. That looked like
       the two cards were misaligned, and only on the layouts with a tall enough field. */
    top: calc(var(--header-height) + 3.75rem);
}

.tma-rail__head[b-3yiirb1uds] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.tma-rail__title[b-3yiirb1uds] {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.tma-rail__count[b-3yiirb1uds] {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.tma-rail__empty[b-3yiirb1uds] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.tma-chip[b-3yiirb1uds] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.25rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
}

.tma-chip:hover[b-3yiirb1uds] {
    background: var(--bg-subsection);
}

.tma-chip--active[b-3yiirb1uds] {
    border-color: var(--brand-primary);
    background: var(--bg-subsection);
}

.tma-chip__handle[b-3yiirb1uds] {
    flex-shrink: 0;
    color: var(--text-tertiary);
    cursor: grab;
}

.tma-chip__select[b-3yiirb1uds] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.3rem 0.2rem;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.tma-chip__kind[b-3yiirb1uds] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.tma-chip__title[b-3yiirb1uds] {
    font-size: 0.85rem;
    color: var(--text-primary);
    /* One line per chip keeps the rail scannable no matter how long a title runs. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tma-chip__delete[b-3yiirb1uds] {
    flex-shrink: 0;
    /* Revealed on hover/focus so the rail isn't a wall of trash icons, but never
       hidden from keyboard users. */
    opacity: 0;
}

.tma-chip__duplicate[b-3yiirb1uds] {
    flex-shrink: 0;
    /* Keep secondary rail actions quiet until the row is being used, while retaining
       keyboard discoverability. */
    opacity: 0;
}

.tma-chip:hover .tma-chip__duplicate[b-3yiirb1uds],
.tma-chip__duplicate:focus-visible[b-3yiirb1uds] {
    opacity: 1;
}

.tma-chip:hover .tma-chip__delete[b-3yiirb1uds],
.tma-chip__delete:focus-visible[b-3yiirb1uds] {
    opacity: 1;
}

.tma-add[b-3yiirb1uds] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-color);
}

.tma-add__label[b-3yiirb1uds] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.tma-add__row[b-3yiirb1uds] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.tma-add__row .form-control[b-3yiirb1uds] {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Editor pane ─────────────────────────────────────────────────────── */

.tma-pane[b-3yiirb1uds] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-card);
    min-width: 0;
}

.tma-pane__head[b-3yiirb1uds] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.tma-pane__kind[b-3yiirb1uds] {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-primary);
}

.tma-pane__pos[b-3yiirb1uds] {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.tma-textarea[b-3yiirb1uds] {
    width: 100%;
    resize: vertical;
    line-height: 1.5;
}

/* The prompt field is the one place where exact characters matter, so it's shown in a
   monospace face with spellcheck off — an author needs to see indentation and stray
   whitespace as the learner will copy them. pre-wrap changes only the display: authored
   spaces/newlines remain byte-identical while long lines wrap and contribute to auto-height. */
.tma-textarea--mono[b-3yiirb1uds] {
    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: hidden;
}

/* Auto-grows with content (matches the check-in/tracking notes pattern) instead of a fixed
   row count: short text stays small, long text caps at ~300px with a scrollbar. Shared by the
   prompt body and the "why" note so both resize the same way. */
.tma-textarea--auto[b-3yiirb1uds] {
    resize: none;
    min-height: 2.5rem;
    max-height: 18.75rem;
    field-sizing: content;
    overflow-y: auto;
}

/* A thumbnail, not a rendering: the live preview below this field is where the author judges
   how the image will actually look, so this only has to confirm which file is attached.
   align-self is load-bearing — .form-field is a column flex container, so a bare `width: auto`
   image gets stretched to the full field width by the default align-items: stretch, and
   max-height then squashes it out of proportion. */
.tma-image-preview[b-3yiirb1uds] {
    display: block;
    align-self: flex-start;
    max-width: 100%;
    max-height: 120px;
    width: auto;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
}

/* Occupies the same slot as .tma-image-preview while an upload is in flight, so the field
   doesn't collapse and then jump back. Same shimmer as the rendered-content image
   placeholder in app.css. */
.tma-image-uploading[b-3yiirb1uds] {
    display: block;
    align-self: flex-start;
    width: 180px;
    max-width: 100%;
    height: 120px;
    margin-bottom: 0.5rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-subsection);
    /* A neutral translucent sweep rather than a token: it has to read as a highlight over
       whichever surface colour the theme puts underneath it. */
    background-image: linear-gradient(100deg, transparent 35%, rgba(128, 128, 128, 0.22) 50%, transparent 65%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    animation: tma-upload-shimmer-b-3yiirb1uds 1.4s linear infinite;
}

@keyframes tma-upload-shimmer-b-3yiirb1uds {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Honours a reduced-motion preference without losing the "something is happening" signal. */
@media (prefers-reduced-motion: reduce) {
    .tma-image-uploading[b-3yiirb1uds] {
        animation: none;
        background-image: none;
    }
}

/* ── Display settings + live preview ─────────────────────────────────── */

.tma-field-head[b-3yiirb1uds] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.tma-field-tools[b-3yiirb1uds] {
    display: flex;
    gap: 0.35rem;
}

/* Heads a group of repeated fields that has no single control to point a <label> at. Matches
   the weight of a real label so the group doesn't read as lighter than the fields under it. */
.tma-group-label[b-3yiirb1uds] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* One prompt in the list. Boxed so several of them on one section read as separate blocks
   rather than one long run of alternating inputs. */
.tma-prompt[b-3yiirb1uds] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-subsection);
}

/* The cards sit inside ReorderList's own wrapper div, which is one flex item of .tma-pane
   and so contributes no gap of its own — the spacing between cards has to come from here. */
.tma-prompt + .tma-prompt[b-3yiirb1uds] {
    margin-top: 0.75rem;
}

.tma-prompt__head[b-3yiirb1uds] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    /* Held open so the row doesn't jump when the remove button swaps for its confirm pair. */
    min-height: 1.75rem;
}

/* Grip and position label travel together on the left; space-between then pushes the
   remove button (or its confirm pair) to the right on its own. */
.tma-prompt__lead[b-3yiirb1uds] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.tma-prompt__handle[b-3yiirb1uds] {
    flex-shrink: 0;
    color: var(--text-tertiary);
    cursor: grab;
}

.tma-prompt__index[b-3yiirb1uds] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

/* Chevron + index + (collapsed) summary as one button — flexes and shrinks inside
   .tma-prompt__lead so the summary can truncate without pushing the delete button off
   the row; the grip stays flex-shrink: 0 beside it. */
.tma-prompt__toggle[b-3yiirb1uds] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex: 1 1 auto;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tma-prompt__summary[b-3yiirb1uds] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-secondary);
}

/* Move + remove sit together as one flex item so .tma-prompt__head's space-between still
   only ever sees two children — the lead on the left, this on the right. */
.tma-prompt__actions[b-3yiirb1uds] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

/* Target picker + Move/Cancel, same layout as .confirm-delete's Yes/No pair. */
.tma-prompt__move[b-3yiirb1uds] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tma-prompt__move-select[b-3yiirb1uds] {
    width: auto;
    max-width: 12rem;
    padding: 0.2rem 1.6rem 0.2rem 0.45rem;
    font-size: 0.8125rem;
}

/* The alignment picker sits beside a field's label rather than in a field of its own —
   it belongs to the input below it and a full row would read as a separate setting.
   .seg-toggle--3 is full-width by contract, so the width is pulled back to three icon-sized
   cells here; the indicator's thirds are percentages, so they follow on their own. */
.tma-align[b-3yiirb1uds] {
    display: inline-flex;
}

.tma-align .seg-toggle--3[b-3yiirb1uds] {
    width: auto;
}

.tma-align .seg-toggle__option[b-3yiirb1uds] {
    flex: 0 0 2rem;
    padding-inline: 0;
}

/* Second landing spot for "Add scenario" — a hub with a long card list shouldn't force a
   scroll back to the header just to add one more. Matches Voting's .vbd-add-bottom. */
.tma-add-bottom[b-3yiirb1uds] {
    display: flex;
    justify-content: center;
    margin: 0.85rem 0 0.25rem;
}

/* ── Scenario table ──────────────────────────────────────────────────── */

/* Dense alternative to a boxed .tma-prompt card per scenario: with up to eighteen entries a
   full card each cost several screens of scroll. Column headers once, one row per scenario,
   every field stays inline-editable — no extra click to open a row before you can type in it. */
.tma-scenario-list[b-3yiirb1uds] {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-card);
    overflow: hidden;
}

.tma-scenario-head[b-3yiirb1uds],
.tma-scenario-row[b-3yiirb1uds] {
    display: grid;
    /* The grip+index and delete columns are fixed so all eighteen rows' three real fields
       line up under the header regardless of what either edge column is showing. */
    grid-template-columns: 1.75rem 1fr 1fr 1fr 2.25rem;
    gap: 0.6rem;
    align-items: center;
}

.tma-scenario-head[b-3yiirb1uds] {
    padding: 0.4rem 0.6rem 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.tma-scenario-row[b-3yiirb1uds] {
    padding: 0.3rem 0.6rem;
    border-top: 1px solid var(--border-color);
}

.tma-scenario-grip[b-3yiirb1uds] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

/* The confirm pair needs more room than the fixed delete column offers, so it spans the
   full row on its own line below rather than squeezing into — or being clipped by — that
   column. A transient state (one row at a time), so the row briefly growing is fine. */
.tma-scenario-confirm[b-3yiirb1uds] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

/* The preview's own stage box nests inside the shared disclosure body rather than sharing
   a class with it — .collapsible-section__body and .tma-preview__stage both set border/
   padding/background, and merging them onto one element would fight over which wins.
   Shared by every layout whose preview collapses by default (scenario hubs, prompts). */
.tma-collapsible-preview .tma-preview__stage[b-3yiirb1uds] {
    margin: 0;
}

/* auto-fit rather than a fixed count: the row carries three image settings on the editing
   panel's width and folds to two or one as it narrows, without a breakpoint per arity. */
.tma-field-row[b-3yiirb1uds] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    align-items: start;
}

/* Renders the real TrainingSectionCanvas, so it shows the width and crop settings doing
   what they will actually do. Nested inside the shared .collapsible-section body (see
   RenderLivePreview) rather than shown outright. */
.tma-preview__stage[b-3yiirb1uds] {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-subsection);
}

.tma-dirty[b-3yiirb1uds] {
    align-self: center;
    font-size: 0.8rem;
    color: var(--clr-warning-text, var(--text-secondary));
}

/* "Scenario cards jump here" — informational, not a warning: boxed in the info tokens so it
   stands out from the ordinary hints without shouting. */
.tma-targeted[b-3yiirb1uds] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--clr-info-border);
    border-radius: var(--border-radius-sm);
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
}

.form-optional[b-3yiirb1uds] {
    font-weight: 400;
    color: var(--text-tertiary);
}

.empty-state[b-3yiirb1uds] {
    padding: 1.5rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    text-align: center;
    color: var(--text-secondary);
}

/* Attachments sit under whichever layout's fields are showing, separated so they don't read
   as part of the layout-specific block above them. */
.tma-files[b-3yiirb1uds] {
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
}

.tma-file-list[b-3yiirb1uds] {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    background: var(--bg-card);
}

.tma-file-list > li + li[b-3yiirb1uds] {
    border-top: 1px solid var(--border);
}

.tma-file[b-3yiirb1uds] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.tma-file__details[b-3yiirb1uds] {
    flex: 1 1 auto;
    min-width: 0;
}

.tma-file__name[b-3yiirb1uds] {
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

.tma-file__size[b-3yiirb1uds] {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.tma-file__description-label[b-3yiirb1uds] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.tma-file__description[b-3yiirb1uds] {
    min-height: 3.5rem;
    margin-top: 0.2rem;
    resize: vertical;
}

.tma-upload[b-3yiirb1uds] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

/* The Requirement / Quiz "while it's unmet" toggle stands alone in the pane, and the shared
   .seg-toggle--2 stretches to fill — a two-word choice shouldn't run the full width like a
   banner. Capped, with the halves still equal so the sliding indicator's 50% stays honest. */
.tma-block-toggle[b-3yiirb1uds] {
    width: auto;
    max-width: 26rem;
}

.tma-block-toggle .seg-toggle__option[b-3yiirb1uds] {
    flex: 1 1 0;
    min-width: 11rem;
}
/* /Components/Pages/Handbook/TrainingModuleView.razor.rz.scp.css */
/* Page chrome uses the global .page-wrap + .module-card patterns (see app.css), and
   presentation mode uses the shared .tm-present* family there too. Only the page-specific
   bits live here. */

.author-backlink[b-t6u372uwsa] {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.author-backlink:hover[b-t6u372uwsa] {
    color: var(--brand-primary);
}

.empty-state[b-t6u372uwsa] {
    padding: 1.5rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    text-align: center;
    color: var(--text-secondary);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Layout for this page (.dash-top-row, .dash-section*) lives in the global app.css dashboard
   layout block — child components' root elements don't inherit this file's isolation scope,
   so grid rules that target cards have to be global. Only card-content styles belong here. */

.dash-card__status[b-blzssn6x03] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.dash-card__score-label[b-blzssn6x03] {
    font-size: 1.125rem;
    font-weight: 600;
}

.dash-card__total-pct[b-blzssn6x03] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-tertiary);
}

.dash-card__score-wrap[b-blzssn6x03] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    min-width: 60px;
    margin-left: auto;
}

.dash-card__score[b-blzssn6x03] {
    font-weight: 600;
    font-size: 0.875rem;
}

.dash-card__score--high[b-blzssn6x03] {
    color: var(--clr-success-text);
}

.dash-card__score--mid[b-blzssn6x03] {
    color: var(--clr-warning-text);
}

.dash-card__score--low[b-blzssn6x03] {
    color: var(--clr-over-capacity);
}

.dash-card__score-bar[b-blzssn6x03] {
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background: var(--bg-page);
    overflow: hidden;
}

.dash-card__score-bar-fill[b-blzssn6x03] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.dash-card__score-bar-fill--high[b-blzssn6x03] {
    background: var(--clr-success-text);
}

.dash-card__score-bar-fill--mid[b-blzssn6x03] {
    background: var(--clr-warning-text);
}

.dash-card__score-bar-fill--low[b-blzssn6x03] {
    background: var(--clr-over-capacity);
}

/* Natural height — the card is no longer height-capped, so the list simply grows. The cap is
   only here to stop a pathological capacity week from dominating the row. */
.dash-card__capacity-list[b-blzssn6x03] {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    max-height: 20rem;
    overflow-y: auto;
}

.dash-card__capacity-row[b-blzssn6x03] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.125rem 0;
    font-size: 0.75rem;
    line-height: 1.25;
}

.dash-card__capacity-name[b-blzssn6x03] {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.dash-card__capacity-solution[b-blzssn6x03] {
    color: var(--text-primary);
    font-weight: 600;
}

.dash-card__capacity-sep[b-blzssn6x03] {
    margin: 0 0.25rem;
    color: var(--text-tertiary);
}

.dash-card__capacity-pct[b-blzssn6x03] {
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Sprint focus row — same purple accent as the Gantt's sprint stripes so the list reads
   as a continuation of the visual on top. */
.dash-card__capacity-row--sprint .dash-card__capacity-solution[b-blzssn6x03] {
    color: var(--clr-needs-review-text);
}

.dash-card__capacity-pct--sprint[b-blzssn6x03] {
    color: var(--clr-needs-review-text);
    font-weight: 600;
}

/* ── Release card ── */
.dash-card__release[b-blzssn6x03] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.dash-card__release-date[b-blzssn6x03] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

.dash-card__release-title[b-blzssn6x03] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0.5rem 0 0.25rem;
}

.dash-card__release-desc[b-blzssn6x03] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ── Alerts card ── */
.dash-card__count[b-blzssn6x03] {
    margin-left: auto;
    background: var(--bg-inset);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

/* Sits in a natural-height section, so the card sizes to its content — the max-height is only
   here to stop a 40-alert list from dominating the section. */
.dash-card__alert-list[b-blzssn6x03] {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-sm);
    flex: 0 1 auto;
    min-height: 0;
    max-height: 28rem;
    /* overflow-x stays hidden so the rows clip to the rounded corners. */
    overflow-x: hidden;
    overflow-y: auto;
}

.dash-card__alert-list > li:last-child[b-blzssn6x03]  .alert-row {
    border-bottom: none;
}

/* ── Quote card ── */
.dash-card__quote[b-blzssn6x03] {
    margin-top: 0.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dash-card__quote-text[b-blzssn6x03] {
    font-size: 1.0625rem;
    font-style: italic;
    color: var(--text-primary);
    line-height: 1.6;
}

.dash-card__quote-author[b-blzssn6x03] {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}
/* /Components/Pages/Modules/MyModuleInstance.razor.rz.scp.css */
/* Page chrome uses the global .page-wrap + .page-header pattern (see app.css). */

.instance-backlink[b-tzyosakt39] {
    display: inline-block;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.instance-backlink:hover[b-tzyosakt39] {
    color: var(--brand-primary);
}

.instance-subtitle[b-tzyosakt39] {
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
}

.completion-banner[b-tzyosakt39] {
    border: 1px solid var(--clr-success-border);
    background: var(--clr-success-bg);
    border-radius: 8px;
    /* Outer margin gives breathing room from the card edges now that
       .module-card__body has zero padding. */
    margin: 1rem 1.25rem;
    padding: 1.25rem;
    text-align: center;
}

.completion-banner h2[b-tzyosakt39] {
    margin: 0 0 0.5rem;
}

.completion-banner p[b-tzyosakt39] {
    margin: 0 0 1rem;
    color: var(--text-secondary);
}

/* Presentation mode (.tm-present*) is shared with TrainingModuleView, so it lives in
   app.css rather than here — see the "Presentation shell" block there. */

.badge--success[b-tzyosakt39] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
    border: 1px solid var(--clr-success-border);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* A standalone quiz run: the card body has no padding of its own (the wizards supply theirs),
   so the runner gets a stage, like the training wizard's .twiz__stage. */
.quiz-stage[b-tzyosakt39] {
    padding: 1.25rem 1.5rem 1.5rem;
}
/* /Components/Pages/Modules/MyTrackedItems.razor.rz.scp.css */
/* Page chrome uses the global .page-wrap + .page-header pattern (see app.css). */

/* Brief ring highlight when a deep link jumps to a specific Progress Reporting item. */
.track-flash[b-t72w7fjixv] {
    border-radius: 10px;
    animation: pt-track-flash-b-t72w7fjixv 1.6s ease-out;
}

@keyframes pt-track-flash-b-t72w7fjixv {
    0% { box-shadow: 0 0 0 3px var(--brand-primary); }
    100% { box-shadow: 0 0 0 3px transparent; }
}

/* Admin-assigned tracked work section (below the handbook-module table). */
.tracked-assigned[b-t72w7fjixv] {
    margin-top: 2rem;
    border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
    padding-top: 1.25rem;
}

.tracked-assigned__heading[b-t72w7fjixv] {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
}

.tracked-admin-bar[b-t72w7fjixv] {
    margin-bottom: 1rem;
}

.tracked-assigned__group[b-t72w7fjixv] {
    margin-bottom: 1rem;
}

/* Group name and its deadline chip share a baseline; the chip wraps under on narrow screens. */
.tracked-assigned__group-head[b-t72w7fjixv] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.tracked-assigned__group-title[b-t72w7fjixv] {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.tracked-assigned__group-desc[b-t72w7fjixv] {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--text-tertiary);
    max-width: 720px;
}

.tracked-assigned__items[b-t72w7fjixv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 720px;
}

.tracked-subtitle[b-t72w7fjixv] {
    color: var(--text-secondary);
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

/* In-progress / Completed filter row. These are toggle buttons, not tabs —
   the page uses role="group" + aria-pressed because the buttons filter the
   list below rather than swap discrete tabpanels. Keep the class names
   page-specific so they don't visually collide with the shared `.tabs`
   styling defined in app.css for the Tabs.razor component. */
.tracked-filter[b-t72w7fjixv] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.tracked-filter__btn[b-t72w7fjixv] {
    border: none;
    background: transparent;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-weight: 500;
}

.tracked-filter__btn.is-active[b-t72w7fjixv] {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

.tracked-table[b-t72w7fjixv] {
    width: 100%;
    border-collapse: collapse;
}

.tracked-table th[b-t72w7fjixv],
.tracked-table td[b-t72w7fjixv] {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

/* Flex wrapper so the rename button and the info-icon link sit on the
   same baseline, with the icon pinned to the right side of the title text
   instead of breaking onto a new line. min-width: 0 on the button lets it
   shrink/ellipsize when the cell is narrow. */
.tracked-table__title-cell[b-t72w7fjixv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Title cell rendered as a button so it's keyboard-focusable AND clearly
   interactive — clicking turns the cell into an <input>. Strips default
   button chrome so it reads as plain text until hovered. */
.tracked-table__title-button[b-t72w7fjixv] {
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: text;
    flex: 1 1 auto;
    min-width: 0;
}

/* The shared `.tracked-table td .icon-btn { margin-left: 0.4rem }` rule
   below adds a left margin so action-column icons don't butt into the
   Resume button. The title-cell uses flex `gap` for spacing instead, so
   suppress the margin here to keep the icon flush with the title text. */
.tracked-table__title-info[b-t72w7fjixv] {
    margin-left: 0 !important;
}

.tracked-table__title-button:hover[b-t72w7fjixv],
.tracked-table__title-button:focus-visible[b-t72w7fjixv] {
    color: var(--brand-primary);
    outline: none;
}

.tracked-table__title-input[b-t72w7fjixv] {
    /* Compact input that fits inside the row height without bumping the
       row taller than its neighbors during inline edit. */
    padding: 0.25rem 0.4rem;
    font-size: 0.9rem;
    width: 100%;
    min-width: 8rem;
}

.tracked-table th[b-t72w7fjixv] {
    background: var(--bg-page, transparent);
    color: var(--text-secondary);
    font-weight: 600;
}

/* Bump specificity to 0,2,1 so this wins over the table's default
   `.tracked-table th/td { text-align: left }` rule above (0,1,1). Without
   the qualifier, .text-right (0,1,0) loses the cascade and the Actions
   header / Delete / Resume buttons stayed left-aligned. */
.tracked-table th.text-right[b-t72w7fjixv],
.tracked-table td.text-right[b-t72w7fjixv] {
    text-align: right;
}

/* The inline-confirm row (.confirm-delete) uses display:flex globally,
   which means text-align on the parent cell doesn't reach its flex
   children — they'd cluster on the left even though the cell is
   text-aligned right. Push the flex content to the end so "Delete?
   Yes No" sits flush with the right edge of the actions column. */
.tracked-table td.text-right .confirm-delete[b-t72w7fjixv] {
    justify-content: flex-end;
}

/* Breathing room between the Resume / View button and the trash-can
   delete icon. Inline elements have no inherent gap; a small
   margin-left on the icon button keeps them from butting together. */
.tracked-table td .icon-btn[b-t72w7fjixv] {
    margin-left: 0.4rem;
}

.progress-mini[b-t72w7fjixv] {
    width: 110px;
    height: 6px;
    background: var(--bg-inset);
    border-radius: 999px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.progress-mini__fill[b-t72w7fjixv] {
    height: 100%;
    background: var(--brand-primary);
}

/* Hold the bar and the "%" text on one baseline. The shared .form-hint
   class is `display: block; margin-top: 0.25rem` (see app.css), which made
   the percent drop onto a second line and pushed this cell's baseline below
   the surrounding columns. A small inline-flex wrapper keeps them centered
   together so all cells in the row read at the same vertical position. */
.tracked-table__progress[b-t72w7fjixv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.tracked-table__progress-pct[b-t72w7fjixv] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.empty-state[b-t72w7fjixv] {
    padding: 2rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    text-align: center;
    color: var(--text-secondary);
}
/* /Components/Pages/MyLearningSprintCard.razor.rz.scp.css */
.mls__status[b-kpmq319buz] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Scheduled / in progress — purple, same palette as the Gantt sprint stripe and the
   Learning Sprint icon used elsewhere in the app. */
.mls__status--scheduled[b-kpmq319buz] {
    background: var(--clr-needs-review-bg);
    color: var(--clr-needs-review-text);
}

.mls__status--eligible[b-kpmq319buz] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

.mls__status--not-eligible[b-kpmq319buz] {
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
}

.mls__title[b-kpmq319buz] {
    margin: 0.6rem 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mls__dates[b-kpmq319buz] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.mls__notes[b-kpmq319buz] {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.mls__hint[b-kpmq319buz] {
    margin: 0.6rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
/* /Components/Pages/MyToDos.razor.rz.scp.css */
/* Open / Completed use the shared .collapsible-section pattern from app.css. Spacing
   between the page header and the first section: */
.collapsible-section[b-2tjjybqvwt] {
    margin-top: 1rem;
}

/* The view toggle, category picker, and Add button stay together on one line. When the row is too
   narrow, the whole actions group wraps below the title as a unit (rather than the button dropping
   on its own). Scoped to this page so other headers (e.g. One-on-One) keep their layout. */
.page-header[b-2tjjybqvwt] {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

.todo-header-actions[b-2tjjybqvwt] {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.todo-loadmore[b-2tjjybqvwt] {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}

/* Nudge the delete control away from the completed date text. */
.todo-row__delete[b-2tjjybqvwt] {
    margin-left: 0.25rem;
}

/* Category accent stripe on each list row, mirroring the board cards (color via --row-color). */
.todo-row--striped[b-2tjjybqvwt] {
    border-left: 3px solid var(--row-color, transparent);
    padding-left: 0.375rem;
}
/* /Components/Pages/MyToDosCard.razor.rz.scp.css */
/* Layout for the My To-Dos card lives in the shared .todo-* classes in app.css
   (reused by AdminFollowUpToDosCard and the one-on-one page). */

/* Breathing room between the header (title + category dropdown) and the first to-do row. */
.dash-card__header[b-x0n2xqelpn] {
    margin-bottom: 0.6rem;
}

/* View toggle + category picker, pushed to the right of the title. They stay together on one line;
   the whole group wraps below the title (via the header's own wrap) only when the card is too narrow. */
.todo-card-controls[b-x0n2xqelpn] {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

/* Category accent stripe on each list row, matching the board cards and the full list view. */
.todo-row--striped[b-x0n2xqelpn] {
    border-left: 3px solid var(--row-color, transparent);
    padding-left: 0.375rem;
}

/* In the dashboard rail this card is the --fill card: it absorbs the height the cards above it
   didn't use, down to the bottom of the viewport, and scrolls internally. Board columns cap at
   28rem via --board-col-max-h. */
.dash-card[b-x0n2xqelpn] {
    --board-col-max-h: 28rem;
}

/* ReorderList renders its own wrapper div around the <ul>, so the flex chain has to pass
   through it or the list can't absorb the card's height. That div is ReorderList's own markup
   and doesn't carry this component's scope id, hence ::deep. */
.dash-card[b-x0n2xqelpn]  .reorder-list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* No max-height any more — the card's height governs, and the list scrolls to fit it. */
.mtd-card-list[b-x0n2xqelpn] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
/* /Components/Pages/MyTrackingCard.razor.rz.scp.css */
/* Card chrome and rows come from the shared .dash-card / .dash-module-row classes
   in app.css (same as the Tracked Modules card). */

/* Allow the note preview to truncate instead of pushing the row wider. */
.dash-module-row__main[b-ghzyi7dmmn] {
    min-width: 0;
}

/* List name and its deadline chip share the subtitle line. The name takes the squeeze; the
   chip never shrinks, since a truncated countdown is worse than a truncated list title. */
.dash-track-list[b-ghzyi7dmmn] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.dash-track-list__name[b-ghzyi7dmmn] {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* One-line preview of the developer's latest note, truncated with an ellipsis. */
.dash-track-note[b-ghzyi7dmmn] {
    color: var(--text-tertiary);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* /Components/Pages/OneOnOne/MyOneOnOne.razor.rz.scp.css */
/* Layout for the one-on-one page lives in the shared .oo-* classes in app.css. This scoped
   file is intentionally empty — add page-only overrides here if ever needed. */
/* /Components/Pages/OneOnOne/OneOnOneAdminNotes.razor.rz.scp.css */
/* Backdrop and drawer sit below the fixed app header (and the impersonation banner when present,
   via --overlay-top) so neither covers it. */
.oo-notes-backdrop[b-6tiqo4ltui] {
    position: fixed;
    inset: var(--overlay-top, var(--header-height)) 0 0 0;
    /* Above the sidebar/page chrome (~9990) but below the fixed app header (9995) so the header
       stays visible and uncovered. */
    z-index: 9993;
    background: rgba(0, 0, 0, 0.25);
}

.oo-notes-flyout[b-6tiqo4ltui] {
    position: fixed;
    top: var(--overlay-top, var(--header-height));
    right: 0;
    z-index: 9994;
    height: calc(100% - var(--overlay-top, var(--header-height)));
    width: min(440px, 92vw);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 1.25rem 1rem;
    background: var(--bg-card-elevated);
    border-left: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

.oo-notes-flyout__header[b-6tiqo4ltui] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.oo-notes-flyout__title[b-6tiqo4ltui] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.oo-notes-flyout__hint[b-6tiqo4ltui] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin: 0;
}

.oo-notes-facts[b-6tiqo4ltui] {
    margin: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-inset);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.oo-notes-facts__row[b-6tiqo4ltui] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.oo-notes-facts__row dt[b-6tiqo4ltui] {
    flex: 0 0 4.5rem;
    color: var(--text-tertiary);
    font-weight: 600;
}

.oo-notes-facts__row dd[b-6tiqo4ltui] {
    margin: 0;
    color: var(--text-primary);
}

/* Own line: the years+months countdown is too long to sit beside the tenure value in a 440px drawer. */
.oo-notes-facts__sub[b-6tiqo4ltui] {
    display: block;
    color: var(--text-secondary);
}

/* Caution marker so the admin knows the birthday is private and shouldn't be shared. */
.oo-notes-facts__private[b-6tiqo4ltui] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.oo-notes-facts__badge[b-6tiqo4ltui] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--clr-needs-review-text);
    font-weight: 600;
}

.oo-notes-flyout__text[b-6tiqo4ltui] {
    flex: 1 1 auto;
    min-height: 0;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
}

.oo-notes-flyout__actions[b-6tiqo4ltui] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 0 0 auto;
}
/* /Components/Pages/OneOnOne/OneOnOneDiscussionList.razor.rz.scp.css */
/* Styles live in the shared .oo-disc* classes in app.css. Intentionally empty. */
/* /Components/Pages/OneOnOne/OneOnOneLearningSprint.razor.rz.scp.css */
.ls-status[b-9r1skt4coh] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Scheduled / in progress — purple, matching the Gantt sprint stripe and Learning Sprint icon. */
.ls-status--scheduled[b-9r1skt4coh] {
    background: var(--clr-needs-review-bg);
    color: var(--clr-needs-review-text);
}

.ls-status--eligible[b-9r1skt4coh] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

.ls-status--not-eligible[b-9r1skt4coh] {
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
}

.ls-name[b-9r1skt4coh] {
    margin: 0.6rem 0 0.15rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ls-dates[b-9r1skt4coh] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.ls-notes[b-9r1skt4coh] {
    margin: 0.5rem 0 0.6rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}
/* /Components/Pages/OneOnOne/OneOnOneTrackingSection.razor.rz.scp.css */
/* Styles live in the shared .oo-tracking* classes in app.css. Intentionally empty. */
/* /Components/Pages/OneOnOne/OneOnOneWorkSchedule.razor.rz.scp.css */
/* Header trigger: clock icon, plus the time itself once one is agreed. */
.oo-schedule__trigger[b-v8c2hy327e] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.oo-schedule__trigger-time[b-v8c2hy327e] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Hints that arrangement notes exist without spending header width on them. */
.oo-schedule__trigger-noteind[b-v8c2hy327e] {
    opacity: 0.65;
}

.oo-schedule__help[b-v8c2hy327e] {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.oo-schedule__input[b-v8c2hy327e] {
    width: auto;
}

.oo-schedule__value[b-v8c2hy327e] {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.oo-schedule__note[b-v8c2hy327e] {
    resize: vertical;
}

.oo-schedule__counter[b-v8c2hy327e] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Read-only view for the developer — preserve the line breaks the admin typed. */
.oo-schedule__note-read[b-v8c2hy327e] {
    margin: 0 0 0.75rem;
    white-space: pre-wrap;
    color: var(--text-primary);
}
/* /Components/Pages/Options.razor.rz.scp.css */
.options[b-4bngfa49b9] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 48rem;
}

.options__section[b-4bngfa49b9] {
    background: var(--bg-card);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    padding: 1.25rem 1.5rem;
}

.options__section-title[b-4bngfa49b9] {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.options__row[b-4bngfa49b9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-default, rgba(128, 128, 128, 0.1));
    cursor: pointer;
}

.options__row:first-of-type[b-4bngfa49b9] {
    border-top: none;
    padding-top: 0;
}

.options__row-text[b-4bngfa49b9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.options__row-title[b-4bngfa49b9] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.options__row-help[b-4bngfa49b9] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.options__row-input[b-4bngfa49b9] {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--brand-primary);
    margin-top: 0.25rem;
    cursor: pointer;
}

/* Number-input variant for site admin settings (e.g., Learning Sprint cooldown). Wider than
   a checkbox; reuses the form-control styling tone but compact. */
.options__row-input--num[b-4bngfa49b9] {
    width: 5rem;
    height: 2rem;
    margin-top: 0;
    padding: 0 0.5rem;
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.25));
    border-radius: 0.25rem;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: text;
}

/* Boxed subgroup for settings that belong to one feature (e.g., check-in reminders),
   so related rows read as a unit instead of blending into the section's flat list. */
.options__subgroup[b-4bngfa49b9] {
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.25));
    border-radius: 8px;
}

.options__subgroup-title[b-4bngfa49b9] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.options__subgroup-help[b-4bngfa49b9] {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.options__subgroup-actions[b-4bngfa49b9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-default, rgba(128, 128, 128, 0.1));
}

.options__subgroup-actions-help[b-4bngfa49b9] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Time-input variant for the check-in reminder send time. */
.options__row-input--time[b-4bngfa49b9] {
    width: 7.5rem;
    height: 2rem;
    margin-top: 0;
    padding: 0 0.5rem;
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.25));
    border-radius: 0.25rem;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: text;
}

/* Stacked row variant: label text above a full-width control (reminder message). */
.options__row--stacked[b-4bngfa49b9] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

.options__textarea[b-4bngfa49b9] {
    width: 100%;
    min-height: 4.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.25));
    border-radius: 0.25rem;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    resize: vertical;
    cursor: text;
}

.options__claims[b-4bngfa49b9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    margin-top: 0.75rem;
    color: var(--text-primary);
}

.options__claims th[b-4bngfa49b9] {
    text-align: left;
    padding: 0.35rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
}

.options__claims td[b-4bngfa49b9] {
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid var(--border-default, rgba(128, 128, 128, 0.08));
    vertical-align: top;
    word-break: break-word;
}

.options__claim-type[b-4bngfa49b9] {
    color: var(--text-secondary);
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.75rem;
    white-space: nowrap;
}

.options__claim-value[b-4bngfa49b9] {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.75rem;
}
/* /Components/Pages/ReferenceHub/Acronyms.razor.rz.scp.css */
.acr-filter-pills[b-gpauhwastw] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0 0 1rem;
}

.acr-empty[b-gpauhwastw] {
  text-align: center;
  color: var(--text-secondary);
  padding: 2.5rem 1rem;
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-card);
}

.acr-grid[b-gpauhwastw] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.875rem;
}

.acr-card[b-gpauhwastw] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem 1rem;
  /* --bg-card-elevated matches --bg-card in light mode but is lighter than --bg-page in
     dark mode, where --bg-card is nearly identical to --bg-page and the card reads as flat. */
  background: var(--bg-card-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.acr-card:hover[b-gpauhwastw] {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.06));
}

.acr-card:focus-visible[b-gpauhwastw] {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.acr-card--expanded[b-gpauhwastw] {
  cursor: default;
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md, 0 6px 16px rgba(0, 0, 0, 0.08));
}

.acr-card__head[b-gpauhwastw] {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  cursor: pointer;
}

.acr-card__name[b-gpauhwastw] {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.acr-card__definition[b-gpauhwastw] {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.acr-card__labels[b-gpauhwastw] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.acr-card__detail[b-gpauhwastw] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.acr-card__description[b-gpauhwastw] {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
}

.acr-card__description--empty[b-gpauhwastw] {
  color: var(--text-tertiary);
  font-style: italic;
}

.acr-card__meta[b-gpauhwastw] {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.acr-label-chip[b-gpauhwastw] {
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.0625rem 0.5rem;
}

.acr-label-chip:hover[b-gpauhwastw] {
  filter: brightness(0.95);
}

.acr-label-picker[b-gpauhwastw] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.acr-label-picker__empty[b-gpauhwastw] {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}


.acr-spacer[b-gpauhwastw] {
  flex: 1;
}
/* /Components/Pages/ReferenceHub/Links.razor.rz.scp.css */
.link-filter-pills[b-iqd6q03bhv] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0 0 1rem;
}

.link-empty[b-iqd6q03bhv] {
  text-align: center;
  color: var(--text-secondary);
  padding: 2.5rem 1rem;
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-card);
}

.link-grid[b-iqd6q03bhv] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.875rem;
}

.link-card[b-iqd6q03bhv] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem 1rem;
  /* --bg-card-elevated matches --bg-card in light mode but is lighter than --bg-page in
     dark mode, where --bg-card is nearly identical to --bg-page and the card reads as flat. */
  background: var(--bg-card-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.link-card:hover[b-iqd6q03bhv] {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.06));
}

.link-card:focus-visible[b-iqd6q03bhv] {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.link-card--expanded[b-iqd6q03bhv] {
  cursor: default;
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md, 0 6px 16px rgba(0, 0, 0, 0.08));
}

.link-card__head[b-iqd6q03bhv] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
}

.link-card__name[b-iqd6q03bhv] {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
}

.link-type-badge[b-iqd6q03bhv] {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 0.0625rem 0.5rem;
  white-space: nowrap;
}

.link-card__url-row[b-iqd6q03bhv] {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.link-card__url[b-iqd6q03bhv] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  /* --brand-primary has no dark override and goes muddy against the card surface in dark
     mode; --clr-info-text is the theme-aware blue used for this elsewhere in app.css. */
  color: var(--clr-info-text);
  text-decoration: none;
}

.link-card__url:hover[b-iqd6q03bhv] {
  text-decoration: underline;
}

.link-card__url-text[b-iqd6q03bhv] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-card__path[b-iqd6q03bhv] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 0.125rem 0.4375rem;
}

.link-card__labels[b-iqd6q03bhv] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.link-card__detail[b-iqd6q03bhv] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}

.link-card__description[b-iqd6q03bhv] {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
}

.link-card__description--empty[b-iqd6q03bhv] {
  color: var(--text-tertiary);
  font-style: italic;
}

.link-card__meta[b-iqd6q03bhv] {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.link-label-chip[b-iqd6q03bhv] {
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.0625rem 0.5rem;
}

.link-label-chip:hover[b-iqd6q03bhv] {
  filter: brightness(0.95);
}

.link-label-picker[b-iqd6q03bhv] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.link-label-picker__empty[b-iqd6q03bhv] {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.link-spacer[b-iqd6q03bhv] {
  flex: 1;
}
/* /Components/Pages/ReleaseNotes.razor.rz.scp.css */
/* Page layout handled by global .page-wrap and .page-header in app.css */

.rn-list[b-ftccv0xt4e] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.rn-card[b-ftccv0xt4e] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem 1.5rem;
}

.rn-card__header[b-ftccv0xt4e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.rn-card__meta[b-ftccv0xt4e] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

[b-ftccv0xt4e] .rn-card__meta-icon {
    color: var(--text-tertiary);
}

.rn-card__title[b-ftccv0xt4e] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.rn-card__body[b-ftccv0xt4e] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: pre-wrap;
    line-height: 1.6;
}
/* /Components/Pages/Solutions/SolutionDetail.razor.rz.scp.css */
[b-6ixd0q98s6] .sd-repo-link {
    color: var(--text-tertiary);
    margin-left: 0.25rem;
    display: inline-flex;
    vertical-align: middle;
    transition: color 0.15s ease;
}

[b-6ixd0q98s6] .sd-repo-link:hover {
    color: var(--brand-primary);
}

.sd-header-left[b-6ixd0q98s6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sd-header-actions[b-6ixd0q98s6] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

[b-6ixd0q98s6] .icon-flip-h {
    transform: rotate(90deg);
}

/* Admin phase override */
.sd-admin-override[b-6ixd0q98s6] {
    position: relative;
}

.sd-admin-btn[b-6ixd0q98s6] {
    border-style: dashed;
    border-color: var(--clr-warning-text, #d97706);
    color: var(--clr-warning-text, #d97706);
    gap: 0.25rem;
}

.sd-admin-btn:hover[b-6ixd0q98s6] {
    background: var(--clr-warning-text, #d97706);
    border-color: var(--clr-warning-text, #d97706);
    color: var(--brand-white);
}

.sd-admin-menu[b-6ixd0q98s6] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.375rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    z-index: 100;
    min-width: 180px;
}

.sd-admin-menu__item[b-6ixd0q98s6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border: none;
    border-radius: var(--border-radius);
    background: transparent;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.sd-admin-menu__item:hover:not(:disabled)[b-6ixd0q98s6] {
    background: var(--bg-page);
}

.sd-admin-menu__item--current[b-6ixd0q98s6] {
    opacity: 0.5;
    cursor: default;
}

.sd-admin-menu__current[b-6ixd0q98s6] {
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    font-style: italic;
}

.sd-grid[b-6ixd0q98s6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1rem;
}

.sd-section[b-6ixd0q98s6] {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.25rem;
}

.sd-section--full[b-6ixd0q98s6] {
    grid-column: 1 / -1;
}

.sd-section__title[b-6ixd0q98s6] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

/* Labels tag selector */
.sd-tags[b-6ixd0q98s6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.sd-save-tags[b-6ixd0q98s6] {
    margin-top: 0.75rem;
}

/* New tag inline form */
.sd-new-tag[b-6ixd0q98s6] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.sd-new-tag .form-control--sm[b-6ixd0q98s6] {
    flex: 1;
    min-width: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}

.sd-new-tag__preview[b-6ixd0q98s6] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* Developers */
.sd-dev-list[b-6ixd0q98s6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 500px;
    overflow-y: auto;
    margin-bottom: 0.75rem;
}

.sd-dev-entry[b-6ixd0q98s6] {
    display: flex;
    flex-direction: column;
}

.sd-dev-item[b-6ixd0q98s6] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
}

.sd-dev-expand[b-6ixd0q98s6] {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    color: var(--text-tertiary);
    display: inline-flex;
    transition: color 0.15s ease;
}

.sd-dev-expand:hover[b-6ixd0q98s6] {
    color: var(--brand-primary);
}

[b-6ixd0q98s6] .sd-dev-expand--open {
    transform: rotate(180deg);
}

.sd-dev-phases[b-6ixd0q98s6] {
    margin-left: 1.5rem;
    padding: 0.25rem 0 0.25rem 0.5rem;
    border-left: 2px solid var(--border-default, rgba(128, 128, 128, 0.15));
}

.sd-dev-phase[b-6ixd0q98s6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.125rem 0;
    font-size: 0.8125rem;
}

.sd-dev-phase__title[b-6ixd0q98s6] {
    font-weight: 500;
    color: var(--text-primary);
}

.sd-dev-phase__capacity[b-6ixd0q98s6] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.sd-dev-phases__empty[b-6ixd0q98s6] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-style: italic;
    padding: 0.125rem 0;
}

/* Progress bar */
.sd-progress[b-6ixd0q98s6] {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

.sd-progress-bar[b-6ixd0q98s6] {
    height: 0.375rem;
    background: var(--bg-page);
    border-radius: 999px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.sd-progress-bar__fill[b-6ixd0q98s6] {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* Checklist items */
.sd-checklist[b-6ixd0q98s6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sd-check-item[b-6ixd0q98s6] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
}

.sd-check-item--done[b-6ixd0q98s6] {
    opacity: 0.65;
}

.sd-check-item__content[b-6ixd0q98s6] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sd-check-item__title[b-6ixd0q98s6] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.sd-check-item__desc[b-6ixd0q98s6] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.sd-check-item__meta[b-6ixd0q98s6] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Checklist header */
.sd-checklist-header[b-6ixd0q98s6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Wizard modal ── */
/* Developer notes */
.sd-dev-note[b-6ixd0q98s6] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-default, rgba(128, 128, 128, 0.1));
    font-size: 0.875rem;
    color: var(--text-primary);
}

.sd-dev-note:last-child[b-6ixd0q98s6] {
    border-bottom: none;
}

.sd-dev-note--add[b-6ixd0q98s6] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
    border-bottom: none;
}

.sd-dev-note--add .btn[b-6ixd0q98s6] {
    align-self: flex-end;
}

.sd-dev-note strong[b-6ixd0q98s6] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.sd-dev-note__header[b-6ixd0q98s6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.sd-dev-note__actions[b-6ixd0q98s6] {
    display: flex;
    gap: 0.375rem;
}

.sd-dev-note__edit[b-6ixd0q98s6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* Responsive */
@media (max-width: 768px) {
    .sd-grid[b-6ixd0q98s6] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Solutions/Solutions.razor.rz.scp.css */
/* ── Layout ── */
.sol-layout[b-5fmocsd2is] {
    display: flex;
    gap: 0;
    min-height: calc(100vh - var(--header-height, 58px));
}

/* ── Sidebar Backdrop (mobile) ── */
.sol-sidebar-backdrop[b-5fmocsd2is] {
    display: none;
}

/* ── Sidebar ── */
.sol-sidebar[b-5fmocsd2is] {
    width: 220px;
    flex-shrink: 0;
    background: linear-gradient(to left, var(--bg-card), color-mix(in srgb, var(--bg-card) 0%, transparent));
    border-right: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
    padding: 1rem 0.75rem;
    overflow-y: auto;
    max-height: calc(100vh - var(--header-height, 58px));
    position: sticky;
    top: var(--header-height, 58px);
    transition: margin-left 0.2s ease, opacity 0.2s ease;
}

.sol-sidebar--hidden[b-5fmocsd2is] {
    margin-left: -220px;
    opacity: 0;
    pointer-events: none;
}

.sol-sidebar__header[b-5fmocsd2is] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
}

.sol-sidebar__header-actions[b-5fmocsd2is] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.sol-sidebar__close[b-5fmocsd2is] {
    display: none;
    color: var(--text-tertiary);
}

.sol-sidebar__close:hover[b-5fmocsd2is] {
    color: var(--text-primary);
}

.sol-sidebar__title[b-5fmocsd2is] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
}

/* ── Filter Section ── */
.sol-filter-section[b-5fmocsd2is] {
    border-bottom: 1px solid var(--border-default, rgba(128, 128, 128, 0.1));
}

.sol-filter-section__header-row[b-5fmocsd2is] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.sol-filter-section__actions[b-5fmocsd2is] {
    display: flex;
    gap: 0;
    flex-shrink: 0;
}

.sol-filter-section__actions .icon-btn[b-5fmocsd2is] {
    color: var(--text-tertiary);
    padding: 0.125rem;
}

.sol-filter-section__actions .icon-btn:hover[b-5fmocsd2is] {
    color: var(--brand-primary);
}

.sol-filter-section__header[b-5fmocsd2is] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.5rem 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
}

.sol-filter-section__header:hover[b-5fmocsd2is] {
    color: var(--brand-primary);
}

.sol-filter-section__count[b-5fmocsd2is] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--brand-primary);
    color: var(--brand-white);
    font-size: 0.625rem;
    font-weight: 700;
}

[b-5fmocsd2is] .sol-filter-chevron--open {
    transform: rotate(180deg);
}

.sol-filter-section__body[b-5fmocsd2is] {
    padding: 0 0 0.5rem 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sol-filter-check[b-5fmocsd2is] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.125rem 0;
}

.sol-filter-check input[type="checkbox"][b-5fmocsd2is] {
    accent-color: var(--brand-primary);
}

.sol-filter-note[b-5fmocsd2is] {
    margin: 0.375rem 0 0;
    font-size: 0.7188rem;
    line-height: 1.35;
    color: var(--text-tertiary);
}

.sol-bulk[b-5fmocsd2is] {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--clr-warning-bg);
    color: var(--clr-warning-fg);
    border-radius: 0.5rem;
}

.sol-bulk__row[b-5fmocsd2is] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.sol-bulk__count[b-5fmocsd2is] {
    font-weight: 700;
}

.sol-bulk__note[b-5fmocsd2is] {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.sol-bulk__blocked[b-5fmocsd2is] {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
}

.sol-bulk__blocked ul[b-5fmocsd2is] {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
}

.sol-card__select[b-5fmocsd2is] {
    flex: 0 0 auto;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

.sol-filter-color[b-5fmocsd2is] {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Main Content ── */
.sol-main[b-5fmocsd2is] {
    flex: 1;
    min-width: 0;
    padding: 1.5rem 1.5rem 1.5rem 1rem;
}

.sol-header-tools[b-5fmocsd2is] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex-shrink: 0;
}

.sol-header-action[b-5fmocsd2is] {
    color: var(--text-tertiary);
}

.sol-header-action:hover[b-5fmocsd2is] {
    color: var(--brand-primary);
}

/* ── Solution Card ── */
.sol-card[b-5fmocsd2is] {
    margin: 0 0 0.25rem 0;
    border-radius: 6px;
    background: var(--bg-subsection);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.1));
}

.sol-card--expanded[b-5fmocsd2is] {
    background: var(--bg-subsection);
}

.sol-card__row[b-5fmocsd2is] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    flex-wrap: wrap;
}

.sol-card__row:hover[b-5fmocsd2is] {
    background: var(--bg-inset);
    border-radius: 6px;
}

.sol-card__name[b-5fmocsd2is] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 500;
    font-size: 0.875rem;
    min-width: 0;
}

.sol-card__link[b-5fmocsd2is] {
  color: var(--clr-info-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sol-card__link:hover[b-5fmocsd2is] {
    text-decoration: underline;
}

[b-5fmocsd2is] .sol-card__repo {
    color: var(--text-tertiary);
    display: inline-flex;
    transition: color 0.15s ease;
}

[b-5fmocsd2is] .sol-card__repo:hover {
    color: var(--brand-primary);
}

.sol-card__meta[b-5fmocsd2is] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    min-width: 0;
}

.sol-card__developers[b-5fmocsd2is] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: normal;
    min-width: 0;
    flex: 1 1 auto;
}

/* ── Expand chevron ── */
[b-5fmocsd2is] .sol-expand-icon {
    transition: transform 0.2s ease;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

[b-5fmocsd2is] .sol-expand-icon--open {
    transform: rotate(180deg);
}

/* ── Detail panel ── */
.sol-card__detail[b-5fmocsd2is] {
    padding: 0.5rem 0.75rem 0.75rem 2rem;
    border-top: 1px solid var(--border-default, rgba(128, 128, 128, 0.1));
}

.sol-detail__grid[b-5fmocsd2is] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 2rem;
    margin-bottom: 0.75rem;
}

.sol-detail__field[b-5fmocsd2is] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sol-detail__field--full[b-5fmocsd2is] {
    grid-column: 1 / -1;
}

.sol-detail__label[b-5fmocsd2is] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.sol-detail__value[b-5fmocsd2is] {
    font-size: 0.8125rem;
    color: var(--text-primary);
    word-break: break-word;
}

.sol-detail__value a[b-5fmocsd2is] {
    color: var(--brand-primary);
    text-decoration: none;
}

.sol-detail__value a:hover[b-5fmocsd2is] {
    text-decoration: underline;
}

.sol-detail__actions[b-5fmocsd2is] {
    padding-top: 0.25rem;
}

.sol-dev-note[b-5fmocsd2is] {
    margin-bottom: 0.25rem;
}

.sol-dev-note:last-child[b-5fmocsd2is] {
    margin-bottom: 0;
}

/* ── Checklist Button ── */
.sol-checklist-btn[b-5fmocsd2is] {
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
}

/* ── Load More ── */
.sol-load-more[b-5fmocsd2is] {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

[b-5fmocsd2is] .loading-spinner--sm {
    padding: 0.5rem;
}

[b-5fmocsd2is] .loading-spinner--sm .loading-spinner__svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .sol-sidebar-backdrop[b-5fmocsd2is] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 29;
        background: rgba(0, 0, 0, 0.4);
    }

    .sol-sidebar[b-5fmocsd2is] {
        position: fixed;
        top: var(--header-height, 58px);
        left: 0;
        bottom: 0;
        z-index: 30;
        box-shadow: var(--shadow-lg);
        transition: transform 0.2s ease;
        transform: translateX(0);
    }

    .sol-sidebar--hidden[b-5fmocsd2is] {
        transform: translateX(-100%);
        margin-left: 0;
    }

    .sol-sidebar__close[b-5fmocsd2is] {
        display: inline-flex;
    }

    .sol-main[b-5fmocsd2is] {
        padding: 1rem;
    }

    .sol-card__row[b-5fmocsd2is] {
        flex-direction: column;
        align-items: flex-start;
    }

    .sol-detail__grid[b-5fmocsd2is] {
        grid-template-columns: 1fr;
    }
}

/* Derived from the latest full sync run — the service account can't see this solution's Azure
   DevOps project, so its data isn't being refreshed. Mirrors the .private-pill treatment. */
.sol-card__no-access[b-5fmocsd2is] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.4rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
    white-space: nowrap;
}
/* /Components/Pages/TeamMeeting/TeamMeeting.razor.rz.scp.css */
/* Section/list styles live in the shared .oo-disc*, .oo-history, and page-layout classes in
   app.css; only the page's column layout is local. */

/* Three columns when width allows: agenda | (reserved) | upcoming events. */
.tm-layout[b-m9p356jxyz] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
    align-items: start;
}

.tm-layout__col[b-m9p356jxyz] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Mid width: the middle column is empty for now, so hide it and sit agenda + events side by side. */
@media (max-width: 1400px) {
    .tm-layout[b-m9p356jxyz] {
        grid-template-columns: 3fr 2fr;
    }

    .tm-layout__col--middle[b-m9p356jxyz] {
        display: none;
    }
}

/* Narrow: single column — agenda first, then events. */
@media (max-width: 900px) {
    .tm-layout[b-m9p356jxyz] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/TeamMeeting/TeamMeetingAgendaList.razor.rz.scp.css */
/* Most styles live in the shared .oo-disc* classes in app.css; only the author byline is local. */

.tm-agenda__author[b-0ip12ocu20] {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: var(--text-tertiary);
    white-space: nowrap;
}
/* /Components/Pages/Team/CapacityPulse.razor.rz.scp.css */
/* Extra scroll room so badge dropdowns (Priority, Workflow, Phase, Frequency)
   have space to open below the last row without being clipped by the viewport. */
.page-wrap[b-qn2qdxb7lb] {
    padding-bottom: 5rem;
}

/* ── Header Tools (expand/collapse all) ── */
.cp-header-tools[b-qn2qdxb7lb] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex-shrink: 0;
}

.cp-header-action[b-qn2qdxb7lb] {
    color: var(--text-tertiary);
}

.cp-header-action:hover[b-qn2qdxb7lb] {
    color: var(--brand-primary);
}

/* ── User Switcher ── */
.cp-user-switcher[b-qn2qdxb7lb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cp-user-switcher__label[b-qn2qdxb7lb] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.cp-user-switcher__select[b-qn2qdxb7lb] {
    max-width: 280px;
}

.cp-user-switcher__recalc[b-qn2qdxb7lb] {
    white-space: nowrap;
}

/* ── Metrics Row ── */
.cp-metrics[b-qn2qdxb7lb] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.cp-metrics > *[b-qn2qdxb7lb] {
    flex: 1;
}

/* ── Allocation Bar ── */
.cp-allocation[b-qn2qdxb7lb] {
}

.cp-allocation__header[b-qn2qdxb7lb] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.375rem;
}

.cp-allocation__label[b-qn2qdxb7lb] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.cp-allocation__value[b-qn2qdxb7lb] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cp-allocation__value--over[b-qn2qdxb7lb] {
    color: var(--clr-over-capacity);
}

.cp-allocation__track[b-qn2qdxb7lb] {
    height: 8px;
    border-radius: 4px;
    background: var(--bg-page);
    overflow: hidden;
}

.cp-allocation__fill[b-qn2qdxb7lb] {
    height: 100%;
    border-radius: 4px;
    background: var(--brand-primary);
    transition: width 0.3s ease;
}

.cp-allocation__fill--over[b-qn2qdxb7lb] {
    background: var(--clr-over-capacity);
}

/* ── Availability Score ── */
.cp-score__header[b-qn2qdxb7lb] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.375rem;
}

.cp-score__value[b-qn2qdxb7lb] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cp-score__max[b-qn2qdxb7lb] {
    font-weight: 400;
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.cp-score__fill[b-qn2qdxb7lb] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease, background 0.3s ease;
}

.cp-score__fill--high[b-qn2qdxb7lb] {
    background: var(--clr-success-text);
}

.cp-score__fill--mid[b-qn2qdxb7lb] {
    background: var(--clr-warning-text);
}

.cp-score__fill--low[b-qn2qdxb7lb] {
    background: var(--clr-over-capacity);
}

.cp-score__value--high[b-qn2qdxb7lb] {
    color: var(--clr-success-text);
}

.cp-score__value--mid[b-qn2qdxb7lb] {
    color: var(--clr-warning-text);
}

.cp-score__value--low[b-qn2qdxb7lb] {
    color: var(--clr-over-capacity);
}

/* ── Score Details Toggle ── */
.cp-score__details-toggle[b-qn2qdxb7lb] {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--brand-primary);
    cursor: pointer;
    margin-left: 0.5rem;
    text-transform: none;
    letter-spacing: normal;
}

.cp-score__details-toggle:hover[b-qn2qdxb7lb] {
    text-decoration: underline;
}

/* ── Score Details Panel ── */
.cp-score__details[b-qn2qdxb7lb] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.1));
    border-radius: 6px;
}

.cp-score__formula[b-qn2qdxb7lb] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.625rem;
    line-height: 1.4;
}

.cp-score__details-empty[b-qn2qdxb7lb] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    font-style: italic;
}

.cp-score__backlog-tag[b-qn2qdxb7lb] {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    background: var(--bg-page);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.25));
    border-radius: 0.75rem;
}

/* Same shape as the backlog tag, in the sprint purple so the row reads as a Learning Sprint
   contribution (consistent with the Gantt stripe + outline). */
.cp-score__sprint-tag[b-qn2qdxb7lb] {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--clr-needs-review-text);
    background: var(--clr-needs-review-bg);
    border: 1px solid var(--clr-needs-review-text);
    border-radius: 0.75rem;
}

.cp-score__table[b-qn2qdxb7lb] {
    width: 100%;
    font-size: 0.75rem;
    border-collapse: collapse;
}

.cp-score__table th[b-qn2qdxb7lb] {
    text-align: left;
    font-weight: 600;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
}

.cp-score__table td[b-qn2qdxb7lb] {
    padding: 0.25rem 0.5rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-default, rgba(128, 128, 128, 0.06));
}

.cp-score__table-name[b-qn2qdxb7lb] {
    color: var(--text-primary);
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-score__table-load[b-qn2qdxb7lb] {
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

.cp-score__table th:last-child[b-qn2qdxb7lb] {
    text-align: right;
}

.cp-score__table tfoot td[b-qn2qdxb7lb] {
    border-bottom: none;
    border-top: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
    padding-top: 0.375rem;
}

/* ── Gantt ── */
.cp-gantt-wrap[b-qn2qdxb7lb] {
    margin-bottom: 1.25rem;
}

/* ── Sort Bar ── */
.cp-sort-bar[b-qn2qdxb7lb] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-default, rgba(128, 128, 128, 0.15));
}

/* ── Item Card ── */
.cp-item[b-qn2qdxb7lb] {
    padding: 0.625rem 0.75rem;
    margin: 0 0 0.25rem 0;
    border-radius: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.1));
    border-left: 3px solid transparent;
    transition: border-left-color 0.2s ease;
}

.cp-item--priority-low[b-qn2qdxb7lb] {
    border-left-color: var(--clr-success-text);
}

.cp-item--priority-medium[b-qn2qdxb7lb] {
    border-left-color: var(--brand-primary);
}

.cp-item--priority-high[b-qn2qdxb7lb] {
    border-left-color: var(--clr-warning-text);
}

.cp-item--priority-urgent[b-qn2qdxb7lb] {
    border-left-color: var(--clr-over-capacity);
}

.cp-item__row[b-qn2qdxb7lb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cp-item__name[b-qn2qdxb7lb] {
    font-weight: 500;
    font-size: 0.875rem;
    min-width: 140px;
}

.cp-item__name-row[b-qn2qdxb7lb] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.cp-item__link[b-qn2qdxb7lb] {
    color: var(--clr-info-text);
    text-decoration: none;
}

.cp-item__link:hover[b-qn2qdxb7lb] {
    text-decoration: underline;
}

[b-qn2qdxb7lb] .cp-item__repo {
    color: var(--text-tertiary);
    transition: color 0.15s ease;
    display: inline-flex;
}

[b-qn2qdxb7lb] .cp-item__repo:hover {
    color: var(--brand-primary);
}

.cp-item__project[b-qn2qdxb7lb] {
    display: block;
    font-size: 0.6875rem;
    color: var(--text-tertiary);
    font-weight: 400;
}

.cp-item__fields[b-qn2qdxb7lb] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.cp-item__field[b-qn2qdxb7lb] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.cp-item__field-label[b-qn2qdxb7lb] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.cp-item__capacity-wrap[b-qn2qdxb7lb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cp-item__capacity-wrap .number-input input[b-qn2qdxb7lb] {
    width: 72px;
}

.cp-item__percent[b-qn2qdxb7lb] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.cp-item__delete[b-qn2qdxb7lb] {
    color: var(--text-tertiary);
    transition: color 0.15s ease;
    flex-shrink: 0;
    margin-left: auto;
}

.cp-phase .confirm-delete[b-qn2qdxb7lb],
.cp-item .confirm-delete[b-qn2qdxb7lb] {
    margin-left: auto;
}

.cp-item__delete:hover[b-qn2qdxb7lb] {
    color: var(--clr-critical-text);
}

.cp-item__labels[b-qn2qdxb7lb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.cp-item__notes[b-qn2qdxb7lb] {
    margin-top: 0.375rem;
}

.cp-item__notes-input[b-qn2qdxb7lb] {
    width: 100%;
    resize: vertical;
    font-size: 0.8125rem;
    min-height: 1.75rem;
    field-sizing: content;
}

.cp-item__notes-add[b-qn2qdxb7lb] {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--brand-primary);
    cursor: pointer;
    white-space: nowrap;
}

.cp-item__notes-add:hover[b-qn2qdxb7lb] {
    text-decoration: underline;
}

.cp-item__notes-text[b-qn2qdxb7lb] {
    background: none;
    border: none;
    border-bottom: 1px dashed transparent;
    padding: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    width: 100%;
    white-space: normal;
    line-height: 1.4;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.cp-item__notes-text:hover[b-qn2qdxb7lb] {
    border-bottom-color: var(--text-tertiary);
    color: var(--text-primary);
}

/* ── Add Dialog ── */
.cp-add-tabs[b-qn2qdxb7lb] {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--bg-page);
}

.cp-add-tab[b-qn2qdxb7lb] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: none;
    background: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.cp-add-tab:hover[b-qn2qdxb7lb] {
    color: var(--text-primary);
}

.cp-add-tab--active[b-qn2qdxb7lb] {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

.cp-add-results[b-qn2qdxb7lb] {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cp-add-result[b-qn2qdxb7lb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.1));
    border-radius: 6px;
    background: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.cp-add-result:hover[b-qn2qdxb7lb] {
    background: var(--bg-page);
}

.cp-add-result__name[b-qn2qdxb7lb] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.cp-add-result__phase[b-qn2qdxb7lb] {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.cp-add-empty[b-qn2qdxb7lb] {
    text-align: center;
    color: var(--text-tertiary);
    padding: 1rem 0;
    font-size: 0.875rem;
}

.cp-add-hint[b-qn2qdxb7lb] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* ── Compact Solution Row (no work items) ── */
.cp-solution-compact[b-qn2qdxb7lb] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.cp-solution-compact .cp-item__project[b-qn2qdxb7lb] {
    display: inline;
    margin-left: 0;
}

/* ── Solution Header ── */
.cp-solution[b-qn2qdxb7lb] {
    margin: 0 0 0.5rem 0;
    border-radius: 6px;
    background: var(--bg-subsection);
    border: 1px solid var(--border-default, rgba(128, 128, 128, 0.1));
}

.cp-solution__header[b-qn2qdxb7lb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    flex-wrap: wrap;
}

.cp-solution__name[b-qn2qdxb7lb] {
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.cp-solution__actions[b-qn2qdxb7lb] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.cp-solution .cp-item__labels[b-qn2qdxb7lb] {
    padding: 0 0 0.25rem 0.25rem;
}

.cp-solution__phases[b-qn2qdxb7lb] {
    padding: 0 0 0.25rem 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ── Other Developers' Notes ── */
.cp-other-notes[b-qn2qdxb7lb] {
    padding: 0.375rem 0.75rem 0.5rem;
    border-top: 1px solid var(--border-default, rgba(128, 128, 128, 0.08));
}

.cp-other-notes__label[b-qn2qdxb7lb] {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    margin-bottom: 0.25rem;
}

.cp-other-notes__item[b-qn2qdxb7lb] {
    display: flex;
    gap: 0.375rem;
    padding: 0.125rem 0;
    font-size: 0.75rem;
    line-height: 1.4;
}

.cp-other-notes__author[b-qn2qdxb7lb] {
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.cp-other-notes__author[b-qn2qdxb7lb]::after {
    content: ":";
}

.cp-other-notes__text[b-qn2qdxb7lb] {
    color: var(--text-secondary);
}

/* ── Phase Row (under solution) ── */
.cp-phase[b-qn2qdxb7lb] {
    padding: 0.375rem 0.5rem;
    border-radius: 4px;
    background: var(--bg-inset);
    border-left: 3px solid var(--border-accent);
}

.cp-phase--priority-low[b-qn2qdxb7lb] {
    border-left-color: var(--clr-success-text);
}

.cp-phase--priority-medium[b-qn2qdxb7lb] {
    border-left-color: var(--brand-primary);
}

.cp-phase--priority-high[b-qn2qdxb7lb] {
    border-left-color: var(--clr-warning-text);
}

.cp-phase--priority-urgent[b-qn2qdxb7lb] {
    border-left-color: var(--clr-over-capacity);
}

.cp-phase__row[b-qn2qdxb7lb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cp-phase__name[b-qn2qdxb7lb] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 120px;
}

.cp-phase__title[b-qn2qdxb7lb] {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--text-primary);
    background: none;
    border: none;
    border-bottom: 1px dashed transparent;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.cp-phase__title:hover[b-qn2qdxb7lb] {
    border-bottom-color: var(--text-tertiary);
}

.cp-phase__title-input[b-qn2qdxb7lb] {
    width: 160px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.cp-phase__no-data[b-qn2qdxb7lb] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-style: italic;
    padding: 0.125rem 0;
}

/* ── Phase Title ── */
.cp-item__phase-title[b-qn2qdxb7lb] {
    display: block;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    font-weight: 500;
    font-style: italic;
}

/* ── Workflow Actions ── */
.cp-item__workflow-actions[b-qn2qdxb7lb] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* ── Reorder Arrows ── */
.cp-item__reorder[b-qn2qdxb7lb] {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex-shrink: 0;
}

.cp-item__reorder .icon-btn[b-qn2qdxb7lb] {
    font-size: 0.625rem;
    padding: 0.0625rem 0.25rem;
    line-height: 1;
    color: var(--text-tertiary);
}

.cp-item__reorder .icon-btn:not(:disabled):hover[b-qn2qdxb7lb] {
    color: var(--brand-primary);
}

.cp-item__reorder .icon-btn:disabled[b-qn2qdxb7lb] {
    opacity: 0.3;
    cursor: default;
}

/* ── Completed work items ──
   A Complete item is pinned to 0% capacity, sorts to the bottom of its list, and stays that
   way until it is moved back to In Progress. Declared after the priority modifiers so the
   neutral border wins. */
.cp-phase--complete[b-qn2qdxb7lb],
.cp-item--complete[b-qn2qdxb7lb] {
    border-left-color: var(--border-default, rgba(128, 128, 128, 0.35));
}

.cp-phase--complete .cp-phase__title[b-qn2qdxb7lb],
.cp-item--complete .cp-item__name[b-qn2qdxb7lb] {
    color: var(--text-tertiary);
}

.cp-item__capacity-wrap .number-input__btn:disabled[b-qn2qdxb7lb] {
    opacity: 0.35;
    cursor: not-allowed;
    color: var(--text-tertiary);
}

/* ── Add Phase button ── */
.cp-item__add-phase[b-qn2qdxb7lb] {
    color: var(--text-tertiary);
    transition: color 0.15s ease;
    flex-shrink: 0;
}

.cp-item__add-phase:hover[b-qn2qdxb7lb] {
    color: var(--brand-primary);
}

/* ── Add Result Assigned Badge ── */
.cp-add-result__meta[b-qn2qdxb7lb] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.cp-add-result__assigned[b-qn2qdxb7lb] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-primary);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .cp-item__row[b-qn2qdxb7lb] {
        flex-direction: column;
        align-items: flex-start;
    }

    .cp-item__fields[b-qn2qdxb7lb] {
        width: 100%;
    }

}
/* /Components/Pages/Team/CapacityPulseOverview.razor.rz.scp.css */
/* The cpo-* styles moved to wwwroot/app.css so they're shared by this page, the reusable
   CapacityDetailTable, and the one-on-one DeveloperCapacityCard. Intentionally empty. */
/* /Components/Pages/ToDoBoard.razor.rz.scp.css */
/* The board scrolls horizontally within itself so a wide set of columns never pushes the page
   sideways. min-width:0 lets the scroll container shrink inside its flex/grid parent. */
.todo-board[b-9xyipkcnn2] {
    overflow-x: auto;
    min-width: 0;
    /* Horizontal padding gives the first/last column's drop-highlight border room so the scroll
       edge doesn't clip it; the top padding does the same for the inset highlight's top edge. */
    padding: 3px 3px 0.5rem;
    scroll-padding-inline: 3px;
}

.todo-board__cols[b-9xyipkcnn2] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.todo-board__col[b-9xyipkcnn2] {
    display: flex;
    flex-direction: column;
    flex: 0 0 16rem;
    /* Hosts can cap the column height via --board-col-max-h (the dashboard card sets a smaller
       value to match its list view); the full board page uses the taller default. */
    max-height: var(--board-col-max-h, 70vh);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    /* Clip the colored header to the rounded corners so the accent color doesn't square them off. */
    overflow: hidden;
    /* Recessed lane so the elevated/white cards stand out against it — in light theme the column
       and card surfaces were both white. --bg-inset stays distinct from the page in dark mode too. */
    background: var(--bg-inset);
}

.todo-board__col--unsorted[b-9xyipkcnn2] {
    border-style: dashed;
}

/* Category accent color (set via the --col-color custom property on the column): the whole header
   takes the color, with a computed contrasting text color (--col-fg). */
.todo-board__col.has-color .todo-board__col-head[b-9xyipkcnn2] {
    background: var(--col-color);
    color: var(--col-fg);
    border-bottom-color: var(--col-color);
}

.todo-board__col.has-color .todo-board__col-title[b-9xyipkcnn2],
.todo-board__col.has-color .todo-board__col-grip[b-9xyipkcnn2] {
    color: inherit;
}

.todo-board__col.has-color .todo-board__col-grip[b-9xyipkcnn2] {
    opacity: 0.75;
}

.todo-board__col.has-color .todo-board__col-count[b-9xyipkcnn2] {
    background: rgba(0, 0, 0, 0.15);
    color: inherit;
}

/* All header action icons (including delete) take the header's contrast font color so they stay
   visible against any accent — a red delete icon would vanish on a red header. */
.todo-board__col.has-color .todo-board__col-head .icon-btn[b-9xyipkcnn2],
.todo-board__col.has-color .todo-board__col-head .icon-btn:hover[b-9xyipkcnn2] {
    color: inherit;
}

/* Drop indicators while dragging: a card lands inside the highlighted column; a dragged column
   inserts before the one showing the left bar. */
.todo-board__col.is-card-target[b-9xyipkcnn2] {
    box-shadow: inset 0 0 0 2px var(--brand-primary);
}

.todo-board__col.is-col-target[b-9xyipkcnn2] {
    box-shadow: -4px 0 0 0 var(--brand-primary);
}

.todo-board__col-head[b-9xyipkcnn2] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    cursor: grab;
}

.todo-board__col-head:active[b-9xyipkcnn2] {
    cursor: grabbing;
}

/* A focusable <button data-board-handle="col"> so columns can be reordered with the keyboard
   (left/right arrows); strip the native button chrome so it still reads as a plain grip glyph. */
.todo-board__col-grip[b-9xyipkcnn2] {
    flex: 0 0 auto;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    color: var(--text-tertiary);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1;
    cursor: grab;
    user-select: none;
}

.todo-board__col-grip:active[b-9xyipkcnn2] {
    cursor: grabbing;
}

/* Per-card keyboard handle: up/down reorder within a column, left/right move between columns. */
.todo-card__grip[b-9xyipkcnn2] {
    flex: 0 0 auto;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    color: var(--text-tertiary);
    font: inherit;
    line-height: 1;
    cursor: grab;
    user-select: none;
}

.todo-card__grip:active[b-9xyipkcnn2] {
    cursor: grabbing;
}

.todo-board__col-grip:focus-visible[b-9xyipkcnn2],
.todo-card__grip:focus-visible[b-9xyipkcnn2] {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

.todo-board__col-title[b-9xyipkcnn2] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.todo-board__col-count[b-9xyipkcnn2] {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-tertiary);
    background: var(--bg-subsection, var(--bg-page));
    border-radius: 999px;
    padding: 0.0625rem 0.375rem;
}

.todo-board__col-actions[b-9xyipkcnn2] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.todo-board__col-input[b-9xyipkcnn2] {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    padding: 0.125rem 0.375rem;
    font-size: 0.8125rem;
}

/* Compact native color swatch used in the inline column editor. */
.todo-board__col-color[b-9xyipkcnn2] {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    background: none;
    cursor: pointer;
}

/* The native swatch renders square by default; round its inner block to match the control. */
.todo-board__col-color[b-9xyipkcnn2]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.todo-board__col-color[b-9xyipkcnn2]::-webkit-color-swatch {
    border: none;
    border-radius: 0.1875rem;
}

.todo-board__col-color[b-9xyipkcnn2]::-moz-color-swatch {
    border: none;
    border-radius: 0.1875rem;
}

.todo-board__col-list[b-9xyipkcnn2] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* Inline delete panel: choose where this column's cards go, then confirm. */
.todo-board__col-delete[b-9xyipkcnn2] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-subsection, var(--bg-page));
}

.todo-board__col-delete-label[b-9xyipkcnn2] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.todo-board__col-delete-actions[b-9xyipkcnn2] {
    display: flex;
    gap: 0.375rem;
}

/* Add-column affordance sits as the last "column". */
.todo-board__add[b-9xyipkcnn2] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    padding-top: 0.5rem;
}

.todo-board__add-btn[b-9xyipkcnn2] {
    white-space: nowrap;
}

/* A draggable to-do card. */
.todo-card[b-9xyipkcnn2] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    padding: 0.25rem 0.375rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-card-elevated, var(--bg-card));
    box-shadow: var(--shadow-sm);
    cursor: grab;
}

/* In a colored column, cards get a left stripe in the category's accent color. */
.todo-board__col.has-color .todo-card[b-9xyipkcnn2] {
    border-left-width: 3px;
    border-left-color: var(--col-color);
}

.todo-card:active[b-9xyipkcnn2] {
    cursor: grabbing;
}

/* Insertion indicator: the dragged card will land just above this one. */
.todo-card.is-drop-before[b-9xyipkcnn2] {
    box-shadow: inset 0 3px 0 0 var(--brand-primary);
}

.todo-card__open[b-9xyipkcnn2] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.todo-card__title[b-9xyipkcnn2] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--text-primary);
}
/* /Components/Pages/Tracking/TrackingAssignmentItem.razor.rz.scp.css */
.track-item[b-6ngtjcabxm] {
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.1));
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Own card surface so the box reads white on any background (dashboard card
       or the plain page on /my/tracked-items), not the grey page behind it. */
    background: var(--bg-card);
}

.track-item__head[b-6ngtjcabxm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.track-item__title[b-6ngtjcabxm] {
    font-weight: 600;
}

/* Admin "Mark Complete" affordance sits opposite the title; keep it from being squeezed. */
.track-item__complete[b-6ngtjcabxm],
.track-item__complete-confirm[b-6ngtjcabxm] {
    flex-shrink: 0;
}

.track-item__desc[b-6ngtjcabxm] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Co-assignee line: muted, with the icon aligned to the text baseline row. */
.track-item__assignees[b-6ngtjcabxm] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-tertiary);
    font-size: 0.8rem;
}

/* Read-only per-engineer updates shown to a reviewer beneath their own editable block. */
.track-coassignees[b-6ngtjcabxm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-subtle, rgba(0, 0, 0, 0.1));
}

.track-coassignee[b-6ngtjcabxm] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.track-coassignee__head[b-6ngtjcabxm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.track-coassignee__name[b-6ngtjcabxm] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.track-coassignee__pct[b-6ngtjcabxm] {
    flex-shrink: 0;
    color: var(--brand-primary);
    font-variant-numeric: tabular-nums;
}

.track-coassignee__bar[b-6ngtjcabxm] {
    display: block;
    width: 100%;
}

.track-coassignee__notes[b-6ngtjcabxm] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    white-space: pre-wrap;
}

.track-coassignee__notes--empty[b-6ngtjcabxm] {
    color: var(--text-tertiary);
    font-style: italic;
}

/* Progress bar fills the row; the numeric input appears beside it only when editing. */
.track-progress[b-6ngtjcabxm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.track-progress__bar[b-6ngtjcabxm] {
    flex: 1;
}

.track-progress__input[b-6ngtjcabxm] {
    width: 80px;
    flex-shrink: 0;
}

/* Read-only summary (default state): the bar, percentage, and latest note form one
   big click target that swaps in the editor. Reset the button chrome and stack the
   bar above the note. */
.track-item__view[b-6ngtjcabxm] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    padding: 0.25rem 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    border-radius: 6px;
}

/* The bar row inside the read-only view lays out like the editing row. */
.track-item__view .track-progress[b-6ngtjcabxm] {
    width: 100%;
}

.track-item__view .track-progress__bar[b-6ngtjcabxm] {
    flex: 1;
}

.track-item__view:hover .progress-mini__fill[b-6ngtjcabxm],
.track-item__view:focus-visible .progress-mini__fill[b-6ngtjcabxm] {
    filter: brightness(1.08);
}

/* Percentage reads as the editable affordance alongside the bar. */
.track-progress__pct-text[b-6ngtjcabxm] {
    flex-shrink: 0;
    min-width: 2.75rem;
    text-align: right;
    color: var(--brand-primary);
    font-variant-numeric: tabular-nums;
}

/* Latest note shown as plain text in the read-only view. */
.track-item__notes-view[b-6ngtjcabxm] {
    color: var(--text-secondary);
    font-size: 0.85rem;
    white-space: pre-wrap;
}

.track-item__notes-view--empty[b-6ngtjcabxm] {
    color: var(--text-tertiary);
    font-style: italic;
}

.track-item__updated[b-6ngtjcabxm] {
    align-self: flex-start;
}

.track-progress__pct[b-6ngtjcabxm] {
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Auto-growing notes box (matches the check-in editor): small when short, capped
   height with a scrollbar when long. Fills the available width. */
.track-notes[b-6ngtjcabxm] {
    width: 100%;
    resize: none;
    min-height: 2.5rem;
    max-height: 12rem;
    field-sizing: content;
    overflow-y: auto;
}

.track-item__foot[b-6ngtjcabxm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
/* /Components/Pages/Training/TrainingRun.razor.rz.scp.css */
/* The card, banner, and presentation chrome are the shared module styles from app.css and
   MyModuleInstance — this page only needs the header to lay its Present button out on the
   right, since it has no back-link taking that side. */
.module-card__header[b-7wgg68n2mq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.module-card__title[b-7wgg68n2mq] {
    margin: 0;
}
/* /Components/Pages/UpcomingEventsCard.razor.rz.scp.css */
/* Hard cap so My To-Dos below it in the dashboard rail is always visible without scrolling the
   page — a busy calendar scrolls inside this list instead of pushing the to-dos off screen. */
.uec__list[b-tipnb699x2] {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 14rem;
    overflow-y: auto;
    /* Reserve the scrollbar track even before it's needed so the gap below doesn't
       cause a layout shift the first time the list overflows. */
    scrollbar-gutter: stable;
}

/* The <li> owns the separator; the inner element owns the grid and padding so a clickable
   row's hit area covers the whole strip. */
.uec__row[b-tipnb699x2] {
    border-top: 1px solid var(--border-default, rgba(128, 128, 128, 0.08));
}

.uec__row-inner[b-tipnb699x2] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 0;
    width: 100%;
}

/* Button reset — the row must look identical to its non-clickable sibling until hovered. */
.uec__row-inner--clickable[b-tipnb699x2] {
    background: none;
    border: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 0.25rem;
}

.uec__row-inner--clickable:hover[b-tipnb699x2] {
    background: var(--bg-inset);
}

.uec__row-inner--clickable:focus-visible[b-tipnb699x2] {
    outline: 2px solid var(--brand-primary);
    outline-offset: -2px;
}

.uec__row:first-of-type[b-tipnb699x2] {
    border-top: none;
}

.uec__row--today .uec__date[b-tipnb699x2] {
    /* --clr-info-text has theme-aware variants (deep blue in light, light blue in dark) so the
       "today" emphasis stays readable in dark mode where --brand-primary (dark navy) gets lost
       against the near-black page background. */
    color: var(--clr-info-text);
    font-weight: 700;
}

.uec__icon[b-tipnb699x2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.uec__icon--birthday[b-tipnb699x2] {
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
}

.uec__icon--anniversary[b-tipnb699x2] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

.uec__icon--holiday[b-tipnb699x2] {
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
}

.uec__icon--sprint[b-tipnb699x2] {
    background: var(--clr-needs-review-bg);
    color: var(--clr-needs-review-text);
}

.uec__icon--activity[b-tipnb699x2] {
    background: var(--clr-activity-bg);
    color: var(--clr-activity-text);
}

.uec__icon--training[b-tipnb699x2],
.uec__icon--default[b-tipnb699x2] {
    background: var(--clr-ignored-bg);
    color: var(--clr-ignored-text);
}

.uec__text[b-tipnb699x2] {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.uec__title[b-tipnb699x2] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uec__subtitle[b-tipnb699x2] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* "This row has an admin-written description" marker. */
.uec__desc-icon[b-tipnb699x2] {
    margin-left: 0.25rem;
    color: var(--text-tertiary);
    vertical-align: middle;
}

.uec__date[b-tipnb699x2] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}

.uec__private-pill[b-tipnb699x2] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-right: 0.4rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.uec__reveal-btn[b-tipnb699x2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 0.35rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    vertical-align: middle;
}

.uec__reveal-btn:hover[b-tipnb699x2],
.uec__reveal-btn:focus-visible[b-tipnb699x2] {
    background: var(--bg-page);
    color: var(--text-primary);
    border-color: var(--border-default, rgba(128, 128, 128, 0.2));
    outline: none;
}

.uec__masked-text[b-tipnb699x2] {
    color: var(--text-tertiary);
    font-style: italic;
    letter-spacing: 0.05em;
}
/* /Components/Pages/VotingBoardCard.razor.rz.scp.css */
/* Same look as Home's .dash-card__count (scoped CSS doesn't cross components). */
.vbc-count[b-zmm98feob5] {
    margin-left: auto;
    background: var(--bg-inset);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

/* Top margin only: .dash-card__header carries no margin-bottom, so without this the first
   row sits flush against the "Voting" heading. */
.vbc-list[b-zmm98feob5] {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.vbc-row[b-zmm98feob5] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .3rem .4rem;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    color: var(--text-primary);
}

.vbc-row:hover[b-zmm98feob5],
.vbc-row:focus-visible[b-zmm98feob5] {
    background: var(--bg-page);
}

/* 0.875rem, matching .uec__title on Upcoming Events: a list row must step down from the
   1rem .dash-card__title, or the board names read as card headings instead of items. */
.vbc-row__title[b-zmm98feob5] {
    font-size: .875rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vbc-row__closes[b-zmm98feob5] {
    margin-left: auto;
    font-size: .78rem;
    color: var(--text-tertiary);
    white-space: nowrap;
}
/* /Components/Pages/Voting/VotingBoardAudienceDialog.razor.rz.scp.css */
.vba-warn[b-l2ow3mxizb] {
    margin: 0 0 .6rem;
    padding: .45rem .6rem;
    border-radius: var(--border-radius-sm);
    background: var(--clr-warning-bg);
    color: var(--clr-warning-text);
    border: 1px solid var(--clr-warning-border);
    font-size: .85rem;
}

.vba-intro[b-l2ow3mxizb] {
    margin: 0 0 .6rem;
    color: var(--text-secondary);
}

.vba-history[b-l2ow3mxizb] {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    margin: 0 0 .6rem;
    font-size: .85rem;
    color: var(--clr-success-text);
}

.vba-summary[b-l2ow3mxizb] {
    margin: .1rem 0 .8rem;
    font-size: .88rem;
    color: var(--text-secondary);
}

/* Sits in the Send-by list under the Email checkbox; the notify body's column gap spaces it.
   Checkbox first so it lines up with the channel checkboxes above, button trailing. */
.vba-groupchat[b-l2ow3mxizb] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .1rem 0 .15rem;
}

/* Blue like the "everyone" group-chat button on the board's participation panel — this chat is
   the whole audience, so it carries the same info palette rather than the neutral button chrome. */
.vba-groupchat__link[b-l2ow3mxizb] {
    background: var(--clr-info-bg);
    border: 1.5px solid var(--clr-info-border);
    color: var(--clr-info-text);
}

.vba-groupchat__link:hover[b-l2ow3mxizb] {
    filter: brightness(0.95);
}

.dark-theme .vba-groupchat__link:hover[b-l2ow3mxizb] {
    filter: brightness(1.15);
}

.vba-audience-header[b-l2ow3mxizb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .3rem;
}

.vba-bulk[b-l2ow3mxizb] {
    display: flex;
    gap: .4rem;
}

.vba-list[b-l2ow3mxizb] {
    list-style: none;
    margin: 0 0 .4rem;
    padding: 0;
    max-height: 12rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    background: var(--bg-card);
}

.vba-list > li + li .vba-row[b-l2ow3mxizb] {
    border-top: 1px solid var(--border);
}

.vba-row[b-l2ow3mxizb] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .65rem;
    cursor: pointer;
    color: var(--text-primary);
    font-size: .9rem;
}

.vba-row:hover[b-l2ow3mxizb] {
    background: var(--bg-inset);
}

.vba-row.is-selected[b-l2ow3mxizb] {
    background: var(--clr-info-bg);
}

.vba-row__name[b-l2ow3mxizb] {
    flex: 1 1 auto;
}

.vba-row__tag[b-l2ow3mxizb] {
    font-size: .72rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Voted / no-vote-yet badges — the icon carries the state at a glance, so keep both
   inline-flex; only the voted state gets the success color. */
.vba-row__tag--voted[b-l2ow3mxizb],
.vba-row__tag--no-vote[b-l2ow3mxizb] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}

.vba-row__tag--voted[b-l2ow3mxizb] {
    color: var(--clr-success-text);
}

.vba-open-all[b-l2ow3mxizb] {
    margin-bottom: .35rem;
    font-weight: 600;
}

.vba-open-all__hint[b-l2ow3mxizb] {
    margin: 0 0 .6rem 1.6rem;
}

.vba-invite[b-l2ow3mxizb] {
    margin: .5rem 0 .3rem;
}

.vba-invite__row[b-l2ow3mxizb] {
    display: flex;
    gap: .4rem;
    align-items: center;
}

.vba-invite__row .form-control[b-l2ow3mxizb] {
    flex: 1 1 auto;
}

.vba-invite__error[b-l2ow3mxizb] {
    margin: .25rem 0 0;
    font-size: .85rem;
    color: var(--clr-critical-text);
}

/* Known-guest typeahead results — same contract as the handbook collaborator search
   (HtmlDocumentAuthor.razor.css); the styles are scoped per component. */
.link-search-results[b-l2ow3mxizb] {
    list-style: none;
    margin: .35rem 0 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    max-height: 220px;
    overflow-y: auto;
}

.link-search-results__item[b-l2ow3mxizb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .4rem .6rem;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 0;
    border-bottom: 1px solid var(--border);
    text-align: left;
    cursor: pointer;
}

.link-search-results li:last-child .link-search-results__item[b-l2ow3mxizb] {
    border-bottom: 0;
}

.link-search-results__item:hover[b-l2ow3mxizb],
.link-search-results__item:focus-visible[b-l2ow3mxizb] {
    background: var(--bg-subsection);
    outline: none;
}

.link-search-results__title[b-l2ow3mxizb] {
    color: var(--text-primary);
}

.link-search-results__meta[b-l2ow3mxizb] {
    font-size: .8rem;
    color: var(--text-tertiary);
    overflow-wrap: anywhere;
}

.vba-chiplist[b-l2ow3mxizb] {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: .4rem 0 0;
    padding: 0;
}

.vba-chip[b-l2ow3mxizb] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .3rem .2rem .6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-inset);
    font-size: .85rem;
    color: var(--text-primary);
}

.vba-chip__email[b-l2ow3mxizb] {
    overflow-wrap: anywhere;
}

.vba-notify[b-l2ow3mxizb] {
    margin-top: .25rem;
    padding-top: .65rem;
    border-top: 1px solid var(--border);
}

.vba-notify__toggle[b-l2ow3mxizb] {
    font-weight: 600;
}

/* Indented so the revealed controls read as belonging to the toggle above them. */
.vba-notify__body[b-l2ow3mxizb] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: .5rem 0 0 1.6rem;
}

.vba-scope[b-l2ow3mxizb] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .4rem;
}

.vba-message[b-l2ow3mxizb] {
    resize: vertical;
}

.vba-check[b-l2ow3mxizb] {
    display: flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    color: var(--text-primary);
}

.vba-actions[b-l2ow3mxizb] {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: .85rem;
}
/* /Components/Pages/Voting/VotingBoardCollaboratorsDialog.razor.rz.scp.css */
.vbc-list[b-l50ii88tp5] {
    list-style: none;
    margin: .5rem 0 .35rem;
    padding: 0;
    max-height: 18rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    background: var(--bg-card);
}

.vbc-list > li + li .vbc-row[b-l50ii88tp5] {
    border-top: 1px solid var(--border);
}

.vbc-row[b-l50ii88tp5] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .75rem;
    cursor: pointer;
    color: var(--text-primary);
}

.vbc-row:hover[b-l50ii88tp5] {
    background: var(--bg-inset);
}

.vbc-row.is-selected[b-l50ii88tp5] {
    background: var(--clr-info-bg);
}

.vbc-row__name[b-l50ii88tp5] {
    font-size: .9rem;
}

.vbc-count[b-l50ii88tp5] {
    margin: 0 0 .25rem;
    font-size: .78rem;
    color: var(--text-tertiary);
}

.vbc-actions[b-l50ii88tp5] {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: .5rem;
}
/* /Components/Pages/Voting/VotingBoardDetail.razor.rz.scp.css */
/* Same look as the chips on the /voting list (scoped CSS doesn't cross components). */
.vb-chip[b-4rk17obtua] {
    font-size: .72rem;
    font-weight: 400;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--text-secondary);
    white-space: nowrap;
}

.vb-chip--muted[b-4rk17obtua] {
    color: var(--text-tertiary);
}

/* The board's voting method — the one chip that classifies the board rather than reporting its
   state, so it gets the info palette to stand out. Same rule as the /voting list row. */
.vb-chip--method[b-4rk17obtua] {
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
    border: 1px solid var(--clr-info-border);
}

.vb-chip--owner[b-4rk17obtua] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* Stacks the breadcrumb over the title so the sticky header stays a two-column
   flex row (heading block vs. actions). */
.vbd-head[b-4rk17obtua] {
    min-width: 0;
}

/* Same treatment as the handbook item breadcrumb (.hb-breadcrumb in app.css) —
   quiet, one line, sitting just above the page title. */
.vbd-breadcrumb[b-4rk17obtua] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0 0 0.15rem;
}

.vbd-breadcrumb a[b-4rk17obtua] {
    color: var(--text-secondary);
    text-decoration: none;
}

.vbd-breadcrumb a:hover[b-4rk17obtua] {
    text-decoration: underline;
}

.vbd-breadcrumb__current[b-4rk17obtua] {
    color: var(--text-tertiary);
}

/* Title + owner chip sit together on the header line. */
.vbd-title[b-4rk17obtua] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* The rename pencil stays quiet next to the title until hovered/focused. */
.vbd-title__edit-btn[b-4rk17obtua] {
    color: var(--text-tertiary);
}

.vbd-title:hover .vbd-title__edit-btn[b-4rk17obtua],
.vbd-title__edit-btn:hover[b-4rk17obtua],
.vbd-title__edit-btn:focus-visible[b-4rk17obtua] {
    color: var(--text-secondary);
}

.vbd-title__edit[b-4rk17obtua] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.vbd-title__input[b-4rk17obtua] {
    font-size: 1.15rem;
    font-weight: 600;
    min-width: 16rem;
    max-width: 100%;
}

/* "Get latest results" refresh — spins while the reload is in flight. The <svg> comes from the
   child <Icon> component, so pierce the scope boundary with ::deep to animate it. */
.vbd-refresh.is-spinning[b-4rk17obtua]  svg {
    animation: vbd-refresh-spin-b-4rk17obtua .6s linear infinite;
}

@keyframes vbd-refresh-spin-b-4rk17obtua {
    to {
        transform: rotate(360deg);
    }
}

/* The repeat of "Add item" under the list, centred on the list's width so it reads as the end of
   the list rather than a stray control in the page margin. */
.vbd-add-bottom[b-4rk17obtua] {
    display: flex;
    justify-content: center;
    margin: .85rem 0 .25rem;
}

/* Marks a control that only board managers can see, so the person looking at it doesn't assume
   the audience has it too. Dashed and muted on purpose: the app's focus ring is a 2px SOLID
   brand-colored outline, so this can't be mistaken for keyboard focus. */
.vbd-managers-only[b-4rk17obtua] {
    outline: 2px dashed var(--text-tertiary);
    /* 2px keeps the ring inside the header's 0.5rem gap between action buttons. */
    outline-offset: 2px;
}

.vbd-status[b-4rk17obtua] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .75rem 0;
}

.vbd-reopen[b-4rk17obtua] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.vbd-reopen__label[b-4rk17obtua] {
    font-size: .8rem;
    color: var(--text-secondary);
}

.vbd-reopen__input[b-4rk17obtua] {
    width: auto;
}

/* Every message in this row is a pill, which is what separates board state from the board's
   description sitting right below it — that paragraph is the only running prose in the area, so
   pills keep the two from reading as one block of text. One geometry, three palettes. Radius
   matches the .vb-chip language up in the title. */
.vbd-status__pill[b-4rk17obtua] {
    display: inline-flex;
    align-items: center;
    font-size: .85rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
}

/* Light mode gets the separation for free — --bg-card is white against a grey --bg-page. Dark mode
   doesn't: --bg-card is only a hair off --bg-page, so the fill disappears and only the border
   reads. --bg-inset is the one step up that makes the pill a surface again.
   Ancestor selector, so CSS isolation only scopes the trailing .vbd-status__pill. */
.dark-theme .vbd-status__pill[b-4rk17obtua] {
    background: var(--bg-inset);
}

/* The one number in the row that's about YOU rather than about the board, so it carries the info
   palette. The --clr-info-* trio ships its own dark-theme values, so no per-theme override here. */
.vbd-status__pill--budget[b-4rk17obtua] {
    font-weight: 600;
    background: var(--clr-info-bg);
    border-color: var(--clr-info-border);
    color: var(--clr-info-text);
}

/* A closed board is settled, not urgent — recedes rather than announcing itself. */
.vbd-status__pill--closed[b-4rk17obtua] {
    color: var(--text-tertiary);
}

.vbd-desc[b-4rk17obtua] {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    white-space: pre-line;
}

.vbd-sort[b-4rk17obtua] {
    display: flex;
    align-items: center;
    gap: .4rem;
    justify-content: flex-end;
    margin-bottom: .5rem;
}

/* The owner tidy action sits on the left; the view-sort control stays right. */
.vbd-sort__tidy[b-4rk17obtua] {
    margin-right: auto;
}

.vbd-sort__label[b-4rk17obtua] {
    font-size: .8rem;
    color: var(--text-secondary);
}

.vbd-sort__select[b-4rk17obtua] {
    width: auto;
}

.vbd-items[b-4rk17obtua] {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;

    /* Size to the widest item's natural content (short lists stay compact) rather than always
       stretching edge-to-edge, but stop growing once an item's title/description genuinely needs
       the room — cap there and let that item's text wrap instead of the whole list ballooning
       wider on large monitors. min(...) also protects narrow viewports (mobile). The auto
       inline margins above center the (now narrower) list under the full-width toolbar. */
    width: max-content;
    max-width: min(1200px, 100%);
}

.vbd-item[b-4rk17obtua] {
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    background: var(--bg-card);
    padding: .6rem .75rem;
}

.vbd-item__row[b-4rk17obtua] {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}

.vbd-item__handle[b-4rk17obtua] {
    background: none;
    border: none;
    cursor: grab;
    color: var(--text-tertiary);
    padding: .2rem .1rem;
    align-self: center;
}

.vbd-item__vote[b-4rk17obtua] {
    flex: 0 0 auto;
    align-self: center;
}

.vbd-item__main[b-4rk17obtua] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.vbd-item__titlerow[b-4rk17obtua] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.vbd-item__title[b-4rk17obtua] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.vbd-item__tally[b-4rk17obtua] {
    font-size: .8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.vbd-item__bar[b-4rk17obtua] {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-page);
    overflow: hidden;
}

.vbd-item__bar-fill[b-4rk17obtua] {
    height: 100%;
    border-radius: 999px;
    background: var(--brand-primary);
    transition: width .25s ease;
}

.vbd-item__voters[b-4rk17obtua] {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}

.vbd-item__desc[b-4rk17obtua] {
    margin-top: .5rem;
    border-radius: var(--border-radius-sm);
    padding: .5rem .75rem;
}

/* Managers-only participation roll under the items: voted on the left, still outstanding on the
   right. Full width (like the sort toolbar above the list) rather than shrink-to-fit, so a board
   with two short names doesn't render a hairline-thin panel. Stacks on narrow viewports. */
.vbd-participation[b-4rk17obtua] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    width: 100%;
    max-width: min(1200px, 100%);
    margin: 1.25rem auto 0;
}

@media (max-width: 640px) {
    .vbd-participation[b-4rk17obtua] {
        grid-template-columns: 1fr;
    }
}

.vbd-participation__col[b-4rk17obtua] {
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    background: var(--bg-card);
    padding: .6rem .75rem;
    min-width: 0;
}

.vbd-participation__heading[b-4rk17obtua] {
    margin: 0 0 .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.vbd-participation__names[b-4rk17obtua] {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}

.vbd-participation__empty[b-4rk17obtua] {
    margin: 0;
    font-size: .85rem;
    color: var(--text-tertiary);
}

/* Group-chat buttons under both columns — a full-width grid row so they read as acting on the
   whole roll, not on one side. */
.vbd-participation__actions[b-4rk17obtua] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* Tinted like the status pills (.vbd-status__pill--budget), and shared with the matching
   .vbd-chip-- variants below the participation names: same color for the group-chat button as
   for the list it's chatting with, so which audience a click targets is obvious before reading
   the label — green for voted, red for not voted, blue for everyone. Buttons add a border (every
   .btn variant has one); the chips stay borderless like the rest of the .vb-chip family. */
.vbd-groupchat--voted[b-4rk17obtua],
.vbd-chip--voted[b-4rk17obtua] {
    background: var(--clr-success-bg);
    color: var(--clr-success-text);
}

.vbd-groupchat--not-voted[b-4rk17obtua],
.vbd-chip--not-voted[b-4rk17obtua] {
    /* --clr-critical-bg is the one saturated critical token (its -text is a pale foreground
       meant to sit ON that red, not the other way around — see the .dash-card--alert comment
       above) — color-mix tints it into the same light, translucent look success/info get for
       free from their own pale -bg tokens, instead of the solid alarm-red block. */
    background: color-mix(in srgb, var(--clr-critical-bg) 15%, transparent);
    color: var(--clr-critical-bg);
}

.vbd-groupchat--everyone[b-4rk17obtua] {
    background: var(--clr-info-bg);
    border: 1.5px solid var(--clr-info-border);
    color: var(--clr-info-text);
}

.vbd-groupchat--voted[b-4rk17obtua] {
    border: 1.5px solid var(--clr-success-border);
}

.vbd-groupchat--not-voted[b-4rk17obtua] {
    border: 1.5px solid var(--clr-critical-border);
}

.vbd-groupchat:hover[b-4rk17obtua] {
    filter: brightness(0.95);
}

.dark-theme .vbd-groupchat:hover[b-4rk17obtua] {
    filter: brightness(1.15);
}

/* Per-person Teams follow-up inside a participation chip — quiet until pointed at, so the
   roll still reads as names first. */
.vbd-chip-teams[b-4rk17obtua] {
    display: inline-flex;
    align-items: center;
    margin-left: .35rem;
    color: var(--text-tertiary);
}

.vbd-chip-teams:hover[b-4rk17obtua],
.vbd-chip-teams:focus-visible[b-4rk17obtua] {
    color: var(--text-primary);
}

/* Upvote toggle */
.vbd-upvote[b-4rk17obtua] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 600;
}

/* Hover is a NEUTRAL emphasis — blue is reserved for the voted state so a hover never looks
   like a cast vote. */
.vbd-upvote:hover:not(:disabled)[b-4rk17obtua] {
    background: var(--bg-inset);
    border-color: var(--brand-gray);
    color: var(--text-primary);
}

.vbd-upvote:focus-visible[b-4rk17obtua] {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.vbd-upvote.is-active[b-4rk17obtua] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-white);
}

/* Hovering a cast vote stays blue (just a touch darker) so it still reads as voted, while
   signalling it's clickable to remove. */
.vbd-upvote.is-active:hover:not(:disabled)[b-4rk17obtua] {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    color: var(--brand-white);
}

.vbd-upvote:disabled[b-4rk17obtua] {
    cursor: default;
    opacity: .6;
}

/* Single-pick radio-style button */
.vbd-pick[b-4rk17obtua] {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.vbd-pick:hover:not(:disabled)[b-4rk17obtua],
.vbd-pick:focus-visible[b-4rk17obtua] {
    border-color: var(--brand-primary);
}

.vbd-pick.is-active[b-4rk17obtua] {
    border-color: var(--brand-primary);
}

/* Hovering your own pick means "clear this", not "select this" — a radio's visual language
   gives no hint that it can be deselected, so this hover state is the affordance. */
.vbd-pick.is-active:hover:not(:disabled)[b-4rk17obtua],
.vbd-pick.is-active:focus-visible[b-4rk17obtua] {
    border-color: var(--icon-btn-danger-color);
}

    .vbd-pick.is-active:hover:not(:disabled) .vbd-pick__dot[b-4rk17obtua],
    .vbd-pick.is-active:focus-visible .vbd-pick__dot[b-4rk17obtua] {
        background: var(--icon-btn-danger-color);
        opacity: .55;
    }

.vbd-pick__dot[b-4rk17obtua] {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: transparent;
}

.vbd-pick.is-active .vbd-pick__dot[b-4rk17obtua] {
    background: var(--brand-primary);
}

.vbd-pick:disabled[b-4rk17obtua] {
    cursor: default;
    opacity: .6;
}

/* Multi-select checkbox — square on purpose, so "check all that apply" reads differently from
   the round single-pick radio at a glance. */
.vbd-check[b-4rk17obtua] {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--border-radius-sm);
    border: 2px solid var(--border);
    background: var(--bg-card);
    color: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.vbd-check:hover:not(:disabled)[b-4rk17obtua],
.vbd-check:focus-visible[b-4rk17obtua] {
    border-color: var(--brand-primary);
}

.vbd-check.is-active[b-4rk17obtua] {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-white);
}

/* Same affordance as the single pick: hovering a checked box means "clear this". */
.vbd-check.is-active:hover:not(:disabled)[b-4rk17obtua],
.vbd-check.is-active:focus-visible[b-4rk17obtua] {
    background: var(--icon-btn-danger-color);
    border-color: var(--icon-btn-danger-color);
}

.vbd-check:disabled[b-4rk17obtua] {
    cursor: default;
    opacity: .6;
}

/* Yes / Maybe / No answer group. Text labels rather than icons or colour alone — the answer has
   to survive a screen reader and a colour-blind viewer, so the tint only reinforces the word. */
.vbd-tri[b-4rk17obtua] {
    display: inline-flex;
    gap: .2rem;
    padding: .15rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-inset);
}

.vbd-tri__btn[b-4rk17obtua] {
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    padding: .3rem .55rem;
    white-space: nowrap;
}

.vbd-tri__btn:hover:not(:disabled)[b-4rk17obtua] {
    background: var(--bg-card);
    color: var(--text-primary);
}

.vbd-tri__btn:focus-visible[b-4rk17obtua] {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

.vbd-tri__btn:disabled[b-4rk17obtua] {
    cursor: default;
    opacity: .45;
}

.vbd-tri__btn--yes.is-active[b-4rk17obtua] {
    background: var(--clr-success-bg);
    border-color: var(--clr-success-border);
    color: var(--clr-success-text);
}

.vbd-tri__btn--maybe.is-active[b-4rk17obtua] {
    background: var(--clr-warning-bg);
    border-color: var(--clr-warning-border);
    color: var(--clr-warning-text);
}

/* Critical is app.css's one INVERTED pair — --clr-critical-bg is the saturated red and
   --clr-critical-text is the pale foreground meant to sit on it, so there's no pale-bg token to
   mirror success/warning with. Same color-mix treatment as .vbd-chip--not-voted. */
.vbd-tri__btn--no.is-active[b-4rk17obtua] {
    background: color-mix(in srgb, var(--clr-critical-bg) 15%, transparent);
    border-color: var(--clr-critical-bg);
    color: var(--clr-critical-bg);
}

/* Hovering your own answer means "clear this" — the same affordance .vbd-pick uses, since a
   radio gives no hint that it can be deselected. The tooltip carries the words. */
.vbd-tri__btn.is-active:hover:not(:disabled)[b-4rk17obtua] {
    background: var(--bg-card);
    border-color: var(--icon-btn-danger-color);
    color: var(--icon-btn-danger-color);
}

/* Voter chips on a tri-state board: the name alone would imply everyone listed picked the item. */
.vbd-voter--maybe[b-4rk17obtua] {
    opacity: .8;
    font-style: italic;
}

.vbd-voter--no[b-4rk17obtua] {
    text-decoration: line-through;
    opacity: .7;
}

/* Budget stepper */
.vbd-stepper[b-4rk17obtua] {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .1rem;
    background: var(--bg-card);
}

.vbd-stepper__btn[b-4rk17obtua] {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: 50%;
    background: var(--bg-page);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
}

.vbd-stepper__btn:hover:not(:disabled)[b-4rk17obtua],
.vbd-stepper__btn:focus-visible[b-4rk17obtua] {
    background: var(--brand-primary);
    color: var(--brand-white);
}

.vbd-stepper__btn:disabled[b-4rk17obtua] {
    cursor: default;
    opacity: .45;
}

.vbd-stepper__value[b-4rk17obtua] {
    min-width: 1.4rem;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Voting/VotingBoardDialog.razor.rz.scp.css */
.vb-check[b-gwh7zox6wd] {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .15rem 0;
    cursor: pointer;
    color: var(--text-primary);
}

.vb-userpick[b-gwh7zox6wd] {
    max-height: 12rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    padding: .4rem .6rem;
    margin-top: .35rem;
}

.vb-dialog__actions[b-gwh7zox6wd] {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: .5rem;
}
/* /Components/Pages/Voting/VotingBoardItemDialog.razor.rz.scp.css */
.vb-dialog__actions[b-6nl51g6ygy] {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: .5rem;
}
/* /Components/Pages/Voting/VotingBoardRow.razor.rz.scp.css */
/* Row styles live with the row markup — scoped CSS can't reach a child component's DOM,
   so these moved here out of VotingBoards.razor.css when the row was extracted. */
.vb-row-wrap[b-shz2vx8mz9] {
    position: relative;
    display: flex;
}

.vb-row[b-shz2vx8mz9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .65rem .85rem;
    border: 1px solid var(--border);
    border-radius: var(--border-radius-sm);
    background: var(--bg-card);
    text-decoration: none;
    color: var(--text-primary);
}

.vb-row:hover[b-shz2vx8mz9],
.vb-row:focus-visible[b-shz2vx8mz9] {
    border-color: var(--brand-primary);
}

.vb-row--closed[b-shz2vx8mz9] {
    opacity: .75;
}

/* Keeps the right-edge chips clear of the revealed archive button. */
.vb-row--has-action[b-shz2vx8mz9] {
    padding-right: 2.6rem;
}

.vb-row__main[b-shz2vx8mz9] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.vb-row__title[b-shz2vx8mz9] {
    font-weight: 600;
}

.vb-row__meta[b-shz2vx8mz9] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    font-size: .82rem;
    color: var(--text-secondary);
}

/* Hover-reveal action, same mechanics as the shared .chip-wrap / .chip-edit-btn pattern:
   hidden until the row is hovered or something inside it takes focus, so the list stays quiet. */
.vb-row__archive[b-shz2vx8mz9] {
    position: absolute;
    top: 50%;
    right: .6rem;
    transform: translateY(-50%) scale(.9);
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-tertiary);
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, transform .12s ease, color .12s ease, border-color .12s ease;
}

.vb-row-wrap:hover .vb-row__archive[b-shz2vx8mz9],
.vb-row-wrap:focus-within .vb-row__archive[b-shz2vx8mz9] {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.vb-row__archive:hover:not(:disabled)[b-shz2vx8mz9] {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.vb-row__archive:disabled[b-shz2vx8mz9] {
    cursor: default;
}

/* Touch devices never hover — keep the control permanently visible there. */
@media (hover: none) {
    .vb-row__archive[b-shz2vx8mz9] {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

.vb-chip[b-shz2vx8mz9] {
    font-size: .72rem;
    font-weight: 600;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--bg-page);
    color: var(--text-secondary);
    white-space: nowrap;
}

.vb-chip--muted[b-shz2vx8mz9] {
    color: var(--text-tertiary);
}

.vb-chip--owner[b-shz2vx8mz9] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* The board's voting method — the one chip that classifies the board rather than reporting its
   state, so it gets the info palette to stand out in a long list. Blue, not warning-yellow: it's
   a neutral label, and it has to sit beside the brand-red "Vote now" call to action below without
   competing with it. */
.vb-chip--method[b-shz2vx8mz9] {
    background: var(--clr-info-bg);
    color: var(--clr-info-text);
    border: 1px solid var(--clr-info-border);
}

.vb-chip--vote[b-shz2vx8mz9] {
    background: var(--brand-primary);
    color: var(--brand-white);
}
/* /Components/Pages/Voting/VotingBoards.razor.rz.scp.css */
/* Row and chip styles live in VotingBoardRow.razor.css — scoped CSS can't reach a child
   component's DOM, so they moved with the markup. */
.vb-list[b-smalk2tvy5] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}