@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* Only the placement: LegalLinks owns how the links themselves look. */
.login-legal[b-utp3cmngff] {
    margin-top: var(--cpd-space-xl);
    display: flex;
    justify-content: center;
}
/* /Components/Errors/BoundaryAlert.razor.rz.scp.css */
.cpd-boundary-alert .cpd-boundary-copy-row[b-whttqk5z4t] {
    display: flex;
    align-items: center;
    gap: var(--cpd-space-sm);
    margin: var(--cpd-space-sm) 0;
}

.cpd-boundary-alert .token-copied-flash[b-whttqk5z4t] {
    min-width: 4.5rem;
    font-size: 0.85rem;
    color: var(--cpd-success);
}

.cpd-boundary-alert .token-copied-flash[data-state="err"][b-whttqk5z4t] {
    color: var(--cpd-error);
}

.cpd-boundary-trace[b-whttqk5z4t] {
    width: 100%;
    min-height: 12rem;
    max-height: 40vh;
    resize: vertical;
    font-family: var(--cpd-font-mono);
    font-size: 0.85rem;
    white-space: pre;
}
/* /Components/Layout/LegalLayout.razor.rz.scp.css */
.legal-shell[b-owyl33gj74] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--cpd-surface-0);
    color: var(--cpd-text);
}

.legal-header[b-owyl33gj74] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cpd-space-lg);
    padding: var(--cpd-space-lg) var(--cpd-space-2xl);
    border-bottom: 1px solid var(--cpd-border);
}

/* .brand and .btn-link carry the colours; this only sets the size, which differs from the
   landing header's. */
.legal-back[b-owyl33gj74] { font-size: 0.9375rem; }

/* The document column: flex:1 so the footer sits at the bottom on short pages. */
.legal-main[b-owyl33gj74] {
    flex: 1;
    padding: var(--cpd-space-3xl) var(--cpd-space-2xl);
}

/* ~70 characters per line, which is what makes a long document readable. */
.legal-document[b-owyl33gj74] {
    max-width: 46rem;
    margin: 0 auto;
    line-height: 1.7;
}

@media (max-width: 640.98px) {
    .legal-header[b-owyl33gj74] { padding: var(--cpd-space-lg); }
    .legal-main[b-owyl33gj74]   { padding: var(--cpd-space-xl) var(--cpd-space-lg); }
}

/* Document typography. ::deep because the prose is rendered by the page component nested in
   @Body, not by this layout, so plain scoped selectors would not reach it. Keeping it here
   means Terms and Disclaimer share one set of rules instead of each carrying a copy. */
.legal-document[b-owyl33gj74]  h1 {
    font-size: 2.25rem;
    font-weight: 600;
    margin-bottom: var(--cpd-space-sm);
}

.legal-document[b-owyl33gj74]  .legal-meta {
    color: var(--cpd-text-muted);
    font-size: 0.875rem;
    margin-bottom: var(--cpd-space-2xl);
}

.legal-document[b-owyl33gj74]  h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: var(--cpd-space-2xl);
    margin-bottom: var(--cpd-space-sm);
}

.legal-document[b-owyl33gj74]  p {
    margin-bottom: var(--cpd-space-lg);
    color: var(--cpd-text);
}

.legal-document[b-owyl33gj74]  .legal-placeholder {
    color: var(--cpd-text-muted);
    font-style: italic;
}

.legal-document[b-owyl33gj74]  a {
    color: var(--cpd-gold);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-godiwx8sp7] { display: flex; flex-direction: column; min-height: 100vh; }
main[b-godiwx8sp7]  { flex: 1; }

.sidebar[b-godiwx8sp7] {
    width: var(--cpd-sidebar-w);
    background: var(--cpd-surface-0);
}
@media (max-width: 640.98px) {
    .sidebar[b-godiwx8sp7] { width: 100%; height: auto; }
}

