/* Portal CSS part: shared portal system and canonical client-portal components. */
/* Split from portal.css (Phase 6): linked straight after portal.css and the earlier portal-*.css parts, in this order, so the cascade is unchanged. */

/* Shared portal system (dashboard/project/review/watch) */

:where(body.portal-page.portal-entry-page, body.portal-page.portal-dashboard-page, body.portal-page.project-landing-page, body.portal-page.watch-page, body.portal-page.review-page, body.portal-page.delivery-page, body.portal-page.request-upload-page) {
  --client-shell-max: 77.5rem;
  --client-media-max: 87.5rem;
  --client-shell-gutter: var(--space-10, 40px);
  --client-page-top: calc(var(--space-10, 40px) * 2 + var(--space-2, 8px));
  --client-section-gap: var(--space-10, 40px);
  --client-group-gap: var(--space-6, 24px);
  --client-control-height: var(--space-10, 40px);
  --client-panel-radius: 14px;
  --client-control-radius: 10px;
}

/* Canonical client-portal components. Page templates use these classes
   directly so older page-specific selectors cannot change their appearance. */

body.portal-page .portal-back-control {
  width: fit-content;
  min-height: var(--space-10, 40px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: 0 var(--space-3, 12px);
  border: 1px solid var(--client-border);
  border-radius: var(--client-control-radius);
  background: rgba(var(--cream-rgb), 0.04);
  color: var(--client-text-soft);
  font-family: var(--client-type-body, var(--font-body));
  font-size: 0.75rem;
  font-weight: 700;
  line-height: var(--rf-type-leading-1, 1);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

body.portal-page .portal-back-control:hover {
  border-color: rgba(var(--orange-rgb), 0.42);
  background: rgba(var(--orange-rgb), 0.08);
  color: var(--client-text);
}

body.portal-page .portal-back-control-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex: 0 0 auto;
  fill: currentColor;
}

body.portal-page .portal-page-heading {
  display: grid;
  align-items: start;
  gap: var(--space-2, 8px);
}

body.portal-page .portal-page-label {
  display: block;
  margin: 0;
  color: var(--orange);
  font-family: var(--client-type-technical, var(--font-mono));
  font-size: 0.625rem;
  font-weight: 700;
  line-height: var(--rf-type-leading-1-2, 1.2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.portal-page .portal-section-label {
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  margin: 0 0 var(--space-4, 16px);
  color: var(--orange);
  font-family: var(--client-type-technical, var(--font-mono));
  font-size: var(--rf-type-size-0-65rem, 0.65rem);
  font-weight: 700;
  line-height: var(--rf-type-leading-1-2, 1.2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  --rf-type-heading-size: var(--rf-type-size-0-65rem);
}

body.portal-page .portal-section-label::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: var(--client-border-quiet);
}

body.portal-page .portal-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.portal-page .portal-action svg {
  flex: 0 0 auto;
}

body.portal-page .portal-field {
  width: 100%;
}

body.watch-page.portal-page .portal-format-selector .portal-choice,
body.review-page.portal-page .portal-format-selector .portal-choice,
body.portal-page .portal-version-selector .portal-version-pill {
  min-height: var(--space-10, 40px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: 0 var(--space-4, 16px);
  border: 1px solid var(--client-border);
  border-radius: var(--client-control-radius);
  background: color-mix(in srgb, var(--cream) 3.5%, transparent);
  color: var(--client-text-soft);
  font-family: var(--client-type-body, var(--font-body));
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

body.watch-page.portal-page .portal-format-selector .portal-choice:hover,
body.review-page.portal-page .portal-format-selector .portal-choice:hover,
body.portal-page .portal-version-selector .portal-version-pill:hover {
  border-color: rgba(var(--orange-rgb), 0.38);
  background: color-mix(in srgb, var(--cream) 7%, transparent);
  color: var(--client-text);
}

body.watch-page.portal-page .portal-format-selector .portal-choice.active,
body.review-page.portal-page .portal-format-selector .portal-choice.active,
body.portal-page .portal-version-selector .portal-version-pill.active {
  border-color: rgba(var(--orange-rgb), 0.62);
  background: rgba(var(--orange-rgb), 0.15);
  color: var(--client-text);
  font-weight: 750;
  box-shadow: inset 0 0 0 1px rgba(var(--orange-rgb), 0.18);
}

body.watch-page.portal-page .portal-format-selector .portal-choice .portal-format-icon,
body.review-page.portal-page .portal-format-selector .portal-choice .portal-format-icon {
  width: 1.5rem;
  height: 1rem;
  flex: 0 0 1.5rem;
}

body.watch-page.portal-page .portal-format-selector .portal-choice .portal-format-pill-label,
body.review-page.portal-page .portal-format-selector .portal-choice .portal-format-pill-label {
  margin: 0;
  color: inherit;
  font-family: var(--client-type-body, var(--font-body));
  font-size: 0.75rem;
  font-weight: 650;
  line-height: var(--rf-type-leading-1-2, 1.2);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

body.watch-page.portal-page .portal-page-nav {
  width: min(100%, calc(var(--client-shell-max) - (var(--client-shell-gutter) * 2)));
  margin-inline: auto;
}

@media (max-width: 640px) {
  body.watch-page.portal-page .portal-format-selector,
  body.review-page.portal-page .portal-format-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: var(--space-2, 8px);
  }

  body.watch-page.portal-page .portal-format-selector .portal-choice,
  body.review-page.portal-page .portal-format-selector .portal-choice {
    width: 100%;
  }

  body.review-page.portal-page .review-share-actions .portal-action {
    width: 100%;
  }
}

body.portal-dashboard-page.portal-page .portal-dashboard,
body.portal-page.project-landing-page .page,
body.review-page.portal-page .review-room {
  width: 100%;
  max-width: var(--client-shell-max);
  margin-inline: auto;
  padding: var(--client-page-top) var(--client-shell-gutter) var(--space-10, 40px);
}

body.watch-page.portal-page .watch-content,
body.watch-page.portal-page .watch-content-spaced {
  width: 100%;
  max-width: var(--client-media-max);
  margin-inline: auto;
  padding: var(--client-page-top) var(--client-shell-gutter) var(--space-10, 40px);
}

body.portal-dashboard-page.portal-page .client-masthead,
body.portal-dashboard-page.portal-page #projects-section,
body.portal-dashboard-page.portal-page #resources-section,
body.portal-dashboard-page.portal-page #producer-section,
body.watch-page.portal-page .watch-screening-copy {
  width: min(100%, calc(var(--client-shell-max) - (var(--client-shell-gutter) * 2)));
  margin-inline: auto;
}

body.portal-dashboard-page.portal-page .client-masthead {
  padding: var(--space-6, 24px) 0 calc(var(--space-10, 40px) + var(--space-2, 8px));
}

body.portal-dashboard-page.portal-page .client-logo {
  width: min(21rem, 68vw);
  max-height: 8rem;
}

body.portal-dashboard-page.portal-page #projects-section,
body.portal-dashboard-page.portal-page #resources-section,
body.portal-dashboard-page.portal-page #producer-section {
  margin-bottom: calc(var(--space-10, 40px) + var(--space-2, 8px));
}

body.portal-dashboard-page.portal-page .film-grid {
  grid-template-columns: repeat(auto-fill, minmax(18rem, 22rem));
  gap: var(--space-6, 24px);
}

body.portal-dashboard-page.portal-page .film-card {
  width: 100%;
  max-width: 22rem;
  gap: var(--space-3, 12px);
}

body.portal-dashboard-page.portal-page .film-thumb {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--client-panel-radius);
  border-color: var(--client-border);
  background: var(--client-panel-soft);
  box-shadow: none;
}

body.portal-dashboard-page.portal-page .film-title {
  font-family: var(--rf-type-heading-family);
  font-weight: var(--rf-type-heading-weight);
  line-height: var(--rf-type-leading-1-3);
  color: var(--client-text-soft);
  --rf-type-heading-size: var(--rf-type-size-1rem);
}

body.portal-page.project-landing-page .project-landing-masthead,
body.portal-page.project-landing-page #milestone-bar,
body.portal-page.project-landing-page .project-landing-room {
  width: 100%;
  max-width: none;
}

body.portal-page.project-landing-page .project-landing-title,
body.watch-page.portal-page .view-title,
body.review-page.portal-page .review-title {
  max-width: 18ch;
  margin: 0;
  font-family: var(--rf-type-heading-family);
  font-weight: var(--rf-type-heading-weight);
  line-height: var(--rf-type-leading-1-04);
  text-wrap: balance;
  text-shadow: none;
  --rf-type-heading-size: var(--rf-type-size-3rem);
}

body.portal-page.project-landing-page .project-landing-title {
  max-width: 100%;
}

body.portal-page.project-landing-page .project-landing-masthead {
  padding-bottom: var(--space-6, 24px);
}

body.portal-page.project-landing-page .ms-client-bar {
  margin-bottom: var(--client-section-gap);
  padding: var(--space-5, 20px) 0;
}

body.portal-page.project-landing-page .project-landing-room,
body.portal-page.project-landing-page .project-landing-primary {
  gap: var(--client-section-gap);
}

body.portal-page.project-landing-page .project-review-card,
body.portal-page.project-landing-page .project-room-music,
body.portal-page.project-landing-page .project-room-files,
body.review-page.portal-page .feedback-sidebar,
body.review-page.portal-page .video-container {
  border-radius: var(--client-panel-radius);
  border-color: var(--client-border);
  border-top-color: rgba(var(--rf-tone-neutral-rgb), 0.16);
  background: var(--client-panel);
  box-shadow: var(--client-shadow);
  backdrop-filter: blur(28px) brightness(1.06) saturate(1.34);
  -webkit-backdrop-filter: blur(28px) brightness(1.06) saturate(1.34);
}

body.portal-page.project-landing-page .project-review-empty-title,
body.portal-page.project-landing-page .project-room-empty-title,
body.review-page.portal-page .comment-empty-title,
body.review-page.portal-page .review-no-versions-heading {
  font-family: var(--client-type-display, var(--font-display));
  font-weight: var(--rf-type-heading-weight);
  line-height: var(--rf-type-leading-1-3);
  letter-spacing: var(--rf-type-heading-tracking);
  --rf-type-heading-size: var(--rf-type-size-1-35rem);
}

body.portal-page.project-landing-page .project-review-copy {
  padding: var(--space-6, 24px);
}

body.watch-page.portal-page .watch-screening-room {
  gap: var(--space-8, 32px);
}

body.watch-page.portal-page .view-player-container {
  width: min(100%, var(--client-media-max), calc((100vh - 13rem) * 16 / 9));
  margin-inline: auto;
  border-radius: var(--client-panel-radius);
}

body.watch-page.portal-page .watch-screening-copy {
  display: grid;
  gap: var(--space-5, 20px);
}

body.watch-page.portal-page .watch-header {
  margin: 0;
}

body.watch-page.portal-page .view-meta {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4, 16px) var(--space-8, 32px);
}

body.watch-page.portal-page .watch-screening-label,
body.review-page.portal-page .review-screening-label {
  margin: 0;
}

body.watch-page.portal-page .watch-film-meta,
body.review-page.portal-page .review-film-meta {
  color: var(--client-text-soft);
  font-size: var(--rf-type-size-0-9rem, 0.9rem);
  font-weight: 650;
  line-height: var(--rf-type-leading-1-4, 1.4);
}

body.review-page.portal-page .review-guidance {
  max-width: 38rem;
  margin: var(--space-1, 4px) 0 0;
  color: var(--client-text-soft);
  font-family: var(--client-type-body, var(--font-body));
  font-size: var(--rf-type-size-0-9rem, 0.9rem);
  font-weight: 500;
  line-height: 1.5;
}

body.review-page.portal-page .review-replacement-notice[hidden] {
  display: none;
}

body.review-page.portal-page .review-replacement-notice {
  width: fit-content;
  max-width: 38rem;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  margin-top: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border: 1px solid var(--client-border-quiet);
  border-radius: var(--client-control-radius, 10px);
  background: var(--client-panel-soft);
  color: var(--client-text-soft);
}

body.review-page.portal-page .review-replacement-notice > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.review-page.portal-page .review-replacement-notice > div {
  display: grid;
  gap: 2px;
}

body.review-page.portal-page .review-replacement-notice strong,
body.review-page.portal-page .review-replacement-notice span {
  display: block;
}

body.review-page.portal-page .review-replacement-notice strong {
  color: var(--client-text);
  font-size: 0.8rem;
  font-weight: 750;
  line-height: var(--rf-type-leading-1-35, 1.35);
}

body.review-page.portal-page .review-replacement-notice span {
  color: var(--client-text-soft);
  font-size: 0.75rem;
  line-height: var(--rf-type-leading-1-45, 1.45);
}

body.review-page.portal-page .review-replacement-notice #review-replacement-reload {
  width: fit-content;
  margin-top: var(--space-2, 8px);
}

body.review-page.portal-page .review-replacement-notice #review-replacement-reload[hidden] {
  display: none;
}

