/* /Components/Accessions/AccessionDetailTab.razor.rz.scp.css */
.accession-detail-tab[b-yy4buiwf7n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}


.accession-detail-tab__unmapped-errors[b-yy4buiwf7n] {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-warn-container);
    color: var(--color-on-warn-container);
    border: 1px solid var(--color-warn-outline);
    border-radius: var(--border-radius);
    list-style: none;
    font-size: 0.85rem;
}

.accession-detail-tab__unmapped-errors li + li[b-yy4buiwf7n] {
    margin-top: var(--space-xs);
}

/* ---------- The form ---------- */

/* Neither the <EditForm> nor the <IrisSaveBar> inside it can be styled from here: both are
   COMPONENTS, so their root elements carry their OWN scope attribute, not this file's, and
   any rule aimed at them is silently dead — which is exactly how the gap that was meant to
   sit under the save bar went missing. Spacing that has to survive lives on the raw boxes
   below, which do get stamped. */

.accession-detail-tab__form-fields[b-yy4buiwf7n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    /* The gap between the save bar and the first group. Not on the form and not on the bar
       (neither is reachable from here, see above) — on the one box that is ours. */
    margin-top: var(--space-md);
}

/* Rows the desktop leaves at the root of grdObject, under no CategoryRow. They
   render outside every accordion — always visible, never collapsible — and take
   the accordion body's padding so the sheet still reads as one column. */
.accession-detail-tab__root-fields[b-yy4buiwf7n] {
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
}
/* /Components/Accessions/AccessionItemDetail/AccessionItemDetail.razor.rz.scp.css */
.accession-detail[b-w51bgfcf28] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.accession-detail__subheader[b-w51bgfcf28] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/* Left-side group: accession text + optional cached badge stay together so the
   Save button keeps its right anchor when the badge shows/hides. */
.accession-detail__meta[b-w51bgfcf28] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

/* The identifier voice: mono + ochre, the same wherever the number appears. */
.accession-detail__accession[b-w51bgfcf28] {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--color-secondary);
    margin: 0;
}

/* Rendered as a link when the host page is not the item detail page itself —
   same voice, and the underline (from the global a rule) says "tappable". */
.accession-detail__accession--link[b-w51bgfcf28] {
    color: var(--color-secondary);
}

.accession-detail__accession--link:hover[b-w51bgfcf28] {
    color: var(--color-secondary);
}

/* History (superseded) versions are display-only. */
.accession-detail__history-badge[b-w51bgfcf28] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-outline-variant);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-sm, 4px);
    padding: 2px 8px;
    white-space: nowrap;
}

.accession-detail__actions[b-w51bgfcf28] {
    position: relative; /* anchors the photo-menu popover */
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.accession-detail__actions[b-w51bgfcf28]  .iris-btn {
    flex: 1;
}

.accession-detail[b-w51bgfcf28]  .accession-detail__empty {
    color: var(--color-outline-variant);
    font-size: 0.875rem;
    text-align: center;
    padding: var(--space-lg) 0;
    margin: 0;
}

/* ── Add photo menu ── */
.photo-menu-backdrop[b-w51bgfcf28] {
    position: fixed;
    inset: 0;
    z-index: 10;
}

.photo-menu[b-w51bgfcf28] {
    position: absolute;
    bottom: calc(100% + var(--space-xs));
    right: 0;
    z-index: 11;
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    min-width: 200px;
    overflow: hidden;
}

.photo-menu__item[b-w51bgfcf28] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.9rem;
    color: var(--color-on-surface);
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background-color var(--transition-fast);
}

.photo-menu__item:hover[b-w51bgfcf28] {
    background-color: var(--color-surface-container-high);
}
/* /Components/Accessions/AccessionItemDetail/AccessionItemPhotos.razor.rz.scp.css */
.photo-grid[b-tfj37nfmjv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
    padding-top: var(--space-sm);
}

.photo-thumb[b-tfj37nfmjv] {
    aspect-ratio: 1;
    width: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.photo-thumb:hover[b-tfj37nfmjv] {
    opacity: 0.85;
}
/* /Components/Accessions/AccessionItemDetail/AccessionItemProperties.razor.rz.scp.css */
/* Spaces the error banners from the form; the <form> itself is EditForm's element,
   so a gap on this container is the only spacing above it this file can set. */
.accession-properties[b-dqqaksy8i6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* ---------- The form ---------- */

/* Nothing here can reach the save bar or the <form>: both are COMPONENT roots, so they
   carry their own scope attribute, not this file's, and any rule written against them
   is silently dead. That is how the gap under the bar went missing. This wrapper is
   raw markup of ours, so it does get stamped — the separation lives on it.

   No flex gap on purpose: IrisAccordion already spaces sibling groups itself
   (.iris-accordion + .iris-accordion), and a gap here would double it. */
.accession-properties__form-fields[b-dqqaksy8i6] {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-md);
}

/* Rows the desktop leaves at the root of grdItem, under no CategoryRow. They
   render outside every accordion — always visible, never collapsible — and take
   the accordion body's padding so the sheet still reads as one column. */
.accession-properties__root-fields[b-dqqaksy8i6] {
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    /* Both edges, because an accordion has no plain sibling margin to lean on —
       only the adjacent-accordion rule, which a root block never matches. */
    margin: var(--space-sm) 0;
}

/* The first block sits directly under the bar, whose gap the wrapper already owns. */
.accession-properties__form-fields > .accession-properties__root-fields:first-child[b-dqqaksy8i6] {
    margin-top: 0;
}

/* Unmapped server errors — a column the field map doesn't know, surfaced
   rather than swallowed so the user is never blind to a rejected save. */
.accession-properties__unmapped-errors[b-dqqaksy8i6] {
    color: var(--color-error);
    background: var(--color-error-container);
    border: 1px solid var(--color-error-outline);
    border-radius: var(--border-radius-sm, 4px);
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    list-style: none;
}
/* /Components/Accessions/AccessionItemsTab.razor.rz.scp.css */
.accession-items-tab[b-mni3yc7fre] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.accession-items-tab__meta[b-mni3yc7fre],
.accession-items-tab__empty[b-mni3yc7fre] {
    margin: 0;
    color: var(--color-outline-variant);
    font-size: 0.9rem;
    padding: var(--space-sm) var(--space-md);
}

.accession-items-tab__error[b-mni3yc7fre] {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-error-container);
    color: var(--color-on-error-container);
    border: 1px solid var(--color-error-outline);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
}
/* /Components/Accessions/AccessionReferencesTab.razor.rz.scp.css */
.accession-references-tab[b-vn8suprylp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.accession-references-tab__placeholder[b-vn8suprylp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px dashed var(--color-outline);
    border-radius: var(--border-radius);
    color: var(--color-on-surface);
}

.accession-references-tab__title[b-vn8suprylp] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-on-surface);
}

.accession-references-tab__body[b-vn8suprylp] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-on-surface);
}

.accession-references-tab__note[b-vn8suprylp] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-outline-variant);
}
/* /Components/Collections/CollectionSwitcher.razor.rz.scp.css */
.collection-switcher[b-0h7cag10fi] {
    position: relative;
    display: inline-flex;
}

.collection-switcher__trigger[b-0h7cag10fi] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background-color: transparent;
    border: 1px solid var(--color-outline);
    border-radius: var(--border-radius);
    color: var(--color-on-surface);
    font: inherit;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.collection-switcher__trigger:hover[b-0h7cag10fi] {
    background-color: var(--color-surface-container-high);
}

.collection-switcher__label[b-0h7cag10fi] {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collection-switcher__caret[b-0h7cag10fi] {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
}

.collection-switcher__menu[b-0h7cag10fi] {
    position: absolute;
    top: calc(100% + var(--space-xs));
    right: 0;
    min-width: 14rem;
    margin: 0;
    padding: var(--space-xs);
    list-style: none;
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    z-index: 300;
}

.collection-switcher__option[b-0h7cag10fi] {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius);
    cursor: pointer;
    color: var(--color-on-surface);
    transition: background-color var(--transition-fast);
}

.collection-switcher__option:hover[b-0h7cag10fi] {
    background-color: var(--color-surface-container-high);
}

.collection-switcher__option.is-current[b-0h7cag10fi] {
    background-color: var(--color-surface-container-highest, var(--color-surface-container-high));
    font-weight: 600;
}
/* /Components/ErrorAlert.razor.rz.scp.css */
/* Matches the ad-hoc save-error banner styling it replaces
   (see AccessionDetailTab.razor.css) — the error container, same tokens. */
.error-alert[b-vi2tqi4cb0] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-error-container);
    color: var(--color-on-error-container);
    border: 1px solid var(--color-error-outline);
    border-radius: var(--border-radius);
    font-size: 0.9rem;
}

.error-alert__body[b-vi2tqi4cb0] {
    flex: 1 1 auto;
}

.error-alert__message[b-vi2tqi4cb0] {
    margin: 0;
}

.error-alert__id[b-vi2tqi4cb0] {
    margin: var(--space-xs) 0 0;
    font-size: 0.8rem;
    opacity: 0.8;
}

.error-alert__dismiss[b-vi2tqi4cb0] {
    flex: 0 0 auto;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
/* /Components/Map/UpdatePointView.razor.rz.scp.css */
.update-point[b-melfjzsii6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
}

/* ── Previous coordinates (muted label in set-point phase) ── */
.update-point__coords--previous .update-point__coords-label[b-melfjzsii6] {
    color: var(--color-outline-variant);
    opacity: 0.75;
}

.update-point__coords--previous .update-point__coords-value[b-melfjzsii6] {
    color: var(--color-outline-variant);
}

/* ── Header ── */
.update-point__header[b-melfjzsii6] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.update-point__back[b-melfjzsii6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: var(--space-xs) 0;
    font-size: 0.875rem;
    color: var(--color-primary-accent);
    cursor: pointer;
    white-space: nowrap;
}

.update-point__back:hover[b-melfjzsii6] {
    text-decoration: underline;
}

.update-point__identity[b-melfjzsii6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.update-point__taxon[b-melfjzsii6] {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-on-surface);
}

/* The identifier voice: mono + ochre, like everywhere the number appears. */
.update-point__accession[b-melfjzsii6] {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-secondary);
    margin: 0;
}

