:root {
  --page-broadcast-h: 0px;
  --page-broadcastAlert-h: 0px;
  --page-env-h: 22px;
  --page-header-h: 68px;
  --page-title-h: 0px;
  --pageNav-expanded-OFF: initial;
  --pageNav-expanded-ON: 240px;
  --pageNav-expanded: var(--pageNav-expanded-OFF);
  --pageNav-item-icon-size: 20px;
}

.Page {
  /* A toggle property to show/hide the right-rail. initial state is the second param. */
  --has-right-rail: var(--toggles-right-rail, 0px);
  --right-rail-w: 360px;
  /* the collapsed width. on mobile it has no width, on larger screens it becomes a narrow strip. */
  --pageNav-w-sm: 0px;
  --pageNav-w: var(--pageNav-expanded, var(--pageNav-w-sm));
  --page-title-h: 68px;

  @apply fixed grid w-full overflow-hidden bg-gray-200 text-gray-600 transition-all duration-250 ease-linear [column-gap:1px] [grid-template:'broadcast'_minmax(0,_auto)_'stack'_1fr] max-md:h-full md:h-dvh md:min-h-dvh md:w-[100vw] md:[--pageNav-w-sm:68px];

  .Page-askAiLink {
    @apply hidden;
  }

  &:where(.is-guideOpen) {
    /* This turns ON the toggle */
    --toggles-right-rail: var(--has-right-rail);
    .Page-guide {
      @apply blokk max-md:visible max-md:z-[12];
    }
  }

  &:where(.is-askAiOpen) {
    /* This turns ON the toggle */
    --toggles-right-rail: var(--has-right-rail);

    .Page-askAiLink {
      @apply btu-button-pressed;
    }
  }

  &.is-broadcasting {
    --page-broadcast-h: 52px;
  }

  &.is-alertBroadcasting {
    --page-broadcastAlert-h: 52px;
  }
}

.Page.has-navrail-expanded {
  @apply max-md:overflow-hidden;
}

.Page.has-navrail-expanded .Page-main > btu-nav-rail {
  @apply visible max-md:[transform:translate(0)];
}

/* Only animate the rail when the user explicitly toggles it — not on viewport resize. */
.Page.is-nav-animating .Page-main > btu-nav-rail {
  @apply max-md:transition-[transform,visibility] max-md:duration-500 max-md:ease-linear max-md:will-change-transform;
}

.Page-broadcastAlert {
  @apply flex max-h-[--page-broadcastAlert-h] border-b border-b-error-200 bg-error-25 p-4 text-sm leading-4 text-error-600 before:btu-icon before:btu-icon-triangle-alert before:me-4 before:text-[--link-color] more-contrast:text-error-700 more-contrast:[--link-color:theme(colors.error.800)] md:col-span-full;
}

.Page-broadcastAlert a {
  @apply text-error-700;
}

.Page-broadcastAlert-messages {
  @apply me-auto overflow-y-hidden overflow-x-scroll;
}

.Page-broadcastAlert .pagination {
  @apply ms-4 shrink-0 items-center border-0 bg-inherit;

  .previous,
  .pagination-count,
  .next {
    @apply border-0;
  }

  .previous {
    @apply ms-auto;
  }

  .pagination-count {
    @apply !px-2;
  }

  .next a {
    @apply !pr-0;
  }
}

.Page-broadcast {
  @apply max-h-[--page-broadcast-h] overflow-y-hidden overflow-x-scroll border-b border-b-warning-200 bg-warning-25 p-4 text-sm leading-4 text-warning-700 [--link-color:theme(colors.warning.800)] before:btu-icon before:btu-icon-triangle-alert before:me-4 before:text-[--link-color] more-contrast:text-warning-800 md:col-span-full;

  /*
    Submitting a form inside a broadcast (Ex: Stop scheduling)
    The loader should replace the banner alert icon
  */
  &:has(form.is-submitting button.is-clicked) {
    @apply before:btu-loader before:inline-block before:size-5;

    form.is-submitting button.is-clicked {
      @apply before:hidden;
    }
  }
}

