/* src/styles/recruitment.css
 * The Recruitment dashboard (/sohk/recruitment). New rules only, on top of
 * tokens.css and app.css. Every class is prefixed `rc-` so nothing here can
 * touch another page.
 *
 * Colour and spacing come from the root tokens in tokens.css. The few extra
 * tones the page needs (amber for "check this", the synthetic frame) are
 * defined once on .rc-page so a dialog rendered inside it inherits them.
 *
 * Responsive: two breakpoints, 720px (tablet and down) and 480px (phone).
 * The page must never scroll sideways at 375px; wide content (tables, the tab
 * bar) scrolls inside its own container instead.
 *
 * Sections
 *   1. Page frame and tokens        4. Gate, loading, stub
 *   2. Buttons and focus            5. Overlay, dialog, drawer
 *   3. Status line, banners, tabs   6. Shared primitives for the views
 *   7. Breakpoints
 */

/* ------------------------------------------------------ 1. Page frame */

.rc-page {
    --rc-warn: #ffb454;
    --rc-warn-bg: rgba(255, 180, 84, .1);
    --rc-warn-line: rgba(255, 180, 84, .35);
    --rc-neg-bg: rgba(255, 107, 125, .08);
    --rc-neg-line: rgba(255, 107, 125, .32);
    --rc-pos-bg: rgba(55, 224, 166, .08);
    --rc-pos-line: rgba(55, 224, 166, .3);
    --rc-synth: #b99cff;
    --rc-synth-bg: rgba(139, 109, 255, .1);
    --rc-synth-line: rgba(139, 109, 255, .5);
    position: relative;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* Synthetic data gets a dashed frame so it cannot be mistaken for the real thing. */
.rc-page.rc-synthetic {
    border: 2px dashed var(--rc-synth-line);
    border-radius: 18px;
    padding: 14px;
}

.rc-page h2,
.rc-page h3 {
    margin: 0;
    font-weight: 640;
    letter-spacing: -.02em;
}

.rc-page p {
    margin: 0;
}

.rc-muted {
    color: var(--text-dim);
}

.rc-faint {
    color: var(--text-faint);
}

.rc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.rc-scroll-lock {
    overflow: hidden;
}

/* ------------------------------------------------- 2. Buttons and focus */

.rc-btn {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    min-height: 36px;
    padding: 8px 15px;
    border-radius: 11px;
    border: 1px solid var(--hairline);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}

.rc-btn:hover:not(:disabled) {
    color: #fff;
    border-color: var(--hairline-strong);
}

.rc-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.rc-btn-primary {
    color: #fff;
    border: 0;
    background: linear-gradient(180deg, var(--accent), #5a76f0);
    box-shadow: 0 6px 18px -8px var(--accent-glow);
}

.rc-btn-primary:hover:not(:disabled) {
    filter: brightness(1.08);
}

.rc-btn-danger {
    color: var(--neg);
    border-color: var(--rc-neg-line);
}

/* The one hand entry allowed over verified provider evidence: visibly set apart from Record attendance. */
.rc-btn-override {
    color: var(--rc-warn);
    border-color: var(--rc-warn-line);
    background: var(--rc-warn-bg);
}

.rc-btn-override:hover:not(:disabled) {
    color: var(--rc-warn);
    border-color: var(--rc-warn);
}

/* A visible focus ring on everything the keyboard can reach. */
.rc-page :focus-visible,
.rc-page button:focus-visible,
.rc-page input:focus-visible,
.rc-page select:focus-visible,
.rc-page textarea:focus-visible,
.rc-page [tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ----------------------------------- 3. Status line, banners and tabs */

.rc-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    flex-wrap: wrap;
}

.rc-status-text {
    flex: 1 1 260px;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.rc-status-activity {
    color: var(--accent);
    font-weight: 600;
}

.rc-status-actor {
    margin-left: 6px;
    color: var(--text-faint);
}

/* M372: the small "View only" label for a view-only reader. */
.rc-viewonly {
    margin-left: 8px;
    vertical-align: middle;
    white-space: nowrap;
}

.rc-banners {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rc-banners:empty {
    display: none;
}

.rc-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 11px 15px;
    border-radius: 13px;
    border: 1px solid var(--hairline-strong);
    background: var(--card);
    font-size: 13px;
    line-height: 1.5;
}

.rc-banner > span:first-child {
    flex: 1 1 260px;
    min-width: 0;
}

.rc-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rc-banner-warn {
    color: var(--rc-warn);
    background: var(--rc-warn-bg);
    border-color: var(--rc-warn-line);
}

.rc-banner-error {
    color: #ffb4bd;
    background: var(--rc-neg-bg);
    border-color: var(--rc-neg-line);
}

.rc-banner-ok {
    color: var(--pos);
    background: var(--rc-pos-bg);
    border-color: var(--rc-pos-line);
}

.rc-banner-synthetic {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    color: var(--rc-synth);
    background: var(--rc-synth-bg);
    border: 1px dashed var(--rc-synth-line);
}

.rc-banner-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.rc-banner-sub {
    font-size: 12px;
    color: var(--text-dim);
}

.rc-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--hairline);
    border-radius: 13px;
    background: #00000040;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.rc-tab {
    flex: 0 0 auto;
    font: inherit;
    font-size: 13px;
    font-weight: 560;
    color: var(--text-dim);
    background: transparent;
    border: 0;
    border-radius: 10px;
    padding: 9px 15px;
    min-height: 38px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, background .15s;
}

.rc-tab:hover {
    color: var(--text);
}

.rc-tab-active {
    color: #fff;
    background: linear-gradient(180deg, #6d8bff47, #6d8bff24);
    box-shadow: inset 0 1px #ffffff24;
}

.rc-tabpanel {
    min-width: 0;
    outline-offset: 4px;
}

/* ---------------------------------------- 4. Gate, loading and stub */

.rc-gate {
    display: grid;
    place-items: center;
    padding: 36px 0;
}

.rc-gate-card,
.rc-loading {
    width: 100%;
    max-width: 520px;
    padding: 26px 26px 24px;
    border: 1px solid var(--hairline-strong);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff07, #ffffff02);
    box-shadow: 0 30px 60px -40px #000000e6, inset 0 1px #ffffff0d;
}

.rc-loading {
    margin: 0 auto;
}

.rc-gate-title {
    font-size: 18px;
}

.rc-gate-sub {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-dim);
}

.rc-gate-detail {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-faint);
}

