/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Chrome for the signed-in portal, measured off core-scientific.com: a dark utility strip,
   a 91px white header, Montserrat 700 uppercase nav at 14px, and the plum the marketing
   site uses for headings rather than the near-black of its body copy. */

.portal-shell[b-8sux28unoy] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Utility strip. Measured off core-scientific.com: a near-black navy between a 5px rule
   above and a 1px rule below, both in the lighter blue, and a CTA that is Source Sans in
   sentence case rather than the Montserrat the nav uses. */

.utility-bar[b-8sux28unoy] {
    background: var(--topbar);
    border-top: 5px solid var(--topbar-rule);
    border-bottom: 1px solid var(--topbar-rule);
    color: var(--ink-faint);
    font-size: 0.875rem;
}

.utility-inner[b-8sux28unoy], .header-inner[b-8sux28unoy], .footer-inner[b-8sux28unoy] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 21px;
}

.utility-inner[b-8sux28unoy] {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    min-height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    flex-wrap: wrap;
}

.utility-fact[b-8sux28unoy] {
    color: var(--ink-faint);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

a.utility-fact:hover[b-8sux28unoy] { color: #fff; }

.utility-icon[b-8sux28unoy] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: currentColor;
}

.utility-link[b-8sux28unoy] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    padding-left: 2.1875rem;
    border-left: 1px solid var(--topbar-rule);
    color: var(--ink-faint);
    text-decoration: none;
    white-space: nowrap;
}

.utility-link:hover[b-8sux28unoy] { color: #fff; }

.utility-chevron[b-8sux28unoy] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Header */

.site-header[b-8sux28unoy] { background: var(--card); border-bottom: 1px solid var(--line); }

.header-inner[b-8sux28unoy] {
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: 91px;
    flex-wrap: wrap;
}

.brand[b-8sux28unoy] { display: inline-flex; flex: 0 0 auto; }
.brand img[b-8sux28unoy] { height: 38px; width: auto; }

.primary-nav[b-8sux28unoy] {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-wrap: wrap;
}

.primary-nav[b-8sux28unoy]  a {
    font-family: var(--heading);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--ink-heading);
    text-decoration: none;
    padding: 0.35rem 0;
    border-bottom: 2px solid transparent;
}

.primary-nav[b-8sux28unoy]  a:hover { color: var(--brand-orange); }

/* The marketing site boxes its current section; a rule reads the same at this size
   without the box fighting the header's own border. */
.primary-nav[b-8sux28unoy]  a.active {
    color: var(--brand-orange);
    border-bottom-color: var(--brand-orange);
}

.account[b-8sux28unoy] { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0 auto; }
.account-name[b-8sux28unoy] { color: var(--ink-muted); font-size: 0.875rem; }

.account-signout[b-8sux28unoy] {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--heading);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--brand-orange-dark);
}

.account-signout:hover[b-8sux28unoy] { text-decoration: underline; }

/* Page */

.page[b-8sux28unoy] {
    flex: 1 1 auto;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem 21px 4rem;
}

/* Footer. The marketing site closes on a dark grey bar: copyright left, legal links
   right, both small and white. */

.site-footer[b-8sux28unoy] {
    background: #3d3d3d;
    color: #fff;
    font-size: 0.8rem;
}

.footer-inner[b-8sux28unoy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 15px;
    padding-bottom: 15px;
    flex-wrap: wrap;
}

.footer-copyright[b-8sux28unoy] { color: #fff; }

.footer-legal[b-8sux28unoy] { display: flex; gap: 1.5rem; }

.site-footer a[b-8sux28unoy] { color: #fff; text-decoration: none; }
.site-footer a:hover[b-8sux28unoy] { text-decoration: underline; }

/* The nav and the account block stop fitting on one line well before phone width, so the
   nav drops to a full row of its own while the logo and the account stay paired. */
@media (max-width: 900px) {
    .header-inner[b-8sux28unoy] {
        min-height: 0;
        padding-top: 1rem;
        padding-bottom: 1rem;
        row-gap: 0.75rem;
    }

    .primary-nav[b-8sux28unoy] {
        order: 3;
        flex-basis: 100%;
        gap: 1.25rem;
    }
}

@media (max-width: 600px) {
    .utility-inner[b-8sux28unoy] { gap: 0.75rem 1.25rem; }

    /* The address is the first thing worth losing: the phone number and the way back are
       both actionable, and it is in the footer anyway. */
    .utility-inner > .utility-fact:first-child[b-8sux28unoy] { display: none; }

    .utility-link[b-8sux28unoy] {
        margin-left: auto;
        padding-left: 1.25rem;
    }

    .primary-nav[b-8sux28unoy] { gap: 0.9rem; font-size: 0.8125rem; }
    .primary-nav[b-8sux28unoy]  a { font-size: 0.8125rem; }

    .account-name[b-8sux28unoy] { display: none; }

    .footer-inner[b-8sux28unoy] { justify-content: center; text-align: center; }
    .footer-legal[b-8sux28unoy] { gap: 1.25rem; }
}

@media (max-width: 380px) {
    .brand img[b-8sux28unoy] { height: 30px; }
    .utility-inner[b-8sux28unoy] { font-size: 0.8125rem; }
}

#blazor-error-ui[b-8sux28unoy] {
    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-8sux28unoy] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }