/* ==========================================================================
   Corvue customer portal theme (direction A, "Front desk")

   Every rule here is scoped under .page--portal, the root PortalLayout renders, so staff pages,
   the sign-in pages and the print routes (EmptyLayout) are untouched. Loaded after brand.css.

   Colour: the tenant colour tints accents only (the top rule, the active nav item, primary buttons
   and icon chips). Surfaces and text stay on the --cv-* tokens, so dark mode comes from brand.css.
   The tenant colour arrives as an inline style on .page--portal (PortalBrandingService), already
   validated as #RRGGBB with readable text: --cv-portal-brand, --cv-portal-brand-contrast and
   --cv-portal-brand-hover. Without one, the Corvue default below applies.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
.page--portal {
    /* Brand: the Corvue default (Support teal, theme-aware), replaced by the tenant's colour inline. */
    --cv-portal-brand: var(--cv-tone-support-bg);
    --cv-portal-brand-contrast: var(--cv-tone-support-fg);
    --cv-portal-brand-hover: var(--cv-tone-support-hover);

    /* Derived tints. Custom properties resolve on this element, so they follow an inline brand. */
    --cv-portal-soft-weight: 9%;
    --cv-portal-line-weight: 32%;
    --cv-portal-ink-weight: 88%;
    --cv-portal-brand-soft: color-mix(in srgb, var(--cv-portal-brand) var(--cv-portal-soft-weight), var(--cv-surface));
    --cv-portal-brand-line: color-mix(in srgb, var(--cv-portal-brand) var(--cv-portal-line-weight), var(--cv-surface));
    --cv-portal-brand-ink: color-mix(in srgb, var(--cv-portal-brand) var(--cv-portal-ink-weight), var(--cv-text));
    /* Rules and underlines. The brand itself on light surfaces; lifted towards the text in dark mode. */
    --cv-portal-accent: var(--cv-portal-brand);
    /* Problems ("Something's not working" on Get help): a terracotta from the danger tone, so it stays distinct
       from the tenant colour the requests side uses. Same weights as the brand tints, so dark mode follows. */
    --cv-portal-problem: var(--cv-tone-danger-bg);
    --cv-portal-problem-soft: color-mix(in srgb, var(--cv-portal-problem) var(--cv-portal-soft-weight), var(--cv-surface));
    --cv-portal-problem-ink: color-mix(in srgb, var(--cv-portal-problem) var(--cv-portal-ink-weight), var(--cv-text));

    /* Shell */
    --cv-portal-header-bg: var(--cv-surface);
    --cv-portal-header-text: var(--cv-text);
    --cv-portal-header-height: 4rem;
    --cv-portal-header-rule: 3px;
    --cv-portal-content-max: 75rem;
    --cv-portal-gutter: 2.5rem;
    --cv-portal-canvas: var(--cv-surface);
    --cv-portal-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* The --cv-nav-* tokens re-pointed to a light shell: the staff nav is navy, the portal bar is not. */
    --cv-nav-bg: var(--cv-portal-header-bg);
    --cv-nav-text: var(--cv-text-muted);
    --cv-nav-text-strong: var(--cv-text);
    --cv-nav-muted: var(--cv-text-muted);
    --cv-nav-hover: var(--cv-surface-hover);
    --cv-nav-active: var(--cv-portal-brand-soft);
    --cv-nav-rule: var(--cv-portal-accent);
    --cv-nav-line: var(--cv-border);
    --cv-nav-line-strong: var(--cv-border-strong);
    --cv-nav-focus: var(--cv-focus-color);
    --cv-nav-chip-bg: var(--cv-surface-sunken);
    --cv-nav-scrim: var(--cv-scrim);

    /* --cv-band-*: a Band page header in the portal is a quiet sunken panel, not the staff navy band. */
    --cv-band-bg: var(--cv-surface-sunken);
    --cv-band-text: var(--cv-text);
    --cv-band-muted: var(--cv-text-muted);
    --cv-band-line: var(--cv-border);
    --cv-band-eyebrow: var(--cv-text-muted);

    /* Primary tone: CvButton/CvIconButton Primary and the active CvTabs tab fill with the brand.
       Outlined and text Primary buttons keep the neutral text colour, which always reads. */
    --cv-tone-primary-bg: var(--cv-portal-brand);
    --cv-tone-primary-fg: var(--cv-portal-brand-contrast);
    --cv-tone-primary-hover: var(--cv-portal-brand-hover);
    --cv-tone-primary-line: var(--cv-border-strong);
    --cv-tone-primary-text: var(--cv-text);
    --cv-hover-border: var(--cv-portal-brand-line);

    /* Nothing sticks above portal content: the top bar scrolls away with the page. */
    --cv-shell-top: 0px;
}

[data-bs-theme="dark"] .page--portal {
    --cv-portal-soft-weight: 22%;
    --cv-portal-line-weight: 50%;
    --cv-portal-ink-weight: 55%;
    --cv-portal-accent: color-mix(in srgb, var(--cv-portal-brand) 65%, var(--cv-text));
}

/* A Band page header restores the portal's own surface tokens: the staff band hard-codes white-on-navy
   hover, focus and tone values for its dark surface, which would be wrong on this light panel. */