.rc-gate-card .rc-btn {
    margin-top: 18px;
}

.rc-gate-denied .rc-gate-card {
    border-color: var(--rc-neg-line);
}

.rc-gate-unavailable .rc-gate-card,
.rc-gate-invalid .rc-gate-card {
    border-color: var(--rc-warn-line);
}

.rc-skeleton {
    height: 14px;
    margin-top: 16px;
    border-radius: 7px;
    background: linear-gradient(90deg, #ffffff0a 25%, #ffffff18 50%, #ffffff0a 75%);
    background-size: 200% 100%;
    animation: rc-shimmer 1.4s linear infinite;
}

.rc-skeleton-short {
    width: 55%;
    margin-top: 10px;
}

@keyframes rc-shimmer {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rc-skeleton {
        animation: none;
    }
}

.rc-stub {
    padding: 22px 22px 20px;
    border: 1px dashed var(--hairline-strong);
    border-radius: 16px;
    background: var(--card);
}

.rc-stub-title {
    font-size: 15px;
}

.rc-stub-sub {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.6;
}

.rc-stub-facts {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rc-stub-facts li {
    padding: 4px 10px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------- 5. Overlay, dialog and drawer */

.rc-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 20px;
    background: #040508cc;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.rc-overlay-drawer {
    place-items: stretch end;
    padding: 0;
}

.rc-dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(88vh, 100%);
    border-radius: 20px;
    border: 1px solid var(--hairline-strong);
    background: #0d0f15;
    box-shadow: 0 40px 90px -30px #000000e6;
    color: var(--text);
    overflow: hidden;
}

.rc-dialog:focus {
    outline: none;
}

.rc-dialog-sm {
    max-width: 420px;
}

.rc-dialog-md {
    max-width: 560px;
}

.rc-dialog-lg {
    max-width: 880px;
}

.rc-dialog-drawer {
    max-width: 760px;
    max-height: none;
    height: 100%;
    border-radius: 20px 0 0 20px;
    border-right: 0;
}

.rc-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--hairline);
}

.rc-dialog-headtext {
    min-width: 0;
}

.rc-dialog-title {
    font-size: 17px;
    font-weight: 680;
    letter-spacing: -.02em;
}

.rc-dialog-sub {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--text-faint);
}

.rc-dialog-close {
    flex: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    min-height: 34px;
    padding: 6px 13px;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    cursor: pointer;
}

.rc-dialog-close:hover {
    color: #fff;
    border-color: var(--hairline-strong);
}

.rc-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 22px;
}

.rc-dialog-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--hairline);
}

/* ------------------------------ 6. Shared primitives for the views */

.rc-card {
    padding: 16px 18px;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background: var(--card);
    min-width: 0;
}

.rc-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.rc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-dim);
    background: var(--card);
    white-space: nowrap;
}

.rc-chip-pos {
    color: var(--pos);
    border-color: var(--rc-pos-line);
    background: var(--rc-pos-bg);
}

.rc-chip-warn {
    color: var(--rc-warn);
    border-color: var(--rc-warn-line);
    background: var(--rc-warn-bg);
}

.rc-chip-neg {
    color: #ffb4bd;
    border-color: var(--rc-neg-line);
    background: var(--rc-neg-bg);
}

.rc-chip-info {
    color: var(--accent);
    border-color: rgba(109, 139, 255, .4);
    background: rgba(109, 139, 255, .1);
}

.rc-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.rc-field-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-dim);
}

.rc-field-hint {
    font-size: 11.5px;
    color: var(--text-faint);
    line-height: 1.5;
}

.rc-field-error {
    font-size: 12px;
    color: var(--neg);
}