body.review-page.portal-page #review-filters[hidden] {
  display: none;
}

body.watch-page.portal-page .watch-screening-actions {
  align-self: end;
  gap: var(--space-2, 8px);
}

body.watch-page.portal-page #review-btn-primary[hidden] {
  display: none;
}

body.watch-page.portal-page .watch-screening-facts,
body.review-page.portal-page .review-context {
  gap: 0 var(--space-6, 24px);
  margin-top: var(--space-4, 16px);
}

body.watch-page.portal-page .watch-screening-facts div,
body.review-page.portal-page .review-context div {
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--client-border-quiet);
}

body.watch-page.portal-page .watch-screening-facts dt,
body.review-page.portal-page .review-context dt {
  margin-bottom: var(--space-2, 8px);
  color: var(--client-text-dim);
  font-family: var(--client-type-technical, var(--font-mono));
  font-size: var(--rf-type-size-0-65rem, 0.65rem);
  font-weight: 700;
  text-transform: uppercase;
}

body.watch-page.portal-page .watch-screening-facts dd,
body.review-page.portal-page .review-context dd {
  color: var(--client-text-soft);
  font-family: var(--client-type-body, var(--font-body));
  font-size: 0.85rem;
  font-weight: 700;
  line-height: var(--rf-type-leading-1-35, 1.35);
}

body.review-page.portal-page .review-room {
  gap: var(--client-group-gap);
}

body.review-page.portal-page .review-bar {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-8, 32px);
}

body.review-page.portal-page .review-bar-left {
  gap: var(--space-2, 8px);
}

body.review-page.portal-page .review-screening-label {
  margin-top: var(--space-4, 16px);
}

body.review-page.portal-page .review-context {
  max-width: 34rem;
}

body.review-page.portal-page .review-prior-versions {
  width: fit-content;
  max-width: 26rem;
  color: var(--client-text-soft);
  font-size: 0.78rem;
}

body.review-page.portal-page .review-prior-versions > summary {
  width: fit-content;
  padding-block: var(--space-1, 4px);
  cursor: pointer;
}

body.review-page.portal-page .review-prior-version-list {
  display: grid;
  gap: var(--space-1, 4px);
  min-width: 12rem;
  margin-top: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  border: 1px solid var(--client-border);
  border-radius: var(--client-control-radius);
  background: color-mix(in srgb, var(--black) 36%, transparent);
}

body.review-page.portal-page .review-prior-version {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  min-height: 2.25rem;
  padding-inline: var(--space-2, 8px);
  border: 0;
  border-radius: calc(var(--client-control-radius) * 0.7);
  background: transparent;
  color: var(--client-text);
  cursor: pointer;
  text-align: left;
}

body.review-page.portal-page .review-prior-version:hover,
body.review-page.portal-page .review-prior-version:focus-visible {
  background: rgba(var(--cream-rgb), 0.07);
}

body.review-page.portal-page .review-prior-version:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}

body.review-page.portal-page .review-prior-version small {
  color: var(--client-text-dim);
}

body.review-page.portal-page .review-bar-right {
  align-items: flex-end;
  gap: var(--space-2, 8px);
}

body.review-page.portal-page .review-version-control {
  display: grid;
  flex: 1 1 20rem;
  gap: var(--space-2, 8px);
  min-width: 20rem;
}

body.review-page.portal-page .review-version-control-label {
  color: var(--client-text-soft);
  font-family: var(--client-type-body, var(--font-body));
  font-size: 0.75rem;
  font-weight: 700;
  line-height: var(--rf-type-leading-1, 1);
}

body.review-page.portal-page .review-version-control .review-version-dropdown {
  width: 100%;
  min-height: 2.75rem;
  padding-inline: var(--space-3, 12px) 2.5rem;
  color: var(--client-text);
  font-family: var(--client-type-body, var(--font-body));
  font-size: 0.82rem;
  font-weight: 700;
  line-height: var(--rf-type-leading-1-2, 1.2);
}

body.review-page.portal-page .review-version-control .review-version-dropdown:hover {
  border-color: rgba(var(--cream-rgb), 0.28);
  background-color: rgba(var(--cream-rgb), 0.085);
}

body.review-page.portal-page .review-split {
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 23rem);
  gap: var(--client-group-gap);
  align-items: start;
  min-height: 0;
}

body.review-page.portal-page .review-video-area {
  align-self: start;
}

body.review-page.portal-page .review-video-area .video-container.player-wrap {
  height: auto;
  aspect-ratio: 16 / 9;
}

body.review-page.portal-page .review-video-area .video-container.player-wrap.player-aspect-1-1 {
  aspect-ratio: 1 / 1;
}

body.review-page.portal-page .review-video-area .video-container.player-wrap.player-aspect-9-16 {
  aspect-ratio: 9 / 16;
}

body.review-page.portal-page .review-video-area .video-container.player-wrap.player-aspect-4-5 {
  aspect-ratio: 4 / 5;
}

body.review-page.portal-page .review-video-area::before {
  display: none;
}

body.review-page.portal-page .feedback-sidebar {
  height: clamp(34rem, calc(100vh - var(--client-page-top) - var(--space-8, 32px)), 42rem);
  background: var(--client-panel);
}

:where(body.portal-page, body.portal-page.project-landing-page, body.portal-page.watch-page, body.portal-page.review-page) :is(a, button, .btn):focus-visible:not(.rf-action):not(.portal-action):not(.btn) {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: var(--client-control-radius);
  box-shadow: 0 0 0 2px rgba(var(--orange-rgb), 0.14);
}

@media (max-width: 720px) {
  body.portal-dashboard-page.portal-page .film-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.portal-dashboard-page.portal-page .film-card {
    max-width: none;
  }
}

