/* /Components/AppIcon.razor.rz.scp.css */
/* Size only. Colour comes from currentColor inside the markup, and the paths are a
   mix of stroked and filled - setting either here would break half the set. */
.app-icon[b-x9g40x7cbb] {
    width: 1.25rem;
    height: 1.25rem;
    /* Stops an icon being squashed when it sits in a flex row beside text. */
    flex: none;
}
/* /Components/AppLogo.razor.rz.scp.css */
/* The sidebar's size; a page that wants it larger sets width and height through ::deep. flex-shrink
   is off because a mark that squashes is worse than a name that truncates. */
.app-logo[b-e7jnja6779] {
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
}

/* A tile in the colour of text, and the figure in the colour of text set on it - so the mark inverts
   with the theme and stays the strongest thing on the page in both. */
.app-logo__tile[b-e7jnja6779] {
    fill: var(--color-text);
}

.app-logo__mark[b-e7jnja6779] {
    fill: var(--color-text-inverse);
}
/* /Components/ChoiceCard.razor.rz.scp.css */
/* The card is the label: everything on it chooses it. A label is medium weight
   and keeps a margin under it in base.css, so both are put back to what a card
   needs. Full height, so that cards side by side in a grid end level whatever
   their descriptions say. */
.choice-card[b-qonvqoq3d7] {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    height: 100%;
    margin: 0;
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container);
    font-weight: var(--font-weight-regular);
    cursor: pointer;
    transition:
        border-color var(--motion-duration-fast) var(--motion-easing-standard),
        box-shadow var(--motion-duration-fast) var(--motion-easing-standard);
}

/* Hover is the foundation's translucent layer, as on a button, so it works over
   the chosen card's own tint as well. */
.choice-card:hover:not(.choice-card--disabled)[b-qonvqoq3d7] {
    background-image: linear-gradient(var(--color-state-hover), var(--color-state-hover));
    border-color: var(--color-border-outline);
}

/* THE CHOSEN CARD IS TOLD BY ITS EDGE AND ITS MARK, NOT BY ITS FILL ALONE.
   -----------------------------------------------------------------------------
   The selected tint is translucent and pale; on its own it would be a shade
   apart from its neighbours. The edge doubles, in the accent colour, with an
   inset shadow rather than a thicker border so that nothing on the card moves
   when it is chosen. */
.choice-card--checked[b-qonvqoq3d7],
.choice-card--checked:hover:not(.choice-card--disabled)[b-qonvqoq3d7] {
    border-color: var(--color-accent);
    background-image: linear-gradient(var(--color-state-selected), var(--color-state-selected));
    box-shadow: inset 0 0 0 var(--border-width) var(--color-accent);
}

/* The radio is hidden, so the ring its focus would draw is drawn on the card. */
.choice-card:has(.choice-card__input:focus-visible)[b-qonvqoq3d7] {
    box-shadow: var(--shadow-focus);
}

.choice-card--checked:has(.choice-card__input:focus-visible)[b-qonvqoq3d7] {
    box-shadow: var(--shadow-focus), inset 0 0 0 var(--border-width) var(--color-accent);
}

.choice-card--disabled[b-qonvqoq3d7] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* The mark sits on an inset tile, in the accent colour, so a row of cards reads
   as a row of things before a word of it is read. */
.choice-card__icon[b-qonvqoq3d7] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-md);
    background-color: var(--color-surface-inset);
    color: var(--color-accent);
}

/* ::deep because AppIcon renders the <svg> itself, and CSS isolation never stamps
   this file's scope attribute onto another component's markup. The tile is in
   this file's markup, so it keeps the attribute and the selector matches. */
.choice-card__icon[b-qonvqoq3d7]  .choice-card__glyph {
    width: 1.5rem;
    height: 1.5rem;
}

.choice-card__text[b-qonvqoq3d7] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.choice-card__heading[b-qonvqoq3d7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    align-items: baseline;
}

.choice-card__title[b-qonvqoq3d7] {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.choice-card__tag[b-qonvqoq3d7] {
    padding: 0 var(--space-2);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

/* Each part of the detail on a line of its own. */
.choice-card__detail[b-qonvqoq3d7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--color-text-secondary);
}

/* An empty ring until the card is chosen, and a filled one with a tick after:
   the radio button the card stands for, where the eye expects it. The fill is
   the primary colour with its own text colour on it; the ring around it is the
   accent, because the pale fill alone is too faint an edge against a card. */
.choice-card__mark[b-qonvqoq3d7] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-full);
}

.choice-card--checked .choice-card__mark[b-qonvqoq3d7] {
    border-color: var(--color-accent);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.choice-card__mark[b-qonvqoq3d7]  .choice-card__tick {
    width: 1rem;
    height: 1rem;
}
/* /Components/FilterBar.razor.rz.scp.css */
/* The whole control surface of a list, read as one thing rather than as loose controls above a
   table: the same bordered container SiteM's report filters sit in. */
.filter-bar[b-xczjampb21] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container);
    container-type: inline-size;
}

/* The search and the segments: side by side where there is room, wrapping where not. Bottoms
   aligned, so a search box and a row of segments under labels of different heights still line up. */
.filter-bar__primary[b-xczjampb21] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
}

/* A CONTROL, NOT A FOOTNOTE. Bordered and button-shaped on the input surface, with an icon that
   turns, so it reads as something to press - SiteM drew it as a bare link once, and people did not
   find it. It takes the touch-target floor every other tapped control takes. */
.filter-bar__toggle[b-xczjampb21] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    min-height: var(--layout-touch-target-min);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-input);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.filter-bar__toggle:hover[b-xczjampb21],
.filter-bar__toggle[aria-expanded="true"][b-xczjampb21] {
    border-color: var(--color-primary);
}

.filter-bar__toggle:focus-visible[b-xczjampb21] {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: 2px;
}

.filter-bar__toggle-icon[b-xczjampb21] {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
}

/* How many filters are on behind the button: a number rather than a dot, because "3" says how much
   of what is listed is not the whole and a dot only says "some". */
.filter-bar__count[b-xczjampb21] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.filter-bar__panel[b-xczjampb21] {
    display: grid;
    gap: var(--space-5);
    align-items: start;
    padding: var(--space-4);
    margin-top: var(--space-2);
    border: var(--border-width) solid var(--color-border-muted);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-inset);
}

@container (min-width: 44rem) {
    .filter-bar__panel[b-xczjampb21] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-6);
    }
}

/* Always visible when anything narrows the list, whether or not the panel is open. */
.filter-bar__active[b-xczjampb21] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--color-border-muted);
}

.filter-bar__active-label[b-xczjampb21] {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.filter-bar__remove[b-xczjampb21] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.filter-bar__remove:hover[b-xczjampb21] {
    border-color: var(--color-danger);
    color: var(--color-danger-text);
}

.filter-bar__remove:focus-visible[b-xczjampb21] {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: 2px;
}

.filter-bar__clear[b-xczjampb21] {
    margin-inline-start: auto;
}

@media (max-width: 48rem) {
    .filter-bar[b-xczjampb21] {
        padding: var(--space-4);
    }
}
/* /Components/FilterChip.razor.rz.scp.css */
/* On or off, said with a border and a fill rather than with colour alone: the same choice has to be
   readable to somebody who cannot tell the two greens apart. */
.filter-chip[b-12nezu6a04] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.filter-chip:hover[b-12nezu6a04] {
    border-color: var(--color-primary);
    color: var(--color-text);
}

.filter-chip--on[b-12nezu6a04] {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: var(--font-weight-medium);
}

.filter-chip:focus-visible[b-12nezu6a04] {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* How many rows the choice holds: quieter than its name, and in figures that line up. */
.filter-chip__count[b-12nezu6a04] {
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}
/* /Components/FilterGroup.razor.rz.scp.css */
.filter-group[b-bsxg0s5woc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.filter-group > legend[b-bsxg0s5woc] {
    padding: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.filter-group__chips[b-bsxg0s5woc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.filter-group__find[b-bsxg0s5woc] {
    max-width: 20rem;
}

.filter-group__more[b-bsxg0s5woc] {
    font-size: var(--font-size-sm);
}
/* /Components/FormField.razor.rz.scp.css */
/* A field is a vertical stack: label, hint, control, message. Spacing lives here
   rather than as margins on inputs, so every form in the application lines up
   without each one restating it. */
.field[b-luurp2np11] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

/* base.css already gives <label> a bottom margin for standalone use; inside this
   stack the gap owns the spacing. */
.field label[b-luurp2np11] {
    margin-bottom: 0;
}

.field__required[b-luurp2np11] {
    margin-left: var(--space-1);
    color: var(--color-danger-text);
}

.field__hint[b-luurp2np11] {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ::deep: the control is the caller's markup and never carries this file's scope
   attribute (see NavMenu.razor.css). Inputs are full-width inside a field, which is
   the only sane default at phone width. */
.field[b-luurp2np11]  input,
.field[b-luurp2np11]  select,
.field[b-luurp2np11]  textarea {
    width: 100%;
}

.field[b-luurp2np11]  input[type="checkbox"],
.field[b-luurp2np11]  input[type="radio"] {
    width: auto;
}
/* /Components/InlineConfirm.razor.rz.scp.css */
.inline-confirm[b-1pyxtep49m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container);
}

.inline-confirm--danger[b-1pyxtep49m] {
    border-color: var(--color-danger);
    background-color: var(--color-danger-subtle);
}

.inline-confirm__message[b-1pyxtep49m] {
    /* Long enough to say what will happen, short enough to stay readable. */
    max-width: 42rem;
    min-width: min(18rem, 100%);
    flex: 1 1 20rem;
}

/* ::deep - the message is the caller's markup, which does not carry this file's
   scope attribute (see NavMenu.razor.css). */
.inline-confirm__message[b-1pyxtep49m]  p:last-child {
    margin-bottom: 0;
}

.inline-confirm__actions[b-1pyxtep49m] {
    flex: 0 0 auto;
}
/* /Components/InlinePanel.razor.rz.scp.css */
.inline-panel[b-mxd3tg286d] {
    padding: var(--space-5);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container);
    box-shadow: var(--shadow-container);
}

/* The panel is focused when it opens; that is orientation, not an error, so it
   should not also draw the keyboard focus ring around the whole box. */
.inline-panel:focus[b-mxd3tg286d] {
    outline: none;
    box-shadow: var(--shadow-container);
}

.inline-panel__header[b-mxd3tg286d] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.inline-panel__title[b-mxd3tg286d] {
    margin: 0;
    font-size: var(--font-size-lg);
}

.inline-panel__close[b-mxd3tg286d] {
    width: var(--layout-touch-target-min);
    min-width: var(--layout-touch-target-min);
    padding: 0;
    /* Pulled into the panel's own padding so the icon lines up with the edge of the
       text rather than sitting a whole gap short of it. */
    margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0;
}

.inline-panel__description[b-mxd3tg286d] {
    margin: var(--space-2) 0 0;
    max-width: 46rem;
    color: var(--color-text-secondary);
}

.inline-panel__body[b-mxd3tg286d] {
    margin-top: var(--space-4);
}

@media (max-width: 48rem) {
    .inline-panel[b-mxd3tg286d] {
        padding: var(--space-4);
    }
}
/* /Components/LoadingIndicator.razor.rz.scp.css */
.loading[b-amb632px1x] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) 0;
    color: var(--color-text-muted);
}

.loading__spinner[b-amb632px1x] {
    width: var(--space-5);
    height: var(--space-5);
    border: 2px solid var(--color-border-strong);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: loading-spin-b-amb632px1x 900ms linear infinite;
}

@keyframes loading-spin-b-amb632px1x {
    to { transform: rotate(360deg); }
}
/* /Components/Notice.razor.rz.scp.css */
/* Colour comes from the status token trio: the -subtle background carries the
   -text tone, which is the pairing measured to clear AA in both themes. Never the
   fill token (--color-danger and friends) for text. */
.notice[b-e64ove635m] {
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-inset);
    color: var(--color-text);
}

.notice--info[b-e64ove635m] {
    background-color: var(--color-info-subtle);
    border-color: var(--color-info);
}

.notice--success[b-e64ove635m] {
    background-color: var(--color-success-subtle);
    border-color: var(--color-success);
}

.notice--warning[b-e64ove635m] {
    background-color: var(--color-warning-subtle);
    border-color: var(--color-warning);
}

.notice--danger[b-e64ove635m] {
    background-color: var(--color-danger-subtle);
    border-color: var(--color-danger);
}

.notice__title[b-e64ove635m] {
    margin: 0 0 var(--space-1);
    font-weight: var(--font-weight-semibold);
}

.notice__body[b-e64ove635m] {
    max-width: 46rem;
}

/* ::deep because the body is the caller's markup, which never carries this file's
   scope attribute - see the explanation at the top of NavMenu.razor.css. Without
   it the trailing margin on the last paragraph would leave a gap inside the box. */
.notice__body[b-e64ove635m]  p:last-child {
    margin-bottom: 0;
}

.notice__body[b-e64ove635m]  ul {
    margin: 0;
    padding-left: var(--space-5);
}

.notice__actions[b-e64ove635m] {
    margin-top: var(--space-3);
}
/* /Components/PageHeader.razor.rz.scp.css */
.page-header[b-650vl9eh2g] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: var(--border-width) solid var(--color-border);
}

/* The words give way to the actions, not the other way round: from a modest basis they take what
   the actions leave, so the actions stay at the top right however long the subtitle is. Only where
   there is no room for both - on a phone - do the actions wrap under them. */
.page-header__text[b-650vl9eh2g] {
    flex: 1 1 20rem;
    min-width: 0;
}

.page-header__subtitle[b-650vl9eh2g] {
    margin: 0;
    color: var(--color-text-muted);
}

/* A row of its own, the whole width of the header. */
.page-header__details[b-650vl9eh2g] {
    flex: 1 1 100%;
    min-width: 0;
}

