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

/* /Components/Aileen/AileenClassificationCard.razor.rz.scp.css */
.aileen-classification-card[b-rn6slwn7w8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 2px solid var(--neutral-stroke-divider-rest);
    border-radius: var(--control-corner-radius, 6px);
}

.aileen-classification-type-row[b-rn6slwn7w8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aileen-classification-current[b-rn6slwn7w8] {
    color: var(--neutral-foreground-hint);
}

.aileen-classification-rationale[b-rn6slwn7w8] {
    color: var(--neutral-foreground-hint);
    overflow-wrap: anywhere;
}

.aileen-classification-choices[b-rn6slwn7w8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0 0;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.aileen-classification-choices-label[b-rn6slwn7w8] {
    color: var(--neutral-foreground-hint);
}

.aileen-classification-choice-row[b-rn6slwn7w8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aileen-classification-choice-row[b-rn6slwn7w8]  fluent-text-field {
    flex: 1;
}

.aileen-classification-actions[b-rn6slwn7w8] {
    display: flex;
    gap: 8px;
    padding-top: 4px;
}

.aileen-classification-hint[b-rn6slwn7w8] {
    color: var(--df-status-warning);
}
/* /Components/Aileen/AileenNewIssueCard.razor.rz.scp.css */
.aileen-new-issue-card[b-agc0yq3wzu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 2px solid var(--neutral-stroke-divider-rest);
    border-radius: var(--control-corner-radius, 6px);
}

.aileen-new-issue-head[b-agc0yq3wzu] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aileen-new-issue-head[b-agc0yq3wzu]  .aileen-new-issue-name {
    flex: 1;
}

.aileen-new-issue-choices[b-agc0yq3wzu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0 0;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.aileen-new-issue-choices-label[b-agc0yq3wzu] {
    color: var(--neutral-foreground-hint);
}

.aileen-new-issue-choice-row[b-agc0yq3wzu] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aileen-new-issue-choice-row[b-agc0yq3wzu]  fluent-text-field {
    flex: 1;
}

.aileen-new-issue-actions[b-agc0yq3wzu] {
    display: flex;
    gap: 8px;
    padding-top: 4px;
}

.aileen-new-issue-hint[b-agc0yq3wzu] {
    color: var(--df-status-warning);
}

/* Narrow screens: the name field and type select side-by-side leave the name field too narrow to
   read/edit comfortably. Stack them instead — Name, Type, Description. */
@media (max-width: 640px) {
    .aileen-new-issue-head[b-agc0yq3wzu] {
        flex-direction: column;
        align-items: stretch;
    }

    .aileen-new-issue-head[b-agc0yq3wzu]  .aileen-new-issue-name {
        width: 100%;
    }

    .aileen-new-issue-head[b-agc0yq3wzu]  fluent-select {
        width: 100%;
    }
}
/* /Components/Aileen/AileenSpotlight.razor.rz.scp.css */
.aileen-button-avatar[b-nbhl0n7vzq] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.aileen-button-count[b-nbhl0n7vzq] {
    min-width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Floating orb (tablet and larger). Hidden on mobile. */
.aileen-orb[b-nbhl0n7vzq] {
    position: fixed;
    left: 20px;
    bottom: 48px;
    z-index: 900;
    width: 72px;
    height: 72px;
    padding: 0;
    display: none;
    place-items: center;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: grab;
    touch-action: none;
    transition: transform 120ms ease;
}

.aileen-orb:hover[b-nbhl0n7vzq] {
    transform: translateY(-2px) scale(1.04);
}

.aileen-orb:active[b-nbhl0n7vzq] {
    transform: translateY(0) scale(1);
}

/* While dragging: follow the pointer 1:1 — no hover lift or transition to fight the JS position. */
.aileen-orb--dragging[b-nbhl0n7vzq] {
    cursor: grabbing;
    transition: none;
}

.aileen-orb--dragging:hover[b-nbhl0n7vzq],
.aileen-orb--dragging:active[b-nbhl0n7vzq] {
    transform: none;
}

.aileen-orb:focus-visible[b-nbhl0n7vzq] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
    border-radius: 6px;
}

.aileen-orb-avatar[b-nbhl0n7vzq] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

@media (max-width: 640px) {
    .aileen-button-count[b-nbhl0n7vzq] {
        display: none;
    }
}

/* Tablet and up: swap the top-bar button for the orb. */
@media (min-width: 641px) {
    .aileen-top-button-wrap[b-nbhl0n7vzq] {
        display: none;
    }

    .aileen-orb[b-nbhl0n7vzq] {
        display: grid;
    }
}
/* /Components/Aileen/AileenSpotlightDialog.razor.rz.scp.css */
.aileen-dialog-avatar[b-jl5jps57fj] {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.aileen-coming-soon[b-jl5jps57fj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px 16px;
    text-align: center;
}

.aileen-coming-soon-avatar[b-jl5jps57fj] {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

/* Capability picker (idle) */
.aileen-capability-list[b-jl5jps57fj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aileen-capability-row[b-jl5jps57fj] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.aileen-capability-row:first-child[b-jl5jps57fj] {
    border-top: none;
}

.aileen-capability-meta[b-jl5jps57fj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.aileen-capability-desc[b-jl5jps57fj] {
    color: var(--neutral-foreground-hint);
}

.aileen-capability-reason[b-jl5jps57fj] {
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

/* The fix link for a user-fixable precondition (the red reason above it is coloured inline via
   FluentLabel's CustomColor, since a scoped class never reaches the component's host element). */
.aileen-capability-fix-link[b-jl5jps57fj] {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    color: var(--accent-fill-rest);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.aileen-capability-fix-link:hover[b-jl5jps57fj] {
    text-decoration: none;
}

/* Thinking */
.aileen-run-thinking[b-jl5jps57fj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 16px;
    text-align: center;
}

.aileen-run-thinking-sub[b-jl5jps57fj] {
    color: var(--neutral-foreground-hint);
}

/* The centered FluentUI dialog body is height:auto with no overflow, so a long
   suggestion list grows past the fixed-height dialog and pushes the footer/back
   button out of view. Making this wrapper a scroll container severs min-content
   propagation to the body's 1fr grid track, bounding it so the list scrolls
   inside the dialog instead of spilling out. */
.aileen-scroll[b-jl5jps57fj] {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    /* The dialog body is inset by Fluent's --dialog-padding, but this scroll container's scrollbar
       then renders inside that inset — so cards butt against the scrollbar on the right while the
       left keeps the padding. Stretch the scroller to the dialog's inner edges and re-inset its
       content by the same padding, so the scrollbar sits at the edge and the list is evenly spaced. */
    margin-inline: calc(-1 * var(--dialog-padding, 24px));
    padding-inline: var(--dialog-padding, 24px);
}

/* Suggestions list */
.aileen-suggestions[b-jl5jps57fj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aileen-suggestions-toolbar[b-jl5jps57fj] {
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    padding: 4px 0 8px;
    background: var(--neutral-layer-1);
    z-index: 1;
}

.aileen-suggestion-slot[b-jl5jps57fj] {
    display: block;
}

.aileen-generic-card[b-jl5jps57fj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: var(--control-corner-radius, 6px);
}

.aileen-run-actions[b-jl5jps57fj] {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 4px;
}
/* /Components/DocumentCreatedBy.razor.rz.scp.css */
/* Document-ownership line under a page title (Fluent "Body" scale). Ported from the Risk Factor VOI
   provenance line, which was the visual target in issue #472. */
.doc-created-by[b-34zbka43bt] {
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    color: var(--neutral-foreground-hint);
}

.doc-created-by strong[b-34zbka43bt] {
    color: var(--neutral-foreground-rest);
    font-weight: 600;
}
/* /Components/DocumentToolbar.razor.rz.scp.css */
/* The gray chrome zone that holds a page's floating toolbar. It matches the document
   gutter (.doc-placeholder, --neutral-fill-secondary-rest) so the strip reads as the
   same background the white paper sits on, and its padding is the gap: gray above and
   below the toolbar, and 20px sides that line the toolbar up with the paper's edges.

   No borders: the zone flows straight into the gutter below it. The negative bottom
   margin pulls the scroll pane up under the zone (painted above it via z-index): it hides
   the pane's own top hairline AND tightens the gap between the toolbar and the document —
   only a small bottom padding plus what's left of the paper's own top gutter remain, so
   the space under the toolbar reads about the same as the paper's side gutters.

   Scoped CSS reaches this element even though SectionContent renders it at the outlet:
   the scope attribute is stamped at compile time and travels with the element. */
.doc-toolbar-zone[b-8rft22wxsk] {
    background: var(--neutral-fill-secondary-rest);
    padding: 14px 20px 4px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    margin-bottom: -10px;
    /* A size-query container so a page's toolbar can respond to the zone's real width
       (rail collapses included), not the viewport. Consumed by IssueRaising's Search
       group, which folds inline on a wide zone and drops to a second row on a narrow one. */
    container-type: inline-size;
}

@media (max-width: 768px) {
    .doc-toolbar-zone[b-8rft22wxsk] {
        padding: 10px 12px 4px;
    }
}
/* /Components/EditTrackingIndicator.razor.rz.scp.css */
/* Mirrors .dftextfield-audit-container in TextRow.razor.css, which this indicator is the extracted
   equivalent of. The font-size is the load-bearing part: FluentPersona draws its initials at the
   inherited size, so without it they come out at the page's body size inside a 26px circle and the
   persona reads far heavier than the same persona on a TextRow. Fixed width, not min-width, so a
   column of these lines up whether it is showing a persona, an icon or nothing. */
.audit-indicator[b-7i51br8wxn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    font-size: 10px;
}
/* /Components/FacilitatorMessagePanel.razor.rz.scp.css */
.facilitator-panel-transition[b-rpb2ijjxd7] {
    flex-shrink: 0;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-4px);
    transition: grid-template-rows 180ms ease, opacity 150ms ease, transform 180ms ease, margin-bottom 180ms ease;
    margin: 0;
    padding: 0;
    background-color: transparent;
    margin-bottom: 0;
}

.facilitator-panel-transition.is-visible[b-rpb2ijjxd7] {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 8px;
}

.facilitator-panel-transition-inner[b-rpb2ijjxd7] {
    overflow: hidden;
}

.facilitator-panel-container[b-rpb2ijjxd7] {
    flex-shrink: 0;
    margin-top: 0;
    margin-bottom: 0;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-layer-rest);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.facilitator-panel-body[b-rpb2ijjxd7] {
    padding: 10px 12px 12px 12px;
}

.facilitator-anonymous-room-status-strip[b-rpb2ijjxd7] {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border: 1px solid var(--accent-fill-rest);
    border-radius: 6px;
    background: var(--neutral-fill-secondary-rest);
}

.facilitator-anonymous-room-status-left[b-rpb2ijjxd7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.facilitator-anonymous-room-live-badge[b-rpb2ijjxd7] {
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.facilitator-anonymous-room-status-actions[b-rpb2ijjxd7] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}



.facilitator-anonymous-room-modal-backdrop[b-rpb2ijjxd7] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.facilitator-anonymous-room-modal[b-rpb2ijjxd7] {
    background: white;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: min(96vw, 960px);
    max-height: 96vh;
}

.facilitator-anonymous-room-qr-fullscreen[b-rpb2ijjxd7] {
    width: min(90vw, 860px);
    height: min(90vw, 860px);
    max-height: calc(96vh - 88px);
    object-fit: contain;
    background: white;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    padding: 8px;
}
/* /Components/HelpVideoDialog.razor.rz.scp.css */
.help-video-dialog-body[b-r70nemklb5] {
    overflow: hidden;
    padding: 0;
    display: flex;
    justify-content: center;
}

.help-video-dialog-video[b-r70nemklb5] {
    width: min(960px, 92vw);
    flex: 1 1 auto;
    margin: 0 auto;
}

[b-r70nemklb5] .help-video-dialog-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

[b-r70nemklb5] .help-video-dialog-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* /Components/InviteUser.razor.rz.scp.css */
.invite-row[b-wdwqaecnrh] {
    display: flex;    
}
/* /Components/LandingDocumentGrid.razor.rz.scp.css */
/* The component's single root wrapper — full width so the tile list stretches to fill the card.
   (The desktop grid inside stays fit-content, so it doesn't stretch on wide screens.) */
.landing-doc-grid[b-3f7ja7jeww] {
    width: 100%;
}

.docs-grid-container[b-3f7ja7jeww] {
    border: solid var(--neutral-stroke-divider-rest) 1px;
    border-radius: 12px;
    padding-bottom: 12px;
    padding-left: 4px;
    padding-right: 4px;
    margin-top: 8px;
    /* Shrink to the grid's content on wide screens (don't stretch across the page),
       but never exceed the available width. */
    width: fit-content;
    max-width: 100%;
}

/* Dismiss button — highlight on hover / active. */
[b-3f7ja7jeww] fluent-button.delete-btn:hover {
    background: #C42B1C;
}

    [b-3f7ja7jeww] fluent-button.delete-btn:hover svg {
        fill: white !important;
    }

[b-3f7ja7jeww] fluent-button.delete-btn:active {
    background: #DF667B;
}

    [b-3f7ja7jeww] fluent-button.delete-btn:active svg {
        fill: white !important;
    }

/* The tile overflow (⋮) button stays transparent so the row's hover background shows through it,
   instead of the button painting its own lighter box on hover. */
[b-3f7ja7jeww] fluent-button.landing-menu-btn,
[b-3f7ja7jeww] fluent-button.landing-menu-btn:hover,
[b-3f7ja7jeww] fluent-button.landing-menu-btn:active {
    background: transparent;
}

/* Responsive swap: the FluentDataGrid works on wider viewports; below the breakpoint
   we switch to a compact two-line list that fits a phone without horizontal scrolling. */

.landing-list-mobile[b-3f7ja7jeww] {
    display: none;
}

/* The sort control replaces clickable headers, so it only appears in the tile view. */
.landing-sort-mobile[b-3f7ja7jeww] {
    display: none;
}

/* The controls span the full width so, when pinned, their opaque background fully covers the
   tile list scrolling behind them (otherwise tiles peek along the right edge). */
.landing-controls[b-3f7ja7jeww] {
    width: 100%;
    box-sizing: border-box;
}

/* "New" / "My Documents" section headers (table view only). */
.landing-section-header[b-3f7ja7jeww] {
    margin-bottom: 8px;
}

/* Bigger gap above the "My Documents" header, and a tight gap below it to the pending summary
   (matching the Frames landing spacing). */
.landing-docs-title[b-3f7ja7jeww] {
    margin-top: 20px;
    margin-bottom: 0;
}

/* Switch to the tile view below this width. */
@media (max-width: 900px) {
    /* Pull the pinned controls up under the title — the New/My-Documents section headers are
       hidden on tiles, so without this the page's title→button gap looks too large. */
    .landing-doc-grid[b-3f7ja7jeww] {
        margin-top: -16px;
    }

    .landing-grid-desktop[b-3f7ja7jeww] {
        display: none;
    }

    .landing-list-mobile[b-3f7ja7jeww] {
        display: block;
    }

    .landing-sort-mobile[b-3f7ja7jeww] {
        display: block;
        margin: 8px 0 4px;
    }

    /* Section headers are a table affordance; keep the pinned tile controls lean. */
    .landing-section-header[b-3f7ja7jeww] {
        display: none;
    }

    /* Pin the New button(s) + sort control while the tile list scrolls beneath them.
       The page's existing scroll container does the scrolling, so there's no second scrollbar. */
    .landing-controls[b-3f7ja7jeww] {
        position: sticky;
        /* Negative top cancels the scroll container's 20px top padding, so the controls pin
           right up under the app bar instead of leaving a strip below it (where tiles peeked
           and the gap looked too big). Two knobs: `top` = how high it pins, `padding-top` =
           the gap above the button + the opaque cover over the peek strip. */
        top: -20px;
        z-index: 10;
        background: var(--neutral-fill-layer-rest);
        padding-top: 10px;
        padding-bottom: 8px;
    }
}

.landing-mobile-list[b-3f7ja7jeww] {
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 12px;
    background: var(--neutral-layer-1);
}

.landing-mobile-row[b-3f7ja7jeww] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    cursor: pointer;
}

.landing-mobile-row:last-child[b-3f7ja7jeww] {
    border-bottom: none;
}

.landing-mobile-row:hover[b-3f7ja7jeww] {
    background: var(--neutral-fill-stealth-hover);
}

/* Let the middle column shrink so the name can ellipsize instead of overflowing. */
.landing-mobile-main[b-3f7ja7jeww] {
    flex: 1 1 auto;
    min-width: 0;
}

.landing-mobile-name[b-3f7ja7jeww] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.landing-mobile-name-text[b-3f7ja7jeww] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.landing-mobile-meta[b-3f7ja7jeww] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-mobile-empty[b-3f7ja7jeww] {
    padding: 16px;
    color: var(--neutral-foreground-hint);
}
/* /Components/RangeBoxWhiskerPlot.razor.rz.scp.css */
.range-box-whisker-plot[b-qdlnxzgetx] {
    width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.range-box-whisker-plot-svg[b-qdlnxzgetx] {
    width: 100%;
    height: auto;
}

.range-box-whisker-plot-axis[b-qdlnxzgetx] {
    stroke: var(--neutral-stroke-strong-rest);
    stroke-width: 1;
}

.range-box-whisker-plot-whisker[b-qdlnxzgetx],
.range-box-whisker-plot-cap[b-qdlnxzgetx],
.range-box-whisker-plot-median[b-qdlnxzgetx],
.range-box-whisker-plot-outlier[b-qdlnxzgetx] {
    stroke: var(--accent-fill-rest);
}

.range-box-whisker-plot-whisker[b-qdlnxzgetx],
.range-box-whisker-plot-cap[b-qdlnxzgetx] {
    stroke-width: 1.25;
}

.range-box-whisker-plot-box[b-qdlnxzgetx] {
    stroke: var(--accent-fill-rest);
    stroke-width: 2;
    fill: var(--accent-fill-rest);
    fill-opacity: 1;
}

.range-box-whisker-plot-median[b-qdlnxzgetx] {
    stroke: var(--foreground-on-accent-rest);
    stroke-width: 2;
}

.range-box-whisker-plot-outlier[b-qdlnxzgetx] {
    fill: var(--accent-fill-rest);
    stroke-width: 1.5;
}
/* /Components/TextArea.razor.rz.scp.css */
[b-0kwvg7wm2e] fluent-text-area::part(control) {
    background: transparent;
}


/* for the textrow when it's not part of the sortable list (stand-alone): */
/* extend the blue focus line at the bottom of the text field a bit to match the added outer margin */
[b-0kwvg7wm2e] fluent-text-area:after {
    width: calc(100% + 4px);
    margin-left: -2px;
    margin-bottom: -1px;
}

.dftextfield-audit-container[b-0kwvg7wm2e] {
    display: flex;
    align-items: start;
    justify-content: center;
    width: 24px;
    font-size: 10px;
    margin-right: -30px; /* this is mirrored in the sortable item and moves the audit info to the right of the background */
}

.textrow-container[b-0kwvg7wm2e] {
    width: 100%;
    display: flex;
    align-items: center;
}

/* this funky selector chooses all textrow-container elements that are not children of a fluent-sortable-list */
/* overrrides the previous style */
.textrow-container[b-0kwvg7wm2e] {
    width: calc(100% - 30px) !important;
    display: flex;
    align-items: center;
    background-color: var(--neutral-fill-input-alt-rest);
    border: 1px solid var(--neutral-stroke-input-active);
    border-radius: 4px;
}

/* this is the value that needs to change in case the audit info in rows in a list do not line up with the audit infos when stand-alone */
.dftextfield-audit-container[b-0kwvg7wm2e] {
    margin-left: 8px;
}

.textrow-container:hover[b-0kwvg7wm2e] {
    background: var(--neutral-fill-input-alt-hover);
}
/* /Components/TextRow.razor.rz.scp.css */
[b-iiay22xi8d] fluent-select::part(control) {
    background: transparent;
}

[b-iiay22xi8d] fluent-select {
    height: 31px;
    min-height: 31px;
    max-height: 31px;
    margin-top: 1px;
    border-right: var(--neutral-stroke-input-active) 1px solid;
    border-radius: 0px;
}

    [b-iiay22xi8d] fluent-select:hover {
        background-color: var(--neutral-fill-input-hover);
    }

/* move the border to the left, if inside right container...*/
.textrow-right[b-iiay22xi8d]  fluent-select {
    border-right: var(--neutral-stroke-input-active) 0px solid;
    border-left: var(--neutral-stroke-input-active) 1px solid;
}

/*::deep fluent-select {
    border-radius: 0px;
    border-right: 1px black var(--neutral-stroke-input-active);
}
*/
/* remove focus underline from combo-box itself */
/*    ::deep fluent-select::after {
        border-width: 0px;
    }
*/
    [b-iiay22xi8d] fluent-select::part(control) {
        height: 31px;
        min-height: 31px;
        max-height: 31px;
/*        margin-top: 1px;
*/    }



[b-iiay22xi8d] .k-colorpicker {
    height: 30px;
    align-self: end;
    width: 72px;
    background-color: transparent;
    border: none;
    border-right: var(--neutral-stroke-input-active) 1px solid;
    border-radius: 0px;
    --kendo-picker-text: var(--neutral-foreground-rest);
    --kendo-picker-hover-text: var(--neutral-foreground-rest);
    --kendo-picker-hover-bg: var(--neutral-fill-input-hover);
}

[b-iiay22xi8d] fluent-text-field::part(root) {
    background: transparent;
}

[b-iiay22xi8d] fluent-text-field.text-start-aligned::part(control) {
    text-align: start;
}

[b-iiay22xi8d] fluent-text-field.text-center-aligned::part(control) {
    text-align: center;
}

[b-iiay22xi8d] fluent-text-field.text-end-aligned::part(control) {
    text-align: end;
}

[b-iiay22xi8d] fluent-text-field.text-left-aligned::part(control) {
    text-align: left;
}

[b-iiay22xi8d] fluent-text-field.text-right-aligned::part(control) {
    text-align: right;
}

/* for the textrow when part of a list: */
/* extend the blue focus line at the bottom of the text field to extend under the re-order and dismiss buttons */
[b-iiay22xi8d] fluent-text-field:after {
    /*width: calc(100% + 50px);*/   /* this needs to be +55px for pen and +53px or so when showing the persona :/ */
    /*margin-left: -19px;
    margin-bottom: -1px;*/
    border-width: 0px;
}

/* for the textrow when it's not part of the sortable list (stand-alone): */
/* extend the blue focus line at the bottom of the text field a bit to match the added outer margin */
[b-iiay22xi8d] .is-stand-alone fluent-text-field:after {
/*    width: calc(100% + 4px);
    margin-left: -2px;
    margin-bottom: -1px;
*/    border-width: 0px;
}

/* css styles for the dismiss button */
[b-iiay22xi8d] .textrow-dismissbutton {
    width: 24px;
    height: 24px;
    max-width: 24px;
    min-width: 24px;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 4px;
    margin-right: 2px;
}

/* css styles for the dismiss button - hilight when mouse over / clicking */
[b-iiay22xi8d] fluent-button:hover {
    background: #C42B1C;
}
    [b-iiay22xi8d] fluent-button:hover svg {
        fill: white !important;
    }

[b-iiay22xi8d] fluent-button:active {
    background: #DF667B;
}
    [b-iiay22xi8d] fluent-button:active svg {
        fill: white !important;
    }

.dftextfield-audit-container[b-iiay22xi8d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    font-size: 10px;
    margin-right: -30px; /* this is mirrored in the sortable item and moves the audit info to the right of the background */
}

.textrow-container[b-iiay22xi8d] {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative; /* this is essential for the focus border to work in the ::after pseudo-element! */
}

/* this funky selector chooses all textrow-container elements that are not children of a fluent-sortable-list */
/* overrrides the previous style */
    .textrow-container:not(.fluent-sortable-list .textrow-container)[b-iiay22xi8d] {
        width: calc(100% - 30px) !important;
        display: flex;
        align-items: center;
        height: 32px;
        background-color: var(--neutral-fill-input-alt-rest);
        border: 1px solid var(--neutral-stroke-input-active);
        border-radius: calc(var(--control-corner-radius) * 1px);
    }

/* this is the value that needs to change in case the audit info in rows in a list do not line up with the audit infos when stand-alone */
.dftextfield-audit-container:not(.fluent-sortable-list .textrow-container)[b-iiay22xi8d] {
    margin-left: 8px;
}

.textrow-container:hover[b-iiay22xi8d] {
    background: var(--neutral-fill-input-alt-hover);
}

.textrow-container:not(.fluent-sortable-list .textrow-container):hover[b-iiay22xi8d] {
    background: var(--neutral-fill-input-alt-hover);
}

.textrow-container:not([disabled]):focus-within[b-iiay22xi8d]::after {
    margin-bottom: -2px;
    border-bottom: calc(var(--focus-stroke-width) * 1px) solid var(--accent-fill-rest);
    border-bottom-left-radius: calc(var(--control-corner-radius) * 1px);
    border-bottom-right-radius: calc(var(--control-corner-radius) * 1px);
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 2px;
    content: '';
    position: absolute;
    z-index: 2;
}

/* Adds visible spacing between left and right areas in the row */
.textrow-row[b-iiay22xi8d] {

}

/* Ensure the right side is treated as its own block within the flex row */
.textrow-right[b-iiay22xi8d] {
    display: flex;
    align-items: center;
    min-width: 0; /* prevents overflow issues with long text fields */
    gap: 4px;     /* inner spacing for any items inside the right slot */
}

/* Add horizontal space between the main input and right-side content */
.sortable-item-content[b-iiay22xi8d] {
    display: flex;
}

/* 50/50 layout when right-side content exists */

.sortable-item-content.has-right fluent-text-field[b-iiay22xi8d] {
    flex: 1 1 0;
    min-width: 0;
}

.sortable-item-content.has-right .textrow-right[b-iiay22xi8d] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
}

/* Keep dismiss button & audit info from affecting 50/50 distribution */
.sortable-item-content .textrow-dismissbutton[b-iiay22xi8d],
.sortable-item-content .dftextfield-audit-container[b-iiay22xi8d] {
    flex: 0 0 auto;
}
/* /Components/ThemedTelerikChart.razor.rz.scp.css */
/* Transparent wrapper: fill the caller's slot so a caller that sizes the chart with
   `::deep .k-chart { height: 100% }` against a definite-height box (e.g. RiskFactorVoiDistributionChart's
   aspect-ratio plot) still resolves through this element, and a caller that lets the chart use its
   default height is unaffected. The host exists only to give the ResizeObserver something to watch. */
.df-chart-host[b-2ahwh9rqqn] {
    width: 100%;
    height: 100%;
}
/* /Components/Toasts/NudgeToast.razor.rz.scp.css */
.nudge-toast-body[b-rczt2stzi0] {
    margin-top: 8px;
    align-items: flex-start;
}
/* /Features/Admin/AileenManagement/AdminAileenManagement.razor.rz.scp.css */
.aileen-admin-global-row[b-618k38ghf1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aileen-admin-hint[b-618k38ghf1] {
    color: var(--neutral-foreground-hint);
}

.aileen-admin-section[b-618k38ghf1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Feature cards laid out in a responsive grid — always open, so the layout never resizes on
   interaction and every card holds a consistent width across breakpoints. */
.aileen-admin-feature-grid[b-618k38ghf1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* FluentCard's Class lands on the web-component host (no scope attribute), reached via ::deep
   from the scoped grid. MinimalStyle="true" is required here — a non-minimal FluentCard nested
   inside AdminShell's own FluentCard triggers a documented FluentUI Blazor bug where
   FluentDesignTheme's design-token resolution recurses without bound
   (https://github.com/microsoft/fluentui-blazor/issues/4244), crashing the page with
   "RangeError: Maximum call stack size exceeded". MinimalStyle strips the card's default chrome
   (background/border/padding), so it is replaced here with the same chrome-layer surface used
   elsewhere for tier-1 nested panels (.doc-placeholder-inner in DocumentLayout/MainLayout).
   Cards fill their grid cell and stretch to equal height per row. */
.aileen-admin-feature-grid[b-618k38ghf1]  .aileen-admin-feature-card {
    width: 100%;
    height: 100%;
    min-width: 0;
    background: var(--neutral-fill-layer-rest);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--df-chrome-layer-radius);
    padding: 16px;
    box-sizing: border-box;
}

.aileen-admin-feature-card-body[b-618k38ghf1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.aileen-admin-feature-head[b-618k38ghf1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.aileen-admin-feature-count[b-618k38ghf1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-rest);
    font-size: 12px;
}

.aileen-admin-capability-row[b-618k38ghf1] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0 0;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    min-width: 0;
}

.aileen-admin-capability-meta[b-618k38ghf1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

/* Never clip capability text — wrap long ids/descriptions instead of truncating or widening. */
.aileen-admin-capability-meta > *[b-618k38ghf1] {
    overflow-wrap: anywhere;
    white-space: normal;
}

.aileen-admin-capability-scope[b-618k38ghf1] {
    color: var(--accent-foreground-rest);
    font-family: var(--monospace-font);
    letter-spacing: 0.1px;
}

.aileen-admin-capability-desc[b-618k38ghf1] {
    color: var(--neutral-foreground-hint);
}
/* /Features/Calibration/Components/BinaryQuizV2.razor.rz.scp.css */
/* BinaryQuizV2 — quiz card, T/F buttons, confidence chips, swipe, responsive layout */

.cal-statement[b-g3k8i0gwzj] {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 767px) {
    .cal-statement[b-g3k8i0gwzj] {
        margin-bottom: 8px;
    }
}

/* ── Progress (shared) ── */
.cal-progress-wrap[b-g3k8i0gwzj] {
    padding: 0 2px;
    flex-shrink: 0;
}

.cal-progress-track[b-g3k8i0gwzj] {
    height: 6px;
    background: var(--cal-surface-2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.cal-progress-fill[b-g3k8i0gwzj] {
    height: 100%;
    background: linear-gradient(90deg, var(--cal-blue), var(--cal-gold));
    border-radius: 3px;
    position: relative;
    transition: width var(--cal-medium) var(--cal-ease);
    min-width: 6px;
}

.cal-progress-pip[b-g3k8i0gwzj] {
    position: absolute;
    right: -3px;
    top: -3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cal-gold);
    box-shadow: 0 0 8px var(--cal-gold);
}

.cal-progress-label[b-g3k8i0gwzj] {
    font-size: 12px;
    color: var(--cal-gold);
    text-align: right;
    margin-bottom: 12px;
    font-family: var(--cal-mono);
}

/* ── True / False Buttons ── */
.cal-tf-row[b-g3k8i0gwzj] {
    display: flex;
    gap: 6px;
}

.cal-tf-btn[b-g3k8i0gwzj] {
    flex: 1;
    padding: 14px;
    border: 1px solid var(--cal-border);
    border-radius: var(--cal-radius-sm);
    background: var(--cal-surface-2);
    color: var(--cal-text);          /* ← full contrast, not muted */
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--cal-fast) var(--cal-ease);
    min-height: 48px;
}

.cal-tf-btn:hover[b-g3k8i0gwzj] {
    border-color: var(--cal-gold-dim);
    background: var(--cal-surface-3);
}

.cal-tf-btn--selected[b-g3k8i0gwzj] {
    border-color: var(--cal-gold);
    background: var(--cal-gold-glow);
    color: var(--cal-gold);
    box-shadow: var(--cal-shadow-gold);
}

/* ── Confidence Chips ── */
.cal-confidence-row[b-g3k8i0gwzj] {
    display: flex;
    gap: 6px;
    margin-top: 12px;   /* ← gap between T/F row and chips */
}

.cal-confidence-chip[b-g3k8i0gwzj] {
    flex: 1;
    padding: 14px 4px;
    border: 1px solid var(--cal-border);
    border-radius: var(--cal-radius-xs);
    background: var(--cal-surface-2);
    color: var(--cal-text);          /* ← full contrast, matches T/F buttons */
    font-size: 13px;
    font-family: var(--cal-mono);
    cursor: pointer;
    text-align: center;
    transition: all var(--cal-fast) var(--cal-ease);
    min-height: 48px;
}

.cal-confidence-chip:hover[b-g3k8i0gwzj] {
    border-color: var(--cal-gold-dim);
    color: var(--cal-text);
    background: var(--cal-surface-3);
}

.cal-confidence-chip--selected[b-g3k8i0gwzj] {
    border-color: var(--cal-gold);
    background: var(--cal-gold-glow);
    color: var(--cal-gold);
    font-weight: 700;
    box-shadow: var(--cal-shadow-gold);
}

/* ── Submit button ── */
.cal-btn--primary[b-g3k8i0gwzj] {
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    border: none;
    border-radius: var(--cal-radius-sm);
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--cal-fast) var(--cal-ease);
    min-height: 48px;
}

.cal-btn--primary:hover[b-g3k8i0gwzj] {
    background: var(--accent-fill-hover);
    color: var(--foreground-on-accent-hover);
    box-shadow: var(--elevation-shadow-card-rest);
    filter: none;
}

.cal-btn--primary:active[b-g3k8i0gwzj] {
    background: var(--accent-fill-active);
    color: var(--foreground-on-accent-active);
}

.cal-btn--primary:disabled[b-g3k8i0gwzj] {
    opacity: 1;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-disabled);
    border: 1px solid var(--neutral-stroke-rest);
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}

/* ── MOBILE: single-card flow (default) ── */

.cal-desktop-stack[b-g3k8i0gwzj] {
    display: none;
}

.cal-mobile-flow[b-g3k8i0gwzj] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.cal-submit-btn[b-g3k8i0gwzj] {
    margin-top: 20px;
    width: 100%;
    max-width: 320px;
}

.cal-next-btn[b-g3k8i0gwzj] {
    margin-top: 20px;
    width: 100%;
    max-width: 320px;
}

/* ── DESKTOP: all questions stacked (≥ 768px) ── */

@media (min-width: 768px) {
    .cal-mobile-flow[b-g3k8i0gwzj] {
        display: none;
    }

    .cal-desktop-stack[b-g3k8i0gwzj] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        flex: 1;
        overflow-y: auto;
        padding: 8px 24px 32px;
    }

    /* Inline desktop card — all elements owned by BinaryQuizV2, no ChildContent delegation */
    .cal-d-card[b-g3k8i0gwzj] {
        width: 100%;
        max-width: 640px;
        background: var(--cal-surface);
        border: 1px solid var(--cal-border);
        border-radius: var(--cal-radius-lg);
        padding: 24px;
        box-shadow: var(--cal-shadow);
        display: flex;
        flex-direction: column;
        gap: 14px;
        transition: border-color var(--cal-fast) var(--cal-ease);
    }

    .cal-d-card--done[b-g3k8i0gwzj] {
        border-color: var(--cal-gold);
    }

    .cal-d-card-num[b-g3k8i0gwzj] {
        display: none;
    }

    /* ── iPad+: T/F buttons and confidence chips on one row, wraps when card is narrow ── */
    .cal-d-actions-row[b-g3k8i0gwzj] {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .cal-d-actions-row .cal-tf-row[b-g3k8i0gwzj] {
        flex: 0 0 180px;
    }

    .cal-d-actions-row .cal-confidence-row[b-g3k8i0gwzj] {
        flex: 1;
        min-width: 0;
        margin-top: 0;
        flex-wrap: wrap;
    }

    .cal-desktop-submit[b-g3k8i0gwzj] {
        width: 100%;
        max-width: 320px;
        margin-top: 8px;
    }
}

/* /Features/Calibration/Components/BinaryResultsV2.razor.rz.scp.css */
/* BinaryResultsV2 — results table, row borders, verdict banner */

/* ── Header Row ── */
.cal-results-header[b-vb819l0kak] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.cal-back-btn[b-vb819l0kak] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-fill-rest) 34%, transparent);
    color: var(--accent-fill-rest);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: var(--cal-radius-sm);
    transition: background var(--cal-fast) var(--cal-ease), box-shadow var(--cal-fast) var(--cal-ease);
    width: fit-content;
    letter-spacing: 0.01em;
}

.cal-back-btn:hover[b-vb819l0kak] {
    background: color-mix(in srgb, var(--accent-fill-rest) 22%, transparent);
    border-color: color-mix(in srgb, var(--accent-fill-hover) 42%, transparent);
    color: var(--accent-fill-hover);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent-fill-rest) 24%, transparent);
}

.cal-back-btn:active[b-vb819l0kak] {
    background: color-mix(in srgb, var(--accent-fill-active) 30%, transparent);
    border-color: color-mix(in srgb, var(--accent-fill-active) 50%, transparent);
    color: var(--accent-fill-active);
}

.cal-results-title-row[b-vb819l0kak] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.cal-page-title[b-vb819l0kak] {
    font-size: 22px;
    font-weight: 700;
    color: var(--cal-text);
    margin: 0;
}

.cal-results-date[b-vb819l0kak] {
    font-size: 13px;
    color: var(--cal-text-muted);
}

[b-vb819l0kak] .cal-skeleton-date {
    display: block;
    width: 140px !important;
    max-width: 100%;
    height: 14px !important;
}

/* ── Verdict Banner ── */
.cal-verdict[b-vb819l0kak] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--cal-radius-sm);
    border-left: 4px solid;
    margin-bottom: 24px;
    font-size: 14px;
}

.cal-verdict--skeleton[b-vb819l0kak] {
    border-left-color: var(--neutral-stroke-rest);
}

[b-vb819l0kak] .cal-skeleton-verdict-label {
    display: block;
    width: 180px !important;
    max-width: 100%;
    height: 16px !important;
}

[b-vb819l0kak] .cal-skeleton-verdict-detail {
    display: block;
    width: 130px !important;
    max-width: 100%;
    height: 14px !important;
}

.cal-verdict--calibrated[b-vb819l0kak] {
    border-left-color: var(--cal-success);
    background: rgba(46, 204, 113, 0.08);
}

.cal-verdict--overconfident[b-vb819l0kak] {
    border-left-color: var(--cal-error);
    background: rgba(231, 76, 60, 0.08);
}

.cal-verdict--underconfident[b-vb819l0kak] {
    border-left-color: var(--cal-gold);
    background: var(--cal-gold-glow);
}

.cal-verdict-label[b-vb819l0kak] {
    font-weight: 700;
    color: var(--cal-text);
}

.cal-verdict-detail[b-vb819l0kak] {
    color: var(--cal-text-muted);
}

/* ── Results Table ── */
.cal-results-table-wrap[b-vb819l0kak] {
    overflow-x: auto;
}

.cal-results-table[b-vb819l0kak] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.cal-results-table th[b-vb819l0kak] {
    text-align: left;
    color: var(--cal-text-muted);
    font-weight: 500;
    padding: 8px 12px;
    border-bottom: 1px solid var(--cal-border);
    font-size: 13px;
}

.cal-results-table td[b-vb819l0kak] {
    padding: 12px;
    color: var(--cal-text);
    border-bottom: 1px solid rgba(58, 128, 180, 0.06);
    vertical-align: top;
}

.cal-results-table td:first-child[b-vb819l0kak] {
    position: relative;
}

.cal-row--skeleton td[b-vb819l0kak] {
    vertical-align: middle;
}

[b-vb819l0kak] .cal-skeleton-line {
    display: block;
    height: 10px !important;
}

[b-vb819l0kak] .cal-skeleton-line--statement {
    width: 92% !important;
}

[b-vb819l0kak] .cal-skeleton-line--answer {
    width: 70% !important;
}

[b-vb819l0kak] .cal-skeleton-line--confidence {
    width: 56% !important;
}

/* 3px left-border correctness indicator */
.cal-row--correct td:first-child[b-vb819l0kak] {
    box-shadow: none;
}

.cal-row--incorrect td:first-child[b-vb819l0kak] {
    box-shadow: none;
}

.cal-row--correct td:first-child[b-vb819l0kak]::before,
.cal-row--incorrect td:first-child[b-vb819l0kak]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.cal-row--correct td:first-child[b-vb819l0kak]::before {
    background: var(--cal-success);
}

.cal-row--incorrect td:first-child[b-vb819l0kak]::before {
    background: var(--cal-error);
}

.cal-rationale[b-vb819l0kak] {
    display: block;
    font-style: italic;
    color: var(--cal-text-dim);
    font-size: 13px;
    margin-top: 4px;
}

/* ── Mobile ── */
@media (max-width: 599px) {
    .cal-col-answer[b-vb819l0kak] {
        display: none;
    }

    [b-vb819l0kak] .cal-skeleton-date {
        width: 120px !important;
    }

    [b-vb819l0kak] .cal-skeleton-verdict-label {
        width: 150px !important;
    }

    [b-vb819l0kak] .cal-skeleton-verdict-detail {
        width: 110px !important;
    }

    [b-vb819l0kak] .cal-skeleton-line--statement {
        width: 96% !important;
    }

    [b-vb819l0kak] .cal-skeleton-line--confidence {
        width: 72% !important;
    }

    .cal-rationale[b-vb819l0kak] {
        display: none;
    }
}

/* /Features/Calibration/Components/CalibrationLayoutV2.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   CalibrationLayoutV2 — Signal Station Design System
   Design tokens, layout grid, shared ::deep styles, @keyframes
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout Shell ── */
.cal-layout[b-8ah6k8ic7b] {
    --cal-navy-deep: #0D1526;
    --cal-bg: #111B3A;
    --cal-surface: #172042;
    --cal-surface-2: #1C2750;
    --cal-surface-3: #223060;

    --cal-blue: #3A80B4;
    --cal-blue-dim: rgba(58, 128, 180, 0.3);
    --cal-gold: #EBBF09;
    --cal-gold-dim: rgba(235, 191, 9, 0.15);
    --cal-gold-glow: rgba(235, 191, 9, 0.08);
    --cal-gold-shadow: 0 0 16px rgba(235, 191, 9, 0.15);
    --cal-amber: #F0A500;
    --cal-success: #2ECC71;
    --cal-error: #E74C3C;
    --cal-text: #E8ECF4;
    --cal-text-muted: #8899B8;
    --cal-text-dim: #556685;

    --cal-border: rgba(58, 128, 180, 0.2);
    --cal-border-gold: rgba(235, 191, 9, 0.4);

    --cal-radius-xs: 4px;
    --cal-radius-sm: 8px;
    --cal-radius-md: 12px;
    --cal-radius-lg: 16px;
    --cal-radius-xl: 20px;

    --cal-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(58, 128, 180, 0.08);
    --cal-shadow-gold: 0 0 16px rgba(235, 191, 9, 0.15);

    --cal-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --cal-fast: 150ms;
    --cal-medium: 300ms;
    --cal-slow: 500ms;

    --cal-font: "Segoe UI Variable", "Segoe UI", sans-serif;
    --cal-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;   

    /* Fill the viewport below the 48px app bar — same technique as .after-root */
    position: absolute;
    left: 0;
    right: 0;
    top: 48px;
    bottom: 0;

    display: flex;
    flex-direction: row;
    background: var(--cal-bg);
    color: var(--cal-text);
    font-family: var(--cal-font);
    overflow: hidden;
}

.cal-layout-main[b-8ah6k8ic7b] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

/* ── Shared Keyframes ── */

@keyframes calSwipeOutLeft-b-8ah6k8ic7b {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-60px); }
}

@keyframes calSwipeInRight-b-8ah6k8ic7b {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes calFadeIn-b-8ah6k8ic7b {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes calPulse-b-8ah6k8ic7b {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.8; }
}

/* ── Shared Deep Styles (inherited by child components) ── */

[b-8ah6k8ic7b] .cal-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}

[b-8ah6k8ic7b] .cal-results-shell {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

[b-8ah6k8ic7b] .cal-quiz-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
    padding: 16px;
}

[b-8ah6k8ic7b] .cal-skeleton-pulse {
    background: var(--cal-surface);
    border-radius: var(--cal-radius-md);
    height: 200px;
    animation: calPulse-b-8ah6k8ic7b 1.5s ease-in-out infinite;
}

[b-8ah6k8ic7b] .cal-error-banner {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid var(--cal-error);
    border-radius: var(--cal-radius-sm);
    padding: 12px 16px;
    color: var(--cal-error);
    margin-bottom: 16px;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .cal-layout-main[b-8ah6k8ic7b] {
        padding: 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Light Mode Token Overrides
   ───────────────────────────────────────────────────────────────
   FluentDesignTheme sets document.body.dataset.theme to "light"
   or "dark". Overriding the --cal-* tokens here is sufficient —
   every child component inherits the new values via CSS cascade.
   Blazor scopes this to: body[data-theme='light'] .cal-layout[b-x]
   ═══════════════════════════════════════════════════════════════ */

body[data-theme='light'] .cal-layout[b-8ah6k8ic7b] {
    --cal-navy-deep:   #EEF3FB;
    --cal-bg:          #F4F7FC;
    --cal-surface:     #FFFFFF;
    --cal-surface-2:   #EBF0FA;
    --cal-surface-3:   #E1E9F7;

    --cal-blue:        #2563A8;
    --cal-blue-dim:    rgba(37, 99, 168, 0.15);

    --cal-gold:        #C9920A;
    --cal-gold-dim:    rgba(201, 146, 10, 0.15);
    --cal-gold-glow:   rgba(201, 146, 10, 0.06);
    --cal-gold-shadow: 0 0 16px rgba(201, 146, 10, 0.18);
    --cal-shadow-gold: 0 0 16px rgba(201, 146, 10, 0.18);
    --cal-amber:       #D08200;

    --cal-success:     #1A9050;
    --cal-error:       #C0392B;

    --cal-text:        #0F1C35;
    --cal-text-muted:  #4A6080;
    --cal-text-dim:    #7A96B8;

    --cal-border:      rgba(37, 99, 168, 0.18);
    --cal-border-gold: rgba(201, 146, 10, 0.35);

    --cal-shadow:      0 4px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(37, 99, 168, 0.07);

    background: var(--cal-bg);
    color: var(--cal-text);
}

/* ── Primary button text ──────────────────────────────────────────
   .cal-btn--primary, .cal-new-quiz-btn, and .cal-sidebar-new-quiz
   live in child components so ::deep is required. Blazor expands
   this to: body[data-theme='light'] [b-x] .cal-btn--primary { }
   which correctly targets buttons anywhere inside .cal-layout.
   --cal-navy-deep is now a pale sidebar colour in light mode, so
   button foreground is restored to an explicit dark value here.    */
body[data-theme='light'][b-8ah6k8ic7b]  .cal-btn--primary,
body[data-theme='light'][b-8ah6k8ic7b]  .cal-new-quiz-btn {
    color: #0F1C35;
}
/* /Features/Calibration/Components/CalibrationSidebarV2.razor.rz.scp.css */
/* CalibrationSidebarV2 — Signal Station sidebar */

.cal-sidebar[b-1aexrz67db] {
    width: 250px;
    min-width: 250px;
    background: var(--neutral-fill-stealth-rest);
    border-right: 1px solid var(--neutral-stroke-divider-rest);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 12px 0;
}

.cal-sidebar-link[b-1aexrz67db] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--neutral-foreground-rest);
    text-decoration: none;
    font-size: 13px;
    transition: background var(--cal-fast) var(--cal-ease),
                color var(--cal-fast) var(--cal-ease);
    border-left: 3px solid transparent;
}

.cal-sidebar-link:hover[b-1aexrz67db] {
    background: var(--neutral-fill-stealth-hover);
    color: var(--neutral-foreground-rest);
}

.cal-sidebar-link:active[b-1aexrz67db] {
    background: var(--neutral-fill-stealth-pressed);
    color: var(--neutral-foreground-rest);
}

.cal-sidebar-link--summary[b-1aexrz67db] {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    font-size: 14px;
}

.cal-sidebar-icon[b-1aexrz67db] {
    font-size: 16px;
    flex-shrink: 0;
}

.cal-sidebar-text[b-1aexrz67db] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-sidebar-divider[b-1aexrz67db] {
    height: 1px;
    background: var(--neutral-stroke-divider-rest);
    margin: 8px 16px;
}

@media (max-width: 767px) {
    .cal-sidebar[b-1aexrz67db] {
        display: none;
    }
}

/* ── iPad Pro (portrait + landscape) ── */
@media (min-width: 768px) and (max-width: 1194px) {
    .cal-sidebar[b-1aexrz67db] {
        width: 270px;
        min-width: 270px;
    }

    .cal-sidebar-link[b-1aexrz67db] {
        font-size: 15px;
        padding: 12px 18px;
    }

    .cal-sidebar-link--summary[b-1aexrz67db] {
        font-size: 16px;
    }
}
/* /Features/Calibration/Components/NewQuizDialogV2.razor.rz.scp.css */
/* NewQuizDialogV2 — trigger buttons + Signal Station modal overlay */

/* ── Trigger Buttons (Inline) ── */
.cal-new-quiz-btn-row[b-nm2ky9g3a6] {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

button.cal-new-quiz-btn[b-nm2ky9g3a6] {
    flex: 1;
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    border: none;
    border-radius: var(--cal-radius-sm);
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--cal-fast) var(--cal-ease);
    min-height: 44px;
    white-space: nowrap;
}

button.cal-new-quiz-btn:hover[b-nm2ky9g3a6] {
    background: var(--accent-fill-hover);
    color: var(--foreground-on-accent-hover);
    box-shadow: var(--elevation-shadow-card-rest);
    filter: none;
}

/* ══════════════════════════════════════════════════
   Modal Overlay
   Mobile: bottom sheet (slides up from bottom)
   600px+: centred card
   ══════════════════════════════════════════════════ */

.cal-modal-backdrop[b-nm2ky9g3a6] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: flex-end;   /* bottom sheet on mobile */
    justify-content: center;
    z-index: 9999;
    padding: 0;
}

/* ── Card ── */
.cal-modal-card[b-nm2ky9g3a6] {
    background: var(--cal-surface);
    border: 1px solid var(--cal-border);
    border-top: 1px solid rgba(58, 128, 180, 0.35);
    border-radius: var(--cal-radius-lg) var(--cal-radius-lg) 0 0;
    width: 100%;
    max-width: 100%;
    box-shadow: 0 -8px 48px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    overflow-y: auto;
}

/* ── Header ── */
.cal-modal-header[b-nm2ky9g3a6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--cal-border);
    flex-shrink: 0;
}

.cal-modal-title[b-nm2ky9g3a6] {
    font-size: 18px;
    font-weight: 700;
    color: var(--cal-text);
    margin: 0;
}

.cal-modal-close[b-nm2ky9g3a6] {
    background: transparent;
    border: none;
    color: var(--cal-text-muted);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--cal-radius-xs);
    line-height: 1;
    transition: color var(--cal-fast) var(--cal-ease),
                background var(--cal-fast) var(--cal-ease);
}

