@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';

/* /Components/Blocks/BlockPreview.razor.rz.scp.css */
.preview-placeholder[b-cf936bjr4s] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--brand-grey);
    opacity: 0.55;
    font-size: 0.9rem;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-lb3ce42jeg] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-lb3ce42jeg] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-p8j0431n66],
.components-reconnect-repeated-attempt-visible[b-p8j0431n66],
.components-reconnect-failed-visible[b-p8j0431n66],
.components-pause-visible[b-p8j0431n66],
.components-resume-failed-visible[b-p8j0431n66],
.components-rejoining-animation[b-p8j0431n66] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-p8j0431n66] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-p8j0431n66] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-p8j0431n66] {
        background-color: #6b9ed2;
    }

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

    .components-rejoining-animation div[b-p8j0431n66] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-p8j0431n66 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Komponenten.razor.rz.scp.css */
.katalog-filter[b-a1grnkjjlf] {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-block: 1rem;
}

.katalog-grid[b-a1grnkjjlf] {
    overflow-x: auto;
}

.status-implemented[b-a1grnkjjlf] {
    color: var(--brand-blue);
    font-weight: 600;
}

.status-planned[b-a1grnkjjlf] {
    color: var(--brand-grey);
}

/* RowClass is applied on markup rendered by the FluentDataGrid child component,
   so it must cross the scoped-CSS boundary with ::deep. */
[b-a1grnkjjlf] .row-planned {
    color: var(--brand-grey);
    opacity: 0.7;
}

/* Fluent v5 ships `max-width: fit-content` on fluent-accordion-item. The consequence is not
   obvious: the item then sizes to its content's INTRINSIC width, and a grid with
   `repeat(auto-fill, minmax(...))` inside it resolves against that instead of the available
   width — measured at 1600px viewport, the item was 810px wide inside a 1310px accordion, so
   the card grid got 786px and fitted three columns while there was room for five. Scoped through
   the .karten-akkordeon wrapper rather than set globally: every other accordion in the app keeps
   Fluent's own sizing. */
.karten-akkordeon[b-a1grnkjjlf]  fluent-accordion-item {
    max-width: none;
}

/* One number sizes the whole card. Every fixed dimension below is expressed as a multiple of it,
   so the card grid can be retuned by editing this line alone — the preview box, the watermark,
   the meta band and the column width stay in proportion to each other, which is what keeps the
   grid from looking assembled out of unrelated parts. 1 is the original size. */
.karten-raster[b-a1grnkjjlf] {
    --karte-skala: 0.8;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(280px * var(--karte-skala)), 1fr));
    gap: calc(1rem * var(--karte-skala));
    padding: 0.5rem 0 1rem;
}

.komponenten-karte[b-a1grnkjjlf] {
    display: flex;
    flex-direction: column;
    /* Keeps the meta band at the bottom edge when the grid stretches this card to a taller
       neighbour — without it the band would float up and leave a white strip below. */
    justify-content: flex-end;
    border: 1px solid var(--brand-grey);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.karte-vorschau[b-a1grnkjjlf] {
    height: calc(280px * var(--karte-skala));
    padding: calc(1rem * var(--karte-skala));
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--brand-grey);
}

/* Watermark layer: anchored bottom-right, slightly bleeding out of the card and reaching up
   behind the vertically centered preview text (which sits above it via .karte-inhalt). */
.karte-deko[b-a1grnkjjlf] {
    position: absolute;
    right: calc(-24px * var(--karte-skala));
    bottom: calc(-18px * var(--karte-skala));
    width: calc(230px * var(--karte-skala));
    height: calc(230px * var(--karte-skala));
    opacity: 0.13;
    pointer-events: none;
}

.karte-inhalt[b-a1grnkjjlf] {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(0.75rem * var(--karte-skala));
    /* The preview text scales too, or a smaller box would simply clip it — the box is
       `overflow: hidden`, so the loss would be silent. */
    font-size: calc(1rem * var(--karte-skala));
}

/* The block previews render inside a FluentCard whose opaque fill would cover the watermark
   layer below; inside the card preview that surface must stay see-through. Scoped here so the
   same components keep their normal card look elsewhere (e.g. the Text-Demo application). */
.karte-inhalt[b-a1grnkjjlf]  fluent-card {
    background: transparent;
    box-shadow: none;
    border: none;
}

/* Bottom third mirrors the FluentHeader look with inverted content, following the dark card
   variant in docs/ui-guide/figma-style-guide/10-cards-news-fragments.png. Deliberately the
   same token the header uses (accent-fill-rest, derived from CustomColor #FD5000) rather than
   --brand-accent: Fluent darkens the accent until white text has enough contrast, so the raw
   brand orange would visibly differ from the header. The .status-* classes are shared with
   the list view, so the inversion must stay scoped to .karte-meta. */