/* ── Error banner ── */
.update-point__error[b-melfjzsii6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-error-container);
    color: var(--color-on-error-container);
    border: 1px solid var(--color-error-outline);
    border-radius: var(--border-radius-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
}

.update-point__error-dismiss[b-melfjzsii6] {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
}

/* ── Action buttons ── */
.update-point__actions[b-melfjzsii6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.update-point__row-actions[b-melfjzsii6] {
    display: flex;
    gap: var(--space-sm);
}

.update-point__row-actions[b-melfjzsii6]  .iris-btn {
    flex: 1;
}

/* ── Coordinates display ── */
.update-point__coords[b-melfjzsii6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline);
    border-radius: var(--border-radius-sm);
    padding: var(--space-sm) var(--space-md);
}

.update-point__coords-label[b-melfjzsii6] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-outline-variant);
    margin: 0 0 var(--space-xs);
}

.update-point__coords-row[b-melfjzsii6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.update-point__coords-key[b-melfjzsii6] {
    font-size: 0.8125rem;
    color: var(--color-outline-variant);
}

.update-point__coords-value[b-melfjzsii6] {
    font-size: 0.875rem;
    font-family: var(--font-mono, monospace);
    color: var(--color-on-surface);
}

/* ── Accuracy badge ── */
.update-point__accuracy-badge[b-melfjzsii6] {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
}

.update-point__accuracy-badge--good[b-melfjzsii6] {
    background: var(--color-ok-container);
    color: var(--color-on-ok-container);
}

.update-point__accuracy-badge--warn[b-melfjzsii6] {
    background: var(--color-warn-container);
    color: var(--color-on-warn-container);
}

.update-point__accuracy-badge--poor[b-melfjzsii6] {
    background: var(--color-error-container);
    color: var(--color-on-error-container);
}

/* ── Instruction text ── */
.update-point__instruction p[b-melfjzsii6] {
    font-size: 0.875rem;
    color: var(--color-outline-variant);
    margin: 0;
    line-height: 1.5;
}

/* ── Progress dots (average collecting) ── */
.update-point__progress[b-melfjzsii6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
}

.update-point__progress-dots[b-melfjzsii6] {
    display: flex;
    gap: var(--space-sm);
}

.update-point__progress-dot[b-melfjzsii6] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-outline);
    transition: background 0.2s;
}

.update-point__progress-dot--filled[b-melfjzsii6] {
    background: var(--color-primary);
}

.update-point__progress-label[b-melfjzsii6] {
    font-size: 0.875rem;
    color: var(--color-outline-variant);
    margin: 0;
}
/* /Components/PhotoLightbox.razor.rz.scp.css */
.photo-lightbox[b-djecgc5gl3] {
    position: fixed;
    inset: 0;
    z-index: 600;
    background-color: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none; /* suppress focus ring on the overlay */
}

.photo-lightbox__image[b-djecgc5gl3] {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    user-select: none;
}

/* ── Close button ── */
.photo-lightbox__close[b-djecgc5gl3] {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-full);
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    z-index: 1;
}

.photo-lightbox__close:hover[b-djecgc5gl3] {
    background-color: rgba(255, 255, 255, 0.28);
}

/* ── Prev / Next arrows ── */
.photo-lightbox__arrow[b-djecgc5gl3] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius-full);
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    z-index: 1;
}

.photo-lightbox__arrow:hover:not(:disabled)[b-djecgc5gl3] {
    background-color: rgba(255, 255, 255, 0.28);
}

.photo-lightbox__arrow:disabled[b-djecgc5gl3] {
    opacity: 0.3;
    cursor: default;
}

.photo-lightbox__arrow--prev[b-djecgc5gl3] {
    left: var(--space-md);
}

.photo-lightbox__arrow--next[b-djecgc5gl3] {
    right: var(--space-md);
}

/* ── Counter ── */
.photo-lightbox__counter[b-djecgc5gl3] {
    position: absolute;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
    background-color: rgba(0, 0, 0, 0.45);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius-full);
    pointer-events: none;
}
/* /Components/Settings/ThemeGlyph.razor.rz.scp.css */
/* Both icons occupy the same grid cell, so the box never resizes mid-swap and
   the outgoing glyph does not shove the incoming one sideways. */
.theme-glyph[b-7uxqjc7inz] {
    display: grid;
    place-items: center;
    width: var(--theme-glyph-size);
    height: var(--theme-glyph-size);
    flex-shrink: 0;
}

.theme-glyph__icon[b-7uxqjc7inz] {
    grid-area: 1 / 1;
    display: flex;
    transition: opacity var(--transition-base), transform var(--transition-slow);
}

/* The visible glyph. */
.theme-glyph--dark .theme-glyph__icon--sun[b-7uxqjc7inz],
.theme-glyph--light .theme-glyph__icon--moon[b-7uxqjc7inz] {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* The hidden one spins away and shrinks into the centre — the two arcs run in
   opposite directions so the swap reads as one dial turning, not two fades. */
.theme-glyph--light .theme-glyph__icon--sun[b-7uxqjc7inz] {
    opacity: 0;
    transform: rotate(-90deg) scale(0.3);
    pointer-events: none;
}

.theme-glyph--dark .theme-glyph__icon--moon[b-7uxqjc7inz] {
    opacity: 0;
    transform: rotate(90deg) scale(0.3);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .theme-glyph__icon[b-7uxqjc7inz] {
        transition: none;
    }
}
/* /Components/Settings/ThemeToggle.razor.rz.scp.css */
/* Sized and coloured to sit beside the hamburger in .header-actions — same
   44px hit target, same nav ink, so the two read as one control. NavMenu
   overrides `display` per breakpoint (hidden on the mobile bar) through a
   higher-specificity ::deep rule. */
.theme-toggle[b-o8qw83grfm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: var(--space-sm);
    border-radius: var(--border-radius-sm);
    color: var(--color-nav-muted);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

.theme-toggle:hover[b-o8qw83grfm] {
    background-color: var(--color-nav-rule);
    color: var(--color-on-nav);
}
/* /Components/Taxonomy/TaxonPicker.razor.rz.scp.css */
.taxon-picker[b-9izozyzk7d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.taxon-picker__search[b-9izozyzk7d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

@media (min-width: 640px) {
    .taxon-picker__search[b-9izozyzk7d] {
        flex-direction: row;
        align-items: stretch;
    }

    .taxon-picker__search > *[b-9izozyzk7d] {
        flex: 1 1 0;
        min-width: 0;
    }
}

.taxon-picker__toggle[b-9izozyzk7d] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.95rem;
    color: var(--color-on-surface);
}

.taxon-picker__meta[b-9izozyzk7d] {
    font-size: 0.85rem;
    color: var(--color-outline-variant);
    margin: 0;
}

.taxon-picker__meta--cap[b-9izozyzk7d] {
    color: var(--color-secondary);
}

.taxon-picker__error[b-9izozyzk7d] {
    color: var(--color-error);
    margin: 0;
}
/* /Components/Ui/Forms/IrisCheckbox.razor.rz.scp.css */
.iris-checkbox[b-ko8t53uspj] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    user-select: none;
}

/* Hide native checkbox but keep it accessible */
.iris-checkbox__input[b-ko8t53uspj] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.iris-checkbox__box[b-ko8t53uspj] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 2px solid var(--color-field-outline);
    background-color: var(--color-field);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-primary);
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.iris-checkbox:hover .iris-checkbox__box[b-ko8t53uspj] {
    border-color: var(--color-primary-edge);
}

/* Border = fill, like the solid button: a checked box is one colour. */
.iris-checkbox__input:checked ~ .iris-checkbox__box[b-ko8t53uspj] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.iris-checkbox__input:focus-visible ~ .iris-checkbox__box[b-ko8t53uspj] {
    outline: 2px solid var(--color-focus-indicator);
    outline-offset: 2px;
}

.iris-checkbox__label[b-ko8t53uspj] {
    font-size: 0.9375rem;
    color: var(--color-on-surface);
}
/* /Components/Ui/Forms/IrisDisplayRow.razor.rz.scp.css */
/* Non-editable label/value row, rendered inside the same form flow as the
   inputs so a detail sheet reads as one document. */
.iris-display-row[b-grlar14s4i] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-outline);
}

.iris-display-row:last-child[b-grlar14s4i] {
    border-bottom: none;
}

.iris-display-row__label[b-grlar14s4i] {
    flex: 0 0 auto;
    font-size: 0.85rem;
    color: var(--color-outline-variant);
}

.iris-display-row__value[b-grlar14s4i] {
    font-size: 0.9rem;
    color: var(--color-on-surface);
    text-align: right;
    word-break: break-word;
}

/* Empty value: an em-dash in muted italic, so the user can see that the field
   exists and that it is currently unset. */
.iris-display-row__value--empty[b-grlar14s4i] {
    color: var(--color-outline-variant);
    font-style: italic;
}
/* /Components/Ui/Forms/IrisFieldError.razor.rz.scp.css */
/* Per-field validation message, rendered under its input. */
.iris-field-error[b-su1927ih53] {
    color: var(--color-error);
    font-size: 0.875rem;
    padding: 0 0 var(--space-xs);
}
/* /Components/Ui/Forms/IrisFormField.razor.rz.scp.css */
/* The field row. See IrisFormField.razor for why the containment and the
   grid live on two different elements. */