.cal-modal-close:hover[b-nm2ky9g3a6] {
    color: var(--cal-text);
    background: var(--cal-surface-2);
}

/* ── Body ── */
.cal-modal-body[b-nm2ky9g3a6] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
}

.cal-modal-section[b-nm2ky9g3a6] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cal-modal-label[b-nm2ky9g3a6] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--cal-text-muted);
}

/* ── Option Cards ── */
.cal-option-row[b-nm2ky9g3a6] {
    display: flex;
    gap: 8px;
}

.cal-option-card[b-nm2ky9g3a6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
    background: var(--cal-surface-2);
    border: 1px solid var(--cal-border);
    border-radius: var(--cal-radius-sm);
    color: var(--cal-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--cal-fast) var(--cal-ease);
    min-height: 72px;
}

.cal-option-card:hover[b-nm2ky9g3a6] {
    border-color: var(--cal-gold-dim);
    background: var(--cal-surface-3);
}

.cal-option-card--selected[b-nm2ky9g3a6] {
    border-color: var(--cal-gold);
    background: var(--cal-gold-glow);
    color: var(--cal-gold);
    box-shadow: var(--cal-shadow-gold);
}

/* Count chips — compact, monospaced number */
.cal-option-card--count[b-nm2ky9g3a6] {
    flex-direction: row;
    min-height: 48px;
    font-size: 16px;
    font-family: var(--cal-mono);
    gap: 0;
}

/* ── Quiz Type Help Text ── */
.cal-quiz-type-help[b-nm2ky9g3a6] {
    padding: 10px 12px;
    border-left: 3px solid var(--cal-gold);
    background: var(--cal-gold-glow);
    border-radius: 0 var(--cal-radius-xs) var(--cal-radius-xs) 0;
}

.cal-quiz-type-help p[b-nm2ky9g3a6] {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--cal-text-muted);
}

.cal-quiz-type-help strong[b-nm2ky9g3a6] {
    color: var(--cal-text);
    font-weight: 700;
}

.cal-option-icon[b-nm2ky9g3a6] {
    font-size: 22px;
    line-height: 1;
}

.cal-option-text[b-nm2ky9g3a6] {
    font-size: 14px;
    font-weight: 600;
}

/* ── Footer ── */
.cal-modal-footer[b-nm2ky9g3a6] {
    display: flex;
    gap: 8px;
    padding: 16px 24px 28px;
    border-top: 1px solid var(--cal-border);
    flex-shrink: 0;
}

.cal-modal-cancel[b-nm2ky9g3a6] {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: 1px solid var(--cal-border);
    border-radius: var(--cal-radius-sm);
    color: var(--cal-text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--cal-fast) var(--cal-ease);
}

.cal-modal-cancel:hover[b-nm2ky9g3a6] {
    border-color: var(--cal-text-dim);
    color: var(--cal-text);
}

.cal-modal-create[b-nm2ky9g3a6] {
    flex: 2;
    padding: 12px;
    background: var(--accent-fill-rest);
    border: none;
    border-radius: var(--cal-radius-sm);
    color: var(--foreground-on-accent-rest);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--cal-fast) var(--cal-ease);
}

.cal-modal-create:hover[b-nm2ky9g3a6] {
    background: var(--accent-fill-hover);
    color: var(--foreground-on-accent-hover);
    box-shadow: var(--elevation-shadow-card-rest);
    filter: none;
}

.cal-modal-create:active[b-nm2ky9g3a6] {
    background: var(--accent-fill-active);
    color: var(--foreground-on-accent-active);
}

.cal-modal-create:disabled[b-nm2ky9g3a6] {
    opacity: 1;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-hint);
    border: 1px solid var(--neutral-stroke-rest);
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}

/* ── Tablet / Desktop (≥ 600px): centred card ── */
@media (min-width: 600px) {
    .cal-modal-backdrop[b-nm2ky9g3a6] {
        align-items: center;
        padding: 24px;
    }

    .cal-modal-card[b-nm2ky9g3a6] {
        border-radius: var(--cal-radius-lg);
        border-top: 1px solid var(--cal-border);
        max-width: 520px;
        width: 100%;
        box-shadow: var(--cal-shadow), 0 0 0 1px rgba(58, 128, 180, 0.12);
    }
}

/* /Features/Calibration/Components/RangeQuizV2.razor.rz.scp.css */
/* RangeQuizV2 — range inputs, navigation */

.cal-range-question[b-vele4ojk7d] {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

.cal-range-units[b-vele4ojk7d] {
    font-size: 13px;
    color: var(--cal-text-dim);
    font-family: var(--cal-mono);
}

.cal-range-inputs[b-vele4ojk7d] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.cal-range-field[b-vele4ojk7d] {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cal-range-label[b-vele4ojk7d] {
    font-size: 12px;
    color: var(--cal-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cal-range-input[b-vele4ojk7d] {
    background: var(--cal-surface-2);
    border: 1px solid var(--cal-border);
    border-radius: var(--cal-radius-xs);
    padding: 12px;
    color: var(--cal-text);
    font-family: var(--cal-mono);
    font-size: 16px;
    outline: none;
    transition: border-color var(--cal-fast) var(--cal-ease);
    min-height: 44px;
}

.cal-range-input:focus[b-vele4ojk7d] {
    border-color: var(--cal-gold);
    box-shadow: 0 0 0 2px var(--cal-gold-dim);
}

/* Hide number input spinners */
.cal-range-input[b-vele4ojk7d]::-webkit-outer-spin-button,
.cal-range-input[b-vele4ojk7d]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cal-range-input[type="number"][b-vele4ojk7d] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ── Progress (shared) ── */
.cal-progress-wrap[b-vele4ojk7d] {
    padding: 0 2px;
    flex-shrink: 0;
}

.cal-progress-track[b-vele4ojk7d] {
    height: 6px;
    background: var(--cal-surface-2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.cal-progress-fill[b-vele4ojk7d] {
    height: 100%;
    background: linear-gradient(90deg, var(--cal-blue), var(--cal-gold));
    border-radius: 3px;
    position: relative;
    transition: width var(--cal-medium) var(--cal-ease);
    min-width: 6px;
}

.cal-progress-pip[b-vele4ojk7d] {
    position: absolute;
    right: -3px;
    top: -3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cal-gold);
    box-shadow: 0 0 8px var(--cal-gold);
}

.cal-progress-label[b-vele4ojk7d] {
    font-size: 12px;
    color: var(--cal-gold);
    text-align: right;
    margin-bottom: 16px;
    font-family: var(--cal-mono);
}

.cal-range-nav[b-vele4ojk7d] {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.cal-nav-btn[b-vele4ojk7d] {
    padding: 12px 40px;
    min-width: 160px;
}

.cal-btn--primary[b-vele4ojk7d] {
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    border: none;
    border-radius: var(--cal-radius-sm);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--cal-fast) var(--cal-ease);
    min-height: 48px;
}

.cal-btn--primary:hover[b-vele4ojk7d] {
    background: var(--accent-fill-hover);
    color: var(--foreground-on-accent-hover);
    box-shadow: var(--elevation-shadow-card-rest);
    filter: none;
}

.cal-btn--primary:active[b-vele4ojk7d] {
    background: var(--accent-fill-active);
    color: var(--foreground-on-accent-active);
}

.cal-btn--primary:disabled[b-vele4ojk7d] {
    opacity: 1;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-hint);
    border: 1px solid var(--neutral-stroke-rest);
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}

.cal-btn--ghost[b-vele4ojk7d] {
    background: var(--accent-fill-rest);
    border: 1px solid transparent;
    color: var(--foreground-on-accent-rest);
    border-radius: var(--cal-radius-sm);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--cal-fast) var(--cal-ease);
    min-height: 48px;
}

.cal-btn--ghost:hover[b-vele4ojk7d] {
    background: var(--accent-fill-hover);
    color: var(--foreground-on-accent-hover);
    box-shadow: var(--elevation-shadow-card-rest);
}

.cal-btn--ghost:active[b-vele4ojk7d] {
    background: var(--accent-fill-active);
    color: var(--foreground-on-accent-active);
}

.cal-btn--ghost:disabled[b-vele4ojk7d] {
    opacity: 1;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-hint);
    border: 1px solid var(--neutral-stroke-rest);
    cursor: not-allowed;
    box-shadow: none;
}

/* ── MOBILE: single-card flow (default) ── */

.cal-rd-stack[b-vele4ojk7d] {
    display: none;
}

.cal-rm-flow[b-vele4ojk7d] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* ── DESKTOP: all questions stacked (≥ 768px) ── */

@media (min-width: 768px) {
    .cal-rm-flow[b-vele4ojk7d] {
        display: none;
    }

    .cal-rd-stack[b-vele4ojk7d] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        flex: 1;
        overflow-y: auto;
        padding: 8px 24px 32px;
    }

    .cal-rd-card[b-vele4ojk7d] {
        width: 100%;
        max-width: 640px;
        background: var(--cal-surface);
        border: 1px solid var(--cal-border);
        border-radius: var(--cal-radius-lg);
        padding: 24px;
        box-shadow: var(--cal-shadow);
        display: flex;
        flex-direction: column;
        gap: 12px;
        transition: border-color var(--cal-fast) var(--cal-ease);
    }

    .cal-rd-card--done[b-vele4ojk7d] {
        border-color: var(--cal-gold);
    }

    .cal-rd-submit[b-vele4ojk7d] {
        width: 100%;
        max-width: 320px;
        margin-top: 8px;
    }
}
/* /Features/Calibration/Components/RangeResultsV2.razor.rz.scp.css */
/* RangeResultsV2 — range results table, mobile stacking */

/* ── Header Row ── */
.cal-results-header[b-umpilbnp5i] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.cal-back-btn[b-umpilbnp5i] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-fill-rest) 34%, transparent);
    color: var(--accent-fill-rest);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: var(--cal-radius-sm);
    transition: background var(--cal-fast) var(--cal-ease), box-shadow var(--cal-fast) var(--cal-ease);
    width: fit-content;
    letter-spacing: 0.01em;
}

