/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-e5ovsh9uq7] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-e5ovsh9uq7] {
    flex: 1;
}

.sidebar[b-e5ovsh9uq7] {
    background-color: var(--bz-surface);
    border-right: 1px solid var(--bz-border);
}

.top-row[b-e5ovsh9uq7] {
    background-color: var(--bz-surface);
    border-bottom: 1px solid var(--bz-border);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-e5ovsh9uq7]  a, .top-row[b-e5ovsh9uq7]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-e5ovsh9uq7]  a:hover, .top-row[b-e5ovsh9uq7]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-e5ovsh9uq7]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-e5ovsh9uq7] {
        justify-content: space-between;
    }

    .top-row[b-e5ovsh9uq7]  a, .top-row[b-e5ovsh9uq7]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-e5ovsh9uq7] {
        flex-direction: row;
    }

    .sidebar[b-e5ovsh9uq7] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-e5ovsh9uq7] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-e5ovsh9uq7]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-e5ovsh9uq7], article[b-e5ovsh9uq7] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Sits left of About in the top strip. Muted, because it is context rather than a control —
   the answer to "whose data is this" should be findable without competing with the page. */
.tenant-name[b-e5ovsh9uq7] {
    margin-right: auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bz-text-muted);
}

/* The draft bar. Deliberately the loudest thing on the page: the failure it prevents is somebody
   spending an afternoon in the wrong copy of an area, and a quiet marker does not prevent that. */
.draft-bar[b-e5ovsh9uq7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.5rem 1.5rem;
    background-color: #9a6b00;
    color: #fff;
    font-size: 0.9rem;
}

.draft-bar-pill[b-e5ovsh9uq7] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.2);
}

.draft-bar strong[b-e5ovsh9uq7] {
    font-weight: 600;
}

.draft-bar-link[b-e5ovsh9uq7] {
    margin-left: auto;
    color: #fff;
    text-decoration: underline;
}

.draft-bar-link:hover[b-e5ovsh9uq7] {
    color: #fff;
}

/* Sits directly under the draft bar and reads as the same family, because both answer "what is
   true of this area before you start". Two weights: one for an area nobody can use, one for an
   area that works but not as its author set it up. */
.health-bar[b-e5ovsh9uq7] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 1.5rem;
    font-size: 0.9rem;
}

.health-bar-blocking[b-e5ovsh9uq7] {
    background-color: #8a1f1f;
    color: #fff;
}

/* Deliberately quieter than the blocking one and quieter than the draft bar. Nothing here stops
   anybody working, and a warning that shouts as loudly as a refusal teaches people to ignore both. */
.health-bar-advisory[b-e5ovsh9uq7] {
    background-color: #f3ead6;
    color: #4a3c1a;
    border-bottom: 1px solid #d9c9a3;
}

.health-bar-pill[b-e5ovsh9uq7] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.health-bar-blocking .health-bar-pill[b-e5ovsh9uq7] {
    background-color: rgba(255, 255, 255, 0.2);
}

.health-bar-advisory .health-bar-pill[b-e5ovsh9uq7] {
    background-color: rgba(74, 60, 26, 0.12);
}

.health-bar-lead[b-e5ovsh9uq7] {
    margin: 0;
}

.health-bar strong[b-e5ovsh9uq7] {
    font-weight: 600;
}

.health-bar-list[b-e5ovsh9uq7] {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
}

/* The same family as the draft bar, deliberately louder. That bar warns you which copy of an area
   you are editing; this one says the data on screen belongs to another organisation, which is a
   bigger thing to have forgotten. Red rather than amber, and above it in the markup. */
.support-bar[b-e5ovsh9uq7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.5rem 1.5rem;
    background-color: #8b1a1a;
    color: #fff;
    font-size: 0.9rem;
}

.support-bar-pill[b-e5ovsh9uq7] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.2);
}

.support-bar strong[b-e5ovsh9uq7] {
    font-weight: 600;
}

.support-bar-link[b-e5ovsh9uq7] {
    margin-left: auto;
    color: #fff;
    text-decoration: underline;
}

.support-bar-link:hover[b-e5ovsh9uq7] {
    color: #fff;
}

/* Draft mode, said in the two places somebody cannot avoid seeing.

   The same brown as the draft bar, deliberately — that bar has always been the colour of "this is
   a copy", and the mode is that idea made whole. Red is spoken for by a support session, which is
   a bigger thing and must stay distinguishable from this at a glance. */
.top-row-draft[b-e5ovsh9uq7] {
    background-color: #9a6b00;
    border-bottom-color: #7d5700;
    color: #fff;
}

    .top-row-draft[b-e5ovsh9uq7]  a,
    .top-row-draft[b-e5ovsh9uq7]  .btn-link,
    .top-row-draft[b-e5ovsh9uq7]  .tenant-name {
        color: #fff;
    }

/* And a border around everything the page renders, so the boundary of the copy is visible even on
   a screen scrolled past the header. Inset rather than a full frame: it reads as a container the
   work sits inside, which is what a draft is. */
.main-draft[b-e5ovsh9uq7] {
    border: 2px solid #9a6b00;
    border-top: 0;
    margin: 0 0.5rem 0.5rem;
}

.mode-switch[b-e5ovsh9uq7] {
    margin-right: auto;
    margin-left: 0.5rem;
}

/* Why a save was refused, or is about to start being refused.

   Two colours for two stages, because they are not the same message. Grace is amber and says
   nothing is wrong yet; suspended is the same red as a support session, which is the other bar
   that means "this session cannot change anything". Somebody who has seen one should recognise
   the other. */
.billing-bar[b-e5ovsh9uq7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.5rem 1.5rem;
    font-size: 0.9rem;
    color: #fff;
}

.billing-bar-grace[b-e5ovsh9uq7] {
    background-color: #8a6100;
}

.billing-bar-suspended[b-e5ovsh9uq7] {
    background-color: #8b1a1a;
}

.billing-bar-pill[b-e5ovsh9uq7] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.2);
}

.billing-bar strong[b-e5ovsh9uq7] {
    font-weight: 600;
}

.billing-bar-link[b-e5ovsh9uq7] {
    margin-left: auto;
    color: #fff;
    text-decoration: underline;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-on70a669s1] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: var(--bz-text);
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid var(--bz-border);
    border-radius: var(--bs-border-radius-sm, 0.1875rem);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2838, 36, 31, 0.65%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem var(--bz-surface-alt);
}

.navbar-toggler:checked[b-on70a669s1] {
    background-color: var(--bz-accent-soft);
}

.top-row[b-on70a669s1] {
    min-height: 3.5rem;
    background-color: transparent;
    border-bottom: 1px solid var(--bz-border);
}

.navbar-brand[b-on70a669s1] {
    display: inline-flex;
    align-items: center;
    padding: 0;
}

/* Stored at twice this height, so it stays sharp on a high-density screen.
   Width is left to the image: the lockup's proportions are fixed and stretching
   it is the one thing a lockup exists to prevent. */
.navbar-brand img[b-on70a669s1] {
    height: 2rem;
    width: auto;
}

.bi[b-on70a669s1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

    .bi[b-on70a669s1]  svg {
        display: block;
    }

.bi-house-door-fill-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-folder-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-folder-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.825a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3zm-8.322.12C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139z'/%3E%3C/svg%3E");
}

.bi-diagram-3-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-diagram-3-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zm-6 8A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5v-1zm6 0A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5v-1zm6 0a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1z'/%3E%3C/svg%3E");
}

.bi-bell-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-bell-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2ZM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917ZM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6Z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-paperclip-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-paperclip' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 3a2.5 2.5 0 0 1 5 0v9a1.5 1.5 0 0 1-3 0V5a.5.5 0 0 1 1 0v7a.5.5 0 0 0 1 0V3a1.5 1.5 0 1 0-3 0v9a2.5 2.5 0 0 0 5 0V5a.5.5 0 0 1 1 0v7a3.5 3.5 0 1 1-7 0V3z'/%3E%3C/svg%3E");
}

.bi-tag-fill-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-tag-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 2a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 2 6.586V2zm3.5 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z'/%3E%3C/svg%3E");
}

.bi-people-fill-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/%3E%3C/svg%3E");
}

/* The outline people, for the pages about a particular set of them — People, Set up your team,
   Roles — against the filled one above for the pages about organisations. Both were already being
   asked for by name in NavMenu.razor and only the filled one existed, so those entries rendered a
   16px gap where an icon goes: not a broken image, just nothing, which is why it survived. */
.bi-people-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-people' viewBox='0 0 16 16'%3E%3Cpath d='M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1zm-7.978-1A.26.26 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002-.014.002zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0M6.936 9.28a6 6 0 0 0-1.23-.247A7 7 0 0 0 5 9c-4 0-5 3-5 4q0 1 1 1h4.216A2.24 2.24 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816M4.92 10A5.5 5.5 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4'/%3E%3C/svg%3E");
}

/* Timed Transitions, the other entry that was rendering a gap. An hourglass rather than the clock
   used for Audit and Billing: those are records of when something happened, this is a rule about
   time that has not run yet. */
.bi-hourglass-split-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-hourglass-split' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z'/%3E%3C/svg%3E");
}

.bi-shield-lock-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-shield-lock-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.777 11.777 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.55-.108.829-.24a7.159 7.159 0 0 0 1.048-.625 11.775 11.775 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.541 1.541 0 0 0-1.044-1.263 62.467 62.467 0 0 0-2.887-.87C9.843.266 8.69 0 8 0zm0 5a1.5 1.5 0 0 1 .5 2.915l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99A1.5 1.5 0 0 1 8 5z'/%3E%3C/svg%3E");
}

.bi-clock-history-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-clock-history' viewBox='0 0 16 16'%3E%3Cpath d='M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022zm2.004.45a7 7 0 0 0-.985-.299l.219-.976q.576.129 1.126.342zm1.37.71a7 7 0 0 0-.439-.27l.493-.87a8 8 0 0 1 .979.654l-.615.789a7 7 0 0 0-.418-.302zm1.834 1.79a7 7 0 0 0-.653-.796l.724-.69q.406.429.747.91zm.744 1.352a7 7 0 0 0-.214-.468l.893-.45a8 8 0 0 1 .45 1.088l-.95.313a7 7 0 0 0-.179-.483m.53 2.507a7 7 0 0 0-.1-1.025l.985-.17q.1.58.116 1.17zm-.131 1.538q.05-.254.081-.51l.993.123a8 8 0 0 1-.23 1.155l-.964-.267q.069-.247.12-.501m-.952 2.379q.276-.436.486-.908l.914.405q-.24.54-.555 1.038zm-.964 1.205q.183-.183.35-.378l.758.653a8 8 0 0 1-.401.432z'/%3E%3Cpath d='M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0z'/%3E%3Cpath d='M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-on70a669s1] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b6558' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-section-label[b-on70a669s1] {
    margin: 0.75rem 1rem 0.35rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--bz-border);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bz-text-muted);
}