.page-header__actions[b-650vl9eh2g] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
/* /Components/Pager.razor.rz.scp.css */
.pager[b-qetryeca03] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.pager__summary[b-qetryeca03] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.pager__position[b-qetryeca03] {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
/* /Components/RecordTable.razor.rz.scp.css */
/* The table pattern itself is the design foundation's (.data-table); this file adds only what a
   list of records needs around it. */

.record-table[b-ada5tbi193] {
    min-width: 0;
}

/* Fetching the next page or the next search dims the rows instead of taking them away, so the list
   keeps its place while the answer is on its way. */
.record-table table[aria-busy="true"][b-ada5tbi193] {
    opacity: 0.6;
    transition: opacity var(--motion-duration-base) var(--motion-easing-standard);
}

/* What is open under a row belongs to that row, so it stands on the inset surface rather than
   reading as one more record. */
.record-table__detail > td[b-ada5tbi193] {
    padding: var(--space-2) var(--space-3) var(--space-4);
    background-color: var(--color-surface-inset);
}

@media (max-width: 48rem) {
    /* Below the breakpoint every row is a card of its own, which would make an open panel look like
       a second, unrelated record. These rules join the two cards into one: the panel is pulled up
       against the row above it and loses its top edge, and the row above loses its bottom corners. */
    .record-table__detail[b-ada5tbi193] {
        margin-top: calc(var(--space-4) * -1);
        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .data-table tr:has(+ .record-table__detail)[b-ada5tbi193] {
        margin-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .record-table__detail > td[b-ada5tbi193] {
        padding: var(--space-2) 0 var(--space-3);
        border-bottom: 0;
        background-color: transparent;
    }
}
/* /Components/SearchBox.razor.rz.scp.css */
.search-box[b-eu2bj93qx4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    /* Wide enough for a full name, and allowed to shrink on a phone. */
    flex: 1 1 min(22rem, 100%);

    /* FLEX-BASIS IS A WIDTH IN A ROW AND A HEIGHT IN A COLUMN, and this control is used in both.
       In a filter strip it sits in a horizontal .cluster, where the 22rem above is the intended
       width. Inside the place picker's panel it does not: that panel is flex-direction: column, so
       the same declaration asked for twenty-two rems of HEIGHT and put a screenful of nothing
       between the search box and the list of places underneath it.

       max-width cannot clamp that; it is the cross axis there. max-content on the main axis can, and
       it is inert in a row, where the main size is already decided by the basis above. The exact
       same fix, for the exact same reason, is written out in SegmentedChoice.razor.css. */
    max-height: max-content;
}

.search-box label[b-eu2bj93qx4] {
    margin-bottom: 0;
}

.search-box__hint[b-eu2bj93qx4] {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.search-box__control[b-eu2bj93qx4] {
    position: relative;
    display: flex;
    align-items: center;
}

/* The icon sits inside the field, so padding on the input reserves room for it
   rather than the icon overlapping typed text.

   ::deep because AppIcon renders the <svg> itself, and CSS isolation never stamps
   this file's scope attribute onto another component's markup - see the note at the
   top of NavMenu.razor.css. .search-box__control IS in this file's markup, so it
   keeps the attribute and the descendant selector matches. */
.search-box__control[b-eu2bj93qx4]  .search-box__icon {
    position: absolute;
    left: var(--space-3);
    color: var(--color-text-muted);
    pointer-events: none;
}

.search-box__input[b-eu2bj93qx4] {
    width: 100%;
    padding-left: calc(var(--space-3) + 1.25rem + var(--space-2));
    padding-right: var(--layout-touch-target-min);
}

/* Safari draws its own clear affordance on type="search" and it is neither
   themeable nor big enough to hit with a glove. Ours replaces it. */
.search-box__input[b-eu2bj93qx4]::-webkit-search-decoration,
.search-box__input[b-eu2bj93qx4]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.search-box__clear[b-eu2bj93qx4] {
    position: absolute;
    right: 0;
    width: var(--layout-touch-target-min);
    min-width: var(--layout-touch-target-min);
    padding: 0;
}
/* /Components/SegmentedChoice.razor.rz.scp.css */
.segmented-choice[b-qh3cqoh4py] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);

    /* Grows to fill the row it is in, because the grid below needs a definite width
       before it can decide how many columns fit - left to size itself to its own
       content it would never wrap, and four labels would run off a phone.

       The cap is by option count rather than a fixed value: eleven rem a choice is
       comfortable for the longest label any of these carry, and it stops a
       two-option control stretching as wide as a four-option one. */
    flex: 1 1 18rem;
    min-width: 0;
    max-width: calc(var(--segment-count, 4) * 11rem);

    /* FLEX-BASIS IS A WIDTH IN A ROW AND A HEIGHT IN A COLUMN, and this control is
       used in both. Seven of its call sites sit in a horizontal .cluster, where the
       18rem above is the intended width. Inside a FormField it does not: .field is
       flex-direction: column, so the same declaration asked for eighteen rems of
       HEIGHT and the cost-type picker stood 288px tall around a 148px button grid -
       read as a large empty gap under the labels on the daily report form.

       max-width cannot clamp that; it is the cross axis there. max-content on the
       main axis can, and it is inert in a row, where the main size is already
       decided by flex-basis and the cap above. */
    max-height: max-content;
}

.segmented-choice__label[b-qh3cqoh4py] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

/* EQUAL COLUMNS, AND EVERY LABEL ON ONE LINE.
   -----------------------------------------------------------------------------
   This was a flex row of buttons sized to their own text, joined by shared
   borders. It read badly the moment the labels differed in length: "All" and
   "Approved" sat on one line while "Not submitted" and "Sent back" wrapped to
   two, so four controls that do the same job looked like four different sizes.

   A grid of equal columns fixes both halves of that. auto-fit with a floor of
   8rem means four options sit in one row wherever there is room and fall to two
   rows of two on a phone - every cell the same width, every label on one line,
   and all four still visible. Wrapping into a tidy 2x2 is the point: the reader
   liked having the choices in front of them, so hiding two behind a scroll would
   have solved the wrong problem.

   The joined look went with it, deliberately. Shared borders cannot survive a
   wrap - the seam between two cells is the first cell's right edge, and CSS has
   no way to ask "is this the first in its row". Separated pills with one gap
   read as one control anyway, because the shared label above them says so. */
.segmented-choice__options[b-qh3cqoh4py] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
    gap: var(--space-2);
}

/* Stays the inline-flex base.css gives every button, so the label keeps its
   centring and its minimum touch height. Only the width behaviour changes. */
.segmented-choice__option[b-qh3cqoh4py] {
    /* Zero minimum, or a long label widens its own column and breaks the equal
       split the whole arrangement depends on. */
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-container);
    color: var(--color-text-secondary);
}

/* WRAPS RATHER THAN TRIMS, WHICH IS THE OPPOSITE OF WHAT THIS SAID.
   -----------------------------------------------------------------------------
   It used to trim to an ellipsis, on the argument that a ragged column of one-
   and two-line buttons was exactly what the grid replaced. The argument outlived
   the layout it was written for. When these were a flex row, a wrapped label
   made its own button taller than its neighbours and the row really did go
   ragged. They are grid cells now, and cells in a row stretch to the tallest of
   them - so a wrapped label costs the row a line and leaves it level.

   What the trim cost was the labels themselves: "Contractor c...", "Support
   sub-..." and "Commissioni..." all reached the reader cut off, in a picker
   whose entire job is to be read at a glance. A title attribute is no answer on
   a phone, which is the device this form is built for and which has no hover.

   balance keeps a two-line label from breaking as eight words and one; the
   fallback for browsers without it is the ordinary break, which is what this
   did before. */
.segmented-choice__text[b-qh3cqoh4py] {
    min-width: 0;
    text-wrap: balance;

    /* A label with no space in it - a single long word - still has to yield
       rather than push its cell wider and break the equal split. */
    overflow-wrap: anywhere;
}

.segmented-choice__option--selected[b-qh3cqoh4py] {
    /* Filled rather than tinted. With the cells separated, a background a shade
       different from its neighbour is not enough to carry "this is the one" - the
       border and the weight have to agree with it. */
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: var(--font-weight-semibold);
}

/* base.css layers hover and press over whatever fill a button already has, so the
   selected cell needs no hover rule of its own - it darkens like every other. */
/* /Components/StatusBadge.razor.rz.scp.css */
.status-badge[b-oy24t2jf10] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    /* Never wraps mid-word into two lines of one letter. */
    white-space: nowrap;
}

/* The -subtle background with the -text tone is the pairing measured to clear AA
   in both themes; the bare fill token would not. */
.status-badge--info[b-oy24t2jf10] {
    background-color: var(--color-info-subtle);
    border-color: var(--color-info);
    color: var(--color-info-text);
}

.status-badge--success[b-oy24t2jf10] {
    background-color: var(--color-success-subtle);
    border-color: var(--color-success);
    color: var(--color-success-text);
}

.status-badge--warning[b-oy24t2jf10] {
    background-color: var(--color-warning-subtle);
    border-color: var(--color-warning);
    color: var(--color-warning-text);
}

.status-badge--danger[b-oy24t2jf10] {
    background-color: var(--color-danger-subtle);
    border-color: var(--color-danger);
    color: var(--color-danger-text);
}
/* /Components/StepTrail.razor.rz.scp.css */
/* The steps in a row, joined by a rule, wrapping onto a second line where the
   screen is too narrow for them - never scrolling sideways. */
.step-trail__list[b-ep1lkhnril] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.step-trail__step[b-ep1lkhnril] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* The rule from one step to the next. Drawn after every step but the last. */
.step-trail__step:not(:last-child)[b-ep1lkhnril]::after {
    content: "";
    width: 2.5rem;
    height: var(--border-width);
    background-color: var(--color-border-strong);
}

.step-trail__target[b-ep1lkhnril] {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    min-height: var(--layout-touch-target-min);
    color: var(--color-text-secondary);
}

/* A step that can be gone back to looks like the link it is. */
a.step-trail__target[b-ep1lkhnril] {
    color: var(--color-link);
    text-decoration: none;
}

a.step-trail__target .step-trail__label[b-ep1lkhnril] {
    text-decoration: underline;
}

a.step-trail__target:hover .step-trail__label[b-ep1lkhnril] {
    color: var(--color-link-hover);
}

.step-trail__step--current .step-trail__target[b-ep1lkhnril] {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

/* A ring with the step's number in it; filled for the step on screen, ticked for
   a step behind the reader. */
.step-trail__marker[b-ep1lkhnril] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.step-trail__step--current .step-trail__marker[b-ep1lkhnril] {
    border-color: var(--color-accent);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.step-trail__step--done .step-trail__marker[b-ep1lkhnril] {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ::deep because AppIcon renders the <svg> itself; the marker is this file's. */
.step-trail__marker[b-ep1lkhnril]  .step-trail__tick {
    width: 1rem;
    height: 1rem;
}

/* On a phone the rules would end lines as often as they join steps. */
@media (max-width: 30rem) {
    .step-trail__step:not(:last-child)[b-ep1lkhnril]::after {
        display: none;
    }
}
/* /Components/ThemeToggle.razor.rz.scp.css */
.theme-toggle[b-0xv2jx06d3] {
    /* Square, so the icon sits centred at the minimum touch target rather than in
       a wide pill that steals width from the account name beside it. */
    width: var(--layout-touch-target-min);
    min-width: var(--layout-touch-target-min);
    padding: 0;
    border-radius: var(--radius-full);
}

.theme-toggle__icon[b-0xv2jx06d3] {
    width: 1.25rem;
    height: 1.25rem;
    /* currentColor, so the icon inherits the button's hover and focus states
       instead of needing its own. */
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* /Components/TotalsSummary.razor.rz.scp.css */
/* The price build-up, one figure per component, in the order the rules produce them. */
.totals[b-enpp0omloz] {
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container);
}

/* With something beside the figures - a pie - it stands at the top right, the figures and what is
   said under them to its left. */
.totals--aside[b-enpp0omloz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "list   aside"
        "counts aside";
}

.totals__aside[b-enpp0omloz] {
    grid-area: aside;
    align-self: start;
    padding-left: var(--space-6);
}

/* Nothing to show beside the figures - another tab, a view with no pie - takes no room at all. */
.totals__aside:empty[b-enpp0omloz] {
    display: none;
}

.totals__list[b-enpp0omloz] {
    /* A wrapping row rather than a grid of equal columns: each figure takes the room its own digits
       need, so the largest of them - the last, set larger still - can never spill out of its place.
       Narrow enough a basis that two sit side by side on a phone. */
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-5);
    margin: 0;
    /* In the grid of a box with something beside its figures; nothing outside it. */
    grid-area: list;
}

.totals__item[b-enpp0omloz] {
    display: flex;
    flex: 1 1 8.5rem;
    flex-direction: column;
    gap: var(--space-1);
}

.totals__item dt[b-enpp0omloz] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* Left-aligned here, unlike a column of figures: each stands under its own name. */
.totals__item dd[b-enpp0omloz] {
    margin: 0;
    text-align: left;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}

/* The last component is what the build-up exists to produce. */
.totals__item--final dd[b-enpp0omloz] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

/* The margin's share of the price, under its amount: a figure of its own, read with the one above. */
.totals__item .totals__share[b-enpp0omloz] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
}

.totals__counts[b-enpp0omloz] {
    grid-area: counts;
    align-self: start;
    margin: var(--space-4) 0 0;
    color: var(--color-text-secondary);
}

/* On a phone what stands beside the figures goes under them. */
@media (max-width: 48rem) {
    .totals--aside[b-enpp0omloz] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "list"
            "counts"
            "aside";
    }

    .totals__aside[b-enpp0omloz] {
        padding-top: var(--space-4);
        padding-left: 0;
    }
}
/* /Features/Admin/Access/AccessGrantList.razor.rz.scp.css */
/* The list is a stack of blocks - what happened, the panel, the filters, the rows - so the spacing
   is the stack's. Only what the stack cannot say is here. */
.access-grants[b-hd7ykd54pi] {
    --stack-gap: var(--space-4);
}

/* The search and the choice of what to show share a row and wrap onto two on a phone, the search
   taking the room that is left. */
.access-grants__filters[b-hd7ykd54pi] {
    --cluster-gap: var(--space-4);
    align-items: flex-end;
}

.access-grants__name[b-hd7ykd54pi] {
    font-weight: var(--font-weight-medium);
}

.access-grants__muted[b-hd7ykd54pi] {
    color: var(--color-text-muted);
}

/* Two lines that are one statement: a start and an end, or who gave it and when. Side by side they
   would wrap into what reads as two unrelated values. */
.access-grants__lines[b-hd7ykd54pi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Who gave the access is the answer somebody is looking for; when is its context. */
.access-grants__secondary[b-hd7ykd54pi] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.access-grants__actions[b-hd7ykd54pi] {
    justify-content: flex-end;
}

/* A row's confirmation stands a little apart from the row above it, so it plainly belongs to that
   grant and not to the table. */
.access-grants__confirm[b-hd7ykd54pi] {
    --stack-gap: var(--space-3);
    padding-top: var(--space-2);
}

@media (max-width: 48rem) {
    /* Stacked and full width below the breakpoint: half a search box is not a search box. */
    .access-grants__filters[b-hd7ykd54pi] {
        align-items: stretch;
    }

    /* In a row that has become a card the actions are the last thing in it, and read from the
       leading edge like everything above them. */
    .access-grants__actions[b-hd7ykd54pi] {
        justify-content: flex-start;
    }
}
/* /Features/Admin/Access/AccessRequestList.razor.rz.scp.css */
.access-requests[b-vt5as185gt] {
    --stack-gap: var(--space-4);
}

/* Who is asking is what a row is about. */
.access-requests__person[b-vt5as185gt] {
    font-weight: var(--font-weight-medium);
}

.access-requests__muted[b-vt5as185gt] {
    color: var(--color-text-muted);
}

/* Several short lines that are one statement: the project and its number, or a decision with who
   made it, when, and what they wrote. */
.access-requests__lines[b-vt5as185gt] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

.access-requests__secondary[b-vt5as185gt] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.access-requests__actions[b-vt5as185gt] {
    --cluster-gap: var(--space-2);
    justify-content: flex-end;
}

@media (max-width: 48rem) {
    /* In a row that has become a card the actions are the last thing in it, and read from the
       leading edge like everything above them. */
    .access-requests__actions[b-vt5as185gt] {
        justify-content: flex-start;
    }
}
/* /Features/Admin/Access/DecideRequestPanel.razor.rz.scp.css */
/* The foundation gives a fieldset a bottom margin for standing alone; in the form's stack the gap
   owns the spacing. And a fieldset's own minimum width would stop the roles shrinking on a phone. */
.decide-request__roles[b-7uf8dipm2g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    min-width: 0;
}

.decide-request__note[b-7uf8dipm2g] {
    margin: 0;
    color: var(--color-text-secondary);
}
/* /Features/Admin/Access/GrantAccessPanel.razor.rz.scp.css */
/* Three questions, asked in order: who, what, for how long. Each is a fieldset, so the grouping is
   real to a screen reader and not only to the eye. */
.grant-access__group[b-200qg1yyfn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    /* The foundation gives a fieldset a bottom margin for standing alone; in the panel's stack the
       gap owns the spacing. And a fieldset's own minimum width stops its content shrinking, which
       would push the panel off the side of a phone. */
    margin: 0;
    min-width: 0;
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
}

.grant-access__group > legend[b-200qg1yyfn] {
    padding: 0 var(--space-2);
}

.grant-access__note[b-200qg1yyfn] {
    margin: 0;
    color: var(--color-text-secondary);
}

.grant-access__chosen-name[b-200qg1yyfn] {
    font-weight: var(--font-weight-semibold);
}

.grant-access__candidates[b-200qg1yyfn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The whole row is what is pressed, not a link inside it: a name and what is known about the
   person, read together and chosen together. */
.grant-access__candidate[b-200qg1yyfn] {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-1);
    text-align: left;
}

.grant-access__candidate-name[b-200qg1yyfn] {
    font-weight: var(--font-weight-medium);
}

.grant-access__candidate-detail[b-200qg1yyfn] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.grant-access__dates[b-200qg1yyfn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}
/* /Features/Admin/Access/RolePicker.razor.rz.scp.css */
.role-picker[b-ne41atkl9u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One card per role: the choice, and under it what the choice allows. */
.role-picker__role[b-ne41atkl9u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-container);
}

/* The border and the surface both say it, with the radio itself: the chosen one is never told
   apart by colour alone. */
.role-picker__role--chosen[b-ne41atkl9u] {
    border-color: var(--color-accent);
    background-color: var(--color-surface-inset);
}

.role-picker__choice[b-ne41atkl9u] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: 0;
    font-weight: var(--font-weight-regular);
    cursor: pointer;
}

/* Down onto the first line of the name rather than centred against the whole block, which would
   leave it floating beside the description. */