.cal-back-btn:hover[b-umpilbnp5i] {
    background: color-mix(in srgb, var(--accent-fill-rest) 22%, transparent);
    border-color: color-mix(in srgb, var(--accent-fill-hover) 42%, transparent);
    color: var(--accent-fill-hover);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent-fill-rest) 24%, transparent);
}

.cal-back-btn:active[b-umpilbnp5i] {
    background: color-mix(in srgb, var(--accent-fill-active) 30%, transparent);
    border-color: color-mix(in srgb, var(--accent-fill-active) 50%, transparent);
    color: var(--accent-fill-active);
}

.cal-results-title-row[b-umpilbnp5i] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.cal-page-title[b-umpilbnp5i] {
    font-size: 22px;
    font-weight: 700;
    color: var(--cal-text);
    margin: 0;
}

.cal-results-date[b-umpilbnp5i] {
    font-size: 13px;
    color: var(--cal-text-muted);
}

[b-umpilbnp5i] .cal-skeleton-date {
    display: block;
    width: 140px !important;
    max-width: 100%;
    height: 14px !important;
}

/* ── Verdict Banner ── */
.cal-verdict[b-umpilbnp5i] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--cal-radius-sm);
    border-left: 4px solid;
    margin-bottom: 24px;
    font-size: 14px;
}

.cal-verdict--skeleton[b-umpilbnp5i] {
    border-left-color: var(--neutral-stroke-rest);
}

[b-umpilbnp5i] .cal-skeleton-verdict-label {
    display: block;
    width: 190px !important;
    max-width: 100%;
    height: 16px !important;
}

[b-umpilbnp5i] .cal-skeleton-verdict-detail {
    display: block;
    width: 120px !important;
    max-width: 100%;
    height: 14px !important;
}

.cal-verdict--calibrated[b-umpilbnp5i] {
    border-left-color: var(--cal-success);
    background: rgba(46, 204, 113, 0.08);
}

.cal-verdict--overconfident[b-umpilbnp5i] {
    border-left-color: var(--cal-error);
    background: rgba(231, 76, 60, 0.08);
}

.cal-verdict--underconfident[b-umpilbnp5i] {
    border-left-color: var(--cal-gold);
    background: var(--cal-gold-glow);
}

.cal-verdict-label[b-umpilbnp5i] {
    font-weight: 700;
    color: var(--cal-text);
}

.cal-verdict-detail[b-umpilbnp5i] {
    color: var(--cal-text-muted);
}

/* ── Results Table ── */
.cal-results-table-wrap[b-umpilbnp5i] {
    overflow-x: auto;
}

.cal-results-table[b-umpilbnp5i] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.cal-results-table th[b-umpilbnp5i] {
    text-align: left;
    color: var(--cal-text-muted);
    font-weight: 500;
    padding: 8px 12px;
    border-bottom: 1px solid var(--cal-border);
    font-size: 13px;
}

.cal-results-table td[b-umpilbnp5i] {
    padding: 12px;
    color: var(--cal-text);
    border-bottom: 1px solid rgba(58, 128, 180, 0.06);
    vertical-align: top;
}

.cal-row--skeleton td[b-umpilbnp5i] {
    vertical-align: middle;
}

[b-umpilbnp5i] .cal-skeleton-line {
    display: block;
    height: 10px !important;
}

[b-umpilbnp5i] .cal-skeleton-line--question {
    width: 94% !important;
}

[b-umpilbnp5i] .cal-skeleton-line--units {
    width: 70% !important;
    margin-left: auto;
}

[b-umpilbnp5i] .cal-skeleton-line--answer {
    width: 64% !important;
    margin-left: auto;
}

[b-umpilbnp5i] .cal-skeleton-line--range {
    width: 56% !important;
    margin-left: auto;
}

[b-umpilbnp5i] .cal-skeleton-line--range-mobile {
    width: 70% !important;
    margin-left: auto;
}

.cal-mono[b-umpilbnp5i] {
    font-family: var(--cal-mono);
    text-align: right;
}

th.cal-col-units[b-umpilbnp5i],
th.cal-col-answer-num[b-umpilbnp5i],
th.cal-col-range[b-umpilbnp5i] {
    text-align: right;
}

/* 3px left-border correctness indicator */
.cal-row--correct td:first-child[b-umpilbnp5i] {
    box-shadow: inset 3px 0 0 var(--cal-success);
}

.cal-row--incorrect td:first-child[b-umpilbnp5i] {
    box-shadow: inset 3px 0 0 var(--cal-error);
}

/* Mobile-only stacked range column */
.cal-col-range-mobile[b-umpilbnp5i] {
    display: none;
}

.cal-range-stacked[b-umpilbnp5i] {
    display: inline;
    font-size: 13px;
}

.cal-range-sep[b-umpilbnp5i] {
    color: var(--cal-text-dim);
    font-size: 11px;
}

/* ── Mobile ── */
@media (max-width: 599px) {
    .cal-col-units[b-umpilbnp5i],
    .cal-col-range[b-umpilbnp5i] {
        display: none;
    }

    [b-umpilbnp5i] .cal-skeleton-date {
        width: 120px !important;
    }

    [b-umpilbnp5i] .cal-skeleton-verdict-label {
        width: 160px !important;
    }

    [b-umpilbnp5i] .cal-skeleton-verdict-detail {
        width: 100px !important;
    }

    [b-umpilbnp5i] .cal-skeleton-line--question {
        width: 96% !important;
    }

    [b-umpilbnp5i] .cal-skeleton-line--answer {
        width: 72% !important;
    }

    [b-umpilbnp5i] .cal-skeleton-line--range-mobile {
        width: 78% !important;
    }

    .cal-col-range-mobile[b-umpilbnp5i] {
        display: table-cell;
        text-align: right;
    }
}

/* /Features/Calibration/Components/StatusPageV2.razor.rz.scp.css */
/* StatusPageV2 — Signal Station dashboard */

.cal-status-page[b-x5jmsp27bz] {
    --cal-navy-deep: #0D1526;
    --cal-bg: #111B3A;
    --cal-surface: #172042;
    --cal-surface-2: #1C2750;
    --cal-surface-3: #223060;

    --cal-blue: #3A80B4;
    --cal-blue-dim: rgba(58, 128, 180, 0.3);
    --cal-gold: #EBBF09;
    --cal-gold-dim: rgba(235, 191, 9, 0.15);
    --cal-gold-glow: rgba(235, 191, 9, 0.08);
    --cal-gold-shadow: 0 0 16px rgba(235, 191, 9, 0.15);
    --cal-amber: #F0A500;
    --cal-success: #2ECC71;
    --cal-error: #E74C3C;
    --cal-text: #E8ECF4;
    --cal-text-muted: #8899B8;
    --cal-text-dim: #556685;

    --cal-border: rgba(58, 128, 180, 0.2);
    --cal-border-gold: rgba(235, 191, 9, 0.4);

    --cal-radius-xs: 4px;
    --cal-radius-sm: 8px;
    --cal-radius-md: 12px;
    --cal-radius-lg: 16px;
    --cal-radius-xl: 20px;

    --cal-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(58, 128, 180, 0.08);
    --cal-shadow-gold: 0 0 16px rgba(235, 191, 9, 0.15);

    --cal-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --cal-fast: 150ms;
    --cal-medium: 300ms;
    --cal-slow: 500ms;

    --cal-font: "Segoe UI Variable", "Segoe UI", sans-serif;
    --cal-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;

    background: var(--cal-bg);
    color: var(--cal-text);
    font-family: var(--cal-font);
    min-height: calc(100vh - 48px);
    padding: 24px;
}

.cal-status[b-x5jmsp27bz] {
    animation: calFadeIn-b-x5jmsp27bz var(--cal-medium) var(--cal-ease);
}

.cal-new-row-skeleton[b-x5jmsp27bz] {
    display: flex;
    gap: 8px;
}

[b-x5jmsp27bz] .cal-skeleton-button {
    flex: 1;
    display: block;
    width: 100% !important;
    min-width: 0;
    height: 44px !important;
    border-radius: var(--cal-radius-sm);
}

[b-x5jmsp27bz] .cal-skeleton-line {
    display: block;
    width: 100% !important;
    height: 10px !important;
    border-radius: 999px;
}

[b-x5jmsp27bz] .cal-skeleton-line--short {
    width: 60% !important;
}

[b-x5jmsp27bz] .cal-skeleton-line--value {
    height: 10px !important;
    width: 85% !important;
}

[b-x5jmsp27bz] .cal-skeleton-dot {
    display: block;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50%;
}

.cal-loading-row td[b-x5jmsp27bz] {
    pointer-events: none;
}

.cal-error-banner[b-x5jmsp27bz] {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid var(--cal-error);
    border-radius: var(--cal-radius-sm);
    padding: 12px 16px;
    color: var(--cal-error);
    margin-bottom: 16px;
}

.cal-page-title[b-x5jmsp27bz] {
    font-size: 24px;
    font-weight: 700;
    color: var(--cal-text);
    margin: 0 0 24px 0;
}

.cal-welcome[b-x5jmsp27bz] {
    background: var(--cal-surface);
    border: 1px solid var(--cal-border);
    border-radius: var(--cal-radius-lg);
    padding: 32px;
    text-align: center;
}

.cal-welcome-heading[b-x5jmsp27bz] {
    font-size: 18px;
    font-weight: 600;
    color: var(--cal-text);
    margin: 0 0 12px 0;
}

.cal-welcome-text[b-x5jmsp27bz] {
    color: var(--cal-text-muted);
    font-size: 14px;
    line-height: 1.8;
    margin: 0 0 20px 0;
}

.cal-new-row[b-x5jmsp27bz] {
    margin-bottom: 24px;
}

.cal-grid[b-x5jmsp27bz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.cal-grid--spaced-top[b-x5jmsp27bz] {
    margin-top: 32px;
}

.cal-grid-col[b-x5jmsp27bz] {
    min-width: 0;
}

.cal-section-title[b-x5jmsp27bz] {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--cal-text);
    margin: 0 0 12px 0;
}

.cal-section-title--spaced-top[b-x5jmsp27bz] {
    margin-top: 32px;
}

/* ── Summary Table ── */
.cal-summary-table[b-x5jmsp27bz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 16px;
    table-layout: fixed;
}

.cal-summary-table th[b-x5jmsp27bz] {
    text-align: left;
    color: var(--cal-text-muted);
    font-weight: 500;
    padding: 6px 8px;
    border-bottom: 1px solid var(--cal-border);
    overflow-wrap: break-word;
    word-break: break-word;
}

.cal-summary-table td[b-x5jmsp27bz] {
    padding: 8px;
    color: var(--cal-text);
    font-family: var(--cal-mono);
    font-size: 14px;
}

/* ── Chart ── */
.cal-chart-wrap[b-x5jmsp27bz] {
    margin: 16px 0;
    background: var(--cal-surface);
    border: 1px solid var(--cal-border);
    border-radius: var(--cal-radius-md);
    padding: 16px;
}

.cal-chart-caption[b-x5jmsp27bz] {
    color: var(--cal-text-dim);
    font-size: 12px;
    margin: 4px 0 0 0;
}

.cal-chart-tooltip[b-x5jmsp27bz] {
    color: var(--cal-text);
    background: var(--cal-surface);
    padding: 8px;
    border-radius: 4px;
}

/* ── History Table ── */
.cal-history-wrap[b-x5jmsp27bz] {
    overflow-x: auto;
}

