@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html {
    block-size: 100%;
    inline-size: 100%;
    min-block-size: 100%;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior: none;
  }

  body {
    block-size: 100%;
    inline-size: 100%;
    min-block-size: 0;
    background: var(--bg-app);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--ui-font-size);
    font-weight: var(--ui-font-weight);
    line-height: var(--ui-line-height);
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  button,
  input,
  textarea,
  select { font: inherit; }

  button {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    gap: .35em;
    justify-content: center;
    line-height: 1.2;
    min-block-size: var(--control-height);
    min-inline-size: var(--control-height);
    padding-block: 0;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }

  button:disabled,
  button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .55;
  }

  button:not(:disabled):not([aria-disabled="true"]):active {
    background: var(--fill-active);
  }

  button > svg {
    flex: 0 0 auto;
    pointer-events: none;
  }

  input,
  textarea,
  select {
    background: transparent;
    border: 0;
    color: inherit;
  }

  a { color: inherit; text-decoration: none; }
  img, svg { display: block; max-inline-size: 100%; }
  [hidden] { display: none !important; }

  :focus { outline: none; }
  :focus-visible {
    border-radius: var(--focus-ring-radius);
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  ::selection {
    background: rgba(var(--accent-rgb), .22);
    color: var(--text);
  }

  ::-webkit-scrollbar { inline-size: 6px; block-size: 6px; }
  ::-webkit-scrollbar-track { background: var(--scrollbar-track); }
  ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--shape-panel); }
  * { scrollbar-color: var(--scrollbar-thumb) transparent; scrollbar-width: thin; }
}

@layer environment {
  * { -webkit-tap-highlight-color: transparent; }

  #topbar,
  #toolbar-row,
  #sidebar,
  .modal,
  .popover,
  .menu-popover,
  .notice,
  .notice-surface,
  .toast,
  .update-notice,
  .sidebar-panel-header,
  .toolbar-button,
  .topbar-icon-button,
  .topbar-document-chip,
  .notice-primary-button,
  .notice-secondary-button,
  .notice-dismiss-button,
  .update-notice-primary-button,
  .update-notice-dismiss-button,
  .popover-primary-button,
  .popover-secondary-button,
  .popover-ghost-button,
  .popover-danger-button,
  .popover-icon-button,
  .modal-secondary-button,
  .modal-danger-button,
  .modal-close-button {
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
  }

  button,
  [role="button"],
  [role="menuitem"],
  [role="option"],
  a,
  label {
    touch-action: manipulation;
  }


  .sr-only {
    block-size: 1px !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    inline-size: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
  }

  @media (hover: none) {
    ::-webkit-scrollbar { display: none; }
    * { scrollbar-width: none; }
  }

  @media (pointer: coarse) {
    button,
    [role="button"],
    [role="menuitem"],
    [role="option"] {
      min-block-size: var(--accessibility-hit-target-min);
      min-inline-size: var(--accessibility-hit-target-min);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: var(--motion-duration-reduced) !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: var(--motion-duration-reduced) !important;
    }
  }
}

@layer layout {}


@layer overrides {
  @media (pointer: coarse) {
    :where(button, [role="button"], [role="menuitem"], [role="option"]) {
      min-block-size: var(--accessibility-hit-target-min);
      min-inline-size: var(--accessibility-hit-target-min);
    }

    :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
      min-block-size: var(--touch-target);
    }

    :where(label, .sidebar-checkbox-row) {
      min-block-size: var(--touch-target);
    }
  }

  :where(button, [role="button"], [role="menuitem"], [role="option"]).is-pressing,
  :where(button, [role="button"], [role="menuitem"], [role="option"]):not(:disabled):not([aria-disabled="true"]):active {
    background: var(--fill-active);
  }

  :where(button, [role="button"], [role="menuitem"], [role="option"])[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .55;
  }

  @media (forced-colors: active) {
    :root {
      --focus-ring-color: CanvasText;
      --focus-ring-shadow: 0 0 0 2px Canvas;
      --surface-border: CanvasText;
      --surface-border-strong: CanvasText;
      --control-border: ButtonText;
      --control-border-hover: Highlight;
      --control-border-active: Highlight;
      --accent-ink: CanvasText;
      --accent: CanvasText;
      --accent-soft: Canvas;
      --accent-surface: Highlight;
      --accent-surface-hover: Highlight;
      --accent-surface-active: Highlight;
      --accent-border: Highlight;
      --accent-border-strong: Highlight;
      --accent-focus: CanvasText;
      --control-surface: ButtonFace;
      --control-surface-hover: ButtonFace;
      --control-surface-active: Highlight;
      --text: CanvasText;
      --text-sec: CanvasText;
      --text-muted: GrayText;
      --text-disabled: GrayText;
      --danger: CanvasText;
      --scrollbar-thumb: CanvasText;
    }

    :focus-visible {
      outline: 2px solid CanvasText;
      outline-offset: 2px;
    }

    :where(button, [role="button"], [role="menuitem"], [role="option"], input, select, textarea) {
      forced-color-adjust: auto;
    }

    :where(button, [role="button"], [role="menuitem"], [role="option"]):disabled,
    :where(button, [role="button"], [role="menuitem"], [role="option"])[aria-disabled="true"] {
      color: GrayText;
    }
  }
}


