/* =====================================================================
   Portal 2026 design system — SCOPED to the 2026 header & footer only.
   Ported from /NewFrontEnd. Every rule is namespaced under
   .pf2026-header or .pf2026-footer so it cannot affect the existing
   2024 controls or Bootstrap. rem units are kept because the site
   already sets html{font-size:62.5%} (1rem = 10px) in typography.css.
   Image paths repointed to /images/portal2026/.
   ===================================================================== */

/* ---- Design tokens (scoped, do not leak to :root) ---- */
.pf2026-header,
.pf2026-footer,
.pf2026-login,
.pf2026-assetsearch,
.pf2026-assetresults,
.pf2026-portalhome,
.pf2026-profile,
.pf2026-manageusers,
.pf2026-resourcegrid,
.pf2026-page {
    --primary-color: #081537;
    --secondary-color: #f02e82;
    --tertiary-color: #1da9a5;
    --tertiary-dark-color: #2c6c6b;
    --purple-color: #5f2b85;
    --sky-blue-color: #55c0de;
    --sky-blue-color-rgb: 85, 192, 222;
    --light-blue-color: #dae3fb;
    --yellow-color: #e5da31;
    --text-color: #666666;
    --form-control-color: #eaeaea;
    --error-color: #e11919;
    --success-color: #2d9b0f;

    --font-family: "Montserrat", sans-serif;
    --secondary-font: "Lato", sans-serif;

    --fs-lg: 1.8rem;
    --fs-md: 1.6rem;
    --fs-sm: 1.4rem;
    --fs-xs: 1.2rem;

    --gutter: 30px;
    --gutter-half: 15px;
    --sm: 4rem;
    --md: 6rem;
    --lg: 8rem;

    --transition: all 150ms linear;
    --btn-height: 4.8rem;

    /* Design heading sizes (production defines a different --h2 on :root; keep ours scoped) */
    --h1: 3.6rem;
    --h2: 2.8rem;
    --h3: 2.4rem;

    --header-height: 20rem;
    --header-link-height: 6.4rem;
}
@media (width < 992px) {
    .pf2026-header,
    .pf2026-footer {
        --header-height: 16rem;
        --header-link-height: 5rem;
    }
}

/* ---- Minimal scoped reset (design markup expects these) ---- */
.pf2026-header *,
.pf2026-header *::before,
.pf2026-header *::after,
.pf2026-footer *,
.pf2026-footer *::before,
.pf2026-footer *::after { box-sizing: border-box; }
.pf2026-header ul,
.pf2026-footer ul { margin: 0; padding: 0; list-style: none; }
.pf2026-header li,
.pf2026-footer li { list-style: none; }
.pf2026-header a,
.pf2026-footer a { text-decoration: none; }
.pf2026-header p, .pf2026-header h1, .pf2026-header h2, .pf2026-header h3,
.pf2026-header h4, .pf2026-header h5, .pf2026-header h6,
.pf2026-footer p, .pf2026-footer h1, .pf2026-footer h2, .pf2026-footer h3,
.pf2026-footer h4, .pf2026-footer h5, .pf2026-footer h6 { margin: 0; padding: 0; }
.pf2026-header img,
.pf2026-footer img { max-width: 100%; height: auto; vertical-align: middle; display: inline-block; }
.pf2026-header button { border: 0; background: none; }
.pf2026-header .container,
.pf2026-footer .container {
    width: 100%;
    max-width: calc(1200px + (var(--gutter) * 2));
    padding: 0 var(--gutter);
    margin-inline: auto;
}
.pf2026-header .text-center,
.pf2026-footer .text-center { text-align: center; }
@media (width > 991px) {
    .pf2026-footer .hidden-lg { display: none !important; }
}
@media (width < 992px) {
    .pf2026-footer .hidden-md { display: none !important; }
}

/* ---- Shield: re-assert the design's base typography so the production 2024
   style.css and Bootstrap generic element rules (body/p/h*/a/ul) cannot leak
   into the header/footer subtree. .pf2026-* selectors out-specify the bare
   element rules; declaring the property is what makes ours win. ---- */
.pf2026-header,
.pf2026-footer {
    font-family: var(--font-family);
    font-size: var(--fs-md);
    line-height: 1.4;
    color: var(--text-color);
    font-weight: 400;
}
.pf2026-header a,
.pf2026-footer a { color: inherit; }
.pf2026-header p,
.pf2026-footer p {
    font-family: var(--font-family);
    font-size: var(--fs-md);
    line-height: 1.4;
    color: inherit;
    margin: 0;
}
.pf2026-header h1, .pf2026-header h2, .pf2026-header h3,
.pf2026-footer h1, .pf2026-footer h2, .pf2026-footer h3 {
    font-family: var(--font-family);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}
.pf2026-header h1, .pf2026-footer h1 { font-size: var(--h1); }
.pf2026-header h2, .pf2026-footer h2 { font-size: var(--h2); }
.pf2026-header h3, .pf2026-footer h3 { font-size: var(--h3); }

/* =====================  HEADER  ===================== */
.pf2026-header {
    height: var(--header-height);
    display: flex;
    align-items: stretch;   /* neutralise production `header{align-items:center}` */
    padding: 0;             /* neutralise production `header{padding:calc(var(--gutter)/2) 0}` */
    min-height: 0;          /* neutralise production `header{min-height:var(--header-height)}` */
    position: sticky;   /* design uses fixed; sticky keeps flow & avoids overlapping the 2024 body */
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    background-color: white;
    transition: var(--transition);
    font-family: var(--font-family);
}
.pf2026-header.header-scrolled {
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 20%);
}
.pf2026-header > .container {
    flex: 1 0 0%;
    display: flex;
    flex-direction: column;
    align-items: stretch;       /* neutralise production `header .container{align-items:center}` */
    justify-content: flex-start; /* neutralise production `header .container{justify-content:center}` */
    gap: 0;                      /* neutralise production `header .container{gap:calc(var(--gutter)/2)}` */
}
.pf2026-header .header-content {
    flex: 1 0 0%;
    border-top: 1rem solid var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.pf2026-header .logo { display: block; }
.pf2026-header .logo a { display: flex; align-items: center; }
.pf2026-header .logo a img { max-width: 26.8rem; width: auto; display: block; } /* width:auto neutralises production `header .logo img{width:300px}` */

.pf2026-header .header-actions {
    display: flex;
    align-items: center;
    gap: var(--gutter-half);
}
.pf2026-header .logout-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #111111;
    font-size: var(--fs-sm);
    font-family: var(--secondary-font);
    font-weight: 700;
    background: none;
    cursor: pointer;
}
.pf2026-header .logout-link:hover { color: var(--secondary-color); }

/* min-height keeps the navy band at full height when the link list is not
   rendered (logged out / non-SAP), where nothing else would give nav height. */
.pf2026-header nav { background-color: var(--primary-color); min-height: var(--header-link-height); }
.pf2026-header nav > ul > li { position: relative; }
.pf2026-header nav > ul > li > a {
    height: var(--header-link-height);
    display: flex;
    align-items: center;
    padding: 0 3rem;
    font-size: var(--fs-md);
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    gap: 0 0.8rem;
    font-family: var(--font-family);
}
.pf2026-header nav > ul > li.ml-auto { margin-left: auto; }
.pf2026-header nav > ul > li > a.button {
    min-width: 19.6rem;
    padding: 0 var(--gutter-half);
}
.pf2026-header nav > ul > li > a.button.tools-button {
    background: linear-gradient(to right, var(--tertiary-color), var(--tertiary-dark-color));
    margin-right: 0.1rem;
}
.pf2026-header nav > ul > li > a.button.clevertouch-button {
    background: linear-gradient(to right, var(--secondary-color), var(--purple-color));
}
.pf2026-header nav > ul > li > ul {
    min-width: 100%;
    background-color: var(--light-blue-color);
    padding: 0;
    transition: var(--transition);
}
.pf2026-header nav > ul > li > ul > li > a {
    display: flex;
    align-items: center;
    padding: 0 var(--gutter);
    min-height: 3.6rem;
    white-space: nowrap;
    font-size: var(--fs-sm);
    color: #333333;
    font-family: var(--secondary-font);
    transition: var(--transition);
    text-transform: none;
    font-weight: normal;
    height: auto;
}
.pf2026-header nav > ul > li > ul > li > a:hover {
    background-color: var(--sky-blue-color);
    color: white;
}
.pf2026-header .burger-wrapper {
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Burger icon */
.pf2026-header .burger {
    position: relative;
    width: 4rem;
    height: 3rem;
    cursor: pointer;
    z-index: 99999;
    margin-left: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pf2026-header .burger span { flex: 1 0 0%; height: 0.2rem; background-color: white; transition: var(--transition); }
.pf2026-header .burger::before,
.pf2026-header .burger::after {
    position: absolute;
    width: 100%;
    height: 0.2rem;
    content: "";
    background-color: white;
    transition: 150ms linear;
}
.pf2026-header .burger::before { left: 50%; top: 20%; transform: translate(-50%, -50%); }
.pf2026-header .burger::after { right: 50%; bottom: 20%; transform: translate(50%, 50%); }
.pf2026-header .burger.active::before { transform: translate(-50%, -50%) rotate(-45deg); top: 50%; }
.pf2026-header .burger.active::after { transform: translate(50%, 50%) rotate(45deg); bottom: 50%; }
.pf2026-header .burger.active span { opacity: 0; visibility: hidden; }
@media (width < 576px) {
    .pf2026-header .burger { margin-left: var(--gutter-half); }
}

@media (width > 991px) {
    .pf2026-header nav > ul { display: flex; align-items: center; }
    .pf2026-header nav > ul > li > a { justify-content: center; }
    .pf2026-header nav > ul > li > a img { transition: 100ms linear; }
    .pf2026-header nav > ul > li:hover > a img { transform: rotate(-180deg); }
    .pf2026-header nav > ul > li > ul {
        display: block !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        position: absolute;
        left: 0;
        top: 100%;
        box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, 15%);
    }
    .pf2026-header nav > ul > li:hover > ul {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .pf2026-header .burger-wrapper { display: none; }
}
@media (width < 992px) {
    .pf2026-header > .container { padding: 0; }
    .pf2026-header nav > ul > li > a { padding: 0 var(--gutter-half); }
    .pf2026-header nav > ul {
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        background-color: var(--primary-color);
        min-height: calc(100dvh - var(--header-height));
        transition: var(--transition);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .pf2026-header .header-content {
        display: flex;
        align-items: center;
        justify-content: center;
        border-width: 0.5rem;
    }
    .pf2026-header .header-content .header-actions {
        position: absolute;
        right: var(--gutter-half);
        top: 1rem;
    }
    .pf2026-header .burger-wrapper { display: flex; height: var(--header-link-height); }
    .pf2026-header nav > ul.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .pf2026-header nav > ul > li > ul { display: none; }
    .pf2026-header nav > ul > li.open > ul { display: block; }
}
@media (width < 576px) {
    .pf2026-header .logo a img { max-width: 16rem; }
}

/* =====================  FOOTER  ===================== */
.pf2026-footer {
    font-family: var(--font-family);
    background: transparent; /* neutralise production `footer{background-color:var(--tertiary)}` */
    padding: 0;              /* neutralise production `footer{padding:7rem 0}` */
}
.pf2026-footer .footer-content {
    padding: var(--md) var(--gutter);
    background-color: var(--primary-color);
}
.pf2026-footer .footer-content > :not(:last-child) { margin-bottom: var(--sm); }
.pf2026-footer .footer-content > :first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter);
}
.pf2026-footer .footer-logo { display: flex; align-items: center; }
.pf2026-footer .footer-logo a { display: flex; align-items: center; }
.pf2026-footer .footer-logo a img { display: block; width: 26.8rem; min-width: 26.8rem; }
.pf2026-footer .footer-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem var(--gutter);
}
.pf2026-footer .footer-buttons .btn { min-width: 25.6rem; transition: var(--transition); }
.pf2026-footer .footer-buttons .btn:hover { opacity: 80%; }
.pf2026-footer .footer-content > :last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gutter);
}
.pf2026-footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--gutter) var(--md);
}
.pf2026-footer .footer-headding { color: white; font-weight: 700; }
.pf2026-footer .footer-headding:not(:last-child) { margin-bottom: 2rem; }
.pf2026-footer .footer-links ul li { display: flex; }
.pf2026-footer .footer-links ul li:not(:last-child) { margin-bottom: 1.2rem; }
.pf2026-footer .footer-links ul li a {
    display: flex;
    align-items: center;
    line-height: 1;
    font-size: var(--fs-sm);
    color: white;
    transition: var(--transition);
    white-space: nowrap;
}
.pf2026-footer .footer-links ul li a:hover { color: var(--secondary-color); }
.pf2026-footer .contact-number:not(:last-child) { margin-bottom: var(--gutter); }
.pf2026-footer .contact-number {
    color: var(--yellow-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0 1rem;
}
.pf2026-footer .contact-number > * { font-weight: 700; }
.pf2026-footer .social-media-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.2rem;
}
.pf2026-footer .social-media-links > * {
    width: 4.4rem;
    aspect-ratio: 1;
    border-radius: 100%;
    display: grid;
    place-items: center;
    background: linear-gradient(to right, var(--secondary-color), var(--purple-color));
    transition: var(--transition);
}
.pf2026-footer .social-media-links > * > * { max-width: 70%; max-height: 70%; }
.pf2026-footer .social-media-links > * > svg path { fill: white; }
.pf2026-footer .social-media-links > :hover { opacity: 80%; }
@media (width < 992px) {
    .pf2026-footer .footer-content > :first-child { flex-direction: column; }
    .pf2026-footer .footer-content > :last-child { display: block; align-items: flex-start; }
    .pf2026-footer .footer-content > :last-child > :not(:last-child) { margin-bottom: var(--gutter); }
    .pf2026-footer .footer-links { justify-content: center; }
    .pf2026-footer .contact-number { justify-content: center; }
    .pf2026-footer .social-media-links { justify-content: center; }
}
@media (width < 768px) {
    .pf2026-footer .footer-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sm) var(--gutter);
    }
    .pf2026-footer .footer-buttons { flex-direction: column; }
}
.pf2026-footer .copyright:not(:first-child) {
    border-top: 0.1rem solid var(--tertiary-color);
    background-color: var(--primary-color);
}
.pf2026-footer .copyright {
    padding: var(--gutter);
    display: flex;
    align-items: center;
    gap: var(--gutter) var(--sm);
    background-color: var(--primary-color);
}
.pf2026-footer .copyright p { font-size: var(--fs-xs); color: white; }
.pf2026-footer .copyright p:not(:last-child) { margin-bottom: 0.5rem; }
.pf2026-footer .copyright p:last-child { margin-top: 1rem; }
.pf2026-footer .copyright p a { color: white; transition: var(--transition); }
.pf2026-footer .copyright p a:hover { color: var(--secondary-color); text-decoration: underline; }
.pf2026-footer .copyright-image { display: flex; align-items: center; gap: var(--gutter); }
@media (width < 992px) {
    .pf2026-footer .copyright { flex-direction: column; }
    .pf2026-footer .copyright p { text-align: center; }
}
@media (width < 768px) {
    .pf2026-footer .copyright p:last-child { margin-top: 0; }
    .pf2026-footer .copyright p:not(:last-child) { margin-bottom: 2rem; }
}