.nav-item[b-on70a669s1] {
    font-size: 0.875rem;
    padding-bottom: 0.15rem;
}

    .nav-item:first-of-type[b-on70a669s1] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-on70a669s1] {
        padding-bottom: 1rem;
    }

    .nav-item[b-on70a669s1]  .nav-link {
        color: var(--bz-text-muted);
        background: none;
        border: none;
        border-radius: var(--bs-border-radius, 0.25rem);
        height: 2.75rem;
        display: flex;
        align-items: center;
        line-height: 2.75rem;
        width: 100%;
        font-weight: 500;
    }

    .nav-item[b-on70a669s1]  .nav-link-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

.nav-item[b-on70a669s1]  a.active {
    background-color: var(--bz-accent-soft);
    color: var(--bz-accent-hover);
    font-weight: 600;
}

.nav-item[b-on70a669s1]  .nav-link:hover {
    background-color: var(--bz-surface-alt);
    color: var(--bz-text);
}

.nav-scrollable[b-on70a669s1] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-on70a669s1] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-on70a669s1] {
        display: none;
    }

    .nav-scrollable[b-on70a669s1] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
.public-page[b-zfb1ro2jfv] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /* Lets a section inside .public-main break out to the full width of the window — see the
       band rule below — without the 100vw that does it being able to push a horizontal scrollbar
       onto the page. `clip` rather than `hidden` because hidden would make this a scroll
       container, which breaks position: sticky for anything inside it. */
    overflow-x: clip;
}

.public-header[b-zfb1ro2jfv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bz-border-soft);
}

.public-brand[b-zfb1ro2jfv] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.public-brand img[b-zfb1ro2jfv] {
    height: 2.25rem;
    width: auto;
}