.role-picker__choice input[b-ne41atkl9u] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.role-picker__text[b-ne41atkl9u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.role-picker__name[b-ne41atkl9u] {
    font-weight: var(--font-weight-semibold);
}

.role-picker__description[b-ne41atkl9u] {
    color: var(--color-text-secondary);
}

/* Closed to begin with. The description says what the role is for; this is the detail for whoever
   wants to check it. Indented to stand under the text rather than under the radio. */
.role-picker__permissions[b-ne41atkl9u] {
    padding-left: calc(1.15rem + var(--space-3));
}

.role-picker__permissions > summary[b-ne41atkl9u] {
    display: flex;
    align-items: center;
    min-height: var(--layout-touch-target-min);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.role-picker__permissions > ul[b-ne41atkl9u] {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}
/* /Features/Admin/Pages/ApplicationAccessRequestPage.razor.rz.scp.css */
/* What the request says, as a short list of facts: the label above the value on a phone, beside it
   on anything wider. */
.request-facts[b-m6gpdf7abt] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0;
}

.request-facts dt[b-m6gpdf7abt] {
    color: var(--color-text-secondary);
}

.request-facts dd[b-m6gpdf7abt] {
    margin: 0;
}

@media (max-width: 30rem) {
    .request-facts[b-m6gpdf7abt] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .request-facts dd[b-m6gpdf7abt] {
        margin-bottom: var(--space-2);
    }
}
/* /Features/Admin/Pages/Audit.razor.rz.scp.css */
.audit[b-pbczb50ffb] {
    --stack-gap: var(--space-4);
}

/* One control to a line on a phone rather than three squeezed side by side: at that width none of
   them would be wide enough to read its own value. */
.audit__filters[b-pbczb50ffb] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
}

.audit__days[b-pbczb50ffb] {
    margin: 0;
    max-width: 46rem;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.audit__list[b-pbczb50ffb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Reading the next page dims the entries instead of taking them away, so the list keeps its place. */
.audit__list[aria-busy="true"][b-pbczb50ffb] {
    opacity: 0.6;
}

/* An edge coloured by kind, so a column of entries can be looked over by category. The kind is
   written in words on every entry as well - the colour is a second way of saying it, never the
   only one. */
.audit-entry[b-pbczb50ffb] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-left: var(--space-1) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-container);
}

/* Giving access and its ending are opposite acts, and telling them apart is what most readers come
   for: they get the two strongest signals. */
.audit-entry--access-granted[b-pbczb50ffb] {
    border-left-color: var(--color-success);
}

.audit-entry--access-ended[b-pbczb50ffb] {
    border-left-color: var(--color-danger);
}

.audit-entry--access-requested[b-pbczb50ffb],
.audit-entry--access-request-decided[b-pbczb50ffb] {
    border-left-color: var(--color-info);
}

.audit-entry--role-created[b-pbczb50ffb],
.audit-entry--role-changed[b-pbczb50ffb] {
    border-left-color: var(--color-warning);
}

.audit-entry__when[b-pbczb50ffb] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}

.audit-entry__what[b-pbczb50ffb] {
    min-width: 0;
}

.audit-entry__headline[b-pbczb50ffb] {
    margin: 0;
}

.audit-entry__kind[b-pbczb50ffb] {
    margin-right: var(--space-2);
    color: var(--color-text-secondary);
}

.audit-entry__detail[b-pbczb50ffb] {
    color: var(--color-text-secondary);
}

.audit-entry__by[b-pbczb50ffb] {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* Set apart: a gap in the record, not somebody called "nobody recorded". */
.audit-entry__unattributed[b-pbczb50ffb] {
    font-style: italic;
}

/* The moment beside what happened where there is room; above it on a phone, which is the base. */
@media (min-width: 48rem) {
    .audit-entry[b-pbczb50ffb] {
        grid-template-columns: 11rem 1fr;
        align-items: baseline;
    }
}
/* /Features/Admin/Pages/People.razor.rz.scp.css */
/* The screen is a stack of blocks - what happened, the panel, the filters, the rows - so the spacing
   is the stack's. Only what the stack cannot say is here. */
.people[b-nosqwhra03] {
    --stack-gap: var(--space-4);
}

/* The search and the choice of what to show share a row and wrap onto two on a phone, the search
   taking the room that is left. */
.people__filters[b-nosqwhra03] {
    --cluster-gap: var(--space-4);
    align-items: flex-end;
}

.people__name[b-nosqwhra03] {
    font-weight: var(--font-weight-medium);
}

.people__muted[b-nosqwhra03] {
    color: var(--color-text-muted);
}

/* Short lines that belong together: a name and what identifies the person, or the two contact
   details. */
.people__lines[b-nosqwhra03] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

/* One role to a line: a role and where it is held are read together, and a run of them in one
   sentence is not. */
.people__roles[b-nosqwhra03] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.people__many-roles > summary[b-nosqwhra03] {
    display: flex;
    align-items: center;
    min-height: var(--layout-touch-target-min);
    color: var(--color-accent);
    cursor: pointer;
}

.people__actions[b-nosqwhra03] {
    --cluster-gap: var(--space-2);
    justify-content: flex-end;
}

/* A row's confirmation stands a little apart from the row above it, so it plainly belongs to that
   person and not to the table. */
.people__confirm[b-nosqwhra03] {
    --stack-gap: var(--space-3);
    padding-top: var(--space-2);
}

@media (max-width: 48rem) {
    /* Stacked and full width below the breakpoint: half a search box is not a search box. */
    .people__filters[b-nosqwhra03] {
        align-items: stretch;
    }

    /* In a row that has become a card the actions are the last thing in it, and read from the
       leading edge like everything above them. */
    .people__actions[b-nosqwhra03] {
        justify-content: flex-start;
    }
}
/* /Features/Admin/Pages/ProjectAccess.razor.rz.scp.css */
/* Two lists under two headings. Each section is a column of its own, so the heading, the sentence
   under it and the list keep one rhythm. */
.project-access__section[b-urofki0q58] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.project-access__section h2[b-urofki0q58] {
    margin: 0;
    font-size: var(--font-size-lg);
}

.project-access__about[b-urofki0q58] {
    margin: 0;
    max-width: 46rem;
    color: var(--color-text-secondary);
}

/* A link beside a button: as tall as the button, so the two share a line and a touch target. */
.project-access__estimate[b-urofki0q58] {
    display: inline-flex;
    align-items: center;
    min-height: var(--layout-touch-target-min);
    padding: 0 var(--space-2);
}
/* /Features/Admin/Pages/RolesAndPermissions.razor.rz.scp.css */
.roles[b-eh2bv2us78] {
    --stack-gap: var(--space-4);
}

.roles__list[b-eh2bv2us78] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Reading the roles again dims them instead of taking them away, so the list keeps its place. */
.roles__list[aria-busy="true"][b-eh2bv2us78] {
    opacity: 0.6;
}

/* A role is a card rather than a row: what it carries is a list of its own, and the panel to change
   it opens inside it. */
.role[b-eh2bv2us78] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-5);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container);
}

/* A role that gives nothing steps back without going away: it has to be found to be activated
   again. The badge says so in words; the surface only agrees with it. */
.role--inactive[b-eh2bv2us78] {
    background-color: var(--color-surface-inset);
}

.role__header[b-eh2bv2us78] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.role__name[b-eh2bv2us78] {
    margin: 0;
    font-size: var(--font-size-lg);
}

/* The number that says what deactivating would cost. Beside the name rather than in the
   confirmation alone, so it is in view before anybody reaches for the button. */
.role__given[b-eh2bv2us78] {
    margin: 0 0 0 auto;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.role__description[b-eh2bv2us78] {
    margin: 0;
    max-width: 46rem;
    color: var(--color-text-secondary);
}

.role__nothing[b-eh2bv2us78] {
    margin: 0;
    color: var(--color-warning-text);
}

/* Chips rather than a sentence: a role with a dozen permissions can be looked over as chips and
   cannot be read as prose. Neutral, because a permission is a capability and not a status. */
.role__permissions[b-eh2bv2us78] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.role__permission[b-eh2bv2us78] {
    padding: var(--space-1) var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-full);
    background-color: var(--color-surface-inset);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* A permission that allows nothing on this role. The chip says so in words; the tone only agrees. */
.role__permission--inert[b-eh2bv2us78] {
    border-color: var(--color-warning);
    background-color: var(--color-warning-subtle);
    color: var(--color-warning-text);
}

.role__actions[b-eh2bv2us78] {
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--color-border);
}

@media (max-width: 48rem) {
    .role[b-eh2bv2us78] {
        padding: var(--space-4);
    }

    /* On a phone the count takes a line of its own, at the leading edge like everything else. */
    .role__given[b-eh2bv2us78] {
        margin-left: 0;
        flex-basis: 100%;
    }
}
/* /Features/Admin/Roles/RolePanel.razor.rz.scp.css */
/* What the role allows: set apart from the two boxes above it, because it is the other save. */
.role-permissions[b-j4r5ihew7l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--color-border);
}

.role-permissions__header[b-j4r5ihew7l] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.role-permissions__title[b-j4r5ihew7l] {
    margin: 0;
}

/* How many are ticked, in view without scrolling back through the list. */
.role-permissions__count[b-j4r5ihew7l] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* The foundation gives a fieldset a bottom margin for standing alone; here the column's gap owns
   the spacing. And a fieldset's own minimum width would stop the rows shrinking on a phone. */
.role-permissions__group[b-j4r5ihew7l] {
    margin: 0;
    min-width: 0;
}

.role-permissions__legend[b-j4r5ihew7l] {
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.role-permission[b-j4r5ihew7l] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: 0;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-regular);
    cursor: pointer;
}

.role-permission:hover[b-j4r5ihew7l] {
    background-image: linear-gradient(var(--color-state-hover), var(--color-state-hover));
}

/* Down onto the first line of the name rather than centred against the whole block, which would
   leave the box floating beside the description. */
.role-permission input[b-j4r5ihew7l] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.role-permission__text[b-j4r5ihew7l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.role-permission__name[b-j4r5ihew7l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-weight-medium);
}

.role-permission__description[b-j4r5ihew7l] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* The code itself, quietly: what is stored, and what somebody quotes when they ask about it. */
.role-permission__code[b-j4r5ihew7l] {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}
/* /Features/Configuration/Pages/Classifiers.razor.rz.scp.css */
.classifiers__muted[b-cao540hqp8] {
    color: var(--color-text-muted);
}

.classifiers__check[b-cao540hqp8] {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
}

/* Where a classifier's entries are kept: one link to each type or category, with how many it keeps. */
.classifiers__kept[b-cao540hqp8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
}
/* /Features/Configuration/Pages/Parameters.razor.rz.scp.css */
.parameters__muted[b-o80ga60j8r] {
    color: var(--color-text-muted);
}

/* The short values of a row - a code, what a parameter holds, whether it asks for a reason - keep to
   one line, so the description takes the width that is left instead of squeezing them onto two. A
   code broken at its hyphen reads as two codes. */
.parameters__whole[b-o80ga60j8r] {
    white-space: nowrap;
}

/* On a phone each row is a card with a narrow column for its values: there they wrap like any words. */
@media (max-width: 48rem) {
    .parameters__whole[b-o80ga60j8r] {
        white-space: normal;
    }
}

.parameters__lines[b-o80ga60j8r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.parameters__check[b-o80ga60j8r] {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
}
/* /Features/Configuration/Pages/ProfilePage.razor.rz.scp.css */
.profile-page__muted[b-rti534yl28] {
    color: var(--color-text-muted);
}

.profile-page__check[b-rti534yl28] {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
}

/* What the parts of a profile have in common: a name with its code under it, the muted words beside
   a figure, a box of JSON in a monospace face. The parts are this page's own, so the page styles them. */
.profile-page[b-rti534yl28]  .part__lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.profile-page[b-rti534yl28]  .part__muted {
    color: var(--color-text-muted);
}

.profile-page[b-rti534yl28]  .part__check {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    align-self: end;
}

.profile-page[b-rti534yl28]  .part__code {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
}

.profile-page[b-rti534yl28]  .profile-flag {
    align-items: flex-end;
}
/* /Features/Configuration/Pages/Profiles.razor.rz.scp.css */
.profiles__heading[b-875n69zkrd] {
    margin: 0;
    font-size: var(--font-size-lg);
}

.profiles__about[b-875n69zkrd] {
    margin: 0;
    color: var(--color-text-muted);
}

.profiles__muted[b-875n69zkrd] {
    color: var(--color-text-muted);
}

/* A name and what it is for, read together. */
.profiles__lines[b-875n69zkrd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
/* /Features/Configuration/PairsEditor.razor.rz.scp.css */
.pairs[b-8utbcntbha] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.pairs__hint[b-8utbcntbha] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* A key and its value side by side, and the button to take them away after them. On a phone the
   two inputs share the row and the button goes under them. */
.pairs__row[b-8utbcntbha] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.pairs__row > select[b-8utbcntbha],
.pairs__row > input[b-8utbcntbha] {
    flex: 1 1 10rem;
    min-width: 0;
}
/* /Features/Estimates/ChangeList.razor.rz.scp.css */
.change-list__operation[b-x9np5w7qo5],
.change-list__reason[b-x9np5w7qo5] {
    color: var(--color-text-secondary);
}

.change-list__reason[b-x9np5w7qo5] {
    display: block;
}
/* /Features/Estimates/CollisionChooser.razor.rz.scp.css */
.collision[b-th0ardth5w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    border-top: var(--border-width) solid var(--color-border-muted);
}

.collision__what[b-th0ardth5w] {
    margin: 0;
}

/* Three values side by side where there is room, stacked where there is not. */
.collision__values[b-th0ardth5w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: var(--space-3);
    margin: 0;
}

.collision__values dt[b-th0ardth5w] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.collision__values dd[b-th0ardth5w] {
    margin: 0;
    font-weight: var(--font-weight-medium);
}
/* /Features/Estimates/EstimateDetails.razor.rz.scp.css */
.details[b-u7yeylfi51] {
    --stack-gap: var(--space-3);
    padding-top: var(--space-3);
}

.details-form__fields[b-u7yeylfi51] {
    --grid-min: 14rem;
    --grid-gap: var(--space-4);
}

/* The commercial case and its dates side by side, one under the other where there is no room. */
.details__sections[b-u7yeylfi51] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: var(--space-3) var(--space-4);
}

.details__section[b-u7yeylfi51] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.details__section h2[b-u7yeylfi51] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* Each field a row: what it is, then its value with the reason given for it.
   The rows are divided by a rule, as a table's would be, but they stay a
   description list so a screen reader pairs each term with its value. */
.details__list[b-u7yeylfi51] {
    margin: 0;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-container);
    font-size: var(--font-size-sm);
}

.details__row[b-u7yeylfi51] {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
    padding: var(--space-1) var(--space-3);
}

.details__row + .details__row[b-u7yeylfi51] {
    border-top: var(--border-width) solid var(--color-border);
}

.details__row dt[b-u7yeylfi51] {
    color: var(--color-text-secondary);
}

.details__row dd[b-u7yeylfi51] {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.details__value[b-u7yeylfi51] {
    white-space: pre-line;
}

.details__none[b-u7yeylfi51],
.details__reason[b-u7yeylfi51],
.details__by[b-u7yeylfi51] {
    color: var(--color-text-secondary);
}

/* On a phone each row is its term above its value. */
@media (max-width: 48rem) {
    .details__row[b-u7yeylfi51] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Features/Estimates/HealthTab.razor.rz.scp.css */
.health__summary[b-sbbkyfcr5r],
.health__quiet[b-sbbkyfcr5r] {
    margin: 0;
    color: var(--color-text-secondary);
}

.check[b-sbbkyfcr5r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.check__name[b-sbbkyfcr5r] {
    margin: 0;
    font-size: var(--font-size-lg);
}

.finding[b-sbbkyfcr5r] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container);
}

.finding__header[b-sbbkyfcr5r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.finding__title[b-sbbkyfcr5r] {
    margin: 0;
    font-size: var(--font-size-base);
}

.finding__detail[b-sbbkyfcr5r],
.finding__worth[b-sbbkyfcr5r] {
    margin: 0;
}

.finding__where[b-sbbkyfcr5r] {
    color: var(--color-text-secondary);
}

.finding__lines summary[b-sbbkyfcr5r] {
    min-height: var(--layout-touch-target-min);
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--color-accent);
}

.finding__lines ul[b-sbbkyfcr5r] {
    margin: 0;
    padding-left: var(--space-5);
}

/* A proposed fix and what it would do, with the way to accept it beside the figures it is judged by. */
.proposal[b-sbbkyfcr5r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--color-border-muted);
}

.proposal__text[b-sbbkyfcr5r] {
    min-width: 0;
}

.proposal__title[b-sbbkyfcr5r] {
    margin: 0;
    font-weight: var(--font-weight-medium);
}

.proposal__effect[b-sbbkyfcr5r] {
    margin: 0;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}
/* /Features/Estimates/HistoryTab.razor.rz.scp.css */
.change-set[b-kkbnc3jeyh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container);
    min-width: 0;
}

