@import '_content/Riproka.UI.Controls/Riproka.UI.Controls.qljls2zdts.bundle.scp.css';
@import '_content/Riproka.UI.Runner/Riproka.UI.Runner.sq1x5swthz.bundle.scp.css';

/* /Components/Baselines/CardsStep.razor.rz.scp.css */
/*
    STEP 4 - THE CARDS. Lifted from the /scorecards builder's stylesheet and extended for the share-led
    lines, the honest card-target stamp and the crew map. Tokens only; ::deep for any class handed to a
    kit control (it lands on THAT component's scoped element).
*/

.bc-head[b-fhtnofk5lu] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rk-sp-12);
    margin-bottom: var(--rk-sp-12);
}

.bc-lede[b-fhtnofk5lu] {
    margin: 0;
    max-width: 80ch;
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
}

.bc-new[b-fhtnofk5lu] {
    margin-bottom: var(--rk-sp-16);
    padding: var(--rk-sp-12);
    border: var(--rk-border-card) solid var(--rk-line-hard);
    border-left: var(--rk-rail) solid var(--rk-accent);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-card);
}

.bc-go[b-fhtnofk5lu] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--rk-sp-10);
}

.bc-list[b-fhtnofk5lu] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.bc-card[b-fhtnofk5lu] {
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.bc-card.is-open[b-fhtnofk5lu] {
    background: var(--rk-card);
}

.bc-card.is-retired[b-fhtnofk5lu] {
    opacity: 0.6;
}

.bc-row[b-fhtnofk5lu] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-4) var(--rk-sp-10);
    width: 100%;
    min-height: var(--rk-tap);
    padding: var(--rk-sp-10) var(--rk-sp-8);
    border: 0;
    background: transparent;
    color: var(--rk-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.bc-row:hover[b-fhtnofk5lu] {
    background: var(--rk-hover-ghost);
}

.bc-row:focus-visible[b-fhtnofk5lu] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: calc(var(--rk-border) * -1);
}

.bc-caret[b-fhtnofk5lu] {
    color: var(--rk-steel);
    font-size: var(--rk-fs-sm);
}

.bc-name[b-fhtnofk5lu] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xl);
}

.bc-grain[b-fhtnofk5lu] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.bc-counts[b-fhtnofk5lu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-10);
    margin-left: auto;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.bc-counts .is-zero[b-fhtnofk5lu] {
    color: var(--rk-warn-ink);
}

.bc-body[b-fhtnofk5lu] {
    padding: 0 var(--rk-sp-8) var(--rk-sp-12);
}

.bc-desc[b-fhtnofk5lu],
.bc-note[b-fhtnofk5lu],
.bc-foot[b-fhtnofk5lu] {
    margin: var(--rk-sp-4) 0 var(--rk-sp-8);
    max-width: 90ch;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.bc-foot[b-fhtnofk5lu] {
    margin-top: var(--rk-sp-20);
}

.bc-grid[b-fhtnofk5lu] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--rk-sp-16);
}

@media (max-width: 900px) {
    .bc-grid[b-fhtnofk5lu] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bc-h[b-fhtnofk5lu] {
    margin: var(--rk-sp-8) 0;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.bc-h2[b-fhtnofk5lu] {
    margin: var(--rk-sp-24) 0 var(--rk-sp-8);
    padding-bottom: var(--rk-sp-4);
    border-bottom: var(--rk-border) solid var(--rk-ink);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
}

.bc-lines[b-fhtnofk5lu] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bc-line[b-fhtnofk5lu] {
    padding: var(--rk-sp-8) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.bc-line-top[b-fhtnofk5lu] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-4) var(--rk-sp-10);
}

.bc-share[b-fhtnofk5lu] {
    min-width: 3.5rem;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xl);
    color: var(--rk-ink);
}

.bc-mname[b-fhtnofk5lu] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rk-ink);
    font: inherit;
    font-size: var(--rk-fs-xl);
    text-align: left;
    text-decoration: underline;
    text-decoration-color: var(--rk-line-hard);
    text-underline-offset: var(--rk-sp-4);
    cursor: pointer;
}

.bc-state[b-fhtnofk5lu] {
    padding: 0 var(--rk-sp-6);
    border-radius: var(--rk-radius-pill);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
}

.bc-state.is-auto[b-fhtnofk5lu] {
    background: var(--rk-ok-soft);
    color: var(--rk-ok-ink);
}

.bc-state.is-hand[b-fhtnofk5lu] {
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
}

.bc-state.is-none[b-fhtnofk5lu],
.bc-state.is-wait[b-fhtnofk5lu] {
    border: var(--rk-border-hair) dashed var(--rk-line-hard);
    color: var(--rk-steel);
}

.bc-line-knobs[b-fhtnofk5lu],
.bc-row-in[b-fhtnofk5lu],
.bc-sentence[b-fhtnofk5lu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-8);
    margin-top: var(--rk-sp-6);
}

.bc-line-knobs .w[b-fhtnofk5lu],
.bc-row-in .w[b-fhtnofk5lu],
.bc-sentence .w[b-fhtnofk5lu] {
    font-size: var(--rk-fs-sm);
}

.bc-dir[b-fhtnofk5lu] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.bc-override[b-fhtnofk5lu] {
    padding: 0 var(--rk-sp-6);
    border: var(--rk-border-hair) dashed var(--rk-warn-ink);
    border-radius: var(--rk-radius-xs);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-warn-ink);
}

.bc-override-edit[b-fhtnofk5lu] {
    margin-top: var(--rk-sp-6);
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border-left: var(--rk-border) solid var(--rk-warn);
    background: var(--rk-warn-soft);
}

.bc-row-in[b-fhtnofk5lu]  .bc-in,
.bc-line-knobs[b-fhtnofk5lu]  .bc-in,
.bc-sentence[b-fhtnofk5lu]  .bc-in {
    margin: 0;
}

.bc-line-knobs[b-fhtnofk5lu]  .bc-in--w,
.bc-row-in[b-fhtnofk5lu]  .bc-in--w {
    width: 5.5rem;
}

.bc-row-in[b-fhtnofk5lu]  .bc-in--num {
    width: 8rem;
}

.bc-row-in[b-fhtnofk5lu]  .bc-in--metric {
    width: 18rem;
    max-width: 100%;
}

.bc-row-in[b-fhtnofk5lu]  .bc-in--crew {
    width: 14rem;
    max-width: 100%;
}

.bc-sentence[b-fhtnofk5lu]  .bc-in--name {
    width: 14rem;
}

.bc-sentence[b-fhtnofk5lu]  .bc-in--grain {
    width: 12rem;
}

.bc-crews[b-fhtnofk5lu] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bc-crews li[b-fhtnofk5lu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-4) var(--rk-sp-10);
    padding: var(--rk-sp-6) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
    font-size: var(--rk-fs-lg);
}

.bc-crew[b-fhtnofk5lu] {
    font-family: var(--rk-font-display);
}

.bc-preview-go[b-fhtnofk5lu] {
    margin-top: var(--rk-sp-12);
}

.bc-bycrew-list[b-fhtnofk5lu] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bc-bycrew-list li[b-fhtnofk5lu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-12);
    padding: var(--rk-sp-8) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.bc-bycrew-crew[b-fhtnofk5lu] {
    min-width: 9rem;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
}

.bc-bycrew-list .is-none .bc-bycrew-cards[b-fhtnofk5lu] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-warn-ink);
}

.bc-bycrew-cards[b-fhtnofk5lu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
}

.bc-chip[b-fhtnofk5lu] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--rk-sp-6);
    padding: var(--rk-sp-4) var(--rk-sp-10);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-pill);
    background: var(--rk-paper);
    color: var(--rk-ink);
    font: inherit;
    font-size: var(--rk-fs-sm);
    cursor: pointer;
}

.bc-chip:hover[b-fhtnofk5lu] {
    border-color: var(--rk-ink);
}

.bc-chip .rk-num[b-fhtnofk5lu] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-steel);
}

@media (max-width: 640px) {
    .bc-counts[b-fhtnofk5lu] {
        margin-left: 0;
    }
}
/* /Components/Baselines/MeasureDefinition.razor.rz.scp.css */
/* WHAT A MEASURE IS - one line, then the form. Tokens only; --rk-line is a colour. */

.md-line[b-oxrlq5d1h5] {
    margin: 0;
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.md-sub[b-oxrlq5d1h5] {
    margin: var(--rk-sp-6) 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
}

.md-take[b-oxrlq5d1h5] {
    margin: var(--rk-sp-6) 0 0;
    padding-left: var(--rk-sp-8);
    border-left: var(--rk-border) solid var(--rk-warn);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.md-take-label[b-oxrlq5d1h5] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-warn-ink);
}

.md-state[b-oxrlq5d1h5],
.md-system[b-oxrlq5d1h5],
.md-retired[b-oxrlq5d1h5] {
    display: inline-block;
    margin-left: var(--rk-sp-4);
    padding: 0 var(--rk-sp-6);
    border-radius: var(--rk-radius-pill);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    vertical-align: middle;
}

.md-state.is-auto[b-oxrlq5d1h5] {
    background: var(--rk-ok-soft);
    color: var(--rk-ok-ink);
}

.md-state.is-hand[b-oxrlq5d1h5] {
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
}

.md-state.is-none[b-oxrlq5d1h5],
.md-state.is-wait[b-oxrlq5d1h5] {
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    color: var(--rk-steel);
}

.md-system[b-oxrlq5d1h5] {
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    color: var(--rk-steel);
}

.md-retired[b-oxrlq5d1h5] {
    background: var(--rk-disabled);
    color: var(--rk-disabled-text);
}

.md-acts[b-oxrlq5d1h5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-10);
}

.md-form[b-oxrlq5d1h5] {
    display: grid;
    gap: var(--rk-sp-10);
}

.md-pair[b-oxrlq5d1h5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rk-sp-10);
}

@media (max-width: 640px) {
    .md-pair[b-oxrlq5d1h5] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.md-retire-lead[b-oxrlq5d1h5] {
    margin: 0;
    line-height: var(--rk-lh-prose);
}

.md-retire-cards[b-oxrlq5d1h5] {
    margin: var(--rk-sp-10) 0 0;
    padding-left: var(--rk-sp-16);
    line-height: var(--rk-lh-prose);
    font-size: var(--rk-fs-lg);
}

.md-retire-cards li + li[b-oxrlq5d1h5] {
    margin-top: var(--rk-sp-4);
}

.md-retire-cards .is-empty[b-oxrlq5d1h5] {
    color: var(--rk-danger-ink);
}
/* /Components/Baselines/MeasuresStep.razor.rz.scp.css */
/* STEP 2 - THE MEASURES. A catalog that reads like a ledger; the open one expands in place. */

.bm-head[b-qzi0ffdciu] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rk-sp-12);
    margin-bottom: var(--rk-sp-12);
}

.bm-headline[b-qzi0ffdciu] {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-12);
    min-width: 0;
    flex: 1 1 28rem;
}

.bm-big[b-qzi0ffdciu] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-4xl);
    line-height: var(--rk-lh-flat);
    color: var(--rk-ink);
}

.bm-of[b-qzi0ffdciu] {
    font-size: var(--rk-fs-xl);
    color: var(--rk-steel);
}

.bm-says[b-qzi0ffdciu] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

[b-qzi0ffdciu] .bm-filters {
    margin-bottom: var(--rk-sp-10);
}

.bm-list[b-qzi0ffdciu] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.bm-item[b-qzi0ffdciu] {
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.bm-item.is-open[b-qzi0ffdciu] {
    background: var(--rk-card);
    padding-bottom: var(--rk-sp-10);
}

.bm-item.is-retired .bm-row[b-qzi0ffdciu] {
    opacity: 0.6;
}

.bm-row[b-qzi0ffdciu] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-4) var(--rk-sp-10);
    width: 100%;
    min-height: var(--rk-tap);
    padding: var(--rk-sp-10) var(--rk-sp-8);
    border: 0;
    background: transparent;
    color: var(--rk-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.bm-row:hover[b-qzi0ffdciu] {
    background: var(--rk-hover-ghost);
}

.bm-row:focus-visible[b-qzi0ffdciu] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: calc(var(--rk-border) * -1);
}

.bm-caret[b-qzi0ffdciu] {
    color: var(--rk-steel);
    font-size: var(--rk-fs-sm);
}

.bm-name[b-qzi0ffdciu] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xl);
}

.bm-where[b-qzi0ffdciu] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.bm-tags[b-qzi0ffdciu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4);
    margin-left: auto;
}

.bm-dir[b-qzi0ffdciu],
.bm-state[b-qzi0ffdciu],
.bm-count[b-qzi0ffdciu],
.bm-flag[b-qzi0ffdciu],
.bm-retired[b-qzi0ffdciu],
.bm-own[b-qzi0ffdciu] {
    padding: var(--rk-sp-2) var(--rk-sp-6);
    border-radius: var(--rk-radius-pill);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    white-space: nowrap;
}

.bm-dir[b-qzi0ffdciu] {
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    color: var(--rk-ink-soft);
}

.bm-dir-3[b-qzi0ffdciu] {
    border-color: var(--rk-accent-ink);
    color: var(--rk-accent-ink);
}

.bm-state.is-auto[b-qzi0ffdciu] {
    background: var(--rk-ok-soft);
    color: var(--rk-ok-ink);
}

.bm-state.is-hand[b-qzi0ffdciu] {
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
}

.bm-state.is-none[b-qzi0ffdciu],
.bm-state.is-wait[b-qzi0ffdciu] {
    border: var(--rk-border-hair) dashed var(--rk-line-hard);
    color: var(--rk-steel);
}

.bm-count[b-qzi0ffdciu] {
    border: var(--rk-border-hair) solid var(--rk-line);
    color: var(--rk-ink-soft);
}

.bm-count.is-zero[b-qzi0ffdciu] {
    color: var(--rk-steel);
    border-style: dashed;
}

.bm-flag[b-qzi0ffdciu] {
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
}

.bm-retired[b-qzi0ffdciu] {
    background: var(--rk-disabled);
    color: var(--rk-disabled-text);
}

.bm-own[b-qzi0ffdciu] {
    background: var(--rk-accent-soft);
    color: var(--rk-accent-ink);
}

.bm-take[b-qzi0ffdciu] {
    margin: calc(var(--rk-sp-6) * -1) 0 0;
    padding: 0 var(--rk-sp-8) var(--rk-sp-10) calc(var(--rk-sp-8) + var(--rk-sp-16));
    max-width: 90ch;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
}

.bm-item.is-open[b-qzi0ffdciu]  .mp {
    padding-left: var(--rk-sp-8);
    padding-right: var(--rk-sp-8);
}

.bm-free[b-qzi0ffdciu] {
    margin: var(--rk-sp-12) 0 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.bm-free-label[b-qzi0ffdciu] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .bm-tags[b-qzi0ffdciu] {
        margin-left: 0;
    }

    .bm-take[b-qzi0ffdciu] {
        padding-left: var(--rk-sp-8);
    }
}
/* /Components/Baselines/MetricPanel.razor.rz.scp.css */
/*
    THE METRIC PANEL. Dense on purpose - Kirk asked for "insanely dense and powerful" - so it
    reads like a ledger: small type, tight rows, numbers right-aligned in mono.

    Tokens only. ⚠️ ::deep for anything passed as Class to a kit control: the class lands on
    THAT component's scoped element, so a bare rule here would match nothing.
*/

.mp[b-3jjpqgbsyq] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    padding: var(--rk-sp-12) 0 var(--rk-sp-4);
}

.mp-grid[b-3jjpqgbsyq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--rk-sp-16);
}

@media (max-width: 900px) {
    .mp-grid[b-3jjpqgbsyq] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mp-sec[b-3jjpqgbsyq] {
    min-width: 0;
}

.mp-author[b-3jjpqgbsyq] {
    border-top: var(--rk-border-hair) solid var(--rk-line);
    padding-top: var(--rk-sp-12);
}

.mp-h[b-3jjpqgbsyq] {
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.mp-empty[b-3jjpqgbsyq],
.mp-note[b-3jjpqgbsyq],
.mp-more[b-3jjpqgbsyq] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.mp-t[b-3jjpqgbsyq] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--rk-fs-sm);
}

.mp-t th[b-3jjpqgbsyq] {
    text-align: left;
    font-weight: normal;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    padding: var(--rk-sp-4) var(--rk-sp-8) var(--rk-sp-4) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.mp-t td[b-3jjpqgbsyq] {
    padding: var(--rk-sp-4) var(--rk-sp-8) var(--rk-sp-4) 0;
    vertical-align: top;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.mp-t .n[b-3jjpqgbsyq] {
    text-align: right;
    white-space: nowrap;
}

.mp-t .act[b-3jjpqgbsyq] {
    text-align: right;
    white-space: nowrap;
}

.mp-t tr.mp-why td[b-3jjpqgbsyq] {
    padding-top: 0;
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
    font-style: italic;
}

.mp-t--hist td[b-3jjpqgbsyq] {
    color: var(--rk-ink-soft);
}

.mp-why-inline[b-3jjpqgbsyq] {
    font-style: italic;
    font-size: var(--rk-fs-2xs);
}

.mp-scope[b-3jjpqgbsyq] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    margin-right: var(--rk-sp-4);
}

.mp-subj[b-3jjpqgbsyq] {
    font-weight: 600;
}

.mp-toggle[b-3jjpqgbsyq] {
    margin-top: var(--rk-sp-8);
    background: none;
    border: 0;
    padding: 0;
    color: var(--rk-accent-ink);
    font: inherit;
    font-size: var(--rk-fs-sm);
    text-decoration: underline;
    cursor: pointer;
}

.mp-v[b-3jjpqgbsyq] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    padding: 0 var(--rk-sp-4);
    border: var(--rk-border-hair) solid var(--rk-line);
}

.mp-v.is-met[b-3jjpqgbsyq] {
    color: var(--rk-ok);
    border-color: var(--rk-ok);
}

.mp-v.is-under[b-3jjpqgbsyq],
.mp-v.is-over[b-3jjpqgbsyq] {
    color: var(--rk-warn);
    border-color: var(--rk-warn);
}

.mp-v.is-none[b-3jjpqgbsyq] {
    color: var(--rk-ink-soft);
}

.mp-att[b-3jjpqgbsyq] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-2xs);
}

/* ---------------------------------------------------------------------------------------
   THE SENTENCE. Inline controls in a wrapping line, so it reads back as something a human
   can check - decision 26 - and still fits a phone by wrapping rather than scrolling.
   --------------------------------------------------------------------------------------- */
.mp-sentence[b-3jjpqgbsyq],
/* THE METRIC'S DEFAULT BAND - one line above the targets, since every band below is read by it. */
.mp-default[b-3jjpqgbsyq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-4) var(--rk-sp-10);
    margin: 0 0 var(--rk-sp-8);
    padding: var(--rk-sp-6) var(--rk-sp-10);
    border-left: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-zebra);
}

.mp-default__word[b-3jjpqgbsyq] {
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.mp-default__edit[b-3jjpqgbsyq] {
    margin-top: var(--rk-sp-4);
}

.mp-inherit[b-3jjpqgbsyq] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink-soft);
}

.mp-row[b-3jjpqgbsyq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-8);
    margin-bottom: var(--rk-sp-8);
}

.mp-sentence .w[b-3jjpqgbsyq],
.mp-row .w[b-3jjpqgbsyq] {
    font-size: var(--rk-fs-sm);
}

.mp-sentence[b-3jjpqgbsyq]  .mp-in,
.mp-row[b-3jjpqgbsyq]  .mp-in {
    margin: 0;
}

.mp-sentence[b-3jjpqgbsyq]  .mp-in--num,
.mp-row[b-3jjpqgbsyq]  .mp-in--num {
    width: 7rem;
}

/* A tolerance box is wider than a number box: its placeholder says what a blank inherits. */
.mp-sentence[b-3jjpqgbsyq]  .mp-in--tol {
    width: calc(var(--rk-blank-max) * 0.95);
}

.mp-sentence[b-3jjpqgbsyq]  .mp-in--scope {
    width: 12rem;
}

.mp-sentence[b-3jjpqgbsyq]  .mp-in--subj {
    width: 14rem;
}

.mp-sentence[b-3jjpqgbsyq]  .mp-in--date {
    width: 10rem;
}

.mp-row[b-3jjpqgbsyq]  .mp-in--period {
    width: 16rem;
}

.mp-preview[b-3jjpqgbsyq],
.mp-run[b-3jjpqgbsyq] {
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
}

.mp-go[b-3jjpqgbsyq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8) var(--rk-sp-12);
    margin-top: var(--rk-sp-8);
}

/* ---------------------------------------------------------------------------------------
   STEP 5 - EACH LIVE TARGET'S CALIBRATION (2026-09-27). A block under the in-force table, in
   its order: who the target is for, the flag in the mono micro-label, the reason in prose, and
   the adjust act. WARN for a flagged target, never DANGER - it is advice about a number, and
   nothing in the platform acts on it. A block rather than a table row, so a sentence of advice
   never widens the table beside it.
   --------------------------------------------------------------------------------------- */
.mp-cals[b-3jjpqgbsyq] {
    margin-top: var(--rk-sp-10);
    padding-top: var(--rk-sp-8);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.mp-cals__h[b-3jjpqgbsyq] {
    margin: 0 0 var(--rk-sp-6);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.mp-cal[b-3jjpqgbsyq] {
    padding: var(--rk-sp-6) 0 var(--rk-sp-8);
}

.mp-cal + .mp-cal[b-3jjpqgbsyq] {
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.mp-cal__who[b-3jjpqgbsyq] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-6);
}

.mp-cal__flag[b-3jjpqgbsyq] {
    display: inline-block;
    margin-right: var(--rk-sp-6);
    padding: var(--rk-sp-1) var(--rk-sp-4);
    border-radius: var(--rk-radius-xs);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-steel);
    background: var(--rk-hover-ghost);
}

.mp-cal.is-loose .mp-cal__flag[b-3jjpqgbsyq],
.mp-cal.is-unreal .mp-cal__flag[b-3jjpqgbsyq] {
    color: var(--rk-warn-ink);
    background: var(--rk-warn-soft);
}

.mp-cal.is-balanced .mp-cal__flag[b-3jjpqgbsyq] {
    color: var(--rk-ok-ink);
    background: var(--rk-ok-soft);
}

.mp-cal__why[b-3jjpqgbsyq] {
    margin: var(--rk-sp-4) 0 var(--rk-sp-6);
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   2026-09-27, THE BASELINE ADMIN - the panel in four tabs, a live target as a sentence, and
   the cards the measure is on (with any card's own target - applied on that card since 2026-09-28).
   --------------------------------------------------------------------------------------- */
.mp-targets[b-3jjpqgbsyq],
.mp-cards[b-3jjpqgbsyq] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mp-target[b-3jjpqgbsyq] {
    padding: var(--rk-sp-8) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.mp-target__who[b-3jjpqgbsyq] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-4) var(--rk-sp-10);
}

.mp-target__since[b-3jjpqgbsyq] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-steel);
}

.mp-target__words[b-3jjpqgbsyq] {
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.mp-target .mp-why[b-3jjpqgbsyq] {
    margin: var(--rk-sp-2) 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
}

.mp-target .mp-cal[b-3jjpqgbsyq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-4) var(--rk-sp-10);
    margin-top: var(--rk-sp-6);
}

.mp-target__acts[b-3jjpqgbsyq] {
    margin-top: var(--rk-sp-4);
}

.mp-card[b-3jjpqgbsyq] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-4) var(--rk-sp-10);
    padding: var(--rk-sp-8) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.mp-card__name[b-3jjpqgbsyq] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rk-ink);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    text-decoration: underline;
    text-decoration-color: var(--rk-line-hard);
    text-underline-offset: var(--rk-sp-4);
    cursor: pointer;
}

.mp-card__share[b-3jjpqgbsyq] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xl);
}

.mp-card__of[b-3jjpqgbsyq],
.mp-card__who[b-3jjpqgbsyq] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.mp-card__override[b-3jjpqgbsyq] {
    padding: 0 var(--rk-sp-6);
    border: var(--rk-border-hair) dashed var(--rk-warn-ink);
    border-radius: var(--rk-radius-xs);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-warn-ink);
}

.mp[b-3jjpqgbsyq]  .rk-tabs__panel {
    padding-top: var(--rk-sp-10);
}
/* /Components/Baselines/NewMeasureSentence.razor.rz.scp.css */
/* AUTHOR A MEASURE - the sentence carries the choices, the boxes below carry the typing. */

.nm-typed[b-llhxxiyu2x] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--rk-sp-12);
    margin: var(--rk-sp-12) 0;
}

@media (max-width: 760px) {
    .nm-typed[b-llhxxiyu2x] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.nm-note[b-llhxxiyu2x] {
    margin: var(--rk-sp-8) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
}

.nm-go[b-llhxxiyu2x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rk-sp-10);
}
/* /Components/Baselines/PersonPreviewStep.razor.rz.scp.css */
/*
    STEP 5 - WHAT A PERSON SEES. A phone-shaped panel in My Numbers' words beside where each number
    comes from. The bar is the CHROME pair (--rk-chrome-bg / --rk-chrome-ink), never ink on white:
    that pair is the one the tokens redefine for dark (CLAUDE.md trap).
*/

.bp-lede[b-xmx0hh3s1t] {
    margin: 0 0 var(--rk-sp-12);
    max-width: 80ch;
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
}

.bp-pick[b-xmx0hh3s1t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--rk-sp-10);
    margin-bottom: var(--rk-sp-16);
    max-width: 64rem;
}

.bp-grid[b-xmx0hh3s1t] {
    display: grid;
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: var(--rk-sp-24);
    align-items: start;
}

@media (max-width: 900px) {
    .bp-grid[b-xmx0hh3s1t] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bp-phone[b-xmx0hh3s1t] {
    max-width: 24rem;
    border: var(--rk-border) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-md);
    background: var(--rk-paper);
    box-shadow: var(--rk-shadow-card);
    overflow: hidden;
}

.bp-phone-bar[b-xmx0hh3s1t] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-10) var(--rk-sp-12);
    background: var(--rk-chrome-bg);
    color: var(--rk-chrome-ink);
}

.bp-phone-title[b-xmx0hh3s1t] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xl);
    letter-spacing: var(--rk-track-2xs);
}

.bp-phone-who[b-xmx0hh3s1t] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--rk-fs-sm);
    color: var(--rk-chrome-mute);
}

.bp-phone-lede[b-xmx0hh3s1t] {
    margin: 0;
    padding: var(--rk-sp-10) var(--rk-sp-12);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.bp-m[b-xmx0hh3s1t] {
    margin: 0 var(--rk-sp-10) var(--rk-sp-10);
    padding: var(--rk-sp-10) var(--rk-sp-12);
    border: var(--rk-border-card) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-card);
}

.bp-m.is-unset[b-xmx0hh3s1t] {
    border-style: dashed;
}

.bp-m-top[b-xmx0hh3s1t] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rk-sp-8);
}

.bp-m-name[b-xmx0hh3s1t] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.bp-m-stamp[b-xmx0hh3s1t] {
    flex: none;
    padding: 0 var(--rk-sp-6);
    border: var(--rk-border-hair) solid var(--rk-steel);
    border-radius: var(--rk-radius-xs);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-3xs);
    color: var(--rk-steel);
}

.bp-m-now[b-xmx0hh3s1t] {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-10);
    margin-top: var(--rk-sp-6);
}

.bp-m-val[b-xmx0hh3s1t] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-5xl);
    line-height: var(--rk-lh-flat);
    color: var(--rk-steel);
}

.bp-m-against[b-xmx0hh3s1t] {
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink);
}

.bp-m-band[b-xmx0hh3s1t],
.bp-m-how[b-xmx0hh3s1t] {
    margin-top: var(--rk-sp-4);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.bp-m-override[b-xmx0hh3s1t] {
    margin-top: var(--rk-sp-6);
    padding-left: var(--rk-sp-8);
    border-left: var(--rk-border) solid var(--rk-warn);
    font-size: var(--rk-fs-xs);
    color: var(--rk-warn-ink);
}

.bp-m-cards[b-xmx0hh3s1t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-2) var(--rk-sp-8);
    margin-top: var(--rk-sp-8);
    padding-top: var(--rk-sp-6);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.bp-m-cards-label[b-xmx0hh3s1t] {
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-steel);
}

.bp-m-quiet[b-xmx0hh3s1t] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.bp-h[b-xmx0hh3s1t] {
    margin: 0 0 var(--rk-sp-8);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
}

.bp-side-sum[b-xmx0hh3s1t] {
    margin: 0 0 var(--rk-sp-10);
    max-width: 70ch;
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
}

.bp-src[b-xmx0hh3s1t] {
    list-style: none;
    margin: 0 0 var(--rk-sp-12);
    padding: 0;
}

.bp-src li[b-xmx0hh3s1t] {
    padding: var(--rk-sp-8) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.bp-src-name[b-xmx0hh3s1t] {
    display: block;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
}

.bp-src-from[b-xmx0hh3s1t] {
    display: block;
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink);
}

.bp-src-from.is-none[b-xmx0hh3s1t] {
    color: var(--rk-warn-ink);
}

.bp-src-why[b-xmx0hh3s1t] {
    display: block;
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.bp-acts[b-xmx0hh3s1t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-12);
}
/* /Components/Baselines/TargetSentence.razor.rz.scp.css */
/* SET A TARGET - the sentence, the typed boxes under it, the band as it will be judged. */

.ts-fixed[b-3nwyn1zzhn] {
    font-family: var(--rk-font-display);
    color: var(--rk-ink);
}

.ts-typed[b-3nwyn1zzhn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--rk-sp-10);
    margin: var(--rk-sp-12) 0 var(--rk-sp-10);
}

.ts-preview[b-3nwyn1zzhn] {
    margin: var(--rk-sp-10) 0 0;
    max-width: var(--rk-measure);
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border-left: var(--rk-rail) solid var(--rk-accent);
    background: var(--rk-accent-soft);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.ts-preview-label[b-3nwyn1zzhn] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

.ts-note[b-3nwyn1zzhn] {
    margin: var(--rk-sp-8) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
}

.ts-go[b-3nwyn1zzhn] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--rk-sp-12);
}
/* /Components/Baselines/TargetsStep.razor.rz.scp.css */
/* STEP 3 - WHO IS HELD TO WHAT. The ladder on top, the two tools, then the targets per rung. */

.bt-lede[b-zp57crk4i1] {
    margin: 0 0 var(--rk-sp-12);
    max-width: 80ch;
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.bt-ladder[b-zp57crk4i1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
    margin-bottom: var(--rk-sp-16);
}

.bt-rung[b-zp57crk4i1] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--rk-sp-6);
    min-height: var(--rk-control-sm);
    padding: var(--rk-sp-4) var(--rk-sp-10);
    border: var(--rk-border) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-card);
    color: var(--rk-ink);
    font: inherit;
    cursor: pointer;
}

.bt-rung:hover[b-zp57crk4i1] {
    background: var(--rk-hover-ghost);
}

.bt-rung.is-on[b-zp57crk4i1] {
    border-color: var(--rk-accent);
    background: var(--rk-accent-soft);
}

.bt-rung-name[b-zp57crk4i1] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
}

.bt-rung-n[b-zp57crk4i1] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.bt-beats[b-zp57crk4i1] {
    color: var(--rk-steel);
    font-size: var(--rk-fs-xl);
}

.bt-tools[b-zp57crk4i1] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--rk-sp-16);
    margin-bottom: var(--rk-sp-20);
    align-items: start;
}

@media (max-width: 1000px) {
    .bt-tools[b-zp57crk4i1] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bt-set[b-zp57crk4i1],
.bt-who[b-zp57crk4i1] {
    min-width: 0;
    padding: var(--rk-sp-12);
    border: var(--rk-border-card) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-card);
}

.bt-set[b-zp57crk4i1] {
    border-left: var(--rk-rail) solid var(--rk-accent);
}

.bt-h[b-zp57crk4i1] {
    margin: 0 0 var(--rk-sp-8);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.bt-who-lede[b-zp57crk4i1] {
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.bt-who-row[b-zp57crk4i1] {
    display: grid;
    gap: var(--rk-sp-8);
}

.bt-resolved[b-zp57crk4i1] {
    margin: var(--rk-sp-10) 0 0;
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border-left: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-paper);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
}

.bt-group[b-zp57crk4i1] {
    margin-top: var(--rk-sp-16);
}

.bt-group-h[b-zp57crk4i1] {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-8);
    margin: 0 0 var(--rk-sp-6);
    padding-bottom: var(--rk-sp-4);
    border-bottom: var(--rk-border) solid var(--rk-ink);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
}

.bt-group-n[b-zp57crk4i1] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.bt-list[b-zp57crk4i1] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bt-item[b-zp57crk4i1] {
    padding: var(--rk-sp-10) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.bt-item-head[b-zp57crk4i1] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-4) var(--rk-sp-10);
}

.bt-who-word[b-zp57crk4i1] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.bt-metric[b-zp57crk4i1] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rk-ink);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xl);
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--rk-line-hard);
    text-underline-offset: var(--rk-sp-4);
}

.bt-metric:hover[b-zp57crk4i1] {
    text-decoration-color: var(--rk-accent);
}

.bt-words[b-zp57crk4i1] {
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-xl);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.bt-why[b-zp57crk4i1] {
    margin: var(--rk-sp-2) 0 0;
    max-width: 90ch;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
}

.bt-cal[b-zp57crk4i1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-4) var(--rk-sp-10);
    margin-top: var(--rk-sp-6);
    padding: var(--rk-sp-6) var(--rk-sp-8);
    border-left: var(--rk-border) solid var(--rk-line-hard);
    background: var(--rk-paper);
    font-size: var(--rk-fs-sm);
}

.bt-cal.is-loose[b-zp57crk4i1],
.bt-cal.is-unreal[b-zp57crk4i1] {
    border-left-color: var(--rk-warn);
    background: var(--rk-warn-soft);
}

.bt-cal.is-balanced[b-zp57crk4i1] {
    border-left-color: var(--rk-ok);
}

.bt-cal-flag[b-zp57crk4i1] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.bt-cal-why[b-zp57crk4i1] {
    flex: 1 1 18rem;
    min-width: 0;
    color: var(--rk-ink);
}

.bt-acts[b-zp57crk4i1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
    margin-top: var(--rk-sp-4);
}

.bt-link[b-zp57crk4i1] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rk-ink-soft);
    font: inherit;
    font-size: var(--rk-fs-sm);
    text-decoration: underline;
    cursor: pointer;
}

.bt-history[b-zp57crk4i1] {
    margin: var(--rk-sp-6) 0 0;
    padding-left: var(--rk-sp-20);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}
/* /Components/Baselines/WheelStep.razor.rz.scp.css */
/*
    STEP 1 - THE WHEEL. Every value is a token from rk-tokens.css, and every token here was read
    from that file: --rk-line is a COLOUR (not a border shorthand), --rk-border-* are WIDTHS.
    Desktop: the five pillars side by side, the way the wheel's hub reads left to right. Phone:
    stacked, one pillar a band.
*/

.bw-lede[b-tp3yekafay] {
    margin: 0 0 var(--rk-sp-10);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.bw-legend[b-tp3yekafay] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6) var(--rk-sp-16);
    margin-bottom: var(--rk-sp-12);
    font-size: var(--rk-fs-xs);
    color: var(--rk-steel);
}

.bw-key[b-tp3yekafay] {
    display: inline-flex;
    align-items: center;
    gap: var(--rk-sp-6);
}

.bw-pillars[b-tp3yekafay] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--rk-sp-10);
    align-items: start;
}

@media (max-width: 1100px) {
    .bw-pillars[b-tp3yekafay] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .bw-pillars[b-tp3yekafay] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bw-pillar[b-tp3yekafay] {
    min-width: 0;
    border: var(--rk-border-card) solid var(--rk-line-hard);
    border-top: var(--rk-border) solid var(--rk-ink);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-card);
}

.bw-pillar-head[b-tp3yekafay] {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-6);
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.bw-pillar-name[b-tp3yekafay] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.bw-pillar-verb[b-tp3yekafay] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.bw-pillar-cov[b-tp3yekafay] {
    margin-left: auto;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.bw-spokes[b-tp3yekafay] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bw-spoke[b-tp3yekafay] {
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.bw-spoke:last-child[b-tp3yekafay] {
    border-bottom: 0;
}

/* An EMPTY spoke is the part of the program nobody measures - quieter paper, never red. */
.bw-spoke.is-empty[b-tp3yekafay] {
    background: var(--rk-zebra);
}

.bw-spoke.is-unfiled .bw-spoke-name[b-tp3yekafay] {
    color: var(--rk-steel);
    font-style: italic;
}

.bw-spoke-name[b-tp3yekafay] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink);
}

.bw-spoke-what[b-tp3yekafay] {
    margin-top: var(--rk-sp-2);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
}

.bw-chips[b-tp3yekafay] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4);
    margin-top: var(--rk-sp-6);
}

.bw-m[b-tp3yekafay] {
    display: inline-flex;
    align-items: center;
    gap: var(--rk-sp-4);
    max-width: 100%;
    padding: var(--rk-sp-4) var(--rk-sp-8);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-pill);
    background: var(--rk-paper);
    color: var(--rk-ink);
    font: inherit;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-tight);
    text-align: left;
    cursor: pointer;
}

.bw-m:hover[b-tp3yekafay] {
    background: var(--rk-hover-ghost);
    border-color: var(--rk-ink);
}

.bw-m:focus-visible[b-tp3yekafay],
.bw-add:focus-visible[b-tp3yekafay] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.bw-m-name[b-tp3yekafay] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bw-dot[b-tp3yekafay] {
    flex: none;
    display: inline-block;
    width: var(--rk-sp-8);
    height: var(--rk-sp-8);
    border-radius: var(--rk-radius-circle);
    border: var(--rk-border-hair) solid var(--rk-steel);
    background: transparent;
}

.bw-dot.is-auto[b-tp3yekafay] {
    background: var(--rk-ok);
    border-color: var(--rk-ok);
}

.bw-dot.is-hand[b-tp3yekafay] {
    background: var(--rk-warn);
    border-color: var(--rk-warn);
}

.bw-dot.is-wait[b-tp3yekafay] {
    background: var(--rk-disabled);
    border-color: var(--rk-disabled-deep);
}

.bw-target[b-tp3yekafay] {
    font-size: var(--rk-fs-3xs);
    color: var(--rk-accent-ink);
}

.bw-none[b-tp3yekafay] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
    margin-top: var(--rk-sp-6);
    font-size: var(--rk-fs-xs);
    color: var(--rk-steel);
}

.bw-add[b-tp3yekafay] {
    padding: var(--rk-sp-2) var(--rk-sp-8);
    border: var(--rk-border-hair) dashed var(--rk-accent-ink);
    border-radius: var(--rk-radius-pill);
    background: transparent;
    color: var(--rk-accent-ink);
    font: inherit;
    font-size: var(--rk-fs-xs);
    cursor: pointer;
}

.bw-add:hover[b-tp3yekafay] {
    background: var(--rk-accent-soft);
}

.bw-orphans[b-tp3yekafay] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
    margin-top: var(--rk-sp-12);
}

.bw-orphans-label[b-tp3yekafay] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.bw-note[b-tp3yekafay] {
    margin: var(--rk-sp-16) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
}
/* /Components/Board/BoardCard.razor.rz.scp.css */
/*
    THE VISIT CARD.

    Tokens only - no raw colour, size, radius or shadow. The one exception is the two inline
    style attributes in the markup, which carry the COMPANY's own status and priority colours
    out of the database; they are validated to #rrggbb before they get there and fall back to
    a token class when they are absent.

    It is deliberately flatter than RkCard: a lane holds twenty of these and the cut corner
    plus the hard shadow, twenty times, is noise. Status lives on the left rail, which is the
    design system's own idiom and the cheapest thing to scan down a column.
*/

.card[b-1s99ph8nmp] {
    position: relative;
    display: block;
    width: 100%;
    padding: var(--rk-sp-8) var(--rk-sp-10) var(--rk-sp-8) var(--rk-sp-12);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-line-hard);
    background: var(--rk-card);
    color: var(--rk-ink);
    text-align: left;
    cursor: grab;
    transition: box-shadow var(--rk-dur-press) var(--rk-ease),
                transform var(--rk-dur-press) var(--rk-ease);
}

.card:hover[b-1s99ph8nmp] {
    background: var(--rk-hover-ghost);
}

.card:focus-visible[b-1s99ph8nmp] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.card:active[b-1s99ph8nmp] {
    cursor: grabbing;
}

/*
    The lifted state while dragging. A hard offset rather than a blur, to match the design
    system's one card shadow - this kit has exactly two shadows and that is correct.
*/
.card--lifted[b-1s99ph8nmp] {
    opacity: 0.55;
    box-shadow: var(--rk-shadow-card);
    transform: translate(var(--rk-sp-1), calc(var(--rk-sp-1) * -1));
}

/* Done, and no longer needing the eye. */
.card--muted[b-1s99ph8nmp] {
    opacity: 0.62;
}

.card--accent[b-1s99ph8nmp]  { border-left-color: var(--rk-accent); }
.card--ok[b-1s99ph8nmp]      { border-left-color: var(--rk-ok); }
.card--warn[b-1s99ph8nmp]    { border-left-color: var(--rk-warn); }
.card--danger[b-1s99ph8nmp]  { border-left-color: var(--rk-danger); }
.card--steel[b-1s99ph8nmp]   { border-left-color: var(--rk-steel); }
.card--neutral[b-1s99ph8nmp] { border-left-color: var(--rk-line-hard); }

.card__head[b-1s99ph8nmp] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-6);
    margin-bottom: var(--rk-sp-4);
}

.card__code[b-1s99ph8nmp] {
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-2xs);
}

.card__seq[b-1s99ph8nmp] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-steel);
}

.card__status[b-1s99ph8nmp] {
    margin-left: auto;
    padding: var(--rk-sp-2) var(--rk-sp-6);
    border-radius: var(--rk-radius-xs);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    line-height: var(--rk-lh-flat);
    text-transform: uppercase;
    white-space: nowrap;
}

/*
    Used when the company has not configured a colour pair, or configured a malformed one.
    The 'on' language - ink ground, paper text - is the one saturated pairing that survives
    the theme flip, because both halves flip together.
*/
.card__status--fallback[b-1s99ph8nmp] {
    background: var(--rk-ink);
    color: var(--rk-paper);
}

.card__who[b-1s99ph8nmp] {
    margin: 0;
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    line-height: var(--rk-lh-tight);
}

/*
    THE PAYER AND THE ROUND, AS SMALL TAGS UNDER THE BUSINESS (Kirk, 2026-10-27: "Business bold, bank
    as tag"). Quiet on purpose - the bold line above is what a dispatcher scans; these say who pays
    and which agreement the stop came from without competing with it. They wrap rather than widen a
    card, and a long round name ellipses inside its own tag.
*/
.card__tags[b-1s99ph8nmp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-2) var(--rk-sp-4);
    margin: var(--rk-sp-2) 0 0;
}

.card__tag[b-1s99ph8nmp] {
    max-width: 100%;
    padding: var(--rk-sp-1) var(--rk-sp-4);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-xs);
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    line-height: var(--rk-lh-flat);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The round reads as the agreement's own name, so it keeps its own case and a dashed edge. */
.card__tag--round[b-1s99ph8nmp] {
    border-style: dashed;
    text-transform: none;
    color: var(--rk-steel);
}

.card__where[b-1s99ph8nmp] {
    margin: var(--rk-sp-2) 0 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
    line-height: var(--rk-lh-tight);
}

.card__leg[b-1s99ph8nmp] {
    margin-inline-end: var(--rk-sp-4);
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-bold);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink);
}

.card__leg--drop[b-1s99ph8nmp] {
    color: var(--rk-accent-ink);
}

.card__what[b-1s99ph8nmp] {
    margin: var(--rk-sp-5) 0 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
    line-height: var(--rk-lh-snug);

    /* Two lines of the complaint. The rest is one click away, and a card that grows to fit a
       paragraph destroys the column a dispatcher is scanning. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card__marks[b-1s99ph8nmp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-4);
    margin-top: var(--rk-sp-6);
}

.card__pri[b-1s99ph8nmp] {
    padding: var(--rk-sp-1) var(--rk-sp-5);
    border-radius: var(--rk-radius-xs);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-3xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    line-height: var(--rk-lh-flat);
    text-transform: uppercase;
}

.card__slot[b-1s99ph8nmp] {
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink-soft);
}

.card__slot--none[b-1s99ph8nmp] {
    font-family: var(--rk-font-body);
    font-style: italic;
    color: var(--rk-steel);
}

/*
    THE LIVE INTERVAL. Loud on purpose: "sent 47m" on a card nobody is driving to is the
    single most useful thing on this screen and the one ESC cannot show at all.

    🛑 ITS OWN CLASS (2026-10-15). It was .card__tick too - the same name as the pick tick that
    lies over the left rail - so the pick tick's rule won and every live interval ("working 5h
    50m") was pinned to the card's left edge in white, over the address. Kirk: "What is the
    white lettering there?"
*/
.card__elapsed[b-1s99ph8nmp] {
    padding: var(--rk-sp-1) var(--rk-sp-5);
    border: var(--rk-border-hair) solid var(--rk-accent);
    border-radius: var(--rk-radius-xs);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    color: var(--rk-accent-ink);
    line-height: var(--rk-lh-flat);
}

.card__flag[b-1s99ph8nmp] {
    padding: var(--rk-sp-1) var(--rk-sp-5);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-xs);
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    line-height: var(--rk-lh-flat);
    white-space: nowrap;
}

.card__flag--danger[b-1s99ph8nmp] {
    border-color: var(--rk-danger);
    background: var(--rk-danger-soft);
    color: var(--rk-danger-ink);
    font-weight: var(--rk-fw-bold);
}

.card__flag--carried[b-1s99ph8nmp] {
    border-color: var(--rk-warn);
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
    font-weight: var(--rk-fw-bold);
}

.card__flag--warn[b-1s99ph8nmp] {
    border-color: var(--rk-warn);
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
    font-weight: var(--rk-fw-bold);
}

.card__flag--quiet[b-1s99ph8nmp] {
    border-style: dashed;
    color: var(--rk-steel);
}

/*
    FOUND ON PM - the credit case, as a stamp. The design system's stamp idiom (display face,
    wide tracking, an outline in the tone) at the flag's size, and FLAT rather than tilted: a
    rotated box in a flex row of twenty cards clips or pushes the row taller, which is the
    reason RkStamp has a Flat mode at all.

    ⚠️ THE TEXT IS --rk-accent-ink, NOT --rk-accent. This is 3xs text; the raw accent is 3.5:1
    on a card and fails the small-text floor. The accent belongs on the border, which is what
    it is for.
*/
.card__flag--found[b-1s99ph8nmp] {
    border-color: var(--rk-accent);
    background: var(--rk-accent-soft);
    color: var(--rk-accent-ink);
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
}

/*
    CALLBACK - a return to fix finished work (2026-09-28). The stamp idiom of the found flag in
    the WARN tone: nobody wants this number to grow, and it should read from across the room.
    Small text on --rk-warn-ink, the border on the raw tone - the small-text floor, as above.
*/
.card__flag--callback[b-1s99ph8nmp] {
    border-color: var(--rk-warn);
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
}

/*
    BOOKED ONLINE - the client booked it on their own website (lane AR, 2026-10-13). The stamp idiom
    in the OK tone: new business that arrived by itself. Small text on --rk-ok-ink, the floor as above.
*/
.card__flag--online[b-1s99ph8nmp] {
    border-color: var(--rk-ok);
    background: var(--rk-ok-soft);
    color: var(--rk-ok-ink);
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
}

/* =====================================================================================
   PICKING, AND SKINNY MODE
   =====================================================================================
   Kirk: "a way to single/multi-select jobs and move them to someone else... the board can
   get REALLY WIDE" and "We need a skinny mode too - way to collapse to job so we can fit a
   LOT more on a page. See alot going down."
   ===================================================================================== */

/* THE TICK IS THE WHOLE LEFT EDGE. Same reason the card is its own drag handle: a
   dispatcher picking twelve jobs off a wide board should not be aiming at an 18px box. It
   sits over the coloured rail, which is dead space on every card. */
.card__tick[b-1s99ph8nmp] {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(-1 * var(--rk-rail));
    inline-size: var(--rk-sp-16);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rk-on-fill);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-flat);
    cursor: pointer;
}

.card__tick:hover[b-1s99ph8nmp] {
    background: var(--rk-hover-ghost);
}

/* THE UNPICKED BOX READS AS A CHECKBOX (Kirk 2026-11-11: "There is no check box to pick") -
   a paper column with its own hairline and a quiet ring, so picking mode is visible on every
   card at a glance; the ✓ lands on accent at full strength. */
.card__tick:not(.card__tick--on)[b-1s99ph8nmp] {
    /* --rk-paper, not the --rk-surface this first shipped with: rk-tokens.css declares no
       such token, so CSS dropped the line silently and the box rendered with no fill at all
       (the token-exists gate now fails the build on exactly this). */
    background: var(--rk-paper);
    border-inline-end: var(--rk-border-hair) solid var(--rk-line);
    color: var(--rk-steel);
}

.card__tick:focus-visible[b-1s99ph8nmp] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: -2px;
}

.card__tick--on[b-1s99ph8nmp] {
    background: var(--rk-accent);
    color: var(--rk-accent-ink);
}

/* A PICKED CARD IS OBVIOUS FROM ACROSS THE ROOM. Kirk: "Make sure dispatch board is easy
   for old guys." The rail alone is too quiet when twelve are picked among ninety, so the
   whole card takes the accent wash as well. */
.card--picked[b-1s99ph8nmp] {
    background: var(--rk-accent-soft);
    border-left-color: var(--rk-accent);
}

.card--picked:hover[b-1s99ph8nmp] {
    background: var(--rk-accent-soft);
}

/* THE CARD THE MAP POINTED AT. A ring rather than a wash, so it cannot be mistaken for a PICKED
   card - picking is a selection somebody is about to act on, this is only "here it is". It
   stays until another pin is clicked or the pane's own close clears it, because a highlight
   that faded on a timer would be gone by the time somebody scrolled back to look. */
.card--located[b-1s99ph8nmp] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
    box-shadow: var(--rk-shadow-card);
}

.card--located:focus-visible[b-1s99ph8nmp] {
    outline: var(--rk-border) solid var(--rk-accent);
}

/* -------------------------------------------------------------------------------------
   SKINNY. One line per job: its number, its status and when it is due.

   🛑 IT HIDES, IT DOES NOT REMOVE. Everything the full card renders is still in the DOM -
   there is no second markup path and no second component - so the two modes cannot drift
   into showing different facts, and a bug in skinny mode is a bug in the card.
   ------------------------------------------------------------------------------------- */
.card--skinny[b-1s99ph8nmp] {
    padding: var(--rk-sp-4) var(--rk-sp-8) var(--rk-sp-4) var(--rk-sp-10);
}

.card--skinny .card__where[b-1s99ph8nmp],
.card--skinny .card__tag--round[b-1s99ph8nmp],
.card--skinny .card__what[b-1s99ph8nmp],
.card--skinny .card__marks[b-1s99ph8nmp] {
    display: none;
}

/* The payer stays in skinny mode (review, 2026-10-28): the lead is the business now, so the tag is the only line
   that says a stop is the bank's - only the round is folded away. */
.card--skinny .card__tags[b-1s99ph8nmp] {
    margin-top: 0;
}

.card--skinny .card__head[b-1s99ph8nmp] {
    margin-bottom: 0;
}

/* The site name stays - it is the one thing a dispatcher scans for - but drops to the body
   size and to a single line, so forty of them fit down a column. */
.card--skinny .card__who[b-1s99ph8nmp] {
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card--skinny .card__tick[b-1s99ph8nmp] {
    inline-size: var(--rk-sp-12);
}
/* /Components/Board/BoardJobSearch.razor.rz.scp.css */
/*
    THE BOARD'S SEARCH BOX AND ITS RESULTS.

    Tokens only. The panel floats over the board rather than pushing it down: a dispatcher
    types a job number and the lanes must not jump under the cursor they are about to use.
*/

.find[b-4ve7pbgbr7] {
    position: relative;
    min-width: 0;
}

/*
    ::deep because Class on a kit control lands on THAT component's scoped element - the same
    reason .bar uses it on the day and pick fields. Wider than the other bar fields because
    a site name is not a four-digit code.
*/
.find[b-4ve7pbgbr7]  .rk-field {
    margin-bottom: 0;
}

.find[b-4ve7pbgbr7]  .find__box {
    width: calc(var(--rk-blank-max) * 2);
    max-width: 100%;
}

/*
    THE PANEL. Above the bar and above a lane header, below a modal scrim - --rk-z-pop is the
    rung for exactly this: something attached to a control rather than something that owns the
    screen.
*/
.find__panel[b-4ve7pbgbr7] {
    position: absolute;
    top: calc(100% + var(--rk-sp-4));
    left: 0;
    z-index: var(--rk-z-pop);
    width: calc(var(--rk-blank-max) * 3);
    max-width: 92vw;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--rk-card);
    border: var(--rk-border) solid var(--rk-ink);
    border-radius: var(--rk-radius-sm);
    box-shadow: var(--rk-shadow-float);
    scrollbar-width: thin;
}

.find__head[b-4ve7pbgbr7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-6) var(--rk-sp-10);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
    position: sticky;
    top: 0;
    background: var(--rk-card);
}

.find__lead[b-4ve7pbgbr7] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

/*
    The Escape affordance is a real button and not a hint, because a mouse user needs a way
    out too - and it says the key so a keyboard user learns it without a tooltip.
*/
.find__close[b-4ve7pbgbr7] {
    border: var(--rk-border-hair) solid var(--rk-line);
    background: transparent;
    color: var(--rk-accent-ink);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    padding: 0 var(--rk-sp-4);
    border-radius: var(--rk-radius-xs);
    cursor: pointer;
}

.find__close:hover[b-4ve7pbgbr7] {
    background: var(--rk-hover-ghost);
}

/*
    EVERY NON-RESULT STATE READS AS A SENTENCE, NEVER AS AN EMPTY BOX. An empty dropdown
    cannot tell "no such job" from "still typing" from "the door refused you".
*/
.find__state[b-4ve7pbgbr7] {
    margin: 0;
    padding: var(--rk-sp-10);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-sentence);
    color: var(--rk-accent-ink);
}

.find__state--bad[b-4ve7pbgbr7] {
    color: var(--rk-danger);
}

.find__list[b-4ve7pbgbr7] {
    display: flex;
    flex-direction: column;
}

.find__pick[b-4ve7pbgbr7] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: var(--rk-sp-2) var(--rk-sp-8);
    width: 100%;
    padding: var(--rk-sp-6) var(--rk-sp-10);
    border: 0;
    background: transparent;
    color: var(--rk-ink);
    text-align: left;
    cursor: pointer;
}

.find__pick + .find__pick[b-4ve7pbgbr7] {
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

/*
    ONE HIGHLIGHT FOR THE KEYBOARD AND THE MOUSE. Hovering sets the same active row the
    arrows do, so there is never a keyboard highlight in one place and a hover in another -
    two highlights and Enter takes the one the eye is not on.
*/
.find__pick--on[b-4ve7pbgbr7] {
    background: var(--rk-accent-soft);
}

.find__no[b-4ve7pbgbr7] {
    grid-column: 1;
    font-weight: var(--rk-fw-semibold);
    font-size: var(--rk-fs-sm);
}

.find__who[b-4ve7pbgbr7] {
    grid-column: 2;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

.find__when[b-4ve7pbgbr7] {
    grid-column: 3;
    justify-self: end;
    font-size: var(--rk-fs-2xs);
    color: var(--rk-accent-ink);
    white-space: nowrap;
}

.find__where[b-4ve7pbgbr7] {
    grid-column: 1 / -1;
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-accent-ink);
    overflow-wrap: anywhere;
}

/* The small print, on one line so a result stays three lines tall however much it carries. */
.find__marks[b-4ve7pbgbr7] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-2) var(--rk-sp-8);
}

.find__word[b-4ve7pbgbr7] {
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-steel);
}

/* A finished job is not a fault, so it is muted rather than coloured. */
.find__word--shut[b-4ve7pbgbr7] {
    color: var(--rk-disabled-text);
}

.find__po[b-4ve7pbgbr7] {
    font-size: var(--rk-fs-3xs);
    color: var(--rk-accent-ink);
}
/* /Components/Board/BoardLaneColumn.razor.rz.scp.css */
/*
    ONE LANE.

    Fixed width, its own scroll. A dispatcher's board is a horizontal strip of columns and
    each column is a tall pile - so the PAGE scrolls sideways and each LANE scrolls down,
    which keeps the headers in view while somebody works one technician's day.
*/

.lane[b-zcj0ij752l] {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: var(--rk-lane-w);
    max-height: var(--rk-lane-h);
    border: var(--rk-border-hair) solid var(--rk-line);
    background: var(--rk-paper);
}

/*
    THE INBOX IS NOT A NORMAL COLUMN AND MUST NOT LOOK LIKE ONE.

    Decision 32: unassigned is a real state with its own column per zone, and it is the inbox
    each team works from. It gets the accent edge because it is the pile somebody has to
    clear, and a board where the inbox reads the same as everything else has hidden the one
    column that needs attention.

    ONLY THE TOP EDGE, though. Boxing the whole lane in orange was tried and it reads as "every
    card in here is an emergency" - which is exactly the signal the priority chip and the late
    flag are for, and burning it on a column that is merely unworked leaves nothing louder for
    the card that is actually on fire.
*/
.lane--inbox[b-zcj0ij752l] {
    border-top: var(--rk-btn-edge) solid var(--rk-accent);
}

.lane--queue[b-zcj0ij752l] {
    border-top: var(--rk-border) solid var(--rk-steel);
}

.lane--tech[b-zcj0ij752l] {
    border-top: var(--rk-border) solid var(--rk-line-hard);
}

/* A configured lane with nothing on it. Present, droppable, and quiet. */
.lane--quiet[b-zcj0ij752l] {
    background: transparent;
}

/* Hovering with a card. The whole lane lights, because the whole lane is the target. */
.lane--over[b-zcj0ij752l] {
    outline: var(--rk-border) dashed var(--rk-accent);
    outline-offset: calc(var(--rk-sp-2) * -1);
    background: var(--rk-accent-soft);
}

.lane__head[b-zcj0ij752l] {
    position: sticky;
    top: 0;
    padding: var(--rk-sp-6) var(--rk-sp-8);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);

    /* The default when the company configured no colour pair. An inline style overrides both
       of these when it did. */
    background: var(--rk-card);
    color: var(--rk-ink);
}

.lane__who[b-zcj0ij752l] {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-6);
}

.lane__name[b-zcj0ij752l] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    line-height: var(--rk-lh-tight);
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lane__carried[b-zcj0ij752l] {
    padding: var(--rk-sp-1) var(--rk-sp-5);
    border: var(--rk-border-hair) solid var(--rk-warn);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
    font-size: var(--rk-fs-3xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    line-height: var(--rk-lh-flat);
    white-space: nowrap;
}

.lane__count[b-zcj0ij752l] {
    margin-left: auto;
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-bold);
}

.lane__meta[b-zcj0ij752l] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-5);
    margin-top: var(--rk-sp-2);
    /* Inherits the header's ink, which may be the company's configured text colour. */
    opacity: 0.8;
}

.lane__kind[b-zcj0ij752l] {
    font-size: var(--rk-fs-3xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
}

.lane__kind--soft[b-zcj0ij752l] {
    font-weight: var(--rk-fw-body);
    opacity: 0.85;
}

.lane__title[b-zcj0ij752l],
.lane__dept[b-zcj0ij752l] {
    font-size: var(--rk-fs-2xs);
}

.lane__dept[b-zcj0ij752l] {
    margin-left: auto;
    letter-spacing: var(--rk-track-2xs);
}

/* WHAT THE PERSON IS RUNNING (2026-10-30) - one line per route, "BIH Mon/Wed 1 - 37 stops". Inherits the
   header's ink like the meta row, so it reads on a company-coloured header in light and dark alike. */
.lane__runs[b-zcj0ij752l] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-1);
    margin-top: var(--rk-sp-2);
    min-width: 0;
}

.lane__run[b-zcj0ij752l] {
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lane__tail[b-zcj0ij752l] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-5);
    margin-top: var(--rk-sp-4);
    min-height: var(--rk-sp-1);
}

.lane__warn[b-zcj0ij752l],
.lane__anywhere[b-zcj0ij752l] {
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    opacity: 0.85;
}

.lane__warn[b-zcj0ij752l] {
    font-weight: var(--rk-fw-bold);
}

/* THE HANDSET HEARTBEAT (lane BOARDFIX). Inherits the header's own ink; the stale state is a warn chip whose
   colours are its own, so it reads on any column colour. Small text never wears raw --rk-accent. */
.lane__phone[b-zcj0ij752l] {
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    opacity: 0.85;
}

.lane__phone--quiet[b-zcj0ij752l] {
    opacity: 0.6;
}

.lane__phone--stale[b-zcj0ij752l] {
    padding: 0 var(--rk-sp-4);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
    font-weight: var(--rk-fw-bold);
    opacity: 1;
}

.lane__cards[b-zcj0ij752l] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-5);
    padding: var(--rk-sp-6);
    overflow-y: auto;

    /* Grows to fill the lane so the empty space below the last card is still a drop target -
       which is the whole reason an empty lane is worth fetching. */
    flex: 1 1 auto;
    min-height: var(--rk-sp-40);
}

.lane__empty[b-zcj0ij752l] {
    margin: var(--rk-sp-8) 0;
    font-size: var(--rk-fs-sm);
    font-style: italic;
    color: var(--rk-steel);
    text-align: center;
}

/*
    AN EMPTY COLUMN UNDER A FILTER (2026-10-30). Not "Free. Drop work here." - Steve's Mac said that under a driver
    with 12 jobs that day, because a remembered filter hid them. A warn box, so it cannot be read as an invitation;
    "Hidden by a filter" (certain) is bolder than "Nothing showing with the filter on" (it may truly be empty).
    The lane is still the drop target all round it.
*/
.lane__filtered[b-zcj0ij752l] {
    margin: var(--rk-sp-8) 0;
    padding: var(--rk-sp-6) var(--rk-sp-8);
    border: var(--rk-border-hair) dashed var(--rk-warn);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
    text-align: center;
}

.lane__filtered--certain[b-zcj0ij752l] {
    border-style: solid;
}

.lane__filtered-head[b-zcj0ij752l] {
    margin: 0;
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
}

.lane__filtered-why[b-zcj0ij752l] {
    margin: var(--rk-sp-2) 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

.lane__filtered-clear[b-zcj0ij752l] {
    margin-top: var(--rk-sp-5);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    color: var(--rk-warn-ink);
    text-decoration: underline;
    cursor: pointer;
}

.lane__filtered-clear:focus-visible[b-zcj0ij752l] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: 2px;
}

/* A skinny lane is narrower as well as shorter - the whole point is fitting more of the
   day on one screen, and a 320px column full of one-line cards is mostly white space. */
/* 🛑 --rk-sp-40 IS 40 PIXELS OF SPACING, NOT A WIDTH. The first draft used it here and
   collapsed every lane to a 40px sliver - it compiled, the token exists, and the board was
   unusable. The lane width token is --rk-lane-w (320px); skinny is a fraction of it, so the
   two stay related if the base ever moves. */
.lane--skinny[b-zcj0ij752l] {
    inline-size: calc(var(--rk-lane-w) * 0.66);
    min-inline-size: calc(var(--rk-lane-w) * 0.66);
}

.lane--skinny .lane__cards[b-zcj0ij752l] {
    gap: var(--rk-sp-2);
}

/*
    THE PICK-ALL BOX (2026-10-30). Kirk: "a multi-select box in the column header to select entire row of jobs."
    A real button with role=checkbox and aria-checked true / mixed / false, so the partly-ticked state needs no
    script. It draws in the header's own ink (currentColor), because a company may paint the header its own
    colour pair and a fixed ink would vanish on one of them; ticked it takes the accent like a picked card's tick.
*/
.lane__pickall[b-zcj0ij752l] {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    inline-size: var(--rk-sp-16);
    block-size: var(--rk-sp-16);
    padding: 0;
    border: var(--rk-border) solid currentColor;
    border-radius: var(--rk-radius-xs);
    background: transparent;
    color: inherit;
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-flat);
    cursor: pointer;
    align-self: center;
}

.lane__pickall:hover[b-zcj0ij752l] {
    background: var(--rk-hover-ghost);
}

.lane__pickall:focus-visible[b-zcj0ij752l] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: 2px;
}

/* :hover is listed too - it outranks a bare modifier, and a ticked box must not fade to the ghost under the mouse. */
.lane__pickall--all[b-zcj0ij752l],
.lane__pickall--some[b-zcj0ij752l],
.lane__pickall--all:hover[b-zcj0ij752l],
.lane__pickall--some:hover[b-zcj0ij752l] {
    border-color: var(--rk-accent);
    background: var(--rk-accent);
    color: var(--rk-on-fill);
}
/* /Components/Board/BoardMapPane.razor.rz.scp.css */
/*
    THE BOARD'S MAP PANE.

    Layout only, tokens only. The one place a literal colour reaches this pane is the swatch
    style attribute carrying the COMPANY's own visit-status colour out of the database - the
    same value the card paints - and it passes BoardFormat.Hex before it gets there.

    ⚠️ WHERE THE PANE SITS IS THE PAGE'S BUSINESS (DispatchBoard.razor.css, .stage). This file
    styles what is inside it and says how tall the map is in each of the two shapes.
*/

.bmap[b-owzk16xoq3] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    min-width: 0;
    height: 100%;
    padding: var(--rk-sp-8) var(--rk-sp-10) var(--rk-sp-10);
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line-hard);
    border-left: var(--rk-rail) solid var(--rk-steel);
}

/* ── THE HEAD: the honesty line and three tools ───────────────────────────────────────── */

.bmap__head[b-owzk16xoq3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-6) var(--rk-sp-10);
}

.bmap__truth[b-owzk16xoq3] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-6);
    min-width: 0;
}

.bmap__num[b-owzk16xoq3] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--rk-lh-flat);
    color: var(--rk-ink);
}

.bmap__word[b-owzk16xoq3] {
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink);
}

.bmap__word--soft[b-owzk16xoq3] {
    color: var(--rk-ink-soft);
}

.bmap__why[b-owzk16xoq3] {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-ink);
    text-decoration: underline;
    text-underline-offset: var(--rk-sp-3);
    cursor: pointer;
}

.bmap__why:hover[b-owzk16xoq3] {
    color: var(--rk-accent-deep);
}

.bmap__tools[b-owzk16xoq3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}

.bmap__note[b-owzk16xoq3] {
    margin: 0;
    font-size: var(--rk-fs-md);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/* ── THE MAP BOX ──────────────────────────────────────────────────────────────────────────
   RkMap reads --rk-map-h / --rk-map-min-h off its own box; this pane sets both on the body it
   sits in, which is the override the token file's own note describes ("a host overrides either
   on its own container").

   🛑 isolation: isolate IS LOAD-BEARING. The map's veil and hover card sit at --rk-z-pop, which
   outranks the app bar (rk-tokens.css says so and names this very fix), so a map scrolled under
   the sticky bar painted its tooltip over it. An isolated body makes the map's whole z-ladder
   local to this box - done here, on our own element, so the kit is not touched. */

.bmap__body[b-owzk16xoq3] {
    position: relative;
    isolation: isolate;
    min-width: 0;
    height: clamp(18rem, 52dvh, 34rem);
    --rk-map-h: 100%;
    --rk-map-min-h: 0;
}

.bmap__empty[b-owzk16xoq3] {
    min-width: 0;
}

/* ── WHAT THE PIN WAS ─────────────────────────────────────────────────────────────────────
   A card floating ON the map, in RkMap's overlay slot, TOP LEFT - clear of the zoom buttons at
   the top right (sp-8 in, control-sm wide), which is what the width sum leaves room for.

   ⚠️ ON THE MAP, AND AT ITS TOP, BECAUSE BOTH OTHER PLACES WERE MEASURED OUT OF SIGHT. Under the
   map, and at the map's bottom edge, the card sat below the fold of a 1440x1000 screen whenever
   the pane had not yet stuck (it starts ~475px down, under the filter bar): the pin was clicked,
   the board card ringed, and the "Open the job" answering the click could not be seen. The top
   of the map is in view in every shape the pane takes - stuck, not yet stuck, above the lanes,
   on a phone. It covers a corner of the map, and the x takes it away. */

.bmap__pick[b-owzk16xoq3] {
    position: absolute;
    top: var(--rk-sp-8);
    left: var(--rk-sp-8);
    width: min(26rem, calc(100% - (3 * var(--rk-sp-8)) - var(--rk-control-sm)));
    max-height: 62%;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
    min-width: 0;
    padding: var(--rk-sp-8) var(--rk-sp-10) var(--rk-sp-10);
    background: var(--rk-card);
    color: var(--rk-ink);
    border: var(--rk-border-card) solid var(--rk-line-hard);
    border-left: var(--rk-rail) solid var(--rk-accent);
    box-shadow: var(--rk-shadow-card);
    overflow: hidden;
}

.bmap__pickhead[b-owzk16xoq3] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-8);
    min-width: 0;
}

.bmap__picktitle[b-owzk16xoq3] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-3xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-3xl);
    line-height: var(--rk-lh-tight);
    text-transform: uppercase;
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

/* The card's own status chip - the company's pair, validated, or the token fallback below. */
.bmap__status[b-owzk16xoq3] {
    flex: 0 0 auto;
    padding: var(--rk-sp-2) var(--rk-sp-6);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    line-height: var(--rk-lh-flat);
    background: var(--rk-paper);
    color: var(--rk-ink);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
}

.bmap__x[b-owzk16xoq3] {
    flex: 0 0 auto;
    min-width: var(--rk-control-sm);
    min-height: var(--rk-control-sm);
    border: 0;
    background: none;
    font-size: var(--rk-fs-4xl);
    line-height: var(--rk-lh-flat);
    color: var(--rk-ink-soft);
    cursor: pointer;
}

.bmap__x:hover[b-owzk16xoq3] {
    color: var(--rk-ink);
    background: var(--rk-hover-ghost);
}

.bmap__pickline[b-owzk16xoq3] {
    margin: 0;
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.bmap__pickline--soft[b-owzk16xoq3] {
    font-size: var(--rk-fs-md);
    color: var(--rk-ink-soft);
}

.bmap__pickacts[b-owzk16xoq3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    padding-top: var(--rk-sp-4);
}

/* ── THE LIST UNDER A STACK ───────────────────────────────────────────────────────────────
   208 cards at one tower is a real dev answer, so the list scrolls inside the floating card
   rather than growing it past the map. */

.bmap__list[b-owzk16xoq3] {
    flex: 1 1 auto;
    min-height: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.bmap__row[b-owzk16xoq3] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-8);
    padding-right: var(--rk-sp-6);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.bmap__row--on[b-owzk16xoq3] {
    background: var(--rk-accent-soft);
    box-shadow: inset var(--rk-sp-3) 0 0 var(--rk-accent);
}

.bmap__rowmain[b-owzk16xoq3] {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-2) var(--rk-sp-8);
    min-width: 0;
    min-height: var(--rk-control-sm);
    padding: var(--rk-sp-6) var(--rk-sp-6);
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--rk-ink);
    cursor: pointer;
}

.bmap__rowmain:hover[b-owzk16xoq3] {
    background: var(--rk-hover-ghost);
}

.bmap__rowcode[b-owzk16xoq3] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-semibold);
}

.bmap__rowstatus[b-owzk16xoq3] {
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.bmap__rowwho[b-owzk16xoq3] {
    flex: 1 1 12rem;
    min-width: 0;
    font-size: var(--rk-fs-md);
    color: var(--rk-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bmap__rowlink[b-owzk16xoq3] {
    flex: 0 0 auto;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: var(--rk-fs-md);
    color: var(--rk-accent-ink);
    text-decoration: underline;
    text-underline-offset: var(--rk-sp-2);
    cursor: pointer;
}

.bmap__rowlink:hover[b-owzk16xoq3] {
    color: var(--rk-accent-deep);
}

/* ── THE KEY ──────────────────────────────────────────────────────────────────────────── */

.bmap__key[b-owzk16xoq3] {
    list-style: none;
    margin: 0;
    padding: var(--rk-sp-6) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4) var(--rk-sp-14);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.bmap__keyrow[b-owzk16xoq3] {
    display: inline-flex;
    align-items: center;
    gap: var(--rk-sp-6);
    font-size: var(--rk-fs-md);
    color: var(--rk-ink);
}

.bmap__keyrow--more[b-owzk16xoq3] {
    color: var(--rk-ink-soft);
}

.bmap__keynum[b-owzk16xoq3] {
    font-family: var(--rk-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--rk-ink-soft);
}

.bmap__swatch[b-owzk16xoq3] {
    flex: 0 0 auto;
    display: inline-block;
    width: var(--rk-sp-12);
    height: var(--rk-sp-12);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-circle);
}

/* ── THE "NOT ON THE MAP" LIST ────────────────────────────────────────────────────────── */

.bmap__offlist[b-owzk16xoq3] {
    list-style: none;
    margin: var(--rk-sp-12) 0 0;
    padding: 0;
}

.bmap__offrow[b-owzk16xoq3] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-4) var(--rk-sp-10);
    padding: var(--rk-sp-8) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.bmap__offcode[b-owzk16xoq3] {
    font-family: var(--rk-font-mono);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.bmap__offname[b-owzk16xoq3] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.bmap__offsub[b-owzk16xoq3] {
    flex: 1 1 14rem;
    min-width: 0;
    font-size: var(--rk-fs-md);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.bmap__offacts[b-owzk16xoq3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4) var(--rk-sp-12);
}

/* ── BESIDE THE BOARD, ON A DESKTOP ───────────────────────────────────────────────────────
   The page puts the pane in a column running the board's full height; the pane holds itself in
   view under the app bar and the map takes whatever it has left after the head and the key.

   THE OFFSET IS THE APP BAR. It is sticky at the top of the page and, at this rung, is the brand
   row plus the one-line menu - two control rows and its accent edge (89px measured at 1440) -
   so the pane sticks just below it rather than sliding underneath, where the bar outranks it.
   The height is the viewport less that offset, so the pane never needs a scrollbar of its own.

   ⚠️ The dialog this component renders is a SIBLING of this box, not a child, because a sticky
   box is a stacking context and a dialog inside one painted under the lanes beside it. */

@media (min-width: 1280px) {
    .bmap--beside[b-owzk16xoq3] {
        --bmap-top: calc((var(--rk-control-h) * 2) + var(--rk-btn-edge) + var(--rk-sp-24));
        position: sticky;
        top: var(--bmap-top);
        height: calc(100dvh - var(--bmap-top) - var(--rk-sp-12));
    }

    .bmap--beside .bmap__body[b-owzk16xoq3] {
        flex: 1 1 auto;
        height: auto;
        min-height: 16rem;
    }
}

/* On a phone the floating card may take more of the map - the thumb that opened it is working
   the list, and the x gives the map back. */
@media (max-width: 640px) {
    .bmap__pick[b-owzk16xoq3] {
        max-height: 80%;
    }
}

/* Below the desktop rung there is no "beside" - the pane is full width whatever was chosen, so
   the button that switches between the two would do nothing and is not offered. */
@media (max-width: 1279.98px) {
    .bmap__tools[b-owzk16xoq3]  .bmap__width {
        display: none;
    }
}
/* /Components/Board/BoardNoteDialog.razor.rz.scp.css */
/* ADD A NOTE FROM THE BOARD (lane CA). Tokens only (rk-tokens.css); small text never wears raw --rk-accent. */

.note__list[b-zq3eqhy1sv] {
    margin: 0 0 var(--rk-sp-12);
    padding: 0 0 0 var(--rk-sp-16);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-base);
    color: var(--rk-ink);
}

.note__more[b-zq3eqhy1sv] {
    color: var(--rk-ink-soft);
}

.note__form[b-zq3eqhy1sv] {
    display: grid;
    gap: var(--rk-sp-10);
    margin: 0 0 var(--rk-sp-10);
}

.note__chips[b-zq3eqhy1sv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
}

.note__hint[b-zq3eqhy1sv] {
    max-width: var(--rk-measure);
    margin: 0;
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-accent-ink);
}
/* /Components/Board/DayCheckNotice.razor.rz.scp.css */
/* The day-check alert's list - the unfinished alert's layout; the box's tone is RkNotice's Warn (tokens only). */

.dc__list[b-liqxpu25c3] {
    list-style: none;
    margin: var(--rk-sp-6) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
}

.dc__item[b-liqxpu25c3] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-4) var(--rk-sp-10);
}

.dc__words[b-liqxpu25c3] {
    flex: 1 1 24rem;
    min-width: 0;
}

/* A link that opens the stop in the drawer on this page - a button, worn as the custody alert's link. */
.dc__link[b-liqxpu25c3] {
    white-space: nowrap;
    font: inherit;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.dc__link:focus-visible[b-liqxpu25c3] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-border);
}

/* The dialog's restatement of the alert being cleared. */
.dc__lede[b-liqxpu25c3] {
    margin: 0 0 var(--rk-sp-8);
}
/* /Components/Board/DispatchDrawer.razor.rz.scp.css */
/*
    THE DRILL-IN PANEL.

    A right-hand slide-over rather than a page, because a dispatcher opening a job has not
    left the board - they are checking one thing and going back. Losing the board's scroll
    position to read a gate code is the kind of small tax that makes a screen unpleasant.

    It is NOT RkModal: a modal is centerd and sized for a decision, and this is a reading
    surface that has to be tall. RkModal is still used INSIDE it for the two writes, which is
    exactly what it is for.
*/

.scrim[b-g6yphq18t6] {
    position: fixed;
    inset: 0;
    z-index: var(--rk-z-scrim);
    background: var(--rk-scrim);
}

.drawer[b-g6yphq18t6] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--rk-z-sheet);
    display: flex;
    flex-direction: column;
    width: min(100%, var(--rk-dialog-w));
    background: var(--rk-paper);
    color: var(--rk-ink);
    border-left: var(--rk-border-card) solid var(--rk-line-hard);
    box-shadow: var(--rk-shadow-float);
}

.drawer__head[b-g6yphq18t6] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-12) var(--rk-sp-16);

    /* Permanent dark chrome. NOT ink + white - in the dark theme those resolve to the same
       value and the header would vanish. */
    background: var(--rk-chrome-bg);
    color: var(--rk-chrome-ink);
    border-bottom: var(--rk-btn-edge) solid var(--rk-accent);
}

.drawer__id[b-g6yphq18t6] {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.drawer__code[b-g6yphq18t6] {
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-2xs);
}

.drawer__state[b-g6yphq18t6] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-chrome-mute);
}

.drawer__x[b-g6yphq18t6] {
    margin-left: auto;
    width: var(--rk-control-sm);
    height: var(--rk-control-sm);
    border: var(--rk-border-hair) solid var(--rk-chrome-mute);
    background: transparent;
    color: var(--rk-chrome-ink);
    font-size: var(--rk-fs-lg);
    cursor: pointer;
}

/* THE FULL PAGE - a small chrome button beside the close (2026-10-15). It takes the auto margin, so the close
   sits right beside it. */
.drawer__full[b-g6yphq18t6] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    min-height: var(--rk-control-sm);
    padding: 0 var(--rk-sp-10);
    border: var(--rk-border-hair) solid var(--rk-chrome-mute);
    color: var(--rk-chrome-ink);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.drawer__full:hover[b-g6yphq18t6] {
    border-color: var(--rk-accent);
    color: var(--rk-accent-ink);
}

.drawer__full:focus-visible[b-g6yphq18t6] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.drawer__full + .drawer__x[b-g6yphq18t6] {
    margin-left: 0;
}

.drawer__x:hover[b-g6yphq18t6] {
    border-color: var(--rk-accent);
    color: var(--rk-accent-ink);
}

.drawer__x:focus-visible[b-g6yphq18t6] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.drawer__body[b-g6yphq18t6] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--rk-sp-16);
}

.drawer__lede[b-g6yphq18t6] {
    margin-bottom: var(--rk-sp-14);
}

.drawer__cust[b-g6yphq18t6] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-6xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-4xl);
    line-height: var(--rk-lh-tight);
    text-transform: uppercase;
}

.drawer__site[b-g6yphq18t6] {
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink-soft);
}

.drawer__narr[b-g6yphq18t6] {
    margin: var(--rk-sp-8) 0 0;
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
    max-width: var(--rk-measure);
}

/* THE PROOF LINKS (lane AO) - this job's proof and the customer's whole day. */
.drawer__proof[b-g6yphq18t6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8) var(--rk-sp-16);
    margin: calc(-1 * var(--rk-sp-8)) 0 var(--rk-sp-14);
}

.drawer__plink[b-g6yphq18t6] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-accent-ink);
}

.drawer__acts[b-g6yphq18t6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    margin-bottom: var(--rk-sp-14);
}

/* The handset heartbeat for the focus card (lane BOARDFIX) - a fact, quietly. */
.drawer__phone[b-g6yphq18t6] {
    margin: calc(-1 * var(--rk-sp-8)) 0 var(--rk-sp-12);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.drawer__p[b-g6yphq18t6] {
    margin: 0 0 var(--rk-sp-6);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-snug);
}

.drawer__p--quiet[b-g6yphq18t6] {
    color: var(--rk-steel);
    font-size: var(--rk-fs-sm);
}

.drawer__meta[b-g6yphq18t6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-10);
    margin: 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.drawer__grid[b-g6yphq18t6] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--rk-sp-4) var(--rk-sp-12);
    margin: 0;
    font-size: var(--rk-fs-sm);
}

/* OPEN THE UNIT - the new-window door on an equipment card's header (Kirk 2026-11-11). */
.drawer__unitopen[b-g6yphq18t6] {
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-decoration: none;
    white-space: nowrap;
}

.drawer__grid dt[b-g6yphq18t6] {
    color: var(--rk-steel);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    font-size: var(--rk-fs-2xs);
    align-self: center;
}

.drawer__grid dd[b-g6yphq18t6] {
    margin: 0;
}

/*
    WHOSE CLOCK THESE TIMES ARE ON.

    A converted time that does not name its zone is a different bug wearing a fix: a Houston
    dispatcher reading a Charleston job sees the right numbers and has no way to tell they
    are not Houston's. So the caption is not decoration - it is half the fix.

    Quiet by default, deliberately: steel at the metadata size, the same voice as the dt
    labels underneath it, because on the overwhelming majority of jobs it is confirming
    something unsurprising and must not compete with the times themselves.
*/
.drawer__clock[b-g6yphq18t6] {
    margin: 0 0 var(--rk-sp-6);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-steel);
}

/*
    AND LOUD FOR THE ONE CASE THAT MIGHT BE WRONG.

    The last rung of the ladder is the viewer's own machine, which is reached only when
    neither the visit nor the site nor the zone carried a resolvable id. Those times can be
    out by hours, so this stops being metadata and becomes a warning. --rk-warn-ink on
    --rk-warn-soft is the pair DesignSystemTests gates at 4.5:1 in BOTH themes.
*/
.drawer__clock--guess[b-g6yphq18t6] {
    display: inline-block;
    padding: var(--rk-sp-2) var(--rk-sp-6);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
}

/* THE TIMELINE. One row per recorded fact, which is what the customer is shown and what the
   invoice is built from - so it reads as a list of events, not as a paragraph. */
.drawer__step[b-g6yphq18t6] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-4) 0;
    border-top: var(--rk-border-hair) dashed var(--rk-line);
    font-size: var(--rk-fs-sm);
}

.drawer__stepdot[b-g6yphq18t6] {
    width: var(--rk-sp-8);
    height: var(--rk-sp-8);
    border-radius: var(--rk-radius-circle);
    background: var(--rk-steel);
}

.drawer__stepwhen[b-g6yphq18t6] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-steel);
}

.drawer__stepwhat[b-g6yphq18t6] {
    font-weight: var(--rk-fw-semibold);
}

.drawer__stepwho[b-g6yphq18t6] {
    color: var(--rk-ink-soft);
}

.drawer__stepnote[b-g6yphq18t6] {
    flex-basis: 100%;
    color: var(--rk-steel);
    font-style: italic;
}

/* The two pick lists inside the transfer and status sheets. */
.pick[b-g6yphq18t6] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    margin: var(--rk-sp-12) 0;
    max-height: var(--rk-lane-h);
    overflow-y: auto;
}

.pick__opt[b-g6yphq18t6] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-8);
    width: 100%;
    min-height: var(--rk-control-md);
    padding: var(--rk-sp-6) var(--rk-sp-10);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    background: var(--rk-card);
    color: var(--rk-ink);
    text-align: left;
    cursor: pointer;
}

.pick__opt:hover[b-g6yphq18t6] {
    background: var(--rk-hover-ghost);
}

.pick__opt:focus-visible[b-g6yphq18t6] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

/*
    The universal "on" language - ink ground, paper text. It is the one saturated pair that
    survives the theme flip, because both halves flip together.

    ⚠️ :hover IS LISTED TOO, AND IT IS NOT BELT AND BRACES. `.pick__opt:hover` is a class plus
    a pseudo-class and therefore OUTRANKS `.pick__opt--on`, so the row the user just clicked
    keeps the hover tint under the cursor while taking the inverted INK - measured at
    rgb(20,25,29) text on rgba(233,228,216,0.04) in the dark theme, which is dark-on-dark and
    unreadable. The selected row is the one row that must never be hard to read.
*/
.pick__opt--on[b-g6yphq18t6],
.pick__opt--on:hover[b-g6yphq18t6] {
    background: var(--rk-ink);
    color: var(--rk-paper);
    border-color: var(--rk-ink);
}

.pick__name[b-g6yphq18t6] {
    font-weight: var(--rk-fw-semibold);
    font-size: var(--rk-fs-lg);
}

.pick__kind[b-g6yphq18t6] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    opacity: 0.75;
}

.pick__where[b-g6yphq18t6] {
    margin-left: auto;
    font-size: var(--rk-fs-2xs);
    opacity: 0.75;
}

.pick__swatch[b-g6yphq18t6] {
    width: var(--rk-sp-12);
    height: var(--rk-sp-12);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-xs);
    flex: 0 0 auto;
}

@media (max-width: 639px) {
    .drawer[b-g6yphq18t6] {
        width: 100%;
    }
}
/* /Components/Board/JobLegs.razor.rz.scp.css */
/* A job's legs. Layout only - every value is a token from rk-tokens.css. */

.legs[b-3757peufvn] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
}

.legs__row[b-3757peufvn] {
    display: grid;
    grid-template-columns: minmax(64px, auto) 1fr auto;
    grid-template-areas:
        "kind where when"
        "kind who state";
    column-gap: var(--rk-sp-8);
    row-gap: var(--rk-sp-1);
    align-items: baseline;
    padding-block: var(--rk-sp-4);
    border-bottom: 1px solid var(--rk-line);
}

.legs__row--done[b-3757peufvn] {
    opacity: 0.65;
}

.legs__kind[b-3757peufvn] {
    grid-area: kind;
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-bold);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink);
}

.legs__kind--drop[b-3757peufvn] {
    color: var(--rk-accent-ink);
}

.legs__where[b-3757peufvn] {
    grid-area: where;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.legs__site[b-3757peufvn] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.legs__addr[b-3757peufvn],
.legs__who[b-3757peufvn],
.legs__state[b-3757peufvn] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.legs__when[b-3757peufvn] {
    grid-area: when;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
    text-align: end;
}

.legs__who[b-3757peufvn] {
    grid-area: who;
}

.legs__state[b-3757peufvn] {
    grid-area: state;
    text-align: end;
}

.legs__rule[b-3757peufvn] {
    margin: var(--rk-sp-8) 0 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}
/* /Components/Board/MoveStopDialog.razor.rz.scp.css */
/* MOVE TO A DAY AND A TIME (lane CA) - the dialog. Tokens only (rk-tokens.css); small text never wears raw --rk-accent. */

.move__lede[b-o841pda8ev] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.move__list[b-o841pda8ev] {
    margin: 0 0 var(--rk-sp-12);
    padding: 0 0 0 var(--rk-sp-16);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-base);
    color: var(--rk-ink);
}

.move__now[b-o841pda8ev] {
    display: block;
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.move__more[b-o841pda8ev] {
    color: var(--rk-ink-soft);
}

.move__form[b-o841pda8ev] {
    display: grid;
    gap: var(--rk-sp-10);
    margin: 0 0 var(--rk-sp-10);
}

/* Day and time side by side, and stacked at phone width - the grid wraps by itself. */
.move__row[b-o841pda8ev] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--rk-btn-min) * 1.5), 1fr));
    gap: var(--rk-sp-10);
}

.move__route[b-o841pda8ev] {
    max-width: var(--rk-measure);
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

/* What happens - said before the press, not after it. */
.move__note[b-o841pda8ev] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-accent-ink);
}

/* A card a refused move already moved (lane CAF) - it is not moved a second time. */
.move__done[b-o841pda8ev] {
    margin-left: var(--rk-sp-4);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ok-ink);
}
/* /Components/Board/StopChecklists.razor.rz.scp.css */
/* EVERY CHECKLIST ON THIS STOP (lane BOARDFIX). Tokens only (rk-tokens.css); small text never wears raw --rk-accent. */

.runs[b-071tzh4v6r] {
    display: grid;
    gap: var(--rk-sp-8);
    margin: 0 0 var(--rk-sp-12);
}

.runs__head[b-071tzh4v6r] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.runs__row[b-071tzh4v6r] {
    display: grid;
    gap: var(--rk-sp-4);
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-inline-start: var(--rk-rail) solid var(--rk-line-hard);
    background: var(--rk-card);
}

.runs__row--void[b-071tzh4v6r] {
    background: var(--rk-paper);
    color: var(--rk-ink-soft);
}

.runs__top[b-071tzh4v6r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-5);
}

.runs__name[b-071tzh4v6r] {
    font-weight: var(--rk-fw-semibold);
    font-size: var(--rk-fs-sm);
}

.runs__meta[b-071tzh4v6r] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-3) var(--rk-sp-8);
    margin: 0;
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.runs__flag[b-071tzh4v6r] {
    margin: 0;
    padding: var(--rk-sp-3) var(--rk-sp-8);
    border-inline-start: var(--rk-rail) solid var(--rk-warn);
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-sentence);
}

.runs__void[b-071tzh4v6r] {
    margin: 0;
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-sentence);
    color: var(--rk-ink-soft);
}

.runs__acts[b-071tzh4v6r] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-5);
}

.runs__lede[b-071tzh4v6r] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}
/* /Components/Board/StopFixDialog.razor.rz.scp.css */
/* THE STOP CORRECTIONS (lane BOARDFIX). Tokens only (rk-tokens.css); small text never wears raw --rk-accent. */

.fix__lede[b-b27tg6hbwq] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-6);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.fix__clock[b-b27tg6hbwq] {
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.fix__grid[b-b27tg6hbwq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--rk-sp-10);
    margin: 0 0 var(--rk-sp-10);
}

.fix__hint[b-b27tg6hbwq] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.fix__pick[b-b27tg6hbwq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-5);
    margin: 0 0 var(--rk-sp-10);
}

.fix__opt[b-b27tg6hbwq] {
    min-height: var(--rk-tap);
    padding: var(--rk-sp-4) var(--rk-sp-10);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-card);
    color: var(--rk-ink);
    font: inherit;
    font-size: var(--rk-fs-sm);
    cursor: pointer;
}

.fix__opt--on[b-b27tg6hbwq] {
    border-color: var(--rk-accent);
    background: var(--rk-accent-soft);
    color: var(--rk-accent-ink);
}
/* /Components/Board/UndoArrivalDialog.razor.rz.scp.css */
/* UNDO A MIS-TAPPED ARRIVAL (lane UA). Tokens only (rk-tokens.css); small text never wears raw --rk-accent. */

.undo__lede[b-zpvmqhfe03] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-12);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.undo__form[b-zpvmqhfe03] {
    display: grid;
    gap: var(--rk-sp-10);
    margin: 0 0 var(--rk-sp-10);
}

.undo__hint[b-zpvmqhfe03] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* The checklist that keeps the arrival, and the way past it (lane BOARDFIX). */
.undo__block[b-zpvmqhfe03] {
    display: grid;
    gap: var(--rk-sp-8);
    margin: var(--rk-sp-10) 0 0;
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border-inline-start: var(--rk-rail) solid var(--rk-warn);
    background: var(--rk-warn-soft);
}
/* /Components/Board/UnfinishedChecklistNotice.razor.rz.scp.css */
/* The unfinished-checklist alert's list - the custody alert's layout; the box's tone is RkNotice's Warn (tokens only). */

.uc__list[b-ysl4wxruh2] {
    list-style: none;
    margin: var(--rk-sp-6) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
}

.uc__item[b-ysl4wxruh2] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-4) var(--rk-sp-10);
}

.uc__words[b-ysl4wxruh2] {
    flex: 1 1 24rem;
    min-width: 0;
}

/* A link that opens the stop in the drawer on this page - a button, worn as the custody alert's link. */
.uc__link[b-ysl4wxruh2] {
    white-space: nowrap;
    font: inherit;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.uc__link:focus-visible[b-ysl4wxruh2] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-border);
}
/* /Components/Captures/SiteCaptureStrip.razor.rz.scp.css */
/* The site's work photos - a lead line, the cap line and the withdrawn line. Tokens only,
   the same voice as JobCaptureStrip's. */

.scs__lead[b-s3lr04r1hl] {
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

/* What the cap left out, and where the rest lives - a strip that silently stops reads as
   "that is all there was". */
.scs__more[b-s3lr04r1hl] {
    margin: var(--rk-sp-10) 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

/* Pictures withdrawn in the field - left out of the strip and said to be (2026-10-28). */
.scs__withdrawn[b-s3lr04r1hl] {
    margin: var(--rk-sp-10) 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
    max-width: var(--rk-measure);
}
/* /Components/Contacts/ContactEditor.razor.rz.scp.css */
/* ---------------------------------------------------------------------------------------
   ONE CONTACT, CHANGED. Three sections - who, how to reach them, and the grave remove - in a
   Wide modal on a desk and a full sheet on a phone. Tokens only.
   --------------------------------------------------------------------------------------- */

.part + .part[b-gbnz1yxnvk] {
    margin-top: var(--rk-sp-20);
    padding-top: var(--rk-sp-14);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.part__head[b-gbnz1yxnvk] {
    margin: 0 0 var(--rk-sp-8);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.form[b-gbnz1yxnvk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
}

@media (min-width: 640px) {
    .form[b-gbnz1yxnvk] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form[b-gbnz1yxnvk]  .form--span {
    grid-column: 1 / -1;
}

.checks[b-gbnz1yxnvk] {
    display: grid;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-8);
}

/* The customer-message ticks, set apart from the consent above them by a small heading. */
.checks__head[b-gbnz1yxnvk] {
    margin: var(--rk-sp-6) 0 0;
    padding-top: var(--rk-sp-8);
    border-top: var(--rk-border-hair) solid var(--rk-line);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.part__go[b-gbnz1yxnvk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8) var(--rk-sp-12);
    margin-top: var(--rk-sp-12);
}

.none[b-gbnz1yxnvk] {
    margin: 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

/* ---- the channels ------------------------------------------------------------------------ */

.ways[b-gbnz1yxnvk] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.way[b-gbnz1yxnvk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-12);
    padding: var(--rk-sp-8) 0;
    min-height: var(--rk-tap);
}

.way + .way[b-gbnz1yxnvk] {
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.way--editing[b-gbnz1yxnvk] {
    display: block;
    padding: var(--rk-sp-12) var(--rk-sp-12) var(--rk-sp-14);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-accent);
    background: var(--rk-card);
}

.way__what[b-gbnz1yxnvk] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-2) var(--rk-sp-8);
    flex: 1 1 14rem;
    min-width: 0;
}

.way__kind[b-gbnz1yxnvk] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.way__value[b-gbnz1yxnvk] {
    font-size: var(--rk-fs-sm);
    overflow-wrap: anywhere;
}

.way__label[b-gbnz1yxnvk] {
    font-size: var(--rk-fs-xs);
    font-style: italic;
    color: var(--rk-ink-soft);
}

.way--gone .way__value[b-gbnz1yxnvk] {
    color: var(--rk-ink-soft);
    text-decoration: line-through;
}

.way__marks[b-gbnz1yxnvk] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
}

.way__acts[b-gbnz1yxnvk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-8);
    margin-left: auto;
}

.way__confirm[b-gbnz1yxnvk] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-danger-ink);
}

/* ---- removing them ----------------------------------------------------------------------- */

.grave[b-gbnz1yxnvk] {
    margin-top: var(--rk-sp-20);
    padding-top: var(--rk-sp-14);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.grave__word[b-gbnz1yxnvk] {
    margin: 0 0 var(--rk-sp-8);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}
/* /Components/Contacts/OwnerContacts.razor.rz.scp.css */
/* ---------------------------------------------------------------------------------------
   THE PEOPLE ON A RECORD. Tokens only (rk-tokens.css) - no raw colour, size or radius.
   One markup for desktop and phone: every row is a wrapping flex line, so on a phone the
   name, its stamps and its Change button stack instead of running off to the right.
   --------------------------------------------------------------------------------------- */

.group[b-qu2lncwjom] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-4) var(--rk-sp-10);
    margin: var(--rk-sp-16) 0 var(--rk-sp-4);
    padding-bottom: var(--rk-sp-4);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.group:first-child[b-qu2lncwjom] {
    margin-top: 0;
}

.group__word[b-qu2lncwjom] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.group__kind[b-qu2lncwjom] {
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.who[b-qu2lncwjom] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.who__row[b-qu2lncwjom] {
    padding: var(--rk-sp-10) 0;
}

.who__row + .who__row[b-qu2lncwjom] {
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.who__row--gone .who__name[b-qu2lncwjom],
.who__row--gone .way__value[b-qu2lncwjom] {
    color: var(--rk-ink-soft);
}

.who__head[b-qu2lncwjom] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-12);
}

.who__id[b-qu2lncwjom] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 14rem;
}

.who__name[b-qu2lncwjom] {
    font-weight: var(--rk-fw-semibold);
    overflow-wrap: anywhere;
}

.who__title[b-qu2lncwjom] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.who__marks[b-qu2lncwjom] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
}

.who__acts[b-qu2lncwjom] {
    margin-left: auto;
}

.who__none[b-qu2lncwjom] {
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

/* ---- the channels under a person -------------------------------------------------------- */

.ways[b-qu2lncwjom] {
    list-style: none;
    margin: var(--rk-sp-6) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4) var(--rk-sp-20);
}

.way[b-qu2lncwjom] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-2) var(--rk-sp-8);
    min-width: 0;
}

.way__kind[b-qu2lncwjom] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.way__value[b-qu2lncwjom] {
    font-size: var(--rk-fs-sm);
    overflow-wrap: anywhere;
}

.way__label[b-qu2lncwjom] {
    font-size: var(--rk-fs-xs);
    font-style: italic;
    color: var(--rk-ink-soft);
}

.way--gone .way__value[b-qu2lncwjom] {
    text-decoration: line-through;
}

/* ---- adding somebody --------------------------------------------------------------------- */

.start[b-qu2lncwjom] {
    margin-top: var(--rk-sp-12);
}

.add[b-qu2lncwjom] {
    margin-top: var(--rk-sp-16);
    padding: var(--rk-sp-12) var(--rk-sp-16) var(--rk-sp-16);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-accent);
    background: var(--rk-card);
}

.add__head[b-qu2lncwjom] {
    margin: 0 0 var(--rk-sp-8);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.typed[b-qu2lncwjom] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .typed[b-qu2lncwjom] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.add__checks[b-qu2lncwjom] {
    display: grid;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-8);
}

.add__go[b-qu2lncwjom] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8) var(--rk-sp-12);
    margin-top: var(--rk-sp-12);
}

/* A wrapper this component owns - a rule aimed at RkSentenceGo's own root would not reach it. */
.add__commit[b-qu2lncwjom] {
    flex: 1 1 16rem;
    min-width: 0;
}

/* ---- the typed role, inside the role sheet ------------------------------------------------ */

.escape[b-qu2lncwjom] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8);
}

.escape__box[b-qu2lncwjom] {
    flex: 1 1 14rem;
    min-width: 0;
}
/* /Components/Custody/CustodyAlertNotice.razor.rz.scp.css */
/* The custody alert's list - layout only; the box's tone is RkNotice's Warn (tokens, never a raw colour). */

.ca__list[b-qbvwj4pc6r] {
    list-style: none;
    margin: var(--rk-sp-6) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
}

.ca__item[b-qbvwj4pc6r] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-4) var(--rk-sp-10);
}

.ca__words[b-qbvwj4pc6r] {
    flex: 1 1 24rem;
    min-width: 0;
}

.ca__link[b-qbvwj4pc6r] {
    white-space: nowrap;
    font-weight: 600;
}
/* /Components/Dashboard/MorningBlock.razor.rz.scp.css */
/*
    ONE LANDING-PAGE BLOCK - layout only.

    Tokens only: no raw colour, size, radius or shadow. The card, its cut corner, its shadow
    and its status rail come from RkCard; each line's frame, hover, focus ring and mono
    numeral column come from RkRow. What is left here is a list that has to stop looking like
    a list, and two paragraphs.

    THE INVISIBLE-TEXT TRAP CANNOT ARISE HERE and it is written down so the next edit does not
    introduce it: never pair background:var(--rk-ink) with color:var(--rk-white). Both resolve
    to #e9e4d8 in the dark theme - 1:1 contrast - and it shipped that way once. Permanent dark
    chrome uses --rk-chrome-bg / --rk-chrome-ink, which do not flip. Nothing below sets a
    background at all.

    ⚠️ NO ::deep, AND NONE IS NEEDED. Every selector lands on an element written in
    MorningBlock.razor - the ul, the li and the two paragraphs all sit inside RkCard's
    ChildContent, which is THIS component's markup and therefore carries THIS component's
    scope attribute. The RkRow inside each li is a different component and owns its own.
*/

/*
    WHAT WAS COUNTED. Capped at the reading measure rather than the card width, so a wide
    monitor does not render a 140-character line nobody can track back to the left edge.
*/
.lead[b-z9il9kbsnu] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-12);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/*
    THE EMPTY AND FAILED SENTENCE. Same measure, no bullet, no icon - a quiet morning should
    read as a quiet morning and not as an error state with the colour taken out.
*/
.quiet[b-z9il9kbsnu] {
    max-width: var(--rk-measure);
    margin: 0;
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/*
    THE LINES. A <ul> because it IS a list and a screen reader should say how many - "list, 4
    items" is the single most useful thing announced on this page - but stripped of every
    visual list affordance, because each row already carries its own frame and chevron from
    RkRow and a bullet beside it reads as debris.

    ⚠️ list-style:none REMOVES THE LIST SEMANTIC IN SAFARI/VoiceOver unless the list carries an
    explicit role. That is what role="list" in the markup is for - it looks redundant and it
    is not.
*/
.lines[b-z9il9kbsnu] {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
    RkRow is a <button>, and a button is inline-block by default, so without this each row
    shrinks to its text and the chevrons stagger down the right-hand side instead of lining
    up. The li is the block; the row fills it.
*/
.lines > li[b-z9il9kbsnu] {
    display: block;
    margin: 0;
}

/*
    THE PERFORATION, RE-DRAWN HERE - AND THIS IS NOT A REINVENTED CONTROL.

    RkRow draws its own tear line with `.rk-row + .rk-row`, which needs the rows to be
    ADJACENT SIBLINGS. Wrapping each one in an <li> - which the list semantic requires - puts
    an element between them, so that selector silently stops matching and the rows run
    together with nothing between them. Nothing errors; the list just looks wrong.

    So the same rule is restated one level up, on the same token and the same dashed style, to
    get the kit's own appearance back. It is a selector shim rather than a second look.

    ⚠️ AND IT IS DRAWN ON THE <li>, NOT ON THE BUTTON INSIDE IT. Scoped CSS rewrites the LAST
    element in a selector to carry this component's [b-hash], and the button is RkRow's
    markup carrying RkRow's hash - so `li + li > button` compiles to a selector that can
    never match anything, with no warning from anywhere. The li is ours; the button is not.
*/
.lines > li + li[b-z9il9kbsnu] {
    border-top: var(--rk-border) dashed var(--rk-line);
}
/* /Components/Equipment/InstallUnitSentence.razor.rz.scp.css */
/*
    THE INSTALL-A-UNIT MADLIB.

    Tokens only - no raw colour, size, radius or shadow. lift-06 §8 found zero raw hex colours
    in the source app's madlib CSS and every one of its variables has a name-for-name twin in
    rk-tokens.css, so there is nothing here that needs inventing.

    ⚠️ NO PAIRING OF background: var(--rk-ink) WITH color: var(--rk-white) - the dark theme
    resolves both to the same paper colour and the text vanishes. Nothing here sets a
    background at all; the note is kept so the next edit does not introduce one.

    ::deep is not used and is not needed: every class below lands on an element this component
    owns. A Class passed to a kit control would land on THAT component's scoped element and a
    bare rule here would match nothing.
*/

.make[b-62tduyxcr3] {
    margin-bottom: var(--rk-sp-20);
}

/*
    THE SITE, SET IN THE SENTENCE AS A FACT RATHER THAN A BLANK.

    It deliberately does NOT look like an RkBlank: a blank is a button that opens a sheet, and
    something that looks tappable and is not is worse than plain text. It is the only emphasis
    in the paragraph, so it reads as the one thing already decided - which is exactly what it
    is, because the person is standing on that site's page.
*/
.make__site[b-62tduyxcr3] {
    font-weight: var(--rk-fw-semibold);
    white-space: nowrap;
}

/*
    THE TYPED HALF. One column on a phone, two where there is room, three on a wide monitor -
    eleven short nameplate fields down a single column on a 1600px screen is a scroll for no
    reason, and across four columns on a laptop is a form nobody can follow. Same grid and the
    same breakpoints as the sites page's create card, because they are the same thing at the
    same moment.
*/
.typed[b-62tduyxcr3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .typed[b-62tduyxcr3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .typed[b-62tduyxcr3] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* /Components/Equipment/SiteEquipment.razor.rz.scp.css */
/*
    THE EQUIPMENT TAB OF THE SITE center.

    Tokens only - no raw colour, size, radius or shadow. Nothing on this tab comes out of a
    customer's database carrying its own colour, so unlike the board there is not even an
    inline style exception.

    ⚠️ NO PAIRING OF background: var(--rk-ink) WITH color: var(--rk-white). The dark theme
    resolves both to the same paper colour and the text disappears at a 1:1 contrast ratio -
    it shipped invisible once. There is no permanent dark chrome on this tab at all, so the
    question does not arise; it is written down so the next edit does not reintroduce it.

    Nothing here styles a kit control. The row cells below live in THIS component's markup -
    RkTable's own stylesheet says so: "the <td>s come from the caller's row template and
    therefore carry the PAGE's scope attribute" - so they need no ::deep and a ::deep here
    would be reaching into a component that owns none of them.
*/

/* ---------------------------------------------------------------------------------------
   THE BAR ABOVE THE LIST - the lenses on the left, the two actions on the right. Same shape
   and the same tokens as the site center's payer bar, because a person moving between two
   tabs on one page should not have to relearn where the button is.
   --------------------------------------------------------------------------------------- */
.rowbar[b-pg8szw0bjq] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-12) 0;
}

.rowbar__acts[b-pg8szw0bjq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
}

/* ---------------------------------------------------------------------------------------
   THE CELLS.

   Two lines per cell - a title and a quiet tag under it - is the list idiom the equipment
   and site lists already use, and it is what lets seven columns say fourteen things without
   a fourteen-column table nobody can read on a phone.
   --------------------------------------------------------------------------------------- */
.cell--code[b-pg8szw0bjq] {
    white-space: nowrap;
}

.cell__title[b-pg8szw0bjq] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell__tag[b-pg8szw0bjq] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
    THE DUE CELL WRAPS. It is the one cell on the row whose tail is the important part - "12
    Mar 2026 - 4 days overdue" ellipsised at the column edge reads as an ordinary future date.
    Everything else on the row is an identifier, where the head is what matters and a "…" is
    honest.
*/
.due[b-pg8szw0bjq] {
    display: block;
    overflow-wrap: anywhere;
}

/* The action cell must not stretch or wrap - it is one small button and nothing else. */
.cell--act[b-pg8szw0bjq] {
    white-space: nowrap;
    text-align: right;
}

/* ---------------------------------------------------------------------------------------
   THE INDENT - containment drawn rather than named.

   See the Nodes property for why indentation beat a parent column and beat grouping. The
   drawn depth stops at three: the class is chosen in C# with the cap already applied, so a
   ten-deep chain keeps the level-three indent instead of pushing its own name off a 375px
   screen. The corner glyph is decorative and is hidden from assistive technology, which gets
   the sentence in .sr instead.
   --------------------------------------------------------------------------------------- */
.what[b-pg8szw0bjq] {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-5);
    min-width: 0;
}

.what__body[b-pg8szw0bjq] {
    min-width: 0;
    flex: 1 1 auto;
}

.what__in[b-pg8szw0bjq] {
    flex: 0 0 auto;
    color: var(--rk-line-hard);
    font-family: var(--rk-font-mono);
    line-height: var(--rk-lh-flat);
}

.what--0[b-pg8szw0bjq] {
    padding-left: 0;
}

.what--1[b-pg8szw0bjq] {
    padding-left: var(--rk-sp-12);
}

.what--2[b-pg8szw0bjq] {
    padding-left: var(--rk-sp-24);
}

.what--3[b-pg8szw0bjq] {
    padding-left: var(--rk-sp-40);
}

/*
    A phone is already scrolling this table sideways, so the indent is halved rather than
    dropped: the shape still reads and the name keeps its room.
*/
@media (max-width: 719px) {
    .what--1[b-pg8szw0bjq] {
        padding-left: var(--rk-sp-6);
    }

    .what--2[b-pg8szw0bjq] {
        padding-left: var(--rk-sp-12);
    }

    .what--3[b-pg8szw0bjq] {
        padding-left: var(--rk-sp-18);
    }
}

/* ---------------------------------------------------------------------------------------
   THE FOOTNOTE - a rule explained, never an action.
   --------------------------------------------------------------------------------------- */
.note[b-pg8szw0bjq] {
    margin: var(--rk-sp-12) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   SCREEN-READER TEXT. The kit has no utility class for this and one rule is cheaper than a
   token; the same clip-path shape RkTable uses for its own caption.
   --------------------------------------------------------------------------------------- */
.sr[b-pg8szw0bjq] {
    position: absolute;
    width: var(--rk-sp-1);
    height: var(--rk-sp-1);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* /Components/Equipment/UnitChangeDialog.razor.rz.scp.css */
/*
    CHANGE ONE UNIT - the dialog body.

    Tokens only - no raw colour, size, radius or shadow.

    ⚠️ NO PAIRING OF background: var(--rk-ink) WITH color: var(--rk-white). The dark theme
    resolves both to #e9e4d8, which is a 1:1 contrast ratio and invisible text; it shipped
    that way once. The destructive block below is the obvious place somebody would reach for
    a dark or a red slab, and it deliberately does not - it is separated by a RULE and a
    sentence, not by a colour, because a red panel is a thing people learn to scroll past.
*/

/* The unit named, once, at the top - so the person can see they opened the right one. */
.who[b-6mxmwolzpu] {
    margin: 0 0 var(--rk-sp-14);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/*
    One column on a phone and two where there is room. Not three: this dialog is capped at
    --rk-dialog-w rather than being page-width, so a third column would be three cramped
    columns rather than three comfortable ones.
*/
.typed[b-6mxmwolzpu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
}

@media (min-width: 720px) {
    .typed[b-6mxmwolzpu] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------------------
   THE DESTRUCTIVE BLOCK.

   Separated from the save actions by a rule and by the whole height of the notices above
   it, and it is a LINK rather than a filled danger button: it does not destroy anything, it
   opens a confirm that names the unit. A filled red button here would compete with Save for
   the eye on a phone, where the two would sit within a thumb's width of each other.
   --------------------------------------------------------------------------------------- */
.grave[b-6mxmwolzpu] {
    margin-top: var(--rk-sp-20);
    padding-top: var(--rk-sp-14);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.grave__word[b-6mxmwolzpu] {
    margin: 0 0 var(--rk-sp-8);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}
/* /Components/Files/JobEquipmentPhotos.razor.rz.scp.css */
/*
    THE UNITS ON A JOB - A HEADING, THEN ONE IDENTIFIED BLOCK PER UNIT.

    🛑 THERE IS DELIBERATELY NO TILE, STRIP OR GRID STYLING IN THIS FILE. The tiles belong to
    RkFileShot and the strip around them belongs to PhotoStrip, each with its own scope
    attribute - so a rule written here could not reach either without ::deep, and reaching in
    would be styling components that own none of these elements. When a tile looks wrong,
    RkFileShot.razor.css is the file; when the strip's heading looks wrong, it is
    PhotoStrip.razor.css. This file owns exactly the chrome between them: the section heading
    and each unit's identity line.

    ⚠️ THE UNIT HEADING DELIBERATELY MATCHES .strip__title. A reader running down this panel
    sees the unit's identity and then the strip's own heading immediately beneath it, and two
    headings in two different type treatments would read as two unrelated sections rather than
    as one unit. The duplication of the declarations is the price of scoped CSS and is cheaper
    than a shared class nothing enforces.

    Tokens only - no raw colour, size, radius or shadow. Every --rk-* read here is declared in
    rk-tokens.css; the parity test fails the build otherwise. No pairing of
    background: var(--rk-ink) with color: var(--rk-white): both resolve to the same paper
    colour in dark and the text disappears at 1:1. Nothing here paints a ground at all, so the
    question does not arise; it is written down so the next edit does not introduce it.
*/

.jeq[b-u7rxwlzhnp] {
    display: block;
    padding: var(--rk-sp-12) 0 var(--rk-sp-4);
}

/* -------------------------------------------------------------------------------------
   THE SECTION HEADING. The same shape PhotoStrip's uses, on the same baseline, because
   this panel sits directly among strips and must not announce itself differently.
   ------------------------------------------------------------------------------------- */
.jeq__head[b-u7rxwlzhnp] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
    padding-bottom: var(--rk-sp-4);
}

.jeq__title[b-u7rxwlzhnp] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.jeq__count[b-u7rxwlzhnp] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.jeq__quiet[b-u7rxwlzhnp] {
    margin: var(--rk-sp-6) 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
    max-width: var(--rk-measure);
}

/* -------------------------------------------------------------------------------------
   ONE UNIT. A hairline above each block after the first, so several units read as
   several machines rather than as one long scroll of pictures - which is precisely the
   mistake that makes somebody attribute the wrong dataplate to the wrong unit.
   ------------------------------------------------------------------------------------- */
.jeq__unit[b-u7rxwlzhnp] {
    display: block;
    padding-top: var(--rk-sp-8);
}

.jeq__unit + .jeq__unit[b-u7rxwlzhnp] {
    margin-top: var(--rk-sp-10);
    border-top: 1px solid var(--rk-line);
}

.jeq__id[b-u7rxwlzhnp] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-6);
}

.jeq__name[b-u7rxwlzhnp] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/*
    THE MARKING FOR A UNIT REGISTERED AT ANOTHER SITE. A stamp rather than a sentence,
    because it qualifies the name beside it and a full line would read as a warning about
    the whole panel.

    ⚠️ --rk-accent-ink AND NEVER --rk-accent. Small text on the accent itself does not carry
    its contrast; the ink token is the one that does, and this is the house rule rather than
    a preference on this component.
*/
.jeq__mark[b-u7rxwlzhnp] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
    border: 1px solid var(--rk-line);
    border-radius: var(--rk-radius-xs);
    padding: 0 var(--rk-sp-4);
}

/*
    WHAT IT IS AND WHERE IT STANDS. The serial is here rather than only inside the dataplate
    photograph, because a dispatcher on a phone call needs to read it out loud and should not
    have to open a picture to do it.
*/
.jeq__detail[b-u7rxwlzhnp] {
    margin: var(--rk-sp-2) 0 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
    max-width: var(--rk-measure);
}
/* /Components/Files/KeyPhotos.razor.rz.scp.css */
/*
    THE NAMED PHOTOGRAPHS - the dataplate and the shots of the machine.

    Tokens only. No raw colour, size, radius or shadow, and no ::deep: RkFileDrop, RkTextInput
    and RkButton each carry their own scope attribute and own their own spacing, so this file
    owns the grid, the frames and the words around them and nothing else.

    ⚠️ NO PAIRING OF background: var(--rk-ink) WITH color: var(--rk-white). Both resolve to the
    same paper colour in the dark theme and the text vanishes at a 1:1 ratio - it shipped
    invisible once. The photograph frames use --rk-chrome-bg / --rk-chrome-ink, which do not
    flip, for the reason the strip's stylesheet gives: a job photograph is usually a dim roof
    or a grey panel, and a neutral dark ground is what makes one legible.
*/

.keyph[b-4acetrhx0w] {
    display: block;
    padding: var(--rk-sp-12) 0 var(--rk-sp-8);
}

.keyph__head[b-4acetrhx0w] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
    padding-bottom: var(--rk-sp-6);
}

.keyph__title[b-4acetrhx0w] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.keyph__spacer[b-4acetrhx0w] {
    flex: 1 1 auto;
}

.keyph__hint[b-4acetrhx0w] {
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
    max-width: var(--rk-measure);
}

/* -------------------------------------------------------------------------------------
   THREE SLOTS ACROSS, AND THEY WRAP RATHER THAN SQUASH. A dataplate drawn at 90px is a
   photograph of a label nobody can read, which defeats the whole reason these are slots -
   so the minimum is generous and a narrow screen stacks them instead.
   ------------------------------------------------------------------------------------- */
.keyph__grid[b-4acetrhx0w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--rk-sp-12);
}

.slot[b-4acetrhx0w] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    min-width: 0;
    padding: var(--rk-sp-10);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    background: var(--rk-card);
}

.slot__name[b-4acetrhx0w] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

/* -------------------------------------------------------------------------------------
   THE PHOTOGRAPH. A real <button>: keyboard-reachable, announced as something that does a
   thing. A picture only a mouse can open is a picture a screen reader user cannot see.

   4:3, contained rather than covered - a dataplate is a WIDE label and cropping it to fill
   a square is how the serial ends up off the edge of the tile. Contain shows the whole
   label on the dark ground, which is exactly what this slot exists for.
   ------------------------------------------------------------------------------------- */
.slot__shot[b-4acetrhx0w] {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-0);
    background: var(--rk-chrome-bg);
    /*
        SQUARE, to match RkFileShot - Kirk, 2026-09-21: "Should be square thumbnails."
        The picture inside still CONTAINS rather than covers (see .slot__img): a slot is
        usually the data plate, and the serial lives near an edge.
    */
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--rk-dur-ui) var(--rk-ease);
}

.slot__shot:hover[b-4acetrhx0w] {
    border-color: var(--rk-accent);
}

.slot__shot:focus-visible[b-4acetrhx0w] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.slot__img[b-4acetrhx0w] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.slot__wait[b-4acetrhx0w] {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--rk-skeleton);
    animation: slot-wait-b-4acetrhx0w var(--rk-dur-shimmer) ease-in-out infinite;
}

@keyframes slot-wait-b-4acetrhx0w {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/*
    🛑 A LINK THAT DID NOT DRAW IS NOT A PHOTOGRAPH THAT IS GONE, and the words have to say so.
    The browser's own broken-image mark reads as "the evidence is lost" and somebody climbs a
    ladder again on the strength of it.
*/
.slot__fail[b-4acetrhx0w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--rk-sp-6);
    width: 100%;
    height: 100%;
    color: var(--rk-chrome-mute);
}

.slot__failglyph[b-4acetrhx0w] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-7xl);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-flat);
    color: var(--rk-chrome-ink);
}

.slot__failword[b-4acetrhx0w] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
}

/* The hover affordance. Hidden until the pointer is over the frame, because a permanent
   caption band across the bottom of a dataplate covers the part people zoom into. */
.slot__open[b-4acetrhx0w] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--rk-sp-4) var(--rk-sp-6);
    background: var(--rk-chrome-bg);
    color: var(--rk-chrome-ink);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    opacity: 0;
    transition: opacity var(--rk-dur-ui) var(--rk-ease);
}

.slot__shot:hover .slot__open[b-4acetrhx0w],
.slot__shot:focus-visible .slot__open[b-4acetrhx0w] {
    opacity: 1;
}

/* -------------------------------------------------------------------------------------
   THE EMPTY FRAME. Dashed rather than solid, the same SQUARE box as a filled one, so a
   half-done panel keeps its shape and the eye reads "three things, one missing" instead of
   "two things and some buttons".
   ------------------------------------------------------------------------------------- */
.slot__blank[b-4acetrhx0w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--rk-sp-6);
    aspect-ratio: 1 / 1;
    border: var(--rk-border) dashed var(--rk-line);
    color: var(--rk-placeholder);
}

/*
    NOT ASKED YET. A solid skeleton rather than the dashed "nothing here" frame, because the
    dashed one is an INVITATION to photograph something and the answer is not known yet.
*/
.slot__blank--wait[b-4acetrhx0w] {
    border-style: solid;
    border-color: var(--rk-line);
    background: var(--rk-skeleton);
    color: var(--rk-steel);
    animation: slot-wait-b-4acetrhx0w var(--rk-dur-shimmer) ease-in-out infinite;
}

.slot__blankglyph[b-4acetrhx0w] {
    font-size: var(--rk-fs-7xl);
    line-height: var(--rk-lh-flat);
}

.slot__blankword[b-4acetrhx0w] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
}

.slot__note[b-4acetrhx0w] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
}

.slot__acts[b-4acetrhx0w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}

.slot__drop[b-4acetrhx0w] {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .slot__shot[b-4acetrhx0w],
    .slot__open[b-4acetrhx0w] {
        transition: none;
    }

    /* SLOWED, NOT STOPPED. A frozen "waiting" mark says the opposite of the truth. */
    .slot__wait[b-4acetrhx0w],
    .slot__blank--wait[b-4acetrhx0w] {
        animation-duration: var(--rk-dur-reduced);
    }
}
/* /Components/Files/PhotoStrip.razor.rz.scp.css */
/*
    THE PHOTOGRAPH STRIP - A HEADING, A WRAPPING ROW OF TILES, AND TWO QUIET LINES.

    🛑 THERE IS DELIBERATELY NO TILE STYLING IN THIS FILE. The tile is RkFileShot, which owns
    its frame, its aspect ratio, its failure state and its caption, and it carries its own
    scope attribute - so a rule written here could not reach inside it anyway without ::deep,
    and reaching in would be styling a component that owns none of these elements. When a tile
    looks wrong, RkFileShot.razor.css is the file.

    The one thing a host is invited to set is --rk-shot-w, which RkFileShot reads for its
    frame width. This strip leaves it at the kit's default: a portal wall of pictures and the
    workflow story's tiles should be the same size, and a photograph drawn at a size nobody
    else uses is how a design system stops being one.

    Tokens only - no raw colour, size, radius or shadow. No pairing of background: var(--rk-ink)
    with color: var(--rk-white): both resolve to the same paper colour in dark and the text
    disappears at 1:1. Nothing here paints a ground at all, so the question does not arise; it
    is written down so the next edit does not introduce it.
*/

.strip[b-cwxzw243oj] {
    display: block;
    padding: var(--rk-sp-12) 0 var(--rk-sp-4);
}

/* -------------------------------------------------------------------------------------
   THE HEADING LINE. Title, count and the reading spinner on one baseline - the same shape
   the custom-fields section uses, so a reader moving down a record screen does not have to
   relearn where a section title sits.
   ------------------------------------------------------------------------------------- */
.strip__head[b-cwxzw243oj] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
    padding-bottom: var(--rk-sp-8);
}

.strip__title[b-cwxzw243oj] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.strip__count[b-cwxzw243oj] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.strip__quiet[b-cwxzw243oj] {
    margin: var(--rk-sp-8) 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
    max-width: var(--rk-measure);
}

/* -------------------------------------------------------------------------------------
   THE CONTACT SHEET. A WRAPPING FLEX ROW rather than a grid, because RkFileShot sizes its
   own frame - a grid track would stretch or squash somebody else's component, and a
   photograph drawn at a size the rest of the product does not use is exactly how a design
   system stops being one.
   ------------------------------------------------------------------------------------- */
.strip__grid[b-cwxzw243oj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-10);
    margin: 0;
    padding: 0;
    list-style: none;
}

.strip__cell[b-cwxzw243oj] {
    display: block;
    min-width: 0;
}
/* /Components/GoodCatches/CatchList.razor.rz.scp.css */
/*
    THE CATCHES THAT BELONG HERE - tokens only, layout only, no literal colour (2026-09-28, lane U).
    The kit draws the table and the stamps; this is the lead line, the link and the foot.
    🛑 Small accent text wears --rk-accent-ink, never raw --rk-accent (a contrast test fails the build).
*/

.gcl[b-seleovfudk] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.gcl-lede[b-seleovfudk] {
    margin: 0;
    font-size: var(--rk-fs-base);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.3);
}

.gcl[b-seleovfudk]  .gcl-link {
    color: var(--rk-accent-ink);
    font-weight: var(--rk-fw-semibold);
    text-decoration: underline;
    text-underline-offset: var(--rk-sp-2);
}

.gcl[b-seleovfudk]  .gcl-what {
    min-width: 16ch;
}

.gcl[b-seleovfudk]  .gcl-nowrap {
    white-space: nowrap;
}

.gcl-foot[b-seleovfudk] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
}
/* /Components/Help/CopilotConversation.razor.rz.scp.css */
/*
    THE ASSISTANT IN THE HELP PANEL - a column that fills the panel under its tabs: a thin bar (questions
    left, Your chats, New chat), the conversation scrolling in the middle, the composer pinned at the
    foot. Tokens only (rk-tokens.css); the danger tone is the danger pair, never raw red, and small text
    in the accent wears --rk-accent-ink (the contrast test).
*/

.cp[b-xmnml5m7ll] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.cp__wait[b-xmnml5m7ll] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    padding: var(--rk-sp-16);
}

/* ------------------------------------------------------------------ THE BAR */

.cp__bar[b-xmnml5m7ll] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-12);
    padding: var(--rk-sp-6) var(--rk-sp-16);
    background: var(--rk-card);
    border-bottom: var(--rk-border-hair) solid var(--rk-line-hard);
    font-size: var(--rk-fs-md);
    color: var(--rk-ink-soft);
}

.cp__left[b-xmnml5m7ll] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--rk-font-mono);
}

.cp__chats[b-xmnml5m7ll],
.cp__new[b-xmnml5m7ll] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

.cp__new[b-xmnml5m7ll] {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: var(--rk-sp-3);
}

.cp__new:disabled[b-xmnml5m7ll] {
    color: var(--rk-disabled-text);
    cursor: default;
}

/* ------------------------------------------------------------------ THE LOG */

.cp__log[b-xmnml5m7ll] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--rk-sp-12) var(--rk-sp-16) var(--rk-sp-16);
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.cp__earlier[b-xmnml5m7ll] {
    align-self: center;
    padding: var(--rk-sp-4) var(--rk-sp-12);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    background: var(--rk-card);
    color: var(--rk-ink);
    font-size: var(--rk-fs-md);
    cursor: pointer;
}

.cp__hello[b-xmnml5m7ll] {
    padding: var(--rk-sp-12);
    background: var(--rk-card);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
}

.cp__hello-lead[b-xmnml5m7ll] {
    margin: 0 0 var(--rk-sp-6);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-3xl);
    font-weight: var(--rk-fw-bold);
    color: var(--rk-ink);
}

.cp__hello-hint[b-xmnml5m7ll] {
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.cp__try[b-xmnml5m7ll] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
}

.cp__try-btn[b-xmnml5m7ll] {
    width: 100%;
    text-align: left;
    padding: var(--rk-sp-6) var(--rk-sp-10);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    background: var(--rk-paper);
    color: var(--rk-ink);
    font-size: var(--rk-fs-lg);
    cursor: pointer;
}

.cp__try-btn:hover[b-xmnml5m7ll] {
    border-color: var(--rk-accent);
}

.cp__turn[b-xmnml5m7ll] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    max-width: 100%;
}

.cp__who[b-xmnml5m7ll] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.cp__turn--you[b-xmnml5m7ll] {
    align-self: flex-end;
    align-items: flex-end;
    max-width: 88%;
}

.cp__said[b-xmnml5m7ll] {
    margin: 0;
    padding: var(--rk-sp-8) var(--rk-sp-12);
    background: var(--rk-accent-soft);
    color: var(--rk-ink);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    font-size: var(--rk-fs-xl);
    line-height: var(--rk-lh-prose);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cp__turn--ai[b-xmnml5m7ll] {
    align-self: stretch;
}

.cp__answer[b-xmnml5m7ll] {
    padding: var(--rk-sp-10) var(--rk-sp-12);
    background: var(--rk-card);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-left: var(--rk-rail) solid var(--rk-steel);
    font-size: var(--rk-fs-xl);
    overflow-wrap: anywhere;
}

.cp__answer[b-xmnml5m7ll]  p:first-child {
    margin-top: 0;
}

.cp__answer[b-xmnml5m7ll]  p:last-child,
.cp__answer[b-xmnml5m7ll]  ol:last-child,
.cp__answer[b-xmnml5m7ll]  ul:last-child {
    margin-bottom: 0;
}

.cp__answer[b-xmnml5m7ll]  a {
    color: var(--rk-accent-ink);
}

.cp__turn--action[b-xmnml5m7ll] {
    align-self: center;
    max-width: 92%;
}

.cp__action[b-xmnml5m7ll] {
    margin: 0;
    padding: var(--rk-sp-4) var(--rk-sp-10);
    font-size: var(--rk-fs-md);
    color: var(--rk-ink-soft);
    border: var(--rk-border-hair) dashed var(--rk-line-hard);
}

.cp__working[b-xmnml5m7ll] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
    padding: var(--rk-sp-10) var(--rk-sp-12);
    background: var(--rk-card);
    border: var(--rk-border-hair) dashed var(--rk-line-hard);
}

.cp__progress[b-xmnml5m7ll] {
    margin: 0;
    padding-left: var(--rk-sp-20);
    font-size: var(--rk-fs-md);
    color: var(--rk-ink-soft);
}

.cp__problem[b-xmnml5m7ll] {
    margin: 0;
    padding: var(--rk-sp-8) var(--rk-sp-12);
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
    border-left: var(--rk-rail) solid var(--rk-warn);
    font-size: var(--rk-fs-lg);
}

/* ------------------------------------------------------------------ LINKS */

.cp__links[b-xmnml5m7ll] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
}

.cp__link[b-xmnml5m7ll] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
    padding: var(--rk-sp-4) var(--rk-sp-10);
    border: var(--rk-border) solid var(--rk-line-hard);
    background: var(--rk-paper);
    color: var(--rk-ink);
    text-align: left;
    cursor: pointer;
}

.cp__link:hover[b-xmnml5m7ll],
.cp__link:focus-visible[b-xmnml5m7ll] {
    border-color: var(--rk-accent);
}

.cp__link-kind[b-xmnml5m7ll] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

.cp__link-label[b-xmnml5m7ll] {
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    overflow-wrap: anywhere;
}

.cp__link--page[b-xmnml5m7ll] {
    border-color: var(--rk-accent-deep);
}

/* ------------------------------------------------------------------ PROPOSAL CARDS */

.cp__card[b-xmnml5m7ll] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
    padding: var(--rk-sp-10) var(--rk-sp-12);
    background: var(--rk-card);
    border: var(--rk-border) solid var(--rk-accent);
    box-shadow: var(--rk-shadow-card);
}

.cp__card--danger[b-xmnml5m7ll] {
    border-color: var(--rk-danger);
    background: var(--rk-danger-soft);
}

.cp__card--confirmed[b-xmnml5m7ll],
.cp__card--declined[b-xmnml5m7ll],
.cp__card--expired[b-xmnml5m7ll],
.cp__card--refused[b-xmnml5m7ll] {
    border-color: var(--rk-line-hard);
    box-shadow: none;
}

.cp__card-head[b-xmnml5m7ll] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
}

.cp__card-kicker[b-xmnml5m7ll] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

.cp__card--danger .cp__card-kicker[b-xmnml5m7ll] {
    color: var(--rk-danger-ink);
}

.cp__card-label[b-xmnml5m7ll] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-3xl);
    font-weight: var(--rk-fw-bold);
    color: var(--rk-ink);
}

.cp__card-summary[b-xmnml5m7ll] {
    margin: 0;
    font-size: var(--rk-fs-xl);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.cp__card-prompt[b-xmnml5m7ll] {
    margin: 0;
    padding: var(--rk-sp-6) var(--rk-sp-10);
    border-left: var(--rk-rail) solid var(--rk-accent);
    font-weight: var(--rk-fw-semibold);
    font-size: var(--rk-fs-xl);
    color: var(--rk-ink);
}

.cp__card--danger .cp__card-prompt[b-xmnml5m7ll] {
    border-left-color: var(--rk-danger);
    color: var(--rk-danger-ink);
}

.cp__card-args summary[b-xmnml5m7ll] {
    cursor: pointer;
    font-size: var(--rk-fs-md);
    color: var(--rk-ink-soft);
}

.cp__card-args pre[b-xmnml5m7ll] {
    margin: var(--rk-sp-6) 0 0;
    padding: var(--rk-sp-8);
    max-height: 14rem;
    overflow: auto;
    background: var(--rk-paper);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-md);
    color: var(--rk-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cp__card-acts[b-xmnml5m7ll] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    align-items: center;
}

.cp__card-state[b-xmnml5m7ll] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    align-items: baseline;
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink);
}

.cp__stamp[b-xmnml5m7ll] {
    padding: var(--rk-sp-2) var(--rk-sp-6);
    border: var(--rk-border) solid currentColor;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.cp__stamp--confirmed[b-xmnml5m7ll] {
    color: var(--rk-ok-ink);
}

.cp__stamp--refused[b-xmnml5m7ll],
.cp__stamp--expired[b-xmnml5m7ll] {
    color: var(--rk-danger-ink);
}

.cp__continue[b-xmnml5m7ll] {
    align-self: flex-start;
    padding: var(--rk-sp-4) var(--rk-sp-12);
    border: var(--rk-border) solid var(--rk-accent-deep);
    background: var(--rk-paper);
    color: var(--rk-accent-ink);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    cursor: pointer;
}

/* ------------------------------------------------------------------ THE FOOT */

.cp__offline[b-xmnml5m7ll],
.cp__notice[b-xmnml5m7ll] {
    margin: 0;
    padding: var(--rk-sp-8) var(--rk-sp-16);
    font-size: var(--rk-fs-lg);
    border-top: var(--rk-border-hair) solid var(--rk-line-hard);
}

.cp__offline[b-xmnml5m7ll] {
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
}

.cp__notice[b-xmnml5m7ll] {
    background: var(--rk-danger-soft);
    color: var(--rk-danger-ink);
}

.cp__composer[b-xmnml5m7ll] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
    padding: var(--rk-sp-10) var(--rk-sp-16);
    padding-bottom: calc(var(--rk-sp-10) + env(safe-area-inset-bottom));
    background: var(--rk-card);
    border-top: var(--rk-border) solid var(--rk-line-hard);
}

.cp__input[b-xmnml5m7ll] {
    width: 100%;
    min-height: 4.5rem;
    max-height: 12rem;
    resize: vertical;
    padding: var(--rk-sp-8);
    font-family: var(--rk-font-body);
    font-size: var(--rk-fs-input);
    line-height: var(--rk-lh-sentence);
    color: var(--rk-ink);
    background: var(--rk-field);
    border: var(--rk-border) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-0);
}

.cp__input[b-xmnml5m7ll]::placeholder {
    color: var(--rk-placeholder);
}

.cp__input:focus-visible[b-xmnml5m7ll] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: 0;
}

.cp__input:disabled[b-xmnml5m7ll] {
    color: var(--rk-disabled-text);
}

.cp__send-row[b-xmnml5m7ll] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-8);
}

.cp__hint[b-xmnml5m7ll] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}
/* /Components/Help/HelpPanel.razor.rz.scp.css */
/*
    THE HELP PANEL - the run drawer's geometry (RunDrawer.razor.css carries the argument): a
    right-hand panel from the top of the window, no scrim, the page beside it stays live; the
    whole screen on a phone. It comes after the run drawer in the DOM, on the same rung, so with
    both open the help is on top - the person asked for it last.

    The words inside wear the global .help-prose (wwwroot/css/help.css); this file only places the
    panel and sizes the prose down a step for a 480px column.
*/

.helppanel[b-r058am2ut7] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--rk-z-scrim);
    display: flex;
    flex-direction: column;
    width: min(100%, var(--rk-dialog-w));
    background: var(--rk-paper);
    color: var(--rk-ink);
    border-left: var(--rk-border-card) solid var(--rk-line-hard);
    box-shadow: var(--rk-shadow-float);
}

/* ------------------------------------------------------------------ THE HEAD */

.helppanel__head[b-r058am2ut7] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-10) var(--rk-sp-12) var(--rk-sp-10) var(--rk-sp-16);
    padding-top: calc(var(--rk-sp-10) + env(safe-area-inset-top));

    /* Permanent dark chrome - the chrome pair, never ink + white. */
    background: var(--rk-chrome-bg);
    color: var(--rk-chrome-ink);
    border-bottom: var(--rk-btn-edge) solid var(--rk-accent);
}

.helppanel__id[b-r058am2ut7] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    flex: 1 1 auto;
    min-width: 0;
}

.helppanel__kicker[b-r058am2ut7] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-chrome-mute);
}

.helppanel__title[b-r058am2ut7] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-2xs);
    line-height: var(--rk-lh-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.helppanel__btn[b-r058am2ut7] {
    flex: 0 0 auto;
    width: var(--rk-control-sm);
    height: var(--rk-control-sm);
    border: var(--rk-border-hair) solid var(--rk-chrome-mute);
    border-radius: var(--rk-radius-0);
    background: transparent;
    color: var(--rk-chrome-ink);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-flat);
    cursor: pointer;
}

.helppanel__btn:hover[b-r058am2ut7] {
    border-color: var(--rk-accent);
}

.helppanel__btn:focus-visible[b-r058am2ut7] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

/* ------------------------------------------------------------------ THE TOOLS */

.helppanel__tools[b-r058am2ut7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8) var(--rk-sp-12);
    padding: var(--rk-sp-10) var(--rk-sp-16);
    background: var(--rk-card);
    border-bottom: var(--rk-border-hair) solid var(--rk-line-hard);
}

.helppanel__chapter[b-r058am2ut7] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
    text-decoration: underline;
    text-underline-offset: var(--rk-sp-3);
}

.helppanel__search[b-r058am2ut7] {
    display: flex;
    flex: 1 1 14rem;
    min-width: 0;
}

.helppanel__input[b-r058am2ut7] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--rk-control-xs);
    padding: 0 var(--rk-sp-8);
    font-family: var(--rk-font-body);
    font-size: var(--rk-fs-input);
    color: var(--rk-ink);
    background: var(--rk-field);
    border: var(--rk-border) solid var(--rk-line-hard);
    border-right: 0;
    border-radius: var(--rk-radius-0);
}

.helppanel__input[b-r058am2ut7]::placeholder {
    color: var(--rk-placeholder);
}

.helppanel__input:focus-visible[b-r058am2ut7] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: 0;
}

.helppanel__go[b-r058am2ut7] {
    flex: 0 0 auto;
    min-height: var(--rk-control-xs);
    padding: 0 var(--rk-sp-12);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-on-fill);
    background: var(--rk-accent-deep);
    border: var(--rk-border) solid var(--rk-accent-deep);
    border-radius: var(--rk-radius-0);
    cursor: pointer;
}

/* ------------------------------------------------------------------ THE BODY */

.helppanel__body[b-r058am2ut7] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--rk-sp-16);
}

.helppanel__wait[b-r058am2ut7] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.helppanel__piece + .helppanel__piece[b-r058am2ut7] {
    margin-top: var(--rk-sp-24);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border) solid var(--rk-line-hard);
}

.helppanel__from[b-r058am2ut7] {
    margin: 0 0 var(--rk-sp-6);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.helppanel__more[b-r058am2ut7] {
    display: inline-block;
    margin-top: var(--rk-sp-4);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

/* The manual's sizes, one step down for a 480px column. */
.helppanel__piece[b-r058am2ut7]  h3 {
    font-size: var(--rk-fs-5xl);
    margin-top: 0;
}

.helppanel__piece[b-r058am2ut7]  h4 {
    font-size: var(--rk-fs-3xl);
}

.helppanel__piece[b-r058am2ut7] {
    font-size: var(--rk-fs-xl);
}

/* ------------------------------------------------------------------ THE TABS (2026-10-16) */

/* ASK and THIS PAGE, under the head (docs/claude/COPILOT.md 2.1). The kit's strip, given the panel's
   card ground and a hairline so it reads as part of the head rather than of the page. */
.helppanel[b-r058am2ut7]  .helppanel__tabs {
    flex: 0 0 auto;
    padding: 0 var(--rk-sp-12);
    background: var(--rk-card);
    border-bottom: var(--rk-border-hair) solid var(--rk-line-hard);
}
/* /Components/KitGallery.razor.rz.scp.css */
/*
    The gallery panel's own layout. Everything visual belongs to the controls; what is here
    is spacing and the section headings that separate them.
*/

.kit[b-jl4dyhye1q] {
    display: block;
}

.kit__h[b-jl4dyhye1q] {
    margin: var(--rk-sp-28) 0 var(--rk-sp-12);
    padding-bottom: var(--rk-sp-4);
    border-bottom: var(--rk-border) solid var(--rk-line);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-5xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-5xl);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.kit__h:first-child[b-jl4dyhye1q] { margin-top: 0; }

.kit__h3[b-jl4dyhye1q] {
    margin: var(--rk-sp-18) 0 var(--rk-sp-8);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xl);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.kit__row[b-jl4dyhye1q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    margin-bottom: var(--rk-sp-12);
}

.kit__row--mid[b-jl4dyhye1q] { align-items: center; }

.kit__p[b-jl4dyhye1q] {
    margin: 0;
    font-size: var(--rk-fs-xl);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.kit__lede[b-jl4dyhye1q] {
    margin: 0 0 var(--rk-sp-14);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-2xl);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.kit__note[b-jl4dyhye1q] {
    font-size: var(--rk-fs-md);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.kit__num[b-jl4dyhye1q] { text-align: right; }

.kit__gap[b-jl4dyhye1q] { margin-top: var(--rk-sp-8); }

/* The cards in the gallery need breathing room between them; in a real screen a stack of
   cards is usually a list and the rhythm comes from the page. */
.kit[b-jl4dyhye1q]  .rk-card { margin-bottom: var(--rk-sp-14); }

.kit[b-jl4dyhye1q]  .rk-tablewrap { margin-bottom: var(--rk-sp-12); }
/* /Components/Ledger/LedgerBudgetsPanel.razor.rz.scp.css */
/*
    BUDGETS - the grid's own look. The worksheet itself (bands, subtotals, the total's heavy rule)
    comes from Ledger.razor.css; this is only what makes a cell an editable number: a narrow,
    right-aligned mono box with no label chrome, a quiet mark on a planned cell, and a red one on a
    cell the door refused. Tokens only.
*/

.bg[b-iweu1d4zib]  .bg-grid.lg-table th,
.bg[b-iweu1d4zib]  .bg-grid.lg-table td {
    padding: var(--rk-sp-3) var(--rk-sp-4);
    vertical-align: middle;
}

.bg[b-iweu1d4zib]  .bg-grid.lg-table .bg-acct {
    min-width: calc(var(--rk-blank-max) * 1.1);
    white-space: nowrap;
    padding-left: var(--rk-sp-10);
}

.bg[b-iweu1d4zib]  .bg-cell {
    margin: 0;
    min-width: calc(var(--rk-blank-max) * 0.34);
}

.bg[b-iweu1d4zib]  .bg-cell .rk-input {
    min-height: var(--rk-control-xs);
    padding: var(--rk-sp-2) var(--rk-sp-4);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    font-variant-numeric: tabular-nums;
    text-align: right;
    background: transparent;
    border-color: var(--rk-line);
}

.bg[b-iweu1d4zib]  .bg-td--set .bg-cell .rk-input {
    background: var(--rk-card);
    border-color: var(--rk-line-hard);
    font-weight: var(--rk-fw-semibold);
}

.bg[b-iweu1d4zib]  .bg-td--saving .bg-cell .rk-input {
    border-color: var(--rk-steel);
}

.bg[b-iweu1d4zib]  .bg-td--bad .bg-cell .rk-input {
    border-color: var(--rk-danger);
    background: var(--rk-danger-soft);
}

.bg[b-iweu1d4zib]  .bg-year {
    font-weight: var(--rk-fw-semibold);
    padding-left: var(--rk-sp-10);
}
/* /Components/Ledger/LedgerChartPanel.razor.rz.scp.css */
/* THE CHART OF ACCOUNTS. Tokens only; the worksheet and form styles come from Ledger.razor.css. */

[b-o55r9in11g] .chart__name {
    grid-column: span 2;
}
/* /Components/Ledger/LedgerDrillSheet.razor.rz.scp.css */
/* THE DRILL-DOWN SHEET. Tokens only; the worksheet styles come from Ledger.razor.css. */

.sheet__back[b-890p3behyf] {
    margin-bottom: var(--rk-sp-8);
}

.sheet__head[b-890p3behyf] {
    margin-bottom: var(--rk-sp-12);
    padding: var(--rk-sp-10) var(--rk-sp-12);
    background: var(--rk-zebra);
    border-left: var(--rk-rail) solid var(--rk-steel);
}

.sheet__src[b-890p3behyf] {
    margin-left: var(--rk-sp-8);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-ink);
}

/* Said instead of "Open it" to a reader without the role the document's page needs - plain text, never a link. */
.sheet__src-role[b-890p3behyf] {
    display: block;
    margin-top: var(--rk-sp-4);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.sheet__reverse[b-890p3behyf]  .sheet__date {
    grid-column: span 2;
}

.sheet__reverse[b-890p3behyf] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    margin-top: var(--rk-sp-14);
    padding: var(--rk-sp-12);
    border: var(--rk-border) dashed var(--rk-danger);
    background: var(--rk-danger-soft);
}
/* /Components/Ledger/LedgerJournalPanel.razor.rz.scp.css */
/*
    THE JOURNAL. Tokens only; the worksheet styles come from Ledger.razor.css. The new-entry
    grid is a table of label-less fields (each carries an aria-label), so a line reads across like
    a line of a journal - and scrolls sideways on a phone rather than folding into a form nobody
    can total by eye.
*/

.je[b-9cjolxbx4l] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.je[b-9cjolxbx4l]  .rk-field {
    margin-bottom: 0;
}

.je[b-9cjolxbx4l]  .je__memo {
    grid-column: span 2;
}

/*
    SEVEN FIELDS ACROSS THE WIDE DIALOG. A fixed layout shares the width by column - the account
    widest - and every field fills its cell, so nothing is clipped to a width chosen elsewhere and
    the dialog never scrolls sideways at desktop width. On a phone the wrapper scrolls instead.
*/
.je .je__lines[b-9cjolxbx4l] {
    table-layout: fixed;
    min-width: calc(var(--rk-dialog-w) * 1.6);
}

.je .je__c-acct[b-9cjolxbx4l] { width: 26%; }

.je .je__c-amt[b-9cjolxbx4l] { width: 12%; }

.je .je__c-dim[b-9cjolxbx4l] { width: 14%; }

.je .je__c-note[b-9cjolxbx4l] { width: 15%; }

.je .je__c-x[b-9cjolxbx4l] { width: 7%; }

.je .je__lines th[b-9cjolxbx4l],
.je .je__lines td[b-9cjolxbx4l] {
    padding: var(--rk-sp-4);
    vertical-align: top;
}

.je .je__lines td.je__x[b-9cjolxbx4l] {
    padding-top: var(--rk-sp-12);
    text-align: center;
}

.je[b-9cjolxbx4l]  .je__acct,
.je[b-9cjolxbx4l]  .je__amt,
.je[b-9cjolxbx4l]  .je__dim,
.je[b-9cjolxbx4l]  .je__note {
    width: 100%;
    min-width: 0;
}

.je[b-9cjolxbx4l]  .je__amt input {
    text-align: right;
    font-family: var(--rk-font-mono);
}

.je__issue[b-9cjolxbx4l] {
    display: block;
    margin-top: var(--rk-sp-3);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-warn-ink);
}

.je__balance[b-9cjolxbx4l] {
    font-family: var(--rk-font-body);
    font-size: var(--rk-fs-sm);
    letter-spacing: 0;
    text-transform: none;
}

.je__balance--ok[b-9cjolxbx4l] {
    color: var(--rk-ok-ink);
}

.je__balance--off[b-9cjolxbx4l] {
    color: var(--rk-danger-ink);
}
/* /Components/Ledger/LedgerPeriodsPanel.razor.rz.scp.css */
/* THE PERIODS. Tokens only; the worksheet and form styles come from Ledger.razor.css. */

.per__year[b-zep8y7ptkn] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
}

.per__head[b-zep8y7ptkn] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-4) var(--rk-sp-14);
}

.per__month[b-zep8y7ptkn] {
    margin: 0 var(--rk-sp-10) 0 var(--rk-sp-6);
    color: var(--rk-ink-soft);
}

.per__now td[b-zep8y7ptkn] {
    background: var(--rk-accent-soft);
}

.per__open[b-zep8y7ptkn] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-12);
    border: var(--rk-border-card) dashed var(--rk-line-hard);
    background: var(--rk-card);
}

.per__open[b-zep8y7ptkn]  .per__scheme {
    grid-column: span 2;
}
/* /Components/Ledger/LedgerRangePicker.razor.rz.scp.css */
/* THE PERIOD PICKER. Tokens only, layout only. */

/* max-width and a shrinking basis, so on a phone the long period names shrink to the screen
   rather than pushing the page sideways. */
.range[b-pkfwqxth5m] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-12);
    max-width: 100%;
    min-width: 0;
}

.range[b-pkfwqxth5m]  .rk-field {
    margin-bottom: 0;
}

.range[b-pkfwqxth5m]  .range__pick {
    flex: 0 1 calc(var(--rk-blank-max) * 1.9);
    min-width: 0;
}

.range[b-pkfwqxth5m]  .range__date {
    width: calc(var(--rk-blank-max) * 0.8);
}

.range__problem[b-pkfwqxth5m] {
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-danger-ink);
}
/* /Components/Ledger/LedgerSetupPanel.razor.rz.scp.css */
/* THE LEDGER'S SETUP. Tokens only; the worksheet and form styles come from Ledger.razor.css. */

.su__part[b-npzbo32hzv] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    padding-bottom: var(--rk-sp-16);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
}

.su__head[b-npzbo32hzv] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rk-sp-10);
}

.su__settings[b-npzbo32hzv] {
    display: flex;
    flex-direction: column;
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line);
}

.su__setting[b-npzbo32hzv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-8) var(--rk-sp-16);
    padding: var(--rk-sp-12);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.su__setting:first-child[b-npzbo32hzv] {
    border-top: 0;
}

@media (min-width: 900px) {
    .su__setting[b-npzbo32hzv] {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

.su__words[b-npzbo32hzv] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    min-width: 0;
}

.su__label[b-npzbo32hzv] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.su__edit[b-npzbo32hzv] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
    min-width: 0;
}

.su__edit[b-npzbo32hzv]  .rk-field {
    margin-bottom: 0;
}

.su__arrow[b-npzbo32hzv] {
    color: var(--rk-ink-soft);
    text-align: center;
}

.su__rule[b-npzbo32hzv] {
    margin-bottom: var(--rk-sp-12);
}

.su__taxfind[b-npzbo32hzv] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8) var(--rk-sp-12);
    margin-bottom: var(--rk-sp-8);
}

.su__taxfind[b-npzbo32hzv]  .rk-field {
    margin-bottom: 0;
}

.su__taxfind[b-npzbo32hzv]  .su__taxtext {
    width: var(--rk-blank-max);
}

.su__taxfind[b-npzbo32hzv]  .su__taxcode {
    flex: 1 1 var(--rk-blank-max);
}

.su__sync[b-npzbo32hzv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-12) var(--rk-sp-24);
    padding: var(--rk-sp-12);
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-accent);
}

.su__count[b-npzbo32hzv] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
}

.su__big[b-npzbo32hzv] {
    font-size: var(--rk-fs-5xl);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-tight);
    color: var(--rk-ink);
}
/* /Components/Ledger/LedgerStatementsPanel.razor.rz.scp.css */
/*
    STATEMENTS. Tokens only; the worksheet styles come from Ledger.razor.css. The two statements
    stack on a phone and sit side by side on a wide screen - the P&L first, because it is the one
    that is read every month.
*/

.st[b-e48jwggm07] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-24);
    align-items: start;
}

@media (min-width: 1200px) {
    .st[b-e48jwggm07] {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

.st__one[b-e48jwggm07] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.st__head[b-e48jwggm07] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
}

.st__check[b-e48jwggm07] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
}

/* Budget against actual: the variance says which way is good - income ahead or a cost under is ok, the
   other way is a warning. Both inks are the status inks, readable on the card in both themes. */
.st .lg-table td.st-var--good[b-e48jwggm07] {
    color: var(--rk-ok-ink);
    font-weight: var(--rk-fw-semibold);
}

.st .lg-table td.st-var--bad[b-e48jwggm07] {
    color: var(--rk-warn-ink);
    font-weight: var(--rk-fw-semibold);
}
/* /Components/Ledger/LedgerTrialBalancePanel.razor.rz.scp.css */
/* THE TRIAL BALANCE. Tokens only; the worksheet styles come from Ledger.razor.css. */

/* A link that looks like the kit's ghost button - an anchor, because a download IS a link. */
.tb__dl[b-cr8uu8bn11] {
    display: inline-flex;
    align-items: center;
    min-height: var(--rk-control-sm);
    padding: 0 var(--rk-sp-12);
    border: var(--rk-border) solid var(--rk-ink);
    border-radius: var(--rk-radius-xs);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--rk-ink);
    background: var(--rk-card);
}

.tb__dl:hover[b-cr8uu8bn11] {
    background: var(--rk-hover-ghost);
}

.tb__dl:focus-visible[b-cr8uu8bn11] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.tb__check[b-cr8uu8bn11] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
}
/* /Components/MapCheck/MapCheckPanel.razor.rz.scp.css */
/*
    MAP CHECK. Tokens only, no literal colour. A row is a BLOCK that reflows (the route stop list's
    rule): one column on a phone, four on a desk - pick, site, what the map and the drivers say,
    and the actions. Every control stays a full tap target.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's scoped
    element, so a bare rule here would match nothing.
*/

.mc-head[b-pspq1h9hx7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-6) var(--rk-sp-12);
    width: 100%;
}

.mc-head__toggle[b-pspq1h9hx7] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    min-height: var(--rk-tap);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rk-ink);
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.mc-head__title[b-pspq1h9hx7] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
}

.mc-head__chev[b-pspq1h9hx7] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-accent-ink);
    text-decoration: underline;
}

.mc-help[b-pspq1h9hx7],
.mc-row__tests a[b-pspq1h9hx7],
.mc-row__name[b-pspq1h9hx7],
.mc-row__fix[b-pspq1h9hx7] {
    color: var(--rk-accent-ink);
}

.mc-help[b-pspq1h9hx7] {
    font-size: var(--rk-fs-xs);
}

.mc-lede[b-pspq1h9hx7] {
    margin: 0 0 var(--rk-sp-10);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* Who may fix a pin, said once to those who may only look (verifier MC3-1). */
.mc-who[b-pspq1h9hx7] {
    margin: 0 0 var(--rk-sp-10);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* The result notice takes focus after an act, so it never falls to the page body (verifier MC2-7). */
.mc-said-wrap:focus[b-pspq1h9hx7] {
    outline: none;
}

.mc-said-wrap:focus-visible[b-pspq1h9hx7] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.mc-said__hint[b-pspq1h9hx7] {
    margin: var(--rk-sp-6) 0 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.mc-said[b-pspq1h9hx7] {
    margin: 0;
    padding-left: var(--rk-sp-16);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
}

.mc-said li + li[b-pspq1h9hx7] {
    margin-top: var(--rk-sp-3);
}

.mc-bar[b-pspq1h9hx7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-8);
    padding: var(--rk-sp-8) 0;
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-6);
}

.mc-bar__count[b-pspq1h9hx7] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    margin-right: var(--rk-sp-6);
}

.mc-list[b-pspq1h9hx7] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mc-row[b-pspq1h9hx7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-6) var(--rk-sp-14);
    padding: var(--rk-sp-10) var(--rk-sp-4);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.mc-row--doubt[b-pspq1h9hx7] {
    border-left: var(--rk-rail) solid var(--rk-warn);
    padding-left: var(--rk-sp-8);
}

.mc-row__pick[b-pspq1h9hx7] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-6);
}

/* The kit's check is a full-width row in a form; here it is one box beside the stop number (on a
   390 px phone it stretched into an empty bar - driven 2026-11-02). */
.mc-row__pick[b-pspq1h9hx7]  .mc-row__check {
    flex: 0 0 auto;
    width: auto;
}

.mc-row__stop[b-pspq1h9hx7] {
    min-width: var(--rk-sp-24);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-bold);
    color: var(--rk-ink);
}

.mc-row__site[b-pspq1h9hx7] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    min-width: 0;
}

.mc-row__name[b-pspq1h9hx7] {
    font-weight: var(--rk-fw-semibold);
    overflow-wrap: anywhere;
}

.mc-row__num[b-pspq1h9hx7] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.mc-row__addr[b-pspq1h9hx7] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.mc-row__verdict[b-pspq1h9hx7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-4) var(--rk-sp-6);
    margin-top: var(--rk-sp-2);
}

.mc-row__quiet[b-pspq1h9hx7] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.mc-row__says[b-pspq1h9hx7] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--rk-sp-3) var(--rk-sp-8);
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
}

.mc-row__says dt[b-pspq1h9hx7] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.mc-row__says dd[b-pspq1h9hx7] {
    margin: 0;
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.mc-row__tests[b-pspq1h9hx7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-2) var(--rk-sp-10);
}

.mc-row__acts[b-pspq1h9hx7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}

.mc-row__fix[b-pspq1h9hx7] {
    display: inline-flex;
    align-items: center;
    min-height: var(--rk-tap);
    font-size: var(--rk-fs-sm);
}

.mc-more[b-pspq1h9hx7] {
    margin: var(--rk-sp-8) 0 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.mc-ask[b-pspq1h9hx7] {
    margin: 0;
    line-height: var(--rk-lh-prose);
}

@media (min-width: 900px) {
    .mc-row[b-pspq1h9hx7] {
        /* pick | site | what the map and the drivers say | actions - 14 / 18 / 16 x 16px floors so the
           actions wrap two to a line instead of one under another. */
        grid-template-columns: max-content minmax(calc(var(--rk-sp-16) * 14), 1fr) minmax(calc(var(--rk-sp-16) * 18), 1.4fr) minmax(calc(var(--rk-sp-16) * 16), 1.1fr);
        align-items: start;
    }

    .mc-row__acts[b-pspq1h9hx7] {
        justify-content: flex-end;
    }
}
/* /Components/Messaging/CustomerDayLinkCard.razor.rz.scp.css */
/*
    THE CUSTOMER'S LIVE DAY MAP LINKS (lane AX). Every value is a token from rk-tokens.css.
*/

.dl[b-n8f07avf89] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
}

.dl__hint[b-n8f07avf89] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.dl__email[b-n8f07avf89] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8);
}

.dl__to[b-n8f07avf89] {
    flex: 1 1 14rem;
}

.dl__actions[b-n8f07avf89],
.dl__made[b-n8f07avf89] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
}

.dl__url[b-n8f07avf89] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    overflow-wrap: anywhere;
    color: var(--rk-ink);
}

.dl__list[b-n8f07avf89] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
}

.dl__row[b-n8f07avf89] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    font-size: var(--rk-fs-sm);
}

.dl__what[b-n8f07avf89] {
    font-weight: var(--rk-fw-semibold);
}

.dl__when[b-n8f07avf89] {
    color: var(--rk-ink-soft);
}

.dl__open[b-n8f07avf89] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-accent-ink);
}

/*
    A LONG STAMP WRAPS (lane PT's fixer, 2026-11-02). "Open - no sign-in (for our own screens)" is one nowrap line in the
    stamp's display face - 315 px - and at a phone's 390 px it ran past the sheet's edge and scrolled it sideways.
*/
.dl__stamp[b-n8f07avf89] {
    min-width: 0;
    max-width: 100%;
}

.dl__stamp[b-n8f07avf89]  .rk-stamp {
    white-space: normal;
}
/* /Components/Messaging/CustomerMessagesPanel.razor.rz.scp.css */
/*
    ONE CUSTOMER'S MESSAGES. Every value is a token from rk-tokens.css.
*/

.cm[b-7w1rs2117y] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.cm__lede[b-7w1rs2117y],
.cm__hint[b-7w1rs2117y] {
    margin: 0 0 var(--rk-sp-10);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.cm__hint[b-7w1rs2117y] {
    margin: var(--rk-sp-12) 0 0;
}

.cm__now[b-7w1rs2117y] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8) var(--rk-sp-20);
    margin-bottom: var(--rk-sp-12);
}

.cm__fact[b-7w1rs2117y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-4) var(--rk-sp-8);
}

.cm__fword[b-7w1rs2117y] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.cm__src[b-7w1rs2117y] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.cm__named[b-7w1rs2117y] {
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.cm__grid[b-7w1rs2117y] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--rk-sp-10);
}

.cm__go[b-7w1rs2117y] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8) var(--rk-sp-16);
    margin-top: var(--rk-sp-10);
}

.cm__day[b-7w1rs2117y] {
    margin: var(--rk-sp-8) 0 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.cm__link[b-7w1rs2117y] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-accent-ink);
}
/* /Components/Messaging/DayMapSignInCard.razor.rz.scp.css */
/*
    WHO CAN OPEN THE LIVE DAY MAP (lane PT, 2026-11-02). Every value is a token from rk-tokens.css - the same
    ones CustomerDayLinkCard already uses, so the two read as one card.
*/

.ms[b-30hkbubol8] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    gap: var(--rk-sp-8);
    padding-bottom: var(--rk-sp-10);
    border-bottom: 1px solid var(--rk-line);
}

.ms__head[b-30hkbubol8] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.ms__label[b-30hkbubol8] {
    margin: 0;
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.ms__hint[b-30hkbubol8],
.ms__reason[b-30hkbubol8] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.ms__reason[b-30hkbubol8] {
    font-style: italic;
}

.ms__people[b-30hkbubol8] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
}

.ms__list[b-30hkbubol8] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
}

.ms__row[b-30hkbubol8] {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
}

.ms__who[b-30hkbubol8] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 12rem;
}

.ms__email[b-30hkbubol8] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.ms__facts[b-30hkbubol8],
.ms__actions[b-30hkbubol8] {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}

.ms__when[b-30hkbubol8] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.ms__add[b-30hkbubol8] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8);
}

.ms__pick[b-30hkbubol8] {
    flex: 1 1 14rem;
}

.ms__link[b-30hkbubol8] {
    color: var(--rk-accent-ink);
    overflow-wrap: anywhere;
}
/* /Components/Messaging/DayProofEmailCard.razor.rz.scp.css */
/*
    A CUSTOMER'S DAY PROOF EMAIL (lane AO). Every value is a token from rk-tokens.css.
*/

.dpe[b-hg09l3jdlk] {
    margin-top: var(--rk-sp-14);
    min-width: 0;
    max-width: 100%;
}

.dpe__top[b-hg09l3jdlk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-10);
}

.dpe__counts[b-hg09l3jdlk] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.dpe__status[b-hg09l3jdlk] {
    margin: var(--rk-sp-8) 0 0;
    max-width: var(--rk-measure);
    line-height: var(--rk-lh-prose);
}

.dpe__hash[b-hg09l3jdlk],
.dpe__who[b-hg09l3jdlk] {
    margin: var(--rk-sp-6) 0 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.dpe__person[b-hg09l3jdlk] {
    display: inline-block;
    margin-right: var(--rk-sp-8);
    color: var(--rk-ink);
}

.dpe__person--blocked[b-hg09l3jdlk] {
    color: var(--rk-warn-ink);
    text-decoration: line-through;
}

.dpe__preview[b-hg09l3jdlk] {
    margin-top: var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
}

.dpe__preview summary[b-hg09l3jdlk] {
    cursor: pointer;
    color: var(--rk-accent-ink);
}

.dpe__subject[b-hg09l3jdlk] {
    margin: var(--rk-sp-8) 0 var(--rk-sp-4);
    font-weight: var(--rk-fw-semibold);
}

.dpe__body[b-hg09l3jdlk] {
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border-left: var(--rk-rail) solid var(--rk-line);
    white-space: pre-wrap;
    max-width: var(--rk-measure);
    line-height: var(--rk-lh-prose);
}

.dpe__send[b-hg09l3jdlk] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8) var(--rk-sp-12);
    margin-top: var(--rk-sp-12);
}

.dpe__to[b-hg09l3jdlk] {
    flex: 1 1 16rem;
    max-width: 28rem;
}

.dpe__photos[b-hg09l3jdlk] {
    flex: 0 1 16rem;
    min-inline-size: 0;
}
/* /Components/Messaging/EmailProofNow.razor.rz.scp.css */
/*
    THE ONE-TAP PROOF EMAIL. Every value is a token from rk-tokens.css.
*/

.epn[b-bsin9her40] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    min-width: 0;
    max-width: 100%;
}

.epn__to[b-bsin9her40] {
    max-width: 28rem;
}

.epn__go[b-bsin9her40] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8) var(--rk-sp-12);
}

.epn__hint[b-bsin9her40] {
    flex: 1 1 16rem;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.epn--compact[b-bsin9her40] {
    gap: var(--rk-sp-4);
}
/* /Components/Messaging/JobMessagesPanel.razor.rz.scp.css */
/*
    ONE JOB'S CUSTOMER MESSAGES. Every value is a token from rk-tokens.css.
*/

.jm[b-pnee1noe18] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.jm__lede[b-pnee1noe18],
.jm__hint[b-pnee1noe18] {
    margin: 0 0 var(--rk-sp-10);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.jm__moments[b-pnee1noe18] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--rk-sp-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.jm__moment[b-pnee1noe18] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-sp-3) solid var(--rk-line);
    background: var(--rk-card);
    min-width: 0;
}

.jm__moment--on[b-pnee1noe18] {
    border-left-color: var(--rk-ok);
}

.jm__mtop[b-pnee1noe18] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-4) var(--rk-sp-8);
}

.jm__mname[b-pnee1noe18] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.jm__src[b-pnee1noe18] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.jm__mdetail[b-pnee1noe18] {
    margin: 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.jm__nobody[b-pnee1noe18] {
    margin: 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-warn-ink);
}

.jm__who[b-pnee1noe18] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    margin: var(--rk-sp-4) 0 0;
    padding: 0;
    list-style: none;
}

.jm__person[b-pnee1noe18] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-2) var(--rk-sp-6);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.jm__pname[b-pnee1noe18] {
    font-weight: var(--rk-fw-semibold);
}

.jm__paddr[b-pnee1noe18] {
    word-break: break-all;
}

.jm__plevel[b-pnee1noe18] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.jm__person--blocked .jm__pname[b-pnee1noe18],
.jm__person--blocked .jm__paddr[b-pnee1noe18] {
    text-decoration: line-through;
    text-decoration-color: var(--rk-warn);
}

.jm__pwhy[b-pnee1noe18] {
    flex-basis: 100%;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-warn-ink);
}

.jm__named[b-pnee1noe18] {
    margin: var(--rk-sp-10) 0 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.jm__set[b-pnee1noe18] {
    margin-top: var(--rk-sp-12);
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.jm__sethead[b-pnee1noe18] {
    margin: 0 0 var(--rk-sp-6);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.jm__grid[b-pnee1noe18] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--rk-sp-10);
}

.jm__go[b-pnee1noe18] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-10);
}

.jm__send[b-pnee1noe18] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--rk-sp-16);
}

.jm__sendpart[b-pnee1noe18] {
    min-width: 0;
}
/* /Components/Messaging/MessageLog.razor.rz.scp.css */
/*
    THE MESSAGE LOG. Every value is a token from rk-tokens.css.

    Narrow-first: it sits in a tab on the job page and the customer page, and on a phone every row
    stacks rather than truncating an address or a reason. The rail is the status at a glance -
    green went, amber held back, red failed - and the stamp says it in words for anyone who does
    not read colour.
*/

.ml[b-ayohjg0rki] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
}

.ml__head[b-ayohjg0rki] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
}

.ml__title[b-ayohjg0rki] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.ml__acts[b-ayohjg0rki] {
    margin-left: auto;
}

.ml__list[b-ayohjg0rki] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ml__row[b-ayohjg0rki] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-sp-3) solid var(--rk-line);
    background: var(--rk-card);
    min-width: 0;
}

.ml__row--went[b-ayohjg0rki] {
    border-left-color: var(--rk-ok);
}

.ml__row--held[b-ayohjg0rki] {
    border-left-color: var(--rk-warn);
}

.ml__row--failed[b-ayohjg0rki] {
    border-left-color: var(--rk-danger);
}

.ml__top[b-ayohjg0rki] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-4) var(--rk-sp-8);
}

.ml__kind[b-ayohjg0rki] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.ml__chan[b-ayohjg0rki] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.ml__job[b-ayohjg0rki] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-accent-ink);
    text-decoration: none;
}

.ml__job:hover[b-ayohjg0rki] {
    text-decoration: underline;
}

.ml__when[b-ayohjg0rki] {
    margin-left: auto;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.ml__to[b-ayohjg0rki],
.ml__file[b-ayohjg0rki] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-2) var(--rk-sp-6);
    margin: 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
    min-width: 0;
}

.ml__label[b-ayohjg0rki] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.ml__addr[b-ayohjg0rki] {
    word-break: break-all;
}

.ml__subject[b-ayohjg0rki] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
    word-break: break-word;
}

.ml__body summary[b-ayohjg0rki] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-accent-ink);
    cursor: pointer;
}

/* The exact words, kept as sent - line breaks included, wrapped rather than scrolled. */
.ml__words[b-ayohjg0rki] {
    margin: var(--rk-sp-4) 0 0;
    padding: var(--rk-sp-6) var(--rk-sp-8);
    border: var(--rk-border-hair) solid var(--rk-line);
    background: var(--rk-paper);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
    white-space: pre-wrap;
    word-break: break-word;
}

.ml__why[b-ayohjg0rki] {
    margin: 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-warn-ink);
}

.ml__row--failed .ml__why[b-ayohjg0rki] {
    color: var(--rk-danger-ink);
}

.ml__meta[b-ayohjg0rki] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-2) var(--rk-sp-10);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
    word-break: break-all;
}

.ml__meta:empty[b-ayohjg0rki] {
    display: none;
}

.ml__file[b-ayohjg0rki] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.ml__pager[b-ayohjg0rki] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rk-sp-10);
}

.ml__pageword[b-ayohjg0rki] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}
/* /Components/Messaging/SendOutcome.razor.rz.scp.css */
/*
    ONE LINE PER RECIPIENT OF A SEND-NOW. Every value is a token from rk-tokens.css.
*/

.so[b-zrb0yb1f09] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
    margin-top: var(--rk-sp-8);
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-sp-3) solid var(--rk-steel);
    background: var(--rk-card);
}

.so__head[b-zrb0yb1f09] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.so__list[b-zrb0yb1f09] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.so__row[b-zrb0yb1f09] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-4) var(--rk-sp-8);
    font-size: var(--rk-fs-sm);
}

.so__chan[b-zrb0yb1f09] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.so__to[b-zrb0yb1f09] {
    color: var(--rk-ink);
    word-break: break-all;
}

.so__id[b-zrb0yb1f09] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    word-break: break-all;
}

.so__why[b-zrb0yb1f09] {
    flex-basis: 100%;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-warn-ink);
}

.so__file[b-zrb0yb1f09] {
    margin: 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}
/* /Components/Messaging/TrackingLinksCard.razor.rz.scp.css */
/*
    THE JOB'S TRACKING LINKS. Every value is a token from rk-tokens.css.
*/

.tl[b-m13f6825hf] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
}

.tl__hint[b-m13f6825hf] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.tl__email[b-m13f6825hf] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8);
}

.tl__to[b-m13f6825hf] {
    flex: 1 1 16rem;
}

.tl__actions[b-m13f6825hf],
.tl__made[b-m13f6825hf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
}

.tl__url[b-m13f6825hf] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    overflow-wrap: anywhere;
    color: var(--rk-ink);
}

.tl__list[b-m13f6825hf] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
}

.tl__row[b-m13f6825hf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    font-size: var(--rk-fs-sm);
}

.tl__what[b-m13f6825hf] {
    font-weight: var(--rk-fw-semibold);
}

.tl__when[b-m13f6825hf] {
    color: var(--rk-ink-soft);
}
/* /Components/Notes/RecordNotes.razor.rz.scp.css */
/*
    ONE RECORD'S NOTES - the same shape the document screen's notes wear, so a person moving
    between a quote and a part reads a note the same way: body, then who and when, then verbs.

    Tokens only - no raw colour, size, radius or shadow. The note sits on the card colour with
    ink text; nothing here pairs an ink ground with white text.
*/

.notes__lede[b-036mded9vz],
.notes__quiet[b-036mded9vz] {
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
    max-width: var(--rk-measure);
}

.notes[b-036mded9vz] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
}

.note[b-036mded9vz] {
    padding: var(--rk-sp-10);
    border-left: var(--rk-rail);
    background: var(--rk-card);
}

.note__body[b-036mded9vz] {
    margin: 0;
    white-space: pre-wrap;
    color: var(--rk-ink);
}

.note__who[b-036mded9vz] {
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

/* The instant inherits the row's size rather than .rk-num's global --rk-fs-lg, which would make
   the timestamp twice the size of the name beside it - the document screen's same trap. */
.note__when[b-036mded9vz] {
    font-size: var(--rk-fs-2xs);
}

.note--pinned[b-036mded9vz] {
    border-left-color: var(--rk-accent);
}

.note__acts[b-036mded9vz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
    margin-top: var(--rk-sp-8);
}

.note__compose[b-036mded9vz] {
    margin-top: var(--rk-sp-12);
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

/* The box alone - a host that lists the notes itself (the job page) draws no rule above it. */
.note__compose--bare[b-036mded9vz] {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Who sees it, the pin and the heading - on each row and under the box. */
.note__chips[b-036mded9vz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
    margin: var(--rk-sp-6) 0;
}

.note__hint[b-036mded9vz] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-6);
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-accent-ink);
}
/* /Components/Parts/PartGallery.razor.rz.scp.css */
/*
    THE PART'S PICTURES - a heading, a wrapping row of tiles, a stamp and a verb under each.

    🛑 NO TILE STYLING HERE, for PhotoStrip's reason: the tile is RkFileShot, which owns its
    frame, its aspect ratio and its failure state, and carries its own scope attribute. When a
    tile looks wrong, RkFileShot.razor.css is the file.

    Tokens only - no raw colour, size, radius or shadow. Nothing here paints a ground under
    text, so the ink-on-white trap cannot arise.
*/

.gallery[b-oopxhxib67] {
    display: block;
    padding: var(--rk-sp-4) 0 var(--rk-sp-12);
}

.gallery__head[b-oopxhxib67] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
    padding-bottom: var(--rk-sp-8);
}

.gallery__title[b-oopxhxib67] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.gallery__count[b-oopxhxib67] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.gallery__quiet[b-oopxhxib67] {
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
    max-width: var(--rk-measure);
}

/* A WRAPPING FLEX ROW, not a grid - RkFileShot sizes its own frame (PhotoStrip's rule). */
.gallery__grid[b-oopxhxib67] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-12);
    margin: 0 0 var(--rk-sp-8);
    padding: 0;
    list-style: none;
}

.gallery__cell[b-oopxhxib67] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
    min-width: 0;
    max-width: var(--rk-shot-w);
    padding: var(--rk-sp-4);
    border: var(--rk-border) solid transparent;
}

/* THE ONE THAT STANDS FOR THE PART. An accent edge, so it is findable at a glance in a row of
   pictures that all look alike. */
.gallery__cell--primary[b-oopxhxib67] {
    border-color: var(--rk-accent);
}

.gallery__under[b-oopxhxib67] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}
/* /Components/Parts/PartThumb.razor.rz.scp.css */
/*
    A PART'S PICTURE AT ROW SIZE. A fixed square so a column of them lines up whether or not a
    part has a picture, the picture CONTAINED rather than cropped - a catalog shot of a long
    part (a flue pipe, a thermostat wire spool) cropped square loses the part.

    Tokens only - no raw colour, size, radius or shadow. No ink ground with white text: this
    paints the card colour behind the picture and never text over a fill.
*/

.thumb[b-3h8yzc0x2j] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--rk-control-sm);
    height: var(--rk-control-sm);
    padding: 0;
    overflow: hidden;
    background: var(--rk-card);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    vertical-align: middle;
}

/* THE PART HAS NO PICTURE. Dashed and soft, so it reads as "none" rather than "broken". */
.thumb--empty[b-3h8yzc0x2j] {
    border-style: dashed;
    border-color: var(--rk-line);
}

.thumb--large[b-3h8yzc0x2j] {
    width: calc(var(--rk-control-sm) * 2);
    height: calc(var(--rk-control-sm) * 2);
    border-width: var(--rk-border);
}

.thumb--drawn[b-3h8yzc0x2j] {
    border-color: var(--rk-ink);
}

.thumb--button[b-3h8yzc0x2j] {
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.thumb--button:focus-visible[b-3h8yzc0x2j] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-border);
}

.thumb__img[b-3h8yzc0x2j] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* /Components/Payroll/EmployerCostsCard.razor.rz.scp.css */
/* The Employer costs card - tokens only. Desktop and phone: everything wraps, nothing scrolls sideways. */

.ec-loaded[b-bpdznoxqok] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--rk-sp-10);
    margin: 0 0 var(--rk-sp-14);
}

.ec-figure[b-bpdznoxqok] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border: 1px solid var(--rk-line);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-card);
}

.ec-figure--lead[b-bpdznoxqok] {
    border-color: var(--rk-accent);
}

.ec-figure__label[b-bpdznoxqok] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--rk-track-lg);
}

.ec-figure__value[b-bpdznoxqok] {
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-bold);
    color: var(--rk-ink);
}

.ec-figure__note[b-bpdznoxqok] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
}

.ec-lines[b-bpdznoxqok] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
}

.ec-line[b-bpdznoxqok] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-12);
    padding: var(--rk-sp-8) 0;
    border-bottom: 1px solid var(--rk-border-hair);
}

.ec-line--quiet[b-bpdznoxqok] {
    color: var(--rk-ink-soft);
}

.ec-line--struck .ec-line__charge[b-bpdznoxqok] {
    text-decoration: line-through;
    color: var(--rk-ink-soft);
}

.ec-line__what[b-bpdznoxqok] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    flex: 1 1 14rem;
    min-width: 0;
}

.ec-line__kind[b-bpdznoxqok] {
    font-weight: var(--rk-fw-semibold);
}

.ec-line__charge[b-bpdznoxqok] {
    color: var(--rk-ink);
}

.ec-line__dates[b-bpdznoxqok],
.ec-line__note[b-bpdznoxqok] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
    overflow-wrap: anywhere;
}

.ec-line__from[b-bpdznoxqok] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-8);
    flex-wrap: wrap;
}

.ec-line__week[b-bpdznoxqok] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.ec-line__act[b-bpdznoxqok] {
    display: flex;
    gap: var(--rk-sp-4);
    flex-wrap: wrap;
}

.ec-form[b-bpdznoxqok] {
    margin: var(--rk-sp-14) 0 0;
    padding: var(--rk-sp-12);
    border: 1px solid var(--rk-line);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-paper);
}

.ec-form__lead[b-bpdznoxqok] {
    margin: 0 0 var(--rk-sp-10);
}

.ec-form__grid[b-bpdznoxqok] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--rk-sp-10);
}

.ec-form__actions[b-bpdznoxqok] {
    display: flex;
    gap: var(--rk-sp-8);
    margin: var(--rk-sp-12) 0 0;
    flex-wrap: wrap;
}

.note[b-bpdznoxqok] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
    margin: var(--rk-sp-8) 0 0;
}
/* /Components/Payroll/PayrollDetailSheet.razor.rz.scp.css */
/* THE PROOF SHEET. Tokens only; the worksheet styles come from Payroll.razor.css. */



.sheet__head[b-ygtgqce3a8] {

    display: flex;

    flex-direction: column;

    gap: var(--rk-sp-8);

    margin-bottom: var(--rk-sp-12);

    padding: var(--rk-sp-10) var(--rk-sp-12);

    background: var(--rk-zebra);

    border-left: var(--rk-rail) solid var(--rk-steel);

}



.sheet__who[b-ygtgqce3a8] {

    margin-left: var(--rk-sp-8);

}



.sheet__gross[b-ygtgqce3a8] {

    font-weight: var(--rk-fw-bold);

}



.sheet__notes[b-ygtgqce3a8] {

    margin-top: var(--rk-sp-10);

}



.sheet__adj[b-ygtgqce3a8] {

    margin-top: var(--rk-sp-12);

}

/* THE TWO THAT MAY WRAP (2026-09-27): "Corrects the week of 13 September 2026" held its whole width and
   pushed the corrections table 20px past the sheet at 1440 (the zone column read AUSTI), and the
   adjustments line inherited the page's nowrap mono and ran off a phone. Everything else stays on
   one line - numbers never wrap. */
.sheet__corrects[b-ygtgqce3a8] {
    white-space: normal;
}

/* Scoped, this is (0,3,1) - it must outrank Payroll.razor.css's `.payroll ::deep .mono` (0,3,0). */
.sheet__head dd.sheet__wraps[b-ygtgqce3a8] {
    white-space: normal;
}
/* /Components/Pricing/PayerPricingProfile.razor.rz.scp.css */
/*
    THE PAYER'S PRICING PROFILE AT ONE SITE - one line under a payer card's facts, laid out like the
    tax class line beside it.
*/

.ppp[b-kc7o6h3nhk] {
    display: grid;
    grid-template-columns: minmax(calc(var(--rk-sp-16) * 8), max-content) minmax(0, 1fr);
    gap: var(--rk-sp-4) var(--rk-sp-14);
    margin-top: var(--rk-sp-6);
    padding-top: var(--rk-sp-6);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.ppp__label[b-kc7o6h3nhk] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.ppp__body[b-kc7o6h3nhk] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-2) var(--rk-sp-8);
    min-width: 0;
}

.ppp__value[b-kc7o6h3nhk] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.ppp__how[b-kc7o6h3nhk] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.ppp__ask[b-kc7o6h3nhk] {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-ink);
    text-decoration: underline;
    cursor: pointer;
    min-height: var(--rk-control-xs);
}

.ppp__ask:hover[b-kc7o6h3nhk] {
    text-decoration: none;
}

.ppp__edit[b-kc7o6h3nhk] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8);
}

.ppp__edit[b-kc7o6h3nhk]  .rk-field {
    margin-bottom: 0;
}
/* /Components/Pricing/PricingProfileCard.razor.rz.scp.css */
/* The pricing profile card - tokens only. */

.facts[b-ub4wy9lb2k] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--rk-sp-4) var(--rk-sp-16);
    margin: 0 0 var(--rk-sp-10);
}

.facts dt[b-ub4wy9lb2k] {
    color: var(--rk-ink-soft);
}

.facts dd[b-ub4wy9lb2k] {
    margin: 0;
    display: grid;
    gap: var(--rk-sp-2);
}

.sub[b-ub4wy9lb2k] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
}

.pick[b-ub4wy9lb2k] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
}

.note[b-ub4wy9lb2k] {
    margin: 0;
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
}
/* /Components/Pricing/ProfileChargeTerms.razor.rz.scp.css */
/* A profile's charge terms - tokens only. */

.section[b-g0it4tf8u8] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    margin: var(--rk-sp-16) 0 var(--rk-sp-8);
}

.lede[b-g0it4tf8u8] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
    margin: 0 0 var(--rk-sp-8);
}

.grid[b-g0it4tf8u8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0 var(--rk-sp-12);
    align-items: end;
}

.actions[b-g0it4tf8u8] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--rk-sp-8);
}
/* /Components/Pricing/ProfileRates.razor.rz.scp.css */
/* A profile's hourly rates - tokens only. */

.section[b-6ao5fosv9j] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    margin: var(--rk-sp-16) 0 var(--rk-sp-8);
}

.grid[b-6ao5fosv9j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0 var(--rk-sp-12);
    align-items: end;
}

.go[b-6ao5fosv9j] {
    padding-bottom: var(--rk-sp-12);
}

.actions[b-6ao5fosv9j] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--rk-sp-8);
}
/* /Components/Pricing/SubcontractorCard.razor.rz.scp.css */
/* The subcontractor card - tokens only. */

.facts[b-8rdx8ymw84] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--rk-sp-4) var(--rk-sp-16);
    margin: 0 0 var(--rk-sp-10);
}

.facts dt[b-8rdx8ymw84] {
    color: var(--rk-ink-soft);
}

.facts dd[b-8rdx8ymw84] {
    margin: 0;
}

.actions[b-8rdx8ymw84] {
    display: flex;
    justify-content: flex-end;
    gap: var(--rk-sp-8);
}
/* /Components/Proof/JobProof.razor.rz.scp.css */
/*
    ONE JOB'S PROOF, BY PERSON. Layout only - every value is a token from rk-tokens.css.

    Built to sit in a tab on the job page or the board drawer, so it is narrow-first: every row
    stacks rather than truncating a procedure's name, and every run is a real <a href> to its
    story so a keyboard reaches it and middle-click opens it beside the board.
*/

.jp[b-8hoomo0zu2] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.jp__head[b-8hoomo0zu2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
}

.jp__title[b-8hoomo0zu2] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.jp__acts[b-8hoomo0zu2] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rk-sp-10);
    margin-left: auto;
}

.jp__doc[b-8hoomo0zu2] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
    text-decoration: none;
}

.jp__doc:hover[b-8hoomo0zu2] {
    text-decoration: underline;
}

.jp__doc:focus-visible[b-8hoomo0zu2] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

/* -------------------------------------------------------------------------- the totals */

.jp__figs[b-8hoomo0zu2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-12) var(--rk-sp-20);
    margin: 0;
}

.jp__figs dt[b-8hoomo0zu2] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.jp__figs dd[b-8hoomo0zu2] {
    margin: 0;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xl);
    color: var(--rk-ink);
}

/* -------------------------------------------------------------------------- one person */

.jp__people[b-8hoomo0zu2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
}

.jp__person[b-8hoomo0zu2] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-10) var(--rk-sp-12);
    background: var(--rk-card);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-inline-start: var(--rk-rail) solid var(--rk-accent);
    border-radius: var(--rk-radius-xs);
}

/* Runs the record files under nobody - a steel rail, because it is not a person. */
.jp__person--other[b-8hoomo0zu2] {
    border-inline-start-color: var(--rk-steel);
}

.jp__who[b-8hoomo0zu2] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
}

.jp__name[b-8hoomo0zu2] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.jp__code[b-8hoomo0zu2] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-steel);
}

.jp__tally[b-8hoomo0zu2] {
    margin-left: auto;
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.jp__runs[b-8hoomo0zu2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
}

.jp__run[b-8hoomo0zu2] {
    display: flex;
    align-items: flex-start;
    gap: var(--rk-sp-10);
    min-height: var(--rk-tap);
    padding: var(--rk-sp-8) var(--rk-sp-10);
    background: var(--rk-paper);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-xs);
    color: var(--rk-ink);
    text-decoration: none;
}

.jp__run:hover[b-8hoomo0zu2] {
    background: var(--rk-hover-ghost);
    border-color: var(--rk-line-hard);
}

.jp__run:focus-visible[b-8hoomo0zu2] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.jp__mark[b-8hoomo0zu2] {
    flex: 0 0 auto;
    padding-top: var(--rk-sp-1);
}

.jp__body[b-8hoomo0zu2] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    min-width: 0;
}

.jp__proc[b-8hoomo0zu2] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

.jp__meta[b-8hoomo0zu2] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.jp__short[b-8hoomo0zu2],
.jp__foot[b-8hoomo0zu2] {
    margin: 0;
    max-inline-size: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}
/* /Components/Proof/ProofBrowser.razor.rz.scp.css */
/*
    THE PROOF BROWSER. Layout only - every value is a token from rk-tokens.css.

    Every row is a real <a href>, not a div with a click handler: a keyboard reaches it, a
    screen reader announces it, middle-click opens a job in a new tab, and the whole row is the
    target because on a phone a link inside a row is a miss waiting to happen.

    ⚠️ ::deep for any kit class. A Class passed to a kit control lands on THAT component's
    scoped element, and a bare rule here would match nothing.
*/

.pb[b-bsxa633203] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.pb__bar[b-bsxa633203] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
    margin: var(--rk-sp-12) 0;
}

/* --------------------------------------------------------------------------- breadcrumb */

.pb__crumbs[b-bsxa633203] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-2);
    margin-bottom: var(--rk-sp-10);
}

.pb__crumb[b-bsxa633203] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.pb__crumb:hover[b-bsxa633203] {
    color: var(--rk-accent-ink);
}

.pb__crumb:focus-visible[b-bsxa633203] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.pb__crumb--here[b-bsxa633203] {
    color: var(--rk-ink);
    text-transform: none;
    letter-spacing: normal;
}

.pb__sep[b-bsxa633203] {
    margin: 0 var(--rk-sp-5);
    color: var(--rk-line-hard);
}

/* ---------------------------------------------------------------- the totals for a scope */

.pb__scope[b-bsxa633203] {
    padding: var(--rk-sp-12) var(--rk-sp-14);
    margin-bottom: var(--rk-sp-12);
    background: var(--rk-card);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-inline-start: var(--rk-rail) solid var(--rk-accent);
    border-radius: var(--rk-radius-xs);
}

.pb__kind[b-bsxa633203] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.pb__name[b-bsxa633203] {
    margin: var(--rk-sp-2) 0 var(--rk-sp-10);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xl);
    line-height: var(--rk-lh-tight);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.pb__figs[b-bsxa633203] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-12) var(--rk-sp-20);
    margin: 0;
}

.pb__figs dt[b-bsxa633203] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.pb__figs dd[b-bsxa633203] {
    margin: 0;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xl);
    color: var(--rk-ink);
}

/* The instant is long, so it reads at body size rather than as a headline figure. */
.pb__figs .pb__fig-when dd[b-bsxa633203] {
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    padding-top: var(--rk-sp-4);
}

.pb__quiet[b-bsxa633203] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

/* ------------------------------------------------------------------------ the list head */

.pb__head[b-bsxa633203] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-10);
    margin: var(--rk-sp-12) 0 var(--rk-sp-8);
}

.pb__title[b-bsxa633203] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.pb__total[b-bsxa633203] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.pb__search[b-bsxa633203] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8);
    margin-bottom: var(--rk-sp-10);
    max-inline-size: var(--rk-measure);
}

.pb__search[b-bsxa633203]  .rk-field {
    flex: 1 1 16rem;
}

.pb__note[b-bsxa633203] {
    margin: var(--rk-sp-8) 0;
    padding: var(--rk-sp-6) var(--rk-sp-10);
    max-inline-size: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    border-inline-start: var(--rk-rail) solid var(--rk-line-hard);
}

/* ----------------------------------------------------------------------------- the rows */

.pb__list[b-bsxa633203] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
}

.pb__row[b-bsxa633203] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "main   when go"
        "counts when go";
    align-items: center;
    column-gap: var(--rk-sp-12);
    row-gap: var(--rk-sp-4);
    min-height: var(--rk-tap);
    padding: var(--rk-sp-10) var(--rk-sp-12);
    background: var(--rk-card);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-xs);
    color: var(--rk-ink);
    text-decoration: none;
}

.pb__row:hover[b-bsxa633203] {
    background: var(--rk-hover-ghost);
    border-color: var(--rk-line-hard);
}

.pb__row:focus-visible[b-bsxa633203] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.pb__main[b-bsxa633203] {
    grid-area: main;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
    min-width: 0;
}

.pb__label[b-bsxa633203] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-semibold);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

.pb__code[b-bsxa633203] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-steel);
}

.pb__counts[b-bsxa633203] {
    grid-area: counts;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4) var(--rk-sp-12);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.pb__counts b[b-bsxa633203] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.pb__when[b-bsxa633203] {
    grid-area: when;
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
    white-space: nowrap;
}

.pb__go[b-bsxa633203] {
    grid-area: go;
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink-soft);
}

.pb__row:hover .pb__go[b-bsxa633203] {
    color: var(--rk-accent-ink);
}

.pb__more[b-bsxa633203] {
    display: flex;
    justify-content: center;
    margin-top: var(--rk-sp-8);
}

/* A phone: the date drops under the counts rather than squeezing the name. */
@media (max-width: 640px) {
    .pb__row[b-bsxa633203] {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "main   go"
            "counts go"
            "when   go";
    }
}
/* /Components/Properties/RecordProperties.razor.rz.scp.css */
/*
    THE CUSTOM-FIELDS SECTION, ON EVERY RECORD SCREEN.

    Tokens only - no raw colour, size, radius or shadow. Nothing drawn here comes out of a
    customer's database carrying its own colour, so there is not even an inline-style exception
    the way the board has one.

    ⚠️ NO PAIRING OF background: var(--rk-ink) WITH color: var(--rk-white). The dark theme
    resolves both to the same paper colour and the text disappears at a 1:1 contrast ratio - it
    shipped invisible once. There is no permanent dark chrome in this component at all, so the
    question does not arise; it is written down so the next edit does not reintroduce it.

    🛑 AND THE WHOLE STYLESHEET IS BUILT ROUND ONE CONSTRAINT: THIS SECTION APPEARS ON EVERY
    RECORD SCREEN IN THE PRODUCT AND IS USUALLY EMPTY. So it has no card, no border and no
    background of its own - it is a heading and its content, sitting in whatever the host
    already drew. A bordered box repeated on ten screens with nothing in it is how a feature
    gets hated, and decision 48's measure of success is a customer adding a field on a Tuesday
    and seeing it on the panel - not a panel announcing itself when there is nothing to say.

    Nothing here styles a kit control and there is no ::deep. The inputs are RkTextInput,
    RkTextArea, RkSelect and RkField, which carry their own scope attribute and own their own
    spacing; reaching into them from here would be styling a component that owns none of these
    elements.
*/

/* ---------------------------------------------------------------------------------------
   THE HEADING LINE. Title on the left, the counts and the refresh spinner trailing it - the
   same shape the centers use above a tab body, so a reader moving between sections does not
   have to relearn where the title sits.
   --------------------------------------------------------------------------------------- */
.props[b-ovilwa19i8] {
    display: block;
    padding: var(--rk-sp-12) 0 var(--rk-sp-4);
}

.props__head[b-ovilwa19i8] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
    padding-bottom: var(--rk-sp-6);
}

.props__title[b-ovilwa19i8] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.props__count[b-ovilwa19i8] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-steel);
}

/* ---------------------------------------------------------------------------------------
   THE QUIET LINE - the empty state, and the first paint.

   One sentence at the body size, in the muted ink, with an inline text link after it. No
   border, no background, no icon. See the banner: this is the state most records are in.
   --------------------------------------------------------------------------------------- */
.props__quiet[b-ovilwa19i8] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
}

.props__link[b-ovilwa19i8] {
    margin-left: var(--rk-sp-4);
    color: var(--rk-accent-ink);
    text-decoration: underline;
}

/*
    ⚠️ --rk-accent-ink IS THE ONLY ACCENT THAT MAY CARRY SMALL TEXT, IN EITHER STATE. The raw
    --rk-accent measures 3.5:1 on a card in light and this is small text, which has a 4.5:1
    floor - DesignSystemTests gates that and it caught this line. --rk-accent-deep is no better
    in the other direction: it is #c9561a in dark, a DARKER orange on dark paper, because it is
    a pressed-edge colour rather than a text one. accent-ink is the token that flips.
*/
.props__link:hover[b-ovilwa19i8],
.props__link:focus-visible[b-ovilwa19i8] {
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   A GROUP - FLAT. A label and an ordering, never a nesting level (decision 48: "essentially
   flat, with groups... do not build a tree"). So there is no indent rule anywhere below, and
   adding one would be the first step to a tree the schema cannot even hold.
   --------------------------------------------------------------------------------------- */
.props__group + .props__group[b-ovilwa19i8] {
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.props__grouphead[b-ovilwa19i8] {
    margin: 0 0 var(--rk-sp-2);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.props__groupnote[b-ovilwa19i8] {
    margin: 0 0 var(--rk-sp-8);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
}

/* ---------------------------------------------------------------------------------------
   THE FIELDS.

   One column on a phone, two where there is room, three on a wide monitor - the SAME grid and
   the SAME breakpoints as the install-a-unit madlib and the sites create card, because they
   are the same thing: a column of short labelled fields. Fifteen custom fields down one column
   on a 1600px screen is a scroll for no reason.

   ⚠️ auto-fit with a rem minimum was the obvious alternative and is refused: it hard-codes a
   size, which the house rule forbids outside the token file, and it would disagree with the
   three surrounding grids about where the layout turns.
   --------------------------------------------------------------------------------------- */
.props__grid[b-ovilwa19i8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-10) var(--rk-sp-16);
    align-items: start;
}

@media (min-width: 720px) {
    .props__grid[b-ovilwa19i8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .props__grid[b-ovilwa19i8] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.pfield[b-ovilwa19i8] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    min-width: 0;
}

/* ---------------------------------------------------------------------------------------
   A FIELD THAT IS HISTORY RATHER THAN SOMETHING TO FILL IN - retired, or answered under an
   equipment type the asset has since left.

   ⚠️ IT IS MARKED, NOT DIMMED, AND THAT DISTINCTION IS THE WHOLE POINT. The reason
   app.PropertyPanel returns these rows at all is that the declaration is the only thing that
   explains the reading it collected - so an opacity rule over the row would recreate the
   problem in a subtler form: the number still there, still unexplained, and now also hard to
   read. The disabled control the kit already draws says "not yours to change"; the line under
   it says why.
   --------------------------------------------------------------------------------------- */
.pfield--past[b-ovilwa19i8] {
    /* The label and the note carry the "this is history" signal; the VALUE keeps full ink.
       Fading the number is the one thing that would undo the reason these rows are returned
       at all. */
    color: var(--rk-steel);
}

.pfield__past[b-ovilwa19i8] {
    margin: 0;
    font-size: var(--rk-fs-3xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
}

.pfield__unknown[b-ovilwa19i8] {
    margin: 0;
    padding: var(--rk-sp-6) var(--rk-sp-8);
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
    background: var(--rk-field);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-xs);
}

/* ---------------------------------------------------------------------------------------
   THE PER-FIELD ACTIONS. One field saves on its own, so its buttons live on its own row and
   never in a panel-wide footer - a half-saved panel behind one button would be worse than
   five saves that each succeed or fail visibly where they happened.
   --------------------------------------------------------------------------------------- */
.pfield__acts[b-ovilwa19i8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
    min-height: var(--rk-control-xs);
}

/* ── The read view and its pencil (Kirk 2026-11-11) ───────────────────────── */

.props__pencil[b-ovilwa19i8] {
    margin-left: auto;
    padding: 4px 10px;
    background: var(--rk-paper);
    border: 1px solid var(--rk-line-hard, var(--rk-line));
    font-family: var(--rk-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--rk-ink);
    cursor: pointer;
}

.props__facts[b-ovilwa19i8] {
    display: grid;
    grid-template-columns: minmax(120px, 34%) 1fr;
    gap: 4px 14px;
    margin: 0;
}

.props__facts dt[b-ovilwa19i8] {
    font-family: var(--rk-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rk-steel);
}

.props__facts dd[b-ovilwa19i8] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
}
/* /Components/Reports/AgingPanel.razor.rz.scp.css */
/*
    AN AGING. Tokens only, layout only - the tax report's worksheet idiom (Components/Tax), so the
    money reports read as one family: money right-aligned and mono, the total on a heavy rule.
    The reconciliation is a ruled box whose left rail carries its state (ok / warn / danger), the
    kit's card idiom, never a tinted fill with ink on white.
*/

.aging[b-v2qaak7nax] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.aging__head[b-v2qaak7nax] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    min-width: 0;
}

.aging__title[b-v2qaak7nax] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.aging__lede[b-v2qaak7nax] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

/* ---------------------------------------------------------------------------------------
   THE BAR
   --------------------------------------------------------------------------------------- */

.bar[b-v2qaak7nax] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    padding: var(--rk-sp-4) 0 var(--rk-sp-8);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
}

.bar[b-v2qaak7nax]  .rk-field {
    margin-bottom: 0;
}

.bar[b-v2qaak7nax]  .bar__date {
    width: calc(var(--rk-blank-max) * 0.8);
}

.bar[b-v2qaak7nax]  .bar__shape {
    width: var(--rk-blank-max);
    max-width: 100%;
}

/* A link that looks like the kit's ghost button - an anchor, because a download IS a link. */
.dl[b-v2qaak7nax] {
    display: inline-flex;
    align-items: center;
    min-height: var(--rk-control-sm);
    padding: 0 var(--rk-sp-12);
    margin-left: auto;
    border: var(--rk-border) solid var(--rk-ink);
    border-radius: var(--rk-radius-xs);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--rk-ink);
    background: var(--rk-card);
}

.dl:hover[b-v2qaak7nax] {
    background: var(--rk-hover-ghost);
}

.dl:focus-visible[b-v2qaak7nax] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.due[b-v2qaak7nax] {
    margin: 0;
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border-left: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-zebra);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.4);
}

.period[b-v2qaak7nax] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   THE WORKSHEET
   --------------------------------------------------------------------------------------- */

.tt-wrap[b-v2qaak7nax] {
    max-width: 100%;
    overflow-x: auto;
}

.tt[b-v2qaak7nax] {
    width: 100%;
    border-collapse: collapse;
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line);
}

.tt th[b-v2qaak7nax],
.tt td[b-v2qaak7nax] {
    padding: var(--rk-sp-6) var(--rk-sp-10);
    text-align: left;
    vertical-align: top;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.tt thead th[b-v2qaak7nax] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    border-bottom: var(--rk-border) solid var(--rk-line-hard);
    white-space: nowrap;
}

.tt .n[b-v2qaak7nax] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tt tbody td[b-v2qaak7nax] {
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

/* A day never breaks across lines ("15 Aug / 26" on a phone). */
.tt__date[b-v2qaak7nax] {
    white-space: nowrap;
}

.tt__party[b-v2qaak7nax] {
    min-width: calc(var(--rk-blank-max) * 0.9);
}

.tt__name[b-v2qaak7nax] {
    display: block;
    font-weight: var(--rk-fw-semibold);
}

.tt__sub[b-v2qaak7nax] {
    display: block;
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.tt__late[b-v2qaak7nax] {
    color: var(--rk-warn-ink);
    font-weight: var(--rk-fw-semibold);
}

/* A document number at the table's size - .rk-num alone is large. */
.tt__num[b-v2qaak7nax],
.tt__link[b-v2qaak7nax] {
    font-size: var(--rk-fs-sm);
}

.tt__link[b-v2qaak7nax] {
    color: var(--rk-accent-ink);
    font-weight: var(--rk-fw-semibold);
    text-decoration: none;
}

.tt__link:hover[b-v2qaak7nax],
.tt__link:focus-visible[b-v2qaak7nax] {
    text-decoration: underline;
}

.tt__bal[b-v2qaak7nax] {
    font-weight: var(--rk-fw-semibold);
}

/* A credit reads as a credit - quieter, never a colour of its own that could be mistaken for a warning. */
.tt__credit td[b-v2qaak7nax] {
    color: var(--rk-ink-soft);
    font-style: italic;
}

.tt__total td[b-v2qaak7nax] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    border-top: var(--rk-rail) solid var(--rk-ink);
}

.note[b-v2qaak7nax] {
    margin: 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.4);
}

/* ---------------------------------------------------------------------------------------
   THE RECONCILIATION
   --------------------------------------------------------------------------------------- */

.rec[b-v2qaak7nax] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-12) var(--rk-sp-14);
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-line-hard);
}

.rec--ok[b-v2qaak7nax] {
    border-left-color: var(--rk-ok);
}

.rec--warn[b-v2qaak7nax] {
    border-left-color: var(--rk-warn);
}

.rec--danger[b-v2qaak7nax] {
    border-left-color: var(--rk-danger);
}

.rec__head[b-v2qaak7nax] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-6);
}

.rec__title[b-v2qaak7nax] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.rec__summary[b-v2qaak7nax] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
    max-width: calc(var(--rk-measure) * 1.4);
}

.rec__sums[b-v2qaak7nax] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8) var(--rk-sp-24);
    margin: 0;
}

.rec__sums div[b-v2qaak7nax] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
}

.rec__sums dt[b-v2qaak7nax] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.rec__sums dd[b-v2qaak7nax] {
    margin: 0;
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.rec__diff dd[b-v2qaak7nax] {
    font-weight: var(--rk-fw-bold);
}

.rec__lines[b-v2qaak7nax] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.rec__line[b-v2qaak7nax] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    padding-top: var(--rk-sp-8);
}

.rec__line-head[b-v2qaak7nax] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--rk-sp-8);
}

.rec__label[b-v2qaak7nax] {
    font-weight: var(--rk-fw-semibold);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.rec__amount[b-v2qaak7nax] {
    font-weight: var(--rk-fw-semibold);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.rec__why[b-v2qaak7nax] {
    margin: 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.4);
}

/* The count and the numbers behind a reason - mono, but at the explanation's size (.rk-num alone is large). */
.rec__count[b-v2qaak7nax] {
    margin: 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}
/* /Components/Reports/InventoryValuationPanel.razor.rz.scp.css */
/*
    THE INVENTORY VALUATION (N4 M9). Tokens only, layout only - the agings' idiom (AgingPanel.razor.css),
    so the money reports read as one family: the reconciliation a ruled box whose left rail carries its
    state, money right-aligned and mono. The three tables are the kit's own RkTable.
*/

.inv[b-g3wb570xwa] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.inv__head[b-g3wb570xwa] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    min-width: 0;
}

.inv__title[b-g3wb570xwa] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.inv__lede[b-g3wb570xwa],
.inv__method[b-g3wb570xwa] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.bar[b-g3wb570xwa] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    padding: var(--rk-sp-4) 0 var(--rk-sp-8);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
}

.bar[b-g3wb570xwa]  .rk-field {
    margin-bottom: 0;
}

.bar[b-g3wb570xwa]  .bar__date {
    width: calc(var(--rk-blank-max) * 0.8);
}

/* ---------------------------------------------------------------------------------------
   THE RECONCILIATION - the agings' box
   --------------------------------------------------------------------------------------- */

.rec[b-g3wb570xwa] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-12) var(--rk-sp-14);
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-steel);
}

.rec--ok[b-g3wb570xwa] {
    border-left-color: var(--rk-ok);
}

.rec--warn[b-g3wb570xwa] {
    border-left-color: var(--rk-warn);
}

.rec--danger[b-g3wb570xwa] {
    border-left-color: var(--rk-danger);
}

.rec__head[b-g3wb570xwa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-8);
    flex-wrap: wrap;
}

.rec__title[b-g3wb570xwa] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.rec__summary[b-g3wb570xwa] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.rec__sums[b-g3wb570xwa] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8) var(--rk-sp-20);
    margin: 0;
}

.rec__sums div[b-g3wb570xwa] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
}

.rec__sums dt[b-g3wb570xwa] {
    font-size: var(--rk-fs-2xs);
    text-transform: uppercase;
    letter-spacing: var(--rk-track-xl);
    color: var(--rk-ink-soft);
}

.rec__sums dd[b-g3wb570xwa] {
    margin: 0;
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-bold);
    color: var(--rk-ink);
}

.rec__line[b-g3wb570xwa] {
    padding-top: var(--rk-sp-8);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.rec__line-head[b-g3wb570xwa] {
    display: flex;
    justify-content: space-between;
    gap: var(--rk-sp-8);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.rec__why[b-g3wb570xwa],
.rec__count[b-g3wb570xwa] {
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}
/* /Components/Runs/JobRunsPanel.razor.rz.scp.css */
/*
    THE PROCEDURES STILL OPEN ON A JOB - a short list in a rail card.

    Each row: what the procedure is, how much it has captured and when, who is on it; then its
    state stamp and the one button. The words wrap and the actions do not, so a long procedure
    name pushes the row taller rather than squeezing the button off the card.
*/

.jobruns[b-gwogs2xm7h] {
    display: block;
}

.jobruns__list[b-gwogs2xm7h] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.jobruns__row[b-gwogs2xm7h] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-12);
    padding: var(--rk-sp-10) 0;
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.jobruns__row:first-child[b-gwogs2xm7h] {
    border-top: 0;
    padding-top: 0;
}

.jobruns__row:last-child[b-gwogs2xm7h] {
    padding-bottom: 0;
}

/* The row the drawer is holding - marked on the edge, the way a card's rail marks its state. */
.jobruns__row.is-held[b-gwogs2xm7h] {
    padding-left: var(--rk-sp-10);
    border-left: var(--rk-rail) solid var(--rk-accent);
}

.jobruns__words[b-gwogs2xm7h] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    flex: 1 1 auto;
    min-width: 0;
}

.jobruns__name[b-gwogs2xm7h] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.jobruns__progress[b-gwogs2xm7h] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.jobruns__who[b-gwogs2xm7h] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-steel);
}

.jobruns__acts[b-gwogs2xm7h] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--rk-sp-6);
    flex: 0 0 auto;
}
/* /Components/Runs/RunDrawer.razor.rz.scp.css */
/*
    THE SLIDE-IN RUNNER.

    A right-hand panel from the top of the window, the same geometry as the board's job drawer -
    but NOT a dialog: no scrim, because the person works on the page beside it.

    THREE WIDTHS, ONE MARKUP.
    - From 1280px the panel DOCKS: MainLayout gives the shell a right padding exactly this wide
      (the shell--run class), so the app bar and the page reflow beside the panel and nothing
      is covered. That is the width a dispatcher's desk runs at, and where "do it there, then
      say how it went" is two things on screen at once.
    - Below that it OVERLAYS the right of the page, and on a phone it is the whole screen. So a
      page the drawer opens for its own step would be opened underneath it; is-aside hides the
      panel there and the tab brings it back. Docked, is-aside changes nothing.
    - Tucked away (is-collapsed) it is hidden at every width and only the tab remains. The panel
      stays MOUNTED either way, so RkRun keeps its instance and its half-typed answer.

    THE LADDER. The panel is band 3, on the scrim rung, and it comes AFTER the page in the DOM:
    it may cover the chrome where it overlays (the board drawer does the same), a page's own
    modal dialog still lands on top of it, and it is never in the 11-39 range rk-tokens.css
    calls a bug. The tab is band 1 - one under the bar - because it is page furniture: the app
    bar and its open menus paint over it, never the other way round.

    Every value is a token. The two numbers that are not - the 1280px breakpoint and 50% - are
    the kit's own breakpoint and a centring, not sizes.
*/

.rundrawer[b-u8j49bzj33] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--rk-z-scrim);
    display: flex;
    flex-direction: column;
    width: min(100%, var(--rk-dialog-w));
    background: var(--rk-paper);
    color: var(--rk-ink);
    border-left: var(--rk-border-card) solid var(--rk-line-hard);
    box-shadow: var(--rk-shadow-float);
}

.rundrawer.is-collapsed[b-u8j49bzj33] {
    display: none;
}

@media (max-width: 1279px) {
    .rundrawer.is-aside[b-u8j49bzj33] {
        display: none;
    }
}

/* ------------------------------------------------------------------ THE HEAD */

.rundrawer__head[b-u8j49bzj33] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-10) var(--rk-sp-12) var(--rk-sp-10) var(--rk-sp-16);
    padding-top: calc(var(--rk-sp-10) + env(safe-area-inset-top));

    /* Permanent dark chrome. NOT ink + white - in the dark theme those resolve to the same
       value and the head would vanish. */
    background: var(--rk-chrome-bg);
    color: var(--rk-chrome-ink);
    border-bottom: var(--rk-btn-edge) solid var(--rk-accent);
}

.rundrawer__id[b-u8j49bzj33] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    flex: 1 1 auto;
    min-width: 0;
}

.rundrawer__kicker[b-u8j49bzj33] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-chrome-mute);
}

.rundrawer__title[b-u8j49bzj33] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-2xs);
    line-height: var(--rk-lh-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rundrawer__btn[b-u8j49bzj33] {
    flex: 0 0 auto;
    width: var(--rk-control-sm);
    height: var(--rk-control-sm);
    border: var(--rk-border-hair) solid var(--rk-chrome-mute);
    border-radius: var(--rk-radius-0);
    background: transparent;
    color: var(--rk-chrome-ink);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-flat);
    cursor: pointer;
}

.rundrawer__btn:hover[b-u8j49bzj33] {
    border-color: var(--rk-accent);
    color: var(--rk-accent-ink);
}

.rundrawer__btn:focus-visible[b-u8j49bzj33] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

/* ------------------------------------------------------------------ THE BODY */

/*
    THE SCROLL CONTAINER. RkRun's head and its two buttons are position:sticky, and sticky
    sticks to the nearest scrolling ancestor - so with the body as the scroller the progress bar
    stays at the top of the panel and Back / Next at its bottom, exactly as on the handset.
*/
.rundrawer__body[b-u8j49bzj33] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.rundrawer__wait[b-u8j49bzj33] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    padding: var(--rk-sp-16);
}

/*
    THE QUESTION IS SIZED FOR A ROOF, AND THIS IS A SIDE PANEL. RkRun's heading is the largest
    type in the kit so it survives sunlight and gloves; beside the estimate at 480px it would
    wrap a four-word question over three lines. One size down, here only - the handset keeps
    its own.
*/
.rundrawer__body[b-u8j49bzj33]  .rk-run__ask {
    font-size: var(--rk-fs-2xl);
}

/* ------------------------------------------------------------------ THE TAB */

/*
    Right edge, just under the app bar (the bar is two control rows plus its edge on a desk and
    one row on a phone; three rows clears both), clear of the toasts along the bottom. It reads
    top to bottom so it can name the procedure without taking the page's width.
*/
.runtab[b-u8j49bzj33] {
    position: fixed;
    right: 0;
    top: calc(var(--rk-control-h) * 3);
    z-index: calc(var(--rk-z-bar) - 1);
    display: flex;
    align-items: center;
    gap: var(--rk-sp-8);
    max-height: calc(var(--rk-sheet-h) / 2);
    padding: var(--rk-sp-12) var(--rk-sp-8);
    writing-mode: vertical-rl;
    background: var(--rk-chrome-bg);
    color: var(--rk-chrome-ink);
    border: var(--rk-border-hair) solid var(--rk-chrome-mute);
    border-right: 0;
    border-left: var(--rk-btn-edge) solid var(--rk-accent);
    border-radius: var(--rk-radius-0);
    box-shadow: var(--rk-shadow-card);
    cursor: pointer;
    overflow: hidden;
}

.runtab:hover[b-u8j49bzj33] {
    border-left-color: var(--rk-accent-deep);
}

.runtab:focus-visible[b-u8j49bzj33] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.runtab--none[b-u8j49bzj33],
.runtab--aside[b-u8j49bzj33] {
    display: none;
}

@media (max-width: 1279px) {
    .runtab--aside[b-u8j49bzj33] {
        display: flex;
    }
}

.runtab__word[b-u8j49bzj33] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-chrome-mute);
}

.runtab__title[b-u8j49bzj33] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-2xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
    .runtab[b-u8j49bzj33] {
        transition: border-color var(--rk-dur-ui) var(--rk-ease);
    }
}
/* /Components/Sales/InvoicePayments.razor.rz.scp.css */
/*
    AN INVOICE'S PAYMENTS.

    Tokens only - no raw colour, size, radius or shadow. Every class here lands on an element
    this component owns; a Class handed to a kit control would carry THAT control's scope and a
    bare rule here would match nothing, so none is.

    ⚠️ NOT THE GLOBAL rk-num UTILITY ON THE FIGURES. It carries font-size: --rk-fs-lg, which the
    document center's own delivery log found blows a figure up to twice the row around it.
    pay__fig keeps tabular figures at the size of the text it sits in.
*/

/* ---------------------------------------------------------------------------------------
   THE THREE NUMBERS, and the stamp beside them when the balance is nothing.
   --------------------------------------------------------------------------------------- */
.pay__head[b-3icdp43mg5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-12) var(--rk-sp-20);
    margin-bottom: var(--rk-sp-12);
}

.pay__sums[b-3icdp43mg5] {
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--rk-sp-4) var(--rk-sp-16);
    margin: 0;
}

.pay__sums dt[b-3icdp43mg5] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: center;
}

.pay__sums dd[b-3icdp43mg5] {
    margin: 0;
    text-align: right;
    color: var(--rk-ink);
}

/* The number a clerk is asked about on the phone - one step louder than the two above it. */
.pay__due[b-3icdp43mg5] {
    padding-top: var(--rk-sp-6);
    border-top: var(--rk-border-hair) solid var(--rk-line);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-semibold);
}

.pay__sums dt.pay__due[b-3icdp43mg5] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink);
}

.pay__fig[b-3icdp43mg5] {
    font-family: var(--rk-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pay__note[b-3icdp43mg5] {
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE APPLICATIONS.
   --------------------------------------------------------------------------------------- */
.pay__when[b-3icdp43mg5],
.pay__ref[b-3icdp43mg5] {
    white-space: nowrap;
}

.pay__method[b-3icdp43mg5] {
    margin-right: var(--rk-sp-6);
}

/* Why a payment was voided, kept forever and shown under its stamp. */
.pay__why[b-3icdp43mg5] {
    display: block;
    margin-top: var(--rk-sp-2);
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.pay__amount[b-3icdp43mg5] {
    text-align: right;
}

/* The slice of a bigger check that landed here - "of a 2,000.00 payment". */
.pay__part[b-3icdp43mg5] {
    display: block;
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

/*
    A VOIDED PAYMENT'S APPLICATION HAPPENED AND NO LONGER COUNTS. Struck through rather than
    hidden, so the history reads true - and muted rather than red, because the stamp beside it
    already says what happened and a column of red money reads as a debt.
*/
.pay__amount--void .pay__fig[b-3icdp43mg5] {
    text-decoration: line-through;
    color: var(--rk-ink-soft);
}

/* Allowed to wrap: the armed "take it off?" line carries a question and two buttons, and a
   nowrap cell would push the table wider than a phone. */
.pay__acts[b-3icdp43mg5] {
    text-align: right;
}

.pay__confirm[b-3icdp43mg5] {
    margin-right: var(--rk-sp-6);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-warn-ink);
}

/* ---------------------------------------------------------------------------------------
   RECORD A PAYMENT. The sentence carries the choice; the boxes under it carry what is
   typed - the division lift-06 draws, and the same grid the other madlibs use.
   --------------------------------------------------------------------------------------- */
.pay__start[b-3icdp43mg5] {
    margin-top: var(--rk-sp-12);
}

.pay__record[b-3icdp43mg5] {
    margin-top: var(--rk-sp-16);
    padding: var(--rk-sp-12) var(--rk-sp-16) var(--rk-sp-16);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-accent);
    background: var(--rk-card);
}

.pay__record-head[b-3icdp43mg5] {
    margin: 0 0 var(--rk-sp-8);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.typed[b-3icdp43mg5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .typed[b-3icdp43mg5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pay__record-go[b-3icdp43mg5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8) var(--rk-sp-12);
    margin-top: var(--rk-sp-12);
}

/* A wrapper this component owns - a rule aimed at RkSentenceGo's own root would carry the
   wrong scope and match nothing. */
.pay__record-commit[b-3icdp43mg5] {
    flex: 1 1 16rem;
    min-width: 0;
}

/* ---------------------------------------------------------------------------------------
   THE VOID CONFIRM. Decision 47a: the act, then its blast radius.
   --------------------------------------------------------------------------------------- */
.pay__lede[b-3icdp43mg5] {
    margin: 0 0 var(--rk-sp-10);
    max-width: var(--rk-measure);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink);
}

.pay__warn[b-3icdp43mg5] {
    margin: 0 0 var(--rk-sp-12);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-warn-ink);
}

/* ---------------------------------------------------------------------------------------
   MONEY ON ACCOUNT - the payer's unapplied payments, each one press from paying this.
   --------------------------------------------------------------------------------------- */
.pay__onaccount[b-3icdp43mg5] {
    margin-top: var(--rk-sp-14);
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.pay__onaccount-list[b-3icdp43mg5] {
    margin: var(--rk-sp-8) 0 0;
    padding: 0;
    list-style: none;
}

.pay__onaccount-row[b-3icdp43mg5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8) var(--rk-sp-12);
    padding: var(--rk-sp-6) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}
/* /Components/Sales/InvoicePricingPanel.razor.rz.scp.css */
/*
    THE INVOICE'S PRICING TAB (portal polish lane, 2026-10-16). Tokens only - no raw colour, size,
    radius or shadow. It wears the quote panel's look (QuotePricingPanel.razor.css) so the two Pricing
    tabs read as one tool. ONE APP, DESKTOP AND PHONE: the cards wrap to one column under a card's
    width, and nothing here sets a width a phone cannot hold.
*/

.ip[b-p225cbzx2b] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    min-width: 0;
}

.ip__source[b-p225cbzx2b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-2) var(--rk-sp-4);
    padding: var(--rk-sp-3) var(--rk-sp-4);
    border: var(--rk-border-card) solid var(--rk-line-hard);
    border-left: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-card);
}

.ip__source-note[b-p225cbzx2b] {
    flex-basis: 100%;
    font-size: var(--rk-fs-sm);
    color: var(--rk-warn-ink);
    line-height: var(--rk-lh-prose);
}

.ip__source-line[b-p225cbzx2b] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

.ip__stamps[b-p225cbzx2b] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-2);
}

.ip__grid[b-p225cbzx2b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--rk-sp-4);
    align-items: start;
}

.ip__hours[b-p225cbzx2b] {
    margin: 0 0 var(--rk-sp-3);
    font-family: var(--rk-font-mono);
    font-weight: var(--rk-fw-bold);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.ip__facts[b-p225cbzx2b] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--rk-sp-1) var(--rk-sp-3);
    margin: 0 0 var(--rk-sp-3);
    font-size: var(--rk-fs-sm);
}

.ip__facts dt[b-p225cbzx2b] {
    color: var(--rk-ink-soft);
}

.ip__facts dd[b-p225cbzx2b] {
    margin: 0;
    color: var(--rk-ink);
}

.ip__empty[b-p225cbzx2b],
.ip__readonly[b-p225cbzx2b],
.ip__total[b-p225cbzx2b] {
    margin: 0 0 var(--rk-sp-3);
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
}

.ip__readonly[b-p225cbzx2b] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.ip__total[b-p225cbzx2b] {
    margin: var(--rk-sp-3) 0 0;
}

.ip__visits[b-p225cbzx2b],
.ip__lines[b-p225cbzx2b] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
}

.ip__visit[b-p225cbzx2b],
.ip__line[b-p225cbzx2b] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-1);
    padding: var(--rk-sp-2) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.ip__visit-who[b-p225cbzx2b] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.ip__visit-minutes[b-p225cbzx2b] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.ip__line--hand[b-p225cbzx2b] {
    opacity: 0.8;
}

.ip__line-main[b-p225cbzx2b] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-2);
}

.ip__line-desc[b-p225cbzx2b] {
    flex: 1 1 12rem;
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.ip__line-amount[b-p225cbzx2b] {
    margin-left: auto;
    font-family: var(--rk-font-mono);
    font-weight: var(--rk-fw-bold);
    color: var(--rk-ink);
}

.ip__line-amount--neg[b-p225cbzx2b] {
    color: var(--rk-danger-ink);
}

.ip__line-unit[b-p225cbzx2b] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.ip__note[b-p225cbzx2b] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    line-height: var(--rk-lh-prose);
}

.ip__note--warn[b-p225cbzx2b] {
    color: var(--rk-warn-ink);
}
/* /Components/Sales/QuoteFieldPanel.razor.rz.scp.css */
/*
    THE QUOTE AND THE FIELD. Plain sentences, the signature under the line that names its signer.
    Tokens only - no raw colour, size, radius or shadow.
*/

.field__line[b-evu3x216i4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-2);
    margin: 0 0 var(--rk-sp-2);
    line-height: var(--rk-lh-sentence);
}

.field__line--released[b-evu3x216i4] {
    color: var(--rk-ink);
}

.field__signed[b-evu3x216i4] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
}
/* /Components/Sales/QuotePricingPanel.razor.rz.scp.css */
/*
    THE QUOTE INPUTS PANEL (lane D2). Tokens only - no raw colour, size, radius or shadow.
    ONE APP, DESKTOP AND PHONE: the cards wrap to one column under a card's width, the field rows
    wrap field by field, and nothing here sets a width a phone cannot hold.
*/

.qp[b-bs7w1lrh1v] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    min-width: 0;
}

.qp__profile[b-bs7w1lrh1v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-2) var(--rk-sp-4);
    padding: var(--rk-sp-3) var(--rk-sp-4);
    border: var(--rk-border-card) solid var(--rk-line-hard);
    border-left: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-card);
}

.qp__profile-line[b-bs7w1lrh1v] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

.qp__profile-stamps[b-bs7w1lrh1v] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-2);
}

/* "Edited by hand since it was priced" - the sentence under the stamp, a full row of its own. */
.qp__profile-note[b-bs7w1lrh1v] {
    flex-basis: 100%;
    font-size: var(--rk-fs-sm);
    color: var(--rk-warn-ink);
    line-height: var(--rk-lh-prose);
}

.qp__grid[b-bs7w1lrh1v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--rk-sp-4);
    align-items: start;
}

.qp__fields[b-bs7w1lrh1v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: var(--rk-sp-3);
    margin-bottom: var(--rk-sp-3);
}

.qp__fields--charge[b-bs7w1lrh1v] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    margin-top: var(--rk-sp-3);
}

.qp__days[b-bs7w1lrh1v] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-2) var(--rk-sp-4);
}

.qp__empty[b-bs7w1lrh1v] {
    margin: 0 0 var(--rk-sp-3);
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
}

.qp__legs[b-bs7w1lrh1v],
.qp__charges[b-bs7w1lrh1v],
.qp__lines[b-bs7w1lrh1v] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
}

.qp__leg[b-bs7w1lrh1v] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-1);
    padding: var(--rk-sp-2) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.qp__leg-head[b-bs7w1lrh1v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-2);
}

.qp__leg-seq[b-bs7w1lrh1v] {
    font-family: var(--rk-font-mono);
    font-weight: var(--rk-fw-bold);
    color: var(--rk-ink);
    min-width: var(--rk-sp-6);
}

.qp__leg-place[b-bs7w1lrh1v] {
    font-weight: var(--rk-fw-semibold);
    overflow-wrap: anywhere;
}

.qp__leg-facts[b-bs7w1lrh1v] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-1) var(--rk-sp-3);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.qp__leg-drive[b-bs7w1lrh1v] {
    font-family: var(--rk-font-mono);
    color: var(--rk-ink);
}

.qp__leg-drive--owed[b-bs7w1lrh1v] {
    color: var(--rk-warn-ink);
    font-weight: var(--rk-fw-semibold);
}

.qp__leg-act[b-bs7w1lrh1v] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-1) var(--rk-sp-3);
}

.qp__legform[b-bs7w1lrh1v] {
    margin-top: var(--rk-sp-3);
    padding: var(--rk-sp-3);
    border: var(--rk-border-card) dashed var(--rk-line-hard);
    background: var(--rk-paper);
}

.qp__legform-title[b-bs7w1lrh1v] {
    margin: 0 0 var(--rk-sp-3);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.qp__find[b-bs7w1lrh1v],
.qp__actions[b-bs7w1lrh1v] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-2);
    margin-bottom: var(--rk-sp-3);
}

.qp__charge[b-bs7w1lrh1v] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-1) var(--rk-sp-3);
    padding: var(--rk-sp-2) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.qp__charge-name[b-bs7w1lrh1v] {
    font-weight: var(--rk-fw-semibold);
}

.qp__charge-qty[b-bs7w1lrh1v] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
}

.qp__charge-rate[b-bs7w1lrh1v] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.qp__sum[b-bs7w1lrh1v] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-2) var(--rk-sp-5);
    margin-bottom: var(--rk-sp-3);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.qp__sum-total[b-bs7w1lrh1v] {
    color: var(--rk-ink);
    font-weight: var(--rk-fw-bold);
}

.qp__line[b-bs7w1lrh1v] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-1);
    padding: var(--rk-sp-2) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.qp__line--hand[b-bs7w1lrh1v] {
    opacity: 0.8;
}

.qp__line-main[b-bs7w1lrh1v] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-2);
}

.qp__line-desc[b-bs7w1lrh1v] {
    flex: 1 1 12rem;
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.qp__line-amount[b-bs7w1lrh1v] {
    margin-left: auto;
    font-family: var(--rk-font-mono);
    font-weight: var(--rk-fw-bold);
    color: var(--rk-ink);
}

.qp__line-amount--neg[b-bs7w1lrh1v] {
    color: var(--rk-danger-ink);
}

.qp__line-unit[b-bs7w1lrh1v] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.qp__line-note[b-bs7w1lrh1v] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    line-height: var(--rk-lh-prose);
}

.qp__line-note--warn[b-bs7w1lrh1v] {
    color: var(--rk-warn-ink);
}

.qp__total[b-bs7w1lrh1v] {
    margin: var(--rk-sp-3) 0 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}
/* /Components/Sales/QuoteSignature.razor.rz.scp.css */
/*
    THE SIGNATURE. A pad's strokes are dark on nothing, so they are drawn on a white sheet in both
    themes - on the dark card they would vanish. That is a picture on white, never text on a fill.
    Tokens only.
*/

.sig[b-dvn10ms621] {
    display: inline-flex;
    align-self: flex-start;
    max-width: 100%;
    padding: var(--rk-sp-2);
    background: var(--rk-white);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
}

.sig--failed[b-dvn10ms621] {
    background: var(--rk-card);
    border-style: dashed;
}

.sig__img[b-dvn10ms621] {
    display: block;
    max-width: 100%;
    height: calc(var(--rk-control-h) * 2);
    object-fit: contain;
}

.sig__note[b-dvn10ms621] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}
/* /Components/Sales/SendRecipients.razor.rz.scp.css */
/*
    WHO A DOCUMENT COULD GO TO.

    Tokens only - no raw colour, size, radius or shadow. Every class here lands on an element this
    component owns.

    ⚠️ A CHOSEN ROW IS MARKED BY A RAIL AND A WASH, NOT BY ACCENT TEXT. Small text never wears raw
    --rk-accent (the contrast test fails the build); the rail carries the signal and the words stay
    ink.
*/
.who[b-bafljpgv95] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
}

/* The page's own micro-head idiom, the same tokens as .send__log-head beside it. */
.who__head[b-bafljpgv95] {
    margin: 0;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.who__list[b-bafljpgv95] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.who__pick[b-bafljpgv95] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rk-sp-1);
    width: 100%;
    min-height: var(--rk-tap);
    padding: var(--rk-sp-6) var(--rk-sp-10);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-line);
    background: var(--rk-paper);
    color: var(--rk-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--rk-dur-ui) var(--rk-ease), background var(--rk-dur-ui) var(--rk-ease);
}

.who__pick:hover[b-bafljpgv95] {
    background: var(--rk-hover-ghost);
}

.who__pick:focus-visible[b-bafljpgv95] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-1);
}

.who__pick--on[b-bafljpgv95] {
    border-left-color: var(--rk-accent);
    background: var(--rk-accent-soft);
}

.who__name[b-bafljpgv95] {
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    line-height: var(--rk-lh-snug);
}

.who__email[b-bafljpgv95] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    word-break: break-all;
}

.who__why[b-bafljpgv95] {
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.who__quiet[b-bafljpgv95] {
    margin: 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}
/* /Components/Setup/CompanyWeekCard.razor.rz.scp.css */
/* ===========================================================================================
   THE COMPANY'S WEEK. The day it runs is the headline - it is the one fact on the tab - set in
   the display face like a stamp, and everything else is quiet prose beneath it.
   =========================================================================================== */

.wk__runs[b-pgir8ej1di] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-3xl);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-tight);
    letter-spacing: var(--rk-track-3xl);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.wk__lede[b-pgir8ej1di] {
    margin: var(--rk-sp-8) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.wk__quiet[b-pgir8ej1di] {
    margin: var(--rk-sp-8) 0 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.wk__facts[b-pgir8ej1di] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--rk-sp-6) var(--rk-sp-14);
    margin: var(--rk-sp-14) 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
}

.wk__facts dt[b-pgir8ej1di] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink-soft);
}

.wk__facts dd[b-pgir8ej1di] {
    margin: 0;
    color: var(--rk-ink);
}

.wk__label[b-pgir8ej1di] {
    margin: 0 var(--rk-sp-6);
    color: var(--rk-ink-soft);
}

.wk__grid[b-pgir8ej1di] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--rk-sp-40) * 5), 1fr));
    gap: var(--rk-sp-12);
    margin-top: var(--rk-sp-14);
}

.wk__acts[b-pgir8ej1di] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-10);
    margin: var(--rk-sp-14) 0 var(--rk-sp-8);
}

.wk__history[b-pgir8ej1di] {
    display: grid;
    gap: var(--rk-sp-10);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wk__change[b-pgir8ej1di] {
    display: grid;
    gap: var(--rk-sp-2);
    padding-left: var(--rk-sp-10);
    border-left: var(--rk-sp-3) solid var(--rk-line);
}

.wk__what[b-pgir8ej1di] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

/* One column on a phone - the facts list keeps its two, which are short. */
@media (max-width: 640px) {
    .wk__runs[b-pgir8ej1di] {
        font-size: var(--rk-fs-2xl);
    }

    .wk__grid[b-pgir8ej1di] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Skips/CancelStopsDialog.razor.rz.scp.css */
/* CANCEL STOPS - the dialog. Tokens only (rk-tokens.css); small text never wears raw --rk-accent. */

.cancel__lede[b-a56n89ytgh] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.cancel__list[b-a56n89ytgh] {
    margin: 0 0 var(--rk-sp-12);
    padding: 0 0 0 var(--rk-sp-16);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-base);
    color: var(--rk-ink);
}

.cancel__more[b-a56n89ytgh] {
    color: var(--rk-ink-soft);
}

.cancel__group[b-a56n89ytgh] {
    display: grid;
    gap: var(--rk-sp-6);
    margin: 0 0 var(--rk-sp-10);
}

.cancel__label[b-a56n89ytgh] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.cancel__chips[b-a56n89ytgh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
}

.cancel__form[b-a56n89ytgh] {
    display: grid;
    gap: var(--rk-sp-10);
    margin: var(--rk-sp-8) 0 var(--rk-sp-10);
}

/* What happens to the cards - said before the press, not after it. */
.cancel__note[b-a56n89ytgh] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-accent-ink);
}
/* /Components/Skips/PauseSiteDialog.razor.rz.scp.css */
/* STOP THIS SITE ON ITS ROUND - the dialog. Tokens only (rk-tokens.css). */

.pause__lede[b-legv9x17c7] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.pause__how[b-legv9x17c7] {
    display: grid;
    gap: var(--rk-sp-4);
    margin: 0 0 var(--rk-sp-8);
}

.pause__form[b-legv9x17c7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--rk-sp-10);
    margin: var(--rk-sp-8) 0 var(--rk-sp-10);
}

.pause__label[b-legv9x17c7] {
    margin: var(--rk-sp-4) 0 var(--rk-sp-4);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink-soft);
}

.pause__days[b-legv9x17c7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-12);
    margin: 0 0 var(--rk-sp-8);
}

/* The consequence, before the press. Small text: --rk-accent-ink, never raw --rk-accent. */
.pause__note[b-legv9x17c7] {
    max-width: var(--rk-measure);
    margin: var(--rk-sp-8) 0 0;
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-accent-ink);
}
/* /Components/Skips/SitePickups.razor.rz.scp.css */
/* THE ROUNDS A SITE IS ON - the CSR's panel. Tokens only (rk-tokens.css). */

.pickups[b-szp2kruhz2] {
    margin: 0 0 var(--rk-sp-16);
    padding: var(--rk-sp-12) var(--rk-sp-14);
    background: var(--rk-card);
    border: var(--rk-border-card);
    box-shadow: var(--rk-shadow-card);
}

.pickups__head[b-szp2kruhz2] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--rk-sp-10);
    margin: 0 0 var(--rk-sp-8);
}

.pickups__title[b-szp2kruhz2] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.pickups__sub[b-szp2kruhz2] {
    margin: var(--rk-sp-14) 0 var(--rk-sp-6);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--rk-track-xl);
    color: var(--rk-ink-soft);
}

.pickups__more[b-szp2kruhz2] {
    margin: var(--rk-sp-6) 0 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.pickups__rounds[b-szp2kruhz2],
.pickups__ahead[b-szp2kruhz2] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pickups__ahead[b-szp2kruhz2] {
    /* THE COLUMNS LIVE ON THE LIST and every row is a subgrid of them (2026-10-27), so the round
       column is as wide as its longest name - "Round 0000005 - Mon/Wed 1 - Lancaster south" - and
       still lines up down the list when a site sits on two rounds named differently. A fixed 8rem
       wrapped a name to three lines. An unnamed round reads "Round 0000005" in the same place. */
    display: grid;
    grid-template-columns: 7rem minmax(8rem, max-content) 1fr auto;
}

.round[b-szp2kruhz2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-10) 0;
    border-top: 1px solid var(--rk-line);
}

.round:first-child[b-szp2kruhz2] {
    border-top: 0;
}

.round__what[b-szp2kruhz2] {
    display: grid;
    gap: var(--rk-sp-2);
    min-width: 0;
}

.round__site[b-szp2kruhz2] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.round__name[b-szp2kruhz2] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.round__rule[b-szp2kruhz2],
.round__days[b-szp2kruhz2],
.round__job[b-szp2kruhz2] {
    color: var(--rk-ink-soft);
}

.round__pause[b-szp2kruhz2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}

.round__why[b-szp2kruhz2] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.round__next[b-szp2kruhz2] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.round__do[b-szp2kruhz2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
}

.ahead[b-szp2kruhz2] {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-4) 0;
    border-top: 1px solid var(--rk-line);
    font-size: var(--rk-fs-sm);
}

.ahead__day[b-szp2kruhz2] {
    font-family: var(--rk-font-mono);
    color: var(--rk-ink);
}

.ahead__round[b-szp2kruhz2] {
    color: var(--rk-ink-soft);
}

.ahead__state[b-szp2kruhz2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
    min-width: 0;
}

.ahead__why[b-szp2kruhz2] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.ahead--off .ahead__day[b-szp2kruhz2] {
    text-decoration: line-through;
    color: var(--rk-ink-soft);
}

@media (max-width: 40rem) {
    .pickups__ahead[b-szp2kruhz2] {
        grid-template-columns: 6rem 1fr auto;
    }

    .ahead__round[b-szp2kruhz2] {
        display: none;
    }
}
/* /Components/Skips/SkipStopDialog.razor.rz.scp.css */
/* SKIP THIS STOP - the dialog. Tokens only (rk-tokens.css); small text never wears raw --rk-accent. */

.skip__lede[b-xm7jtsoz08] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

/* What happens to a stop already on the board - said before the press, not after it. */
.skip__note[b-xm7jtsoz08] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-accent-ink);
}

.skip__quick[b-xm7jtsoz08] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
    margin: 0 0 var(--rk-sp-8);
}

.skip__form[b-xm7jtsoz08] {
    display: grid;
    gap: var(--rk-sp-10);
    margin: var(--rk-sp-8) 0 var(--rk-sp-12);
}
/* /Components/Tax/CustomerTaxClassCard.razor.rz.scp.css */
/* WHO THIS CUSTOMER IS FOR TAX. Tokens only; the facts list matches the customer page's own. */

.facts[b-0qtxc4505n] {
    display: grid;
    /* 8 x 16px - the centers' own label column (8rem), so these rows line up with theirs. */
    grid-template-columns: minmax(calc(var(--rk-sp-16) * 8), max-content) minmax(0, 1fr);
    gap: var(--rk-sp-4) var(--rk-sp-14);
    margin: 0;
}

.facts dt[b-0qtxc4505n] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.facts dd[b-0qtxc4505n] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.value[b-0qtxc4505n] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.sub[b-0qtxc4505n] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink-soft);
}

.pick[b-0qtxc4505n] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8) var(--rk-sp-10);
    margin-top: var(--rk-sp-10);
}

.pick[b-0qtxc4505n]  .rk-field {
    margin-bottom: 0;
}

.pick[b-0qtxc4505n]  .pick__select {
    flex: 1 1 var(--rk-blank-max);
    max-width: calc(var(--rk-blank-max) * 1.6);
}

.warnline[b-0qtxc4505n] {
    margin: var(--rk-sp-8) 0 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-warn-ink);
}

.note[b-0qtxc4505n] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}
/* /Components/Tax/PayerTaxClass.razor.rz.scp.css */
/*
    THE PAYER'S TAX CLASS AT ONE SITE - one line under a payer card's facts, laid out like one of
    them: a small uppercase label, then the value.
*/

.ptc[b-vxlx9tlfr4] {
    display: grid;
    /* 8 x 16px - the centers' own label column (8rem), so this row lines up with the card's facts. */
    grid-template-columns: minmax(calc(var(--rk-sp-16) * 8), max-content) minmax(0, 1fr);
    gap: var(--rk-sp-4) var(--rk-sp-14);
    margin-top: var(--rk-sp-6);
    padding-top: var(--rk-sp-6);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.ptc__label[b-vxlx9tlfr4] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.ptc__body[b-vxlx9tlfr4] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-2) var(--rk-sp-8);
    min-width: 0;
}

.ptc__value[b-vxlx9tlfr4] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.ptc__how[b-vxlx9tlfr4] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

/* A link-weight button: text, the accent INK (small text never wears raw accent). */
.ptc__ask[b-vxlx9tlfr4] {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-ink);
    text-decoration: underline;
    cursor: pointer;
    min-height: var(--rk-control-xs);
}

.ptc__ask:hover[b-vxlx9tlfr4] {
    text-decoration: none;
}

.ptc__edit[b-vxlx9tlfr4] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8);
}

.ptc__edit[b-vxlx9tlfr4]  .rk-field {
    margin-bottom: 0;
}

.ptc__edit[b-vxlx9tlfr4]  .ptc__select {
    flex: 1 1 var(--rk-blank-max);
    max-width: calc(var(--rk-blank-max) * 1.6);
}
/* /Components/Tax/SiteTaxCard.razor.rz.scp.css */
/*
    HOW THIS SITE IS TAXED. Tokens only - the facts list matches the site page's own, so the card
    reads as one of the page's cards rather than a panel dropped into it.
*/

.lead[b-dqi87o28ym] {
    margin: 0 0 var(--rk-sp-8);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

.facts[b-dqi87o28ym] {
    display: grid;
    /* 8 x 16px - the site page's own label column (8rem), so this card lines up with its neighbours. */
    grid-template-columns: minmax(calc(var(--rk-sp-16) * 8), max-content) minmax(0, 1fr);
    gap: var(--rk-sp-6) var(--rk-sp-14);
    margin: 0;
}

.facts dt[b-dqi87o28ym] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.facts dd[b-dqi87o28ym] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.value[b-dqi87o28ym] {
    color: var(--rk-ink);
}

.rate[b-dqi87o28ym] {
    margin-left: var(--rk-sp-8);
    font-family: var(--rk-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.sub[b-dqi87o28ym] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink-soft);
}

/* A link out to the ladder - accent INK, because small text never wears raw accent. */
.golink[b-dqi87o28ym] {
    align-self: center;
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-ink);
}

.golink:hover[b-dqi87o28ym] {
    text-decoration: none;
}

.note[b-dqi87o28ym] {
    flex: 1 1 100%;
    margin: var(--rk-sp-4) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.lede[b-dqi87o28ym] {
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}
/* /Components/Tax/TaxClassPanel.razor.rz.scp.css */
/*
    WHO IS TAXED - the class panel.

    Tokens only, layout only. The cell styling is the taxability grid's on the rates list, so a
    person who learned one reads the other: three states, and the unknown one looks unknown.
*/

.who[b-03nrs1u8w0] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.who__head[b-03nrs1u8w0] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rk-sp-10) var(--rk-sp-18);
}

.who__words[b-03nrs1u8w0] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    min-width: 0;
}

.who__title[b-03nrs1u8w0] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.who__lede[b-03nrs1u8w0] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.who__acts[b-03nrs1u8w0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
}

/* ---------------------------------------------------------------------------------------
   ONE CLASS PER CARD
   --------------------------------------------------------------------------------------- */

.classes[b-03nrs1u8w0] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
}

.klass[b-03nrs1u8w0] {
    padding: var(--rk-sp-12) var(--rk-sp-14);
    border: var(--rk-border-card) solid var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-accent);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-card);
}

.klass--retired[b-03nrs1u8w0] {
    border-left-color: var(--rk-disabled);
    background: var(--rk-zebra);
}

.klass__head[b-03nrs1u8w0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8) var(--rk-sp-12);
}

.klass__names[b-03nrs1u8w0] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-1);
    min-width: 0;
    flex: 1 1 var(--rk-blank-max);
}

.klass__name[b-03nrs1u8w0] {
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.klass__handle[b-03nrs1u8w0] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.klass__marks[b-03nrs1u8w0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-4);
}

.klass__blurb[b-03nrs1u8w0] {
    margin: var(--rk-sp-6) 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.klass__grid-head[b-03nrs1u8w0] {
    margin-top: var(--rk-sp-12);
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.klass__ask[b-03nrs1u8w0] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.klass__gone[b-03nrs1u8w0] {
    margin: var(--rk-sp-6) 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-danger-ink);
}

.klass__rule[b-03nrs1u8w0] {
    margin: var(--rk-sp-10) 0 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

/* ---------------------------------------------------------------------------------------
   THE GRID - two states: a stated "not taxed", or taxed (no row - the site decides)
   --------------------------------------------------------------------------------------- */

.kinds[b-03nrs1u8w0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--rk-blank-max) * 0.9), 1fr));
    gap: var(--rk-sp-6) var(--rk-sp-10);
    margin-top: var(--rk-sp-8);
}

.kind[b-03nrs1u8w0] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    padding: var(--rk-sp-6);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-card);
}

.kind--yes[b-03nrs1u8w0] {
    border-color: var(--rk-ok);
}

.kind--no[b-03nrs1u8w0] {
    border-color: var(--rk-steel);
}

.kind__name[b-03nrs1u8w0] {
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.kind__set[b-03nrs1u8w0] {
    display: flex;
    gap: var(--rk-sp-1);
}

.kind__btn[b-03nrs1u8w0] {
    flex: 1 1 0;
    padding: var(--rk-sp-3) var(--rk-sp-4);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-field);
    color: var(--rk-ink-soft);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-3xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    cursor: pointer;
    min-height: var(--rk-control-xs);
}

.kind__btn:hover:not(:disabled)[b-03nrs1u8w0] {
    background: var(--rk-hover-ghost);
}

.kind__btn:disabled[b-03nrs1u8w0] {
    cursor: default;
    color: var(--rk-disabled-text);
}

.kind__btn--yes[aria-pressed="true"][b-03nrs1u8w0] {
    background: var(--rk-ok-soft);
    border-color: var(--rk-ok);
    color: var(--rk-ok-ink);
}

.kind__btn--no[aria-pressed="true"][b-03nrs1u8w0] {
    background: var(--rk-zebra);
    border-color: var(--rk-steel);
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   BRING ESC'S CLASSES OVER
   --------------------------------------------------------------------------------------- */

.move[b-03nrs1u8w0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    padding: var(--rk-sp-10) var(--rk-sp-12);
    border: var(--rk-border-hair) dashed var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-steel);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-card);
}

.move__words[b-03nrs1u8w0] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    min-width: 0;
    flex: 1 1 var(--rk-blank-max);
}

.move__title[b-03nrs1u8w0] {
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.move__body[b-03nrs1u8w0] {
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.plan[b-03nrs1u8w0] {
    margin: 0;
    padding-left: var(--rk-sp-16);
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
}

.plan__line[b-03nrs1u8w0] {
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.plan__note[b-03nrs1u8w0] {
    margin: var(--rk-sp-8) 0 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE EDITOR
   --------------------------------------------------------------------------------------- */

.lede[b-03nrs1u8w0] {
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.form[b-03nrs1u8w0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rk-blank-max), 1fr));
    gap: 0 var(--rk-sp-14);
    align-items: start;
}

.checks[b-03nrs1u8w0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rk-blank-max), 1fr));
    gap: var(--rk-sp-8) var(--rk-sp-14);
}
/* /Components/Tax/TaxCollectedPanel.razor.rz.scp.css */
/*
    TAX COLLECTED. Tokens only, layout only. The table is a return worksheet: levels as bands,
    money right-aligned and mono, subtotals ruled off, the total on a heavy rule.
    The level band uses the permanent-chrome pair (chrome-bg / chrome-ink), never ink on white,
    so it stays readable in the dark theme.
*/

.paid[b-2fs2al1pue] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.paid__words[b-2fs2al1pue] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    min-width: 0;
}

.paid__title[b-2fs2al1pue] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.paid__lede[b-2fs2al1pue] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

/* ---------------------------------------------------------------------------------------
   THE BAR
   --------------------------------------------------------------------------------------- */

.bar[b-2fs2al1pue] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    padding: var(--rk-sp-4) 0 var(--rk-sp-8);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
}

.bar[b-2fs2al1pue]  .rk-field {
    margin-bottom: 0;
}

.bar[b-2fs2al1pue]  .bar__period {
    width: calc(var(--rk-blank-max) * 1.7);
    max-width: 100%;
}

.bar[b-2fs2al1pue]  .bar__date {
    width: calc(var(--rk-blank-max) * 0.8);
}

.bar[b-2fs2al1pue]  .bar__level {
    width: var(--rk-blank-max);
}

/* A link that looks like the kit's ghost button - an anchor, because a download IS a link. */
.dl[b-2fs2al1pue] {
    display: inline-flex;
    align-items: center;
    min-height: var(--rk-control-sm);
    padding: 0 var(--rk-sp-12);
    margin-left: auto;
    border: var(--rk-border) solid var(--rk-ink);
    border-radius: var(--rk-radius-xs);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--rk-ink);
    background: var(--rk-card);
}

.dl:hover[b-2fs2al1pue] {
    background: var(--rk-hover-ghost);
}

.dl:focus-visible[b-2fs2al1pue] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.stamped[b-2fs2al1pue] {
    margin: 0;
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border-left: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-zebra);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.4);
}

.stamped strong[b-2fs2al1pue] {
    color: var(--rk-ink);
}

.period[b-2fs2al1pue] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   THE WORKSHEET
   --------------------------------------------------------------------------------------- */

.tt-wrap[b-2fs2al1pue] {
    max-width: 100%;
    overflow-x: auto;
}

.tt[b-2fs2al1pue] {
    width: 100%;
    border-collapse: collapse;
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line);
}

.tt th[b-2fs2al1pue],
.tt td[b-2fs2al1pue] {
    padding: var(--rk-sp-6) var(--rk-sp-10);
    text-align: left;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.tt thead th[b-2fs2al1pue] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    border-bottom: var(--rk-border) solid var(--rk-line-hard);
}

.tt .n[b-2fs2al1pue] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tt tbody td[b-2fs2al1pue] {
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.tt__level th[b-2fs2al1pue] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    background: var(--rk-chrome-bg);
    color: var(--rk-chrome-ink);
}

.tt__group--old .tt__level th[b-2fs2al1pue] {
    background: var(--rk-zebra);
    color: var(--rk-warn-ink);
}

.tt__sub td[b-2fs2al1pue] {
    font-weight: var(--rk-fw-semibold);
    border-top: var(--rk-border) solid var(--rk-line-hard);
    background: var(--rk-zebra);
}

.tt__total td[b-2fs2al1pue] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    border-top: var(--rk-rail) solid var(--rk-ink);
}

.note[b-2fs2al1pue] {
    margin: 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.4);
}

.note--old[b-2fs2al1pue] {
    color: var(--rk-warn-ink);
}
/* /Components/Tax/TaxLadderPanel.razor.rz.scp.css */
/*
    WHERE SITES ARE TAXED - the ladder panel.

    Tokens only, layout only: a test fails the build on a raw hex and on a var() naming a token
    rk-tokens.css never declared. ::deep for any class handed to a kit control, because the Class
    lands on THAT component's scoped element.
*/

.ladder[b-dklqqxph88] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.ladder__head[b-dklqqxph88] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rk-sp-10) var(--rk-sp-18);
}

.ladder__words[b-dklqqxph88] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    min-width: 0;
}

.ladder__title[b-dklqqxph88] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.ladder__lede[b-dklqqxph88] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.ladder__acts[b-dklqqxph88] {
    display: flex;
    gap: var(--rk-sp-8);
}

/* ---------------------------------------------------------------------------------------
   MOVE THE SITES - a quiet strip until it has something to say
   --------------------------------------------------------------------------------------- */

.move[b-dklqqxph88] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    padding: var(--rk-sp-10) var(--rk-sp-12);
    border: var(--rk-border-hair) dashed var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-accent);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-card);
}

.move__words[b-dklqqxph88] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    min-width: 0;
    flex: 1 1 var(--rk-blank-max);
}

.move__title[b-dklqqxph88] {
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.move__body[b-dklqqxph88] {
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.plan[b-dklqqxph88] {
    margin: 0;
    padding-left: var(--rk-sp-16);
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
}

.plan__line[b-dklqqxph88] {
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.plan__note[b-dklqqxph88] {
    margin: var(--rk-sp-8) 0 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE FILTER BAR - the same shape as the rates list above it
   --------------------------------------------------------------------------------------- */

.bar[b-dklqqxph88] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-4) 0 var(--rk-sp-8);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
}

.bar__group[b-dklqqxph88] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.bar[b-dklqqxph88]  .rk-field {
    margin-bottom: 0;
}

.bar[b-dklqqxph88]  .bar__state {
    width: calc(var(--rk-control-h) * 2);
}

.bar[b-dklqqxph88]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.6);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   THE CELLS
   --------------------------------------------------------------------------------------- */

.marks[b-dklqqxph88] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4);
}

/* A number people read down a column sits under its right-aligned header. */
.num[b-dklqqxph88] {
    text-align: right;
    white-space: nowrap;
}

.cell__place[b-dklqqxph88] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.cell__note[b-dklqqxph88] {
    display: block;
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.cell__code[b-dklqqxph88] {
    display: block;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink);
}

.cell__label[b-dklqqxph88] {
    display: block;
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.pager[b-dklqqxph88] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-4) 0 var(--rk-sp-10);
}

.pager__word[b-dklqqxph88] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
    margin-right: auto;
}

/* ---------------------------------------------------------------------------------------
   THE EDITOR
   --------------------------------------------------------------------------------------- */

.lede[b-dklqqxph88] {
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.form[b-dklqqxph88] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rk-blank-max), 1fr));
    gap: 0 var(--rk-sp-14);
    align-items: start;
}

.fixed[b-dklqqxph88] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    margin-bottom: var(--rk-sp-12);
    padding: var(--rk-sp-10) var(--rk-sp-12);
    border-left: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-zebra);
    border-radius: var(--rk-radius-xs);
}

.fixed__label[b-dklqqxph88] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.fixed__place[b-dklqqxph88] {
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.fixed__rung[b-dklqqxph88] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.fixed__why[b-dklqqxph88] {
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.warnline[b-dklqqxph88] {
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-xs);
    color: var(--rk-warn-ink);
}

.edit-grave[b-dklqqxph88] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-12);
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.edit-grave__row[b-dklqqxph88] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-6) var(--rk-sp-12);
}

.edit-grave__word[b-dklqqxph88] {
    flex: 1 1 var(--rk-blank-max);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}
/* /Components/Tax/UncoveredSitesSheet.razor.rz.scp.css */
/*
    THE SITES NO TAX RULE COVERS - the sheet behind "N sites are in places no rule covers".

    Tokens only, layout only (a test fails the build on a raw hex or an undeclared token). The
    filter bar and the cells are the ladder panel's shapes, so the two read as one screen.
    ::deep for any class handed to a kit control - it lands on that component's element.
*/

.lede[b-hgnyd5gyyy] {
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.why[b-hgnyd5gyyy] {
    margin: var(--rk-sp-4) 0 var(--rk-sp-8);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.bar[b-hgnyd5gyyy] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-4) 0 var(--rk-sp-8);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
}

.bar__group[b-hgnyd5gyyy] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.bar[b-hgnyd5gyyy]  .rk-field {
    margin-bottom: 0;
}

.bar[b-hgnyd5gyyy]  .bar__state {
    width: calc(var(--rk-control-h) * 2);
}

.bar[b-hgnyd5gyyy]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.6);
    max-width: 100%;
}

.cell__link[b-hgnyd5gyyy] {
    display: block;
    color: var(--rk-ink);
    text-decoration: none;
}

.cell__link:hover[b-hgnyd5gyyy],
.cell__link:focus-visible[b-hgnyd5gyyy] {
    text-decoration: underline;
}

.cell__place[b-hgnyd5gyyy] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.cell__code[b-hgnyd5gyyy] {
    display: block;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink);
}

.cell__label[b-hgnyd5gyyy] {
    display: block;
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.pager[b-hgnyd5gyyy] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-4) 0 var(--rk-sp-10);
}

.pager__word[b-hgnyd5gyyy] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
    margin-right: auto;
}
/* /Components/Workflows/CaptureShots.razor.rz.scp.css */
/*
    THE CAPTURED PICTURES - a heading and a wrapping row of tiles, PhotoStrip's shape.

    🛑 NO TILE STYLING HERE. The tile is RkFileShot and it owns its frame, aspect ratio, failure
    state and caption (PhotoStrip.razor.css makes the same argument). Tokens only.
*/

.caps[b-vtbm39qfn0] {
    display: block;
}

.caps__head[b-vtbm39qfn0] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
    padding-bottom: var(--rk-sp-8);
}

.caps__title[b-vtbm39qfn0] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.caps__count[b-vtbm39qfn0] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

/* A WRAPPING FLEX ROW, not a grid: RkFileShot sizes its own frame. */
.caps__grid[b-vtbm39qfn0] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-10);
    margin: 0;
    padding: 0;
    list-style: none;
}

.caps--tight .caps__grid[b-vtbm39qfn0] {
    gap: var(--rk-sp-6);
}

.caps__cell[b-vtbm39qfn0] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    min-width: 0;
    max-width: var(--rk-shot-w);
}

.caps__who[b-vtbm39qfn0] {
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
}

.caps__link[b-vtbm39qfn0] {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--rk-fs-2xs);
    color: var(--rk-accent-ink);
    cursor: pointer;
    text-decoration: underline;
}

/* The proof page's sentence for a photo the phone has not sent yet - said once, under the tiles
   (which carry the short form). Lane RS, 2026-10-15. */
.caps__note[b-vtbm39qfn0] {
    margin: var(--rk-sp-6) 0 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}
/* /Components/Workflows/DispatchRunList.razor.rz.scp.css */
/*
    THE RUNS ON ONE JOB, AS A LIST OF DOCUMENTS TO OPEN.

    Every row is a real <button>, not a div with a click handler: a keyboard reaches it, a
    screen reader announces it, and Enter opens it. The whole row is the target because on the
    board drawer it is 320px wide and a link inside a row is a miss waiting to happen.
*/

.runs[b-9hhh38pc7t] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.runs__head[b-9hhh38pc7t] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
}

.runs__title[b-9hhh38pc7t] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.runs__count[b-9hhh38pc7t] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.runs__acts[b-9hhh38pc7t] {
    display: flex;
    gap: var(--rk-sp-8);
    margin-left: auto;
}

.runs__list[b-9hhh38pc7t] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
}

.runs__row[b-9hhh38pc7t] {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: var(--rk-sp-12);
    min-height: var(--rk-tap);
    padding: var(--rk-sp-12);
    text-align: left;
    background: var(--rk-card);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-xs);
    cursor: pointer;
    color: var(--rk-ink);
}

.runs__row:hover[b-9hhh38pc7t] {
    background: var(--rk-hover-ghost);
    border-color: var(--rk-line-hard);
}

.runs__row:focus-visible[b-9hhh38pc7t] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.runs__mark[b-9hhh38pc7t] {
    flex: 0 0 auto;
    padding-top: var(--rk-sp-1);
}

.runs__body[b-9hhh38pc7t] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    min-width: 0;
}

.runs__name[b-9hhh38pc7t] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-semibold);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.runs__meta[b-9hhh38pc7t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-10);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

/* WHICH TRIP. Marked out because it is the fact a dispute turns on. */
.runs__where[b-9hhh38pc7t] {
    color: var(--rk-accent-ink);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
}

/* The board drawer is narrow, so the row stacks rather than truncating a workflow's name. */
.runs--tight .runs__row[b-9hhh38pc7t] {
    padding: var(--rk-sp-10);
}

.runs--tight .runs__name[b-9hhh38pc7t] {
    font-size: var(--rk-fs-sm);
}
/* /Components/Workflows/JobAnswers.razor.rz.scp.css */
/* ===========================================================================================
   WHAT WAS CAPTURED ON THIS JOB.

   The layout follows the reading order a dispatcher actually uses: the QUESTION, then the
   ANSWER, then who and when. The answer carries the visual weight because it is what somebody
   opened the tab for - the question is the label on it.
   =========================================================================================== */

.ans[b-da8auc8ka7] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.ans__quiet[b-da8auc8ka7] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.ans__filters[b-da8auc8ka7] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
}

.ans__group[b-da8auc8ka7] {
    border-top: var(--rk-border-hair) solid var(--rk-line);
    padding-top: var(--rk-sp-10);
}

/* The procedure's name, as a micro-head - the page's own idiom for a section label. */
.ans__title[b-da8auc8ka7] {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-8);
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.ans__count[b-da8auc8ka7] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.ans__list[b-da8auc8ka7] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ans__row[b-da8auc8ka7] {
    margin: 0;
}

/* The whole row opens the run's story. A button rather than a link because the destination is
   a route this app owns and the row carries several lines - an anchor wrapping block content
   is legal and reads worse to a screen reader. */
.ans__open[b-da8auc8ka7] {
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) 1fr;
    align-items: baseline;
    gap: var(--rk-sp-4) var(--rk-sp-10);
    width: 100%;
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border: 0;
    border-left: var(--rk-sp-3) solid transparent;
    background: var(--rk-card);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ans__open:hover[b-da8auc8ka7],
.ans__open:focus-visible[b-da8auc8ka7] {
    border-left-color: var(--rk-accent);
}

/* The question is the label. Wraps rather than ellipsing - a step's internal name carries the
   meaning and half of one identifies nothing. */
.ans__q[b-da8auc8ka7] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    word-break: break-word;
}

/* The answer carries the weight - it is what somebody opened this for. */
.ans__a[b-da8auc8ka7] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
    word-break: break-word;
}

.ans__meta[b-da8auc8ka7] {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.ans__where[b-da8auc8ka7] {
    color: var(--rk-accent-ink);
}

.ans__when[b-da8auc8ka7] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
}

/* On a phone the two columns become one - a 14rem label column beside an answer leaves the
   answer about nine characters wide at 375px. */
@media (max-width: 40rem) {
    .ans__open[b-da8auc8ka7] {
        grid-template-columns: 1fr;
    }

    .ans__meta[b-da8auc8ka7] {
        grid-column: 1;
    }
}

/* THE CAPTURE UNDER ITS ANSWER (lane JP) - indented to the answer column so the picture sits
   under what it answers, not under the question. */
[b-da8auc8ka7] .ans__shots {
    padding: var(--rk-sp-4) var(--rk-sp-10) var(--rk-sp-8);
}

.ans__how[b-da8auc8ka7] {
    margin-left: var(--rk-sp-8);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-steel);
}

/* WHAT THE PERSON WITHDREW (2026-10-28, ANSWER-CENTER.md section 11) - a quiet line with its count and a Show, and,
   when shown, each answer greyed on the page colour under its "Backed out - not on the record" chip, so it can never
   be read as one of the job's answers at a glance. */
.ans__withdrawn-line[b-da8auc8ka7] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.ans__row--withdrawn .ans__open[b-da8auc8ka7] {
    background: var(--rk-paper);
    border-left-color: var(--rk-line-hard);
}

.ans__row--withdrawn .ans__a[b-da8auc8ka7],
.ans__row--withdrawn .ans__q[b-da8auc8ka7] {
    color: var(--rk-steel);
}
/* /Components/Workflows/JobCaptureStrip.razor.rz.scp.css */
/* The job's captured pictures - one lead line over the strip. Tokens only. */

.jcs__lead[b-jfj53g28ch] {
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

/* Pictures withdrawn in the field - left out of the strip and said to be (2026-10-28). */
.jcs__withdrawn[b-jfj53g28ch] {
    margin: var(--rk-sp-10) 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
    max-width: var(--rk-measure);
}
/* /Components/Workflows/RunStory.razor.rz.scp.css */
/*
    ONE RUN'S TITLE BLOCK.

    The story below it belongs to RkRunReview and RkStoryStep and is not restyled from here -
    a reader's copy that looks different from the one the technician signed off on is the
    first step towards them being different.

    PRINTABLE IS A REQUIREMENT, NOT A NICETY. Decision 40: "making PDFs - workflows - stories
    of the job - IS our final output." The kit already flips every colour token under
    @media print and hides .rk-no-print, so what is left here is PAGINATION - keeping a run's
    heading with the run rather than stranded at the foot of a page.
*/

.story[b-t6jxauhlcq] {
    display: block;
}

.story__head[b-t6jxauhlcq] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
    padding-bottom: var(--rk-sp-12);
    border-bottom: var(--rk-border) solid var(--rk-line-hard);
    margin-bottom: var(--rk-sp-8);
}

.story__name[b-t6jxauhlcq] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-tight);
    letter-spacing: var(--rk-track-lg);
    color: var(--rk-ink);
}

.story__marks[b-t6jxauhlcq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
}

.story__who[b-t6jxauhlcq] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.story__state[b-t6jxauhlcq] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/*
    AN OPEN RUN SHOUTS. Everything below this line renders identically whether the run
    finished or stopped halfway, so this sentence is the only thing between a reader and
    mistaking an unfinished job for a badly done one.
*/
.story__state--live[b-t6jxauhlcq] {
    color: var(--rk-accent-ink);
    font-weight: var(--rk-fw-semibold);
}

.story__owed[b-t6jxauhlcq] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.story__owed strong[b-t6jxauhlcq] {
    font-family: var(--rk-font-display);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

@media print {
    /* A heading alone at the foot of a page, with its run overleaf, reads as a missing run. */
    .story[b-t6jxauhlcq] {
        break-inside: auto;
    }

    .story__head[b-t6jxauhlcq] {
        break-after: avoid;
        break-inside: avoid;
    }
}
/* /Components/Workflows/VoidedNote.razor.rz.scp.css */
/* A voided run, said beside its answers (2026-11-09, lane VOIDSHOW). The board drawer's look: a steel chip and a
   quiet sentence - the answers stay the thing being read. Tokens only. */

.vnote[b-9yqz98vbqw] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-4);
    min-width: 0;
}

.vnote--block[b-9yqz98vbqw] {
    display: flex;
    margin-top: var(--rk-sp-2);
}

.vnote__why[b-9yqz98vbqw],
.vnote__kept[b-9yqz98vbqw] {
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-sentence);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.vnote__kept[b-9yqz98vbqw] {
    font-style: italic;
}
/* /Components/Zones/SiteZoneCard.razor.rz.scp.css */
/*
    WHICH ZONE THIS SITE IS IN, AND THE ZONE PIN. Tokens only - the same classes and the same
    measures as the tax card beside it (SiteTaxCard.razor.css), so the two pins on the site page read
    as one idea rather than two panels that happen to sit together.
*/

.lead[b-qi61zzjmko] {
    margin: 0 0 var(--rk-sp-8);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

.facts[b-qi61zzjmko] {
    display: grid;
    /* 8 x 16px - the site page's own label column (8rem), so this card lines up with its neighbours. */
    grid-template-columns: minmax(calc(var(--rk-sp-16) * 8), max-content) minmax(0, 1fr);
    gap: var(--rk-sp-6) var(--rk-sp-14);
    margin: 0;
}

.facts dt[b-qi61zzjmko] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.facts dd[b-qi61zzjmko] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.value[b-qi61zzjmko] {
    color: var(--rk-ink);
}

.sub[b-qi61zzjmko] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink-soft);
}

/* Links out - to the help and to the map - in accent INK, because small text never wears raw accent. */
.golink[b-qi61zzjmko] {
    align-self: center;
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-ink);
}

.golink:hover[b-qi61zzjmko] {
    text-decoration: none;
}

.note[b-qi61zzjmko] {
    flex: 1 1 100%;
    margin: var(--rk-sp-4) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.lede[b-qi61zzjmko] {
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}
/* /Layout/MainLayout.razor.rz.scp.css */
/*
    THE APPLICATION SHELL.

    Note there is no z-index on .shell or .main. Giving a layout container a
    z-index creates a stacking context and traps every overlay underneath the
    app bar - see the z-index ladder note in rk-tokens.css.

    THE BAR IS PERMANENT DARK CHROME IN BOTH THEMES, so everything painted
    inside it uses --rk-chrome-bg / --rk-chrome-ink / --rk-chrome-mute and
    NEVER --rk-ink / --rk-white. In the dark theme those two resolve to the
    same value and the bar renders invisibly - CLAUDE.md lists that as a trap
    already hit, in this very file. --rk-accent is safe here and is used for
    the borders and the active underline: it is a saturated colour in both
    themes and it is never the text.

    TWO TOKEN FAMILIES AND NO OTHERS: --rk-chrome-* for anything a person
    reads, and --rk-dv-* - the fixed dark-surface values RkFilePreview uses
    for the same reason - for the hairlines and the one "off" state, because
    --rk-chrome-mute IS the resting colour and cannot also be the quiet one.
    Both families hold their value in light and dark, which is the whole
    point: this bar is dark in both themes.

    ⚠️ ::deep IS REQUIRED FOR EVERY .nav-link RULE. NavLink is a component
    and the <a> it renders carries ITS scope attribute, never this file's -
    the bare rules that stood here before matched nothing at all. See the
    note above the link block.

    TWO ROWS, AND THE SECOND ONE COLLAPSES. The brand row always shows the
    wordmark and the company. The nav row is a menu bar from 900px and a
    disclosure panel below it, off the same markup - no second nav for
    phones, because a second nav is the one that goes stale.
*/

.shell[b-uwk60n7bs0] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--rk-paper);
}

.appbar[b-uwk60n7bs0] {
    position: sticky;
    top: 0;
    z-index: var(--rk-z-bar);
    background: var(--rk-chrome-bg);
    color: var(--rk-chrome-ink);
    border-bottom: var(--rk-btn-edge) solid var(--rk-accent);
    padding-top: env(safe-area-inset-top);
}

/* ---------------------------------------------------------- THE BRAND ROW */

.appbar-inner[b-uwk60n7bs0] {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-12);
    min-height: var(--rk-control-h);
}

.mark[b-uwk60n7bs0] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-5xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-5xl);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--rk-chrome-ink);
}

.tag[b-uwk60n7bs0] {
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-chrome-mute);
}

/*
    WHICH COMPANY. Pushed to the right of the brand row and kept at every
    width, because the screens below it never say which company's data they
    are showing and a person may belong to several.
*/
.where[b-uwk60n7bs0] {
    margin-left: auto;
    align-self: center;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-chrome-ink);
    border: var(--rk-border-hair) solid var(--rk-accent);
    border-radius: var(--rk-radius-xs);
    padding: var(--rk-sp-2) var(--rk-sp-8);
    white-space: nowrap;

    /* A long legal-name-shaped code must not push the menu button off a
       375px screen. The code itself is short; this is the guard. */
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
    The disclosure button. A plain element rather than RkButton, because the
    kit paints with --rk-ink / --rk-white and this sits on chrome. See the
    file header.
*/
.menu[b-uwk60n7bs0] {
    align-self: center;

    /* Right-aligned on its own, and tucked beside the company chip when
       there is one - the chip carries the auto margin in that case. The
       adjacent-sibling rule below is what tells the two cases apart, and it
       has to exist because the chip is conditional markup. */
    margin-left: auto;
    min-height: var(--rk-control-sm);
    padding: 0 var(--rk-sp-12);
    background: transparent;
    color: var(--rk-chrome-ink);
    border: var(--rk-border) solid var(--rk-chrome-mute);
    border-radius: var(--rk-radius-0);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    cursor: pointer;
}

.menu:hover[b-uwk60n7bs0] {
    border-color: var(--rk-accent);
}

.menu[aria-expanded="true"][b-uwk60n7bs0] {
    border-color: var(--rk-accent);
    color: var(--rk-chrome-ink);
}

.where + .menu[b-uwk60n7bs0] {
    margin-left: var(--rk-sp-8);
}

/*
    THE HELP BUTTON (lane HP, 2026-10-13). On every page, in the brand row because that row is on
    screen at every width. Chrome pair only, like .menu beside it. It sits after the company chip
    and carries the auto margin itself when there is no chip; on a phone the word goes and the "?"
    stays, because the row is already full (see the 639px note below).
*/
.helpbtn[b-uwk60n7bs0] {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: var(--rk-sp-6);
    min-height: var(--rk-control-sm);
    padding: 0 var(--rk-sp-10);
    background: transparent;
    color: var(--rk-chrome-ink);
    /* NO BORDER (Kirk, 2026-10-14) - the "?" disc is the mark; hover and open light the disc. */
    border: 0;
    border-radius: var(--rk-radius-0);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    cursor: pointer;
}

.mark + .helpbtn[b-uwk60n7bs0],
.tag + .helpbtn[b-uwk60n7bs0] {
    margin-left: auto;
}

.where + .helpbtn[b-uwk60n7bs0] {
    margin-left: var(--rk-sp-8);
}

.helpbtn:hover .helpbtn-mark[b-uwk60n7bs0],
.helpbtn.is-on .helpbtn-mark[b-uwk60n7bs0] {
    background: var(--rk-accent);
}

.helpbtn:focus-visible[b-uwk60n7bs0] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.helpbtn-mark[b-uwk60n7bs0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--rk-fs-4xl);
    height: var(--rk-fs-4xl);
    border-radius: var(--rk-radius-circle);
    background: var(--rk-accent-deep);
    color: var(--rk-chrome-ink);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-flat);
    letter-spacing: 0;
}

.helpbtn + .menu[b-uwk60n7bs0] {
    margin-left: var(--rk-sp-8);
}

/* ------------------------------------------------------------ THE NAV ROW */

/*
    Closed by default, which is the PHONE state. The 900px block below turns
    it back on permanently and hides the button, so the open flag simply
    stops mattering on a desktop rather than needing to be reset.
*/
.navbar[b-uwk60n7bs0] {
    display: none;
    border-top: var(--rk-border-hair) solid var(--rk-dv-4);
}

.navbar.is-open[b-uwk60n7bs0] {
    display: block;

    /* A panel taller than the phone must scroll rather than push the page
       away underneath it. dvh, never vh - the iOS address bar. */
    max-height: 70dvh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
}

.navbar-inner[b-uwk60n7bs0] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    padding-top: var(--rk-sp-8);
    padding-bottom: var(--rk-sp-8);
}

/*
    ------------------------------------------------------- THE TWO-LEVEL MENU

    ONE SET OF RULES, TWO SHAPES. Below 900px a group is an ACCORDION ROW in
    the disclosure panel - tap the word, the panel underneath it expands in
    flow. From 900px the same markup is a MENU BAR and .drop becomes an
    absolutely positioned panel hanging off the bar. Nothing is duplicated and
    there is no second nav to go stale.

    🛑 THE DROPDOWN IS DARK CHROME, NOT PAPER, AND THAT IS DELIBERATE RATHER
    THAN A TASTE. It hangs off a bar that is dark in BOTH themes, so painting
    it on --rk-surface would make it flip underneath a header that does not,
    and it would put --rk-ink / --rk-white back in reach of this file. CLAUDE.md
    lists that exact pair shipping invisible FROM THIS FILE as a trap already
    hit. Staying inside --rk-chrome-* makes the whole class of bug
    unreachable here.
*/

.menu-group[b-uwk60n7bs0] {
    display: flex;
    flex-direction: column;
    border-bottom: var(--rk-border-hair) solid var(--rk-dv-4);
}

/*
    THE TOP-LEVEL WORD. A <button> for a menu and a NavLink for Dispatch, and
    they have to look identical - so every visual property lives here and the
    two selectors below only undo what the element brought with it.
*/
/*
    ⚠️ EVERY .top RULE IS DOUBLED, AND THE SECOND HALF IS NOT REDUNDANT. The menu word
    is a <button>, which lives in THIS file's markup and carries its scope attribute;
    the Dispatch word is a NavLink, which is a COMPONENT, so the <a> it renders carries
    NavLink's scope and never this one's. A bare `.top` compiles to `.top[b-xxxxx]` and
    misses the link entirely - which is exactly the bug recorded above the .nav-link
    block, and it shipped again here: Dispatch rendered as a default underlined browser
    link beside three correctly styled words. ::deep, anchored on .navbar-inner, reaches
    it. Change one half of a pair and you must change the other.
*/
.top[b-uwk60n7bs0],
.navbar-inner[b-uwk60n7bs0]  .top--direct {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-6);
    min-height: var(--rk-control-md);
    padding: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--rk-chrome-mute);
    background: none;
    border: 0;
    cursor: pointer;
}

.top:hover[b-uwk60n7bs0],
.top:focus-visible[b-uwk60n7bs0],
.navbar-inner[b-uwk60n7bs0]  .top--direct:hover,
.navbar-inner[b-uwk60n7bs0]  .top--direct:focus-visible {
    color: var(--rk-chrome-ink);
}

/*
    "YOU ARE IN HERE." NavLink lights the leaf inside the panel; without this
    the word above it stays grey while the person is standing on one of its
    pages, and a menu that cannot say where you are is one people stop opening.
*/
/* The standalone link carries .active from NavLink rather than .is-here. */
.top.is-here[b-uwk60n7bs0],
.menu-group.is-open > .top[b-uwk60n7bs0],
.navbar-inner[b-uwk60n7bs0]  .top--direct.active {
    color: var(--rk-chrome-ink);
}

.caret[b-uwk60n7bs0] {
    width: 0;
    height: 0;
    border-left: var(--rk-sp-4) solid transparent;
    border-right: var(--rk-sp-4) solid transparent;
    border-top: var(--rk-sp-4) solid currentColor;
    opacity: 0.75;
    transition: transform var(--rk-dur-ui) var(--rk-ease);
}

.menu-group.is-open .caret[b-uwk60n7bs0] {
    transform: rotate(180deg);
}

/*
    THE PANEL. Closed is display:none rather than height:0 - a hidden panel
    must be out of the tab order, and a collapsed one with visible children is
    a keyboard trap that nobody sighted will ever notice.
*/
.drop[b-uwk60n7bs0] {
    display: none;
    flex-direction: column;

    /*
        ⚠️ AN EXPLICIT z-index, AND IT IS LOAD-BEARING RATHER THAN DEFENSIVE. The scrim is a
        fixed, full-bleed sibling inside this same stacking context; measured in the browser,
        it hit-tests ON TOP of this panel without this line, so the panel renders and cannot
        be clicked. Painting order says a positioned descendant should beat a negative-z one
        and the DOM disagreed - so this is measured behaviour, not theory. Any value above 0
        works; it only orders within .appbar, which already sits at --rk-z-bar.
    */
    z-index: 1;
    gap: var(--rk-sp-2);
    padding: 0 0 var(--rk-sp-6) var(--rk-sp-10);
}

.menu-group.is-open .drop[b-uwk60n7bs0] {
    display: flex;
}

/* A run heading inside a panel. Null label renders nothing at all - see NavBand. */
.band[b-uwk60n7bs0] {
    /*
        display:block, BECAUSE THIS IS A <span> AND ITS PARENT IS NO LONGER A FLEX BOX.
        It used to be a flex item of .drop, which blockifies it and makes padding-top push
        the following content. Since the .band-group wrapper landed, it is an ordinary
        inline child of a block container - and vertical padding on an inline box does NOT
        affect line height, so the separation below was being drawn and ignored.
    */
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-hero);
    text-transform: uppercase;
    color: var(--rk-dv-mute);
    padding-top: var(--rk-sp-6);
}

/*
    ⚠️ THE WRAPPER BROKE THIS AND THE BREAKAGE WAS INVISIBLE. It read `.band:first-child`,
    which was right while every .band was a direct child of .drop and exactly ONE of them
    could be first. Wrapping each band in a .band-group made EVERY .band the first child of
    its own wrapper, so the rule matched all of them and silently deleted the separation
    between every heading in every menu, at every width - nothing errored and nothing looked
    obviously wrong, it just went flat.

    Keying on the WRAPPER restores the original intent: no top padding on the first band in
    the panel, full separation on the rest.
*/
.band-group:first-child .band[b-uwk60n7bs0] {
    padding-top: 0;
}

/*
    THE SCRIM. z-index -1 is the whole trick and it is not arbitrary: inside
    .appbar's stacking context a negative-z child paints ABOVE the bar's own
    background and BELOW its in-flow content, so it covers the page and
    catches the click without ever sitting over the bar or the open panel.
    position:fixed, so it covers a scrolled page too.
*/
.scrim[b-uwk60n7bs0] {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: transparent;
}

/*
    ⚠️ ::deep IS LOAD-BEARING HERE AND ITS ABSENCE WAS A REAL BUG.

    NavLink is a COMPONENT: the <a> it renders belongs to NavLink's markup,
    not to this file's, so it never carries this component's scope
    attribute. The rules that stood here before were written bare and
    compiled to `.nav-link[b-uwk60n7bs0]`, which matched NOTHING - the app
    bar's links have been rendering as unstyled anchors since the first
    commit. Anchoring on .navbar-inner, which IS in this file's markup,
    is what reaches them.
*/
.navbar-inner[b-uwk60n7bs0]  .nav-link {
    display: flex;
    align-items: center;

    /*
        --rk-control-md, the middle rung, and NOT --rk-tap. Measured at 375x812: eight
        entries at the 56px touch floor push the name and the sign-out link below the
        panel's own scroll line, so the way OUT of the app is the one thing a person has
        to go looking for. 44px is still a comfortable thumb target and brings the whole
        panel onto one phone screen.
    */
    min-height: var(--rk-control-md);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--rk-chrome-mute);
    border-left: var(--rk-rail) solid transparent;
    padding-left: var(--rk-sp-10);
}

.navbar-inner[b-uwk60n7bs0]  .nav-link:hover {
    color: var(--rk-chrome-ink);
}

.navbar-inner[b-uwk60n7bs0]  .nav-link.active {
    color: var(--rk-chrome-ink);
    border-left-color: var(--rk-accent);
}

.navbar-inner[b-uwk60n7bs0]  .nav-link--quiet {
    font-size: var(--rk-fs-xl);
}

/* ------------------------------------------------------- WHO, AND THE WAY OUT */

.who[b-uwk60n7bs0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rk-sp-4);
    padding-top: var(--rk-sp-10);
}

.who-name[b-uwk60n7bs0] {
    font-size: var(--rk-fs-lg);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-chrome-ink);
}

/*
    APPEARANCE - LIGHT / DARK / AUTO.

    Three plain buttons, not a kit control and not a wrapped segmented box.
    Two reasons, and neither is taste. First, the kit paints with --rk-ink /
    --rk-white and this sits on chrome - the file header says why that pair
    is forbidden here. Second, a bordered group is taller than its contents,
    and at 900px the nav row is exactly --rk-control-h; a box with padding
    and a border would grow the whole bar by a few pixels on every screen in
    the app to hold three words.

    So it borrows the idiom already on screen instead: resting text in
    --rk-chrome-mute, and the ACTIVE one lit and underlined in --rk-accent,
    which is precisely how .nav-link.active reads at desktop width. A person
    who has learned the bar already knows what the lit one means.

    ⚠️ IT IS ORDERED LAST ON THE PHONE AND THAT IS NOT COSMETIC. The panel
    caps at 70dvh and scrolls; the .nav-link block above records the day the
    entries grew and pushed SIGN OUT below that line, which made the way out
    of the app the one thing a person had to hunt for. An appearance row
    added before it walks straight back into that. So it sits after sign-out
    on the phone and returns to its markup position - first, left of the
    name - at the width where the whole row is on one line anyway.
*/
/* ============================================================================
   APPEARANCE - AND IT LIVES IN THE BRAND ROW, NOT IN .who. MEASURED, 2026-09-19.
   ============================================================================
   It shipped inside .who and a review measured what that cost: .theme is 184px,
   the nav groups already total 902px, and .who went 151px -> 345px. Between
   roughly 1130px and 1330px the whole .who block wrapped to a second line and
   THE APP BAR GREW 40px -> 98px ON EVERY SCREEN IN THE APP - a band that
   contains 1280x800 and 1152x864, so a large share of real laptops.

   The stylesheet already argued against a bordered segmented control because it
   "would grow the whole bar by a few pixels on every screen in the app to hold
   three words." That reasoning was right; the first implementation added 58px by
   a different route.

   AND IT WAS GOING TO GET WORSE RATHER THAN BETTER: Setup, Workflows and Events
   nav entries landed the same day, each one widening the first row and pushing
   the wrap threshold up. Anything parked beside the nav groups is on a collision
   course with the menu growing.

   The brand row has free space at every width, so it goes there. That also fixes
   a second finding for free: on a phone the control sat inside the nav panel,
   which is capped at 70dvh, and it was the FIRST thing clipped below SIGN OUT.
   In the brand row it is always on screen, which is where "turn the lights on"
   belongs - including signed out, because the sign-in screen is the worst moment
   to be unable to. */
.theme[b-uwk60n7bs0] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-10);
    margin-left: auto;
}

/* VISUALLY HIDDEN, NOT DELETED. The three lit/unlit words read as a picker on
   their own and the label was 60px of the width this move exists to reclaim -
   but the text still names the group for anyone who reaches it by voice, where
   "click Theme" has to match something. role="group" + aria-label carries the
   accessible name; this carries the spoken one. */
.theme-label[b-uwk60n7bs0] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* THE THEME ICON - one button, three states (2026-10-14). The word rides inside, visually hidden. */
.theme-cycle[b-uwk60n7bs0] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--rk-control-sm);
    min-height: var(--rk-control-sm);
    padding: 0;
    background: transparent;
    color: var(--rk-chrome-mute);
    border: 0;
    cursor: pointer;
}

.theme-cycle:hover[b-uwk60n7bs0] {
    color: var(--rk-chrome-ink);
}

.theme-cycle:focus-visible[b-uwk60n7bs0] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.theme-cycle svg[b-uwk60n7bs0] {
    width: var(--rk-fs-4xl);
    height: var(--rk-fs-4xl);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-cycle .theme-fill[b-uwk60n7bs0] {
    fill: currentColor;
    stroke: none;
}

.theme-pick[b-uwk60n7bs0] {
    min-height: var(--rk-control-sm);
    padding: 0;
    background: transparent;
    color: var(--rk-chrome-mute);
    border: 0;
    border-bottom: var(--rk-sp-3) solid transparent;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    cursor: pointer;
}

.theme-pick:hover[b-uwk60n7bs0] {
    color: var(--rk-chrome-ink);
}

.theme-pick.is-on[b-uwk60n7bs0] {
    color: var(--rk-chrome-ink);
    border-bottom-color: var(--rk-accent);
}

.signout[b-uwk60n7bs0] {
    min-height: var(--rk-control-sm);
    padding: 0 var(--rk-sp-10) 0 0;
    background: transparent;
    color: var(--rk-chrome-mute);
    border: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: var(--rk-sp-3);
    cursor: pointer;
}

.signout:hover[b-uwk60n7bs0] {
    color: var(--rk-chrome-ink);
}

/*
    Dimmer than the resting state, which --rk-chrome-mute cannot be: it IS the resting
    colour, and --rk-dv-mute is the same hex. --rk-dv-4 is the one fixed dark-chrome value
    that reads as "off" against --rk-chrome-bg in both themes.
*/
.signout:disabled[b-uwk60n7bs0] {
    color: var(--rk-dv-4);
    cursor: default;
    text-decoration: none;
}

/* ------------------------------------------------------------ BREAKPOINTS */

/* The tagline is noise on a phone - the wordmark is enough. */
@media (max-width: 639px) {
    .tag[b-uwk60n7bs0] {
        display: none;
    }

    /*
        THE BRAND ROW WRAPS ON A PHONE, AND IT HAS TO - MEASURED 2026-09-20 AT 375px,
        ON EVERY PAGE IN THE APP.

        `document.documentElement.scrollWidth` was 386 against a 375 client width, so
        every screen scrolled sideways by 11px. The overflowing element is `.menu`,
        whose right edge sat at 386 where the padding box ends at 359.

        THE GUARD WAS ALREADY WRITTEN AND IT WAS OVERTAKEN. `.where` carries
        `max-width: 40%` with the comment "a long legal-name-shaped code must not
        push the menu button off a 375px screen" - correct, still there, and sized
        against the row as it stood. `.theme` moved into this row on 2026-09-19 to
        stop a 40px -> 98px wrap between 1130 and 1330, and it is 129px wide. The
        arithmetic at 375: 343 of content box against mark 124 + where 18 +
        theme 129 + menu 64 + three 12px gaps = 371. Twenty-eight over, and `.where`
        was ALREADY squeezed to 18px trying to absorb it, which is why the company
        chip reads as a sliver rather than as a name.

        WRAPPING RATHER THAN SHRINKING, DELIBERATELY. Tightening the gaps buys about
        32px and fits - once. The 2026-09-19 note above predicted its own successor:
        "anything parked beside the nav groups is on a collision course with the menu
        growing." A one-row fit at 375 with 4px of slack is that collision rescheduled,
        not avoided. A second row on a phone costs height the phone has and nothing on
        the desktop, where the 09-19 objection - growing the bar on EVERY screen - was
        the whole point.

        So: the appearance picker takes the second line and the identity row keeps
        wordmark, company and MENU. `.theme` drops its auto margin because a full-width
        item has no free space to push against, and justifies its own contents right so
        the picker still lines up under MENU.
    */
    .appbar-inner[b-uwk60n7bs0] {
        flex-wrap: wrap;
        row-gap: var(--rk-sp-2);
        padding-bottom: var(--rk-sp-4);
    }

    .theme[b-uwk60n7bs0] {
        order: 1;
        flex: 1 0 100%;
        justify-content: flex-end;
        margin-left: 0;
    }

    .helpbtn[b-uwk60n7bs0] {
        padding: 0 var(--rk-sp-6);
    }

    .helpbtn-word[b-uwk60n7bs0] {
        display: none;
    }
}

/*
    THE MENU BAR. From 900px the nav row is always present, lies on one line,
    and the disclosure button disappears. Same elements, different flow.
*/
@media (min-width: 900px) {

    .menu[b-uwk60n7bs0] {
        display: none;
    }

    .navbar[b-uwk60n7bs0] {
        display: block;
    }

    .navbar-inner[b-uwk60n7bs0] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: var(--rk-sp-16);
        padding-top: 0;
        padding-bottom: 0;
    }

    /*
        The bar itself becomes a positioning context so .drop can hang off the
        GROUP rather than off the viewport, and so the bar paints above the
        scrim by DOM order among positioned elements.
    */
    .navbar[b-uwk60n7bs0] {
        position: relative;
    }

    /*
        🛑 THE PHONE PANEL'S CAP MUST BE UNDONE HERE, AND UNTIL 2026-09-21 IT WAS NOT.
        MEASURED IN A BROWSER AT 1280x900, NOT REASONED ABOUT.

        `.navbar.is-open` above carries `max-height: 70dvh; overflow-y: auto` so a tall
        disclosure panel scrolls instead of pushing the phone's page away. That rule is
        right and stays. The trouble is that `.is-open` is `_menuOpen`, which is toggled
        by a button this block sets to `display: none` - so nothing ever turns it off,
        and it SURVIVES A RESIZE. Open the panel at 700px, widen past 900, or simply
        rotate a tablet across the 768 -> 1024 boundary, and the desktop bar is still
        wearing the phone's scrollport.

        What that costs is not cosmetic. `.drop` is absolutely positioned and its
        containing block, `.menu-group`, is INSIDE `.navbar` - so an overflow ancestor
        clips it. Measured with Ops open: the nav box is 41px tall and the panel's
        layout box runs 793px past its bottom edge, and `elementFromPoint` over CONTROL
        KIT returns a page div. THE WHOLE DROPDOWN IS INVISIBLE AND UNCLICKABLE. The
        word lights, the caret turns, and nothing appears.

        This is also the ancestor that would have defeated any z-index fix: clipping is
        not a stacking question and no value on `.drop` lifts it out of a scrollport.

        `overflow`, not `overflow-y`: the phone rule names one axis, but a non-visible
        overflow in one axis computes the other to `auto`, so both have to come back.
    */
    .navbar.is-open[b-uwk60n7bs0] {
        max-height: none;
        overflow: visible;
    }

    .menu-group[b-uwk60n7bs0] {
        position: relative;
        border-bottom: 0;
    }

    .top[b-uwk60n7bs0],
    .navbar-inner[b-uwk60n7bs0]  .top--direct {
        min-height: var(--rk-control-h);
        font-size: var(--rk-fs-2xl);
        border-bottom: var(--rk-sp-3) solid transparent;
    }

    /*
        THE UNDERLINE IS THE "YOU ARE HERE", exactly as .nav-link.active reads
        at this width. Keeping one visual idiom for two levels is what stops
        the bar looking like two different products stacked.
    */
    .top.is-here[b-uwk60n7bs0],
    .navbar-inner[b-uwk60n7bs0]  .top--direct.active {
        border-bottom-color: var(--rk-accent);
    }

    /* Open but not current: a quieter rule, so the two states never collide. */
    .menu-group.is-open > .top[b-uwk60n7bs0] {
        border-bottom-color: var(--rk-dv-mute);
    }

    .menu-group.is-open > .top.is-here[b-uwk60n7bs0] {
        border-bottom-color: var(--rk-accent);
    }

    .drop[b-uwk60n7bs0] {
        position: absolute;
        top: 100%;
        left: calc(var(--rk-sp-10) * -1);
        min-width: 13rem;
        padding: var(--rk-sp-8) var(--rk-sp-10) var(--rk-sp-10);
        background: var(--rk-chrome-bg);
        border: var(--rk-border-hair) solid var(--rk-dv-4);
        border-top: var(--rk-sp-3) solid var(--rk-accent);
        box-shadow: var(--rk-shadow-drop);
    }

    /*
        TWO COLUMNS WHEN A MENU IS TALL. Kirk, 2026-09-24, with a screenshot of Ops running
        off the bottom of the screen: "its longer than my string". Ops is 27 rows.

        column-count RATHER THAN A GRID, because the bands are different heights and the
        browser's own balancer packs them better than any row count I could pick. It also
        needs no second measurement when a band is added.

        🛑 break-inside ON .band-group IS THE WHOLE TRICK. Without it the break lands
        wherever it likes - including between "CONFIGURE" and the stops under it - and a
        heading stranded at the foot of column one reads as a heading for whatever starts
        column two. That is worse than a long menu, because it is confidently wrong.
    */
    /*
        🛑 THE SELECTOR AND THE display LINE ARE BOTH LOAD-BEARING. READ BEFORE SIMPLIFYING.

        This rule shipped on 2026-09-24 as a bare `.drop.is-tall { column-count: 2 }`. It
        deployed, it was correct CSS, it was live in the served stylesheet with the right
        scope id inside the right media query - AND IT DID ABSOLUTELY NOTHING, because:

          1. COLUMN-COUNT IS IGNORED ON A FLEX CONTAINER. `.menu-group.is-open .drop` sets
             `display: flex`, and the multi-column spec simply does not apply to a flex box.
             Every debugging instinct says "the CSS did not deploy" and the CSS had deployed
             perfectly. Exactly the complete-but-unplugged pattern CLAUDE.md opens with.

          2. AND FIXING (1) THE OBVIOUS WAY FAILS TOO. Adding `display: block` to
             `.drop.is-tall` LOSES THE CASCADE: that selector is two classes and
             `.menu-group.is-open .drop` is three, so flex wins and the menu stays one
             column. Two plausible fixes in a row that change nothing is how an afternoon
             disappears - hence `.menu-group.is-open` here, purely for specificity.

        Kirk found this by reloading a menu that would not split while I was reading the
        stylesheet and telling him it was fine. Drive it, do not read it.
    */
    .menu-group.is-open .drop.is-tall[b-uwk60n7bs0] {
        display: block;
        column-count: 2;
        column-gap: var(--rk-sp-16);
    }

    /*
        `gap` ON .drop IS A FLEX PROPERTY AND DIES WITH THE display SWITCH ABOVE. It spaced
        the band groups apart (never the links - those sit inside a .band-group and were
        already in block flow), so this restores exactly that one spacing and nothing else.
    */
    .drop.is-tall .band-group + .band-group[b-uwk60n7bs0] {
        margin-top: var(--rk-sp-2);
    }

    .band-group[b-uwk60n7bs0] {
        break-inside: avoid;
        /* A column box establishes its own block formatting context; without this the
           wrapper collapses and the first band's heading loses its top spacing. */
        display: flow-root;
    }

    /*
        OPS IN THREE COLUMNS (Kirk, 2026-10-16: "we need OPs to just be three columns").
        Column one stacks Automation, Connect and People; the last band, Configure, takes columns
        two and three - a grid for the two halves, then column-count INSIDE Configure so its links
        flow under one heading that spans both. Overrides the two-column rule above (same
        specificity plus .is-three, so it wins the cascade - see the flex note above).
    */
    .menu-group.is-open .drop.is-tall.is-three[b-uwk60n7bs0] {
        display: grid;
        grid-template-columns: max-content max-content;
        column-gap: var(--rk-sp-16);
        align-items: start;
        align-content: start;
        column-count: auto;
    }

    .drop.is-three .band-group[b-uwk60n7bs0] {
        grid-column: 1;
    }

    .drop.is-three .band-group:last-child[b-uwk60n7bs0] {
        grid-column: 2;
        grid-row: 1 / span 12;
        column-count: 2;
        column-gap: var(--rk-sp-16);
        break-inside: auto;
    }

    /* The CONFIGURE heading runs across both of its columns. */
    .drop.is-three .band-group:last-child .band[b-uwk60n7bs0] {
        column-span: all;
    }

    .drop.is-three .band-group:last-child[b-uwk60n7bs0]  .nav-link {
        break-inside: avoid;
    }

    /*
        THREE COLUMNS ARE ~700px WIDE, so the panel hangs off the BAR'S left edge rather than the
        Ops word, which sits far enough right that a word-anchored panel ran off the screen below
        ~1200px. The group drops its own positioning and .navbar-inner becomes the anchor.
    */
    .navbar-inner[b-uwk60n7bs0] {
        position: relative;
    }

    .menu-group.menu-group--wide[b-uwk60n7bs0] {
        position: static;
    }

    .menu-group--wide .drop[b-uwk60n7bs0] {
        left: 0;
    }

    /*
        ⚠️ THERE IS DELIBERATELY NO RIGHT-ALIGN RULE HERE. The obvious one -
        .menu-group:last-of-type .drop - MATCHES NOTHING: :last-of-type keys on the ELEMENT
        type, and .who is a later <div> sibling, so no .menu-group is ever the last div. It
        was written, it compiled, and it silently did nothing, which is the same class of bug
        the ::deep note above records. It is not needed either: four words starting at the
        left edge put the widest panel (Ops) about 280px in, and a 208px panel from there
        clears 900px comfortably. If a fifth menu ever lands, measure before adding a rule.
    */

    .navbar-inner[b-uwk60n7bs0]  .nav-link {
        min-height: var(--rk-control-md);
        font-size: var(--rk-fs-2xl);
        border-left: var(--rk-rail) solid transparent;
        padding-left: var(--rk-sp-8);
        border-bottom: 0;
        white-space: nowrap;
    }

    .navbar-inner[b-uwk60n7bs0]  .nav-link.active {
        border-left-color: var(--rk-accent);
        border-bottom-color: transparent;
    }

    .who[b-uwk60n7bs0] {
        flex-direction: row;
        align-items: center;
        gap: var(--rk-sp-12);
        margin-left: auto;
        padding-top: 0;
    }

    .signout[b-uwk60n7bs0] {
        padding: 0;
    }
}

/*
    THE TABLET RANGE (Kirk 2026-11-11, with a screenshot: "prevent this top nav from getting so
    insane on a tablet width"). Between the menu-bar breakpoint (900) and a wide desk, the nav
    words plus the identity cluster overflow one row, and flex-wrap drops "Kirk Barrett /
    Switch company / Sign out" onto its OWN full-height band - a third storey of chrome.

    The fix is the same trade the brand row already made with the tagline: in the squeeze, the
    NAME is the ornament and the doors are the point. The name hides, the gaps and the type come
    in one notch, and the row fits. From 1360px everything returns.
*/
@media (min-width: 900px) and (max-width: 1359px) {

    .who-name[b-uwk60n7bs0] {
        display: none;
    }

    .navbar-inner[b-uwk60n7bs0] {
        gap: var(--rk-sp-10);
    }

    .top[b-uwk60n7bs0],
    .navbar-inner[b-uwk60n7bs0]  .top--direct {
        font-size: var(--rk-fs-xl);
        letter-spacing: var(--rk-track-lg);
    }

    .who[b-uwk60n7bs0] {
        gap: var(--rk-sp-8);
    }
}

/* ----------------------------------------------------------------- THE PAGE */

.main[b-uwk60n7bs0] {
    flex: 1;
    padding-top: var(--rk-sp-20);
    padding-bottom: var(--rk-sp-28);
}

/* ---------------------------------------------------------- THE RUNNER DOCK */

/*
    ROOM FOR THE SLIDE-IN RUNNER. RunDrawer is position:fixed, width min(100%, --rk-dialog-w),
    on the right from the top of the window. From 1280px - where the kit's column goes fluid and
    a desk has the width - the shell gives up exactly that much on its right, so the app bar and
    the page sit BESIDE the panel and nothing is covered: the estimate a step opened and the step
    that opened it are both on screen. Below 1280px this does nothing and the panel overlays; see
    RunDrawer.razor.css for how it steps aside there.

    ⚠️ PADDING ON THE SHELL, NOT A Z-INDEX OR A TRANSFORM. The note at the top of this file is why:
    either of those would make .shell a stacking context or a containing block, and every fixed
    overlay underneath - the modals, the board drawer, the toasts - would be trapped inside it.
*/
@media (min-width: 1280px) {
    .shell--run[b-uwk60n7bs0] {
        padding-right: var(--rk-dialog-w);
    }
}
/* /Layout/PublicToolsOnly.razor.rz.scp.css */
/* A PUBLIC TOOLS SIGN-IN IN THE PORTAL (lane PT) - one card, one sentence. Tokens only. */

.pto[b-r56jsr6hhe] {
    max-width: var(--rk-measure);
    margin: var(--rk-sp-16) auto;
    padding-inline: var(--rk-sp-16);
}

.pto__line[b-r56jsr6hhe] {
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.pto__link[b-r56jsr6hhe] {
    color: var(--rk-accent-ink);
    font-weight: var(--rk-fw-semibold);
}

.pto__actions[b-r56jsr6hhe] {
    display: flex;
    gap: var(--rk-sp-8);
}
/* /Layout/RouteGuard.razor.rz.scp.css */
/*
    ONE RULE, FOR A FRAME THAT SHOULD NEVER PAINT.

    The blocked state redirects from OnParametersSet and Blazor drains its render queue before
    the browser paints, so in practice this line is never seen. It is styled anyway because the
    case where it IS seen is the case where something went wrong, and a bare unstyled sentence
    on a white page is a worse explanation than a quiet one on the app's own paper.

    Tokens only, per the house rule - and --rk-ink-soft rather than --rk-ink because this is
    secondary text. Both flip correctly with the theme; the --rk-ink / --rk-white pair that does
    not is the trap recorded against the app bar, and nothing here goes near it.
*/
.guard[b-7vzp6trqsn] {
    margin: 0;
    padding: 2rem 1rem;
    font-family: var(--rk-font-body);
    color: var(--rk-ink-soft);
    text-align: center;
}
/* /Pages/Actions.razor.rz.scp.css */
/* The action launcher. Layout only - every value is a token from rk-tokens.css. */

.act__waiting[b-bzgf585q10] {
    margin-bottom: var(--rk-sp-16);
    max-width: var(--rk-measure);
}

.act__find[b-bzgf585q10] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-8);
    margin-bottom: var(--rk-sp-16);
    max-width: var(--rk-measure);
}

.act__box[b-bzgf585q10] {
    flex: 1 1 auto;
}

.act__group[b-bzgf585q10] {
    margin-bottom: var(--rk-sp-20);
}

.act__head[b-bzgf585q10] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
}

.act__lede[b-bzgf585q10] {
    margin: var(--rk-sp-2) 0 var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.act__grid[b-bzgf585q10] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--rk-sp-10);
}

/* A whole card is the button. Kirk: "Make sure dispatch board is easy for old guys" - the
   same applies here, and a 44px target inside a card is a smaller thing to hit than the
   card. */
.act__card[b-bzgf585q10] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    padding: var(--rk-sp-12);
    border: var(--rk-border-card);
    border-left: var(--rk-rail) solid var(--rk-accent);
    background: var(--rk-card);
    color: var(--rk-ink);
    text-align: left;
    cursor: pointer;
    min-block-size: var(--rk-tap);
    transition: background var(--rk-dur-press) var(--rk-ease);
}

.act__card:hover[b-bzgf585q10] {
    background: var(--rk-hover-ghost);
}

.act__card:focus-visible[b-bzgf585q10] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: 2px;
}

.act__verb[b-bzgf585q10] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.act__what[b-bzgf585q10] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-tight);
}

.act__why[b-bzgf585q10] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
    line-height: var(--rk-lh-snug);
}
/* /Pages/ActivityRuns.razor.rz.scp.css */
/* ==========================================================================================
   ACTIVITY - the runs that belong to a person rather than to a job.

   EVERY VALUE HERE IS A TOKEN FROM rk-tokens.css. No raw colour, size, radius or shadow -
   CLAUDE.md's Conventions, and the reason the control kit exists at all.

   ⚠️ NOTHING PAIRS --rk-ink WITH --rk-white. The dark theme resolves both to #e9e4d8, giving
   a 1:1 contrast ratio and invisible text. That shipped once. There is no permanent dark
   chrome on this page, so the pair never appears. Accent-coloured small text uses
   --rk-accent-ink and never --rk-accent, for the same measured reason.

   ONE APP, DESKTOP AND PHONE. The window bar and the tally wrap; the tables are the kit's
   own and carry their own narrow behaviour. Nothing is hidden at either end - a supervisor
   checking who filed a vehicle check is very often standing in a yard with a phone.
   ========================================================================================== */

.act[b-768t151efy] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-5);
}

/* ------------------------------------------------------------------------- THE FILTERS */

/*
   ONE BAR, THREE GROUPS, AND IT WRAPS RATHER THAN SCROLLS. The window, the three axes and
   the open-only chip are one row on a desk and three stacked rows on a handset. A filter
   bar that scrolls sideways is a filter nobody past the third control ever finds.
*/
.act__bar[b-768t151efy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4);
    align-items: flex-end;
}

.act__group[b-768t151efy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-3);
    align-items: flex-end;
}

.act__date[b-768t151efy] {
    min-width: 10rem;
}

.act__pick[b-768t151efy] {
    min-width: 13rem;
}

/* --------------------------------------------------------------------------- THE TALLY */

.act__tally[b-768t151efy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-2);
    align-items: center;
}

/* ---------------------------------------------------------------------------- THE ROWS */

/*
   WHOSE DAY IT IS, AND IT IS THE LOUDEST THING IN THE ROW. That is the whole argument of
   this screen: an activity run's subject is a person, so the person is the first column
   and reads as the heading of the row rather than as one field among six.
*/
.act__who[b-768t151efy] {
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
}

/* The procedure's name, and the step name in the answer grid - identifiers, so mono. */
.act__name[b-768t151efy] {
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-2xs);
}

/*
   THE CAPTURED ANSWER. Wraps rather than truncating with an ellipsis: a reading, a note or
   a serial number that is cut off is a cell somebody has to open the run to read, which is
   exactly the round trip this grid exists to remove.
*/
.act__value[b-768t151efy] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    max-width: var(--rk-measure);
    overflow-wrap: anywhere;
}

.act__what[b-768t151efy] {
    margin-top: var(--rk-sp-1);
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    max-width: var(--rk-measure);
}

.act__count[b-768t151efy] {
    white-space: nowrap;
}

.act__act[b-768t151efy] {
    text-align: right;
    white-space: nowrap;
}

/* WHAT THE PERSON WITHDREW (2026-10-28) - the quiet count with its Show, and, when shown, the value greyed beside its
   "Backed out - not on the record" chip. */
.act__withdrawn[b-768t151efy] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
    margin: var(--rk-sp-8) 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.act__value--withdrawn[b-768t151efy] {
    color: var(--rk-steel);
}
/* /Pages/AgreementCenter.razor.rz.scp.css */
/*
    ONE RECURRING COMMITMENT.

    Layout only, tokens only, no literal colour anywhere.

    ⚠️ ::deep for any kit class. A Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches
    nothing.
*/

/* ---------------------------------------------------------------------------------------
   THE TWO-COLUMN SHELL.

   Decision 34: "on the right side of every screen - at top - the workflows for this that you
   need to do and progress bar." The runner is not wired here, so the rail carries the
   at-a-glance facts and what the commitment owes. When the panel arrives it goes FIRST
   inside .centre__side and everything below simply moves down.

   The rail is --rk-lane-w, the same width a board lane uses, so a person moving between the
   two screens sees one system rather than two.
   --------------------------------------------------------------------------------------- */
.centre[b-1mz6szcoq3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-20);
    align-items: start;
    padding-bottom: var(--rk-sp-40);
}

@media (min-width: 1080px) {
    .centre[b-1mz6szcoq3] {
        grid-template-columns: minmax(0, 1fr) var(--rk-lane-w);
    }
}

.centre__main[b-1mz6szcoq3] {
    min-width: 0;
}

.centre__side[b-1mz6szcoq3] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    min-width: 0;
}

/* On a phone the summary goes first - what it owes is the question somebody opened it for. */
@media (max-width: 1079px) {
    .centre__side[b-1mz6szcoq3] {
        order: -1;
    }
}

/* ---------------------------------------------------------------------------------------
   THE BREADCRUMB.
   --------------------------------------------------------------------------------------- */
.crumb[b-1mz6szcoq3] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    text-decoration: none;
}

.crumb:hover[b-1mz6szcoq3] {
    color: var(--rk-accent-ink);
}

.crumb--here[b-1mz6szcoq3] {
    color: var(--rk-ink);
    text-transform: none;
    letter-spacing: normal;
}

.crumb__sep[b-1mz6szcoq3] {
    margin: 0 var(--rk-sp-5);
    color: var(--rk-line-hard);
}

/* ---------------------------------------------------------------------------------------
   A TAB PANE.
   --------------------------------------------------------------------------------------- */
.pane[b-1mz6szcoq3] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    padding-top: var(--rk-sp-8);
}

.pane__head[b-1mz6szcoq3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rk-sp-12);
}

.pane__lede[b-1mz6szcoq3] {
    flex: 1 1 24rem;
    max-width: var(--rk-measure);
    margin: 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.showing[b-1mz6szcoq3] {
    margin: var(--rk-sp-6) 0 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE CADENCE CARDS. The server's own sentence is the headline - a rule is READ, not
   decoded from six numbered columns.
   --------------------------------------------------------------------------------------- */
.lines[b-1mz6szcoq3] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.line__head[b-1mz6szcoq3] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rk-sp-8);
}

.line__say[b-1mz6szcoq3] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.line__seq[b-1mz6szcoq3] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.line__what[b-1mz6szcoq3] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   FACT LISTS - the rail and the cadence cards share them.
   --------------------------------------------------------------------------------------- */
.facts[b-1mz6szcoq3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--rk-sp-8) var(--rk-sp-14);
    margin: 0;
}

.facts--rail[b-1mz6szcoq3] {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-8);
}

.fact[b-1mz6szcoq3] {
    min-width: 0;
}

.fact dt[b-1mz6szcoq3] {
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.fact dd[b-1mz6szcoq3] {
    margin: var(--rk-sp-1) 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink);
}

/* An unnamed commitment says so quietly - it is not a fault, it is how every one started. */
.fact__none[b-1mz6szcoq3] {
    color: var(--rk-ink-soft);
}

/* Past due is the one number in the rail somebody has to act on, so it is the one in red. */
.fact__bad[b-1mz6szcoq3] {
    color: var(--rk-danger-ink);
}

/* ---------------------------------------------------------------------------------------
   THE OBLIGATIONS SECTION.
   --------------------------------------------------------------------------------------- */
.obar[b-1mz6szcoq3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rk-sp-12);
    padding-bottom: var(--rk-sp-10);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.obar__dates[b-1mz6szcoq3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
}

.picked[b-1mz6szcoq3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-8) var(--rk-sp-12);
    background: var(--rk-accent-soft);
    border-left: var(--rk-rail) solid var(--rk-accent);
    border-radius: var(--rk-radius-xs);
}

.picked__word[b-1mz6szcoq3] {
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   THE WINDOW BAND - three dates and a rule between them.

   ⚠️ THIS IS THE WHOLE OF DECISION 22 ON THE SCREEN. An occurrence has a WINDOW - earliest,
   target, due-by - not a date, and the band is what tells a dispatcher how much room they
   have before a promise breaks. Rendering one date here would throw the model away while
   looking perfectly tidy.
   --------------------------------------------------------------------------------------- */
.win[b-1mz6szcoq3] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-4);
    flex-wrap: nowrap;
    white-space: nowrap;
}

.win__edge[b-1mz6szcoq3] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.win__target[b-1mz6szcoq3] {
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.win__bar[b-1mz6szcoq3] {
    flex: 0 0 var(--rk-sp-16);
    height: 2px;
    background: var(--rk-line-hard);
}

.cell--window[b-1mz6szcoq3] {
    min-width: 20rem;
}

.cell--slack[b-1mz6szcoq3] {
    min-width: 11rem;
}

.cell__title[b-1mz6szcoq3] {
    display: block;
    color: var(--rk-ink);
}

.cell__title--bad[b-1mz6szcoq3] {
    color: var(--rk-danger-ink);
    font-weight: var(--rk-fw-semibold);
}

.cell__tag[b-1mz6szcoq3] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.cell__link[b-1mz6szcoq3] {
    color: var(--rk-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rk-line-hard);
}

.cell__link:hover[b-1mz6szcoq3] {
    color: var(--rk-accent-ink);
    border-bottom-color: var(--rk-accent);
}

.cell--do[b-1mz6szcoq3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4);
    align-items: center;
}

.pager[b-1mz6szcoq3] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-12) 0 var(--rk-sp-20);
}

.pager__word[b-1mz6szcoq3] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE DIALOGS.
   --------------------------------------------------------------------------------------- */
.dialog__lede[b-1mz6szcoq3] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-12);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* The consequence line under a dialog's own controls - what the choice above will actually
   do, in the dispatcher's words. Small text uses --rk-accent-ink and never --rk-accent. */
.dialog__note[b-1mz6szcoq3] {
    max-width: var(--rk-measure);
    margin: var(--rk-sp-8) 0 0;
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-accent-ink);
}

.form[b-1mz6szcoq3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--rk-sp-10);
    margin: var(--rk-sp-12) 0;
}

.pickrow[b-1mz6szcoq3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    margin-bottom: var(--rk-sp-8);
}

.pickrow__lab[b-1mz6szcoq3] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.frozen[b-1mz6szcoq3] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-12);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE PATTERN MASKS - twelve months, or seven days.
   --------------------------------------------------------------------------------------- */
.mask[b-1mz6szcoq3] {
    margin: var(--rk-sp-8) 0;
    padding: var(--rk-sp-10) var(--rk-sp-12);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-xs);
}

.mask__leg[b-1mz6szcoq3] {
    padding: 0 var(--rk-sp-4);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.mask__grid[b-1mz6szcoq3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--rk-sp-4) var(--rk-sp-10);
}

.sub[b-1mz6szcoq3] {
    margin: var(--rk-sp-16) 0 var(--rk-sp-4);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.sub__lede[b-1mz6szcoq3] {
    max-width: var(--rk-measure);
    margin: 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.verdict[b-1mz6szcoq3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    margin: var(--rk-sp-12) 0;
}

/*
    WHAT THE COVERAGE TABLE IS HOLDING BACK - and why. get_agreement ships every covered row
    with the record and nothing pages them, so the cap is the DOM being protected rather than
    the wire, and the sentence says as much instead of pretending it is a page.
*/
.heldback[b-1mz6szcoq3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-10) 0;
}

.heldback__word[b-1mz6szcoq3] {
    flex: 1 1 20rem;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

/* THE WHERE TAB'S TWO LEDES (lane OR, 2026-10-28) - what the table is, then that its order IS the
   round's standing order. One flex item beside the add button, stacked. */
.pane__ledes[b-1mz6szcoq3] {
    flex: 1 1 24rem;
    display: grid;
    gap: var(--rk-sp-6);
}
/* /Pages/Agreements.razor.rz.scp.css */
/*
    THE COMMITMENT BOOK.

    Layout only, tokens only, no literal colour anywhere. Nothing on this page comes out of a
    customer's database carrying its own colour, so there is not even an inline style
    exception here.

    ⚠️ ::deep for any kit class. A Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches
    nothing.
*/

/* ---------------------------------------------------------------------------------------
   THE MADLIB CARD.
   --------------------------------------------------------------------------------------- */
.make[b-74emvokzjh] {
    margin-bottom: var(--rk-sp-16);
}

.make__typed[b-74emvokzjh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--rk-sp-10);
    margin-top: var(--rk-sp-14);
}

/* ---------------------------------------------------------------------------------------
   THE FILTER BAR. It is the search ARGUMENT - the door refuses a call with no handle - so it
   sits above the list and wraps rather than scrolling out of reach on a phone.
   --------------------------------------------------------------------------------------- */
.bar[b-74emvokzjh] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-12) var(--rk-sp-16);
    padding: var(--rk-sp-12) 0 var(--rk-sp-14);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.bar__group[b-74emvokzjh] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8);
    min-width: 0;
}

.bar__find[b-74emvokzjh] {
    min-width: 18rem;
}

.bar__pick[b-74emvokzjh] {
    min-width: 11rem;
}

.bar__payer[b-74emvokzjh] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-3);
    min-width: 0;
}

.bar__payerlab[b-74emvokzjh] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE PLAN INDEX - what the page opens on.

   There is no "everything" handle on app.AgreementSearch, so the landing state is the plans
   themselves, each one a real handle. Cards rather than a list because the meta line - term,
   window, whether it auto-renews, whether it can be pushed - is what tells somebody which
   plan they meant.
   --------------------------------------------------------------------------------------- */
.plans[b-74emvokzjh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--rk-sp-10);
    margin: var(--rk-sp-16) 0 var(--rk-sp-20);
}

.plan[b-74emvokzjh] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    padding: var(--rk-sp-12) var(--rk-sp-14);
    text-align: left;
    background: var(--rk-card);
    border: var(--rk-border-card);
    border-left: var(--rk-rail) solid var(--rk-steel);
    border-radius: var(--rk-radius-sm);
    cursor: pointer;
    transition: border-color var(--rk-dur-ui) var(--rk-ease), background var(--rk-dur-ui) var(--rk-ease);
}

.plan:hover[b-74emvokzjh],
.plan:focus-visible[b-74emvokzjh] {
    border-left-color: var(--rk-accent);
    background: var(--rk-hover-ghost);
}

.plan__name[b-74emvokzjh] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.plan__count[b-74emvokzjh] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-accent-ink);
}

.plan__meta[b-74emvokzjh] {
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.plan__flag[b-74emvokzjh] {
    margin-top: var(--rk-sp-4);
}

/* ---------------------------------------------------------------------------------------
   THE LIST.
   --------------------------------------------------------------------------------------- */
.showing[b-74emvokzjh] {
    margin: var(--rk-sp-12) 0 var(--rk-sp-6);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.cell--code[b-74emvokzjh] {
    white-space: nowrap;
}

/* The commitment's own short name under its number - in its own case, and allowed to wrap so a
   long name grows the row rather than the number column. */
.cell__name[b-74emvokzjh] {
    display: block;
    /* The number column is 12ch; a name squeezed to that wraps a word per line. 18ch reads as a
       phrase and a longer one still wraps rather than pushing the payer off a phone. */
    min-width: 18ch;
    max-width: 26ch;
    white-space: normal;
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.cell__title[b-74emvokzjh] {
    display: block;
    color: var(--rk-ink);
}

.cell__tag[b-74emvokzjh] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/*
    PAST DUE IS THE ONE THING ON A ROW SOMEBODY HAS TO ACT ON TODAY, so it is the one tag
    that carries a colour. --rk-danger-ink and not --rk-danger: this is small text and the
    raw danger token does not clear the 4.5:1 floor on a card.
*/
.cell__tag--bad[b-74emvokzjh] {
    color: var(--rk-danger-ink);
}

.cell--cadence[b-74emvokzjh],
.cell--due[b-74emvokzjh],
.cell--term[b-74emvokzjh] {
    min-width: 12rem;
}

.pager[b-74emvokzjh] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-14) 0 var(--rk-sp-40);
}

.pager__word[b-74emvokzjh] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}
/* /Pages/ApiKeys.razor.rz.scp.css */
/* ==========================================================================================
   API KEYS - the tenant's own machine credentials.

   EVERY VALUE HERE IS A TOKEN FROM rk-tokens.css. No raw colour, size, radius or shadow -
   CLAUDE.md's Conventions, and the reason the control kit exists at all.

   ⚠️ NOTHING PAIRS --rk-ink WITH --rk-white. The dark theme resolves both to #e9e4d8, giving
   a 1:1 contrast ratio and invisible text. That shipped once and was caught only by rendering
   the real app. The token field below is the place the temptation lives - a credential "wants"
   to look like a terminal - so it is deliberately --rk-field under --rk-ink, which has real
   contrast in both themes. Permanent dark chrome, if it were ever wanted here, is
   --rk-chrome-bg / --rk-chrome-ink, which do not flip.

   ONE APP, DESKTOP AND PHONE. The token row wraps rather than scrolling sideways: somebody
   minting a key on a phone is exactly the person who cannot drag a field to read the end of
   it, and a credential half-read is a credential half-copied.
   ========================================================================================== */

.keys[b-9p1y8dtfql] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-5);
}

/* --------------------------------------------------------------------------- THE FILTERS */

.keys__bar[b-9p1y8dtfql] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4);
    align-items: flex-end;
}

/* ------------------------------------------------------------------------------ THE LIST */

.keys__name[b-9p1y8dtfql] {
    font-weight: var(--rk-fw-semibold);
    line-height: var(--rk-lh-snug);
}

/*
   The public prefix, read as an identifier rather than as prose. It is the string that
   appears in a log line, and matching a log line to a row is the whole job of this cell.
*/
.keys__prefix[b-9p1y8dtfql] {
    margin-top: var(--rk-sp-1);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink-soft);
}

.keys__scope[b-9p1y8dtfql] {
    line-height: var(--rk-lh-snug);
    max-width: var(--rk-measure);
}

.keys__what[b-9p1y8dtfql] {
    margin-top: var(--rk-sp-1);
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    max-width: var(--rk-measure);
}

/*
   "not recorded yet" on the Last used column. Toned DOWN rather than up on purpose: it is an
   absence of a measurement, not a warning about the key, and rendering it loudly would push
   somebody towards revoking a credential that is carrying a nightly export.
*/
.keys__none[b-9p1y8dtfql] {
    color: var(--rk-placeholder);
    font-size: var(--rk-fs-xs);
}

.keys__nowrap[b-9p1y8dtfql] {
    white-space: nowrap;
}

.keys__act[b-9p1y8dtfql] {
    text-align: right;
    white-space: nowrap;
}

/* ----------------------------------------------------------------------- THE SCOPE PICKER */

.keys__scopes[b-9p1y8dtfql] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-3);
    margin: var(--rk-sp-4) 0 0;
    padding: var(--rk-sp-4);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-card);
}

.keys__scopes legend[b-9p1y8dtfql] {
    padding: 0 var(--rk-sp-2);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* ================================================================= THE TOKEN, SHOWN ONCE */

.keys__tokenlabel[b-9p1y8dtfql] {
    display: block;
    margin-top: var(--rk-sp-4);
    margin-bottom: var(--rk-sp-2);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.keys__tokenrow[b-9p1y8dtfql] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-3);
    align-items: center;
}

/*
   THE CREDENTIAL ITSELF. A readonly input rather than a <pre> so that a person whose browser
   refuses the clipboard can still select it with one gesture - see OnCopyClickAsync, which
   focuses this field when navigator.clipboard is unavailable outside a secure context.

   It wraps at the field edge and grows to the panel width; a token you have to scroll to read
   is a token somebody copies half of.
*/
.keys__token[b-9p1y8dtfql] {
    flex: 1 1 22rem;
    min-width: 0;
    padding: var(--rk-sp-3);
    background: var(--rk-field);
    color: var(--rk-ink);
    border: var(--rk-border) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-xs);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-2xs);
    line-height: var(--rk-lh-snug);
}

/* The kit's one focus ring, restated because this input is a raw element rather than RkField. */
.keys__token:focus-visible[b-9p1y8dtfql] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-1);
}
/* /Pages/BagCustody.razor.rz.scp.css */
/* THE CHAIN OF CUSTODY (2026-10-07, lane AE). One block per trip of one of our bags - headed by
   how it ended at the bank - and a row per bank bag. A trip with a missing or unexpected bank
   bag wears the warn rail; every colour is a token from rk-tokens.css. */

.cus__pick[b-7l73bbimud] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8);
    margin-block-end: var(--rk-sp-10);
}

.cus__said[b-7l73bbimud] {
    margin: 0 0 var(--rk-sp-10);
    max-inline-size: var(--rk-measure);
    color: var(--rk-ink-soft);
}

.cus__trip[b-7l73bbimud] {
    margin-block-end: var(--rk-sp-10);
    padding-inline-start: var(--rk-sp-8);
    border-inline-start: var(--rk-rail) solid var(--rk-steel);
}

.cus__trip--warn[b-7l73bbimud] {
    border-inline-start-color: var(--rk-warn);
}

.cus__trip-head[b-7l73bbimud] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-6);
    margin-block-end: var(--rk-sp-6);
}

.cus__bag[b-7l73bbimud] {
    font-family: var(--rk-font-mono);
    font-weight: 700;
    color: var(--rk-ink);
}

.cus__how[b-7l73bbimud] {
    color: var(--rk-ink-soft);
}

.cus__link[b-7l73bbimud] {
    color: var(--rk-accent-ink);
}

.cus__code[b-7l73bbimud] {
    font-family: var(--rk-font-mono);
    color: var(--rk-ink);
}

.cus__sub[b-7l73bbimud] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-steel);
}

/* THE CUSTODY START AND EMPTY THIS BAG (2026-10-29). Two cards above the search: the instant custody counts
   from, and every one of our bags with bank bags in it now, each with its own Empty this bag. Tokens only. */

.cus__start[b-7l73bbimud],
.cus__bags[b-7l73bbimud] {
    margin-block-end: var(--rk-sp-10);
    padding: var(--rk-sp-8);
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line);
    border-inline-start: var(--rk-rail) solid var(--rk-steel);
}

.cus__start-head[b-7l73bbimud] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-6);
    margin-block-end: var(--rk-sp-6);
}

.cus__start-title[b-7l73bbimud] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-bold);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.cus__start-when[b-7l73bbimud] {
    font-family: var(--rk-font-mono);
    color: var(--rk-ink);
}

.cus__bagrow[b-7l73bbimud] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
    padding-block: var(--rk-sp-4);
    border-block-start: var(--rk-border-hair) solid var(--rk-line);
}

.cus__bagrow .cus__bag[b-7l73bbimud] {
    color: var(--rk-accent-ink);
}

/* A bag still holding an EARLIER day's deposit bags (2026-11-09, Jeff's BAG01) - the warning rail, not decoration. */
.cus__bagrow--old[b-7l73bbimud] {
    border-inline-start: var(--rk-border-hair) solid var(--rk-warn);
    padding-inline-start: var(--rk-sp-6);
    background: var(--rk-warn-soft);
}

.cus__bagrow--old .cus__bag[b-7l73bbimud] {
    color: var(--rk-warn-ink);
}

.cus__bagrow .cus__sub[b-7l73bbimud] {
    flex-basis: 100%;
}

.cus__empty[b-7l73bbimud] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-6);
    padding: var(--rk-sp-6);
    margin-block-end: var(--rk-sp-6);
    background: var(--rk-warn-soft);
    border-inline-start: var(--rk-rail) solid var(--rk-warn);
}

.cus__empty .cus__sub[b-7l73bbimud] {
    flex-basis: 100%;
    color: var(--rk-ink-soft);
}

.cus__flag[b-7l73bbimud] {
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    color: var(--rk-danger-ink);
}
/* /Pages/Baselines.razor.rz.scp.css */
/*
    THE BASELINE ADMIN - the loop strip, the ribbon of five steps, and the panel under it.

    🛑 EVERY VALUE IS A TOKEN FROM rk-tokens.css, read from the file: --rk-line is a COLOUR, the
    --rk-border-* tokens are WIDTHS, --rk-rail is a width. CSS silently drops a declaration that reads
    an undeclared custom property - an invented token renders as nothing.
*/

.bl[b-xzgi23ko3f] {
    min-width: 0;
}

/* ------------------------------------------------------------------------------ the loop -- */

.bl-loop[b-xzgi23ko3f] {
    margin-bottom: var(--rk-sp-12);
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-steel);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-card);
}

.bl-loop.is-on[b-xzgi23ko3f] {
    border-left-color: var(--rk-ok);
}

.bl-loop.is-off[b-xzgi23ko3f] {
    border-left-color: var(--rk-warn);
}

.bl-loop-head[b-xzgi23ko3f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}

.bl-loop-tag[b-xzgi23ko3f] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.bl-loop-clock[b-xzgi23ko3f] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-steel);
}

.bl-loop-go[b-xzgi23ko3f] {
    margin-left: auto;
}

.bl-loop-line[b-xzgi23ko3f] {
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink);
}

.bl-loop-sub[b-xzgi23ko3f] {
    margin: var(--rk-sp-2) 0 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
}

.bl-loop-fail[b-xzgi23ko3f] {
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-danger-ink);
}

.bl-loop-toggle[b-xzgi23ko3f] {
    margin-top: var(--rk-sp-4);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--rk-fs-xs);
    color: var(--rk-accent-ink);
    cursor: pointer;
}

.bl-loop-refusals[b-xzgi23ko3f] {
    margin: var(--rk-sp-4) 0 0;
    padding-left: var(--rk-sp-16);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
}

/* ------------------------------------------------------------ the ribbon of five steps -- */

.bl-steps[b-xzgi23ko3f] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-bottom: var(--rk-sp-16);
    border: var(--rk-border-card) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-card);
}

.bl-step[b-xzgi23ko3f] {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "n name"
        "big big"
        "sub sub";
    align-items: baseline;
    gap: var(--rk-sp-2) var(--rk-sp-8);
    min-width: 0;
    min-height: var(--rk-tap);
    padding: var(--rk-sp-10) var(--rk-sp-12) var(--rk-sp-12);
    border: 0;
    border-right: var(--rk-border-hair) solid var(--rk-line);
    border-bottom: var(--rk-border) solid transparent;
    background: transparent;
    color: var(--rk-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.bl-step:last-child[b-xzgi23ko3f] {
    border-right: 0;
}

.bl-step:hover[b-xzgi23ko3f] {
    background: var(--rk-hover-ghost);
}

.bl-step:focus-visible[b-xzgi23ko3f] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: calc(var(--rk-border) * -1);
}

.bl-step.is-on[b-xzgi23ko3f] {
    border-bottom-color: var(--rk-accent);
    background: var(--rk-accent-soft);
}

.bl-step-n[b-xzgi23ko3f] {
    grid-area: n;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--rk-control-xs);
    height: var(--rk-control-xs);
    border: var(--rk-border) solid var(--rk-ink);
    border-radius: var(--rk-radius-circle);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
}

.bl-step.is-on .bl-step-n[b-xzgi23ko3f] {
    border-color: var(--rk-accent-ink);
    color: var(--rk-accent-ink);
}

.bl-step-name[b-xzgi23ko3f] {
    grid-area: name;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bl-step-big[b-xzgi23ko3f] {
    grid-area: big;
    margin-top: var(--rk-sp-4);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-4xl);
    line-height: var(--rk-lh-flat);
}

.bl-step-of[b-xzgi23ko3f] {
    font-size: var(--rk-fs-xl);
    color: var(--rk-steel);
}

.bl-step-sub[b-xzgi23ko3f] {
    grid-area: sub;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
}

/* A PHONE: all five steps stay in view as a compact row - the number, the word and the count - so
   the order of the framework is still the thing you navigate by, and the one you are on is lit. */
@media (max-width: 760px) {
    .bl-step[b-xzgi23ko3f] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "n"
            "name"
            "big";
        justify-items: start;
        padding: var(--rk-sp-8) var(--rk-sp-6);
    }

    .bl-step-name[b-xzgi23ko3f] {
        font-size: var(--rk-fs-sm);
        white-space: normal;
        line-height: var(--rk-lh-tight);
    }

    .bl-step-big[b-xzgi23ko3f] {
        font-size: var(--rk-fs-2xl);
    }

    .bl-step-of[b-xzgi23ko3f] {
        font-size: var(--rk-fs-xs);
    }

    .bl-step-sub[b-xzgi23ko3f] {
        display: none;
    }
}

/* A PHONE: the clock is said again in the headline ("next run tonight at 03:00"), so it goes. */
@media (max-width: 640px) {
    .bl-loop-clock[b-xzgi23ko3f],
    .bl-loop-sub[b-xzgi23ko3f] {
        display: none;
    }
}

.bl-cal-notice[b-xzgi23ko3f] {
    margin-bottom: var(--rk-sp-12);
}

.bl-panel[b-xzgi23ko3f] {
    min-width: 0;
}

.bl-panel:focus[b-xzgi23ko3f] {
    outline: 0;
}

.bl-foot[b-xzgi23ko3f] {
    margin: var(--rk-sp-24) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
}
/* /Pages/Billing.razor.rz.scp.css */
/*
    THE BILLING QUEUE.

    Layout only, tokens only, no literal colour anywhere - C7. And never
    `background: var(--rk-ink)` with `color: var(--rk-white)`: the dark theme resolves both to
    the same paper colour and the text goes invisible. Permanent dark chrome uses
    --rk-chrome-bg / --rk-chrome-ink, which do not flip.

    ⚠️ ::deep for any kit class. A Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

.lede[b-qv9kb5bone] {
    max-width: var(--rk-measure);
    margin: var(--rk-sp-8) 0 var(--rk-sp-14);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.make[b-qv9kb5bone] {
    margin-bottom: var(--rk-sp-16);
}

/* ---------------------------------------------------------------------------------------
   THE FILTER BAR. It is the search ARGUMENT - app.SalesDocumentSearch refuses a call with no
   handle - so it sits above the list and wraps rather than scrolling out of reach on a phone.
   --------------------------------------------------------------------------------------- */
.bar[b-qv9kb5bone] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-12) var(--rk-sp-16);
    padding: var(--rk-sp-12) 0 var(--rk-sp-14);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.bar__group[b-qv9kb5bone] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8);
    min-width: 0;
}

.bar__find[b-qv9kb5bone] {
    min-width: 18rem;
}

.bar__pick[b-qv9kb5bone] {
    min-width: 11rem;
}

.bar__date[b-qv9kb5bone] {
    min-width: 10rem;
}

.bar__payer[b-qv9kb5bone] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-3);
    min-width: 0;
}

.bar__payerlab[b-qv9kb5bone] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE LIST.
   --------------------------------------------------------------------------------------- */
.showing[b-qv9kb5bone] {
    margin: var(--rk-sp-12) 0 var(--rk-sp-6);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.cell--code[b-qv9kb5bone] {
    white-space: nowrap;
}

.cell__num[b-qv9kb5bone] {
    font-family: var(--rk-font-mono);
    font-weight: var(--rk-fw-medium);
}

/*
    🛑 A DRAFT READS "DRAFT", NEVER AN EM DASH AND NEVER A PLACEHOLDER NUMBER. The number is
    minted at POST, inside the transaction, so the series stays gapless - which means a draft
    genuinely has none yet. It is set QUIET rather than alarming, because a draft is normal.
*/
.cell__draft[b-qv9kb5bone] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink-soft);
}

.cell__title[b-qv9kb5bone] {
    display: block;
    color: var(--rk-ink);
}

.cell__tag[b-qv9kb5bone] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.cell--name[b-qv9kb5bone],
.cell--site[b-qv9kb5bone] {
    min-width: 12rem;
}

.cell--date[b-qv9kb5bone] {
    min-width: 9rem;
}

.cell--money[b-qv9kb5bone] {
    font-family: var(--rk-font-mono);
    white-space: nowrap;
}

/*
    C1: A NEGATIVE IS LEGAL - a credit memo, a return, a discount line - and it carries a
    LEADING MINUS rather than parentheses, because parentheses are an accounting convention
    half the people reading a job ticket have never been taught. --rk-danger-ink and not
    --rk-danger: this is small mono text and the raw token does not clear 4.5:1 on a card.
*/
.cell--money-neg[b-qv9kb5bone] {
    color: var(--rk-danger-ink);
}

.pager[b-qv9kb5bone] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-14) 0 var(--rk-sp-40);
}

.pager__word[b-qv9kb5bone] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}
/* /Pages/BillingRuns.razor.rz.scp.css */
/*
    MONEY > BILLING RUNS - the periodic invoices' sheet. Tokens only, layout only, no literal colour - the
    worksheet vocabulary of Payroll / Exports under the page's .billing-runs wrapper. Small accent text wears
    --rk-accent-ink, never the raw --rk-accent; nothing paints white on an ink ground.
*/

.billing-runs[b-bxepj0bck7] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.billing-runs[b-bxepj0bck7]  .br-sec {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    min-width: 0;
    overflow-x: auto;
}

.billing-runs[b-bxepj0bck7]  .br-bar,
.billing-runs[b-bxepj0bck7]  .br-review {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-12);
}

.billing-runs[b-bxepj0bck7]  .br-label {
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.billing-runs[b-bxepj0bck7]  .br-total {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

/* wave RELEASE: the week's release facts - invoice, week over, terms, accrued - in a wrapping row */
.billing-runs[b-bxepj0bck7]  .br-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6) var(--rk-sp-12);
    margin: 0;
}

.billing-runs[b-bxepj0bck7]  .br-facts dt {
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.billing-runs[b-bxepj0bck7]  .br-facts dd {
    margin: 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.billing-runs[b-bxepj0bck7]  .br-h {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
    margin: 0;
}

.billing-runs[b-bxepj0bck7]  .br-empty,
.billing-runs[b-bxepj0bck7]  .br-note {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.billing-runs[b-bxepj0bck7]  .br-input {
    font-size: var(--rk-fs-sm);
    padding: var(--rk-sp-4) var(--rk-sp-6);
    border: var(--rk-border-hair) solid var(--rk-line);
    background: var(--rk-card);
    color: var(--rk-ink);
}

.billing-runs[b-bxepj0bck7]  .br-input--wide {
    min-width: 0;
    flex: 1 1 16rem;
}

.billing-runs[b-bxepj0bck7]  .br-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line);
}

.billing-runs[b-bxepj0bck7]  .br-table th,
.billing-runs[b-bxepj0bck7]  .br-table td {
    padding: var(--rk-sp-6) var(--rk-sp-10);
    text-align: left;
    vertical-align: top;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.billing-runs[b-bxepj0bck7]  .br-table thead th {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    border-bottom: var(--rk-border) solid var(--rk-line-hard);
    white-space: nowrap;
}

.billing-runs[b-bxepj0bck7]  .br-table tbody td {
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.billing-runs[b-bxepj0bck7]  .br-table .n {
    text-align: right;
    white-space: nowrap;
    font-family: var(--rk-font-mono);
    font-variant-numeric: tabular-nums;
}

.billing-runs[b-bxepj0bck7]  .br-table .nowrap,
.billing-runs[b-bxepj0bck7]  .mono {
    white-space: nowrap;
}

.billing-runs[b-bxepj0bck7]  .mono {
    font-family: var(--rk-font-mono);
}

.billing-runs[b-bxepj0bck7]  .is-held {
    color: var(--rk-accent-ink);
    font-weight: var(--rk-fw-bold);
}

.billing-runs[b-bxepj0bck7]  .is-on td {
    background: var(--rk-paper);
}
/* /Pages/BookJob.razor.rz.scp.css */
/* Booking a job. Layout only - every value is a token from rk-tokens.css. */

.book__card[b-fh1hq5rx6o] {
    max-width: var(--rk-measure);
}

.book__notice[b-fh1hq5rx6o] {
    margin-block: var(--rk-sp-12);
    max-width: var(--rk-measure);
}

/* What the customer actually said, under the sentence rather than inside it. A paragraph of
   free text read back as part of running prose is unreadable, which is the one case
   RkSentence's own header names the madlib as wrong for. */
.book__say[b-fh1hq5rx6o] {
    margin-top: var(--rk-sp-14);
}
/* A JOB HAS LEGS (lane AI, 2026-10-07) - the add / remove row under a courier job's leg lines. */
.book__legs[b-fh1hq5rx6o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-10);
}

.book__legsnote[b-fh1hq5rx6o] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

/* AN ADDRESS THAT IS NOT IN THE SYSTEM (lane LG, 2026-10-26) - the typed-address panel under the sentence. */
.book__addr[b-fh1hq5rx6o] {
    margin-top: var(--rk-sp-14);
    padding-top: var(--rk-sp-14);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.book__addrtitle[b-fh1hq5rx6o] {
    font-weight: var(--rk-fw-bold);
    margin-bottom: var(--rk-sp-10);
}

.book__addrgrid[b-fh1hq5rx6o] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
}

@media (min-width: 720px) {
    .book__addrgrid[b-fh1hq5rx6o] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.book__addrgrid[b-fh1hq5rx6o]  .book__addrspan {
    grid-column: 1 / -1;
}

.book__onfile[b-fh1hq5rx6o] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-10);
}

/* THE ZONE QUESTION SITS CLEAR OF THE "ALREADY ON FILE" LINE ABOVE IT (repair, 2026-10-26 - it sat tight under it). */
.book__addrzone[b-fh1hq5rx6o] {
    margin-top: var(--rk-sp-14);
}
/* /Pages/CancelledStops.razor.rz.scp.css */
/* CANCELLED STOPS - the daily log. Tokens only (rk-tokens.css); small text never wears raw --rk-accent. */

.cx__bar[b-gc3lxmw9du] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8);
    margin: 0 0 var(--rk-sp-12);
}

[b-gc3lxmw9du] .cx__date {
    max-width: calc(var(--rk-menu-w) - var(--rk-sp-40));
}

.cx__counts[b-gc3lxmw9du] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
    margin: 0 0 var(--rk-sp-10);
}

.cx__table[b-gc3lxmw9du] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.cx__table th[b-gc3lxmw9du] {
    padding: var(--rk-sp-6) var(--rk-sp-8);
    border-bottom: var(--rk-border) solid var(--rk-ink);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    text-align: left;
    color: var(--rk-ink-soft);
}

.cx__table td[b-gc3lxmw9du] {
    padding: var(--rk-sp-6) var(--rk-sp-8);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
    vertical-align: top;
    line-height: var(--rk-lh-base);
}

.cx__link[b-gc3lxmw9du] {
    color: var(--rk-accent-ink);
    font-weight: var(--rk-fw-semibold);
}
/* /Pages/ClearPastDue.razor.rz.scp.css */
/* CLEAR PAST-DUE OBLIGATIONS (lane AV, 2026-10-13). The question, the answer in words and numbers,
   and every clear so far. Tokens only (rk-tokens.css); small text never wears raw --rk-accent. */

.pd__form[b-d2pzyhx8eo] {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(14rem, 1fr);
    gap: var(--rk-sp-8) var(--rk-sp-10);
    align-items: start;
    margin-block-end: var(--rk-sp-8);
    max-inline-size: 64rem;
}

.pd__form[b-d2pzyhx8eo]  .pd__reason {
    grid-column: 1 / -1;
}

.pd__verdict[b-d2pzyhx8eo] {
    margin-block: var(--rk-sp-12);
    padding-inline-start: var(--rk-sp-10);
    border-inline-start: var(--rk-rail) solid var(--rk-danger);
}

.pd__verdict--quiet[b-d2pzyhx8eo] {
    border-inline-start-color: var(--rk-ok);
}

.pd__lead[b-d2pzyhx8eo] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-6) var(--rk-sp-8);
    margin-block-end: var(--rk-sp-8);
}

.pd__count[b-d2pzyhx8eo] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-7xl);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-flat);
    color: var(--rk-ink);
}

.pd__what[b-d2pzyhx8eo] {
    font-size: var(--rk-fs-2xl);
    color: var(--rk-ink);
}

.pd__span[b-d2pzyhx8eo] {
    display: block;
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink-soft);
}

.pd__facts[b-d2pzyhx8eo] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8) var(--rk-sp-14);
    margin: 0 0 var(--rk-sp-10);
}

.pd__fact dt[b-d2pzyhx8eo] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.pd__fact dd[b-d2pzyhx8eo] {
    margin: 0;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-5xl);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.pd__fact--left dd[b-d2pzyhx8eo] {
    color: var(--rk-ink-soft);
}

.pd__jobs[b-d2pzyhx8eo] {
    margin: var(--rk-sp-6) 0 var(--rk-sp-10);
    padding-inline-start: var(--rk-sp-12);
    color: var(--rk-danger-ink);
}

.pd__job[b-d2pzyhx8eo] {
    margin-block-end: var(--rk-sp-3);
}

.pd__agr[b-d2pzyhx8eo] {
    font-family: var(--rk-font-mono);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.pd__sub[b-d2pzyhx8eo] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.pd__num[b-d2pzyhx8eo] {
    text-align: end;
}

.pd__acts[b-d2pzyhx8eo] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    margin-block-start: var(--rk-sp-10);
}

.pd__history[b-d2pzyhx8eo] {
    margin-block-start: var(--rk-sp-20);
}

.pd__h2[b-d2pzyhx8eo] {
    margin: 0 0 var(--rk-sp-4);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-6xl);
    color: var(--rk-ink);
}

.pd__note[b-d2pzyhx8eo] {
    max-inline-size: var(--rk-measure);
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.pd__lede[b-d2pzyhx8eo] {
    max-inline-size: var(--rk-measure);
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

@media (max-width: 640px) {
    .pd__form[b-d2pzyhx8eo] {
        grid-template-columns: 1fr;
    }

    .pd__verdict[b-d2pzyhx8eo] {
        padding-inline-start: var(--rk-sp-6);
    }
}
/* /Pages/Commission.razor.rz.scp.css */
/*
    MONEY ▸ COMMISSION - THE SHARED SHEET. Tokens only, layout only, no literal colour.

    The same worksheet vocabulary as the ledger, payroll and payables pages - money right-aligned
    and mono, a band per person on the permanent-chrome pair, a subtotal ruled off, a filter bar, a
    form grid - under the page's .commission wrapper and ::deep so it reaches every tab, the plan
    sheet and the pick sheets (RkModal renders inside its host). Commission is pay, and must look
    like the rest of the money.

    🛑 THE BAND USES --rk-chrome-bg / --rk-chrome-ink, never ink on white (invisible in dark). Small
    accent text wears --rk-accent-ink, never the raw --rk-accent (a contrast test fails the build).
*/

.commission[b-2tbbwf9i87] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.commission[b-2tbbwf9i87]  .cm-sec {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    min-width: 0;
    padding-top: var(--rk-sp-8);
}

.commission[b-2tbbwf9i87]  .cm-stack {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.commission[b-2tbbwf9i87]  .cm-h3 {
    margin: var(--rk-sp-8) 0 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.commission[b-2tbbwf9i87]  .cm-lede {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.commission[b-2tbbwf9i87]  .cm-lede strong {
    color: var(--rk-ink);
}

.commission[b-2tbbwf9i87]  .cm-note {
    margin: 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.4);
}

.commission[b-2tbbwf9i87]  .cm-note strong {
    color: var(--rk-ink);
}

.commission[b-2tbbwf9i87]  .cm-note--warn {
    color: var(--rk-warn-ink);
}

.commission[b-2tbbwf9i87]  .cm-soft {
    color: var(--rk-ink-soft);
}

.commission[b-2tbbwf9i87]  .cm-empty {
    margin: 0;
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border: var(--rk-border-hair) dashed var(--rk-line-hard);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.commission[b-2tbbwf9i87]  .cm-label {
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.commission[b-2tbbwf9i87]  .cm-asides {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    padding-top: var(--rk-sp-16);
}

.commission[b-2tbbwf9i87]  .cm-aside {
    margin: 0;
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border-left: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-zebra);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.4);
}

.commission[b-2tbbwf9i87]  .cm-aside strong {
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   THE BAR
   --------------------------------------------------------------------------------------- */

.commission[b-2tbbwf9i87]  .cm-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    padding: var(--rk-sp-4) 0 var(--rk-sp-8);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
}

.commission[b-2tbbwf9i87]  .cm-bar .rk-field {
    margin-bottom: 0;
}

.commission[b-2tbbwf9i87]  .cm-bar .cm-lede {
    flex: 1 1 calc(var(--rk-blank-max) * 1.6);
}

.commission[b-2tbbwf9i87]  .cm-bar__date {
    width: calc(var(--rk-blank-max) * 0.8);
    max-width: 100%;
}

.commission[b-2tbbwf9i87]  .cm-bar__end {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    align-items: center;
}

.commission[b-2tbbwf9i87]  .cm-showing {
    margin: 0;
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.commission[b-2tbbwf9i87]  .cm-person {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-10);
}

.commission[b-2tbbwf9i87]  .cm-person strong {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

/* The kit's check is a full-width row; beside a filter it is a compact target of its own width. */
.commission[b-2tbbwf9i87]  .rk-check.cm-check--inline {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    min-height: var(--rk-control-sm);
    padding: var(--rk-sp-4) var(--rk-sp-12) var(--rk-sp-4) var(--rk-sp-8);
    gap: var(--rk-sp-8);
}

/* A link that looks like the kit's ghost button - an anchor, because a download IS a link. */
.commission[b-2tbbwf9i87]  .cm-dl {
    display: inline-flex;
    align-items: center;
    min-height: var(--rk-control-sm);
    padding: 0 var(--rk-sp-12);
    border: var(--rk-border) solid var(--rk-ink);
    border-radius: var(--rk-radius-xs);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--rk-ink);
    background: var(--rk-card);
}

.commission[b-2tbbwf9i87]  .cm-dl:hover {
    background: var(--rk-hover-ghost);
}

.commission[b-2tbbwf9i87]  .cm-dl:focus-visible {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

/* ---------------------------------------------------------------------------------------
   THE WORKSHEET
   --------------------------------------------------------------------------------------- */

.commission[b-2tbbwf9i87]  .cm-group {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
}

.commission[b-2tbbwf9i87]  .cm-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.commission[b-2tbbwf9i87]  .cm-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line);
}

.commission[b-2tbbwf9i87]  .cm-table th,
.commission[b-2tbbwf9i87]  .cm-table td {
    padding: var(--rk-sp-6) var(--rk-sp-10);
    text-align: left;
    vertical-align: top;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.commission[b-2tbbwf9i87]  .cm-table thead th {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    border-bottom: var(--rk-border) solid var(--rk-line-hard);
    white-space: nowrap;
}

.commission[b-2tbbwf9i87]  .cm-table .n {
    text-align: right;
    white-space: nowrap;
    font-family: var(--rk-font-mono);
    font-variant-numeric: tabular-nums;
}

.commission[b-2tbbwf9i87]  .cm-table .nowrap {
    white-space: nowrap;
}

.commission[b-2tbbwf9i87]  .mono {
    font-family: var(--rk-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.commission[b-2tbbwf9i87]  .cm-table tbody td {
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.commission[b-2tbbwf9i87]  .cm-table td.cm-owner {
    min-width: calc(var(--rk-blank-max) * 0.8);
    font-weight: var(--rk-fw-semibold);
}

.commission[b-2tbbwf9i87]  .cm-click {
    cursor: pointer;
}

.commission[b-2tbbwf9i87]  .cm-click:hover td {
    background: var(--rk-hover-ghost);
}

.commission[b-2tbbwf9i87]  .cm-dim td {
    color: var(--rk-ink-soft);
}

.commission[b-2tbbwf9i87]  .cm-row--on td {
    background: var(--rk-accent-soft);
}

.commission[b-2tbbwf9i87]  .cm-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-ink);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}

.commission[b-2tbbwf9i87]  .cm-link.mono {
    font-family: var(--rk-font-mono);
}

.commission[b-2tbbwf9i87]  .cm-link:hover {
    text-decoration: underline;
}

.commission[b-2tbbwf9i87]  .cm-link:focus-visible {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.commission[b-2tbbwf9i87]  .cm-tag {
    display: block;
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-body);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* One band per person on the permanent-chrome pair - readable in both themes. */
.commission[b-2tbbwf9i87]  .cm-band td {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    background: var(--rk-chrome-bg);
    color: var(--rk-chrome-ink);
    border-top: 0;
}

.commission[b-2tbbwf9i87]  .cm-band .cm-band__tag {
    margin-left: var(--rk-sp-8);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-body);
    color: var(--rk-chrome-ink);
}

.commission[b-2tbbwf9i87]  .cm-sub td {
    font-weight: var(--rk-fw-semibold);
    border-top: var(--rk-border) solid var(--rk-line-hard);
    background: var(--rk-zebra);
}

/* A reversal: its own row, a danger rail, the amount in the danger ink - never an edit to another row. */
.commission[b-2tbbwf9i87]  .cm-reversal td {
    background: var(--rk-danger-soft);
}

.commission[b-2tbbwf9i87]  .cm-reversal td:first-child {
    border-left: var(--rk-rail) solid var(--rk-danger);
}

.commission[b-2tbbwf9i87]  .cm-reversal td.cm-amount {
    color: var(--rk-danger-ink);
    font-weight: var(--rk-fw-semibold);
}

.commission[b-2tbbwf9i87]  .cm-why {
    display: block;
    padding-top: var(--rk-sp-2);
    font-size: var(--rk-fs-xs);
    color: var(--rk-danger-ink);
}

.commission[b-2tbbwf9i87]  .cm-sums {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8) var(--rk-sp-24);
}

.commission[b-2tbbwf9i87]  .cm-sums > div {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
}

.commission[b-2tbbwf9i87]  .cm-sums .mono {
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink);
}

.commission[b-2tbbwf9i87]  .cm-sums .cm-sums__big {
    font-size: var(--rk-fs-2xl);
    font-weight: var(--rk-fw-bold);
}

.commission[b-2tbbwf9i87]  .cm-sums .cm-showing {
    margin-left: auto;
}

/* ---------------------------------------------------------------------------------------
   WHICH RATE
   --------------------------------------------------------------------------------------- */

.commission[b-2tbbwf9i87]  .cm-rate {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    padding: var(--rk-sp-10) var(--rk-sp-14);
    border-left: var(--rk-rail) solid var(--rk-accent);
    background: var(--rk-card);
}

.commission[b-2tbbwf9i87]  .cm-rate .cm-h3 {
    margin: 0;
    font-size: var(--rk-fs-lg);
}

.commission[b-2tbbwf9i87]  .cm-rate__big {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-3xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.commission[b-2tbbwf9i87]  .cm-rate__none {
    margin: 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   FORMS, SHEETS AND PANELS
   --------------------------------------------------------------------------------------- */

.commission[b-2tbbwf9i87]  .cm-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--rk-blank-max)), 1fr));
    gap: var(--rk-sp-4) var(--rk-sp-12);
    align-items: start;
}

.commission[b-2tbbwf9i87]  .cm-form .rk-field {
    margin-bottom: 0;
}

.commission[b-2tbbwf9i87]  .cm-form__wide {
    grid-column: span 2;
}

.commission[b-2tbbwf9i87]  .cm-form--tight {
    max-width: calc(var(--rk-blank-max) * 1.2);
}

.commission[b-2tbbwf9i87]  .cm-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--rk-blank-max) * 1.2)), 1fr));
    gap: var(--rk-sp-8) var(--rk-sp-12);
}

.commission[b-2tbbwf9i87]  .cm-choices .rk-check {
    margin: 0;
    height: 100%;
    align-items: flex-start;
}

.commission[b-2tbbwf9i87]  .cm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    align-items: center;
}

.commission[b-2tbbwf9i87]  .cm-panel {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-12) var(--rk-sp-14);
    border: var(--rk-border-card) solid var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-card);
}

.commission[b-2tbbwf9i87]  .cm-panel .cm-h3 {
    margin-top: 0;
    font-size: var(--rk-fs-lg);
}

.commission[b-2tbbwf9i87]  .cm-panel--confirm {
    border-left-color: var(--rk-accent);
    background: var(--rk-accent-soft);
}

.commission[b-2tbbwf9i87]  .cm-preview {
    margin: 0;
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border-left: var(--rk-rail) solid var(--rk-accent);
    background: var(--rk-accent-soft);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.commission[b-2tbbwf9i87]  .cm-sheet__head {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
    padding-bottom: var(--rk-sp-10);
    border-bottom: var(--rk-border) solid var(--rk-line-hard);
}

.commission[b-2tbbwf9i87]  .cm-sheet__who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-10);
}

.commission[b-2tbbwf9i87]  .cm-sheet__owner {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.commission[b-2tbbwf9i87]  .cm-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--rk-sp-4) var(--rk-sp-14);
    margin: 0;
    font-size: var(--rk-fs-sm);
}

.commission[b-2tbbwf9i87]  .cm-kv dt {
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    padding-top: var(--rk-sp-2);
}

.commission[b-2tbbwf9i87]  .cm-kv dd {
    margin: 0;
    color: var(--rk-ink);
}

.commission[b-2tbbwf9i87]  .cm-bills {
    margin: 0;
    padding-left: var(--rk-sp-18);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
}

/* PAY OUT - the two ways, side by side on a desk, stacked on a phone. */
.commission[b-2tbbwf9i87]  .cm-ways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--rk-blank-max) * 1.8)), 1fr));
    gap: var(--rk-sp-16);
}

.commission[b-2tbbwf9i87]  .cm-way {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-12) var(--rk-sp-14);
    border: var(--rk-border-card) solid var(--rk-line);
    background: var(--rk-card);
}

.commission[b-2tbbwf9i87]  .cm-way .cm-h3 {
    margin-top: 0;
    font-size: var(--rk-fs-lg);
}

@media (max-width: 719px) {
    .commission[b-2tbbwf9i87]  .cm-form__wide {
        grid-column: 1 / -1;
    }

    .commission[b-2tbbwf9i87]  .cm-sums .cm-showing {
        margin-left: 0;
    }
}
/* /Pages/CustomerCenter.razor.rz.scp.css */
/*
    THE CUSTOMER center.

    Layout only, tokens only, no literal colour. Deliberately the same shell as the site
    center - crumb, two columns, fact lists, a right rail - because they are the same KIND of
    screen and a person should not have to relearn where things are when they follow a link
    from one to the other.

    ⚠️ ::deep for any kit class. A Class passed to a kit control lands on THAT component's
    scoped element and a bare rule here matches nothing.
*/

/* ---------------------------------------------------------------------------------------
   THE TWO-COLUMN SHELL.

   ⚠️ THE RIGHT COLUMN IS WHERE THE WORKFLOW PANEL GOES. Decision 34: "on the right side of
   every screen - at top - the workflows for this that you need to do and progress bar." The
   runner does not exist yet, so the rail carries the at-a-glance card; the panel goes FIRST
   inside .centre__side and pushes this down. Building one column now and retrofitting a rail
   later is how the panel ends up somewhere it does not belong.
   --------------------------------------------------------------------------------------- */
.centre[b-5imzn3zl26] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-20);
    align-items: start;
    padding-bottom: var(--rk-sp-40);
}

@media (min-width: 1080px) {
    .centre[b-5imzn3zl26] {
        grid-template-columns: minmax(0, 1fr) var(--rk-lane-w);
    }
}

.centre__main[b-5imzn3zl26] {
    min-width: 0;
}

.centre__side[b-5imzn3zl26] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    min-width: 0;
}

/* On a phone the summary comes first - it is the thing somebody wants at a glance. */
@media (max-width: 1079px) {
    .centre__side[b-5imzn3zl26] {
        order: -1;
    }
}

/* ---------------------------------------------------------------------------------------
   THE BREADCRUMB.
   --------------------------------------------------------------------------------------- */
.crumb[b-5imzn3zl26] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    text-decoration: none;
}

.crumb:hover[b-5imzn3zl26] {
    color: var(--rk-accent-ink);
}

.crumb--here[b-5imzn3zl26] {
    color: var(--rk-ink);
    text-transform: none;
    letter-spacing: normal;
}

.crumb__sep[b-5imzn3zl26] {
    margin: 0 var(--rk-sp-5);
    color: var(--rk-line-hard);
}

/* ---------------------------------------------------------------------------------------
   THE FACT LIST. A real <dl>, so a screen reader announces "Credit limit, $5,000" rather
   than reading two unrelated cells.
   --------------------------------------------------------------------------------------- */
.facts[b-5imzn3zl26] {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: var(--rk-sp-4) var(--rk-sp-14);
    margin: 0;
}

.facts dt[b-5imzn3zl26] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.facts dd[b-5imzn3zl26] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.facts--tight[b-5imzn3zl26] {
    grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
    gap: var(--rk-sp-3) var(--rk-sp-10);
}

.key[b-5imzn3zl26] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

/*
    A LINK INSIDE A FACT LIST IS A BUTTON, not an <a>. The target is a client route the
    NavigationManager owns, and an anchor here would need its own href kept in step with the
    @page directive. A button with a handler cannot drift.
*/
.link[b-5imzn3zl26] {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--rk-accent-ink);
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.link:hover[b-5imzn3zl26] {
    color: var(--rk-accent-deep);
}

/* ---------------------------------------------------------------------------------------
   FOOTNOTES, ROW BARS AND THE TYPED HALF - identical to the site center on purpose.
   --------------------------------------------------------------------------------------- */
.note[b-5imzn3zl26] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.rowbar[b-5imzn3zl26] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-4) 0 var(--rk-sp-12);
}

/* The sites search. Same shape as the bar on the customer list so a person who learned one
   learned both - the box, then GO, at the left of the row. */
.rowbar__find[b-5imzn3zl26] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8);
    min-width: 0;
}

/* RkField carries a bottom margin for a stacked form; in a one-line bar it drops the
   button below the input it belongs to. */
.rowbar__find[b-5imzn3zl26]  .rk-field {
    margin-bottom: 0;
}

.rowbar__find[b-5imzn3zl26]  .rowbar__box {
    width: calc(var(--rk-blank-max) * 1.4);
    max-width: 100%;
}

.typed[b-5imzn3zl26] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .typed[b-5imzn3zl26] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.typed--wide[b-5imzn3zl26] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

@media (min-width: 1100px) {
    .typed--wide[b-5imzn3zl26] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* A business name is routinely forty characters. It gets the whole row. */
.typed[b-5imzn3zl26]  .typed--span {
    grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------------------
   THE EQUIPMENT TABLE'S CELLS. Same two classes the customer and site lists use, because a
   two-line cell that stacks differently on one screen is how a product stops looking like
   one product.
   --------------------------------------------------------------------------------------- */
.cell__title[b-5imzn3zl26] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell__tag[b-5imzn3zl26] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE STAMP GROUP ON A SITE CARD.

   ⚠️ IT IS ONE FLEX ITEM ON PURPOSE. .rk-card__head is `display: flex` with
   `justify-content: space-between`, so every stamp dropped into the Header slot becomes its
   own item and the browser spreads them across the row. A site card can now carry five at
   once - primary, not current, barred here, account on hold, exemption lapsed - because each
   says something the others do not, and spread across a 375px header they read as five
   unrelated things rather than one row of marks about one relationship. Wrapping them keeps
   the header at TITLE | MARKS, and the marks wrap among themselves.
   --------------------------------------------------------------------------------------- */
.marks[b-5imzn3zl26] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
}

/* ---------------------------------------------------------------------------------------
   THE END-THE-ARRANGEMENT DIALOG. One line naming the two parties, so the scrim covering
   the card list cannot leave any doubt about which relationship is about to be stamped.
   --------------------------------------------------------------------------------------- */
.endwho[b-5imzn3zl26] {
    margin: var(--rk-sp-12) 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
}

/* ---------------------------------------------------------------------------------------
   THE DESTRUCTIVE BLOCK on the change-it tab.

   Lifted verbatim from UnitChangeDialog.razor.css, which set the idiom and argued it: the
   block is separated from Save by a RULE and a sentence, never by a colour, because a red
   panel is a thing people learn to scroll past. The control is a LINK rather than a filled
   danger button - it destroys nothing, it opens a confirm that names the account - and a
   filled red button here would compete with Save for the eye on a phone, where the two sit
   within a thumb's width of each other.

   ⚠️ NO PAIRING OF background: var(--rk-ink) WITH color: var(--rk-white). The dark theme
   resolves both to #e9e4d8, which is a 1:1 contrast ratio and invisible text; it shipped
   that way once. This is the obvious place somebody would reach for a dark or a red slab,
   and it deliberately does not.
   --------------------------------------------------------------------------------------- */
.grave[b-5imzn3zl26] {
    margin-top: var(--rk-sp-20);
    padding-top: var(--rk-sp-14);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.grave__word[b-5imzn3zl26] {
    margin: 0 0 var(--rk-sp-8);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}
/* /Pages/Customers.razor.rz.scp.css */
/*
    THE CUSTOMER LIST.

    Layout only, tokens only, no literal colour. Deliberately the same shape as the site list:
    a person who learned one learned both, and two search screens in one product that lay
    their filters out differently is two search screens nobody trusts.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

.bar[b-2npbxnyppn] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-2npbxnyppn] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

/* RkField is built for a stacked form and carries a bottom margin. In a one-line bar that
   margin leaves the GO button sitting below the input it belongs to. */
.bar[b-2npbxnyppn]  .rk-field {
    margin-bottom: 0;
}

.bar[b-2npbxnyppn]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.8);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   RECENTLY OPENED, IN THIS BROWSER - a strip above the A-to-Z list (2026-10-13).

   It replaced a two-card arrival desk that stood in for a list the door would not serve.
   The list is served now, so the history is a row of quick hits above it rather than a
   panel that competes with it, and it wraps rather than scrolls on a phone.
   --------------------------------------------------------------------------------------- */
.recent[b-2npbxnyppn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-10);
    margin: 0 0 var(--rk-sp-12);
}

.recent__label[b-2npbxnyppn] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/*
    A whole-chip target. A 44px tap area is the minimum a technician can hit on a handset -
    --rk-tap is that number, tokenised.
*/
.recent__hit[b-2npbxnyppn] {
    display: inline-flex;
    align-items: center;
    gap: var(--rk-sp-6);
    max-width: 100%;
    min-height: var(--rk-tap);
    padding: var(--rk-sp-6) var(--rk-sp-10);
    border: var(--rk-border-hair) dashed var(--rk-line);
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.recent__hit:hover[b-2npbxnyppn] {
    background: var(--rk-hover-ghost);
}

.recent__hit:hover .recent__name[b-2npbxnyppn] {
    color: var(--rk-accent-ink);
}

.recent__num[b-2npbxnyppn] {
    flex: none;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.recent__name[b-2npbxnyppn] {
    min-width: 0;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------
   THE CREATE MADLIB. The sentence carries the CHOICES; the card under it carries the
   TRANSCRIPTION, which is exactly the division lift-06 draws.
   --------------------------------------------------------------------------------------- */
.make[b-2npbxnyppn] {
    margin-bottom: var(--rk-sp-20);
}

.typed[b-2npbxnyppn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .typed[b-2npbxnyppn] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .typed[b-2npbxnyppn] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/*
    A business name gets the whole row. It is the one field on the panel that is routinely
    forty characters long, and putting "Woodway Point Condominium Association" in a third of
    the width is how a name gets truncated in the only place somebody can check it.
*/
.typed[b-2npbxnyppn]  .typed--span {
    grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------------------
   THE CELLS.
   --------------------------------------------------------------------------------------- */
.cell--code[b-2npbxnyppn] {
    white-space: nowrap;
}

.cell--name[b-2npbxnyppn] {
    min-width: 0;
}

.cell__title[b-2npbxnyppn] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell__tag[b-2npbxnyppn] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE PAGER.
   --------------------------------------------------------------------------------------- */
.pager[b-2npbxnyppn] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-10) 0 var(--rk-sp-20);
}

.pager__word[b-2npbxnyppn] {
    margin-right: auto;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}
/* /Pages/DayProof.razor.rz.scp.css */
/* Proof of the day. Layout only - every value is a token from rk-tokens.css.

   The document half of this file is written for PAPER first and happens to read well on a
   screen, which is the opposite of the usual order and is right here: nobody reviews a day's
   proof in a browser, they send it to a bank.

   🛑 A BORDER IS WIDTH + STYLE + COLOUR (lane PP, 2026-10-13). --rk-line and --rk-line-hard are
   COLOURS, and this file used to say `border-bottom: var(--rk-line)` - a border with a colour and
   no style, which draws NOTHING. Every rule between stops, under the cover and above the foot was
   inert on the published portal, which is a large part of why Kirk said the page "feels like the
   CSS is missing". Write all three: `var(--rk-border-hair) solid var(--rk-line)`. */

.pick[b-92wz4s3xwh] {
    margin-bottom: var(--rk-sp-16);
}

.pick__row[b-92wz4s3xwh] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    margin-bottom: var(--rk-sp-10);
}

/* Job mode replaces the two pickers with one sentence, so it takes the row's remaining
   width and keeps the Rebuild button on the same baseline as Build it was. */
.pick__job[b-92wz4s3xwh] {
    flex: 1 1 24rem;
    margin: 0;
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* ------------------------------------------------------------------------- the document */

/* THE SHEET. A proof is a document somebody is handed, so on screen it reads as one: paper on
   the page, a hard edge, the job-ticket rail down its left side. */
.doc[b-92wz4s3xwh] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-16);
    padding: var(--rk-sp-24) var(--rk-sp-24) var(--rk-sp-20);
    border: var(--rk-border-card) solid var(--rk-line-hard);
    border-inline-start: var(--rk-rail) solid var(--rk-ink);
    background: var(--rk-card);
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------- the cover */

.cover[b-92wz4s3xwh] {
    padding-bottom: var(--rk-sp-16);
    border-bottom: var(--rk-border) solid var(--rk-ink);
}

.cover__eyebrow[b-92wz4s3xwh] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-hero);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

.cover__for[b-92wz4s3xwh] {
    margin: var(--rk-sp-6) 0 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-4xl);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.cover__title[b-92wz4s3xwh] {
    margin: var(--rk-sp-2) 0 var(--rk-sp-16);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-7xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-7xl);
    line-height: var(--rk-lh-tight);
}

/* THE TALLY - one tile per figure, mono numbers, the labels stamped above them. */
.tally[b-92wz4s3xwh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-10);
    margin: 0 0 var(--rk-sp-14);
}

.tally__item[b-92wz4s3xwh] {
    min-inline-size: 7rem;
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-inline-start: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-paper);
}

.tally__item dt[b-92wz4s3xwh] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.tally__item dd[b-92wz4s3xwh] {
    margin: var(--rk-sp-2) 0 0;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-7xl);
    line-height: var(--rk-lh-flat);
}

/* THE NUMBER THAT MATTERS GETS A RAIL, NOT ONLY A COLOUR. Warn ink on paper prints as grey, and
   this is the one figure a reader must not skim past. */
.tally__item--gap[b-92wz4s3xwh] {
    border-inline-start-color: var(--rk-warn);
    background: var(--rk-warn-soft);
}

.tally__item--gap dd[b-92wz4s3xwh] {
    color: var(--rk-warn-ink);
}

/* THE SCORECARDS (2026-10-27) - bags in, bags out, the discrepancy - one row per kind under the
   tiles, named at the left and set a size smaller so the cover's own figures still read first. */
.scores[b-92wz4s3xwh] {
    margin: calc(-1 * var(--rk-sp-6)) 0 var(--rk-sp-14);
}

.score[b-92wz4s3xwh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
    margin: 0 0 var(--rk-sp-8);
}

.score__name[b-92wz4s3xwh] {
    min-inline-size: 7rem;
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.tally--score[b-92wz4s3xwh] {
    margin: 0;
}

.tally--score .tally__item[b-92wz4s3xwh] {
    padding: var(--rk-sp-5) var(--rk-sp-10);
}

.tally--score .tally__item dd[b-92wz4s3xwh] {
    font-size: var(--rk-fs-4xl);
}

.scores__note[b-92wz4s3xwh] {
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-md);
    color: var(--rk-steel);
}

.cover__say[b-92wz4s3xwh] {
    margin: 0;
    max-inline-size: var(--rk-measure);
    font-size: var(--rk-fs-xl);
    line-height: var(--rk-lh-prose);
}

/* A warning PRINTS. If a read failed, the sheet somebody hands a bank says so on its face. */
/* Screen only - a voided checklist left out of the document (lane BOARDFIX). Hidden in print below. */
.cover__voided[b-92wz4s3xwh] {
    margin: var(--rk-sp-10) 0 0;
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
}

.cover__warn[b-92wz4s3xwh] {
    margin: var(--rk-sp-10) 0 0;
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border-inline-start: var(--rk-rail) solid var(--rk-warn);
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
    max-inline-size: var(--rk-measure);
    line-height: var(--rk-lh-snug);
}

/* WHOSE CLOCK - said once on the cover, again on every printed page's foot. */
.cover__clock[b-92wz4s3xwh] {
    margin: var(--rk-sp-12) 0 0;
    font-size: var(--rk-fs-md);
    color: var(--rk-steel);
}

.doc__none[b-92wz4s3xwh] {
    max-inline-size: var(--rk-measure);
    color: var(--rk-steel);
}

.doc__foot[b-92wz4s3xwh] {
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) solid var(--rk-line-hard);
    font-size: var(--rk-fs-md);
    color: var(--rk-steel);
}

.doc__foot p[b-92wz4s3xwh] {
    margin: 0;
}

/* ----------------------------------------------------------------------------- one stop */

/* A STOP IS A TICKET: a hard edge, and a rail whose colour says how it ended - steel for done,
   warn for nothing captured, a hairline for turned off. The stamp and the line under it say the
   same in words, so colour is never the only signal. */
.stop[b-92wz4s3xwh] {
    padding: var(--rk-sp-14) var(--rk-sp-16) var(--rk-sp-16);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-inline-start: var(--rk-rail) solid var(--rk-line-hard);
    background: var(--rk-card);
}

.stop--done[b-92wz4s3xwh] {
    border-inline-start-color: var(--rk-ok);
}

.stop--gap[b-92wz4s3xwh] {
    border-inline-start-color: var(--rk-warn);
}

.stop--open[b-92wz4s3xwh] {
    border-inline-start-color: var(--rk-steel);
}

.stop--skip[b-92wz4s3xwh] {
    border-inline-start-color: var(--rk-line);
}

.stop__head[b-92wz4s3xwh] {
    display: flex;
    align-items: flex-start;
    gap: var(--rk-sp-14);
}

.stop__at[b-92wz4s3xwh] {
    display: flex;
    flex-direction: column;
    min-inline-size: 6.5rem;
}

.stop__time[b-92wz4s3xwh] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-semibold);
    line-height: var(--rk-lh-tight);
    white-space: nowrap;
}

.stop__time-label[b-92wz4s3xwh] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.stop__who[b-92wz4s3xwh] {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.stop__site[b-92wz4s3xwh] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-6xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-5xl);
    line-height: var(--rk-lh-tight);
}

.stop__where[b-92wz4s3xwh] {
    margin: var(--rk-sp-2) 0 0;
    font-size: var(--rk-fs-lg);
    color: var(--rk-steel);
}

.stop__marks[b-92wz4s3xwh] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--rk-sp-6);
}

.stop__no[b-92wz4s3xwh] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-lg);
    color: var(--rk-steel);
}

/* THE CARD'S MOVES (lane PP) - the queue visit that closed before anybody reached it, said in
   one quiet line under the head instead of printed as a stop "without proof". */
.stop__moves[b-92wz4s3xwh] {
    margin: var(--rk-sp-10) 0 0;
    padding: var(--rk-sp-6) var(--rk-sp-10);
    list-style: none;
    border-inline-start: var(--rk-border) dashed var(--rk-line-hard);
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink-soft);
}

/* BOOKED AND ACTUAL, side by side. The actual times sit on paper so the eye reads them as the
   facts; booked is the plan they are measured against. */
.times[b-92wz4s3xwh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--rk-sp-1);
    margin: var(--rk-sp-12) 0 0;
    border: var(--rk-border-hair) solid var(--rk-line);
    background: var(--rk-line);
}

.times__item[b-92wz4s3xwh] {
    padding: var(--rk-sp-6) var(--rk-sp-10);
    background: var(--rk-card);
}

.times__item--actual[b-92wz4s3xwh] {
    background: var(--rk-paper);
}

.times__item dt[b-92wz4s3xwh] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.times__item dd[b-92wz4s3xwh] {
    margin: var(--rk-sp-2) 0 0;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xl);
}

.stop__facts[b-92wz4s3xwh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4) var(--rk-sp-16);
    margin: var(--rk-sp-10) 0 0;
    font-size: var(--rk-fs-lg);
}

.stop__facts dt[b-92wz4s3xwh] {
    display: inline;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.stop__facts dd[b-92wz4s3xwh] {
    display: inline;
    margin: 0 0 0 var(--rk-sp-4);
}

.stop__asked[b-92wz4s3xwh] {
    margin: var(--rk-sp-8) 0 0;
    max-inline-size: var(--rk-measure);
    font-style: italic;
    color: var(--rk-ink-soft);
}

/* A SKIPPED STOP (lane AH) - normal tone: nothing failed, the customer asked us not to come. */
.stop__skipped[b-92wz4s3xwh] {
    margin: var(--rk-sp-10) 0 0;
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border-inline-start: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-paper);
    color: var(--rk-ink);
    max-inline-size: var(--rk-measure);
}

/* A STOP WITH NOTHING CAPTURED SAYS SO, AND IT IS THE POINT OF THE DOCUMENT. */
.stop__nothing[b-92wz4s3xwh] {
    margin: var(--rk-sp-10) 0 0;
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border-inline-start: var(--rk-rail) solid var(--rk-warn);
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
    max-inline-size: var(--rk-measure);
}

/* The section of runs captured away from the scheduled stops sits apart from the stops. */
.stop--off[b-92wz4s3xwh] {
    border-style: dashed;
    border-inline-start-style: solid;
    border-inline-start-color: var(--rk-steel);
}

/* ------------------------------------------------------------------------------ one run */

.run[b-92wz4s3xwh] {
    margin: var(--rk-sp-14) 0 0;
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.run__head[b-92wz4s3xwh] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
}

.run__name[b-92wz4s3xwh] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-3xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-2xl);
    text-transform: uppercase;
}

.run__ver[b-92wz4s3xwh] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.run__by[b-92wz4s3xwh] {
    margin: var(--rk-sp-2) 0 var(--rk-sp-10);
    font-size: var(--rk-fs-lg);
    color: var(--rk-steel);
}

/* What an off-the-schedule run was about - its job, linked (lane AP). */
.run__about[b-92wz4s3xwh] {
    color: var(--rk-accent-ink);
}

.run__empty[b-92wz4s3xwh] {
    margin: 0;
    font-size: var(--rk-fs-lg);
    color: var(--rk-steel);
}

/* THE ANSWERS - the question in small caps on the left, what was captured on the right. */
.ans[b-92wz4s3xwh] {
    display: grid;
    grid-template-columns: minmax(10rem, 16rem) 1fr;
    margin: 0;
    font-size: var(--rk-fs-xl);
}

.ans__row[b-92wz4s3xwh] {
    display: contents;
}

.ans dt[b-92wz4s3xwh],
.ans dd[b-92wz4s3xwh] {
    padding: var(--rk-sp-6) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.ans dt[b-92wz4s3xwh] {
    padding-inline-end: var(--rk-sp-12);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink-soft);
}

.ans dd[b-92wz4s3xwh] {
    margin: 0;
    overflow-wrap: anywhere;
}

.ans__value[b-92wz4s3xwh] {
    font-weight: var(--rk-fw-medium);
}

.ans__edited[b-92wz4s3xwh] {
    margin-inline-start: var(--rk-sp-6);
    font-size: var(--rk-fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--rk-track-lg);
    color: var(--rk-warn-ink);
}

/* When, and where - the provenance that makes an answer evidence rather than a claim. It prints. */
.ans__when[b-92wz4s3xwh],
.ans__where[b-92wz4s3xwh] {
    margin-inline-start: var(--rk-sp-8);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

/* How a barcode got into the box - scanned (and its type), typed, or confirmed off the bag on
   the driver's chip. Small and quiet; it is provenance, not the answer (lane AE). */
.ans__how[b-92wz4s3xwh] {
    margin-inline-start: var(--rk-sp-8);
    font-size: var(--rk-fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--rk-track-lg);
    color: var(--rk-steel);
}

/* ------------------------------------------------------------------------ the photographs */

/* A FIXED 4:3 FRAME, the record's own tile width (--rk-shot-w, RkFileShot's), so a landscape bag
   shot and a portrait deposit slip sit in one row. Click opens the full picture. */
.shots[b-92wz4s3xwh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-10);
    margin-top: var(--rk-sp-8);
}

.shot[b-92wz4s3xwh] {
    inline-size: calc(var(--rk-shot-w) * 1.4);
    margin: 0;
}

.shot__frame[b-92wz4s3xwh] {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    background: var(--rk-paper);
}

.shot__img[b-92wz4s3xwh] {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* NOT RECEIVED YET - a frame that says so, never the browser's torn-page icon, which reads as
   "the photograph is gone" when the phone simply has not sent it. */
.shot__frame--none[b-92wz4s3xwh] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    border-color: var(--rk-warn);
    background: var(--rk-warn-soft);
}

.shot__none[b-92wz4s3xwh] {
    padding: var(--rk-sp-8);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-align: center;
    text-transform: uppercase;
    color: var(--rk-warn-ink);
}

.shot__cap[b-92wz4s3xwh] {
    margin-top: var(--rk-sp-4);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
}

.shot--none .shot__cap[b-92wz4s3xwh] {
    color: var(--rk-warn-ink);
}

/* THE CHAIN OF CUSTODY IN WORDS under the run that recorded it - steel when it all reconciles,
   warn when a bank bag is missing or one nobody put in came out. It prints (lane AE). */
.custody[b-92wz4s3xwh] {
    margin: var(--rk-sp-10) 0 0;
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border-inline-start: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-paper);
    color: var(--rk-ink);
    max-inline-size: var(--rk-measure);
}

.custody--warn[b-92wz4s3xwh] {
    border-inline-start-color: var(--rk-warn);
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
}

.custody__link[b-92wz4s3xwh] {
    margin-inline-start: var(--rk-sp-6);
    color: var(--rk-accent-ink);
    white-space: nowrap;
}

/* ------------------------------------------------------------ the bag reconciliation */

/* THE CLOSING LIST (2026-10-27) - every bag in and out, matched. A ledger a finger runs down: the
   code in mono, the verdict in capitals at the right, a problem row wearing the warn rail and tint
   (never colour alone - it prints, and orange words print grey). */
.recon[b-92wz4s3xwh] {
    margin: var(--rk-sp-20) 0 0;
    padding-top: var(--rk-sp-14);
    border-top: var(--rk-border) solid var(--rk-line-hard);
}

.recon__title[b-92wz4s3xwh] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-bold);
}

.recon__say[b-92wz4s3xwh] {
    margin: var(--rk-sp-4) 0 0;
    max-inline-size: var(--rk-measure);
    font-size: var(--rk-fs-md);
    color: var(--rk-steel);
}

.recon__kind[b-92wz4s3xwh] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rk-sp-8);
    margin: var(--rk-sp-16) 0 var(--rk-sp-6);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-3xl);
    font-weight: var(--rk-fw-bold);
}

.recon__sum[b-92wz4s3xwh] {
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-medium);
    color: var(--rk-steel);
}

/* A table wider than a phone scrolls inside its own frame - the page never scrolls sideways. */
.recon__scroll[b-92wz4s3xwh] {
    overflow-x: auto;
}

.recon__table[b-92wz4s3xwh] {
    inline-size: 100%;
    min-inline-size: 36rem;
    border-collapse: collapse;
    font-size: var(--rk-fs-md);
    line-height: var(--rk-lh-snug);
}

.recon__table th[b-92wz4s3xwh] {
    padding: var(--rk-sp-4) var(--rk-sp-8);
    border-bottom: var(--rk-border) solid var(--rk-line-hard);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-align: start;
    text-transform: uppercase;
    color: var(--rk-steel);
}

.recon__table td[b-92wz4s3xwh] {
    padding: var(--rk-sp-5) var(--rk-sp-8);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
    vertical-align: top;
}

.recon__row td:first-child[b-92wz4s3xwh] {
    border-inline-start: var(--rk-rail) solid transparent;
}

.recon__row--warn td[b-92wz4s3xwh] {
    background: var(--rk-warn-soft);
}

.recon__row--warn td:first-child[b-92wz4s3xwh] {
    border-inline-start-color: var(--rk-warn);
}

.recon__code[b-92wz4s3xwh] {
    white-space: nowrap;
}

.recon__verdict[b-92wz4s3xwh] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.recon__row--warn .recon__verdict[b-92wz4s3xwh] {
    color: var(--rk-warn-ink);
}

/* ----------------------------------------------------------------------------- a phone */

@media (max-width: 40rem) {
    .doc[b-92wz4s3xwh] {
        padding: var(--rk-sp-14) var(--rk-sp-12);
    }

    .cover__title[b-92wz4s3xwh] {
        font-size: var(--rk-fs-6xl);
    }

    .tally__item[b-92wz4s3xwh] {
        min-inline-size: 5.5rem;
    }

    .tally__item dd[b-92wz4s3xwh] {
        font-size: var(--rk-fs-5xl);
    }

    .stop[b-92wz4s3xwh] {
        padding: var(--rk-sp-12);
    }

    .stop__head[b-92wz4s3xwh] {
        flex-wrap: wrap;
        gap: var(--rk-sp-8);
    }

    .stop__at[b-92wz4s3xwh] {
        flex-direction: row;
        align-items: baseline;
        gap: var(--rk-sp-6);
        min-inline-size: 0;
    }

    .stop__who[b-92wz4s3xwh] {
        flex-basis: 100%;
        order: 2;
    }

    .stop__marks[b-92wz4s3xwh] {
        flex-direction: row;
        align-items: center;
        margin-inline-start: auto;
    }

    .stop__site[b-92wz4s3xwh] {
        font-size: var(--rk-fs-4xl);
    }

    .ans[b-92wz4s3xwh] {
        grid-template-columns: 1fr;
    }

    .ans dt[b-92wz4s3xwh] {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .shot[b-92wz4s3xwh] {
        inline-size: calc(50% - var(--rk-sp-5));
    }
}

/* -------------------------------------------------------------------------------- paper */

@media print {
    .cover__voided[b-92wz4s3xwh] {
        display: none;
    }

    /* The sheet IS the paper when printed - no second frame inside the page margins. */
    .doc[b-92wz4s3xwh] {
        padding: 0;
        border: 0;
        background: none;
    }

    /* A 62-character column down the middle of the sheet wastes half of it and doubles the
       page count. Paper already has margins. */
    .cover__say[b-92wz4s3xwh],
    .cover__warn[b-92wz4s3xwh],
    .doc__none[b-92wz4s3xwh],
    .stop__asked[b-92wz4s3xwh],
    .stop__nothing[b-92wz4s3xwh],
    .stop__skipped[b-92wz4s3xwh],
    .custody[b-92wz4s3xwh] {
        max-inline-size: none;
    }

    .custody__link[b-92wz4s3xwh] {
        display: none;
    }

    /* The rails and tints are the meaning; keep them on paper. */
    .tally__item[b-92wz4s3xwh],
    .stop[b-92wz4s3xwh],
    .times[b-92wz4s3xwh],
    .cover__warn[b-92wz4s3xwh],
    .stop__nothing[b-92wz4s3xwh],
    .shot__frame--none[b-92wz4s3xwh] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Keep a stop's head with its times, never split a run's answers or a photo across a page. */
    .stop__head[b-92wz4s3xwh],
    .times[b-92wz4s3xwh] {
        break-after: avoid;
    }

    .run[b-92wz4s3xwh],
    .shot[b-92wz4s3xwh] {
        break-inside: avoid;
    }

    .cover[b-92wz4s3xwh] {
        break-after: avoid;
    }

    .doc__foot[b-92wz4s3xwh] {
        break-before: avoid;
    }

    /* The reconciliation starts its own sheet, as on the PDF; a bag's line is never split, the
       column headings repeat on every sheet, and the warn rows keep their tint. */
    .recon[b-92wz4s3xwh] {
        break-before: page;
        border-top: 0;
    }

    .recon__scroll[b-92wz4s3xwh] {
        overflow: visible;
    }

    .recon__table[b-92wz4s3xwh] {
        min-inline-size: 0;
    }

    .recon__table thead[b-92wz4s3xwh] {
        display: table-header-group;
    }

    .recon__row[b-92wz4s3xwh] {
        break-inside: avoid;
    }

    .recon__row--warn td[b-92wz4s3xwh] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ------------------------------------------------------------------ the produced file */

/* It sits in the CHROME, above the rule, and never inside the document - what is below
   the rule is the record, and an affordance in the middle of it is something a reader has
   to step over. It also carries rk-no-print by living in the picker block. */
/* WHO THE PDF IS FOR, AND ITS PHOTOGRAPHS (2026-10-27) - a tick and a picker under the header, wrapping on a phone. */
.pdfopts[b-92wz4s3xwh] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--rk-sp-8) var(--rk-sp-16);
    margin-top: var(--rk-sp-8);
}

.pdfopts__photos[b-92wz4s3xwh] {
    flex: 0 1 18rem;
    min-inline-size: 0;
}

.made[b-92wz4s3xwh] {
    margin-top: var(--rk-sp-12);
    padding: var(--rk-sp-10) var(--rk-sp-12);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-inline-start: var(--rk-rail) solid var(--rk-accent);
    background: var(--rk-card);
}

.made__head[b-92wz4s3xwh] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
}

.made__name[b-92wz4s3xwh] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
}

.made__size[b-92wz4s3xwh] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-md);
    color: var(--rk-steel);
}

.made__say[b-92wz4s3xwh] {
    margin: var(--rk-sp-4) 0 var(--rk-sp-8);
    max-inline-size: var(--rk-measure);
}

.made__row[b-92wz4s3xwh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
}

.made__note[b-92wz4s3xwh] {
    margin: var(--rk-sp-8) 0 0;
    max-inline-size: var(--rk-measure);
    font-size: var(--rk-fs-md);
    color: var(--rk-steel);
}

.made__facts[b-92wz4s3xwh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4) var(--rk-sp-12);
    margin: var(--rk-sp-10) 0 0;
}

.made__facts dt[b-92wz4s3xwh] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.made__facts dd[b-92wz4s3xwh] {
    margin: 0;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
}

/* The hash is long and must be allowed to wrap rather than widen the card. It is shown at
   all because decision 40 makes it the thing that survives: thirty-two bytes proving the
   copy a customer holds is the copy that left here. */
.made__hash[b-92wz4s3xwh] {
    overflow-wrap: anywhere;
    color: var(--rk-steel);
}

.made__send[b-92wz4s3xwh] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-10);
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) solid var(--rk-line);
    max-inline-size: var(--rk-measure);
}

/* ------------------------------------------------------- what was produced before */

.past[b-92wz4s3xwh] {
    margin-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) solid var(--rk-line);
    padding-top: var(--rk-sp-10);
}

.past__head[b-92wz4s3xwh] {
    cursor: pointer;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.past__count[b-92wz4s3xwh] {
    margin-inline-start: var(--rk-sp-6);
    font-family: var(--rk-font-mono);
}

.past__list[b-92wz4s3xwh] {
    margin: var(--rk-sp-8) 0 0;
    padding: 0;
    list-style: none;
}

.past__row[b-92wz4s3xwh] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-4) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

/* A button rather than a link: the URL is minted per click and expires in fifteen minutes,
   so there is no href that would still work if somebody copied it. */
.past__name[b-92wz4s3xwh] {
    flex: 1 1 14rem;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: start;

    /* --rk-accent-ink, NOT --rk-accent. The raw accent is 3.5:1 on a card in light and
       fails the 4.5:1 floor for small text; the -ink variant exists for exactly this and
       clears it in both themes. SmallTextNeverWearsTheRawAccent catches the mistake. */
    color: var(--rk-accent-ink);
    cursor: pointer;
    text-decoration: underline;
}

.past__when[b-92wz4s3xwh],
.past__hash[b-92wz4s3xwh] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.past__note[b-92wz4s3xwh] {
    margin: var(--rk-sp-8) 0 0;
    max-inline-size: var(--rk-measure);
    font-size: var(--rk-fs-md);
    color: var(--rk-steel);
}
/* /Pages/DemoDay.razor.rz.scp.css */
/* STAGE THE DEMO DAY - one bar, two lists. Tokens only (rk-tokens.css). */

.dd__bar[b-zghimrnbvg] {
    display: flex;
    align-items: flex-end;
    gap: var(--rk-sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--rk-sp-4);
}

.dd__date[b-zghimrnbvg] {
    max-width: 220px;
}

.dd__list[b-zghimrnbvg] {
    margin: var(--rk-sp-2) 0 0;
    padding-left: var(--rk-sp-5);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
}

.dd__list li[b-zghimrnbvg] {
    margin: var(--rk-sp-1) 0;
}

.dd__list--skip[b-zghimrnbvg] {
    color: var(--rk-ink-soft);
}

.dd__skiphead[b-zghimrnbvg] {
    margin-top: var(--rk-sp-4);
    font-weight: var(--rk-fw-semibold);
    font-size: var(--rk-fs-sm);
}

.dd__plan[b-zghimrnbvg] {
    margin-top: var(--rk-sp-3);
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
}
/* /Pages/DispatchBoard.razor.rz.scp.css */
/*
    THE BOARD PAGE.

    Layout only - every control on it belongs to Riproka.UI.Controls. Tokens only; the one
    place a literal colour reaches this screen is the two inline style attributes carrying the
    COMPANY's own status and assignee colours out of the database, and those are validated to
    #rrggbb before they get there.
*/

/*
    THE FILTER BAR, AND IT IS DELIBERATELY SHORT.

    A board is a saved set of filters, so this is the unsaved version of one - but it is
    chrome on the screen a dispatcher stares at all day, and every row of chrome is a row of
    cards they cannot see. It wraps into as few lines as the width allows and carries no field
    hints: "Zone" and "Department" need no explaining after the first morning.
*/
.bar[b-jhzm83qlkv] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    /* TIGHTENED (Kirk 2026-11-11: "tighten up the space all these buttons use ... a little
       smaller all over - less space between") - 8/12 was 10/18. */
    gap: var(--rk-sp-8) var(--rk-sp-12);
    padding: var(--rk-sp-6) 0 var(--rk-sp-10);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-10);
}

.bar__group[b-jhzm83qlkv] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8);
}

/*
    THE FIELDS IN THE BAR, RESIZED AND UN-STACKED.

    ::deep because a Class passed to a kit control lands on THAT component's scoped element,
    not on one of ours - a plain `.bar__day { }` here compiles to `.bar__day[b-thispage]` and
    silently matches nothing. Anchoring on `.bar`, which IS ours, is what reaches through.

    The margin matters as much as the width: RkField carries a bottom margin because it is
    built for a stacked form, and in a single-line filter bar that margin is what leaves the
    GO button sitting sixteen pixels below the input it belongs to.
*/
.bar[b-jhzm83qlkv]  .rk-field {
    margin-bottom: 0;
}

.bar[b-jhzm83qlkv]  .bar__day,
.bar[b-jhzm83qlkv]  .bar__pick,
.bar[b-jhzm83qlkv]  .bar__num {
    width: var(--rk-blank-max);
    max-width: 100%;
}

.bar__open[b-jhzm83qlkv] {
    display: flex;
    align-items: flex-end;
    gap: var(--rk-sp-6);
}

.board[b-jhzm83qlkv] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-20);

    /*
        ⚠️ min-width:0 IS LOAD-BEARING AND IT IS NOT DECORATION.

        A flex item defaults to min-width:auto, which refuses to shrink below its content -
        so a horizontally-scrolling strip of twenty lanes makes this container as wide as all
        twenty and the whole PAGE scrolls sideways, taking the header buttons off the screen.
        Caught by rendering it, which is the only way this one ever gets caught.
    */
    min-width: 0;
}

.zone[b-jhzm83qlkv] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
    min-width: 0;
}

.zone__head[b-jhzm83qlkv] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-12);
    padding-bottom: var(--rk-sp-4);
    border-bottom: var(--rk-border) solid var(--rk-ink);
}

.zone__code[b-jhzm83qlkv] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-6xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-3xl);
    line-height: var(--rk-lh-flat);
    text-transform: uppercase;
}

.zone__count[b-jhzm83qlkv] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

/* Hide empty is on: say how many columns are left off, and take them back in one click. */
.zone__hidden[b-jhzm83qlkv] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--rk-fs-sm);
    color: var(--rk-accent-ink);
    text-decoration: underline;
    cursor: pointer;
}

.zone__tz[b-jhzm83qlkv] {
    margin-left: auto;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-steel);
}

/* The leftovers tray reads as an exception, not as another zone. */
.zone--off .zone__head[b-jhzm83qlkv] {
    border-bottom-color: var(--rk-warn);
}

/*
    THE STRIP. A board is a horizontal run of fixed-width piles; the page scrolls sideways
    here and each lane scrolls down inside itself, which is what keeps the lane headers in
    view while somebody works one technician's day.

    ⚠️ IT DELIBERATELY DOES NOT USE .rk-scroll-x. That helper HIDES the scrollbar, which is
    right for a tab strip on a phone where a thumb discovers the overflow by swiping, and
    wrong here: a dispatcher on a mouse has to be able to SEE that there are four more
    technicians off the right-hand edge. An invisible scrollbar on a twenty-lane board hides
    half the team.
*/
.strip[b-jhzm83qlkv] {
    display: flex;
    gap: var(--rk-sp-10);
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: var(--rk-sp-8);
    scrollbar-width: thin;
    min-width: 0;
}

/*
    The app shell centers its content in --rk-col, which opens to `none` at the 1280px rung -
    so a dispatcher's monitor already gets the whole width and this page needs no escape. On
    a smaller screen the column stays and the strip scrolls, which is the right trade: the
    lanes keep their readable width instead of being squeezed.
*/

/* =====================================================================================
   THE PICKED BAR
   =====================================================================================
   It STICKS to the bottom, and that is the whole reason it works. Kirk asked for a move
   function precisely because "the board can get REALLY WIDE" - a button that scrolled away
   with the cards would be missing exactly when somebody needs it.
   ===================================================================================== */

.picked[b-jhzm83qlkv] {
    position: sticky;
    bottom: 0;
    z-index: var(--rk-z-bar);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-10);
    padding: var(--rk-sp-8) var(--rk-sp-12);

    /* The permanent dark chrome pair, which does NOT flip with the theme. Pairing
       --rk-ink with --rk-white resolves to a 1:1 ratio in dark mode and the text
       disappears; that has shipped here once already. */
    background: var(--rk-chrome-bg);
    color: var(--rk-chrome-ink);
    box-shadow: var(--rk-shadow-float);
}

.picked__count[b-jhzm83qlkv] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    line-height: var(--rk-lh-flat);
}

.picked__word[b-jhzm83qlkv] {
    margin-inline-end: auto;
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
}

/* A GHOST BUTTON ON THE DARK BAR (lane CA, measured) - its ink-on-ink border and text vanished into the chrome, so the
   picked bar's "Clear" was invisible in the light theme. On the bar it wears the chrome's own ink. */
.picked[b-jhzm83qlkv]  .rk-btn--ghost {
    color: var(--rk-chrome-ink);
    border-color: var(--rk-chrome-ink);
}

/* WHAT A DROP OF THE PICKED SET DID (2026-10-30) - its own line under the buttons, in the chrome's ink, so a
   refusal by job number is read where the still-picked cards are acted on next. */
.picked__said[b-jhzm83qlkv] {
    flex: 1 0 100%;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-chrome-ink);
}

/* AFTER A DROP (lane CA) - the picked bar's chrome, a rail of accent so it reads as an offer, not a selection. */
.picked--dropped[b-jhzm83qlkv] {
    box-shadow: inset var(--rk-rail) 0 0 var(--rk-accent);
}

/* Its buttons sit right after the sentence, not at the far edge - the hand-off's own toast lands there. */
.picked--dropped .picked__word[b-jhzm83qlkv] {
    margin-inline-end: 0;
}

/* WHERE THE WORK WENT, WHEN THE FILTER HIDES IT (2026-10-30) - the picked bar's chrome with a warn rail, and the
   sentence in ordinary case: it names people and a reason, which uppercase tracking would make hard to read. */
.picked--hidden[b-jhzm83qlkv] {
    box-shadow: inset var(--rk-rail) 0 0 var(--rk-warn);
}

.picked__landed[b-jhzm83qlkv] {
    flex: 1 1 var(--rk-blank-max);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-base);
    line-height: var(--rk-lh-prose);
    color: var(--rk-chrome-ink);
}

/* A tracking link the clipboard refused - shown whole, to select and copy by hand. */
.linkmade__hint[b-jhzm83qlkv] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.linkmade__url[b-jhzm83qlkv] {
    display: block;
    padding: var(--rk-sp-8);
    overflow-wrap: anywhere;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    background: var(--rk-field);
    color: var(--rk-ink);
    border: var(--rk-border-hair) solid var(--rk-line);
    user-select: all;
}

/* =====================================================================================
   THE STAGE - THE BOARD, AND THE BOARD ON A MAP
   =====================================================================================
   Closed, the stage is a plain block and the board is exactly what it was. Open, the pane
   comes first in the markup: below the desktop rung it is a full-width band above the lanes,
   and at the desktop rung "beside" moves it into a column on the right and holds it in view,
   so a pin clicked on the map can scroll its card into view without the map leaving the
   screen. "Full width" keeps the band above the lanes at every width.

   ⚠️ min-width:0 ON EVERY LEVEL, for the reason .board gives above: the strip of lanes scrolls
   sideways inside itself, and one ancestor that refuses to shrink makes the whole PAGE scroll
   sideways instead - at 390 that is the header buttons gone.
   ===================================================================================== */

.stage[b-jhzm83qlkv] {
    min-width: 0;
}

.stage--map[b-jhzm83qlkv] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-14);
}

.stage__map[b-jhzm83qlkv],
.stage__board[b-jhzm83qlkv] {
    min-width: 0;
}

@media (min-width: 1280px) {
    .stage--beside[b-jhzm83qlkv] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(24rem, 34%);
        align-items: start;
        gap: var(--rk-sp-16);
    }

    .stage--beside .stage__board[b-jhzm83qlkv] {
        grid-column: 1;
        grid-row: 1;
    }

    /*
        THE COLUMN RUNS THE FULL HEIGHT OF THE BOARD so the pane inside it has somewhere to
        travel: the pane holds itself in view (BoardMapPane.razor.css, .bmap--beside), and a
        sticky element only moves within its parent.

        🛑 THIS ELEMENT IS NOT THE STICKY ONE, AND THAT IS A MEASURED FIX. It was, and a sticky
        box is a stacking context - so the pane's own "not on the map" dialog, rendered inside
        it, painted UNDER the lane headers of the board beside it (1440, dev, 2026-09-28). The
        dialog is a sibling of the pane, in this column, outside the sticky box.
    */
    .stage--beside .stage__map[b-jhzm83qlkv] {
        grid-column: 2;
        grid-row: 1;
        align-self: stretch;
    }
}

/* THE BAR RUNS ONE SIZE DOWN AND EVERYTHING ON IT SHARES ONE HEIGHT (Kirk 2026-11-11: "The
   Span and Show and Board View all up and down - no way to align that?"). The up-and-down was
   two control heights living on one flex-end row: fields at --rk-control-h (56) beside chips
   at 34. Here only, the custom property itself comes down to the small control - RkField's
   inputs read it through ::deep - and chips and small buttons meet it at the same 40px, so
   every block is label + identical control and both lines rule straight across. */
.bar[b-jhzm83qlkv] {
    --rk-control-h: var(--rk-control-sm);
}

.bar[b-jhzm83qlkv]  .rk-chiprow {
    padding-bottom: 0;
}

.bar[b-jhzm83qlkv]  .rk-chip,
.bar[b-jhzm83qlkv]  .rk-btn--sm {
    min-height: var(--rk-control-sm);
    font-size: var(--rk-fs-lg);
}
/* /Pages/DispatchCenter.razor.rz.scp.css */
/*
    THE JOB PAGE.

    Layout only, tokens only, no literal colour anywhere. The ONE exception is the inline
    style= on a timeline dot and a priority chip, which carry colours a customer configured
    in their own database - those are sanitised by BoardFormat.Hex before they are written,
    which rejects anything that is not exactly a hash plus six hex digits rather than
    escaping it.

    ⚠️ ::deep for any kit class. A Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches
    nothing.

    ⚠️ AND NEVER background: var(--rk-ink) WITH color: var(--rk-white). The dark theme
    resolves both to the same paper colour, giving a 1:1 contrast ratio and invisible text -
    it shipped that way once. Permanent dark chrome is --rk-chrome-bg on --rk-chrome-ink,
    which do not flip. Nothing on this page needs either, and that is the safest answer.
*/

/* ---------------------------------------------------------------------------------------
   THE TWO-COLUMN SHELL - the same one the customer, site, person and equipment centers
   use, at the same breakpoint and the same rail width, so moving between the five centers
   moves nothing.

   Decision 34: "on the right side of every screen - at top - the workflows for this that
   you need to do and progress bar." The runner does not exist yet, so the rail carries the
   at-a-glance card. When the panel arrives it goes FIRST inside .centre__side and
   everything below it simply moves down.
   --------------------------------------------------------------------------------------- */
.centre[b-wmxgl7n47a] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-20);
    align-items: start;
    padding-bottom: var(--rk-sp-40);
}

@media (min-width: 1080px) {
    .centre[b-wmxgl7n47a] {
        grid-template-columns: minmax(0, 1fr) var(--rk-lane-w);
    }
}

.centre__main[b-wmxgl7n47a] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.centre__side[b-wmxgl7n47a] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    min-width: 0;
}

/*
    On a phone the rail goes FIRST. A dispatcher reaching for this page on a phone is
    answering "what was promised and is anybody on it" - putting that under four cards of
    detail means scrolling past the answer.
*/
@media (max-width: 1079px) {
    .centre__side[b-wmxgl7n47a] {
        order: -1;
    }
}

/* ---------------------------------------------------------------------------------------
   THE BREADCRUMB. Same as the other centers'.
   --------------------------------------------------------------------------------------- */
.crumb[b-wmxgl7n47a] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    text-decoration: none;
}

.crumb:hover[b-wmxgl7n47a] {
    color: var(--rk-accent-ink);
}

.crumb--here[b-wmxgl7n47a] {
    color: var(--rk-ink);
    text-transform: none;
    letter-spacing: normal;
}

.crumb__sep[b-wmxgl7n47a] {
    margin: 0 var(--rk-sp-5);
    color: var(--rk-line-hard);
}

/* ---------------------------------------------------------------------------------------
   THE FACT LIST. A definition list, because that is what it is - a screen reader announces
   "Promised, Thu 18 Sep 08:00-12:00" rather than reading two unrelated cells.
   --------------------------------------------------------------------------------------- */
.facts[b-wmxgl7n47a] {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: var(--rk-sp-4) var(--rk-sp-14);
    margin: 0;
}

.facts dt[b-wmxgl7n47a] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.facts dd[b-wmxgl7n47a] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-6);
}

.facts--tight[b-wmxgl7n47a] {
    grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
    gap: var(--rk-sp-3) var(--rk-sp-10);
}

/* ---------------------------------------------------------------------------------------
   WHERE THE JOB CAME FROM - the first line of the at-a-glance card, above the facts.

   A sentence rather than a dt/dd pair, because it is one fact with three links in it: who
   found it, on which job, and what they recorded. Railed in the accent so a found-on-PM job
   reads as one from across the room - it is somebody's credit, and the estimator's reason to
   open the job at all.
   --------------------------------------------------------------------------------------- */
.origin[b-wmxgl7n47a] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-3);
    margin: 0 0 var(--rk-sp-10);
    padding: var(--rk-sp-4) 0 var(--rk-sp-4) var(--rk-sp-8);
    border-left: var(--rk-rail) solid var(--rk-accent);
}

.origin__line[b-wmxgl7n47a] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

.origin__kind[b-wmxgl7n47a] {
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

.origin__job[b-wmxgl7n47a] {
    font-family: var(--rk-font-mono);
}

.origin__run[b-wmxgl7n47a] {
    align-self: flex-start;
    font-size: var(--rk-fs-xs);
}

/* CALLED BACK (2026-09-28) - the original job, railed in warn: somebody had to go back. */
.origin--calledback[b-wmxgl7n47a] {
    border-left-color: var(--rk-warn);
}

.origin--calledback .origin__kind[b-wmxgl7n47a] {
    color: var(--rk-warn-ink);
}

/* Work raised from this job - a quieter rail, it is good news or neutral. */
.origin--followon[b-wmxgl7n47a] {
    border-left-color: var(--rk-line-hard);
}

.followons[b-wmxgl7n47a] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--rk-fs-sm);
}

.followons__row[b-wmxgl7n47a] {
    overflow-wrap: anywhere;
}

.followons__said[b-wmxgl7n47a] {
    display: block;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

/* A failed read, said quietly and in words - never drawn as "no origin". */
.origin--unknown[b-wmxgl7n47a] {
    border-left-color: var(--rk-line-hard);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE SMALL WORDS.
   --------------------------------------------------------------------------------------- */
.dim[b-wmxgl7n47a] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* A caution that is a WORD rather than a colour block. An expired certificate and an
   inferred migration date both want the eye without taking over the card. */
.warnword[b-wmxgl7n47a] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-warn-ink);
    border-bottom: var(--rk-border-hair) dotted var(--rk-warn);
    cursor: help;
}

.note[b-wmxgl7n47a] {
    margin: var(--rk-sp-8) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* Prose somebody wrote and wants to read, so it gets the reading measure and the prose
   line-height rather than the footnote treatment. */
.prose[b-wmxgl7n47a] {
    margin: var(--rk-sp-6) 0 0;
    max-width: var(--rk-measure);
    line-height: var(--rk-lh-prose);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.prose--quiet[b-wmxgl7n47a] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
}

/* ---------------------------------------------------------------------------------------
   A LINK THAT IS A BUTTON. Every cross-link on this page navigates through
   NavigationManager rather than through an href, so the element is a button and this makes
   it read as a link. A detail page that is a dead end is why the portal felt like islands.
   --------------------------------------------------------------------------------------- */
.link[b-wmxgl7n47a] {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--rk-accent-ink);
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--rk-line-hard);
    text-underline-offset: 0.2em;
}

.link:hover[b-wmxgl7n47a],
.link:focus-visible[b-wmxgl7n47a] {
    text-decoration-color: currentColor;
}

.link--strong[b-wmxgl7n47a] {
    font-weight: var(--rk-fw-semibold);
}

.link--danger[b-wmxgl7n47a] {
    color: var(--rk-danger);
}

/* ---------------------------------------------------------------------------------------
   THE COMPLAINTS. Numbered, because Seq is a real ordinal a dispatcher reads out.
   --------------------------------------------------------------------------------------- */
.claims[b-wmxgl7n47a] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-14);
}

.claim + .claim[b-wmxgl7n47a] {
    padding-top: var(--rk-sp-14);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.claim__head[b-wmxgl7n47a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
}

.claim__seq[b-wmxgl7n47a] {
    min-width: 2ch;
    font-weight: var(--rk-fw-bold);
    color: var(--rk-ink-soft);
}

.claim__est[b-wmxgl7n47a] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    cursor: help;
}

.claim__unit[b-wmxgl7n47a] {
    margin: var(--rk-sp-6) 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-6);
    font-size: var(--rk-fs-sm);
}

/* ---------------------------------------------------------------------------------------
   THE VISITS.
   --------------------------------------------------------------------------------------- */
.visits[b-wmxgl7n47a] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-16);
}

.visit + .visit[b-wmxgl7n47a] {
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.visit__head[b-wmxgl7n47a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    margin-bottom: var(--rk-sp-10);
}

.visit__seq[b-wmxgl7n47a] {
    min-width: 2ch;
    font-weight: var(--rk-fw-bold);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE THREE INTERVALS - the reason this screen exists.

   Decision 12: dispatched to arrival is TRAVEL, arrival to work-start is THE IDLE PERIOD
   (which ESC could never show, because it had no Arrived state), and work-start to
   work-end is BILLABLE WORK.

   ⚠️ NOTHING HERE MAY COLOUR A NEGATIVE AMOUNT AS AN ERROR. A work-stop before a
   work-start is how a break or a credit is recorded - decision 12 is explicit - so the
   amount column is toned exactly the same whatever its sign. There is deliberately no
   .span--negative rule for somebody to reach for.
   --------------------------------------------------------------------------------------- */
.spans[b-wmxgl7n47a] {
    list-style: none;
    margin: var(--rk-sp-12) 0 0;
    padding: var(--rk-sp-10) 0 0;
    border-top: var(--rk-border-hair) dashed var(--rk-line);
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-5);
}

.span[b-wmxgl7n47a] {
    display: grid;
    grid-template-columns: minmax(7rem, max-content) minmax(4rem, max-content) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--rk-sp-10);
}

@media (max-width: 559px) {
    .span[b-wmxgl7n47a] {
        grid-template-columns: minmax(0, 1fr) max-content;
    }

    .span__between[b-wmxgl7n47a] {
        grid-column: 1 / -1;
    }
}

/*
    justify-self so the dotted "there is a tooltip here" underline hugs the WORD. Without it
    the label is a stretched grid item and the underline runs the full column - which at phone
    width reads as a rule across the card rather than as an affordance on the label.
*/
.span__label[b-wmxgl7n47a] {
    justify-self: start;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    cursor: help;
    border-bottom: var(--rk-border-hair) dotted var(--rk-line-hard);
}

.span__amount[b-wmxgl7n47a] {
    justify-self: end;
    font-weight: var(--rk-fw-semibold);
    text-align: right;
}

/* An interval that has opened and not closed. It is a state, not a problem. */
.span__live[b-wmxgl7n47a] {
    font-weight: var(--rk-fw-medium);
    color: var(--rk-accent-ink);
}

/* Neither instant recorded. Quiet - it has simply not happened. */
.span__none[b-wmxgl7n47a] {
    font-weight: var(--rk-fw-body);
    color: var(--rk-placeholder);
}

.span__between[b-wmxgl7n47a] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    min-width: 0;
    overflow-wrap: anywhere;
}

.span--live .span__label[b-wmxgl7n47a] {
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   THE TIMELINE. A visit's own steps, and the whole job's on its tab.
   --------------------------------------------------------------------------------------- */
.steps[b-wmxgl7n47a] {
    list-style: none;
    margin: var(--rk-sp-12) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
}

.steps--full[b-wmxgl7n47a] {
    margin-top: var(--rk-sp-14);
    gap: var(--rk-sp-6);
}

.step[b-wmxgl7n47a] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
    font-size: var(--rk-fs-sm);
}

.steps--full .step + .step[b-wmxgl7n47a] {
    padding-top: var(--rk-sp-6);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

/*
    The dot carries a colour the COMPANY configured on its own visit status. It is written
    as an inline style and is sanitised by BoardFormat.Hex first; the token below is the
    fallback when the row holds nothing usable.
*/
.step__dot[b-wmxgl7n47a] {
    width: 0.6rem;
    height: 0.6rem;
    flex: none;
    border-radius: var(--rk-radius-circle);
    background: var(--rk-line-hard);
    align-self: center;
}

.step__at[b-wmxgl7n47a] {
    font-weight: var(--rk-fw-semibold);
    min-width: 5ch;
}

.step__day[b-wmxgl7n47a] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    min-width: 8ch;
}

.step__visit[b-wmxgl7n47a] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.step__what[b-wmxgl7n47a] {
    font-weight: var(--rk-fw-medium);
}

.step__note[b-wmxgl7n47a] {
    flex-basis: 100%;
    color: var(--rk-ink-soft);
    line-height: var(--rk-lh-prose);
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------------------
   THE PLAIN LISTS - tasks, contacts, units, other jobs, notes.
   --------------------------------------------------------------------------------------- */
.tasks[b-wmxgl7n47a],
.people[b-wmxgl7n47a],
.units[b-wmxgl7n47a],
.jobs[b-wmxgl7n47a],
.notes[b-wmxgl7n47a] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
}

.task[b-wmxgl7n47a],
.person[b-wmxgl7n47a],
.unit[b-wmxgl7n47a],
.job[b-wmxgl7n47a] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
    font-size: var(--rk-fs-sm);
}

.task__name[b-wmxgl7n47a],
.person__name[b-wmxgl7n47a] {
    font-weight: var(--rk-fw-semibold);
}

.method[b-wmxgl7n47a] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--rk-sp-4);
}

.job__gist[b-wmxgl7n47a] {
    flex-basis: 100%;
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.memo + .memo[b-wmxgl7n47a] {
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.memo__head[b-wmxgl7n47a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}

/* ---------------------------------------------------------------------------------------
   THE RAIL'S LINK STACK AND A CARD FOOTER.
   --------------------------------------------------------------------------------------- */
.links[b-wmxgl7n47a] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-5);
}

.cardfoot[b-wmxgl7n47a] {
    margin-top: var(--rk-sp-12);
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

/*
    A PRIORITY CHIP WEARING THE COMPANY'S OWN COLOUR. The pair is sanitised by
    BoardFormat.Hex and written inline; these are the shape rules only, and the tokens
    below are what shows through when the row carries no usable colour.
*/
.tint[b-wmxgl7n47a] {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--rk-sp-6);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-warn-soft);
    color: var(--rk-warn-ink);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    font-weight: var(--rk-fw-semibold);
    line-height: var(--rk-lh-flat);
    min-height: var(--rk-control-xs);
}

/* ---------------------------------------------------------------------------------------
   THE DESTRUCTIVE BLOCK in the rail.

   The idiom the other centers established and argued: separated by a sentence, never by a
   colour, because a red panel is a thing people learn to scroll past. The control is a
   LINK rather than a filled danger button - it destroys nothing, it opens a confirm that
   names the job and everything that goes with it.
   --------------------------------------------------------------------------------------- */
.grave__word[b-wmxgl7n47a] {
    margin: 0 0 var(--rk-sp-8);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE PROOF OFFER, under the answers.

   ⚠️ BELOW THE LIST AND NOT IN THE HEADER, deliberately. Reading what was captured is the
   common act on this tab; producing a document to send is the rarer, heavier one, and a
   button for it at the top would compete with the filters somebody actually came for.
   --------------------------------------------------------------------------------------- */
.ans__proof[b-wmxgl7n47a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
    margin-top: var(--rk-sp-14);
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.ans__proofnote[b-wmxgl7n47a] {
    flex: 1 1 22rem;
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}
/* /Pages/EmployeeCenter.razor.rz.scp.css */
/*
    THE PERSON center.

    Layout only, tokens only, no literal colour anywhere. Nothing on this page comes out of a
    customer's database carrying its own colour - the board chip hex on dbo.Employee is the one
    value that would, and this screen deliberately does not render it, because a colour control
    is a control the kit does not have yet.

    ⚠️ ::deep for any kit class. A Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.

    ⚠️ AND NEVER background: var(--rk-ink) WITH color: var(--rk-white). The dark theme resolves
    both to the same paper colour, giving a 1:1 contrast ratio and invisible text - it shipped
    that way once. Permanent dark chrome is --rk-chrome-bg on --rk-chrome-ink, which do not
    flip. Nothing on this page needs either, and that is the safest answer.
*/

/* ---------------------------------------------------------------------------------------
   THE TWO-COLUMN SHELL - and the right column is not decoration.

   Decision 34: "on the right side of every screen - at top - the workflows for this that you
   need to do and progress bar." The runner does not exist yet, so the rail carries the
   at-a-glance card today. When the panel arrives it goes FIRST inside .centre__side and
   everything below it simply moves down. Building the page as one column and retrofitting a
   rail is how a screen ends up with the workflow panel somewhere it does not belong.

   The rail is --rk-lane-w, the same width a board lane uses, so a person moving between the
   two screens sees one system rather than two - and the same width the site center uses, so
   moving between the two centers moves nothing.
   --------------------------------------------------------------------------------------- */
.centre[b-29ezb9s3s7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-20);
    align-items: start;
    padding-bottom: var(--rk-sp-40);
}

@media (min-width: 1080px) {
    .centre[b-29ezb9s3s7] {
        grid-template-columns: minmax(0, 1fr) var(--rk-lane-w);
    }
}

.centre__main[b-29ezb9s3s7] {
    min-width: 0;
}

.centre__side[b-29ezb9s3s7] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    min-width: 0;
}

/*
    On a phone the rail goes FIRST. The at-a-glance counts are the thing somebody wants at a
    glance, and putting them under four cards of detail means scrolling past the answer to get
    to the summary. A technician checking their own record does it on a handset.
*/
@media (max-width: 1079px) {
    .centre__side[b-29ezb9s3s7] {
        order: -1;
    }
}

/* ---------------------------------------------------------------------------------------
   THE BREADCRUMB.
   --------------------------------------------------------------------------------------- */
.crumb[b-29ezb9s3s7] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    text-decoration: none;
}

.crumb:hover[b-29ezb9s3s7] {
    color: var(--rk-accent-ink);
}

.crumb--here[b-29ezb9s3s7] {
    color: var(--rk-ink);
    text-transform: none;
    letter-spacing: normal;
}

.crumb__sep[b-29ezb9s3s7] {
    margin: 0 var(--rk-sp-5);
    color: var(--rk-line-hard);
}

/* ---------------------------------------------------------------------------------------
   THE FACT LIST. A definition list, because that is what it is - and a screen reader
   announces "Home clock, America/Denver" rather than reading two unrelated cells.
   --------------------------------------------------------------------------------------- */
.facts[b-29ezb9s3s7] {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: var(--rk-sp-4) var(--rk-sp-14);
    margin: 0;
}

.facts dt[b-29ezb9s3s7] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.facts dd[b-29ezb9s3s7] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.facts--tight[b-29ezb9s3s7] {
    grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
    gap: var(--rk-sp-3) var(--rk-sp-10);
}

/* ---------------------------------------------------------------------------------------
   THE FOOTNOTES. A card footer that explains a rule rather than offering an action.
   --------------------------------------------------------------------------------------- */
.note[b-29ezb9s3s7] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE EDIT FORM. Same grid as the site center's, because they are the same thing at
   different moments and a person should not have to relearn the layout to change a record
   they just created on another screen.
   --------------------------------------------------------------------------------------- */
.typed[b-29ezb9s3s7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .typed[b-29ezb9s3s7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* No sentence above it, so it needs no rule and gets a third column. */
.typed--wide[b-29ezb9s3s7] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

@media (min-width: 1100px) {
    .typed--wide[b-29ezb9s3s7] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------------------
   THE CONTACT CELLS - the same two-line cell the list pages use.
   --------------------------------------------------------------------------------------- */
.cell--name[b-29ezb9s3s7] {
    min-width: 0;
}

.cell__title[b-29ezb9s3s7] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell__tag[b-29ezb9s3s7] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE CROSS-LINK.

   A BUTTON AND NOT AN <a>, the same as the customer center's: the target is a client route
   the NavigationManager owns, and an anchor would need its own href kept in step with the
   @page directive of a file in another folder. A button with a handler cannot drift.

   It carries no colour of its own beyond --rk-accent, which flips with the theme - and
   deliberately no background at all, so there is no slab to pair a light ink against.
   --------------------------------------------------------------------------------------- */
.link[b-29ezb9s3s7] {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--rk-accent-ink);
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.link:hover[b-29ezb9s3s7] {
    color: var(--rk-accent-deep);
}

/*
    The same button doing duty as the first line of a two-line cell. cell__title alone is a
    block with an ellipsis; a <button> needs the width spelled out or it shrink-wraps and the
    truncation never happens.
*/
.link.cell__title[b-29ezb9s3s7] {
    display: block;
    width: 100%;
}

/* ---------------------------------------------------------------------------------------
   THE PAY CARD - its own save, so it stands apart from the record's card above it.
   ::deep because the class lands on RkCard's own scoped element.
   --------------------------------------------------------------------------------------- */
.centre[b-29ezb9s3s7]  .pay-card,
.pay-note[b-29ezb9s3s7] {
    margin-top: var(--rk-sp-16);
}
/* /Pages/Employees.razor.rz.scp.css */
/*
    THE PEOPLE LIST.

    Layout only, tokens only, no literal colour. Deliberately the same shape as the customer
    and site lists: a person who learned one learned all three, and three search screens in one
    product that lay their filters out differently is three search screens nobody trusts.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

.bar[b-r3yuqvv2oi] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-r3yuqvv2oi] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

/* RkField is built for a stacked form and carries a bottom margin. In a one-line bar that
   margin leaves the GO button sitting below the input it belongs to. */
.bar[b-r3yuqvv2oi]  .rk-field {
    margin-bottom: 0;
}

.bar[b-r3yuqvv2oi]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.8);
    max-width: 100%;
}

.bar[b-r3yuqvv2oi]  .bar__pick {
    width: var(--rk-blank-max);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   THE CREATE MADLIB. The sentence carries the CHOICES; the card under it carries the
   TRANSCRIPTION, which is exactly the division lift-06 draws - and a person's name is
   transcription by that document's first rule, so it is never a blank.
   --------------------------------------------------------------------------------------- */
.make[b-r3yuqvv2oi] {
    margin-bottom: var(--rk-sp-20);
}

.typed[b-r3yuqvv2oi] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .typed[b-r3yuqvv2oi] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .typed[b-r3yuqvv2oi] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------------------
   THE CELLS.
   --------------------------------------------------------------------------------------- */
.cell--code[b-r3yuqvv2oi] {
    white-space: nowrap;
}

.cell--name[b-r3yuqvv2oi] {
    min-width: 0;
}

.cell__title[b-r3yuqvv2oi] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell__tag[b-r3yuqvv2oi] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE CELL LINK - a role, a department or a zone that narrows the list it sits in.

   A BUTTON AND NOT AN <a>: the target is this same route with a query on it, and the page
   narrows in place rather than reloading. See FilterByDepartment for why.

   No background and no slab - only --rk-accent, which flips with the theme. There is
   deliberately nothing here to pair a light ink against.
   --------------------------------------------------------------------------------------- */
.link[b-r3yuqvv2oi] {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--rk-accent-ink);
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.link:hover[b-r3yuqvv2oi] {
    color: var(--rk-accent-deep);
}

/* ---------------------------------------------------------------------------------------
   THE PAGER.
   --------------------------------------------------------------------------------------- */
.pager[b-r3yuqvv2oi] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-10) 0 var(--rk-sp-20);
}

.pager__word[b-r3yuqvv2oi] {
    margin-right: auto;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}
/* /Pages/Equipment.razor.rz.scp.css */
/*
    THE EQUIPMENT LIST.

    Layout only, tokens only, no literal colour. Deliberately the same shape as the customer,
    site and people lists: a person who learned one learned all four, and four search screens
    in one product that lay their filters out differently is four search screens nobody trusts.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

.bar[b-rgzrgy0713] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-rgzrgy0713] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

/* RkField is built for a stacked form and carries a bottom margin. In a one-line bar that
   margin leaves the GO button sitting below the input it belongs to. */
.bar[b-rgzrgy0713]  .rk-field {
    margin-bottom: 0;
}

.bar[b-rgzrgy0713]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.8);
    max-width: 100%;
}

.bar[b-rgzrgy0713]  .bar__pick {
    width: var(--rk-blank-max);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   THE CREATE MADLIB. The sentence carries the CHOICES - the site, the owner, what it is
   inside - and the card under it carries the TRANSCRIPTION, which is exactly the division
   lift-06 draws. A nameplate is read off the unit and typed, so make, model and serial are
   never blanks.
   --------------------------------------------------------------------------------------- */
.make[b-rgzrgy0713] {
    margin-bottom: var(--rk-sp-20);
}

.typed[b-rgzrgy0713] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .typed[b-rgzrgy0713] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .typed[b-rgzrgy0713] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------------------
   THE CELLS. Two of this grid's columns carry a title over a quieter second line - the unit
   over its serial, the site over its city - so the pair is shared rather than duplicated.
   --------------------------------------------------------------------------------------- */
.cell--code[b-rgzrgy0713] {
    white-space: nowrap;
}

.cell--name[b-rgzrgy0713] {
    min-width: 0;
}

.cell__title[b-rgzrgy0713] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell__tag[b-rgzrgy0713] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------
   THE CELL LINK - the site a unit sits on, opened from the list.

   A BUTTON AND NOT AN <a>: the target is a client route the NavigationManager owns, and an
   anchor would need its own href kept in step with a @page directive in another file. The
   customer center draws the same conclusion.

   No background and no slab - only --rk-accent, which flips with the theme. There is
   deliberately nothing here for a light ink to be paired against.
   --------------------------------------------------------------------------------------- */
.link[b-rgzrgy0713] {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: var(--rk-accent-ink);
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.link:hover[b-rgzrgy0713] {
    color: var(--rk-accent-deep);
}

/* A button doing duty as the first line of a two-line cell needs its width spelled out, or
   it shrink-wraps and the ellipsis never fires. */
.link.cell__title[b-rgzrgy0713] {
    display: block;
    width: 100%;
}

/* ---------------------------------------------------------------------------------------
   THE PAGER.
   --------------------------------------------------------------------------------------- */
.pager[b-rgzrgy0713] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-10) 0 var(--rk-sp-20);
}

.pager__word[b-rgzrgy0713] {
    margin-right: auto;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}
/* /Pages/EquipmentCenter.razor.rz.scp.css */
/*
    THE EQUIPMENT center.

    Layout only, tokens only, no literal colour anywhere. Nothing on this page comes out of a
    customer's database carrying its own colour, so unlike the board there is not even an
    inline style exception.

    ⚠️ ::deep for any kit class. A Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.

    ⚠️ AND NEVER background: var(--rk-ink) WITH color: var(--rk-white). The dark theme resolves
    both to the same paper colour, giving a 1:1 contrast ratio and invisible text - it shipped
    that way once. Permanent dark chrome is --rk-chrome-bg on --rk-chrome-ink, which do not
    flip. Nothing on this page needs either, and that is the safest answer.
*/

/* ---------------------------------------------------------------------------------------
   THE TWO-COLUMN SHELL - the same one the site and person centers use, at the same
   breakpoint and the same rail width, so moving between the three centers moves nothing.

   Decision 34: "on the right side of every screen - at top - the workflows for this that you
   need to do and progress bar." The runner does not exist yet, so the rail carries the
   at-a-glance card today. When the panel arrives it goes FIRST inside .centre__side and
   everything below it simply moves down.
   --------------------------------------------------------------------------------------- */
.centre[b-726p0m7rlt] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-20);
    align-items: start;
    padding-bottom: var(--rk-sp-40);
}

@media (min-width: 1080px) {
    .centre[b-726p0m7rlt] {
        grid-template-columns: minmax(0, 1fr) var(--rk-lane-w);
    }
}

.centre__main[b-726p0m7rlt] {
    min-width: 0;
}

.centre__side[b-726p0m7rlt] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    min-width: 0;
}

/*
    On a phone the rail goes FIRST. This is the page a technician opens standing in front of
    the unit with a phone in one hand, and "what is this and when is it due" is the whole
    question - putting it under four cards of detail means scrolling past the answer.
*/
@media (max-width: 1079px) {
    .centre__side[b-726p0m7rlt] {
        order: -1;
    }
}

/* ---------------------------------------------------------------------------------------
   THE BREADCRUMB.
   --------------------------------------------------------------------------------------- */
.crumb[b-726p0m7rlt] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    text-decoration: none;
}

.crumb:hover[b-726p0m7rlt] {
    color: var(--rk-accent-ink);
}

.crumb--here[b-726p0m7rlt] {
    color: var(--rk-ink);
    text-transform: none;
    letter-spacing: normal;
}

.crumb__sep[b-726p0m7rlt] {
    margin: 0 var(--rk-sp-5);
    color: var(--rk-line-hard);
}

/* ---------------------------------------------------------------------------------------
   THE FACT LIST. A definition list, because that is what it is - and a screen reader
   announces "Serial, 4417RJ" rather than reading two unrelated cells.
   --------------------------------------------------------------------------------------- */
.facts[b-726p0m7rlt] {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: var(--rk-sp-4) var(--rk-sp-14);
    margin: 0;
}

.facts dt[b-726p0m7rlt] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.facts dd[b-726p0m7rlt] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.facts--tight[b-726p0m7rlt] {
    grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
    gap: var(--rk-sp-3) var(--rk-sp-10);
}

/* ---------------------------------------------------------------------------------------
   THE FOOTNOTES AND THE FREE TEXT.
   --------------------------------------------------------------------------------------- */
.note[b-726p0m7rlt] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* A technician's note is prose somebody wrote and wants to read, so it gets the reading
   measure and the prose line-height rather than the footnote treatment. */
.prose[b-726p0m7rlt] {
    margin: 0;
    max-width: var(--rk-measure);
    line-height: var(--rk-lh-prose);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------------------
   THE EDIT FORM. Same grid as the other two centers', because they are the same thing at
   different moments and a person should not have to relearn the layout.
   --------------------------------------------------------------------------------------- */
.typed[b-726p0m7rlt] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .typed[b-726p0m7rlt] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* No sentence above it, so it needs no rule and gets a third column. */
.typed--wide[b-726p0m7rlt] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

@media (min-width: 1100px) {
    .typed--wide[b-726p0m7rlt] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------------------
   THE COMPONENT CELLS - the same two-line cell the list pages use.
   --------------------------------------------------------------------------------------- */
.cell--code[b-726p0m7rlt] {
    white-space: nowrap;
}

.cell--name[b-726p0m7rlt] {
    min-width: 0;
}

.cell__title[b-726p0m7rlt] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell__tag[b-726p0m7rlt] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE DESTRUCTIVE BLOCK on the change-it tab.

   The idiom UnitChangeDialog.razor.css established and argued: separated from Save by a RULE
   and a sentence, never by a colour, because a red panel is a thing people learn to scroll
   past. The control is a LINK rather than a filled danger button - it destroys nothing, it
   opens a confirm that names the unit and its serial - and a filled red button here would
   compete with Save for the eye on a phone, where the two sit within a thumb's width of each
   other.

   ⚠️ NO PAIRING OF background: var(--rk-ink) WITH color: var(--rk-white). The dark theme
   resolves both to #e9e4d8, which is a 1:1 contrast ratio and invisible text; it shipped
   that way once.
   --------------------------------------------------------------------------------------- */
.grave[b-726p0m7rlt] {
    margin-top: var(--rk-sp-20);
    padding-top: var(--rk-sp-14);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.grave__word[b-726p0m7rlt] {
    margin: 0 0 var(--rk-sp-8);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* ------------------------------------------------------------------------------------------
   THE LIFECYCLE CARD - retiring a unit, and putting a retired one back.

   ITS OWN CLASS RATHER THAN A SECOND USE OF .grave__word, although the two look alike today.
   The grave is the DESTRUCTIVE idiom - dashed rule, muted prose, a link-variant button - and
   retiring is deliberately NOT that (Kirk, 2026-09-18: two verbs, different weights). Sharing
   one class would mean the next person restyling the grave to look heavier silently restyles
   the safe action with it.

   Tokens only - no raw colour, size or measure. --rk-ink-soft flips with the theme and is
   never paired with a fixed background here; the card supplies its own surface.
   ------------------------------------------------------------------------------------------ */
.lifecycle__word[b-726p0m7rlt] {
    margin: 0 0 var(--rk-sp-12);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* ------------------------------------------------------------------------------------------
   THE SITE'S OWN PHOTOGRAPHS, UNDER THE UNIT'S, ON THE FILES TAB.

   Kirk, 2026-09-20: "No way to see ALL SITE photos on equipment." The roof hatch, the gate
   and the panel are true of the BUILDING and of every unit standing in it, so they hang off
   owner type 1 and are shown here rather than made into a second navigation.

   THE RULE IS THE WHOLE STYLE, and it is doing real work rather than decoration: two
   attachment panels stacked with ordinary spacing read as one long list, and a person
   scrolling to the bottom of that list has no way to know the drop zone they passed on the
   way belongs to the unit and not to the site. A dashed rule and a gap is the same separator
   idiom .grave uses for the same reason - "this part is different, stop here".

   Tokens only. No background is set, so there is no --rk-ink / --rk-white pairing to get
   wrong, and the block inherits the page's paper in both themes.
   ------------------------------------------------------------------------------------------ */
.sitefiles[b-726p0m7rlt] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    margin-top: var(--rk-sp-24);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}
/* /Pages/Estimates.razor.rz.scp.css */
/*
    THE ESTIMATE BOOK. Front of house.

    Layout only, tokens only, no literal colour anywhere - C7. And never
    `background: var(--rk-ink)` with `color: var(--rk-white)`: the dark theme resolves both to
    the same paper colour and the text goes invisible. Permanent dark chrome uses
    --rk-chrome-bg / --rk-chrome-ink, which do not flip.

    ⚠️ THE CELL RULES BELOW ARE DELIBERATELY A SECOND COPY OF BILLING'S, NOT A SHARED FILE.
    Blazor CSS isolation is per component: a rule in Billing.razor.css is rewritten with
    Billing's scope attribute and matches nothing rendered by this component. The alternative
    is hoisting them into the global sheet, which would make two pages' table internals a
    shared contract that neither owns - and these cells are already diverging, because this
    screen has a LAPSES column and a JOB column that the billing queue has no use for.

    ⚠️ ::deep for any kit class. A Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

.lede[b-xk7ntyhw92] {
    max-width: var(--rk-measure);
    margin: var(--rk-sp-8) 0 var(--rk-sp-14);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* The create sentence - the same component /billing hosts, spaced the same way. */
.make[b-xk7ntyhw92] {
    margin-bottom: var(--rk-sp-16);
}

/* ---------------------------------------------------------------------------------------
   THE SEARCH. One line rather than billing's filter bar, and that is the screen being a
   different screen: every tab here already carries a status handle, so text is a NARROWING
   of a list that is already on the page rather than the argument that makes the call legal.
   --------------------------------------------------------------------------------------- */
.find[b-xk7ntyhw92] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-4) 0 var(--rk-sp-14);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.find[b-xk7ntyhw92]  .rk-field {
    min-width: 18rem;
}

/* ---------------------------------------------------------------------------------------
   THE LIST.
   --------------------------------------------------------------------------------------- */
.showing[b-xk7ntyhw92] {
    margin: var(--rk-sp-12) 0 var(--rk-sp-6);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.cell--code[b-xk7ntyhw92] {
    white-space: nowrap;
}

.cell__num[b-xk7ntyhw92] {
    font-family: var(--rk-font-mono);
    font-weight: var(--rk-fw-medium);
}

/*
    🛑 A DRAFT READS "DRAFT", NEVER AN EM DASH AND NEVER A PLACEHOLDER NUMBER. The number is
    minted at POST, inside the transaction, so the series stays gapless - which means a draft
    genuinely has none yet. It is set QUIET rather than alarming, because on THIS screen a
    draft is not merely normal, it is the estimator's own work in progress.
*/
.cell__draft[b-xk7ntyhw92] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink-soft);
}

/*
    NOTHING TO SAY, SAID QUIETLY. An em dash in LAPSES means the quote was given no life, and
    in JOB it means nobody has scheduled the work yet - both are ordinary, neither is a fault,
    so neither gets a tone.
*/
.cell__none[b-xk7ntyhw92] {
    color: var(--rk-ink-soft);
}

.cell__title[b-xk7ntyhw92] {
    display: block;
    color: var(--rk-ink);
}

/*
    WHO RAISED THE JOB, under its number - "Estimate started by Rosa Delgado". It sits in the
    JOB cell, which is mono and nowrap for the number, so this line takes the body face back and
    is allowed to wrap: a person's name is prose, and a long one must not push the Value column
    off a phone.
*/
.cell__by[b-xk7ntyhw92] {
    display: block;
    margin-top: var(--rk-sp-2);
    font-family: var(--rk-font-body);
    font-size: var(--rk-fs-2xs);
    white-space: normal;
    color: var(--rk-ink-soft);
}

.cell__tag[b-xk7ntyhw92] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.cell--name[b-xk7ntyhw92],
.cell--site[b-xk7ntyhw92] {
    min-width: 12rem;
}

.cell--date[b-xk7ntyhw92] {
    min-width: 9rem;
}

.cell--money[b-xk7ntyhw92] {
    font-family: var(--rk-font-mono);
    white-space: nowrap;
}

/*
    C1: A NEGATIVE IS LEGAL - a credit memo, a return, a discount line - and it carries a
    LEADING MINUS rather than parentheses, because parentheses are an accounting convention
    half the people reading a job ticket have never been taught. --rk-danger-ink and not
    --rk-danger: this is small mono text and the raw token does not clear 4.5:1 on a card.
*/
.cell--money-neg[b-xk7ntyhw92] {
    color: var(--rk-danger-ink);
}

.pager[b-xk7ntyhw92] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-14) 0 var(--rk-sp-40);
}

.pager__word[b-xk7ntyhw92] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}
/* /Pages/EventBindings.razor.rz.scp.css */
/* ==========================================================================================
   THE RULES - when this happens here, run that.

   EVERY VALUE HERE IS A TOKEN FROM rk-tokens.css. No raw colour, size, radius or shadow -
   CLAUDE.md's Conventions, and the reason the control kit exists at all.

   ⚠️ NOTHING PAIRS --rk-ink WITH --rk-white. Both resolve to #e9e4d8 in the dark theme, which
   is a 1:1 contrast ratio and invisible text. That shipped once. There is no permanent dark
   chrome on this page, so the pair never appears.

   ONE APP, DESKTOP AND PHONE. The filter bar and the typed-settings grid wrap to one column
   below 40rem; the madlib sentence already reflows on its own, which is most of why the
   madlib is the right idiom on a handset.
   ========================================================================================== */

.rules[b-7i2or596so] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-5);
}

/* ---------------------------------------------------------------------------- THE EDITOR */

.rules__editor[b-7i2or596so] {
    /* The one thing on the page that is being WRITTEN, so it gets room the list does not. */
    scroll-margin-top: var(--rk-sp-16);
}

/*
   The settings that are not part of the sentence. Two columns where there is room, one where
   there is not - a hint under a field is prose and needs a measure to stay readable.
*/
.rules__typed[b-7i2or596so] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--rk-sp-4);
    margin-top: var(--rk-sp-5);
}

.rules__history[b-7i2or596so] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-2);
    align-items: center;
    margin-top: var(--rk-sp-4);
    padding-top: var(--rk-sp-3);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.rules__foot[b-7i2or596so] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-3);
    align-items: center;
}

/* --------------------------------------------------------------------------- THE FILTERS */

.rules__bar[b-7i2or596so] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4);
    align-items: flex-end;
}

.rules__find[b-7i2or596so] {
    flex: 1 1 18rem;
    min-width: 14rem;
}

.rules__filter[b-7i2or596so] {
    min-width: 14rem;
}

/* ------------------------------------------------------------------------------ THE LIST */

.rules__name[b-7i2or596so] {
    font-weight: var(--rk-fw-semibold);
    line-height: var(--rk-lh-snug);
}

/*
   The machine handle - what an agent binds by and what appears in a log line. Mono and
   quieter than the label, because a person reads the label and only ever needs the handle
   when something has gone wrong.
*/
.rules__handle[b-7i2or596so] {
    margin-top: var(--rk-sp-1);
    color: var(--rk-ink-soft);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
}

/*
   THE ROW-LEVEL WARNING, and it is deliberately not a stamp. "This rule never runs" is a
   sentence somebody has to read, not a badge they can learn to ignore.
*/
.rules__warn[b-7i2or596so] {
    margin-top: var(--rk-sp-1);
    color: var(--rk-danger);
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-snug);
    max-width: var(--rk-measure);
}

.rules__flags[b-7i2or596so] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-1);
    align-items: center;
}

.rules__num[b-7i2or596so] {
    white-space: nowrap;
}
/* /Pages/Events.razor.rz.scp.css */
/* ==========================================================================================
   THE EVENT CATALOG - what can happen, and whether anything raises it.

   EVERY VALUE HERE IS A TOKEN FROM rk-tokens.css. No raw colour, size, radius or shadow -
   CLAUDE.md's Conventions, and the reason the control kit exists at all.

   ⚠️ NOTHING PAIRS --rk-ink WITH --rk-white. The dark theme resolves both to #e9e4d8, giving
   a 1:1 contrast ratio and invisible text. That shipped once. There is no permanent dark
   chrome on this page, so the pair never appears.

   ONE APP, DESKTOP AND PHONE. The tally and the filter bar wrap; the tables are the kit's
   own and carry their own narrow behaviour. Nothing is hidden at either end - an admin on a
   phone is exactly the person checking whether a rule will fire.
   ========================================================================================== */

.events[b-voso7ebpeq] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-5);
}

/* -------------------------------------------------------------------------- THE SNAPSHOT */

/*
   The regeneration command, shown as what it is. Mono, wrapping rather than scrolling,
   because a command you have to drag sideways to read is a command nobody runs.
*/
.events__cmd[b-voso7ebpeq] {
    margin: var(--rk-sp-2) 0 0;
    padding: var(--rk-sp-2) var(--rk-sp-3);
    background: var(--rk-field);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-xs);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------------------- THE TALLY */

.events__tally[b-voso7ebpeq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-2);
    align-items: center;
}

/* --------------------------------------------------------------------------- THE FILTERS */

.events__bar[b-voso7ebpeq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4);
    align-items: flex-end;
}

.events__owner[b-voso7ebpeq] {
    min-width: 16rem;
}

/* ------------------------------------------------------------------------------ THE LIST */

.events__group[b-voso7ebpeq] {
    scroll-margin-top: var(--rk-sp-16);
}

/*
   The machine handle, and it is deliberately the loudest thing in the row. It is what an
   agent binds by, what appears in a log line, and the one string on this page that never
   translates - so it reads as an identifier rather than as prose.
*/
.events__name[b-voso7ebpeq] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-2xs);
}

.events__what[b-voso7ebpeq] {
    margin-top: var(--rk-sp-1);
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    max-width: var(--rk-measure);
}

.events__none[b-voso7ebpeq] {
    color: var(--rk-placeholder);
    font-size: var(--rk-fs-xs);
}

.events__count[b-voso7ebpeq] {
    white-space: nowrap;
}

.events__act[b-voso7ebpeq] {
    text-align: right;
    white-space: nowrap;
}
/* /Pages/Exports.razor.rz.scp.css */
/*
    MONEY ▸ EXPORTS - THE SHARED SHEET. Tokens only, layout only, no literal colour.

    The worksheet vocabulary of the other money pages (ledger, payroll, payables, commission) under
    the page's .exports wrapper and ::deep, so it reaches every stage and the history. Small accent
    text wears --rk-accent-ink, never the raw --rk-accent; nothing paints white on an ink ground.
*/

.exports[b-b5s7k52wj6] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.exports[b-b5s7k52wj6]  .ex-sec {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    min-width: 0;
    padding-top: var(--rk-sp-8);
}

.exports[b-b5s7k52wj6]  .ex-pickers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10) var(--rk-sp-24);
}

.exports[b-b5s7k52wj6]  .ex-kinds {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-12);
}

.exports[b-b5s7k52wj6]  .ex-label {
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.exports[b-b5s7k52wj6]  .ex-lede {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.3);
}

.exports[b-b5s7k52wj6]  .ex-lede strong {
    color: var(--rk-ink);
}

.exports[b-b5s7k52wj6]  .ex-note {
    margin: 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.4);
}

.exports[b-b5s7k52wj6]  .ex-note--warn {
    color: var(--rk-warn-ink);
}

.exports[b-b5s7k52wj6]  .ex-soft {
    color: var(--rk-ink-soft);
}

.exports[b-b5s7k52wj6]  .ex-asides {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    padding-top: var(--rk-sp-16);
}

.exports[b-b5s7k52wj6]  .ex-aside {
    margin: 0;
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border-left: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-zebra);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.4);
}

.exports[b-b5s7k52wj6]  .ex-aside strong {
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   THE BAR - the selection and what to do with it.
   --------------------------------------------------------------------------------------- */

.exports[b-b5s7k52wj6]  .ex-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    padding: var(--rk-sp-4) 0 var(--rk-sp-8);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
}

.exports[b-b5s7k52wj6]  .ex-bar__end {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    align-items: center;
}

.exports[b-b5s7k52wj6]  .ex-showing {
    margin: 0;
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

/* The kit's check is a full-width row; in a bar or a table cell it is a compact target of its own width. */
.exports[b-b5s7k52wj6]  .rk-check.ex-check--inline {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    min-height: var(--rk-control-sm);
    padding: var(--rk-sp-4) var(--rk-sp-12) var(--rk-sp-4) var(--rk-sp-8);
    gap: var(--rk-sp-8);
}

/* In a column of fields (the journal panel) the inline check keeps its own width instead of stretching. */
.exports[b-b5s7k52wj6]  .ex-panel > .rk-check.ex-check--inline {
    align-self: flex-start;
}

.exports[b-b5s7k52wj6]  .rk-check.ex-check--box {
    width: auto;
    margin: 0;
    min-height: var(--rk-control-sm);
    padding: var(--rk-sp-4) var(--rk-sp-6);
    gap: 0;
    border-color: var(--rk-line);
    background: transparent;
}

/* ---------------------------------------------------------------------------------------
   THE WORKSHEET
   --------------------------------------------------------------------------------------- */

.exports[b-b5s7k52wj6]  .ex-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.exports[b-b5s7k52wj6]  .ex-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line);
}

.exports[b-b5s7k52wj6]  .ex-table th,
.exports[b-b5s7k52wj6]  .ex-table td {
    padding: var(--rk-sp-6) var(--rk-sp-10);
    text-align: left;
    vertical-align: middle;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.exports[b-b5s7k52wj6]  .ex-table thead th {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    border-bottom: var(--rk-border) solid var(--rk-line-hard);
    white-space: nowrap;
}

.exports[b-b5s7k52wj6]  .ex-table .n {
    text-align: right;
    white-space: nowrap;
    font-family: var(--rk-font-mono);
    font-variant-numeric: tabular-nums;
}

.exports[b-b5s7k52wj6]  .ex-table .nowrap {
    white-space: nowrap;
}

.exports[b-b5s7k52wj6]  .mono {
    font-family: var(--rk-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.exports[b-b5s7k52wj6]  .ex-table tbody td {
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.exports[b-b5s7k52wj6]  .ex-table td.ex-pick {
    width: 1%;
}

.exports[b-b5s7k52wj6]  .ex-row--on td {
    background: var(--rk-accent-soft);
}

.exports[b-b5s7k52wj6]  .ex-total td {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    border-top: var(--rk-rail) solid var(--rk-ink);
}

.exports[b-b5s7k52wj6]  .ex-total td.n {
    font-family: var(--rk-font-mono);
    letter-spacing: 0;
}

.exports[b-b5s7k52wj6]  .ex-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-ink);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}

.exports[b-b5s7k52wj6]  .ex-link.mono {
    font-family: var(--rk-font-mono);
}

.exports[b-b5s7k52wj6]  .ex-link:hover {
    text-decoration: underline;
}

.exports[b-b5s7k52wj6]  .ex-link:disabled {
    color: var(--rk-disabled-text);
    cursor: default;
    text-decoration: none;
}

.exports[b-b5s7k52wj6]  .ex-link:focus-visible {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.exports[b-b5s7k52wj6]  .ex-tag {
    display: block;
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-body);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.exports[b-b5s7k52wj6]  .ex-tag-link {
    display: block;
    font-size: var(--rk-fs-xs);
}

/* A link that looks like the kit's ghost button - an anchor, because a download IS a link. */
.exports[b-b5s7k52wj6]  .ex-dl {
    display: inline-flex;
    align-items: center;
    min-height: var(--rk-control-sm);
    padding: 0 var(--rk-sp-12);
    border: var(--rk-border) solid var(--rk-ink);
    border-radius: var(--rk-radius-xs);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--rk-ink);
    background: var(--rk-card);
}

.exports[b-b5s7k52wj6]  .ex-dl:hover {
    background: var(--rk-hover-ghost);
}

.exports[b-b5s7k52wj6]  .ex-dl:focus-visible {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

/* ---------------------------------------------------------------------------------------
   THE CONFIRM
   --------------------------------------------------------------------------------------- */

.exports[b-b5s7k52wj6]  .ex-panel {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-12) var(--rk-sp-14);
    border: var(--rk-border-card) solid var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-card);
}

.exports[b-b5s7k52wj6]  .ex-panel--confirm {
    border-left-color: var(--rk-accent);
    background: var(--rk-accent-soft);
}

.exports[b-b5s7k52wj6]  .ex-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--rk-blank-max)), 1fr));
    gap: var(--rk-sp-4) var(--rk-sp-12);
    align-items: start;
}

.exports[b-b5s7k52wj6]  .ex-form .rk-field {
    margin-bottom: 0;
}

.exports[b-b5s7k52wj6]  .ex-form__wide {
    grid-column: span 2;
}

.exports[b-b5s7k52wj6]  .ex-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    align-items: center;
}

@media (max-width: 719px) {
    .exports[b-b5s7k52wj6]  .ex-form__wide {
        grid-column: 1 / -1;
    }

    .exports[b-b5s7k52wj6]  .ex-bar__end {
        margin-left: 0;
    }
}
/* /Pages/GoodCatch.razor.rz.scp.css */
/*
    GOOD CATCH - tokens only, layout only, no literal colour (2026-09-28).

    The page's own vocabulary - a section, a form grid, a filter bar, the board's total, the sheet's
    facts - lives here under the .gc wrapper and ::deep, so it reaches every tab and the catch sheet
    (RkModal renders inside its host). The kit draws everything else.

    A CATCH IS GOOD NEWS. Nothing here wears the danger tone: a defect REPORTED is a catch made, and
    the notice and the board's total wear the ok tone because something changed when somebody spoke up.
    🛑 Small accent text wears --rk-accent-ink, never raw --rk-accent (a contrast test fails the build).
*/

.gc[b-ensfrwb56s] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    min-width: 0;
}

.gc[b-ensfrwb56s]  .gc-notice__what,
.gc[b-ensfrwb56s]  .gc-notice__body,
.gc[b-ensfrwb56s]  .gc-notice__note {
    margin: 0;
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
    max-width: var(--rk-measure);
}

.gc[b-ensfrwb56s]  .gc-notice__what {
    color: var(--rk-ink-soft);
}

.gc[b-ensfrwb56s]  .gc-notice__note {
    margin-top: var(--rk-sp-6);
    padding: var(--rk-sp-6) var(--rk-sp-10);
    border-left: var(--rk-rail) solid var(--rk-ok);
    background: var(--rk-card);
}

/* "A catch landed on your SOP" (lane U) wears the accent pair, so its note rail does too. */
.gc[b-ensfrwb56s]  .gc-notice--sop .gc-notice__note {
    border-left-color: var(--rk-accent);
}

.gc[b-ensfrwb56s]  .gc-sec {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    min-width: 0;
    padding-top: var(--rk-sp-8);
}

.gc[b-ensfrwb56s]  .gc-h3 {
    margin: var(--rk-sp-8) 0 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-3xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.gc[b-ensfrwb56s]  .gc-lede {
    margin: 0;
    font-size: var(--rk-fs-base);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.3);
}

.gc[b-ensfrwb56s]  .gc-lede strong {
    color: var(--rk-ink);
}

.gc[b-ensfrwb56s]  .gc-soft {
    color: var(--rk-ink-soft);
}

.gc[b-ensfrwb56s]  .gc-small {
    margin: 0;
    font-size: var(--rk-fs-md);
}

.gc[b-ensfrwb56s]  .gc-kinds,
.gc[b-ensfrwb56s]  .gc-choice {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
}

.gc[b-ensfrwb56s]  .gc-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rk-sp-4) var(--rk-sp-16);
}

.gc[b-ensfrwb56s]  .gc-form__span {
    grid-column: 1 / -1;
}

.gc[b-ensfrwb56s]  .gc-madeby {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink);
}

.gc[b-ensfrwb56s]  .gc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-10);
}

.gc[b-ensfrwb56s]  .gc-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-4) 0 var(--rk-sp-8);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
}

.gc[b-ensfrwb56s]  .gc-cell-what {
    min-width: 16ch;
}

.gc[b-ensfrwb56s]  .gc-nowrap {
    white-space: nowrap;
}

.gc[b-ensfrwb56s]  .gc-gap__latest {
    display: block;
    margin-top: var(--rk-sp-2);
    font-size: var(--rk-fs-md);
    color: var(--rk-ink-soft);
}

/* WHAT IT WAS ABOUT - a job, a part, a site, each PICKED (2026-09-28, lane U). One row a blank:
   the word, what is picked, and the button that opens its sheet. */

.gc[b-ensfrwb56s]  .gc-about {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
}

.gc[b-ensfrwb56s]  .gc-about__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-4) 0;
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink);
}

.gc[b-ensfrwb56s]  .gc-about__word {
    min-width: 6ch;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.gc[b-ensfrwb56s]  .gc-about__value {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ THE BOARD */

.gc[b-ensfrwb56s]  .gc-board {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
}

.gc[b-ensfrwb56s]  .gc-board__total {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-12);
}

.gc[b-ensfrwb56s]  .gc-board__num {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-7xl);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-flat);
    color: var(--rk-ok-ink);
}

.gc[b-ensfrwb56s]  .gc-board__word {
    font-size: var(--rk-fs-3xl);
    color: var(--rk-ink);
}

/* ------------------------------------------------------------------ THE SHEET */

.gc[b-ensfrwb56s]  .gc-sheet {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.gc[b-ensfrwb56s]  .gc-sheet__stamps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
}

.gc[b-ensfrwb56s]  .gc-sheet__what {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xl);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink);
}

.gc[b-ensfrwb56s]  .gc-sheet__detail {
    margin: 0;
    font-size: var(--rk-fs-base);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.gc[b-ensfrwb56s]  .gc-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--rk-sp-4) var(--rk-sp-12);
    margin: 0;
    font-size: var(--rk-fs-lg);
}

.gc[b-ensfrwb56s]  .gc-facts dt {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.gc[b-ensfrwb56s]  .gc-facts dd {
    margin: 0;
    color: var(--rk-ink);
}

@media (max-width: 720px) {
    .gc[b-ensfrwb56s]  .gc-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .gc[b-ensfrwb56s]  .gc-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .gc[b-ensfrwb56s]  .gc-facts dd {
        margin-bottom: var(--rk-sp-4);
    }
}
/* /Pages/Help.razor.rz.scp.css */
/*
    THE HELP LIBRARY - a chapter list beside a reading column on a desk, one column on a phone
    (the list goes above the words). The words themselves wear the global .help-prose
    (wwwroot/css/help.css), which is also where Print lives.
*/

.helplib[b-psmilxok8n] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-20);
    padding: var(--rk-sp-16) 0 var(--rk-sp-40);
}

@media (min-width: 1000px) {
    .helplib[b-psmilxok8n] {
        grid-template-columns: 18rem minmax(0, 1fr);
        align-items: start;
    }

    .helplib__side[b-psmilxok8n] {
        position: sticky;
        top: calc(var(--rk-control-h) * 2 + var(--rk-sp-12));
        max-height: calc(100dvh - (var(--rk-control-h) * 2) - var(--rk-sp-24));
        overflow-y: auto;
    }
}

/* ------------------------------------------------------------------ THE SIDE */

.helplib__side[b-psmilxok8n] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.helplib__shelves[b-psmilxok8n] {
    display: flex;
    gap: var(--rk-sp-4);
}

.helplib__shelf[b-psmilxok8n] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--rk-control-sm);
    padding: 0 var(--rk-sp-8);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--rk-ink);
    background: var(--rk-card);
    border: var(--rk-border) solid var(--rk-line-hard);
}

.helplib__shelf.is-on[b-psmilxok8n] {
    border-color: var(--rk-accent);
    background: var(--rk-accent-soft);
    color: var(--rk-accent-ink);
}

.helplib__search[b-psmilxok8n] {
    display: flex;
}

.helplib__input[b-psmilxok8n] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--rk-control-sm);
    padding: 0 var(--rk-sp-10);
    font-family: var(--rk-font-body);
    font-size: var(--rk-fs-input);
    color: var(--rk-ink);
    background: var(--rk-field);
    border: var(--rk-border) solid var(--rk-line-hard);
    border-right: 0;
    border-radius: var(--rk-radius-0);
}

.helplib__input[b-psmilxok8n]::placeholder {
    color: var(--rk-placeholder);
}

.helplib__input:focus-visible[b-psmilxok8n] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: 0;
}

.helplib__go[b-psmilxok8n] {
    flex: 0 0 auto;
    min-height: var(--rk-control-sm);
    padding: 0 var(--rk-sp-14);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-on-fill);
    background: var(--rk-accent-deep);
    border: var(--rk-border) solid var(--rk-accent-deep);
    border-radius: var(--rk-radius-0);
    cursor: pointer;
}

.helplib__chapters[b-psmilxok8n] {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line-hard);
}

.helplib__chapters li + li[b-psmilxok8n] {
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.helplib__chapter[b-psmilxok8n] {
    display: flex;
    gap: var(--rk-sp-10);
    align-items: baseline;
    padding: var(--rk-sp-8) var(--rk-sp-10);
    color: var(--rk-ink);
    text-decoration: none;
    border-left: var(--rk-rail) solid transparent;
    line-height: var(--rk-lh-snug);
}

.helplib__chapter:hover[b-psmilxok8n] {
    background: var(--rk-paper);
}

.helplib__chapter.is-here[b-psmilxok8n] {
    border-left-color: var(--rk-accent);
    background: var(--rk-accent-soft);
}

.helplib__num[b-psmilxok8n] {
    flex: 0 0 auto;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-md);
    color: var(--rk-steel);
}

.helplib__name[b-psmilxok8n] {
    font-size: var(--rk-fs-lg);
}

/* ------------------------------------------------------------------ THE MAIN COLUMN */

.helplib__main[b-psmilxok8n] {
    min-width: 0;
    max-width: 52rem;
}

.helplib__kicker[b-psmilxok8n],
.helpreader__kicker[b-psmilxok8n] {
    margin: 0 0 var(--rk-sp-4);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.helplib__title[b-psmilxok8n] {
    margin: 0 0 var(--rk-sp-16);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-7xl);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-tight);
    letter-spacing: var(--rk-track-2xs);
}

/* ------------------------------------------------------------------ THE FRONT PAGE */

.helphome__lead[b-psmilxok8n] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-20);
    font-size: var(--rk-fs-2xl);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.helphome__cards[b-psmilxok8n] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--rk-sp-12);
}

.helphome__card[b-psmilxok8n] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    height: 100%;
    padding: var(--rk-sp-12) var(--rk-sp-14);
    color: var(--rk-ink);
    text-decoration: none;
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line-hard);
    border-left: var(--rk-rail) solid var(--rk-accent);
    box-shadow: var(--rk-shadow-card);
}

.helphome__card:hover[b-psmilxok8n] {
    border-color: var(--rk-accent);
}

.helphome__num[b-psmilxok8n] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.helphome__name[b-psmilxok8n] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-tight);
}

.helphome__sum[b-psmilxok8n] {
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/* ------------------------------------------------------------------ THE READER */

.helpreader__tools[b-psmilxok8n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-12);
    margin-bottom: var(--rk-sp-4);
}

.helpreader__tools .helpreader__kicker[b-psmilxok8n] {
    margin: 0;
}

.helpreader__print[b-psmilxok8n] {
    min-height: var(--rk-control-xs);
    padding: 0 var(--rk-sp-14);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink);
    background: var(--rk-card);
    border: var(--rk-border) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-0);
    cursor: pointer;
}

.helpreader__print:hover[b-psmilxok8n] {
    border-color: var(--rk-accent);
}

.helpreader__toc[b-psmilxok8n] {
    margin: 0 0 var(--rk-sp-24);
    padding: var(--rk-sp-10) var(--rk-sp-14);
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line-hard);
}

.helpreader__toc-title[b-psmilxok8n] {
    margin: 0 0 var(--rk-sp-6);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.helpreader__toc ol[b-psmilxok8n] {
    margin: 0;
    padding-left: var(--rk-sp-20);
    columns: 2 18rem;
    column-gap: var(--rk-sp-24);
}

.helpreader__toc-link[b-psmilxok8n] {
    padding: var(--rk-sp-2) 0;
    font-family: var(--rk-font-body);
    font-size: var(--rk-fs-lg);
    text-align: left;
    color: var(--rk-accent-ink);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: var(--rk-sp-3);
}

.helpreader__nav[b-psmilxok8n] {
    display: flex;
    justify-content: space-between;
    gap: var(--rk-sp-12);
    margin-top: var(--rk-sp-28);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border) solid var(--rk-line-hard);
}

.helpreader__step[b-psmilxok8n] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

.helpreader__step--next[b-psmilxok8n] {
    margin-left: auto;
    text-align: right;
}

/* ------------------------------------------------------------------ SEARCH */

.helpsearch__scope[b-psmilxok8n] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
    margin-bottom: var(--rk-sp-12);
}

.helpsearch__chip[b-psmilxok8n] {
    display: inline-flex;
    align-items: center;
    min-height: var(--rk-control-xs);
    padding: 0 var(--rk-sp-12);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--rk-ink);
    background: var(--rk-card);
    border: var(--rk-border) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-pill);
}

.helpsearch__chip.is-on[b-psmilxok8n] {
    border-color: var(--rk-accent);
    color: var(--rk-accent-ink);
    background: var(--rk-accent-soft);
}

.helpsearch__count[b-psmilxok8n] {
    margin: 0 0 var(--rk-sp-12);
    color: var(--rk-steel);
    font-size: var(--rk-fs-lg);
}

.helpsearch__results[b-psmilxok8n] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
}

.helpsearch__hit[b-psmilxok8n] {
    padding: var(--rk-sp-12) var(--rk-sp-14);
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line-hard);
    border-left: var(--rk-rail) solid var(--rk-accent);
}

.helpsearch__link[b-psmilxok8n] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    text-decoration: none;
    color: var(--rk-ink);
}

.helpsearch__where[b-psmilxok8n] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.helpsearch__title[b-psmilxok8n] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-tight);
    color: var(--rk-accent-ink);
}

.helpsearch__link:hover .helpsearch__title[b-psmilxok8n] {
    text-decoration: underline;
}

.helpsearch__snippet[b-psmilxok8n] {
    margin: var(--rk-sp-6) 0 0;
    font-size: var(--rk-fs-xl);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}
/* /Pages/HelpChats.razor.rz.scp.css */
/*
    YOUR CHATS - one column: the note, then the conversations. Tokens only (rk-tokens.css); the delete
    action wears the danger ink, never raw red.
*/

.chats[b-775rcoawvk] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-20);
    max-width: var(--rk-measure);
    padding: var(--rk-sp-16) var(--rk-gutter) var(--rk-sp-40);
}

.chats__h[b-775rcoawvk] {
    margin: 0 0 var(--rk-sp-8);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-3xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink);
}

.chats__note[b-775rcoawvk] {
    padding: var(--rk-sp-12) var(--rk-sp-16);
    background: var(--rk-card);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-left: var(--rk-rail) solid var(--rk-steel);
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    align-items: flex-start;
}

.chats__note-text[b-775rcoawvk] {
    margin: 0;
    font-size: var(--rk-fs-xl);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
    white-space: pre-wrap;
}

.chats__quiet[b-775rcoawvk] {
    margin: 0;
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink-soft);
}

.chats__list-head[b-775rcoawvk] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rk-sp-8);
}

.chats__search[b-775rcoawvk] {
    display: flex;
    flex: 0 1 22rem;
    min-width: 0;
}

.chats__input[b-775rcoawvk] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--rk-control-xs);
    padding: 0 var(--rk-sp-8);
    font-family: var(--rk-font-body);
    font-size: var(--rk-fs-input);
    color: var(--rk-ink);
    background: var(--rk-field);
    border: var(--rk-border) solid var(--rk-line-hard);
    border-right: 0;
    border-radius: var(--rk-radius-0);
}

.chats__input[b-775rcoawvk]::placeholder {
    color: var(--rk-placeholder);
}

.chats__go[b-775rcoawvk] {
    min-height: var(--rk-control-xs);
    padding: 0 var(--rk-sp-12);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-on-fill);
    background: var(--rk-accent-deep);
    border: var(--rk-border) solid var(--rk-accent-deep);
    border-radius: var(--rk-radius-0);
    cursor: pointer;
}

.chats__items[b-775rcoawvk] {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--rk-border-hair) solid var(--rk-line-hard);
}

.chats__item[b-775rcoawvk] {
    border-bottom: var(--rk-border-hair) solid var(--rk-line-hard);
}

.chats__item.is-open[b-775rcoawvk] {
    background: var(--rk-card);
}

.chats__row[b-775rcoawvk] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-8) var(--rk-sp-4);
}

.chats__title[b-775rcoawvk] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rk-sp-2);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rk-ink);
    text-align: left;
    cursor: pointer;
}

.chats__title-text[b-775rcoawvk] {
    font-size: var(--rk-fs-2xl);
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.chats__meta[b-775rcoawvk] {
    font-size: var(--rk-fs-md);
    color: var(--rk-ink-soft);
}

.chats__badge[b-775rcoawvk] {
    display: inline-block;
    margin-left: var(--rk-sp-6);
    padding: 0 var(--rk-sp-4);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.chats__badge--pin[b-775rcoawvk] {
    color: var(--rk-accent-ink);
    border-color: var(--rk-accent);
}

.chats__acts[b-775rcoawvk] {
    flex: 0 0 auto;
    display: flex;
    gap: var(--rk-sp-8);
}

.chats__act[b-775rcoawvk] {
    padding: var(--rk-sp-2) var(--rk-sp-8);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    background: var(--rk-paper);
    color: var(--rk-ink);
    font-size: var(--rk-fs-md);
    cursor: pointer;
}

.chats__act--danger[b-775rcoawvk] {
    color: var(--rk-danger-ink);
    border-color: var(--rk-danger);
}

.chats__thread[b-775rcoawvk] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-8) var(--rk-sp-12) var(--rk-sp-16);
}

.chats__turn[b-775rcoawvk] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
}

.chats__who[b-775rcoawvk] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.chats__said[b-775rcoawvk] {
    margin: 0;
    font-size: var(--rk-fs-xl);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

div.chats__said[b-775rcoawvk] {
    white-space: normal;
}

.chats__turn--action .chats__said[b-775rcoawvk] {
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink-soft);
}

.chats__proposal[b-775rcoawvk] {
    margin: 0;
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink);
}

.chats__foot[b-775rcoawvk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    padding-top: var(--rk-sp-10);
}

.chats__spacer[b-775rcoawvk] {
    flex: 1 1 auto;
}

.chats__confirm[b-775rcoawvk] {
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-2xl);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}
/* /Pages/Home.razor.rz.scp.css */
/*
    THE LANDING PAGE - layout only.

    Tokens only: no raw colour, size, radius or shadow. The card, its cut corner, its shadow
    and its status rail come from RkCard; each morning block's internals come from
    MorningBlock, which owns its own scope. What is left here is two grids and three text
    styles.

    There is no permanent dark chrome on this page, so the background:var(--rk-ink) with
    color:var(--rk-white) trap cannot arise here - it is written down so the next edit does not
    introduce it. That pair resolves to one colour in the dark theme and shipped invisible once.

    ⚠️ NO ::deep IS NEEDED and none is used. Every class below lands on an element written in
    Home.razor - the paragraphs sit inside RkCard's ChildContent, which is THIS page's markup
    and therefore carries THIS page's scope attribute. A ::deep here would be reaching into a
    component that owns none of them.
*/

/*
    The prose in the signed-out card. Capped at the reading measure rather than the card
    width: a 1680px monitor otherwise renders a 140-character line nobody can track back.
*/
.prose[b-vhqdwmm1yc] {
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-2xl);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.prose:last-child[b-vhqdwmm1yc] {
    margin-bottom: 0;
}

/*
    THE MORNING - the three counted blocks.

    A WIDER MINIMUM THAN THE TILES BELOW, ON PURPOSE. Each block holds rows of
    "count / title / meta sentence / chevron", and at the tiles' 260px the meta wraps to three
    lines and the block stops scanning as a column of numbers. 340px keeps a queue line like
    "SOUTHWEST35 - nobody has picked these up" on one line at a comfortable body size, and
    auto-fit still collapses the whole thing to a single column on a handset with no
    breakpoint written anywhere.

    🛑 min(340px, 100%) AND NOT A BARE 340px. A bare minimum in minmax() is a FLOOR, not a
    preference: below it the track keeps its width and overflows the container, which on a
    phone is a horizontally scrolling page. The margin here is three pixels - --rk-gutter is
    16px at the phone breakpoint, so a 375px handset leaves 343px of content - and the first
    thing to add a few pixels of padding anywhere above this grid would have tipped it over
    with no test catching it. min() makes the track shrink instead, and changes nothing at
    any width where 340px fits.

    The gap is deliberately wider than the page rhythm: every card carries a hard 4px offset
    shadow, and at --rk-sp-14 a card's shadow touches the card below it.
*/
.morning[b-vhqdwmm1yc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: var(--rk-sp-18);
    margin-bottom: var(--rk-sp-24);
    /*
        START OF THE CARD, NOT THE MIDDLE. Without this a block whose read came back empty -
        two lines of text - stretches to the height of one showing six board counts, and the
        page reads as three half-empty boxes.
    */
    align-items: start;
}

/*
    THE DIVIDER ABOVE THE NAVIGATION. A heading rather than a rule, because the section below
    it is genuinely a different kind of thing and a screen reader should be able to jump to
    it. h2 and not h3: App.razor's FocusOnNavigate targets the page's single h1 in
    RkPageHeader, so this is the first level under it and skipping a level would break the
    outline.
*/
.section[b-vhqdwmm1yc] {
    margin: 0 0 var(--rk-sp-12);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/*
    One column on a phone, filling out as the viewport allows. auto-fit rather than a fixed
    count, so the same markup serves a handset and a dispatcher's wide monitor with no
    breakpoint per layout - and the minimum is wide enough that a tile's sentence never
    collapses to two words per line.
*/
.tiles[b-vhqdwmm1yc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--rk-sp-18);
    margin-bottom: var(--rk-sp-24);
}

.tile-note[b-vhqdwmm1yc] {
    margin: 0;
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/* =====================================================================================
   TAKE AN ACTION - the centerpiece, above the morning.
   The morning answers "what is already happening". This answers "I need to do a thing",
   which is the question somebody arrives with when a customer is on the phone.
   ===================================================================================== */

.take[b-vhqdwmm1yc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-12);
    margin-bottom: var(--rk-sp-16);
    padding: var(--rk-sp-14);
    border: var(--rk-border-card);
    border-left: var(--rk-rail) solid var(--rk-accent);
    background: var(--rk-card);
}

.take__words[b-vhqdwmm1yc] {
    flex: 1 1 18rem;
    min-inline-size: 0;
}

.take__head[b-vhqdwmm1yc] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
}

.take__lede[b-vhqdwmm1yc] {
    margin: var(--rk-sp-2) 0 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
    max-inline-size: var(--rk-measure);
}

.take__go[b-vhqdwmm1yc] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
}
/* /Pages/Integrations.razor.rz.scp.css */
/* ==========================================================================================
   INTEGRATIONS - the intake queue and the vendor accounts.

   EVERY VALUE HERE IS A TOKEN FROM rk-tokens.css. No raw colour, size, radius or shadow -
   CLAUDE.md's Conventions, and the reason the control kit exists at all.

   ⚠️ NOTHING PAIRS --rk-ink WITH --rk-white. The dark theme resolves both to #e9e4d8, giving
   a 1:1 contrast ratio and invisible text. That shipped once and was caught only by rendering
   the real app. The payload block below is exactly where the temptation lives - raw JSON
   "wants" to look like a terminal - so it is --rk-field under --rk-ink, which has real
   contrast in both themes. Permanent dark chrome, if it were ever wanted here, is
   --rk-chrome-bg / --rk-chrome-ink, which do not flip.

   ONE APP, DESKTOP AND PHONE. The filter bar wraps and the payload block scrolls in its own
   box rather than pushing the page sideways: an operator reading a dead letter on a phone at
   7am is a real case, and a horizontally scrolling page makes the rest of the screen
   unusable while they do it.
   ========================================================================================== */

.intg[b-sy9lmwck3u] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-5);
}

/* --------------------------------------------------------------------------- THE FILTERS */

.intg__bar[b-sy9lmwck3u] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4);
    align-items: flex-end;
    margin-block: var(--rk-sp-4);
}

/* ------------------------------------------------------------------------------ THE LIST */

.intg__who[b-sy9lmwck3u] {
    font-weight: var(--rk-fw-semibold);
    line-height: var(--rk-lh-snug);
}

/*
   A partner's own identifier, read as an identifier rather than as prose. It is the string
   that appears in their support ticket, and matching their ticket to a row is the whole job
   of this cell.
*/
.intg__id[b-sy9lmwck3u] {
    margin-top: var(--rk-sp-1);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.intg__what[b-sy9lmwck3u] {
    margin-top: var(--rk-sp-1);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

/*
   The two sentences that are a call to action rather than a caption - an unverified signature
   and an override that cannot resolve. Danger rather than soft ink, because both mean
   somebody has to do something and neither is visible anywhere else in the product.
*/
.intg__alarm[b-sy9lmwck3u] {
    color: var(--rk-danger);
}

.intg__setting[b-sy9lmwck3u] {
    line-height: var(--rk-lh-snug);
    max-width: var(--rk-measure);
    overflow-wrap: anywhere;
}

/*
   A provider's error text, kept readable rather than clipped. It is frequently the only
   evidence of why an adapter is failing, so it wraps instead of being truncated with an
   ellipsis somebody has to hover to defeat.
*/
.intg__error[b-sy9lmwck3u] {
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
    overflow-wrap: anywhere;
}

/* An absent value, said as an absence rather than left as a gap the eye reads as a bug. */
.intg__none[b-sy9lmwck3u] {
    color: var(--rk-ink-soft);
}

.intg__nowrap[b-sy9lmwck3u] {
    white-space: nowrap;
}

.intg__act[b-sy9lmwck3u] {
    text-align: right;
}

/* --------------------------------------------------------------------------- THE PAYLOAD */

/*
   EXACTLY WHAT THEY SENT, UNALTERED. Mono because it is machine text and the shape of it -
   where the braces sit - is half of what a person is reading it for.

   --rk-field on --rk-ink rather than the terminal look the content invites: see the header.
   The max height keeps a two-megabyte Procore payload from turning the dialog into an
   infinite page, and pre-wrap keeps a long single-line JSON body inside the box.
*/
.intg__payload[b-sy9lmwck3u] {
    margin-top: var(--rk-sp-4);
    padding: var(--rk-sp-4);
    border: var(--rk-border) solid var(--rk-line);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-field);
    color: var(--rk-ink);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-base);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 26rem;
    overflow-y: auto;
}

/* ------------------------------------------------------------------ THE ROW'S AFFORDANCES */

/*
   Connect / test / disconnect, side by side on a desk and wrapped on a phone. They wrap
   rather than squeeze because a button whose label has been crushed to "Disconn..." is a
   button somebody presses to find out what it does, and one of these three disconnects a
   mail account.
*/
.intg__acts[b-sy9lmwck3u] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--rk-sp-2);
}

/* ------------------------------------------------------------------ THE EXTERNAL-ID MAP */

/*
   THE QUESTION, BUILT LEFT TO RIGHT AS A SENTENCE. Which way, whose system, what kind of
   record, which id - the madlib instinct of decision 26 applied to a lookup, so the shape of
   the row reads as the shape of the question rather than as a form to be completed.
*/
.intg__ask[b-sy9lmwck3u] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4);
    align-items: flex-start;
    margin-block: var(--rk-sp-5);
}

/*
   THE BUTTON HAS NO LABEL ABOVE IT, so it needs the label row's height to line up with the
   controls beside it rather than floating level with their captions.

   ⚠️ MEASURED IN THE BROWSER, NOT GUESSED. The first attempt used --rk-sp-6 on the assumption
   that the spacing scale is a step index; it is not - the tokens are literal pixels, so
   --rk-sp-6 is 6px and the button sat 18px high, level with the labels. --rk-sp-24 puts its
   top on the controls' top. When the row wraps on a phone the button lands on its own line
   and the offset is harmless.
*/
.intg__askgo[b-sy9lmwck3u] {
    display: flex;
    align-items: center;
    padding-top: var(--rk-sp-24);
}

/*
   THE ANSWER, AS TWO EQUAL SIDES. A correlation has no primary end - decision 37 is explicit
   that it is read in BOTH directions - so neither id is rendered as the subject of the other.
   The arrow between them carries that and is hidden from a screen reader, which gets the two
   captions instead.
*/
.intg__pair[b-sy9lmwck3u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-4);
}

.intg__side[b-sy9lmwck3u] {
    flex: 1 1 12rem;
    min-width: 0;
}

.intg__sidecap[b-sy9lmwck3u] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.intg__sideid[b-sy9lmwck3u] {
    margin-top: var(--rk-sp-1);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.intg__arrow[b-sy9lmwck3u] {
    flex: 0 0 auto;
    font-size: var(--rk-fs-xl);
    color: var(--rk-steel);
}
/* /Pages/JobStory.razor.rz.scp.css */
/*
    ONE JOB, AS ONE DOCUMENT.

    It reads like a report somebody typed up rather than like a screen: a cover, a contents
    list, then the runs one after another. No cards inside cards and no accordions - the whole
    value is that a person sees all of it at once and can hand the paper to somebody.

    The runs themselves are drawn by RunStory / RkRunReview / RkStoryStep and are NOT restyled
    from here. A reader's copy that looks different from the one the technician signed off on
    is the first step towards them being different.
*/

.tale[b-fujkuhusze] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-24);
    max-width: var(--rk-measure);
}

/* --- the one-tap proof email (never printed) ------------------------------ */

.tale__send[b-fujkuhusze] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8) var(--rk-sp-12);
    max-width: var(--rk-measure);
    margin-bottom: var(--rk-sp-16);
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-sp-3) solid var(--rk-accent);
    background: var(--rk-card);
}

.tale__sendnote[b-fujkuhusze] {
    flex: 1 1 18rem;
    margin: 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* --- the cover ---------------------------------------------------------- */

.tale__cover[b-fujkuhusze] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    padding-bottom: var(--rk-sp-16);
    border-bottom: var(--rk-rail) solid var(--rk-ink);
}

.tale__job[b-fujkuhusze] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xl);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-tight);
    letter-spacing: var(--rk-track-lg);
    color: var(--rk-ink);
}

.tale__facts[b-fujkuhusze] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--rk-sp-4) var(--rk-sp-16);
    margin: 0;
    font-size: var(--rk-fs-sm);
}

.tale__facts dt[b-fujkuhusze] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.tale__facts dd[b-fujkuhusze] {
    margin: 0;
    color: var(--rk-ink);
}

.tale__why[b-fujkuhusze] {
    margin: 0;
    font-size: var(--rk-fs-md);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

/*
    WHAT THIS DOCUMENT IS, ON THE DOCUMENT. It leaves the building, and the person holding it
    a year later has none of this screen's context.
*/
.tale__lede[b-fujkuhusze] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* --- contents ------------------------------------------------------------ */

.tale__toc[b-fujkuhusze] {
    padding: var(--rk-sp-12);
    background: var(--rk-card);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-xs);
}

.tale__tocname[b-fujkuhusze] {
    margin: 0 0 var(--rk-sp-8);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.tale__toclist[b-fujkuhusze] {
    margin: 0;
    padding-left: var(--rk-sp-20);
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
    font-size: var(--rk-fs-sm);
}

.tale__toclist li[b-fujkuhusze] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
}

.tale__tocwho[b-fujkuhusze],
.tale__tocwhere[b-fujkuhusze] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.tale__tocwhere[b-fujkuhusze] {
    color: var(--rk-accent-ink);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
}

/* --- one run inside the document ---------------------------------------- */

.tale__part[b-fujkuhusze] {
    padding-top: var(--rk-sp-8);
}

/*
    WHICH TRIP, REPEATED UNDER THE RUN. The contents list says it once at the top and a reader
    on page four has long since scrolled past that. Decision 42: proof is of ONE trip by ONE
    person, and a story that loses which trip is a story a dispute cannot use.
*/
.tale__part-where[b-fujkuhusze] {
    margin: var(--rk-sp-8) 0 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* --- the runs this page did not draw ------------------------------------ */

.tale__rest[b-fujkuhusze] {
    padding: var(--rk-sp-12);
    border: var(--rk-border-hair) dashed var(--rk-line-hard);
    border-radius: var(--rk-radius-xs);
}

.tale__restname[b-fujkuhusze] {
    margin: 0 0 var(--rk-sp-6);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-lg);
    color: var(--rk-ink);
}

.tale__restwhy[b-fujkuhusze] {
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.tale__restlist[b-fujkuhusze] {
    margin: 0;
    padding-left: var(--rk-sp-20);
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    font-size: var(--rk-fs-sm);
}

/* --- the end -------------------------------------------------------------- */

.tale__end[b-fujkuhusze] {
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border) solid var(--rk-line-hard);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.tale__end p[b-fujkuhusze] {
    margin: 0;
}

.tale__end strong[b-fujkuhusze] {
    color: var(--rk-accent-ink);
}

/* --- paper ---------------------------------------------------------------- */

@media print {
    /*
        THE MEASURE IS A SCREEN CONSTRAINT. Paper already has margins, and a 65-character
        column down the middle of A4 wastes half the sheet and doubles the page count.
    */
    .tale[b-fujkuhusze] {
        max-width: none;
        gap: var(--rk-sp-16);
    }

    /* Keep the cover, the contents and each run's opening together. */
    .tale__cover[b-fujkuhusze],
    .tale__toc[b-fujkuhusze] {
        break-inside: avoid;
        break-after: avoid;
    }

    .tale__part[b-fujkuhusze] {
        break-before: auto;
        break-inside: auto;
    }

    .tale__end[b-fujkuhusze] {
        break-before: avoid;
    }
}

/* ---------------------------------------------------------------------------------------
   THE BREADCRUMB.

   ⚠️ RESTATED HERE RATHER THAN SHARED, and that is a property of Blazor scoped CSS rather
   than a choice: the Crumbs slot is markup THIS page writes, so it carries this page's scope
   attribute and no other file's rules can reach it. DispatchCenter.razor.css carries the same
   block for the same reason. Same tokens, so they cannot drift in appearance.
   --------------------------------------------------------------------------------------- */
.crumb[b-fujkuhusze] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    text-decoration: none;
}

.crumb:hover[b-fujkuhusze] {
    color: var(--rk-accent-ink);
}

.crumb--here[b-fujkuhusze] {
    color: var(--rk-ink);
    text-transform: none;
    letter-spacing: normal;
}

.crumb__sep[b-fujkuhusze] {
    margin: 0 var(--rk-sp-5);
    color: var(--rk-line-hard);
}
/* /Pages/Kit.razor.rz.scp.css */
/*
    The two-panel comparison rig.

    One column on a phone (you scroll through light, then dark), two from the desktop rung up
    where there is room to see them together.
*/

.pair[b-g0kc3izlx7] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rk-sp-20);
    margin-top: var(--rk-sp-20);
}

@media (min-width: 1280px) {
    .pair[b-g0kc3izlx7] {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

/*
    Each panel paints its OWN --rk-paper, which is the whole point - the light panel stays
    warm paper and the dark one goes to #14191d even though they are siblings in one
    document.
*/
.panel[b-g0kc3izlx7] {
    position: relative;
    min-width: 0;
    padding: var(--rk-sp-24) var(--rk-sp-16) var(--rk-sp-28);
    background: var(--rk-paper);
    color: var(--rk-ink);
    border: var(--rk-border-card) solid var(--rk-line-hard);
}

.panel__tag[b-g0kc3izlx7] {
    display: inline-block;
    margin-bottom: var(--rk-sp-16);
    padding: var(--rk-sp-2) var(--rk-sp-8);
    background: var(--rk-chrome-bg);
    color: var(--rk-chrome-ink);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-hero);
    line-height: var(--rk-lh-flat);
    text-transform: uppercase;
}

/*
    THE HINT-ALIGNMENT DEMONSTRATION.

    A row of fields is the only place the fix is visible, because the bug was never about
    one field - it was about three of them in a line refusing to bottom-align. Three
    columns from the tablet rung up, stacked below it.
*/

.hints[b-g0kc3izlx7] {
    margin-top: var(--rk-sp-28);
    padding-top: var(--rk-sp-20);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.hints__h[b-g0kc3izlx7] {
    margin: 0 0 var(--rk-sp-10);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-4xl);
    line-height: var(--rk-lh-tight);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.hints__note[b-g0kc3izlx7] {
    margin: 0 0 var(--rk-sp-20);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.hints__tag[b-g0kc3izlx7] {
    margin: 0 0 var(--rk-sp-10);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    line-height: var(--rk-lh-flat);
    text-transform: uppercase;
    color: var(--rk-steel);
}

/*
    align-items: start, NOT stretch. Stretch would make the grid equalise the row for us
    and hide the very bug being demonstrated - the "before" row has to be allowed to look
    as ragged as it really is.
*/
.hints__row[b-g0kc3izlx7] {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--rk-sp-16);
    margin-bottom: var(--rk-sp-24);
}

@media (min-width: 720px) {
    .hints__row[b-g0kc3izlx7] {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* /Pages/Ledger.razor.rz.scp.css */
/*
    MONEY ▸ LEDGER - THE SHARED SHEET. Tokens only, layout only, no literal colour.

    Every tab is its own component, and Blazor scopes a stylesheet to the component that owns it,
    so the ledger's common vocabulary - a worksheet table, a band, a subtotal, a total on a heavy
    rule, a filter bar, a form grid - lives HERE, under the page's .ledger wrapper and ::deep, and
    reaches every tab and every sheet a tab opens (RkModal renders inside its host). Each tab's own
    stylesheet carries only what is its own.

    🛑 THE BAND USES THE PERMANENT-CHROME PAIR (chrome-bg / chrome-ink), never ink on white - the
    dark theme resolves those to the same paper and the text vanishes. Small accent text wears
    --rk-accent-ink, never the raw --rk-accent (a contrast test fails the build).
*/

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

.ledger[b-wuc6dlovvu]  .lg-sec {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    min-width: 0;
    padding-top: var(--rk-sp-8);
}

.ledger[b-wuc6dlovvu]  .lg-title {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.ledger[b-wuc6dlovvu]  .lg-h3 {
    margin: var(--rk-sp-8) 0 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.ledger[b-wuc6dlovvu]  .lg-lede {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.ledger[b-wuc6dlovvu]  .lg-lede strong {
    color: var(--rk-ink);
}

.ledger[b-wuc6dlovvu]  .lg-note {
    margin: 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.4);
}

.ledger[b-wuc6dlovvu]  .lg-note--warn {
    color: var(--rk-warn-ink);
}

.ledger[b-wuc6dlovvu]  .lg-note--bad {
    color: var(--rk-danger-ink);
}

.ledger[b-wuc6dlovvu]  .lg-aside {
    margin: 0;
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border-left: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-zebra);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.4);
}

.ledger[b-wuc6dlovvu]  .lg-aside strong {
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   THE BAR - the question the table below answers.
   --------------------------------------------------------------------------------------- */

.ledger[b-wuc6dlovvu]  .lg-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    padding: var(--rk-sp-4) 0 var(--rk-sp-8);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
}

.ledger[b-wuc6dlovvu]  .lg-bar .rk-field {
    margin-bottom: 0;
}

.ledger[b-wuc6dlovvu]  .lg-bar__pick {
    width: var(--rk-blank-max);
    max-width: 100%;
}

.ledger[b-wuc6dlovvu]  .lg-bar__find {
    width: calc(var(--rk-blank-max) * 1.3);
    max-width: 100%;
}

.ledger[b-wuc6dlovvu]  .lg-bar__date {
    width: calc(var(--rk-blank-max) * 0.8);
}

.ledger[b-wuc6dlovvu]  .lg-bar__end {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    align-items: flex-end;
}

.ledger[b-wuc6dlovvu]  .lg-showing {
    margin: 0;
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   THE WORKSHEET - money right-aligned and mono, bands, subtotals ruled off, the total on a
   heavy rule. The wrapper scrolls sideways on a phone so the PAGE never does.
   --------------------------------------------------------------------------------------- */

.ledger[b-wuc6dlovvu]  .lg-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.ledger[b-wuc6dlovvu]  .lg-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line);
}

.ledger[b-wuc6dlovvu]  .lg-table th,
.ledger[b-wuc6dlovvu]  .lg-table td {
    padding: var(--rk-sp-6) var(--rk-sp-10);
    text-align: left;
    vertical-align: top;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.ledger[b-wuc6dlovvu]  .lg-table thead th {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    border-bottom: var(--rk-border) solid var(--rk-line-hard);
    white-space: nowrap;
}

.ledger[b-wuc6dlovvu]  .lg-table .n {
    text-align: right;
    white-space: nowrap;
    font-family: var(--rk-font-mono);
    font-variant-numeric: tabular-nums;
}

.ledger[b-wuc6dlovvu]  .lg-table .c {
    text-align: center;
    white-space: nowrap;
}

.ledger[b-wuc6dlovvu]  .lg-table .nowrap {
    white-space: nowrap;
}

.ledger[b-wuc6dlovvu]  .lg-table .mono {
    font-family: var(--rk-font-mono);
    white-space: nowrap;
}

.ledger[b-wuc6dlovvu]  .lg-table tbody td {
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.ledger[b-wuc6dlovvu]  .lg-band th,
.ledger[b-wuc6dlovvu]  .lg-band td {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    background: var(--rk-chrome-bg);
    color: var(--rk-chrome-ink);
    border-top: 0;
}

.ledger[b-wuc6dlovvu]  .lg-cat td {
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    background: var(--rk-zebra);
}

.ledger[b-wuc6dlovvu]  .lg-table td.lg-indent {
    padding-left: var(--rk-sp-24);
}

.ledger[b-wuc6dlovvu]  .lg-sub td {
    font-weight: var(--rk-fw-semibold);
    border-top: var(--rk-border) solid var(--rk-line-hard);
}

.ledger[b-wuc6dlovvu]  .lg-computed td {
    font-weight: var(--rk-fw-semibold);
    font-style: italic;
    color: var(--rk-accent-ink);
    background: var(--rk-accent-soft);
}

.ledger[b-wuc6dlovvu]  .lg-total td {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    border-top: var(--rk-rail) solid var(--rk-ink);
}

.ledger[b-wuc6dlovvu]  .lg-total td.n {
    font-family: var(--rk-font-mono);
    letter-spacing: 0;
}

.ledger[b-wuc6dlovvu]  .lg-click {
    cursor: pointer;
}

.ledger[b-wuc6dlovvu]  .lg-click:hover td {
    background: var(--rk-hover-ghost);
}

.ledger[b-wuc6dlovvu]  .lg-dim td {
    color: var(--rk-ink-soft);
}

.ledger[b-wuc6dlovvu]  .lg-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-family: var(--rk-font-mono);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-ink);
    cursor: pointer;
    text-align: left;
}

.ledger[b-wuc6dlovvu]  .lg-link:hover {
    text-decoration: underline;
}

.ledger[b-wuc6dlovvu]  .lg-link:disabled {
    color: var(--rk-disabled-text);
    cursor: default;
    text-decoration: none;
}

/* A row's own action - Edit, Close, Change - in the row's type, so a table stays one line per row. */
.ledger[b-wuc6dlovvu]  .lg-act {
    font-family: var(--rk-font-body);
    font-size: var(--rk-fs-sm);
}

.ledger[b-wuc6dlovvu]  .lg-act + .lg-act {
    margin-left: var(--rk-sp-10);
}

/* A figure that is also a link - ink, not accent, so a column of them still reads as numbers. */
.ledger[b-wuc6dlovvu]  .lg-link--quiet {
    font-weight: var(--rk-fw-body);
    color: var(--rk-ink);
}

.ledger[b-wuc6dlovvu]  .lg-link:focus-visible {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.ledger[b-wuc6dlovvu]  .lg-tag {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   FORMS AND ACTIONS
   --------------------------------------------------------------------------------------- */

.ledger[b-wuc6dlovvu]  .lg-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--rk-blank-max)), 1fr));
    gap: var(--rk-sp-4) var(--rk-sp-12);
    align-items: start;
}

.ledger[b-wuc6dlovvu]  .lg-form .rk-field {
    margin-bottom: 0;
}

.ledger[b-wuc6dlovvu]  .lg-form__span {
    grid-column: 1 / -1;
}

.ledger[b-wuc6dlovvu]  .lg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    align-items: center;
}

.ledger[b-wuc6dlovvu]  .lg-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-8) 0 var(--rk-sp-16);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.ledger[b-wuc6dlovvu]  .lg-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--rk-sp-4) var(--rk-sp-12);
    margin: 0;
    font-size: var(--rk-fs-sm);
}

.ledger[b-wuc6dlovvu]  .lg-kv dt {
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    padding-top: var(--rk-sp-2);
}

.ledger[b-wuc6dlovvu]  .lg-kv dd {
    margin: 0;
    color: var(--rk-ink);
}
/* /Pages/LiveDayMap.razor.rz.scp.css */
/*
    THE LIVE DAY MAP (lane SM). Layout only, tokens only. The literal colours that reach this page
    arrive in style attributes: a route's slot from RkDataPalette (mirrored from rk-tokens.css) and
    a stop's visit-status colour from the company's own data, passed through BoardFormat.Hex.
*/

.ldm[b-gqvdtrbzo7] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    min-width: 0;
}

.ldm--wall .ldm__head[b-gqvdtrbzo7] {
    display: none;
}

/* ── THE BAR: the day, the colour switch, the honest count ─────────────────────────────── */

.ldm__bar[b-gqvdtrbzo7] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8) var(--rk-sp-16);
    margin-top: var(--rk-sp-8);
}

.ldm__group[b-gqvdtrbzo7] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-6);
}

.ldm__steps[b-gqvdtrbzo7] {
    display: flex;
    gap: var(--rk-sp-4);
}

.ldm__truth[b-gqvdtrbzo7] {
    flex: 1 1 18rem;
    margin: 0;
    font-size: var(--rk-fs-md);
    line-height: var(--rk-lh-sentence);
    color: var(--rk-ink);
}

.ldm__day[b-gqvdtrbzo7] {
    display: block;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-bold);
}

.ldm__num[b-gqvdtrbzo7] {
    font-weight: var(--rk-fw-bold);
}

.ldm__soft[b-gqvdtrbzo7] {
    color: var(--rk-ink-soft);
}

.ldm__note[b-gqvdtrbzo7] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

/* ── THE BODY: a large map, the list beside it ─────────────────────────────────────────── */

.ldm__body[b-gqvdtrbzo7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    gap: var(--rk-sp-10);
    align-items: start;
    min-width: 0;
}

.ldm--wall .ldm__body[b-gqvdtrbzo7] {
    grid-template-columns: minmax(0, 1fr);
}

/* isolation: isolate keeps the map's own z-ladder (veil, hover card) under the app bar - the same
   fix BoardMapPane.razor.css carries on its body. */
.ldm__mapbox[b-gqvdtrbzo7] {
    position: relative;
    isolation: isolate;
    min-width: 0;
    height: clamp(24rem, 64dvh, 56rem);
    --rk-map-h: 100%;
    --rk-map-min-h: 0;
}

/* THE WALL: the map takes the whole screen, over the app's own bar - the full-screen viewer's layer. */
.ldm--wall .ldm__mapbox[b-gqvdtrbzo7] {
    position: fixed;
    inset: 0;
    z-index: var(--rk-z-viewer);
    height: auto;
    background: var(--rk-paper);
}

.ldm__map[b-gqvdtrbzo7] {
    width: 100%;
}

/* ── THE CARD, top left on the map ─────────────────────────────────────────────────────── */

.ldm__card[b-gqvdtrbzo7] {
    position: absolute;
    top: var(--rk-sp-8);
    left: var(--rk-sp-8);
    width: min(24rem, calc(100% - (3 * var(--rk-sp-8)) - var(--rk-control-sm)));
    max-height: 70%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    padding: var(--rk-sp-8) var(--rk-sp-10) var(--rk-sp-10);
    background: var(--rk-card);
    color: var(--rk-ink);
    border: var(--rk-border-card) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-sm);
    box-shadow: var(--rk-shadow-float);
}

.ldm__cardhead[b-gqvdtrbzo7] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-6);
}

.ldm__cardtitle[b-gqvdtrbzo7] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: var(--rk-fw-bold);
    font-size: var(--rk-fs-lg);
}

.ldm__cardline[b-gqvdtrbzo7] {
    margin: 0;
    font-size: var(--rk-fs-md);
}

.ldm__cardacts[b-gqvdtrbzo7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-4);
}

.ldm__x[b-gqvdtrbzo7] {
    border: 0;
    background: none;
    padding: 0 var(--rk-sp-2);
    font: inherit;
    font-size: var(--rk-fs-xl);
    line-height: var(--rk-lh-flat);
    color: var(--rk-ink-soft);
    cursor: pointer;
}

.ldm__x:hover[b-gqvdtrbzo7] {
    color: var(--rk-ink);
}

.ldm__link[b-gqvdtrbzo7] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-ink);
}

.ldm__status[b-gqvdtrbzo7] {
    display: inline-block;
    padding: 0 var(--rk-sp-4);
    border-radius: var(--rk-radius-xs);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    white-space: nowrap;
}

.ldm__tag[b-gqvdtrbzo7] {
    display: inline-block;
    margin-left: var(--rk-sp-4);
    padding: 0 var(--rk-sp-4);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-xs);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    text-transform: uppercase;
    white-space: nowrap;
}

.ldm__swatch[b-gqvdtrbzo7] {
    flex: 0 0 auto;
    display: inline-block;
    width: var(--rk-sp-12);
    height: var(--rk-sp-12);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-circle);
}

/* ── THE KEY, bottom left on the map - each key is a switch, struck through while off ──── */

.ldm__legend[b-gqvdtrbzo7] {
    position: absolute;
    left: var(--rk-sp-8);
    bottom: var(--rk-sp-8);
    max-width: calc(100% - (2 * var(--rk-sp-8)));
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4);
    padding: var(--rk-sp-4);
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-sm);
    box-shadow: var(--rk-shadow-drop);
}

.ldm__key[b-gqvdtrbzo7] {
    display: inline-flex;
    align-items: center;
    gap: var(--rk-sp-4);
    padding: var(--rk-sp-2) var(--rk-sp-6);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-pill);
    background: var(--rk-paper);
    color: var(--rk-ink);
    font: inherit;
    font-size: var(--rk-fs-sm);
    cursor: pointer;
}

.ldm__key:hover[b-gqvdtrbzo7] {
    border-color: var(--rk-ink);
}

.ldm__key.is-off[b-gqvdtrbzo7] {
    opacity: 0.55;
}

.ldm__key.is-off .ldm__keyword[b-gqvdtrbzo7] {
    text-decoration: line-through;
}

.ldm__key--act[b-gqvdtrbzo7] {
    font-weight: var(--rk-fw-semibold);
}

.ldm__keynum[b-gqvdtrbzo7] {
    font-family: var(--rk-font-mono);
    color: var(--rk-ink-soft);
}

.ldm__wallbar[b-gqvdtrbzo7] {
    position: absolute;
    top: var(--rk-sp-8);
    right: calc(var(--rk-control-sm) + (2 * var(--rk-sp-8)));
    display: flex;
    align-items: center;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-2) var(--rk-sp-2) var(--rk-sp-2) var(--rk-sp-8);
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-sm);
    box-shadow: var(--rk-shadow-drop);
}

.ldm__wallword[b-gqvdtrbzo7] {
    font-weight: var(--rk-fw-semibold);
    font-size: var(--rk-fs-md);
}

/* ── THE LIST BESIDE THE MAP ───────────────────────────────────────────────────────────── */

.ldm__side[b-gqvdtrbzo7] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    min-width: 0;
    max-height: clamp(24rem, 64dvh, 56rem);
    overflow-y: auto;
}

.ldm__block[b-gqvdtrbzo7] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
}

.ldm__h[b-gqvdtrbzo7] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--rk-track-lg);
}

.ldm__list[b-gqvdtrbzo7],
.ldm__stops[b-gqvdtrbzo7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
}

.ldm__row[b-gqvdtrbzo7],
.ldm__stop[b-gqvdtrbzo7],
.ldm__fold[b-gqvdtrbzo7] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-6);
    width: 100%;
    padding: var(--rk-sp-4) var(--rk-sp-6);
    border: 0;
    border-radius: var(--rk-radius-xs);
    background: none;
    color: var(--rk-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ldm__row:hover[b-gqvdtrbzo7],
.ldm__stop:hover[b-gqvdtrbzo7],
.ldm__fold:hover[b-gqvdtrbzo7] {
    background: var(--rk-hover-ghost);
}

.ldm__row.is-selected[b-gqvdtrbzo7],
.ldm__stop.is-selected[b-gqvdtrbzo7] {
    background: var(--rk-accent-soft);
}

.ldm__rowmain[b-gqvdtrbzo7] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: var(--rk-fw-semibold);
}

.ldm__rowsub[b-gqvdtrbzo7] {
    font-size: var(--rk-fs-sm);
    text-align: right;
}

.ldm__route[b-gqvdtrbzo7] {
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-card);
}

.ldm__route.is-offmap[b-gqvdtrbzo7] {
    opacity: 0.6;
}

.ldm__routehead[b-gqvdtrbzo7] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-4);
    padding-right: var(--rk-sp-4);
}

.ldm__fold[b-gqvdtrbzo7] {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
}

.ldm__routename[b-gqvdtrbzo7] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: var(--rk-fw-bold);
}

.ldm__letter[b-gqvdtrbzo7] {
    margin-right: var(--rk-sp-4);
    font-family: var(--rk-font-mono);
}

.ldm__routesub[b-gqvdtrbzo7] {
    flex: 1 1 100%;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.ldm__switch[b-gqvdtrbzo7] {
    flex: 0 0 auto;
    padding: var(--rk-sp-2) var(--rk-sp-6);
    border: var(--rk-border-card) solid var(--rk-ink);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-ink);
    color: var(--rk-paper);
    font: inherit;
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    white-space: nowrap;
    cursor: pointer;
}

.ldm__switch[data-mode="only"][b-gqvdtrbzo7] {
    background: var(--rk-accent);
    border-color: var(--rk-accent);
    color: var(--rk-on-fill);
}

.ldm__switch[data-mode="off"][b-gqvdtrbzo7],
.ldm__switch[data-mode="others"][b-gqvdtrbzo7] {
    background: none;
    color: var(--rk-ink);
}

.ldm__stops[b-gqvdtrbzo7] {
    padding: 0 var(--rk-sp-4) var(--rk-sp-4);
}

.ldm__stop[b-gqvdtrbzo7] {
    align-items: flex-start;
}

.ldm__stopcode[b-gqvdtrbzo7] {
    flex: 0 0 var(--rk-sp-28);
    font-weight: var(--rk-fw-bold);
}

.ldm__stopmain[b-gqvdtrbzo7] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: var(--rk-fs-sm);
}

.ldm__stopname[b-gqvdtrbzo7] {
    font-weight: var(--rk-fw-semibold);
    font-size: var(--rk-fs-md);
}

.ldm__stopside[b-gqvdtrbzo7] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--rk-sp-2);
    font-size: var(--rk-fs-sm);
}

/* ── NARROW: the list goes under the map ───────────────────────────────────────────────── */

@media (max-width: 1023.98px) {
    .ldm__body[b-gqvdtrbzo7] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ldm__mapbox[b-gqvdtrbzo7] {
        height: clamp(20rem, 62dvh, 40rem);
    }

    .ldm__side[b-gqvdtrbzo7] {
        max-height: none;
        overflow: visible;
    }
}
/* /Pages/LocationCenter.razor.rz.scp.css */
/*
    THE SITE center.

    Layout only, tokens only, no literal colour anywhere - nothing on this page comes out of a
    customer's database carrying its own colour, so unlike the board there is not even an
    inline style exception.

    ⚠️ ::deep for any kit class. A Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

/* ---------------------------------------------------------------------------------------
   THE TWO-COLUMN SHELL - and the right column is not decoration.

   Decision 34: "on the right side of every screen - at top - the workflows for this that you
   need to do and progress bar." The runner does not exist yet, so the rail carries who pays,
   where the site sits in the tree, and the at-a-glance card - in that order. When the panel
   arrives it goes FIRST inside .centre__side and everything below it simply moves down.
   Building the page as one column and retrofitting a rail is how a screen ends up with the
   workflow panel somewhere it does not belong.

   The rail is --rk-lane-w, the same width a board lane uses, so a person moving between the
   two screens sees one system rather than two.
   --------------------------------------------------------------------------------------- */
.centre[b-lq5vmrydvx] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-20);
    align-items: start;
    padding-bottom: var(--rk-sp-40);
}

@media (min-width: 1080px) {
    .centre[b-lq5vmrydvx] {
        grid-template-columns: minmax(0, 1fr) var(--rk-lane-w);
    }
}

.centre__main[b-lq5vmrydvx] {
    min-width: 0;
}

.centre__side[b-lq5vmrydvx] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    min-width: 0;
}

/*
    On a phone the rail goes FIRST, and it earns that place more than it used to.

    ⚠️ THIS NOTE USED TO SAY THE RAIL WAS THE AT-A-GLANCE COUNTS. It now leads with WHO PAYS
    FOR THIS SITE - current payers, the primary one marked, a dispatch bar in red - which is
    the first question anybody opening a site on a handset is actually asking, and the answer
    a technician standing outside needs before anything else on the page. The counts follow
    it. Putting either under four cards of detail means scrolling past the answer to reach
    the summary, which is what this rule has always been for.
*/
@media (max-width: 1079px) {
    .centre__side[b-lq5vmrydvx] {
        order: -1;
    }
}

/* ---------------------------------------------------------------------------------------
   THE BREADCRUMB.
   --------------------------------------------------------------------------------------- */
.crumb[b-lq5vmrydvx] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    text-decoration: none;
}

.crumb:hover[b-lq5vmrydvx] {
    color: var(--rk-accent-ink);
}

.crumb--here[b-lq5vmrydvx] {
    color: var(--rk-ink);
    text-transform: none;
    letter-spacing: normal;
}

.crumb__sep[b-lq5vmrydvx] {
    margin: 0 var(--rk-sp-5);
    color: var(--rk-line-hard);
}

/* ---------------------------------------------------------------------------------------
   THE FACT LIST. A definition list, because that is what it is - and a screen reader
   announces "Gate code, 4417" rather than reading two unrelated cells.
   --------------------------------------------------------------------------------------- */
.facts[b-lq5vmrydvx] {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: var(--rk-sp-4) var(--rk-sp-14);
    margin: 0;
}

.facts dt[b-lq5vmrydvx] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.facts dd[b-lq5vmrydvx] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.facts--tight[b-lq5vmrydvx] {
    grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
    gap: var(--rk-sp-3) var(--rk-sp-10);
}

/* The address key is a long opaque string. It wraps rather than pushing the card sideways. */
.key[b-lq5vmrydvx] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

/*
    A SECOND LINE INSIDE A FACT. The site clock's zone id and offset sit under the time
    rather than beside it - "2:41 PM, Fri 18 Sep" and "America/Chicago, UTC-5" are one answer
    at two levels of detail, and putting them on one line in a --rk-lane-w rail wraps badly
    on every phone.
*/
.facts .sub[b-lq5vmrydvx] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE RAIL'S LINK LISTS - who pays, and where this site sits in the tree.

   RkRow is a full-width button and carries its own height and rail, so this only has to
   stack them. No colour, no border: the rows bring theirs.
   --------------------------------------------------------------------------------------- */
.whopays[b-lq5vmrydvx] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
}

/* ---------------------------------------------------------------------------------------
   THE FOOTNOTES. A card footer that explains a rule rather than offering an action.
   --------------------------------------------------------------------------------------- */
.note[b-lq5vmrydvx] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE BAR ABOVE A LIST INSIDE A TAB - a filter on the left, the one action on the right.
   --------------------------------------------------------------------------------------- */
.rowbar[b-lq5vmrydvx] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-4) 0 var(--rk-sp-12);
}

/* ---------------------------------------------------------------------------------------
   THE TYPED HALF of a madlib, and the edit form. Same grid, because they are the same thing
   at different moments and a person should not have to relearn the layout to change what
   they just created.
   --------------------------------------------------------------------------------------- */
.typed[b-lq5vmrydvx] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .typed[b-lq5vmrydvx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The edit form has no sentence above it, so it needs no rule and gets a third column. */
.typed--wide[b-lq5vmrydvx] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

@media (min-width: 1100px) {
    .typed--wide[b-lq5vmrydvx] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------------------
   THE TWO-LINE TABLE CELL - the same three classes the employee and site LISTS use, and
   deliberately identical to them. A contact whose name sits over their job title has to
   look the same here as it does there, or the two screens read as two products.
   --------------------------------------------------------------------------------------- */
.cell--name[b-lq5vmrydvx] {
    min-width: 0;
}

.cell__title[b-lq5vmrydvx] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell__tag[b-lq5vmrydvx] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE END-RELATIONSHIP DIALOG.
   --------------------------------------------------------------------------------------- */
.endwho[b-lq5vmrydvx] {
    margin: var(--rk-sp-14) 0;
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-snug);
}

/* ---------------------------------------------------------------------------------------
   THE DESTRUCTIVE BLOCK on the change-it tab.

   The idiom UnitChangeDialog.razor.css established and argued: separated from Save by a RULE
   and a sentence, never by a colour, because a red panel is a thing people learn to scroll
   past. The control is a LINK rather than a filled danger button - it destroys nothing, it
   opens a confirm that names the address - and a filled red button here would compete with
   Save for the eye on a phone, where the two sit within a thumb's width of each other.

   ⚠️ NO PAIRING OF background: var(--rk-ink) WITH color: var(--rk-white). The dark theme
   resolves both to #e9e4d8, which is a 1:1 contrast ratio and invisible text; it shipped
   that way once. This is the obvious place somebody would reach for a dark or a red slab,
   and it deliberately does not.
   --------------------------------------------------------------------------------------- */
.grave[b-lq5vmrydvx] {
    margin-top: var(--rk-sp-20);
    padding-top: var(--rk-sp-14);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.grave__word[b-lq5vmrydvx] {
    margin: 0 0 var(--rk-sp-8);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   GETTING THERE - the map actions in the "Getting in" card's footer.

   THESE ARE ANCHORS, NOT BUTTONS, AND THAT IS DELIBERATE. A real <a href> gives a middle
   click, a long-press "open in new tab", a right-click "copy link address" and - the one
   that matters on a phone - the OS handing maps.apple.com straight to the native app. A
   button that navigates in an onclick has none of that and gains nothing.

   ⚠️ THEY CANNOT REUSE .rk-btn. RkButton.razor.css is a SCOPED stylesheet, so its rules
   compile to .rk-btn[b-rkbuttonscope] and an anchor written here would never match one. The
   ghost look is therefore rebuilt from the same tokens rather than borrowed, which is why
   every value below is a token and not one raw colour, size, radius or shadow.

   ⚠️ NO PAIRING OF background: var(--rk-ink) WITH color: var(--rk-white). The dark theme
   resolves both to #e9e4d8 - a 1:1 contrast ratio and invisible text. The active state here
   is the ghost press wash, exactly as RkButton does it, and never an ink slab.
   --------------------------------------------------------------------------------------- */
.golink[b-lq5vmrydvx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--rk-control-sm);
    padding: var(--rk-sp-4) var(--rk-sp-12);
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-bold);
    font-size: var(--rk-fs-xl);
    letter-spacing: var(--rk-track-3xl);
    line-height: var(--rk-lh-flat);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--rk-ink);
    background: transparent;
    border: var(--rk-border) solid var(--rk-ink);
    border-radius: var(--rk-radius-0);
    touch-action: manipulation;
    transition: background-color var(--rk-dur-ui) var(--rk-ease);
}

/*
   THE GOOGLE ONE CARRIES THE ACCENT EDGE because it is the one a technician presses. Apple
   Maps sits beside it as the same weight of control with no edge - an alternative, not a
   second primary - which keeps exactly one thing on this card asking to be pressed.
*/
.golink--go[b-lq5vmrydvx] {
    border-bottom: var(--rk-btn-edge) solid var(--rk-accent);
}

.golink:hover[b-lq5vmrydvx]   { background: var(--rk-hover-ghost); color: var(--rk-accent-ink); }

.golink:active[b-lq5vmrydvx]  { background: var(--rk-press-ghost); }

.golink:focus-visible[b-lq5vmrydvx] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

/*
   WHAT THE PIN IS AIMED AT, and the sentence explaining why there is no pin at all. Prose
   weight, not control weight - it is telling you about the data, not offering an action.
*/
.golink__how[b-lq5vmrydvx] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.golink__none[b-lq5vmrydvx] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/*
   THE HAND-COPY HINT. It takes the whole row so it sits UNDER the buttons rather than beside
   them - the remedy is "select the link and copy it yourself", and that instruction has to be
   readable while the person is doing it. It is not a toast for the same reason: a message on
   a timer is a message nobody finished reading.
*/
.golink__hint[b-lq5vmrydvx] {
    flex: 1 0 100%;
    margin: var(--rk-sp-6) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-accent-ink);
}

/*
   THE HAND-COPY BOX. It appears only when the clipboard refused, and it exists because
   RkClipboard.HandCopyHint's sentence promises the person can copy the link by hand - a
   promise a screen cannot keep while the URL is only ever an href.

   ⚠️ --rk-field, NEVER --rk-white, for the input surface. rk-tokens.css carries --rk-field
   precisely because a literal white input becomes #e9e4d8 text on #e9e4d8 in the dark theme,
   which is an invisible field. DesignSystemTests gates the pair; this comment is why.
*/
.golink__handlabel[b-lq5vmrydvx] {
    flex: 1 0 100%;
    margin-top: var(--rk-sp-6);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.golink__hand[b-lq5vmrydvx] {
    flex: 1 0 100%;
    width: 100%;
    min-height: var(--rk-control-sm);
    padding: var(--rk-sp-5) var(--rk-sp-8);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    background: var(--rk-field);
    color: var(--rk-ink);
    border: var(--rk-border) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-0);
}

.golink__hand:focus-visible[b-lq5vmrydvx] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

/* FIND ON THE MAP AGAIN (2026-11-02) - under the coordinate, its answer beneath it. */
.geocode-again[b-lq5vmrydvx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rk-sp-4);
    margin-top: var(--rk-sp-6);
}
/* /Pages/Locations.razor.rz.scp.css */
/*
    THE SITE LIST.

    Layout only. Every control on this page belongs to Riproka.UI.Controls and every colour,
    size, radius and shadow below is a --rk-* token - there is not a single literal on this
    page, because there is nothing here that comes out of a customer's database wanting its
    own colour.

    ⚠️ ::deep IS REQUIRED FOR ANY KIT CLASS. A Class passed to a kit control lands on THAT
    component's scoped element, so a bare `.bar__find { }` here compiles to
    `.bar__find[b-thispage]` and silently matches nothing. Anchoring on an element this file
    owns - `.bar`, `.make` - is what reaches through.
*/

/* ---------------------------------------------------------------------------------------
   THE FILTER BAR. Same shape as the board's, on purpose: a person who learned one learned
   both, and a search bar that moves between screens is a search bar nobody trusts.
   --------------------------------------------------------------------------------------- */
.bar[b-4t06lq9dso] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-4t06lq9dso] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

/*
    RkField carries a bottom margin because it is built for a stacked form. In a single-line
    filter bar that margin is what leaves the GO button sitting below the input it belongs to.
*/
.bar[b-4t06lq9dso]  .rk-field {
    margin-bottom: 0;
}

.bar[b-4t06lq9dso]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.6);
    max-width: 100%;
}

.bar[b-4t06lq9dso]  .bar__pick,
.bar[b-4t06lq9dso]  .bar__num {
    width: var(--rk-blank-max);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   THE PAYER FILTER - a labelled button rather than a select, and that is forced rather than
   chosen. A select needs its whole option list up front and there are 315 customers at ICS
   and thousands at a national account, so the control has to be a REMOTE SEARCH: the pick
   sheet the create sentence already uses. The label is hand-rolled here because the kit's
   RkField owns a label only for an INPUT, and wiring a button into RkField would be adding a
   control to a shared kit from inside one page's lane.
   --------------------------------------------------------------------------------------- */
.bar__payer[b-4t06lq9dso] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-6);
    flex-wrap: wrap;
    min-width: 0;
    /* Sits on the same baseline as the fields beside it, which carry a label above them. */
    padding-bottom: var(--rk-sp-2);
}

.bar__payerlab[b-4t06lq9dso] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   WHAT IS ON SCREEN, IN WORDS. One quiet line above the grid, never a heading - it is a
   caption on the list and competing with the page title would make it an announcement.
   --------------------------------------------------------------------------------------- */
.showing[b-4t06lq9dso] {
    margin: 0 0 var(--rk-sp-8);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE CREATE MADLIB. Prose over a form, which is exactly what lift-06 §2.2 prescribes:
   the sentence carries the CHOICES, the card below carries the TRANSCRIPTION.
   --------------------------------------------------------------------------------------- */
.make[b-4t06lq9dso] {
    margin-bottom: var(--rk-sp-20);
}

/*
    The typed half. Two columns where there is room and one where there is not - an address
    typed down a single column on a 1600px monitor is a scroll for no reason, and typed across
    four columns on a laptop is a form nobody can follow.
*/
.make__typed[b-4t06lq9dso] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .make__typed[b-4t06lq9dso] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .make__typed[b-4t06lq9dso] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------------------
   THE CELLS. RkTable owns the grid; these are the two columns that carry more than one
   thing and need their own shape.
   --------------------------------------------------------------------------------------- */
.cell--code[b-4t06lq9dso] {
    white-space: nowrap;
}

.cell--name[b-4t06lq9dso],
.cell--zone[b-4t06lq9dso] {
    min-width: 0;
}

.cell__title[b-4t06lq9dso] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
    "inside another site" is a FACT about the row, not a status, so it is quiet grey text and
    not a stamp. A stamp on a third of the rows in a building-heavy estate is noise, and the
    suites column beside it already carries the other half of the same story.
*/
.cell__tag[b-4t06lq9dso] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/*
    A ZONE PIN - still a fact, not a status, so the same quiet tag; in accent INK (small text never
    wears raw accent) because it is the exception a dispatcher scanning a zone needs to see.
*/
.cell__tag--pin[b-4t06lq9dso] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-ink);
}

/* ---------------------------------------------------------------------------------------
   THE PAGER. Deliberately three things: where you are, back, forward. A numbered pager over
   39,680 rows is a row of buttons nobody presses.
   --------------------------------------------------------------------------------------- */
.pager[b-4t06lq9dso] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-10) 0 var(--rk-sp-20);
}

.pager__word[b-4t06lq9dso] {
    margin-right: auto;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}
/* /Pages/Login.razor.rz.scp.css */
/*
    THE SIGN-IN GATE.

    Layout only, tokens only, no literal colour - the same rule every page in this app
    follows. The one thing worth saying out loud is the width.

    THE GATE IS NARROW ON PURPOSE, AND NARROWER THAN THE APP COLUMN. --rk-col opens with the
    viewport (520 / 640 / 860 / none) so a dispatch board can breathe, but a sign-in form has
    exactly three fields and a 1280px-wide one reads as a mistake. 420px holds an email
    address at the input's 16px without wrapping, which is the only measurement that matters
    here.

    NO COLOUR PAIR IS DECLARED ANYWHERE IN THIS FILE. The dark theme resolves --rk-white and
    --rk-ink to the same value, so `background: var(--rk-ink); color: var(--rk-white)` is
    invisible - it shipped once. Everything visible on this page is drawn by the kit, which
    already knows that. If this page ever needs permanent dark chrome the pair is
    --rk-chrome-bg / --rk-chrome-ink.

    ::deep is needed for anything inside a kit control - a Class passed to RkCard or
    RkTextInput lands on THAT component's scoped element, so a bare rule here compiles against
    this page's scope and matches nothing.
*/

.gate[b-k02uesoy1y] {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    padding-block: var(--rk-sp-24) var(--rk-sp-40);
}

/*
    "YOUR SESSION ENDED" (decision 55) sits above the sign-in card, a card's rhythm apart - the
    notice and the card touching read as one box, and the note is not part of the form.
*/
.gate__ended[b-k02uesoy1y] {
    margin-bottom: var(--rk-sp-14);
}

/* ---------------------------------------------------------------------------------------
   THE WORDMARK. The one piece of brand on the one screen with nothing else on it.
   --------------------------------------------------------------------------------------- */
.gate__head[b-k02uesoy1y] {
    text-align: center;
    margin-bottom: var(--rk-sp-24);
}

.gate__mark[b-k02uesoy1y] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-7xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-7xl);
    line-height: var(--rk-lh-tight);
    text-transform: uppercase;
    color: var(--rk-ink);
}

/*
    THE TINY WIDE LINE under the wordmark. --rk-track-hero exists for exactly this - the
    tracking ladder widens as the size shrinks, which is the signature of the look.
*/
.gate__tag[b-k02uesoy1y] {
    margin: var(--rk-sp-4) 0 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-hero);
    text-transform: uppercase;
    color: var(--rk-steel);
}

/* ---------------------------------------------------------------------------------------
   THE SECOND FACTOR.
   --------------------------------------------------------------------------------------- */

/* What the host said it did - "we texted a code to ...-0142". Prose, so it reads as a
   sentence rather than as a field label. */
.gate__said[b-k02uesoy1y] {
    margin: 0 0 var(--rk-sp-16);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/*
    SIX DIGITS, SPACED OUT, IN MONO. Every number in this product is monospace, and a code
    being read off a phone screen and typed into another one is the case that most rewards
    it: 0/O and 1/l stop being a guess. The tracking is what turns six characters into six
    countable characters.
*/
.gate[b-k02uesoy1y]  .gate__code .rk-input {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-5xl);
    letter-spacing: var(--rk-track-2xl);
    text-align: center;
}

/* ---------------------------------------------------------------------------------------
   THE OTHER PLACES THE CODE COULD GO.

   STACKED AND LEFT-ALIGNED, not a row of chips. There are at most two of them plus a
   resend, each carrying a masked destination - "Send it to my email instead
   (c...@example.com)" - and that text does not fit side by side at 420px without
   truncating the one part a person needs to read before trusting a code to it.
   --------------------------------------------------------------------------------------- */
.gate__alts[b-k02uesoy1y] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rk-sp-4);
    margin-top: var(--rk-sp-16);
}

/*
    THE COUNTDOWN. Accent ink rather than danger: waiting thirty seconds is the throttle
    working, not something the person got wrong, and colouring it red on the screen of
    somebody already struggling to sign in says the opposite.
*/
.gate__wait[b-k02uesoy1y] {
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-accent-ink);
}

/* The column aligns to flex-start so the link buttons keep their own width; the notice
   wants the full measure or its sentence wraps at the length of the longest button. */
.gate__alts-notice[b-k02uesoy1y] {
    align-self: stretch;
    margin-top: var(--rk-sp-8);
}

/* ---------------------------------------------------------------------------------------
   THE COMMIT. A gloved thumb at six in the morning, so it takes the touch floor and the
   full width - RkSize.Large already asks for --rk-tap and Block for the width; this is the
   breathing room above it.
   --------------------------------------------------------------------------------------- */
.gate[b-k02uesoy1y]  .gate__go {
    margin-top: var(--rk-sp-8);
}
/* /Pages/MapCenter.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THE MAP CENTER.

   🛑 EVERY COLOUR, SIZE, RADIUS AND SHADOW COMES FROM rk-tokens.css. The only literal colours
   on this screen are the DATA colours - a facet value's swatch and a plot dot - and those
   arrive as inline `style="background:#xxxxxx"` from the payload or from MapPalette, exactly
   as the dispatch board already renders VisitStatusColorHex. The rule governs the surface the
   kit paints; the data paints itself.

   🛑 ::deep IS REQUIRED ON EVERY RULE THAT REACHES INTO A CHILD COMPONENT. Scoped CSS stamps
   its attribute on THIS page's own elements only, so a bare `.rk-check__box` selector here
   matches nothing at all. That has shipped broken in this repository twice; every rule below
   that targets an Rk* internal carries ::deep on purpose.

   ⚠️ AND THE DARK-THEME TRAP: never pair background:var(--rk-ink) with color:var(--rk-white).
   Both resolve to #e9e4d8 in the dark theme and the text ships invisible. Permanent dark
   chrome uses --rk-chrome-bg / --rk-chrome-ink, which do not flip.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.mc[b-002egkr883] {
    display: block;
    padding-bottom: var(--rk-sp-28);
}

/* ── THE TWO-COLUMN WORKSPACE ─────────────────────────────────────────────────────────────
   V1's shape and it is right: narrowing happens in the rail and it must stay visible while
   you look at the result.
   ⚠️ V1's phone story was dead - OpenMobileFilters() had no caller and Maps8.css defined
   neither .mobile-overlay nor .filter-sidebar.active, so on a phone you got a rail stacked
   above the map with no way to dismiss it. Here the grid simply collapses to one column and
   the rail scrolls with the page, which needs no JS and cannot get stuck. */
.mc__body[b-002egkr883] {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--rk-sp-16);
    align-items: start;
}

.mc__rail[b-002egkr883] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    min-width: 0;
}

.mc__work[b-002egkr883] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-14);
    min-width: 0;
    position: relative;
}

@media (max-width: 68rem) {
    .mc__body[b-002egkr883] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── KIOSK / WALL DISPLAY ─────────────────────────────────────────────────────────────────
   About eleven lines in V1 too, and nearly free. 🛑 The difference is that the LEGEND stays,
   because V1 hid the rail and its rail held the only key to the colours. */
.mc--kiosk .mc__body[b-002egkr883] {
    grid-template-columns: minmax(0, 1fr);
}

/* ⚠️ THE HEADER IS HIDDEN IN CSS RATHER THAN BY AN @if, AND THAT IS NOT A STYLE CHOICE.
   A component with NAMED child-content fragments - RkPageHeader's <Meta> and <Actions> -
   sitting directly inside a Razor code block is mis-parsed: <Meta> collides with the void
   HTML <meta> element, the fragment never opens, and the error names the WRAPPING component
   as unclosed rather than the line that caused it. Every other page here declares
   RkPageHeader at markup level. Hiding it costs one rule and skips a re-render. */
.mc--kiosk .mc__head[b-002egkr883] {
    display: none;
}

.mc__unkiosk[b-002egkr883] {
    position: absolute;
    top: 0;
    right: 0;
    z-index: var(--rk-z-bar);
    min-width: var(--rk-control-sm);
    height: var(--rk-control-sm);
    border: var(--rk-border) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-0);
    background: var(--rk-card);
    color: var(--rk-ink);
    font-size: var(--rk-fs-4xl);
    line-height: var(--rk-lh-flat);
    cursor: pointer;
}

.mc__unkiosk:hover[b-002egkr883] {
    background: var(--rk-hover-ghost);
}

/* ── RAIL FURNITURE ─────────────────────────────────────────────────────────────────────── */

.mc__railhead[b-002egkr883] {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-6) var(--rk-sp-2) 0;
}

.mc__railtitle[b-002egkr883] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-2xl);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.mc__hint[b-002egkr883] {
    margin: var(--rk-sp-8) 0 0;
    font-size: var(--rk-fs-md);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.mc__viewtools[b-002egkr883] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    margin-top: var(--rk-sp-10);
    padding-top: var(--rk-sp-8);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.mc__viewrow[b-002egkr883] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-6);
}

.mc__viewname[b-002egkr883] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink);
}

.mc__always[b-002egkr883] {
    margin-top: var(--rk-sp-10);
    padding-top: var(--rk-sp-8);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

/* ── A LAYER CARD ─────────────────────────────────────────────────────────────────────────
   Cut-corner card, ink rail, the house look. The header is one row: visibility, name, the
   live filtered/total badge, and the focus target. */

.mc__layer[b-002egkr883] {
    border: var(--rk-border-card) solid var(--rk-line-hard);
    background: var(--rk-card);
    box-shadow: var(--rk-shadow-card);
    clip-path: polygon(0 0, calc(100% - var(--rk-corner)) 0, 100% var(--rk-corner), 100% 100%, 0 100%);
}

.mc__layer--off[b-002egkr883] {
    opacity: 0.62;
}

.mc__lhead[b-002egkr883] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-6);
    padding: var(--rk-sp-6) var(--rk-sp-10);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

/* ::deep, because the checkbox is an RkCheck and its internals belong to the control kit.
   ⚠️ AND `width: auto` IS THE LOAD-BEARING LINE, not `flex`. RkCheck is a full-width control
   by default; `flex: 0 0 auto` leaves the basis at `width: 100%`, so the box still ate the
   whole header row and the layer name, the filtered/total badge and the focus target were
   squeezed to zero. Measured in the browser, not reasoned about: the checkbox rendered at
   330px and .mc__ltitle at 0. */
.mc__lhead[b-002egkr883]  .mc__lvis {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
    min-height: 0;
}

.mc__ltitle[b-002egkr883] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--rk-sp-6);
    padding: var(--rk-sp-4) 0;
    border: 0;
    background: none;
    color: var(--rk-ink);
    text-align: left;
    cursor: pointer;
}

.mc__lchev[b-002egkr883] {
    flex: 0 0 auto;
    color: var(--rk-steel);
    font-size: var(--rk-fs-sm);
}

.mc__lname[b-002egkr883] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xl);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
}

.mc__lfunnel[b-002egkr883] {
    flex: 0 0 auto;
    color: var(--rk-accent-ink);
    font-size: var(--rk-fs-2xs);
}

/* THE RUNNING COUNT. The feedback loop that makes narrowing feel like progress rather than
   typing into a void - V1's single best small idea on this screen. */
.mc__lcount[b-002egkr883] {
    flex: 0 0 auto;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--rk-ink-soft);
    white-space: nowrap;
}

.mc__lfocus[b-002egkr883] {
    flex: 0 0 auto;
    width: var(--rk-control-xs);
    height: var(--rk-control-xs);
    border: var(--rk-border) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-0);
    background: var(--rk-card);
    color: var(--rk-steel);
    font-size: var(--rk-fs-xl);
    line-height: var(--rk-lh-flat);
    cursor: pointer;
}

.mc__lfocus:hover[b-002egkr883] {
    background: var(--rk-hover-ghost);
}

.mc__lfocus--on[b-002egkr883] {
    border-color: var(--rk-accent);
    background: var(--rk-accent-soft);
    color: var(--rk-accent-deep);
}

.mc__lbody[b-002egkr883] {
    padding: var(--rk-sp-10);
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
}

.mc__purpose[b-002egkr883] {
    margin: 0;
    font-size: var(--rk-fs-md);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/* NAMING THE DOOR IS DELIBERATE. "Humans come second, Claude comes first" - a capability name
   on the card is what lets a person (or an agent reading over their shoulder) ask for the
   same thing over REST or MCP. */
.mc__door[b-002egkr883] {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-6);
}

.mc__doorlabel[b-002egkr883] {
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.mc__doorname[b-002egkr883] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

/* ── THE TWO SECTIONS: ASK THE SERVER, THEN NARROW WHAT CAME BACK ─────────────────────────
   §3.1's split made visible. One costs a round trip and says "reload"; the other is instant.
   A dispatcher feels the difference exactly once. */

.mc__fetch[b-002egkr883],
.mc__narrow[b-002egkr883] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.mc__sechead[b-002egkr883] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-8);
}

.mc__sectitle[b-002egkr883] {
    margin: 0;
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.mc__sechead[b-002egkr883]  .mc__colorby {
    flex: 0 1 12rem;
}

.mc__param[b-002egkr883] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
}

/* ⚠️ A TAG, NOT A SENTENCE. Several parameters on one door count as a handle, and repeating
   "this door refuses a call with no handle" under four of them read as an error rather than
   as a property of the door. One small mark per parameter, one sentence in the tooltip. */
.mc__handle[b-002egkr883] {
    align-self: flex-start;
    padding: 0 var(--rk-sp-4);
    border: var(--rk-border-hair) solid var(--rk-accent);
    font-size: var(--rk-fs-3xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

/* ── THE ID PICKER BUTTON ─────────────────────────────────────────────────────────────────
   🛑 IT REPLACES A <select> THAT COULD NOT TELL THE TRUTH. Measured on Riproka_Acme: the Zone
   control was filled from ONE page of search_zones and offered 200 of 1,172 zones - 972 of
   them, holding 1,533 sites, unreachable, with no search and nothing saying the list stopped.
   A button that opens RkPickSheet in RemoteSearch can say both things a <select> cannot: how
   many there are, and that typing reaches all of them.

   It wears the input's own surface and border tokens on purpose - it stands exactly where a
   field stood and must not read as a different KIND of control. --rk-field and never
   --rk-white: in the dark theme --rk-white resolves to the same value as --rk-ink and the
   label would vanish. */
.mc__pick[b-002egkr883] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
}

.mc__picklabel[b-002egkr883] {
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-semibold);
    font-size: var(--rk-fs-xl);
    letter-spacing: var(--rk-track-xl);
    line-height: var(--rk-lh-tight);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.mc__pickbtn[b-002egkr883] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-6);
    width: 100%;
    min-height: var(--rk-control-h);
    padding: var(--rk-sp-10) var(--rk-sp-12);
    background: var(--rk-field);
    border: var(--rk-border) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-0);
    text-align: left;
    cursor: pointer;
}

.mc__pickbtn:hover:not(:focus)[b-002egkr883] {
    border-color: var(--rk-steel);
}

.mc__pickbtn:focus-visible[b-002egkr883],
.mc__pickbtn:focus[b-002egkr883] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-1);
    border-color: var(--rk-accent);
}

/* A SET FILTER LOOKS SET. The rail is scanned, not read, and "Any" versus "77024" is the
   difference between a board showing the estate and a board showing one territory. */
.mc__pickbtn--on[b-002egkr883] {
    border-color: var(--rk-accent);
}

.mc__pickvalue[b-002egkr883] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--rk-font-mono);
    font-weight: var(--rk-fw-medium);
    font-size: var(--rk-fs-input);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink);
}

.mc__pickcue[b-002egkr883] {
    flex: 0 0 auto;
    font-size: var(--rk-fs-3xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.mc__pickhint[b-002egkr883] {
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
}

/* ── A FACET ──────────────────────────────────────────────────────────────────────────────
   🛑 IN THE CARD, EXPANDED, ONE CLICK. V1 buried its most powerful control four clicks and a
   modal deep, per layer; MAP-BOARD §3.5 says fix the burial and this is that fix. */

.mc__facet[b-002egkr883] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
}

.mc__fhead[b-002egkr883] {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-8);
}

.mc__flabel[b-002egkr883] {
    flex: 1 1 auto;
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.mc__flink[b-002egkr883] {
    border: 0;
    background: none;
    padding: 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
    text-decoration: underline;
    cursor: pointer;
}

.mc__flink:hover[b-002egkr883] {
    color: var(--rk-accent-ink);
}

.mc__flist[b-002egkr883] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 17rem;
    overflow-y: auto;
    border: var(--rk-border-hair) solid var(--rk-line);
    background: var(--rk-paper);
}

.mc__frow + .mc__frow[b-002egkr883] {
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

/* ::deep - the row's body is RkCheck's own markup. Without it these three rules match
   nothing, which is the failure this file's header warns about. */
.mc__frow[b-002egkr883]  .mc__fcheck {
    width: 100%;
    min-height: var(--rk-control-xs);
    padding: var(--rk-sp-3) var(--rk-sp-6);
}

.mc__frow[b-002egkr883]  .rk-check__text {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-6);
    width: 100%;
    min-width: 0;
}

.mc__swatch[b-002egkr883] {
    flex: 0 0 auto;
    width: var(--rk-sp-12);
    height: var(--rk-sp-12);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    display: inline-block;
}

.mc__fname[b-002egkr883] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--rk-fs-md);
    text-align: left;
}

/* THE COUNT IS THE UPGRADE V1 NEVER SHIPPED. It is what "complex filters out of real data"
   means in practice: you never have to already know that the column contains "P2". */
.mc__fcount[b-002egkr883] {
    flex: 0 0 auto;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--rk-steel);
}

.mc__fmore[b-002egkr883] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.mc__opline[b-002egkr883] {
    display: flex;
    gap: var(--rk-sp-6);
    align-items: flex-end;
}

.mc__opline[b-002egkr883]  .mc__op {
    flex: 0 1 10rem;
}

.mc__opline[b-002egkr883]  .mc__opval {
    flex: 1 1 auto;
    min-width: 0;
}

.mc__ltools[b-002egkr883] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    padding-top: var(--rk-sp-8);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

/* ── THE HONESTY LINE ─────────────────────────────────────────────────────────────────────
   🛑 This is chrome, not a footnote. It is the first thing on the workspace and it is a
   BUTTON, because "N of M are not on the map" is only honest if you can find out which ones. */

.mc__truth[b-002egkr883] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border: var(--rk-border-card) solid var(--rk-line-hard);
    border-left: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-card);
}

.mc__truthline[b-002egkr883] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
}

.mc__truthnum[b-002egkr883] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-6xl);
    font-weight: var(--rk-fw-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--rk-lh-flat);
    color: var(--rk-ink);
}

.mc__truthword[b-002egkr883] {
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink-soft);
}

.mc__truthbtn[b-002egkr883] {
    border: 0;
    background: none;
    padding: 0;
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-ink);
    text-decoration: underline;
    text-underline-offset: var(--rk-sp-3);
    cursor: pointer;
}

.mc__truthbtn:hover[b-002egkr883] {
    color: var(--rk-accent-deep);
}

.mc__truncated[b-002egkr883] {
    font-size: var(--rk-fs-md);
    color: var(--rk-warn-ink);
}

/* ── THE PLOT ─────────────────────────────────────────────────────────────────────────────
   ✅ THE BASEMAP LANDED, 2026-09-20. This block used to carry a hand-drawn web-Mercator SVG
   and a note saying there were no tiles. RkMap draws the same clusters on real ones now, so
   everything that styled circles and halos is gone and what is left is the frame around the
   map, the chip that rides on it, and the key underneath - none of which changed. */

.mc__plot[b-002egkr883] {
    border: var(--rk-border-card) solid var(--rk-line-hard);
    background: var(--rk-card);
    box-shadow: var(--rk-shadow-card);
    clip-path: polygon(0 0, calc(100% - var(--rk-corner)) 0, 100% var(--rk-corner), 100% 100%, 0 100%);
    padding: var(--rk-sp-12);
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
}

.mc__plothead[b-002egkr883] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-10);
}

.mc__plottitle[b-002egkr883] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-3xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-2xl);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.mc__plotnote[b-002egkr883] {
    flex: 1 1 24rem;
    font-size: var(--rk-fs-md);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
}

/* The map's own box is sized by --rk-map-h / --rk-map-min-h in rk-tokens.css, which is what
   the blank Height and MinHeight on <RkMap> hand back to. Nothing here may set a height, or
   the token pair stops being the one place a theme retunes it. */
.mc__map[b-002egkr883] {
    width: 100%;
}

/* ── THE COUNT CHIP, RIDING ON THE MAP ────────────────────────────────────────────────────
   ⚠️ It sits INSIDE RkMap's overlay slot, which is inset:0 and pointer-events:none, so this
   places itself and the control re-enables pointer events on its direct children. */
.mc__mapchip[b-002egkr883] {
    position: absolute;
    top: var(--rk-sp-8);
    left: var(--rk-sp-8);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-6);
    max-width: calc(100% - (2 * var(--rk-sp-8)));
    padding: var(--rk-sp-6) var(--rk-sp-8);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    background: var(--rk-card);
    box-shadow: var(--rk-shadow-card);
}

.mc__mapchipnum[b-002egkr883] {
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-bold);
    color: var(--rk-ink);
}

.mc__mapchipword[b-002egkr883] {
    font-size: var(--rk-fs-md);
    color: var(--rk-steel);
}

.mc__mapchipbtn[b-002egkr883] {
    appearance: none;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--rk-fs-md);

    /* ⚠️ --rk-accent-ink, never --rk-accent. The raw accent is 3.5:1 on a card in light and
       fails the 4.5:1 floor for small text; the gate in Riproka.Tests catches it. */
    color: var(--rk-accent-ink);
    text-decoration: underline;
    text-underline-offset: var(--rk-sp-3);
    cursor: pointer;
}

.mc__mapchipbtn:hover[b-002egkr883],
.mc__mapchipbtn:focus-visible[b-002egkr883] {
    color: var(--rk-accent-deep);
}

.mc__plotfoot[b-002egkr883] {
    margin: 0;
    font-size: var(--rk-fs-md);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/* ── THE KEY'S HEADER AND ITS FIND BOX ────────────────────────────────────────────────────
   ⭐ THE COVERAGE LINE. A tidy list of 24 rows reads as nearly complete; on Acme's sites-by-
   zone board those 24 rows explain 10,783 of 24,377 pins. "24 of 1,172 values · 10,783 of
   24,377 drawn records explained" is the same key with the reader's trust correctly set.

   🛑 THE FIND BOX IS A LOOKUP, NOT A SECOND FILTER - nothing it does changes what is drawn.
   It exists because the remainder row used to send people to the rail, and the rail cannot
   reach these values: its checklist is built from the rows that came back, and on the default
   Sites board that is 500 of 23,247 rows carrying 132 of 1,138 zones. It renders on the wall
   display too, where the rail is hidden outright. */
.mc__legendhead[b-002egkr883] {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-8);
    flex-wrap: wrap;
    margin-top: var(--rk-sp-8);
    padding-top: var(--rk-sp-8);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.mc__legendtitle[b-002egkr883] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.mc__legendcover[b-002egkr883] {
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.mc__legendfind[b-002egkr883] {
    margin-top: var(--rk-sp-6);
    max-width: 24rem;
}

.mc__legendnote[b-002egkr883] {
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
}

/* The search result is its own list so it cannot be mistaken for the drawn key - it carries
   a solid rule rather than the key's dashed one, and no top padding of its own. */
.mc__legend.mc__legend--found[b-002egkr883] {
    margin-top: var(--rk-sp-6);
    padding-top: var(--rk-sp-6);
    border-top: var(--rk-border-hair) solid var(--rk-line-hard);
    max-height: 11rem;
}

/* THE LEGEND IS PART OF THE PLOT, so the wall display keeps it. */
.mc__legend[b-002egkr883] {
    list-style: none;
    margin: 0;
    padding: var(--rk-sp-8) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6) var(--rk-sp-14);

    /* ⚠️ NO BORDER-TOP ANY MORE. .mc__legendhead above carries the dashed rule and renders
       whenever this list does, so keeping one here stacked two rules a few pixels apart. */

    /* The key is capped at MapLegend.Capacity rows and scrolls rather than pushing the plot off
       the screen - the same shape .mc__flist uses for the facet checklist above. */
    max-height: 9rem;
    overflow-y: auto;
}

/* 🛑 NOBODY SCROLLS A WALL DISPLAY. A kiosk hides the rail, so this key is the ONLY thing
   explaining the colours on it, and a row under the fold there is a row that does not exist -
   which is the same defect as the silent truncation this whole block was written to end, one
   layer up in the CSS. The cap still bounds it, so it cannot grow without limit. */
.mc--kiosk .mc__legend[b-002egkr883] {
    max-height: none;
    overflow-y: visible;
}

.mc__legenditem[b-002egkr883] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-6);
}

.mc__legendword[b-002egkr883] {
    font-size: var(--rk-fs-md);
    color: var(--rk-ink);
}

.mc__legendcount[b-002egkr883] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    font-variant-numeric: tabular-nums;
    color: var(--rk-steel);
}

/* 🛑 THE REMAINDER ROW. It takes the whole width on purpose - it is a sentence, not an entry,
   and a sentence wrapped into the swatch grid reads as one more value with a very long name.
   It carries NO swatch, because there is no single colour it could honestly show. */
.mc__legendmore[b-002egkr883] {
    flex: 0 0 100%;
    margin-top: var(--rk-sp-4);
    padding-top: var(--rk-sp-6);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.mc__legendmoreword[b-002egkr883] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

/* ── THE RESULTS ──────────────────────────────────────────────────────────────────────────
   The primary surface today, because most rows on most datasets cannot be drawn. */

.mc__results[b-002egkr883] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
}

.mc__rowlayer[b-002egkr883] {
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-steel);
    margin-left: var(--rk-sp-6);
}

.mc__rowlabel[b-002egkr883] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.mc__rowoff[b-002egkr883] {
    margin-left: var(--rk-sp-6);
    padding: 0 var(--rk-sp-4);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.mc__rowtools[b-002egkr883] {
    white-space: nowrap;
}

.mc__rowlink[b-002egkr883] {
    border: 0;
    background: none;
    padding: 0 var(--rk-sp-6) 0 0;
    font-size: var(--rk-fs-md);
    color: var(--rk-accent-ink);
    text-decoration: underline;
    cursor: pointer;
}

.mc__rowlink:hover[b-002egkr883] {
    color: var(--rk-accent-deep);
}

/* ── DIALOG CONTENT ─────────────────────────────────────────────────────────────────────── */

.mc__addlist[b-002egkr883] {
    list-style: none;
    margin: var(--rk-sp-12) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
}

.mc__addbtn[b-002egkr883] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    width: 100%;
    padding: var(--rk-sp-10);
    border: var(--rk-border) solid var(--rk-line-hard);
    background: var(--rk-card);
    text-align: left;
    cursor: pointer;
}

.mc__addbtn:hover[b-002egkr883] {
    border-color: var(--rk-accent);
    background: var(--rk-accent-soft);
}

.mc__addhead[b-002egkr883] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-8);
}

.mc__addname[b-002egkr883] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xl);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.mc__addwhy[b-002egkr883] {
    font-size: var(--rk-fs-md);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.mc__addcap[b-002egkr883] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

/* The sentence that names the owed schema change rather than the symptom. */
.mc__addnote[b-002egkr883] {
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-warn-ink);
}

.mc__offlist[b-002egkr883] {
    list-style: none;
    margin: var(--rk-sp-12) 0 0;
    padding: 0;
}

.mc__offrow[b-002egkr883] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-6) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.mc__offname[b-002egkr883] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.mc__offsub[b-002egkr883] {
    flex: 1 1 16rem;
    min-width: 0;
    font-size: var(--rk-fs-md);
    color: var(--rk-ink-soft);
}

.mc__offlayer[b-002egkr883] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-steel);
}
/* /Pages/MyScorecard.razor.rz.scp.css */
/*
    MY SCORECARD.

    🛑 EVERY COLOUR, SIZE, SPACE AND RULE IS A TOKEN FROM rk-tokens.css. CSS silently DROPS a
    declaration that reads an undeclared custom property, so an invented token renders as "no
    value set" and looks almost right - one stylesheet invented eleven of them and compiled
    clean. The real vocabulary is --rk-sp-N, --rk-fs-*, --rk-line, --rk-border-card,
    --rk-steel, --rk-rail.

    ⚠️ AND NEVER PAIR background: var(--rk-ink) WITH color: var(--rk-white). The dark theme
    resolves both to the same value and the text disappears. Permanent dark chrome uses
    --rk-chrome-bg / --rk-chrome-ink, which do not flip. This shipped invisible once.
*/

.sc-wrap[b-0nr3gx9wdk] {
    max-width: var(--rk-measure);
}

/* ---------- the headline ---------- */

.sc-head[b-0nr3gx9wdk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rk-sp-16);
    padding-bottom: var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.sc-head-main[b-0nr3gx9wdk] {
    min-width: 0;
}

.sc-card-name[b-0nr3gx9wdk] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    line-height: var(--rk-lh-tight);
    color: var(--rk-ink);
}

.sc-card-desc[b-0nr3gx9wdk] {
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
}

.sc-composite[b-0nr3gx9wdk] {
    flex: 0 0 auto;
    text-align: right;
}

.sc-score[b-0nr3gx9wdk] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-4xl);
    line-height: var(--rk-lh-flat);
    color: var(--rk-ink);
}

/* Nothing judged is an em dash in secondary ink, NEVER a zero in the score colour - they are
   different claims and the framework turns on the difference. */
.sc-score-none[b-0nr3gx9wdk] {
    color: var(--rk-steel);
}

.sc-score-label[b-0nr3gx9wdk] {
    margin-top: var(--rk-sp-2);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-steel);
}

/* ---------- coverage: beside the number, never behind a click ---------- */

.sc-coverage[b-0nr3gx9wdk] {
    margin: var(--rk-sp-10) 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.sc-coverage-note[b-0nr3gx9wdk] {
    color: var(--rk-steel);
}

.sc-bands[b-0nr3gx9wdk] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
    margin-top: var(--rk-sp-8);
}

.sc-band[b-0nr3gx9wdk] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    padding: var(--rk-sp-2) var(--rk-sp-6);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-xs);
    color: var(--rk-steel);
}

.sc-band-in[b-0nr3gx9wdk] {
    color: var(--rk-ok-ink);
    background: var(--rk-ok-soft);
}

.sc-band-cheer[b-0nr3gx9wdk] {
    color: var(--rk-ok-ink);
    background: var(--rk-ok-soft);
    border-color: var(--rk-ok-ink);
    font-weight: var(--rk-fw-bold);
}

/* ⚠️ "under" AND "over" SHARE ONE TREATMENT AND NEITHER IS RED. Missing a band is
   information, not an alarm - and on a centered metric overshooting is exactly as much of a
   signal as undershooting. Colouring one of them danger would make the screen argue with the
   framework it is displaying. */
.sc-band-under[b-0nr3gx9wdk],
.sc-band-over[b-0nr3gx9wdk] {
    color: var(--rk-ink);
    background: var(--rk-hover-ghost);
}

/* ---------- the lines ---------- */

.sc-lines[b-0nr3gx9wdk] {
    list-style: none;
    margin: var(--rk-sp-16) 0 0;
    padding: 0;
}

.sc-line[b-0nr3gx9wdk] {
    padding: var(--rk-sp-10) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.sc-line:last-child[b-0nr3gx9wdk] {
    border-bottom: 0;
}

/* An unmeasured line is QUIETER, not hidden and not struck through. A person has to be able
   to see what was not measured, and striking it would read as a failure. */
.sc-line-quiet .sc-metric[b-0nr3gx9wdk],
.sc-line-quiet .sc-weight[b-0nr3gx9wdk] {
    color: var(--rk-steel);
}

.sc-line-head[b-0nr3gx9wdk] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rk-sp-8);
}

.sc-metric[b-0nr3gx9wdk] {
    font-size: var(--rk-fs-base);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

/* THE WEIGHT IS ALWAYS VISIBLE - section 4e.7. Mono, so a column of them lines up and can be
   compared at a glance. */
.sc-weight[b-0nr3gx9wdk] {
    flex: 0 0 auto;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.sc-line-nums[b-0nr3gx9wdk] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-6);
    margin-top: var(--rk-sp-4);
}

.sc-actual[b-0nr3gx9wdk] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink);
}

.sc-target[b-0nr3gx9wdk],
.sc-unmeasured[b-0nr3gx9wdk] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

.sc-verdict[b-0nr3gx9wdk] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    padding: var(--rk-sp-1) var(--rk-sp-4);
    border-radius: var(--rk-radius-xs);
    color: var(--rk-steel);
    background: var(--rk-hover-ghost);
}

.sc-verdict-1[b-0nr3gx9wdk] {
    color: var(--rk-ok-ink);
    background: var(--rk-ok-soft);
}

/* 5 BEYOND is met - the same treatment as 1 unless it is new work, which is celebrated below. */
.sc-verdict-5[b-0nr3gx9wdk] {
    color: var(--rk-ok-ink);
    background: var(--rk-ok-soft);
}

/* NEW WORK PAST THE BASELINE (Kirk, 2026-09-27 late - "Sales is ... one place were going ABOVE
   BASELINE will be celebrated"). A heavier ok stamp, never a trophy and never red. */
.sc-verdict-cheer[b-0nr3gx9wdk] {
    font-weight: var(--rk-fw-bold);
    border: var(--rk-border-hair) solid var(--rk-ok-ink);
}

/* THE CARD'S OWN TARGET (2026-09-28). A small mono tag beside the target it names - the same
   treatment as the current period chip, accent-ink on text and never raw accent - and a plain
   secondary line under the numbers that says what the baseline said. Context, not a warning. */
.sc-cardtarget[b-0nr3gx9wdk] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    padding: var(--rk-sp-1) var(--rk-sp-4);
    border-radius: var(--rk-radius-xs);
    color: var(--rk-accent-ink);
    background: var(--rk-accent-soft);
}

.sc-cardnote[b-0nr3gx9wdk] {
    margin: var(--rk-sp-4) 0 0;
    padding-left: var(--rk-sp-8);
    border-left: var(--rk-rail) solid var(--rk-line-hard);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
    max-width: var(--rk-measure);
}

.sc-live-card[b-0nr3gx9wdk] {
    margin-top: var(--rk-sp-2);
}

.sc-metric-desc[b-0nr3gx9wdk] {
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
    max-width: var(--rk-measure);
}

/* ---------- period picker ---------- */

.sc-periods[b-0nr3gx9wdk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-4);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.sc-periods-label[b-0nr3gx9wdk] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-steel);
    margin-right: var(--rk-sp-2);
}

.sc-period[b-0nr3gx9wdk] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    padding: var(--rk-sp-2) var(--rk-sp-6);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-xs);
    background: transparent;
    color: var(--rk-steel);
    cursor: pointer;
    min-height: var(--rk-tap);
}

.sc-period:hover[b-0nr3gx9wdk] {
    background: var(--rk-hover-ghost);
    color: var(--rk-ink);
}

.sc-period.is-current[b-0nr3gx9wdk] {
    color: var(--rk-accent-ink);
    background: var(--rk-accent-soft);
    border-color: var(--rk-accent);
}

.sc-foot[b-0nr3gx9wdk] {
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) solid var(--rk-line);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
    max-width: var(--rk-measure);
}

/* ---------- phone ---------- */

@media (max-width: 640px) {
    .sc-head[b-0nr3gx9wdk] {
        flex-direction: column;
        gap: var(--rk-sp-8);
    }

    .sc-composite[b-0nr3gx9wdk] {
        text-align: left;
    }

    .sc-score[b-0nr3gx9wdk] {
        font-size: var(--rk-fs-3xl);
    }
}

/* The card changed after the score was worked out. Secondary ink and a left rail - it is
   context, not a warning: the number is correct and the explanation is a courtesy. */
.sc-stale[b-0nr3gx9wdk] {
    margin: var(--rk-sp-8) 0 0;
    padding-left: var(--rk-sp-8);
    border-left: var(--rk-rail) solid var(--rk-line-hard);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
    max-width: var(--rk-measure);
}

/* ---------- right now: the period in progress (2026-09-27) ----------
   The same door the handset's My Numbers reads - get_my_baseline_position - so the two can
   never disagree about this week. Set apart by a rail and a rule rather than a panel colour:
   it is a different claim (live, stored nowhere) from the stamped card below, not a louder
   one. Tokens only, each already used in this file or checked present in rk-tokens.css. */

.sc-live[b-0nr3gx9wdk] {
    margin-bottom: var(--rk-sp-16);
    padding: var(--rk-sp-10) 0 var(--rk-sp-10) var(--rk-sp-12);
    border-left: var(--rk-rail) solid var(--rk-line-hard);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.sc-live-head[b-0nr3gx9wdk] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-8);
}

.sc-live-title[b-0nr3gx9wdk] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-tight);
    color: var(--rk-ink);
}

.sc-live-note[b-0nr3gx9wdk],
.sc-live-problem[b-0nr3gx9wdk] {
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-steel);
    max-width: var(--rk-measure);
}

.sc-live-lines[b-0nr3gx9wdk] {
    list-style: none;
    margin: var(--rk-sp-8) 0 0;
    padding: 0;
}

.sc-live-line[b-0nr3gx9wdk] {
    padding: var(--rk-sp-8) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.sc-live-line:last-child[b-0nr3gx9wdk] {
    border-bottom: 0;
}

/* The honest-reporting line - an aside, never a trophy. accent-ink on text, never raw accent. */
/* THE CELEBRATION - the honest line's shape in ok green: warm, said once, about the work. */
/* A SECOND CARD starts a new block - a rule and room above, so its lines never read as the first's. */
.sc-head--next[b-0nr3gx9wdk] {
    margin-top: var(--rk-sp-24);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-card) solid var(--rk-line-hard);
}

.sc-live-cheer[b-0nr3gx9wdk] {
    margin: var(--rk-sp-4) 0 0;
    padding-left: var(--rk-sp-8);
    border-left: var(--rk-border-card) solid var(--rk-ok-ink);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ok-ink);
}

.sc-live-honest[b-0nr3gx9wdk] {
    margin: var(--rk-sp-4) 0 0;
    padding-left: var(--rk-sp-8);
    border-left: var(--rk-rail) solid var(--rk-line-hard);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-accent-ink);
    max-width: var(--rk-measure);
}
/* /Pages/Occurrences.razor.rz.scp.css */
/* ==========================================================================================
   WHAT WE OWE - the obligation book, and the screen somebody triages a heat wave on.

   EVERY VALUE HERE IS A TOKEN FROM rk-tokens.css. No raw colour, size, radius or shadow -
   CLAUDE.md's Conventions, and the reason the control kit exists at all.

   ⚠️ SMALL TEXT WEARS --rk-accent-ink, NEVER --rk-accent. The raw accent measures 3.5:1 on a
   card in light and fails the 4.5:1 floor for body text - and it passes in dark, which is
   what makes it invisible to anyone developing there. There is a build gate for it.

   ⚠️ AND NOTHING PAIRS --rk-ink WITH --rk-white. Both resolve to #e9e4d8 in the dark theme,
   giving a 1:1 ratio and invisible text. No permanent dark chrome appears on this page, so
   the pair never comes up.

   THE LOCAL CUSTOM PROPERTIES ARE NAMED --occ-*, NOT --rk-*, DELIBERATELY. The token gate
   asserts that every var(--rk-…) a stylesheet reads actually exists in rk-tokens.css, and
   these two are per-row geometry computed in C# from three dates. They are data, not tokens,
   and naming them --rk- would either break that gate or teach somebody to weaken it.

   ONE APP, DESKTOP AND PHONE. The bar and the bulk strip wrap; the room cell keeps its
   drawing at every width because the drawing IS the information.
   ========================================================================================== */

/* --------------------------------------------------------------------------------- THE BAR */

.bar[b-i21yfqvluu] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-16);
    margin: var(--rk-sp-14) 0;
    padding: var(--rk-sp-12);
    background: var(--rk-card);
    border: var(--rk-border-hair) solid var(--rk-line);
}

.bar__group[b-i21yfqvluu] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
}

.bar__date[b-i21yfqvluu] {
    width: 15ch;
}

.bar__size[b-i21yfqvluu] {
    width: 11ch;
}

.bar__pick[b-i21yfqvluu] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
}

.bar__picklab[b-i21yfqvluu] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/*
   ⚠️ NO RULE HERE REACHES INSIDE RkButton, AND THAT IS NOT AN OVERSIGHT. Scoped CSS stamps
   this page's attribute onto the elements declared in Occurrences.razor and onto nothing a
   child component renders, so a selector aimed at a button's own markup silently matches
   nothing. The layout is done with the wrapper instead, which this page does own.
*/
.showing[b-i21yfqvluu] {
    margin: var(--rk-sp-12) 0 var(--rk-sp-6) 0;
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/* ------------------------------------------------------------------------- THE BULK STRIP */

/*
   IT ONLY EXISTS WHEN SOMETHING IS TICKED, and it is deliberately loud - an action that can
   move sixty promises a customer was given should not look like part of the furniture.
*/
.bulk[b-i21yfqvluu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
    margin: var(--rk-sp-12) 0;
    padding: var(--rk-sp-10) var(--rk-sp-12);
    background: var(--rk-accent-soft);
    border-left: var(--rk-rail) solid var(--rk-accent);
}

.bulk__count[b-i21yfqvluu] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-5xl);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-flat);
    color: var(--rk-accent-ink);
}

.bulk__word[b-i21yfqvluu] {
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink-soft);
}

.bulk__acts[b-i21yfqvluu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    margin-left: auto;
}

/* ------------------------------------------------------------------------------ THE CELLS */

.cell__title[b-i21yfqvluu] {
    display: block;
    font-size: var(--rk-fs-xl);
    line-height: var(--rk-lh-snug);
}

.cell__tag[b-i21yfqvluu] {
    display: block;
    margin-top: var(--rk-sp-2);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-steel);
}

.cell--when[b-i21yfqvluu] {
    vertical-align: top;
}

.when__date[b-i21yfqvluu] {
    display: block;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xl);
    line-height: var(--rk-lh-tight);
    letter-spacing: var(--rk-track-2xl);
}

/*
   HOW FAR IT HAS ALREADY WALKED FROM WHAT WE SOLD. Quiet on purpose - it is context for the
   target above it, not a second headline.
*/
.when__drift[b-i21yfqvluu] {
    display: block;
    margin-top: var(--rk-sp-2);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    color: var(--rk-steel);
}

.cell--state[b-i21yfqvluu] {
    vertical-align: top;
}

.state__job[b-i21yfqvluu] {
    display: inline-block;
    margin-left: var(--rk-sp-4);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.state__word[b-i21yfqvluu] {
    display: block;
    margin-top: var(--rk-sp-3);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-steel);
}

/* ======================================================================== 🛑 THE ROOM CELL

   THE WHOLE REASON DECISION 22 PUT THREE DATES ON THE ROW INSTEAD OF ONE.

   The bar is the window: its left edge is the earliest date that still counts as performance
   and its right edge is the contractual due-by. The NOTCH is the target - what was sold. The
   MARK is the site's OWN today, which is why it is a value computed per row on the server and
   not a line drawn at a fixed place.

   Read together they answer the only question a dispatcher triaging a heat wave is asking:
   how much room does this one have left? A wide gap to the right of the mark is a visit that
   can wait. A mark at the right-hand edge is a promise about to break, and it looks like one
   from across the room - which a date printed in a cell never does.
   ========================================================================================== */

.room[b-i21yfqvluu] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: var(--rk-sp-2) var(--rk-sp-10);
}

.room__slack[b-i21yfqvluu] {
    grid-row: 1 / span 2;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-6xl);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-flat);
    letter-spacing: var(--rk-track-4xl);
}

.room__slack--easy[b-i21yfqvluu] {
    color: var(--rk-ok-ink);
}

.room__slack--tight[b-i21yfqvluu] {
    color: var(--rk-warn-ink);
}

.room__slack--late[b-i21yfqvluu] {
    color: var(--rk-danger-ink);
}

.room__slack--unknown[b-i21yfqvluu] {
    color: var(--rk-disabled-text);
}

/*
   THE TRACK IS POSITIONED FROM TWO CUSTOM PROPERTIES THE PAGE COMPUTES PER ROW. A default is
   declared for each, so a row whose site date did not come back still draws a sane window
   instead of collapsing the notch onto the left edge.
*/
.room__track[b-i21yfqvluu] {
    --occ-target: 50%;
    --occ-today: -1%;

    position: relative;
    display: block;
    height: var(--rk-sp-10);
    align-self: center;
}

.room__span[b-i21yfqvluu] {
    position: absolute;
    /* centerd on the track, so the hairline runs through the middle of the today ring
       rather than a pixel above it - which reads as a misalignment at this size. */
    inset: calc((var(--rk-sp-10) - var(--rk-border)) / 2) 0 auto 0;
    height: var(--rk-border);
    background: var(--rk-line-hard);
}

/* The target - what was sold. A full-height notch, so it reads as a position and not a dot. */
.room__target[b-i21yfqvluu] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--occ-target);
    width: var(--rk-border);
    margin-left: calc(var(--rk-border) / -2);
    background: var(--rk-ink);
}

/*
   TODAY AT THIS SITE - not the reader's today. A hollow ring so it can sit on top of the
   notch without either of them disappearing, which happens more often than you would think:
   an obligation due today is exactly the interesting case.
*/
.room__today[b-i21yfqvluu] {
    position: absolute;
    top: 0;
    left: var(--occ-today);
    width: var(--rk-sp-10);
    height: var(--rk-sp-10);
    margin-left: calc(var(--rk-sp-10) / -2);
    border: var(--rk-border) solid var(--rk-accent);
    border-radius: var(--rk-radius-circle);
    background: var(--rk-card);
}

.room__word[b-i21yfqvluu] {
    grid-column: 2;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/* --------------------------------------------------------------------------------- PAGING */

.pager[b-i21yfqvluu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
    margin: var(--rk-sp-12) 0 var(--rk-sp-28) 0;
}

.pager__word[b-i21yfqvluu] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

/* ----------------------------------------------------------------------------- THE DIALOGS */

.push[b-i21yfqvluu],
.board[b-i21yfqvluu] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-14);
}

.push__num[b-i21yfqvluu] {
    max-width: 18ch;
}

.push__acts[b-i21yfqvluu] {
    display: flex;
    gap: var(--rk-sp-10);
}

.board__lead[b-i21yfqvluu] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-4xl);
    line-height: var(--rk-lh-tight);
    letter-spacing: var(--rk-track-3xl);
}

/* Who and when - a card needs both (lane AC, 2026-10-07). */
.board__form[b-i21yfqvluu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--rk-sp-10);
}

/* Every obligation that did not reach the board, named rather than counted. */
.board__miss[b-i21yfqvluu] {
    margin: 0;
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-accent-ink);
}

/*
   THE VERDICT - what the push would cost, BEFORE it happens. Decision 22 is explicit that the
   warning arrives first, and that a breach is recorded, so this block names the rows rather
   than counting them: "three of these forty-two will breach" is a summary, and the summary is
   useless without the three.
*/
.verdict[b-i21yfqvluu] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.verdict__lead[b-i21yfqvluu] {
    margin: 0;
    font-size: var(--rk-fs-xl);
    line-height: var(--rk-lh-snug);
}

.verdict__list[b-i21yfqvluu] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
    max-height: var(--rk-lane-h);
    overflow-y: auto;
}

.verdict__row[b-i21yfqvluu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4) var(--rk-sp-10);
    padding: var(--rk-sp-6) var(--rk-sp-8);
    background: var(--rk-zebra);
}

.verdict__dates[b-i21yfqvluu] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    white-space: nowrap;
}

.verdict__why[b-i21yfqvluu] {
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.verdict__more[b-i21yfqvluu] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-steel);
}

/* ---------------------------------------------------------------------------- NARROW WIDTHS */

@media (max-width: 40rem) {

    .bar__group[b-i21yfqvluu] {
        width: 100%;
    }

    .bulk__acts[b-i21yfqvluu] {
        margin-left: 0;
        width: 100%;
    }

    /*
       THE ROOM CELL KEEPS ITS DRAWING ON A PHONE. The figure moves above the track rather
       than beside it, because shrinking the track to fit a column of digits is exactly the
       compromise that turns the information back into a date.
    */
    .room[b-i21yfqvluu] {
        grid-template-columns: minmax(0, 1fr);
    }

    .room__slack[b-i21yfqvluu] {
        grid-row: auto;
        font-size: var(--rk-fs-5xl);
    }

    .room__word[b-i21yfqvluu] {
        grid-column: 1;
    }
}
/* /Pages/OnCall.razor.rz.scp.css */
/* ==========================================================================================
   ON CALL - who is carrying the phone.

   EVERY VALUE HERE IS A TOKEN FROM rk-tokens.css. No raw colour, size, radius or shadow -
   CLAUDE.md's Conventions, and the reason the control kit exists at all.

   ⚠️ AND NOTHING PAIRS --rk-ink WITH --rk-white. The dark theme resolves both to #e9e4d8,
   giving a 1:1 contrast ratio and invisible text. That shipped once. Permanent dark chrome
   uses --rk-chrome-bg / --rk-chrome-ink, which do not flip - and there is no permanent dark
   chrome on this page, so the pair never appears.

   ONE APP, DESKTOP AND PHONE. The same markup at every width: the facts grid and the form
   pairs collapse to one column below 640px, and nothing is hidden at either end.
   ========================================================================================== */

.oncall[b-5csdlahbf5] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-5);
}

/* ------------------------------------------------------------------------------ RIGHT NOW */

/*
   A grid rather than a stack, because two teams can be live at once - a two-department shop
   runs two phones, which is the exact case app.OnCallScheduleSearch grew its department
   filter for.
*/
.now[b-5csdlahbf5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--rk-sp-4);
}

.now__code[b-5csdlahbf5] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
}

.now__name[b-5csdlahbf5] {
    margin: 0 0 var(--rk-sp-4) 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xl);
    line-height: var(--rk-lh-tight);
    letter-spacing: var(--rk-track-2xl);
}

.now__facts[b-5csdlahbf5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rk-sp-3) var(--rk-sp-5);
    margin: 0;
}

.now__fact--wide[b-5csdlahbf5] {
    grid-column: 1 / -1;
}

.now__fact dt[b-5csdlahbf5] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.now__fact dd[b-5csdlahbf5] {
    margin: var(--rk-sp-1) 0 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
}

/*
   A LINK THAT LOOKS LIKE A LINK AND IS A BUTTON. Navigation is done through
   NavigationManager so the router keeps the session, and an <a href> here would be a second
   way of doing what the rest of the app does one way.
*/
.now__person[b-5csdlahbf5] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--rk-accent-deep);
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.now__person:hover[b-5csdlahbf5] {
    background: var(--rk-hover-ghost);
}

/* ----------------------------------------------------------------------------- THE PANELS */

.oncall__panel[b-5csdlahbf5] {
    display: block;
}

.bar[b-5csdlahbf5] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-2);
    margin-bottom: var(--rk-sp-4);
}

.form[b-5csdlahbf5] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    padding: var(--rk-sp-4);
    margin-bottom: var(--rk-sp-5);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-card-veil);
}

.form__pair[b-5csdlahbf5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rk-sp-4);
}

/* ------------------------------------------------------------------------------- THE ROTA */

.rota[b-5csdlahbf5] {
    display: flex;
    flex-direction: column;
}

/*
   READ-ONLY ROWS, NOT RkRow. RkRow is a whole row that IS a button - its own header says so -
   and a rota line is not pressable as a whole; its two actions are their own buttons.
   Rendering it as RkRow would announce a click target that does nothing. The shape is
   borrowed, the semantics are not. Truck.razor's history list left the same note.
*/
.rota__item[b-5csdlahbf5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-3);
    padding: var(--rk-sp-3) var(--rk-sp-2);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.rota__item:last-child[b-5csdlahbf5] {
    border-bottom: 0;
}

.rota__item--now[b-5csdlahbf5] {
    background: var(--rk-ok-soft);
}

.rota__when[b-5csdlahbf5] {
    flex: 0 0 auto;
    min-width: 14rem;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-2xs);
}

.rota__body[b-5csdlahbf5] {
    display: flex;
    flex: 1 1 12rem;
    flex-direction: column;
    gap: var(--rk-sp-1);
    min-width: 0;
}

.rota__title[b-5csdlahbf5] {
    font-weight: var(--rk-fw-semibold);
    font-size: var(--rk-fs-sm);
}

.rota__meta[b-5csdlahbf5] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.rota__acts[b-5csdlahbf5] {
    display: flex;
    flex: 0 0 auto;
    gap: var(--rk-sp-2);
}

/* ------------------------------------------------------------------------------ THE TEAMS */

.teams[b-5csdlahbf5] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
}

/*
   The roster hangs UNDER the team row it belongs to, indented by the rail width so the
   relationship is visible without a second heading.
*/
.roster[b-5csdlahbf5] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    padding: var(--rk-sp-4);
    margin: 0 0 var(--rk-sp-3) var(--rk-sp-5);
    border-left: var(--rk-border-hair) solid var(--rk-line);
    background: var(--rk-card-veil);
}

.roster__list[b-5csdlahbf5] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.roster__item[b-5csdlahbf5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-3);
    padding: var(--rk-sp-2) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.roster__item:last-child[b-5csdlahbf5] {
    border-bottom: 0;
}

.roster__who[b-5csdlahbf5] {
    display: flex;
    flex: 1 1 12rem;
    align-items: baseline;
    gap: var(--rk-sp-3);
    min-height: var(--rk-tap);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.roster__who:hover[b-5csdlahbf5] {
    background: var(--rk-hover-ghost);
}

.roster__num[b-5csdlahbf5] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.roster__name[b-5csdlahbf5] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-accent-deep);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/*
    THE ACTIONS UNDER A ROSTER. It carries .bar as well, which supplies the flex row and the
    gap - this rule only adds the hairline that separates the actions from the people above
    them.

    ⚠️ .find, .find__box, .find__go, .found and .found__count are GONE, with the hand-rolled
    picker they dressed. The count line in particular now lives once, in RkPickSheet, instead
    of once per screen that happens to remember it - which is the whole reason the control
    grew a Total parameter rather than each caller growing a paragraph.
*/
.roster__add[b-5csdlahbf5] {
    padding-top: var(--rk-sp-3);

    /*
        ⚠️ --rk-border-hair IS A WIDTH (1px), NOT A SHORTHAND. This rule read
        "border-top: var(--rk-border-hair)" and so resolved to "border-top: 1px" with no style,
        which draws NOTHING - the separator has been silently absent. The house idiom, used by
        a dozen other page stylesheets, is width + style + colour.
    */
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

/* ------------------------------------------------------------------------------ THE PHONE */

@media (max-width: 640px) {

    .now__facts[b-5csdlahbf5],
    .form__pair[b-5csdlahbf5] {
        grid-template-columns: minmax(0, 1fr);
    }

    .rota__when[b-5csdlahbf5] {
        min-width: 100%;
    }

    .roster[b-5csdlahbf5] {
        margin-left: var(--rk-sp-2);
    }
}
/* /Pages/PartCenter.razor.rz.scp.css */
/*
    ONE PART - five sets from one call, drawn as a work column and a glance column.

    Layout only, tokens only, no literal colour, radius, size or shadow.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here matches nothing.

    🛑 NEVER background: var(--rk-ink) WITH color: var(--rk-white) - the dark theme resolves both
    to the same value and the text disappears.
*/

.centre[b-zlchauf7zw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-12);
    align-items: start;
}

@media (min-width: 1040px) {
    .centre[b-zlchauf7zw] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
        gap: var(--rk-sp-16);
    }

    .centre__glance[b-zlchauf7zw] {
        position: sticky;
        top: var(--rk-sp-12);
    }
}

.centre__work[b-zlchauf7zw] {
    min-width: 0;
}

/* ------------------------------------------------------------------------------ CRUMBS */
.crumb[b-zlchauf7zw] {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rk-ink-soft);
    font: inherit;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    cursor: pointer;
}

.crumb:hover[b-zlchauf7zw] {
    color: var(--rk-accent-ink);
}

.crumb--here[b-zlchauf7zw] {
    color: var(--rk-ink);
    cursor: default;
}

.crumb__sep[b-zlchauf7zw] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-2xs);
}

/* WHOSE AN ACT IS - drawn where the act would be, for a session that does not hold its role.
   Quiet secondary text, not a warning: nothing has gone wrong, the page is saying who does this. */
.head__word[b-zlchauf7zw] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-md);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/* In a panel's head it stands where the button stood, so it keeps the lead's space above the table. */
.panel__head .head__word[b-zlchauf7zw] {
    margin-bottom: var(--rk-sp-10);
}

/* ------------------------------------------------------------------------------ PANELS */
.panel[b-zlchauf7zw] {
    padding-top: var(--rk-sp-12);
    min-width: 0;
}

.panel__head[b-zlchauf7zw] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rk-sp-10);
}

.panel__lead[b-zlchauf7zw] {
    margin: 0 0 var(--rk-sp-10);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/*
    🛑 THE COMPUTED HALF OF A VENDOR ROW, DRAWN QUIET.

    dbo.VendorPart is what a buyer DECIDED; dbo.VendorPartState is what the receiving proc
    COMPUTED. A user who cannot tell a decision from a derivation argues with the wrong number,
    so the derived columns read as reference rather than as entry.
*/
.derived[b-zlchauf7zw] {
    color: var(--rk-ink-soft);
    font-style: italic;
}

.openended[b-zlchauf7zw] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-2xs);
    font-style: italic;
}

.cell__title[b-zlchauf7zw] {
    display: block;
    overflow-wrap: anywhere;
}

.cell__tag[b-zlchauf7zw] {
    display: block;
    font-size: var(--rk-fs-3xs);
    color: var(--rk-ink-soft);
    letter-spacing: var(--rk-track-2xs);
}

.cell--why[b-zlchauf7zw] {
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

/*
    THE SAME TABLE-CELL RULE AS /parts. display:flex on a `td` takes it out of table layout and
    the row stops growing around it, so two small buttons spill onto the row beneath. The flex
    goes on an inner span; the cell stays a cell.
*/
.cell--acts[b-zlchauf7zw] {
    vertical-align: top;
}

.acts[b-zlchauf7zw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-3);
}

/* 🛑 A PART THAT CANNOT BE PRICED IS LOUD, HERE AND IN THE GRID. */
.noprice[b-zlchauf7zw] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-danger-ink);
}

/* ------------------------------------------------------------------------ MAKE PANELS */
.make[b-zlchauf7zw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-6) var(--rk-sp-10);
    padding: var(--rk-sp-10);
    margin-bottom: var(--rk-sp-12);
    border: var(--rk-border-hair) dashed var(--rk-line);
    border-radius: var(--rk-radius-xs);
}

@media (min-width: 720px) {
    .make[b-zlchauf7zw] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .make[b-zlchauf7zw]  .make--span {
        grid-column: 1 / -1;
    }
}

/* A button in a make panel is a button, not a grid cell: it keeps its own width at the start
   of its row instead of stretching to a third of the panel. */
.make[b-zlchauf7zw]  .rk-btn {
    justify-self: start;
    align-self: end;
}

/* -------------------------------------------------------------------------- AT A GLANCE */
.facts[b-zlchauf7zw] {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: var(--rk-sp-3) var(--rk-sp-10);
    margin: 0;
}

.facts dt[b-zlchauf7zw] {
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.facts dd[b-zlchauf7zw] {
    margin: 0;
    font-size: var(--rk-fs-xs);
    overflow-wrap: anywhere;
}

.facts__big[b-zlchauf7zw] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
}

.facts__aside[b-zlchauf7zw] {
    margin-left: var(--rk-sp-4);
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-3xs);
}

.facts__warn[b-zlchauf7zw] {
    color: var(--rk-danger-ink);
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-snug);
}

/* ------------------------------------------------------------------------------- MODAL */
.warn[b-zlchauf7zw] {
    margin: 0 0 var(--rk-sp-8);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
}
/* /Pages/Parts.razor.rz.scp.css */
/*
    THE PARTS CATALOG - the /maps filter machine pointed at a catalog.

    Layout only, tokens only, no literal colour, radius, size or shadow.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.

    🛑 NEVER background: var(--rk-ink) WITH color: var(--rk-white). The dark theme resolves both
    to the same value and the text disappears. Permanent dark chrome is --rk-chrome-bg/-ink.
*/

/* ---------------------------------------------------------------------------------------
   THE MACHINE - rail plus face. One column on a phone, two from a desk width, and the rail
   sticks because "filter it down down down" means going back to it constantly.
   --------------------------------------------------------------------------------------- */
.machine[b-2gqyvp8bpm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-12);
    align-items: start;
}

@media (min-width: 980px) {
    .machine[b-2gqyvp8bpm] {
        grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
        gap: var(--rk-sp-16);
    }

    .rail[b-2gqyvp8bpm] {
        position: sticky;
        top: var(--rk-sp-12);
    }
}

.face[b-2gqyvp8bpm] {
    min-width: 0;
}

/* ---------------------------------------------------------------------------------------
   THE CATEGORY RAIL
   --------------------------------------------------------------------------------------- */
.rail[b-2gqyvp8bpm] {
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-card);
    padding: var(--rk-sp-10);
    min-width: 0;
}

.rail__head[b-2gqyvp8bpm] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rk-sp-8);
    margin-bottom: var(--rk-sp-6);
}

.rail__title[b-2gqyvp8bpm] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

/* THE SENTENCE THAT STOPS THE CATALOG READING AS BROKEN. It is permanent, not a tooltip. */
.rail__rule[b-2gqyvp8bpm] {
    margin: 0 0 var(--rk-sp-10);
    padding: var(--rk-sp-6) var(--rk-sp-8);
    border-left: var(--rk-rail) solid var(--rk-accent);
    background: var(--rk-accent-soft);
    color: var(--rk-ink);
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-prose);
}

.rail__make[b-2gqyvp8bpm] {
    display: grid;
    gap: var(--rk-sp-6);
    padding: var(--rk-sp-8);
    margin-bottom: var(--rk-sp-10);
    border: var(--rk-border-hair) dashed var(--rk-line);
    border-radius: var(--rk-radius-xs);
}

.tree[b-2gqyvp8bpm] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 26rem;
    overflow-y: auto;
}

.tree__row[b-2gqyvp8bpm] {
    margin: 0;
}

.tree__hit[b-2gqyvp8bpm] {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-6);
    width: 100%;
    padding: var(--rk-sp-4) var(--rk-sp-6);
    border: 0;
    border-radius: var(--rk-radius-xs);
    background: transparent;
    color: var(--rk-ink);
    font: inherit;
    font-size: var(--rk-fs-xs);
    text-align: left;
    cursor: pointer;
}

.tree__hit:hover[b-2gqyvp8bpm] {
    background: var(--rk-hover-ghost);
}

.tree__hit--on[b-2gqyvp8bpm] {
    background: var(--rk-accent-soft);
    color: var(--rk-accent-ink);
    font-weight: var(--rk-fw-semibold);
}

.tree__hit--clear[b-2gqyvp8bpm] {
    color: var(--rk-ink-soft);
    font-style: italic;
}

.tree__code[b-2gqyvp8bpm] {
    flex: 0 0 auto;
    min-width: 5ch;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-3xs);
    color: var(--rk-ink-soft);
}

.tree__name[b-2gqyvp8bpm] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.tree__count[b-2gqyvp8bpm] {
    flex: 0 0 auto;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-3xs);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE FACETS
   --------------------------------------------------------------------------------------- */
.bar[b-2gqyvp8bpm] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    padding: 0 0 var(--rk-sp-10);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-2gqyvp8bpm] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8);
    min-width: 0;
}

.bar__group--chips[b-2gqyvp8bpm] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--rk-sp-5);
}

/* The sentence that stops a kind chip's catalog-wide count reading as a match count.
   Same weight and voice as .rail__rule, which does the same job for the category tree. */
.bar__rule[b-2gqyvp8bpm] {
    margin: 0;
    padding: var(--rk-sp-5) var(--rk-sp-8);
    border-left: var(--rk-rail) solid var(--rk-accent);
    background: var(--rk-accent-soft);
    color: var(--rk-ink);
    font-size: var(--rk-fs-3xs);
    line-height: var(--rk-lh-prose);
    max-width: var(--rk-measure);
}

/* RkField carries a bottom margin built for a stacked form; in a bar it leaves a hole. */
.bar[b-2gqyvp8bpm]  .rk-field {
    margin-bottom: 0;
}

.bar[b-2gqyvp8bpm]  .bar__find {
    width: calc(var(--rk-blank-max) * 2);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   THE GRID
   --------------------------------------------------------------------------------------- */

/* THE PICTURE CELL. The thumbnail is its own component and sizes itself; the cell only keeps
   it from being stretched by a tall row beside it. */
.cell--pic[b-2gqyvp8bpm] {
    vertical-align: middle;
    line-height: 0;
}

.cell--code[b-2gqyvp8bpm] {
    font-family: var(--rk-font-mono);
    overflow-wrap: anywhere;
}

.cell--what[b-2gqyvp8bpm] {
    min-width: 0;
}

.cell__title[b-2gqyvp8bpm] {
    display: block;
    overflow-wrap: anywhere;
}

.cell__tag[b-2gqyvp8bpm] {
    display: block;
    font-size: var(--rk-fs-3xs);
    color: var(--rk-ink-soft);
    letter-spacing: var(--rk-track-2xs);
}

.cell--cat[b-2gqyvp8bpm],
.cell--kind[b-2gqyvp8bpm] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

/*
    🛑 THE FLEX GOES ON AN INNER SPAN, NEVER ON THE `td`.

    Caught by RENDERING IT, 2026-09-20: with `display: flex` on the cell itself the element
    stops being a table-cell, so the ROW no longer grows to hold it - two stamps on one part
    ("NO MARKUP BAND" and "VAN") spilled out of the row and sat on top of the row beneath.
    Every row in the grid carries at least one stamp, so this was wrong on every screenful.
*/
.cell--flags[b-2gqyvp8bpm] {
    vertical-align: top;
}

.flags[b-2gqyvp8bpm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-3);
}

/* 🛑 A PART THAT CANNOT BE PRICED IS DRAWN, AND LOUDLY. Not hidden, not blank. */
.cell--noprice[b-2gqyvp8bpm] {
    background: var(--rk-danger-soft);
}

.noprice[b-2gqyvp8bpm] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-danger-ink);
}

.pager[b-2gqyvp8bpm] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-10) 0 0;
}

.pager__word[b-2gqyvp8bpm] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

/* THE SUPPLIER AND TIER PICKS - a label then its button, on one wrapping line. */
.bar__picks[b-2gqyvp8bpm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
}

.bar__lab[b-2gqyvp8bpm] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   ADD A PART - madlib sentence, then the typed boxes.
   --------------------------------------------------------------------------------------- */
.make[b-2gqyvp8bpm] {
    margin-bottom: var(--rk-sp-14);
}

.typed[b-2gqyvp8bpm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-6) var(--rk-sp-10);
    margin: var(--rk-sp-12) 0 var(--rk-sp-8);
}

@media (min-width: 720px) {
    .typed[b-2gqyvp8bpm] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .typed[b-2gqyvp8bpm]  .typed--span {
        grid-column: 1 / -1;
    }
}

.flags[b-2gqyvp8bpm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-12);
    margin-bottom: var(--rk-sp-10);
}
/* /Pages/Payables.razor.rz.scp.css */
/*
    MONEY ▸ PAYABLES - THE SHARED SHEET. Tokens only, layout only, no literal colour.

    Every tab is its own component, and Blazor scopes a stylesheet to the component that owns it,
    so the payables vocabulary - a worksheet table, a total on a heavy rule, a filter bar, a form
    grid, the bill sheet's head - lives HERE, under the page's .payables wrapper and ::deep, and
    reaches every tab, the bill sheet and the check sheet (RkModal renders inside its host). It
    restates the ledger's and payroll's worksheet on purpose: a bill and the entry it posts are the
    same money and must look like it.

    🛑 Small accent text wears --rk-accent-ink, never the raw --rk-accent (a contrast test fails the
    build), and nothing here paints white text on an ink ground.
*/

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

.payables[b-co7eh6lmlt]  .pb-sec {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    min-width: 0;
    padding-top: var(--rk-sp-8);
}

.payables[b-co7eh6lmlt]  .pb-stack {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.payables[b-co7eh6lmlt]  .pb-h3 {
    margin: var(--rk-sp-8) 0 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.payables[b-co7eh6lmlt]  .pb-lede {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.payables[b-co7eh6lmlt]  .pb-lede strong {
    color: var(--rk-ink);
}

.payables[b-co7eh6lmlt]  .pb-note {
    margin: 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.4);
}

.payables[b-co7eh6lmlt]  .pb-note--warn {
    color: var(--rk-warn-ink);
}

.payables[b-co7eh6lmlt]  .pb-soft {
    color: var(--rk-ink-soft);
}

.payables[b-co7eh6lmlt]  .pb-late {
    color: var(--rk-danger-ink);
    font-weight: var(--rk-fw-semibold);
}

.payables[b-co7eh6lmlt]  .pb-strong {
    font-weight: var(--rk-fw-semibold);
}

.payables[b-co7eh6lmlt]  .pb-asides {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    padding-top: var(--rk-sp-16);
}

.payables[b-co7eh6lmlt]  .pb-aside {
    margin: 0;
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border-left: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-zebra);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.4);
}

.payables[b-co7eh6lmlt]  .pb-aside strong {
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   THE BAR - the question the table below answers.
   --------------------------------------------------------------------------------------- */

.payables[b-co7eh6lmlt]  .pb-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    padding: var(--rk-sp-4) 0 var(--rk-sp-8);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
}

.payables[b-co7eh6lmlt]  .pb-bar .rk-field {
    margin-bottom: 0;
}

.payables[b-co7eh6lmlt]  .pb-bar .pb-lede {
    flex: 1 1 calc(var(--rk-blank-max) * 1.6);
}

.payables[b-co7eh6lmlt]  .pb-bar__pick {
    width: var(--rk-blank-max);
    max-width: 100%;
}

.payables[b-co7eh6lmlt]  .pb-bar__find {
    width: calc(var(--rk-blank-max) * 1.3);
    max-width: 100%;
}

.payables[b-co7eh6lmlt]  .pb-bar__date {
    width: calc(var(--rk-blank-max) * 0.8);
    max-width: 100%;
}

.payables[b-co7eh6lmlt]  .pb-bar__check {
    align-self: flex-end;
}

/* The kit's check is a full-width row; beside a filter, in a pay column or as a two-way choice it is
   a compact target of its own width - still a whole-row button, still the control's height floor. */
.payables[b-co7eh6lmlt]  .rk-check.pb-check--inline {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    min-height: var(--rk-control-sm);
    padding: var(--rk-sp-4) var(--rk-sp-12) var(--rk-sp-4) var(--rk-sp-8);
    gap: var(--rk-sp-8);
}

.payables[b-co7eh6lmlt]  .pb-bar__end {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    align-items: flex-end;
}

.payables[b-co7eh6lmlt]  .pb-showing {
    margin: 0;
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.payables[b-co7eh6lmlt]  p.pb-bar__end {
    align-self: center;
}

/* ---------------------------------------------------------------------------------------
   THE WORKSHEET - money right-aligned and mono, the total on a heavy rule. The wrapper
   scrolls sideways on a phone so the PAGE never does.
   --------------------------------------------------------------------------------------- */

.payables[b-co7eh6lmlt]  .pb-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.payables[b-co7eh6lmlt]  .pb-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line);
}

.payables[b-co7eh6lmlt]  .pb-table th,
.payables[b-co7eh6lmlt]  .pb-table td {
    padding: var(--rk-sp-6) var(--rk-sp-10);
    text-align: left;
    vertical-align: top;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.payables[b-co7eh6lmlt]  .pb-table thead th {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    border-bottom: var(--rk-border) solid var(--rk-line-hard);
    white-space: nowrap;
}

.payables[b-co7eh6lmlt]  .pb-table .n {
    text-align: right;
    white-space: nowrap;
    font-family: var(--rk-font-mono);
    font-variant-numeric: tabular-nums;
}

.payables[b-co7eh6lmlt]  .pb-table .nowrap {
    white-space: nowrap;
}

.payables[b-co7eh6lmlt]  .mono {
    font-family: var(--rk-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.payables[b-co7eh6lmlt]  .pb-table tbody td {
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

/* A payee's name keeps its width on a phone - the wrapper scrolls, the name does not fold to one word a line. */
.payables[b-co7eh6lmlt]  .pb-table td.pb-payee {
    min-width: calc(var(--rk-blank-max) * 0.8);
    font-weight: var(--rk-fw-semibold);
}

.payables[b-co7eh6lmlt]  .pb-total td {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    border-top: var(--rk-rail) solid var(--rk-ink);
}

.payables[b-co7eh6lmlt]  .pb-total td.n {
    font-family: var(--rk-font-mono);
    letter-spacing: 0;
}

.payables[b-co7eh6lmlt]  .pb-click {
    cursor: pointer;
}

.payables[b-co7eh6lmlt]  .pb-click:hover td {
    background: var(--rk-hover-ghost);
}

.payables[b-co7eh6lmlt]  .pb-dim td {
    color: var(--rk-ink-soft);
}

/* The payee being paid, and the line being changed - lit, so the eye stays on it. */
.payables[b-co7eh6lmlt]  .pb-row--on td {
    background: var(--rk-accent-soft);
}

.payables[b-co7eh6lmlt]  .pb-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-ink);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}

.payables[b-co7eh6lmlt]  .pb-link.mono {
    font-family: var(--rk-font-mono);
}

.payables[b-co7eh6lmlt]  .pb-link:hover {
    text-decoration: underline;
}

.payables[b-co7eh6lmlt]  .pb-link:disabled {
    color: var(--rk-disabled-text);
    cursor: default;
    text-decoration: none;
}

.payables[b-co7eh6lmlt]  .pb-link:focus-visible {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

/* A row's own action - Change, Remove - in the row's type, so a table stays one line per row. */
.payables[b-co7eh6lmlt]  .pb-act {
    font-family: var(--rk-font-body);
    font-size: var(--rk-fs-sm);
}

.payables[b-co7eh6lmlt]  .pb-act + .pb-act {
    margin-left: var(--rk-sp-10);
}

.payables[b-co7eh6lmlt]  .pb-tag {
    display: block;
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-body);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.payables[b-co7eh6lmlt]  .pb-tag--warn {
    color: var(--rk-warn-ink);
    font-weight: var(--rk-fw-semibold);
}

.payables[b-co7eh6lmlt]  .pb-tag--late {
    color: var(--rk-danger-ink);
    font-weight: var(--rk-fw-semibold);
}

/* "With detail of course, and all PO#s" - every number its own chip, readable down the column. */
.payables[b-co7eh6lmlt]  .pb-nums {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-3) var(--rk-sp-4);
}

.payables[b-co7eh6lmlt]  .pb-num {
    display: inline-block;
    padding: var(--rk-sp-1) var(--rk-sp-5);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-zebra);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   THE PAY RUN - one payee opened under its own row.
   --------------------------------------------------------------------------------------- */

.payables[b-co7eh6lmlt]  .pb-expand > td {
    padding: var(--rk-sp-4) var(--rk-sp-10) var(--rk-sp-14);
    background: var(--rk-paper);
    border-top: 0;
}

.payables[b-co7eh6lmlt]  .pb-pay {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-10) var(--rk-sp-12);
    border-left: var(--rk-rail) solid var(--rk-accent);
    background: var(--rk-card);
}

.payables[b-co7eh6lmlt]  .pb-table--inner {
    border-color: var(--rk-line);
}

.payables[b-co7eh6lmlt]  .pb-amt {
    width: calc(var(--rk-blank-max) * 0.7);
    margin-bottom: 0;
    margin-left: auto;
}

.payables[b-co7eh6lmlt]  .pb-amt input {
    text-align: right;
    font-family: var(--rk-font-mono);
}

.payables[b-co7eh6lmlt]  .pb-amt--qty {
    width: calc(var(--rk-blank-max) * 0.4);
}

.payables[b-co7eh6lmlt]  .pb-issue {
    display: block;
    padding-top: var(--rk-sp-2);
    font-family: var(--rk-font-body);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-danger-ink);
    white-space: normal;
}

.payables[b-co7eh6lmlt]  .pb-list {
    margin: 0;
    padding-left: var(--rk-sp-18);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   FORMS, PANELS AND ACTIONS
   --------------------------------------------------------------------------------------- */

.payables[b-co7eh6lmlt]  .pb-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--rk-blank-max)), 1fr));
    gap: var(--rk-sp-4) var(--rk-sp-12);
    align-items: start;
}

.payables[b-co7eh6lmlt]  .pb-form .rk-field {
    margin-bottom: 0;
}

.payables[b-co7eh6lmlt]  .pb-form__span {
    grid-column: 1 / -1;
}

.payables[b-co7eh6lmlt]  .pb-form__wide {
    grid-column: span 2;
}

.payables[b-co7eh6lmlt]  .pb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    align-items: center;
}

/* An act in progress inside a sheet - a change, a removal, a void - set apart on its own card. */
.payables[b-co7eh6lmlt]  .pb-panel {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-12) var(--rk-sp-14);
    border: var(--rk-border-card) solid var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-card);
}

.payables[b-co7eh6lmlt]  .pb-panel .pb-h3 {
    margin-top: 0;
    font-size: var(--rk-fs-lg);
}

.payables[b-co7eh6lmlt]  .pb-panel--danger {
    border-left-color: var(--rk-danger);
    background: var(--rk-danger-soft);
}

.payables[b-co7eh6lmlt]  .pb-panel--confirm {
    border-left-color: var(--rk-accent);
    background: var(--rk-accent-soft);
}

.payables[b-co7eh6lmlt]  .pb-choice {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8) var(--rk-sp-12);
}

.payables[b-co7eh6lmlt]  .pb-payee-pick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-12);
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border: var(--rk-border-hair) dashed var(--rk-line-hard);
    background: var(--rk-card);
    max-width: calc(var(--rk-blank-max) * 2.4);
}

.payables[b-co7eh6lmlt]  .pb-payee-pick .pb-tag {
    display: inline;
}

/* The new-bill line grid: the account and the description take the room, the numbers stay narrow. */
.payables[b-co7eh6lmlt]  .pb-lines td {
    vertical-align: middle;
}

.payables[b-co7eh6lmlt]  .pb-lines .rk-field {
    margin-bottom: 0;
}

.payables[b-co7eh6lmlt]  .pb-lines__acct {
    min-width: calc(var(--rk-blank-max) * 1.1);
}

.payables[b-co7eh6lmlt]  .pb-lines__desc {
    min-width: calc(var(--rk-blank-max) * 1.1);
}

/* ---------------------------------------------------------------------------------------
   THE BILL SHEET'S HEAD - who is owed, and the three numbers that say how much.
   --------------------------------------------------------------------------------------- */

.payables[b-co7eh6lmlt]  .pb-sheet__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rk-sp-10) var(--rk-sp-20);
    padding-bottom: var(--rk-sp-10);
    border-bottom: var(--rk-border) solid var(--rk-line-hard);
}

.payables[b-co7eh6lmlt]  .pb-sheet__who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-10);
}

.payables[b-co7eh6lmlt]  .pb-sheet__payee {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.payables[b-co7eh6lmlt]  .pb-sheet__who .pb-tag {
    display: inline;
}

.payables[b-co7eh6lmlt]  .pb-sums {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6) var(--rk-sp-20);
    margin: 0;
}

.payables[b-co7eh6lmlt]  .pb-sums div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.payables[b-co7eh6lmlt]  .pb-sums dt {
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.payables[b-co7eh6lmlt]  .pb-sums dd {
    margin: 0;
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink);
}

.payables[b-co7eh6lmlt]  .pb-sums__owed dd {
    font-size: var(--rk-fs-2xl);
    font-weight: var(--rk-fw-bold);
}

.payables[b-co7eh6lmlt]  .pb-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--rk-sp-4) var(--rk-sp-14);
    margin: 0;
    font-size: var(--rk-fs-sm);
}

.payables[b-co7eh6lmlt]  .pb-kv dt {
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    padding-top: var(--rk-sp-2);
}

.payables[b-co7eh6lmlt]  .pb-kv dd {
    margin: 0;
    color: var(--rk-ink);
}

@media (max-width: 719px) {
    .payables[b-co7eh6lmlt]  .pb-form__wide {
        grid-column: 1 / -1;
    }

    .payables[b-co7eh6lmlt]  .pb-sums div {
        align-items: flex-start;
    }
}
/* /Pages/Payroll.razor.rz.scp.css */
/*
    MONEY ▸ PAYROLL - THE SHEET. Tokens only, layout only, no literal colour.

    The same worksheet vocabulary as Ledger.razor.css - money right-aligned and mono, the total on
    a heavy rule, a filter bar, a form grid - restated under the page's .payroll wrapper and
    ::deep so it reaches the proof sheet and the confirm (RkModal renders inside its host). The
    books and the payroll are the same money and must look like it.

    🛑 Small accent text wears --rk-accent-ink, never the raw --rk-accent (a contrast test fails the
    build), and nothing here paints white text on an ink ground.
*/

.payroll[b-1f2tcv6yih] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.payroll[b-1f2tcv6yih]  .pr-sec {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    min-width: 0;
    padding-top: var(--rk-sp-8);
}

.payroll[b-1f2tcv6yih]  .pr-h3 {
    margin: var(--rk-sp-8) 0 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.payroll[b-1f2tcv6yih]  .pr-lede {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.payroll[b-1f2tcv6yih]  .pr-lede strong {
    color: var(--rk-ink);
}

.payroll[b-1f2tcv6yih]  .pr-note {
    margin: 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.4);
}

.payroll[b-1f2tcv6yih]  .pr-note--warn {
    color: var(--rk-warn-ink);
}

.payroll[b-1f2tcv6yih]  .pr-asides {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    padding-top: var(--rk-sp-8);
}

.payroll[b-1f2tcv6yih]  .pr-aside {
    margin: 0;
    padding: var(--rk-sp-8) var(--rk-sp-12);
    border-left: var(--rk-rail) solid var(--rk-steel);
    background: var(--rk-zebra);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: calc(var(--rk-measure) * 1.4);
}

.payroll[b-1f2tcv6yih]  .pr-aside strong {
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   THE BAR - which period, and what can be done with it.
   --------------------------------------------------------------------------------------- */

.payroll[b-1f2tcv6yih]  .pr-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    padding: var(--rk-sp-4) 0 var(--rk-sp-8);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
}

.payroll[b-1f2tcv6yih]  .pr-bar .rk-field {
    margin-bottom: 0;
}

/* Wide enough for "20 Sep to 26 Sep 2026 - ended, not closed" - the state is the reason to pick one. */
.payroll[b-1f2tcv6yih]  .pr-bar__pick {
    width: calc(var(--rk-blank-max) * 1.8);
    max-width: 100%;
}

.payroll[b-1f2tcv6yih]  .pr-bar__end {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    align-items: flex-end;
}

.payroll[b-1f2tcv6yih]  .pr-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
}

.payroll[b-1f2tcv6yih]  .pr-showing {
    margin: 0;
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

/* A link that looks like the kit's ghost button - an anchor, because a download IS a link. */
.payroll[b-1f2tcv6yih]  .pr-dl {
    display: inline-flex;
    align-items: center;
    min-height: var(--rk-control-sm);
    padding: 0 var(--rk-sp-12);
    border: var(--rk-border) solid var(--rk-ink);
    border-radius: var(--rk-radius-xs);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--rk-ink);
    background: var(--rk-card);
}

.payroll[b-1f2tcv6yih]  .pr-dl:hover {
    background: var(--rk-hover-ghost);
}

.payroll[b-1f2tcv6yih]  .pr-dl:focus-visible {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

/* ---------------------------------------------------------------------------------------
   THE WORKSHEET - the wrapper scrolls sideways on a phone so the PAGE never does.
   --------------------------------------------------------------------------------------- */

.payroll[b-1f2tcv6yih]  .pr-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.payroll[b-1f2tcv6yih]  .pr-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line);
}

.payroll[b-1f2tcv6yih]  .pr-table th,
.payroll[b-1f2tcv6yih]  .pr-table td {
    padding: var(--rk-sp-6) var(--rk-sp-10);
    text-align: left;
    vertical-align: top;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.payroll[b-1f2tcv6yih]  .pr-table thead th {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    border-bottom: var(--rk-border) solid var(--rk-line-hard);
    white-space: nowrap;
}

.payroll[b-1f2tcv6yih]  .pr-table .n {
    text-align: right;
    white-space: nowrap;
    font-family: var(--rk-font-mono);
    font-variant-numeric: tabular-nums;
}

.payroll[b-1f2tcv6yih]  .pr-table .nowrap {
    white-space: nowrap;
}

.payroll[b-1f2tcv6yih]  .mono {
    font-family: var(--rk-font-mono);
    white-space: nowrap;
}

.payroll[b-1f2tcv6yih]  .pr-table tbody td {
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.payroll[b-1f2tcv6yih]  .pr-table td.pr-gross {
    font-weight: var(--rk-fw-semibold);
}

/* The name cell keeps its width on a phone - the wrapper scrolls, the name does not fold to one word a line. */
.payroll[b-1f2tcv6yih]  .pr-table td.pr-emp {
    min-width: calc(var(--rk-blank-max) * 0.9);
}

.payroll[b-1f2tcv6yih]  .pr-total td {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    border-top: var(--rk-rail) solid var(--rk-ink);
}

.payroll[b-1f2tcv6yih]  .pr-total td.n {
    font-family: var(--rk-font-mono);
    letter-spacing: 0;
}

.payroll[b-1f2tcv6yih]  .pr-click {
    cursor: pointer;
}

.payroll[b-1f2tcv6yih]  .pr-click:hover td {
    background: var(--rk-hover-ghost);
}

.payroll[b-1f2tcv6yih]  .pr-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-ink);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}

.payroll[b-1f2tcv6yih]  .pr-link:hover {
    text-decoration: underline;
}

.payroll[b-1f2tcv6yih]  .pr-link:focus-visible {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.payroll[b-1f2tcv6yih]  .pr-tag {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.payroll[b-1f2tcv6yih]  .pr-state .pr-tag {
    display: inline;
}

/* A long visit beside the visit count, and on the proof sheet's row - a flag, never a cap. */
.payroll[b-1f2tcv6yih]  .pr-long {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-warn-ink);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------
   FORMS AND FACTS
   --------------------------------------------------------------------------------------- */

/* A column of paragraphs that needs air between them - the confirm, the sheet's notes. */
.payroll[b-1f2tcv6yih]  .pr-stack {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
}

.payroll[b-1f2tcv6yih]  .pr-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rk-sp-10);
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.payroll[b-1f2tcv6yih]  .pr-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--rk-blank-max)), 1fr));
    gap: var(--rk-sp-4) var(--rk-sp-12);
    align-items: start;
    max-width: calc(var(--rk-blank-max) * 2.4);
}

.payroll[b-1f2tcv6yih]  .pr-form .rk-field {
    margin-bottom: 0;
}

.payroll[b-1f2tcv6yih]  .pr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    align-items: center;
}

.payroll[b-1f2tcv6yih]  .pr-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--rk-sp-4) var(--rk-sp-12);
    margin: 0;
    font-size: var(--rk-fs-sm);
}

.payroll[b-1f2tcv6yih]  .pr-kv dt {
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    padding-top: var(--rk-sp-2);
}

.payroll[b-1f2tcv6yih]  .pr-kv dd {
    margin: 0;
    color: var(--rk-ink);
}
/* /Pages/PurchaseOrderCenter.razor.rz.scp.css */
/*
    ONE PURCHASE ORDER, AND RECEIVING AGAINST IT.

    Layout only, tokens only, no literal colour, size, radius or shadow anywhere.

    ⚠️ ::deep for any kit class. A Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.

    🛑 AND NEVER `background: var(--rk-ink)` WITH `color: var(--rk-white)`. The dark theme
    resolves both to the same value and the text goes invisible. Permanent dark chrome is
    --rk-chrome-bg / --rk-chrome-ink, which do not flip.
*/

/* ---------------------------------------------------------------------------------------
   THE HEADER FACTS. Three of them are easy to get wrong - the ship-to is a HINT, the terms
   are a SNAPSHOT, and a blank vendor branch is NORMAL - so each one carries a note line
   saying what it is rather than leaving a reader to assume.
   --------------------------------------------------------------------------------------- */
.facts[b-tm0lpkg1ww] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--rk-sp-12);
    padding: var(--rk-sp-14) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.fact[b-tm0lpkg1ww] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    min-width: 0;
}

.fact__label[b-tm0lpkg1ww] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.fact__value[b-tm0lpkg1ww] {
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink);
}

.fact__note[b-tm0lpkg1ww] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
    font-style: italic;
}

.fact__bill[b-tm0lpkg1ww] {
    margin-right: var(--rk-sp-8);
    font-family: var(--rk-font-mono);
    color: var(--rk-accent-ink);
}

.fact__bill--void[b-tm0lpkg1ww] {
    color: var(--rk-ink-soft);
    text-decoration: line-through;
}

/* ---------------------------------------------------------------------------------------
   THE ADD-LINE MADLIB. One sentence, because the overwhelming majority of orders are one
   line and the append is the same sentence again.
   --------------------------------------------------------------------------------------- */
.make[b-tm0lpkg1ww] {
    margin: var(--rk-sp-16) 0;
}

.make__typed[b-tm0lpkg1ww] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--rk-sp-10);
    margin-top: var(--rk-sp-14);
}

/* ---------------------------------------------------------------------------------------
   THE LINE CARDS. A grid alone cannot carry the ledger figure, the cached figure and the
   difference between them, which is the one thing this screen exists to make visible.
   --------------------------------------------------------------------------------------- */
.lines[b-tm0lpkg1ww] {
    display: grid;
    gap: var(--rk-sp-10);
    margin: var(--rk-sp-14) 0;
}

.line[b-tm0lpkg1ww] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-12) var(--rk-sp-14);
    border: var(--rk-border-card);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-card);
}

/* A cancelled line stays legible. It is history, not noise - the delivery points back at it. */
.line--dead[b-tm0lpkg1ww] {
    opacity: 0.68;
}

.line__head[b-tm0lpkg1ww] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8);
}

.line__no[b-tm0lpkg1ww] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.line__what[b-tm0lpkg1ww] {
    font-weight: var(--rk-fw-semibold);
    line-height: var(--rk-lh-snug);
}

.line__grid[b-tm0lpkg1ww] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--rk-sp-8);
    margin: 0;
}

.line__grid dt[b-tm0lpkg1ww] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.line__grid dd[b-tm0lpkg1ww] {
    margin: var(--rk-sp-2) 0 0;
    font-size: var(--rk-fs-sm);
}

/*
    🛑 THE DRIFT MARK. The cached figure disagreeing with the receipt ledger is the one thing
    on this screen a warehouse count would otherwise find first. Warn rather than danger: the
    deliveries are still correct, only the rollup the board paints from is stale.
*/
.line__drift[b-tm0lpkg1ww] {
    color: var(--rk-warn-ink);
    font-weight: var(--rk-fw-semibold);
}

.line__foot[b-tm0lpkg1ww] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    padding-top: var(--rk-sp-8);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.line__job[b-tm0lpkg1ww] {
    color: var(--rk-accent-ink);
    font-family: var(--rk-font-mono);
}

.line__why[b-tm0lpkg1ww] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

/* ---------------------------------------------------------------------------------------
   THE DELIVERIES.
   --------------------------------------------------------------------------------------- */
.deliveries[b-tm0lpkg1ww] {
    display: grid;
    gap: var(--rk-sp-12);
    margin: var(--rk-sp-14) 0;
}

.delivery__head[b-tm0lpkg1ww] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-10);
    align-items: baseline;
}

.delivery__when[b-tm0lpkg1ww] {
    font-weight: var(--rk-fw-semibold);
}

.delivery__who[b-tm0lpkg1ww],
.delivery__slip[b-tm0lpkg1ww] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.rows[b-tm0lpkg1ww] {
    width: 100%;
    border-collapse: collapse;
}

.rows__cap[b-tm0lpkg1ww] {
    text-align: left;
    padding-bottom: var(--rk-sp-6);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.rows th[b-tm0lpkg1ww] {
    text-align: left;
    padding: var(--rk-sp-4) var(--rk-sp-6);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.rows td[b-tm0lpkg1ww] {
    padding: var(--rk-sp-6);
    vertical-align: top;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
    font-size: var(--rk-fs-sm);
}

.rows__num[b-tm0lpkg1ww] {
    text-align: right;
    white-space: nowrap;
}

.rows__what[b-tm0lpkg1ww] {
    display: block;
}

.rows__over[b-tm0lpkg1ww] {
    display: block;
    margin-top: var(--rk-sp-2);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-warn-ink);
}

/* The ORDERED price, greyed, sitting beside what was actually paid. */
.rows__quiet[b-tm0lpkg1ww] {
    color: var(--rk-ink-soft);
}

/*
    🛑 A DIFFERENCE BETWEEN THE ORDERED PRICE AND THE PAID PRICE IS HIGHLIGHTED RATHER THAN
    HIDDEN. Measured: they differ by more than half a cent on 2,494 of 95,724 pairs, and that
    difference is the whole reason a human opens a receipt.
*/
.rows__diff[b-tm0lpkg1ww] {
    color: var(--rk-accent-ink);
    font-weight: var(--rk-fw-semibold);
}

/*
    A NEGATIVE QUANTITY IS A RETURN TO THE VENDOR, not an error - danger ink with a leading
    minus, never parentheses, which half the people who read this screen do not read as
    negative.
*/
.rows__back[b-tm0lpkg1ww] {
    color: var(--rk-danger-ink);
}

.rows__backword[b-tm0lpkg1ww] {
    display: block;
    font-size: var(--rk-fs-2xs);
    text-transform: uppercase;
    letter-spacing: var(--rk-track-2xs);
}

.rows__where[b-tm0lpkg1ww] {
    display: block;
}

.rows__how[b-tm0lpkg1ww] {
    display: block;
    margin-top: var(--rk-sp-2);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE RECEIVE SHEET. It opens pre-filled - "take all of it" is one tap at the measured shape,
   where 93.8% of orders arrive in one delivery and 87% of deliveries are one to three lines.
   --------------------------------------------------------------------------------------- */
.take[b-tm0lpkg1ww] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--rk-sp-10);
    padding-bottom: var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.take__lines[b-tm0lpkg1ww] {
    display: grid;
    gap: var(--rk-sp-10);
    padding-top: var(--rk-sp-12);
}

.take__line[b-tm0lpkg1ww] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-10) var(--rk-sp-12);
    border: var(--rk-border-card);
    border-radius: var(--rk-radius-sm);
}

.take__head[b-tm0lpkg1ww] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-8);
}

.take__owed[b-tm0lpkg1ww] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.take__grid[b-tm0lpkg1ww] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--rk-sp-10);
}

.take__typed[b-tm0lpkg1ww] {
    align-self: end;
    margin: 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.details[b-tm0lpkg1ww] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--rk-sp-4) var(--rk-sp-12);
}

.details[b-tm0lpkg1ww]  .details__wide {
    grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------------------
   THE CONFIRMS.
   --------------------------------------------------------------------------------------- */
.say[b-tm0lpkg1ww] {
    margin: 0 0 var(--rk-sp-10);
    max-width: var(--rk-measure);
    line-height: var(--rk-lh-prose);
}

.say--quiet[b-tm0lpkg1ww] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   PHONE.
   --------------------------------------------------------------------------------------- */
@media (max-width: 40rem) {
    .facts[b-tm0lpkg1ww] {
        grid-template-columns: 1fr;
    }

    .rows th[b-tm0lpkg1ww],
    .rows td[b-tm0lpkg1ww] {
        padding: var(--rk-sp-4);
        font-size: var(--rk-fs-xs);
    }
}
/* /Pages/PurchaseOrders.razor.rz.scp.css */
/*
    THE PURCHASING BOARD.

    Layout only, tokens only, no literal colour, size, radius or shadow anywhere. Nothing on
    this page comes out of a customer's database carrying its own colour, so there is not even
    an inline style exception here.

    ⚠️ ::deep for any kit class. A Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

/* ---------------------------------------------------------------------------------------
   THE MADLIB CARD. One sentence, because 57.5% of real purchase orders have exactly one line
   and 83.7% have three or fewer - a grid of labelled fields would be a form for the 16% and a
   wall for everybody else.
   --------------------------------------------------------------------------------------- */
.make[b-6encxnll3u] {
    margin-bottom: var(--rk-sp-16);
}

.make__typed[b-6encxnll3u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--rk-sp-10);
    margin: var(--rk-sp-14) 0;
}

/* ---------------------------------------------------------------------------------------
   THE FILTER BAR. It is the search ARGUMENT - the door refuses a call with no handle, and
   openOnly and unissuedOnly are NOT handles - so the DATE WINDOW sits in plain sight rather
   than in a drawer. ESC's open orders run March to September, so a ninety-day window hides
   some and somebody has to be able to see that and widen it.
   --------------------------------------------------------------------------------------- */
.bar[b-6encxnll3u] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-12) var(--rk-sp-16);
    padding: var(--rk-sp-12) 0 var(--rk-sp-14);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.bar__group[b-6encxnll3u] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-8);
    min-width: 0;
}

/*
    🛑 ::deep, BECAUSE ALL THREE OF THESE ARE A `Class` HANDED TO A KIT CONTROL.

    CORRECTED 2026-09-20. The header above states this rule and these three rules broke it:
    RkTextInput and RkPickSheet pass Class down to RkField's own element, which carries THAT
    component's scope attribute, never this page's. A bare `.bar__date { }` here compiles to
    `.bar__date[b-thispage]` and matches nothing at all, silently - so the filter bar's widths
    and the phone breakpoint below were both dead. `.bar__group` is a real div written in this
    page, so it keeps the page's scope and is the anchor these hang off.
*/
.bar__group[b-6encxnll3u]  .bar__find {
    min-width: 18rem;
}

.bar__group[b-6encxnll3u]  .bar__date {
    min-width: 9rem;
}

.bar__group[b-6encxnll3u]  .bar__pick {
    min-width: 11rem;
}

/* ---------------------------------------------------------------------------------------
   THE ROWS.
   --------------------------------------------------------------------------------------- */
.showing[b-6encxnll3u] {
    margin: var(--rk-sp-14) 0 var(--rk-sp-6);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.cell__title[b-6encxnll3u] {
    display: block;
    line-height: var(--rk-lh-snug);
}

/*
    THE RESERVATION VOICE. A PO with no lines is a NORMAL, healthy row - the number was taken
    at a counter so somebody could read it out - so the cell is quieter than a real order
    rather than louder. It must never read as an error; that is the whole point of the
    reservations tab existing.
*/
.cell__title--quiet[b-6encxnll3u] {
    color: var(--rk-ink-soft);
    font-style: italic;
}

.cell__tag[b-6encxnll3u] {
    display: block;
    margin-top: var(--rk-sp-2);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.cell--code[b-6encxnll3u] {
    white-space: nowrap;
}

.cell--money[b-6encxnll3u] {
    white-space: nowrap;
}

.cell--received[b-6encxnll3u] {
    white-space: nowrap;
}

.cell--when[b-6encxnll3u] {
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------
   THE PAGER.
   --------------------------------------------------------------------------------------- */
.pager[b-6encxnll3u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-14) 0;
}

.pager__word[b-6encxnll3u] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   PHONE. One app, desktop and phone - same markup, a breakpoint, and nothing hidden.
   --------------------------------------------------------------------------------------- */
@media (max-width: 40rem) {
    .bar__group[b-6encxnll3u]  .bar__find,
    .bar__group[b-6encxnll3u]  .bar__date,
    .bar__group[b-6encxnll3u]  .bar__pick {
        min-width: 100%;
    }

    .bar__group[b-6encxnll3u] {
        width: 100%;
    }
}
/* /Pages/Reports.razor.rz.scp.css */
/*
    MONEY ▸ REPORTS. Layout only, tokens only - no literal colour anywhere (a raw hex fails the build).

    The catalog is the System page's area grid (Setup.razor.css): one column on a phone, two from
    tablet up, each report a cut-corner block that is a link. Every report here is a destination,
    so every block is live.

    ⚠️ NOTHING HERE PAIRS --rk-ink WITH --rk-white - the dark theme resolves both to paper.
*/

.group[b-t3pb7pyoyi] {
    margin: var(--rk-sp-16) 0 var(--rk-sp-16);
}

.group__word[b-t3pb7pyoyi] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.group__lede[b-t3pb7pyoyi] {
    margin: var(--rk-sp-3) 0 var(--rk-sp-12);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.areas[b-t3pb7pyoyi] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-10);
}

@media (min-width: 860px) {
    .areas[b-t3pb7pyoyi] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.area[b-t3pb7pyoyi] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    padding: var(--rk-sp-12) var(--rk-sp-14);
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line);
    border-radius: var(--rk-radius-sm);
    clip-path: polygon(
        0 0,
        calc(100% - var(--rk-corner)) 0,
        100% var(--rk-corner),
        100% 100%,
        0 100%);
    color: var(--rk-ink);
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--rk-dur-ui) var(--rk-ease),
                box-shadow var(--rk-dur-ui) var(--rk-ease);
}

.area:hover[b-t3pb7pyoyi],
.area:focus-visible[b-t3pb7pyoyi] {
    border-color: var(--rk-accent-ink);
    box-shadow: var(--rk-shadow-card);
}

.area__head[b-t3pb7pyoyi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-6);
}

.area__word[b-t3pb7pyoyi] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

.area__answers[b-t3pb7pyoyi] {
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.area__where[b-t3pb7pyoyi] {
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink-soft);
}

/* THE CAPABILITY NAMES, verbatim and in mono - the REST routes and the MCP tools both, so somebody
   wiring an agent can read the report's door straight off the card. */
.area__doors[b-t3pb7pyoyi] {
    font-size: var(--rk-fs-3xs);
    line-height: var(--rk-lh-snug);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink-soft);
    opacity: 0.75;
    overflow-wrap: anywhere;
}
/* /Pages/ResetPassword.razor.rz.scp.css */
/*
    THE RECOVERY GATE. Deliberately indistinguishable from the sign-in gate.

    WHY THE RULES ARE COPIED RATHER THAN SHARED. Blazor's scoped CSS is per COMPONENT - a
    `.gate` rule in Login.razor.css is rewritten with Login's own scope id and matches nothing
    here - so the choice is a duplicate of about forty lines or a global stylesheet carrying
    two pages' layout. The duplicate wins: these two screens are one visual object seen twice
    and they must not drift, and a global `.gate` would be the first unscoped page class in
    the app for a class name as generic as "gate".

    Layout only, tokens only, no literal colour - the rule every page in this app follows.

    THE WIDTH IS THE SAME 420px AND THAT IS THE POINT. A person who clicks "forgot your
    password" must land somewhere that is obviously the same place with a different question,
    not on a screen that reflows and feels like a different product at the exact moment they
    are already unsure.

    NO COLOUR PAIR IS DECLARED ANYWHERE IN THIS FILE. The dark theme resolves --rk-white and
    --rk-ink to the same value, so `background: var(--rk-ink); color: var(--rk-white)` is
    invisible - it shipped once. Everything visible here is drawn by the kit, which knows.

    ::deep is needed for anything inside a kit control - a Class passed to RkCard or
    RkTextInput lands on THAT component's scoped element, so a bare rule here compiles against
    this page's scope and matches nothing.
*/

.gate[b-8x5ko38qal] {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    padding-block: var(--rk-sp-24) var(--rk-sp-40);
}

/* ---------------------------------------------------------------------------------------
   THE WORDMARK. Same mark, same size, same place as the sign-in screen.
   --------------------------------------------------------------------------------------- */
.gate__head[b-8x5ko38qal] {
    text-align: center;
    margin-bottom: var(--rk-sp-24);
}

.gate__mark[b-8x5ko38qal] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-7xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-7xl);
    line-height: var(--rk-lh-tight);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.gate__tag[b-8x5ko38qal] {
    margin: var(--rk-sp-4) 0 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-hero);
    text-transform: uppercase;
    color: var(--rk-steel);
}

/* ---------------------------------------------------------------------------------------
   WHAT THE HOST SAID IT DID - "a code is on its way to c...@example.com". Prose, so it reads
   as a sentence rather than as a field label.
   --------------------------------------------------------------------------------------- */
.gate__said[b-8x5ko38qal] {
    margin: 0 0 var(--rk-sp-16);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/*
    SIX DIGITS, SPACED OUT, IN MONO - identical to the second-factor box on the sign-in
    screen, because it is the identical act: a code read off one screen and typed into
    another, where 0/O and 1/l stop being a guess.
*/
.gate[b-8x5ko38qal]  .gate__code .rk-input {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-5xl);
    letter-spacing: var(--rk-track-2xl);
    text-align: center;
}

/* The commit. RkSize.Large already asks for the touch floor and Block for the width; this is
   the breathing room above it. */
.gate[b-8x5ko38qal]  .gate__go {
    margin-top: var(--rk-sp-8);
}

/*
    THE SECOND CHANNEL. Sits directly under the primary with a hairline of space, so the two
    read as one choice rather than as a commit and an afterthought - the person genuinely has
    two ways in and the screen should not imply that one of them is a fallback nobody uses.

    Less space than .gate__go takes above it, deliberately: a full gap here would separate the
    pair and put the text button visually with the hint below rather than with the choice.
*/
.gate[b-8x5ko38qal]  .gate__alt {
    margin-top: var(--rk-sp-8);
}

/*
    WHAT THE TEXT BUTTON DOES AND DOES NOT DO. Small print under the pair rather than a Hint
    on the button, because RkButton has no hint slot and because the sentence is about the
    CHOICE - "you cannot type a number here" - rather than about either control.

    --rk-steel and never --rk-accent: this is small text, and the accent pair does not carry
    the contrast for it.
*/
.gate__hint[b-8x5ko38qal] {
    margin: var(--rk-sp-8) 0 0;
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-steel);
}
/* /Pages/Routes.razor.rz.scp.css */
/*
    THE ROUTE LIST AND THE RUN SHEET.

    Layout only, tokens only, no literal colour. Deliberately the same shape as /vendors and
    /customers above the fold - bar, detail panel, table, pager - because a person who learned
    one learned all three.

    🛑 THE STOP LIST IS THE ONE PART THAT IS NOT LIKE THE OTHERS, AND IT IS NOT A TABLE ON
    PURPOSE. A driver reads their own day on a phone (CLAUDE.md's one-app rule, decision 39's
    courier case), and a six-column grid on a 375px screen either scrolls sideways or drops the
    columns that carry the address. So a stop is a BLOCK that reflows, the ordinal keeps its own
    gutter at every width, and every control stays a full tap target.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

.bar[b-ffg3mwgp9h] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-ffg3mwgp9h] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

/* RkField is built for a stacked form and carries a bottom margin. In a one-line bar that
   margin leaves the buttons sitting below the inputs they belong to. */
.bar[b-ffg3mwgp9h]  .rk-field {
    margin-bottom: 0;
}

.bar[b-ffg3mwgp9h]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.6);
    max-width: 100%;
}

.bar[b-ffg3mwgp9h]  .bar__date {
    width: calc(var(--rk-blank-max) * 0.9);
    max-width: 100%;
}

/* Back / Today / Forward. Stepping a day is the commonest act on this screen and it has to be
   one tap, beside the date rather than inside a menu. */
.bar__steps[b-ffg3mwgp9h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}

/* ---------------------------------------------------------------------------------------
   THE CREATE MADLIB. The sentence carries the CHOICE; the card under it carries the
   TRANSCRIPTION, which is exactly the division lift-06 draws.
   --------------------------------------------------------------------------------------- */
.make[b-ffg3mwgp9h] {
    margin-bottom: var(--rk-sp-20);
}

.typed[b-ffg3mwgp9h] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .typed[b-ffg3mwgp9h] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.typed[b-ffg3mwgp9h]  .typed--span {
    grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------------------
   THE OPEN PLAN.

   It sits ABOVE the list rather than replacing it, so comparing two drivers' days is a click
   and a glance rather than a click and a back button.
   --------------------------------------------------------------------------------------- */
.detail[b-ffg3mwgp9h] {
    margin-bottom: var(--rk-sp-20);
}

.head[b-ffg3mwgp9h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    min-width: 0;
}

.head__who[b-ffg3mwgp9h] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.head__name[b-ffg3mwgp9h] {
    font-size: var(--rk-fs-3xl);
    font-weight: var(--rk-fw-semibold);
    min-width: 0;
    overflow-wrap: anywhere;
}

.head__day[b-ffg3mwgp9h] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.head__marks[b-ffg3mwgp9h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}

/* Pushed right on a desk, wrapped underneath on a phone - margin-left auto does both. */
.head__acts[b-ffg3mwgp9h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
    margin-left: auto;
}

/* ---- THE FACTS ------------------------------------------------------------------------ */
.facts[b-ffg3mwgp9h] {
    display: grid;
    grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
    gap: var(--rk-sp-5) var(--rk-sp-14);
    margin: var(--rk-sp-14) 0 0;
}

.facts dt[b-ffg3mwgp9h] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.facts dd[b-ffg3mwgp9h] {
    margin: 0;
    min-width: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

/* The IANA id beside the zone. It is a machine handle and is drawn as one - quiet, and never
   the thing a reader's eye lands on first. */
.facts__quiet[b-ffg3mwgp9h] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

@media (max-width: 520px) {
    .facts[b-ffg3mwgp9h] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--rk-sp-2) 0;
    }

    .facts dd[b-ffg3mwgp9h] {
        margin-bottom: var(--rk-sp-8);
    }
}

/* ---------------------------------------------------------------------------------------
   THE STOP LIST - THE center OF GRAVITY.
   --------------------------------------------------------------------------------------- */
.stops__bar[b-ffg3mwgp9h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-12);
    margin-top: var(--rk-sp-18);
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.stops__count[b-ffg3mwgp9h] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    margin-right: auto;
}

.stops[b-ffg3mwgp9h] {
    list-style: none;
    margin: var(--rk-sp-12) 0 0;
    padding: 0;
    counter-reset: none;
}

/*
    A STOP IS A BLOCK, NOT A ROW. On a desk it lays out as ordinal / what / state / controls;
    under 720px the ordinal keeps its gutter and everything else stacks beneath the site name,
    which is the order a driver reads in.
*/
.stop[b-ffg3mwgp9h] {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: var(--rk-sp-4) var(--rk-sp-12);
    padding: var(--rk-sp-10) 0;
    min-height: var(--rk-tap);
    align-items: start;
}

.stop + .stop[b-ffg3mwgp9h] {
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 900px) {
    .stop[b-ffg3mwgp9h] {
        grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, 15rem);
        align-items: center;
    }
}

.stop__ord[b-ffg3mwgp9h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--rk-sp-2);
    grid-row: span 3;
}

@media (min-width: 900px) {
    .stop__ord[b-ffg3mwgp9h] {
        grid-row: span 2;
    }
}

/*
    THE ORDINAL IS DENSE AND IT IS A READ CONCERN. StopNumber is ROW_NUMBER() over a sparse
    Position, so "3 of 14" is always right and nothing stored was renumbered to make it so.
*/
.stop__num[b-ffg3mwgp9h] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-bold);
    line-height: var(--rk-lh-flat);
}

.stop__pin[b-ffg3mwgp9h] {
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    padding: 0 var(--rk-sp-3);
    border: var(--rk-border-hair) solid var(--rk-accent);
    border-radius: var(--rk-radius-xs);
    color: var(--rk-accent-deep);
}

.stop__what[b-ffg3mwgp9h] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    min-width: 0;
}

.stop__site[b-ffg3mwgp9h] {
    font-weight: var(--rk-fw-semibold);
    overflow-wrap: anywhere;
}

.stop__addr[b-ffg3mwgp9h] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.stop__meta[b-ffg3mwgp9h],
.stop__leg[b-ffg3mwgp9h] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.stop__state[b-ffg3mwgp9h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-4) var(--rk-sp-8);
    min-width: 0;
}

.stop__progress[b-ffg3mwgp9h] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/*
    THE CONTROLS SPAN THE FULL WIDTH UNDER THE STOP ON A PHONE. Squeezing five buttons into a
    column beside the address is how a re-order becomes a mis-tap on a truck dashboard.
*/
.stop__acts[b-ffg3mwgp9h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
    padding-top: var(--rk-sp-4);
}

@media (min-width: 900px) {
    .stop__acts[b-ffg3mwgp9h] {
        grid-column: 2 / -1;
        padding-top: 0;
    }
}

/* ---------------------------------------------------------------------------------------
   THE MODAL FORM. Two columns inside a Wide dialog, one on a phone.
   --------------------------------------------------------------------------------------- */
.form[b-ffg3mwgp9h] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
}

@media (min-width: 640px) {
    .form[b-ffg3mwgp9h] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form[b-ffg3mwgp9h]  .form--span {
    grid-column: 1 / -1;
}

/* The driver is a PICK, not a typed field, so it wears a field's label and spacing without
   being one - otherwise it reads as a button somebody left in a form. */
.form__blank[b-ffg3mwgp9h] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rk-sp-4);
    margin-bottom: var(--rk-sp-16);
}

.form__label[b-ffg3mwgp9h] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.form__hint[b-ffg3mwgp9h] {
    font-size: var(--rk-fs-2xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

/* ---------------------------------------------------------------------------------------
   THE CELLS.
   --------------------------------------------------------------------------------------- */
.cell--day[b-ffg3mwgp9h] {
    white-space: nowrap;
}

.cell--name[b-ffg3mwgp9h],
.cell--driver[b-ffg3mwgp9h] {
    min-width: 0;
}

.cell__title[b-ffg3mwgp9h] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The zone and the department under the plan name. Two plans called "AM" on one day are told
   apart by this line, and both are legal - the uniqueness rule is per day and per name. */
.cell__tag[b-ffg3mwgp9h] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------------------
   THE PAGER.
   --------------------------------------------------------------------------------------- */
.pager[b-ffg3mwgp9h] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-10) 0 var(--rk-sp-20);
}

.pager__word[b-ffg3mwgp9h] {
    margin-right: auto;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

/* ------------------------------------------------------------------------------------
   THE PROPOSED ORDER. Shown between the toolbar and the stops, so a dispatcher reads the
   summary with the list it is about to rearrange still in view.
   ------------------------------------------------------------------------------------ */
.plan[b-ffg3mwgp9h] {
    margin-top: var(--rk-sp-12);
    padding: var(--rk-sp-12) var(--rk-sp-14);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-accent);
    background: var(--rk-accent-soft);
}
.plan__head[b-ffg3mwgp9h] {
    margin: 0;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}
.plan__sum[b-ffg3mwgp9h] {
    margin: var(--rk-sp-5) 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
}
.plan__warn[b-ffg3mwgp9h] {
    margin: var(--rk-sp-5) 0 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}
.plan__acts[b-ffg3mwgp9h] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6) var(--rk-sp-12);
    margin-top: var(--rk-sp-12);
}

/* ------------------------------------------------------------------------------------
   WHERE THE DAY STARTS AND ENDS. Two lines of prose inside the modal; everything else
   in there is a house control that brings its own styling.
   ------------------------------------------------------------------------------------ */
.anch__lede[b-ffg3mwgp9h] {
    margin: 0 0 var(--rk-sp-12);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
}

.anch__note[b-ffg3mwgp9h] {
    margin: var(--rk-sp-12) 0 0;
    padding: var(--rk-sp-6) var(--rk-sp-12);
    border-left: var(--rk-rail) solid var(--rk-warn);
    background: var(--rk-warn-soft);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
}

/* ------------------------------------------------------------------------------------
   KEEP THIS ORDER FOR THE ROUND (lane OR, 2026-10-28) - one line per round the day holds:
   its name, the days it runs and how many of its sites change place.
   ------------------------------------------------------------------------------------ */
.keep__rounds[b-ffg3mwgp9h] {
    margin: var(--rk-sp-12) 0 0;
    padding: 0;
    list-style: none;
}
.keep__round[b-ffg3mwgp9h] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-5) var(--rk-sp-12);
    align-items: baseline;
    padding: var(--rk-sp-6) 0;
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
}
.keep__runs[b-ffg3mwgp9h],
.keep__count[b-ffg3mwgp9h] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}
/* /Pages/RunStoryPage.razor.rz.scp.css */
/*
    ONE RUN AT A URL.

    Almost nothing, and that is right: the document belongs to RunStory and the story inside
    it to RkRunReview / RkStoryStep. What is left is the breadcrumb.

    ⚠️ THE BREADCRUMB IS RESTATED HERE RATHER THAN SHARED, and that is a property of Blazor
    scoped CSS rather than a choice: the Crumbs slot is markup THIS page writes, so it carries
    this page's scope attribute and no other file's rules can reach it. DispatchCenter and
    JobStory carry the same block for the same reason, from the same tokens, so they cannot
    drift in appearance.
*/

.crumb[b-dusa0yw7er] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    text-decoration: none;
}

.crumb:hover[b-dusa0yw7er] {
    color: var(--rk-accent-ink);
}

.crumb--here[b-dusa0yw7er] {
    color: var(--rk-ink);
    text-transform: none;
    letter-spacing: normal;
}

.crumb__sep[b-dusa0yw7er] {
    margin: 0 var(--rk-sp-5);
    color: var(--rk-line-hard);
}
/* /Pages/SalesDocumentCenter.razor.rz.scp.css */
/*
    THE ESTIMATOR AND THE INVOICE - one component, three routes.

    Layout only, tokens only, no literal colour anywhere - C7. And never
    `background: var(--rk-ink)` with `color: var(--rk-white)`: the dark theme resolves both to
    the same paper colour and the text goes invisible.

    ⚠️ ::deep for any kit class. A Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

/* ---------------------------------------------------------------------------------------
   THE TWO COLUMNS. The rail is the glance - totals, what is owed, what is missing - and it
   reflows UNDER the work on a phone rather than squeezing beside it.
   --------------------------------------------------------------------------------------- */
.doc[b-alkflevak9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--rk-sp-16);
    align-items: start;
    padding-bottom: var(--rk-sp-40);
}

.doc__main[b-alkflevak9] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-14);
    min-width: 0;
}

.doc__rail[b-alkflevak9] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    position: sticky;
    top: var(--rk-sp-16);
    min-width: 0;
}

/* ---------------------------------------------------------------------------------------
   RULING 5 - THE STAMP BLOCK. It reads as RECORDED FACT, not as a form: no control, no edge
   that suggests a field, steel rail. From creation onward customer, site and payer stopped
   being choices.
   --------------------------------------------------------------------------------------- */
.stamped[b-alkflevak9] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-md);
    line-height: var(--rk-lh-sentence);
    color: var(--rk-ink);
}

.stamped__note[b-alkflevak9] {
    margin: var(--rk-sp-8) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE LINE GRID. Measured: a real document averages 6.5 lines and 96.5% carry twenty or
   fewer, with a tail at 589. So this is built BEAUTIFUL AT THREE and merely survives 589 -
   full-height rows, real breathing room, no virtualisation, and no paging a document's own
   lines, which would be absurd.
   --------------------------------------------------------------------------------------- */
.line--part[b-alkflevak9] {
    white-space: nowrap;
}

.line__part[b-alkflevak9] {
    font-family: var(--rk-font-mono);
    font-weight: var(--rk-fw-medium);
}

.line__free[b-alkflevak9] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.line--desc[b-alkflevak9] {
    min-width: 16rem;
}

.cell__title[b-alkflevak9] {
    display: block;
    color: var(--rk-ink);
}

/*
    RULING 3 - WHERE THE LINE CAME FROM, ON THE LINE. There is no warehouse picker on a line
    and there must never be one: a material line inherits its warehouse from its VISIT. So the
    sub-row says which visit answered instead of offering a dropdown.
*/
.line__prov[b-alkflevak9] {
    display: block;
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.line--qty[b-alkflevak9],
.line--money[b-alkflevak9] {
    font-family: var(--rk-font-mono);
    white-space: nowrap;
}

/* C1 - a negative is legal and carries a leading minus, never parentheses. */
.line--money-neg[b-alkflevak9] {
    color: var(--rk-danger-ink);
}

/*
    31.6% OF REAL LINES DO NOT PRINT. That is not an edge case and not something a biller
    should have to open a row to discover, so the marks are permanent and glanceable.
*/
.line--flags[b-alkflevak9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-3);
}

.line__flag[b-alkflevak9] {
    padding: 0 var(--rk-sp-3);
    border: var(--rk-border-hair) solid var(--rk-line);
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.line__flag--derived[b-alkflevak9] {
    color: var(--rk-accent-ink);
}

/* THE OPEN STOCK CHAIN, MADE VISIBLE. Amber, because it is owed rather than wrong. */
.line__flag--owed[b-alkflevak9] {
    color: var(--rk-warn-ink);
}

.line--act[b-alkflevak9] {
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------
   ADDING A LINE.
   --------------------------------------------------------------------------------------- */
.add[b-alkflevak9] {
    margin-top: var(--rk-sp-4);
}

.add__row[b-alkflevak9] {
    display: grid;
    grid-template-columns: minmax(12rem, 2fr) minmax(8rem, 1fr) minmax(6rem, 1fr) minmax(7rem, 1fr);
    gap: var(--rk-sp-8);
    align-items: end;
}

.add__note[b-alkflevak9] {
    margin: var(--rk-sp-10) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   RULING 6 - TAX SPLITS IN TWO, and the two blocks sit side by side so nobody has to
   remember which half came from where. 83.3% of real documents carry three or more rates.
   --------------------------------------------------------------------------------------- */
.tax[b-alkflevak9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--rk-sp-12);
}

.tax__where[b-alkflevak9] {
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.tax__stack[b-alkflevak9] {
    width: 100%;
    border-collapse: collapse;
}

.tax__stack th[b-alkflevak9] {
    padding: var(--rk-sp-3) 0;
    text-align: left;
    font-weight: var(--rk-fw-body);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.tax__stack td[b-alkflevak9] {
    padding: var(--rk-sp-3) 0 var(--rk-sp-3) var(--rk-sp-10);
    text-align: right;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

/*
    🛑 NULL IS "NOT CALCULATED YET" AND IS NOT 0.00. A zero that means "not yet" is the same
    lie as a blank price, so the screen says which it is in words.
*/
.tax__pending[b-alkflevak9] {
    margin: var(--rk-sp-10) 0 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.tax__exempt[b-alkflevak9] {
    margin: 0 0 var(--rk-sp-4);
    font-size: var(--rk-fs-md);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-warn-ink);
}

/* ---------------------------------------------------------------------------------------
   NOTES AND HISTORY.
   --------------------------------------------------------------------------------------- */
.notes[b-alkflevak9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
}

.note[b-alkflevak9] {
    padding: var(--rk-sp-10);
    border-left: var(--rk-rail);
    background: var(--rk-card);
}

.note__body[b-alkflevak9] {
    margin: 0;
    white-space: pre-wrap;
    color: var(--rk-ink);
}

.note__who[b-alkflevak9] {
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

/* The instant inherits the row's size rather than .rk-num's global --rk-fs-lg, which would
   make the timestamp twice the size of the name beside it. Same trap as .send__log-figure. */
.note__when[b-alkflevak9] {
    font-size: var(--rk-fs-2xs);
}

/* A pinned note is held at the top of the record, so it gets the accent rail rather than the
   neutral one - the only visual difference, because it is the same kind of thing. */
.note--pinned[b-alkflevak9] {
    border-left-color: var(--rk-accent);
}

.note__acts[b-alkflevak9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
    margin-top: var(--rk-sp-8);
}

.note__compose[b-alkflevak9] {
    margin-top: var(--rk-sp-12);
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.hist[b-alkflevak9],
.glance[b-alkflevak9] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--rk-sp-4) var(--rk-sp-10);
    margin: 0;
}

.hist dt[b-alkflevak9],
.glance dt[b-alkflevak9] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: center;
}

.hist dd[b-alkflevak9],
.glance dd[b-alkflevak9] {
    margin: 0;
    text-align: right;
    color: var(--rk-ink);
}

.glance__total[b-alkflevak9] {
    padding-top: var(--rk-sp-6);
    border-top: var(--rk-border-hair) solid var(--rk-line);
    font-size: var(--rk-fs-md);
}

.glance__note[b-alkflevak9] {
    margin: var(--rk-sp-10) 0 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

/*
    RULING 4 - THE SEND PATH DOES NOT EXIST AND THE RAIL SAYS SO. It is deliberately quiet: a
    gap stated is not an alarm, and dressing it in danger colours would teach people to ignore
    danger colours.
*/
.rail__gap[b-alkflevak9] {
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.rail__gap:last-child[b-alkflevak9] {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------------------
   THE CONFIRMS. Decision 47a: the challenge restates the ACT and its BLAST RADIUS, because
   an OTP or a click proves presence, not comprehension.
   --------------------------------------------------------------------------------------- */
.confirm__lede[b-alkflevak9] {
    margin: 0 0 var(--rk-sp-10);
    max-width: var(--rk-measure);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink);
}

.confirm__warn[b-alkflevak9] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-warn-ink);
}

@media (max-width: 62rem) {
    .doc[b-alkflevak9] {
        grid-template-columns: minmax(0, 1fr);
    }

    .doc__rail[b-alkflevak9] {
        position: static;
    }

    .add__row[b-alkflevak9] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------------------------
   ONE LINE'S EVIDENCE, opened underneath the grid.

   Kirk: "Make sure estimates can also include photos on the lines and in the quote they can
   attach!!" A photo of the site belongs to the DOCUMENT; a photo of the cracked part belongs
   to the LINE asking to be paid for replacing it.

   The rail is the same accent the add-a-line card uses, because both are "this is the thing
   you are working on right now" rather than part of the list above.
   --------------------------------------------------------------------------------------- */
.linefiles[b-alkflevak9] {
    margin: var(--rk-sp-12) 0 var(--rk-sp-20);
    padding: var(--rk-sp-12) var(--rk-sp-16) var(--rk-sp-16);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-sp-3) solid var(--rk-accent);
    background: var(--rk-card);
}

.linefiles__head[b-alkflevak9] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rk-sp-12);
    margin-bottom: var(--rk-sp-8);
}

/* The whole description, wrapping - the grid above already ellipsizes it, and the point of
   opening a line is to be sure which one you are attaching to. */
.linefiles__what[b-alkflevak9] {
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   PUTTING IT IN FRONT OF A CUSTOMER. The rendered file, then who it goes to.
   --------------------------------------------------------------------------------------- */
.send__file[b-alkflevak9] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rk-sp-8);
    margin: var(--rk-sp-10) 0 var(--rk-sp-8);
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border: var(--rk-border-hair) solid var(--rk-line);
    background: var(--rk-paper);
}

/* Wraps rather than ellipsing - the file name carries the customer's name and the document
   number, and half of it is not worth showing. */
.send__name[b-alkflevak9] {
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
    word-break: break-word;
}

.send__meta[b-alkflevak9] {
    flex: 0 0 auto;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.send__to[b-alkflevak9] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-12);
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

/* ---------------------------------------------------------------------------------------
   THE DELIVERY LOG - every attempt, including the ones that bounced.

   🛑 A FAILED ROW IS MARKED BY A RAIL AND NOT BY COLOURED TEXT. The failure reason is
   whatever the mail server said and is often a bare code; setting it in danger ink makes a
   routine 550 read as an alarm, while an estimator scanning the list needs to spot WHICH
   attempt failed at a glance. So the rail carries the signal and the words stay readable.
   --------------------------------------------------------------------------------------- */
.send__log[b-alkflevak9] {
    margin-top: var(--rk-sp-14);
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

/* The page's own micro-head idiom, copied rather than invented: --rk-track-2xs is the
   letter-spacing token this design system actually ships. */
.send__log-head[b-alkflevak9] {
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.send__log-list[b-alkflevak9] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.send__log-row[b-alkflevak9] {
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-sp-3) solid var(--rk-ok);
    background: var(--rk-paper);
}

.send__log-row--failed[b-alkflevak9] {
    border-left-color: var(--rk-danger);
}

.send__log-top[b-alkflevak9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-8);
}

.send__log-when[b-alkflevak9] {
    flex: 0 0 auto;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

/* The address wraps rather than ellipsing - half an address identifies nobody. */
.send__log-to[b-alkflevak9] {
    margin-top: var(--rk-sp-4);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
    word-break: break-word;
}

.send__log-subject[b-alkflevak9] {
    margin-top: var(--rk-sp-2);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* Verbatim transport text. Readable ink, not alarm ink - see the block header. */
.send__log-why[b-alkflevak9] {
    margin-top: var(--rk-sp-4);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
    word-break: break-word;
}

.send__log-file[b-alkflevak9] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
    margin-top: var(--rk-sp-6);
}

.send__log-name[b-alkflevak9] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    word-break: break-word;
}

.send__log-meta[b-alkflevak9] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

/* The bytes we sent are gone. Worth seeing - decision 52 makes that file the record. */
.send__log-gone[b-alkflevak9] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-danger-ink);
}

.send__log-metric[b-alkflevak9],
.send__log-viewed[b-alkflevak9] {
    margin-top: var(--rk-sp-4);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* .rk-num sets font-size: --rk-fs-lg globally. Scoped CSS adds a [b-xxxx] attribute, so this
   beats it on specificity and the figure sits at the size of its own sentence. */
.send__log-figure[b-alkflevak9] {
    font-size: var(--rk-fs-xs);
}

.send__log-viewed--none[b-alkflevak9] {
    font-style: italic;
}
/* /Pages/SelectCompany.razor.rz.scp.css */
/*
    THE COMPANY PICKER.

    Layout only, tokens only, no literal colour.

    NARROWER THAN THE APP COLUMN, for the same reason the sign-in gate is: this screen holds
    two or three choices and nothing else, and a company card stretched across a 1280px
    desktop is a tap target with a quarter-mile of empty paper beside it. 520px is the phone
    column, which is the widest a single stack of choices should ever be.

    ::deep for anything inside a kit control - a Class passed to RkCard lands on THAT
    component's scoped element.
*/

.pick[b-9q919o8c3o] {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
}

.pick__list[b-9q919o8c3o] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-14);
    margin-bottom: var(--rk-sp-20);
}

/* ---------------------------------------------------------------------------------------
   ONE COMPANY.
   --------------------------------------------------------------------------------------- */

/*
    THE CODE IS THE IDENTITY, so it gets the display face. CHARLIES is what staff say out
    loud and what sign_in's companyCode matches; the legal name underneath is for the one
    time a year somebody has to be sure which entity they are in.
*/
.pick__code[b-9q919o8c3o] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-4xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-3xl);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.pick__name[b-9q919o8c3o] {
    margin: 0;
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE ESCAPE. A sentence and not a button - RkButtonVariant.Link is styled as underlined
   prose precisely so a rare exit does not read as a second action competing with the
   choices above it.
   --------------------------------------------------------------------------------------- */
.pick__foot[b-9q919o8c3o] {
    display: flex;
    justify-content: center;
    padding: var(--rk-sp-20) 0 var(--rk-sp-28);
}
/* /Pages/SettingsPeople.razor.rz.scp.css */
/*
    PEOPLE AND LOGINS - decision 53.

    Two rules and nothing else, because a screen that needs its own stylesheet to say what the
    control kit already says is a screen drifting away from it.

    EVERY VALUE IS A TOKEN. No raw colour, size, radius or shadow anywhere outside
    rk-tokens.css - and --rk-ink-soft is the declared name for secondary text, which flips
    correctly in the dark theme. A hard-coded grey here would be invisible on paper-dark.
*/

/*
    THE EMAIL UNDER THE NAME. It is the IDENTITY - decision 44 - so it belongs in the person
    cell rather than in a column of its own, where a narrow window would push it off screen
    and take the only unambiguous handle with it.
*/
.rk-sub[b-nzyfc4ux6n] {
    display: block;
    margin-top: var(--rk-sp-2);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

/*
    THE OWED LIST inside its notice. ::deep because the <ul> is written into RkNotice's
    ChildContent, so it carries THIS component's scope attribute while the element around it
    carries RkNotice's - a plain selector here silently matches nothing.
*/
[b-nzyfc4ux6n] ul {
    margin: var(--rk-sp-6) 0 0;
    padding-left: var(--rk-sp-18);
}
/* /Pages/Setup.razor.rz.scp.css */
/*
    THE SYSTEM LANDING PAGE.

    Layout only, tokens only, no literal colour anywhere - a raw hex fails the build.

    ⚠️ ::deep for any kit class. A Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.

    ⚠️ NOTHING HERE PAIRS --rk-ink WITH --rk-white. The dark theme resolves both to the same
    paper colour, giving a 1:1 contrast ratio and invisible text. That shipped once. Permanent
    dark chrome is --rk-chrome-bg / --rk-chrome-ink, which do not flip; this page needs neither
    and uses the ambient surface throughout.
*/

.group[b-ycc0davyrg] {
    margin: var(--rk-sp-24) 0 var(--rk-sp-16);
}

.group__word[b-ycc0davyrg] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.group__lede[b-ycc0davyrg] {
    margin: var(--rk-sp-3) 0 var(--rk-sp-12);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE AREA GRID.

   One column on a phone, two from tablet up. Deliberately NOT three on a wide screen: the
   "governs" line is the whole point of this page and it needs a readable measure, which a
   third column takes away.
   --------------------------------------------------------------------------------------- */
.areas[b-ycc0davyrg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-10);
}

@media (min-width: 860px) {
    .areas[b-ycc0davyrg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------------------
   ONE AREA.

   The anchor and the plain block share every rule except the interaction, so a built area
   and an unbuilt one sit on the same baseline and read as one list. The cut corner is the
   kit's card idiom - --rk-corner is the shared measurement, not a number typed twice.
   --------------------------------------------------------------------------------------- */
.area[b-ycc0davyrg] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    padding: var(--rk-sp-12) var(--rk-sp-14);
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line);
    border-radius: var(--rk-radius-sm);
    clip-path: polygon(
        0 0,
        calc(100% - var(--rk-corner)) 0,
        100% var(--rk-corner),
        100% 100%,
        0 100%);
    color: var(--rk-ink);
    text-decoration: none;
}

/* A block that is not a destination is quieter than one that is - that is the ONLY signal
   distinguishing them at rest, because a greyed-out link invites a click and answers with
   nothing. */
.area:not(.area--live)[b-ycc0davyrg] {
    background: none;
    border-style: dashed;
}

.area--live[b-ycc0davyrg] {
    cursor: pointer;
    transition: border-color var(--rk-dur-ui) var(--rk-ease),
                box-shadow var(--rk-dur-ui) var(--rk-ease);
}

.area--live:hover[b-ycc0davyrg],
.area--live:focus-visible[b-ycc0davyrg] {
    border-color: var(--rk-accent-ink);
    box-shadow: var(--rk-shadow-card);
}

.area__head[b-ycc0davyrg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-6);
}

.area__word[b-ycc0davyrg] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
}

.area--live .area__word[b-ycc0davyrg] {
    color: var(--rk-accent-ink);
}

.area__governs[b-ycc0davyrg] {
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* THE CAPABILITY NAMES, VERBATIM AND IN MONO. They are the snake_case names of the REST
   routes and the MCP tools both, so somebody wiring an agent can read them straight off the
   screen - and seeing them makes "doors, no screen" a concrete claim rather than an excuse. */
.area__doors[b-ycc0davyrg] {
    font-size: var(--rk-fs-3xs);
    line-height: var(--rk-lh-snug);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink-soft);
    opacity: 0.75;
    overflow-wrap: anywhere;
}
/* /Pages/SetupAgreementTypes.razor.rz.scp.css */
/*
    THE PLAN CATALOG.

    Layout only, tokens only, no literal colour anywhere - there is no data-coloured element on
    this screen at all, unlike the visit-status ladder it borrows its shape from.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

.bar[b-ury1j432pc] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-ury1j432pc] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

/* RkField carries a bottom margin for a stacked form. In a one-line bar that margin leaves the
   GO button sitting below the input it belongs to. */
.bar[b-ury1j432pc]  .rk-field {
    margin-bottom: 0;
}

.bar[b-ury1j432pc]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.6);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   THE CREATE MADLIB. The sentence carries the two CHOICES - the market and whether its
   visits may be pushed - and the card under it carries the TRANSCRIPTION.
   --------------------------------------------------------------------------------------- */
.make[b-ury1j432pc] {
    margin-bottom: var(--rk-sp-20);
}

.typed[b-ury1j432pc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .typed[b-ury1j432pc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .typed[b-ury1j432pc] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.typed[b-ury1j432pc]  .typed--span {
    grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------------------
   THE OPEN PLAN. It sits ABOVE the list rather than replacing it - picking the right row out
   of a short catalog is a click and a glance rather than a click and a back button.
   --------------------------------------------------------------------------------------- */
.detail[b-ury1j432pc] {
    margin-bottom: var(--rk-sp-20);
}

.head[b-ury1j432pc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    min-width: 0;
}

.head__who[b-ury1j432pc] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.head__name[b-ury1j432pc] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

.head__handle[b-ury1j432pc] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.head__marks[b-ury1j432pc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}

/* Pushed right on a desk, wrapped underneath on a phone - margin-left auto does both. */
.head__acts[b-ury1j432pc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
    margin-left: auto;
}

/* THE REFUSAL, IN THE OPEN. A tooltip on a disabled control is not a sentence anybody reads. */
.head__why[b-ury1j432pc] {
    flex: 1 1 100%;
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.detail__what[b-ury1j432pc] {
    margin: var(--rk-sp-12) 0 var(--rk-sp-4);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
}

/* ---- THE THREE GROUPS -------------------------------------------------------------------
   The window, the term and the money. Three groups rather than one long list because they
   answer three different people's questions - a dispatcher's, a salesperson's and a biller's.
   --------------------------------------------------------------------------------------- */
.groups[b-ury1j432pc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-20);
    margin-top: var(--rk-sp-16);
}

@media (min-width: 1100px) {
    .groups[b-ury1j432pc] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.group[b-ury1j432pc] {
    min-width: 0;
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.group__word[b-ury1j432pc] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

.group__lede[b-ury1j432pc] {
    margin: var(--rk-sp-4) 0 var(--rk-sp-10);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.facts[b-ury1j432pc] {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: var(--rk-sp-8) var(--rk-sp-14);
    margin: 0;
}

.facts--tail[b-ury1j432pc] {
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
    grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
}

.facts dt[b-ury1j432pc] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.facts dd[b-ury1j432pc] {
    margin: 0;
    min-width: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

.facts__value[b-ury1j432pc] {
    display: block;
    font-weight: var(--rk-fw-semibold);
}

.facts__why[b-ury1j432pc] {
    display: block;
    margin-top: var(--rk-sp-2);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

@media (max-width: 520px) {
    .facts[b-ury1j432pc],
    .facts--tail[b-ury1j432pc] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--rk-sp-2) 0;
    }

    .facts dd[b-ury1j432pc] {
        margin-bottom: var(--rk-sp-8);
    }
}

/* ---------------------------------------------------------------------------------------
   THE EDITOR. Two columns inside a Wide dialog, one on a phone.
   --------------------------------------------------------------------------------------- */
.form[b-ury1j432pc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
}

@media (min-width: 640px) {
    .form[b-ury1j432pc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form[b-ury1j432pc]  .form--span {
    grid-column: 1 / -1;
}

.form__word[b-ury1j432pc] {
    margin: var(--rk-sp-16) 0 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

.form__lede[b-ury1j432pc] {
    margin: var(--rk-sp-4) 0 var(--rk-sp-10);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.refusals[b-ury1j432pc] {
    margin: 0;
    padding-left: var(--rk-sp-16);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
}

.refusals li + li[b-ury1j432pc] {
    margin-top: var(--rk-sp-6);
}

/* ---------------------------------------------------------------------------------------
   THE CELLS.
   --------------------------------------------------------------------------------------- */
.cell--name[b-ury1j432pc] {
    min-width: 0;
}

.cell__title[b-ury1j432pc] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow-wrap: anywhere;
}

.cell__tag[b-ury1j432pc] {
    display: block;
    margin-top: var(--rk-sp-2);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

/* The three summary columns are prose, not figures - they wrap rather than truncate, because a
   half-shown "on the day - no slack either side" is worse than two lines. */
.cell--soft[b-ury1j432pc] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}
/* /Pages/SetupBoards.razor.rz.scp.css */
/*
    DISPATCH BOARDS - the saved definition.

    Layout only, tokens only, no literal colour. Same bar and table shape as every other list
    on this platform; the detail region below is this screen's own and is built out of kit
    cards rather than a second card idiom.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here matches nothing.
*/

.bar[b-txutsia4q3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-txutsia4q3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.bar[b-txutsia4q3]  .rk-field {
    margin-bottom: 0;
}

.bar[b-txutsia4q3]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.8);
    max-width: 100%;
}

.cell__title[b-txutsia4q3] {
    display: block;
    font-weight: var(--rk-fw-semibold);
}

.cell__tag[b-txutsia4q3] {
    display: block;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: var(--rk-measure);
}

.quiet[b-txutsia4q3] {
    color: var(--rk-ink-soft);
    font-style: italic;
}

/* ---------------------------------------------------------------------------------------
   THE DETAIL REGION
   --------------------------------------------------------------------------------------- */

.detail[b-txutsia4q3] {
    margin-top: var(--rk-sp-20);
    padding-top: var(--rk-sp-14);
    border-top: var(--rk-border-card) solid var(--rk-line-hard);
}

.detail__head[b-txutsia4q3] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-10);
    margin-bottom: var(--rk-sp-12);
}

.detail__title[b-txutsia4q3] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    margin: 0;
    margin-right: auto;
    color: var(--rk-ink);
}

.detail__acts[b-txutsia4q3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
}

.detail__save[b-txutsia4q3] {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--rk-sp-10);
}

.form[b-txutsia4q3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rk-blank-max), 1fr));
    gap: 0 var(--rk-sp-14);
    align-items: start;
}

.form[b-txutsia4q3]  .span {
    grid-column: 1 / -1;
}

.checks[b-txutsia4q3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rk-blank-max), 1fr));
    gap: var(--rk-sp-8) var(--rk-sp-14);
    padding-top: var(--rk-sp-6);
}

.lead[b-txutsia4q3] {
    margin: 0;
    margin-right: auto;
    max-width: var(--rk-measure);
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
}

.lanes__head[b-txutsia4q3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--rk-sp-10);
    padding-bottom: var(--rk-sp-12);
}

/* ---------------------------------------------------------------------------------------
   THE THREE FILTER SETS
   --------------------------------------------------------------------------------------- */

.scopes[b-txutsia4q3] {
    display: grid;
    gap: var(--rk-sp-12);
}

/* THE SENTENCE, NOT A COUNT. Zero rows means EVERYTHING, so this line carries the whole
   meaning of the card and is weighted to say so. */
.scope__state[b-txutsia4q3] {
    margin: 0 0 var(--rk-sp-10);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
    line-height: var(--rk-lh-snug);
}

.scope__aside[b-txutsia4q3] {
    margin: 0 0 var(--rk-sp-10);
    max-width: var(--rk-measure);
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
}

.pills[b-txutsia4q3] {
    list-style: none;
    margin: 0 0 var(--rk-sp-12);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
}

.pill[b-txutsia4q3] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-6);
    padding: var(--rk-sp-4) var(--rk-sp-6) var(--rk-sp-4) var(--rk-sp-10);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-field);
}

.pill__word[b-txutsia4q3] {
    font-family: var(--rk-font-mono);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.pill__sub[b-txutsia4q3] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.adder[b-txutsia4q3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
}

.adder[b-txutsia4q3]  .rk-field {
    margin-bottom: 0;
    min-width: var(--rk-blank-max);
}

/* ---------------------------------------------------------------------------------------
   THE LANE EDITOR
   --------------------------------------------------------------------------------------- */

.mode[b-txutsia4q3] {
    display: grid;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-10) 0;
    border-top: var(--rk-border-hair) dashed var(--rk-line);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.pick[b-txutsia4q3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
}

.pick[b-txutsia4q3]  .rk-field {
    margin-bottom: 0;
    flex: 1 1 var(--rk-blank-max);
}

.picks[b-txutsia4q3] {
    list-style: none;
    margin: var(--rk-sp-10) 0;
    padding: 0;
    max-height: var(--rk-sheet-h);
    overflow-y: auto;
}

/*
    HONEST COUNTS on the lane's candidate list. "Showing 25 of 737 - type to narrow", and
    nothing at all when the list is complete: a silently truncated list is the same lie as an
    empty one, and this picker used to render neither.
*/
.picks__count[b-txutsia4q3] {
    margin: var(--rk-sp-10) 0 0;
    padding: var(--rk-sp-2) var(--rk-sp-8);
    background: var(--rk-warn-soft);
    border-left: var(--rk-rail) solid var(--rk-warn);
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-semibold);
    font-size: var(--rk-fs-md);
    letter-spacing: var(--rk-track-lg);
    line-height: var(--rk-lh-tight);
    text-transform: uppercase;
    color: var(--rk-warn-ink);
}
/* /Pages/SetupBooking.razor.rz.scp.css */
/* ===========================================================================================
   SETUP > ONLINE BOOKING (lane AR, 2026-10-13). Every value is a token from rk-tokens.css.
   =========================================================================================== */

.bk__quiet[b-vn5grhgpq2] {
    margin: var(--rk-sp-8) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.bk__lede[b-vn5grhgpq2] {
    margin: 0 0 var(--rk-sp-10);
}

.bk__link[b-vn5grhgpq2] {
    color: var(--rk-accent-ink);
    word-break: break-all;
}

.bk__facts[b-vn5grhgpq2] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bk__facts li[b-vn5grhgpq2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
}

.bk__fword[b-vn5grhgpq2] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.bk__fsay[b-vn5grhgpq2] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
}

.bk__ready[b-vn5grhgpq2] {
    margin: var(--rk-sp-10) 0 0;
    padding-left: var(--rk-sp-18);
    font-size: var(--rk-fs-sm);
    color: var(--rk-warn-ink);
}

.bk__snippet[b-vn5grhgpq2] {
    margin: var(--rk-sp-6) 0 0;
    padding: var(--rk-sp-10) var(--rk-sp-12);
    border: var(--rk-border);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-field);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    white-space: pre-wrap;
    word-break: break-all;
}

.bk__checks[b-vn5grhgpq2] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
}

.bk__grid[b-vn5grhgpq2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--rk-sp-10);
    margin-top: var(--rk-sp-10);
}

.bk__acts[b-vn5grhgpq2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
    margin-top: var(--rk-sp-12);
}

.bk__services[b-vn5grhgpq2],
.bk__recent[b-vn5grhgpq2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--rk-sp-6);
}

.bk__service[b-vn5grhgpq2],
.bk__booking[b-vn5grhgpq2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8) var(--rk-sp-12);
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border: var(--rk-border);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-card);
}

.bk__service.is-off[b-vn5grhgpq2] {
    opacity: 0.6;
}

.bk__code[b-vn5grhgpq2],
.bk__job[b-vn5grhgpq2] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
}

.bk__job[b-vn5grhgpq2] {
    color: var(--rk-accent-ink);
}

.bk__name[b-vn5grhgpq2],
.bk__who[b-vn5grhgpq2] {
    font-weight: var(--rk-fw-semibold);
}

.bk__desc[b-vn5grhgpq2],
.bk__when[b-vn5grhgpq2],
.bk__by[b-vn5grhgpq2] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.bk__rowacts[b-vn5grhgpq2] {
    margin-left: auto;
    display: flex;
    gap: var(--rk-sp-4);
}
/* /Pages/SetupCharges.razor.rz.scp.css */
/* THE CHARGE CATALOG - tokens only. */

.grid[b-v6trs2zyot] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0 var(--rk-sp-12);
    align-items: end;
}

.checks[b-v6trs2zyot] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--rk-sp-4) var(--rk-sp-12);
    margin: var(--rk-sp-8) 0;
}

.section[b-v6trs2zyot] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    margin: var(--rk-sp-16) 0 var(--rk-sp-8);
}

.vrates[b-v6trs2zyot] {
    width: 100%;
    border-collapse: collapse;
    margin: var(--rk-sp-8) 0;
    font-size: var(--rk-fs-sm);
}

.vrates th[b-v6trs2zyot],
.vrates td[b-v6trs2zyot] {
    text-align: left;
    padding: var(--rk-sp-4) var(--rk-sp-6);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.vrates .rk-num[b-v6trs2zyot] {
    text-align: right;
}

.actions[b-v6trs2zyot] {
    display: flex;
    justify-content: flex-end;
    gap: var(--rk-sp-8);
}
/* /Pages/SetupCompany.razor.rz.scp.css */
/* ===========================================================================================
   THE COMPANY'S LETTERHEAD.

   🛑 THE PREVIEW IS SET LIKE A DOCUMENT AND NOT LIKE A FORM SUMMARY, on purpose. It is the
   only place in the product where somebody sees what a CUSTOMER sees, and a preview that
   looked like the rest of the settings page would not do that job.
   =========================================================================================== */

.co__quiet[b-im2f9wa5an] {
    margin: var(--rk-sp-8) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.co__preview[b-im2f9wa5an] {
    padding: var(--rk-sp-14) var(--rk-sp-16);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-sp-3) solid var(--rk-accent);
    background: var(--rk-paper);
}

/* The logo, the height it prints at on paper - three quarters of an inch reads as about
   four and a half lines of body text on screen. Never stretched, never cropped. */
.co__logo[b-im2f9wa5an] {
    display: block;
    max-width: 100%;
    max-height: calc(var(--rk-sp-24) * 3);
    margin: 0 0 var(--rk-sp-8);
    object-fit: contain;
}

.co__logo-acts[b-im2f9wa5an] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
    margin-top: var(--rk-sp-12);
}

.co__logo-acts .co__quiet[b-im2f9wa5an] {
    flex-basis: 100%;
    margin-top: 0;
}

/* THE PICKER WEARS THE GHOST BUTTON. A native file input draws "Choose File - No file chosen"
   in the browser's own chrome beside a kit button, which reads as two different products. The
   input stays in the DOM and in the tab order (the label forwards the click and the keyboard);
   only its box is hidden. The rules mirror RkButton's .rk-btn--ghost, whose styles are scoped
   and cannot be borrowed by class name. */
.co__pick[b-im2f9wa5an] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--rk-control-h);
    padding: var(--rk-sp-8) var(--rk-sp-18);
    border: var(--rk-border) solid var(--rk-ink);
    background: transparent;
    color: var(--rk-ink);
    font-family: var(--rk-font-display);
    font-weight: var(--rk-fw-bold);
    font-size: var(--rk-fs-2xl);
    letter-spacing: var(--rk-track-2xl);
    line-height: var(--rk-lh-flat);
    text-transform: uppercase;
    cursor: pointer;
}

.co__pick:hover[b-im2f9wa5an] {
    background: var(--rk-hover-ghost);
}

.co__pick:focus-within[b-im2f9wa5an] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.co__pick[b-im2f9wa5an]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* The company's own name, set the way a letterhead sets it. */
.co__name[b-im2f9wa5an] {
    margin: 0 0 var(--rk-sp-4);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-tight);
    color: var(--rk-ink);
}

.co__line[b-im2f9wa5an] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    word-break: break-word;
}

/* The editors. Two columns where there is room, one on a phone. */
.co__grid[b-im2f9wa5an] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--rk-sp-10);
    margin-top: var(--rk-sp-10);
}

.co__acts[b-im2f9wa5an] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-12);
}

/* ---------------------------------------------------------------------------------------
   THE LICENCES.

   ⚠️ A RETIRED ONE IS DIMMED AND NEVER HIDDEN. It is kept precisely so somebody holding a
   document that printed it can find out what it was; hiding it would defeat the reason it
   survives at all.
   --------------------------------------------------------------------------------------- */
.co__licences[b-im2f9wa5an] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    margin: var(--rk-sp-10) 0 0;
    padding: 0;
    list-style: none;
}

.co__lic[b-im2f9wa5an] {
    padding: var(--rk-sp-10);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-sp-3) solid var(--rk-line);
    background: var(--rk-card);
}

/* Live and printing gets the accent; the rail is the only signal, so a scan finds it. */
.co__lic:not(.co__lic--retired)[b-im2f9wa5an] {
    border-left-color: var(--rk-accent);
}

.co__lic--retired[b-im2f9wa5an] {
    opacity: 0.6;
}

/* 🛑 AN EXPIRED REGULATORY LICENCE. A jurisdiction can suspend this one, so it is the single
   thing on the page that earns danger ink. A bond lapsing does not. */
.co__lic--urgent[b-im2f9wa5an] {
    border-left-color: var(--rk-danger);
}

.co__lictop[b-im2f9wa5an] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
}

.co__lickind[b-im2f9wa5an] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* The number is the thing. Mono, because it is read aloud and checked character by character
   against a certificate. */
.co__licnum[b-im2f9wa5an] {
    margin-top: var(--rk-sp-4);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
    word-break: break-word;
}

.co__licmeta[b-im2f9wa5an] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-4);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.co__expiry--urgent[b-im2f9wa5an] {
    color: var(--rk-danger-ink);
}

.co__licacts[b-im2f9wa5an] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
    margin-top: var(--rk-sp-8);
}

.co__licform[b-im2f9wa5an] {
    margin-top: var(--rk-sp-12);
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}
/* /Pages/SetupDataExchange.razor.rz.scp.css */
/* ------------------------------------------------------------------------------------
   IMPORT AND EXPORT.

   Two panes, stacked, because the two jobs are done by different people at different
   times - a one-off load at cutover, and an export somebody takes to a meeting. Side by
   side they would compete for the same glance.
   ------------------------------------------------------------------------------------ */

.pane[b-z4k7dx2j5o] {
    margin-top: var(--rk-sp-18);
    padding: var(--rk-sp-14);
    border: var(--rk-border-hair) solid var(--rk-line);
    background: var(--rk-card);
}

.pane__word[b-z4k7dx2j5o] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.pane__lede[b-z4k7dx2j5o] {
    margin: var(--rk-sp-6) 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
}

.fields[b-z4k7dx2j5o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--rk-sp-12);
    margin-top: var(--rk-sp-14);
}

/* The file picker is a bare <InputFile> on purpose: RkFileDrop is the PHOTO path - camera,
   resize, quality, max dimension - and none of that belongs anywhere near a spreadsheet. */
.pick[b-z4k7dx2j5o] {
    margin-top: var(--rk-sp-14);
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.pick__word[b-z4k7dx2j5o] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    margin-bottom: var(--rk-sp-5);
}

.pick__hint[b-z4k7dx2j5o] {
    margin: var(--rk-sp-5) 0 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.acts[b-z4k7dx2j5o] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6) var(--rk-sp-12);
    margin-top: var(--rk-sp-14);
}

/* A link to the people loader, dressed as the kit's ghost button - it navigates, so it is an
   anchor (middle-click, copy link) rather than a button with a handler. */
.pane__go[b-z4k7dx2j5o] {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--rk-control-md);
    padding-inline: var(--rk-sp-14);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--rk-ink);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    background: var(--rk-card);
}

.pane__go:hover[b-z4k7dx2j5o] {
    background: var(--rk-hover-ghost);
}

/* ------------------------------------------------------------------------------------
   THE REPORT. An accent rail rather than a success or danger colour: a dry run is
   neither, and colouring it green would read as "done" on the one panel whose entire
   point is that nothing has happened yet.
   ------------------------------------------------------------------------------------ */
.report[b-z4k7dx2j5o] {
    margin-top: var(--rk-sp-14);
    padding: var(--rk-sp-12) var(--rk-sp-14);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-accent);
    background: var(--rk-accent-soft);
}

.report__head[b-z4k7dx2j5o] {
    margin: 0;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.report__msg[b-z4k7dx2j5o] {
    margin: var(--rk-sp-5) 0 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
}

.report__warn[b-z4k7dx2j5o] {
    margin: var(--rk-sp-12) 0 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.facts[b-z4k7dx2j5o] {
    display: grid;
    grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
    gap: var(--rk-sp-5) var(--rk-sp-14);
    margin: var(--rk-sp-12) 0 0;
}

.facts dt[b-z4k7dx2j5o] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.facts dd[b-z4k7dx2j5o] {
    margin: 0;
    min-width: 0;
    font-size: var(--rk-fs-sm);
}

/* Every failing row, by the number Excel shows - so somebody can open the file and go
   straight there instead of counting. */
.rows[b-z4k7dx2j5o] {
    width: 100%;
    margin-top: var(--rk-sp-12);
    border-collapse: collapse;
    font-size: var(--rk-fs-xs);
}

.rows th[b-z4k7dx2j5o] {
    text-align: left;
    padding: var(--rk-sp-5) var(--rk-sp-6);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.rows td[b-z4k7dx2j5o] {
    padding: var(--rk-sp-5) var(--rk-sp-6);
    vertical-align: top;
    line-height: var(--rk-lh-snug);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
    overflow-wrap: anywhere;
}
/* /Pages/SetupEmail.razor.rz.scp.css */
/* ===========================================================================================
   SETUP > EMAIL. Every value is a token from rk-tokens.css.
   =========================================================================================== */

.em__quiet[b-o3ku2szhf6] {
    margin: var(--rk-sp-8) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.em__lede[b-o3ku2szhf6] {
    margin: 0 0 var(--rk-sp-10);
}

/* Where mail leaves from now - four facts, two columns where there is room. */
.em__now[b-o3ku2szhf6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--rk-sp-10) var(--rk-sp-16);
    margin: 0 0 var(--rk-sp-8);
}

.em__now dt[b-o3ku2szhf6] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.em__now dd[b-o3ku2szhf6] {
    margin: var(--rk-sp-2) 0 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
    word-break: break-word;
}

.em__presets[b-o3ku2szhf6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    margin-bottom: var(--rk-sp-10);
}

.em__grid[b-o3ku2szhf6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--rk-sp-10);
    margin-top: var(--rk-sp-10);
}

.em__checks[b-o3ku2szhf6] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
    margin-top: var(--rk-sp-12);
}

.em__acts[b-o3ku2szhf6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-12);
}

.em__test[b-o3ku2szhf6] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
}

.em__testto[b-o3ku2szhf6] {
    flex: 1 1 18rem;
    max-width: 28rem;
}
/* /Pages/SetupEmployerCosts.razor.rz.scp.css */
/* /setup/employer-costs - tokens only; phone width wraps, nothing scrolls sideways. */

.ec-page[b-oo3zntueo8] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-16);
}

.kinds[b-oo3zntueo8] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kinds__row[b-oo3zntueo8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-6) var(--rk-sp-12);
    padding: var(--rk-sp-8) 0;
    border-bottom: 1px solid var(--rk-border-hair);
}

.kinds__what[b-oo3zntueo8] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    flex: 1 1 16rem;
    min-width: 0;
}

.kinds__name[b-oo3zntueo8] {
    font-weight: var(--rk-fw-semibold);
}

.kinds__help[b-oo3zntueo8] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
    overflow-wrap: anywhere;
}

.kinds__facts[b-oo3zntueo8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
}

.kinds__add[b-oo3zntueo8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--rk-sp-10);
    margin: var(--rk-sp-14) 0 0;
    align-items: end;
}

.kinds__go[b-oo3zntueo8] {
    display: flex;
    align-items: flex-end;
}

.note[b-oo3zntueo8] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
    margin: 0;
}
/* /Pages/SetupFuel.razor.rz.scp.css */
/*
    FUEL SURCHARGES - tokens only. The band matrix uses plain inputs, sized by tokens, so a
    six-by-six grid stays readable on a laptop and scrolls sideways on a phone.
*/

.lede[b-suyf25o7wn] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
    margin: 0 0 var(--rk-sp-10);
    max-width: var(--rk-measure);
}

.row[b-suyf25o7wn] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
}

.row[b-suyf25o7wn]  .row__pick {
    min-width: calc(var(--rk-blank-max) * 1.5);
}

.grid[b-suyf25o7wn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0 var(--rk-sp-12);
    align-items: end;
}

.go[b-suyf25o7wn] {
    padding-bottom: var(--rk-sp-12);
}

.actions[b-suyf25o7wn] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--rk-sp-8);
    margin: var(--rk-sp-8) 0;
}

.section[b-suyf25o7wn] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    margin: var(--rk-sp-20) 0 var(--rk-sp-8);
}

/*
    A PLAIN TABLE SCROLLS INSIDE ITS OWN FRAME, as RkTable's .rk-tablewrap does - at 375 px the
    zone table was 454 px wide and carried the whole page (and its SET button) off the right edge.
    The bar stays visible: hiding it (rk-scroll-x) is for chip rows, not for a table with columns
    beyond the edge.
*/
.plain-wrap[b-suyf25o7wn] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin: var(--rk-sp-8) 0;
}

.plain[b-suyf25o7wn] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--rk-fs-sm);
    margin: 0;
}

.plain th[b-suyf25o7wn],
.plain td[b-suyf25o7wn] {
    text-align: left;
    padding: var(--rk-sp-4) var(--rk-sp-6);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
    vertical-align: middle;
}

.plain .rk-num[b-suyf25o7wn] {
    text-align: right;
}

.cellpick[b-suyf25o7wn] {
    font: inherit;
    color: var(--rk-ink);
    background: var(--rk-field);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-xs);
    padding: var(--rk-sp-2) var(--rk-sp-4);
}

.notes[b-suyf25o7wn] {
    margin: var(--rk-sp-4) 0 0;
    padding-left: var(--rk-sp-16);
}

.matrix-wrap[b-suyf25o7wn] {
    margin: var(--rk-sp-8) 0;
}

.matrix[b-suyf25o7wn] {
    border-collapse: collapse;
    font-size: var(--rk-fs-sm);
}

.matrix th[b-suyf25o7wn],
.matrix td[b-suyf25o7wn] {
    padding: var(--rk-sp-2) var(--rk-sp-4);
    border: var(--rk-border-hair) solid var(--rk-line);
    text-align: center;
}

.range[b-suyf25o7wn] {
    display: flex;
    gap: var(--rk-sp-2);
    align-items: center;
}

.cell[b-suyf25o7wn] {
    width: 7ch;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
    background: var(--rk-field);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-xs);
    padding: var(--rk-sp-2) var(--rk-sp-4);
    text-align: right;
}

.cell--value[b-suyf25o7wn] {
    width: 8ch;
    font-weight: var(--rk-fw-bold);
}

.drop[b-suyf25o7wn] {
    font: inherit;
    color: var(--rk-danger-ink);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0 var(--rk-sp-2);
}

.facts[b-suyf25o7wn] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--rk-sp-4) var(--rk-sp-16);
    margin: var(--rk-sp-10) 0 0;
    font-size: var(--rk-fs-sm);
}

.facts dt[b-suyf25o7wn] {
    color: var(--rk-ink-soft);
}

.facts dd[b-suyf25o7wn] {
    margin: 0;
}

.soft[b-suyf25o7wn] {
    color: var(--rk-ink-soft);
}
/* /Pages/SetupImportPeople.razor.rz.scp.css */
/* ------------------------------------------------------------------------------------
   LOADING PEOPLE FROM A FILE. Five numbered steps, top to bottom, in the order a person
   works: the file, where each column goes, what its values mean, what to assume, then
   check and load. Layout only - every value is a token from rk-tokens.css.

   ⚠️ A 50-COLUMN FILE IS THE CASE THIS IS SHAPED FOR. Way's Samsara export carries fifty
   columns and uses perhaps twelve, so a column is one compact line rather than a card, the
   unused ones fold into a single quiet sentence, and on a phone each line stacks.
   ------------------------------------------------------------------------------------ */

.ip[b-eld7frpwzu] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-16);
    margin-top: var(--rk-sp-14);
}

.ip[b-eld7frpwzu]  .ip__notice {
    margin-block: var(--rk-sp-10);
}

.ip__step[b-eld7frpwzu] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--rk-sp-12);
    align-items: start;
    padding: var(--rk-sp-14);
    background: var(--rk-card);
    border: var(--rk-border-card);
}

/* The permanent dark chrome pair, which does NOT flip with the theme - --rk-ink under
   --rk-white is 1:1 in dark mode and the numeral disappears. */
.ip__num[b-eld7frpwzu] {
    display: grid;
    place-items: center;
    inline-size: var(--rk-control-sm);
    block-size: var(--rk-control-sm);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    color: var(--rk-chrome-ink);
    background: var(--rk-chrome-bg);
}

.ip__body[b-eld7frpwzu] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    min-inline-size: 0;
}

.ip__word[b-eld7frpwzu] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-body);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.ip__hint[b-eld7frpwzu] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
    max-inline-size: var(--rk-measure);
}

.ip__grid[b-eld7frpwzu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--rk-sp-10);
}

/* ------------------------------------------------------------------ the columns */

.ip__cols[b-eld7frpwzu] {
    display: flex;
    flex-direction: column;
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

/* Header and samples on the left, where it goes on the right; stacked on a phone. */
.ip__col[b-eld7frpwzu] {
    display: grid;
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
    gap: var(--rk-sp-8) var(--rk-sp-14);
    padding-block: var(--rk-sp-10);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.ip__colhead[b-eld7frpwzu] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    min-inline-size: 0;
}

.ip__colname[b-eld7frpwzu] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.ip__colfill[b-eld7frpwzu] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.ip__colsample[b-eld7frpwzu] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.ip__targets[b-eld7frpwzu] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
    min-inline-size: 0;
}

.ip__none[b-eld7frpwzu] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

/* One destination: its name, then the label and split boxes it needs, then Remove. */
.ip__target[b-eld7frpwzu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-10);
    padding: var(--rk-sp-6) var(--rk-sp-8);
    background: var(--rk-paper);
    border-left: var(--rk-rail) solid var(--rk-accent);
}

.ip__targetword[b-eld7frpwzu] {
    align-self: center;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink);
    min-inline-size: 9rem;
}

.ip[b-eld7frpwzu]  .ip__sep {
    max-inline-size: 12rem;
}

.ip[b-eld7frpwzu]  .ip__add {
    max-inline-size: 22rem;
}

.ip__ignored[b-eld7frpwzu] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-6) var(--rk-sp-10);
}

/* ------------------------------------------------------------------ the values */

.ip__group[b-eld7frpwzu] {
    display: flex;
    flex-direction: column;
    border-top: var(--rk-border-hair) solid var(--rk-line);
    padding-top: var(--rk-sp-8);
}

.ip__grouphead[b-eld7frpwzu] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-6) var(--rk-sp-8);
    margin-bottom: var(--rk-sp-6);
}

.ip__arrow[b-eld7frpwzu] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.ip__value[b-eld7frpwzu] {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 7rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-10);
    padding: var(--rk-sp-6) var(--rk-sp-8);
    border-left: var(--rk-rail) solid transparent;
}

/* An undecided value wears a rail, not coloured text - it is what makes a row a problem. */
.ip__value--open[b-eld7frpwzu] {
    border-left-color: var(--rk-warn);
    background: var(--rk-warn-soft);
}

.ip__valueword[b-eld7frpwzu] {
    align-self: center;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    overflow-wrap: anywhere;
}

.ip__valuecount[b-eld7frpwzu] {
    align-self: center;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.ip[b-eld7frpwzu]  .ip__valuepick {
    min-inline-size: 0;
}

/* ------------------------------------------------------------------ check and load */

.ip__acts[b-eld7frpwzu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-12);
}

.ip__list[b-eld7frpwzu] {
    margin: 0 0 var(--rk-sp-6);
    padding-inline-start: var(--rk-sp-16);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
}

.ip__details summary[b-eld7frpwzu] {
    cursor: pointer;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.ip__details p[b-eld7frpwzu] {
    margin-top: var(--rk-sp-6);
}

@media (max-width: 640px) {
    .ip__step[b-eld7frpwzu] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ip__col[b-eld7frpwzu] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ip__value[b-eld7frpwzu] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .ip[b-eld7frpwzu]  .ip__valuepick {
        grid-column: 1 / -1;
    }

    .ip__targetword[b-eld7frpwzu] {
        min-inline-size: 0;
        flex-basis: 100%;
    }

    .ip[b-eld7frpwzu]  .ip__sep,
    .ip[b-eld7frpwzu]  .ip__add {
        max-inline-size: none;
        flex-basis: 100%;
    }
}
/* /Pages/SetupMessages.razor.rz.scp.css */
/* ===========================================================================================
   SETUP > CUSTOMER MESSAGES. Every value is a token from rk-tokens.css.

   The words card is two columns where there is room - the list beside the editor - and one on
   a phone, the list first. The preview is a light island: what lands on a customer's phone or
   in their inbox is never dark, whatever theme the office reads it in.
   =========================================================================================== */

.sm__quiet[b-u1swyifpve] {
    margin: var(--rk-sp-4) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.sm__lede[b-u1swyifpve] {
    margin: 0 0 var(--rk-sp-10);
}

.sm__link[b-u1swyifpve] {
    margin-left: var(--rk-sp-6);
    color: var(--rk-accent-ink);
}

/* ---------------------------------------------------------------------- what happens today */

.sm__status[b-u1swyifpve] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sm__fact[b-u1swyifpve] {
    display: grid;
    grid-template-columns: 6rem auto 1fr;
    align-items: baseline;
    gap: var(--rk-sp-4) var(--rk-sp-10);
}

.sm__fword[b-u1swyifpve] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.sm__fsay[b-u1swyifpve] {
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
    min-width: 0;
}

@media (max-width: 40rem) {
    .sm__fact[b-u1swyifpve] {
        grid-template-columns: auto 1fr;
    }

    .sm__fsay[b-u1swyifpve] {
        grid-column: 1 / -1;
    }
}

.sm__run[b-u1swyifpve] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8) var(--rk-sp-12);
    margin-top: var(--rk-sp-14);
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.sm__run .sm__quiet[b-u1swyifpve] {
    flex: 1 1 18rem;
    margin: 0;
}

.sm__counts[b-u1swyifpve] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-10) var(--rk-sp-20);
    margin: var(--rk-sp-10) 0 0;
}

.sm__counts dt[b-u1swyifpve] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.sm__counts dd[b-u1swyifpve] {
    margin: 0;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xl);
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------- the defaults */

.sm__checks[b-u1swyifpve] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-6);
}

.sm__grid[b-u1swyifpve] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--rk-sp-10);
    margin-top: var(--rk-sp-10);
}

.sm__acts[b-u1swyifpve] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-12);
}

/* ---------------------------------------------------------------------- the words */

.sm__words[b-u1swyifpve] {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    gap: var(--rk-sp-16);
    align-items: start;
}

@media (max-width: 52rem) {
    .sm__words[b-u1swyifpve] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sm__list[b-u1swyifpve] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    min-width: 0;
}

.sm__group[b-u1swyifpve] {
    margin: var(--rk-sp-8) 0 var(--rk-sp-4);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.sm__list .sm__group:first-child[b-u1swyifpve] {
    margin-top: 0;
}

.sm__none[b-u1swyifpve] {
    margin: 0 0 var(--rk-sp-4);
}

.sm__items[b-u1swyifpve] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A list row that is a real button - keyboard reachable, and it says which one is open. */
.sm__item[b-u1swyifpve] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-1);
    width: 100%;
    min-height: var(--rk-tap);
    padding: var(--rk-sp-6) var(--rk-sp-8);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-sp-3) solid var(--rk-line);
    background: var(--rk-card);
    color: var(--rk-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sm__item:hover[b-u1swyifpve] {
    background: var(--rk-hover-ghost);
}

.sm__item:focus-visible[b-u1swyifpve] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-1);
}

.sm__item--on[b-u1swyifpve] {
    border-left-color: var(--rk-accent);
    background: var(--rk-accent-soft);
}

.sm__item--retired[b-u1swyifpve] {
    opacity: 0.6;
}

.sm__iname[b-u1swyifpve] {
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
}

.sm__imeta[b-u1swyifpve] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.sm__new[b-u1swyifpve] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rk-sp-4);
    margin-top: var(--rk-sp-12);
}

.sm__editor[b-u1swyifpve] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    min-width: 0;
}

.sm__ehead[b-u1swyifpve] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-8);
}

.sm__etitle[b-u1swyifpve] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    color: var(--rk-ink);
}

.sm__count[b-u1swyifpve] {
    margin: 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.sm__tokens[b-u1swyifpve] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
}

.sm__meanings summary[b-u1swyifpve] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-accent-ink);
    cursor: pointer;
}

.sm__meanings dl[b-u1swyifpve] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--rk-sp-4) var(--rk-sp-16);
    margin: var(--rk-sp-6) 0 0;
}

.sm__meanings dt[b-u1swyifpve] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink);
}

.sm__meanings dd[b-u1swyifpve] {
    margin: 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.sm__preview[b-u1swyifpve] {
    margin-top: var(--rk-sp-8);
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.sm__phead[b-u1swyifpve] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
}

.sm__phead .sm__group[b-u1swyifpve] {
    margin: 0;
}

.sm__paper[b-u1swyifpve] {
    margin-top: var(--rk-sp-6);
    padding: var(--rk-sp-10) var(--rk-sp-12);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-sp-3) solid var(--rk-accent);
    background: var(--rk-paper);
    color: var(--rk-ink);
}

.sm__psubject[b-u1swyifpve] {
    margin: 0 0 var(--rk-sp-6);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    word-break: break-word;
}

.sm__pbody[b-u1swyifpve] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    white-space: pre-wrap;
    word-break: break-word;
}
/* /Pages/SetupNoteTemplates.razor.rz.scp.css */
/*
    NOTE TEMPLATES AND THEIR HEADINGS.

    Layout only, tokens only, no literal colour. The shape of this screen is the argument it is
    making: a template is a HEADER with an ordered LIST under it, and the list is drawn as the
    substantial half rather than as a footnote.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

.bar[b-z62wvt9mi5] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-z62wvt9mi5] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.bar[b-z62wvt9mi5]  .rk-field {
    margin-bottom: 0;
}

.bar[b-z62wvt9mi5]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.6);
    max-width: 100%;
}

.bar[b-z62wvt9mi5]  .bar__owner {
    width: calc(var(--rk-blank-max) * 1.2);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   THE CREATE MADLIB.
   --------------------------------------------------------------------------------------- */
.make[b-z62wvt9mi5] {
    margin-bottom: var(--rk-sp-20);
}

.typed[b-z62wvt9mi5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .typed[b-z62wvt9mi5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .typed[b-z62wvt9mi5] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.typed[b-z62wvt9mi5]  .typed--span {
    grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------------------
   THE OPEN TEMPLATE.
   --------------------------------------------------------------------------------------- */
.detail[b-z62wvt9mi5] {
    margin-bottom: var(--rk-sp-20);
}

.head[b-z62wvt9mi5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    min-width: 0;
}

.head__who[b-z62wvt9mi5] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.head__name[b-z62wvt9mi5] {
    font-size: var(--rk-fs-2xl);
    font-weight: var(--rk-fw-semibold);
    min-width: 0;
    overflow-wrap: anywhere;
}

.head__handle[b-z62wvt9mi5] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.head__marks[b-z62wvt9mi5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}

.head__acts[b-z62wvt9mi5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
    margin-left: auto;
}

/* THE REFUSAL, IN THE OPEN. A tooltip on a disabled control is not a sentence anybody reads. */
.head__why[b-z62wvt9mi5] {
    flex: 1 1 100%;
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.detail__what[b-z62wvt9mi5] {
    margin: var(--rk-sp-12) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
}

/* ---- THE HEADINGS ------------------------------------------------------------------------
   The second level, and the point of the screen. Drawn as an ordered working list rather than
   as a table: a heading carries a prompt, several scoping stamps and three actions, and none
   of that fits a column grid without shredding.
   --------------------------------------------------------------------------------------- */
.sections[b-z62wvt9mi5] {
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.sections__head[b-z62wvt9mi5] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    margin-bottom: var(--rk-sp-8);
}

.sections__word[b-z62wvt9mi5] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

.sections__lede[b-z62wvt9mi5] {
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.rows[b-z62wvt9mi5] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rows__row[b-z62wvt9mi5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-12);
    padding: var(--rk-sp-10) 0;
    min-height: var(--rk-tap);
}

.rows__row + .rows__row[b-z62wvt9mi5] {
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.rows__order[b-z62wvt9mi5] {
    flex: none;
    width: 4ch;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.rows__who[b-z62wvt9mi5] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    min-width: 0;
    flex: 1 1 18rem;
}

.rows__name[b-z62wvt9mi5] {
    font-weight: var(--rk-fw-semibold);
    overflow-wrap: anywhere;
}

.rows__handle[b-z62wvt9mi5] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

/* The prompt is what turns a blank box into a question, so it is shown rather than hidden
   behind an edit click. */
.rows__prompt[b-z62wvt9mi5] {
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.rows__marks[b-z62wvt9mi5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}

.rows__acts[b-z62wvt9mi5] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
    margin-left: auto;
}

/* ---------------------------------------------------------------------------------------
   THE MODAL FORMS. Two columns inside a Wide dialog, one on a phone.
   --------------------------------------------------------------------------------------- */
.form[b-z62wvt9mi5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
}

@media (min-width: 640px) {
    .form[b-z62wvt9mi5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form[b-z62wvt9mi5]  .form--span {
    grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------------------
   THE CELLS.
   --------------------------------------------------------------------------------------- */
.cell--name[b-z62wvt9mi5] {
    min-width: 0;
}

.cell__title[b-z62wvt9mi5] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell__tag[b-z62wvt9mi5] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.cell--soft[b-z62wvt9mi5] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}
/* /Pages/SetupNumbering.razor.rz.scp.css */
/*
    DOCUMENT NUMBERING.

    Layout only, tokens only, no literal colour, no literal size. The one thing this screen has
    to do visually is make the REMAINING COUNT impossible to miss, and that is done with scale
    and with the kit's own tones rather than with a colour typed here.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

.bar[b-igzbraynmq] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-igzbraynmq] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.bar[b-igzbraynmq]  .rk-field {
    margin-bottom: 0;
}

.bar[b-igzbraynmq]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.8);
    max-width: 100%;
}

/* ---- THE KIND STRIP ---------------------------------------------------------------------
   Every kind of numbered document, with how many series it has. A kind at zero is drawn in
   the warning tone by the chip itself - see the markup - because a kind with no series is a
   kind whose documents cannot be created at all.
   --------------------------------------------------------------------------------------- */
.kinds[b-igzbraynmq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-10) 0;
}

.kinds__label[b-igzbraynmq] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.gaps[b-igzbraynmq] {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6) var(--rk-sp-10);
    margin: var(--rk-sp-8) 0 0;
    padding: 0;
}

.gaps__lede[b-igzbraynmq] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
}

.gaps__item[b-igzbraynmq] {
    padding: var(--rk-sp-1) var(--rk-sp-8);
    border: var(--rk-border-hair) dashed var(--rk-line-hard);
    border-radius: var(--rk-radius-xs);
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
}

/* ---------------------------------------------------------------------------------------
   THE CREATE MADLIB.
   --------------------------------------------------------------------------------------- */
.make[b-igzbraynmq] {
    margin-bottom: var(--rk-sp-20);
}

.typed[b-igzbraynmq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .typed[b-igzbraynmq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .typed[b-igzbraynmq] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.typed[b-igzbraynmq]  .typed--span {
    grid-column: 1 / -1;
}

/* ---- THE FORMAT PREVIEW -----------------------------------------------------------------
   Exactly what dbo.FormatDocumentNumber would return - prefix, separator, padded digits,
   suffix. It is faithful rather than indicative, which is why it is drawn as the number
   itself rather than as a caption.
   --------------------------------------------------------------------------------------- */
.preview[b-igzbraynmq] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-6) var(--rk-sp-12);
    margin-top: var(--rk-sp-14);
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.preview__label[b-igzbraynmq] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.preview__value[b-igzbraynmq] {
    font-size: var(--rk-fs-2xl);
    font-weight: var(--rk-fw-semibold);
    overflow-wrap: anywhere;
}

.preview__left[b-igzbraynmq] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE OPEN SERIES.
   --------------------------------------------------------------------------------------- */
.detail[b-igzbraynmq] {
    margin-bottom: var(--rk-sp-20);
}

.head[b-igzbraynmq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    min-width: 0;
}

.head__who[b-igzbraynmq] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.head__name[b-igzbraynmq] {
    font-size: var(--rk-fs-2xl);
    font-weight: var(--rk-fw-semibold);
    min-width: 0;
    overflow-wrap: anywhere;
}

.head__kind[b-igzbraynmq] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.head__marks[b-igzbraynmq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}

.head__acts[b-igzbraynmq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
    margin-left: auto;
}

/* THE REFUSAL, IN THE OPEN. A tooltip on a disabled control is not a sentence anybody reads. */
.head__why[b-igzbraynmq] {
    flex: 1 1 100%;
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* ---- THE GAUGE --------------------------------------------------------------------------
   The two numbers this whole screen exists for. Deliberately large: ESC's wrap was survivable
   only because nobody could see it coming, and a figure in a facts grid is not seeing it.
   --------------------------------------------------------------------------------------- */
.gauge[b-igzbraynmq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-16);
    margin-top: var(--rk-sp-12);
    padding-bottom: var(--rk-sp-14);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .gauge[b-igzbraynmq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.gauge__cell[b-igzbraynmq] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    min-width: 0;
}

.gauge__label[b-igzbraynmq] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.gauge__big[b-igzbraynmq] {
    font-size: var(--rk-fs-3xl);
    font-weight: var(--rk-fw-semibold);
    line-height: var(--rk-lh-tight);
    overflow-wrap: anywhere;
}

.gauge__why[b-igzbraynmq] {
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/* ---- THE FACTS -------------------------------------------------------------------------- */
.facts[b-igzbraynmq] {
    display: grid;
    grid-template-columns: minmax(10rem, max-content) minmax(0, 1fr);
    gap: var(--rk-sp-6) var(--rk-sp-14);
    margin: var(--rk-sp-14) 0 var(--rk-sp-16);
}

.facts dt[b-igzbraynmq] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.facts dd[b-igzbraynmq] {
    margin: 0;
    min-width: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

.facts__why[b-igzbraynmq] {
    display: block;
    margin-top: var(--rk-sp-2);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

@media (max-width: 520px) {
    .facts[b-igzbraynmq] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--rk-sp-2) 0;
    }

    .facts dd[b-igzbraynmq] {
        margin-bottom: var(--rk-sp-8);
    }
}

/* ---------------------------------------------------------------------------------------
   THE EDITOR.
   --------------------------------------------------------------------------------------- */
.form[b-igzbraynmq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
}

@media (min-width: 640px) {
    .form[b-igzbraynmq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form[b-igzbraynmq]  .form--span {
    grid-column: 1 / -1;
}

.form__word[b-igzbraynmq] {
    margin: var(--rk-sp-16) 0 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

.form__lede[b-igzbraynmq] {
    margin: var(--rk-sp-4) 0 var(--rk-sp-10);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.refusals[b-igzbraynmq] {
    margin: 0;
    padding-left: var(--rk-sp-16);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
}

.refusals li + li[b-igzbraynmq] {
    margin-top: var(--rk-sp-6);
}

/* ---------------------------------------------------------------------------------------
   THE CELLS.
   --------------------------------------------------------------------------------------- */
.cell--name[b-igzbraynmq] {
    min-width: 0;
}

.cell__title[b-igzbraynmq] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell__tag[b-igzbraynmq] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.cell--soft[b-igzbraynmq] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------------------------
   THE STICKER RUN. Two lines of prose inside the modal - the series it draws from, and
   what happened. Everything else in there is a house control that brings its own styling.
   ------------------------------------------------------------------------------------ */
.sticker__lede[b-igzbraynmq] {
    margin: 0 0 var(--rk-sp-12);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
}

.sticker__done[b-igzbraynmq] {
    margin: var(--rk-sp-12) 0 0;
    padding: var(--rk-sp-6) var(--rk-sp-12);
    border-left: var(--rk-rail) solid var(--rk-accent);
    background: var(--rk-accent-soft);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
}
/* /Pages/SetupPricing.razor.rz.scp.css */
/*
    PRICING - the markup ladder.

    Layout only, tokens only, no literal colour, size, radius or shadow - a test fails the build
    on a raw hex. Deliberately the same bar / table / form shape as the other setup screens:
    somebody who learned /setup/tasks learned this.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.

    🛑 AND NEVER background: var(--rk-ink) WITH color: var(--rk-white). The dark theme resolves
    both to the same paper tone and the text vanishes. Permanent dark chrome is
    --rk-chrome-bg / --rk-chrome-ink, which do not flip. Nothing here needs either.
*/

/* ---------------------------------------------------------------------------------------
   SCREEN-READER-ONLY. There is no global helper for this, and RkTable keeps its own copy
   scoped to itself, so the ladder table declares its own rather than reaching for one.
   --------------------------------------------------------------------------------------- */
.sr[b-mkpatfa5gw] {
    position: absolute;
    width: var(--rk-border-hair);
    height: var(--rk-border-hair);
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

/* ---------------------------------------------------------------------------------------
   THE FILTER BAR
   --------------------------------------------------------------------------------------- */

.bar[b-mkpatfa5gw] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-mkpatfa5gw] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

/* RkField carries a bottom margin built for a stacked form. In a one-line bar that margin
   leaves the GO button sitting below the input it belongs to. */
.bar[b-mkpatfa5gw]  .rk-field {
    margin-bottom: 0;
}

.bar[b-mkpatfa5gw]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.8);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   LIST BESIDE LADDER

   One column on a phone, and the LIST comes first there because you cannot read a ladder you
   have not chosen. decision: one app, desktop and phone, same markup.
   --------------------------------------------------------------------------------------- */

.split[b-mkpatfa5gw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-20);
    align-items: start;
}

@media (min-width: 60rem) {
    .split[b-mkpatfa5gw] {
        grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    }
}

.split__list[b-mkpatfa5gw],
.split__detail[b-mkpatfa5gw] {
    min-width: 0;
}

.cell__title[b-mkpatfa5gw] {
    display: block;
    font-weight: var(--rk-fw-semibold);
}

.cell__tag[b-mkpatfa5gw] {
    display: block;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: var(--rk-measure);
}

.cell--handle[b-mkpatfa5gw] {
    font-weight: var(--rk-fw-semibold);
}

.prose[b-mkpatfa5gw] {
    color: var(--rk-ink-soft);
    line-height: var(--rk-lh-prose);
    max-width: var(--rk-measure);
    margin: 0 0 var(--rk-sp-10);
}

.formula[b-mkpatfa5gw] {
    font-family: var(--rk-font-mono);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------
   THE LADDER HEAD
   --------------------------------------------------------------------------------------- */

.ladderhead[b-mkpatfa5gw] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rk-sp-10) var(--rk-sp-16);
    padding-bottom: var(--rk-sp-10);
    border-bottom: var(--rk-border) solid var(--rk-line-hard);
    margin-bottom: var(--rk-sp-14);
}

.ladderhead__name[b-mkpatfa5gw] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.ladderhead__name h2[b-mkpatfa5gw] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    margin: 0;
}

.ladderhead__handle[b-mkpatfa5gw] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
}

.ladderhead__acts[b-mkpatfa5gw] {
    display: flex;
    gap: var(--rk-sp-8);
}

/* ---------------------------------------------------------------------------------------
   ONE TIER'S LADDER

   🛑 THIS IS A GRID AND NOT A SENTENCE BECAUSE A HOLE BETWEEN TWO INTERVALS IS VISIBLE IN A
   COLUMN AND INVISIBLE IN PROSE. Everything below serves that one claim: the numbers are mono
   and tabular so the digits line up down the column, the FROM and TO columns sit adjacent so
   one row's ceiling is directly above the next row's floor, and a fault gets a full-width rule
   in danger tone that physically interrupts the stack.
   --------------------------------------------------------------------------------------- */

.tier[b-mkpatfa5gw] {
    margin-bottom: var(--rk-sp-24);
}

.tier__head[b-mkpatfa5gw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    margin-bottom: var(--rk-sp-6);
}

.tier__name[b-mkpatfa5gw] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
}

.ladder[b-mkpatfa5gw] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--rk-fs-sm);
}

.ladder thead th[b-mkpatfa5gw] {
    text-align: left;
    padding: var(--rk-sp-4) var(--rk-sp-8);
    border-bottom: var(--rk-border) solid var(--rk-line-hard);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    white-space: nowrap;
}

/* THE COLUMN HEADERS SAY WHICH END IS WHICH. ESC's own columns are MoreThan and LessThan and
   are CLOSED at both ends, which reads as the opposite of what its own proc does - anybody
   converting that table by reading the names gets the boundaries wrong in both directions. */
.ladder__end[b-mkpatfa5gw] {
    display: block;
    font-family: var(--rk-font-body);
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: lowercase;
    font-weight: var(--rk-fw-body);
}

.ladder tbody td[b-mkpatfa5gw] {
    padding: var(--rk-sp-5) var(--rk-sp-8);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
    vertical-align: middle;
}

.ladder__num[b-mkpatfa5gw] {
    font-family: var(--rk-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.ladder thead .ladder__num[b-mkpatfa5gw] {
    text-align: right;
}

.ladder__pct[b-mkpatfa5gw] {
    font-weight: var(--rk-fw-semibold);
}

.ladder__preview[b-mkpatfa5gw] {
    color: var(--rk-ink-soft);
}

.ladder__open[b-mkpatfa5gw] {
    font-family: var(--rk-font-body);
    font-style: italic;
    color: var(--rk-ink-soft);
    white-space: nowrap;
}

.ladder__acts[b-mkpatfa5gw] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--rk-sp-4);
    white-space: nowrap;
}

.ladder__acts[b-mkpatfa5gw]  .rk-btn {
    min-width: 0;
}

/* ---------------------------------------------------------------------------------------
   THE FAULT RULE - the whole reason this screen exists

   It is drawn ACROSS the stack rather than in a column, because a hole is not a property of
   either neighbouring rung - it is the space between them, and a mark sitting in one row's
   cell reads as a comment on that row.
   --------------------------------------------------------------------------------------- */

.fault > td[b-mkpatfa5gw] {
    background: var(--rk-danger-soft);
    border-top: var(--rk-border) solid var(--rk-danger);
    border-bottom: var(--rk-border) solid var(--rk-danger);
    color: var(--rk-danger-ink);
    padding: var(--rk-sp-6) var(--rk-sp-8);
}

.fault__word[b-mkpatfa5gw] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    font-weight: var(--rk-fw-bold);
    margin-right: var(--rk-sp-8);
    white-space: nowrap;
}

.fault__text[b-mkpatfa5gw] {
    font-size: var(--rk-fs-sm);
}

/* An overlap is a different defect from a hole - two rungs claiming one cost, so the price
   depends on the query plan - and it earns its own mark rather than borrowing the gap's. */
.fault--overlap > td[b-mkpatfa5gw] {
    border-style: dashed;
}

/* ---------------------------------------------------------------------------------------
   THE PREVIEW STRIP
   --------------------------------------------------------------------------------------- */

.preview__row[b-mkpatfa5gw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-14) var(--rk-sp-20);
    align-items: flex-start;
}

.preview[b-mkpatfa5gw]  .preview__input {
    width: calc(var(--rk-blank-max) * 1.1);
    max-width: 100%;
    margin-bottom: 0;
}

.preview__answers[b-mkpatfa5gw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-10) var(--rk-sp-20);
    min-width: 0;
}

.preview__answer[b-mkpatfa5gw] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    min-width: 0;
}

.preview__tier[b-mkpatfa5gw] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.preview__price[b-mkpatfa5gw] {
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
}

/* A cost no rung covers is NOT a zero and must never render as one. A zero that means "not
   yet" is the same lie as a blank price. */
.preview__none[b-mkpatfa5gw] {
    color: var(--rk-danger-ink);
    font-size: var(--rk-fs-sm);
    max-width: var(--rk-measure);
}

/* ---------------------------------------------------------------------------------------
   THE COMPARISON - K1
   --------------------------------------------------------------------------------------- */

.compare[b-mkpatfa5gw]  .compare__pick {
    width: calc(var(--rk-blank-max) * 1.4);
    max-width: 100%;
}

.compare__summary[b-mkpatfa5gw] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6) var(--rk-sp-20);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-14);
    font-size: var(--rk-fs-sm);
}

.compare__parts[b-mkpatfa5gw] {
    color: var(--rk-ink-soft);
}

.cmp--differs > td[b-mkpatfa5gw] {
    background: var(--rk-danger-soft);
}

.cmp--differs > td.ladder__pct[b-mkpatfa5gw] {
    color: var(--rk-danger-ink);
}

.cmp__effect[b-mkpatfa5gw] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.cmp--differs .cmp__effect[b-mkpatfa5gw] {
    color: var(--rk-danger-ink);
}

/* ---------------------------------------------------------------------------------------
   THE EDITORS
   --------------------------------------------------------------------------------------- */

.form[b-mkpatfa5gw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rk-blank-max), 1fr));
    gap: 0 var(--rk-sp-14);
    align-items: start;
}

.form[b-mkpatfa5gw]  .span,
.form[b-mkpatfa5gw] >  .rk-notice {
    grid-column: 1 / -1;
}

.suffix[b-mkpatfa5gw] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.checks[b-mkpatfa5gw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rk-blank-max), 1fr));
    gap: var(--rk-sp-8) var(--rk-sp-14);
}
/* /Pages/SetupPricingProfiles.razor.rz.scp.css */
/*
    PRICING PROFILES - list beside the profile. Layout only, tokens only (a test fails the build on
    a raw colour). ::deep reaches a class passed to a kit control.
*/

.split[b-aagtpwvnuu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-20);
    align-items: start;
}

@media (min-width: 60rem) {
    .split[b-aagtpwvnuu] {
        grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    }
}

.detail[b-aagtpwvnuu] {
    min-width: 0;
}

.chain[b-aagtpwvnuu] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.section[b-aagtpwvnuu] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    margin: var(--rk-sp-16) 0 var(--rk-sp-8);
    color: var(--rk-ink);
}

.form[b-aagtpwvnuu] {
    display: grid;
    gap: var(--rk-sp-4);
}

.fields[b-aagtpwvnuu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
}

@media (min-width: 48rem) {
    .fields[b-aagtpwvnuu] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.field[b-aagtpwvnuu] {
    min-width: 0;
    margin-bottom: var(--rk-sp-8);
}

.field[b-aagtpwvnuu]  .rk-field {
    margin-bottom: var(--rk-sp-2);
}

/* What a blank field inherits, and from which profile - on the face of the form. */
.inherits[b-aagtpwvnuu] {
    margin: 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.inherits--own[b-aagtpwvnuu] {
    color: var(--rk-ok-ink);
    font-weight: var(--rk-fw-semibold);
}

.actions[b-aagtpwvnuu] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-12);
}

.facts[b-aagtpwvnuu] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--rk-sp-6) var(--rk-sp-16);
    margin: 0 0 var(--rk-sp-12);
}

.facts dt[b-aagtpwvnuu] {
    color: var(--rk-ink-soft);
}

.facts dd[b-aagtpwvnuu] {
    margin: 0;
}
/* /Pages/SetupProperties.razor.rz.scp.css */
/*
    CUSTOM FIELDS - the declaration screen.

    Layout only, tokens only, no literal colour, size, radius or shadow. Deliberately the same
    rhythm as the other System screens: somebody who learned the zone editor has learned this one.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's scoped
    element, so a bare rule here compiles against this page's scope and matches nothing.

    ⚠️ AND NOTHING HERE PAIRS background: var(--rk-ink) WITH color: var(--rk-white). The dark
    theme resolves both to the same value and the text goes invisible; permanent dark chrome uses
    --rk-chrome-bg / --rk-chrome-ink, which do not flip.
*/

/* ---------------------------------------------------------------------------------------
   STEP ONE - the scope. Two pickers side by side on anything wider than a phone, because
   "which record" and "which equipment type" are one decision made in two moves.
   --------------------------------------------------------------------------------------- */
.scope[b-ope8mtfrwe] {
    margin-bottom: var(--rk-sp-14);
}

.scope__row[b-ope8mtfrwe] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-18);
}

@media (min-width: 720px) {
    .scope__row[b-ope8mtfrwe] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* RkField carries a bottom margin for a stacked form; inside the scope grid the gap owns it. */
.scope__row[b-ope8mtfrwe]  .rk-field {
    margin-bottom: var(--rk-sp-10);
}

/* ---------------------------------------------------------------------------------------
   THE EDITOR PANEL.
   --------------------------------------------------------------------------------------- */
.detail[b-ope8mtfrwe] {
    margin-bottom: var(--rk-sp-14);
}

/* The panel is focused by code so it scrolls into view. It is not in the tab order and it is
   not an interactive control, so the browser's focus ring on it reads as a mistake - the rail
   on the card is what says "this is the thing that just opened". */
.detail:focus[b-ope8mtfrwe] {
    outline: none;
}

.head[b-ope8mtfrwe] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.head__word[b-ope8mtfrwe] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-4xl);
    letter-spacing: var(--rk-track-3xl);
    text-transform: uppercase;
    color: var(--rk-ink);
    min-width: 0;
    overflow-wrap: anywhere;
}

.head__marks[b-ope8mtfrwe] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}

/* ---------------------------------------------------------------------------------------
   THE TOKEN PREVIEW - what the handle is actually FOR, shown while it is being typed.
   --------------------------------------------------------------------------------------- */
.token[b-ope8mtfrwe] {
    margin: 0;
}

.token__code[b-ope8mtfrwe] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xl);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-accent-ink);
    overflow-wrap: anywhere;
}

.token__word[b-ope8mtfrwe] {
    margin: var(--rk-sp-6) 0 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE FORM GRID. Three across on a desk, one on a phone - same markup, no second layout.
   --------------------------------------------------------------------------------------- */
.grid[b-ope8mtfrwe] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
}

@media (min-width: 720px) {
    .grid[b-ope8mtfrwe] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .grid[b-ope8mtfrwe] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------------------
   THE SECTIONS INSIDE THE EDITOR - the condition, the choices, the in-use switches.
   --------------------------------------------------------------------------------------- */
.section[b-ope8mtfrwe] {
    margin-top: var(--rk-sp-18);
    padding-top: var(--rk-sp-14);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.section__word[b-ope8mtfrwe] {
    margin: 0 0 var(--rk-sp-10);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xl);
    font-weight: 600;
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-steel);
}

/* ---------------------------------------------------------------------------------------
   THE CHOICES ADDED IN THIS SESSION. A stamp and its take-it-back, on one line each.
   --------------------------------------------------------------------------------------- */
.chips[b-ope8mtfrwe] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-10);
    margin-bottom: var(--rk-sp-12);
}

.chips__one[b-ope8mtfrwe] {
    display: inline-flex;
    align-items: center;
    gap: var(--rk-sp-4);
}

/* ---------------------------------------------------------------------------------------
   THE LIST.
   --------------------------------------------------------------------------------------- */
.cell__word[b-ope8mtfrwe] {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* WHICH EQUIPMENT TYPE A FIELD BELONGS TO, when looking across the whole catalog. Quiet,
   because it is context rather than the answer - but present, because without it the list
   reads as one flat set of equipment fields, which is the exact mental model this screen
   exists to correct. */
.cell__scope[b-ope8mtfrwe] {
    display: block;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.stamp[b-ope8mtfrwe] {
    margin: var(--rk-sp-14) 0 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}
/* /Pages/SetupRoles.razor.rz.scp.css */
/*
    ROLES, CREWS AND TITLES.

    Layout only, tokens only, no literal colour. This page is mostly prose and two tables, so
    it borrows the list idiom from its siblings and adds nothing but a definition list and the
    capability grid.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element.
*/

.head[b-dh4z1f28oh] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
    margin: var(--rk-sp-20) 0 var(--rk-sp-6);
}

.lead[b-dh4z1f28oh] {
    margin: 0 0 var(--rk-sp-12);
    max-width: var(--rk-measure);
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
}

.cell__title[b-dh4z1f28oh] {
    display: block;
    font-weight: var(--rk-fw-semibold);
}

.cell__tag[b-dh4z1f28oh] {
    display: block;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    line-height: var(--rk-lh-snug);
    max-width: var(--rk-measure);
    white-space: normal;
}

.mix[b-dh4z1f28oh] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.quiet[b-dh4z1f28oh] {
    color: var(--rk-ink-soft);
    font-style: italic;
}

/* ---------------------------------------------------------------------------------------
   THE CAPABILITY LIST - the derived column, opened
   --------------------------------------------------------------------------------------- */

.caps[b-dh4z1f28oh] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--rk-blank-max) * 1.2), 1fr));
    gap: var(--rk-sp-4) var(--rk-sp-12);
}

.cap[b-dh4z1f28oh] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-6);
    min-width: 0;
    padding: var(--rk-sp-2) 0;
}

/* THE CAPABILITY NAME IS THE MCP TOOL NAME AND THE REST ROUTE, which is the whole point of the
   IFeature convention - so it is set in mono and never prettified into a sentence. */
.cap__name[b-dh4z1f28oh] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------
   DEFINITION LISTS
   --------------------------------------------------------------------------------------- */

.facts[b-dh4z1f28oh] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--rk-sp-4) var(--rk-sp-14);
    margin: 0 0 var(--rk-sp-12);
}

.facts dt[b-dh4z1f28oh],
.split dt[b-dh4z1f28oh] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    margin: 0;
}

.facts dd[b-dh4z1f28oh] {
    margin: 0;
    color: var(--rk-ink);
}

.split[b-dh4z1f28oh] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--rk-sp-8) var(--rk-sp-14);
    margin: 0;
}

.split dd[b-dh4z1f28oh] {
    margin: 0;
    max-width: var(--rk-measure);
    line-height: var(--rk-lh-prose);
}

.held[b-dh4z1f28oh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
}

@media (max-width: 640px) {
    .facts[b-dh4z1f28oh],
    .split[b-dh4z1f28oh] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/SetupTasks.razor.rz.scp.css */
/*
    WORK CODES.

    Layout only, tokens only, no literal colour - a test fails the build on a raw hex.
    Deliberately the same bar / table / pager shape as the people, customer and site lists:
    somebody who learned one learned all four.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

.bar[b-89eg3f5zdw] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-89eg3f5zdw] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

/* RkField carries a bottom margin built for a stacked form. In a one-line bar that margin
   leaves the GO button sitting below the input it belongs to. */
.bar[b-89eg3f5zdw]  .rk-field {
    margin-bottom: 0;
}

.bar[b-89eg3f5zdw]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.8);
    max-width: 100%;
}

.bar[b-89eg3f5zdw]  .bar__pick {
    width: var(--rk-blank-max);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   THE GRID
   --------------------------------------------------------------------------------------- */

.cell__title[b-89eg3f5zdw] {
    display: block;
    font-weight: var(--rk-fw-semibold);
}

.cell__tag[b-89eg3f5zdw] {
    display: block;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: var(--rk-measure);
}

/* THE UNIT TRAVELS WITH THE NUMBER. A bare figure under a header reading "Estimated" is
   exactly how ESC's minutes-or-hours ambiguity survived thirty years - decision 6. */
.mins[b-89eg3f5zdw] {
    font-family: var(--rk-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mins__unit[b-89eg3f5zdw] {
    margin-left: var(--rk-sp-2);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.quiet[b-89eg3f5zdw] {
    color: var(--rk-ink-soft);
    font-style: italic;
}

.pager[b-89eg3f5zdw] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-10) 0 var(--rk-sp-16);
}

.pager__word[b-89eg3f5zdw] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
    margin-right: auto;
}

/* ---------------------------------------------------------------------------------------
   THE EDITOR
   --------------------------------------------------------------------------------------- */

.form[b-89eg3f5zdw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rk-blank-max), 1fr));
    gap: 0 var(--rk-sp-14);
    align-items: start;
}

.form[b-89eg3f5zdw]  .span,
.form[b-89eg3f5zdw] >  .rk-notice {
    grid-column: 1 / -1;
}

.suffix[b-89eg3f5zdw] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.checks[b-89eg3f5zdw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rk-blank-max), 1fr));
    gap: var(--rk-sp-8) var(--rk-sp-14);
}
/* /Pages/SetupTax.razor.rz.scp.css */
/*
    TAX CODES.

    Layout only, tokens only, no literal colour - a test fails the build on a raw hex, and a
    second one fails it on a var() reading a token rk-tokens.css never declared.

    Deliberately the same bar / pager / form shape as the other Setup screens: somebody who
    learned work codes learned this.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.

    ⚠️ AND NEVER background: var(--rk-ink) WITH color: var(--rk-white). The dark theme resolves
    both to the same value and the text goes invisible. Permanent dark chrome is
    --rk-chrome-bg / --rk-chrome-ink, which do not flip.
*/

/* ---------------------------------------------------------------------------------------
   THE SPLIT - the non-negotiable, said on the screen
   --------------------------------------------------------------------------------------- */

/* min() so a half never asks for more than the screen has - a bare 62ch minimum made the whole
   page scroll sideways on a phone (523 px of page in a 390 px screen, measured 2026-09-27). */
.split[b-8lfpv3nhmc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--rk-measure), 100%), 1fr));
    gap: var(--rk-sp-16);
    margin-top: var(--rk-sp-8);
}

.split__half[b-8lfpv3nhmc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rk-sp-4);
    padding-left: var(--rk-sp-12);
    border-left: var(--rk-border) solid var(--rk-line);
}

/* The half you are looking at wears the accent rail. The other one is a signpost. */
.split__half--here[b-8lfpv3nhmc] {
    border-left-color: var(--rk-accent);
}

.split__word[b-8lfpv3nhmc] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.split__what[b-8lfpv3nhmc] {
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-ink);
}

.split__body[b-8lfpv3nhmc] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.split__proof[b-8lfpv3nhmc] {
    margin: var(--rk-sp-14) 0 0;
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.split__never[b-8lfpv3nhmc] {
    display: inline-block;
    margin-left: var(--rk-sp-4);
    font-weight: var(--rk-fw-bold);
    color: var(--rk-danger-ink);
}

.lede[b-8lfpv3nhmc] {
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

/* ---------------------------------------------------------------------------------------
   THE FILTER BAR
   --------------------------------------------------------------------------------------- */

.bar[b-8lfpv3nhmc] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-8lfpv3nhmc] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

/* RkField carries a bottom margin built for a stacked form. In a one-line bar that margin
   leaves the GO button sitting below the input it belongs to. */
.bar[b-8lfpv3nhmc]  .rk-field {
    margin-bottom: 0;
}

.bar[b-8lfpv3nhmc]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.8);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   ONE CODE PER CARD
   --------------------------------------------------------------------------------------- */

.codes[b-8lfpv3nhmc] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
}

.code[b-8lfpv3nhmc] {
    border: var(--rk-border-card) solid var(--rk-line);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-card);
    overflow: hidden;
}

.code--open[b-8lfpv3nhmc] {
    border-color: var(--rk-accent);
    box-shadow: var(--rk-shadow-card);
}

.code--retired[b-8lfpv3nhmc] {
    background: var(--rk-zebra);
}

.code__head[b-8lfpv3nhmc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    width: 100%;
    padding: var(--rk-sp-12) var(--rk-sp-14);
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
    min-height: var(--rk-tap);
}

.code__head:hover[b-8lfpv3nhmc] {
    background: var(--rk-hover-ghost);
}

.code__head:active[b-8lfpv3nhmc] {
    background: var(--rk-press-ghost);
}

.code__names[b-8lfpv3nhmc] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-1);
    min-width: 0;
    flex: 1 1 var(--rk-blank-max);
}

.code__handle[b-8lfpv3nhmc] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.code__label[b-8lfpv3nhmc] {
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.code__blurb[b-8lfpv3nhmc] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: var(--rk-measure);
}

.code__marks[b-8lfpv3nhmc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-4);
}

.code__rate[b-8lfpv3nhmc] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--rk-sp-1);
    margin-left: auto;
}

.code__auth[b-8lfpv3nhmc] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* A rate is a number people read down a column, so it is mono and tabular everywhere. */
.rate[b-8lfpv3nhmc] {
    font-family: var(--rk-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--rk-ink);
}

.rate--hero[b-8lfpv3nhmc] {
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-semibold);
}

/* 🛑 A CODE WITH NO LIVE RATE IS A BUG A CUSTOMER PAYS FOR, AND IT LOOKS LIKE ONE. */
.rate--none[b-8lfpv3nhmc] {
    font-family: var(--rk-font-body);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-danger-ink);
}

.code__body[b-8lfpv3nhmc] {
    padding: 0 var(--rk-sp-14) var(--rk-sp-14);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.code__tools[b-8lfpv3nhmc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-10) 0;
}

.code__sites[b-8lfpv3nhmc] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.code__spacer[b-8lfpv3nhmc] {
    flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------------------
   THE STACK OF AUTHORITIES - 83.3% of real documents carry three or more
   --------------------------------------------------------------------------------------- */

.stack__lede[b-8lfpv3nhmc] {
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.stack[b-8lfpv3nhmc] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-10);
}

.auth[b-8lfpv3nhmc] {
    padding: var(--rk-sp-12);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-left: var(--rk-rail) solid var(--rk-steel);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-paper);
}

.auth--live[b-8lfpv3nhmc] {
    border-left-color: var(--rk-ok);
}

.auth--future[b-8lfpv3nhmc] {
    border-left-color: var(--rk-warn);
}

.auth--closed[b-8lfpv3nhmc] {
    border-left-color: var(--rk-disabled);
}

.auth__head[b-8lfpv3nhmc] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-8) var(--rk-sp-12);
}

.auth__seq[b-8lfpv3nhmc] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
    min-width: 2ch;
}

.auth__name[b-8lfpv3nhmc] {
    font-size: var(--rk-fs-base);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.auth__rate[b-8lfpv3nhmc] {
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-semibold);
}

.auth__state[b-8lfpv3nhmc] {
    margin-left: auto;
}

.auth__remit[b-8lfpv3nhmc] {
    margin: var(--rk-sp-6) 0 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

/* The filing code and level (2026-09-27) - what the return is filed by, under the name. */
.auth__filed[b-8lfpv3nhmc] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4) var(--rk-sp-8);
    margin: var(--rk-sp-4) 0 0;
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
}

.auth__level[b-8lfpv3nhmc] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

/* The filing code in the line's own size - .rk-num is a column figure and reads as a heading here. */
.auth__code[b-8lfpv3nhmc] {
    font-family: var(--rk-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--rk-ink);
}

.auth__acts[b-8lfpv3nhmc] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
    margin-top: var(--rk-sp-10);
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

/* ---------------------------------------------------------------------------------------
   THE WINDOW - drawn as well as written, so a gap between two rates is visible
   --------------------------------------------------------------------------------------- */

.win[b-8lfpv3nhmc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8) var(--rk-sp-12);
    margin-top: var(--rk-sp-6);
}

.win__words[b-8lfpv3nhmc] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    white-space: nowrap;
}

.win__track[b-8lfpv3nhmc] {
    position: relative;
    flex: 1 1 var(--rk-blank-max);
    height: var(--rk-sp-8);
    min-width: var(--rk-blank-max);
    border-radius: var(--rk-radius-pill);
    background: var(--rk-grid-line);
}

.win__bar[b-8lfpv3nhmc] {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: var(--rk-radius-pill);
    background: var(--rk-steel);
}

.auth--live .win__bar[b-8lfpv3nhmc] {
    background: var(--rk-ok);
}

.auth--future .win__bar[b-8lfpv3nhmc] {
    background: var(--rk-warn);
}

/* NOW, so a future window is obviously in front of the marker and a closed one behind it. */
.win__now[b-8lfpv3nhmc] {
    position: absolute;
    top: calc(var(--rk-sp-2) * -1);
    bottom: calc(var(--rk-sp-2) * -1);
    width: var(--rk-border-card);
    background: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   THE TAXABILITY GRID - three states, and only two of them can be written
   --------------------------------------------------------------------------------------- */

.opins[b-8lfpv3nhmc] {
    margin-top: var(--rk-sp-12);
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.opins__head[b-8lfpv3nhmc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    margin-bottom: var(--rk-sp-8);
}

.opins__word[b-8lfpv3nhmc] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.opins__gone[b-8lfpv3nhmc] {
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-xs);
    color: var(--rk-danger-ink);
}

.opins__grid[b-8lfpv3nhmc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--rk-blank-max) * 0.9), 1fr));
    gap: var(--rk-sp-6) var(--rk-sp-10);
}

.opins__rule[b-8lfpv3nhmc] {
    margin: var(--rk-sp-10) 0 0;
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    max-width: var(--rk-measure);
}

.opin[b-8lfpv3nhmc] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    padding: var(--rk-sp-6);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-card);
}

/* 🛑 UNANSWERED IS A STATE AND IT LOOKS LIKE ONE. A dashed amber edge and the words under it,
   because absence is not "not taxed" and a cell that rendered like a quiet no would be the
   whole defect this table was built to avoid. */
.opin--gap[b-8lfpv3nhmc] {
    border-style: dashed;
    border-color: var(--rk-warn);
    background: var(--rk-warn-soft);
}

.opin--yes[b-8lfpv3nhmc] {
    border-color: var(--rk-ok);
}

.opin--no[b-8lfpv3nhmc] {
    border-color: var(--rk-steel);
}

.opin__kind[b-8lfpv3nhmc] {
    font-size: var(--rk-fs-xs);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.opin__set[b-8lfpv3nhmc] {
    display: flex;
    gap: var(--rk-sp-1);
}

.opin__btn[b-8lfpv3nhmc] {
    flex: 1 1 0;
    padding: var(--rk-sp-3) var(--rk-sp-4);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-xs);
    background: var(--rk-field);
    color: var(--rk-ink-soft);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-3xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    cursor: pointer;
    min-height: var(--rk-control-xs);
}

.opin__btn:hover:not(:disabled)[b-8lfpv3nhmc] {
    background: var(--rk-hover-ghost);
}

.opin__btn:disabled[b-8lfpv3nhmc] {
    cursor: default;
    color: var(--rk-disabled-text);
}

.opin__btn--yes[aria-pressed="true"][b-8lfpv3nhmc] {
    background: var(--rk-ok-soft);
    border-color: var(--rk-ok);
    color: var(--rk-ok-ink);
}

.opin__btn--no[aria-pressed="true"][b-8lfpv3nhmc] {
    background: var(--rk-zebra);
    border-color: var(--rk-steel);
    color: var(--rk-ink);
}

.opin__say[b-8lfpv3nhmc] {
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-warn-ink);
}

/* ---------------------------------------------------------------------------------------
   PAGER AND EDITORS
   --------------------------------------------------------------------------------------- */

.pager[b-8lfpv3nhmc] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-10) 0 var(--rk-sp-16);
}

.pager__word[b-8lfpv3nhmc] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
    margin-right: auto;
}

.form[b-8lfpv3nhmc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rk-blank-max), 1fr));
    gap: 0 var(--rk-sp-14);
    align-items: start;
}

.form[b-8lfpv3nhmc]  .span,
.form[b-8lfpv3nhmc] >  .rk-notice {
    grid-column: 1 / -1;
}

.suffix[b-8lfpv3nhmc] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.checks[b-8lfpv3nhmc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--rk-blank-max), 1fr));
    gap: var(--rk-sp-8) var(--rk-sp-14);
}
/* /Pages/SetupVisitStatuses.razor.rz.scp.css */
/*
    THE VISIT STATUS VOCABULARY.

    Layout only, tokens only, no literal colour - with ONE deliberate exception that is not a
    literal at all: the board-card swatches take their background and text colour from the ROW,
    inline, because the value is data the customer chose and no token could express it. Every
    other colour on this screen comes from rk-tokens.css.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

.bar[b-2am3h4zwnf] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-2am3h4zwnf] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

/* RkField carries a bottom margin for a stacked form. In a one-line bar that margin leaves the
   GO button sitting below the input it belongs to. */
.bar[b-2am3h4zwnf]  .rk-field {
    margin-bottom: 0;
}

.bar[b-2am3h4zwnf]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.6);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   THE CREATE MADLIB. The sentence carries the CHOICE; the card under it carries the
   TRANSCRIPTION.
   --------------------------------------------------------------------------------------- */
.make[b-2am3h4zwnf] {
    margin-bottom: var(--rk-sp-20);
}

.typed[b-2am3h4zwnf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .typed[b-2am3h4zwnf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .typed[b-2am3h4zwnf] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.typed[b-2am3h4zwnf]  .typed--span {
    grid-column: 1 / -1;
}

/* ---- THE BOARD-CARD SWATCH -------------------------------------------------------------
   The one place a colour is set from data. The chip is sized and spaced from tokens; only
   background and foreground come off the row, inline.
   --------------------------------------------------------------------------------------- */
.swatch[b-2am3h4zwnf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
    margin-top: var(--rk-sp-14);
}

.swatch__label[b-2am3h4zwnf] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.swatch__chip[b-2am3h4zwnf],
.head__chip[b-2am3h4zwnf],
.cell__chip[b-2am3h4zwnf] {
    display: inline-block;
    padding: var(--rk-sp-2) var(--rk-sp-8);
    border: var(--rk-border-hair) solid var(--rk-line-hard);
    border-radius: var(--rk-radius-xs);
    font-weight: var(--rk-fw-semibold);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------------------
   THE OPEN STATUS. It sits ABOVE the list rather than replacing it - picking the right row
   out of a ladder is a click and a glance rather than a click and a back button.
   --------------------------------------------------------------------------------------- */
.detail[b-2am3h4zwnf] {
    margin-bottom: var(--rk-sp-20);
}

.head[b-2am3h4zwnf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    min-width: 0;
}

.head__who[b-2am3h4zwnf] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.head__chip[b-2am3h4zwnf] {
    font-size: var(--rk-fs-xl);
}

.head__handle[b-2am3h4zwnf] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.head__marks[b-2am3h4zwnf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}

/* Pushed right on a desk, wrapped underneath on a phone - margin-left auto does both. */
.head__acts[b-2am3h4zwnf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
    margin-left: auto;
}

/* THE REFUSAL, IN THE OPEN. A tooltip on a disabled control is not a sentence anybody reads. */
.head__why[b-2am3h4zwnf] {
    flex: 1 1 100%;
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.detail__what[b-2am3h4zwnf] {
    margin: var(--rk-sp-12) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
}

/* ---- THE THREE GROUPS -------------------------------------------------------------------
   Directives, board meaning, and what the hours count as. Three groups rather than one long
   list because they answer three different people's questions - a dispatcher's, a biller's
   and a payroll clerk's.
   --------------------------------------------------------------------------------------- */
.groups[b-2am3h4zwnf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-20);
    margin-top: var(--rk-sp-16);
}

@media (min-width: 1100px) {
    .groups[b-2am3h4zwnf] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.group[b-2am3h4zwnf] {
    min-width: 0;
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.group__word[b-2am3h4zwnf] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

.group__lede[b-2am3h4zwnf] {
    margin: var(--rk-sp-4) 0 var(--rk-sp-10);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.facts[b-2am3h4zwnf] {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: var(--rk-sp-8) var(--rk-sp-14);
    margin: 0;
}

.facts--tail[b-2am3h4zwnf] {
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
    grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
}

.facts dt[b-2am3h4zwnf] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.facts dd[b-2am3h4zwnf] {
    margin: 0;
    min-width: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

.facts__value[b-2am3h4zwnf] {
    display: block;
    font-weight: var(--rk-fw-semibold);
}

.facts__why[b-2am3h4zwnf] {
    display: block;
    margin-top: var(--rk-sp-2);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

@media (max-width: 520px) {
    .facts[b-2am3h4zwnf],
    .facts--tail[b-2am3h4zwnf] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--rk-sp-2) 0;
    }

    .facts dd[b-2am3h4zwnf] {
        margin-bottom: var(--rk-sp-8);
    }
}

/* ---- THE FLAGS --------------------------------------------------------------------------
   Every flag carries the name of what READS it. A flag whose consumer nobody can name is a
   flag nobody can set correctly.
   --------------------------------------------------------------------------------------- */
.flags[b-2am3h4zwnf] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.flags__row[b-2am3h4zwnf] {
    display: flex;
    align-items: flex-start;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-6) 0;
}

.flags__row + .flags__row[b-2am3h4zwnf] {
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.flags__mark[b-2am3h4zwnf] {
    flex: none;
    padding-top: var(--rk-sp-1);
}

.flags__who[b-2am3h4zwnf] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    min-width: 0;
}

.flags__word[b-2am3h4zwnf] {
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    overflow-wrap: anywhere;
}

.flags__why[b-2am3h4zwnf] {
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------------------
   THE EDITOR. Two columns inside a Wide dialog, one on a phone.
   --------------------------------------------------------------------------------------- */
.form[b-2am3h4zwnf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
}

@media (min-width: 640px) {
    .form[b-2am3h4zwnf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form[b-2am3h4zwnf]  .form--span {
    grid-column: 1 / -1;
}

.form__word[b-2am3h4zwnf] {
    margin: var(--rk-sp-16) 0 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

.form__lede[b-2am3h4zwnf] {
    margin: var(--rk-sp-4) 0 var(--rk-sp-10);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.refusals[b-2am3h4zwnf] {
    margin: 0;
    padding-left: var(--rk-sp-16);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
}

.refusals li + li[b-2am3h4zwnf] {
    margin-top: var(--rk-sp-6);
}

/* ---------------------------------------------------------------------------------------
   THE CELLS.
   --------------------------------------------------------------------------------------- */
.cell--name[b-2am3h4zwnf] {
    min-width: 0;
}

.cell__chip[b-2am3h4zwnf] {
    font-size: var(--rk-fs-sm);
}

.cell__tag[b-2am3h4zwnf] {
    display: block;
    margin-top: var(--rk-sp-2);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

/* The two summary columns are prose, not figures - they wrap rather than truncate, because a
   half-shown "off-job · paid" is worse than two lines. */
.cell--soft[b-2am3h4zwnf] {
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}
/* /Pages/SetupZones.razor.rz.scp.css */
/* ==========================================================================================
   ZONES - the ground panel.

   EVERY VALUE HERE IS A TOKEN FROM rk-tokens.css. No raw colour, size, radius or shadow -
   CLAUDE.md's Conventions, and the reason the control kit exists at all.

   ⚠️ NOTHING PAIRS --rk-ink WITH --rk-white. The dark theme resolves both to #e9e4d8, giving
   a 1:1 contrast ratio and invisible text. Permanent dark chrome, if it were ever wanted, is
   --rk-chrome-bg / --rk-chrome-ink, which do not flip.

   ⚠️ AND THE SMALL PRINT IS --rk-accent-ink, NEVER --rk-accent. The accent is tuned to be
   read as a FILL; used as text on warm paper it is the one thing in the kit that fails
   contrast, and --rk-accent-deep goes DARKER on dark paper rather than lighter.

   ONE APP, DESKTOP AND PHONE. A rule row is a three-part flex that wraps rather than
   scrolling sideways: an admin writing a territory on a phone is the person least able to
   drag a row to find the button that removes it.
   ========================================================================================== */

/*
   THE COUNT OVER THE LIST, and the "first N of M" line under it. Both wrap rather than
   truncate: the count is the sentence that says the list is complete, and a clipped one
   reads as a short list.
*/
.ground__head[b-6xi433jtto],
.ground__more[b-6xi433jtto] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-4) var(--rk-sp-8);
    margin: 0 0 var(--rk-sp-8) 0;
}

.ground__more[b-6xi433jtto] {
    align-items: center;
    margin-bottom: var(--rk-sp-12);
}

.ground__count[b-6xi433jtto] {
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink);
}

.ground__order[b-6xi433jtto] {
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.ground__list[b-6xi433jtto] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    margin: 0 0 var(--rk-sp-12) 0;
    padding: 0;
    list-style: none;
}

/*
   One territory rule. The rung stamp leads because the ladder is the thing being read - a
   county row and a ZIP row look identical until you know which rung they sit on, and they
   differ by several hundred postal codes.
*/
.ground__rule[b-6xi433jtto] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-6) var(--rk-sp-8);
    border: var(--rk-sp-1) solid var(--rk-line);
    background: var(--rk-card);
}

.ground__rung[b-6xi433jtto] {
    flex: 0 0 auto;
}

.ground__what[b-6xi433jtto] {
    flex: 1 1 14ch;
    min-width: 0;
}

/*
   The ground itself, read as an identifier rather than as prose. 48201 and 48210 are two
   different counties and a proportional face makes them the same shape.
*/
.ground__value[b-6xi433jtto] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

/*
   THE PLACE A COUNTY FIPS NAMES - "Berks County, PA" beside 42011. Body face, not mono: it is
   a name to read, set beside an identifier to match.
*/
.ground__place[b-6xi433jtto] {
    margin-left: var(--rk-sp-6);
    font-family: var(--rk-font-body);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-body);
    color: var(--rk-ink-soft);
}

/*
   THE BLAST RADIUS, ON THE ROW. It is the number that decides whether this rule was a good
   idea, so it sits under the value rather than behind a hover.
*/
.ground__claim[b-6xi433jtto] {
    margin-top: var(--rk-sp-1);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.ground__act[b-6xi433jtto] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4);
    margin-left: auto;
}
/* /Pages/Stock.razor.rz.scp.css */
/*
    THE STOCK CHOOSER.

    Layout only, tokens only, no literal colour, size, radius or shadow. Deliberately the same
    filter bar as the equipment, customer and site lists - a person who learned one learned all
    of them.

    ⚠️ ::deep for any kit class. A Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

.bar[b-xe99nrppfz] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-16);
}

.bar__group[b-xe99nrppfz] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

/* RkField carries a bottom margin built for a stacked form; in a one-line bar it drops the
   GO button below the input it belongs to. */
.bar[b-xe99nrppfz]  .rk-field {
    margin-bottom: 0;
}

.bar[b-xe99nrppfz]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.8);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   ONE GROUP PER WarehouseKind. The heading is the kind's own resolved name - never a word
   written here - so a customer-added kind gets a group with no release.
   --------------------------------------------------------------------------------------- */
.grp[b-xe99nrppfz] {
    margin-bottom: var(--rk-sp-24);
}

.grp__head[b-xe99nrppfz] {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-10);
    margin-bottom: var(--rk-sp-10);
}

.grp__name[b-xe99nrppfz] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.grp__count[b-xe99nrppfz] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.places[b-xe99nrppfz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--rk-sp-10);
}

/* THE CUT CORNER is the house card shape. It is a clip-path rather than a border-radius, so
   it cannot be confused with a rounded control. */
.place[b-xe99nrppfz] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "code name"
        "meta meta"
        "short short";
    align-items: baseline;
    gap: var(--rk-sp-2) var(--rk-sp-8);
    width: 100%;
    padding: var(--rk-sp-10) var(--rk-sp-12);
    text-align: left;
    background: var(--rk-card);
    border: var(--rk-border-card) solid var(--rk-line);
    clip-path: polygon(
        0 0,
        calc(100% - var(--rk-corner)) 0,
        100% var(--rk-corner),
        100% 100%,
        0 100%);
    cursor: pointer;
    transition: background var(--rk-dur-ui) var(--rk-ease), border-color var(--rk-dur-ui) var(--rk-ease);
}

.place:hover[b-xe99nrppfz],
.place:focus-visible[b-xe99nrppfz] {
    background: var(--rk-hover-ghost);
    border-color: var(--rk-accent);
}

.place:active[b-xe99nrppfz] {
    background: var(--rk-press-ghost);
}

.place__code[b-xe99nrppfz] {
    grid-area: code;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-deep);
}

.place__name[b-xe99nrppfz] {
    grid-area: name;
    min-width: 0;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.place__meta[b-xe99nrppfz] {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4);
    min-height: 0;
}

.place__short[b-xe99nrppfz] {
    grid-area: short;
    min-height: var(--rk-sp-14);
}

.place__shortword[b-xe99nrppfz] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* A REAL SHORTAGE READS AS ONE. It is the row somebody acts on, and it is the row a zero
   would have hidden - which is why a count that could not be read renders nothing at all
   rather than falling into this branch or the one above it. */
.place__shortword--bad[b-xe99nrppfz] {
    color: var(--rk-warn-ink);
    font-weight: var(--rk-fw-semibold);
}

/* ---------------------------------------------------------------------------------------
   THE SENTENCE BOTH STOCK SCREENS END ON. Quiet, permanent, and true.
   --------------------------------------------------------------------------------------- */
.cachenote[b-xe99nrppfz] {
    margin: var(--rk-sp-24) 0 0;
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

/* WHAT IS ON IT. Quiet like the shortage word; "empty" is said, not alarmed - an empty van is
   a normal state, and the shortage word beside it is what somebody acts on. */
.place__heldword[b-xe99nrppfz] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    margin-right: var(--rk-sp-10);
}

.place__heldword--empty[b-xe99nrppfz] {
    color: var(--rk-steel);
    font-weight: var(--rk-fw-semibold);
}

/* The ?do= line - arrived from Take action - sits clear of the first group heading. */
.doing[b-xe99nrppfz] {
    margin-bottom: var(--rk-sp-18);
}
/* /Pages/StockCenter.razor.rz.scp.css */
/*
    THE TRUCK SCREEN.

    Layout only, tokens only, no literal colour, size, radius or shadow. The filter bar, the
    crumbs, the cells and the pager are deliberately identical to the equipment, customer and
    site screens - four screens that lay their filters out differently is four screens nobody
    trusts.

    ⚠️ ::deep for any kit class. A Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

/* ---------------------------------------------------------------------------------------
   CRUMBS - the same three rules EquipmentCenter uses, because a breadcrumb that looks
   different on one record page reads as a different product.
   --------------------------------------------------------------------------------------- */
.crumb[b-dc7qv8yeds] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    text-decoration: none;
}

.crumb:hover[b-dc7qv8yeds] {
    color: var(--rk-accent-deep);
}

.crumb--here[b-dc7qv8yeds] {
    color: var(--rk-ink);
    font-weight: var(--rk-fw-semibold);
}

.crumb__sep[b-dc7qv8yeds] {
    color: var(--rk-ink-soft);
    padding: 0 var(--rk-sp-4);
}

/* ---------------------------------------------------------------------------------------
   THE FILTER BAR
   --------------------------------------------------------------------------------------- */
.bar[b-dc7qv8yeds] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

/* THE SWAP LINK under the move sentence - which end of the move is the blank. It sits tight
   under the sentence it rewrites rather than among the boxes that fill it. */
.swap[b-dc7qv8yeds] {
    margin: 0 0 var(--rk-sp-10);
}

.bar__group[b-dc7qv8yeds] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.bar__lab[b-dc7qv8yeds] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    padding-bottom: var(--rk-sp-4);
}

/* RkField carries a bottom margin built for a stacked form; in a one-line bar it drops the
   GO button below the input it belongs to. */
.bar[b-dc7qv8yeds]  .rk-field {
    margin-bottom: 0;
}

.bar[b-dc7qv8yeds]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.8);
    max-width: 100%;
}

.bar[b-dc7qv8yeds]  .bar__date {
    width: calc(var(--rk-blank-max) * 0.9);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   THE MADLIBS. The sentence carries the CHOICES; the card under it carries the two or three
   things that are genuinely TYPED - a quantity somebody read off a shelf and the reason they
   are writing down. That is exactly the division lift-06 draws.
   --------------------------------------------------------------------------------------- */
.make[b-dc7qv8yeds] {
    margin-bottom: var(--rk-sp-20);
}

.typed[b-dc7qv8yeds] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
}

@media (min-width: 40rem) {
    .typed[b-dc7qv8yeds] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------------------
   THE GRID CELLS - shared shape with every other list in the product.
   --------------------------------------------------------------------------------------- */
.showing[b-dc7qv8yeds] {
    margin: 0 0 var(--rk-sp-8);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

.cell--code[b-dc7qv8yeds] {
    white-space: normal;
    overflow-wrap: anywhere;
}

.cell--name[b-dc7qv8yeds],
.cell--kind[b-dc7qv8yeds],
.cell--when[b-dc7qv8yeds] {
    min-width: 0;
}

.cell__title[b-dc7qv8yeds] {
    display: block;
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

.cell__tag[b-dc7qv8yeds] {
    display: block;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.cell__tag--bad[b-dc7qv8yeds] {
    color: var(--rk-warn-ink);
}

/* A NEGATIVE READS WITH A LEADING MINUS, NEVER IN PARENTHESES - half the people reading a
   stock ledger do not read the accounting convention, and stock leaving a van is the single
   commonest row on it. */
.cell--down[b-dc7qv8yeds] {
    color: var(--rk-danger-ink);
}

/* ---------------------------------------------------------------------------------------
   THE SELECTED PART STRIP
   --------------------------------------------------------------------------------------- */
.strip__line[b-dc7qv8yeds] {
    margin: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

/* ---------------------------------------------------------------------------------------
   PAGER
   --------------------------------------------------------------------------------------- */
.pager[b-dc7qv8yeds] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8);
    margin-top: var(--rk-sp-12);
}

.pager__word[b-dc7qv8yeds] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE SENTENCE BOTH STOCK SCREENS END ON.
   --------------------------------------------------------------------------------------- */
.cachenote[b-dc7qv8yeds] {
    margin: var(--rk-sp-24) 0 0;
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}
/* /Pages/StockCountCenter.razor.rz.scp.css */
/*
    ONE STOCK COUNT - the sheet, the packs, the walk and the money.

    Layout only, tokens only. The crumbs, the bar and the madlib shapes are StockCenter's;
    the sums row is the report page's. ::deep for any kit class.
*/

/* ---------------------------------------------------------------------------------------
   CRUMBS - the same rules every record page uses.
   --------------------------------------------------------------------------------------- */
.crumbs[b-8gojxsb7ek] {
    margin-bottom: var(--rk-sp-8);
}

.crumb[b-8gojxsb7ek] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    text-decoration: none;
}

.crumb:hover[b-8gojxsb7ek] {
    color: var(--rk-accent-deep);
}

.crumb--here[b-8gojxsb7ek] {
    color: var(--rk-ink);
    font-weight: var(--rk-fw-semibold);
}

.crumb__sep[b-8gojxsb7ek] {
    color: var(--rk-ink-soft);
    padding: 0 var(--rk-sp-4);
}

.meta__word[b-8gojxsb7ek] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE RECORD MADLIB
   --------------------------------------------------------------------------------------- */
.make[b-8gojxsb7ek] {
    margin-bottom: var(--rk-sp-20);
}

.typed[b-8gojxsb7ek] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
}

@media (min-width: 40rem) {
    .typed[b-8gojxsb7ek] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------------------
   THE WALK'S ARITHMETIC - the same figures-over-words row as the report page.
   --------------------------------------------------------------------------------------- */
.walk__sums[b-8gojxsb7ek] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-12) var(--rk-sp-24);
    padding: var(--rk-sp-12) 0;
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-16);
}

.sum[b-8gojxsb7ek] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    min-width: 0;
}

.sum__n[b-8gojxsb7ek] {
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.sum__w[b-8gojxsb7ek] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.sum--warn .sum__n[b-8gojxsb7ek] {
    color: var(--rk-warn-ink);
}

/* ---------------------------------------------------------------------------------------
   THE PACKS - the day-by-day plan as a row of small cut-corner cards.
   --------------------------------------------------------------------------------------- */
.packs[b-8gojxsb7ek] {
    margin-bottom: var(--rk-sp-16);
}

.packs__name[b-8gojxsb7ek] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    margin: 0 0 var(--rk-sp-8);
}

.packs__row[b-8gojxsb7ek] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-10);
}

.pack[b-8gojxsb7ek] {
    border: var(--rk-border-hair) solid var(--rk-line);
    background: var(--rk-card);
    padding: var(--rk-sp-10) var(--rk-sp-12);
    min-width: 0;
    flex: 1 1 16rem;
    max-width: 24rem;
}

.pack--done[b-8gojxsb7ek] {
    opacity: 0.75;
}

.pack__head[b-8gojxsb7ek] {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-8);
}

.pack__title[b-8gojxsb7ek] {
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.pack__meta[b-8gojxsb7ek] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
    margin-top: var(--rk-sp-2);
}

.pack__cats[b-8gojxsb7ek] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
    margin-top: var(--rk-sp-4);
    overflow-wrap: anywhere;
}

.pack__acts[b-8gojxsb7ek] {
    display: flex;
    gap: var(--rk-sp-6);
    margin-top: var(--rk-sp-8);
}

/* ---------------------------------------------------------------------------------------
   THE FILTER BAR AND THE LINE CELLS
   --------------------------------------------------------------------------------------- */
.bar[b-8gojxsb7ek] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-8gojxsb7ek] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.line__part[b-8gojxsb7ek] {
    color: var(--rk-ink);
}

.line__sub[b-8gojxsb7ek] {
    display: block;
    font-size: var(--rk-fs-3xs);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.line__wait[b-8gojxsb7ek] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.line__note[b-8gojxsb7ek] {
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink);
    font-style: italic;
    overflow-wrap: anywhere;
}

/* MISSING STOCK READS WITH A LEADING MINUS IN THE DANGER INK - same rule as the ledger. */
.line--down[b-8gojxsb7ek] {
    color: var(--rk-danger-ink);
}

/* ---------------------------------------------------------------------------------------
   MODALS
   --------------------------------------------------------------------------------------- */
.modal__lead[b-8gojxsb7ek] {
    margin: 0 0 var(--rk-sp-12);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink);
}

.cats[b-8gojxsb7ek] {
    border: var(--rk-border-hair) dashed var(--rk-line);
    padding: var(--rk-sp-10) var(--rk-sp-12);
    margin: var(--rk-sp-8) 0 0;
}

.cats__name[b-8gojxsb7ek] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    padding: 0 var(--rk-sp-4);
}

/* ---------------------------------------------------------------------------------------
   THE SENTENCE THE PAGE ENDS ON - the snapshot rule.
   --------------------------------------------------------------------------------------- */
.cachenote[b-8gojxsb7ek] {
    margin: var(--rk-sp-24) 0 0;
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}
/* /Pages/StockCounts.razor.rz.scp.css */
/*
    STOCK COUNTS - the tracker and the report.

    Layout only, tokens only, no literal colour, size, radius or shadow. The filter bar and
    the madlib shapes are StockCenter's, verbatim where possible - a counting screen that
    lays its bar out differently from the stock screen it feeds reads as a different product.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element.
*/

/* ---------------------------------------------------------------------------------------
   THE FILTER BAR - StockCenter's shape.
   --------------------------------------------------------------------------------------- */
.bar[b-8f68t7e2id] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-8f68t7e2id] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.bar[b-8f68t7e2id]  .rk-field {
    margin-bottom: 0;
}

.bar[b-8f68t7e2id]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.8);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   THE REQUEST MADLIB - sentence carries the choices, the card carries what is typed.
   --------------------------------------------------------------------------------------- */
.make[b-8f68t7e2id] {
    margin-bottom: var(--rk-sp-20);
}

.typed[b-8f68t7e2id] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
}

@media (min-width: 40rem) {
    .typed[b-8f68t7e2id] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------------------
   COUNT ROW CELLS
   --------------------------------------------------------------------------------------- */
.cnt__place[b-8f68t7e2id] {
    color: var(--rk-ink);
}

.cnt__sub[b-8f68t7e2id] {
    display: block;
    font-size: var(--rk-fs-3xs);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.cnt__var[b-8f68t7e2id] {
    color: var(--rk-warn-ink);
    margin-left: var(--rk-sp-4);
}

/* ---------------------------------------------------------------------------------------
   THE REPORT SUMS - the count's arithmetic as a row of figures, not a dashboard. Mono
   numbers over small caps words, cut from the same cloth as the header meta.
   --------------------------------------------------------------------------------------- */
.sums[b-8f68t7e2id] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-12) var(--rk-sp-24);
    padding: var(--rk-sp-12) 0;
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-16);
}

.sum[b-8f68t7e2id] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    min-width: 0;
}

.sum__n[b-8f68t7e2id] {
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.sum__w[b-8f68t7e2id] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-3xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.sum--bad .sum__n[b-8f68t7e2id] {
    color: var(--rk-danger-ink);
}

/* ---------------------------------------------------------------------------------------
   THE REPORT SECTIONS
   --------------------------------------------------------------------------------------- */
.rpt[b-8f68t7e2id] {
    margin-bottom: var(--rk-sp-20);
}

.rpt__name[b-8f68t7e2id] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    margin: 0 0 var(--rk-sp-8);
}

/* ---------------------------------------------------------------------------------------
   THE SENTENCE THE REPORT ENDS ON - the two-moneys rule, same shape as the stock screens'
   ledger note.
   --------------------------------------------------------------------------------------- */
.cachenote[b-8f68t7e2id] {
    margin: var(--rk-sp-24) 0 0;
    padding-top: var(--rk-sp-10);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
    font-size: var(--rk-fs-2xs);
    color: var(--rk-ink-soft);
}
/* /Pages/StorageManager.razor.rz.scp.css */
/* ==========================================================================================
   THE STORAGE MANAGER - the browse pane and the previewer beside it.

   EVERY VALUE HERE IS A TOKEN FROM rk-tokens.css. No raw colour, size, radius or shadow -
   CLAUDE.md's Conventions, and the reason the control kit exists at all.

   ⚠️ NOTHING PAIRS --rk-ink WITH --rk-white. The dark theme resolves both to #e9e4d8, giving a
   1:1 contrast ratio and invisible text. The hash block below is exactly where that temptation
   lives - sixty-four hex characters "want" to look like a terminal - so it is --rk-field under
   --rk-ink, which has real contrast in both themes. Permanent dark chrome, if it were ever
   wanted, is --rk-chrome-bg / --rk-chrome-ink, which do not flip.

   ONE APP, DESKTOP AND PHONE. The two panes become one column under 900px and the previewer
   goes BELOW the list rather than beside it, which is the right order: on a phone you choose
   first and look second. Nothing scrolls sideways - a file manager that did would be unusable
   in a truck.
   ========================================================================================== */

.stman[b-zd60llnd3k] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-5);
}

/* ------------------------------------------------------------------------------- THE BAR */

.stman__bar[b-zd60llnd3k] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-4);
    align-items: flex-end;
    margin-block: var(--rk-sp-4);
}

/* ----------------------------------------------------------------------------- THE PANES */

.stman__panes[b-zd60llnd3k] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--rk-sp-5);
    align-items: start;
}

.stman__browse[b-zd60llnd3k] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-3);
    min-width: 0;
}

.stman__detail[b-zd60llnd3k] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    min-width: 0;
    padding: var(--rk-sp-4);
    background: var(--rk-card);
    border: var(--rk-border-hair) solid var(--rk-line);
    border-radius: var(--rk-radius-sm);
}

/*
   THE PREVIEW PANE NEEDS A FLOOR AND A CEILING. Without a minimum it collapses to nothing on a
   text file whose first line is short; without a maximum a tall photo pushes the metadata and
   the buttons off the bottom of the screen, which is where the only way to act on the file is.
*/
.stman__preview[b-zd60llnd3k] {
    min-height: 16rem;
    max-height: 60vh;
}

/* ------------------------------------------------------------------------- THE DETAIL BODY */

.stman__meta[b-zd60llnd3k] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
}

.stman__facts[b-zd60llnd3k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--rk-sp-3) var(--rk-sp-4);
    margin: 0;
}

.stman__facts dt[b-zd60llnd3k] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.stman__facts dd[b-zd60llnd3k] {
    margin: var(--rk-sp-1) 0 0;
    font-size: var(--rk-fs-base);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

/*
   THE HASH. Sixty-four hex characters that have to be readable enough to compare against
   another sixty-four, and short enough not to own the pane. Mono, small, wrapping anywhere,
   and spanning the whole grid because a column-width hash wraps into a block nobody can scan.
*/
.stman__hash[b-zd60llnd3k] {
    grid-column: 1 / -1;
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-2xs);
    background: var(--rk-field);
    color: var(--rk-ink);
    padding: var(--rk-sp-2);
    border-radius: var(--rk-radius-xs);
    overflow-wrap: anywhere;
}

.stman__edit[b-zd60llnd3k] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    padding-top: var(--rk-sp-4);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.stman__acts[b-zd60llnd3k] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-3);
    align-items: center;
}

/* --------------------------------------------------------------------------- THE PANELS */

.stman__panel[b-zd60llnd3k] {
    margin-top: var(--rk-sp-4);
}

.stman__lead[b-zd60llnd3k] {
    margin: 0 0 var(--rk-sp-4);
    max-width: var(--rk-measure);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.stman__sub[b-zd60llnd3k] {
    margin: 0 0 var(--rk-sp-3);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.stman__receipt[b-zd60llnd3k] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-3);
    margin-top: var(--rk-sp-5);
    padding-top: var(--rk-sp-4);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

/*
   ::deep BECAUSE THESE TARGET CHILD COMPONENTS' OWN MARKUP. Scoped CSS stamps this page's
   attribute onto THIS file's elements only, so a rule meant for RkFileDrop's or RkFileCrumbs'
   internals never matches without it - and the rule then silently does nothing, which is the
   most expensive kind of CSS bug because it reads as a specificity problem.
*/
.stman__browse[b-zd60llnd3k]  .rk-crumbs {
    padding-bottom: var(--rk-sp-2);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.stman__panel[b-zd60llnd3k]  .rk-drop {
    margin-bottom: var(--rk-sp-4);
}

@media (max-width: 900px) {

    /*
       ONE COLUMN, AND THE PREVIEW LANDS UNDER THE LIST because that is already the DOM order -
       no reordering rule is needed and none is written. On a phone the sequence is choose then
       look, and a pane that sat above the list would push the list itself off the first screen
       before anybody had picked anything.
    */
    .stman__panes[b-zd60llnd3k] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {

    .stman__facts[b-zd60llnd3k] {
        grid-template-columns: 1fr;
    }

    .stman__preview[b-zd60llnd3k] {
        max-height: 50vh;
    }
}
/* /Pages/StorageSources.razor.rz.scp.css */
/* ==========================================================================================
   STORAGE SOURCES - the ladder, and the two catalogs under it.

   EVERY VALUE HERE IS A TOKEN FROM rk-tokens.css. No raw colour, size, radius or shadow -
   CLAUDE.md's Conventions, and the reason the control kit exists at all.

   ⚠️ NOTHING PAIRS --rk-ink WITH --rk-white. The dark theme resolves both to #e9e4d8, giving
   a 1:1 contrast ratio and invisible text. That shipped once and was caught only by rendering
   the real app. The tempting place here is the source key and the container path, which
   "want" to look like a terminal; they are --rk-field under --rk-ink instead, which has real
   contrast in both themes.

   ONE APP, DESKTOP AND PHONE. The editor grid collapses to one column, the ladder cards stack,
   and the row-action buttons wrap rather than pushing the table sideways. Somebody fixing
   storage at 7am on a phone because nothing is uploading is a real case, and a horizontally
   scrolling page makes the rest of the screen unusable while they do it.
   ========================================================================================== */

.stsrc[b-nvcorm6vi4] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-5);
}

/* --------------------------------------------------------------------------- THE LADDER */

.stsrc__ladder[b-nvcorm6vi4] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    margin-block: var(--rk-sp-4);
}

.stsrc__rolehead[b-nvcorm6vi4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-3);
}

.stsrc__rolename[b-nvcorm6vi4] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.stsrc__spacer[b-nvcorm6vi4] {
    flex: 1 1 auto;
}

.stsrc__answeredby[b-nvcorm6vi4] {
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.stsrc__why[b-nvcorm6vi4] {
    margin: 0 0 var(--rk-sp-3);
    max-width: var(--rk-measure);
    line-height: var(--rk-lh-prose);
}

/*
   THE TWO RUNGS, ALWAYS BOTH. STORAGE.md 4.2 reports the losing rung on purpose, because
   "what happens if I remove this binding" is the next question - so neither is hidden when it
   did not win, and they read as a numbered sequence rather than as two unrelated facts.
*/
.stsrc__rungs[b-nvcorm6vi4] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    padding-top: var(--rk-sp-3);
    border-top: var(--rk-border-hair) solid var(--rk-line);
}

.stsrc__rung[b-nvcorm6vi4] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-3);
}

.stsrc__rungwhy[b-nvcorm6vi4] {
    flex: 1 1 18rem;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/* ------------------------------------------------------------------------- SHARED PIECES */

.stsrc__facts[b-nvcorm6vi4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--rk-sp-3) var(--rk-sp-5);
    margin: 0 0 var(--rk-sp-3);
}

.stsrc__facts dt[b-nvcorm6vi4] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.stsrc__facts dd[b-nvcorm6vi4] {
    margin: var(--rk-sp-1) 0 0;
    font-size: var(--rk-fs-base);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

.stsrc__lead[b-nvcorm6vi4] {
    margin: 0 0 var(--rk-sp-4);
    max-width: var(--rk-measure);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.stsrc__bad[b-nvcorm6vi4] {
    color: var(--rk-danger);
    font-weight: var(--rk-fw-semibold);
}

.stsrc__muted[b-nvcorm6vi4] {
    color: var(--rk-ink-soft);
    font-size: var(--rk-fs-sm);
}

.stsrc__acts[b-nvcorm6vi4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-3);
    align-items: center;
}

/* ---------------------------------------------------------------------------- THE TABLES */

.stsrc__code[b-nvcorm6vi4] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.stsrc__name[b-nvcorm6vi4] {
    font-weight: var(--rk-fw-semibold);
    line-height: var(--rk-lh-snug);
}

.stsrc__where[b-nvcorm6vi4] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    overflow-wrap: anywhere;
}

/*
   THE CAPABILITY CLAIMS. Deliberately small and quiet: they are a claim and not a fact until
   the source test agrees, and giving them the weight of a verified column would be the screen
   asserting something it does not know.
*/
.stsrc__can[b-nvcorm6vi4] {
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink-soft);
    line-height: var(--rk-lh-snug);
}

.stsrc__rowacts[b-nvcorm6vi4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-2);
}

/* --------------------------------------------------------------------------- THE EDITORS */

.stsrc__editor[b-nvcorm6vi4] {
    margin-top: var(--rk-sp-5);
}

.stsrc__report[b-nvcorm6vi4] {
    margin-top: var(--rk-sp-5);
}

.stsrc__grid[b-nvcorm6vi4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--rk-sp-4);
    margin-bottom: var(--rk-sp-5);
}

.stsrc__switches[b-nvcorm6vi4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--rk-sp-4);
    margin-bottom: var(--rk-sp-5);
}

.stsrc__sub[b-nvcorm6vi4] {
    margin: var(--rk-sp-5) 0 var(--rk-sp-3);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-md);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink);
}

/*
   ::deep BECAUSE THESE TARGET A CHILD COMPONENT'S OWN MARKUP. Scoped CSS stamps this page's
   attribute onto THIS file's elements only, so a rule meant for RkNotice's or RkCard's
   internals never matches without it - the rule silently does nothing, which is the most
   expensive kind of CSS bug because it looks like a specificity problem.
*/
.stsrc[b-nvcorm6vi4]  .rk-notice + .rk-notice {
    margin-top: var(--rk-sp-4);
}

@media (max-width: 640px) {

    .stsrc__grid[b-nvcorm6vi4],
    .stsrc__switches[b-nvcorm6vi4] {
        grid-template-columns: 1fr;
    }

    .stsrc__facts[b-nvcorm6vi4] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Truck.razor.rz.scp.css */
/*
    THE TRUCK SCREEN.

    Layout only, tokens only, no literal colour.

    ONE APP, DESKTOP AND PHONE - but this screen is designed for the phone and allowed to
    look the same on a desktop. It is used one-handed, outdoors, in gloves, at six in the
    morning, which sets three rules the rest of the app does not need so badly:

      1. EVERY CONTROL IS AT LEAST --rk-tap (56px). The kit's RkSize.Large already asks for
         that floor; the scan row below keeps its GO button on the floor too rather than
         shrinking it to sit beside an input.
      2. THE SCAN BOX IS THE BIGGEST THING ON THE PAGE after the code of the truck in hand.
         A scanner is a keyboard, so the field has to be obviously the target.
      3. NOTHING RELIES ON HOVER. lift-03 measured the source app at 95 :active rules to 2
         :hover rules and called that "the numeric signature of a touch-only app". This
         screen adds no hover state at all.

    NO COLOUR PAIR IS DECLARED HERE. --rk-white and --rk-ink resolve to the same value in the
    dark theme, so pairing them paints invisible text - it shipped once. Every surface on
    this page is drawn by the kit, which already knows.

    ::deep for anything inside a kit control - a Class passed to RkCard or RkTextInput lands
    on THAT component's scoped element, so a bare rule here matches nothing.
*/

.truck[b-mdt3uq6gq2] {
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    padding-bottom: var(--rk-sp-28);
}

.truck[b-mdt3uq6gq2]  .truck__now,
.truck[b-mdt3uq6gq2]  .truck__take,
.truck[b-mdt3uq6gq2]  .truck__fleet,
.truck[b-mdt3uq6gq2]  .truck__back,
.truck[b-mdt3uq6gq2]  .truck__past {
    margin-bottom: var(--rk-sp-14);
}

/* ---------------------------------------------------------------------------------------
   WHAT IS IN YOUR HANDS. The one thing a driver checks from three feet away, so the code
   takes the page-title size rather than a card-header size.
   --------------------------------------------------------------------------------------- */
.truck__code[b-mdt3uq6gq2] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-7xl);
    font-weight: var(--rk-fw-bold);
    letter-spacing: var(--rk-track-7xl);
    line-height: var(--rk-lh-flat);
    text-transform: uppercase;
    color: var(--rk-ink);
}

.truck__name[b-mdt3uq6gq2] {
    margin: 0 0 var(--rk-sp-16);
    font-size: var(--rk-fs-2xl);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/* The facts under it. Two columns on a phone, four when there is room - these are short
   label/value pairs and stacking them one per line wastes the screen a driver is squinting
   at. */
.truck__facts[b-mdt3uq6gq2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rk-sp-12) var(--rk-sp-16);
    margin: 0;
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 560px) {
    .truck__facts[b-mdt3uq6gq2] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.truck__fact--wide[b-mdt3uq6gq2] {
    grid-column: 1 / -1;
}

.truck__fact dt[b-mdt3uq6gq2] {
    font-size: var(--rk-fs-2xs);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-steel);
}

.truck__fact dd[b-mdt3uq6gq2] {
    margin: var(--rk-sp-2) 0 0;
    font-size: var(--rk-fs-2xl);
    color: var(--rk-ink);
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------------------
   THE SCAN ROW. Input and commit side by side above 420px, stacked below it - a phone in
   portrait has no room for both and the button must not shrink below the tap floor to fit.
   --------------------------------------------------------------------------------------- */
.scan[b-mdt3uq6gq2] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--rk-sp-10);
}

@media (min-width: 420px) {
    .scan[b-mdt3uq6gq2] {
        flex-direction: row;
        align-items: flex-end;
    }

    .scan[b-mdt3uq6gq2]  .scan__box {
        flex: 1;
        min-width: 0;
    }

    /* RkField carries a bottom margin for stacked forms; in a one-line row that margin
       drops the button below the input it belongs to. */
    .scan[b-mdt3uq6gq2]  .rk-field {
        margin-bottom: 0;
    }

    .scan[b-mdt3uq6gq2]  .scan__go {
        flex: 0 0 auto;
        min-width: calc(var(--rk-btn-min) * 1.6);
    }
}

/*
    THE TAG IS READ IN MONO AND BIG. A vehicle tag is a string of characters with no words
    in it, so 0/O and 1/l have to be distinguishable, and a driver checking what the scanner
    actually picked up is checking it at arm's length.
*/
.scan[b-mdt3uq6gq2]  .scan__box .rk-input {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-4xl);
    letter-spacing: var(--rk-track-2xs);
}

.scan__said[b-mdt3uq6gq2] {
    margin: var(--rk-sp-10) 0 var(--rk-sp-14);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE FLEET SEARCH. Same shape as the search bars on the customer and site lists, on
   purpose: a person who learned one learned all three.
   --------------------------------------------------------------------------------------- */
.find[b-mdt3uq6gq2] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    margin-bottom: var(--rk-sp-12);
}

.find[b-mdt3uq6gq2]  .rk-field {
    margin-bottom: 0;
}

.find[b-mdt3uq6gq2]  .find__box {
    flex: 1;
    min-width: calc(var(--rk-blank-max) * 0.8);
}

.find[b-mdt3uq6gq2]  .find__go {
    flex: 0 0 auto;
}

/* The row list. RkRow draws itself; this only stacks them. */
.fleet[b-mdt3uq6gq2] {
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------------------------------
   TODAY'S HISTORY.

   Deliberately NOT RkRow - see the note in the markup. RkRow is a button and none of these
   are pressable, so the shape is borrowed and the semantics are not: a real <ul>, the same
   mono code badge, the same dashed perforation between items.
   --------------------------------------------------------------------------------------- */
.past[b-mdt3uq6gq2] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.past__item[b-mdt3uq6gq2] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-12);
    min-height: var(--rk-row-h);
    padding: var(--rk-sp-8) 0;
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
}

.past__item:last-child[b-mdt3uq6gq2] {
    border-bottom: 0;
}

.past__code[b-mdt3uq6gq2] {
    flex: 0 0 auto;
    font-size: var(--rk-fs-xl);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.past__body[b-mdt3uq6gq2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.past__title[b-mdt3uq6gq2] {
    font-size: var(--rk-fs-xl);
    color: var(--rk-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.past__meta[b-mdt3uq6gq2] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}
/* /Pages/Vendors.razor.rz.scp.css */
/*
    THE SUPPLIER LIST AND THE SUPPLIER PANEL.

    Layout only, tokens only, no literal colour. Deliberately the same shape as the customer
    list: a person who learned one learned both, and two directory screens in one product that
    lay their filters out differently is two screens nobody trusts.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

.bar[b-ybfrlulh06] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-ybfrlulh06] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

/* RkField is built for a stacked form and carries a bottom margin. In a one-line bar that
   margin leaves the GO button sitting below the input it belongs to. */
.bar[b-ybfrlulh06]  .rk-field {
    margin-bottom: 0;
}

.bar[b-ybfrlulh06]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.8);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   THE CREATE MADLIB. The sentence carries the CHOICE; the card under it carries the
   TRANSCRIPTION, which is exactly the division lift-06 draws.
   --------------------------------------------------------------------------------------- */
.make[b-ybfrlulh06] {
    margin-bottom: var(--rk-sp-20);
}

.typed[b-ybfrlulh06] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .typed[b-ybfrlulh06] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .typed[b-ybfrlulh06] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/*
    A supplier name gets the whole row. "Consolidated Electrical Distributors" is a real one
    and it is thirty-five characters before ESC even truncated it - putting that in a third of
    the width hides the end of the name in the only place somebody can check it.
*/
.typed[b-ybfrlulh06]  .typed--span {
    grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------------------
   THE OPEN SUPPLIER.

   It sits ABOVE the list rather than replacing it, so picking the right one out of three
   colliding names is a click and a glance rather than a click and a back button.
   --------------------------------------------------------------------------------------- */
.detail[b-ybfrlulh06] {
    margin-bottom: var(--rk-sp-20);
}

.head[b-ybfrlulh06] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    min-width: 0;
}

.head__who[b-ybfrlulh06] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.head__name[b-ybfrlulh06] {
    font-size: var(--rk-fs-3xl);
    font-weight: var(--rk-fw-semibold);
    min-width: 0;
    overflow-wrap: anywhere;
}

.head__code[b-ybfrlulh06] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.head__marks[b-ybfrlulh06] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}

/* Pushed right on a desk, wrapped underneath on a phone - margin-left auto does both. */
.head__acts[b-ybfrlulh06] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
    margin-left: auto;
}

/* ---- THE FACTS ------------------------------------------------------------------------ */
.facts[b-ybfrlulh06] {
    display: grid;
    grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
    gap: var(--rk-sp-5) var(--rk-sp-14);
    margin: var(--rk-sp-14) 0 0;
}

.facts dt[b-ybfrlulh06] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.facts dd[b-ybfrlulh06] {
    margin: 0;
    min-width: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

@media (max-width: 520px) {
    .facts[b-ybfrlulh06] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--rk-sp-2) 0;
    }

    .facts dd[b-ybfrlulh06] {
        margin-bottom: var(--rk-sp-8);
    }
}

.facts__notes[b-ybfrlulh06] {
    margin: var(--rk-sp-12) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    white-space: pre-wrap;
}

/* ---- ONE BRANCH IS AN ADDRESS ---------------------------------------------------------
   1,712 of 1,725 suppliers land here. It is deliberately NOT styled like a table row: a
   single row with a header reads as a list that lost the rest of itself.
   --------------------------------------------------------------------------------------- */
.sole[b-ybfrlulh06] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-6) var(--rk-sp-12);
    margin-top: var(--rk-sp-14);
    padding-top: var(--rk-sp-12);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.sole__label[b-ybfrlulh06] {
    flex: none;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.sole__addr[b-ybfrlulh06] {
    min-width: 0;
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    overflow-wrap: anywhere;
}

.sole__marks[b-ybfrlulh06] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
}

/* ---- SEVERAL BRANCHES ------------------------------------------------------------------ */
.branches[b-ybfrlulh06] {
    list-style: none;
    margin: var(--rk-sp-14) 0 0;
    padding: 0;
}

.branches__row[b-ybfrlulh06] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6) var(--rk-sp-12);
    padding: var(--rk-sp-8) 0;
    min-height: var(--rk-tap);
}

.branches__row + .branches__row[b-ybfrlulh06] {
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.branches__who[b-ybfrlulh06] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    min-width: 0;
    flex: 1 1 18rem;
}

.branches__name[b-ybfrlulh06] {
    font-weight: var(--rk-fw-semibold);
    overflow-wrap: anywhere;
}

.branches__addr[b-ybfrlulh06] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.branches__marks[b-ybfrlulh06] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
}

.branches__acts[b-ybfrlulh06] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
    margin-left: auto;
}

/* THE PEOPLE are drawn by Components/Contacts/OwnerContacts, which carries its own styles. */

/* ---------------------------------------------------------------------------------------
   THE MODAL FORMS. Two columns inside a Wide dialog, one on a phone.
   --------------------------------------------------------------------------------------- */
.form[b-ybfrlulh06] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
}

@media (min-width: 640px) {
    .form[b-ybfrlulh06] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form[b-ybfrlulh06]  .form--span {
    grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------------------
   THE CELLS.
   --------------------------------------------------------------------------------------- */
.cell--code[b-ybfrlulh06] {
    white-space: nowrap;
}

.cell--name[b-ybfrlulh06] {
    min-width: 0;
}

.cell__title[b-ybfrlulh06] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
    🛑 THIS LINE IS THE DISAMBIGUATOR AND IT IS NEVER HIDDEN. Three live rows read
    "Consolidated Electrical Distributo" because ESC's column is 35 characters, and the branch
    city under the name is how a buyer tells them apart. Truncating it would defeat the reason
    it is drawn.
*/
.cell__tag[b-ybfrlulh06] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------------------
   THE PAGER.
   --------------------------------------------------------------------------------------- */
.pager[b-ybfrlulh06] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-10) 0 var(--rk-sp-20);
}

.pager__word[b-ybfrlulh06] {
    margin-right: auto;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}
/* /Pages/Warehouses.razor.rz.scp.css */
/*
    THE FLEET, AND THE VOCABULARY BEHIND IT.

    Layout only, tokens only, no literal colour. Deliberately the same shape as the supplier
    and customer lists: a person who learned one learned all three, and three directory screens
    in one product that lay their filters out differently is three screens nobody trusts.

    ⚠️ ::deep for any kit class - a Class passed to a kit control lands on THAT component's
    scoped element, so a bare rule here compiles against this page's scope and matches nothing.
*/

.bar[b-diy0j79yw4] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-diy0j79yw4] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

/* RkField is built for a stacked form and carries a bottom margin. In a one-line bar that
   margin leaves the GO button sitting below the input it belongs to. */
.bar[b-diy0j79yw4]  .rk-field {
    margin-bottom: 0;
}

.bar[b-diy0j79yw4]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.8);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   THE CREATE MADLIB. The sentence carries the CHOICE - which is the KIND, because every rule
   on the row follows from it - and the card under it carries the TRANSCRIPTION.
   --------------------------------------------------------------------------------------- */
.make[b-diy0j79yw4] {
    margin-bottom: var(--rk-sp-20);
}

.typed[b-diy0j79yw4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .typed[b-diy0j79yw4] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .typed[b-diy0j79yw4] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.typed[b-diy0j79yw4]  .typed--span {
    grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------------------
   THE OPEN WAREHOUSE.

   It sits ABOVE the list rather than replacing it, so picking the right van out of a fleet is
   a click and a glance rather than a click and a back button. The tabindex in the markup is
   what stops it opening off-screen - see the comment there.
   --------------------------------------------------------------------------------------- */
.detail[b-diy0j79yw4] {
    margin-bottom: var(--rk-sp-20);
}

.head[b-diy0j79yw4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10) var(--rk-sp-14);
    min-width: 0;
}

.head__who[b-diy0j79yw4] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.head__name[b-diy0j79yw4] {
    font-size: var(--rk-fs-3xl);
    font-weight: var(--rk-fw-semibold);
    min-width: 0;
    overflow-wrap: anywhere;
}

.head__code[b-diy0j79yw4] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

.head__marks[b-diy0j79yw4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
}

/* Pushed right on a desk, wrapped underneath on a phone - margin-left auto does both. */
.head__acts[b-diy0j79yw4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-6);
    margin-left: auto;
}

/* ---- THE FACTS ------------------------------------------------------------------------ */
.facts[b-diy0j79yw4] {
    display: grid;
    grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
    gap: var(--rk-sp-5) var(--rk-sp-14);
    margin: var(--rk-sp-14) 0 0;
}

.facts dt[b-diy0j79yw4] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    align-self: baseline;
}

.facts dd[b-diy0j79yw4] {
    margin: 0;
    min-width: 0;
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    overflow-wrap: anywhere;
}

@media (max-width: 520px) {
    .facts[b-diy0j79yw4] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--rk-sp-2) 0;
    }

    .facts dd[b-diy0j79yw4] {
        margin-bottom: var(--rk-sp-8);
    }
}

.facts__notes[b-diy0j79yw4] {
    margin: var(--rk-sp-12) 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    white-space: pre-wrap;
}

/* ---------------------------------------------------------------------------------------
   THE KINDS.

   A LIST RATHER THAN A TABLE, and the reason is in the markup: a row carries three buttons,
   and a table row that is itself a button swallows every one of them. It is also four rows on
   a shipped company - a grid with a header over four rows reads as a report.
   --------------------------------------------------------------------------------------- */
.kinds[b-diy0j79yw4] {
    list-style: none;
    margin: var(--rk-sp-16) 0 var(--rk-sp-20);
    padding: 0;
}

.kinds__row[b-diy0j79yw4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-8) var(--rk-sp-14);
    padding: var(--rk-sp-12) 0;
    min-height: var(--rk-tap);
}

.kinds__row + .kinds__row[b-diy0j79yw4] {
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

.kinds__who[b-diy0j79yw4] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-2);
    min-width: 0;
    flex: 1 1 22rem;
}

.kinds__name[b-diy0j79yw4] {
    font-size: var(--rk-fs-lg);
    font-weight: var(--rk-fw-semibold);
    overflow-wrap: anywhere;
}

/*
    🛑 THE ENGLISH HANDLE IS ALWAYS DRAWN BESIDE THE LABEL, and it is not decoration. Decision
    10: the InternalName is the stable machine handle and is always English, while the label
    beside it is translatable and renameable. Somebody wiring an integration or writing a
    workflow token needs the handle, and it is the only thing on the row that will not move.
*/
.kinds__handle[b-diy0j79yw4] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.kinds__does[b-diy0j79yw4] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

.kinds__note[b-diy0j79yw4] {
    margin-top: var(--rk-sp-4);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    overflow-wrap: anywhere;
}

.kinds__marks[b-diy0j79yw4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
}

.kinds__acts[b-diy0j79yw4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-6);
    margin-left: auto;
}

/* ---------------------------------------------------------------------------------------
   THE MODAL FORMS. Two columns inside a Wide dialog, one on a phone.
   --------------------------------------------------------------------------------------- */
.form[b-diy0j79yw4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-16);
}

@media (min-width: 640px) {
    .form[b-diy0j79yw4] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.form[b-diy0j79yw4]  .form--span {
    grid-column: 1 / -1;
}

/*
    THE THREE FLAGS GET THE WHOLE WIDTH AND STACK, NEVER SIT SIDE BY SIDE. Each one carries a
    sentence explaining what it means - a reader has to know what a stocking pattern IS before
    ticking one - and two columns of explanatory prose is two columns nobody reads.
*/
.flags[b-diy0j79yw4] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-8);
    margin: var(--rk-sp-8) 0 var(--rk-sp-16);
    padding: var(--rk-sp-12) var(--rk-sp-14);
    border: var(--rk-border-hair) dashed var(--rk-line);
    border-radius: var(--rk-radius-sm);
}

/* ---------------------------------------------------------------------------------------
   THE CELLS.
   --------------------------------------------------------------------------------------- */
.cell--code[b-diy0j79yw4] {
    white-space: nowrap;
}

.cell--name[b-diy0j79yw4] {
    min-width: 0;
}

.cell__title[b-diy0j79yw4] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell__tag[b-diy0j79yw4] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

/*
    WHAT IT DOES IS A SENTENCE, NOT A CHIP, AND IT IS NEVER TRUNCATED. "a posting bucket -
    somewhere to post what has no place" is the difference between a row somebody can trust and
    a row they have to open. It is the only column that explains why a warehouse behaves the way
    it does, and clipping it would defeat the reason it is drawn.
*/
.cell__does[b-diy0j79yw4] {
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------------------
   THE PAGER.
   --------------------------------------------------------------------------------------- */
.pager[b-diy0j79yw4] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-10) 0 var(--rk-sp-20);
}

.pager__word[b-diy0j79yw4] {
    margin-right: auto;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}
/* /Pages/WorkflowActivity.razor.rz.scp.css */
/*
    WORKFLOW ACTIVITY.

    Layout only. Every control belongs to Riproka.UI.Controls and every colour, size, radius
    and shadow below is a --rk-* token - there is not a literal on this page.

    ⚠️ ::deep IS REQUIRED FOR ANY KIT CLASS. A Class passed to a kit control lands on THAT
    component's scoped element, so a bare `.bar__pick { }` here compiles to
    `.bar__pick[b-thispage]` and silently matches nothing. Anchoring on an element this file
    owns - `.bar` - is what reaches through. Workflows.razor.css records the same trap.

    The bar, the cells and the pager are deliberately the SAME shape as Workflows.razor.css.
    A filter bar that moves between screens is a filter bar nobody trusts, and these two pages
    are one click apart.
*/

/* ---------------------------------------------------------------------------------------
   THE DAY'S OWN PROCEDURES
   Kirk: "place for regular activty workflows - start day/end day etc."
   --------------------------------------------------------------------------------------- */
.day[b-nelltzwi35] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-12);
    padding: var(--rk-sp-16) 0 var(--rk-sp-20);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.day__head[b-nelltzwi35] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
}

.day__name[b-nelltzwi35] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    letter-spacing: var(--rk-track-xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.day__why[b-nelltzwi35] {
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.day__none[b-nelltzwi35] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

/*
    A STRIP, NOT A COLUMN. There are two or three of these on a real estate - opening up,
    closing down - and a full-width card each would push the run table below the fold on the
    screen somebody came here to read.
*/
.day__strip[b-nelltzwi35] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rk-sp-12);
}

@media (min-width: 720px) {
    .day__strip[b-nelltzwi35] {
        grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    }
}

.day__blurb[b-nelltzwi35] {
    margin: 0 0 var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.day__facts[b-nelltzwi35] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8);
}

/* ---------------------------------------------------------------------------------------
   THE FILTER BAR
   --------------------------------------------------------------------------------------- */
.bar[b-nelltzwi35] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-nelltzwi35] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

/*
    RkField carries a bottom margin because it is built for a stacked form. In a single-line
    filter bar that margin is what leaves the GO button sitting below the input it belongs to.
*/
.bar[b-nelltzwi35]  .rk-field {
    margin-bottom: 0;
}

.bar[b-nelltzwi35]  .bar__pick {
    width: var(--rk-blank-max);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   THE CELLS
   --------------------------------------------------------------------------------------- */
.cell--name[b-nelltzwi35],
.cell--state[b-nelltzwi35] {
    min-width: 0;
}

.cell__title[b-nelltzwi35] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cell__tag[b-nelltzwi35] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.cell__link[b-nelltzwi35] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

/* ---------------------------------------------------------------------------------------
   THE PAGER
   --------------------------------------------------------------------------------------- */
.pager[b-nelltzwi35] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-10) 0 var(--rk-sp-20);
}

.pager__word[b-nelltzwi35] {
    margin-right: auto;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE ACTIVITY PROCEDURES - named here, started elsewhere.

   Set back and quieted rather than styled like the strip above, because a card with no
   button reads as a broken card. A list with a sentence reads as a signpost.
   --------------------------------------------------------------------------------------- */
.day__aside[b-nelltzwi35] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rk-sp-8);
    padding: var(--rk-sp-12);
    border: var(--rk-border-hair) dashed var(--rk-line-hard);
    border-radius: var(--rk-radius-xs);
}

.day__asidename[b-nelltzwi35] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xl);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

.day__asidewhy[b-nelltzwi35] {
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.day__asidelist[b-nelltzwi35] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rk-sp-8) var(--rk-sp-16);
}

.day__asidelist li[b-nelltzwi35] {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-6);
}

.day__asideitem[b-nelltzwi35] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-ink);
}

.day__asidetag[b-nelltzwi35] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-3xs);
    color: var(--rk-ink-soft);
}
/* /Pages/WorkflowBuilder.razor.rz.scp.css */
/*
    THE WORKFLOW BUILDER.

    Layout only. Every control belongs to Riproka.UI.Controls and every colour, size, radius
    and shadow below is a --rk-* token - there is not a literal on this page.

    ⚠️ ::deep IS REQUIRED FOR ANY KIT CLASS. A Class passed to a kit control lands on THAT
    component's scoped element, so anchoring on an element this file owns is what reaches
    through.
*/

.pane[b-69nqbqkafh] {
    padding-top: var(--rk-sp-14);
}

.pane__act[b-69nqbqkafh] {
    display: flex;
    justify-content: flex-end;
    padding: var(--rk-sp-16) 0 var(--rk-sp-24);
}

/* ---------------------------------------------------------------------------------------
   THE TAB STRIP WRAPS.

   RkTabs lays its strip out with rk-scroll-x - overflow-x:auto with scrollbar-width:none.
   That is right for a chip row, where the row is decoration and a scrollbar would sit on
   top of content. It is wrong for the primary navigation of a screen: measured at 375px on
   2026-09-19 the strip's clientWidth was 343 against a scrollWidth of 405, so VERSIONS - the
   tab that answers "is what I am looking at what the field is running?" - hung 62px past the
   clip with no scrollbar drawn to hint that anything was there.

   Wrapping costs one line and one row of height on a phone, and it makes every tab reachable
   without a gesture nobody was told about. ::deep because the class belongs to RkTabs; the
   wrapper div is the element this file owns.
   --------------------------------------------------------------------------------------- */
.tabs[b-69nqbqkafh]  .rk-tabs__strip {
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------------------
   THE REFUSAL BAND - pinned to the top of a dialog body, never the bottom of it.

   A modal's body scrolls and its commit button does not - the button lives in the modal's
   own footer, outside the scroll. So a refusal rendered last is a refusal rendered into the
   overflow: measured at 900x573 on 2026-09-19 the body's visible region ended at y=473 and
   the notice sat at y=485..547, clipped and invisible, while the button read enabled and no
   toast fired. Three clicks later the reviewer concluded the app had frozen.

   Sticky and not merely first, because first is not enough: reaching the commit button on a
   short viewport means scrolling, and scrolling takes a first-child out of view. The band
   bleeds through the body's own padding with negative margins so it sits flush against the
   header band when it pins.
   --------------------------------------------------------------------------------------- */
.refusal[b-69nqbqkafh] {
    position: sticky;
    top: 0;
    z-index: var(--rk-z-substick);
    margin: calc(var(--rk-sp-14) * -1) calc(var(--rk-sp-14) * -1) var(--rk-sp-12);
    padding: var(--rk-sp-12) var(--rk-sp-14);
    background: var(--rk-card);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

/*
    The negative side margins full-bleed it to the body's edges so it reads as a band and not
    as a notice that happens to be first. MEASURED at 900x573: the band holds y=121..208 at
    scrollTop 0 AND at the scroll maximum - a sticky box is clamped to its containing block,
    which here is the body's CONTENT box, so it never rises into the top padding and pinning
    therefore moves it by zero pixels. No jump, and nothing to tune.
*/
.refusal[b-69nqbqkafh]  .rk-notice + .rk-notice {
    margin-top: var(--rk-sp-8);
}

/* ---------------------------------------------------------------------------------------
   THE TREE - and the indentation IS the meaning, so it is generous rather than tidy.

   A reader has to be able to tell, at a glance and without counting, which LINE a step sits
   on: the main line, a leg of a split, or a step inside that leg. The 2026-07-09 incident was
   34 steps on a line nobody could see, and a four-pixel indent would have hidden it just as
   well as no indent at all. Depth arrives as a custom property from the markup because the
   nesting is data, not structure - the list is flattened so a cycle in the data cannot become
   a cycle in the DOM.
   --------------------------------------------------------------------------------------- */
.tree[b-69nqbqkafh] {
    /* THE BAND GUTTER (2026-10-16) - one lane per level of split / loop nesting, set from the
       markup as --lanes. Zero lanes is zero gutter, so a flat checklist looks as it always did. */
    --band-step: var(--rk-sp-10);
    list-style: none;
    margin: 0;
    padding: 0 0 0 calc(var(--lanes, 0) * var(--band-step));
}

.tree__bar[b-69nqbqkafh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-12) 0;
}

/* ---------------------------------------------------------------------------------------
   THE PICK BOX - a page-local control, and the one place this screen does not use the kit.

   RkCheck exposes CheckedChanged(bool) and nothing else, so a shift-click arrives
   indistinguishable from a plain one and a RANGE cannot be built on it. Widening a kit
   control that twenty screens use, to serve one screen's bulk selection, is the wrong trade -
   so the row owns its box and wears RkCheck's own tokens, sized to --rk-sp-24 exactly as
   .rk-check__box is. It reads as the kit because it is made of the kit.

   The state lives on aria-checked rather than on a second class: the attribute has to be
   correct for a screen reader anyway, and one source of truth cannot disagree with itself.
   --------------------------------------------------------------------------------------- */
.pick[b-69nqbqkafh] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-8);
    flex: 0 0 auto;
    align-self: flex-start;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    color: var(--rk-ink-soft);
    cursor: pointer;
    touch-action: manipulation;
}

.pick:disabled[b-69nqbqkafh] {
    color: var(--rk-disabled-text);
    cursor: not-allowed;
}

.pick:focus-visible[b-69nqbqkafh] {
    outline: var(--rk-border) solid var(--rk-accent);
    outline-offset: var(--rk-sp-2);
}

.pick__box[b-69nqbqkafh] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--rk-sp-24);
    height: var(--rk-sp-24);
    border: var(--rk-border) solid var(--rk-steel);
    border-radius: var(--rk-radius-0);
    background: transparent;
    color: transparent;
    font-weight: var(--rk-fw-bold);
    font-size: var(--rk-fs-xl);
    line-height: var(--rk-lh-flat);
    transition: background-color var(--rk-dur-ui) var(--rk-ease);
}

.pick:hover:not(:disabled) .pick__box[b-69nqbqkafh] { background: var(--rk-hover-ghost); }

.pick[aria-checked="true"] .pick__box[b-69nqbqkafh] {
    border-color: var(--rk-accent);
    background: var(--rk-accent);
    color: var(--rk-on-fill);
}

.pick:disabled .pick__box[b-69nqbqkafh] { border-color: var(--rk-disabled); }

/*
    A LEG GETS AN EMPTY BOX OF THE SAME SIZE. Both procs take a step id, so a leg is not
    selectable - but a missing box would shunt the whole leg row left by 32px and the column
    of real boxes would stop being a column, which is what makes a partial selection readable
    at a glance.
*/
.pick--void[b-69nqbqkafh] {
    display: block;
    flex: 0 0 auto;
    width: var(--rk-sp-24);
    height: var(--rk-sp-24);
}

.pick--all .pick__word[b-69nqbqkafh] {
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
}

/*
    ⚠️ --rk-accent-ink, NOT --rk-accent-deep. The two look interchangeable and are not: deep is
    the PRESSED EDGE of a filled control and it does not lift in the dark theme (#b23e00 light,
    #c9561a dark), so as TEXT on a card it measures 3.75:1 in dark - under the 4.5:1 floor for
    body-sized type. --rk-accent-ink is the same family redefined per theme for exactly this job
    (#b23e00 on paper, #ff7a33 on the dark card) and measures 5.09:1 and 6.21:1. Both figures
    computed off the live tokens in the browser, not from the swatch names.
*/
.pick__count[b-69nqbqkafh] {
    font-size: var(--rk-fs-sm);
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-ink);
}

.pick__lede[b-69nqbqkafh] {
    margin: 0 0 var(--rk-sp-10);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.tree__row[b-69nqbqkafh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rk-sp-4) var(--rk-sp-12);
    align-items: start;
    padding: var(--rk-sp-8) var(--rk-sp-10);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
    margin-left: calc(var(--tree-depth, 0) * var(--rk-sp-20));
}

@media (min-width: 900px) {
    .tree__row[b-69nqbqkafh] {
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
    }
}

/*
    A LEG IS NOT A STEP AND MUST NOT LOOK LIKE ONE. It is the branch label above a line of
    steps, so it carries the rail down its left edge and the steps under it do not - which is
    what makes "these three are on the Damaged leg" readable without reading anything.
*/
/*
    ⚠️ --rk-card-veil IS AN OPACITY (0.55), NOT A COLOUR. `background: var(--rk-card-veil)`
    resolves to `background: 0.55`, which is invalid and silently dropped - so the leg rows and
    the binding block below have been painting nothing since they were written. --rk-card is
    the raised-surface token and is what the declaration meant. Found 2026-09-19.
*/
.tree__row--leg[b-69nqbqkafh] {
    border-left: var(--rk-rail) solid var(--rk-accent);
    background: var(--rk-card);
}

.tree__row--step[b-69nqbqkafh] {
    border-left: var(--rk-border-hair) solid transparent;
}

/* ---------------------------------------------------------------------------------------
   🛑 THE BANDS - WHICH ROWS BELONG TO WHICH SPLIT AND WHICH LOOP (2026-10-16).
   Kirk: "It is angry about loops and splits - we need to visually mark that somehow."

   A band is drawn on every row inside a structure, in that structure's LANE of the gutter, so
   the rows join into one bracket however deeply each row is indented: STEEL for a split and
   everything on its legs, ACCENT for a loop - from the step the loop goes back to down to the
   loop step and its legs. The first row draws the bracket's top, the last its foot.

   The band sits in the row's left margin: the row is pushed in by its depth and by the gutter,
   so the band pulls itself back by both (and by the row's own left edge, which is a hairline
   on a step and the rail on a leg) to land in its lane.
   --------------------------------------------------------------------------------------- */
.tree__row[b-69nqbqkafh] {
    position: relative;
    --row-edge: var(--rk-border-hair);
}

.tree__row--leg[b-69nqbqkafh] {
    --row-edge: var(--rk-rail);
}

.band[b-69nqbqkafh] {
    position: absolute;
    top: 0;
    bottom: calc(-1 * var(--rk-border-hair));
    left: calc(var(--lane, 0) * var(--band-step)
               - var(--lanes, 0) * var(--band-step)
               - var(--tree-depth, 0) * var(--rk-sp-20)
               - var(--row-edge));
    width: var(--rk-sp-6);
    /* The band's ink is a BORDER colour, never `color` - the band is not text, and the accent
       is right on a border (DesignSystemTests.SmallTextNeverWearsTheRawAccent reads `color:`). */
    border-left: var(--rk-border) solid var(--band-ink, var(--rk-steel));
}

.band--split[b-69nqbqkafh] {
    --band-ink: var(--rk-steel);
}

/* A LOOP IS FILLED AS WELL AS EDGED - it is the structure nothing else on the screen drew, and the
   one a nudge used to break, so it is the louder of the two. */
.band--loop[b-69nqbqkafh] {
    --band-ink: var(--rk-accent);
    background: var(--rk-accent-soft);
}

.band--start[b-69nqbqkafh] {
    top: var(--rk-sp-14);
    border-top: var(--rk-border) solid var(--band-ink, var(--rk-steel));
}

.band--end[b-69nqbqkafh] {
    bottom: auto;
    height: var(--rk-sp-20);
    border-bottom: var(--rk-border) solid var(--band-ink, var(--rk-steel));
}

.band--start.band--end[b-69nqbqkafh] {
    height: var(--rk-sp-8);
}

.tree__main[b-69nqbqkafh] {
    display: flex;
    align-items: baseline;
    gap: var(--rk-sp-10);
    min-width: 0;
}

.tree__pos[b-69nqbqkafh] {
    flex: 0 0 auto;
    min-width: var(--rk-sp-20);
    font-size: var(--rk-fs-xs);
    color: var(--rk-ink-soft);
    text-align: right;
}

.tree__words[b-69nqbqkafh] {
    min-width: 0;
}

.tree__name[b-69nqbqkafh] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
    ⚠️ WAS --rk-accent-deep AND THAT WAS UNREADABLE IN THE DARK THEME. Measured in the browser
    against the live tokens: #c9561a on the dark card #1b2228 is 3.75:1, under the 4.5:1 floor for
    body-sized text, and this is the label that says WHICH LEG a run of steps is on. --rk-accent-ink
    is the per-theme "accent as text" token and measures 6.21:1 dark / 5.09:1 light, in the same
    colour family, so the leg still reads as accented.
*/
.tree__leg[b-69nqbqkafh] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    color: var(--rk-accent-ink);
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
    THE HANDLE IS ALWAYS VISIBLE, IN MONO, UNDER THE LABEL. On an option it is the value the
    run RECORDS; on a step it is what the recorded answer references. An author who cannot see
    it renames the wrong one, and the rename is the thing that cannot be undone.
*/
.tree__handle[b-69nqbqkafh] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink-soft);
}

.tree__prompt[b-69nqbqkafh] {
    display: block;
    margin-top: var(--rk-sp-2);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.tree__why[b-69nqbqkafh] {
    display: block;
    margin-top: var(--rk-sp-4);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-xs);
    line-height: var(--rk-lh-prose);
    color: var(--rk-danger);
}

.tree__marks[b-69nqbqkafh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-4);
    min-width: 0;
}

.tree__acts[b-69nqbqkafh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-2);
}

.tree--orphans[b-69nqbqkafh] {
    margin-top: var(--rk-sp-10);
}

/* ---------------------------------------------------------------------------------------
   THE FORMS. Two columns where there is room, one where there is not.
   --------------------------------------------------------------------------------------- */
.form[b-69nqbqkafh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--rk-sp-16);
}

@media (min-width: 720px) {
    .form[b-69nqbqkafh] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------------------
   THE EDITOR GRID - the step and leg dialogs, and the reason RkModal grew a width.

   THE OLD SHAPE WAS TWO COLUMNS INSIDE 480px, WHICH IS WORSE THAN ONE. The .form rule above
   splits at a 720px VIEWPORT, and a viewport has nothing to do with how wide a centerd dialog
   is - so on any desktop the step editor put "Into which record" beside "Into which column" in
   about 200px each, both labels wrapped, and the binding panel read as a crushed strip. Kirk,
   looking at it: "Can you make step admin much wider to make it easier on eyes and to handle?"

   SO THE DIALOG GETS REAL WIDTH (RkModalWidth.Wide - twice --rk-dialog-w) AND THE FIELDS STOP
   SHARING ROWS. Inside .editor a .form is a single column at every size; the two columns are
   .editor's own, and each one is ~400px of one field per row rather than ~200px of two. That is
   the difference between a form that breathes and a form that merely has two of something.

   ONE COLUMN BELOW 860px, WHICH INCLUDES EVERY PHONE. Same markup, a breakpoint only. The
   number is chosen against the dialog rather than against the page: at an 860px viewport the
   wide modal is min(860 - 2 gutters, 2 x --rk-dialog-w) = 828px, so two columns and the gap
   leave ~400px each. Splitting any earlier would re-create the crushed shape this replaces.
   --------------------------------------------------------------------------------------- */
.editor[b-69nqbqkafh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--rk-sp-24);
}

@media (min-width: 860px) {
    .editor[b-69nqbqkafh] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

.editor__col[b-69nqbqkafh] {
    min-width: 0;
}

/* Beats the 720px rule above on specificity (0,2,0 against 0,1,0), at every width. */
.editor .form[b-69nqbqkafh] {
    grid-template-columns: minmax(0, 1fr);
}

.form__wide[b-69nqbqkafh],
.form__checks[b-69nqbqkafh] {
    display: block;
}

.form__checks[b-69nqbqkafh] {
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
}

/* ---------------------------------------------------------------------------------------
   THE BINDING BLOCK - set apart because it is the one thing on this dialog that reaches
   out of the workflow and into the company's real data.
   --------------------------------------------------------------------------------------- */
.bind[b-69nqbqkafh] {
    margin: var(--rk-sp-12) 0;
    padding: var(--rk-sp-12) var(--rk-sp-14);
    border: var(--rk-border-hair) dashed var(--rk-line-hard);
    border-radius: var(--rk-radius-sm);
    background: var(--rk-card);
}

.bind__head[b-69nqbqkafh] {
    margin: 0 0 var(--rk-sp-8);
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-sm);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   PROSE
   --------------------------------------------------------------------------------------- */
.prose[b-69nqbqkafh] {
    margin: 0 0 var(--rk-sp-14);
    max-width: var(--rk-measure);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.prose--tight[b-69nqbqkafh] {
    margin-bottom: var(--rk-sp-10);
    font-size: var(--rk-fs-sm);
}

.cell--reason[b-69nqbqkafh] {
    max-width: var(--rk-measure);
}

.cell__tag[b-69nqbqkafh] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    color: var(--rk-ink-soft);
}
/* ---------------------------------------------------------------------------------------
   READ ONLY - 2026-09-28, lane W. Anybody without Setup reads the SOP and cannot change it
   (WorkflowBuilder.MayAuthor has the rule and the reason).

   .readonly is the one plain line that stands in for every hidden control. .locked is the
   fieldset the Procedure tab and the step and leg dialogs sit in: disabled for a reader, which
   makes every field inside it read-only at once, and stripped of the fieldset's own border,
   padding and min-content width so an author's layout is exactly what it was.
   --------------------------------------------------------------------------------------- */
.readonly[b-69nqbqkafh] {
    margin: 0 0 var(--rk-sp-12);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

.locked[b-69nqbqkafh] {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* ---------------------------------------------------------------------------------------
   THE OWNER - 2026-09-28, lane X. "Employees own the SOPs": the Procedure tab says whose it is,
   and for Setup / User admin it is the one place an SOP is handed over (a blank that opens the
   person picker). .owner__hint is the quiet sentence under it and under the launch-list switches.
   --------------------------------------------------------------------------------------- */
.owner[b-69nqbqkafh] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--rk-sp-6) var(--rk-sp-12);
    margin: 0 0 var(--rk-sp-16);
    padding-bottom: var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
}

.owner__word[b-69nqbqkafh] {
    margin: 0;
    font-size: var(--rk-fs-md);
}

.owner__hint[b-69nqbqkafh] {
    flex-basis: 100%;
    margin: 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/* The standing notices under the ownership line - "waiting to be published", a failed ownership
   read - sit clear of the tab strip rather than touching it (lane X). */
.standing[b-69nqbqkafh] {
    margin: 0 0 var(--rk-sp-12);
}
/* /Pages/WorkflowRun.razor.rz.scp.css */
/*
    THE RUN HOST. Almost nothing, on purpose.

    RkRun already owns the one-column, one-question, two-buttons layout a technician needs -
    that argument lives in its own stylesheet and is not repeated or overridden here. What is
    left for the host is a column to stack the launch cards in and a thin bar above the
    running component so a person can get back out.

    Every value is a token. No raw colour, size, radius or shadow appears below, and small
    text uses --rk-accent-ink rather than --rk-accent, which a gate checks.
*/

.run[b-un9ll9veft] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
}

/*
    THE WAY OUT. A run is a long screen and leaving it must not mean the browser's Back
    button, which on a resumed run lands somewhere arbitrary.
*/
.run__bar[b-un9ll9veft] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rk-sp-4);
    padding-bottom: var(--rk-sp-2);
    border-bottom: var(--rk-border-hair) solid var(--rk-line);
}

.run__id[b-un9ll9veft] {
    font-family: var(--rk-font-mono);
    font-size: var(--rk-fs-xs);
    letter-spacing: var(--rk-track-xl);
    color: var(--rk-ink-soft);
}

.run__list[b-un9ll9veft] {
    display: flex;
    flex-direction: column;
    gap: var(--rk-sp-4);
    margin-top: var(--rk-sp-4);
}

.run__say[b-un9ll9veft] {
    margin: 0 0 var(--rk-sp-3) 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-ink-soft);
}

.run__facts[b-un9ll9veft] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rk-sp-2);
}

/*
    PHONE FIRST. At 375px the facts row is the first thing that wants to overflow, and a
    launch card that scrolls sideways reads as broken rather than as dense.
*/
@media (max-width: 480px) {

    .run__bar[b-un9ll9veft] {
        flex-wrap: wrap;
        gap: var(--rk-sp-2);
    }

    .run__facts[b-un9ll9veft] {
        gap: var(--rk-sp-1);
    }
}

/* The header's own meta slot will not parse inside a code block - see the razor comment. */
.run__meta[b-un9ll9veft] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-3);
    min-height: var(--rk-sp-6);
}

.run__pick[b-un9ll9veft] {
    display: block;
}

/* The rehearsal's bar: Start over and the stamp sit together at the right. */
.run__bar-end[b-un9ll9veft] {
    display: flex;
    align-items: center;
    gap: var(--rk-sp-2);
}

/* Which checklist is being rehearsed - a rehearsal has no run number to show instead. */
.run__rehearsing[b-un9ll9veft] {
    margin: 0;
    font-family: var(--rk-font-display);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-tight);
    color: var(--rk-ink);
}

/* REHEARSE and START side by side in a card's footer. */
.run__go[b-un9ll9veft] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--rk-sp-2);
}

/* What START needs that this page cannot pick - said under the one card it is about. */
.run__hint[b-un9ll9veft] {
    margin: var(--rk-sp-3) 0 0 0;
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-sm);
    line-height: var(--rk-lh-prose);
    color: var(--rk-warn-ink);
}

.run__say--tight[b-un9ll9veft] {
    margin-bottom: 0;
}
/* /Pages/Workflows.razor.rz.scp.css */
/*
    THE WORKFLOW LIST.

    Layout only. Every control on this page belongs to Riproka.UI.Controls and every colour,
    size, radius and shadow below is a --rk-* token - there is not a literal on this page.

    ⚠️ ::deep IS REQUIRED FOR ANY KIT CLASS. A Class passed to a kit control lands on THAT
    component's scoped element, so a bare `.bar__find { }` here compiles to
    `.bar__find[b-thispage]` and silently matches nothing. Anchoring on an element this file
    owns - `.bar`, `.make` - is what reaches through. Found the hard way on the site list.

    The bar, the madlib and the pager are deliberately the SAME shape as Locations.razor.css.
    A filter bar that moves between screens is a filter bar nobody trusts, and an author who
    learned the site list has already learned this one.
*/

/* ---------------------------------------------------------------------------------------
   THE FILTER BAR
   --------------------------------------------------------------------------------------- */
.bar[b-fam8zg1s4d] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10) var(--rk-sp-18);
    padding: var(--rk-sp-8) 0 var(--rk-sp-12);
    border-bottom: var(--rk-border-hair) dashed var(--rk-line);
    margin-bottom: var(--rk-sp-12);
}

.bar__group[b-fam8zg1s4d] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--rk-sp-10);
    min-width: 0;
}

/*
    RkField carries a bottom margin because it is built for a stacked form. In a single-line
    filter bar that margin is what leaves the GO button sitting below the input it belongs to.
*/
.bar[b-fam8zg1s4d]  .rk-field {
    margin-bottom: 0;
}

.bar[b-fam8zg1s4d]  .bar__find {
    width: calc(var(--rk-blank-max) * 1.6);
    max-width: 100%;
}

.bar[b-fam8zg1s4d]  .bar__pick {
    width: var(--rk-blank-max);
    max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
   THE CREATE MADLIB - prose over a form, per lift-06 §2.2.
   --------------------------------------------------------------------------------------- */
.make[b-fam8zg1s4d] {
    margin-bottom: var(--rk-sp-20);
}

.make__typed[b-fam8zg1s4d] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--rk-sp-16);
    margin-top: var(--rk-sp-16);
    padding-top: var(--rk-sp-16);
    border-top: var(--rk-border-hair) dashed var(--rk-line);
}

@media (min-width: 720px) {
    .make__typed[b-fam8zg1s4d] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------------------
   THE CELLS
   --------------------------------------------------------------------------------------- */

/*
    THE HANDLE IS MONO AND DOES NOT WRAP. It is a machine identifier that bindings point at,
    and reading it as prose is exactly the mistake that gets one renamed.
*/
.cell--handle[b-fam8zg1s4d] {
    white-space: nowrap;
}

.cell--name[b-fam8zg1s4d],
.cell--state[b-fam8zg1s4d] {
    min-width: 0;
}

.cell__title[b-fam8zg1s4d] {
    display: block;
    font-weight: var(--rk-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
    "draft has moved on" is a FACT about the row rather than a second status, so it is quiet
    text under the version stamp and not a stamp of its own. Two stamps in one cell read as
    two states and there is only one.
*/
.cell__tag[b-fam8zg1s4d] {
    display: block;
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-2xs);
    text-transform: uppercase;
    color: var(--rk-ink-soft);
}

/* ---------------------------------------------------------------------------------------
   THE PAGER
   --------------------------------------------------------------------------------------- */
.pager[b-fam8zg1s4d] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rk-sp-10);
    padding: var(--rk-sp-10) 0 var(--rk-sp-20);
}

.pager__word[b-fam8zg1s4d] {
    margin-right: auto;
    font-size: var(--rk-fs-sm);
    color: var(--rk-ink-soft);
}

/*
    THE WAY OUT OF THE LIBRARY. A link rather than a button because it IS one - it has a
    URL, it opens in a new tab if somebody middle-clicks, and a dispatcher will want that.
*/
.cell--runs[b-fam8zg1s4d] {
    white-space: nowrap;
}

.cell__link[b-fam8zg1s4d] {
    font-size: var(--rk-fs-2xs);
    letter-spacing: var(--rk-track-lg);
    text-transform: uppercase;
    color: var(--rk-accent-ink);
}

/* ---------------------------------------------------------------------------------------
   WAITING TO BE PUBLISHED - 2026-09-28, lane X. The publisher's queue of owners' asks.
   --------------------------------------------------------------------------------------- */
.waiting[b-fam8zg1s4d] {
    margin-bottom: var(--rk-sp-20);
}

.waiting__lead[b-fam8zg1s4d] {
    margin: 0 0 var(--rk-sp-12);
    max-width: var(--rk-measure);
    font-size: var(--rk-fs-lg);
    line-height: var(--rk-lh-snug);
    color: var(--rk-ink-soft);
}

/* The asker's own words - prose, so it wraps rather than being clipped to one line. */
.cell--note[b-fam8zg1s4d] {
    min-width: 0;
    max-width: var(--rk-measure);
    white-space: normal;
}