.iris-form-field[b-wijwbxkhrv] {
    container-type: inline-size;
    container-name: iris-field;
}

/* container-type implies layout containment, which makes every field its own
   stacking context — so a later row would paint OVER an earlier row's
   type-ahead dropdown (IrisSuggestField), which is absolutely positioned and
   overflows the row. The dropdown is only open while the field has focus, so
   lifting the focused row above its siblings is exactly enough. */
.iris-form-field:focus-within[b-wijwbxkhrv] {
    position: relative;
    z-index: 1;
}

/* Narrow is the default: label above its control, one column. Everything a
   phone or a bottom sheet gets is described here, and the container query
   below is the only thing that widens it. */
.iris-form-field__row[b-wijwbxkhrv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xs);
    padding: var(--space-sm) 0;
    /* border-BOTTOM, not top: the read-only rows this form interleaves with
       already draw their own bottom rule, so bottoms never double up where a
       display row meets an input row. */
    border-bottom: 1px solid var(--color-outline);
}

/* No trailing rule against the enclosing card or accordion body. */
.iris-form-field:last-child .iris-form-field__row[b-wijwbxkhrv] {
    border-bottom: none;
}

/* Wide: label beside the control.

   420px is the label column plus a control wide enough to still be usable:
   11rem of label + 1.125rem of gap leaves ~230px for the input, about what a
   date, a code or a person's name needs. Below that the two-column split
   costs the control more than the alignment is worth, so the label goes back
   on top. */
@container iris-field (min-width: 26.25rem) {
    .iris-form-field__row[b-wijwbxkhrv] {
        grid-template-columns: 11rem minmax(0, 1fr);
        gap: var(--space-xs) 1.125rem;
        align-items: center;
    }

    .iris-form-field__label[b-wijwbxkhrv] {
        /* Optical: the uppercase label rides high against the input's box. */
        padding-top: 2px;
    }
}

.iris-form-field__label[b-wijwbxkhrv] {
    font-size: 0.75rem;        /* 12px */
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-outline-variant);
}

.iris-form-field__control[b-wijwbxkhrv] {
    min-width: 0;
}

.iris-form-field__hint[b-wijwbxkhrv] {
    display: block;
    margin-top: var(--space-xs);
    font-size: 0.8125rem;
    color: var(--color-outline-variant);
}
/* /Components/Ui/Forms/IrisInput.razor.rz.scp.css */
.iris-input[b-d5imun5o6b] {
    width: 100%;
    min-height: 44px;
    padding: var(--space-sm) 0.75rem;
    background-color: var(--color-field);
    border: 1px solid var(--color-field-outline);
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-on-field);
    transition: border-color var(--transition-fast);
    appearance: none;
}

.iris-input:hover:not(:disabled)[b-d5imun5o6b] {
    border-color: var(--color-primary-edge);
}

.iris-input[b-d5imun5o6b]::placeholder {
    color: var(--color-outline-variant);
}

/* Focus is ONE colour and ONE ring: border and outline are both
   --color-primary-edge and offset 0, so they meet and read as a single 3px
   edge. The edge token rather than the fill because in dark the fill is
   1.39:1 against the field and the ring would not be there at all.
   An outline rather than a box-shadow halo so forced-colors mode still sees
   it; transition:none so the ring lands whole instead of the border fading
   in behind an outline that snapped. */
.iris-input:focus[b-d5imun5o6b] {
    border-color: var(--color-primary-edge);
    outline: 2px solid var(--color-primary-edge);
    outline-offset: 0;
    transition: none;
}

/* Disabled keeps the well and dims the border below 3:1; the text stays
   legible — the value is still information. */
.iris-input:disabled[b-d5imun5o6b] {
    background-color: var(--color-field);
    border-color: var(--color-field-outline-disabled);
    color: var(--color-disabled);
    cursor: not-allowed;
}
/* /Components/Ui/Forms/IrisSearchBar.razor.rz.scp.css */
.iris-search-bar[b-ov6v0kgo1e] {
    position: relative;
    display: flex;
    align-items: center;
    height: 44px;
    background-color: var(--color-field);
    border: 1px solid var(--color-field-outline);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast);
}

.iris-search-bar:focus-within[b-ov6v0kgo1e] {
    border-color: var(--color-primary-edge);
    outline: 2px solid var(--color-primary-edge);
    outline-offset: 0;
    transition: none;
}

.iris-search-bar__icon[b-ov6v0kgo1e] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-left: var(--space-md);
    color: var(--color-outline-variant);
    pointer-events: none;
}

.iris-search-bar__input[b-ov6v0kgo1e] {
    flex: 1;
    height: 100%;
    padding: 0 var(--space-sm);
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-on-field);
    outline: none;
    appearance: none;
}

.iris-search-bar__input[b-ov6v0kgo1e]::placeholder {
    color: var(--color-outline-variant);
}

/* Remove native search cancel button */
.iris-search-bar__input[b-ov6v0kgo1e]::-webkit-search-cancel-button {
    display: none;
}

.iris-search-bar__trailing[b-ov6v0kgo1e] {
    display: flex;
    align-items: center;
    padding-right: var(--space-sm);
    gap: var(--space-xs);
    flex-shrink: 0;
}
/* /Components/Ui/Forms/IrisSelect.razor.rz.scp.css */
/* Chrome for the shared dropdown. The scale, border and focus ring are kept
   identical to .iris-input so a select and a text input read as one control
   family when they sit in adjacent IrisFormFields. */

.iris-select[b-c7rfouoivi] {
    position: relative;
    display: block;
    width: 100%;
}

.iris-select__native[b-c7rfouoivi] {
    width: 100%;
    margin: 0;
    background-color: var(--color-field);
    border: 1px solid var(--color-field-outline);
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    color: var(--color-on-field);
    text-overflow: ellipsis;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--transition-fast),
                background-color var(--transition-fast);
}

.iris-select--md .iris-select__native[b-c7rfouoivi] {
    min-height: 44px;
    padding: var(--space-sm) calc(var(--space-xl) + var(--space-xs)) var(--space-sm) 0.75rem;
    font-size: 0.875rem;
}

.iris-select--sm .iris-select__native[b-c7rfouoivi] {
    height: 40px;
    padding: 0 var(--space-xl) 0 var(--space-sm);
    font-size: 0.875rem;
}

@media (hover: hover) {
    .iris-select__native:hover:not(:disabled)[b-c7rfouoivi] {
        border-color: var(--color-primary-edge);
    }
}

.iris-select__native:focus[b-c7rfouoivi],
.iris-select__native:focus-visible[b-c7rfouoivi] {
    border-color: var(--color-primary-edge);
    outline: 2px solid var(--color-primary-edge);
    outline-offset: 0;
    transition: none;
}

/* Disabled keeps the well and dims the border below 3:1; the text stays
   legible — the value is still information. */
.iris-select__native:disabled[b-c7rfouoivi] {
    background-color: var(--color-field);
    border-color: var(--color-field-outline-disabled);
    color: var(--color-disabled);
    cursor: not-allowed;
}

/* Nothing chosen yet: the closed control reads as placeholder text while the
   popup rows keep full contrast. */
.iris-select--empty .iris-select__native[b-c7rfouoivi] {
    color: var(--color-outline-variant);
}

/* ::deep so options handed in as ChildContent — which carry the caller's CSS
   scope, not ours — are covered too. These colours reach the OS-rendered
   fallback popup where the platform honours them; color-scheme (colours.css)
   keeps that popup on the right side of light/dark either way. */
.iris-select__native[b-c7rfouoivi]  option {
    color: var(--color-on-field);
    background-color: var(--color-field);
}

/* Where the browser supports the styleable picker (Chromium), opt in: the
   popup becomes ours — overlay surface, token colours, a checkmark on the
   selected option — instead of the OS list with its built-in blue highlight.
   Everything in this block is progressive enhancement; other browsers keep
   the native picker above. */
@supports (appearance: base-select) {
    /* Base appearance turns the closed control into a flex box whose value
       stretches to the full height and then sits at the top of it — hence
       align-items, which puts the value back on the field's middle line.
       nowrap + overflow keep a long value on one line instead of growing
       the row. */
    .iris-select__native[b-c7rfouoivi] {
        appearance: base-select;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
    }

    /* text-overflow no longer reaches the value in base appearance, so an
       over-long one is faded out over the chevron gutter rather than left
       to run under the chevron. Painted before the chevron span, so the
       glyph stays on top of it. */
    .iris-select[b-c7rfouoivi]::before {
        content: '';
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: 1px;
        width: 3rem;
        border-radius: 0 var(--border-radius) var(--border-radius) 0;
        background: linear-gradient(to right, transparent, var(--color-field) 55%);
        pointer-events: none;
    }

    /* Our chevron stays; the UA's picker icon would double it. */
    .iris-select__native[b-c7rfouoivi]::picker-icon {
        display: none;
    }

    .iris-select__native[b-c7rfouoivi]::picker(select) {
        appearance: base-select;
        background-color: var(--color-surface-bright);
        color: var(--color-on-surface);
        border: 1px solid var(--color-outline);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-lg);
        padding: var(--space-xs);
        margin-top: 2px;
    }

    .iris-select__native[b-c7rfouoivi]  option {
        background-color: transparent;
        color: var(--color-on-surface);
        padding: var(--space-sm) 0.75rem;
        border-radius: calc(var(--border-radius) - 2px);
        font-size: 0.875rem;
    }

    /* Hover is derived the same way as buttons: the row leans toward ink. */
    .iris-select__native[b-c7rfouoivi]  option:hover,
    .iris-select__native[b-c7rfouoivi]  option:focus-visible {
        background-color: color-mix(in oklab, var(--color-surface-bright) 88%, var(--color-on-surface));
    }

    /* The chosen row speaks in the brand-as-text colour; the UA draws its
       checkmark (::checkmark) in currentColor beside it. */
    .iris-select__native[b-c7rfouoivi]  option:checked {
        color: var(--color-primary-accent);
        font-weight: 500;
    }
}