.change-set__header[b-kkbnc3jeyh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.change-set__title[b-kkbnc3jeyh] {
    margin: 0;
    font-size: var(--font-size-base);
}

.change-set__who[b-kkbnc3jeyh],
.change-set__evidence[b-kkbnc3jeyh] {
    margin: 0;
    color: var(--color-text-secondary);
}

.change-set__reason[b-kkbnc3jeyh] {
    margin: 0;
}

.change-set__changes summary[b-kkbnc3jeyh] {
    min-height: var(--layout-touch-target-min);
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--color-accent);
}
/* /Features/Estimates/LineDetail.razor.rz.scp.css */
.line-detail__references[b-0lywac2b8u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: var(--space-3) var(--space-4);
    margin: 0;
}

.line-detail__references dt[b-0lywac2b8u] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.line-detail__references dd[b-0lywac2b8u] {
    margin: 0;
}

.line-detail__inherited[b-0lywac2b8u],
.line-detail__by[b-0lywac2b8u] {
    color: var(--color-text-secondary);
}

.line-detail__section[b-0lywac2b8u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.line-detail__section h4[b-0lywac2b8u] {
    margin: 0;
}

.line-detail__notes[b-0lywac2b8u] {
    margin: 0;
    padding-left: var(--space-5);
}

/* One component of the price: its name and its figure on the row that opens it. */
.explanation[b-0lywac2b8u] {
    border-top: var(--border-width) solid var(--color-border-muted);
}

.explanation summary[b-0lywac2b8u] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--layout-touch-target-min);
    align-items: center;
    cursor: pointer;
    font-weight: var(--font-weight-medium);
}

.explanation__exact[b-0lywac2b8u] {
    margin: 0 0 var(--space-2);
    color: var(--color-text-secondary);
    /* An exact value can be a long fraction; it wraps rather than widening the panel. */
    overflow-wrap: anywhere;
}

.explanation__step p[b-0lywac2b8u] {
    margin: 0;
    overflow-wrap: anywhere;
}

.explanation__step ul[b-0lywac2b8u] {
    margin: var(--space-1) 0 var(--space-3);
    padding-left: var(--space-5);
}

.explanation__reason[b-0lywac2b8u] {
    color: var(--color-text-secondary);
}
/* /Features/Estimates/LineForm.razor.rz.scp.css */
.line-form__amounts[b-960av43b2w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    gap: var(--space-4);
}

.line-form__references[b-960av43b2w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: var(--space-4);
}

/* A choice and the reason beside it read as one: the reason sits right under its choice. */
.line-form__reference[b-960av43b2w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

/* The item is searched for, and its results need a row of their own: it spans the grid. */
.line-form__reference--wide[b-960av43b2w] {
    grid-column: 1 / -1;
}

.line-form__item[b-960av43b2w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.line-form__item > legend[b-960av43b2w] {
    padding: 0;
    font-weight: var(--font-weight-medium);
}

.line-form__hint[b-960av43b2w] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* What follows from the department, said in a sentence with the way to depart from it beside it. */
.line-form__follows[b-960av43b2w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    color: var(--color-text-secondary);
}

/* The terms, folded: a toggle with what applies beside it, and the choices under it once open. */
.line-form__terms[b-960av43b2w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--color-border);
}

.line-form__terms > .line-form__references[b-960av43b2w] {
    flex-basis: 100%;
}

.line-form__terms-toggle[b-960av43b2w] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: var(--font-weight-medium);
}
/* /Features/Estimates/LinesTab.razor.rz.scp.css */
/* The search takes what the row has to spare, beside the segments where there is room. */
.lines-filters__search[b-lg3wfo22iu] {
    flex: 1 1 18rem;
    min-width: 0;
}

/* The ways to add, on their own row and to the right: actions, not filters. */
.lines-toolbar[b-lg3wfo22iu] {
    justify-content: flex-end;
}

/* A description is the widest thing in a row; it keeps a readable measure rather than being squeezed
   by the columns of figures beside it. */
.lines__description[b-lg3wfo22iu] {
    min-width: 16rem;
}

/* The description opens the line. Set as text, because that is what it is read as; the hover layer
   and the focus ring say it can be pressed. */
.lines__open[b-lg3wfo22iu] {
    justify-content: flex-start;
    padding: var(--space-1) 0;
    color: var(--color-text);
    text-align: left;
}

/* A line out of scope is still listed, and reads as set aside. */
.lines__row--excluded > td[b-lg3wfo22iu] {
    color: var(--color-text-muted);
}

.lines__row--excluded .lines__open[b-lg3wfo22iu] {
    color: var(--color-text-muted);
}

.lines__detail > td[b-lg3wfo22iu] {
    padding: var(--space-3) 0 var(--space-5);
    background-color: var(--color-surface-inset);
}

/* The open line's panel spans every column of the table, which is far wider than the screen. It is
   given the width of the scroll box instead - what is in view - and stays in view when the table
   is scrolled sideways, so its forms and figures are never half off screen. */
.lines__scroll[b-lg3wfo22iu] {
    container-type: inline-size;
}

.lines__detail-body[b-lg3wfo22iu] {
    position: sticky;
    left: 0;
    width: 100cqi;
}

.lines__total-label[b-lg3wfo22iu] {
    color: var(--color-text);
    font-size: var(--font-size-base);
    letter-spacing: var(--letter-spacing-base);
    text-transform: none;
}
/* /Features/Estimates/Pages/EstimatePage.razor.rz.scp.css */
/* A link among the page's actions: as tall as a button would be, so it is as easy to hit. */
.estimate-header__link[b-bau1na2fpi] {
    display: inline-flex;
    align-items: center;
    min-height: var(--layout-touch-target-min);
    padding: 0 var(--space-2);
}

/* What opens the details: the chevron close after the word, which says which way it goes. */
.estimate-header__toggle[b-bau1na2fpi] {
    gap: var(--space-1);
    padding-inline: var(--space-2);
}

/* What is shown, and whether it can be changed: its label beside the choice, the badge after it -
   one row at the header's top right, wrapping on a phone. */
.estimate-point[b-bau1na2fpi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.estimate-point label[b-bau1na2fpi] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.estimate-point select[b-bau1na2fpi] {
    min-width: 0;
}

/* Closer together than a page that is read down: the figures are what the estimate is opened for. */
.estimate[b-bau1na2fpi] {
    --stack-gap: var(--space-4);
}
/* /Features/Estimates/ParameterForm.razor.rz.scp.css */
.parameter-form__target[b-7afe0updm9],
.parameter-form__value[b-7afe0updm9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: var(--space-4);
}

.parameter-form__effect[b-7afe0updm9] {
    margin: 0;
    color: var(--color-text-secondary);
}
/* /Features/Estimates/ParametersTab.razor.rz.scp.css */
.parameters__none[b-lxs46c9bpb],
.parameters__by[b-lxs46c9bpb] {
    color: var(--color-text-secondary);
}

.parameters__form > td[b-lxs46c9bpb] {
    padding: var(--space-3) 0 var(--space-5);
    background-color: var(--color-surface-inset);
}
/* /Features/Estimates/ScopeParameters.razor.rz.scp.css */
.scope-parameters[b-oqin2ky3vn] {
    --stack-gap: var(--space-4);
}

/* Under the panel's own title: a part of it, not a panel of its own. */
.scope-parameters__heading[b-oqin2ky3vn] {
    margin: 0;
    font-size: var(--font-size-base);
}

.scope-parameters__muted[b-oqin2ky3vn] {
    margin: 0;
    color: var(--color-text-secondary);
}

/* A short list, read across: as wide as it needs, not the whole panel. */
.scope-parameters__table[b-oqin2ky3vn] {
    width: auto;
    min-width: min(40rem, 100%);
}

.scope-parameters__table td[b-oqin2ky3vn] {
    vertical-align: middle;
}

/* As small as the row it is in. */
.scope-parameters__table button[b-oqin2ky3vn] {
    min-height: 0;
    padding: var(--space-1) var(--space-2);
}

.scope-parameters__form > td[b-oqin2ky3vn] {
    padding: var(--space-3) var(--space-3) var(--space-4);
    background-color: var(--color-surface-inset);
}
/* /Features/Estimates/VersionsTab.razor.rz.scp.css */
.versions__section[b-q8u9l8nala] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.versions__section h2[b-q8u9l8nala] {
    margin: 0;
    font-size: var(--font-size-lg);
}

.versions__none[b-q8u9l8nala],
.versions__counts[b-q8u9l8nala] {
    margin: 0;
    color: var(--color-text-secondary);
}

.versions__description[b-q8u9l8nala] {
    display: block;
    color: var(--color-text-secondary);
}

/* The two points and the button, side by side where there is room. */
.versions__compare[b-q8u9l8nala] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
}

.versions__compare-choice[b-q8u9l8nala] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.versions__differences summary[b-q8u9l8nala] {
    min-height: var(--layout-touch-target-min);
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--color-accent);
}

/* A sentence that stands where an action would, saying why there is none. */
.versions__note[b-q8u9l8nala] {
    margin: 0;
    color: var(--color-text-secondary);
}
/* /Features/Estimates/ViewPie.razor.rz.scp.css */
/* The pie and its legend side by side, small: they stand in the totals' box, which is their panel,
   no taller than its figures. Where there is no room beside the pie, the legend goes under it. */
.view-pie[b-yppqc4sk38] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    margin: 0;
}

.view-pie__plot[b-yppqc4sk38] {
    position: relative;
    flex: none;
    width: 7.5rem;
}

.view-pie__plot svg[b-yppqc4sk38] {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* A 2px gap in the totals' box's colour between slices - each slice's stroke takes 1px of each side -
   and not a border, which would be ink that is not data. */
.view-pie__slice[b-yppqc4sk38] {
    fill: var(--chart-colour);
    stroke: var(--color-surface-container);
    stroke-width: 2px;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: opacity 120ms ease;
}

.view-pie__slice--dimmed[b-yppqc4sk38] {
    opacity: 0.35;
}

/* The two neutrals differ by weight, not hue: the lines that name nothing are known to be unknown and
   stand as firmly as a category; what is left beside the parts named recedes. */
.view-pie--unknown[b-yppqc4sk38] {
    --chart-colour: var(--color-text-muted);
}

.view-pie--other[b-yppqc4sk38] {
    --chart-colour: var(--color-border-strong);
}

/* Pinned on the rim beside the slice pointed at, standing off the pie. Moved sideways by as much of
   its own width as the point is across the pie - its left edge at the left of the pie, its right
   edge at the right - so it never reaches past the pie's width and off a narrow screen. The figure
   leads; the name follows. */
.view-pie__readout[b-yppqc4sk38] {
    position: absolute;
    z-index: 1;
    display: grid;
    gap: var(--space-1);
    width: max-content;
    max-width: 100%;
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-overlay);
    box-shadow: var(--shadow-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    pointer-events: none;
    transform: translate(var(--readout-shift, -50%), calc(-100% - var(--space-2)));
}

.view-pie__readout--below[b-yppqc4sk38] {
    transform: translate(var(--readout-shift, -50%), var(--space-2));
}

.view-pie__readout strong[b-yppqc4sk38] {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* As wide as its longest name, and never so narrow that the shares crowd the names. */
.view-pie__legend[b-yppqc4sk38] {
    display: grid;
    flex: none;
    min-width: 13rem;
    margin: 0;
    padding: 0;
    font-size: var(--font-size-sm);
    list-style: none;
}

.view-pie__entry[b-yppqc4sk38] {
    display: grid;
    grid-template-columns: 0.625rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
}

.view-pie__entry--active[b-yppqc4sk38] {
    background-color: var(--color-state-hover);
}

.view-pie__swatch[b-yppqc4sk38] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 2px;
    background-color: var(--chart-colour);
}

.view-pie__share[b-yppqc4sk38] {
    font-variant-numeric: tabular-nums;
    text-align: right;
}
/* /Features/Estimates/ViewsTab.razor.rz.scp.css */
.views[b-5zqgm5vg5b] {
    --stack-gap: var(--space-3);
}

/* Every view is visible: a dropdown would hide all but the current one, and a view nobody can see
   is a view nobody knows exists. Small, so that they take one row above the view and not two. */
.view-list[b-5zqgm5vg5b] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
}

.view-list__link[b-5zqgm5vg5b] {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-full);
    color: var(--color-text);
    text-decoration: none;
}

.view-list__link:hover[b-5zqgm5vg5b] {
    background-image: linear-gradient(var(--color-state-hover), var(--color-state-hover));
    text-decoration: none;
}

.view-list__link[aria-current="page"][b-5zqgm5vg5b] {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: var(--font-weight-medium);
}

/* The search, and the ways to add: on one row above the view, the adding to the right; on a phone
   the search takes a row of its own. */
.views-toolbar[b-5zqgm5vg5b] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2) var(--space-4);
}

.views-toolbar__search[b-5zqgm5vg5b] {
    flex: 1 1 18rem;
    min-width: 0;
    max-width: 32rem;
}

.views-toolbar__actions[b-5zqgm5vg5b] {
    margin-left: auto;
    justify-content: flex-end;
}

/* A line's name opens it. Set as text, as it is read; the hover layer and the focus ring say it can
   be pressed. As small as the row it is in. */
.views__open[b-5zqgm5vg5b] {
    min-height: 0;
    padding: 0;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    white-space: normal;
}

.views__open:hover:not(:disabled)[b-5zqgm5vg5b] {
    color: var(--color-primary);
    text-decoration: underline;
}

/* A department placed from a block that is behind it, or cannot be generated: its name, then why -
   on one line, as every group's name is, so the row is no taller than any other. */
.views__placement[b-5zqgm5vg5b] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* What opens a row's parameters: a quiet mark at the row's left, no taller than its line, plain
   until pointed at or open. A department placed from a block shows the block's mark, in colour. */
.views__parameters[b-5zqgm5vg5b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    min-height: 0;
    padding: 0;
    border-color: transparent;
    background-color: transparent;
    color: var(--color-text-muted);
}

.views__parameters[b-5zqgm5vg5b]  .app-icon {
    width: 1rem;
    height: 1rem;
}

.views__parameters--block[b-5zqgm5vg5b] {
    color: var(--color-accent);
}