/* ---- Buttons (scoped; must not touch Bootstrap .btn) ---- */
.pf2026-footer .btn {
    height: var(--btn-height);
    padding: 0 var(--gutter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0 1rem;
    white-space: nowrap;
    font-family: var(--font-family);
    font-size: var(--fs-md);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    border-radius: 5rem;
    border: 0;
    cursor: pointer;
}
.pf2026-footer .btn.btn-secondary { background: linear-gradient(to right, var(--secondary-color), var(--purple-color)); color: white; }
.pf2026-footer .btn.btn-tertiary { background: linear-gradient(to right, var(--tertiary-color), var(--tertiary-dark-color)); color: white; }

/* =====================  LOGIN (page-4 / page-5 error / page-6 forgotten)  =====================
   Scoped under .pf2026-login. Styled to fit the markup the reused bs5TextBox / bs5CheckBox
   controls emit: <div class="mb-3"><label class="form-label sr-only"><input class="form-control">…
   Fully self-describing so nothing leaks from production style.css / Bootstrap. */
.pf2026-login *,
.pf2026-login *::before,
.pf2026-login *::after { box-sizing: border-box; }
.pf2026-login {
    font-family: var(--font-family);
    font-size: var(--fs-md);
    line-height: 1.4;
    color: var(--text-color);
}
.pf2026-login ul { margin: 0; padding: 0; list-style: none; }
.pf2026-login li { list-style: none; }
.pf2026-login p { margin: 0; font-family: var(--font-family); font-size: var(--fs-md); line-height: 1.4; }
.pf2026-login h1, .pf2026-login h2, .pf2026-login h3 { margin: 0; font-family: var(--font-family); font-weight: 700; line-height: 1.2; }
.pf2026-login h1 { font-size: var(--h1); }
.pf2026-login img { max-width: 100%; height: auto; vertical-align: middle; }
.pf2026-login a { color: inherit; text-decoration: none; }
.pf2026-login .container { width: 100%; max-width: calc(1200px + (var(--gutter) * 2)); padding: 0 var(--gutter); margin-inline: auto; }
.pf2026-login .text-center { text-align: center; }
.pf2026-login .pt-sm { padding-top: var(--sm); }
.pf2026-login .pt-gutter { padding-top: var(--gutter); }
.pf2026-login .pb-gutter { padding-bottom: var(--gutter); }

/* Section + background image */
/* The design has the section flush to the header and the footer: the white space
   above the card is .form-section's own 14rem padding, and the background image
   runs into the footer. Production style.css puts padding on <main>, which would
   add white bands above and below; cancel it for this page only. */
main:has(> .pf2026-login) { padding-top: 0; padding-bottom: 0; }
.pf2026-login .form-section { padding: 14rem var(--gutter); position: relative; isolation: isolate; }
.pf2026-login .form-section::before {
    position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% - 14rem);
    content: ""; background: url("/images/portal2026/form-bg.jpg") center center no-repeat;
    background-size: cover; z-index: -1;
}