.Container-broadcast {
  @apply flex flex-col overflow-hidden text-nowrap [grid-area:broadcast] md:col-span-full;
}

.Alert-badge {
  @apply btu-badge-warning btu-badge-sm me-2;
}

.Page-navToggle {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray order-first inline-block min-w-[--button-size-sm] before:btu-icon before:btu-icon-panel-left-open rtl:before:btu-icon-panel-right-open;

  &[aria-expanded='true'] {
    @apply before:btu-icon-panel-left-close rtl:before:btu-icon-panel-right-close;
  }
}

.Page-env {
  @apply me-auto hidden min-w-full bg-gray-100 text-xs font-medium md:btu-badge-gray md:btu-badge-sm max-md:-mx-2 max-md:h-[--page-env-h] max-md:px-2 max-md:py-[2px] max-md:text-center max-md:[flex:1_0_100%] md:order-2 md:blokk md:min-w-max;
}

.Page-guideLink {
  a {
    @apply relative flex h-full items-center overflow-hidden whitespace-nowrap font-semibold;
  }
}

.Page.has-navrail-expanded .Page-guideLink {
  a {
    @apply text-sm no-underline;
  }
}

.Page-search {
  @apply relative order-3 flex md:w-full md:justify-end md:@container/page-search;
  .SearchInput {
    @apply md:w-[clamp(10rem,64cqi,41.5rem)];
  }
}

.Page-title {
  --logo-size: 36px;
  @apply flex items-center text-sm font-semibold max-md:pe-4 md:grid md:max-w-60 md:shrink-0 [&_a]:font-semibold [&_a]:text-inherit [&_a]:no-underline [&_a]:hover:text-inherit [&_a]:focus:text-inherit;

  > a {
    @apply grid auto-cols-[0px] grid-flow-col grid-cols-[max-content] items-center justify-center rounded-lg text-[0] @[80px]:grid-cols-[max-content_minmax(0,1fr)_max-content] max-md:grow;

    /* Displays site name if site switcher is missing (e.g. user has access to only 1 site) */
    .Page-siteName {
      @apply hidden @[80px]:col-[2/3] @[80px]:line-clamp-1 @[80px]:blokk @[80px]:truncate @[80px]:px-2 @[80px]:text-sm;
    }
  }

  > a:hover a[target='siteSwitch'] {
    @apply after:bg-gray-100;
  }

  a[target='siteSwitch'] {
    @apply absolute inset-0 size-full focus:ring-offset-0 focus:border-transparent focus:ring-0 @[80px]:static @[80px]:inset-[unset] @[80px]:col-[2/3] @[80px]:grid @[80px]:grid-cols-[minmax(0,1fr)_auto] @[80px]:items-center @[80px]:gap-2 @[80px]:px-2 @[80px]:text-sm max-md:px-4;

    /* Chevron after the site name */
    @apply after:btu-icon after:btu-icon-chevron-down after:absolute after:top-[31%] after:flex after:size-5 after:items-center after:justify-center after:rounded-lg after:border after:border-gray-200 after:bg-white after:shadow-lg after:[--icon-size:1.1rem] @[80px]:after:static @[80px]:after:size-7 @[80px]:after:transform-none @[80px]:after:border-0 @[80px]:after:bg-transparent @[80px]:after:shadow-none;

    /* Decorative chevron centering offset (collapsed <80px state). rtl:ignore —
       postcss-rtlcss would flip left and negate the translateX, and the flipped
       translate would resurrect over the @[80px] transform-none reset, shifting
       the chevron in RTL. The badge sits in the same spot in both directions.
       The @[80px] transform reset is re-asserted here, after the offset, so it
       still wins at >=80px — without it the extracted offset's translateY drops
       the inline chevron ~14px too low (in both directions). */
    /*rtl:begin:ignore*/
    &::after {
      left: 36%;
      transform: translate(50%, 50%);
    }
    @container (min-width: 80px) {
      &::after {
        transform: none;
      }
    }
    /*rtl:end:ignore*/

    /* Site switcher's focus state is ring around chevron icon */
    @apply focus-visible:after:ring-primary-100 focus-visible:after:border focus-visible:after:border-primary-600 focus-visible:after:ring-4 more-contrast:focus-visible:after:border-primary-400 more-contrast:focus-visible:after:ring-primary-400;

    > span {
      @apply hidden @[80px]:line-clamp-1 @[80px]:truncate;
    }
  }

  /* When the site switcher is visible style its trigger element to indicate that. */
  a[target='siteSwitch'].is-active {
    @apply after:btu-icon-chevron-up after:bg-primary-50 after:text-primary-800;
  }

  /* Homepage link button */
  a[target='_blank'] {
    @apply btu-button btu-button-text-hidden btu-button-gray btu-button-xs pointer-events-auto col-[3/4] hidden shrink-0 bg-white before:btu-icon before:btu-icon-link-2 touch-device:btu-button-sm hover:bg-gray-100 @[80px]:inline-flex;
  }

  .toolUserSite,
  .Page-site {
    @apply contents;
  }

  img {
    @apply col-[1/2] size-[var(--logo-size)] rounded-lg bg-white object-contain p-1 shadow-sm;
  }

  /* Display a default Brightspot logo when a site logo isn't present */
  &:not(:has(img)) > a {
    @apply before:col-[1/2] before:size-[var(--logo-size)] before:rounded-lg before:bg-white before:bg-center before:bg-no-repeat before:p-4 before:shadow-sm;
    @apply before:bg-site-logo-default;
  }
}