.cal-history-table[b-x5jmsp27bz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cal-history-table th[b-x5jmsp27bz] {
    text-align: left;
    color: var(--cal-text-muted);
    font-weight: 500;
    padding: 8px 10px;
    border-bottom: 1px solid var(--cal-border);
}

.cal-history-table td[b-x5jmsp27bz] {
    padding: 10px;
    color: var(--cal-text);
    border-bottom: 1px solid rgba(58, 128, 180, 0.08);
}

[b-x5jmsp27bz] .cal-history-grid {
    margin-top: 2px;
    min-width: max-content;
}

@media (max-width: 767px) {
    .cal-status-page[b-x5jmsp27bz] {
        padding: 16px;
    }

    .cal-grid[b-x5jmsp27bz] {
        grid-template-columns: 1fr;
    }
}

/* ── iPad Pro (portrait + landscape) ── */
@media (min-width: 768px) and (max-width: 1194px) {
    .cal-section-title[b-x5jmsp27bz] {
        font-size: 17px;
    }

    /* Reduce table density so 4 columns fit in a half-width grid column */
    .cal-summary-table[b-x5jmsp27bz] {
        font-size: 11px;
    }

    .cal-summary-table th[b-x5jmsp27bz] {
        padding: 4px 4px;
    }

    .cal-summary-table td[b-x5jmsp27bz] {
        font-size: 12px;
        padding: 6px 4px;
    }

    .cal-history-table[b-x5jmsp27bz] {
        font-size: 14px;
    }

    .cal-history-table th[b-x5jmsp27bz],
    .cal-history-table td[b-x5jmsp27bz] {
        padding: 12px 12px;
    }
}


/* -- Telerik Charts -- */
/* Theming (background, text, gridlines, fonts) comes from the shared df-chart class that
   ThemedTelerikChart applies; this rule only keeps the chart above sibling surfaces in the
   stacking context. */
[b-x5jmsp27bz] div.z-index-chart {
    position: relative !important;
    z-index: 1 !important;
}

@keyframes calFadeIn-b-x5jmsp27bz {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body[data-theme='light'] .cal-status-page[b-x5jmsp27bz] {
    --cal-navy-deep: #EEF3FB;
    --cal-bg: #F4F7FC;
    --cal-surface: #FFFFFF;
    --cal-surface-2: #EBF0FA;
    --cal-surface-3: #E1E9F7;

    --cal-blue: #2563A8;
    --cal-blue-dim: rgba(37, 99, 168, 0.15);

    --cal-gold: #C9920A;
    --cal-gold-dim: rgba(201, 146, 10, 0.15);
    --cal-gold-glow: rgba(201, 146, 10, 0.06);
    --cal-gold-shadow: 0 0 16px rgba(201, 146, 10, 0.18);
    --cal-shadow-gold: 0 0 16px rgba(201, 146, 10, 0.18);
    --cal-amber: #D08200;

    --cal-success: #1A9050;
    --cal-error: #C0392B;

    --cal-text: #0F1C35;
    --cal-text-muted: #4A6080;
    --cal-text-dim: #7A96B8;

    --cal-border: rgba(37, 99, 168, 0.18);
    --cal-border-gold: rgba(201, 146, 10, 0.35);

    --cal-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(37, 99, 168, 0.07);

    background: var(--neutral-fill-layer-rest);
    color: var(--cal-text);
}

body[data-theme='light'][b-x5jmsp27bz]  .cal-new-quiz-btn {
    color: #0F1C35;
}

/* css styles for the dismiss button - hilight when mouse over / clicking */
[b-x5jmsp27bz] fluent-button.delete-btn:hover {
    background: #C42B1C;
}

    [b-x5jmsp27bz] fluent-button.delete-btn:hover svg {
        fill: white !important;
    }

[b-x5jmsp27bz] fluent-button.delete-btn:active {
    background: #DF667B;
}

    [b-x5jmsp27bz] fluent-button.delete-btn:active svg {
        fill: white !important;
    }
/* /Features/Calibration/Shared/QuestionCardV2.razor.rz.scp.css */
/* QuestionCardV2 — Dark surface card */

.cal-question-card[b-ntkki476db] {
    background: var(--cal-surface);
    border: 1px solid var(--cal-border);
    border-radius: var(--cal-radius-lg);
    padding: 28px 24px;
    box-shadow: var(--cal-shadow);
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    overflow: hidden;
}

.cal-question-number[b-ntkki476db] {
    font-family: var(--cal-mono);
    font-size: 13px;
    color: var(--cal-gold);
    font-weight: 600;
    letter-spacing: 0.05em;
}

.cal-question-body[b-ntkki476db] {
    font-size: 16px;
    line-height: 1.6;
    color: var(--cal-text);
    font-weight: 500;
}

.cal-question-card--complete[b-ntkki476db] {
    border-color: var(--cal-gold);
}

/* Swipe animations */
.cal-swipe-out[b-ntkki476db] {
    animation: calSwipeOutLeft var(--cal-medium) var(--cal-ease) forwards;
}

.cal-swipe-in[b-ntkki476db] {
    animation: calSwipeInRight var(--cal-medium) var(--cal-ease) forwards;
}

.cal-fade-in[b-ntkki476db] {
    animation: calFadeIn var(--cal-medium) var(--cal-ease) forwards;
}
/* /Features/RiskFactorVoi/Components/PerFactorVoiSummary.razor.rz.scp.css */
/* Tooltip styling lives with the component that declares the markup.
   FluentTooltip renders its content through FluentTooltipProvider in BaseLayout, so the markup ends
   up at the layout root rather than inside this page. Scoped CSS still reaches it: the scope
   attribute is stamped onto the elements at compile time and travels with them, so these plain
   (non-::deep) selectors match wherever the tooltip is portalled to. Anything anchored to an
   ancestor — e.g. `.rfv-step ::deep …` in the parent view — cannot work, because that ancestor
   isn't in the portal. */


.rfv-vl-tip-t[b-tx43pclw60] {
    font-weight: 600;
    margin-bottom: 8px;
}

.rfv-vl-tiptbl[b-tx43pclw60] {
    border-collapse: collapse;
    font-size: var(--type-ramp-minus-1-font-size);
}

    .rfv-vl-tiptbl th[b-tx43pclw60],
    .rfv-vl-tiptbl td[b-tx43pclw60] {
        padding: 4px 0 4px 18px;
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    /* Row labels lead the table and stay left-aligned. */
    .rfv-vl-tiptbl th:first-child[b-tx43pclw60],
    .rfv-vl-tiptbl td:first-child[b-tx43pclw60] {
        padding-left: 0;
        text-align: left;
        font-weight: 400;
        opacity: .85;
    }

    .rfv-vl-tiptbl thead th[b-tx43pclw60] {
        font-size: var(--type-ramp-minus-2-font-size);
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        opacity: .65;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    }

    .rfv-vl-tiptbl tbody tr:first-child td[b-tx43pclw60] {
        padding-top: 7px;
    }

    /* The tooltip is portalled out of .rfv-workspace, so it can't read the feature's local vars;
       the --df-value-* tokens live on body, which the portal target is under, so they resolve. */
    .rfv-vl-tiptbl .rfv-pos[b-tx43pclw60] { color: var(--df-value-positive); }
    .rfv-vl-tiptbl .rfv-neg[b-tx43pclw60] { color: var(--df-value-negative); }
/* /Features/RiskFactorVoi/Components/RiskFactorVoiChartsView.razor.rz.scp.css */
/* Page skeleton, KPI strip, label idioms and signed colours are shared across every step and live in
   Pages/RiskFactorVoi/RiskFactorVoiWorkspace.razor.css. Only what is specific to this step is here. */

/* Hero gets the extra width; the two supporting stats share the rest. */
.rfv-step[b-8643qonv7r]  .rfv-kpi-row {
    grid-template-columns: 1.4fr 1fr 1fr;
}

/* ── per-chart stat strip (prior / min / max / break-even) ──────────────────
   Rendered into the chart's Subheader slot, so it lands under the chart's own header row. Spacing
   comes from .rfv-chart's flex gap alone — the strip carried its own margins as well, and the two
   compounded into the gap that showed up between the figures and the plot. */
.rfv-step[b-8643qonv7r]  .rfv-cstrip {
    display: flex;
    gap: 22px;
    margin: 0;
    padding: 0 2px;
    flex-wrap: wrap;
}

.rfv-step[b-8643qonv7r]  .rfv-cstat {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* Break-even is a different kind of fact from the three beside it — those describe the distribution,
   this one describes the decision and labels the shaded band. A rule sets it apart without giving it
   a second row. */
.rfv-step[b-8643qonv7r]  .rfv-cstat-mark {
    padding-left: 22px;
    border-left: 1px solid var(--neutral-stroke-divider-rest);
}

/* EYEBROW — see the idiom note in the workspace stylesheet. */
.rfv-step[b-8643qonv7r]  .rfv-cstat-l {
    font-size: var(--type-ramp-minus-2-font-size);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
    font-weight: 700;
}

.rfv-step[b-8643qonv7r]  .rfv-cstat-v {
    font-size: var(--type-ramp-base-font-size);
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .rfv-step[b-8643qonv7r]  .rfv-kpi-row {
        grid-template-columns: 1fr 1fr;
    }

    .rfv-step[b-8643qonv7r]  .rfv-hero {
        grid-column: 1 / -1;
    }
}

@media (max-width: 440px) {
    .rfv-step[b-8643qonv7r]  .rfv-kpi-row {
        grid-template-columns: 1fr;
    }
}
/* /Features/RiskFactorVoi/Components/RiskFactorVoiDecisionTree.razor.rz.scp.css */
/* No frame or fill: the tree sits directly on the page surface like every other block in the
   workspace. overflow stays because a deep tree can still outrun the viewport vertically even at
   full width — it just scrolls without announcing itself as a card. */
.rfv-treewrap[b-h0qe06nilt] {
    overflow: auto;
    max-height: 74vh;
}

.rfv-tree[b-h0qe06nilt] {
    display: block;
}
/* /Features/RiskFactorVoi/Components/RiskFactorVoiDistributionChart.razor.rz.scp.css */
.rfv-chart[b-h28nh7ywr4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rfv-chart-head[b-h28nh7ywr4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* TERM — this names the plot, but it sits under a Typography.Subject section heading that already
   titles the block, so at base/foreground the two competed. Dropping it to the term tier makes the
   hierarchy read: section heading, then what the plot beneath it shows. */
.rfv-chart-title[b-h28nh7ywr4] {
    font-size: var(--type-ramp-minus-1-font-size);
    line-height: var(--type-ramp-minus-1-line-height);
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

/* The S-curve/histogram switch uses the shared .rfv-toggle (workspace stylesheet). */

.rfv-chart-empty[b-h28nh7ywr4] {
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-base-font-size);
    padding: 24px 8px;
    text-align: center;
}

/* The plot fills its grid column and takes its height from the ratio, so nothing is pinned to a pixel
   width. The cap stops it turning into a letterbox on wide screens, where a true 4:3 would be far
   taller than the fold. */
.rfv-chart-plot[b-h28nh7ywr4] {
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 520px;
    min-height: 320px;
}

.rfv-chart-plot[b-h28nh7ywr4]  .k-chart {
    height: 100%;
}

/* Telerik renders the tooltip in a popup outside this component's DOM, but the template markup is
   declared here, so it carries this component's scope attribute and these plain selectors reach it. */
.rfv-chart-tip[b-h28nh7ywr4] {
    font-family: var(--body-font);
    line-height: 1.35;
}

.rfv-chart-tip-v[b-h28nh7ywr4] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rfv-chart-tip-l[b-h28nh7ywr4] {
    font-size: var(--type-ramp-minus-1-font-size);
    opacity: .85;
    font-variant-numeric: tabular-nums;
}
/* /Features/RiskFactorVoi/Components/RiskFactorVoiInputsView.razor.rz.scp.css */
/* Page skeleton, view toggle, KPI strip, label idioms and signed colours are shared across every step
   and live in Pages/RiskFactorVoi/RiskFactorVoiWorkspace.razor.css. Only what is specific to this
   step is here. */

/* ── economics field grid: two columns (NPVs on row 1, hurdles on row 2) ────
   Columns are width-capped rather than 1fr — at the section's desktop width a
   1fr column makes a ~500px box for a short number. */
.rfv-step[b-3nzsrpilki]  .rfv-fgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 260px));
    gap: 16px;
}

.rfv-step[b-3nzsrpilki]  .rfv-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.rfv-step[b-3nzsrpilki]  .rfv-field > label {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
    font-weight: 600;
}

/* Keep the number wide and the "%" suffix tight, instead of TextRow's default 50/50 field/right
   split — that split right-aligns the value inside the left half, so it reads as centred. */
.rfv-step[b-3nzsrpilki]  .rfv-field .sortable-item-content.has-right fluent-text-field {
    flex: 1 1 auto;
}

.rfv-step[b-3nzsrpilki]  .rfv-field .sortable-item-content.has-right .textrow-right {
    flex: 0 0 auto;
}

/* ── risk-factor sortable list ─────────────────────────────────────────── */
/* FluentSortableList lays items out at a FIXED height (--fluent-sortable-list-item-height),
   so each row must be a single line — a multi-line card overflows into the next item. Header
   and rows share the same flex columns; the whole thing scrolls horizontally when narrow. */
.rfv-step[b-3nzsrpilki]  .rfv-flist {
    overflow-x: auto;
}

/* DocumentLayout reserves 30px to the right of every .sortable-item app-wide (for the audit gutter
   its lists carry). Ours puts the audit mark in a column instead, so that reservation just makes the
   rows 30px narrower than the header and add row either side of them — which is why the right edges
   and the header columns didn't line up. Selector is list-qualified so it outranks that rule. */
.rfv-step[b-3nzsrpilki]  .rfv-sortable .sortable-item {
    margin-right: 0;
}

/* width:100% inside an overflow-x container resolves against the VISIBLE width, not the scrollable
   content width — so once the list scrolled, every row's box ended at the viewport edge and its right
   border was clipped, while the add row (whose 100% resolved against a different ancestor) ended
   somewhere else again. min-width:100% + width:max-content is the pairing that works: max-content
   sizes each row to its columns so the frame always encloses them, and min-width stretches it to fill
   when there is room, letting the flexible name column absorb the slack as before. */
.rfv-step[b-3nzsrpilki]  .rfv-fhead,
.rfv-step[b-3nzsrpilki]  .rfv-frow,
.rfv-step[b-3nzsrpilki]  .rfv-fadd {
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    min-width: 100%;
}

/* The wrappers FluentSortableList puts between the list and each row have to size to their content
   too, or they clip the rows back to the visible width and undo the above. */
.rfv-step[b-3nzsrpilki]  .rfv-sortable,
.rfv-step[b-3nzsrpilki]  .rfv-sortable .sortable-item {
    min-width: max-content;
}

/* Terms sit on a shared baseline, with their eyebrows stacked above. Left padding matches the
   row's, so header columns line up with the fields beneath them. */
.rfv-step[b-3nzsrpilki]  .rfv-fhead {
    align-items: flex-end;
    /* 5px matches where the row's content starts (its 1px border + 4px padding); the header has no
       border of its own, so it needs the extra pixel to line its columns up with the fields. */
    padding: 0 4px 8px 5px;
}

.rfv-step[b-3nzsrpilki]  .rfv-hstack {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* EYEBROW — see the idiom note in the workspace stylesheet.
   Group qualifier. Columns without one keep an empty line, so the terms stay aligned. */
.rfv-step[b-3nzsrpilki]  .rfv-eyebrow {
    font-size: var(--type-ramp-minus-2-font-size);
    line-height: var(--type-ramp-minus-2-line-height);
    min-height: var(--type-ramp-minus-2-line-height);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--neutral-foreground-hint);
    opacity: .75;
}

/* TERM — matches the economics field labels directly above, so the two tables read as one form. */
.rfv-step[b-3nzsrpilki]  .rfv-term {
    font-size: var(--type-ramp-minus-1-font-size);
    line-height: var(--type-ramp-minus-1-line-height);
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

/* Numeric columns align right so the header sits over its right-aligned value. */
.rfv-step[b-3nzsrpilki]  .rfv-fhead > * {
    box-sizing: border-box;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rfv-step[b-3nzsrpilki]  .rfv-fhead .rfv-col-right {
    text-align: right;
}

/* Headers key to the text INSIDE the field, not the field's outer edge — so "Factor name" starts
   where the typed name starts, and the right-aligned headers sit over the value's right edge. The
   two sides need different insets because the value is followed by its "%" suffix. border-box above
   keeps the padding inside the fixed column widths. */
.rfv-step[b-3nzsrpilki]  .rfv-fhead .rfv-fname-col {
    padding-left: 10px;
}

.rfv-step[b-3nzsrpilki]  .rfv-fhead .rfv-col-right {
    padding-right: 2px;
}

/* The ROW is a framed object: its own surface and a visible border enclosing everything, handle
   included. */
.rfv-step[b-3nzsrpilki]  .rfv-frow {
    /* FluentSortableList's .sortable-item is display:flex, so the row is a flex ITEM and shrinks by
       default — its border box compresses while the fixed-width columns overflow it, and the frame
       stops enclosing the row. Pin it so the list scrolls instead. */
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 40px;
    padding: 0 4px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius) * 1px);
    background: var(--neutral-layer-1);
    transition: border-color 120ms ease;
}

/* Hover is a stroke change and nothing more. Fluent uses elevation for LAYER, not for state — the
   --elevation-shadow-card-* tokens say "this sits above the page", which a row being pointed at
   does not. The row also already announces itself three other ways on hover: this stroke, the grip
   fading up, and the TextRow under the cursor taking its own hover fill. Subtle stroke rather than
   the "strong" token, which reads far too dark on the light theme. */
.rfv-step[b-3nzsrpilki]  .rfv-frow:hover {
    border-color: var(--neutral-stroke-hover);
}

/* The handle must carry .sortable-grab for SortableJS to find it, and FluentUI styles that class as
   a protruding tab: position:relative + left:-8px, an opaque --neutral-layer-1 fill, height:100% and
   left-rounded corners. Unopposed, that pushed the handle outside the row AND painted over the row's
   left frame — the frame was always drawn, the handle was covering it. Neutralise those properties
   (selector is row-qualified so it outranks FluentUI's two-class rule) and draw a dot texture instead. */
.rfv-step[b-3nzsrpilki]  .rfv-frow .rfv-grip {
    position: static;
    left: auto;
    width: auto;
    height: auto;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    align-self: stretch;
}

/* The texture is a 4x4px tile with one dot centred in it, so the box has to be a whole number of
   tiles or the last row is bisected by the edge — 18px was 4.5 rows, which is why the dots looked
   cut off at the bottom but fine at the sides (8px is exactly 2 columns). 16px gives a clean 2x4
   grid with 2px of clearance all round, since each dot sits at the centre of its tile. */
.rfv-step[b-3nzsrpilki]  .rfv-grip-dots {
    width: 8px;
    height: 16px;
    background-image: radial-gradient(currentColor 1px, transparent 1.2px);
    background-size: 4px 4px;
}

/* Keyboard users get the same reveal — focus lands inside the row, not on the handle. */
.rfv-step[b-3nzsrpilki]  .rfv-frow:hover .rfv-grip,
.rfv-step[b-3nzsrpilki]  .rfv-frow:focus-within .rfv-grip {
    opacity: 1;
    color: var(--accent-fill-rest);
}

@media (prefers-reduced-motion: reduce) {
    .rfv-step[b-3nzsrpilki]  .rfv-frow,
    .rfv-step[b-3nzsrpilki]  .rfv-grip {
        transition: none;
    }
}

/* Dismiss: no chrome at rest, a circular tint on hover. */
.rfv-step[b-3nzsrpilki]  .rfv-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.rfv-step[b-3nzsrpilki]  .rfv-x:hover:not(:disabled) {
    background: color-mix(in srgb, var(--df-value-negative) 14%, transparent);
    color: var(--df-value-negative);
}

.rfv-step[b-3nzsrpilki]  .rfv-x:disabled {
    opacity: .4;
    cursor: default;
}

.rfv-step[b-3nzsrpilki]  .rfv-x:focus-visible {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}

/* Column widths, shared by the header cells and the row cells. The negative right margin pulls the
   name field in tighter than the row's 8px gap, so the handle sits close to what it drags. */
.rfv-step[b-3nzsrpilki]  .rfv-fgrip-col,
.rfv-step[b-3nzsrpilki]  .rfv-grip {
    flex: 0 0 18px;
    margin-right: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The grip fades up on hover — it carries the signal the drop shadow used to, and doubles as the
   only advertisement that rows can be reordered. Dimmed rather than hidden: touch devices never fire
   :hover, so opacity 0 at rest would put drag-to-reorder permanently out of reach. */
.rfv-step[b-3nzsrpilki]  .rfv-grip {
    color: var(--neutral-foreground-hint);
    cursor: grab;
    opacity: .45;
    transition: opacity 120ms ease, color 120ms ease;
}

/* The figure columns stay fixed so header and rows align by the same offsets regardless of how
   FluentSortableList sizes its items; the name column is the one that grows, absorbing whatever
   width the grid column gives us. */
.rfv-step[b-3nzsrpilki]  .rfv-fname-col,
.rfv-step[b-3nzsrpilki]  .rfv-fname {
    flex: 1 1 240px;
    min-width: 200px;
}

.rfv-step[b-3nzsrpilki]  .rfv-fcell-col,
.rfv-step[b-3nzsrpilki]  .rfv-fcell {
    flex: 0 0 130px;
    width: 130px;
}

/* Audit mark and dismiss are one action cluster: narrow columns plus a negative margin close the
   gap so they read as a pair rather than two separate columns. */
.rfv-step[b-3nzsrpilki]  .rfv-fpersona-col,
.rfv-step[b-3nzsrpilki]  .rfv-fpersona {
    flex: 0 0 28px;
    margin-right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rfv-step[b-3nzsrpilki]  .rfv-frm-col,
.rfv-step[b-3nzsrpilki]  .rfv-frm {
    flex: 0 0 32px;
    display: flex;
    justify-content: center;
}

/* Neutralise FluentSortableList's own item box (background / border / padding / spacing) and the list
   border+padding, so ONLY our .rfv-frow provides the visuals. Item height matches the row exactly, so
   the only gap between rows is DocumentLayout's 4px item margin-bottom (which is !important and can't
   be reached from here). The drop indicator is blanked via its colour vars — FluentUI paints it on the
   full-width li, which is both taller and far wider than our row; we redraw it on the row below. */
.rfv-step[b-3nzsrpilki]  .rfv-sortable {
    --fluent-sortable-list-item-height: 40px;
    --fluent-sortable-list-item-padding: 0;
    --fluent-sortable-list-item-spacing: 0;
    --fluent-sortable-list-item-border-width: 0;
    --fluent-sortable-list-background-color: transparent;
    --fluent-sortable-list-padding: 0;
    --fluent-sortable-list-border-width: 0;
    --fluent-sortable-list-item-drop-border-color: transparent;
    --fluent-sortable-list-item-drop-color: transparent;
    list-style: none;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    width: 100%;
    min-height: 0 !important;
}

/* Drop indicator, drawn on the row itself so it matches the row's height and width. */
.rfv-step[b-3nzsrpilki]  .sortable-ghost .rfv-frow {
    border-color: var(--accent-fill-rest);
    border-style: dashed;
    background: var(--neutral-fill-secondary-rest);
}

/* Every value sits in its own filled well AT REST, so it reads as editable without hovering; the
   wells are also what separate the columns on the row's surface. Hover strengthens the edge. */
.rfv-step[b-3nzsrpilki]  .rfv-frow .textrow-container {
    width: 100% !important;
    height: 30px;
    background-color: var(--neutral-fill-input-alt-rest);
    border: 1px solid var(--neutral-stroke-input-active);
    border-radius: calc(var(--control-corner-radius) * 1px);
    box-sizing: border-box;
    transition: border-color 120ms ease;
}

/* Hover shifts the fill, not the border — exactly how TextRow behaves outside a row. */
.rfv-step[b-3nzsrpilki]  .rfv-frow .textrow-container:hover {
    background-color: var(--neutral-fill-input-alt-hover);
}

/* Keep the number wide and the "%" suffix tight, instead of TextRow's default 50/50 field/right split. */
.rfv-step[b-3nzsrpilki]  .rfv-fcell .sortable-item-content.has-right fluent-text-field {
    flex: 1 1 auto;
}

.rfv-step[b-3nzsrpilki]  .rfv-fcell .sortable-item-content.has-right .textrow-right {
    flex: 0 0 auto;
}

/* Type-to-add row sits directly under the list (outside its horizontal scroll area). 2px here plus
   the last row's own 4px bottom margin gives 6px — a touch more air than the 4px between rows, so
   the add row reads as a separate affordance without drifting away from the list. */
.rfv-step[b-3nzsrpilki]  .rfv-factors {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Same column structure as a row, so the box lines up with the name field whatever width it takes. */
/* The add box has to start where a row's name field starts and end where a row's frame ends. A row
   spends 1px on its border before its 4px padding, so the transparent left border buys back that
   pixel; dropping the right padding lets the box run out to the frame's edge instead of stopping
   4px short of it. */
.rfv-step[b-3nzsrpilki]  .rfv-fadd {
    box-sizing: border-box;
    border-left: 1px solid transparent;
    padding: 0 0 0 4px;
}

/* TextRow reserves ~30px for its audit indicator; this row has none, so let it fill the column. */
.rfv-step[b-3nzsrpilki]  .rfv-fadd .textrow-container {
    width: 100% !important;
}

/* At the factor limit the info message replaces the add box, so it spans the table rather than the
   name column. */
.rfv-step[b-3nzsrpilki]  .rfv-fmax {
    width: 100%;
}

/* ── VOI-by-factor summary ─────────────────────────────────────────────────
   Answer-first: ranked rows with a bar relative to the best factor. The full nine figures live on
   the Per-factor step; the tooltip repeats the essentials without leaving this page. */
/* Scrolls as a unit, like the factor list above. Without this the fixed columns simply overflowed the
   rows: below ~686px of width the VOI column carried on past the row's border and painted outside it,
   rather than the row staying whole and the list scrolling. */
.rfv-step[b-3nzsrpilki]  .rfv-vl {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-x: auto;
}

/* Name column matches the factor-name column above; the bar takes what's left, so the two leading
   columns end up roughly even and the three figure columns share the remainder. Sized max-content
   with a 100% floor for the same reason as the factor rows — see the note there. */
.rfv-step[b-3nzsrpilki]  .rfv-vl-head,
.rfv-step[b-3nzsrpilki]  .rfv-vl-row {
    display: grid;
    /* The swing column is sized to fit "Swing if present / absent" on one line, so the whole header
       stays a single row; the bar takes whatever is left of the column. */
    grid-template-columns: 240px minmax(90px, 1fr) 200px 96px;
    gap: 12px;
    align-items: center;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
}

/* TERM — column names, so they match the risk-factors table directly above rather than reading as
   a second kind of header. Uppercase is reserved for group qualifiers (see the idiom note). */
.rfv-step[b-3nzsrpilki]  .rfv-vl-head {
    padding: 0 12px 2px;
    font-size: var(--type-ramp-minus-1-font-size);
    line-height: var(--type-ramp-minus-1-line-height);
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

.rfv-step[b-3nzsrpilki]  .rfv-vl-head > span {
    white-space: nowrap;
}

.rfv-step[b-3nzsrpilki]  .rfv-vl-c-voi {
    text-align: right;
}

.rfv-step[b-3nzsrpilki]  .rfv-vl-row {
    padding: 8px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius) * 1px);
    background: var(--neutral-layer-1);
    cursor: default;
    transition: border-color 120ms ease;
}

.rfv-step[b-3nzsrpilki]  .rfv-vl-row:hover,
.rfv-step[b-3nzsrpilki]  .rfv-vl-row:focus-visible {
    border-color: var(--neutral-stroke-hover);
    outline: none;
}

/* The leading factor is the one worth acting on, so it carries the accent. */
.rfv-step[b-3nzsrpilki]  .rfv-vl-row.top {
    border-color: var(--rfv-gold);
    background: color-mix(in srgb, var(--rfv-gold) 10%, var(--neutral-layer-1));
}

.rfv-step[b-3nzsrpilki]  .rfv-vl-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rfv-step[b-3nzsrpilki]  .rfv-vl-bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--neutral-fill-secondary-rest);
    overflow: hidden;
}

.rfv-step[b-3nzsrpilki]  .rfv-vl-bar > span {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--rfv-gold);
    border-radius: 999px;
}

.rfv-step[b-3nzsrpilki]  .rfv-vl-voi {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Each figure gets a fixed box and is right-aligned inside it, so the slashes form a straight
   column instead of drifting with the width of "+8%" versus "−23%". */
.rfv-step[b-3nzsrpilki]  .rfv-vl-swing {
    display: grid;
    grid-template-columns: 48px 12px 48px;
    justify-content: start;
    align-items: baseline;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

.rfv-step[b-3nzsrpilki]  .rfv-vl-swing > span {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.rfv-step[b-3nzsrpilki]  .rfv-vl-sep {
    text-align: center;
    opacity: .5;
}

.rfv-step[b-3nzsrpilki]  .rfv-vl-voi {
    text-align: right;
    font-weight: 700;
}

/* Explanatory text under a block; .rfv-help is the shared version (workspace stylesheet). */
.rfv-step[b-3nzsrpilki]  .rfv-vl-note {
    display: block;
    margin-top: 8px;
}

/* NB: the tooltip's own styling lives in PerFactorVoiSummary.razor.css, not here — FluentTooltip
   renders through FluentTooltipProvider in BaseLayout, so its content sits outside this component's
   scope. Scoped CSS from the component that DECLARES the markup still reaches it (the scope
   attribute is stamped at compile time and travels with the element); rules anchored to an ancestor
   here never match. */

@media (max-width: 720px) {
    .rfv-step[b-3nzsrpilki]  .rfv-vl-head,
    .rfv-step[b-3nzsrpilki]  .rfv-vl-row {
        grid-template-columns: minmax(100px, 1.4fr) 130px 88px;
    }

    .rfv-step[b-3nzsrpilki]  .rfv-vl-c-bar,
    .rfv-step[b-3nzsrpilki]  .rfv-vl-bar {
        display: none;
    }

    /* Too narrow to hold the swing header on one line; let it wrap rather than overflow. */
    .rfv-step[b-3nzsrpilki]  .rfv-vl-head > span {
        white-space: normal;
    }
}

/* Hero plus three supporting stats; the strip itself is shared (workspace stylesheet). */
.rfv-step[b-3nzsrpilki]  .rfv-kpi-row {
    grid-template-columns: 1.2fr 1fr 1fr 1.1fr;
}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .rfv-step[b-3nzsrpilki]  .rfv-fgrid {
        grid-template-columns: 1fr;
    }

    .rfv-step[b-3nzsrpilki]  .rfv-kpi-row {
        grid-template-columns: 1fr 1fr;
    }

    .rfv-step[b-3nzsrpilki]  .rfv-hero {
        grid-column: 1 / -1;
    }
}

@media (max-width: 440px) {
    .rfv-step[b-3nzsrpilki]  .rfv-kpi-row {
        grid-template-columns: 1fr;
    }
}
/* /Features/RiskFactorVoi/Components/RiskFactorVoiPerFactorView.razor.rz.scp.css */
/* Page skeleton, label idioms and signed colours are shared across every step and live in
   Pages/RiskFactorVoi/RiskFactorVoiWorkspace.razor.css. Only what is specific to this step is here. */

/* ── per-factor matrix ──────────────────────────────────────────────────────
   The app's table idiom, taken from the interview's InterpretationProbabilityTable: content width,
   a rule on every cell, a layer-2 header and zebra rows. Wide tables scroll inside their own
   container so the page body never scrolls sideways. */
.rfv-step[b-so366n3i4s]  .rfv-pf-wrap {
    overflow-x: auto;
}

/* border-collapse must be SEPARATE for position:sticky to work — collapsed borders are owned by the
   table, so they scroll away from sticky cells and leave them without their rules. Each cell draws
   its own right/bottom rule and the table supplies the top/left, reproducing the collapsed grid. */
.rfv-step[b-so366n3i4s]  .rfv-pf {
    width: auto;
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    border-left: 1px solid var(--neutral-stroke-divider-rest);
    /* Body size, like every other table in the app. It was a step down for density across twelve
       factor columns, but the wrapper already scrolls horizontally, so the density bought a smaller
       chance of scrolling rather than avoiding it — not worth reading the whole table below the
       app's default size. */
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
}

.rfv-step[b-so366n3i4s]  .rfv-pf th,
.rfv-step[b-so366n3i4s]  .rfv-pf td {
    padding: 5px 14px;
    border-right: 1px solid var(--neutral-stroke-divider-rest);
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    text-align: left;
    white-space: nowrap;
}

/* Factor names stay put while the rows scroll under them. */
.rfv-step[b-so366n3i4s]  .rfv-pf thead th {
    background: var(--neutral-layer-2);
    font-weight: 600;
    padding: 7px 14px;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* A long factor name would otherwise stretch its whole column far wider than the short figures
   beneath it, stranding the numbers at the right edge behind a gap. Cap the header and let the name
   wrap onto a second line instead of nowrap (the cells inherit nowrap); the figures below are short,
   so the column settles to about this width. overflow-wrap breaks a long name with no spaces rather
   than letting one token blow the cap. */
.rfv-step[b-so366n3i4s]  .rfv-pf thead th.rfv-num {
    max-width: 140px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Row labels stay put while the factor columns scroll sideways. The background must be opaque and
   match the page, since the figures pass behind it. */
.rfv-step[b-so366n3i4s]  .rfv-pf .rfv-rl {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--neutral-fill-layer-rest);
    color: var(--neutral-foreground-hint);
}

/* The corner cell is sticky on both axes, so it has to sit above both. */
.rfv-step[b-so366n3i4s]  .rfv-pf thead th.rfv-rl {
    z-index: 3;
    background: var(--neutral-layer-2);
}

/* Group bands introduce each half of the interpretation, and the value at the end. Declared after
   .rfv-rl so the band's own background wins on its sticky label cell. The type is a step smaller
   (eyebrow), but the line-height and padding match a data cell so a band row is exactly as tall as
   the rows around it rather than a half-height divider. */
.rfv-step[b-so366n3i4s]  .rfv-pf tr.rfv-band .rfv-rl,
.rfv-step[b-so366n3i4s]  .rfv-pf tr.rfv-band .rfv-band-fill {
    background: var(--neutral-layer-2);
    font-size: var(--type-ramp-minus-2-font-size);
    line-height: var(--type-ramp-minus-1-line-height);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--neutral-foreground-hint);
    padding: 5px 14px;
}

.rfv-step[b-so366n3i4s]  .rfv-pf .rfv-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rfv-step[b-so366n3i4s]  .rfv-pf .rfv-voi {
    font-weight: 700;
}

/* /Features/RiskFactorVoi/Components/RiskFactorVoiTreesView.razor.rz.scp.css */
/* Page skeleton, view toggle, KPI strip, label idioms and signed colours are shared across every step
   and live in Pages/RiskFactorVoi/RiskFactorVoiWorkspace.razor.css. Only what is specific to this
   step is here. */

/* Hero gets the extra width; the two supporting stats share the rest. */
.rfv-step[b-q1nxs9g7co]  .rfv-kpi-row {
    grid-template-columns: 1.4fr 1fr 1fr;
}

/* ── factor picker ─────────────────────────────────────────────────────── */
.rfv-step[b-q1nxs9g7co]  .rfv-pick {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* EYEBROW — see the idiom note in the workspace stylesheet. */
.rfv-step[b-q1nxs9g7co]  .rfv-pick-l {
    font-size: var(--type-ramp-minus-2-font-size);
    color: var(--neutral-foreground-hint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.rfv-step[b-q1nxs9g7co]  .rfv-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* One chip per factor. Unlike the view toggle these pick a SUBJECT rather than a view of one, so
   they stay discrete pills rather than segments of a single track. */
.rfv-step[b-q1nxs9g7co]  .rfv-chip {
    border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-rest);
    font: inherit;
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.rfv-step[b-q1nxs9g7co]  .rfv-chip.on {
    background: color-mix(in srgb, var(--rfv-gold) 18%, transparent);
    border-color: var(--rfv-gold);
}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .rfv-step[b-q1nxs9g7co]  .rfv-kpi-row {
        grid-template-columns: 1fr 1fr;
    }

    .rfv-step[b-q1nxs9g7co]  .rfv-hero {
        grid-column: 1 / -1;
    }
}

@media (max-width: 440px) {
    .rfv-step[b-q1nxs9g7co]  .rfv-kpi-row {
        grid-template-columns: 1fr;
    }
}
/* /Layout/BaseLayout.razor.rz.scp.css */
/* Top bar layout */
.base-top-bar[b-2c38gthvbr] {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: 6px;
}
/* NB: the top bar's chrome shadow is NOT drawn here. .base-top-bar is a FluentStack, so a rule in
   this scoped stylesheet compiles to `.base-top-bar[b-hash]` and never matches its element (a class
   on a child component doesn't carry the scope attribute, and there's no HTML wrapper to anchor
   ::deep). The bar also *contains* @Body, so its own box-shadow would be covered by the content.
   The elevation is drawn instead by the `.doc-elevation-frame::before` inset overlay in MainLayout/
   DocumentLayout — see --df-chrome-shadow-inset in design-tokens.css. */

.base-top-bar-title-wrap[b-2c38gthvbr] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.base-top-bar-actions[b-2c38gthvbr] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-left: auto;
}

[b-2c38gthvbr] .base-top-bar-title {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-2c38gthvbr] .base-top-bar-title .base-title-prefix,
[b-2c38gthvbr] .base-top-bar-title .base-title-doc {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .base-top-bar[b-2c38gthvbr] {
        padding-right: 8px !important;
        gap: 2px;
    }

    [b-2c38gthvbr] .base-top-bar-title {
        max-width: 100%;
        font-size: 20px !important;
        line-height: 1.2;
    }

    [b-2c38gthvbr] .base-top-bar-title .hide-on-mobile {
        display: none;
    }
}

@media (max-width: 640px) {
    [b-2c38gthvbr] .base-top-bar-title {
        max-width: 100%;
        font-size: 20px !important;
    }
}
/* /Layout/DocumentLayout.razor.rz.scp.css */
.doc-placeholder[b-s6ptwdhfnt] {
    display: flex;
    flex-direction: column;
    /* Fill the frame beneath the (usually empty) toolbar outlet. Was height:100%, which
       would overflow once the outlet has content; flex:1 + min-height:0 fills the same
       space when the outlet is empty and yields the toolbar zone its height when it is
       not. Mirrors the mobile rule below, which was already flex-based. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: visible;
    overflow-y: auto;
    position: relative;
    width: 100%;
    z-index: 0;
    color-scheme: light;
    padding: 20px;
    background-color: var(--neutral-fill-secondary-rest);
    border-top-color: var(--neutral-stroke-divider-rest);
    border-top-style: solid;
    border-top-width: thin;
    border-left-color: var(--neutral-stroke-divider-rest);
    border-left-style: solid;
    border-left-width: thin;
}

/* Non-scrolling frame around the scroll pane. .doc-placeholder scrolls INSIDE it, so the frame stays
   put — which is the whole point: it lets the shadow overlay stay fixed no matter what scrolls inside.
   It takes the content column's place beside the rail (the sizing that was on .doc-placeholder). */
.doc-elevation-frame[b-s6ptwdhfnt] {
    flex: 0 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Round the frame's own corner to match the shadow overlay's — with overflow:hidden this clips the
       content to the same curve, so the content's square corner no longer peeks out inside the shadow. */
    border-top-left-radius: var(--df-chrome-corner);
}

/* The chrome's drop shadow: ONE inset box-shadow on the (fixed) frame, casting onto the content's top
   and left edges with a rounded corner where they meet. It's in FRONT of the content (z-index) and on
   the non-scrolling frame, so it can't be covered and can't scroll away. Mobile drops to top-only. */
.doc-elevation-frame[b-s6ptwdhfnt]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    box-shadow: var(--df-chrome-shadow-inset);
    border-top-left-radius: var(--df-chrome-corner);
}

.doc-placeholder-inner[b-s6ptwdhfnt] {
    background: var(--neutral-fill-layer-rest);
    border-radius: var(--df-chrome-layer-radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex: none;
    min-height: 100%;
    height: auto;
    padding: 20px;
    position: relative;
}

.after-root[b-s6ptwdhfnt] {
    font-size: 14px;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 48px;
    bottom: 0px;
    display: flex !important; /* drop important once css file is cleaned up?! */
}

.interview-nav-shell--desktop[b-s6ptwdhfnt] {
    flex: 0 0 auto;
    display: flex;
    background: var(--neutral-fill-stealth-rest);
    overflow: hidden;
    transition: width 200ms ease;
    width: 250px;
    /* The rail deliberately carries no shadow — the content frame's inset-LEFT edge draws the
       rail↔content shadow, so it matches the top edge exactly. */
}

.interview-nav-shell--desktop-expanded[b-s6ptwdhfnt] {
    width: 250px;
}

.interview-nav-shell--desktop-collapsed[b-s6ptwdhfnt] {
    width: 40px;
}

.desktop-workflow-nav-container[b-s6ptwdhfnt] {
    height: 100%;
    width: 250px;
    background: var(--neutral-fill-stealth-rest);
    overflow: hidden;
    position: relative;
}

.desktop-workflow-nav-container--collapsed[b-s6ptwdhfnt] {
    width: 40px;
}

.desktop-workflow-pin-button[b-s6ptwdhfnt] {
    min-width: 32px;
    height: 28px;
}

.desktop-workflow-nav-main[b-s6ptwdhfnt] {
    flex: 1 1 auto;
    min-height: 0;
    background: var(--neutral-fill-stealth-rest);
    position: relative;
    display: flex;
    flex-direction: column;
}

.desktop-workflow-nav-heading[b-s6ptwdhfnt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    min-height: 44px;
    padding: 6px 8px 4px 12px;
    overflow: hidden;
}

.desktop-workflow-nav-heading--collapsed[b-s6ptwdhfnt] {
    justify-content: flex-start;
    padding: 6px 4px 4px;
}


.desktop-workflow-nav-heading-text[b-s6ptwdhfnt] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    opacity: 1;
    transition: opacity 100ms ease, max-width 100ms ease;
}

.desktop-workflow-nav-container--collapsed .desktop-workflow-nav-heading-text[b-s6ptwdhfnt] {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
}

.desktop-workflow-nav-container--collapsed .desktop-workflow-pin-button[b-s6ptwdhfnt] {
    min-width: 28px;
    width: 28px;
}

.desktop-workflow-pin-button[b-s6ptwdhfnt]  .fluent-button {
    transition: none;
}

.desktop-workflow-nav-main[b-s6ptwdhfnt]  .fluent-nav-menu {
    background: var(--neutral-fill-stealth-rest);
}

.desktop-workflow-steps-menu[b-s6ptwdhfnt] {
    flex: 1 1 auto;
    min-height: 0;
}

[b-s6ptwdhfnt] .desktop-workflow-nav-label {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    opacity: 1;
    transition: opacity 100ms ease;
}

.desktop-workflow-nav-container--collapsed[b-s6ptwdhfnt]  .desktop-workflow-nav-label {
    opacity: 0;
    pointer-events: none;
}

.desktop-workflow-nav-container--collapsed[b-s6ptwdhfnt]  .desktop-workflow-nav-main .fluent-nav-link,
.desktop-workflow-nav-container--collapsed[b-s6ptwdhfnt]  .desktop-workflow-footer-nav-menu .fluent-nav-link {
    justify-content: center;
}

.desktop-workflow-nav-main[b-s6ptwdhfnt]  .fluent-nav-item .positioning-region {
    background: transparent;
}

.desktop-workflow-nav-footer[b-s6ptwdhfnt] {
    flex: 0 0 auto;
    border-top: thin solid var(--neutral-stroke-divider-rest);
    background: var(--neutral-fill-stealth-rest);
    padding: 0;
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.desktop-workflow-footer-nav-menu[b-s6ptwdhfnt] {
    width: 100%;
}

.desktop-workflow-footer-nav-menu[b-s6ptwdhfnt]  .fluent-nav-item {
    margin: 0;
    width: 100%;
    min-height: 44px;
    border: 0;
}

.desktop-workflow-footer-nav-menu[b-s6ptwdhfnt]  .fluent-nav-link {
    width: 100%;
    min-height: 44px;
}

.desktop-workflow-footer-nav-menu[b-s6ptwdhfnt]  .desktop-workflow-back-nav-link .fluent-nav-text {
    overflow: visible;
    text-overflow: clip;
}

.mobile-bottom-nav-shell[b-s6ptwdhfnt] {
    display: none;
}

.mobile-workflow-drawer[b-s6ptwdhfnt] {
    display: none;
}

.mobile-workflow-overlay[b-s6ptwdhfnt] {
    display: none;
}

[b-s6ptwdhfnt] .fluent-sortable-list .sortable-item {
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-bottom: 4px !important;
    margin-right: 30px;
    align-items: end;
}

@media (max-width: 768px) {
    .after-root[b-s6ptwdhfnt] {
        flex-direction: column;
        overflow: hidden;
    }

    .interview-nav-shell--desktop[b-s6ptwdhfnt] {
        display: none !important;
    }

    /* The frame fills the column on mobile (the flex-fill that was on .doc-placeholder before it was
       wrapped); the shadow drops to top-only, no corner (no rail on mobile) — frame and overlay square. */
    .doc-elevation-frame[b-s6ptwdhfnt] {
        flex: 1 1 auto;
        min-height: 0;
        border-top-left-radius: 0;
    }

    .doc-elevation-frame[b-s6ptwdhfnt]::before {
        box-shadow: var(--df-chrome-shadow-inset-top);
        border-top-left-radius: 0;
    }

    .doc-placeholder[b-s6ptwdhfnt] {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        border-left-width: 0;
        border-top-width: 0;
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
        border-top: thin solid var(--neutral-stroke-divider-rest);
    }

    .mobile-bottom-nav-shell[b-s6ptwdhfnt] {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        min-height: 48px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 32;
        background: var(--neutral-fill-stealth-rest);
        border-top: thin solid var(--neutral-stroke-divider-rest);
        /* Outer chrome: shared shadow cast up onto the content (already above it via z-index). */
        box-shadow: var(--df-chrome-shadow);
        padding: 6px 10px max(6px, env(safe-area-inset-bottom));
        gap: 8px;
        transition: transform 180ms ease, opacity 180ms ease;
    }

    .mobile-bottom-nav-shell--hidden[b-s6ptwdhfnt] {
        transform: translateY(100%);
        opacity: 0.98;
        pointer-events: none;
    }

    .mobile-bottom-nav-current-step[b-s6ptwdhfnt] {
        text-align: center;
        font-weight: 400;
        color: var(--neutral-foreground-rest);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-bottom-nav-open-button[b-s6ptwdhfnt] {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        background: transparent;
        --neutral-fill-stealth-rest: transparent;
    }

    [b-s6ptwdhfnt] fluent-button.mobile-bottom-nav-open-button::part(control) {
        width: 100%;
        justify-content: center;
        background: transparent;
        border-color: transparent;
        border-radius: 8px;
        transition: background-color 120ms ease;
    }

    [b-s6ptwdhfnt] fluent-button.mobile-bottom-nav-open-button:hover::part(control) {
        background: var(--neutral-fill-secondary-rest) !important;
    }

    [b-s6ptwdhfnt] fluent-button.mobile-bottom-nav-open-button:active::part(control) {
        background: var(--neutral-fill-secondary-active) !important;
    }

    [b-s6ptwdhfnt] fluent-button.mobile-bottom-nav-open-button:focus-visible::part(control) {
        background: var(--neutral-fill-secondary-rest) !important;
    }

    [b-s6ptwdhfnt] fluent-button.mobile-bottom-nav-open-button::part(start) {
        margin-inline-end: 6px;
        margin-inline-start: 0;
    }

    [b-s6ptwdhfnt] .mobile-bottom-nav-open-button .fluent-button {
        position: relative;
    }

    [b-s6ptwdhfnt] .mobile-bottom-nav-open-button .fluent-button .start {
        position: absolute;
        left: 10px;
    }

    [b-s6ptwdhfnt] .mobile-bottom-nav-open-button .fluent-button .content {
        width: 100%;
        text-align: center;
    }

    .mobile-workflow-overlay[b-s6ptwdhfnt] {
        display: block;
        position: absolute;
        inset: 0;
        background: color-mix(in srgb, var(--neutral-base-color) 46%, transparent);
        z-index: 1000;
    }

    .mobile-workflow-drawer[b-s6ptwdhfnt] {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(85vw, 360px);
        background: var(--neutral-fill-stealth-rest);
        border-right: thin solid var(--neutral-stroke-divider-rest);
        z-index: 1001;
        transform: translateX(-100%);
        transition: transform 200ms ease;
    }

    /* Shadow only while open. The drawer stays in the DOM when closed (slid off-screen with
       translateX), and a resting shadow radiates in every direction — including right, onto the
       visible content — reading as a stray shadow down the screen's left edge. */
    .mobile-workflow-drawer--open[b-s6ptwdhfnt] {
        transform: translateX(0);
        box-shadow: var(--elevation-shadow-tooltip);
    }

    .mobile-workflow-drawer-header[b-s6ptwdhfnt] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 10px 8px 12px;
        border-bottom: thin solid var(--neutral-stroke-divider-rest);
    }

    .mobile-workflow-drawer-title[b-s6ptwdhfnt] {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--neutral-foreground-rest);
    }

    .mobile-workflow-drawer-list[b-s6ptwdhfnt] {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 8px;
    }

    .mobile-workflow-nav-menu[b-s6ptwdhfnt] {
        width: 100%;
        height: 100%;
    }

    .mobile-workflow-footer-nav-menu[b-s6ptwdhfnt] {
        width: 100%;
    }

    .mobile-workflow-footer-nav-menu[b-s6ptwdhfnt]  .fluent-nav-item {
        margin-block: 0;
    }

    .mobile-workflow-drawer-footer[b-s6ptwdhfnt] {
        flex: 0 0 auto;
        min-height: calc(56px + env(safe-area-inset-bottom));
        padding: 6px 8px max(6px, env(safe-area-inset-bottom));
        display: flex;
        align-items: center;
        border-top: thin solid var(--neutral-stroke-divider-rest);
        background: var(--neutral-fill-secondary-rest);
    }

    [b-s6ptwdhfnt] fluent-nav-link.mobile-workflow-back-nav-link {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    [b-s6ptwdhfnt] .mobile-workflow-back-nav-link .positioning-region {
        background: var(--neutral-fill-secondary-rest) !important;
        border-radius: 8px;
    }

    [b-s6ptwdhfnt] .mobile-workflow-back-nav-link:hover .positioning-region {
        background: var(--neutral-fill-secondary-hover) !important;
    }

    [b-s6ptwdhfnt] .mobile-workflow-back-nav-link:active .positioning-region {
        background: var(--neutral-fill-secondary-active) !important;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.doc-placeholder[b-ddudzx5pf8] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: visible;
    overflow-y: auto;
    position: relative;
    width: 100%;
    z-index: 0;
    color-scheme: light;

    padding: 20px;
    background-color: var(--neutral-fill-secondary-rest);
    border-top-color: var(--neutral-stroke-divider-rest);
    border-top-style: solid;
    border-top-width: thin;
    border-left-color: var(--neutral-stroke-divider-rest);
    border-left-style: solid;
    border-left-width: thin;
}

/* Non-scrolling frame around the scroll pane. .doc-placeholder scrolls INSIDE it, so the frame stays
   put — which is the whole point: it lets the shadow overlay stay fixed no matter what scrolls inside.
   It takes the content column's place beside the rail (the sizing that was on .doc-placeholder). */
.doc-elevation-frame[b-ddudzx5pf8] {
    flex: 0 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Round the frame's own corner to match the shadow overlay's — with overflow:hidden this clips the
       content to the same curve, so the content's square corner no longer peeks out inside the shadow. */
    border-top-left-radius: var(--df-chrome-corner);
}

/* The chrome's drop shadow: ONE inset box-shadow on the (fixed) frame, casting onto the content's top
   and left edges with a rounded corner where they meet. It's in FRONT of the content (z-index) and on
   the non-scrolling frame, so it can't be covered and can't scroll away. Mobile drops to top-only. */
.doc-elevation-frame[b-ddudzx5pf8]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    box-shadow: var(--df-chrome-shadow-inset);
    border-top-left-radius: var(--df-chrome-corner);
}

.doc-placeholder-inner[b-ddudzx5pf8] {
    background: var(--neutral-fill-layer-rest);
    border-radius: var(--df-chrome-layer-radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex: none;
    min-height: 100%;
    height: auto;
    padding: 20px;
}

.after-root[b-ddudzx5pf8] {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 48px;
    bottom: 0px;
    display: flex !important; /* drop important once css file is cleaned up?! */
    font-size: 14px;
}

[b-ddudzx5pf8] .main-nav-shell {
    flex: 0 0 auto;
    /* Lifted above the content (z-index) so the mobile bar's shadow shows over it. The desktop rail
       casts no shadow but shares this selector; the lift is harmless there. */
    position: relative;
    z-index: 1;
}

[b-ddudzx5pf8] .main-nav-shell--desktop {
    display: flex !important;
}

[b-ddudzx5pf8] .main-nav-shell--mobile {
    display: none !important;
    box-shadow: var(--df-chrome-shadow);
}

@media (max-width: 767px) {
    .after-root[b-ddudzx5pf8] {
        flex-direction: column;
    }

    [b-ddudzx5pf8] .main-nav-shell--desktop {
        display: none !important;
    }

    [b-ddudzx5pf8] .main-nav-shell--mobile {
        display: flex !important;
        border-top: thin solid var(--neutral-stroke-divider-rest);
        border-bottom: 0;
    }

    [b-ddudzx5pf8] .main-nav-shell--mobile .main-appbar {
        justify-content: center;
    }

    .doc-placeholder[b-ddudzx5pf8] {
        border-left-width: 0;
        border-top-width: thin;
    }

    /* No rail on mobile → the chrome shadow is top-only, no corner (frame and overlay both square). */
    .doc-elevation-frame[b-ddudzx5pf8] {
        border-top-left-radius: 0;
    }

    .doc-elevation-frame[b-ddudzx5pf8]::before {
        box-shadow: var(--df-chrome-shadow-inset-top);
        border-top-left-radius: 0;
    }
}
/* /Pages/Admin/AdminOrganizationManagement.razor.rz.scp.css */
.admin-org-accordion-wrap[b-vx3kg2k91n] {
    width: 100%;
}

[b-vx3kg2k91n] .admin-org-accordion-wrap fluent-accordion,
[b-vx3kg2k91n] .admin-org-accordion-wrap fluent-accordion-item {
    width: 100%;
    display: block;
}

.admin-org-panel-actions-row[b-vx3kg2k91n] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    padding: 4px 0 2px 0;
}

.admin-org-members-search-row[b-vx3kg2k91n] {
    width: 100%;
    justify-content: flex-start;
}
/* /Pages/Admin/AdminShell.razor.rz.scp.css */
.admin-shell-root[b-b9qkw6hlu8] {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    width: 100%;
    min-width: 0;
}

.admin-shell-nav-card[b-b9qkw6hlu8] {
    position: sticky;
    top: 8px;
}

.admin-shell-root > *[b-b9qkw6hlu8] {
    min-width: 0;
    max-width: 100%;
}

.admin-shell-nav-menu[b-b9qkw6hlu8] {
    max-width: 100%;
}

.admin-shell-content-card[b-b9qkw6hlu8] {
    min-height: 220px;
    min-width: 0;
    max-width: 100%;
}

.admin-shell-loading[b-b9qkw6hlu8] {
    display: flex;
    justify-content: center;
    padding: 28px;
}

@media (max-width: 900px) {
    .admin-shell-root[b-b9qkw6hlu8] {
        grid-template-columns: 1fr;
    }

    .admin-shell-nav-menu[b-b9qkw6hlu8] {
        width: 100% !important;
    }

    .admin-shell-nav-card[b-b9qkw6hlu8] {
        position: static;
    }
}
/* /Pages/Framing/IssueCategorization/IssueCategorization.razor.rz.scp.css */
.ic-layout[b-sw93ouol8t] {
  display: grid;
  grid-template-columns: 9fr 1fr; /* 90% / 10% */
  gap: .75rem;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

/* Ensure the page fills its allocated area without forcing viewport overflow */
.page-container[b-sw93ouol8t] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 40px;
    padding-bottom: 20px;
}

.ic-page[b-sw93ouol8t] {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.ic-left[b-sw93ouol8t] {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: .75rem;
}

.ic-right[b-sw93ouol8t] {
  display: flex;
  height: 100%;
}

.ic-right[b-sw93ouol8t]  .ic-zone {
  height: 100%;
  flex: 1 1 auto;
  display: flex;
}

.ic-right[b-sw93ouol8t]  .ic-zone .ic-zone-border {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ic-right[b-sw93ouol8t]  .ic-zone .ic-zone-content {
  flex: 1 1 auto;
  overflow-y: auto;
}

.ic-zone-border[b-sw93ouol8t] {
  border: 1px dashed var(--neutral-stroke-strong-rest, #8a8a8a);
  border-radius: 6px;
  padding: .5rem;
  min-height: 100px;
  background: var(--neutral-layer-1, #fff);
}

.ic-zone-title[b-sw93ouol8t] {
  font-weight: 700;
  text-align: center;
  font-size: 1rem;
  margin-bottom: .25rem;
}

.ic-zone-content[b-sw93ouol8t] {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.ic-issue-border[b-sw93ouol8t] {
  border: 1px dashed var(--neutral-stroke-strong-rest, #9aa3af);
  border-radius: 4px;
  padding: .35rem .5rem;
  background: var(--neutral-layer-1, #fff);
  cursor: grab;
}

.ic-issue-title[b-sw93ouol8t] { 
  font-size: .9rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
/* /Pages/Framing/IssueRaising/AnonymousIssueRaising.razor.rz.scp.css */
.anonymous-room-page[b-4ubj0dxwne] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--neutral-fill-layer-rest);
}

.anonymous-room-card[b-4ubj0dxwne] {
    width: min(560px, 100%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-1);
}

.anonymous-room-closed-banner[b-4ubj0dxwne] {
    /* Pale caution wash + saturated caution border (were phantom --warning-*-rest hardcoded to hex). */
    background: color-mix(in srgb, var(--df-status-warning) 15%, var(--neutral-fill-layer-rest));
    color: var(--neutral-foreground-rest);
    border: 1px solid var(--df-status-warning);
    border-radius: 6px;
    padding: 12px;
    font-weight: 500;
}

.char-count[b-4ubj0dxwne] {
    align-self: flex-end;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.char-count.over-limit[b-4ubj0dxwne] {
    color: var(--df-status-danger);
    font-weight: 600;
}
/* /Pages/Framing/IssueRaising/IssueAdd.razor.rz.scp.css */
.host[b-7khtmmbb8d], :host[b-7khtmmbb8d] {
    display: block;
}
.new-issue-container[b-7khtmmbb8d] {
    display: flex;
    width: 100%;
    gap: 10px;
    flex-shrink: 0;
    align-items: stretch; /* ensure children can stretch vertically */
}
/* /Pages/Framing/IssueRaising/IssueBar.razor.rz.scp.css */
.issue-bar-container[b-odwv2rq1md] {
    /* One height for every bar, whatever the type. What drives it is the vertical type name
       in the rail — "UNCERTAINTY" is much longer than "DECISION" or "FACT", which is why
       uncertainties used to stand taller than their neighbours. Sized to just fit that name
       once the rail's padding and the name's size and tracking were squeezed — there are only
       a couple of pixels in hand, so tune this value up if the longest name ever clips.
       Declared here rather than on :host — Blazor components have no shadow root, so a
       ":host" rule compiles to a selector that can never match. */
    --issue-bar-height: 132px;

    width: 100%;
    background-color: transparent;
    padding: 0;
    border: 0;
    position: relative;
    overflow: hidden;
}

/* Type-led bar: a wide horizontal card. The full type name runs down the colour rail;
   the title and owner sit at the very top, tags and the tag menu at the very bottom,
   and the middle carries the description plus a decision's choices or an uncertainty's
   assessment link. */
.issue-bar[b-odwv2rq1md] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    height: var(--issue-bar-height);
    box-sizing: border-box;
    background-color: var(--df-surface-card);
    border: 1px solid var(--df-surface-card-border);
    border-radius: var(--df-surface-card-radius);
    overflow: hidden;
    transition: border-color 140ms ease;
}

.issue-bar:hover[b-odwv2rq1md] {
    border-color: var(--accent-fill-hover);
}

.issue-bar:focus-visible[b-odwv2rq1md] {
    outline: none;
}

.issue-bar:focus-within[b-odwv2rq1md] {
    border-color: var(--accent-fill-focus);
}

[b-odwv2rq1md] .issue-bar.issue-bar-single-selected {
    border-color: var(--df-select-single) !important;
}

[b-odwv2rq1md] .issue-bar.issue-bar-single-selected::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--df-select-single);
    border-radius: var(--df-surface-card-radius);
    box-sizing: border-box;
    pointer-events: none;
}

[b-odwv2rq1md] .issue-bar.issue-bar-multi-selected {
    border-color: var(--df-select-multi) !important;
}

[b-odwv2rq1md] .issue-bar.issue-bar-multi-selected::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--df-select-multi);
    border-radius: var(--df-surface-card-radius);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 30;
}

[b-odwv2rq1md] .issue-bar-selected-corner {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 40px solid var(--df-select-multi);
    border-right: 40px solid transparent;
    z-index: 40;
    pointer-events: none;
}

[b-odwv2rq1md] .issue-bar-selected-corner::after {
    content: "✓";
    position: absolute;
    top: -38px;
    left: 6px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

/* ── Type rail ────────────────────────────────────────────────── */
/* min-height/overflow so the vertical type name can never push the bar taller than
   --issue-bar-height; a name that does not fit clips rather than growing the card. */
[b-odwv2rq1md] .issue-bar-rail {
    position: relative;
    flex: none;
    width: 40px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

/* Invisible marker so the type menu opens beside the rail. */
[b-odwv2rq1md] .issue-bar-type-anchor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
}

[b-odwv2rq1md] .issue-bar-railbtn {
    flex: 1;
    min-height: 0;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 0 9px;
    overflow: hidden;
    transition: filter 120ms ease;
}

[b-odwv2rq1md] .issue-bar-railbtn:hover:not([disabled]) {
    filter: brightness(0.9);
}

[b-odwv2rq1md] .issue-bar-railbtn[disabled] {
    cursor: default;
}

[b-odwv2rq1md] .issue-bar-railbtn:focus-visible {
    outline: 2px solid var(--accent-fill-focus);
    outline-offset: -3px;
}

[b-odwv2rq1md] .issue-bar-letter {
    flex: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

[b-odwv2rq1md] .issue-bar-typename {
    writing-mode: vertical-rl;
    /* Weight, tracking and opacity are the large card spine's, so the spelled-out type reads
       the same in both views; only the size differs, and only because the eleven letters of
       "UNCERTAINTY" are what set the bar's height. Every fraction of size and tracking here
       comes straight off every bar in the grid — between them they are what buy the 132px. */
    font-size: 11px;
    font-weight: var(--df-typename-weight);
    letter-spacing: var(--df-typename-tracking);
    text-transform: uppercase;
    opacity: var(--df-typename-opacity);
    overflow: hidden;
}

/* ── Body ─────────────────────────────────────────────────────── */
[b-odwv2rq1md] .issue-bar-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Tighter at the foot so the tag chips sit closer to the bar's bottom edge. */
    padding: 11px 14px 8px;
    gap: 6px;
    box-sizing: border-box;
}

[b-odwv2rq1md] .issue-bar-top {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

[b-odwv2rq1md] .issue-bar-title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--neutral-foreground-rest);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
}

[b-odwv2rq1md] .issue-bar-owner {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

[b-odwv2rq1md] .issue-bar-persona {
    flex: none;
    width: var(--df-persona-size-sm);
    height: var(--df-persona-size-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--df-persona-fill);
    color: var(--df-persona-foreground);
    font-size: var(--df-persona-font-sm);
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

/* Top-aligned, not centred: the description must sit at the same vertical position on every
   bar in a row, whether or not the issue also has choices below it. */
[b-odwv2rq1md] .issue-bar-mid {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    overflow: hidden;
}

[b-odwv2rq1md] .issue-bar-description {
    font-size: 12.5px;
    color: var(--neutral-foreground-hint);
    word-break: break-word;
    overflow-wrap: anywhere;
}

[b-odwv2rq1md] .issue-bar-description-one {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-odwv2rq1md] .issue-bar-description-two {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.42;
}

/* A decision's choices, as chips on one line that fades rather than wraps. */
[b-odwv2rq1md] .issue-bar-choices {
    display: flex;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
}

[b-odwv2rq1md] .issue-bar-choice {
    flex: none;
    font-size: 11.5px;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-stealth-hover);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 5px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* ── Bottom row: tags, then the id / link / tags control column ─ */
[b-odwv2rq1md] .issue-bar-bottom {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

[b-odwv2rq1md] .issue-bar-tags {
    flex: 1;
    min-width: 0;
    width: auto;
}

[b-odwv2rq1md] .issue-bar-tag {
    display: inline-flex;
    align-items: center;
    height: var(--df-pill-height);
    padding: 0 var(--df-pill-padding-x);
    border-radius: var(--df-pill-radius);
    font-size: var(--df-pill-font-size);
    font-weight: var(--df-pill-font-weight);
    line-height: 1;
    white-space: nowrap;
}

[b-odwv2rq1md] .issue-bar-bottom-right {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

[b-odwv2rq1md] .issue-bar-id {
    flex: none;
    min-width: 34px;
    text-align: right;
    font-family: monospace;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* Round ghost buttons, matching the card and list. Targets every button in the column
   rather than one class, so the child-rendered assessment link is covered too. */
[b-odwv2rq1md] .issue-bar-bottom-right fluent-button {
    flex: none;
    height: 24px;
    width: 24px;
    min-width: 24px;
}

[b-odwv2rq1md] .issue-bar-bottom-right fluent-button::part(control) {
    background: transparent;
    border-color: transparent;
    border-radius: var(--df-control-radius-round);
    padding: 0;
}

[b-odwv2rq1md] .issue-bar-bottom-right fluent-button:hover::part(control) {
    background: var(--df-control-ghost-hover);
}

[b-odwv2rq1md] .issue-bar-bottom-right fluent-button:active::part(control) {
    background: var(--df-control-ghost-active);
}

[b-odwv2rq1md] .issue-bar-bottom-right fluent-button:focus,
[b-odwv2rq1md] .issue-bar-bottom-right fluent-button:focus-visible,
[b-odwv2rq1md] .issue-bar-bottom-right fluent-button::part(control):focus,
[b-odwv2rq1md] .issue-bar-bottom-right fluent-button::part(control):focus-visible {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}

/* Type menu rows: colour dot, label, then the shortcut key at the far right.
   Deliberately NOT ::deep — FluentUI reparents menu content out of this component's
   DOM, so a "[scope] .x" descendant rule would stop matching. */
.type-menu-row[b-odwv2rq1md] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 130px;
}

.type-menu-row .type-dot[b-odwv2rq1md] {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.type-menu-row .type-name[b-odwv2rq1md] {
    flex: 1;
    min-width: 0;
}

.type-key[b-odwv2rq1md] {
    font-family: monospace;
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}
/* /Pages/Framing/IssueRaising/IssueCard.razor.rz.scp.css */
.issue-card-container[b-vft795m0na] {
    width: 100%;
    background-color: transparent;
    padding: 0;
    border-radius: var(--df-surface-card-radius);
    border: 0;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: border-color 140ms ease;
}

/* B2 "type spine" layout: a full-height colour rail on the left, a content column on the right. */
[b-vft795m0na] .issue-card {
    padding: 0px;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    box-shadow: none;
    display: flex;
    flex-direction: row;
    border: 1px solid var(--neutral-stroke-rest);
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--df-surface-card);
}

    [b-vft795m0na] .issue-card.issue-card-multi-selected {
        border: 1px solid var(--df-select-multi) !important;
        border-radius: var(--df-surface-card-radius);
    }

[b-vft795m0na] .issue-card.issue-card-multi-selected::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--df-select-multi);
    border-radius: var(--df-surface-card-radius);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 30;
}

[b-vft795m0na] .issue-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--df-select-single);
    border-radius: var(--df-surface-card-radius);
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease;
}

    [b-vft795m0na] .issue-card.issue-card-single-selected {
        border: 1px solid var(--df-select-single) !important;
        border-radius: var(--df-surface-card-radius);
    }

        [b-vft795m0na] .issue-card.issue-card-single-selected::after {
            opacity: 1;
        }

[b-vft795m0na] .issue-card:focus-visible {
    outline: none;
}

[b-vft795m0na] .issue-card:hover {
    border: calc(var(--stroke-width)* 1px) solid var(--accent-fill-hover);
}

[b-vft795m0na] .issue-card:focus-within {
    border: calc(var(--stroke-width)* 1px) solid var(--accent-fill-focus);
}

[b-vft795m0na] .issue-card.issue-card-multi-selected:hover,
[b-vft795m0na] .issue-card.issue-card-multi-selected:focus-within,
[b-vft795m0na] .issue-card.issue-card-multi-selected:focus-visible {
    border: 1px solid var(--df-select-multi) !important;
}

.issue-card-container.issue-card-selected:not(.issue-card-multi-selected)[b-vft795m0na]  .issue-card.issue-card-single-selected:hover,
.issue-card-container.issue-card-selected:not(.issue-card-multi-selected)[b-vft795m0na]  .issue-card.issue-card-single-selected:focus-within,
.issue-card-container.issue-card-selected:not(.issue-card-multi-selected)[b-vft795m0na]  .issue-card.issue-card-single-selected:focus-visible {
    border: 1px solid var(--df-select-single) !important;
}

/* Multi-select tick, top-left corner (over the top of the spine). */
[b-vft795m0na] .issue-card-selected-corner {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 40px solid var(--df-select-multi);
    border-right: 40px solid transparent;
    z-index: 40;
    pointer-events: none;
}

[b-vft795m0na] .issue-card-selected-corner::after {
    content: "✓";
    position: absolute;
    top: -38px;
    left: 6px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

/* ── Type spine (colour rail) ─────────────────────────────────── */
[b-vft795m0na] .issue-card-spine {
    position: relative;
    flex: none;
    width: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
}

/* Invisible positioning marker for the type menu (see IssueCard.razor). */
[b-vft795m0na] .issue-type-menu-anchor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
}

/* Spine is the type control: letter on top, spelled-out type name running vertically. */
[b-vft795m0na] .issue-spine-button {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 0 4px;
    overflow: hidden;
    transition: filter 120ms ease;
}

[b-vft795m0na] .issue-spine-button:hover:not([disabled]) {
    filter: brightness(0.93);
}

[b-vft795m0na] .issue-spine-button[disabled] {
    cursor: default;
}

[b-vft795m0na] .issue-spine-button:focus-visible {
    outline: 2px solid var(--accent-fill-focus);
    outline-offset: -3px;
}

[b-vft795m0na] .issue-spine-letter {
    flex: none;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

[b-vft795m0na] .issue-spine-name {
    writing-mode: vertical-rl;
    /* Weight, tracking and opacity are shared with the bar's rail so the spelled-out type
       reads the same in both. Only the size differs: the large tile has room to spare, where
       on the bar this name is what caps the card height. */
    font-size: 12px;
    font-weight: var(--df-typename-weight);
    letter-spacing: var(--df-typename-tracking);
    text-transform: uppercase;
    opacity: var(--df-typename-opacity);
    overflow: hidden;
}

/* Creator persona at the foot of the rail: initials circle in a muted per-creator colour,
   with a white ring so it reads on any type colour. Small initials by design. */
[b-vft795m0na] .issue-card-persona {
    flex: none;
    width: var(--df-persona-size-lg);
    height: var(--df-persona-size-lg);
    margin-bottom: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--df-persona-fill);
    color: var(--df-persona-foreground);
    font-size: var(--df-persona-font-lg);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.28);
    user-select: none;
}

/* ── Main content column ──────────────────────────────────────── */
[b-vft795m0na] .issue-card-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

[b-vft795m0na] .issue-card-head {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px 0 11px;
    min-width: 0;
}

/* Title clamped to two lines. Slightly darker than the default label to match the prototype. */
[b-vft795m0na] .issue-card-header-label {
    flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
    color: var(--neutral-foreground-rest);
}

[b-vft795m0na] .issue-card-uvid {
    flex: none;
    margin-top: 3px; /* drop to sit on the title's first line */
    font-family: monospace;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* Body: description then (for Decisions) choices, as a vertical stack that never grows
   the card horizontally. Clamping lives on the individual pieces (issue #445). */
[b-vft795m0na] .issue-card-body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 11px 0;
    overflow: hidden;
}

[b-vft795m0na] .issue-card-description {
    font-size: var(--type-ramp-minus-1-font-size, 0.875em);
    line-height: var(--type-ramp-minus-1-line-height, 1.25);
    color: var(--neutral-foreground-hint);
    word-break: break-word;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

[b-vft795m0na] .issue-card-choices {
    margin: 0;
    padding-inline-start: 20px;
    font-size: var(--type-ramp-minus-1-font-size, 0.875em);
    line-height: var(--type-ramp-minus-1-line-height, 1.25);
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

[b-vft795m0na] .issue-card-choice-item {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Footer strip: tags (overflow to a "+N"), the uncertainty link, and the tag menu button.
   No top border or fill — the tags sit on the card surface, as in the prototype. */
[b-vft795m0na] .issue-card-footer {
    flex: none;
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 4px 0 11px;
    box-sizing: border-box;
    gap: 4px;
    border-bottom-right-radius: 8px;
}

[b-vft795m0na] .issue-card-footer-overflow {
    flex: 1;
    width: auto;
    min-width: 0;
}

/* Tag pills — rounded, matching the prototype's badges. */
[b-vft795m0na] .issue-card-tag {
    display: inline-flex;
    align-items: center;
    height: var(--df-pill-height);
    padding: 0 var(--df-pill-padding-x);
    border-radius: var(--df-pill-radius);
    font-size: var(--df-pill-font-size);
    font-weight: var(--df-pill-font-weight);
    line-height: 1;
    white-space: nowrap;
}

/* Footer controls (the uncertainty link and the tag menu) read as round ghost buttons. */
[b-vft795m0na] .issue-card-footer fluent-button {
    flex: none;
    height: 26px;
    width: 26px;
    min-width: 26px;
}

/* The rounding has to live on the control part — a radius on the host alone leaves the
   hover fill a rounded rectangle. */
[b-vft795m0na] .issue-card-footer fluent-button::part(control) {
    background: transparent;
    border-color: transparent;
    border-radius: var(--df-control-radius-round);
    padding: 0;
}

[b-vft795m0na] .issue-card-footer fluent-button:hover::part(control) {
    background: var(--neutral-fill-stealth-hover);
}

/* tabindex="-1", so there is no keyboard focus worth showing; without this a clicked
   button keeps its focus ring and looks stuck. */
[b-vft795m0na] .issue-card-footer fluent-button:focus,
[b-vft795m0na] .issue-card-footer fluent-button:focus-visible,
[b-vft795m0na] .issue-card-footer fluent-button::part(control):focus,
[b-vft795m0na] .issue-card-footer fluent-button::part(control):focus-visible {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}

[b-vft795m0na] ul {
    padding-inline-start: 24px;
}

/* Type menu rows: colour dot, label, then the shortcut key pushed to the far right.
   The label's flex:1 opens the gap; the key sits ~12px from the menu edge.
   NOTE: deliberately NOT ::deep. FluentUI reparents menu content out of this card's
   DOM to position it, so a "::deep .x" (i.e. "[scope] .x") descendant rule would stop
   matching. Without ::deep the scope attribute lands on the element itself, which
   travels with it wherever the menu is rendered. */
.type-menu-row[b-vft795m0na] {
    display: flex;
    align-items: center;
    gap: 9px;
    /* Sets the menu's working width, which is what opens the gap before the key. */
    min-width: 130px;
}

.type-menu-row .type-dot[b-vft795m0na] {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.type-menu-row .type-name[b-vft795m0na] {
    flex: 1;
    min-width: 0;
}

/* Lives in the menu item's "end" slot, not inside .type-menu-row. Fills its (fixed
   width) column and right-aligns, so the keys line up down the menu. */
.type-key[b-vft795m0na] {
    display: block;
    width: 100%;
    text-align: right;
    font-family: monospace;
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}
/* /Pages/Framing/IssueRaising/IssueCardSmall.razor.rz.scp.css */
.issue-tile-container[b-teewbyaoni] {
    width: 100%;
    background-color: transparent;
    padding: 0;
    border: 0;
    position: relative;
    overflow: hidden;
}

/* Small tile: B2's rail shrunk to a chip. Everything that does not fit — description,
   choices, tag labels, the assessment link — is left to the editor. */
.issue-tile[b-teewbyaoni] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    min-height: 74px;
    box-sizing: border-box;
    background-color: var(--df-surface-card);
    border: 1px solid var(--df-surface-card-border);
    border-radius: var(--df-surface-card-radius);
    overflow: hidden;
    transition: border-color 140ms ease;
}

.issue-tile:hover[b-teewbyaoni] {
    border-color: var(--accent-fill-hover);
}

.issue-tile:focus-visible[b-teewbyaoni] {
    outline: none;
}

.issue-tile:focus-within[b-teewbyaoni] {
    border-color: var(--accent-fill-focus);
}

[b-teewbyaoni] .issue-tile.issue-tile-single-selected {
    border-color: var(--df-select-single) !important;
}

[b-teewbyaoni] .issue-tile.issue-tile-single-selected::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--df-select-single);
    border-radius: var(--df-surface-card-radius);
    box-sizing: border-box;
    pointer-events: none;
}

[b-teewbyaoni] .issue-tile.issue-tile-multi-selected {
    border-color: var(--df-select-multi) !important;
}

[b-teewbyaoni] .issue-tile.issue-tile-multi-selected::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--df-select-multi);
    border-radius: var(--df-surface-card-radius);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 30;
}

[b-teewbyaoni] .issue-tile-selected-corner {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 30px solid var(--df-select-multi);
    border-right: 30px solid transparent;
    z-index: 40;
    pointer-events: none;
}

[b-teewbyaoni] .issue-tile-selected-corner::after {
    content: "✓";
    position: absolute;
    top: -28px;
    left: 4px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

/* ── Type rail ────────────────────────────────────────────────── */
[b-teewbyaoni] .issue-tile-rail {
    position: relative;
    flex: none;
    width: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 5px;
    box-sizing: border-box;
}

/* Zero-height marker so the type menu opens beside the rail, not under the tile. */
[b-teewbyaoni] .issue-tile-type-anchor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
}

/* Fills the whole colour strip above the persona, so the hit target is the rail
   rather than just the glyph on it. */
[b-teewbyaoni] .issue-tile-railbtn {
    flex: 1;
    min-height: 0;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 6px 0 0;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition: filter 120ms ease;
}

[b-teewbyaoni] .issue-tile-railbtn:hover:not([disabled]) {
    filter: brightness(0.9);
}

[b-teewbyaoni] .issue-tile-railbtn[disabled] {
    cursor: default;
}

[b-teewbyaoni] .issue-tile-railbtn:focus-visible {
    outline: 2px solid var(--accent-fill-focus);
    outline-offset: -2px;
}

/* Sized to match the bar's owner persona so the two views read as one language. */
[b-teewbyaoni] .issue-tile-persona {
    flex: none;
    width: var(--df-persona-size-sm);
    height: var(--df-persona-size-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--df-persona-fill);
    color: var(--df-persona-foreground);
    box-shadow: 0 0 0 1.5px var(--df-surface-card);
    font-size: var(--df-persona-font-sm);
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

/* ── Body ─────────────────────────────────────────────────────── */
[b-teewbyaoni] .issue-tile-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 9px 7px;
    box-sizing: border-box;
}

[b-teewbyaoni] .issue-tile-title {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--neutral-foreground-rest);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Standing in for a missing title, so it reads as a description does everywhere else. */
[b-teewbyaoni] .issue-tile-title-description {
    font-weight: 400;
    color: var(--neutral-foreground-hint);
}

[b-teewbyaoni] .issue-tile-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 12px;
    min-width: 0;
}

[b-teewbyaoni] .issue-tile-dots {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
}

[b-teewbyaoni] .issue-tile-dot {
    flex: none;
    width: var(--df-dot-size);
    height: var(--df-dot-size);
    border-radius: 50%;
}

[b-teewbyaoni] .issue-tile-empty {
    font-size: 10px;
    font-style: italic;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

[b-teewbyaoni] .issue-tile-hint {
    flex: none;
    font-family: monospace;
    font-size: 9.5px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

[b-teewbyaoni] .issue-tile-hint-linked {
    color: var(--accent-foreground-rest);
}

/* Pushed to the right edge so ids line up down the grid. */
[b-teewbyaoni] .issue-tile-id {
    flex: none;
    margin-left: auto;
    font-family: monospace;
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

/* Type menu rows: colour dot, label, then the shortcut key at the far right.
   Deliberately NOT ::deep — FluentUI reparents menu content out of this component's
   DOM, so a "[scope] .x" descendant rule would stop matching. */
.type-menu-row[b-teewbyaoni] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 130px;
}

.type-menu-row .type-dot[b-teewbyaoni] {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.type-menu-row .type-name[b-teewbyaoni] {
    flex: 1;
    min-width: 0;
}

.type-key[b-teewbyaoni] {
    font-family: monospace;
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}
/* /Pages/Framing/IssueRaising/IssueEditorDialog.razor.rz.scp.css */
/*:root {
    --decision-strong: #FFE635;
    --decision-light: #FFFCE4;
    --metric-strong: #E9902D;
    --metric-light: #FFEFDD;
    --fact-strong: #B2B2B2;
    --fact-light: #E5E5E5;
    --uncertainty-strong: #4F81BD;
    --uncertainty-light: #E8EEF6;
    --other-strong: #AC66BB;
    --other-light: #DDC1E3;
    --none-strong: #E5E5E5;
    --none-light: #FFFFFF;
}*/

[b-00g1g5e2az] fluent-option {
    padding: 0 8px;
    margin: 0 1px;
    min-height: 34px;
}

    [b-00g1g5e2az] fluent-option.selected {
        background: transparent;
    }

        [b-00g1g5e2az] fluent-option.selected:hover {
            background: var(--neutral-fill-secondary-hover);
        }

        [b-00g1g5e2az] fluent-option.selected::before {
            top: unset;
            bottom: 1px;
            height: 3px;
            width: calc(100% - 10px);
            left: 5px;
        }

    [b-00g1g5e2az] fluent-option:not([disabled]):active::before {
        height: 3px;
        width: 20%;
        bottom: 1px;
        left: 40%;
    }
/* remove focus rect from ListBox... */
[b-00g1g5e2az] fluent-listbox:focus-within:not([disabled]) {
    outline: none;
}
/* remove border around un-named div surrounding fluent-listbox (comes from template; border is hard-coded by MS) */
/* remove y-scrolling -- using listbox horizontally here... */
[b-00g1g5e2az] div.issuetype-listbox-container > div {
    border: none !important;
    overflow-y: unset !important;
}

.issue-type-marker[b-00g1g5e2az] {
    height: 18px;
    width: 18px;
    border-radius: 4px;
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 4px;
    border-width: thin;
    border-style: solid;
    border-color: var(--neutral-stroke-strong-rest);
}

[b-00g1g5e2az] .sortable-list {
    --fluent-sortable-list-background-color: var(--neutral-fill-input-alt-rest) !important;
    border: 0 solid transparent !important;
    --fluent-sortable-list-item-height: 32px !important;
    padding: 0px;
    width: 100%;
    min-height: 0 !important;
}

[b-00g1g5e2az] .fluent-sortable-list .sortable-item {
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-bottom: 4px !important;
    margin-right: 30px;
    align-items: end;
}

[b-00g1g5e2az] .tags-overflow {
    /*width: 100%;*/
    flex: 1;
    box-sizing: border-box;
}

.tags-container[b-00g1g5e2az] {
    display: flex;
    width: 100%;
    align-items: center; /* Vertically centers the tags and button */
    gap: 10px;
    padding-right: 30px;
}
/* /Pages/Framing/IssueRaising/IssueFilterFlyout.razor.rz.scp.css */
.filter-flyout[b-92baulq3kv] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    gap: 4px;
}

.filter-flyout-body[b-92baulq3kv] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 4px 0 8px;
    overflow-y: auto;
}

.filter-flyout-help[b-92baulq3kv] {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--neutral-foreground-hint);
}

.filter-quick-actions[b-92baulq3kv] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* Buttons styled as hyperlinks (Fluent's FluentButton/FluentAnchor can't take an @onclick here). */
.filter-quick-action[b-92baulq3kv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--accent-fill-rest);
    cursor: pointer;
}

.filter-quick-action:hover[b-92baulq3kv] {
    text-decoration: underline;
}

/* Issue types are the shared IssueTypeChips component, which brings its own lane and look. */

.filter-tag-group[b-92baulq3kv] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Tags are the shared TagPill component, which owns their look and states. */

.filter-flyout-footer[b-92baulq3kv] {
    flex: none;
    display: flex;
    gap: 8px;
    padding-top: 14px;
    margin-top: auto;
    border-top: 1px solid var(--neutral-stroke-rest);
}
/* /Pages/Framing/IssueRaising/IssueFilterPanel.razor.rz.scp.css */
.filter-bar[b-d2wyai26za] {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Lives inside the toolbar card now (the "Search" group / second deck), so it carries
       no padding or underline of its own — the toolbar owns the surrounding spacing and
       the card owns the border. */
    padding: 0;
    width: 100%;
}

/* FluentSearch / FluentButton render their own elements, which don't receive this
   component's CSS-isolation scope attribute — ::deep is required for these rules to reach them.
   The search box auto-sizes: it grows to fill whatever space the type toggles don't need, and
   shrinks down to (but never below) 140px. Because it gives up width first, the toggles keep
   their natural width and don't scroll until the search box is already at its 140px minimum. */
.filter-bar[b-d2wyai26za]  .filter-bar-search {
    flex: 1 1 140px;
    min-width: 140px;
}

/* Chip lane — the toggles take their natural width and don't grow (the search box absorbs the
   slack). They only shrink/scroll as a last resort, once the search box has hit its minimum;
   the scrollbar stays hidden if that ever happens. */
.filter-bar-chips[b-d2wyai26za] {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0;
    scrollbar-width: none;
}

.filter-bar-chips[b-d2wyai26za]::-webkit-scrollbar {
    display: none;
}

/* Issue-type chips come from the shared IssueTypeChips component, which owns their look.
   display:contents dissolves its wrapper so the chips remain direct children of the lane —
   the lane keeps owning the gap and the horizontal scroll, and the fit measurement in
   IssueFilterPanel.razor.js keeps finding them.
   Anchored to .filter-bar-chips so this outranks the component's own display:flex — the two
   would otherwise tie on specificity and the component, being later in the bundle, would win. */
.filter-bar-chips[b-d2wyai26za]  .filter-bar-type-lane {
    display: contents;
}

/* Overflow pill: appears when some type toggles don't fit even with the search box at its
   140px minimum. Clicking it opens the fly-out, which lists every type. */
.type-overflow[b-d2wyai26za] {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px dashed var(--neutral-stroke-rest);
    border-radius: 4px;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background-color .12s;
}

.type-overflow:hover[b-d2wyai26za] {
    background: var(--neutral-fill-secondary-hover);
}

/* Shared circular × used by the tag summary. */
.active-chip-remove[b-d2wyai26za] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.75;
    border-radius: 50%;
}

.active-chip-remove:hover[b-d2wyai26za] {
    opacity: 1;
}

.active-chip-remove svg[b-d2wyai26za] {
    width: 9px;
    height: 9px;
    display: block;
}

/* Tag filter: a single neutral summary pill instead of one chip per tag. */
.tag-summary[b-d2wyai26za] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    padding: 2px 4px 2px 8px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border-radius: 999px;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-secondary-rest);
    border: 1px solid var(--neutral-stroke-rest);
}

.tag-summary-label[b-d2wyai26za] {
    padding-block: 2px;
}

.filter-bar[b-d2wyai26za]  .filter-bar-button {
    flex: none;
}

/* The "…" marking a button that opens a surface — Filter opens the fly-out panel, the same
   role as the toolbar's Edit and Export launchers, so it carries the same mark. Duplicated
   from .tb-launch-mark in IssueRaising (a small rule beats promoting this to global CSS);
   both read the same Fluent token, so the colour cannot drift. Not ::deep — the span is this
   component's own markup, passed as the button's child content, so it carries the scope. */
.filter-bar-launch-mark[b-d2wyai26za] {
    /* inline-flex + line-height:1 so the mark adds no line box of its own and cannot stretch
       the button past its siblings — kept in step with .tb-launch-mark in IssueRaising. */
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin-left: 1px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

/* Mobile: only the search box and the Filter button. The search box already grows to fill the
   row, so the Filter button's right edge lines up with the add-issue Add button below. */
@media (max-width: 768px) {
    .filter-bar[b-d2wyai26za] {
        /* Tighter search↔Filter gap on a phone; no vertical padding — the toolbar's search
           deck owns the spacing above/below, so the bar's own padding would double it. */
        gap: 6px;
    }

    .filter-bar-chips[b-d2wyai26za] {
        display: none;
    }
}
/* /Pages/Framing/IssueRaising/IssueListRow.razor.rz.scp.css */
.issue-row-container[b-w50nilawds] {
    width: 100%;
    background-color: transparent;
    padding: 0;
    border: 0;
}

/* B2's language turned horizontal: the colour rail and the creator persona form the
   left margin, the title and description run the width, tags collapse to dots. Rows
   are a continuous divided list rather than separated cards. */
[b-w50nilawds] .issue-row {
    position: relative;
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background-color: var(--df-surface-card);
    border: 0;
    border-bottom: 1px solid var(--df-surface-card-border);
    transition: background-color 120ms ease;
}

[b-w50nilawds] .issue-row:hover {
    background-color: var(--neutral-fill-stealth-hover);
}

[b-w50nilawds] .issue-row:focus-visible {
    outline: 2px solid var(--accent-fill-focus);
    outline-offset: -2px;
}

/* Blended against the row's own fill rather than `transparent`, so these stay OPAQUE.
   The action cluster inherits this colour to occlude the tag dots behind it, and a
   translucent row background would let them show straight through. */
.issue-row-container.issue-row-selected[b-w50nilawds]  .issue-row {
    background-color: color-mix(in srgb, var(--accent-fill-rest) 12%, var(--df-surface-card));
}

.issue-row-container.issue-row-multi-selected[b-w50nilawds]  .issue-row {
    background-color: color-mix(in srgb, var(--df-select-multi) 12%, var(--df-surface-card));
}

[b-w50nilawds] .issue-row-multiselect-checkbox {
    flex: none;
    margin-left: 10px;
    margin-right: 2px;
}

[b-w50nilawds] fluent-checkbox.issue-row-multiselect-checkbox::part(label) {
    width: 0;
    min-width: 0;
    padding-inline-start: 0;
    margin-inline-end: 0;
}

/* Invisible marker so the type menu opens beside the rail rather than mid-row. */
[b-w50nilawds] .issue-row-type-anchor {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 0;
    pointer-events: none;
}

/* Colour rail: full-height strip carrying the type letter; doubles as the type control. */
[b-w50nilawds] .issue-row-rail {
    flex: none;
    align-self: stretch;
    width: 30px;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition: filter 120ms ease;
}

[b-w50nilawds] .issue-row-rail:hover:not([disabled]) {
    filter: brightness(0.93);
}

[b-w50nilawds] .issue-row-rail[disabled] {
    cursor: default;
}

[b-w50nilawds] .issue-row-rail:focus-visible {
    outline: 2px solid var(--accent-fill-focus);
    outline-offset: -3px;
}

/* Creator persona, same treatment as the large card but sized for a row. */
[b-w50nilawds] .issue-row-persona {
    flex: none;
    margin: 0 9px;
    width: var(--df-persona-size-md);
    height: var(--df-persona-size-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--df-persona-fill);
    color: var(--df-persona-foreground);
    font-size: var(--df-persona-font-md);
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

/* Title then description on one line; the description truncates first. */
[b-w50nilawds] .issue-row-main {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 12px;
}

[b-w50nilawds] .issue-row-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

[b-w50nilawds] .issue-row-description {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
}

[b-w50nilawds] .issue-row-sep {
    margin: 0 7px;
    color: var(--neutral-stroke-strong);
}

/* Tags as dots — colour, with the name on hover. Full badges live in the tile views. */
[b-w50nilawds] .issue-row-dots {
    flex: none;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 10px;
}

[b-w50nilawds] .issue-row-dot {
    flex: none;
    width: var(--df-dot-size);
    height: var(--df-dot-size);
    border-radius: 50%;
}

[b-w50nilawds] .issue-row-hint {
    flex: none;
    margin-right: 10px;
    font-family: monospace;
    font-size: 10.5px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

[b-w50nilawds] .issue-row-hint-linked {
    color: var(--accent-fill-rest);
}

/* Fixed reserved width, sized for the widest expected id ("#999"), so the id column
   never shifts and the tag dots to its left keep a stable right edge. */
[b-w50nilawds] .issue-row-id {
    flex: none;
    min-width: 34px;
    text-align: right;
    margin-right: 12px;
    font-family: monospace;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* Row actions surface on hover/focus, so a resting row shows only its content. */
[b-w50nilawds] .issue-row-actions {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: 22px;
    /* Inherit the row's own background so the cluster occludes the dots/hint/id behind it
       without ever showing as a coloured rectangle — the row's background changes with
       rest / hover / selected / multi-selected, and this tracks all of them. The mask
       softens the left edge so the occluded content fades out rather than being cut. */
    background-color: inherit;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px);
            mask-image: linear-gradient(to right, transparent 0, #000 20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}

[b-w50nilawds] .issue-row:hover .issue-row-actions,
[b-w50nilawds] .issue-row:focus-within .issue-row-actions {
    opacity: 1;
    pointer-events: auto;
}

/* Sit clear of the issue number so it stays readable while the actions are showing.
   Progressive enhancement: where :has() is unsupported the actions simply overlay the
   number as before, which is the previous behaviour rather than a broken one. */
[b-w50nilawds] .issue-row:has(.issue-row-id) .issue-row-actions {
    right: 54px; /* id (34) + its right margin (12) + the resting 8 */
}

@media (hover: none) {
    [b-w50nilawds] .issue-row-actions {
        position: static;
        opacity: 1;
        pointer-events: auto;
        background: none;
        padding-left: 0;
        transform: none;
        margin-right: 6px;
    }
}

/* Every action control (link, tags, edit) reads as a round ghost button, tying back
   to the large card's footer button. Targeting the buttons rather than one class also
   picks up the link button, which is rendered by a child component. */
[b-w50nilawds] .issue-row-actions fluent-button {
    flex: none;
    height: 26px;
    width: 26px;
    min-width: 26px;
}

/* The rounding has to live on the control part — a radius on the host alone leaves
   the hover fill a rounded rectangle. */
[b-w50nilawds] .issue-row-actions fluent-button::part(control) {
    background: transparent;
    border-color: transparent;
    border-radius: var(--df-control-radius-round);
    padding: 0;
}

/* A translucent overlay rather than a fixed fill: the row behind these buttons is white
   at rest, grey on hover and tinted when selected, and a fixed grey would disappear
   against the hover state entirely. */
[b-w50nilawds] .issue-row-actions fluent-button:hover::part(control) {
    background: var(--df-control-ghost-hover);
}

[b-w50nilawds] .issue-row-actions fluent-button:active::part(control) {
    background: var(--df-control-ghost-active);
}

/* These buttons are tabindex="-1", so there is no keyboard focus worth showing; without
   this a clicked button keeps its focus ring and looks stuck. The row keeps its own
   focus outline, so keyboard navigation is unaffected. */
[b-w50nilawds] .issue-row-actions fluent-button:focus,
[b-w50nilawds] .issue-row-actions fluent-button:focus-visible,
[b-w50nilawds] .issue-row-actions fluent-button::part(control):focus,
[b-w50nilawds] .issue-row-actions fluent-button::part(control):focus-visible {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}

/* Type menu rows: colour dot, label, then the shortcut key at the far right.
   Deliberately NOT ::deep — FluentUI reparents menu content out of this component's
   DOM, so a "[scope] .x" descendant rule would stop matching. Without ::deep the
   scope attribute lands on the element itself and travels with it. */
.type-menu-row[b-w50nilawds] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 130px;
}

.type-menu-row .type-dot[b-w50nilawds] {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.type-menu-row .type-name[b-w50nilawds] {
    flex: 1;
    min-width: 0;
}

.type-key[b-w50nilawds] {
    font-family: monospace;
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}
/* /Pages/Framing/IssueRaising/IssueRaising.razor.rz.scp.css */
.page-container[b-bvshua29n2] {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 40px;
    padding-bottom: 20px;
}

/* ── Floating grouped toolbar ──────────────────────────────────────────────
   A raised card that floats on the gray chrome zone provided by <DocumentToolbar>
   (DocumentLayout, between the banner and the paper): a lighter surface
   (--neutral-layer-1) than that gutter, with its own border and shadow so it reads
   as lifted. The zone owns the gap around it, so the toolbar carries no margin of
   its own. Controls sit in captioned groups separated by dividers, the captions
   borrowing the ribbon idiom while the toolbar stays a single row. */
/* NOT ::deep. <DocumentToolbar> teleports this element (via SectionContent) into the
   layout's outlet, reparenting it out of this component's DOM subtree — so an
   ancestor-scoped "[hash] .x" rule (what ::deep compiles to) no longer matches. A plain
   selector compiles to ".x[hash]": the scope lands on the element itself and travels with
   it. Same trap as FluentMenu reparenting. Applied to the top-level teleported element
   (.issue-toolbar-card); nested rows/controls keep ::deep — their scoped ancestor (the
   card) travels with them. */
.issue-toolbar-card[b-bvshua29n2] {
    display: flex;
    flex-direction: column;
    background: var(--neutral-layer-1);
    border: 1px solid var(--df-surface-card-border);
    border-radius: var(--df-chrome-layer-radius);
    /* Bottom-heavy elevation, like an Office ribbon lifted off the surface: the shadow
       falls below the bar (positive Y offset) and the negative spread keeps it from
       bleeding out to the sides or above. Local literal — one consumer, so no shared token
       (a soft grey drop reads on the light gutter; the border carries dark theme). */
    box-shadow:
        0 6px 14px -6px rgba(0, 0, 0, 0.24),
        0 2px 4px -2px rgba(0, 0, 0, 0.10);
    box-sizing: border-box;
}

/* Top deck: the control groups, and — on a wide zone — the inline Search group.
   flex-wrap lets the Search group drop to a full-width second deck when the zone is
   narrow (it is given flex-basis:100% below, so only it wraps). */
.issue-toolbar[b-bvshua29n2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Column gap only: the wrapped Search deck sets its own vertical spacing (margin +
       hairline), so a row-gap here would double it. */
    gap: 0 8px;
    padding: 8px 12px;
    box-sizing: border-box;
}

.issue-toolbar-mobile[b-bvshua29n2] {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    box-sizing: border-box;
}

/* ── Search group: second deck by default, inline on a wide zone ──────────────────
   By default it wraps to its own full-width row inside the card (version-2 two-tier),
   separated by a hairline. On a wide zone the container query below pulls it back inline
   between Tags and Organise. One IssueFilterPanel drives both. */
[b-bvshua29n2] .tb-search-group {
    order: 10;               /* after every control group, so it lands on the wrapped row */
    flex: 1 1 100%;          /* a full line to itself → it is the only thing that wraps */
    align-items: stretch;
    min-width: 0;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

[b-bvshua29n2] .tb-search-group > .tb-group-controls {
    display: block;
    width: 100%;
    min-height: 0;
}

/* No caption on the wrapped row (the search box speaks for itself); shown when inline. */
[b-bvshua29n2] .tb-search-group > .tb-group-cap {
    display: none;
}

/* The divider before the Search group only makes sense when it is inline. */
[b-bvshua29n2] .tb-div-search {
    display: none;
}

/* Wide zone: the Search group folds up into the control row as a real group between Tags
   and Organise. The query reads .doc-toolbar-zone's inline size (container-type is set on
   it in DocumentToolbar.razor.css), so it tracks the toolbar's actual width — rail
   collapses included — not the viewport. */
@container (min-width: 1080px) {
    [b-bvshua29n2] .tb-search-group {
        order: 0;
        flex: 1 1 240px;
        align-items: center;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    [b-bvshua29n2] .tb-search-group > .tb-group-cap {
        display: block;
    }

    [b-bvshua29n2] .tb-div-search {
        display: block;
    }

    /* The Search group grows to fill the middle, so the spacer is redundant. */
    [b-bvshua29n2] .tb-spacer {
        display: none;
    }
}

[b-bvshua29n2] .tb-spacer {
    flex: 1 1 auto;
}

[b-bvshua29n2] .tb-div {
    flex: none;
    width: 1px;
    align-self: stretch;
    margin: 2px 3px;
    background: var(--neutral-stroke-rest);
}

[b-bvshua29n2] .tb-group {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* min-height matches the tallest control (the segmented track) so every group's
   controls sit on the same line and the captions align across the row. */
[b-bvshua29n2] .tb-group-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
}

[b-bvshua29n2] .tb-group-cap {
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1;
    color: var(--neutral-foreground-hint);
}

/* ── Segmented control: a recessed track with a raised thumb on the active
   choice. Plain <button>s (not FluentButton), so this component's scoped CSS
   reaches them directly without ::deep gymnastics; the icon colour is driven
   by each FluentIcon's Color parameter (Accent when active, Neutral otherwise). */
[b-bvshua29n2] .tb-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--neutral-foreground-rest) 8%, transparent);
}

[b-bvshua29n2] .tb-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    transition: background 130ms ease, box-shadow 130ms ease;
}

[b-bvshua29n2] .tb-seg-btn:hover:not(.active):not([disabled]) {
    background: var(--df-control-ghost-hover);
}

[b-bvshua29n2] .tb-seg-btn.active {
    background: var(--neutral-layer-1);
    box-shadow: var(--elevation-shadow-card-rest);
}

[b-bvshua29n2] .tb-seg-btn[disabled] {
    cursor: default;
    opacity: 0.5;
}

[b-bvshua29n2] .tb-seg-btn:focus-visible {
    outline: 2px solid var(--accent-fill-focus);
    outline-offset: 1px;
}

/* ── Tinted toggle button (Post Issues). Off is a quiet ghost; on carries an
   accent wash and hairline, echoing the switchable-chip idiom. */
[b-bvshua29n2] .tb-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 6px 11px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    transition: background 130ms ease, border-color 130ms ease;
}

[b-bvshua29n2] .tb-toggle:hover {
    background: var(--df-control-ghost-hover);
}

[b-bvshua29n2] .tb-toggle.on {
    /* Mixed against the card rather than `transparent` so the wash resolves opaque and keeps
       its accent character on either theme — over a dark surface a translucent tint washes
       out to plain grey. --neutral-foreground-rest, not -strong: FluentUI only defines
       -rest and -hint, so -strong silently resolved to nothing. */
    background: color-mix(in srgb, var(--accent-fill-rest) var(--df-toggle-on-wash), var(--neutral-layer-1));
    border-color: color-mix(in srgb, var(--accent-fill-rest) 42%, transparent);
    color: var(--neutral-foreground-rest);
}

[b-bvshua29n2] .tb-toggle:focus-visible {
    outline: 2px solid var(--accent-fill-focus);
    outline-offset: 1px;
}

[b-bvshua29n2] .tb-toggle-iconly {
    width: 34px;
    padding: 0;
    gap: 0;
    justify-content: center;
}

/* ── Plain ghost icon button (mobile Select / overflow). */
[b-bvshua29n2] .tb-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    transition: background 130ms ease;
}

[b-bvshua29n2] .tb-iconbtn:hover {
    background: var(--df-control-ghost-hover);
}

[b-bvshua29n2] .tb-iconbtn:focus-visible {
    outline: 2px solid var(--accent-fill-focus);
    outline-offset: 1px;
}

[b-bvshua29n2] .tb-selcount {
    padding: 0 4px;
    font-size: 13.5px;
    white-space: nowrap;
    color: var(--neutral-foreground-hint);
}

/* FluentButtons in a group centre against the taller segmented controls. */
[b-bvshua29n2] .tb-btn {
    align-self: center;
}

/* ── Button vocabulary: one look per role ─────────────────────────────────────────
   switch = segmented track (.tb-seg) · toggle = tinted (.tb-toggle, Post Issues and
   Select) · launch = quiet outline + a trailing mark · command = accent primary,
   danger destructive, quiet dismiss. Accent is spent only on a toggle that is ON and
   on the one primary command in a context; everything else rests quiet. */

/* The "…" marking a button that opens a surface (dialog or panel); Export's chevron is
   FluentMenuButton's own. NOT ::deep — the span is markup this component renders (as the
   button's child content), so it carries the scope attribute and a plain selector survives
   the teleport. Duplicated as .filter-bar-launch-mark in IssueFilterPanel — a small rule
   beats global CSS, and both read the same Fluent token so the colour cannot drift. */
.tb-launch-mark[b-bvshua29n2] {
    /* inline-flex + line-height:1 so the mark contributes no line box of its own — a tall
       glyph (or an icon) would otherwise stretch the button past its siblings. Centres the
       Export chevron against the label. */
    display: inline-flex;
    align-items: center;
    line-height: 1;
    margin-left: 1px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

/* Destructive command. The tint rides Fluent's own foreground tokens set on the host so it
   cascades into the button's shadow DOM — a plain `color` rule would not reach it. Same
   --error the facilitator unread dot uses. */
[b-bvshua29n2] .tb-cmd-danger {
    --neutral-foreground-rest: var(--error, #d13438);
    --neutral-foreground-hover: var(--error, #d13438);
    --neutral-foreground-active: var(--error, #d13438);
}

/* Non-owner facilitator toggle: a small unread dot overlaid on the button. */
[b-bvshua29n2] .facilitator-toggle-button-wrapper {
    position: relative;
    display: inline-flex;
}

[b-bvshua29n2] .facilitator-toggle-button-wrapper.facilitator-toggle-button-with-dot .facilitator-toggle-unread-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--error, #d13438);
    z-index: 2;
    pointer-events: none;
}

/* Facilitator message sits on the paper now (the toolbar left the region); keep it
   from being squeezed by the scrolling issue list, as the old region did. */
[b-bvshua29n2] .issue-facilitator-slot {
    flex-shrink: 0;
}

[b-bvshua29n2] .issue-add-container {
    flex-shrink: 0;
    padding-top: 8px;
    padding-bottom: 0;
}

/* Below the mobile breakpoint the compact bar carries the controls. The desktop row
   stays in the DOM but keeps only the Search group (its control groups, dividers and
   spacer hide), so the card reads as [compact controls] + [search] with one
   IssueFilterPanel. order puts the compact bar on top. */
@media (max-width: 768px) {
    /* Even the stacked vertical gaps in the mobile card to 6px steps — the same distance as
       the search box↔Filter button (.filter-bar's mobile 6px column gap). The icon bar gives
       up its bottom padding and the search deck its top padding, so the only gaps around the
       hairline are the search deck's own margin-top (icon bar → hairline) and padding-top
       (hairline → search box), 6px each; the card's top and bottom match. */
    .issue-toolbar-mobile[b-bvshua29n2] {
        display: flex;
        order: 1;
        padding: 6px 12px 0;
    }

    .issue-toolbar[b-bvshua29n2] {
        order: 2;
        padding: 0 12px 6px;
    }

    [b-bvshua29n2] .tb-search-group {
        margin-top: 6px;
        padding-top: 6px;
    }

    [b-bvshua29n2] .issue-toolbar > .tb-group:not(.tb-search-group),
    [b-bvshua29n2] .issue-toolbar > .tb-div,
    [b-bvshua29n2] .issue-toolbar > .tb-spacer {
        display: none;
    }
}
/* /Pages/Framing/IssueRaising/IssuesList.razor.rz.scp.css */
[b-yn2wgo63tt] .issue-list-all-views {
    grid-template-columns: 1fr;
    gap: 0px 4px;
    --fluent-sortable-list-item-height: 100% !important;
    --fluent-sortable-list-background-color: transparent !important;
    border: 0 solid transparent !important;
    padding: 1px !important;
    align-items: start;
    align-content: start;
}

    [b-yn2wgo63tt] .issue-list-all-views .sortable-item {
        border: 0 solid transparent !important;
        padding: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }

[b-yn2wgo63tt] .issue-list-list-view {
    display: block;
}
    [b-yn2wgo63tt] .issue-list-list-view .sortable-item {
        margin-bottom: 0px !important;
    }

/* Column count follows the grid's OWN width, not the viewport (issue #465).
   repeat(auto-fill, minmax(<card-min>, 1fr)) fits as many columns as the grid's box allows, so
   pinning/unpinning the DocumentLayout sidebar reflows the grid at a fixed window size — the old
   @media ladder keyed off window.innerWidth and could not see the sidebar. The per-mode minimum is
   the target card width: derived from the previous desktop column counts and held roughly constant
   as the grid resizes, so a narrow grid shows more, size-bounded cards rather than one over-wide
   card (e.g. a large tile at a 460px grid is two cards, not one). Tune a minimum by eye if a mode's
   cards read too wide or too cramped. */
[b-yn2wgo63tt] .issue-list-bar-view {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
}

[b-yn2wgo63tt] .issue-list-small-tile-view {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

[b-yn2wgo63tt] .issue-list-large-tile-view {
    display: grid;
    /* Roomier than the shared 0/4px gap, matching the prototype's rhythm. */
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* /Pages/Framing/IssueRaising/IssueTagsEditorDialog.razor.rz.scp.css */

[b-uvxp5izl0o] .sortable-list {
    --fluent-sortable-list-background-color: var(--neutral-fill-input-alt-rest) !important;
    border: 0 solid transparent !important;
    --fluent-sortable-list-item-height: 32px !important;
    padding: 0px;
    width: 100%;
    min-height: 0 !important;
}

[b-uvxp5izl0o] .fluent-sortable-list .sortable-item {
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-bottom: 4px !important;
    margin-right: 30px;
    align-items: end;
}

/*
    styles to set up the sortable list to "the DF look"
*/
/*
::deep .tags-list {
    --fluent-sortable-list-background-color: var(--neutral-fill-input-alt-rest) !important;
    border: 0 solid transparent !important;
    --fluent-sortable-list-item-height: 38px !important;
    padding: 0px;
    width: 100%;
    min-height: 0 !important;
}

    ::deep .tags-list .sortable-item {
        padding-right: 0px !important;
        margin-bottom: 4px !important;
    }

        ::deep .tags-list .sortable-item:hover {
            background: var(--neutral-fill-input-alt-hover);
        }

    ::deep .tags-list .sortable-grab {
        width: auto;
        background: transparent;
        padding: 0 0px 0px 5px;
    }

::deep .tags-list fluent-text-field::part(root) {
    background: transparent;
}

    ::deep .tags-list fluent-text-field::part(root):hover {
        border-color: var(--neutral-stroke-hover);
    }

    ::deep .tags-list fluent-text-field::part(root):focus-within {
        border-color: var(--neutral-stroke-hover);
    }

::deep .tags-list fluent-button:hover {
    background: #C42B1C;
}

    ::deep .tags-list fluent-button:hover svg {
        fill: white !important;
    }


::deep .tags-list fluent-button:active {
    background: #DF667B;
}

    ::deep .tags-list fluent-button:active svg {
        fill: white !important;
    }*/


    /*
        Telerik colorpicker needs to be 30px, not 32... :/
    */
/* /Pages/Framing/IssueRaising/MergeIssuesDialog.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════════════
   Merge Issues — guided wizard
   Layout is plain scoped HTML (rail, cards, segments, chips); FluentUI inputs
   (radios / text fields) keep their own styling. Colours use FluentUI design
   tokens so light/dark themes flow through automatically.
   ════════════════════════════════════════════════════════════════════════ */

/* Accent-tinted surfaces derived from the theme accent (no hard-coded colour) */
.merge-wiz[b-cojsf5vigu] {
    --wiz-accent-soft: color-mix(in srgb, var(--accent-fill-rest) 12%, var(--neutral-layer-1));
    --wiz-accent-line: color-mix(in srgb, var(--accent-fill-rest) 40%, transparent);
    --wiz-choice: #7a5bd0; /* distinct hue for the "as choice" role, kept separate from the accent */

    display: grid;
    grid-template-columns: 232px 1fr;
    /* Fill the dialog body rather than hugging the content. The rail's divider is a border on a
       grid item, so it can only be as tall as the grid row: without this it ends wherever the
       current step's content ends and appears to grow and shrink as you move between steps.
       max() keeps the 420px floor if the body's height turns out not to be resolvable. */
    min-height: max(420px, 100%);
    gap: 0;
}

/* ── Step rail (desktop) ─────────────────────────────────────────────────── */
.merge-wiz-rail[b-cojsf5vigu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 16px 4px 0;
    border-right: 1px solid var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));
}

/* Sentence case, no letter-spaced small caps — the app has no such eyebrow elsewhere. */
.merge-wiz-rail-head[b-cojsf5vigu] {
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    padding: 4px 10px 10px;
}

.merge-wiz-step[b-cojsf5vigu] {
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--neutral-foreground-rest);
    font-family: inherit;
}

.merge-wiz-step:hover[b-cojsf5vigu] {
    background: var(--neutral-fill-secondary-rest, var(--neutral-layer-2));
}

.merge-wiz-step.current[b-cojsf5vigu] {
    background: var(--wiz-accent-soft);
}

.merge-wiz-step-dot[b-cojsf5vigu] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-strong, var(--neutral-stroke-rest));
    color: var(--neutral-foreground-hint);
}

.merge-wiz-step.current .merge-wiz-step-dot[b-cojsf5vigu] {
    background: var(--accent-fill-rest);
    border-color: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest, #fff);
}

/* --presence-available is the app's affirmative green: --df-select-multi already builds
   multi-select on it. (An earlier --success-fill-rest here was not a real Fluent token, so
   it silently fell through to a literal that never followed the theme.) */
.merge-wiz-step.done .merge-wiz-step-dot[b-cojsf5vigu] {
    background: var(--presence-available);
    border-color: var(--presence-available);
    color: var(--foreground-on-accent-rest, #fff);
}

.merge-wiz-step-txt[b-cojsf5vigu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.merge-wiz-step-txt strong[b-cojsf5vigu] {
    font-size: var(--type-ramp-base-font-size);
    font-weight: 600;
}

.merge-wiz-step-txt span[b-cojsf5vigu] {
    font-size: var(--type-ramp-minus-2-font-size);
    color: var(--neutral-foreground-hint);
}

.merge-wiz-step.todo .merge-wiz-step-txt strong[b-cojsf5vigu] {
    color: var(--neutral-foreground-hint);
}

/* ── Main pane ───────────────────────────────────────────────────────────── */
.merge-wiz-main[b-cojsf5vigu] {
    padding: 4px 4px 4px 22px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.merge-wiz-head[b-cojsf5vigu] {
    margin-bottom: 16px;
}

.merge-wiz-body[b-cojsf5vigu] {
    display: flex;
    flex-direction: column;
}

/* Step help text: body size in the same hint grey the filter fly-out uses for its help. */
.merge-wiz-lead[b-cojsf5vigu] {
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    color: var(--neutral-foreground-hint);
    margin: 0 0 16px;
}

/* Mobile stepper — hidden on desktop */
.merge-wiz-mobar[b-cojsf5vigu] {
    display: none;
}

/* ── Confirm step: member cards ──────────────────────────────────────────── */
/* minmax(0, 1fr), not a bare 1fr: bare 1fr floors at min-content, so one card with a
   long unbroken title would widen its whole column. */
.merge-wiz-cards[b-cojsf5vigu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.merge-wiz-card[b-cojsf5vigu] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    padding: 13px;
    background: var(--neutral-layer-1);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.merge-wiz-card.is-survivor[b-cojsf5vigu] {
    border-color: var(--accent-fill-rest);
    box-shadow: inset 0 0 0 1px var(--accent-fill-rest);
    background: var(--wiz-accent-soft);
}

.merge-wiz-card.is-excluded:not(.is-survivor)[b-cojsf5vigu] {
    opacity: 0.6;
}

.merge-wiz-card-top[b-cojsf5vigu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.merge-wiz-surv-btn[b-cojsf5vigu],
.merge-wiz-surv-pill[b-cojsf5vigu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    line-height: 1;
}

.merge-wiz-surv-btn[b-cojsf5vigu] {
    border: 1px solid var(--neutral-stroke-strong, var(--neutral-stroke-rest));
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    font-family: inherit;
}

.merge-wiz-surv-btn:hover[b-cojsf5vigu] {
    border-color: var(--accent-fill-rest);
    color: var(--accent-fill-rest);
}

.merge-wiz-surv-pill[b-cojsf5vigu] {
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest, #fff);
}

.merge-wiz-id[b-cojsf5vigu] {
    font-size: var(--type-ramp-minus-2-font-size);
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    flex-shrink: 0;
}

.merge-wiz-card-title[b-cojsf5vigu] {
    font-size: var(--type-ramp-base-font-size);
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

.merge-wiz-card-desc[b-cojsf5vigu] {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
    line-height: 1.45;
    word-break: break-word;
}

.merge-wiz-card-desc.is-empty[b-cojsf5vigu] {
    font-style: italic;
    opacity: 0.8;
}

.merge-wiz-surv-note[b-cojsf5vigu] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    color: var(--accent-fill-rest);
    margin-top: auto;
}

/* Segmented role control */
.merge-wiz-roleseg[b-cojsf5vigu] {
    display: inline-flex;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    overflow: hidden;
    margin-top: auto;
    align-self: flex-start;
    max-width: 100%;
    flex-wrap: wrap;
}

.merge-wiz-seg[b-cojsf5vigu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    border-right: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    font-family: inherit;
    padding: 6px 10px;
    cursor: pointer;
}

.merge-wiz-seg:last-child[b-cojsf5vigu] {
    border-right: none;
}

.merge-wiz-seg:hover[b-cojsf5vigu] {
    background: var(--neutral-fill-secondary-rest, var(--neutral-layer-2));
    color: var(--neutral-foreground-rest);
}

.merge-wiz-seg.fold.on[b-cojsf5vigu] {
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest, #fff);
}

.merge-wiz-seg.choice.on[b-cojsf5vigu] {
    background: var(--wiz-choice);
    color: var(--foreground-on-accent-rest, #fff);
}

/* Text is the *layer*, not white: --neutral-foreground-hint inverts with the theme, so a
   fixed white label would sit on light grey in dark mode. Same pairing as TagPill's
   neutral pill. */
.merge-wiz-seg.out.on[b-cojsf5vigu] {
    background: var(--neutral-foreground-hint);
    color: var(--neutral-layer-1);
}

/* FluentIcon paints itself the accent colour regardless of inherited `color`, so an icon on a
   filled surface has to be given its fill explicitly. It follows the label colour of the
   surface it sits on — hence the neutral "out" state is split out below. */
.merge-wiz-seg.fold.on[b-cojsf5vigu]  svg,
.merge-wiz-seg.choice.on[b-cojsf5vigu]  svg,
.merge-wiz-surv-pill[b-cojsf5vigu]  svg,
.merge-wiz-step.done .merge-wiz-step-dot[b-cojsf5vigu]  svg {
    fill: var(--foreground-on-accent-rest, #fff) !important;
}

.merge-wiz-seg.out.on[b-cojsf5vigu]  svg {
    fill: var(--neutral-layer-1) !important;
}

/* Legend */
.merge-wiz-legend[b-cojsf5vigu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
    padding: 13px 14px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));
    border-radius: 10px;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-rest);
}

.merge-wiz-legend span[b-cojsf5vigu] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.merge-wiz-legend .lg[b-cojsf5vigu] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.merge-wiz-legend .lg.fold[b-cojsf5vigu] {
    background: var(--accent-fill-rest);
}

.merge-wiz-legend .lg.choice[b-cojsf5vigu] {
    background: var(--wiz-choice);
}

.merge-wiz-legend .lg.out[b-cojsf5vigu] {
    background: var(--neutral-foreground-hint);
}

/* ── Result-type selector (Confirm step) ─────────────────────────────────── */
.merge-wiz-typebar[b-cojsf5vigu] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));
    border-radius: 10px;
}

/* The FluentLabel supplies size, weight and colour; only its behaviour in the bar is ours. */
.merge-wiz-typebar[b-cojsf5vigu]  .merge-wiz-typebar-lbl {
    flex: none;
    white-space: nowrap;
}

/* The chips themselves are the shared IssueTypeChips component; only the bar
   that hosts them and its label live here. */

/* ── Title / Description candidate radios ────────────────────────────────── */
.merge-candidate-text[b-cojsf5vigu] {
    font-size: var(--type-ramp-base-font-size);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Space out the slotted FluentRadio items; gap must live on the positioning-region part */
.merge-wiz-radios[b-cojsf5vigu]  fluent-radio-group::part(positioning-region) {
    gap: 8px;
}

/* The custom title/description field sits *below* the radios (not slotted inside one),
   so it can stretch to the full dialog width. Force the host and its inner box full width. */
.merge-wiz-body[b-cojsf5vigu]  .merge-wiz-custom-field {
    display: block;
    width: 100%;
    margin-top: 8px;
}

.merge-wiz-body[b-cojsf5vigu]  .merge-wiz-custom-field::part(root),
.merge-wiz-body[b-cojsf5vigu]  .merge-wiz-custom-field::part(control) {
    width: 100%;
    box-sizing: border-box;
}

/* ── Choices editor — TextRow rows in a FluentSortableList (matches the Issue Editor) ── */
.merge-wiz-body[b-cojsf5vigu]  .sortable-list {
    --fluent-sortable-list-background-color: var(--neutral-fill-input-alt-rest) !important;
    border: 0 solid transparent !important;
    --fluent-sortable-list-item-height: 32px !important;
    padding: 0;
    width: 100%;
    min-height: 0 !important;
}

.merge-wiz-body[b-cojsf5vigu]  .sortable-list .sortable-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 4px !important;
    /* 30px right gutter matches TextRow's standalone width (calc(100% - 30px)) so the
       add-new row lines up with the rows above. */
    margin-right: 30px;
    align-items: center;
}

/* Fixed-width origin shown in the TextRow's right slot: "#13" or "—" */
.merge-wiz-choice-src[b-cojsf5vigu] {
    display: inline-block;
    min-width: 40px;
    text-align: right;
    font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace;
    font-size: var(--type-ramp-minus-2-font-size);
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    padding-right: 4px;
}

/* ── Tags step ───────────────────────────────────────────────────────────── */
.merge-wiz-tags[b-cojsf5vigu] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* The tags themselves are the shared TagPill component; only their lane lives here. */

/* ── Review step ─────────────────────────────────────────────────────────── */
/* The surviving issue is shown with the real (read-only) IssueCard, so the only
   layout needed here is: card on top, the "what will happen" summary beneath it. */
.merge-wiz-review[b-cojsf5vigu] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
}

/* Keep the preview near a board tile's width rather than stretching across the whole
   dialog. The card is 16/10, so 400px reads at about 400x250. */
.merge-wiz-review[b-cojsf5vigu]  .issue-card-container {
    max-width: 400px;
}

/* Preview-only (not a read-only rule): this card is a depiction of the merged result,
   not something to interact with, so it keeps its resting border on hover/focus. */
.merge-wiz-review[b-cojsf5vigu]  .issue-card:hover,
.merge-wiz-review[b-cojsf5vigu]  .issue-card:focus-within {
    border: 1px solid var(--neutral-stroke-rest);
}

/* Reads as a paragraph block, not a tile — no border, background or padding. */
.merge-wiz-audit[b-cojsf5vigu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.merge-wiz-audit-line[b-cojsf5vigu] {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: var(--type-ramp-minus-1-font-size);
    line-height: 1.5;
}

.merge-wiz-audit-line span[b-cojsf5vigu] {
    min-width: 0;
    word-break: break-word;
}

.merge-wiz-audit-line.good[b-cojsf5vigu] {
    color: var(--neutral-foreground-rest);
}

.merge-wiz-audit-line[b-cojsf5vigu]  svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.merge-wiz-audit-line.good[b-cojsf5vigu]  svg {
    fill: var(--accent-fill-rest) !important;
}

.merge-wiz-audit-line.bad[b-cojsf5vigu]  svg {
    fill: var(--error) !important;
}

.merge-wiz-audit-line.muted[b-cojsf5vigu]  svg {
    fill: var(--neutral-foreground-hint) !important;
}

.merge-wiz-audit-line.bad[b-cojsf5vigu] {
    color: var(--error);
}

.merge-wiz-audit-line.muted[b-cojsf5vigu] {
    color: var(--neutral-foreground-hint);
}

/* ── Footer nav ──────────────────────────────────────────────────────────── */
.merge-wiz-foot[b-cojsf5vigu] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.merge-wiz-foot-spacer[b-cojsf5vigu] {
    flex: 1;
}

/* ════════════════════════════════════════════════════════════════════════
   Responsive — collapse rail to a top stepper on narrow viewports
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .merge-wiz[b-cojsf5vigu] {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .merge-wiz-rail[b-cojsf5vigu] {
        display: none;
    }

    .merge-wiz-main[b-cojsf5vigu] {
        /* Right inset keeps the cards off the scrollbar; the dialog body is
           stretched to the edge in app.css so the scrollbar rides the edge. */
        padding: 0 10px 0 0;
    }

    /* Pin the step title + progress pips; the dialog body is the scroll container,
       so this bar rides at its top while only the step content scrolls beneath it. */
    .merge-wiz-topfixed[b-cojsf5vigu] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--neutral-layer-1);
        border-bottom: 1px solid var(--neutral-stroke-divider-rest, var(--neutral-stroke-rest));
        padding-bottom: 10px;
        margin-bottom: 14px;
    }

    .merge-wiz-topfixed .merge-wiz-head[b-cojsf5vigu] {
        margin-bottom: 0;
    }

    .merge-wiz-mobar[b-cojsf5vigu] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
    }

    .merge-wiz-pips[b-cojsf5vigu] {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .merge-wiz-pip[b-cojsf5vigu] {
        width: 26px;
        height: 5px;
        border-radius: 3px;
        border: none;
        padding: 0;
        background: var(--neutral-layer-3, var(--neutral-layer-2));
        cursor: pointer;
    }

    .merge-wiz-pip.done[b-cojsf5vigu] {
        background: color-mix(in srgb, var(--accent-fill-rest) 55%, transparent);
    }

    .merge-wiz-pip.current[b-cojsf5vigu] {
        background: var(--accent-fill-rest);
    }

    .merge-wiz-mstep[b-cojsf5vigu] {
        font-size: var(--type-ramp-minus-1-font-size);
        font-weight: 600;
        color: var(--neutral-foreground-rest);
        white-space: nowrap;
    }

    .merge-wiz-cards[b-cojsf5vigu] {
        grid-template-columns: 1fr;
    }

}
/* /Pages/Framing/IssueRaising/UncertaintyAssessmentLinkButton.razor.rz.scp.css */
/* This component renders a button and its menu with no wrapper of its own, so it has no
   element to style as a host — its every caller places it inside a flex row. */
[b-np0hi4s4tw] .uncertainty-link-button {
    width: 16px;
    min-width: 16px;
    height: 16px;
    border-radius: var(--df-control-radius-round);
}

[b-np0hi4s4tw] fluent-button.uncertainty-link-button::part(control) {
    width: 16px;
    min-width: 16px;
    min-height: 16px;
    height: 16px;
    padding: 0;
    border-radius: var(--df-control-radius-round);
    box-sizing: border-box;
}
/* /Pages/Framing/Shared/IssueTypeChips.razor.rz.scp.css */
/* ============================================================================
   Issue-type chips — the shared type selector.

   One chip per issue type: filled with the type's own colour when selected,
   muted when not, so the type scope reads at a glance. This stylesheet is the
   single source of truth for the look; callers pick a size and a selection mode
   rather than restyling. Colours come from IssueExtensions.GetIssueColor (the
   one domain source for type colour), applied inline per chip.
   ============================================================================ */

.issue-type-chips[b-uyalv4c6yw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.issue-type-chip[b-uyalv4c6yw] {
    flex: none;
    display: inline-flex;
    align-items: center;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .12s, color .12s, border-color .12s, filter .12s;
}

/* Selected: the inline style supplies the type colour and its contrast text. */
.issue-type-chip.on:hover[b-uyalv4c6yw] {
    filter: brightness(0.94);
}

/* Unselected: the type's colour stays as a hairline border and the label keeps full-strength
   text, so the chip reads as "off but available" rather than disabled — and the type is still
   identifiable at a glance. Hovering washes in a little of the colour to preview selecting it. */
.issue-type-chip.off[b-uyalv4c6yw] {
    background: transparent;
    color: var(--neutral-foreground-rest);
    border-color: var(--chip-color);
}

.issue-type-chip.off:hover[b-uyalv4c6yw] {
    background: color-mix(in srgb, var(--chip-color) var(--df-chip-off-wash), transparent);
}

.issue-type-chip:focus-visible[b-uyalv4c6yw] {
    outline: 2px solid var(--accent-fill-focus);
    outline-offset: 1px;
}

.issue-type-chip[disabled][b-uyalv4c6yw] {
    cursor: default;
    opacity: 0.6;
}

/* ---- Size ramp -------------------------------------------------------------
   Compact suits a dense filter bar; comfortable gives dialogs and forms a
   slightly larger target and label. */
.issue-type-chips.compact .issue-type-chip[b-uyalv4c6yw] {
    padding: 3px 9px;
    font-size: 11.5px;
}

.issue-type-chips.comfortable .issue-type-chip[b-uyalv4c6yw] {
    padding: 5px 12px;
    font-size: 13px;
}
/* /Pages/Framing/Shared/TagPill.razor.rz.scp.css */
/* ============================================================================
   Tag pill — the selectable form of the tag badge.

   Geometry and type come from the shared --df-pill-* tokens, the same ones behind
   .issue-card-tag and .issue-bar-tag, so a switchable tag is visibly the same
   object as a displayed one. Colour arrives inline from the caller (the tag's own
   colour is its domain value); only the states live here.
   ============================================================================ */

.tag-pill[b-gvq818la1i] {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--df-pill-height);
    padding: 0 var(--df-pill-padding-x);
    border-radius: var(--df-pill-radius);
    font-size: var(--df-pill-font-size);
    font-weight: var(--df-pill-font-weight);
    line-height: 1;
    white-space: nowrap;
    font-family: inherit;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .12s, color .12s, border-color .12s, filter .12s;
}