.views__parameters:hover:not(:disabled)[b-5zqgm5vg5b],
.views__parameters[aria-expanded="true"][b-5zqgm5vg5b] {
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
/* /Features/Estimates/ViewTable.razor.rz.scp.css */
.view[b-5ddesb6lu4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

/* The view's name, who it may be shown to and the point it is drawn at: one line, wrapping on a phone. */
.view__header[b-5ddesb6lu4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.view__title[b-5ddesb6lu4] {
    margin: 0;
    font-size: var(--font-size-lg);
}

.view__point[b-5ddesb6lu4] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.view__kpis[b-5ddesb6lu4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: var(--space-2);
    margin: 0;
}

.view__kpi[b-5ddesb6lu4] {
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-container);
}

.view__kpi dt[b-5ddesb6lu4] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

.view__kpi dd[b-5ddesb6lu4] {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

/* DENSE, AND READ ACROSS. Smaller type and tighter cells than a record list, and no figure wraps -
   only a column's heading, and a line's description, do: the name column takes what the figures
   leave, so the figures stand packed beside each other at any width. Where they do not fit, the
   table is wider than its box and the box scrolls (.table-scroll), the names held at its left edge
   so a row can still be told while scrolling. The cells of the figures and the headings only: a
   row's name is a cell of its own (.view__label). */
.view__table[b-5ddesb6lu4] {
    font-size: var(--font-size-sm);
}

.view__table thead th[b-5ddesb6lu4],
.view__table td[b-5ddesb6lu4] {
    padding: var(--space-1) var(--space-2);
}

.view__table td[b-5ddesb6lu4] {
    white-space: nowrap;
}

.view__table thead th[b-5ddesb6lu4] {
    vertical-align: bottom;
    font-size: var(--font-size-xs);
}

.view__table thead th:first-child[b-5ddesb6lu4],
.view__label[b-5ddesb6lu4] {
    position: sticky;
    left: 0;
    z-index: 1;
    /* Everything left of the figures; the edge it scrolls under is drawn, as the cell's own border is
       not carried along with it. */
    width: 100%;
    box-shadow: inset calc(var(--border-width) * -1) 0 0 var(--color-border);
}

/* A row's name is a heading for its row, and reads as text rather than as a column heading. On one
   line: a group's name is short, and a line's description wraps of its own (see ViewsTab).
   Indented by how deep the row is in the grouping - --level is set on each row by the markup; a row
   that says nothing is at the top - after the room kept for what stands at the row's left edge,
   where there is any. */
.view__label[b-5ddesb6lu4] {
    min-width: 13rem;
    padding: var(--space-1) var(--space-2) var(--space-1) calc(var(--space-2) + var(--lead-room, 0rem) + (var(--level, 0) * var(--space-4)));
    background-color: var(--color-surface-page);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-base);
    text-transform: none;
    white-space: nowrap;
}

/* The few totals above other totals - a category, the total of everything - stand out, as a row
   that adds up others does in any table (.total-row, app.css). A group of lines does not: there are
   many of those. A row's name sets its own weight down (.view__label), so it is set up again here. */
.total-row > .view__label[b-5ddesb6lu4] {
    font-weight: var(--font-weight-semibold);
}

/* At the end of the view's heading line, so they take no line of their own. */
.view__fold[b-5ddesb6lu4] {
    --cluster-gap: var(--space-1);
    margin-left: auto;
}

.view__fold button[b-5ddesb6lu4] {
    min-height: 0;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
}

/* The control that folds a group, in front of its name and no taller than its line; a row with
   nothing to fold keeps the room it would take, so the names of one level stand in one column. */
.view__toggle[b-5ddesb6lu4],
.view__toggle-space[b-5ddesb6lu4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: calc(1em * var(--line-height-base));
    margin-right: var(--space-1);
    vertical-align: top;
}

.view__toggle[b-5ddesb6lu4] {
    min-height: 0;
    padding: 0;
    border-color: transparent;
    background-color: transparent;
    color: var(--color-text-secondary);
}

.view__toggle:hover:not(:disabled)[b-5ddesb6lu4] {
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.view__toggle[b-5ddesb6lu4]  .app-icon {
    width: 1rem;
    height: 1rem;
}

/* What opens under a row spans every column of the table, which is far wider than the screen. It is
   given the width of the scroll box instead - what is in view - and stays in view when the table is
   scrolled sideways, so its forms are never half off screen. Read as a form, not as figures: body
   text, wrapping. */
.view__scroll[b-5ddesb6lu4] {
    container-type: inline-size;
}

.view__table .view__detail > td[b-5ddesb6lu4] {
    padding: var(--space-3) 0 var(--space-5);
    background-color: var(--color-surface-inset);
    font-size: var(--font-size-base);
    white-space: normal;
}

.view__detail-body[b-5ddesb6lu4] {
    position: sticky;
    left: 0;
    width: 100cqi;
    padding-inline: var(--space-3);
}

/* What opens a row's parameters: at the left edge of the row, before its indent, so the marks of
   every level stand in one column. The names move over by as much. */
.view__table--leads[b-5ddesb6lu4] {
    --lead-room: 1.5rem;
}

.view__lead[b-5ddesb6lu4] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--space-1);
    display: flex;
    align-items: center;
}
/* /Features/Projects/FollowBell.razor.rz.scp.css */
/* In the header's row of actions, beside Details and Access: a quiet button, the bell before the word. */
.follow-bell[b-86c04o9mzk] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.follow-bell__toggle[b-86c04o9mzk] {
    gap: var(--space-1);
    padding-inline: var(--space-2);
}

/* Followed: the bell in the accent, so the state reads at a glance and not only from the word. */
.follow-bell__toggle[aria-pressed="true"][b-86c04o9mzk] {
    color: var(--color-accent);
}

.follow-bell__failure[b-86c04o9mzk] {
    color: var(--color-danger-text);
    font-size: var(--font-size-sm, 0.875rem);
}
/* /Features/Projects/NewProjectKind.razor.rz.scp.css */
.new-kind[b-p7jv8kl76l] {
    --stack-gap: var(--space-6);
}

.new-kind__group[b-p7jv8kl76l] {
    --stack-gap: var(--space-3);
}

.new-kind__intro h3[b-p7jv8kl76l] {
    margin: 0;
}

.new-kind__intro p[b-p7jv8kl76l] {
    margin: var(--space-1) 0 0;
}

.new-kind__muted[b-p7jv8kl76l] {
    margin: 0;
    color: var(--color-text-secondary);
}

/* Four of the five types side by side on a desktop, one under another on a
   phone. Narrower than a grid's default, because a card holds a title and a
   sentence or two, not a form. */
.new-kind__cards[b-p7jv8kl76l] {
    --grid-min: 14rem;
    --grid-gap: var(--space-3);
}
/* /Features/Projects/NewProjectParameters.razor.rz.scp.css */
.new-parameters[b-mytu4alrqi] {
    --stack-gap: var(--space-6);
}

.new-parameters__group[b-mytu4alrqi] {
    --stack-gap: var(--space-4);
    padding: var(--space-5);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-inset);
}

.new-parameters__group h3[b-mytu4alrqi],
.new-parameters__group p[b-mytu4alrqi] {
    margin: 0;
}

.new-parameters__muted[b-mytu4alrqi] {
    color: var(--color-text-secondary);
}

/* One value to a row: its box and, once it is this commercial case's own, the reason beside it. Two
   columns wherever they fit, one under the other on a phone. */
.new-parameters__rows[b-mytu4alrqi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.new-parameters__row[b-mytu4alrqi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-3) var(--space-5);
    align-items: start;
    padding-left: var(--space-3);
    border-left: calc(var(--border-width) * 3) solid transparent;
}

/* A value of the commercial case's own is marked at its edge, so what differs from the kind is seen
   at a glance. */
.new-parameters__row--given[b-mytu4alrqi] {
    border-left-color: var(--color-primary);
}

.new-parameters__value[b-mytu4alrqi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.new-parameters__value input[b-mytu4alrqi] {
    max-width: 12rem;
}

.new-parameters__value input[type="date"][b-mytu4alrqi] {
    max-width: 14rem;
}
/* /Features/Projects/NewProjectStart.razor.rz.scp.css */
.new-start[b-5nkoe8da1l] {
    --stack-gap: var(--space-6);
}

/* The three starts side by side wherever they fit, one under another on a
   phone. */
.new-start__options[b-5nkoe8da1l] {
    --grid-min: 15rem;
    --grid-gap: var(--space-3);
}

/* What the chosen start brings, set apart on an inset surface under the cards,
   so it reads as the detail of the card above it rather than as the next step. */
.new-start__detail[b-5nkoe8da1l] {
    --stack-gap: var(--space-4);
    padding: var(--space-5);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-inset);
}

.new-start__detail h3[b-5nkoe8da1l],
.new-start__detail h4[b-5nkoe8da1l],
.new-start__detail p[b-5nkoe8da1l] {
    margin: 0;
}

.new-start__muted[b-5nkoe8da1l] {
    color: var(--color-text-secondary);
}

.new-start__points[b-5nkoe8da1l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding-left: var(--space-5);
}

.new-start__projects[b-5nkoe8da1l] {
    --grid-min: 16rem;
    --grid-gap: var(--space-3);
}

/* The project chosen, with its figures: a card of its own under the list, so
   it stays in view whichever page of the list is showing. */
.new-start__preview[b-5nkoe8da1l] {
    --stack-gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container);
}

.new-start__figures[b-5nkoe8da1l] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    margin: 0;
}

.new-start__figures dt[b-5nkoe8da1l] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.new-start__figures dd[b-5nkoe8da1l] {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    text-align: left;
}

.new-start__blocks[b-5nkoe8da1l] {
    --grid-min: 17rem;
    --grid-gap: var(--space-3);
}

/* A block is a card like the others, but not a radio: any number of them are
   chosen, each as many times as it is built. Its count is at the foot of the
   card, so the counts of a row of cards line up. */
.new-start__block[b-5nkoe8da1l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container);
}

.new-start__block--chosen[b-5nkoe8da1l] {
    border-color: var(--color-accent);
    background-image: linear-gradient(var(--color-state-selected), var(--color-state-selected));
    box-shadow: inset 0 0 0 var(--border-width) var(--color-accent);
}

.new-start__block-text[b-5nkoe8da1l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.new-start__toggle[b-5nkoe8da1l] {
    padding-left: 0;
    padding-right: 0;
}

.new-start__lines[b-5nkoe8da1l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 16rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.new-start__lines li[b-5nkoe8da1l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    justify-content: space-between;
    padding-bottom: var(--space-2);
    border-bottom: var(--border-width) solid var(--color-border-subtle);
}

.new-start__count[b-5nkoe8da1l] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.new-start__count label[b-5nkoe8da1l] {
    margin: 0;
}

.new-start__stepper[b-5nkoe8da1l] {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

.new-start__stepper button[b-5nkoe8da1l] {
    min-width: var(--layout-touch-target-min);
    padding: 0;
    font-size: var(--font-size-lg);
}

.new-start__stepper input[b-5nkoe8da1l] {
    width: 4.5rem;
    text-align: center;
}

.new-start__tally[b-5nkoe8da1l] {
    font-weight: var(--font-weight-medium);
}
/* /Features/Projects/NewProjectSummary.razor.rz.scp.css */
.new-summary[b-0uhc8twavc] {
    --stack-gap: var(--space-6);
}

.new-summary__fields[b-0uhc8twavc] {
    --grid-min: 16rem;
    --grid-gap: var(--space-4);
}

.new-summary__chosen h3[b-0uhc8twavc] {
    margin: 0 0 var(--space-3);
}

/* Each answer a row: what it is, the answer with what it means, and the way
   back to change it. The rows are divided by a rule, as a table's would be,
   but they stay a description list so a screen reader pairs each term with its
   answer. */
.new-summary__list[b-0uhc8twavc] {
    margin: 0;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container);
}

.new-summary__row[b-0uhc8twavc] {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4);
}

.new-summary__row + .new-summary__row[b-0uhc8twavc] {
    border-top: var(--border-width) solid var(--color-border);
}

.new-summary__row dt[b-0uhc8twavc] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.new-summary__row dd[b-0uhc8twavc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
}

.new-summary__answer[b-0uhc8twavc] {
    font-weight: var(--font-weight-semibold);
}

.new-summary__muted[b-0uhc8twavc] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-regular);
}

.new-summary__blocks[b-0uhc8twavc] {
    margin: 0;
    padding-left: var(--space-5);
}

/* The way back sits at the end of the row on a wide screen, and under the
   answer on a phone - where the row becomes its term above its answer. */
@media (max-width: 48rem) {
    .new-summary__row[b-0uhc8twavc] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .new-summary__row dt[b-0uhc8twavc] {
        grid-column: 1 / -1;
    }
}
/* /Features/Projects/Pages/NewProject.razor.rz.scp.css */
.new-project[b-3vckwn70jp] {
    --stack-gap: var(--space-6);
}

.new-project__intro h2[b-3vckwn70jp] {
    margin: 0;
}

.new-project__intro p[b-3vckwn70jp] {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
}

.new-project__form[b-3vckwn70jp] {
    --stack-gap: var(--space-6);
}

/* Back at the leading edge, the way on at the trailing edge, as a reader of a
   left-to-right page expects to find them. On a phone the two wrap onto two
   lines, the way on first after Back has had its line. */
.new-project__actions[b-3vckwn70jp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--color-border);
}

.new-project__forward[b-3vckwn70jp] {
    margin-left: auto;
}
/* /Features/Projects/Pages/Pipeline.razor.rz.scp.css */
/* The funnel and the sums side by side on a wide screen - the funnel first, where the eye starts -
   and the sums above the funnel on a narrow one, where they are what fits at a glance. Side by side
   the funnel stands as tall as the sums beside it, so neither leaves a gap under it. */
.pipeline__overview[b-fplwkumuhk] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-areas: "funnel sums";
    gap: var(--space-6);
    align-items: stretch;
}

.pipeline__funnel[b-fplwkumuhk] {
    grid-area: funnel;
}

.pipeline__sums[b-fplwkumuhk] {
    grid-area: sums;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* A sum is a figure with what it is above it and what it is made of under it. The bar at its
   leading edge is the colours it is made of: the three stages in the pipe, or the one it ends at. */
.pipeline__sum[b-fplwkumuhk] {
    position: relative;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container);
    box-shadow: var(--shadow-container);
}

.pipeline__sum[b-fplwkumuhk]::before {
    content: "";
    position: absolute;
    top: var(--space-3);
    bottom: var(--space-3);
    left: var(--space-2);
    width: 0.25rem;
    border-radius: var(--radius-full);
    background: linear-gradient(
        to bottom,
        var(--app-stage-lead) 0 33.33%,
        var(--app-stage-qualified) 33.33% 66.67%,
        var(--app-stage-offer) 66.67% 100%);
}

.pipeline__sum.app-stage-sold[b-fplwkumuhk]::before,
.pipeline__sum.app-stage-lost[b-fplwkumuhk]::before {
    background: var(--chart-colour);
}

.pipeline__sum-label[b-fplwkumuhk] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.pipeline__sum-amount[b-fplwkumuhk] {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* What the stages of a sum stand for, under its amount, each after how many commercial cases are at
   it: the count in the text colour, the meaning quieter, in a smaller size. */
.pipeline__sum-meaning[b-fplwkumuhk],
.pipeline__meanings[b-fplwkumuhk] {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.pipeline__sum-count[b-fplwkumuhk],
.pipeline__meaning-count[b-fplwkumuhk] {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* In the pipe it is three stages: one to a row, each led by a dot in its colour - the dot the tabs
   have, with its ring in secondary text so it reads on any surface - then its count, its name and its
   meaning, in columns no wider than the longest of them, so a meaning keeps to one line where there
   is room. The counts line up on their right. */
.pipeline__meanings[b-fplwkumuhk] {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr);
    gap: var(--space-1) var(--space-2);
    align-items: baseline;
    padding: 0;
    list-style: none;
}

.pipeline__meaning[b-fplwkumuhk] {
    display: contents;
}

.pipeline__meaning[b-fplwkumuhk]::before {
    content: "";
    align-self: center;
    width: 0.5rem;
    height: 0.5rem;
    border: var(--border-width) solid var(--color-text-secondary);
    border-radius: var(--radius-full);
    background-color: var(--chart-colour);
}

.pipeline__meaning-count[b-fplwkumuhk] {
    text-align: right;
}

.pipeline__meaning-stage[b-fplwkumuhk] {
    color: var(--color-text);
}

.pipeline__basis[b-fplwkumuhk] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.pipeline__calculations[b-fplwkumuhk] {
    --stack-gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: var(--border-width) solid var(--color-border);
}

/* A stage's tab carries its colour as the funnel's layer does, in a dot before its name: the tab
   and the layer that choose the same commercial cases look alike. The dot is a picture of the name
   beside it, and has a ring in secondary text so it reads on any surface. */
.tabs__tab[class*="app-stage-"][b-fplwkumuhk]::before {
    content: "";
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    margin-right: var(--space-2);
    border: var(--border-width) solid var(--color-text-secondary);
    border-radius: var(--radius-full);
    background-color: var(--chart-colour);
}

.pipeline__calculations-description[b-fplwkumuhk] {
    margin: 0;
    color: var(--color-text-secondary);
}

/* The search and the choice of list share a row and wrap onto two on a phone, the search taking
   the room that is left. */
.pipeline__filters[b-fplwkumuhk] {
    --cluster-gap: var(--space-4);
    align-items: flex-end;
}

/* The name, and under it the kind of commercial case it is: one statement, two lines. */
.pipeline__name[b-fplwkumuhk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.pipeline__kind[b-fplwkumuhk] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* A commercial case the reader cannot open is named, and is not a link. Set as secondary text, so a
   column of names shows at a glance which of them lead somewhere. */
.pipeline__closed[b-fplwkumuhk] {
    color: var(--color-text-secondary);
}

/* A stage that may be changed, while it is being changed: its steps, and beside them the choice that names it. */
.pipeline__stage[b-fplwkumuhk] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* A stage that may be changed, at rest: drawn exactly as one that may not - no box, no fill, in the
   text's own colour, on the same line - so the column reads the same down every row. What it is
   becomes clear under the pointer: a line under the steps and the name, as a link has. */
.pipeline__stage-button[b-fplwkumuhk] {
    align-items: flex-start;
    min-height: var(--layout-touch-target-min);
    padding: 0;
    color: var(--color-text);
}

.pipeline__stage-button:hover:not(:disabled)[b-fplwkumuhk] {
    background-image: none;
    color: var(--color-text);
}

.pipeline__stage-button[b-fplwkumuhk]  .stage-trail {
    padding-bottom: var(--space-1);
    border-bottom: var(--border-width) solid transparent;
}

.pipeline__stage-button:hover:not(:disabled)[b-fplwkumuhk]  .stage-trail,
.pipeline__stage-button:focus-visible[b-fplwkumuhk]  .stage-trail {
    border-bottom-color: var(--color-link-hover);
}

/* What can be done with a commercial case, at the end of its row: ask for it, or manage who may
   open it. */
.pipeline__actions[b-fplwkumuhk] {
    --cluster-gap: var(--space-2) var(--space-3);
    justify-content: flex-end;
    align-items: center;
}

/* One width for every row's, so the column lines up whatever stage each one names. */
.pipeline__move-select[b-fplwkumuhk] {
    width: auto;
    min-width: 8.5rem;
}

/* The standing of a request and, under it, what the decider wrote: one statement, two lines. */
.pipeline__standing[b-fplwkumuhk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--color-text-secondary);
}

.pipeline__note[b-fplwkumuhk] {
    font-size: var(--font-size-sm);
}

/* A row's confirmation stands a little apart from the row above it, so it plainly belongs to that
   commercial case and not to the table. */
.pipeline__confirm[b-fplwkumuhk] {
    --stack-gap: var(--space-3);
    padding-top: var(--space-2);
}

@media (max-width: 64rem) {
    .pipeline__overview[b-fplwkumuhk] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "sums"
            "funnel";
        align-items: start;
    }
}

@media (max-width: 48rem) {
    /* Stacked and full width below the breakpoint: half a search box is not a search box. */
    .pipeline__filters[b-fplwkumuhk] {
        align-items: stretch;
    }

    /* In a row that has become a card this is the last thing in it, and reads from the leading edge
       like everything above it. */
    .pipeline__actions[b-fplwkumuhk] {
        justify-content: flex-start;
    }
}

/* A total that leaves lines out says so under it: the figure is less than the estimate holds. */
.pipeline__unpriced[b-fplwkumuhk] {
    display: block;
    color: var(--color-warning-text);
    font-size: var(--font-size-sm);
    white-space: normal;
}
/* /Features/Projects/PipelineFunnel.razor.rz.scp.css */
/* The layers one under another, a sliver of the surface between them so each reads as a layer of
   its own. The grid's outer columns are where the funnel has narrowed to by its bottom; the inner
   one is the way out, quotation. A layer in the pipe spans all three. */
.pipeline-funnel[b-afevqn202k] {
    display: grid;
    grid-template-columns: var(--pipeline-outlet-inset, 12%) minmax(0, 1fr) var(--pipeline-outlet-inset, 12%);
    grid-auto-rows: 1fr;
    gap: 0.125rem;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pipeline-funnel__layer[b-afevqn202k] {
    grid-column: 1 / -1;
}

.pipeline-funnel__layer--sold[b-afevqn202k] {
    grid-column: 2;
}

/* The button is the rectangle the layer sits in: no fill and no edge of its own, so all that shows
   is the layer. Hover and press are drawn on the layer instead of the foundation's layer over the
   rectangle, which would show the rectangle. */
.pipeline-funnel__button[b-afevqn202k] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    height: 100%;
    min-height: 5.25rem;
    padding: var(--space-2) var(--space-3);
    border-color: transparent;
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--app-on-stage);
    text-align: center;
}