.Page-header {
  @apply flex w-full items-center justify-end overflow-hidden border-b bg-white p-4 text-gray-700 max-md:gap-4 md:h-[var(--page-header-h)] md:flex-nowrap md:@container/page-header;
  grid-area: header;
}

.Page-header > * {
  @apply md:!me-4;
}

.Page-header.mobile:has(.Page-search[aria-expanded='true'])
  > *:not(.Page-navToggle):not(.Page-search):not(.Page-env) {
  @apply hidden;
}

@scope (.Page-header.mobile) {
  & .Page-search {
    @apply z-10 max-w-full flex-row-reverse;
  }
}

.Page-header.mobile .SearchInput {
  @apply min-w-max;
}

/*
  Captures the state when Page-header is:
  not mobile and in either Content Edit mode or LiveBlog mode eg:(.Page-content > .Grid)
*/
.Page-header:not(.mobile):has(
    + .Page-content > .content-edit,
    + .Page-content > .Grid
  ) {
  .Page-search {
    @apply w-0 max-w-0 flex-grow-0;
  }
  .Page-search .SearchInput {
    @apply opacity-0;
  }
  .Page-search[aria-expanded='true'] {
    @apply w-full max-w-[unset] justify-center @container;
  }
}

/*
  Page-header should scroll out of view when the content edit form is scrolled down.
  Mobile-only style.
*/
.Page-header.mobile {
  @apply transition-[transform,_opacity] duration-300 ease-spring-stiff;

  ~ .Page-container {
    .ContentEdit-overlay,
    .ContentEdit-title--v5 > .ContentEdit-status--v5,
    .ContentEdit-title--v5 > .ContentEdit-contentType--v5 {
      @apply transition-[transform,_display] duration-300 ease-spring-stiff [transition-behavior:allow-discrete];
    }
  }

  &.is-scrolled {
    @apply -translate-y-full opacity-0;

    /* Hide the content type, status badge, and overlay selector on scroll */
    ~ .Page-container {
      .ContentEdit-overlay,
      .ContentEdit-title--v5 > .ContentEdit-status--v5,
      .ContentEdit-title--v5 > .ContentEdit-contentType--v5 {
        @apply hidden -translate-y-[200%];
      }
    }
  }
}

.Page-main:has(> .Page-header.mobile) {
  @apply transition-[grid-template-rows] duration-300 ease-spring-stiff;

  &:has(> .Page-header.mobile.is-scrolled) {
    @apply grid-rows-[0px_1fr];
  }
}