.public-nav[b-zfb1ro2jfv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.public-main[b-zfb1ro2jfv] {
    flex: 1;
    /* Wide enough to read, narrow enough not to sprawl on a desktop monitor. */
    max-width: 60rem;
    width: 100%;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.public-footer[b-zfb1ro2jfv] {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    border-top: 1px solid #e5e2da;
    color: #6c757d;
    font-size: 0.875rem;
}

/* A full-width band inside the centred column.

   The public pages read inside a 60rem measure, which is right for prose and wrong for the one or
   two moments a marketing page wants the whole window — a hero, a closing call to action. This
   pulls a section out to the viewport edges and then pads it back so its *contents* line up with
   everything above and below it. Without the second half the text inside a band would sit at the
   window edge while the paragraph above it started 20rem in.

   ::deep because the band is in the page's markup, not this layout's, and scoped CSS otherwise
   stops at the component boundary. */
.public-main[b-zfb1ro2jfv]  .public-band {
    margin-inline: calc(50% - 50vw);

    /* 30rem is half the 60rem column, and the further 1.5rem is .public-main's own inside
       padding — box-sizing is border-box, so that padding sits within the 60rem rather than
       outside it. Without the second term a band's text lines up with the column's outer edge
       while every paragraph above and below it starts 1.5rem further in, which reads as a wobble
       down the left margin rather than as a deliberate full-width section. */
    padding-inline: max(1.5rem, calc(50vw - 28.5rem));
}

/* The hero sits directly under the header, so it cancels the top padding .public-main applies to
   ordinary page content. */
.public-main[b-zfb1ro2jfv]  .public-band-top {
    margin-top: -3rem;
}

/* And the closing band runs to the footer for the same reason. */
.public-main[b-zfb1ro2jfv]  .public-band-bottom {
    margin-bottom: -3rem;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-9g6su1fklu],
.components-reconnect-repeated-attempt-visible[b-9g6su1fklu],
.components-reconnect-failed-visible[b-9g6su1fklu],
.components-pause-visible[b-9g6su1fklu],
.components-resume-failed-visible[b-9g6su1fklu],
.components-rejoining-animation[b-9g6su1fklu] {
    display: none;
}

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


#components-reconnect-modal[b-9g6su1fklu] {
    background-color: var(--bz-surface, white);
    color: var(--bz-text, #26241f);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: var(--bs-border-radius-lg, 0.375rem);
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-9g6su1fklu 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-9g6su1fklu] {
    border: 0;
    background-color: var(--bz-accent, #4b5d3a);
    color: white;
    padding: 4px 24px;
    border-radius: var(--bs-border-radius-sm, 0.1875rem);
}

    #components-reconnect-modal button:hover[b-9g6su1fklu] {
        background-color: var(--bz-accent-hover, #3c4a2e);
    }

    #components-reconnect-modal button:active[b-9g6su1fklu] {
        background-color: var(--bz-accent, #4b5d3a);
    }

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

    .components-rejoining-animation div[b-9g6su1fklu] {
        position: absolute;
        border: 3px solid var(--bz-accent, #4b5d3a);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-9g6su1fklu 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

@keyframes components-rejoining-animation-b-9g6su1fklu {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/App/Admin/Areas.razor.rz.scp.css */
.area-icon-swatch[b-tz6nobu0yk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--bz-text-muted);
}

.area-icon-picker[b-tz6nobu0yk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.area-icon-option[b-tz6nobu0yk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    color: var(--bz-text-muted);
    background: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bs-border-radius, 0.25rem);
    cursor: pointer;
}

    .area-icon-option:hover[b-tz6nobu0yk] {
        border-color: var(--bz-accent);
    }

    .area-icon-option.selected[b-tz6nobu0yk] {
        color: var(--bz-accent);
        background: var(--bz-accent-soft);
        border-color: var(--bz-accent);
    }


/* The icon column only as wide as the icon, and the name straight after it. Without a width the
   table shared its spare room out across every column, and the icon's share opened a gap. */
.area-icon-cell[b-tz6nobu0yk] {
    width: 1%;
    padding-right: 0;
}

.area-name-cell[b-tz6nobu0yk] {
    padding-left: 0.4rem;
}

/* One narrow column per action, so the same button sits in the same place on every row. */
.area-action[b-tz6nobu0yk] {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

/* What the chosen template is for, under the picker that cannot say it. Sits tight to the select
   rather than in the help-text position below it, because it belongs to the choice above rather
   than to the field below. */
.template-description[b-tz6nobu0yk] {
    margin: -0.35rem 0 0.75rem;
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

/* All of them at once, for somebody comparing rather than confirming. A definition list rather
   than a second dialog: the point is reading them side by side, and anything that shows one at a
   time is the dropdown again with extra steps. */
.template-descriptions[b-tz6nobu0yk] {
    max-height: 14rem;
    overflow-y: auto;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

    .template-descriptions dt[b-tz6nobu0yk] {
        font-weight: 600;
    }

    .template-descriptions dd[b-tz6nobu0yk] {
        margin: 0 0 0.6rem;
        color: var(--bs-secondary-color);
    }

        .template-descriptions dd:last-child[b-tz6nobu0yk] {
            margin-bottom: 0;
        }
/* /Components/Pages/App/Admin/AxisHierarchy.razor.rz.scp.css */
.admin-hierarchy-field textarea[b-uovmsbodpm] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}

.hierarchy-tree-wrap[b-uovmsbodpm] {
    max-height: 20rem;
    overflow-y: auto;
    border: 1px solid var(--bz-border);
    border-radius: var(--bs-border-radius, 0.25rem);
    padding: 0.75rem 1rem;
}

.hierarchy-tree-list[b-uovmsbodpm] {
    list-style: disc;
    margin: 0;
    padding-left: 1.25rem;
}

    .hierarchy-tree-list .hierarchy-tree-list[b-uovmsbodpm] {
        margin-top: 0.15rem;
    }

    .hierarchy-tree-list li[b-uovmsbodpm] {
        margin: 0.15rem 0;
    }

.hierarchy-diff-grid[b-uovmsbodpm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.25rem;
}

.hierarchy-diff-title[b-uovmsbodpm] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bz-text-muted);
    margin-bottom: 0.4rem;
}

.hierarchy-diff-add[b-uovmsbodpm] {
    color: var(--bz-accent);
}

.hierarchy-diff-remove[b-uovmsbodpm],
.hierarchy-diff-preserve[b-uovmsbodpm] {
    color: var(--bz-danger);
}

.hierarchy-diff-list[b-uovmsbodpm] {
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid var(--bz-border-soft);
    border-radius: var(--bs-border-radius, 0.25rem);
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

    .hierarchy-diff-list div[b-uovmsbodpm] {
        padding: 0.1rem 0;
    }

/* The tree of values, once a hierarchy exists.

   Nested lists rather than indented rows, so the structure is in the markup and not only in the
   padding — a screen reader gets a tree, and the branch lines have something real to hang off. */
.axis-tree[b-uovmsbodpm] {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.axis-tree .axis-tree[b-uovmsbodpm] {
    padding-left: 0.75rem;
    margin-left: 0.5rem;
    border-left: 1px solid #d8d4cb;
}

.axis-node-row[b-uovmsbodpm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0.25rem;
    min-height: 1.9rem;
    border-radius: 0.25rem;
}

.axis-node-row:hover[b-uovmsbodpm] {
    background-color: rgba(0, 0, 0, 0.03);
}

/* A visible focus ring, because the rows are the thing keyboard users move between and the context
   menu opens against whichever one is focused. */
.axis-node-row:focus-visible[b-uovmsbodpm] {
    outline: 2px solid #6b7a3a;
    outline-offset: -2px;
}

.axis-tree-toggle[b-uovmsbodpm] {
    width: 1.1rem;
    flex: 0 0 1.1rem;
    border: 0;
    background: none;
    padding: 0;
    color: #6c757d;
    font-size: 0.7rem;
    line-height: 1;
}

.axis-tree-leaf[b-uovmsbodpm] {
    display: inline-block;
}

.axis-node-name[b-uovmsbodpm] {
    font-size: 0.9rem;
}

/* Retired values stay on the tree behind a toggle rather than disappearing: somebody amending a
   hierarchy needs to see what has been stood down, not least so they can bring it back. */
.axis-node-retired .axis-node-name[b-uovmsbodpm] {
    text-decoration: line-through;
    opacity: 0.6;
}

.axis-node-usage[b-uovmsbodpm] {
    font-size: 0.75rem;
    color: #6c757d;
    white-space: nowrap;
}

/* The keyboard and no-right-click route to the same menu. Held back until the row is hovered or
   focused so a long hierarchy reads as a hierarchy, but opacity rather than visibility — the
   latter takes it out of the tab order, which would leave keyboard users no way in at all. */
.axis-node-menu-button[b-uovmsbodpm] {
    margin-left: auto;
    border: 0;
    background: none;
    color: #6c757d;
    padding: 0 0.35rem;
    line-height: 1;
    opacity: 0;
}

.axis-node-row:hover .axis-node-menu-button[b-uovmsbodpm],
.axis-node-menu-button:focus-visible[b-uovmsbodpm] {
    opacity: 1;
}

.axis-node-input[b-uovmsbodpm] {
    max-width: 22rem;
}

/* Catches the click that closes the menu, anywhere on the page. A real element rather than a
   document listener, so there is nothing to add and remove and nothing to leak. */
.axis-menu-backdrop[b-uovmsbodpm] {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.axis-menu[b-uovmsbodpm] {
    position: fixed;
    z-index: 1050;
    min-width: 12rem;
    padding: 0.25rem 0;
    background: #fff;
    border: 1px solid #d8d4cb;
    border-radius: 0.35rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.axis-menu-heading[b-uovmsbodpm] {
    padding: 0.25rem 0.75rem 0.35rem;
    font-size: 0.75rem;
    color: #6c757d;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.25rem;
}

.axis-menu-item[b-uovmsbodpm] {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: 0.35rem 0.75rem;
    font-size: 0.875rem;
}

.axis-menu-item:hover[b-uovmsbodpm],
.axis-menu-item:focus-visible[b-uovmsbodpm] {
    background-color: rgba(0, 0, 0, 0.05);
}

.axis-menu-danger[b-uovmsbodpm] {
    color: #8b1a1a;
}

.axis-menu-separator[b-uovmsbodpm] {
    height: 1px;
    background: #eee;
    margin: 0.25rem 0;
}
/* /Components/Pages/App/Admin/Domains.razor.rz.scp.css */
/* The pending record, laid out as a DNS console asks for it: name, type, value. Scoped CSS is per
   component, so this lives here rather than in the shared admin styles. */
.domain-record[b-shc3tfjen8] {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

.domain-record-values[b-shc3tfjen8] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.15rem 1rem;
    margin: 0;
    font-size: 0.875rem;
}

.domain-record-values dt[b-shc3tfjen8] {
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
}

.domain-record-values dd[b-shc3tfjen8] {
    margin: 0;
    overflow-wrap: anywhere;
}
/* /Components/Pages/App/Admin/FieldMatrix.razor.rz.scp.css */
/* Same width as the area selector on the admin pages. Defined here because scoped CSS does not
   travel between components. */
.area-select[b-ddojli3s2q] {
    max-width: 20rem;
}
/* /Components/Pages/App/Admin/InformationTypes.razor.rz.scp.css */
.admin-row-pending td[b-7e7rol70hj] {
    background-color: var(--bz-accent-soft);
}


/* The key for the per-state matrix, above the table rather than under it. Two columns on a
   desktop so it reads as a definition list and not as a paragraph. */
.matrix-key[b-7e7rol70hj] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 0.75rem;
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    color: var(--bz-text-muted);
    max-width: 60rem;
}

.matrix-key dt[b-7e7rol70hj] {
    font-weight: 600;
    color: var(--bz-text);
}

.matrix-key dd[b-7e7rol70hj] {
    margin: 0;
}

/* Ownership is a different question from editability, so it is ruled off from the two
   checkboxes that answer the other one. */
.matrix-owner[b-7e7rol70hj] {
    padding-left: 0.6rem;
    margin-left: 0.15rem;
    border-left: 1px solid var(--bz-border);
}

/* The inline "add a group" form inside the field dialog. Defined here rather than borrowed from
   RequestView: scoped CSS is per component, so a class of the same name on another page does
   nothing for this markup. */
.dialog-inline-form[b-7e7rol70hj] {
    margin-top: 0.5rem;
}

.dialog-inline-actions[b-7e7rol70hj] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
/* /Components/Pages/App/Admin/People.razor.rz.scp.css */
/* Somebody whose access has been withdrawn. Dimmed rather than hidden: an administrator needs to
   see who is no longer here, and needs the row in order to give it back. */
.person-inactive td[b-kia1gnisu5] {
    opacity: 0.55;
}

/* Not the buttons, though — a restore control faded out reads as disabled. */
.person-inactive td:last-child[b-kia1gnisu5] {
    opacity: 1;
}
/* /Components/Pages/App/Admin/RoleAssignments.razor.rz.scp.css */
.area-select[b-utwmta0cbp] {
    max-width: 20rem;
}

.admin-person-field[b-utwmta0cbp] {
    flex: 1 1 30rem;
    min-width: 24rem;
}

.admin-axis-row[b-utwmta0cbp] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 0.9rem;
}

.admin-axis-field[b-utwmta0cbp] {
    flex: 1 1 14rem;
    min-width: 14rem;
}

.admin-axis-tree[b-utwmta0cbp] {
    height: 8rem;
    overflow-y: auto;
    border: 1px solid var(--bz-border);
    border-radius: var(--bs-border-radius, 0.25rem);
    padding: 0.4rem 0;
}

.admin-axis-node[b-utwmta0cbp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.6rem;
    margin: 0;
    font-weight: normal;
    cursor: pointer;
}

    .admin-axis-node:hover[b-utwmta0cbp] {
        background-color: var(--bz-surface-alt);
    }

    .admin-axis-node input[b-utwmta0cbp] {
        margin: 0;
        flex-shrink: 0;
    }

/* Wider than the default app-dialog (34rem) — PersonPicker's three filterable columns need
   enough room per column that a filter popover (min-width 10rem) doesn't overflow the dialog.
   max-height/overflow is a backstop for very short viewports — PersonPicker's own table already
   caps itself at 50vh internally, which is normally enough on its own to keep Cancel/Grant
   access from being pushed off-screen. */
.person-picker-dialog[b-utwmta0cbp] {
    max-width: 40rem;
    max-height: 85vh;
    overflow-y: auto;
}

.admin-matrix-dialog[b-utwmta0cbp] {
    max-width: min(90vw, 70rem);
    max-height: 85vh;
}

    .admin-matrix-dialog[open][b-utwmta0cbp] {
        display: flex;
        flex-direction: column;
    }

.admin-matrix-wrap[b-utwmta0cbp] {
    overflow: auto;
    border: 1px solid var(--bz-border);
    border-radius: var(--bs-border-radius, 0.25rem);
    flex: 1 1 auto;
    min-height: 0;
}

.admin-matrix-table[b-utwmta0cbp] {
    width: auto;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

    .admin-matrix-table th[b-utwmta0cbp],
    .admin-matrix-table td[b-utwmta0cbp] {
        white-space: nowrap;
        vertical-align: middle;
    }

    .admin-matrix-table thead th[b-utwmta0cbp] {
        height: 6.5rem;
        vertical-align: bottom;
        text-align: left;
        padding-bottom: 0.35rem;
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--bz-text-muted);
        /* Background from .table thead th. Sticky is the only reason this ever set one. */
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .admin-matrix-table thead th:first-child[b-utwmta0cbp] {
        left: 0;
        z-index: 3;
    }

    .admin-matrix-table tbody th[b-utwmta0cbp] {
        text-align: left;
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--bz-text-muted);
        background-color: var(--bz-surface-alt);
        position: sticky;
        left: 0;
        z-index: 1;
    }

    .admin-matrix-table td[b-utwmta0cbp] {
        width: 1.9rem;
        min-width: 1.9rem;
        height: 1.9rem;
        border: 1px solid var(--bz-border-soft);
    }

.admin-matrix-col-label[b-utwmta0cbp] {
    display: block;
    width: 1px;
    overflow: visible;
    white-space: nowrap;
    transform: rotate(-90deg);
    transform-origin: bottom left;
    position: relative;
    left: 0.9rem;
}

.admin-matrix-cell-on[b-utwmta0cbp] {
    background-color: var(--bz-accent-soft);
    color: var(--bz-accent);
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    line-height: 1;
}

.admin-matrix-legend[b-utwmta0cbp] {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--bz-text-muted);
}
/* /Components/Pages/App/Admin/WorkflowAdmin.razor.rz.scp.css */
.row-highlight[b-0tpcddkzj2] {
    background-color: var(--bz-accent-soft);
}

.admin-expand-row td[b-0tpcddkzj2] {
    background-color: var(--bz-surface-alt);
    border-top: none;
}

.admin-summary-list[b-0tpcddkzj2] {
    padding-left: 1.25rem;
    font-size: 0.875rem;
}

.admin-row-deleted td[b-0tpcddkzj2] {
    color: var(--bz-text-muted);
}

/* Fixed layout so column widths are set once from the header row and don't reflow every time a
   filter narrows (or a sort reorders) which rows — and therefore which text lengths — are on
   screen. Percentages sized for this table's real content: From/To carry the longest state names,
   Roles carries comma-joined lists, the trailing two columns only ever hold a short badge or a
   couple of buttons. */
.transitions-table[b-0tpcddkzj2] {
    table-layout: fixed;
}

    .transitions-table th:nth-child(1)[b-0tpcddkzj2],
    .transitions-table td:nth-child(1)[b-0tpcddkzj2] {
        width: 19%;
    }

    .transitions-table th:nth-child(2)[b-0tpcddkzj2],
    .transitions-table td:nth-child(2)[b-0tpcddkzj2] {
        width: 19%;
    }

    .transitions-table th:nth-child(3)[b-0tpcddkzj2],
    .transitions-table td:nth-child(3)[b-0tpcddkzj2] {
        width: 9%;
    }

    .transitions-table th:nth-child(4)[b-0tpcddkzj2],
    .transitions-table td:nth-child(4)[b-0tpcddkzj2] {
        width: 12%;
    }

    .transitions-table th:nth-child(5)[b-0tpcddkzj2],
    .transitions-table td:nth-child(5)[b-0tpcddkzj2] {
        width: 25%;
    }

    .transitions-table th:nth-child(6)[b-0tpcddkzj2],
    .transitions-table td:nth-child(6)[b-0tpcddkzj2] {
        width: 6%;
    }

    .transitions-table th:nth-child(7)[b-0tpcddkzj2],
    .transitions-table td:nth-child(7)[b-0tpcddkzj2] {
        width: 10%;
    }

    .transitions-table td[b-0tpcddkzj2] {
        overflow-wrap: break-word;
    }

/* A workflow that cannot say where a third party's answer leads. Warning rather than error:
   the state may be half-configured because the admin is part-way through building it, and
   refusing to save would make the page harder to use than the mistake warrants. */
.workflow-route-warning[b-0tpcddkzj2] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--bz-danger-border);
    border-radius: 999px;
    background-color: var(--bz-danger-soft);
    color: var(--bz-danger);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}
/* /Components/Pages/App/AreaView.razor.rz.scp.css */
.group-by-control[b-yx6j8zzcmw] {
    position: relative;
    display: inline-block;
    margin-left: 1rem;
}

.group-by-popover[b-yx6j8zzcmw] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    right: 0;
    min-width: 12rem;
}

/* Pinned below the page's own sticky toolbar (same offsets RequestView's summary panel uses),
   so the column labels and the "Show"/"Group by" filters both stay visible while the (often very
   long) list of requests scrolls underneath them. Sticky has to be set per-cell, not on <thead> —
   that's the part of the spec browsers actually support for table headers.
   z-index has to clear .filter-overlay's (9), not just page-toolbar-sticky's (5) — position:
   sticky makes each <th> its own stacking context, so a column's filter-popover (z-index 10),
   though nested inside that <th>, only outranks the overlay if the <th> itself does. At 4 it
   didn't, so the transparent overlay sat on top and silently ate every click meant for the
   popover — including opening its <select>, which read as "the panel just closes". */
/* Background comes from .table thead th now -- this only has to make the header stick, and the
   opacity that used to be its own concern is the global band's. */
.area-requests-table thead th[b-yx6j8zzcmw] {
    position: sticky;
    top: 3.5rem;
    z-index: 11;
}

@media (min-width: 641px) {
    .area-requests-table thead th[b-yx6j8zzcmw] {
        top: 6.75rem;
    }
}

/* Sits with the other toolbar controls and stays narrow: it is a filter, not the point of the
   page, and a full-width search box would read as one. */
.text-search-control[b-yx6j8zzcmw] {
    display: inline-block;
    margin-left: 1rem;
    width: 12rem;
}

/* Two groups of filter doing opposite things — see the note in the markup. The label names each
   group and the rule separates them; nothing else about the controls changes. */
.filter-group-label[b-yx6j8zzcmw] {
    margin-right: 0.35rem;
    color: var(--bz-text-muted);
    font-size: 0.8125rem;
}

.filter-group-divider[b-yx6j8zzcmw] {
    display: inline-block;
    width: 1px;
    height: 1.1rem;
    margin: 0 0.6rem;
    vertical-align: middle;
    background-color: var(--bz-border);
}
/* /Components/Pages/App/Dashboard.razor.rz.scp.css */
/* A panel's contents scroll; the panel itself stays put.

   Without this the dashboard is one long column: a busy organisation's notifications alone run
   past the fold, and the panels below them — which is where the approvals waiting on *you* are —
   are somewhere off the bottom of the page. Each list now keeps its own space, so what the page
   contains stays visible even when one of them is long.

   A viewport-relative cap rather than a fixed height, so a tall screen shows more rather than the
   same twelve rows with more white space under them. The floor keeps it usable on a laptop, where
   55vh of a short window would otherwise be four rows. */
.panel-scroll[b-sigilzb0ts] {
    max-height: max(18rem, 55vh);
    overflow-y: auto;
}

/* Column headers stay while the rows move. A filter you can no longer see is one you forget is on,
   which is how somebody comes to report that a request has vanished. */
.panel-scroll thead th[b-sigilzb0ts] {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bz-surface);
}

/* While a column's filter menu is open. A box that scrolls also clips, so the popover would be cut
   off at the bottom row — worst on the last row, which is where somebody filtering a long list is
   most likely to be looking. It grows for as long as the menu is open and goes back afterwards. */
.panel-scroll-unclipped[b-sigilzb0ts] {
    max-height: none;
    overflow: visible;
}

/* The kind of work, under the organisation that sends it.

   Smaller than the organisation's own heading on purpose: a supplier thinks in customers first and
   in what they have sent second, so the two headings should not compete. Not a heading element —
   it labels a table rather than opening a section, and a run of h4s here would give a screen
   reader an outline that says more than the page means. */
.third-party-area[b-sigilzb0ts] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    margin: 0.6rem 0 0.15rem;
}

/* What is waiting on this administrator. Plain links in a list rather than a table: there are one
   or two of these at most, and each is a sentence rather than a row of fields. */
.waiting-list[b-sigilzb0ts] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.waiting-list li + li[b-sigilzb0ts] {
    margin-top: 0.4rem;
}
/* /Components/Pages/App/MyActivity.razor.rz.scp.css */
.my-activity-table-wrap table[b-i9i3eocmbv] {
    table-layout: fixed;
    width: 100%;
}

/* table-layout: fixed takes column widths from this (the first) row only, so they stay put
   regardless of what filtering does to the row content below. Details gets whatever's left. */
.my-activity-col-date[b-i9i3eocmbv] {
    width: 11rem;
}

.my-activity-col-area[b-i9i3eocmbv] {
    width: 8rem;
}

.my-activity-col-request[b-i9i3eocmbv] {
    width: 8rem;
}
/* /Components/Pages/App/RequestView.razor.rz.scp.css */
.invite-dialog[b-r0osrzbr6i] {
    max-width: 36rem;
}

.dialog-option[b-r0osrzbr6i] {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bz-border-soft);
}

.dialog-option:last-of-type[b-r0osrzbr6i] {
    border-bottom: none;
}

.dialog-inline-form[b-r0osrzbr6i] {
    margin-top: 0.5rem;
}

.dialog-inline-form textarea[b-r0osrzbr6i] {
    width: 100%;
}

.dialog-inline-actions[b-r0osrzbr6i] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.detail-split[b-r0osrzbr6i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1.5rem;
    margin: 0 0 1rem;
}

.detail-stack[b-r0osrzbr6i] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0 0 1rem;
}

.detail-field dt[b-r0osrzbr6i] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bz-text-muted);
    margin-bottom: 0.15rem;
}

.detail-field dd[b-r0osrzbr6i] {
    margin: 0;
    color: var(--bz-text);
}

/* Present on every field, so it has to be quiet — but not so quiet it reads as part of the label.
   Inheriting the dt's uppercase was the first attempt and it was wrong: "DESCRIPTION HISTORY"
   looks like a field called Description History, which is worse than clutter because it is
   ambiguous. Found by looking at it; no test would have said a word.

   So: the label's size, deliberately not its case or weight. */
.detail-field-history[b-r0osrzbr6i] {
    margin-left: 0.45rem;
    font-size: inherit;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bz-text-muted);
    text-decoration: none;
    vertical-align: baseline;
    opacity: 0.8;
}

.detail-field-history:hover[b-r0osrzbr6i],
.detail-field-history:focus-visible[b-r0osrzbr6i] {
    color: var(--bz-link, #0d6efd);
    text-decoration: underline;
}


.page-header-attachments-toggle[b-r0osrzbr6i] {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    line-height: 0;
    color: var(--bz-text-muted);
    cursor: pointer;
}

.page-header-attachments-toggle:hover[b-r0osrzbr6i] {
    color: var(--bz-accent);
}

.attachments-menu[b-r0osrzbr6i] {
    position: relative;
    display: inline-flex;
}

.dropdown-overlay[b-r0osrzbr6i] {
    position: fixed;
    inset: 0;
    z-index: 19;
    background: transparent;
}

.attachments-dropdown[b-r0osrzbr6i] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    margin-top: 0.5rem;
    /* Twice what it was. At 28–34rem the five columns wrapped file names and comments onto several
       lines each, so the list was taller than it was useful. Capped at the viewport either way. */
    min-width: min(56rem, 90vw);
    max-width: min(68rem, 90vw);
    max-height: 60vh;
    overflow: auto;
    background-color: var(--bz-surface);
    border: 1px solid var(--bz-border);
    border-radius: var(--bs-border-radius-lg, 0.375rem);
    box-shadow: 0 0.5rem 1rem rgba(38, 36, 31, 0.2);
    padding: 0.5rem;
}

/* Name and its Delete button on one line, with the button hard against the name rather than
   floated to the far edge of the column — at wide viewports a right-aligned button ends up
   detached from the thing it acts on. */
.detail-with-action[b-r0osrzbr6i] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* The organisation this request went to, beside the title.
   Sized explicitly because it sits inside the h1 and would otherwise inherit heading size, and
   coloured with the accent rather than a neutral badge: this is the one fact on the page that
   changes who can see the rest of it. */
.third-party-chip[b-r0osrzbr6i] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.65rem;
    border: 1px solid var(--bz-accent);
    border-radius: 999px;
    background-color: var(--bz-accent-soft);
    color: var(--bz-accent-hover);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

/* Said before anything else on a parked request. The contrast ink at tint strength, the same
   vocabulary as a state pill — this is a fact about where the request stands, not a fault, and
   --bz-danger would tell the reader something untrue about a deliberate act. */
.request-paused-banner[b-r0osrzbr6i] {
    margin-bottom: 1rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--bz-emphasis-border);
    border-left: 4px solid var(--bz-emphasis);
    border-radius: var(--bs-border-radius);
    background-color: var(--bz-emphasis-soft);
    color: var(--bz-emphasis);
    font-size: 0.875rem;
}

/* The anchor for the pause popover. The toolbar lays its buttons out in a row, so this has to be
   an inline box that establishes positioning without changing how the button sits in that row. */
.pause-control[b-r0osrzbr6i] {
    position: relative;
    display: inline-block;
}

/* Wider than a filter popover because it holds a sentence rather than a list, and anchored to the
   button's right edge so it opens back over the toolbar instead of off the side of the page —
   Pause is the last control in the row. */
.pause-popover[b-r0osrzbr6i] {
    width: 20rem;
    text-align: left;
}

/* The request itself, as one thing.

   Replaced .request-summary-panel, which was sticky so that state and axis context stayed visible
   while the rest scrolled underneath. That is deliberately not carried over: the container is now
   the whole request rather than a strip at the top of it, and a sticky panel of that height would
   cover the content it is supposed to introduce. If the pinned context is missed, the answer is to
   pin the Summary sub-panel alone, not this. */
.request-detail-panel[b-r0osrzbr6i] {
    padding-bottom: 0.5rem;
}

.request-detail-heading[b-r0osrzbr6i] {
    margin: 0 0 1rem;
    color: var(--bz-heading);
    font-size: 1.25rem;
    font-weight: 600;
}

/* Subordinate to the panel containing them: a step deeper in tone, a lighter rule, and no shadow,
   so the nesting reads as nesting rather than as panels that happen to be close together. */
.request-subpanel[b-r0osrzbr6i] {
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
    background-color: var(--bz-surface-alt);
    border: 1px solid var(--bz-border-soft);
    border-radius: var(--bs-border-radius, 0.25rem);
}

.request-subpanel:last-child[b-r0osrzbr6i] {
    margin-bottom: 0;
}

.request-subpanel-heading[b-r0osrzbr6i] {
    margin: 0 0 0.6rem;
    color: var(--bz-heading);
    font-size: 0.9375rem;
    font-weight: 600;
}

/* The groups keep their disclosure triangle, so their heading has to say it is pressable. */
details.request-subpanel > summary.request-subpanel-heading[b-r0osrzbr6i] {
    cursor: pointer;
}

    details.request-subpanel > summary.request-subpanel-heading:hover[b-r0osrzbr6i] {
        color: var(--bz-accent-hover);
    }

/* Where the request has got to, louder than the two facts beside it.

   The contrast ink, the same colour the area view gives a state in its group headings — so the
   word somebody read on the list is the word they meet again here, in the same colour. It is the
   one field on this panel people arrive to check. */
