/* ── Phase 73 — Portal Shell & Tenant Branding ─────────────────────
   Every rule here sits under .portal-shell (signed-in portal) or
   .portal-prelogin (pre-login /p/{slug} + AccessDenied). Nothing here may
   leak into staff surfaces. Portal is light-only, permanently — the dark
   theme's root class selector may never appear in this file.
   Reuses tokens from app.css (--shadow-card; the portal border is its own
   literal #E6E8EC per 73-UI-SPEC §Color, not app.css's --border-light) and
   shell.css (.list-row/.list-group-container structure, remapped below). */

/* ── Portal token model (73-UI-SPEC.md §Design System) ────────────── */
.portal-shell, .portal-prelogin {
    --portal-accent: #236FA8;                    /* overwritten inline from the DTO */
    --portal-accent-soft: color-mix(in srgb, var(--portal-accent) 12%, #FFFFFF);
    --portal-accent-text: #FFFFFF;               /* flipped to #1A1D23 by the root inline style */
    --portal-card-radius: 14px;
    --portal-card-padding: 20px;
    --portal-content-max: 1120px;
    --portal-topbar-height: 64px;
    --portal-footer-height: 56px;
    --row-height: 44px;                          /* remap of the Phase 71 token, portal scope only */
    --focus-ring: var(--portal-accent);          /* remap of the Phase 71 token, portal scope only */
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .portal-shell, .portal-prelogin { --portal-accent-soft: #F4F5F7; }
}

/* ── Focus ring (one rule; offsets: 2px default, 0 list rows, -2px nav) ── */
.portal-shell :focus-visible,
.portal-prelogin :focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* .list-row:focus-visible already sets outline-offset: 0 globally in shell.css;
   --focus-ring's portal-scoped remap above makes that rule accent-coloured here
   with no selector duplication. */

.portal-shell .portal-nav-item:focus-visible {
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .portal-shell .portal-nav-item,
    .portal-shell .list-row,
    .portal-shell .portal-cta {
        transition: none !important;
    }
    .portal-shell .waiting-on-you-item-removing {
        animation: none !important;
        transition: none !important;
    }
}

/* ── Skip link ─────────────────────────────────────────────────── */
.portal-shell .portal-skip-link {
    position: absolute;
    top: -48px;
    left: 8px;
    z-index: 2000;
    background: var(--portal-accent);
    color: var(--portal-accent-text);
    padding: 10px 16px;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: top 150ms ease;
}

.portal-shell .portal-skip-link:focus {
    top: 8px;
}

/* ── Top bar ───────────────────────────────────────────────────── */
.portal-shell .portal-topbar {
    background: #FFFFFF;
    height: var(--portal-topbar-height);
    border-bottom: 1px solid #E6E8EC;
    position: sticky;
    top: 0;
    z-index: 1200;
}

.portal-shell .portal-topbar-inner {
    max-width: var(--portal-content-max);
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
}

/* ── Brand lockup ──────────────────────────────────────────────── */
.portal-shell .portal-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    flex: 0 0 auto;
    min-width: 0;
}

.portal-shell .portal-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.portal-shell .portal-brand-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1A1D23;
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-shell .portal-brand-subline {
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    color: #5E6470;
}

/* ── Nav ───────────────────────────────────────────────────────── */
.portal-shell .portal-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 32px;
    height: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.portal-shell .portal-nav::-webkit-scrollbar {
    display: none;
}

.portal-shell .portal-nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 12px;
    gap: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #5E6470;
    text-decoration: none;
    white-space: nowrap;
    transition: color 150ms ease;
}

.portal-shell .portal-nav-item:hover {
    color: #1A1D23;
}

.portal-shell .portal-nav-item[aria-current="page"] {
    color: #1A1D23;
}

.portal-shell .portal-nav-item[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--portal-accent);
}

/* ── Spacer + accent CTA ───────────────────────────────────────── */
.portal-shell .portal-topbar-spacer {
    flex: 1 1 auto;
}