.iris-select__chevron[b-c7rfouoivi] {
    position: absolute;
    top: 50%;
    right: var(--space-md);
    display: flex;
    transform: translateY(-50%);
    color: var(--color-outline-variant);
    pointer-events: none;
    transition: color var(--transition-fast);
}

.iris-select--sm .iris-select__chevron[b-c7rfouoivi] {
    right: var(--space-sm);
}

.iris-select__native:focus + .iris-select__chevron[b-c7rfouoivi] {
    color: var(--color-primary-edge);
}

.iris-select--disabled .iris-select__chevron[b-c7rfouoivi] {
    opacity: 0.5;
}
/* /Components/Ui/Forms/IrisSuggestField.razor.rz.scp.css */
/* IrisSuggestField — a type-ahead over a caller-loaded option list. The text
   control IS an <IrisInput>, so it carries the design system's .iris-input
   styling itself; the dropdown is an absolutely-positioned list anchored under
   the input. */

.iris-suggest[b-02169nsbxt] {
    position: relative;
}

/* ::deep is required: .iris-suggest__input is handed to <IrisInput> via Class,
   so it lands on the CHILD's <input>, which carries IrisInput's scope
   attribute — not this component's. A plain rule here would never match. */
.iris-suggest[b-02169nsbxt]  .iris-suggest__input {
    width: 100%;
}

.iris-suggest__list[b-02169nsbxt] {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    max-height: 18rem;
    overflow-y: auto;
    background: var(--color-surface-container-lowest);
    border: 1px solid var(--color-outline);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.iris-suggest__option[b-02169nsbxt] {
    padding: var(--space-sm, 0.5rem) var(--space-md, 0.75rem);
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--color-on-surface);
}

.iris-suggest__option:hover[b-02169nsbxt] {
    background: var(--color-surface-container);
}

.iris-suggest__empty[b-02169nsbxt] {
    padding: var(--space-sm, 0.5rem) var(--space-md, 0.75rem);
    font-size: 0.9rem;
    color: var(--color-outline-variant);
}
/* /Components/Ui/IrisAccordion.razor.rz.scp.css */
.iris-accordion[b-knoqmbmgmd] {
    border-radius: var(--border-radius);
    overflow: hidden;
}

.iris-accordion + .iris-accordion[b-knoqmbmgmd] {
    margin-top: var(--space-sm);
}

.iris-accordion__header[b-knoqmbmgmd] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    cursor: pointer;
    list-style: none;
    /* The header is the brand container: moss in light, and in dark it is
       #17362A itself — the one anchor the whole dark theme is built around. */
    background-color: var(--color-primary-container);
    user-select: none;
}

.iris-accordion__header[b-knoqmbmgmd]::-webkit-details-marker {
    display: none;
}

.iris-accordion__title[b-knoqmbmgmd] {
    flex: 1;
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--color-on-primary-container);
}

.iris-accordion__info[b-knoqmbmgmd] {
    font-size: 0.8125rem;
    color: var(--color-outline-variant);
}

.iris-accordion__arrow[b-knoqmbmgmd] {
    color: var(--color-outline-variant);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.iris-accordion[open] .iris-accordion__arrow[b-knoqmbmgmd] {
    transform: rotate(180deg);
}

.iris-accordion__body[b-knoqmbmgmd] {
    padding: var(--space-md);
    border-top: 1px solid var(--color-outline);
    background-color: var(--color-surface);
}
/* /Components/Ui/IrisBadge.razor.rz.scp.css */
.iris-badge[b-q28qq0cx10] {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-sm);
    border-radius: var(--border-radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}

.iris-badge--ok[b-q28qq0cx10] {
    background-color: var(--color-ok-container);
    color: var(--color-on-ok-container);
    border-color: var(--color-ok-outline);
}

.iris-badge--warn[b-q28qq0cx10] {
    background-color: var(--color-warn-container);
    color: var(--color-on-warn-container);
    border-color: var(--color-warn-outline);
}

.iris-badge--bad[b-q28qq0cx10] {
    background-color: var(--color-error-container);
    color: var(--color-on-error-container);
    border-color: var(--color-error-outline);
}

.iris-badge--unknown[b-q28qq0cx10] {
    background-color: var(--color-neutral-container);
    color: var(--color-on-neutral-container);
    border-color: var(--color-neutral-outline);
}
/* /Components/Ui/IrisBottomSheet.razor.rz.scp.css */
.iris-bottom-sheet[b-95pq1vphbt] {
    position: fixed;
    inset: 0;
    z-index: 450;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Set-point mode: let pointer events pass through the overlay so the map can be panned */
.iris-bottom-sheet--passthrough[b-95pq1vphbt] {
    pointer-events: none;
}

.iris-bottom-sheet--passthrough .iris-bottom-sheet__panel[b-95pq1vphbt] {
    pointer-events: auto;
}

.iris-bottom-sheet__backdrop[b-95pq1vphbt] {
    position: absolute;
    inset: 0;
    background-color: var(--color-scrim);
}

.iris-bottom-sheet__panel[b-95pq1vphbt] {
    position: relative;
    /* A sheet is a page edge sliding in, not floating chrome — it sits at
       card level, unlike the dialog's overlay step. */
    background-color: var(--color-surface);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    max-height: 75dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    /* Sits above bottom nav */
    /* margin-bottom: var(--nav-height-mobile); */
}

@media (min-width: 48rem) {
    .iris-bottom-sheet[b-95pq1vphbt] {
        top: var(--nav-height-desktop);
        flex-direction: row;
        justify-content: flex-end;
        align-items: stretch;
    }

    .iris-bottom-sheet__backdrop[b-95pq1vphbt] {
        display: none;
    }

    .iris-bottom-sheet__panel[b-95pq1vphbt] {
        width: 400px;
        height: 100%;
        max-height: none;
        border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
        margin-bottom: 0;
        animation: iris-sheet-slide-right-b-95pq1vphbt var(--transition-slow) forwards;
    }

    .iris-bottom-sheet__handle[b-95pq1vphbt] {
        display: none;
    }
}

@keyframes iris-sheet-slide-right-b-95pq1vphbt {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.iris-bottom-sheet__handle[b-95pq1vphbt] {
    width: 36px;
    height: 4px;
    border-radius: var(--border-radius-full);
    background-color: var(--color-outline);
    margin: var(--space-sm) auto var(--space-xs);
    flex-shrink: 0;
}

.iris-bottom-sheet__header[b-95pq1vphbt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md) var(--space-sm);
    border-bottom: 1px solid var(--color-outline);
    flex-shrink: 0;
}

.iris-bottom-sheet__title[b-95pq1vphbt] {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-on-surface);
    margin: 0;
}

.iris-bottom-sheet__close[b-95pq1vphbt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius);
    background: transparent;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.iris-bottom-sheet__close:hover[b-95pq1vphbt] {
    background-color: var(--color-surface-container-high);
}

.iris-bottom-sheet__body[b-95pq1vphbt] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
}
/* /Components/Ui/IrisBreadcrumb.razor.rz.scp.css */
.iris-breadcrumb__list[b-fdjal473rw] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}

.iris-breadcrumb__item[b-fdjal473rw] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.iris-breadcrumb__separator[b-fdjal473rw] {
    color: var(--color-outline-variant);
}

/* In the trail, colour is affordance: ochre = you can go there, ink = you
   are here. Identity rides on the face instead — an identifier crumb is
   mono whichever state it is in. */
.iris-breadcrumb__link[b-fdjal473rw] {
    color: var(--color-secondary);
    text-decoration: none;
}

.iris-breadcrumb__link:hover[b-fdjal473rw] {
    color: var(--color-secondary);
    text-decoration: underline;
}

.iris-breadcrumb__current[b-fdjal473rw] {
    color: var(--color-on-surface);
    font-weight: 500;
}

.iris-breadcrumb__id[b-fdjal473rw] {
    font-family: var(--font-mono);
}
/* /Components/Ui/IrisButton.razor.rz.scp.css */
.iris-btn[b-y7bq76h0eh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.iris-btn:disabled[b-y7bq76h0eh] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Variants ── */

/* Border = fill: a solid button is one unbroken colour in both themes —
   the primary inverts exactly, forest/white by day, paper/forest by night.
   Hover is derived, not declared: the fill leans 12% toward its own label
   colour, so every variant in every theme gets a visible step — including
   the dark paper fill, where a declared "lighter" has nowhere to go. */
.iris-btn--primary[b-y7bq76h0eh] {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
}

/* The primary leans harder (20%) than the other variants: a Save button's
   hover has to register at a glance on the paper fill. */
.iris-btn--primary:hover[b-y7bq76h0eh] {
    background-color: color-mix(in oklab, var(--color-primary) 80%, var(--color-on-primary));
    color: var(--color-on-primary);
    border-color: transparent;
}

.iris-btn--secondary[b-y7bq76h0eh] {
    background-color: var(--color-secondary-container);
    color: var(--color-on-secondary-container);
    border-color: var(--color-secondary-container);
}

.iris-btn--secondary:hover[b-y7bq76h0eh] {
    background-color: color-mix(in oklab, var(--color-secondary-container) 88%, var(--color-on-secondary-container));
    border-color: transparent;
    color: var(--color-on-secondary-container);
}


/* A quiet neutral rule with full ink — chrome until pressed. The border is
   the shared 3:1 control boundary, not a brand line: three button variants,
   three distinct constructions. */
.iris-btn--outline[b-y7bq76h0eh] {
    background-color: transparent;
    color: var(--color-on-surface);
    border-color: var(--color-neutral-outline);
}

.iris-btn--outline:hover[b-y7bq76h0eh] {
    background-color: color-mix(in srgb, var(--color-on-surface) 8%, transparent);
    color: var(--color-on-surface);
}

.iris-btn--ghost[b-y7bq76h0eh] {
    background-color: transparent;
    color: var(--color-on-surface-variant);
    border-color: transparent;
}

.iris-btn--ghost:hover[b-y7bq76h0eh] {
    background-color: var(--color-surface-container);
    color: var(--color-on-surface);
}

/* ── Sizes ── */

.iris-btn--sm[b-y7bq76h0eh] {
    min-height: 36px;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.8125rem;
}

.iris-btn--md[b-y7bq76h0eh] {
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
}

.iris-btn--lg[b-y7bq76h0eh] {
    min-height: 52px;
    padding: var(--space-sm) var(--space-lg);
    font-size: 1rem;
}

/* Full-width helper */
.iris-btn--full[b-y7bq76h0eh] {
    width: 100%;
}
/* /Components/Ui/IrisCard.razor.rz.scp.css */
.iris-card[b-0j28escaun] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.iris-card--elevated[b-0j28escaun] {
    box-shadow: var(--shadow);
}
/* /Components/Ui/IrisChip.razor.rz.scp.css */
.iris-chip[b-etg6j0k438] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--border-radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    background-color: var(--color-surface);
    color: var(--color-on-surface-variant);
    border: 1.5px solid var(--color-outline);
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.iris-chip:hover[b-etg6j0k438] {
    border-color: var(--color-primary-edge);
    color: var(--color-primary-accent);
}

.iris-chip--active[b-etg6j0k438] {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary-edge);
}

