/* /BilledActions/MonthlyLimitReached.razor.rz.scp.css */
/* The Monthly-limit message in place of a Billed action's control, with its two exits as links shaped like the Demos'
   buttons; the first, the way to keep trying the Product, in the accent. */
.monthly-limit[b-gda0yefv98] {
    margin: 16px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

    .monthly-limit p[b-gda0yefv98] {
        margin: 0 0 14px;
        color: var(--heading);
    }

.exits[b-gda0yefv98] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.exit[b-gda0yefv98] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    text-decoration: none;
}

    .exit:hover[b-gda0yefv98] {
        background: var(--surface-2);
    }

    .exit.primary[b-gda0yefv98] {
        border-color: var(--accent);
        color: var(--accent-ink);
        font-weight: 600;
    }
/* /BilledActions/TurnstileWidget.razor.rz.scp.css */
/* The Turnstile widget on a row of its own beside a Billed action's button, with its failure message under it.
   Cloudflare's widget is 65 px tall in its visible (managed) mode; the space is kept while its script loads, so the
   button doesn't jump. */
.turnstile[b-k6efp3zg1v] {
    flex-basis: 100%;
    margin: 12px 0;
}

.turnstile-widget[b-k6efp3zg1v] {
    min-height: 65px;
}

.turnstile-failed[b-k6efp3zg1v] {
    margin: 8px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--orange);
    border-radius: 8px;
    background: var(--bg);
}
/* /Layout/CatalogueByGoal.razor.rz.scp.css */
/* The Catalogue by goal, from prototype C on branch prototype/home-page: two columns between rules, so Version 7's
   fourth goal makes a second row of two rather than a cramped fourth column, stacked at the compact breakpoint. A Legacy
   Portal Demo carries an arrow, which the note under the columns explains; one the Demo Site runs carries no mark. */

.catalogue[b-osabfknvnl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--border);
}

section[b-osabfknvnl] {
    padding: 22px 24px 8px;
}

    /* The left column against the page's edge, the right one ruled off from it, the second row ruled off from the first. */
    section:nth-child(odd)[b-osabfknvnl] {
        padding-left: 0;
    }

    section:nth-child(even)[b-osabfknvnl] {
        padding-right: 0;
        border-left: 1px solid var(--border);
    }

    section:nth-child(n + 3)[b-osabfknvnl] {
        border-top: 1px solid var(--border);
    }

h2[b-osabfknvnl] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 700;
}

.icon[b-osabfknvnl] {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--surface);
}

    .icon svg[b-osabfknvnl] {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: var(--accent);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

ul[b-osabfknvnl] {
    margin: 0;
    padding: 0;
    list-style: none;
}

li[b-osabfknvnl] {
    padding: 14px 0;
}

    li + li[b-osabfknvnl] {
        border-top: 1px dashed var(--border);
    }

    li > a[b-osabfknvnl] {
        color: var(--heading);
        font-weight: 600;
        text-decoration: none;
    }

        li > a:hover[b-osabfknvnl] {
            color: var(--accent-ink);
            text-decoration: underline;
        }

    li.legacy > a[b-osabfknvnl] {
        font-weight: 500;
    }

    li > p[b-osabfknvnl] {
        margin-top: 4px;
        color: var(--muted);
        font-size: 13.5px;
        line-height: 1.45;
    }

.product[b-osabfknvnl] {
    margin-right: 4px;
    padding: 0 5px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.legacy-note[b-osabfknvnl] {
    margin-top: 20px;
    color: var(--muted);
    font-size: 13px;
}

/* Compact breakpoint (see tokens.css). */
@media (max-width: 860px) {
    .catalogue[b-osabfknvnl] {
        grid-template-columns: minmax(0, 1fr);
    }

    section[b-osabfknvnl],
    section:nth-child(odd)[b-osabfknvnl],
    section:nth-child(even)[b-osabfknvnl] {
        padding: 22px 0 8px;
        border-left: 0;
    }

        section + section[b-osabfknvnl] {
            border-top: 1px solid var(--border);
        }
}
/* /Layout/ConsentBanner.razor.rz.scp.css */
/* The consent banner: a minimal bar fixed at the bottom of the viewport, non-modal. While it shows, wwwroot/layout.js
   keeps --consent-banner-height at its height (0 otherwise), and the page reserves that room (app.css, and the sticky
   sidebar subtracts it from its height), so the banner never covers the Demo: what is under it scrolls up into view.
   Above the page, below the narrow screens' open sidebar and its backdrop. */

.consent-banner[b-tsjy636w93] {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 15;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding: 12px var(--gutter);
    border-top: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
    font-size: 14px;
}

    .consent-banner[hidden][b-tsjy636w93] {
        display: none;
    }

p[b-tsjy636w93] {
    flex: 1 1 32rem;
    max-width: 75ch;
}

.choices[b-tsjy636w93] {
    display: flex;
    gap: 10px;
}

/* Accept and Reject equally prominent: the same style, side by side. */
.choice[b-tsjy636w93] {
    min-width: 7.5rem;
    padding: 7px 16px;
    border: 1px solid var(--heading);
    border-radius: 6px;
    background: var(--bg);
    color: var(--heading);
    font-weight: 600;
    cursor: pointer;
}

    .choice:hover[b-tsjy636w93] {
        border-color: var(--accent);
        color: var(--accent-ink);
    }

/* Phone width: the buttons share the row under the text. */
@media (max-width: 640px) {
    .choices[b-tsjy636w93] {
        flex: 1 1 100%;
    }

    .choice[b-tsjy636w93] {
        flex: 1;
        min-width: 0;
    }
}
/* /Layout/DemoFrame.razor.rz.scp.css */
/* The Demo page frame: the static header, then the Demo, alone in the content column at every width. */

.demo-header[b-z48zyd6j26] {
    margin-bottom: 28px;
}

.breadcrumb ol[b-z48zyd6j26] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    color: var(--muted);
    font-size: 14px;
    list-style: none;
}

    .breadcrumb li + li[b-z48zyd6j26]::before {
        content: "›";
        content: "›" / "";
        margin-right: 6px;
    }

.demo-header .lead[b-z48zyd6j26] {
    margin-bottom: 8px;
}

.demo-header .cross-link[b-z48zyd6j26] {
    margin: 0 0 8px;
    font-size: 14px;
}

.docs[b-z48zyd6j26],
.samples[b-z48zyd6j26],
.samples-by-language .sample[b-z48zyd6j26],
.video[b-z48zyd6j26] {
    font-size: 14px;
    font-weight: 600;
}

.samples-by-language[b-z48zyd6j26] {
    font-size: 14px;
}

    .samples-by-language .sample[b-z48zyd6j26] {
        margin-left: 8px;
    }

/* Samples ↗ (or the samples by language) and Video ↗ sit beside Docs ↗ on the same line. */
.docs + .samples[b-z48zyd6j26],
.docs + .samples-by-language[b-z48zyd6j26],
.docs + .video[b-z48zyd6j26],
.samples + .video[b-z48zyd6j26],
.samples-by-language + .video[b-z48zyd6j26] {
    margin-left: 16px;
}

/* The line for AI coding agents, under Docs ↗ and Samples ↗ (docs/adr/0016). */
.agents[b-z48zyd6j26] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    margin: 8px 0 0;
    font-size: 14px;
}

.agents .markdown[b-z48zyd6j26],
.agents .download-prompt[b-z48zyd6j26] {
    font-weight: 600;
}

/* A small secondary button, as the Demos' file pickers draw theirs. */
.copy-prompt[b-z48zyd6j26] {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

    .copy-prompt:hover[b-z48zyd6j26] {
        border-color: var(--accent);
        background: var(--surface);
    }

.copy-status[b-z48zyd6j26] {
    color: var(--muted);
}

.prompt-preview[b-z48zyd6j26] {
    flex-basis: 100%;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.demo-frame[b-z48zyd6j26] {
    min-width: 0;
}
/* /Layout/Error.razor.rz.scp.css */
/* The error page: a short, calm message in a readable measure, and the request ID in small muted print. */

.error-page[b-82lshpoqie] {
    max-width: 72ch;
}

.request-id[b-82lshpoqie] {
    margin-top: 24px;
    color: var(--muted);
    font-size: 14px;
}

    .request-id code[b-82lshpoqie] {
        font-family: var(--font-mono);
        overflow-wrap: anywhere;
    }
/* /Layout/ErrorCodeLine.razor.rz.scp.css */
/* A failure's error code: its own line under the message, in the message's colour, the code wrapping anywhere. */

.error-code[b-zcnt7rhy2w] {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    overflow-wrap: anywhere;
}
/* /Layout/LanguageSwitch.razor.rz.scp.css */
.language-switch[b-usr6vmdoo1] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font: 600 12px/1 var(--font-body);
}

a[b-usr6vmdoo1],
span[aria-current][b-usr6vmdoo1] {
    padding: 5px 8px;
    border-radius: 5px;
}

a[b-usr6vmdoo1] {
    color: var(--muted);
    text-decoration: none;
}

    a:hover[b-usr6vmdoo1] {
        background: var(--surface);
        color: var(--heading);
    }

span[aria-current][b-usr6vmdoo1] {
    background: var(--heading);
    color: var(--bg);
}

span[aria-hidden][b-usr6vmdoo1] {
    color: var(--border);
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Direction B: the top bar across the page, the navy sidebar on the left, the page and its footer on the right.
   At the narrow breakpoint (max-width 1100px, see tokens.css) the sidebar leaves the grid and opens over the
   page from the menu button. */

.page[b-khiaqwszdb] {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "top top"
        "side content";
    min-height: 100dvh;
}

.page[b-khiaqwszdb]  > .top-bar {
    grid-area: top;
}

.page[b-khiaqwszdb]  > .sidebar {
    grid-area: side;
}

.content[b-khiaqwszdb] {
    grid-area: content;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

main[b-khiaqwszdb] {
    flex: 1;
    width: 100%;
    max-width: 1040px;
    padding: 44px var(--gutter) 60px;
    overflow-wrap: break-word;
}

/* Narrow breakpoint. */
@media (max-width: 1100px) {
    .page[b-khiaqwszdb] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "top"
            "content";
    }
}

/* Compact breakpoint. */
@media (max-width: 860px) {
    main[b-khiaqwszdb] {
        padding-top: 28px;
        padding-bottom: 40px;
    }
}

#blazor-error-ui[b-khiaqwszdb] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-khiaqwszdb] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Layout/PrivacyNotice.razor.rz.scp.css */
/* The Privacy notice: reading text, one section per item, in a measure that stays readable on wide screens. */

.privacy-notice[b-w6g6cjw41j] {
    max-width: 72ch;
}

/* A link to a section (#cookies) lands with its heading clear of the sticky top bar. One value for all widths, sized for
   phones, where the top bar wraps to a second row; wider screens just get extra space. */
section[b-w6g6cjw41j] {
    margin-top: 36px;
    scroll-margin-top: calc(2 * var(--top-bar-height) + 16px);
}

h2[b-w6g6cjw41j] {
    margin-bottom: 12px;
    font-size: 22px;
    font-weight: 600;
}

p[b-w6g6cjw41j],
ul[b-w6g6cjw41j] {
    margin: 0 0 12px;
}

ul[b-w6g6cjw41j] {
    padding-left: 22px;
}

li + li[b-w6g6cjw41j] {
    margin-top: 6px;
}

table[b-w6g6cjw41j] {
    width: 100%;
    margin: 4px 0 16px;
    border-collapse: collapse;
    font-size: 14px;
}

th[b-w6g6cjw41j],
td[b-w6g6cjw41j] {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

thead th[b-w6g6cjw41j] {
    color: var(--muted);
    font: 600 11px/1.4 var(--font-body);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

tbody th[b-w6g6cjw41j] {
    color: var(--heading);
    font-weight: 500;
}

/* Phone breakpoint (see tokens.css). */
@media (max-width: 640px) {
    th[b-w6g6cjw41j],
    td[b-w6g6cjw41j] {
        padding-left: 6px;
        padding-right: 6px;
    }
}
/* /Layout/ReconnectModal.razor.rz.scp.css */
/* Blazor's reconnect dialog (ReconnectModal.razor), from the project template, with its colours taken from the theme's
   tokens so it reads in light and dark. */

.components-reconnect-first-attempt-visible[b-fy69n44th4],
.components-reconnect-repeated-attempt-visible[b-fy69n44th4],
.components-reconnect-failed-visible[b-fy69n44th4],
.components-pause-visible[b-fy69n44th4],
.components-resume-failed-visible[b-fy69n44th4],
.components-rejoining-animation[b-fy69n44th4] {
    display: none;
}

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


#components-reconnect-modal[b-fy69n44th4] {
    background-color: var(--bg);
    color: var(--text);
    width: 20rem;
    max-width: calc(100vw - 2 * var(--gutter));
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-fy69n44th4 0.5s both;
    &[open]

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

}

#components-reconnect-modal[b-fy69n44th4]::backdrop {
    background-color: var(--sidebar-backdrop);
    animation: components-reconnect-modal-fadeInOpacity-b-fy69n44th4 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

/* Styled as the site's other plain buttons (the consent banner's choices). */
#components-reconnect-modal button[b-fy69n44th4] {
    padding: 7px 16px;
    border: 1px solid var(--heading);
    border-radius: 6px;
    background-color: var(--bg);
    color: var(--heading);
    font-weight: 600;
    cursor: pointer;
}

    #components-reconnect-modal button:hover[b-fy69n44th4] {
        border-color: var(--accent);
        color: var(--accent-ink);
    }

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Layout/Sidebar.razor.rz.scp.css */
/* The navy sidebar tree from direction B. Links are styled through ::deep because the Demo Site's own Demos
   are NavLinks, whose <a> belongs to the NavLink component and carries no scope from this file. */

.sidebar[b-b574g1hzm2] {
    position: sticky;
    top: var(--top-bar-height);
    align-self: start;
    /* Down to the viewport's bottom, or to the consent banner while it shows (ConsentBanner.razor.css). */
    height: calc(100dvh - var(--top-bar-height) - var(--consent-banner-height, 0px));
    overflow-y: auto;
    padding: 8px 14px 24px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    font-size: 14px;
}

ul[b-b574g1hzm2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

h2[b-b574g1hzm2],
h3[b-b574g1hzm2] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 14px 8px 6px;
    color: var(--sidebar-muted);
    font: 700 11px/1.4 var(--font-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* "On the Legacy Portal" opens the second half of the tree. */
.legacy > h2[b-b574g1hzm2] {
    margin-top: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--sidebar-divider);
}

h3[b-b574g1hzm2] {
    padding-top: 10px;
    color: var(--sidebar-subheading);
}

.sidebar[b-b574g1hzm2]  a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
}

    .sidebar[b-b574g1hzm2]  a:hover {
        background: var(--sidebar-hover);
        color: var(--sidebar-strong);
    }

    .sidebar[b-b574g1hzm2]  a.active {
        background: var(--sidebar-current);
        box-shadow: inset 2px 0 var(--orange-2);
        color: var(--sidebar-strong);
    }

/* A Demo the Demo Site runs gets B's green "live" dot. */
.here[b-b574g1hzm2]  li a::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sidebar-live);
}

/* Docs ↗ in a Product heading. It needs .sidebar to outrank the general link rule above. */
.sidebar h2 a[b-b574g1hzm2] {
    margin-left: auto;
    padding: 2px 6px;
    color: var(--sidebar-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
}

.backdrop[b-b574g1hzm2] {
    display: none;
}

/* Narrow breakpoint (see tokens.css). */
@media (max-width: 1100px) {
    .sidebar[b-b574g1hzm2] {
        display: none;
    }

    /* Opened by the top bar's menu button (wwwroot/layout.js). */
    .sidebar[data-open][b-b574g1hzm2] {
        display: block;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 20;
        width: min(300px, 85vw);
        height: 100dvh;
        padding-top: 16px;
    }

    /* A real element rather than a shadow, so the dismissing tap lands here and not on the page below. */
    .sidebar[data-open] + .backdrop[b-b574g1hzm2] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 19;
        background: var(--sidebar-backdrop);
        cursor: pointer;
    }
}
/* /Layout/SiteFooter.razor.rz.scp.css */
.site-footer[b-7s3h5m4127] {
    padding: 18px var(--gutter) 24px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
}