/*
  Captures the state when Page-header is:
  mobile or in Content Edit mode or LiveBlog mode eg:(.Page-content > .Grid)
*/
.Page-header.mobile,
.Page-header:has(+ .Page-content > .content-edit, + .Page-content > .Grid) {
  .SearchInput {
    @apply pointer-events-none blokk [--tw-scale-x:0] [--tw-translate-x:0] [opacity:0] [transform-origin:right] [transform:translate(var(--tw-translate-x),var(--tw-translate-y))_scaleX(var(--tw-scale-x))_scaleY(var(--tw-scale-y))] [transition:opacity_0.15s_ease-out,_transform_0.3s_cubic-bezier(0.4,0,0.2,1)];
  }

  .Page-search {
    @apply flex-grow items-center justify-end gap-2 @container-normal;
  }

  .Page-search > button {
    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray ms-auto inline-block min-w-[--button-size-sm] opacity-100 [transition:display_.2s_allow-discrete_.3s,_opacity_.2s_.3s] before:btu-icon before:btu-icon-search;

    @starting-style {
      & {
        @apply opacity-0;
      }
    }
  }

  .Page-search[aria-expanded='true'] {
    @apply overflow-visible;

    & > button {
      @apply hidden opacity-0 transition-none;
    }

    .SearchInput {
      @apply pointer-events-auto z-10 inline-block [--tw-scale-x:1] [opacity:1] [transition:opacity_0.2s_cubic-bezier(0.4,0,0.2,1),_transform_0.3s_cubic-bezier(0.4,0,0.2,1)];
    }
  }
}

/* Prioritizes showing the content title|type|status and tucks away the search input */

.SearchInput label {
  @apply before:text-gray-700;
}

.Page-main {
  @apply grid w-full overflow-hidden @container/main [grid-area:stack] [grid-template-areas:"header"_"stack"] max-md:h-full max-md:[grid-template-rows:68px_1fr] md:[grid-template-areas:'header_header_header_header'_'nav_guidePanel_aiPanel_content'] md:[grid-template-columns:var(--pageNav-w)_minmax(0,auto)_minmax(0,auto)_1fr] md:[grid-template-rows:var(--page-header-h)_1fr];
}

.Page-main > btu-nav-rail {
  @apply [grid-area:stack] max-md:invisible max-md:z-[21] max-md:h-full max-md:[grid-area:stack] max-md:[transform:translate(-100vw,0)] md:border-e md:[grid-area:nav];

  > ul > li > ul > li,
  > ul > li:not(:has(ul)) :where(a, button) {
    @apply size-[36px] justify-center gap-0 @[80px]:h-auto @[80px]:min-h-[--item-h] @[80px]:w-full @[80px]:justify-normal @[80px]:gap-2;
  }

  #toolUserAvatarProfile-link {
    /* Avatar opts out of the items-start + pt/pb rule so the 32px tile stays centered. */
    @apply size-[32px] p-0 @[80px]:w-full @[80px]:items-center @[80px]:py-0;
  }

  .Avatar {
    @apply grid size-[32px] rounded-md;
  }

  /* Profile avatar image */
  .Avatar > img {
    @apply rounded-md;
  }

  /* Text if the avatar has no image */
  .Avatar > span {
    @apply text-md;
  }

  /* A nested group of items */
  > ul > li > ul > li:has(ul) {
    @apply @[80px]:h-auto;
  }

  /* The parent of a group of expandable items */
  > ul > li > ul > li:has(ul) > a {
    @apply min-h-[--item-h] font-semibold @[80px]:flex;
  }

  /* A nested group of (unexpanded/hidden) items */
  > ul > li > ul > li[aria-expanded='false'] > ul {
    @apply hidden h-0 overflow-hidden;
  }

  /* A nested group of (expanded/visible) items */
  > ul > li > ul > li[aria-expanded='true'] > ul {
    @apply hidden h-auto overflow-visible @[80px]:grid @[80px]:ps-2 @[80px]:[grid-template-columns:24px_1fr];
  }

  /* A selected item */
  li.selected {
    & > a {
      @apply bg-primary-50 text-gray-900 more-contrast:bg-primary-900 more-contrast:text-white;
    }

    btu-icon {
      @apply more-contrast:bg-white more-contrast:bg-none;
    }
  }

  /* An individual child of a group */
  > ul > li > ul > li > ul > li {
    @apply contents @[80px]:before:[background-image:linear-gradient(theme(colors.gray.300),theme(colors.gray.300))] @[80px]:before:[background-position:center] @[80px]:before:[background-repeat:no-repeat] @[80px]:before:[background-size:1px];

    &::before {
      @apply col-[1];
    }

    a {
      @apply col-[2] mt-2 h-min p-2 font-semibold;
    }
  }

  /* Hide the link labels when the navigation is collapsed */
  a > span {
    @apply hidden @[80px]:inline-block;
  }

  .Page-navItemToggle {
    @apply ms-auto hidden transition-all @[80px]:inline-block;
  }

  li[aria-expanded='true'] .Page-navItemToggle {
    @apply rotate-180;
  }

  .Page-avatar {
    a {
      @apply justify-self-center text-[0] @[80px]:pl-[4px] @[80px]:text-sm;
    }

    .ToolUserAvatar-name {
      @apply blokk;
    }
  }

  .Page-guideLink,
  .Page-notifications {
    @apply contents;
  }

  .Page-askAiButton {
    @apply btu-button-primary flex-wrap text-[0] [line-height:0px] @[80px]:indent-[5px] @[80px]:text-sm;
  }

  .Page-askAiLink {
    @apply blokk;
  }
}