.iris-chip--active:hover[b-etg6j0k438] {
    background-color: var(--color-primary);
    border-color: var(--color-primary-edge);
    color: var(--color-on-primary);
}
/* /Components/Ui/IrisDialog.razor.rz.scp.css */
.iris-dialog[b-2m44zqdprg] {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iris-dialog__backdrop[b-2m44zqdprg] {
    position: absolute;
    inset: 0;
    background-color: var(--color-scrim);
}

.iris-dialog__panel[b-2m44zqdprg] {
    position: relative;
    /* Floating chrome sits one step above the card: in dark that step is
       lightness (#2E3D37) because shadows don't read on near-black. */
    background-color: var(--color-surface-bright);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    width: min(420px, calc(100% - var(--space-md) * 2));
    max-height: 80dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.iris-dialog__header[b-2m44zqdprg] {
    padding: var(--space-md) var(--space-md) 0;
}

.iris-dialog__title[b-2m44zqdprg] {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-on-surface);
    margin: 0;
}

.iris-dialog__body[b-2m44zqdprg] {
    padding: var(--space-md);
    flex: 1;
    overflow-y: auto;
    color: var(--color-on-surface);
}

.iris-dialog__body p[b-2m44zqdprg] {
    margin: 0 0 var(--space-sm);
    line-height: 1.45;
}

.iris-dialog__footer[b-2m44zqdprg] {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    padding: 0 var(--space-md) var(--space-md);
}
/* /Components/Ui/IrisFilterPanel.razor.rz.scp.css */
.iris-filter-panel[b-nay3rn7o5k] {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
}

.iris-filter-panel__backdrop[b-nay3rn7o5k] {
    position: absolute;
    inset: 0;
    background-color: var(--color-scrim);
}

.iris-filter-panel__sheet[b-nay3rn7o5k] {
    position: relative;
    margin-top: auto;
    background-color: var(--color-surface);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    max-height: 80dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

@media (min-width: 48rem) {
    .iris-filter-panel__sheet[b-nay3rn7o5k] {
        margin: auto;
        width: 480px;
        border-radius: var(--border-radius-lg);
        max-height: 70dvh;
    }
}

.iris-filter-panel__header[b-nay3rn7o5k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-md) var(--space-sm);
    border-bottom: 1px solid var(--color-outline);
    flex-shrink: 0;
}

.iris-filter-panel__title[b-nay3rn7o5k] {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-on-surface);
    margin: 0;
}

.iris-filter-panel__close[b-nay3rn7o5k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius);
    background: var(--color-surface-container);
    border: 1px solid var(--color-outline);
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.iris-filter-panel__close:hover[b-nay3rn7o5k] {
    background-color: var(--color-surface-container-high);
}

.iris-filter-panel__body[b-nay3rn7o5k] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.iris-filter-panel__group[b-nay3rn7o5k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.iris-filter-panel__group-label[b-nay3rn7o5k] {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-outline-variant);
}

.iris-filter-panel__chips[b-nay3rn7o5k] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.iris-filter-panel__footer[b-nay3rn7o5k] {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-top: 1px solid var(--color-outline);
    flex-shrink: 0;
}

.iris-filter-panel__footer .iris-btn:last-child[b-nay3rn7o5k] {
    flex: 1;
}
/* /Components/Ui/IrisLinkButton.razor.rz.scp.css */
/* Task item rows inside the task items card */
.link-button-row[b-8h4u6w109m] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-outline);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.link-button-row:last-child[b-8h4u6w109m] {
    border-bottom: none;
}

.link-button-row:hover[b-8h4u6w109m] {
    background-color: var(--color-background);
}

.link-button-row--done[b-8h4u6w109m] {
    opacity: 0.55;
}

.link-button-row--done .link-button-row__taxon[b-8h4u6w109m] {
    text-decoration: line-through;
}

.link-button-row__body[b-8h4u6w109m] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.link-button-row__taxon[b-8h4u6w109m] {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-button-row__meta[b-8h4u6w109m] {
    font-size: 0.8rem;
    color: var(--color-on-surface-variant);
}

.link-button-row__chevron[b-8h4u6w109m] {
    flex: 0 0 auto;
    color: var(--color-outline-variant);
}
/* /Components/Ui/IrisListRow.razor.rz.scp.css */
.iris-list-row[b-ffdfcq3cve] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-md);
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-outline);
    cursor: pointer;
    text-align: left;
    min-height: 60px;
    transition: background-color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.iris-list-row:last-child[b-ffdfcq3cve] {
    border-bottom: none;
}

.iris-list-row:hover[b-ffdfcq3cve] {
    background-color: var(--color-background);
}

.iris-list-row--alert[b-ffdfcq3cve] {
    border-left: 3px solid var(--color-secondary);
}

.iris-list-row__main[b-ffdfcq3cve] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.iris-list-row__species[b-ffdfcq3cve] {
    font-size: 0.9375rem;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iris-list-row__meta[b-ffdfcq3cve] {
    font-size: 0.8rem;
    color: var(--color-outline-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iris-list-row__arrow[b-ffdfcq3cve] {
    color: var(--color-outline-variant);
    flex-shrink: 0;
}
/* /Components/Ui/IrisPagination.razor.rz.scp.css */
.iris-pagination[b-ksqei868vt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-md) 0;
}

.iris-pagination__btn[b-ksqei868vt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--space-sm);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 500;
    background-color: var(--color-background);
    color: var(--color-on-surface-variant);
    border: 1px solid var(--color-outline);
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.iris-pagination__btn:hover:not(:disabled)[b-ksqei868vt] {
    border-color: var(--color-primary-edge);
    color: var(--color-primary-accent);
}

.iris-pagination__btn--active[b-ksqei868vt] {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary-edge);
}

.iris-pagination__btn--active:hover[b-ksqei868vt] {
    background-color: var(--color-primary);
    border-color: var(--color-primary-edge);
    color: var(--color-on-primary);
}

.iris-pagination__btn:disabled[b-ksqei868vt] {
    opacity: 0.35;
    cursor: not-allowed;
}
/* /Components/Ui/IrisSaveBar.razor.rz.scp.css */
/* A card-level bar, not floating chrome: same surface, hairline and radius as the
   panels it sits above, so it reads as part of the record rather than as an overlay. */
.iris-save-bar[b-c9tlvz4o59] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
}

/* The offset is NOT decoration. On desktop the chrome bar is itself sticky at
   top:0, 56px tall and z-index 300, so a bar that also sticks at 0 spends the whole
   scroll hidden behind it — sticky in fact, invisible in practice. Clear the nav and
   keep a breathing gap under it. On mobile the nav is fixed to the BOTTOM, so the
   top edge is free and the gap alone is enough.

   The z-index only has to clear the field cards it scrolls over; the nav is meant to
   win, and dialogs and sheets sit far above both. */
.iris-save-bar--sticky[b-c9tlvz4o59] {
    position: sticky;
    top: var(--space-sm);
    z-index: 2;
}

/* Same breakpoint the layout switches the nav from bottom bar to top bar on. */
@media (min-width: 48rem) {
    .iris-save-bar--sticky[b-c9tlvz4o59] {
        top: calc(var(--nav-height-desktop) + var(--space-sm));
    }
}

/* BASELINE, not centre. Centring aligns the dot to the middle of the text's line
   box, which is leading — at body's line-height 1.6 that box is 21px tall for 13px
   of text, and the words sit off its centre by about a pixel. Baseline ignores
   leading entirely: the dot is 7px and Roboto's x-height at this size is 6.9px, so
   sitting it on the baseline lands it on the lowercase band exactly, like a letter.
   That also makes the alignment immune to any later line-height change. */
.iris-save-bar__status[b-c9tlvz4o59] {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    /* Below body size: this is a state read at a glance, not prose. */
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
}

.iris-save-bar__status--dirty[b-c9tlvz4o59] {
    color: var(--color-on-surface);
}

/* 7px is not arbitrary: it is Roboto's x-height at 0.8125rem, which is what lets the
   baseline alignment above read as a letter rather than as a floating bullet. */
.iris-save-bar__dot[b-c9tlvz4o59] {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: var(--border-radius-full);
    background-color: var(--color-tertiary);
}