.detail-field-state dd[b-r0osrzbr6i] {
    color: var(--bz-emphasis);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

/* The pass through a state that a group of answers belongs to.

   A heading row inside the table rather than a separate table per visit, so the three columns stay
   aligned down the whole dialog — a reader comparing what changed on the second pass against the
   third is comparing columns, and separate tables would let them drift apart.

   Quieter than a th in the head: this separates rows, it does not label them. The top border is
   what does the separating, and the first group drops it because a rule directly under the header
   row reads as a double line. */
.history-visit > th[b-r0osrzbr6i] {
    background: var(--bz-surface-alt);
    border-top: 1px solid var(--bz-border);
    font-size: 0.8125rem;
    font-weight: 600;
    padding-top: 0.5rem;
    text-transform: none;
}

tbody:first-of-type .history-visit > th[b-r0osrzbr6i] {
    border-top: 0;
}

/* The dates sit apart from the state and the ordinal, which are the part people scan for. */
.history-visit-when[b-r0osrzbr6i] {
    font-weight: 400;
    margin-left: 0.5rem;
}

/* The message to an anonymous reporter.

   Marked out from every other panel on this page on purpose. The others are written for
   colleagues; this one is published to somebody outside the organisation who may be frightened of
   it, and the habit the warning has to interrupt is the habit of typing freely in a box that looks
   like all the others. So it gets a border and a tint rather than sitting flush with the rest. */
.reporter-message[b-r0osrzbr6i] {
    border: 1px solid var(--bz-emphasis);
    border-radius: 0.35rem;
    padding: 0.85rem 1rem;
    background-color: var(--bz-emphasis-soft);
}

.reporter-message-warning[b-r0osrzbr6i] {
    margin-bottom: 0.6rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bz-emphasis);
}

.reporter-message-when[b-r0osrzbr6i] {
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    color: var(--bz-text-muted);
}

/* The published text where somebody may read but not write — a quotation rather than a form
   control, because it is not one and a disabled textarea reads as a thing that is broken. */
.reporter-message-current[b-r0osrzbr6i] {
    margin-bottom: 0;
    padding-left: 0.75rem;
    border-left: 2px solid var(--bz-emphasis);
    white-space: pre-wrap;
}

.reporter-message-box[b-r0osrzbr6i] {
    margin-bottom: 0.6rem;
}

.reporter-message-actions[b-r0osrzbr6i] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* What else this supplier has been involved in.

   A table rather than the chip rows used elsewhere: every line is the same two questions asked of a
   different area, and columns are what lets somebody read down them. */
.supplier-record-table[b-r0osrzbr6i] {
    width: 100%;
    margin-bottom: 0.6rem;
    font-size: 0.8125rem;
}

.supplier-record-table th[scope="row"][b-r0osrzbr6i] {
    width: 12rem;
    padding-right: 1rem;
    font-weight: 600;
    text-align: left;
    vertical-align: top;
}

.supplier-record-table td[b-r0osrzbr6i] {
    vertical-align: top;
}

.supplier-record-figure[b-r0osrzbr6i] {
    display: inline-flex;
    gap: 0.35rem;
    margin-left: 0.9rem;
    white-space: nowrap;
}

.supplier-record-label[b-r0osrzbr6i] {
    color: var(--bz-text-muted);
}

.supplier-record-value[b-r0osrzbr6i] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.supplier-record-partial[b-r0osrzbr6i],
.supplier-record-note[b-r0osrzbr6i] {
    margin-bottom: 0;
    font-size: 0.75rem;
    color: var(--bz-text-muted);
}

.supplier-record-partial[b-r0osrzbr6i] {
    margin-bottom: 0.4rem;
}

/* The two computed rates, set apart from the counts they come from — they are the answer the
   scorecard asks for and the counts are the working. */
.supplier-record-rates[b-r0osrzbr6i] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bz-border-soft);
}

.supplier-record-rates .supplier-record-figure[b-r0osrzbr6i] {
    margin-left: 0;
}

.supplier-record-rates .supplier-record-value[b-r0osrzbr6i] {
    font-size: 0.9375rem;
}
/* /Components/Pages/AreaLanding.razor.rz.scp.css */
/* Scoped to this page, like Home's and Trust's. Every colour is a token from app.css so the page
   follows the theme rather than carrying a palette of its own. */

/* The hero band. Slate rather than olive: olive is the accent that means "act on this", and
   spending it on a background would leave the button inside the band with nothing left to be. */
.landing-hero[b-mtw8slbnaw] {
    background: var(--bz-heading);
    color: var(--bz-surface);
    padding-block: 4rem 3.5rem;
    margin-bottom: 3rem;
}

.landing-eyebrow[b-mtw8slbnaw] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bz-emphasis-border);
    margin-bottom: 0.75rem;
}

h1[b-mtw8slbnaw] {
    font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 20ch;
    text-wrap: balance;
    color: var(--bz-surface);
}

.landing-hero .lead[b-mtw8slbnaw] {
    font-size: 1.2rem;
    max-width: 58ch;
    /* Not --bz-text-muted, which is a muted ink for a light ground and disappears on this one. */
    color: var(--bz-border);
}

.landing-actions[b-mtw8slbnaw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 2rem 0 0;
}

/* An outline button that reads on a dark ground. btn-outline-secondary is drawn for the cream
   page and all but vanishes here. */
.btn-hero-ghost[b-mtw8slbnaw] {
    border: 1px solid var(--bz-border);
    color: var(--bz-surface);
    background: transparent;
}

.btn-hero-ghost:hover[b-mtw8slbnaw],
.btn-hero-ghost:focus-visible[b-mtw8slbnaw] {
    background: rgba(248, 246, 241, 0.12);
    color: var(--bz-surface);
    border-color: var(--bz-surface);
}

.landing-flow[b-mtw8slbnaw] {
    border-top: 1px solid var(--bz-border-soft);
    padding-top: 2rem;
}

.landing-flow h2[b-mtw8slbnaw],
.landing-points h2[b-mtw8slbnaw] {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bz-heading);
}

/* Numbered by the browser rather than in the markup, so this stays an ordered list and a screen
   reader announces the position without the numbers being content anybody has to maintain. */
.landing-steps[b-mtw8slbnaw] {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: grid;
    gap: 1.5rem;
    counter-reset: landing-step;
}

.landing-steps li[b-mtw8slbnaw] {
    counter-increment: landing-step;
    padding-left: 3rem;
    position: relative;
}

.landing-steps li[b-mtw8slbnaw]::before {
    content: counter(landing-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    background: var(--bz-accent-soft);
    color: var(--bz-accent);
}

/* Whose turn it is, which is the one thing worth being able to skim down the page. Colour is not
   the only carrier — the word itself says who. */
.landing-step-who[b-mtw8slbnaw] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--bz-surface-alt);
    color: var(--bz-text-muted);
    margin-bottom: 0.35rem;
}

.landing-step-them[b-mtw8slbnaw] {
    background: var(--bz-emphasis-soft);
    color: var(--bz-emphasis);
}

.landing-steps strong[b-mtw8slbnaw] {
    display: block;
    color: var(--bz-heading);
}

.landing-steps p[b-mtw8slbnaw] {
    color: var(--bz-text-muted);
    margin: 0.25rem 0 0;
    max-width: 60ch;
}

@media (min-width: 52rem) {
    .landing-steps[b-mtw8slbnaw] {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }
}

.landing-points[b-mtw8slbnaw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.25rem;
    margin-top: 3.5rem;
}

/* Cards rather than columns of prose separated by a rule. Three claims about a product read as
   three claims when each has an edge around it; without one they read as one long paragraph that
   happens to have headings in it. */
.landing-point[b-mtw8slbnaw] {
    padding: 1.5rem;
    border: 1px solid var(--bz-border-soft);
    border-radius: 0.7rem;
    background: var(--bz-surface);
}

/* The one flourish. A short rule in the accent above each heading gives the grid a rhythm at a
   glance, and costs nothing to read past. */
.landing-point h2[b-mtw8slbnaw]::before {
    content: "";
    display: block;
    width: 2.25rem;
    height: 3px;
    border-radius: 2px;
    background: var(--bz-accent);
    margin-bottom: 0.9rem;
}

.landing-points h2[b-mtw8slbnaw] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bz-heading);
}

.landing-points p[b-mtw8slbnaw] {
    color: var(--bz-text-muted);
    margin-bottom: 0;
}

/* Closes on the same slate the page opened on, so the reading has a lid on it rather than
   trailing off into the footer. */
.landing-close[b-mtw8slbnaw] {
    background: var(--bz-heading);
    color: var(--bz-surface);
    padding-block: 3.5rem;
    margin-top: 4rem;
    text-align: center;
}

.landing-close h2[b-mtw8slbnaw] {
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bz-surface);
    text-wrap: balance;
    margin-inline: auto;
    max-width: 24ch;
}

.landing-close p[b-mtw8slbnaw] {
    color: var(--bz-border);
    max-width: 58ch;
    margin: 1rem auto 1.75rem;
}

.landing-shot[b-mtw8slbnaw] {
    margin-top: 3.5rem;
}

.landing-shot h2[b-mtw8slbnaw] {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bz-heading);
    margin-bottom: 1.25rem;
}
/* /Components/Pages/AreaLandingIndex.razor.rz.scp.css */
/* The hub. Same tokens, the same rhythm and the same slate bands as the landing pages it links
   to — three pages that read as one site rather than three that share a footer. */

.index-hero[b-rm6v3lh6qn] {
    background: var(--bz-heading);
    color: var(--bz-surface);
    padding-block: 4rem 3.5rem;
    margin-bottom: 3.5rem;
}

h1[b-rm6v3lh6qn] {
    font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 20ch;
    text-wrap: balance;
    color: var(--bz-surface);
}

.lead[b-rm6v3lh6qn] {
    font-size: 1.2rem;
    max-width: 58ch;
    color: var(--bz-border);
}

.index-cards[b-rm6v3lh6qn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.5rem;
}

/* The whole card is the link rather than a "read more" inside it — a bigger target, and one
   announced once instead of twice. */
.index-card[b-rm6v3lh6qn] {
    display: block;
    padding: 1.5rem;
    border: 1px solid var(--bz-border-soft);
    border-radius: 0.5rem;
    background: var(--bz-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease,
                box-shadow 0.15s ease;
}

.index-card:hover[b-rm6v3lh6qn],
.index-card:focus-visible[b-rm6v3lh6qn] {
    border-color: var(--bz-accent);
    background: var(--bz-surface-alt);
}

.index-card-eyebrow[b-rm6v3lh6qn] {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bz-text-muted);
    margin-bottom: 0.5rem;
}

.index-card h2[b-rm6v3lh6qn] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bz-heading);
    margin-bottom: 0.5rem;
}

.index-card p[b-rm6v3lh6qn] {
    color: var(--bz-text-muted);
    margin-bottom: 1rem;
}

.index-card-more[b-rm6v3lh6qn] {
    font-weight: 600;
    color: var(--bz-accent);
}

.index-close[b-rm6v3lh6qn] {
    background: var(--bz-heading);
    color: var(--bz-surface);
    padding-block: 3.5rem;
    margin-top: 4rem;
    text-align: center;
}

