/*
 * Company portal styling.
 *
 * Self-contained on purpose: the portal is the page an unauthenticated visitor sees, so it must
 * not depend on the trading application's theme engine, which only initialises once a user is
 * inside the dashboard.
 */

:root {
    --portal-bg: #0b1220;
    --portal-bg-accent: #12203a;
    --portal-surface: rgba(255, 255, 255, 0.04);
    --portal-surface-solid: #16233c;
    --portal-border: rgba(255, 255, 255, 0.10);
    --portal-text: #e8eefc;
    --portal-text-muted: #9fb0cc;
    --portal-brand: #2f81f7;
    --portal-brand-strong: #1f6feb;
    --portal-success: #2ea043;
    --portal-danger: #f85149;
    --portal-warning: #d29922;
    --portal-radius: 12px;
    --portal-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);

    /*
     * Investment-brand palette: deep navy ground, gold accent. Used by the login page, which is
     * the firm's public face, rather than by the operational pages behind the gateway.
     */
    --portal-navy: #0a1533;
    --portal-navy-deep: #060e22;
    --portal-gold: #e3c06a;
    --portal-gold-strong: #f0d089;
    --portal-gold-dim: rgba(227, 192, 106, 0.55);
    --portal-gold-line: rgba(227, 192, 106, 0.24);
    --portal-gold-wash: rgba(227, 192, 106, 0.08);
    --portal-serif: "Georgia", "Times New Roman", "Cambria", serif;
}

.portal-root {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(1100px 520px at 12% -10%, var(--portal-bg-accent) 0%, transparent 60%),
        radial-gradient(900px 480px at 100% 0%, #1b2a4a 0%, transparent 55%),
        var(--portal-bg);
    color: var(--portal-text);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Header ------------------------------------------------------------------ */

/*
 * Solid navy rather than a translucent pane: the header is the firm's masthead and has to read the
 * same on every portal page, including the login page, where a translucent header would take its
 * tone from whatever part of the backdrop photograph happened to sit behind it.
 */
.portal-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.9rem 2.25rem;
    border-bottom: 1px solid var(--portal-gold-line);
    background: var(--portal-navy-deep);
}

.portal-brand {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    text-decoration: none;
    color: inherit;
}

.portal-brand-mark {
    width: auto;
    height: 62px;
    border-radius: 8px;
    object-fit: contain;
}

/* Hairline between the mark and the wordmark, as on the masthead artwork. */
.portal-brand-rule {
    width: 1px;
    align-self: stretch;
    min-height: 52px;
    background: var(--portal-gold-line);
}

.portal-brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    line-height: 1.1;
}

.portal-brand-name {
    font-family: var(--portal-serif);
    font-size: 1.95rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #ffffff;
}

/* Sentence-case on purpose: the tagline is a phrase, not a label, so it is not upper-cased. */
.portal-brand-tagline {
    font-size: 0.82rem;
    color: var(--portal-gold);
    letter-spacing: 0.02em;
}

/*
 * The navigation and the account controls form one right-hand group, so the auto margin goes on the
 * navigation and the two then sit side by side however wide the brand happens to render.
 */
.portal-nav {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    margin-left: auto;
}

.portal-nav-link {
    text-decoration: none;
    color: var(--portal-text);
    font-size: 1rem;
    letter-spacing: 0.01em;
    padding: 0.35rem 0;
    border-bottom: 1px solid transparent;
}

.portal-nav-link:hover,
.portal-nav-link:focus-visible {
    color: var(--portal-gold);
    border-bottom-color: var(--portal-gold-dim);
}

.portal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.portal-identity {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}

.portal-identity-name {
    font-size: 0.9rem;
    font-weight: 600;
}

.portal-identity-role {
    font-size: 0.72rem;
    color: var(--portal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ---- Layout ------------------------------------------------------------------ */

.portal-main {
    flex: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 3rem 2rem 4rem;
}

.portal-footer {
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--portal-border);
    color: var(--portal-text-muted);
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    justify-content: space-between;
}

.portal-footer a {
    color: var(--portal-text-muted);
}

/* ---- Hero -------------------------------------------------------------------- */

.portal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}

@media (max-width: 900px) {
    .portal-hero {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .portal-main {
        padding: 2rem 1.25rem 3rem;
    }

    .portal-header {
        flex-wrap: wrap;
        gap: 0.75rem 1.25rem;
        padding: 0.85rem 1.25rem;
    }

    .portal-brand-mark {
        height: 46px;
    }

    .portal-brand-rule {
        min-height: 40px;
    }

    .portal-brand-name {
        font-size: 1.45rem;
    }

    /*
     * Below this width the brand alone fills the row, so the navigation drops to a line of its own
     * and the auto margin that held it right would leave it stranded against the edge.
     */
    .portal-nav {
        order: 3;
        flex-basis: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        gap: 0.5rem 1.5rem;
    }
}

.portal-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--portal-brand);
    margin-bottom: 0.9rem;
}