.iris-save-bar__spacer[b-c9tlvz4o59] {
    flex: 1;
}
/* /Components/Ui/IrisSegmentControl.razor.rz.scp.css */
.iris-segment[b-untqzd0pv5] {
    display: inline-flex;
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: var(--border-radius);
    padding: 3px;
    gap: 2px;
}

.iris-segment__btn[b-untqzd0pv5] {
    flex: 1;
    padding: var(--space-xs) var(--space-md);
    border-radius: calc(var(--border-radius) - 2px);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-on-surface-variant);
    background: none;
    border: none;
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
    white-space: nowrap;
}

.iris-segment__btn:hover[b-untqzd0pv5] {
    color: var(--color-on-primary);
    background-color: var(--color-primary);
}

.iris-segment__btn--active[b-untqzd0pv5] {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    /* inset ring rather than a border, so the active segment gains its 3:1
       boundary against the track without changing the control's metrics */
    box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--color-primary-edge);
}
/* /Components/Ui/IrisSpinner.razor.rz.scp.css */
.iris-spinner[b-ibqd8lckqx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-md);
    color: var(--color-on-surface-variant);
}

.iris-spinner__disc[b-ibqd8lckqx] {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    border-radius: var(--border-radius-full);
    /* Track in the dim surface, one arc in the accent — the gap is what reads as motion. */
    border: 2px solid var(--color-surface-dim);
    border-top-color: var(--color-primary);
    animation: iris-spinner-turn-b-ibqd8lckqx 0.8s linear infinite;
}

.iris-spinner__label[b-ibqd8lckqx] {
    font-size: 0.875rem;
}

@keyframes iris-spinner-turn-b-ibqd8lckqx {
    to { transform: rotate(360deg); }
}

/* Motion is the only thing saying "still working", so it does not vanish entirely — it
   slows to a pulse the vestibular-sensitive setting allows. */
@media (prefers-reduced-motion: reduce) {
    .iris-spinner__disc[b-ibqd8lckqx] {
        animation: iris-spinner-fade-b-ibqd8lckqx 1.6s ease-in-out infinite;
        border-top-color: var(--color-primary);
    }

    @keyframes iris-spinner-fade-b-ibqd8lckqx {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
    }
}
/* /Components/Ui/IrisTabs.razor.rz.scp.css */
.iris-tabs[b-az0e4f2bi7] {
    display: flex;
    border-bottom: 1px solid var(--color-outline-brand);
    gap: var(--space-xs);
}

/* A tab is text on the strip, never a filled chip: muted when idle, full
   ink when active, and the sage/leaf bar does the pointing. */
.iris-tabs__tab[b-az0e4f2bi7] {
    position: relative;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-outline-variant);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--transition-fast);
    white-space: nowrap;
}

.iris-tabs__tab[b-az0e4f2bi7]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    /* the edge, not the fill: the active bar is a MARK, so it is leaf in
       light and sage in dark — a bar in the fill colour would read as ink
       in light and vanish against the strip in dark */
    background-color: var(--color-primary-edge);
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transition: transform var(--transition-fast);
}

.iris-tabs__tab:hover[b-az0e4f2bi7] {
    color: var(--color-on-surface);
}

.iris-tabs__tab--active[b-az0e4f2bi7] {
    color: var(--color-on-surface);
}

.iris-tabs__tab--active[b-az0e4f2bi7]::after {
    transform: scaleX(1);
}
/* /Components/Ui/IrisTaskRow.razor.rz.scp.css */
.iris-task-row[b-707h4gyoi8] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-outline);
    cursor: pointer;
    min-height: 60px;
    transition: background-color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.iris-task-row:last-child[b-707h4gyoi8] {
    border-bottom: none;
}

.iris-task-row:hover[b-707h4gyoi8] {
    background-color: var(--color-background);
}

.iris-task-row--alert[b-707h4gyoi8] {
    border-left: 3px solid var(--color-secondary);
}

.iris-task-row--done .iris-task-row__name[b-707h4gyoi8] {
    text-decoration: line-through;
    color: var(--color-outline-variant);
}

.iris-task-row--done .iris-task-row__meta[b-707h4gyoi8] {
    color: var(--color-outline-variant);
    opacity: 0.7;
}

/* Checkbox button */
.iris-task-row__check[b-707h4gyoi8] {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--color-outline);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.iris-task-row__check:hover[b-707h4gyoi8] {
    border-color: var(--color-primary-edge);
}

.iris-task-row__check--checked[b-707h4gyoi8] {
    background-color: var(--color-primary);
    border-color: var(--color-primary-edge);
    color: white;
}

.iris-task-row__body[b-707h4gyoi8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.iris-task-row__name[b-707h4gyoi8] {
    font-size: 0.9375rem;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iris-task-row__meta[b-707h4gyoi8] {
    font-size: 0.8rem;
    color: var(--color-outline-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/Ui/UnsavedChangesGuard.razor.rz.scp.css */
/* IrisDialog already spaces its body; the single paragraph must not add a
   second margin on top of it. Moved here with the markup — the rule only ever
   matched because scoped CSS stamps the <p>, and the <p> now belongs to this
   component. */
.unsaved-changes-guard p[b-2l3tcdvovp] {
    margin: 0;
}
/* /Layout/AuthLayout.razor.rz.scp.css */
.auth-layout[b-xteayr4hkl] {
    position: relative;
    min-height: 100svh;
}

/* Theme toggle floats over the top-right corner */
.auth-layout__theme[b-xteayr4hkl] {
    position: fixed;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 10;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-l8od1gyafv] {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

/* Mobile: content clears bottom nav */
.main-content[b-l8od1gyafv] {
    flex: 1;
    padding-top: var(--space-md);
    padding-inline: var(--space-md);
    padding-bottom: calc(var(--nav-height-mobile) + var(--space-lg));
    width: 100%;
}

/* Desktop: content clears top nav, centred with max-width */
@media (min-width: 48rem) {
    .main-content[b-l8od1gyafv] {
        padding-top: calc(var(--nav-height-desktop) + var(--space-lg));
        padding-inline: var(--space-xl);
        padding-bottom: var(--space-xl);
        max-width: var(--max-content-width);
        margin-inline: auto;
    }
}
/* /Layout/MapLayout.razor.rz.scp.css */
.main-content[b-11uy7y9u3w] {
    min-height: calc(100svh - var(--nav-height-mobile));
}

@media (min-width: var(--breakpoint-desktop)) {
    .main-content[b-11uy7y9u3w] {
        min-height: calc(100svh - var(--nav-height-desktop));
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */

/* =========================================================
   BOTTOM NAVIGATION — mobile (default)

   .app-header IS the bar, pinned to the bottom of the VIEWPORT. It must
   be position:fixed, not absolute: .page is position:static, so an
   absolute bar resolves against the initial containing block and
   bottom:0 lands one viewport-height down the DOCUMENT — the bar then
   sits stranded mid-screen as soon as you scroll past it.

   .main-content reserves --nav-height-mobile of bottom padding so the
   bar never covers the end of a page.

   Do NOT set display:none on .app-header: the sibling <SideMenu> panel
   is fixed and would survive it, but the bar itself would vanish.
   ========================================================= */

.app-header[b-vqs0ij0b75] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--nav-height-mobile);
    z-index: 300;
    background-color: var(--color-nav-bg);
    border-top: 1px solid var(--color-nav-rule);
    /* The bar separates from the page with a rule, as the design does — a
       drop shadow that read as depth on a dark bar reads as grime on a
       light one. */
}

/* Nav: fixed bottom bar */
.app-nav[b-vqs0ij0b75] {
    /* CSS grid: equal-width columns, items fill the full bar */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    height: 100%;
}

.header-actions[b-vqs0ij0b75] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    flex-grow: 1;
}

/* Nav items: text centered vertically and horizontally within each cell */
[b-vqs0ij0b75] .nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    color: var(--color-nav-muted);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1;
    height: 100%;
    transition: color var(--transition-fast);
    border-bottom: transparent solid 2px;
    transition: border-bottom 0.3s ease-in-out;
    -webkit-tap-highlight-color: transparent;
}

[b-vqs0ij0b75] .nav-item:hover {
    color: var(--color-on-nav);
    border-bottom: var(--color-on-nav) solid 2px;
    text-decoration: none;
}

/* Active state: gold text + gold underline at bottom of nav bar */
[b-vqs0ij0b75] .nav-item.active {
    color: var(--color-nav-accent);
    border-bottom: solid 2px var(--color-nav-accent);
}

/* Hidden on the mobile bar, shown on desktop. Scoped through
   .header-actions so this outranks ThemeToggle's own scoped rules — a bare
   `::deep .theme-toggle` ties with them on specificity. */
.header-actions[b-vqs0ij0b75]  .theme-toggle {
    display: none;
}

/* =========================================================
   TOP NAVIGATION — desktop (≥ 48rem)
   ========================================================= */

@media (min-width: 48rem) {
    /* Header becomes a sticky top bar using CSS grid:
       [brand] [nav links — fills remaining space] [actions] */
    .app-header[b-vqs0ij0b75] {
        position: sticky;
        top: 0;
        bottom: auto;   /* clear the mobile rule's bottom:0 */
        left: 0;
        right: 0;
        height: var(--nav-height-desktop);
        z-index: 300;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        padding-inline: var(--space-xl);
        border-top: none;
        border-bottom: 1px solid var(--color-nav-rule);
    }

    /* Nav: inline in header, no longer fixed.
       CSS grid: auto-width columns, left-aligned, large gap. */
    .app-nav[b-vqs0ij0b75] {
        justify-content: start;
        align-items: stretch;
    }

    .app-nav > :last-child[b-vqs0ij0b75] {
        margin-left: auto; /* Pushes last item to the right */
    }

    .header-actions[b-vqs0ij0b75]  .theme-toggle {
        display: inline-flex;
    }

    .header-actions[b-vqs0ij0b75] {
        justify-content: end;

    }

    /* Desktop nav items: natural width, full header height */
    [b-vqs0ij0b75] .nav-item {
        height: var(--nav-height-desktop);
        font-size: 0.9375rem; /* 15px */
        flex-grow: 0;
        padding: 0 var(--space-xl);
    }

    .nav-item.active[b-vqs0ij0b75]::after {
        height: 2px;
        background: var(--color-nav-accent);
    }

}

/* =========================================================
   BRAND (desktop only)
   ========================================================= */

.brand[b-vqs0ij0b75] {
    display: none; /* hidden on mobile */
}

@media (min-width: 48rem) {
    .brand[b-vqs0ij0b75] {
        display: block;
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 1.25rem;
        color: var(--color-on-nav);
        text-decoration: none;
        letter-spacing: 0.04em;
        transition: opacity var(--transition-fast);
        white-space: nowrap;
        margin-right: var(--space-xl);
    }

    .brand:hover[b-vqs0ij0b75] {
        opacity: 0.85;
        color: var(--color-on-nav);
        text-decoration: none;
    }

    .brand__lite[b-vqs0ij0b75] {
        color: var(--color-nav-accent);
        font-weight: 500;
    }
}

/* =========================================================
   HEADER ACTIONS 
   ========================================================= */
@media (min-width: 48rem) {
    /* Header actions: shown on desktop */

}

/* =========================================================
   HAMBURGER TOGGLE (desktop, inside .header-actions)
   ========================================================= */

.side-menu-toggle[b-vqs0ij0b75] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: var(--space-sm);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    color: var(--color-nav-muted);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

.side-menu-toggle:hover[b-vqs0ij0b75] {
    background-color: var(--color-nav-rule);
    color: var(--color-on-nav);
}

.side-menu-toggle:focus-visible[b-vqs0ij0b75] {
    outline: 2px solid var(--color-focus-indicator);
    outline-offset: 2px;
}

.side-menu-toggle span[b-vqs0ij0b75] {
    display: block;
    width: 22px;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
    transform-origin: center;
    transition:
        transform var(--transition-slow),
        opacity var(--transition-base),
        width var(--transition-base);
}

.side-menu-toggle.is-open span:nth-child(1)[b-vqs0ij0b75] {
    transform: translateY(7px) rotate(45deg);
}

.side-menu-toggle.is-open span:nth-child(2)[b-vqs0ij0b75] {
    opacity: 0;
    width: 0;
}

.side-menu-toggle.is-open span:nth-child(3)[b-vqs0ij0b75] {
    transform: translateY(-7px) rotate(-45deg);
}
/* /Layout/SideMenu.razor.rz.scp.css */
/* =========================================================
   BACKDROP
   ========================================================= */

.side-menu-backdrop[b-ttdk8jfr0p] {
    position: fixed;
    inset: 0;
    z-index: 250; /* Below the navbar so the close button is clickable*/
    background-color: var(--color-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
}

.side-menu-backdrop.is-open[b-ttdk8jfr0p] {
    opacity: 1;
    pointer-events: auto;
}

/* =========================================================
   SLIDE-IN PANEL
   ========================================================= */

.side-menu-panel[b-ttdk8jfr0p] {
    position: fixed;
    bottom: var(--nav-height-mobile);
    right: 0;
    height: calc(100dvh - var(--nav-height-mobile));
    width: 350px;
    max-width: 85vw;
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-top: var(--space-xl);
    padding-inline: var(--space-md);
    padding-bottom: var(--space-lg);
    background-color: var(--color-nav-bg);
    border-left: 1px solid var(--color-nav-rule);
    box-shadow: var(--shadow);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
}

@media (min-width: 48rem) {
    .side-menu-panel[b-ttdk8jfr0p] {
        position: fixed;
        bottom: 0;
        top: var(--nav-height-desktop);
        height: calc(100dvh - var(--nav-height-desktop));
    }
}

.side-menu-panel.is-open[b-ttdk8jfr0p] {
    transform: translateX(0);
}

/* Panel close button */
.panel-close[b-ttdk8jfr0p] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: var(--space-md);
}

.panel-close-btn[b-ttdk8jfr0p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius);
    background: var(--color-surface-container);
    border: 1px solid var(--color-outline);
    color: var(--color-on-nav);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.panel-close-btn:hover[b-ttdk8jfr0p] {
    background-color: var(--color-surface-container-high);
}

.panel-close-btn:focus-visible[b-ttdk8jfr0p] {
    outline: 2px solid var(--color-focus-indicator);
    outline-offset: 2px;
}

/* Panel user info */
.panel-user[b-ttdk8jfr0p] {
    padding: var(--space-md);
    background: var(--color-background);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-outline);
    margin-bottom: var(--space-md);
}

.panel-user-name[b-ttdk8jfr0p] {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-primary-accent);
    margin-bottom: 2px;
}

.panel-user-institution[b-ttdk8jfr0p] {
    font-size: 0.8rem;
    color: var(--color-outline-variant);
}

/* Panel links */
[b-ttdk8jfr0p] .panel-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--border-radius);
    color: var(--color-on-nav);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border: none;
    background: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    min-height: 44px;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

[b-ttdk8jfr0p] .panel-link:hover {
    background-color: var(--color-surface-container);
    color: var(--color-on-nav);
    text-decoration: none;
}

[b-ttdk8jfr0p] .panel-link:focus-visible {
    outline: 2px solid var(--color-focus-indicator);
    outline-offset: 2px;
    border-radius: var(--border-radius);
}

/* Theme row: mobile only — the header carries the icon button on desktop.
   Scoped through .side-menu-panel so it outranks the ::deep .panel-link
   `display: flex` above, which it ties with on specificity alone. */
@media (min-width: 48rem) {
    .side-menu-panel[b-ttdk8jfr0p]  .theme-toggle-item {
        display: none;
    }
}
/* /Pages/Accessions/AccessionItemPage.razor.rz.scp.css */
.accession-item-page[b-nhlb75k1iu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.accession-item-page__header[b-nhlb75k1iu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.accession-item-page__title[b-nhlb75k1iu] {
    font-size: 1.5rem;
    margin: 0;
}
/* /Pages/Accessions/AccessionList.razor.rz.scp.css */
.accession-list-page[b-me8b4um1wo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.accession-list-header[b-me8b4um1wo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.accession-list-title[b-me8b4um1wo] {
    font-family: var(--font-heading);
    font-size: 1.728rem;
    font-weight: 400;
    color: var(--color-on-surface);
    margin: 0;
}

.accession-list-search[b-me8b4um1wo] {
    /* Full-width search row */
}

.accession-list-search__row[b-me8b4um1wo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

@media (min-width: 640px) {
    .accession-list-search__row[b-me8b4um1wo] {
        flex-direction: row;
        align-items: stretch;
    }

    .accession-list-search__row > *[b-me8b4um1wo] {
        flex: 1 1 0;
        min-width: 0;
    }
}

.accession-list-meta--cap[b-me8b4um1wo] {
    color: var(--color-secondary);
}

.accession-filter-btn[b-me8b4um1wo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius);
    background: none;
    border: none;
    color: var(--color-outline-variant);
    cursor: pointer;
    position: relative;
    transition: color var(--transition-fast);
}

.accession-filter-btn:hover[b-me8b4um1wo] {
    color: var(--color-primary-accent);
}

.accession-filter-btn--active[b-me8b4um1wo] {
    color: var(--color-primary-accent);
}

.accession-filter-btn--active[b-me8b4um1wo]::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--color-secondary);
    border: 1.5px solid var(--color-surface);
}

.accession-list-meta[b-me8b4um1wo] {
    font-size: 0.85rem;
    color: var(--color-outline-variant);
    margin: 0;
}
/* /Pages/Accessions/AccessionPage.razor.rz.scp.css */
.accession-page[b-w0gljmtpa3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.accession-page__header[b-w0gljmtpa3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.accession-page__title[b-w0gljmtpa3] {
    font-size: 1.5rem;
    margin: 0;
}

/* The accession number under the title is the identifier voice: mono +
   ochre, the same on the website, the light app and the dark app. */
.accession-page__subtitle[b-w0gljmtpa3] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--color-secondary);
}

.accession-page__fields[b-w0gljmtpa3] {
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: var(--border-radius);
}

.accession-page__field[b-w0gljmtpa3] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-outline);
}

.accession-page__field:last-child[b-w0gljmtpa3] {
    border-bottom: none;
}

.accession-page__field-label[b-w0gljmtpa3] {
    font-size: 0.85rem;
    color: var(--color-outline-variant);
}

.accession-page__field-value[b-w0gljmtpa3] {
    font-size: 0.9rem;
    color: var(--color-on-surface);
}

.accession-page__items-section[b-w0gljmtpa3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.accession-page__items-title[b-w0gljmtpa3] {
    font-size: 1.2rem;
    margin: 0;
}

.accession-page__items-count[b-w0gljmtpa3] {
    font-size: 0.85rem;
    color: var(--color-outline-variant);
    font-weight: 400;
}

.accession-page__section[b-w0gljmtpa3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.accession-page__section-title[b-w0gljmtpa3] {
    font-size: 1.2rem;
    margin: 0;
}
/* /Pages/Authentication.razor.rz.scp.css */
.logged-out[b-xlo5ky4xdp] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    padding: var(--space-lg);
}

.logged-out__card[b-xlo5ky4xdp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
    width: 100%;
    max-width: 400px;
    padding: var(--space-xl);
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
}

/* Circular badge holding the icon */
.logged-out__icon[b-xlo5ky4xdp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--border-radius-full);
    background-color: var(--color-primary-container);
    color: var(--color-on-primary-container);
}

