.portal-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--metro-bg, var(--bs-body-bg));
}

/* ============================================================================
   Portal v2 chrome (citizen / resident). Same product family as staff dash-v2
   cards — not a staff ops dashboard. Accent comes from city branding.
   ========================================================================== */
:root,
.login-bg,
.public-branded-shell,
.portal-v2 {
    /* Formalized portal-v2 tokens — Hybrid golf/parks must reuse these, not fork. */
    --portal-accent: var(--metro-city-primary, var(--metro-primary, #1a56db));
    --portal-accent-deep: color-mix(in srgb, var(--portal-accent) 78%, #0f172a);
    --portal-line: var(--metro-border);
    --portal-ink: var(--metro-text, #111827);
    --portal-muted: var(--metro-text-muted);
    --portal-tile: var(--metro-surface-raised);
    --portal-radius: var(--radius-xl, 1rem);
    --portal-space-1: var(--space-1, .25rem);
    --portal-space-2: var(--space-2, .5rem);
    --portal-space-3: var(--space-3, .75rem);
    --portal-space-4: var(--space-4, 1rem);
    --portal-space-5: var(--space-6, 1.5rem);
    --portal-type-kicker: .68rem;
    --portal-type-body: .9375rem;
    --portal-type-title: 1.25rem;
    --portal-motion-wink: 420ms;
    --portal-motion-celebrate: 520ms;
    --portal-motion-context: 280ms;
    --portal-shadow: var(--shadow-1, 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .045));
    --portal-shadow-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 12px 28px color-mix(in srgb, var(--portal-accent) 14%, transparent);
    color: var(--portal-ink);
}

.portal-v2-kicker {
    color: var(--portal-muted);
    display: block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .095em;
    text-transform: uppercase;
}

.portal-v2-card {
    background: var(--metro-surface, #fff);
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow);
    color: inherit;
    height: 100%;
    padding: 1.15rem;
}

.portal-v2-card--flush {
    padding: 0;
}

/* A portal card that is also a Bootstrap .card: feed Bootstrap's own variables so .card cannot
   undo the portal look when Bootstrap loads after portal.css (the web host). */
.card.portal-v2-card {
    --bs-card-bg: var(--metro-surface, #fff);
    --bs-card-border-color: var(--portal-line);
    --bs-card-border-radius: var(--portal-radius);
    --bs-card-inner-border-radius: var(--portal-radius);
    --bs-card-height: 100%;
}

a.portal-v2-card {
    display: block;
}

button.portal-v2-card {
    cursor: pointer;
    display: block;
    font: inherit;
    overflow: hidden;
    text-align: start;
}

.portal-request-card__head {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    min-width: 0;
}

.portal-request-card__title {
    flex: 1 1 auto;
    min-width: 0;
}

.portal-request-card__title .fw-semibold,
.portal-request-card__title small {
    overflow-wrap: break-word;
}

.portal-request-card__badge {
    flex: 0 1 auto;
    max-width: 9.5rem;
}

.portal-request-card__badge .badge {
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
}

a.portal-v2-card:hover,
a.portal-v2-card:focus-visible,
button.portal-v2-card:hover,
button.portal-v2-card:focus-visible {
    border-color: color-mix(in srgb, var(--portal-accent) 40%, var(--portal-line));
    box-shadow: var(--portal-shadow-hover);
    color: inherit;
}

.portal-v2-card__head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: .85rem;
}

.portal-v2-card__head h2 {
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -.015em;
    margin: .12rem 0 0;
}

.portal-v2-card__head > a {
    color: var(--portal-accent);
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.portal-v2-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.portal-v2-chip-row > a,
.portal-v2-chip-row > button {
    align-items: center;
    background: var(--portal-tile);
    border: 1px solid var(--portal-line);
    border-radius: .7rem;
    color: var(--portal-ink);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    gap: .35rem;
    min-height: 40px;
    padding: .4rem .75rem;
    text-decoration: none;
}

.portal-v2-chip-row > a.portal-v2-chip--primary,
.portal-v2-chip-row > button.portal-v2-chip--primary {
    background: var(--portal-accent);
    border-color: var(--portal-accent);
    color: var(--metro-on-primary, #fff);
}

.portal-v2-list {
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow);
    overflow: hidden;
}

.portal-v2-seg {
    background: var(--metro-surface-muted, #f1f5f9);
    border: 1px solid var(--portal-line);
    border-radius: .75rem;
    display: inline-flex;
    padding: .2rem;
}

.portal-v2-seg > button {
    background: transparent;
    border: 0;
    border-radius: .55rem;
    color: var(--portal-muted);
    font-size: .82rem;
    font-weight: 700;
    min-height: 40px;
    padding: .35rem .75rem;
}

.portal-v2-seg > button.is-active {
    background: var(--metro-surface, #fff);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
    color: var(--portal-ink);
}

@media (hover: hover) and (pointer: fine) {
    .portal-v2-chip-row > a:hover,
    .portal-v2-chip-row > button:hover {
        border-color: color-mix(in srgb, var(--portal-accent) 45%, var(--portal-line));
        color: var(--portal-accent-deep);
    }
    .portal-v2-chip-row > a.portal-v2-chip--primary:hover,
    .portal-v2-chip-row > button.portal-v2-chip--primary:hover {
        background: var(--portal-accent-deep);
        border-color: var(--portal-accent-deep);
        color: var(--metro-on-primary, #fff);
    }
    .portal-v2-card__head > a:hover { text-decoration: underline; }
    .portal-lane-tile:hover {
        border-color: color-mix(in srgb, var(--portal-accent) 40%, var(--portal-line));
        box-shadow: var(--portal-shadow-hover);
        color: inherit;
    }
}

.portal-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: transparent;
    border-bottom: 1px solid var(--metro-border, var(--bs-border-color));
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    isolation: isolate;
    transition:
        border-color var(--duration-ui, 200ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
        box-shadow var(--duration-ui, 200ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.portal-header::before {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: color-mix(in srgb, var(--metro-surface, #fff) 92%, transparent);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.portal-header-inner {
    gap: 0.75rem;
}

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

.portal-here {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.portal-here-kicker {
    margin-bottom: 0.05rem;
}

.portal-acting {
    display: flex;
    flex-direction: column;
    margin-top: 0.35rem;
    min-width: 0;
}

.portal-acting-kicker {
    margin-bottom: 0.05rem;
}

.portal-acting-title {
    color: inherit;
    line-height: 1.2;
}

.portal-acting-btn {
    font-size: 0.85rem;
    font-weight: 650;
}

.portal-acting-required {
    background: var(--metro-surface, #fff);
    border: 1px solid var(--portal-line);
    border-left: 4px solid var(--portal-accent);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow);
    padding: 1.25rem 1.3rem 1.4rem;
}

.portal-acting-required__title {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: .2rem 0 .45rem;
}

.portal-acting-required__lede {
    color: var(--portal-muted);
    font-size: 1.02rem;
    margin-bottom: 1rem;
}

.portal-acting-picks {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
}

.portal-acting-pick {
    background: var(--portal-tile);
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow);
    color: inherit;
    cursor: pointer;
    min-height: 7.25rem;
    padding: 1.15rem 1.2rem;
    text-align: left;
}

.portal-acting-pick__address {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.portal-acting-pick__nick {
    color: var(--portal-muted);
    display: block;
    font-size: .98rem;
    font-weight: 650;
    margin-top: .3rem;
}

.portal-acting-pick__kind {
    color: var(--portal-muted);
    display: block;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-top: .55rem;
    text-transform: uppercase;
}

.portal-acting-for-banner {
    align-items: baseline;
    background: color-mix(in srgb, var(--portal-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--portal-accent) 22%, var(--portal-line));
    border-radius: .85rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .7rem;
    margin-bottom: 1rem;
    padding: .7rem 1rem;
}

.portal-acting-for-banner--compact {
    background: transparent;
    border: 0;
    margin-bottom: .65rem;
    padding: 0;
}

.portal-acting-for-banner__name {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.portal-acting-for-banner--compact .portal-acting-for-banner__name {
    font-size: 1.02rem;
}

.portal-acting-for-banner__nick {
    color: var(--portal-muted);
    font-size: .92rem;
    font-weight: 650;
}

@media (hover: hover) and (pointer: fine) {
    .portal-acting-pick:hover,
    .portal-acting-pick:focus-visible {
        border-color: color-mix(in srgb, var(--portal-accent) 45%, var(--portal-line));
        box-shadow: var(--portal-shadow-hover);
    }
}

.portal-switcher {
    position: relative;
}

/* button. so it beats Bootstrap's .btn in either load order (portal.css loads before it on the web). */
button.portal-switcher-btn {
    align-items: center;
    background: var(--portal-tile, #f8fafc);
    border: 1px solid var(--portal-line, #e4e7ec);
    border-radius: 0.7rem;
    color: inherit;
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 700;
    gap: 0.4rem;
    max-width: min(18rem, 56vw);
    min-height: 2.5rem;
    padding: 0.3rem 0.7rem;
}

.portal-switcher-btn__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-switcher-menu {
    min-width: min(16rem, 90vw);
}

.portal-switcher-menu .dropdown-item {
    min-height: var(--metro-touch-target-min, 48px);
    align-items: center;
    display: flex;
}

[data-theme="dark"] .portal-switcher-btn,
[data-theme="dark"] .portal-hub-hero,
[data-theme="dark"] .portal-notify-preview__sample {
    background: var(--metro-surface-raised, #1e293b);
    border-color: rgba(255, 255, 255, 0.08);
}

.portal-hub-hero {
    background: var(--metro-surface, #fff);
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow);
    margin-bottom: 1.25rem;
    padding: 1.15rem 1.2rem;
}

.portal-hub-hero__title {
    font-size: 1.55rem;
    font-weight: 750;
    letter-spacing: -.02em;
    margin: 0.15rem 0 0.35rem;
}

.portal-hub-hero__subtitle {
    color: var(--portal-muted);
    margin-bottom: 0.75rem;
}

.portal-hub-hero__body {
    margin-bottom: 0.75rem;
}

.portal-request-status-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.1rem;
    margin-top: 0.65rem;
}

.portal-request-status-facts__item {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 6.5rem;
}

.portal-request-status-facts__item > span:last-child {
    font-size: 0.82rem;
    font-weight: 650;
}

.portal-notify-preview {
    margin-bottom: 1rem;
}

.portal-notify-preview .alert ul {
    margin-bottom: 0.35rem;
}

.portal-confirm-celebrate {
    background: color-mix(in srgb, var(--portal-accent) 6%, var(--metro-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--portal-accent) 22%, var(--portal-line));
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow);
    margin-bottom: 0.75rem;
    padding: 1.35rem 1.2rem 1.15rem;
    text-align: center;
}

.portal-confirm-celebrate__mark {
    align-items: center;
    animation: portal-confirm-soft 0.7s var(--ease-out, ease) both;
    background: color-mix(in srgb, var(--portal-accent) 14%, var(--metro-surface));
    border-radius: 999px;
    color: var(--portal-accent);
    display: inline-flex;
    font-size: 1.55rem;
    height: 3rem;
    justify-content: center;
    margin-bottom: 0.65rem;
    width: 3rem;
}

.portal-confirm-celebrate__title {
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    margin: 0 0 0.35rem;
}

.portal-confirm-celebrate__lede {
    margin: 0 0 0.35rem;
}

.portal-confirm-celebrate__find {
    color: var(--portal-ink, #111827);
    font-size: 0.95rem;
    font-weight: 650;
    margin: 0.85rem 0 0.45rem;
}

.portal-confirm-celebrate__track {
    margin: 0.65rem auto 0.75rem;
    max-width: 22rem;
    text-align: left;
}

.portal-confirm-celebrate__actions {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.85rem;
}

.portal-confirm-celebrate__cta {
    font-size: 1.05rem;
    font-weight: 750;
    min-height: var(--metro-touch-target-min, 48px);
}

.portal-layout:has(.portal-confirm-celebrate) .metro-fab-stack {
    display: none;
}

.portal-request-glance {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: flex-end;
}

.portal-request-glance__chip {
    border: 1px solid var(--portal-line);
    border-radius: 999px;
    color: var(--portal-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding: 0.22rem 0.5rem;
}

.portal-request-glance__chip.is-current {
    background: var(--portal-accent);
    border-color: var(--portal-accent);
    color: var(--metro-on-primary, #fff);
}

.portal-lane-tiles {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
    margin-bottom: 0.9rem;
}

@media (min-width: 576px) {
    .portal-lane-tiles {
        grid-template-columns: 1fr 1fr;
    }
}

.portal-lane-tile {
    align-items: flex-start;
    background: var(--metro-surface, #fff);
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow);
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 8.25rem;
    padding: 1rem 1.05rem;
    text-align: left;
}

.portal-lane-tile > i {
    color: var(--portal-accent);
    font-size: 1.25rem;
    margin-bottom: 0.15rem;
}

.portal-lane-tile__title {
    font-size: 0.98rem;
    font-weight: 750;
    letter-spacing: -0.015em;
}

.portal-lane-tile__hint {
    color: var(--portal-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.citizen-problem-tiles .btn {
    min-height: 7.5rem;
}

@keyframes portal-confirm-soft {
    0% { opacity: 0; transform: scale(0.86); }
    70% { opacity: 1; transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}

.portal-notify-preview__sample {
    background: var(--portal-tile);
    border: 1px dashed var(--portal-line);
    border-radius: 0.75rem;
    color: var(--portal-muted);
    font-size: 0.82rem;
    margin-top: -0.35rem;
    padding: 0.7rem 0.85rem;
}

.portal-notify-preview__sample p {
    margin: 0.15rem 0 0;
}

.portal-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    min-width: 0;
}

.portal-header .accessibility-quick-toggles--portal > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.35rem 0.55rem;
    line-height: 1.1;
    min-width: 2.25rem;
}

.portal-header .accessibility-quick-toggles__menu {
    min-width: 13.5rem;
}

.portal-language-select {
    width: auto;
    min-width: 6.75rem;
    max-width: 9.5rem;
    flex-shrink: 0;
}

.portal-home-btn,
.portal-logout-btn {
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
}

.portal-home-btn__label,
.portal-logout-btn__label {
    display: none;
}

@media (min-width: 576px) {
    .portal-home-btn__label {
        display: inline;
    }
}

@media (min-width: 992px) {
    .portal-logout-btn__label {
        display: inline;
    }
}

[data-theme="dark"] .portal-header {
    background: transparent;
    border-color: var(--metro-border) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .portal-header::before {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(0, 0, 0, 0.9);
}

.portal-brand-link {
    color: inherit;
    text-decoration: none;
}

.portal-brand-link:hover,
.portal-brand-link:focus-visible {
    color: inherit;
    opacity: 0.85;
}

.portal-logo {
    height: auto;
    width: auto;
    max-height: 2.75rem;
    max-width: 8.5rem;
    object-fit: contain;
}

.portal-logo-default {
    opacity: 1;
}

.portal-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 600;
}

.portal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.portal-user-cluster {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: var(--bs-secondary-bg);
}

[data-theme="dark"] .portal-user-cluster {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%),
        var(--metro-surface-raised);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: var(--metro-shadow-sm);
}


.portal-user-identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    padding: 0.1rem 0.35rem;
    border-radius: 8px;
    min-width: 0;
}

.portal-user-identity:hover {
    background: var(--bs-body-bg);
    color: inherit;
}

[data-theme="dark"] .portal-user-identity:hover {
    background: var(--metro-hover);
}

.portal-user-text {
    min-width: 0;
    max-width: 12rem;
}

.portal-user-name {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-user-email {
    font-size: 0.7rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-notification-cluster {
    display: flex;
    align-items: center;
}

.portal-notification-cluster .topbar-icon-btn {
    color: inherit;
    padding: 0.25rem 0.45rem;
    border-radius: 8px;
    text-decoration: none;
}

.portal-notification-cluster .topbar-icon-btn:hover,
.portal-notification-cluster .topbar-icon-btn:focus-visible {
    background: var(--bs-secondary-bg);
}

.portal-notification-cluster .topbar-notification-badge {
    border-color: var(--bs-body-bg);
}

.portal-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
}

.portal-breadcrumbs .breadcrumb-item a {
    color: var(--bs-secondary-color);
    text-decoration: none;
}

.portal-breadcrumbs .breadcrumb-item a:hover {
    color: var(--bs-primary);
    text-decoration: underline;
}

.resident-stat-card {
    border: 1px solid var(--portal-line, var(--bs-border-color));
    border-radius: .75rem;
    background: var(--portal-tile, var(--bs-body-bg));
    padding: .85rem .9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.resident-stat-card:hover,
.resident-stat-card:focus-visible {
    border-color: color-mix(in srgb, var(--portal-accent, var(--bs-primary)) 45%, var(--portal-line, var(--bs-border-color)));
    box-shadow: var(--portal-shadow-hover, var(--metro-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06)));
}

.resident-stat-value {
    font-size: 1.35rem;
    font-weight: 780;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.resident-stat-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--portal-muted, var(--bs-secondary-color));
    margin-top: 0.35rem;
}

.portal-main {
    flex: 1;
}

[data-theme="dark"] .portal-main {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, transparent 16rem);
}

/* div. so Bootstrap's .container max-widths cannot win when they load after portal.css (web host). */
div.portal-body-container {
    max-width: 80rem;
}

.portal-page {
    box-sizing: border-box;
    margin-inline: auto;
    max-width: 80rem;
    padding-inline: var(--portal-space-4, 1rem);
    width: 100%;
}

.portal-footer {
    margin-top: auto;
}

[data-theme="dark"] .portal-footer {
    background: var(--bs-tertiary-bg);
}

[data-theme="dark"] .portal-body-container .card,
[data-theme="dark"] .portal-body-container .list-group,
[data-theme="dark"] .portal-body-container .alert {
    box-shadow: var(--metro-shadow-sm);
}

[data-theme="dark"] .portal-body-container .card {
    border-color: rgba(255, 255, 255, 0.06);
}

.portal-preview-banner {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 1040;
    background: var(--bs-warning-bg-subtle, #fff3cd);
    border-bottom: 1px solid color-mix(in srgb, var(--bs-warning) 35%, transparent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border-radius: 0 0 16px 16px;
}

.portal-preview-banner-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem max(1rem, env(safe-area-inset-right, 0px)) 0.5rem max(1rem, env(safe-area-inset-left, 0px));
}

.portal-preview-banner-text {
    font-size: 0.875rem;
    line-height: 1.4;
}

.portal-preview-banner-detail {
    color: var(--bs-secondary-color);
}

.portal-preview-banner-subtext {
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
}

.portal-preview-banner-actions {
    margin-left: auto;
}

[data-metro-preview-blocked="1"] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ──────────────────────────────────────────
   PORTAL HERO
   ────────────────────────────────────────── */
.portal-welcome-message {
    background: color-mix(in srgb, var(--bs-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-primary) 20%, transparent);
    border-radius: 0.875rem;
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
}

.portal-hero {
    background:
        radial-gradient(circle at 90% -10%, color-mix(in srgb, var(--metro-city-primary, var(--bs-primary)) 28%, transparent), transparent 40%),
        linear-gradient(135deg, var(--metro-city-primary, var(--bs-primary)) 0%, color-mix(in srgb, var(--metro-city-primary, var(--bs-primary)) 68%, #0f172a) 100%);
    border-radius: 1.15rem;
    box-shadow: 0 15px 38px color-mix(in srgb, var(--metro-city-primary, var(--bs-primary)) 26%, transparent);
    padding: 2.25rem 2rem;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.portal-hero::before {
    content: '';
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.055);
    top: -140px;
    right: 140px;
    pointer-events: none;
}

.portal-hero::after {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    bottom: -90px;
    left: 2rem;
    pointer-events: none;
}

.portal-hero-eyebrow {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 0.4rem;
}

.portal-hero-title {
    font-size: 2.125rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #fff;
    line-height: 1.15;
}

.portal-hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.portal-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
    border: 1.5px solid transparent;
    cursor: pointer;
}

.portal-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.portal-action-btn-light {
    background: var(--metro-surface);
    color: var(--metro-city-primary, var(--bs-primary));
    border-color: #fff;
}

.portal-action-btn-light:hover {
    background: rgba(255, 255, 255, 0.92);
    color: var(--metro-city-primary, var(--bs-primary));
}

.portal-action-btn-ghost {
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

.portal-action-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.citizen-portal-map-section .citizen-portal-map-canvas {
    height: min(62vh, 560px);
    min-height: 320px;
}

.citizen-portal-map-section .citizen-portal-map-sidebar {
    max-height: min(62vh, 560px);
    min-height: min(62vh, 560px);
}

/* Senior services card */
.portal-senior-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border-radius: 1rem;
    padding: 1rem 1.25rem;
}

.portal-senior-icon {
    font-size: 1.5rem;
    opacity: 0.9;
    flex-shrink: 0;
}

.portal-senior-body {
    min-width: 0;
}

/* ──────────────────────────────────────────
   DASHBOARD LAYOUT: SIDEBAR + CONTENT
   ────────────────────────────────────────── */
.portal-dashboard-layout {
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* Sidebar navigation */
.portal-sidenav {
    background: var(--metro-surface, var(--bs-body-bg));
    border: 1px solid var(--portal-line, var(--bs-border-color));
    border-radius: var(--portal-radius, 1rem);
    box-shadow: var(--portal-shadow, none);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    scrollbar-width: thin;
}

[data-theme="dark"] .portal-sidenav {
    background: var(--metro-surface-raised);
    border-color: rgba(255, 255, 255, 0.08);
}

.portal-sidenav-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.575rem 0.875rem;
    border-radius: 0.625rem;
    border: none;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: left;
    width: 100%;
    transition: background 0.12s, color 0.12s;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portal-sidenav-item i {
    font-size: 1rem;
    flex-shrink: 0;
    width: 1.125rem;
    text-align: center;
}

.portal-sidenav-item:hover {
    background: var(--bs-tertiary-bg);
    color: var(--portal-accent, var(--bs-primary));
}

.portal-sidenav-item.active {
    background: color-mix(in srgb, var(--portal-accent, var(--bs-primary)) 12%, transparent);
    color: var(--portal-accent, var(--bs-primary));
    font-weight: 600;
}

.portal-sidenav-item--more {
    margin-top: 0.25rem;
    border-top: 1px solid var(--portal-line, var(--bs-border-color));
    border-radius: 0 0 0.625rem 0.625rem;
}

.portal-sidenav-item--nested {
    padding-inline-start: 1.5rem;
}

[data-theme="dark"] .portal-sidenav-item.active {
    background: color-mix(in srgb, var(--portal-accent, var(--bs-primary)) 22%, transparent);
}

/* Section content area */
.portal-section-content {
    min-width: 0;
}

/* ──────────────────────────────────────────
   RESPONSIVE (breakpoints: portal-nav 900px, compact 640px — see mobile.css)
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .portal-dashboard-layout {
        grid-template-columns: 1fr;
    }

    .portal-sidenav {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        padding: 0.375rem;
        position: static;
        max-height: none;
        border-radius: 0.875rem;
        scrollbar-width: none;
        gap: 0.25rem;
    }

    .portal-sidenav::-webkit-scrollbar {
        display: none;
    }

    .portal-sidenav-item {
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.5rem 0.75rem;
        min-width: max-content;
        font-size: 0.7rem;
        justify-content: center;
        text-align: center;
    }

    .portal-sidenav-item i {
        font-size: 1.25rem;
        width: auto;
    }

    .portal-sidenav-item--more {
        margin-top: 0;
        border-top: 0;
    }

    .portal-sidenav-item--nested {
        padding-inline-start: 0.75rem;
    }
}

@media (max-width: 767.98px) {
    .portal-hub-hero,
    .portal-v2-card,
    .portal-request-status-facts {
        width: 100%;
    }

    .portal-request-status-facts {
        flex-direction: column;
        gap: 0.5rem;
    }

    .portal-sticky-primary {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin-top: 0.75rem;
        padding: 0.55rem 0 calc(0.45rem + env(safe-area-inset-bottom, 0px));
        background: color-mix(in srgb, var(--metro-surface, #fff) 94%, transparent);
        backdrop-filter: blur(10px);
    }

    /* Phone: find lives on bottom nav (New request + Requests). Do not
       restack hero CTAs into a second full-width thumb wall. */
    .portal-hero-actions {
        display: none;
    }

    /* CD + PW + contractor + guest confirm: one fat sticky Review/track CTA.
       Hide page-header chips, hub actions, guest headings, and account-prompt
       buttons so they cannot pile under the dock. */
    .portal-layout:has(.portal-confirm-celebrate) .portal-hero-actions,
    .portal-layout:has(.portal-confirm-celebrate) .portal-hub-hero__actions,
    .portal-layout:has(.portal-confirm-celebrate) .portal-page-header .portal-v2-chip-row,
    .portal-layout:has(.portal-confirm-celebrate) .metro-fab-stack,
    .login-bg:has(.portal-confirm-celebrate) .btn-outline-secondary,
    .login-bg:has(.portal-confirm-celebrate) .public-intake-heading,
    .login-bg:has(.portal-confirm-celebrate) .public-intake-alt-cta,
    .login-bg:has(.portal-confirm-celebrate) .public-branded-shell__trust,
    .login-bg:has(.portal-confirm-celebrate) .guest-portal-account-prompt,
    .dash-v2:has(.portal-confirm-celebrate) .dash-v2-hero a.btn,
    .dash-v2:has(.portal-confirm-celebrate) .page-header a.btn {
        display: none;
    }

    .portal-confirm-celebrate {
        padding-bottom: 5.25rem;
    }

    .portal-sticky-primary > a,
    .portal-sticky-primary > button,
    button.portal-switcher-btn,
    .portal-v2-chip-row > a,
    .portal-v2-chip-row > button,
    .portal-v2 .list-group-item,
    .portal-v2 .metro-card button.btn-link,
    .portal-v2 .topbar-notification-menu .dropdown-item {
        min-height: var(--metro-touch-target-min, 48px);
    }

    .portal-here-kicker {
        font-size: 0.62rem;
    }

    .portal-hub-hero__title {
        font-size: 1.3rem;
    }
}

@media (max-width: 640px) {
    .portal-layout {
        max-width: 100%;
        overflow-x: clip;
    }

    .portal-header-inner {
        align-items: flex-start;
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }

    .portal-brand-cluster {
        flex: 1 1 calc(100% - 9rem);
        min-width: 0;
    }

    .portal-here {
        flex: 1 1 100%;
        order: 3;
    }

    .portal-header-actions {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .portal-home-btn {
        display: none;
    }

    .portal-hero {
        padding: 1.25rem 1rem;
        border-radius: 1rem;
    }

    .citizen-portal-map-section .citizen-portal-map-canvas {
        height: min(55dvh, 480px);
        min-height: 280px;
    }

    .citizen-portal-map-section .citizen-portal-map-sidebar {
        max-height: none;
        min-height: auto;
    }

    .portal-hero-title {
        font-size: 1.5rem;
        line-height: 1.25;
    }

    .portal-header-actions {
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 0.35rem;
        min-width: 0;
    }

    .portal-header .accessibility-quick-toggles--portal > .btn {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    .portal-main .page-header,
    .portal-body-container .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    .portal-main .btn,
    .portal-body-container .btn {
        min-height: 44px;
    }

    .portal-main .portal-phone-action,
    .portal-body-container .portal-phone-action,
    .portal-main .portal-phone-actions .btn,
    .portal-body-container .portal-phone-actions .btn,
    .public-branded-shell .portal-phone-action,
    .public-branded-shell .portal-phone-file {
        width: 100%;
        min-height: var(--metro-touch-target-min, 48px);
    }

    /* Celebrate Review dock stays fat. .portal-main .btn must not shrink it to 44px. */
    .portal-main .portal-sticky-primary .btn,
    .portal-main .portal-confirm-celebrate__cta,
    .portal-body-container .portal-sticky-primary .btn,
    .portal-body-container .portal-confirm-celebrate__cta,
    .login-bg .portal-sticky-primary .btn,
    .login-bg .portal-confirm-celebrate__cta,
    .public-branded-shell .portal-sticky-primary .btn,
    .public-branded-shell .portal-confirm-celebrate__cta,
    /* My tee times Pay first (payable btn-sm and guest token). Same 44px rule must not win. */
    .portal-main .golf-pay-first .btn,
    .portal-body-container .golf-pay-first .btn,
    .portal-main .golf-pay-first .btn.btn-sm,
    .portal-body-container .golf-pay-first .btn.btn-sm,
    .portal-main .golf-food-guest-payment .btn,
    .portal-body-container .golf-food-guest-payment .btn,
    .portal-main .pay-sticky-cta .pay-fat,
    .portal-body-container .pay-sticky-cta .pay-fat {
        min-height: var(--metro-touch-target-min, 48px);
    }

    .portal-user-text {
        max-width: 9rem;
    }

    .portal-body-container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

}

@media (max-width: 360px) {
    .portal-header-inner {
        gap: 0.3rem;
        min-width: 0;
    }

    .portal-logo {
        max-width: 5.5rem;
    }

    button.portal-switcher-btn {
        max-width: min(14rem, 72vw);
    }

    .portal-header-actions {
        gap: 0.25rem;
        min-width: 0;
    }

    .portal-header-actions .btn {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }

    .portal-user-cluster {
        gap: 0.25rem;
        padding: 0.15rem 0.35rem;
    }
}

@media (max-width: 767.98px) {
    .portal-payment-table-wrap {
        display: none;
    }

    .portal-payment-cards {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (min-width: 768px) {
    .portal-payment-cards {
        display: none;
    }
}

/* Senior portal — larger touch targets and readable type */
.senior-portal {
    max-width: 100%;
}

.senior-portal .card {
    min-height: var(--metro-touch-target-min, 48px);
}

.senior-portal .btn-lg,
.senior-portal .btn {
    min-height: var(--metro-touch-target-min, 48px);
}

/* FOIA / builder portal mobile headers — title first, actions below (never crowded into the banner). */
.portal-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.portal-page-header--stacked {
    flex-direction: column;
    align-items: stretch;
}

.portal-page-header__actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.portal-page-header h1 {
    color: var(--portal-ink, var(--metro-text, #111827));
    font-size: 1.65rem;
    font-weight: 780;
    letter-spacing: -.02em;
    margin: 0;
}

.portal-page-header .btn,
.portal-page-header .portal-v2-chip-row > a,
.portal-page-header .portal-v2-chip-row > button {
    min-height: var(--metro-touch-target-min, 48px);
}

.foia-request-card .btn {
    min-height: var(--metro-touch-target-min, 48px);
}

.portal-header-context-menu__panel {
    min-width: min(280px, 90vw);
}

.portal-header-context-menu__panel .dropdown,
.portal-header-context-menu__panel .btn {
    width: 100%;
}

@media (max-width: 991px) {
    .topbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.35rem;
    }

    .topbar-user-cluster {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .foia-request-card .d-flex.justify-content-between {
        flex-direction: column;
    }

    .foia-request-card .d-flex.flex-column.gap-2 {
        flex-direction: row !important;
        flex-wrap: wrap;
    }
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.user-avatar__img,
.user-avatar__initials {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}

.user-avatar__initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-body-color, #212529);
    font-weight: 600;
    font-size: 0.85rem;
}

.staff-directory-card .user-avatar {
    width: 56px;
    height: 56px;
}

/* Portal v2 lifts existing metro/bootstrap chrome without rewriting forms. */
.portal-v2 .portal-header {
    border-bottom-color: var(--portal-line);
    box-shadow: none;
}

.portal-v2 .portal-header::after {
    background: var(--portal-accent);
    content: "";
    display: block;
    height: 3px;
}

.portal-v2 .metro-card {
    background: var(--metro-surface, #fff);
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow);
    padding: 1.15rem;
}

@media (hover: hover) and (pointer: fine) {
    .portal-v2 .metro-card:hover {
        border-color: color-mix(in srgb, var(--portal-accent) 40%, var(--portal-line));
        box-shadow: var(--portal-shadow-hover);
    }
}

.portal-v2 .card {
    border-color: var(--portal-line);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow);
}

.portal-v2 .list-group.border.rounded,
.portal-v2 .list-group.shadow-sm {
    border-color: var(--portal-line) !important;
    border-radius: var(--portal-radius) !important;
    box-shadow: var(--portal-shadow) !important;
}

.portal-v2 .portal-welcome-message {
    background: color-mix(in srgb, var(--portal-accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--portal-accent) 20%, transparent);
    border-radius: var(--portal-radius);
}

.portal-v2 .portal-breadcrumbs .breadcrumb-item a:hover {
    color: var(--portal-accent);
}

.portal-v2 .btn-primary {
    --bs-btn-bg: var(--portal-accent);
    --bs-btn-border-color: var(--portal-accent);
    --bs-btn-color: var(--metro-on-primary, #fff);
    --bs-btn-hover-bg: var(--portal-accent-deep);
    --bs-btn-hover-border-color: var(--portal-accent-deep);
    --bs-btn-hover-color: var(--metro-on-primary, #fff);
}

.portal-v2 .btn-outline-primary {
    --bs-btn-color: var(--portal-accent);
    --bs-btn-border-color: var(--portal-accent);
    --metro-btn-solid: var(--portal-accent);
}

.portal-switcher.is-wink .portal-switcher-btn {
    animation: portal-accent-flash var(--duration-ui, 200ms) var(--ease-out, ease) both;
}

.portal-layout:has(.portal-switcher.is-wink) .portal-logo {
    animation: portal-logo-wink 0.7s var(--ease-out, ease) both;
}

.portal-v2-card.is-assigned-pulse {
    animation: portal-assigned-pulse 1.2s var(--ease-out, ease) both;
}

@keyframes portal-accent-flash {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--portal-accent) 40%, transparent); }
    100% { box-shadow: 0 0 0 6px transparent; }
}

@keyframes portal-logo-wink {
    0% { transform: scale(1) rotate(0); }
    40% { transform: scale(1.08) rotate(-6deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes portal-assigned-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--portal-accent) 28%, transparent); }
    70% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: var(--portal-shadow); }
}

@media (max-width: 767.98px) {
    .portal-layout {
        padding-bottom: 5rem;
    }

    .portal-sticky-primary {
        align-items: stretch;
        background: color-mix(in srgb, var(--metro-surface, #fff) 94%, transparent);
        backdrop-filter: blur(10px);
        border-radius: 0.85rem;
        bottom: calc(var(--mobile-bottom-h, 64px) + var(--mobile-safe-bottom, 0px) + 0.5rem);
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        left: 1rem;
        padding: 0.55rem 0.65rem;
        position: fixed;
        right: 1rem;
        z-index: 6;
    }

    .portal-logout-btn,
    .portal-header-actions .btn,
    button.portal-switcher-btn {
        min-height: var(--metro-touch-target-min, 48px);
    }

    .portal-switcher-menu {
        border-radius: 1rem 1rem 0 0;
        bottom: 0;
        left: 0;
        max-height: min(70vh, 28rem);
        min-width: 100vw;
        overflow: auto;
        position: fixed;
        right: 0;
        top: auto;
        width: 100vw;
    }
}

.portal-guided-onboarding {
    animation: portal-confirm-soft var(--portal-motion-context, 280ms) var(--ease-out, ease) both;
    background: color-mix(in srgb, var(--portal-accent) 6%, var(--metro-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--portal-accent) 22%, var(--portal-line));
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow);
    padding: 1.15rem 1.25rem;
}

.portal-guided-onboarding__title {
    font-size: var(--portal-type-title, 1.25rem);
    font-weight: 700;
    margin: 0.25rem 0 0.5rem;
}

.portal-guided-onboarding__lede {
    color: var(--portal-muted);
    font-size: var(--portal-type-body, .9375rem);
    margin-bottom: 1rem;
}

.portal-context-coach {
    align-items: center;
    animation: portal-confirm-soft var(--portal-motion-context, 280ms) var(--ease-out, ease) both;
    background: var(--portal-tile);
    border: 1px solid var(--portal-line);
    border-radius: var(--portal-radius);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.85rem 1rem;
}

.portal-context-coach__line {
    color: var(--portal-ink);
    font-size: var(--portal-type-body, .9375rem);
    font-weight: 600;
}

/* In-portal expiration. Calm, outdoor-readable. Email copy stays on the API. */
.portal-expiration-notice {
    font-size: 1.0625rem;
    font-weight: 650;
    line-height: 1.35;
    margin: 0.75rem 0 0;
    padding: 0.7rem 0.85rem;
    border-radius: 0.75rem;
    border: 2px solid transparent;
}

.portal-expiration-notice--upcoming {
    background: color-mix(in srgb, #f59e0b 18%, var(--metro-surface, #fff));
    color: var(--metro-text, #1c1917);
    border-color: #b45309;
}

.portal-expiration-notice--expired {
    background: color-mix(in srgb, #ef4444 14%, var(--metro-surface, #fff));
    color: var(--metro-text, #1c1917);
    border-color: #b91c1c;
}

.portal-inspection-types {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.portal-inspection-type {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--metro-touch-target-min, 48px);
    margin: 0;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--portal-line, #e4e7ec);
    border-radius: 0.85rem;
    background: var(--portal-tile, #f8fafc);
    font-size: 1rem;
    font-weight: 600;
}

.portal-inspection-type input {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.portal-inspection-confirm {
    margin: 0 0 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--portal-accent, #1a56db) 10%, var(--metro-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--portal-accent, #1a56db) 35%, var(--portal-line, #e4e7ec));
}

@media (prefers-reduced-motion: reduce) {
    .portal-v2-chip-row > a,
    .portal-v2-chip-row > button,
    .resident-stat-card,
    .portal-action-btn,
    .portal-sidenav-item,
    .portal-switcher.is-wink .portal-switcher-btn,
    .portal-layout:has(.portal-switcher.is-wink) .portal-logo,
    .portal-v2-card.is-assigned-pulse,
    .portal-confirm-celebrate__mark,
    .portal-guided-onboarding,
    .portal-context-coach {
        animation: none;
        transition: none;
    }
}

/* ============================================================================
   Phone page kit glue (lane E1). Small portal-only helpers that sit on top of
   the pk-* kit in mobile.css. Colours only from --bs-* / --metro-status-*.
   ========================================================================== */
/* div. so Bootstrap's .container max-widths cannot win when they load after portal.css (web host). */
div.portal-pk-narrow {
    max-width: 820px;
}

/* Used by portal pages (Portal.razor, request cards, timeline); not a Bootstrap utility. */
.portal-v2 .min-w-0 {
    min-width: 0;
}

.portal-pk-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    min-width: 0;
}

.portal-pk-title {
    margin: 0;
    min-width: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

.portal-pk-back,
.portal-pk-backlink {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.75rem;
}

.portal-pk-backlink {
    padding: 0 .15rem;
    font-weight: 600;
    text-decoration: none;
}

.portal-pk-backlink:hover,
.portal-pk-backlink:focus-visible {
    text-decoration: underline;
}

/* pk-hero outside a .pk-page: give it the kit tokens it reads. */
.portal-pk-hero {
    --pk-radius-lg: 1rem;
    --pk-surface: var(--bs-body-bg);
    --pk-line: var(--bs-border-color);
    min-width: 0;
}

.portal-pk-hero h1.pk-hero__headline {
    font-size: 1.2rem;
}

.portal-pk-hero__meta {
    margin: .35rem 0 0;
    color: var(--bs-secondary-color);
    font-size: .875rem;
    line-height: 1.4;
}

/* card-header inside a flush portal card (not a .card): Bootstrap's --bs-card-cap-*
   vars are not set there, so the header had no padding and square corners. */
.portal-v2-card--flush > .card-header {
    padding: .75rem 1rem;
    border-radius: var(--portal-radius) var(--portal-radius) 0 0;
}

.portal-pk-next .card-body {
    min-width: 0;
}

.portal-pk-receipt.disabled {
    opacity: .5;
    pointer-events: none;
}

@media (max-width: 640px) {
    /* Card rows: lead with the description, then the labelled facts. */
    .portal-pk-page .pk-table-cards tr {
        display: flex;
        flex-direction: column;
    }

    .portal-pk-page .pk-table-cards td.pk-cell-title {
        order: -1;
        padding-bottom: .35rem;
    }

    .portal-pk-page .pk-table-cards td.text-center,
    .portal-pk-page .pk-table-cards td.text-end {
        align-items: center;
    }

    .portal-pk-hero h1.pk-hero__headline {
        font-size: 1.08rem;
    }

    /* Card-list tables inside a flush portal card: keep the cards off the card edge. */
    .portal-pk-cardlist {
        padding: .5rem .75rem .25rem;
    }

    /* Portal buttons get min-height 44px on phones (rule above); centre their
       label in that height and give btn-sm readable text. */
    .portal-main .btn:not(.btn-link),
    .portal-body-container .btn:not(.btn-link) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
    }

    .portal-main .btn.text-start:not(.btn-link),
    .portal-body-container .btn.text-start:not(.btn-link) {
        justify-content: flex-start;
    }

    .portal-main .btn-sm,
    .portal-body-container .btn-sm {
        --bs-btn-font-size: .875rem;
        --bs-btn-padding-x: .75rem;
    }

    /* Senior Services card: text on its own line, full-width button below. */
    .portal-senior-card {
        flex-wrap: wrap;
        gap: .6rem .85rem;
        padding: .85rem 1rem;
    }

    .portal-senior-body {
        flex: 1 1 0;
    }

    .portal-senior-card > .btn {
        flex: 1 1 100%;
        margin-left: 0 !important;
    }

    .portal-v2-seg > button {
        min-height: 44px;
    }

    /* Nested .container inside the portal body: the body already has the gutter. */
    .portal-body-container .container,
    .portal-body-container .portal-pk-narrow {
        padding-left: 0;
        padding-right: 0;
    }

    /* Request card facts: a compact wrapping row instead of a tall stack. */
    .portal-request-status-facts {
        flex-direction: row;
        flex-wrap: wrap;
        gap: .5rem 1.25rem;
    }

    .portal-request-status-facts__item {
        flex: 1 1 7.5rem;
        min-width: 0;
    }

    /* Card action rows: two buttons per line instead of a tall stack. Non-button
       children (pay widget, notes) take the whole line. */
    .portal-pk-cardactions,
    .mobile-shell .portal-phone-actions.portal-pk-cardactions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr));
        align-items: stretch;
    }

    .portal-pk-cardactions > * {
        min-width: 0;
        margin: 0 !important;
    }

    .portal-pk-cardactions > :not(.btn) {
        grid-column: 1 / -1;
    }

    .portal-pk-cardactions > .btn {
        width: 100%;
        padding-left: .5rem;
        padding-right: .5rem;
        white-space: normal;
    }
}

/* Card action rows on wider screens: a wrapping row with even gaps. */
.portal-pk-cardactions {
    gap: .5rem;
    margin-top: .75rem;
}

@media (min-width: 640.02px) {
    .portal-pk-cardactions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
}

/* The kit's note used as a dashboard banner: a little more room. */
div.portal-pk-banner {
    padding: .85rem 1rem;
    font-size: .9rem;
}

/* Kit action rows on portal pages, wider screens: buttons keep their own width
   instead of stretching across the page. Phones still stack them full width. */
@media (min-width: 640.02px) {
    .portal-main .pk-actions > .btn,
    .portal-main .pk-actions > a.btn {
        flex: 0 1 auto;
    }
}

/* ============================================================================
   Portal modern polish (2026-11-06). Additive layer for every external portal
   (contractor, vendor, citizen, builder): calmer canvas, real padding inside
   flush cards, segmented tabs, soft tables/badges/inputs, left status rails.
   Scoped to .portal-v2 so staff pages are untouched.
   ========================================================================== */
.portal-v2 {
    --portal-radius-sm: .75rem;
    --portal-canvas: color-mix(in srgb, var(--portal-accent) 3%, var(--metro-bg, #f5f6f8));
    --portal-soft: color-mix(in srgb, var(--portal-accent) 9%, var(--metro-surface, #fff));
    --portal-soft-ink: color-mix(in srgb, var(--portal-accent) 85%, var(--portal-ink));
    --portal-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .03);
    background: var(--portal-canvas);
}

.portal-v2 .portal-main {
    background: radial-gradient(1200px 320px at 50% -120px, color-mix(in srgb, var(--portal-accent) 7%, transparent), transparent 70%);
}

/* Header: slim accent hairline instead of a 3px bar, quieter buttons. */
.portal-v2 .portal-header::after {
    height: 2px;
    background: linear-gradient(90deg, var(--portal-accent), color-mix(in srgb, var(--portal-accent) 25%, transparent));
}

.portal-v2 .portal-header-actions .btn-outline-secondary {
    border-color: transparent;
    background: color-mix(in srgb, var(--portal-ink) 5%, transparent);
    color: var(--portal-ink);
    border-radius: 999px;
}

.portal-v2 .portal-header-actions .btn-outline-secondary:hover {
    background: color-mix(in srgb, var(--portal-ink) 10%, transparent);
}

.portal-v2 .portal-logout-btn.btn-outline-danger {
    border-radius: 999px;
    border-color: color-mix(in srgb, var(--bs-danger) 30%, transparent);
}

.portal-v2 .portal-avatar {
    background: var(--portal-soft);
    color: var(--portal-soft-ink);
    font-weight: 700;
}

/* Hero: soft accent wash, bigger type. */
.portal-v2 .portal-hub-hero {
    background: linear-gradient(135deg, color-mix(in srgb, var(--portal-accent) 8%, var(--metro-surface, #fff)) 0%, var(--metro-surface, #fff) 60%);
    border-color: color-mix(in srgb, var(--portal-accent) 12%, var(--portal-line));
    padding: 1.6rem 1.75rem;
    margin-bottom: 1.5rem;
}

.portal-v2 .portal-hub-hero__title {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    letter-spacing: -.025em;
}

.portal-v2 .portal-hub-hero__subtitle {
    font-size: 1rem;
    max-width: 62ch;
    margin-bottom: 1rem;
}

.portal-v2 .portal-v2-chip-row > a,
.portal-v2 .portal-v2-chip-row > button {
    border-radius: 999px;
}

/* Flush cards: give Bootstrap card parts real padding (no .card means no --bs-card-* vars). */
.portal-v2 .portal-v2-card {
    --bs-card-spacer-y: 1.1rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-cap-padding-y: .9rem;
    --bs-card-cap-padding-x: 1.25rem;
}

.portal-v2 .portal-v2-card--flush {
    overflow: hidden;
}

.portal-v2 .portal-v2-card--flush > .card-body {
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}

.portal-v2 .portal-v2-card--flush > .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--portal-line) !important;
    font-size: 1rem;
    letter-spacing: -.01em;
    padding: .95rem 1.25rem;
}

.portal-v2 .portal-v2-card--flush > .card-footer {
    background: var(--metro-surface-raised, transparent);
    border-top: 1px solid var(--portal-line);
    padding: .75rem 1.25rem;
}

/* Status strips (border-start border-4 border-*) read as a left accent rail, not a full outline. */
.portal-v2 .portal-v2-card.border-start.border-4 {
    border-width: 1px !important;
    border-color: var(--portal-line) !important;
    box-shadow: inset 4px 0 0 var(--portal-rail, var(--portal-accent)), var(--portal-shadow);
}

.portal-v2 .portal-v2-card.border-start.border-4.border-warning { --portal-rail: var(--bs-warning); }
.portal-v2 .portal-v2-card.border-start.border-4.border-danger { --portal-rail: var(--bs-danger); }
.portal-v2 .portal-v2-card.border-start.border-4.border-success { --portal-rail: var(--bs-success); }
.portal-v2 .portal-v2-card.border-start.border-4.border-info { --portal-rail: var(--bs-info); }
.portal-v2 .portal-v2-card.border-start.border-4.border-primary { --portal-rail: var(--portal-accent); }

.portal-v2 .portal-v2-card.border-start.border-4 > .card-body {
    padding-left: calc(var(--bs-card-spacer-x) + 4px);
}

/* Tabs (MetroTabStrip pills): one quiet segmented track. */
.portal-v2 .portal-body-container .nav-pills[role="tablist"] {
    background: color-mix(in srgb, var(--portal-ink) 4.5%, transparent);
    border: 1px solid color-mix(in srgb, var(--portal-line) 70%, transparent);
    border-radius: 1.4rem;
    gap: .2rem !important;
    padding: .3rem;
    width: fit-content;
    max-width: 100%;
}

.portal-v2 .portal-body-container .nav-pills .nav-link {
    border-radius: 999px;
    color: var(--portal-muted);
    font-size: .875rem;
    font-weight: 600;
    padding: .45rem .95rem;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}

.portal-v2 .portal-body-container .nav-pills .nav-link:hover {
    color: var(--portal-ink);
    background: color-mix(in srgb, var(--metro-surface, #fff) 70%, transparent);
}

.portal-v2 .portal-body-container .nav-pills .nav-link.active,
.portal-v2 .portal-body-container .nav-pills .show > .nav-link {
    background: var(--metro-surface, #fff);
    color: var(--portal-soft-ink);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 0 0 1px color-mix(in srgb, var(--portal-line) 80%, transparent);
}

.portal-v2 .portal-body-container .nav-pills .nav-link .metro-tab__icon {
    opacity: .8;
}

/* Tables: quiet uppercase heads, airy rows. */
.portal-v2 .portal-body-container .table {
    --bs-table-bg: transparent;
}

.portal-v2 .portal-body-container .table > thead > tr > th {
    color: var(--portal-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--portal-line);
    padding-top: .6rem;
    padding-bottom: .6rem;
    white-space: nowrap;
}

.portal-v2 .portal-body-container .table > tbody > tr > td {
    border-color: color-mix(in srgb, var(--portal-line) 70%, transparent);
    padding-top: .7rem;
    padding-bottom: .7rem;
}

.portal-v2 .portal-body-container .table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.portal-v2 .portal-body-container .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--portal-soft);
}

/* List groups: one rounded surface with hairline rows. */
.portal-v2 .portal-body-container .list-group {
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow) !important;
    overflow: hidden;
}

.portal-v2 .portal-body-container .list-group-item {
    background: var(--metro-surface, #fff);
    border-color: color-mix(in srgb, var(--portal-line) 80%, transparent);
    padding: .9rem 1.25rem;
}

.portal-v2 .portal-body-container .list-group-item-action:hover {
    background: var(--portal-soft);
}

/* Badges: soft tinted pills instead of saturated blocks. */
.portal-v2 .portal-body-container .badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
}

.portal-v2 .portal-body-container .badge.text-bg-warning { background: color-mix(in srgb, var(--bs-warning) 24%, var(--metro-surface, #fff)) !important; color: #6b4700 !important; }
.portal-v2 .portal-body-container .badge.text-bg-success { background: color-mix(in srgb, var(--bs-success) 15%, var(--metro-surface, #fff)) !important; color: #0f5132 !important; }
.portal-v2 .portal-body-container .badge.text-bg-info { background: color-mix(in srgb, var(--bs-info) 18%, var(--metro-surface, #fff)) !important; color: #055160 !important; }
.portal-v2 .portal-body-container .badge.text-bg-danger { background: color-mix(in srgb, var(--bs-danger) 13%, var(--metro-surface, #fff)) !important; color: #842029 !important; }
.portal-v2 .portal-body-container .badge.text-bg-secondary,
.portal-v2 .portal-body-container .badge.text-bg-light { background: color-mix(in srgb, var(--portal-ink) 7%, var(--metro-surface, #fff)) !important; color: var(--portal-ink) !important; }
.portal-v2 .portal-body-container .badge.text-bg-primary { background: var(--portal-soft) !important; color: var(--portal-soft-ink) !important; }

/* Buttons and inputs: consistent rounded geometry and an accent focus ring. */
.portal-v2 .portal-body-container .btn {
    border-radius: .65rem;
    font-weight: 600;
}

.portal-v2 .portal-body-container .btn-sm {
    border-radius: .55rem;
}

.portal-v2 .portal-body-container .btn-group > .btn {
    border-radius: 0;
}

.portal-v2 .portal-body-container .btn-group > .btn:first-child { border-start-start-radius: .55rem; border-end-start-radius: .55rem; }
.portal-v2 .portal-body-container .btn-group > .btn:last-child { border-start-end-radius: .55rem; border-end-end-radius: .55rem; }

.portal-v2 .portal-body-container .form-control,
.portal-v2 .portal-body-container .form-select {
    border-radius: .6rem;
}

.portal-v2 .portal-body-container .form-control:focus,
.portal-v2 .portal-body-container .form-select:focus {
    border-color: color-mix(in srgb, var(--portal-accent) 60%, var(--portal-line));
    box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--portal-accent) 18%, transparent);
}

.portal-v2 .portal-body-container .form-label {
    color: var(--portal-muted);
    font-weight: 600;
    margin-bottom: .3rem !important;
}

.portal-v2 .portal-body-container .alert {
    border-radius: var(--portal-radius-sm);
}

.portal-v2 .portal-body-container h2.h6,
.portal-v2 .portal-body-container h2.h5 {
    font-weight: 700;
    letter-spacing: -.01em;
}

.portal-v2 .portal-breadcrumbs .breadcrumb a {
    color: var(--portal-muted);
    text-decoration: none;
}

.portal-v2 .portal-breadcrumbs .breadcrumb a:hover {
    color: var(--portal-accent);
}

/* Footer: blends with the canvas. */
.portal-v2 .portal-footer {
    background: transparent !important;
}

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

.portal-v2 .portal-footer a:hover {
    color: var(--portal-accent);
}

[data-theme="dark"] .portal-v2 {
    --portal-canvas: var(--metro-bg, #000);
    --portal-soft: color-mix(in srgb, var(--portal-accent) 22%, var(--metro-surface, #0b0b0d));
    --portal-soft-ink: color-mix(in srgb, var(--portal-accent) 40%, #fff);
    --portal-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

[data-theme="dark"] .portal-v2 .portal-hub-hero {
    background: linear-gradient(135deg, color-mix(in srgb, var(--portal-accent) 16%, var(--metro-surface, #0b0b0d)) 0%, var(--metro-surface, #0b0b0d) 65%);
}

[data-theme="dark"] .portal-v2 .portal-body-container .badge.text-bg-warning { background: color-mix(in srgb, var(--bs-warning) 22%, var(--metro-surface, #0b0b0d)) !important; color: #ffd875 !important; }
[data-theme="dark"] .portal-v2 .portal-body-container .badge.text-bg-success { background: color-mix(in srgb, var(--bs-success) 25%, var(--metro-surface, #0b0b0d)) !important; color: #7fdba6 !important; }
[data-theme="dark"] .portal-v2 .portal-body-container .badge.text-bg-info { background: color-mix(in srgb, var(--bs-info) 22%, var(--metro-surface, #0b0b0d)) !important; color: #7fe3f5 !important; }
[data-theme="dark"] .portal-v2 .portal-body-container .badge.text-bg-danger { background: color-mix(in srgb, var(--bs-danger) 25%, var(--metro-surface, #0b0b0d)) !important; color: #ff9b9b !important; }

/* Phones: the tab track scrolls sideways instead of wrapping into a pile. */
@media (max-width: 640px) {
    .portal-v2 .portal-hub-hero {
        padding: 1.2rem 1.1rem;
    }

    .portal-v2 .portal-body-container .nav-pills[role="tablist"] {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
        width: 100%;
    }

    .portal-v2 .portal-body-container .nav-pills[role="tablist"]::-webkit-scrollbar {
        display: none;
    }

    .portal-v2 .portal-v2-card {
        --bs-card-spacer-x: 1rem;
        --bs-card-cap-padding-x: 1rem;
    }

    .portal-v2 .portal-body-container .list-group-item {
        padding: .85rem 1rem;
    }
}

/* ===== Portal wow: hub pulse + micro-interactions (2026-11-07) ===== */
.portal-v2 .portal-pulse {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin: 0 0 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--portal-line, rgba(15, 23, 42, 0.08));
    border-radius: var(--portal-radius, 16px);
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -16px rgba(15, 23, 42, 0.25);
    animation: portal-wow-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.portal-v2 .portal-pulse--all-set {
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, #16a34a 10%, transparent) 0%, transparent 55%),
        var(--bs-body-bg, #fff);
}
.portal-v2 .portal-pulse__intro { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.portal-v2 .portal-pulse__ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.portal-v2 .portal-pulse__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.portal-v2 .portal-pulse__ring circle { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.portal-v2 .portal-pulse__ring-track { stroke: var(--portal-line, rgba(15, 23, 42, 0.08)); }
.portal-v2 .portal-pulse__ring-value { animation: portal-wow-ring 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.portal-v2 .portal-pulse__ring-value--good { stroke: #16a34a; }
.portal-v2 .portal-pulse__ring-value--warn { stroke: #d97706; }
.portal-v2 .portal-pulse__ring-value--bad { stroke: #dc2626; }
.portal-v2 .portal-pulse__ring-score {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    color: var(--portal-ink, inherit);
}
.portal-v2 .portal-pulse__greeting { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--portal-ink, inherit); }
.portal-v2 .portal-pulse__status { color: var(--portal-muted, #64748b); font-size: 0.9rem; }
.portal-v2 .portal-pulse--all-set .portal-pulse__status { color: #15803d; font-weight: 600; }
.portal-v2 .portal-pulse__tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    flex: 1 1 420px;
    max-width: 640px;
}
.portal-v2 .portal-pulse__tile {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--portal-radius-sm, 10px);
    background: var(--portal-soft, rgba(31, 95, 174, 0.06));
    animation: portal-wow-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--pulse-i, 0) * 70ms + 120ms);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.portal-v2 .portal-pulse__tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px -10px rgba(15, 23, 42, 0.35); }
.portal-v2 .portal-pulse__tile-value { font-weight: 700; font-size: 1.25rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--portal-ink, inherit); }
.portal-v2 .portal-pulse__tile-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--portal-muted, #64748b); }
.portal-v2 .portal-pulse__tile--warn { background: color-mix(in srgb, #d97706 12%, transparent); }
.portal-v2 .portal-pulse__tile--warn .portal-pulse__tile-value { color: #b45309; }

/* Micro-interactions: cards lift, tab panels and hero ease in */
.portal-v2 .portal-hub-hero { animation: portal-wow-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.portal-v2 .portal-municipal-records .portal-v2-card,
.portal-v2 .portal-property-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.portal-v2 .portal-municipal-records .portal-v2-card:hover,
.portal-v2 .portal-property-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -18px rgba(15, 23, 42, 0.45);
    border-color: color-mix(in srgb, var(--portal-accent, #1f5fae) 35%, transparent);
}
.portal-v2 .portal-body-container [role="tabpanel"],
.portal-v2 .portal-body-container .tab-pane.active {
    animation: portal-wow-fade 0.28s ease both;
}
.portal-v2 .btn:active:not(:disabled) { transform: scale(0.97); }

@keyframes portal-wow-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@keyframes portal-wow-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes portal-wow-ring {
    from { stroke-dasharray: 0 100; }
}

[data-theme="dark"] .portal-v2 .portal-pulse { background: var(--bs-body-bg, #0f172a); box-shadow: none; }
[data-theme="dark"] .portal-v2 .portal-pulse--all-set {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(22, 163, 74, 0.16) 0%, transparent 55%),
        var(--bs-body-bg, #0f172a);
}
[data-theme="dark"] .portal-v2 .portal-pulse--all-set .portal-pulse__status { color: #4ade80; }
[data-theme="dark"] .portal-v2 .portal-pulse__tile--warn .portal-pulse__tile-value { color: #fbbf24; }

@media (max-width: 640px) {
    .portal-v2 .portal-pulse { padding: 0.85rem; }
    .portal-v2 .portal-pulse__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .portal-v2 .portal-pulse,
    .portal-v2 .portal-pulse__tile,
    .portal-v2 .portal-pulse__ring-value,
    .portal-v2 .portal-hub-hero,
    .portal-v2 .portal-body-container [role="tabpanel"],
    .portal-v2 .portal-body-container .tab-pane.active { animation: none; }
    .portal-v2 .portal-pulse__tile:hover,
    .portal-v2 .portal-municipal-records .portal-v2-card:hover,
    .portal-v2 .portal-property-card:hover,
    .portal-v2 .btn:active:not(:disabled) { transform: none; }
}
/* ===== Portal records: attached property + rental bond upload (2026-11-07) ===== */
.portal-v2 .portal-record-property,
.portal-record-property {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.35rem;
    padding: 0.45rem 0.65rem;
    border-radius: var(--portal-radius-sm, 10px);
    background: var(--portal-soft, rgba(31, 95, 174, 0.06));
    font-size: 0.875rem;
}
.portal-record-property > .bi { color: var(--portal-accent, #1f5fae); }
.portal-record-property__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, var(--portal-accent, #1f5fae) 14%, transparent);
    color: var(--portal-accent, #1f5fae);
}
.portal-record-property__tag--ok { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.portal-record-property__tag--warn { background: color-mix(in srgb, #d97706 16%, transparent); color: #b45309; }
.portal-bond-upload {
    margin-top: 0.6rem;
    padding: 0.75rem;
    border: 1px dashed color-mix(in srgb, var(--portal-accent, #1f5fae) 40%, transparent);
    border-radius: var(--portal-radius-sm, 10px);
    animation: portal-wow-rise 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.portal-bond-upload__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.portal-bond-upload__fields .form-control { margin-top: 0.2rem; }
.portal-bond-saved {
    margin-top: 0.5rem;
    color: #15803d;
    font-weight: 600;
    font-size: 0.875rem;
    animation: portal-wow-rise 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
[data-theme="dark"] .portal-record-property__tag--ok,
[data-theme="dark"] .portal-bond-saved { color: #4ade80; }
[data-theme="dark"] .portal-record-property__tag--warn { color: #fbbf24; }
@media (max-width: 640px) {
    .portal-bond-upload__fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .portal-bond-upload, .portal-bond-saved { animation: none; }
}