.portal-hero h1 {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.15;
    margin: 0 0 1rem;
    font-weight: 700;
}

.portal-hero p {
    color: var(--portal-text-muted);
    font-size: 1.02rem;
    line-height: 1.65;
    margin: 0 0 1.75rem;
    max-width: 56ch;
}

.portal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
}

/* ---- Cards ------------------------------------------------------------------- */

.portal-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius);
    padding: 1.65rem;
    box-shadow: var(--portal-shadow);
    backdrop-filter: blur(6px);
}

.portal-card h2 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
}

.portal-card > p {
    color: var(--portal-text-muted);
    font-size: 0.9rem;
    margin: 0 0 1.25rem;
    line-height: 1.6;
}

.portal-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.portal-feature-list li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 0.9rem;
    color: var(--portal-text-muted);
}

.portal-feature-list .portal-feature-icon {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(47, 129, 247, 0.14);
    border: 1px solid rgba(47, 129, 247, 0.3);
    font-size: 0.85rem;
}

.portal-feature-list strong {
    display: block;
    color: var(--portal-text);
    font-weight: 600;
    margin-bottom: 0.15rem;
}

/* ---- Buttons ----------------------------------------------------------------- */

.portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.7rem 1.35rem;
    border-radius: 9px;
    border: 1px solid transparent;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease;
}

.portal-btn:active {
    transform: translateY(1px);
}

.portal-btn-primary {
    background: var(--portal-brand-strong);
    color: #fff;
}

.portal-btn-primary:hover {
    background: var(--portal-brand);
    color: #fff;
}

.portal-btn-secondary {
    background: transparent;
    border-color: var(--portal-border);
    color: var(--portal-text);
}

.portal-btn-secondary:hover {
    border-color: var(--portal-brand);
    color: #fff;
}

.portal-btn-success {
    background: var(--portal-success);
    color: #fff;
}

.portal-btn-success:hover {
    background: #3fb950;
    color: #fff;
}

/* Brand call-to-action: solid gold on navy, the primary action of the login page. */
.portal-btn-gold {
    background: linear-gradient(180deg, var(--portal-gold-strong) 0%, var(--portal-gold) 100%);
    color: var(--portal-navy-deep);
    border-color: rgba(255, 255, 255, 0.25);
    letter-spacing: 0.02em;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.portal-btn-gold:hover {
    background: var(--portal-gold-strong);
    color: var(--portal-navy-deep);
}

.portal-btn-gold:focus-visible {
    outline: 2px solid var(--portal-gold-strong);
    outline-offset: 3px;
}

.portal-btn-block {
    width: 100%;
}

.portal-btn-link {
    background: none;
    border: none;
    color: var(--portal-text-muted);
    font: inherit;
    cursor: pointer;
    padding: 0.35rem 0.2rem;
    text-decoration: underline;
}

.portal-btn-link:hover {
    color: var(--portal-text);
}

/* ---- Badges ------------------------------------------------------------------ */

.portal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid var(--portal-border);
    color: var(--portal-text-muted);
}

.portal-badge-admin {
    color: #7ee787;
    border-color: rgba(46, 160, 67, 0.45);
    background: rgba(46, 160, 67, 0.12);
}

.portal-badge-user {
    color: #d29922;
    border-color: rgba(210, 153, 34, 0.4);
    background: rgba(210, 153, 34, 0.1);
}

/* ---- Auth / message panels --------------------------------------------------- */

.portal-panel {
    max-width: 460px;
    margin: 2rem auto;
}

.portal-panel-wide {
    max-width: 620px;
}

.portal-panel h1 {
    font-size: 1.5rem;
    margin: 0 0 0.4rem;
}

.portal-panel .portal-panel-sub {
    color: var(--portal-text-muted);
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

.portal-field {
    display: block;
    margin-bottom: 1.1rem;
}

.portal-field span {
    display: block;
    font-size: 0.8rem;
    color: var(--portal-text-muted);
    margin-bottom: 0.4rem;
    letter-spacing: 0.04em;
}

.portal-field input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: 9px;
    border: 1px solid var(--portal-border);
    background: rgba(0, 0, 0, 0.25);
    color: var(--portal-text);
    font-size: 0.95rem;
}

.portal-field input:focus {
    outline: none;
    border-color: var(--portal-brand);
    box-shadow: 0 0 0 3px rgba(47, 129, 247, 0.18);
}

.portal-alert {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border-radius: 9px;
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}

.portal-alert-error {
    background: rgba(248, 81, 73, 0.12);
    border-color: rgba(248, 81, 73, 0.35);
    color: #ffb4ae;
}

.portal-alert-warning {
    background: rgba(210, 153, 34, 0.12);
    border-color: rgba(210, 153, 34, 0.35);
    color: #f0c674;
}

.portal-alert-info {
    background: rgba(47, 129, 247, 0.1);
    border-color: rgba(47, 129, 247, 0.3);
    color: #a5c9ff;
}

.portal-status-icon {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 0.75rem;
    display: block;
}