.pipeline-funnel__button:hover:not(:disabled)[b-afevqn202k],
.pipeline-funnel__button:active:not(:disabled)[b-afevqn202k] {
    border-color: transparent;
    background-image: none;
}

.pipeline-funnel__button:focus-visible[b-afevqn202k] {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* The layer: stretched to the rectangle, under the words. The stroke is the surface, so layers side
   by side keep a gap along their slanted edges too, until one is chosen or pointed at. */
.pipeline-funnel__shape[b-afevqn202k] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pipeline-funnel__shape polygon[b-afevqn202k] {
    fill: var(--chart-colour);
    stroke: var(--color-surface-page);
    stroke-width: 2;
    stroke-linejoin: round;
    transition: stroke var(--motion-duration-fast) var(--motion-easing-standard);
}

.pipeline-funnel__button:hover .pipeline-funnel__shape polygon[b-afevqn202k] {
    stroke: var(--color-text-secondary);
}

/* THE CHOSEN LAYER IS TOLD BY ITS EDGE, NOT BY A CHANGE OF COLOUR: its stage keeps its colour, and
   the outline is drawn in the text colour, 3:1 and more against the page in either theme. */
.pipeline-funnel__button--chosen .pipeline-funnel__shape polygon[b-afevqn202k],
.pipeline-funnel__button--chosen:hover .pipeline-funnel__shape polygon[b-afevqn202k] {
    stroke: var(--color-text);
    stroke-width: 3;
}

.pipeline-funnel__stage[b-afevqn202k],
.pipeline-funnel__amount[b-afevqn202k] {
    position: relative;
    white-space: nowrap;
}

/* THE AMOUNT IS WHAT IS READ; THE STAGE ONLY SAYS WHICH. The name is a label: small, light and a
   little spaced, in the same colour as the amount - --app-on-stage is what keeps it 5:1 on every
   stage colour, so it is quietened by size and weight and never by a paler colour. */
.pipeline-funnel__stage[b-afevqn202k] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0.03em;
    line-height: 1.2;
}

.pipeline-funnel__amount[b-afevqn202k] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

/* The stage's MMI, under the amount: a quiet tag, smaller than the name and set apart by a hairline
   ring. The ring is a layer of its own drawn faint, so the words keep the full --app-on-stage and
   their 5:1 on every stage colour - as the name, it is quietened by size, never by a paler colour. */
.pipeline-funnel__maturity[b-afevqn202k] {
    position: relative;
    margin-top: var(--space-2);
    padding: 0 0.5em;
    font-size: var(--font-size-xs);
    letter-spacing: 0.06em;
    line-height: 1.5;
    white-space: nowrap;
}

.pipeline-funnel__maturity[b-afevqn202k]::before {
    content: "";
    position: absolute;
    inset: 0;
    border: var(--border-width) solid currentColor;
    border-radius: var(--radius-full);
    opacity: 0.4;
}

/* On a phone the narrowest layer is a few hundred pixels wide: the amount steps down a size so the
   longest of them still fits on one line. */
@media (max-width: 30rem) {
    .pipeline-funnel__amount[b-afevqn202k] {
        font-size: var(--font-size-xl);
    }
}
/* /Features/Projects/ProjectStageTrail.razor.rz.scp.css */
/* The steps and the name on one line, never wrapped: a trail broken over two lines is two trails. */
.stage-trail[b-z7x3pe7nje] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.stage-trail__steps[b-z7x3pe7nje] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* A step is a ring; the line between two steps is drawn by the second of them, so the first stands
   alone and the trail ends where its last step does. */
.stage-trail__step[b-z7x3pe7nje] {
    position: relative;
    width: 0.75rem;
    height: 0.75rem;
    border: var(--border-width) solid var(--color-text-secondary);
    border-radius: var(--radius-full);
    background-color: var(--color-surface-container);
}

.stage-trail__step + .stage-trail__step[b-z7x3pe7nje]::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    width: var(--space-2);
    border-top: var(--border-width) solid var(--color-border-strong);
}

/* Behind: done, and quiet about it. */
.stage-trail__step--behind[b-z7x3pe7nje] {
    background-color: var(--color-text-secondary);
}

/* At: larger, in the stage's colour. */
.stage-trail__step--at[b-z7x3pe7nje] {
    width: 1rem;
    height: 1rem;
    background-color: var(--chart-colour);
}

.stage-trail__name[b-z7x3pe7nje] {
    color: var(--color-text);
}
/* /Features/Projects/TicketHint.razor.rz.scp.css */
/* Under the ticket number: what the list says, quietly - the title first, its status and the link after. */
.ticket-hint[b-7b7k40tv41] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
}

.ticket-hint__title[b-7b7k40tv41] {
    font-weight: var(--font-weight-medium, 500);
}

.ticket-hint--muted[b-7b7k40tv41],
.ticket-hint__muted[b-7b7k40tv41] {
    color: var(--color-text-secondary);
}
/* /Features/Projects/TicketLink.razor.rz.scp.css */
/* Under the number: the ticket's title and status, on a line of their own. */
.ticket-link[b-zs37dlbl8y] {
    display: block;
    margin-block-start: var(--space-1);
}

.ticket-link--muted[b-zs37dlbl8y] {
    color: var(--color-text-secondary);
}
/* /Features/Supply/CalculationFilter.razor.rz.scp.css */
/* What stands in the choice's place while the list is read, or when it cannot be. */
.calculation-filter__note[b-s3ypmf5qp7] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}
/* /Features/Supply/DerivationEditor.razor.rz.scp.css */
.derivation-editor__steps[b-hr6l3mphgr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding-left: var(--space-5);
}

/* One step: its boxes in a row that wraps, and the way to take it away under them. */
.derivation-editor__step[b-hr6l3mphgr] {
    padding-bottom: var(--space-3);
    border-bottom: var(--border-width) solid var(--color-border-muted);
}

.derivation-editor__fields[b-hr6l3mphgr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-3);
    align-items: start;
}

/* "2 of 8": two short boxes and the word between them, on one line. */
.derivation-editor__part[b-hr6l3mphgr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.derivation-editor__part > input[b-hr6l3mphgr] {
    min-width: 0;
}
/* /Features/Supply/ItemLinePanel.razor.rz.scp.css */
.item-line__found[b-lbxo88qff2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* One item to a row, the whole row the target: its number, what it is, and what it costs. */
.item-line__choice[b-lbxo88qff2] {
    display: grid;
    grid-template-columns: minmax(6rem, auto) 1fr auto;
    gap: var(--space-3);
    align-items: baseline;
    width: 100%;
    min-height: var(--layout-touch-target-min);
    text-align: left;
}

.item-line__number[b-lbxo88qff2] {
    font-weight: var(--font-weight-medium);
}

.item-line__muted[b-lbxo88qff2] {
    color: var(--color-text-muted);
}

@media (max-width: 48rem) {
    .item-line__choice[b-lbxo88qff2] {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}
/* /Features/Supply/ItemPicker.razor.rz.scp.css */
.item-picker__found[b-uki9z7ob1f] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 18rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

/* One item to a row, the whole row the target: its number, what it is, what it costs and from whom. */
.item-picker__choice[b-uki9z7ob1f] {
    display: grid;
    grid-template-columns: minmax(6rem, auto) 1fr auto;
    gap: var(--space-3);
    align-items: baseline;
    width: 100%;
    min-height: var(--layout-touch-target-min);
    text-align: left;
}

.item-picker__number[b-uki9z7ob1f] {
    font-weight: var(--font-weight-medium);
}

.item-picker__muted[b-uki9z7ob1f] {
    color: var(--color-text-muted);
}

@media (max-width: 48rem) {
    .item-picker__choice[b-uki9z7ob1f] {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}
/* /Features/Supply/LineSupply.razor.rz.scp.css */
/* A section of the line's panel, set off from the figures above it the way the panel's other
   sections are. */
.line-supply[b-1wsxlayqio] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--color-border-muted);
}

.line-supply h4[b-1wsxlayqio] {
    margin: 0;
}

/* What a thing is called and what it is, side by side where there is room and stacked on a phone. */
.line-supply__facts[b-1wsxlayqio] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-2) var(--space-5);
    margin: 0;
}

.line-supply__facts dt[b-1wsxlayqio] {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.line-supply__facts dd[b-1wsxlayqio] {
    margin: 0;
}

.line-supply__muted[b-1wsxlayqio] {
    color: var(--color-text-muted);
}

.line-supply__heading[b-1wsxlayqio] {
    margin: 0;
    font-weight: var(--font-weight-medium);
}

.line-supply__derivation[b-1wsxlayqio] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* /Features/Supply/OffersTab.razor.rz.scp.css */
.offers__reference[b-dz13jpzv7n] {
    font-weight: var(--font-weight-medium);
}

.offers__muted[b-dz13jpzv7n] {
    color: var(--color-text-muted);
}

/* Short lines that belong together: the reference, whose it is, and where the document is. */
.offers__lines[b-dz13jpzv7n] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}
/* /Features/Supply/Pages/Items.razor.rz.scp.css */
/* The screen is a stack of blocks - what happened, the panel, the filters, the rows - so the spacing
   is the stack's. Only what the stack cannot say is here. */
.register[b-hjp02oisfi] {
    --stack-gap: var(--space-4);
}

/* The search takes what the filter row has to spare, beside the choice of what to show. */
.register__search[b-hjp02oisfi] {
    flex: 1 1 18rem;
    min-width: 0;
}

.register__name[b-hjp02oisfi] {
    font-weight: var(--font-weight-medium);
}

.register__muted[b-hjp02oisfi] {
    color: var(--color-text-muted);
}

/* Short lines that belong together: a name and the code lines know it by. */
.register__lines[b-hjp02oisfi] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

/* One term to a line: what it is and what it is called are read together. */
.register__terms[b-hjp02oisfi] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A row's confirmation stands a little apart from the row above it. */
.register__confirm[b-hjp02oisfi] {
    --stack-gap: var(--space-3);
    padding-top: var(--space-2);
}
/* /Features/Supply/Pages/Vendors.razor.rz.scp.css */
/* The screen is a stack of blocks - what happened, the panel, the filters, the rows - so the spacing
   is the stack's. Only what the stack cannot say is here. */
.register[b-gbewcuv9au] {
    --stack-gap: var(--space-4);
}

/* The search takes what the filter row has to spare, beside the choice of what to show. */
.register__search[b-gbewcuv9au] {
    flex: 1 1 18rem;
    min-width: 0;
}

.register__name[b-gbewcuv9au] {
    font-weight: var(--font-weight-medium);
}

.register__muted[b-gbewcuv9au] {
    color: var(--color-text-muted);
}

/* Short lines that belong together: a name and the code lines know it by. */
.register__lines[b-gbewcuv9au] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

/* One term to a line: what it is and what it is called are read together. */
.register__terms[b-gbewcuv9au] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A row's confirmation stands a little apart from the row above it. */
.register__confirm[b-gbewcuv9au] {
    --stack-gap: var(--space-3);
    padding-top: var(--space-2);
}
/* /Features/Supply/ProjectVendorsTab.razor.rz.scp.css */
.project-vendors__intro[b-043dbe4c13] {
    margin: 0;
    color: var(--color-text-secondary);
}

/* Short lines that belong together: a name, its code, and what kind of vendor it is. */
.project-vendors__lines[b-043dbe4c13] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

.project-vendors__name[b-043dbe4c13] {
    font-weight: var(--font-weight-medium);
}

.project-vendors__muted[b-043dbe4c13] {
    color: var(--color-text-muted);
}
/* /Features/Supply/TermPanel.razor.rz.scp.css */
.term-panel__costs[b-jdmr3lqkzy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.term-panel__costs > legend[b-jdmr3lqkzy] {
    width: 100%;
    padding: 0;
    margin-bottom: var(--space-1);
    font-weight: var(--font-weight-medium);
}

/* A box and what it means, on one line that is tall enough to touch. */
.term-panel__check[b-jdmr3lqkzy] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--layout-touch-target-min);
}
/* /Features/Supply/TermRegister.razor.rz.scp.css */
/* The screen is a stack of blocks - what happened, the panel, the filters, the rows - so the spacing
   is the stack's. Only what the stack cannot say is here. */
.register[b-ig874oydg4] {
    --stack-gap: var(--space-4);
}

/* The search takes what the filter row has to spare, beside the choice of what to show. */
.register__search[b-ig874oydg4] {
    flex: 1 1 18rem;
    min-width: 0;
}

.register__name[b-ig874oydg4] {
    font-weight: var(--font-weight-medium);
}

.register__muted[b-ig874oydg4] {
    color: var(--color-text-muted);
}

/* An item group's code, under its name: there to be read when asked for, not first. */
.register__code[b-ig874oydg4] {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* A row's actions, or the room they take: every row is as tall as one with a button, and its
   contents sit at the top of the row as every other cell's do. */
.register__actions[b-ig874oydg4] {
    min-height: var(--layout-touch-target-min);
    align-items: flex-start;
}

/* Short lines that belong together: a name and the code lines know it by. */
.register__lines[b-ig874oydg4] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}

/* One term to a line: what it is and what it is called are read together. */
.register__terms[b-ig874oydg4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A row's confirmation stands a little apart from the row above it. */
.register__confirm[b-ig874oydg4] {
    --stack-gap: var(--space-3);
    padding-top: var(--space-2);
}
/* /Features/Supply/VendorPanel.razor.rz.scp.css */
/* A box and what it means, on one line that is tall enough to touch. */
.register__check[b-dziy1dtwk8] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--layout-touch-target-min);
}

/* The four defaults read as one group: what a project gets unless it says otherwise. */
.register__defaults[b-dziy1dtwk8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    margin: 0;
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border-muted);
    border-radius: var(--radius-md);
}