.rc-input {
    width: 100%;
    min-height: 38px;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: #0000004d;
    border: 1px solid var(--hairline);
    border-radius: 11px;
    padding: 9px 12px;
}

textarea.rc-input {
    min-height: 84px;
    resize: vertical;
}

.rc-input:focus {
    border-color: #6d8bff80;
}

.rc-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--hairline);
    border-radius: 14px;
}

.rc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.rc-table th,
.rc-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--hairline);
    vertical-align: top;
}

.rc-table th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-faint);
    white-space: nowrap;
}

.rc-table tbody tr:last-child td {
    border-bottom: 0;
}

.rc-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ------------------------------ 6b. View styles */

/* ---- Overview ---- */

.rc-overview {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* ---- filters ---- */

.rc-filters {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: end;
    padding: 14px 16px;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background: var(--card);
    min-width: 0;
}

.rc-filter {
    min-width: 0;
}

.rc-filter-window {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rc-filter-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

.rc-filters select.rc-input,
.rc-filters input[type="date"].rc-input {
    color-scheme: dark;
}

.rc-filters select.rc-input option {
    background: var(--bg-elev);
    color: var(--text);
}

.rc-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px;
    max-width: 100%;
    align-self: flex-start;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: rgba(0, 0, 0, .25);
}

.rc-seg-btn {
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    min-height: 34px;
    padding: 6px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
}

.rc-seg-btn:hover {
    color: #fff;
}

.rc-seg-on {
    color: #fff;
    background: rgba(109, 139, 255, .18);
    box-shadow: inset 0 0 0 1px rgba(109, 139, 255, .45);
}

.rc-filter-dates {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 220px));
    margin-top: 4px;
}

/* ---- cohort line and notes ---- */

.rc-overview-cohort {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
    line-height: 1.5;
}

.rc-overview-cohort > p:first-child {
    font-weight: 600;
}

.rc-overview-note {
    font-size: 12.5px;
    line-height: 1.55;
    max-width: 78ch;
}

.rc-funnel-warn {
    color: var(--rc-warn);
}

/* ---- headline tiles ---- */

.rc-tiles {
    list-style: none;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.rc-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background: var(--card);
    min-width: 0;
}

.rc-tile-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.rc-tile-value {
    font-size: 30px;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.rc-tile-sub {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-dim);
}

/* ---- sections, stage table, other outcomes ---- */

.rc-overview-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.rc-overview-section h3 {
    font-size: 15px;
}

.rc-overview .rc-table tbody th[scope="row"] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    white-space: normal;
}

.rc-funnel th,
.rc-funnel td {
    overflow-wrap: normal;
}

.rc-funnel thead th {
    white-space: normal;
    vertical-align: bottom;
}

.rc-funnel tbody th[scope="row"] {
    min-width: 200px;
}

.rc-funnel tbody .rc-num {
    width: 1%;
    white-space: nowrap;
}

.rc-funnel thead .rc-num {
    min-width: 62px;
}

.rc-funnel td:nth-child(3) {
    min-width: 150px;
}

.rc-funnel-stage {
    display: block;
}

.rc-funnel-meta {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.45;
}

.rc-funnel-from {
    display: block;
}

.rc-funnel-rate {
    display: block;
    font-variant-numeric: tabular-nums;
}

.rc-funnel-base {
    background: rgba(255, 255, 255, .03);
}

/* ---- attendance ---- */

.rc-attend-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rc-attend-title {
    margin: 0;
    font-size: 14px;
    font-weight: 640;
}

.rc-attend-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.rc-attend-list > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rc-attend-list dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.rc-attend-list dd {
    margin: 0;
    font-size: 22px;
    font-weight: 650;
    text-align: left;
}

.rc-attend-rate {
    font-size: 13px;
}

.rc-attend-state {
    font-size: 12.5px;
}

/* ---- empty states and footer ---- */

.rc-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.rc-empty-title {
    font-size: 15px;
}

.rc-overview-footer {
    font-size: 12px;
}

/* ---- Exceptions and Connections ---- */

.rc-exceptions,
.rc-connections {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.rc-exc-head,
.rc-conn-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.rc-exc-title,
.rc-conn-title {
    font-size: 17px;
}

.rc-exc-sub,
.rc-conn-sub {
    font-size: 13px;
    line-height: 1.5;
}

.rc-exc-note {
    font-size: 12px;
    line-height: 1.6;
    max-width: 78ch;
}

.rc-conn-summary {
    display: flex;
}

/* ---- Exceptions ---- */

.rc-exc-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.rc-exc-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 640;
}

.rc-exc-group-help {
    font-size: 12px;
    line-height: 1.5;
}

.rc-exc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rc-exception {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
}

.rc-exc-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1 1 auto;
}

.rc-exc-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.rc-exc-person {
    font-weight: 620;
    font-size: 13.5px;
}

.rc-exc-detail {
    font-size: 13px;
    line-height: 1.55;
}

.rc-exc-when {
    font-size: 11.5px;
}

.rc-exc-open {
    flex: 0 0 auto;
    white-space: nowrap;
}