.portal-meta {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--portal-border);
    font-size: 0.8rem;
    color: var(--portal-text-muted);
    line-height: 1.7;
}

.portal-meta code {
    color: var(--portal-text);
    background: rgba(0, 0, 0, 0.3);
    padding: 0.1rem 0.35rem;
    border-radius: 5px;
}

/* ---- Login page -------------------------------------------------------------- */

/*
 * The login screen carries the firm's branding - navy ground, gold accents, serif display type -
 * while everything behind the gateway stays on the neutral operational theme above. Rules are
 * namespaced under .portal-login so restyling the front door cannot leak into the dashboard.
 */

/*
 * Full-bleed brand backdrop, painted by Login.razor only.
 *
 * It is fixed to the viewport and sits above .portal-root's gradient but below every piece of
 * content. Two scrim layers ride on top of the artwork: a horizontal one that darkens the left,
 * where the headline and pillar cards sit over the tree, and a vertical one that anchors the
 * footer against the skyline. Contrast comes from these layers and from the card fills, never
 * from the image, so a missing or slow asset degrades to flat navy rather than to unreadable text.
 */
.portal-login-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--portal-navy-deep);
    background-image:
        linear-gradient(180deg, rgba(6, 14, 34, 0.55) 0%, rgba(6, 14, 34, 0.18) 40%, rgba(6, 14, 34, 0.80) 100%),
        linear-gradient(90deg, rgba(6, 14, 34, 0.93) 0%, rgba(6, 14, 34, 0.72) 38%, rgba(6, 14, 34, 0.34) 70%, rgba(6, 14, 34, 0.52) 100%),
        var(--portal-login-bg, none);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/*
 * The backdrop is positioned, so the chrome has to be positioned too to keep painting above it.
 * Harmless on the other portal pages, which never render a backdrop.
 */
.portal-header,
.portal-footer {
    position: relative;
    z-index: 1;
}

.portal-login {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 3.25rem;
    align-items: center;
    margin: 1rem 0 2rem;
}

.portal-login-brand {
    min-width: 0;
}

/*
 * No access panel: the brand page has the width to itself, so it centres and the pillars spread
 * into a single row. This is the state an anonymous visitor lands in; asking to sign in navigates
 * to the login URL, which renders the same page with the panel and drops back to two columns.
 */
.portal-login-solo {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
}

.portal-login-solo .portal-login-brand {
    max-width: 62rem;
}

.portal-login-solo .portal-login-lede {
    max-width: 62ch;
    margin-inline: auto;
}

.portal-login-solo .portal-login-rule {
    margin-inline: auto;
}

.portal-login-solo .portal-login-pillars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portal-login-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.portal-login-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.15rem;
    border-radius: 999px;
    border: 1px solid var(--portal-gold-line);
    background: var(--portal-gold-wash);
    color: var(--portal-gold);
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    margin-bottom: 1.5rem;
}

.portal-login-headline {
    font-family: var(--portal-serif);
    font-size: clamp(2.1rem, 5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 0.9rem;
    color: #fff;
}

.portal-login-tagline {
    font-family: var(--portal-serif);
    font-size: clamp(1.1rem, 2.2vw, 1.6rem);
    color: var(--portal-gold);
    margin: 0 0 1rem;
}

.portal-login-rule {
    display: block;
    width: 68px;
    height: 2px;
    background: var(--portal-gold-dim);
    margin-bottom: 1.35rem;
}

.portal-login-lede {
    color: var(--portal-text-muted);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 54ch;
    margin: 0 0 2.25rem;
}

.portal-login-pillars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* Tinted navy rather than white-alpha: these tiles sit over artwork, not over a flat ground. */
.portal-login-pillars li {
    padding: 1.15rem 1.1rem;
    border: 1px solid var(--portal-gold-line);
    border-radius: var(--portal-radius);
    background: linear-gradient(180deg, rgba(10, 21, 51, 0.72) 0%, rgba(6, 14, 34, 0.62) 100%);
    backdrop-filter: blur(4px);
    text-align: center;
}

.portal-login-pillar-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 0.7rem;
    border-radius: 50%;
    border: 1px solid var(--portal-gold-line);
    background: var(--portal-gold-wash);
    font-size: 1.15rem;
}

.portal-login-pillars strong {
    display: block;
    font-family: var(--portal-serif);
    font-weight: 400;
    font-size: 1.02rem;
    color: #fff;
    margin-bottom: 0.35rem;
}

