/* A customer's view, not a second internal dashboard. */
.ppc-panel--showcase-client-portal:focus { outline: none; }
.ps-layout--client-portal { grid-template-columns: minmax(0, .84fr) minmax(0, 1.56fr); gap: clamp(32px, 3.5vw, 56px); }
.client-portal-showcase { --portal-ink: #19364b; --portal-muted: #667783; --portal-edge: #e0e7ea; position: relative; display: grid; grid-template-columns: minmax(145px, .43fr) minmax(0, 1fr); align-items: center; gap: 28px; color: var(--portal-ink); max-width: 820px; margin-inline: auto; font-variant-numeric: tabular-nums; }
.portal-client { position: relative; isolation: isolate; margin: 0; align-self: center; }
.portal-client::before { content: ''; position: absolute; z-index: -1; inset: 18% -15% 4%; border-radius: 140px 140px 50px 50px; background: linear-gradient(160deg, #f0ece3 0%, #f4f1ea 65%, transparent 100%); }
.portal-client img { display: block; width: 100%; max-height: 580px; object-fit: contain; filter: drop-shadow(0 13px 14px rgb(45 43 32 / 12%)); }
.portal-preview { min-width: 0; }
.portal-window { overflow: hidden; border: 1px solid #cddbe2; border-radius: 18px; background: #fff; box-shadow: 0 20px 45px -24px rgb(28 49 65 / 25%), 0 2px 4px rgb(28 49 65 / 3%); }
.portal-window__brand { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 24px; background: #17364a; color: #fff; }
.portal-company { display: flex; align-items: center; gap: 9px; }
.portal-company > i { font-size: 23px; color: #e6c48b; }
.portal-company > span { display: grid; gap: 3px; font-size: 21px; line-height: 1.05; font-weight: 600; letter-spacing: -.015em; }
.portal-company small { font-size: 8px; font-weight: 400; letter-spacing: .24em; color: #d1dbe0; }
.portal-window__label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #d5e1e6; }
.portal-window__label i { font-size: 9px; }
.portal-overview { padding: 24px 24px 22px; }
.client-portal-showcase .portal-greeting { margin: 0 0 5px; font-size: 13px; color: var(--portal-muted); }
.client-portal-showcase .portal-overview h4 { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: var(--portal-ink); margin: 0; }
.portal-project-status { display: flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 12px; color: #3b6076; }
.portal-project-status > span { width: 6px; height: 6px; border-radius: 50%; background: #3b6076; }
.portal-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 24px; }
.portal-progress > span { position: relative; padding-top: 13px; font-size: 11px; color: #78878f; }
.portal-progress > span::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 3px; background: #e9eef0; }
.portal-progress .portal-progress__done { color: #28724e; }
.portal-progress .portal-progress__done::before { background: #7ca791; }
.portal-progress .portal-progress__current { color: #294f68; font-weight: 600; }
.portal-progress .portal-progress__current::before { background: #315a76; }
.portal-progress i { margin-right: 4px; font-size: 9px; }
.portal-next-visit { display: flex; align-items: center; gap: 13px; margin: 0 24px; padding: 16px; border: 1px solid #ebe4d6; border-radius: 9px; background: #fbf8f1; }
.portal-calendar { flex: 0 0 41px; display: grid; text-align: center; border-radius: 6px; border: 1px solid #e7ddc9; background: #fff; overflow: hidden; }
.portal-calendar small { padding: 3px 0; background: #f2e7d3; color: #826032; font-size: 9px; letter-spacing: .08em; line-height: 1.2; }
.portal-calendar strong { font-size: 22px; line-height: 1.35; font-weight: 600; }
.portal-next-visit > div { min-width: 0; display: grid; gap: 3px; }
.portal-next-visit > div > span { color: var(--portal-muted); font-size: 11px; }
.portal-next-visit > div > strong { font-size: 14px; font-weight: 600; line-height: 1.3; }
.portal-next-visit > i { color: #9a8054; font-size: 17px; margin-left: auto; }
.portal-updates { padding: 8px 24px 7px; }
.portal-update { display: flex; align-items: center; gap: 11px; padding: 18px 0; }
.portal-update + .portal-update { border-top: 1px solid var(--portal-edge); }
.portal-update__icon { display: grid; place-items: center; flex: 0 0 32px; height: 35px; border-radius: 7px; background: #f0f4f6; color: #496c82; font-size: 14px; }
.portal-update > div { display: grid; gap: 4px; min-width: 0; }
.portal-update > div > strong { font-size: 14px; font-weight: 600; line-height: 1.35; }
.portal-update > div > span { color: var(--portal-muted); font-size: 11px; }
.portal-update__status { display: flex; align-items: center; gap: 4px; padding: 4px 7px; margin-left: auto; background: #edf5ef; border-radius: 4px; color: #246b49; font-size: 11px; white-space: nowrap; }
.portal-update__status i { font-size: 9px; }
.portal-window__footer { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 16px; border-top: 1px solid var(--portal-edge); color: #547168; font-size: 11px; background: #fbfcfc; }
.client-portal-showcase .portal-privacy { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 16px 0 0; color: var(--portal-muted); font-size: 12px; line-height: 1.4; }
.portal-privacy > i { font-size: 10px; color: #698192; }
@media (min-width: 1025px) and (max-height: 800px) {
    .client-portal-showcase { gap: 24px; }
    .portal-client img { max-height: 505px; }
    .portal-window__brand { padding-block: 16px; }
    .portal-overview { padding-block: 18px; }
    .portal-progress { margin-top: 18px; }
    .portal-next-visit { padding: 12px; }
    .portal-update { padding-block: 15px; }
    .client-portal-showcase .portal-privacy { margin-top: 12px; }
}
/* Mobile uses readable type with density adapted to the available slide. */
@media (max-width: 1024px) {
    .ppc-panel--showcase-client-portal .ppc-mobile { max-width: 790px; gap: 20px; }
    .ppc-panel--showcase-client-portal .ppc-mobile__points { display: none; }
    .client-portal-showcase { gap: 24px; }
    .portal-client img { max-height: 485px; }
    .portal-window__brand { padding: 18px 20px; }
    .portal-company > span { font-size: 20px; }
    .portal-company small { font-size: 13px; line-height: 1.3; letter-spacing: .06em; }
    .portal-window__label { font-size: 13px; }
    .portal-window__label i { font-size: 11px; }
    .portal-overview { padding: 22px 20px; }
    .client-portal-showcase .portal-greeting { font-size: 14px; line-height: 1.5; }
    .portal-project-status { font-size: 14px; line-height: 1.4; }
    .portal-progress { margin-top: 24px; }
    .portal-progress > span { font-size: 13px; line-height: 1.4; }
    .portal-progress i { font-size: 11px; }
    .portal-next-visit { padding: 16px; margin-inline: 20px; }
    .portal-calendar { flex-basis: 44px; }
    .portal-calendar small { font-size: 13px; padding-block: 4px; }
    .portal-calendar strong { font-size: 26px; }
    .portal-next-visit > div { gap: 5px; }
    .portal-next-visit > div > span { font-size: 14px; line-height: 1.4; }
    .portal-next-visit > div > span:first-child { font-size: 13px; }
    .portal-next-visit > div > strong { font-size: 16px; line-height: 1.4; }
    .portal-updates { padding: 6px 20px; }
    .portal-update { gap: 12px; padding-block: 18px; }
    .portal-update > div { gap: 5px; }
    .portal-update > div > strong { font-size: 16px; line-height: 1.4; }
    .portal-update > div > span { font-size: 14px; line-height: 1.4; }
    .portal-update__status { font-size: 13px; padding: 5px 7px; }
    .portal-update__status i { font-size: 11px; }
    .portal-window__footer { padding: 14px 16px; font-size: 13px; line-height: 1.4; }
    .client-portal-showcase .portal-privacy { margin-top: 16px; font-size: 14px; line-height: 1.5; }
    .portal-privacy > i { font-size: 12px; }
}
@media (max-width: 600px) {
    .client-portal-showcase { display: block; width: 100%; max-width: 440px; }
    .portal-client { position: absolute; z-index: 2; top: 84px; right: 16px; width: 136px; height: 184px; overflow: hidden; border-radius: 0; mask-image: linear-gradient(#000 0 94%, transparent 100%); }
    .portal-client::before { display: none; }
    .portal-client img { width: 100%; max-height: none; object-fit: initial; filter: none; }
    .portal-window { border-radius: 13px; }
    .portal-window__brand { padding: 15px 16px; gap: 10px; }
    .portal-company { gap: 8px; }
    .portal-company > i { font-size: 20px; }
    .portal-company > span { font-size: 18px; }
    .portal-window__label { gap: 5px; white-space: nowrap; }
    .portal-overview { display: grid; grid-template-columns: minmax(0, 1fr) 136px; grid-template-rows: auto auto 1fr auto; gap: 8px 16px; min-height: 254px; padding: 18px 16px; }
    .client-portal-showcase .portal-greeting { grid-column: 1; max-width: none; margin: 0; }
    .client-portal-showcase .portal-overview h4 { grid-column: 1; max-width: none; min-height: 0; font-size: 24px; line-height: 1.25; }
    .portal-project-status { grid-column: 1; align-self: start; margin-top: 0; }
    .portal-progress { grid-column: 1/-1; align-self: end; margin-top: 8px; }
    .portal-progress > span { padding-top: 12px; }
    .portal-next-visit { margin-inline: 16px; padding: 12px; gap: 12px; }
    .portal-next-visit > i { display: none; }
    .portal-updates { padding: 6px 16px; }
    .portal-update { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 10px; padding-block: 14px; }
    .portal-update > div { gap: 4px; }
    .portal-update__icon { width: 32px; height: 35px; font-size: 16px; }
    .portal-update__status { margin-left: 0; }
    .portal-window__footer { display: none; }
    .client-portal-showcase .portal-privacy { align-items: baseline; margin-top: 10px; padding-inline: 8px; }
}
@media (max-width: 380px) {
    .portal-window__brand { padding-inline: 14px; }
    .portal-company > i { display: none; }
    .portal-company small { letter-spacing: .02em; }
    .portal-client { width: 112px; height: 158px; right: 14px; }
    .portal-overview { grid-template-columns: minmax(0, 1fr) 112px; column-gap: 12px; }
    .portal-update { grid-template-columns: 28px minmax(0, 1fr); row-gap: 8px; }
    .portal-update__icon { width: 28px; }
    .portal-update__status { grid-column: 2; justify-self: start; }
}
@media (max-width: 600px) {
    .ppc-mobile--compact .portal-window__brand { padding: 11px 14px; }
    .ppc-mobile--compact .portal-company > span { font-size: 17px; }
    .ppc-mobile--compact .portal-company small { font-size: 12px; line-height: 1.2; }
    .ppc-mobile--compact .portal-window__label { font-size: 12px; }
    .ppc-mobile--compact .portal-client { top: 68px; right: 14px; width: 116px; height: 156px; }
    .ppc-mobile--compact .portal-overview { grid-template-columns: minmax(0, 1fr) 116px; gap: 7px 12px; min-height: 214px; padding: 14px; }
    .ppc-mobile--compact .portal-greeting { max-width: none; font-size: 13px; line-height: 1.3; }
    .ppc-mobile--compact .portal-overview h4 { max-width: none; min-height: 0; font-size: 22px; line-height: 1.2; }
    .ppc-mobile--compact .portal-project-status { margin-top: 0; font-size: 13px; line-height: 1.3; }
    .ppc-mobile--compact .portal-progress { margin-top: 7px; }
    .ppc-mobile--compact .portal-progress > span { padding-top: 9px; font-size: 12px; line-height: 1.3; }
    .ppc-mobile--compact .portal-next-visit { margin-inline: 14px; padding: 10px; gap: 10px; }
    .ppc-mobile--compact .portal-calendar { flex-basis: 38px; }
    .ppc-mobile--compact .portal-calendar small { padding-block: 2px; font-size: 12px; }
    .ppc-mobile--compact .portal-calendar strong { font-size: 23px; line-height: 1.25; }
    .ppc-mobile--compact .portal-next-visit > div { gap: 2px; }
    .ppc-mobile--compact .portal-next-visit > div > span { font-size: 12px; line-height: 1.3; }
    .ppc-mobile--compact .portal-next-visit > div > span:first-child { display: none; }
    .ppc-mobile--compact .portal-next-visit > div > strong { font-size: 14px; line-height: 1.3; }
    .ppc-mobile--compact .portal-updates { padding: 3px 14px; }
    .ppc-mobile--compact .portal-update { grid-template-columns: 27px minmax(0, 1fr) auto; gap: 8px; padding-block: 8px; }
    .ppc-mobile--compact .portal-update > div { gap: 2px; }
    .ppc-mobile--compact .portal-update > div > strong { font-size: 14px; line-height: 1.3; }
    .ppc-mobile--compact .portal-update > div > span { font-size: 12px; line-height: 1.3; }
    .ppc-mobile--compact .portal-update__icon { width: 27px; height: 31px; font-size: 14px; }
    .ppc-mobile--compact .portal-update__status { grid-column: auto; justify-self: end; padding: 3px 5px; font-size: 12px; line-height: 1.3; }
    .ppc-mobile--compact .portal-window__footer { padding: 7px 10px; font-size: 12px; line-height: 1.3; }
    .ppc-mobile--compact .portal-privacy { margin-top: 8px; font-size: 12px; line-height: 1.3; }
    .ppc-mobile--short .portal-window__brand { padding-block: 9px; }
    .ppc-mobile--short .portal-client { top: 64px; height: 117px; width: 90px; }
    .ppc-mobile--short .portal-overview { grid-template-columns: minmax(0, 1fr) 90px; min-height: 174px; padding-block: 11px; }
    .ppc-mobile--short .portal-overview h4 { font-size: 20px; min-height: 0; }
    .ppc-mobile--short .portal-progress { margin-top: 5px; }
    .ppc-mobile--short .portal-next-visit { padding-block: 8px; }
    .ppc-mobile--short .portal-next-visit > div > span:first-child { display: none; }
    .ppc-mobile--short .portal-update { padding-block: 8px; }
    .ppc-mobile--short .portal-window__footer { display: none; }
}
/* Keep the approved desktop headline width unchanged. */
.ps-layout--client-portal .ppc-panel__headline { max-width: 15ch; }
@media (max-width: 1024px) and (max-height: 820px) {
    body:has(.ppc--pinned .ppc-panel--showcase-client-portal.is-active) #backToTop { visibility: hidden; }
}