ul[b-7s3h5m4127] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

    li + li[b-7s3h5m4127]::before {
        content: "·";
        padding: 0 10px;
    }

a[b-7s3h5m4127],
button[b-7s3h5m4127] {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 3px;
    cursor: pointer;
}

    a:hover[b-7s3h5m4127],
    button:hover[b-7s3h5m4127] {
        color: var(--accent-ink);
        text-decoration-color: currentColor;
    }
/* /Layout/TopBar.razor.rz.scp.css */
/* On wide screens the logo sits in a navy cell as wide as the sidebar, so the navy column runs from the top of
   the page. At the narrow breakpoint (max-width 1100px, see tokens.css) the menu button comes first and the logo
   loses its navy cell; at the phone breakpoint (640px) the two outbound links move to a second row. */

.top-bar[b-akcanv559d] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: var(--top-bar-height);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    color: var(--muted);
    font-size: 14px;
}

.logo[b-akcanv559d] {
    display: flex;
    align-items: center;
    align-self: stretch;
    width: var(--sidebar-width);
    min-height: var(--top-bar-height);
    padding: 0 22px;
    background: var(--sidebar-bg);
    color: var(--sidebar-strong);
}

    .logo[b-akcanv559d]  .logo-image {
        display: block;
        width: auto;
        height: 30px;
    }

/* The site's name, which the home page's H1 used to show, with the brand's trailing underscore as on an H1. */
.site-name[b-akcanv559d] {
    padding: 0 var(--gutter);
    color: var(--heading);
    font: 700 20px/1.15 var(--font-heading);
    white-space: nowrap;
}

    .site-name[b-akcanv559d]::after {
        content: "_";
        content: "_" / "";
        color: var(--accent);
    }

.actions[b-akcanv559d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin-left: auto;
    padding: 0 var(--gutter);
}

.external[b-akcanv559d] {
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

    .external:hover[b-akcanv559d] {
        color: var(--accent-ink);
    }

.talk[b-akcanv559d] {
    color: var(--accent-ink);
    font-weight: 500;
}

.menu-button[b-akcanv559d],
.theme-toggle[b-akcanv559d] {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--heading);
    cursor: pointer;
}

    .menu-button:hover[b-akcanv559d],
    .theme-toggle:hover[b-akcanv559d] {
        border-color: var(--border);
        background: var(--surface);
    }

    .menu-button svg[b-akcanv559d],
    .theme-toggle svg[b-akcanv559d] {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.menu-button[b-akcanv559d] {
    display: none;
}

/* The switch shows the theme a click goes to: a moon while light, a sun while dark. */
.theme-toggle .to-light[b-akcanv559d] {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .to-dark[b-akcanv559d] {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .to-light[b-akcanv559d] {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .to-dark[b-akcanv559d] {
        display: none;
    }

    :root:not([data-theme="light"]) .theme-toggle .to-light[b-akcanv559d] {
        display: block;
    }
}

/* Narrow breakpoint. */
@media (max-width: 1100px) {
    .menu-button[b-akcanv559d] {
        display: inline-grid;
        margin-left: calc(var(--gutter) - 8px);
    }

    .logo[b-akcanv559d] {
        width: auto;
        padding: 0 12px;
        background: none;
        color: var(--heading);
    }

        .logo[b-akcanv559d]  .logo-image {
            height: 26px;
        }

    .site-name[b-akcanv559d] {
        padding: 0 4px;
        font-size: 17px;
    }
}

/* Phone breakpoint. */
@media (max-width: 640px) {
    /* No room beside the logo, language and theme buttons. */
    .site-name[b-akcanv559d] {
        display: none;
    }

    .actions[b-akcanv559d] {
        display: contents;
    }

    .actions[b-akcanv559d]  .language-switch {
        margin-left: auto;
    }

    .theme-toggle[b-akcanv559d] {
        margin-right: calc(var(--gutter) - 8px);
        margin-left: 8px;
    }

    /* The outbound links take a row of their own under the bar. */
    .external[b-akcanv559d] {
        order: 1;
        padding: 0 0 10px;
    }

    .talk[b-akcanv559d] {
        margin-left: var(--gutter);
        margin-right: 18px;
    }

    .top-bar[b-akcanv559d]::after {
        content: "";
        order: 0;
        flex-basis: 100%;
    }
}
/* /Products/Amplia/AmpliaCertificateDetails.razor.rz.scp.css */
/* The certificate panel of every Amplia Demo. ::deep reaches the rows a Demo passes in, which carry its own scope. */

.certificate[b-2nemopoi53] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    margin: 0;
}

    .certificate[b-2nemopoi53]  dt {
        font-weight: 600;
    }

    .certificate[b-2nemopoi53]  dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

    .certificate[b-2nemopoi53]  .mono {
        font-family: var(--font-mono);
    }
/* /Products/Amplia/AmpliaPfxDownload.razor.rz.scp.css */
/* The .pfx's optional password and its download, after Issue in an Amplia Demo that made the key on the server. */

.download[b-gjaubnpw42] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 16px;
    margin-top: 20px;
}

    .download .field[b-gjaubnpw42] {
        flex: 1 1 260px;
        max-width: 360px;
    }

    .download button.download[b-gjaubnpw42] {
        margin-top: 24px;
    }

.field > label[b-gjaubnpw42] {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 14px;
}

.field input[b-gjaubnpw42] {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}

.hint[b-gjaubnpw42] {
    display: block;
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.download-failed[b-gjaubnpw42] {
    flex-basis: 100%;
    margin: 0;
    color: var(--orange-ink);
}

button[b-gjaubnpw42] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    button:hover[b-gjaubnpw42] {
        background: var(--surface-2);
    }

    button:disabled[b-gjaubnpw42] {
        cursor: default;
        opacity: 0.6;
    }

    button.primary[b-gjaubnpw42] {
        border-color: var(--accent-fill);
        background: var(--accent-fill);
        color: var(--on-accent);
    }

        button.primary:hover[b-gjaubnpw42] {
            background: var(--accent-fill);
            filter: brightness(1.08);
        }
/* /Products/Amplia/ECpfReturnedCertificate.razor.rz.scp.css */
/* The e-CPF the visitor came back with, as the e-CNPJ Demo shows its issued certificate, then the hand-off. */

.returned[b-e0j8deoebz] {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

    .returned h2[b-e0j8deoebz] {
        margin: 0 0 4px;
        font-size: 20px;
    }

    .returned .test-label[b-e0j8deoebz] {
        margin: 0 0 12px;
        color: var(--orange-ink);
        font-weight: 600;
    }

.certificate[b-e0j8deoebz] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    margin: 0;
}

dt[b-e0j8deoebz] {
    font-weight: 600;
}

dd[b-e0j8deoebz] {
    margin: 0;
    overflow-wrap: anywhere;
}

.mono[b-e0j8deoebz] {
    font-family: var(--font-mono);
}

.handoff[b-e0j8deoebz] {
    margin-bottom: 20px;
}

    .handoff p[b-e0j8deoebz] {
        margin: 0 0 8px;
    }

    .handoff a.web-pki[b-e0j8deoebz] {
        font-weight: 600;
    }
/* /Products/Amplia/FaceECpfKeyStep.razor.rz.scp.css */
/* The Face e-CPF Demo's key and certificate steps, styled as its face step and as the e-CNPJ Demo's key options and
   result. The details are AmpliaCertificateDetails', the .pfx's download AmpliaPfxDownload's. */

.key[b-nd4dpwhbr3],
.issued[b-nd4dpwhbr3] {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

h2[b-nd4dpwhbr3] {
    margin: 0 0 8px;
    font-size: 20px;
}

.key-choices[b-nd4dpwhbr3] {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    min-width: 0;
}

    .key-choices legend[b-nd4dpwhbr3] {
        margin-bottom: 8px;
        font-weight: 600;
    }

.key-choice[b-nd4dpwhbr3] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    align-items: baseline;
}

    .key-choice input[b-nd4dpwhbr3] {
        accent-color: var(--accent);
    }

    .key-choice label[b-nd4dpwhbr3] {
        font-weight: 600;
    }

    .key-choice .hint[b-nd4dpwhbr3] {
        grid-column: 2;
        margin: 0;
        color: var(--muted);
        font-size: 14px;
    }

button[b-nd4dpwhbr3] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    button:disabled[b-nd4dpwhbr3] {
        cursor: default;
        opacity: 0.6;
    }

    button.primary[b-nd4dpwhbr3] {
        border-color: var(--accent-fill);
        background: var(--accent-fill);
        color: var(--on-accent);
    }

        button.primary:hover[b-nd4dpwhbr3] {
            filter: brightness(1.08);
        }

.waiting[b-nd4dpwhbr3] {
    margin: 12px 0 0;
    color: var(--muted);
}

.issue-failed[b-nd4dpwhbr3] {
    margin: 12px 0 0;
    color: var(--orange-ink);
}

.issued .test-label[b-nd4dpwhbr3] {
    margin: 0 0 12px;
    color: var(--orange-ink);
    font-weight: 600;
}

/* A1 in the browser and A3 on a token: Web PKI's key, as the e-CNPJ Demo's browser option (WebPkiKeyMaker's), and
   after Issue its import (WebPkiCertificateImport's). */
.web-pki[b-nd4dpwhbr3] {
    margin: 0 0 12px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.orphaned-key[b-nd4dpwhbr3] {
    margin: 8px 0 0;
    color: var(--muted);
}

.another[b-nd4dpwhbr3] {
    margin-top: 16px;
}

    .another .hint[b-nd4dpwhbr3] {
        margin: 6px 0 0;
        color: var(--muted);
        font-size: 14px;
    }
/* /Products/Amplia/IssueAnECpfWithYourFace.razor.rz.scp.css */
/* The Face e-CPF Demo: its form styled as the e-CPF Demo's, its face step as the Lacuna Bio Demo's steps. */

.person[b-z9pl6v0v9j],
.face[b-z9pl6v0v9j] {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.face[b-z9pl6v0v9j] {
    margin-top: 20px;
}

h2[b-z9pl6v0v9j] {
    margin: 0 0 8px;
    font-size: 20px;
}

.intro[b-z9pl6v0v9j] {
    margin: 0 0 16px;
}

button[b-z9pl6v0v9j] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    button:hover[b-z9pl6v0v9j] {
        background: var(--surface-2);
    }

    button:disabled[b-z9pl6v0v9j] {
        cursor: default;
        opacity: 0.6;
    }

    button.primary[b-z9pl6v0v9j] {
        border-color: var(--accent-fill);
        background: var(--accent-fill);
        color: var(--on-accent);
    }

        button.primary:hover[b-z9pl6v0v9j] {
            background: var(--accent-fill);
            filter: brightness(1.08);
        }

    button.link[b-z9pl6v0v9j] {
        padding: 0;
        border: 0;
        background: none;
        color: var(--accent-ink);
        text-decoration: underline;
    }

        button.link:hover[b-z9pl6v0v9j] {
            background: none;
        }

.fields[b-z9pl6v0v9j] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-bottom: 20px;
}

@media (max-width: 560px) {
    .fields[b-z9pl6v0v9j] {
        grid-template-columns: minmax(0, 1fr);
    }
}

    .field.wide[b-z9pl6v0v9j] {
        grid-column: 1 / -1;
    }

    .field > label[b-z9pl6v0v9j] {
        display: block;
        margin-bottom: 4px;
        font-weight: 600;
        font-size: 14px;
    }

    .field input[b-z9pl6v0v9j] {
        box-sizing: border-box;
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        font: inherit;
    }

        .field input[aria-invalid="true"][b-z9pl6v0v9j] {
            border-color: var(--orange);
        }

    .field .hint[b-z9pl6v0v9j] {
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 13px;
    }

.error[b-z9pl6v0v9j] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--orange-ink);
}

.consent[b-z9pl6v0v9j] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 10px;
    margin-bottom: 12px;
}

    .consent input[b-z9pl6v0v9j] {
        margin-top: 4px;
        accent-color: var(--accent);
    }

.submit[b-z9pl6v0v9j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

/* "Try again later" is a note, not a failure; a run that couldn't be counted is a failure. */
.rate-limited[b-z9pl6v0v9j],
.run-failed[b-z9pl6v0v9j] {
    margin: 12px 0 0;
}

.rate-limited[b-z9pl6v0v9j] {
    color: var(--muted);
}

.run-failed[b-z9pl6v0v9j] {
    color: var(--orange-ink);
}

.waiting[b-z9pl6v0v9j] {
    margin: 12px 0 0;
    color: var(--muted);
}

/* A Serpro check's stop, under the form it keeps (version-14/face-ecpf-demo.md, "Step 2: the Serpro check"). */
.serpro-stop[b-z9pl6v0v9j] {
    margin: 12px 0 0;
    color: var(--accent-ink);
    overflow-wrap: anywhere;
}

.stopped[b-z9pl6v0v9j] {
    margin-top: 12px;
}

    .stopped > p[b-z9pl6v0v9j] {
        margin: 0 0 12px;
        color: var(--accent-ink);
        overflow-wrap: anywhere;
    }

.result[b-z9pl6v0v9j] {
    margin-top: 16px;
}

    .result h3[b-z9pl6v0v9j] {
        margin: 0 0 8px;
        font-size: 18px;
    }

    .result.pass h3[b-z9pl6v0v9j] {
        color: var(--ok);
    }

    .result p[b-z9pl6v0v9j] {
        margin: 0;
    }

/* Start over, once the visitor has typed or a run has started: a quiet link-like button. */
.start-over-bar[b-z9pl6v0v9j] {
    margin-top: 16px;
}
/* /Products/Amplia/IssueECnpjCertificate.razor.rz.scp.css */
/* The e-CNPJ Demo's form, styled as the Signer Demo's signer step. */

.company[b-u8tw19607d] {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.form-header[b-u8tw19607d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 8px;
}

    .form-header h2[b-u8tw19607d] {
        margin: 0;
        font-size: 20px;
    }

.intro[b-u8tw19607d] {
    margin: 0 0 16px;
}

button[b-u8tw19607d] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    button:hover[b-u8tw19607d] {
        background: var(--surface-2);
    }

    button:disabled[b-u8tw19607d] {
        cursor: default;
        opacity: 0.6;
    }

    button.primary[b-u8tw19607d] {
        border-color: var(--accent-fill);
        background: var(--accent-fill);
        color: var(--on-accent);
    }

        button.primary:hover[b-u8tw19607d] {
            background: var(--accent-fill);
            filter: brightness(1.08);
        }

.fields[b-u8tw19607d] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-bottom: 20px;
}

@media (max-width: 560px) {
    .fields[b-u8tw19607d] {
        grid-template-columns: minmax(0, 1fr);
    }
}

    .field.wide[b-u8tw19607d] {
        grid-column: 1 / -1;
    }

    .field > label[b-u8tw19607d] {
        display: block;
        margin-bottom: 4px;
        font-weight: 600;
        font-size: 14px;
    }

    .field input:not([type=checkbox])[b-u8tw19607d] {
        box-sizing: border-box;
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        font: inherit;
    }

        .field input[aria-invalid="true"][b-u8tw19607d] {
            border-color: var(--orange);
        }

    .field.switch[b-u8tw19607d] {
        display: grid;
        grid-template-columns: auto 1fr;
        align-content: end;
        gap: 0 10px;
    }

        .field.switch input[b-u8tw19607d] {
            margin-top: 4px;
            accent-color: var(--accent);
        }

        .field.switch label[b-u8tw19607d] {
            font-weight: normal;
        }

.switch-name[b-u8tw19607d] {
    display: block;
    font-weight: 600;
    font-size: 14px;
}

.hint[b-u8tw19607d],
.error[b-u8tw19607d] {
    margin: 4px 0 0;
    font-size: 13px;
}

.hint[b-u8tw19607d] {
    display: block;
    color: var(--muted);
}

.error[b-u8tw19607d] {
    color: var(--orange-ink);
}

.consent[b-u8tw19607d] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 10px;
    margin-bottom: 12px;
}

    .consent input[b-u8tw19607d] {
        margin-top: 4px;
        accent-color: var(--accent);
    }