.portal-login-pillars span:not(.portal-login-pillar-icon) {
    display: block;
    color: var(--portal-text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

/* ---- Login panel ---- */

/*
 * Near-opaque on purpose. The card overlays the brightest part of the artwork - the skyline and
 * the rising plot - and form fields have to stay legible regardless of what is behind them.
 */
.portal-login-panel {
    border-color: var(--portal-gold-line);
    background:
        linear-gradient(180deg, rgba(227, 192, 106, 0.07) 0%, rgba(227, 192, 106, 0) 45%),
        rgba(6, 14, 34, 0.88);
    backdrop-filter: blur(10px);
    padding: 2rem 1.9rem;
}

.portal-login-mark {
    display: block;
    width: 52px;
    height: 52px;
    margin-bottom: 1.1rem;
    border-radius: 12px;
    border: 1px solid var(--portal-gold-line);
    overflow: hidden;
}

.portal-login-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.portal-login-panel h2 {
    font-family: var(--portal-serif);
    font-weight: 400;
    font-size: 1.75rem;
    color: #fff;
    margin: 0 0 0.5rem;
}

.portal-login-panel .portal-login-panel-sub {
    color: var(--portal-text-muted);
    font-size: 0.88rem;
    line-height: 1.65;
    margin: 0 0 1.6rem;
}

.portal-login-panel .portal-field input:focus {
    border-color: var(--portal-gold);
    box-shadow: 0 0 0 3px rgba(227, 192, 106, 0.18);
}

.portal-login-help {
    margin: 1rem 0 0;
    font-size: 0.8rem;
    color: var(--portal-text-muted);
}

.portal-login-help a {
    color: var(--portal-gold);
}

@media (max-width: 980px) {
    .portal-login {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }

    /*
     * Stacked, the content spans the full width and the cover crop zooms into the busiest part of
     * the artwork, so the horizontal scrim is replaced by an even, heavier one.
     */
    .portal-login-backdrop {
        background-image:
            linear-gradient(180deg, rgba(6, 14, 34, 0.86) 0%, rgba(6, 14, 34, 0.74) 45%, rgba(6, 14, 34, 0.90) 100%),
            var(--portal-login-bg, none);
    }

    /* A four-across row of pillars does not survive tablet width. */
    .portal-login-solo .portal-login-pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .portal-login-pillars,
    .portal-login-solo .portal-login-pillars {
        grid-template-columns: 1fr;
    }
}

/* ---- Dashboard access bar ---------------------------------------------------- */

/*
 * A slim identity strip rendered above the trading UI by DashboardGuard. It lives in the web
 * host rather than in the shared App layout so the MAUI build, which has no portal and no
 * session, is untouched by any of this.
 */
.portal-access-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.4rem 1rem;
    background: #0b1220;
    color: #cbd8ef;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 0.78rem;
}

.portal-access-bar .portal-access-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.portal-access-bar .portal-access-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.portal-access-bar a {
    color: #cbd8ef;
    text-decoration: none;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.portal-access-bar a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.portal-access-bar form {
    display: inline;
    margin: 0;
}

.portal-access-bar button {
    background: transparent;
    border: 1px solid rgba(248, 81, 73, 0.45);
    color: #ffb4ae;
    border-radius: 6px;
    padding: 0.2rem 0.6rem;
    font: inherit;
    cursor: pointer;
}

.portal-access-bar button:hover {
    background: rgba(248, 81, 73, 0.14);
}

.portal-guard-wait {
    padding: 2.5rem;
    text-align: center;
    color: #9fb0cc;
    font-family: "Segoe UI", system-ui, sans-serif;
}

/* ---- Subscription enquiry ("Get Started") ------------------------------------ */

/*
 * Two columns on a desktop - the pitch beside the form - collapsing to one on a phone, which is
 * where most enquiry traffic arrives. It reuses the login page's brand tokens (navy ground, gold
 * accent, serif display type) so the two public pages read as the same firm, but keeps its own
 * namespace so changing one cannot disturb the other.
 */

.portal-enquiry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3rem;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3.5rem;
}

.portal-enquiry-intro {
    padding-top: 1rem;
}

.portal-enquiry-headline {
    font-family: var(--portal-serif);
    font-size: clamp(2rem, 4vw, 2.9rem);
    line-height: 1.12;
    margin: 1rem 0 0.6rem;
    color: var(--portal-text);
}

.portal-enquiry-points {
    list-style: none;
    padding: 0;
    margin: 1.75rem 0 0;
    display: grid;
    gap: 0.75rem;
}

.portal-enquiry-points li {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    color: var(--portal-text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.portal-enquiry-privacy {
    margin-top: 2rem;
    font-size: 0.82rem;
    color: var(--portal-text-muted);
}

.portal-enquiry-panel {
    max-width: none;
    margin: 0;
}

.portal-enquiry-success {
    text-align: center;
    padding: 1rem 0;
}

/*
 * Paired fields on a wide screen, stacked on a narrow one. auto-fit with a min track does this
 * without a media query, so the breakpoint follows the container rather than the viewport - which
 * matters because this panel is already one column of a grid.
 */
.portal-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 1rem;
}

.portal-required {
    color: var(--portal-gold);
    margin-left: 0.15rem;
}

/* InputSelect and InputTextArea are not <input>, so the login page's rule does not reach them. */
.portal-field select,
.portal-field textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border-radius: 9px;
    border: 1px solid var(--portal-border);
    background: rgba(0, 0, 0, 0.25);
    color: var(--portal-text);
    font-size: 0.95rem;
    font-family: inherit;
}

.portal-field textarea {
    resize: vertical;
    min-height: 5.5rem;
}

.portal-field select:focus,
.portal-field textarea:focus {
    outline: none;
    border-color: var(--portal-brand);
    box-shadow: 0 0 0 3px rgba(47, 129, 247, 0.18);
}

/* The native dark-on-dark option list is unreadable in several browsers; force both ends. */
.portal-field select option {
    background: var(--portal-surface-solid);
    color: var(--portal-text);
}

.portal-fieldset {
    border: 1px solid var(--portal-border);
    border-radius: 9px;
    padding: 0.9rem 1rem 1rem;
    margin: 0 0 1.1rem;
}

.portal-fieldset legend {
    font-size: 0.8rem;
    color: var(--portal-text-muted);
    letter-spacing: 0.04em;
    padding: 0 0.35rem;
}

.portal-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.5rem 1rem;
}

