@layer surfaces {
  .notice-region {
    --notice-document-separation-shadow:
      0 22px 54px rgb(20 20 18 / 0.14),
      0 7px 18px rgb(20 20 18 / 0.08),
      0 1px 0 rgb(255 255 255 / 0.42) inset;
    --notice-mobile-edge-gap: clamp(18px, 5vw, 24px);
    --notice-inline-size: min(420px, calc(100vw - 32px));
    display: grid;
    gap: var(--space-cluster);
    inline-size: var(--notice-inline-size);
    inset-block-start: calc(var(--app-safe-top) + var(--topbar-h) + var(--space-cluster));
    inset-inline: auto auto;
    justify-items: stretch;
    left: calc(50% + var(--sidebar-available-center-offset, 0px));
    pointer-events: none;
    position: fixed;
    transform: translateX(-50%);
    z-index: var(--z-toast);
  }

  .toast-region {
    --toast-inverse-surface: color-mix(in srgb, var(--surface-card) 8%, var(--text) 92%);
    --toast-inverse-text: var(--surface-card);
    --toast-inverse-border: color-mix(in srgb, var(--surface-card) 20%, transparent);
    --toast-inverse-shadow:
      0 18px 40px rgb(20 20 18 / 0.24),
      0 6px 16px rgb(20 20 18 / 0.16),
      0 1px 0 color-mix(in srgb, var(--surface-card) 16%, transparent) inset;
    --toast-state-mark: color-mix(in srgb, var(--surface-card) 72%, var(--accent-ink) 28%);
    display: grid;
    gap: var(--space-related);
    pointer-events: none;
  }
  .toast-region:empty { display: none; }

  .notice,
  .notice-surface,
  .toast,
  .update-notice {
    color: var(--text);
    display: grid;
    gap: var(--space-cluster);
    max-inline-size: var(--notice-inline-size, min(420px, calc(100vw - 32px)));
  }

  .notice,
  .toast,
  .update-notice {
    overflow: hidden;
    padding: 0;
  }

  .notice,
  .toast,
  .update-notice { pointer-events: auto; }

  .notice { order: 10; }
  .update-notice { order: 20; }
  .toast-region { order: 30; }

  :where(.notice, .toast, .update-notice) {
    box-shadow: var(--notice-document-separation-shadow);
  }

  .notice-surface {
    display: grid;
    gap: var(--space-cluster);
    min-inline-size: 0;
    padding: var(--space-cluster);
  }

  .notice-language-surface {
    gap: 0;
    overflow: hidden;
    padding: 0;
  }

  .notice-language-media {
    aspect-ratio: 16 / 9;
    inline-size: 100%;
    margin: 0;
    min-inline-size: 0;
    overflow: hidden;
  }

  .notice-language-media[hidden] { display: none; }

  .notice-language-image {
    block-size: 100%;
    display: block;
    inline-size: 100%;
    object-fit: cover;
    object-position: center 54%;
  }

  .notice-language-body {
    display: grid;
    gap: var(--space-cluster);
    min-inline-size: 0;
    padding: var(--space-cluster);
  }

  .update-notice {
    gap: var(--space-cluster);
    padding: var(--space-cluster);
  }

  .notice-copy,
  .update-notice-copy {
    display: grid;
    gap: var(--space-tight);
    min-inline-size: 0;
  }

  .notice-title,
  .update-notice-title {
    color: var(--text);
    font-size: var(--ui-font-size);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
  }

  .notice-message,
  .update-notice-message {
    color: var(--text-muted);
    font-size: var(--ui-font-size);
    line-height: 1.4;
    margin: 0;
  }

  .notice-actions,
  .update-notice-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-related);
    justify-content: flex-end;
  }

  .notice-primary-button,
  .notice-secondary-button,
  .notice-dismiss-button,
  .update-notice-primary-button,
  .update-notice-dismiss-button {
    padding-inline: var(--space-cluster);
  }

  .notice-primary-button,
  .update-notice-primary-button {
    background: var(--control-surface-active);
    font-weight: 650;
  }

  .notice-dismiss-button,
  .update-notice-dismiss-button {
    color: var(--text-sec);
    inline-size: auto;
    min-inline-size: var(--control-block-size);
  }

  .toast {
    align-items: center;
    background: var(--toast-inverse-surface);
    border-color: var(--toast-inverse-border);
    box-shadow: var(--toast-inverse-shadow);
    color: var(--toast-inverse-text);
    column-gap: var(--space-related);
    font-weight: var(--ui-font-weight-strong);
    grid-template-columns: auto minmax(0, 1fr);
    line-height: var(--type-line-control);
    padding: var(--space-cluster) var(--space-section);
  }

  .toast::before {
    block-size: 6px;
    background: var(--toast-state-mark);
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--toast-state-mark) 18%, transparent);
    content: '';
    inline-size: 6px;
  }

  .toast-info,
  .toast-success { --toast-state-mark: color-mix(in srgb, var(--surface-card) 68%, var(--accent-ink) 32%); }

  .toast-warning { --toast-state-mark: color-mix(in srgb, var(--surface-card) 56%, #B56E22 44%); }

  .toast-error { --toast-state-mark: color-mix(in srgb, var(--surface-card) 50%, #963F4C 50%); }


  .compose-account-flow-dialog {
    --account-flow-inline-size: min(620px, calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 32px));
    --account-flow-viewport-gap: var(--space-section);
    background: transparent;
    border: 0;
    color: var(--text);
    inline-size: var(--account-flow-inline-size);
    inset-block-start: calc(var(--app-safe-top) + var(--topbar-h) + var(--account-flow-viewport-gap));
    left: calc(50% + var(--sidebar-available-center-offset, 0px));
    margin: 0;
    max-block-size: calc(var(--app-viewport-block) - var(--app-safe-top) - var(--app-safe-bottom) - var(--topbar-h) - var(--toolbar-h) - (2 * var(--account-flow-viewport-gap)));
    max-inline-size: var(--account-flow-inline-size);
    overflow: visible;
    padding: 0;
    pointer-events: auto;
    position: fixed;
    transform: translateX(-50%);
    z-index: calc(var(--z-toast) + 1);
  }

  .compose-account-flow-dialog::backdrop { background: transparent; }

  .compose-checkout-dialog {
    -webkit-backdrop-filter: blur(24px) saturate(1.08);
    backdrop-filter: blur(24px) saturate(1.08);
    background: rgb(254 253 251 / 0.97);
    background: color-mix(in srgb, var(--surface-card) 97%, transparent);
    border: 1px solid color-mix(in srgb, var(--surface-border) 82%, var(--surface-card) 18%);
    box-shadow: var(--notice-document-separation-shadow);
    color: var(--text);
    display: grid;
    gap: var(--space-related);
    inline-size: 100%;
    max-block-size: inherit;
    overflow: hidden;
    overscroll-behavior: contain;
    padding: var(--space-cluster);
  }

  .compose-account-dialog { grid-template-rows: auto auto minmax(0, auto); }

  .compose-account-title,
  .compose-checkout-copy,
  .compose-checkout-error,
  .compose-checkout-seat-preview { margin: 0; }

  .compose-account-title { letter-spacing: -0.012em; }
  .compose-checkout-copy,
  .compose-checkout-seat-preview { color: var(--text-sec); }
  .compose-checkout-form,
  .compose-checkout-field { display: grid; gap: var(--space-tight); }
  .compose-checkout-form { gap: var(--space-related); }
  .compose-checkout-field { color: var(--text); font-size: var(--ui-font-size); font-weight: 520; }
  .compose-checkout-field input {
    background: rgb(254 253 251 / 0.92);
    background: color-mix(in srgb, var(--surface-card) 92%, transparent);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--ui-field-font-size);
    font-weight: var(--ui-field-font-weight);
    line-height: var(--ui-field-line-height);
    padding-block: var(--space-related);
  }
  .compose-checkout-seat-field { align-items: end; grid-template-columns: minmax(0, 1fr) auto; }
  .compose-checkout-seat-field > span { grid-column: 1 / -1; }
  .compose-checkout-seat-controls { display: flex; gap: var(--space-tight); }
  .compose-checkout-seat-controls button { min-inline-size: var(--control-block-size); }
  .compose-checkout-seat-preview { background: var(--surface-card); border: 1px solid var(--surface-border); border-radius: var(--shape-control); font-size: var(--ui-font-size); line-height: 1.3; padding: var(--space-related); }
  .compose-checkout-error { color: var(--danger); }
  .compose-checkout-actions { border-block-start: 1px solid var(--border); padding-block-start: var(--space-related); }
  .compose-account-dialog[data-account-flow="teams-checkout"] .compose-checkout-form {
    align-items: end;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .compose-account-dialog[data-account-flow="teams-checkout"] .compose-checkout-seat-preview,
  .compose-account-dialog[data-account-flow="teams-checkout"] .compose-checkout-error,
  .compose-account-dialog[data-account-flow="teams-checkout"] .compose-checkout-actions {
    grid-column: 1 / -1;
  }
  .compose-account-primary-button,
  .compose-account-secondary-button { min-inline-size: max-content; }

  @media (max-width: 520px) {
    .compose-account-dialog[data-account-flow="teams-checkout"] .compose-checkout-form { grid-template-columns: minmax(0, 1fr); }
    .compose-checkout-seat-field { grid-template-columns: minmax(0, 1fr) auto; }
  }

  @media (max-height: 520px) and (orientation: landscape) {
    .compose-account-flow-dialog { --account-flow-viewport-gap: var(--space-related); }
    .compose-checkout-dialog { padding: var(--space-related); }
    .compose-checkout-copy { display: none; }
  }

  @media (forced-colors: active) {
    .toast {
      background: Canvas;
      border-color: CanvasText;
      box-shadow: none;
      color: CanvasText;
    }

    .toast::before {
      background: CanvasText;
      box-shadow: none;
    }
  }

  @media (max-width: 640px) {
    .notice-region {
      gap: var(--space-related);
      inline-size: auto;
      inset-block: auto;
      inset-inline: auto auto;
      top: auto;
      right: calc(var(--app-safe-right) + var(--notice-mobile-edge-gap));
      bottom: calc(var(--app-safe-bottom) + var(--toolbar-h) + var(--notice-mobile-edge-gap));
      left: calc(var(--app-safe-left) + var(--notice-mobile-edge-gap));
      transform: none;
    }

    .notice,
    .notice-surface,
    .toast,
    .update-notice { max-inline-size: none; }

    .notice-surface,
    .update-notice { padding: var(--space-cluster); }

    .notice-language-body {
      gap: var(--space-related);
      padding: calc(var(--space-related) + 2px) var(--space-cluster) var(--space-cluster);
    }

    .notice-copy,
    .update-notice-copy { gap: calc(var(--space-tight) / 2); }

    .notice-actions,
    .update-notice-actions { gap: calc(var(--space-related) - 2px); }

    .compose-account-flow-dialog {
      --account-flow-inline-size: auto;
      bottom: calc(var(--app-safe-bottom) + var(--toolbar-h) + var(--notice-mobile-edge-gap));
      inline-size: auto;
      inset-block-start: auto;
      left: calc(var(--app-safe-left) + var(--notice-mobile-edge-gap));
      max-block-size: calc(var(--app-viewport-block) - var(--app-safe-top) - var(--app-safe-bottom) - var(--topbar-h) - var(--toolbar-h) - (2 * var(--notice-mobile-edge-gap)));
      max-inline-size: none;
      right: calc(var(--app-safe-right) + var(--notice-mobile-edge-gap));
      transform: none;
    }

    .compose-checkout-dialog { padding: var(--space-cluster); }
  }

  @media (max-height: 560px) and (orientation: landscape) {
    .notice-region {
      --notice-inline-size: min(560px, calc(100vw - (2 * var(--notice-mobile-edge-gap))));
      gap: var(--space-tight);
      inset-block-start: calc(var(--app-safe-top) + var(--topbar-h) + var(--space-related));
    }

    .notice,
    .notice-surface,
    .toast,
    .update-notice { max-inline-size: var(--notice-inline-size); }

    .notice-surface,
    .update-notice { padding: var(--space-related); }

    .notice-language-surface {
      align-items: start;
      grid-template-columns: minmax(180px, 40%) minmax(0, 1fr);
      padding: 0;
    }

    .notice-language-media {
      align-self: stretch;
      aspect-ratio: 16 / 9;
    }

    .notice-language-body {
      gap: var(--space-related);
      padding: var(--space-related);
    }

    .notice-copy,
    .update-notice-copy { gap: 2px; }

    .notice-title,
    .notice-message,
    .update-notice-title,
    .update-notice-message { line-height: 1.2; }

    .notice-actions,
    .update-notice-actions {
      gap: var(--space-tight);
      justify-content: flex-start;
    }

    .notice-primary-button,
    .notice-secondary-button,
    .notice-dismiss-button,
    .update-notice-primary-button,
    .update-notice-dismiss-button { padding-inline: var(--space-related); }

    .compose-account-flow-dialog {
      --account-flow-inline-size: auto;
      bottom: calc(var(--app-safe-bottom) + var(--toolbar-h) + var(--notice-mobile-edge-gap));
      inline-size: auto;
      inset-block-start: auto;
      left: calc(var(--app-safe-left) + var(--notice-mobile-edge-gap));
      max-block-size: calc(var(--app-viewport-block) - var(--app-safe-top) - var(--app-safe-bottom) - var(--topbar-h) - var(--toolbar-h) - (2 * var(--notice-mobile-edge-gap)));
      max-inline-size: none;
      right: calc(var(--app-safe-right) + var(--notice-mobile-edge-gap));
      transform: none;
    }

    .compose-checkout-dialog { padding: var(--space-cluster); }

  }

  @media (max-height: 430px) and (orientation: landscape) {
    .notice-region { --notice-inline-size: min(520px, calc(100vw - (2 * var(--notice-mobile-edge-gap)))); }

    .notice-language .notice-message { display: none; }

    .notice-language-body { gap: var(--space-tight); }
  }
}

@layer components {
  .notice:not([hidden]),
  .toast,
  .update-notice:not([hidden]),
  .compose-account-flow-dialog[open] {
    animation: compose-surface-reveal var(--motion-duration-surface) var(--motion-ease-out) both;
    transform-origin: top center;
  }

  @media (prefers-reduced-motion: reduce) {
    .notice:not([hidden]),
    .toast,
    .update-notice:not([hidden]),
    .compose-account-flow-dialog[open] { animation-duration: var(--motion-duration-reduced); }
  }
}

@layer overrides {
  /* Compact sidebars are bottom sheets. Notices should not sit above the sheet
     and steal touch scroll from the active panel. They stay in the app stack,
     but the sheet owns interaction until it closes. */
  :root[data-sidebar-open="true"][data-sidebar-mode="compact"] .notice-region,
  :root[data-sidebar-open="true"][data-sidebar-mode="compact"] .toast-region {
    z-index: calc(var(--z-sidebar) - 1);
  }
}