.portal-shell .portal-cta {
    height: 36px;
    border-radius: 8px;
    padding: 0 14px;
    background: var(--portal-accent);
    color: var(--portal-accent-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: filter 150ms ease;
    flex: 0 0 auto;
}

.portal-shell .portal-cta:hover {
    filter: brightness(0.92);
}

.portal-shell .portal-cta-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

/* ── Notification bell (restyled, not rebuilt — NotificationBell.razor's
   markup/behaviour is untouched) ────────────────────────────────── */
.portal-shell .portal-bell {
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
}

.portal-shell .portal-bell .notification-bell-wrapper {
    margin-right: 0;
}

.portal-shell .portal-bell .mud-icon-button {
    width: 36px !important;
    height: 36px !important;
}

.portal-shell .portal-bell .mud-icon-button .mud-icon-root {
    width: 20px !important;
    height: 20px !important;
    color: #5E6470 !important;
}

.portal-shell .portal-bell .notification-badge .mud-badge {
    background: #236FA8 !important;
    box-shadow: 0 0 0 2px #FFFFFF !important;
    min-width: 6px !important;
    width: 6px !important;
    height: 6px !important;
    font-size: 0 !important;
    top: 6px !important;
    right: 6px !important;
}

/* ── Avatar menu ───────────────────────────────────────────────── */
.portal-shell .portal-avatar-menu {
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
}

.portal-shell .portal-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #F4F5F7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: #5E6470;
    border: none;
    cursor: pointer;
}

/* ── Top bar responsive rules (73-UI-SPEC.md §Components 1) ───────── */
@media (max-width: 1199px) {
    .portal-shell .portal-brand-subline {
        display: none;
    }
    .portal-shell .portal-nav {
        gap: 4px;
        margin-left: 16px;
    }
    .portal-shell .portal-nav-item {
        padding: 0 8px;
    }
}

@media (max-width: 899px) {
    .portal-shell .portal-cta-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .portal-shell .portal-cta {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    /* Phase 77: the wrapped second nav row is gone (single 64px bar + bottom tabs, see the Phase 77 block). */
    .portal-shell .portal-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* ── Content area ──────────────────────────────────────────────── */
.portal-shell .portal-content {
    max-width: var(--portal-content-max);
    margin: 0 auto;
    padding: 24px 24px 48px;
    background: #FFFFFF;
    min-height: calc(100vh - var(--portal-topbar-height) - var(--portal-footer-height));
}

/* ── Footer ────────────────────────────────────────────────────── */
.portal-shell .portal-footer {
    background: #FFFFFF;
    border-top: 1px solid #E6E8EC;
    height: var(--portal-footer-height);
}

.portal-shell .portal-footer-inner {
    max-width: var(--portal-content-max);
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* UAT: a11y fix — --text-tertiary equivalent (#8B919E) measured 3.05-3.16:1 on
   white/#FFFFFF via axe (serious color-contrast); #5E6470 (--text-secondary) clears
   4.5:1+ on both backgrounds. Same root-cause bump 71/72 already applied to their
   analogous small-text selectors (see shell.css). */
.portal-shell .portal-footer-powered {
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    color: #5E6470;
}

.portal-shell .portal-footer-support {
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    color: #5E6470;
    text-decoration: none;
}

.portal-shell .portal-footer-support:hover {
    text-decoration: underline;
}

/* ── Portal card (generic — WaitingOnYou/ProgressRow/list containers reuse
   this same recipe; only this file's own generic rule lives here, per-card
   layout specifics land with the pages/components that use them) ─────── */
.portal-shell .portal-card {
    background: #FFFFFF;
    border-radius: var(--portal-card-radius);
    box-shadow: var(--shadow-card);
    padding: var(--portal-card-padding);
}

/* ── Portal list rows — Phase 71 ListRow/ListGroup reuse, portal deltas
   only (73-UI-SPEC.md §Components 5). No portal-specific row component. ── */
.portal-shell .list-row {
    padding: 0 20px;
}

.portal-shell .list-group-container {
    border: none;
    border-radius: var(--portal-card-radius);
    box-shadow: var(--shadow-card);
}

.portal-shell .list-group:first-child .list-row:first-child,
.portal-shell .list-group-container > .list-row:first-child {
    border-top-left-radius: var(--portal-card-radius);
    border-top-right-radius: var(--portal-card-radius);
}

.portal-shell .list-group:last-child .list-row:last-child,
.portal-shell .list-group-container > .list-row:last-child {
    border-bottom-left-radius: var(--portal-card-radius);
    border-bottom-right-radius: var(--portal-card-radius);
}

/* Heal C — phone row collapse. `.list-row-meta` is `flex: 0 0 auto` (Phase
   71 row anatomy, 71-UI-SPEC.md §Components 5: "auto, right-aligned before
   trailing") -- it never shrinks, so on a phone-width row (key 68px + meta's
   full un-shrunk content: project name + StatusDot + relative-date/count)
   the remaining space handed to `.list-row-title` (flex: 1 1 auto,
   min-width: 0) collapses toward zero and its text clips to a sliver or a
   single stray glyph -- see heal-C evidence (portal-requests-list-375x812.png,
   portal-projects-rows-375x812.png). The requests and projects rows share
   this exact mechanism (same ListRow/ListContainer components), so one grid
   override fixes both instead of a per-page patch.
   Switching `.list-row` to CSS Grid (only under `.portal-shell`, only below
   this breakpoint) makes the title column's width a property of the GRID
   TRACK, not of flex shrink math -- so it is immune to how wide the meta or
   trailing content happens to be. Key stays a fixed 68px column (matches the
   flex slot width, 71-UI-SPEC.md's row anatomy table); title gets every
   remaining pixel via `1fr`; trailing's column is sized to its own content
   (chevron/comment-count, both small); meta drops to a full-width second
   row below -- exactly the mobile rule the heal brief names: "the title
   must remain the primary visible text on phones; the meta ... may wrap
   below or truncate -- never the title." Staff `/tickets` is untouched:
   this whole block is scoped to `.portal-shell`, which never wraps a staff
   page (71-UI-SPEC.md's own "Phase 74 owns the phone treatment" note for
   the staff-only ListRow stands). */
@media (max-width: 599px) {
    .portal-shell .list-row {
        display: grid;
        grid-template-columns: 68px 1fr auto;
        grid-template-areas:
            "key title trailing"
            "meta meta meta";
        column-gap: 12px;
        row-gap: 4px;
        height: auto;
        min-height: var(--row-height);
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .portal-shell .list-row-key {
        grid-area: key;
    }

    .portal-shell .list-row-title {
        grid-area: title;
        min-width: 0;
    }

    .portal-shell .list-row-trailing {
        grid-area: trailing;
    }

    .portal-shell .list-row-meta {
        grid-area: meta;
        flex-wrap: wrap;
        row-gap: 2px;
    }
}

/* ── TenantMark (73-UI-SPEC.md §Components 2) ─────────────────────── */
.portal-shell .tenant-mark,
.portal-prelogin .tenant-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--portal-accent);
}

.portal-shell .tenant-mark-sm,
.portal-prelogin .tenant-mark-sm {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.portal-shell .tenant-mark-md,
.portal-prelogin .tenant-mark-md {
    width: 48px;
    height: 48px;
    border-radius: 8px;
}

.portal-shell .tenant-mark-lg,
.portal-prelogin .tenant-mark-lg {
    width: 64px;
    height: 64px;
    border-radius: 10px;
}

.portal-shell .tenant-mark-logo,
.portal-prelogin .tenant-mark-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #FFFFFF;
    border: 1px solid #E6E8EC;
    box-sizing: border-box;
}

.portal-shell .tenant-mark-sm .tenant-mark-logo,
.portal-prelogin .tenant-mark-sm .tenant-mark-logo {
    padding: 2px;
}

.portal-shell .tenant-mark-md .tenant-mark-logo,
.portal-shell .tenant-mark-lg .tenant-mark-logo,
.portal-prelogin .tenant-mark-md .tenant-mark-logo,
.portal-prelogin .tenant-mark-lg .tenant-mark-logo {
    padding: 4px;
}

.portal-shell .tenant-mark-initials,
.portal-prelogin .tenant-mark-initials {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    color: var(--portal-accent-text);
}

.portal-shell .tenant-mark-sm .tenant-mark-initials,
.portal-prelogin .tenant-mark-sm .tenant-mark-initials {
    font-size: 14px;
}

.portal-shell .tenant-mark-md .tenant-mark-initials,
.portal-prelogin .tenant-mark-md .tenant-mark-initials {
    font-size: 20px;
}

.portal-shell .tenant-mark-lg .tenant-mark-initials,
.portal-prelogin .tenant-mark-lg .tenant-mark-initials {
    font-size: 26px;
}

.portal-shell .tenant-mark-loading,
.portal-prelogin .tenant-mark-loading {
    width: 100%;
    height: 100%;
    background: #F4F5F7;
    border-radius: inherit;
}

/* ── Pre-login branded card -- BrandedSignIn + the branded AccessDenied
   (73-UI-SPEC.md §Components 9). One frame, both callers. ─────────── */
.portal-prelogin {
    min-height: 100vh;
    /* min-width: 0 overrides the flexbox default `min-width: auto` --
       #app (index.html) is `display: flex` (a relic of the pre-hydration
       loading-spinner centering, never toggled off once Blazor renders real
       content) and .portal-prelogin is its sole flex child. Without this,
       the browser refuses to shrink .portal-prelogin below its CONTENT's
       intrinsic width -- and .portal-prelogin-card's `width: 420px` (its
       `max-width: 100%` is ignored during intrinsic-size calculation, a
       standard flexbox quirk) makes that intrinsic width 468px (420 + 2x24px
       padding). On any viewport narrower than 468px the whole card overflowed
       left past the browser edge instead of shrinking to fit -- see the
       heal-C screenshot evidence (portal-prelogin-375x812.png: card touching
       the left edge, oversized right margin). min-width: 0 lets this flex
       item shrink to the actual #app width, after which max-width: 100% on
       the card (below) correctly caps it and justify-content: center works
       as authored. */
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    padding: 24px;
    box-sizing: border-box;
}

.portal-prelogin .portal-prelogin-card {
    width: 420px;
    max-width: 100%;
    background: #FFFFFF;
    border-radius: var(--portal-card-radius);
    box-shadow: var(--shadow-card);
    padding: 32px;
    text-align: center;
    box-sizing: border-box;
}

.portal-prelogin .portal-prelogin-mark {
    display: flex;
    justify-content: center;
}

.portal-prelogin .portal-prelogin-name {
    margin: 16px 0 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #1A1D23;
}

.portal-prelogin .portal-prelogin-heading {
    margin: 16px 0 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #1A1D23;
}

.portal-prelogin .portal-prelogin-subtitle {
    margin: 4px 0 0;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    color: #5E6470;
}

.portal-prelogin .portal-prelogin-body {
    margin: 8px 0 0;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #5E6470;
}

.portal-prelogin .portal-prelogin-shimmer {
    width: 140px;
    height: 19px;
    margin: 16px auto 0;
    border-radius: 4px;
    background: #F4F5F7;
}

.portal-prelogin .portal-prelogin-cta {
    display: block;
    width: 100%;
    height: 44px;
    margin-top: 24px;
    border-radius: 8px;
    border: none;
    background: var(--portal-accent);
    color: var(--portal-accent-text);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 44px;
    box-sizing: border-box;
    transition: filter 150ms ease;
}

.portal-prelogin .portal-prelogin-cta:hover {
    filter: brightness(0.92);
}

.portal-prelogin .portal-prelogin-support {
    margin: 16px 0 0;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    color: #5E6470;
}

.portal-prelogin .portal-prelogin-support a {
    color: inherit;
}

.portal-prelogin .portal-prelogin-support a:hover {
    text-decoration: underline;
}

/* UAT: a11y fix — --text-tertiary equivalent (#8B919E) measured 3.05-3.16:1 on
   white/#FFFFFF via axe (serious color-contrast); #5E6470 (--text-secondary) clears
   4.5:1+ on both backgrounds. Same root-cause bump 71/72 already applied to their
   analogous small-text selectors (see shell.css). */
.portal-prelogin .portal-prelogin-powered {
    margin: 24px 0 0;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    color: #5E6470;
}

.portal-prelogin .portal-prelogin-actions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.portal-prelogin .portal-prelogin-signout {
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid #E6E8EC;
    background: transparent;
    color: #1A1D23;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.portal-prelogin .portal-prelogin-signout:hover {
    border-color: #8B919E;
}

/* ── WaitingOnYou (73-UI-SPEC.md §Components 3, D-10, PORTAL-05/06) ──────── */
.portal-shell .waiting-on-you-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
}

.portal-shell .waiting-on-you-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1A1D23;
    margin: 0;
}

.portal-shell .waiting-on-you-count {
    height: 20px;
    min-width: 20px;
    padding: 0 8px;
    border-radius: 10px;
    background: var(--portal-accent-soft);
    color: #1A1D23;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.portal-shell .waiting-on-you-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.portal-shell .waiting-on-you-item {
    transition: opacity 150ms ease;
}

.portal-shell .waiting-on-you-item-removing {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .portal-shell .waiting-on-you-item {
        transition: none;
    }
}

.portal-shell .waiting-on-you-kind-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: #5E6470;
}