.rc-exc-count-only {
    flex: 0 0 auto;
    max-width: 14em;
    font-size: 12px;
    line-height: 1.5;
    text-align: right;
}

.rc-exc-empty {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rc-exc-empty .rc-exc-group-title {
    color: var(--pos);
}

/* ---- Connections ---- */

.rc-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.rc-section-title {
    font-size: 14px;
    font-weight: 640;
}

.rc-section-sub {
    font-size: 12.5px;
    line-height: 1.5;
}

.rc-providers {
    list-style: none;
}

.rc-provider {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rc-provider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.rc-provider-name {
    font-size: 14.5px;
    font-weight: 640;
}

.rc-provider-role {
    font-size: 12.5px;
}

.rc-provider-detail {
    font-size: 13px;
    line-height: 1.5;
}

.rc-provider-help {
    font-size: 12px;
    line-height: 1.55;
}

.rc-conn-note {
    font-size: 12px;
    line-height: 1.5;
}

.rc-jobs-fixed {
    padding: 10px 14px;
    border: 1px solid var(--rc-warn-line);
    border-radius: 12px;
    background: var(--rc-warn-bg);
    font-size: 13px;
    font-weight: 560;
    line-height: 1.5;
}

.rc-jobs-empty {
    font-size: 13px;
}

/* Row labels are plain text, not the small caps used for column headings. */
.rc-jobs-matrix tbody th,
.rc-jobs-matrix tfoot th {
    position: sticky;
    left: 0;
    background: var(--table-frozen-bg);
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: normal;
    min-width: 150px;
    border-bottom: 1px solid var(--hairline);
}

.rc-jobs-matrix tbody tr:last-child th {
    border-bottom: 1px solid var(--hairline);
}

.rc-jobs-matrix tfoot th,
.rc-jobs-matrix tfoot td {
    border-top: 1px solid var(--hairline-strong);
    border-bottom: 0;
    font-weight: 640;
}

.rc-zero {
    color: var(--text-faint);
}

.rc-total {
    font-weight: 640;
}

.rc-jobs-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 6px 18px;
    font-size: 12px;
    line-height: 1.5;
}

.rc-jobs-legend div {
    display: flex;
    flex-direction: column;
}

.rc-jobs-legend dt {
    font-weight: 640;
    color: var(--text-dim);
}

.rc-jobs-legend dd {
    margin: 0;
}

.rc-jobs-held {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.rc-jobs-held h5 {
    font-size: 13px;
    font-weight: 640;
}

.rc-jobs-held ul {
    padding-left: 18px;
    line-height: 1.6;
}

.rc-jobs-pointer {
    font-size: 12.5px;
}

.rc-storage-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.5;
}

.rc-storage-help {
    margin-top: 6px;
    font-size: 12px;
}

.rc-conn-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 22px 24px;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background: var(--card);
}

.rc-conn-state[data-conn-state="unavailable"] {
    border-color: var(--rc-warn-line);
    background: var(--rc-warn-bg);
}

.rc-conn-state[data-conn-state="denied"] {
    border-color: var(--rc-neg-line);
    background: var(--rc-neg-bg);
}

.rc-conn-state-title {
    font-size: 15px;
}

.rc-conn-state-sub {
    font-size: 13px;
    line-height: 1.5;
}

/* ---- Candidate detail and scorecard ---- */

.rc-detail {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.rc-detail-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rc-detail-nav .rc-btn {
    min-height: 32px;
    padding: 5px 11px;
    font-size: 12px;
}

.rc-panel-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    scroll-margin-top: 8px;
}

.rc-panel-section > h3 {
    font-size: 15px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--hairline);
}

.rc-panel-section > h3:focus {
    outline: none;
}

.rc-panel-section > h3:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.rc-detail-note {
    font-size: 12.5px;
}

.rc-subhead {
    margin: 0;
    font-size: 13.5px;
    font-weight: 640;
    letter-spacing: -.01em;
}

.rc-subhead-small {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 620;
    color: var(--text-dim);
}

h6.rc-subhead-small {
    margin-top: 0;
}

.rc-chip-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* ---- applications ---- */

.rc-app-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.rc-app-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.rc-app-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rc-app-card[data-role='setter'] {
    border-top: 2px solid rgba(109, 139, 255, .55);
}

.rc-app-card[data-role='closer'] {
    border-top: 2px solid rgba(55, 224, 166, .5);
}

.rc-app-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rc-app-empty {
    border-style: dashed;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-dim);
}

.rc-app-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---- facts (definition lists) ---- */

.rc-facts {
    display: grid;
    gap: 9px;
    margin: 0;
    font-size: 13px;
}

.rc-facts-row {
    display: grid;
    grid-template-columns: minmax(108px, 34%) minmax(0, 1fr);
    gap: 3px 12px;
}

.rc-facts dt {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
}

.rc-facts dd {
    margin: 0;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.rc-facts-compact {
    gap: 6px;
}

/* ---- original responses ---- */

.rc-responses {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rc-submission-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 620;
}

.rc-submission-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.rc-answers {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.rc-answer {
    padding: 10px 0;
    border-top: 1px solid var(--hairline);
}

.rc-answer-q {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    line-height: 1.5;
}

.rc-answer-n {
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.rc-answer-opt {
    display: inline-block;
    padding: 0 7px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-faint);
}

.rc-answer-a {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    min-width: 0;
}

.rc-answer-long {
    display: block;
    white-space: pre-wrap;
}

.rc-answer-none {
    font-style: italic;
    color: var(--text-faint);
}

.rc-answer-note {
    font-size: 12px;
    color: var(--text-faint);
}

.rc-answer-list {
    margin: 0;
    padding-left: 18px;
}

.rc-answer-other {
    display: block;
}

.rc-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

.rc-hidden-fields {
    padding: 10px 12px;
    border: 1px dashed var(--hairline-strong);
    border-radius: 12px;
}

/* ---- interviews and evidence ---- */

.rc-interviews,
.rc-notes-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rc-interview-card,
.rc-notes-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rc-interview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--hairline);
}

.rc-interview:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.rc-evidence {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--hairline-strong);
    border-radius: 12px;
}

.rc-evidence-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
}

.rc-evidence-warn {
    margin: 0;
}

/* ---- scorecard ---- */

.rc-scorecard {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rc-scorecard-table th[scope='row'] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
    white-space: normal;
}

.rc-scorecard-note,
.rc-scorecard-saved {
    font-size: 13px;
}

.rc-scorecard-editor {
    padding: 14px;
    border: 1px solid var(--hairline-strong);
    border-radius: 14px;
    background: #0000002e;
}

.rc-score-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rc-score-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
}

.rc-score-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 10px;
}

.rc-score-remove {
    align-self: flex-start;
}

.rc-score-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rc-score-result:empty {
    display: none;
}

.rc-score-result {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
}

.rc-score-result-ok {
    color: var(--pos);
    background: var(--rc-pos-bg);
    border: 1px solid var(--rc-pos-line);
}

.rc-score-result-error {
    color: #ffb4bd;
    background: var(--rc-neg-bg);
    border: 1px solid var(--rc-neg-line);
}

/* ---- notes ---- */

.rc-notes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rc-note {
    padding: 10px 12px;
    border-left: 3px solid var(--hairline-strong);
    background: var(--card);
    border-radius: 0 10px 10px 0;
}

.rc-note-text {
    white-space: pre-wrap;
}

.rc-note-meta {
    margin-top: 4px;
    font-size: 12px;
}

/* ---- messages ---- */

.rc-messages-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rc-queue-line {
    padding: 9px 12px;
    border: 1px solid var(--rc-warn-line);
    border-radius: 12px;
    background: var(--rc-warn-bg);
    font-size: 13px;
    color: var(--text);
}

.rc-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rc-message,
.rc-reply {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rc-message-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px 10px;
}

.rc-reply-text {
    margin: 0;
    padding: 8px 12px;
    border-left: 3px solid var(--hairline-strong);
    white-space: pre-wrap;
}

/* ---- change log ---- */

.rc-log-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rc-log {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0 0 0 16px;
    list-style: none;
    border-left: 2px solid var(--hairline);
}

.rc-log-item {
    position: relative;
}

.rc-log-item::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hairline-strong);
    border: 2px solid #0d0f15;
}

.rc-log-item[data-source='event']::before {
    background: var(--accent);
}

.rc-log-meta {
    font-size: 12px;
}

.rc-log-lines {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--text-dim);
}

.rc-log-more {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* ---- breakpoints (paste into the existing blocks) ---- */

/* ---- Shared small pieces ---- */

.rc-btn-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--text-dim);
}

.rc-btn-ghost:hover:not(:disabled) {
    background: var(--card-hover);
}

.rc-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.rc-empty-sub {
    max-width: 62ch;
}

.rc-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.rc-linkbtn {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--accent);
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rc-linkbtn:hover {
    color: #fff;
}

/* ---- Pipeline ---- */

.rc-pipeline {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.rc-pipeline-top {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.rc-search {
    max-width: 420px;
}

.rc-queue {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rc-queue-chip {
    min-height: 34px;
    padding: 4px 12px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}

.rc-queue-chip:hover {
    color: #fff;
    border-color: var(--hairline-strong);
}

.rc-queue-chip-active {
    color: #fff;
    font-weight: 700;
    border-color: var(--accent);
    background: rgba(109, 139, 255, .16);
}

.rc-queue-count {
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
}

.rc-queue-chip-active .rc-queue-count {
    color: #fff;
}

.rc-results-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.rc-results {
    font-size: 13px;
    color: var(--text-dim);
}

.rc-legend {
    margin: 0;
}

.rc-bulkbar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    border-color: rgba(109, 139, 255, .45);
    background: var(--bg-elev);
}

.rc-bulkbar-count {
    font-weight: 700;
    font-size: 13px;
}

.rc-bulkbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rc-bulkbar-note {
    flex-basis: 100%;
}

.rc-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.rc-stage-group {
    min-width: 0;
}

.rc-stage-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px 8px;
}

.rc-stage-title {
    font-size: 14px;
}

.rc-stage-count {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--hairline-strong);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.rc-stage-select,
.rc-row-check {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
    flex: none;
}

.rc-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rc-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--card);
    min-width: 0;
}