.portal-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--portal-text);
    cursor: pointer;
}

.portal-checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--portal-gold);
    cursor: pointer;
    flex: none;
}

.portal-checkbox-standalone {
    margin-bottom: 1.1rem;
}

/* Blazor's validation classes, which land on the input and on the message span. */
.portal-field .validation-message,
.portal-enquiry .validation-message {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: #ffb4ae;
}

.portal-enquiry .invalid {
    border-color: rgba(248, 81, 73, 0.55);
}

.portal-enquiry .modified.valid {
    border-color: rgba(46, 160, 67, 0.45);
}

@media (max-width: 900px) {
    .portal-enquiry {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
        padding: 1.75rem 1rem 2.5rem;
    }
}

/* ---- Portal administration (Enquiries) ------------------------------------------ */

/*
 * The operational pages behind the Admin gate. They sit inside the portal layout, so they reuse
 * its cards, fields, buttons and alerts; what is added here is the grid, the summary cards and the
 * detail layout, all under a portal-admin- namespace so no public page can be disturbed by it.
 */

/* Visible to screen readers, not on screen: the grid's caption. */
.portal-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Marks the admin-only item in the company navigation so it is not mistaken for a public page. */
.portal-nav-link-admin {
    color: var(--portal-gold);
}

.portal-admin {
    display: grid;
    gap: 1.5rem;
}

.portal-admin-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.portal-admin-header .portal-eyebrow {
    color: var(--portal-gold);
    margin-bottom: 0.5rem;
}

.portal-admin-title {
    font-family: var(--portal-serif);
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    line-height: 1.15;
    margin: 0 0 0.35rem;
}

.portal-admin-sub {
    margin: 0;
    color: var(--portal-text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.portal-admin-total {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--portal-gold-line);
    border-radius: 999px;
    background: var(--portal-gold-wash);
}

.portal-admin-total-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--portal-gold-strong);
    font-variant-numeric: tabular-nums;
}

.portal-admin-total-label {
    font-size: 0.78rem;
    color: var(--portal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ---- Summary cards ---- */

.portal-admin-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.portal-admin-stat {
    position: relative;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius);
    background: var(--portal-surface);
    border-top: 3px solid var(--portal-gold-dim);
    transition: border-color 120ms ease, transform 80ms ease;
}

/* Cards that filter the grid are whole-card links; either way the body carries the padding. */
.portal-admin-stat-body {
    display: grid;
    gap: 0.2rem;
    padding: 1rem 1.15rem;
    color: inherit;
    text-decoration: none;
}

.portal-admin-stat-link:hover {
    border-color: var(--portal-gold-dim);
    transform: translateY(-1px);
}

.portal-admin-stat-label {
    font-size: 0.78rem;
    color: var(--portal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.portal-admin-stat-value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.portal-admin-stat-note {
    font-size: 0.78rem;
    color: var(--portal-text-muted);
}

.portal-admin-stat-new { border-top-color: var(--portal-brand); }
.portal-admin-stat-progress { border-top-color: var(--portal-warning); }
.portal-admin-stat-closed { border-top-color: var(--portal-success); }

/* ---- Filters ---- */

.portal-admin-filters {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(130px, 1fr)) auto;
    gap: 0 1rem;
    align-items: end;
    padding: 1.25rem 1.35rem 0.2rem;
    box-shadow: none;
}

.portal-admin-filters .portal-field input[type="date"] {
    color-scheme: dark;
}

.portal-admin-filter-actions {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
}

.portal-admin-filter-actions .portal-btn {
    padding-block: 0.7rem;
}

@media (max-width: 1080px) {
    .portal-admin-filters {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }

    .portal-admin-filter-search {
        grid-column: 1 / -1;
    }
}

/* ---- Grid ---- */

.portal-admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    font-size: 0.88rem;
    color: var(--portal-text-muted);
    margin-bottom: -0.5rem;
}

.portal-admin-toolbar strong {
    color: var(--portal-text);
}

.portal-admin-toolbar-note {
    font-size: 0.78rem;
}

.portal-admin-grid-card {
    padding: 0;
    overflow: hidden;
}

.portal-admin-grid-scroll {
    overflow-x: auto;
}

.portal-admin-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.portal-admin-grid th,
.portal-admin-grid td {
    padding: 0.8rem 0.9rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--portal-border);
}