/* Selected: the caller's inline style supplies the tag colour and its contrast text. */
.tag-pill.on:hover[b-gvq818la1i] {
    filter: brightness(0.94);
}

/* Unselected: the tag's colour survives as a hairline border and the label keeps full-strength
   text, so the pill reads as "off but available" and the tag stays identifiable. */
.tag-pill.off[b-gvq818la1i] {
    background: transparent;
    color: var(--neutral-foreground-rest);
    border-color: var(--tag-color);
}

.tag-pill.off:hover[b-gvq818la1i] {
    background: color-mix(in srgb, var(--tag-color) var(--df-chip-off-wash), transparent);
}

/* Pseudo-tags with no colour of their own, e.g. "Untagged" — the neutral equivalent. */
.tag-pill.neutral.on[b-gvq818la1i] {
    background: var(--neutral-foreground-hint);
    color: var(--neutral-layer-1);
}

.tag-pill.neutral.off[b-gvq818la1i] {
    border-color: var(--neutral-foreground-hint);
}

.tag-pill.neutral.off:hover[b-gvq818la1i] {
    background: color-mix(in srgb, var(--neutral-foreground-hint) var(--df-chip-off-wash), transparent);
}

.tag-pill:focus-visible[b-gvq818la1i] {
    outline: 2px solid var(--accent-fill-focus);
    outline-offset: 1px;
}