/* M372: view only has no selection checkbox, so the row body takes the whole width. */
.rc-list-viewonly .rc-row {
    grid-template-columns: minmax(0, 1fr);
}

.rc-row:hover {
    background: var(--card-hover);
}

.rc-row-selected {
    border-color: rgba(109, 139, 255, .5);
    background: rgba(109, 139, 255, .07);
}

.rc-row-overdue {
    border-left: 3px solid var(--neg);
}

.rc-row-check {
    margin-top: 3px;
}

.rc-row-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.rc-row-main,
.rc-row-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.rc-row-open {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
}

.rc-row-open:hover {
    color: #fff;
    text-decoration-color: var(--accent);
}

.rc-row .rc-chip,
.rc-roster-item .rc-chip {
    white-space: normal;
}

.rc-row-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    font-size: 12px;
    color: var(--text-dim);
}

.rc-row-sibling {
    font-size: 12px;
    color: var(--text-dim);
    padding-top: 2px;
    border-top: 1px dashed var(--hairline);
}

.rc-showmore {
    margin-top: 8px;
}

/* ---- Sessions ---- */

.rc-sessions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.rc-sessions-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.rc-sessions-head h2 {
    font-size: 17px;
}

.rc-policy-line {
    padding: 8px 12px;
    border: 1px solid var(--rc-warn-line);
    border-radius: 11px;
    background: var(--rc-warn-bg);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rc-warn);
}

.rc-session-cards {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
}

.rc-session-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rc-session-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rc-session-card-head h3 {
    font-size: 15px;
    margin-right: auto;
}

.rc-session-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}

.rc-session-card-actions .rc-btn {
    white-space: nowrap;
}

.rc-session-offer {
    font-size: 13px;
    line-height: 1.5;
}

.rc-session-facts {
    display: grid;
    gap: 6px;
    margin: 0;
    font-size: 13px;
}

.rc-session-facts > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
}

.rc-session-facts dt {
    color: var(--text-faint);
    font-size: 12px;
}

.rc-session-facts dd {
    margin: 0;
}

.rc-session-final {
    padding-top: 10px;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.rc-session-final h4 {
    margin: 0;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--text-dim);
}

.rc-waitlist summary {
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
}

.rc-waitlist-list {
    margin: 8px 0 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.rc-session-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.rc-session-section h3 {
    font-size: 15px;
}

.rc-session-when {
    margin-bottom: 6px;
}

.rc-session-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rc-session-meta {
    margin-top: 6px;
    font-size: 12px;
}

.rc-session-meta a {
    margin-left: 6px;
    color: var(--accent);
}

.rc-session-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.rc-session-actions .rc-btn {
    white-space: nowrap;
}

.rc-session-roster[hidden] {
    display: none;
}

.rc-session-roster > td {
    background: rgba(0, 0, 0, .18);
}

.rc-roster-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rc-roster-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--hairline);
}

.rc-roster-item:last-child {
    border-bottom: 0;
}

.rc-roster-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    flex: 1 1 220px;
    min-width: 0;
}

.rc-roster-att {
    flex: 1 1 220px;
    min-width: 0;
    font-size: 12.5px;
}

.rc-roster-action {
    flex: none;
}

/* People who were offered this session or whose registration was cancelled: not seats, listed apart. */
.rc-roster-extra {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--hairline);
    min-width: 0;
    overflow-wrap: anywhere;
}

.rc-radio-group {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.rc-radio {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 2px 8px;
    align-items: start;
    padding: 8px 10px;
    border: 1px solid var(--hairline);
    border-radius: 11px;
    margin-top: 6px;
}

.rc-radio input {
    margin: 3px 0 0;
    accent-color: var(--accent);
}

.rc-radio label {
    font-size: 13px;
    font-weight: 600;
}

.rc-radio small {
    grid-column: 2;
}

.rc-form-preview {
    padding: 10px 12px;
    border: 1px dashed var(--hairline-strong);
    border-radius: 11px;
    font-size: 12.5px;
    color: var(--text-dim);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rc-result-list {
    margin: 6px 0;
    padding-left: 18px;
    font-size: 13px;
}

.rc-done {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---- Decision dialogs and bulk dialog ---- */

.rc-dec-who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.rc-dec-name {
    font-size: 15px;
}

.rc-dec-consequence {
    padding: 10px 12px;
    border-left: 3px solid var(--accent);
    background: rgba(109, 139, 255, .07);
    border-radius: 0 10px 10px 0;
    font-size: 13px;
    line-height: 1.5;
}

.rc-dec-prior,
.rc-dec-current {
    font-size: 12.5px;
    color: var(--text-dim);
}

.rc-dec-evidence {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--hairline);
    border-radius: 11px;
    font-size: 12.5px;
}

.rc-dec-evidence > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px;
}

.rc-dec-evidence dt {
    color: var(--text-faint);
}

.rc-dec-evidence dd {
    margin: 0;
}

.rc-dec-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    line-height: 1.45;
    cursor: pointer;
}