.portal-admin-grid thead th {
    position: sticky;
    top: 0;
    background: var(--portal-surface-solid);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--portal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.portal-admin-grid tbody tr {
    position: relative;
    transition: background-color 100ms ease;
}

.portal-admin-grid tbody tr:hover,
.portal-admin-grid tbody tr:focus-within {
    background: var(--portal-gold-wash);
}

.portal-admin-grid tbody tr:last-child td {
    border-bottom: none;
}

.portal-admin-sort {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.portal-admin-sort:hover,
.portal-admin-sort.is-active {
    color: var(--portal-gold);
}

.portal-admin-sort-arrow {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* The id link is stretched across its row, so clicking anywhere on the row opens the enquiry. */
.portal-admin-row-link {
    color: var(--portal-gold);
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.portal-admin-row-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.portal-admin-row-link:focus-visible {
    outline: none;
}

.portal-admin-row-link:focus-visible::after {
    outline: 2px solid var(--portal-gold);
    outline-offset: -2px;
}

.portal-admin-date,
.portal-admin-time {
    display: block;
    white-space: nowrap;
}

.portal-admin-time {
    font-size: 0.78rem;
    color: var(--portal-text-muted);
}

.portal-admin-strong {
    font-weight: 600;
}

.portal-admin-nowrap {
    white-space: nowrap;
}

.portal-admin-break {
    overflow-wrap: anywhere;
}

.portal-admin-message-cell {
    min-width: 16rem;
    max-width: 28rem;
}

/* Clamped on an inner span: a table cell given display:-webkit-box stops being a table cell. */
.portal-admin-message {
    color: var(--portal-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.portal-admin-source {
    font-size: 0.78rem;
    white-space: nowrap;
    color: var(--portal-text-muted);
}

.portal-admin-status {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid var(--portal-border);
    color: var(--portal-text-muted);
}

.portal-admin-status-lg {
    font-size: 0.8rem;
    padding: 0.35rem 0.9rem;
}

.portal-admin-status.is-new {
    color: #a5c9ff;
    border-color: rgba(47, 129, 247, 0.45);
    background: rgba(47, 129, 247, 0.12);
}

.portal-admin-status.is-progress {
    color: #f0c674;
    border-color: rgba(210, 153, 34, 0.45);
    background: rgba(210, 153, 34, 0.12);
}

.portal-admin-status.is-converted {
    color: #7ee787;
    border-color: rgba(46, 160, 67, 0.45);
    background: rgba(46, 160, 67, 0.12);
}

.portal-admin-status.is-rejected {
    color: #ffb4ae;
    border-color: rgba(248, 81, 73, 0.4);
    background: rgba(248, 81, 73, 0.1);
}

/* ---- Pager ---- */

.portal-admin-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
}

.portal-admin-page {
    min-width: 2.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--portal-border);
    color: var(--portal-text);
    text-align: center;
    text-decoration: none;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

a.portal-admin-page:hover {
    border-color: var(--portal-gold-dim);
    color: var(--portal-gold);
}

.portal-admin-page.is-current {
    background: var(--portal-gold);
    border-color: var(--portal-gold);
    color: var(--portal-navy-deep);
    font-weight: 700;
}

.portal-admin-page.is-disabled {
    opacity: 0.4;
}

.portal-admin-page-gap {
    color: var(--portal-text-muted);
    padding: 0 0.2rem;
}

/* ---- Empty state ---- */

.portal-admin-empty {
    text-align: center;
    padding: 3rem 1.5rem;
}

.portal-admin-empty h1,
.portal-admin-empty h2 {
    font-size: 1.2rem;
    margin: 0 0 0.4rem;
}

.portal-admin-empty p {
    margin: 0;
    color: var(--portal-text-muted);
    font-size: 0.92rem;
}

.portal-admin-empty a {
    color: var(--portal-gold);
}

/* ---- Detail page ---- */

.portal-admin-back {
    justify-self: start;
    color: var(--portal-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
}

.portal-admin-back:hover {
    color: var(--portal-gold);
}

.portal-admin-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.portal-admin-detail-main,
.portal-admin-detail-side {
    display: grid;
    gap: 1.25rem;
}

.portal-admin-detail .portal-card {
    box-shadow: none;
}

.portal-admin-detail .portal-card h2 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--portal-gold);
    margin-bottom: 1rem;
}

.portal-admin-dl {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem 1.5rem;
}

.portal-admin-dl dt {
    font-size: 0.76rem;
    color: var(--portal-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
}

.portal-admin-dl dd {
    margin: 0;
    font-size: 0.95rem;
}

.portal-admin-dl a,
.portal-admin-hint a {
    color: var(--portal-text);
}

/* Exactly as typed: line breaks and paragraphs kept, long unbroken strings wrapped. */
.portal-admin-message-full {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.7;
    font-size: 0.95rem;
    padding: 1rem 1.1rem;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--portal-border);
    max-height: 32rem;
    overflow-y: auto;
}

.portal-admin-muted {
    color: var(--portal-text-muted);
}

.portal-admin-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.portal-admin-chip {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    border: 1px solid var(--portal-gold-line);
    background: var(--portal-gold-wash);
    color: var(--portal-gold-strong);
}

.portal-admin-hint {
    margin: 0.9rem 0 0;
    font-size: 0.78rem;
    color: var(--portal-text-muted);
    line-height: 1.6;
}

@media (max-width: 900px) {
    .portal-admin-detail {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * Phones: the grid becomes a stack of cards, one per enquiry, each cell labelled from its
 * data-label. A horizontally scrolling eight-column table is unusable one-handed.
 */
@media (max-width: 760px) {
    .portal-admin-grid thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .portal-admin-grid,
    .portal-admin-grid tbody,
    .portal-admin-grid tr,
    .portal-admin-grid td {
        display: block;
        width: 100%;
    }

    .portal-admin-grid tbody tr {
        padding: 0.9rem 1rem;
        border-bottom: 1px solid var(--portal-border);
    }

    .portal-admin-grid tbody tr:last-child {
        border-bottom: none;
    }

    .portal-admin-grid td {
        display: grid;
        grid-template-columns: 6.5rem minmax(0, 1fr);
        gap: 0.75rem;
        padding: 0.3rem 0;
        border-bottom: none;
        max-width: none;
        min-width: 0;
    }

    .portal-admin-grid td::before {
        content: attr(data-label);
        font-size: 0.72rem;
        color: var(--portal-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding-top: 0.15rem;
    }

    .portal-admin-message {
        -webkit-line-clamp: 3;
    }

    .portal-admin-message-cell {
        min-width: 0;
        max-width: none;
    }

    .portal-admin-date,
    .portal-admin-time {
        display: inline;
    }

    .portal-admin-time::before {
        content: " \00b7  ";
    }

    .portal-admin-total {
        width: 100%;
        justify-content: center;
    }
}


/* ---- My Account, credential recovery and the account menu ------------------------- */

/*
 * The account pages sit in the portal layout and reuse its cards, fields, buttons, alerts and the
 * admin definition list. What is added here is the header's profile menu, the two-column account
 * layout, the password field affordances (show/hide, live rule checklist), the busy state for
 * submit buttons, and the centred recovery card. All namespaced so no existing page shifts.
 */

/* Existing field labels nest the asterisk in a span, which the generic field rule made a block. */
.portal-field .portal-required {
    display: inline;
}

/* The generic field rule would otherwise override the [hidden] attribute on a span. */
.portal-field [hidden] {
    display: none !important;
}

.portal-field-note {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.76rem;
    color: var(--portal-text-muted);
}

.portal-alert-success {
    background: rgba(46, 160, 67, 0.12);
    border-color: rgba(46, 160, 67, 0.4);
    color: #9be9a8;
}

/* Draws the eye to a result that replaced the page the user was looking at. */
.portal-alert-pop {
    animation: portal-pop-in 260ms ease-out;
}

@keyframes portal-pop-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.portal-badge-danger {
    color: #ffb4ae;
    border-color: rgba(248, 81, 73, 0.45);
    background: rgba(248, 81, 73, 0.12);
}

/* Avatar initials: header menu and the My Account heading. */
.portal-avatar {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--portal-navy-deep);
    background: linear-gradient(180deg, var(--portal-gold-strong) 0%, var(--portal-gold) 100%);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.portal-avatar-lg {
    width: 4rem;
    height: 4rem;
    font-size: 1.35rem;
}

/* ---- Header account menu ---- */

.portal-account-menu {
    position: relative;
}

.portal-account-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.3rem 0.55rem 0.3rem 0.3rem;
    border-radius: 999px;
    border: 1px solid var(--portal-border);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.portal-account-menu-trigger::-webkit-details-marker {
    display: none;
}

.portal-account-menu-trigger:hover,
.portal-account-menu[open] > .portal-account-menu-trigger {
    border-color: var(--portal-gold-dim);
    background: var(--portal-gold-wash);
}

.portal-account-menu-trigger:focus-visible {
    outline: 2px solid var(--portal-gold-strong);
    outline-offset: 2px;
}

.portal-account-menu-trigger .portal-identity {
    align-items: flex-start;
}

.portal-account-menu-caret {
    font-size: 0.7rem;
    color: var(--portal-text-muted);
    transition: transform 120ms ease;
}

.portal-account-menu[open] .portal-account-menu-caret {
    transform: rotate(180deg);
}

.portal-account-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 50;
    min-width: 13rem;
    padding: 0.4rem;
    border-radius: var(--portal-radius);
    border: 1px solid var(--portal-gold-line);
    background: var(--portal-navy-deep);
    box-shadow: var(--portal-shadow);
    animation: portal-pop-in 140ms ease-out;
}

.portal-account-menu-panel form {
    margin: 0;
}

.portal-account-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--portal-text);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.portal-account-menu-item:hover,
.portal-account-menu-item:focus-visible {
    background: var(--portal-gold-wash);
    color: var(--portal-gold-strong);
    outline: none;
}

.portal-account-menu-signout {
    color: #ffb4ae;
}

.portal-account-menu-divider {
    height: 1px;
    margin: 0.35rem 0.25rem;
    background: var(--portal-border);
}

/* ---- My Account page ---- */

.portal-account {
    display: grid;
    gap: 1.5rem;
}

.portal-account-header {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.portal-account-heading .portal-eyebrow {
    color: var(--portal-gold);
    margin-bottom: 0.35rem;
}

.portal-account-title {
    font-family: var(--portal-serif);
    font-weight: 400;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    margin: 0 0 0.35rem;
}

.portal-account-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--portal-text-muted);
    font-size: 0.9rem;
}

/*
 * Overview across the top, the two forms side by side beneath it; one column on a phone. The
 * forms get equal tracks so neither card's height decides the other's width.
 */
.portal-account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.portal-account-overview {
    grid-column: 1 / -1;
}

.portal-account-overview h2,
.portal-account-grid .portal-card h2 {
    margin-bottom: 1rem;
}

.portal-account-grid .portal-card > h2 + p {
    margin-top: -0.6rem;
}

.portal-account-hint {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--portal-border);
    font-size: 0.82rem;
    color: var(--portal-text-muted);
}

.portal-account-hint a {
    color: var(--portal-text);
}

@media (max-width: 900px) {
    .portal-account-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Blazor's validation classes on the account and recovery forms, as on the enquiry form. */
.portal-account .invalid,
.portal-recovery .invalid {
    border-color: rgba(248, 81, 73, 0.55);
}

.portal-account .validation-message,
.portal-recovery .validation-message {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: #ffb4ae;
}

/* ---- Password fields ---- */

.portal-password-wrap {
    position: relative;
}

.portal-field .portal-password-wrap input {
    padding-right: 4.25rem;
}

.portal-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--portal-border);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--portal-text-muted);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.portal-password-toggle:hover,
.portal-password-toggle:focus-visible {
    color: var(--portal-text);
    border-color: var(--portal-gold-dim);
    outline: none;
}

.portal-pw-rules {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.3rem 1rem;
    font-size: 0.78rem;
    color: var(--portal-text-muted);
}

.portal-pw-rules li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    transition: color 120ms ease;
}

.portal-field .portal-pw-rule-mark {
    display: inline-block;
    flex: none;
    width: 0.95rem;
    height: 0.95rem;
    margin: 0;
    border-radius: 50%;
    border: 1px solid var(--portal-border);
    position: relative;
}

.portal-pw-rules li.is-met {
    color: #9be9a8;
}

.portal-pw-rules li.is-met .portal-pw-rule-mark {
    background: var(--portal-success);
    border-color: var(--portal-success);
}

.portal-pw-rules li.is-met .portal-pw-rule-mark::after {
    content: "";
    position: absolute;
    left: 0.3rem;
    top: 0.12rem;
    width: 0.25rem;
    height: 0.5rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ---- Busy state for submit buttons (set by portal-account.js) ---- */

.portal-spinner {
    display: none;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: portal-spin 700ms linear infinite;
}

.portal-btn.is-busy {
    cursor: progress;
    opacity: 0.85;
}

.portal-btn.is-busy .portal-spinner {
    display: inline-block;
}

@keyframes portal-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .portal-spinner,
    .portal-alert-pop,
    .portal-account-menu-panel {
        animation-duration: 1ms;
    }
}

/* ---- Recovery pages ---- */

.portal-recovery {
    display: grid;
    place-items: start center;
    padding-block: 1rem 2rem;
}

.portal-recovery-card {
    width: 100%;
    max-width: 480px;
    border-top: 3px solid var(--portal-gold);
}

.portal-recovery-card h1 {
    font-family: var(--portal-serif);
    font-weight: 400;
    font-size: 1.65rem;
    margin: 0 0 0.5rem;
}

.portal-recovery-card .portal-panel-sub {
    color: var(--portal-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 1.4rem;
}

.portal-recovery-card .portal-panel-sub a {
    color: var(--portal-text);
}

.portal-recovery-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 1.1rem;
    font-size: 0.85rem;
}

.portal-recovery-links a {
    color: var(--portal-gold);
    text-decoration: none;
}

.portal-recovery-links a:hover,
.portal-recovery-links a:focus-visible {
    text-decoration: underline;
}

.portal-login-account {
    margin-top: 0.75rem;
}

@media (max-width: 560px) {
    .portal-account-menu-trigger .portal-identity {
        display: none;
    }

    .portal-account-header {
        align-items: flex-start;
    }

    .portal-avatar-lg {
        width: 3rem;
        height: 3rem;
        font-size: 1.05rem;
    }
}