/* layered, so a caller's plain CSS wins without fighting specificity */
  @layer PretComponent {
    /* Each appearance only sets --pretui-btn-surface/-text/-edge (plus
       their -hover twins); the rules below are the only ones that paint.
       One border carries the edge, so fill and edge change together. */
    .pretui-btn[data-scopedcss-0400e5c740-42919f8569] {
      /* hover tints: the tone's lightness pulled toward --foreground, so a
         light tone (warning, a mint primary) still reads on a light card
         and a dark one on a dark card; chroma is restored (the mix took
         30% of it) so the tint keeps the tone's hue instead of graying */
      --pretui-btn-tint: oklch(
        from color-mix(in oklch, var(--pretui-tone) 70%, var(--foreground))
          l calc(c / 0.7) h
      );

      --pretui-btn-surface: initial;
      --pretui-btn-surface-hover: initial;
      --pretui-btn-text: initial;
      --pretui-btn-text-hover: initial;
      --pretui-btn-edge: initial;
      --pretui-btn-edge-hover: initial;
      --pretui-btn-elevation: initial;

      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.48em;
      min-height: var(--pretui-button-h, 2.24em);
      min-width: var(--pretui-button-min-w, 0);
      padding: 0.2em var(--pretui-button-px, 0.96em);
      border: 1px solid var(--pretui-btn-edge, transparent);
      /* a step below the theme's --radius, so a button nests inside a
         card or dialog of that radius */
      border-radius: var(--pretui-button-radius, calc(var(--radius) - 0.125rem));
      background: var(--pretui-btn-surface, transparent);
      color: var(--pretui-btn-text, inherit);
      box-shadow: var(--pretui-btn-elevation, none);
      font-family: inherit;
      font-size: var(--pretui-size-m, var(--text-ui-md, 0.78rem));
      font-weight: 500;
      letter-spacing: var(--track-ui, 0.01em);
      cursor: pointer;
      white-space: nowrap;
      transition:
        background var(--pretui-dur-snap, 180ms)
          var(--pretui-ease-snap, ease),
        border-color var(--pretui-dur-snap, 180ms)
          var(--pretui-ease-snap, ease),
        color var(--pretui-dur-snap, 180ms) var(--pretui-ease-snap, ease),
        transform 80ms ease;
    }
    @media (hover: hover) {
      .pretui-btn[data-scopedcss-0400e5c740-42919f8569]:hover:not(:disabled, [aria-disabled='true']) {
        background: var(
          --pretui-btn-surface-hover,
          var(--pretui-btn-surface, transparent)
        );
        border-color: var(
          --pretui-btn-edge-hover,
          var(--pretui-btn-edge, transparent)
        );
        color: var(
          --pretui-btn-text-hover,
          var(--pretui-btn-text, inherit)
        );
      }
    }
    .pretui-btn[data-scopedcss-0400e5c740-42919f8569]:active:not(:disabled, [aria-disabled='true']) {
      transform: translateY(0.5px);
    }
    .pretui-btn[data-scopedcss-0400e5c740-42919f8569]:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }
    .pretui-btn[data-scopedcss-0400e5c740-42919f8569]:disabled,
    a.pretui-btn[aria-disabled='true'][data-scopedcss-0400e5c740-42919f8569] {
      opacity: 0.45;
      cursor: default;
    }
    a.pretui-btn[data-scopedcss-0400e5c740-42919f8569] {
      text-decoration: none;
    }
    .pretui-btn[data-shape='pill'][data-scopedcss-0400e5c740-42919f8569] {
      border-radius: var(
        --pretui-button-radius,
        var(--boxel-border-radius-pill)
      );
    }
    .pretui-btn[data-shape='square'][data-scopedcss-0400e5c740-42919f8569] {
      border-radius: var(--pretui-button-radius, 0);
    }
    /* size scale — font-size only; internals ride the em */
    .pretui-btn[data-size='xs'][data-scopedcss-0400e5c740-42919f8569] {
      font-size: var(--pretui-size-xs, var(--text-ui-xs, 0.66rem));
      /* keeps the 24px minimum target when the theme's xs step is small */
      min-height: max(var(--pretui-button-h, 2.24em), 1.5rem);
    }
    .pretui-btn[data-size='s'][data-scopedcss-0400e5c740-42919f8569] {
      font-size: var(--pretui-size-s, var(--text-ui-sm, 0.72rem));
    }
    .pretui-btn[data-size='m'][data-scopedcss-0400e5c740-42919f8569] {
      font-size: var(--pretui-size-m, var(--text-ui-md, 0.78rem));
    }
    .pretui-btn[data-size='l'][data-scopedcss-0400e5c740-42919f8569] {
      font-size: var(--pretui-size-l, var(--text-ui-lg, 0.875rem));
    }
    .pretui-btn[data-size='xl'][data-scopedcss-0400e5c740-42919f8569] {
      font-size: var(--pretui-size-xl, var(--text-ui-xl, 1rem));
    }
    /* tone map — each tone only sets custom properties */
    .pretui-btn[data-tone='neutral'][data-scopedcss-0400e5c740-42919f8569] {
      --pretui-tone-ink: var(--foreground);
      --pretui-tone: var(--foreground);
      --pretui-tone-on: var(--background);
      --pretui-btn-hairline: var(--border);
      --pretui-btn-ink: var(--foreground);
      --pretui-btn-ink-quiet: color-mix(
        in oklch,
        var(--muted-foreground) 55%,
        var(--foreground)
      );
      /* the accent fill IS --foreground, so mixing it in changes nothing */
      --pretui-btn-accent-hover: color-mix(
        in oklch,
        var(--pretui-tone-on) 30%,
        var(--pretui-button-bg, var(--pretui-tone))
      );
    }
    .pretui-btn[data-tone='primary'][data-scopedcss-0400e5c740-42919f8569] {
      --pretui-tone-ink: var(--primary-ink);
      --pretui-tone: var(--primary);
      --pretui-tone-on: var(--primary-foreground);
    }
    .pretui-btn[data-tone='info'][data-scopedcss-0400e5c740-42919f8569] {
      --pretui-tone-ink: var(--info-ink);
      --pretui-tone: var(--info);
      --pretui-tone-on: var(--info-foreground);
    }
    .pretui-btn[data-tone='success'][data-scopedcss-0400e5c740-42919f8569] {
      --pretui-tone-ink: var(--success-ink);
      --pretui-tone: var(--success);
      --pretui-tone-on: var(--success-foreground);
    }
    .pretui-btn[data-tone='warning'][data-scopedcss-0400e5c740-42919f8569] {
      --pretui-tone-ink: var(--warning-ink);
      --pretui-tone: var(--warning);
      --pretui-tone-on: var(--warning-foreground);
    }
    .pretui-btn[data-tone='danger'][data-scopedcss-0400e5c740-42919f8569] {
      --pretui-tone-ink: var(--destructive-ink);
      --pretui-tone: var(--destructive);
      --pretui-tone-on: var(--destructive-foreground);
    }
    .pretui-btn[data-tone='attention'][data-scopedcss-0400e5c740-42919f8569] {
      --pretui-tone-ink: var(--attention-ink);
      --pretui-tone: var(--attention);
      --pretui-tone-on: var(--attention-foreground);
    }
    /* appearance recipes — written once, read the tone vars */
    .pretui-btn[data-appearance='accent'][data-scopedcss-0400e5c740-42919f8569] {
      --pretui-btn-surface: var(--pretui-button-bg, var(--pretui-tone));
      /* a shade darker in both schemes; a mix toward --foreground would
         lighten the fill in dark mode instead */
      --pretui-btn-surface-hover: var(
        --pretui-btn-accent-hover,
        oklch(
          from var(--pretui-button-bg, var(--pretui-tone)) calc(l * 0.9) c h
        )
      );
      --pretui-btn-text: var(--pretui-button-fg, var(--pretui-tone-on));
      --pretui-btn-elevation: var(--shadow-2xs);
    }
    .pretui-btn[data-appearance='filled'][data-scopedcss-0400e5c740-42919f8569] {
      --pretui-btn-surface: color-mix(
        in oklch,
        var(--pretui-tone) 15%,
        var(--background)
      );
      --pretui-btn-surface-hover: color-mix(
        in oklch,
        var(--pretui-btn-tint) 22%,
        var(--background)
      );
      --pretui-btn-text: var(
        --pretui-btn-ink,
        color-mix(in oklch, var(--pretui-tone) 45%, var(--foreground))
      );
      --pretui-btn-text-hover: var(
        --pretui-btn-ink,
        color-mix(in oklch, var(--pretui-tone) 35%, var(--foreground))
      );
    }
    .pretui-btn[data-appearance='outlined'][data-scopedcss-0400e5c740-42919f8569] {
      --pretui-btn-surface: var(--pretui-button-secondary-bg, transparent);
      --pretui-btn-edge: var(
        --pretui-btn-hairline,
        color-mix(in oklch, var(--pretui-tone) 45%, var(--border))
      );
      /* hover answers on the edge, not the fill: the hairline pulls
         toward --foreground, so it strengthens in both schemes */
      --pretui-btn-edge-hover: color-mix(
        in oklch,
        var(--foreground) 30%,
        var(--pretui-btn-edge)
      );
      --pretui-btn-text: var(
        --pretui-btn-ink,
        color-mix(in oklch, var(--pretui-tone) 45%, var(--foreground))
      );
      --pretui-btn-text-hover: var(
        --pretui-btn-ink,
        color-mix(in oklch, var(--pretui-tone) 40%, var(--foreground))
      );
    }
    .pretui-btn[data-appearance='filled-outlined'][data-scopedcss-0400e5c740-42919f8569] {
      --pretui-btn-surface: color-mix(
        in oklch,
        var(--pretui-tone) 12%,
        var(--background)
      );
      --pretui-btn-surface-hover: color-mix(
        in oklch,
        var(--pretui-btn-tint) 20%,
        var(--background)
      );
      --pretui-btn-edge: var(
        --pretui-btn-hairline,
        color-mix(in oklch, var(--pretui-tone) 40%, var(--border))
      );
      --pretui-btn-text: var(
        --pretui-btn-ink,
        color-mix(in oklch, var(--pretui-tone) 45%, var(--foreground))
      );
      --pretui-btn-text-hover: var(
        --pretui-btn-ink,
        color-mix(in oklch, var(--pretui-tone) 35%, var(--foreground))
      );
    }
    .pretui-btn[data-appearance='plain'][data-scopedcss-0400e5c740-42919f8569] {
      --pretui-btn-surface-hover: color-mix(
        in oklch,
        var(--pretui-btn-tint) 18%,
        transparent
      );
      --pretui-btn-text: var(
        --pretui-btn-ink-quiet,
        color-mix(in oklch, var(--pretui-tone) 40%, var(--foreground))
      );
      --pretui-btn-text-hover: var(
        --pretui-btn-ink,
        color-mix(in oklch, var(--pretui-tone) 30%, var(--foreground))
      );
    }
    /* a standalone text action: the tone's ink, no fill or edge, flush
       with surrounding text (inline padding 0) but still a full-height
       target; the underline marks hover and keyboard focus */
    .pretui-btn[data-appearance='link'][data-scopedcss-0400e5c740-42919f8569] {
      --pretui-btn-text: var(--pretui-button-fg, var(--pretui-tone-ink));
      padding-inline: 0;
      text-underline-offset: 0.2em;
    }
    .pretui-btn[data-appearance='link'][data-scopedcss-0400e5c740-42919f8569]:focus-visible {
      text-decoration-line: underline;
    }
    @media (hover: hover) {
      .pretui-btn[data-appearance='link'][data-scopedcss-0400e5c740-42919f8569]:hover:not(
          :disabled,
          [aria-disabled='true']
        ) {
        text-decoration-line: underline;
      }
    }
    .pretui-btn[data-state='busy'][data-scopedcss-0400e5c740-42919f8569] {
      cursor: progress;
    }
    /* Busy: the label keeps its box (and its place in the accessible
       name) and the busy layer sits on top of it, so the width never
       changes. fitBusyContent picks what the layer shows. */
    .pretui-btn[data-state='busy'] .pretui-btn-label[data-scopedcss-0400e5c740-42919f8569] {
      opacity: 0;
    }
    .pretui-btn-busy[data-scopedcss-0400e5c740-42919f8569] {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 0.48em;
      pointer-events: none;
    }
    .pretui-btn[data-state='busy'] .pretui-btn-busy[data-scopedcss-0400e5c740-42919f8569] {
      display: flex;
    }
    /* room for the spinner beside the label: both in the row */
    .pretui-btn[data-busy-layout='inline'] .pretui-btn-busy[data-scopedcss-0400e5c740-42919f8569] {
      position: static;
      order: -1;
    }
    .pretui-btn[data-busy-layout='inline'] .pretui-btn-label[data-scopedcss-0400e5c740-42919f8569] {
      opacity: 0.6;
    }
    .pretui-btn-busy-text[data-scopedcss-0400e5c740-42919f8569] {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    /* room for the spinner and @busyLabel: show the busy label */
    .pretui-btn[data-busy-layout='text'] .pretui-btn-busy-text[data-scopedcss-0400e5c740-42919f8569] {
      position: static;
      width: auto;
      height: auto;
      overflow: visible;
      clip-path: none;
    }
    @keyframes pretui-spin-data-scopedcss-0400e5c740-42919f8569 {
      to {
        transform: rotate(360deg);
      }
    }
    .pretui-spinner[data-scopedcss-0400e5c740-42919f8569] {
      width: 1.04em;
      height: 1.04em;
      border-radius: 50%;
      border: 1.5px solid color-mix(in oklch, currentColor 25%, transparent);
      border-top-color: currentColor;
      animation: pretui-spin-data-scopedcss-0400e5c740-42919f8569 0.7s linear infinite;
      flex: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .pretui-spinner[data-scopedcss-0400e5c740-42919f8569] {
        animation-duration: 1.6s;
      }
      .pretui-btn[data-scopedcss-0400e5c740-42919f8569]:active:not(:disabled, [aria-disabled='true']) {
        transform: none;
      }
    }
    /* forced colors drop backgrounds and shadows; the border above stays,
       and disabled needs a cue beyond opacity */
    @media (forced-colors: active) {
      .pretui-btn[data-scopedcss-0400e5c740-42919f8569]:disabled,
      .pretui-btn[aria-disabled='true'][data-scopedcss-0400e5c740-42919f8569] {
        color: GrayText;
        border-color: GrayText;
      }
    }
  }

  @layer PretComponent {
    .pretui-chip[data-scopedcss-91c2d778db-6ff4a71a72] {
      --pretui-chip-hue: var(--muted-foreground);
      --pretui-chip-height: 1.125rem;
      --pretui-chip-dot-size: 0.3125rem;

      display: inline-flex;
      align-items: center;
      gap: var(--boxel-sp-3xs);
      height: var(--pretui-chip-height);
      padding: 0 var(--boxel-sp-2xs);
      border-radius: var(--boxel-border-radius-xs);
      /* --text-ui-xs is the legacy size knob catalog chips still set */
      font-size: var(
        --pretui-chip-font-size,
        var(--text-ui-xs, var(--boxel-font-size-2xs))
      );
      font-weight: 500;
      letter-spacing: var(--boxel-lsp-xs);
      white-space: nowrap;
      /* --pretui-chip-mix / --pretui-ink-mix are legacy knobs catalog chips
         still set: 0% / 100% (unset) resolve to plain --muted / --foreground */
      background-color: color-mix(
        in oklch,
        var(--pretui-chip-hue) var(--pretui-chip-mix, 0%),
        var(--muted)
      );
      color: color-mix(
        in oklch,
        var(--foreground) var(--pretui-ink-mix, 100%),
        var(--pretui-chip-hue)
      );
      /* the hue hairline legacy chips were drawn with: any
         --pretui-chip-mix above 0% shows it at full strength, and the
         default 0% leaves it transparent */
      box-shadow: 0 0 0 1px
        color-mix(
          in oklch,
          color-mix(in oklch, var(--pretui-chip-hue) 45%, var(--border))
            min(calc(var(--pretui-chip-mix, 0%) * 100), 100%),
          transparent
        );
    }
    /* a toned chip is outlined on --card: its -ink draws the text and the
       ring (the fill hue misses 3:1 as a ring), the dot takes the tone */
    .pretui-chip[data-scopedcss-91c2d778db-6ff4a71a72]:not([data-tone='neutral']) {
      background-color: var(--card);
      box-shadow: inset 0 0 0 1px currentColor;
    }
    .pretui-chip[data-tone='primary'][data-scopedcss-91c2d778db-6ff4a71a72] {
      --pretui-chip-hue: var(--primary);

      color: var(--primary-ink);
    }
    .pretui-chip[data-tone='info'][data-scopedcss-91c2d778db-6ff4a71a72] {
      --pretui-chip-hue: var(--info);

      color: var(--info-ink);
    }
    .pretui-chip[data-tone='success'][data-scopedcss-91c2d778db-6ff4a71a72] {
      --pretui-chip-hue: var(--success);

      color: var(--success-ink);
    }
    .pretui-chip[data-tone='warning'][data-scopedcss-91c2d778db-6ff4a71a72] {
      --pretui-chip-hue: var(--warning);

      color: var(--warning-ink);
    }
    .pretui-chip[data-tone='danger'][data-scopedcss-91c2d778db-6ff4a71a72] {
      --pretui-chip-hue: var(--destructive);

      color: var(--destructive-ink);
    }
    .pretui-chip[data-tone='attention'][data-scopedcss-91c2d778db-6ff4a71a72] {
      --pretui-chip-hue: var(--attention);

      color: var(--attention-ink);
    }
    .pretui-chip-dot[data-scopedcss-91c2d778db-6ff4a71a72] {
      width: var(--pretui-chip-dot-size);
      height: var(--pretui-chip-dot-size);
      border-radius: 50%;
      background-color: var(--pretui-chip-hue);
      flex: none;
    }
  }