.portal-shell .waiting-on-you-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--portal-accent);
    flex: 0 0 auto;
}

.portal-shell .waiting-on-you-item-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #1A1D23;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.portal-shell .waiting-on-you-item-meta {
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    color: #5E6470;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.portal-shell .waiting-on-you-excerpt {
    margin: 8px 0 0;
    padding-left: 12px;
    border-left: 2px solid #E6E8EC;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: #5E6470;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.portal-shell .waiting-on-you-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.portal-shell .waiting-on-you-approve,
.portal-shell .waiting-on-you-reply {
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: none;
    background: var(--portal-accent);
    color: var(--portal-accent-text);
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: filter 150ms ease;
}

.portal-shell .waiting-on-you-approve:hover,
.portal-shell .waiting-on-you-reply:hover {
    filter: brightness(0.92);
}

.portal-shell .waiting-on-you-approve:disabled,
.portal-shell .waiting-on-you-reply:disabled,
.portal-shell .waiting-on-you-request-changes:disabled {
    opacity: 0.6;
    cursor: default;
}

.portal-shell .waiting-on-you-request-changes {
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #E6E8EC;
    background: transparent;
    color: #1A1D23;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.portal-shell .waiting-on-you-request-changes:hover {
    border-color: #8B919E;
}

.portal-shell .waiting-on-you-viewer-line {
    margin: 12px 0 0;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    color: #5E6470;
}