.tag-pill[disabled][b-gvq818la1i] {
    cursor: default;
    opacity: 0.6;
}
/* /Pages/Index.razor.rz.scp.css */
/* Destination position for the fly-in: top-right of the content area.
   Six keyframe steps approximate a smooth accelerating arc.
   X progresses in small then large increments (acceleration).
   Y traces a downward swoop then rises back up to the destination.
   Per-segment cubic-beziers keep transitions smooth between steps. */
.df-logo-animation[b-ekdd6ya0z1] {
    --logo-dest-x: calc(100vw - 160px);
    --logo-dest-y: 0px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    transform-origin: top left;
    animation: fly-to-greeting-b-ekdd6ya0z1 1.0s 5.5416667s linear forwards;
}

/* Hidden until sessionStorage has been checked, preventing a flash of the
   animation starting before we know whether to skip it. */
.df-logo-animation--loading[b-ekdd6ya0z1] {
    opacity: 0;
}

/* Applied when the animation has already been played this browser session.
   Hide the animated SVG entirely — the static img is shown instead. */
.df-logo-animation--skip[b-ekdd6ya0z1] {
    display: none;
}

@keyframes fly-to-greeting-b-ekdd6ya0z1 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
        animation-timing-function: cubic-bezier(0.3, 0, 0.7, 0.2);
    }
    /* Slow start — barely moved right, just beginning to dip */
    15% {
        transform: translate(calc(var(--logo-dest-x) * 0.05), calc(var(--logo-dest-y) + 8vh)) scale(0.82);
        opacity: 0.95;
        animation-timing-function: cubic-bezier(0.4, 0, 0.6, 0.3);
    }
    /* Deepening into the swoop, picking up speed */
    35% {
        transform: translate(calc(var(--logo-dest-x) * 0.22), calc(var(--logo-dest-y) + 22vh)) scale(0.60);
        opacity: 0.85;
        animation-timing-function: cubic-bezier(0.4, 0.1, 0.6, 0.5);
    }
    /* Bottom of the arc — halfway across, maximum depth */
    50% {
        transform: translate(calc(var(--logo-dest-x) * 0.45), calc(var(--logo-dest-y) + 26vh)) scale(0.42);
        opacity: 0.70;
        animation-timing-function: cubic-bezier(0.35, 0.2, 0.55, 0.7);
    }
    /* Rising, accelerating hard to the right */
    65% {
        transform: translate(calc(var(--logo-dest-x) * 0.66), calc(var(--logo-dest-y) + 18vh)) scale(0.26);
        opacity: 0.50;
        animation-timing-function: cubic-bezier(0.3, 0.4, 0.5, 0.9);
    }
    /* Nearly there — most distance covered, almost back to top */
    85% {
        transform: translate(calc(var(--logo-dest-x) * 0.90), calc(var(--logo-dest-y) + 5vh)) scale(0.09);
        opacity: 0.20;
        animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
    }
    /* Arrives as a dot at the greeting logo */
    100% {
        transform: translate(var(--logo-dest-x), var(--logo-dest-y)) scale(0);
        opacity: 0;
    }
}

/* ── Welcome page content ──────────────────────────────────────────────────── */

/* Hidden while we determine whether animation needs to play. */
.welcome-content--loading[b-ekdd6ya0z1] {
    opacity: 0;
    pointer-events: none;
    padding: 20px;
}

/* Animation already played — show immediately. */
.welcome-content--skip[b-ekdd6ya0z1] {
    opacity: 1;
    padding: 20px;
}

/* First visit — fade in after the logo animation has cleared the viewport. */
.welcome-content[b-ekdd6ya0z1] {
    opacity: 0;
    animation: welcome-fade-in-b-ekdd6ya0z1 1.0s 5.5s ease-out forwards;
    padding: 20px;
}

@keyframes welcome-fade-in-b-ekdd6ya0z1 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Greeting ──────────────────────────────────────────────────────────────── */

/* Establish a container so the greeting can respond to its own width
   rather than the full viewport width (which includes the sidebar). */
.welcome-content[b-ekdd6ya0z1],
.welcome-content--skip[b-ekdd6ya0z1],
.welcome-content--loading[b-ekdd6ya0z1] {
    container-type: inline-size;
    container-name: welcome;
}

.welcome-greeting[b-ekdd6ya0z1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0px;
    gap: 16px;
}

/* On narrow content areas (e.g. phone portrait, or small window) the logo
   moves above the greeting text. */
@container welcome (max-width: 800px) {
    .welcome-greeting[b-ekdd6ya0z1] {
        flex-direction: column-reverse;
        align-items: flex-start;
        margin-bottom: 12px;
    }
}

.welcome-greeting-logo[b-ekdd6ya0z1] {
    height: 56px;
    width: auto;
    flex-shrink: 0;
    /* Hidden until the SVG hands off, or immediately visible when animation is skipped. */
    opacity: 0;
    transform: scale(0.15);
    transform-origin: center center;
}

/* Applied by JS when animation was already played — just show the logo. */
.welcome-greeting-logo--visible[b-ekdd6ya0z1] {
    opacity: 1;
    transform: scale(1);
}

/* Applied by JS during the sleight-of-hand: grows out of center with a fade. */
.welcome-greeting-logo--spin-in[b-ekdd6ya0z1] {
    animation: logo-grow-in-b-ekdd6ya0z1 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes logo-grow-in-b-ekdd6ya0z1 {
    from {
        opacity: 0;
        transform: scale(0.15);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Sections ──────────────────────────────────────────────────────────────── */

.welcome-section[b-ekdd6ya0z1] {
    margin-bottom: 24px;
}

.welcome-section-header[b-ekdd6ya0z1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.welcome-loading[b-ekdd6ya0z1] {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.welcome-more-note[b-ekdd6ya0z1] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-top: 10px;
}

/* ── Empty states ──────────────────────────────────────────────────────────── */

.welcome-empty-state[b-ekdd6ya0z1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    border-radius: 8px;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-rest);
}

.welcome-empty-state p[b-ekdd6ya0z1] {
    margin: 0;
    font-size: 14px;
}

.welcome-empty-state--success[b-ekdd6ya0z1] {
    /* Pale affirmative wash (was the phantom --success-fill-rest, which fell back to plain grey). */
    background: color-mix(in srgb, var(--df-status-success) 12%, var(--neutral-fill-layer-rest));
}

/* ── Document cards ────────────────────────────────────────────────────────── */

.doc-cards-row[b-ekdd6ya0z1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.doc-card[b-ekdd6ya0z1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--neutral-fill-stealth-rest);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    min-height: 72px;
}

.doc-card:hover[b-ekdd6ya0z1] {
    background: var(--neutral-fill-stealth-hover);
    box-shadow: var(--elevation-shadow-card-rest);
}

.doc-card:focus-visible[b-ekdd6ya0z1] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 2px;
}

.doc-card--pending[b-ekdd6ya0z1] {
    border-left: 3px solid var(--df-status-warning);
}

.doc-card-icon[b-ekdd6ya0z1] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--neutral-fill-secondary-rest);
}

.doc-card-body[b-ekdd6ya0z1] {
    flex: 1;
    min-width: 0;
}

.doc-card-name[b-ekdd6ya0z1] {
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
    color: var(--neutral-foreground-rest);
}