.rc-dec-check input {
    margin: 2px 0 0;
    accent-color: var(--accent);
    flex: none;
}

.rc-dec-radios {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.rc-dec-formerror {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--neg);
}

.rc-field-invalid .rc-input {
    border-color: var(--rc-neg-line);
}

.rc-dec-scorecard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    margin: 0;
    border: 1px solid var(--hairline);
    border-radius: 11px;
    min-width: 0;
}

.rc-dec-sc-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) 110px minmax(0, 2fr) auto;
    gap: 8px;
    align-items: start;
}

.rc-dec-sc-add {
    align-self: flex-start;
}

.rc-bulk {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.rc-bulk-shared {
    padding: 12px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--card);
}

.rc-bulk-shared > .rc-btn {
    align-self: flex-start;
}

.rc-bulk-summary,
.rc-bulk-progress {
    font-size: 13px;
    font-weight: 650;
}

.rc-bulk-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rc-bulk-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--card);
}

.rc-bulk-item[data-state="blocked"] {
    border-color: var(--rc-neg-line);
    background: var(--rc-neg-bg);
}

.rc-bulk-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.rc-bulk-name {
    font-size: 13.5px;
}

.rc-bulk-state {
    margin-left: auto;
}

/* ---- Small view leftovers ---- */

.rc-log-title {
    font-size: 13px;
}

.rc-submission > summary {
    cursor: pointer;
    font-weight: 600;
}

.rc-scorecard-empty {
    font-size: 13px;
    color: var(--text-dim);
}

.rc-score-error,
.rc-score-hint {
    margin: 2px 0 0;
}

.rc-jobs,
.rc-storage,
.rc-switches {
    min-width: 0;
}

.rc-switch-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rc-switch {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ----------------------------------------------------- 7. Breakpoints */

@media (max-width: 720px) {
    .rc-page.rc-synthetic {
        padding: 10px;
        border-radius: 14px;
    }

    .rc-gate {
        padding: 18px 0;
    }

    .rc-overlay {
        padding: 12px;
    }

    .rc-dialog-drawer {
        max-width: none;
        border-radius: 0;
    }

    .rc-dialog-head {
        padding: 16px 16px 12px;
    }

    .rc-dialog-body {
        padding: 14px 16px;
    }

    .rc-dialog-foot {
        padding: 12px 16px 16px;
    }
}

@media (max-width: 480px) {
    .rc-page {
        gap: 12px;
    }

    .rc-gate-card,
    .rc-loading {
        padding: 20px 18px;
    }

    .rc-banner {
        padding: 10px 12px;
    }

    .rc-banner-actions {
        width: 100%;
    }

    .rc-banner-actions .rc-btn {
        flex: 1 1 auto;
    }

    /* Dialogs become full-screen sheets on a phone. */
    .rc-overlay {
        padding: 0;
        place-items: stretch;
    }

    .rc-dialog,
    .rc-dialog-sm,
    .rc-dialog-md,
    .rc-dialog-lg,
    .rc-dialog-drawer {
        max-width: none;
        max-height: none;
        height: 100%;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .rc-dialog-foot .rc-btn {
        flex: 1 1 auto;
    }

    .rc-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------ 8. View breakpoints */

/* Overview */
@media (max-width: 720px) {
    .rc-filter-dates {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rc-attend-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .rc-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 12px;
    }

    .rc-seg {
        width: 100%;
    }

    .rc-seg-btn {
        flex: 1 1 auto;
        padding: 6px 8px;
    }

    .rc-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rc-tile {
        padding: 12px;
    }

    .rc-tile-value {
        font-size: 26px;
    }

    /* The stage table becomes one card per stage. The head row stays for
       screen readers; every cell prints its own label from data-label. */
    .rc-funnel thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .rc-funnel,
    .rc-funnel tbody {
        display: block;
        width: 100%;
    }

    .rc-funnel tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 16px;
        padding: 12px;
        border-bottom: 1px solid var(--hairline);
    }

    .rc-funnel tbody tr:last-child {
        border-bottom: 0;
    }

    .rc-funnel th[scope="row"],
    .rc-funnel td:nth-child(2),
    .rc-funnel td:nth-child(3) {
        grid-column: 1 / -1;
    }

    .rc-funnel th,
    .rc-funnel td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 3px 0;
        border: 0;
    }

    .rc-funnel td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        font-size: 12.5px;
    }

    .rc-funnel td::before {
        content: attr(data-label);
        flex: none;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--text-faint);
    }

    .rc-funnel tbody .rc-num,
    .rc-funnel td:nth-child(3) {
        width: auto;
        min-width: 0;
    }

    .rc-funnel td > .rc-funnel-from {
        text-align: right;
    }
}