.index-close h2[b-rm6v3lh6qn] {
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--bz-surface);
    text-wrap: balance;
    margin-inline: auto;
    max-width: 26ch;
}

.index-close p[b-rm6v3lh6qn] {
    color: var(--bz-border);
    max-width: 58ch;
    margin: 1rem auto 1.75rem;
}

/* Lifts on hover rather than only changing colour. These cards are the one navigation choice the
   page offers, so they should feel like objects you pick up. */
.index-card[b-rm6v3lh6qn] {
    box-shadow: 0 1px 2px rgba(38, 36, 31, 0.05);
}

.index-card:hover[b-rm6v3lh6qn],
.index-card:focus-visible[b-rm6v3lh6qn] {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(38, 36, 31, 0.06), 0 12px 24px -16px rgba(38, 36, 31, 0.35);
}

/* Somebody who has turned motion down still gets the colour and shadow change; they just do not
   get moved. */
@media (prefers-reduced-motion: reduce) {
    .index-card[b-rm6v3lh6qn] {
        transition: none;
    }

    .index-card:hover[b-rm6v3lh6qn],
    .index-card:focus-visible[b-rm6v3lh6qn] {
        transform: none;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* The hero band. Slate rather than olive, for the same reason as the area pages: olive is the
   accent that means "act on this", and spending it on a background leaves the button inside the
   band nothing to be. */
.home-hero[b-efe9kqp4ia] {
    display: grid;
    gap: 2rem;
    align-items: center;
    background: var(--bz-heading);
    color: var(--bz-surface);
    padding-block: 4.5rem 4rem;
}

h1[b-efe9kqp4ia] {
    /* Scales with the window instead of stepping at one breakpoint, so the headline is the
       biggest thing on the page at every width rather than only at the one that was tested. */
    font-size: clamp(2.3rem, 1.3rem + 3vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    max-width: 16ch;
    text-wrap: balance;
    color: var(--bz-surface);
}

.lead[b-efe9kqp4ia] {
    font-size: 1.2rem;
    max-width: 52ch;
    /* --bz-text-muted is a muted ink for a light ground and all but disappears on this one. */
    color: var(--bz-border);
}

.home-actions[b-efe9kqp4ia] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 2rem 0 1.5rem;
}

/* The route into the landing pages. Sits under the buttons rather than beside them: it is a
   third option, not a third call to action, and it should read as a sentence. */
.home-explore[b-efe9kqp4ia] {
    margin: 0;
    max-width: 58ch;
    font-size: 0.95rem;
    color: var(--bz-border);
}

.home-explore a[b-efe9kqp4ia] {
    color: var(--bz-surface);
    text-decoration-color: rgba(248, 246, 241, 0.45);
    text-underline-offset: 0.2em;
}

/* Hidden by default rather than shown and shrunk. On a narrow screen the header lockup is
   already on screen, so a second one would repeat the brand and push the headline — the
   thing a visitor came to read — below the fold. */
.home-hero-mark[b-efe9kqp4ia] {
    display: none;
}

@media (min-width: 62rem) {
    .home-hero[b-efe9kqp4ia] {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 3rem;
    }

    .home-hero-mark[b-efe9kqp4ia] {
        display: block;
        width: 100%;
        max-width: 17rem;
        height: auto;
        justify-self: center;
        /* The mark is drawn for a light ground. On the slate it needs its own surface rather than
           a filter, which would shift the olive and the navy against each other. */
        background: var(--bz-surface);
        border-radius: 1rem;
        padding: 1.75rem;
    }
}

/* Three numbers, straddling the bottom edge of the hero so the band and the page below are read
   as one movement rather than two stacked sections. */
.home-facts[b-efe9kqp4ia] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
    margin: -3rem 0 3.5rem;
}

.home-fact[b-efe9kqp4ia] {
    background: var(--bz-surface);
    border: 1px solid var(--bz-border-soft);
    border-radius: 0.7rem;
    padding: 1.25rem 1.25rem 1.1rem;
    box-shadow: 0 1px 2px rgba(38, 36, 31, 0.06), 0 10px 22px -14px rgba(38, 36, 31, 0.3);
}

.home-fact-figure[b-efe9kqp4ia] {
    display: block;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--bz-accent);
    font-variant-numeric: tabular-nums;
}

.home-fact-label[b-efe9kqp4ia] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--bz-text-muted);
}

.home-points[b-efe9kqp4ia] {
    display: grid;
    /* One column on a phone, two on a desktop, without a media query each.

       20rem rather than the 17rem that would fit three: there are four claims, and four in a
       three-column grid leaves one on its own looking like something failed to load. Two by two
       reads as a set. */
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1.25rem;
}

/* Cards rather than columns of prose under a rule. Four claims read as four claims when each has
   an edge around it; without one they read as one long passage that happens to have headings. */
.home-points section[b-efe9kqp4ia] {
    padding: 1.5rem;
    border: 1px solid var(--bz-border-soft);
    border-radius: 0.7rem;
    background: var(--bz-surface);
}

.home-points h2[b-efe9kqp4ia] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bz-heading);
}

.home-points h2[b-efe9kqp4ia]::before {
    content: "";
    display: block;
    width: 2.25rem;
    height: 3px;
    border-radius: 2px;
    background: var(--bz-accent);
    margin-bottom: 0.9rem;
}

.home-points p[b-efe9kqp4ia] {
    color: var(--bz-text-muted);
    margin-bottom: 0;
}

/* An outline button that reads on a dark ground. btn-outline-secondary is drawn for the cream
   page and all but vanishes here. */
.btn-hero-ghost[b-efe9kqp4ia] {
    border: 1px solid var(--bz-border);
    color: var(--bz-surface);
    background: transparent;
}

.btn-hero-ghost:hover[b-efe9kqp4ia],
.btn-hero-ghost:focus-visible[b-efe9kqp4ia] {
    background: rgba(248, 246, 241, 0.12);
    color: var(--bz-surface);
    border-color: var(--bz-surface);
}

/* The screenshot slot in the hero, when one is registered. Same column the mark occupies, but it
   can run wider — a screenshot at mark width is unreadable. */
.home-hero-shot[b-efe9kqp4ia] {
    display: none;
}

@media (min-width: 62rem) {
    .home-hero-shot[b-efe9kqp4ia] {
        display: block;
        width: 100%;
    }
}

/* Closes on the same slate the page opened on, so the reading has a lid on it rather than
   trailing off into the footer. */
.home-close[b-efe9kqp4ia] {
    background: var(--bz-heading);
    color: var(--bz-surface);
    padding-block: 4rem;
    margin-top: 4rem;
    text-align: center;
}

.home-close h2[b-efe9kqp4ia] {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--bz-surface);
    text-wrap: balance;
    margin-inline: auto;
    max-width: 24ch;
}

.home-close p[b-efe9kqp4ia] {
    color: var(--bz-border);
    max-width: 54ch;
    margin: 1rem auto 1.75rem;
}
/* /Components/Pages/Trust.razor.rz.scp.css */
.trust-page[b-z4tivkpnms] {
    max-width: 44rem;
}

.trust-page h1[b-z4tivkpnms] {
    margin-bottom: 1rem;
}

.trust-page .lead[b-z4tivkpnms] {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.trust-page section[b-z4tivkpnms] {
    margin-bottom: 2rem;
}

.trust-page h2[b-z4tivkpnms] {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.trust-page h3[b-z4tivkpnms] {
    font-size: 1rem;
    margin: 1.25rem 0 0.5rem;
}

/* Marks a paragraph carrying something still to be settled, so an unfinished page cannot be
   mistaken for a finished one at a glance. Remove the class with the last [to confirm]. */
.trust-pending[b-z4tivkpnms] {
    border-left: 3px solid #9a6b00;
    padding-left: 0.75rem;
    color: #6b5416;
}
/* /Components/Shared/DateFilterEditor.razor.rz.scp.css */
.date-filter-editor[b-9nvcqhbmzo] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 8.5rem;
}

.date-filter-editor-and[b-9nvcqhbmzo] {
    font-size: 0.75rem;
    color: var(--bz-text-muted);
    text-align: center;
}
/* /Components/Shared/PageHeader.razor.rz.scp.css */
.page-header-title-row[b-8cyqj82t7d] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Larger than the panel headings below it, and in the heading colour they already use.
   At 1.5rem it was the same size as an .admin-panel h2 in all but name, so the page and the first
   thing on it read as two items of equal weight rather than as a title and its contents. */
.page-header h1[b-8cyqj82t7d] {
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--bz-heading);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-header-back[b-8cyqj82t7d] {
    font-size: 0.875rem;
    margin-left: auto;
    white-space: nowrap;
}

    .page-header-back a[b-8cyqj82t7d] {
        color: var(--bz-text-muted);
        text-decoration: none;
    }

    .page-header-back a:hover[b-8cyqj82t7d] {
        color: var(--bz-text);
        text-decoration: underline;
    }

.page-header-info-toggle[b-8cyqj82t7d] {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    line-height: 0;
    color: var(--bz-text-muted);
    cursor: pointer;
}

    .page-header-info-toggle:hover[b-8cyqj82t7d] {
        color: var(--bz-text);
    }

.page-header-description[b-8cyqj82t7d] {
    color: var(--bz-text-muted);
}

.page-toolbar[b-8cyqj82t7d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bz-surface-alt);
    border: 1px solid var(--bz-border);
    border-radius: var(--bs-border-radius, 0.25rem);
}

/* position: sticky only has room to work if its containing block (normally the parent) is
   taller than the element itself — .page-header is only as tall as its own content, so it
   would drag the toolbar away as soon as the header's own bottom edge passed the sticky
   offset. display: contents removes that box from layout so the toolbar's containing block
   becomes the full-height page body instead, giving it room to actually stick. .page-header
   carries no styling of its own, so this has no visual effect beyond enabling the toolbar
   to stick correctly. */
.page-header-sticky[b-8cyqj82t7d] {
    display: contents;
}

.page-toolbar-sticky[b-8cyqj82t7d] {
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Matches MainLayout's breakpoint where the top nav row itself becomes sticky (3.5rem tall) —
   below it, the toolbar sticks to the very top instead since nothing else is pinned there. */
@media (min-width: 641px) {
    .page-toolbar-sticky[b-8cyqj82t7d] {
        top: 3.5rem;
    }
}
/* /Components/Shared/PersonPicker.razor.rz.scp.css */
/* Left unstyled, the table just shrinks to its content's minimum width — cramped even inside
   the widened person-picker-dialog. Filling the full width and giving cells more breathing room
   than table-sm's default padding spaces the Last name/First name/Job title columns out properly. */
.person-picker-table-wrap table[b-mplrn5barx] {
    width: 100%;
}

.person-picker-table-wrap th[b-mplrn5barx],
.person-picker-table-wrap td[b-mplrn5barx] {
    padding: 0.55rem 1rem;
}

/* Scrolls internally once the list is long, instead of growing the whole dialog until its own
   Cancel/Grant access buttons are pushed off the bottom of the screen. The header stays pinned
   to the top of that scroll area, same sticky-thead treatment used elsewhere in the app. */
.person-picker-table-wrap[b-mplrn5barx] {
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--bz-border);
    border-radius: var(--bs-border-radius, 0.25rem);
}

    .person-picker-table-wrap thead th[b-mplrn5barx] {
        /* Background from .table thead th. Sticky is the only reason this ever set one. */
        position: sticky;
        top: 0;
        z-index: 1;
    }