@layer overrides {
  /* Current typography update: one readable UI type size. Document/editor typography remains governed by document settings. */
  :where(
    #topbar,
    #toolbar-row,
    #sidebar,
    .modal,
    .popover,
    .menu-popover,
    .selection-inspector,
    .notice,
    .notice-surface,
    .toast,
    .update-notice
  ) {
    font-size: var(--ui-font-size);
    line-height: var(--ui-line-height);
  }

  :where(
    #topbar,
    #toolbar-row,
    #sidebar,
    .modal,
    .popover,
    .menu-popover,
    .selection-inspector,
    .notice,
    .notice-surface,
    .toast,
    .update-notice
  ) :where(button, input, select, textarea, label, output, p, span, li, dt, dd, kbd, code, small, h1, h2, h3, h4, h5, h6) {
    font-size: var(--ui-font-size);
    line-height: var(--ui-line-height);
  }

  :where(
    #topbar,
    #toolbar-row,
    #sidebar,
    .modal,
    .popover,
    .menu-popover,
    .selection-inspector,
    .notice,
    .notice-surface,
    .toast,
    .update-notice
  ) :where(.sidebar-badge, .selection-inspector-section-title, .command-palette-group-title, .command-palette-shortcut, .command-palette-meta) {
    letter-spacing: normal;
    text-transform: none;
  }

  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    textarea,
    select
  ) {
    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);
    letter-spacing: 0;
  }

  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    textarea
  )::placeholder {
    color: var(--text-disabled);
    font: inherit;
    opacity: 1;
  }
}

@layer overrides {
  /* Native internal scrolling contract.
     The canonical registry lives in js/core/scroll-surfaces.js. Runtime markup
     opts into this CSS contract with data-scroll-axis="y" or data-scroll-axis="x".

     This contract intentionally lives in the final overrides layer. Scroll
     ownership is an element-level capability, so later component chrome such as
     .topbar-group { overflow: hidden } or mobile sidebar sheet rules must not
     accidentally remove native scrolling from a registered surface. */
  [data-scroll-axis="y"] {
    min-block-size: 0;
    scroll-padding-block: var(--surface-focus-scroll-padding);
    scroll-padding-inline: var(--surface-focus-scroll-padding-inline);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
    touch-action: pan-y pinch-zoom;
    scrollbar-gutter: stable;
  }

  [data-scroll-axis="x"] {
    min-inline-size: 0;
    scroll-padding-block: var(--surface-focus-scroll-padding);
    scroll-padding-inline: var(--surface-focus-scroll-padding-inline);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pinch-zoom;
  }

  /* Viewport frame contract for scrollable overlays. The scroll axis is still
     owned by data-scroll-axis; this frame attribute only centralizes sizing so
     popovers, notices, dialog bodies, and filled panes do not each invent their
     own viewport math. */
  [data-scroll-frame="overlay"] {
    box-sizing: border-box;
    max-block-size: var(--surface-overlay-max-block);
    max-block-size: min(var(--surface-overlay-max-block), var(--app-keyboard-safe-block));
    min-block-size: 0;
  }

  [data-scroll-frame="notice"] {
    box-sizing: border-box;
    max-block-size: var(--surface-notice-max-block);
    max-block-size: min(var(--surface-notice-max-block), var(--app-keyboard-safe-block));
    min-block-size: 0;
  }

  [data-scroll-frame="fill"] {
    box-sizing: border-box;
    min-block-size: 0;
  }
}