.register__defaults > legend[b-dziy1dtwk8] {
    padding: 0 var(--space-1);
    font-weight: var(--font-weight-medium);
}

.register__defaults > p[b-dziy1dtwk8] {
    margin: 0;
}

.register__muted[b-dziy1dtwk8] {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
/* /Features/Types/BlockDemo.razor.rz.scp.css */
.block-demo[b-ceo38plx5b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* What the block is tried with stands on a panel of its own, so it reads as the question and the
   figures under it as the answer. Kept low: a heading and a row of narrow fields. */
.block-demo__inputs[b-ceo38plx5b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-inset);
}

.block-demo__bar[b-ceo38plx5b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
}

.block-demo__intro[b-ceo38plx5b] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
}

.block-demo__heading[b-ceo38plx5b] {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.block-demo__subheading[b-ceo38plx5b] {
    margin: 0 0 var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.block-demo__muted[b-ceo38plx5b] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* A field holds a number, not a sentence: as narrow as that, however few there are. auto-fill rather
   than auto-fit, so one field alone keeps the width of one. */
.block-demo__fields[b-ceo38plx5b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
    gap: var(--space-3) var(--space-4);
}

.block-demo__field[b-ceo38plx5b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

/* The name, and at its right what the field is measured against: the default once it holds another
   value, so a changed value reads as changed. */
.block-demo__label[b-ceo38plx5b] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.block-demo__default[b-ceo38plx5b] {
    flex: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
}

.block-demo__field input[b-ceo38plx5b] {
    width: 100%;
    font-variant-numeric: tabular-nums;
}

.block-demo__field--changed input[b-ceo38plx5b] {
    border-color: var(--color-accent);
    box-shadow: inset 3px 0 0 var(--color-accent);
}

/* A parameter nothing uses: there, but quieter, and asking to be hovered for why. The disabled input
   lets the pointer through to the box that carries the explanation. */
.block-demo__field--unused[b-ceo38plx5b] {
    cursor: help;
}

.block-demo__field--unused .block-demo__label[b-ceo38plx5b] {
    color: var(--color-text-muted);
}

.block-demo__field--unused input[b-ceo38plx5b] {
    pointer-events: none;
}

.block-demo__answer[b-ceo38plx5b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.block-demo__result[b-ceo38plx5b] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: opacity var(--motion-duration-base) var(--motion-easing-standard);
}

/* Figures for values that have since changed are dimmed while the new ones are on their way, rather
   than taken away: the page keeps its place. */
.block-demo__result--stale[b-ceo38plx5b] {
    opacity: 0.6;
}

/* The totals on one bar: each figure under its name, the price the largest, how many lines they are
   made of at the right. */
.block-demo__summary[b-ceo38plx5b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container);
}

.block-demo__totals[b-ceo38plx5b] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    margin: 0;
}

.block-demo__total[b-ceo38plx5b] {
    display: flex;
    flex-direction: column;
}

.block-demo__total dt[b-ceo38plx5b] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.block-demo__total dd[b-ceo38plx5b] {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.block-demo__total--final dd[b-ceo38plx5b] {
    font-size: var(--font-size-xl);
}

.block-demo__share[b-ceo38plx5b] {
    margin-left: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
}

.block-demo__counts[b-ceo38plx5b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* The build-up beside the lines on a wide screen, above them on a narrow one. */
.block-demo__parts[b-ceo38plx5b] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.block-demo__parts--split[b-ceo38plx5b] {
    grid-template-columns: minmax(15rem, 1fr) minmax(0, 3fr);
}

@media (max-width: 64rem) {
    .block-demo__parts--split[b-ceo38plx5b] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tighter than a register's rows: a table of figures, read down its columns. */
.block-demo__table[b-ceo38plx5b] {
    width: 100%;
}

/* ::deep because the lines' cells are RecordCell's, not this component's. */
.block-demo__table th[b-ceo38plx5b],
.block-demo__table[b-ceo38plx5b]  td {
    padding: var(--space-2) var(--space-3);
    vertical-align: middle;
}

.block-demo__table tbody th[b-ceo38plx5b] {
    color: var(--color-text);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    letter-spacing: normal;
    text-transform: none;
}

/* The price, the last of them, as a total is set everywhere else. */
.block-demo__table .total-row > th[b-ceo38plx5b] {
    font-weight: var(--font-weight-semibold);
}

.block-demo__lines-table thead th[b-ceo38plx5b] {
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.block-demo__lines-table[b-ceo38plx5b]  tbody tr:not(.block-demo__total-row):hover > td {
    background-color: var(--color-surface-inset);
}

/* What a line is priced from, then what it is called: the icon stays beside the first line of words
   however many lines they wrap onto. */
.block-demo__line[b-ceo38plx5b] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}

/* The icons are AppIcon's elements, so they are reached with ::deep. */
.block-demo__line[b-ceo38plx5b]  .block-demo__kind {
    width: 1rem;
    height: 1rem;
    margin-top: 0.2em;
    color: var(--color-text-secondary);
}

.block-demo__line[b-ceo38plx5b]  .block-demo__kind--group {
    color: var(--color-info-text);
}

.block-demo__description[b-ceo38plx5b] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    min-width: 0;
}

/* Where a line of a contained block is: the parts it is in, before its description. */
.block-demo__path[b-ceo38plx5b] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.block-demo__path[b-ceo38plx5b]::after {
    content: "›";
}

.block-demo__path[b-ceo38plx5b]  .block-demo__path-icon {
    width: 0.875rem;
    height: 0.875rem;
}

/* The item group a line is estimated from, where its description does not already say it. */
.block-demo__group[b-ceo38plx5b] {
    color: var(--color-info-text);
    font-size: var(--font-size-sm);
}

/* A figure with what it is written as at its left, small: the block's arithmetic, read beside its
   result. A long expression is cut short, and said whole when the pointer rests on it. */
.block-demo__figure[b-ceo38plx5b] {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--space-2);
    max-width: 100%;
}

.block-demo__formula[b-ceo38plx5b] {
    max-width: 12rem;
    overflow: hidden;
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-inset);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Every currency code is three letters: the same width in every row, so the amounts stay aligned,
   a line with none included. */
.block-demo__currency[b-ceo38plx5b] {
    min-width: 3ch;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    text-align: left;
}

.block-demo__unit[b-ceo38plx5b],
.block-demo__estimate[b-ceo38plx5b] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* A line that comes to none with these values: still listed, and set aside. */
.block-demo__lines-table[b-ceo38plx5b]  .block-demo__row--nothing > td {
    color: var(--color-text-muted);
}

.block-demo__row--nothing .block-demo__group[b-ceo38plx5b] {
    color: inherit;
}

/* What the columns come to, under a firmer rule. */
.block-demo__lines-table[b-ceo38plx5b]  .block-demo__total-row > td {
    border-top: 2px solid var(--color-border-strong);
    border-bottom: 0;
}
/* /Features/Types/BlockParts.razor.rz.scp.css */
/* One contained block: which, how many and its key on a row that wraps on a phone, and the parameters
   it is given under them. */
.block-parts__row[b-zaufxrsncs] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
}

.block-parts__fields[b-zaufxrsncs] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2) var(--space-3);
}

.block-parts__field[b-zaufxrsncs] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1 1 14rem;
    min-width: 0;
}

.block-parts__field > span[b-zaufxrsncs] {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.block-parts__field--short[b-zaufxrsncs] {
    flex: 0 1 8rem;
}
/* /Features/Types/BlocksTab.razor.rz.scp.css */
.blocks-tab__intro[b-rd1y7q1dlt] {
    margin: 0;
    color: var(--color-text-muted);
}

.blocks-tab__name[b-rd1y7q1dlt] {
    font-weight: var(--font-weight-medium);
}

.blocks-tab__muted[b-rd1y7q1dlt] {
    color: var(--color-text-muted);
}

.blocks-tab__lines[b-rd1y7q1dlt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.blocks-tab__heading[b-rd1y7q1dlt] {
    margin: 0;
    font-size: var(--font-size-base);
}

.blocks-tab__deviations[b-rd1y7q1dlt] {
    width: 100%;
    border-collapse: collapse;
}

.blocks-tab__deviations th[b-rd1y7q1dlt],
.blocks-tab__deviations td[b-rd1y7q1dlt] {
    padding: var(--space-1) var(--space-2);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.blocks-tab__deviations th[b-rd1y7q1dlt] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}
/* /Features/Types/LevelsPanel.razor.rz.scp.css */
.levels[b-bf2f21y4gj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A level: its number, its name, how many blocks have it, and what can be done with it, on a row that
   wraps on a phone. */
.levels__level[b-bf2f21y4gj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
}

.levels__number[b-bf2f21y4gj] {
    min-width: 2.5rem;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.levels__name[b-bf2f21y4gj] {
    font-weight: var(--font-weight-semibold);
}

.levels__name-input[b-bf2f21y4gj] {
    flex: 1 1 12rem;
    min-width: 0;
}

.levels__muted[b-bf2f21y4gj] {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.levels__add[b-bf2f21y4gj] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-3);
}
/* /Features/Types/Pages/BlockPage.razor.rz.scp.css */
.block-editor__heading[b-bs8y9ha2li] {
    margin: 0;
    font-size: var(--font-size-lg);
}

.block-editor__muted[b-bs8y9ha2li] {
    margin: 0;
    color: var(--color-text-muted);
}

/* A parameter, its default and the reason for it on one row; on a phone they wrap under each other. */
.block-editor__parameter[b-bs8y9ha2li] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.block-editor__parameter > select[b-bs8y9ha2li],
.block-editor__parameter > input[b-bs8y9ha2li] {
    flex: 1 1 12rem;
    min-width: 0;
}

/* The lines are a grid of inputs - wider than a phone - so the grid scrolls in its own box and the
   page does not. */
.block-editor__scroll[b-bs8y9ha2li] {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.block-editor__lines[b-bs8y9ha2li] {
    width: 100%;
    min-width: 56rem;
    border-collapse: collapse;
}

.block-editor__lines th[b-bs8y9ha2li],
.block-editor__lines td[b-bs8y9ha2li] {
    padding: var(--space-1) var(--space-2);
    text-align: left;
    vertical-align: middle;
}

.block-editor__lines th[b-bs8y9ha2li] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
}

.block-editor__lines input[b-bs8y9ha2li],
.block-editor__lines[b-bs8y9ha2li]  select {
    width: 100%;
    min-width: 0;
}

.block-editor__short[b-bs8y9ha2li] {
    max-width: 5rem;
}

/* The kind of a line is a word or two, and its item group a name: neither squeezed to nothing. */
.block-editor__lines select.block-editor__short[b-bs8y9ha2li] {
    min-width: 9rem;
    max-width: 10rem;
}

.block-editor__lines select.block-editor__group[b-bs8y9ha2li] {
    min-width: 12rem;
}

.block-editor__lines[b-bs8y9ha2li] {
    min-width: 84rem;
}

/* The item a line is, and the button that chooses another, on one line. */
.block-editor__item[b-bs8y9ha2li] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 10rem;
}

.block-editor__item > span[b-bs8y9ha2li] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The item being chosen opens under its line, across the whole row. */
.block-editor__picker td[b-bs8y9ha2li] {
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface-container);
}

/* The unit is a list, drawn by a component of its own: never so narrow that "No unit" or a symbol
   is cut, and wide enough to read the start of a unit's name. */
.block-editor__lines[b-bs8y9ha2li]  select.block-editor__short {
    min-width: 6.5rem;
    max-width: 8rem;
}

/* WHAT THE BLOCK IS, SUMMED UP
   -----------------------------------------------------------------------------
   Read far more often than changed, so it is a row of facts rather than a form:
   each a small label over its value, wrapping on a phone, with the one button
   that turns it back into the form at the end of the row. */
.block-facts[b-bs8y9ha2li] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container);
}

.block-facts__list[b-bs8y9ha2li] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    margin: 0;
}

.block-facts__item[b-bs8y9ha2li] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.block-facts__item dt[b-bs8y9ha2li] {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.block-facts__item dd[b-bs8y9ha2li] {
    margin: 0;
}

.block-facts__links[b-bs8y9ha2li] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
}

/* SAVING
   -----------------------------------------------------------------------------
   Under either tab, and held to the bottom of the window while there is
   something to save: the lines run long, and a change made at the top of them
   is saved without scrolling down to find the button. */
.block-save[b-bs8y9ha2li] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container);
    box-shadow: var(--shadow-lg);
}

.block-save__note[b-bs8y9ha2li] {
    margin: 0;
    color: var(--color-text-secondary);
}
/* /Features/Types/Pages/Blocks.razor.rz.scp.css */
.blocks__muted[b-7naaainka7] {
    color: var(--color-text-muted);
}

/* THE CARDS ARE BRICKS
   -----------------------------------------------------------------------------
   A thick coloured top edge with four studs standing on it. The colour is one of
   the foundation's categories, set by a chart-cat-N class on the card as
   --chart-colour, so neighbours differ; it says nothing about the block, and its
   words never stand on it. A block out of use is a grey brick. The grid's rows
   are spaced wider than its columns by the studs' height, which they stand in,
   so the bricks look as far apart down as across. */
.blocks[b-7naaainka7] {
    --grid-gap: var(--space-6) var(--space-5);
}

.blocks__block[b-7naaainka7] {
    --blocks-cap: var(--space-2);

    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-top: var(--blocks-cap) solid var(--chart-colour);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-container);
    box-shadow: var(--shadow-container);
    transition:
        transform var(--motion-duration-fast) var(--motion-easing-standard),
        box-shadow var(--motion-duration-fast) var(--motion-easing-standard);
}

.blocks__block--out[b-7naaainka7] {
    --chart-colour: var(--color-border-strong);
}

/* On the coloured edge rather than inside it: the padding box ends where the
   edge starts. */
.blocks__studs[b-7naaainka7] {
    position: absolute;
    right: var(--space-4);
    bottom: calc(100% + var(--blocks-cap));
    left: var(--space-4);
    display: flex;
    justify-content: space-around;
}

.blocks__studs > span[b-7naaainka7] {
    width: var(--space-6);
    height: var(--space-2);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background-color: var(--chart-colour);
}

/* The whole brick opens the block: the name's link is stretched over the card,
   so a brick is picked up as it lifts. What is in the foot stands above the
   link, so its button is pressed rather than the card. */
.blocks__block:hover[b-7naaainka7] {
    transform: translateY(calc(var(--space-1) * -1));
    box-shadow: var(--shadow-md);
}

.blocks__name a[b-7naaainka7]::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* The link's own ring would circle the name only; the card is what it opens. */
.blocks__name a:focus-visible[b-7naaainka7] {
    outline: none;
}

.blocks__block:has(.blocks__name a:focus-visible)[b-7naaainka7] {
    box-shadow: var(--shadow-focus);
}

.blocks__top[b-7naaainka7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.blocks__title[b-7naaainka7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

/* Above the stretched link, so the badge's explanation shows on hover. */
.blocks__status[b-7naaainka7] {
    position: relative;
    z-index: 1;
    flex: none;
}

.blocks__name[b-7naaainka7] {
    margin: 0;
    font-size: var(--font-size-lg);
}

.blocks__about[b-7naaainka7] {
    margin: 0;
    color: var(--color-text-secondary);
}

/* What a block is made of, as two figures read at a glance. The label comes
   first in the markup, as a definition list wants it, and under the figure on
   screen. Pushed down with the foot, whatever the description says, so the
   figures and feet of a row of bricks line up. */
.blocks__figures[b-7naaainka7] {
    display: flex;
    gap: var(--space-6);
    margin: auto 0 0;
}

.blocks__figures > div[b-7naaainka7] {
    display: flex;
    flex-direction: column-reverse;
}

.blocks__figures dt[b-7naaainka7] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.blocks__figures dd[b-7naaainka7] {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--line-height-tight);
}

.blocks__foot[b-7naaainka7] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--color-border);
}

.blocks__foot > button[b-7naaainka7] {
    margin-left: auto;
}

.blocks__confirm[b-7naaainka7] {
    position: relative;
    z-index: 1;
}

/* Its level, small, over its name. */
.blocks__level[b-7naaainka7] {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

/* A block that came with the application: outlined in dashes, told apart by its line and not by a
   colour, which the category colours do not leave room for. */
.blocks__block--built-in[b-7naaainka7] {
    border-right-style: dashed;
    border-bottom-style: dashed;
    border-left-style: dashed;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
}
/* /Features/Types/Pages/Structures.razor.rz.scp.css */
.structures__toolbar[b-w66t3fadxx] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
}

.structures__view[b-w66t3fadxx] {
    align-items: center;
}