.karte-meta[b-a1grnkjjlf] {
    /* A minimum, not a fixed height: a long tech-stack line overflowed it by ten pixels and was
       silently cut. Growing the band is better than a scroll area of that size — which would hide
       content behind a gesture, be invisible on touch, and make one card behave unlike the rest.
       The grid stretches every cell of a row to the tallest, so the row stays flush anyway. */
    min-height: calc(140px * var(--karte-skala));
    padding: calc(0.75rem * var(--karte-skala)) calc(1rem * var(--karte-skala));
    background: var(--accent-fill-rest, var(--brand-accent));
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.karte-name[b-a1grnkjjlf] {
    font-weight: 600;
    font-size: calc(1rem * var(--karte-skala));
}

.karte-zeile[b-a1grnkjjlf] {
    display: flex;
    gap: calc(0.5rem * var(--karte-skala));
    font-size: calc(0.85rem * var(--karte-skala));
    color: rgba(255, 255, 255, 0.85);
}

.karte-meta .status-implemented[b-a1grnkjjlf] {
    color: #fff;
}

.karte-meta .status-planned[b-a1grnkjjlf] {
    color: rgba(255, 255, 255, 0.75);
}

.karte-meta a[b-a1grnkjjlf] {
    color: #fff;
    text-decoration: underline;
}

.karte-geplant .karte-vorschau[b-a1grnkjjlf] {
    background: var(--brand-surface);
}
/* /Components/Pages/Medien.razor.rz.scp.css */
/* Scoped to Medien.razor. Every selector here targets an element written in that file, never a
   Fluent component's rendered output — CSS isolation does not reach into a child component, so a
   rule aimed at one would silently match nothing. */

.fehlermeldung[b-5ermx5uf9e] {
    color: var(--brand-accent);
    margin: .5rem 0 0;
}

.upload[b-5ermx5uf9e] {
    display: grid;
    gap: .75rem;
    max-width: 40rem;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    /* No --brand-border token exists in theme.css; a var() with a fallback would only pretend one
       does. This is a neutral hairline, not a brand colour. */
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: .5rem;
}

.upload h2[b-5ermx5uf9e] { margin: 0; }

/* Same unbreakable-word problem as the list titles: the selected recording's title has no spaces
   to break on, so overflow-wrap:anywhere is required, not just text-overflow ellipsis. */
.detail h2[b-5ermx5uf9e] {
    overflow-wrap: anywhere;
    hyphens: auto;
}

.hinweis[b-5ermx5uf9e] { font-size: .85rem; opacity: .75; margin: 0; }

/* minmax(0, …) on both tracks, not just the first: a grid track's implicit minimum is
   min-content, which for an unbreakable file name is the whole word — without the explicit 0
   floor the track (and the viewport with it) grows past the word instead of wrapping it. */
.workspace[b-5ermx5uf9e] {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.liste[b-5ermx5uf9e] { display: flex; flex-direction: column; gap: .25rem; }

/* Qualified past the plain .titel rule below (only adds properties, does not replace it): a long
   file name has no spaces to break on, so it needs overflow-wrap to fold mid-word, plus a clamp
   so one runaway title cannot push the whole list out of view. */
.liste .titel[b-5ermx5uf9e] {
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eintrag[b-5ermx5uf9e] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .6rem .8rem;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    border-left: 3px solid transparent;
}

.eintrag:hover[b-5ermx5uf9e] { background: rgba(0, 0, 0, .04); }

.eintrag.aktiv[b-5ermx5uf9e] {
    border-left-color: var(--brand-accent);
    background: rgba(0, 0, 0, .06);
}

.titel[b-5ermx5uf9e] { font-weight: 600; }
.zustand[b-5ermx5uf9e], .kopfzeile[b-5ermx5uf9e] { font-size: .85rem; opacity: .75; }

.kette[b-5ermx5uf9e] { border-collapse: collapse; margin: 1rem 0; }
.kette td[b-5ermx5uf9e] { padding: .25rem .75rem .25rem 0; vertical-align: top; }
.kette .menge[b-5ermx5uf9e] { font-variant-numeric: tabular-nums; }
.kette .fehler[b-5ermx5uf9e] { color: var(--brand-accent); font-size: .85rem; overflow-wrap: anywhere; max-width: 40rem; }
.kette tr.failed td:first-child[b-5ermx5uf9e] { color: var(--brand-accent); }

.aktionen[b-5ermx5uf9e] { display: flex; gap: .5rem; flex-wrap: wrap; }

.warnung[b-5ermx5uf9e] {
    margin-top: 1rem;
    padding: 1rem;
    display: grid;
    gap: .75rem;
    border: 1px solid var(--brand-accent);
    border-radius: .5rem;
}

.warnung p[b-5ermx5uf9e] { margin: 0; }

@media (max-width: 60rem) {
    .workspace[b-5ermx5uf9e] { grid-template-columns: 1fr; }
}

.herkunft[b-5ermx5uf9e] { margin-top: 1rem; }
.herkunft summary[b-5ermx5uf9e] { cursor: pointer; }
.herkunft dl[b-5ermx5uf9e],
.startwerte[b-5ermx5uf9e] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.25rem 1rem;
    margin: 0.5rem 0 0;
}
.herkunft dt[b-5ermx5uf9e], .startwerte dt[b-5ermx5uf9e] { font-weight: 600; }
.herkunft dd[b-5ermx5uf9e], .startwerte dd[b-5ermx5uf9e] { margin: 0; overflow-wrap: anywhere; }

.startbereich[b-5ermx5uf9e] { display: grid; gap: .5rem; margin-top: .5rem; }
/* /Components/Pages/MedienSuche.razor.rz.scp.css */
.suche[b-0t6kd1fmy7] {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 1rem;
    max-width: 48rem;
}

.workspace[b-0t6kd1fmy7] {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.treffer[b-0t6kd1fmy7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.treffer-zeile[b-0t6kd1fmy7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "quelle herkunft" "zeit zeit" "text text";
    gap: 0.15rem 0.5rem;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border: none;
    border-left: 3px solid transparent;
    background: var(--neutral-layer-2, #f4f4f4);
    cursor: pointer;
}

.treffer-zeile.aktiv[b-0t6kd1fmy7] { border-left-color: var(--brand-primary, #1f3864); }
.quelle[b-0t6kd1fmy7]   { grid-area: quelle; font-weight: 600; overflow-wrap: anywhere; }
.herkunft[b-0t6kd1fmy7] { grid-area: herkunft; white-space: nowrap; font-size: 0.85em; }
.zeit[b-0t6kd1fmy7]     { grid-area: zeit; font-size: 0.85em; opacity: 0.75; }
.text[b-0t6kd1fmy7]     { grid-area: text; overflow-wrap: anywhere; }

/* Same unbreakable-word problem as the ingest page's .detail h2: the selected hit's title has no
   spaces to break on, so it clips instead of wrapping without this. */
.fundstelle h2[b-0t6kd1fmy7] {
    overflow-wrap: anywhere;
    hyphens: auto;
}

.wiedergabe[b-0t6kd1fmy7] { width: 100%; max-width: 720px; background: #000; }
.standbild[b-0t6kd1fmy7]  { width: 100%; max-width: 720px; margin-top: 0.75rem; }
.fundtext[b-0t6kd1fmy7]   { white-space: pre-wrap; overflow-wrap: anywhere; }
.beschreibung[b-0t6kd1fmy7] { white-space: pre-wrap; overflow-wrap: anywhere; opacity: 0.65; font-size: 0.95em; }
.hinweis[b-0t6kd1fmy7]    { opacity: 0.75; }
.fehlermeldung[b-0t6kd1fmy7] { color: var(--error-color, #a4262c); }
/* /Components/Pages/Start.razor.rz.scp.css */
/* Key visual as the page background, filling the whole panel. The image (1448x1086, 4:3) carries
   its centre of gravity — the converging curves and the bright node — in the LOWER RIGHT, so that
   corner is what must always be on screen: `cover` keeps the proportions and crops whatever does
   not fit, and the bottom-right anchor decides where that happens. On a wide panel the image is
   width-bound and the crop takes off the top; on a narrow or tall one it is height-bound and the
   crop takes off the left. Either way the motif stays whole, and the part that goes is the calm
   navy the text sits on anyway.

   `contain` was tried first and rejected: it shows the picture whole but letterboxes, and the fill
   colour cannot match every edge, so a visible seam runs along the band. */
.start-hero[b-ptrp3qdm4y] {
    position: relative;
    /* Fill the panel down to its bottom edge instead of stopping at a fixed height. Measured in
       the running shell at 1900x1000: the section starts at y=107 (44 header + 12 content padding
       + 51 tab strip) and the content area keeps 12px of padding below — hence 119px, rounded to
       120 so a rounding error leaves a hairline gap rather than a scrollbar. The content area is
       `overflow-y: auto`, so being one pixel too tall would show one. */
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: flex-start;
    /* Same navy as the image's darkest corner: bridges the load gap, so the light text is never
       on white before the picture arrives. */
    background-color: #041c3f;
    background-image: url('/images/start-hero.png');
    background-size: cover;
    background-position: 100% 100%;
    background-repeat: no-repeat;
}

/* Scrim from the text side outwards: keeps contrast at AA wherever the picture happens to sit on
   a given viewport — on a narrow one it is width-bound and reaches under the text. Deliberately
   fully transparent past ~two thirds so the motif stays clean. */
.start-hero[b-ptrp3qdm4y]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
                                rgba(4, 20, 45, 0.80) 0%,
                                rgba(4, 20, 45, 0.55) 35%,
                                rgba(4, 20, 45, 0.00) 68%);
    pointer-events: none;
}

.start-inhalt[b-ptrp3qdm4y] {
    position: relative;
    z-index: 1;
    max-width: 44rem;
    padding: clamp(1.5rem, 5vw, 4rem);
}

/* theme.css paints every heading with --brand-ink; on the dark key visual it has to invert. */
.start-inhalt h1[b-ptrp3qdm4y] {
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.15;
    margin: 0 0 1.25rem;
}

.start-lead[b-ptrp3qdm4y] {
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.6;
    margin: 0 0 2rem;
}

.start-links[b-ptrp3qdm4y] {
    list-style: none;
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Overrides app.css `a { color: #006bb7 }`, which is unreadable on navy. */
.start-links a[b-ptrp3qdm4y] {
    color: #8cc2ff;
    font-weight: 600;
    text-decoration: none;
}

.start-links a:hover[b-ptrp3qdm4y],
.start-links a:focus-visible[b-ptrp3qdm4y] {
    color: #fff;
    text-decoration: underline;
}

.start-links a:focus-visible[b-ptrp3qdm4y] {
    outline: 2px solid #8cc2ff;
    outline-offset: 3px;
    border-radius: 2px;
}
/* /Components/Pages/Vertraege.razor.rz.scp.css */
/* Scoped stylesheet for Vertraege.razor */

/* Grid layout for category tiles — mirrors .karten-raster from Komponenten.razor.css */
.kategorie-kacheln[b-qzns94axew] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: 0.5rem 0 1rem;
}

/* Light spacing for card content to avoid visual cramping */
[b-qzns94axew] .kategorie-kacheln h3 {
    margin: 0 0 0.5rem 0;
    color: var(--brand-ink);
}

[b-qzns94axew] .kategorie-kacheln p {
    margin: 0 0 0.75rem 0;
    color: var(--brand-grey);
    font-size: 0.9rem;
}

[b-qzns94axew] .kategorie-kacheln ul {
    margin: 0;
    padding-left: 1.5rem;
}

[b-qzns94axew] .kategorie-kacheln li {
    margin: 0.25rem 0;
    color: var(--brand-ink);
}

[b-qzns94axew] .kategorie-kacheln a {
    color: var(--brand-accent);
    text-decoration: none;
}

[b-qzns94axew] .kategorie-kacheln a:hover {
    text-decoration: underline;
}
/* /Components/Tabs/TabStrip.razor.rz.scp.css */
/* These rules style TabStrip's own markup, so they live here rather than in
   TabWorkspace.razor.css: Blazor's CSS isolation only stamps a component's scope attribute
   onto elements written literally in its own .razor markup, not onto a child component's
   root element, so a TabWorkspace stylesheet could never reach into what TabStrip renders —
   ::deep does not help either, since it still requires an ancestor carrying TabWorkspace's
   scope attribute, and nothing in TabWorkspace's markup wraps <TabStrip /> to provide one. */
.tab-strip[b-4edcpftce8] {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--brand-grey);
    margin-bottom: 1rem;
}

.tab[b-4edcpftce8] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid transparent;
    border-bottom: none;
    white-space: nowrap;
}

.tab-active[b-4edcpftce8] {
    border-color: var(--brand-grey);
    background: var(--brand-surface);
    font-weight: 600;
}

.tab-label[b-4edcpftce8],
.tab-close[b-4edcpftce8] {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font: inherit;
    padding: 0.15rem 0.25rem;
}

.tab-close[b-4edcpftce8] {
    opacity: 0.6;
}

.tab-close:hover[b-4edcpftce8] {
    opacity: 1;
}
/* /Components/Tabs/TabWorkspace.razor.rz.scp.css */
/* The tab-strip rules (.tab-strip, .tab, .tab-active, .tab-label, .tab-close) live in
   TabStrip.razor.css instead: they style markup TabStrip renders, and this stylesheet's scope
   attribute never reaches there — see the comment in that file for why. .tab-empty stays here
   because TabWorkspace renders that <p> directly in its own markup. */
.tab-empty[b-2wg16iso26] {
    color: var(--brand-grey);
}

/* This one declaration is the whole keep-alive mechanism: an inactive tab keeps its place in the
   component tree and is merely hidden, so its state — and any <iframe> inside it — survives.
   It belongs in THIS stylesheet because TabWorkspace renders that div in its own markup and so
   the scope attribute reaches it; moved to a parent's stylesheet it would match nothing, which is
   the CSS-isolation trap that already cost this shell one defect. Why a class and not an inline
   style: see the comment above the div in TabWorkspace.razor. */
.tab-panel.is-hidden[b-2wg16iso26] {
    display: none;
}