.Page-container {
  @apply w-full overflow-hidden bg-white max-md:h-full max-md:max-h-full max-md:[grid-area:stack] md:h-full md:overflow-auto md:[grid-area:content];
}

/* This ensures the non content edit pages that have Page container parent still retain sticky action bars and vertical scrolling */
.Page-content {
  @apply h-full max-md:overflow-hidden max-md:overflow-y-auto md:overflow-auto;
}

/* Prevent Page scrolling while a dashboard widget is maximized */
.Page.has-dashboardWidgetMaximized .Page-content {
  @apply overflow-hidden;
}

.Page-container {
  @apply @container/PageContainer;
}

.Page.is-editing .Page-content,
.Popup-content.is-editing {
  /* if the guide is open, make sure to account for its width. */
  --guide-w: var(--has-right-rail, var(--right-rail-w));
  --toolbar-h-mobile: 52px;
  /*
    motion-reduce: 0.001s instead of 0s so `transitionend` still fires on this
    container. ContentEdit.js listens for it to move focus to the panel close
    button after the grid-template-columns transition completes.
  */
  @apply grid h-full overscroll-none transition-all motion-reduce:!duration-[0.001s] max-md:overflow-hidden max-md:[grid-template:"top"_min-content_"status"_min-content_"content"_1fr_"bottom"_var(--toolbar-h-mobile)/_100vw] md:grid-rows-[auto_1fr] md:overflow-hidden md:[grid-template-areas:'top_top_top_top''left_preview_right_toolbar''left_preview_right_toolbar'];

  .Page-background {
    @apply hidden;
  }

  .ContentEdit-resizeWrapper {
    @apply pointer-events-none;
  }
}

/* Modify grid columns based on state */
.Page.is-editing .Page-content,
.Popup-content.is-editing {
  /* Preview column only */
  &.is-previewing {
    --contentForm-resized-w: unset; /* override user's resized width at this container size */
    @apply md:grid-cols-[var(--contentForm-w)_1fr_0px_var(--right-toolbar-w)];
  }

  /* Neither preview or widget columns are displayed */
  &:not(.is-previewing):not(.has-widget-panel-open) {
    --contentForm-resized-w: unset; /* override user's resized width at this container size */
    @apply md:grid-cols-[var(--contentForm-w)_0px_0px_var(--right-toolbar-w)];
  }

  /* Widget column only */
  &:not(.is-previewing).has-widget-panel-open {
    --contentForm-resized-w: unset; /* override user's resized width at this container size */
    @apply md:grid-cols-[var(--contentForm-w)_0px_1fr_var(--right-toolbar-w)];
  }

  /* Both preview and widget columns */
  &.is-previewing.has-widget-panel-open {
    --contentForm-resized-w: unset; /* override user's resized width at this container size */
    @apply md:grid-cols-[var(--contentForm-w)_1fr_0px_var(--right-toolbar-w)];
  }
}

@container (min-width: 900px) {
  .Page.is-editing .Page-content,
  .Popup-content.is-editing {
    /* Enable resize wrapper by default at this size */
    .ContentEdit-resizeWrapper {
      @apply pointer-events-auto;
    }

    /* Base calculation for content form width */
    --contentForm-w-base: calc(100cqw - var(--right-toolbar-w));

    /* States */
    &:is(.is-previewing, .has-widget-panel-open) {
      --contentForm-w: calc(
        var(--contentForm-w-base) - var(--contentWidget-w-min)
      );
    }

    /* Neither preview nor widget - disable resize and reset form width */
    &:not(.is-previewing):not(.has-widget-panel-open) {
      --contentForm-resized-w: unset;
      .ContentEdit-resizeWrapper {
        @apply pointer-events-none;
      }
    }

    /* Both preview and widget */
    &.is-previewing.has-widget-panel-open {
      --contentForm-w: calc(
        var(--contentForm-w-base) - var(--contentPreview-w-min) -
          var(--contentWidget-w-min)
      );
      /* Safe widths' maximum is the form max, minus the min width of the visible columns (preview & widget) */
      --contentForm-resized-safe-w: clamp(
        var(--contentForm-w-min),
        var(--contentForm-resized-w),
        calc(
          var(--contentForm-w-max) - var(--contentPreview-w-min) -
            var(--contentWidget-w-min)
        )
      );
      @apply md:grid-cols-[var(--contentForm-resized-safe-w,_var(--contentForm-w))_1fr_1fr_var(--right-toolbar-w)];
    }

    /* Preview only */
    &.is-previewing:not(.has-widget-panel-open) {
      /* Safe widths' maximum is the form max, minus the min width of the visible column (preview) */
      --contentForm-resized-safe-w: clamp(
        var(--contentForm-w-min),
        var(--contentForm-resized-w),
        calc(var(--contentForm-w-max) - var(--contentPreview-w-min))
      );
      @apply md:grid-cols-[var(--contentForm-resized-safe-w,_var(--contentForm-w))_1fr_0px_var(--right-toolbar-w)];
    }

    /* Widget only */
    &:not(.is-previewing).has-widget-panel-open {
      /* Safe widths' maximum is the form max, minus the min width of the visible column (widget) */
      --contentForm-resized-safe-w: clamp(
        var(--contentForm-w-min),
        var(--contentForm-resized-w),
        calc(var(--contentForm-w-max) - var(--contentWidget-w-min))
      );
      @apply md:grid-cols-[var(--contentForm-resized-safe-w,_var(--contentForm-w))_0px_1fr_var(--right-toolbar-w)];
    }
  }
}

/*
  Establish a minimum width for the content edit right rail widgets
  so they can overflow when the containing column is too small. */
.ContentEdit-right btu-widget,
.ContentEdit-right-top {
  min-width: var(--contentWidget-w-min);
}

.Page.is-editing .Page-content.has-message {
  @apply md:grid-rows-[auto_var(--edit-banner-h)_1fr] md:[grid-template-areas:'top_top_top_top''banner_banner_banner_banner''left_preview_right_toolbar''left_preview_right_toolbar'];
}