/* Card */
.pf2026-login .form-box {
    background-color: white; width: 100%; max-width: 54.5rem; border-radius: 2rem;
    padding: var(--md) var(--sm); margin-inline: auto; margin-top: calc(var(--sm) * -1);
    box-shadow: 0.2rem 0.5rem 2rem rgba(2, 3, 3, 10%);
}
.pf2026-login .form-box-header:not(:last-child) { margin-bottom: var(--sm); }
.pf2026-login .form-box-header h1 { font-weight: 700; color: var(--primary-color); }
.pf2026-login .form-box-header > :not(:last-child) { margin-bottom: 2rem; }
.pf2026-login .form-box-header p { color: #333; font-size: var(--fs-md); line-height: 1.2; }

/* Field spacing (bs5TextBox wrapper is div.mb-3) */
.pf2026-login .form-box .mb-3:not(:last-child) { margin-bottom: 2rem; }
/* ...but bs5DropDownList, and the second box of bs5PasswordBoxes, wrap in
   .form-group instead of .mb-3 - so they had no bottom margin at all and sat
   flush against the next field. Matches the 1rem that Bootstrap's .mb-3
   utility actually applies (its !important beats the 2rem rule above). */
.pf2026-login .form-box .form-group:not(:last-child) { margin-bottom: 1rem; }
.pf2026-login .form-label.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Inputs */
.pf2026-login .form-control {
    width: 100%; height: 4.8rem; padding: 0 2rem; background-color: var(--form-control-color);
    border: 0.1rem solid var(--form-control-color); border-radius: 0;
    font-family: var(--secondary-font); color: #333; font-size: var(--fs-md); line-height: normal;
}
.pf2026-login .form-control::placeholder { opacity: 1; color: #333; }
.pf2026-login .form-control:focus { outline: none; box-shadow: none; }
.pf2026-login .form-control:focus::placeholder { opacity: 0; color: transparent; }
.pf2026-login .form-control.error {
    border-color: var(--error-color);
    background: url("/images/portal2026/error-icon.png") calc(100% - 2rem) center no-repeat var(--form-control-color);
}

/* Validation messages (WebForms validators default to red; give them the design font/spacing) */
.pf2026-login .validator,
.pf2026-login .alert,
.pf2026-login .alert-info { display: block; margin-top: 0.6rem; font-family: var(--secondary-font); font-size: var(--fs-sm); color: var(--error-color); }
.pf2026-login .alert-info { color: var(--primary-color); background-color: var(--light-blue-color); padding: 1.5rem 2rem; border-radius: 1rem; margin-bottom: 2rem; }
/* BSAlert(msg, "success") renders .alert.alert-success. The blanket .alert rule above
   is there to paint validator messages red, so success confirmations inherited red text
   on a green background - give them the same treatment .alert-info gets. */
.pf2026-login .alert-success { color: var(--success-color); background-color: #e7f4e3; padding: 1.5rem 2rem; border-radius: 1rem; margin-bottom: 2rem; }

/* Remember-me (bs5CheckBox -> div.form-check) */
.pf2026-login .form-check { display: flex; align-items: center; gap: 0 0.8rem; }
.pf2026-login .form-check .form-check-input { width: 1.8rem; height: 1.8rem; margin: 0; flex: 0 0 auto; }
.pf2026-login .form-check .form-check-label { font-family: var(--secondary-font); font-size: var(--fs-sm); color: #333; }

/* Buttons */
.pf2026-login .btn {
    height: var(--btn-height); min-width: 19.6rem; padding: 0 var(--gutter);
    display: inline-flex; align-items: center; justify-content: center; gap: 0 1rem;
    white-space: nowrap; font-family: var(--font-family); font-size: var(--fs-md);
    font-weight: 700; text-transform: uppercase; line-height: 1; border: 0;
    border-radius: 5rem; cursor: pointer;
}
.pf2026-login .btn.btn-sky-blue { background: linear-gradient(to right, var(--sky-blue-color), var(--tertiary-dark-color)); color: white; }
.pf2026-login .btn:hover { opacity: 0.9; }

/* Links under the form */
.pf2026-login .form-links p { color: #ccc; font-size: var(--fs-sm); line-height: 1.8; }
.pf2026-login .form-links a { color: #999; transition: var(--transition); cursor: pointer; }
.pf2026-login .form-links a:hover { color: var(--text-color); text-decoration: underline; }

/* Stacked yes/no choices in the Create Account wizard. These must NOT sit in a
   <p>: .btn is inline-flex at a fixed var(--btn-height), which is far taller than
   the paragraph's line-height, so wrapped buttons collide. Flex + gap instead. */
.pf2026-login .pf-choice {
    display: flex; flex-direction: column; align-items: center;
    gap: 1.5rem; margin-bottom: 2rem;
}
/* Choice labels are full sentences ("NO, I WANT TO BUY FROM YOU"). .btn is
   nowrap with a 19.6rem min-width, which pushes them outside the card on
   narrow screens - let these wrap and grow instead. */
.pf2026-login .pf-choice .btn {
    max-width: 100%; height: auto; min-height: var(--btn-height);
    padding-top: 1.2rem; padding-bottom: 1.2rem;
    white-space: normal; text-align: center; line-height: 1.2;
}

/* "New here?" call to action. Deliberately NOT inside .form-links, whose muted
   #999 footnote styling is what buries a link. Outlined rather than filled so
   LOGIN stays the single primary action on the card. */
.pf2026-login .pf-newhere {
    margin-top: var(--sm); padding-top: var(--sm);
    border-top: 0.1rem solid #e5e5e5; text-align: center;
}
.pf2026-login .pf-newhere-text {
    margin-bottom: 1.5rem; font-family: var(--font-family);
    font-size: var(--fs-md); font-weight: 700; color: var(--primary-color);
}
/* .btn sets border:0, so the ring is an inset shadow - no layout shift on hover. */
.pf2026-login .btn.btn-outline-sky-blue, .pf2026-page .btn.btn-outline-sky-blue {
    background: transparent; color: var(--tertiary-dark-color);
    box-shadow: inset 0 0 0 0.2rem var(--sky-blue-color);
    transition: var(--transition);
}
.pf2026-login .btn.btn-outline-sky-blue:hover, .pf2026-page .btn.btn-outline-sky-blue:hover {
    background: linear-gradient(to right, var(--sky-blue-color), var(--tertiary-dark-color));
    color: white; opacity: 1;
}

/* mbli / nosession alert above the card */
.pf2026-login .pf-alert {
    max-width: 54.5rem; margin: 0 auto var(--gutter); background-color: var(--light-blue-color);
    color: var(--primary-color); padding: 2rem; border-radius: 1rem;
}
.pf2026-login .pf-alert p:not(:last-child) { margin-bottom: 1rem; }

/* View panels (Sign In / Request Web Access / Forgotten Password) */
.pf2026-login .pf-view { display: none; }
.pf2026-login .pf-view.active { display: block; }

/* "Almost There" - a migrated user whose password is saved but who is held until an
   admin picks their real company (UserControls/NewUser.ascx). Same card as the login
   views: a tick to say the password step worked, then numbered steps so "what now?"
   is answered at a glance instead of in a paragraph. */
.pf2026-login .pf-status-icon {
    width: 6.4rem; height: 6.4rem; margin: 0 auto; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background-color: #e7f4e3; color: var(--success-color);
}
.pf2026-login .pf-steps-title {
    margin-bottom: 2rem; font-weight: 700; color: var(--primary-color);
}
/* li carries list-style:none for the whole login scope, so number with a counter. */
.pf2026-login .pf-steps { margin: 0; padding: 0; counter-reset: pf-step; }
.pf2026-login .pf-steps li {
    counter-increment: pf-step; position: relative; min-height: 3.2rem;
    padding-left: 4.6rem; font-family: var(--secondary-font);
    font-size: var(--fs-md); line-height: 1.5; color: #333; overflow-wrap: anywhere;
}
.pf2026-login .pf-steps li:not(:last-child) { margin-bottom: 1.8rem; }
.pf2026-login .pf-steps li::before {
    content: counter(pf-step); position: absolute; left: 0; top: -0.2rem;
    width: 3.2rem; height: 3.2rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--light-blue-color); color: var(--primary-color);
    font-family: var(--font-family); font-size: var(--fs-sm); font-weight: 700;
}
.pf2026-login .pf-steps strong,
.pf2026-login .pf-steps .pf-email { color: var(--primary-color); font-weight: 700; }
.pf2026-login .pf-footnote {
    margin-top: var(--sm); padding-top: 2.5rem;
    border-top: 0.1rem solid #e5e5e5; text-align: center;
}
.pf2026-login .pf-footnote p { font-family: var(--secondary-font); font-size: var(--fs-sm); color: #666; }
.pf2026-login .pf-footnote p:not(:last-child) { margin-bottom: 0.6rem; }
.pf2026-login .pf-footnote strong { color: var(--primary-color); }

@media (width < 768px) {
    .pf2026-login .form-section { padding: 8rem var(--gutter); }
    .pf2026-login .form-section::before { height: calc(100% - 8rem); }
    .pf2026-login .form-box { padding: var(--sm) var(--gutter); }
}

/* =====================================================================
   FIXED update (from NewFrontEnd/FIXED, 2026-07): extra-small mobile
   (<376px) refinements. Only the header/footer/login rules are ported
   (the design's <376 block also touched .thumbnail-article/.steps which
   are not part of these controls). Scoped as usual.
   ===================================================================== */
@media (width < 376px) {
    /* Header */
    .pf2026-header .logout-link { font-size: 1.2rem; gap: 0 0.5rem; }
    .pf2026-header .logout-link img { width: 1.2rem; }

    /* Footer */
    .pf2026-footer .container { padding: 0 1.5rem; }
    .pf2026-footer .footer-buttons .btn { min-width: 20rem; }
    .pf2026-footer .contact-number h2 { font-size: var(--fs-lg); }
    .pf2026-footer .footer-logo a img { min-width: 20rem; }
    .pf2026-footer .footer-links { grid-template-columns: 1fr; }
    .pf2026-footer .footer-content,
    .pf2026-footer .copyright { padding: var(--gutter) var(--gutter-half); }

    /* Login */
    .pf2026-login .container { padding: 0 1.5rem; }
    .pf2026-login .form-section,
    .pf2026-login .form-box { padding-left: var(--gutter-half); padding-right: var(--gutter-half); }
}

/* =====================================================================
   ASSET SEARCH WIZARD (page-7) + ASSET RESULTS (page-1)
   Scoped under .pf2026-assetsearch / .pf2026-assetresults. Ported from
   NewFrontEnd style.css + component.css. Self-describing + shielded.
   Extra tokens (--td-gutter, --container-width-2) defined on the scopes.
   nice-select.css and swiper-bundle.min.css provide base plugin CSS;
   these rules are the design's visual overrides.
   ===================================================================== */
.pf2026-assetsearch,
.pf2026-assetresults {
    --td-gutter: 3.2rem;
    font-family: var(--font-family);
    font-size: var(--fs-md);
    line-height: 1.4;
    color: var(--text-color);
}
.pf2026-assetsearch *, .pf2026-assetsearch *::before, .pf2026-assetsearch *::after,
.pf2026-assetresults *, .pf2026-assetresults *::before, .pf2026-assetresults *::after { box-sizing: border-box; }
.pf2026-assetsearch ul, .pf2026-assetresults ul { margin: 0; padding: 0; list-style: none; }
.pf2026-assetsearch li, .pf2026-assetresults li { list-style: none; }
.pf2026-assetsearch a, .pf2026-assetresults a { color: inherit; text-decoration: none; }
.pf2026-assetsearch p, .pf2026-assetresults p { margin: 0; font-family: var(--font-family); font-size: var(--fs-md); line-height: 1.4; }
.pf2026-assetsearch h1, .pf2026-assetsearch h2, .pf2026-assetsearch h3,
.pf2026-assetresults h1, .pf2026-assetresults h2, .pf2026-assetresults h3 { margin: 0; font-family: var(--font-family); font-weight: 700; line-height: 1.2; }
.pf2026-assetsearch h1, .pf2026-assetresults h1 { font-size: var(--h1); }
.pf2026-assetsearch h3, .pf2026-assetresults h3 { font-size: var(--h3); }
.pf2026-assetsearch img, .pf2026-assetresults img { max-width: 100%; height: auto; vertical-align: middle; }
.pf2026-assetsearch button, .pf2026-assetresults button { border: 0; background: none; cursor: pointer; font: inherit; }
.pf2026-assetsearch select, .pf2026-assetsearch input,
.pf2026-assetresults select, .pf2026-assetresults input { font: inherit; }
.pf2026-assetsearch .container, .pf2026-assetresults .container { width: 100%; max-width: calc(1200px + (var(--gutter) * 2)); padding: 0 var(--gutter); margin-inline: auto; }
.pf2026-assetsearch .container-2, .pf2026-assetresults .container-2 { width: 100%; max-width: calc(1120px + (var(--gutter) * 2)); padding: 0 var(--gutter); margin-inline: auto; }
.pf2026-assetsearch .text-center, .pf2026-assetresults .text-center { text-align: center; }
.pf2026-assetsearch .d-flex, .pf2026-assetresults .d-flex { display: flex; }
.pf2026-assetsearch .fw-bold, .pf2026-assetresults .fw-bold { font-weight: 700; }
.pf2026-assetsearch .primary-color, .pf2026-assetresults .primary-color { color: var(--primary-color); }

/* Section + header */
.pf2026-assetsearch .section, .pf2026-assetresults .section { padding: var(--sm) 0; }
.pf2026-assetsearch .section-header:not(:last-child), .pf2026-assetresults .section-header:not(:last-child) { margin-bottom: var(--lg); }
.pf2026-assetsearch .section-header h1:not(:last-child), .pf2026-assetresults .section-header h1:not(:last-child) { margin-bottom: 2rem; }
.pf2026-assetsearch .section-header h1, .pf2026-assetresults .section-header h1 { color: var(--primary-color); }
@media (width < 768px) {
    .pf2026-assetsearch .section-header:not(:last-child), .pf2026-assetresults .section-header:not(:last-child) { margin-bottom: var(--md); }
    .pf2026-assetsearch .section, .pf2026-assetresults .section { padding: 2rem 0; }
}

/* ---- nice-select (design overrides; plugin base comes from nice-select.css) ---- */
.pf2026-assetsearch .nice-select, .pf2026-assetresults .nice-select {
    width: 100%; border: 0; border-radius: 0; float: none; height: 4.8rem; line-height: normal;
    display: flex; align-items: center; font-family: var(--secondary-font); font-size: var(--fs-md);
    color: var(--primary-color); padding-left: 2rem; padding-right: 4rem; background-color: white; cursor: pointer;
}
.pf2026-assetsearch .nice-select::after, .pf2026-assetresults .nice-select::after {
    width: 1.6rem; height: 0.7rem; border: 0; transform: none; margin-top: 0;
    background: url("/images/portal2026/select-arrow-down.png") center center no-repeat; background-size: contain;
    right: 2rem; top: 50%; transform: translateY(-50%);
}
.pf2026-assetsearch .nice-select.open::after, .pf2026-assetresults .nice-select.open::after { transform: translateY(-50%) rotate(180deg); }
.pf2026-assetsearch .nice-select.open .list, .pf2026-assetresults .nice-select.open .list { width: 100%; border-radius: 0; border: 0; background-color: #eaeaea; box-shadow: none; margin: 0; }
.pf2026-assetsearch .nice-select .option, .pf2026-assetresults .nice-select .option { min-height: 3.6rem; line-height: normal; display: flex; align-items: center; font-family: var(--secondary-font); font-size: var(--fs-sm); color: #333333; padding-left: 2rem; padding-right: 2rem; }
.pf2026-assetsearch .nice-select .option:hover, .pf2026-assetsearch .nice-select .option.focus, .pf2026-assetsearch .nice-select .option.selected.focus,
.pf2026-assetresults .nice-select .option:hover, .pf2026-assetresults .nice-select .option.focus, .pf2026-assetresults .nice-select .option.selected.focus { background-color: #eaeaea; color: #333333; font-weight: normal; }
.pf2026-assetsearch .nice-select .option:hover, .pf2026-assetresults .nice-select .option:hover { background-color: var(--sky-blue-color) !important; color: white !important; }

/* ---- Checkboxes / radios (component.css) ----
   Production style.css has its own .checkbox pattern (label{position:relative;
   padding-left} + label::before{position:absolute;left:0;top:0} + .checkbox
   {padding-left:32px}) that leaks in and drops the box on top of the label text —
   declare position/padding explicitly so the flex layout here always wins. */
.pf2026-assetsearch .checkbox, .pf2026-assetsearch .radio,
.pf2026-assetresults .checkbox, .pf2026-assetresults .radio { padding: 0; }
.pf2026-assetsearch .checkbox input, .pf2026-assetsearch .radio input,
.pf2026-assetresults .checkbox input, .pf2026-assetresults .radio input { display: none; }
.pf2026-assetsearch .checkbox label, .pf2026-assetsearch .radio label,
.pf2026-assetresults .checkbox label, .pf2026-assetresults .radio label { display: inline-flex; align-items: center; vertical-align: middle; font-weight: 700; white-space: nowrap; cursor: pointer; position: relative; padding: 0; margin: 0; }
.pf2026-assetsearch .checkbox label::before, .pf2026-assetsearch .radio label::before,
.pf2026-assetresults .checkbox label::before, .pf2026-assetresults .radio label::before {
    content: ""; width: 2.8rem; height: 2.8rem; min-width: 2.8rem; background-color: white; border: 0.1rem solid #999999; display: block; margin-right: 1.4rem;
    position: static;
}
.pf2026-assetsearch .checkbox input:checked ~ label::before, .pf2026-assetsearch .radio input:checked ~ label::before,
.pf2026-assetresults .checkbox input:checked ~ label::before, .pf2026-assetresults .radio input:checked ~ label::before {
    background: url("/images/portal2026/input-check.png") center center no-repeat #fff; background-size: 80% auto;
}

/* ---- Buttons ---- */
.pf2026-assetsearch .btn, .pf2026-assetresults .btn, .pf2026-profile .btn, .pf2026-manageusers .btn, .pf2026-page .btn {
    height: var(--btn-height); padding: 0 var(--gutter); display: inline-flex; align-items: center; justify-content: center;
    gap: 0 1rem; white-space: nowrap; font-family: var(--font-family); font-size: var(--fs-md); font-weight: 700;
    text-transform: uppercase; line-height: 1; border: 0; border-radius: 5rem; cursor: pointer;
}
.pf2026-assetsearch .btn.btn-success, .pf2026-assetresults .btn.btn-success, .pf2026-profile .btn.btn-success, .pf2026-page .btn.btn-success { background: var(--success-color); color: white; }
.pf2026-assetsearch .btn.btn-sky-blue, .pf2026-assetresults .btn.btn-sky-blue, .pf2026-profile .btn.btn-sky-blue, .pf2026-manageusers .btn.btn-sky-blue, .pf2026-page .btn.btn-sky-blue { background: linear-gradient(to right, var(--sky-blue-color), var(--tertiary-dark-color)); color: white; }
.pf2026-assetsearch .btn:hover, .pf2026-assetresults .btn:hover, .pf2026-page .btn:hover { opacity: 0.9; }

/* =====================  KEYWORD SEARCH  =====================
   The quick route above the wizard on /portal/assetsearch, and the re-search bar
   in the /portal/assetresults header. Shares the .btn + form styling above; the
   input mirrors the results table's .search field so the two read as one family. */
.pf2026-assetsearch .visually-hidden, .pf2026-assetresults .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;
}
.pf2026-assetsearch .keyword-search { background-color: var(--primary-color); border-radius: 2rem; padding: var(--gutter); color: white; }
.pf2026-assetsearch .keyword-search h3 { color: white; font-weight: 700; margin-bottom: 1rem; }
.pf2026-assetsearch .keyword-search > p { color: white; margin-bottom: var(--gutter); }
.pf2026-assetsearch .keyword-search > p em { font-style: normal; font-weight: 700; }

.pf2026-assetsearch .keyword-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
.pf2026-assetsearch .keyword-bar .keyword-input {
    flex: 1 1 28rem; min-width: 0; height: var(--btn-height); border: 0; border-radius: 5rem;
    padding: 0 2rem 0 5.2rem; background: url("/images/portal2026/search-icon.png") 2rem center no-repeat white;
    font-family: var(--secondary-font); font-size: var(--fs-md); font-weight: normal; color: var(--text-color);
}
.pf2026-assetsearch .keyword-bar .keyword-input::placeholder { color: #666; opacity: 1; }
.pf2026-assetsearch .keyword-bar .keyword-input:focus { outline: 0.2rem solid var(--sky-blue-color); outline-offset: 0.2rem; }
.pf2026-assetsearch .keyword-bar .keyword-go { flex: 0 0 auto; min-width: 14rem; }

/* "Showing the first 500 of N" notice under the criteria line */
.pf2026-assetresults .results-capped { margin-top: 0.8rem; font-family: var(--secondary-font); color: #a33; }

/* "or browse step by step" rule between the keyword box and the wizard */
.pf2026-assetsearch .search-divider { display: flex; align-items: center; gap: 0 var(--gutter); margin: var(--md) 0 var(--lg); }
.pf2026-assetsearch .search-divider::before, .pf2026-assetsearch .search-divider::after { content: ""; flex: 1 1 0; height: 0.1rem; background-color: #d5d5d5; }
.pf2026-assetsearch .search-divider span { font-family: var(--secondary-font); font-size: var(--fs-md); font-weight: 700; color: #666; text-transform: uppercase; }

@media (width < 768px) {
    .pf2026-assetsearch .keyword-search { padding: var(--gutter) var(--gutter-half); }
    .pf2026-assetsearch .keyword-bar .keyword-go { width: 100%; }
}

/* =====================  WIZARD STEPS  ===================== */
.pf2026-assetsearch .steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5rem 3.5rem; counter-reset: step; padding: 0; }
.pf2026-assetsearch .steps > li { border-radius: 2rem; padding: 4rem; padding-top: 5rem; position: relative; counter-increment: step; }
.pf2026-assetsearch .steps > li.step-1, .pf2026-assetsearch .steps > li.step-2 { background-color: var(--sky-blue-color); }
.pf2026-assetsearch .steps > li.step-3 { background-color: var(--secondary-color); }
.pf2026-assetsearch .steps > li.step-4 { background-color: #1cacaa; }
.pf2026-assetsearch .steps > li.step-5 { background-color: #612b84; }
.pf2026-assetsearch .steps > li.step-3, .pf2026-assetsearch .steps > li.step-4, .pf2026-assetsearch .steps > li.step-5 { grid-column: span 2; }
.pf2026-assetsearch .steps > li::before {
    position: absolute; left: var(--gutter-half); top: 0; width: 6.4rem; aspect-ratio: 1; content: counter(step);
    background-color: var(--primary-color); border-radius: 100%; border: 0.2rem solid white; display: grid; place-items: center;
    font-size: var(--h1); font-weight: 700; color: white; text-align: center; transform: translateY(-50%);
}
.pf2026-assetsearch .step-header:not(:last-child) { margin-bottom: var(--gutter); }
.pf2026-assetsearch .step-header h3, .pf2026-assetsearch .step-header p { color: white; }
.pf2026-assetsearch .step-header h3 { font-weight: 700; }
.pf2026-assetsearch .step-header h3:not(:last-child) { margin-bottom: 1rem; }
.pf2026-assetsearch .steps > li.step-5 { display: flex; align-items: center; }
.pf2026-assetsearch .steps > li.step-5 .btn { min-width: 50%; margin-inline: auto; }

/* Progressive states: disabled (greyed) + hidden (short path) */
.pf2026-assetsearch .steps > li.is-disabled { opacity: 0.4; filter: grayscale(25%); pointer-events: none; }
.pf2026-assetsearch .steps > li.is-hidden { display: none !important; }

@media (width < 992px) {
    .pf2026-assetsearch .steps { display: block; }
    .pf2026-assetsearch .steps > li:not(:last-child) { margin-bottom: var(--md); }
}
@media (width < 768px) {
    .pf2026-assetsearch .steps > li { padding: 4rem var(--gutter); }
    .pf2026-assetsearch .steps > li::before { width: 5.4rem; font-size: var(--h3); }
}

/* Step 4 folder checkboxes (white labels on teal card) */
.pf2026-assetsearch .check-boxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; max-width: 40rem; }
.pf2026-assetsearch .check-boxes .radio label, .pf2026-assetsearch .check-boxes .checkbox label { font-weight: normal; font-size: var(--fs-md); font-family: var(--secondary-font); color: white; }
/* component.css recolours checked labels to var(--secondary) (#1da9a5) with a
   higher-specificity selector — on the teal step-4 card (#1cacaa) that reads as
   the text vanishing. Re-assert white with the :checked state included so this wins. */
.pf2026-assetsearch .check-boxes .checkbox input:checked ~ label,
.pf2026-assetsearch .check-boxes .radio input:checked ~ label { color: white; }
@media (width < 768px) { .pf2026-assetsearch .check-boxes { grid-template-columns: 1fr; } }

/* Step 3 product slider (Swiper) */
.pf2026-assetsearch .step-product-slider-wrapper { background-color: white; position: relative; padding: 2rem 0; border-radius: 1rem; }
.pf2026-assetsearch .step-product-slider { overflow: hidden; }
.pf2026-assetsearch .step-product-slider .swiper-slide { width: auto; transition: var(--transition); position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; cursor: pointer; }
.pf2026-assetsearch .step-product-slider .swiper-slide p { text-align: center; font-family: var(--secondary-font); font-size: var(--fs-sm); color: #666; margin-top: 0.5rem; }
.pf2026-assetsearch .step-product-slider-wrapper .swiper-slide figure { height: 9rem; display: flex; align-items: center; justify-content: center; margin: 0; }
.pf2026-assetsearch .step-product-slider-wrapper .swiper-slide figure img { max-height: 100%; max-width: 100%; }
.pf2026-assetsearch .step-product-slider.has-selection .swiper-slide:not(.is-active) { opacity: 0.2; pointer-events: none; }
.pf2026-assetsearch .step-product-slider .swiper-slide.is-active { opacity: 1; }
.pf2026-assetsearch .step-product-slider-wrapper .swiper-slide::after {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 72%; aspect-ratio: 1; content: "";
    background: rgba(var(--sky-blue-color-rgb), 0.8); border-radius: 100%; z-index: -1; filter: blur(15px); opacity: 0; transition: var(--transition);
}
.pf2026-assetsearch .step-product-slider .swiper-slide:hover::after, .pf2026-assetsearch .step-product-slider .swiper-slide.is-active::after { opacity: 1; }
.pf2026-assetsearch .slider-arrow { position: absolute; top: 50%; width: 4.4rem; aspect-ratio: 1; border-radius: 100%; background-color: var(--sky-blue-color); display: grid; place-items: center; cursor: pointer; z-index: 99; border: 0.2rem solid white; }
.pf2026-assetsearch .slider-arrow.prev { transform: translateY(-50%) translateX(-50%); left: 0; }
.pf2026-assetsearch .slider-arrow.next { transform: translateY(-50%) translateX(50%); right: 0; }
.pf2026-assetsearch .step-product-slider-wrapper .swiper-scrollbar { background: none; height: 1rem; display: flex; align-items: center; }
.pf2026-assetsearch .step-product-slider-wrapper .swiper-scrollbar-drag { background-color: var(--sky-blue-color); height: 50%; }

/* =====================  RESULTS (page-1 table / list / grid)  ===================== */
.pf2026-assetresults .table { border: 0; padding: 0; margin: 0; border-collapse: collapse; width: 100%; table-layout: fixed; }
.pf2026-assetresults .table th, .pf2026-assetresults .table td { height: 6.4rem; }
/* Production style.css leaks th{background:white; vertical-align:bottom; padding:5px}
   over the scoped design — declare these explicitly so the navy thead shows through
   and the Select-all checkbox centres (option-A self-describing rule). */
.pf2026-assetresults .table th { background-color: transparent; vertical-align: middle; padding: 0; text-align: left; }
.pf2026-assetresults .table td { vertical-align: middle; }
.pf2026-assetresults .table th:last-child { padding-right: 0.8rem; }
.pf2026-assetresults .table thead { background-color: var(--primary-color); }
.pf2026-assetresults .table th:first-child > * { padding-left: var(--td-gutter); }
.pf2026-assetresults .table thead .checkbox { display: flex; align-items: center; gap: 0 1rem; }
.pf2026-assetresults .table thead .checkbox label { color: white; gap: 0 1.5rem; font-weight: 400; }
.pf2026-assetresults .table thead select, .pf2026-assetresults .search { height: 4.8rem; border-radius: 0; border: 0; }
.pf2026-assetresults .search { width: 100%; }
.pf2026-assetresults .table tbody p { color: #333; font-family: var(--secondary-font); font-size: var(--fs-md); overflow-wrap: anywhere; }
.pf2026-assetresults .table tbody tr { border-bottom: 0.1rem solid #eaeaea; }
.pf2026-assetresults .table tbody td { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.pf2026-assetresults .table tbody td:first-child { width: calc(2.8rem + (var(--td-gutter) * 2)); padding-left: var(--td-gutter); }
.pf2026-assetresults .table tbody td:not(:first-child) { padding-right: var(--td-gutter); }
.pf2026-assetresults .table tbody tr:first-child { background-color: var(--light-blue-color); }
.pf2026-assetresults .table tbody tr:first-child td p { font-family: var(--font-family); font-weight: 700; color: var(--primary-color); }
.pf2026-assetresults .table thead .nice-select { min-width: 30rem; max-width: 30rem; font-family: var(--secondary-font); }
.pf2026-assetresults .table-section .section-header:not(:last-child) { margin-bottom: var(--sm); padding-left: var(--td-gutter); }
.pf2026-assetresults input.search {
    font-weight: normal; padding-left: 2rem; padding-right: 4rem; height: 4.8rem;
    background: url("/images/portal2026/search-icon.png") calc(100% - 1.6rem) center no-repeat white;
    font-family: var(--secondary-font); font-size: var(--fs-md); border: 0;
}
.pf2026-assetresults input.search::placeholder { color: #666; opacity: 1; }
.pf2026-assetresults input.search:focus::placeholder { opacity: 0; color: transparent; }
.pf2026-assetresults input.search:focus { outline: none; box-shadow: none; }
.pf2026-assetresults .table thead .inline-flex { display: inline-flex; width: 100%; gap: 0 var(--gutter); }
.pf2026-assetresults .table thead .inline-flex > * { flex: 1 0 0%; }
/* The toolbar cell holds three dropdowns (Actions / folders / languages). Let each
   nice-select shrink to share the cell rather than forcing 30rem apiece, which
   overflowed and slid the third dropdown over the search field. */
.pf2026-assetresults .table thead .inline-flex .nice-select { min-width: 0; max-width: 100%; width: 100%; }
.pf2026-assetresults .search-wrap { width: 29rem; }
/* Gap between the last dropdown and the search box (search sits in its own cell, outside
   the dropdowns' flex gap). Needs the "th" in the selector to beat ".table th{padding:0}";
   border-box keeps the cell the same width so the row doesn't grow. */
.pf2026-assetresults .table th.search-wrap { box-sizing: border-box; padding-left: var(--gutter); }
.pf2026-assetresults .actions-wrap { width: 25rem; }

/* Back / new-search links under the results breadcrumb */
/* Staff-only "where in Canto did these come from" box (PortalStaffNote - asset results
   plus the Brand Tool-kit / Compliance tile pages, hence unscoped). Deliberately plainer
   than the rest of the page: it's an internal readout, not part of the portal's design. */
.staffsource { margin-top: var(--sm); border: 0.1rem solid #d5d5d5; border-left: 0.4rem solid var(--primary-color); border-radius: 0.6rem; background-color: #fafafa; font-family: var(--secondary-font); }
/* display:flex on a <summary> drops the disclosure triangle in Chrome and Safari, so
   the marker is hidden outright and replaced with a chevron of our own on the right. */
.staffsource > summary { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--gutter-half); padding: 1rem 3rem 1rem var(--gutter-half); font-size: var(--fs-md); font-weight: 700; color: #333; cursor: pointer; list-style: none; }
.staffsource > summary::-webkit-details-marker { display: none; }
/* Absolute, not margin-left:auto - the wrapping summary otherwise drops it onto a line of its own on mobile */
.staffsource > summary::after { content: "\25BE"; position: absolute; top: 1rem; right: var(--gutter-half); font-size: 1.4rem; line-height: 1.4; color: #666; }
.staffsource[open] > summary::after { content: "\25B4"; }
.staffsource > summary:hover, .staffsource > summary:hover::after { color: var(--primary-color); }
.staffsource-tag { display: inline-block; border-radius: 0.4rem; background-color: var(--primary-color); color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05rem; text-transform: uppercase; padding: 0.2rem 0.8rem; }

/* fit-content, not max-content: tile-page labels are section titles, and one long title
   would otherwise squeeze the value column to a ribbon */
.staffsource-list { display: grid; grid-template-columns: fit-content(24rem) 1fr; gap: 0.6rem var(--gutter); margin: 0; padding: 0 var(--gutter-half) var(--gutter-half); font-size: 1.3rem; line-height: 1.5; }
.staffsource-list dt { font-weight: 700; color: #666; }
.staffsource-list dd { margin: 0; color: #333; overflow-wrap: anywhere; }

@media (width < 768px) {
    /* Stack the labels above their values - two columns squeezes the text to a ribbon */
    .staffsource-list { grid-template-columns: 1fr; gap: 0; }
    .staffsource-list dt { margin-top: 1rem; }
}

.pf2026-assetresults .results-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--gutter); margin-top: var(--sm); }
.pf2026-assetresults .results-nav-link { display: inline-flex; align-items: center; gap: 0 0.6rem; font-family: var(--secondary-font); font-size: var(--fs-md); font-weight: 700; color: var(--primary-color); text-decoration: none; cursor: pointer; }
.pf2026-assetresults .results-nav-link:hover { text-decoration: underline; }

.pf2026-assetresults .actions { display: flex; align-items: center; justify-content: space-between; gap: 0 2rem; }
.pf2026-assetresults .actions > * { display: flex; align-items: center; justify-content: center; filter: grayscale(100%); opacity: 0.4; pointer-events: none; transition: var(--transition); cursor: pointer; }
.pf2026-assetresults .actions > .active { filter: grayscale(0); opacity: 1; pointer-events: auto; }
.pf2026-assetresults .actions > * img { max-width: 2.4rem; }

.pf2026-assetresults .list-view-button, .pf2026-assetresults .grid-view-button { cursor: pointer; }
.pf2026-assetresults .list-view.show, .pf2026-assetresults .grid-view.show { display: block !important; }
.pf2026-assetresults .list-view.hide, .pf2026-assetresults .grid-view.hide { display: none !important; }

.pf2026-assetresults .grid-view-grid-wrapper { padding: var(--gutter) var(--td-gutter); }
/* minmax(0,1fr): long underscore-joined filenames otherwise set the tracks'
   min-content width and blow the grid out past its container */
.pf2026-assetresults .grid-view-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.pf2026-assetresults .grid-view-grid-item-image { width: 100%; border-radius: 2rem; overflow: hidden; position: relative; }
.pf2026-assetresults .grid-view-grid-item-image .checkbox { position: absolute; top: 2rem; right: 2rem; }
.pf2026-assetresults .grid-view-grid-item-image figure { aspect-ratio: 1; background-color: var(--light-blue-color); margin: 0; }
.pf2026-assetresults .grid-view-grid-item-image figure img { object-fit: cover; width: 100%; height: 100%; }
.pf2026-assetresults .grid-view-grid-item-image p { background-color: var(--light-blue-color); font-family: var(--secondary-font); color: #333; text-align: right; line-height: 1; padding: 0.6rem var(--gutter-half); }
.pf2026-assetresults .grid-view-grid-item-file-name { padding: var(--gutter-half) 0; }
.pf2026-assetresults .grid-view-grid-item-file-name p { font-family: var(--secondary-font); color: #333; overflow-wrap: anywhere; }

/* Toast confirmation (copy link / bulk actions) */
.pf2026-assetresults .pf-toast {
    position: fixed; left: 50%; bottom: 4rem; transform: translateX(-50%) translateY(1rem);
    background-color: var(--primary-color); color: white; font-family: var(--secondary-font);
    font-size: var(--fs-md); padding: 1.2rem 2.4rem; border-radius: 0.6rem; z-index: 9999;
    opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
    box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.25); white-space: nowrap;
}
.pf2026-assetresults .pf-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.pf2026-assetresults .grid-view-grid-item .actions:not(:first-child) { border-top: 0.1rem solid #cccccc; }
.pf2026-assetresults .grid-view-grid-item .actions { padding: var(--gutter-half) 0; }

@media (width < 1200px) {
    .pf2026-assetresults .table th:first-child > *, .pf2026-assetresults .table tbody td:first-child, .pf2026-assetresults .table-section .section-header:not(:last-child) { padding-left: var(--gutter-half); }
    .pf2026-assetresults .table tbody td:first-child { width: 6rem; }
    .pf2026-assetresults .table thead .nice-select { min-width: 20rem; max-width: 20rem; }
    .pf2026-assetresults .search-wrap { width: 24rem; }
    .pf2026-assetresults .grid-view-grid-wrapper { padding: var(--gutter) var(--gutter-half); }
    .pf2026-assetresults .grid-view-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* The former .pf2026-legacy skin layer was removed once the 2024 base (color.css /
   typography.css / component.css) was upgraded to the 2026 standard - the base now
   delivers the 2026 look to all legacy controls directly, so the bolt-on was redundant. */

/* =====================  RESOURCE GRIDS (PortalCompliance / PortalBrandAssets)  ===================== */
/* page-2/page-3 thumbnail-article pattern, fully self-describing per the
   production-CSS leak lessons (declare display/margins/typography explicitly). */
.pf2026-resourcegrid { display: block; padding: var(--md) 0; font-family: var(--secondary-font); }
.pf2026-resourcegrid .container-2 { max-width: 124rem; margin: 0 auto; padding: 0 var(--gutter-half); }
.pf2026-resourcegrid .section-header { margin-bottom: var(--md); padding: 0; }
.pf2026-resourcegrid .section-header h1 { font-family: var(--font-family); font-size: var(--h1); font-weight: 700; color: var(--primary-color); margin: 0 0 1.6rem; padding: 0; line-height: 1.2; }
.pf2026-resourcegrid .section-header p { font-size: var(--fs-md); color: var(--text-color); margin: 0; max-width: 96rem; line-height: 1.6; }

.pf2026-resourcegrid .thumbnail-article-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sm); }
.pf2026-resourcegrid .thumbnail-article { display: flex; align-items: center; gap: var(--gutter-half) var(--gutter); text-decoration: none; padding: 0; transition: var(--transition); }
.pf2026-resourcegrid .thumbnail { width: 16rem; min-width: 16rem; aspect-ratio: 1; border-radius: 2rem; margin: 0; overflow: hidden; }
.pf2026-resourcegrid .thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pf2026-resourcegrid .thumbnail-article article { display: block; padding: 0; }
.pf2026-resourcegrid .thumbnail-article article h2 { font-family: var(--font-family); font-size: var(--h3); font-weight: 700; color: var(--primary-color); margin: 0 0 1rem; padding: 0; line-height: 1.3; transition: var(--transition); }
.pf2026-resourcegrid .thumbnail-article article p { font-size: var(--fs-md); color: var(--text-color); margin: 0; line-height: 1.6; }
.pf2026-resourcegrid .thumbnail-article:hover article h2 { color: var(--sky-blue-color); }
.pf2026-resourcegrid .thumbnail-article:hover { opacity: 0.92; }

@media (width < 992px) {
    .pf2026-resourcegrid .thumbnail-article { flex-direction: column; align-items: flex-start; }
    .pf2026-resourcegrid .thumbnail { width: 14rem; min-width: 14rem; border-radius: 1.8rem; }
}
@media (width < 768px) {
    .pf2026-resourcegrid .thumbnail-article-grid { grid-template-columns: minmax(0, 1fr); }
    .pf2026-resourcegrid .thumbnail-article { flex-direction: row; align-items: center; }
}
@media (width < 576px) {
    .pf2026-resourcegrid .thumbnail-article { gap: var(--gutter-half); }
    .pf2026-resourcegrid .thumbnail { width: 12rem; min-width: 12rem; border-radius: 1.6rem; }
}

/* =====================  MANAGE USERS (CustomerAccounts2026)  ===================== */
.pf2026-manageusers { display: block; padding: var(--md) 0; font-family: var(--secondary-font); }
.pf2026-manageusers .container-2 { max-width: 124rem; margin: 0 auto; padding: 0 var(--gutter-half); }
.pf2026-manageusers .pf-card { background-color: #eef1fa; border-radius: 1.2rem; overflow: hidden; box-shadow: 0 0.6rem 2.4rem rgba(8, 21, 55, 0.08); }
.pf2026-manageusers .pf-card-body { padding: var(--sm) var(--sm) var(--md); }
.pf2026-manageusers .pf-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem var(--gutter); margin-bottom: var(--sm); }
.pf2026-manageusers .pf-card-head h1 { font-family: var(--font-family); font-size: var(--h2); font-weight: 700; color: var(--primary-color); margin: 0 0 1.2rem; padding: 0; line-height: 1.2; }
.pf2026-manageusers .pf-card-head p { font-size: var(--fs-md); color: var(--text-color); margin: 0; max-width: 62rem; line-height: 1.6; }
.pf2026-manageusers .pf-card-head .btn { flex: 0 0 auto; }

.pf2026-manageusers .pf-users-wrap { overflow-x: auto; }
.pf2026-manageusers .pf-users-table { width: 100%; border-collapse: collapse; border: 0; background: transparent; }
.pf2026-manageusers .pf-users-table th, .pf2026-manageusers .pf-users-table td {
    background: transparent; border: 0; text-align: left; vertical-align: middle;
    padding: 1.8rem 2rem 1.8rem 0; font-size: var(--fs-md); color: #333;
}
.pf2026-manageusers .pf-users-table tr { border-bottom: 0.1rem solid #d5dcef; }
.pf2026-manageusers .pf-users-table th,
.pf2026-manageusers .pf-users-table th a {
    font-family: var(--font-family); font-weight: 700; color: var(--primary-color);
    font-size: var(--fs-md); text-decoration: none;
}
.pf2026-manageusers .pf-users-table th a:hover { color: var(--sky-blue-color); }
.pf2026-manageusers .pf-role-cell { width: 20rem; }
.pf2026-manageusers .pf-role-select {
    display: block; width: 100%; height: 4.4rem; background-color: white; border: 0.1rem solid #d5dcef;
    padding: 0 3.6rem 0 1.4rem; font-family: var(--secondary-font); font-size: var(--fs-sm); color: #666;
    appearance: none; -webkit-appearance: none; border-radius: 0; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: calc(100% - 1.2rem) center; background-size: 1.4rem;
}
.pf2026-manageusers .pf-role-select:disabled { opacity: 0.7; cursor: default; }
.pf2026-manageusers .pf-action-cell { width: 6rem; text-align: center; }
.pf2026-manageusers .pf-icon-btn, .pf2026-page .pf-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; text-decoration: none; font-size: 2rem; }
.pf2026-manageusers .pf-icon-lock { color: var(--primary-color); }
.pf2026-manageusers .pf-icon-lock.is-locked { color: var(--primary-color); }
.pf2026-manageusers .pf-icon-resend { color: var(--tertiary-color); }
.pf2026-manageusers .pf-icon-delete, .pf2026-page .pf-icon-delete { color: var(--error-color); }
.pf2026-manageusers .pf-icon-btn:hover, .pf2026-page .pf-icon-btn:hover { opacity: 0.7; }
.pf2026-manageusers .pf-icon-btn[disabled], .pf2026-manageusers .pf-icon-btn[disabled]:hover { opacity: 0.25; pointer-events: none; }

.pf2026-manageusers .pf-card-footer { background-color: var(--purple-color); padding: var(--sm) var(--gutter); text-align: center; }
.pf2026-manageusers .pf-card-footer .btn { min-width: 34rem; }

@media (width < 768px) {
    .pf2026-manageusers .pf-card-body { padding: var(--gutter-half); }
    .pf2026-manageusers .pf-card-head { flex-direction: column; }
    .pf2026-manageusers .pf-card-footer .btn { min-width: 100%; }
}

/* =====================  MY PROFILE (CustomerUserEdit2026)  ===================== */
.pf2026-profile { display: block; padding: var(--md) 0; font-family: var(--secondary-font); }
.pf2026-profile .container-2 { max-width: 124rem; margin: 0 auto; padding: 0 var(--gutter-half); }
.pf2026-profile .section-header { margin-bottom: var(--md); padding: 0; }
.pf2026-profile .section-header h1, .pf2026-page .section-header h1 { font-family: var(--font-family); font-size: var(--h1); font-weight: 700; color: var(--primary-color); margin: 0 0 1.6rem; padding: 0; line-height: 1.2; }
.pf2026-profile .section-header p, .pf2026-page .section-header p { font-size: var(--fs-md); color: var(--text-color); margin: 0; max-width: 96rem; line-height: 1.6; }

.pf2026-profile .pf-alert, .pf2026-page .pf-alert { background-color: #fdecf3; border: 0.1rem solid var(--secondary-color); color: #333; font-size: var(--fs-md); padding: 1.6rem 2rem; margin-bottom: var(--sm); border-radius: 0.6rem; }
.pf2026-profile .pf-alert a, .pf2026-page .pf-alert a { color: var(--secondary-color); font-weight: 700; }

.pf2026-profile .pf-section, .pf2026-page .pf-section { display: block; padding: 0; }
.pf2026-profile .pf-section-header, .pf2026-page .pf-section-header { display: flex; align-items: center; justify-content: space-between; gap: 0 2rem; margin-bottom: 2.4rem; }
.pf2026-profile .pf-section-header h2, .pf2026-page .pf-section-header h2 { font-family: var(--font-family); font-size: var(--h2); font-weight: 700; color: var(--sky-blue-color); margin: 0; padding: 0; line-height: 1.2; }
.pf2026-profile .pf-edit, .pf2026-page .pf-edit {
    width: 3.2rem; height: 3.2rem; min-width: 3.2rem; border: 0; border-radius: 0.4rem; cursor: pointer; padding: 0;
    background-color: var(--sky-blue-color);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/></svg>");
    background-repeat: no-repeat; background-position: center; background-size: 1.8rem;
    transition: var(--transition);
}
.pf2026-profile .pf-edit:hover, .pf2026-page .pf-edit:hover { opacity: 0.85; }
.pf2026-profile .pf-section.is-editing .pf-edit { background-color: var(--primary-color); }
.pf2026-profile.pf-locked .pf-edit { display: none; }

.pf2026-profile .pf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 6rem; grid-auto-flow: row dense; }
.pf2026-profile .pf-row { display: grid; grid-template-columns: 15rem minmax(0, 1fr); align-items: center; gap: 0 2rem; }
.pf2026-profile .pf-row.pf-c1 { grid-column: 1; }
.pf2026-profile .pf-row.pf-c2 { grid-column: 2; }
.pf2026-profile .pf-label { font-family: var(--font-family); font-size: var(--fs-md); font-weight: 700; color: var(--primary-color); white-space: nowrap; }
.pf2026-profile .pf-input { position: relative; display: block; padding: 0; }
.pf2026-profile .pf-input > .mb-3 { margin: 0; padding: 0; }
.pf2026-profile .pf-input label.form-label { display: none; }

.pf2026-profile .pf-input .form-control, .pf2026-profile .pf-input select {
    display: block; width: 100%; height: 4.8rem; background-color: var(--form-control-color); border: 0.1rem solid var(--form-control-color);
    border-radius: 0; padding: 0 4.4rem 0 1.6rem; margin: 0; font-family: var(--secondary-font); font-size: var(--fs-md); color: #333;
    appearance: none; -webkit-appearance: none; box-shadow: none; vertical-align: middle; transition: var(--transition);
}
.pf2026-profile .pf-input select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: calc(100% - 1.4rem) center; background-size: 1.6rem; cursor: pointer;
}
.pf2026-profile .pf-input .form-control:focus, .pf2026-profile .pf-input select:focus { outline: none; box-shadow: none; border-color: var(--sky-blue-color); }
.pf2026-profile .pf-section.is-editing .pf-input .form-control:not(:disabled), .pf2026-profile .pf-section.is-editing .pf-input select:not(:disabled) { background-color: white; border-color: #cccccc; }
.pf2026-profile .pf-input .form-control:disabled, .pf2026-profile .pf-input select:disabled { opacity: 1; color: #333; cursor: default; }
/* Locked (not-editing) sections: fields keep posting their values (readonly, not
   disabled) but can't be interacted with. MadeByPortal accounts disable server-side. */
.pf2026-profile .pf-section:not(.is-editing) .pf-fields input,
.pf2026-profile .pf-section:not(.is-editing) .pf-fields select { pointer-events: none; }
.pf2026-profile.pf-locked .pf-fields input, .pf2026-profile.pf-locked .pf-fields select { pointer-events: none; }

/* Validator messages render as spans inside the input cell */
.pf2026-profile .pf-input > span { display: block; font-size: var(--fs-sm); color: var(--error-color); padding-top: 0.4rem; }

/* Show/hide password eye */
.pf2026-profile .pf-eye {
    position: absolute; top: 1.2rem; right: 1.2rem; width: 2.4rem; height: 2.4rem; border: 0; padding: 0; cursor: pointer;
    background-color: transparent; opacity: 0.55;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'><path d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/><circle cx='12' cy='12' r='3'/></svg>");
    background-repeat: no-repeat; background-position: center; background-size: 2.2rem;
}
.pf2026-profile .pf-eye:hover { opacity: 1; }
.pf2026-profile .pf-eye.is-on { opacity: 1; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23081537' stroke-width='2'><path d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/><circle cx='12' cy='12' r='3'/><line x1='3' y1='21' x2='21' y2='3'/></svg>"); }

/* Marketing switch cell: let the bs5CheckBox switch sit in the input column */
.pf2026-profile .pf-input-check { display: flex; align-items: center; min-height: 4.8rem; }
/* Bootstrap hangs a switch 2.5em to the left of its .form-check, into padding that the
   ".pf-input > .mb-3 { padding: 0 }" rule above removes - so it slid back over the label.
   Sit it in the cell instead, and give it the brand's blue rather than Bootstrap's. */
.pf2026-profile .pf-input-check .form-check { display: flex; align-items: center; min-height: 0; margin: 0; padding: 0; }
.pf2026-profile .pf-input-check .form-check-input { float: none; width: 4.4rem; height: 2.4rem; margin: 0; cursor: pointer; }
.pf2026-profile .pf-input-check .form-check-input:checked { background-color: var(--sky-blue-color); border-color: var(--sky-blue-color); }
.pf2026-profile .pf-input-check .form-check-input:focus { border-color: var(--sky-blue-color); box-shadow: 0 0 0 0.25rem rgba(var(--sky-blue-color-rgb), 0.25); }

.pf2026-profile .pf-sep, .pf2026-page .pf-sep { border: 0; border-top: 0.1rem solid #eaeaea; margin: var(--sm) 0; }

/* Branding section (Company Details page): free two-column block, not label rows */
.pf2026-profile .pf-fields.pf-brand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 6rem; }
.pf2026-profile .pf-brand-left, .pf2026-profile .pf-brand-right { display: block; min-width: 0; }
.pf2026-profile .pf-brand .pf-input { margin-bottom: 1.6rem; }
.pf2026-profile .pf-brand-title { font-family: var(--font-family); font-size: var(--fs-md); font-weight: 700; color: #333; margin: 0 0 0.4rem; }
.pf2026-profile .pf-brand-help { font-size: var(--fs-md); color: var(--text-color); margin: 0 0 1.6rem; line-height: 1.5; }
.pf2026-profile .pf-upload { display: flex; align-items: center; gap: 0 1.6rem; margin-top: 2.4rem; }
.pf2026-profile .pf-upload .pf-file { display: none; }
.pf2026-profile .pf-upload-btn { min-width: 22rem; }
.pf2026-profile .pf-upload-name { font-size: var(--fs-sm); color: var(--text-color); overflow-wrap: anywhere; }
.pf2026-profile .pf-logo-preview { display: block; padding: 0; }
.pf2026-profile .pf-logo-preview img { display: block; max-width: 100%; max-height: 40rem; width: auto; height: auto; }
.pf2026-profile .pf-no-logo { font-size: var(--fs-md); color: var(--text-color); font-style: italic; }
@media (width < 992px) {
    .pf2026-profile .pf-fields.pf-brand { grid-template-columns: minmax(0, 1fr); }
}

.pf2026-profile .pf-save { display: none; margin-top: var(--sm); text-align: right; }
.pf2026-profile .pf-save.is-visible { display: block; }
.pf2026-profile.pf-locked .pf-save { display: none; }

@media (width < 992px) {
    .pf2026-profile .pf-fields { grid-template-columns: minmax(0, 1fr); }
    .pf2026-profile .pf-row.pf-c1, .pf2026-profile .pf-row.pf-c2 { grid-column: 1; }
}
@media (width < 768px) {
    .pf2026-profile .pf-row { grid-template-columns: minmax(0, 1fr); gap: 0.6rem 0; }
    .pf2026-profile .pf-label { white-space: normal; }
}

/* =====================  PORTAL PAGES (CustomerProjectLogs, ProjectLogging, DataFeeds, EngineerSerialQuery)  ===================== */
/* The older portal pages, brought into the 2026 design one at a time under one scope, so the
   next one only needs its markup changed. Built from parts the newer pages already have:
   the profile pages' .section-header, .pf-section headings, .pf-sep, .pf-alert, .pf-edit pencil
   and .btn (all shared with the rules above), the asset search cards' corners and checkboxes,
   the asset results table's navy toolbar and light-blue heading row, the Manage Users icon
   buttons and the .staffsource staff box. Self-describing - component.css and Bootstrap style
   every table, td, label and .form-control on the site. */
.pf2026-page { display: block; padding: var(--md) 0; font-family: var(--secondary-font); --td-gutter: 2rem; }
.pf2026-page *, .pf2026-page *::before, .pf2026-page *::after { box-sizing: border-box; }
/* Same box as the header's .container, so the page lines up with the navigation above it */
.pf2026-page .container { width: 100%; max-width: calc(1200px + (var(--gutter) * 2)); padding: 0 var(--gutter); margin-inline: auto; }
.pf2026-page .section-header { margin-bottom: var(--sm); padding: 0; }

/* A one-line staff note in the .staffsource box (which is otherwise a <details>) */
.pf2026-page .pf-staffnote { padding: 1rem var(--gutter-half); font-size: var(--fs-md); line-height: 1.5; color: #333; }
.pf2026-page .pf-staffnote .staffsource-tag { margin-right: 0.6rem; vertical-align: 0.1rem; }
.pf2026-page .pf-staffnote a { color: var(--primary-color); font-weight: 700; text-decoration: underline; }
.pf2026-page .pf-staffnote a:hover { color: var(--secondary-color); }

/* Toolbar: a navy bar with the page's main action on the left and search on the right. It is the
   top of the table's card, so it takes the asset search cards' 2rem corners, and its search field
   is the pill from the keyword search there. */
.pf2026-page .pf-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem var(--gutter); background-color: var(--primary-color); border-radius: 2rem 2rem 0 0; padding: 1.6rem 2rem; }
.pf2026-page .pf-toolbar .btn { flex: 0 0 auto; text-decoration: none; }
.pf2026-page .pf-toolbar .btn:hover, .pf2026-page .pf-toolbar .btn:focus { color: white; }
.pf2026-page .pf-search { position: relative; flex: 0 1 36rem; margin-left: auto; }
.pf2026-page .pf-search .search {
    display: block; width: 100%; height: 4.8rem; margin: 0; border: 0; border-radius: 5rem; box-shadow: none;
    padding: 0 2rem 0 5.2rem; background-color: white;
    font-family: var(--secondary-font); font-size: var(--fs-md); font-weight: normal; color: var(--text-color);
}
.pf2026-page .pf-search .search::placeholder { color: #666; opacity: 1; }
.pf2026-page .pf-search .search:focus { outline: 0.2rem solid var(--sky-blue-color); outline-offset: 0.2rem; }
.pf2026-page .pf-search-go {
    position: absolute; top: 0; left: 0.4rem; width: 4.8rem; height: 4.8rem; border: 0; border-radius: 5rem; padding: 0; cursor: pointer;
    background: url("/images/portal2026/search-icon.png") center center no-repeat transparent;
}

/* Table: light-blue heading row, hairline rows */
.pf2026-page .pf-table-wrap { overflow-x: auto; }
.pf2026-page .pf-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; background: transparent; }
.pf2026-page .pf-table tr { border-bottom: 0.1rem solid #eaeaea; }
.pf2026-page .pf-table th, .pf2026-page .pf-table td {
    height: 5.6rem; border: 0; text-align: left; vertical-align: middle; padding: 1rem var(--td-gutter) 1rem 0;
    font-family: var(--secondary-font); font-size: var(--fs-md); font-weight: normal; line-height: 1.4; color: #333;
}
/* break-word, not anywhere: "anywhere" lets a crowded table split log numbers and initials mid-word */
.pf2026-page .pf-table td { background-color: transparent; overflow-wrap: break-word; }
.pf2026-page .pf-table th { background-color: var(--light-blue-color); white-space: nowrap; }
.pf2026-page .pf-table th, .pf2026-page .pf-table th a { font-family: var(--font-family); font-weight: 700; color: var(--primary-color); text-decoration: none; }
.pf2026-page .pf-table th a:hover { text-decoration: underline; }
/* BidirectionalSortableDataGrid marks the sorted column's heading */
.pf2026-page .pf-table th.dgSortAsc a::after { content: "\25B4"; margin-left: 0.6rem; }
.pf2026-page .pf-table th.dgSortDesc a::after { content: "\25BE"; margin-left: 0.6rem; }
.pf2026-page .pf-table th:first-child, .pf2026-page .pf-table td:first-child { padding-left: var(--td-gutter); }
/* A cell holding only an edit pencil or an icon button is no wider than the icon */
.pf2026-page .pf-table td:has(> .pf-edit), .pf2026-page .pf-table td:has(> .pf-icon-btn) { width: 1%; white-space: nowrap; }
.pf2026-page .pf-table tr:hover td { background-color: #f6f8fe; }
/* A table with many columns of codes: smaller text, tighter columns, headings may wrap */
.pf2026-page .pf-table.pf-table-dense th, .pf2026-page .pf-table.pf-table-dense td { height: 4.8rem; padding-right: 1.4rem; font-size: var(--fs-sm); }
.pf2026-page .pf-table.pf-table-dense th { white-space: normal; }
.pf2026-page .pf-table .pf-edit { display: block; }

.pf2026-page .pf-table td a.pf-link { color: var(--primary-color); font-weight: 700; text-decoration: none; white-space: nowrap; }
.pf2026-page .pf-table td a.pf-link:hover { text-decoration: underline; }

.pf2026-page .pf-status { display: inline-block; border-radius: 5rem; padding: 0.4rem 1.2rem; font-family: var(--font-family); font-size: var(--fs-xs); font-weight: 700; line-height: 1.4; white-space: nowrap; background-color: #eaeaea; color: #555; }
.pf2026-page .pf-status-success { background-color: #e3f3de; color: #1f6a0a; }
.pf2026-page .pf-status-info { background-color: #def1f0; color: #1f5c5b; }
.pf2026-page .pf-status-danger { background-color: #fce4e4; color: #b01313; }
.pf2026-page .pf-status-warning { background-color: #f8f4c4; color: #625c00; }

.pf2026-page .pf-empty { display: block; padding: var(--sm) var(--td-gutter); border-bottom: 0.1rem solid #eaeaea; font-size: var(--fs-md); color: var(--text-color); text-align: center; }

/* ---- Intro text and notes ---- */
.pf2026-page .pf-intro { max-width: 96rem; font-size: var(--fs-md); line-height: 1.6; color: var(--text-color); }
.pf2026-page .pf-intro p + p { margin-top: 1rem; }
.pf2026-page .pf-alert { line-height: 1.5; }
.pf2026-page .pf-alert h3 { margin: 0 0 1rem; padding: 0; font-family: var(--font-family); font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; color: var(--primary-color); }
.pf2026-page .pf-alert p { margin: 0 0 1rem; font-size: var(--fs-md); color: #333; }
.pf2026-page .pf-alert > :last-child { margin-bottom: 0; }

/* ---- Forms. Written for the markup the mtec bs5 controls render, so a control needs no wrapper:
     bs5TextBox       div.mb-3 > label.form-label + .form-control + div.form-text + validator spans
     bs5DropDownList  div.form-group > label.control-label + div.field-group > select.form-control
     bs5CheckBox      div.form-check > input.form-check-input + label.form-check-label
   Fields look like an open section of the profile pages: white, hairline border, 4.8rem tall.
   .pf-fields is a two-column grid; anything with a textarea or a tick-box takes the full width,
   and so does .pf-wide. ---- */
.pf2026-page .pf-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 6rem; align-items: start; }
.pf2026-page .pf-fields > .pf-wide,
.pf2026-page .pf-fields > .form-check, .pf2026-page .pf-fields > :has(> .form-check):not(.pf-stack),
.pf2026-page .pf-fields > :has(> .pf-fields),
.pf2026-page .pf-fields > :has(textarea) { grid-column: 1 / -1; }
/* A column of fields under its own sub-heading, for two groups side by side (one per grid cell) */
.pf2026-page .pf-fields > .pf-stack { display: grid; gap: 2.4rem; align-content: start; }
.pf2026-page .pf-fields > .pf-stack > .pf-subhead { margin: 0; }
/* A field or two that follows something other than fields (a table, say) inside a section */
.pf2026-page .pf-fields.pf-fields-after { margin-top: var(--gutter); }
.pf2026-page .pf-fields .mb-3, .pf2026-page .pf-fields .form-group, .pf2026-page .pf-fields > .pf-alert { margin: 0 !important; padding: 0; }
.pf2026-page .pf-fields > .pf-alert { padding: 1.6rem 2rem; }
/* RadAjaxManager wraps every control it updates in a div with an inline display:inline, and leaves
   the wrapper behind, empty, when the control is hidden. Empty ones must not hold a grid cell. */
.pf2026-page .pf-fields .RadAjaxPanel { display: block !important; }
.pf2026-page .pf-fields .RadAjaxPanel:not(:has(*)) { display: none !important; }

.pf2026-page .pf-fields label.form-label, .pf2026-page .pf-fields label.control-label {
    display: block; margin: 0 0 0.8rem; padding: 0; font-family: var(--font-family); font-size: var(--fs-md); font-weight: 700; line-height: 1.3; color: var(--primary-color);
}
.pf2026-page .pf-fields .form-control {
    display: block; width: 100%; height: 4.8rem; margin: 0; padding: 0 1.6rem; background-color: white; border: 0.1rem solid #cccccc; border-radius: 0; box-shadow: none;
    font-family: var(--secondary-font); font-size: var(--fs-md); line-height: normal; color: #333; appearance: none; -webkit-appearance: none; transition: var(--transition);
}
.pf2026-page .pf-fields textarea.form-control { height: auto; min-height: 14rem; padding: 1.2rem 1.6rem; line-height: 1.5; resize: vertical; }
.pf2026-page .pf-fields select.form-control {
    padding-right: 4.4rem; cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat; background-position: calc(100% - 1.4rem) center; background-size: 1.6rem;
}
.pf2026-page .pf-fields .form-control:focus { outline: none; box-shadow: none; border-color: var(--sky-blue-color); }
/* A field the page has locked reads like a closed profile section: filled, no border */
.pf2026-page .pf-fields .form-control:disabled { background-color: var(--form-control-color); border-color: var(--form-control-color); opacity: 1; color: #333; cursor: default; }
/* Suffix (div.form-text) and Help (span.help-block) text under a field */
.pf2026-page .pf-fields .form-text, .pf2026-page .pf-fields .help-block { display: block; margin: 0.6rem 0 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--text-color); }
/* bs5TextBox gives date and time fields an inline max-width of 115px; in the grid they fill their cell like the rest */
.pf2026-page .pf-fields .form-control[style*="max-width"] { max-width: none !important; }
/* A small note under a table or a field */
.pf2026-page .pf-note { margin: 1.2rem 0 0; padding: 0; font-family: var(--secondary-font); font-size: var(--fs-sm); line-height: 1.4; color: var(--text-color); }
/* A note that is only filled some of the time */
.pf2026-page .pf-alert:empty { display: none; }
/* WebForms validators are spans with an inline color:Red, shown by flipping their display
   (after which the browser rewrites the attribute as "color: red", hence the i) */
.pf2026-page .pf-fields .validator, .pf2026-page .pf-fields span[style*="red" i], .pf2026-page .pf-terms span[style*="red" i] { font-size: var(--fs-sm); line-height: 1.4; color: var(--error-color) !important; }
.pf2026-page .pf-fields .has-error label.control-label { color: var(--error-color); }

/* Tick-boxes: the asset search's square box and tick, on the real input so it keeps the keyboard */
.pf2026-page .pf-fields input[type="checkbox"], .pf2026-page .pf-terms input[type="checkbox"], .pf2026-page .pf-table input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; flex: 0 0 auto; float: none; width: 2.8rem; height: 2.8rem; margin: 0; border: 0.1rem solid #999999; border-radius: 0;
    background: white; box-shadow: none; cursor: pointer;
}
.pf2026-page .pf-fields input[type="checkbox"]:checked, .pf2026-page .pf-terms input[type="checkbox"]:checked, .pf2026-page .pf-table input[type="checkbox"]:checked {
    border-color: #999999; background: url("/images/portal2026/input-check.png") center center / 80% auto no-repeat white;
}
.pf2026-page .pf-fields input[type="checkbox"]:focus-visible, .pf2026-page .pf-terms input[type="checkbox"]:focus-visible, .pf2026-page .pf-table input[type="checkbox"]:focus-visible { outline: 0.2rem solid var(--sky-blue-color); outline-offset: 0.2rem; }
.pf2026-page .pf-table input[type="checkbox"] { display: inline-block; vertical-align: middle; }
.pf2026-page .form-check { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; min-height: 0; margin: 0 !important; padding: 0; }
.pf2026-page .form-check .form-check-label { flex: 0 1 auto; margin: 0; font-family: var(--font-family); font-size: var(--fs-md); font-weight: 700; color: var(--primary-color); cursor: pointer; }
.pf2026-page .form-check .form-text { flex: 0 0 100%; margin: 0; }
/* A radio button's suffix is a span after its label; a tick-box's is a .form-text after the whole
   .form-check, which in a .pf-fields grid would otherwise be a cell of its own a full row gap below */
.pf2026-page .form-check > span[id$="_mySuffix"] { font-family: var(--secondary-font); font-size: var(--fs-sm); color: var(--text-color); }
.pf2026-page .pf-fields > .form-check + .form-text { grid-column: 1 / -1; margin-top: -1.6rem; }

/* Radio buttons: the same box, round, with a navy centre when chosen */
.pf2026-page .pf-fields input[type="radio"] {
    appearance: none; -webkit-appearance: none; flex: 0 0 auto; float: none; width: 2.4rem; height: 2.4rem; margin: 0; border: 0.1rem solid #999999; border-radius: 50%;
    background: white; box-shadow: none; cursor: pointer;
}
.pf2026-page .pf-fields input[type="radio"]:checked { border-color: var(--primary-color); background: radial-gradient(circle, var(--primary-color) 0, var(--primary-color) 42%, white 46%); }
.pf2026-page .pf-fields input[type="radio"]:focus-visible { outline: 0.2rem solid var(--sky-blue-color); outline-offset: 0.2rem; }

/* An option group: a label over a column of radio buttons or tick-boxes (div.field-group > div.form-check).
   The options read as choices, not as field labels. */
.pf2026-page .pf-fields .field-group:has(> .form-check) { display: grid; gap: 1rem; padding-top: 0.2rem; }
.pf2026-page .pf-fields .field-group .form-check-label { font-family: var(--secondary-font); font-weight: normal; line-height: 1.3; color: #333; }

/* A list of tick-boxes: asp:CheckBoxList as a ul (li > span > input + label), or a repeater's own
   li > input + label, optionally under an h3 per group */
.pf2026-page .pf-checks ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 3rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.pf2026-page .pf-checks li, .pf2026-page .pf-checks li > span { display: flex; align-items: center; gap: 0 1.4rem; margin: 0; padding: 0; border: 0; background: none; list-style: none; }
.pf2026-page .pf-checks label { margin: 0; font-family: var(--secondary-font); font-size: var(--fs-md); font-weight: normal; line-height: 1.3; color: #333; cursor: pointer; }
.pf2026-page .pf-checks h3 { margin: 2.4rem 0 1.2rem; padding: 0; font-family: var(--font-family); font-size: var(--fs-md); font-weight: 700; line-height: 1.3; color: var(--tertiary-dark-color); }
.pf2026-page .pf-checks h3:first-child { margin-top: 0.4rem; }

/* A short reference list: a bold key, then its values (the delivery days and their postcode areas) */
.pf2026-page .pf-days { margin: 0 0 var(--gutter); padding: 0; list-style: none; }
.pf2026-page .pf-days li { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 0.4rem 2rem; margin: 0; padding: 1.2rem 0; border-bottom: 0.1rem solid #eaeaea; list-style: none; font-family: var(--secondary-font); font-size: var(--fs-sm); line-height: 1.6; color: #333; }
.pf2026-page .pf-days strong { font-family: var(--font-family); font-weight: 700; color: var(--primary-color); }

/* A value shown, not edited, in a field's place */
.pf2026-page .pf-fields .pf-static { margin: 0; padding: 0; font-family: var(--secondary-font); font-size: var(--fs-md); line-height: 1.5; color: #333; }
.pf2026-page .pf-fields .pf-static + .pf-static { margin-top: 0.6rem; }
.pf2026-page .pf-fields .pf-static code { padding: 0.2rem 0.6rem; background-color: var(--form-control-color); font-size: var(--fs-sm); color: var(--primary-color); }

/* A soft panel for supporting text under the main content (the Manage Users card's tint,
   the asset search cards' corners), with a two-column question-and-answer layout */
.pf2026-page .pf-block + .pf-panel { margin-top: var(--md); }
.pf2026-page .pf-panel { padding: var(--sm); border-radius: 2rem; background-color: #eef1fa; color: #333; }
.pf2026-page .pf-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter) 6rem; }
.pf2026-page .pf-faq h2 { margin: 0 0 1rem; padding: 0; font-family: var(--font-family); font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; color: var(--primary-color); }
.pf2026-page .pf-faq p { margin: 0 0 1rem; font-family: var(--secondary-font); font-size: var(--fs-md); line-height: 1.6; color: #333; }
.pf2026-page .pf-faq p + h2 { margin-top: var(--gutter); }
.pf2026-page .pf-faq p:last-child { margin-bottom: 0; }
.pf2026-page .pf-faq .pf-footnote { margin-top: var(--gutter); font-size: var(--fs-sm); color: var(--text-color); }
.pf2026-page .pf-faq a { color: var(--primary-color); font-weight: 700; text-decoration: underline; }
.pf2026-page .pf-faq a:hover { color: var(--secondary-color); }

/* Look-up card: the asset search's navy keyword card and pill fields, holding bs5TextBoxes and a button */
.pf2026-page .pf-lookup { padding: var(--gutter); border-radius: 2rem; background-color: var(--primary-color); color: white; }
.pf2026-page .pf-lookup h2 { margin: 0 0 var(--gutter); padding: 0; font-family: var(--font-family); font-size: var(--h3); font-weight: 700; line-height: 1.2; color: white; }
.pf2026-page .pf-lookup-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.6rem var(--gutter); }
.pf2026-page .pf-lookup-bar > * { flex: 1 1 26rem; min-width: 0; margin: 0 !important; padding: 0; }
/* The button sits level with the fields, which each have a label line above them */
.pf2026-page .pf-lookup-bar > .btn { flex: 0 0 auto; min-width: 16rem; margin-top: 2.9rem !important; padding: 0 var(--gutter); text-decoration: none; }
.pf2026-page .pf-lookup label.form-label { display: block; margin: 0 0 0.8rem; padding: 0; font-family: var(--font-family); font-size: var(--fs-md); font-weight: 700; line-height: 1.3; color: white; }
.pf2026-page .pf-lookup .form-control {
    display: block; width: 100% !important; height: var(--btn-height); margin: 0; padding: 0 2rem; border: 0; border-radius: 5rem; background-color: white; box-shadow: none;
    font-family: var(--secondary-font); font-size: var(--fs-md); line-height: normal; color: #333;
}
.pf2026-page .pf-lookup .form-control::placeholder { color: #999; opacity: 1; }
.pf2026-page .pf-lookup .form-control:focus { outline: 0.2rem solid var(--sky-blue-color); outline-offset: 0.2rem; }
/* Validator messages on navy: the footer's yellow, not red */
.pf2026-page .pf-lookup .validator, .pf2026-page .pf-lookup span[style*="red" i] { padding: 0.6rem 0 0 2rem; font-size: var(--fs-sm); line-height: 1.4; color: var(--yellow-color) !important; }
.pf2026-page .pf-lookup .alert { margin: var(--gutter) 0 0; padding: 1.6rem 2rem; border: 0; border-radius: 1rem; background-color: white; font-family: var(--secondary-font); font-size: var(--fs-md); line-height: 1.5; color: #333; }
.pf2026-page .pf-lookup h2 + .alert, .pf2026-page .pf-lookup h2 + .RadAjaxPanel > .alert { margin: 0 0 var(--gutter); }
.pf2026-page .pf-lookup .alert-danger { background-color: #fdeeee; }
.pf2026-page .pf-lookup .alert-info { background-color: var(--light-blue-color); color: var(--primary-color); }
.pf2026-page .pf-lookup .alert a { color: var(--primary-color); font-weight: 700; text-decoration: underline; }

/* A sub-heading over each table of a results page, and the "show more" link under one */
.pf2026-page .pf-subhead { margin: var(--sm) 0 1.2rem; padding: 0; font-family: var(--font-family); font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; color: var(--primary-color); }
.pf2026-page .pf-section-header + .pf-subhead { margin-top: 0; }
.pf2026-page .pf-section-header .btn { flex: 0 0 auto; text-decoration: none; }
.pf2026-page .pf-more { margin: 1.6rem 0 0; padding: 0 0 0 var(--td-gutter); }
.pf2026-page a.pf-link { font-family: var(--secondary-font); font-size: var(--fs-md); font-weight: 700; color: var(--primary-color); text-decoration: none; }
.pf2026-page a.pf-link:hover { text-decoration: underline; }

/* Terms box. The page's script adds alert-danger when it is left unticked. */
.pf2026-page .pf-terms { margin: var(--sm) 0 0; padding: var(--sm); border: 0.2rem solid transparent; border-radius: 2rem; background-color: #eef1fa; color: #333; }
.pf2026-page .pf-terms.alert-danger { border-color: var(--error-color); background-color: #fdeeee; }
.pf2026-page .pf-terms h2 { margin: 0 0 1.6rem; padding: 0; font-family: var(--font-family); font-size: var(--h3); font-weight: 700; line-height: 1.2; color: var(--primary-color); }
.pf2026-page .pf-terms ul.disc { margin: 0 0 var(--gutter); padding: 0 0 0 2rem; list-style: disc; }
.pf2026-page .pf-terms ul.disc li { margin: 0 0 0.8rem; padding: 0; list-style: disc; font-family: var(--secondary-font); font-size: var(--fs-md); line-height: 1.5; color: #333; overflow-wrap: anywhere; }
.pf2026-page .pf-terms .form-check { align-items: flex-start; }
.pf2026-page .pf-terms .form-check-label { font-family: var(--secondary-font); line-height: 1.5; color: #333; }

/* A validator, or a validation summary, shown as a box rather than a line. A validator is a span
   whose display is flipped to inline, hence the rule that makes a shown one a block. */
.pf2026-page .pf-error { margin: var(--sm) 0 0; padding: 1.6rem 2rem; border: 0.1rem solid var(--error-color); border-radius: 0.6rem; background-color: #fdeeee; font-family: var(--secondary-font); font-size: var(--fs-md); line-height: 1.5; color: #333 !important; }
.pf2026-page div.pf-error { margin: 0 0 var(--sm); }
.pf2026-page div.pf-error ul { margin: 0; padding: 0 0 0 2rem; list-style: disc; }
.pf2026-page div.pf-error li { list-style: disc; }
.pf2026-page span.pf-error:not([style*="none"]) { display: block !important; }
.pf2026-page .pf-error a { color: var(--primary-color); font-weight: 700; text-decoration: underline; }

/* Submit on the right, as the profile pages' SAVE CHANGES; it stays first in the tab order */
.pf2026-page .pf-actions { display: flex; flex-flow: row-reverse wrap; align-items: center; justify-content: flex-start; gap: 1.2rem 2rem; margin-top: var(--sm); }
.pf2026-page .pf-actions.pf-actions-start { flex-direction: row; }
.pf2026-page .pf-actions .btn { min-width: 22rem; text-decoration: none; }
.pf2026-page .btn.btn-success:hover, .pf2026-page .btn.btn-success:focus, .pf2026-page .btn.btn-sky-blue:hover, .pf2026-page .btn.btn-sky-blue:focus { color: white; }
/* A disabled asp:LinkButton is an <a disabled> with no href */
.pf2026-page .btn:disabled, .pf2026-page .btn[disabled], .pf2026-page .btn.aspNetDisabled { opacity: 0.5; cursor: default; pointer-events: none; }
/* A destructive text link kept apart from the buttons: at the far left of the row */
.pf2026-page .pf-link-danger { font-family: var(--secondary-font); font-size: var(--fs-md); font-weight: 700; color: var(--error-color); text-decoration: none; }
.pf2026-page .pf-link-danger:hover { color: var(--error-color); text-decoration: underline; }
.pf2026-page .pf-actions .pf-link-danger { margin-right: auto; }
/* A panel that follows a form's buttons, with its own button */
.pf2026-page .pf-panel.pf-panel-after { margin-top: var(--md); }
.pf2026-page .pf-panel > p { margin: 0 0 var(--gutter); max-width: 96rem; font-family: var(--secondary-font); font-size: var(--fs-md); line-height: 1.6; color: #333; }
.pf2026-page .pf-panel > .btn { text-decoration: none; }

@media (width < 992px) {
    .pf2026-page .pf-table th, .pf2026-page .pf-table td { font-size: var(--fs-sm); }
    /* Too many columns to squeeze - a wide table keeps its width and the wrap scrolls */
    .pf2026-page .pf-table.pf-table-wide { min-width: 90rem; }
    .pf2026-page .pf-table-wrap { padding-bottom: 1.5rem; }
    .pf2026-page .pf-fields { grid-template-columns: minmax(0, 1fr); }
    .pf2026-page .pf-checks ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf2026-page .pf-faq { grid-template-columns: minmax(0, 1fr); }
}
@media (width < 768px) {
    .pf2026-page { padding: var(--sm) 0; }
    .pf2026-page .pf-toolbar .btn { width: 100%; white-space: normal; height: auto; min-height: var(--btn-height); padding-block: 1rem; text-align: center; }
    .pf2026-page .pf-search { flex: 1 1 100%; }
    .pf2026-page .pf-terms, .pf2026-page .pf-panel, .pf2026-page .pf-lookup { padding: var(--gutter) var(--gutter-half); }
    .pf2026-page .pf-lookup-bar > .btn { flex: 1 1 100%; margin-top: 0 !important; }
    .pf2026-page .pf-section-header { flex-wrap: wrap; gap: 1.2rem 2rem; }
    .pf2026-page .pf-days li { grid-template-columns: minmax(0, 1fr); }
    .pf2026-page .pf-actions .btn { flex: 1 1 100%; }
}
@media (width < 576px) {
    .pf2026-page .pf-checks ul { grid-template-columns: minmax(0, 1fr); }
}

@media (width < 992px) {
    .pf2026-assetresults .table-controls thead tr th { display: block; width: 100%; height: auto; padding: 1rem; }
    .pf2026-assetresults .table-controls thead tr th:first-child > * { padding-left: 0; }
    .pf2026-assetresults .table-controls thead .inline-flex > * { flex: 1 0 0%; }
    .pf2026-assetresults .table-controls thead .inline-flex { gap: var(--gutter-half); }
    .pf2026-assetresults .table-controls thead .nice-select { min-width: 100%; max-width: 100%; }
    .pf2026-assetresults .table tbody p { font-size: var(--fs-sm); }
    .pf2026-assetresults .actions-wrap { width: 18rem; }
    .pf2026-assetresults .grid-view-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (width < 768px) {
    .pf2026-assetresults .table-controls thead .inline-flex { flex-direction: column; }
    .pf2026-assetresults .table-wrap .table { width: 65rem; }
    .pf2026-assetresults .table-wrap { overflow-x: auto; padding-bottom: 1.5rem; }
}
@media (width < 640px) {
    .pf2026-assetresults .grid-view-grid-wrapper { padding: var(--gutter) 0; }
    .pf2026-assetresults .grid-view-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   PORTAL HOME (index.html intro + "what would you like to do" tiles)
   Scoped under .pf2026-portalhome. Ported from NewFrontEnd style.css.
   ===================================================================== */
.pf2026-portalhome *, .pf2026-portalhome *::before, .pf2026-portalhome *::after { box-sizing: border-box; }
.pf2026-portalhome { font-family: var(--font-family); font-size: var(--fs-md); line-height: 1.4; color: var(--text-color); }
.pf2026-portalhome p { margin: 0; font-family: var(--font-family); font-size: var(--fs-md); line-height: 1.4; }
.pf2026-portalhome h1, .pf2026-portalhome h2, .pf2026-portalhome h3 { margin: 0; font-family: var(--font-family); font-weight: 700; line-height: 1.2; }
.pf2026-portalhome h1 { font-size: var(--h1); }
.pf2026-portalhome h2 { font-size: var(--h2, 2.8rem); }
.pf2026-portalhome h3 { font-size: var(--h3); }
.pf2026-portalhome a { color: inherit; text-decoration: none; }
.pf2026-portalhome img { max-width: 100%; height: auto; vertical-align: middle; }
.pf2026-portalhome figure { margin: 0; }
.pf2026-portalhome .container { width: 100%; max-width: calc(1200px + (var(--gutter) * 2)); padding: 0 var(--gutter); margin-inline: auto; }
.pf2026-portalhome .text-center { text-align: center; }
.pf2026-portalhome .fw-bold { font-weight: 700; }
.pf2026-portalhome .primary-color { color: var(--primary-color); }
.pf2026-portalhome .section { padding: var(--sm) 0; }
@media (width < 992px) { .pf2026-portalhome .section { padding: var(--gutter) 0; } }
@media (width < 768px) { .pf2026-portalhome .section { padding: 2rem 0; } }

/* Intro */
.pf2026-portalhome .intro-section { padding-bottom: var(--sm); position: relative; }
.pf2026-portalhome .intro-section h1:not(:last-child) { margin-bottom: var(--gutter-half); }
.pf2026-portalhome .intro-section p { max-width: 90%; margin-inline: auto; }
.pf2026-portalhome .intro-section::after { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); content: ""; width: 22%; height: 0.5rem; background-color: var(--secondary-color); }

/* Post tiles */
.pf2026-portalhome .post-section-header:not(:last-child) { margin-bottom: var(--gutter); }
.pf2026-portalhome .post-block { min-height: 95rem; position: relative; isolation: isolate; }
.pf2026-portalhome .post-block::after { content: ""; z-index: -1; position: absolute; left: 0; top: var(--sm); width: 100%; height: 80%; background: url(/images/portal2026/shape-bg.png) center top no-repeat; background-size: cover; clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%); }
.pf2026-portalhome .posts { padding: var(--sm); padding-top: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
.pf2026-portalhome .post { border-radius: 2rem; overflow: hidden; background-color: white; box-shadow: 0.2rem 0.5rem 2rem rgba(2, 3, 3, 10%); display: block; }
.pf2026-portalhome .post figure { height: 20rem; }
.pf2026-portalhome .post figure img { object-fit: cover; width: 100%; height: 100%; }
.pf2026-portalhome .post-content { padding: var(--sm) 2rem; }
.pf2026-portalhome .post-content article h3 { font-weight: 700; }
.pf2026-portalhome .post-content article > :not(:last-child) { margin-bottom: var(--gutter-half); }
.pf2026-portalhome .post-content article p { line-height: 1.5; }
.pf2026-portalhome .post.secondary h3, .pf2026-portalhome .post.secondary .link { color: var(--secondary-color); }
.pf2026-portalhome .post.primary h3, .pf2026-portalhome .post.primary .link { color: var(--primary-color); }
.pf2026-portalhome .post.tertiary h3, .pf2026-portalhome .post.tertiary .link { color: var(--tertiary-color); }
.pf2026-portalhome .post.skyBlue h3, .pf2026-portalhome .post.skyBlue .link { color: var(--sky-blue-color); }
.pf2026-portalhome .post .link { text-decoration: underline; display: inline-block; }
@media (width < 992px) {
    .pf2026-portalhome .intro-section::after { width: 40%; }
    .pf2026-portalhome .post-block { min-height: auto; }
}
@media (width < 768px) {
    .pf2026-portalhome .posts { grid-template-columns: 1fr; padding: 0 2rem 2rem; }
    .pf2026-portalhome .post-block::after { height: 90%; clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%); }
}