/* The top bar: three columns, so the session group (environment, date, currency, Run) is centred on
   the bar, not merely pushed right of the name (docs/ux-shape.md §5; the 2026-10-09 user test found
   the date, currency and Run "far away" at the top right). The name keeps the left, Display and the
   bell the right.

   The children are the static .claims-line, the skeleton, and TopBarHost's two groups. That island
   renders into this header with no element of its own around them (an island without prerendering
   leaves only a comment marker), so .topbar-session and .topbar-actions are grid items here - which
   is why the grid lives on the header and not inside the island. They are TopBarHost's elements,
   hence ::deep; what is inside each group is TopBarHost.razor.css's.

   The side columns are 1fr each, so the middle is truly centred whenever there is room. Their floors
   differ on purpose: the name ellipsises down to nothing (minmax(0, …)), but the actions never shrink
   below their own width (minmax(max-content, …)) - when the bar is cramped the session group gives up
   exact centring before Display or the bell is pushed off the bar. */
.top-row[b-godiwx8sp7] {
    height: 3.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
    align-items: center;
    column-gap: var(--cpd-space-md);
    padding: 0 var(--cpd-space-xl);
    background: var(--cpd-surface-0);
    border-bottom: 1px solid rgba(var(--cpd-contrast-rgb), 0.08);
}

.top-row[b-godiwx8sp7]  .claims-line {
    grid-column: 1;
    justify-self: start;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: var(--cpd-text);
}

/* The skeleton's two halves take the places of the two groups they stand in for (app.css makes the
   skeleton itself display: contents, so its halves are grid items too). */
.top-row[b-godiwx8sp7]  .topbar-session,
.top-row .cpd-skeleton-session[b-godiwx8sp7] {
    grid-column: 2;
}

.top-row[b-godiwx8sp7]  .topbar-actions,
.top-row .cpd-skeleton-actions[b-godiwx8sp7] {
    grid-column: 3;
    justify-self: end;
}

.top-row a[b-godiwx8sp7] {
    margin-left: var(--cpd-space-xl);
    font-weight: 500;
    color: var(--cpd-text);
}
.top-row a:hover[b-godiwx8sp7] { color: var(--cpd-gold); }

/* Phones: no room for three columns in one row. The name and the actions share the first row, and
   the session group takes a row of its own under them (it wraps there - TopBarHost.razor.css). */
@media (max-width: 640.98px) {
    .top-row[b-godiwx8sp7] {
        height: auto;
        grid-template-columns: minmax(0, 1fr) max-content;
        row-gap: var(--cpd-space-lg);
        padding: var(--cpd-space-sm) var(--cpd-space-lg);
    }

    .top-row[b-godiwx8sp7]  .topbar-actions,
    .top-row .cpd-skeleton-actions[b-godiwx8sp7] {
        grid-column: 2;
        grid-row: 1;
    }

    .top-row[b-godiwx8sp7]  .topbar-session,
    .top-row .cpd-skeleton-session[b-godiwx8sp7] {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
    }

    .top-row a[b-godiwx8sp7] { margin-left: 0; }
}

@media (min-width: 641px) {
    .page[b-godiwx8sp7]     {
        flex-direction: row;
        height: 100vh;
        overflow: hidden;
    }
    .sidebar[b-godiwx8sp7]  {
        width: var(--cpd-sidebar-w);
        flex-shrink: 0;
        height: 100vh;
        overflow: hidden;
    }

    /* Compact rail (html[data-cpd-nav="compact"], see navMode.js). The aside stays at the
       compact width in the flex row; when it expands its children widen to --cpd-sidebar-w and
       overflow OVER the page rather than pushing it, so the content never shifts.

       Expanded means hovered, OR focus somewhere inside it - see the matching rules in
       NavMenu.razor's style block. :focus-within is what lets a keyboard user open the rail at all.

       z-index 1050 puts the overlay above the page's own stacking (the trade topbar at 5, sticky
       table headers at 10) while staying below MudBlazor's chrome - drawer/appbar at 1100 and
       popovers at 1200 - so an open dialog or popover still paints over it. */
    html[data-cpd-nav="compact"] .sidebar[b-godiwx8sp7] {
        width: var(--cpd-sidebar-compact-w);
        position: relative;
        z-index: 1050;
    }
    html[data-cpd-nav="compact"] .sidebar:is(:hover, :focus-within)[b-godiwx8sp7] {
        overflow: visible;
    }
    main[b-godiwx8sp7] {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100vh;
    }
    .top-row[b-godiwx8sp7]  { flex-shrink: 0; z-index: 1; }
    article[b-godiwx8sp7]   { flex: 1; min-width: 0; overflow: auto; }

    /* ::deep because the <footer> is rendered by SiteFooter, not by this component, so a
       plain scoped selector would not reach it. flex-shrink:0 keeps it at its own height
       instead of being squeezed out by article's flex:1 in this 100vh column. */
    main[b-godiwx8sp7]  .site-footer { flex-shrink: 0; }
    .top-row[b-godiwx8sp7],
    article[b-godiwx8sp7]   { padding-left: var(--cpd-space-2xl) !important; padding-right: var(--cpd-space-xl) !important; }
}
/* /Components/Layout/SiteFooter.razor.rz.scp.css */
.site-footer[b-i88miqisrg] {
    border-top: 1px solid var(--cpd-border);
    background: var(--cpd-surface-0);
    padding: var(--cpd-space-lg) var(--cpd-space-2xl);
}