/* /Components/Shared/RequestFacts.razor.rz.scp.css */
.facts[b-j6lc8xi7zm] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
    min-width: 0;
}

/* One shape for every kind, so what tells them apart is the colour and the label rather than four
   different-looking things. A row where each fact had its own shape would read as four widgets
   instead of one request. */
.fact[b-j6lc8xi7zm] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.08rem 0.4rem;
    border-radius: 0.3rem;
    font-size: 0.78rem;
    line-height: 1.45;
    min-width: 0;
}

/* The label is what makes colour the second way of telling these apart rather than the only one —
   this has to survive a monochrome print and a reader who cannot separate the hues. Quieter than
   the value, because the value is what somebody is scanning for. */
.fact-label[b-j6lc8xi7zm] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
    flex: 0 0 auto;
}

/* A long value truncates rather than wrapping the row into a paragraph. The whole of it is on the
   request, one click away. */
.fact-value[b-j6lc8xi7zm] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Where the request is filed. */
.fact-axis[b-j6lc8xi7zm] {
    background: var(--bz-kind-axis-soft);
    color: var(--bz-kind-axis);
}

/* What the request says. */
.fact-field[b-j6lc8xi7zm] {
    background: var(--bz-kind-field-soft);
    color: var(--bz-kind-field);
}
/* /Components/Shared/RequestSummaryRow.razor.rz.scp.css */
.summary[b-8udz37w98f] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.summary-line[b-8udz37w98f] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    min-width: 0;
}

.summary-ref[b-8udz37w98f] {
    font-weight: 600;
    color: var(--bz-heading);
    text-decoration: none;
}

.summary-ref:hover[b-8udz37w98f],
.summary-ref:focus-visible[b-8udz37w98f] {
    text-decoration: underline;
}

.summary-area[b-8udz37w98f] {
    font-size: 0.8rem;
    color: var(--bz-text-muted);
}

/* The chips.

   One shape for every kind, so what separates them is the colour and the label rather than four
   different-looking things. A row where each fact had its own shape would read as four widgets
   instead of one request. */
.summary-chip[b-8udz37w98f] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.1rem 0.45rem;
    border-radius: 0.3rem;
    font-size: 0.78rem;
    line-height: 1.4;
    border: 1px solid transparent;
    min-width: 0;
}

/* A long value truncates rather than wrapping the row into a paragraph. The whole value is on the
   request itself, which the reference above goes to. */
.summary-chip-value[b-8udz37w98f] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* The label is what makes colour the second carrier rather than the only one. Quieter than the
   value because the value is what somebody is scanning for. */
.summary-chip-label[b-8udz37w98f] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
    flex: 0 0 auto;
}

/* Where it is filed. */
.summary-chip-axis[b-8udz37w98f] {
    background: var(--bz-kind-axis-soft);
    border-color: var(--bz-kind-axis-soft);
    color: var(--bz-kind-axis);
}

/* What it says. */
.summary-chip-field[b-8udz37w98f] {
    background: var(--bz-kind-field-soft);
    border-color: var(--bz-kind-field-soft);
    color: var(--bz-kind-field);
}

/* Where it has got to. */
.summary-chip-state[b-8udz37w98f] {
    background: var(--bz-kind-state-soft);
    border-color: var(--bz-kind-state-soft);
    color: var(--bz-kind-state);
    font-weight: 600;
}

/* Who else is holding it. Filled, because a request that has left the building is the one thing
   on the row that changes what the reader can do about it. */
.summary-chip-party[b-8udz37w98f] {
    background: var(--bz-kind-party-fill);
    border-color: var(--bz-kind-party-fill);
    color: var(--bz-kind-party-ink);
    font-weight: 600;
}

.summary-provenance[b-8udz37w98f] {
    font-size: 0.78rem;
    color: var(--bz-text-muted);
}

.summary-by[b-8udz37w98f] {
    /* Its own element so a long display name can wrap away from the date rather than dragging it
       onto a second line with it. */
    min-width: 0;
}

.summary-compact[b-8udz37w98f] {
    gap: 0.25rem;
}

.summary-compact .summary-provenance[b-8udz37w98f] {
    display: none;
}

/* Narrow panels: the facts stack instead of squeezing four chips onto a line that then wraps
   mid-label. */
@media (max-width: 30rem) {
    .summary-facts[b-8udz37w98f] {
        flex-direction: column;
        align-items: flex-start;
    }

    .summary-chip[b-8udz37w98f] {
        max-width: 100%;
    }
}
/* /Components/Shared/RetiredPanel.razor.rz.scp.css */
/* Deliberately quiet. This panel is a recovery route, not part of the day's work, and it sits
   underneath the real list on three different admin pages without competing with any of them. */

.retired-panel[b-e0usj7vj2x] {
    margin-top: 1.5rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    padding-top: 0.75rem;
}

.retired-toggle[b-e0usj7vj2x] {
    background: none;
    border: 0;
    padding: 0;
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
}

.retired-toggle:hover[b-e0usj7vj2x] {
    color: var(--bs-body-color, #212529);
    text-decoration: underline;
}

.retired-caret[b-e0usj7vj2x] {
    display: inline-block;
    width: 1rem;
    text-align: center;
}

.retired-body[b-e0usj7vj2x] {
    margin-top: 0.75rem;
}

.retired-explainer[b-e0usj7vj2x] {
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.5rem;
}

/* Scoped CSS is per component, so anything the rows themselves need lives on the pages that render
   them. What is here is only the panel's own chrome. */
/* /Components/Shared/RoleAssignmentsTable.razor.rz.scp.css */
.role-assignments-table-wrap table[b-yvn6c96fiw] {
    table-layout: fixed;
    width: 100%;
}

/* table-layout: fixed takes column widths from this (the first) row only, so they stay put
   regardless of what filtering does to the row content below. Person/Role/action get a fixed
   width; axis-scope columns split whatever's left evenly since their content varies most. */
.role-assignments-col-person[b-yvn6c96fiw] {
    width: 12rem;
}

.role-assignments-col-role[b-yvn6c96fiw] {
    width: 10rem;
}

.role-assignments-col-action[b-yvn6c96fiw] {
    width: 6rem;
}

/* The filter row's own styling went with the row. Its controls now live inside FilterSortHeader's
   popover, which brings its own. */

.role-assignments-more-link[b-yvn6c96fiw] {
    white-space: nowrap;
    vertical-align: baseline;
}

.role-assignments-scope-list[b-yvn6c96fiw] {
    max-height: 60vh;
    overflow-y: auto;
    margin: 0;
    padding-left: 1.25rem;
}
/* /Components/Shared/ScreenshotFrame.razor.rz.scp.css */
.product-shot[b-8uozevvfbo] {
    margin: 0;
}

/* The frame. A border, a radius and a shadow — enough to read as a window onto software, short of
   the fake browser chrome that would claim more than a screenshot can. */
.product-shot-frame[b-8uozevvfbo] {
    border: 1px solid var(--bz-border);
    border-radius: 0.7rem;
    background: var(--bz-surface);
    padding: 0.4rem;
    box-shadow: 0 1px 2px rgba(38, 36, 31, 0.06), 0 22px 45px -28px rgba(38, 36, 31, 0.5);
    /* Clips the image's own corners to the frame's, so the two radii agree. */
    overflow: hidden;
}

.product-shot-frame img[b-8uozevvfbo] {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.45rem;
}

.product-shot figcaption[b-8uozevvfbo] {
    margin-top: 0.85rem;
    font-size: 0.85rem;
    color: var(--bz-text-muted);
}

/* On a dark band the muted ink for a light ground disappears, and the frame's own surface is
   doing the separating, so the border can go. */
.product-shot-on-dark .product-shot-frame[b-8uozevvfbo] {
    border-color: rgba(248, 246, 241, 0.18);
    background: rgba(248, 246, 241, 0.06);
}

.product-shot-on-dark figcaption[b-8uozevvfbo] {
    color: var(--bz-border);
}
/* /Components/Shared/StateOptionMatrix.razor.rz.scp.css */
/* The key, in the corner header where the eye starts. Quiet enough not to compete with the
   column names beside it. */
.matrix-legend[b-jrzk6fvf6x] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.6rem;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--bz-text-muted);
    white-space: nowrap;
}

.matrix-cell[b-jrzk6fvf6x] {
    text-align: center;
}

/* Sized and centred so a column of them lines up as a column, which is the whole reason for
   single letters rather than words. */
.matrix-flag[b-jrzk6fvf6x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

/* Optional is the quieter of the two: it is the ordinary case, and the one a reader scanning
   for obligations is not looking for. */
.matrix-flag-optional[b-jrzk6fvf6x] {
    background-color: var(--bz-surface-deep);
    color: var(--bz-text-muted);
}

.matrix-flag-mandatory[b-jrzk6fvf6x] {
    background-color: var(--bz-accent-soft);
    color: var(--bz-accent-hover);
    border: 1px solid var(--bz-accent);
}

.state-option-matrix th[scope="row"][b-jrzk6fvf6x] {
    font-weight: 500;
    white-space: nowrap;
}

/* The group band (.admin-group-header-row) is in app.css, once, rather than repeated here and on
   the Information Types page: GroupHeaderRow draws the row, and scoped rules would not reach it. */

/* The editable cell: two small checkboxes side by side, centred so a column of them still reads
   as a column. Tight, because there are as many of these as fields times states. */
.matrix-edit[b-jrzk6fvf6x] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.matrix-edit label[b-jrzk6fvf6x] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bz-text-muted);
    cursor: pointer;
}
/* /Components/Shared/Toast.razor.rz.scp.css */
/* Bottom centre, above everything, and out of the way of the sticky toolbar at the top — which is
   where the button that raises this one lives, so the confirmation appears somewhere the eye is not
   already fixed. */
.bz-toast[b-5efgo6ej7y] {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1080;

    display: flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--bz-accent);
    background-color: var(--bz-accent);
    color: var(--bz-accent-contrast);
    box-shadow: 0 0.5rem 1.25rem rgba(38, 36, 31, 0.25);

    font-size: 0.875rem;
    /* Nothing is clickable on it, and a stray click while it happens to be over the page should
       reach what is underneath rather than land on a message that is about to leave. */
    pointer-events: none;

    animation: bz-toast-in-b-5efgo6ej7y 140ms ease-out;
}

.bz-toast-tick[b-5efgo6ej7y] {
    display: inline-flex;
    opacity: 0.9;
}