/* Page grid & Page-header style updates for Live Blog Posts */
.Page.is-editing.has-liveBlog-postList .Page-main {
  @apply max-md:[grid-template:"stack"_1fr];

  .Page-header,
  btu-nav-rail,
  .LiveBlogPostList,
  .LiveBlogGrid {
    @apply max-md:hidden;
  }

  .ContentEdit-toolbar li:not(:has(.ContentEdit-previewButtonWrapper)) {
    @apply hidden;
  }

  .LiveBlogPostListNav.is-visible .LiveBlogPostList {
    @apply max-md:blokk;
  }

  .LiveBlogGrid.is-visible {
    @apply max-md:contents;
  }

  .Page-content {
    @apply max-md:[grid-template:"back"_52px_"top"_min-content_"status"_min-content_"content"_1fr_"bottom"_var(--toolbar-h-mobile)/100vw] md:grid-rows-[auto_auto_1fr] md:[grid-template-areas:'back_back_back_back''list_top_top_top''list_left_preview_toolbar'];
  }

  .Page-content:has(.ContentEdit-top + .Message) {
    @apply grid-rows-[auto_auto_var(--edit-banner-h)_1fr] md:[grid-template-areas:'back_back_back_back''list_top_top_top''list_banner_banner_banner''list_left_preview_toolbar'];
  }

  &:has(.LiveBlogPostListNav.is-visible) {
    .Page-content {
      @apply max-md:[grid-template:"back"_52px_"list"_1fr];
    }
  }

  .ContentEdit-contentType--v5 {
    @apply max-md:ms-5;
  }
}

.Page,
.Popup {
  .is-asideHidden .ContentEdit-right.is-visible {
    @apply hidden;
  }
}

.Page-guide {
  @apply hidden h-full overflow-auto border-e border-gray-200 bg-gray-50 max-md:invisible max-md:[grid-area:stack] md:w-[var(--has-right-rail,var(--right-rail-w))] md:[grid-area:guidePanel];

  > .frame {
    @apply h-full overflow-y-hidden;
  }
}

/* AskAI panel with content loaded (active). Different from the container just in the DOM by default. */
.Page-askAi.is-loaded {
  @apply h-full overflow-auto border-gray-200 bg-gray-50 max-md:visible max-md:z-[13] md:w-[var(--has-right-rail,var(--right-rail-w))];

  > .frame {
    @apply h-full overflow-y-hidden;
  }
}

.toolUserSiteControls {
  @apply hidden;
}

@keyframes bell-shake {
  0%,
  100% {
    scale: 0.84333;
    transform: rotate(0deg);
  }
  20%,
  60% {
    transform: rotate(15deg);
  }
  40%,
  80% {
    transform: rotate(-15deg);
  }
}

/* Animate the bell icon when there are new notifications */
.Page-notifications[data-new='true'] btu-icon {
  /* Set the pivot point for rotation */
  @apply [animation:bell-shake_1s_500ms_cubic-bezier(0.45,0.05,0.55,0.95)_2] [transform-origin:top_center];
}

.Page-notifications[data-new='true'] > a {
  @apply relative after:absolute after:left-[19px] after:top-[0px] after:z-[2] after:blokk after:size-[13px] after:rounded-full after:border-[2px] after:border-white after:bg-error-600 after:[scale:1] @[80px]:after:left-[21px];

  &::after {
    @apply [transition:opacity_200ms_2s_cubic-bezier(0.64,0,0.78,0),_scale_350ms_2s_cubic-bezier(0.34,1.56,0.64,1)];
  }

  @starting-style {
    &::after {
      @apply opacity-0 [scale:0];
    }
  }
}

.toolUser,
.toolUserDisplay,
.toolUserSite {
  @apply contents;
}

.toolUserControls,
.toolUserSiteControls,
.Page-user {
  @apply hidden;
}

.Popup[name='siteSwitch'] {
  @apply !left-4;

  /* Hide the site switcher widget title in v5 */
  .Widget .Widget-title {
    @apply hidden;
  }

  .siteSwitch-header {
    --logo-size: 36px;
    @apply grid text-pretty border-b border-b-gray-200 px-4 py-3 [grid-column-gap:0.75rem] [grid-column:fullbleed-start_/_fullbleed-end] [grid-template-columns:var(--logo-size)_auto];

    a {
      @apply text-sm font-normal leading-4 text-gray-500;
    }
  }

  .siteSwitch-name {
    @apply btu-heading-5;
  }

  .siteSwitch-logo {
    @apply [grid-row:1/3];
    /* Display a default Brightspot logo when a site logo isn't present */
    &:not(:has(img)) {
      @apply before:blokk before:size-[var(--logo-size)] before:rounded before:bg-white before:bg-center before:bg-no-repeat before:p-4 before:shadow-sm;
      @apply before:bg-site-logo-default;
    }

    img {
      @apply size-[var(--logo-size)] rounded bg-white object-contain p-1 shadow-sm;
    }
  }
}