.logged-out__title[b-xlo5ky4xdp] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--color-on-surface);
}

.logged-out__text[b-xlo5ky4xdp] {
    margin: 0;
    color: var(--color-on-surface-variant);
    line-height: 1.5;
}

/* Give the button a little breathing room from the copy.
   ::deep pierces CSS isolation to reach the IrisButton child component. */
.logged-out__card[b-xlo5ky4xdp]  .iris-btn {
    margin-top: var(--space-sm);
}
/* /Pages/Map/MapPage.razor.rz.scp.css */
.map-page[b-499s138e2y] {
    position: relative;
    height: calc(100svh - var(--nav-height-mobile));
}

@media (min-width: 48rem) {
    .map-page[b-499s138e2y] {
        height: calc(100svh - var(--nav-height-desktop));
    }
}

/* ── Map container ── */
.map-container[b-499s138e2y] {
    position: absolute;
    inset: 0;
}

/* ── Task filter banner ── */
.map-filter-banner[b-499s138e2y] {
    position: absolute;
    top: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: var(--border-radius-full);
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--shadow);
    pointer-events: auto;
}

.map-filter-banner__clear[b-499s138e2y] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

.map-filter-banner__clear:hover[b-499s138e2y] {
    opacity: 1;
}

/* ── Search bar overlay ── */
.map-search[b-499s138e2y] {
    position: absolute;
    top: var(--space-md);
    left: var(--space-xl);
    right: var(--space-xl);
    z-index: 10;
}

@media (min-width: 48rem) {
    .map-search[b-499s138e2y] {
        display: flex;
        justify-content: center;
        top: var(--space-md);
        left: var(--space-xxl);
        right: var(--space-xxl);
    }

    [b-499s138e2y] .iris-search-bar {
        flex-grow: 1;
        max-width: 500px;
    }
}

/* Filter button inside search bar */
.map-filter-btn[b-499s138e2y] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius);
    background: none;
    border: none;
    color: var(--color-outline-variant);
    cursor: pointer;
    position: relative;
    transition: color var(--transition-fast);
}

.map-filter-btn:hover[b-499s138e2y] {
    color: var(--color-primary-accent);
}

.map-filter-btn--active[b-499s138e2y] {
    color: var(--color-primary-accent);
}

.map-filter-btn--active[b-499s138e2y]::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--color-secondary);
    border: 1.5px solid var(--color-field);
}

/* ── FABs ── */
.map-fabs[b-499s138e2y] {
    position: absolute;
    right: var(--space-md);
    bottom: calc(var(--nav-height-mobile) + var(--space-md));
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    z-index: 10;
}

@media (min-width: 48rem) {
    .map-fabs[b-499s138e2y] {
        bottom: var(--space-xl);
    }
}

.map-fab[b-499s138e2y] {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-full);
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.map-fab:hover[b-499s138e2y] {
    background-color: var(--color-background);
    color: var(--color-primary-accent);
    box-shadow: var(--shadow-lg);
}


/* ── Stacked-feature disambiguation dialog ───────────────────────────────── */

.map-disambiguation__hint[b-499s138e2y] {
    margin: 0 0 0.75rem;
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
}

.map-disambiguation__list[b-499s138e2y] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.map-disambiguation__row[b-499s138e2y] {
    margin: 0;
}

.map-disambiguation__button[b-499s138e2y] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 0.75rem 1rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: var(--radius-md, 0.5rem);
    text-align: left;
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.map-disambiguation__button:hover[b-499s138e2y],
.map-disambiguation__button:focus-visible[b-499s138e2y] {
    background-color: var(--color-background);
    border-color: var(--color-primary-edge);
    box-shadow: var(--shadow);
    outline: none;
}

.map-disambiguation__taxon[b-499s138e2y] {
    font-weight: 600;
    color: var(--color-on-surface);
    font-style: italic;
}

/* The identifier voice: mono + ochre, like everywhere the number appears. */
.map-disambiguation__accession[b-499s138e2y] {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--color-secondary);
}

.map-disambiguation__item-no[b-499s138e2y] {
    font-size: 0.75rem;
    color: var(--color-on-surface-variant);
    opacity: 0.8;
}
/* /Pages/Tasks/TaskDetailPage.razor.rz.scp.css */
.task-detail-page[b-461l37xuhl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.task-detail-page__header[b-461l37xuhl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.task-detail-page__back[b-461l37xuhl] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: var(--color-primary-accent);
    text-decoration: none;
}

.task-detail-page__back:hover[b-461l37xuhl] {
    text-decoration: underline;
}

.task-detail-page__title[b-461l37xuhl] {
    font-size: 1.5rem;
    margin: 0;
}

.task-detail-page__actions[b-461l37xuhl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.task-detail-page__actions--row[b-461l37xuhl] {
    flex-direction: row;
}

/* Read-only field rows */
.task-detail-page__fields[b-461l37xuhl] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-outline);
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--color-surface);
}

.task-detail-page__field[b-461l37xuhl] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-outline);
    font-size: 0.9rem;
}

.task-detail-page__field:last-child[b-461l37xuhl] {
    border-bottom: none;
}

.task-detail-page__field-label[b-461l37xuhl] {
    flex: 0 0 auto;
    width: 11rem;
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
}

.task-detail-page__field-value[b-461l37xuhl] {
    flex: 1 1 auto;
    color: var(--color-on-surface);
    text-align: right;
}

/* Sections (Description, Comments, Task items) */
.task-detail-page__section[b-461l37xuhl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.task-detail-page__section-title[b-461l37xuhl] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.task-detail-page__section-body[b-461l37xuhl] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-on-surface-variant);
    line-height: 1.5;
}

.task-detail-page__section-body--empty[b-461l37xuhl] {
    font-style: italic;
}
/* /Pages/Tasks/TaskItemDetailPage.razor.rz.scp.css */
.task-detail-page[b-uwxywh9pb6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.task-detail-page__header[b-uwxywh9pb6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.task-detail-page__back[b-uwxywh9pb6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: var(--color-primary-accent);
    text-decoration: none;
}

.task-detail-page__back:hover[b-uwxywh9pb6] {
    text-decoration: underline;
}

.task-detail-page__title[b-uwxywh9pb6] {
    font-size: 1.5rem;
    margin: 0;
}

.task-detail-page__actions[b-uwxywh9pb6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.task-detail-page__actions--row[b-uwxywh9pb6] {
    flex-direction: row;
}

.task-detail-page__fields[b-uwxywh9pb6] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-outline);
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--color-surface);
}

.task-detail-page__field[b-uwxywh9pb6] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-outline);
    font-size: 0.9rem;
}

.task-detail-page__field:last-child[b-uwxywh9pb6] {
    border-bottom: none;
}

.task-detail-page__field-label[b-uwxywh9pb6] {
    flex: 0 0 auto;
    width: 11rem;
    color: var(--color-on-surface-variant);
    font-size: 0.875rem;
}

.task-detail-page__field-value[b-uwxywh9pb6] {
    flex: 1 1 auto;
    color: var(--color-on-surface);
    text-align: right;
}

.task-detail-page__section[b-uwxywh9pb6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.task-detail-page__section-title[b-uwxywh9pb6] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.task-detail-page__section-body[b-uwxywh9pb6] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-on-surface-variant);
    line-height: 1.5;
}

.task-detail-page__section-body--empty[b-uwxywh9pb6] {
    font-style: italic;
}
/* /Pages/Tasks/TasksPage.razor.rz.scp.css */
.tasks-page[b-g5wy47rvtw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.tasks-header[b-g5wy47rvtw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tasks-title[b-g5wy47rvtw] {
    font-family: var(--font-heading);
    font-size: 1.728rem;
    font-weight: 400;
    color: var(--color-on-surface);
    margin: 0;
}

/* ── Stats row ── */
.tasks-stats[b-g5wy47rvtw] {
    display: flex;
    align-items: center;
    background-color: var(--color-surface);
    border: 1px solid var(--color-outline);
    border-radius: var(--border-radius-lg);
    padding: var(--space-md) 0;
    box-shadow: var(--shadow-sm);
}

.tasks-stat[b-g5wy47rvtw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.tasks-stat__number[b-g5wy47rvtw] {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-on-surface);
}

.tasks-stat__number--mine[b-g5wy47rvtw] {
    color: var(--color-secondary);
}

.tasks-stat__number--due[b-g5wy47rvtw] {
    color: var(--color-on-ok-container);
}

.tasks-stat__label[b-g5wy47rvtw] {
    font-size: 0.75rem;
    color: var(--color-outline-variant);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tasks-stat-divider[b-g5wy47rvtw] {
    width: 1px;
    height: 36px;
    background-color: var(--color-outline);
    flex-shrink: 0;
}
/* /Pages/Taxonomy/TaxonList.razor.rz.scp.css */
.taxon-list-page[b-4ch0t8dsn2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.taxon-list-header[b-4ch0t8dsn2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.taxon-list-title[b-4ch0t8dsn2] {
    font-family: var(--font-heading);
    font-size: 1.728rem;
    font-weight: 400;
    color: var(--color-on-surface);
    margin: 0;
}

.taxon-list-search__row[b-4ch0t8dsn2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

@media (min-width: 640px) {
    .taxon-list-search__row[b-4ch0t8dsn2] {
        flex-direction: row;
        align-items: stretch;
    }

    .taxon-list-search__row > *[b-4ch0t8dsn2] {
        flex: 1 1 0;
        min-width: 0;
    }
}

.taxon-list-meta[b-4ch0t8dsn2] {
    font-size: 0.85rem;
    color: var(--color-outline-variant);
    margin: 0;
}

.taxon-list-meta--cap[b-4ch0t8dsn2] {
    color: var(--color-secondary);
}

.taxon-list-error[b-4ch0t8dsn2] {
    color: var(--color-error);
    margin: 0;
}