@keyframes bz-toast-in-b-5efgo6ej7y {
    from {
        opacity: 0;
        transform: translate(-50%, 0.5rem);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bz-toast[b-5efgo6ej7y] {
        animation: none;
    }
}
/* /Components/Shared/WorkflowDiagram.razor.rz.scp.css */
/* The row height every bracket is positioned against.

   Fixed so the margins can be drawn by arithmetic instead of by measuring the page — measuring
   would need JavaScript and a second render, and would make the geometry depend on how somebody
   worded a state name. */
.diagram[b-knz04r06rq] {
    --row: 2.25rem;
    --lane: 0.85rem;
}

.diagram-key[b-knz04r06rq] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    font-size: 0.8rem;
    color: var(--bz-text-muted);
}

.diagram-key span[b-knz04r06rq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.diagram-key-line[b-knz04r06rq] {
    width: 1.25rem;
    height: 0;
    border-top: 2px solid currentColor;
}

.diagram-key-forward[b-knz04r06rq] {
    color: var(--bz-accent);
}

.diagram-key-back[b-knz04r06rq] {
    color: var(--bz-emphasis);
}

.diagram-key-approval[b-knz04r06rq] {
    /* The heading slate rather than the axis token that looks the same: an approval marker is not
       a request fact, and borrowing that token would tie this diagram to a palette it has nothing
       to do with. */
    color: var(--bz-heading);
    border-top-style: dashed;
}

.diagram-key-timed[b-knz04r06rq] {
    color: var(--bz-heading);
    border-top-style: dotted;
}

/* Three columns: the margin that comes back, the states, the margin that goes on. The margins size
   themselves to how many brackets have to nest in them. */
.diagram-grid[b-knz04r06rq] {
    display: grid;
    grid-template-columns:
        calc(var(--lane) * var(--diagram-lanes-back, 0) + 0.75rem)
        minmax(0, 1fr)
        calc(var(--lane) * var(--diagram-lanes-forward, 0) + 0.75rem);
    align-items: start;
}

.diagram-gutter[b-knz04r06rq] {
    position: relative;
    /* Exactly as tall as the list beside it, so a bracket's top is its row index times the row
       height and nothing has to be measured. */
    height: calc(var(--row) * var(--diagram-rows));
    width: calc(var(--lane) * var(--diagram-lanes) + 0.75rem);
}

.diagram-states[b-knz04r06rq] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.diagram-state[b-knz04r06rq] {
    height: var(--row);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.6rem;
    border: 1px solid var(--bz-border);
    border-radius: 0.4rem;
    background: var(--bz-surface);
    /* Rows touch rather than gap, so the height arithmetic stays one multiplication. The border
       between two of them reads as a divider either way. */
    margin-top: -1px;
    min-width: 0;
}

.diagram-state:first-child[b-knz04r06rq] {
    margin-top: 0;
}

/* Truncated rather than wrapped: a row that grew to two lines would put every bracket below it
   out by one row. The full name is the element's title. */
.diagram-state-name[b-knz04r06rq] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.diagram-state-stranded[b-knz04r06rq] {
    border-color: var(--bz-danger-border);
    background: var(--bz-danger-soft);
}

.diagram-tag[b-knz04r06rq] {
    flex: 0 0 auto;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
}

.diagram-tag-start[b-knz04r06rq] {
    background: var(--bz-accent-soft);
    color: var(--bz-accent);
}

.diagram-tag-end[b-knz04r06rq] {
    background: var(--bz-surface-deep);
    color: var(--bz-text-muted);
}

/* The same brown that means "the other organisation" everywhere else in the product. */
.diagram-tag-outside[b-knz04r06rq] {
    background: var(--bz-emphasis-soft);
    color: var(--bz-emphasis);
}

.diagram-tag-stranded[b-knz04r06rq] {
    background: var(--bz-danger);
    color: var(--bz-danger-soft);
}

/* A bracket: down the margin, turning in at both ends. Positioned entirely from its row indices,
   which is what the fixed row height buys. */
.diagram-edge[b-knz04r06rq] {
    position: absolute;
    top: calc(var(--row) * var(--edge-top) + var(--row) / 2);
    height: calc(var(--row) * var(--edge-span));
    width: calc(var(--lane) * (var(--edge-lane) + 1));
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.diagram-gutter-forward .diagram-edge[b-knz04r06rq] {
    left: 0;
    border-right: 2px solid currentColor;
    border-top-right-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
    color: var(--bz-accent);
}

.diagram-gutter-back .diagram-edge[b-knz04r06rq] {
    right: 0;
    border-left: 2px solid currentColor;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
    color: var(--bz-emphasis);
}

/* How a move that is not an ordinary move is drawn.

   Dashed for an approval, rather than a fourth colour: an approval is a move with a condition on
   it, not a different kind of move, and this palette has already refused four candidate hues.
   Dotted for a timed rule, on the same argument and for the opposite condition — an approval waits
   for a person, a timer waits for nobody. Two broken lines rather than two more hues because both
   are still moves, and what the reader needs at a glance is that neither is somebody pressing a
   button.

   **Both written against the gutter, and that is load-bearing.** The two rules above give every
   edge `border-right`/`border-left: 2px solid`, through a selector carrying two classes to these
   one — so `.diagram-edge-approval` on its own lost the cascade and the dash has never once
   rendered since this component shipped. The dotted line inherited the same bug the day it was
   written, which is how the old one came to light.

   The doubled class takes these to four where the gutter rules are three, so they win outright
   rather than on source order. A tie would be correct today and broken by whoever next moves a
   block. Same failure, same remedy, as .fact-axis-ink in app.css.

   There is no test for this. bUnit renders markup with no stylesheet, so it can prove the class is
   on the element — and those tests exist and passed throughout — but never that it won. */
.diagram-gutter .diagram-edge.diagram-edge-approval[b-knz04r06rq] {
    border-style: dashed;
}

.diagram-gutter .diagram-edge.diagram-edge-timed[b-knz04r06rq] {
    border-style: dotted;
}

/* Which end is the head. Without it a bracket says two states are connected but not which way the
   work travels, and on the backward margin that is the entire point. */
.diagram-arrow[b-knz04r06rq] {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.diagram-gutter-forward .diagram-arrow-down[b-knz04r06rq] {
    bottom: -5px;
    left: -4px;
    border-top: 6px solid currentColor;
}

.diagram-gutter-back .diagram-arrow-up[b-knz04r06rq] {
    top: -5px;
    right: -4px;
    border-bottom: 6px solid currentColor;
}

.diagram-longhand[b-knz04r06rq] {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--bz-text-muted);
}

.diagram-longhand summary[b-knz04r06rq] {
    cursor: pointer;
}

.diagram-longhand ul[b-knz04r06rq] {
    margin-top: 0.75rem;
}

/* Said out loud rather than drawn badly. See MaxLanes. */
.diagram-too-tangled[b-knz04r06rq] {
    padding: 0.6rem 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid var(--bz-emphasis-border);
    border-radius: 0.4rem;
    background: var(--bz-emphasis-soft);
    color: var(--bz-emphasis);
    font-size: 0.85rem;
}

/* No margins to size when nothing is drawn in them. */
.diagram-grid-plain[b-knz04r06rq] {
    grid-template-columns: 0 minmax(0, 1fr) 0;
}

.diagram-toggle[b-knz04r06rq] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    cursor: pointer;
    user-select: none;
}
/* /Components/Shared/WorkflowSchematic.razor.rz.scp.css */
/* Every colour is a token from app.css. Olive for the team handling the work, the warm emphasis
   brown for the other side — the same pair the step list already uses, so the diagram reads as
   that list drawn rather than as a second visual language. */

.schematic[b-wrd3opja5o] {
    margin: 2rem 0 0;
}

.schematic-key[b-wrd3opja5o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    font-size: 0.8rem;
    color: var(--bz-text-muted);
}

.schematic-swatch[b-wrd3opja5o] {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.2rem;
    display: inline-block;
}

/* Solid, and matched to the numbered disc on each node rather than to the node body. The body is
   a pale tint with a thin border, which at swatch size stops reading as a colour key and starts
   reading as an empty checkbox.

   Not the swatch on its own either: every node is also labelled with who acts, so colour is never
   the only thing carrying the difference. */
.schematic-swatch-inside[b-wrd3opja5o] {
    background: var(--bz-accent);
}

.schematic-swatch-outside[b-wrd3opja5o] {
    background: var(--bz-emphasis);
    margin-left: 1rem;
}

.schematic-track[b-wrd3opja5o] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.schematic-node[b-wrd3opja5o] {
    /* Grows to share the row but never past a readable measure, so a step that wraps onto a
       second line sits at its own width instead of stretching across the whole diagram. */
    flex: 1 1 7rem;
    min-width: 7rem;
    max-width: 13rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.95rem 0.75rem 0.8rem;
    border-radius: 0.6rem;
    border: 1px solid var(--bz-accent);
    background: var(--bz-surface);
    /* Lifted off the page rather than outlined harder. A flat row of boxes reads as a table; a
       row with a little depth reads as a sequence of things. */
    box-shadow: 0 1px 2px rgba(38, 36, 31, 0.06), 0 6px 14px -8px rgba(38, 36, 31, 0.18);
}

.schematic-node-outside[b-wrd3opja5o] {
    border-color: var(--bz-emphasis-border);
    background: var(--bz-emphasis-soft);
}

.schematic-index[b-wrd3opja5o] {
    position: absolute;
    top: -0.6rem;
    left: 0.85rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--bz-accent);
    color: var(--bz-accent-contrast);
}

.schematic-node-outside .schematic-index[b-wrd3opja5o] {
    background: var(--bz-emphasis);
    color: var(--bz-emphasis-contrast);
}

.schematic-who[b-wrd3opja5o] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--bz-accent);
}

.schematic-node-outside .schematic-who[b-wrd3opja5o] {
    color: var(--bz-emphasis);
}

.schematic-title[b-wrd3opja5o] {
    font-weight: 600;
    line-height: 1.25;
    color: var(--bz-heading);
    text-wrap: balance;
}

.schematic-link[b-wrd3opja5o] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    color: var(--bz-border);
    min-width: 1.4rem;
}

.schematic-arrow[b-wrd3opja5o] {
    width: 1.5rem;
    height: 0.75rem;
}

/* The point of the whole picture. A hand-over is where the work leaves one organisation for
   another, which is the thing this product does that a form does not — so it is the one connector
   that says anything. */
.schematic-handover[b-wrd3opja5o] {
    color: var(--bz-emphasis);
}

.schematic-count[b-wrd3opja5o] {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    color: var(--bz-text-muted);
}

/* Below this the boxes would be too narrow to hold a title in fewer than four lines, and the
   ordered list underneath says the same thing properly. Hidden rather than shrunk: a diagram
   nobody can read is worse than no diagram, and nothing is lost because none of it is content. */
@media (max-width: 40rem) {
    .schematic[b-wrd3opja5o] {
        display: none;
    }
}