.submit[b-u8tw19607d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.issuing[b-u8tw19607d] {
    margin: 0;
    color: var(--muted);
}

.issue-failed[b-u8tw19607d] {
    margin: 12px 0 0;
    color: var(--orange-ink);
}

.issued[b-u8tw19607d] {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

    .issued h2[b-u8tw19607d] {
        margin: 0 0 4px;
        font-size: 20px;
    }

    .issued .test-label[b-u8tw19607d] {
        margin: 0 0 12px;
        color: var(--orange-ink);
        font-weight: 600;
    }

/* The details are AmpliaCertificateDetails', the .pfx's download AmpliaPfxDownload's. After them, the hand-off. */

.handoff[b-u8tw19607d] {
    margin-top: 20px;
}

    .handoff p[b-u8tw19607d] {
        margin: 0 0 8px;
    }

    .handoff a.web-pki[b-u8tw19607d] {
        font-weight: 600;
    }

/* Where the key is made: the two options, the Web PKI stop, and on the Web PKI option the key Web PKI makes
   (WebPkiKeyMaker's, with WebPkiKeyLocationChooser's location); after Issue, WebPkiCertificateImport's import. */
.key-option[b-u8tw19607d] {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    min-width: 0;
}

    .key-option legend[b-u8tw19607d] {
        margin-bottom: 4px;
        font-weight: 600;
    }

    .key-option input[b-u8tw19607d] {
        accent-color: var(--accent);
    }

.web-pki-stop[b-u8tw19607d] {
    color: var(--muted);
}

    .web-pki-stop p[b-u8tw19607d] {
        margin: 0;
    }

    .web-pki-stop .stop-title[b-u8tw19607d] {
        font-weight: 600;
    }

.web-pki[b-u8tw19607d] {
    margin: 0 0 12px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.orphaned-key[b-u8tw19607d] {
    margin: 8px 0 0;
    color: var(--muted);
}
/* /Products/Amplia/IssueECpfCertificate.razor.rz.scp.css */
/* The e-CPF Demo's form, styled as the e-CNPJ Demo's. */

.person[b-19unubv3ty] {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.form-header[b-19unubv3ty] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 8px;
}

    .form-header h2[b-19unubv3ty] {
        margin: 0;
        font-size: 20px;
    }

.intro[b-19unubv3ty] {
    margin: 0 0 16px;
}

button[b-19unubv3ty] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    button:hover[b-19unubv3ty] {
        background: var(--surface-2);
    }

    button:disabled[b-19unubv3ty] {
        cursor: default;
        opacity: 0.6;
    }

    button.primary[b-19unubv3ty] {
        border-color: var(--accent-fill);
        background: var(--accent-fill);
        color: var(--on-accent);
    }

        button.primary:hover[b-19unubv3ty] {
            background: var(--accent-fill);
            filter: brightness(1.08);
        }

.fields[b-19unubv3ty] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-bottom: 20px;
}

@media (max-width: 560px) {
    .fields[b-19unubv3ty] {
        grid-template-columns: minmax(0, 1fr);
    }
}

    .field.wide[b-19unubv3ty] {
        grid-column: 1 / -1;
    }

    .field > label[b-19unubv3ty] {
        display: block;
        margin-bottom: 4px;
        font-weight: 600;
        font-size: 14px;
    }

    .field input[b-19unubv3ty] {
        box-sizing: border-box;
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        font: inherit;
    }

        .field input[aria-invalid="true"][b-19unubv3ty] {
            border-color: var(--orange);
        }

.error[b-19unubv3ty] {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--orange-ink);
}

.consent[b-19unubv3ty] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 10px;
    margin-bottom: 12px;
}

    .consent input[b-19unubv3ty] {
        margin-top: 4px;
        accent-color: var(--accent);
    }

.submit[b-19unubv3ty] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

/* The Web PKI Demo's phone or Safari stop (WebPkiStop), in place of the Issue control. */
.issue-stop[b-19unubv3ty] {
    margin-top: 20px;
}

/* The review line takes the whole first row of .submit, directly above Issue. */
.review-line[b-19unubv3ty] {
    flex-basis: 100%;
    margin: 0;
    overflow-wrap: anywhere;
}

.issuing[b-19unubv3ty] {
    margin: 0;
    color: var(--muted);
}

.issue-failed[b-19unubv3ty] {
    margin: 12px 0 0;
    color: var(--orange-ink);
}

/* After a successful Issue: the order is made, and Continue on Amplia sits with the language line. */
.leave[b-19unubv3ty] {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

    .leave h2[b-19unubv3ty] {
        margin: 0 0 8px;
        font-size: 20px;
    }

    .leave p[b-19unubv3ty] {
        margin: 0 0 12px;
    }

.continue-row[b-19unubv3ty] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

    .continue-row .language-line[b-19unubv3ty] {
        margin: 0;
        font-size: 14px;
        color: var(--muted);
    }
/* /Products/Amplia/IssueSslTlsCertificate.razor.rz.scp.css */
/* The SSL/TLS Demo's form, styled as the e-CNPJ Demo's. */

.names[b-mlcn1nxd52] {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

    .names h2[b-mlcn1nxd52] {
        margin: 0 0 12px;
        font-size: 20px;
    }

button[b-mlcn1nxd52] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    button:hover[b-mlcn1nxd52] {
        background: var(--surface-2);
    }

    button:disabled[b-mlcn1nxd52] {
        cursor: default;
        opacity: 0.6;
    }

    button.primary[b-mlcn1nxd52] {
        border-color: var(--accent-fill);
        background: var(--accent-fill);
        color: var(--on-accent);
    }

        button.primary:hover[b-mlcn1nxd52] {
            background: var(--accent-fill);
            filter: brightness(1.08);
        }

.field[b-mlcn1nxd52] {
    margin-bottom: 16px;
}

    .field > label[b-mlcn1nxd52] {
        display: block;
        margin-bottom: 4px;
        font-weight: 600;
        font-size: 14px;
    }

    .field input[b-mlcn1nxd52] {
        box-sizing: border-box;
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        font: inherit;
    }

/* The DNS names field: the names added as chips, then the text box for the next one, wrapping as one input. */
.chips[b-mlcn1nxd52] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
}

    .chips:focus-within[b-mlcn1nxd52] {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
    }

    .chips .dns-names[b-mlcn1nxd52] {
        display: contents;
        list-style: none;
    }

    .chips .dns-name[b-mlcn1nxd52] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        max-width: 100%;
        padding: 2px 4px 2px 10px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--surface-2);
        font-size: 14px;
    }

        .chips .dns-name .name[b-mlcn1nxd52] {
            overflow-wrap: anywhere;
        }

        .chips .dns-name .remove[b-mlcn1nxd52] {
            padding: 0 6px;
            border: 0;
            border-radius: 999px;
            background: transparent;
            line-height: 1.4;
        }

    .field .chips input[b-mlcn1nxd52] {
        flex: 1 1 160px;
        width: auto;
        min-width: 0;
        padding: 4px;
        border: 0;
        outline: none;
        background: transparent;
    }

.dns-names-refused[b-mlcn1nxd52] {
    margin: 6px 0 0;
    color: var(--orange-ink);
    font-size: 14px;
}

.hint[b-mlcn1nxd52] {
    display: block;
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--muted);
}

.key-option[b-mlcn1nxd52] {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    min-width: 0;
}

    .key-option legend[b-mlcn1nxd52] {
        margin-bottom: 4px;
        font-weight: 600;
    }

    .key-option input[b-mlcn1nxd52] {
        accent-color: var(--accent);
    }

.submit[b-mlcn1nxd52] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.issuing[b-mlcn1nxd52] {
    margin: 0;
    color: var(--muted);
}

.issue-failed[b-mlcn1nxd52] {
    margin: 12px 0 0;
    color: var(--orange-ink);
}