.site-footer-inner[b-i88miqisrg] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cpd-space-lg);
    flex-wrap: wrap;
}

.site-footer-copy[b-i88miqisrg] {
    color: var(--cpd-text-muted);
    font-size: 0.8125rem;
}

@media (max-width: 640.98px) {
    .site-footer[b-i88miqisrg] { padding: var(--cpd-space-lg); }
    .site-footer-inner[b-i88miqisrg] { justify-content: center; text-align: center; }
}

/* Compact: in the app shell the footer is chrome, not a destination. Horizontal padding
   matches .top-row/article (see MainLayout.razor.css) so the links line up with the content
   above, and the centred max-width is dropped because app content is left-aligned rather
   than a centred document column. */
.site-footer-compact[b-i88miqisrg] {
    padding: var(--cpd-space-sm) var(--cpd-space-xl) var(--cpd-space-sm) var(--cpd-space-2xl);
}

.site-footer-compact .site-footer-inner[b-i88miqisrg] {
    max-width: none;
    margin: 0;
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found[b-y8l0ce1jjp] {
    display: flex;
    flex-direction: column;
    gap: var(--cpd-space-sm);
    max-width: 60ch;
}

.not-found p[b-y8l0ce1jjp] {
    margin: 0;
}

.not-found-path[b-y8l0ce1jjp] {
    overflow-wrap: anywhere;
}

.not-found-hint[b-y8l0ce1jjp] {
    color: var(--cpd-text-muted);
}

.not-found-actions[b-y8l0ce1jjp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cpd-space-sm);
    margin-top: var(--cpd-space-md);
}
/* /Components/Shared/LegalLinks.razor.rz.scp.css */
.legal-links[b-nrd2l1wpio] {
    display: flex;
    gap: var(--cpd-space-xl);
    flex-wrap: wrap;
}

.legal-links-vertical[b-nrd2l1wpio] {
    flex-direction: column;
    gap: 0.35rem;
}

/* Muted until hover: these are reference documents, and on every surface they appear on they
   are secondary to whatever the primary action is (signing in, navigating the app). */
.legal-links a[b-nrd2l1wpio] {
    color: var(--cpd-text-muted);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: color var(--cpd-transition);
}

.legal-links a:hover[b-nrd2l1wpio],
.legal-links a:focus-visible[b-nrd2l1wpio] {
    color: var(--cpd-gold);
    text-decoration: underline;
}
/* /Components/Trades/XvaSimSettingsDialog.razor.rz.scp.css */
/* "Simulation settings" — design handoff §5. The dialog shell and fields are MudBlazor; only the
   disclosed accrual-rule panel (a plain JsonComponent, not Mud) still needs its own styling. */

.sim-rule-panel[b-tqfij6yk8f] {
    /* Indented past the checkbox so the rule reads as that row's detail. */
    margin-left: 25px;
    padding: 12px;
    background: var(--cpd-surface-inset);
    border: 1px solid var(--cpd-border);
    border-radius: var(--cpd-radius-sm);
}

/* StoppingRuleCaption is injected as raw HTML via @((MarkupString)...), so it never gets this
   file's scope attribute — ::deep drops the scoping restriction to reach it anyway. */
[b-tqfij6yk8f] .sim-caption-value {
    font-family: var(--cpd-font-mono);
    font-weight: 600;
    color: var(--cpd-gold);
}