.page--portal .cv-page-header.cv-page-header--band {
    --cv-surface-hover: inherit;
    --cv-focus-color: inherit;
    --cv-focus-ring: inherit;
    --mud-palette-action-default-hover: inherit;
    --mud-palette-action-disabled: inherit;
    --mud-palette-action-disabled-background: inherit;
    --cv-tone-primary-bg: inherit;
    --cv-tone-primary-fg: inherit;
    --cv-tone-primary-hover: inherit;
    --cv-tone-primary-line: inherit;
    --cv-tone-primary-text: inherit;
    --cv-tone-secondary-bg: inherit;
    --cv-tone-secondary-fg: inherit;
    --cv-tone-secondary-hover: inherit;
    --cv-tone-secondary-line: inherit;
    --cv-tone-secondary-text: inherit;
    --cv-tone-accent-bg: inherit;
    --cv-tone-accent-fg: inherit;
    --cv-tone-accent-hover: inherit;
    --cv-tone-accent-line: inherit;
    --cv-tone-accent-text: inherit;
    --cv-tone-support-bg: inherit;
    --cv-tone-support-fg: inherit;
    --cv-tone-support-hover: inherit;
    --cv-tone-support-line: inherit;
    --cv-tone-support-text: inherit;
    --cv-tone-neutral-bg: inherit;
    --cv-tone-neutral-fg: inherit;
    --cv-tone-neutral-hover: inherit;
    --cv-tone-neutral-line: inherit;
    --cv-tone-neutral-text: inherit;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-card);
}

/* --------------------------------------------------------------------------
   Frame: a single column (no sidebar), a centred content column, the footer last.
   -------------------------------------------------------------------------- */
.page.page--portal {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--cv-portal-canvas);
    color: var(--cv-text);
    font-family: var(--cv-portal-font);
    --mud-typography-default-family: var(--cv-portal-font);
}

.page--portal .portal-main {
    flex: 1 0 auto;
    display: block;
    min-width: 0;
    /* The greeting band reaches the viewport edges from inside the column. */
    overflow-x: clip;
}

.page--portal .portal-content {
    width: 100%;
    max-width: var(--cv-portal-content-max);
    margin: 0 auto;
    padding: 2rem var(--cv-portal-gutter) 0;
}

.page--portal :focus-visible {
    outline: var(--cv-focus-ring);
    outline-offset: var(--cv-focus-offset);
}

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
.page--portal .portal-topbar {
    position: relative;
    z-index: 1030;
    background: var(--cv-portal-header-bg);
    color: var(--cv-portal-header-text);
    border-top: var(--cv-portal-header-rule) solid var(--cv-portal-accent);
    border-bottom: 1px solid var(--cv-nav-line);
}

.page--portal .portal-topbar__inner {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    height: var(--cv-portal-header-height);
    max-width: var(--cv-portal-content-max);
    margin: 0 auto;
    padding: 0 var(--cv-portal-gutter);
}

.page--portal .portal-topbar__brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    min-width: 0;
    color: var(--cv-text);
    text-decoration: none;
    border-radius: var(--cv-radius-control);
}

.page--portal .portal-topbar__logo {
    display: block;
    max-height: 2rem;
    max-width: 10rem;
    object-fit: contain;
}

.page--portal .portal-topbar__wordmark {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Primary nav: muted labels; the current page in the text colour with a 2px accent underline. */
.page--portal .portal-nav {
    align-self: stretch;
    min-width: 0;
}

.page--portal .portal-nav__list {
    display: flex;
    align-items: stretch;
    gap: 0.125rem;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page--portal .portal-nav__item {
    display: flex;
    align-items: stretch;
}

.page--portal .portal-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.75rem;
    color: var(--cv-nav-text);
    font-size: 0.875rem;
    font-weight: 550;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--cv-radius-control) var(--cv-radius-control) 0 0;
}

.page--portal .portal-nav__link:hover {
    color: var(--cv-nav-text-strong);
    background: var(--cv-nav-hover);
}

.page--portal .portal-nav__link.active {
    color: var(--cv-nav-text-strong);
    font-weight: 650;
}

.page--portal .portal-nav__link.active::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: -1px;
    height: 2px;
    background: var(--cv-nav-rule);
}

.page--portal .portal-nav__link:focus-visible {
    outline: 2px solid var(--cv-nav-focus);
    outline-offset: -2px;
}

/* Unread count on Support: neutral chip, the number is the message. */
.page--portal .portal-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: var(--cv-radius-round);
    background: var(--cv-portal-brand);
    color: var(--cv-portal-brand-contrast);
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.page--portal .portal-topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Search entry point: looks like a field, is a link to the knowledge base. */
.page--portal .portal-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 14.5rem;
    height: 2.25rem;
    padding: 0 0.625rem;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-control);
    background: var(--cv-surface-sunken);
    color: var(--cv-text-muted);
    font-size: 0.84375rem;
    text-decoration: none;
}

.page--portal .portal-search:hover {
    border-color: var(--cv-border-strong);
    color: var(--cv-text);
}