.Page.is-unauthenticated {
  @apply blokk bg-white md:[--Page-loginWidth:320px];

  .Page-background {
    @apply absolute bottom-0 left-0 right-[--Page-loginWidth] top-0 blokk overflow-clip rounded-e-2xl [background-position:top] [background-size:cover];
  }

  .Page-header {
    @apply contents;
  }

  .Page-env {
    @apply absolute z-10 max-md:m-0 md:right-5 md:top-5 md:mr-0;
  }

  .Page-title {
    @apply visible absolute bottom-[55dvh] top-auto z-10 order-2 flex w-full transform-none items-center justify-start ps-6 @container-normal md:bottom-[56dvh] md:right-0 md:m-[unset] md:w-[--Page-loginWidth];
  }

  .Page-title img {
    @apply max-w-full rounded-none shadow-none [--logo-size:auto];
  }

  .Page-content {
    @apply absolute inset-0 bg-white;
  }

  .Page-login {
    @apply w-full bg-transparent pt-[45dvh] max-md:inset-0 md:absolute md:bottom-0 md:right-0 md:top-0 md:w-[--Page-loginWidth] md:bg-white md:[grid-auto-rows:min-content];
  }

  .Page-login > h1 {
    @apply hidden;
  }

  .Page-login > :where(.Message, form) {
    @apply grid-rows-[auto] [grid-column:content-start/content-end];
  }

  .Page-login .inputLabel {
    @apply text-sm font-semibold;
  }

  .Page-login input[type] {
    @apply w-full border-transparent bg-gray-100 focus:border-primary-600;
  }

  .Page-login .ActionBar {
    @apply border-none bg-transparent px-0 md:justify-end;
  }

  .Page-login .ActionBar .action-logIn {
    @apply basis-full md:basis-auto;
  }

  button.ShowPassword-toggle {
    @apply absolute right-[1px]; /* account for border-w. */
  }

  /* Hides the vertical border to the left of the input which is standard for CIG rows. */
  .CIG-row::after {
    @apply hidden;
  }

  .Page-login .buttons a {
    @apply pointer-events-auto;
  }
}

.Page-loginDialog .CIG-row:focus-within:after {
  @apply hidden;
}

.Page-loginDialog .Page-login {
  @apply rounded-lg md:min-w-[500px];
}

.Page-loginDialog > dialog .Widget-title {
  @apply mb-3 rounded-t-lg py-4;
}

.Page-loginDialog > dialog .Message.is-error {
  @apply mb-5 rounded-lg border [grid-column:content-start_/_content-end];
}

.Page-loginDialog > dialog .Widget-logo {
  @apply my-3 max-w-[35vw];
}

.Page-loginDialog > dialog .Page-login > form > *:not(.CIG-row) {
  @apply m-0;
}

.Page-loginDialog > dialog .Page-login > form > .ActionBar {
  @apply mt-4 rounded-b-lg;
}

.Page-create {
  @apply order-last !me-0;

  .ComboInput {
    @apply flex-row-reverse gap-0 overflow-visible border-0 p-0;

    .ComboInput-filter {
      @apply invisible blokk w-0 origin-right scale-x-0 transition-transform;
    }

    .ComboInput-label {
      @apply shrink-0 transition;
    }

    &[aria-expanded='true'] {
      @apply !w-[150px] [box-shadow:none];

      .ComboInput-label {
        @apply blokk bg-primary-50 [transform:rotate(-225deg)];
      }

      .ComboInput-filter {
        @apply visible mr-2 w-full scale-x-100 rounded-lg px-4 py-2 ring-4;
      }
    }
  }

  .ComboInput-icon {
    @apply hidden;
  }
}

.Page-create .ComboInput-label {
  --button-border-radius: 50%;
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-plus;
}

.button--aria-skip {
  @apply btu-button btu-button-fill-none btu-button-primary z-[100] m-4 bg-white;
}