.doc-card-meta[b-ekdd6ya0z1] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.doc-card-date[b-ekdd6ya0z1] {
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

/* ── Feature/idea cards ────────────────────────────────────────────────────── */

.feature-cards-row[b-ekdd6ya0z1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.feature-card[b-ekdd6ya0z1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    color: var(--neutral-foreground-on-accent-rest);
}

.feature-card:hover[b-ekdd6ya0z1] {
    transform: translateY(-2px);
    box-shadow: var(--elevation-shadow-card-rest);
}

.feature-card:focus-visible[b-ekdd6ya0z1] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 2px;
}

.feature-card--calibrate[b-ekdd6ya0z1] {
    background: linear-gradient(135deg, #6a1b9a, #8e24aa);
}

.feature-card--assess[b-ekdd6ya0z1] {
    background: linear-gradient(135deg, #2e7d32, #43a047);
}

.feature-card--frame[b-ekdd6ya0z1] {
    background: linear-gradient(135deg, var(--accent-fill-rest), var(--accent-fill-hover));
}

.feature-card--toolbox[b-ekdd6ya0z1] {
    background: linear-gradient(135deg, #e65100, #fb8c00);
}

.feature-card--riskfactorvoi[b-ekdd6ya0z1] {
    background: linear-gradient(135deg, #006064, #0097a7);
}

.feature-card-icon[b-ekdd6ya0z1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    margin-bottom: 4px;
}

.feature-card-title[b-ekdd6ya0z1] {
    font-size: 18px;
    font-weight: 700;
    color: white;
}

.feature-card-desc[b-ekdd6ya0z1] {
    font-size: 13px;
    opacity: 0.9;
    margin: 0 0 8px;
    line-height: 1.5;
    color: white;
}

.feature-card-link[b-ekdd6ya0z1] {
    color: white;
    text-decoration: none;
}

    .feature-card-link:hover[b-ekdd6ya0z1] {
        text-decoration: underline;
    }

/* ── Announcements card ────────────────────────────────────────────────────── */

.announcements-card[b-ekdd6ya0z1] {
    border-radius: 10px;
    background: var(--neutral-fill-stealth-rest);
    border: 1px solid transparent;
    padding: 20px 24px;
}

.announcements-card-body[b-ekdd6ya0z1] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.announcements-card-body > :first-child[b-ekdd6ya0z1] {
    flex-shrink: 0;
    margin-top: 2px;
}

.announcements-title[b-ekdd6ya0z1] {
    font-weight: 600;
    font-size: 15px;
    margin: 0 0 6px;
    color: var(--neutral-foreground-rest);
}

.announcements-desc[b-ekdd6ya0z1] {
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    margin: 0 0 10px;
    line-height: 1.5;
}

/* /Pages/Interview/DiscreteUncertainty/Assess.razor.rz.scp.css */
.outcome-name[b-1vtmd37wt0] {
    padding-right: 12px;
    vertical-align: middle;
}

.prob-input[b-1vtmd37wt0] {
    vertical-align: middle;
    padding: 2px;
    display: flex;
    align-items: center;
}
/* /Pages/Interview/DiscreteUncertainty/Debias.razor.rz.scp.css */
[b-nslooii3va] .help-text-label {
    margin-right: 30px;
}

.top-banner[b-nslooii3va] {
    display: flex;
    width: 100%;
}

[b-nslooii3va] .sortable-list {
    --fluent-sortable-list-background-color: var(--neutral-fill-input-alt-rest) !important;
    border: 0 solid transparent !important;
    --fluent-sortable-list-item-height: 32px !important;
    padding: 0px;
    width: 100%;
    min-height: 0 !important;
}
/* /Pages/Interview/DiscreteUncertainty/Results.razor.rz.scp.css */
[b-fgmksann14] .summary-row {
    color: var(--accent-foreground-active);
    /*border-top: dashed;*/
}

.discrete-results-table[b-fgmksann14] {
    border-collapse: collapse;
    width: auto;
}

.discrete-results-table th[b-fgmksann14],
.discrete-results-table td[b-fgmksann14] {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    height: 44px;
    padding: 0 16px;
    text-align: left;
    white-space: nowrap;
}

.discrete-results-table th[b-fgmksann14] {
    font-weight: 600;
}

.discrete-results-table th:first-child[b-fgmksann14],
.discrete-results-table td:first-child[b-fgmksann14] {
    min-width: 200px;
}

.discrete-results-table__probability[b-fgmksann14] {
    min-width: 100px;
    text-align: right !important;
}

.outcome-name[b-fgmksann14] {
    padding-right: 12px;
    vertical-align: middle;
}

.prob-input[b-fgmksann14] {
    vertical-align: middle;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: -4px;
}
/* /Pages/Interview/DiscreteUncertainty/Setup.razor.rz.scp.css */
[b-zdk94du6cb] .sortable-list {
    --fluent-sortable-list-background-color: var(--neutral-fill-input-alt-rest) !important;
    border: 0 solid transparent !important;
    --fluent-sortable-list-item-height: 32px !important;
    padding: 0px;
    width: 100%;
    min-height: 0 !important;
}
/* /Pages/Interview/RangeUncertainty/Assess.razor.rz.scp.css */
.outcome-name[b-mzeqyvc17k] {
    padding-right: 12px;
    vertical-align: middle;
}

.prob-input[b-mzeqyvc17k] {
    vertical-align: middle;
    padding: 2px;
}

/* Chart theming (background, text, gridlines, fonts) now comes from the shared df-chart class that
   ThemedTelerikChart applies, so the old per-page --kendo-chart-* overrides are gone. */

.range-check-panel-gap[b-mzeqyvc17k] {
    margin-top: 16px;
}

.range-check-table-and-box[b-mzeqyvc17k] {
    display: flex;
    align-items: stretch;
    gap: 18px;
}

.range-check-box-plot-container[b-mzeqyvc17k] {
    flex: 0 0 64px;
    width: 64px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

@media (max-width: 900px) {
    .range-check-table-and-box[b-mzeqyvc17k] {
        flex-direction: column;
    }

    .range-check-box-plot-container[b-mzeqyvc17k] {
        width: 100%;
        flex: 1 1 auto;
    }
}
/* /Pages/Interview/RangeUncertainty/Debias.razor.rz.scp.css */
[b-ja8kpk62rt] .help-text-label {
    margin-right: 30px;
}

.top-banner[b-ja8kpk62rt] {
    display: flex;
    width: 100%;
}

[b-ja8kpk62rt] .sortable-list {
    --fluent-sortable-list-background-color: var(--neutral-fill-input-alt-rest) !important;
    border: 0 solid transparent !important;
    --fluent-sortable-list-item-height: 32px !important;
    padding: 0px;
    width: 100%;
    min-height: 0 !important;
}
/* /Pages/Interview/RangeUncertainty/Results.razor.rz.scp.css */
[b-csucl3updw] .summary-row {
    color: var(--accent-foreground-active);
}

.range-results-table[b-csucl3updw] {
    border-collapse: collapse;
    min-width: max-content;
    width: max-content;
}

.range-results-table th[b-csucl3updw],
.range-results-table td[b-csucl3updw] {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    height: 44px;
    padding: 0 16px;
    text-align: left;
    white-space: nowrap;
}

.range-results-table th[b-csucl3updw] {
    font-weight: 600;
}

.range-results-table__number[b-csucl3updw] {
    min-width: 140px;
    text-align: right !important;
}

.range-final-value-input[b-csucl3updw] {
    display: flex;
    justify-content: flex-end;
    margin-right: -12px;
}

/* vertically centers table headers */
[b-csucl3updw] .column-header > div {
    margin-top: 4px;
}
/* /Pages/Interview/RangeUncertainty/Setup.razor.rz.scp.css */
[b-rg8tmmkknx] .sortable-list {
    --fluent-sortable-list-background-color: var(--neutral-fill-input-alt-rest) !important;
    border: 0 solid transparent !important;
    --fluent-sortable-list-item-height: 32px !important;
    padding: 0px;
    width: 100%;
    min-height: 0 !important;
}
/* /Pages/Interview/ReliabilityOfInformation/Assess.razor.rz.scp.css */
/* Styling number inputs similar to TextRow */

[b-54rh19rv7q] fluent-number-field::part(root) {
    background: transparent;
}

[b-54rh19rv7q] fluent-number-field::part(control) {
    height: 31px;
    min-height: 31px;
    max-height: 31px;
    background-color: var(--neutral-fill-input-alt-rest);
    border: 1px solid var(--neutral-stroke-input-active);
    border-radius: calc(var(--control-corner-radius) * 1px);
}

[b-54rh19rv7q] fluent-number-field:hover::part(control) {
    background-color: var(--neutral-fill-input-alt-hover);
}

/* Suppress default underline to match TextRow */
[b-54rh19rv7q] fluent-number-field:after {
    border-width: 0px;
}

/* Row container aligns label left, input right */
.roi-number-row[b-54rh19rv7q] {
    column-gap: 16px;
}

/* Right-side number group alignment and spacing */
.roi-number-row .number-with-suffix[b-54rh19rv7q] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Keep compact width like TextRow use-cases */
.roi-number-row fluent-number-field[b-54rh19rv7q] {
    width: 75px;
}

.div-prob-entry[b-54rh19rv7q] {
    display: flex;
    align-items: center;
    gap: 0px;
    margin-top: 4px;
    margin-bottom: 8px;
}

.span-percent[b-54rh19rv7q] {
    margin-left: 4px;
}

.outcome-name[b-54rh19rv7q] {
    padding-right: 12px;
    vertical-align: middle;
}

.prob-input[b-54rh19rv7q] {
    vertical-align: middle;
    padding: 2px;
    display: flex;
    align-items: center;
}
/* /Pages/Interview/ReliabilityOfInformation/Components/InterpretationProbabilityTable.razor.rz.scp.css */
.interpretation-probability-table[b-achw37tgx7] {
    width: auto;
}

.table-header[b-achw37tgx7] {
    margin-bottom: 16px;
}

.probability-table[b-achw37tgx7] {
    width: auto;
    border-collapse: collapse;
    border: 1px solid var(--neutral-stroke-divider-rest);
}

    .probability-table th[b-achw37tgx7],
    .probability-table td[b-achw37tgx7] {
        padding: 4px 16px;
        border: 1px solid var(--neutral-stroke-divider-rest);
        text-align: left;
    }

    .probability-table thead th[b-achw37tgx7] {
        background-color: var(--neutral-layer-2);
        font-weight: 600;
        padding: 6px 16px;
    }

.real-outcome-cell[b-achw37tgx7] {
    vertical-align: middle;
}

.reliability-cell[b-achw37tgx7] {
    vertical-align: middle;
}

.reliability-cell-content[b-achw37tgx7] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.odd-row[b-achw37tgx7] {
    background-color: var(--neutral-layer-1);
}
/* /Pages/Interview/ReliabilityOfInformation/Debias.razor.rz.scp.css */
[b-ipt7jucpom] .help-text-label {
    margin-right: 30px;
}

.top-banner[b-ipt7jucpom] {
    display: flex;
    width: 100%;
}

[b-ipt7jucpom] .sortable-list {
    --fluent-sortable-list-background-color: var(--neutral-fill-input-alt-rest) !important;
    border: 0 solid transparent !important;
    --fluent-sortable-list-item-height: 32px !important;
    padding: 0px;
    width: 100%;
    min-height: 0 !important;
}
/* /Pages/Interview/ReliabilityOfInformation/Results.razor.rz.scp.css */
.probability-table[b-bqydzjsaey] {
    width: auto;
    border-collapse: collapse;
    border: 1px solid var(--neutral-stroke-divider-rest);
}

    .probability-table th[b-bqydzjsaey],
    .probability-table td[b-bqydzjsaey] {
        padding: 4px 16px;
        border: 1px solid var(--neutral-stroke-divider-rest);
        text-align: left;
    }

    .probability-table thead th[b-bqydzjsaey] {
        background-color: var(--neutral-layer-2);
        font-weight: 600;
        padding: 6px 16px;
    }

.real-outcome-cell[b-bqydzjsaey] {
    vertical-align: middle;
}

.odd-row[b-bqydzjsaey] {
    background-color: var(--neutral-layer-1);
}

.probability-table .probability-cell[b-bqydzjsaey] {
    text-align: right;
}

.reliability-cell-content[b-bqydzjsaey] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
/* /Pages/Interview/ReliabilityOfInformation/Setup.razor.rz.scp.css */
[b-aorbn0svhu] .sortable-list {
    --fluent-sortable-list-background-color: var(--neutral-fill-input-alt-rest) !important;
    border: 0 solid transparent !important;
    --fluent-sortable-list-item-height: 32px !important;
    padding: 0px;
    width: 100%;
    min-height: 0 !important;
}

[b-aorbn0svhu] #rel-assess-unc-assess-popup {
    width: fit-content;
}
/* /Pages/Interview/Shared/LanguageRelationshipScale.razor.rz.scp.css */
.sk-scale-container[b-kqykal02sf] {
/*    padding: 16px;
    box-shadow: var(--elevation-shadow-card-rest);
*/}

.sk-scale-table[b-kqykal02sf] {
    margin-top: 8px;
}

.sk-scale-range[b-kqykal02sf] {
    width: 90px;
    vertical-align: top;
    color: var(--neutral-foreground-hint);
}

.sk-scale-desc[b-kqykal02sf] {
    text-align: left;
    vertical-align: top;
    color: var(--neutral-foreground-hint);
}
/* /Pages/RiskFactorVoi/RiskFactorVoiWorkspace.razor.rz.scp.css */
/* Chrome shared by every step of the workspace.
   The five step views are separate components, so scoped CSS gives each its own island and anything
   common has to be copied into all of them — which is exactly how the tabs drifted apart: three
   .rfv-tile definitions with different radii and shadows, three names for the same KPI strip, and
   labels written seven ways. This page is the one ancestor all five share, so ::deep from here
   reaches every step and the shared chrome can be declared once. Rules that belong to a single step
   stay in that step's own file; anything two steps would otherwise duplicate belongs here. */

/* Gold is the one domain colour — the VOI headline accent — so it stays local and keeps its dark
   variant. Signed value colours (positive/negative) are NOT domain-specific; they compose from the
   shared --df-value-* tokens (Fluent presence palette) so the feature never owns a private green/red.
   Presence colours are theme-constant, so the signed pair needs no dark override here. */
.rfv-workspace[b-i145wab70d] {
    --rfv-gold: #C9920A;
}

@media (prefers-color-scheme: dark) {
    .rfv-workspace[b-i145wab70d] {
        --rfv-gold: #EBBF09;
    }
}

/* ── the page's two label idioms ────────────────────────────────────────────
   Every label is one of two things, and each is written the same way wherever it appears, so the eye
   can tell them apart by role rather than by which step it happens to be on:

     TERM     minus-1 / 600 / sentence case / hint — names one field or one column
     EYEBROW  minus-2 / 700 / uppercase / .08em / hint — qualifies a GROUP of terms or figures

   Uppercase is what separates them, so it has to stay exclusive to the group tier: the moment a
   plain column header is uppercased it reads as a band, and two adjacent tables stop matching.

   Block titles are a third tier and come from Fluent directly (FluentLabel Typography.Subject);
   page titles are Typography.PageTitle; running text is Typography.Body. Nothing sets a font-size
   outside those. */

/* ── step skeleton ──────────────────────────────────────────────────────────
   Every step is a padded page with a Fluent title, a hint-coloured subtitle and a FluentGrid whose
   items run xs=12 sm=12 lg=10 xl=8 — no step caps its own width in pixels. */
.rfv-workspace[b-i145wab70d]  .rfv-step {
    padding: 20px;
}

/* Collapse the "Risk Factor Value of Information - " title prefix on narrow viewports (mirrors GTD). */
@media (max-width: 768px) {
    .rfv-workspace[b-i145wab70d]  .rfv-title-prefix {
        display: none;
    }
}

/* A titled block on the page surface. Deliberately not a card: the steps read as one continuous
   document, and boxing each block fought that. */
.rfv-workspace[b-i145wab70d]  .rfv-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rfv-workspace[b-i145wab70d]  .rfv-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Explanatory text under a block. Size and leading come from the Fluent ramp via the FluentLabel
   itself — only the spacing is set here. */
.rfv-workspace[b-i145wab70d]  .rfv-help {
    display: block;
    margin-top: 8px;
}

/* ── view toggle ────────────────────────────────────────────────────────────
   A recessed track with a raised thumb, rather than a split button group: it says "pick a view of
   the same thing", which is what all three of ours do (results criterion, tree criterion, and the
   chart's S-curve/histogram switch). A split group would say "these are actions". */
.rfv-workspace[b-i145wab70d]  .rfv-toggle {
    display: inline-flex;
    background: var(--neutral-fill-secondary-rest, rgba(0, 0, 0, .04));
    border: 1px solid var(--neutral-stroke-rest, rgba(0, 0, 0, .1));
    border-radius: 999px;
    padding: 3px;
}

.rfv-workspace[b-i145wab70d]  .rfv-toggle button {
    border: 0;
    background: transparent;
    color: var(--neutral-foreground-hint);
    font: inherit;
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.rfv-workspace[b-i145wab70d]  .rfv-toggle button.on {
    background: var(--neutral-layer-1, #fff);
    color: var(--neutral-foreground-rest);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

/* ── KPI strip ──────────────────────────────────────────────────────────────
   One headline figure carrying the accent, then supporting stats. Each step sets its own
   grid-template-columns since the number of stats differs; everything else is shared. */
.rfv-workspace[b-i145wab70d]  .rfv-kpi-row {
    display: grid;
    gap: 12px;
}

.rfv-workspace[b-i145wab70d]  .rfv-hero {
    background: color-mix(in srgb, var(--rfv-gold) 12%, var(--neutral-layer-1));
    border: 1px solid var(--rfv-gold);
    border-radius: calc(var(--control-corner-radius) * 1px);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rfv-workspace[b-i145wab70d]  .rfv-stat {
    background: var(--neutral-fill-secondary-rest);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius) * 1px);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

/* EYEBROW — the hero and the stats beside it are one row of figures, so they share one label. */
.rfv-workspace[b-i145wab70d]  .rfv-hero-l,
.rfv-workspace[b-i145wab70d]  .rfv-stat-l {
    font-size: var(--type-ramp-minus-2-font-size);
    color: var(--neutral-foreground-hint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.rfv-workspace[b-i145wab70d]  .rfv-hero-v {
    font-size: var(--type-ramp-plus-3-font-size);
    font-weight: 700;
    color: var(--rfv-gold);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.rfv-workspace[b-i145wab70d]  .rfv-hero-s {
    font-size: var(--type-ramp-minus-2-font-size);
    color: var(--neutral-foreground-hint);
}

.rfv-workspace[b-i145wab70d]  .rfv-stat-v {
    font-size: var(--type-ramp-plus-2-font-size);
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}

.rfv-workspace[b-i145wab70d]  .rfv-arrow {
    color: var(--neutral-foreground-hint);
}

/* ── empty state ────────────────────────────────────────────────────────────
   Shown when a step has nothing to draw because no risk factors exist yet. */
.rfv-workspace[b-i145wab70d]  .rfv-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-base-font-size);
}

/* Signed colours win over the neutral value colour (declared after). */
.rfv-workspace[b-i145wab70d]  .rfv-neg { color: var(--df-value-negative); }
.rfv-workspace[b-i145wab70d]  .rfv-pos { color: var(--df-value-positive); }
/* /Pages/Toolbox/GameTheoryDiagnostic/GTDiagnostic.razor.rz.scp.css */
/* Game Theory Diagnostic wizard shell. */
.gtd-wizard[b-3vmiu26olx] {
    padding: 20px;
    /* Width reference for the per-step title container query (see each StepN.razor.css). */
    container-type: inline-size;
}
/* /Pages/Toolbox/GameTheoryDiagnostic/Steps/Step1Opportunity.razor.rz.scp.css */
/* Collapse the "Game Theory Diagnostic - " title prefix when the wizard column is too narrow to fit it. */
@container (max-width: 640px) {
    .gtd-title-prefix[b-doa0gmmtcu] {
        display: none;
    }
}

/* Framed radio options. The classes are forwarded onto FluentUI web components, which don't carry this
   component's scope attribute, so they're reached with ::deep (anchored to the .gtd-step wrapper). */
[b-doa0gmmtcu] .gtd-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    /* Keep the framed options clear of the right edge (border-box folds this into the 100% width). */
    padding-right: 30px;
}

/* FluentRadioGroup slots its radios into a shadow-DOM "positioning-region" that shrink-wraps to content
   width (host align-items: flex-start), so width:100% on each radio never fills the row. Reach the exposed
   shadow part and force it full width so the framed radios match a full-width row. */
[b-doa0gmmtcu] .gtd-radio-group::part(positioning-region) {
    width: 100%;
    align-items: stretch;
    /* The radios are flex children of this shadow part, so the row spacing must live here — a gap on
       the .gtd-radio-group host doesn't reach slotted content. Matches the checkbox list's 8px. */
    gap: 8px;
}

[b-doa0gmmtcu] .gtd-option-fluent {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    margin: 0;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-fill-stealth-rest, transparent);
    transition: background 0.12s ease, border-color 0.12s ease;
}

[b-doa0gmmtcu] .gtd-option-fluent:hover {
    background: var(--neutral-fill-stealth-hover, rgba(255, 255, 255, 0.04));
}

[b-doa0gmmtcu] .gtd-option-fluent.selected {
    border-color: var(--accent-fill-rest);
    background: var(--accent-fill-rest-transparent, rgba(99, 102, 241, 0.14));
}
/* /Pages/Toolbox/GameTheoryDiagnostic/Steps/Step2ValueAtRisk.razor.rz.scp.css */
/* Collapse the "Game Theory Diagnostic - " title prefix when the wizard column is too narrow to fit it. */
@container (max-width: 640px) {
    .gtd-title-prefix[b-aouz2kq9dy] {
        display: none;
    }
}

/* Percentage input with a trailing "%" suffix. */
.gtd-suffix-input[b-aouz2kq9dy] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gtd-suffix[b-aouz2kq9dy] {
    color: var(--neutral-foreground-hint);
}

/* Framed radio/checkbox options. The classes are forwarded onto FluentUI web components, which don't carry
   this component's scope attribute, so they're reached with ::deep (anchored to the .gtd-step wrapper). */
[b-aouz2kq9dy] .gtd-radio-group,
[b-aouz2kq9dy] .gtd-check-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    /* Keep the framed options clear of the right edge (border-box folds this into the 100% width). */
    padding-right: 30px;
}

/* FluentRadioGroup slots its radios into a shadow-DOM "positioning-region" that shrink-wraps to content
   width (host align-items: flex-start), so width:100% on each radio never fills the row. Reach the exposed
   shadow part and force it full width so the framed radios match the full-width checkbox rows. */
[b-aouz2kq9dy] .gtd-radio-group::part(positioning-region) {
    width: 100%;
    align-items: stretch;
    /* The radios are flex children of this shadow part, so the row spacing must live here — a gap on
       the .gtd-radio-group host doesn't reach slotted content. Matches the checkbox list's 8px. */
    gap: 8px;
}

[b-aouz2kq9dy] .gtd-option-fluent {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    margin: 0;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-fill-stealth-rest, transparent);
    transition: background 0.12s ease, border-color 0.12s ease;
}

[b-aouz2kq9dy] .gtd-option-fluent:hover {
    background: var(--neutral-fill-stealth-hover, rgba(255, 255, 255, 0.04));
}

[b-aouz2kq9dy] .gtd-option-fluent.selected {
    border-color: var(--accent-fill-rest);
    background: var(--accent-fill-rest-transparent, rgba(99, 102, 241, 0.14));
}
/* /Pages/Toolbox/GameTheoryDiagnostic/Steps/Step3Stakeholders.razor.rz.scp.css */
/* Collapse the "Game Theory Diagnostic - " title prefix when the wizard column is too narrow to fit it. */
@container (max-width: 640px) {
    .gtd-title-prefix[b-9vbqs82hzh] {
        display: none;
    }
}

/* Framed radio/checkbox options. The classes are forwarded onto FluentUI web components, which don't carry
   this component's scope attribute, so they're reached with ::deep (anchored to the .gtd-step wrapper). */
[b-9vbqs82hzh] .gtd-radio-group,
[b-9vbqs82hzh] .gtd-check-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    /* Keep the framed options clear of the right edge (border-box folds this into the 100% width). */
    padding-right: 30px;
}

/* FluentRadioGroup slots its radios into a shadow-DOM "positioning-region" that shrink-wraps to content
   width (host align-items: flex-start), so width:100% on each radio never fills the row. Reach the exposed
   shadow part and force it full width so the framed radios match the full-width checkbox rows. */
[b-9vbqs82hzh] .gtd-radio-group::part(positioning-region) {
    width: 100%;
    align-items: stretch;
    /* The radios are flex children of this shadow part, so the row spacing must live here — a gap on
       the .gtd-radio-group host doesn't reach slotted content. Matches the checkbox list's 8px. */
    gap: 8px;
}

[b-9vbqs82hzh] .gtd-option-fluent {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    margin: 0;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-fill-stealth-rest, transparent);
    transition: background 0.12s ease, border-color 0.12s ease;
}

[b-9vbqs82hzh] .gtd-option-fluent:hover {
    background: var(--neutral-fill-stealth-hover, rgba(255, 255, 255, 0.04));
}

[b-9vbqs82hzh] .gtd-option-fluent.selected {
    border-color: var(--accent-fill-rest);
    background: var(--accent-fill-rest-transparent, rgba(99, 102, 241, 0.14));
}
/* /Pages/Toolbox/GameTheoryDiagnostic/Steps/Step4Assessment.razor.rz.scp.css */
/* Collapse the "Game Theory Diagnostic - " title prefix when the wizard column is too narrow to fit it. */
@container (max-width: 640px) {
    .gtd-title-prefix[b-4x28z49379] {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Placement matrix
   The matrix is a CSS grid: a narrow y-axis-label column and a content column.
   The axis labels, the 2×2 cell grid, and the placement message all share the
   content column, so the message lines up flush with the cells.
--------------------------------------------------------------------------- */
.gtd-matrix[b-4x28z49379] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 6px;
    row-gap: 6px;
    align-items: center;
    margin-left: -24px;
    margin-top: 16px;
}

.gtd-matrix-toplabel[b-4x28z49379] { grid-column: 2; grid-row: 1; }
.gtd-matrix-ylabel[b-4x28z49379]   { grid-column: 1; grid-row: 2; }
.gtd-matrix-grid[b-4x28z49379]     { grid-column: 2; grid-row: 2; }
.gtd-matrix-xlabel[b-4x28z49379]   { grid-column: 2; grid-row: 3; }
.gtd-matrix-message[b-4x28z49379]  { grid-column: 2; grid-row: 4; margin-top: 8px; }

.gtd-matrix-toplabel[b-4x28z49379],
.gtd-matrix-xlabel[b-4x28z49379],
.gtd-matrix-ylabel[b-4x28z49379] {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--neutral-foreground-hint);
}

.gtd-matrix-ylabel[b-4x28z49379] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.gtd-matrix-grid[b-4x28z49379] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 128px 128px;
    gap: 10px;
}

.gtd-cell[b-4x28z49379] {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-fill-stealth-rest, rgba(255, 255, 255, 0.02));
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    transition: all 0.15s ease;
}

.gtd-cell.active[b-4x28z49379] {
    border-color: var(--accent-fill-rest);
    background: var(--accent-fill-rest-transparent, rgba(99, 102, 241, 0.2));
    color: var(--neutral-foreground-rest);
    font-weight: 600;
    box-shadow: 0 0 0 1px var(--accent-fill-rest) inset, 0 6px 20px rgba(0, 0, 0, 0.28);
}

/* Resolved placement recommendation: an accent-led panel so the result pops. */
.gtd-placement-message[b-4x28z49379] {
    padding: 14px 18px;
    border-radius: 8px;
    border: 1px solid var(--accent-fill-rest);
    border-left-width: 4px;
    background: var(--accent-fill-rest-transparent, rgba(99, 102, 241, 0.12));
    color: var(--neutral-foreground-rest);
    line-height: 1.5;
}

/* Bulleted list of missing answers inside the "cannot place yet" warning bar. */
.gtd-missing-list[b-4x28z49379] {
    margin: 6px 0;
    padding-left: 22px;
}

/* ---------------------------------------------------------------------------
   Summary report: one framed card with evenly spaced sections. The section
   heading/item/pill markup comes from @code render fragments, so it's reached
   with ::deep (anchored to the literal .gtd-report / .gtd-report-section).
--------------------------------------------------------------------------- */
.gtd-report[b-4x28z49379] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 24px;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 12px;
    background: var(--neutral-fill-stealth-rest, rgba(255, 255, 255, 0.02));
}

.gtd-report-section[b-4x28z49379] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Section heading (accent label) + its divider. */
[b-4x28z49379] .gtd-report-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-4x28z49379] .gtd-report-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-4x28z49379] .gtd-report-label {
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
}

[b-4x28z49379] .gtd-report-value {
    color: var(--neutral-foreground-rest);
    line-height: 1.5;
    white-space: pre-wrap;
}

[b-4x28z49379] .gtd-report-bullets {
    margin: 2px 0 0;
    padding-left: 20px;
    color: var(--neutral-foreground-rest);
    line-height: 1.6;
}

[b-4x28z49379] .gtd-report-empty {
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

[b-4x28z49379] .gtd-pill {
    display: inline-block;
    /* +4px beyond the item's 2px gap, so the pill sits a little clearer of its label. */
    margin-top: 4px;
    padding: 4px 14px;
    border-radius: 999px;
    background: var(--accent-fill-rest-transparent, rgba(99, 102, 241, 0.25));
    border: 1px solid var(--accent-fill-rest);
    color: var(--neutral-foreground-rest);
    font-size: var(--type-ramp-base-font-size);
    font-weight: 600;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
}
/* /Pages/Toolbox/GameTheoryDiagnostic/Steps/StepParticipants.razor.rz.scp.css */
/* Collapse the "Game Theory Diagnostic - " title prefix when the wizard column is too narrow to fit it. */
@container (max-width: 640px) {
    .gtd-title-prefix[b-j3xde6f8c4] {
        display: none;
    }
}
/* /Pages/Toolbox/GameTheoryDiagnostic/Steps/StepSetup.razor.rz.scp.css */
/* Collapse the "Game Theory Diagnostic - " title prefix when the wizard column is too narrow to fit it. */
@container (max-width: 640px) {
    .gtd-title-prefix[b-12btl7u8v2] {
        display: none;
    }
}