@brightspot/ui 3.0.1-cms-ui-migration.4 → 3.0.1

package/src/legacy/tool-ui/src/Page.css

@@ -1,884 +0,0 @@
-: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 block 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:block 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]:block @[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:left-[36%] 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] after:[transform:translate(50%,50%)] @[80px]:after:static @[80px]:after:size-7 @[80px]:after:transform-none @[80px]:after:border-0 @[80px]:after:bg-transparent @[80px]:after:shadow-none;
-
-    /* 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 block [--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-r 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 block;
-    }
-  }
-
-  .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 block;
-  }
-}
-
-.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:block;
-  }
-
-  .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-r 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:block 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:block 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 block bg-white md:[--Page-loginWidth:320px];
-
-  .Page-background {
-    @apply absolute bottom-0 left-0 right-[--Page-loginWidth] top-0 block overflow-clip rounded-r-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 block 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 block 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;
-}