.portal-shell .waiting-on-you-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: currentColor;
    animation: waiting-on-you-spin 700ms linear infinite;
    flex: 0 0 auto;
}

@keyframes waiting-on-you-spin {
    to { transform: rotate(360deg); }
}

.portal-shell .waiting-on-you-dialog-approve {
    background-color: var(--portal-accent) !important;
    color: var(--portal-accent-text) !important;
}

.portal-shell .waiting-on-you-dialog-send {
    background-color: var(--portal-accent) !important;
    color: var(--portal-accent-text) !important;
}

/* ── ProgressRow (73-UI-SPEC.md §Components 4, D-10, PORTAL-08) ──────────── */
.portal-shell .progress-row {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    transition: background 150ms ease;
}

.portal-shell .progress-row:hover {
    background: #FFFFFF;
    margin: -8px;
    padding: 8px;
}

.portal-shell .progress-row-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
}

.portal-shell .progress-row-name {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1A1D23;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-shell .progress-row-count {
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    color: #5E6470;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.portal-shell .progress-row-track {
    height: 6px;
    border-radius: 3px;
    background: var(--portal-accent-soft);
    width: 100%;
    overflow: hidden;
}

.portal-shell .progress-row-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--portal-accent);
}

.portal-shell .progress-row-next-up {
    margin: 8px 0 0;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    color: #5E6470;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Overview page (73-UI-SPEC.md §Pages `/portal`, D-10, PORTAL-05/08) ──── */
.portal-shell .portal-overview-greeting {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    color: #1A1D23;
    margin: 0;
}

.portal-shell .portal-overview-summary {
    margin: 8px 0 24px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #5E6470;
}

.portal-shell .portal-overview-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.portal-shell .portal-overview-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 16px;
}