.issued[b-mlcn1nxd52] {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

    .issued h2[b-mlcn1nxd52] {
        margin: 0 0 4px;
        font-size: 20px;
    }

    .issued .test-label[b-mlcn1nxd52] {
        margin: 0 0 12px;
        color: var(--orange-ink);
        font-weight: 600;
    }

/* The details are AmpliaCertificateDetails', the .pfx's download AmpliaPfxDownload's; the trust wording sits beside
   the downloads (ADR 0007), below them on a narrow screen. */
.downloads[b-mlcn1nxd52] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* The PEM pair sits beside the .pfx; the trust wording spans the row below them. */
.pem[b-mlcn1nxd52] {
    margin-top: 20px;
}

    .pem .pem-title[b-mlcn1nxd52] {
        margin: 0 0 8px;
        font-weight: 600;
        font-size: 14px;
    }

    .pem .pem-file + .pem-file[b-mlcn1nxd52] {
        margin-top: 12px;
    }

.pem-failed[b-mlcn1nxd52] {
    margin: 8px 0 0;
    color: var(--orange-ink);
}

.downloads .trust[b-mlcn1nxd52] {
    grid-column: 1 / -1;
}

.issue-another[b-mlcn1nxd52] {
    margin-top: 24px;
}

@media (max-width: 720px) {
    .downloads[b-mlcn1nxd52] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.trust[b-mlcn1nxd52] {
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid var(--orange);
    border-radius: 6px;
    font-size: 14px;
}

    .trust p[b-mlcn1nxd52] {
        margin: 0 0 8px;
    }

        .trust p:last-child[b-mlcn1nxd52] {
            margin-bottom: 0;
        }

    .trust .trust-title[b-mlcn1nxd52] {
        font-weight: 600;
    }

/* "I have a CSR" (#216): the note that the names come from step 1, the upload and the paste, any refusal, and the
   OpenSSL help with its Copy. */
.csr[b-mlcn1nxd52] {
    margin: 0 0 12px;
}

    .csr .csr-names[b-mlcn1nxd52] {
        margin: 0 0 12px;
        font-size: 14px;
        color: var(--muted);
    }

    .csr textarea[b-mlcn1nxd52] {
        box-sizing: border-box;
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        font: 13px/1.4 var(--font-mono);
        resize: vertical;
    }

    .csr[b-mlcn1nxd52]  input[type=file] {
        max-width: 100%;
    }

.csr-refused[b-mlcn1nxd52] {
    margin: 0 0 12px;
    color: var(--orange-ink);
}

.openssl[b-mlcn1nxd52] {
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
}

    .openssl .openssl-title[b-mlcn1nxd52] {
        margin: 0 0 8px;
        font-weight: 600;
        font-size: 14px;
    }

    .openssl pre[b-mlcn1nxd52] {
        margin: 0 0 8px;
        overflow-x: auto;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        font: 13px/1.4 var(--font-mono);
    }

/* For a moment after a click, the module's data-copied swaps the label for "Copied" or "Couldn't copy". */
.copy[data-copied] .label[b-mlcn1nxd52] {
    display: none;
}

.copy[data-copied="done"][b-mlcn1nxd52]::after {
    content: attr(data-done);
    color: var(--ok);
}

.copy[data-copied="failed"][b-mlcn1nxd52]::after {
    content: attr(data-failed);
    color: var(--orange);
}
/* /Products/Amplia/WebPkiCertificateImport.razor.rz.scp.css */
/* The import of a certificate beside its Web PKI key, as the e-CNPJ Demo's browser option showed it. */

.browser-import[b-4vaaokabfy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

    .browser-import p[b-4vaaokabfy] {
        margin: 0;
    }

.importing[b-4vaaokabfy],
.import-cancelled[b-4vaaokabfy] {
    color: var(--muted);
}

.import-failed[b-4vaaokabfy] {
    color: var(--orange-ink);
}

button[b-4vaaokabfy] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    button:hover[b-4vaaokabfy] {
        background: var(--surface-2);
    }

    button.primary[b-4vaaokabfy] {
        border-color: var(--accent-fill);
        background: var(--accent-fill);
        color: var(--on-accent);
    }

        button.primary:hover[b-4vaaokabfy] {
            background: var(--accent-fill);
            filter: brightness(1.08);
        }
/* /Products/Amplia/WebPkiKeyLocationChooser.razor.rz.scp.css */
/* The Web PKI option's location: this computer or a token, styled as the e-CNPJ Demo's key option. */

.key-location[b-8ru0n2odgn] {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    min-width: 0;
}

    .key-location legend[b-8ru0n2odgn] {
        margin-bottom: 4px;
        font-weight: 600;
    }

    .key-location input[b-8ru0n2odgn] {
        accent-color: var(--accent);
    }

    /* A token that can't make the Demo's key: greyed, its reason on the line below. */
    .key-location label.disabled[b-8ru0n2odgn] {
        color: var(--muted);
    }

    .key-location .unfit[b-8ru0n2odgn] {
        margin-left: 24px;
    }

    .key-location .no-tokens[b-8ru0n2odgn],
    .key-location .tokens-failed[b-8ru0n2odgn] {
        margin: 0;
    }

    .key-location .refresh-tokens[b-8ru0n2odgn] {
        justify-self: start;
    }

.hint[b-8ru0n2odgn] {
    display: block;
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

button[b-8ru0n2odgn] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    button:hover[b-8ru0n2odgn] {
        background: var(--surface-2);
    }

    button:disabled[b-8ru0n2odgn] {
        cursor: default;
        opacity: 0.6;
    }
/* /Products/Amplia/WebPkiKeyMaker.razor.rz.scp.css */
/* Web PKI's key, as the e-CNPJ Demo's browser option showed it: after the install check and the location
   (WebPkiKeyLocationChooser's), the backup and Create the key. */

.backup[b-v6dj1gby9b] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 10px;
    margin-bottom: 12px;
}

    .backup input[b-v6dj1gby9b] {
        accent-color: var(--accent);
    }

    .backup .hint[b-v6dj1gby9b] {
        grid-column: 2;
        display: block;
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 13px;
    }

.create[b-v6dj1gby9b] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

    .create p[b-v6dj1gby9b] {
        margin: 0;
    }

.creating-key[b-v6dj1gby9b],
.key-cancelled[b-v6dj1gby9b] {
    color: var(--muted);
}

.key-failed[b-v6dj1gby9b] {
    color: var(--orange-ink);
}

button[b-v6dj1gby9b] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    button:hover[b-v6dj1gby9b] {
        background: var(--surface-2);
    }

    button:disabled[b-v6dj1gby9b] {
        cursor: default;
        opacity: 0.6;
    }
/* /Products/LacunaBio/EnrollAndAuthenticateYourFace.razor.rz.scp.css */
/* The Lacuna Bio Demo: each step in a panel of its own, under the consent. The look it shares with "Run a liveness
   check" (buttons, status lines, results, Start over) is LacunaBioFrame's. */

.enroll[b-donxsier6i],
.authenticate[b-donxsier6i] {
    padding: 20px;
    border-radius: 10px;
    background: var(--surface);
}

.authenticate[b-donxsier6i] {
    margin-top: 16px;
}

    .enroll h2[b-donxsier6i],
    .authenticate h2[b-donxsier6i] {
        margin: 0 0 8px;
        font-size: 20px;
    }

    .enroll .intro[b-donxsier6i],
    .authenticate .intro[b-donxsier6i] {
        margin: 0 0 16px;
    }

.field[b-donxsier6i] {
    margin-bottom: 16px;
}

    .field > label[b-donxsier6i] {
        display: block;
        margin-bottom: 4px;
        font-weight: 600;
        font-size: 14px;
    }

    .field input[b-donxsier6i] {
        box-sizing: border-box;
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        font: inherit;
    }

    .field .hint[b-donxsier6i] {
        margin: 4px 0 0;
        color: var(--muted);
        font-size: 13px;
    }

/* A refusal sits under the step's button, which stays: its own button takes the identifier to the other step. */
.refused[b-donxsier6i] {
    margin-top: 12px;
}

    .refused p[b-donxsier6i] {
        margin: 0 0 12px;
        color: var(--accent-ink);
        overflow-wrap: anywhere;
    }

.result[b-donxsier6i] {
    margin-top: 16px;
}

    .result.no-match h3[b-donxsier6i] {
        color: var(--accent-ink);
    }
/* /Products/LacunaBio/LacunaBioFrame.razor.rz.scp.css */
/* The look both Lacuna Bio Demos share: the consent on top, then the Demo's panels, buttons, status lines and results.
   Lacuna's capture itself is the widget's, laid over the whole page while a session runs. The Demo's own markup is the
   frame's child content, so the rules past the consent reach it with ::deep; they name the Demos' own classes, and
   buttons, which no child component the Demos render (the Turnstile widget, the Monthly-limit message, the error-code
   line) has. */

.consent[b-z44lmc13iq] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 10px;
    margin-bottom: 20px;
}

    .consent input[b-z44lmc13iq] {
        margin-top: 4px;
        accent-color: var(--accent);
    }

[b-z44lmc13iq] button {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    [b-z44lmc13iq] button:hover {
        background: var(--surface-2);
    }

    [b-z44lmc13iq] button:disabled {
        cursor: default;
        opacity: 0.6;
    }

    [b-z44lmc13iq] button.primary {
        border-color: var(--accent-fill);
        background: var(--accent-fill);
        color: var(--on-accent);
    }

        [b-z44lmc13iq] button.primary:hover {
            background: var(--accent-fill);
            filter: brightness(1.08);
        }

/* Where a session stands while it runs; or a capture the visitor closed, or couldn't run here: a quiet line, with the
   button ready again. */
[b-z44lmc13iq] .waiting,
[b-z44lmc13iq] .cancelled,
[b-z44lmc13iq] .no-camera {
    margin: 12px 0 0;
    color: var(--muted);
}

[b-z44lmc13iq] .failed p {
    margin: 0 0 12px;
    color: var(--accent-ink);
}

/* The per-IP rate limit's "Try again later": a note, not a failure, above the button. */
[b-z44lmc13iq] .rate-limited p {
    margin: 0 0 12px;
    color: var(--muted);
}

[b-z44lmc13iq] .result h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

[b-z44lmc13iq] .result.pass h3 {
    color: var(--ok);
}

[b-z44lmc13iq] .result p {
    margin: 0;
    overflow-wrap: anywhere;
}

    [b-z44lmc13iq] .result p + p {
        margin-top: 6px;
    }

[b-z44lmc13iq] .result .no-score {
    color: var(--muted);
    font-size: 14px;
}

[b-z44lmc13iq] .result-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

/* Start over, under the Demo once a session has run: a quiet link-like button. */
[b-z44lmc13iq] .start-over-bar {
    margin-top: 16px;
}

[b-z44lmc13iq] button.link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent-ink);
    text-decoration: underline;
}

    [b-z44lmc13iq] button.link:hover {
        background: none;
    }
/* /Products/LacunaBio/RunALivenessCheck.razor.rz.scp.css */
/* The Liveness Demo: Check and its result in one panel under the consent, as a step of "Enroll and authenticate your
   face" looks. The look the two share (buttons, status lines, results, Start over) is LacunaBioFrame's. */

.check-panel[b-la3f2hrv21] {
    padding: 20px;
    border-radius: 10px;
    background: var(--surface);
}

    .check-panel .intro[b-la3f2hrv21] {
        margin: 0 0 16px;
    }

/* A stop's line holds its error code, which can be long. */
.failed p[b-la3f2hrv21] {
    overflow-wrap: anywhere;
}
/* /Products/PkiSuite/CertificateCards.razor.rz.scp.css */
/* Step 1: the certificate cards, a grid of buttons; one that can't sign is greyed out. */

.certificates-step[b-ojt6fg8bs0] {
    margin: 16px 0 24px;
}

.head[b-ojt6fg8bs0] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.listing[b-ojt6fg8bs0] {
    color: var(--muted);
}

.list-failed p[b-ojt6fg8bs0] {
    margin: 0 0 12px;
}

.cert-cards[b-ojt6fg8bs0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cert-card[b-ojt6fg8bs0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    height: 100%;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .cert-card.on[b-ojt6fg8bs0] {
        border: 2px solid var(--accent);
        padding: 13px;
    }

    .cert-card.cant[b-ojt6fg8bs0],
    .cert-card:disabled[b-ojt6fg8bs0] {
        cursor: not-allowed;
    }

    .cert-card.cant[b-ojt6fg8bs0] {
        opacity: 0.5;
    }

    .cert-card .holder[b-ojt6fg8bs0] {
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .cert-card .issuer[b-ojt6fg8bs0],
    .cert-card .expiry[b-ojt6fg8bs0] {
        color: var(--muted);
        font-size: 13px;
    }

    .cert-card .issuer[b-ojt6fg8bs0] {
        overflow-wrap: anywhere;
    }

    .cert-card .chips[b-ojt6fg8bs0] {
        margin-top: 6px;
    }
/* /Products/PkiSuite/CertificateFacts.razor.rz.scp.css */
/* A signer certificate's lines, then its chain: in the signing Demos' report and in the validation Demo's cards. */

dl[b-aewqf79mlh] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 14px;
    margin: 0;
}

dt[b-aewqf79mlh] {
    color: var(--muted);
}

dd[b-aewqf79mlh] {
    margin: 0;
    overflow-wrap: anywhere;
}

h3[b-aewqf79mlh],
h4[b-aewqf79mlh] {
    margin: 14px 0 8px;
    font-size: 16px;
}

h4[b-aewqf79mlh] {
    font-size: 15px;
}

.chain[b-aewqf79mlh] {
    margin: 0;
    padding-left: 20px;
    overflow-wrap: anywhere;
}

@media (max-width: 420px) {
    dl[b-aewqf79mlh] {
        grid-template-columns: minmax(0, 1fr);
    }

    dd[b-aewqf79mlh] {
        margin-bottom: 6px;
    }
}
/* /Products/PkiSuite/CheckLines.razor.rz.scp.css */
/* The validation lines in plain language: a mark, the line's name, its reason. */

.checks[b-436yb6y95h] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.check[b-436yb6y95h] {
    display: grid;
    grid-template-columns: 1.2em max-content minmax(0, 1fr);
    gap: 8px;
    padding: 4px 0;
}

    .check .name[b-436yb6y95h] {
        font-weight: 600;
    }

    .check.pass .mark[b-436yb6y95h] {
        color: var(--ok);
    }

    .check.fail .mark[b-436yb6y95h] {
        color: var(--accent-ink);
    }

    .check.warn .mark[b-436yb6y95h] {
        color: var(--orange);
    }

@media (max-width: 420px) {
    .check[b-436yb6y95h] {
        grid-template-columns: 1.2em minmax(0, 1fr);
    }

        .check .reason[b-436yb6y95h] {
            grid-column: 2;
        }
}
/* /Products/PkiSuite/CheckPage.razor.rz.scp.css */
/* The check page: its heading and the code, the Validation report, then the two downloads. One column. */

.check-page[b-9aonaul7jd] {
    max-width: 760px;
}

.code-line[b-9aonaul7jd] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 20px;
}

.code[b-9aonaul7jd] {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 1.25em;
    letter-spacing: 0.04em;
}

.validation-failed[b-9aonaul7jd] {
    margin: 0 0 12px;
    color: var(--accent-ink);
}

.downloads[b-9aonaul7jd] {
    margin-top: 24px;
}

    .downloads ul[b-9aonaul7jd] {
        margin: 0;
        padding-left: 1.2em;
    }

    .downloads li + li[b-9aonaul7jd] {
        margin-top: 6px;
    }

/* The box to type a code (#255): on a bare /check and under the one message for a code that finds nothing. */

.not-found[b-9aonaul7jd] {
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.type-a-code[b-9aonaul7jd] {
    max-width: 480px;
}

    .type-a-code label[b-9aonaul7jd] {
        display: block;
        margin-bottom: 4px;
        font-weight: 600;
        font-size: 14px;
    }

    .type-a-code .box[b-9aonaul7jd] {
        display: flex;
        gap: 8px;
    }

    .type-a-code input[b-9aonaul7jd] {
        flex: 1;
        min-width: 0;
        box-sizing: border-box;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        font-family: var(--mono, ui-monospace, monospace);
        font-size: 1em;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

        .type-a-code input[b-9aonaul7jd]::placeholder {
            text-transform: none;
            opacity: 0.6;
        }

    .type-a-code button[b-9aonaul7jd] {
        padding: 8px 14px;
        border: 1px solid var(--accent-fill);
        border-radius: 6px;
        background: var(--accent-fill);
        color: var(--on-accent);
        cursor: pointer;
    }

        .type-a-code button:hover[b-9aonaul7jd] {
            filter: brightness(1.08);
        }

    .type-a-code .hint[b-9aonaul7jd] {
        margin: 6px 0 0;
        font-size: 14px;
        color: var(--muted);
    }
/* /Products/PkiSuite/CloudHub/CloudHubReturnPage.razor.rz.scp.css */
/* The CloudHub Demo's return page: a short, calm message in a readable measure, as the error page's. */

.cloudhub-return[b-2wfd7s8d9i] {
    max-width: 72ch;
}
/* /Products/PkiSuite/CloudHub/SignWithCloudCertificate.razor.rz.scp.css */
/* The CloudHub Demo's own steps, between the drop zone and the result: the CPF, the PSCs with the line before the trip,
   the wait at the PSC, and the certificate with Sign. The shared parts style themselves (SigningParts). */

.cpf-step[b-6gred86pf2],
.pscs[b-6gred86pf2],
.no-psc[b-6gred86pf2],
.certificate[b-6gred86pf2],
section.session-ended[b-6gred86pf2] {
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.cpf-step label[b-6gred86pf2] {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.cpf-step .field[b-6gred86pf2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .cpf-step .field input[b-6gred86pf2] {
        flex: 1 1 160px;
        min-width: 0;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        font: inherit;
        font-family: var(--font-mono);
    }

        .cpf-step .field input[aria-invalid][b-6gred86pf2] {
            border-color: var(--orange);
        }

.cpf-step p[b-6gred86pf2] {
    margin: 8px 0 0;
}

.cpf-step .looking[b-6gred86pf2] {
    color: var(--muted);
}

.lead[b-6gred86pf2] {
    margin: 0 0 10px;
    color: var(--muted);
}

.pscs ul[b-6gred86pf2] {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pscs .psc[b-6gred86pf2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

/* CloudHub's badges are 160×84 tiles, each in its PSC's colours. One (Serasa's) is transparent, with dark ink: the white
   behind it keeps it readable in the dark theme. */
.pscs .badge[b-6gred86pf2] {
    display: block;
    height: 40px;
    aspect-ratio: 160 / 84;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #ffffff;
}

    .pscs .psc:hover .badge[b-6gred86pf2] {
        border-color: var(--accent);
    }

.before-trip[b-6gred86pf2] {
    margin: 2px 0 0;
    font-size: 14px;
}

/* No PSC found: what CloudHub reaches, and the Demos that sign or issue with a test certificate, one link a line when
   narrow. */

.no-psc p[b-6gred86pf2] {
    margin: 0 0 8px;
}

    .no-psc p:last-child[b-6gred86pf2] {
        margin-bottom: 0;
    }

.no-psc .links[b-6gred86pf2] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 4px;
    font-weight: 600;
}

.waiting-at-psc[b-6gred86pf2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface-2);
}

    .waiting-at-psc p[b-6gred86pf2] {
        margin: 0;
    }

.failed[b-6gred86pf2] {
    padding: 8px 12px;
    border: 1px solid var(--orange);
    border-radius: 8px;
}

/* A calm failure with Try again: the lookup's, in the CPF step, and the certificate's, back from the PSC. */

div.failed p[b-6gred86pf2] {
    margin: 0 0 8px;
}

.cpf-step div.failed[b-6gred86pf2] {
    margin-top: 8px;
}

.certificate-failed[b-6gred86pf2],
.cancelled-at-psc[b-6gred86pf2] {
    margin: 0 0 16px;
}

.certificate dl[b-6gred86pf2] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    margin: 0 0 14px;
}

.certificate dt[b-6gred86pf2] {
    font-weight: 600;
}

.certificate dd[b-6gred86pf2] {
    margin: 0;
    overflow-wrap: anywhere;
}

.mono[b-6gred86pf2] {
    font-family: var(--font-mono);
}

.sign-action .sign[b-6gred86pf2] {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* The Signature session: until when the Demo keeps it, Stop signing beside Sign, and once it has ended, what the Demo
   says with Authorize again, here or in the result's actions. */

.until[b-6gred86pf2] {
    margin: 0 0 12px;
}

.sign-action[b-6gred86pf2],
.session-ended .actions[b-6gred86pf2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

section.session-ended p[b-6gred86pf2] {
    margin: 0 0 12px;
}

p.session-ended[b-6gred86pf2] {
    margin: 0;
}
/* /Products/PkiSuite/DocumentTimestampCard.razor.rz.scp.css */
/* One document timestamp's card: SignatureCard's look, with no verdict and nothing to open. */

.timestamp-card[b-3r2pliuhx9] {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

h3[b-3r2pliuhx9] {
    margin: 0 0 10px;
    font-size: 16px;
}

dl[b-3r2pliuhx9] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 14px;
    margin: 0;
}

dt[b-3r2pliuhx9] {
    color: var(--muted);
}

dd[b-3r2pliuhx9] {
    margin: 0;
    overflow-wrap: anywhere;
}

.note[b-3r2pliuhx9] {
    margin: 10px 0 0;
    color: var(--muted);
}

@media (max-width: 420px) {
    dl[b-3r2pliuhx9] {
        grid-template-columns: minmax(0, 1fr);
    }

    dd[b-3r2pliuhx9] {
        margin-bottom: 6px;
    }
}
/* /Products/PkiSuite/FileDropZone.razor.rz.scp.css */
/* Step 2: the drop zone, with the samples and the file chosen. */

.file-step[b-9sh57ber0r] {
    margin-bottom: 16px;
}

.dropzone[b-9sh57ber0r] {
    padding: 22px;
    border: 2px dashed var(--border);
    border-radius: 12px;
    text-align: center;
}

    .dropzone p[b-9sh57ber0r] {
        margin: 0 0 6px;
    }

        .dropzone p:last-child[b-9sh57ber0r] {
            margin-bottom: 0;
        }

.dropzone .samples[b-9sh57ber0r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--muted);
}

    .samples .samples-label[b-9sh57ber0r] {
        margin-right: 2px;
        font-size: 14px;
    }

    /* Each sample is a chip: a quiet pill that warms to the accent on hover, and stays there once chosen. */
    .samples .sample[b-9sh57ber0r] {
        padding: 6px 14px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--surface);
        color: var(--text);
        font-size: 14px;
        line-height: 1.3;
        text-decoration: none;
        cursor: pointer;
        transition: border-color 0.15s, background-color 0.15s, color 0.15s;
    }

        .samples .sample:hover:not(:disabled)[b-9sh57ber0r] {
            border-color: var(--accent);
            background: var(--surface-2);
            color: var(--heading);
        }

        .samples .sample.on[b-9sh57ber0r] {
            border-color: var(--accent);
            background: color-mix(in srgb, var(--accent) 14%, transparent);
            color: var(--accent-ink);
            font-weight: 600;
        }

.chosen .name[b-9sh57ber0r] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.chosen .format[b-9sh57ber0r] {
    color: var(--muted);
}

    .chosen .format[b-9sh57ber0r]::before {
        content: " · ";
    }

/* Drop or browse: the file input is stretched, invisible, over the target, so a file dropped on it, or a click, reaches it. */
.drop-target[b-9sh57ber0r] {
    position: relative;
    margin: 0 0 10px;
    padding: 14px 10px;
    border-radius: 8px;
    color: var(--muted);
}

    .drop-target:hover[b-9sh57ber0r],
    .drop-target:focus-within[b-9sh57ber0r] {
        background: var(--surface-2);
        color: inherit;
    }

    .drop-target:focus-within[b-9sh57ber0r] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .drop-target.disabled[b-9sh57ber0r] {
        opacity: 0.6;
    }

    .drop-target[b-9sh57ber0r]  input.browse {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .drop-target.disabled[b-9sh57ber0r]  input.browse {
        cursor: not-allowed;
    }

.reading[b-9sh57ber0r] {
    color: var(--muted);
}

.refusal[b-9sh57ber0r] {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid var(--orange);
    border-radius: 8px;
}

.override[b-9sh57ber0r] {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
    color: var(--muted);
    cursor: pointer;
}
/* /Products/PkiSuite/FileItSignsDropZone.razor.rz.scp.css */
/* The validation Demo's second drop zone, under the first, for the file a Detached signature signs: drawn as the first. */

.file-it-signs-step[b-bvh2m2npea] {
    margin-bottom: 16px;
}

.dropzone[b-bvh2m2npea] {
    padding: 18px 22px;
    border: 2px dashed var(--accent);
    border-radius: 12px;
    text-align: center;
}

    .dropzone p[b-bvh2m2npea] {
        margin: 0;
    }

.file-it-signs-line[b-bvh2m2npea] {
    margin-bottom: 10px;
    font-weight: 600;
}

.drop-target[b-bvh2m2npea] {
    position: relative;
    padding: 14px 10px;
    border-radius: 8px;
    color: var(--muted);
}

    .drop-target:hover[b-bvh2m2npea],
    .drop-target:focus-within[b-bvh2m2npea] {
        background: var(--surface-2);
        color: inherit;
    }

    .drop-target:focus-within[b-bvh2m2npea] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    /* Drop or browse: the file input is stretched, invisible, over the target, so a file dropped on it, or a click, reaches it. */
    .drop-target[b-bvh2m2npea]  input.browse {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

.reading[b-bvh2m2npea] {
    margin-top: 10px;
    color: var(--muted);
}

.refusal[b-bvh2m2npea] {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px solid var(--orange);
    border-radius: 8px;
}
/* /Products/PkiSuite/FileValidationReport.razor.rz.scp.css */
/* The Validation report: the summary line, then the cards stacked, one per signature. */

.summary[b-usn0f31wpx] {
    margin: 0 0 12px;
    font-weight: 600;
}

    .summary .no-legal-value[b-usn0f31wpx] {
        display: block;
        font-weight: 400;
        color: var(--muted);
    }

    /* An attached .p7s's content: on its own line, under the counts. */
    .summary .download-content[b-usn0f31wpx] {
        display: block;
        margin-top: 6px;
        font-weight: 600;
    }

.download-failed[b-usn0f31wpx] {
    margin: 0 0 12px;
    color: var(--muted);
}

.cards[b-usn0f31wpx] {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* /Products/PkiSuite/MakeAPrinterFriendlyVersion.razor.rz.scp.css */
/* The Printer-friendly version Demo: one column, the file step at the top, then the result, then Talk to us ↗. */

.printer-friendly-demo[b-wa0o3nhflk] {
    min-width: 0;
}

.file-step[b-wa0o3nhflk] {
    margin-bottom: 16px;
    padding: 22px;
    border: 2px dashed var(--border);
    border-radius: 12px;
    text-align: center;
}

    .file-step h2[b-wa0o3nhflk] {
        margin-top: 0;
    }

.drop-target[b-wa0o3nhflk] {
    position: relative;
    margin: 0 0 10px;
    padding: 14px 10px;
    border-radius: 8px;
    color: var(--muted);
}

    .drop-target:hover[b-wa0o3nhflk],
    .drop-target:focus-within[b-wa0o3nhflk] {
        background: var(--surface-2);
        color: inherit;
    }

    .drop-target:focus-within[b-wa0o3nhflk] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    /* Drop or browse: the file input is stretched, invisible, over the target, so a file dropped on it, or a click, reaches it. */
    .drop-target[b-wa0o3nhflk]  input.browse {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

.reading[b-wa0o3nhflk] {
    margin: 0 0 10px;
    color: var(--muted);
}

.refusal[b-wa0o3nhflk] {
    display: inline-block;
    margin: 0 0 10px;
    padding: 8px 12px;
    border: 1px solid var(--orange);
    border-radius: 8px;
}

.samples[b-wa0o3nhflk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    color: var(--muted);
}

    .samples .samples-label[b-wa0o3nhflk] {
        margin-right: 2px;
        font-size: 14px;
    }

    /* Each sample is a chip: a quiet pill that warms to the accent on hover, and stays there once chosen. */
    .samples .sample[b-wa0o3nhflk] {
        padding: 6px 14px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--surface);
        color: var(--text);
        font-size: 14px;
        line-height: 1.3;
        cursor: pointer;
        transition: border-color 0.15s, background-color 0.15s, color 0.15s;
    }

        .samples .sample:hover[b-wa0o3nhflk] {
            border-color: var(--accent);
            background: var(--surface-2);
            color: var(--heading);
        }

        .samples .sample.on[b-wa0o3nhflk] {
            border-color: var(--accent);
            background: color-mix(in srgb, var(--accent) 14%, transparent);
            color: var(--accent-ink);
            font-weight: 600;
        }

/* Keep and Download, styled as the signing Demos' primary buttons. */
button.primary[b-wa0o3nhflk] {
    padding: 8px 14px;
    border: 1px solid var(--accent-fill);
    border-radius: 6px;
    background: var(--accent-fill);
    color: var(--on-accent);
    cursor: pointer;
}

    button.primary:hover[b-wa0o3nhflk] {
        filter: brightness(1.08);
    }

    button.primary:disabled[b-wa0o3nhflk] {
        cursor: default;
        opacity: 0.6;
    }

.making[b-wa0o3nhflk],
.printing-failed[b-wa0o3nhflk],
.download-failed[b-wa0o3nhflk] {
    margin: 0 0 12px;
    color: var(--muted);
}

.printing-failed[b-wa0o3nhflk],
.download-failed[b-wa0o3nhflk] {
    color: var(--accent-ink);
}

.keep-notice[b-wa0o3nhflk] {
    margin: 0 0 12px;
}

.printer-friendly-result p[b-wa0o3nhflk] {
    margin: 0 0 8px;
}

.code-line[b-wa0o3nhflk] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.code[b-wa0o3nhflk] {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 1.25em;
    letter-spacing: 0.04em;
}

.never-expires[b-wa0o3nhflk] {
    color: var(--muted);
}

/* Beside the download: the visitor's own Manifest carries their logo (#332). */
.logo-line[b-wa0o3nhflk] {
    margin: 8px 0 0;
    color: var(--muted);
}

.check-link[b-wa0o3nhflk] {
    overflow-wrap: anywhere;
}

.talk-line[b-wa0o3nhflk] {
    margin: 16px 0 0;
}
/* /Products/PkiSuite/SignatureCard.razor.rz.scp.css */
/* One signature's card: its number and verdict, then its facts, the moment its checks refer to, and what it opens onto,
   its signer's certificate and its validation. Readable in a narrow Demo column. */

.signature-card[b-qrii47lhoa] {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

h3[b-qrii47lhoa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 16px;
}

.verdict[b-qrii47lhoa] {
    font-weight: 600;
}

    .verdict.pass[b-qrii47lhoa] {
        color: var(--ok);
    }

    .verdict.warn[b-qrii47lhoa] {
        color: var(--orange);
    }

    .verdict.fail[b-qrii47lhoa] {
        color: var(--accent-ink);
    }

    .verdict.not-validated[b-qrii47lhoa] {
        color: var(--muted);
    }

dl[b-qrii47lhoa] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 14px;
    margin: 0;
}

dt[b-qrii47lhoa] {
    color: var(--muted);
}

dd[b-qrii47lhoa] {
    margin: 0;
    overflow-wrap: anywhere;
}

.checked[b-qrii47lhoa],
.not-validated-note[b-qrii47lhoa] {
    margin: 10px 0 0;
    color: var(--muted);
}

.opens[b-qrii47lhoa] {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

    .opens > summary[b-qrii47lhoa] {
        cursor: pointer;
        font-weight: 600;
    }

    .opens h4[b-qrii47lhoa] {
        margin: 14px 0 8px;
        font-size: 15px;
    }

@media (max-width: 420px) {
    dl[b-qrii47lhoa] {
        grid-template-columns: minmax(0, 1fr);
    }

    dd[b-qrii47lhoa] {
        margin-bottom: 6px;
    }
}
/* /Products/PkiSuite/SignBar.razor.rz.scp.css */
/* Step 3: the sign bar, with the options and Sign {file}. */

.sign-bar[b-d0goxsff4b] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.options:empty[b-d0goxsff4b] {
    display: none;
}

.action[b-d0goxsff4b] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
}

    .action .sign[b-d0goxsff4b] {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

.hint[b-d0goxsff4b] {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

/* The options: #145's "Only accept validated certificates" with its help, #147's "Add a timestamp" and the
   Monthly-limit message under it when the box is disabled. */
.options[b-d0goxsff4b] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 260px;
    min-width: 0;
}

.option label[b-d0goxsff4b] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

    .option label input[b-d0goxsff4b] {
        margin-top: 3px;
    }

.option .help[b-d0goxsff4b] {
    margin: 4px 0 0 24px;
    color: var(--muted);
    font-size: 13px;
}

.timestamp[b-d0goxsff4b] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .timestamp:has(input:disabled)[b-d0goxsff4b] {
        color: var(--muted);
    }
/* /Products/PkiSuite/SignedFileDropZone.razor.rz.scp.css */
/* The validation Demo's drop zone, at the top of the Demo: the drop target and the five samples. */

.file-step[b-si7m6re10r] {
    margin-bottom: 16px;
}

.dropzone[b-si7m6re10r] {
    padding: 22px;
    border: 2px dashed var(--border);
    border-radius: 12px;
    text-align: center;
}

    .dropzone p[b-si7m6re10r] {
        margin: 0;
    }

.drop-target[b-si7m6re10r] {
    position: relative;
    margin: 0 0 10px;
    padding: 14px 10px;
    border-radius: 8px;
    color: var(--muted);
}

    .drop-target:hover[b-si7m6re10r],
    .drop-target:focus-within[b-si7m6re10r] {
        background: var(--surface-2);
        color: inherit;
    }

    .drop-target:focus-within[b-si7m6re10r] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    /* Drop or browse: the file input is stretched, invisible, over the target, so a file dropped on it, or a click, reaches it. */
    .drop-target[b-si7m6re10r]  input.browse {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

.reading[b-si7m6re10r] {
    margin-bottom: 10px;
    color: var(--muted);
}

.refusal[b-si7m6re10r] {
    display: inline-block;
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid var(--orange);
    border-radius: 8px;
}

.samples[b-si7m6re10r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    color: var(--muted);
}

    .samples .samples-label[b-si7m6re10r] {
        margin-right: 2px;
        font-size: 14px;
    }

    /* Each sample is a chip: a quiet pill that warms to the accent on hover, and stays there once chosen. */
    .samples .sample[b-si7m6re10r] {
        padding: 6px 14px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--surface);
        color: var(--text);
        font-size: 14px;
        line-height: 1.3;
        cursor: pointer;
        transition: border-color 0.15s, background-color 0.15s, color 0.15s;
    }

        .samples .sample:hover[b-si7m6re10r] {
            border-color: var(--accent);
            background: var(--surface-2);
            color: var(--heading);
        }

        .samples .sample.on[b-si7m6re10r] {
            border-color: var(--accent);
            background: color-mix(in srgb, var(--accent) 14%, transparent);
            color: var(--accent-ink);
            font-weight: 600;
        }
/* /Products/PkiSuite/SigningDemo.razor.rz.scp.css */
/* The PKI Suite Demo, variant C: certificate first, then the file, then the sign bar; after signing, the result (and,
   with #146, the report beside it). The look the parts share, and the split view after signing, are the frame's
   (SigningParts.razor.css), so that any Demo composing the parts gets them. */

.privacy[b-w3wn9ldsfq] {
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 13px;
}
/* /Products/PkiSuite/SigningParts.razor.rz.scp.css */
/* The shared signing parts, under any host: the buttons, headings and chips the parts share, styled here through
   ::deep; and after signing, the result on the left, the report (#146) on the right, stacked in a narrow Demo column.
   Each part styles itself in its own component's stylesheet. */

.pkisuite-demo[b-y4auvl1hx4] {
    container-type: inline-size;
}

    .pkisuite-demo[b-y4auvl1hx4]  h2 {
        margin: 0 0 12px;
        font-size: 20px;
    }

    .pkisuite-demo[b-y4auvl1hx4]  button {
        padding: 8px 14px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--surface);
        color: var(--text);
        font: inherit;
        cursor: pointer;
    }

        .pkisuite-demo[b-y4auvl1hx4]  button:hover {
            background: var(--surface-2);
        }

        .pkisuite-demo[b-y4auvl1hx4]  button:disabled {
            cursor: default;
            opacity: 0.6;
        }

        .pkisuite-demo[b-y4auvl1hx4]  button.primary {
            border-color: var(--accent-fill);
            background: var(--accent-fill);
            color: var(--on-accent);
        }

            .pkisuite-demo[b-y4auvl1hx4]  button.primary:hover {
                filter: brightness(1.08);
            }

        .pkisuite-demo[b-y4auvl1hx4]  button.link {
            padding: 0;
            border: 0;
            background: none;
            color: var(--accent-ink);
            text-decoration: underline;
        }

    .pkisuite-demo[b-y4auvl1hx4]  .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .pkisuite-demo[b-y4auvl1hx4]  .chip {
        padding: 2px 8px;
        border: 1px solid var(--border);
        border-radius: 999px;
        font-size: 12px;
    }

        .pkisuite-demo[b-y4auvl1hx4]  .chip.expired {
            border-color: var(--orange);
            color: var(--accent-ink);
        }

        .pkisuite-demo[b-y4auvl1hx4]  .chip.cant-sign {
            background: var(--surface-2);
            color: var(--muted);
        }

        .pkisuite-demo[b-y4auvl1hx4]  .chip.test-pki,
        .pkisuite-demo[b-y4auvl1hx4]  .chip.remote {
            border-color: var(--accent);
        }

/* After signing: the result on the left, the report (#146) on the right; stacked in a narrow Demo column. */
.pkisuite-demo[b-y4auvl1hx4]  .after-signing {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@container (min-width: 760px) {
    .pkisuite-demo[b-y4auvl1hx4]  .after-signing:has(> :nth-child(2)) {
        grid-template-columns: 280px minmax(0, 1fr);
    }
}
/* /Products/PkiSuite/SigningResult.razor.rz.scp.css */
/* The result: the summary, the downloads, Sign it again, Start over and Talk to us. */

.result[b-3ftnnytkvk] {
    container-type: inline-size;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.signed[b-3ftnnytkvk] {
    color: var(--ok);
}

/* The summary, each label over its value: the result's column beside the report is too narrow for both side by side. */
dl[b-3ftnnytkvk] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    margin: 0;
}

dt[b-3ftnnytkvk] {
    color: var(--muted);
    font-size: 14px;
}

dd[b-3ftnnytkvk] {
    margin: 0 0 8px;
    overflow-wrap: break-word;
}

    /* #144: the PAdES stamp's text, one line per span, as on the PDF. */
    dd.stamp span[b-3ftnnytkvk] {
        display: block;
    }

    dd.verdict.fail[b-3ftnnytkvk] {
        color: var(--accent-ink);
    }

.actions[b-3ftnnytkvk] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 16px;
}

    .actions .start-over[b-3ftnnytkvk] {
        align-self: flex-start;
    }

.download-failed[b-3ftnnytkvk] {
    margin: 0;
    color: var(--accent-ink);
    font-size: 14px;
}

/* #229: the cross-link to the validation Demo, after the downloads. */
.validate-line[b-3ftnnytkvk] {
    margin: 12px 0 0;
}

.talk[b-3ftnnytkvk] {
    display: inline-block;
    margin-top: 12px;
}

/* Wide enough, as when it stacks over the report in a narrow Demo column: labels and values side by side. */
@container (min-width: 440px) {
    dl[b-3ftnnytkvk] {
        grid-template-columns: max-content minmax(0, 1fr);
        gap: 4px 14px;
    }

    dt[b-3ftnnytkvk] {
        font-size: inherit;
    }

    dd[b-3ftnnytkvk] {
        margin: 0;
    }
}
/* /Products/PkiSuite/SigningStatus.razor.rz.scp.css */
/* Under the sign bar: the waits, and how a signing that didn't complete ended. */

.sign-status:empty[b-xmwn3nvsl4] {
    display: none;
}

.sign-status > *[b-xmwn3nvsl4] {
    margin: 12px 0 0;
}

.waiting[b-xmwn3nvsl4],
.pin-wait[b-xmwn3nvsl4],
.phone-wait[b-xmwn3nvsl4],
.note[b-xmwn3nvsl4] {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface-2);
}

    .pin-wait p[b-xmwn3nvsl4],
    .phone-wait p[b-xmwn3nvsl4] {
        margin: 0 0 6px;
    }

        .pin-wait p:last-child[b-xmwn3nvsl4] {
            margin-bottom: 0;
        }

.pin-note[b-xmwn3nvsl4] {
    color: var(--muted);
    font-size: 13px;
}

.refused[b-xmwn3nvsl4],
.failed[b-xmwn3nvsl4] {
    padding: 12px 14px;
    border: 1px solid var(--orange);
    border-radius: 8px;
}

    .refused p[b-xmwn3nvsl4],
    .refused .sign-anyway[b-xmwn3nvsl4] {
        margin: 0 0 8px;
    }

.checks[b-xmwn3nvsl4] {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.check[b-xmwn3nvsl4] {
    display: grid;
    grid-template-columns: 1.5em max-content 1fr;
    gap: 6px;
}

    .check .mark[b-xmwn3nvsl4] {
        font-weight: 700;
        text-align: center;
    }

    .check.pass .mark[b-xmwn3nvsl4] {
        color: var(--ok);
    }

    .check .reason[b-xmwn3nvsl4] {
        color: var(--muted);
    }

@media (max-width: 480px) {
    .check[b-xmwn3nvsl4] {
        grid-template-columns: 1.5em 1fr;
    }

        .check .reason[b-xmwn3nvsl4] {
            grid-column: 2;
        }
}

/* #145: how to sign anyway, under the failing lines. */
.refused .sign-anyway[b-xmwn3nvsl4] {
    margin: 10px 0 0;
}

/* #147: the timestamp server failed, with Try again; and the calm failure, where the host offers Try again (#187). */
.timestamp-failed[b-xmwn3nvsl4] {
    padding: 12px 14px;
    border: 1px solid var(--orange);
    border-radius: 8px;
}

    .timestamp-failed p[b-xmwn3nvsl4],
    .failed p[b-xmwn3nvsl4] {
        margin: 0 0 8px;
    }
/* /Products/PkiSuite/TimestampAPdf.razor.rz.scp.css */
/* The timestamp Demo: one column, the file step at the top, then Add a timestamp or the result, then Talk to us ↗. */

.timestamp-demo[b-uwufoa45vt] {
    min-width: 0;
}

.file-step[b-uwufoa45vt] {
    margin-bottom: 16px;
    padding: 22px;
    border: 2px dashed var(--border);
    border-radius: 12px;
    text-align: center;
}

    .file-step h2[b-uwufoa45vt] {
        margin-top: 0;
    }

.drop-target[b-uwufoa45vt] {
    position: relative;
    margin: 0 0 10px;
    padding: 14px 10px;
    border-radius: 8px;
    color: var(--muted);
}

    .drop-target:not(.disabled):hover[b-uwufoa45vt],
    .drop-target:not(.disabled):focus-within[b-uwufoa45vt] {
        background: var(--surface-2);
        color: inherit;
    }

    .drop-target:focus-within[b-uwufoa45vt] {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    /* Drop or browse: the file input is stretched, invisible, over the target, so a file dropped on it, or a click, reaches it. */
    .drop-target[b-uwufoa45vt]  input.browse {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    /* While a timestamp is under way, the target takes no file: dimmed, and not clickable. */
    .drop-target.disabled[b-uwufoa45vt] {
        opacity: 0.6;
    }

        .drop-target.disabled[b-uwufoa45vt]  input.browse {
            cursor: not-allowed;
        }

.reading[b-uwufoa45vt] {
    margin: 0 0 10px;
    color: var(--muted);
}

.refusal[b-uwufoa45vt] {
    display: inline-block;
    margin: 0 0 10px;
    padding: 8px 12px;
    border: 1px solid var(--orange);
    border-radius: 8px;
}

.samples[b-uwufoa45vt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    color: var(--muted);
}

    .samples .samples-label[b-uwufoa45vt] {
        margin-right: 2px;
        font-size: 14px;
    }

    /* Each sample is a chip: a quiet pill that warms to the accent on hover, and stays there once chosen. */
    .samples .sample[b-uwufoa45vt] {
        padding: 6px 14px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--surface);
        color: var(--text);
        font-size: 14px;
        line-height: 1.3;
        cursor: pointer;
        transition: border-color 0.15s, background-color 0.15s, color 0.15s;
    }

        .samples .sample:hover:not(:disabled)[b-uwufoa45vt] {
            border-color: var(--accent);
            background: var(--surface-2);
            color: var(--heading);
        }

        .samples .sample:disabled[b-uwufoa45vt] {
            cursor: not-allowed;
        }

        .samples .sample.on[b-uwufoa45vt] {
            border-color: var(--accent);
            background: color-mix(in srgb, var(--accent) 14%, transparent);
            color: var(--accent-ink);
            font-weight: 600;
        }

/* Add a timestamp and Download, styled as the signing Demos' primary buttons. */
button.primary[b-uwufoa45vt] {
    padding: 8px 14px;
    border: 1px solid var(--accent-fill);
    border-radius: 6px;
    background: var(--accent-fill);
    color: var(--on-accent);
    cursor: pointer;
}

    button.primary:hover[b-uwufoa45vt] {
        filter: brightness(1.08);
    }

    button.primary:disabled[b-uwufoa45vt] {
        cursor: default;
        opacity: 0.6;
    }

.chosen[b-uwufoa45vt] {
    margin: 0 0 10px;
    color: var(--muted);
}

.stamping[b-uwufoa45vt],
.stamp-failed[b-uwufoa45vt],
.download-failed[b-uwufoa45vt] {
    margin: 0 0 12px;
    color: var(--muted);
}

.stamp-failed[b-uwufoa45vt],
.download-failed[b-uwufoa45vt] {
    color: var(--accent-ink);
}

.stamp-note[b-uwufoa45vt],
.result-lead[b-uwufoa45vt],
.timestamp-not-read[b-uwufoa45vt] {
    margin: 0 0 12px;
}

.stamp-step .stamp[b-uwufoa45vt] {
    margin-bottom: 12px;
}

.timestamp-result h2[b-uwufoa45vt] {
    margin-top: 0;
}

.timestamp-result .download[b-uwufoa45vt] {
    margin-top: 12px;
}

.talk-line[b-uwufoa45vt] {
    margin: 16px 0 0;
}
/* /Products/PkiSuite/ValidateASignedFile.razor.rz.scp.css */
/* The validation Demo: one column, the drop zone at the top, then the outcome, then Talk to us ↗. */

.validation-demo[b-7k1ipwdqke] {
    min-width: 0;
}

.validating[b-7k1ipwdqke],
.validation-failed[b-7k1ipwdqke],
.rate-limited[b-7k1ipwdqke],
.no-signatures[b-7k1ipwdqke] {
    margin: 0 0 12px;
    color: var(--muted);
}

.validation-failed[b-7k1ipwdqke],
.rate-limited[b-7k1ipwdqke] {
    color: var(--accent-ink);
}

/* A file the port couldn't open, refused as calmly as the drop zone's own refusals. */
.refusal[b-7k1ipwdqke] {
    display: inline-block;
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid var(--orange);
    border-radius: 8px;
}

/* #258: after a PDF's report, the line to its printer-friendly version. */
.print-line[b-7k1ipwdqke] {
    margin: 12px 0 0;
}

.talk-line[b-7k1ipwdqke] {
    margin: 16px 0 0;
}

/* #229: the cross-link sits on its own line, above Talk to us. */
.cross-line[b-7k1ipwdqke] {
    display: block;
    margin-bottom: 8px;
}
/* /Products/PkiSuite/ValidationReport.razor.rz.scp.css */
/* The validation report: three tabs beside the result (stacked under it in a narrow Demo column), the certificate,
   its validation lines, the signatures, and PKI SDK's trees, closed until opened. The certificate's lines, the
   validation lines and the trees style themselves (CertificateFacts, CheckLines, ValidationTreeView). */

.report[b-6fxonol1xh] {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.validating[b-6fxonol1xh],
.report-failed[b-6fxonol1xh] {
    margin: 0;
    color: var(--muted);
}

.report-failed[b-6fxonol1xh] {
    color: var(--accent-ink);
}

.tabs[b-6fxonol1xh] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

    .tabs [role=tab][b-6fxonol1xh] {
        margin-bottom: -1px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        background: var(--surface-2);
    }

        .tabs [role=tab][aria-selected=true][b-6fxonol1xh] {
            border-bottom-color: var(--surface);
            background: var(--surface);
            font-weight: 600;
        }

.panel[hidden][b-6fxonol1xh] {
    display: none;
}

h3[b-6fxonol1xh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 14px 0 8px;
    font-size: 16px;
}

dl[b-6fxonol1xh] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 14px;
    margin: 0;
}

dt[b-6fxonol1xh] {
    color: var(--muted);
}

dd[b-6fxonol1xh] {
    margin: 0;
    overflow-wrap: anywhere;
}

.chips[b-6fxonol1xh] {
    margin: 0 0 10px;
}

.verdict.pass[b-6fxonol1xh] {
    color: var(--ok);
}

.verdict.fail[b-6fxonol1xh] {
    color: var(--accent-ink);
}

.verdict.warn[b-6fxonol1xh] {
    color: var(--orange);
}

.trust[b-6fxonol1xh],
.recorded[b-6fxonol1xh],
.not-validated-note[b-6fxonol1xh] {
    margin: 10px 0;
    color: var(--muted);
    font-size: 14px;
}

.verdict[b-6fxonol1xh] {
    font-size: 14px;
}

.verdict.not-validated[b-6fxonol1xh] {
    color: var(--muted);
}

.signature + .signature[b-6fxonol1xh] {
    margin-top: 16px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

@media (max-width: 420px) {
    dl[b-6fxonol1xh] {
        grid-template-columns: minmax(0, 1fr);
    }

    dd[b-6fxonol1xh] {
        margin-bottom: 6px;
    }
}
/* /Products/PkiSuite/ValidationTreeView.razor.rz.scp.css */
/* PKI SDK's full validation tree, closed until opened. */

.tree[b-yxvb5y9kyc] {
    margin-top: 12px;
    font-size: 14px;
}

    .tree summary[b-yxvb5y9kyc] {
        cursor: pointer;
    }

    .tree ul[b-yxvb5y9kyc] {
        margin: 4px 0;
        padding-left: 18px;
        list-style: none;
    }

    .tree .node[b-yxvb5y9kyc] {
        padding: 2px 0;
        overflow-wrap: anywhere;
    }

.node.passed > .mark[b-yxvb5y9kyc],
.node.passed > details > summary .mark[b-yxvb5y9kyc] {
    color: var(--ok);
}

.node.error > .mark[b-yxvb5y9kyc],
.node.error > details > summary .mark[b-yxvb5y9kyc] {
    color: var(--accent-ink);
}

.node.warning > .mark[b-yxvb5y9kyc],
.node.warning > details > summary .mark[b-yxvb5y9kyc] {
    color: var(--orange);
}
/* /Products/Signer/EmbeddedSignatureResult.razor.rz.scp.css */
/* The embedded-signature Demo's result, in place of the frame. */

.result[b-tqe0f6de2l] {
    padding: 20px;
    border: 1px solid var(--ok);
    border-radius: 10px;
    background: var(--surface);
}

    .result h2[b-tqe0f6de2l] {
        margin: 0 0 8px;
        font-size: 20px;
    }

    .result p[b-tqe0f6de2l] {
        margin: 0 0 12px;
    }

.disclaimer[b-tqe0f6de2l] {
    padding: 10px 14px;
    border-left: 4px solid var(--orange);
    background: var(--bg);
}

.code[b-tqe0f6de2l] {
    overflow-wrap: anywhere;
}

    .code code[b-tqe0f6de2l] {
        font-family: var(--mono, monospace);
    }

button[b-tqe0f6de2l] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    button:hover[b-tqe0f6de2l] {
        background: var(--surface-2);
    }

    button:disabled[b-tqe0f6de2l] {
        cursor: default;
        opacity: 0.6;
    }

    button.primary[b-tqe0f6de2l] {
        border-color: var(--accent-fill);
        background: var(--accent-fill);
        color: var(--on-accent);
    }

        button.primary:hover[b-tqe0f6de2l] {
            background: var(--accent-fill);
            filter: brightness(1.08);
        }

.downloads[b-tqe0f6de2l] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.download-failed[b-tqe0f6de2l] {
    padding: 10px 14px;
    border: 1px solid var(--orange);
    border-radius: 8px;
    background: var(--bg);
}

.actions[b-tqe0f6de2l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

    .actions .again[b-tqe0f6de2l] {
        margin-left: auto;
    }
/* /Products/Signer/SignADocument.razor.rz.scp.css */
/* The Signer Demo: the three-step bar, then the step's own screen. Step 1's are SignerDocumentStep's own. */

.steps[b-f35zstvokz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    counter-reset: step;
    font-size: 14px;
}

    .steps li[b-f35zstvokz] {
        counter-increment: step;
        padding: 6px 12px;
        border: 1px solid var(--border);
        border-radius: 999px;
        color: var(--muted);
    }

        .steps li[b-f35zstvokz]::before {
            content: counter(step) ". ";
        }

        .steps li.current[b-f35zstvokz] {
            border-color: var(--accent);
            color: var(--text);
            font-weight: 600;
        }

        .steps li.done[b-f35zstvokz] {
            border-color: var(--ok);
            background: var(--ok-bg);
            color: var(--text);
        }

            .steps li.done[b-f35zstvokz]::before {
                content: "✓ ";
                content: "✓ " / "";
            }

.signer[b-f35zstvokz] {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

    .signer h2[b-f35zstvokz] {
        margin: 0 0 8px;
        font-size: 20px;
    }

.intro[b-f35zstvokz] {
    margin: 0 0 16px;
}

button[b-f35zstvokz] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    button:hover[b-f35zstvokz] {
        background: var(--surface-2);
    }

    button:disabled[b-f35zstvokz] {
        cursor: default;
        opacity: 0.6;
    }

    button.primary[b-f35zstvokz] {
        border-color: var(--accent-fill);
        background: var(--accent-fill);
        color: var(--on-accent);
    }

        button.primary:hover[b-f35zstvokz] {
            background: var(--accent-fill);
            filter: brightness(1.08);
        }

/* Step 2, Signer: the fields, the checks, the consents, then the review line above the submit. */

.fields[b-f35zstvokz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-bottom: 20px;
}

    .field.wide[b-f35zstvokz] {
        grid-column: 1 / -1;
    }

    .field label[b-f35zstvokz] {
        display: block;
        margin-bottom: 4px;
        font-weight: 600;
        font-size: 14px;
    }

    .field input[b-f35zstvokz] {
        box-sizing: border-box;
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        font: inherit;
    }

        .field input[aria-invalid="true"][b-f35zstvokz] {
            border-color: var(--orange);
        }

.hint[b-f35zstvokz],
.error[b-f35zstvokz] {
    margin: 4px 0 0;
    font-size: 13px;
}

.hint[b-f35zstvokz] {
    color: var(--muted);
}

.error[b-f35zstvokz] {
    color: var(--orange-ink);
}

.checks[b-f35zstvokz] {
    display: grid;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

    .checks legend[b-f35zstvokz] {
        margin-bottom: 8px;
        padding: 0;
        font-weight: 600;
    }

.check[b-f35zstvokz] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    cursor: pointer;
}

    .check.ticked[b-f35zstvokz] {
        border-color: var(--accent);
    }

    .check.fixed[b-f35zstvokz] {
        cursor: default;
    }

    .check input[b-f35zstvokz] {
        margin-top: 4px;
        accent-color: var(--accent);
    }

/* The certificate option, above the checks it switches off; while it is ticked, the checks are shown disabled. */
.certificate-option[b-f35zstvokz] {
    margin-bottom: 20px;
}

.checks.off .check[b-f35zstvokz] {
    opacity: 0.5;
    cursor: not-allowed;
}

.check-text[b-f35zstvokz] {
    display: grid;
    gap: 2px;
}

.check-name[b-f35zstvokz] {
    font-weight: 600;
}

.check-description[b-f35zstvokz],
.checks-note[b-f35zstvokz] {
    color: var(--muted);
    font-size: 14px;
}

.checks-note[b-f35zstvokz] {
    margin: 0;
}

.chip[b-f35zstvokz] {
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid var(--ok);
    border-radius: 999px;
    background: var(--ok-bg);
    color: var(--ok);
    font-weight: 400;
    font-size: 12px;
}

.consent[b-f35zstvokz] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 10px;
    margin-bottom: 12px;
}

    .consent input[b-f35zstvokz] {
        margin-top: 4px;
        accent-color: var(--accent);
    }

    .consent .error[b-f35zstvokz] {
        grid-column: 2;
    }

.submit[b-f35zstvokz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.send-failed[b-f35zstvokz] {
    flex-basis: 100%;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--orange);
    border-radius: 8px;
    background: var(--bg);
}

/* CpfAlreadyBeingUsed: the Demo's own error in place of the form, with Start over. */
.cpf-used .error[b-f35zstvokz] {
    margin: 0 0 16px;
    font-size: inherit;
    padding: 10px 14px;
    border: 1px solid var(--orange);
    border-radius: 8px;
    background: var(--bg);
}

.review[b-f35zstvokz] {
    flex-basis: 100%;
    margin: 0;
    overflow-wrap: anywhere;
}

.review-warning[b-f35zstvokz] {
    color: var(--orange-ink);
}

.back[b-f35zstvokz] {
    border-color: transparent;
    background: transparent;
    color: var(--muted);
}

@media (max-width: 600px) {
    .fields[b-f35zstvokz] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Products/Signer/SignerDocumentStep.razor.rz.scp.css */
/* Step 1, Document, of the Signer Demos: as "Sign a document" has always shown it. */

.document[b-urljurtx97] {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

    .document h2[b-urljurtx97] {
        margin: 0 0 8px;
        font-size: 20px;
    }

.intro[b-urljurtx97] {
    margin: 0 0 16px;
}

button[b-urljurtx97] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    button:hover[b-urljurtx97] {
        background: var(--surface-2);
    }

    button:disabled[b-urljurtx97] {
        cursor: default;
        opacity: 0.6;
    }

    button.primary[b-urljurtx97] {
        border-color: var(--accent-fill);
        background: var(--accent-fill);
        color: var(--on-accent);
    }

        button.primary:hover[b-urljurtx97] {
            background: var(--accent-fill);
            filter: brightness(1.08);
        }

.pick[b-urljurtx97] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}

    .pick.selected[b-urljurtx97] {
        border-color: var(--accent);
    }

    .pick input[b-urljurtx97] {
        margin-top: 4px;
        accent-color: var(--accent);
    }

.pick-text[b-urljurtx97] {
    display: grid;
    gap: 2px;
}

.pick-name[b-urljurtx97] {
    font-weight: 600;
}

.pick-details[b-urljurtx97],
.pick-note[b-urljurtx97] {
    color: var(--muted);
    font-size: 14px;
}

/* The visitor's own PDF: its file input and, under it, what became of the file picked. */

.pick.upload .pick-name[b-urljurtx97] {
    cursor: pointer;
}

.pick.upload[b-urljurtx97]  .file {
    max-width: 100%;
    margin-top: 8px;
}

.file-status:empty[b-urljurtx97] {
    display: none;
}

.error[b-urljurtx97] {
    margin: 4px 0 0;
    color: var(--orange-ink);
    font-size: 13px;
}
/* /Products/Signer/SignerStatusPanel.razor.rz.scp.css */
/* The Signer Demo's Status panel: step 3, Follow the flow. */

.status-panel[b-3x9k60gy55] {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

button[b-3x9k60gy55] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    button:hover[b-3x9k60gy55] {
        background: var(--surface-2);
    }

    button:disabled[b-3x9k60gy55] {
        cursor: default;
        opacity: 0.6;
    }

    button.primary[b-3x9k60gy55] {
        border-color: var(--accent-fill);
        background: var(--accent-fill);
        color: var(--on-accent);
    }

        button.primary:hover[b-3x9k60gy55] {
            background: var(--accent-fill);
            filter: brightness(1.08);
        }

.status-header[b-3x9k60gy55] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

    .status-header h2[b-3x9k60gy55] {
        margin: 0;
        font-size: 20px;
        overflow-wrap: anywhere;
    }

.badge[b-3x9k60gy55] {
    padding: 2px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

    .badge.pending[b-3x9k60gy55] {
        border-color: var(--pending);
        color: var(--text);
    }

    .badge.flowconcluded[b-3x9k60gy55],
    .badge.concluded[b-3x9k60gy55] {
        border-color: var(--ok);
        background: var(--ok-bg);
        color: var(--ok);
    }

    .badge.canceled[b-3x9k60gy55],
    .badge.expired[b-3x9k60gy55],
    .badge.refused[b-3x9k60gy55] {
        border-color: var(--orange);
        color: var(--orange-ink);
    }

.ids[b-3x9k60gy55] {
    margin: 4px 0 0;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 13px;
}

.flow-steps[b-3x9k60gy55] {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .flow-steps li[b-3x9k60gy55] {
        display: grid;
        gap: 2px;
        padding-left: 28px;
        position: relative;
    }

        .flow-steps li.done[b-3x9k60gy55]::before {
            content: "✓";
            content: "✓" / "";
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--ok-bg);
            color: var(--ok);
            font-size: 13px;
            line-height: 20px;
            text-align: center;
        }

        .flow-steps li.current[b-3x9k60gy55]::before,
        .flow-steps li.todo[b-3x9k60gy55]::before {
            content: "";
            position: absolute;
            left: 3px;
            top: 3px;
            width: 12px;
            height: 12px;
            border: 1px solid var(--border);
            border-radius: 50%;
        }

        .flow-steps li.current[b-3x9k60gy55]::before {
            border-color: var(--accent);
            background: var(--accent);
        }

        .flow-steps li.todo .title[b-3x9k60gy55] {
            color: var(--muted);
        }

.live[b-3x9k60gy55] {
    margin: 4px 0 16px;
    color: var(--muted);
    font-size: 13px;
}

.unreachable[b-3x9k60gy55],
.stopped[b-3x9k60gy55],
.download-failed[b-3x9k60gy55],
.action-failed[b-3x9k60gy55],
.signer-differs[b-3x9k60gy55] {
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--orange);
    border-radius: 8px;
    background: var(--bg);
}

.stopped[b-3x9k60gy55] {
    margin: 16px 0 0;
}

.signer-known[b-3x9k60gy55] {
    display: grid;
    gap: 6px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
}

    .signer-known div[b-3x9k60gy55] {
        display: grid;
        grid-template-columns: 7em minmax(0, 1fr);
        gap: 8px;
    }

    .signer-known dt[b-3x9k60gy55] {
        color: var(--muted);
    }

    .signer-known dd[b-3x9k60gy55] {
        margin: 0;
        overflow-wrap: anywhere;
    }

    /* A Dropsigner value that isn't the one the visitor typed: masked, and highlighted. */
    .signer-known mark[b-3x9k60gy55] {
        padding: 0 4px;
        border-radius: 4px;
        background: color-mix(in srgb, var(--orange) 18%, transparent);
        color: var(--text);
        font-family: var(--font-mono);
    }

.signer-differs[b-3x9k60gy55] {
    margin: -8px 0 16px;
    font-size: 14px;
}

.actions[b-3x9k60gy55] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

    .actions .download-failed[b-3x9k60gy55] {
        flex-basis: 100%;
        margin: 0;
    }

    .actions .start-over-failed[b-3x9k60gy55] {
        flex-basis: 100%;
        margin: 0;
    }

    /* Start over, offered at any point: quiet, at the end of the row. */
    .actions .start-over[b-3x9k60gy55] {
        margin-left: auto;
        border-color: transparent;
        background: transparent;
        color: var(--muted);
    }

.downloads[b-3x9k60gy55] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.title[b-3x9k60gy55] {
    font-weight: 600;
}

.detail[b-3x9k60gy55] {
    color: var(--muted);
    font-size: 14px;
    overflow-wrap: anywhere;
}

/* The corrections while the document is pending: the e-mail and the mobile, the resend, Remove the face match. */
.corrections[b-3x9k60gy55] {
    display: grid;
    gap: 14px;
    margin: 20px 0 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

    .correction label[b-3x9k60gy55] {
        display: block;
        margin-bottom: 4px;
        font-weight: 600;
        font-size: 14px;
    }

    .corrections .inline[b-3x9k60gy55] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .corrections input[b-3x9k60gy55] {
        box-sizing: border-box;
        flex: 1 1 14em;
        min-width: 0;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        font: inherit;
    }

        .corrections input[aria-invalid="true"][b-3x9k60gy55] {
            border-color: var(--orange);
        }

    .corrections .buttons[b-3x9k60gy55] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

.hint[b-3x9k60gy55],
.error[b-3x9k60gy55] {
    margin: 4px 0 0;
    font-size: 13px;
}

.hint[b-3x9k60gy55] {
    color: var(--muted);
}

.error[b-3x9k60gy55] {
    color: var(--orange-ink);
}

.action-note[b-3x9k60gy55] {
    margin: 0;
    font-size: 14px;
}

.action-failed[b-3x9k60gy55] {
    margin: 0;
}
/* /Products/Signer/SignWithoutLeavingYourPage.razor.rz.scp.css */
/* The embedded-signature Demo: the three-step bar, then the step's own screen, as "Sign a document" shows them. Step 1's
   are SignerDocumentStep's own, and the result's EmbeddedSignatureResult's. */

.steps[b-tfofs4ybom] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    counter-reset: step;
    font-size: 14px;
}

    .steps li[b-tfofs4ybom] {
        counter-increment: step;
        padding: 6px 12px;
        border: 1px solid var(--border);
        border-radius: 999px;
        color: var(--muted);
    }

        .steps li[b-tfofs4ybom]::before {
            content: counter(step) ". ";
        }

        .steps li.current[b-tfofs4ybom] {
            border-color: var(--accent);
            color: var(--text);
            font-weight: 600;
        }

        .steps li.done[b-tfofs4ybom] {
            border-color: var(--ok);
            background: var(--ok-bg);
            color: var(--text);
        }

            .steps li.done[b-tfofs4ybom]::before {
                content: "✓ ";
                content: "✓ " / "";
            }

.signer[b-tfofs4ybom],
.cpf-used[b-tfofs4ybom],
.sign[b-tfofs4ybom],
.differs[b-tfofs4ybom] {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

    .signer h2[b-tfofs4ybom],
    .cpf-used h2[b-tfofs4ybom] {
        margin: 0 0 8px;
        font-size: 20px;
    }

.cpf-used[b-tfofs4ybom] {
    display: grid;
    gap: 12px;
    justify-items: start;
}

.intro[b-tfofs4ybom] {
    margin: 0 0 16px;
}

button[b-tfofs4ybom] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    button:hover[b-tfofs4ybom] {
        background: var(--surface-2);
    }

    button:disabled[b-tfofs4ybom] {
        cursor: default;
        opacity: 0.6;
    }

    button.primary[b-tfofs4ybom] {
        border-color: var(--accent-fill);
        background: var(--accent-fill);
        color: var(--on-accent);
    }

        button.primary:hover[b-tfofs4ybom] {
            background: var(--accent-fill);
            filter: brightness(1.08);
        }

/* Step 2, Signer: who signs, then the review line above Continue to sign. */

.pick[b-tfofs4ybom] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}

    .pick.selected[b-tfofs4ybom] {
        border-color: var(--accent);
    }

    .pick input[b-tfofs4ybom] {
        margin-top: 4px;
        accent-color: var(--accent);
    }

.pick-text[b-tfofs4ybom] {
    display: grid;
    gap: 2px;
}

.pick-name[b-tfofs4ybom] {
    font-weight: 600;
}

.pick-note[b-tfofs4ybom] {
    color: var(--muted);
    font-size: 14px;
}

/* "Me, with my own data": the name, CPF and e-mail as "Sign a document" lays them out, then the line pointing to it for
   the mobile and the checks; then the consent that applies, or the line saying none is needed. */

.fields[b-tfofs4ybom] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-bottom: 12px;
}

    .field.wide[b-tfofs4ybom] {
        grid-column: 1 / -1;
    }

    .field label[b-tfofs4ybom] {
        display: block;
        margin-bottom: 4px;
        font-weight: 600;
        font-size: 14px;
    }

    .field input[b-tfofs4ybom] {
        box-sizing: border-box;
        width: 100%;
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg);
        color: var(--text);
        font: inherit;
    }

        .field input[aria-invalid="true"][b-tfofs4ybom] {
            border-color: var(--orange);
        }

.hint[b-tfofs4ybom],
.error[b-tfofs4ybom] {
    margin: 4px 0 0;
    font-size: 13px;
}

.hint[b-tfofs4ybom] {
    color: var(--muted);
}

.error[b-tfofs4ybom] {
    color: var(--orange-ink);
}

.no-checks[b-tfofs4ybom],
.consent-none[b-tfofs4ybom] {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 14px;
}

.consent[b-tfofs4ybom] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 10px;
    margin-bottom: 12px;
}

    .consent input[b-tfofs4ybom] {
        margin-top: 4px;
        accent-color: var(--accent);
    }

    .consent .error[b-tfofs4ybom] {
        grid-column: 2;
    }

@media (max-width: 600px) {
    .fields[b-tfofs4ybom] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.submit[b-tfofs4ybom] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.send-failed[b-tfofs4ybom],
.failed[b-tfofs4ybom],
.start-over-failed[b-tfofs4ybom],
.cpf-used .error[b-tfofs4ybom] {
    flex-basis: 100%;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--orange);
    border-radius: 8px;
    background: var(--bg);
}

.review[b-tfofs4ybom] {
    flex-basis: 100%;
    margin: 0;
    overflow-wrap: anywhere;
}

.back[b-tfofs4ybom] {
    border-color: transparent;
    background: transparent;
    color: var(--muted);
}

/* Step 3, Sign: the disclaimer, the status and location lines, then Dropsigner's frame across the Demo's column, at
   least 640 px tall (its size is set inside the container's shadow root, where the widget puts it). */

.sign[b-tfofs4ybom] {
    display: grid;
    gap: 12px;
}

    .sign p[b-tfofs4ybom] {
        margin: 0;
    }

.disclaimer[b-tfofs4ybom] {
    padding: 10px 14px;
    border-left: 4px solid var(--orange);
    background: var(--bg);
}

.location[b-tfofs4ybom],
.checking[b-tfofs4ybom] {
    color: var(--muted);
    font-size: 14px;
}

/* How the document ended or stalled, in place of the frame, then Start over, which sits above the frame while it shows. */

.stopped[b-tfofs4ybom] {
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    font-weight: 600;
}

.start-over-row[b-tfofs4ybom] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.frame[b-tfofs4ybom] {
    min-width: 0;
    min-height: 640px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg);
}

/* Around the frame: "Show the document" and Reload, the note once the embeds are used up, and Web PKI's setup notice. */

.frame-controls[b-tfofs4ybom] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.show-document[b-tfofs4ybom] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .show-document input[b-tfofs4ybom] {
        accent-color: var(--accent);
    }

.used-up[b-tfofs4ybom],
.setup-needed[b-tfofs4ybom] {
    padding: 10px 14px;
    border: 1px solid var(--orange);
    border-radius: 8px;
    background: var(--bg);
}

.setup-needed[b-tfofs4ybom] {
    display: grid;
    gap: 8px;
}

    .setup-needed .install[b-tfofs4ybom] {
        justify-self: start;
        color: var(--accent);
        font-weight: 600;
    }

/* The PSC confirm, the Demo's own: a modal dialog over the page, its two buttons side by side. */

.psc-confirm[b-tfofs4ybom] {
    width: min(420px, calc(100vw - 32px));
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
}

    .psc-confirm[b-tfofs4ybom]::backdrop {
        background: rgb(0 0 0 / 0.4);
    }

    .psc-confirm h2[b-tfofs4ybom] {
        margin: 0 0 8px;
        font-size: 18px;
    }

.psc-actions[b-tfofs4ybom] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

/* The stored-account check failed for the visitor's own data: the signer as Dropsigner knows them, each differing field
   masked and highlighted as "Sign a document"'s Status panel shows it, the note, then the two ways back to step 2. */

.differs h2[b-tfofs4ybom] {
    margin: 0 0 12px;
    font-size: 20px;
}

.signer-known[b-tfofs4ybom] {
    display: grid;
    gap: 6px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
}

    .signer-known div[b-tfofs4ybom] {
        display: grid;
        grid-template-columns: 7em minmax(0, 1fr);
        gap: 8px;
    }

    .signer-known dt[b-tfofs4ybom] {
        color: var(--muted);
    }

    .signer-known dd[b-tfofs4ybom] {
        margin: 0;
        overflow-wrap: anywhere;
    }

    .signer-known mark[b-tfofs4ybom] {
        padding: 0 4px;
        border-radius: 4px;
        background: color-mix(in srgb, var(--orange) 18%, transparent);
        color: var(--text);
        font-family: var(--font-mono);
    }

.differs .note[b-tfofs4ybom] {
    margin: 0 0 16px;
}

.ways-out[b-tfofs4ybom] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
/* /Products/WebPki/CertificatesInTheBrowser.razor.rz.scp.css */
/* The Web PKI Demo: the three-step bar, then the step's own screen (step 1 is the shared WebPkiInstallCheck). */

.steps[b-mtjguv3bqn] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    counter-reset: step;
    font-size: 14px;
}

    .steps li[b-mtjguv3bqn] {
        counter-increment: step;
        padding: 6px 12px;
        border: 1px solid var(--border);
        border-radius: 999px;
        color: var(--muted);
    }

        .steps li[b-mtjguv3bqn]::before {
            content: counter(step) ". ";
        }

        .steps li.current[b-mtjguv3bqn] {
            border-color: var(--accent);
            color: var(--text);
            font-weight: 600;
        }

        .steps li.done[b-mtjguv3bqn] {
            border-color: var(--ok);
            background: var(--ok-bg);
            color: var(--text);
        }

            .steps li.done[b-mtjguv3bqn]::before {
                content: "✓ ";
                content: "✓ " / "";
            }

button[b-mtjguv3bqn] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    button:hover[b-mtjguv3bqn] {
        background: var(--surface-2);
    }

    button:disabled[b-mtjguv3bqn] {
        cursor: default;
        opacity: 0.6;
    }

    button.primary[b-mtjguv3bqn] {
        border-color: var(--accent-fill);
        background: var(--accent-fill);
        color: var(--on-accent);
    }

        button.primary:hover[b-mtjguv3bqn] {
            background: var(--accent-fill);
            filter: brightness(1.08);
        }

/* Step 2, Choose a certificate: the list, the details of the one selected, the privacy note. */

.choose[b-mtjguv3bqn] {
    margin-top: 16px;
}

.choose-head[b-mtjguv3bqn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

    .choose-head h2[b-mtjguv3bqn] {
        margin: 0;
        font-size: 20px;
    }

.listing[b-mtjguv3bqn] {
    color: var(--muted);
}

.list-failed[b-mtjguv3bqn],
.details[b-mtjguv3bqn] {
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

    .list-failed p[b-mtjguv3bqn] {
        margin: 0 0 12px;
    }

.certificates[b-mtjguv3bqn] {
    display: grid;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.certificate[b-mtjguv3bqn] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
}

    .certificate:hover[b-mtjguv3bqn] {
        background: var(--surface-2);
    }

    .certificate:has(input:checked)[b-mtjguv3bqn] {
        border-color: var(--accent);
    }

    .certificate input[b-mtjguv3bqn] {
        margin-top: 4px;
        accent-color: var(--accent);
    }

.summary[b-mtjguv3bqn] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.holder[b-mtjguv3bqn] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.issuer[b-mtjguv3bqn] {
    overflow-wrap: anywhere;
}

.meta[b-mtjguv3bqn] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    color: var(--muted);
    font-size: 14px;
}

.chips[b-mtjguv3bqn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip[b-mtjguv3bqn] {
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
}

    .chip.expired[b-mtjguv3bqn] {
        border-color: var(--orange);
        color: var(--accent-ink);
    }

    .chip.remote[b-mtjguv3bqn] {
        border-color: var(--accent);
    }

.details .hint[b-mtjguv3bqn] {
    margin: 0;
    color: var(--muted);
}

.details dl[b-mtjguv3bqn] {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 6px 16px;
    margin: 0 0 16px;
}

.details dt[b-mtjguv3bqn] {
    color: var(--muted);
}

.details dd[b-mtjguv3bqn] {
    margin: 0;
    overflow-wrap: anywhere;
}

.details code[b-mtjguv3bqn] {
    font-family: var(--font-mono);
    font-size: 13px;
}

.download-failed[b-mtjguv3bqn] {
    margin: 12px 0 0;
    color: var(--accent-ink);
}

.privacy[b-mtjguv3bqn] {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 14px;
}

@media (max-width: 480px) {
    .details dl[b-mtjguv3bqn] {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .details dd[b-mtjguv3bqn] {
        margin-bottom: 8px;
    }
}

/* Step 3: Prove you hold the key. */
.prove[b-mtjguv3bqn] {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

    .prove h2[b-mtjguv3bqn] {
        margin: 0 0 8px;
        font-size: 20px;
    }

    .prove .intro[b-mtjguv3bqn] {
        margin: 0 0 16px;
    }

.proving[b-mtjguv3bqn],
.pin-wait[b-mtjguv3bqn],
.phone-wait[b-mtjguv3bqn],
.note[b-mtjguv3bqn],
.prove-failed[b-mtjguv3bqn] {
    margin: 0;
}

    .pin-wait p[b-mtjguv3bqn],
    .phone-wait p[b-mtjguv3bqn],
    .note p[b-mtjguv3bqn],
    .prove-failed p[b-mtjguv3bqn] {
        margin: 0 0 12px;
    }

.pin-note[b-mtjguv3bqn],
.proving[b-mtjguv3bqn] {
    color: var(--muted);
}

.note[b-mtjguv3bqn] {
    color: var(--muted);
}

.prove-failed p[b-mtjguv3bqn] {
    color: var(--accent-ink);
}

.result h3[b-mtjguv3bqn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 18px;
}

.result.pass .headline[b-mtjguv3bqn] {
    color: var(--ok);
}

.chip.test-pki[b-mtjguv3bqn] {
    border-color: var(--accent);
    font-weight: 400;
}

.checks[b-mtjguv3bqn] {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.check[b-mtjguv3bqn] {
    display: grid;
    grid-template-columns: 1.5em minmax(160px, max-content) 1fr;
    gap: 8px;
    align-items: baseline;
}

    .check .mark[b-mtjguv3bqn] {
        font-weight: 700;
    }

    .check.pass .mark[b-mtjguv3bqn] {
        color: var(--ok);
    }

    .check.fail .mark[b-mtjguv3bqn] {
        color: var(--accent-ink);
    }

    .check .reason[b-mtjguv3bqn] {
        color: var(--muted);
    }

.trust[b-mtjguv3bqn] {
    margin: 0 0 16px;
    color: var(--muted);
    font-size: 14px;
}

.result-actions[b-mtjguv3bqn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

@media (max-width: 480px) {
    .check[b-mtjguv3bqn] {
        grid-template-columns: 1.5em 1fr;
    }

        .check .reason[b-mtjguv3bqn] {
            grid-column: 2;
        }
}
/* /Products/WebPki/NoCertificatesHelp.razor.rz.scp.css */
.no-certificates[b-v7drp87dfn] {
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

    .no-certificates p[b-v7drp87dfn] {
        margin: 0 0 12px;
    }

        .no-certificates p:last-child[b-v7drp87dfn] {
            margin-bottom: 0;
        }

.not-working[b-v7drp87dfn] {
    color: var(--muted);
    font-size: 14px;
}

    .not-working p[b-v7drp87dfn] {
        margin: 0;
    }

    .not-working ul[b-v7drp87dfn] {
        margin: 4px 0 0;
        padding-left: 20px;
    }
/* /Products/WebPki/WebPkiInstallCheck.razor.rz.scp.css */
/* The shared Web PKI install check: looking for Web PKI, Install / Update, ready, unavailable, failed. The stops are
   WebPkiStop's. */

.checking[b-glaus8euok] {
    color: var(--muted);
}

.ready[b-glaus8euok] {
    color: var(--ok);
    font-weight: 600;
}

.install-screen[b-glaus8euok],
.unavailable[b-glaus8euok],
.failed[b-glaus8euok] {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

    .install-screen h2[b-glaus8euok],
    .unavailable h2[b-glaus8euok],
    .failed h2[b-glaus8euok] {
        margin: 0 0 8px;
        font-size: 20px;
    }

    .install-screen p[b-glaus8euok],
    .unavailable p[b-glaus8euok],
    .failed p[b-glaus8euok] {
        margin: 0 0 16px;
    }

.browsers[b-glaus8euok] {
    color: var(--muted);
    font-size: 14px;
}

button[b-glaus8euok] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    button:hover[b-glaus8euok] {
        background: var(--surface-2);
    }

    button.primary[b-glaus8euok] {
        border-color: var(--accent-fill);
        background: var(--accent-fill);
        color: var(--on-accent);
    }

        button.primary:hover[b-glaus8euok] {
            background: var(--accent-fill);
            filter: brightness(1.08);
        }
/* /Products/WebPki/WebPkiStop.razor.rz.scp.css */
/* The Web PKI Demo's stop, as the install check shows it and the e-CPF Demo in place of Issue. */

.stop[b-4bchpsfa52] {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

    .stop h2[b-4bchpsfa52] {
        margin: 0 0 8px;
        font-size: 20px;
    }

    .stop p[b-4bchpsfa52] {
        margin: 0 0 16px;
    }

button[b-4bchpsfa52] {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

    button:hover[b-4bchpsfa52] {
        background: var(--surface-2);
    }

/* For a moment after a click, the module's data-copied swaps the label for "Link copied" or "Couldn't copy". */
.copy-link[data-copied] .label[b-4bchpsfa52] {
    display: none;
}

.copy-link[data-copied="done"][b-4bchpsfa52]::after {
    content: attr(data-done);
    color: var(--ok);
}

.copy-link[data-copied="failed"][b-4bchpsfa52]::after {
    content: attr(data-failed);
    color: var(--accent-ink);
}
/* /Usage/UsageDashboard.razor.rz.scp.css */
/* The Usage dashboard's sign-in and its signed-in bar. The certificate cards follow the PKI Suite Demo's. */

.staff-sign-in[b-kdq4akaxiu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.choose .head[b-kdq4akaxiu],
.signed-in-bar[b-kdq4akaxiu],
.sign-in-bar[b-kdq4akaxiu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.choose .head[b-kdq4akaxiu] {
    justify-content: space-between;
    margin-bottom: 10px;
}

    .choose .head h2[b-kdq4akaxiu] {
        margin: 0;
        font-size: 20px;
    }

.cert-cards[b-kdq4akaxiu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cert-card[b-kdq4akaxiu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    height: 100%;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .cert-card.on[b-kdq4akaxiu] {
        border: 2px solid var(--accent);
        padding: 13px;
    }

    .cert-card:disabled[b-kdq4akaxiu] {
        cursor: not-allowed;
    }

    .cert-card .holder[b-kdq4akaxiu] {
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .cert-card .issuer[b-kdq4akaxiu] {
        color: var(--muted);
        font-size: 13px;
        overflow-wrap: anywhere;
    }

.listing[b-kdq4akaxiu],
.no-certificates[b-kdq4akaxiu] {
    color: var(--muted);
}

.refusal[b-kdq4akaxiu],
.list-failed[b-kdq4akaxiu] {
    margin: 0;
    color: var(--accent-ink);
}

.signed-in-bar[b-kdq4akaxiu] {
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

    .signed-in-bar .signed-in-as[b-kdq4akaxiu] {
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .signed-in-bar .read-at[b-kdq4akaxiu] {
        color: var(--muted);
        font-size: 13px;
    }

    .signed-in-bar .sign-out[b-kdq4akaxiu] {
        margin-left: auto;
    }

.reading[b-kdq4akaxiu],
.read-failed[b-kdq4akaxiu] {
    margin: 16px 0 0;
}

.reading[b-kdq4akaxiu] {
    color: var(--muted);
}

.read-failed[b-kdq4akaxiu] {
    color: var(--accent-ink);
}
/* /Usage/UsageMonthTables.razor.rz.scp.css */
/* The Usage dashboard's months: one collapsible section each, its table scrolling sideways on a narrow screen. */

.usage-month[b-k5j0o3gudq] {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

    .usage-month > summary[b-k5j0o3gudq] {
        padding: 12px 16px;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
    }

    .usage-month[open] > summary[b-k5j0o3gudq] {
        border-bottom: 1px solid var(--border);
    }

.usage-table[b-k5j0o3gudq] {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

    .usage-table th[b-k5j0o3gudq],
    .usage-table td[b-k5j0o3gudq] {
        padding: 8px 16px;
        text-align: right;
        white-space: nowrap;
    }

    .usage-table th:first-child[b-k5j0o3gudq] {
        width: 100%;
        text-align: left;
        white-space: normal;
        font-weight: 400;
    }

    .usage-table thead th[b-k5j0o3gudq] {
        color: var(--muted);
        font-size: 13px;
        font-weight: 600;
    }

    .usage-table tr.product th[b-k5j0o3gudq] {
        padding-top: 14px;
        text-align: left;
        font-weight: 600;
    }

    /* A Demo's outcome counts: a smaller table indented under its row. */
    .usage-table tr.outcomes > td[b-k5j0o3gudq] {
        padding: 0 16px 12px 32px;
        text-align: left;
        white-space: normal;
    }

.outcome-table[b-k5j0o3gudq] {
    width: 100%;
    border-collapse: collapse;
    border-left: 2px solid var(--border);
    font-size: 14px;
}

    .usage-table .outcome-table th[b-k5j0o3gudq],
    .usage-table .outcome-table td[b-k5j0o3gudq] {
        padding: 4px 12px;
    }

    .usage-table .outcome-table tr.outcome-group th[b-k5j0o3gudq] {
        padding-top: 10px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 600;
        text-align: left;
    }

.usage-note[b-k5j0o3gudq] {
    margin: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
}