.page--portal .portal-search__text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The Get help search: a GET form with a real input (PortalTopBar). The ring sits on the box, not the input. */
.page--portal .portal-search--form {
    width: 17rem;
    cursor: text;
}

.page--portal .portal-search--form:focus-within {
    border-color: var(--cv-portal-brand-line);
    background: var(--cv-surface);
    color: var(--cv-text);
    outline: var(--cv-focus-ring);
    outline-offset: var(--cv-focus-offset);
}

.page--portal .portal-search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cv-text);
    font: inherit;
    text-overflow: ellipsis;
}

.page--portal .portal-search__input::placeholder {
    color: var(--cv-text-muted);
    opacity: 1;
}

.page--portal .portal-search__input:focus,
.page--portal .portal-search__input:focus-visible {
    outline: none;
}

.page--portal .portal-search-icon {
    display: none;
}

/* Icon buttons (ticket updates, the phone menu button, close). */
.page--portal .portal-icon-button {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: var(--cv-radius-control);
    background: transparent;
    color: var(--cv-nav-text);
    font-size: 1.125rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.page--portal .portal-icon-button:hover {
    background: var(--cv-nav-hover);
    color: var(--cv-nav-text-strong);
}

.page--portal .portal-icon-button__dot {
    position: absolute;
    top: 0.5rem;
    right: 0.5625rem;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: var(--cv-radius-round);
    background: var(--cv-portal-accent);
    box-shadow: 0 0 0 2px var(--cv-portal-header-bg);
}

/* Avatars: initials on a soft brand chip. */
.page--portal .portal-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: var(--cv-radius-round);
    background: var(--cv-portal-brand-soft);
    color: var(--cv-portal-brand-ink);
    font-size: 0.75rem;
    font-weight: 700;
}

.page--portal .portal-avatar--large {
    width: 2.625rem;
    height: 2.625rem;
    font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Disclosure menus (More, account): native <details>, panels raised as overlays.
   -------------------------------------------------------------------------- */
.page--portal .portal-more,
.page--portal .portal-account {
    position: relative;
    display: flex;
    align-items: stretch;
}

.page--portal .portal-more > summary,
.page--portal .portal-account > summary,
.page--portal .portal-drawer > summary {
    list-style: none;
}

.page--portal .portal-more > summary::-webkit-details-marker,
.page--portal .portal-account > summary::-webkit-details-marker,
.page--portal .portal-drawer > summary::-webkit-details-marker {
    display: none;
}

.page--portal .portal-more__chevron,
.page--portal .portal-account__chevron {
    font-size: 0.75rem;
    transition: transform var(--cv-motion-fast) var(--cv-ease-out);
}

.page--portal .portal-more[open] .portal-more__chevron,
.page--portal .portal-account[open] .portal-account__chevron {
    transform: rotate(180deg);
}

.page--portal .portal-more__panel,
.page--portal .portal-account__panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    z-index: var(--cv-z-dropdown);
    min-width: 15rem;
    padding: 0.5rem;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
    box-shadow: var(--cv-elevation-overlay);
}

.page--portal .portal-more__panel {
    left: 0;
}

.page--portal .portal-account__panel {
    right: 0;
}

.page--portal .portal-more__group + .portal-more__group {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--cv-border-subtle);
}

.page--portal .portal-more__label {
    margin: 0;
    padding: 0.5rem 0.625rem 0.25rem;
    color: var(--cv-text-muted);
    font-size: var(--cv-label-size);
    font-weight: var(--cv-label-weight);
    letter-spacing: var(--cv-label-tracking);
    text-transform: uppercase;
}

.page--portal .portal-more__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page--portal .portal-more__link,
.page--portal .portal-account__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.25rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--cv-radius-control);
    color: var(--cv-text);
    font-size: 0.875rem;
    text-decoration: none;
}

.page--portal .portal-more__link i,
.page--portal .portal-account__item i {
    color: var(--cv-text-muted);
}

.page--portal .portal-more__link:hover,
.page--portal .portal-account__item:hover {
    background: var(--cv-surface-hover);
    color: var(--cv-text);
}

.page--portal .portal-more__link.active {
    background: var(--cv-nav-active);
    font-weight: 600;
}

.page--portal .portal-more__link.active i {
    color: var(--cv-portal-brand-ink);
}

.page--portal .portal-account__button {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.375rem 0.25rem 0.25rem;
    border-radius: var(--cv-radius-control);
    color: var(--cv-nav-text);
    cursor: pointer;
}

.page--portal .portal-account__button:hover {
    background: var(--cv-nav-hover);
}

.page--portal .portal-account__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--cv-border-subtle);
}

.page--portal .portal-account__identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.page--portal .portal-account__name {
    color: var(--cv-text);
    font-size: 0.875rem;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.page--portal .portal-account__role {
    color: var(--cv-text-muted);
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Phone menu: a right-hand drawer, shown from the menu button below 768px only.
   -------------------------------------------------------------------------- */
.page--portal .portal-drawer {
    display: none;
}

.page--portal .portal-drawer__scrim {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: var(--cv-nav-scrim);
}

.page--portal .portal-drawer__panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1091;
    display: flex;
    flex-direction: column;
    width: min(20rem, 88vw);
    overflow-y: auto;
    background: var(--cv-surface);
    box-shadow: var(--cv-elevation-overlay);
}

.page--portal .portal-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
    padding: 0 0.5rem 0 1rem;
    border-top: var(--cv-portal-header-rule) solid var(--cv-portal-accent);
    border-bottom: 1px solid var(--cv-border);
}