.portal-shell .portal-overview-card-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1A1D23;
    margin: 0 0 16px;
}

.portal-shell .portal-overview-card-header .portal-overview-card-title {
    margin: 0;
}

/* UAT: a11y fix — --text-tertiary equivalent (#8B919E) measured 3.05-3.16:1 on
   white/#FFFFFF via axe (serious color-contrast); #5E6470 (--text-secondary) clears
   4.5:1+ on both backgrounds. Same root-cause bump 71/72 already applied to their
   analogous small-text selectors (see shell.css). */
.portal-shell .portal-overview-this-week-label {
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    color: #5E6470;
}

.portal-shell .portal-overview-projects {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.portal-shell .portal-overview-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.portal-shell .portal-overview-skeleton-row {
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(90deg, #F4F5F7 25%, #E9EBEE 50%, #F4F5F7 75%);
    background-size: 200% 100%;
    animation: portal-overview-shimmer 1.4s ease infinite;
}

@keyframes portal-overview-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .portal-shell .portal-overview-skeleton-row {
        animation: none;
    }
}

/* ── Requests / Projects / New request page headers (73-UI-SPEC.md §Pages) ── */
.portal-shell .portal-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.portal-shell .portal-page-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #1A1D23;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.portal-shell .portal-page-title-standalone {
    margin-bottom: 24px;
}

/* UAT: a11y fix — --text-tertiary equivalent (#8B919E) measured 3.05-3.16:1 on
   white/#FFFFFF via axe (serious color-contrast); #5E6470 (--text-secondary) clears
   4.5:1+ on both backgrounds. Same root-cause bump 71/72 already applied to their
   analogous small-text selectors (see shell.css). */
.portal-shell .portal-page-count {
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    color: #5E6470;
    font-variant-numeric: tabular-nums;
}

.portal-shell .portal-page-header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.portal-shell .portal-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #E6E8EC;
    background: #FFFFFF;
}

.portal-shell .portal-search-icon {
    flex: 0 0 auto;
}

.portal-shell .portal-search-input {
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: #1A1D23;
    width: 200px;
}

.portal-shell .portal-search-input::placeholder {
    color: #8B919E;
}

/* ── New request (73-UI-SPEC.md §Pages `/portal/requests/new`) ───────────── */
.portal-shell .portal-new-request-card {
    max-width: 640px;
    margin: 0 auto;
}

.portal-shell .portal-new-request-subtitle {
    margin: 4px 0 0;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    color: #5E6470;
}

.portal-shell .portal-new-request-submit {
    background-color: var(--portal-accent) !important;
    color: var(--portal-accent-text) !important;
}

/* ── Phase 77 — portal updates timeline, phone tabs ───────────────────────── */

/* Timeline card: rows sit directly inside, no card padding. */
.portal-shell .update-timeline-card {
    padding: 0;
    overflow: hidden;
}

.portal-shell .update-page-header .filter-strip {
    margin: 0;
    padding: 0;
    /* V-2: the shared strip is a 40px sticky grey band; inside the header row it is just a chip host. */
    height: auto;
    min-height: 0;
    background: transparent;
    border-bottom: 0;
    position: static;
    overflow: visible;
}