/* Exceptions and Connections */
@media (max-width: 720px) {
    .rc-exception {
        padding: 12px;
    }

    .rc-providers {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .rc-exception {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .rc-exc-open {
        width: 100%;
    }

    .rc-exc-count-only {
        max-width: none;
        text-align: left;
    }

    .rc-jobs-matrix tbody th,
    .rc-jobs-matrix tfoot th {
        min-width: 120px;
    }

    .rc-jobs-legend {
        grid-template-columns: 1fr;
    }
}

/* Candidate detail and scorecard */
@media (max-width: 720px) {
    .rc-app-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .rc-facts-row {
        grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .rc-detail {
        gap: 18px;
    }

    .rc-facts-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 1px;
    }

    .rc-score-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .rc-actions .rc-btn,
    .rc-score-actions .rc-btn {
        flex: 1 1 auto;
    }

    .rc-detail-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .rc-detail-nav .rc-btn {
        flex: none;
    }
}

/* Pipeline, Sessions, decisions */
@media (max-width: 720px) {
    .rc-session-cards {
        grid-template-columns: 1fr;
    }

    .rc-dec-sc-row {
        grid-template-columns: minmax(0, 1fr) 100px;
    }

    .rc-dec-sc-note,
    .rc-dec-sc-remove {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .rc-row {
        grid-template-columns: 20px minmax(0, 1fr);
        gap: 10px;
        padding: 10px 12px;
    }

    .rc-search {
        max-width: none;
    }

    .rc-queue-chip {
        flex: 1 1 auto;
    }

    .rc-bulkbar-actions .rc-btn {
        flex: 1 1 auto;
    }

    .rc-session-facts > div,
    .rc-dec-evidence > div {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .rc-roster-item {
        flex-direction: column;
    }

    /* In a column the 220px flex basis would become a 220px height: let each block take its own height. */
    .rc-roster-main,
    .rc-roster-att {
        flex: 0 0 auto;
    }

    .rc-roster-action .rc-btn {
        width: 100%;
    }

    .rc-dec-sc-row {
        grid-template-columns: 1fr;
    }

    .rc-bulk-state {
        margin-left: 0;
    }
}

/* ------------------------------------------------ 8. Sending state banner */

.rc-policy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 15px;
    border-radius: 13px;
    border: 1px solid var(--rc-warn-line);
    border-left: 5px solid var(--rc-warn);
    background: var(--rc-warn-bg);
    font-size: 13px;
    line-height: 1.5;
    min-width: 0;
}

.rc-policy-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rc-policy-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--rc-warn-line);
    color: var(--rc-warn);
    background: rgba(0, 0, 0, .25);
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .03em;
}

.rc-policy-chip-on {
    color: var(--pos);
    border-color: var(--rc-pos-line);
}

.rc-policy-chip-unknown {
    color: var(--text-dim);
    border-color: var(--hairline-strong);
}

.rc-policy-on {
    border-color: var(--rc-pos-line);
    border-left-color: var(--pos);
    background: var(--rc-pos-bg);
}

.rc-policy-unknown {
    border-color: var(--hairline-strong);
    border-left-color: var(--text-dim);
    background: var(--card);
}

.rc-policy-body {
    color: var(--text);
}

.rc-policy-test {
    color: var(--text-dim);
    font-size: 12.5px;
}

.rc-policy-addresses {
    color: var(--text);
    font-weight: 600;
}

.rc-policy-chip-off {
    color: var(--rc-warn);
}

.rc-policy-off {
    border-left-color: var(--rc-warn);
}

.rc-roster-google {
    margin-top: 2px;
    overflow-wrap: anywhere;
}

/* The queued column's heading can read "Queued, not sent (outreach off)": let headings wrap so the
   table stays narrow and the other columns stay near. */
.rc-jobs-matrix thead th {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    min-width: 92px;
    vertical-align: bottom;
}

.rc-jobs-matrix thead th:first-child {
    min-width: 110px;
}

/* ------------------------------------------------ Go-live tab (agent E, build contract v1) */

.rc-golive {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.rc-gl-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.rc-gl-head > div {
    flex: 1 1 320px;
    min-width: 0;
}

.rc-gl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 14px;
    align-items: start;
}

.rc-gl-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.rc-gl-wide {
    grid-column: 1 / -1;
}

.rc-gl-rows,
.rc-gl-list,
.rc-gl-log {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rc-gl-row,
.rc-gl-reply,
.rc-gl-session {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hairline);
}

.rc-gl-rows > li:last-child,
.rc-gl-list > li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.rc-gl-key {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 220px;
    min-width: 0;
}

.rc-gl-val {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rc-gl-val select.rc-input {
    width: auto;
}

.rc-gl-help {
    color: var(--text-faint);
    font-size: 12.5px;
}

.rc-gl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.rc-gl-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
    flex: 1 1 100%;
}

.rc-gl-form .rc-field {
    flex: 1 1 140px;
    min-width: 0;
}

.rc-gl-preview-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
}

.rc-gl-preview-block h4 {
    margin: 0;
    font-size: 13px;
    color: var(--text-dim);
}

.rc-gl-sample {
    margin-top: 4px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--hairline);
    color: var(--text-dim);
    font-size: 13px;
    white-space: pre-wrap;
}

.rc-gl-reply-body {
    flex: 1 1 100%;
    white-space: pre-wrap;
}

.rc-gl-flash {
    margin: 0;
}