@layer surfaces {
  :root {
    --floating-chrome-plate-bg: var(--surface-floating-chrome);
    --floating-chrome-plate-border: var(--surface-border);
    --floating-chrome-plate-padding: var(--space-tight);
    --floating-chrome-plate-block-size: calc(var(--floating-chrome-control-size) + (2 * var(--floating-chrome-plate-padding)));
    --floating-chrome-plate-radius: var(--shape-control);
    --floating-chrome-control-gap: calc(var(--space-tight) / 2);
    --floating-chrome-control-size: 36px;
    --floating-chrome-control-bg: transparent;
    --floating-chrome-control-bg-hover: var(--control-surface-hover);
    --floating-chrome-control-bg-active: var(--control-surface-active);
    --floating-chrome-control-color: var(--text-sec);
    --floating-chrome-control-color-active: var(--text);
    --floating-chrome-control-border: transparent;
    --floating-chrome-control-border-hover: var(--control-border-hover);
    --floating-chrome-control-border-active: var(--control-border-active);
  }

  /* Shared surface and control primitives. These selectors deliberately use
     :where() so product surfaces keep layout and variant authority without
     specificity fights. */
  :where(
    .ui-surface-floating,
    .ui-surface-panel,
    .ui-surface-sheet,
    .popover,
    .menu-popover,
    .document-info-popover,
    .tooltip,
    .selection-inspector,
    .modal-surface,
    .compose-checkout-dialog,
    .notice,
    .toast,
    .update-notice
  ) {
    -webkit-backdrop-filter: var(--surface-filter-floating);
    backdrop-filter: var(--surface-filter-floating);
    background: var(--surface-panel);
    background: var(--surface-floating);
    border: 1px solid var(--surface-border);
    border-radius: var(--shape-panel);
    box-shadow: var(--elevation-panel);
  }



  .ui-surface-card {
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--shape-card);
    box-shadow: var(--elevation-soft);
  }

  .ui-motion-reveal,
  .ui-motion-dismiss,
  .ui-motion-state-change {
    transition:
      opacity var(--motion-duration-surface) var(--motion-ease-out),
      transform var(--motion-duration-surface) var(--motion-ease-out),
      filter var(--motion-duration-surface) var(--motion-ease-out);
  }

  .ui-motion-reveal { animation: compose-surface-reveal var(--motion-duration-surface) var(--motion-ease-out) both; }
  .ui-motion-dismiss { animation: compose-surface-dismiss var(--motion-duration-exit) var(--motion-ease-in) both; }
  .ui-motion-state-change { animation: compose-state-settle var(--motion-duration-state) var(--motion-ease-out) both; }

  @keyframes compose-surface-reveal {
    from { opacity: 0; filter: blur(2px); transform: var(--motion-transform-base, translateX(0)) translateY(var(--motion-distance-surface)) scale(var(--motion-scale-reveal)); }
    to { opacity: 1; filter: blur(0); transform: var(--motion-transform-base, translateX(0)) translateY(0) scale(1); }
  }

  @keyframes compose-surface-dismiss {
    from { opacity: 1; filter: blur(0); transform: var(--motion-transform-base, translateX(0)) translateY(0) scale(1); }
    to { opacity: 0; filter: blur(1px); transform: var(--motion-transform-base, translateX(0)) translateY(var(--motion-distance-reveal)) scale(var(--motion-scale-reveal)); }
  }

  @keyframes compose-sheet-reveal {
    from { opacity: 0; filter: blur(2px); transform: var(--motion-transform-base, translateX(0)) translateY(var(--motion-distance-sheet)) scale(var(--motion-scale-reveal)); }
    to { opacity: 1; filter: blur(0); transform: var(--motion-transform-base, translateX(0)) translateY(0) scale(1); }
  }

  @keyframes compose-state-settle {
    from { opacity: .62; transform: var(--motion-transform-base, translateX(0)) translateY(var(--motion-distance-reveal)); }
    to { opacity: 1; transform: var(--motion-transform-base, translateX(0)) translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-motion-reveal,
    .ui-motion-dismiss,
    .ui-motion-state-change {
      animation-duration: var(--motion-duration-reduced);
      transition-duration: var(--motion-duration-reduced);
      transform: none;
    }
  }

  :where(
    .ui-notice,
    .notice,
    .toast,
    .update-notice
  ) {
    box-shadow: var(--elevation-soft);
  }

  :where(
    .ui-control,
    .popover-primary-button,
    .popover-secondary-button,
    .popover-ghost-button,
    .popover-danger-button,
    .popover-icon-button,
    .selection-inspector-action,
    .selection-inspector-form-button,
    .notice-primary-button,
    .notice-secondary-button,
    .notice-dismiss-button,
    .update-notice-primary-button,
    .update-notice-dismiss-button,
    .modal-close-button,
    .modal-secondary-button,
    .modal-primary-button,
    .modal-danger-button,
    .compose-checkout-seat-controls button
  ) {
    align-items: center;
    background: var(--control-surface);
    border: 1px solid var(--control-border);
    border-radius: var(--shape-control);
    box-shadow: var(--elevation-control);
    color: var(--text);
    display: inline-flex;
    font: inherit;
    gap: var(--space-related);
    justify-content: center;
    line-height: 1.2;
    min-block-size: var(--control-block-size);
    min-inline-size: var(--control-block-size);
    padding-inline: var(--space-related);
    text-align: center;
    transition:
      background-color var(--motion-duration-micro) var(--motion-ease-standard),
      border-color var(--motion-duration-micro) var(--motion-ease-standard),
      color var(--motion-duration-micro) var(--motion-ease-standard),
      box-shadow var(--motion-duration-micro) var(--motion-ease-standard),
      transform var(--motion-duration-micro) var(--motion-ease-out);
  }

  :where(
    .ui-control,
    .popover-primary-button,
    .popover-secondary-button,
    .popover-ghost-button,
    .popover-danger-button,
    .popover-icon-button,
    .selection-inspector-action,
    .selection-inspector-form-button,
    .notice-primary-button,
    .notice-secondary-button,
    .notice-dismiss-button,
    .update-notice-primary-button,
    .update-notice-dismiss-button,
    .modal-close-button,
    .modal-secondary-button,
    .modal-primary-button,
    .modal-danger-button,
    .compose-checkout-seat-controls button
  ):where(:hover, :focus-visible) {
    background: var(--control-surface-hover);
    border-color: var(--control-border-hover);
  }

  :where(
    .ui-control,
    .popover-primary-button,
    .popover-secondary-button,
    .popover-ghost-button,
    .popover-danger-button,
    .popover-icon-button,
    .selection-inspector-action,
    .selection-inspector-form-button,
    .notice-primary-button,
    .notice-secondary-button,
    .notice-dismiss-button,
    .update-notice-primary-button,
    .update-notice-dismiss-button,
    .modal-close-button,
    .modal-secondary-button,
    .modal-primary-button,
    .modal-danger-button,
    .compose-checkout-seat-controls button
  ):where(:active) {
    transform: scale(.985);
  }

  :where(
    .ui-control,
    .popover-primary-button,
    .popover-secondary-button,
    .popover-ghost-button,
    .popover-danger-button,
    .popover-icon-button,
    .selection-inspector-action,
    .selection-inspector-form-button,
    .notice-primary-button,
    .notice-secondary-button,
    .notice-dismiss-button,
    .update-notice-primary-button,
    .update-notice-dismiss-button,
    .modal-close-button,
    .modal-secondary-button,
    .modal-primary-button,
    .modal-danger-button,
    .compose-checkout-seat-controls button
  ):where(:focus-visible) {
    outline: 0;
    box-shadow: var(--focus-ring-shadow), var(--elevation-control);
  }

  :where(.ui-control-primary) {
    background: var(--accent-surface);
    border-color: var(--accent-border-strong);
    color: var(--text);
    font-weight: var(--ui-font-weight-strong);
  }

  :where(.ui-control-primary):where(:hover, :focus-visible) {
    background: var(--accent-surface-hover);
    border-color: var(--accent-border-strong);
  }

  :where(.ui-control-active, .ui-control[aria-pressed="true"]) {
    background: var(--control-surface-active);
    border-color: var(--control-border-active);
    color: var(--text);
    font-weight: var(--ui-font-weight-strong);
  }

  :where(.ui-control-danger) {
    color: var(--danger);
  }

  :where(
    .ui-field,
    .command-palette-input,
    .popover-input,
    .selection-inspector-input,
    .modal-text-input,
    .modal-textarea,
    .modal-select,
    .compose-checkout-field input
  ) {
    background: color-mix(in srgb, var(--bg-card) 66%, transparent);
    border: 1px solid var(--control-border);
    border-radius: var(--shape-control);
    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);
    min-block-size: var(--control-block-size);
    padding-inline: var(--space-cluster);
  }

  :where(
    .ui-field,
    .command-palette-input,
    .popover-input,
    .selection-inspector-input,
    .modal-text-input,
    .modal-textarea,
    .modal-select,
    .compose-checkout-field input
  ):where(:focus-visible) {
    background: color-mix(in srgb, var(--bg-card) 90%, transparent);
    border-color: var(--control-border-hover);
    outline: 0;
    box-shadow: var(--focus-ring-shadow), var(--elevation-control);
  }

  @media (pointer: coarse) {
    :where(
      .ui-control,
      .popover-primary-button,
      .popover-secondary-button,
      .popover-ghost-button,
      .popover-danger-button,
      .popover-icon-button,
      .selection-inspector-action,
      .selection-inspector-form-button,
      .notice-primary-button,
      .notice-secondary-button,
      .notice-dismiss-button,
      .update-notice-primary-button,
      .update-notice-dismiss-button,
      .modal-close-button,
      .modal-secondary-button,
      .modal-primary-button,
      .modal-danger-button,
      .compose-checkout-seat-controls button,
      .ui-field,
      .command-palette-input,
      .popover-input,
        .selection-inspector-input,
      .modal-text-input,
      .modal-textarea,
      .modal-select,
      .compose-checkout-field input
    ) {
      min-block-size: var(--control-touch-target);
      min-inline-size: var(--control-touch-target);
    }
  }


  :where(.topbar-sidebar-group, .topbar-document-chip, #toolbar-row, .toolbar) {
    -webkit-backdrop-filter: var(--surface-filter-floating);
    backdrop-filter: var(--surface-filter-floating);
    background: var(--surface-floating);
    border-color: var(--surface-border);
    border-radius: var(--floating-chrome-plate-radius);
    box-shadow: var(--elevation-floating);
  }


  .topbar-sidebar-group {
    border-color: var(--floating-chrome-plate-border);
  }

  :where(.topbar-sidebar-group, .toolbar-inner) {
    gap: var(--floating-chrome-control-gap);
  }

  :where(.topbar-sidebar-group, #toolbar-row, .toolbar) {
    padding: var(--floating-chrome-plate-padding);
  }

  :where(.toolbar-select) {
    background: var(--control-surface);
    border: 1px solid var(--control-border);
    border-radius: var(--shape-control);
    color: var(--text-sec);
    min-block-size: var(--control-block-size);
    padding-inline: var(--space-related);
    transition:
      background-color var(--motion-duration-micro) var(--motion-ease-standard),
      border-color var(--motion-duration-micro) var(--motion-ease-standard),
      box-shadow var(--motion-duration-micro) var(--motion-ease-standard),
      color var(--motion-duration-micro) var(--motion-ease-standard),
      transform var(--motion-duration-micro) var(--motion-ease-out);
  }

  :where(.toolbar-select:focus-visible) {
    outline: 0;
    box-shadow: var(--focus-ring-shadow), var(--elevation-control);
  }

  :where(.topbar-icon-button, .toolbar-button) {
    align-items: center;
    background: var(--floating-chrome-control-bg);
    border: 1px solid var(--floating-chrome-control-border);
    border-radius: var(--shape-control);
    color: var(--floating-chrome-control-color);
    display: inline-flex;
    flex: 0 0 var(--floating-chrome-control-size);
    block-size: var(--floating-chrome-control-size);
    inline-size: var(--floating-chrome-control-size);
    justify-content: center;
    min-block-size: var(--floating-chrome-control-size);
    padding: 0;
    transition:
      background-color var(--motion-duration-micro) var(--motion-ease-standard),
      border-color var(--motion-duration-micro) var(--motion-ease-standard),
      box-shadow var(--motion-duration-micro) var(--motion-ease-standard),
      color var(--motion-duration-micro) var(--motion-ease-standard),
      transform var(--motion-duration-micro) var(--motion-ease-out);
  }

  .topbar-icon-button { --floating-chrome-control-size: var(--topbar-action-target); }
  .toolbar-button { --floating-chrome-control-size: var(--toolbar-action-target); }

  :where(.topbar-icon-button:hover, .topbar-icon-button:focus-visible, .topbar-icon-button[aria-expanded="true"], .toolbar-button:hover, .toolbar-button:focus-visible, .toolbar-button[aria-pressed="true"], .toolbar-button.is-active) {
    background: var(--floating-chrome-control-bg-hover);
    border-color: var(--floating-chrome-control-border-hover);
    color: var(--floating-chrome-control-color-active);
  }

  :where(.topbar-icon-button[aria-expanded="true"], .toolbar-button[aria-pressed="true"], .toolbar-button.is-active) {
    background: var(--floating-chrome-control-bg-active);
    border-color: var(--floating-chrome-control-border-active);
    box-shadow: var(--elevation-control);
  }

  :where(.topbar-icon-button:focus-visible, .toolbar-button:focus-visible) {
    outline: 0;
    box-shadow: var(--focus-ring-shadow), var(--elevation-control);
  }

  :where(.topbar-icon-button:active, .toolbar-button:active) {
    transform: translateY(1px) scale(var(--motion-scale-press));
  }


  @keyframes floating-chrome-control-activate {
    0% { transform: translateY(0) scale(1); }
    36% { transform: translateY(1px) scale(var(--motion-scale-press)); }
    72% { transform: translateY(-1px) scale(1.018); }
    100% { transform: translateY(0) scale(1); }
  }

  :where(.topbar-icon-button, .toolbar-button, .topbar-document-chip).is-chrome-pressing {
    transform: translateY(1px) scale(var(--motion-scale-press));
  }

  :where(.topbar-icon-button, .toolbar-button, .topbar-document-chip).is-chrome-activating {
    animation: floating-chrome-control-activate 190ms var(--motion-ease-emphasized) both;
  }


  @media (prefers-reduced-motion: reduce) {
    :where(.topbar-icon-button, .toolbar-button, .topbar-document-chip).is-chrome-pressing {
      transform: none;
    }

    :where(.topbar-icon-button, .toolbar-button, .topbar-document-chip).is-chrome-activating {
      animation: none;
    }
  }

  :where(.topbar-document-chip) {
    background: transparent;
    color: var(--text-sec);
    font-size: var(--ui-font-size);
  }

  :where(.topbar-button-icon, .toolbar-button-icon) {
    block-size: 16px;
    inline-size: 16px;
  }

  @media (forced-colors: active) {
    :where(
      .ui-surface-floating,
      .ui-surface-panel,
      .ui-surface-sheet,
      .popover,
      .menu-popover,
      .document-info-popover,
      .tooltip,
      .selection-inspector,
      .modal-surface,
      .compose-checkout-dialog,
      .notice,
      .toast,
      .update-notice
    ) {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: Canvas;
      border-color: CanvasText;
      box-shadow: none;
      color: CanvasText;
    }

    :where(
      .ui-control,
      .popover-primary-button,
      .popover-secondary-button,
      .popover-ghost-button,
      .popover-danger-button,
      .popover-icon-button,
      .selection-inspector-action,
      .selection-inspector-form-button,
      .notice-primary-button,
      .notice-secondary-button,
      .notice-dismiss-button,
      .update-notice-primary-button,
      .update-notice-dismiss-button,
      .modal-close-button,
      .modal-secondary-button,
      .modal-primary-button,
      .modal-danger-button,
      .compose-checkout-seat-controls button
    ) {
      background: ButtonFace;
      border-color: ButtonText;
      box-shadow: none;
      color: ButtonText;
    }

    :where(
      .ui-field,
      .command-palette-input,
      .popover-input,
        .selection-inspector-input,
      .modal-text-input,
      .modal-textarea,
      .modal-select,
      .compose-checkout-field input
    ) {
      background: Field;
      border-color: FieldText;
      color: FieldText;
    }

    :where(
      .ui-control,
      .popover-primary-button,
      .popover-secondary-button,
      .popover-ghost-button,
      .popover-danger-button,
      .popover-icon-button,
      .selection-inspector-action,
      .selection-inspector-form-button,
      .notice-primary-button,
      .notice-secondary-button,
      .notice-dismiss-button,
      .update-notice-primary-button,
      .update-notice-dismiss-button,
      .modal-close-button,
      .modal-secondary-button,
      .modal-primary-button,
      .modal-danger-button,
      .compose-checkout-seat-controls button,
      .ui-field,
      .command-palette-input,
      .popover-input,
        .selection-inspector-input,
      .modal-text-input,
      .modal-textarea,
      .modal-select,
      .compose-checkout-field input
    ):where(:focus-visible) {
      box-shadow: none;
      outline: 2px solid Highlight;
      outline-offset: 2px;
    }
  }

}