.structures__zoom[b-w66t3fadxx] {
    min-width: 3.5rem;
    text-align: center;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.structures__count[b-w66t3fadxx] {
    max-width: 12rem;
}

.structures__heading[b-w66t3fadxx] {
    margin: 0;
    font-size: var(--font-size-lg);
}

.structures__muted[b-w66t3fadxx] {
    margin: 0;
    color: var(--color-text-muted);
}

.structures__level[b-w66t3fadxx] {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.structures__unattached[b-w66t3fadxx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.structures__unattached > li[b-w66t3fadxx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}
/* /Features/Types/PlacementPanel.razor.rz.scp.css */
/* Who it is and where it stands, in a line of text above what can be set. */
.placement-panel__intro[b-gzbpt6ah7c] {
    margin: 0;
    color: var(--color-text-secondary);
}

/* A field per parameter, side by side while they fit (.grid-auto): a block has one or two, so the
   row is kept short enough that a lone field is not stretched across the panel. */
.placement-panel__parameters[b-gzbpt6ah7c] {
    --grid-min: 14rem;
    --grid-gap: var(--space-3) var(--space-4);
    max-width: 30rem;
}

.placement-panel__behind[b-gzbpt6ah7c] {
    --cluster-gap: var(--space-2) var(--space-4);
    color: var(--color-text-secondary);
}

.placement-panel__heading[b-gzbpt6ah7c] {
    margin: 0;
    font-size: var(--font-size-md, var(--font-size-base));
}
/* /Features/Types/StructureCanvas.razor.rz.scp.css */
/* THE FRAME
   -----------------------------------------------------------------------------
   The browser's own scroll box, both ways, so touch, the keyboard and the
   scrollbars move it; a mouse drags it (js/structure-canvas.js). As tall as most
   of the window, so the page around it stays in reach. */
.structure-canvas[b-btv8vp1qas] {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    overflow: auto;
    /* Its width is where it stands, never what it holds: in a table cell, a canvas wider than the
       cell would otherwise widen the cell, and then be laid out to fill it. */
    contain: inline-size;
    max-height: min(75vh, 56rem);
    min-height: 12rem;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    cursor: grab;
    overscroll-behavior: contain;
}

.structure-canvas:focus-visible[b-btv8vp1qas] {
    outline: 2px solid var(--color-focus-ring, var(--color-primary));
    outline-offset: 2px;
}

.structure-canvas.is-panning[b-btv8vp1qas] {
    cursor: grabbing;
    user-select: none;
}

/* The frame's padding is set here and allowed for in the layout (StructureCanvas.FramePadding), so a
   canvas laid out to fill the frame fills it exactly. */
.structure-canvas[b-btv8vp1qas] {
    padding: 12px;
}

.structure-canvas__world[b-btv8vp1qas] {
    position: relative;
}

.structure-canvas__note[b-btv8vp1qas] {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* A BLOCK
   -----------------------------------------------------------------------------
   A box with its lines, and a strip at its right edge for + and -. One that came
   with the application is outlined in dashes; one out of use is muted. Told
   apart by their lines, never by a colour. */
.structure-box[b-btv8vp1qas] {
    position: absolute;
    display: flex;
    box-sizing: border-box;
    border: 2px solid var(--color-text);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-container);
    box-shadow: var(--shadow-container);
    overflow: hidden;
    cursor: default;
}

.structure-box--built-in[b-btv8vp1qas] {
    border-style: dashed;
}

.structure-box--out[b-btv8vp1qas] {
    border-color: var(--color-border);
    opacity: 0.7;
}

.structure-box--missing[b-btv8vp1qas] {
    border-color: var(--color-danger, var(--color-border));
    border-style: dotted;
}

.structure-box__body[b-btv8vp1qas] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
}

.structure-box__head[b-btv8vp1qas] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "level badges"
        "title badges";
    column-gap: var(--space-2);
    min-height: 2.75rem;
}

.structure-box__level[b-btv8vp1qas] {
    grid-area: level;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.structure-box__title[b-btv8vp1qas] {
    grid-area: title;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
}

.structure-box__name[b-btv8vp1qas] {
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.structure-box__count[b-btv8vp1qas] {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.structure-box__badges[b-btv8vp1qas] {
    grid-area: badges;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
}

.structure-box__lines[b-btv8vp1qas] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A line: what it is, how many, and its price - the price is what is read across a row of boxes, so it
   keeps its place on the right. */
.structure-box__line[b-btv8vp1qas] {
    display: grid;
    grid-template-columns: minmax(45%, 1fr) minmax(0, auto) minmax(0, auto);
    gap: var(--space-2);
    height: 22px;
    align-items: center;
    font-size: var(--font-size-sm);
}

.structure-box__description[b-btv8vp1qas] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* What a line counts and costs are often expressions - {tank-count} - which would crowd its name out:
   each keeps to a few characters, the rest in its title. */
.structure-box__quantity[b-btv8vp1qas],
.structure-box__price[b-btv8vp1qas] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.structure-box__quantity[b-btv8vp1qas] {
    max-width: 6rem;
}

.structure-box__price[b-btv8vp1qas] {
    max-width: 7rem;
    text-align: right;
}

.structure-box__muted[b-btv8vp1qas],
.structure-box__also[b-btv8vp1qas] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.structure-box__fold[b-btv8vp1qas] {
    align-self: flex-start;
    padding: 0;
    font-size: var(--font-size-sm);
}

/* + and -, in a strip of their own at the box's right edge, as the sketch has them. */
.structure-box__controls[b-btv8vp1qas] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-left: 2px solid var(--color-border);
}

.structure-box__control[b-btv8vp1qas],
.structure-canvas__add[b-btv8vp1qas] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.structure-box__control:hover[b-btv8vp1qas],
.structure-canvas__add:hover[b-btv8vp1qas] {
    border-color: var(--color-text);
}

/* The box that adds a block at the top: a + of its own beside the top row. */
.structure-canvas__add[b-btv8vp1qas] {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid var(--color-text);
    font-size: 1.75rem;
}

/* Under a box that contains blocks: what opens it, and how many are in it. */
.structure-box__chevron[b-btv8vp1qas] {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    box-sizing: border-box;
    padding: 0 var(--space-2);
    border: var(--border-width) solid var(--color-border);
    border-radius: 999px;
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.structure-box__chevron--open[b-btv8vp1qas] {
    background-color: var(--color-surface-container);
}

.structure-box__chevron-count[b-btv8vp1qas] {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* /Layout/AccountMenu.razor.rz.scp.css */
/* One row in the top bar: the name, a badge when there is something to say, and the way out. The
   name gives way first on a narrow screen. */
.account[b-964nr29dqi] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.account__name[b-964nr29dqi] {
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account__sign-out[b-964nr29dqi] {
    white-space: nowrap;
}

@media (max-width: 30rem) {
    .account__name[b-964nr29dqi] {
        display: none;
    }
}
/* /Layout/ActingUser.razor.rz.scp.css */
/* One compact control in the top bar: the DEV marker and the choice. The select truncates before the
   bar overflows. */
.acting-user[b-ccgtft1545] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.acting-user__select[b-ccgtft1545] {
    min-width: 0;
    max-width: 22rem;
    text-overflow: ellipsis;
}

/* Louder than a caution: an identity nobody verified is a statement, not a warning. */
.acting-user__marker[b-ccgtft1545] {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    background-color: var(--color-danger-subtle);
    color: var(--color-danger-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    white-space: nowrap;
}

@media (max-width: 48rem) {
    .acting-user__select[b-ccgtft1545] {
        max-width: 11rem;
    }
}
/* /Layout/AppUpdateBanner.razor.rz.scp.css */
/* =============================================================================
   The new-version bar

   Sits between the top bar and the content, full width, and pushes rather than
   covers. A floating snackbar would sit over whatever is at the bottom of the
   screen - on a phone that is usually the primary action of the page - and this
   is not urgent enough to be in the way of work.
   ============================================================================= */

.app-update[b-4q1is118yw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-bottom: var(--border-width) solid var(--color-info);
    background-color: var(--color-info-subtle);
    color: var(--color-text);
}

.app-update__text[b-4q1is118yw] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    /* Takes the row and lets the button sit at its end; on a narrow screen the
       button wraps beneath rather than squeezing the sentence to two words. */
    flex: 1 1 12rem;
    margin: 0;
    min-width: 0;
    font-size: var(--font-size-sm);
}

.app-update__title[b-4q1is118yw] {
    font-weight: var(--font-weight-semibold);
}

/* The second half of the sentence, and the first thing to go when the bar is
   narrow: "A new version is ready" beside a button saying "Update now" is
   already the whole message. */
.app-update__detail[b-4q1is118yw] {
    color: var(--color-text-secondary);
}

@media (max-width: 30rem) {
    .app-update__detail[b-4q1is118yw] {
        display: none;
    }
}

/* A real button rather than a link. This is the one thing on the bar to do, it
   is being offered to somebody holding a phone in one hand, and it has to be a
   target rather than a word. */
.app-update__action[b-4q1is118yw] {
    flex: 0 0 auto;
    min-height: var(--layout-touch-target-min);
    padding: var(--space-1) var(--space-4);
    border: var(--border-width) solid var(--color-info);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-container);
    color: var(--color-text);
    font: inherit;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.app-update__action:hover:not(:disabled)[b-4q1is118yw] {
    background-image: linear-gradient(var(--color-state-hover), var(--color-state-hover));
}

.app-update__action:focus-visible[b-4q1is118yw] {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: 2px;
}

.app-update__action:disabled[b-4q1is118yw] {
    cursor: default;
    opacity: 0.7;
}
/* /Layout/BarePage.razor.rz.scp.css */
/* One column in the middle of the window, at every width. */
.bare-page[b-6msxbqp0rb] {
    display: grid;
    min-height: 100dvh;
    padding: var(--space-6) var(--space-4);
    background-color: var(--color-surface-page);
    place-items: start center;
}

.bare-page__content[b-6msxbqp0rb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    width: 100%;
    max-width: 34rem;
    margin-top: 10vh;
}

.bare-page__brand[b-6msxbqp0rb] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

/* AppLogo renders the mark, so the size reaches it through ::deep. A little larger than in the
   sidebar: here it is the only thing of Calculus on the page. */
.bare-page__brand[b-6msxbqp0rb]  .app-logo {
    width: 2rem;
    height: 2rem;
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* =============================================================================
   Sidebar navigation

   WHY ::deep IS EVERYWHERE BELOW
   NavLink is a *component*, and Blazor's CSS isolation only stamps this component's
   scope attribute onto elements written in this file's own markup - never onto
   markup another component renders. So `.nav-menu__link { ... }` compiles to
   `.nav-menu__link[b-xxxxx]`, which the <a> that NavLink renders never carries, and
   the rule silently does nothing. Every nav link in this application was therefore
   unstyled - falling through to the global `a` rule and rendering as plain blue
   text - until these selectors were rewritten with ::deep.

   ::deep drops the attribute from the *last* compound selector and keeps it on the
   ancestor, giving `.nav-menu__nav[b-xxxxx] .nav-menu__link`. That matches, because
   .nav-menu__nav IS in this file's markup.
   ============================================================================= */

.nav-menu[b-fb7kbd4zgg] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nav-menu__brand[b-fb7kbd4zgg] {
    display: flex;
    align-items: center;
    min-height: var(--layout-topbar-height);
    padding: 0 var(--space-4);
    /* Lines up with the top bar's own bottom border across the shell. */
    border-bottom: var(--border-width) solid var(--color-sidebar-border);
}

/* A plain <a> in this file's markup, so no ::deep needed here. */
.nav-menu__brand a[b-fb7kbd4zgg] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--color-sidebar-text-active);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    text-decoration: none;
}

.nav-menu__nav[b-fb7kbd4zgg] {
    /* Horizontal padding on the container, not the items: it is what insets the
       rounded highlight from the sidebar edge so it reads as a pill rather than a
       full-width band. */
    padding: var(--space-3) var(--space-2);
    overflow-y: auto;
}

.nav-menu__section[b-fb7kbd4zgg] {
    margin: var(--space-5) var(--space-3) var(--space-2);
    color: var(--color-sidebar-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.nav-menu__list[b-fb7kbd4zgg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.nav-menu__nav[b-fb7kbd4zgg]  .nav-menu__link {
    /* A long press does not start selecting the link's text - the rule Eyvi.Design's base.css applies
       to buttons and labels. */
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--layout-touch-target-min);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-sidebar-text);
    text-decoration: none;
    transition:
        background-color var(--motion-duration-fast) var(--motion-easing-standard),
        color var(--motion-duration-fast) var(--motion-easing-standard);
}

/* Overrides the global `a:hover` underline: in a nav list an underline on hover
   reads as a text link in prose rather than as a row in a menu. */
.nav-menu__nav[b-fb7kbd4zgg]  .nav-menu__link:hover {
    background-color: var(--color-state-hover);
    color: var(--color-sidebar-text-active);
    text-decoration: none;
}

/* NavLink adds this class for the currently routed entry. */
.nav-menu__nav[b-fb7kbd4zgg]  .nav-menu__link.active {
    background-color: var(--color-state-selected);
    color: var(--color-sidebar-text-active);
    font-weight: var(--font-weight-medium);
}

/* The accent is spent on one thing - which entry you are on. Everything else in
   the sidebar stays monochrome so this reads at a glance. */
.nav-menu__nav[b-fb7kbd4zgg]  .nav-menu__link.active .app-icon {
    color: var(--color-accent);
}

/* Slightly smaller than the default icon size: at the nav's text size a 20px icon
   out-weighs its label. */
.nav-menu__nav[b-fb7kbd4zgg]  .app-icon {
    width: 1.125rem;
    height: 1.125rem;
}

/* The links are the drawer's whole content below 64rem, so they get the roomier
   touch target there rather than the compact desktop one. */
@media (max-width: 64rem) {
    .nav-menu__nav[b-fb7kbd4zgg]  .nav-menu__link {
        min-height: calc(var(--layout-touch-target-min) + var(--space-1));
    }
}
/* /Layout/NoAccess.razor.rz.scp.css */
/* The one card on the page, drawn as the application's inline panels are. */
.no-access[b-1j0f5hyhs0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-container);
    box-shadow: var(--shadow-container);
}

.no-access__title[b-1j0f5hyhs0] {
    margin: 0;
    font-size: var(--font-size-xl);
}

.no-access p[b-1j0f5hyhs0] {
    margin: 0;
}
/* /Layout/OfflineBanner.razor.rz.scp.css */
/* =============================================================================
   The no-connection bar

   Sits where the new-version bar sits and behaves the same way: full width,
   between the top bar and the content, pushing rather than covering. That
   placement is settled - see AppUpdateBanner.razor.css - and two bars that
   appeared in two different places would read as two unrelated faults.

   WARNING RATHER THAN DANGER. Nothing has broken and nothing has been lost; the
   application simply cannot reach its server for the moment. Red is for a
   refusal or a failure somebody has to act on, and spending it here would leave
   nothing louder for the write that actually fails.

   IT USES NO NEW TOKEN. Both colours already exist and already clear the
   contrast floor in both themes, so DesignTokenTests is untouched.
   ============================================================================= */

.app-offline[b-o760og4ohe] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-bottom: var(--border-width) solid var(--color-warning);
    background-color: var(--color-warning-subtle);
    color: var(--color-warning-text);
}

.app-offline__text[b-o760og4ohe] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    flex: 1 1 12rem;
    margin: 0;
    min-width: 0;
    font-size: var(--font-size-sm);
}

.app-offline__title[b-o760og4ohe] {
    font-weight: var(--font-weight-semibold);
}

/* The second half of the sentence, and the first thing to go when the bar is
   narrow - the same treatment the update bar gives its own. "No internet
   connection" is the whole message; the rest is reassurance. */
.app-offline__detail[b-o760og4ohe] {
    opacity: 0.9;
}

@media (max-width: 30rem) {
    .app-offline__detail[b-o760og4ohe] {
        display: none;
    }
}
/* /Layout/WakingBanner.razor.rz.scp.css */
.app-waking[b-bb5y4wld9l] {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width) solid var(--color-border-subtle);
    background-color: var(--color-surface-container);
}
/* /Shared/EmptyState.razor.rz.scp.css */
.empty-state[b-3jlw35v890] {
    padding: var(--space-7) var(--space-5);
    text-align: center;
    background-color: var(--color-surface-container);
    border: var(--border-width) dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
}

.empty-state__title[b-3jlw35v890] {
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-size: var(--font-size-lg);
}

.empty-state__body[b-3jlw35v890] {
    max-width: 40rem;
    margin: 0 auto;
}