.portal-shell .update-page-header .filter-strip-chips {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}

/* V-1: #app (index.html) is a centring flex box (loading-splash relic) and the shell is its only
   child; whenever the shell is taller than the viewport (always on phone: topbar + 100vh-height
   content + bottom-tab padding) centring pushes half the overflow ABOVE the top edge, where it
   cannot be scrolled to, so the first content rows slide under the sticky top bar. Pin to the top. */
.portal-shell {
    align-self: flex-start;
}

.portal-shell .update-month {
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: #FAFBFC;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: #5E6470;
}

.portal-shell .update-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.portal-shell .update-list > li + li {
    border-top: 1px solid #E6E8EC;
}

.portal-shell .update-entry-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 12px 20px;
    text-decoration: none;
    color: #1A1D23;
    min-width: 0;
}

.portal-shell .update-entry-row:hover {
    background: #F4F5F7;
}

.portal-shell .update-entry-row:focus-visible {
    outline: 2px solid var(--portal-accent);
    outline-offset: 0;
}

.portal-shell .update-entry-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.portal-shell .update-entry-kindline,
.portal-shell .update-detail-kindline {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    color: #5E6470;
}

.portal-shell .update-entry-kind {
    font-weight: 500;
}

.portal-shell .update-entry-date {
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.portal-shell .update-kind-icon {
    flex: 0 0 auto;
    color: #5E6470;
}

.portal-shell .update-entry-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #1A1D23;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-shell .update-entry-meta {
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    line-height: 1.4;
    color: #5E6470;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.portal-shell .update-entry-chevron {
    flex: 0 0 auto;
}

.portal-shell .update-skeleton-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 72px;
    padding: 12px 20px;
}

.portal-shell .update-skeleton-bar {
    display: block;
    max-width: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #F4F5F7 25%, #E9EBEE 50%, #F4F5F7 75%);
    background-size: 200% 100%;
    animation: portal-overview-shimmer 1.4s ease infinite;
}

/* Detail pages */
.portal-shell .update-detail {
    min-width: 0;
}

.portal-shell .update-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    margin-bottom: 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #5E6470;
    text-decoration: none;
}

.portal-shell .update-back-link:hover {
    color: #1A1D23;
}

.portal-shell .update-back-link:focus-visible,
.portal-shell .update-included-row:focus-visible {
    outline: 2px solid var(--portal-accent);
    outline-offset: 2px;
}

.portal-shell .update-detail-header {
    margin-bottom: 32px;
}

.portal-shell .update-detail-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: #1A1D23;
    margin: 4px 0;
    overflow-wrap: anywhere;
}

.portal-shell .update-detail-meta {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    line-height: 1.4;
    color: #5E6470;
    overflow-wrap: anywhere;
}

.portal-shell .update-detail-content {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

.portal-shell .update-detail-prose {
    max-width: 72ch;
    min-width: 0;
    overflow-wrap: anywhere;
}

.portal-shell .update-included {
    margin-top: 24px;
}

.portal-shell .update-included-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1A1D23;
    margin: 0 0 12px;
}

.portal-shell .update-included-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.portal-shell .update-included-list > li + li {
    border-top: 1px solid #E6E8EC;
}

.portal-shell .update-included-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 20px;
    text-decoration: none;
    color: #1A1D23;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    min-width: 0;
}

.portal-shell .update-included-row:hover {
    background: #F4F5F7;
}

.portal-shell .update-included-key {
    flex: 0 0 auto;
    color: #5E6470;
    font-variant-numeric: tabular-nums;
}

.portal-shell .update-included-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .portal-shell .update-skeleton-bar {
        animation: none;
    }
}

@media (max-width: 767px) {
    .portal-shell .update-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .portal-shell .update-back-link {
        min-height: 44px;
    }
}