@media (max-width: 980px) {
  body.watch-page.portal-page .view-meta,
  body.review-page.portal-page .review-bar,
  body.review-page.portal-page .review-split {
    grid-template-columns: 1fr;
  }

  body.watch-page.portal-page .watch-screening-actions,
  body.review-page.portal-page .review-bar-right {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  :where(body.portal-page.portal-dashboard-page, body.portal-page.project-landing-page, body.portal-page.watch-page, body.portal-page.review-page) {
    --client-shell-gutter: var(--space-5, 20px);
    --client-page-top: calc(var(--space-10, 40px) * 2);
  }

  body.portal-dashboard-page.portal-page .portal-dashboard,
  body.portal-page.project-landing-page .page,
  body.watch-page.portal-page .watch-content,
  body.watch-page.portal-page .watch-content-spaced,
  body.review-page.portal-page .review-room {
    padding: var(--client-page-top) var(--client-shell-gutter) var(--space-10, 40px);
  }

  body.portal-dashboard-page.portal-page .client-masthead {
    padding-top: var(--space-4, 16px);
    padding-bottom: var(--space-8, 32px);
  }

  body.portal-page.project-landing-page .project-landing-title,
  body.watch-page.portal-page .view-title,
  body.review-page.portal-page .review-title {
    max-width: 100%;
    --rf-type-heading-size: var(--rf-type-size-2-35rem);
  }

  body.portal-page.project-landing-page .project-review-copy {
    padding: var(--space-5, 20px);
  }

  body.watch-page.portal-page .watch-screening-room,
  body.watch-page.portal-page .watch-screening-copy,
  body.review-page.portal-page .review-room {
    gap: var(--space-6, 24px);
  }

  body.watch-page.portal-page .watch-screening-actions,
  body.review-page.portal-page .review-bar-right {
    align-items: stretch;
  }

  body.watch-page.portal-page .watch-screening-actions > *,
  body.review-page.portal-page .review-bar-right > * {
    flex: 1 1 100%;
  }

  body.review-page.portal-page .review-context,
  body.watch-page.portal-page .watch-screening-facts {
    grid-template-columns: 1fr;
  }
}

body.review-page.portal-page.team-review-mode .portal-back-control {
  display: none;
}

/* Keep team decisions in the first review-room view on shorter desktop screens. */
@media (min-width: 981px) and (max-height: 860px) {
  body.review-page.portal-page[class~="team-review-mode"] .composer {
    order: 1;
  }

  body.review-page.portal-page[class~="team-review-mode"] .review-locked-message {
    order: 2;
  }

  body.review-page.portal-page[class~="team-review-mode"] .approval-section {
    order: 3;
    margin-top: 0;
  }

  body.review-page.portal-page[class~="team-review-mode"] .filter-tabs {
    order: 4;
  }

  body.review-page.portal-page[class~="team-review-mode"] .comments-area,
  body.review-page.portal-page[class~="team-review-mode"] .comment-empty {
    order: 5;
  }
}

@media (min-width: 981px) and (max-height: 780px) {
  body.review-page.portal-page[class~="team-review-mode"] .review-room {
    gap: var(--space-3, 12px);
    padding-top: calc(var(--client-page-top) - var(--space-2, 8px));
  }

  body.review-page.portal-page[class~="team-review-mode"] .review-screening-label {
    margin-top: 0;
  }

  body.review-page.portal-page[class~="team-review-mode"] .review-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    --rf-type-heading-size: var(--rf-type-size-2-5rem);
  }

  body.review-page.portal-page[class~="team-review-mode"] .review-context {
    margin-top: var(--space-1, 4px);
  }

  body.review-page.portal-page[class~="team-review-mode"] .review-context div {
    padding-top: var(--space-2, 8px);
  }

  body.review-page.portal-page[class~="team-review-mode"] .review-context dd {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

:where(body.portal-page, body.portal-page.project-landing-page, body.portal-page.watch-page, body.portal-page.review-page) .portal-shell-error,
:where(body.portal-page, body.portal-page.project-landing-page, body.portal-page.watch-page, body.portal-page.review-page) .comment-empty,
:where(body.portal-page, body.portal-page.project-landing-page, body.portal-page.watch-page, body.portal-page.review-page) .project-review-empty,
:where(body.portal-page, body.portal-page.project-landing-page, body.portal-page.watch-page, body.portal-page.review-page) .review-no-versions {
  border-color: rgba(var(--rf-tone-neutral-rgb), 0.14);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 24%, transparent);
}

:where(body.portal-page, body.portal-page.project-landing-page, body.portal-page.watch-page, body.portal-page.review-page) .portal-toast-error,
:where(body.portal-page, body.portal-page.project-landing-page, body.portal-page.watch-page, body.portal-page.review-page) .review-load-error {
  background: var(--rf-tone-neutral-fill);
  border: 1px solid rgba(var(--rf-tone-neutral-rgb), 0.22);
  color: var(--client-text, rgba(var(--rf-tone-neutral-rgb), 0.86));
  background-image: linear-gradient(120deg, rgba(var(--orange-rgb),0.18), transparent);
}

body.review-page.portal-page .review-share-actions .portal-action[hidden] {
  display: none;
}

body.review-page.portal-page .review-share-dialog {
  width: min(calc(100vw - 2.5rem), 32rem);
  max-width: 32rem;
  padding: 0;
  border: 1px solid var(--client-border);
  border-top-color: rgba(var(--rf-tone-neutral-rgb), 0.16);
  border-radius: var(--client-panel-radius);
  background: var(--client-panel);
  color: var(--client-text);
  box-shadow: var(--client-shadow);
  backdrop-filter: blur(28px) brightness(1.06) saturate(1.34);
  -webkit-backdrop-filter: blur(28px) brightness(1.06) saturate(1.34);
}

body.review-page.portal-page .review-share-dialog::backdrop {
  background: color-mix(in srgb, var(--black) 72%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.review-page.portal-page .review-share-card {
  padding: var(--space-6, 24px);
  font-family: var(--client-type-body, var(--font-body));
}

body.review-page.portal-page .review-share-heading h2 {
  font-family: var(--rf-type-heading-family);
  font-weight: var(--rf-type-heading-weight);
  line-height: var(--rf-type-leading-1-25);
  letter-spacing: var(--rf-type-heading-tracking);
  --rf-type-heading-size: var(--rf-type-size-1-35rem);
}

body.review-page.portal-page .review-share-heading p,
body.review-page.portal-page .review-share-label,
body.review-page.portal-page .review-share-status {
  font-family: var(--client-type-body, var(--font-body));
}

body.review-page.portal-page .review-share-heading p {
  color: var(--client-text-soft);
  font-size: var(--rf-type-size-0-825rem, 0.825rem);
  line-height: 1.5;
  --rf-type-heading-size: var(--rf-type-size-0-825rem);
}

body.review-page.portal-page .review-share-url {
  min-height: var(--client-control-height);
  padding: 0 var(--space-3, 12px);
  border: 1px solid var(--client-border);
  border-radius: var(--client-control-radius);
  background: var(--client-panel-soft);
  color: var(--client-text-soft);
}