.page--portal .portal-drawer__brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.page--portal .portal-drawer__account {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--cv-text);
    text-decoration: none;
}

.page--portal .portal-drawer__account:hover {
    background: var(--cv-surface-hover);
}

.page--portal .portal-drawer__nav {
    padding: 0.25rem 0.5rem;
}

.page--portal .portal-drawer__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page--portal .portal-drawer__label {
    margin: 0;
    padding: 0.875rem 0.75rem 0.25rem;
    color: var(--cv-text-muted);
    font-size: var(--cv-label-size);
    font-weight: var(--cv-label-weight);
    letter-spacing: var(--cv-label-tracking);
    text-transform: uppercase;
}

.page--portal .portal-drawer__sublabel {
    padding: 0.5rem 0.75rem 0.125rem;
    color: var(--cv-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.page--portal .portal-drawer__link {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 3rem;
    padding: 0 0.75rem;
    border-radius: var(--cv-radius-control);
    color: var(--cv-text);
    font-size: 0.9375rem;
    font-weight: 550;
    text-decoration: none;
}

.page--portal .portal-drawer__link > i {
    color: var(--cv-text-muted);
    font-size: 1.125rem;
}

.page--portal .portal-drawer__link:hover {
    background: var(--cv-surface-hover);
}

.page--portal .portal-drawer__link.active {
    background: var(--cv-nav-active);
    font-weight: 650;
}

.page--portal .portal-drawer__link.active > i {
    color: var(--cv-portal-brand-ink);
}

.page--portal .portal-drawer__badge {
    margin-left: auto;
    padding: 0.125rem 0.5rem;
    border-radius: var(--cv-radius-round);
    background: var(--cv-portal-brand);
    color: var(--cv-portal-brand-contrast);
    font-size: 0.75rem;
    font-weight: 700;
}

.page--portal .portal-drawer__footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.75rem 1rem 1.25rem;
    border-top: 1px solid var(--cv-border);
}

/* Plain-markup buttons for the static shell (Cv* wrappers need a page host). */
.page--portal .portal-shell-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: var(--cv-radius-control);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.page--portal .portal-shell-button--outlined {
    border-color: var(--cv-border-strong);
    background: var(--cv-surface);
    color: var(--cv-text);
}

.page--portal .portal-shell-button--text {
    color: var(--cv-text-muted);
}

.page--portal .portal-shell-button:hover {
    background: var(--cv-surface-hover);
    color: var(--cv-text);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.page--portal .portal-footer {
    margin-top: 3.5rem;
    border-top: 1px solid var(--cv-border);
    color: var(--cv-text-muted);
    font-size: 0.78125rem;
}

.page--portal .portal-footer__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    max-width: var(--cv-portal-content-max);
    margin: 0 auto;
    padding: 1.25rem var(--cv-portal-gutter);
}

.page--portal .portal-footer__contact {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.page--portal .portal-footer a {
    color: inherit;
}

.page--portal .portal-footer__powered {
    margin-left: auto;
}

.page--portal .portal-footer__powered strong {
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Home (portal Dashboard): greeting band, quick tiles, widget cards.
   -------------------------------------------------------------------------- */
.page--portal .portal-greeting {
    /* Full-bleed from inside the content column; .portal-main clips the overflow. */
    margin: -2rem calc(50% - 50vw) 1.5rem;
    padding: 2.25rem calc(50vw - 50%) 2rem;
    background: var(--cv-surface-sunken);
    border-bottom: 1px solid var(--cv-border);
}

.page--portal .portal-greeting .cv-page-header {
    margin-bottom: 0;
}

.page--portal .portal-greeting h1 {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.page--portal .portal-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.875rem;
    margin-bottom: 1.5rem;
}

.page--portal .portal-tile {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
    min-height: 8.25rem;
    padding: 1.125rem;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
    color: var(--cv-text);
    text-decoration: none;
}

.page--portal .portal-tile:hover {
    border-color: var(--cv-hover-border);
    color: var(--cv-text);
}

.page--portal .portal-tile__title {
    font-size: 0.96875rem;
    font-weight: 650;
}

.page--portal .portal-tile__text {
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

.page--portal .portal-tile__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

/* Icon chips: the brand's soft tint with an ink glyph. */
.page--portal .portal-icon-chip {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--cv-radius-card);
    background: var(--cv-portal-brand-soft);
    color: var(--cv-portal-brand-ink);
    font-size: 1.125rem;
}

.page--portal .portal-dashboard-widgets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.page--portal .portal-dashboard-widgets > * {
    min-width: 0;
}

/* Widget cards: CvCard's header glyph takes the brand chip treatment. */
.page--portal .portal-dashboard-widgets .cv-card {
    height: 100%;
    margin: 0;
}

.page--portal .portal-widget__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 1rem;
    border: 1px solid var(--cv-border-subtle);
    border-radius: var(--cv-radius-card);
}

.page--portal .portal-widget__stat {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem 1rem;
    border-right: 1px solid var(--cv-border-subtle);
}

.page--portal .portal-widget__stat:last-child {
    border-right: 0;
}

.page--portal .portal-widget__stat-value {
    color: var(--cv-text);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.page--portal .portal-widget__stat-value--attention {
    color: var(--cv-attention-warning-text);
}

.page--portal .portal-widget__stat-label {
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

.page--portal .portal-widget__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.page--portal .portal-widget__row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Recent activity widget (PORTAL-22): one whole-row link per item. */
.page--portal .portal-activity {
    list-style: none;
    margin: 0;
    padding: 0;
}

.page--portal .portal-activity__item + .portal-activity__item {
    border-top: 1px solid var(--cv-border-subtle);
}

.page--portal .portal-activity__link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0;
    color: inherit;
    text-decoration: none;
}

.page--portal .portal-activity__link:hover .portal-activity__title {
    text-decoration: underline;
}

.page--portal .portal-activity__link:focus-visible {
    outline: var(--cv-focus-ring);
    outline-offset: var(--cv-focus-offset);
}

.page--portal .portal-activity__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: var(--cv-radius-control);
    background: var(--cv-surface-hover);
    color: var(--cv-text-muted);
}

.page--portal .portal-activity__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.page--portal .portal-activity__title {
    color: var(--cv-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.page--portal .portal-activity__detail {
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Sortable table headers (CvSortHeader)
   The wrapper's own colours are the staff Bootstrap primary and a near-black icon, which is the wrong
   accent here and unreadable on a dark surface. In the portal the active column takes the brand ink
   (theme-aware, follows the tenant colour) and the idle icon the muted text colour.
   -------------------------------------------------------------------------- */
.page--portal .cv-table__head .cv-sort-header__button {
    white-space: nowrap;
}

.page--portal .cv-table__head .cv-sort-header__button:hover:not(:disabled),
.page--portal .cv-table__head .cv-sort-header__button--active {
    color: var(--cv-portal-brand-ink);
}

.page--portal .cv-table__head .cv-sort-header__icon {
    color: var(--cv-text-muted);
}

.page--portal .cv-table__head .cv-sort-header__button--active .cv-sort-header__icon {
    color: inherit;
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1099.98px) {
    .page--portal .portal-topbar__inner {
        gap: 1rem;
    }

    .page--portal .portal-search {
        display: none;
    }

    .page--portal .portal-search-icon {
        display: inline-grid;
    }

    .page--portal .portal-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page--portal .portal-dashboard-widgets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phones: the nav and account menu give way to the menu button and drawer. */
@media (max-width: 767.98px) {
    .page--portal {
        --cv-portal-gutter: 1rem;
        --cv-portal-header-height: 3.5rem;
    }

    .page--portal .portal-topbar__inner {
        gap: 0.375rem;
        padding-right: 0.625rem;
    }

    .page--portal .portal-nav,
    .page--portal .portal-account,
    .page--portal .portal-topbar__updates {
        display: none;
    }

    .page--portal .portal-drawer {
        display: block;
    }

    .page--portal .portal-icon-button {
        width: 2.75rem;
        height: 2.75rem;
    }

    .page--portal .portal-content {
        padding-top: 1.25rem;
    }

    .page--portal .portal-greeting {
        margin-top: -1.25rem;
        padding-top: 1.375rem;
        padding-bottom: 1.25rem;
    }

    .page--portal .portal-greeting h1 {
        font-size: 1.5rem;
    }

    .page--portal .portal-tiles {
        gap: 0.625rem;
    }

    .page--portal .portal-tile {
        min-height: 6rem;
        padding: 0.875rem;
    }

    .page--portal .portal-dashboard-widgets {
        grid-template-columns: minmax(0, 1fr);
    }

    .page--portal .portal-footer__powered {
        margin-left: 0;
    }
}

@media (pointer: coarse) {
    .page--portal .portal-more__link,
    .page--portal .portal-account__item {
        min-height: 2.75rem;
    }
}

/* ==========================================================================
   Portal pages, restyle batch 5a (PORTAL-14): Account, Company, Portal users, Knowledge and the
   article page. Additive only: every rule is scoped under .page--portal and uses the --cv-* and
   --cv-portal-* tokens above, so dark mode comes from brand.css and the tenant colour from the shell.
   ========================================================================== */

/* Two-column page body: the main column, then a narrower aside. One column below 992px. */
.page--portal .portal-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.page--portal .portal-page-grid__main,
.page--portal .portal-page-grid__aside {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.page--portal .portal-page-grid .cv-card {
    margin: 0;
}

/* Facts (label above value) in two columns on anything wider than a phone. Each cell is its own
   CvFactList, so the fact styling stays with CvFact's scoped stylesheet. */
.page--portal .portal-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}

.page--portal .portal-facts .portal-facts__wide {
    grid-column: 1 / -1;
}

.page--portal .portal-note {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--cv-border-subtle);
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

.page--portal .portal-stack {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.page--portal .portal-stack--form {
    gap: 1rem;
}

.page--portal .portal-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.page--portal .portal-tips {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.page--portal .portal-tips li {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
}

.page--portal .portal-tips i {
    color: var(--cv-portal-brand-ink);
}

.page--portal .portal-muted {
    margin: 0;
    color: var(--cv-text-muted);
    font-size: 0.875rem;
}

/* People: the company's contacts and the portal users list. One row per person; wraps on a phone. */
.page--portal .portal-people {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page--portal .portal-person {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--cv-border-subtle);
}

.page--portal .portal-person:first-child {
    padding-top: 0;
}

.page--portal .portal-person:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.page--portal .portal-person__main {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1 1 16rem;
    min-width: 0;
}

.page--portal .portal-person__identity {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.page--portal .portal-person__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--cv-text);
    font-weight: 600;
}

.page--portal .portal-person__line {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

.page--portal .portal-person__line a {
    color: inherit;
}

.page--portal .portal-person__status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    flex: 0 1 11rem;
    min-width: 0;
}

.page--portal .portal-person__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex: 0 1 auto;
    margin-left: auto;
}

.page--portal .portal-person__role {
    min-width: 11rem;
}

/* Knowledge base: a category rail beside the results; the rail becomes a select below 992px. */
.page--portal .portal-kb-search {
    margin-bottom: 1.5rem;
}

.page--portal .portal-kb-search__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-top: 0.5rem;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

.page--portal .portal-kb {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.page--portal .portal-kb__rail {
    position: sticky;
    top: 1rem;
    min-width: 0;
}

.page--portal .portal-kb__rail-label {
    margin: 0 0 0.375rem;
    padding: 0 0.625rem;
    color: var(--cv-text-muted);
    font-size: var(--cv-label-size);
    font-weight: var(--cv-label-weight);
    letter-spacing: var(--cv-label-tracking);
    text-transform: uppercase;
}

.page--portal .portal-kb__categories {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page--portal .portal-kb__category {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    min-height: 2.25rem;
    padding: 0.375rem 0.625rem;
    border: 0;
    border-radius: var(--cv-radius-control);
    background: transparent;
    color: var(--cv-text);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

.page--portal .portal-kb__category i {
    color: var(--cv-text-muted);
}

.page--portal .portal-kb__category:hover {
    background: var(--cv-surface-hover);
}

.page--portal .portal-kb__category[aria-pressed="true"] {
    background: var(--cv-nav-active);
    font-weight: 650;
}

.page--portal .portal-kb__category[aria-pressed="true"] i {
    color: var(--cv-portal-brand-ink);
}

.page--portal .portal-kb__category-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.page--portal .portal-kb__count {
    color: var(--cv-text-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.page--portal .portal-kb__select {
    display: none;
    margin-bottom: 1rem;
}

.page--portal .portal-kb__results {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    min-width: 0;
}

.page--portal .portal-kb__group-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    color: var(--cv-text);
    font-size: 0.96875rem;
    font-weight: 650;
}

.page--portal .portal-kb__group-title i {
    color: var(--cv-portal-brand-ink);
}

.page--portal .portal-kb__group-count {
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.page--portal .portal-kb-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
}

.page--portal .portal-kb-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--cv-border-subtle);
}

.page--portal .portal-kb-row:last-child {
    border-bottom: 0;
}

.page--portal .portal-kb-row:hover {
    background: var(--cv-surface-hover);
}

.page--portal .portal-kb-row .portal-icon-chip {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
}

.page--portal .portal-kb-row__main {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

/* The title is the row's link, and its ::before covers the row so a click anywhere opens the article.
   The row's own buttons sit above the overlay (docs/ui.md: whole-card navigation is a real <a href>). */
.page--portal .portal-kb-row__title {
    color: var(--cv-text);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.page--portal .portal-kb-row__title::before {
    content: "";
    position: absolute;
    inset: 0;
}

.page--portal .portal-kb-row:hover .portal-kb-row__title {
    text-decoration: underline;
}

.page--portal .portal-kb-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

.page--portal .portal-kb-row__actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: none;
}

.page--portal .portal-kb-row__chevron {
    flex: none;
    color: var(--cv-text-muted);
}

.page--portal .portal-help-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface-sunken);
}

.page--portal .portal-help-card__text {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.page--portal .portal-help-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
}

/* Article: a comfortable reading column. */
.page--portal .portal-article {
    max-width: 46rem;
}

.page--portal .portal-article .cv-card {
    margin: 0;
}

.page--portal .portal-article__body {
    color: var(--cv-text);
    font-size: 1rem;
    line-height: 1.7;
}

.page--portal .portal-article__body h1,
.page--portal .portal-article__body h2,
.page--portal .portal-article__body h3,
.page--portal .portal-article__body h4 {
    margin: 1.75rem 0 0.75rem;
    line-height: 1.3;
}

.page--portal .portal-article__body > :first-child {
    margin-top: 0;
}

.page--portal .portal-article__body p,
.page--portal .portal-article__body ul,
.page--portal .portal-article__body ol {
    margin-bottom: 1rem;
}

.page--portal .portal-article__body a {
    color: var(--cv-portal-brand-ink);
}

.page--portal .portal-article__resource {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.page--portal .portal-article__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.25rem;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

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

    .page--portal .portal-kb__rail {
        display: none;
    }

    .page--portal .portal-kb__select {
        display: block;
    }
}

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

    .page--portal .portal-person__actions {
        justify-content: flex-start;
        width: 100%;
        margin-left: 0;
    }

    .page--portal .portal-person__role {
        flex: 1 1 100%;
    }

    .page--portal .portal-kb-row {
        flex-wrap: wrap;
    }

    .page--portal .portal-kb-row__chevron {
        display: none;
    }

    .page--portal .portal-kb-row__actions {
        width: 100%;
        padding-left: 3.125rem;
    }
}

/* ==========================================================================
   vCIO and integrations (batch 5c, PORTAL-14): vCIO reports, Documents, Integrations.
   Additive only: every rule is scoped under .page--portal and uses the --cv-* and --cv-portal-*
   tokens above, so dark mode comes from brand.css and the tenant colour from the shell. The report
   presentation itself is not restyled here: the PDF print route renders the same section components.
   ========================================================================== */

/* Document lists: vCIO reports, Documents (grouped by month) and a document's files. One row per
   item; the title is a real link whose ::before covers the row, and row actions sit above it. */
.page--portal .portal-doclist {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.page--portal .portal-doclist__group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.page--portal .portal-doclist__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0 0.25rem;
}

.page--portal .portal-doclist__title {
    margin: 0;
    color: var(--cv-text-muted);
    font-size: var(--cv-label-size);
    font-weight: var(--cv-label-weight);
    letter-spacing: var(--cv-label-tracking);
    text-transform: uppercase;
}

.page--portal .portal-doclist__count {
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.page--portal .portal-doclist__rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
    overflow: hidden;
}

/* Inside a card the card is the frame. */
.page--portal .portal-doclist__rows--flush {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.page--portal .portal-docrow {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 4rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cv-border-subtle);
}

.page--portal .portal-docrow:last-child {
    border-bottom: 0;
}

.page--portal .portal-docrow:hover:has(.portal-docrow__link) {
    background: var(--cv-surface-hover);
}

.page--portal .portal-docrow:has(.portal-docrow__link:focus-visible) {
    outline: var(--cv-focus-ring);
    outline-offset: calc(-1 * var(--cv-focus-offset) - 2px);
}

.page--portal .portal-doclist__rows--flush .portal-docrow {
    padding-left: 0;
    padding-right: 0;
}

.page--portal .portal-docrow .portal-icon-chip {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
}

.page--portal .portal-docrow__main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.page--portal .portal-docrow__link,
.page--portal .portal-docrow__name {
    color: var(--cv-text);
    font-size: 0.9375rem;
    font-weight: 600;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.page--portal .portal-docrow__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.page--portal .portal-docrow__link:hover {
    color: var(--cv-portal-brand-ink);
}

.page--portal .portal-docrow__link:focus-visible {
    outline: none;
}

.page--portal .portal-docrow__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem 1rem;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

.page--portal .portal-docrow__date {
    flex: none;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.page--portal .portal-docrow__chevron {
    flex: none;
    color: var(--cv-text-muted);
}

.page--portal .portal-docrow__actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex: none;
    gap: 0.5rem;
}

/* Documents filters: folder, then search. One column on a phone. */
.page--portal .portal-docs__filters {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 0.75rem;
}

/* vCIO report: the shared presentation view inside the portal column. */
.page--portal .portal-vcio-report {
    min-width: 0;
}

/* Integrations: link tiles, three across, two on a tablet, one on a phone. */
.page--portal .portal-integrations {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.page--portal .portal-integrations .portal-integration-card {
    height: 100%;
    margin: 0;
}

.page--portal .portal-integrations .portal-integration-card:hover {
    border-color: var(--cv-hover-border);
}

.page--portal .portal-integration-card .cv-card__icon {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--cv-radius-card);
    background: var(--cv-portal-brand-soft);
    color: var(--cv-portal-brand-ink);
    font-size: 1.125rem;
}

.page--portal .portal-integration-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.page--portal .portal-integration-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.page--portal .portal-integration-card:hover .portal-integration-card__more {
    color: var(--cv-portal-brand-ink);
}

.page--portal .portal-integration-detail {
    min-width: 0;
}

@media (max-width: 1099.98px) {
    .page--portal .portal-integrations {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phones: rows wrap so the action drops under the title, and the date joins the meta line. */
@media (max-width: 767.98px) {
    .page--portal .portal-integrations,
    .page--portal .portal-docs__filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .page--portal .portal-docrow {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.5rem 0.75rem;
        padding: 0.75rem;
    }

    .page--portal .portal-docrow__main {
        flex-basis: calc(100% - 3rem);
    }

    .page--portal .portal-docrow__date {
        order: 3;
        margin-left: 3rem;
    }

    .page--portal .portal-docrow__chevron {
        display: none;
    }

    .page--portal .portal-docrow__actions {
        order: 4;
        width: 100%;
        padding-left: 3rem;
    }
}

/* ==========================================================================
   vCIO assessments and recommendations (batch 5d, PORTAL-14): Assessments, an assessment,
   the IT roadmap and a roadmap project.
   Additive only: every rule is scoped under .page--portal and uses the --cv-*, --cv-portal-* and
   --status-* tokens, so dark mode comes from brand.css and the tenant colour from the shell. The
   list rows reuse batch 5c's .portal-doclist / .portal-docrow ("vCIO and integrations (batch 5c)"),
   so that section must be present too. The assessment print route is not restyled here.
   ========================================================================== */

/* A status badge in a list row, beside the chevron. */
.page--portal .portal-docrow__status {
    flex: none;
}

/* Assessment: the score summary card, then one card per section. */
.page--portal .portal-assessment,
.page--portal .portal-project,
.page--portal .portal-roadmap {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.page--portal .portal-assessment .cv-card,
.page--portal .portal-project .cv-card {
    margin: 0;
}

.page--portal .portal-assessment__subhead {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.25rem 0 0.75rem;
    color: var(--cv-text-muted);
    font-size: var(--cv-label-size);
    font-weight: var(--cv-label-weight);
    letter-spacing: var(--cv-label-tracking);
    text-transform: uppercase;
}

.page--portal .portal-assessment__muted {
    margin: 0;
    color: var(--cv-text-muted);
}

/* A score: name and percentage badge, an optional meter, then the points. */
.page--portal .portal-score {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--cv-border-subtle);
    border-radius: var(--cv-radius-card);
    background: var(--cv-surface);
}

.page--portal .portal-score--overall {
    background: var(--cv-surface-sunken);
}

.page--portal .portal-score__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.page--portal .portal-score__label {
    color: var(--cv-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.page--portal .portal-score__points {
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.page--portal .portal-score__meter {
    height: 0.5rem;
    border-radius: var(--cv-radius-chip);
    background: var(--cv-border-subtle);
    overflow: hidden;
}

.page--portal .portal-score__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--cv-text-muted);
}

.page--portal .portal-score__fill--success {
    background: var(--status-satisfactory);
}

.page--portal .portal-score__fill--warning {
    background: var(--status-needs-attention);
}

.page--portal .portal-score__fill--danger {
    background: var(--status-at-risk);
}

.page--portal .portal-score-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A section's questions: the question, its guidance, then the answer given. */
.page--portal .portal-answers {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page--portal .portal-answer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--cv-border-subtle);
}

.page--portal .portal-answer:first-child {
    padding-top: 0;
}

.page--portal .portal-answer:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.page--portal .portal-answer__name {
    color: var(--cv-text);
    font-weight: 600;
}

.page--portal .portal-answer__hint {
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

.page--portal .portal-answer__response {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    color: var(--cv-text);
}

/* IT roadmap: the status filter, then one row per project with its costs on the right. */
.page--portal .portal-roadmap__filter {
    align-self: flex-start;
}

.page--portal .portal-roadmap__row {
    align-items: flex-start;
}

.page--portal .portal-roadmap__description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--cv-text-muted);
    font-size: 0.875rem;
}

.page--portal .portal-roadmap__meta {
    align-items: center;
    margin-top: 0.25rem;
}

.page--portal .portal-roadmap__due--overdue,
.page--portal .portal-project__meta--overdue {
    color: var(--status-at-risk-text);
    font-weight: 600;
}

.page--portal .portal-roadmap__costs {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.page--portal .portal-roadmap__cost {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.page--portal .portal-roadmap__cost strong {
    color: var(--cv-text);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

/* Roadmap project: overview, costs, totals, then the decision. */
.page--portal .portal-project__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}

.page--portal .portal-project__meta {
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

.page--portal .portal-project__heading {
    margin: 1rem 0 0.25rem;
    color: var(--cv-text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.page--portal .portal-project__text {
    margin: 0;
    color: var(--cv-text);
    white-space: pre-line;
}

.page--portal .portal-project__text--muted {
    color: var(--cv-text-muted);
}

.page--portal .portal-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.page--portal .portal-project__billing {
    color: var(--cv-text-muted);
    font-size: 0.8125rem;
}

.page--portal .portal-facts {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.page--portal .portal-facts__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--cv-border-subtle);
}

.page--portal .portal-facts__row:last-child {
    border-bottom: 0;
}

.page--portal .portal-facts dt {
    color: var(--cv-text-muted);
    font-weight: 600;
}

.page--portal .portal-facts dd {
    margin: 0;
    color: var(--cv-text);
    font-variant-numeric: tabular-nums;
}

.page--portal .portal-project__quote {
    margin-top: 0.5rem;
}

.page--portal .portal-project__decision-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

@media (max-width: 1099.98px) {
    .page--portal .portal-score-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phones: one score per line, and a project's costs drop under its title. */
@media (max-width: 767.98px) {
    .page--portal .portal-score-grid,
    .page--portal .portal-facts__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .page--portal .portal-facts__row {
        gap: 0.125rem;
    }

    .page--portal .portal-roadmap__costs {
        order: 3;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.25rem 1rem;
        margin-left: 3rem;
    }

    .page--portal .portal-docrow__status {
        order: 2;
    }
}