.portal-shell .portal-empty-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Overview "What happened this week" (77 D-03/D-04, UI-SPEC §3) */
.portal-shell .portal-this-week-list {
    display: flex;
    flex-direction: column;
}

.portal-shell .portal-this-week-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 44px;
    margin: 0 -8px;
    padding: 6px 8px;
    border-radius: 8px;
    text-decoration: none;
    min-width: 0;
}

.portal-shell .portal-this-week-row:hover {
    background: #F4F5F7;
}

.portal-shell .portal-this-week-day {
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    color: #5E6470;
}

.portal-shell .portal-this-week-title {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1A1D23;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-shell .portal-this-week-note {
    margin: 0 0 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 12.5px;
    color: #5E6470;
}

.portal-shell .portal-this-week-see-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    margin-top: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #1A1D23;
    text-decoration: none;
}

.portal-shell .portal-this-week-see-all:hover {
    text-decoration: underline;
}

/* Bottom tab bar: hidden on desktop, shown below 768px. */
.portal-shell .portal-bottom-tabs {
    display: none;
}

/* The avatar-menu Files item is phone-only. UNSCOPED on purpose: MudPopoverProvider renders
   the menu outside .portal-shell, so a .portal-shell-scoped rule would never reach it (R-10). */
@media (min-width: 768px) {
    .portal-menu-files-phone {
        display: none !important;
    }
}

@media (max-width: 767px) {
    /* Single-row 64px top bar; the second nav row is replaced by the bottom tabs. */
    .portal-shell .portal-nav {
        display: none;
    }
    .portal-shell .portal-brand {
        flex: 1 1 auto;
        min-width: 0;
    }
    .portal-shell .portal-brand-text {
        min-width: 0;
    }
    .portal-shell .portal-topbar-spacer {
        flex: 0 0 0;
    }

    .portal-shell {
        height: auto;
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    .portal-shell .portal-bottom-tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        height: calc(56px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #FFFFFF;
        border-top: 1px solid #E6E8EC;
    }

    .portal-shell .portal-bottom-tab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 56px;
        min-width: 44px;
        padding: 8px 4px;
        color: #5E6470;
        text-decoration: none;
        font-family: 'Outfit', sans-serif;
        font-size: 12.5px;
        font-weight: 500;
        white-space: nowrap;
    }

    .portal-shell .portal-bottom-tab:active {
        background: #F4F5F7;
    }

    .portal-shell .portal-bottom-tab:focus-visible {
        outline: 2px solid var(--portal-accent);
        outline-offset: -2px;
    }

    .portal-shell .portal-bottom-tab[aria-current="page"] {
        color: #1A1D23;
    }

    .portal-shell .portal-bottom-tab[aria-current="page"]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 32px;
        height: 2px;
        margin-left: -16px;
        background: var(--portal-accent);
        border-radius: 0 0 2px 2px;
    }

    .portal-shell [id],
    .portal-shell :target {
        scroll-margin-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
    }

    /* Snackbars sit above the tab bar (MudBlazor override, hence !important). */
    .mud-snackbar-location-bottom-left,
    .mud-snackbar-location-bottom-center,
    .mud-snackbar-location-bottom-right {
        margin-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Phone approval buttons: full width, stacked, Approve first, >= 44px (77 D-11). */
    .portal-shell .waiting-on-you-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .portal-shell .waiting-on-you-approve,
    .portal-shell .waiting-on-you-request-changes,
    .portal-shell .waiting-on-you-reply {
        width: 100%;
        height: auto;
        min-height: 44px;
        justify-content: center;
    }
    .portal-shell .portal-approval-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .portal-shell .portal-approval-actions .mud-button-root {
        width: 100%;
        min-height: 44px;
        margin: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-shell .portal-bottom-tab {
        transition: none;
    }
}

@media (max-width: 767px) {
    /* V-2: the clear (x) segment of the Updates filter chip is a full 44px target on phone. */
    .portal-shell .update-page-header .filter-chip-clear {
        width: 44px;
    }
}